@react-spectrum/tree 3.0.0-alpha.1 → 3.0.0-alpha.3

package/dist/TreeView.main.js

@@ -288,7 +288,7 @@ const $9b0dbe0a88ecfa3f$var$expandButton = function anonymous(props) {
     return rules;
 };
 function $9b0dbe0a88ecfa3f$var$ExpandableRowChevron(props) {
-    let expandButtonRef = (0, $6Q8R1$react.useRef)();
+    let expandButtonRef = (0, $6Q8R1$react.useRef)(null);
     let [fullProps, ref] = (0, $6Q8R1$reactariacomponents.useContextProps)({
         ...props,
         slot: 'chevron'

package/dist/TreeView.main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/tree/src/TreeView.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaTreeGridListProps} from '@react-aria/tree';\nimport {ButtonContext, Collection, TreeItemContentRenderProps, TreeItemProps, TreeItemRenderProps, TreeRenderProps, UNSTABLE_Tree, UNSTABLE_TreeItem, UNSTABLE_TreeItemContent, useContextProps} from 'react-aria-components';\nimport {Checkbox} from '@react-spectrum/checkbox';\nimport ChevronLeftMedium from '@spectrum-icons/ui/ChevronLeftMedium';\nimport ChevronRightMedium from '@spectrum-icons/ui/ChevronRightMedium';\nimport {DOMRef, Expandable, Key, SelectionBehavior, SpectrumSelectionProps, StyleProps} from '@react-types/shared';\nimport {isAndroid} from '@react-aria/utils';\nimport React, {createContext, isValidElement, ReactElement, ReactNode, useContext, useRef} from 'react';\nimport {SlotProvider, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {Text} from '@react-spectrum/text';\nimport {useButton} from '@react-aria/button';\nimport {useLocale} from '@react-aria/i18n';\n\nexport interface SpectrumTreeViewProps<T> extends Omit<AriaTreeGridListProps<T>, 'children'>, StyleProps, SpectrumSelectionProps, Expandable {\n  /** Provides content to display when there are no items in the tree. */\n  renderEmptyState?: () => JSX.Element,\n  /**\n   * Handler that is called when a user performs an action on an item. The exact user event depends on\n   * the collection's `selectionStyle` prop and the interaction modality.\n   */\n  onAction?: (key: Key) => void,\n  /**\n   * The contents of the tree.\n   */\n  children?: ReactNode | ((item: T) => ReactNode)\n}\n\nexport interface SpectrumTreeViewItemProps extends Omit<TreeItemProps, 'className' | 'style' | 'value'> {\n  /** Rendered contents of the tree item or child items. */\n  children: ReactNode,\n  /** Whether this item has children, even if not loaded yet. */\n  hasChildItems?: boolean\n}\n\ninterface TreeRendererContextValue {\n  renderer?: (item) => React.ReactElement<any, string | React.JSXElementConstructor<any>>\n}\nconst TreeRendererContext = createContext<TreeRendererContextValue>({});\n\nfunction useTreeRendererContext(): TreeRendererContextValue {\n  return useContext(TreeRendererContext)!;\n}\n\n// TODO: add animations for rows appearing and disappearing\n\n// 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\n// keyboard focus ring. Perhaps find a different way of rendering the outlines since the top of the item doesn't\n// scroll into view due to how the ring is offset. Alternatively, have the tree render the top/bottom outline like it does in Listview\nconst tree = style<Pick<TreeRenderProps, 'isEmpty'>>({\n  borderWidth: 2,\n  boxSizing: 'border-box',\n  borderXWidth: 0,\n  borderStyle: 'solid',\n  borderColor: {\n    default: 'transparent',\n    forcedColors: 'Background'\n  },\n  justifyContent: {\n    isEmpty: 'center'\n  },\n  alignItems: {\n    isEmpty: 'center'\n  },\n  width: {\n    isEmpty: 'full'\n  },\n  height: {\n    isEmpty: 'full'\n  },\n  display: {\n    isEmpty: 'flex'\n  }\n});\n\nfunction TreeView<T extends object>(props: SpectrumTreeViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n  let {children, selectionStyle} = props;\n\n  let renderer;\n  if (typeof children === 'function') {\n    renderer = children;\n  }\n\n  let {styleProps} = useStyleProps(props);\n  let domRef = useDOMRef(ref);\n  let selectionBehavior = selectionStyle === 'highlight' ? 'replace' : 'toggle';\n\n  return (\n    <TreeRendererContext.Provider value={{renderer}}>\n      <UNSTABLE_Tree {...props} {...styleProps} className={({isEmpty}) => tree({isEmpty})} selectionBehavior={selectionBehavior as SelectionBehavior} ref={domRef}>\n        {props.children}\n      </UNSTABLE_Tree>\n    </TreeRendererContext.Provider>\n  );\n}\n\ninterface TreeRowRenderProps extends TreeItemRenderProps {\n  isLink?: boolean\n}\n\nconst treeRow = style<TreeRowRenderProps>({\n  position: 'relative',\n  display: 'flex',\n  height: 10,\n  width: 'full',\n  boxSizing: 'border-box',\n  fontSize: 'base',\n  fontWeight: 'normal',\n  lineHeight: 200,\n  color: 'body',\n  outlineStyle: 'none',\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  // TODO: not sure where to get the equivalent colors here, for instance isHovered is spectrum 600 with 10% opacity but I don't think that exists in the theme\n  backgroundColor: {\n    isHovered: '[var(--spectrum-table-row-background-color-hover)]',\n    isFocusVisibleWithin: '[var(--spectrum-table-row-background-color-hover)]',\n    isPressed: '[var(--spectrum-table-row-background-color-down)]',\n    isSelected: '[var(--spectrum-table-row-background-color-selected)]'\n  }\n});\n\nconst treeCellGrid = style({\n  display: 'grid',\n  width: 'full',\n  alignItems: 'center',\n  // TODO: needed to use spectrum var since gridTemplateColumns uses baseSizing and not scaled sizing\n  gridTemplateColumns: ['minmax(0, auto)', 'minmax(0, auto)', 'minmax(0, auto)', 'var(--spectrum-global-dimension-size-500)', 'minmax(0, auto)', '1fr', 'minmax(0, auto)', 'auto'],\n  gridTemplateRows: '1fr',\n  gridTemplateAreas: [\n    'drag-handle checkbox level-padding expand-button icon content actions actionmenu'\n  ],\n  color: {\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    }\n  }\n});\n\n// TODO: These styles lose against the spectrum class names, so I've did unsafe for the ones that get overridden\nconst treeCheckbox = style({\n  gridArea: 'checkbox',\n  transitionDuration: '160ms',\n  marginStart: 3,\n  marginEnd: 0\n});\n\nconst treeIcon = style({\n  gridArea: 'icon',\n  marginEnd: 2\n});\n\nconst treeContent = style<Pick<TreeItemContentRenderProps, 'isDisabled'>>({\n  gridArea: 'content',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden'\n});\n\nconst treeActions = style({\n  gridArea: 'actions',\n  flexGrow: 0,\n  flexShrink: 0,\n  /* TODO: I made this one up, confirm desired behavior. These paddings are to make sure the action group has enough padding for the focus ring */\n  marginStart: .5,\n  marginEnd: 1\n});\n\nconst treeActionMenu = style({\n  gridArea: 'actionmenu',\n  width: 8\n});\n\nconst treeRowOutline = style({\n  content: '',\n  display: 'block',\n  position: 'absolute',\n  insetStart: 0,\n  insetEnd: 0,\n  top: {\n    default: 0,\n    isFocusVisible: '[-2px]',\n    isSelected: {\n      default: '[-1px]',\n      isFocusVisible: '[-2px]'\n    }\n  },\n  bottom: 0,\n  pointerEvents: 'none',\n  forcedColorAdjust: 'none',\n\n  boxShadow: {\n    isFocusVisible: '[inset 2px 0 0 0 var(--spectrum-alias-focus-color), inset -2px 0 0 0 var(--spectrum-alias-focus-color), inset 0 -2px 0 0 var(--spectrum-alias-focus-color), inset 0 2px 0 0 var(--spectrum-alias-focus-color)]',\n    isSelected: {\n      default: '[inset 1px 0 0 0 var(--spectrum-alias-focus-color), inset -1px 0 0 0 var(--spectrum-alias-focus-color), inset 0 -1px 0 0 var(--spectrum-alias-focus-color), inset 0 1px 0 0 var(--spectrum-alias-focus-color)]',\n      isFocusVisible: '[inset 2px 0 0 0 var(--spectrum-alias-focus-color), inset -2px 0 0 0 var(--spectrum-alias-focus-color), inset 0 -2px 0 0 var(--spectrum-alias-focus-color), inset 0 2px 0 0 var(--spectrum-alias-focus-color)]'\n    },\n    forcedColors: {\n      isFocusVisible: '[inset 2px 0 0 0 Highlight, inset -2px 0 0 0 Highlight, inset 0 -2px 0 0 Highlight, inset 0 2px 0 0 Highlight]',\n      isSelected: {\n        default: '[inset 1px 0 0 0 Highlight, inset -1px 0 0 0 Highlight, inset 0 -1px 0 0 Highlight, inset 0 1px 0 0 Highlight]',\n        isFocusVisible: '[inset 2px 0 0 0 Highlight, inset -2px 0 0 0 Highlight, inset 0 -2px 0 0 Highlight, inset 0 2px 0 0 Highlight]'\n      }\n    }\n  }\n});\n\nexport const TreeViewItem = (props: SpectrumTreeViewItemProps) => {\n  let {\n    children,\n    childItems,\n    hasChildItems,\n    href\n  } = props;\n\n  let content;\n  let nestedRows;\n  let {renderer} = useTreeRendererContext();\n  // TODO alternative api is that we have a separate prop for the TreeItems contents and expect the child to then be\n  // a nested tree item\n\n  if (typeof children === 'string') {\n    content = <Text>{children}</Text>;\n  } else {\n    content = [];\n    nestedRows = [];\n    React.Children.forEach(children, node => {\n      if (isValidElement(node) && node.type === TreeViewItem) {\n        nestedRows.push(node);\n      } else {\n        content.push(node);\n      }\n    });\n  }\n\n  if (childItems != null && renderer) {\n    nestedRows = (\n      <Collection items={childItems}>\n        {renderer}\n      </Collection>\n    );\n  }\n\n  return (\n    // TODO right now all the tree rows have the various data attributes applied on their dom nodes, should they? Doesn't feel very useful\n    <UNSTABLE_TreeItem\n      {...props}\n      className={renderProps => treeRow({\n        ...renderProps,\n        isLink: !!href\n      })}>\n      <UNSTABLE_TreeItemContent>\n        {({isExpanded, hasChildRows, level, selectionMode, selectionBehavior, isDisabled, isSelected, isFocusVisible}) => (\n          <div className={treeCellGrid({isDisabled})}>\n            {selectionMode !== 'none' && selectionBehavior === 'toggle' && (\n              // TODO: add transition?\n              <Checkbox\n                isEmphasized\n                UNSAFE_className={treeCheckbox()}\n                UNSAFE_style={{paddingInlineEnd: '0px'}}\n                slot=\"selection\" />\n            )}\n            <div style={{gridArea: 'level-padding', marginInlineEnd: `calc(${level - 1} * var(--spectrum-global-dimension-size-200))`}} />\n            {/* 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 */}\n            {(hasChildRows || hasChildItems) && <ExpandableRowChevron isDisabled={isDisabled} isExpanded={isExpanded} />}\n            <SlotProvider\n              slots={{\n                text: {UNSAFE_className: treeContent({isDisabled})},\n                // Note there is also an issue here where these icon props are making into the action menu's icon. Resolved by 8ab0ffb276ff437a65b365c9a3be0323a1b24656\n                // but could crop up later for other components\n                icon: {UNSAFE_className: treeIcon(), size: 'S'},\n                actionButton: {UNSAFE_className: treeActions(), isQuiet: true},\n                actionGroup: {\n                  UNSAFE_className: treeActions(),\n                  isQuiet: true,\n                  density: 'compact',\n                  buttonLabelBehavior: 'hide',\n                  isDisabled,\n                  overflowMode: 'collapse'\n                },\n                actionMenu: {UNSAFE_className: treeActionMenu(), UNSAFE_style: {marginInlineEnd: '.5rem'}, isQuiet: true}\n              }}>\n              {content}\n            </SlotProvider>\n            <div className={treeRowOutline({isFocusVisible, isSelected})} />\n          </div>\n        )}\n      </UNSTABLE_TreeItemContent>\n      {nestedRows}\n    </UNSTABLE_TreeItem>\n  );\n};\n\ninterface ExpandableRowChevronProps {\n  isExpanded?: boolean,\n  isDisabled?: boolean,\n  isRTL?: boolean\n}\n\nconst expandButton = style<ExpandableRowChevronProps>({\n  gridArea: 'expand-button',\n  height: 'full',\n  aspectRatio: 'square',\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignContent: 'center',\n  justifyContent: 'center',\n  outlineStyle: 'none',\n  transform: {\n    isExpanded: {\n      default: 'rotate(90deg)',\n      isRTL: 'rotate(-90deg)'\n    }\n  },\n  transition: '[transform ease var(--spectrum-global-animation-duration-100)]'\n});\n\nfunction ExpandableRowChevron(props: ExpandableRowChevronProps) {\n  let expandButtonRef = useRef();\n  let [fullProps, ref] = useContextProps({...props, slot: 'chevron'}, expandButtonRef, ButtonContext);\n  let {isExpanded, isDisabled} = fullProps;\n  let {direction} = useLocale();\n\n  // Will need to keep the chevron as a button for iOS VO at all times since VO doesn't focus the cell. Also keep as button if cellAction is defined by the user in the future\n  let {buttonProps} = useButton({\n    ...fullProps,\n    elementType: 'span'\n  }, ref);\n\n  return (\n    <span\n      {...buttonProps}\n      ref={ref}\n      // Override tabindex so that grid keyboard nav skips over it. Needs -1 so android talkback can actually \"focus\" it\n      tabIndex={isAndroid() && !isDisabled ? -1 : undefined}\n      className={expandButton({isExpanded, isDisabled, isRTL: direction === 'rtl'})}>\n      {direction === 'ltr' ? <ChevronRightMedium /> : <ChevronLeftMedium />}\n    </span>\n  );\n}\n\n/**\n * A tree view provides users with a way to navigate nested hierarchical information.\n */\nconst _TreeView = React.forwardRef(TreeView) as <T>(props: SpectrumTreeViewProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\nexport {_TreeView as TreeView};\n"],"names":[],"version":3,"file":"TreeView.main.js.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/tree/src/TreeView.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaTreeGridListProps} from '@react-aria/tree';\nimport {ButtonContext, Collection, TreeItemContentRenderProps, TreeItemProps, TreeItemRenderProps, TreeRenderProps, UNSTABLE_Tree, UNSTABLE_TreeItem, UNSTABLE_TreeItemContent, useContextProps} from 'react-aria-components';\nimport {Checkbox} from '@react-spectrum/checkbox';\nimport ChevronLeftMedium from '@spectrum-icons/ui/ChevronLeftMedium';\nimport ChevronRightMedium from '@spectrum-icons/ui/ChevronRightMedium';\nimport {DOMRef, Expandable, Key, SelectionBehavior, SpectrumSelectionProps, StyleProps} from '@react-types/shared';\nimport {isAndroid} from '@react-aria/utils';\nimport React, {createContext, isValidElement, JSX, JSXElementConstructor, ReactElement, ReactNode, useContext, useRef} from 'react';\nimport {SlotProvider, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {Text} from '@react-spectrum/text';\nimport {useButton} from '@react-aria/button';\nimport {useLocale} from '@react-aria/i18n';\n\nexport interface SpectrumTreeViewProps<T> extends Omit<AriaTreeGridListProps<T>, 'children'>, StyleProps, SpectrumSelectionProps, Expandable {\n  /** Provides content to display when there are no items in the tree. */\n  renderEmptyState?: () => JSX.Element,\n  /**\n   * Handler that is called when a user performs an action on an item. The exact user event depends on\n   * the collection's `selectionStyle` prop and the interaction modality.\n   */\n  onAction?: (key: Key) => void,\n  /**\n   * The contents of the tree.\n   */\n  children?: ReactNode | ((item: T) => ReactNode)\n}\n\nexport interface SpectrumTreeViewItemProps<T extends object = object> extends Omit<TreeItemProps, 'className' | 'style' | 'value' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'> {\n  /** Rendered contents of the tree item or child items. */\n  children: ReactNode,\n  /** Whether this item has children, even if not loaded yet. */\n  hasChildItems?: boolean,\n  /** A list of child tree item objects used when dynamically rendering the tree item children. */\n  childItems?: Iterable<T>\n}\n\ninterface TreeRendererContextValue {\n  renderer?: (item) => ReactElement<any, string | JSXElementConstructor<any>>\n}\nconst TreeRendererContext = createContext<TreeRendererContextValue>({});\n\nfunction useTreeRendererContext(): TreeRendererContextValue {\n  return useContext(TreeRendererContext)!;\n}\n\n// TODO: add animations for rows appearing and disappearing\n\n// 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\n// keyboard focus ring. Perhaps find a different way of rendering the outlines since the top of the item doesn't\n// scroll into view due to how the ring is offset. Alternatively, have the tree render the top/bottom outline like it does in Listview\nconst tree = style<Pick<TreeRenderProps, 'isEmpty'>>({\n  borderWidth: 2,\n  boxSizing: 'border-box',\n  borderXWidth: 0,\n  borderStyle: 'solid',\n  borderColor: {\n    default: 'transparent',\n    forcedColors: 'Background'\n  },\n  justifyContent: {\n    isEmpty: 'center'\n  },\n  alignItems: {\n    isEmpty: 'center'\n  },\n  width: {\n    isEmpty: 'full'\n  },\n  height: {\n    isEmpty: 'full'\n  },\n  display: {\n    isEmpty: 'flex'\n  }\n});\n\nfunction TreeView<T extends object>(props: SpectrumTreeViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n  let {children, selectionStyle} = props;\n\n  let renderer;\n  if (typeof children === 'function') {\n    renderer = children;\n  }\n\n  let {styleProps} = useStyleProps(props);\n  let domRef = useDOMRef(ref);\n  let selectionBehavior = selectionStyle === 'highlight' ? 'replace' : 'toggle';\n\n  return (\n    <TreeRendererContext.Provider value={{renderer}}>\n      <UNSTABLE_Tree {...props} {...styleProps} className={({isEmpty}) => tree({isEmpty})} selectionBehavior={selectionBehavior as SelectionBehavior} ref={domRef}>\n        {props.children}\n      </UNSTABLE_Tree>\n    </TreeRendererContext.Provider>\n  );\n}\n\ninterface TreeRowRenderProps extends TreeItemRenderProps {\n  isLink?: boolean\n}\n\nconst treeRow = style<TreeRowRenderProps>({\n  position: 'relative',\n  display: 'flex',\n  height: 10,\n  width: 'full',\n  boxSizing: 'border-box',\n  fontSize: 'base',\n  fontWeight: 'normal',\n  lineHeight: 200,\n  color: 'body',\n  outlineStyle: 'none',\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  // TODO: not sure where to get the equivalent colors here, for instance isHovered is spectrum 600 with 10% opacity but I don't think that exists in the theme\n  backgroundColor: {\n    isHovered: '[var(--spectrum-table-row-background-color-hover)]',\n    isFocusVisibleWithin: '[var(--spectrum-table-row-background-color-hover)]',\n    isPressed: '[var(--spectrum-table-row-background-color-down)]',\n    isSelected: '[var(--spectrum-table-row-background-color-selected)]'\n  }\n});\n\nconst treeCellGrid = style({\n  display: 'grid',\n  width: 'full',\n  alignItems: 'center',\n  // TODO: needed to use spectrum var since gridTemplateColumns uses baseSizing and not scaled sizing\n  gridTemplateColumns: ['minmax(0, auto)', 'minmax(0, auto)', 'minmax(0, auto)', 'var(--spectrum-global-dimension-size-500)', 'minmax(0, auto)', '1fr', 'minmax(0, auto)', 'auto'],\n  gridTemplateRows: '1fr',\n  gridTemplateAreas: [\n    'drag-handle checkbox level-padding expand-button icon content actions actionmenu'\n  ],\n  color: {\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    }\n  }\n});\n\n// TODO: These styles lose against the spectrum class names, so I've did unsafe for the ones that get overridden\nconst treeCheckbox = style({\n  gridArea: 'checkbox',\n  transitionDuration: '160ms',\n  marginStart: 3,\n  marginEnd: 0\n});\n\nconst treeIcon = style({\n  gridArea: 'icon',\n  marginEnd: 2\n});\n\nconst treeContent = style<Pick<TreeItemContentRenderProps, 'isDisabled'>>({\n  gridArea: 'content',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden'\n});\n\nconst treeActions = style({\n  gridArea: 'actions',\n  flexGrow: 0,\n  flexShrink: 0,\n  /* TODO: I made this one up, confirm desired behavior. These paddings are to make sure the action group has enough padding for the focus ring */\n  marginStart: .5,\n  marginEnd: 1\n});\n\nconst treeActionMenu = style({\n  gridArea: 'actionmenu',\n  width: 8\n});\n\nconst treeRowOutline = style({\n  content: '',\n  display: 'block',\n  position: 'absolute',\n  insetStart: 0,\n  insetEnd: 0,\n  top: {\n    default: 0,\n    isFocusVisible: '[-2px]',\n    isSelected: {\n      default: '[-1px]',\n      isFocusVisible: '[-2px]'\n    }\n  },\n  bottom: 0,\n  pointerEvents: 'none',\n  forcedColorAdjust: 'none',\n\n  boxShadow: {\n    isFocusVisible: '[inset 2px 0 0 0 var(--spectrum-alias-focus-color), inset -2px 0 0 0 var(--spectrum-alias-focus-color), inset 0 -2px 0 0 var(--spectrum-alias-focus-color), inset 0 2px 0 0 var(--spectrum-alias-focus-color)]',\n    isSelected: {\n      default: '[inset 1px 0 0 0 var(--spectrum-alias-focus-color), inset -1px 0 0 0 var(--spectrum-alias-focus-color), inset 0 -1px 0 0 var(--spectrum-alias-focus-color), inset 0 1px 0 0 var(--spectrum-alias-focus-color)]',\n      isFocusVisible: '[inset 2px 0 0 0 var(--spectrum-alias-focus-color), inset -2px 0 0 0 var(--spectrum-alias-focus-color), inset 0 -2px 0 0 var(--spectrum-alias-focus-color), inset 0 2px 0 0 var(--spectrum-alias-focus-color)]'\n    },\n    forcedColors: {\n      isFocusVisible: '[inset 2px 0 0 0 Highlight, inset -2px 0 0 0 Highlight, inset 0 -2px 0 0 Highlight, inset 0 2px 0 0 Highlight]',\n      isSelected: {\n        default: '[inset 1px 0 0 0 Highlight, inset -1px 0 0 0 Highlight, inset 0 -1px 0 0 Highlight, inset 0 1px 0 0 Highlight]',\n        isFocusVisible: '[inset 2px 0 0 0 Highlight, inset -2px 0 0 0 Highlight, inset 0 -2px 0 0 Highlight, inset 0 2px 0 0 Highlight]'\n      }\n    }\n  }\n});\n\nexport const TreeViewItem = <T extends object>(props: SpectrumTreeViewItemProps<T>) => {\n  let {\n    children,\n    childItems,\n    hasChildItems,\n    href\n  } = props;\n\n  let content;\n  let nestedRows;\n  let {renderer} = useTreeRendererContext();\n  // TODO alternative api is that we have a separate prop for the TreeItems contents and expect the child to then be\n  // a nested tree item\n\n  if (typeof children === 'string') {\n    content = <Text>{children}</Text>;\n  } else {\n    content = [];\n    nestedRows = [];\n    React.Children.forEach(children, node => {\n      if (isValidElement(node) && node.type === TreeViewItem) {\n        nestedRows.push(node);\n      } else {\n        content.push(node);\n      }\n    });\n  }\n\n  if (childItems != null && renderer) {\n    nestedRows = (\n      <Collection items={childItems}>\n        {renderer}\n      </Collection>\n    );\n  }\n\n  return (\n    // TODO right now all the tree rows have the various data attributes applied on their dom nodes, should they? Doesn't feel very useful\n    <UNSTABLE_TreeItem\n      {...props}\n      className={renderProps => treeRow({\n        ...renderProps,\n        isLink: !!href\n      })}>\n      <UNSTABLE_TreeItemContent>\n        {({isExpanded, hasChildRows, level, selectionMode, selectionBehavior, isDisabled, isSelected, isFocusVisible}) => (\n          <div className={treeCellGrid({isDisabled})}>\n            {selectionMode !== 'none' && selectionBehavior === 'toggle' && (\n              // TODO: add transition?\n              <Checkbox\n                isEmphasized\n                UNSAFE_className={treeCheckbox()}\n                UNSAFE_style={{paddingInlineEnd: '0px'}}\n                slot=\"selection\" />\n            )}\n            <div style={{gridArea: 'level-padding', marginInlineEnd: `calc(${level - 1} * var(--spectrum-global-dimension-size-200))`}} />\n            {/* 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 */}\n            {(hasChildRows || hasChildItems) && <ExpandableRowChevron isDisabled={isDisabled} isExpanded={isExpanded} />}\n            <SlotProvider\n              slots={{\n                text: {UNSAFE_className: treeContent({isDisabled})},\n                // Note there is also an issue here where these icon props are making into the action menu's icon. Resolved by 8ab0ffb276ff437a65b365c9a3be0323a1b24656\n                // but could crop up later for other components\n                icon: {UNSAFE_className: treeIcon(), size: 'S'},\n                actionButton: {UNSAFE_className: treeActions(), isQuiet: true},\n                actionGroup: {\n                  UNSAFE_className: treeActions(),\n                  isQuiet: true,\n                  density: 'compact',\n                  buttonLabelBehavior: 'hide',\n                  isDisabled,\n                  overflowMode: 'collapse'\n                },\n                actionMenu: {UNSAFE_className: treeActionMenu(), UNSAFE_style: {marginInlineEnd: '.5rem'}, isQuiet: true}\n              }}>\n              {content}\n            </SlotProvider>\n            <div className={treeRowOutline({isFocusVisible, isSelected})} />\n          </div>\n        )}\n      </UNSTABLE_TreeItemContent>\n      {nestedRows}\n    </UNSTABLE_TreeItem>\n  );\n};\n\ninterface ExpandableRowChevronProps {\n  isExpanded?: boolean,\n  isDisabled?: boolean,\n  isRTL?: boolean\n}\n\nconst expandButton = style<ExpandableRowChevronProps>({\n  gridArea: 'expand-button',\n  height: 'full',\n  aspectRatio: 'square',\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignContent: 'center',\n  justifyContent: 'center',\n  outlineStyle: 'none',\n  transform: {\n    isExpanded: {\n      default: 'rotate(90deg)',\n      isRTL: 'rotate(-90deg)'\n    }\n  },\n  transition: '[transform ease var(--spectrum-global-animation-duration-100)]'\n});\n\nfunction ExpandableRowChevron(props: ExpandableRowChevronProps) {\n  let expandButtonRef = useRef<HTMLSpanElement>(null);\n  let [fullProps, ref] = useContextProps({...props, slot: 'chevron'}, expandButtonRef, ButtonContext);\n  let {isExpanded, isDisabled} = fullProps;\n  let {direction} = useLocale();\n\n  // Will need to keep the chevron as a button for iOS VO at all times since VO doesn't focus the cell. Also keep as button if cellAction is defined by the user in the future\n  let {buttonProps} = useButton({\n    ...fullProps,\n    elementType: 'span'\n  }, ref);\n\n  return (\n    <span\n      {...buttonProps}\n      ref={ref}\n      // Override tabindex so that grid keyboard nav skips over it. Needs -1 so android talkback can actually \"focus\" it\n      tabIndex={isAndroid() && !isDisabled ? -1 : undefined}\n      className={expandButton({isExpanded, isDisabled, isRTL: direction === 'rtl'})}>\n      {direction === 'ltr' ? <ChevronRightMedium /> : <ChevronLeftMedium />}\n    </span>\n  );\n}\n\n/**\n * A tree view provides users with a way to navigate nested hierarchical information.\n */\nconst _TreeView = React.forwardRef(TreeView) as <T>(props: SpectrumTreeViewProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\nexport {_TreeView as TreeView};\n"],"names":[],"version":3,"file":"TreeView.main.js.map"}

package/dist/TreeView.mjs

@@ -277,7 +277,7 @@ const $48b8113347121625$var$expandButton = function anonymous(props) {
     return rules;
 };
 function $48b8113347121625$var$ExpandableRowChevron(props) {
-    let expandButtonRef = (0, $FHprs$useRef)();
+    let expandButtonRef = (0, $FHprs$useRef)(null);
     let [fullProps, ref] = (0, $FHprs$useContextProps)({
         ...props,
         slot: 'chevron'

package/dist/TreeView.module.js

@@ -277,7 +277,7 @@ const $48b8113347121625$var$expandButton = function anonymous(props) {
     return rules;
 };
 function $48b8113347121625$var$ExpandableRowChevron(props) {
-    let expandButtonRef = (0, $FHprs$useRef)();
+    let expandButtonRef = (0, $FHprs$useRef)(null);
     let [fullProps, ref] = (0, $FHprs$useContextProps)({
         ...props,
         slot: 'chevron'

package/dist/TreeView.module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/tree/src/TreeView.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaTreeGridListProps} from '@react-aria/tree';\nimport {ButtonContext, Collection, TreeItemContentRenderProps, TreeItemProps, TreeItemRenderProps, TreeRenderProps, UNSTABLE_Tree, UNSTABLE_TreeItem, UNSTABLE_TreeItemContent, useContextProps} from 'react-aria-components';\nimport {Checkbox} from '@react-spectrum/checkbox';\nimport ChevronLeftMedium from '@spectrum-icons/ui/ChevronLeftMedium';\nimport ChevronRightMedium from '@spectrum-icons/ui/ChevronRightMedium';\nimport {DOMRef, Expandable, Key, SelectionBehavior, SpectrumSelectionProps, StyleProps} from '@react-types/shared';\nimport {isAndroid} from '@react-aria/utils';\nimport React, {createContext, isValidElement, ReactElement, ReactNode, useContext, useRef} from 'react';\nimport {SlotProvider, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {Text} from '@react-spectrum/text';\nimport {useButton} from '@react-aria/button';\nimport {useLocale} from '@react-aria/i18n';\n\nexport interface SpectrumTreeViewProps<T> extends Omit<AriaTreeGridListProps<T>, 'children'>, StyleProps, SpectrumSelectionProps, Expandable {\n  /** Provides content to display when there are no items in the tree. */\n  renderEmptyState?: () => JSX.Element,\n  /**\n   * Handler that is called when a user performs an action on an item. The exact user event depends on\n   * the collection's `selectionStyle` prop and the interaction modality.\n   */\n  onAction?: (key: Key) => void,\n  /**\n   * The contents of the tree.\n   */\n  children?: ReactNode | ((item: T) => ReactNode)\n}\n\nexport interface SpectrumTreeViewItemProps extends Omit<TreeItemProps, 'className' | 'style' | 'value'> {\n  /** Rendered contents of the tree item or child items. */\n  children: ReactNode,\n  /** Whether this item has children, even if not loaded yet. */\n  hasChildItems?: boolean\n}\n\ninterface TreeRendererContextValue {\n  renderer?: (item) => React.ReactElement<any, string | React.JSXElementConstructor<any>>\n}\nconst TreeRendererContext = createContext<TreeRendererContextValue>({});\n\nfunction useTreeRendererContext(): TreeRendererContextValue {\n  return useContext(TreeRendererContext)!;\n}\n\n// TODO: add animations for rows appearing and disappearing\n\n// 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\n// keyboard focus ring. Perhaps find a different way of rendering the outlines since the top of the item doesn't\n// scroll into view due to how the ring is offset. Alternatively, have the tree render the top/bottom outline like it does in Listview\nconst tree = style<Pick<TreeRenderProps, 'isEmpty'>>({\n  borderWidth: 2,\n  boxSizing: 'border-box',\n  borderXWidth: 0,\n  borderStyle: 'solid',\n  borderColor: {\n    default: 'transparent',\n    forcedColors: 'Background'\n  },\n  justifyContent: {\n    isEmpty: 'center'\n  },\n  alignItems: {\n    isEmpty: 'center'\n  },\n  width: {\n    isEmpty: 'full'\n  },\n  height: {\n    isEmpty: 'full'\n  },\n  display: {\n    isEmpty: 'flex'\n  }\n});\n\nfunction TreeView<T extends object>(props: SpectrumTreeViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n  let {children, selectionStyle} = props;\n\n  let renderer;\n  if (typeof children === 'function') {\n    renderer = children;\n  }\n\n  let {styleProps} = useStyleProps(props);\n  let domRef = useDOMRef(ref);\n  let selectionBehavior = selectionStyle === 'highlight' ? 'replace' : 'toggle';\n\n  return (\n    <TreeRendererContext.Provider value={{renderer}}>\n      <UNSTABLE_Tree {...props} {...styleProps} className={({isEmpty}) => tree({isEmpty})} selectionBehavior={selectionBehavior as SelectionBehavior} ref={domRef}>\n        {props.children}\n      </UNSTABLE_Tree>\n    </TreeRendererContext.Provider>\n  );\n}\n\ninterface TreeRowRenderProps extends TreeItemRenderProps {\n  isLink?: boolean\n}\n\nconst treeRow = style<TreeRowRenderProps>({\n  position: 'relative',\n  display: 'flex',\n  height: 10,\n  width: 'full',\n  boxSizing: 'border-box',\n  fontSize: 'base',\n  fontWeight: 'normal',\n  lineHeight: 200,\n  color: 'body',\n  outlineStyle: 'none',\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  // TODO: not sure where to get the equivalent colors here, for instance isHovered is spectrum 600 with 10% opacity but I don't think that exists in the theme\n  backgroundColor: {\n    isHovered: '[var(--spectrum-table-row-background-color-hover)]',\n    isFocusVisibleWithin: '[var(--spectrum-table-row-background-color-hover)]',\n    isPressed: '[var(--spectrum-table-row-background-color-down)]',\n    isSelected: '[var(--spectrum-table-row-background-color-selected)]'\n  }\n});\n\nconst treeCellGrid = style({\n  display: 'grid',\n  width: 'full',\n  alignItems: 'center',\n  // TODO: needed to use spectrum var since gridTemplateColumns uses baseSizing and not scaled sizing\n  gridTemplateColumns: ['minmax(0, auto)', 'minmax(0, auto)', 'minmax(0, auto)', 'var(--spectrum-global-dimension-size-500)', 'minmax(0, auto)', '1fr', 'minmax(0, auto)', 'auto'],\n  gridTemplateRows: '1fr',\n  gridTemplateAreas: [\n    'drag-handle checkbox level-padding expand-button icon content actions actionmenu'\n  ],\n  color: {\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    }\n  }\n});\n\n// TODO: These styles lose against the spectrum class names, so I've did unsafe for the ones that get overridden\nconst treeCheckbox = style({\n  gridArea: 'checkbox',\n  transitionDuration: '160ms',\n  marginStart: 3,\n  marginEnd: 0\n});\n\nconst treeIcon = style({\n  gridArea: 'icon',\n  marginEnd: 2\n});\n\nconst treeContent = style<Pick<TreeItemContentRenderProps, 'isDisabled'>>({\n  gridArea: 'content',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden'\n});\n\nconst treeActions = style({\n  gridArea: 'actions',\n  flexGrow: 0,\n  flexShrink: 0,\n  /* TODO: I made this one up, confirm desired behavior. These paddings are to make sure the action group has enough padding for the focus ring */\n  marginStart: .5,\n  marginEnd: 1\n});\n\nconst treeActionMenu = style({\n  gridArea: 'actionmenu',\n  width: 8\n});\n\nconst treeRowOutline = style({\n  content: '',\n  display: 'block',\n  position: 'absolute',\n  insetStart: 0,\n  insetEnd: 0,\n  top: {\n    default: 0,\n    isFocusVisible: '[-2px]',\n    isSelected: {\n      default: '[-1px]',\n      isFocusVisible: '[-2px]'\n    }\n  },\n  bottom: 0,\n  pointerEvents: 'none',\n  forcedColorAdjust: 'none',\n\n  boxShadow: {\n    isFocusVisible: '[inset 2px 0 0 0 var(--spectrum-alias-focus-color), inset -2px 0 0 0 var(--spectrum-alias-focus-color), inset 0 -2px 0 0 var(--spectrum-alias-focus-color), inset 0 2px 0 0 var(--spectrum-alias-focus-color)]',\n    isSelected: {\n      default: '[inset 1px 0 0 0 var(--spectrum-alias-focus-color), inset -1px 0 0 0 var(--spectrum-alias-focus-color), inset 0 -1px 0 0 var(--spectrum-alias-focus-color), inset 0 1px 0 0 var(--spectrum-alias-focus-color)]',\n      isFocusVisible: '[inset 2px 0 0 0 var(--spectrum-alias-focus-color), inset -2px 0 0 0 var(--spectrum-alias-focus-color), inset 0 -2px 0 0 var(--spectrum-alias-focus-color), inset 0 2px 0 0 var(--spectrum-alias-focus-color)]'\n    },\n    forcedColors: {\n      isFocusVisible: '[inset 2px 0 0 0 Highlight, inset -2px 0 0 0 Highlight, inset 0 -2px 0 0 Highlight, inset 0 2px 0 0 Highlight]',\n      isSelected: {\n        default: '[inset 1px 0 0 0 Highlight, inset -1px 0 0 0 Highlight, inset 0 -1px 0 0 Highlight, inset 0 1px 0 0 Highlight]',\n        isFocusVisible: '[inset 2px 0 0 0 Highlight, inset -2px 0 0 0 Highlight, inset 0 -2px 0 0 Highlight, inset 0 2px 0 0 Highlight]'\n      }\n    }\n  }\n});\n\nexport const TreeViewItem = (props: SpectrumTreeViewItemProps) => {\n  let {\n    children,\n    childItems,\n    hasChildItems,\n    href\n  } = props;\n\n  let content;\n  let nestedRows;\n  let {renderer} = useTreeRendererContext();\n  // TODO alternative api is that we have a separate prop for the TreeItems contents and expect the child to then be\n  // a nested tree item\n\n  if (typeof children === 'string') {\n    content = <Text>{children}</Text>;\n  } else {\n    content = [];\n    nestedRows = [];\n    React.Children.forEach(children, node => {\n      if (isValidElement(node) && node.type === TreeViewItem) {\n        nestedRows.push(node);\n      } else {\n        content.push(node);\n      }\n    });\n  }\n\n  if (childItems != null && renderer) {\n    nestedRows = (\n      <Collection items={childItems}>\n        {renderer}\n      </Collection>\n    );\n  }\n\n  return (\n    // TODO right now all the tree rows have the various data attributes applied on their dom nodes, should they? Doesn't feel very useful\n    <UNSTABLE_TreeItem\n      {...props}\n      className={renderProps => treeRow({\n        ...renderProps,\n        isLink: !!href\n      })}>\n      <UNSTABLE_TreeItemContent>\n        {({isExpanded, hasChildRows, level, selectionMode, selectionBehavior, isDisabled, isSelected, isFocusVisible}) => (\n          <div className={treeCellGrid({isDisabled})}>\n            {selectionMode !== 'none' && selectionBehavior === 'toggle' && (\n              // TODO: add transition?\n              <Checkbox\n                isEmphasized\n                UNSAFE_className={treeCheckbox()}\n                UNSAFE_style={{paddingInlineEnd: '0px'}}\n                slot=\"selection\" />\n            )}\n            <div style={{gridArea: 'level-padding', marginInlineEnd: `calc(${level - 1} * var(--spectrum-global-dimension-size-200))`}} />\n            {/* 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 */}\n            {(hasChildRows || hasChildItems) && <ExpandableRowChevron isDisabled={isDisabled} isExpanded={isExpanded} />}\n            <SlotProvider\n              slots={{\n                text: {UNSAFE_className: treeContent({isDisabled})},\n                // Note there is also an issue here where these icon props are making into the action menu's icon. Resolved by 8ab0ffb276ff437a65b365c9a3be0323a1b24656\n                // but could crop up later for other components\n                icon: {UNSAFE_className: treeIcon(), size: 'S'},\n                actionButton: {UNSAFE_className: treeActions(), isQuiet: true},\n                actionGroup: {\n                  UNSAFE_className: treeActions(),\n                  isQuiet: true,\n                  density: 'compact',\n                  buttonLabelBehavior: 'hide',\n                  isDisabled,\n                  overflowMode: 'collapse'\n                },\n                actionMenu: {UNSAFE_className: treeActionMenu(), UNSAFE_style: {marginInlineEnd: '.5rem'}, isQuiet: true}\n              }}>\n              {content}\n            </SlotProvider>\n            <div className={treeRowOutline({isFocusVisible, isSelected})} />\n          </div>\n        )}\n      </UNSTABLE_TreeItemContent>\n      {nestedRows}\n    </UNSTABLE_TreeItem>\n  );\n};\n\ninterface ExpandableRowChevronProps {\n  isExpanded?: boolean,\n  isDisabled?: boolean,\n  isRTL?: boolean\n}\n\nconst expandButton = style<ExpandableRowChevronProps>({\n  gridArea: 'expand-button',\n  height: 'full',\n  aspectRatio: 'square',\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignContent: 'center',\n  justifyContent: 'center',\n  outlineStyle: 'none',\n  transform: {\n    isExpanded: {\n      default: 'rotate(90deg)',\n      isRTL: 'rotate(-90deg)'\n    }\n  },\n  transition: '[transform ease var(--spectrum-global-animation-duration-100)]'\n});\n\nfunction ExpandableRowChevron(props: ExpandableRowChevronProps) {\n  let expandButtonRef = useRef();\n  let [fullProps, ref] = useContextProps({...props, slot: 'chevron'}, expandButtonRef, ButtonContext);\n  let {isExpanded, isDisabled} = fullProps;\n  let {direction} = useLocale();\n\n  // Will need to keep the chevron as a button for iOS VO at all times since VO doesn't focus the cell. Also keep as button if cellAction is defined by the user in the future\n  let {buttonProps} = useButton({\n    ...fullProps,\n    elementType: 'span'\n  }, ref);\n\n  return (\n    <span\n      {...buttonProps}\n      ref={ref}\n      // Override tabindex so that grid keyboard nav skips over it. Needs -1 so android talkback can actually \"focus\" it\n      tabIndex={isAndroid() && !isDisabled ? -1 : undefined}\n      className={expandButton({isExpanded, isDisabled, isRTL: direction === 'rtl'})}>\n      {direction === 'ltr' ? <ChevronRightMedium /> : <ChevronLeftMedium />}\n    </span>\n  );\n}\n\n/**\n * A tree view provides users with a way to navigate nested hierarchical information.\n */\nconst _TreeView = React.forwardRef(TreeView) as <T>(props: SpectrumTreeViewProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\nexport {_TreeView as TreeView};\n"],"names":[],"version":3,"file":"TreeView.module.js.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/tree/src/TreeView.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaTreeGridListProps} from '@react-aria/tree';\nimport {ButtonContext, Collection, TreeItemContentRenderProps, TreeItemProps, TreeItemRenderProps, TreeRenderProps, UNSTABLE_Tree, UNSTABLE_TreeItem, UNSTABLE_TreeItemContent, useContextProps} from 'react-aria-components';\nimport {Checkbox} from '@react-spectrum/checkbox';\nimport ChevronLeftMedium from '@spectrum-icons/ui/ChevronLeftMedium';\nimport ChevronRightMedium from '@spectrum-icons/ui/ChevronRightMedium';\nimport {DOMRef, Expandable, Key, SelectionBehavior, SpectrumSelectionProps, StyleProps} from '@react-types/shared';\nimport {isAndroid} from '@react-aria/utils';\nimport React, {createContext, isValidElement, JSX, JSXElementConstructor, ReactElement, ReactNode, useContext, useRef} from 'react';\nimport {SlotProvider, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {Text} from '@react-spectrum/text';\nimport {useButton} from '@react-aria/button';\nimport {useLocale} from '@react-aria/i18n';\n\nexport interface SpectrumTreeViewProps<T> extends Omit<AriaTreeGridListProps<T>, 'children'>, StyleProps, SpectrumSelectionProps, Expandable {\n  /** Provides content to display when there are no items in the tree. */\n  renderEmptyState?: () => JSX.Element,\n  /**\n   * Handler that is called when a user performs an action on an item. The exact user event depends on\n   * the collection's `selectionStyle` prop and the interaction modality.\n   */\n  onAction?: (key: Key) => void,\n  /**\n   * The contents of the tree.\n   */\n  children?: ReactNode | ((item: T) => ReactNode)\n}\n\nexport interface SpectrumTreeViewItemProps<T extends object = object> extends Omit<TreeItemProps, 'className' | 'style' | 'value' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'> {\n  /** Rendered contents of the tree item or child items. */\n  children: ReactNode,\n  /** Whether this item has children, even if not loaded yet. */\n  hasChildItems?: boolean,\n  /** A list of child tree item objects used when dynamically rendering the tree item children. */\n  childItems?: Iterable<T>\n}\n\ninterface TreeRendererContextValue {\n  renderer?: (item) => ReactElement<any, string | JSXElementConstructor<any>>\n}\nconst TreeRendererContext = createContext<TreeRendererContextValue>({});\n\nfunction useTreeRendererContext(): TreeRendererContextValue {\n  return useContext(TreeRendererContext)!;\n}\n\n// TODO: add animations for rows appearing and disappearing\n\n// 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\n// keyboard focus ring. Perhaps find a different way of rendering the outlines since the top of the item doesn't\n// scroll into view due to how the ring is offset. Alternatively, have the tree render the top/bottom outline like it does in Listview\nconst tree = style<Pick<TreeRenderProps, 'isEmpty'>>({\n  borderWidth: 2,\n  boxSizing: 'border-box',\n  borderXWidth: 0,\n  borderStyle: 'solid',\n  borderColor: {\n    default: 'transparent',\n    forcedColors: 'Background'\n  },\n  justifyContent: {\n    isEmpty: 'center'\n  },\n  alignItems: {\n    isEmpty: 'center'\n  },\n  width: {\n    isEmpty: 'full'\n  },\n  height: {\n    isEmpty: 'full'\n  },\n  display: {\n    isEmpty: 'flex'\n  }\n});\n\nfunction TreeView<T extends object>(props: SpectrumTreeViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n  let {children, selectionStyle} = props;\n\n  let renderer;\n  if (typeof children === 'function') {\n    renderer = children;\n  }\n\n  let {styleProps} = useStyleProps(props);\n  let domRef = useDOMRef(ref);\n  let selectionBehavior = selectionStyle === 'highlight' ? 'replace' : 'toggle';\n\n  return (\n    <TreeRendererContext.Provider value={{renderer}}>\n      <UNSTABLE_Tree {...props} {...styleProps} className={({isEmpty}) => tree({isEmpty})} selectionBehavior={selectionBehavior as SelectionBehavior} ref={domRef}>\n        {props.children}\n      </UNSTABLE_Tree>\n    </TreeRendererContext.Provider>\n  );\n}\n\ninterface TreeRowRenderProps extends TreeItemRenderProps {\n  isLink?: boolean\n}\n\nconst treeRow = style<TreeRowRenderProps>({\n  position: 'relative',\n  display: 'flex',\n  height: 10,\n  width: 'full',\n  boxSizing: 'border-box',\n  fontSize: 'base',\n  fontWeight: 'normal',\n  lineHeight: 200,\n  color: 'body',\n  outlineStyle: 'none',\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  // TODO: not sure where to get the equivalent colors here, for instance isHovered is spectrum 600 with 10% opacity but I don't think that exists in the theme\n  backgroundColor: {\n    isHovered: '[var(--spectrum-table-row-background-color-hover)]',\n    isFocusVisibleWithin: '[var(--spectrum-table-row-background-color-hover)]',\n    isPressed: '[var(--spectrum-table-row-background-color-down)]',\n    isSelected: '[var(--spectrum-table-row-background-color-selected)]'\n  }\n});\n\nconst treeCellGrid = style({\n  display: 'grid',\n  width: 'full',\n  alignItems: 'center',\n  // TODO: needed to use spectrum var since gridTemplateColumns uses baseSizing and not scaled sizing\n  gridTemplateColumns: ['minmax(0, auto)', 'minmax(0, auto)', 'minmax(0, auto)', 'var(--spectrum-global-dimension-size-500)', 'minmax(0, auto)', '1fr', 'minmax(0, auto)', 'auto'],\n  gridTemplateRows: '1fr',\n  gridTemplateAreas: [\n    'drag-handle checkbox level-padding expand-button icon content actions actionmenu'\n  ],\n  color: {\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    }\n  }\n});\n\n// TODO: These styles lose against the spectrum class names, so I've did unsafe for the ones that get overridden\nconst treeCheckbox = style({\n  gridArea: 'checkbox',\n  transitionDuration: '160ms',\n  marginStart: 3,\n  marginEnd: 0\n});\n\nconst treeIcon = style({\n  gridArea: 'icon',\n  marginEnd: 2\n});\n\nconst treeContent = style<Pick<TreeItemContentRenderProps, 'isDisabled'>>({\n  gridArea: 'content',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden'\n});\n\nconst treeActions = style({\n  gridArea: 'actions',\n  flexGrow: 0,\n  flexShrink: 0,\n  /* TODO: I made this one up, confirm desired behavior. These paddings are to make sure the action group has enough padding for the focus ring */\n  marginStart: .5,\n  marginEnd: 1\n});\n\nconst treeActionMenu = style({\n  gridArea: 'actionmenu',\n  width: 8\n});\n\nconst treeRowOutline = style({\n  content: '',\n  display: 'block',\n  position: 'absolute',\n  insetStart: 0,\n  insetEnd: 0,\n  top: {\n    default: 0,\n    isFocusVisible: '[-2px]',\n    isSelected: {\n      default: '[-1px]',\n      isFocusVisible: '[-2px]'\n    }\n  },\n  bottom: 0,\n  pointerEvents: 'none',\n  forcedColorAdjust: 'none',\n\n  boxShadow: {\n    isFocusVisible: '[inset 2px 0 0 0 var(--spectrum-alias-focus-color), inset -2px 0 0 0 var(--spectrum-alias-focus-color), inset 0 -2px 0 0 var(--spectrum-alias-focus-color), inset 0 2px 0 0 var(--spectrum-alias-focus-color)]',\n    isSelected: {\n      default: '[inset 1px 0 0 0 var(--spectrum-alias-focus-color), inset -1px 0 0 0 var(--spectrum-alias-focus-color), inset 0 -1px 0 0 var(--spectrum-alias-focus-color), inset 0 1px 0 0 var(--spectrum-alias-focus-color)]',\n      isFocusVisible: '[inset 2px 0 0 0 var(--spectrum-alias-focus-color), inset -2px 0 0 0 var(--spectrum-alias-focus-color), inset 0 -2px 0 0 var(--spectrum-alias-focus-color), inset 0 2px 0 0 var(--spectrum-alias-focus-color)]'\n    },\n    forcedColors: {\n      isFocusVisible: '[inset 2px 0 0 0 Highlight, inset -2px 0 0 0 Highlight, inset 0 -2px 0 0 Highlight, inset 0 2px 0 0 Highlight]',\n      isSelected: {\n        default: '[inset 1px 0 0 0 Highlight, inset -1px 0 0 0 Highlight, inset 0 -1px 0 0 Highlight, inset 0 1px 0 0 Highlight]',\n        isFocusVisible: '[inset 2px 0 0 0 Highlight, inset -2px 0 0 0 Highlight, inset 0 -2px 0 0 Highlight, inset 0 2px 0 0 Highlight]'\n      }\n    }\n  }\n});\n\nexport const TreeViewItem = <T extends object>(props: SpectrumTreeViewItemProps<T>) => {\n  let {\n    children,\n    childItems,\n    hasChildItems,\n    href\n  } = props;\n\n  let content;\n  let nestedRows;\n  let {renderer} = useTreeRendererContext();\n  // TODO alternative api is that we have a separate prop for the TreeItems contents and expect the child to then be\n  // a nested tree item\n\n  if (typeof children === 'string') {\n    content = <Text>{children}</Text>;\n  } else {\n    content = [];\n    nestedRows = [];\n    React.Children.forEach(children, node => {\n      if (isValidElement(node) && node.type === TreeViewItem) {\n        nestedRows.push(node);\n      } else {\n        content.push(node);\n      }\n    });\n  }\n\n  if (childItems != null && renderer) {\n    nestedRows = (\n      <Collection items={childItems}>\n        {renderer}\n      </Collection>\n    );\n  }\n\n  return (\n    // TODO right now all the tree rows have the various data attributes applied on their dom nodes, should they? Doesn't feel very useful\n    <UNSTABLE_TreeItem\n      {...props}\n      className={renderProps => treeRow({\n        ...renderProps,\n        isLink: !!href\n      })}>\n      <UNSTABLE_TreeItemContent>\n        {({isExpanded, hasChildRows, level, selectionMode, selectionBehavior, isDisabled, isSelected, isFocusVisible}) => (\n          <div className={treeCellGrid({isDisabled})}>\n            {selectionMode !== 'none' && selectionBehavior === 'toggle' && (\n              // TODO: add transition?\n              <Checkbox\n                isEmphasized\n                UNSAFE_className={treeCheckbox()}\n                UNSAFE_style={{paddingInlineEnd: '0px'}}\n                slot=\"selection\" />\n            )}\n            <div style={{gridArea: 'level-padding', marginInlineEnd: `calc(${level - 1} * var(--spectrum-global-dimension-size-200))`}} />\n            {/* 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 */}\n            {(hasChildRows || hasChildItems) && <ExpandableRowChevron isDisabled={isDisabled} isExpanded={isExpanded} />}\n            <SlotProvider\n              slots={{\n                text: {UNSAFE_className: treeContent({isDisabled})},\n                // Note there is also an issue here where these icon props are making into the action menu's icon. Resolved by 8ab0ffb276ff437a65b365c9a3be0323a1b24656\n                // but could crop up later for other components\n                icon: {UNSAFE_className: treeIcon(), size: 'S'},\n                actionButton: {UNSAFE_className: treeActions(), isQuiet: true},\n                actionGroup: {\n                  UNSAFE_className: treeActions(),\n                  isQuiet: true,\n                  density: 'compact',\n                  buttonLabelBehavior: 'hide',\n                  isDisabled,\n                  overflowMode: 'collapse'\n                },\n                actionMenu: {UNSAFE_className: treeActionMenu(), UNSAFE_style: {marginInlineEnd: '.5rem'}, isQuiet: true}\n              }}>\n              {content}\n            </SlotProvider>\n            <div className={treeRowOutline({isFocusVisible, isSelected})} />\n          </div>\n        )}\n      </UNSTABLE_TreeItemContent>\n      {nestedRows}\n    </UNSTABLE_TreeItem>\n  );\n};\n\ninterface ExpandableRowChevronProps {\n  isExpanded?: boolean,\n  isDisabled?: boolean,\n  isRTL?: boolean\n}\n\nconst expandButton = style<ExpandableRowChevronProps>({\n  gridArea: 'expand-button',\n  height: 'full',\n  aspectRatio: 'square',\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignContent: 'center',\n  justifyContent: 'center',\n  outlineStyle: 'none',\n  transform: {\n    isExpanded: {\n      default: 'rotate(90deg)',\n      isRTL: 'rotate(-90deg)'\n    }\n  },\n  transition: '[transform ease var(--spectrum-global-animation-duration-100)]'\n});\n\nfunction ExpandableRowChevron(props: ExpandableRowChevronProps) {\n  let expandButtonRef = useRef<HTMLSpanElement>(null);\n  let [fullProps, ref] = useContextProps({...props, slot: 'chevron'}, expandButtonRef, ButtonContext);\n  let {isExpanded, isDisabled} = fullProps;\n  let {direction} = useLocale();\n\n  // Will need to keep the chevron as a button for iOS VO at all times since VO doesn't focus the cell. Also keep as button if cellAction is defined by the user in the future\n  let {buttonProps} = useButton({\n    ...fullProps,\n    elementType: 'span'\n  }, ref);\n\n  return (\n    <span\n      {...buttonProps}\n      ref={ref}\n      // Override tabindex so that grid keyboard nav skips over it. Needs -1 so android talkback can actually \"focus\" it\n      tabIndex={isAndroid() && !isDisabled ? -1 : undefined}\n      className={expandButton({isExpanded, isDisabled, isRTL: direction === 'rtl'})}>\n      {direction === 'ltr' ? <ChevronRightMedium /> : <ChevronLeftMedium />}\n    </span>\n  );\n}\n\n/**\n * A tree view provides users with a way to navigate nested hierarchical information.\n */\nconst _TreeView = React.forwardRef(TreeView) as <T>(props: SpectrumTreeViewProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\nexport {_TreeView as TreeView};\n"],"names":[],"version":3,"file":"TreeView.module.js.map"}

package/dist/types.d.ts

@@ -1,7 +1,7 @@
 import { AriaTreeGridListProps } from "@react-aria/tree";
 import { TreeItemProps } from "react-aria-components";
 import { DOMRef, Expandable, Key, SpectrumSelectionProps, StyleProps } from "@react-types/shared";
-import React, { ReactElement, ReactNode } from "react";
+import { JSX, ReactElement, ReactNode } from "react";
 export interface SpectrumTreeViewProps<T> extends Omit<AriaTreeGridListProps<T>, 'children'>, StyleProps, SpectrumSelectionProps, Expandable {
     /** Provides content to display when there are no items in the tree. */
     renderEmptyState?: () => JSX.Element;
@@ -15,13 +15,15 @@ export interface SpectrumTreeViewProps<T> extends Omit<AriaTreeGridListProps<T>,
      */
     children?: ReactNode | ((item: T) => ReactNode);
 }
-export interface SpectrumTreeViewItemProps extends Omit<TreeItemProps, 'className' | 'style' | 'value'> {
+export interface SpectrumTreeViewItemProps<T extends object = object> 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>;
 }
-export const TreeViewItem: (props: SpectrumTreeViewItemProps) => React.JSX.Element;
+export const TreeViewItem: <T extends object>(props: SpectrumTreeViewItemProps<T>) => JSX.Element;
 /**
  * A tree view provides users with a way to navigate nested hierarchical information.
  */

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":";;;;AA0BA,uCAAuC,CAAC,CAAE,SAAQ,IAAI,CAAC,sBAAsB,CAAC,CAAC,EAAE,UAAU,CAAC,EAAE,UAAU,EAAE,sBAAsB,EAAE,UAAU;IAC1I,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,MAAM,IAAI,OAAO,CAAC;IACrC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC,CAAA;CAChD;AAED,0CAA2C,SAAQ,IAAI,CAAC,aAAa,EAAE,WAAW,GAAG,OAAO,GAAG,OAAO,CAAC;IACrG,yDAAyD;IACzD,QAAQ,EAAE,SAAS,CAAC;IACpB,8DAA8D;IAC9D,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAiLD,OAAO,MAAM,sBAAuB,yBAAyB,sBAoF5D,CAAC;AAkDF;;GAEG;AACH,OAAA,MAAM;UAAuF,OAAO,cAAc,CAAC;MAAM,YAAY,CAAC","sources":["packages/@react-spectrum/tree/src/packages/@react-spectrum/tree/src/TreeView.tsx","packages/@react-spectrum/tree/src/packages/@react-spectrum/tree/src/index.ts","packages/@react-spectrum/tree/src/index.ts"],"sourcesContent":[null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport {TreeViewItem, TreeView} from './TreeView';\nexport type {SpectrumTreeViewProps, SpectrumTreeViewItemProps} from './TreeView';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":";;;;AA0BA,uCAAuC,CAAC,CAAE,SAAQ,IAAI,CAAC,sBAAsB,CAAC,CAAC,EAAE,UAAU,CAAC,EAAE,UAAU,EAAE,sBAAsB,EAAE,UAAU;IAC1I,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,MAAM,IAAI,OAAO,CAAC;IACrC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC,CAAA;CAChD;AAED,2CAA2C,CAAC,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,IAAI,CAAC,aAAa,EAAE,WAAW,GAAG,OAAO,GAAG,OAAO,GAAG,cAAc,GAAG,YAAY,GAAG,eAAe,CAAC;IAClL,yDAAyD;IACzD,QAAQ,EAAE,SAAS,CAAC;IACpB,8DAA8D;IAC9D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gGAAgG;IAChG,UAAU,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAA;CACzB;AAiLD,OAAO,MAAM,eAAgB,CAAC,SAAS,MAAM,SAAS,0BAA0B,CAAC,CAAC,gBAoFjF,CAAC;AAkDF;;GAEG;AACH,OAAA,MAAM,UAA0C,CAAC,CAAC,EAAE,KAAK,EAAE,sBAAsB,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,OAAO,cAAc,CAAC,CAAA;CAAC,KAAK,YAAY,CAAC","sources":["packages/@react-spectrum/tree/src/packages/@react-spectrum/tree/src/TreeView.tsx","packages/@react-spectrum/tree/src/packages/@react-spectrum/tree/src/index.ts","packages/@react-spectrum/tree/src/index.ts"],"sourcesContent":[null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport {TreeViewItem, TreeView} from './TreeView';\nexport type {SpectrumTreeViewProps, SpectrumTreeViewItemProps} from './TreeView';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/tree",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.3",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -36,22 +36,22 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/button": "^3.9.5",
-    "@react-aria/i18n": "^3.11.1",
-    "@react-aria/tree": "3.0.0-alpha.1",
-    "@react-aria/utils": "^3.24.1",
-    "@react-spectrum/checkbox": "^3.9.6",
-    "@react-spectrum/text": "^3.5.5",
-    "@react-spectrum/utils": "^3.11.7",
-    "@react-types/shared": "^3.23.1",
-    "@spectrum-icons/ui": "^3.6.7",
+    "@react-aria/button": "^3.9.7",
+    "@react-aria/i18n": "^3.12.1",
+    "@react-aria/tree": "3.0.0-alpha.3",
+    "@react-aria/utils": "^3.25.1",
+    "@react-spectrum/checkbox": "^3.9.8",
+    "@react-spectrum/text": "^3.5.7",
+    "@react-spectrum/utils": "^3.11.9",
+    "@react-types/shared": "^3.24.1",
+    "@spectrum-icons/ui": "^3.6.9",
     "@swc/helpers": "^0.5.0",
-    "react-aria-components": "^1.2.1"
+    "react-aria-components": "^1.3.1"
   },
   "peerDependencies": {
     "@react-spectrum/provider": "^3.0.0",
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
     "@adobe/spectrum-css-temp": "3.0.0-alpha.1",
@@ -60,5 +60,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b77d7d594dff4dcfb5359bffbcfd18142b146433"
+  "gitHead": "f0aa6aacee60af265dc8994b9274ccf072a850aa"
 }

package/src/TreeView.tsx

@@ -17,7 +17,7 @@ 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 {isAndroid} from '@react-aria/utils';
-import React, {createContext, isValidElement, ReactElement, ReactNode, useContext, useRef} from 'react';
+import React, {createContext, isValidElement, JSX, JSXElementConstructor, ReactElement, ReactNode, useContext, 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';
@@ -38,15 +38,17 @@ export interface SpectrumTreeViewProps<T> extends Omit<AriaTreeGridListProps<T>,
   children?: ReactNode | ((item: T) => ReactNode)
 }
 
-export interface SpectrumTreeViewItemProps extends Omit<TreeItemProps, 'className' | 'style' | 'value'> {
+export interface SpectrumTreeViewItemProps<T extends object = object> 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
+  hasChildItems?: boolean,
+  /** A list of child tree item objects used when dynamically rendering the tree item children. */
+  childItems?: Iterable<T>
 }
 
 interface TreeRendererContextValue {
-  renderer?: (item) => React.ReactElement<any, string | React.JSXElementConstructor<any>>
+  renderer?: (item) => ReactElement<any, string | JSXElementConstructor<any>>
 }
 const TreeRendererContext = createContext<TreeRendererContextValue>({});
 
@@ -220,7 +222,7 @@ const treeRowOutline = style({
   }
 });
 
-export const TreeViewItem = (props: SpectrumTreeViewItemProps) => {
+export const TreeViewItem = <T extends object>(props: SpectrumTreeViewItemProps<T>) => {
   let {
     children,
     childItems,
@@ -331,7 +333,7 @@ const expandButton = style<ExpandableRowChevronProps>({
 });
 
 function ExpandableRowChevron(props: ExpandableRowChevronProps) {
-  let expandButtonRef = useRef();
+  let expandButtonRef = useRef<HTMLSpanElement>(null);
   let [fullProps, ref] = useContextProps({...props, slot: 'chevron'}, expandButtonRef, ButtonContext);
   let {isExpanded, isDisabled} = fullProps;
   let {direction} = useLocale();