@react-spectrum/tree 3.0.0-nightly.5038 → 3.0.0

package/src/TreeView.tsx

@@ -10,21 +10,31 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaTreeGridListProps} from '@react-aria/tree';
-import {ButtonContext, Collection, TreeItemContentRenderProps, TreeItemProps, TreeItemRenderProps, TreeRenderProps, UNSTABLE_Tree, UNSTABLE_TreeItem, UNSTABLE_TreeItemContent, useContextProps} from 'react-aria-components';
+import {AriaTreeProps} from '@react-aria/tree';
+import {
+  ButtonContext,
+  Tree,
+  TreeItem,
+  TreeItemContent,
+  TreeItemContentProps,
+  TreeItemContentRenderProps,
+  TreeItemProps,
+  TreeItemRenderProps,
+  TreeRenderProps,
+  useContextProps
+} from 'react-aria-components';
 import {Checkbox} from '@react-spectrum/checkbox';
 import ChevronLeftMedium from '@spectrum-icons/ui/ChevronLeftMedium';
 import ChevronRightMedium from '@spectrum-icons/ui/ChevronRightMedium';
 import {DOMRef, Expandable, Key, SelectionBehavior, SpectrumSelectionProps, StyleProps} from '@react-types/shared';
+import {focusRing, style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};
 import {isAndroid} from '@react-aria/utils';
-import React, {createContext, isValidElement, JSX, JSXElementConstructor, ReactElement, ReactNode, useContext, useRef} from 'react';
+import React, {createContext, JSX, JSXElementConstructor, ReactElement, ReactNode, useRef} from 'react';
 import {SlotProvider, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};
-import {Text} from '@react-spectrum/text';
 import {useButton} from '@react-aria/button';
 import {useLocale} from '@react-aria/i18n';
 
