@cimpress-ui/react 1.24.0 → 1.25.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 (101) hide show
  1. package/dist/commonjs/components/app-header/side-nav.d.ts +1 -9
  2. package/dist/commonjs/components/app-header/side-nav.d.ts.map +1 -1
  3. package/dist/commonjs/components/app-header/side-nav.js +3 -3
  4. package/dist/commonjs/components/app-header/side-nav.js.map +1 -1
  5. package/dist/commonjs/components/checkbox/checkbox.d.ts.map +1 -1
  6. package/dist/commonjs/components/checkbox/checkbox.js +1 -1
  7. package/dist/commonjs/components/checkbox/checkbox.js.map +1 -1
  8. package/dist/commonjs/components/combo-box/combo-box.d.ts +1 -0
  9. package/dist/commonjs/components/combo-box/combo-box.d.ts.map +1 -1
  10. package/dist/commonjs/components/combo-box/combo-box.js +23 -5
  11. package/dist/commonjs/components/combo-box/combo-box.js.map +1 -1
  12. package/dist/commonjs/components/internal/checkbox-indicator/checkbox-indicator.js +2 -4
  13. package/dist/commonjs/components/internal/checkbox-indicator/checkbox-indicator.js.map +1 -1
  14. package/dist/commonjs/components/internal/collapsible-list/collapsible-list.js.map +1 -1
  15. package/dist/commonjs/components/menu/menu.d.ts +14 -1
  16. package/dist/commonjs/components/menu/menu.d.ts.map +1 -1
  17. package/dist/commonjs/components/menu/menu.js +16 -2
  18. package/dist/commonjs/components/menu/menu.js.map +1 -1
  19. package/dist/commonjs/components/popover/popover.d.ts +10 -1
  20. package/dist/commonjs/components/popover/popover.d.ts.map +1 -1
  21. package/dist/commonjs/components/popover/popover.js +23 -2
  22. package/dist/commonjs/components/popover/popover.js.map +1 -1
  23. package/dist/commonjs/components/select/select.d.ts +1 -1
  24. package/dist/commonjs/components/select/select.d.ts.map +1 -1
  25. package/dist/commonjs/components/select/select.js +3 -2
  26. package/dist/commonjs/components/select/select.js.map +1 -1
  27. package/dist/commonjs/components/tag-field/tag-field.js +1 -1
  28. package/dist/commonjs/components/tag-field/tag-field.js.map +1 -1
  29. package/dist/commonjs/components/toast/toast-queue.d.ts +9 -7
  30. package/dist/commonjs/components/toast/toast-queue.d.ts.map +1 -1
  31. package/dist/commonjs/components/toast/toast-queue.js +6 -5
  32. package/dist/commonjs/components/toast/toast-queue.js.map +1 -1
  33. package/dist/commonjs/components/toast/toast-region.d.ts +1 -1
  34. package/dist/commonjs/components/toast/toast-region.d.ts.map +1 -1
  35. package/dist/commonjs/components/toast/toast-region.js +3 -3
  36. package/dist/commonjs/components/toast/toast-region.js.map +1 -1
  37. package/dist/commonjs/components/toast/toast.js +3 -3
  38. package/dist/commonjs/components/toast/toast.js.map +1 -1
  39. package/dist/commonjs/components/toast/types.d.ts +1 -1
  40. package/dist/commonjs/components/toast/types.d.ts.map +1 -1
  41. package/dist/commonjs/components/toast/types.js.map +1 -1
  42. package/dist/commonjs/components/typography/list.d.ts +31 -0
  43. package/dist/commonjs/components/typography/list.d.ts.map +1 -0
  44. package/dist/commonjs/components/typography/list.js +39 -0
  45. package/dist/commonjs/components/typography/list.js.map +1 -0
  46. package/dist/commonjs/index.d.ts +4 -3
  47. package/dist/commonjs/index.d.ts.map +1 -1
  48. package/dist/commonjs/index.js +5 -4
  49. package/dist/commonjs/index.js.map +1 -1
  50. package/dist/esm/components/app-header/side-nav.d.ts +1 -9
  51. package/dist/esm/components/app-header/side-nav.d.ts.map +1 -1
  52. package/dist/esm/components/app-header/side-nav.js +3 -3
  53. package/dist/esm/components/app-header/side-nav.js.map +1 -1
  54. package/dist/esm/components/checkbox/checkbox.d.ts.map +1 -1
  55. package/dist/esm/components/checkbox/checkbox.js +1 -1
  56. package/dist/esm/components/checkbox/checkbox.js.map +1 -1
  57. package/dist/esm/components/combo-box/combo-box.d.ts +1 -0
  58. package/dist/esm/components/combo-box/combo-box.d.ts.map +1 -1
  59. package/dist/esm/components/combo-box/combo-box.js +24 -6
  60. package/dist/esm/components/combo-box/combo-box.js.map +1 -1
  61. package/dist/esm/components/internal/checkbox-indicator/checkbox-indicator.js +2 -4
  62. package/dist/esm/components/internal/checkbox-indicator/checkbox-indicator.js.map +1 -1
  63. package/dist/esm/components/internal/collapsible-list/collapsible-list.js.map +1 -1
  64. package/dist/esm/components/menu/menu.d.ts +14 -1
  65. package/dist/esm/components/menu/menu.d.ts.map +1 -1
  66. package/dist/esm/components/menu/menu.js +17 -4
  67. package/dist/esm/components/menu/menu.js.map +1 -1
  68. package/dist/esm/components/popover/popover.d.ts +10 -1
  69. package/dist/esm/components/popover/popover.d.ts.map +1 -1
  70. package/dist/esm/components/popover/popover.js +25 -4
  71. package/dist/esm/components/popover/popover.js.map +1 -1
  72. package/dist/esm/components/select/select.d.ts +1 -1
  73. package/dist/esm/components/select/select.d.ts.map +1 -1
  74. package/dist/esm/components/select/select.js +4 -3
  75. package/dist/esm/components/select/select.js.map +1 -1
  76. package/dist/esm/components/tag-field/tag-field.js +1 -1
  77. package/dist/esm/components/tag-field/tag-field.js.map +1 -1
  78. package/dist/esm/components/toast/toast-queue.d.ts +9 -7
  79. package/dist/esm/components/toast/toast-queue.d.ts.map +1 -1
  80. package/dist/esm/components/toast/toast-queue.js +5 -4
  81. package/dist/esm/components/toast/toast-queue.js.map +1 -1
  82. package/dist/esm/components/toast/toast-region.d.ts +1 -1
  83. package/dist/esm/components/toast/toast-region.d.ts.map +1 -1
  84. package/dist/esm/components/toast/toast-region.js +3 -3
  85. package/dist/esm/components/toast/toast-region.js.map +1 -1
  86. package/dist/esm/components/toast/toast.js +2 -2
  87. package/dist/esm/components/toast/toast.js.map +1 -1
  88. package/dist/esm/components/toast/types.d.ts +1 -1
  89. package/dist/esm/components/toast/types.d.ts.map +1 -1
  90. package/dist/esm/components/toast/types.js.map +1 -1
  91. package/dist/esm/components/typography/list.d.ts +31 -0
  92. package/dist/esm/components/typography/list.d.ts.map +1 -0
  93. package/dist/esm/components/typography/list.js +31 -0
  94. package/dist/esm/components/typography/list.js.map +1 -0
  95. package/dist/esm/index.d.ts +4 -3
  96. package/dist/esm/index.d.ts.map +1 -1
  97. package/dist/esm/index.js +3 -2
  98. package/dist/esm/index.js.map +1 -1
  99. package/dist-styles/core.css +1 -1
  100. package/dist-styles/styles.css +1 -1
  101. package/package.json +6 -6
@@ -1,4 +1,4 @@
1
- import type { ReactNode, UIEventHandler } from 'react';
1
+ import { type ReactElement, type ReactNode, type UIEventHandler } from 'react';
2
2
  import { type MenuProps as RACMenuProps, type MenuItemProps as RACMenuItemProps, type MenuSectionProps as RACMenuSectionProps, type MenuTriggerProps as RACMenuTriggerProps } from 'react-aria-components';
3
3
  import type { CollectionItem, CollectionProps, Key, NavigationProps, StringLikeChildren } from '../types.js';
