@react-spectrum/s2 1.3.1 → 1.4.0

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 {baseColor, colorMix, focusRing, fontRelative, style} from '../style' with {type: 'macro'};\nimport {Button, ButtonContext} from 'react-aria-components/Button';\nimport {centerBaseline} from './CenterBaseline';\nimport {Checkbox} from './Checkbox';\n\nimport Chevron from '../ui-icons/Chevron';\n\nimport {DOMRef, forwardRefType, GlobalDOMAttributes, Key, LoadingState} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport intlMessages from '../intl/*.json';\nimport {isFirstItem, isPrevSelected} from './ListView';\nimport {ListLayout} from 'react-stately/useVirtualizerState';\nimport {ProgressCircle} from './ProgressCircle';\nimport {Provider, useContextProps} from 'react-aria-components/slots';\n// @ts-ignore\nimport {\n  TreeItemProps as RACTreeItemProps,\n  TreeProps as RACTreeProps,\n  Tree,\n  TreeItem,\n  TreeItemContent,\n  TreeItemContentProps,\n  TreeLoadMoreItem,\n  TreeLoadMoreItemProps\n} from 'react-aria-components/Tree';\nimport React, {createContext, forwardRef, JSXElementConstructor, ReactElement, ReactNode, useContext, useRef} from 'react';\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 [Spectrum](https://spectrum.adobe.com/page/tree-view/#Checkbox-or-highlight-selection-style) page.\n   * @default 'checkbox'\n   */\n  selectionStyle?: 'highlight' | 'checkbox'\n}\n\nexport interface TreeViewProps<T> extends Omit<RACTreeProps<T>, 'style' | 'className' | 'render' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks' | keyof GlobalDOMAttributes>, UnsafeStyles, S2TreeProps, TreeViewStyleProps {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight\n}\n\nexport interface TreeViewItemProps extends Omit<RACTreeItemProps, 'className' | 'style' | 'render' | 'onClick' | keyof GlobalDOMAttributes> {\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\n\nconst treeViewWrapper = style({\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}, getAllowedOverrides({height: true}));\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({\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  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 extends object>(props: TreeViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n  let {children, selectionStyle = 'checkbox', UNSAFE_className, UNSAFE_style} = props;\n  let scale = useScale();\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({...props, scrollRef});\n\n  return (\n    <div\n      ref={domRef}\n      className={(UNSAFE_className ?? '') + treeViewWrapper(null, props.styles)}\n      style={UNSAFE_style}>\n      <Virtualizer\n        layout={ListLayout}\n        layoutOptions={{\n          rowHeight: scale === 'large' ? 50 : 40\n        }}>\n        <TreeRendererContext.Provider value={{renderer}}>\n          <InternalTreeViewContext.Provider value={{selectionStyle}}>\n            <Tree\n              {...props}\n              style={{\n                paddingBottom: actionBarHeight > 0 ? actionBarHeight + 8 : 0,\n                scrollPaddingBottom: actionBarHeight > 0 ? actionBarHeight + 8 : 0\n              }}\n              className={tree}\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({\n  outlineStyle: 'none',\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  gridTemplateColumns: ['auto', 'auto', 'auto', 'auto', '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  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  },\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: 12,\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\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 {\n    href\n  } = props;\n  let {selectionStyle} = useContext(InternalTreeViewContext);\n\n  return (\n    <TreeItem\n      {...props}\n      className={(renderProps) => treeRow({\n        ...renderProps,\n        isLink: !!href,\n        selectionStyle,\n        isPreviousSelected: isPrevSelected(renderProps.id, renderProps.state)\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 {\n    children\n  } = props;\n  let scale = useScale();\n\n  let {selectionStyle} = useContext(InternalTreeViewContext);\n  \n  return (\n    (<TreeItemContent>\n      {({isExpanded, hasChildItems, selectionMode, selectionBehavior, isDisabled, isSelected, id, state, isHovered, isFocusVisible}) => {\n        return (\n          (<div className={treeCellGrid({isDisabled, isNextSelected: isNextSelected(id, state), isSelected, selectionStyle})}>\n            <div className={treeRowBackground({isHovered, isFocusVisible, isSelected, selectionStyle, isNextSelected: isNextSelected(id, state), isPreviousSelected: isPrevSelected(id, state)})} />\n            {isFocusVisible && <div className={treeRowFocusRing({isFocusVisible, selectionStyle, isSelected, isNextSelected: isNextSelected(id, state), isFirstItem: isFirstItem(id, state)})} />}\n            {selectionMode !== 'none' && selectionBehavior === 'toggle' && selectionStyle !== 'highlight' && (\n              // TODO: add transition?\n              (<div className={treeCheckbox({isDisabled: isDisabled || !state.selectionManager.canSelectItem(id) || state.disabledKeys.has(id)})}>\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            <ExpandableRowChevron isDisabled={isDisabled} isExpanded={isExpanded} scale={scale} isHidden={!(hasChildItems)} />\n            <Provider\n              values={[\n                [TextContext, {styles: treeContent}],\n                [IconContext, {\n                  render: centerBaseline({slot: 'icon', styles: treeIcon}),\n                  styles: style({size: fontRelative(20), flexShrink: 0})\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 isLoading={isLoading} onLoadMore={onLoadMore} 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          </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({...props, slot: 'chevron'}, expandButtonRef, ButtonContext);\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 => expandButton({...renderProps, isExpanded, isRTL: direction === 'rtl', scale, isHidden})}>\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    </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 ? state.collection.getItem(keyAfter) : null;\n  while (node && node.type !== 'item' && keyAfter) {\n    keyAfter = state.collection.getKeyAfter(keyAfter);\n    node = keyAfter ? state.collection.getItem(keyAfter) : null;\n  }\n\n  return keyAfter != null && state.selectionManager.isSelected(keyAfter);\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';\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"}

