@react-spectrum/s2 1.4.0 → 1.5.1

package/dist/private/TreeView.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/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 {ActionButtonGroupContext} from './ActionButtonGroup';\nimport {ActionMenuContext} from './ActionMenu';\nimport {\n  baseColor,\n  color,\n  colorMix,\n  focusRing,\n  fontRelative,\n  style\n} from '../style' with {type: 'macro'};\nimport {Button, ButtonContext} from 'react-aria-components/Button';\nimport {centerBaseline} from './CenterBaseline';\nimport {Checkbox} from './Checkbox';\nimport Chevron from '../ui-icons/Chevron';\nimport {css} from '../style/style-macro' with {type: 'macro'};\nimport {\n  DOMRef,\n  forwardRefType,\n  GlobalDOMAttributes,\n  ItemDropTarget,\n  Key,\n  LoadingState\n} from '@react-types/shared';\nimport {DragHandleButton, InsertionIndicator} from './dnd-utils';\nimport {DragPreview} from './DragPreview';\nimport {\n  getAllowedOverrides,\n  StylesPropWithHeight,\n  UnsafeStyles\n} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {ProgressCircle} from './ProgressCircle';\nimport {Provider, useContextProps} from 'react-aria-components/slots';\nimport {\n  TreeItemProps as RACTreeItemProps,\n  TreeProps as RACTreeProps,\n  Tree,\n  TreeItem,\n  TreeItemContent,\n  TreeItemContentProps,\n  TreeItemRenderProps,\n  TreeLoadMoreItem,\n  TreeLoadMoreItemProps,\n  TreeRenderProps\n} from 'react-aria-components/Tree';\nimport React, {\n  createContext,\n  forwardRef,\n  JSXElementConstructor,\n  ReactElement,\n  ReactNode,\n  useContext,\n  useRef\n} from 'react';\nimport {S2ListLayout} from './ListView';\nimport {Text, TextContext} from './Content';\nimport {TreeState} from 'react-stately/useTreeState';\nimport {useActionBarContainer} from './ActionBar';\nimport {useDOMRef} from './useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useScale} from './utils';\nimport {Virtualizer} from 'react-aria-components/Virtualizer';\n\ninterface S2TreeProps {\n  /** Handler that is called when a user performs an action on a row. */\n  onAction?: (key: Key) => void;\n  /** Provides the ActionBar to display when items are selected in the TreeView. */\n  renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement;\n}\n\ninterface TreeViewStyleProps {\n  /**\n   * How selection should be displayed. For guidance on when to use which option, refer to the\n   * [Spectrum](https://spectrum.adobe.com/page/tree-view/#Checkbox-or-highlight-selection-style)\n   * page.\n   *\n   * @default 'checkbox'\n   */\n  selectionStyle?: 'highlight' | 'checkbox';\n}\n\nexport interface TreeViewProps<T>\n  extends\n    Omit<\n      RACTreeProps<T>,\n      | 'style'\n      | 'className'\n      | 'render'\n      | 'onRowAction'\n      | 'selectionBehavior'\n      | 'onScroll'\n      | 'onCellAction'\n      | keyof GlobalDOMAttributes\n    >,\n    UnsafeStyles,\n    S2TreeProps,\n    TreeViewStyleProps {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight;\n}\n\nexport interface TreeViewItemProps extends Omit<\n  RACTreeItemProps,\n  'className' | 'style' | 'render' | 'onClick' | keyof GlobalDOMAttributes\n> {\n  /** Whether this item has children, even if not loaded yet. */\n  hasChildItems?: boolean;\n}\n\nexport interface TreeViewLoadMoreItemProps extends Pick<TreeLoadMoreItemProps, 'onLoadMore'> {\n  /** The current loading state of the TreeView or TreeView row. */\n  loadingState?: LoadingState;\n}\n\ninterface TreeRendererContextValue {\n  renderer?: (item) => ReactElement<any, string | JSXElementConstructor<any>>;\n}\nconst TreeRendererContext = createContext<TreeRendererContextValue>({});\n\nconst treeViewWrapper = style(\n  {\n    minHeight: 0,\n    height: 'full',\n    minWidth: 160,\n    display: 'flex',\n    isolation: 'isolate',\n    disableTapHighlight: true,\n    position: 'relative',\n    overflow: 'clip',\n    '--indicator-level-padding': {\n      type: 'width',\n      value: {\n        // 4 (start gap) + 10 (drag handle) + (hasCheckbox ? 16 + 8 : 0) + 40 (expand button)\n        // keep in sync with treeCellGrid gridTemplateColumns\n        default: 54,\n        hasCheckbox: 78\n      }\n    },\n    '--root-drop-radius': {\n      type: 'borderTopStartRadius',\n      value: 'sm'\n    }\n  },\n  getAllowedOverrides({height: true})\n);\n\n// TODO: can't use border cuz it means the contents of the tree are no longer\n// flush with its container. Outline and box shadow are affected by the outlineOffset we\n// have in the tree styles and result in the rows clipping the drop outline. This approach\n// avoids that\nconst rootDropOutline = css(`\n  &:has([role=\"treegrid\"][data-drop-target])::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    border: 2px solid ${color('blue-800')};\n    border-radius: var(--root-drop-radius);\n    z-index: 2;\n  }\n  @media (forced-colors: active) {\n    &:has([role=\"treegrid\"][data-drop-target])::after {\n      border-color: Highlight;\n    }\n  }\n`);\n\n// These are the same as ListView. we didn't have v3 tree dnd and dont have designs so to be adjusted later\nconst dropTargetBackground = colorMix('gray-25', 'blue-900', 10);\nconst rootDropSelectedRowBackground = colorMix('gray-25', 'blue-900', 28);\nconst rowDropBackground = colorMix('gray-25', 'blue-900', 10);\nconst rootRowDropStyles = {\n  default: dropTargetBackground,\n  isSelected: rootDropSelectedRowBackground,\n  forcedColors: 'Background'\n} as const;\nconst rowDropStyles = {\n  default: rowDropBackground,\n  isSelected: rowDropBackground,\n  forcedColors: 'Background'\n} as const;\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<TreeRenderProps>({\n  ...focusRing(),\n  outlineOffset: -2, // make certain we are visible inside overflow hidden containers\n  userSelect: 'none',\n  minHeight: 0,\n  minWidth: 0,\n  width: 'full',\n  height: 'full',\n  overflow: 'auto',\n  boxSizing: 'border-box',\n  backgroundColor: {\n    isDropTarget: {\n      default: dropTargetBackground,\n      forcedColors: 'Background'\n    }\n  },\n  justifyContent: {\n    isEmpty: 'center'\n  },\n  alignItems: {\n    isEmpty: 'center'\n  },\n  '--indent': {\n    type: 'width',\n    value: 16\n  }\n});\n\nlet InternalTreeViewContext = createContext<{selectionStyle?: 'highlight' | 'checkbox'}>({});\n\n/**\n * A tree view provides users with a way to navigate nested hierarchical information.\n */\nexport const TreeView = /*#__PURE__*/ (forwardRef as forwardRefType)(function TreeView<T>(\n  props: TreeViewProps<T>,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let {\n    children,\n    selectionStyle = 'checkbox',\n    UNSAFE_className,\n    UNSAFE_style,\n    dragAndDropHooks\n  } = props;\n  let scale = useScale();\n\n  if (dragAndDropHooks && dragAndDropHooks.renderDragPreview == null) {\n    dragAndDropHooks.renderDragPreview = items => <DragPreview items={items} />;\n  }\n\n  let hasCheckbox = props.selectionMode !== 'none' && selectionStyle !== 'highlight';\n\n  if (dragAndDropHooks) {\n    dragAndDropHooks.renderDropIndicator = target => (\n      <InsertionIndicator target={target as ItemDropTarget} />\n    );\n  }\n  let renderer;\n  if (typeof children === 'function') {\n    renderer = children;\n  }\n\n  let domRef = useDOMRef(ref);\n  let scrollRef = useRef<HTMLDivElement | null>(null);\n\n  let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({\n    ...props,\n    scrollRef\n  });\n\n  return (\n    <div\n      ref={domRef}\n      className={\n        (UNSAFE_className ?? '') +\n        treeViewWrapper({hasCheckbox}, props.styles) +\n        ' ' +\n        rootDropOutline\n      }\n      style={UNSAFE_style}>\n      <Virtualizer\n        layout={S2ListLayout}\n        layoutOptions={{\n          rowHeight: scale === 'large' ? 50 : 40,\n          dropIndicatorThickness: 0\n        }}>\n        <TreeRendererContext.Provider value={{renderer}}>\n          <InternalTreeViewContext.Provider value={{selectionStyle}}>\n            <Tree\n              {...props}\n              dragAndDropHooks={dragAndDropHooks}\n              style={{\n                paddingBottom: actionBarHeight > 0 ? actionBarHeight + 8 : 0,\n                scrollPaddingBottom: actionBarHeight > 0 ? actionBarHeight + 8 : 0\n              }}\n              className={renderProps => tree(renderProps)}\n              selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}\n              selectedKeys={selectedKeys}\n              defaultSelectedKeys={undefined}\n              onSelectionChange={onSelectionChange}\n              ref={scrollRef}>\n              {props.children}\n            </Tree>\n          </InternalTreeViewContext.Provider>\n        </TreeRendererContext.Provider>\n      </Virtualizer>\n      {actionBar}\n    </div>\n  );\n});\n\nconst rowBackgroundColor = {\n  default: '--s2-container-bg',\n  isFocusVisibleWithin: colorMix('gray-25', 'gray-900', 7),\n  isHovered: colorMix('gray-25', 'gray-900', 7),\n  isPressed: colorMix('gray-25', 'gray-900', 7),\n  isSelected: {\n    default: colorMix('gray-25', 'gray-900', 7),\n    isFocusVisibleWithin: colorMix('gray-25', 'gray-900', 10),\n    isHovered: colorMix('gray-25', 'gray-900', 10),\n    isPressed: colorMix('gray-25', 'gray-900', 10)\n  },\n  forcedColors: {\n    default: 'Background'\n  }\n} as const;\n\nconst treeRow = style<TreeItemRenderProps & {isLink?: boolean; isPreviousSelected?: boolean}>({\n  outlineStyle: {\n    default: 'none',\n    isDropTarget: 'solid'\n  },\n  outlineWidth: {\n    isDropTarget: 2\n  },\n  outlineOffset: {\n    isDropTarget: -2\n  },\n  outlineColor: {\n    isDropTarget: 'blue-800',\n    forcedColors: {\n      isDropTarget: 'Highlight'\n    }\n  },\n  position: 'relative',\n  display: 'flex',\n  height: 40,\n  width: 'full',\n  boxSizing: 'border-box',\n  font: 'ui',\n  color: {\n    default: baseColor('neutral-subdued'),\n    isSelected: baseColor('neutral'),\n    forcedColors: 'ButtonText'\n  },\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  '--rowBackgroundColor': {\n    type: 'backgroundColor',\n    value: rowBackgroundColor\n  },\n  '--borderRadiusTreeItem': {\n    type: 'borderTopStartRadius',\n    value: 'sm'\n  },\n  borderRadius: 'sm'\n});\n\nconst treeCellGrid = style({\n  display: 'grid',\n  width: 'full',\n  height: 'full',\n  boxSizing: 'border-box',\n  borderRadius: 'sm',\n  alignContent: 'center',\n  alignItems: 'center',\n  // TODO: will have to update these to match design\n  gridTemplateColumns: [\n    4,\n    'auto',\n    'auto',\n    'auto',\n    'auto',\n    'auto',\n    '1fr',\n    'minmax(0, auto)',\n    'auto'\n  ],\n  gridTemplateRows: '1fr',\n  gridTemplateAreas: [\n    '. drag-handle checkbox level-padding expand-button icon content actions actionmenu'\n  ],\n  paddingEnd: 4, // account for any focus rings on the last item in the cell\n  color: {\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    },\n    forcedColors: 'ButtonText',\n    selectionStyle: {\n      highlight: {\n        isSelected: {\n          forcedColors: 'HighlightText'\n        }\n      }\n    }\n  },\n  '--rowSelectedBorderColor': {\n    type: 'outlineColor',\n    value: {\n      default: 'gray-800',\n      isFocusVisible: 'focus-ring',\n      forcedColors: 'Highlight'\n    }\n  },\n  '--rowForcedFocusBorderColor': {\n    type: 'outlineColor',\n    value: {\n      default: 'focus-ring',\n      forcedColors: 'Highlight'\n    }\n  },\n  '--borderColor': {\n    type: 'borderColor',\n    value: {\n      default: 'transparent',\n      selectionStyle: {\n        highlight: 'blue-900'\n      },\n      forcedColors: 'ButtonBorder'\n    }\n  },\n  forcedColorAdjust: 'none'\n});\n\nconst treeRowBackground = style({\n  position: 'absolute',\n  zIndex: -1,\n  inset: 0,\n  backgroundColor: {\n    default: '--rowBackgroundColor',\n    forcedColors: 'Background',\n    selectionStyle: {\n      highlight: {\n        default: '--rowBackgroundColor',\n        isSelected: {\n          default: colorMix('gray-25', 'blue-900', 10),\n          isHovered: colorMix('gray-25', 'blue-900', 15),\n          isPressed: colorMix('gray-25', 'blue-900', 15),\n          isFocusVisible: colorMix('gray-25', 'blue-900', 15),\n          forcedColors: 'Highlight'\n        }\n      }\n    },\n    ':is([role=\"treegrid\"][data-drop-target] *)': rootRowDropStyles,\n    isDropTarget: rowDropStyles\n  },\n  borderTopStartRadius: {\n    default: '--borderRadiusTreeItem',\n    isPreviousSelected: {\n      default: '--borderRadiusTreeItem',\n      isSelected: 'none'\n    }\n  },\n  borderTopEndRadius: {\n    default: '--borderRadiusTreeItem',\n    isPreviousSelected: {\n      default: '--borderRadiusTreeItem',\n      isSelected: 'none'\n    }\n  },\n  borderBottomStartRadius: {\n    default: '--borderRadiusTreeItem',\n    isNextSelected: {\n      default: '--borderRadiusTreeItem',\n      isSelected: 'none'\n    }\n  },\n  borderBottomEndRadius: {\n    default: '--borderRadiusTreeItem',\n    isNextSelected: {\n      default: '--borderRadiusTreeItem',\n      isSelected: 'none'\n    }\n  },\n  borderTopWidth: {\n    default: 1,\n    isPreviousSelected: 0\n  },\n  borderBottomWidth: {\n    default: 1,\n    isNextSelected: 0\n  },\n  borderStartWidth: 1,\n  borderEndWidth: 1,\n  borderStyle: 'solid',\n  borderColor: {\n    default: 'transparent',\n    isSelected: '--borderColor'\n  }\n});\n\nconst treeCheckbox = style({\n  gridArea: 'checkbox',\n  marginStart: 8,\n  marginEnd: 0,\n  paddingEnd: 0,\n  visibility: {\n    default: 'visible',\n    isDisabled: 'hidden'\n  }\n});\n\nconst treeIcon = style({\n  gridArea: 'icon',\n  marginEnd: 'text-to-visual',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nconst treeContent = style({\n  gridArea: 'content',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden'\n});\n\nconst treeActions = style({\n  gridArea: 'actions',\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: 2,\n  marginEnd: 4\n});\n\nconst treeActionMenu = style({\n  gridArea: 'actionmenu'\n});\n\nconst treeDragButtonContainer = style({\n  gridArea: 'drag-handle',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 10\n});\n\nlet treeRowFocusRing = style({\n  ...focusRing(),\n  outlineOffset: {\n    default: -2,\n    forcedColors: -3\n  },\n  outlineWidth: {\n    default: 2,\n    forcedColors: '[3px]'\n  },\n  outlineColor: {\n    default: 'focus-ring',\n    forcedColors: 'Highlight',\n    selectionStyle: {\n      highlight: {\n        default: 'focus-ring',\n        forcedColors: 'ButtonBorder'\n      }\n    }\n  },\n  position: 'absolute',\n  inset: 0,\n  top: {\n    default: '[-1px]',\n    isFirstItem: 0\n  },\n  bottom: {\n    selectionStyle: {\n      checkbox: 0,\n      highlight: {\n        default: 0,\n        isNextSelected: '[-1px]',\n        isSelected: {\n          default: 0,\n          isNextSelected: 0\n        }\n      }\n    }\n  },\n  borderRadius: 'sm',\n  zIndex: 1,\n  pointerEvents: 'none'\n});\n\nexport const TreeViewItem = (props: TreeViewItemProps): ReactNode => {\n  let {href} = props;\n\n  return (\n    <TreeItem\n      {...props}\n      className={renderProps =>\n        treeRow({\n          ...renderProps,\n          isLink: !!href\n        })\n      }\n    />\n  );\n};\n\nexport interface TreeViewItemContentProps extends Omit<TreeItemContentProps, 'children'> {\n  /** Rendered contents of the tree item or child items. */\n  children: ReactNode;\n}\n\nexport const TreeViewItemContent = (props: TreeViewItemContentProps): ReactNode => {\n  let {children} = props;\n  let scale = useScale();\n\n  let {selectionStyle} = useContext(InternalTreeViewContext);\n\n  return (\n    <TreeItemContent>\n      {({\n        isExpanded,\n        hasChildItems,\n        selectionMode,\n        selectionBehavior,\n        isDisabled,\n        isSelected,\n        id,\n        state,\n        isHovered,\n        isFocusVisible,\n        isFocusVisibleWithin,\n        allowsDragging,\n        isDropTarget\n      }) => {\n        return (\n          <div\n            className={treeCellGrid({\n              isDisabled,\n              isNextSelected: isNextSelected(id, state),\n              isSelected,\n              selectionStyle\n            })}>\n            <div\n              className={treeRowBackground({\n                isHovered,\n                isFocusVisible,\n                isSelected,\n                selectionStyle,\n                isNextSelected: isNextSelected(id, state),\n                isPreviousSelected: isPrevSelected(id, state),\n                isDropTarget\n              })}\n            />\n            {isFocusVisible && (\n              <div\n                className={treeRowFocusRing({\n                  isFocusVisible,\n                  selectionStyle,\n                  isSelected,\n                  isNextSelected: isNextSelected(id, state),\n                  isFirstItem: isFirstItem(id, state)\n                })}\n              />\n            )}\n            {allowsDragging && (\n              <div className={treeDragButtonContainer}>\n                {!isDisabled && <DragHandleButton isFocusVisibleWithin={isFocusVisibleWithin} />}\n              </div>\n            )}\n            {selectionMode !== 'none' &&\n              selectionBehavior === 'toggle' &&\n              selectionStyle !== 'highlight' && (\n                // TODO: add transition?\n                <div\n                  className={treeCheckbox({\n                    isDisabled:\n                      isDisabled ||\n                      !state.selectionManager.canSelectItem(id) ||\n                      state.disabledKeys.has(id)\n                  })}>\n                  <Checkbox slot=\"selection\" />\n                </div>\n              )}\n            <div\n              className={style({\n                gridArea: 'level-padding',\n                width: 'calc(calc(var(--tree-item-level, 0) - 1) * var(--indent))'\n              })}\n            />\n            <ExpandableRowChevron\n              isDisabled={isDisabled}\n              isExpanded={isExpanded}\n              scale={scale}\n              isHidden={!hasChildItems}\n            />\n            <Provider\n              values={[\n                [TextContext, {styles: treeContent}],\n                [\n                  IconContext,\n                  {\n                    render: centerBaseline({slot: 'icon', styles: treeIcon}),\n                    styles: style({size: fontRelative(20), flexShrink: 0})\n                  }\n                ],\n                [ActionButtonGroupContext, {styles: treeActions, isDisabled}],\n                [ActionMenuContext, {styles: treeActionMenu, isQuiet: true, isDisabled}]\n              ]}>\n              {typeof children === 'string' ? <Text>{children}</Text> : children}\n            </Provider>\n          </div>\n        );\n      }}\n    </TreeItemContent>\n  );\n};\n\nconst centeredWrapper = style({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 'full',\n  height: 'full'\n});\n\nexport const TreeViewLoadMoreItem = (props: TreeViewLoadMoreItemProps): ReactNode => {\n  let {loadingState, onLoadMore} = props;\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';\n  return (\n    <TreeLoadMoreItem\n      isLoading={isLoading}\n      onLoadMore={onLoadMore}\n      className={style({width: 'full', marginY: 4})}>\n      {() => {\n        return (\n          <div className={centeredWrapper}>\n            <ProgressCircle\n              isIndeterminate\n              aria-label={stringFormatter.format('table.loadingMore')}\n            />\n          </div>\n        );\n      }}\n    </TreeLoadMoreItem>\n  );\n};\n\ninterface ExpandableRowChevronProps {\n  isExpanded?: boolean;\n  isDisabled?: boolean;\n  isRTL?: boolean;\n  scale: 'medium' | 'large';\n  isHidden?: boolean;\n}\n\nconst expandButton = style<ExpandableRowChevronProps>({\n  gridArea: 'expand-button',\n  color: {\n    default: 'inherit',\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  height: 40,\n  width: 40,\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignContent: 'center',\n  justifyContent: 'center',\n  outlineStyle: 'none',\n  cursor: 'default',\n  transform: {\n    isExpanded: {\n      default: 'rotate(90deg)',\n      isRTL: 'rotate(-90deg)'\n    }\n  },\n  padding: 0,\n  transition: 'default',\n  backgroundColor: 'transparent',\n  borderStyle: 'none',\n  disableTapHighlight: true,\n  visibility: {\n    isHidden: 'hidden'\n  }\n});\n\nfunction ExpandableRowChevron(props: ExpandableRowChevronProps) {\n  let expandButtonRef = useRef<HTMLButtonElement>(null);\n  let [fullProps, ref] = useContextProps(\n    {...props, slot: 'chevron'},\n    expandButtonRef,\n    ButtonContext\n  );\n  let {isExpanded, scale, isHidden} = fullProps;\n  let {direction} = useLocale();\n\n  return (\n    <Button\n      {...props}\n      ref={ref}\n      slot=\"chevron\"\n      className={renderProps =>\n        expandButton({...renderProps, isExpanded, isRTL: direction === 'rtl', scale, isHidden})\n      }>\n      <Chevron\n        className={style({\n          scale: {\n            direction: {\n              ltr: '1',\n              rtl: '-1'\n            }\n          },\n          '--iconPrimary': {\n            type: 'fill',\n            value: 'currentColor'\n          }\n        })({direction})}\n      />\n    </Button>\n  );\n}\n\nfunction isNextSelected(id: Key | undefined, state: TreeState<unknown>) {\n  if (id == null || !state) {\n    return false;\n  }\n  let keyAfter = state.collection.getKeyAfter(id);\n\n  // We need to skip non-item nodes because the selection manager will map non-item nodes to their parent before checking selection\n  let node = keyAfter != null ? state.collection.getItem(keyAfter) : null;\n  while (node && node.type !== 'item' && keyAfter != null) {\n    keyAfter = state.collection.getKeyAfter(keyAfter);\n    node = keyAfter != null ? state.collection.getItem(keyAfter) : null;\n  }\n\n  return keyAfter != null && state.selectionManager.isSelected(keyAfter);\n}\n\nfunction isPrevSelected(id: Key | undefined, state: TreeState<unknown>) {\n  if (id == null || !state) {\n    return false;\n  }\n  let keyBefore = state.collection.getKeyBefore(id);\n  return keyBefore != null && state.selectionManager.isSelected(keyBefore);\n}\n\nfunction isFirstItem(id: Key | undefined, state: TreeState<unknown>) {\n  if (id == null || !state) {\n    return false;\n  }\n  return state.collection.getFirstKey() === id;\n}\n"],"names":[],"version":3,"file":"TreeView.mjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/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 {ActionButtonGroupContext} from './ActionButtonGroup';\nimport {ActionMenuContext} from './ActionMenu';\nimport {\n  baseColor,\n  color,\n  colorMix,\n  focusRing,\n  fontRelative,\n  style\n} from '../style' with {type: 'macro'};\nimport {Button, ButtonContext} from 'react-aria-components/Button';\nimport {centerBaseline} from './CenterBaseline';\nimport {Checkbox} from './Checkbox';\nimport Chevron from '../ui-icons/Chevron';\nimport {css} from '../style/style-macro' with {type: 'macro'};\nimport {\n  DOMRef,\n  forwardRefType,\n  GlobalDOMAttributes,\n  ItemDropTarget,\n  Key,\n  LoadingState\n} from '@react-types/shared';\nimport {DragHandleButton, InsertionIndicator} from './dnd-utils';\nimport {DragPreview} from './DragPreview';\nimport {\n  getAllowedOverrides,\n  StylesPropWithHeight,\n  UnsafeStyles\n} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport intlMessages from '../intl/*.json';\nimport {ProgressCircle} from './ProgressCircle';\nimport {Provider, useContextProps} from 'react-aria-components/slots';\nimport {\n  TreeItemProps as RACTreeItemProps,\n  TreeProps as RACTreeProps,\n  Tree,\n  TreeItem,\n  TreeItemContent,\n  TreeItemContentProps,\n  TreeItemRenderProps,\n  TreeLoadMoreItem,\n  TreeLoadMoreItemProps,\n  TreeRenderProps\n} from 'react-aria-components/Tree';\nimport React, {\n  createContext,\n  forwardRef,\n  JSXElementConstructor,\n  ReactElement,\n  ReactNode,\n  useContext,\n  useRef\n} from 'react';\nimport {S2ListLayout} from './ListView';\nimport {Text, TextContext} from './Content';\nimport {TreeState} from 'react-stately/useTreeState';\nimport {useActionBarContainer} from './ActionBar';\nimport {useDOMRef} from './useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useScale} from './utils';\nimport {Virtualizer} from 'react-aria-components/Virtualizer';\n\ninterface S2TreeProps {\n  /** Handler that is called when a user performs an action on a row. */\n  onAction?: (key: Key) => void;\n  /** Provides the ActionBar to display when items are selected in the TreeView. */\n  renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement;\n}\n\ninterface TreeViewStyleProps {\n  /**\n   * How selection should be displayed. For guidance on when to use which option, refer to the\n   * [Spectrum](https://spectrum.adobe.com/page/tree-view/#Checkbox-or-highlight-selection-style)\n   * page.\n   *\n   * @default 'checkbox'\n   */\n  selectionStyle?: 'highlight' | 'checkbox';\n}\n\nexport interface TreeViewProps<T>\n  extends\n    Omit<\n      RACTreeProps<T>,\n      | 'style'\n      | 'className'\n      | 'render'\n      | 'onRowAction'\n      | 'selectionBehavior'\n      | 'onScroll'\n      | 'onCellAction'\n      | keyof GlobalDOMAttributes\n    >,\n    UnsafeStyles,\n    S2TreeProps,\n    TreeViewStyleProps {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight;\n}\n\nexport interface TreeViewItemProps extends Omit<\n  RACTreeItemProps,\n  'className' | 'style' | 'render' | 'onClick' | keyof GlobalDOMAttributes\n> {\n  /** Whether this item has children, even if not loaded yet. */\n  hasChildItems?: boolean;\n}\n\nexport interface TreeViewLoadMoreItemProps extends Pick<TreeLoadMoreItemProps, 'onLoadMore'> {\n  /** The current loading state of the TreeView or TreeView row. */\n  loadingState?: LoadingState;\n}\n\ninterface TreeRendererContextValue {\n  renderer?: (item) => ReactElement<any, string | JSXElementConstructor<any>>;\n}\nconst TreeRendererContext = createContext<TreeRendererContextValue>({});\n\nconst treeViewWrapper = style(\n  {\n    minHeight: 0,\n    height: 'full',\n    minWidth: 160,\n    display: 'flex',\n    isolation: 'isolate',\n    disableTapHighlight: true,\n    position: 'relative',\n    overflow: 'clip',\n    '--indicator-level-padding': {\n      type: 'width',\n      value: {\n        // 4 (start gap) + 10 (drag handle) + (hasCheckbox ? 16 + 8 : 0) + 40 (expand button)\n        // keep in sync with treeCellGrid gridTemplateColumns\n        default: 54,\n        hasCheckbox: 78\n      }\n    },\n    '--root-drop-radius': {\n      type: 'borderTopStartRadius',\n      value: 'sm'\n    }\n  },\n  getAllowedOverrides({height: true})\n);\n\n// TODO: can't use border cuz it means the contents of the tree are no longer\n// flush with its container. Outline and box shadow are affected by the outlineOffset we\n// have in the tree styles and result in the rows clipping the drop outline. This approach\n// avoids that\nconst rootDropOutline = css(`\n  &:has([role=\"treegrid\"][data-drop-target])::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    border: 2px solid ${color('blue-800')};\n    border-radius: var(--root-drop-radius);\n    z-index: 2;\n  }\n  @media (forced-colors: active) {\n    &:has([role=\"treegrid\"][data-drop-target])::after {\n      border-color: Highlight;\n    }\n  }\n`);\n\n// These are the same as ListView. we didn't have v3 tree dnd and dont have designs so to be adjusted later\nconst dropTargetBackground = colorMix('gray-25', 'blue-900', 10);\nconst rootDropSelectedRowBackground = colorMix('gray-25', 'blue-900', 28);\nconst rowDropBackground = colorMix('gray-25', 'blue-900', 10);\nconst rootRowDropStyles = {\n  default: dropTargetBackground,\n  isSelected: rootDropSelectedRowBackground,\n  forcedColors: 'Background'\n} as const;\nconst rowDropStyles = {\n  default: rowDropBackground,\n  isSelected: rowDropBackground,\n  forcedColors: 'Background'\n} as const;\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<TreeRenderProps>({\n  ...focusRing(),\n  outlineOffset: -2, // make certain we are visible inside overflow hidden containers\n  userSelect: 'none',\n  minHeight: 0,\n  minWidth: 0,\n  width: 'full',\n  height: 'full',\n  overflow: 'auto',\n  boxSizing: 'border-box',\n  backgroundColor: {\n    isDropTarget: {\n      default: dropTargetBackground,\n      forcedColors: 'Background'\n    }\n  },\n  justifyContent: {\n    isEmpty: 'center'\n  },\n  alignItems: {\n    isEmpty: 'center'\n  },\n  '--indent': {\n    type: 'width',\n    value: 16\n  }\n});\n\nlet InternalTreeViewContext = createContext<{selectionStyle?: 'highlight' | 'checkbox'}>({});\n\n/**\n * A tree view provides users with a way to navigate nested hierarchical information.\n */\nexport const TreeView = /*#__PURE__*/ (forwardRef as forwardRefType)(function TreeView<T>(\n  props: TreeViewProps<T>,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let {\n    children,\n    selectionStyle = 'checkbox',\n    UNSAFE_className,\n    UNSAFE_style,\n    dragAndDropHooks\n  } = props;\n  let scale = useScale();\n\n  if (dragAndDropHooks && dragAndDropHooks.renderDragPreview == null) {\n    dragAndDropHooks.renderDragPreview = items => <DragPreview items={items} />;\n  }\n\n  let hasCheckbox = props.selectionMode !== 'none' && selectionStyle !== 'highlight';\n\n  if (dragAndDropHooks) {\n    dragAndDropHooks.renderDropIndicator = target => (\n      <InsertionIndicator target={target as ItemDropTarget} />\n    );\n  }\n  let renderer;\n  if (typeof children === 'function') {\n    renderer = children;\n  }\n\n  let domRef = useDOMRef(ref);\n  let scrollRef = useRef<HTMLDivElement | null>(null);\n\n  let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({\n    ...props,\n    scrollRef\n  });\n\n  return (\n    <div\n      ref={domRef}\n      className={\n        (UNSAFE_className ?? '') +\n        treeViewWrapper({hasCheckbox}, props.styles) +\n        ' ' +\n        rootDropOutline\n      }\n      style={UNSAFE_style}>\n      <Virtualizer\n        layout={S2ListLayout}\n        layoutOptions={{\n          rowHeight: scale === 'large' ? 50 : 40,\n          dropIndicatorThickness: 0\n        }}>\n        <TreeRendererContext.Provider value={{renderer}}>\n          <InternalTreeViewContext.Provider value={{selectionStyle}}>\n            <Tree\n              {...props}\n              dragAndDropHooks={dragAndDropHooks}\n              style={{\n                paddingBottom: actionBarHeight > 0 ? actionBarHeight + 8 : 0,\n                scrollPaddingBottom: actionBarHeight > 0 ? actionBarHeight + 8 : 0\n              }}\n              className={renderProps => tree(renderProps)}\n              selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}\n              selectedKeys={selectedKeys}\n              defaultSelectedKeys={undefined}\n              onSelectionChange={onSelectionChange}\n              ref={scrollRef}>\n              {props.children}\n            </Tree>\n          </InternalTreeViewContext.Provider>\n        </TreeRendererContext.Provider>\n      </Virtualizer>\n      {actionBar}\n    </div>\n  );\n});\n\nconst rowBackgroundColor = {\n  default: '--s2-container-bg',\n  isFocusVisibleWithin: colorMix('gray-25', 'gray-900', 7),\n  isHovered: colorMix('gray-25', 'gray-900', 7),\n  isPressed: colorMix('gray-25', 'gray-900', 7),\n  isSelected: {\n    default: colorMix('gray-25', 'gray-900', 7),\n    isFocusVisibleWithin: colorMix('gray-25', 'gray-900', 10),\n    isHovered: colorMix('gray-25', 'gray-900', 10),\n    isPressed: colorMix('gray-25', 'gray-900', 10)\n  },\n  forcedColors: {\n    default: 'Background'\n  }\n} as const;\n\nconst treeRow = style<TreeItemRenderProps & {isLink?: boolean; isPreviousSelected?: boolean}>({\n  outlineStyle: {\n    default: 'none',\n    isDropTarget: 'solid'\n  },\n  outlineWidth: {\n    isDropTarget: 2\n  },\n  outlineOffset: {\n    isDropTarget: -2\n  },\n  outlineColor: {\n    isDropTarget: 'blue-800',\n    forcedColors: {\n      isDropTarget: 'Highlight'\n    }\n  },\n  position: 'relative',\n  display: 'flex',\n  height: 40,\n  width: 'full',\n  boxSizing: 'border-box',\n  font: 'ui',\n  color: {\n    default: baseColor('neutral-subdued'),\n    isSelected: baseColor('neutral'),\n    forcedColors: 'ButtonText'\n  },\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  '--rowBackgroundColor': {\n    type: 'backgroundColor',\n    value: rowBackgroundColor\n  },\n  '--borderRadiusTreeItem': {\n    type: 'borderTopStartRadius',\n    value: 'sm'\n  },\n  borderRadius: 'sm'\n});\n\nconst treeCellGrid = style({\n  display: 'grid',\n  width: 'full',\n  height: 'full',\n  boxSizing: 'border-box',\n  borderRadius: 'sm',\n  alignContent: 'center',\n  alignItems: 'center',\n  // TODO: will have to update these to match design\n  gridTemplateColumns: [\n    4,\n    'auto',\n    'auto',\n    'auto',\n    'auto',\n    'auto',\n    '1fr',\n    'minmax(0, auto)',\n    'auto'\n  ],\n  gridTemplateRows: '1fr',\n  gridTemplateAreas: [\n    '. drag-handle checkbox level-padding expand-button icon content actions actionmenu'\n  ],\n  paddingEnd: 4, // account for any focus rings on the last item in the cell\n  color: {\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    },\n    forcedColors: 'ButtonText',\n    selectionStyle: {\n      highlight: {\n        isSelected: {\n          forcedColors: 'HighlightText'\n        }\n      }\n    }\n  },\n  '--rowSelectedBorderColor': {\n    type: 'outlineColor',\n    value: {\n      default: 'gray-800',\n      isFocusVisible: 'focus-ring',\n      forcedColors: 'Highlight'\n    }\n  },\n  '--rowForcedFocusBorderColor': {\n    type: 'outlineColor',\n    value: {\n      default: 'focus-ring',\n      forcedColors: 'Highlight'\n    }\n  },\n  '--borderColor': {\n    type: 'borderColor',\n    value: {\n      default: 'transparent',\n      selectionStyle: {\n        highlight: 'blue-900'\n      },\n      forcedColors: 'ButtonBorder'\n    }\n  },\n  forcedColorAdjust: 'none'\n});\n\nconst treeRowBackground = style({\n  position: 'absolute',\n  zIndex: -1,\n  inset: 0,\n  backgroundColor: {\n    default: '--rowBackgroundColor',\n    forcedColors: 'Background',\n    selectionStyle: {\n      highlight: {\n        default: '--rowBackgroundColor',\n        isSelected: {\n          default: colorMix('gray-25', 'blue-900', 10),\n          isHovered: colorMix('gray-25', 'blue-900', 15),\n          isPressed: colorMix('gray-25', 'blue-900', 15),\n          isFocusVisible: colorMix('gray-25', 'blue-900', 15),\n          forcedColors: 'Highlight'\n        }\n      }\n    },\n    ':is([role=\"treegrid\"][data-drop-target] *)': rootRowDropStyles,\n    isDropTarget: rowDropStyles\n  },\n  borderTopStartRadius: {\n    default: '--borderRadiusTreeItem',\n    isPreviousSelected: {\n      default: '--borderRadiusTreeItem',\n      isSelected: 'none'\n    }\n  },\n  borderTopEndRadius: {\n    default: '--borderRadiusTreeItem',\n    isPreviousSelected: {\n      default: '--borderRadiusTreeItem',\n      isSelected: 'none'\n    }\n  },\n  borderBottomStartRadius: {\n    default: '--borderRadiusTreeItem',\n    isNextSelected: {\n      default: '--borderRadiusTreeItem',\n      isSelected: 'none'\n    }\n  },\n  borderBottomEndRadius: {\n    default: '--borderRadiusTreeItem',\n    isNextSelected: {\n      default: '--borderRadiusTreeItem',\n      isSelected: 'none'\n    }\n  },\n  borderTopWidth: {\n    default: 1,\n    isPreviousSelected: 0\n  },\n  borderBottomWidth: {\n    default: 1,\n    isNextSelected: 0\n  },\n  borderStartWidth: 1,\n  borderEndWidth: 1,\n  borderStyle: 'solid',\n  borderColor: {\n    default: 'transparent',\n    isSelected: '--borderColor'\n  }\n});\n\nconst treeCheckbox = style({\n  gridArea: 'checkbox',\n  marginStart: 8,\n  marginEnd: 0,\n  paddingEnd: 0,\n  visibility: {\n    default: 'visible',\n    isDisabled: 'hidden'\n  }\n});\n\nconst treeIcon = style({\n  gridArea: 'icon',\n  marginEnd: 'text-to-visual',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nconst treeContent = style({\n  gridArea: 'content',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden'\n});\n\nconst treeActions = style({\n  gridArea: 'actions',\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: 2,\n  marginEnd: 4\n});\n\nconst treeActionMenu = style({\n  gridArea: 'actionmenu'\n});\n\nconst treeDragButtonContainer = style({\n  gridArea: 'drag-handle',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 10\n});\n\nlet treeRowFocusRing = style({\n  ...focusRing(),\n  outlineOffset: {\n    default: -2,\n    forcedColors: -3\n  },\n  outlineWidth: {\n    default: 2,\n    forcedColors: '[3px]'\n  },\n  outlineColor: {\n    default: 'focus-ring',\n    forcedColors: 'Highlight',\n    selectionStyle: {\n      highlight: {\n        default: 'focus-ring',\n        forcedColors: 'ButtonBorder'\n      }\n    }\n  },\n  position: 'absolute',\n  inset: 0,\n  top: {\n    default: '[-1px]',\n    isFirstItem: 0\n  },\n  bottom: {\n    selectionStyle: {\n      checkbox: 0,\n      highlight: {\n        default: 0,\n        isNextSelected: '[-1px]',\n        isSelected: {\n          default: 0,\n          isNextSelected: 0\n        }\n      }\n    }\n  },\n  borderRadius: 'sm',\n  zIndex: 1,\n  pointerEvents: 'none'\n});\n\nexport const TreeViewItem = (props: TreeViewItemProps): ReactNode => {\n  let {href} = props;\n\n  return (\n    <TreeItem\n      {...props}\n      className={renderProps =>\n        treeRow({\n          ...renderProps,\n          isLink: !!href\n        })\n      }\n    />\n  );\n};\n\nexport interface TreeViewItemContentProps extends Omit<TreeItemContentProps, 'children'> {\n  /** Rendered contents of the tree item or child items. */\n  children: ReactNode;\n}\n\nexport const TreeViewItemContent = (props: TreeViewItemContentProps): ReactNode => {\n  let {children} = props;\n  let scale = useScale();\n\n  let {selectionStyle} = useContext(InternalTreeViewContext);\n\n  return (\n    <TreeItemContent>\n      {({\n        isExpanded,\n        hasChildItems,\n        selectionMode,\n        selectionBehavior,\n        isDisabled,\n        isSelected,\n        id,\n        state,\n        isHovered,\n        isFocusVisible,\n        isFocusVisibleWithin,\n        allowsDragging,\n        isDropTarget\n      }) => {\n        return (\n          <div\n            className={treeCellGrid({\n              isDisabled,\n              isNextSelected: isNextSelected(id, state),\n              isSelected,\n              selectionStyle\n            })}>\n            <div\n              className={treeRowBackground({\n                isHovered,\n                isFocusVisible,\n                isSelected,\n                selectionStyle,\n                isNextSelected: isNextSelected(id, state),\n                isPreviousSelected: isPrevSelected(id, state),\n                isDropTarget\n              })}\n            />\n            {isFocusVisible && (\n              <div\n                className={treeRowFocusRing({\n                  isFocusVisible,\n                  selectionStyle,\n                  isSelected,\n                  isNextSelected: isNextSelected(id, state),\n                  isFirstItem: isFirstItem(id, state)\n                })}\n              />\n            )}\n            {allowsDragging && (\n              <div className={treeDragButtonContainer}>\n                {!isDisabled && <DragHandleButton isFocusVisibleWithin={isFocusVisibleWithin} />}\n              </div>\n            )}\n            {selectionMode !== 'none' &&\n              selectionBehavior === 'toggle' &&\n              selectionStyle !== 'highlight' && (\n                // TODO: add transition?\n                <div\n                  className={treeCheckbox({\n                    isDisabled:\n                      isDisabled ||\n                      !state.selectionManager.canSelectItem(id) ||\n                      state.disabledKeys.has(id)\n                  })}>\n                  <Checkbox slot=\"selection\" />\n                </div>\n              )}\n            <div\n              className={style({\n                gridArea: 'level-padding',\n                width: 'calc(calc(var(--tree-item-level, 0) - 1) * var(--indent))'\n              })}\n            />\n            <ExpandableRowChevron\n              isDisabled={isDisabled}\n              isExpanded={isExpanded}\n              scale={scale}\n              isHidden={!hasChildItems}\n            />\n            <Provider\n              values={[\n                [TextContext, {styles: treeContent}],\n                [\n                  IconContext,\n                  {\n                    render: centerBaseline({slot: 'icon', styles: treeIcon}),\n                    styles: style({size: fontRelative(20), flexShrink: 0})\n                  }\n                ],\n                [ActionButtonGroupContext, {styles: treeActions, isDisabled}],\n                [ActionMenuContext, {styles: treeActionMenu, isQuiet: true, isDisabled}]\n              ]}>\n              {typeof children === 'string' ? <Text>{children}</Text> : children}\n            </Provider>\n          </div>\n        );\n      }}\n    </TreeItemContent>\n  );\n};\n\nconst centeredWrapper = style({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 'full',\n  height: 'full'\n});\n\nexport const TreeViewLoadMoreItem = (props: TreeViewLoadMoreItemProps): ReactNode => {\n  let {loadingState, onLoadMore} = props;\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';\n  return (\n    <TreeLoadMoreItem\n      isLoading={isLoading}\n      onLoadMore={onLoadMore}\n      className={style({width: 'full', marginY: 4})}>\n      {() => {\n        return (\n          <div className={centeredWrapper}>\n            <ProgressCircle\n              isIndeterminate\n              aria-label={stringFormatter.format('table.loadingMore')}\n            />\n          </div>\n        );\n      }}\n    </TreeLoadMoreItem>\n  );\n};\n\ninterface ExpandableRowChevronProps {\n  isExpanded?: boolean;\n  isDisabled?: boolean;\n  isRTL?: boolean;\n  scale: 'medium' | 'large';\n  isHidden?: boolean;\n}\n\nconst expandButton = style<ExpandableRowChevronProps>({\n  gridArea: 'expand-button',\n  color: {\n    default: 'inherit',\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  height: 40,\n  width: 40,\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignContent: 'center',\n  justifyContent: 'center',\n  outlineStyle: 'none',\n  cursor: 'default',\n  transform: {\n    isExpanded: {\n      default: 'rotate(90deg)',\n      isRTL: 'rotate(-90deg)'\n    }\n  },\n  padding: 0,\n  transition: 'default',\n  backgroundColor: 'transparent',\n  borderStyle: 'none',\n  disableTapHighlight: true,\n  visibility: {\n    isHidden: 'hidden'\n  }\n});\n\nfunction ExpandableRowChevron(props: ExpandableRowChevronProps) {\n  let expandButtonRef = useRef<HTMLButtonElement>(null);\n  let [fullProps, ref] = useContextProps(\n    {...props, slot: 'chevron'},\n    expandButtonRef,\n    ButtonContext\n  );\n  let {isExpanded, scale, isHidden} = fullProps;\n  let {direction} = useLocale();\n\n  return (\n    <Button\n      {...props}\n      ref={ref}\n      slot=\"chevron\"\n      className={renderProps =>\n        expandButton({...renderProps, isExpanded, isRTL: direction === 'rtl', scale, isHidden})\n      }>\n      <Chevron\n        className={style({\n          scale: {\n            direction: {\n              ltr: '1',\n              rtl: '-1'\n            }\n          },\n          '--iconPrimary': {\n            type: 'fill',\n            value: 'currentColor'\n          }\n        })({direction})}\n      />\n    </Button>\n  );\n}\n\nfunction isNextSelected(id: Key | undefined, state: TreeState<unknown>) {\n  if (id == null || !state) {\n    return false;\n  }\n  let keyAfter = state.collection.getKeyAfter(id);\n\n  // We need to skip non-item nodes because the selection manager will map non-item nodes to their parent before checking selection\n  let node = keyAfter != null ? state.collection.getItem(keyAfter) : null;\n  while (node && node.type !== 'item' && keyAfter != null) {\n    keyAfter = state.collection.getKeyAfter(keyAfter);\n    node = keyAfter != null ? state.collection.getItem(keyAfter) : null;\n  }\n\n  return keyAfter != null && state.selectionManager.isSelected(keyAfter);\n}\n\nfunction isPrevSelected(id: Key | undefined, state: TreeState<unknown>) {\n  if (id == null || !state) {\n    return false;\n  }\n  let keyBefore = state.collection.getKeyBefore(id);\n  return keyBefore != null && state.selectionManager.isSelected(keyBefore);\n}\n\nfunction isFirstItem(id: Key | undefined, state: TreeState<unknown>) {\n  if (id == null || !state) {\n    return false;\n  }\n  return state.collection.getFirstKey() === id;\n}\n"],"names":[],"version":3,"file":"TreeView.mjs.map"}

