Remove changes to @react-aria - change ListStateContext and properly memoize ListBoxItemInner

Author: widavies

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

@@ -213,8 +213,8 @@ export function useHover(props: HoverProps): HoverResult {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isDisabled]);
 
-  return useMemo(() => ({
+  return {
     hoverProps,
     isHovered
-  }), [hoverProps, isHovered]);
+  };
 }

packages/@react-aria/listbox/src/useOption.ts

@@ -17,7 +17,6 @@ import {getItemId, listData} from './utils';
 import {isFocusVisible, useHover} from '@react-aria/interactions';
 import {ListState} from '@react-stately/list';
 import {SelectableItemStates, useSelectableItem} from '@react-aria/selection';
-import {useCallback} from 'react';
 
 export interface OptionAria extends SelectableItemStates {
   /** Props for the option element. */
@@ -143,12 +142,12 @@ export function useOption<T>(props: AriaOptionProps, state: ListState<T>, ref: R
 
   let {hoverProps} = useHover({
     isDisabled: isDisabled || !shouldFocusOnHover,
-    onHoverStart: useCallback(() => {
+    onHoverStart() {
       if (!isFocusVisible()) {
         state.selectionManager.setFocused(true);
         state.selectionManager.setFocusedKey(key);
       }
-    }, [state.selectionManager])
+    }
   });
 
   let domProps = filterDOMProps(item?.props);

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

@@ -16,7 +16,7 @@ import {getCollectionId, isNonContiguousSelectionModifier} from './utils';
 import {isCtrlKeyPressed, mergeProps, openLink, useId, useRouter} from '@react-aria/utils';
 import {moveVirtualFocus} from '@react-aria/focus';
 import {MultipleSelectionManager} from '@react-stately/selection';
-import {useEffect, useRef, useCallback} from 'react';
+import {useEffect, useRef} from 'react';
 
 export interface SelectableItemOptions extends DOMProps {
   /**
@@ -184,17 +184,14 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
   // item is tabbable.  If using virtual focus, don't set a tabIndex at all so that VoiceOver
   // on iOS 14 doesn't try to move real DOM focus to the item anyway.
   let itemProps: SelectableItemAria['itemProps'] = {};
-
-  const onFocus = useCallback(e => {
-    if (e.target === ref.current) {
-      manager.setFocusedKey(key);
-    }
-  }, [manager]);
-
   if (!shouldUseVirtualFocus && !isDisabled) {
     itemProps = {
       tabIndex: key === manager.focusedKey ? 0 : -1,
-      onFocus
+      onFocus(e) {
+        if (e.target === ref.current) {
+          manager.setFocusedKey(key);
+        }
+      }
     };
   } else if (isDisabled) {
     itemProps.onMouseDown = (e) => {
@@ -368,11 +365,11 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
   // Once the user is in selection mode, they can long press again to drag.
   // Use a capturing listener to ensure this runs before useDrag, regardless of
   // the order the props get merged.
-  let onDragStartCapture = useCallback(e => {
+  let onDragStartCapture = e => {
     if (modality.current === 'touch' && longPressEnabledOnPressStart.current) {
       e.preventDefault();
     }
-  }, []);
+  };
 
   // Prevent default on link clicks so that we control exactly
   // when they open (to match selection behavior).

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

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {useCallback, useEffect, useRef, useMemo} from 'react';
+import {useCallback, useEffect, useRef} from 'react';
 
 interface GlobalListeners {
   addGlobalListener<K extends keyof WindowEventMap>(el: Window, type: K, listener: (this: Document, ev: WindowEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void,
@@ -48,5 +48,5 @@ export function useGlobalListeners(): GlobalListeners {
     return removeAllGlobalListeners;
   }, [removeAllGlobalListeners]);
 
-  return useMemo(() => ({addGlobalListener, removeGlobalListener, removeAllGlobalListeners}), [addGlobalListener, removeGlobalListener, removeAllGlobalListeners]);
+  return {addGlobalListener, removeGlobalListener, removeAllGlobalListeners};
 }

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

@@ -35,9 +35,6 @@ export interface ListState<T> {
   /** A set of items that are disabled. */
   disabledKeys: Set<Key>,
 
-  /** The focused key */
-  focusedKey: Key | null,
-
   /** A selection manager to read and update multiple selection state. */
   selectionManager: SelectionManager
 }
@@ -69,9 +66,8 @@ export function useListState<T extends object>(props: ListProps<T>): ListState<T
   return useMemo(() => ({
     collection,
     disabledKeys,
-    focusedKey: selectionState.focusedKey,
     selectionManager
-  }), [collection, disabledKeys, selectionState.focusedKey, selectionManager]);
+  }), [collection, disabledKeys, selectionManager]);
 }
 
 /**
@@ -81,12 +77,12 @@ export function UNSTABLE_useFilteredListState<T extends object>(state: ListState
   let collection = useMemo(() => filter ? state.collection.UNSTABLE_filter!(filter) : state.collection, [state.collection, filter]);
   let selectionManager = useMemo(() => state.selectionManager.withCollection(collection), [state, collection]);
   useFocusedKeyReset(collection, selectionManager);
+
   return useMemo(() => ({
     collection,
-    selectionManager,
-    focusedKey: selectionManager.focusedKey,
-    disabledKeys: state.disabledKeys
-  }), [collection, selectionManager, selectionManager.focusedKey, state.disabledKeys]);
+    disabledKeys: state.disabledKeys,
+    selectionManager
+  }), [collection, state.disabledKeys, selectionManager]);
 }
 
 function useFocusedKeyReset<T>(collection: Collection<Node<T>>, selectionManager: SelectionManager) {

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

@@ -40,6 +40,7 @@ export interface SingleSelectListState<T> extends ListState<T> {
 export function useSingleSelectListState<T extends object>(props: SingleSelectListProps<T>): SingleSelectListState<T>  {
   let [selectedKey, setSelectedKey] = useControlledState(props.selectedKey, props.defaultSelectedKey ?? null, props.onSelectionChange);
   let selectedKeys = useMemo(() => selectedKey != null ? [selectedKey] : [], [selectedKey]);
+  let onSelectionChange = props.onSelectionChange;
   let {collection, disabledKeys, selectionManager} = useListState({
     ...props,
     selectionMode: 'single',
@@ -55,12 +56,12 @@ export function useSingleSelectListState<T extends object>(props: SingleSelectLi
 
       // Always fire onSelectionChange, even if the key is the same
       // as the current key (useControlledState does not).
-      if (key === selectedKey && props.onSelectionChange) {
-        props.onSelectionChange(key);
+      if (key === selectedKey && onSelectionChange) {
+        onSelectionChange(key);
       }
 
       setSelectedKey(key);
-    }, [props.onSelectionChange, selectedKey, setSelectedKey])
+    }, [onSelectionChange, selectedKey, setSelectedKey])
   });
 
   let selectedItem = selectedKey != null

packages/@react-stately/select/src/useSelectState.ts

@@ -67,10 +67,6 @@ export function useSelectState<T extends object>(props: SelectStateOptions<T>):
 
   let [isFocused, setFocused] = useState(false);
 
-  useEffect(() => {
-    console.log("come on");
-  }, [triggerState])
-
   return useMemo(() => ({
     ...validationState,
     ...listState,

packages/react-aria-components/docs/TagGroup.mdx

@@ -707,9 +707,14 @@ import {ListStateContext} from 'react-aria-components';
 
 function SelectionCount() {
   /*- begin highlight -*/
