@adobe/react-spectrum 3.46.2 → 3.47.0

package/dist/private/tree/TreeView.cjs.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/tree/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 {AriaTreeProps} from 'react-aria/useTree';\n\nimport {ButtonContext} from 'react-aria-components/Button';\n\nimport {Checkbox} from '../checkbox/Checkbox';\n\nimport ChevronLeftMedium from '@spectrum-icons/ui/ChevronLeftMedium';\nimport ChevronRightMedium from '@spectrum-icons/ui/ChevronRightMedium';\nimport {DOMRef, Expandable, Key, SelectionBehavior, SpectrumSelectionProps, StyleProps} from '@react-types/shared';\nimport {focusRing, style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {isAndroid} from 'react-aria/private/utils/platform';\nimport React, {createContext, JSX, JSXElementConstructor, ReactElement, ReactNode, useRef} from 'react';\nimport {SlotProvider} from '../utils/Slots';\nimport {\n  Tree,\n  TreeItem,\n  TreeItemContent,\n  TreeItemContentProps,\n  TreeItemContentRenderProps,\n  TreeItemProps,\n  TreeItemRenderProps,\n  TreeRenderProps\n} from 'react-aria-components/Tree';\nimport {useButton} from 'react-aria/useButton';\nimport {useContextProps} from 'react-aria-components/slots';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useStyleProps} from '../utils/styleProps';\n\nexport interface SpectrumTreeViewProps<T> extends Omit<AriaTreeProps<T>, 'children' | 'render'>, StyleProps, SpectrumSelectionProps, Expandable {\n  /** Provides content to display when there are no items in the tree. */\n  renderEmptyState?: () => JSX.Element,\n  /**\n   * Handler that is called when a user performs an action on an item. The exact user event depends on\n   * the collection's `selectionStyle` prop and the interaction modality.\n   */\n  onAction?: (key: Key) => void,\n  /**\n   * The contents of the tree.\n   */\n  children?: ReactNode | ((item: T) => ReactNode)\n}\n\nexport interface SpectrumTreeViewItemProps extends Omit<TreeItemProps, 'className' | 'style' | 'render' | 'value' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick'> {\n  /** Rendered contents of the tree item or child items. */\n  children: ReactNode\n}\n\ninterface TreeRendererContextValue {\n  renderer?: (item) => ReactElement<any, string | JSXElementConstructor<any>>\n}\nconst TreeRendererContext = createContext<TreeRendererContextValue>({});\n\n// TODO: add animations for rows appearing and disappearing\n\n// TODO: the below is needed so the borders of the top and bottom row isn't cut off if the TreeView is wrapped within a container by always reserving the 2px needed for the\n// keyboard focus ring. Perhaps find a different way of rendering the outlines since the top of the item doesn't\n// scroll into view due to how the ring is offset. Alternatively, have the tree render the top/bottom outline like it does in Listview\nconst tree = style<Pick<TreeRenderProps, 'isEmpty'>>({\n  ...focusRing(),\n  outlineOffset: '[-2px]', // make certain we are visible inside overflow hidden containers\n  height: 'full',\n  width: 'full',\n  borderWidth: 2,\n  boxSizing: 'border-box',\n  borderXWidth: 0,\n  borderStyle: 'solid',\n  borderColor: {\n    default: 'transparent',\n    forcedColors: 'Background'\n  },\n  justifyContent: {\n    isEmpty: 'center'\n  },\n  alignItems: {\n    isEmpty: 'center'\n  },\n  display: {\n    isEmpty: 'flex'\n  },\n  overflow: 'auto'\n});\n\n/**\n * A tree view provides users with a way to navigate nested hierarchical information.\n */\nexport const TreeView = React.forwardRef(function TreeView<T extends object>(props: SpectrumTreeViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n  let {children, selectionStyle, UNSAFE_className} = props;\n\n  let renderer;\n  if (typeof children === 'function') {\n    renderer = children;\n  }\n\n  let {styleProps} = useStyleProps(props);\n  let domRef = useDOMRef(ref);\n  let selectionBehavior = selectionStyle === 'highlight' ? 'replace' : 'toggle';\n\n  return (\n    <TreeRendererContext.Provider value={{renderer}}>\n      <Tree {...props} {...styleProps} className={renderProps => (UNSAFE_className ?? '') + tree(renderProps)} selectionBehavior={selectionBehavior as SelectionBehavior} ref={domRef}>\n        {props.children}\n      </Tree>\n    </TreeRendererContext.Provider>\n  );\n}) as <T>(props: SpectrumTreeViewProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n\ninterface TreeRowRenderProps extends TreeItemRenderProps {\n  isLink?: boolean\n}\n\nconst treeRow = style<TreeRowRenderProps>({\n  position: 'relative',\n  display: 'flex',\n  height: 10,\n  width: 'full',\n  boxSizing: 'border-box',\n  fontSize: 'base',\n  fontWeight: 'normal',\n  lineHeight: 200,\n  color: 'body',\n  outlineStyle: 'none',\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  // TODO: not sure where to get the equivalent colors here, for instance isHovered is spectrum 600 with 10% opacity but I don't think that exists in the theme\n  backgroundColor: {\n    isHovered: '[var(--spectrum-table-row-background-color-hover)]',\n    isFocusVisibleWithin: '[var(--spectrum-table-row-background-color-hover)]',\n    isPressed: '[var(--spectrum-table-row-background-color-down)]',\n    isSelected: '[var(--spectrum-table-row-background-color-selected)]'\n  }\n});\n\nconst treeCellGrid = style({\n  display: 'grid',\n  width: 'full',\n  alignItems: 'center',\n  gridTemplateColumns: ['minmax(0, auto)', 'minmax(0, auto)', 'minmax(0, auto)', 10, 'minmax(0, auto)', '1fr', 'minmax(0, auto)', 'auto'],\n  gridTemplateRows: '1fr',\n  gridTemplateAreas: [\n    'drag-handle checkbox level-padding expand-button icon content actions actionmenu'\n  ],\n  color: {\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    }\n  }\n});\n\n// TODO: These styles lose against the spectrum class names, so I've did unsafe for the ones that get overridden\nconst treeCheckbox = style({\n  gridArea: 'checkbox',\n  transitionDuration: '160ms',\n  marginStart: 3,\n  marginEnd: 0\n});\n\nconst treeIcon = style({\n  gridArea: 'icon',\n  marginEnd: 2\n});\n\nconst treeContent = style<Pick<TreeItemContentRenderProps, 'isDisabled'>>({\n  gridArea: 'content',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden'\n});\n\nconst treeActions = style({\n  gridArea: 'actions',\n  flexGrow: 0,\n  flexShrink: 0,\n  /* TODO: I made this one up, confirm desired behavior. These paddings are to make sure the action group has enough padding for the focus ring */\n  marginStart: .5,\n  marginEnd: 1\n});\n\nconst treeActionMenu = style({\n  gridArea: 'actionmenu',\n  width: 8\n});\n\nconst treeRowOutline = style({\n  content: '',\n  display: 'block',\n  position: 'absolute',\n  insetStart: 0,\n  insetEnd: 0,\n  top: {\n    default: 0,\n    isFocusVisible: '[-2px]',\n    isSelected: {\n      default: '[-1px]',\n      isFocusVisible: '[-2px]'\n    },\n    isFirst: 0\n  },\n  bottom: 0,\n  pointerEvents: 'none',\n  forcedColorAdjust: 'none',\n\n  boxShadow: {\n    isFocusVisible: '[inset 2px 0 0 0 var(--spectrum-alias-focus-color), inset -2px 0 0 0 var(--spectrum-alias-focus-color), inset 0 -2px 0 0 var(--spectrum-alias-focus-color), inset 0 2px 0 0 var(--spectrum-alias-focus-color)]',\n    isSelected: {\n      default: '[inset 1px 0 0 0 var(--spectrum-alias-focus-color), inset -1px 0 0 0 var(--spectrum-alias-focus-color), inset 0 -1px 0 0 var(--spectrum-alias-focus-color), inset 0 1px 0 0 var(--spectrum-alias-focus-color)]',\n      isFocusVisible: '[inset 2px 0 0 0 var(--spectrum-alias-focus-color), inset -2px 0 0 0 var(--spectrum-alias-focus-color), inset 0 -2px 0 0 var(--spectrum-alias-focus-color), inset 0 2px 0 0 var(--spectrum-alias-focus-color)]'\n    },\n    forcedColors: {\n      isFocusVisible: '[inset 2px 0 0 0 Highlight, inset -2px 0 0 0 Highlight, inset 0 -2px 0 0 Highlight, inset 0 2px 0 0 Highlight]',\n      isSelected: {\n        default: '[inset 1px 0 0 0 Highlight, inset -1px 0 0 0 Highlight, inset 0 -1px 0 0 Highlight, inset 0 1px 0 0 Highlight]',\n        isFocusVisible: '[inset 2px 0 0 0 Highlight, inset -2px 0 0 0 Highlight, inset 0 -2px 0 0 Highlight, inset 0 2px 0 0 Highlight]'\n      }\n    }\n  }\n});\n\nexport const TreeViewItem = (props: SpectrumTreeViewItemProps): ReactNode => {\n  let {\n    href\n  } = props;\n\n  return (\n    <TreeItem\n      {...props}\n      className={renderProps => treeRow({\n        ...renderProps,\n        isLink: !!href\n      })} />\n  );\n};\n\nexport interface SpectrumTreeViewItemContentProps extends Omit<TreeItemContentProps, 'children'> {\n  /** Rendered contents of the tree item or child items. */\n  children: ReactNode\n}\n\n\nexport const TreeViewItemContent = (props: SpectrumTreeViewItemContentProps): ReactNode => {\n  let {\n    children\n  } = props;\n\n  return (\n    (<TreeItemContent>\n      {({isExpanded, hasChildItems, level, selectionMode, selectionBehavior, isDisabled, isSelected, isFocusVisible, state, id}) => {\n        let isFirst = state.collection.getFirstKey() === id;\n        return (\n          (<div className={treeCellGrid({isDisabled})}>\n            {selectionMode !== 'none' && selectionBehavior === 'toggle' && (\n              // TODO: add transition?\n              (<Checkbox\n                isEmphasized\n                UNSAFE_className={treeCheckbox()}\n                UNSAFE_style={{paddingInlineEnd: '0px'}}\n                slot=\"selection\" />)\n              )}\n            <div style={{gridArea: 'level-padding', marginInlineEnd: `calc(${level - 1} * var(--spectrum-global-dimension-size-200))`}} />\n            {/* TODO: revisit when we do async loading, at the moment hasChildItems will only cause the chevron to be rendered, no aria/data attributes indicating the row's expandability are added */}\n            {hasChildItems && <ExpandableRowChevron isDisabled={isDisabled} isExpanded={isExpanded} />}\n            <SlotProvider\n              slots={{\n                text: {UNSAFE_className: treeContent({isDisabled})},\n                  // Note there is also an issue here where these icon props are making into the action menu's icon. Resolved by 8ab0ffb276ff437a65b365c9a3be0323a1b24656\n                  // but could crop up later for other components\n                icon: {UNSAFE_className: treeIcon(), size: 'S'},\n                actionButton: {UNSAFE_className: treeActions(), isQuiet: true},\n                actionGroup: {\n                  UNSAFE_className: treeActions(),\n                  isQuiet: true,\n                  density: 'compact',\n                  buttonLabelBehavior: 'hide',\n                  isDisabled,\n                  overflowMode: 'collapse'\n                },\n                actionMenu: {UNSAFE_className: treeActionMenu(), UNSAFE_style: {marginInlineEnd: '.5rem'}, isQuiet: true}\n              }}>\n              {children}\n            </SlotProvider>\n            <div className={treeRowOutline({isFocusVisible, isSelected, isFirst})} />\n          </div>)\n        );\n      }}\n    </TreeItemContent>)\n  );\n};\n\ninterface ExpandableRowChevronProps {\n  isExpanded?: boolean,\n  isDisabled?: boolean,\n  isRTL?: boolean\n}\n\nconst expandButton = style<ExpandableRowChevronProps>({\n  gridArea: 'expand-button',\n  height: 'full',\n  aspectRatio: 'square',\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignContent: 'center',\n  justifyContent: 'center',\n  outlineStyle: 'none',\n  transform: {\n    isExpanded: {\n      default: 'rotate(90deg)',\n      isRTL: 'rotate(-90deg)'\n    }\n  },\n  transition: '[transform ease var(--spectrum-global-animation-duration-100)]'\n});\n\nfunction ExpandableRowChevron(props: ExpandableRowChevronProps) {\n  let expandButtonRef = useRef(null);\n  let [fullProps, ref] = useContextProps({...props, slot: 'chevron'}, expandButtonRef, ButtonContext);\n  let {isExpanded, isDisabled} = fullProps;\n  let {direction} = useLocale();\n\n  // Will need to keep the chevron as a button for iOS VO at all times since VO doesn't focus the cell. Also keep as button if cellAction is defined by the user in the future\n  let {buttonProps} = useButton({\n    ...fullProps,\n    elementType: 'span'\n  }, ref);\n\n  return (\n    <span\n      {...buttonProps}\n      ref={ref}\n      // Override tabindex so that grid keyboard nav skips over it. Needs -1 so android talkback can actually \"focus\" it\n      tabIndex={isAndroid() && !isDisabled ? -1 : undefined}\n      className={expandButton({isExpanded, isDisabled, isRTL: direction === 'rtl'})}>\n      {direction === 'ltr' ? <ChevronRightMedium /> : <ChevronLeftMedium />}\n    </span>\n  );\n}\n"],"names":[],"version":3,"file":"TreeView.cjs.map"}