package/dist/private/dnd-utils.cjs

@@ -31,22 +31,22 @@ $parcel$export(module.exports, "DragHandleButton", () => $f1f08ef5de95f8eb$expor
 
 let $f1f08ef5de95f8eb$var$insertionIndicatorWrapper = function anonymous(props) {
     let rules = " ";
-    rules += ' _Pa131';
-    rules += ' Wr131';
-    rules += ' _lr131';
-    rules += ' _Ar131';
-    rules += ' _zr131';
-    rules += ' sd131';
-    rules += ' eb131';
-    if (props.isRoot) rules += ' Iy131';
-    else rules += ' IyEbn5c131';
-    if (props.isDropTarget) rules += ' poPoFpe131';
-    else rules += ' pw131';
-    if (props.isDropTarget) rules += ' pld131';
-    if (props.isDropTarget) rules += ' -_3xYcJd-gX131';
-    else rules += ' -_3xYcJd-g9131';
-    if (props.isDropTarget) rules += ' -_3xYcJd-lga131';
-    rules += ' _yb131';
+    rules += ' _Pa151';
+    rules += ' Wr151';
+    rules += ' _lr151';
+    rules += ' _Ar151';
+    rules += ' _zr151';
+    rules += ' sd151';
+    rules += ' eb151';
+    if (props.isRoot) rules += ' Iy151';
+    else rules += ' IyEbn5c151';
+    if (props.isDropTarget) rules += ' poPoFpe151';
+    else rules += ' pw151';
+    if (props.isDropTarget) rules += ' pld151';
+    if (props.isDropTarget) rules += ' -_3xYcJd-gX151';
+    else rules += ' -_3xYcJd-g9151';
+    if (props.isDropTarget) rules += ' -_3xYcJd-lga151';
+    rules += ' _yb151';
     return rules;
 };
 function $f1f08ef5de95f8eb$export$2c0bab5914a9d088({ target: target }) {
@@ -105,32 +105,32 @@ function $f1f08ef5de95f8eb$export$2c0bab5914a9d088({ target: target }) {
 }
 let $f1f08ef5de95f8eb$var$dragButton = function anonymous(props) {
     let rules = " ";
-    rules += ' p40ub4c131';
-    rules += ' sd131';
-    rules += ' eb131';
-    rules += ' _Ca131';
-    rules += ' Fo131';
-    rules += ' Zi131';
-    rules += ' Td131';
-    rules += ' Qd131';
-    rules += ' Sd131';
-    rules += ' Rd131';
-    rules += ' Jy131';
-    rules += ' Gy131';
-    rules += ' Iy131';
-    rules += ' Hy131';
-    rules += ' g9131';
-    rules += ' _je131';
-    rules += ' oa131';
-    rules += ' na131';
-    rules += ' ka131';
-    rules += ' ja131';
-    if (props.isFocusVisible) rules += ' _Lf131';
-    else rules += ' _Le131';
-    rules += ' Oh131';
-    rules += ' Olc131';
-    rules += ' _Mc131';
-    rules += ' -_8sjo0b-t5ZbAob131';
+    rules += ' p40ub4c151';
+    rules += ' sd151';
+    rules += ' eb151';
+    rules += ' _Ca151';
+    rules += ' Fo151';
+    rules += ' Zi151';
+    rules += ' Td151';
+    rules += ' Qd151';
+    rules += ' Sd151';
+    rules += ' Rd151';
+    rules += ' Jy151';
+    rules += ' Gy151';
+    rules += ' Iy151';
+    rules += ' Hy151';
+    rules += ' g9151';
+    rules += ' _je151';
+    rules += ' oa151';
+    rules += ' na151';
+    rules += ' ka151';
+    rules += ' ja151';
+    if (props.isFocusVisible) rules += ' _Lf151';
+    else rules += ' _Le151';
+    rules += ' Oh151';
+    rules += ' Olc151';
+    rules += ' _Mc151';
+    rules += ' -_8sjo0b-t5ZbAob151';
     return rules;
 };
 function $f1f08ef5de95f8eb$export$4c99a519d851f90c({ isFocusVisibleWithin: isFocusVisibleWithin }) {

package/dist/private/dnd-utils.css

@@ -1,145 +1,145 @@
 @layer _.a {
-  ._Pa131 {
+  ._Pa151 {
     position: absolute;
   }
 
-  .Wr131 {
+  .Wr151 {
     top: 0;
   }
 
-  ._lr131 {
+  ._lr151 {
     bottom: 0;
   }
 
-  ._Ar131 {
+  ._Ar151 {
     inset-inline-start: 0;
   }
 
-  ._zr131 {
+  ._zr151 {
     inset-inline-end: 0;
   }
 
-  .IyEbn5c131 {
+  .IyEbn5c151 {
     margin-inline-start: calc((var(--drop-level, 1) - 1) * var(--indent) + var(--indicator-level-padding));
   }
 
-  .pw131 {
+  .pw151 {
     color: #0000;
   }
 
-  .poPoFpe131 {
+  .poPoFpe151 {
     color: light-dark(#4b75ff, #4069fd);
   }
 
-  .-_3xYcJd-g9131 {
+  .-_3xYcJd-g9151 {
     --indicator-circle-bg: transparent;
   }
 
-  .-_3xYcJd-gX131 {
+  .-_3xYcJd-gX151 {
     --indicator-circle-bg: light-dark(#fff, #111);
   }
 
-  ._yb131 {
+  ._yb151 {
     forced-color-adjust: none;
   }
 
-  .p40ub4c131 {
+  .p40ub4c151 {
     color: inherit;
   }
 
-  .sd131 {
+  .sd151 {
     display: flex;
   }
 
-  .eb131 {
+  .eb151 {
     align-items: center;
   }
 
-  ._Ca131 {
+  ._Ca151 {
     justify-content: center;
   }
 
-  .Fo131 {
+  .Fo151 {
     height: calc(1.375rem * var(--s2-scale));
   }
 
-  .Zi131 {
+  .Zi151 {
     width: calc(.625rem * var(--s2-scale));
   }
 
-  .Td131 {
+  .Td151 {
     padding-top: 0;
   }
 
-  .Qd131 {
+  .Qd151 {
     padding-bottom: 0;
   }
 
-  .Sd131 {
+  .Sd151 {
     padding-inline-start: 0;
   }
 
-  .Rd131 {
+  .Rd151 {
     padding-inline-end: 0;
   }
 
-  .Jy131 {
+  .Jy151 {
     margin-top: 0;
   }
 
-  .Gy131 {
+  .Gy151 {
     margin-bottom: 0;
   }
 
-  .Iy131 {
+  .Iy151 {
     margin-inline-start: 0;
   }
 
-  .Hy131 {
+  .Hy151 {
     margin-inline-end: 0;
   }
 
-  .g9131 {
+  .g9151 {
     background-color: #0000;
   }
 
-  ._je131 {
+  ._je151 {
     border-style: none;
   }
 
-  .oa131 {
+  .oa151 {
     border-start-start-radius: .25rem;
   }
 
-  .na131 {
+  .na151 {
     border-start-end-radius: .25rem;
   }
 
-  .ka131 {
+  .ka151 {
     border-end-start-radius: .25rem;
   }
 
-  .ja131 {
+  .ja151 {
     border-end-end-radius: .25rem;
   }
 
-  ._Le131 {
+  ._Le151 {
     outline-style: none;
   }
 
-  ._Lf131 {
+  ._Lf151 {
     outline-style: solid;
   }
 
-  .Oh131 {
+  .Oh151 {
     outline-color: light-dark(#4b75ff, #4069fd);
   }
 
-  ._Mc131 {
+  ._Mc151 {
     outline-width: 2px;
   }
 
-  .-_8sjo0b-t5ZbAob131 {
+  .-_8sjo0b-t5ZbAob151 {
     --iconPrimary: currentColor;
   }
 }
@@ -148,15 +148,15 @@
 
 @layer _.b.l {
   @media (forced-colors: active) {
-    .pld131 {
+    .pld151 {
       color: highlight;
     }
 
-    .-_3xYcJd-lga131 {
+    .-_3xYcJd-lga151 {
       --indicator-circle-bg: Background;
     }
 
-    .Olc131 {
+    .Olc151 {
       outline-color: highlight;
     }
   }

package/dist/private/dnd-utils.mjs

@@ -24,22 +24,22 @@ import {useVisuallyHidden as $7m476$useVisuallyHidden} from "react-aria/Visually
 
 let $3c1ab1fd8f31a3e2$var$insertionIndicatorWrapper = function anonymous(props) {
     let rules = " ";
-    rules += ' _Pa131';
-    rules += ' Wr131';
-    rules += ' _lr131';
-    rules += ' _Ar131';
-    rules += ' _zr131';
-    rules += ' sd131';
-    rules += ' eb131';
-    if (props.isRoot) rules += ' Iy131';
-    else rules += ' IyEbn5c131';
-    if (props.isDropTarget) rules += ' poPoFpe131';
-    else rules += ' pw131';
-    if (props.isDropTarget) rules += ' pld131';
-    if (props.isDropTarget) rules += ' -_3xYcJd-gX131';
-    else rules += ' -_3xYcJd-g9131';
-    if (props.isDropTarget) rules += ' -_3xYcJd-lga131';
-    rules += ' _yb131';
+    rules += ' _Pa151';
+    rules += ' Wr151';
+    rules += ' _lr151';
+    rules += ' _Ar151';
+    rules += ' _zr151';
+    rules += ' sd151';
+    rules += ' eb151';
+    if (props.isRoot) rules += ' Iy151';
+    else rules += ' IyEbn5c151';
+    if (props.isDropTarget) rules += ' poPoFpe151';
+    else rules += ' pw151';
+    if (props.isDropTarget) rules += ' pld151';
+    if (props.isDropTarget) rules += ' -_3xYcJd-gX151';
+    else rules += ' -_3xYcJd-g9151';
+    if (props.isDropTarget) rules += ' -_3xYcJd-lga151';
+    rules += ' _yb151';
     return rules;
 };
 function $3c1ab1fd8f31a3e2$export$2c0bab5914a9d088({ target: target }) {
@@ -98,32 +98,32 @@ function $3c1ab1fd8f31a3e2$export$2c0bab5914a9d088({ target: target }) {
 }
 let $3c1ab1fd8f31a3e2$var$dragButton = function anonymous(props) {
     let rules = " ";
-    rules += ' p40ub4c131';
-    rules += ' sd131';
-    rules += ' eb131';
-    rules += ' _Ca131';
-    rules += ' Fo131';
-    rules += ' Zi131';
-    rules += ' Td131';
-    rules += ' Qd131';
-    rules += ' Sd131';
-    rules += ' Rd131';
-    rules += ' Jy131';
-    rules += ' Gy131';
-    rules += ' Iy131';
-    rules += ' Hy131';
-    rules += ' g9131';
-    rules += ' _je131';
-    rules += ' oa131';
-    rules += ' na131';
-    rules += ' ka131';
-    rules += ' ja131';
-    if (props.isFocusVisible) rules += ' _Lf131';
-    else rules += ' _Le131';
-    rules += ' Oh131';
-    rules += ' Olc131';
-    rules += ' _Mc131';
-    rules += ' -_8sjo0b-t5ZbAob131';
+    rules += ' p40ub4c151';
+    rules += ' sd151';
+    rules += ' eb151';
+    rules += ' _Ca151';
+    rules += ' Fo151';
+    rules += ' Zi151';
+    rules += ' Td151';
+    rules += ' Qd151';
+    rules += ' Sd151';
+    rules += ' Rd151';
+    rules += ' Jy151';
+    rules += ' Gy151';
+    rules += ' Iy151';
+    rules += ' Hy151';
+    rules += ' g9151';
+    rules += ' _je151';
+    rules += ' oa151';
+    rules += ' na151';
+    rules += ' ka151';
+    rules += ' ja151';
+    if (props.isFocusVisible) rules += ' _Lf151';
+    else rules += ' _Le151';
+    rules += ' Oh151';
+    rules += ' Olc151';
+    rules += ' _Mc151';
+    rules += ' -_8sjo0b-t5ZbAob151';
     return rules;
 };
 function $3c1ab1fd8f31a3e2$export$4c99a519d851f90c({ isFocusVisibleWithin: isFocusVisibleWithin }) {

package/dist/types/exports/CenterBaseline.d.ts

@@ -0,0 +1 @@
+export { CenterBaseline } from '../src/CenterBaseline';

package/dist/types/exports/Skeleton.d.ts

@@ -1,2 +1,2 @@
-export { Skeleton, useIsSkeleton } from '../src/Skeleton';
+export { Skeleton, SkeletonContext, useIsSkeleton } from '../src/Skeleton';
 export type { SkeletonProps } from '../src/Skeleton';

package/dist/types/exports/index.d.ts

@@ -78,6 +78,7 @@ export { Tooltip, TooltipTrigger } from '../src/Tooltip';
 export { TreeView, TreeViewItem, TreeViewItemContent, TreeViewLoadMoreItem } from '../src/TreeView';
 export { pressScale } from '../src/pressScale';
 export { mergeStyles } from '../style/runtime';
+export { CenterBaseline } from '../src/CenterBaseline';
 export { Autocomplete } from 'react-aria-components/Autocomplete';
 export { Collection } from 'react-aria/Collection';
 export { FileTrigger } from 'react-aria-components/FileTrigger';

package/dist/types/src/CenterBaseline.d.ts

@@ -7,6 +7,23 @@ interface CenterBaselineProps extends DOMAttributes {
     children: ReactNode;
     slot?: string;
 }
+/**
+ * Vertically centers its children against the surrounding text baseline.
+ * Use this to align icons or other inline elements with adjacent text without
+ * breaking baseline alignment.
+ *
+ * @example
+ *   import {CenterBaseline} from '@react-spectrum/s2/CenterBaseline';
+ *   import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+ *   import CheckmarkIcon from '@react-spectrum/s2/icons/Checkmark';
+ *
+ *   <span className={style({display: 'flex', gap: 4, alignItems: 'baseline'})}>
+ *     <CenterBaseline>
+ *       <CheckmarkIcon />
+ *     </CenterBaseline>
+ *     <span>Done</span>
+ *   </span>;
+ */
 export declare function CenterBaseline(props: CenterBaselineProps): ReactNode;
 export declare const centerBaselineBefore: string;
 export declare function centerBaseline(props?: Omit<CenterBaselineProps, 'children'>): (icon: ReactNode) => ReactNode;

package/dist/types/src/ContextualHelp.d.ts

@@ -5,7 +5,7 @@ import { DialogTriggerProps } from './DialogTrigger';
 import { Placement } from 'react-aria-components/Popover';
 import { PopoverDialogProps } from './Popover';
 import { StyleProps } from './style-utils';
-export interface ContextualHelpPopoverProps extends PopoverDialogProps {
+export interface ContextualHelpPopoverProps extends Omit<PopoverDialogProps, 'isNonModal'> {
     /**
      * The children of the contextual help popover. Supports Heading, Content, and Footer elements.
      */

package/dist/types/src/Disclosure.d.ts

@@ -1,7 +1,7 @@
 import { AriaLabelingProps, DOMProps, DOMRefValue, GlobalDOMAttributes } from '@react-types/shared';
 import { ContextValue } from 'react-aria-components/slots';
 import { DisclosurePanelProps as RACDisclosurePanelProps, DisclosureProps as RACDisclosureProps } from 'react-aria-components/Disclosure';
-import { StyleProps, UnsafeStyles } from './style-utils';
+import { StyleProps, StylesPropWithFont, UnsafeStyles } from './style-utils';
 import React, { ReactNode } from 'react';
 export interface DisclosureProps extends Omit<RACDisclosureProps, 'className' | 'style' | 'render' | 'children' | keyof GlobalDOMAttributes>, StyleProps {
     /**
@@ -36,6 +36,11 @@ export interface DisclosureTitleProps extends UnsafeStyles, DOMProps {
     level?: number;
     /** The contents of the disclosure header. */
     children: React.ReactNode;
+    /**
+     * Spectrum-defined styles, returned by the `style()` macro. Only allows overriding
+     * `font`, `fontFamily`, `fontWeight`, `fontSize`, and `lineHeight`.
+     */
+    styles?: StylesPropWithFont;
 }
 interface DisclosureHeaderProps extends UnsafeStyles, DOMProps {
     children: React.ReactNode;

package/dist/types/src/ListView.d.ts

@@ -6,7 +6,7 @@ import { GridListItemProps, GridListProps } from 'react-aria-components/GridList
 import { Key } from '@react-types/shared';
 import { LayoutInfo } from 'react-aria-components/Virtualizer';
 import { ListLayout } from 'react-stately/useVirtualizerState';
-export interface ListViewProps<T> extends Omit<GridListProps<T>, 'className' | 'style' | 'children' | 'selectionBehavior' | 'layout' | 'render' | 'keyboardNavigationBehavior' | 'orientation' | keyof GlobalDOMAttributes>, DOMProps, UnsafeStyles, ListViewStylesProps, SlotProps {
+export interface ListViewProps<T> extends Omit<GridListProps<T>, 'className' | 'style' | 'children' | 'selectionBehavior' | 'layout' | 'render' | 'orientation' | keyof GlobalDOMAttributes>, DOMProps, UnsafeStyles, ListViewStylesProps, SlotProps {
     /** Spectrum-defined styles, returned by the `style()` macro. */
     styles?: StylesPropWithHeight;
     /** The current loading state of the ListView. */

package/dist/types/src/Menu.d.ts

@@ -24,7 +24,7 @@ export interface MenuTriggerProps extends AriaMenuTriggerProps {
      */
     shouldFlip?: boolean;
 }
-export interface MenuProps<T> extends Omit<AriaMenuProps<T>, 'children' | 'style' | 'className' | 'render' | 'dependencies' | 'renderEmptyState' | keyof GlobalDOMAttributes>, StyleProps {
+export interface MenuProps<T> extends Omit<AriaMenuProps<T>, 'children' | 'style' | 'className' | 'render' | 'renderEmptyState' | keyof GlobalDOMAttributes>, StyleProps {
     /**
      * The size of the Menu.
      *