package/dist/private/dnd-utils.cjs

@@ -0,0 +1,149 @@
+require("./dnd-utils.css");
+var $ae5b71e1d2f5c8ba$exports = require("./DragHandle.cjs");
+var $c1AfU$reactjsxruntime = require("react/jsx-runtime");
+var $c1AfU$reactariacomponentsButton = require("react-aria-components/Button");
+var $c1AfU$reactariacomponentsuseDragAndDrop = require("react-aria-components/useDragAndDrop");
+var $c1AfU$react = require("react");
+var $c1AfU$reactariaVisuallyHidden = require("react-aria/VisuallyHidden");
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "InsertionIndicator", () => $f1f08ef5de95f8eb$export$2c0bab5914a9d088);
+$parcel$export(module.exports, "DragHandleButton", () => $f1f08ef5de95f8eb$export$4c99a519d851f90c);
+/*
+ * Copyright 2026 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.
+ */ 
+
+
+
+
+
+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';
+    return rules;
+};
+function $f1f08ef5de95f8eb$export$2c0bab5914a9d088({ target: target }) {
+    let { dropState: dropState } = (0, $c1AfU$react.useContext)((0, $c1AfU$reactariacomponentsuseDragAndDrop.DragAndDropContext)) ?? {};
+    let level = 0;
+    if (target.type === 'item' && dropState?.collection) level = dropState.collection.getItem(target.key)?.level ?? 0;
+    return /*#__PURE__*/ (0, $c1AfU$reactjsxruntime.jsx)((0, $c1AfU$reactariacomponentsuseDragAndDrop.DropIndicator), {
+        className: "",
+        target: target,
+        children: ({ isDropTarget: isDropTarget })=>/*#__PURE__*/ (0, $c1AfU$reactjsxruntime.jsx)("div", {
+                className: $f1f08ef5de95f8eb$var$insertionIndicatorWrapper({
+                    isDropTarget: isDropTarget,
+                    isRoot: level === 0
+                }),
+                style: level > 0 ? {
+                    '--drop-level': level
+                } : undefined,
+                children: /*#__PURE__*/ (0, $c1AfU$reactjsxruntime.jsxs)("svg", {
+                    "aria-hidden": true,
+                    width: "100%",
+                    height: "12",
+                    children: [
+                        /*#__PURE__*/ (0, $c1AfU$reactjsxruntime.jsx)("line", {
+                            x1: "0",
+                            y1: "6",
+                            x2: "100%",
+                            y2: "6",
+                            strokeWidth: "2",
+                            stroke: "currentColor"
+                        }),
+                        /*#__PURE__*/ (0, $c1AfU$reactjsxruntime.jsx)("circle", {
+                            cx: "6",
+                            cy: "6",
+                            r: "5",
+                            strokeWidth: "2",
+                            stroke: "currentColor",
+                            style: {
+                                fill: 'var(--indicator-circle-bg)'
+                            }
+                        }),
+                        /*#__PURE__*/ (0, $c1AfU$reactjsxruntime.jsx)("circle", {
+                            cx: "100%",
+                            cy: "6",
+                            r: "5",
+                            strokeWidth: "2",
+                            stroke: "currentColor",
+                            style: {
+                                fill: 'var(--indicator-circle-bg)'
+                            },
+                            transform: "translate(-6, 0)"
+                        })
+                    ]
+                })
+            })
+    });
+}
+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';
+    return rules;
+};
+function $f1f08ef5de95f8eb$export$4c99a519d851f90c({ isFocusVisibleWithin: isFocusVisibleWithin }) {
+    let { visuallyHiddenProps: visuallyHiddenProps } = (0, $c1AfU$reactariaVisuallyHidden.useVisuallyHidden)();
+    return /*#__PURE__*/ (0, $c1AfU$reactjsxruntime.jsx)((0, $c1AfU$reactariacomponentsButton.Button), {
+        slot: "drag",
+        style: !isFocusVisibleWithin ? visuallyHiddenProps.style : {},
+        className: $f1f08ef5de95f8eb$var$dragButton,
+        children: /*#__PURE__*/ (0, $c1AfU$reactjsxruntime.jsx)((0, $ae5b71e1d2f5c8ba$exports.default), {
+            size: "M"
+        })
+    });
+}
+
+
+//# sourceMappingURL=dnd-utils.cjs.map

