fix all lint errors

Author: snowystinger

packages/@react-aria/autocomplete/src/useAutocomplete.ts

@@ -13,7 +13,7 @@
 import {AriaLabelingProps, BaseEvent, DOMProps, FocusableElement, FocusEvents, KeyboardEvents, Node, RefObject, ValueBase} from '@react-types/shared';
 import {AriaTextFieldProps} from '@react-aria/textfield';
 import {AutocompleteProps, AutocompleteState} from '@react-stately/autocomplete';
-import {CLEAR_FOCUS_EVENT, FOCUS_EVENT, getActiveElement, getOwnerDocument, isAndroid, isCtrlKeyPressed, isIOS, mergeProps, mergeRefs, useEffectEvent, useEvent, useId, useLabels, useObjectRef} from '@react-aria/utils';
+import {CLEAR_FOCUS_EVENT, FOCUS_EVENT, getActiveElement, getOwnerDocument, isAndroid, isCtrlKeyPressed, isIOS, mergeProps, mergeRefs, useEvent, useId, useLabels, useObjectRef, useStableCallback} from '@react-aria/utils';
 import {dispatchVirtualBlur, dispatchVirtualFocus, getVirtuallyFocusedElement, moveVirtualFocus} from '@react-aria/focus';
 import {getInteractionModality} from '@react-aria/interactions';
 // @ts-ignore
@@ -106,7 +106,7 @@ export function useAutocomplete<T>(props: AriaAutocompleteOptions<T>, state: Aut
  return () => clearTimeout(timeout.current);
  }, []);
 
