@chassis-ui/react 0.4.0 → 0.4.1

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 (79) hide show
  1. package/dist/alert.js +1 -1
  2. package/dist/avatar.js +1 -1
  3. package/dist/breadcrumb.js +1 -1
  4. package/dist/card.js +1 -1
  5. package/dist/chunks/Link-DyZyAQFj.js +2 -0
  6. package/dist/chunks/Link-DyZyAQFj.js.map +1 -0
  7. package/dist/chunks/{MenuToggle-BdQtF7FV.js → MenuToggle-7RQ0dmtZ.js} +2 -2
  8. package/dist/chunks/{MenuToggle-BdQtF7FV.js.map → MenuToggle-7RQ0dmtZ.js.map} +1 -1
  9. package/dist/chunks/alert-3kTBfWFw.js +2 -0
  10. package/dist/chunks/{alert-BXI-_qlt.js.map → alert-3kTBfWFw.js.map} +1 -1
  11. package/dist/chunks/{avatar-S3dGy6Qc.js → avatar-MklqAKcz.js} +2 -2
  12. package/dist/chunks/{avatar-S3dGy6Qc.js.map → avatar-MklqAKcz.js.map} +1 -1
  13. package/dist/chunks/{breadcrumb-s6J9itez.js → breadcrumb-CHxTiZLt.js} +2 -2
  14. package/dist/chunks/{breadcrumb-s6J9itez.js.map → breadcrumb-CHxTiZLt.js.map} +1 -1
  15. package/dist/chunks/{card-CobeDpf1.js → card-CTP9K8xG.js} +2 -2
  16. package/dist/chunks/{card-CobeDpf1.js.map → card-CTP9K8xG.js.map} +1 -1
  17. package/dist/chunks/colorClassNames-CEh5Yzfp.js +2 -0
  18. package/dist/chunks/colorClassNames-CEh5Yzfp.js.map +1 -0
  19. package/dist/chunks/datagrid-DOYxx0sF.js +3 -0
  20. package/dist/chunks/datagrid-DOYxx0sF.js.map +1 -0
  21. package/dist/chunks/{index-B5bF1JxF.d.ts → index-Dzga1f4w.d.ts} +2 -2
  22. package/dist/chunks/{list-BQCkwWjF.js → list-07e2a1Ym.js} +2 -2
  23. package/dist/chunks/{list-BQCkwWjF.js.map → list-07e2a1Ym.js.map} +1 -1
  24. package/dist/chunks/{menu-98EAD9nj.js → menu-Upf6P-2P.js} +2 -2
  25. package/dist/chunks/{menu-98EAD9nj.js.map → menu-Upf6P-2P.js.map} +1 -1
  26. package/dist/chunks/{nav-TiZuTHC6.js → nav-DI6oEULI.js} +2 -2
  27. package/dist/chunks/{nav-TiZuTHC6.js.map → nav-DI6oEULI.js.map} +1 -1
  28. package/dist/chunks/{nav-overflow-Ay5mM5Gc.js → nav-overflow-DlLer6EK.js} +2 -2
  29. package/dist/chunks/{nav-overflow-Ay5mM5Gc.js.map → nav-overflow-DlLer6EK.js.map} +1 -1
  30. package/dist/chunks/pagination-BREQp-ZC.js +2 -0
  31. package/dist/chunks/{pagination-BkOquk-x.js.map → pagination-BREQp-ZC.js.map} +1 -1
  32. package/dist/chunks/placeholder-DhNpUJqv.js +2 -0
  33. package/dist/chunks/placeholder-DhNpUJqv.js.map +1 -0
  34. package/dist/chunks/progress-BqgWezdG.js +2 -0
  35. package/dist/chunks/progress-BqgWezdG.js.map +1 -0
  36. package/dist/chunks/skeleton-Bjv9gGd3.js +2 -0
  37. package/dist/chunks/skeleton-Bjv9gGd3.js.map +1 -0
  38. package/dist/chunks/spinner-DBuvQvMR.js +2 -0
  39. package/dist/chunks/spinner-DBuvQvMR.js.map +1 -0
  40. package/dist/chunks/static-table-uu297Liz.js +2 -0
  41. package/dist/chunks/{static-table-D0M4oc_t.js.map → static-table-uu297Liz.js.map} +1 -1
  42. package/dist/chunks/{table-Cy6uEuEP.js → table-DPLOygg0.js} +2 -2
  43. package/dist/chunks/{table-Cy6uEuEP.js.map → table-DPLOygg0.js.map} +1 -1
  44. package/dist/chunks/tableClassName-DleBjOj2.js +2 -0
  45. package/dist/chunks/tableClassName-DleBjOj2.js.map +1 -0
  46. package/dist/datagrid.js +1 -1
  47. package/dist/index.d.ts +1 -1
  48. package/dist/index.js +1 -1
  49. package/dist/link.js +1 -1
  50. package/dist/list.js +1 -1
  51. package/dist/menu.js +1 -1
  52. package/dist/nav-overflow.js +1 -1
  53. package/dist/nav.js +1 -1
  54. package/dist/pagination.js +1 -1
  55. package/dist/placeholder.js +1 -1
  56. package/dist/progress.js +1 -1
  57. package/dist/skeleton.js +1 -1
  58. package/dist/spinner.d.ts +1 -1
  59. package/dist/spinner.js +1 -1
  60. package/dist/static-table.js +1 -1
  61. package/dist/table.js +1 -1
  62. package/package.json +2 -2
  63. package/dist/chunks/Link-CZsWCnQb.js +0 -2
  64. package/dist/chunks/Link-CZsWCnQb.js.map +0 -1
  65. package/dist/chunks/alert-BXI-_qlt.js +0 -2
  66. package/dist/chunks/datagrid-CH3Cy-q7.js +0 -3
  67. package/dist/chunks/datagrid-CH3Cy-q7.js.map +0 -1
  68. package/dist/chunks/pagination-BkOquk-x.js +0 -2
  69. package/dist/chunks/placeholder-BCr83sUn.js +0 -2
  70. package/dist/chunks/placeholder-BCr83sUn.js.map +0 -1
  71. package/dist/chunks/progress-zWkTltor.js +0 -2
  72. package/dist/chunks/progress-zWkTltor.js.map +0 -1
  73. package/dist/chunks/skeleton-CmZBLJwp.js +0 -2
  74. package/dist/chunks/skeleton-CmZBLJwp.js.map +0 -1
  75. package/dist/chunks/spinner-DblhvrHL.js +0 -2
  76. package/dist/chunks/spinner-DblhvrHL.js.map +0 -1
  77. package/dist/chunks/static-table-D0M4oc_t.js +0 -2
  78. package/dist/chunks/tableClassName-CZA2Bse8.js +0 -2
  79. package/dist/chunks/tableClassName-CZA2Bse8.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"nav-TiZuTHC6.js","names":[],"sources":["../../src/components/nav/NavLink.tsx","../../src/components/nav/NavItem.tsx","../../src/components/nav/Nav.tsx","../../src/components/nav/NavTitle.tsx"],"sourcesContent":["import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport { NavOverflowLink, useIsNavOverflowLink } from '../../utils/navOverflow'\nimport { createPolymorphicComponent, PolymorphicRef } from '../../utils/polymorphic'\nimport { LinkProps, Link } from '../link/Link'\n\ntype NavLinkOwnProps = {\n /**\n * Toggle the active state for the component.\n */\n active?: boolean\n /**\n * A string of all className you want applied to the component.\n */\n className?: string\n /**\n * Toggle the disabled state for the component.\n */\n disabled?: boolean\n}\n\nexport type NavLinkProps<C extends ElementType = 'a'> = LinkProps<C> & NavLinkOwnProps\n\ntype NavLinkComponent = (<C extends ElementType = 'a'>(\n props: NavLinkProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction NavLinkRender<C extends ElementType = 'a'>(\n { children, className, ...rest }: NavLinkProps<C>,\n ref: PolymorphicRef<C>\n) {\n const _className = classNames('nav-link', className)\n // Inside a `NavOverflow`, the link of an item that doesn't fit is shown in the menu instead, as\n // a `MenuItem` with these props.\n const isOverflowLink = useIsNavOverflowLink()\n\n return (\n <>\n <Link\n className={_className}\n {...(rest as Record<string, unknown>)}\n ref={ref as PolymorphicRef<ElementType>}\n >\n {children}\n </Link>\n {isOverflowLink && <NavOverflowLink props={{ ...rest, children }} />}\n </>\n )\n}\n\nexport const NavLink = createPolymorphicComponent<NavLinkComponent>(\n NavLinkRender as ForwardRefRenderFunction<Element, NavLinkProps<ElementType>>,\n 'NavLink'\n)\n","import React, {\n ElementType,\n ForwardRefRenderFunction,\n forwardRef,\n ReactElement,\n ReactNode,\n Ref\n} from 'react'\nimport classNames from 'classnames'\n\nimport { useForkedRef } from '../../hooks'\nimport { devWarning } from '../../utils/devWarning'\nimport { hasHref } from '../../utils/elementKind'\nimport { NavOverflowItemScope, useNavOverflowItem } from '../../utils/navOverflow'\nimport { NavLink, NavLinkProps } from './NavLink'\n\nexport type NavItemProps<C extends ElementType = 'a'> = NavLinkProps<C> & {\n /**\n * Keeps the item in the list inside a `NavOverflow`, whatever the width.\n */\n keepVisible?: boolean\n}\n\ntype NavItemComponent = (<C extends ElementType = 'a'>(\n props: NavItemProps<C> & { ref?: Ref<HTMLLIElement> }\n) => ReactElement | null) & { displayName?: string }\n\nconst LINK_ONLY_PROPS = new Set([\n 'active',\n 'color',\n 'disabled',\n 'iconLink',\n 'reset',\n 'stretched',\n 'type'\n])\n\n// A `.nav-item` wrapping a `.nav-link` when there is a link to render: an `href`, or a `component`\n// or `asChild` element, which `NavLink` renders. Otherwise a bare `<li>` around `children`, such as\n// a `MenuToggle`. Only the `<li>` takes the caller's own attributes then: `active`, `disabled` and\n// the other `NavLink` props style a link, and on the `<li>` they were written out as invalid\n// attributes (`disabled=\"\"`, `component=\"button\"`).\nfunction NavItemRender<C extends ElementType = 'a'>(\n { children, className, keepVisible, ...rest }: NavItemProps<C>,\n ref: Ref<HTMLLIElement>\n) {\n const _className = classNames('nav-item', { 'nav-overflow-keep': keepVisible }, className)\n const { asChild, component, href } = rest as {\n asChild?: boolean\n component?: ElementType\n href?: string\n }\n // Inside a `NavOverflow`: the `<li>` is what it measures, and hides when the item is in the\n // menu. chassis-css hides it by this attribute.\n const overflow = useNavOverflowItem()\n const forkedRef = useForkedRef(ref, overflow.ref)\n const overflowProps = overflow.hidden ? { 'data-cx-nav-overflow': 'true' } : undefined\n\n if (hasHref(href) || component !== undefined || asChild) {\n return (\n <li className={_className} {...overflowProps} ref={forkedRef}>\n <NavOverflowItemScope value={overflow.scope}>\n <NavLink {...(rest as Record<string, unknown>)}>{children as ReactNode}</NavLink>\n </NavOverflowItemScope>\n </li>\n )\n }\n\n const { active, disabled } = rest as NavLinkProps<'a'>\n const itemProps = Object.fromEntries(\n Object.entries(rest).filter(([key]) => !LINK_ONLY_PROPS.has(key))\n )\n devWarning(\n !!active || !!disabled,\n 'NavItem: `active` and `disabled` style its link, and without `href`, `component` or ' +\n '`asChild` it renders none. Put them on the link inside it.'\n )\n return (\n <li className={_className} {...itemProps} {...overflowProps} ref={forkedRef}>\n <NavOverflowItemScope value={overflow.scope}>{children}</NavOverflowItemScope>\n </li>\n )\n}\n\nexport const NavItem = forwardRef(\n NavItemRender as ForwardRefRenderFunction<HTMLLIElement, NavItemProps<ElementType>>\n) as NavItemComponent\n\nNavItem.displayName = 'NavItem'\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport { resolveElementTag } from '../../utils/elementKind'\nimport { NavOverflowItems } from '../../utils/navOverflow'\nimport { NavVariant, navVariantClassName } from '../../utils/navVariant'\nimport {\n createPolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef\n} from '../../utils/polymorphic'\nimport { NavItem } from './NavItem'\n\nexport interface NavItemDef {\n /**\n * Label content for the nav item.\n */\n label: React.ReactNode\n /**\n * URL for the nav link.\n */\n href?: string\n /**\n * Marks the item as active.\n */\n active?: boolean\n /**\n * Marks the item as disabled.\n */\n disabled?: boolean\n}\n\ntype NavOwnProps<C extends ElementType> = {\n /**\n * A string of all className you want applied to the base component.\n */\n className?: string\n /**\n * Component used for the root node. Either a string to use a HTML element or a component.\n */\n component?: C\n /**\n * Array of nav item definitions for data-driven rendering. When provided, children are ignored.\n */\n items?: NavItemDef[]\n /**\n * Specify a layout type for component.\n */\n layout?: 'fill' | 'justified'\n /**\n * Size the component sm or lg.\n */\n size?: 'sm' | 'lg'\n /**\n * Set the nav variant to tabs, to segments (a segmented control) or to underline, which\n * underlines the active link. `'pills'` is the former name of `'segments'`: deprecated, it\n * renders the same.\n *\n * @type { 'tabs' | 'segments' | 'underline' | 'pills' }\n */\n variant?: NavVariant\n}\n\nexport type NavProps<C extends ElementType = 'ul'> = PolymorphicComponentProps<C, NavOwnProps<C>>\n\ntype NavComponent = (<C extends ElementType = 'ul'>(\n props: NavProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction NavRender<C extends ElementType = 'ul'>(\n { children, className, component, items, layout, size, variant, ...rest }: NavProps<C>,\n ref: PolymorphicRef<C>\n) {\n const Component = component ?? 'ul'\n const _className = classNames(\n 'nav',\n size,\n { [`nav-${layout}`]: layout },\n navVariantClassName(variant, 'Nav'),\n className\n )\n\n const autoContent = items\n ? items.map((item, idx) => (\n <NavItem\n // eslint-disable-next-line react/no-array-index-key\n key={idx}\n active={item.active}\n disabled={item.disabled}\n href={item.href}\n >\n {item.label}\n </NavItem>\n ))\n : null\n\n // No `role`: `navigation` on the `<ul>` took away its list semantics, and `ul` doesn't allow\n // that role. A landmark is the caller's `<nav>` around it, or `component=\"nav\"` holding\n // `NavLink`s without items.\n return (\n <Component className={_className} {...rest} ref={ref}>\n {/* Inside a `NavOverflow`, the items it collapses and its toggle item. */}\n <NavOverflowItems tag={resolveElementTag(Component)}>\n {autoContent ?? children}\n </NavOverflowItems>\n </Component>\n )\n}\n\nexport const Nav = createPolymorphicComponent<NavComponent>(\n NavRender as ForwardRefRenderFunction<Element, NavProps<ElementType>>,\n 'Nav'\n)\n","import React, { forwardRef, HTMLAttributes } from 'react'\nimport classNames from 'classnames'\n\nexport interface NavTitleProps extends HTMLAttributes<HTMLLIElement> {\n /**\n * A string of all className you want applied to the component.\n */\n className?: string\n}\n\nexport const NavTitle = forwardRef<HTMLLIElement, NavTitleProps>(\n ({ children, className, ...rest }, ref) => {\n const _className = classNames('nav-title', className)\n return (\n <li className={_className} {...rest} ref={ref}>\n {children}\n </li>\n )\n }\n)\n\nNavTitle.displayName = 'NavTitle'\n"],"mappings":"iZA4BA,SAAS,EACP,CAAE,WAAU,YAAW,GAAG,GAC1B,EACA,CACA,IAAM,EAAa,EAAW,WAAY,CAAS,EAG7C,EAAiB,EAAqB,EAE5C,OACE,EAAA,cAAA,EAAA,SAAA,KACE,EAAA,cAAC,EAAD,CACE,UAAW,EACX,GAAK,EACA,KAGD,EADH,CACG,EACL,GAAkB,EAAA,cAAC,EAAD,CAAiB,MAAO,CAAE,GAAG,EAAM,UAAS,CAAI,CAAA,CACnE,CAEN,CAEA,MAAa,EAAU,EACrB,EACA,SACF,EC3BM,EAAkB,IAAI,IAAI,CAC9B,SACA,QACA,WACA,WACA,QACA,YACA,MACF,CAAC,EAOD,SAAS,EACP,CAAE,WAAU,YAAW,cAAa,GAAG,GACvC,EACA,CACA,IAAM,EAAa,EAAW,WAAY,CAAE,oBAAqB,CAAY,EAAG,CAAS,EACnF,CAAE,UAAS,YAAW,QAAS,EAO/B,EAAW,EAAmB,EAC9B,EAAY,EAAa,EAAK,EAAS,GAAG,EAC1C,EAAgB,EAAS,OAAS,CAAE,uBAAwB,MAAO,EAAI,IAAA,GAE7E,GAAI,EAAQ,CAAI,GAAK,IAAc,IAAA,IAAa,EAC9C,OACE,EAAA,cAAC,KAAD,CAAI,UAAW,EAAY,GAAI,EAAe,IAAK,CAI/C,EAHF,EAAA,cAAC,EAAD,CAAsB,MAAO,EAAS,KAEhB,EADpB,EAAA,cAAC,EAAa,EAAmC,CAA+B,CAC5D,CACpB,EAIR,GAAM,CAAE,SAAQ,YAAa,EACvB,EAAY,OAAO,YACvB,OAAO,QAAQ,CAAI,CAAC,CAAC,QAAQ,CAAC,KAAS,CAAC,EAAgB,IAAI,CAAG,CAAC,CAClE,EAMA,OALA,EACE,CAAC,CAAC,GAAU,CAAC,CAAC,EACd,gJAEF,EAEE,EAAA,cAAC,KAAD,CAAI,UAAW,EAAY,GAAI,EAAW,GAAI,EAAe,IAAK,CAE9D,EADF,EAAA,cAAC,EAAD,CAAsB,MAAO,EAAS,KAAuC,EAA/B,CAA+B,CAC3E,CAER,CAEA,MAAa,EAAU,EACrB,CACF,EAEA,EAAQ,YAAc,UCnBtB,SAAS,EACP,CAAE,WAAU,YAAW,YAAW,QAAO,SAAQ,OAAM,UAAS,GAAG,GACnE,EACA,CACA,IAAM,EAAY,GAAa,KACzB,EAAa,EACjB,MACA,EACA,EAAG,OAAO,KAAW,CAAO,EAC5B,EAAoB,EAAS,KAAK,EAClC,CACF,EAEM,EAAc,EAChB,EAAM,KAAK,EAAM,IACf,EAAA,cAAC,EAAD,CAEE,IAAK,EACL,OAAQ,EAAK,OACb,SAAU,EAAK,SACf,KAAM,EAAK,IAGJ,EADN,EAAK,KACC,CACV,EACD,KAKJ,OACE,EAAA,cAAC,EAAD,CAAW,UAAW,EAAY,GAAI,EAAW,KAKtC,EAHT,EAAA,cAAC,EAAD,CAAkB,IAAK,EAAkB,CAAS,CAEhC,EADf,GAAe,CACA,CACT,CAEf,CAEA,MAAa,EAAM,EACjB,EACA,KACF,ECtGa,EAAW,GACrB,CAAE,WAAU,YAAW,GAAG,GAAQ,IAAQ,CACzC,IAAM,EAAa,EAAW,YAAa,CAAS,EACpD,OACE,EAAA,cAAC,KAAD,CAAI,UAAW,EAAY,GAAI,EAAW,KAEtC,EADD,CACC,CAER,CACF,EAEA,EAAS,YAAc"}
