Clean up lint warnings (adobe#3612)

* fix relative imports

* fix max-depth

* ignore exhaustive-deps

* ignore no-noninteractive-element-interactions

Author: reidbarber

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

@@ -216,6 +216,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
@@ -225,6 +226,7 @@ export function readFromDataTransfer(dataTransfer: DataTransfer) {
             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

@@ -49,10 +49,8 @@ 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;
-            }
+          if (props.accept && item.types.has(props.accept)) {
+            type = props.accept;
           } else if (item.types.has('folder')) {
             type = 'folder';
           } else if (item.types.has('item')) {

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

@@ -499,6 +499,7 @@ function useRestoreFocus(scopeRef: RefObject<Element[]>, restoreFocus: boolean,
       document.removeEventListener('focusin', onFocus, false);
       scope.forEach(element => element.removeEventListener('focusin', onFocus, false));
     };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [scopeRef, contain]);
 
   // useLayoutEffect instead of useEffect so the active element is saved synchronously instead of asynchronously.
@@ -578,6 +579,7 @@ function useRestoreFocus(scopeRef: RefObject<Element[]>, restoreFocus: boolean,
         restoreFocus
         && nodeToRestore
         && (
+          // eslint-disable-next-line react-hooks/exhaustive-deps
           isElementInScope(document.activeElement, scopeRef.current)
           || (document.activeElement === document.body && shouldRestoreFocus(scopeRef))
         )

packages/@react-aria/focus/stories/FocusScope.stories.tsx

@@ -61,6 +61,7 @@ function NestedDialog({onClose, isPortaled, contain}: {onClose: VoidFunction, is
     <MaybePortal isPortaled={isPortaled}>
       <FocusScope contain={contain} restoreFocus autoFocus>
         {!showNew && (
+          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
           <div role="dialog" onKeyDown={onKeyDown}>
             <input />
             <input />
@@ -76,6 +77,7 @@ function NestedDialog({onClose, isPortaled, contain}: {onClose: VoidFunction, is
           </div>
         )}
         {showNew && (
+          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
           <div role="dialog" onKeyDown={onKeyDown}>
             <input />
             <input autoFocus />

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

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

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

@@ -197,6 +197,7 @@ export function useHover(props: HoverProps): HoverResult {
     if (isDisabled) {
       triggerHoverEnd({currentTarget: state.target}, state.pointerType);
     }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isDisabled]);
 
   return {

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

@@ -655,6 +655,7 @@ export function usePress(props: PressHookProps): PressResult {
   useEffect(() => {
     return () => {
       if (!allowTextSelectionOnPress) {
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         restoreTextSelection(ref.current.target);
       }
     };

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

@@ -129,9 +129,11 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
         maxHeight
       })
     );
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, deps);
 
   // Update position when anything changes
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useLayoutEffect(updatePosition, deps);
 
   // Update position on window resize

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

@@ -144,6 +144,7 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
         focusSafely(ref.current);
       }
     }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ref, key, manager.focusedKey, manager.childFocusStrategy, manager.isFocused, shouldUseVirtualFocus]);
 
   // Set tabIndex to 0 if the element is focused, or -1 otherwise so that only the last focused

packages/@react-aria/spinbutton/src/useSpinButton.ts

@@ -150,6 +150,7 @@ export function useSpinButton(
         initialStepDelay
       );
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [onIncrement, maxValue, value]
   );
 
@@ -167,6 +168,7 @@ export function useSpinButton(
         initialStepDelay
       );
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [onDecrement, minValue, value]
   );
 

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

@@ -79,6 +79,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.');
   }
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   return useMemo(() => defaultId || `react-aria${ctx.prefix}-${++ctx.current}`, [defaultId]);
 }
 

packages/@react-aria/table/src/useTable.ts

