@react-spectrum/s2 1.0.0 → 1.2.0

package/dist/ListView.mjs.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/ListView.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 {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 {\n  CheckboxContext,\n  Collection,\n  CollectionRendererContext,\n  ContextValue,\n  DEFAULT_SLOT,\n  DefaultCollectionRenderer,\n  GridList,\n  GridListItem,\n  GridListItemProps,\n  GridListItemRenderProps,\n  GridListLoadMoreItem,\n  GridListProps,\n  GridListRenderProps,\n  Key,\n  ListLayout,\n  ListState,\n  Provider,\n  SlotProps,\n  useSlottedContext,\n  Virtualizer\n} from 'react-aria-components';\nimport Chevron from '../ui-icons/Chevron';\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 {IconContext} from './Icon';\nimport {ImageContext} from './Image';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport LinkOutIcon from '../ui-icons/LinkOut';\nimport {ProgressCircle} from './ProgressCircle';\nimport {Text, TextContext} from './Content';\nimport {useActionBarContainer} from './ActionBar';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocale, useLocalizedStringFormatter} from 'react-aria';\nimport {useScale} from './utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ListViewProps<T> extends Omit<GridListProps<T>, 'className' | 'style' | 'children' | 'selectionBehavior' | 'dragAndDropHooks' | 'layout' | 'render' | 'keyboardNavigationBehavior' | 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: 0,\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: {\n      default: 'disabled',\n      forcedColors: '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  }\n});\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  ...focusRing(),\n  outlineOffset: -2,\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  },\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    }\n  },\n  borderTopStartRadius: {\n    isFirstItem: {\n      isSelected: {\n        selectionStyle: {\n          checkbox: 'none',\n          highlight: 'default'\n        }\n      },\n      isQuiet: 'default',\n      isFocusVisible: 'default'\n    }\n  },\n  borderTopEndRadius: {\n    isFirstItem: {\n      isSelected: {\n        selectionStyle: {\n          checkbox: 'none',\n          highlight: 'default'\n        }\n      },\n      isQuiet: 'default',\n      isFocusVisible: 'default'\n    }\n  },\n  borderBottomStartRadius: {\n    isLastItem: {\n      isSelected: {\n        selectionStyle: {\n          checkbox: 'none',\n          highlight: 'default'\n        }\n      },\n      isQuiet: 'default',\n      isFocusVisible: 'default'\n    }\n  },\n  borderBottomEndRadius: {\n    isLastItem: {\n      isSelected: {\n        selectionStyle: {\n          checkbox: 'none',\n          highlight: 'default'\n        }\n      },\n      isQuiet: 'default',\n      isFocusVisible: '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\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  },\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}\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}\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            {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\n"],"names":[],"version":3,"file":"ListView.mjs.map"}