Clean up all lint warnings

packages/@react-aria/focus/src/useFocusable.tsx

@@ -12,7 +12,7 @@
 
 import {FocusableDOMProps, FocusableProps} from '@react-types/shared';
 import {mergeProps} from '@react-aria/utils';
-import React, {HTMLAttributes, MutableRefObject, ReactNode, RefObject, useContext, useEffect} from 'react';
+import React, {HTMLAttributes, MutableRefObject, ReactNode, RefObject, useContext, useEffect, useMemo} from 'react';
 import {useFocus, useKeyboard} from '@react-aria/interactions';
 
 interface FocusableOptions extends FocusableProps, FocusableDOMProps {
@@ -32,7 +32,8 @@ interface FocusableContextValue extends FocusableProviderProps {
 let FocusableContext = React.createContext<FocusableContextValue>(null);
 
 function useFocusableContext(ref: RefObject<HTMLElement>): FocusableContextValue {
-  let context = useContext(FocusableContext) || {};
+  let context = useContext(FocusableContext);
+  context = useMemo(() => context || {}, [context]);
 
   useEffect(() => {
     if (context && context.ref) {

packages/@react-aria/interactions/src/useInteractOutside.ts

@@ -100,7 +100,7 @@ export function useInteractOutside(props: InteractOutsideProps) {
       document.removeEventListener('touchstart', onPointerDown, true);
       document.removeEventListener('touchend', onTouchEnd, true);
     };
-  }, [onInteractOutside, ref, state.ignoreEmulatedMouseEvents, state.isPointerDown, isDisabled]);
+  }, [onInteractOutside, ref, state, isDisabled]);
 }
 
 function isValidEvent(event, ref) {

packages/@react-aria/numberfield/src/useNumberField.ts

@@ -141,7 +141,7 @@ export function useNumberField(props: NumberFieldProps, state: NumberFieldState,
         handleInputScrollWheel
       );
     };
-  }, [inputId, isReadOnly, isDisabled, decrement, increment]);
+  }, [inputId, isReadOnly, isDisabled, decrement, increment, ref]);
 
   let domProps = filterDOMProps(props, {labelable: true});
   let {labelProps, inputProps} = useTextField(

packages/@react-aria/overlays/src/useOverlayPosition.ts

@@ -86,21 +86,6 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
     placement: undefined
   });
 
-  let deps = [
-    shouldUpdatePosition,
-    placement,
-    overlayRef.current,
-    targetRef.current,
-    scrollRef.current,
-    containerPadding,
-    shouldFlip,
-    boundaryElement,
-    offset,
-    crossOffset,
-    isOpen,
-    direction
-  ];
-
   let updatePosition = useCallback(() => {
     if (shouldUpdatePosition === false || !isOpen || !overlayRef.current || !targetRef.current || !scrollRef.current || !boundaryElement) {
       return;
@@ -119,10 +104,11 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
         crossOffset
       })
     );
-  }, deps);
+
+  }, [shouldUpdatePosition, placement, overlayRef, targetRef, scrollRef, containerPadding, shouldFlip, boundaryElement, offset, crossOffset, isOpen, direction]);
 
   // Update position when anything changes
-  useEffect(updatePosition, deps);
+  useEffect(updatePosition, [updatePosition]);
 
   // Update position on window resize
   useResize(updatePosition);

packages/@react-aria/selection/src/useSelectableItem.ts

@@ -81,7 +81,7 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
         focusSafely(ref.current);
       }
     }
-  }, [ref, isFocused, manager.focusedKey, manager.isFocused, shouldUseVirtualFocus]);
+  }, [ref, isFocused, manager.focusedKey, manager.isFocused, shouldUseVirtualFocus, focus]);
 
   // Set tabIndex to 0 if the element is focused, or -1 otherwise so that only the last focused
   // item is tabbable.  If using virtual focus, don't set a tabIndex at all so that VoiceOver

packages/@react-aria/ssr/src/SSRProvider.tsx

@@ -75,7 +75,7 @@ export function useSSRSafeId(defaultId?: string): string {
     console.warn('When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are generated between the client and server.');
   }
 