package/dist/private/tree/TreeView.css

@@ -0,0 +1,319 @@
+@layer s1-a, s1-b;
+
+@layer a {
+  .s1-_Fs1-b {
+    outline-style: solid;
+  }
+
+  .s1-ds1-___I {
+    outline-color: var(--spectrum-alias-focus-color, var(--spectrum-global-color-blue-400));
+  }
+
+  .s1-_Hs1-c {
+    outline-width: var(--spectrum-alias-border-size-thick, var(--spectrum-global-dimension-static-size-25));
+  }
+
+  .s1-_G-yj8a3w {
+    outline-offset: -2px;
+  }
+
+  .s1-ws1-c {
+    border-top-width: var(--spectrum-alias-border-size-thick, var(--spectrum-global-dimension-static-size-25));
+  }
+
+  .s1-xs1-c {
+    border-bottom-width: var(--spectrum-alias-border-size-thick, var(--spectrum-global-dimension-static-size-25));
+  }
+
+  .s1-us1-a {
+    border-inline-start-width: 0;
+  }
+
+  .s1-vs1-a {
+    border-inline-end-width: 0;
+  }
+
+  .s1-As1-a {
+    border-style: solid;
+  }
+
+  .s1-cs1-a {
+    border-color: #0000;
+  }
+
+  .s1-__ts1-a {
+    overflow-x: auto;
+  }
+
+  .s1-__us1-a {
+    overflow-y: auto;
+  }
+
+  .s1-Xs1-c {
+    position: relative;
+  }
+
+  .s1-ns1-k {
+    height: calc(2.5rem * var(--spectrum-global-dimension-scale-factor));
+  }
+
+  .s1-__ls1-a {
+    box-sizing: border-box;
+  }
+
+  .s1-6s1-c {
+    font-size: var(--spectrum-global-dimension-font-size-100);
+  }
+
+  .s1-7s1-d {
+    font-weight: 400;
+  }
+
+  .s1-9s1-b {
+    line-height: var(--spectrum-global-font-line-height-medium, 1.5);
+  }
+
+  .s1-as1-___K {
+    color: var(--spectrum-alias-text-color, var(--spectrum-global-color-gray-800));
+  }
+
+  .s1-__Fs1-b {
+    cursor: default;
+  }
+
+  .s1-__Fs1-c {
+    cursor: pointer;
+  }
+
+  .s1-b-ml9cvk {
+    background-color: var(--spectrum-table-row-background-color-hover, var(--spectrum-alias-highlight-hover));
+    background-color: var(--spectrum-table-row-background-color-hover, var(--spectrum-alias-highlight-hover));
+  }
+
+  .s1-b-1t6gvb8 {
+    background-color: var(--spectrum-table-row-background-color-down, var(--spectrum-alias-highlight-active));
+  }
+
+  .s1-b-7vr0l1 {
+    background-color: var(--spectrum-table-row-background-color-selected, var(--spectrum-alias-highlight-selected));
+  }
+
+  .s1-_Ts1-f {
+    display: grid;
+  }
+
+  .s1-os1-Y {
+    width: 100%;
+  }
+
+  .s1-_Vs1-c {
+    align-items: center;
+  }
+
+  .s1-__e-1nxidkl-1nxidkl-1nxidkl-3hmti-1nxidkl-375yi6-1nxidkl-ykdwf2 {
+    grid-template-columns: minmax(0, auto) minmax(0, auto) minmax(0, auto) 2.5rem minmax(0, auto) 1fr minmax(0, auto) auto;
+  }
+
+  .s1-__f-375yi6 {
+    grid-template-rows: 1fr;
+  }
+
+  .s1-__g-1qk85yo {
+    grid-template-areas: "drag-handle checkbox level-padding expand-button icon content actions actionmenu";
+  }
+
+  .s1-as1-i {
+    color: var(--spectrum-gray-400);
+  }
+
+  .s1-__h-4wahvw {
+    grid-area: checkbox;
+  }
+
+  .s1-_K-37nn5o {
+    transition-duration: .16s;
+  }
+
+  .s1-Cs1-d {
+    margin-inline-start: .75rem;
+  }
+
+  .s1-Ds1-a {
+    margin-inline-end: 0;
+  }
+
+  .s1-__h-ykjmzy {
+    grid-area: icon;
+  }
+
+  .s1-Ds1-c {
+    margin-inline-end: .5rem;
+  }
+
+  .s1-__h-1mod4sg {
+    grid-area: content;
+  }
+
+  .s1-_gs1-a {
+    text-overflow: ellipsis;
+  }
+
+  .s1-_ks1-b {
+    white-space: nowrap;
+  }
+
+  .s1-__ts1-b {
+    overflow-x: hidden;
+  }
+
+  .s1-__us1-b {
+    overflow-y: hidden;
+  }
+
+  .s1-__h-8ayfo6 {
+    grid-area: actions;
+  }
+
+  .s1-_4-3t1x {
+    flex-grow: 0;
+  }
+
+  .s1-_3-3t1x {
+    flex-shrink: 0;
+  }
+
+  .s1-Cs1-F {
+    margin-inline-start: .125rem;
+  }
+
+  .s1-Ds1-b {
+    margin-inline-end: .25rem;
+  }
+
+  .s1-__h-wit6hk {
+    grid-area: actionmenu;
+  }
+
+  .s1-os1-i {
+    width: calc(2rem * var(--spectrum-global-dimension-scale-factor));
+  }
+
+  .s1-_Ts1-a {
+    display: block;
+  }
+
+  .s1-Xs1-a {
+    position: absolute;
+  }
+
+  .s1-Ys1-a {
+    inset-inline-start: 0;
+  }
+
+  .s1-Zs1-a {
+    inset-inline-end: 0;
+  }
+
+  .s1-0-yj899n {
+    top: -1px;
+  }
+
+  .s1-0-yj8a3w {
+    top: -2px;
+  }
+
+  .s1-0s1-a {
+    top: 0;
+  }
+
+  .s1-2s1-a {
+    bottom: 0;
+  }
+
+  .s1-__zs1-a {
+    pointer-events: none;
+  }
+
+  .s1-_us1-b {
+    forced-color-adjust: none;
+  }
+
+  .s1-_p-1ytnijz {
+    box-shadow: inset 1px 0 0 0 var(--spectrum-alias-focus-color, var(--spectrum-global-color-blue-400)), inset -1px 0 0 0 var(--spectrum-alias-focus-color, var(--spectrum-global-color-blue-400)), inset 0 -1px 0 0 var(--spectrum-alias-focus-color, var(--spectrum-global-color-blue-400)), inset 0 1px 0 0 var(--spectrum-alias-focus-color, var(--spectrum-global-color-blue-400));
+  }
+
+  .s1-_p-ba5uxf {
+    box-shadow: inset 2px 0 0 0 var(--spectrum-alias-focus-color, var(--spectrum-global-color-blue-400)), inset -2px 0 0 0 var(--spectrum-alias-focus-color, var(--spectrum-global-color-blue-400)), inset 0 -2px 0 0 var(--spectrum-alias-focus-color, var(--spectrum-global-color-blue-400)), inset 0 2px 0 0 var(--spectrum-alias-focus-color, var(--spectrum-global-color-blue-400));
+  }
+
+  .s1-__h-pn4rxq {
+    grid-area: expand-button;
+  }
+
+  .s1-ns1-Y {
+    height: 100%;
+  }
+
+  .s1-4s1-b {
+    aspect-ratio: 1;
+  }
+
+  .s1-_Ts1-d {
+    display: flex;
+  }
+
+  .s1-_1s1-a {
+    flex-wrap: wrap;
+  }
+
+  .s1-_Us1-b {
+    align-content: center;
+  }
+
+  .s1-_Ws1-d {
+    justify-content: center;
+  }
+
+  .s1-_Fs1-a {
+    outline-style: none;
+  }
+
+  .s1-W-10b8jr2 {
+    transform: rotate(90deg);
+  }
+
+  .s1-W-negfvv {
+    transform: rotate(-90deg);
+  }
+
+  .s1-_I-1o2fh9e {
+    transition-property: transform ease var(--spectrum-global-animation-duration-100, .13s);
+    transition-duration: .15s;
+    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+  }
+}
+
+@layer s1-b.s1-a {
+  @media (forced-colors: active) {
+    .s1-ds1-as1-___D {
+      outline-color: highlight;
+    }
+
+    .s1-cs1-as1-___y {
+      border-color: background;
+    }
+
+    .s1-as1-as1-___F {
+      color: graytext;
+    }
+
+    .s1-_ps1-a-zlnqab {
+      box-shadow: inset 1px 0 highlight, inset -1px 0 highlight, inset 0 -1px highlight, inset 0 1px highlight;
+    }
+
+    .s1-_ps1-a-4bhpmf {
+      box-shadow: inset 2px 0 highlight, inset -2px 0 highlight, inset 0 -2px highlight, inset 0 2px highlight;
+    }
+  }
+}
+/*# sourceMappingURL=TreeView.css.map */

