@react-spectrum/s2 1.4.0 → 1.5.0

package/dist/private/Breadcrumbs.css.map

@@ -1 +1 @@
-{"mappings":"AC4GgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAqHC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgCQ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAuBH;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsBH;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgCG;;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;EAAA;;;;EAUN;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAvFS;EA6EH;;;;EAUN;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAvFS;EAAA;IA6CN;;;;IAAA;;;;IAAA;;;;IAgCG;;;;;;AAtDA;EAAA;IAAA;;;;;;AAsBH;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA","sources":["e5b0469905a8f425","packages/@react-spectrum/s2/src/Breadcrumbs.tsx"],"sourcesContent":["@import \"323be75c1b18eb57\";\n@import \"b1e7908a376b8feb\";\n@import \"481fa992da5066cd\";\n@import \"e3fe68e954d88455\";\n@import \"41a6421b0de89093\";\n@import \"0289bb74e0f5d839\";\n@import \"880da6116faabf56\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionButton} from './ActionButton';\n\nimport {\n  Breadcrumb as AriaBreadcrumb,\n  BreadcrumbProps as AriaBreadcrumbItemProps,\n  BreadcrumbsProps as AriaBreadcrumbsProps,\n  Breadcrumbs as RACBreadcrumbs\n} from 'react-aria-components/Breadcrumbs';\n\nimport {baseColor, focusRing, size, style} from '../style' with {type: 'macro'};\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {\n  Collection,\n  DOMRef,\n  DOMRefValue,\n  GlobalDOMAttributes,\n  LinkDOMProps,\n  Node\n} from '@react-types/shared';\nimport {\n  CollectionRenderer,\n  CollectionRendererContext,\n  DefaultCollectionRenderer\n} from 'react-aria-components/CollectionBuilder';\nimport {ContextValue, Provider} from 'react-aria-components/slots';\nimport {\n  controlFont,\n  controlSize,\n  getAllowedOverrides,\n  StyleProps\n} from './style-utils' with {type: 'macro'};\nimport {\n  createContext,\n  forwardRef,\n  Fragment,\n  ReactNode,\n  RefObject,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport FolderIcon from '../s2wf-icons/S2_Icon_FolderBreadcrumb_20_N.svg';\nimport {forwardRefType} from './types';\n// @ts-ignore\nimport {HeadingContext} from 'react-aria-components/Heading';\nimport {inertValue} from 'react-aria/private/utils/inertValue';\nimport intlMessages from '../intl/*.json';\nimport {Link, LinkRenderProps} from 'react-aria-components/Link';\nimport {Menu, MenuItem, MenuTrigger} from './Menu';\n// @ts-ignore\nimport {Text} from './Content';\nimport {useDOMRef} from './useDOMRef';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nconst MIN_VISIBLE_ITEMS = 1;\nconst MAX_VISIBLE_ITEMS = 4;\n\ninterface BreadcrumbsStyleProps {\n  /**\n   * Size of the Breadcrumbs including spacing and layout.\n   *\n   * @default 'M'\n   */\n  size?: 'M' | 'L';\n  /** Whether the breadcrumbs are disabled. */\n  isDisabled?: boolean;\n  /**\n   * Whether to place the last Breadcrumb item onto a new line.\n   */\n  // TODO: isMultiline?: boolean\n  /** Whether to always show the root item if the items are collapsed. */\n  // TODO: showRoot?: boolean,\n}\n\nexport interface BreadcrumbsProps<T>\n  extends\n    Omit<\n      AriaBreadcrumbsProps<T>,\n      'children' | 'style' | 'className' | 'render' | keyof GlobalDOMAttributes\n    >,\n    BreadcrumbsStyleProps,\n    StyleProps {\n  /** The children of the Breadcrumbs. */\n  children: ReactNode | ((item: T) => ReactNode);\n}\n\nexport const BreadcrumbsContext =\n  createContext<ContextValue<Partial<BreadcrumbsProps<any>>, DOMRefValue<HTMLOListElement>>>(null);\n\nconst wrapper = style<BreadcrumbsStyleProps>(\n  {\n    position: 'relative',\n    display: 'flex',\n    justifyContent: 'start',\n    listStyleType: 'none',\n    flexWrap: 'nowrap',\n    flexGrow: 1,\n    flexShrink: 0,\n    flexBasis: 0,\n    gap: {\n      size: {\n        // TODO: why do these scale but other spacings don't?\n        M: size(6), // breadcrumbs-text-to-separator-medium\n        L: size(9) // breadcrumbs-text-to-separator-large\n      }\n    },\n    padding: 0,\n    transition: 'default',\n    marginTop: 0,\n    marginBottom: 0,\n    marginStart: {\n      size: {\n        M: size(6),\n        L: size(9)\n      }\n    }\n  },\n  getAllowedOverrides()\n);\n\nconst InternalBreadcrumbsContext = createContext<Partial<BreadcrumbsProps<any>>>({});\n\n/** Breadcrumbs show hierarchy and navigational context for a user's location within an application. */\nexport const Breadcrumbs = /*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumbs<T>(\n  props: BreadcrumbsProps<T>,\n  ref: DOMRef<HTMLOListElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, BreadcrumbsContext);\n  let domRef = useDOMRef(ref);\n  let {\n    UNSAFE_className = '',\n    UNSAFE_style,\n    styles,\n    size = 'M',\n    children,\n    isDisabled,\n    ...otherProps\n  } = props;\n\n  return (\n    <Provider values={[[InternalBreadcrumbsContext, {size, isDisabled}]]}>\n      <CollapsingCollection containerRef={domRef} onAction={props.onAction}>\n        <RACBreadcrumbs\n          {...otherProps}\n          isDisabled={isDisabled}\n          ref={domRef}\n          style={UNSAFE_style}\n          className={\n            UNSAFE_className +\n            wrapper(\n              {\n                size\n              },\n              styles\n            )\n          }>\n          {children}\n        </RACBreadcrumbs>\n      </CollapsingCollection>\n    </Provider>\n  );\n});\n\nlet BreadcrumbMenu = (props: {\n  items: Array<Node<any>>;\n  onAction: BreadcrumbsProps<unknown>['onAction'];\n}) => {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {items, onAction} = props;\n  let {direction} = useLocale();\n  let {size, isDisabled} = useContext(InternalBreadcrumbsContext);\n  let label = stringFormatter.format('breadcrumbs.more');\n  return (\n    <CollectionRendererContext.Provider value={DefaultCollectionRenderer}>\n      <li className={breadcrumbStyles({size, isDisabled, isMenu: true})}>\n        <MenuTrigger>\n          <ActionButton isDisabled={isDisabled} isQuiet aria-label={label}>\n            <FolderIcon />\n          </ActionButton>\n          <Menu items={items} onAction={onAction}>\n            {(item: Node<any>) => (\n              <MenuItem {...item.props.originalProps} key={item.key}>\n                <Text slot=\"label\">\n                  {item.props.children({size, isCurrent: false, isMenu: true})}\n                </Text>\n              </MenuItem>\n            )}\n          </Menu>\n        </MenuTrigger>\n        <ChevronIcon size={size} className={chevronStyles({direction, isMenu: true})} />\n      </li>\n    </CollectionRendererContext.Provider>\n  );\n};\n\nlet HiddenBreadcrumbs = function (props: {\n  listRef: RefObject<HTMLDivElement | null>;\n  items: Array<Node<any>>;\n  size: string;\n}) {\n  let {listRef, items, size} = props;\n  return (\n    <div\n      // @ts-ignore\n      inert={inertValue(true)}\n      ref={listRef}\n      className={style({\n        display: 'inherit',\n        gap: 'inherit',\n        flexWrap: 'inherit',\n        position: 'absolute',\n        top: 0,\n        bottom: 0,\n        start: 0,\n        end: 0,\n        visibility: 'hidden',\n        overflow: 'hidden',\n        opacity: 0\n      })}>\n      {items.map((item, idx) => {\n        // pull off individual props as an allow list, don't want refs or other props getting through\n        return (\n          <div\n            data-hidden-breadcrumb\n            style={item.props.UNSAFE_style}\n            key={item.key}\n            className={item.props.className({size, isCurrent: idx === items.length - 1})}>\n            {item.props.children({size, isCurrent: idx === items.length - 1})}\n          </div>\n        );\n      })}\n      <ActionButton data-hidden-button isQuiet>\n        <FolderIcon />\n      </ActionButton>\n    </div>\n  );\n};\n\nconst breadcrumbStyles = style<BreadcrumbsStyleProps & {isMenu?: boolean; isCurrent?: boolean}>({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'start',\n  height: controlSize(),\n  transition: 'default',\n  position: 'relative',\n  flexShrink: 0,\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderStyle: 'none',\n  marginStart: {\n    // adjusts with the parent flex gap\n    isMenu: size(-6)\n  }\n});\n\nconst chevronStyles = style({\n  scale: {\n    direction: {\n      rtl: -1\n    }\n  },\n  marginStart: {\n    default: 'text-to-visual',\n    isMenu: 0\n  },\n  color: {\n    default: 'neutral',\n    forcedColors: {\n      default: 'LinkText'\n    }\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nconst linkStyles = style<LinkRenderProps & {size?: 'M' | 'L'; isCurrent?: boolean}>({\n  ...focusRing(),\n  borderRadius: 'sm',\n  font: controlFont(),\n  color: {\n    default: baseColor('neutral-subdued'),\n    isDisabled: 'disabled',\n    isCurrent: baseColor('neutral'),\n    forcedColors: {\n      default: 'LinkText',\n      isDisabled: 'GrayText',\n      isCurrent: 'GrayText'\n    }\n  },\n  transition: 'default',\n  textDecoration: {\n    default: 'none',\n    isHovered: 'underline',\n    isFocusVisible: 'underline',\n    isDisabled: 'none'\n  },\n  cursor: {\n    default: 'pointer',\n    isDisabled: 'default'\n  },\n  outlineColor: {\n    default: 'focus-ring',\n    forcedColors: 'Highlight'\n  },\n  disableTapHighlight: true\n});\n\nconst currentStyles = style<{size: string}>({\n  font: controlFont(),\n  fontWeight: 'bold',\n  color: {\n    default: 'neutral',\n    forcedColors: 'ButtonText'\n  }\n});\n\n// TODO: support user heading size customization, for now just set it to large\nconst heading = style({\n  margin: 0,\n  font: 'heading-lg',\n  fontWeight: 'extra-bold'\n});\n\nexport interface BreadcrumbProps\n  extends\n    Omit<\n      AriaBreadcrumbItemProps,\n      | 'children'\n      | 'style'\n      | 'className'\n      | 'render'\n      | 'autoFocus'\n      | 'onClick'\n      | keyof GlobalDOMAttributes\n    >,\n    LinkDOMProps {\n  /** The children of the breadcrumb item. */\n  children: ReactNode;\n}\n\n/** An individual Breadcrumb for Breadcrumbs. */\nexport const Breadcrumb = /*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumb(\n  {children, ...props}: BreadcrumbProps,\n  ref: DOMRef<HTMLLIElement>\n) {\n  let {href, target, rel, download, ping, referrerPolicy} = props;\n  let {size = 'M'} = useContext(InternalBreadcrumbsContext) ?? {};\n  let domRef = useDOMRef(ref);\n  let {direction} = useLocale();\n  return (\n    <AriaBreadcrumb\n      {...props}\n      ref={domRef}\n      // @ts-ignore\n      originalProps={props}\n      className={({isCurrent, isDisabled}) => breadcrumbStyles({size, isCurrent, isDisabled})}>\n      {({\n        isCurrent,\n        isDisabled,\n        // @ts-ignore\n        isMenu\n      }) => {\n        if (isMenu) {\n          return children;\n        }\n        return isCurrent ? (\n          <div className={currentStyles({size})}>\n            <Provider values={[[HeadingContext, {className: heading}]]}>{children}</Provider>\n          </div>\n        ) : (\n          <>\n            <Link\n              style={({isFocusVisible}) => ({clipPath: isFocusVisible ? 'none' : 'margin-box'})}\n              href={href}\n              target={target}\n              rel={rel}\n              download={download}\n              ping={ping}\n              referrerPolicy={referrerPolicy}\n              isDisabled={isDisabled || isCurrent}\n              className={({isFocused, isFocusVisible, isHovered, isDisabled, isPressed}) =>\n                linkStyles({\n                  isFocused,\n                  isFocusVisible,\n                  isHovered,\n                  isDisabled,\n                  size,\n                  isPressed,\n                  isCurrent\n                })\n              }>\n              {children}\n            </Link>\n            <ChevronIcon size=\"M\" className={chevronStyles({direction})} />\n          </>\n        );\n      }}\n    </AriaBreadcrumb>\n  );\n});\n\n// Context for passing the count for the custom renderer\nlet CollapseContext = createContext<{\n  containerRef: RefObject<HTMLOListElement | null>;\n  onAction: BreadcrumbsProps<unknown>['onAction'];\n} | null>(null);\n\nfunction CollapsingCollection({children, containerRef, onAction}) {\n  return (\n    <CollapseContext.Provider value={{containerRef, onAction}}>\n      <CollectionRendererContext.Provider value={CollapsingCollectionRenderer}>\n        {children}\n      </CollectionRendererContext.Provider>\n    </CollapseContext.Provider>\n  );\n}\n\nlet CollapsingCollectionRenderer: CollectionRenderer = {\n  CollectionRoot({collection}) {\n    return useCollectionRender(collection);\n  },\n  CollectionBranch({collection}) {\n    return useCollectionRender(collection);\n  }\n};\n\nlet useCollectionRender = (collection: Collection<Node<unknown>>) => {\n  let {containerRef, onAction} = useContext(CollapseContext) ?? {};\n  let [visibleItems, setVisibleItems] = useState(collection.size);\n  let {size = 'M'} = useContext(InternalBreadcrumbsContext);\n\n  let children = useMemo(() => {\n    let result: Node<any>[] = [];\n    for (let key of collection.getKeys()) {\n      result.push(collection.getItem(key)!);\n    }\n    return result;\n  }, [collection]);\n\n  let listRef = useRef<HTMLDivElement | null>(null);\n  let updateOverflow = useCallback(() => {\n    let currListRef: HTMLDivElement | null = listRef.current;\n    if (!currListRef) {\n      setVisibleItems(collection.size);\n      return;\n    }\n    let container = currListRef.parentElement;\n    if (!container) {\n      setVisibleItems(collection.size);\n      return;\n    }\n\n    let listItems = Array.from(\n      currListRef.querySelectorAll('[data-hidden-breadcrumb]')\n    ) as HTMLLIElement[];\n    let folder = currListRef.querySelector('button') as HTMLButtonElement;\n    if (listItems.length <= 0) {\n      setVisibleItems(collection.size);\n      return;\n    }\n    let containerWidth = container.offsetWidth;\n    let containerGap = parseInt(getComputedStyle(container).gap, 10);\n    let folderGap = parseInt(getComputedStyle(folder).marginInlineStart, 10);\n    let newVisibleItems = 0;\n    let maxVisibleItems = MAX_VISIBLE_ITEMS;\n\n    let widths: Array<number> = [];\n    let totalWidth = 0;\n    for (let breadcrumb of listItems) {\n      let width = breadcrumb.offsetWidth + 1; // offsetWidth is rounded down\n      widths.push(width);\n      totalWidth += width;\n    }\n\n    // can we fit all the items without collapsing\n    if (\n      totalWidth <= containerWidth - collection.size * containerGap &&\n      collection.size <= MAX_VISIBLE_ITEMS\n    ) {\n      setVisibleItems(collection.size);\n      return;\n    }\n\n    // we know there is always at least one item because of the listItems.length check up above\n    let widthOfFirst = widths.shift()!;\n    let availableWidth =\n      containerWidth - widthOfFirst - folderGap - folder.offsetWidth - containerGap;\n    maxVisibleItems -= 2; // account for the first item and folder\n    for (let width of widths.reverse()) {\n      availableWidth -= width;\n      if (availableWidth <= 0) {\n        break;\n      }\n      availableWidth -= containerGap;\n      newVisibleItems++;\n    }\n\n    setVisibleItems(Math.max(MIN_VISIBLE_ITEMS, Math.min(maxVisibleItems, newVisibleItems)));\n  }, [collection.size, setVisibleItems]);\n\n  // making bad assumption that i can listen to containerRef when it's declared in the parent?\n  useResizeObserver({ref: containerRef, onResize: updateOverflow});\n\n  useLayoutEffect(() => {\n    if (collection.size > 0) {\n      queueMicrotask(updateOverflow);\n    }\n  }, [collection.size, updateOverflow]);\n\n  useEffect(() => {\n    // Recalculate visible tags when fonts are loaded.\n    document.fonts?.ready.then(() => updateOverflow());\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  let sliceIndex = collection.size - visibleItems;\n\n  return (\n    <>\n      <HiddenBreadcrumbs items={children} size={size} listRef={listRef} />\n      {visibleItems < collection.size && collection.size > 2 ? (\n        <>\n          {children[0].render?.(children[0])}\n          <BreadcrumbMenu items={children.slice(1, sliceIndex)} onAction={onAction} />\n          {children.slice(sliceIndex).map(node => (\n            <Fragment key={node.key}>{node.render?.(node)}</Fragment>\n          ))}\n        </>\n      ) : (\n        <>\n          {children.map(node => (\n            <Fragment key={node.key}>{node.render?.(node)}</Fragment>\n          ))}\n        </>\n      )}\n    </>\n  );\n};\n"],"names":[],"version":3,"file":"Breadcrumbs.css.map"}
+{"mappings":"ACwGgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAqHC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgCQ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAuBH;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsBH;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgCG;;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;EAAA;;;;EAUN;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAvFS;EA6EH;;;;EAUN;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAvFS;EAAA;IA6CN;;;;IAAA;;;;IAAA;;;;IAgCG;;;;;;AAtDA;EAAA;IAAA;;;;;;AAsBH;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA","sources":["e5b0469905a8f425","packages/@react-spectrum/s2/src/Breadcrumbs.tsx"],"sourcesContent":["@import \"323be75c1b18eb57\";\n@import \"b1e7908a376b8feb\";\n@import \"481fa992da5066cd\";\n@import \"e3fe68e954d88455\";\n@import \"41a6421b0de89093\";\n@import \"0289bb74e0f5d839\";\n@import \"880da6116faabf56\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionButton} from './ActionButton';\nimport {\n  Breadcrumb as AriaBreadcrumb,\n  BreadcrumbProps as AriaBreadcrumbItemProps,\n  BreadcrumbsProps as AriaBreadcrumbsProps,\n  Breadcrumbs as RACBreadcrumbs\n} from 'react-aria-components/Breadcrumbs';\nimport {baseColor, focusRing, size, style} from '../style' with {type: 'macro'};\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {\n  Collection,\n  DOMRef,\n  DOMRefValue,\n  GlobalDOMAttributes,\n  LinkDOMProps,\n  Node\n} from '@react-types/shared';\nimport {\n  CollectionRenderer,\n  CollectionRendererContext,\n  DefaultCollectionRenderer\n} from 'react-aria-components/CollectionBuilder';\nimport {ContextValue, Provider} from 'react-aria-components/slots';\nimport {\n  controlFont,\n  controlSize,\n  getAllowedOverrides,\n  StyleProps\n} from './style-utils' with {type: 'macro'};\nimport {\n  createContext,\n  forwardRef,\n  Fragment,\n  ReactNode,\n  RefObject,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport FolderIcon from '../s2wf-icons/S2_Icon_FolderBreadcrumb_20_N.svg';\nimport {forwardRefType} from './types';\nimport {HeadingContext} from 'react-aria-components/Heading';\nimport {inertValue} from 'react-aria/private/utils/inertValue';\nimport intlMessages from '../intl/*.json';\nimport {Link, LinkRenderProps} from 'react-aria-components/Link';\nimport {Menu, MenuItem, MenuTrigger} from './Menu';\nimport {Text} from './Content';\nimport {useDOMRef} from './useDOMRef';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nconst MIN_VISIBLE_ITEMS = 1;\nconst MAX_VISIBLE_ITEMS = 4;\n\ninterface BreadcrumbsStyleProps {\n  /**\n   * Size of the Breadcrumbs including spacing and layout.\n   *\n   * @default 'M'\n   */\n  size?: 'M' | 'L';\n  /** Whether the breadcrumbs are disabled. */\n  isDisabled?: boolean;\n  /**\n   * Whether to place the last Breadcrumb item onto a new line.\n   */\n  // TODO: isMultiline?: boolean\n  /** Whether to always show the root item if the items are collapsed. */\n  // TODO: showRoot?: boolean,\n}\n\nexport interface BreadcrumbsProps<T>\n  extends\n    Omit<\n      AriaBreadcrumbsProps<T>,\n      'children' | 'style' | 'className' | 'render' | keyof GlobalDOMAttributes\n    >,\n    BreadcrumbsStyleProps,\n    StyleProps {\n  /** The children of the Breadcrumbs. */\n  children: ReactNode | ((item: T) => ReactNode);\n}\n\nexport const BreadcrumbsContext =\n  createContext<ContextValue<Partial<BreadcrumbsProps<any>>, DOMRefValue<HTMLOListElement>>>(null);\n\nconst wrapper = style<BreadcrumbsStyleProps>(\n  {\n    position: 'relative',\n    display: 'flex',\n    justifyContent: 'start',\n    listStyleType: 'none',\n    flexWrap: 'nowrap',\n    flexGrow: 1,\n    flexShrink: 0,\n    flexBasis: 0,\n    gap: {\n      size: {\n        // TODO: why do these scale but other spacings don't?\n        M: size(6), // breadcrumbs-text-to-separator-medium\n        L: size(9) // breadcrumbs-text-to-separator-large\n      }\n    },\n    padding: 0,\n    transition: 'default',\n    marginTop: 0,\n    marginBottom: 0,\n    marginStart: {\n      size: {\n        M: size(6),\n        L: size(9)\n      }\n    }\n  },\n  getAllowedOverrides()\n);\n\nconst InternalBreadcrumbsContext = createContext<Partial<BreadcrumbsProps<any>>>({});\n\n/** Breadcrumbs show hierarchy and navigational context for a user's location within an application. */\nexport const Breadcrumbs = /*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumbs<T>(\n  props: BreadcrumbsProps<T>,\n  ref: DOMRef<HTMLOListElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, BreadcrumbsContext);\n  let domRef = useDOMRef(ref);\n  let {\n    UNSAFE_className = '',\n    UNSAFE_style,\n    styles,\n    size = 'M',\n    children,\n    isDisabled,\n    ...otherProps\n  } = props;\n\n  return (\n    <Provider values={[[InternalBreadcrumbsContext, {size, isDisabled}]]}>\n      <CollapsingCollection containerRef={domRef} onAction={props.onAction}>\n        <RACBreadcrumbs\n          {...otherProps}\n          isDisabled={isDisabled}\n          ref={domRef}\n          style={UNSAFE_style}\n          className={\n            UNSAFE_className +\n            wrapper(\n              {\n                size\n              },\n              styles\n            )\n          }>\n          {children}\n        </RACBreadcrumbs>\n      </CollapsingCollection>\n    </Provider>\n  );\n});\n\nlet BreadcrumbMenu = (props: {\n  items: Array<Node<any>>;\n  onAction: BreadcrumbsProps<unknown>['onAction'];\n}) => {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {items, onAction} = props;\n  let {direction} = useLocale();\n  let {size, isDisabled} = useContext(InternalBreadcrumbsContext);\n  let label = stringFormatter.format('breadcrumbs.more');\n  return (\n    <CollectionRendererContext.Provider value={DefaultCollectionRenderer}>\n      <li className={breadcrumbStyles({size, isDisabled, isMenu: true})}>\n        <MenuTrigger>\n          <ActionButton isDisabled={isDisabled} isQuiet aria-label={label}>\n            <FolderIcon />\n          </ActionButton>\n          <Menu items={items} onAction={onAction}>\n            {(item: Node<any>) => (\n              <MenuItem {...item.props.originalProps} key={item.key}>\n                <Text slot=\"label\">\n                  {item.props.children({size, isCurrent: false, isMenu: true})}\n                </Text>\n              </MenuItem>\n            )}\n          </Menu>\n        </MenuTrigger>\n        <ChevronIcon size={size} className={chevronStyles({direction, isMenu: true})} />\n      </li>\n    </CollectionRendererContext.Provider>\n  );\n};\n\nlet HiddenBreadcrumbs = function (props: {\n  listRef: RefObject<HTMLDivElement | null>;\n  items: Array<Node<any>>;\n  size: string;\n}) {\n  let {listRef, items, size} = props;\n  return (\n    <div\n      // @ts-ignore\n      inert={inertValue(true)}\n      ref={listRef}\n      className={style({\n        display: 'inherit',\n        gap: 'inherit',\n        flexWrap: 'inherit',\n        position: 'absolute',\n        top: 0,\n        bottom: 0,\n        start: 0,\n        end: 0,\n        visibility: 'hidden',\n        overflow: 'hidden',\n        opacity: 0\n      })}>\n      {items.map((item, idx) => {\n        // pull off individual props as an allow list, don't want refs or other props getting through\n        return (\n          <div\n            data-hidden-breadcrumb\n            style={item.props.UNSAFE_style}\n            key={item.key}\n            className={item.props.className({size, isCurrent: idx === items.length - 1})}>\n            {item.props.children({size, isCurrent: idx === items.length - 1})}\n          </div>\n        );\n      })}\n      <ActionButton data-hidden-button isQuiet>\n        <FolderIcon />\n      </ActionButton>\n    </div>\n  );\n};\n\nconst breadcrumbStyles = style<BreadcrumbsStyleProps & {isMenu?: boolean; isCurrent?: boolean}>({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'start',\n  height: controlSize(),\n  transition: 'default',\n  position: 'relative',\n  flexShrink: 0,\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderStyle: 'none',\n  marginStart: {\n    // adjusts with the parent flex gap\n    isMenu: size(-6)\n  }\n});\n\nconst chevronStyles = style({\n  scale: {\n    direction: {\n      rtl: -1\n    }\n  },\n  marginStart: {\n    default: 'text-to-visual',\n    isMenu: 0\n  },\n  color: {\n    default: 'neutral',\n    forcedColors: {\n      default: 'LinkText'\n    }\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nconst linkStyles = style<LinkRenderProps & {size?: 'M' | 'L'; isCurrent?: boolean}>({\n  ...focusRing(),\n  borderRadius: 'sm',\n  font: controlFont(),\n  color: {\n    default: baseColor('neutral-subdued'),\n    isDisabled: 'disabled',\n    isCurrent: baseColor('neutral'),\n    forcedColors: {\n      default: 'LinkText',\n      isDisabled: 'GrayText',\n      isCurrent: 'GrayText'\n    }\n  },\n  transition: 'default',\n  textDecoration: {\n    default: 'none',\n    isHovered: 'underline',\n    isFocusVisible: 'underline',\n    isDisabled: 'none'\n  },\n  cursor: {\n    default: 'pointer',\n    isDisabled: 'default'\n  },\n  outlineColor: {\n    default: 'focus-ring',\n    forcedColors: 'Highlight'\n  },\n  disableTapHighlight: true\n});\n\nconst currentStyles = style<{size: string}>({\n  font: controlFont(),\n  fontWeight: 'bold',\n  color: {\n    default: 'neutral',\n    forcedColors: 'ButtonText'\n  }\n});\n\n// TODO: support user heading size customization, for now just set it to large\nconst heading = style({\n  margin: 0,\n  font: 'heading-lg',\n  fontWeight: 'extra-bold'\n});\n\nexport interface BreadcrumbProps\n  extends\n    Omit<\n      AriaBreadcrumbItemProps,\n      | 'children'\n      | 'style'\n      | 'className'\n      | 'render'\n      | 'autoFocus'\n      | 'onClick'\n      | keyof GlobalDOMAttributes\n    >,\n    LinkDOMProps {\n  /** The children of the breadcrumb item. */\n  children: ReactNode;\n}\n\n/** An individual Breadcrumb for Breadcrumbs. */\nexport const Breadcrumb = /*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumb(\n  {children, ...props}: BreadcrumbProps,\n  ref: DOMRef<HTMLLIElement>\n) {\n  let {href, target, rel, download, ping, referrerPolicy} = props;\n  let {size = 'M'} = useContext(InternalBreadcrumbsContext) ?? {};\n  let domRef = useDOMRef(ref);\n  let {direction} = useLocale();\n  return (\n    <AriaBreadcrumb\n      {...props}\n      ref={domRef}\n      // @ts-ignore\n      originalProps={props}\n      className={({isCurrent, isDisabled}) => breadcrumbStyles({size, isCurrent, isDisabled})}>\n      {({\n        isCurrent,\n        isDisabled,\n        // @ts-ignore\n        isMenu\n      }) => {\n        if (isMenu) {\n          return children;\n        }\n        return isCurrent ? (\n          <div className={currentStyles({size})}>\n            <Provider values={[[HeadingContext, {className: heading}]]}>{children}</Provider>\n          </div>\n        ) : (\n          <>\n            <Link\n              style={({isFocusVisible}) => ({clipPath: isFocusVisible ? 'none' : 'margin-box'})}\n              href={href}\n              target={target}\n              rel={rel}\n              download={download}\n              ping={ping}\n              referrerPolicy={referrerPolicy}\n              isDisabled={isDisabled || isCurrent}\n              className={({isFocused, isFocusVisible, isHovered, isDisabled, isPressed}) =>\n                linkStyles({\n                  isFocused,\n                  isFocusVisible,\n                  isHovered,\n                  isDisabled,\n                  size,\n                  isPressed,\n                  isCurrent\n                })\n              }>\n              {children}\n            </Link>\n            <ChevronIcon size=\"M\" className={chevronStyles({direction})} />\n          </>\n        );\n      }}\n    </AriaBreadcrumb>\n  );\n});\n\n// Context for passing the count for the custom renderer\nlet CollapseContext = createContext<{\n  containerRef: RefObject<HTMLOListElement | null>;\n  onAction: BreadcrumbsProps<unknown>['onAction'];\n} | null>(null);\n\nfunction CollapsingCollection({children, containerRef, onAction}) {\n  return (\n    <CollapseContext.Provider value={{containerRef, onAction}}>\n      <CollectionRendererContext.Provider value={CollapsingCollectionRenderer}>\n        {children}\n      </CollectionRendererContext.Provider>\n    </CollapseContext.Provider>\n  );\n}\n\nlet CollapsingCollectionRenderer: CollectionRenderer = {\n  CollectionRoot({collection}) {\n    return useCollectionRender(collection);\n  },\n  CollectionBranch({collection}) {\n    return useCollectionRender(collection);\n  }\n};\n\nlet useCollectionRender = (collection: Collection<Node<unknown>>) => {\n  let {containerRef, onAction} = useContext(CollapseContext) ?? {};\n  let [visibleItems, setVisibleItems] = useState(collection.size);\n  let {size = 'M'} = useContext(InternalBreadcrumbsContext);\n\n  let children = useMemo(() => {\n    let result: Node<any>[] = [];\n    for (let key of collection.getKeys()) {\n      result.push(collection.getItem(key)!);\n    }\n    return result;\n  }, [collection]);\n\n  let listRef = useRef<HTMLDivElement | null>(null);\n  let updateOverflow = useCallback(() => {\n    let currListRef: HTMLDivElement | null = listRef.current;\n    if (!currListRef) {\n      setVisibleItems(collection.size);\n      return;\n    }\n    let container = currListRef.parentElement;\n    if (!container) {\n      setVisibleItems(collection.size);\n      return;\n    }\n\n    let listItems = Array.from(\n      currListRef.querySelectorAll('[data-hidden-breadcrumb]')\n    ) as HTMLLIElement[];\n    let folder = currListRef.querySelector('button') as HTMLButtonElement;\n    if (listItems.length <= 0) {\n      setVisibleItems(collection.size);\n      return;\n    }\n    let containerWidth = container.offsetWidth;\n    let containerGap = parseInt(getComputedStyle(container).gap, 10);\n    let folderGap = parseInt(getComputedStyle(folder).marginInlineStart, 10);\n    let newVisibleItems = 0;\n    let maxVisibleItems = MAX_VISIBLE_ITEMS;\n\n    let widths: Array<number> = [];\n    let totalWidth = 0;\n    for (let breadcrumb of listItems) {\n      let width = breadcrumb.offsetWidth + 1; // offsetWidth is rounded down\n      widths.push(width);\n      totalWidth += width;\n    }\n\n    // can we fit all the items without collapsing\n    if (\n      totalWidth <= containerWidth - collection.size * containerGap &&\n      collection.size <= MAX_VISIBLE_ITEMS\n    ) {\n      setVisibleItems(collection.size);\n      return;\n    }\n\n    // we know there is always at least one item because of the listItems.length check up above\n    let widthOfFirst = widths.shift()!;\n    let availableWidth =\n      containerWidth - widthOfFirst - folderGap - folder.offsetWidth - containerGap;\n    maxVisibleItems -= 2; // account for the first item and folder\n    for (let width of widths.reverse()) {\n      availableWidth -= width;\n      if (availableWidth <= 0) {\n        break;\n      }\n      availableWidth -= containerGap;\n      newVisibleItems++;\n    }\n\n    setVisibleItems(Math.max(MIN_VISIBLE_ITEMS, Math.min(maxVisibleItems, newVisibleItems)));\n  }, [collection.size, setVisibleItems]);\n\n  // making bad assumption that i can listen to containerRef when it's declared in the parent?\n  useResizeObserver({ref: containerRef, onResize: updateOverflow});\n\n  useLayoutEffect(() => {\n    if (collection.size > 0) {\n      queueMicrotask(updateOverflow);\n    }\n  }, [collection.size, updateOverflow]);\n\n  useEffect(() => {\n    // Recalculate visible tags when fonts are loaded.\n    document.fonts?.ready.then(() => updateOverflow());\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  let sliceIndex = collection.size - visibleItems;\n\n  return (\n    <>\n      <HiddenBreadcrumbs items={children} size={size} listRef={listRef} />\n      {visibleItems < collection.size && collection.size > 2 ? (\n        <>\n          {children[0].render?.(children[0])}\n          <BreadcrumbMenu items={children.slice(1, sliceIndex)} onAction={onAction} />\n          {children.slice(sliceIndex).map(node => (\n            <Fragment key={node.key}>{node.render?.(node)}</Fragment>\n          ))}\n        </>\n      ) : (\n        <>\n          {children.map(node => (\n            <Fragment key={node.key}>{node.render?.(node)}</Fragment>\n          ))}\n        </>\n      )}\n    </>\n  );\n};\n"],"names":[],"version":3,"file":"Breadcrumbs.css.map"}