1
+ {"version":3,"file":"nav-DI6oEULI.js","names":[],"sources":["../../src/components/nav/NavLink.tsx","../../src/components/nav/NavItem.tsx","../../src/components/nav/Nav.tsx","../../src/components/nav/NavTitle.tsx"],"sourcesContent":["import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport { NavOverflowLink, useIsNavOverflowLink } from '../../utils/navOverflow'\nimport { createPolymorphicComponent, PolymorphicRef } from '../../utils/polymorphic'\nimport { LinkProps, Link } from '../link/Link'\n\ntype NavLinkOwnProps = {\n /**\n * Toggle the active state for the component.\n */\n active?: boolean\n /**\n * A string of all className you want applied to the component.\n */\n className?: string\n /**\n * Toggle the disabled state for the component.\n */\n disabled?: boolean\n}\n\nexport type NavLinkProps<C extends ElementType = 'a'> = LinkProps<C> & NavLinkOwnProps\n\ntype NavLinkComponent = (<C extends ElementType = 'a'>(\n props: NavLinkProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction NavLinkRender<C extends ElementType = 'a'>(\n { children, className, ...rest }: NavLinkProps<C>,\n ref: PolymorphicRef<C>\n) {\n const _className = classNames('nav-link', className)\n // Inside a `NavOverflow`, the link of an item that doesn't fit is shown in the menu instead, as\n // a `MenuItem` with these props.\n const isOverflowLink = useIsNavOverflowLink()\n\n return (\n <>\n <Link\n className={_className}\n {...(rest as Record<string, unknown>)}\n ref={ref as PolymorphicRef<ElementType>}\n >\n {children}\n </Link>\n {isOverflowLink && <NavOverflowLink props={{ ...rest, children }} />}\n </>\n )\n}\n\nexport const NavLink = createPolymorphicComponent<NavLinkComponent>(\n NavLinkRender as ForwardRefRenderFunction<Element, NavLinkProps<ElementType>>,\n 'NavLink'\n)\n","import React, {\n ElementType,\n ForwardRefRenderFunction,\n forwardRef,\n ReactElement,\n ReactNode,\n Ref\n} from 'react'\nimport classNames from 'classnames'\n\nimport { useForkedRef } from '../../hooks'\nimport { devWarning } from '../../utils/devWarning'\nimport { hasHref } from '../../utils/elementKind'\nimport { NavOverflowItemScope, useNavOverflowItem } from '../../utils/navOverflow'\nimport { NavLink, NavLinkProps } from './NavLink'\n\nexport type NavItemProps<C extends ElementType = 'a'> = NavLinkProps<C> & {\n /**\n * Keeps the item in the list inside a `NavOverflow`, whatever the width.\n */\n keepVisible?: boolean\n}\n\ntype NavItemComponent = (<C extends ElementType = 'a'>(\n props: NavItemProps<C> & { ref?: Ref<HTMLLIElement> }\n) => ReactElement | null) & { displayName?: string }\n\nconst LINK_ONLY_PROPS = new Set([\n 'active',\n 'color',\n 'disabled',\n 'iconLink',\n 'reset',\n 'stretched',\n 'type'\n])\n\n// A `.nav-item` wrapping a `.nav-link` when there is a link to render: an `href`, or a `component`\n// or `asChild` element, which `NavLink` renders. Otherwise a bare `<li>` around `children`, such as\n// a `MenuToggle`. Only the `<li>` takes the caller's own attributes then: `active`, `disabled` and\n// the other `NavLink` props style a link, and on the `<li>` they were written out as invalid\n// attributes (`disabled=\"\"`, `component=\"button\"`).\nfunction NavItemRender<C extends ElementType = 'a'>(\n { children, className, keepVisible, ...rest }: NavItemProps<C>,\n ref: Ref<HTMLLIElement>\n) {\n const _className = classNames('nav-item', { 'nav-overflow-keep': keepVisible }, className)\n const { asChild, component, href } = rest as {\n asChild?: boolean\n component?: ElementType\n href?: string\n }\n // Inside a `NavOverflow`: the `<li>` is what it measures, and hides when the item is in the\n // menu. chassis-css hides it by this attribute.\n const overflow = useNavOverflowItem()\n const forkedRef = useForkedRef(ref, overflow.ref)\n const overflowProps = overflow.hidden ? { 'data-cx-nav-overflow': 'true' } : undefined\n\n if (hasHref(href) || component !== undefined || asChild) {\n return (\n <li className={_className} {...overflowProps} ref={forkedRef}>\n <NavOverflowItemScope value={overflow.scope}>\n <NavLink {...(rest as Record<string, unknown>)}>{children as ReactNode}</NavLink>\n </NavOverflowItemScope>\n </li>\n )\n }\n\n const { active, disabled } = rest as NavLinkProps<'a'>\n const itemProps = Object.fromEntries(\n Object.entries(rest).filter(([key]) => !LINK_ONLY_PROPS.has(key))\n )\n devWarning(\n !!active || !!disabled,\n 'NavItem: `active` and `disabled` style its link, and without `href`, `component` or ' +\n '`asChild` it renders none. Put them on the link inside it.'\n )\n return (\n <li className={_className} {...itemProps} {...overflowProps} ref={forkedRef}>\n <NavOverflowItemScope value={overflow.scope}>{children}</NavOverflowItemScope>\n </li>\n )\n}\n\nexport const NavItem = forwardRef(\n NavItemRender as ForwardRefRenderFunction<HTMLLIElement, NavItemProps<ElementType>>\n) as NavItemComponent\n\nNavItem.displayName = 'NavItem'\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport { resolveElementTag } from '../../utils/elementKind'\nimport { NavOverflowItems } from '../../utils/navOverflow'\nimport { NavVariant, navVariantClassName } from '../../utils/navVariant'\nimport {\n createPolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef\n} from '../../utils/polymorphic'\nimport { NavItem } from './NavItem'\n\nexport interface NavItemDef {\n /**\n * Label content for the nav item.\n */\n label: React.ReactNode\n /**\n * URL for the nav link.\n */\n href?: string\n /**\n * Marks the item as active.\n */\n active?: boolean\n /**\n * Marks the item as disabled.\n */\n disabled?: boolean\n}\n\ntype NavOwnProps<C extends ElementType> = {\n /**\n * A string of all className you want applied to the base component.\n */\n className?: string\n /**\n * Component used for the root node. Either a string to use a HTML element or a component.\n */\n component?: C\n /**\n * Array of nav item definitions for data-driven rendering. When provided, children are ignored.\n */\n items?: NavItemDef[]\n /**\n * Specify a layout type for component.\n */\n layout?: 'fill' | 'justified'\n /**\n * Size the component sm or lg.\n */\n size?: 'sm' | 'lg'\n /**\n * Set the nav variant to tabs, to segments (a segmented control) or to underline, which\n * underlines the active link. `'pills'` is the former name of `'segments'`: deprecated, it\n * renders the same.\n *\n * @type { 'tabs' | 'segments' | 'underline' | 'pills' }\n */\n variant?: NavVariant\n}\n\nexport type NavProps<C extends ElementType = 'ul'> = PolymorphicComponentProps<C, NavOwnProps<C>>\n\ntype NavComponent = (<C extends ElementType = 'ul'>(\n props: NavProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction NavRender<C extends ElementType = 'ul'>(\n { children, className, component, items, layout, size, variant, ...rest }: NavProps<C>,\n ref: PolymorphicRef<C>\n) {\n const Component = component ?? 'ul'\n const _className = classNames(\n 'nav',\n size,\n { [`nav-${layout}`]: layout },\n navVariantClassName(variant, 'Nav'),\n className\n )\n\n const autoContent = items\n ? items.map((item, idx) => (\n <NavItem\n // eslint-disable-next-line react/no-array-index-key\n key={idx}\n active={item.active}\n disabled={item.disabled}\n href={item.href}\n >\n {item.label}\n </NavItem>\n ))\n : null\n\n // No `role`: `navigation` on the `<ul>` took away its list semantics, and `ul` doesn't allow\n // that role. A landmark is the caller's `<nav>` around it, or `component=\"nav\"` holding\n // `NavLink`s without items.\n return (\n <Component className={_className} {...rest} ref={ref}>\n {/* Inside a `NavOverflow`, the items it collapses and its toggle item. */}\n <NavOverflowItems tag={resolveElementTag(Component)}>\n {autoContent ?? children}\n </NavOverflowItems>\n </Component>\n )\n}\n\nexport const Nav = createPolymorphicComponent<NavComponent>(\n NavRender as ForwardRefRenderFunction<Element, NavProps<ElementType>>,\n 'Nav'\n)\n","import React, { forwardRef, HTMLAttributes } from 'react'\nimport classNames from 'classnames'\n\nexport interface NavTitleProps extends HTMLAttributes<HTMLLIElement> {\n /**\n * A string of all className you want applied to the component.\n */\n className?: string\n}\n\nexport const NavTitle = forwardRef<HTMLLIElement, NavTitleProps>(\n ({ children, className, ...rest }, ref) => {\n const _className = classNames('nav-title', className)\n return (\n <li className={_className} {...rest} ref={ref}>\n {children}\n </li>\n )\n }\n)\n\nNavTitle.displayName = 'NavTitle'\n"],"mappings":"iZA4BA,SAAS,EACP,CAAE,WAAU,YAAW,GAAG,GAC1B,EACA,CACA,IAAM,EAAa,EAAW,WAAY,CAAS,EAG7C,EAAiB,EAAqB,EAE5C,OACE,EAAA,cAAA,EAAA,SAAA,KACE,EAAA,cAAC,EAAD,CACE,UAAW,EACX,GAAK,EACA,KAGD,EADH,CACG,EACL,GAAkB,EAAA,cAAC,EAAD,CAAiB,MAAO,CAAE,GAAG,EAAM,UAAS,CAAI,CAAA,CACnE,CAEN,CAEA,MAAa,EAAU,EACrB,EACA,SACF,EC3BM,EAAkB,IAAI,IAAI,CAC9B,SACA,QACA,WACA,WACA,QACA,YACA,MACF,CAAC,EAOD,SAAS,EACP,CAAE,WAAU,YAAW,cAAa,GAAG,GACvC,EACA,CACA,IAAM,EAAa,EAAW,WAAY,CAAE,oBAAqB,CAAY,EAAG,CAAS,EACnF,CAAE,UAAS,YAAW,QAAS,EAO/B,EAAW,EAAmB,EAC9B,EAAY,EAAa,EAAK,EAAS,GAAG,EAC1C,EAAgB,EAAS,OAAS,CAAE,uBAAwB,MAAO,EAAI,IAAA,GAE7E,GAAI,EAAQ,CAAI,GAAK,IAAc,IAAA,IAAa,EAC9C,OACE,EAAA,cAAC,KAAD,CAAI,UAAW,EAAY,GAAI,EAAe,IAAK,CAI/C,EAHF,EAAA,cAAC,EAAD,CAAsB,MAAO,EAAS,KAEhB,EADpB,EAAA,cAAC,EAAa,EAAmC,CAA+B,CAC5D,CACpB,EAIR,GAAM,CAAE,SAAQ,YAAa,EACvB,EAAY,OAAO,YACvB,OAAO,QAAQ,CAAI,CAAC,CAAC,QAAQ,CAAC,KAAS,CAAC,EAAgB,IAAI,CAAG,CAAC,CAClE,EAMA,OALA,EACE,CAAC,CAAC,GAAU,CAAC,CAAC,EACd,gJAEF,EAEE,EAAA,cAAC,KAAD,CAAI,UAAW,EAAY,GAAI,EAAW,GAAI,EAAe,IAAK,CAE9D,EADF,EAAA,cAAC,EAAD,CAAsB,MAAO,EAAS,KAAuC,EAA/B,CAA+B,CAC3E,CAER,CAEA,MAAa,EAAU,EACrB,CACF,EAEA,EAAQ,YAAc,UCnBtB,SAAS,EACP,CAAE,WAAU,YAAW,YAAW,QAAO,SAAQ,OAAM,UAAS,GAAG,GACnE,EACA,CACA,IAAM,EAAY,GAAa,KACzB,EAAa,EACjB,MACA,EACA,EAAG,OAAO,KAAW,CAAO,EAC5B,EAAoB,EAAS,KAAK,EAClC,CACF,EAEM,EAAc,EAChB,EAAM,KAAK,EAAM,IACf,EAAA,cAAC,EAAD,CAEE,IAAK,EACL,OAAQ,EAAK,OACb,SAAU,EAAK,SACf,KAAM,EAAK,IAGJ,EADN,EAAK,KACC,CACV,EACD,KAKJ,OACE,EAAA,cAAC,EAAD,CAAW,UAAW,EAAY,GAAI,EAAW,KAKtC,EAHT,EAAA,cAAC,EAAD,CAAkB,IAAK,EAAkB,CAAS,CAEhC,EADf,GAAe,CACA,CACT,CAEf,CAEA,MAAa,EAAM,EACjB,EACA,KACF,ECtGa,EAAW,GACrB,CAAE,WAAU,YAAW,GAAG,GAAQ,IAAQ,CACzC,IAAM,EAAa,EAAW,YAAa,CAAS,EACpD,OACE,EAAA,cAAC,KAAD,CAAI,UAAW,EAAY,GAAI,EAAW,KAEtC,EADD,CACC,CAER,CACF,EAEA,EAAS,YAAc"}
@@ -1,2 +1,2 @@
1
- import"./focus-ring-SR_LwaN7.js";import{v as e}from"./slot-CNhFZdHF.js";import{t}from"./useForkedRef-DVEfT-KI.js";import{t as n}from"./polymorphic-BhGNZQja.js";import{t as r}from"./useIsomorphicLayoutEffect-BbqRwuqn.js";import{n as i}from"./Portal-CgeR1WXV.js";import{t as a}from"./iconSlot-BNu2MrFI.js";import{n as o}from"./navOverflow-B5krZe6D.js";import{t as s}from"./Menu-CSBg2Zmc.js";import{l as c,n as l,t as u}from"./MenuToggle-BdQtF7FV.js";import d,{createContext as f,useCallback as p,useContext as m,useEffect as h,useMemo as g,useRef as _,useState as v,useSyncExternalStore as y}from"react";import b from"classnames";import{flushSync as x}from"react-dom";const S=f(null);function C(e){for(let t=e.previousElementSibling;t;t=t.previousElementSibling){if(t.hasAttribute(`data-cx-nav-overflow`))continue;let e=t.querySelector(`a[href], button:not(:disabled), [tabindex]`);if(e)return e}return null}function w({tabs:e}){let t=m(S),[n,i]=v(!1),o=_(null),f=_(!1),p=t?.hidden,h=!p?.length;r(()=>{let e=o.current;if(!e||!f.current)return;let t=e.ownerDocument.activeElement;(!t||t===e.ownerDocument.body||h&&e.contains(t))&&(f.current=!h,(h?C(e):e.querySelector(`.nav-overflow-toggle`))?.focus())},[p,h]);let g=t=>{f.current=!0,e&&t.stopPropagation()},x=()=>{f.current=!1};if(y(t?.subscribe??D,t?.getVersion??O,t?.getVersion??O),!t||!p)return null;let{getLink:w,iconPlacement:k,menuContainer:A,menuPlacement:j,moreIcon:M,moreLabel:N,moreText:P}=t;h&&n&&i(!1);let F=d.createElement(`span`,{key:`icon`,className:`nav-overflow-icon`,style:E},d.createElement(a,{icon:`more`,override:M})),I=P===!1?null:d.createElement(`span`,{key:`text`,className:`nav-overflow-text`},P);return d.createElement(s,{component:`li`,className:b(`nav-item nav-overflow-item`,{[T]:h}),container:e&&typeof A!=`object`||A,onBlur:x,onFocus:g,onVisibleChange:i,placement:j,visible:n&&!h,...e&&{role:`presentation`},ref:o},d.createElement(u,{"aria-label":P===!1?N:void 0,caret:!1,className:`nav-link nav-overflow-toggle`,component:`button`,...e&&{"aria-selected":!1,role:`tab`,tabIndex:-1}},k===`end`?[I,F]:[F,I]),d.createElement(l,{className:`nav-overflow-menu`},p.map(e=>{let t=w(e);return t&&d.createElement(c,{key:e,...t})})))}const T=`d-none`,E={"--cx-icon-color":`currentcolor`,"--cx-icon-size":`1rem`},D=()=>()=>{},O=()=>0;function k({available:e,collapseAll:t,gap:n,items:r,more:i,threshold:a}){let o=r.filter(e=>!e.keep),s=e=>e.map(e=>e.id);if(t)return s(o);if(r.reduce((e,t)=>e+t.width,0)+n*(r.length-1)<=e+1)return[];let c=i+r.reduce((e,t)=>t.keep?e+t.width+n:e,0),l=o.filter(t=>(c+=t.width+n,c>e+1));return r.length-l.length<a&&r.length>a&&(l=r.slice(a).filter(e=>!e.keep)),s(l)}function A(){let e=new Map,t=new Set,n=0,r=t=>{let n=e.get(t);return n||(n={element:null,link:null},e.set(t,n)),n};return{entries:e,getVersion:()=>n,notify:()=>{n+=1,t.forEach(e=>e())},set:(t,n)=>{let i=Object.assign(r(t),n);!i.element&&!i.link&&e.delete(t)},subscribe:e=>(t.add(e),()=>{t.delete(e)})}}const j=`data-cx-nav-overflow`,M=`d-none`,N=[],P=e=>Number.parseFloat(e)||0,F=e=>`offsetWidth`in e,I=(e,t)=>e.length===t.length&&e.every((e,n)=>e===t[n]);function ee(e,t){if(typeof e==`number`)return e;if(!e)return 0;let n=getComputedStyle(t.ownerDocument.documentElement),r=n.getPropertyValue(`--cx-breakpoint-${e}`).trim();return/r?em$/.test(r)?P(r)*(P(n.fontSize)||16):P(r)}const te={overflowX:`auto`,scrollbarWidth:`none`};function L({children:n,className:a,collapseBelow:s,component:c,iconPlacement:l=`start`,menuContainer:u,menuPlacement:f=`bottom-end`,moreIcon:m,moreLabel:y=`More`,moreText:C=`More`,onOverflow:T,style:E,threshold:D=0,...O},L){let R=c??`div`,z=_(null),ne=p(e=>{e&&(z.current=e)},[]),re=t(L,ne),ie=i(),[B]=v(A),[V,H]=v(N),U=_(V),W=_(0),G=_({collapseBelow:s,threshold:D});G.current={collapseBelow:s,threshold:D};let K=_(null),q=p(()=>{let t=z.current?.isConnected?z.current:null,n=t&&Array.from(t.children).find(e=>e.matches(`.nav`));if(e(!!t&&!n,"NavOverflow: expects a `Nav`, a `NavbarNav` or a `TabList` as its child; found no `.nav` to collapse."),!t||!n)return null;let r=Array.from(n.children).filter(F),i=r.find(e=>e.classList.contains(`nav-overflow-item`)),a=r.filter(e=>e!==i);if(Y(t,n,r),W.current=a.length,!i)return[];let o=new Map;B.entries.forEach((e,t)=>{e.element&&o.set(e.element,t)});let s=a.filter(e=>e.hasAttribute(j)),c=i.classList.contains(M);s.forEach(e=>e.removeAttribute(j)),i.classList.remove(M);try{let e=getComputedStyle(t),r=getComputedStyle(n),s=t.clientWidth-P(e.paddingInlineStart)-P(e.paddingInlineEnd),c=t.ownerDocument.activeElement,l=a.map(e=>{let t=o.get(e);return{id:t,keep:!t||!B.entries.get(t)?.link||e.classList.contains(`nav-overflow-keep`)||e.querySelector(`.nav-link.active, .nav-link[aria-current]:not([aria-current="false"]), [role="tab"][tabindex="0"]`)!==null||e.contains(c),width:e.offsetWidth}}),{collapseBelow:u,threshold:d}=G.current;return k({available:s-P(r.paddingInlineStart)-P(r.paddingInlineEnd)-P(r.borderInlineStartWidth)-P(r.borderInlineEndWidth),collapseAll:s<ee(u,t),gap:P(r.columnGap),items:l,more:i.offsetWidth,threshold:d})}finally{s.forEach(e=>e.setAttribute(j,`true`)),c&&i.classList.add(M),t.offsetWidth,K.current?.mutation?.takeRecords()}},[B]),J=p(()=>{let e=q();e&&!I(e,U.current)&&(U.current=e,H(e))},[q]);function Y(e,t,n){let r=K.current;if(r&&r.wrapper!==e&&(X(),r=null),!r){let t=()=>x(J),n={frame:0,mutation:typeof MutationObserver>`u`?null:new MutationObserver(t),nav:null,observed:new Set,resize:typeof ResizeObserver>`u`?null:new ResizeObserver(r=>{if(!r.some(t=>t.target===e)){cancelAnimationFrame(n.frame),n.frame=requestAnimationFrame(t);return}let i=U.current;t(),U.current!==i&&K.current===n&&(n.resize?.unobserve(e),cancelAnimationFrame(n.wrapperFrame),n.wrapperFrame=requestAnimationFrame(()=>n.resize?.observe(e)))}),wrapperFrame:0,wrapper:e};r=K.current=n,r.resize?.observe(e)}let{mutation:i,observed:a,resize:o}=r;r.nav!==t&&(r.nav=t,i?.disconnect(),i?.observe(t,{attributeFilter:[`class`,`aria-current`],attributes:!0,childList:!0,subtree:!0}));let s=new Set(n);a.forEach(e=>{s.has(e)||(o?.unobserve(e),a.delete(e))}),s.forEach(e=>{a.has(e)||(o?.observe(e),a.add(e))})}function X(){let e=K.current;e&&(cancelAnimationFrame(e.frame),cancelAnimationFrame(e.wrapperFrame),e.mutation?.disconnect(),e.resize?.disconnect(),K.current=null)}h(()=>X,[]),r(J,[J,R,s,D]);let Z=_(V);h(()=>{Z.current!==V&&(Z.current=V,T?.({overflowCount:V.length,visibleCount:W.current-V.length}))},[V]);let Q=p((e,t)=>B.set(e,{element:t}),[B]),$=p((e,t)=>{B.set(e,{link:t}),U.current.includes(e)&&B.notify()},[B]),ae=g(()=>({hidden:V,More:w,registerItem:Q,registerLink:$,update:J}),[V,Q,$,J]),oe=g(()=>({getLink:e=>B.entries.get(e)?.link??null,getVersion:B.getVersion,hidden:V,iconPlacement:l,menuContainer:u,menuPlacement:f,moreIcon:m,moreLabel:y,moreText:C,subscribe:B.subscribe}),[V,l,u,f,m,y,C,B]);return d.createElement(o.Provider,{value:ae},d.createElement(S.Provider,{value:oe},d.createElement(R,{className:b(`nav-overflow`,a),style:ie?E:{...te,...E},...O,ref:re},n)))}const R=n(L,`NavOverflow`);export{R as t};
2
- //# sourceMappingURL=nav-overflow-Ay5mM5Gc.js.map
1
+ import"./focus-ring-SR_LwaN7.js";import{v as e}from"./slot-CNhFZdHF.js";import{t}from"./useForkedRef-DVEfT-KI.js";import{t as n}from"./polymorphic-BhGNZQja.js";import{t as r}from"./useIsomorphicLayoutEffect-BbqRwuqn.js";import{n as i}from"./Portal-CgeR1WXV.js";import{t as a}from"./iconSlot-BNu2MrFI.js";import{n as o}from"./navOverflow-B5krZe6D.js";import{t as s}from"./Menu-CSBg2Zmc.js";import{l as c,n as l,t as u}from"./MenuToggle-7RQ0dmtZ.js";import d,{createContext as f,useCallback as p,useContext as m,useEffect as h,useMemo as g,useRef as _,useState as v,useSyncExternalStore as y}from"react";import b from"classnames";import{flushSync as x}from"react-dom";const S=f(null);function C(e){for(let t=e.previousElementSibling;t;t=t.previousElementSibling){if(t.hasAttribute(`data-cx-nav-overflow`))continue;let e=t.querySelector(`a[href], button:not(:disabled), [tabindex]`);if(e)return e}return null}function w({tabs:e}){let t=m(S),[n,i]=v(!1),o=_(null),f=_(!1),p=t?.hidden,h=!p?.length;r(()=>{let e=o.current;if(!e||!f.current)return;let t=e.ownerDocument.activeElement;(!t||t===e.ownerDocument.body||h&&e.contains(t))&&(f.current=!h,(h?C(e):e.querySelector(`.nav-overflow-toggle`))?.focus())},[p,h]);let g=t=>{f.current=!0,e&&t.stopPropagation()},x=()=>{f.current=!1};if(y(t?.subscribe??D,t?.getVersion??O,t?.getVersion??O),!t||!p)return null;let{getLink:w,iconPlacement:k,menuContainer:A,menuPlacement:j,moreIcon:M,moreLabel:N,moreText:P}=t;h&&n&&i(!1);let F=d.createElement(`span`,{key:`icon`,className:`nav-overflow-icon`,style:E},d.createElement(a,{icon:`more`,override:M})),I=P===!1?null:d.createElement(`span`,{key:`text`,className:`nav-overflow-text`},P);return d.createElement(s,{component:`li`,className:b(`nav-item nav-overflow-item`,{[T]:h}),container:e&&typeof A!=`object`||A,onBlur:x,onFocus:g,onVisibleChange:i,placement:j,visible:n&&!h,...e&&{role:`presentation`},ref:o},d.createElement(u,{"aria-label":P===!1?N:void 0,caret:!1,className:`nav-link nav-overflow-toggle`,component:`button`,...e&&{"aria-selected":!1,role:`tab`,tabIndex:-1}},k===`end`?[I,F]:[F,I]),d.createElement(l,{className:`nav-overflow-menu`},p.map(e=>{let t=w(e);return t&&d.createElement(c,{key:e,...t})})))}const T=`d-none`,E={"--cx-icon-color":`currentcolor`,"--cx-icon-size":`1rem`},D=()=>()=>{},O=()=>0;function k({available:e,collapseAll:t,gap:n,items:r,more:i,threshold:a}){let o=r.filter(e=>!e.keep),s=e=>e.map(e=>e.id);if(t)return s(o);if(r.reduce((e,t)=>e+t.width,0)+n*(r.length-1)<=e+1)return[];let c=i+r.reduce((e,t)=>t.keep?e+t.width+n:e,0),l=o.filter(t=>(c+=t.width+n,c>e+1));return r.length-l.length<a&&r.length>a&&(l=r.slice(a).filter(e=>!e.keep)),s(l)}function A(){let e=new Map,t=new Set,n=0,r=t=>{let n=e.get(t);return n||(n={element:null,link:null},e.set(t,n)),n};return{entries:e,getVersion:()=>n,notify:()=>{n+=1,t.forEach(e=>e())},set:(t,n)=>{let i=Object.assign(r(t),n);!i.element&&!i.link&&e.delete(t)},subscribe:e=>(t.add(e),()=>{t.delete(e)})}}const j=`data-cx-nav-overflow`,M=`d-none`,N=[],P=e=>Number.parseFloat(e)||0,F=e=>`offsetWidth`in e,I=(e,t)=>e.length===t.length&&e.every((e,n)=>e===t[n]);function ee(e,t){if(typeof e==`number`)return e;if(!e)return 0;let n=getComputedStyle(t.ownerDocument.documentElement),r=n.getPropertyValue(`--cx-breakpoint-${e}`).trim();return/r?em$/.test(r)?P(r)*(P(n.fontSize)||16):P(r)}const te={overflowX:`auto`,scrollbarWidth:`none`};function L({children:n,className:a,collapseBelow:s,component:c,iconPlacement:l=`start`,menuContainer:u,menuPlacement:f=`bottom-end`,moreIcon:m,moreLabel:y=`More`,moreText:C=`More`,onOverflow:T,style:E,threshold:D=0,...O},L){let R=c??`div`,z=_(null),ne=p(e=>{e&&(z.current=e)},[]),re=t(L,ne),ie=i(),[B]=v(A),[V,H]=v(N),U=_(V),W=_(0),G=_({collapseBelow:s,threshold:D});G.current={collapseBelow:s,threshold:D};let K=_(null),q=p(()=>{let t=z.current?.isConnected?z.current:null,n=t&&Array.from(t.children).find(e=>e.matches(`.nav`));if(e(!!t&&!n,"NavOverflow: expects a `Nav`, a `NavbarNav` or a `TabList` as its child; found no `.nav` to collapse."),!t||!n)return null;let r=Array.from(n.children).filter(F),i=r.find(e=>e.classList.contains(`nav-overflow-item`)),a=r.filter(e=>e!==i);if(Y(t,n,r),W.current=a.length,!i)return[];let o=new Map;B.entries.forEach((e,t)=>{e.element&&o.set(e.element,t)});let s=a.filter(e=>e.hasAttribute(j)),c=i.classList.contains(M);s.forEach(e=>e.removeAttribute(j)),i.classList.remove(M);try{let e=getComputedStyle(t),r=getComputedStyle(n),s=t.clientWidth-P(e.paddingInlineStart)-P(e.paddingInlineEnd),c=t.ownerDocument.activeElement,l=a.map(e=>{let t=o.get(e);return{id:t,keep:!t||!B.entries.get(t)?.link||e.classList.contains(`nav-overflow-keep`)||e.querySelector(`.nav-link.active, .nav-link[aria-current]:not([aria-current="false"]), [role="tab"][tabindex="0"]`)!==null||e.contains(c),width:e.offsetWidth}}),{collapseBelow:u,threshold:d}=G.current;return k({available:s-P(r.paddingInlineStart)-P(r.paddingInlineEnd)-P(r.borderInlineStartWidth)-P(r.borderInlineEndWidth),collapseAll:s<ee(u,t),gap:P(r.columnGap),items:l,more:i.offsetWidth,threshold:d})}finally{s.forEach(e=>e.setAttribute(j,`true`)),c&&i.classList.add(M),t.offsetWidth,K.current?.mutation?.takeRecords()}},[B]),J=p(()=>{let e=q();e&&!I(e,U.current)&&(U.current=e,H(e))},[q]);function Y(e,t,n){let r=K.current;if(r&&r.wrapper!==e&&(X(),r=null),!r){let t=()=>x(J),n={frame:0,mutation:typeof MutationObserver>`u`?null:new MutationObserver(t),nav:null,observed:new Set,resize:typeof ResizeObserver>`u`?null:new ResizeObserver(r=>{if(!r.some(t=>t.target===e)){cancelAnimationFrame(n.frame),n.frame=requestAnimationFrame(t);return}let i=U.current;t(),U.current!==i&&K.current===n&&(n.resize?.unobserve(e),cancelAnimationFrame(n.wrapperFrame),n.wrapperFrame=requestAnimationFrame(()=>n.resize?.observe(e)))}),wrapperFrame:0,wrapper:e};r=K.current=n,r.resize?.observe(e)}let{mutation:i,observed:a,resize:o}=r;r.nav!==t&&(r.nav=t,i?.disconnect(),i?.observe(t,{attributeFilter:[`class`,`aria-current`],attributes:!0,childList:!0,subtree:!0}));let s=new Set(n);a.forEach(e=>{s.has(e)||(o?.unobserve(e),a.delete(e))}),s.forEach(e=>{a.has(e)||(o?.observe(e),a.add(e))})}function X(){let e=K.current;e&&(cancelAnimationFrame(e.frame),cancelAnimationFrame(e.wrapperFrame),e.mutation?.disconnect(),e.resize?.disconnect(),K.current=null)}h(()=>X,[]),r(J,[J,R,s,D]);let Z=_(V);h(()=>{Z.current!==V&&(Z.current=V,T?.({overflowCount:V.length,visibleCount:W.current-V.length}))},[V]);let Q=p((e,t)=>B.set(e,{element:t}),[B]),$=p((e,t)=>{B.set(e,{link:t}),U.current.includes(e)&&B.notify()},[B]),ae=g(()=>({hidden:V,More:w,registerItem:Q,registerLink:$,update:J}),[V,Q,$,J]),oe=g(()=>({getLink:e=>B.entries.get(e)?.link??null,getVersion:B.getVersion,hidden:V,iconPlacement:l,menuContainer:u,menuPlacement:f,moreIcon:m,moreLabel:y,moreText:C,subscribe:B.subscribe}),[V,l,u,f,m,y,C,B]);return d.createElement(o.Provider,{value:ae},d.createElement(S.Provider,{value:oe},d.createElement(R,{className:b(`nav-overflow`,a),style:ie?E:{...te,...E},...O,ref:re},n)))}const R=n(L,`NavOverflow`);export{R as t};
2
+ //# sourceMappingURL=nav-overflow-DlLer6EK.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"nav-overflow-Ay5mM5Gc.js","names":["HIDDEN_CLASS"],"sources":["../../src/components/nav-overflow/more.tsx","../../src/components/nav-overflow/overflow.ts","../../src/components/nav-overflow/NavOverflow.tsx"],"sourcesContent":["import React, {\n createContext,\n CSSProperties,\n FocusEvent,\n ReactNode,\n useContext,\n useRef,\n useState,\n useSyncExternalStore\n} from 'react'\nimport classNames from 'classnames'\n\nimport { useIsomorphicLayoutEffect } from '../../hooks'\nimport { IconValue } from '../../utils/iconConfig'\nimport { IconSlot } from '../../utils/iconSlot'\nimport { NavOverflowLinkProps, NavOverflowMoreProps } from '../../utils/navOverflow'\nimport { Placement } from '../../utils/overlayPlacement'\nimport { Menu } from '../menu/Menu'\nimport { MenuItem } from '../menu/MenuItem'\nimport { MenuList } from '../menu/MenuList'\nimport { MenuToggle } from '../menu/MenuToggle'\n\n// From `NavOverflow` to the toggle item, which a list renders for it: the items in the menu, the\n// props their links registered, and how the toggle looks.\nexport interface NavOverflowMoreState {\n getLink: (id: string) => NavOverflowLinkProps | null\n getVersion: () => number\n hidden: readonly string[]\n iconPlacement: 'start' | 'end'\n menuContainer: boolean | Element | undefined\n menuPlacement: Placement\n moreIcon: IconValue | undefined\n moreLabel: string\n moreText: ReactNode | false\n subscribe: (listener: () => void) => () => void\n}\n\nexport const NavOverflowMoreContext = createContext<NavOverflowMoreState | null>(null)\n\n// The nearest item before `item` that is shown and can take focus: its link, or its tab.\nfunction lastShownStop(item: HTMLElement): HTMLElement | null {\n for (let shown = item.previousElementSibling; shown; shown = shown.previousElementSibling) {\n if (shown.hasAttribute('data-cx-nav-overflow')) continue\n const stop = shown.querySelector<HTMLElement>('a[href], button:not(:disabled), [tabindex]')\n if (stop) return stop\n }\n return null\n}\n\n// chassis-css's markup (`nav-overflow.js`): a `.nav-item.nav-overflow-item` holding the\n// `.nav-link.nav-overflow-toggle` button and the `.menu.nav-overflow-menu`. It is in the list at\n// all times, hidden while every item fits, so its width can be measured before it is needed.\nexport function NavOverflowMore({ tabs }: NavOverflowMoreProps) {\n const state = useContext(NavOverflowMoreContext)\n const [visible, setVisible] = useState(false)\n const itemRef = useRef<HTMLLIElement>(null)\n const focusWithinRef = useRef(false)\n const hidden = state?.hidden\n const empty = !hidden?.length\n\n // A resize can take away what has focus here: the toggle, when the last item leaves the menu,\n // or a menu item, when its item is back in the list. Neither blurs first, and focus would fall\n // to the page. It goes to the toggle while there is one, and to the last item otherwise.\n useIsomorphicLayoutEffect(() => {\n const item = itemRef.current\n if (!item || !focusWithinRef.current) return\n const active = item.ownerDocument.activeElement\n const lost = !active || active === item.ownerDocument.body || (empty && item.contains(active))\n if (!lost) return\n focusWithinRef.current = !empty\n const stop = empty\n ? lastShownStop(item)\n : item.querySelector<HTMLElement>('.nav-overflow-toggle')\n stop?.focus()\n }, [hidden, empty])\n\n const handleFocus = (event: FocusEvent) => {\n focusWithinRef.current = true\n // react-aria's tab list takes focus back to the selected tab when focus enters the list from\n // outside, which a click on the toggle does. The toggle is reached with the arrow keys, from\n // a tab (`TabList`), so the list doesn't need to hear of its focus.\n if (tabs) event.stopPropagation()\n }\n const handleBlur = () => {\n focusWithinRef.current = false\n }\n // A hidden item's link re-registers its props on each of its renders.\n useSyncExternalStore(\n state?.subscribe ?? subscribeToNothing,\n state?.getVersion ?? zero,\n state?.getVersion ?? zero\n )\n\n if (!state || !hidden) return null\n\n const { getLink, iconPlacement, menuContainer, menuPlacement, moreIcon, moreLabel, moreText } =\n state\n // The toggle goes when the last item leaves the menu, and an open menu with it.\n if (empty && visible) setVisible(false)\n\n // Keyed, so `iconPlacement` moves the two spans instead of turning one into the other.\n const icon = (\n <span key=\"icon\" className=\"nav-overflow-icon\" style={ICON_STYLE}>\n <IconSlot icon=\"more\" override={moreIcon} />\n </span>\n )\n const text =\n moreText === false ? null : (\n <span key=\"text\" className=\"nav-overflow-text\">\n {moreText}\n </span>\n )\n\n return (\n <Menu\n component=\"li\"\n className={classNames('nav-item nav-overflow-item', { [HIDDEN_CLASS]: empty })}\n // A `tablist` owns tabs only. The toggle is one of them, and the menu is rendered outside.\n // (No `instanceof Element`: a server has no `Element`.)\n container={tabs ? (typeof menuContainer === 'object' ? menuContainer : true) : menuContainer}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onVisibleChange={setVisible}\n placement={menuPlacement}\n visible={visible && !empty}\n {...(tabs && { role: 'presentation' })}\n ref={itemRef}\n >\n <MenuToggle\n aria-label={moreText === false ? moreLabel : undefined}\n caret={false}\n className=\"nav-link nav-overflow-toggle\"\n component=\"button\"\n {...(tabs && { 'aria-selected': false, role: 'tab', tabIndex: -1 })}\n >\n {iconPlacement === 'end' ? [text, icon] : [icon, text]}\n </MenuToggle>\n <MenuList className=\"nav-overflow-menu\">\n {hidden.map((id) => {\n const link = getLink(id)\n return link && <MenuItem key={id} {...link} />\n })}\n </MenuList>\n </Menu>\n )\n}\n\nconst HIDDEN_CLASS = 'd-none'\n// The icon as chassis-css's plugin draws its own: in the color of the toggle's text, and 1rem\n// wide. The default icon size is taller than a link's text, and would make the list a little\n// taller each time the toggle appeared.\nconst ICON_STYLE = { '--cx-icon-color': 'currentcolor', '--cx-icon-size': '1rem' } as CSSProperties\nconst subscribeToNothing = () => () => {}\nconst zero = () => 0\n","// Which items go into the menu, from widths `NavOverflow` has read with every item shown.\n\nexport interface MeasuredItem {\n /**\n * Unset for an item that registered nothing, which can't be moved.\n */\n id?: string\n /**\n * Stays in the list whatever the width: marked to keep, active, focused, or with no link for\n * the menu to show.\n */\n keep: boolean\n width: number\n}\n\nexport interface Measurement {\n /**\n * The width the items have to fit in.\n */\n available: number\n /**\n * The wrapper is narrower than `collapseBelow`.\n */\n collapseAll: boolean\n gap: number\n /**\n * In document order, without the toggle item.\n */\n items: MeasuredItem[]\n /**\n * The width of the toggle item.\n */\n more: number\n /**\n * The fewest items to leave in the list.\n */\n threshold: number\n}\n\n// A pixel of slack for sub-pixel layout: `offsetWidth` is rounded.\nconst SLACK = 1\n\nexport function overflowingIds({\n available,\n collapseAll,\n gap,\n items,\n more,\n threshold\n}: Measurement): string[] {\n const movable = items.filter((item) => !item.keep)\n const ids = (overflowing: MeasuredItem[]) => overflowing.map((item) => item.id as string)\n\n if (collapseAll) return ids(movable)\n\n // Everything fits without the toggle, which then isn't shown. chassis-css's plugin always\n // reserves the toggle's width, and so moves the last item of a list that fits exactly.\n const total = items.reduce((sum, item) => sum + item.width, 0) + gap * (items.length - 1)\n if (total <= available + SLACK) return []\n\n // The toggle and the kept items are shown whatever happens, each with the gap to the next.\n let used = more + items.reduce((sum, item) => (item.keep ? sum + item.width + gap : sum), 0)\n let overflowing = movable.filter((item) => {\n used += item.width + gap\n return used > available + SLACK\n })\n\n if (items.length - overflowing.length < threshold && items.length > threshold) {\n overflowing = items.slice(threshold).filter((item) => !item.keep)\n }\n\n return ids(overflowing)\n}\n","import React, {\n CSSProperties,\n ElementType,\n ForwardRefRenderFunction,\n ReactElement,\n ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react'\nimport { flushSync } from 'react-dom'\nimport classNames from 'classnames'\n\nimport { useForkedRef, useIsomorphicLayoutEffect } from '../../hooks'\nimport { Breakpoint } from '../../types'\nimport { devWarning } from '../../utils/devWarning'\nimport { IconValue } from '../../utils/iconConfig'\nimport {\n NavOverflowContext,\n NavOverflowController,\n NavOverflowLinkProps\n} from '../../utils/navOverflow'\nimport { Placement } from '../../utils/overlayPlacement'\nimport {\n createPolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef\n} from '../../utils/polymorphic'\nimport { useHydrated } from '../portal/Portal'\nimport { NavOverflowMore, NavOverflowMoreContext, NavOverflowMoreState } from './more'\nimport { MeasuredItem, overflowingIds } from './overflow'\n\nexport interface NavOverflowDetail {\n /**\n * How many items are in the menu.\n */\n overflowCount: number\n /**\n * How many items are left in the list.\n */\n visibleCount: number\n}\n\ntype NavOverflowOwnProps<C extends ElementType> = {\n /**\n * The list to collapse: a `Nav`, a `NavbarNav` or a `TabList`.\n */\n children?: ReactNode\n /**\n * A string of all className you want applied to the component.\n */\n className?: string\n /**\n * Moves every item into the menu while the component is narrower than this: a width in pixels,\n * or the name of a breakpoint, read from `--cx-breakpoint-{name}`.\n */\n collapseBelow?: number | Breakpoint\n /**\n * Component used for the root node. Either a string to use an HTML element or a component.\n *\n * @default 'div'\n */\n component?: C\n /**\n * Which side of the toggle's text its icon is on.\n *\n * @default 'start'\n */\n iconPlacement?: 'start' | 'end'\n /**\n * Renders the menu in a container element instead of inside the toggle's item, where an\n * ancestor with `overflow` set would clip it: an element, or `true` for `document.body`. The\n * menu of a `TabList` is always rendered outside it.\n */\n menuContainer?: boolean | Element\n /**\n * Where the menu opens, relative to the toggle. It flips to stay in view.\n *\n * @default 'bottom-end'\n * @type 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'\n */\n menuPlacement?: Placement\n /**\n * The toggle's icon: an icon name, or an element of your own icon set. Defaults to\n * `IconProvider`'s `more` icon.\n */\n moreIcon?: IconValue\n /**\n * The accessible name of a toggle without text (`moreText={false}`).\n *\n * @default 'More'\n */\n moreLabel?: string\n /**\n * The toggle's text. `false` leaves the icon alone, named by `moreLabel`.\n *\n * @default 'More'\n */\n moreText?: ReactNode | false\n /**\n * Callback fired when items move into the menu or back out of it, with the number of items in\n * the menu and in the list.\n */\n onOverflow?: (detail: NavOverflowDetail) => void\n /**\n * The fewest items to leave in the list. They stay even when they don't fit.\n *\n * @default 0\n */\n threshold?: number\n}\n\nexport type NavOverflowProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n C,\n NavOverflowOwnProps<C>\n>\n\ntype NavOverflowComponent = (<C extends ElementType = 'div'>(\n props: NavOverflowProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\ninterface Entry {\n element: HTMLElement | null\n link: NavOverflowLinkProps | null\n}\n\ninterface Observers {\n frame: number\n mutation: MutationObserver | null\n nav: Element | null\n observed: Set<Element>\n resize: ResizeObserver | null\n wrapper: HTMLElement\n wrapperFrame: number\n}\n\n// What the items and links registered, and the listeners of the menu that renders from it. Kept\n// outside React state: a link registers new props on every one of its renders.\nfunction createRegistry() {\n const entries = new Map<string, Entry>()\n const listeners = new Set<() => void>()\n let version = 0\n\n const entry = (id: string) => {\n let found = entries.get(id)\n if (!found) {\n found = { element: null, link: null }\n entries.set(id, found)\n }\n return found\n }\n\n return {\n entries,\n getVersion: () => version,\n notify: () => {\n version += 1\n listeners.forEach((listener) => listener())\n },\n set: (id: string, value: Partial<Entry>) => {\n const next = Object.assign(entry(id), value)\n if (!next.element && !next.link) entries.delete(id)\n },\n subscribe: (listener: () => void) => {\n listeners.add(listener)\n return () => {\n listeners.delete(listener)\n }\n }\n }\n}\n\n// chassis-css hides an item with this attribute (`_nav-overflow.scss`) and the toggle item with\n// the display utility, as its plugin does.\nconst HIDDEN_ATTRIBUTE = 'data-cx-nav-overflow'\nconst HIDDEN_CLASS = 'd-none'\n\n// What keeps an item in the list by being inside it: the current link, and the tab that is the\n// list's Tab stop. react-aria gives that to the tab focused last, which needn't be the selected\n// one: hidden, it would leave the keyboard no way into the list.\nconst KEPT_CONTENT =\n '.nav-link.active, .nav-link[aria-current]:not([aria-current=\"false\"]), [role=\"tab\"][tabindex=\"0\"]'\n\nconst EMPTY: readonly string[] = []\n\nconst pixels = (value: string) => Number.parseFloat(value) || 0\n\n// Not `instanceof HTMLElement`: a list rendered into another window has that window's classes.\nconst isHTMLElement = (element: Element): element is HTMLElement => 'offsetWidth' in element\n\nconst sameIds = (a: readonly string[], b: readonly string[]) =>\n a.length === b.length && a.every((id, index) => id === b[index])\n\n// `collapseBelow` in pixels. A breakpoint is a custom property of chassis-css, in `rem`.\nfunction resolveCollapseBelow(value: number | Breakpoint | undefined, wrapper: HTMLElement) {\n if (typeof value === 'number') return value\n if (!value) return 0\n const root = getComputedStyle(wrapper.ownerDocument.documentElement)\n const width = root.getPropertyValue(`--cx-breakpoint-${value}`).trim()\n return /r?em$/.test(width) ? pixels(width) * (pixels(root.fontSize) || 16) : pixels(width)\n}\n\n// Until the page has hydrated nothing has been measured, and the server's HTML holds every item\n// on one line (`.nav-overflow > .nav` doesn't wrap). The items that don't fit are clipped at the\n// wrapper's edge and can be scrolled to, instead of running over what is next to the list.\nconst UNMEASURED_STYLE: CSSProperties = { overflowX: 'auto', scrollbarWidth: 'none' }\n\nfunction NavOverflowRender<C extends ElementType = 'div'>(\n {\n children,\n className,\n collapseBelow,\n component,\n iconPlacement = 'start',\n menuContainer,\n menuPlacement = 'bottom-end',\n moreIcon,\n moreLabel = 'More',\n moreText = 'More',\n onOverflow,\n style,\n threshold = 0,\n ...rest\n }: NavOverflowProps<C>,\n ref: PolymorphicRef<C>\n) {\n const Component = component ?? 'div'\n // The wrapper, kept while React re-attaches a ref: a caller's ref that is a new function on\n // each render makes it detach and attach this one too, and in between, where the list's\n // effects run, there would be nothing to measure.\n const wrapperRef = useRef<HTMLElement | null>(null)\n const setWrapper = useCallback((element: HTMLElement | null) => {\n if (element) wrapperRef.current = element\n }, [])\n const forkedRef = useForkedRef(ref, setWrapper)\n const hydrated = useHydrated()\n\n const [registry] = useState(createRegistry)\n const [hidden, setHidden] = useState(EMPTY)\n const hiddenRef = useRef(hidden)\n const itemCountRef = useRef(0)\n const optionsRef = useRef({ collapseBelow, threshold })\n optionsRef.current = { collapseBelow, threshold }\n\n const observersRef = useRef<Observers | null>(null)\n\n // Which items don't fit, or `null` when there is nothing to measure.\n //\n // Widths are read with every item and the toggle shown, so they never depend on what the last\n // pass hid. Showing and hiding again happens in one synchronous block, outside React: the browser\n // paints neither, and the elements are back as React rendered them before it looks again.\n const measure = useCallback((): string[] | null => {\n const wrapper = wrapperRef.current?.isConnected ? wrapperRef.current : null\n const nav = wrapper && Array.from(wrapper.children).find((child) => child.matches('.nav'))\n devWarning(\n !!wrapper && !nav,\n 'NavOverflow: expects a `Nav`, a `NavbarNav` or a `TabList` as its child; found no `.nav` ' +\n 'to collapse.'\n )\n if (!wrapper || !nav) return null\n\n // Every child of the list takes room in the row, a title or a divider too; only registered\n // items can leave it.\n const children = Array.from(nav.children).filter(isHTMLElement)\n const more = children.find((child) => child.classList.contains('nav-overflow-item'))\n const elements = children.filter((child) => child !== more)\n observe(wrapper, nav, children)\n itemCountRef.current = elements.length\n // No toggle: the list is not one that takes part, so nothing can move.\n if (!more) return []\n\n const ids = new Map<Element, string>()\n registry.entries.forEach((entry, id) => {\n if (entry.element) ids.set(entry.element, id)\n })\n\n const wereHidden = elements.filter((element) => element.hasAttribute(HIDDEN_ATTRIBUTE))\n const moreWasHidden = more.classList.contains(HIDDEN_CLASS)\n wereHidden.forEach((element) => element.removeAttribute(HIDDEN_ATTRIBUTE))\n more.classList.remove(HIDDEN_CLASS)\n\n try {\n const wrapperStyle = getComputedStyle(wrapper)\n const navStyle = getComputedStyle(nav)\n // The wrapper's content box, as chassis-css's plugin takes it.\n const width =\n wrapper.clientWidth -\n pixels(wrapperStyle.paddingInlineStart) -\n pixels(wrapperStyle.paddingInlineEnd)\n const focused = wrapper.ownerDocument.activeElement\n\n const items = elements.map((element): MeasuredItem => {\n const id = ids.get(element)\n return {\n id,\n // An item stays in the list when the menu has nothing to show for it, when it is\n // marked to stay, when it is the current one or the list's Tab stop, and while it has\n // focus, which hiding it would drop.\n keep:\n !id ||\n !registry.entries.get(id)?.link ||\n element.classList.contains('nav-overflow-keep') ||\n element.querySelector(KEPT_CONTENT) !== null ||\n element.contains(focused),\n width: element.offsetWidth\n }\n })\n\n const { collapseBelow, threshold } = optionsRef.current\n return overflowingIds({\n available:\n width -\n pixels(navStyle.paddingInlineStart) -\n pixels(navStyle.paddingInlineEnd) -\n pixels(navStyle.borderInlineStartWidth) -\n pixels(navStyle.borderInlineEndWidth),\n collapseAll: width < resolveCollapseBelow(collapseBelow, wrapper),\n gap: pixels(navStyle.columnGap),\n items,\n more: more.offsetWidth,\n threshold\n })\n } finally {\n wereHidden.forEach((element) => element.setAttribute(HIDDEN_ATTRIBUTE, 'true'))\n if (moreWasHidden) more.classList.add(HIDDEN_CLASS)\n // Lay the list out as it was. Without this the layout stays as measured, with everything\n // shown, until the browser next needs it, and a ResizeObserver delivering in the meantime\n // (react-aria's, on the toggle) is told of sizes that were never painted.\n void wrapper.offsetWidth\n // The mutations above are this function's own.\n observersRef.current?.mutation?.takeRecords()\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [registry])\n\n const update = useCallback(() => {\n const next = measure()\n if (!next || sameIds(next, hiddenRef.current)) return\n hiddenRef.current = next\n setHidden(next)\n }, [measure])\n\n // What changes the result without a render of the list:\n //\n // - The wrapper's width. The wrapper and not the list, whose width the result itself changes.\n // - An item's width: a font that loads, a label that changes.\n // - A link that becomes the current one by itself, as a router's link does on navigation.\n //\n // An observer's callback runs before the browser paints, and `flushSync` commits the result\n // there, so no frame shows the items of the old width.\n //\n // A ResizeObserver delivers sizes top down, and reports a loop error when a callback changes\n // a size it has already passed. Two things here would: hiding an item's siblings from the\n // callback for that item, so an item's own resize waits a frame; and a toggle taller than the\n // links, which changes the wrapper's height from the wrapper's own callback, so the wrapper is\n // observed again from the next frame once a pass has moved anything.\n function observe(wrapper: HTMLElement, nav: Element, children: HTMLElement[]) {\n let observers = observersRef.current\n if (observers && observers.wrapper !== wrapper) {\n disconnect()\n observers = null\n }\n if (!observers) {\n const flush = () => flushSync(update)\n const created: Observers = {\n frame: 0,\n mutation: typeof MutationObserver === 'undefined' ? null : new MutationObserver(flush),\n nav: null,\n observed: new Set(),\n resize:\n typeof ResizeObserver === 'undefined'\n ? null\n : new ResizeObserver((entries) => {\n if (!entries.some((entry) => entry.target === wrapper)) {\n cancelAnimationFrame(created.frame)\n created.frame = requestAnimationFrame(flush)\n return\n }\n const before = hiddenRef.current\n flush()\n // The pass can have replaced these observers, for a wrapper that is a new element.\n if (hiddenRef.current === before || observersRef.current !== created) return\n created.resize?.unobserve(wrapper)\n cancelAnimationFrame(created.wrapperFrame)\n created.wrapperFrame = requestAnimationFrame(() => created.resize?.observe(wrapper))\n }),\n wrapperFrame: 0,\n wrapper\n }\n observers = observersRef.current = created\n observers.resize?.observe(wrapper)\n }\n const { mutation, observed, resize } = observers\n\n if (observers.nav !== nav) {\n observers.nav = nav\n mutation?.disconnect()\n mutation?.observe(nav, {\n attributeFilter: ['class', 'aria-current'],\n attributes: true,\n childList: true,\n subtree: true\n })\n }\n\n const current = new Set<Element>(children)\n observed.forEach((element) => {\n if (current.has(element)) return\n resize?.unobserve(element)\n observed.delete(element)\n })\n current.forEach((element) => {\n if (observed.has(element)) return\n resize?.observe(element)\n observed.add(element)\n })\n }\n\n function disconnect() {\n const observers = observersRef.current\n if (!observers) return\n cancelAnimationFrame(observers.frame)\n cancelAnimationFrame(observers.wrapperFrame)\n observers.mutation?.disconnect()\n observers.resize?.disconnect()\n observersRef.current = null\n }\n\n useEffect(() => disconnect, [])\n\n // The list measures after each of its commits (`NavOverflowItems`). This covers what it can't:\n // the first commit and a wrapper that becomes another element, where React attaches the\n // wrapper's ref after the list's effects have run, and the options, which can change without\n // the list rendering.\n useIsomorphicLayoutEffect(update, [update, Component, collapseBelow, threshold])\n\n const reportedRef = useRef(hidden)\n useEffect(() => {\n if (reportedRef.current === hidden) return\n reportedRef.current = hidden\n onOverflow?.({\n overflowCount: hidden.length,\n visibleCount: itemCountRef.current - hidden.length\n })\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [hidden])\n\n const registerItem = useCallback(\n (id: string, element: HTMLElement | null) => registry.set(id, { element }),\n [registry]\n )\n const registerLink = useCallback(\n (id: string, link: NavOverflowLinkProps | null) => {\n registry.set(id, { link })\n // The menu renders from these props, and only it needs to hear of new ones.\n if (hiddenRef.current.includes(id)) registry.notify()\n },\n [registry]\n )\n\n const controller: NavOverflowController = useMemo(\n () => ({ hidden, More: NavOverflowMore, registerItem, registerLink, update }),\n [hidden, registerItem, registerLink, update]\n )\n\n const more: NavOverflowMoreState = useMemo(\n () => ({\n getLink: (id) => registry.entries.get(id)?.link ?? null,\n getVersion: registry.getVersion,\n hidden,\n iconPlacement,\n menuContainer,\n menuPlacement,\n moreIcon,\n moreLabel,\n moreText,\n subscribe: registry.subscribe\n }),\n [hidden, iconPlacement, menuContainer, menuPlacement, moreIcon, moreLabel, moreText, registry]\n )\n\n return (\n <NavOverflowContext.Provider value={controller}>\n <NavOverflowMoreContext.Provider value={more}>\n <Component\n className={classNames('nav-overflow', className)}\n style={hydrated ? style : { ...UNMEASURED_STYLE, ...style }}\n {...rest}\n ref={forkedRef}\n >\n {children}\n </Component>\n </NavOverflowMoreContext.Provider>\n </NavOverflowContext.Provider>\n )\n}\n\nexport const NavOverflow = createPolymorphicComponent<NavOverflowComponent>(\n NavOverflowRender as ForwardRefRenderFunction<Element, NavOverflowProps<ElementType>>,\n 'NavOverflow'\n)\n"],"mappings":"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"}
1
+ {"version":3,"file":"nav-overflow-DlLer6EK.js","names":["HIDDEN_CLASS"],"sources":["../../src/components/nav-overflow/more.tsx","../../src/components/nav-overflow/overflow.ts","../../src/components/nav-overflow/NavOverflow.tsx"],"sourcesContent":["import React, {\n createContext,\n CSSProperties,\n FocusEvent,\n ReactNode,\n useContext,\n useRef,\n useState,\n useSyncExternalStore\n} from 'react'\nimport classNames from 'classnames'\n\nimport { useIsomorphicLayoutEffect } from '../../hooks'\nimport { IconValue } from '../../utils/iconConfig'\nimport { IconSlot } from '../../utils/iconSlot'\nimport { NavOverflowLinkProps, NavOverflowMoreProps } from '../../utils/navOverflow'\nimport { Placement } from '../../utils/overlayPlacement'\nimport { Menu } from '../menu/Menu'\nimport { MenuItem } from '../menu/MenuItem'\nimport { MenuList } from '../menu/MenuList'\nimport { MenuToggle } from '../menu/MenuToggle'\n\n// From `NavOverflow` to the toggle item, which a list renders for it: the items in the menu, the\n// props their links registered, and how the toggle looks.\nexport interface NavOverflowMoreState {\n getLink: (id: string) => NavOverflowLinkProps | null\n getVersion: () => number\n hidden: readonly string[]\n iconPlacement: 'start' | 'end'\n menuContainer: boolean | Element | undefined\n menuPlacement: Placement\n moreIcon: IconValue | undefined\n moreLabel: string\n moreText: ReactNode | false\n subscribe: (listener: () => void) => () => void\n}\n\nexport const NavOverflowMoreContext = createContext<NavOverflowMoreState | null>(null)\n\n// The nearest item before `item` that is shown and can take focus: its link, or its tab.\nfunction lastShownStop(item: HTMLElement): HTMLElement | null {\n for (let shown = item.previousElementSibling; shown; shown = shown.previousElementSibling) {\n if (shown.hasAttribute('data-cx-nav-overflow')) continue\n const stop = shown.querySelector<HTMLElement>('a[href], button:not(:disabled), [tabindex]')\n if (stop) return stop\n }\n return null\n}\n\n// chassis-css's markup (`nav-overflow.js`): a `.nav-item.nav-overflow-item` holding the\n// `.nav-link.nav-overflow-toggle` button and the `.menu.nav-overflow-menu`. It is in the list at\n// all times, hidden while every item fits, so its width can be measured before it is needed.\nexport function NavOverflowMore({ tabs }: NavOverflowMoreProps) {\n const state = useContext(NavOverflowMoreContext)\n const [visible, setVisible] = useState(false)\n const itemRef = useRef<HTMLLIElement>(null)\n const focusWithinRef = useRef(false)\n const hidden = state?.hidden\n const empty = !hidden?.length\n\n // A resize can take away what has focus here: the toggle, when the last item leaves the menu,\n // or a menu item, when its item is back in the list. Neither blurs first, and focus would fall\n // to the page. It goes to the toggle while there is one, and to the last item otherwise.\n useIsomorphicLayoutEffect(() => {\n const item = itemRef.current\n if (!item || !focusWithinRef.current) return\n const active = item.ownerDocument.activeElement\n const lost = !active || active === item.ownerDocument.body || (empty && item.contains(active))\n if (!lost) return\n focusWithinRef.current = !empty\n const stop = empty\n ? lastShownStop(item)\n : item.querySelector<HTMLElement>('.nav-overflow-toggle')\n stop?.focus()\n }, [hidden, empty])\n\n const handleFocus = (event: FocusEvent) => {\n focusWithinRef.current = true\n // react-aria's tab list takes focus back to the selected tab when focus enters the list from\n // outside, which a click on the toggle does. The toggle is reached with the arrow keys, from\n // a tab (`TabList`), so the list doesn't need to hear of its focus.\n if (tabs) event.stopPropagation()\n }\n const handleBlur = () => {\n focusWithinRef.current = false\n }\n // A hidden item's link re-registers its props on each of its renders.\n useSyncExternalStore(\n state?.subscribe ?? subscribeToNothing,\n state?.getVersion ?? zero,\n state?.getVersion ?? zero\n )\n\n if (!state || !hidden) return null\n\n const { getLink, iconPlacement, menuContainer, menuPlacement, moreIcon, moreLabel, moreText } =\n state\n // The toggle goes when the last item leaves the menu, and an open menu with it.\n if (empty && visible) setVisible(false)\n\n // Keyed, so `iconPlacement` moves the two spans instead of turning one into the other.\n const icon = (\n <span key=\"icon\" className=\"nav-overflow-icon\" style={ICON_STYLE}>\n <IconSlot icon=\"more\" override={moreIcon} />\n </span>\n )\n const text =\n moreText === false ? null : (\n <span key=\"text\" className=\"nav-overflow-text\">\n {moreText}\n </span>\n )\n\n return (\n <Menu\n component=\"li\"\n className={classNames('nav-item nav-overflow-item', { [HIDDEN_CLASS]: empty })}\n // A `tablist` owns tabs only. The toggle is one of them, and the menu is rendered outside.\n // (No `instanceof Element`: a server has no `Element`.)\n container={tabs ? (typeof menuContainer === 'object' ? menuContainer : true) : menuContainer}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onVisibleChange={setVisible}\n placement={menuPlacement}\n visible={visible && !empty}\n {...(tabs && { role: 'presentation' })}\n ref={itemRef}\n >\n <MenuToggle\n aria-label={moreText === false ? moreLabel : undefined}\n caret={false}\n className=\"nav-link nav-overflow-toggle\"\n component=\"button\"\n {...(tabs && { 'aria-selected': false, role: 'tab', tabIndex: -1 })}\n >\n {iconPlacement === 'end' ? [text, icon] : [icon, text]}\n </MenuToggle>\n <MenuList className=\"nav-overflow-menu\">\n {hidden.map((id) => {\n const link = getLink(id)\n return link && <MenuItem key={id} {...link} />\n })}\n </MenuList>\n </Menu>\n )\n}\n\nconst HIDDEN_CLASS = 'd-none'\n// The icon as chassis-css's plugin draws its own: in the color of the toggle's text, and 1rem\n// wide. The default icon size is taller than a link's text, and would make the list a little\n// taller each time the toggle appeared.\nconst ICON_STYLE = { '--cx-icon-color': 'currentcolor', '--cx-icon-size': '1rem' } as CSSProperties\nconst subscribeToNothing = () => () => {}\nconst zero = () => 0\n","// Which items go into the menu, from widths `NavOverflow` has read with every item shown.\n\nexport interface MeasuredItem {\n /**\n * Unset for an item that registered nothing, which can't be moved.\n */\n id?: string\n /**\n * Stays in the list whatever the width: marked to keep, active, focused, or with no link for\n * the menu to show.\n */\n keep: boolean\n width: number\n}\n\nexport interface Measurement {\n /**\n * The width the items have to fit in.\n */\n available: number\n /**\n * The wrapper is narrower than `collapseBelow`.\n */\n collapseAll: boolean\n gap: number\n /**\n * In document order, without the toggle item.\n */\n items: MeasuredItem[]\n /**\n * The width of the toggle item.\n */\n more: number\n /**\n * The fewest items to leave in the list.\n */\n threshold: number\n}\n\n// A pixel of slack for sub-pixel layout: `offsetWidth` is rounded.\nconst SLACK = 1\n\nexport function overflowingIds({\n available,\n collapseAll,\n gap,\n items,\n more,\n threshold\n}: Measurement): string[] {\n const movable = items.filter((item) => !item.keep)\n const ids = (overflowing: MeasuredItem[]) => overflowing.map((item) => item.id as string)\n\n if (collapseAll) return ids(movable)\n\n // Everything fits without the toggle, which then isn't shown. chassis-css's plugin always\n // reserves the toggle's width, and so moves the last item of a list that fits exactly.\n const total = items.reduce((sum, item) => sum + item.width, 0) + gap * (items.length - 1)\n if (total <= available + SLACK) return []\n\n // The toggle and the kept items are shown whatever happens, each with the gap to the next.\n let used = more + items.reduce((sum, item) => (item.keep ? sum + item.width + gap : sum), 0)\n let overflowing = movable.filter((item) => {\n used += item.width + gap\n return used > available + SLACK\n })\n\n if (items.length - overflowing.length < threshold && items.length > threshold) {\n overflowing = items.slice(threshold).filter((item) => !item.keep)\n }\n\n return ids(overflowing)\n}\n","import React, {\n CSSProperties,\n ElementType,\n ForwardRefRenderFunction,\n ReactElement,\n ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react'\nimport { flushSync } from 'react-dom'\nimport classNames from 'classnames'\n\nimport { useForkedRef, useIsomorphicLayoutEffect } from '../../hooks'\nimport { Breakpoint } from '../../types'\nimport { devWarning } from '../../utils/devWarning'\nimport { IconValue } from '../../utils/iconConfig'\nimport {\n NavOverflowContext,\n NavOverflowController,\n NavOverflowLinkProps\n} from '../../utils/navOverflow'\nimport { Placement } from '../../utils/overlayPlacement'\nimport {\n createPolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef\n} from '../../utils/polymorphic'\nimport { useHydrated } from '../portal/Portal'\nimport { NavOverflowMore, NavOverflowMoreContext, NavOverflowMoreState } from './more'\nimport { MeasuredItem, overflowingIds } from './overflow'\n\nexport interface NavOverflowDetail {\n /**\n * How many items are in the menu.\n */\n overflowCount: number\n /**\n * How many items are left in the list.\n */\n visibleCount: number\n}\n\ntype NavOverflowOwnProps<C extends ElementType> = {\n /**\n * The list to collapse: a `Nav`, a `NavbarNav` or a `TabList`.\n */\n children?: ReactNode\n /**\n * A string of all className you want applied to the component.\n */\n className?: string\n /**\n * Moves every item into the menu while the component is narrower than this: a width in pixels,\n * or the name of a breakpoint, read from `--cx-breakpoint-{name}`.\n */\n collapseBelow?: number | Breakpoint\n /**\n * Component used for the root node. Either a string to use an HTML element or a component.\n *\n * @default 'div'\n */\n component?: C\n /**\n * Which side of the toggle's text its icon is on.\n *\n * @default 'start'\n */\n iconPlacement?: 'start' | 'end'\n /**\n * Renders the menu in a container element instead of inside the toggle's item, where an\n * ancestor with `overflow` set would clip it: an element, or `true` for `document.body`. The\n * menu of a `TabList` is always rendered outside it.\n */\n menuContainer?: boolean | Element\n /**\n * Where the menu opens, relative to the toggle. It flips to stay in view.\n *\n * @default 'bottom-end'\n * @type 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'\n */\n menuPlacement?: Placement\n /**\n * The toggle's icon: an icon name, or an element of your own icon set. Defaults to\n * `IconProvider`'s `more` icon.\n */\n moreIcon?: IconValue\n /**\n * The accessible name of a toggle without text (`moreText={false}`).\n *\n * @default 'More'\n */\n moreLabel?: string\n /**\n * The toggle's text. `false` leaves the icon alone, named by `moreLabel`.\n *\n * @default 'More'\n */\n moreText?: ReactNode | false\n /**\n * Callback fired when items move into the menu or back out of it, with the number of items in\n * the menu and in the list.\n */\n onOverflow?: (detail: NavOverflowDetail) => void\n /**\n * The fewest items to leave in the list. They stay even when they don't fit.\n *\n * @default 0\n */\n threshold?: number\n}\n\nexport type NavOverflowProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n C,\n NavOverflowOwnProps<C>\n>\n\ntype NavOverflowComponent = (<C extends ElementType = 'div'>(\n props: NavOverflowProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\ninterface Entry {\n element: HTMLElement | null\n link: NavOverflowLinkProps | null\n}\n\ninterface Observers {\n frame: number\n mutation: MutationObserver | null\n nav: Element | null\n observed: Set<Element>\n resize: ResizeObserver | null\n wrapper: HTMLElement\n wrapperFrame: number\n}\n\n// What the items and links registered, and the listeners of the menu that renders from it. Kept\n// outside React state: a link registers new props on every one of its renders.\nfunction createRegistry() {\n const entries = new Map<string, Entry>()\n const listeners = new Set<() => void>()\n let version = 0\n\n const entry = (id: string) => {\n let found = entries.get(id)\n if (!found) {\n found = { element: null, link: null }\n entries.set(id, found)\n }\n return found\n }\n\n return {\n entries,\n getVersion: () => version,\n notify: () => {\n version += 1\n listeners.forEach((listener) => listener())\n },\n set: (id: string, value: Partial<Entry>) => {\n const next = Object.assign(entry(id), value)\n if (!next.element && !next.link) entries.delete(id)\n },\n subscribe: (listener: () => void) => {\n listeners.add(listener)\n return () => {\n listeners.delete(listener)\n }\n }\n }\n}\n\n// chassis-css hides an item with this attribute (`_nav-overflow.scss`) and the toggle item with\n// the display utility, as its plugin does.\nconst HIDDEN_ATTRIBUTE = 'data-cx-nav-overflow'\nconst HIDDEN_CLASS = 'd-none'\n\n// What keeps an item in the list by being inside it: the current link, and the tab that is the\n// list's Tab stop. react-aria gives that to the tab focused last, which needn't be the selected\n// one: hidden, it would leave the keyboard no way into the list.\nconst KEPT_CONTENT =\n '.nav-link.active, .nav-link[aria-current]:not([aria-current=\"false\"]), [role=\"tab\"][tabindex=\"0\"]'\n\nconst EMPTY: readonly string[] = []\n\nconst pixels = (value: string) => Number.parseFloat(value) || 0\n\n// Not `instanceof HTMLElement`: a list rendered into another window has that window's classes.\nconst isHTMLElement = (element: Element): element is HTMLElement => 'offsetWidth' in element\n\nconst sameIds = (a: readonly string[], b: readonly string[]) =>\n a.length === b.length && a.every((id, index) => id === b[index])\n\n// `collapseBelow` in pixels. A breakpoint is a custom property of chassis-css, in `rem`.\nfunction resolveCollapseBelow(value: number | Breakpoint | undefined, wrapper: HTMLElement) {\n if (typeof value === 'number') return value\n if (!value) return 0\n const root = getComputedStyle(wrapper.ownerDocument.documentElement)\n const width = root.getPropertyValue(`--cx-breakpoint-${value}`).trim()\n return /r?em$/.test(width) ? pixels(width) * (pixels(root.fontSize) || 16) : pixels(width)\n}\n\n// Until the page has hydrated nothing has been measured, and the server's HTML holds every item\n// on one line (`.nav-overflow > .nav` doesn't wrap). The items that don't fit are clipped at the\n// wrapper's edge and can be scrolled to, instead of running over what is next to the list.\nconst UNMEASURED_STYLE: CSSProperties = { overflowX: 'auto', scrollbarWidth: 'none' }\n\nfunction NavOverflowRender<C extends ElementType = 'div'>(\n {\n children,\n className,\n collapseBelow,\n component,\n iconPlacement = 'start',\n menuContainer,\n menuPlacement = 'bottom-end',\n moreIcon,\n moreLabel = 'More',\n moreText = 'More',\n onOverflow,\n style,\n threshold = 0,\n ...rest\n }: NavOverflowProps<C>,\n ref: PolymorphicRef<C>\n) {\n const Component = component ?? 'div'\n // The wrapper, kept while React re-attaches a ref: a caller's ref that is a new function on\n // each render makes it detach and attach this one too, and in between, where the list's\n // effects run, there would be nothing to measure.\n const wrapperRef = useRef<HTMLElement | null>(null)\n const setWrapper = useCallback((element: HTMLElement | null) => {\n if (element) wrapperRef.current = element\n }, [])\n const forkedRef = useForkedRef(ref, setWrapper)\n const hydrated = useHydrated()\n\n const [registry] = useState(createRegistry)\n const [hidden, setHidden] = useState(EMPTY)\n const hiddenRef = useRef(hidden)\n const itemCountRef = useRef(0)\n const optionsRef = useRef({ collapseBelow, threshold })\n optionsRef.current = { collapseBelow, threshold }\n\n const observersRef = useRef<Observers | null>(null)\n\n // Which items don't fit, or `null` when there is nothing to measure.\n //\n // Widths are read with every item and the toggle shown, so they never depend on what the last\n // pass hid. Showing and hiding again happens in one synchronous block, outside React: the browser\n // paints neither, and the elements are back as React rendered them before it looks again.\n const measure = useCallback((): string[] | null => {\n const wrapper = wrapperRef.current?.isConnected ? wrapperRef.current : null\n const nav = wrapper && Array.from(wrapper.children).find((child) => child.matches('.nav'))\n devWarning(\n !!wrapper && !nav,\n 'NavOverflow: expects a `Nav`, a `NavbarNav` or a `TabList` as its child; found no `.nav` ' +\n 'to collapse.'\n )\n if (!wrapper || !nav) return null\n\n // Every child of the list takes room in the row, a title or a divider too; only registered\n // items can leave it.\n const children = Array.from(nav.children).filter(isHTMLElement)\n const more = children.find((child) => child.classList.contains('nav-overflow-item'))\n const elements = children.filter((child) => child !== more)\n observe(wrapper, nav, children)\n itemCountRef.current = elements.length\n // No toggle: the list is not one that takes part, so nothing can move.\n if (!more) return []\n\n const ids = new Map<Element, string>()\n registry.entries.forEach((entry, id) => {\n if (entry.element) ids.set(entry.element, id)\n })\n\n const wereHidden = elements.filter((element) => element.hasAttribute(HIDDEN_ATTRIBUTE))\n const moreWasHidden = more.classList.contains(HIDDEN_CLASS)\n wereHidden.forEach((element) => element.removeAttribute(HIDDEN_ATTRIBUTE))\n more.classList.remove(HIDDEN_CLASS)\n\n try {\n const wrapperStyle = getComputedStyle(wrapper)\n const navStyle = getComputedStyle(nav)\n // The wrapper's content box, as chassis-css's plugin takes it.\n const width =\n wrapper.clientWidth -\n pixels(wrapperStyle.paddingInlineStart) -\n pixels(wrapperStyle.paddingInlineEnd)\n const focused = wrapper.ownerDocument.activeElement\n\n const items = elements.map((element): MeasuredItem => {\n const id = ids.get(element)\n return {\n id,\n // An item stays in the list when the menu has nothing to show for it, when it is\n // marked to stay, when it is the current one or the list's Tab stop, and while it has\n // focus, which hiding it would drop.\n keep:\n !id ||\n !registry.entries.get(id)?.link ||\n element.classList.contains('nav-overflow-keep') ||\n element.querySelector(KEPT_CONTENT) !== null ||\n element.contains(focused),\n width: element.offsetWidth\n }\n })\n\n const { collapseBelow, threshold } = optionsRef.current\n return overflowingIds({\n available:\n width -\n pixels(navStyle.paddingInlineStart) -\n pixels(navStyle.paddingInlineEnd) -\n pixels(navStyle.borderInlineStartWidth) -\n pixels(navStyle.borderInlineEndWidth),\n collapseAll: width < resolveCollapseBelow(collapseBelow, wrapper),\n gap: pixels(navStyle.columnGap),\n items,\n more: more.offsetWidth,\n threshold\n })\n } finally {\n wereHidden.forEach((element) => element.setAttribute(HIDDEN_ATTRIBUTE, 'true'))\n if (moreWasHidden) more.classList.add(HIDDEN_CLASS)\n // Lay the list out as it was. Without this the layout stays as measured, with everything\n // shown, until the browser next needs it, and a ResizeObserver delivering in the meantime\n // (react-aria's, on the toggle) is told of sizes that were never painted.\n void wrapper.offsetWidth\n // The mutations above are this function's own.\n observersRef.current?.mutation?.takeRecords()\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [registry])\n\n const update = useCallback(() => {\n const next = measure()\n if (!next || sameIds(next, hiddenRef.current)) return\n hiddenRef.current = next\n setHidden(next)\n }, [measure])\n\n // What changes the result without a render of the list:\n //\n // - The wrapper's width. The wrapper and not the list, whose width the result itself changes.\n // - An item's width: a font that loads, a label that changes.\n // - A link that becomes the current one by itself, as a router's link does on navigation.\n //\n // An observer's callback runs before the browser paints, and `flushSync` commits the result\n // there, so no frame shows the items of the old width.\n //\n // A ResizeObserver delivers sizes top down, and reports a loop error when a callback changes\n // a size it has already passed. Two things here would: hiding an item's siblings from the\n // callback for that item, so an item's own resize waits a frame; and a toggle taller than the\n // links, which changes the wrapper's height from the wrapper's own callback, so the wrapper is\n // observed again from the next frame once a pass has moved anything.\n function observe(wrapper: HTMLElement, nav: Element, children: HTMLElement[]) {\n let observers = observersRef.current\n if (observers && observers.wrapper !== wrapper) {\n disconnect()\n observers = null\n }\n if (!observers) {\n const flush = () => flushSync(update)\n const created: Observers = {\n frame: 0,\n mutation: typeof MutationObserver === 'undefined' ? null : new MutationObserver(flush),\n nav: null,\n observed: new Set(),\n resize:\n typeof ResizeObserver === 'undefined'\n ? null\n : new ResizeObserver((entries) => {\n if (!entries.some((entry) => entry.target === wrapper)) {\n cancelAnimationFrame(created.frame)\n created.frame = requestAnimationFrame(flush)\n return\n }\n const before = hiddenRef.current\n flush()\n // The pass can have replaced these observers, for a wrapper that is a new element.\n if (hiddenRef.current === before || observersRef.current !== created) return\n created.resize?.unobserve(wrapper)\n cancelAnimationFrame(created.wrapperFrame)\n created.wrapperFrame = requestAnimationFrame(() => created.resize?.observe(wrapper))\n }),\n wrapperFrame: 0,\n wrapper\n }\n observers = observersRef.current = created\n observers.resize?.observe(wrapper)\n }\n const { mutation, observed, resize } = observers\n\n if (observers.nav !== nav) {\n observers.nav = nav\n mutation?.disconnect()\n mutation?.observe(nav, {\n attributeFilter: ['class', 'aria-current'],\n attributes: true,\n childList: true,\n subtree: true\n })\n }\n\n const current = new Set<Element>(children)\n observed.forEach((element) => {\n if (current.has(element)) return\n resize?.unobserve(element)\n observed.delete(element)\n })\n current.forEach((element) => {\n if (observed.has(element)) return\n resize?.observe(element)\n observed.add(element)\n })\n }\n\n function disconnect() {\n const observers = observersRef.current\n if (!observers) return\n cancelAnimationFrame(observers.frame)\n cancelAnimationFrame(observers.wrapperFrame)\n observers.mutation?.disconnect()\n observers.resize?.disconnect()\n observersRef.current = null\n }\n\n useEffect(() => disconnect, [])\n\n // The list measures after each of its commits (`NavOverflowItems`). This covers what it can't:\n // the first commit and a wrapper that becomes another element, where React attaches the\n // wrapper's ref after the list's effects have run, and the options, which can change without\n // the list rendering.\n useIsomorphicLayoutEffect(update, [update, Component, collapseBelow, threshold])\n\n const reportedRef = useRef(hidden)\n useEffect(() => {\n if (reportedRef.current === hidden) return\n reportedRef.current = hidden\n onOverflow?.({\n overflowCount: hidden.length,\n visibleCount: itemCountRef.current - hidden.length\n })\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [hidden])\n\n const registerItem = useCallback(\n (id: string, element: HTMLElement | null) => registry.set(id, { element }),\n [registry]\n )\n const registerLink = useCallback(\n (id: string, link: NavOverflowLinkProps | null) => {\n registry.set(id, { link })\n // The menu renders from these props, and only it needs to hear of new ones.\n if (hiddenRef.current.includes(id)) registry.notify()\n },\n [registry]\n )\n\n const controller: NavOverflowController = useMemo(\n () => ({ hidden, More: NavOverflowMore, registerItem, registerLink, update }),\n [hidden, registerItem, registerLink, update]\n )\n\n const more: NavOverflowMoreState = useMemo(\n () => ({\n getLink: (id) => registry.entries.get(id)?.link ?? null,\n getVersion: registry.getVersion,\n hidden,\n iconPlacement,\n menuContainer,\n menuPlacement,\n moreIcon,\n moreLabel,\n moreText,\n subscribe: registry.subscribe\n }),\n [hidden, iconPlacement, menuContainer, menuPlacement, moreIcon, moreLabel, moreText, registry]\n )\n\n return (\n <NavOverflowContext.Provider value={controller}>\n <NavOverflowMoreContext.Provider value={more}>\n <Component\n className={classNames('nav-overflow', className)}\n style={hydrated ? style : { ...UNMEASURED_STYLE, ...style }}\n {...rest}\n ref={forkedRef}\n >\n {children}\n </Component>\n </NavOverflowMoreContext.Provider>\n </NavOverflowContext.Provider>\n )\n}\n\nexport const NavOverflow = createPolymorphicComponent<NavOverflowComponent>(\n NavOverflowRender as ForwardRefRenderFunction<Element, NavOverflowProps<ElementType>>,\n 'NavOverflow'\n)\n"],"mappings":"0pBAqCA,MAAa,EAAyB,EAA2C,IAAI,EAGrF,SAAS,EAAc,EAAuC,CAC5D,IAAK,IAAI,EAAQ,EAAK,uBAAwB,EAAO,EAAQ,EAAM,uBAAwB,CACzF,GAAI,EAAM,aAAa,sBAAsB,EAAG,SAChD,IAAM,EAAO,EAAM,cAA2B,4CAA4C,EAC1F,GAAI,EAAM,OAAO,CACnB,CACA,OAAO,IACT,CAKA,SAAgB,EAAgB,CAAE,QAA8B,CAC9D,IAAM,EAAQ,EAAW,CAAsB,EACzC,CAAC,EAAS,GAAc,EAAS,EAAK,EACtC,EAAU,EAAsB,IAAI,EACpC,EAAiB,EAAO,EAAK,EAC7B,EAAS,GAAO,OAChB,EAAQ,CAAC,GAAQ,OAKvB,MAAgC,CAC9B,IAAM,EAAO,EAAQ,QACrB,GAAI,CAAC,GAAQ,CAAC,EAAe,QAAS,OACtC,IAAM,EAAS,EAAK,cAAc,eACrB,CAAC,GAAU,IAAW,EAAK,cAAc,MAAS,GAAS,EAAK,SAAS,CAAM,KAE5F,EAAe,QAAU,CAAC,GACb,EACT,EAAc,CAAI,EAClB,EAAK,cAA2B,sBAAsB,EAAA,EACpD,MAAM,EACd,EAAG,CAAC,EAAQ,CAAK,CAAC,EAElB,IAAM,EAAe,GAAsB,CACzC,EAAe,QAAU,GAIrB,GAAM,EAAM,gBAAgB,CAClC,EACM,MAAmB,CACvB,EAAe,QAAU,EAC3B,EAQA,GANA,EACE,GAAO,WAAa,EACpB,GAAO,YAAc,EACrB,GAAO,YAAc,CACvB,EAEI,CAAC,GAAS,CAAC,EAAQ,OAAO,KAE9B,GAAM,CAAE,UAAS,gBAAe,gBAAe,gBAAe,WAAU,YAAW,YACjF,EAEE,GAAS,GAAS,EAAW,EAAK,EAGtC,IAAM,EACJ,EAAA,cAAC,OAAD,CAAM,IAAI,OAAO,UAAU,oBAAoB,MAAO,CAEhD,EADJ,EAAA,cAAC,EAAD,CAAU,KAAK,OAAO,SAAU,CAAW,CAAA,CACvC,EAEF,EACJ,IAAa,GAAQ,KACnB,EAAA,cAAC,OAAD,CAAM,IAAI,OAAO,UAAU,mBAErB,EADH,CACG,EAGV,OACE,EAAA,cAAC,EAAD,CACE,UAAU,KACV,UAAW,EAAW,6BAA8B,EAAGA,GAAe,CAAM,CAAC,EAG7E,UAAW,GAAQ,OAAO,GAAkB,UAAmC,EAC/E,OAAQ,EACR,QAAS,EACT,gBAAiB,EACjB,UAAW,EACX,QAAS,GAAW,CAAC,EACrB,GAAK,GAAQ,CAAE,KAAM,cAAe,EACpC,IAAK,CAiBD,EAfJ,EAAA,cAAC,EAAD,CACE,aAAY,IAAa,GAAQ,EAAY,IAAA,GAC7C,MAAO,GACP,UAAU,+BACV,UAAU,SACV,GAAK,GAAQ,CAAE,gBAAiB,GAAO,KAAM,MAAO,SAAU,EAAG,CAGvD,EADT,IAAkB,MAAQ,CAAC,EAAM,CAAI,EAAI,CAAC,EAAM,CAAI,CAC3C,EACZ,EAAA,cAAC,EAAD,CAAU,UAAU,mBAKV,EAJP,EAAO,IAAK,GAAO,CAClB,IAAM,EAAO,EAAQ,CAAE,EACvB,OAAO,GAAQ,EAAA,cAAC,EAAD,CAAU,IAAK,EAAI,GAAI,CAAO,CAAA,CAC/C,CAAC,CACO,CACN,CAEV,CAEA,MAAMA,EAAe,SAIf,EAAa,CAAE,kBAAmB,eAAgB,iBAAkB,MAAO,EAC3E,UAAiC,CAAC,EAClC,MAAa,EC/GnB,SAAgB,EAAe,CAC7B,YACA,cACA,MACA,QACA,OACA,aACwB,CACxB,IAAM,EAAU,EAAM,OAAQ,GAAS,CAAC,EAAK,IAAI,EAC3C,EAAO,GAAgC,EAAY,IAAK,GAAS,EAAK,EAAY,EAExF,GAAI,EAAa,OAAO,EAAI,CAAO,EAKnC,GADc,EAAM,QAAQ,EAAK,IAAS,EAAM,EAAK,MAAO,CAAC,EAAI,GAAO,EAAM,OAAS,IAC1E,EAAY,EAAO,MAAO,CAAC,EAGxC,IAAI,EAAO,EAAO,EAAM,QAAQ,EAAK,IAAU,EAAK,KAAO,EAAM,EAAK,MAAQ,EAAM,EAAM,CAAC,EACvF,EAAc,EAAQ,OAAQ,IAChC,GAAQ,EAAK,MAAQ,EACd,EAAO,EAAY,EAC3B,EAMD,OAJI,EAAM,OAAS,EAAY,OAAS,GAAa,EAAM,OAAS,IAClE,EAAc,EAAM,MAAM,CAAS,CAAC,CAAC,OAAQ,GAAS,CAAC,EAAK,IAAI,GAG3D,EAAI,CAAW,CACxB,CCoEA,SAAS,GAAiB,CACxB,IAAM,EAAU,IAAI,IACd,EAAY,IAAI,IAClB,EAAU,EAER,EAAS,GAAe,CAC5B,IAAI,EAAQ,EAAQ,IAAI,CAAE,EAK1B,OAJK,IACH,EAAQ,CAAE,QAAS,KAAM,KAAM,IAAK,EACpC,EAAQ,IAAI,EAAI,CAAK,GAEhB,CACT,EAEA,MAAO,CACL,UACA,eAAkB,EAClB,WAAc,CACZ,GAAW,EACX,EAAU,QAAS,GAAa,EAAS,CAAC,CAC5C,EACA,KAAM,EAAY,IAA0B,CAC1C,IAAM,EAAO,OAAO,OAAO,EAAM,CAAE,EAAG,CAAK,EACvC,CAAC,EAAK,SAAW,CAAC,EAAK,MAAM,EAAQ,OAAO,CAAE,CACpD,EACA,UAAY,IACV,EAAU,IAAI,CAAQ,MACT,CACX,EAAU,OAAO,CAAQ,CAC3B,EAEJ,CACF,CAIA,MAAM,EAAmB,uBACnB,EAAe,SAQf,EAA2B,CAAC,EAE5B,EAAU,GAAkB,OAAO,WAAW,CAAK,GAAK,EAGxD,EAAiB,GAA6C,gBAAiB,EAE/E,GAAW,EAAsB,IACrC,EAAE,SAAW,EAAE,QAAU,EAAE,OAAO,EAAI,IAAU,IAAO,EAAE,EAAM,EAGjE,SAAS,GAAqB,EAAwC,EAAsB,CAC1F,GAAI,OAAO,GAAU,SAAU,OAAO,EACtC,GAAI,CAAC,EAAO,MAAO,GACnB,IAAM,EAAO,iBAAiB,EAAQ,cAAc,eAAe,EAC7D,EAAQ,EAAK,iBAAiB,mBAAmB,GAAO,CAAC,CAAC,KAAK,EACrE,MAAO,QAAQ,KAAK,CAAK,EAAI,EAAO,CAAK,GAAK,EAAO,EAAK,QAAQ,GAAK,IAAM,EAAO,CAAK,CAC3F,CAKA,MAAM,GAAkC,CAAE,UAAW,OAAQ,eAAgB,MAAO,EAEpF,SAAS,EACP,CACE,WACA,YACA,gBACA,YACA,gBAAgB,QAChB,gBACA,gBAAgB,aAChB,WACA,YAAY,OACZ,WAAW,OACX,aACA,QACA,YAAY,EACZ,GAAG,GAEL,EACA,CACA,IAAM,EAAY,GAAa,MAIzB,EAAa,EAA2B,IAAI,EAC5C,GAAa,EAAa,GAAgC,CAC1D,IAAS,EAAW,QAAU,EACpC,EAAG,CAAC,CAAC,EACC,GAAY,EAAa,EAAK,EAAU,EACxC,GAAW,EAAY,EAEvB,CAAC,GAAY,EAAS,CAAc,EACpC,CAAC,EAAQ,GAAa,EAAS,CAAK,EACpC,EAAY,EAAO,CAAM,EACzB,EAAe,EAAO,CAAC,EACvB,EAAa,EAAO,CAAE,gBAAe,WAAU,CAAC,EACtD,EAAW,QAAU,CAAE,gBAAe,WAAU,EAEhD,IAAM,EAAe,EAAyB,IAAI,EAO5C,EAAU,MAAmC,CACjD,IAAM,EAAU,EAAW,SAAS,YAAc,EAAW,QAAU,KACjE,EAAM,GAAW,MAAM,KAAK,EAAQ,QAAQ,CAAC,CAAC,KAAM,GAAU,EAAM,QAAQ,MAAM,CAAC,EAMzF,GALA,EACE,CAAC,CAAC,GAAW,CAAC,EACd,uGAEF,EACI,CAAC,GAAW,CAAC,EAAK,OAAO,KAI7B,IAAM,EAAW,MAAM,KAAK,EAAI,QAAQ,CAAC,CAAC,OAAO,CAAa,EACxD,EAAO,EAAS,KAAM,GAAU,EAAM,UAAU,SAAS,mBAAmB,CAAC,EAC7E,EAAW,EAAS,OAAQ,GAAU,IAAU,CAAI,EAI1D,GAHA,EAAQ,EAAS,EAAK,CAAQ,EAC9B,EAAa,QAAU,EAAS,OAE5B,CAAC,EAAM,MAAO,CAAC,EAEnB,IAAM,EAAM,IAAI,IAChB,EAAS,QAAQ,SAAS,EAAO,IAAO,CAClC,EAAM,SAAS,EAAI,IAAI,EAAM,QAAS,CAAE,CAC9C,CAAC,EAED,IAAM,EAAa,EAAS,OAAQ,GAAY,EAAQ,aAAa,CAAgB,CAAC,EAChF,EAAgB,EAAK,UAAU,SAAS,CAAY,EAC1D,EAAW,QAAS,GAAY,EAAQ,gBAAgB,CAAgB,CAAC,EACzE,EAAK,UAAU,OAAO,CAAY,EAElC,GAAI,CACF,IAAM,EAAe,iBAAiB,CAAO,EACvC,EAAW,iBAAiB,CAAG,EAE/B,EACJ,EAAQ,YACR,EAAO,EAAa,kBAAkB,EACtC,EAAO,EAAa,gBAAgB,EAChC,EAAU,EAAQ,cAAc,cAEhC,EAAQ,EAAS,IAAK,GAA0B,CACpD,IAAM,EAAK,EAAI,IAAI,CAAO,EAC1B,MAAO,CACL,KAIA,KACE,CAAC,GACD,CAAC,EAAS,QAAQ,IAAI,CAAE,CAAC,EAAE,MAC3B,EAAQ,UAAU,SAAS,mBAAmB,GAC9C,EAAQ,cAAc,mGAAY,IAAM,MACxC,EAAQ,SAAS,CAAO,EAC1B,MAAO,EAAQ,WACjB,CACF,CAAC,EAEK,CAAE,gBAAe,aAAc,EAAW,QAChD,OAAO,EAAe,CACpB,UACE,EACA,EAAO,EAAS,kBAAkB,EAClC,EAAO,EAAS,gBAAgB,EAChC,EAAO,EAAS,sBAAsB,EACtC,EAAO,EAAS,oBAAoB,EACtC,YAAa,EAAQ,GAAqB,EAAe,CAAO,EAChE,IAAK,EAAO,EAAS,SAAS,EAC9B,QACA,KAAM,EAAK,YACX,WACF,CAAC,CACH,QAAU,CACR,EAAW,QAAS,GAAY,EAAQ,aAAa,EAAkB,MAAM,CAAC,EAC1E,GAAe,EAAK,UAAU,IAAI,CAAY,EAIlD,EAAa,YAEb,EAAa,SAAS,UAAU,YAAY,CAC9C,CAEF,EAAG,CAAC,CAAQ,CAAC,EAEP,EAAS,MAAkB,CAC/B,IAAM,EAAO,EAAQ,EAChB,GAAQ,GAAQ,EAAM,EAAU,OAAO,IAC5C,EAAU,QAAU,EACpB,EAAU,CAAI,EAChB,EAAG,CAAC,CAAO,CAAC,EAgBZ,SAAS,EAAQ,EAAsB,EAAc,EAAyB,CAC5E,IAAI,EAAY,EAAa,QAK7B,GAJI,GAAa,EAAU,UAAY,IACrC,EAAW,EACX,EAAY,MAEV,CAAC,EAAW,CACd,IAAM,MAAc,EAAU,CAAM,EAC9B,EAAqB,CACzB,MAAO,EACP,SAAU,OAAO,iBAAqB,IAAc,KAAO,IAAI,iBAAiB,CAAK,EACrF,IAAK,KACL,SAAU,IAAI,IACd,OACE,OAAO,eAAmB,IACtB,KACA,IAAI,eAAgB,GAAY,CAC9B,GAAI,CAAC,EAAQ,KAAM,GAAU,EAAM,SAAW,CAAO,EAAG,CACtD,qBAAqB,EAAQ,KAAK,EAClC,EAAQ,MAAQ,sBAAsB,CAAK,EAC3C,MACF,CACA,IAAM,EAAS,EAAU,QACzB,EAAM,EAEF,EAAU,UAAY,GAAU,EAAa,UAAY,IAC7D,EAAQ,QAAQ,UAAU,CAAO,EACjC,qBAAqB,EAAQ,YAAY,EACzC,EAAQ,aAAe,0BAA4B,EAAQ,QAAQ,QAAQ,CAAO,CAAC,EACrF,CAAC,EACP,aAAc,EACd,SACF,EACA,EAAY,EAAa,QAAU,EACnC,EAAU,QAAQ,QAAQ,CAAO,CACnC,CACA,GAAM,CAAE,WAAU,WAAU,UAAW,EAEnC,EAAU,MAAQ,IACpB,EAAU,IAAM,EAChB,GAAU,WAAW,EACrB,GAAU,QAAQ,EAAK,CACrB,gBAAiB,CAAC,QAAS,cAAc,EACzC,WAAY,GACZ,UAAW,GACX,QAAS,EACX,CAAC,GAGH,IAAM,EAAU,IAAI,IAAa,CAAQ,EACzC,EAAS,QAAS,GAAY,CACxB,EAAQ,IAAI,CAAO,IACvB,GAAQ,UAAU,CAAO,EACzB,EAAS,OAAO,CAAO,EACzB,CAAC,EACD,EAAQ,QAAS,GAAY,CACvB,EAAS,IAAI,CAAO,IACxB,GAAQ,QAAQ,CAAO,EACvB,EAAS,IAAI,CAAO,EACtB,CAAC,CACH,CAEA,SAAS,GAAa,CACpB,IAAM,EAAY,EAAa,QAC1B,IACL,qBAAqB,EAAU,KAAK,EACpC,qBAAqB,EAAU,YAAY,EAC3C,EAAU,UAAU,WAAW,EAC/B,EAAU,QAAQ,WAAW,EAC7B,EAAa,QAAU,KACzB,CAEA,MAAgB,EAAY,CAAC,CAAC,EAM9B,EAA0B,EAAQ,CAAC,EAAQ,EAAW,EAAe,CAAS,CAAC,EAE/E,IAAM,EAAc,EAAO,CAAM,EACjC,MAAgB,CACV,EAAY,UAAY,IAC5B,EAAY,QAAU,EACtB,IAAa,CACX,cAAe,EAAO,OACtB,aAAc,EAAa,QAAU,EAAO,MAC9C,CAAC,EAEH,EAAG,CAAC,CAAM,CAAC,EAEX,IAAM,EAAe,GAClB,EAAY,IAAgC,EAAS,IAAI,EAAI,CAAE,SAAQ,CAAC,EACzE,CAAC,CAAQ,CACX,EACM,EAAe,GAClB,EAAY,IAAsC,CACjD,EAAS,IAAI,EAAI,CAAE,MAAK,CAAC,EAErB,EAAU,QAAQ,SAAS,CAAE,GAAG,EAAS,OAAO,CACtD,EACA,CAAC,CAAQ,CACX,EAEM,GAAoC,OACjC,CAAE,SAAQ,KAAM,EAAiB,eAAc,eAAc,QAAO,GAC3E,CAAC,EAAQ,EAAc,EAAc,CAAM,CAC7C,EAEM,GAA6B,OAC1B,CACL,QAAU,GAAO,EAAS,QAAQ,IAAI,CAAE,CAAC,EAAE,MAAQ,KACnD,WAAY,EAAS,WACrB,SACA,gBACA,gBACA,gBACA,WACA,YACA,WACA,UAAW,EAAS,SACtB,GACA,CAAC,EAAQ,EAAe,EAAe,EAAe,EAAU,EAAW,EAAU,CAAQ,CAC/F,EAEA,OACE,EAAA,cAAC,EAAmB,SAApB,CAA6B,MAAO,EAWP,EAV3B,EAAA,cAAC,EAAuB,SAAxB,CAAiC,MAAO,EASP,EAR/B,EAAA,cAAC,EAAD,CACE,UAAW,EAAW,eAAgB,CAAS,EAC/C,MAAO,GAAW,EAAQ,CAAE,GAAG,GAAkB,GAAG,CAAM,EAC1D,GAAI,EACJ,IAAK,EAGI,EADR,CACQ,CACoB,CACN,CAEjC,CAEA,MAAa,EAAc,EACzB,EACA,aACF"}
@@ -0,0 +1,2 @@
1
+ import"./focus-ring-SR_LwaN7.js";import{d as e,g as t,p as n}from"./slot-CNhFZdHF.js";import{t as r}from"./polymorphic-BhGNZQja.js";import{t as i}from"./useButtonSemantics-CILM_lhi.js";import{t as a}from"./focusRedirect-BrvK3U_o.js";import{t as o}from"./iconSlot-BNu2MrFI.js";import s,{forwardRef as c,useEffect as l,useRef as u}from"react";import d from"classnames";import{mergeProps as f}from"react-aria";function p({prevDisabled:e,nextDisabled:t,onPrev:n,onNext:r}){let i=u(null),o=u(null),s=u(null);return l(()=>{let n=s.current;s.current=null,n&&(n.from===`prev`&&e?a(o.current,n.viaPointer):n.from===`next`&&t&&a(i.current,n.viaPointer))}),{prevRef:i,nextRef:o,handlePrevClick:e=>{s.current={from:`prev`,viaPointer:e.detail!==0},n()},handleNextClick:e=>{s.current={from:`next`,viaPointer:e.detail!==0},r()}}}function m({active:r,children:a,className:o,component:c,disabled:l,href:u,onClick:p,...m},h){let g=d(`pagination-item`,{active:r,disabled:l},o),_=n(c,u,`button`),v=t(_,u,m),y=e(v,u,`PaginationItem`),b=_,x=_,S=e=>{if(v===`anchor`&&l){e.preventDefault();return}p?.(e)},C=v!==`button`&&v!==`anchor`&&!!p,{buttonProps:w,forkedRef:T}=i(h,{disabled:l,onClick:p}),E=r?{"aria-current":`page`}:{};return s.createElement(`li`,{className:g},v===`button`?s.createElement(b,{...m,className:`pagination-link`,type:`button`,disabled:l,onClick:S,...E,ref:h},a):v===`anchor`?s.createElement(x,{...m,className:`pagination-link`,...y,onClick:S,...l&&{"aria-disabled":!0,tabIndex:-1},...E,ref:h},a):s.createElement(_,{className:`pagination-link`,...f(m,C?w:{}),...!C&&{onClick:S},...y,...E,ref:C?T:h},a))}const h=r(m,`PaginationItem`),g={start:`justify-content-start`,center:`justify-content-center`,end:`justify-content-end`};function _(e,t,n){let r=Math.max(1,n);if(t<=r)return Array.from({length:t},(e,t)=>t+1);let i=Math.floor(r/2),a=Math.max(1,e-i),o=Math.min(t,a+r-1);o-a<r-1&&(a=Math.max(1,o-r+1));let s=[];a>1&&(s.push(1),a>2&&s.push(`...`));for(let e=a;e<=o;e++)s.push(e);return o<t&&(o<t-1&&s.push(`...`),s.push(t)),s}const v=c(({activePage:e=1,align:t,"aria-label":n=`Pagination`,children:r,className:i,maxVisiblePages:a=5,nextIcon:c,nextLabel:l=`Next`,onActivePageChange:u,pages:f,previousIcon:m,previousLabel:v=`Previous`,showPageNumbers:y=!0,showPrevNext:b=!0,size:x,...S},C)=>{let w=d(`pagination`,x,t&&g[t],i),T=f?Math.min(Math.max(e,1),f):e,E=f?T<=1:!1,D=f?T>=f:!1,{prevRef:O,nextRef:k,handlePrevClick:A,handleNextClick:j}=p({prevDisabled:E,nextDisabled:D,onPrev:()=>u&&u(T-1),onNext:()=>u&&u(T+1)}),M=f?s.createElement(s.Fragment,null,b&&s.createElement(h,{ref:O,disabled:E,onClick:A,"aria-label":v},s.createElement(o,{icon:`previous`,override:m,className:`directional-icon`})),y&&_(T,f,a).map((e,t)=>e===`...`?s.createElement(h,{key:`ellipsis-${t}`,disabled:!0,component:`span`,"aria-hidden":`true`},`…`):s.createElement(h,{key:e,active:e===T,onClick:()=>u&&u(e)},e)),b&&s.createElement(h,{ref:k,disabled:D,onClick:j,"aria-label":l},s.createElement(o,{icon:`next`,override:c,className:`directional-icon`}))):null;return s.createElement(`nav`,{"aria-label":n,ref:C,...S},s.createElement(`ul`,{className:w},M??r))});v.displayName=`Pagination`;export{h as n,p as r,v as t};
2
+ //# sourceMappingURL=pagination-BREQp-ZC.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"pagination-BkOquk-x.js","names":[],"sources":["../../src/hooks/usePagination.ts","../../src/components/pagination/PaginationItem.tsx","../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import { MouseEvent, RefObject, useEffect, useRef } from 'react'\n\nimport { focusRedirect } from '../utils/focusRedirect'\n\nexport interface UsePaginationOptions {\n /**\n * Whether the Previous control is currently disabled.\n */\n prevDisabled: boolean\n /**\n * Whether the Next control is currently disabled.\n */\n nextDisabled: boolean\n /**\n * Called when Previous is clicked, before the state change that may disable it.\n */\n onPrev: () => void\n /**\n * Called when Next is clicked, before the state change that may disable it.\n */\n onNext: () => void\n}\n\nexport interface UsePaginationResult<T extends HTMLElement = HTMLButtonElement> {\n // `RefObject<T | null>`, not `RefObject<T>`: these come from `useRef<T>(null)`, so `.current`\n // really is null before mount (and whenever the control isn't rendered — a hand-composed\n // pagination may omit Prev/Next entirely). Declaring the non-null form let a consumer write\n // `prevRef.current.focus()` with no type error and crash at runtime.\n prevRef: RefObject<T | null>\n nextRef: RefObject<T | null>\n handlePrevClick: (event: MouseEvent<T>) => void\n handleNextClick: (event: MouseEvent<T>) => void\n}\n\ninterface Pending {\n from: 'prev' | 'next'\n // A `click` fired by real pointer activation has `detail >= 1`; one fired by keyboard\n // activation (Enter/Space on a focused button) has `detail === 0`.\n viaPointer: boolean\n}\n\n// Native `disabled` buttons are blurred by the browser the instant they're disabled. Clicking a\n// Prev/Next control into the first/last page disables that very control, silently dropping focus\n// to `<body>`. Wire `handlePrevClick`/`handleNextClick` up as each control's `onClick` — they call\n// `onPrev`/`onNext` and redirect focus to the still-enabled sibling in one step, so callers don't\n// hand-wrap their own click handler around a separate mark-then-focus call.\n// Works for `Pagination`'s built-in smart mode and for hand-composed Prev/Next controls alike —\n// pass the element type of whatever you're attaching the refs to (`PaginationItem` defaults to\n// an `HTMLButtonElement`, but renders an `HTMLAnchorElement` when given `href` or `component`).\nexport function usePagination<T extends HTMLElement = HTMLButtonElement>({\n prevDisabled,\n nextDisabled,\n onPrev,\n onNext\n}: UsePaginationOptions): UsePaginationResult<T> {\n const prevRef = useRef<T>(null)\n const nextRef = useRef<T>(null)\n const pending = useRef<Pending | null>(null)\n\n // Deliberately no dependency array: this must run after every render, not just ones where\n // prevDisabled/nextDisabled change value. A Prev/Next click that doesn't cross a boundary\n // (e.g. moving between two enabled middle pages) leaves both booleans unchanged, so a\n // dependency-gated effect would skip and leave `pending` stale — a later, unrelated render\n // that does flip one of the booleans (e.g. jumping straight to the first/last page via a\n // page-number click) would then wrongly consume that stale mark and redirect focus.\n useEffect(() => {\n const from = pending.current\n pending.current = null\n if (!from) return\n if (from.from === 'prev' && prevDisabled) {\n focusRedirect(nextRef.current, from.viaPointer)\n } else if (from.from === 'next' && nextDisabled) {\n focusRedirect(prevRef.current, from.viaPointer)\n }\n })\n\n return {\n prevRef,\n nextRef,\n handlePrevClick: (event) => {\n pending.current = { from: 'prev', viaPointer: event.detail !== 0 }\n onPrev()\n },\n handleNextClick: (event) => {\n pending.current = { from: 'next', viaPointer: event.detail !== 0 }\n onNext()\n }\n }\n}\n","import React, {\n ElementType,\n ForwardRefRenderFunction,\n MouseEvent,\n MouseEventHandler,\n ReactElement,\n Ref\n} from 'react'\nimport classNames from 'classnames'\nimport { mergeProps } from 'react-aria'\n\nimport { useButtonSemantics } from '../../hooks'\nimport { hrefProps, linkElement, resolveLinkKind } from '../../utils/elementKind'\nimport {\n createPolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n PolymorphicRefWithFallback\n} from '../../utils/polymorphic'\n\ntype PaginationItemOwnProps<C extends ElementType> = {\n /**\n * Toggle the active state for the component.\n */\n active?: boolean\n /**\n * Component used for the root node. Either a string to use a HTML element or a component.\n */\n component?: C\n /**\n * Toggle the disabled state for the component.\n */\n disabled?: boolean\n /**\n * The href attribute. When provided the item renders as an `<a>` tag; otherwise as a `<button>`.\n */\n href?: string\n}\n\nexport type PaginationItemProps<C extends ElementType = 'button'> = PolymorphicComponentProps<\n C,\n PaginationItemOwnProps<C>\n>\n\ntype PaginationItemComponent = (<C extends ElementType = 'button'>(\n props: PaginationItemProps<C> & {\n ref?: PolymorphicRefWithFallback<C, HTMLButtonElement | HTMLAnchorElement | HTMLSpanElement>\n }\n) => ReactElement | null) & { displayName?: string }\n\nfunction PaginationItemRender<C extends ElementType = 'button'>(\n {\n active,\n children,\n className,\n component,\n disabled,\n href,\n onClick,\n ...rest\n }: PaginationItemProps<C>,\n ref: PolymorphicRef<C>\n) {\n const _className = classNames(\n 'pagination-item',\n {\n active,\n disabled\n },\n className\n )\n\n // The active page keeps whatever element it would render anyway (`<button>`, or `<a>` when\n // given `href`) rather than collapsing to a `<span>`. Swapping the tag on activation made React\n // unmount the focused control and mount a different element in its place, so a keyboard user who\n // activated a page was dropped to `<body>` and had to tab in from the top of the document again\n // (WCAG 2.4.3). The `<span>` wasn't even inert: `Pagination`'s smart mode passes an `onClick`,\n // so `useButtonSemantics` gave it `role=\"button\"` and `tabIndex={0}` — a synthetic button,\n // strictly worse than the real one it replaced. Styling is unaffected either way: chassis-css\n // matches `.pagination-link { &.active, .active > & }`, and `active` still lands on the `<li>`.\n const Component = linkElement(component, href, 'button')\n // The kind rather than the tag, counting a router link with `href` or `to` as an anchor: under `asChild`, `Component` is a `Slot` standing in for the\n // caller's element, and a slotted `<a>` needs what `component=\"a\"` gets. Each branch below\n // renders `Component` typed as its tag, which is the tag itself or that `Slot`.\n const kind = resolveLinkKind(Component, href, rest)\n // A router link as `component` takes `href` too; it used to get none.\n const linkProps = hrefProps(kind, href, 'PaginationItem')\n const NativeButton = Component as 'button'\n const Anchor = Component as 'a'\n\n // `<a>` has no real `disabled` attribute, so a disabled anchor pagination item still fires\n // click (and still navigates) unless it's blocked here, same guard `Button` applies.\n const handleClick = (event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => {\n if (kind === 'anchor' && disabled) {\n event.preventDefault()\n return\n }\n onClick?.(event as never)\n }\n\n // A custom `component`/default (non-`button`/`a`) branch gets a raw `onClick` with no keyboard\n // semantics otherwise — the same gap `Link` fills via `useButtonSemantics`.\n const needsButtonSemantics = kind !== 'button' && kind !== 'anchor' && !!onClick\n const { buttonProps, forkedRef } = useButtonSemantics<HTMLElement>(ref as Ref<HTMLElement>, {\n disabled,\n onClick: onClick as MouseEventHandler<HTMLElement> | undefined\n })\n\n // `aria-current=\"page\"` goes on the control itself, not the wrapping `<li>` — that's where the\n // WAI-ARIA pagination pattern puts it, and it's what a screen reader conveys when focus lands on\n // the control. On the `<li>` it was attached to a presentational list item nothing focuses.\n const currentProps = active ? { 'aria-current': 'page' as const } : {}\n\n return (\n <li className={_className}>\n {kind === 'button' ? (\n <NativeButton\n {...(rest as Record<string, unknown>)}\n className=\"pagination-link\"\n type=\"button\"\n disabled={disabled}\n onClick={handleClick}\n {...currentProps}\n ref={ref as Ref<HTMLButtonElement>}\n >\n {children}\n </NativeButton>\n ) : kind === 'anchor' ? (\n <Anchor\n {...(rest as Record<string, unknown>)}\n className=\"pagination-link\"\n {...linkProps}\n onClick={handleClick}\n {...(disabled && { 'aria-disabled': true, tabIndex: -1 })}\n {...currentProps}\n ref={ref as Ref<HTMLAnchorElement>}\n >\n {children}\n </Anchor>\n ) : (\n <Component\n className=\"pagination-link\"\n {...(mergeProps(rest, needsButtonSemantics ? buttonProps : {}) as Record<\n string,\n unknown\n >)}\n {...(!needsButtonSemantics && { onClick: handleClick })}\n {...linkProps}\n {...currentProps}\n ref={needsButtonSemantics ? forkedRef : ref}\n >\n {children}\n </Component>\n )}\n </li>\n )\n}\n\nexport const PaginationItem = createPolymorphicComponent<PaginationItemComponent>(\n PaginationItemRender as ForwardRefRenderFunction<Element, PaginationItemProps<ElementType>>,\n 'PaginationItem'\n)\n","import React, { forwardRef, HTMLAttributes } from 'react'\nimport { IconValue } from '../../utils/iconConfig'\nimport { IconSlot } from '../../utils/iconSlot'\nimport classNames from 'classnames'\n\nimport { PaginationItem } from './PaginationItem'\nimport { usePagination } from '../../hooks'\n\nexport interface PaginationProps extends HTMLAttributes<HTMLElement> {\n /**\n * Current active page (1-indexed). Used with `pages` for data-driven mode.\n */\n activePage?: number\n /**\n * Set the alignment of pagination components.\n */\n align?: 'start' | 'center' | 'end'\n /**\n * Accessible label for the pagination `<nav>` landmark. Override for non-English locales,\n * or when multiple paginators appear on the same page.\n *\n * @default 'Pagination'\n */\n 'aria-label'?: string\n /**\n * A string of all className you want applied to the base component.\n */\n className?: string\n /**\n * Maximum number of visible page buttons (default: 5). Flanking pages are collapsed to ellipsis.\n */\n maxVisiblePages?: number\n /**\n * The \"next page\" control's icon in smart pagination mode: an icon name, or an element of your\n * own icon set. Defaults to `IconProvider`'s `next` icon.\n */\n nextIcon?: IconValue\n /**\n * Accessible label for the \"next page\" control, used in smart pagination mode. Override for\n * non-English locales.\n *\n * @default 'Next'\n */\n nextLabel?: string\n /**\n * Callback fired when the active page changes.\n */\n onActivePageChange?: (page: number) => void\n /**\n * Total number of pages. When provided alongside `activePage` and `onActivePageChange`,\n * the component renders a fully-controlled smart paginator with Prev/Next and ellipsis.\n */\n pages?: number\n /**\n * The \"previous page\" control's icon in smart pagination mode: an icon name, or an element of\n * your own icon set. Defaults to `IconProvider`'s `previous` icon.\n */\n previousIcon?: IconValue\n /**\n * Accessible label for the \"previous page\" control, used in smart pagination mode. Override\n * for non-English locales.\n *\n * @default 'Previous'\n */\n previousLabel?: string\n /**\n * Show the numbered page buttons in smart pagination mode. Set `false` alongside\n * `showPrevNext` to build a Prev/Next-only paginator.\n *\n * @default true\n */\n showPageNumbers?: boolean\n /**\n * Show the Prev/Next controls in smart pagination mode. Set `false` alongside\n * `showPageNumbers` to build a page-numbers-only paginator.\n *\n * @default true\n */\n showPrevNext?: boolean\n /**\n * Size the component sm or lg.\n */\n size?: 'sm' | 'lg'\n}\n\nfunction getPageRange(activePage: number, pages: number, maxVisible: number): (number | '...')[] {\n const safeMaxVisible = Math.max(1, maxVisible)\n\n if (pages <= safeMaxVisible) {\n return Array.from({ length: pages }, (_, i) => i + 1)\n }\n\n const half = Math.floor(safeMaxVisible / 2)\n let start = Math.max(1, activePage - half)\n const end = Math.min(pages, start + safeMaxVisible - 1)\n\n if (end - start < safeMaxVisible - 1) {\n start = Math.max(1, end - safeMaxVisible + 1)\n }\n\n const result: (number | '...')[] = []\n\n if (start > 1) {\n result.push(1)\n if (start > 2) result.push('...')\n }\n\n for (let i = start; i <= end; i++) {\n result.push(i)\n }\n\n if (end < pages) {\n if (end < pages - 1) result.push('...')\n result.push(pages)\n }\n\n return result\n}\n\nexport const Pagination = forwardRef<HTMLElement, PaginationProps>(\n (\n {\n activePage = 1,\n align,\n 'aria-label': ariaLabel = 'Pagination',\n children,\n className,\n maxVisiblePages = 5,\n nextIcon,\n nextLabel = 'Next',\n onActivePageChange,\n pages,\n previousIcon,\n previousLabel = 'Previous',\n showPageNumbers = true,\n showPrevNext = true,\n size,\n ...rest\n },\n ref\n ) => {\n const _className = classNames(\n 'pagination',\n size,\n {\n [`justify-content-${align}`]: align\n },\n className\n )\n\n const clampedActivePage = pages ? Math.min(Math.max(activePage, 1), pages) : activePage\n const prevDisabled = pages ? clampedActivePage <= 1 : false\n const nextDisabled = pages ? clampedActivePage >= pages : false\n\n const { prevRef, nextRef, handlePrevClick, handleNextClick } = usePagination({\n prevDisabled,\n nextDisabled,\n onPrev: () => onActivePageChange && onActivePageChange(clampedActivePage - 1),\n onNext: () => onActivePageChange && onActivePageChange(clampedActivePage + 1)\n })\n\n const smartContent = pages ? (\n <>\n {showPrevNext && (\n <PaginationItem\n ref={prevRef}\n disabled={prevDisabled}\n onClick={handlePrevClick}\n aria-label={previousLabel}\n >\n <IconSlot icon=\"previous\" override={previousIcon} className=\"directional-icon\" />\n </PaginationItem>\n )}\n {showPageNumbers &&\n getPageRange(clampedActivePage, pages, maxVisiblePages).map((page, idx) =>\n page === '...' ? (\n // eslint-disable-next-line react/no-array-index-key\n <PaginationItem key={`ellipsis-${idx}`} disabled component=\"span\" aria-hidden=\"true\">\n &hellip;\n </PaginationItem>\n ) : (\n <PaginationItem\n key={page}\n active={page === clampedActivePage}\n onClick={() => onActivePageChange && onActivePageChange(page)}\n >\n {page}\n </PaginationItem>\n )\n )}\n {showPrevNext && (\n <PaginationItem\n ref={nextRef}\n disabled={nextDisabled}\n onClick={handleNextClick}\n aria-label={nextLabel}\n >\n <IconSlot icon=\"next\" override={nextIcon} className=\"directional-icon\" />\n </PaginationItem>\n )}\n </>\n ) : null\n\n return (\n <nav aria-label={ariaLabel} ref={ref} {...rest}>\n <ul className={_className}>{smartContent ?? children}</ul>\n </nav>\n )\n }\n)\n\nPagination.displayName = 'Pagination'\n"],"mappings":"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"}
1
+ {"version":3,"file":"pagination-BREQp-ZC.js","names":[],"sources":["../../src/hooks/usePagination.ts","../../src/components/pagination/PaginationItem.tsx","../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import { MouseEvent, RefObject, useEffect, useRef } from 'react'\n\nimport { focusRedirect } from '../utils/focusRedirect'\n\nexport interface UsePaginationOptions {\n /**\n * Whether the Previous control is currently disabled.\n */\n prevDisabled: boolean\n /**\n * Whether the Next control is currently disabled.\n */\n nextDisabled: boolean\n /**\n * Called when Previous is clicked, before the state change that may disable it.\n */\n onPrev: () => void\n /**\n * Called when Next is clicked, before the state change that may disable it.\n */\n onNext: () => void\n}\n\nexport interface UsePaginationResult<T extends HTMLElement = HTMLButtonElement> {\n // `RefObject<T | null>`, not `RefObject<T>`: these come from `useRef<T>(null)`, so `.current`\n // really is null before mount (and whenever the control isn't rendered — a hand-composed\n // pagination may omit Prev/Next entirely). Declaring the non-null form let a consumer write\n // `prevRef.current.focus()` with no type error and crash at runtime.\n prevRef: RefObject<T | null>\n nextRef: RefObject<T | null>\n handlePrevClick: (event: MouseEvent<T>) => void\n handleNextClick: (event: MouseEvent<T>) => void\n}\n\ninterface Pending {\n from: 'prev' | 'next'\n // A `click` fired by real pointer activation has `detail >= 1`; one fired by keyboard\n // activation (Enter/Space on a focused button) has `detail === 0`.\n viaPointer: boolean\n}\n\n// Native `disabled` buttons are blurred by the browser the instant they're disabled. Clicking a\n// Prev/Next control into the first/last page disables that very control, silently dropping focus\n// to `<body>`. Wire `handlePrevClick`/`handleNextClick` up as each control's `onClick` — they call\n// `onPrev`/`onNext` and redirect focus to the still-enabled sibling in one step, so callers don't\n// hand-wrap their own click handler around a separate mark-then-focus call.\n// Works for `Pagination`'s built-in smart mode and for hand-composed Prev/Next controls alike —\n// pass the element type of whatever you're attaching the refs to (`PaginationItem` defaults to\n// an `HTMLButtonElement`, but renders an `HTMLAnchorElement` when given `href` or `component`).\nexport function usePagination<T extends HTMLElement = HTMLButtonElement>({\n prevDisabled,\n nextDisabled,\n onPrev,\n onNext\n}: UsePaginationOptions): UsePaginationResult<T> {\n const prevRef = useRef<T>(null)\n const nextRef = useRef<T>(null)\n const pending = useRef<Pending | null>(null)\n\n // Deliberately no dependency array: this must run after every render, not just ones where\n // prevDisabled/nextDisabled change value. A Prev/Next click that doesn't cross a boundary\n // (e.g. moving between two enabled middle pages) leaves both booleans unchanged, so a\n // dependency-gated effect would skip and leave `pending` stale — a later, unrelated render\n // that does flip one of the booleans (e.g. jumping straight to the first/last page via a\n // page-number click) would then wrongly consume that stale mark and redirect focus.\n useEffect(() => {\n const from = pending.current\n pending.current = null\n if (!from) return\n if (from.from === 'prev' && prevDisabled) {\n focusRedirect(nextRef.current, from.viaPointer)\n } else if (from.from === 'next' && nextDisabled) {\n focusRedirect(prevRef.current, from.viaPointer)\n }\n })\n\n return {\n prevRef,\n nextRef,\n handlePrevClick: (event) => {\n pending.current = { from: 'prev', viaPointer: event.detail !== 0 }\n onPrev()\n },\n handleNextClick: (event) => {\n pending.current = { from: 'next', viaPointer: event.detail !== 0 }\n onNext()\n }\n }\n}\n","import React, {\n ElementType,\n ForwardRefRenderFunction,\n MouseEvent,\n MouseEventHandler,\n ReactElement,\n Ref\n} from 'react'\nimport classNames from 'classnames'\nimport { mergeProps } from 'react-aria'\n\nimport { useButtonSemantics } from '../../hooks'\nimport { hrefProps, linkElement, resolveLinkKind } from '../../utils/elementKind'\nimport {\n createPolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n PolymorphicRefWithFallback\n} from '../../utils/polymorphic'\n\ntype PaginationItemOwnProps<C extends ElementType> = {\n /**\n * Toggle the active state for the component.\n */\n active?: boolean\n /**\n * Component used for the root node. Either a string to use a HTML element or a component.\n */\n component?: C\n /**\n * Toggle the disabled state for the component.\n */\n disabled?: boolean\n /**\n * The href attribute. When provided the item renders as an `<a>` tag; otherwise as a `<button>`.\n */\n href?: string\n}\n\nexport type PaginationItemProps<C extends ElementType = 'button'> = PolymorphicComponentProps<\n C,\n PaginationItemOwnProps<C>\n>\n\ntype PaginationItemComponent = (<C extends ElementType = 'button'>(\n props: PaginationItemProps<C> & {\n ref?: PolymorphicRefWithFallback<C, HTMLButtonElement | HTMLAnchorElement | HTMLSpanElement>\n }\n) => ReactElement | null) & { displayName?: string }\n\nfunction PaginationItemRender<C extends ElementType = 'button'>(\n {\n active,\n children,\n className,\n component,\n disabled,\n href,\n onClick,\n ...rest\n }: PaginationItemProps<C>,\n ref: PolymorphicRef<C>\n) {\n const _className = classNames(\n 'pagination-item',\n {\n active,\n disabled\n },\n className\n )\n\n // The active page keeps whatever element it would render anyway (`<button>`, or `<a>` when\n // given `href`) rather than collapsing to a `<span>`. Swapping the tag on activation made React\n // unmount the focused control and mount a different element in its place, so a keyboard user who\n // activated a page was dropped to `<body>` and had to tab in from the top of the document again\n // (WCAG 2.4.3). The `<span>` wasn't even inert: `Pagination`'s smart mode passes an `onClick`,\n // so `useButtonSemantics` gave it `role=\"button\"` and `tabIndex={0}` — a synthetic button,\n // strictly worse than the real one it replaced. Styling is unaffected either way: chassis-css\n // matches `.pagination-link { &.active, .active > & }`, and `active` still lands on the `<li>`.\n const Component = linkElement(component, href, 'button')\n // The kind rather than the tag, counting a router link with `href` or `to` as an anchor: under `asChild`, `Component` is a `Slot` standing in for the\n // caller's element, and a slotted `<a>` needs what `component=\"a\"` gets. Each branch below\n // renders `Component` typed as its tag, which is the tag itself or that `Slot`.\n const kind = resolveLinkKind(Component, href, rest)\n // A router link as `component` takes `href` too; it used to get none.\n const linkProps = hrefProps(kind, href, 'PaginationItem')\n const NativeButton = Component as 'button'\n const Anchor = Component as 'a'\n\n // `<a>` has no real `disabled` attribute, so a disabled anchor pagination item still fires\n // click (and still navigates) unless it's blocked here, same guard `Button` applies.\n const handleClick = (event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => {\n if (kind === 'anchor' && disabled) {\n event.preventDefault()\n return\n }\n onClick?.(event as never)\n }\n\n // A custom `component`/default (non-`button`/`a`) branch gets a raw `onClick` with no keyboard\n // semantics otherwise — the same gap `Link` fills via `useButtonSemantics`.\n const needsButtonSemantics = kind !== 'button' && kind !== 'anchor' && !!onClick\n const { buttonProps, forkedRef } = useButtonSemantics<HTMLElement>(ref as Ref<HTMLElement>, {\n disabled,\n onClick: onClick as MouseEventHandler<HTMLElement> | undefined\n })\n\n // `aria-current=\"page\"` goes on the control itself, not the wrapping `<li>` — that's where the\n // WAI-ARIA pagination pattern puts it, and it's what a screen reader conveys when focus lands on\n // the control. On the `<li>` it was attached to a presentational list item nothing focuses.\n const currentProps = active ? { 'aria-current': 'page' as const } : {}\n\n return (\n <li className={_className}>\n {kind === 'button' ? (\n <NativeButton\n {...(rest as Record<string, unknown>)}\n className=\"pagination-link\"\n type=\"button\"\n disabled={disabled}\n onClick={handleClick}\n {...currentProps}\n ref={ref as Ref<HTMLButtonElement>}\n >\n {children}\n </NativeButton>\n ) : kind === 'anchor' ? (\n <Anchor\n {...(rest as Record<string, unknown>)}\n className=\"pagination-link\"\n {...linkProps}\n onClick={handleClick}\n {...(disabled && { 'aria-disabled': true, tabIndex: -1 })}\n {...currentProps}\n ref={ref as Ref<HTMLAnchorElement>}\n >\n {children}\n </Anchor>\n ) : (\n <Component\n className=\"pagination-link\"\n {...(mergeProps(rest, needsButtonSemantics ? buttonProps : {}) as Record<\n string,\n unknown\n >)}\n {...(!needsButtonSemantics && { onClick: handleClick })}\n {...linkProps}\n {...currentProps}\n ref={needsButtonSemantics ? forkedRef : ref}\n >\n {children}\n </Component>\n )}\n </li>\n )\n}\n\nexport const PaginationItem = createPolymorphicComponent<PaginationItemComponent>(\n PaginationItemRender as ForwardRefRenderFunction<Element, PaginationItemProps<ElementType>>,\n 'PaginationItem'\n)\n","import React, { forwardRef, HTMLAttributes } from 'react'\nimport { IconValue } from '../../utils/iconConfig'\nimport { IconSlot } from '../../utils/iconSlot'\nimport classNames from 'classnames'\n\nimport { PaginationItem } from './PaginationItem'\nimport { usePagination } from '../../hooks'\n\n// Whole class names, not `justify-content-${align}`: see `utils/colorClassNames.ts`.\nconst ALIGN_CLASS_NAMES: Record<NonNullable<PaginationProps['align']>, string> = {\n start: 'justify-content-start',\n center: 'justify-content-center',\n end: 'justify-content-end'\n}\n\nexport interface PaginationProps extends HTMLAttributes<HTMLElement> {\n /**\n * Current active page (1-indexed). Used with `pages` for data-driven mode.\n */\n activePage?: number\n /**\n * Set the alignment of pagination components.\n */\n align?: 'start' | 'center' | 'end'\n /**\n * Accessible label for the pagination `<nav>` landmark. Override for non-English locales,\n * or when multiple paginators appear on the same page.\n *\n * @default 'Pagination'\n */\n 'aria-label'?: string\n /**\n * A string of all className you want applied to the base component.\n */\n className?: string\n /**\n * Maximum number of visible page buttons (default: 5). Flanking pages are collapsed to ellipsis.\n */\n maxVisiblePages?: number\n /**\n * The \"next page\" control's icon in smart pagination mode: an icon name, or an element of your\n * own icon set. Defaults to `IconProvider`'s `next` icon.\n */\n nextIcon?: IconValue\n /**\n * Accessible label for the \"next page\" control, used in smart pagination mode. Override for\n * non-English locales.\n *\n * @default 'Next'\n */\n nextLabel?: string\n /**\n * Callback fired when the active page changes.\n */\n onActivePageChange?: (page: number) => void\n /**\n * Total number of pages. When provided alongside `activePage` and `onActivePageChange`,\n * the component renders a fully-controlled smart paginator with Prev/Next and ellipsis.\n */\n pages?: number\n /**\n * The \"previous page\" control's icon in smart pagination mode: an icon name, or an element of\n * your own icon set. Defaults to `IconProvider`'s `previous` icon.\n */\n previousIcon?: IconValue\n /**\n * Accessible label for the \"previous page\" control, used in smart pagination mode. Override\n * for non-English locales.\n *\n * @default 'Previous'\n */\n previousLabel?: string\n /**\n * Show the numbered page buttons in smart pagination mode. Set `false` alongside\n * `showPrevNext` to build a Prev/Next-only paginator.\n *\n * @default true\n */\n showPageNumbers?: boolean\n /**\n * Show the Prev/Next controls in smart pagination mode. Set `false` alongside\n * `showPageNumbers` to build a page-numbers-only paginator.\n *\n * @default true\n */\n showPrevNext?: boolean\n /**\n * Size the component sm or lg.\n */\n size?: 'sm' | 'lg'\n}\n\nfunction getPageRange(activePage: number, pages: number, maxVisible: number): (number | '...')[] {\n const safeMaxVisible = Math.max(1, maxVisible)\n\n if (pages <= safeMaxVisible) {\n return Array.from({ length: pages }, (_, i) => i + 1)\n }\n\n const half = Math.floor(safeMaxVisible / 2)\n let start = Math.max(1, activePage - half)\n const end = Math.min(pages, start + safeMaxVisible - 1)\n\n if (end - start < safeMaxVisible - 1) {\n start = Math.max(1, end - safeMaxVisible + 1)\n }\n\n const result: (number | '...')[] = []\n\n if (start > 1) {\n result.push(1)\n if (start > 2) result.push('...')\n }\n\n for (let i = start; i <= end; i++) {\n result.push(i)\n }\n\n if (end < pages) {\n if (end < pages - 1) result.push('...')\n result.push(pages)\n }\n\n return result\n}\n\nexport const Pagination = forwardRef<HTMLElement, PaginationProps>(\n (\n {\n activePage = 1,\n align,\n 'aria-label': ariaLabel = 'Pagination',\n children,\n className,\n maxVisiblePages = 5,\n nextIcon,\n nextLabel = 'Next',\n onActivePageChange,\n pages,\n previousIcon,\n previousLabel = 'Previous',\n showPageNumbers = true,\n showPrevNext = true,\n size,\n ...rest\n },\n ref\n ) => {\n const _className = classNames('pagination', size, align && ALIGN_CLASS_NAMES[align], className)\n\n const clampedActivePage = pages ? Math.min(Math.max(activePage, 1), pages) : activePage\n const prevDisabled = pages ? clampedActivePage <= 1 : false\n const nextDisabled = pages ? clampedActivePage >= pages : false\n\n const { prevRef, nextRef, handlePrevClick, handleNextClick } = usePagination({\n prevDisabled,\n nextDisabled,\n onPrev: () => onActivePageChange && onActivePageChange(clampedActivePage - 1),\n onNext: () => onActivePageChange && onActivePageChange(clampedActivePage + 1)\n })\n\n const smartContent = pages ? (\n <>\n {showPrevNext && (\n <PaginationItem\n ref={prevRef}\n disabled={prevDisabled}\n onClick={handlePrevClick}\n aria-label={previousLabel}\n >\n <IconSlot icon=\"previous\" override={previousIcon} className=\"directional-icon\" />\n </PaginationItem>\n )}\n {showPageNumbers &&\n getPageRange(clampedActivePage, pages, maxVisiblePages).map((page, idx) =>\n page === '...' ? (\n // eslint-disable-next-line react/no-array-index-key\n <PaginationItem key={`ellipsis-${idx}`} disabled component=\"span\" aria-hidden=\"true\">\n &hellip;\n </PaginationItem>\n ) : (\n <PaginationItem\n key={page}\n active={page === clampedActivePage}\n onClick={() => onActivePageChange && onActivePageChange(page)}\n >\n {page}\n </PaginationItem>\n )\n )}\n {showPrevNext && (\n <PaginationItem\n ref={nextRef}\n disabled={nextDisabled}\n onClick={handleNextClick}\n aria-label={nextLabel}\n >\n <IconSlot icon=\"next\" override={nextIcon} className=\"directional-icon\" />\n </PaginationItem>\n )}\n </>\n ) : null\n\n return (\n <nav aria-label={ariaLabel} ref={ref} {...rest}>\n <ul className={_className}>{smartContent ?? children}</ul>\n </nav>\n )\n }\n)\n\nPagination.displayName = 'Pagination'\n"],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ import"./focus-ring-SR_LwaN7.js";import{a as e}from"./slot-CNhFZdHF.js";import{t}from"./polymorphic-BhGNZQja.js";import n from"react";import r from"classnames";const i={start:`float-start`,center:`d-block mx-auto`,end:`float-end`};function a({align:t,alt:a,className:o,color:s,component:c,fluid:l,height:u,rounded:d,src:f,text:p,thumbnail:m,title:h=`Placeholder`,variant:g,width:_,...v},y){let b=h!==!1,x=p===!1?void 0:p??(_!==void 0&&u!==void 0?`${_}x${u}`:void 0),S=x!==void 0,C=[b&&h,S&&x].filter(Boolean).join(`: `)||void 0;if(f||e(c)){let e=c??`img`,s=r({image:l||m,fluid:l,rounded:d,thumbnail:m},t&&i[t],o);return n.createElement(e,{src:f,width:_,height:u,alt:a??C??``,className:s,...v,ref:y})}let w=r(`image`,{context:!!(s||g)},s,g||`bg-evident`,`fg-subtle`,o);return n.createElement(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:_,height:u,"aria-label":C,"aria-hidden":!C||void 0,className:w,preserveAspectRatio:`xMidYMid slice`,role:C?`img`:void 0,...v,ref:y},b&&n.createElement(`title`,null,h),S&&n.createElement(`text`,{dy:`.3em`,fill:`currentColor`,textAnchor:`middle`,x:`50%`,y:`50%`},x))}const o=t(a,`Placeholder`);export{o as t};
2
+ //# sourceMappingURL=placeholder-DhNpUJqv.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"placeholder-DhNpUJqv.js","names":[],"sources":["../../src/components/placeholder/Placeholder.tsx"],"sourcesContent":["import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport { ContextColor, ContextStyle } from '../../types'\nimport {\n createPolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef\n} from '../../utils/polymorphic'\nimport { isSlot } from '../../utils/slot'\n\ntype PlaceholderAlign = 'start' | 'center' | 'end'\n\ntype PlaceholderOwnProps<C extends ElementType> = {\n /**\n * Set the horizontal alignment. Only applies when `src` is set.\n */\n align?: PlaceholderAlign\n /**\n * A string of all className you want applied to the component.\n */\n className?: string\n /**\n * Sets the color of the generated placeholder graphic to one of Chassis context colors. Has no\n * effect when `src` is set.\n */\n color?: ContextColor\n /**\n * Sets the variant of the generated placeholder graphic to one of Chassis context styles. Has no\n * effect when `src` is set.\n */\n variant?: Exclude<ContextStyle, 'basic' | 'outline'>\n /**\n * Component used for the root node when `src` is set. Either a string to use an HTML element\n * or a component — e.g. a framework's own `Image` component. Its own props (`src`, `fill`,\n * `priority`, etc.) are type-checked at the call site once passed here. With `asChild`, the\n * child element is the image and carries its own `src`.\n */\n component?: C\n /**\n * Make the image responsive, so it never grows larger than its parent. Only applies when `src`\n * is set.\n */\n fluid?: boolean\n /**\n * Placeholder height.\n */\n height?: number | string\n /**\n * Give the image a rounded border-radius. Only applies when `src` is set.\n */\n rounded?: boolean\n /**\n * Renders a real image instead of the generated placeholder graphic, e.g. a default asset or a\n * `placehold.co` URL.\n */\n src?: string\n /**\n * Text shown in the generated placeholder graphic. Defaults to `{width}x{height}`. Pass `false`\n * to hide it. Has no effect when `src` is set.\n */\n text?: string | false\n /**\n * Give the image a thumbnail appearance (padding, background, border, box-shadow). Only\n * applies when `src` is set.\n */\n thumbnail?: boolean\n /**\n * Accessible title for the generated placeholder graphic, rendered as an SVG `<title>`. Pass\n * `false` to hide it. Has no effect when `src` is set.\n *\n * @default 'Placeholder'\n */\n title?: string | false\n /**\n * Placeholder width.\n */\n width?: number | string\n}\n\nexport type PlaceholderProps<C extends ElementType = 'img'> = PolymorphicComponentProps<\n C,\n PlaceholderOwnProps<C>\n>\n\ntype PlaceholderComponent = (<C extends ElementType = 'img'>(\n props: PlaceholderProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\n// Whole class names, not `float-${align}`: see `utils/colorClassNames.ts`.\nconst ALIGN_CLASS_NAMES: Record<PlaceholderAlign, string> = {\n start: 'float-start',\n center: 'd-block mx-auto',\n end: 'float-end'\n}\n\nfunction PlaceholderRender<C extends ElementType = 'img'>(\n {\n align,\n alt,\n className,\n color,\n component,\n fluid,\n height,\n rounded,\n src,\n text,\n thumbnail,\n title = 'Placeholder',\n variant,\n width,\n ...rest\n }: PlaceholderProps<C>,\n ref: PolymorphicRef<C>\n) {\n const showTitle = title !== false\n const displayText =\n text === false\n ? undefined\n : (text ?? (width !== undefined && height !== undefined ? `${width}x${height}` : undefined))\n const showText = displayText !== undefined\n const label =\n [showTitle && title, showText && displayText].filter(Boolean).join(': ') || undefined\n\n // Under `asChild` the caller's element is the image and holds the `src`, so there is none here\n // to choose the branch by.\n if (src || isSlot(component)) {\n const Component = component ?? 'img'\n const _className = classNames(\n { image: fluid || thumbnail, fluid, rounded, thumbnail },\n align && ALIGN_CLASS_NAMES[align],\n className\n )\n\n return (\n <Component\n src={src}\n width={width}\n height={height}\n alt={alt ?? label ?? ''}\n className={_className}\n {...rest}\n ref={ref}\n />\n )\n }\n\n const _className = classNames(\n 'image',\n { context: Boolean(color || variant) },\n color,\n variant ? variant : 'bg-evident',\n 'fg-subtle',\n className\n )\n\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={width}\n height={height}\n aria-label={label}\n aria-hidden={label ? undefined : true}\n className={_className}\n preserveAspectRatio=\"xMidYMid slice\"\n role={label ? 'img' : undefined}\n {...rest}\n ref={ref as PolymorphicRef<'svg'>}\n >\n {showTitle && <title>{title}</title>}\n {showText && (\n <text dy=\".3em\" fill=\"currentColor\" textAnchor=\"middle\" x=\"50%\" y=\"50%\">\n {displayText}\n </text>\n )}\n </svg>\n )\n}\n\nexport const Placeholder = createPolymorphicComponent<PlaceholderComponent>(\n PlaceholderRender as ForwardRefRenderFunction<Element, PlaceholderProps<ElementType>>,\n 'Placeholder'\n)\n"],"mappings":"gKA0FA,MAAM,EAAsD,CAC1D,MAAO,cACP,OAAQ,kBACR,IAAK,WACP,EAEA,SAAS,EACP,CACE,QACA,MACA,YACA,QACA,YACA,QACA,SACA,UACA,MACA,OACA,YACA,QAAQ,cACR,UACA,QACA,GAAG,GAEL,EACA,CACA,IAAM,EAAY,IAAU,GACtB,EACJ,IAAS,GACL,IAAA,GACC,IAAS,IAAU,IAAA,IAAa,IAAW,IAAA,GAAY,GAAG,EAAM,GAAG,IAAW,IAAA,IAC/E,EAAW,IAAgB,IAAA,GAC3B,EACJ,CAAC,GAAa,EAAO,GAAY,CAAW,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,IAAI,GAAK,IAAA,GAI9E,GAAI,GAAO,EAAO,CAAS,EAAG,CAC5B,IAAM,EAAY,GAAa,MACzB,EAAa,EACjB,CAAE,MAAO,GAAS,EAAW,QAAO,UAAS,WAAU,EACvD,GAAS,EAAkB,GAC3B,CACF,EAEA,OACE,EAAA,cAAC,EAAD,CACO,MACE,QACC,SACR,IAAK,GAAO,GAAS,GACrB,UAAW,EACX,GAAI,EACC,KACN,CAAA,CAEL,CAEA,IAAM,EAAa,EACjB,QACA,CAAE,QAAS,GAAQ,GAAS,EAAS,EACrC,EACA,GAAoB,aACpB,YACA,CACF,EAEA,OACE,EAAA,cAAC,MAAD,CACE,MAAM,6BACC,QACC,SACR,aAAY,EACZ,cAAa,IAAQ,IAAA,GACrB,UAAW,EACX,oBAAoB,iBACpB,KAAM,EAAQ,MAAQ,IAAA,GACtB,GAAI,EACC,KAQF,EANF,GAAa,EAAA,cAAC,QAAA,KAAO,CAAa,EAClC,GACC,EAAA,cAAC,OAAD,CAAM,GAAG,OAAO,KAAK,eAAe,WAAW,SAAS,EAAE,MAAM,EAAE,KAE5D,EADH,CACG,CAEL,CAET,CAEA,MAAa,EAAc,EACzB,EACA,aACF"}
@@ -0,0 +1,2 @@
1
+ import"./focus-ring-SR_LwaN7.js";import{t as e}from"./polymorphic-BhGNZQja.js";import{t}from"./colorClassNames-CEh5Yzfp.js";import n,{useId as r}from"react";import i from"classnames";function a({children:e,animated:r,className:a,color:o,component:s,striped:c,style:l,value:u=0,...d},f){let p=s??`div`,m=Math.min(100,Math.max(0,u)),h=i(`progress-bar`,o&&[t[o],`fg-contrast`],{striped:c,animated:r},a);return n.createElement(p,{...d,className:h,style:{width:`${m}%`,...l},ref:f},n.createElement(`span`,{className:`mx-2xs`},e))}const o=e(a,`ProgressBar`);function s({"aria-label":e,animated:t,children:a,className:s,color:c,component:l,height:u,inlineValue:d,label:f,showValue:p,striped:m,style:h,value:g=0,..._},v){let y=l??`div`,b=i(`progress`,s),x=Math.min(100,Math.max(0,g)),S=a===void 0?d?`${x}%`:void 0:a,C=!!(f||p),w=r(),T=f!=null&&typeof f!=`string`,E={...h};u!==void 0&&(E[`--cx-height`]=`${u}px`);let D=n.createElement(y,{..._,className:b,role:`progressbar`,"aria-valuenow":x,"aria-valuemin":0,"aria-valuemax":100,"aria-label":e??(typeof f==`string`?f:void 0),"aria-labelledby":!e&&T?w:void 0,style:E,ref:v},n.createElement(o,{animated:t,color:c,striped:m,value:x},S));return C?n.createElement(`div`,{className:`d-flex flex-column gap-xs`},n.createElement(`div`,{className:i(`d-flex`,f?`justify-content-between`:`justify-content-end`)},f?n.createElement(`span`,{className:`font-strong`,id:T?w:void 0},f):null,p?n.createElement(`span`,{className:`font-strong`},x,`%`):null),D):D}const c=e(s,`Progress`);export{o as n,c as t};
2
+ //# sourceMappingURL=progress-BqgWezdG.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"progress-BqgWezdG.js","names":[],"sources":["../../src/components/progress/ProgressBar.tsx","../../src/components/progress/Progress.tsx"],"sourcesContent":["import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport { ContextColor } from '../../types'\nimport { BG_COLOR_CLASS_NAMES } from '../../utils/colorClassNames'\nimport {\n createPolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype ProgressBarOwnProps<C extends ElementType> = {\n /**\n * Use to animate the stripes right to left via CSS3 animations.\n */\n animated?: boolean\n /**\n * A string of all className you want applied to the component.\n */\n className?: string\n /**\n * Sets the color of the component to one of Chassis context colors.\n */\n color?: ContextColor\n /**\n * Component used for the root node. Either a string to use a HTML element or a component.\n */\n component?: C\n /**\n * Adds a diagonal stripe pattern over the bar's background.\n */\n striped?: boolean\n /**\n * The percent to progress the ProgressBar.\n */\n value?: number\n}\n\nexport type ProgressBarProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n C,\n ProgressBarOwnProps<C>\n>\n\ntype ProgressBarComponent = (<C extends ElementType = 'div'>(\n props: ProgressBarProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction ProgressBarRender<C extends ElementType = 'div'>(\n {\n children,\n animated,\n className,\n color,\n component,\n striped,\n style,\n value = 0,\n ...rest\n }: ProgressBarProps<C>,\n ref: PolymorphicRef<C>\n) {\n const Component = component ?? 'div'\n const clampedValue = Math.min(100, Math.max(0, value))\n const _className = classNames(\n 'progress-bar',\n color && [BG_COLOR_CLASS_NAMES[color], 'fg-contrast'],\n {\n striped,\n animated\n },\n className\n )\n\n return (\n <Component\n {...rest}\n className={_className}\n style={{ width: `${clampedValue}%`, ...style }}\n ref={ref}\n >\n <span className=\"mx-2xs\">{children}</span>\n </Component>\n )\n}\n\nexport const ProgressBar = createPolymorphicComponent<ProgressBarComponent>(\n ProgressBarRender as ForwardRefRenderFunction<Element, ProgressBarProps<ElementType>>,\n 'ProgressBar'\n)\n","import React, {\n CSSProperties,\n ElementType,\n ForwardRefRenderFunction,\n ReactElement,\n ReactNode,\n useId\n} from 'react'\nimport classNames from 'classnames'\n\nimport { ContextColor } from '../../types'\nimport {\n createPolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef\n} from '../../utils/polymorphic'\nimport { ProgressBar } from './ProgressBar'\n\ntype ProgressStyle = CSSProperties & {\n '--cx-height'?: string\n}\n\ntype ProgressOwnProps<C extends ElementType> = {\n /**\n * Use to animate the stripes right to left via CSS3 animations.\n */\n animated?: boolean\n /**\n * A string of all className you want applied to the component.\n */\n className?: string\n /**\n * Sets the color of the component to one of Chassis context colors.\n */\n color?: ContextColor\n /**\n * Component used for the root node. Either a string to use a HTML element or a component.\n */\n component?: C\n /**\n * Sets the height of the component, via the `--cx-height` custom property. If you set that\n * value the inner bar (and the striped pattern's tile size) automatically resizes accordingly.\n */\n height?: number\n /**\n * Shows the current value as text inside the bar, independently of `showValue` — combine both\n * to get a `label` + `showValue` caption above the bar alongside an `inlineValue` reading\n * inside it.\n */\n inlineValue?: boolean\n /**\n * A text label describing the progress. Rendered in a caption row above the bar. Also used as\n * the default accessible name when no `aria-label`/`aria-labelledby` is supplied.\n */\n label?: ReactNode\n /**\n * Shows the current value as text in the caption row above the bar, alongside `label` when\n * both are set, or alone otherwise. Use `inlineValue` to show it inside the bar instead.\n */\n showValue?: boolean\n /**\n * Adds a diagonal stripe pattern over the bar's background.\n */\n striped?: boolean\n /**\n * The percent to progress the ProgressBar (out of 100).\n */\n value?: number\n}\n\nexport type ProgressProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n C,\n ProgressOwnProps<C>\n>\n\ntype ProgressComponent = (<C extends ElementType = 'div'>(\n props: ProgressProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction ProgressRender<C extends ElementType = 'div'>(\n {\n 'aria-label': ariaLabel,\n animated,\n children,\n className,\n color,\n component,\n height,\n inlineValue,\n label,\n showValue,\n striped,\n style,\n value = 0,\n ...rest\n }: ProgressProps<C>,\n ref: PolymorphicRef<C>\n) {\n const Component = component ?? 'div'\n const _className = classNames('progress', className)\n const clampedValue = Math.min(100, Math.max(0, value))\n\n const barChildren =\n children !== undefined ? children : inlineValue ? `${clampedValue}%` : undefined\n const hasCaption = Boolean(label || showValue)\n\n const labelId = useId()\n const isNodeLabel = label != null && typeof label !== 'string'\n\n const _style: ProgressStyle = { ...style }\n if (height !== undefined) _style['--cx-height'] = `${height}px`\n\n const progressElement = (\n <Component\n {...rest}\n className={_className}\n role=\"progressbar\"\n aria-valuenow={clampedValue}\n aria-valuemin={0}\n aria-valuemax={100}\n aria-label={ariaLabel ?? (typeof label === 'string' ? label : undefined)}\n aria-labelledby={!ariaLabel && isNodeLabel ? labelId : undefined}\n style={_style}\n ref={ref}\n >\n <ProgressBar animated={animated} color={color} striped={striped} value={clampedValue}>\n {barChildren}\n </ProgressBar>\n </Component>\n )\n\n if (!hasCaption) return progressElement\n\n return (\n <div className=\"d-flex flex-column gap-xs\">\n <div\n className={classNames('d-flex', label ? 'justify-content-between' : 'justify-content-end')}\n >\n {label ? (\n <span className=\"font-strong\" id={isNodeLabel ? labelId : undefined}>\n {label}\n </span>\n ) : null}\n {showValue ? <span className=\"font-strong\">{clampedValue}%</span> : null}\n </div>\n {progressElement}\n </div>\n )\n}\n\nexport const Progress = createPolymorphicComponent<ProgressComponent>(\n ProgressRender as ForwardRefRenderFunction<Element, ProgressProps<ElementType>>,\n 'Progress'\n)\n"],"mappings":"uLA+CA,SAAS,EACP,CACE,WACA,WACA,YACA,QACA,YACA,UACA,QACA,QAAQ,EACR,GAAG,GAEL,EACA,CACA,IAAM,EAAY,GAAa,MACzB,EAAe,KAAK,IAAI,IAAK,KAAK,IAAI,EAAG,CAAK,CAAC,EAC/C,EAAa,EACjB,eACA,GAAS,CAAC,EAAqB,GAAQ,aAAa,EACpD,CACE,UACA,UACF,EACA,CACF,EAEA,OACE,EAAA,cAAC,EAAD,CACE,GAAI,EACJ,UAAW,EACX,MAAO,CAAE,MAAO,GAAG,EAAa,GAAI,GAAG,CAAM,EACxC,KAGI,EADT,EAAA,cAAC,OAAD,CAAM,UAAU,QAAyB,EAAf,CAAe,CAChC,CAEf,CAEA,MAAa,EAAc,EACzB,EACA,aACF,ECTA,SAAS,EACP,CACE,aAAc,EACd,WACA,WACA,YACA,QACA,YACA,SACA,cACA,QACA,YACA,UACA,QACA,QAAQ,EACR,GAAG,GAEL,EACA,CACA,IAAM,EAAY,GAAa,MACzB,EAAa,EAAW,WAAY,CAAS,EAC7C,EAAe,KAAK,IAAI,IAAK,KAAK,IAAI,EAAG,CAAK,CAAC,EAE/C,EACJ,IAAa,IAAA,GAAuB,EAAc,GAAG,EAAa,GAAK,IAAA,GAA9C,EACrB,EAAa,GAAQ,GAAS,GAE9B,EAAU,EAAM,EAChB,EAAc,GAAS,MAAQ,OAAO,GAAU,SAEhD,EAAwB,CAAE,GAAG,CAAM,EACrC,IAAW,IAAA,KAAW,EAAO,eAAiB,GAAG,EAAO,KAE5D,IAAM,EACJ,EAAA,cAAC,EAAD,CACE,GAAI,EACJ,UAAW,EACX,KAAK,cACL,gBAAe,EACf,gBAAe,EACf,gBAAe,IACf,aAAY,IAAc,OAAO,GAAU,SAAW,EAAQ,IAAA,IAC9D,kBAAiB,CAAC,GAAa,EAAc,EAAU,IAAA,GACvD,MAAO,EACF,KAKI,EAHT,EAAA,cAAC,EAAD,CAAuB,WAAiB,QAAgB,UAAS,MAAO,CAE3D,EADV,CACU,CACJ,EAKb,OAFK,EAGH,EAAA,cAAC,MAAD,CAAK,UAAU,2BAYV,EAXH,EAAA,cAAC,MAAD,CACE,UAAW,EAAW,SAAU,EAAQ,0BAA4B,qBAAqB,CAQtF,EANF,EACC,EAAA,cAAC,OAAD,CAAM,UAAU,cAAc,GAAI,EAAc,EAAU,IAAA,EAEpD,EADH,CACG,EACJ,KACH,EAAY,EAAA,cAAC,OAAD,CAAM,UAAU,aAAmC,EAApB,EAAa,GAAO,EAAI,IACjE,EACJ,CACE,EAfiB,CAiB1B,CAEA,MAAa,EAAW,EACtB,EACA,UACF"}
@@ -0,0 +1,2 @@
1
+ import"./focus-ring-SR_LwaN7.js";import{t as e}from"./polymorphic-BhGNZQja.js";import{t}from"./colorClassNames-CEh5Yzfp.js";import{a as n,i as r}from"./breakpoints-CGk8szzR.js";import i,{Fragment as a,forwardRef as o}from"react";import s from"classnames";const c=(e,t)=>e===!0?`${t}flex-fill`:e===`auto`?`${t}w-auto`:typeof e==`number`||typeof e==`string`?Number(e)===12?`${t}w-100`:`${t}w-${e}/12`:null;function l({children:e,animation:a,className:o,color:l,component:u,span:d,...f},p){let m=u??`span`,h=s(`skeleton`,a&&`skeleton-${a}`,l&&t[l],r([n(d,c)]),o);return i.createElement(m,{className:h,...f,ref:p},e)}const u=e(l,`Skeleton`);function d({children:e,color:t,component:n,loading:r,spans:o,...s},c){if(!r)return i.createElement(i.Fragment,null,e);let l=o===void 0?[void 0]:Array.isArray(o)?o:[o];return i.createElement(i.Fragment,null,l.map((e,r)=>i.createElement(a,{key:r},r>0&&` `,i.createElement(u,{component:n,span:e,color:t,...s,ref:r===0?c:void 0}))))}const f=o(d);f.displayName=`SkeletonLoader`;export{u as n,f as t};
2
+ //# sourceMappingURL=skeleton-Bjv9gGd3.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"skeleton-Bjv9gGd3.js","names":[],"sources":["../../src/components/skeleton/Skeleton.tsx","../../src/components/skeleton/SkeletonLoader.tsx"],"sourcesContent":["import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport { WidthSpan, responsiveClassNames, responsiveProp } from '../../utils/breakpoints'\nimport { ContextColor, Responsive } from '../../types'\nimport { BG_COLOR_CLASS_NAMES } from '../../utils/colorClassNames'\nimport {\n createPolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype SkeletonOwnProps<C extends ElementType> = {\n /**\n * Adds `skeleton-{animation}` alongside the base `skeleton` class, so the element animates\n * itself as well as any nested `<Skeleton>` children. Nest plain `<Skeleton>` children inside\n * it for the glow pulse to reach them too, or apply `wave` to a container of one or more\n * `<Skeleton>` children for a directional sweep across the whole group.\n */\n animation?: 'glow' | 'wave'\n /**\n * A string of all className you want applied to the component.\n */\n className?: string\n /**\n * Sets the color of the component to one of Chassis context colors.\n */\n color?: ContextColor\n /**\n * Component used for the root node. Either a string to use an HTML element or a component —\n * e.g. `Avatar` or `Button`. Its own props are type-checked at the call site once passed here.\n *\n * @default 'span'\n */\n component?: C\n /**\n * Width of the skeleton in twelfths of its parent (`span={6}` is half, mapped to the\n * `w-{n}/12` class; `span={12}` is `w-100`), `'auto'` for its natural width (`w-auto`), or\n * `true` to fill the rest of a flex row (`flex-fill`). Unset by default, so the rendered\n * element's own intrinsic width applies — set it explicitly (e.g. `span={12}`) for a\n * full-width text line; leave it unset when `component` is something that sizes itself, like\n * `Avatar` or `Button`. An object sets the width from a breakpoint up: `{ base: 12, md: 6 }`.\n *\n * @type { Responsive<'auto' | number | string | boolean> }\n */\n span?: Responsive<WidthSpan>\n}\n\nexport type SkeletonProps<C extends ElementType = 'span'> = PolymorphicComponentProps<\n C,\n SkeletonOwnProps<C>\n>\n\ntype SkeletonComponent = (<C extends ElementType = 'span'>(\n props: SkeletonProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\n// chassis-css has the fractions `w-1/12` to `w-11/12`; twelve twelfths is `w-100`.\nconst spanClassName = (span: WidthSpan, prefix: string) => {\n if (span === true) return `${prefix}flex-fill`\n if (span === 'auto') return `${prefix}w-auto`\n if (typeof span === 'number' || typeof span === 'string') {\n return Number(span) === 12 ? `${prefix}w-100` : `${prefix}w-${span}/12`\n }\n return null\n}\n\nfunction SkeletonRender<C extends ElementType = 'span'>(\n { children, animation, className, color, component, span, ...rest }: SkeletonProps<C>,\n ref: PolymorphicRef<C>\n) {\n const Component = component ?? 'span'\n const _className = classNames(\n 'skeleton',\n animation && `skeleton-${animation}`,\n color && BG_COLOR_CLASS_NAMES[color],\n responsiveClassNames([responsiveProp(span, spanClassName)]),\n className\n )\n\n return (\n <Component className={_className} {...rest} ref={ref}>\n {children}\n </Component>\n )\n}\n\nexport const Skeleton = createPolymorphicComponent<SkeletonComponent>(\n SkeletonRender as ForwardRefRenderFunction<Element, SkeletonProps<ElementType>>,\n 'Skeleton'\n)\n","import React, {\n ComponentPropsWithoutRef,\n ElementType,\n ForwardedRef,\n forwardRef,\n ForwardRefRenderFunction,\n Fragment,\n ReactElement,\n ReactNode\n} from 'react'\n\nimport { WidthSpan } from '../../utils/breakpoints'\nimport { PolymorphicRef } from '../../utils/polymorphic'\nimport { ContextColor } from '../../types'\nimport { Skeleton, SkeletonProps } from './Skeleton'\n\ntype SkeletonLoaderOwnProps<C extends ElementType> = {\n /**\n * The real content, rendered unchanged (no wrapping element) once `loading` is `false`.\n */\n children: ReactNode\n /**\n * Sets the color of the generated skeleton lines to one of Chassis context colors.\n */\n color?: ContextColor\n /**\n * Component used for the generated skeleton(s) — e.g. `Avatar` or `Button` — for swapping\n * non-text content, not just text runs. Its own props are type-checked at the call site once\n * passed here, same as `Skeleton`'s own `component` prop.\n *\n * @default 'span'\n */\n component?: C\n /**\n * Swaps `children` for one `<Skeleton>` per entry in `spans` while `true`.\n */\n loading: boolean\n /**\n * One skeleton line per entry, using the same values as `Skeleton`'s `span` prop — e.g.\n * `[12, 6]` for a full-width line followed by a half-width one. A single value (e.g. `6`) is\n * shorthand for a single line, equivalent to `[6]`. Leave unset for a single skeleton sized by\n * `component`'s own intrinsic width instead — e.g. an `Avatar`'s `size` prop. Rendered instead\n * of `children` while `loading` is `true`; ignored once `loading` is `false`.\n *\n * @type { 'auto' | number | string | boolean | Array<'auto' | number | string | boolean> }\n */\n spans?: WidthSpan | WidthSpan[]\n}\n\n// Spelled out rather than `PolymorphicComponentProps`, which adds `asChild`: `SkeletonLoader`\n// renders no element of its own (it swaps its `children` for generated `Skeleton` lines), so\n// there's nothing for a child element to stand in for. (`Omit`-ing it from that type instead\n// breaks `C`'s inference from `component`.)\nexport type SkeletonLoaderProps<C extends ElementType = 'span'> = SkeletonLoaderOwnProps<C> &\n Omit<ComponentPropsWithoutRef<C>, keyof SkeletonLoaderOwnProps<C> | 'asChild'>\n\ntype SkeletonLoaderComponent = (<C extends ElementType = 'span'>(\n props: SkeletonLoaderProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\n/**\n * A pure content swap: no wrapping element of its own, so `.skeleton-glow`/`.skeleton-wave`\n * won't reach the lines it generates unless applied to a container already in the tree — see\n * `Skeleton`'s own docs for why the animation classes need a `.skeleton` descendant to animate.\n *\n * The ref goes to the first generated skeleton while `loading`, and is `null` once the real\n * content shows: that content is the caller's, with refs of its own.\n */\nfunction SkeletonLoaderRender<C extends ElementType = 'span'>(\n { children, color, component, loading, spans, ...rest }: SkeletonLoaderProps<C>,\n ref: ForwardedRef<Element>\n) {\n if (!loading) return <>{children}</>\n\n const spanList = spans === undefined ? [undefined] : Array.isArray(spans) ? spans : [spans]\n\n return (\n <>\n {spanList.map((span, index) => (\n // eslint-disable-next-line react/no-array-index-key -- `spans` is a static prop array\n <Fragment key={index}>\n {index > 0 && ' '}\n {/* `rest` is `C`'s own props minus `SkeletonLoaderOwnProps`'s keys, which structurally\n satisfies what `Skeleton<C>` wants (`C`'s own props minus its own, different, key\n set) — TS can't verify that across two independently-generic components, hence the\n cast. */}\n <Skeleton\n component={component}\n span={span}\n color={color}\n {...(rest as unknown as SkeletonProps<C>)}\n ref={index === 0 ? ref : undefined}\n />\n </Fragment>\n ))}\n </>\n )\n}\n\n// `forwardRef` takes a render function that isn't generic, so the generic type is cast back on,\n// as `createPolymorphicComponent` does.\nexport const SkeletonLoader = forwardRef(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n SkeletonLoaderRender as ForwardRefRenderFunction<Element, any>\n) as unknown as SkeletonLoaderComponent\n\nSkeletonLoader.displayName = 'SkeletonLoader'\n"],"mappings":"+PA0DA,MAAM,GAAiB,EAAiB,IAClC,IAAS,GAAa,GAAG,EAAO,WAChC,IAAS,OAAe,GAAG,EAAO,QAClC,OAAO,GAAS,UAAY,OAAO,GAAS,SACvC,OAAO,CAAI,IAAM,GAAK,GAAG,EAAO,OAAS,GAAG,EAAO,IAAI,EAAK,KAE9D,KAGT,SAAS,EACP,CAAE,WAAU,YAAW,YAAW,QAAO,YAAW,OAAM,GAAG,GAC7D,EACA,CACA,IAAM,EAAY,GAAa,OACzB,EAAa,EACjB,WACA,GAAa,YAAY,IACzB,GAAS,EAAqB,GAC9B,EAAqB,CAAC,EAAe,EAAM,CAAa,CAAC,CAAC,EAC1D,CACF,EAEA,OACE,EAAA,cAAC,EAAD,CAAW,UAAW,EAAY,GAAI,EAAW,KAEtC,EADR,CACQ,CAEf,CAEA,MAAa,EAAW,EACtB,EACA,UACF,ECtBA,SAAS,EACP,CAAE,WAAU,QAAO,YAAW,UAAS,QAAO,GAAG,GACjD,EACA,CACA,GAAI,CAAC,EAAS,OAAO,EAAA,cAAA,EAAA,SAAA,KAAG,CAAW,EAEnC,IAAM,EAAW,IAAU,IAAA,GAAY,CAAC,IAAA,EAAS,EAAI,MAAM,QAAQ,CAAK,EAAI,EAAQ,CAAC,CAAK,EAE1F,OACE,EAAA,cAAA,EAAA,SAAA,KACG,EAAS,KAAK,EAAM,IAEnB,EAAA,cAAC,EAAD,CAAU,IAAK,CAaL,EAZP,EAAQ,GAAK,IAKd,EAAA,cAAC,EAAD,CACa,YACL,OACC,QACP,GAAK,EACL,IAAK,IAAU,EAAI,EAAM,IAAA,EAC1B,CAAA,CACO,CACX,CACD,CAEN,CAIA,MAAa,EAAiB,EAE5B,CACF,EAEA,EAAe,YAAc"}
@@ -0,0 +1,2 @@
1
+ import"./focus-ring-SR_LwaN7.js";import{t as e}from"./polymorphic-BhGNZQja.js";import{n as t}from"./colorClassNames-CEh5Yzfp.js";import{t as n}from"./VisuallyHidden-C2dM7HhC.js";import r from"react";import i from"classnames";const a={sm:`spinner-sm`};function o({className:e,color:o,component:s,size:c,variant:l=`border`,visuallyHiddenLabel:u=`Loading...`,...d},f){let p=s??`div`,m=i(`spinner-${l}`,o?t[o]:null,c&&a[c],e);return r.createElement(p,{className:m,role:`status`,...d,ref:f},r.createElement(n,null,u))}const s=e(o,`Spinner`);export{s as t};
2
+ //# sourceMappingURL=spinner-DBuvQvMR.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"spinner-DBuvQvMR.js","names":[],"sources":["../../src/components/spinner/Spinner.tsx"],"sourcesContent":["import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport {\n createPolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef\n} from '../../utils/polymorphic'\nimport { ContextColor } from '../../types'\nimport { FG_COLOR_CLASS_NAMES } from '../../utils/colorClassNames'\nimport { VisuallyHidden } from '../visually-hidden/VisuallyHidden'\n\ntype SpinnerOwnProps<C extends ElementType> = {\n /**\n * A string of all className you want applied to the component.\n */\n className?: string\n /**\n * Sets the color of the component to one of Chassis context colors.\n */\n color?: ContextColor\n /**\n * Component used for the root node. Either a string to use a HTML element or a component.\n */\n component?: C\n /**\n * Renders a smaller spinner, with the `spinner-sm` class.\n */\n size?: 'sm'\n /**\n * Set the button variant to an outlined button or a ghost button.\n */\n variant?: 'border' | 'grow'\n /**\n * Set visually hidden label for accessibility purposes.\n */\n visuallyHiddenLabel?: string\n}\n\n// chassis-css sizes a spinner of either variant with the one `spinner-{size}` class. Whole class\n// names: see `utils/colorClassNames.ts`.\nconst SIZE_CLASS_NAMES: Record<NonNullable<SpinnerOwnProps<ElementType>['size']>, string> = {\n sm: 'spinner-sm'\n}\n\nexport type SpinnerProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n C,\n SpinnerOwnProps<C>\n>\n\ntype SpinnerComponent = (<C extends ElementType = 'div'>(\n props: SpinnerProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction SpinnerRender<C extends ElementType = 'div'>(\n {\n className,\n color,\n component,\n size,\n variant = 'border',\n visuallyHiddenLabel = 'Loading...',\n ...rest\n }: SpinnerProps<C>,\n ref: PolymorphicRef<C>\n) {\n const Component = component ?? 'div'\n const _className = classNames(\n `spinner-${variant}`,\n color ? FG_COLOR_CLASS_NAMES[color] : null,\n size && SIZE_CLASS_NAMES[size],\n className\n )\n\n return (\n <Component className={_className} role=\"status\" {...rest} ref={ref}>\n <VisuallyHidden>{visuallyHiddenLabel}</VisuallyHidden>\n </Component>\n )\n}\n\nexport const Spinner = createPolymorphicComponent<SpinnerComponent>(\n SpinnerRender as ForwardRefRenderFunction<Element, SpinnerProps<ElementType>>,\n 'Spinner'\n)\n"],"mappings":"iOAyCA,MAAM,EAAsF,CAC1F,GAAI,YACN,EAWA,SAAS,EACP,CACE,YACA,QACA,YACA,OACA,UAAU,SACV,sBAAsB,aACtB,GAAG,GAEL,EACA,CACA,IAAM,EAAY,GAAa,MACzB,EAAa,EACjB,WAAW,IACX,EAAQ,EAAqB,GAAS,KACtC,GAAQ,EAAiB,GACzB,CACF,EAEA,OACE,EAAA,cAAC,EAAD,CAAW,UAAW,EAAY,KAAK,SAAS,GAAI,EAAW,KAEpD,EADT,EAAA,cAAC,EAAA,KAAgB,CAAoC,CAC5C,CAEf,CAEA,MAAa,EAAU,EACrB,EACA,SACF"}
@@ -0,0 +1,2 @@
1
+ import{n as e,r as t}from"./tableClassName-DleBjOj2.js";import n,{forwardRef as r}from"react";const i=r(({align:r,bordered:i,borderless:a,caption:o,children:s,className:c,color:l,hover:u,responsive:d,sm:f,stacked:p,striped:m,...h},g)=>{let _=n.createElement(`table`,{...h,className:e({align:r,bordered:i,borderless:a,className:c,color:l,hover:u,sm:f,stacked:p,striped:m}),ref:g},o&&n.createElement(`caption`,null,o),s),v=t({responsive:d,stacked:p});return v?n.createElement(`div`,{className:v},_):_});i.displayName=`StaticTable`;export{i as t};
2
+ //# sourceMappingURL=static-table-uu297Liz.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"static-table-D0M4oc_t.js","names":[],"sources":["../../src/components/static-table/StaticTable.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode, TableHTMLAttributes } from 'react'\n\nimport { TableStyleProps, tableClassName, tableWrapperClassName } from '../../utils/tableClassName'\n\nexport interface StaticTableProps\n extends TableStyleProps, Omit<TableHTMLAttributes<HTMLTableElement>, 'align' | 'color'> {\n /**\n * Content shown above the table, functioning as a heading for it.\n */\n caption?: ReactNode\n /**\n * The table's own markup — plain `<thead>`/`<tbody>`/`<tfoot>`/`<tr>`/`<th>`/`<td>` elements,\n * rendered as-is.\n */\n children?: ReactNode\n /**\n * Convert rows into stacked label/value blocks below a container width, for tables with too\n * many columns to read comfortably even with horizontal scrolling. `true` always stacks; a\n * breakpoint name stacks only below it. Implies `responsive` when `responsive` isn't set\n * separately. Unlike `Table`, which derives each cell's label from its column header, a static\n * table has no collection to read labels from — give each `<td>` a `data-cell` attribute with\n * the label to show before its value.\n */\n stacked?: TableStyleProps['stacked']\n}\n\n// A plain, server-renderable `<table>` with `Table`'s styling props and none of its behavior — no\n// sorting, selection, or keyboard grid navigation, and no hooks, so it needs no client JavaScript\n// at all. Imported from `@chassis-ui/react/static-table`, whose entry deliberately has no\n// `'use client'` directive (see `RSC.md`). `forwardRef` is fine here: React Server Components\n// render forwardRef components like any other function component (a ref just can't be passed\n// from the server side).\nexport const StaticTable = forwardRef<HTMLTableElement, StaticTableProps>(\n (\n {\n align,\n bordered,\n borderless,\n caption,\n children,\n className,\n color,\n hover,\n responsive,\n sm,\n stacked,\n striped,\n ...rest\n },\n ref\n ) => {\n const table = (\n <table\n {...rest}\n className={tableClassName({\n align,\n bordered,\n borderless,\n className,\n color,\n hover,\n sm,\n stacked,\n striped\n })}\n ref={ref}\n >\n {caption && <caption>{caption}</caption>}\n {children}\n </table>\n )\n\n const wrapperClassName = tableWrapperClassName({ responsive, stacked })\n return wrapperClassName ? <div className={wrapperClassName}>{table}</div> : table\n }\n)\n\nStaticTable.displayName = 'StaticTable'\n"],"mappings":"yFAgCA,MAAa,EAAc,GAEvB,CACE,QACA,WACA,aACA,UACA,WACA,YACA,QACA,QACA,aACA,KACA,UACA,UACA,GAAG,GAEL,IACG,CACH,IAAM,EACJ,EAAA,cAAC,QAAD,CACE,GAAI,EACJ,UAAW,EAAe,CACxB,QACA,WACA,aACA,YACA,QACA,QACA,KACA,UACA,SACF,CAAC,EACI,KAIA,EAFJ,GAAW,EAAA,cAAC,UAAA,KAAS,CAAiB,EACtC,CACI,EAGH,EAAmB,EAAsB,CAAE,aAAY,SAAQ,CAAC,EACtE,OAAO,EAAmB,EAAA,cAAC,MAAD,CAAK,UAAW,CAA8B,EAAX,CAAW,EAAI,CAC9E,CACF,EAEA,EAAY,YAAc"}
1
+ {"version":3,"file":"static-table-uu297Liz.js","names":[],"sources":["../../src/components/static-table/StaticTable.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode, TableHTMLAttributes } from 'react'\n\nimport { TableStyleProps, tableClassName, tableWrapperClassName } from '../../utils/tableClassName'\n\nexport interface StaticTableProps\n extends TableStyleProps, Omit<TableHTMLAttributes<HTMLTableElement>, 'align' | 'color'> {\n /**\n * Content shown above the table, functioning as a heading for it.\n */\n caption?: ReactNode\n /**\n * The table's own markup — plain `<thead>`/`<tbody>`/`<tfoot>`/`<tr>`/`<th>`/`<td>` elements,\n * rendered as-is.\n */\n children?: ReactNode\n /**\n * Convert rows into stacked label/value blocks below a container width, for tables with too\n * many columns to read comfortably even with horizontal scrolling. `true` always stacks; a\n * breakpoint name stacks only below it. Implies `responsive` when `responsive` isn't set\n * separately. Unlike `Table`, which derives each cell's label from its column header, a static\n * table has no collection to read labels from — give each `<td>` a `data-cell` attribute with\n * the label to show before its value.\n */\n stacked?: TableStyleProps['stacked']\n}\n\n// A plain, server-renderable `<table>` with `Table`'s styling props and none of its behavior — no\n// sorting, selection, or keyboard grid navigation, and no hooks, so it needs no client JavaScript\n// at all. Imported from `@chassis-ui/react/static-table`, whose entry deliberately has no\n// `'use client'` directive (see `RSC.md`). `forwardRef` is fine here: React Server Components\n// render forwardRef components like any other function component (a ref just can't be passed\n// from the server side).\nexport const StaticTable = forwardRef<HTMLTableElement, StaticTableProps>(\n (\n {\n align,\n bordered,\n borderless,\n caption,\n children,\n className,\n color,\n hover,\n responsive,\n sm,\n stacked,\n striped,\n ...rest\n },\n ref\n ) => {\n const table = (\n <table\n {...rest}\n className={tableClassName({\n align,\n bordered,\n borderless,\n className,\n color,\n hover,\n sm,\n stacked,\n striped\n })}\n ref={ref}\n >\n {caption && <caption>{caption}</caption>}\n {children}\n </table>\n )\n\n const wrapperClassName = tableWrapperClassName({ responsive, stacked })\n return wrapperClassName ? <div className={wrapperClassName}>{table}</div> : table\n }\n)\n\nStaticTable.displayName = 'StaticTable'\n"],"mappings":"8FAgCA,MAAa,EAAc,GAEvB,CACE,QACA,WACA,aACA,UACA,WACA,YACA,QACA,QACA,aACA,KACA,UACA,UACA,GAAG,GAEL,IACG,CACH,IAAM,EACJ,EAAA,cAAC,QAAD,CACE,GAAI,EACJ,UAAW,EAAe,CACxB,QACA,WACA,aACA,YACA,QACA,QACA,KACA,UACA,SACF,CAAC,EACI,KAIA,EAFJ,GAAW,EAAA,cAAC,UAAA,KAAS,CAAiB,EACtC,CACI,EAGH,EAAmB,EAAsB,CAAE,aAAY,SAAQ,CAAC,EACtE,OAAO,EAAmB,EAAA,cAAC,MAAD,CAAK,UAAW,CAA8B,EAAX,CAAW,EAAI,CAC9E,CACF,EAEA,EAAY,YAAc"}
@@ -1,2 +1,2 @@
1
- import"./focus-ring-SR_LwaN7.js";import{t as e}from"./useForkedRef-DVEfT-KI.js";import{n as t,t as n}from"./tableClassName-CZA2Bse8.js";import r,{forwardRef as i,useRef as a}from"react";import o from"classnames";import{useCheckbox as s,useTable as c,useTableCell as l,useTableColumnHeader as u,useTableHeaderRow as d,useTableRow as f,useTableRowGroup as p,useTableSelectAllCheckbox as m,useTableSelectionCheckbox as h}from"react-aria";import{Cell as g,Column as _,Row as v,TableBody as y,TableHeader as b,useTableState as x,useToggleState as S}from"react-stately";const C=i(({align:i,bordered:o,borderless:s,caption:l,children:u,className:d,color:f,disabledKeys:p,footer:m,hover:h,id:g,onSelectionChange:_,onSortChange:v,responsive:y,selectedKeys:b,selectionMode:S=`none`,sm:C,sortDescriptor:j,stacked:M,striped:N,...P},F)=>{let I=x({children:u,disabledKeys:p,onSelectionChange:_,onSortChange:v,selectedKeys:b,selectionMode:S,showSelectionCheckboxes:S===`multiple`,sortDescriptor:j}),L=a(null),R=e(L,F),{gridProps:z}=c({"aria-label":P[`aria-label`],"aria-labelledby":P[`aria-labelledby`],id:g},I,L),B=n({align:i,bordered:o,borderless:s,className:d,color:f,hover:h,sm:C,stacked:M,striped:N}),V=r.createElement(`table`,{...z,"aria-describedby":z[`aria-describedby`]||void 0,className:B,ref:R},l&&r.createElement(`caption`,null,l),r.createElement(w,{className:u[0].props.className,type:`thead`},I.collection.headerRows.map(e=>r.createElement(T,{key:e.key,item:e,state:I},[...I.collection.getChildren?.(e.key)??[]].map(e=>e.props?.isSelectionCell?r.createElement(D,{key:e.key,column:e,state:I}):r.createElement(E,{key:e.key,column:e,state:I}))))),r.createElement(w,{className:u[1].props.className,type:`tbody`},[...I.collection.body.childNodes].map(e=>r.createElement(O,{key:e.key,item:e,state:I},[...I.collection.getChildren?.(e.key)??[]].map(e=>e.props?.isSelectionCell?r.createElement(A,{key:e.key,cell:e,state:I}):r.createElement(k,{key:e.key,cell:e,stacked:!!M,state:I}))))),m&&r.createElement(`tfoot`,null,m)),H=t({responsive:y,stacked:M});return H?r.createElement(`div`,{className:H},V):V});C.displayName=`Table`;const w=({className:e,type:t,children:n})=>{let{rowGroupProps:i}=p();return r.createElement(t,{...i,className:e||void 0},n)},T=({children:e,item:t,state:n})=>{let i=a(null),{rowProps:o}=d({node:t},n,i);return r.createElement(`tr`,{...o,ref:i},e)},E=({column:e,state:t})=>{let n=a(null),{columnHeaderProps:i}=u({node:e},t,n),o=t.sortDescriptor?.column===e.key,s=t.sortDescriptor?.direction===`ascending`?`▲`:`▼`;return r.createElement(`th`,{...i,className:e.props?.className||void 0,colSpan:e.colSpan??void 0,scope:`col`,ref:n},e.rendered,e.props?.allowsSorting&&r.createElement(`span`,{"aria-hidden":`true`,className:`table-sort-icon`},o?s:`⇅`))},D=({column:e,state:t})=>{let n=a(null),{columnHeaderProps:i}=u({node:e},t,n),{checkboxProps:o}=m(t);return r.createElement(`th`,{...i,className:`table-selection-cell`,scope:`col`,suppressHydrationWarning:!0,ref:n},r.createElement(j,{checkboxProps:o}))},O=({children:e,item:t,state:n})=>{let i=a(null),{rowProps:s}=f({node:t},n,i),c=n.selectionManager.isSelected(t.key);return r.createElement(`tr`,{...s,className:o({active:c},t.props?.className),ref:i},e)},k=({cell:e,stacked:t,state:n})=>{let i=a(null),{gridCellProps:o}=l({node:e},n,i);return r.createElement(`td`,{...o,className:e.props?.className||void 0,"data-cell":t&&e.column?.textValue||void 0,ref:i},e.rendered)},A=({cell:e,state:t})=>{let n=a(null),{gridCellProps:i}=l({node:e},t,n),{checkboxProps:o}=h({key:e.parentKey},t);return r.createElement(`td`,{...i,className:`table-selection-cell`,suppressHydrationWarning:!0,ref:n},r.createElement(j,{checkboxProps:o}))},j=({checkboxProps:e})=>{let t=S(e),n=a(null),{inputProps:i}=s(e,t,n);return r.createElement(`input`,{...i,"aria-describedby":void 0,className:`check-input`,ref:n})},M=y,N=g,P=_,F=b,I=v;export{M as a,N as i,F as n,C as o,P as r,I as t};
2
- //# sourceMappingURL=table-Cy6uEuEP.js.map
1
+ import"./focus-ring-SR_LwaN7.js";import{t as e}from"./useForkedRef-DVEfT-KI.js";import{n as t,r as n}from"./tableClassName-DleBjOj2.js";import r,{forwardRef as i,useRef as a}from"react";import o from"classnames";import{useCheckbox as s,useTable as c,useTableCell as l,useTableColumnHeader as u,useTableHeaderRow as d,useTableRow as f,useTableRowGroup as p,useTableSelectAllCheckbox as m,useTableSelectionCheckbox as h}from"react-aria";import{Cell as g,Column as _,Row as v,TableBody as y,TableHeader as b,useTableState as x,useToggleState as S}from"react-stately";const C=i(({align:i,bordered:o,borderless:s,caption:l,children:u,className:d,color:f,disabledKeys:p,footer:m,hover:h,id:g,onSelectionChange:_,onSortChange:v,responsive:y,selectedKeys:b,selectionMode:S=`none`,sm:C,sortDescriptor:j,stacked:M,striped:N,...P},F)=>{let I=x({children:u,disabledKeys:p,onSelectionChange:_,onSortChange:v,selectedKeys:b,selectionMode:S,showSelectionCheckboxes:S===`multiple`,sortDescriptor:j}),L=a(null),R=e(L,F),{gridProps:z}=c({"aria-label":P[`aria-label`],"aria-labelledby":P[`aria-labelledby`],id:g},I,L),B=t({align:i,bordered:o,borderless:s,className:d,color:f,hover:h,sm:C,stacked:M,striped:N}),V=r.createElement(`table`,{...z,"aria-describedby":z[`aria-describedby`]||void 0,className:B,ref:R},l&&r.createElement(`caption`,null,l),r.createElement(w,{className:u[0].props.className,type:`thead`},I.collection.headerRows.map(e=>r.createElement(T,{key:e.key,item:e,state:I},[...I.collection.getChildren?.(e.key)??[]].map(e=>e.props?.isSelectionCell?r.createElement(D,{key:e.key,column:e,state:I}):r.createElement(E,{key:e.key,column:e,state:I}))))),r.createElement(w,{className:u[1].props.className,type:`tbody`},[...I.collection.body.childNodes].map(e=>r.createElement(O,{key:e.key,item:e,state:I},[...I.collection.getChildren?.(e.key)??[]].map(e=>e.props?.isSelectionCell?r.createElement(A,{key:e.key,cell:e,state:I}):r.createElement(k,{key:e.key,cell:e,stacked:!!M,state:I}))))),m&&r.createElement(`tfoot`,null,m)),H=n({responsive:y,stacked:M});return H?r.createElement(`div`,{className:H},V):V});C.displayName=`Table`;const w=({className:e,type:t,children:n})=>{let{rowGroupProps:i}=p();return r.createElement(t,{...i,className:e||void 0},n)},T=({children:e,item:t,state:n})=>{let i=a(null),{rowProps:o}=d({node:t},n,i);return r.createElement(`tr`,{...o,ref:i},e)},E=({column:e,state:t})=>{let n=a(null),{columnHeaderProps:i}=u({node:e},t,n),o=t.sortDescriptor?.column===e.key,s=t.sortDescriptor?.direction===`ascending`?`▲`:`▼`;return r.createElement(`th`,{...i,className:e.props?.className||void 0,colSpan:e.colSpan??void 0,scope:`col`,ref:n},e.rendered,e.props?.allowsSorting&&r.createElement(`span`,{"aria-hidden":`true`,className:`table-sort-icon`},o?s:`⇅`))},D=({column:e,state:t})=>{let n=a(null),{columnHeaderProps:i}=u({node:e},t,n),{checkboxProps:o}=m(t);return r.createElement(`th`,{...i,className:`table-selection-cell`,scope:`col`,suppressHydrationWarning:!0,ref:n},r.createElement(j,{checkboxProps:o}))},O=({children:e,item:t,state:n})=>{let i=a(null),{rowProps:s}=f({node:t},n,i),c=n.selectionManager.isSelected(t.key);return r.createElement(`tr`,{...s,className:o({active:c},t.props?.className),ref:i},e)},k=({cell:e,stacked:t,state:n})=>{let i=a(null),{gridCellProps:o}=l({node:e},n,i);return r.createElement(`td`,{...o,className:e.props?.className||void 0,"data-cell":t&&e.column?.textValue||void 0,ref:i},e.rendered)},A=({cell:e,state:t})=>{let n=a(null),{gridCellProps:i}=l({node:e},t,n),{checkboxProps:o}=h({key:e.parentKey},t);return r.createElement(`td`,{...i,className:`table-selection-cell`,suppressHydrationWarning:!0,ref:n},r.createElement(j,{checkboxProps:o}))},j=({checkboxProps:e})=>{let t=S(e),n=a(null),{inputProps:i}=s(e,t,n);return r.createElement(`input`,{...i,"aria-describedby":void 0,className:`check-input`,ref:n})},M=y,N=g,P=_,F=b,I=v;export{M as a,N as i,F as n,C as o,P as r,I as t};
2
+ //# sourceMappingURL=table-DPLOygg0.js.map