@@ -106,6 +106,7 @@ export function useTable<T>(props: AriaTableProps<T>, state: TableState<T>, ref:
   let sortDescription = useMemo(() => {
     let columnName = state.collection.columns.find(c => c.key === column)?.textValue;
     return sortDirection && column ? stringFormatter.format(`${sortDirection}Sort`, {columnName}) : undefined;
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [sortDirection, column, state.collection.columns]);
 
   let descriptionProps = useDescription(sortDescription);

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

@@ -120,6 +120,7 @@ function ScrollView(props: ScrollViewProps, ref: RefObject<HTMLDivElement>) {
     return () => {
       clearTimeout(state.scrollTimeout);
     };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   let updateSize = useCallback(() => {

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

@@ -71,6 +71,7 @@ export function useVisuallyHidden(props: VisuallyHiddenProps = {}): VisuallyHidd
     } else {
       return styles;
     }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isFocused]);
 
   return {

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

@@ -131,6 +131,7 @@ function Breadcrumbs<T>(props: SpectrumBreadcrumbsProps<T>, ref: DOMRef) {
 
   useResizeObserver({ref: domRef, onResize: updateOverflow});
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useLayoutEffect(updateOverflow, [children]);
 
   let contents = childArray;

packages/@react-spectrum/buttongroup/src/ButtonGroup.tsx

@@ -64,6 +64,7 @@ function ButtonGroup(props: SpectrumButtonGroupProps, ref: DOMRef<HTMLDivElement
         yield computeHasOverflow();
       });
     }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [domRef, orientation, scale, setHasOverflow, children]);
 
   // There are two main reasons we need to remeasure:
@@ -78,6 +79,7 @@ function ButtonGroup(props: SpectrumButtonGroupProps, ref: DOMRef<HTMLDivElement
     if (domRef.current) {
       parent.current = domRef.current.parentElement as HTMLElement;
     }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [domRef.current]);
   useResizeObserver({ref: parent, onResize: checkForOverflow});
 

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

@@ -164,6 +164,7 @@ function ButtonGroupWithRefs(props) {
       button2: button2.current.UNSAFE_getDOMNode(),
       button3: button3.current.UNSAFE_getDOMNode()
     });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return (
     <Provider theme={theme}>

packages/@react-spectrum/card/src/CardBase.tsx

@@ -93,6 +93,7 @@ function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDiv
     heading: {UNSAFE_className: classNames(styles, 'spectrum-Card-heading'), ...titleProps},
     content: {UNSAFE_className: classNames(styles, 'spectrum-Card-content'), ...contentProps},
     detail: {UNSAFE_className: classNames(styles, 'spectrum-Card-detail')}
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }), [titleProps, contentProps, height, isQuiet, orientation]);
 
   useLayoutEffect(() => {

packages/@react-spectrum/card/src/GalleryLayout.tsx

@@ -109,6 +109,7 @@ export class GalleryLayout<T> extends BaseLayout<T> {
           if (widths[item[0]][1] > this.minItemSize.width) {
             // subtract the delta from the width, if it's still greater than the min width
             // then we have finished, subtract the delta permanently from that width
+            // eslint-disable-next-line max-depth
             if (widths[item[0]][1] - delta > this.minItemSize.width) {
               widths[item[0]][1] -= delta;
               delta = 0;

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

@@ -740,6 +740,7 @@ let customFilterItems = [
 let CustomFilterComboBox = (props) => {
   let {startsWith} = useFilter({sensitivity: 'base'});
   let [filterValue, setFilterValue] = React.useState('');
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   let filteredItems = React.useMemo(() => customFilterItems.filter(item => startsWith(item.name, filterValue)), [props.items, filterValue, startsWith]);
 
   return (

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

@@ -71,6 +71,7 @@ function Dialog(props: SpectrumDialogProps, ref: DOMRef) {
     content: {UNSAFE_className: styles['spectrum-Dialog-content']},
     footer: {UNSAFE_className: styles['spectrum-Dialog-footer']},
     buttonGroup: {UNSAFE_className: classNames(styles, 'spectrum-Dialog-buttonGroup', {'spectrum-Dialog-buttonGroup--noFooter': !hasFooter}), align: 'end'}
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }), [hasFooter, hasHeader, titleProps]);
 
   // If rendered in a popover or tray there won't be a visible dismiss button,

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

@@ -63,6 +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.');
       }
     };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   if (type === 'popover') {

packages/@react-spectrum/label/src/Field.tsx

@@ -165,6 +165,7 @@ function Field(props: SpectrumFieldProps, ref: RefObject<HTMLElement>) {
 }
 
 function useMergeRefs<T>(...refs: ForwardedRef<T>[]): (instance: (T | null)) => void {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   return useCallback(
     mergeRefs(...refs) as (instance: (T | null)) => void,
     [...refs]

packages/@react-spectrum/list/src/ListView.tsx

@@ -194,6 +194,7 @@ function ListView<T extends object>(props: SpectrumListViewProps<T>, ref: DOMRef
   // wait for layout to get accurate measurements
   let [isVerticalScrollbarVisible, setVerticalScollbarVisible] = useState(false);
   let [isHorizontalScrollbarVisible, setHorizontalScollbarVisible] = useState(false);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useLayoutEffect(() => {
     if (domRef.current) {
       // 2 is the width of the border which is not part of the box size

packages/@react-spectrum/list/stories/ListView.stories.tsx

@@ -1,5 +1,5 @@
 import {action} from '@storybook/addon-actions';
-import {ActionBar, ActionBarContainer} from '../../actionbar';
+import {ActionBar, ActionBarContainer} from '@react-spectrum/actionbar';
 import {ActionButton} from '@react-spectrum/button';
 import {ActionGroup} from '@react-spectrum/actiongroup';
 import {ActionMenu} from '@react-spectrum/menu';

packages/@react-spectrum/menu/stories/ActionMenu.stories.tsx

@@ -14,13 +14,13 @@ import {action} from '@storybook/addon-actions';
 import {ActionMenu} from '..';
 import {Alignment} from '@react-types/shared';
 import {Checkbox} from '@react-spectrum/checkbox';
-import {Flex} from '../../layout';
+import {Flex} from '@react-spectrum/layout';
 import {Item} from '../';
 import {Meta, Story} from '@storybook/react';
-import {Picker} from '../../picker';
+import {Picker} from '@react-spectrum/picker';
 import React, {useState} from 'react';
 import {SpectrumActionMenuProps} from '@react-types/menu';
-import {Tooltip, TooltipTrigger} from '../../tooltip';
+import {Tooltip, TooltipTrigger} from '@react-spectrum/tooltip';
 
 const meta: Meta<SpectrumActionMenuProps<object>> = {
   title: 'ActionMenu',

packages/@react-spectrum/searchwithin/chromatic/SearchWithin.chromatic.tsx

@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {generatePowerset} from '../../story-utils';
-import {Grid, repeat} from '../../layout';
+import {generatePowerset} from '@react-spectrum/story-utils';
+import {Grid, repeat} from '@react-spectrum/layout';
 import {Item, Picker} from '@react-spectrum/picker';
 import {Meta, Story} from '@storybook/react';
 import React from 'react';

packages/@react-spectrum/table/src/TableView.tsx

@@ -440,6 +440,7 @@ function TableVirtualizer({layout, collection, lastResizeInteractionModality, fo
         onLoadMore();
       }
     }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [onLoadMore, isLoading, state.setVisibleRect, state.virtualizer]);
 
   useLayoutEffect(() => {
@@ -648,6 +649,7 @@ function ResizableTableColumnHeader(props) {
       }
     ];
     return options;
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [allowsSorting]);
 
   useEffect(() => {
@@ -659,6 +661,7 @@ function ResizableTableColumnHeader(props) {
         onFocusedResizer();
       }, 0);
     }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [columnState.currentlyResizingColumn, column.key]);
 
   let showResizer = !isEmpty && ((headerRowHovered && getInteractionModality() !== 'keyboard') || columnState.currentlyResizingColumn != null);

packages/@react-spectrum/tag/src/TagGroup.tsx

@@ -51,6 +51,7 @@ function TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, ref: DOMRef
         childNodes
       };
     })
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }), [listState.collection, isRemovable]);
   let state = useGridState({
     ...props,

packages/@react-spectrum/utils/src/BreakpointProvider.tsx

@@ -78,6 +78,7 @@ export function useMatchedBreakpoints(breakpoints: Breakpoints): string[] {
     return () => {
       window.removeEventListener('resize', onResize);
     };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [supportsMatchMedia]);
 
   // If in SSR, the media query should never match. Once the page hydrates,

packages/@react-spectrum/utils/src/Slots.tsx

@@ -34,6 +34,7 @@ export function cssModuleToSlots(cssModule) {
 }
 
 export function SlotProvider(props) {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   let parentSlots = useContext(SlotContext) || {};
   let {slots = {}, children} = props;
 

packages/@react-stately/list/src/useListState.ts

@@ -56,6 +56,7 @@ export function useListState<T extends object>(props: ListProps<T>): ListState<T
     if (selectionState.focusedKey != null && !collection.getItem(selectionState.focusedKey)) {
       selectionState.setFocusedKey(null);
     }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [collection, selectionState.focusedKey]);
 
   return {

packages/@react-stately/table/src/TableCollection.ts

@@ -47,6 +47,7 @@ function buildHeaderRows<T>(keyMap: Map<Key, GridNode<T>>, columnNodes: GridNode
 
         // Adjust shifted indices
         for (let i = col.length; i < column.length; i++) {
+          // eslint-disable-next-line max-depth
           if (column[i] && seen.has(column[i])) {
             seen.get(column[i]).index = i;
           }
@@ -90,6 +91,7 @@ function buildHeaderRows<T>(keyMap: Map<Key, GridNode<T>>, columnNodes: GridNode
             textValue: null
           };
 
+          // eslint-disable-next-line max-depth
           if (row.length > 0) {
             row[row.length - 1].nextKey = placeholder.key;
             placeholder.prevKey = row[row.length - 1].key;

packages/@react-stately/table/src/useTableColumnResizeState.ts

@@ -193,6 +193,7 @@ export function useTableColumnResizeState<T>(props: TableColumnResizeStateProps,
   }
 
   // This function is regenerated whenever columnWidthsRef.current changes in order to get the new correct ref value.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   let getColumnWidth = useCallback((key: Key): number => columnWidthsRef.current.get(key) ?? 0, [columnWidthsRef.current]);
 
   let getColumnMinWidth = useCallback((key: Key) => {

packages/@react-stately/table/src/useTableState.ts

@@ -61,6 +61,7 @@ export function useTableState<T extends object>(props: TableStateProps<T>): Tabl
     showSelectionCheckboxes: props.showSelectionCheckboxes && selectionMode !== 'none',
     selectionMode,
     columns: []
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }), [props.children, props.showSelectionCheckboxes, selectionMode]);
 
   let collection = useCollection<T, TableCollection<T>>(

packages/@react-stately/tree/src/useTreeState.ts

@@ -58,6 +58,7 @@ export function useTreeState<T extends object>(props: TreeProps<T>): TreeState<T
     if (selectionState.focusedKey != null && !tree.getItem(selectionState.focusedKey)) {
       selectionState.setFocusedKey(null);
     }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tree, selectionState.focusedKey]);
 
   let onToggle = (key: Key) => {

packages/@react-stately/virtualizer/src/useVirtualizerState.ts

@@ -77,6 +77,7 @@ export function useVirtualizerState<T extends object, V, W>(opts: VirtualizerPro
   // eslint-disable-next-line arrow-body-style
   useEffect(() => {
     return () => virtualizer.willUnmount();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return {

packages/dev/docs/src/PropTable.js

@@ -106,6 +106,7 @@ function groupProps(props) {
     for (let propName of GROUPS[group]) {
       if (propName instanceof RegExp) {
         for (let key in props) {
+          // eslint-disable-next-line max-depth
           if (propName.test(key)) {
             groupProps[key] = props[key];
             delete props[key];