package/dist/private/tree/TreeView.css.map

@@ -0,0 +1 @@
+{"mappings":"ACAA;;AAEA;EAOE;;;;EAMA;;;;EAcA;;;;EAMA;;;;EAkBA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAYA;;;;EAMA;;;;EAgCA;;;;EAMA;;;;EA5HA;;;;EAYA;;;;EAYA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAYA;;;;EAMA;;;;EAMA;;;;;EAYA;;;;EAMA;;;;EA1FA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EApCA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAlBA;;;;EAMA;;;;EANA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAxBA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAxBA;;;;EAMA;;;;EANA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAkBA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAYA;;;;EAMA;;;;EApFA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;EAMA;;;;;;;AA3CF;EACE;IACE;;;;IA0EA;;;;IAlDA;;;;IAoDA;;;;IAIA","sources":["ec084795d5eac8ea","packages/@adobe/react-spectrum/src/tree/TreeView.tsx"],"sourcesContent":["@import \"4034c84b8ba97082\";\n@import \"ec8cc419c11c48ef\";\n@import \"26a5405aaa75eb71\";\n@import \"544e2c8aefdd287e\";\n@import \"04137e56a1aaf75b\";\n@import \"92a7cb7c025fd756\";\n@import \"3a12e8500bc6546f\";\n@import \"9902636d9491201f\";\n@import \"edac61c07acb2d3c\";\n@import \"e95b63e523873fb5\";\n","@layer s1-a, s1-b;\n\n@layer a {\n  .s1-_Fs1-a {\n    outline-style: none;\n  }\n}\n\n@layer a {\n  .s1-_Fs1-b {\n    outline-style: solid;\n  }\n}\n\n@layer a {\n  .s1-ds1-___I {\n    outline-color: var(--spectrum-alias-focus-color, var(--spectrum-global-color-blue-400));\n  }\n}\n\n@layer s1-b.s1-a {\n  @media (forced-colors: active) {\n    .s1-ds1-as1-___D {\n      outline-color: Highlight;\n    }\n  }\n}\n\n@layer a {\n  .s1-_Hs1-c {\n    outline-width: var(--spectrum-alias-border-size-thick, var(--spectrum-global-dimension-static-size-25));\n  }\n}\n\n@layer a {\n  .s1-_G-yj8a3w {\n    outline-offset: -2px;\n  }\n}\n\n@layer a {\n  .s1-ns1-Y {\n    height: 100%;\n  }\n}\n\n@layer a {\n  .s1-os1-Y {\n    width: 100%;\n  }\n}\n\n@layer a {\n  .s1-ws1-c {\n    border-top-width: var(--spectrum-alias-border-size-thick, var(--spectrum-global-dimension-static-size-25));\n  }\n}\n\n@layer a {\n  .s1-xs1-c {\n    border-bottom-width: var(--spectrum-alias-border-size-thick, var(--spectrum-global-dimension-static-size-25));\n  }\n}\n\n@layer a {\n  .s1-us1-a {\n    border-inline-start-width: 0px;\n  }\n}\n\n@layer a {\n  .s1-vs1-a {\n    border-inline-end-width: 0px;\n  }\n}\n\n@layer a {\n  .s1-__ls1-a {\n    box-sizing: border-box;\n  }\n}\n\n@layer a {\n  .s1-As1-a {\n    border-style: solid;\n  }\n}\n\n@layer a {\n  .s1-cs1-a {\n    border-color: transparent;\n  }\n}\n\n@layer s1-b.s1-a {\n  @media (forced-colors: active) {\n    .s1-cs1-as1-___y {\n      border-color: Background;\n    }\n  }\n}\n\n@layer a {\n  .s1-_Ws1-d {\n    justify-content: center;\n  }\n}\n\n@layer a {\n  .s1-_Vs1-c {\n    align-items: center;\n  }\n}\n\n@layer a {\n  .s1-_Ts1-d {\n    display: flex;\n  }\n}\n\n@layer a {\n  .s1-__ts1-a {\n    overflow-x: auto;\n  }\n}\n\n@layer a {\n  .s1-__us1-a {\n    overflow-y: auto;\n  }\n}\n\n"],"names":[],"version":3,"file":"TreeView.css.map"}

