@react-spectrum/s2 1.3.1 → 1.5.0

package/dist/private/ListView.css.map

@@ -1 +1 @@
-{"mappings":"ACgGwB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAcP;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyJA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmGS;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmKH;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAoDJ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;EAAA;;;;EAcM;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA2BP;;;;EAAA;;;;EAAA;;;;EAYN;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAWY;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQH;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAWI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiBK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAIJ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+JG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAhuBZ;EAAA;;;;EAyJA;;;;EAwUQ;;;;EAAA;;;;;AAjeR;EAAA;IAyJA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAmGS;;;;IAAA;;;;IAAA;;;;IAmKH;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAkEE;;;;;;AAdN;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAyCD;EAAA;IAAA;;;;IAuBM","sources":["e2ce191703de8ffa","packages/@react-spectrum/s2/src/ListView.tsx"],"sourcesContent":["@import \"3f8581bab720fddf\";\n@import \"5149dd545f2ca75b\";\n@import \"3bfaa79fe26b3e4a\";\n@import \"a2710ecb4235e93b\";\n@import \"cbaf9ab7ebdcc2c3\";\n@import \"518c9b9f23e30168\";\n@import \"17e02631dbba6d11\";\n@import \"5f67ba4c4d9794af\";\n@import \"d29455aaf76190bd\";\n@import \"8b98efb94d7e95c9\";\n@import \"265400103522970a\";\n@import \"c37809c9c9849f23\";\n@import \"b0a1afc94c9441bb\";\n@import \"ce48a94287f74351\";\n@import \"76b4e141f88b05d9\";\n@import \"8fc67ba2bc2378fa\";\n@import \"b6490df17f9984ea\";\n@import \"9d067a5a76537e57\";\n@import \"7263e735fc6809eb\";\n@import \"0c647a64abff12ea\";\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 {ActionButtonGroupContext} from './ActionButtonGroup';\nimport {ActionMenuContext} from './ActionMenu';\nimport {baseColor, colorMix, focusRing, fontRelative, space, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {Checkbox} from './Checkbox';\nimport {CheckboxContext} from 'react-aria-components/Checkbox';\nimport Chevron from '../ui-icons/Chevron';\nimport {Collection} from 'react-aria/Collection';\nimport {CollectionRendererContext, DefaultCollectionRenderer} from 'react-aria-components/CollectionBuilder';\nimport {ContextValue, DEFAULT_SLOT, Provider, SlotProps, useSlottedContext} from 'react-aria-components/slots';\nimport {controlFont, getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactElement, ReactNode, useContext, useRef} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue, forwardRefType, GlobalDOMAttributes, LoadingState} from '@react-types/shared';\nimport {edgeToText} from '../style/spectrum-theme' with {type: 'macro'};\nimport {\n  GridList,\n  GridListItem,\n  GridListItemProps,\n  GridListItemRenderProps,\n  GridListLoadMoreItem,\n  GridListProps,\n  GridListRenderProps\n} from 'react-aria-components/GridList';\nimport {IconContext} from './Icon';\nimport {ImageContext} from './Image';\nimport intlMessages from '../intl/*.json';\nimport {Key} from '@react-types/shared';\nimport LinkOutIcon from '../ui-icons/LinkOut';\nimport {ListLayout} from 'react-stately/useVirtualizerState';\n// @ts-ignore\nimport {ListState} from 'react-stately/useListState';\nimport {ProgressCircle} from './ProgressCircle';\nimport {Text, TextContext} from './Content';\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 {useSpectrumContextProps} from './useSpectrumContextProps';\nimport {Virtualizer} from 'react-aria-components/Virtualizer';\n\nexport interface ListViewProps<T> extends Omit<GridListProps<T>, 'className' | 'style' | 'children' | 'selectionBehavior' | 'dragAndDropHooks' | 'layout' | 'render' | 'keyboardNavigationBehavior' | 'orientation' | keyof GlobalDOMAttributes>, DOMProps, UnsafeStyles, ListViewStylesProps, SlotProps {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight,\n  /** The current loading state of the ListView. */\n  loadingState?: LoadingState,\n  /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */\n  onLoadMore?: () => void,\n  /** The children of the ListView. */\n  children: ReactNode | ((item: T) => ReactNode),\n  /** Provides the ActionBar to display when items are selected in the ListView. */\n  renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement,\n  /** Hides the default link out icons on items that open links in a new tab. */\n  hideLinkOutIcon?: boolean\n}\n\ninterface ListViewStylesProps {\n  /** Whether the ListView should be displayed with a quiet style. */\n  isQuiet?: boolean,\n  /**\n   * How selection should be displayed.\n   * @default 'checkbox'\n   */\n  selectionStyle?: 'highlight' | 'checkbox',\n  /**\n   * Sets the overflow behavior for item contents.\n   * @default 'truncate'\n   */\n  overflowMode?: 'wrap' | 'truncate'\n}\n\nexport interface ListViewItemProps extends Omit<GridListItemProps, 'children' | 'className' | 'style' | 'render' | 'onClick' | keyof GlobalDOMAttributes> {\n  /**\n   * The contents of the item.\n   */\n  children: ReactNode,\n  /** Whether the item has child items (renders a chevron indicator). */\n  hasChildItems?: boolean\n}\n\nexport const ListViewContext = createContext<ContextValue<Partial<ListViewProps<any>>, DOMRefValue<HTMLDivElement>>>(null);\n\nlet InternalListViewContext = createContext<{isQuiet?: boolean, selectionStyle?: 'highlight' | 'checkbox', overflowMode?: 'wrap' | 'truncate', scale?: 'medium' | 'large', hideLinkOutIcon?: boolean}>({});\n\nconst listViewWrapper = style({\n  minHeight: 0,\n  minWidth: 200,\n  display: 'flex',\n  isolation: 'isolate',\n  disableTapHighlight: true,\n  position: 'relative',\n  // Clip ActionBar animation.\n  overflow: 'clip'\n}, getAllowedOverrides({height: true}));\n\n// When any row has a trailing icon, reserve space so actions align.\nconst hasTrailingIconRows = ':has([data-has-trailing-icon]) [role=\"row\"]';\n\nconst listView = style<GridListRenderProps & {isQuiet?: boolean}>({\n  ...focusRing(),\n  outlineOffset: {\n    default: -2,\n    isQuiet: -1\n  },\n  userSelect: 'none',\n  minHeight: 0,\n  minWidth: 0,\n  width: 'full',\n  height: 'full',\n  boxSizing: 'border-box',\n  overflow: 'auto',\n  fontSize: controlFont(),\n  backgroundColor: {\n    default: 'gray-25',\n    isQuiet: 'transparent',\n    forcedColors: 'Background'\n  },\n  borderRadius: {\n    default: 'default',\n    isQuiet: 'none'\n  },\n  borderColor: 'gray-300',\n  borderWidth: {\n    default: 1,\n    isQuiet: 0\n  },\n  borderStyle: 'solid',\n  '--trailing-icon-width': {\n    type: 'width',\n    value: {\n      default: 'auto',\n      [hasTrailingIconRows]: fontRelative(20)\n    }\n  }\n});\n\n/**\n * A ListView displays a list of interactive items, and allows a user to navigate, select, or perform an action.\n */\nexport const ListView = /*#__PURE__*/ (forwardRef as forwardRefType)(function ListView<T extends object>(\n  props: ListViewProps<T>,\n  ref: DOMRef<HTMLDivElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, ListViewContext);\n  let {children, isQuiet, selectionStyle = 'checkbox', overflowMode = 'truncate', loadingState, onLoadMore, renderEmptyState: userRenderEmptyState, hideLinkOutIcon = false, ...otherProps} = props;\n  let scale = useScale();\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let rowHeight = scale === 'large' ? 50 : 40;\n\n  let domRef = useDOMRef(ref);\n  let scrollRef = useRef<HTMLElement | null>(null);\n\n  let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';\n  let renderEmptyState: ListViewProps<T>['renderEmptyState'] | undefined;\n  if (userRenderEmptyState != null && !isLoading) {\n    renderEmptyState = (renderProps) => (\n      <div className={emptyStateWrapper}>\n        <CollectionRendererContext.Provider value={DefaultCollectionRenderer}>\n          {userRenderEmptyState!(renderProps)}\n        </CollectionRendererContext.Provider>\n      </div>\n    );\n  } else if (loadingState === 'loading') {\n    renderEmptyState = () => (\n      <div className={centeredWrapper}>\n        <div className={loadingSpinnerWrapper}>\n          <ProgressCircle\n            isIndeterminate\n            aria-label={stringFormatter.format('table.loading')} />\n        </div>\n      </div>\n    );\n  }\n\n  let loadMoreSpinner = onLoadMore ? (\n    <GridListLoadMoreItem isLoading={loadingState === 'loadingMore'} onLoadMore={onLoadMore} className={style({height: 'full', width: 'full', paddingY: 8})}>\n      <div className={centeredWrapper}>\n        <div className={loadingSpinnerWrapper}>\n          <ProgressCircle\n            isIndeterminate\n            aria-label={stringFormatter.format('table.loadingMore')} />\n        </div>\n      </div>\n    </GridListLoadMoreItem>\n  ) : null;\n\n  let wrappedChildren: ReactNode;\n  let gridListProps = otherProps;\n  if (typeof children === 'function' && otherProps.items) {\n    let {items, dependencies = [], ...rest} = otherProps;\n    gridListProps = rest;\n    wrappedChildren = (\n      <>\n        <Collection items={items} dependencies={dependencies}>\n          {children}\n        </Collection>\n        {loadMoreSpinner}\n      </>\n    );\n  } else {\n    wrappedChildren = (\n      <>\n        {children}\n        {loadMoreSpinner}\n      </>\n    );\n  }\n\n  let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({...props, scrollRef});\n\n  return (\n    <div\n      ref={domRef}\n      className={(props.UNSAFE_className || '') + listViewWrapper(null, props.styles)}\n      style={props.UNSAFE_style}>\n      <Virtualizer\n        layout={ListLayout}\n        layoutOptions={{\n          estimatedRowHeight: rowHeight,\n          loaderHeight: 60\n        }}>\n        <InternalListViewContext.Provider value={{isQuiet, selectionStyle, overflowMode, scale, hideLinkOutIcon}}>\n          <GridList\n            ref={scrollRef as any}\n            {...gridListProps}\n            selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}\n            selectionMode={gridListProps.selectionMode}\n            renderEmptyState={renderEmptyState}\n            style={{\n              paddingBottom: actionBarHeight > 0 ? actionBarHeight + 8 : 0,\n              scrollPaddingBottom: actionBarHeight > 0 ? actionBarHeight + 8 : 0\n            }}\n            className={(renderProps) => listView({\n              ...renderProps,\n              isQuiet\n            })}\n            selectedKeys={selectedKeys}\n            defaultSelectedKeys={undefined}\n            onSelectionChange={onSelectionChange}>\n            {wrappedChildren}\n          </GridList>\n        </InternalListViewContext.Provider>\n      </Virtualizer>\n      {actionBar}\n    </div>\n  );\n});\n\nconst selectedBackground = colorMix('gray-25', 'gray-900', 7);\nconst selectedActiveBackground = colorMix('gray-25', 'gray-900', 10);\n\nconst listitem = style<GridListItemRenderProps & {\n  isFocused: boolean,\n  isLink?: boolean,\n  isQuiet?: boolean,\n  isFirstItem?: boolean,\n  isLastItem?: boolean,\n  isSelected?: boolean,\n  isDisabled?: boolean,\n  isNextSelected?: boolean,\n  isPrevSelected?: boolean,\n  isPrevNotSelected?: boolean,\n  isNextNotSelected?: boolean,\n  selectionStyle?: 'highlight' | 'checkbox',\n  scale?: 'medium' | 'large'\n}>({\n  outlineStyle: 'none',\n  boxSizing: 'border-box',\n  columnGap: 0,\n  paddingX: 0,\n  paddingY: 8,\n  backgroundColor: 'transparent',\n  color: {\n    default: baseColor('neutral-subdued'),\n    isSelected: baseColor('neutral'),\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      selectionStyle: {\n        highlight: {\n          isSelected: 'HighlightText'\n        }\n      },\n      isDisabled: 'GrayText'\n    }\n  },\n  position: 'relative',\n  gridColumnStart: 1,\n  gridColumnEnd: -1,\n  display: 'grid',\n  gridTemplateAreas: [\n    '. checkmark icon label       actions actionmenu trailing-icon .',\n    '. .         .    description actions actionmenu trailing-icon .'\n  ],\n  gridTemplateColumns: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'var(--trailing-icon-width)', edgeToText(40)],\n  gridTemplateRows: '1fr auto',\n  rowGap: {\n    ':has([slot=description])': space(1)\n  },\n  alignItems: 'baseline',\n  minHeight: {\n    default: 40,\n    scale: {\n      large: 50\n    }\n  },\n  textDecoration: 'none',\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  '--borderColor': {\n    type: 'borderColor',\n    value: {\n      default: 'gray-300',\n      isSelected: {\n        selectionStyle: {\n          highlight: 'blue-900',\n          checkbox: 'gray-300'\n        }\n      },\n      forcedColors: 'ButtonBorder'\n    }\n  },\n  borderTopWidth: 0,\n  borderBottomWidth: {\n    default: 1,\n    isLastItem: {\n      default: 1,\n      isQuiet: 0\n    }\n  },\n  borderStartWidth: 0,\n  borderEndWidth: 0,\n  borderStyle: 'solid',\n  borderColor: {\n    default: '--borderColor',\n    isNextSelected: 'transparent',\n    isSelected: 'transparent',\n    forcedColors: 'ButtonBorder'\n  },\n  '--radius': {\n    type: 'borderTopStartRadius',\n    value: 'default'\n  },\n  forcedColorAdjust: 'none'\n});\n\nconst insetBorderRadius = 'calc(var(--radius) - 1px)';\n\nconst listRowBackground = style<GridListItemRenderProps & {\n  isFirstItem?: boolean,\n  isLastItem?: boolean,\n  isQuiet?: boolean,\n  isPrevSelected?: boolean,\n  isNextSelected?: boolean,\n  isPrevNotSelected?: boolean,\n  isNextNotSelected?: boolean,\n  selectionStyle?: 'highlight' | 'checkbox'\n}>({\n  position: 'absolute',\n  zIndex: -1,\n  top: {\n    default: 0,\n    isSelected: '[-1px]',\n    // Don't overlap focus ring of row above.\n    isPrevSelected: 0,\n    isFirstItem: 0,\n    forcedColors: 0\n  },\n  left: 0,\n  right: 0,\n  bottom: {\n    default: 0,\n    isSelected: '[-1px]'\n  },\n  backgroundColor: {\n    default: '--rowBackgroundColor',\n    isHovered: {\n      default: 'gray-900/5',\n      selectionStyle: {\n        checkbox: selectedBackground\n      }\n    },\n    isPressed: {\n      default: 'gray-900/10',\n      selectionStyle: {\n        checkbox: selectedActiveBackground\n      }\n    },\n    isSelected: {\n      selectionStyle: {\n        checkbox: {\n          default: selectedBackground,\n          isHovered: selectedActiveBackground,\n          isPressed: selectedActiveBackground,\n          isFocusVisible: selectedActiveBackground\n        },\n        highlight: {\n          // Use solid colors rather than transparent because the rows overlap.\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        }\n      }\n    },\n    forcedColors: {\n      default: 'Background',\n      selectionStyle: {\n        highlight: {\n          isSelected: 'Highlight'\n        }\n      }\n    }\n  },\n  borderTopStartRadius: {\n    isQuiet: 'default',\n    isSelected: 'none',\n    isPrevNotSelected: {\n      isSelected: {\n        selectionStyle: {\n          checkbox: 'none',\n          highlight: insetBorderRadius\n        }\n      },\n      isQuiet: 'default'\n    }\n  },\n  borderTopEndRadius: {\n    isQuiet: 'default',\n    isSelected: 'none',\n    isPrevNotSelected: {\n      isSelected: {\n        selectionStyle: {\n          checkbox: 'none',\n          highlight: insetBorderRadius\n        }\n      },\n      isQuiet: 'default'\n    }\n  },\n  borderBottomStartRadius: {\n    isQuiet: 'default',\n    isSelected: 'none',\n    isNextNotSelected: {\n      isSelected: {\n        selectionStyle: {\n          checkbox: 'none',\n          highlight: insetBorderRadius\n        }\n      },\n      isQuiet: 'default'\n    }\n  },\n  borderBottomEndRadius: {\n    isQuiet: 'default',\n    isSelected: 'none',\n    isNextNotSelected: {\n      isSelected: {\n        selectionStyle: {\n          checkbox: 'none',\n          highlight: insetBorderRadius\n        }\n      },\n      isQuiet: 'default'\n    }\n  },\n  borderTopWidth: {\n    default: {\n      selectionStyle: {\n        checkbox: 0,\n        highlight: 1\n      }\n    },\n    isPrevSelected: 0\n  },\n  borderBottomWidth: {\n    default: {\n      selectionStyle: {\n        checkbox: 0,\n        highlight: 1\n      }\n    },\n    isNextSelected: 0\n  },\n  borderStartWidth: {\n    default: {\n      selectionStyle: {\n        checkbox: 0,\n        highlight: 1\n      }\n    }\n  },\n  borderEndWidth: {\n    default: {\n      selectionStyle: {\n        checkbox: 0,\n        highlight: 1\n      }\n    }\n  },\n  borderStyle: 'solid',\n  borderColor: {\n    default: 'transparent',\n    isSelected: {\n      selectionStyle: {\n        checkbox: 'transparent',\n        highlight: '--borderColor'\n      }\n    }\n  }\n});\n\nlet listRowFocusRing = style<GridListItemRenderProps & {\n  selectionStyle?: 'highlight' | 'checkbox',\n  isFirstItem?: boolean,\n  isPrevSelected?: boolean,\n  isPrevNotSelected?: boolean,\n  isNextSelected?: boolean,\n  isNextNotSelected?: boolean,\n  isLastItem?: boolean,\n  isQuiet?: boolean\n}>({\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: {\n      default: 'Highlight',\n      selectionStyle: {\n        highlight: '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: {\n        default: '[-1px]',\n        // Avoid the next row's selected background covering this row's focus ring.\n        isNextSelected: 0\n      },\n      highlight: '[-1px]'\n    }\n  },\n  borderRadius: {\n    default: insetBorderRadius,\n    isQuiet: 'default'\n  },\n  zIndex: 1,\n  pointerEvents: 'none'\n});\n\nexport let label = style({\n  gridArea: 'label',\n  alignSelf: 'center',\n  font: controlFont(),\n  color: 'inherit',\n  truncate: true,\n  whiteSpace: {\n    default: 'nowrap',\n    overflowMode: {\n      wrap: 'normal'\n    }\n  }\n});\n\nexport let description = style({\n  gridArea: 'description',\n  alignSelf: 'center',\n  truncate: true,\n  whiteSpace: {\n    default: 'nowrap',\n    overflowMode: {\n      wrap: 'normal'\n    }\n  },\n  font: 'ui-sm',\n  color: {\n    default: baseColor('neutral-subdued'),\n    isDisabled: 'disabled',\n    forcedColors: 'inherit'\n  },\n  transition: 'default'\n});\n\nexport let iconCenterWrapper = style({\n  display: 'flex',\n  gridArea: 'icon',\n  gridRowEnd: 'span 2',\n  alignSelf: 'center',\n  alignItems: 'center'\n});\n\nexport let icon = style({\n  display: 'block',\n  size: fontRelative(20),\n  // too small default icon size is wrong, it's like the icons are 1 tshirt size bigger than the rest of the component? check again after typography changes\n  // reminder, size of WF is applied via font size\n  marginEnd: 'text-to-visual',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nlet image = style({\n  gridArea: 'icon',\n  gridRowEnd: 'span 2',\n  marginEnd: 'text-to-visual',\n  alignSelf: 'center',\n  borderRadius: 'sm',\n  width: 32,\n  aspectRatio: 'square',\n  objectFit: 'cover'\n});\n\nlet actionButtonGroup = style({\n  gridArea: 'actions',\n  gridRowEnd: 'span 2',\n  alignSelf: 'center',\n  justifySelf: 'end',\n  marginStart: 'text-to-visual'\n});\n\nlet listActionMenu = style({\n  gridArea: 'actionmenu',\n  gridRowEnd: 'span 2',\n  alignSelf: 'center'\n});\n\nconst listCheckbox = style({\n  gridArea: 'checkmark',\n  gridRowEnd: 'span 2',\n  alignSelf: 'center',\n  marginEnd: 8,\n  visibility: {\n    default: 'visible',\n    isDisabled: 'hidden'\n  }\n});\n\nconst listTrailingIcon = style({\n  gridArea: 'trailing-icon',\n  gridRowEnd: 'span 2',\n  alignSelf: 'center',\n  display: 'flex',\n  alignItems: 'center',\n  marginStart: 'text-to-visual'\n});\n\nconst centeredWrapper = style({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 'full',\n  height: 'full'\n});\n\nconst loadingSpinnerWrapper = style({\n  padding: space(4)\n});\n\nconst emptyStateWrapper = style({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 'full',\n  height: 'full',\n  boxSizing: 'border-box',\n  padding: 16\n});\n\nfunction ListSelectionCheckbox({isDisabled}: {isDisabled: boolean}) {\n  let selectionContext = useSlottedContext(CheckboxContext, 'selection');\n  let isSelectionDisabled = isDisabled || !!selectionContext?.isDisabled;\n  return (\n    <div className={listCheckbox({isDisabled: isSelectionDisabled})}>\n      <Checkbox slot=\"selection\" />\n    </div>\n  );\n}\n\nfunction isNextSelected(id: Key | undefined, state: ListState<unknown>) {\n  if (id == null || !state) {\n    return false;\n  }\n  let keyAfter = state.collection.getKeyAfter(id);\n  return keyAfter != null && state.selectionManager.isSelected(keyAfter);\n}\nexport function isPrevSelected(id: Key | undefined, state: ListState<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\nexport function isFirstItem(id: Key | undefined, state: ListState<unknown>) {\n  if (id == null || !state) {\n    return false;\n  }\n  return state.collection.getFirstKey() === id;\n}\nfunction isLastItem(id: Key | undefined, state: ListState<unknown>) {\n  if (id == null || !state) {\n    return false;\n  }\n  return state.collection.getLastKey() === id;\n}\n\nexport function ListViewItem(props: ListViewItemProps): ReactNode {\n  let ref = useRef(null);\n  let {hasChildItems, ...otherProps} = props;\n  let isLink = props.href != null;\n  let isLinkOut = isLink && props.target === '_blank';\n  let {isQuiet, selectionStyle, overflowMode, scale, hideLinkOutIcon = false} = useContext(InternalListViewContext);\n  let textValue = props.textValue || (typeof props.children === 'string' ? props.children : undefined);\n  let {direction} = useLocale();\n  let hasTrailingIcon = hasChildItems || (isLinkOut && !hideLinkOutIcon);\n\n  return (\n    <GridListItem\n      {...otherProps}\n      textValue={textValue}\n      ref={ref}\n      {...(hasTrailingIcon ? {'data-has-trailing-icon': ''} : {})}\n      className={renderProps => listitem({\n        ...renderProps,\n        isLink,\n        isQuiet,\n        scale,\n        selectionStyle,\n        isPrevNotSelected: !isPrevSelected(renderProps.id, renderProps.state),\n        isNextSelected: isNextSelected(renderProps.id, renderProps.state),\n        isNextNotSelected: !isNextSelected(renderProps.id, renderProps.state),\n        isFirstItem: isFirstItem(renderProps.id, renderProps.state),\n        isLastItem: isLastItem(renderProps.id, renderProps.state)\n      })}>\n      {(renderProps) => {\n        let {children} = props;\n        let {selectionMode, selectionBehavior, isDisabled, id, state} = renderProps;\n        return (\n          <Provider\n            values={[\n              [TextContext, {\n                slots: {\n                  [DEFAULT_SLOT]: {styles: label({...renderProps, overflowMode})},\n                  label: {styles: label({...renderProps, overflowMode})},\n                  description: {styles: description({...renderProps, overflowMode})}\n                }\n              }],\n              [IconContext, {\n                slots: {\n                  icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}\n                }\n              }],\n              [ImageContext, {styles: image}],\n              [ActionButtonGroupContext, {\n                styles: actionButtonGroup,\n                size: 'S',\n                isQuiet: true\n              }],\n              [ActionMenuContext, {\n                styles: listActionMenu,\n                isQuiet: true,\n                size: 'S',\n                isDisabled\n              }]\n            ]}>\n            <div\n              className={\n                listRowBackground({\n                  ...renderProps,\n                  selectionStyle,\n                  isQuiet,\n                  isPrevSelected: isPrevSelected(id, state),\n                  isNextSelected: isNextSelected(id, state),\n                  isPrevNotSelected: !isPrevSelected(id, state),\n                  isNextNotSelected: !isNextSelected(id, state),\n                  isFirstItem: isFirstItem(id, state),\n                  isLastItem: isLastItem(id, state)\n                })\n              } />\n            {renderProps.isFocusVisible &&\n              <div\n                className={listRowFocusRing({\n                  ...renderProps,\n                  selectionStyle,\n                  isQuiet,\n                  isPrevSelected: isPrevSelected(id, state),\n                  isNextSelected: isNextSelected(id, state),\n                  isPrevNotSelected: !isPrevSelected(id, state),\n                  isNextNotSelected: !isNextSelected(id, state),\n                  isFirstItem: isFirstItem(id, state),\n                  isLastItem: isLastItem(id, state)\n                })} />\n            }\n            {selectionMode !== 'none' && selectionBehavior === 'toggle' && (\n              <ListSelectionCheckbox isDisabled={isDisabled} />\n            )}\n            {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n            {isLinkOut && !hideLinkOutIcon && (\n              <div className={listTrailingIcon}>\n                <LinkOutIcon\n                  size=\"M\"\n                  className={style({\n                    scaleX: {\n                      direction: {\n                        rtl: -1\n                      }\n                    },\n                    '--iconPrimary': {\n                      type: 'fill',\n                      value: 'currentColor'\n                    }\n                  })({direction})} />\n              </div>\n            )}\n            {hasChildItems && !isLinkOut && (\n              <div className={listTrailingIcon}>\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              </div>\n            )}\n          </Provider>\n        );\n      }}\n    </GridListItem>\n  );\n}\n"],"names":[],"version":3,"file":"ListView.css.map"}
+{"mappings":"AC2JwB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAqBA;IAAA;;;;;;;;;;IAAA;MAAA;;;;;;EAqBP;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiNA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAqIS;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAoLH;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsDN;;;;EAIL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAWY;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQH;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAWI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EASC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiBI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAIJ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA2KK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAjzBd;EAAA;;;;EAiNA;;;;;AAjNA;EAAA;IAiNA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAqIS;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAoLH;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AApLG;EAAA;;;;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;;;AA8Od;EAAA;IAAA;;;;IAWY","sources":["e2ce191703de8ffa","packages/@react-spectrum/s2/src/ListView.tsx"],"sourcesContent":["@import \"3f8581bab720fddf\";\n@import \"5149dd545f2ca75b\";\n@import \"3bfaa79fe26b3e4a\";\n@import \"a2710ecb4235e93b\";\n@import \"cbaf9ab7ebdcc2c3\";\n@import \"518c9b9f23e30168\";\n@import \"17e02631dbba6d11\";\n@import \"5f67ba4c4d9794af\";\n@import \"d29455aaf76190bd\";\n@import \"8b98efb94d7e95c9\";\n@import \"265400103522970a\";\n@import \"c37809c9c9849f23\";\n@import \"b0a1afc94c9441bb\";\n@import \"ce48a94287f74351\";\n@import \"76b4e141f88b05d9\";\n@import \"8fc67ba2bc2378fa\";\n@import \"b6490df17f9984ea\";\n@import \"9d067a5a76537e57\";\n@import \"7263e735fc6809eb\";\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 {ActionButtonGroupContext} from './ActionButtonGroup';\nimport {ActionMenuContext} from './ActionMenu';\nimport {\n  baseColor,\n  color,\n  colorMix,\n  focusRing,\n  fontRelative,\n  space,\n  style\n} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {Checkbox} from './Checkbox';\nimport {CheckboxContext} from 'react-aria-components/Checkbox';\nimport Chevron from '../ui-icons/Chevron';\nimport {Collection} from 'react-aria/Collection';\nimport {\n  CollectionRendererContext,\n  DefaultCollectionRenderer\n} from 'react-aria-components/CollectionBuilder';\nimport {\n  ContextValue,\n  DEFAULT_SLOT,\n  Provider,\n  SlotProps,\n  useSlottedContext\n} from 'react-aria-components/slots';\nimport {\n  controlFont,\n  getAllowedOverrides,\n  StylesPropWithHeight,\n  UnsafeStyles\n} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactElement, ReactNode, useContext, useRef} from 'react';\nimport {css} from '../style/style-macro' with {type: 'macro'};\nimport {description, DragPreview, icon, iconCenterWrapper, label} from './DragPreview';\nimport {\n  DOMProps,\n  DOMRef,\n  DOMRefValue,\n  forwardRefType,\n  GlobalDOMAttributes,\n  ItemDropTarget,\n  LoadingState\n} from '@react-types/shared';\nimport {DragHandleButton, InsertionIndicator} from './dnd-utils';\nimport {\n  GridList,\n  GridListItem,\n  GridListItemProps,\n  GridListItemRenderProps,\n  GridListLoadMoreItem,\n  GridListProps,\n  GridListRenderProps\n} from 'react-aria-components/GridList';\nimport {IconContext} from './Icon';\nimport {ImageContext} from './Image';\nimport intlMessages from '../intl/*.json';\nimport {Key} from '@react-types/shared';\nimport {LayoutInfo, Virtualizer} from 'react-aria-components/Virtualizer';\nimport LinkOutIcon from '../ui-icons/LinkOut';\nimport {ListLayout} from 'react-stately/useVirtualizerState';\nimport type {ListState} from 'react-stately/useListState';\nimport {ProgressCircle} from './ProgressCircle';\nimport {Text, TextContext} from './Content';\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 {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ListViewProps<T>\n  extends\n    Omit<\n      GridListProps<T>,\n      | 'className'\n      | 'style'\n      | 'children'\n      | 'selectionBehavior'\n      | 'layout'\n      | 'render'\n      | 'orientation'\n      | keyof GlobalDOMAttributes\n    >,\n    DOMProps,\n    UnsafeStyles,\n    ListViewStylesProps,\n    SlotProps {\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight;\n  /** The current loading state of the ListView. */\n  loadingState?: LoadingState;\n  /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */\n  onLoadMore?: () => void;\n  /** The children of the ListView. */\n  children: ReactNode | ((item: T) => ReactNode);\n  /** Provides the ActionBar to display when items are selected in the ListView. */\n  renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement;\n  /** Hides the default link out icons on items that open links in a new tab. */\n  hideLinkOutIcon?: boolean;\n}\n\ninterface ListViewStylesProps {\n  /** Whether the ListView should be displayed with a quiet style. */\n  isQuiet?: boolean;\n  /**\n   * How selection should be displayed.\n   *\n   * @default 'checkbox'\n   */\n  selectionStyle?: 'highlight' | 'checkbox';\n  /**\n   * Sets the overflow behavior for item contents.\n   *\n   * @default 'truncate'\n   */\n  overflowMode?: 'wrap' | 'truncate';\n}\n\nexport interface ListViewItemProps extends Omit<\n  GridListItemProps,\n  'children' | 'className' | 'style' | 'render' | 'onClick' | keyof GlobalDOMAttributes\n> {\n  /**\n   * The contents of the item.\n   */\n  children: ReactNode;\n  /** Whether the item has child items (renders a chevron indicator). */\n  hasChildItems?: boolean;\n}\n\nexport const ListViewContext =\n  createContext<ContextValue<Partial<ListViewProps<any>>, DOMRefValue<HTMLDivElement>>>(null);\n\nlet InternalListViewContext = createContext<{\n  isQuiet?: boolean;\n  selectionStyle?: 'highlight' | 'checkbox';\n  overflowMode?: 'wrap' | 'truncate';\n  scale?: 'medium' | 'large';\n  hideLinkOutIcon?: boolean;\n}>({});\n\nconst listViewWrapper = style(\n  {\n    minHeight: 0,\n    minWidth: 200,\n    display: 'flex',\n    isolation: 'isolate',\n    disableTapHighlight: true,\n    position: 'relative',\n    // Clip ActionBar animation.\n    overflow: 'clip',\n    '--root-drop-radius': {\n      type: 'borderTopStartRadius',\n      value: 'default'\n    }\n  },\n  getAllowedOverrides({height: true})\n);\n\n// similar to tableview, use this approach so we can actually have a 2px outline when root dropping.\n// cant do a external box shadow due to the clipping that is applied on the wrapper element...\n// an inset box shadow runs into problems with the item background clipping the box shadow...\nconst rootDropOutline = css(`\n  &:has([role=\"grid\"][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=\"grid\"][data-drop-target])::after {\n      border-color: Highlight;\n    }\n  }\n`);\n\n// When any row has a trailing icon, reserve space so actions align.\nconst hasTrailingIconRows = ':has([data-has-trailing-icon]) [role=\"row\"]';\n\nconst dropTargetBackground = colorMix('gray-25', 'blue-900', 10);\nconst listView = style<GridListRenderProps & {isQuiet?: boolean; isDropTarget?: boolean}>({\n  ...focusRing(),\n  outlineOffset: {\n    default: -2,\n    isQuiet: -1\n  },\n  userSelect: 'none',\n  minHeight: 0,\n  minWidth: 0,\n  width: 'full',\n  height: 'full',\n  boxSizing: 'border-box',\n  overflow: 'auto',\n  fontSize: controlFont(),\n  backgroundColor: {\n    default: 'gray-25',\n    isQuiet: 'transparent',\n    isDropTarget: {\n      default: dropTargetBackground,\n      forcedColors: 'Background'\n    }\n  },\n  borderRadius: {\n    default: 'default',\n    isQuiet: 'none'\n  },\n  borderColor: {\n    default: 'gray-300',\n    forcedColors: 'ButtonBorder'\n  },\n  borderWidth: {\n    default: 1,\n    isQuiet: 0\n  },\n  borderStyle: 'solid',\n  forcedColorAdjust: 'none',\n  '--trailing-icon-width': {\n    type: 'width',\n    value: {\n      default: 'auto',\n      [hasTrailingIconRows]: fontRelative(20)\n    }\n  }\n});\n\nexport class S2ListLayout<T> extends ListLayout<T> {\n  getDropTargetLayoutInfo(target: ItemDropTarget): LayoutInfo {\n    let layoutInfo = super.getDropTargetLayoutInfo(target);\n    layoutInfo.zIndex = 1;\n    layoutInfo.allowOverflow = true;\n    return layoutInfo;\n  }\n}\n\n/**\n * A ListView displays a list of interactive items, and allows a user to navigate, select, or\n * perform an action.\n */\nexport const ListView = /*#__PURE__*/ (forwardRef as forwardRefType)(function ListView<T>(\n  props: ListViewProps<T>,\n  ref: DOMRef<HTMLDivElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, ListViewContext);\n  let {\n    children,\n    isQuiet,\n    selectionStyle = 'checkbox',\n    overflowMode = 'truncate',\n    loadingState,\n    onLoadMore,\n    renderEmptyState: userRenderEmptyState,\n    hideLinkOutIcon = false,\n    dragAndDropHooks,\n    ...otherProps\n  } = props;\n  let scale = useScale();\n\n  if (dragAndDropHooks && dragAndDropHooks.renderDragPreview == null) {\n    dragAndDropHooks.renderDragPreview = items => (\n      <DragPreview items={items} overflowMode={overflowMode} />\n    );\n  }\n\n  if (dragAndDropHooks) {\n    dragAndDropHooks.renderDropIndicator = target => (\n      <InsertionIndicator target={target as ItemDropTarget} />\n    );\n  }\n\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let rowHeight = scale === 'large' ? 50 : 40;\n\n  let domRef = useDOMRef(ref);\n  let scrollRef = useRef<HTMLElement | null>(null);\n\n  let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';\n  let renderEmptyState: ListViewProps<T>['renderEmptyState'] | undefined;\n  if (userRenderEmptyState != null && !isLoading) {\n    renderEmptyState = renderProps => (\n      <div className={emptyStateWrapper}>\n        <CollectionRendererContext.Provider value={DefaultCollectionRenderer}>\n          {userRenderEmptyState!(renderProps)}\n        </CollectionRendererContext.Provider>\n      </div>\n    );\n  } else if (loadingState === 'loading') {\n    renderEmptyState = () => (\n      <div className={centeredWrapper}>\n        <div className={loadingSpinnerWrapper}>\n          <ProgressCircle isIndeterminate aria-label={stringFormatter.format('table.loading')} />\n        </div>\n      </div>\n    );\n  }\n\n  let loadMoreSpinner = onLoadMore ? (\n    <GridListLoadMoreItem\n      isLoading={loadingState === 'loadingMore'}\n      onLoadMore={onLoadMore}\n      className={style({height: 'full', width: 'full', paddingY: 8})}>\n      <div className={centeredWrapper}>\n        <div className={loadingSpinnerWrapper}>\n          <ProgressCircle\n            isIndeterminate\n            aria-label={stringFormatter.format('table.loadingMore')}\n          />\n        </div>\n      </div>\n    </GridListLoadMoreItem>\n  ) : null;\n\n  let wrappedChildren: ReactNode;\n  let gridListProps = otherProps;\n  if (typeof children === 'function' && otherProps.items) {\n    let {items, dependencies = [], ...rest} = otherProps;\n    gridListProps = rest;\n    wrappedChildren = (\n      <>\n        <Collection items={items} dependencies={dependencies}>\n          {children}\n        </Collection>\n        {loadMoreSpinner}\n      </>\n    );\n  } else {\n    wrappedChildren = (\n      <>\n        {children}\n        {loadMoreSpinner}\n      </>\n    );\n  }\n\n  let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({\n    ...props,\n    scrollRef\n  });\n\n  return (\n    <div\n      ref={domRef}\n      className={\n        (props.UNSAFE_className || '') + listViewWrapper(null, props.styles) + ' ' + rootDropOutline\n      }\n      style={props.UNSAFE_style}>\n      <Virtualizer\n        layout={S2ListLayout}\n        layoutOptions={{\n          estimatedRowHeight: rowHeight,\n          loaderHeight: 60,\n          dropIndicatorThickness: 0\n        }}>\n        <InternalListViewContext.Provider\n          value={{isQuiet, selectionStyle, overflowMode, scale, hideLinkOutIcon}}>\n          <GridList\n            ref={scrollRef as any}\n            {...gridListProps}\n            dragAndDropHooks={dragAndDropHooks}\n            selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}\n            selectionMode={gridListProps.selectionMode}\n            renderEmptyState={renderEmptyState}\n            style={{\n              paddingBottom: actionBarHeight > 0 ? actionBarHeight + 8 : 0,\n              scrollPaddingBottom: actionBarHeight > 0 ? actionBarHeight + 8 : 0\n            }}\n            className={renderProps =>\n              listView({\n                ...renderProps,\n                isQuiet,\n                isDropTarget: renderProps.isDropTarget\n              })\n            }\n            selectedKeys={selectedKeys}\n            defaultSelectedKeys={undefined}\n            onSelectionChange={onSelectionChange}>\n            {wrappedChildren}\n          </GridList>\n        </InternalListViewContext.Provider>\n      </Virtualizer>\n      {actionBar}\n    </div>\n  );\n});\n\nconst selectedBackground = colorMix('gray-25', 'gray-900', 7);\nconst selectedActiveBackground = colorMix('gray-25', 'gray-900', 10);\n\n// TODO: removed the background color in HCM for highlight selection since it made it hard to see the focus\n// ring of the drag button, this matches v3 anyways. thoughts?\nconst listitem = style<\n  GridListItemRenderProps & {\n    isFocused: boolean;\n    isLink?: boolean;\n    isQuiet?: boolean;\n    isFirstItem?: boolean;\n    isLastItem?: boolean;\n    isSelected?: boolean;\n    isDisabled?: boolean;\n    isNextSelected?: boolean;\n    isPrevSelected?: boolean;\n    isPrevNotSelected?: boolean;\n    isNextNotSelected?: boolean;\n    selectionStyle?: 'highlight' | 'checkbox';\n    scale?: 'medium' | 'large';\n    isDropTarget?: boolean;\n  }\n>({\n  outlineStyle: {\n    default: 'none'\n  },\n  boxSizing: 'border-box',\n  columnGap: 0,\n  paddingX: 0,\n  paddingY: 8,\n  backgroundColor: 'transparent',\n  color: {\n    default: baseColor('neutral-subdued'),\n    isSelected: baseColor('neutral'),\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isSelected: {\n        selectionStyle: {\n          highlight: 'HighlightText'\n        }\n      },\n      isDisabled: 'GrayText'\n    }\n  },\n  position: 'relative',\n  gridColumnStart: 1,\n  gridColumnEnd: -1,\n  display: 'grid',\n  gridTemplateAreas: [\n    '. dragbutton . checkmark icon label       actions actionmenu trailing-icon .',\n    '. .          . .         .    description actions actionmenu trailing-icon .'\n  ],\n  gridTemplateColumns: [\n    4,\n    'auto',\n    8,\n    'auto',\n    'auto',\n    'minmax(0, 1fr)',\n    'auto',\n    'auto',\n    'var(--trailing-icon-width)',\n    6\n  ],\n  gridTemplateRows: '1fr auto',\n  rowGap: {\n    ':has([slot=description])': space(1)\n  },\n  alignItems: 'baseline',\n  minHeight: {\n    default: 40,\n    scale: {\n      large: 50\n    }\n  },\n  textDecoration: 'none',\n  cursor: {\n    default: 'default',\n    isLink: 'pointer'\n  },\n  '--borderColor': {\n    type: 'borderColor',\n    value: {\n      default: 'gray-300',\n      forcedColors: 'ButtonBorder',\n      isSelected: {\n        selectionStyle: {\n          highlight: {\n            default: 'blue-900',\n            forcedColors: 'Highlight'\n          },\n          checkbox: 'gray-300'\n        }\n      }\n    }\n  },\n  borderTopWidth: 0,\n  borderBottomWidth: {\n    default: 1,\n    isLastItem: {\n      default: 1,\n      isQuiet: 0\n    }\n  },\n  borderStartWidth: 0,\n  borderEndWidth: 0,\n  borderStyle: 'solid',\n  borderColor: {\n    default: '--borderColor',\n    isNextSelected: 'transparent',\n    isSelected: 'transparent',\n    forcedColors: 'ButtonBorder'\n  },\n  '--radius': {\n    type: 'borderTopStartRadius',\n    value: 'default'\n  },\n  forcedColorAdjust: 'none'\n});\n\nconst insetBorderRadius = 'calc(var(--radius) - 1px)';\nconst rootDropSelectedRowBackground = colorMix('gray-25', 'blue-900', 28);\nconst rowDropBackground = colorMix('gray-25', 'blue-900', 10);\nconst rootRowDropStyles = {\n  // Unlike v3 tableview, v3 listview has the same background color for the listview itself and the rows when\n  // dropping on root\n  default: dropTargetBackground,\n  isSelected: rootDropSelectedRowBackground,\n  forcedColors: 'Background'\n} as const;\nconst rowDropStyles = {\n  // Also unlike v3, dropping on a selected row vs a non selected row doesn't have any difference in background color\n  default: rowDropBackground,\n  isSelected: rowDropBackground,\n  forcedColors: 'Background'\n} as const;\n\nconst listRowBackground = style<\n  GridListItemRenderProps & {\n    isFirstItem?: boolean;\n    isLastItem?: boolean;\n    isQuiet?: boolean;\n    isPrevSelected?: boolean;\n    isNextSelected?: boolean;\n    isPrevNotSelected?: boolean;\n    isNextNotSelected?: boolean;\n    selectionStyle?: 'highlight' | 'checkbox';\n    isDropTarget?: boolean;\n  }\n>({\n  position: 'absolute',\n  zIndex: -1,\n  top: {\n    default: 0,\n    isSelected: '[-1px]',\n    // Don't overlap focus ring of row above.\n    isPrevSelected: 0,\n    isFirstItem: 0,\n    forcedColors: 0\n  },\n  left: 0,\n  right: 0,\n  bottom: {\n    default: 0,\n    isSelected: '[-1px]'\n  },\n  backgroundColor: {\n    default: '--rowBackgroundColor',\n    isHovered: {\n      default: 'gray-900/5',\n      selectionStyle: {\n        checkbox: selectedBackground\n      }\n    },\n    isPressed: {\n      default: 'gray-900/10',\n      selectionStyle: {\n        checkbox: selectedActiveBackground\n      }\n    },\n    isSelected: {\n      selectionStyle: {\n        checkbox: {\n          default: selectedBackground,\n          isHovered: selectedActiveBackground,\n          isPressed: selectedActiveBackground,\n          isFocusVisible: selectedActiveBackground\n        },\n        highlight: {\n          // Use solid colors rather than transparent because the rows overlap.\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        }\n      }\n    },\n    forcedColors: {\n      default: 'transparent',\n      selectionStyle: {\n        highlight: {\n          isSelected: 'Highlight'\n        }\n      }\n    },\n    ':is([role=\"grid\"][data-drop-target] *)': rootRowDropStyles,\n    isDropTarget: rowDropStyles\n  },\n  borderTopStartRadius: {\n    isQuiet: 'default',\n    isSelected: 'none',\n    isPrevNotSelected: {\n      isSelected: {\n        selectionStyle: {\n          checkbox: 'none',\n          highlight: insetBorderRadius\n        }\n      },\n      isQuiet: 'default'\n    },\n    isDropTarget: insetBorderRadius\n  },\n  borderTopEndRadius: {\n    isQuiet: 'default',\n    isSelected: 'none',\n    isPrevNotSelected: {\n      isSelected: {\n        selectionStyle: {\n          checkbox: 'none',\n          highlight: insetBorderRadius\n        }\n      },\n      isQuiet: 'default'\n    },\n    isDropTarget: insetBorderRadius\n  },\n  borderBottomStartRadius: {\n    isQuiet: 'default',\n    isSelected: 'none',\n    isNextNotSelected: {\n      isSelected: {\n        selectionStyle: {\n          checkbox: 'none',\n          highlight: insetBorderRadius\n        }\n      },\n      isQuiet: 'default'\n    },\n    isDropTarget: insetBorderRadius\n  },\n  borderBottomEndRadius: {\n    isQuiet: 'default',\n    isSelected: 'none',\n    isNextNotSelected: {\n      isSelected: {\n        selectionStyle: {\n          checkbox: 'none',\n          highlight: insetBorderRadius\n        }\n      },\n      isQuiet: 'default'\n    },\n    isDropTarget: insetBorderRadius\n  },\n  borderTopWidth: {\n    default: {\n      selectionStyle: {\n        checkbox: 0,\n        highlight: 1\n      }\n    },\n    isPrevSelected: 0,\n    isDropTarget: 2\n  },\n  borderBottomWidth: {\n    default: {\n      selectionStyle: {\n        checkbox: 0,\n        highlight: 1\n      }\n    },\n    isNextSelected: 0,\n    isDropTarget: 2\n  },\n  borderStartWidth: {\n    default: {\n      selectionStyle: {\n        checkbox: 0,\n        highlight: 1\n      }\n    },\n    isDropTarget: 2\n  },\n  borderEndWidth: {\n    default: {\n      selectionStyle: {\n        checkbox: 0,\n        highlight: 1\n      }\n    },\n    isDropTarget: 2\n  },\n  borderStyle: 'solid',\n  borderColor: {\n    default: 'transparent',\n    isSelected: {\n      selectionStyle: {\n        checkbox: 'transparent',\n        highlight: '--borderColor'\n      }\n    },\n    isDropTarget: 'blue-800',\n    forcedColors: {\n      isDropTarget: 'Highlight'\n    }\n  }\n});\n\nlet listRowFocusRing = style<\n  GridListItemRenderProps & {\n    selectionStyle?: 'highlight' | 'checkbox';\n    isFirstItem?: boolean;\n    isPrevSelected?: boolean;\n    isPrevNotSelected?: boolean;\n    isNextSelected?: boolean;\n    isNextNotSelected?: boolean;\n    isLastItem?: boolean;\n    isQuiet?: boolean;\n  }\n>({\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: {\n      default: 'Highlight',\n      selectionStyle: {\n        highlight: '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: {\n        default: '[-1px]',\n        // Avoid the next row's selected background covering this row's focus ring.\n        isNextSelected: 0\n      },\n      highlight: '[-1px]'\n    }\n  },\n  borderRadius: {\n    default: insetBorderRadius,\n    isQuiet: 'default'\n  },\n  zIndex: 1,\n  pointerEvents: 'none'\n});\n\nlet rowWrapper = style({\n  display: 'contents'\n});\n\nlet image = style({\n  gridArea: 'icon',\n  gridRowEnd: 'span 2',\n  marginEnd: 'text-to-visual',\n  alignSelf: 'center',\n  borderRadius: 'sm',\n  width: 32,\n  aspectRatio: 'square',\n  objectFit: 'cover'\n});\n\nlet actionButtonGroup = style({\n  gridArea: 'actions',\n  gridRowEnd: 'span 2',\n  alignSelf: 'center',\n  justifySelf: 'end',\n  marginStart: 'text-to-visual'\n});\n\nlet listActionMenu = style({\n  gridArea: 'actionmenu',\n  gridRowEnd: 'span 2',\n  alignSelf: 'center'\n});\n\nconst listCheckbox = style({\n  gridArea: 'checkmark',\n  gridRowEnd: 'span 2',\n  alignSelf: 'center',\n  marginEnd: 8,\n  visibility: {\n    default: 'visible',\n    isDisabled: 'hidden'\n  }\n});\n\nconst listTrailingIcon = style({\n  gridArea: 'trailing-icon',\n  gridRowEnd: 'span 2',\n  alignSelf: 'center',\n  display: 'flex',\n  alignItems: 'center',\n  marginStart: 'text-to-visual'\n});\n\nlet dragButtonContainer = style({\n  gridArea: 'dragbutton',\n  gridRowEnd: 'span 2',\n  alignSelf: 'center',\n  display: 'flex',\n  alignItems: 'center',\n  width: 10\n});\n\nconst centeredWrapper = style({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 'full',\n  height: 'full'\n});\n\nconst loadingSpinnerWrapper = style({\n  padding: space(4)\n});\n\nconst emptyStateWrapper = style({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 'full',\n  height: 'full',\n  boxSizing: 'border-box',\n  padding: 16\n});\n\nfunction ListSelectionCheckbox({isDisabled}: {isDisabled: boolean}) {\n  let selectionContext = useSlottedContext(CheckboxContext, 'selection');\n  let isSelectionDisabled = isDisabled || !!selectionContext?.isDisabled;\n  return (\n    <div className={listCheckbox({isDisabled: isSelectionDisabled})}>\n      <Checkbox slot=\"selection\" />\n    </div>\n  );\n}\n\nexport function ListViewItem(props: ListViewItemProps): ReactNode {\n  let ref = useRef(null);\n  let {hasChildItems, ...otherProps} = props;\n  let isLink = props.href != null;\n  let isLinkOut = isLink && props.target === '_blank';\n  let {\n    isQuiet,\n    selectionStyle,\n    overflowMode,\n    scale,\n    hideLinkOutIcon = false\n  } = useContext(InternalListViewContext);\n  let textValue =\n    props.textValue || (typeof props.children === 'string' ? props.children : undefined);\n  let {direction} = useLocale();\n  let hasTrailingIcon = hasChildItems || (isLinkOut && !hideLinkOutIcon);\n\n  return (\n    <GridListItem\n      {...otherProps}\n      textValue={textValue}\n      ref={ref}\n      {...(hasTrailingIcon ? {'data-has-trailing-icon': ''} : {})}\n      className={renderProps =>\n        listitem({\n          ...renderProps,\n          isLink,\n          isQuiet,\n          scale,\n          selectionStyle,\n          isPrevNotSelected: !isPrevSelected(renderProps.id, renderProps.state),\n          isNextSelected: isNextSelected(renderProps.id, renderProps.state),\n          isNextNotSelected: !isNextSelected(renderProps.id, renderProps.state),\n          isFirstItem: isFirstItem(renderProps.id, renderProps.state),\n          isLastItem: isLastItem(renderProps.id, renderProps.state)\n        })\n      }>\n      {renderProps => {\n        let {children} = props;\n        let {\n          selectionMode,\n          selectionBehavior,\n          isDisabled,\n          id,\n          state,\n          allowsDragging,\n          isFocusVisibleWithin\n        } = renderProps;\n        return (\n          <Provider\n            values={[\n              [\n                TextContext,\n                {\n                  slots: {\n                    [DEFAULT_SLOT]: {styles: label({...renderProps, overflowMode})},\n                    label: {styles: label({...renderProps, overflowMode})},\n                    description: {styles: description({...renderProps, overflowMode})}\n                  }\n                }\n              ],\n              [\n                IconContext,\n                {\n                  slots: {\n                    icon: {\n                      render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),\n                      styles: icon\n                    }\n                  }\n                }\n              ],\n              [ImageContext, {styles: image}],\n              [\n                ActionButtonGroupContext,\n                {\n                  styles: actionButtonGroup,\n                  size: 'S',\n                  isQuiet: true\n                }\n              ],\n              [\n                ActionMenuContext,\n                {\n                  styles: listActionMenu,\n                  isQuiet: true,\n                  size: 'S',\n                  isDisabled\n                }\n              ]\n            ]}>\n            <div className={rowWrapper}>\n              <div\n                className={listRowBackground({\n                  ...renderProps,\n                  selectionStyle,\n                  isQuiet,\n                  isDropTarget: renderProps.isDropTarget,\n                  isPrevSelected: isPrevSelected(id, state),\n                  isNextSelected: isNextSelected(id, state),\n                  isPrevNotSelected: !isPrevSelected(id, state),\n                  isNextNotSelected: !isNextSelected(id, state),\n                  isFirstItem: isFirstItem(id, state),\n                  isLastItem: isLastItem(id, state)\n                })}\n              />\n              {renderProps.isFocusVisible && (\n                <div\n                  className={listRowFocusRing({\n                    ...renderProps,\n                    selectionStyle,\n                    isQuiet,\n                    isPrevSelected: isPrevSelected(id, state),\n                    isNextSelected: isNextSelected(id, state),\n                    isPrevNotSelected: !isPrevSelected(id, state),\n                    isNextNotSelected: !isNextSelected(id, state),\n                    isFirstItem: isFirstItem(id, state),\n                    isLastItem: isLastItem(id, state)\n                  })}\n                />\n              )}\n              {allowsDragging && (\n                <div className={dragButtonContainer}>\n                  {!isDisabled && <DragHandleButton isFocusVisibleWithin={isFocusVisibleWithin} />}\n                </div>\n              )}\n              {selectionMode !== 'none' && selectionBehavior === 'toggle' && (\n                <ListSelectionCheckbox isDisabled={isDisabled} />\n              )}\n              {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n              {isLinkOut && !hideLinkOutIcon && (\n                <div className={listTrailingIcon}>\n                  <LinkOutIcon\n                    size=\"M\"\n                    className={style({\n                      scaleX: {\n                        direction: {\n                          rtl: -1\n                        }\n                      },\n                      '--iconPrimary': {\n                        type: 'fill',\n                        value: 'currentColor'\n                      }\n                    })({direction})}\n                  />\n                </div>\n              )}\n              {hasChildItems && !isLinkOut && (\n                <div className={listTrailingIcon}>\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                </div>\n              )}\n            </div>\n          </Provider>\n        );\n      }}\n    </GridListItem>\n  );\n}\n\nfunction isNextSelected(id: Key | undefined, state: ListState<unknown>) {\n  if (id == null || !state) {\n    return false;\n  }\n  let keyAfter = state.collection.getKeyAfter(id);\n  return keyAfter != null && state.selectionManager.isSelected(keyAfter);\n}\n\nfunction isPrevSelected(id: Key | undefined, state: ListState<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: ListState<unknown>) {\n  if (id == null || !state) {\n    return false;\n  }\n  return state.collection.getFirstKey() === id;\n}\n\nfunction isLastItem(id: Key | undefined, state: ListState<unknown>) {\n  if (id == null || !state) {\n    return false;\n  }\n\n  let key = state.collection.getLastKey();\n  let node = key ? state.collection.getItem(key) : null;\n\n  return node ? node.key === id : false;\n}\n"],"names":[],"version":3,"file":"ListView.css.map"}