- let updateActiveDescendant = useEffectEvent((e: Event) => {
+ let updateActiveDescendant = useStableCallback((e: Event) => {
  // Ensure input is focused if the user clicks on the collection directly.
  if (!e.isTrusted && shouldUseVirtualFocus && inputRef.current && getActiveElement(getOwnerDocument(inputRef.current)) !== inputRef.current) {
  inputRef.current.focus();
@@ -165,7 +165,7 @@ export function useAutocomplete<T>(props: AriaAutocompleteOptions<T>, state: Aut
  // Make sure to memo so that React doesn't keep registering a new event listeners on every rerender of the wrapped collection
  let mergedCollectionRef = useObjectRef(useMemo(() => mergeRefs(collectionRef, callbackRef), [collectionRef, callbackRef]));
 
- let focusFirstItem = useEffectEvent(() => {
+ let focusFirstItem = useStableCallback(() => {
  delayNextActiveDescendant.current = true;
  collectionRef.current?.dispatchEvent(
  new CustomEvent(FOCUS_EVENT, {
@@ -178,7 +178,7 @@ export function useAutocomplete<T>(props: AriaAutocompleteOptions<T>, state: Aut
  );
  });
 
- let clearVirtualFocus = useEffectEvent((clearFocusKey?: boolean) => {
+ let clearVirtualFocus = useStableCallback((clearFocusKey?: boolean) => {
  moveVirtualFocus(getActiveElement());
  queuedActiveDescendant.current = null;
  state.setFocusedNodeId(null);
@@ -321,7 +321,7 @@ export function useAutocomplete<T>(props: AriaAutocompleteOptions<T>, state: Aut
  }
  };
 
- let onKeyUpCapture = useEffectEvent((e) => {
+ let onKeyUpCapture = useStableCallback((e) => {
  // Dispatch simulated key up events for things like triggering links in listbox
  // Make sure to stop the propagation of the input keyup event so that the simulated keyup/down pair
  // is detected by usePress instead of the original keyup originating from the input

packages/@react-aria/grid/src/useGridSelectionAnnouncement.ts

@@ -15,9 +15,9 @@ import {Collection, Key, Node, Selection} from '@react-types/shared';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {SelectionManager} from '@react-stately/selection';
-import {useEffectEvent, useUpdateEffect} from '@react-aria/utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useRef} from 'react';
+import {useStableCallback, useUpdateEffect} from '@react-aria/utils';
 
 export interface GridSelectionAnnouncementProps {
  /**
@@ -46,7 +46,7 @@ export function useGridSelectionAnnouncement<T>(props: GridSelectionAnnouncement
  // We do this using an ARIA live region.
  let selection = state.selectionManager.rawSelection;
  let lastSelection = useRef(selection);
- let announceSelectionChange = useEffectEvent(() => {
+ let announceSelectionChange = useStableCallback(() => {
  if (!state.selectionManager.isFocused || selection === lastSelection.current) {
  lastSelection.current = selection;
 

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

@@ -13,7 +13,7 @@
 import {disableTextSelection, restoreTextSelection} from './textSelection';
 import {DOMAttributes, MoveEvents, PointerType} from '@react-types/shared';
 import React, {useMemo, useRef} from 'react';
-import {useEffectEvent, useGlobalListeners} from '@react-aria/utils';
+import {useGlobalListeners, useStableCallback} from '@react-aria/utils';
 
 export interface MoveResult {
  /** Props to spread on the target element. */
@@ -43,7 +43,7 @@ export function useMove(props: MoveEvents): MoveResult {
 
  let {addGlobalListener, removeGlobalListener} = useGlobalListeners();
 
- let move = useEffectEvent((originalEvent: EventBase, pointerType: PointerType, deltaX: number, deltaY: number) => {
+ let move = useStableCallback((originalEvent: EventBase, pointerType: PointerType, deltaX: number, deltaY: number) => {
  if (deltaX === 0 && deltaY === 0) {
  return;
  }
@@ -71,7 +71,7 @@ export function useMove(props: MoveEvents): MoveResult {
  });
  });
 
- let end = useEffectEvent((originalEvent: EventBase, pointerType: PointerType) => {
+ let end = useStableCallback((originalEvent: EventBase, pointerType: PointerType) => {
  restoreTextSelection();
  if (state.current.didMove) {
  onMoveEnd?.({

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

@@ -27,8 +27,8 @@ import {
  mergeProps,
  nodeContains,
  openLink,
- useEffectEvent,
  useGlobalListeners,
+ useStableCallback,
  useSyncRef
 } from '@react-aria/utils';
 import {createSyntheticEvent, preventFocus, setEventTarget} from './utils';
@@ -197,7 +197,7 @@ export function usePress(props: PressHookProps): PressResult {
 
  let {addGlobalListener, removeAllGlobalListeners} = useGlobalListeners();
 
- let triggerPressStart = useEffectEvent((originalEvent: EventBase, pointerType: PointerType) => {
+ let triggerPressStart = useStableCallback((originalEvent: EventBase, pointerType: PointerType) => {
  let state = ref.current;
  if (isDisabled || state.didFirePressStart) {
  return false;
@@ -221,7 +221,7 @@ export function usePress(props: PressHookProps): PressResult {
  return shouldStopPropagation;
  });
 
- let triggerPressEnd = useEffectEvent((originalEvent: EventBase, pointerType: PointerType, wasPressed = true) => {
+ let triggerPressEnd = useStableCallback((originalEvent: EventBase, pointerType: PointerType, wasPressed = true) => {
  let state = ref.current;
  if (!state.didFirePressStart) {
  return false;
@@ -253,7 +253,7 @@ export function usePress(props: PressHookProps): PressResult {
  return shouldStopPropagation;
  });
 
- let triggerPressUp = useEffectEvent((originalEvent: EventBase, pointerType: PointerType) => {
+ let triggerPressUp = useStableCallback((originalEvent: EventBase, pointerType: PointerType) => {
  let state = ref.current;
  if (isDisabled) {
  return false;
@@ -270,7 +270,7 @@ export function usePress(props: PressHookProps): PressResult {
  return true;
  });
 
- let cancel = useEffectEvent((e: EventBase) => {
+ let cancel = useStableCallback((e: EventBase) => {
  let state = ref.current;
  if (state.isPressed && state.target) {
  if (state.didFirePressStart && state.pointerType != null) {
@@ -291,21 +291,21 @@ export function usePress(props: PressHookProps): PressResult {
  }
  });
 
- let cancelOnPointerExit = useEffectEvent((e: EventBase) => {
+ let cancelOnPointerExit = useStableCallback((e: EventBase) => {
  if (shouldCancelOnPointerExit) {
  cancel(e);
  }
  });
 
- let triggerClick = useEffectEvent((e: RMouseEvent<FocusableElement>) => {
+ let triggerClick = useStableCallback((e: RMouseEvent<FocusableElement>) => {
  if (isDisabled) {
  return;
  }
 
  onClick?.(e);
  });
 
- let triggerSyntheticClick = useEffectEvent((e: KeyboardEvent | TouchEvent, target: FocusableElement) => {
+ let triggerSyntheticClick = useStableCallback((e: KeyboardEvent | TouchEvent, target: FocusableElement) => {
  if (isDisabled) {
  return;
  }

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

@@ -11,7 +11,7 @@
  */
 
 import {FocusableElement} from '@react-types/shared';
-import {focusWithoutScrolling, getOwnerWindow, isFocusable, useEffectEvent, useLayoutEffect} from '@react-aria/utils';
+import {focusWithoutScrolling, getOwnerWindow, isFocusable, useLayoutEffect, useStableCallback} from '@react-aria/utils';
 import {FocusEvent as ReactFocusEvent, SyntheticEvent, useCallback, useRef} from 'react';
 
 // Turn a native event into a React synthetic event.
@@ -48,7 +48,7 @@ export function useSyntheticBlurEvent<Target extends Element = Element>(onBlur:
  };
  }, []);
 
- let dispatchBlur = useEffectEvent((e: ReactFocusEvent<Target>) => {
+ let dispatchBlur = useStableCallback((e: ReactFocusEvent<Target>) => {
  onBlur?.(e);
  });
 

packages/@react-aria/menu/src/useSubmenuTrigger.ts

@@ -14,7 +14,7 @@ import {AriaMenuItemProps} from './useMenuItem';
 import {AriaMenuOptions} from './useMenu';
 import type {AriaPopoverProps, OverlayProps} from '@react-aria/overlays';
 import {FocusableElement, FocusStrategy, KeyboardEvent, Node, PressEvent, RefObject} from '@react-types/shared';
-import {focusWithoutScrolling, useEffectEvent, useEvent, useId, useLayoutEffect} from '@react-aria/utils';
+import {focusWithoutScrolling, useEvent, useId, useLayoutEffect, useStableCallback} from '@react-aria/utils';
 import type {SubmenuTriggerState} from '@react-stately/menu';
 import {useCallback, useRef} from 'react';
 import {useLocale} from '@react-aria/i18n';
@@ -81,12 +81,12 @@ export function useSubmenuTrigger<T>(props: AriaSubmenuTriggerProps, state: Subm
  }
  }, [openTimeout]);
 
- let onSubmenuOpen = useEffectEvent((focusStrategy?: FocusStrategy) => {
+ let onSubmenuOpen = useStableCallback((focusStrategy?: FocusStrategy) => {
  cancelOpenTimeout();
  state.open(focusStrategy);
  });
 
- let onSubmenuClose = useEffectEvent(() => {
+ let onSubmenuClose = useStableCallback(() => {
  cancelOpenTimeout();
  state.close();
  });

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

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {CLEAR_FOCUS_EVENT, FOCUS_EVENT, focusWithoutScrolling, getActiveElement, isCtrlKeyPressed, isTabbable, mergeProps, scrollIntoView, scrollIntoViewport, useEffectEvent, useEvent, useRouter, useUpdateLayoutEffect} from '@react-aria/utils';
+import {CLEAR_FOCUS_EVENT, FOCUS_EVENT, focusWithoutScrolling, getActiveElement, isCtrlKeyPressed, isTabbable, mergeProps, scrollIntoView, scrollIntoViewport, useEvent, useRouter, useStableCallback, useUpdateLayoutEffect} from '@react-aria/utils';
 import {dispatchVirtualFocus, getFocusableTreeWalker, moveVirtualFocus} from '@react-aria/focus';
 import {DOMAttributes, FocusableElement, FocusStrategy, Key, KeyboardDelegate, RefObject} from '@react-types/shared';
 import {flushSync} from 'react-dom';
@@ -416,7 +416,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
  }
  });
 
- let updateActiveDescendant = useEffectEvent(() => {
+ let updateActiveDescendant = useStableCallback(() => {
  let keyToFocus = delegate.getFirstKey?.() ?? null;
 
  // If no focusable items exist in the list, make sure to clear any activedescendant that may still exist and move focus back to
@@ -447,7 +447,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
 
  }, [manager.collection, updateActiveDescendant]);
 
- let resetFocusFirstFlag = useEffectEvent(() => {
+ let resetFocusFirstFlag = useStableCallback(() => {
  // If user causes the focused key to change in any other way, clear shouldVirtualFocusFirst so we don't
  // accidentally move focus from under them. Skip this if the collection was empty because we might be in a load
  // state and will still want to focus the first item after load

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

@@ -16,7 +16,7 @@ import {DOMAttributes, InputBase, RangeInputBase, Validation, ValueBase} from '@
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {useCallback, useEffect, useRef} from 'react';
-import {useEffectEvent, useGlobalListeners} from '@react-aria/utils';
+import {useGlobalListeners, useStableCallback} from '@react-aria/utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 
@@ -153,7 +153,7 @@ export function useSpinButton(
  prevTouchPosition.current = touchPosition;
  }, []);
 
- const onIncrementPressStart = useEffectEvent(
+ const onIncrementPressStart = useStableCallback(
  (initialStepDelay: number) => {
  clearAsync();
  isSpinning.current = true;
@@ -170,7 +170,7 @@ export function useSpinButton(
  }
  );
 
- const onDecrementPressStart = useEffectEvent(
+ const onDecrementPressStart = useStableCallback(
  (initialStepDelay: number) => {
  clearAsync();
  isSpinning.current = true;

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

@@ -18,7 +18,7 @@ import {getColumnHeaderId} from './utils';
 import {GridNode} from '@react-types/grid';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {mergeProps, useDescription, useEffectEvent, useId} from '@react-aria/utils';
+import {mergeProps, useDescription, useId, useStableCallback} from '@react-aria/utils';
 import {TableColumnResizeState} from '@react-stately/table';
 import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useVisuallyHidden} from '@react-aria/visually-hidden';
@@ -88,7 +88,7 @@ export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, st
  }
  });
 
- let startResize = useEffectEvent((item) => {
+ let startResize = useStableCallback((item) => {
  if (!isResizingRef.current) {
  lastSize.current = state.updateResizedColumns(item.key, state.getColumnWidth(item.key));
  state.startResize(item.key);
@@ -98,13 +98,13 @@ export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, st
  isResizingRef.current = true;
  });
 
- let resize = useEffectEvent((item, newWidth) => {
+ let resize = useStableCallback((item, newWidth) => {
  let sizes = state.updateResizedColumns(item.key, newWidth);
  onResize?.(sizes);
  lastSize.current = sizes;
  });
 
- let endResize = useEffectEvent((item) => {
+ let endResize = useStableCallback((item) => {
  if (isResizingRef.current) {
  if (lastSize.current == null) {
  lastSize.current = state.updateResizedColumns(item.key, state.getColumnWidth(item.key));

packages/@react-aria/toast/src/useToastRegion.ts

@@ -11,7 +11,7 @@
  */
 
 import {AriaLabelingProps, DOMAttributes, FocusableElement, RefObject} from '@react-types/shared';
-import {focusWithoutScrolling, mergeProps, useEffectEvent, useLayoutEffect} from '@react-aria/utils';
+import {focusWithoutScrolling, mergeProps, useLayoutEffect, useStableCallback} from '@react-aria/utils';
 import {getInteractionModality, useFocusWithin, useHover} from '@react-aria/interactions';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -46,7 +46,7 @@ export function useToastRegion<T>(props: AriaToastRegionProps, state: ToastState
 
  let isHovered = useRef(false);
  let isFocused = useRef(false);
- let updateTimers = useEffectEvent(() => {
+ let updateTimers = useStableCallback(() => {
  if (isHovered.current || isFocused.current) {
  state.pauseAll();
  } else {