Clean up all lint warnings

packages/@react-aria/color/src/useColorField.ts

@@ -85,7 +85,7 @@ export function useColorField(
     } else if (e.deltaY < 0) {
       decrement();
     }
-  }, [isReadOnly, isDisabled, decrement, increment]);
+  }, [decrement, increment]);
   // If the input isn't supposed to receive input, disable scrolling.
   let scrollingDisabled = isDisabled || isReadOnly || !focusWithin;
   useScrollWheel({onScroll: onWheel, isDisabled: scrollingDisabled}, ref);

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

@@ -207,6 +207,7 @@ export function readFromDataTransfer(dataTransfer: DataTransfer) {
         // only implemented in Chrome.
         if (typeof item.webkitGetAsEntry === 'function') {
           let entry: FileSystemEntry = item.webkitGetAsEntry();
+          // eslint-disable-next-line max-depth
           if (!entry) {
             // For some reason, Firefox includes an item with type image/png when copy
             // and pasting any file or directory (no matter the type), but returns `null` for both
@@ -215,7 +216,7 @@ export function readFromDataTransfer(dataTransfer: DataTransfer) {
             // This was recently fixed in Chrome Canary: https://bugs.chromium.org/p/chromium/issues/detail?id=1175483.
             continue;
           }
-
+          // eslint-disable-next-line max-depth
           if (entry.isFile) {
             items.push(createFileItem(item.getAsFile()));
           } else if (entry.isDirectory) {

packages/@react-aria/dnd/stories/VirtualizedListBox.tsx

@@ -50,13 +50,11 @@ export function VirtualizedListBoxExample(props) {
       for (let item of e.items) {
         if (item.kind === 'text') {
           let type: string;
-          if (props.accept) {
-            if (item.types.has(props.accept)) {
-              type = props.accept;
-            }
-          } else if (item.types.has('folder')) {
+          if (props.accept && item.types.has(props.accept)) {
+            type = props.accept;
+          } else if (!props.accept && item.types.has('folder')) {
             type = 'folder';
-          } else if (item.types.has('item')) {
+          } else if (!props.accept && item.types.has('item')) {
             type = 'item';
           }
 

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

@@ -12,7 +12,7 @@
 
 import {FocusableDOMProps, FocusableProps} from '@react-types/shared';
 import {mergeProps, useSyncRef} 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]);
   useSyncRef(context, ref);
 
   return context;

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

@@ -232,5 +232,6 @@ export function useFocusVisibleListener(fn: FocusVisibleHandler, deps: ReadonlyA
     };
     changeHandlers.add(handler);
     return () => changeHandlers.delete(handler);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, deps);
 }

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

@@ -196,7 +196,7 @@ export function useHover(props: HoverProps): HoverResult {
     if (isDisabled) {
       triggerHoverEnd({target: state.target}, state.pointerType);
     }
-  }, [isDisabled]);
+  }, [triggerHoverEnd, isDisabled, state.target, state.pointerType]);
 
   return {
     hoverProps,

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

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

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

@@ -87,21 +87,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;
@@ -120,10 +105,10 @@ 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
-  useLayoutEffect(updatePosition, deps);
+  useLayoutEffect(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.childFocusStrategy, manager.isFocused, shouldUseVirtualFocus]);
+  }, [ref, isFocused, manager.focusedKey, manager.childFocusStrategy, 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/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/breadcrumbs/src/Breadcrumbs.tsx

@@ -118,11 +118,13 @@ 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});
 
-  useLayoutEffect(updateOverflow, [children]);
+  useLayoutEffect(updateOverflow, [updateOverflow]);
 
   let contents = childArray;
   if (childArray.length > visibleItems) {

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/buttongroup/src/ButtonGroup.tsx

@@ -65,6 +65,8 @@ function ButtonGroup(props: SpectrumButtonGroupProps, ref: DOMRef<HTMLDivElement
         yield computeHasOverflow();
       });
     }
+  // We need scale and children in dependency array since it will affect overflow calcuation
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [domRef, orientation, scale, setHasOverflow, children]);
 
   // There are two main reasons we need to remeasure:
@@ -77,7 +79,7 @@ function ButtonGroup(props: SpectrumButtonGroupProps, ref: DOMRef<HTMLDivElement
   let parent = useRef<HTMLElement>();
   useEffect(() => {
     parent.current = domRef.current.parentElement;
-  }, [domRef.current]);
+  }, [domRef]);
   useResizeObserver({ref: parent, onResize: checkForOverflow});
 
   return (

packages/@react-spectrum/buttongroup/test/ButtonGroup.test.js

@@ -165,7 +165,7 @@ function ButtonGroupWithRefs(props) {
       button2: button2.current.UNSAFE_getDOMNode(),
       button3: button3.current.UNSAFE_getDOMNode()
     });
-  }, []);
+  }, [props]);
   return (
     <Provider theme={theme}>
       <ButtonGroup ref={buttonGroup} data-testid={buttonGroupId} {...props}>

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';
@@ -303,7 +303,7 @@ function ComboBoxTray(props: ComboBoxTrayProps) {
       ...props,
       // completionMode,
       keyboardDelegate: layout,
-      buttonRef: unwrapDOMRef(buttonRef),
+      buttonRef: useUnwrapDOMRef(buttonRef),
       popoverRef: popoverRef,
       listBoxRef,
       inputRef

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

@@ -696,7 +696,7 @@ let customFilterItems = [
 let CustomFilterComboBox = (props) => {
   let {startsWith} = useFilter({sensitivity: 'base'});
   let [filterValue, setFilterValue] = React.useState('');
-  let filteredItems = React.useMemo(() => customFilterItems.filter(item => startsWith(item.name, filterValue)), [props.items, filterValue, startsWith]);
+  let filteredItems = React.useMemo(() => customFilterItems.filter(item => startsWith(item.name, filterValue)), [filterValue, startsWith]);
 
   return (
     <ComboBox

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) {
@@ -63,7 +63,7 @@ function DialogTrigger(props: SpectrumDialogTriggerProps) {
         console.warn('A DialogTrigger unmounted while open. This is likely due to being placed within a trigger that unmounts or inside a conditional. Consider using a DialogContainer instead.');
       }
     };
-  }, []);
+  }, [type]);
 
   if (type === 'popover') {
     return (
@@ -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';
@@ -60,7 +60,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: initialPlacement,
     shouldFlip: shouldFlip,