package/dist/private/dnd-utils.cjs.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAUD,IAAI;;;;;;;;;;;;;;;;;;;;AA6BG,SAAS,0CAAmB,UAAC,MAAM,EAA2B;IACnE,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,2DAAiB,MAAM,CAAC;IACrD,IAAI,QAAQ;IACZ,IAAI,OAAO,IAAI,KAAK,UAAU,WAAW,YACvC,QAAQ,UAAU,UAAU,CAAC,OAAO,CAAC,OAAO,GAAG,GAAG,SAAS;IAE7D,qBACE,gCAAC,CAAA,GAAA,sDAAY;QAAE,WAAU;QAAG,QAAQ;kBACjC,CAAC,gBAAC,YAAY,EAAC,iBACd,gCAAC;gBACC,WAAW,gDAA0B;kCAAC;oBAAc,QAAQ,UAAU;gBAAC;gBACvE,OAAO,QAAQ,IAAK;oBAAC,gBAAgB;gBAAK,IAA4B;0BACtE,cAAA,iCAAC;oBAAI,aAAW;oBAAC,OAAM;oBAAO,QAAO;;sCACnC,gCAAC;4BAAK,IAAG;4BAAI,IAAG;4BAAI,IAAG;4BAAO,IAAG;4BAAI,aAAY;4BAAI,QAAO;;sCAC5D,gCAAC;4BACC,IAAG;4BACH,IAAG;4BACH,GAAE;4BACF,aAAY;4BACZ,QAAO;4BACP,OAAO;gCAAC,MAAM;4BAA4B;;sCAE5C,gCAAC;4BACC,IAAG;4BACH,IAAG;4BACH,GAAE;4BACF,aAAY;4BACZ,QAAO;4BACP,OAAO;gCAAC,MAAM;4BAA4B;4BAC1C,WAAU;;;;;;AAOxB;AAEA,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BG,SAAS,0CAAiB,wBAAC,oBAAoB,EAAkC;IACtF,IAAI,uBAAC,mBAAmB,EAAC,GAAG,CAAA,GAAA,gDAAgB;IAC5C,qBACE,gCAAC,CAAA,GAAA,uCAAK;QACJ,MAAK;QACL,OAAO,CAAC,uBAAuB,oBAAoB,KAAK,GAAG,CAAC;QAC5D,WAAW;kBACX,cAAA,gCAAC,CAAA,GAAA,iCAAS;YAAE,MAAK;;;AAGvB","sources":["packages/@react-spectrum/s2/src/dnd-utils.tsx"],"sourcesContent":["/*\n * Copyright 2026 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 {Button} from 'react-aria-components/Button';\nimport {DragAndDropContext, DropIndicator} from 'react-aria-components/useDragAndDrop';\nimport DragHandle from '../ui-icons/DragHandle';\nimport {ItemDropTarget} from '@react-types/shared';\nimport React, {useContext} from 'react';\nimport {style} from '../style' with {type: 'macro'};\nimport {useVisuallyHidden} from 'react-aria/VisuallyHidden';\n\nlet insertionIndicatorWrapper = style<{isDropTarget?: boolean; isRoot?: boolean}>({\n  position: 'absolute',\n  inset: 0,\n  display: 'flex',\n  alignItems: 'center',\n  marginStart: {\n    default: 'calc((var(--drop-level, 1) - 1) * var(--indent) + var(--indicator-level-padding))',\n    isRoot: 0\n  },\n  color: {\n    default: 'transparent',\n    isDropTarget: 'blue-800',\n    forcedColors: {\n      isDropTarget: 'Highlight'\n    }\n  },\n  '--indicator-circle-bg': {\n    type: 'backgroundColor',\n    value: {\n      default: 'transparent',\n      isDropTarget: 'gray-25',\n      forcedColors: {\n        isDropTarget: 'Background'\n      }\n    }\n  },\n  forcedColorAdjust: 'none'\n});\n\nexport function InsertionIndicator({target}: {target: ItemDropTarget}) {\n  let {dropState} = useContext(DragAndDropContext) ?? {};\n  let level = 0;\n  if (target.type === 'item' && dropState?.collection) {\n    level = dropState.collection.getItem(target.key)?.level ?? 0;\n  }\n  return (\n    <DropIndicator className=\"\" target={target}>\n      {({isDropTarget}) => (\n        <div\n          className={insertionIndicatorWrapper({isDropTarget, isRoot: level === 0})}\n          style={level > 0 ? ({'--drop-level': level} as React.CSSProperties) : undefined}>\n          <svg aria-hidden width=\"100%\" height=\"12\">\n            <line x1=\"0\" y1=\"6\" x2=\"100%\" y2=\"6\" strokeWidth=\"2\" stroke=\"currentColor\" />\n            <circle\n              cx=\"6\"\n              cy=\"6\"\n              r=\"5\"\n              strokeWidth=\"2\"\n              stroke=\"currentColor\"\n              style={{fill: 'var(--indicator-circle-bg)'}}\n            />\n            <circle\n              cx=\"100%\"\n              cy=\"6\"\n              r=\"5\"\n              strokeWidth=\"2\"\n              stroke=\"currentColor\"\n              style={{fill: 'var(--indicator-circle-bg)'}}\n              transform=\"translate(-6, 0)\"\n            />\n          </svg>\n        </div>\n      )}\n    </DropIndicator>\n  );\n}\n\nlet dragButton = style({\n  color: 'inherit',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  // TODO: arbitrary, basically taken from v3\n  height: 22,\n  width: 10,\n  padding: 0,\n  margin: 0,\n  backgroundColor: 'transparent',\n  borderStyle: 'none',\n  borderRadius: 'sm',\n  // TODO: this mimicks v3 too, do we want halo focus ring?\n  outlineStyle: {\n    default: 'none',\n    isFocusVisible: 'solid'\n  },\n  outlineColor: {\n    default: 'focus-ring',\n    forcedColors: 'Highlight'\n  },\n  outlineWidth: 2,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nexport function DragHandleButton({isFocusVisibleWithin}: {isFocusVisibleWithin: boolean}) {\n  let {visuallyHiddenProps} = useVisuallyHidden();\n  return (\n    <Button\n      slot=\"drag\"\n      style={!isFocusVisibleWithin ? visuallyHiddenProps.style : {}}\n      className={dragButton}>\n      <DragHandle size=\"M\" />\n    </Button>\n  );\n}\n"],"names":[],"version":3,"file":"dnd-utils.cjs.map"}

package/dist/private/dnd-utils.css

@@ -0,0 +1,164 @@
+@layer _.a {
+  ._Pa131 {
+    position: absolute;
+  }
+
+  .Wr131 {
+    top: 0;
+  }
+
+  ._lr131 {
+    bottom: 0;
+  }
+
+  ._Ar131 {
+    inset-inline-start: 0;
+  }
+
+  ._zr131 {
+    inset-inline-end: 0;
+  }
+
+  .IyEbn5c131 {
+    margin-inline-start: calc((var(--drop-level, 1) - 1) * var(--indent) + var(--indicator-level-padding));
+  }
+
+  .pw131 {
+    color: #0000;
+  }
+
+  .poPoFpe131 {
+    color: light-dark(#4b75ff, #4069fd);
+  }
+
+  .-_3xYcJd-g9131 {
+    --indicator-circle-bg: transparent;
+  }
+
+  .-_3xYcJd-gX131 {
+    --indicator-circle-bg: light-dark(#fff, #111);
+  }
+
+  ._yb131 {
+    forced-color-adjust: none;
+  }
+
+  .p40ub4c131 {
+    color: inherit;
+  }
+
+  .sd131 {
+    display: flex;
+  }
+
+  .eb131 {
+    align-items: center;
+  }
+
+  ._Ca131 {
+    justify-content: center;
+  }
+
+  .Fo131 {
+    height: calc(1.375rem * var(--s2-scale));
+  }
+
+  .Zi131 {
+    width: calc(.625rem * var(--s2-scale));
+  }
+
+  .Td131 {
+    padding-top: 0;
+  }
+
+  .Qd131 {
+    padding-bottom: 0;
+  }
+
+  .Sd131 {
+    padding-inline-start: 0;
+  }
+
+  .Rd131 {
+    padding-inline-end: 0;
+  }
+
+  .Jy131 {
+    margin-top: 0;
+  }
+
+  .Gy131 {
+    margin-bottom: 0;
+  }
+
+  .Iy131 {
+    margin-inline-start: 0;
+  }
+
+  .Hy131 {
+    margin-inline-end: 0;
+  }
+
+  .g9131 {
+    background-color: #0000;
+  }
+
+  ._je131 {
+    border-style: none;
+  }
+
+  .oa131 {
+    border-start-start-radius: .25rem;
+  }
+
+  .na131 {
+    border-start-end-radius: .25rem;
+  }
+
+  .ka131 {
+    border-end-start-radius: .25rem;
+  }
+
+  .ja131 {
+    border-end-end-radius: .25rem;
+  }
+
+  ._Le131 {
+    outline-style: none;
+  }
+
+  ._Lf131 {
+    outline-style: solid;
+  }
+
+  .Oh131 {
+    outline-color: light-dark(#4b75ff, #4069fd);
+  }
+
+  ._Mc131 {
+    outline-width: 2px;
+  }
+
+  .-_8sjo0b-t5ZbAob131 {
+    --iconPrimary: currentColor;
+  }
+}
+
+@layer _.b;
+
+@layer _.b.l {
+  @media (forced-colors: active) {
+    .pld131 {
+      color: highlight;
+    }
+
+    .-_3xYcJd-lga131 {
+      --indicator-circle-bg: Background;
+    }
+
+    .Olc131 {
+      outline-color: highlight;
+    }
+  }
+}
+/*# sourceMappingURL=dnd-utils.css.map */