4
4
  export interface MenuRootProps extends Pick<RACMenuTriggerProps, 'onOpenChange' | 'isOpen' | 'defaultOpen'> {
@@ -14,6 +14,19 @@ export declare function MenuRoot(props: MenuRootProps): import("react/jsx-runtim
14
14
  export declare namespace MenuRoot {
15
15
  var displayName: string;
16
16
  }
17
+ export interface SubmenuRootProps {
18
+ /** The submenu trigger with its associated menu. Provide the item trigger as the first child, and the menu as the second child. */
19
+ children: ReactElement[];
20
+ }
21
+ /**
22
+ * Encapsulates a submenu trigger and its associated menu. The trigger must be a `MenuItem`, and the menu will be displayed when the trigger is hovered or focused.
23
+ *
24
+ * See [menu usage guidelines](https://ui.cimpress.io/components/menu/).
25
+ */
26
+ export declare function SubmenuRoot({ children, ...props }: SubmenuRootProps): import("react/jsx-runtime").JSX.Element;
27
+ export declare namespace SubmenuRoot {
28
+ var displayName: string;
29
+ }
17
30
  export interface MenuProps<T extends CollectionItem = CollectionItem> extends CollectionProps<T>, Pick<RACMenuProps<T>, 'selectedKeys' | 'onSelectionChange' | 'selectionMode'> {
18
31
  /**
19
32
  * The alignment of the menu overlay relative to its trigger.
@@ -1 +1 @@
1
- {"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAIL,KAAK,SAAS,IAAI,YAAY,EAE9B,KAAK,aAAa,IAAI,gBAAgB,EAEtC,KAAK,gBAAgB,IAAI,mBAAmB,EAE5C,KAAK,gBAAgB,IAAI,mBAAmB,EAE7C,MAAM,uBAAuB,CAAC;AAK/B,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,GAAG,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAG7G,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,mBAAmB,EAAE,cAAc,GAAG,QAAQ,GAAG,aAAa,CAAC;IACzG,2HAA2H;IAC3H,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAE5C;yBAFe,QAAQ;;;AAMxB,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CAClE,SAAQ,eAAe,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,cAAc,GAAG,mBAAmB,GAAG,eAAe,CAAC;IACzG;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB,wHAAwH;IACxH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,iEAAiE;IACjE,QAAQ,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC3C;AAED,qFAAqF;AACrF,wBAAgB,IAAI,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,KAAe,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC,2CAczF;yBAde,IAAI;;;AAkBpB,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CACzE,SAAQ,eAAe,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,cAAc,GAAG,mBAAmB,GAAG,eAAe,CAAC;IAChH,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,sDAAsD;AACtD,wBAAgB,WAAW,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,CAAC,CAAC,2CAa9G;yBAbe,WAAW;;;AAiB3B,MAAM,WAAW,aACf,SAAQ,eAAe,EAAE,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,UAAU,GAAG,cAAc,GAAG,YAAY,CAAC;IAC1G,0EAA0E;IAC1E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,gDAAgD;AAChD,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CA+BhF;yBA/Be,QAAQ"}
1
+ {"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAuC,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACpH,OAAO,EAIL,KAAK,SAAS,IAAI,YAAY,EAE9B,KAAK,aAAa,IAAI,gBAAgB,EAEtC,KAAK,gBAAgB,IAAI,mBAAmB,EAE5C,KAAK,gBAAgB,IAAI,mBAAmB,EAG7C,MAAM,uBAAuB,CAAC;AAK/B,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,GAAG,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAK7G,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,mBAAmB,EAAE,cAAc,GAAG,QAAQ,GAAG,aAAa,CAAC;IACzG,2HAA2H;IAC3H,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAE5C;yBAFe,QAAQ;;;AAMxB,MAAM,WAAW,gBAAgB;IAC/B,mIAAmI;IACnI,QAAQ,EAAE,YAAY,EAAE,CAAC;CAC1B;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CASnE;yBATe,WAAW;;;AAa3B,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CAClE,SAAQ,eAAe,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,cAAc,GAAG,mBAAmB,GAAG,eAAe,CAAC;IACzG;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB,wHAAwH;IACxH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,iEAAiE;IACjE,QAAQ,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC3C;AAED,qFAAqF;AACrF,wBAAgB,IAAI,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,KAAe,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC,2CAiBzF;yBAjBe,IAAI;;;AAqBpB,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CACzE,SAAQ,eAAe,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,cAAc,GAAG,mBAAmB,GAAG,eAAe,CAAC;IAChH,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,sDAAsD;AACtD,wBAAgB,WAAW,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,CAAC,CAAC,2CAa9G;yBAbe,WAAW;;;AAiB3B,MAAM,WAAW,aACf,SAAQ,eAAe,EAAE,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,UAAU,GAAG,cAAc,GAAG,YAAY,CAAC;IAC1G,0EAA0E;IAC1E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,gDAAgD;AAChD,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAiChF;yBAjCe,QAAQ"}
@@ -1,12 +1,14 @@
1
1
  'use client';
2
2
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
3
  import clsx from 'clsx';
4
- import { Collection as RACCollection, Header as RACHeader, Menu as RACMenu, MenuItem as RACMenuItem, MenuSection as RACMenuSection, MenuTrigger as RACMenuTrigger, Text as RACText, } from 'react-aria-components';
5
- import { IconCheckBold } from '../../icons/index.js';
4
+ import { Children, createContext, useContext } from 'react';
5
+ import { Collection as RACCollection, Header as RACHeader, Menu as RACMenu, MenuItem as RACMenuItem, MenuSection as RACMenuSection, MenuTrigger as RACMenuTrigger, SubmenuTrigger as RACSubmenuTrigger, Text as RACText, } from 'react-aria-components';
6
+ import { IconCheckBold, IconChevronRight } from '../../icons/index.js';
6
7
  import { isProduction } from '../../utils/is-production.js';
7
8
  import { CheckboxIndicator } from '../internal/checkbox-indicator/checkbox-indicator.js';
8
9
  import { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';
9
10
  import { textStyle } from '../typography/utils.js';
11
+ const SubmenuContext = createContext(false);
10
12
  /**
11
13
  * Encapsulates a menu trigger and its associated menu. The trigger can be any Cimpress UI button, and the menu will be displayed when the trigger is activated.
12
14
  *
@@ -16,12 +18,23 @@ export function MenuRoot(props) {
16
18
  return _jsx(RACMenuTrigger, { ...props });
17
19
  }
18
20
  MenuRoot.displayName = 'MenuRoot';
21
+ /**
22
+ * Encapsulates a submenu trigger and its associated menu. The trigger must be a `MenuItem`, and the menu will be displayed when the trigger is hovered or focused.
23
+ *
24
+ * See [menu usage guidelines](https://ui.cimpress.io/components/menu/).
25
+ */
26
+ export function SubmenuRoot({ children, ...props }) {
27
+ const [trigger, menu] = Children.toArray(children);
28
+ return (_jsxs(RACSubmenuTrigger, { ...props, delay: 0, children: [trigger, _jsx(SubmenuContext.Provider, { value: true, children: menu })] }));
29
+ }
30
+ SubmenuRoot.displayName = 'SubmenuRoot';
19
31
  /** Displays a collapsible list of options and actions that users can choose from. */
20
32
  export function Menu({ align = 'start', ...props }) {
21
33
  if (!isProduction() && props.items != null && typeof props.children !== 'function') {
22
34
  console.warn('`Menu` requires `children` to be a function when using `items` prop');
23
35
  }
24
- return (_jsx(CollapsibleList, { placement: `bottom ${align}`, offset: 5, maxHeight: 315, children: _jsx(RACMenu, { ...props, className: "cim-menu" }) }));
36
+ const isSubmenu = useContext(SubmenuContext);
37
+ return (_jsx(CollapsibleList, { placement: isSubmenu ? 'end top' : `bottom ${align}`, offset: isSubmenu ? -1 : 5, crossOffset: isSubmenu ? -8 : undefined, maxHeight: 315, children: _jsx(RACMenu, { ...props, className: "cim-menu" }) }));
25
38
  }
26
39
  Menu.displayName = 'Menu';
27
40
  /** Groups list items within `Menu` into a section. */
@@ -35,7 +48,7 @@ MenuSection.displayName = 'MenuSection';
35
48
  /** Renders a single list item within `Menu`. */
36
49
  export function MenuItem({ children, description, icon, ...props }) {
37
50
  const textValue = typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');
38
- return (_jsx(RACMenuItem, { ...props, className: "cim-menu-item cim-checkbox-indicator-wrapper", textValue: textValue, children: ({ isDisabled, isSelected, selectionMode }) => (_jsxs(_Fragment, { children: [selectionMode === 'single' && _jsx(IconCheckBold, { UNSAFE_className: "cim-menu-item-selection-indicator" }), selectionMode === 'multiple' && _jsx(CheckboxIndicator, { isSelected: isSelected }), icon, _jsxs("div", { className: "cim-menu-item-text", children: [_jsx(RACText, { slot: "label", className: textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' }), children: children }), description && (_jsx(RACText, { slot: "description", className: textStyle({ variant: 'small', tone: isDisabled ? 'muted' : 'subtle' }), children: description }))] })] })) }));
51
+ return (_jsx(RACMenuItem, { ...props, className: "cim-menu-item", textValue: textValue, children: ({ isDisabled, isSelected, selectionMode, hasSubmenu }) => (_jsxs(_Fragment, { children: [selectionMode === 'single' && _jsx(IconCheckBold, { UNSAFE_className: "cim-menu-item-selection-indicator" }), selectionMode === 'multiple' && _jsx(CheckboxIndicator, { isSelected: isSelected, isDisabled: isDisabled }), icon, _jsxs("div", { className: "cim-menu-item-text", children: [_jsx(RACText, { slot: "label", className: textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' }), children: children }), description && (_jsx(RACText, { slot: "description", className: textStyle({ variant: 'small', tone: isDisabled ? 'muted' : 'subtle' }), children: description }))] }), hasSubmenu && _jsx(IconChevronRight, { size: 24, UNSAFE_className: "cim-menu-item-submenu-indicator" })] })) }));
39
52
  }
40
53
  MenuItem.displayName = 'MenuItem';
41
54
  //# sourceMappingURL=menu.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ReactNode, UIEventHandler } from 'react';\nimport {\n Collection as RACCollection,\n Header as RACHeader,\n Menu as RACMenu,\n type MenuProps as RACMenuProps,\n MenuItem as RACMenuItem,\n type MenuItemProps as RACMenuItemProps,\n MenuSection as RACMenuSection,\n type MenuSectionProps as RACMenuSectionProps,\n MenuTrigger as RACMenuTrigger,\n type MenuTriggerProps as RACMenuTriggerProps,\n Text as RACText,\n} from 'react-aria-components';\nimport { IconCheckBold } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { CheckboxIndicator } from '../internal/checkbox-indicator/checkbox-indicator.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport type { CollectionItem, CollectionProps, Key, NavigationProps, StringLikeChildren } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface MenuRootProps extends Pick<RACMenuTriggerProps, 'onOpenChange' | 'isOpen' | 'defaultOpen'> {\n /** The menu trigger with its associated menu. Provide the trigger as the first child, and the menu as the second child. */\n children: ReactNode;\n}\n\n/**\n * Encapsulates a menu trigger and its associated menu. The trigger can be any Cimpress UI button, and the menu will be displayed when the trigger is activated.\n *\n * See [menu usage guidelines](https://ui.cimpress.io/components/menu/).\n */\nexport function MenuRoot(props: MenuRootProps) {\n return <RACMenuTrigger {...props} />;\n}\n\nMenuRoot.displayName = 'MenuRoot';\n\nexport interface MenuProps<T extends CollectionItem = CollectionItem>\n extends CollectionProps<T>, Pick<RACMenuProps<T>, 'selectedKeys' | 'onSelectionChange' | 'selectionMode'> {\n /**\n * The alignment of the menu overlay relative to its trigger.\n * @default 'start'\n */\n align?: 'start' | 'end';\n /** Handler that is called when an item is selected. When using `onAction`, all items must have an `id` prop defined. */\n onAction?: (key: Key) => void;\n /** Handler that is called when the list of items is scrolled. */\n onScroll?: UIEventHandler<HTMLDivElement>;\n}\n\n/** Displays a collapsible list of options and actions that users can choose from. */\nexport function Menu<T extends CollectionItem>({ align = 'start', ...props }: MenuProps<T>) {\n if (!isProduction() && props.items != null && typeof props.children !== 'function') {\n console.warn('`Menu` requires `children` to be a function when using `items` prop');\n }\n\n return (\n <CollapsibleList\n placement={`bottom ${align}`}\n offset={5} // 1px border + 4px actual offset\n maxHeight={315}\n >\n <RACMenu {...props} className=\"cim-menu\" />\n </CollapsibleList>\n );\n}\n\nMenu.displayName = 'Menu';\n\nexport interface MenuSectionProps<T extends CollectionItem = CollectionItem>\n extends CollectionProps<T>, Pick<RACMenuSectionProps<T>, 'selectedKeys' | 'onSelectionChange' | 'selectionMode'> {\n /** The ID of the section. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the section title. */\n title: string;\n}\n\n/** Groups list items within `Menu` into a section. */\nexport function MenuSection<T extends CollectionItem>({ title, children, items, ...props }: MenuSectionProps<T>) {\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`MenuSection` requires `children` to be a function when using `items` prop');\n }\n\n return (\n <RACMenuSection {...props} className=\"cim-menu-section\">\n <RACHeader className={clsx('cim-menu-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}>\n {title}\n </RACHeader>\n <RACCollection items={items}>{children}</RACCollection>\n </RACMenuSection>\n );\n}\n\nMenuSection.displayName = 'MenuSection';\n\nexport interface MenuItemProps\n extends NavigationProps, Pick<RACMenuItemProps, 'isDisabled' | 'onAction' | 'onHoverStart' | 'onHoverEnd'> {\n /** The ID of the item. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the label. */\n children: StringLikeChildren;\n /** Additional description for the menu item. */\n description?: string;\n /** An icon representing the menu item. */\n icon?: ReactNode;\n}\n\n/** Renders a single list item within `Menu`. */\nexport function MenuItem({ children, description, icon, ...props }: MenuItemProps) {\n const textValue =\n typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n return (\n <RACMenuItem {...props} className=\"cim-menu-item cim-checkbox-indicator-wrapper\" textValue={textValue}>\n {({ isDisabled, isSelected, selectionMode }) => (\n <>\n {selectionMode === 'single' && <IconCheckBold UNSAFE_className=\"cim-menu-item-selection-indicator\" />}\n {selectionMode === 'multiple' && <CheckboxIndicator isSelected={isSelected} />}\n\n {icon}\n\n <div className=\"cim-menu-item-text\">\n <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n {children}\n </RACText>\n\n {description && (\n <RACText\n slot=\"description\"\n className={textStyle({ variant: 'small', tone: isDisabled ? 'muted' : 'subtle' })}\n >\n {description}\n </RACText>\n )}\n </div>\n </>\n )}\n </RACMenuItem>\n );\n}\n\nMenuItem.displayName = 'MenuItem';\n"]}
1
+ {"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { Children, createContext, useContext, type ReactElement, type ReactNode, type UIEventHandler } from 'react';\nimport {\n Collection as RACCollection,\n Header as RACHeader,\n Menu as RACMenu,\n type MenuProps as RACMenuProps,\n MenuItem as RACMenuItem,\n type MenuItemProps as RACMenuItemProps,\n MenuSection as RACMenuSection,\n type MenuSectionProps as RACMenuSectionProps,\n MenuTrigger as RACMenuTrigger,\n type MenuTriggerProps as RACMenuTriggerProps,\n SubmenuTrigger as RACSubmenuTrigger,\n Text as RACText,\n} from 'react-aria-components';\nimport { IconCheckBold, IconChevronRight } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { CheckboxIndicator } from '../internal/checkbox-indicator/checkbox-indicator.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport type { CollectionItem, CollectionProps, Key, NavigationProps, StringLikeChildren } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nconst SubmenuContext = createContext(false);\n\nexport interface MenuRootProps extends Pick<RACMenuTriggerProps, 'onOpenChange' | 'isOpen' | 'defaultOpen'> {\n /** The menu trigger with its associated menu. Provide the trigger as the first child, and the menu as the second child. */\n children: ReactNode;\n}\n\n/**\n * Encapsulates a menu trigger and its associated menu. The trigger can be any Cimpress UI button, and the menu will be displayed when the trigger is activated.\n *\n * See [menu usage guidelines](https://ui.cimpress.io/components/menu/).\n */\nexport function MenuRoot(props: MenuRootProps) {\n return <RACMenuTrigger {...props} />;\n}\n\nMenuRoot.displayName = 'MenuRoot';\n\nexport interface SubmenuRootProps {\n /** The submenu trigger with its associated menu. Provide the item trigger as the first child, and the menu as the second child. */\n children: ReactElement[];\n}\n\n/**\n * Encapsulates a submenu trigger and its associated menu. The trigger must be a `MenuItem`, and the menu will be displayed when the trigger is hovered or focused.\n *\n * See [menu usage guidelines](https://ui.cimpress.io/components/menu/).\n */\nexport function SubmenuRoot({ children, ...props }: SubmenuRootProps) {\n const [trigger, menu] = Children.toArray(children) as ReactElement[];\n\n return (\n <RACSubmenuTrigger {...props} delay={0}>\n {trigger!}\n <SubmenuContext.Provider value={true}>{menu!}</SubmenuContext.Provider>\n </RACSubmenuTrigger>\n );\n}\n\nSubmenuRoot.displayName = 'SubmenuRoot';\n\nexport interface MenuProps<T extends CollectionItem = CollectionItem>\n extends CollectionProps<T>, Pick<RACMenuProps<T>, 'selectedKeys' | 'onSelectionChange' | 'selectionMode'> {\n /**\n * The alignment of the menu overlay relative to its trigger.\n * @default 'start'\n */\n align?: 'start' | 'end';\n /** Handler that is called when an item is selected. When using `onAction`, all items must have an `id` prop defined. */\n onAction?: (key: Key) => void;\n /** Handler that is called when the list of items is scrolled. */\n onScroll?: UIEventHandler<HTMLDivElement>;\n}\n\n/** Displays a collapsible list of options and actions that users can choose from. */\nexport function Menu<T extends CollectionItem>({ align = 'start', ...props }: MenuProps<T>) {\n if (!isProduction() && props.items != null && typeof props.children !== 'function') {\n console.warn('`Menu` requires `children` to be a function when using `items` prop');\n }\n\n const isSubmenu = useContext(SubmenuContext);\n\n return (\n <CollapsibleList\n placement={isSubmenu ? 'end top' : `bottom ${align}`}\n offset={isSubmenu ? -1 : 5} // 1px border + 4px actual offset\n crossOffset={isSubmenu ? -8 : undefined}\n maxHeight={315}\n >\n <RACMenu {...props} className=\"cim-menu\" />\n </CollapsibleList>\n );\n}\n\nMenu.displayName = 'Menu';\n\nexport interface MenuSectionProps<T extends CollectionItem = CollectionItem>\n extends CollectionProps<T>, Pick<RACMenuSectionProps<T>, 'selectedKeys' | 'onSelectionChange' | 'selectionMode'> {\n /** The ID of the section. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the section title. */\n title: string;\n}\n\n/** Groups list items within `Menu` into a section. */\nexport function MenuSection<T extends CollectionItem>({ title, children, items, ...props }: MenuSectionProps<T>) {\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`MenuSection` requires `children` to be a function when using `items` prop');\n }\n\n return (\n <RACMenuSection {...props} className=\"cim-menu-section\">\n <RACHeader className={clsx('cim-menu-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}>\n {title}\n </RACHeader>\n <RACCollection items={items}>{children}</RACCollection>\n </RACMenuSection>\n );\n}\n\nMenuSection.displayName = 'MenuSection';\n\nexport interface MenuItemProps\n extends NavigationProps, Pick<RACMenuItemProps, 'isDisabled' | 'onAction' | 'onHoverStart' | 'onHoverEnd'> {\n /** The ID of the item. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the label. */\n children: StringLikeChildren;\n /** Additional description for the menu item. */\n description?: string;\n /** An icon representing the menu item. */\n icon?: ReactNode;\n}\n\n/** Renders a single list item within `Menu`. */\nexport function MenuItem({ children, description, icon, ...props }: MenuItemProps) {\n const textValue =\n typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n return (\n <RACMenuItem {...props} className=\"cim-menu-item\" textValue={textValue}>\n {({ isDisabled, isSelected, selectionMode, hasSubmenu }) => (\n <>\n {selectionMode === 'single' && <IconCheckBold UNSAFE_className=\"cim-menu-item-selection-indicator\" />}\n {selectionMode === 'multiple' && <CheckboxIndicator isSelected={isSelected} isDisabled={isDisabled} />}\n\n {icon}\n\n <div className=\"cim-menu-item-text\">\n <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n {children}\n </RACText>\n\n {description && (\n <RACText\n slot=\"description\"\n className={textStyle({ variant: 'small', tone: isDisabled ? 'muted' : 'subtle' })}\n >\n {description}\n </RACText>\n )}\n </div>\n\n {hasSubmenu && <IconChevronRight size={24} UNSAFE_className=\"cim-menu-item-submenu-indicator\" />}\n </>\n )}\n </RACMenuItem>\n );\n}\n\nMenuItem.displayName = 'MenuItem';\n"]}
@@ -1,4 +1,4 @@
1
- import type { ReactNode, RefObject } from 'react';
1
+ import { type ReactNode, type RefObject } from 'react';
2
2
  import { type PopoverProps as RACPopoverProps } from 'react-aria-components';
3
3
  import type { AriaLabelingProps, CommonProps } from '../types.js';
4
4
  export interface PopoverRootProps {
@@ -48,6 +48,15 @@ export interface PopoverProps extends CommonProps, AriaLabelingProps, Pick<RACPo
48
48
  * When used within `PopoverRoot`, this is set automatically. Provide `triggerRef` only when `Popover` is used standalone.
49
49
  */
50
50
  triggerRef?: RefObject<Element | null>;
51
+ /**
52
+ * Allows the popover to be non-modal, meaning it will not block interactions outside the popover.
53
+ * This is non-default behavior and can lead to accessibility and interaction issues. Use only if you have a specific, valid reason.
54
+ */
55
+ UNSTABLE_isNonModal?: boolean;
56
+ /**
57
+ * Limits the maximum height of the popover.
58
+ */
59
+ UNSTABLE_maxHeight?: number;
51
60
  }
52
61
  /**
53
62
  * Displays an overlay element positioned relative to a trigger.
@@ -1 +1 @@
1
- {"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../src/components/popover/popover.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAGL,KAAK,YAAY,IAAI,eAAe,EAIrC,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAGlE,MAAM,WAAW,gBAAgB;IAC/B,oIAAoI;IACpI,QAAQ,EAAE,SAAS,CAAC;IACpB,gDAAgD;IAChD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oEAAoE;IACpE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAElD;yBAFe,WAAW;;;AAM3B,MAAM,WAAW,kBAAkB;IACjC,sCAAsC;IACtC,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,YAAa,SAAQ,WAAW,EAAE,iBAAiB,EAAE,IAAI,CAAC,eAAe,EAAE,WAAW,CAAC;IACtG,yGAAyG;IACzG,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,WAAW,EAAE,kBAAkB,KAAK,SAAS,CAAC,CAAC;IACvE,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;CACxC;AA8DD;;;;GAIG;AACH,QAAA,MAAM,QAAQ,0GAAiC,CAAC;AAEhD,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,CAAC"}
1
+ {"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../src/components/popover/popover.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA0C,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE/F,OAAO,EAGL,KAAK,YAAY,IAAI,eAAe,EAKrC,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAGlE,MAAM,WAAW,gBAAgB;IAC/B,oIAAoI;IACpI,QAAQ,EAAE,SAAS,CAAC;IACpB,gDAAgD;IAChD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oEAAoE;IACpE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAElD;yBAFe,WAAW;;;AAM3B,MAAM,WAAW,kBAAkB;IACjC,sCAAsC;IACtC,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,YAAa,SAAQ,WAAW,EAAE,iBAAiB,EAAE,IAAI,CAAC,eAAe,EAAE,WAAW,CAAC;IACtG,yGAAyG;IACzG,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,WAAW,EAAE,kBAAkB,KAAK,SAAS,CAAC,CAAC;IACvE,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IACvC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAkGD;;;;GAIG;AACH,QAAA,MAAM,QAAQ,0GAAiC,CAAC;AAEhD,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,CAAC"}
@@ -1,7 +1,9 @@
1
1
  'use client';
2
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
3
  import clsx from 'clsx';
4
- import { DialogTrigger as RACDialogTrigger, Popover as RACPopover, OverlayArrow as RACOverlayArrow, Dialog as RACDialog, Heading as RACHeading, } from 'react-aria-components';
4
+ import { useContext, useMemo } from 'react';
5
+ import { useInteractOutside, useObjectRef } from 'react-aria';
6
+ import { DialogTrigger as RACDialogTrigger, Popover as RACPopover, OverlayArrow as RACOverlayArrow, Heading as RACHeading, OverlayTriggerStateContext as RACOverlayTriggerStateContext, Dialog as RACDialog, } from 'react-aria-components';
5
7
  import { forwardRef } from '../../forward-ref.js';
6
8
  import { useProductionWarning } from '../../utils/use-production-warning.js';
7
9
  import { FocusableContainer } from '../internal/focusable-container/focusable-container.js';
@@ -14,14 +16,33 @@ export function PopoverRoot(props) {
14
16
  return _jsx(RACDialogTrigger, { ...props });
15
17
  }
16
18
  PopoverRoot.displayName = 'PopoverRoot';
17
- function Popover({ children, title, UNSAFE_className, UNSAFE_style, isOpen, defaultOpen, onOpenChange, placement, triggerRef, ...props }, ref) {
19
+ function Popover({ children, title, UNSAFE_className, UNSAFE_style, isOpen, defaultOpen, onOpenChange, placement, triggerRef, UNSTABLE_isNonModal, UNSTABLE_maxHeight, ...props }, ref) {
18
20
  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
19
21
  useProductionWarning(() => {
20
22
  if (!title && !ariaLabel && !ariaLabelledBy) {
21
23
  console.warn('Popover requires one of title / aria-label / aria-labelledby for accessibility');
22
24
  }
23
25
  }, [title, ariaLabel, ariaLabelledBy]);
24
- return (_jsxs(RACPopover, { className: clsx('cim-popover', UNSAFE_className), style: UNSAFE_style, isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: onOpenChange, triggerRef: triggerRef, placement: placement, containerPadding: 16, offset: 5, arrowBoundaryOffset: 4, "data-cim-style-root": true, children: [_jsx(RACOverlayArrow, { className: "cim-popover-arrow", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "10", viewBox: "0 0 16 10", children: _jsx("path", { d: "M16 0L8.7809 9.0239C8.3805 9.5243 7.6195 9.5243 7.2191 9.0239L0 0" }) }) }), _jsx(RACDialog, { ...props, ref: ref, className: "cim-popover-dialog", children: (renderProps) => (_jsxs(_Fragment, { children: [title && (_jsx(RACHeading, { slot: "title", className: clsx('cim-popover-title', textStyle({ variant: 'title-5' })), children: title })), _jsx(FocusableContainer, { className: "cim-popover-content", scrollDirection: "vertical", children: typeof children === 'function' ? children(renderProps) : children })] })) })] }));
26
+ const popoverRef = useObjectRef(ref);
27
+ return (_jsx(RACPopover, { ref: popoverRef, className: clsx('cim-popover', UNSAFE_className), style: UNSAFE_style, isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: onOpenChange, triggerRef: triggerRef, placement: placement, containerPadding: 16, offset: 5, arrowBoundaryOffset: 4, isNonModal: UNSTABLE_isNonModal, maxHeight: UNSTABLE_maxHeight, "data-cim-style-root": true, children: _jsx(PopoverInner, { title: title, children: children, popoverRef: popoverRef, isNonModal: UNSTABLE_isNonModal }) }));
28
+ }
29
+ function PopoverInner({ title, children, popoverRef, isNonModal }) {
30
+ const overlayTriggerState = useContext(RACOverlayTriggerStateContext);
31
+ const renderProps = useMemo(() => ({ close: () => overlayTriggerState?.close() }), [overlayTriggerState]);
32
+ // For non-modal popovers, React Aria does not handle outside interaction by default,
33
+ // so we use a custom handler here. Modal popovers already handle this internally.
34
+ useInteractOutside({
35
+ ref: popoverRef,
36
+ onInteractOutside: () => {
37
+ // Delay closing to prevent race conditions: when the trigger is pressed, both the trigger and the interact outside handler fire.
38
+ // Without this delay, the popover may immediately reopen after closing.
39
+ requestAnimationFrame(() => {
40
+ overlayTriggerState?.close();
41
+ });
42
+ },
43
+ isDisabled: !isNonModal,
44
+ });
45
+ return (_jsxs(_Fragment, { children: [_jsx(RACOverlayArrow, { className: "cim-popover-arrow", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "10", viewBox: "0 0 16 10", children: _jsx("path", { d: "M16 0L8.7809 9.0239C8.3805 9.5243 7.6195 9.5243 7.2191 9.0239L0 0" }) }) }), _jsxs(RACDialog, { className: "cim-popover-body", children: [title && (_jsx(RACHeading, { slot: "title", className: clsx('cim-popover-title', textStyle({ variant: 'title-5' })), children: title })), _jsx(FocusableContainer, { className: "cim-popover-content", scrollDirection: "vertical", children: typeof children === 'function' ? children(renderProps) : children })] })] }));
25
46
  }
26
47
  /**
27
48
  * Displays an overlay element positioned relative to a trigger.
@@ -1 +1 @@
1
- {"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../../src/components/popover/popover.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EACL,aAAa,IAAI,gBAAgB,EACjC,OAAO,IAAI,UAAU,EAErB,YAAY,IAAI,eAAe,EAC/B,MAAM,IAAI,SAAS,EACnB,OAAO,IAAI,UAAU,GACtB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,wDAAwD,CAAC;AAE5F,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAanD;;;GAGG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,OAAO,KAAC,gBAAgB,OAAK,KAAK,GAAI,CAAC;AACzC,CAAC;AAED,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AAkCxC,SAAS,OAAO,CACd,EACE,QAAQ,EACR,KAAK,EACL,gBAAgB,EAChB,YAAY,EACZ,MAAM,EACN,WAAW,EACX,YAAY,EACZ,SAAS,EACT,UAAU,EACV,GAAG,KAAK,EACK,EACf,GAA8B;IAE9B,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,oBAAoB,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,gFAAgF,CAAC,CAAC;QACjG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,OAAO,CACL,MAAC,UAAU,IACT,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,gBAAgB,CAAC,EAChD,KAAK,EAAE,YAAY,EACnB,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,EAAE,EACpB,MAAM,EAAE,CAAC,EACT,mBAAmB,EAAE,CAAC,0CAGtB,KAAC,eAAe,IAAC,SAAS,EAAC,mBAAmB,YAC5C,cAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,YAChF,eAAM,CAAC,EAAC,mEAAmE,GAAG,GAC1E,GACU,EAClB,KAAC,SAAS,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,oBAAoB,YAC3D,CAAC,WAAW,EAAE,EAAE,CAAC,CAChB,8BACG,KAAK,IAAI,CACR,KAAC,UAAU,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,YAC7F,KAAK,GACK,CACd,EACD,KAAC,kBAAkB,IAAC,SAAS,EAAC,qBAAqB,EAAC,eAAe,EAAC,UAAU,YAC3E,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,QAAQ,GAC/C,IACpB,CACJ,GACS,IACD,CACd,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,QAAQ,GAAG,UAAU,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;AAEhD,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode, RefObject } from 'react';\nimport {\n DialogTrigger as RACDialogTrigger,\n Popover as RACPopover,\n type PopoverProps as RACPopoverProps,\n OverlayArrow as RACOverlayArrow,\n Dialog as RACDialog,\n Heading as RACHeading,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { FocusableContainer } from '../internal/focusable-container/focusable-container.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface PopoverRootProps {\n /** The popover trigger with its associated popover. Provide the trigger as the first child, and the popover as the second child. */\n children: ReactNode;\n /** Whether the popover is open (controlled). */\n isOpen?: boolean;\n /** Whether the popover is open by default (uncontrolled). */\n defaultOpen?: boolean;\n /** Handler that is called when the popover's open state changes. */\n onOpenChange?: (isOpen: boolean) => void;\n}\n\n/**\n * Encapsulates a popover trigger and its associated popover.\n * The trigger can be any Cimpress UI button, and the popover will be displayed when the trigger is activated.\n */\nexport function PopoverRoot(props: PopoverRootProps) {\n return <RACDialogTrigger {...props} />;\n}\n\nPopoverRoot.displayName = 'PopoverRoot';\n\nexport interface PopoverRenderProps {\n /** Closes the popover when called. */\n close: () => void;\n}\n\nexport interface PopoverProps extends CommonProps, AriaLabelingProps, Pick<RACPopoverProps, 'placement'> {\n /** The contents of the popover. A function may be provided to access a function to close the popover. */\n children: ReactNode | ((renderProps: PopoverRenderProps) => ReactNode);\n /** The title of the popover. */\n title?: string;\n /**\n * Whether the popover is open (controlled).\n * If using `PopoverRoot`, this prop has no effect - provide `isOpen` to `PopoverRoot` instead.\n */\n isOpen?: boolean;\n /**\n * Whether the popover is open by default (uncontrolled).\n * If using `PopoverRoot`, this prop has no effect - provide `defaultOpen` to `PopoverRoot` instead.\n */\n defaultOpen?: boolean;\n /**\n * Handler that is called when the popover's open state changes.\n * If using `PopoverRoot`, this prop has no effect - provide `onOpenChange` to `PopoverRoot` instead.\n */\n onOpenChange?: (isOpen: boolean) => void;\n /**\n * The ref for the element which the popover positions itself with respect to.\n * When used within `PopoverRoot`, this is set automatically. Provide `triggerRef` only when `Popover` is used standalone.\n */\n triggerRef?: RefObject<Element | null>;\n}\n\nfunction Popover(\n {\n children,\n title,\n UNSAFE_className,\n UNSAFE_style,\n isOpen,\n defaultOpen,\n onOpenChange,\n placement,\n triggerRef,\n ...props\n }: PopoverProps,\n ref: ForwardedRef<HTMLElement>,\n) {\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!title && !ariaLabel && !ariaLabelledBy) {\n console.warn('Popover requires one of title / aria-label / aria-labelledby for accessibility');\n }\n }, [title, ariaLabel, ariaLabelledBy]);\n\n return (\n <RACPopover\n className={clsx('cim-popover', UNSAFE_className)}\n style={UNSAFE_style}\n isOpen={isOpen}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n triggerRef={triggerRef}\n placement={placement}\n containerPadding={16}\n offset={5} // 1px border + 4px actual offset\n arrowBoundaryOffset={4} // offset by border radius so that the arrow is never positioned over the rounded corner\n data-cim-style-root\n >\n <RACOverlayArrow className=\"cim-popover-arrow\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"10\" viewBox=\"0 0 16 10\">\n <path d=\"M16 0L8.7809 9.0239C8.3805 9.5243 7.6195 9.5243 7.2191 9.0239L0 0\" />\n </svg>\n </RACOverlayArrow>\n <RACDialog {...props} ref={ref} className=\"cim-popover-dialog\">\n {(renderProps) => (\n <>\n {title && (\n <RACHeading slot=\"title\" className={clsx('cim-popover-title', textStyle({ variant: 'title-5' }))}>\n {title}\n </RACHeading>\n )}\n <FocusableContainer className=\"cim-popover-content\" scrollDirection=\"vertical\">\n {typeof children === 'function' ? children(renderProps) : children}\n </FocusableContainer>\n </>\n )}\n </RACDialog>\n </RACPopover>\n );\n}\n\n/**\n * Displays an overlay element positioned relative to a trigger.\n *\n * See [popover usage guidelines](https://ui.cimpress.io/components/popover/).\n */\nconst _Popover = forwardRef(Popover, 'Popover');\n\nexport { _Popover as Popover };\n"]}
1
+ {"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../../src/components/popover/popover.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useContext, useMemo, type ForwardedRef, type ReactNode, type RefObject } from 'react';\nimport { useInteractOutside, useObjectRef } from 'react-aria';\nimport {\n DialogTrigger as RACDialogTrigger,\n Popover as RACPopover,\n type PopoverProps as RACPopoverProps,\n OverlayArrow as RACOverlayArrow,\n Heading as RACHeading,\n OverlayTriggerStateContext as RACOverlayTriggerStateContext,\n Dialog as RACDialog,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { FocusableContainer } from '../internal/focusable-container/focusable-container.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface PopoverRootProps {\n /** The popover trigger with its associated popover. Provide the trigger as the first child, and the popover as the second child. */\n children: ReactNode;\n /** Whether the popover is open (controlled). */\n isOpen?: boolean;\n /** Whether the popover is open by default (uncontrolled). */\n defaultOpen?: boolean;\n /** Handler that is called when the popover's open state changes. */\n onOpenChange?: (isOpen: boolean) => void;\n}\n\n/**\n * Encapsulates a popover trigger and its associated popover.\n * The trigger can be any Cimpress UI button, and the popover will be displayed when the trigger is activated.\n */\nexport function PopoverRoot(props: PopoverRootProps) {\n return <RACDialogTrigger {...props} />;\n}\n\nPopoverRoot.displayName = 'PopoverRoot';\n\nexport interface PopoverRenderProps {\n /** Closes the popover when called. */\n close: () => void;\n}\n\nexport interface PopoverProps extends CommonProps, AriaLabelingProps, Pick<RACPopoverProps, 'placement'> {\n /** The contents of the popover. A function may be provided to access a function to close the popover. */\n children: ReactNode | ((renderProps: PopoverRenderProps) => ReactNode);\n /** The title of the popover. */\n title?: string;\n /**\n * Whether the popover is open (controlled).\n * If using `PopoverRoot`, this prop has no effect - provide `isOpen` to `PopoverRoot` instead.\n */\n isOpen?: boolean;\n /**\n * Whether the popover is open by default (uncontrolled).\n * If using `PopoverRoot`, this prop has no effect - provide `defaultOpen` to `PopoverRoot` instead.\n */\n defaultOpen?: boolean;\n /**\n * Handler that is called when the popover's open state changes.\n * If using `PopoverRoot`, this prop has no effect - provide `onOpenChange` to `PopoverRoot` instead.\n */\n onOpenChange?: (isOpen: boolean) => void;\n /**\n * The ref for the element which the popover positions itself with respect to.\n * When used within `PopoverRoot`, this is set automatically. Provide `triggerRef` only when `Popover` is used standalone.\n */\n triggerRef?: RefObject<Element | null>;\n /**\n * Allows the popover to be non-modal, meaning it will not block interactions outside the popover.\n * This is non-default behavior and can lead to accessibility and interaction issues. Use only if you have a specific, valid reason.\n */\n UNSTABLE_isNonModal?: boolean;\n /**\n * Limits the maximum height of the popover.\n */\n UNSTABLE_maxHeight?: number;\n}\n\nfunction Popover(\n {\n children,\n title,\n UNSAFE_className,\n UNSAFE_style,\n isOpen,\n defaultOpen,\n onOpenChange,\n placement,\n triggerRef,\n UNSTABLE_isNonModal,\n UNSTABLE_maxHeight,\n ...props\n }: PopoverProps,\n ref: ForwardedRef<HTMLElement>,\n) {\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!title && !ariaLabel && !ariaLabelledBy) {\n console.warn('Popover requires one of title / aria-label / aria-labelledby for accessibility');\n }\n }, [title, ariaLabel, ariaLabelledBy]);\n\n const popoverRef = useObjectRef(ref);\n\n return (\n <RACPopover\n ref={popoverRef}\n className={clsx('cim-popover', UNSAFE_className)}\n style={UNSAFE_style}\n isOpen={isOpen}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n triggerRef={triggerRef}\n placement={placement}\n containerPadding={16}\n offset={5} // 1px border + 4px actual offset\n arrowBoundaryOffset={4} // offset by border radius so that the arrow is never positioned over the rounded corner\n isNonModal={UNSTABLE_isNonModal}\n maxHeight={UNSTABLE_maxHeight}\n data-cim-style-root\n >\n <PopoverInner title={title} children={children} popoverRef={popoverRef} isNonModal={UNSTABLE_isNonModal} />\n </RACPopover>\n );\n}\n\ninterface PopoverInnerProps {\n title?: string;\n children: ReactNode | ((renderProps: PopoverRenderProps) => ReactNode);\n popoverRef: RefObject<HTMLElement>;\n isNonModal?: boolean;\n}\n\nfunction PopoverInner({ title, children, popoverRef, isNonModal }: PopoverInnerProps) {\n const overlayTriggerState = useContext(RACOverlayTriggerStateContext);\n const renderProps = useMemo(() => ({ close: () => overlayTriggerState?.close() }), [overlayTriggerState]);\n\n // For non-modal popovers, React Aria does not handle outside interaction by default,\n // so we use a custom handler here. Modal popovers already handle this internally.\n useInteractOutside({\n ref: popoverRef,\n onInteractOutside: () => {\n // Delay closing to prevent race conditions: when the trigger is pressed, both the trigger and the interact outside handler fire.\n // Without this delay, the popover may immediately reopen after closing.\n requestAnimationFrame(() => {\n overlayTriggerState?.close();\n });\n },\n isDisabled: !isNonModal,\n });\n\n return (\n <>\n <RACOverlayArrow className=\"cim-popover-arrow\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"10\" viewBox=\"0 0 16 10\">\n <path d=\"M16 0L8.7809 9.0239C8.3805 9.5243 7.6195 9.5243 7.2191 9.0239L0 0\" />\n </svg>\n </RACOverlayArrow>\n\n <RACDialog className=\"cim-popover-body\">\n {title && (\n <RACHeading slot=\"title\" className={clsx('cim-popover-title', textStyle({ variant: 'title-5' }))}>\n {title}\n </RACHeading>\n )}\n <FocusableContainer className=\"cim-popover-content\" scrollDirection=\"vertical\">\n {typeof children === 'function' ? children(renderProps) : children}\n </FocusableContainer>\n </RACDialog>\n </>\n );\n}\n\n/**\n * Displays an overlay element positioned relative to a trigger.\n *\n * See [popover usage guidelines](https://ui.cimpress.io/components/popover/).\n */\nconst _Popover = forwardRef(Popover, 'Popover');\n\nexport { _Popover as Popover };\n"]}
@@ -31,7 +31,7 @@ export interface SelectProps<T extends CollectionItem = CollectionItem, M extend
31
31
  * How the selected value is displayed.
32
32
  * @default 'text'
33
33
  */
34
- UNSTABLE_valueDisplay?: 'text' | 'tags';
34
+ UNSTABLE_valueDisplay?: 'text' | 'tags' | 'count';
35
35
  /**
36
36
  * Whether the list of options should be filterable.
37
37
  * @default false
@@ -1 +1 @@
1
- {"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,cAAc,EAKpB,MAAM,OAAO,CAAC;AAEf,OAAO,EAQL,KAAK,gBAAgB,IAAI,mBAAmB,EAO5C,KAAK,WAAW,IAAI,cAAc,EAMnC,MAAM,uBAAuB,CAAC;AAgB/B,OAAO,KAAK,EACV,QAAQ,EACR,qBAAqB,EACrB,cAAc,EACd,eAAe,EACf,WAAW,EACX,UAAU,EACV,GAAG,EACH,kBAAkB,EACnB,MAAM,aAAa,CAAC;AAKrB,MAAM,MAAM,4BAA4B,GAAG,QAAQ,GAAG,UAAU,CAAC;AAUjE,MAAM,WAAW,WAAW,CAC1B,CAAC,SAAS,cAAc,GAAG,cAAc,EACzC,CAAC,SAAS,4BAA4B,GAAG,QAAQ,CAEjD,SACE,WAAW,EACX,UAAU,CAAC,CAAC,SAAS,QAAQ,GAAG,GAAG,GAAG,GAAG,EAAE,CAAC,EAC5C,eAAe,CAAC,CAAC,CAAC,EAClB,qBAAqB,EACrB,QAAQ,CAAC,SAAS,CAAC,EACnB,IAAI,CACF,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,EAClB,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,cAAc,GACd,WAAW,GACX,aAAa,GACb,SAAS,GACT,QAAQ,GACR,cAAc,CACjB;IACH,iEAAiE;IACjE,WAAW,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC;IACzB,iEAAiE;IACjE,kBAAkB,CAAC,EAAE,GAAG,CAAC;IACzB,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC1C;;;OAGG;IACH,sBAAsB,CAAC,EAAE,CAAC,CAAC;IAC3B,4CAA4C;IAC5C,cAAc,CAAC,EAAE,CAAC,SAAS,QAAQ,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,EAAE,CAAC;IACzD,sDAAsD;IACtD,qBAAqB,CAAC,EAAE,CAAC,SAAS,QAAQ,GAAG,GAAG,GAAG,GAAG,EAAE,CAAC;IACzD,qDAAqD;IACrD,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,SAAS,QAAQ,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,EAAE,KAAK,IAAI,CAAC;IAC3E;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IAClD;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,kDAAkD;IAClD,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,4DAA4D;IAC5D,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,4DAA4D;IAC5D,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,qEAAqE;IACrE,eAAe,CAAC,EAAE,CAAC,CAAC,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE;QAAE,GAAG,EAAE,GAAG,CAAC;QAAC,KAAK,EAAE,CAAC,GAAG,IAAI,CAAA;KAAE,KAAK,OAAO,CAAC,GAAG,IAAI,CAAC;IACnH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,4DAA4D;AAC5D,MAAM,WAAW,SAAS;IACxB,8DAA8D;IAC9D,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAkUD;;;;GAIG;AACH,QAAA,MAAM,OAAO,GArUG,CAAC,SAAS,cAAc,EAAE,CAAC,SAAS,4BAA4B,6KAqUpB,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,CAAC;AAE7B,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;IAC9G,0EAA0E;IAC1E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;CAC9B;AAED,kDAAkD;AAClD,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAiBjE;yBAjBe,UAAU;;;AAqB1B,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACtF,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wDAAwD;AACxD,wBAAgB,aAAa,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,CAAC,CAAC,CAAC,2CAelH;yBAfe,aAAa"}
@@ -7,11 +7,12 @@ import { useFilter, useId, useInteractOutside, usePreventScroll } from 'react-ar
7
7
  import { Autocomplete as RACAutocomplete, Button as RACButton, Collection as RACCollection, Header as RACHeader, LabelContext as RACLabelContext, ListBox as RACListBox, ListBoxItem as RACListBoxItem, ListBoxLoadMoreItem as RACListBoxLoadMoreItem, ListBoxSection as RACListBoxSection, ListLayout as RACListLayout, Select as RACSelect, SelectStateContext as RACSelectStateContext, SelectValue as RACSelectValue, Text as RACText, Virtualizer as RACVirtualizer, useSlottedContext, } from 'react-aria-components';
8
8
  import { forwardRef } from '../../forward-ref.js';
9
9
  import { useLocalizedMessages } from '../../i18n/index.js';
10
- import { IconCheck, IconChevronDown } from '../../icons/index.js';
10
+ import { IconCheckBold, IconChevronDown } from '../../icons/index.js';
11
11
  import { isProduction } from '../../utils/is-production.js';
12
12
  import { stringLikeChildrenToString } from '../../utils/string-like-children-to-string.js';
13
13
  import { useProductionWarning } from '../../utils/use-production-warning.js';
14
14
  import { withStyleProps } from '../../with-style-props.js';
15
+ import { CheckboxIndicator } from '../internal/checkbox-indicator/checkbox-indicator.js';
15
16
  import { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';
16
17
  import { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';
17
18
  import { XButton } from '../internal/x-button/x-button.js';
@@ -69,7 +70,7 @@ const SelectButton = forwardRef(({ valueDisplay, isClearable }, ref) => {
69
70
  const triggerRef = useRef(null);
70
71
  const collectionMessages = useLocalizedMessages('UNSTABLE_collection');
71
72
  return (_jsxs("div", { className: "cim-select-button", children: [_jsx(RACButton, { ref: mergeRefs(ref, triggerRef), className: "cim-select-button-trigger" }), _jsx(RACSelectValue, { className: clsx('cim-select-button-value', textStyle({ variant: 'body', alignment: 'start' })), children: ({ selectedText, defaultChildren, isPlaceholder, state }) => {
72
- if (valueDisplay === 'tags' && state.selectedItems.length > 0) {
73
+ if ((valueDisplay === 'tags' && state.selectedItems.length > 0) || valueDisplay === 'count') {
73
74
  return (_jsx(Text, { as: "span", variant: "body", tone: "subtle", children: collectionMessages.format('itemsSelected', { selectedItemCount: state.selectedItems.length }) }));
74
75
  }
75
76
  return isPlaceholder ? defaultChildren : selectedText;
@@ -140,7 +141,7 @@ export { _Select as Select };
140
141
  /** Renders a single list item within `Select`. */
141
142
  export function SelectItem({ children, ...props }) {
142
143
  const textValue = stringLikeChildrenToString(children);
143
- return (_jsx(RACListBoxItem, { ...props, className: "cim-select-item", textValue: textValue, children: ({ isDisabled }) => (_jsxs(_Fragment, { children: [_jsx(IconCheck, {}), _jsx(RACText, { slot: "label", className: textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' }), children: children })] })) }));
144
+ return (_jsx(RACListBoxItem, { ...props, className: "cim-select-item", textValue: textValue, children: ({ isDisabled, isSelected, selectionMode }) => (_jsxs(_Fragment, { children: [selectionMode === 'single' && _jsx(IconCheckBold, {}), selectionMode === 'multiple' && _jsx(CheckboxIndicator, { isSelected: isSelected, isDisabled: isDisabled }), _jsx(RACText, { slot: "label", className: textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' }), children: children })] })) }));
144
145
  }
145
146
  SelectItem.displayName = 'SelectItem';
146
147
  /** Groups list items within `Select` into a section. */
@@ -1 +1 @@
1
- {"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { mergeRefs } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport {\n type ForwardedRef,\n type ReactNode,\n type UIEventHandler,\n useContext,\n useImperativeHandle,\n useMemo,\n useRef,\n} from 'react';\nimport { useFilter, useId, useInteractOutside, usePreventScroll } from 'react-aria';\nimport {\n Autocomplete as RACAutocomplete,\n Button as RACButton,\n Collection as RACCollection,\n Header as RACHeader,\n LabelContext as RACLabelContext,\n ListBox as RACListBox,\n ListBoxItem as RACListBoxItem,\n type ListBoxItemProps as RACListBoxItemProps,\n ListBoxLoadMoreItem as RACListBoxLoadMoreItem,\n type ListBoxProps as RACListBoxProps,\n ListBoxSection as RACListBoxSection,\n ListLayout as RACListLayout,\n type ListLayoutOptions as RACListLayoutOptions,\n Select as RACSelect,\n type SelectProps as RACSelectProps,\n SelectStateContext as RACSelectStateContext,\n SelectValue as RACSelectValue,\n Text as RACText,\n Virtualizer as RACVirtualizer,\n useSlottedContext,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { IconCheck, IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { stringLikeChildrenToString } from '../../utils/string-like-children-to-string.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { XButton } from '../internal/x-button/x-button.js';\nimport { Spinner } from '../spinner/spinner.js';\nimport { TagGroup } from '../tag/tag-group.js';\nimport { Tag } from '../tag/tag.js';\nimport { SearchField } from '../text-inputs/search-field.js';\nimport type {\n ApiProps,\n AsyncItemLoadingProps,\n CollectionItem,\n CollectionProps,\n CommonProps,\n FieldProps,\n Key,\n StringLikeChildren,\n} from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { textStyle } from '../typography/utils.js';\nimport { UNSTABLE_VisuallyHidden } from '../visually-hidden/visually-hidden.js';\n\nexport type UNSTABLE_SelectSelectionMode = 'single' | 'multiple';\n\nconst VIRTUAL_LAYOUT_OPTIONS: RACListLayoutOptions = {\n estimatedRowHeight: 40,\n estimatedHeadingHeight: 32,\n loaderHeight: 40,\n padding: 0,\n gap: 0,\n};\n\nexport interface SelectProps<\n T extends CollectionItem = CollectionItem,\n M extends UNSTABLE_SelectSelectionMode = 'single',\n>\n extends\n CommonProps,\n FieldProps<M extends 'single' ? Key : Key[]>,\n CollectionProps<T>,\n AsyncItemLoadingProps,\n ApiProps<SelectApi>,\n Pick<\n RACSelectProps<T, M>,\n | 'isDisabled'\n | 'isRequired'\n | 'isInvalid'\n | 'autoComplete'\n | 'autoFocus'\n | 'placeholder'\n | 'onFocus'\n | 'onBlur'\n | 'onOpenChange'\n > {\n /** The currently selected key in the collection (controlled). */\n selectedKey?: Key | null;\n /** The initial selected key in the collection (uncontrolled). */\n defaultSelectedKey?: Key;\n /** Handler that is called when the selection changes. */\n onSelectionChange?: (key: Key | null) => void;\n /**\n * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.\n * @default false\n */\n isVirtualized?: boolean;\n /** Handler that is called when the list of items is scrolled. */\n onScroll?: UIEventHandler<HTMLDivElement>;\n /**\n * The selection mode of the select.\n * @default 'single'\n */\n UNSTABLE_selectionMode?: M;\n /** The value of the select (controlled). */\n UNSTABLE_value?: M extends 'single' ? Key | null : Key[];\n /** The initial value of the select (uncontrolled). */\n UNSTABLE_defaultValue?: M extends 'single' ? Key : Key[];\n /** Handler that is called when the value changes. */\n UNSTABLE_onChange?: (key: M extends 'single' ? Key | null : Key[]) => void;\n /**\n * How the selected value is displayed.\n * @default 'text'\n */\n UNSTABLE_valueDisplay?: 'text' | 'tags';\n /**\n * Whether the list of options should be filterable.\n * @default false\n */\n UNSTABLE_isFilterable?: boolean;\n /** The value of the filter input (controlled). */\n UNSTABLE_filterValue?: string;\n /** The initial value of the filter input (uncontrolled). */\n UNSTABLE_defaultFilterValue?: string;\n /** Handler that is called when the filter value changes. */\n UNSTABLE_onFilterChange?: (value: string) => void;\n /** A custom filter function to use instead of the default filter. */\n UNSTABLE_filter?: ((textValue: string, inputValue: string, node: { key: Key; value: T | null }) => boolean) | null;\n UNSTABLE_isClearable?: boolean;\n}\n\n/** The imperative API exposed by the `Select` component. */\nexport interface SelectApi {\n /** Focuses the trigger button and opens the list of items. */\n focus: () => void;\n}\n\nfunction Select<T extends CollectionItem, M extends UNSTABLE_SelectSelectionMode = 'single'>(\n {\n children,\n items,\n label,\n description,\n error,\n UNSAFE_className,\n UNSAFE_style,\n onScroll,\n isVirtualized = false,\n apiRef,\n UNSTABLE_isLoading: isLoading,\n UNSTABLE_onLoadMore: onLoadMore,\n selectedKey,\n defaultSelectedKey,\n onSelectionChange,\n UNSTABLE_selectionMode,\n UNSTABLE_value,\n UNSTABLE_defaultValue,\n UNSTABLE_onChange,\n UNSTABLE_valueDisplay: valueDisplay = 'text',\n UNSTABLE_isFilterable: isFilterable = false,\n UNSTABLE_filterValue: filterValue,\n UNSTABLE_defaultFilterValue: defaultFilterValue,\n UNSTABLE_onFilterChange: onFilterChange,\n UNSTABLE_filter: filter,\n UNSTABLE_isClearable: isClearable = false,\n ...props\n }: SelectProps<T, M>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const triggerRef = useRef<HTMLButtonElement>(null);\n\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('Select requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`Select` requires `children` to be a function when using `items` prop');\n }\n\n useImperativeHandle(\n apiRef,\n () => ({\n focus: () => triggerRef.current?.focus(),\n }),\n [],\n );\n\n const listBox = (\n <SelectListBox items={items} isLoading={isLoading} onLoadMore={onLoadMore} onScroll={onScroll}>\n {children}\n </SelectListBox>\n );\n\n const listBoxWithVirtualizer = isVirtualized ? (\n <RACVirtualizer layout={RACListLayout} layoutOptions={VIRTUAL_LAYOUT_OPTIONS}>\n {listBox}\n </RACVirtualizer>\n ) : (\n listBox\n );\n\n const listBoxWithFilter = isFilterable ? (\n <SelectFilter\n filterValue={filterValue}\n defaultFilterValue={defaultFilterValue}\n onFilterChange={onFilterChange}\n filter={filter}\n >\n {listBoxWithVirtualizer}\n </SelectFilter>\n ) : (\n listBoxWithVirtualizer\n );\n\n return (\n <RACSelect\n {...props}\n ref={ref}\n className={clsx('cim-select', UNSAFE_className)}\n style={UNSAFE_style}\n selectedKey={selectedKey}\n defaultSelectedKey={defaultSelectedKey}\n onSelectionChange={onSelectionChange}\n value={UNSTABLE_value}\n defaultValue={UNSTABLE_defaultValue}\n onChange={UNSTABLE_onChange}\n selectionMode={UNSTABLE_selectionMode}\n allowsEmptyCollection={isLoading}\n >\n <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n {label}\n </FormFieldLabel>\n <SelectButton ref={triggerRef} valueDisplay={valueDisplay} isClearable={isClearable} />\n <FormFieldError>{error}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n <SelectPopover>{listBoxWithFilter}</SelectPopover>\n {UNSTABLE_selectionMode === 'multiple' && valueDisplay === 'tags' && <SelectTags />}\n </RACSelect>\n );\n}\n\ninterface SelectPopoverProps {\n children: ReactNode;\n}\n\nfunction SelectPopover({ children }: SelectPopoverProps) {\n const popoverRef = useRef<HTMLDivElement>(null);\n const selectState = useContext(RACSelectStateContext);\n\n // Popover is non-modal, but we still want to close it when the user interacts outside\n useInteractOutside({\n ref: popoverRef,\n onInteractOutside: () => {\n selectState?.close();\n },\n isDisabled: !selectState?.isOpen,\n });\n\n // Popover is non-modal, but we still want to prevent scrolling when it is open\n usePreventScroll({ isDisabled: !selectState?.isOpen });\n\n return (\n <CollapsibleList\n ref={popoverRef}\n offset={5} // 1px border + 4px actual offset\n maxHeight={315}\n // Set to non-modal so that interactions like clicking the clear button can be performed without first having to close the popover\n isNonModal\n >\n {children}\n </CollapsibleList>\n );\n}\n\ninterface SelectButtonProps {\n valueDisplay: SelectProps['UNSTABLE_valueDisplay'];\n isClearable?: SelectProps['UNSTABLE_isClearable'];\n}\n\nconst SelectButton = forwardRef<SelectButtonProps, HTMLButtonElement>(({ valueDisplay, isClearable }, ref) => {\n const triggerRef = useRef<HTMLButtonElement>(null);\n const collectionMessages = useLocalizedMessages('UNSTABLE_collection');\n\n return (\n <div className=\"cim-select-button\">\n <RACButton ref={mergeRefs(ref, triggerRef)} className=\"cim-select-button-trigger\" />\n <RACSelectValue className={clsx('cim-select-button-value', textStyle({ variant: 'body', alignment: 'start' }))}>\n {({ selectedText, defaultChildren, isPlaceholder, state }) => {\n if (valueDisplay === 'tags' && state.selectedItems.length > 0) {\n return (\n <Text as=\"span\" variant=\"body\" tone=\"subtle\">\n {collectionMessages.format('itemsSelected', { selectedItemCount: state.selectedItems.length })}\n </Text>\n );\n }\n\n return isPlaceholder ? defaultChildren : selectedText;\n }}\n </RACSelectValue>\n {isClearable && (\n <SelectClearButton\n // Move focus to trigger button, because button will disappear after clearing\n onClear={() => triggerRef.current?.focus()}\n />\n )}\n <IconChevronDown UNSAFE_className=\"cim-select-button-chevron\" />\n </div>\n );\n});\n\nfunction SelectClearButton({ onClear }: { onClear?: () => void }) {\n const selectState = useContext(RACSelectStateContext);\n\n if (!selectState || selectState.selectedItems.length === 0) {\n return null;\n }\n\n return (\n <XButton\n // TODO: i18n once stabilized\n aria-label=\"Clear selection\"\n iconType=\"circled\"\n onPress={() => {\n selectState.setValue(null);\n onClear?.();\n }}\n slot={null}\n UNSAFE_className=\"cim-select-button-clear\"\n />\n );\n}\n\nfunction SelectListBox<T extends CollectionItem>({\n children,\n items,\n isLoading,\n onLoadMore,\n ...props\n}: RACListBoxProps<T> & {\n isLoading?: boolean;\n onLoadMore?: () => void;\n}) {\n const collectionMessages = useLocalizedMessages('UNSTABLE_collection');\n const selectState = useContext(RACSelectStateContext);\n const isEmpty = selectState?.collection.size === 0;\n\n return (\n <RACListBox\n className=\"cim-select-listbox\"\n renderEmptyState={() =>\n !isLoading && (\n // TODO: i18n once stabilized\n <Text\n as=\"p\"\n variant=\"body\"\n tone=\"subtle\"\n marginX={8}\n marginY={8}\n UNSAFE_className=\"cim-select-listbox-empty-state\"\n >\n No results found.\n </Text>\n )\n }\n {...props}\n >\n <RACCollection items={items}>{children}</RACCollection>\n <RACListBoxLoadMoreItem onLoadMore={onLoadMore} isLoading={isLoading}>\n <Spinner aria-label={collectionMessages.format(isEmpty ? 'loading' : 'loadingMore')} size=\"small\" marginY={8} />\n </RACListBoxLoadMoreItem>\n </RACListBox>\n );\n}\n\nfunction SelectFilter<T extends CollectionItem>({\n children,\n filterValue,\n defaultFilterValue,\n onFilterChange,\n filter,\n}: RACListBoxProps<T> & {\n children: ReactNode;\n filterValue?: string;\n defaultFilterValue?: string;\n onFilterChange?: (value: string) => void;\n filter?: ((textValue: string, inputValue: string, node: { key: Key; value: T | null }) => boolean) | null;\n}) {\n const { contains } = useFilter({ sensitivity: 'base' });\n const filterFn = useMemo(() => {\n if (filter === null) return undefined;\n if (filter == null) return contains;\n\n return (textValue: string, inputValue: string, node: { key: Key; value: T | null }) => {\n return filter(textValue, inputValue, { key: node.key, value: node.value });\n };\n }, [filter, contains]);\n\n return (\n <RACAutocomplete<T>\n filter={filterFn}\n inputValue={filterValue}\n defaultInputValue={defaultFilterValue}\n onInputChange={onFilterChange}\n >\n <SearchField\n // TODO: i18n once stabilized\n aria-label=\"Search\"\n placeholder=\"Search\"\n autoFocus\n marginX={8}\n marginTop={8}\n />\n {children}\n </RACAutocomplete>\n );\n}\n\nfunction SelectTags() {\n const labelContext = useSlottedContext(RACLabelContext);\n const selectedItemsLabelId = useId();\n\n return (\n <RACSelectValue>\n {({ state }) => {\n if (state.selectedItems.length === 0) {\n return <></>;\n }\n\n return (\n <>\n <TagGroup\n aria-labelledby={[labelContext?.id, selectedItemsLabelId].filter(Boolean).join(' ')}\n items={state.selectedItems\n .filter((item) => item != null)\n .map((item) => ({ id: item.key, label: item.textValue }))}\n onRemove={(keys) => {\n if (Array.isArray(state.value)) {\n state.setValue(state.value.filter((k) => !keys.has(k)));\n }\n }}\n marginTop={8}\n >\n {(item) => <Tag>{item.label}</Tag>}\n </TagGroup>\n {/* TODO: i18n once stabilized */}\n <UNSTABLE_VisuallyHidden id={selectedItemsLabelId}>selected items</UNSTABLE_VisuallyHidden>\n </>\n );\n }}\n </RACSelectValue>\n );\n}\n\n/**\n * Allows users to select one item from a collapsible list.\n *\n * See [select usage guidelines](https://ui.cimpress.io/components/select/).\n */\nconst _Select = withStyleProps(forwardRef(Select), 'Select');\n\nexport { _Select as Select };\n\nexport interface SelectItemProps extends Pick<RACListBoxItemProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n /** The ID of the item. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the label. */\n children: StringLikeChildren;\n}\n\n/** Renders a single list item within `Select`. */\nexport function SelectItem({ children, ...props }: SelectItemProps) {\n const textValue = stringLikeChildrenToString(children);\n\n return (\n <RACListBoxItem {...props} className=\"cim-select-item\" textValue={textValue}>\n {({ isDisabled }) => (\n <>\n <IconCheck />\n\n <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n {children}\n </RACText>\n </>\n )}\n </RACListBoxItem>\n );\n}\n\nSelectItem.displayName = 'SelectItem';\n\nexport interface SelectSectionProps<T extends CollectionItem> extends CollectionProps<T> {\n /** The ID of the section. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the section title. */\n title: string;\n}\n\n/** Groups list items within `Select` into a section. */\nexport function SelectSection<T extends CollectionItem>({ title, children, items, ...props }: SelectSectionProps<T>) {\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`SelectSection` requires `children` to be a function when using `items` prop');\n }\n\n return (\n <RACListBoxSection {...props} className=\"cim-select-section\">\n <RACHeader\n className={clsx('cim-select-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n >\n {title}\n </RACHeader>\n <RACCollection items={items}>{children}</RACCollection>\n </RACListBoxSection>\n );\n}\n\nSelectSection.displayName = 'SelectSection';\n"]}
1
+ {"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { mergeRefs } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport {\n type ForwardedRef,\n type ReactNode,\n type UIEventHandler,\n useContext,\n useImperativeHandle,\n useMemo,\n useRef,\n} from 'react';\nimport { useFilter, useId, useInteractOutside, usePreventScroll } from 'react-aria';\nimport {\n Autocomplete as RACAutocomplete,\n Button as RACButton,\n Collection as RACCollection,\n Header as RACHeader,\n LabelContext as RACLabelContext,\n ListBox as RACListBox,\n ListBoxItem as RACListBoxItem,\n type ListBoxItemProps as RACListBoxItemProps,\n ListBoxLoadMoreItem as RACListBoxLoadMoreItem,\n type ListBoxProps as RACListBoxProps,\n ListBoxSection as RACListBoxSection,\n ListLayout as RACListLayout,\n type ListLayoutOptions as RACListLayoutOptions,\n Select as RACSelect,\n type SelectProps as RACSelectProps,\n SelectStateContext as RACSelectStateContext,\n SelectValue as RACSelectValue,\n Text as RACText,\n Virtualizer as RACVirtualizer,\n useSlottedContext,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { IconCheckBold, IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { stringLikeChildrenToString } from '../../utils/string-like-children-to-string.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CheckboxIndicator } from '../internal/checkbox-indicator/checkbox-indicator.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { XButton } from '../internal/x-button/x-button.js';\nimport { Spinner } from '../spinner/spinner.js';\nimport { TagGroup } from '../tag/tag-group.js';\nimport { Tag } from '../tag/tag.js';\nimport { SearchField } from '../text-inputs/search-field.js';\nimport type {\n ApiProps,\n AsyncItemLoadingProps,\n CollectionItem,\n CollectionProps,\n CommonProps,\n FieldProps,\n Key,\n StringLikeChildren,\n} from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { textStyle } from '../typography/utils.js';\nimport { UNSTABLE_VisuallyHidden } from '../visually-hidden/visually-hidden.js';\n\nexport type UNSTABLE_SelectSelectionMode = 'single' | 'multiple';\n\nconst VIRTUAL_LAYOUT_OPTIONS: RACListLayoutOptions = {\n estimatedRowHeight: 40,\n estimatedHeadingHeight: 32,\n loaderHeight: 40,\n padding: 0,\n gap: 0,\n};\n\nexport interface SelectProps<\n T extends CollectionItem = CollectionItem,\n M extends UNSTABLE_SelectSelectionMode = 'single',\n>\n extends\n CommonProps,\n FieldProps<M extends 'single' ? Key : Key[]>,\n CollectionProps<T>,\n AsyncItemLoadingProps,\n ApiProps<SelectApi>,\n Pick<\n RACSelectProps<T, M>,\n | 'isDisabled'\n | 'isRequired'\n | 'isInvalid'\n | 'autoComplete'\n | 'autoFocus'\n | 'placeholder'\n | 'onFocus'\n | 'onBlur'\n | 'onOpenChange'\n > {\n /** The currently selected key in the collection (controlled). */\n selectedKey?: Key | null;\n /** The initial selected key in the collection (uncontrolled). */\n defaultSelectedKey?: Key;\n /** Handler that is called when the selection changes. */\n onSelectionChange?: (key: Key | null) => void;\n /**\n * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.\n * @default false\n */\n isVirtualized?: boolean;\n /** Handler that is called when the list of items is scrolled. */\n onScroll?: UIEventHandler<HTMLDivElement>;\n /**\n * The selection mode of the select.\n * @default 'single'\n */\n UNSTABLE_selectionMode?: M;\n /** The value of the select (controlled). */\n UNSTABLE_value?: M extends 'single' ? Key | null : Key[];\n /** The initial value of the select (uncontrolled). */\n UNSTABLE_defaultValue?: M extends 'single' ? Key : Key[];\n /** Handler that is called when the value changes. */\n UNSTABLE_onChange?: (key: M extends 'single' ? Key | null : Key[]) => void;\n /**\n * How the selected value is displayed.\n * @default 'text'\n */\n UNSTABLE_valueDisplay?: 'text' | 'tags' | 'count';\n /**\n * Whether the list of options should be filterable.\n * @default false\n */\n UNSTABLE_isFilterable?: boolean;\n /** The value of the filter input (controlled). */\n UNSTABLE_filterValue?: string;\n /** The initial value of the filter input (uncontrolled). */\n UNSTABLE_defaultFilterValue?: string;\n /** Handler that is called when the filter value changes. */\n UNSTABLE_onFilterChange?: (value: string) => void;\n /** A custom filter function to use instead of the default filter. */\n UNSTABLE_filter?: ((textValue: string, inputValue: string, node: { key: Key; value: T | null }) => boolean) | null;\n UNSTABLE_isClearable?: boolean;\n}\n\n/** The imperative API exposed by the `Select` component. */\nexport interface SelectApi {\n /** Focuses the trigger button and opens the list of items. */\n focus: () => void;\n}\n\nfunction Select<T extends CollectionItem, M extends UNSTABLE_SelectSelectionMode = 'single'>(\n {\n children,\n items,\n label,\n description,\n error,\n UNSAFE_className,\n UNSAFE_style,\n onScroll,\n isVirtualized = false,\n apiRef,\n UNSTABLE_isLoading: isLoading,\n UNSTABLE_onLoadMore: onLoadMore,\n selectedKey,\n defaultSelectedKey,\n onSelectionChange,\n UNSTABLE_selectionMode,\n UNSTABLE_value,\n UNSTABLE_defaultValue,\n UNSTABLE_onChange,\n UNSTABLE_valueDisplay: valueDisplay = 'text',\n UNSTABLE_isFilterable: isFilterable = false,\n UNSTABLE_filterValue: filterValue,\n UNSTABLE_defaultFilterValue: defaultFilterValue,\n UNSTABLE_onFilterChange: onFilterChange,\n UNSTABLE_filter: filter,\n UNSTABLE_isClearable: isClearable = false,\n ...props\n }: SelectProps<T, M>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const triggerRef = useRef<HTMLButtonElement>(null);\n\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('Select requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`Select` requires `children` to be a function when using `items` prop');\n }\n\n useImperativeHandle(\n apiRef,\n () => ({\n focus: () => triggerRef.current?.focus(),\n }),\n [],\n );\n\n const listBox = (\n <SelectListBox items={items} isLoading={isLoading} onLoadMore={onLoadMore} onScroll={onScroll}>\n {children}\n </SelectListBox>\n );\n\n const listBoxWithVirtualizer = isVirtualized ? (\n <RACVirtualizer layout={RACListLayout} layoutOptions={VIRTUAL_LAYOUT_OPTIONS}>\n {listBox}\n </RACVirtualizer>\n ) : (\n listBox\n );\n\n const listBoxWithFilter = isFilterable ? (\n <SelectFilter\n filterValue={filterValue}\n defaultFilterValue={defaultFilterValue}\n onFilterChange={onFilterChange}\n filter={filter}\n >\n {listBoxWithVirtualizer}\n </SelectFilter>\n ) : (\n listBoxWithVirtualizer\n );\n\n return (\n <RACSelect\n {...props}\n ref={ref}\n className={clsx('cim-select', UNSAFE_className)}\n style={UNSAFE_style}\n selectedKey={selectedKey}\n defaultSelectedKey={defaultSelectedKey}\n onSelectionChange={onSelectionChange}\n value={UNSTABLE_value}\n defaultValue={UNSTABLE_defaultValue}\n onChange={UNSTABLE_onChange}\n selectionMode={UNSTABLE_selectionMode}\n allowsEmptyCollection={isLoading}\n >\n <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n {label}\n </FormFieldLabel>\n <SelectButton ref={triggerRef} valueDisplay={valueDisplay} isClearable={isClearable} />\n <FormFieldError>{error}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n <SelectPopover>{listBoxWithFilter}</SelectPopover>\n {UNSTABLE_selectionMode === 'multiple' && valueDisplay === 'tags' && <SelectTags />}\n </RACSelect>\n );\n}\n\ninterface SelectPopoverProps {\n children: ReactNode;\n}\n\nfunction SelectPopover({ children }: SelectPopoverProps) {\n const popoverRef = useRef<HTMLDivElement>(null);\n const selectState = useContext(RACSelectStateContext);\n\n // Popover is non-modal, but we still want to close it when the user interacts outside\n useInteractOutside({\n ref: popoverRef,\n onInteractOutside: () => {\n selectState?.close();\n },\n isDisabled: !selectState?.isOpen,\n });\n\n // Popover is non-modal, but we still want to prevent scrolling when it is open\n usePreventScroll({ isDisabled: !selectState?.isOpen });\n\n return (\n <CollapsibleList\n ref={popoverRef}\n offset={5} // 1px border + 4px actual offset\n maxHeight={315}\n // Set to non-modal so that interactions like clicking the clear button can be performed without first having to close the popover\n isNonModal\n >\n {children}\n </CollapsibleList>\n );\n}\n\ninterface SelectButtonProps {\n valueDisplay: SelectProps['UNSTABLE_valueDisplay'];\n isClearable?: SelectProps['UNSTABLE_isClearable'];\n}\n\nconst SelectButton = forwardRef<SelectButtonProps, HTMLButtonElement>(({ valueDisplay, isClearable }, ref) => {\n const triggerRef = useRef<HTMLButtonElement>(null);\n const collectionMessages = useLocalizedMessages('UNSTABLE_collection');\n\n return (\n <div className=\"cim-select-button\">\n <RACButton ref={mergeRefs(ref, triggerRef)} className=\"cim-select-button-trigger\" />\n <RACSelectValue className={clsx('cim-select-button-value', textStyle({ variant: 'body', alignment: 'start' }))}>\n {({ selectedText, defaultChildren, isPlaceholder, state }) => {\n if ((valueDisplay === 'tags' && state.selectedItems.length > 0) || valueDisplay === 'count') {\n return (\n <Text as=\"span\" variant=\"body\" tone=\"subtle\">\n {collectionMessages.format('itemsSelected', { selectedItemCount: state.selectedItems.length })}\n </Text>\n );\n }\n\n return isPlaceholder ? defaultChildren : selectedText;\n }}\n </RACSelectValue>\n {isClearable && (\n <SelectClearButton\n // Move focus to trigger button, because button will disappear after clearing\n onClear={() => triggerRef.current?.focus()}\n />\n )}\n <IconChevronDown UNSAFE_className=\"cim-select-button-chevron\" />\n </div>\n );\n});\n\nfunction SelectClearButton({ onClear }: { onClear?: () => void }) {\n const selectState = useContext(RACSelectStateContext);\n\n if (!selectState || selectState.selectedItems.length === 0) {\n return null;\n }\n\n return (\n <XButton\n // TODO: i18n once stabilized\n aria-label=\"Clear selection\"\n iconType=\"circled\"\n onPress={() => {\n selectState.setValue(null);\n onClear?.();\n }}\n slot={null}\n UNSAFE_className=\"cim-select-button-clear\"\n />\n );\n}\n\nfunction SelectListBox<T extends CollectionItem>({\n children,\n items,\n isLoading,\n onLoadMore,\n ...props\n}: RACListBoxProps<T> & {\n isLoading?: boolean;\n onLoadMore?: () => void;\n}) {\n const collectionMessages = useLocalizedMessages('UNSTABLE_collection');\n const selectState = useContext(RACSelectStateContext);\n const isEmpty = selectState?.collection.size === 0;\n\n return (\n <RACListBox\n className=\"cim-select-listbox\"\n renderEmptyState={() =>\n !isLoading && (\n // TODO: i18n once stabilized\n <Text\n as=\"p\"\n variant=\"body\"\n tone=\"subtle\"\n marginX={8}\n marginY={8}\n UNSAFE_className=\"cim-select-listbox-empty-state\"\n >\n No results found.\n </Text>\n )\n }\n {...props}\n >\n <RACCollection items={items}>{children}</RACCollection>\n <RACListBoxLoadMoreItem onLoadMore={onLoadMore} isLoading={isLoading}>\n <Spinner aria-label={collectionMessages.format(isEmpty ? 'loading' : 'loadingMore')} size=\"small\" marginY={8} />\n </RACListBoxLoadMoreItem>\n </RACListBox>\n );\n}\n\nfunction SelectFilter<T extends CollectionItem>({\n children,\n filterValue,\n defaultFilterValue,\n onFilterChange,\n filter,\n}: RACListBoxProps<T> & {\n children: ReactNode;\n filterValue?: string;\n defaultFilterValue?: string;\n onFilterChange?: (value: string) => void;\n filter?: ((textValue: string, inputValue: string, node: { key: Key; value: T | null }) => boolean) | null;\n}) {\n const { contains } = useFilter({ sensitivity: 'base' });\n const filterFn = useMemo(() => {\n if (filter === null) return undefined;\n if (filter == null) return contains;\n\n return (textValue: string, inputValue: string, node: { key: Key; value: T | null }) => {\n return filter(textValue, inputValue, { key: node.key, value: node.value });\n };\n }, [filter, contains]);\n\n return (\n <RACAutocomplete<T>\n filter={filterFn}\n inputValue={filterValue}\n defaultInputValue={defaultFilterValue}\n onInputChange={onFilterChange}\n >\n <SearchField\n // TODO: i18n once stabilized\n aria-label=\"Search\"\n placeholder=\"Search\"\n autoFocus\n marginX={8}\n marginTop={8}\n />\n {children}\n </RACAutocomplete>\n );\n}\n\nfunction SelectTags() {\n const labelContext = useSlottedContext(RACLabelContext);\n const selectedItemsLabelId = useId();\n\n return (\n <RACSelectValue>\n {({ state }) => {\n if (state.selectedItems.length === 0) {\n return <></>;\n }\n\n return (\n <>\n <TagGroup\n aria-labelledby={[labelContext?.id, selectedItemsLabelId].filter(Boolean).join(' ')}\n items={state.selectedItems\n .filter((item) => item != null)\n .map((item) => ({ id: item.key, label: item.textValue }))}\n onRemove={(keys) => {\n if (Array.isArray(state.value)) {\n state.setValue(state.value.filter((k) => !keys.has(k)));\n }\n }}\n marginTop={8}\n >\n {(item) => <Tag>{item.label}</Tag>}\n </TagGroup>\n {/* TODO: i18n once stabilized */}\n <UNSTABLE_VisuallyHidden id={selectedItemsLabelId}>selected items</UNSTABLE_VisuallyHidden>\n </>\n );\n }}\n </RACSelectValue>\n );\n}\n\n/**\n * Allows users to select one item from a collapsible list.\n *\n * See [select usage guidelines](https://ui.cimpress.io/components/select/).\n */\nconst _Select = withStyleProps(forwardRef(Select), 'Select');\n\nexport { _Select as Select };\n\nexport interface SelectItemProps extends Pick<RACListBoxItemProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n /** The ID of the item. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the label. */\n children: StringLikeChildren;\n}\n\n/** Renders a single list item within `Select`. */\nexport function SelectItem({ children, ...props }: SelectItemProps) {\n const textValue = stringLikeChildrenToString(children);\n\n return (\n <RACListBoxItem {...props} className=\"cim-select-item\" textValue={textValue}>\n {({ isDisabled, isSelected, selectionMode }) => (\n <>\n {selectionMode === 'single' && <IconCheckBold />}\n {selectionMode === 'multiple' && <CheckboxIndicator isSelected={isSelected} isDisabled={isDisabled} />}\n\n <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n {children}\n </RACText>\n </>\n )}\n </RACListBoxItem>\n );\n}\n\nSelectItem.displayName = 'SelectItem';\n\nexport interface SelectSectionProps<T extends CollectionItem> extends CollectionProps<T> {\n /** The ID of the section. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the section title. */\n title: string;\n}\n\n/** Groups list items within `Select` into a section. */\nexport function SelectSection<T extends CollectionItem>({ title, children, items, ...props }: SelectSectionProps<T>) {\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`SelectSection` requires `children` to be a function when using `items` prop');\n }\n\n return (\n <RACListBoxSection {...props} className=\"cim-select-section\">\n <RACHeader\n className={clsx('cim-select-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n >\n {title}\n </RACHeader>\n <RACCollection items={items}>{children}</RACCollection>\n </RACListBoxSection>\n );\n}\n\nSelectSection.displayName = 'SelectSection';\n"]}
@@ -54,7 +54,7 @@ export { _TagField as TagField };
54
54
  /** Renders a single list item within `TagField`. */
55
55
  export function TagFieldItem({ children, ...props }) {
56
56
  const textValue = typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');
57
- return (_jsx(RACListBoxItem, { ...props, className: "cim-tag-field-item cim-checkbox-indicator-wrapper", textValue: textValue, children: ({ isDisabled }) => (_jsxs(_Fragment, { children: [_jsx(CheckboxIndicator, {}), _jsx(RACText, { slot: "label", className: textStyle({ variant: 'medium', tone: isDisabled ? 'muted' : 'base' }), children: children })] })) }));
57
+ return (_jsx(RACListBoxItem, { ...props, className: "cim-tag-field-item", textValue: textValue, children: ({ isDisabled, isSelected }) => (_jsxs(_Fragment, { children: [_jsx(CheckboxIndicator, { isSelected: isSelected, isDisabled: isDisabled }), _jsx(RACText, { slot: "label", className: textStyle({ variant: 'body' }), children: children })] })) }));
58
58
  }
59
59
  TagFieldItem.displayName = 'TagFieldItem';
60
60
  /** Groups list items within `TagField` into a section. */
@@ -1 +1 @@
1
- {"version":3,"file":"tag-field.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type ForwardedRef, type UIEventHandler, useImperativeHandle, useRef } from 'react';\nimport { useId } from 'react-aria';\nimport {\n Button as RACButton,\n Collection as RACCollection,\n ComboBox as RACComboBox,\n Group as RACGroup,\n Header as RACHeader,\n ListBoxItem as RACListBoxItem,\n ListBoxSection as RACListBoxSection,\n Text as RACText,\n type ComboBoxProps as RACComboBoxProps,\n type ListBoxItemProps as RACListBoxItemProps,\n ComboBoxValue as RACComboBoxValue,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CheckboxIndicator } from '../internal/checkbox-indicator/checkbox-indicator.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { TagGroup, type TagGroupProps } from '../tag/tag-group.js';\nimport { Tag, type TagProps } from '../tag/tag.js';\nimport type {\n ApiProps,\n CollectionItem,\n CollectionProps,\n CommonProps,\n FieldWithPlaceholderProps,\n Key,\n StringLikeChildren,\n} from '../types.js';\nimport { textStyle } from '../typography/utils.js';\nimport { TagFieldInput } from './tag-field-input.js';\nimport { TagFieldListBox } from './tag-field-list-box.js';\n\n/** Represents the state of the `TagField` component for validation purposes. */\nexport interface TagFieldValidationValue {\n /** The selected keys in the TagField. */\n selectedKeys: Set<Key> | null;\n /** The value of the TagField input. */\n inputValue: string;\n}\n\nexport interface TagFieldProps<T extends CollectionItem = CollectionItem>\n extends\n CommonProps,\n FieldWithPlaceholderProps<TagFieldValidationValue>,\n CollectionProps<T>,\n ApiProps<TagFieldApi>,\n Pick<\n RACComboBoxProps<T>,\n | 'isRequired'\n | 'isDisabled'\n | 'isInvalid'\n | 'isReadOnly'\n | 'inputValue'\n | 'defaultInputValue'\n | 'autoFocus'\n | 'onInputChange'\n | 'onFocus'\n | 'onBlur'\n | 'onOpenChange'\n >,\n Pick<TagGroupProps<T>, 'renderEmptyState'> {\n /** The currently selected keys in the collection (controlled). */\n selectedKeys?: Iterable<Key>;\n /** The initial selected keys in the collection (uncontrolled). */\n defaultSelectedKeys?: Iterable<Key>;\n /** Handler that is called when the selection changes. */\n onSelectionChange?: (keys: Set<Key>) => void;\n /**\n * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.\n * @default false\n */\n isVirtualized?: boolean;\n /** Handler that is called when the list of items is scrolled. */\n onScroll?: UIEventHandler<HTMLDivElement>;\n}\n\n/** The imperative API exposed by the `TagField` component. */\nexport interface TagFieldApi {\n /** Focuses the input field and opens the list of items. */\n focus: () => void;\n}\n\nfunction TagField<T extends CollectionItem>(\n {\n label,\n description,\n error,\n items,\n children,\n placeholder,\n UNSAFE_className,\n UNSAFE_style,\n validate,\n isReadOnly,\n onScroll,\n selectedKeys,\n defaultSelectedKeys,\n onSelectionChange,\n id,\n renderEmptyState,\n isVirtualized = false,\n apiRef,\n ...props\n }: TagFieldProps<T>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const inputRef = useRef<HTMLInputElement>(null);\n\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, isRequired, isDisabled } = props;\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('TagField requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`TagField` requires `children` to be a function when using `items` prop');\n }\n\n const inputId = useId(id);\n\n useImperativeHandle(\n apiRef,\n () => ({\n focus: () => inputRef.current?.focus(),\n }),\n [],\n );\n\n return (\n <RACComboBox\n {...props}\n ref={ref}\n className={clsx('cim-combo-box', 'cim-tag-field', UNSAFE_className)}\n style={UNSAFE_style}\n id={inputId}\n selectionMode=\"multiple\"\n value={selectedKeys ? Array.from(selectedKeys) : undefined}\n defaultValue={defaultSelectedKeys ? Array.from(defaultSelectedKeys) : undefined}\n onChange={(keys) => onSelectionChange?.(new Set(keys))}\n menuTrigger=\"focus\"\n isReadOnly={isReadOnly}\n data-readonly={isReadOnly ? true : undefined}\n validate={\n validate\n ? ({ inputValue, value }) => {\n return validate({ inputValue, selectedKeys: new Set(value as unknown as Key[]) });\n }\n : undefined\n }\n >\n <FormFieldLabel isRequired={isRequired} isDisabled={isDisabled}>\n {label}\n </FormFieldLabel>\n\n <RACGroup className=\"cim-combo-box-input-group\">\n <TagFieldInput\n inputRef={inputRef}\n aria-describedby={props['aria-describedby']}\n isReadOnly={isReadOnly}\n placeholder={placeholder}\n />\n <RACButton className=\"cim-combo-box-button\">\n <IconChevronDown />\n </RACButton>\n </RACGroup>\n\n <FormFieldError>{error}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n\n <RACComboBoxValue>\n {({ state }) => (\n <TagGroup\n aria-labelledby={inputId}\n disabledKeys={isDisabled ? state.selectedItems.map((item) => item.key) : undefined}\n renderEmptyState={renderEmptyState}\n onRemove={\n isReadOnly\n ? undefined\n : (keys) => {\n if (Array.isArray(state.value)) {\n state.setValue(state.value.filter((k) => !keys.has(k)));\n }\n }\n }\n >\n {state.selectedItems.map((item) => (\n <Tag key={item.key} id={item.key} isDisabled={(item.props as TagProps).isDisabled}>\n {item.textValue}\n </Tag>\n ))}\n </TagGroup>\n )}\n </RACComboBoxValue>\n\n <CollapsibleList\n offset={5} // 1px border + 4px actual offset\n maxHeight={315}\n >\n <TagFieldListBox<T> items={items} onScroll={onScroll} isVirtualized={isVirtualized}>\n {children}\n </TagFieldListBox>\n </CollapsibleList>\n </RACComboBox>\n );\n}\n\n/**\n * Allows users to filter a collapsible list and select multiple items from it.\n *\n * See [tag field usage guidelines](https://ui.cimpress.io/components/tag-field).\n */\nconst _TagField = withStyleProps(forwardRef(TagField), 'TagField');\n\nexport { _TagField as TagField };\n\nexport interface TagFieldItemProps<T extends CollectionItem> extends Pick<\n RACListBoxItemProps<T>,\n 'isDisabled' | 'onHoverStart' | 'onHoverEnd'\n> {\n /** The ID of the item. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the label. */\n children: StringLikeChildren;\n}\n\n/** Renders a single list item within `TagField`. */\nexport function TagFieldItem<T extends CollectionItem>({ children, ...props }: TagFieldItemProps<T>) {\n const textValue =\n typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n return (\n <RACListBoxItem {...props} className=\"cim-tag-field-item cim-checkbox-indicator-wrapper\" textValue={textValue}>\n {({ isDisabled }) => (\n <>\n <CheckboxIndicator />\n\n <RACText slot=\"label\" className={textStyle({ variant: 'medium', tone: isDisabled ? 'muted' : 'base' })}>\n {children}\n </RACText>\n </>\n )}\n </RACListBoxItem>\n );\n}\n\nTagFieldItem.displayName = 'TagFieldItem';\n\nexport interface TagFieldSectionProps<T extends CollectionItem> extends CollectionProps<T> {\n /** The ID of the section. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the section title. */\n title: string;\n}\n\n/** Groups list items within `TagField` into a section. */\nexport function TagFieldSection<T extends CollectionItem>({\n title,\n children,\n items,\n ...props\n}: TagFieldSectionProps<T>) {\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`TagFieldSection` requires `children` to be a function when using `items` prop');\n }\n\n return (\n <RACListBoxSection {...props} className=\"cim-combo-box-section\">\n <RACHeader\n className={clsx('cim-combo-box-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n >\n {title}\n </RACHeader>\n <RACCollection items={items}>{children}</RACCollection>\n </RACListBoxSection>\n );\n}\n\nTagFieldSection.displayName = 'TagFieldSection';\n"]}
1
+ {"version":3,"file":"tag-field.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type ForwardedRef, type UIEventHandler, useImperativeHandle, useRef } from 'react';\nimport { useId } from 'react-aria';\nimport {\n Button as RACButton,\n Collection as RACCollection,\n ComboBox as RACComboBox,\n Group as RACGroup,\n Header as RACHeader,\n ListBoxItem as RACListBoxItem,\n ListBoxSection as RACListBoxSection,\n Text as RACText,\n type ComboBoxProps as RACComboBoxProps,\n type ListBoxItemProps as RACListBoxItemProps,\n ComboBoxValue as RACComboBoxValue,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CheckboxIndicator } from '../internal/checkbox-indicator/checkbox-indicator.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { TagGroup, type TagGroupProps } from '../tag/tag-group.js';\nimport { Tag, type TagProps } from '../tag/tag.js';\nimport type {\n ApiProps,\n CollectionItem,\n CollectionProps,\n CommonProps,\n FieldWithPlaceholderProps,\n Key,\n StringLikeChildren,\n} from '../types.js';\nimport { textStyle } from '../typography/utils.js';\nimport { TagFieldInput } from './tag-field-input.js';\nimport { TagFieldListBox } from './tag-field-list-box.js';\n\n/** Represents the state of the `TagField` component for validation purposes. */\nexport interface TagFieldValidationValue {\n /** The selected keys in the TagField. */\n selectedKeys: Set<Key> | null;\n /** The value of the TagField input. */\n inputValue: string;\n}\n\nexport interface TagFieldProps<T extends CollectionItem = CollectionItem>\n extends\n CommonProps,\n FieldWithPlaceholderProps<TagFieldValidationValue>,\n CollectionProps<T>,\n ApiProps<TagFieldApi>,\n Pick<\n RACComboBoxProps<T>,\n | 'isRequired'\n | 'isDisabled'\n | 'isInvalid'\n | 'isReadOnly'\n | 'inputValue'\n | 'defaultInputValue'\n | 'autoFocus'\n | 'onInputChange'\n | 'onFocus'\n | 'onBlur'\n | 'onOpenChange'\n >,\n Pick<TagGroupProps<T>, 'renderEmptyState'> {\n /** The currently selected keys in the collection (controlled). */\n selectedKeys?: Iterable<Key>;\n /** The initial selected keys in the collection (uncontrolled). */\n defaultSelectedKeys?: Iterable<Key>;\n /** Handler that is called when the selection changes. */\n onSelectionChange?: (keys: Set<Key>) => void;\n /**\n * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.\n * @default false\n */\n isVirtualized?: boolean;\n /** Handler that is called when the list of items is scrolled. */\n onScroll?: UIEventHandler<HTMLDivElement>;\n}\n\n/** The imperative API exposed by the `TagField` component. */\nexport interface TagFieldApi {\n /** Focuses the input field and opens the list of items. */\n focus: () => void;\n}\n\nfunction TagField<T extends CollectionItem>(\n {\n label,\n description,\n error,\n items,\n children,\n placeholder,\n UNSAFE_className,\n UNSAFE_style,\n validate,\n isReadOnly,\n onScroll,\n selectedKeys,\n defaultSelectedKeys,\n onSelectionChange,\n id,\n renderEmptyState,\n isVirtualized = false,\n apiRef,\n ...props\n }: TagFieldProps<T>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const inputRef = useRef<HTMLInputElement>(null);\n\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, isRequired, isDisabled } = props;\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('TagField requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`TagField` requires `children` to be a function when using `items` prop');\n }\n\n const inputId = useId(id);\n\n useImperativeHandle(\n apiRef,\n () => ({\n focus: () => inputRef.current?.focus(),\n }),\n [],\n );\n\n return (\n <RACComboBox\n {...props}\n ref={ref}\n className={clsx('cim-combo-box', 'cim-tag-field', UNSAFE_className)}\n style={UNSAFE_style}\n id={inputId}\n selectionMode=\"multiple\"\n value={selectedKeys ? Array.from(selectedKeys) : undefined}\n defaultValue={defaultSelectedKeys ? Array.from(defaultSelectedKeys) : undefined}\n onChange={(keys) => onSelectionChange?.(new Set(keys))}\n menuTrigger=\"focus\"\n isReadOnly={isReadOnly}\n data-readonly={isReadOnly ? true : undefined}\n validate={\n validate\n ? ({ inputValue, value }) => {\n return validate({ inputValue, selectedKeys: new Set(value as unknown as Key[]) });\n }\n : undefined\n }\n >\n <FormFieldLabel isRequired={isRequired} isDisabled={isDisabled}>\n {label}\n </FormFieldLabel>\n\n <RACGroup className=\"cim-combo-box-input-group\">\n <TagFieldInput\n inputRef={inputRef}\n aria-describedby={props['aria-describedby']}\n isReadOnly={isReadOnly}\n placeholder={placeholder}\n />\n <RACButton className=\"cim-combo-box-button\">\n <IconChevronDown />\n </RACButton>\n </RACGroup>\n\n <FormFieldError>{error}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n\n <RACComboBoxValue>\n {({ state }) => (\n <TagGroup\n aria-labelledby={inputId}\n disabledKeys={isDisabled ? state.selectedItems.map((item) => item.key) : undefined}\n renderEmptyState={renderEmptyState}\n onRemove={\n isReadOnly\n ? undefined\n : (keys) => {\n if (Array.isArray(state.value)) {\n state.setValue(state.value.filter((k) => !keys.has(k)));\n }\n }\n }\n >\n {state.selectedItems.map((item) => (\n <Tag key={item.key} id={item.key} isDisabled={(item.props as TagProps).isDisabled}>\n {item.textValue}\n </Tag>\n ))}\n </TagGroup>\n )}\n </RACComboBoxValue>\n\n <CollapsibleList\n offset={5} // 1px border + 4px actual offset\n maxHeight={315}\n >\n <TagFieldListBox<T> items={items} onScroll={onScroll} isVirtualized={isVirtualized}>\n {children}\n </TagFieldListBox>\n </CollapsibleList>\n </RACComboBox>\n );\n}\n\n/**\n * Allows users to filter a collapsible list and select multiple items from it.\n *\n * See [tag field usage guidelines](https://ui.cimpress.io/components/tag-field).\n */\nconst _TagField = withStyleProps(forwardRef(TagField), 'TagField');\n\nexport { _TagField as TagField };\n\nexport interface TagFieldItemProps<T extends CollectionItem> extends Pick<\n RACListBoxItemProps<T>,\n 'isDisabled' | 'onHoverStart' | 'onHoverEnd'\n> {\n /** The ID of the item. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the label. */\n children: StringLikeChildren;\n}\n\n/** Renders a single list item within `TagField`. */\nexport function TagFieldItem<T extends CollectionItem>({ children, ...props }: TagFieldItemProps<T>) {\n const textValue =\n typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n return (\n <RACListBoxItem {...props} className=\"cim-tag-field-item\" textValue={textValue}>\n {({ isDisabled, isSelected }) => (\n <>\n <CheckboxIndicator isSelected={isSelected} isDisabled={isDisabled} />\n\n <RACText slot=\"label\" className={textStyle({ variant: 'body' })}>\n {children}\n </RACText>\n </>\n )}\n </RACListBoxItem>\n );\n}\n\nTagFieldItem.displayName = 'TagFieldItem';\n\nexport interface TagFieldSectionProps<T extends CollectionItem> extends CollectionProps<T> {\n /** The ID of the section. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the section title. */\n title: string;\n}\n\n/** Groups list items within `TagField` into a section. */\nexport function TagFieldSection<T extends CollectionItem>({\n title,\n children,\n items,\n ...props\n}: TagFieldSectionProps<T>) {\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`TagFieldSection` requires `children` to be a function when using `items` prop');\n }\n\n return (\n <RACListBoxSection {...props} className=\"cim-combo-box-section\">\n <RACHeader\n className={clsx('cim-combo-box-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n >\n {title}\n </RACHeader>\n <RACCollection items={items}>{children}</RACCollection>\n </RACListBoxSection>\n );\n}\n\nTagFieldSection.displayName = 'TagFieldSection';\n"]}