-export interface SpectrumTreeViewProps<T> extends Omit<AriaTreeGridListProps<T>, 'children'>, StyleProps, SpectrumSelectionProps, Expandable {
+export interface SpectrumTreeViewProps<T> extends Omit<AriaTreeProps<T>, 'children'>, StyleProps, SpectrumSelectionProps, Expandable {
   /** Provides content to display when there are no items in the tree. */
   renderEmptyState?: () => JSX.Element,
   /**
@@ -38,13 +48,9 @@ export interface SpectrumTreeViewProps<T> extends Omit<AriaTreeGridListProps<T>,
   children?: ReactNode | ((item: T) => ReactNode)
 }
 
-export interface SpectrumTreeViewItemProps<T extends object = object> extends Omit<TreeItemProps, 'className' | 'style' | 'value' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'> {
+export interface SpectrumTreeViewItemProps extends Omit<TreeItemProps, 'className' | 'style' | 'value' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'> {
   /** Rendered contents of the tree item or child items. */
-  children: ReactNode,
-  /** Whether this item has children, even if not loaded yet. */
-  hasChildItems?: boolean,
-  /** A list of child tree item objects used when dynamically rendering the tree item children. */
-  childItems?: Iterable<T>
+  children: ReactNode
 }
 
 interface TreeRendererContextValue {
@@ -52,16 +58,16 @@ interface TreeRendererContextValue {
 }
 const TreeRendererContext = createContext<TreeRendererContextValue>({});
 
-function useTreeRendererContext(): TreeRendererContextValue {
-  return useContext(TreeRendererContext)!;
-}
-
 // TODO: add animations for rows appearing and disappearing
 
 // TODO: the below is needed so the borders of the top and bottom row isn't cut off if the TreeView is wrapped within a container by always reserving the 2px needed for the
 // keyboard focus ring. Perhaps find a different way of rendering the outlines since the top of the item doesn't
 // scroll into view due to how the ring is offset. Alternatively, have the tree render the top/bottom outline like it does in Listview
 const tree = style<Pick<TreeRenderProps, 'isEmpty'>>({
+  ...focusRing(),
+  outlineOffset: '[-2px]', // make certain we are visible inside overflow hidden containers
+  height: 'full',
+  width: 'full',
   borderWidth: 2,
   boxSizing: 'border-box',
   borderXWidth: 0,
@@ -76,19 +82,17 @@ const tree = style<Pick<TreeRenderProps, 'isEmpty'>>({
   alignItems: {
     isEmpty: 'center'
   },
-  width: {
-    isEmpty: 'full'
-  },
-  height: {
-    isEmpty: 'full'
-  },
   display: {
     isEmpty: 'flex'
-  }
+  },
+  overflow: 'auto'
 });
 
-function TreeView<T extends object>(props: SpectrumTreeViewProps<T>, ref: DOMRef<HTMLDivElement>) {
-  let {children, selectionStyle} = props;
+/**
+ * A tree view provides users with a way to navigate nested hierarchical information.
+ */
+export const TreeView = React.forwardRef(function TreeView<T extends object>(props: SpectrumTreeViewProps<T>, ref: DOMRef<HTMLDivElement>) {
+  let {children, selectionStyle, UNSAFE_className} = props;
 
   let renderer;
   if (typeof children === 'function') {
@@ -101,12 +105,12 @@ function TreeView<T extends object>(props: SpectrumTreeViewProps<T>, ref: DOMRef
 
   return (
     <TreeRendererContext.Provider value={{renderer}}>
-      <UNSTABLE_Tree {...props} {...styleProps} className={({isEmpty}) => tree({isEmpty})} selectionBehavior={selectionBehavior as SelectionBehavior} ref={domRef}>
+      <Tree {...props} {...styleProps} className={renderProps => (UNSAFE_className ?? '') + tree(renderProps)} selectionBehavior={selectionBehavior as SelectionBehavior} ref={domRef}>
         {props.children}
-      </UNSTABLE_Tree>
+      </Tree>
     </TreeRendererContext.Provider>
   );
-}
+}) as <T>(props: SpectrumTreeViewProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;
 
 interface TreeRowRenderProps extends TreeItemRenderProps {
   isLink?: boolean
@@ -140,7 +144,7 @@ const treeCellGrid = style({
   display: 'grid',
   width: 'full',
   alignItems: 'center',
-  gridTemplateColumns: ['minmax(0, auto)', 'minmax(0, auto)', 'minmax(0, auto)', 'minmax(0, auto)', 'minmax(0, auto)', '1fr', 'minmax(0, auto)', 'auto'],
+  gridTemplateColumns: ['minmax(0, auto)', 'minmax(0, auto)', 'minmax(0, auto)', 10, 'minmax(0, auto)', '1fr', 'minmax(0, auto)', 'auto'],
   gridTemplateRows: '1fr',
   gridTemplateAreas: [
     'drag-handle checkbox level-padding expand-button icon content actions actionmenu'
@@ -199,7 +203,8 @@ const treeRowOutline = style({
     isSelected: {
       default: '[-1px]',
       isFocusVisible: '[-2px]'
-    }
+    },
+    isFirst: 0
   },
   bottom: 0,
   pointerEvents: 'none',
@@ -221,52 +226,37 @@ const treeRowOutline = style({
   }
 });
 
-export const TreeViewItem = <T extends object>(props: SpectrumTreeViewItemProps<T>) => {
+export const TreeViewItem = (props: SpectrumTreeViewItemProps) => {
   let {
-    children,
-    childItems,
-    hasChildItems,
     href
   } = props;
 
-  let content;
-  let nestedRows;
-  let {renderer} = useTreeRendererContext();
-  // TODO alternative api is that we have a separate prop for the TreeItems contents and expect the child to then be
-  // a nested tree item
-
-  if (typeof children === 'string') {
-    content = <Text>{children}</Text>;
-  } else {
-    content = [];
-    nestedRows = [];
-    React.Children.forEach(children, node => {
-      if (isValidElement(node) && node.type === TreeViewItem) {
-        nestedRows.push(node);
-      } else {
-        content.push(node);
-      }
-    });
-  }
-
-  if (childItems != null && renderer) {
-    nestedRows = (
-      <Collection items={childItems}>
-        {renderer}
-      </Collection>
-    );
-  }
-
   return (
-    // TODO right now all the tree rows have the various data attributes applied on their dom nodes, should they? Doesn't feel very useful
-    <UNSTABLE_TreeItem
+    <TreeItem
       {...props}
       className={renderProps => treeRow({
         ...renderProps,
         isLink: !!href
-      })}>
-      <UNSTABLE_TreeItemContent>
-        {({isExpanded, hasChildRows, level, selectionMode, selectionBehavior, isDisabled, isSelected, isFocusVisible}) => (
+      })} />
+  );
+};
+
+export interface SpectrumTreeViewItemContentProps extends Omit<TreeItemContentProps, 'children'> {
+  /** Rendered contents of the tree item or child items. */
+  children: ReactNode
+}
+
+
+export const TreeViewItemContent = (props: SpectrumTreeViewItemContentProps) => {
+  let {
+    children
+  } = props;
+
+  return (
+    <TreeItemContent>
+      {({isExpanded, hasChildItems, level, selectionMode, selectionBehavior, isDisabled, isSelected, isFocusVisible, state, id}) => {
+        let isFirst = state.collection.getFirstKey() === id;
+        return (
           <div className={treeCellGrid({isDisabled})}>
             {selectionMode !== 'none' && selectionBehavior === 'toggle' && (
               // TODO: add transition?
@@ -275,15 +265,15 @@ export const TreeViewItem = <T extends object>(props: SpectrumTreeViewItemProps<
                 UNSAFE_className={treeCheckbox()}
                 UNSAFE_style={{paddingInlineEnd: '0px'}}
                 slot="selection" />
-            )}
+              )}
             <div style={{gridArea: 'level-padding', marginInlineEnd: `calc(${level - 1} * var(--spectrum-global-dimension-size-200))`}} />
             {/* TODO: revisit when we do async loading, at the moment hasChildItems will only cause the chevron to be rendered, no aria/data attributes indicating the row's expandability are added */}
-            {(hasChildRows || hasChildItems) && <ExpandableRowChevron isDisabled={isDisabled} isExpanded={isExpanded} />}
+            {hasChildItems && <ExpandableRowChevron isDisabled={isDisabled} isExpanded={isExpanded} />}
             <SlotProvider
               slots={{
                 text: {UNSAFE_className: treeContent({isDisabled})},
-                // Note there is also an issue here where these icon props are making into the action menu's icon. Resolved by 8ab0ffb276ff437a65b365c9a3be0323a1b24656
-                // but could crop up later for other components
+                  // Note there is also an issue here where these icon props are making into the action menu's icon. Resolved by 8ab0ffb276ff437a65b365c9a3be0323a1b24656
+                  // but could crop up later for other components
                 icon: {UNSAFE_className: treeIcon(), size: 'S'},
                 actionButton: {UNSAFE_className: treeActions(), isQuiet: true},
                 actionGroup: {
@@ -296,14 +286,13 @@ export const TreeViewItem = <T extends object>(props: SpectrumTreeViewItemProps<
                 },
                 actionMenu: {UNSAFE_className: treeActionMenu(), UNSAFE_style: {marginInlineEnd: '.5rem'}, isQuiet: true}
               }}>
-              {content}
+              {children}
             </SlotProvider>
-            <div className={treeRowOutline({isFocusVisible, isSelected})} />
+            <div className={treeRowOutline({isFocusVisible, isSelected, isFirst})} />
           </div>
-        )}
-      </UNSTABLE_TreeItemContent>
-      {nestedRows}
-    </UNSTABLE_TreeItem>
+        );
+      }}
+    </TreeItemContent>
   );
 };
 
@@ -332,7 +321,7 @@ const expandButton = style<ExpandableRowChevronProps>({
 });
 
 function ExpandableRowChevron(props: ExpandableRowChevronProps) {
-  let expandButtonRef = useRef<HTMLSpanElement>(null);
+  let expandButtonRef = useRef(null);
   let [fullProps, ref] = useContextProps({...props, slot: 'chevron'}, expandButtonRef, ButtonContext);
   let {isExpanded, isDisabled} = fullProps;
   let {direction} = useLocale();
@@ -354,9 +343,3 @@ function ExpandableRowChevron(props: ExpandableRowChevronProps) {
     </span>
   );
 }
-
-/**
- * A tree view provides users with a way to navigate nested hierarchical information.
- */
-const _TreeView = React.forwardRef(TreeView) as <T>(props: SpectrumTreeViewProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;
-export {_TreeView as TreeView};

package/src/index.ts

@@ -12,5 +12,6 @@
 
 /// <reference types="css-module-types" />
 
-export {TreeViewItem, TreeView} from './TreeView';
-export type {SpectrumTreeViewProps, SpectrumTreeViewItemProps} from './TreeView';
+export {TreeViewItem, TreeView, TreeViewItemContent} from './TreeView';
+export {Collection} from 'react-aria-components';
+export type {SpectrumTreeViewProps, SpectrumTreeViewItemProps, SpectrumTreeViewItemContentProps} from './TreeView';

package/dist/TreeView.fdfdaa1c.css.map

@@ -1 +0,0 @@
-{"mappings":"ACAA;EAGE;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAYA;;;;EAMA;;;;EApCA;;;;EAYA;;;;EAYA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAYA;;;;EAMA;;;;EAMA;;;;;EAYA;;;;EAMA;;;;EA1FA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EApCA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAlBA;;;;EAMA;;;;EANA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAxBA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAxBA;;;;EAMA;;;;EANA;;;;EAMA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAYA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAYA;;;;EAMA;;;;EA9EA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;;;;AA/DF;;AA4CA;EACE;IACE;;;;IAAA;;;;IA8CA;;;;IAIA","sources":["f54a9241b0b1bdd2","packages/@react-spectrum/tree/src/TreeView.tsx"],"sourcesContent":["@import \"43ede2ea230cbe77\";\n@import \"d6186a3bcdea23c0\";\n@import \"9b0163e48ed44108\";\n@import \"4145f5de7372e962\";\n@import \"5c8e7aff246c25c0\";\n@import \"e6e7b4c2a4a805d7\";\n@import \"ed226d1e6a9f6d5d\";\n@import \"af6efb89500ab023\";\n@import \"5458487886ba8cfe\";\n@import \"5be3595defba4bd4\";\n","@layer a, b;\n\n@layer a {\n  .wc {\n    border-top-width: var(--spectrum-alias-border-size-thick, var(--spectrum-global-dimension-static-size-25));\n  }\n}\n\n@layer a {\n  .xc {\n    border-bottom-width: var(--spectrum-alias-border-size-thick, var(--spectrum-global-dimension-static-size-25));\n  }\n}\n\n@layer a {\n  .ua {\n    border-inline-start-width: 0px;\n  }\n}\n\n@layer a {\n  .va {\n    border-inline-end-width: 0px;\n  }\n}\n\n@layer a {\n  .__ka {\n    box-sizing: border-box;\n  }\n}\n\n@layer a {\n  .Aa {\n    border-style: solid;\n  }\n}\n\n@layer a {\n  .ca {\n    border-color: transparent;\n  }\n}\n\n@layer b.a {\n  @media (forced-colors: active) {\n    .ca___y {\n      border-color: Background;\n    }\n  }\n}\n\n@layer a {\n  ._Vd {\n    justify-content: center;\n  }\n}\n\n@layer a {\n  ._Uc {\n    align-items: center;\n  }\n}\n\n@layer a {\n  .oY {\n    width: 100%;\n  }\n}\n\n@layer a {\n  .nY {\n    height: 100%;\n  }\n}\n\n@layer a {\n  ._Sd {\n    display: flex;\n  }\n}\n\n"],"names":[],"version":3,"file":"TreeView.fdfdaa1c.css.map"}