package/dist/private/tree/TreeView.js

@@ -0,0 +1,306 @@
+import "./TreeView.css";
+import {Checkbox as $986e1e93e04146a6$export$48513f6b9f8ce62d} from "../checkbox/Checkbox.js";
+import {SlotProvider as $68f4bc2c1abc5618$export$8107b24b91795686} from "../utils/Slots.js";
+import {useDOMRef as $c234463e9ef56637$export$c2c55ef9111cafd8} from "../utils/useDOMRef.js";
+import {useStyleProps as $120fbea2d95e11ed$export$b8e6fb9d2dff3f41} from "../utils/styleProps.js";
+import {ButtonContext as $b6QeE$ButtonContext} from "react-aria-components/Button";
+import $b6QeE$spectrumiconsuiChevronLeftMedium from "@spectrum-icons/ui/ChevronLeftMedium";
+import $b6QeE$spectrumiconsuiChevronRightMedium from "@spectrum-icons/ui/ChevronRightMedium";
+import {isAndroid as $b6QeE$isAndroid} from "react-aria/private/utils/platform";
+import $b6QeE$react, {createContext as $b6QeE$createContext, useRef as $b6QeE$useRef} from "react";
+import {Tree as $b6QeE$Tree, TreeItem as $b6QeE$TreeItem, TreeItemContent as $b6QeE$TreeItemContent} from "react-aria-components/Tree";
+import {useButton as $b6QeE$useButton} from "react-aria/useButton";
+import {useContextProps as $b6QeE$useContextProps} from "react-aria-components/slots";
+import {useLocale as $b6QeE$useLocale} from "react-aria/I18nProvider";
+
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+
+
+
+
+
+
+const $110b5af1301d605f$var$TreeRendererContext = /*#__PURE__*/ (0, $b6QeE$createContext)({});
+// TODO: add animations for rows appearing and disappearing
+// TODO: the below is needed so the borders of the top and bottom row isn't cut off if the TreeView is wrapped within a container by always reserving the 2px needed for the
+// keyboard focus ring. Perhaps find a different way of rendering the outlines since the top of the item doesn't
+// scroll into view due to how the ring is offset. Alternatively, have the tree render the top/bottom outline like it does in Listview
+const $110b5af1301d605f$var$tree = function anonymous(props) {
+    let rules = "";
+    if (props.isFocusVisible) rules += ' s1-_Fs1-b';
+    else rules += ' s1-_Fs1-a';
+    rules += ' s1-ds1-as1-___D';
+    rules += ' s1-ds1-___I';
+    rules += ' s1-_Hs1-c';
+    rules += ' s1-_G-yj8a3w';
+    rules += ' s1-ns1-Y';
+    rules += ' s1-os1-Y';
+    rules += ' s1-ws1-c';
+    rules += ' s1-xs1-c';
+    rules += ' s1-us1-a';
+    rules += ' s1-vs1-a';
+    rules += ' s1-__ls1-a';
+    rules += ' s1-As1-a';
+    rules += ' s1-cs1-as1-___y';
+    rules += ' s1-cs1-a';
+    if (props.isEmpty) rules += ' s1-_Ws1-d';
+    if (props.isEmpty) rules += ' s1-_Vs1-c';
+    if (props.isEmpty) rules += ' s1-_Ts1-d';
+    rules += ' s1-__ts1-a';
+    rules += ' s1-__us1-a';
+    return rules;
+};
+const $110b5af1301d605f$export$6940b0d9c820eca7 = /*#__PURE__*/ (0, $b6QeE$react).forwardRef(function TreeView(props, ref) {
+    let { children: children, selectionStyle: selectionStyle, UNSAFE_className: UNSAFE_className } = props;
+    let renderer;
+    if (typeof children === 'function') renderer = children;
+    let { styleProps: styleProps } = (0, $120fbea2d95e11ed$export$b8e6fb9d2dff3f41)(props);
+    let domRef = (0, $c234463e9ef56637$export$c2c55ef9111cafd8)(ref);
+    let selectionBehavior = selectionStyle === 'highlight' ? 'replace' : 'toggle';
+    return /*#__PURE__*/ (0, $b6QeE$react).createElement($110b5af1301d605f$var$TreeRendererContext.Provider, {
+        value: {
+            renderer: renderer
+        }
+    }, /*#__PURE__*/ (0, $b6QeE$react).createElement((0, $b6QeE$Tree), {
+        ...props,
+        ...styleProps,
+        className: (renderProps)=>(UNSAFE_className !== null && UNSAFE_className !== void 0 ? UNSAFE_className : '') + $110b5af1301d605f$var$tree(renderProps),
+        selectionBehavior: selectionBehavior,
+        ref: domRef
+    }, props.children));
+});
+const $110b5af1301d605f$var$treeRow = function anonymous(props) {
+    let rules = "";
+    rules += ' s1-Xs1-c';
+    rules += ' s1-_Ts1-d';
+    rules += ' s1-ns1-k';
+    rules += ' s1-os1-Y';
+    rules += ' s1-__ls1-a';
+    rules += ' s1-6s1-c';
+    rules += ' s1-7s1-d';
+    rules += ' s1-9s1-b';
+    rules += ' s1-as1-___K';
+    rules += ' s1-_Fs1-a';
+    if (props.isLink) rules += ' s1-__Fs1-c';
+    else rules += ' s1-__Fs1-b';
+    if (props.isSelected) rules += ' s1-b-7vr0l1';
+    else if (props.isPressed) rules += ' s1-b-1t6gvb8';
+    else if (props.isFocusVisibleWithin) rules += ' s1-b-ml9cvk';
+    else if (props.isHovered) rules += ' s1-b-ml9cvk';
+    return rules;
+};
+const $110b5af1301d605f$var$treeCellGrid = function anonymous(props) {
+    let rules = "";
+    rules += ' s1-_Ts1-f';
+    rules += ' s1-os1-Y';
+    rules += ' s1-_Vs1-c';
+    rules += ' s1-__e-1nxidkl-1nxidkl-1nxidkl-3hmti-1nxidkl-375yi6-1nxidkl-ykdwf2';
+    rules += ' s1-__f-375yi6';
+    rules += ' s1-__g-1qk85yo';
+    if (props.isDisabled) {
+        rules += ' s1-as1-as1-___F';
+        rules += ' s1-as1-i';
+    }
+    return rules;
+};
+// TODO: These styles lose against the spectrum class names, so I've did unsafe for the ones that get overridden
+const $110b5af1301d605f$var$treeCheckbox = function anonymous(props) {
+    let rules = "";
+    rules += ' s1-__h-4wahvw';
+    rules += ' s1-_K-37nn5o';
+    rules += ' s1-Cs1-d';
+    rules += ' s1-Ds1-a';
+    return rules;
+};
+const $110b5af1301d605f$var$treeIcon = function anonymous(props) {
+    let rules = "";
+    rules += ' s1-__h-ykjmzy';
+    rules += ' s1-Ds1-c';
+    return rules;
+};
+const $110b5af1301d605f$var$treeContent = function anonymous(props) {
+    let rules = "";
+    rules += ' s1-__h-1mod4sg';
+    rules += ' s1-_gs1-a';
+    rules += ' s1-_ks1-b';
+    rules += ' s1-__ts1-b';
+    rules += ' s1-__us1-b';
+    return rules;
+};
+const $110b5af1301d605f$var$treeActions = function anonymous(props) {
+    let rules = "";
+    rules += ' s1-__h-8ayfo6';
+    rules += ' s1-_4-3t1x';
+    rules += ' s1-_3-3t1x';
+    rules += ' s1-Cs1-F';
+    rules += ' s1-Ds1-b';
+    return rules;
+};
+const $110b5af1301d605f$var$treeActionMenu = function anonymous(props) {
+    let rules = "";
+    rules += ' s1-__h-wit6hk';
+    rules += ' s1-os1-i';
+    return rules;
+};
+const $110b5af1301d605f$var$treeRowOutline = function anonymous(props) {
+    let rules = "";
+    rules += ' s1-_Ts1-a';
+    rules += ' s1-Xs1-a';
+    rules += ' s1-Ys1-a';
+    rules += ' s1-Zs1-a';
+    if (props.isFirst) rules += ' s1-0s1-a';
+    else if (props.isSelected) {
+        if (props.isFocusVisible) rules += ' s1-0-yj8a3w';
+        else rules += ' s1-0-yj899n';
+    } else if (props.isFocusVisible) rules += ' s1-0-yj8a3w';
+    else rules += ' s1-0s1-a';
+    rules += ' s1-2s1-a';
+    rules += ' s1-__zs1-a';
+    rules += ' s1-_us1-b';
+    if (props.isSelected) {
+        if (props.isFocusVisible) rules += ' s1-_ps1-a-4bhpmf';
+        else rules += ' s1-_ps1-a-zlnqab';
+    } else if (props.isFocusVisible) rules += ' s1-_ps1-a-4bhpmf';
+    if (props.isSelected) {
+        if (props.isFocusVisible) rules += ' s1-_p-ba5uxf';
+        else rules += ' s1-_p-1ytnijz';
+    } else if (props.isFocusVisible) rules += ' s1-_p-ba5uxf';
+    return rules;
+};
+const $110b5af1301d605f$export$6e77ea6719814e9c = (props)=>{
+    let { href: href } = props;
+    return /*#__PURE__*/ (0, $b6QeE$react).createElement((0, $b6QeE$TreeItem), {
+        ...props,
+        className: (renderProps)=>$110b5af1301d605f$var$treeRow({
+                ...renderProps,
+                isLink: !!href
+            })
+    });
+};
+const $110b5af1301d605f$export$9a5779ed3fade674 = (props)=>{
+    let { children: children } = props;
+    return /*#__PURE__*/ (0, $b6QeE$react).createElement((0, $b6QeE$TreeItemContent), null, ({ isExpanded: isExpanded, hasChildItems: hasChildItems, level: level, selectionMode: selectionMode, selectionBehavior: selectionBehavior, isDisabled: isDisabled, isSelected: isSelected, isFocusVisible: isFocusVisible, state: state, id: id })=>{
+        let isFirst = state.collection.getFirstKey() === id;
+        return /*#__PURE__*/ (0, $b6QeE$react).createElement("div", {
+            className: $110b5af1301d605f$var$treeCellGrid({
+                isDisabled: isDisabled
+            })
+        }, selectionMode !== 'none' && selectionBehavior === 'toggle' && /*#__PURE__*/ (0, $b6QeE$react).createElement((0, $986e1e93e04146a6$export$48513f6b9f8ce62d), {
+            isEmphasized: true,
+            UNSAFE_className: $110b5af1301d605f$var$treeCheckbox(),
+            UNSAFE_style: {
+                paddingInlineEnd: '0px'
+            },
+            slot: "selection"
+        }), /*#__PURE__*/ (0, $b6QeE$react).createElement("div", {
+            style: {
+                gridArea: 'level-padding',
+                marginInlineEnd: `calc(${level - 1} * var(--spectrum-global-dimension-size-200))`
+            }
+        }), hasChildItems && /*#__PURE__*/ (0, $b6QeE$react).createElement($110b5af1301d605f$var$ExpandableRowChevron, {
+            isDisabled: isDisabled,
+            isExpanded: isExpanded
+        }), /*#__PURE__*/ (0, $b6QeE$react).createElement((0, $68f4bc2c1abc5618$export$8107b24b91795686), {
+            slots: {
+                text: {
+                    UNSAFE_className: $110b5af1301d605f$var$treeContent({
+                        isDisabled: isDisabled
+                    })
+                },
+                // Note there is also an issue here where these icon props are making into the action menu's icon. Resolved by 8ab0ffb276ff437a65b365c9a3be0323a1b24656
+                // but could crop up later for other components
+                icon: {
+                    UNSAFE_className: $110b5af1301d605f$var$treeIcon(),
+                    size: 'S'
+                },
+                actionButton: {
+                    UNSAFE_className: $110b5af1301d605f$var$treeActions(),
+                    isQuiet: true
+                },
+                actionGroup: {
+                    UNSAFE_className: $110b5af1301d605f$var$treeActions(),
+                    isQuiet: true,
+                    density: 'compact',
+                    buttonLabelBehavior: 'hide',
+                    isDisabled: isDisabled,
+                    overflowMode: 'collapse'
+                },
+                actionMenu: {
+                    UNSAFE_className: $110b5af1301d605f$var$treeActionMenu(),
+                    UNSAFE_style: {
+                        marginInlineEnd: '.5rem'
+                    },
+                    isQuiet: true
+                }
+            }
+        }, children), /*#__PURE__*/ (0, $b6QeE$react).createElement("div", {
+            className: $110b5af1301d605f$var$treeRowOutline({
+                isFocusVisible: isFocusVisible,
+                isSelected: isSelected,
+                isFirst: isFirst
+            })
+        }));
+    });
+};
+const $110b5af1301d605f$var$expandButton = function anonymous(props) {
+    let rules = "";
+    rules += ' s1-__h-pn4rxq';
+    rules += ' s1-ns1-Y';
+    rules += ' s1-4s1-b';
+    rules += ' s1-_Ts1-d';
+    rules += ' s1-_1s1-a';
+    rules += ' s1-_Us1-b';
+    rules += ' s1-_Ws1-d';
+    rules += ' s1-_Fs1-a';
+    if (props.isExpanded) {
+        if (props.isRTL) rules += ' s1-W-negfvv';
+        else rules += ' s1-W-10b8jr2';
+    }
+    rules += ' s1-_I-1o2fh9e';
+    return rules;
+};
+function $110b5af1301d605f$var$ExpandableRowChevron(props) {
+    let expandButtonRef = (0, $b6QeE$useRef)(null);
+    let [fullProps, ref] = (0, $b6QeE$useContextProps)({
+        ...props,
+        slot: 'chevron'
+    }, expandButtonRef, (0, $b6QeE$ButtonContext));
+    let { isExpanded: isExpanded, isDisabled: isDisabled } = fullProps;
+    let { direction: direction } = (0, $b6QeE$useLocale)();
+    // Will need to keep the chevron as a button for iOS VO at all times since VO doesn't focus the cell. Also keep as button if cellAction is defined by the user in the future
+    let { buttonProps: buttonProps } = (0, $b6QeE$useButton)({
+        ...fullProps,
+        elementType: 'span'
+    }, ref);
+    return /*#__PURE__*/ (0, $b6QeE$react).createElement("span", {
+        ...buttonProps,
+        ref: ref,
+        // Override tabindex so that grid keyboard nav skips over it. Needs -1 so android talkback can actually "focus" it
+        tabIndex: (0, $b6QeE$isAndroid)() && !isDisabled ? -1 : undefined,
+        className: $110b5af1301d605f$var$expandButton({
+            isExpanded: isExpanded,
+            isDisabled: isDisabled,
+            isRTL: direction === 'rtl'
+        })
+    }, direction === 'ltr' ? /*#__PURE__*/ (0, $b6QeE$react).createElement((0, $b6QeE$spectrumiconsuiChevronRightMedium), null) : /*#__PURE__*/ (0, $b6QeE$react).createElement((0, $b6QeE$spectrumiconsuiChevronLeftMedium), null));
+}
+
+
+export {$110b5af1301d605f$export$6940b0d9c820eca7 as TreeView, $110b5af1301d605f$export$6e77ea6719814e9c as TreeViewItem, $110b5af1301d605f$export$9a5779ed3fade674 as TreeViewItemContent};
+//# sourceMappingURL=TreeView.js.map