@react-spectrum/s2 3.0.0-nightly-2e9061df6-250425 → 3.0.0-nightly-63d4359d6-250426

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (69) hide show
  1. package/dist/Breadcrumbs.cjs +4 -2
  2. package/dist/Breadcrumbs.cjs.map +1 -1
  3. package/dist/Breadcrumbs.css.map +1 -1
  4. package/dist/Breadcrumbs.mjs +4 -2
  5. package/dist/Breadcrumbs.mjs.map +1 -1
  6. package/dist/CloseButton.cjs.map +1 -1
  7. package/dist/CloseButton.css.map +1 -1
  8. package/dist/CloseButton.mjs.map +1 -1
  9. package/dist/ComboBox.cjs.map +1 -1
  10. package/dist/ComboBox.css.map +1 -1
  11. package/dist/ComboBox.mjs.map +1 -1
  12. package/dist/Menu.cjs +2 -0
  13. package/dist/Menu.cjs.map +1 -1
  14. package/dist/Menu.css +8 -0
  15. package/dist/Menu.css.map +1 -1
  16. package/dist/Menu.mjs +2 -0
  17. package/dist/Menu.mjs.map +1 -1
  18. package/dist/NumberField.cjs +19 -39
  19. package/dist/NumberField.cjs.map +1 -1
  20. package/dist/NumberField.css +0 -28
  21. package/dist/NumberField.css.map +1 -1
  22. package/dist/NumberField.mjs +19 -39
  23. package/dist/NumberField.mjs.map +1 -1
  24. package/dist/SegmentedControl.cjs +4 -1
  25. package/dist/SegmentedControl.cjs.map +1 -1
  26. package/dist/SegmentedControl.css.map +1 -1
  27. package/dist/SegmentedControl.mjs +4 -1
  28. package/dist/SegmentedControl.mjs.map +1 -1
  29. package/dist/Slider.cjs.map +1 -1
  30. package/dist/Slider.css.map +1 -1
  31. package/dist/Slider.mjs.map +1 -1
  32. package/dist/TableView.cjs +1 -4
  33. package/dist/TableView.cjs.map +1 -1
  34. package/dist/TableView.css +0 -4
  35. package/dist/TableView.css.map +1 -1
  36. package/dist/TableView.mjs +1 -4
  37. package/dist/TableView.mjs.map +1 -1
  38. package/dist/Tabs.cjs +6 -1
  39. package/dist/Tabs.cjs.map +1 -1
  40. package/dist/Tabs.css.map +1 -1
  41. package/dist/Tabs.mjs +6 -1
  42. package/dist/Tabs.mjs.map +1 -1
  43. package/dist/TabsPicker.cjs.map +1 -1
  44. package/dist/TabsPicker.css.map +1 -1
  45. package/dist/TabsPicker.mjs.map +1 -1
  46. package/dist/TagGroup.cjs.map +1 -1
  47. package/dist/TagGroup.css.map +1 -1
  48. package/dist/TagGroup.mjs.map +1 -1
  49. package/dist/types.d.ts +11 -11
  50. package/dist/types.d.ts.map +1 -1
  51. package/package.json +22 -22
  52. package/src/Breadcrumbs.tsx +7 -5
  53. package/src/CloseButton.tsx +1 -1
  54. package/src/ComboBox.tsx +2 -1
  55. package/src/Menu.tsx +4 -3
  56. package/src/NumberField.tsx +4 -16
  57. package/src/SegmentedControl.tsx +13 -10
  58. package/src/Slider.tsx +4 -3
  59. package/src/TableView.tsx +4 -5
  60. package/src/Tabs.tsx +10 -4
  61. package/src/TabsPicker.tsx +2 -2
  62. package/src/TagGroup.tsx +2 -1
  63. package/style/dist/spectrum-theme.cjs +9 -1
  64. package/style/dist/spectrum-theme.cjs.map +1 -1
  65. package/style/dist/spectrum-theme.mjs +9 -1
  66. package/style/dist/spectrum-theme.mjs.map +1 -1
  67. package/style/dist/types.d.ts +3 -2
  68. package/style/dist/types.d.ts.map +1 -1
  69. package/style/spectrum-theme.ts +2 -1
@@ -297,7 +297,8 @@ const $4130f4e17f7081aa$var$linkStyles = function anonymous(props) {
297
297
  rules += ' _fb';
298
298
  rules += ' _g-1x99dlob';
299
299
  rules += ' _ga';
300
- if (props.isDisabled) rules += ' aa_____O';
300
+ if (props.isCurrent) rules += ' aa_____O';
301
+ else if (props.isDisabled) rules += ' aa_____O';
301
302
  else rules += ' aa_____Q';
302
303
  if (props.isCurrent) {
303
304
  if (props.isPressed) rules += ' ao';
@@ -409,7 +410,8 @@ const $4130f4e17f7081aa$export$dabcc1ec9dd9d1cc = /*#__PURE__*/ (0, $PCemd$react
409
410
  isHovered: isHovered,
410
411
  isDisabled: isDisabled,
411
412
  size: size,
412
- isPressed: isPressed
413
+ isPressed: isPressed,
414
+ isCurrent: isCurrent
413
415
  }),
414
416
  children: children
415
417
  }),
