@react-spectrum/s2 1.4.0 → 1.5.0

package/dist/private/TreeView.css.map

@@ -1 +1 @@
-{"mappings":"ACsIwB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+BA;IAAA;;;;;;;;;;IAAA;MAAA;;;;;;EAmCX;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+HG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA2CK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmEK;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmEL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAWJ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EASG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAOA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAOG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAIS;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQT;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0IE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkBG;;;;EAAA;;;;EAAA;;;;EAeJ;;;;EAAA;;;;EAgBP;;;;EAAA;;;;EAAA;;;;EAuBI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAoDF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AApmBN;EA+HG;;;;EAAA;;;;;AA/HH;EAAA;IA+HG;;;;IA2CK;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAmEK;;;;IAAA;;;;IAiHH;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAkNF;;;;;;AAjbL;EAAA;;;;EA8GU;;;;EAAA;;;;;AA9GV;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AA8GU;EAAA;IAAA;;;;;;AA8ET;EAAA;IAAA","sources":["56ed516746d0036e","packages/@react-spectrum/s2/src/TreeView.tsx"],"sourcesContent":["@import \"9f0cb543acce7895\";\n@import \"1efe6bd9df94f465\";\n@import \"bdf071bf66df1ce3\";\n@import \"0330b2193d88b3df\";\n@import \"888ae06603582201\";\n@import \"73010de75c5ff12a\";\n@import \"6f9cf7ba5fc61169\";\n@import \"e3d8cbff54f98abf\";\n@import \"5ce50fd84b82affa\";\n@import \"e7f15e944ad73835\";\n@import \"17e37b578317afa7\";\n@import \"664b85d9761c64e2\";\n@import \"b6201a1b57a21b4e\";\n@import \"73100caf88a76f92\";\n@import \"aa285875506162cb\";\n@import \"f9799c14f2de588d\";\n@import \"87ed5557eabe4b2a\";\n@import \"123efe109fe2ce3e\";\n@import \"db5b099e3ba50a7a\";\n","/*\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.css.map"}
+{"mappings":"ACqIwB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+BA;IAAA;;;;;;;;;;IAAA;MAAA;;;;;;EAmCX;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+HG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA2CK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmEK;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmEL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAWJ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EASG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAOA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAOG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAIS;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQT;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0IE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkBG;;;;EAAA;;;;EAAA;;;;EAeJ;;;;EAAA;;;;EAgBP;;;;EAAA;;;;EAAA;;;;EAuBI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAoDF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AApmBN;EA+HG;;;;EAAA;;;;;AA/HH;EAAA;IA+HG;;;;IA2CK;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAmEK;;;;IAAA;;;;IAiHH;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAkNF;;;;;;AAjbL;EAAA;;;;EA8GU;;;;EAAA;;;;;AA9GV;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AA8GU;EAAA;IAAA;;;;;;AA8ET;EAAA;IAAA","sources":["56ed516746d0036e","packages/@react-spectrum/s2/src/TreeView.tsx"],"sourcesContent":["@import \"9f0cb543acce7895\";\n@import \"1efe6bd9df94f465\";\n@import \"bdf071bf66df1ce3\";\n@import \"0330b2193d88b3df\";\n@import \"888ae06603582201\";\n@import \"73010de75c5ff12a\";\n@import \"6f9cf7ba5fc61169\";\n@import \"e3d8cbff54f98abf\";\n@import \"5ce50fd84b82affa\";\n@import \"e7f15e944ad73835\";\n@import \"17e37b578317afa7\";\n@import \"664b85d9761c64e2\";\n@import \"b6201a1b57a21b4e\";\n@import \"73100caf88a76f92\";\n@import \"aa285875506162cb\";\n@import \"f9799c14f2de588d\";\n@import \"87ed5557eabe4b2a\";\n@import \"123efe109fe2ce3e\";\n@import \"db5b099e3ba50a7a\";\n","/*\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.css.map"}