package/dist/private/dnd-utils.css.map

@@ -0,0 +1 @@
+{"mappings":"ACoBgC;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmEf;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAnEe;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAmEf","sources":["05e8b9ba98052c2e","packages/@react-spectrum/s2/src/dnd-utils.tsx"],"sourcesContent":["@import \"56e1b90c319c86da\";\n@import \"1d444dfd635fc6ed\";\n","/*\n * Copyright 2026 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 {Button} from 'react-aria-components/Button';\nimport {DragAndDropContext, DropIndicator} from 'react-aria-components/useDragAndDrop';\nimport DragHandle from '../ui-icons/DragHandle';\nimport {ItemDropTarget} from '@react-types/shared';\nimport React, {useContext} from 'react';\nimport {style} from '../style' with {type: 'macro'};\nimport {useVisuallyHidden} from 'react-aria/VisuallyHidden';\n\nlet insertionIndicatorWrapper = style<{isDropTarget?: boolean; isRoot?: boolean}>({\n  position: 'absolute',\n  inset: 0,\n  display: 'flex',\n  alignItems: 'center',\n  marginStart: {\n    default: 'calc((var(--drop-level, 1) - 1) * var(--indent) + var(--indicator-level-padding))',\n    isRoot: 0\n  },\n  color: {\n    default: 'transparent',\n    isDropTarget: 'blue-800',\n    forcedColors: {\n      isDropTarget: 'Highlight'\n    }\n  },\n  '--indicator-circle-bg': {\n    type: 'backgroundColor',\n    value: {\n      default: 'transparent',\n      isDropTarget: 'gray-25',\n      forcedColors: {\n        isDropTarget: 'Background'\n      }\n    }\n  },\n  forcedColorAdjust: 'none'\n});\n\nexport function InsertionIndicator({target}: {target: ItemDropTarget}) {\n  let {dropState} = useContext(DragAndDropContext) ?? {};\n  let level = 0;\n  if (target.type === 'item' && dropState?.collection) {\n    level = dropState.collection.getItem(target.key)?.level ?? 0;\n  }\n  return (\n    <DropIndicator className=\"\" target={target}>\n      {({isDropTarget}) => (\n        <div\n          className={insertionIndicatorWrapper({isDropTarget, isRoot: level === 0})}\n          style={level > 0 ? ({'--drop-level': level} as React.CSSProperties) : undefined}>\n          <svg aria-hidden width=\"100%\" height=\"12\">\n            <line x1=\"0\" y1=\"6\" x2=\"100%\" y2=\"6\" strokeWidth=\"2\" stroke=\"currentColor\" />\n            <circle\n              cx=\"6\"\n              cy=\"6\"\n              r=\"5\"\n              strokeWidth=\"2\"\n              stroke=\"currentColor\"\n              style={{fill: 'var(--indicator-circle-bg)'}}\n            />\n            <circle\n              cx=\"100%\"\n              cy=\"6\"\n              r=\"5\"\n              strokeWidth=\"2\"\n              stroke=\"currentColor\"\n              style={{fill: 'var(--indicator-circle-bg)'}}\n              transform=\"translate(-6, 0)\"\n            />\n          </svg>\n        </div>\n      )}\n    </DropIndicator>\n  );\n}\n\nlet dragButton = style({\n  color: 'inherit',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  // TODO: arbitrary, basically taken from v3\n  height: 22,\n  width: 10,\n  padding: 0,\n  margin: 0,\n  backgroundColor: 'transparent',\n  borderStyle: 'none',\n  borderRadius: 'sm',\n  // TODO: this mimicks v3 too, do we want halo focus ring?\n  outlineStyle: {\n    default: 'none',\n    isFocusVisible: 'solid'\n  },\n  outlineColor: {\n    default: 'focus-ring',\n    forcedColors: 'Highlight'\n  },\n  outlineWidth: 2,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nexport function DragHandleButton({isFocusVisibleWithin}: {isFocusVisibleWithin: boolean}) {\n  let {visuallyHiddenProps} = useVisuallyHidden();\n  return (\n    <Button\n      slot=\"drag\"\n      style={!isFocusVisibleWithin ? visuallyHiddenProps.style : {}}\n      className={dragButton}>\n      <DragHandle size=\"M\" />\n    </Button>\n  );\n}\n"],"names":[],"version":3,"file":"dnd-utils.css.map"}

