@react-spectrum/s2 3.0.0-nightly-93c26d8bd-241028 → 3.0.0-nightly-07431f4b1-241030

package/dist/Breadcrumbs.css

@@ -15,20 +15,20 @@
     flex-basis: 0;
   }
 
-  .i-6njx2e {
-    row-gap: .375rem;
+  .i-ve8p9e {
+    row-gap: calc(.375rem * var(--s2-scale));
   }
 
-  .i-1ch0ogp {
-    row-gap: .5625rem;
+  .i-1dtpt05 {
+    row-gap: calc(.5625rem * var(--s2-scale));
   }
 
-  .j-6njx2e {
-    column-gap: .375rem;
+  .j-ve8p9e {
+    column-gap: calc(.375rem * var(--s2-scale));
   }
 
-  .j-1ch0ogp {
-    column-gap: .5625rem;
+  .j-1dtpt05 {
+    column-gap: calc(.5625rem * var(--s2-scale));
   }
 
   .Ea {
@@ -47,12 +47,12 @@
     padding-inline-end: 0;
   }
 
-  .y-6njx2e {
-    margin-inline-start: .375rem;
+  .y-ve8p9e {
+    margin-inline-start: calc(.375rem * var(--s2-scale));
   }
 
-  .y-1ch0ogp {
-    margin-inline-start: .5625rem;
+  .y-1dtpt05 {
+    margin-inline-start: calc(.5625rem * var(--s2-scale));
   }
 
   ._Z-17zqamw {
@@ -111,24 +111,24 @@
     justify-content: start;
   }
 
-  .kq {
-    height: 2rem;
+  .kj {
+    height: calc(2rem * var(--s2-scale));
   }
 
-  .kk {
-    height: 1.25rem;
+  .kg {
+    height: calc(1.25rem * var(--s2-scale));
   }
 
-  .km {
-    height: 1.5rem;
+  .kh {
+    height: calc(1.5rem * var(--s2-scale));
   }
 
-  .kr {
-    height: 2.5rem;
+  .kl {
+    height: calc(2.5rem * var(--s2-scale));
   }
 
-  .kx {
-    height: 3rem;
+  .kn {
+    height: calc(3rem * var(--s2-scale));
   }
 
   .Uc {
@@ -143,8 +143,8 @@
     border-style: none;
   }
 
-  .y-2al4ab {
-    margin-inline-start: -.375rem;
+  .y-460fe7 {
+    margin-inline-start: calc(-.375rem * var(--s2-scale));
   }
 
   .S-3hmpv {
@@ -324,56 +324,28 @@
 
 @layer UNSAFE_overrides;
 
-@layer _.b.b {
-  @media not ((hover: hover) and (pointer: fine)) {
-    .ib-1aa9md1 {
-      row-gap: .46875rem;
-    }
-
-    .ib-1itkwgp {
-      row-gap: .703125rem;
-    }
-
-    .jb-1aa9md1 {
-      column-gap: .46875rem;
-    }
-
-    .jb-1itkwgp {
-      column-gap: .703125rem;
-    }
-
-    .yb-1aa9md1 {
-      margin-inline-start: .46875rem;
-    }
-
-    .yb-1itkwgp {
-      margin-inline-start: .703125rem;
-    }
-
-    .kbr {
-      height: 2.5rem;
-    }
-
-    .kbl {
-      height: 1.5625rem;
-    }
-
-    .kbn {
-      height: 1.875rem;
+@layer _.b.a {
+  @media (forced-colors: active) {
+    .aa_____x {
+      color: buttontext;
     }
 
-    .kbu {
-      height: 3.125rem;
+    .da_____z {
+      outline-color: highlight;
     }
 
-    .kby {
-      height: 3.75rem;
+    .aa_____D {
+      color: linktext;
     }
 
-    .yb-1l44p6q {
-      margin-inline-start: -.46875rem;
+    .aa_____B {
+      color: graytext;
     }
+  }
+}
 
+@layer _.b.b {
+  @media not ((hover: hover) and (pointer: fine)) {
     .ybH {
       margin-inline-start: .470588em;
     }
@@ -404,26 +376,6 @@
   }
 }
 
-@layer _.b.a {
-  @media (forced-colors: active) {
-    .aa_____x {
-      color: buttontext;
-    }
-
-    .da_____z {
-      outline-color: highlight;
-    }
-
-    .aa_____D {
-      color: linktext;
-    }
-
-    .aa_____B {
-      color: graytext;
-    }
-  }
-}
-
 @layer _.c {
   ._c-enzwzjc:lang(he) {
     font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;

package/dist/Breadcrumbs.css.map

@@ -1 +1 @@
-{"mappings":"ACqEgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyGC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA8BQ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAuBH;;;;EAAA;;;;EAAA;;;;EAsBH;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+BG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAMN;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;;AAzNA;EAyNA;;;;EAAA;;;;;AAzNA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAuIS;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAuBH;;;;IAqDA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAMN;;;;;;AAlFS;EAAA;IAAA;;;;IA6CN;;;;IAAA;;;;IAAA;;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AA+BG","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  BreadcrumbsProps as AriaBreadcrumbsProps,\n  CollectionRenderer,\n  ContextValue,\n  HeadingContext,\n  Link,\n  Provider,\n  Breadcrumbs as RACBreadcrumbs,\n  UNSTABLE_CollectionRendererContext,\n  UNSTABLE_DefaultCollectionRenderer\n} from 'react-aria-components';\nimport {AriaBreadcrumbItemProps, useLocale} from 'react-aria';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {Collection, DOMRef, DOMRefValue, LinkDOMProps, Node} from '@react-types/shared';\nimport {createContext, forwardRef, Fragment, ReactNode, RefObject, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {focusRing, size, style} from '../style' with { type: 'macro' };\nimport FolderIcon from '../s2wf-icons/S2_Icon_FolderBreadcrumb_20_N.svg';\nimport {forwardRefType} from './types';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {Menu, MenuItem, MenuTrigger} from './Menu';\nimport {Text} from './Content';\nimport {useDOMRef, useResizeObserver} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\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> extends Omit<AriaBreadcrumbsProps<T>, 'children' | 'items' | 'style' | 'className'>, BreadcrumbsStyleProps, StyleProps {\n  /** The children of the Breadcrumbs. */\n  children?: ReactNode\n}\n\nexport const BreadcrumbsContext = createContext<ContextValue<BreadcrumbsProps<any>, DOMRefValue<HTMLOListElement>>>(null);\n\nconst wrapper = style<BreadcrumbsStyleProps>({\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      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}, getAllowedOverrides());\n\nconst InternalBreadcrumbsContext = createContext<BreadcrumbsProps<any>>({});\n\nfunction Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: DOMRef<HTMLOListElement>) {\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\n      values={[\n        [InternalBreadcrumbsContext, {size, isDisabled}]\n      ]}>\n      <CollapsingCollection containerRef={domRef} onAction={props.onAction}>\n        <RACBreadcrumbs\n          {...otherProps}\n          isDisabled={isDisabled}\n          ref={domRef}\n          style={UNSAFE_style}\n          className={UNSAFE_className + wrapper({\n            size\n          }, styles)}>\n          {children}\n        </RACBreadcrumbs>\n      </CollapsingCollection>\n    </Provider>\n  );\n}\n\nlet BreadcrumbMenu = (props: {items: Array<Node<any>>, onAction: BreadcrumbsProps<unknown>['onAction']}) => {\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    <UNSTABLE_CollectionRendererContext.Provider value={UNSTABLE_DefaultCollectionRenderer}>\n      <li className={breadcrumbStyles({size, isDisabled, isMenu: true})}>\n        <MenuTrigger>\n          <ActionButton isDisabled={isDisabled} isQuiet aria-label={label}><FolderIcon /></ActionButton>\n          <Menu items={items} onAction={onAction}>\n            {(item: Node<any>) => (\n              <MenuItem\n                {...item.props.originalProps}\n                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\n          size={size}\n          className={chevronStyles({direction, isMenu: true})} />\n      </li>\n    </UNSTABLE_CollectionRendererContext.Provider>\n  );\n};\n\n/** Breadcrumbs show hierarchy and navigational context for a user’s location within an application. */\nlet _Breadcrumbs = /*#__PURE__*/ (forwardRef as forwardRefType)(Breadcrumbs);\nexport {_Breadcrumbs as Breadcrumbs};\n\nlet HiddenBreadcrumbs = function (props: {listRef: RefObject<HTMLDivElement | null>, items: Array<Node<any>>, size: string}) {\n  let {listRef, items, size} = props;\n  return (\n    <div\n      // @ts-ignore\n      inert=\"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><FolderIcon /></ActionButton>\n    </div>\n  );\n};\n\nconst breadcrumbStyles = style({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'start',\n  height: 'control',\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({\n  ...focusRing(),\n  borderRadius: 'sm',\n  font: 'control',\n  color: {\n    default: 'neutral-subdued',\n    isDisabled: 'disabled',\n    isCurrent: 'neutral',\n    forcedColors: {\n      default: 'LinkText',\n      isDisabled: '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: 'control',\n  fontWeight: 'bold'\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 extends Omit<AriaBreadcrumbItemProps, 'children' | 'style' | 'className' | 'autoFocus'>, LinkDOMProps {\n  /** The children of the breadcrumb item. */\n  children?: ReactNode\n}\n\nfunction Breadcrumb({children, ...props}: BreadcrumbProps, ref: DOMRef<HTMLLIElement>) {\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 (\n          isCurrent ?\n            <div\n              className={currentStyles({size})}>\n              <Provider\n                values={[\n                  [HeadingContext, {className: heading}]\n                ]}>\n                {children}\n              </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}) => linkStyles({isFocused, isFocusVisible, isHovered, isDisabled, size, isPressed})}>\n                  {children}\n                </Link>\n                <ChevronIcon\n                  size=\"M\"\n                  className={chevronStyles({direction})} />\n              </>\n            )\n        );\n      }}\n    </AriaBreadcrumb>\n  );\n}\n\n/** An individual Breadcrumb for Breadcrumbs. */\nlet _Breadcrumb = /*#__PURE__*/ (forwardRef as forwardRefType)(Breadcrumb);\nexport {_Breadcrumb as Breadcrumb};\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      <UNSTABLE_CollectionRendererContext.Provider value={CollapsingCollectionRenderer}>\n        {children}\n      </UNSTABLE_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(currListRef.querySelectorAll('[data-hidden-breadcrumb]')) 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 (totalWidth <= containerWidth - (collection.size * containerGap) && collection.size <= MAX_VISIBLE_ITEMS) {\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 = 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 => <Fragment key={node.key}>{node.render?.(node)}</Fragment >)}\n        </>\n      ) : (\n        <>\n          {children.map(node => <Fragment key={node.key}>{node.render?.(node)}</Fragment>)}\n        </>\n      )}\n    </>\n  );\n};\n"],"names":[],"version":3,"file":"Breadcrumbs.css.map"}
+{"mappings":"ACqEgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyGC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA8BQ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAuBH;;;;EAAA;;;;EAAA;;;;EAsBH;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+BG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAMN;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;;AAzNA;EAyNA;;;;EAAA;;;;;AAzNA;;AAuIS;EAAA;IAAA;;;;IA6CN;;;;IAAA;;;;IAAA;;;;;;AAtBG;EAAA;IAAA;;;;IAqDA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAMN;;;;;;AArCG;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AA+BG","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  BreadcrumbsProps as AriaBreadcrumbsProps,\n  CollectionRenderer,\n  ContextValue,\n  HeadingContext,\n  Link,\n  Provider,\n  Breadcrumbs as RACBreadcrumbs,\n  UNSTABLE_CollectionRendererContext,\n  UNSTABLE_DefaultCollectionRenderer\n} from 'react-aria-components';\nimport {AriaBreadcrumbItemProps, useLocale} from 'react-aria';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {Collection, DOMRef, DOMRefValue, LinkDOMProps, Node} from '@react-types/shared';\nimport {createContext, forwardRef, Fragment, ReactNode, RefObject, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {focusRing, size, style} from '../style' with { type: 'macro' };\nimport FolderIcon from '../s2wf-icons/S2_Icon_FolderBreadcrumb_20_N.svg';\nimport {forwardRefType} from './types';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {Menu, MenuItem, MenuTrigger} from './Menu';\nimport {Text} from './Content';\nimport {useDOMRef, useResizeObserver} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\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> extends Omit<AriaBreadcrumbsProps<T>, 'children' | 'items' | 'style' | 'className'>, BreadcrumbsStyleProps, StyleProps {\n  /** The children of the Breadcrumbs. */\n  children?: ReactNode\n}\n\nexport const BreadcrumbsContext = createContext<ContextValue<BreadcrumbsProps<any>, DOMRefValue<HTMLOListElement>>>(null);\n\nconst wrapper = style<BreadcrumbsStyleProps>({\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      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}, getAllowedOverrides());\n\nconst InternalBreadcrumbsContext = createContext<BreadcrumbsProps<any>>({});\n\nfunction Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: DOMRef<HTMLOListElement>) {\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\n      values={[\n        [InternalBreadcrumbsContext, {size, isDisabled}]\n      ]}>\n      <CollapsingCollection containerRef={domRef} onAction={props.onAction}>\n        <RACBreadcrumbs\n          {...otherProps}\n          isDisabled={isDisabled}\n          ref={domRef}\n          style={UNSAFE_style}\n          className={UNSAFE_className + wrapper({\n            size\n          }, styles)}>\n          {children}\n        </RACBreadcrumbs>\n      </CollapsingCollection>\n    </Provider>\n  );\n}\n\nlet BreadcrumbMenu = (props: {items: Array<Node<any>>, onAction: BreadcrumbsProps<unknown>['onAction']}) => {\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    <UNSTABLE_CollectionRendererContext.Provider value={UNSTABLE_DefaultCollectionRenderer}>\n      <li className={breadcrumbStyles({size, isDisabled, isMenu: true})}>\n        <MenuTrigger>\n          <ActionButton isDisabled={isDisabled} isQuiet aria-label={label}><FolderIcon /></ActionButton>\n          <Menu items={items} onAction={onAction}>\n            {(item: Node<any>) => (\n              <MenuItem\n                {...item.props.originalProps}\n                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\n          size={size}\n          className={chevronStyles({direction, isMenu: true})} />\n      </li>\n    </UNSTABLE_CollectionRendererContext.Provider>\n  );\n};\n\n/** Breadcrumbs show hierarchy and navigational context for a user’s location within an application. */\nlet _Breadcrumbs = /*#__PURE__*/ (forwardRef as forwardRefType)(Breadcrumbs);\nexport {_Breadcrumbs as Breadcrumbs};\n\nlet HiddenBreadcrumbs = function (props: {listRef: RefObject<HTMLDivElement | null>, items: Array<Node<any>>, size: string}) {\n  let {listRef, items, size} = props;\n  return (\n    <div\n      // @ts-ignore\n      inert=\"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><FolderIcon /></ActionButton>\n    </div>\n  );\n};\n\nconst breadcrumbStyles = style({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'start',\n  height: 'control',\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({\n  ...focusRing(),\n  borderRadius: 'sm',\n  font: 'control',\n  color: {\n    default: 'neutral-subdued',\n    isDisabled: 'disabled',\n    isCurrent: 'neutral',\n    forcedColors: {\n      default: 'LinkText',\n      isDisabled: '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: 'control',\n  fontWeight: 'bold'\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 extends Omit<AriaBreadcrumbItemProps, 'children' | 'style' | 'className' | 'autoFocus'>, LinkDOMProps {\n  /** The children of the breadcrumb item. */\n  children?: ReactNode\n}\n\nfunction Breadcrumb({children, ...props}: BreadcrumbProps, ref: DOMRef<HTMLLIElement>) {\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 (\n          isCurrent ?\n            <div\n              className={currentStyles({size})}>\n              <Provider\n                values={[\n                  [HeadingContext, {className: heading}]\n                ]}>\n                {children}\n              </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}) => linkStyles({isFocused, isFocusVisible, isHovered, isDisabled, size, isPressed})}>\n                  {children}\n                </Link>\n                <ChevronIcon\n                  size=\"M\"\n                  className={chevronStyles({direction})} />\n              </>\n            )\n        );\n      }}\n    </AriaBreadcrumb>\n  );\n}\n\n/** An individual Breadcrumb for Breadcrumbs. */\nlet _Breadcrumb = /*#__PURE__*/ (forwardRef as forwardRefType)(Breadcrumb);\nexport {_Breadcrumb as Breadcrumb};\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      <UNSTABLE_CollectionRendererContext.Provider value={CollapsingCollectionRenderer}>\n        {children}\n      </UNSTABLE_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(currListRef.querySelectorAll('[data-hidden-breadcrumb]')) 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 (totalWidth <= containerWidth - (collection.size * containerGap) && collection.size <= MAX_VISIBLE_ITEMS) {\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 = 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 => <Fragment key={node.key}>{node.render?.(node)}</Fragment >)}\n        </>\n      ) : (\n        <>\n          {children.map(node => <Fragment key={node.key}>{node.render?.(node)}</Fragment>)}\n        </>\n      )}\n    </>\n  );\n};\n"],"names":[],"version":3,"file":"Breadcrumbs.css.map"}

package/dist/Breadcrumbs.mjs

@@ -73,20 +73,10 @@ const $f329dd4f2aa58cd0$var$wrapper = function anonymous(props, overrides) {
     if (!$_9) rules += ' _9-3t1y';
     if (!$_8) rules += ' _8-3t1x';
     if (!$h) rules += ' ha';
-    if (props.size === "L") {
-        rules += ' ib-1itkwgp';
-        rules += ' i-1ch0ogp';
-    } else if (props.size === "M") {
-        rules += ' ib-1aa9md1';
-        rules += ' i-6njx2e';
-    }
-    if (props.size === "L") {
-        rules += ' jb-1itkwgp';
-        rules += ' j-1ch0ogp';
-    } else if (props.size === "M") {
-        rules += ' jb-1aa9md1';
-        rules += ' j-6njx2e';
-    }
+    if (props.size === "L") rules += ' i-1dtpt05';
+    else if (props.size === "M") rules += ' i-ve8p9e';
+    if (props.size === "L") rules += ' j-1dtpt05';
+    else if (props.size === "M") rules += ' j-ve8p9e';
     rules += ' Ea';
     rules += ' Fa';
     rules += ' Ca';
@@ -97,13 +87,8 @@ const $f329dd4f2aa58cd0$var$wrapper = function anonymous(props, overrides) {
     if (!$A) rules += ' Aa';
     if (!$B) rules += ' Ba';
     if (!$y) {
-        if (props.size === "L") {
-            rules += ' yb-1itkwgp';
-            rules += ' y-1ch0ogp';
-        } else if (props.size === "M") {
-            rules += ' yb-1aa9md1';
-            rules += ' y-6njx2e';
-        }
+        if (props.size === "L") rules += ' y-1dtpt05';
+        else if (props.size === "M") rules += ' y-ve8p9e';
     }
     return rules;
 };
@@ -226,22 +211,11 @@ const $f329dd4f2aa58cd0$var$breadcrumbStyles = function anonymous(props) {
     rules += ' _Zd';
     rules += ' _1c';
     rules += ' _2b';
-    if (props.size === "XL") {
-        rules += ' kby';
-        rules += ' kx';
-    } else if (props.size === "L") {
-        rules += ' kbu';
-        rules += ' kr';
-    } else if (props.size === "S") {
-        rules += ' kbn';
-        rules += ' km';
-    } else if (props.size === "XS") {
-        rules += ' kbl';
-        rules += ' kk';
-    } else {
-        rules += ' kbr';
-        rules += ' kq';
-    }
+    if (props.size === "XL") rules += ' kn';
+    else if (props.size === "L") rules += ' kl';
+    else if (props.size === "S") rules += ' kh';
+    else if (props.size === "XS") rules += ' kg';
+    else rules += ' kj';
     rules += ' _Oa';
     rules += ' _Q-375x7f';
     rules += ' _Ra';
@@ -257,10 +231,7 @@ const $f329dd4f2aa58cd0$var$breadcrumbStyles = function anonymous(props) {
         else rules += ' an';
     }
     rules += ' wf';
-    if (props.isMenu) {
-        rules += ' yb-1l44p6q';
-        rules += ' y-2al4ab';
-    }
+    if (props.isMenu) rules += ' y-460fe7';
     return rules;
 };
 const $f329dd4f2aa58cd0$var$chevronStyles = function anonymous(props) {

package/dist/Breadcrumbs.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Breadcrumbs.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionButton} from './ActionButton';\nimport {\n  Breadcrumb as AriaBreadcrumb,\n  BreadcrumbsProps as AriaBreadcrumbsProps,\n  CollectionRenderer,\n  ContextValue,\n  HeadingContext,\n  Link,\n  Provider,\n  Breadcrumbs as RACBreadcrumbs,\n  UNSTABLE_CollectionRendererContext,\n  UNSTABLE_DefaultCollectionRenderer\n} from 'react-aria-components';\nimport {AriaBreadcrumbItemProps, useLocale} from 'react-aria';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {Collection, DOMRef, DOMRefValue, LinkDOMProps, Node} from '@react-types/shared';\nimport {createContext, forwardRef, Fragment, ReactNode, RefObject, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {focusRing, size, style} from '../style' with { type: 'macro' };\nimport FolderIcon from '../s2wf-icons/S2_Icon_FolderBreadcrumb_20_N.svg';\nimport {forwardRefType} from './types';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {Menu, MenuItem, MenuTrigger} from './Menu';\nimport {Text} from './Content';\nimport {useDOMRef, useResizeObserver} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\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> extends Omit<AriaBreadcrumbsProps<T>, 'children' | 'items' | 'style' | 'className'>, BreadcrumbsStyleProps, StyleProps {\n  /** The children of the Breadcrumbs. */\n  children?: ReactNode\n}\n\nexport const BreadcrumbsContext = createContext<ContextValue<BreadcrumbsProps<any>, DOMRefValue<HTMLOListElement>>>(null);\n\nconst wrapper = style<BreadcrumbsStyleProps>({\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      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}, getAllowedOverrides());\n\nconst InternalBreadcrumbsContext = createContext<BreadcrumbsProps<any>>({});\n\nfunction Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: DOMRef<HTMLOListElement>) {\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\n      values={[\n        [InternalBreadcrumbsContext, {size, isDisabled}]\n      ]}>\n      <CollapsingCollection containerRef={domRef} onAction={props.onAction}>\n        <RACBreadcrumbs\n          {...otherProps}\n          isDisabled={isDisabled}\n          ref={domRef}\n          style={UNSAFE_style}\n          className={UNSAFE_className + wrapper({\n            size\n          }, styles)}>\n          {children}\n        </RACBreadcrumbs>\n      </CollapsingCollection>\n    </Provider>\n  );\n}\n\nlet BreadcrumbMenu = (props: {items: Array<Node<any>>, onAction: BreadcrumbsProps<unknown>['onAction']}) => {\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    <UNSTABLE_CollectionRendererContext.Provider value={UNSTABLE_DefaultCollectionRenderer}>\n      <li className={breadcrumbStyles({size, isDisabled, isMenu: true})}>\n        <MenuTrigger>\n          <ActionButton isDisabled={isDisabled} isQuiet aria-label={label}><FolderIcon /></ActionButton>\n          <Menu items={items} onAction={onAction}>\n            {(item: Node<any>) => (\n              <MenuItem\n                {...item.props.originalProps}\n                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\n          size={size}\n          className={chevronStyles({direction, isMenu: true})} />\n      </li>\n    </UNSTABLE_CollectionRendererContext.Provider>\n  );\n};\n\n/** Breadcrumbs show hierarchy and navigational context for a user’s location within an application. */\nlet _Breadcrumbs = /*#__PURE__*/ (forwardRef as forwardRefType)(Breadcrumbs);\nexport {_Breadcrumbs as Breadcrumbs};\n\nlet HiddenBreadcrumbs = function (props: {listRef: RefObject<HTMLDivElement | null>, items: Array<Node<any>>, size: string}) {\n  let {listRef, items, size} = props;\n  return (\n    <div\n      // @ts-ignore\n      inert=\"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><FolderIcon /></ActionButton>\n    </div>\n  );\n};\n\nconst breadcrumbStyles = style({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'start',\n  height: 'control',\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({\n  ...focusRing(),\n  borderRadius: 'sm',\n  font: 'control',\n  color: {\n    default: 'neutral-subdued',\n    isDisabled: 'disabled',\n    isCurrent: 'neutral',\n    forcedColors: {\n      default: 'LinkText',\n      isDisabled: '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: 'control',\n  fontWeight: 'bold'\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 extends Omit<AriaBreadcrumbItemProps, 'children' | 'style' | 'className' | 'autoFocus'>, LinkDOMProps {\n  /** The children of the breadcrumb item. */\n  children?: ReactNode\n}\n\nfunction Breadcrumb({children, ...props}: BreadcrumbProps, ref: DOMRef<HTMLLIElement>) {\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 (\n          isCurrent ?\n            <div\n              className={currentStyles({size})}>\n              <Provider\n                values={[\n                  [HeadingContext, {className: heading}]\n                ]}>\n                {children}\n              </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}) => linkStyles({isFocused, isFocusVisible, isHovered, isDisabled, size, isPressed})}>\n                  {children}\n                </Link>\n                <ChevronIcon\n                  size=\"M\"\n                  className={chevronStyles({direction})} />\n              </>\n            )\n        );\n      }}\n    </AriaBreadcrumb>\n  );\n}\n\n/** An individual Breadcrumb for Breadcrumbs. */\nlet _Breadcrumb = /*#__PURE__*/ (forwardRef as forwardRefType)(Breadcrumb);\nexport {_Breadcrumb as Breadcrumb};\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      <UNSTABLE_CollectionRendererContext.Provider value={CollapsingCollectionRenderer}>\n        {children}\n      </UNSTABLE_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(currListRef.querySelectorAll('[data-hidden-breadcrumb]')) 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 (totalWidth <= containerWidth - (collection.size * containerGap) && collection.size <= MAX_VISIBLE_ITEMS) {\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 = 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 => <Fragment key={node.key}>{node.render?.(node)}</Fragment >)}\n        </>\n      ) : (\n        <>\n          {children.map(node => <Fragment key={node.key}>{node.render?.(node)}</Fragment>)}\n        </>\n      )}\n    </>\n  );\n};\n"],"names":[],"version":3,"file":"Breadcrumbs.mjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Breadcrumbs.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionButton} from './ActionButton';\nimport {\n  Breadcrumb as AriaBreadcrumb,\n  BreadcrumbsProps as AriaBreadcrumbsProps,\n  CollectionRenderer,\n  ContextValue,\n  HeadingContext,\n  Link,\n  Provider,\n  Breadcrumbs as RACBreadcrumbs,\n  UNSTABLE_CollectionRendererContext,\n  UNSTABLE_DefaultCollectionRenderer\n} from 'react-aria-components';\nimport {AriaBreadcrumbItemProps, useLocale} from 'react-aria';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {Collection, DOMRef, DOMRefValue, LinkDOMProps, Node} from '@react-types/shared';\nimport {createContext, forwardRef, Fragment, ReactNode, RefObject, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {focusRing, size, style} from '../style' with { type: 'macro' };\nimport FolderIcon from '../s2wf-icons/S2_Icon_FolderBreadcrumb_20_N.svg';\nimport {forwardRefType} from './types';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {Menu, MenuItem, MenuTrigger} from './Menu';\nimport {Text} from './Content';\nimport {useDOMRef, useResizeObserver} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\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> extends Omit<AriaBreadcrumbsProps<T>, 'children' | 'items' | 'style' | 'className'>, BreadcrumbsStyleProps, StyleProps {\n  /** The children of the Breadcrumbs. */\n  children?: ReactNode\n}\n\nexport const BreadcrumbsContext = createContext<ContextValue<BreadcrumbsProps<any>, DOMRefValue<HTMLOListElement>>>(null);\n\nconst wrapper = style<BreadcrumbsStyleProps>({\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      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}, getAllowedOverrides());\n\nconst InternalBreadcrumbsContext = createContext<BreadcrumbsProps<any>>({});\n\nfunction Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: DOMRef<HTMLOListElement>) {\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\n      values={[\n        [InternalBreadcrumbsContext, {size, isDisabled}]\n      ]}>\n      <CollapsingCollection containerRef={domRef} onAction={props.onAction}>\n        <RACBreadcrumbs\n          {...otherProps}\n          isDisabled={isDisabled}\n          ref={domRef}\n          style={UNSAFE_style}\n          className={UNSAFE_className + wrapper({\n            size\n          }, styles)}>\n          {children}\n        </RACBreadcrumbs>\n      </CollapsingCollection>\n    </Provider>\n  );\n}\n\nlet BreadcrumbMenu = (props: {items: Array<Node<any>>, onAction: BreadcrumbsProps<unknown>['onAction']}) => {\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    <UNSTABLE_CollectionRendererContext.Provider value={UNSTABLE_DefaultCollectionRenderer}>\n      <li className={breadcrumbStyles({size, isDisabled, isMenu: true})}>\n        <MenuTrigger>\n          <ActionButton isDisabled={isDisabled} isQuiet aria-label={label}><FolderIcon /></ActionButton>\n          <Menu items={items} onAction={onAction}>\n            {(item: Node<any>) => (\n              <MenuItem\n                {...item.props.originalProps}\n                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\n          size={size}\n          className={chevronStyles({direction, isMenu: true})} />\n      </li>\n    </UNSTABLE_CollectionRendererContext.Provider>\n  );\n};\n\n/** Breadcrumbs show hierarchy and navigational context for a user’s location within an application. */\nlet _Breadcrumbs = /*#__PURE__*/ (forwardRef as forwardRefType)(Breadcrumbs);\nexport {_Breadcrumbs as Breadcrumbs};\n\nlet HiddenBreadcrumbs = function (props: {listRef: RefObject<HTMLDivElement | null>, items: Array<Node<any>>, size: string}) {\n  let {listRef, items, size} = props;\n  return (\n    <div\n      // @ts-ignore\n      inert=\"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><FolderIcon /></ActionButton>\n    </div>\n  );\n};\n\nconst breadcrumbStyles = style({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'start',\n  height: 'control',\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({\n  ...focusRing(),\n  borderRadius: 'sm',\n  font: 'control',\n  color: {\n    default: 'neutral-subdued',\n    isDisabled: 'disabled',\n    isCurrent: 'neutral',\n    forcedColors: {\n      default: 'LinkText',\n      isDisabled: '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: 'control',\n  fontWeight: 'bold'\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 extends Omit<AriaBreadcrumbItemProps, 'children' | 'style' | 'className' | 'autoFocus'>, LinkDOMProps {\n  /** The children of the breadcrumb item. */\n  children?: ReactNode\n}\n\nfunction Breadcrumb({children, ...props}: BreadcrumbProps, ref: DOMRef<HTMLLIElement>) {\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 (\n          isCurrent ?\n            <div\n              className={currentStyles({size})}>\n              <Provider\n                values={[\n                  [HeadingContext, {className: heading}]\n                ]}>\n                {children}\n              </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}) => linkStyles({isFocused, isFocusVisible, isHovered, isDisabled, size, isPressed})}>\n                  {children}\n                </Link>\n                <ChevronIcon\n                  size=\"M\"\n                  className={chevronStyles({direction})} />\n              </>\n            )\n        );\n      }}\n    </AriaBreadcrumb>\n  );\n}\n\n/** An individual Breadcrumb for Breadcrumbs. */\nlet _Breadcrumb = /*#__PURE__*/ (forwardRef as forwardRefType)(Breadcrumb);\nexport {_Breadcrumb as Breadcrumb};\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      <UNSTABLE_CollectionRendererContext.Provider value={CollapsingCollectionRenderer}>\n        {children}\n      </UNSTABLE_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(currListRef.querySelectorAll('[data-hidden-breadcrumb]')) 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 (totalWidth <= containerWidth - (collection.size * containerGap) && collection.size <= MAX_VISIBLE_ITEMS) {\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 = 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 => <Fragment key={node.key}>{node.render?.(node)}</Fragment >)}\n        </>\n      ) : (\n        <>\n          {children.map(node => <Fragment key={node.key}>{node.render?.(node)}</Fragment>)}\n        </>\n      )}\n    </>\n  );\n};\n"],"names":[],"version":3,"file":"Breadcrumbs.mjs.map"}

package/dist/Button.cjs

@@ -168,29 +168,18 @@ const $25d06cf8d4e72761$var$button = function anonymous(props, overrides) {
     rules += ' __Da';
     rules += ' o-375tou';
     if (!$q) {
-        if (props.size === "XL") {
-            rules += ' q-soocicby';
-            rules += ' q-soocicx';
-        } else if (props.size === "L") {
-            rules += ' q-soocicbu';
-            rules += ' q-soocicr';
-        } else if (props.size === "S") {
-            rules += ' q-soocicbn';
-            rules += ' q-soocicm';
-        } else if (props.size === "XS") {
-            rules += ' q-soocicbl';
-            rules += ' q-soocick';
-        } else {
-            rules += ' q-soocicbr';
-            rules += ' q-soocicq';
-        }
+        if (props.size === "XL") rules += ' q-soocicn';
+        else if (props.size === "L") rules += ' q-soocicl';
+        else if (props.size === "S") rules += ' q-soocich';
+        else if (props.size === "XS") rules += ' q-soocicg';
+        else rules += ' q-soocicj';
     }
     rules += ' _vg';
     rules += ' _wg';
     rules += ' _xg';
     rules += ' _yg';
     rules += ' __na';
-    if (!$l) rules += ' l7';
+    if (!$l) rules += ' lJ';
     rules += ' _ld';
     rules += ' C-soocica';
     rules += ' CJ';
@@ -334,22 +323,11 @@ const $25d06cf8d4e72761$var$button = function anonymous(props, overrides) {
     rules += ' -rwx0fg_e-b';
     rules += ' _zb';
     rules += ' __R-yksgrp';
-    if (props.size === "XL") {
-        rules += ' -_375tou_o-by';
-        rules += ' -_375tou_o-x';
-    } else if (props.size === "L") {
-        rules += ' -_375tou_o-bu';
-        rules += ' -_375tou_o-r';
-    } else if (props.size === "S") {
-        rules += ' -_375tou_o-bn';
-        rules += ' -_375tou_o-m';
-    } else if (props.size === "XS") {
-        rules += ' -_375tou_o-bl';
-        rules += ' -_375tou_o-k';
-    } else {
-        rules += ' -_375tou_o-br';
-        rules += ' -_375tou_o-q';
-    }
+    if (props.size === "XL") rules += ' -_375tou_o-n';
+    else if (props.size === "L") rules += ' -_375tou_o-l';
+    else if (props.size === "S") rules += ' -_375tou_o-h';
+    else if (props.size === "XS") rules += ' -_375tou_o-g';
+    else rules += ' -_375tou_o-j';
     if (props.fillStyle === "outline") rules += ' -_375tp0_u-c';
     else if (props.fillStyle === "fill") rules += ' -_375tp0_u-a';
     if (props.fillStyle === "outline") rules += ' -_375tp1_v-c';
@@ -464,32 +442,14 @@ function $25d06cf8d4e72761$var$Button(props1, ref) {
                         staticColor: staticColor,
                         styles: function anonymous(props) {
                             let rules = " .";
-                            if (props.size === "XL") {
-                                rules += ' lbn';
-                                rules += ' lm';
-                            } else if (props.size === "L") {
-                                rules += ' lbl';
-                                rules += ' lk';
-                            } else if (props.size === "M") {
-                                rules += ' lb-1nxaedl';
-                                rules += ' l-1ytbuww';
-                            } else if (props.size === "S") {
-                                rules += ' lb-1n4kawg';
-                                rules += ' l-9w1ydn';
-                            }
-                            if (props.size === "XL") {
-                                rules += ' kbn';
-                                rules += ' km';
-                            } else if (props.size === "L") {
-                                rules += ' kbl';
-                                rules += ' kk';
-                            } else if (props.size === "M") {
-                                rules += ' kb-1nxaedl';
-                                rules += ' k-1ytbuww';
-                            } else if (props.size === "S") {
-                                rules += ' kb-1n4kawg';
-                                rules += ' k-9w1ydn';
-                            }
+                            if (props.size === "XL") rules += ' lh';
+                            else if (props.size === "L") rules += ' lg';
+                            else if (props.size === "M") rules += ' l-9ed7ss';
+                            else if (props.size === "S") rules += ' l-1l1y6lj';
+                            if (props.size === "XL") rules += ' kh';
+                            else if (props.size === "L") rules += ' kg';
+                            else if (props.size === "M") rules += ' k-9ed7ss';
+                            else if (props.size === "S") rules += ' k-1l1y6lj';
                             return rules;
                         }({
                             size: size