@@ -1 +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 CollectionRendererContext,\n ContextValue,\n DefaultCollectionRenderer,\n HeadingContext,\n Link,\n Provider,\n Breadcrumbs as RACBreadcrumbs\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'};\nimport {inertValue, useLayoutEffect} from '@react-aria/utils';\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 {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<Partial<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 // 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}, getAllowedOverrides());\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 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 <CollectionRendererContext.Provider value={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 </CollectionRendererContext.Provider>\n );\n};\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={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><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' | 'onClick'>, 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({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// 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(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.cjs.map"}
1
+ {"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AAiCD,MAAM,0CAAoB;AAC1B,MAAM,0CAAoB;AAwBnB,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAA+E;AAE7H,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BN,MAAM,iEAA6B,CAAA,GAAA,0BAAY,EAAkC,CAAC;AAG3E,MAAM,2CAA4B,AAAd,WAAW,GAAI,CAAA,GAAA,uBAAS,EAAqB,SAAS,YAA8B,KAA0B,EAAE,GAA6B;IACtK,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,oBACF,mBAAmB,kBACnB,YAAY,UACZ,MAAM,QACN,OAAO,eACP,QAAQ,cACR,UAAU,EACV,GAAG,YACJ,GAAG;IAEJ,qBACE,gCAAC,CAAA,GAAA,mCAAO;QACN,QAAQ;YACN;gBAAC;gBAA4B;0BAAC;gCAAM;gBAAU;aAAE;SACjD;kBACD,cAAA,gCAAC;YAAqB,cAAc;YAAQ,UAAU,MAAM,QAAQ;sBAClE,cAAA,gCAAC,CAAA,GAAA,sCAAa;gBACX,GAAG,UAAU;gBACd,YAAY;gBACZ,KAAK;gBACL,OAAO;gBACP,WAAW,mBAAmB,8BAAQ;0BACpC;gBACF,GAAG;0BACF;;;;AAKX;AAEA,IAAI,uCAAiB,CAAC;IACpB,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,IAAI,SAAC,KAAK,YAAE,QAAQ,EAAC,GAAG;IACxB,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,0BAAQ;IAC1B,IAAI,QAAC,IAAI,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,uBAAS,EAAE;IACpC,IAAI,QAAQ,gBAAgB,MAAM,CAAC;IACnC,qBACE,gCAAC,CAAA,GAAA,oDAAwB,EAAE,QAAQ;QAAC,OAAO,CAAA,GAAA,oDAAwB;kBACjE,cAAA,iCAAC;YAAG,WAAW,uCAAiB;sBAAC;4BAAM;gBAAY,QAAQ;YAAI;;8BAC7D,iCAAC,CAAA,GAAA,qCAAU;;sCACT,gCAAC,CAAA,GAAA,sCAAW;4BAAE,YAAY;4BAAY,OAAO;4BAAC,cAAY;sCAAO,cAAA,gCAAC,CAAA,GAAA,iCAAS;;sCAC3E,gCAAC,CAAA,GAAA,8BAAG;4BAAE,OAAO;4BAAO,UAAU;sCAC3B,CAAC,qBACA,gCAAC,CAAA,GAAA,kCAAO;oCACL,GAAG,KAAK,KAAK,CAAC,aAAa;oCAC5B,KAAK,KAAK,GAAG;iDACb,gCAAC,CAAA,GAAA,8BAAG;oCAAE,MAAK;8CACR,KAAK,KAAK,CAAC,QAAQ,CAAC;8CAAC;wCAAM,WAAW;wCAAO,QAAQ;oCAAI;;;;;8BAMpE,gCAAC,CAAA,GAAA,iCAAU;oBACT,MAAM;oBACN,WAAW,oCAAc;mCAAC;wBAAW,QAAQ;oBAAI;;;;;AAI3D;AAEA,IAAI,0CAAoB,SAAU,KAAyF;IACzH,IAAI,WAAC,OAAO,SAAE,KAAK,QAAE,IAAI,EAAC,GAAG;IAC7B,qBACE,iCAAC;QACC,aAAa;QACb,OAAO,CAAA,GAAA,gCAAS,EAAE;QAClB,KAAK;QACL,SAAS;;YAaR,MAAM,GAAG,CAAC,CAAC,MAAM;gBAChB,6FAA6F;gBAC7F,qBACE,gCAAC;oBACC,wBAAsB;oBACtB,OAAO,KAAK,KAAK,CAAC,YAAY;oBAE9B,WAAW,KAAK,KAAK,CAAC,SAAS,CAAC;8BAAC;wBAAM,WAAW,QAAQ,MAAM,MAAM,GAAG;oBAAC;8BACzE,KAAK,KAAK,CAAC,QAAQ,CAAC;8BAAC;wBAAM,WAAW,QAAQ,MAAM,MAAM,GAAG;oBAAC;mBAF1D,KAAK,GAAG;YAKnB;0BACA,gCAAC,CAAA,GAAA,sCAAW;gBAAE,oBAAkB;gBAAC,OAAO;0BAAC,cAAA,gCAAC,CAAA,GAAA,iCAAS;;;;AAGzD;AAEA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBN,MAAM;;;;;;;;;;;;;;;;;AAsBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,8EAA8E;AAC9E,MAAM;AAYC,MAAM,4CAA2B,AAAd,WAAW,GAAI,CAAA,GAAA,uBAAS,EAAqB,SAAS,WAAW,YAAC,QAAQ,EAAE,GAAG,OAAuB,EAAE,GAA0B;IAC1J,IAAI,QAAC,IAAI,UAAE,MAAM,OAAE,GAAG,YAAE,QAAQ,QAAE,IAAI,kBAAE,cAAc,EAAC,GAAG;IAC1D,IAAI,QAAC,OAAO,KAAI,GAAG,CAAA,GAAA,uBAAS,EAAE,qDAA+B,CAAC;IAC9D,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,0BAAQ;IAC1B,qBACE,gCAAC,CAAA,GAAA,qCAAa;QACX,GAAG,KAAK;QACT,KAAK;QACL,aAAa;QACb,eAAe;QACf,WAAW,CAAC,aAAC,SAAS,cAAE,UAAU,EAAC,GAAK,uCAAiB;sBAAC;2BAAM;4BAAW;YAAU;kBACpF,CAAC,aACA,SAAS,cACT,UAAU,UACV,aAAa;QACb,MAAM,EACP;YACC,IAAI,QACF,OAAO;YAET,OACE,0BACE,gCAAC;gBACC,WAAW,oCAAc;0BAAC;gBAAI;0BAC9B,cAAA,gCAAC,CAAA,GAAA,mCAAO;oBACN,QAAQ;wBACN;4BAAC,CAAA,GAAA,yCAAa;4BAAG;gCAAC,WAAW;4BAAO;yBAAE;qBACvC;8BACA;;+BAIH;;kCACE,gCAAC,CAAA,GAAA,+BAAG;wBACF,OAAO,CAAC,kBAAC,cAAc,EAAC,GAAM,CAAA;gCAAC,UAAU,iBAAiB,SAAS;4BAAY,CAAA;wBAC/E,MAAM;wBACN,QAAQ;wBACR,KAAK;wBACL,UAAU;wBACV,MAAM;wBACN,gBAAgB;wBAChB,YAAY,cAAc;wBAC1B,WAAW,CAAC,aAAC,SAAS,kBAAE,cAAc,aAAE,SAAS,cAAE,UAAU,aAAE,SAAS,EAAC,GAAK,iCAAW;2CAAC;gDAAW;2CAAgB;4CAAW;sCAAY;2CAAM;2CAAW;4BAAS;kCACrK;;kCAEH,gCAAC,CAAA,GAAA,iCAAU;wBACT,MAAK;wBACL,WAAW,oCAAc;uCAAC;wBAAS;;;;QAI/C;;AAGN;AAEA,wDAAwD;AACxD,IAAI,sDAAkB,CAAA,GAAA,0BAAY,EAGxB;AAEV,SAAS,2CAAqB,YAAC,QAAQ,gBAAE,YAAY,YAAE,QAAQ,EAAC;IAC9D,qBACE,gCAAC,sCAAgB,QAAQ;QAAC,OAAO;0BAAC;sBAAc;QAAQ;kBACtD,cAAA,gCAAC,CAAA,GAAA,oDAAwB,EAAE,QAAQ;YAAC,OAAO;sBACxC;;;AAIT;AAEA,IAAI,qDAAmD;IACrD,gBAAe,cAAC,UAAU,EAAC;QACzB,OAAO,0CAAoB;IAC7B;IACA,kBAAiB,cAAC,UAAU,EAAC;QAC3B,OAAO,0CAAoB;IAC7B;AACF;AAEA,IAAI,4CAAsB,CAAC;IACzB,IAAI,gBAAC,YAAY,YAAE,QAAQ,EAAC,GAAG,CAAA,GAAA,uBAAS,EAAE,0CAAoB,CAAC;IAC/D,IAAI,CAAC,cAAc,gBAAgB,GAAG,CAAA,GAAA,qBAAO,EAAE,WAAW,IAAI;IAC9D,IAAI,QAAC,OAAO,KAAI,GAAG,CAAA,GAAA,uBAAS,EAAE;IAE9B,IAAI,WAAW,CAAA,GAAA,oBAAM,EAAE;QACrB,IAAI,SAAsB,EAAE;QAC5B,KAAK,IAAI,OAAO,WAAW,OAAO,GAChC,OAAO,IAAI,CAAC,WAAW,OAAO,CAAC;QAEjC,OAAO;IACT,GAAG;QAAC;KAAW;IAEf,IAAI,UAAU,CAAA,GAAA,mBAAK,EAAyB;IAC5C,IAAI,iBAAiB,CAAA,GAAA,wBAAU,EAAE;QAC/B,IAAI,cAAqC,QAAQ,OAAO;QACxD,IAAI,CAAC,aAAa;YAChB,gBAAgB,WAAW,IAAI;YAC/B;QACF;QACA,IAAI,YAAY,YAAY,aAAa;QACzC,IAAI,CAAC,WAAW;YACd,gBAAgB,WAAW,IAAI;YAC/B;QACF;QAEA,IAAI,YAAY,MAAM,IAAI,CAAC,YAAY,gBAAgB,CAAC;QACxD,IAAI,SAAS,YAAY,aAAa,CAAC;QACvC,IAAI,UAAU,MAAM,IAAI,GAAG;YACzB,gBAAgB,WAAW,IAAI;YAC/B;QACF;QACA,IAAI,iBAAiB,UAAU,WAAW;QAC1C,IAAI,eAAe,SAAS,iBAAiB,WAAW,GAAG,EAAE;QAC7D,IAAI,YAAY,SAAS,iBAAiB,QAAQ,iBAAiB,EAAE;QACrE,IAAI,kBAAkB;QACtB,IAAI,kBAAkB;QAEtB,IAAI,SAAwB,EAAE;QAC9B,IAAI,aAAa;QACjB,KAAK,IAAI,cAAc,UAAW;YAChC,IAAI,QAAQ,WAAW,WAAW,GAAG,GAAG,8BAA8B;YACtE,OAAO,IAAI,CAAC;YACZ,cAAc;QAChB;QAEA,8CAA8C;QAC9C,IAAI,cAAc,iBAAkB,WAAW,IAAI,GAAG,gBAAiB,WAAW,IAAI,IAAI,yCAAmB;YAC3G,gBAAgB,WAAW,IAAI;YAC/B;QACF;QAEA,2FAA2F;QAC3F,IAAI,eAAe,OAAO,KAAK;QAC/B,IAAI,iBAAiB,iBAAiB,eAAe,YAAY,OAAO,WAAW,GAAG;QACtF,mBAAmB,GAAG,wCAAwC;QAC9D,KAAK,IAAI,SAAS,OAAO,OAAO,GAAI;YAClC,kBAAkB;YAClB,IAAI,kBAAkB,GACpB;YAEF,kBAAkB;YAClB;QACF;QAEA,gBAAgB,KAAK,GAAG,CAAC,yCAAmB,KAAK,GAAG,CAAC,iBAAiB;IACxE,GAAG;QAAC,WAAW,IAAI;QAAE;KAAgB;IAErC,4FAA4F;IAC5F,CAAA,GAAA,2CAAgB,EAAE;QAAC,KAAK;QAAc,UAAU;IAAc;IAE9D,CAAA,GAAA,qCAAc,EAAE;QACd,IAAI,WAAW,IAAI,GAAG,GACpB,eAAe;IAEnB,GAAG;QAAC,WAAW,IAAI;QAAE;KAAe;IAEpC,CAAA,GAAA,sBAAQ,EAAE;QACR,kDAAkD;QAClD,SAAS,KAAK,EAAE,MAAM,KAAK,IAAM;IACjC,uDAAuD;IACzD,GAAG,EAAE;IACL,IAAI,aAAa,WAAW,IAAI,GAAG;IAEnC,qBACE;;0BACE,gCAAC;gBAAkB,OAAO;gBAAU,MAAM;gBAAM,SAAS;;YACxD,eAAe,WAAW,IAAI,IAAI,WAAW,IAAI,GAAG,kBACnD;;oBACG,QAAQ,CAAC,EAAE,CAAC,MAAM,GAAG,QAAQ,CAAC,EAAE;kCACjC,gCAAC;wBAAe,OAAO,SAAS,KAAK,CAAC,GAAG;wBAAa,UAAU;;oBAC/D,SAAS,KAAK,CAAC,YAAY,GAAG,CAAC,CAAA,qBAAQ,gCAAC,CAAA,GAAA,qBAAO;sCAAkB,KAAK,MAAM,GAAG;2BAAzB,KAAK,GAAG;;+BAGjE;0BACG,SAAS,GAAG,CAAC,CAAA,qBAAQ,gCAAC,CAAA,GAAA,qBAAO;kCAAkB,KAAK,MAAM,GAAG;uBAAzB,KAAK,GAAG;;;;AAKvD","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 CollectionRendererContext,\n ContextValue,\n DefaultCollectionRenderer,\n HeadingContext,\n Link,\n LinkRenderProps,\n Provider,\n Breadcrumbs as RACBreadcrumbs\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'};\nimport {inertValue, useLayoutEffect} from '@react-aria/utils';\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 {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<Partial<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 // 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}, getAllowedOverrides());\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 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 <CollectionRendererContext.Provider value={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 </CollectionRendererContext.Provider>\n );\n};\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={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><FolderIcon /></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: '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<LinkRenderProps & {size?: 'M' | 'L', isCurrent?: boolean}>({\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 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: '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' | 'onClick'>, 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({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, isCurrent})}>\n {children}\n </Link>\n <ChevronIcon\n size=\"M\"\n className={chevronStyles({direction})} />\n </>\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(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.cjs.map"}
@@ -1 +1 @@
1
- {"mappings":"ACqEgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAuGC;;;;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;;;;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;;;;;AAvNA;EAuNA;;;;EAAA;;;;;AAlFS;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","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 CollectionRendererContext,\n ContextValue,\n DefaultCollectionRenderer,\n HeadingContext,\n Link,\n Provider,\n Breadcrumbs as RACBreadcrumbs\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'};\nimport {inertValue, useLayoutEffect} from '@react-aria/utils';\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 {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<Partial<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 // 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}, getAllowedOverrides());\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 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 <CollectionRendererContext.Provider value={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 </CollectionRendererContext.Provider>\n );\n};\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={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><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' | 'onClick'>, 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({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// 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(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"}
1
+ {"mappings":"ACsEgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAuGC;;;;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;;;;EAAA;;;;EAsBH;;;;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;;;;EAMN;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;;AAxNA;EAwNA;;;;EAAA;;;;;AAnFS;EAAA;IAAA;;;;IA6CN;;;;IAAA;;;;IAAA;;;;;;AAtBG;EAAA;IAAA;;;;IAsDA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAMN;;;;;;AAtCG;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 BreadcrumbsProps as AriaBreadcrumbsProps,\n CollectionRenderer,\n CollectionRendererContext,\n ContextValue,\n DefaultCollectionRenderer,\n HeadingContext,\n Link,\n LinkRenderProps,\n Provider,\n Breadcrumbs as RACBreadcrumbs\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'};\nimport {inertValue, useLayoutEffect} from '@react-aria/utils';\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 {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<Partial<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 // 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}, getAllowedOverrides());\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 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 <CollectionRendererContext.Provider value={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 </CollectionRendererContext.Provider>\n );\n};\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={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><FolderIcon /></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: '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<LinkRenderProps & {size?: 'M' | 'L', isCurrent?: boolean}>({\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 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: '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' | 'onClick'>, 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({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, isCurrent})}>\n {children}\n </Link>\n <ChevronIcon\n size=\"M\"\n className={chevronStyles({direction})} />\n </>\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(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"}
@@ -289,7 +289,8 @@ const $f329dd4f2aa58cd0$var$linkStyles = function anonymous(props) {
289
289
  rules += ' _fb';
290
290
  rules += ' _g-1x99dlob';
291
291
  rules += ' _ga';
292
- if (props.isDisabled) rules += ' aa_____O';
292
+ if (props.isCurrent) rules += ' aa_____O';
293
+ else if (props.isDisabled) rules += ' aa_____O';
293
294
  else rules += ' aa_____Q';
294
295
  if (props.isCurrent) {
295
296
  if (props.isPressed) rules += ' ao';
@@ -401,7 +402,8 @@ const $f329dd4f2aa58cd0$export$dabcc1ec9dd9d1cc = /*#__PURE__*/ (0, $a1dfd$forwa
401
402
  isHovered: isHovered,
402
403
  isDisabled: isDisabled,
403
404
  size: size,
404
- isPressed: isPressed
405
+ isPressed: isPressed,
406
+ isCurrent: isCurrent
405
407
  }),
406
408
  children: children
407
409
  }),
@@ -1 +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 CollectionRendererContext,\n ContextValue,\n DefaultCollectionRenderer,\n HeadingContext,\n Link,\n Provider,\n Breadcrumbs as RACBreadcrumbs\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'};\nimport {inertValue, useLayoutEffect} from '@react-aria/utils';\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 {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<Partial<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 // 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}, getAllowedOverrides());\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 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 <CollectionRendererContext.Provider value={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 </CollectionRendererContext.Provider>\n );\n};\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={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><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' | 'onClick'>, 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({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// 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(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"}
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 CollectionRendererContext,\n ContextValue,\n DefaultCollectionRenderer,\n HeadingContext,\n Link,\n LinkRenderProps,\n Provider,\n Breadcrumbs as RACBreadcrumbs\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'};\nimport {inertValue, useLayoutEffect} from '@react-aria/utils';\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 {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<Partial<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 // 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}, getAllowedOverrides());\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 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 <CollectionRendererContext.Provider value={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 </CollectionRendererContext.Provider>\n );\n};\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={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><FolderIcon /></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: '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<LinkRenderProps & {size?: 'M' | 'L', isCurrent?: boolean}>({\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 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: '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' | 'onClick'>, 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({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, isCurrent})}>\n {children}\n </Link>\n <ChevronIcon\n size=\"M\"\n className={chevronStyles({direction})} />\n </>\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(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"}
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AA0BD,MAAM,wCAAkB;IACtB,SAAS;IACT,eAAe;AACjB;AAEA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCC,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAAiF;AAKxH,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAAoC;IACtH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,gBAAC,YAAY,oBAAE,mBAAmB,IAAG,GAAG;IAC5C,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE;IAC7B,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,qBACE,gCAAC,CAAA,GAAA,iCAAK;QACH,GAAG,KAAK;QACT,KAAK;QACL,MAAK;QACL,cAAY,KAAK,CAAC,aAAa,IAAI,gBAAgB,MAAM,CAAC;QAC1D,OAAO,CAAA,GAAA,oCAAS,EAAE,QAAQ;QAC1B,WAAW,CAAA,cAAe,mBAAmB,6BAAO;gBAAC,GAAG,WAAW;gBAAE,aAAa,MAAM,WAAW;gBAAE,eAAe,CAAC,CAAC,MAAM,WAAW;YAAA,GAAG,MAAM,MAAM;kBACtJ,cAAA,gCAAC,CAAA,GAAA,iCAAQ;YAAE,MAAM,AAAC;gBAAC,GAAG;gBAAK,GAAG;gBAAM,GAAG;gBAAO,IAAI;YAAM,CAAW,CAAC,MAAM,IAAI,IAAI,IAAI;;;AAG5F","sources":["packages/@react-spectrum/s2/src/CloseButton.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 {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {Button, ButtonProps, ContextValue} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport CrossIcon from '../ui-icons/Cross';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CloseButtonProps extends Pick<ButtonProps, 'isDisabled' | 'onPress'>, StyleProps {\n /**\n * The size of the CloseButton.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /** The static color style to apply. Useful when the Button appears over a color background. */\n staticColor?: 'white' | 'black' | 'auto'\n}\n\nconst hoverBackground = {\n default: 'gray-200',\n isStaticColor: 'transparent-overlay-200'\n} as const;\n\nconst styles = style({\n ...focusRing(),\n ...staticColor(),\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n size: 'control',\n flexShrink: 0,\n borderRadius: 'full',\n padding: 0,\n borderStyle: 'none',\n transition: 'default',\n backgroundColor: {\n default: 'transparent',\n isHovered: hoverBackground,\n isFocusVisible: hoverBackground,\n isPressed: hoverBackground\n },\n '--iconPrimary': {\n type: 'color',\n value: {\n default: 'neutral',\n isDisabled: 'disabled',\n isStaticColor: {\n default: baseColor('transparent-overlay-800'),\n isDisabled: 'transparent-overlay-400'\n },\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n }\n },\n outlineColor: {\n default: 'focus-ring',\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'Highlight'\n }\n}, getAllowedOverrides());\n\nexport const CloseButtonContext = createContext<ContextValue<Partial<CloseButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * A CloseButton allows a user to dismiss a dialog.\n */\nexport const CloseButton = forwardRef(function CloseButton(props: CloseButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, CloseButtonContext);\n let {UNSAFE_style, UNSAFE_className = ''} = props;\n let domRef = useFocusableRef(ref);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n return (\n <Button\n {...props}\n ref={domRef}\n slot=\"close\"\n aria-label={props['aria-label'] || stringFormatter.format('dialog.dismiss')}\n style={pressScale(domRef, UNSAFE_style)}\n className={renderProps => UNSAFE_className + styles({...renderProps, staticColor: props.staticColor, isStaticColor: !!props.staticColor}, props.styles)}>\n <CrossIcon size={({S: 'L', M: 'XL', L: 'XXL', XL: 'XXXL'} as const)[props.size || 'M']} />\n </Button>\n );\n});\n"],"names":[],"version":3,"file":"CloseButton.cjs.map"}
1
+ {"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AA0BD,MAAM,wCAAkB;IACtB,SAAS;IACT,eAAe;AACjB;AAEA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCC,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAAiF;AAKxH,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAAoC;IACtH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,gBAAC,YAAY,oBAAE,mBAAmB,IAAG,GAAG;IAC5C,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE;IAC7B,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,qBACE,gCAAC,CAAA,GAAA,iCAAK;QACH,GAAG,KAAK;QACT,KAAK;QACL,MAAK;QACL,cAAY,KAAK,CAAC,aAAa,IAAI,gBAAgB,MAAM,CAAC;QAC1D,OAAO,CAAA,GAAA,oCAAS,EAAE,QAAQ;QAC1B,WAAW,CAAA,cAAe,mBAAmB,6BAAO;gBAAC,GAAG,WAAW;gBAAE,aAAa,MAAM,WAAW;gBAAE,eAAe,CAAC,CAAC,MAAM,WAAW;YAAA,GAAG,MAAM,MAAM;kBACtJ,cAAA,gCAAC,CAAA,GAAA,iCAAQ;YAAE,MAAM,AAAC;gBAAC,GAAG;gBAAK,GAAG;gBAAM,GAAG;gBAAO,IAAI;YAAM,CAAW,CAAC,MAAM,IAAI,IAAI,IAAI;;;AAG5F","sources":["packages/@react-spectrum/s2/src/CloseButton.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 {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {Button, ButtonProps, ContextValue} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport CrossIcon from '../ui-icons/Cross';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CloseButtonProps extends Pick<ButtonProps, 'isDisabled' | 'onPress'>, StyleProps {\n /**\n * The size of the CloseButton.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /** The static color style to apply. Useful when the Button appears over a color background. */\n staticColor?: 'white' | 'black' | 'auto'\n}\n\nconst hoverBackground = {\n default: 'gray-200',\n isStaticColor: 'transparent-overlay-200'\n} as const;\n\nconst styles = style<CloseButtonProps & {isHovered: boolean, isFocusVisible: boolean, isPressed: boolean, isStaticColor: boolean}>({\n ...focusRing(),\n ...staticColor(),\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n size: 'control',\n flexShrink: 0,\n borderRadius: 'full',\n padding: 0,\n borderStyle: 'none',\n transition: 'default',\n backgroundColor: {\n default: 'transparent',\n isHovered: hoverBackground,\n isFocusVisible: hoverBackground,\n isPressed: hoverBackground\n },\n '--iconPrimary': {\n type: 'color',\n value: {\n default: 'neutral',\n isDisabled: 'disabled',\n isStaticColor: {\n default: baseColor('transparent-overlay-800'),\n isDisabled: 'transparent-overlay-400'\n },\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n }\n },\n outlineColor: {\n default: 'focus-ring',\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'Highlight'\n }\n}, getAllowedOverrides());\n\nexport const CloseButtonContext = createContext<ContextValue<Partial<CloseButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * A CloseButton allows a user to dismiss a dialog.\n */\nexport const CloseButton = forwardRef(function CloseButton(props: CloseButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, CloseButtonContext);\n let {UNSAFE_style, UNSAFE_className = ''} = props;\n let domRef = useFocusableRef(ref);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n return (\n <Button\n {...props}\n ref={domRef}\n slot=\"close\"\n aria-label={props['aria-label'] || stringFormatter.format('dialog.dismiss')}\n style={pressScale(domRef, UNSAFE_style)}\n className={renderProps => UNSAFE_className + styles({...renderProps, staticColor: props.staticColor, isStaticColor: !!props.staticColor}, props.styles)}>\n <CrossIcon size={({S: 'L', M: 'XL', L: 'XXL', XL: 'XXXL'} as const)[props.size || 'M']} />\n </Button>\n );\n});\n"],"names":[],"version":3,"file":"CloseButton.cjs.map"}
@@ -1 +1 @@
1
- {"mappings":"AAyCe;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA","sources":["packages/@react-spectrum/s2/src/CloseButton.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 {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {Button, ButtonProps, ContextValue} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport CrossIcon from '../ui-icons/Cross';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CloseButtonProps extends Pick<ButtonProps, 'isDisabled' | 'onPress'>, StyleProps {\n /**\n * The size of the CloseButton.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /** The static color style to apply. Useful when the Button appears over a color background. */\n staticColor?: 'white' | 'black' | 'auto'\n}\n\nconst hoverBackground = {\n default: 'gray-200',\n isStaticColor: 'transparent-overlay-200'\n} as const;\n\nconst styles = style({\n ...focusRing(),\n ...staticColor(),\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n size: 'control',\n flexShrink: 0,\n borderRadius: 'full',\n padding: 0,\n borderStyle: 'none',\n transition: 'default',\n backgroundColor: {\n default: 'transparent',\n isHovered: hoverBackground,\n isFocusVisible: hoverBackground,\n isPressed: hoverBackground\n },\n '--iconPrimary': {\n type: 'color',\n value: {\n default: 'neutral',\n isDisabled: 'disabled',\n isStaticColor: {\n default: baseColor('transparent-overlay-800'),\n isDisabled: 'transparent-overlay-400'\n },\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n }\n },\n outlineColor: {\n default: 'focus-ring',\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'Highlight'\n }\n}, getAllowedOverrides());\n\nexport const CloseButtonContext = createContext<ContextValue<Partial<CloseButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * A CloseButton allows a user to dismiss a dialog.\n */\nexport const CloseButton = forwardRef(function CloseButton(props: CloseButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, CloseButtonContext);\n let {UNSAFE_style, UNSAFE_className = ''} = props;\n let domRef = useFocusableRef(ref);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n return (\n <Button\n {...props}\n ref={domRef}\n slot=\"close\"\n aria-label={props['aria-label'] || stringFormatter.format('dialog.dismiss')}\n style={pressScale(domRef, UNSAFE_style)}\n className={renderProps => UNSAFE_className + styles({...renderProps, staticColor: props.staticColor, isStaticColor: !!props.staticColor}, props.styles)}>\n <CrossIcon size={({S: 'L', M: 'XL', L: 'XXL', XL: 'XXXL'} as const)[props.size || 'M']} />\n </Button>\n );\n});\n"],"names":[],"version":3,"file":"CloseButton.css.map"}
1
+ {"mappings":"AAyCe;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA","sources":["packages/@react-spectrum/s2/src/CloseButton.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 {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {Button, ButtonProps, ContextValue} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport CrossIcon from '../ui-icons/Cross';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CloseButtonProps extends Pick<ButtonProps, 'isDisabled' | 'onPress'>, StyleProps {\n /**\n * The size of the CloseButton.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /** The static color style to apply. Useful when the Button appears over a color background. */\n staticColor?: 'white' | 'black' | 'auto'\n}\n\nconst hoverBackground = {\n default: 'gray-200',\n isStaticColor: 'transparent-overlay-200'\n} as const;\n\nconst styles = style<CloseButtonProps & {isHovered: boolean, isFocusVisible: boolean, isPressed: boolean, isStaticColor: boolean}>({\n ...focusRing(),\n ...staticColor(),\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n size: 'control',\n flexShrink: 0,\n borderRadius: 'full',\n padding: 0,\n borderStyle: 'none',\n transition: 'default',\n backgroundColor: {\n default: 'transparent',\n isHovered: hoverBackground,\n isFocusVisible: hoverBackground,\n isPressed: hoverBackground\n },\n '--iconPrimary': {\n type: 'color',\n value: {\n default: 'neutral',\n isDisabled: 'disabled',\n isStaticColor: {\n default: baseColor('transparent-overlay-800'),\n isDisabled: 'transparent-overlay-400'\n },\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n }\n },\n outlineColor: {\n default: 'focus-ring',\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'Highlight'\n }\n}, getAllowedOverrides());\n\nexport const CloseButtonContext = createContext<ContextValue<Partial<CloseButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * A CloseButton allows a user to dismiss a dialog.\n */\nexport const CloseButton = forwardRef(function CloseButton(props: CloseButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, CloseButtonContext);\n let {UNSAFE_style, UNSAFE_className = ''} = props;\n let domRef = useFocusableRef(ref);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n return (\n <Button\n {...props}\n ref={domRef}\n slot=\"close\"\n aria-label={props['aria-label'] || stringFormatter.format('dialog.dismiss')}\n style={pressScale(domRef, UNSAFE_style)}\n className={renderProps => UNSAFE_className + styles({...renderProps, staticColor: props.staticColor, isStaticColor: !!props.staticColor}, props.styles)}>\n <CrossIcon size={({S: 'L', M: 'XL', L: 'XXL', XL: 'XXXL'} as const)[props.size || 'M']} />\n </Button>\n );\n});\n"],"names":[],"version":3,"file":"CloseButton.css.map"}
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AA0BD,MAAM,wCAAkB;IACtB,SAAS;IACT,eAAe;AACjB;AAEA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCC,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAiF;AAKxH,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAAoC;IACtH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,gBAAC,YAAY,oBAAE,mBAAmB,IAAG,GAAG;IAC5C,IAAI,SAAS,CAAA,GAAA,sBAAc,EAAE;IAC7B,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,qBACE,gBAAC,CAAA,GAAA,aAAK;QACH,GAAG,KAAK;QACT,KAAK;QACL,MAAK;QACL,cAAY,KAAK,CAAC,aAAa,IAAI,gBAAgB,MAAM,CAAC;QAC1D,OAAO,CAAA,GAAA,yCAAS,EAAE,QAAQ;QAC1B,WAAW,CAAA,cAAe,mBAAmB,6BAAO;gBAAC,GAAG,WAAW;gBAAE,aAAa,MAAM,WAAW;gBAAE,eAAe,CAAC,CAAC,MAAM,WAAW;YAAA,GAAG,MAAM,MAAM;kBACtJ,cAAA,gBAAC,CAAA,GAAA,wCAAQ;YAAE,MAAM,AAAC;gBAAC,GAAG;gBAAK,GAAG;gBAAM,GAAG;gBAAO,IAAI;YAAM,CAAW,CAAC,MAAM,IAAI,IAAI,IAAI;;;AAG5F","sources":["packages/@react-spectrum/s2/src/CloseButton.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 {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {Button, ButtonProps, ContextValue} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport CrossIcon from '../ui-icons/Cross';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CloseButtonProps extends Pick<ButtonProps, 'isDisabled' | 'onPress'>, StyleProps {\n /**\n * The size of the CloseButton.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /** The static color style to apply. Useful when the Button appears over a color background. */\n staticColor?: 'white' | 'black' | 'auto'\n}\n\nconst hoverBackground = {\n default: 'gray-200',\n isStaticColor: 'transparent-overlay-200'\n} as const;\n\nconst styles = style({\n ...focusRing(),\n ...staticColor(),\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n size: 'control',\n flexShrink: 0,\n borderRadius: 'full',\n padding: 0,\n borderStyle: 'none',\n transition: 'default',\n backgroundColor: {\n default: 'transparent',\n isHovered: hoverBackground,\n isFocusVisible: hoverBackground,\n isPressed: hoverBackground\n },\n '--iconPrimary': {\n type: 'color',\n value: {\n default: 'neutral',\n isDisabled: 'disabled',\n isStaticColor: {\n default: baseColor('transparent-overlay-800'),\n isDisabled: 'transparent-overlay-400'\n },\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n }\n },\n outlineColor: {\n default: 'focus-ring',\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'Highlight'\n }\n}, getAllowedOverrides());\n\nexport const CloseButtonContext = createContext<ContextValue<Partial<CloseButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * A CloseButton allows a user to dismiss a dialog.\n */\nexport const CloseButton = forwardRef(function CloseButton(props: CloseButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, CloseButtonContext);\n let {UNSAFE_style, UNSAFE_className = ''} = props;\n let domRef = useFocusableRef(ref);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n return (\n <Button\n {...props}\n ref={domRef}\n slot=\"close\"\n aria-label={props['aria-label'] || stringFormatter.format('dialog.dismiss')}\n style={pressScale(domRef, UNSAFE_style)}\n className={renderProps => UNSAFE_className + styles({...renderProps, staticColor: props.staticColor, isStaticColor: !!props.staticColor}, props.styles)}>\n <CrossIcon size={({S: 'L', M: 'XL', L: 'XXL', XL: 'XXXL'} as const)[props.size || 'M']} />\n </Button>\n );\n});\n"],"names":[],"version":3,"file":"CloseButton.mjs.map"}
1
+ {"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AA0BD,MAAM,wCAAkB;IACtB,SAAS;IACT,eAAe;AACjB;AAEA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCC,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAiF;AAKxH,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAAoC;IACtH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,gBAAC,YAAY,oBAAE,mBAAmB,IAAG,GAAG;IAC5C,IAAI,SAAS,CAAA,GAAA,sBAAc,EAAE;IAC7B,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,qBACE,gBAAC,CAAA,GAAA,aAAK;QACH,GAAG,KAAK;QACT,KAAK;QACL,MAAK;QACL,cAAY,KAAK,CAAC,aAAa,IAAI,gBAAgB,MAAM,CAAC;QAC1D,OAAO,CAAA,GAAA,yCAAS,EAAE,QAAQ;QAC1B,WAAW,CAAA,cAAe,mBAAmB,6BAAO;gBAAC,GAAG,WAAW;gBAAE,aAAa,MAAM,WAAW;gBAAE,eAAe,CAAC,CAAC,MAAM,WAAW;YAAA,GAAG,MAAM,MAAM;kBACtJ,cAAA,gBAAC,CAAA,GAAA,wCAAQ;YAAE,MAAM,AAAC;gBAAC,GAAG;gBAAK,GAAG;gBAAM,GAAG;gBAAO,IAAI;YAAM,CAAW,CAAC,MAAM,IAAI,IAAI,IAAI;;;AAG5F","sources":["packages/@react-spectrum/s2/src/CloseButton.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 {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {Button, ButtonProps, ContextValue} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport CrossIcon from '../ui-icons/Cross';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CloseButtonProps extends Pick<ButtonProps, 'isDisabled' | 'onPress'>, StyleProps {\n /**\n * The size of the CloseButton.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /** The static color style to apply. Useful when the Button appears over a color background. */\n staticColor?: 'white' | 'black' | 'auto'\n}\n\nconst hoverBackground = {\n default: 'gray-200',\n isStaticColor: 'transparent-overlay-200'\n} as const;\n\nconst styles = style<CloseButtonProps & {isHovered: boolean, isFocusVisible: boolean, isPressed: boolean, isStaticColor: boolean}>({\n ...focusRing(),\n ...staticColor(),\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n size: 'control',\n flexShrink: 0,\n borderRadius: 'full',\n padding: 0,\n borderStyle: 'none',\n transition: 'default',\n backgroundColor: {\n default: 'transparent',\n isHovered: hoverBackground,\n isFocusVisible: hoverBackground,\n isPressed: hoverBackground\n },\n '--iconPrimary': {\n type: 'color',\n value: {\n default: 'neutral',\n isDisabled: 'disabled',\n isStaticColor: {\n default: baseColor('transparent-overlay-800'),\n isDisabled: 'transparent-overlay-400'\n },\n forcedColors: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n }\n },\n outlineColor: {\n default: 'focus-ring',\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'Highlight'\n }\n}, getAllowedOverrides());\n\nexport const CloseButtonContext = createContext<ContextValue<Partial<CloseButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * A CloseButton allows a user to dismiss a dialog.\n */\nexport const CloseButton = forwardRef(function CloseButton(props: CloseButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, CloseButtonContext);\n let {UNSAFE_style, UNSAFE_className = ''} = props;\n let domRef = useFocusableRef(ref);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n return (\n <Button\n {...props}\n ref={domRef}\n slot=\"close\"\n aria-label={props['aria-label'] || stringFormatter.format('dialog.dismiss')}\n style={pressScale(domRef, UNSAFE_style)}\n className={renderProps => UNSAFE_className + styles({...renderProps, staticColor: props.staticColor, isStaticColor: !!props.staticColor}, props.styles)}>\n <CrossIcon size={({S: 'L', M: 'XL', L: 'XXL', XL: 'XXXL'} as const)[props.size || 'M']} />\n </Button>\n );\n});\n"],"names":[],"version":3,"file":"CloseButton.mjs.map"}
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/@react-spectrum/s2/src/ComboBox.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 {\n ComboBox as AriaComboBox,\n ComboBoxProps as AriaComboBoxProps,\n ListBoxSection as AriaListBoxSection,\n PopoverProps as AriaPopoverProps,\n Button,\n ContextValue,\n InputContext,\n ListBox,\n ListBoxItem,\n ListBoxItemProps,\n ListBoxProps,\n Provider,\n SectionProps\n} from 'react-aria-components';\nimport {baseColor, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {\n checkmark,\n description,\n Divider,\n icon,\n iconCenterWrapper,\n label,\n menuitem,\n section,\n sectionHeader,\n sectionHeading\n} from './Menu';\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {createContext, CSSProperties, forwardRef, ReactNode, Ref, useCallback, useContext, useImperativeHandle, useRef, useState} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport {menu} from './Picker';\nimport {mergeRefs, useResizeObserver} from '@react-aria/utils';\nimport {Placement} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {pressScale} from './pressScale';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface ComboboxStyleProps {\n /**\n * The size of the Combobox.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL'\n}\nexport interface ComboBoxProps<T extends object> extends\n Omit<AriaComboBoxProps<T>, 'children' | 'style' | 'className' | 'defaultFilter' | 'allowsEmptyCollection'>,\n ComboboxStyleProps,\n StyleProps,\n SpectrumLabelableProps,\n HelpTextProps,\n Pick<ListBoxProps<T>, 'items'>,\n Pick<AriaPopoverProps, 'shouldFlip'> {\n /** The contents of the collection. */\n children: ReactNode | ((item: T) => ReactNode),\n /**\n * Direction the menu will render relative to the Picker.\n *\n * @default 'bottom'\n */\n direction?: 'bottom' | 'top',\n /**\n * Alignment of the menu relative to the input target.\n *\n * @default 'start'\n */\n align?: 'start' | 'end',\n /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */\n menuWidth?: number\n}\n\nexport const ComboBoxContext = createContext<ContextValue<Partial<ComboBoxProps<any>>, TextFieldRef>>(null);\n\nconst inputButton = style({\n display: 'flex',\n outlineStyle: 'none',\n textAlign: 'center',\n borderStyle: 'none',\n borderRadius: 'control-sm',\n alignItems: 'center',\n justifyContent: 'center',\n size: {\n size: {\n S: 16,\n M: 20,\n L: 24,\n XL: 32\n }\n },\n marginStart: 'text-to-control',\n aspectRatio: 'square',\n flexShrink: 0,\n transition: {\n default: 'default',\n forcedColors: 'none'\n },\n backgroundColor: {\n default: baseColor('gray-100'),\n isOpen: 'gray-200',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonText',\n isHovered: 'Highlight',\n isOpen: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n color: {\n default: 'neutral',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonFace'\n }\n }\n});\n\nconst iconStyles = style({\n flexShrink: 0,\n rotate: 90,\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nlet InternalComboboxContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});\n\n/**\n * ComboBox allow users to choose a single option from a collapsible list of options when space is limited.\n */\nexport const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: Ref<TextFieldRef>) {\n [props, ref] = useSpectrumContextProps(props, ref, ComboBoxContext);\n let inputRef = useRef<HTMLInputElement>(null);\n let domRef = useRef<HTMLDivElement>(null);\n let buttonRef = useRef<HTMLButtonElement>(null);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let {\n direction = 'bottom',\n align = 'start',\n shouldFlip = true,\n menuWidth,\n label,\n description: descriptionMessage,\n errorMessage,\n children,\n items,\n size = 'M',\n labelPosition = 'top',\n labelAlign = 'start',\n necessityIndicator,\n UNSAFE_className = '',\n UNSAFE_style,\n ...pickerProps\n } = props;\n\n // Expose imperative interface for ref\n useImperativeHandle(ref, () => ({\n ...createFocusableRef(domRef, inputRef),\n select() {\n if (inputRef.current) {\n inputRef.current.select();\n }\n },\n getInputElement() {\n return inputRef.current;\n }\n }));\n\n // Better way to encode this into a style? need to account for flipping\n let menuOffset: number;\n if (size === 'S') {\n menuOffset = 6;\n } else if (size === 'M') {\n menuOffset = 6;\n } else if (size === 'L') {\n menuOffset = 7;\n } else {\n menuOffset = 8;\n }\n\n let triggerRef = useRef<HTMLDivElement>(null);\n // Make menu width match input + button\n let [triggerWidth, setTriggerWidth] = useState<string | null>(null);\n let onResize = useCallback(() => {\n if (triggerRef.current) {\n let inputRect = triggerRef.current.getBoundingClientRect();\n let minX = inputRect.left;\n let maxX = inputRect.right;\n setTriggerWidth((maxX - minX) + 'px');\n }\n }, [triggerRef, setTriggerWidth]);\n\n useResizeObserver({\n ref: triggerRef,\n onResize: onResize\n });\n\n return (\n <AriaComboBox\n {...pickerProps}\n style={UNSAFE_style}\n className={UNSAFE_className + style(field(), getAllowedOverrides())({\n isInForm: !!formContext,\n labelPosition,\n size\n }, props.styles)}>\n {({isDisabled, isOpen, isRequired, isInvalid}) => (\n <>\n <InternalComboboxContext.Provider value={{size}}>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={isRequired}\n size={size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n necessityIndicator={necessityIndicator}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n <FieldGroup\n ref={triggerRef}\n role=\"presentation\"\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n size={size}\n styles={style({\n ...fieldInput(),\n paddingStart: 'edge-to-text',\n // better way to do this one? it's not actually half, they are\n // [9, 4], [12, 6], [15, 8], [18, 8]\n // also noticed that our measurement is including the border, making the padding too much\n paddingEnd: '[calc(self(height, self(minHeight)) * 3 / 16)]'\n })({size})}>\n <InputContext.Consumer>\n {ctx => (\n <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n <Input />\n </InputContext.Provider>\n )}\n </InputContext.Consumer>\n {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n <Button\n ref={buttonRef}\n // Prevent press scale from sticking while ComboBox is open.\n // @ts-ignore\n isPressed={false}\n style={renderProps => pressScale(buttonRef)(renderProps)}\n className={renderProps => inputButton({\n ...renderProps,\n size,\n isOpen\n })}>\n <ChevronIcon\n size={size}\n className={iconStyles} />\n </Button>\n </FieldGroup>\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={descriptionMessage}>\n {errorMessage}\n </HelpText>\n <PopoverBase\n hideArrow\n triggerRef={triggerRef}\n offset={menuOffset}\n placement={`${direction} ${align}` as Placement}\n shouldFlip={shouldFlip}\n UNSAFE_style={{\n width: menuWidth ? `${menuWidth}px` : undefined,\n // manually subtract border as we can't set Popover to border-box, it causes the contents to spill out\n '--trigger-width': `calc(${triggerWidth} - 2px)`\n } as CSSProperties}\n styles={style({\n minWidth: '[var(--trigger-width)]',\n width: '[var(--trigger-width)]'\n })}>\n <Provider\n values={[\n [HeaderContext, {styles: sectionHeader({size})}],\n [HeadingContext, {styles: sectionHeading}],\n [TextContext, {\n slots: {\n 'description': {styles: description({size})}\n }\n }]\n ]}>\n <ListBox\n items={items}\n className={menu({size})}>\n {children}\n </ListBox>\n </Provider>\n </PopoverBase>\n </InternalComboboxContext.Provider>\n </>\n )}\n </AriaComboBox>\n );\n});\n\n\nexport interface ComboBoxItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {\n children: ReactNode\n}\n\nconst checkmarkIconSize = {\n S: 'XS',\n M: 'M',\n L: 'L',\n XL: 'XL'\n} as const;\n\nexport function ComboBoxItem(props: ComboBoxItemProps): ReactNode {\n let ref = useRef(null);\n let isLink = props.href != null;\n let {size} = useContext(InternalComboboxContext);\n return (\n <ListBoxItem\n {...props}\n ref={ref}\n textValue={props.textValue || (typeof props.children === 'string' ? props.children as string : undefined)}\n style={pressScale(ref, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + menuitem({...renderProps, size, isLink}, props.styles)}>\n {(renderProps) => {\n let {children} = props;\n return (\n <>\n <Provider\n values={[\n [IconContext, {\n slots: {\n icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}\n }\n }],\n [TextContext, {\n slots: {\n label: {styles: label({size})},\n description: {styles: description({...renderProps, size})}\n }\n }]\n ]}>\n {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n </Provider>\n </>\n );\n }}\n </ListBoxItem>\n );\n}\n\nexport interface ComboBoxSectionProps<T extends object> extends SectionProps<T> {}\nexport function ComboBoxSection<T extends object>(props: ComboBoxSectionProps<T>): ReactNode {\n let {size} = useContext(InternalComboboxContext);\n return (\n <>\n <AriaListBoxSection\n {...props}\n className={section({size})}>\n {props.children}\n </AriaListBoxSection>\n <Divider />\n </>\n );\n}\n"],"names":[],"version":3,"file":"ComboBox.cjs.map"}
1
+ {"mappings":"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","sources":["packages/@react-spectrum/s2/src/ComboBox.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 {\n ComboBox as AriaComboBox,\n ComboBoxProps as AriaComboBoxProps,\n ListBoxSection as AriaListBoxSection,\n PopoverProps as AriaPopoverProps,\n Button,\n ButtonRenderProps,\n ContextValue,\n InputContext,\n ListBox,\n ListBoxItem,\n ListBoxItemProps,\n ListBoxProps,\n Provider,\n SectionProps\n} from 'react-aria-components';\nimport {baseColor, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {\n checkmark,\n description,\n Divider,\n icon,\n iconCenterWrapper,\n label,\n menuitem,\n section,\n sectionHeader,\n sectionHeading\n} from './Menu';\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {createContext, CSSProperties, forwardRef, ReactNode, Ref, useCallback, useContext, useImperativeHandle, useRef, useState} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport {menu} from './Picker';\nimport {mergeRefs, useResizeObserver} from '@react-aria/utils';\nimport {Placement} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {pressScale} from './pressScale';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface ComboboxStyleProps {\n /**\n * The size of the Combobox.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL'\n}\nexport interface ComboBoxProps<T extends object> extends\n Omit<AriaComboBoxProps<T>, 'children' | 'style' | 'className' | 'defaultFilter' | 'allowsEmptyCollection'>,\n ComboboxStyleProps,\n StyleProps,\n SpectrumLabelableProps,\n HelpTextProps,\n Pick<ListBoxProps<T>, 'items'>,\n Pick<AriaPopoverProps, 'shouldFlip'> {\n /** The contents of the collection. */\n children: ReactNode | ((item: T) => ReactNode),\n /**\n * Direction the menu will render relative to the Picker.\n *\n * @default 'bottom'\n */\n direction?: 'bottom' | 'top',\n /**\n * Alignment of the menu relative to the input target.\n *\n * @default 'start'\n */\n align?: 'start' | 'end',\n /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */\n menuWidth?: number\n}\n\nexport const ComboBoxContext = createContext<ContextValue<Partial<ComboBoxProps<any>>, TextFieldRef>>(null);\n\nconst inputButton = style<ButtonRenderProps & {isOpen: boolean, size: 'S' | 'M' | 'L' | 'XL'}>({\n display: 'flex',\n outlineStyle: 'none',\n textAlign: 'center',\n borderStyle: 'none',\n borderRadius: 'control-sm',\n alignItems: 'center',\n justifyContent: 'center',\n size: {\n size: {\n S: 16,\n M: 20,\n L: 24,\n XL: 32\n }\n },\n marginStart: 'text-to-control',\n aspectRatio: 'square',\n flexShrink: 0,\n transition: {\n default: 'default',\n forcedColors: 'none'\n },\n backgroundColor: {\n default: baseColor('gray-100'),\n isOpen: 'gray-200',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonText',\n isHovered: 'Highlight',\n isOpen: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n color: {\n default: 'neutral',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonFace'\n }\n }\n});\n\nconst iconStyles = style({\n flexShrink: 0,\n rotate: 90,\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nlet InternalComboboxContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});\n\n/**\n * ComboBox allow users to choose a single option from a collapsible list of options when space is limited.\n */\nexport const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: Ref<TextFieldRef>) {\n [props, ref] = useSpectrumContextProps(props, ref, ComboBoxContext);\n let inputRef = useRef<HTMLInputElement>(null);\n let domRef = useRef<HTMLDivElement>(null);\n let buttonRef = useRef<HTMLButtonElement>(null);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let {\n direction = 'bottom',\n align = 'start',\n shouldFlip = true,\n menuWidth,\n label,\n description: descriptionMessage,\n errorMessage,\n children,\n items,\n size = 'M',\n labelPosition = 'top',\n labelAlign = 'start',\n necessityIndicator,\n UNSAFE_className = '',\n UNSAFE_style,\n ...pickerProps\n } = props;\n\n // Expose imperative interface for ref\n useImperativeHandle(ref, () => ({\n ...createFocusableRef(domRef, inputRef),\n select() {\n if (inputRef.current) {\n inputRef.current.select();\n }\n },\n getInputElement() {\n return inputRef.current;\n }\n }));\n\n // Better way to encode this into a style? need to account for flipping\n let menuOffset: number;\n if (size === 'S') {\n menuOffset = 6;\n } else if (size === 'M') {\n menuOffset = 6;\n } else if (size === 'L') {\n menuOffset = 7;\n } else {\n menuOffset = 8;\n }\n\n let triggerRef = useRef<HTMLDivElement>(null);\n // Make menu width match input + button\n let [triggerWidth, setTriggerWidth] = useState<string | null>(null);\n let onResize = useCallback(() => {\n if (triggerRef.current) {\n let inputRect = triggerRef.current.getBoundingClientRect();\n let minX = inputRect.left;\n let maxX = inputRect.right;\n setTriggerWidth((maxX - minX) + 'px');\n }\n }, [triggerRef, setTriggerWidth]);\n\n useResizeObserver({\n ref: triggerRef,\n onResize: onResize\n });\n\n return (\n <AriaComboBox\n {...pickerProps}\n style={UNSAFE_style}\n className={UNSAFE_className + style(field(), getAllowedOverrides())({\n isInForm: !!formContext,\n labelPosition,\n size\n }, props.styles)}>\n {({isDisabled, isOpen, isRequired, isInvalid}) => (\n <>\n <InternalComboboxContext.Provider value={{size}}>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={isRequired}\n size={size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n necessityIndicator={necessityIndicator}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n <FieldGroup\n ref={triggerRef}\n role=\"presentation\"\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n size={size}\n styles={style({\n ...fieldInput(),\n paddingStart: 'edge-to-text',\n // better way to do this one? it's not actually half, they are\n // [9, 4], [12, 6], [15, 8], [18, 8]\n // also noticed that our measurement is including the border, making the padding too much\n paddingEnd: '[calc(self(height, self(minHeight)) * 3 / 16)]'\n })({size})}>\n <InputContext.Consumer>\n {ctx => (\n <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n <Input />\n </InputContext.Provider>\n )}\n </InputContext.Consumer>\n {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n <Button\n ref={buttonRef}\n // Prevent press scale from sticking while ComboBox is open.\n // @ts-ignore\n isPressed={false}\n style={renderProps => pressScale(buttonRef)(renderProps)}\n className={renderProps => inputButton({\n ...renderProps,\n size,\n isOpen\n })}>\n <ChevronIcon\n size={size}\n className={iconStyles} />\n </Button>\n </FieldGroup>\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={descriptionMessage}>\n {errorMessage}\n </HelpText>\n <PopoverBase\n hideArrow\n triggerRef={triggerRef}\n offset={menuOffset}\n placement={`${direction} ${align}` as Placement}\n shouldFlip={shouldFlip}\n UNSAFE_style={{\n width: menuWidth ? `${menuWidth}px` : undefined,\n // manually subtract border as we can't set Popover to border-box, it causes the contents to spill out\n '--trigger-width': `calc(${triggerWidth} - 2px)`\n } as CSSProperties}\n styles={style({\n minWidth: '[var(--trigger-width)]',\n width: '[var(--trigger-width)]'\n })}>\n <Provider\n values={[\n [HeaderContext, {styles: sectionHeader({size})}],\n [HeadingContext, {styles: sectionHeading}],\n [TextContext, {\n slots: {\n 'description': {styles: description({size})}\n }\n }]\n ]}>\n <ListBox\n items={items}\n className={menu({size})}>\n {children}\n </ListBox>\n </Provider>\n </PopoverBase>\n </InternalComboboxContext.Provider>\n </>\n )}\n </AriaComboBox>\n );\n});\n\n\nexport interface ComboBoxItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {\n children: ReactNode\n}\n\nconst checkmarkIconSize = {\n S: 'XS',\n M: 'M',\n L: 'L',\n XL: 'XL'\n} as const;\n\nexport function ComboBoxItem(props: ComboBoxItemProps): ReactNode {\n let ref = useRef(null);\n let isLink = props.href != null;\n let {size} = useContext(InternalComboboxContext);\n return (\n <ListBoxItem\n {...props}\n ref={ref}\n textValue={props.textValue || (typeof props.children === 'string' ? props.children as string : undefined)}\n style={pressScale(ref, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + menuitem({...renderProps, size, isLink}, props.styles)}>\n {(renderProps) => {\n let {children} = props;\n return (\n <>\n <Provider\n values={[\n [IconContext, {\n slots: {\n icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}\n }\n }],\n [TextContext, {\n slots: {\n label: {styles: label({size})},\n description: {styles: description({...renderProps, size})}\n }\n }]\n ]}>\n {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n </Provider>\n </>\n );\n }}\n </ListBoxItem>\n );\n}\n\nexport interface ComboBoxSectionProps<T extends object> extends SectionProps<T> {}\nexport function ComboBoxSection<T extends object>(props: ComboBoxSectionProps<T>): ReactNode {\n let {size} = useContext(InternalComboboxContext);\n return (\n <>\n <AriaListBoxSection\n {...props}\n className={section({size})}>\n {props.children}\n </AriaListBoxSection>\n <Divider />\n </>\n );\n}\n"],"names":[],"version":3,"file":"ComboBox.cjs.map"}