package/dist/private/dnd-utils.mjs

@@ -0,0 +1,143 @@
+import "./dnd-utils.css";
+import $8b63ac1a4fa1df22$export$2e2bcd8739ae039 from "./DragHandle.mjs";
+import {jsx as $7m476$jsx, jsxs as $7m476$jsxs} from "react/jsx-runtime";
+import {Button as $7m476$Button} from "react-aria-components/Button";
+import {DragAndDropContext as $7m476$DragAndDropContext, DropIndicator as $7m476$DropIndicator} from "react-aria-components/useDragAndDrop";
+import {useContext as $7m476$useContext} from "react";
+import {useVisuallyHidden as $7m476$useVisuallyHidden} from "react-aria/VisuallyHidden";
+
+/*
+ * Copyright 2026 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.
+ */ 
+
+
+
+
+
+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';
+    return rules;
+};
+function $3c1ab1fd8f31a3e2$export$2c0bab5914a9d088({ target: target }) {
+    let { dropState: dropState } = (0, $7m476$useContext)((0, $7m476$DragAndDropContext)) ?? {};
+    let level = 0;
+    if (target.type === 'item' && dropState?.collection) level = dropState.collection.getItem(target.key)?.level ?? 0;
+    return /*#__PURE__*/ (0, $7m476$jsx)((0, $7m476$DropIndicator), {
+        className: "",
+        target: target,
+        children: ({ isDropTarget: isDropTarget })=>/*#__PURE__*/ (0, $7m476$jsx)("div", {
+                className: $3c1ab1fd8f31a3e2$var$insertionIndicatorWrapper({
+                    isDropTarget: isDropTarget,
+                    isRoot: level === 0
+                }),
+                style: level > 0 ? {
+                    '--drop-level': level
+                } : undefined,
+                children: /*#__PURE__*/ (0, $7m476$jsxs)("svg", {
+                    "aria-hidden": true,
+                    width: "100%",
+                    height: "12",
+                    children: [
+                        /*#__PURE__*/ (0, $7m476$jsx)("line", {
+                            x1: "0",
+                            y1: "6",
+                            x2: "100%",
+                            y2: "6",
+                            strokeWidth: "2",
+                            stroke: "currentColor"
+                        }),
+                        /*#__PURE__*/ (0, $7m476$jsx)("circle", {
+                            cx: "6",
+                            cy: "6",
+                            r: "5",
+                            strokeWidth: "2",
+                            stroke: "currentColor",
+                            style: {
+                                fill: 'var(--indicator-circle-bg)'
+                            }
+                        }),
+                        /*#__PURE__*/ (0, $7m476$jsx)("circle", {
+                            cx: "100%",
+                            cy: "6",
+                            r: "5",
+                            strokeWidth: "2",
+                            stroke: "currentColor",
+                            style: {
+                                fill: 'var(--indicator-circle-bg)'
+                            },
+                            transform: "translate(-6, 0)"
+                        })
+                    ]
+                })
+            })
+    });
+}
+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';
+    return rules;
+};
+function $3c1ab1fd8f31a3e2$export$4c99a519d851f90c({ isFocusVisibleWithin: isFocusVisibleWithin }) {
+    let { visuallyHiddenProps: visuallyHiddenProps } = (0, $7m476$useVisuallyHidden)();
+    return /*#__PURE__*/ (0, $7m476$jsx)((0, $7m476$Button), {
+        slot: "drag",
+        style: !isFocusVisibleWithin ? visuallyHiddenProps.style : {},
+        className: $3c1ab1fd8f31a3e2$var$dragButton,
+        children: /*#__PURE__*/ (0, $7m476$jsx)((0, $8b63ac1a4fa1df22$export$2e2bcd8739ae039), {
+            size: "M"
+        })
+    });
+}
+
+
+export {$3c1ab1fd8f31a3e2$export$2c0bab5914a9d088 as InsertionIndicator, $3c1ab1fd8f31a3e2$export$4c99a519d851f90c as DragHandleButton};
+//# sourceMappingURL=dnd-utils.mjs.map