-  return useMemo(() => defaultId || `react-aria-${ctx.prefix}-${++ctx.current}`, [defaultId]);
+  return useMemo(() => defaultId || `react-aria-${ctx.prefix}-${++ctx.current}`, [defaultId, ctx]);
 }
 
 /**

packages/@react-aria/utils/src/useGlobalListeners.ts

@@ -32,12 +32,14 @@ export function useGlobalListeners(): GlobalListeners {
 
   // eslint-disable-next-line arrow-body-style
   useEffect(() => {
+    // this will never be a different object from its first instance
+    let listeners = globalListeners.current;
     return () => {
-      globalListeners.current.forEach((value, key) => {
+      listeners.forEach((value, key) => {
         removeGlobalListener(value.eventTarget, value.type, key, value.options);
       });
     };
-  }, [removeGlobalListener]);
+  }, [removeGlobalListener, globalListeners]);
 
   return {addGlobalListener, removeGlobalListener};
 }

packages/@react-aria/utils/src/useId.ts

@@ -26,6 +26,7 @@ export function useId(defaultId?: string): string {
   let [value, setValue] = useState(defaultId);
   let nextId = useRef(null);
   // don't memo this, we want it new each render so that the Effects always run
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   let updateValue = (val) => {
     if (!isRendering.current) {
       setValue(val);

packages/@react-aria/virtualizer/src/ScrollView.tsx

@@ -120,6 +120,8 @@ function ScrollView(props: ScrollViewProps, ref: RefObject<HTMLDivElement>) {
     return () => {
       clearTimeout(state.scrollTimeout);
     };
+  // We only need to cleanup state.scrollTimeout on unmount here, don't want to constantly clearTimeout by including state.scrollTimeout in dep array
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   let updateSize = useCallback(() => {

packages/@react-aria/visually-hidden/src/VisuallyHidden.tsx

@@ -70,7 +70,7 @@ export function useVisuallyHidden(props: VisuallyHiddenProps = {}): VisuallyHidd
     } else {
       return styles;
     }
-  }, [isFocused]);
+  }, [isFocused, style]);
 
   return {
     visuallyHiddenProps: {

packages/@react-spectrum/actiongroup/src/ActionGroup.tsx

@@ -12,7 +12,7 @@
 
 import {ActionButton} from '@react-spectrum/button';
 import buttonStyles from '@adobe/spectrum-css-temp/components/button/vars.css';
-import {classNames, unwrapDOMRef, useDOMRef, useStyleProps} from '@react-spectrum/utils';
+import {classNames, useDOMRef, useStyleProps, useUnwrapDOMRef} from '@react-spectrum/utils';
 import {DOMProps, DOMRef, Node, StyleProps} from '@react-types/shared';
 import {ListState, useListState} from '@react-stately/list';
 import {mergeProps} from '@react-aria/utils';
@@ -97,7 +97,7 @@ interface ActionGroupItemProps<T> extends DOMProps, StyleProps {
 
 function ActionGroupItem<T>({item, state, isDisabled, isEmphasized, onAction}: ActionGroupItemProps<T>) {
   let ref = useRef();
-  let {buttonProps} = useActionGroupItem({key: item.key}, state, unwrapDOMRef(ref));
+  let {buttonProps} = useActionGroupItem({key: item.key}, state, useUnwrapDOMRef(ref));
   isDisabled = isDisabled || state.disabledKeys.has(item.key);
   let isSelected = state.selectionManager.isSelected(item.key);
   let {hoverProps, isHovered} = useHover({isDisabled});

packages/@react-spectrum/breadcrumbs/src/Breadcrumbs.tsx

@@ -118,10 +118,14 @@ function Breadcrumbs<T>(props: SpectrumBreadcrumbsProps<T>, ref: DOMRef) {
         yield computeVisibleItems(newVisibleItems);
       }
     });
+  // Don't need to include childArray.length in dep array cuz children is already in array
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [listRef, children, setVisibleItems, showRoot, isMultiline]);
 
   useResizeObserver({ref: domRef, onResize: updateOverflow});
 
+  // Don't need to include updateOverflow in dep array cuz children is already in array
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useLayoutEffect(updateOverflow, [children]);
 
   let contents = childArray;

packages/@react-spectrum/breadcrumbs/stories/Breadcrumbs.stories.tsx

@@ -12,6 +12,8 @@
 
 import {action} from '@storybook/addon-actions';
 import {Breadcrumbs} from '../';
+import {Button} from '@react-spectrum/button';
+import {ButtonGroup} from '@react-spectrum/buttongroup';
 // import {Heading} from '@react-spectrum/text';
 import {Item} from '@react-stately/collections';
 import React from 'react';
@@ -136,6 +138,10 @@ storiesOf('Breadcrumbs', module)
         <Item>Root</Item>
       </Breadcrumbs>
     )
+  )
+  .add(
+    'adding breadcrumbs',
+    () => <DynamicBreadcrumbs />
   );
 
 function render(props = {}) {
@@ -179,3 +185,44 @@ function renderMany(props = {}) {
     </Breadcrumbs>
   );
 }
+
+let folders = [
+  {id: 1, label: 'Home'},
+  {id: 2, label: 'Trendy'},
+  {id: 3, label: 'March 2020 Assets'}
+];
+
+let DynamicBreadcrumbs = () => {
+  let [breadcrumbs, setBreadcrumbs] = React.useState(folders);
+  let addBreadcrumb = () => {
+    let newBreadcrumbs = [...breadcrumbs];
+    newBreadcrumbs.push({
+      id: breadcrumbs.length + 1,
+      label: `Breadcrumb ${breadcrumbs.length + 1}`
+    });
+
+    setBreadcrumbs(newBreadcrumbs);
+  };
+
+  let removeBreadcrumb = () => {
+    let newBreadcrumbs = [...breadcrumbs];
+    newBreadcrumbs.pop();
+    setBreadcrumbs(newBreadcrumbs);
+  };
+
+  return (
+    <div>
+      <Breadcrumbs>
+        {breadcrumbs.map(f => <Item key={f.id}>{f.label}</Item>)}
+      </Breadcrumbs>
+      <ButtonGroup marginEnd="30px">
+        <Button variant="secondary" onPress={() => addBreadcrumb()}>
+          Add Breadcrumb
+        </Button>
+        <Button variant="secondary" onPress={() => removeBreadcrumb()}>
+          Remove Breadcrumb
+        </Button>
+      </ButtonGroup>
+    </div>
+  );
+};

packages/@react-spectrum/combobox/src/ComboBox.tsx

@@ -12,7 +12,7 @@
 
 import {AriaButtonProps} from '@react-types/button';
 import ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium';
-import {classNames, unwrapDOMRef, useFocusableRef, useIsMobileDevice} from '@react-spectrum/utils';
+import {classNames, useFocusableRef, useIsMobileDevice, useUnwrapDOMRef} from '@react-spectrum/utils';
 import {DismissButton, useOverlayPosition} from '@react-aria/overlays';
 import {DOMRefValue, FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {Field} from '@react-spectrum/label';
@@ -52,7 +52,9 @@ const ComboBoxBase = React.forwardRef(function ComboBoxBase<T extends object>(pr
   } = props;
 
   let popoverRef = useRef<DOMRefValue<HTMLDivElement>>();
+  let unwrappedPopoverRef = useUnwrapDOMRef(popoverRef);
   let buttonRef = useRef<FocusableRefValue<HTMLElement>>();
+  let unwrappedButtonRef = useUnwrapDOMRef(buttonRef);
   let listBoxRef = useRef();
   let inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>();
   let domRef = useFocusableRef(ref, inputRef);
@@ -65,8 +67,8 @@ const ComboBoxBase = React.forwardRef(function ComboBoxBase<T extends object>(pr
     {
       ...props,
       keyboardDelegate: layout,
-      buttonRef: unwrapDOMRef(buttonRef),
-      popoverRef: unwrapDOMRef(popoverRef),
+      buttonRef: unwrappedButtonRef,
+      popoverRef: unwrappedPopoverRef,
       listBoxRef,
       inputRef: inputRef,
       menuTrigger
@@ -75,8 +77,8 @@ const ComboBoxBase = React.forwardRef(function ComboBoxBase<T extends object>(pr
   );
 
   let {overlayProps, placement} = useOverlayPosition({
-    targetRef: unwrapDOMRef(buttonRef),
-    overlayRef: unwrapDOMRef(popoverRef),
+    targetRef: unwrappedButtonRef,
+    overlayRef: unwrappedPopoverRef,
     scrollRef: listBoxRef,
     placement: `${direction} end` as Placement,
     shouldFlip: shouldFlip,

packages/@react-spectrum/combobox/src/MobileComboBox.tsx

@@ -15,7 +15,7 @@ import {AriaButtonProps} from '@react-types/button';
 import buttonStyles from '@adobe/spectrum-css-temp/components/button/vars.css';
 import CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';
 import ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium';
-import {classNames, unwrapDOMRef} from '@react-spectrum/utils';
+import {classNames, useUnwrapDOMRef} from '@react-spectrum/utils';
 import {ClearButton} from '@react-spectrum/button';
 import {ComboBoxState, useComboBoxState} from '@react-stately/combobox';
 import comboboxStyles from './combobox.css';
@@ -289,7 +289,7 @@ function ComboBoxTray(props: ComboBoxTrayProps) {
       ...props,
       // completionMode,
       keyboardDelegate: layout,
-      buttonRef: unwrapDOMRef(buttonRef),
+      buttonRef: useUnwrapDOMRef(buttonRef),
       popoverRef: popoverRef,
       listBoxRef,
       inputRef,

packages/@react-spectrum/dialog/src/Dialog.tsx

@@ -11,7 +11,7 @@
  */
 
 import {ActionButton} from '@react-spectrum/button';
