Revert change to add 'all' to expandedKeys and other tree followups (#6002)

* some updates from reviews

* reseting expandedKeys "all" change

* default level value to fix lint

Author: LFDanLu

packages/@react-aria/accordion/src/useAccordion.ts

@@ -50,7 +50,7 @@ export function useAccordionItem<T>(props: AccordionItemAriaProps<T>, state: Tre
     isDisabled,
     onPress: () => state.toggleKey(item.key)
   }), ref);
-  let isExpanded = state.expandedKeys === 'all' || state.expandedKeys.has(item.key);
+  let isExpanded = state.expandedKeys.has(item.key);
   return {
     buttonProps: {
       ...buttonProps,

packages/@react-aria/gridlist/src/useGridListItem.ts

@@ -94,7 +94,7 @@ export function useGridListItem<T>(props: AriaGridListItemOptions, state: ListSt
       onAction = () => state.toggleKey(node.key);
     }
 
-    let isExpanded = hasChildRows ? state.expandedKeys === 'all' || state.expandedKeys.has(node.key) : undefined;
+    let isExpanded = hasChildRows ? state.expandedKeys.has(node.key) : undefined;
     treeGridRowProps = {
       'aria-expanded': isExpanded,
       'aria-level': node.level + 1,
@@ -125,11 +125,11 @@ export function useGridListItem<T>(props: AriaGridListItemOptions, state: ListSt
     walker.currentNode = document.activeElement;
 
     if ('expandedKeys' in state && document.activeElement === ref.current) {
-      if ((e.key === EXPANSION_KEYS['expand'][direction]) && state.selectionManager.focusedKey === node.key && hasChildRows && state.expandedKeys !== 'all' && !state.expandedKeys.has(node.key)) {
+      if ((e.key === EXPANSION_KEYS['expand'][direction]) && state.selectionManager.focusedKey === node.key && hasChildRows && !state.expandedKeys.has(node.key)) {
         state.toggleKey(node.key);
         e.stopPropagation();
         return;
-      } else if ((e.key === EXPANSION_KEYS['collapse'][direction]) && state.selectionManager.focusedKey === node.key && hasChildRows && (state.expandedKeys === 'all' || state.expandedKeys.has(node.key))) {
+      } else if ((e.key === EXPANSION_KEYS['collapse'][direction]) && state.selectionManager.focusedKey === node.key && hasChildRows && state.expandedKeys.has(node.key)) {
         state.toggleKey(node.key);
         e.stopPropagation();
         return;

packages/@react-spectrum/accordion/src/Accordion.tsx

@@ -57,7 +57,7 @@ function AccordionItem<T>(props: AccordionItemProps<T>) {
   let ref = useRef<HTMLButtonElement>(null);
   let {state, item} = props;
   let {buttonProps, regionProps} = useAccordionItem<T>(props, state, ref);
-  let isOpen = state.expandedKeys === 'all' || state.expandedKeys.has(item.key);
+  let isOpen = state.expandedKeys.has(item.key);
   let isDisabled = state.disabledKeys.has(item.key);
   let {isHovered, hoverProps} = useHover({isDisabled});
   let {direction} = useLocale();

packages/@react-spectrum/tree/src/Tree.tsx

@@ -77,7 +77,7 @@ function TreeItem<T>(props: TreeItemProps<T>) {
     hasChildNodes
   } = item;
 
-  let isExpanded = state.expandedKeys === 'all' || state.expandedKeys.has(key);
+  let isExpanded = state.expandedKeys.has(key);
   let isSelected = state.selectionManager.isSelected(key);
 
   let itemClassName = classNames(styles, 'spectrum-TreeView-item', {

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

@@ -18,14 +18,14 @@ export class TreeCollection<T> implements Collection<Node<T>> {
   private firstKey: Key;
   private lastKey: Key;
 
-  constructor(nodes: Iterable<Node<T>>, {expandedKeys}: {expandedKeys?: 'all' | Set<Key>} = {}) {
+  constructor(nodes: Iterable<Node<T>>, {expandedKeys}: {expandedKeys?: Set<Key>} = {}) {
     this.iterable = nodes;
     expandedKeys = expandedKeys || new Set();
 
     let visit = (node: Node<T>) => {
       this.keyMap.set(node.key, node);
 
-      if (node.childNodes && (node.type === 'section' || (expandedKeys === 'all' || expandedKeys.has(node.key)))) {
+      if (node.childNodes && (node.type === 'section' || expandedKeys.has(node.key))) {
         for (let child of node.childNodes) {
           visit(child);
         }

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

@@ -29,13 +29,13 @@ export interface TreeState<T> {
   readonly disabledKeys: Set<Key>,
 
   /** A set of keys for items that are expanded. */
-  readonly expandedKeys: 'all' | Set<Key>,
+  readonly expandedKeys: Set<Key>,
 
   /** Toggles the expanded state for an item by its key. */
   toggleKey(key: Key): void,
 
   /** Replaces the set of expanded keys. */
-  setExpandedKeys(keys: 'all' | Set<Key>): void,
+  setExpandedKeys(keys: Set<Key>): void,
 
   /** A selection manager to read and update multiple selection state. */
   readonly selectionManager: SelectionManager
@@ -47,14 +47,12 @@ export interface TreeState<T> {
  */
 export function useTreeState<T extends object>(props: TreeProps<T>): TreeState<T> {
   let {
-    expandedKeys: propExpandedKeys,
-    defaultExpandedKeys: propDefaultExpandedKeys,
     onExpandedChange
   } = props;
 
   let [expandedKeys, setExpandedKeys] = useControlledState(
-    propExpandedKeys ? convertExpanded(propExpandedKeys) : undefined,
-    propDefaultExpandedKeys ? convertExpanded(propDefaultExpandedKeys) : new Set(),
+    props.expandedKeys ? new Set(props.expandedKeys) : undefined,
+    props.defaultExpandedKeys ? new Set(props.defaultExpandedKeys) : new Set(),
     onExpandedChange
   );
 
@@ -74,7 +72,7 @@ export function useTreeState<T extends object>(props: TreeProps<T>): TreeState<T
   }, [tree, selectionState.focusedKey]);
 
   let onToggle = (key: Key) => {
-    setExpandedKeys(toggleKey(expandedKeys, key, tree));
+    setExpandedKeys(toggleKey(expandedKeys, key));
   };
 
   return {
@@ -87,32 +85,13 @@ export function useTreeState<T extends object>(props: TreeProps<T>): TreeState<T
   };
 }
 
-function toggleKey<T>(currentExpandedKeys: 'all' | Set<Key>, key: Key, collection: Collection<Node<T>>): Set<Key> {
-  let updatedExpandedKeys: Set<Key>;
-  if (currentExpandedKeys === 'all') {
-    // TODO: would be nice if the collection row information differentiated between childNodes vs childItems
-    // so we didn't have to keep iterating through info, perhaps make the user pass a prop to TreeItem for childItems/hasChildRows even in the static case?
-    updatedExpandedKeys = new Set([...collection].filter(row => {
-      return row.props.childItems || [...collection.getChildren(row.key)].filter(child => child.type === 'item').length > 0;
-    }).map(row => row.key));
-    updatedExpandedKeys.delete(key);
+function toggleKey(set: Set<Key>, key: Key): Set<Key> {
+  let res = new Set(set);
+  if (res.has(key)) {
+    res.delete(key);
   } else {
-    updatedExpandedKeys = new Set(currentExpandedKeys);
-    if (updatedExpandedKeys.has(key)) {
-      updatedExpandedKeys.delete(key);
-    } else {
-      updatedExpandedKeys.add(key);
-    }
-  }
-  return updatedExpandedKeys;
-}
-
-function convertExpanded(expanded: 'all' | Iterable<Key>): 'all' | Set<Key> {
-  if (!expanded) {
-    return new Set<Key>();
+    res.add(key);
   }
 
-  return expanded === 'all'
-    ? 'all'
-    : new Set(expanded);
+  return res;
 }

packages/@react-types/shared/src/collections.d.ts

@@ -71,9 +71,9 @@ export interface CollectionStateBase<T, C extends Collection<Node<T>> = Collecti
 
 export interface Expandable {
   /** The currently expanded keys in the collection (controlled). */
-  expandedKeys?:  'all' | Iterable<Key>,
+  expandedKeys?: Iterable<Key>,
   /** The initial expanded keys in the collection (uncontrolled). */
-  defaultExpandedKeys?: 'all' | Iterable<Key>,
+  defaultExpandedKeys?: Iterable<Key>,
   /** Handler that is called when items are expanded or collapsed. */
   onExpandedChange?: (keys: Set<Key>) => any
 }

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

@@ -21,7 +21,7 @@ import {FocusScope,  mergeProps, useFocusRing, useGridListSelectionCheckbox, use
 import {Collection as ICollection, Node, SelectionBehavior, TreeState, useTreeState} from 'react-stately';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, JSX, ReactElement, ReactNode, RefObject, useContext, useEffect, useMemo, useRef} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, JSX, ReactNode, RefObject, useContext, useEffect, useMemo, useRef} from 'react';
 import {useControlledState} from '@react-stately/utils';
 
 class TreeCollection<T> implements ICollection<Node<T>> {
@@ -283,8 +283,8 @@ export interface TreeItemProps<T = object> extends StyleRenderProps<TreeItemRend
   /** A list of child tree row objects used when dynamically rendering the tree row children. */
   childItems?: Iterable<T>,
   // TODO: made this required since the user needs to pass Content at least
-  /** The content of the tree row along with any nested children. Supports static items or a function for dynamic rendering. */
-  children: ReactNode | ((item: T) => ReactElement)
+  /** The content of the tree row along with any nested children. Supports static nested tree rows or use of a Collection to dynamically render nested tree rows. */
+  children: ReactNode
 }
 
 function TreeItem<T extends object>(props: TreeItemProps<T>, ref: ForwardedRef<HTMLDivElement>): JSX.Element | null {
@@ -339,14 +339,16 @@ export function TreeItemContent(props: TreeItemContentProps) {
   }
 }
 
+export const TreeItemContentContext = createContext<TreeItemContentRenderProps | null>(null);
+
 function TreeRow<T>({item}: {item: Node<T>}) {
   let state = useContext(TreeStateContext)!;
   let ref = useObjectRef<HTMLDivElement>(item.props.ref);
   let {rowProps, gridCellProps, ...states} = useTreeGridListItem({node: item}, state, ref);
   let stringFormatter = useLocalizedStringFormatter(intlMessages, 'react-aria-components');
   let isExpanded = rowProps['aria-expanded'] === true;
   let hasChildRows = [...state.collection.getChildren!(item.key)]?.length > 1;
-  let level = rowProps['aria-level'];
+  let level = rowProps['aria-level'] || 1;
 
   let {hoverProps, isHovered} = useHover({
     isDisabled: !states.allowsSelection && !states.hasAction
@@ -359,7 +361,7 @@ function TreeRow<T>({item}: {item: Node<T>}) {
   );
 
   let props: TreeItemProps<unknown> = item.props;
-  let renderPropValues = React.useMemo(() => ({
+  let renderPropValues = React.useMemo<TreeItemContentRenderProps>(() => ({
     ...states,
     isHovered,
     isFocusVisible,
@@ -410,7 +412,7 @@ function TreeRow<T>({item}: {item: Node<T>}) {
     children: item => {
       switch (item.type) {
         case 'content': {
-          return <TreeRowContent values={renderPropValues} item={item} />;
+          return <TreeRowContent item={item} />;
         }
         // Skip item since we don't render the nested rows as children of the parent row, the flattened collection
         // will render them each as siblings instead
@@ -419,9 +421,7 @@ function TreeRow<T>({item}: {item: Node<T>}) {
         default:
           throw new Error('Unsupported element type in TreeRow: ' + item.type);
       }
-    },
-    // TODO: double check if this is the best way to go about making sure TreeRowContent's render props is always up to date
-    dependencies: [renderPropValues]
+    }
   });
 
   return (
@@ -460,6 +460,9 @@ function TreeRow<T>({item}: {item: Node<T>}) {
                     ref: expandButtonRef
                   }
                 }
+              }],
+              [TreeItemContentContext, {
+                ...renderPropValues
               }]
             ]}>
             {children}
@@ -471,7 +474,8 @@ function TreeRow<T>({item}: {item: Node<T>}) {
 }
 
 // This is separate from TreeItemContent since it needs to call useRenderProps
-function TreeRowContent({item, values}) {
+function TreeRowContent({item}) {
+  let values = useContext(TreeItemContentContext);
   let renderProps = useRenderProps({
     children: item.rendered,
     values

packages/react-aria-components/stories/Tree.stories.tsx

@@ -247,8 +247,10 @@ const DynamicTreeItem = (props: DynamicTreeItemProps) => {
   );
 };
 
+let defaultExpandedKeys = new Set(['projects', 'project-2', 'project-5', 'reports', 'reports-1', 'reports-1A', 'reports-1AB']);
+
 export const TreeExampleDynamic = (args: TreeProps<unknown>) => (
-  <Tree {...args} defaultExpandedKeys="all" disabledKeys={['reports-1AB']} className={styles.tree} aria-label="test dynamic tree" items={rows} onExpandedChange={action('onExpandedChange')} onSelectionChange={action('onSelectionChange')}>
+  <Tree {...args} defaultExpandedKeys={defaultExpandedKeys} disabledKeys={['reports-1AB']} className={styles.tree} aria-label="test dynamic tree" items={rows} onExpandedChange={action('onExpandedChange')} onSelectionChange={action('onSelectionChange')}>
     {(item) => (
       <DynamicTreeItem childItems={item.childItems} textValue={item.name}>
         {item.name}
@@ -273,7 +275,7 @@ export const WithActions = {
 };
 
 export const WithLinks = (args: TreeProps<unknown>) => (
-  <Tree {...args} defaultExpandedKeys="all" className={styles.tree} aria-label="test dynamic tree" items={rows} onExpandedChange={action('onExpandedChange')} onSelectionChange={action('onSelectionChange')}>
+  <Tree {...args} defaultExpandedKeys={defaultExpandedKeys} className={styles.tree} aria-label="test dynamic tree" items={rows} onExpandedChange={action('onExpandedChange')} onSelectionChange={action('onSelectionChange')}>
     {(item) => (
       <DynamicTreeItem href="https://adobe.com/" childItems={item.childItems} textValue={item.name}>
         {item.name}

packages/react-aria-components/test/Tree.test.tsx

@@ -41,7 +41,7 @@ let StaticTreeItem = (props) => {
 };
 
 let StaticTree = ({treeProps = {}, rowProps = {}}) => (
-  <Tree defaultExpandedKeys="all" aria-label="test tree" onExpandedChange={onExpandedChange} onSelectionChange={onSelectionChange} {...treeProps}>
+  <Tree defaultExpandedKeys={new Set(['projects', 'projects-1'])} aria-label="test tree" onExpandedChange={onExpandedChange} onSelectionChange={onSelectionChange} {...treeProps}>
     <StaticTreeItem id="Photos" textValue="Photos" {...rowProps}>Photos</StaticTreeItem>
     <StaticTreeItem id="projects" textValue="Projects" title="Projects" {...rowProps}>
       <StaticTreeItem id="projects-1" textValue="Projects-1" title="Projects-1" {...rowProps}>
@@ -117,7 +117,7 @@ let DynamicTreeItem = (props) => {
 };
 
 let DynamicTree = ({treeProps = {}, rowProps = {}}) => (
-  <Tree defaultExpandedKeys="all" aria-label="test dynamic tree" items={rows} onExpandedChange={onExpandedChange} onSelectionChange={onSelectionChange} {...treeProps}>
+  <Tree defaultExpandedKeys={new Set(['projects', 'project-2', 'project-5', 'reports', 'reports-1', 'reports-1A', 'reports-1AB'])} aria-label="test dynamic tree" items={rows} onExpandedChange={onExpandedChange} onSelectionChange={onSelectionChange} {...treeProps}>
     {(item: any) => (
       <DynamicTreeItem childItems={item.childItems} textValue={item.name} {...rowProps}>
         {item.name}
@@ -884,7 +884,7 @@ describe('Tree', () => {
       });
 
       it('should not expand/collapse if disabledBehavior is "all" and the row is disabled', async () => {
-        let {getAllByRole, rerender} = render(<DynamicTree treeProps={{disabledKeys: ['projects'], disabledBehavior: 'all', expandedKeys: 'all'}} />);
+        let {getAllByRole, rerender} = render(<DynamicTree treeProps={{disabledKeys: ['projects'], disabledBehavior: 'all', expandedKeys: new Set(['projects', 'project-2', 'project-5', 'reports', 'reports-1', 'reports-1A', 'reports-1AB'])}} />);
         let rows = getAllByRole('row');
         expect(rows).toHaveLength(20);