-  let state = React.useContext(ListStateContext);
+  let context = React.useContext(ListStateContext);
   /*- end highlight -*/
-  let selected = state?.selectionManager.selectedKeys.size ?? 0;
+  let selected = 0;
+  if(context) {
+    let [state] = context;
+    selected = state.selectionManager.selectedKeys.size;
+  }
+
   return <small>{selected} tags selected.</small>;
 }
 

packages/react-aria-components/src/ComboBox.tsx

@@ -200,7 +200,7 @@ function ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}:
           style: {'--trigger-width': menuWidth} as React.CSSProperties
         }],
         [ListBoxContext, {...listBoxProps, ref: listBoxRef}],
-        [ListStateContext, state],
+        [ListStateContext, [state, state.selectionManager.focusedKey]],
         [TextContext, {
           slots: {
             description: descriptionProps,

packages/react-aria-components/src/GridList.tsx

@@ -237,7 +237,7 @@ function GridListInner<T extends object>({props, collection, gridListRef: ref}:
         data-layout={layout}>
         <Provider
           values={[
-            [ListStateContext, state],
+            [ListStateContext, [state, state.selectionManager.focusedKey]],
             [DragAndDropContext, {dragAndDropHooks, dragState, dropState}],
             [DropIndicatorContext, {render: GridListDropIndicatorWrapper}]
           ]}>
@@ -277,7 +277,7 @@ export interface GridListItemProps<T = object> extends RenderProps<GridListItemR
  * A GridListItem represents an individual item in a GridList.
  */
 export const GridListItem = /*#__PURE__*/ createLeafComponent('item', function GridListItem<T extends object>(props: GridListItemProps<T>, forwardedRef: ForwardedRef<HTMLDivElement>, item: Node<T>) {
-  let state = useContext(ListStateContext)!;
+  let [state] = useContext(ListStateContext)!;
   let {dragAndDropHooks, dragState, dropState} = useContext(DragAndDropContext);
   let ref = useObjectRef<HTMLDivElement>(forwardedRef);
   let {isVirtualized} = useContext(CollectionRendererContext);

packages/react-aria-components/src/ListBox.tsx

@@ -24,7 +24,6 @@ import React, {createContext, ForwardedRef, forwardRef, JSX, memo, ReactNode, us
 import {SeparatorContext} from './Separator';
 import {TextContext} from './Text';
 import {UNSTABLE_InternalAutocompleteContext} from './Autocomplete';
-import {SelectionManager} from '@react-stately/selection';
 
 export interface ListBoxRenderProps {
   /**
@@ -79,22 +78,24 @@ export interface ListBoxProps<T> extends Omit<AriaListBoxProps<T>, 'children' |
 }
 
 export const ListBoxContext = createContext<ContextValue<ListBoxProps<any>, HTMLDivElement>>(null);
-export const ListStateContext = createContext<ListState<any> | null>(null);
+export const ListStateContext = createContext<[ListState<any>, Key | null] | null>(null);
 
 /**
  * A listbox displays a list of options and allows a user to select one or more of them.
  */
 export const ListBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ListBox<T extends object>(props: ListBoxProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ListBoxContext);
-  let state = useContext(ListStateContext);
+  let context = useContext(ListStateContext);
 
   // The structure of ListBox is a bit strange because it needs to work inside other components like ComboBox and Select.
   // Those components render two copies of their children so that the collection can be built even when the popover is closed.
   // The first copy sends a collection document via context which we render the collection portal into.
   // The second copy sends a ListState object via context which we use to render the ListBox without rebuilding the state.
   // Otherwise, we have a standalone ListBox, so we need to create a collection and state ourselves.
 
-  if (state) {
+  if (context) {
+    let [state] = context;
+
     return <ListBoxInner state={state} props={props} listBoxRef={ref} />;
   }
 
@@ -249,7 +250,7 @@ function ListBoxInner<T extends object>({state: inputState, props, listBoxRef}:
         <Provider
           values={[
             [ListBoxContext, props],
-            [ListStateContext, state],
+            [ListStateContext, [state, state.selectionManager.focusedKey]],
             [DragAndDropContext, useMemo(() => ({dragAndDropHooks, dragState, dropState}), [dragAndDropHooks, dragState, dropState])],
             [SeparatorContext, {elementType: 'div'}],
             [DropIndicatorContext, {render: ListBoxDropIndicatorWrapper}],
@@ -271,7 +272,7 @@ function ListBoxInner<T extends object>({state: inputState, props, listBoxRef}:
 export interface ListBoxSectionProps<T> extends SectionProps<T> {}
 
 function ListBoxSectionInner<T extends object>(props: ListBoxSectionProps<T>, ref: ForwardedRef<HTMLElement>, section: Node<T>, className = 'react-aria-ListBoxSection') {
-  let state = useContext(ListStateContext)!;
+  let [state] = useContext(ListStateContext)!;
   let {dragAndDropHooks, dropState} = useContext(DragAndDropContext)!;
   let {CollectionBranch} = useContext(CollectionRendererContext);
   let [headingRef, heading] = useSlot();
@@ -332,22 +333,24 @@ export interface ListBoxItemProps<T = object> extends RenderProps<ListBoxItemRen
  */
 export const ListBoxItem = /*#__PURE__*/ createLeafComponent('item', function ListBoxItem<T extends object>(props: ListBoxItemProps<T>, forwardedRef: ForwardedRef<HTMLDivElement>, item: Node<T>) {
   let ref = useObjectRef<any>(forwardedRef);
-  let state = useContext(ListStateContext)!;
+  let [state, focusedKey] = useContext(ListStateContext)!;
+
+  // ListBoxItemInner is memoized so that a focus change does not re-render all items in the ListBox.
+  // The data-focused attribute tells React which list boxes are affected by a focus change. It does not actually
+  // get passed through to the component - it could be named anything, as long as it changes so React knows to re-render.
+  return <ListBoxItemInner data-focused={item.key === focusedKey} props={props} state={state} passRef={ref} item={item} />;
+});
 
+const ListBoxItemInner = memo(function ListBoxItemInner<T extends object>({props, item, state, passRef}: {props: ListBoxItemProps<T>, state: ListState<T>, item: Node<T>, passRef: React.MutableRefObject<any>}) {
+  const ref = passRef;
+
+  let {dragAndDropHooks, dragState, dropState} = useContext(DragAndDropContext)!;
   let options = useOption(
     {key: item.key, 'aria-label': props?.['aria-label']},
     state,
     ref
   );
 
-  return <ListBoxItemInner selectionManager={state.selectionManager} options={options} focused={item.key === state.focusedKey} passRef={ref} props={props} item={item} />
-});
-
-const ListBoxItemInner = memo(function ListBoxItemInner<T extends object>({props, item, selectionManager, options, focused, passRef}: 
-  {options: OptionAria, props: ListBoxItemProps<T>, focused: boolean, selectionManager: SelectionManager, item: Node<T>, passRef: React.MutableRefObject<any>}) {
-  const ref = passRef;
-
-  let {dragAndDropHooks, dragState, dropState} = useContext(DragAndDropContext)!;
   let {optionProps, labelProps, descriptionProps, ...states} = options;
 
   let {hoverProps, isHovered} = useHover({
@@ -378,8 +381,8 @@ const ListBoxItemInner = memo(function ListBoxItemInner<T extends object>({props
     values: {
       ...states,
       isHovered,
-      selectionMode: selectionManager.selectionMode,
-      selectionBehavior: selectionManager.selectionBehavior,
+      selectionMode: state.selectionManager.selectionMode,
+      selectionBehavior: state.selectionManager.selectionBehavior,
       allowsDragging: !!dragState,
       isDragging,
       isDropTarget: droppableItem?.isDropTarget
@@ -408,7 +411,7 @@ const ListBoxItemInner = memo(function ListBoxItemInner<T extends object>({props
       data-pressed={states.isPressed || undefined}
       data-dragging={isDragging || undefined}
       data-drop-target={droppableItem?.isDropTarget || undefined}
-      data-selection-mode={selectionManager.selectionMode === 'none' ? undefined : selectionManager.selectionMode}>
+      data-selection-mode={state.selectionManager.selectionMode === 'none' ? undefined : state.selectionManager.selectionMode}>
       <Provider
         values={[
           [TextContext, {

packages/react-aria-components/src/Select.tsx

@@ -183,7 +183,7 @@ function SelectInner<T extends object>({props, selectRef: ref, collection}: Sele
           'aria-labelledby': menuProps['aria-labelledby']
         }],
         [ListBoxContext, {...menuProps, ref: scrollRef}],
-        [ListStateContext, state],
+        [ListStateContext, [state, state.selectionManager.focusedKey]],
         [TextContext, {
           slots: {
             description: descriptionProps,

packages/react-aria-components/src/TagGroup.tsx

@@ -109,7 +109,7 @@ function TagGroupInner({props, forwardedRef: ref, collection}: TagGroupInnerProp
         values={[
           [LabelContext, {...labelProps, elementType: 'span', ref: labelRef}],
           [TagListContext, {...gridProps, ref: tagListRef}],
-          [ListStateContext, state],
+          [ListStateContext, [state, state.selectionManager.focusedKey]],
           [TextContext, {
             slots: {
               description: descriptionProps,
@@ -139,7 +139,7 @@ interface TagListInnerProps<T> {
 }
 
 function TagListInner<T extends object>({props, forwardedRef}: TagListInnerProps<T>) {
-  let state = useContext(ListStateContext)!;
+  let [state] = useContext(ListStateContext)!;
   let {CollectionRoot} = useContext(CollectionRendererContext);
   let [gridProps, ref] = useContextProps(props, forwardedRef, TagListContext);
   delete gridProps.items;
@@ -200,7 +200,7 @@ export interface TagProps extends RenderProps<TagRenderProps>, LinkDOMProps, Hov
  * A Tag is an individual item within a TagList.
  */
 export const Tag = /*#__PURE__*/ createLeafComponent('item', (props: TagProps, forwardedRef: ForwardedRef<HTMLDivElement>, item: Node<unknown>) => {
-  let state = useContext(ListStateContext)!;
+  let [state] = useContext(ListStateContext)!;
   let ref = useObjectRef<HTMLDivElement>(forwardedRef);
   let {focusProps, isFocusVisible} = useFocusRing({within: true});
   let {rowProps, gridCellProps, removeButtonProps, ...states} = useTag({item}, state, ref);