package/dist/private/dnd-utils.mjs.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAUD,IAAI;;;;;;;;;;;;;;;;;;;;AA6BG,SAAS,0CAAmB,UAAC,MAAM,EAA2B;IACnE,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yBAAiB,MAAM,CAAC;IACrD,IAAI,QAAQ;IACZ,IAAI,OAAO,IAAI,KAAK,UAAU,WAAW,YACvC,QAAQ,UAAU,UAAU,CAAC,OAAO,CAAC,OAAO,GAAG,GAAG,SAAS;IAE7D,qBACE,gBAAC,CAAA,GAAA,oBAAY;QAAE,WAAU;QAAG,QAAQ;kBACjC,CAAC,gBAAC,YAAY,EAAC,iBACd,gBAAC;gBACC,WAAW,gDAA0B;kCAAC;oBAAc,QAAQ,UAAU;gBAAC;gBACvE,OAAO,QAAQ,IAAK;oBAAC,gBAAgB;gBAAK,IAA4B;0BACtE,cAAA,iBAAC;oBAAI,aAAW;oBAAC,OAAM;oBAAO,QAAO;;sCACnC,gBAAC;4BAAK,IAAG;4BAAI,IAAG;4BAAI,IAAG;4BAAO,IAAG;4BAAI,aAAY;4BAAI,QAAO;;sCAC5D,gBAAC;4BACC,IAAG;4BACH,IAAG;4BACH,GAAE;4BACF,aAAY;4BACZ,QAAO;4BACP,OAAO;gCAAC,MAAM;4BAA4B;;sCAE5C,gBAAC;4BACC,IAAG;4BACH,IAAG;4BACH,GAAE;4BACF,aAAY;4BACZ,QAAO;4BACP,OAAO;gCAAC,MAAM;4BAA4B;4BAC1C,WAAU;;;;;;AAOxB;AAEA,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BG,SAAS,0CAAiB,wBAAC,oBAAoB,EAAkC;IACtF,IAAI,uBAAC,mBAAmB,EAAC,GAAG,CAAA,GAAA,wBAAgB;IAC5C,qBACE,gBAAC,CAAA,GAAA,aAAK;QACJ,MAAK;QACL,OAAO,CAAC,uBAAuB,oBAAoB,KAAK,GAAG,CAAC;QAC5D,WAAW;kBACX,cAAA,gBAAC,CAAA,GAAA,wCAAS;YAAE,MAAK;;;AAGvB","sources":["packages/@react-spectrum/s2/src/dnd-utils.tsx"],"sourcesContent":["/*\n * Copyright 2026 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 {Button} from 'react-aria-components/Button';\nimport {DragAndDropContext, DropIndicator} from 'react-aria-components/useDragAndDrop';\nimport DragHandle from '../ui-icons/DragHandle';\nimport {ItemDropTarget} from '@react-types/shared';\nimport React, {useContext} from 'react';\nimport {style} from '../style' with {type: 'macro'};\nimport {useVisuallyHidden} from 'react-aria/VisuallyHidden';\n\nlet insertionIndicatorWrapper = style<{isDropTarget?: boolean; isRoot?: boolean}>({\n  position: 'absolute',\n  inset: 0,\n  display: 'flex',\n  alignItems: 'center',\n  marginStart: {\n    default: 'calc((var(--drop-level, 1) - 1) * var(--indent) + var(--indicator-level-padding))',\n    isRoot: 0\n  },\n  color: {\n    default: 'transparent',\n    isDropTarget: 'blue-800',\n    forcedColors: {\n      isDropTarget: 'Highlight'\n    }\n  },\n  '--indicator-circle-bg': {\n    type: 'backgroundColor',\n    value: {\n      default: 'transparent',\n      isDropTarget: 'gray-25',\n      forcedColors: {\n        isDropTarget: 'Background'\n      }\n    }\n  },\n  forcedColorAdjust: 'none'\n});\n\nexport function InsertionIndicator({target}: {target: ItemDropTarget}) {\n  let {dropState} = useContext(DragAndDropContext) ?? {};\n  let level = 0;\n  if (target.type === 'item' && dropState?.collection) {\n    level = dropState.collection.getItem(target.key)?.level ?? 0;\n  }\n  return (\n    <DropIndicator className=\"\" target={target}>\n      {({isDropTarget}) => (\n        <div\n          className={insertionIndicatorWrapper({isDropTarget, isRoot: level === 0})}\n          style={level > 0 ? ({'--drop-level': level} as React.CSSProperties) : undefined}>\n          <svg aria-hidden width=\"100%\" height=\"12\">\n            <line x1=\"0\" y1=\"6\" x2=\"100%\" y2=\"6\" strokeWidth=\"2\" stroke=\"currentColor\" />\n            <circle\n              cx=\"6\"\n              cy=\"6\"\n              r=\"5\"\n              strokeWidth=\"2\"\n              stroke=\"currentColor\"\n              style={{fill: 'var(--indicator-circle-bg)'}}\n            />\n            <circle\n              cx=\"100%\"\n              cy=\"6\"\n              r=\"5\"\n              strokeWidth=\"2\"\n              stroke=\"currentColor\"\n              style={{fill: 'var(--indicator-circle-bg)'}}\n              transform=\"translate(-6, 0)\"\n            />\n          </svg>\n        </div>\n      )}\n    </DropIndicator>\n  );\n}\n\nlet dragButton = style({\n  color: 'inherit',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  // TODO: arbitrary, basically taken from v3\n  height: 22,\n  width: 10,\n  padding: 0,\n  margin: 0,\n  backgroundColor: 'transparent',\n  borderStyle: 'none',\n  borderRadius: 'sm',\n  // TODO: this mimicks v3 too, do we want halo focus ring?\n  outlineStyle: {\n    default: 'none',\n    isFocusVisible: 'solid'\n  },\n  outlineColor: {\n    default: 'focus-ring',\n    forcedColors: 'Highlight'\n  },\n  outlineWidth: 2,\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nexport function DragHandleButton({isFocusVisibleWithin}: {isFocusVisibleWithin: boolean}) {\n  let {visuallyHiddenProps} = useVisuallyHidden();\n  return (\n    <Button\n      slot=\"drag\"\n      style={!isFocusVisibleWithin ? visuallyHiddenProps.style : {}}\n      className={dragButton}>\n      <DragHandle size=\"M\" />\n    </Button>\n  );\n}\n"],"names":[],"version":3,"file":"dnd-utils.mjs.map"}