-import {classNames, SlotProvider, unwrapDOMRef, useDOMRef, useHasChild, useStyleProps} from '@react-spectrum/utils';
+import {classNames, SlotProvider, useDOMRef, useHasChild, useStyleProps, useUnwrapDOMRef} from '@react-spectrum/utils';
 import CrossLarge from '@spectrum-icons/ui/CrossLarge';
 import {DialogContext, DialogContextValue} from './context';
 import {DismissButton} from '@react-aria/overlays';
@@ -54,11 +54,12 @@ function Dialog(props: SpectrumDialogProps, ref: DOMRef) {
 
   let domRef = useDOMRef(ref);
   let gridRef = useRef();
+  let unwrappedGridRef = useUnwrapDOMRef(gridRef);
   let sizeVariant = sizeMap[type] || sizeMap[size];
   let {dialogProps, titleProps} = useDialog(mergeProps(contextProps, props), domRef);
 
-  let hasHeader = useHasChild(`.${styles['spectrum-Dialog-header']}`, unwrapDOMRef(gridRef));
-  let hasFooter = useHasChild(`.${styles['spectrum-Dialog-footer']}`, unwrapDOMRef(gridRef));
+  let hasHeader = useHasChild(`.${styles['spectrum-Dialog-header']}`, unwrappedGridRef);
+  let hasFooter = useHasChild(`.${styles['spectrum-Dialog-footer']}`, unwrappedGridRef);
 
   let slots = {
     hero: {UNSAFE_className: styles['spectrum-Dialog-hero']},

packages/@react-spectrum/dialog/src/DialogTrigger.tsx

@@ -17,7 +17,7 @@ import {OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overla
 import {PressResponder} from '@react-aria/interactions';
 import React, {Fragment, ReactElement, useEffect, useRef} from 'react';
 import {SpectrumDialogClose, SpectrumDialogProps, SpectrumDialogTriggerProps} from '@react-types/dialog';
-import {unwrapDOMRef, useMediaQuery} from '@react-spectrum/utils';
+import {useMediaQuery, useUnwrapDOMRef} from '@react-spectrum/utils';
 import {useOverlayPosition, useOverlayTrigger} from '@react-aria/overlays';
 
 function DialogTrigger(props: SpectrumDialogTriggerProps) {
@@ -148,7 +148,7 @@ function PopoverTrigger({state, targetRef, trigger, content, hideArrow, isKeyboa
   let overlayRef = useRef<DOMRefValue<HTMLDivElement>>();
   let {overlayProps: popoverProps, placement, arrowProps} = useOverlayPosition({
     targetRef: targetRef || triggerRef,
-    overlayRef: unwrapDOMRef(overlayRef),
+    overlayRef: useUnwrapDOMRef(overlayRef),
     placement: props.placement,
     containerPadding: props.containerPadding,
     offset: props.offset,

packages/@react-spectrum/menu/src/MenuTrigger.tsx

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {classNames, unwrapDOMRef, useDOMRef, useIsMobileDevice} from '@react-spectrum/utils';
+import {classNames, useDOMRef, useIsMobileDevice, useUnwrapDOMRef} from '@react-spectrum/utils';
 import {DismissButton, useOverlayPosition} from '@react-aria/overlays';
 import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {FocusScope} from '@react-aria/focus';
@@ -46,7 +46,7 @@ function MenuTrigger(props: SpectrumMenuTriggerProps, ref: DOMRef<HTMLElement>)
   let isMobile = useIsMobileDevice();
   let {overlayProps: positionProps, placement} = useOverlayPosition({
     targetRef: menuTriggerRef,
-    overlayRef: unwrapDOMRef(menuPopoverRef),
+    overlayRef: useUnwrapDOMRef(menuPopoverRef),
     scrollRef: menuRef,
     placement: `${direction} ${align}` as Placement,
     shouldFlip: shouldFlip,