@cimpress-ui/react 1.15.0 → 1.16.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 (51) hide show
  1. package/dist/commonjs/components/checkbox/checkbox.d.ts.map +1 -1
  2. package/dist/commonjs/components/checkbox/checkbox.js +2 -2
  3. package/dist/commonjs/components/checkbox/checkbox.js.map +1 -1
  4. package/dist/commonjs/components/internal/checkbox-indicator/checkbox-indicator.d.ts +2 -0
  5. package/dist/commonjs/components/internal/checkbox-indicator/checkbox-indicator.d.ts.map +1 -0
  6. package/dist/commonjs/components/internal/checkbox-indicator/checkbox-indicator.js +21 -0
  7. package/dist/commonjs/components/internal/checkbox-indicator/checkbox-indicator.js.map +1 -0
  8. package/dist/commonjs/components/menu/menu.d.ts +3 -3
  9. package/dist/commonjs/components/menu/menu.d.ts.map +1 -1
  10. package/dist/commonjs/components/menu/menu.js +3 -1
  11. package/dist/commonjs/components/menu/menu.js.map +1 -1
  12. package/dist/commonjs/components/tag-field/tag-field.d.ts.map +1 -1
  13. package/dist/commonjs/components/tag-field/tag-field.js +2 -1
  14. package/dist/commonjs/components/tag-field/tag-field.js.map +1 -1
  15. package/dist/commonjs/components/toast/toast-queue.d.ts.map +1 -1
  16. package/dist/commonjs/components/toast/toast-queue.js +16 -11
  17. package/dist/commonjs/components/toast/toast-queue.js.map +1 -1
  18. package/dist/commonjs/components/toast/types.d.ts +1 -0
  19. package/dist/commonjs/components/toast/types.d.ts.map +1 -1
  20. package/dist/commonjs/components/toast/types.js.map +1 -1
  21. package/dist/commonjs/components/toggle-button/toggle-button-group.d.ts +3 -0
  22. package/dist/commonjs/components/toggle-button/toggle-button-group.d.ts.map +1 -1
  23. package/dist/commonjs/components/toggle-button/toggle-button-group.js +2 -2
  24. package/dist/commonjs/components/toggle-button/toggle-button-group.js.map +1 -1
  25. package/dist/esm/components/checkbox/checkbox.d.ts.map +1 -1
  26. package/dist/esm/components/checkbox/checkbox.js +2 -2
  27. package/dist/esm/components/checkbox/checkbox.js.map +1 -1
  28. package/dist/esm/components/internal/checkbox-indicator/checkbox-indicator.d.ts +2 -0
  29. package/dist/esm/components/internal/checkbox-indicator/checkbox-indicator.d.ts.map +1 -0
  30. package/dist/esm/components/internal/checkbox-indicator/checkbox-indicator.js +15 -0
  31. package/dist/esm/components/internal/checkbox-indicator/checkbox-indicator.js.map +1 -0
  32. package/dist/esm/components/menu/menu.d.ts +3 -3
  33. package/dist/esm/components/menu/menu.d.ts.map +1 -1
  34. package/dist/esm/components/menu/menu.js +3 -1
  35. package/dist/esm/components/menu/menu.js.map +1 -1
  36. package/dist/esm/components/tag-field/tag-field.d.ts.map +1 -1
  37. package/dist/esm/components/tag-field/tag-field.js +3 -2
  38. package/dist/esm/components/tag-field/tag-field.js.map +1 -1
  39. package/dist/esm/components/toast/toast-queue.d.ts.map +1 -1
  40. package/dist/esm/components/toast/toast-queue.js +16 -11
  41. package/dist/esm/components/toast/toast-queue.js.map +1 -1
  42. package/dist/esm/components/toast/types.d.ts +1 -0
  43. package/dist/esm/components/toast/types.d.ts.map +1 -1
  44. package/dist/esm/components/toast/types.js.map +1 -1
  45. package/dist/esm/components/toggle-button/toggle-button-group.d.ts +3 -0
  46. package/dist/esm/components/toggle-button/toggle-button-group.d.ts.map +1 -1
  47. package/dist/esm/components/toggle-button/toggle-button-group.js +2 -2
  48. package/dist/esm/components/toggle-button/toggle-button-group.js.map +1 -1
  49. package/dist-styles/core.css +1 -1
  50. package/dist-styles/styles.css +1 -1
  51. package/package.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA2B,KAAK,aAAa,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAKxG,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGtF,MAAM,WAAW,aACf,SACE,WAAW,EACX,iBAAiB,EACjB,IAAI,CACF,gBAAgB,EACd,UAAU,GACV,YAAY,GACZ,iBAAiB,GACjB,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,MAAM,GACN,MAAM,GACN,OAAO,GACP,iBAAiB,GACjB,WAAW,CACd;IACH,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,kBAAkB,CAAC;CAC/B;AAgCD;;;;GAIG;AACH,QAAA,MAAM,SAAS,iKAAmD,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC"}
1
+ {"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA2B,KAAK,aAAa,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAKxG,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGtF,MAAM,WAAW,aACf,SACE,WAAW,EACX,iBAAiB,EACjB,IAAI,CACF,gBAAgB,EACd,UAAU,GACV,YAAY,GACZ,iBAAiB,GACjB,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,MAAM,GACN,MAAM,GACN,OAAO,GACP,iBAAiB,GACjB,WAAW,CACd;IACH,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,kBAAkB,CAAC;CAC/B;AAmCD;;;;GAIG;AACH,QAAA,MAAM,SAAS,iKAAmD,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC"}
@@ -9,9 +9,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
9
9
  const clsx_1 = __importDefault(require("clsx"));
10
10
  const react_aria_components_1 = require("react-aria-components");
11
11
  const forward_ref_js_1 = require("../../forward-ref.js");
12
- const index_js_1 = require("../../icons/index.js");
13
12
  const use_production_warning_js_1 = require("../../utils/use-production-warning.js");
14
13
  const with_style_props_js_1 = require("../../with-style-props.js");
14
+ const checkbox_indicator_js_1 = require("../internal/checkbox-indicator/checkbox-indicator.js");
15
15
  const text_js_1 = require("../typography/text.js");
16
16
  function Checkbox({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
17
17
  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
@@ -20,7 +20,7 @@ function Checkbox({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
20
20
  console.warn('Checkbox requires one of children / aria-label / aria-labelledby for accessibility');
21
21
  }
22
22
  }, [children, ariaLabel, ariaLabelledBy]);
23
- return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Checkbox, { ...props, ref: ref, className: (0, clsx_1.default)('cim-checkbox', UNSAFE_className), style: UNSAFE_style, children: ({ isIndeterminate }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "cim-checkbox-toggle-wrapper", children: (0, jsx_runtime_1.jsx)("div", { className: "cim-checkbox-toggle", children: isIndeterminate ? (0, jsx_runtime_1.jsx)(index_js_1.IconSubtractBold, {}) : (0, jsx_runtime_1.jsx)(index_js_1.IconCheckBold, {}) }) }), children && ((0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "span", variant: "medium", children: children }))] })) }));
23
+ return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Checkbox, { ...props, ref: ref, className: (0, clsx_1.default)('cim-checkbox', 'cim-checkbox-indicator-wrapper', UNSAFE_className), style: UNSAFE_style, children: ({ isIndeterminate, isSelected }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(checkbox_indicator_js_1.CheckboxIndicator, { isIndeterminate: isIndeterminate, isSelected: isSelected }), children && ((0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "span", variant: "medium", children: children }))] })) }));
24
24
  }
25
25
  /**
26
26
  * Allows users to mark an item as selected. Can be used standalone, or as part of `CheckboxGroup`.
@@ -1 +1 @@
1
- {"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAAwG;AACxG,yDAAkD;AAClD,mDAAuE;AACvE,qFAA6E;AAC7E,mEAA2D;AAE3D,mDAA6C;AAyB7C,SAAS,QAAQ,CACf,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAiB,EACrE,GAAmC;IAEnC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,IAAA,gDAAoB,EAAC,GAAG,EAAE;QACxB,IAAI,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC/C,OAAO,CAAC,IAAI,CAAC,oFAAoF,CAAC,CAAC;QACrG,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,uBAAC,gCAAW,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,cAAc,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,YACrG,CAAC,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,CACxB,6DACE,gCAAK,SAAS,EAAC,6BAA6B,YAC1C,gCAAK,SAAS,EAAC,qBAAqB,YAAE,eAAe,CAAC,CAAC,CAAC,uBAAC,2BAAgB,KAAG,CAAC,CAAC,CAAC,uBAAC,wBAAa,KAAG,GAAO,GACnG,EACL,QAAQ,IAAI,CACX,uBAAC,cAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,YAC7B,QAAQ,GACJ,CACR,IACA,CACJ,GACW,CACf,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,SAAS,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC;AAE7C,6BAAQ","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Checkbox as RACCheckbox, type CheckboxProps as RACCheckboxProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheckBold, IconSubtractBold } from '../../icons/index.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface CheckboxProps\n extends\n CommonProps,\n AriaLabelingProps,\n Pick<\n RACCheckboxProps,\n | 'onChange'\n | 'isSelected'\n | 'isIndeterminate'\n | 'isDisabled'\n | 'isReadOnly'\n | 'isRequired'\n | 'isInvalid'\n | 'form'\n | 'name'\n | 'value'\n | 'defaultSelected'\n | 'autoFocus'\n > {\n /** The label rendered next to the checkbox. */\n children?: StringLikeChildren;\n}\n\nfunction Checkbox(\n { children, UNSAFE_className, UNSAFE_style, ...props }: CheckboxProps,\n ref: ForwardedRef<HTMLLabelElement>,\n) {\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!children && !ariaLabel && !ariaLabelledBy) {\n console.warn('Checkbox requires one of children / aria-label / aria-labelledby for accessibility');\n }\n }, [children, ariaLabel, ariaLabelledBy]);\n\n return (\n <RACCheckbox {...props} ref={ref} className={clsx('cim-checkbox', UNSAFE_className)} style={UNSAFE_style}>\n {({ isIndeterminate }) => (\n <>\n <div className=\"cim-checkbox-toggle-wrapper\">\n <div className=\"cim-checkbox-toggle\">{isIndeterminate ? <IconSubtractBold /> : <IconCheckBold />}</div>\n </div>\n {children && (\n <Text as=\"span\" variant=\"medium\">\n {children}\n </Text>\n )}\n </>\n )}\n </RACCheckbox>\n );\n}\n\n/**\n * Allows users to mark an item as selected. Can be used standalone, or as part of `CheckboxGroup`.\n *\n * See [checkbox usage guidelines](https://ui.cimpress.io/components/checkbox/).\n */\nconst _Checkbox = withStyleProps(forwardRef(Checkbox), 'Checkbox');\n\nexport { _Checkbox as Checkbox };\n"]}
1
+ {"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAAwG;AACxG,yDAAkD;AAClD,qFAA6E;AAC7E,mEAA2D;AAC3D,gGAAyF;AAEzF,mDAA6C;AAyB7C,SAAS,QAAQ,CACf,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAiB,EACrE,GAAmC;IAEnC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,IAAA,gDAAoB,EAAC,GAAG,EAAE;QACxB,IAAI,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC/C,OAAO,CAAC,IAAI,CAAC,oFAAoF,CAAC,CAAC;QACrG,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,uBAAC,gCAAW,OACN,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,cAAc,EAAE,gCAAgC,EAAE,gBAAgB,CAAC,EACnF,KAAK,EAAE,YAAY,YAElB,CAAC,EAAE,eAAe,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CACpC,6DACE,uBAAC,yCAAiB,IAAC,eAAe,EAAE,eAAe,EAAE,UAAU,EAAE,UAAU,GAAI,EAC9E,QAAQ,IAAI,CACX,uBAAC,cAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,YAC7B,QAAQ,GACJ,CACR,IACA,CACJ,GACW,CACf,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,SAAS,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC;AAE7C,6BAAQ","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Checkbox as RACCheckbox, type CheckboxProps as RACCheckboxProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.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 type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface CheckboxProps\n extends\n CommonProps,\n AriaLabelingProps,\n Pick<\n RACCheckboxProps,\n | 'onChange'\n | 'isSelected'\n | 'isIndeterminate'\n | 'isDisabled'\n | 'isReadOnly'\n | 'isRequired'\n | 'isInvalid'\n | 'form'\n | 'name'\n | 'value'\n | 'defaultSelected'\n | 'autoFocus'\n > {\n /** The label rendered next to the checkbox. */\n children?: StringLikeChildren;\n}\n\nfunction Checkbox(\n { children, UNSAFE_className, UNSAFE_style, ...props }: CheckboxProps,\n ref: ForwardedRef<HTMLLabelElement>,\n) {\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!children && !ariaLabel && !ariaLabelledBy) {\n console.warn('Checkbox requires one of children / aria-label / aria-labelledby for accessibility');\n }\n }, [children, ariaLabel, ariaLabelledBy]);\n\n return (\n <RACCheckbox\n {...props}\n ref={ref}\n className={clsx('cim-checkbox', 'cim-checkbox-indicator-wrapper', UNSAFE_className)}\n style={UNSAFE_style}\n >\n {({ isIndeterminate, isSelected }) => (\n <>\n <CheckboxIndicator isIndeterminate={isIndeterminate} isSelected={isSelected} />\n {children && (\n <Text as=\"span\" variant=\"medium\">\n {children}\n </Text>\n )}\n </>\n )}\n </RACCheckbox>\n );\n}\n\n/**\n * Allows users to mark an item as selected. Can be used standalone, or as part of `CheckboxGroup`.\n *\n * See [checkbox usage guidelines](https://ui.cimpress.io/components/checkbox/).\n */\nconst _Checkbox = withStyleProps(forwardRef(Checkbox), 'Checkbox');\n\nexport { _Checkbox as Checkbox };\n"]}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=checkbox-indicator.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"checkbox-indicator.d.ts","sourceRoot":"","sources":["../../../../../src/components/internal/checkbox-indicator/checkbox-indicator.tsx"],"names":[],"mappings":""}
@@ -0,0 +1,21 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.CheckboxIndicator = CheckboxIndicator;
7
+ const jsx_runtime_1 = require("react/jsx-runtime");
8
+ const clsx_1 = __importDefault(require("clsx"));
9
+ const index_js_1 = require("../../../icons/index.js");
10
+ // TODO: refactor so that state is accepted through props/context instead of a parent className
11
+ /**
12
+ * Displays a non-interactive, purely visual checkbox indicator.
13
+ * Requires adding a `cim-checkbox-indicator-wrapper` className to the parent element.
14
+ *
15
+ * @internal
16
+ */
17
+ function CheckboxIndicator({ isSelected, isIndeterminate, UNSAFE_className, UNSAFE_style, ...props }) {
18
+ return ((0, jsx_runtime_1.jsx)("div", { ...props, className: (0, clsx_1.default)('cim-checkbox-indicator', UNSAFE_className), style: UNSAFE_style, "data-selected": isSelected, "aria-hidden": true, children: (0, jsx_runtime_1.jsx)("div", { className: "cim-checkbox-indicator-icon", children: isIndeterminate ? (0, jsx_runtime_1.jsx)(index_js_1.IconSubtractBold, {}) : (0, jsx_runtime_1.jsx)(index_js_1.IconCheckBold, {}) }) }));
19
+ }
20
+ CheckboxIndicator.displayName = 'CheckboxIndicator';
21
+ //# sourceMappingURL=checkbox-indicator.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"checkbox-indicator.js","sourceRoot":"","sources":["../../../../../src/components/internal/checkbox-indicator/checkbox-indicator.tsx"],"names":[],"mappings":";;;;;AAcA,8CAkBC;;AAhCD,gDAAwB;AAExB,sDAA0E;AAK1E,+FAA+F;AAC/F;;;;;GAKG;AACH,SAAgB,iBAAiB,CAAC,EAChC,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACe;IACvB,OAAO,CACL,mCACM,KAAK,EACT,SAAS,EAAE,IAAA,cAAI,EAAC,wBAAwB,EAAE,gBAAgB,CAAC,EAC3D,KAAK,EAAE,YAAY,mBACJ,UAAU,iCAGzB,gCAAK,SAAS,EAAC,6BAA6B,YAAE,eAAe,CAAC,CAAC,CAAC,uBAAC,2BAAgB,KAAG,CAAC,CAAC,CAAC,uBAAC,wBAAa,KAAG,GAAO,GAC3G,CACP,CAAC;AACJ,CAAC;AAED,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC","sourcesContent":["import clsx from 'clsx';\nimport type { CheckboxProps as RACCheckboxProps } from 'react-aria-components';\nimport { IconCheckBold, IconSubtractBold } from '../../../icons/index.js';\nimport type { CommonProps } from '../../types.js';\n\ninterface CheckboxIndicatorProps extends CommonProps, Pick<RACCheckboxProps, 'isSelected' | 'isIndeterminate'> {}\n\n// TODO: refactor so that state is accepted through props/context instead of a parent className\n/**\n * Displays a non-interactive, purely visual checkbox indicator.\n * Requires adding a `cim-checkbox-indicator-wrapper` className to the parent element.\n *\n * @internal\n */\nexport function CheckboxIndicator({\n isSelected,\n isIndeterminate,\n UNSAFE_className,\n UNSAFE_style,\n ...props\n}: CheckboxIndicatorProps) {\n return (\n <div\n {...props}\n className={clsx('cim-checkbox-indicator', UNSAFE_className)}\n style={UNSAFE_style}\n data-selected={isSelected}\n aria-hidden\n >\n <div className=\"cim-checkbox-indicator-icon\">{isIndeterminate ? <IconSubtractBold /> : <IconCheckBold />}</div>\n </div>\n );\n}\n\nCheckboxIndicator.displayName = 'CheckboxIndicator';\n"]}
@@ -1,5 +1,5 @@
1
1
  import type { ReactNode, UIEventHandler } from 'react';
2
- import { type MenuItemProps as RACMenuItemProps, type MenuTriggerProps as RACMenuTriggerProps } from 'react-aria-components';
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'> {
5
5
  /** The menu trigger with its associated menu. Provide the trigger as the first child, and the menu as the second child. */
@@ -14,7 +14,7 @@ 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 MenuProps<T extends CollectionItem = CollectionItem> extends CollectionProps<T> {
17
+ export interface MenuProps<T extends CollectionItem = CollectionItem> extends CollectionProps<T>, Pick<RACMenuProps<T>, 'selectedKeys' | 'onSelectionChange' | 'selectionMode'> {
18
18
  /**
19
19
  * The alignment of the menu overlay relative to its trigger.
20
20
  * @default 'start'
@@ -30,7 +30,7 @@ export declare function Menu<T extends CollectionItem>({ align, ...props }: Menu
30
30
  export declare namespace Menu {
31
31
  var displayName: string;
32
32
  }
33
- export interface MenuSectionProps<T extends CollectionItem = CollectionItem> extends CollectionProps<T> {
33
+ export interface MenuSectionProps<T extends CollectionItem = CollectionItem> extends CollectionProps<T>, Pick<RACMenuSectionProps<T>, 'selectedKeys' | 'onSelectionChange' | 'selectionMode'> {
34
34
  /** The ID of the section. Has to be unique across all sections and items. */
35
35
  id?: Key;
36
36
  /** The content to display as the section title. */
@@ -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,EAKL,KAAK,aAAa,IAAI,gBAAgB,EAGtC,KAAK,gBAAgB,IAAI,mBAAmB,EAE7C,MAAM,uBAAuB,CAAC;AAG/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,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IAC9F;;;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,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACrG,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,2CA4BhF;yBA5Be,QAAQ"}
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"}
@@ -11,7 +11,9 @@ exports.MenuItem = MenuItem;
11
11
  const jsx_runtime_1 = require("react/jsx-runtime");
12
12
  const clsx_1 = __importDefault(require("clsx"));
13
13
  const react_aria_components_1 = require("react-aria-components");
14
+ const index_js_1 = require("../../icons/index.js");
14
15
  const is_production_js_1 = require("../../utils/is-production.js");
16
+ const checkbox_indicator_js_1 = require("../internal/checkbox-indicator/checkbox-indicator.js");
15
17
  const collapsible_list_js_1 = require("../internal/collapsible-list/collapsible-list.js");
16
18
  const utils_js_1 = require("../typography/utils.js");
17
19
  /**
@@ -42,7 +44,7 @@ MenuSection.displayName = 'MenuSection';
42
44
  /** Renders a single list item within `Menu`. */
43
45
  function MenuItem({ children, description, icon, ...props }) {
44
46
  const textValue = typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');
45
- return ((0, jsx_runtime_1.jsx)(react_aria_components_1.MenuItem, { ...props, className: "cim-menu-item", textValue: textValue, children: ({ isDisabled }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon, (0, jsx_runtime_1.jsxs)("div", { className: "cim-menu-item-text", children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { slot: "label", className: (0, utils_js_1.textStyle)({ variant: 'body', tone: isDisabled ? 'muted' : 'base' }), children: children }), description && ((0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { slot: "description", className: (0, utils_js_1.textStyle)({ variant: 'small', tone: isDisabled ? 'muted' : 'subtle' }), children: description }))] })] })) }));
47
+ return ((0, jsx_runtime_1.jsx)(react_aria_components_1.MenuItem, { ...props, className: "cim-menu-item cim-checkbox-indicator-wrapper", textValue: textValue, children: ({ isDisabled, isSelected, selectionMode }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [selectionMode === 'single' && (0, jsx_runtime_1.jsx)(index_js_1.IconCheckBold, { UNSAFE_className: "cim-menu-item-selection-indicator" }), selectionMode === 'multiple' && (0, jsx_runtime_1.jsx)(checkbox_indicator_js_1.CheckboxIndicator, { isSelected: isSelected }), icon, (0, jsx_runtime_1.jsxs)("div", { className: "cim-menu-item-text", children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { slot: "label", className: (0, utils_js_1.textStyle)({ variant: 'body', tone: isDisabled ? 'muted' : 'base' }), children: children }), description && ((0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { slot: "description", className: (0, utils_js_1.textStyle)({ variant: 'small', tone: isDisabled ? 'muted' : 'subtle' }), children: description }))] })] })) }));
46
48
  }
47
49
  MenuItem.displayName = 'MenuItem';
48
50
  //# 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 MenuItem as RACMenuItem,\n type MenuItemProps as RACMenuItemProps,\n MenuSection as RACMenuSection,\n MenuTrigger as RACMenuTrigger,\n type MenuTriggerProps as RACMenuTriggerProps,\n Text as RACText,\n} from 'react-aria-components';\nimport { isProduction } from '../../utils/is-production.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> extends CollectionProps<T> {\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> 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 `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 }) => (\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 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 +1 @@
1
- {"version":3,"file":"tag-field.d.ts","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAqB,KAAK,cAAc,EAAkD,MAAM,OAAO,CAAC;AAC/G,OAAO,EAUL,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,gBAAgB,IAAI,mBAAmB,EAK7C,MAAM,uBAAuB,CAAC;AAS/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,KAAK,EACV,QAAQ,EACR,cAAc,EACd,eAAe,EACf,WAAW,EACX,yBAAyB,EACzB,GAAG,EACH,kBAAkB,EACnB,MAAM,aAAa,CAAC;AAMrB,gFAAgF;AAChF,MAAM,WAAW,uBAAuB;IACtC,yCAAyC;IACzC,YAAY,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IAC9B,uCAAuC;IACvC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CACtE,SACE,WAAW,EACX,yBAAyB,CAAC,uBAAuB,CAAC,EAClD,eAAe,CAAC,CAAC,CAAC,EAClB,QAAQ,CAAC,WAAW,CAAC,EACrB,IAAI,CACF,gBAAgB,CAAC,CAAC,CAAC,EACjB,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,YAAY,GACZ,mBAAmB,GACnB,WAAW,GACX,eAAe,GACf,SAAS,GACT,QAAQ,GACR,cAAc,CACjB,EACD,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,kBAAkB,CAAC;IAC5C,kEAAkE;IAClE,YAAY,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC7B,kEAAkE;IAClE,mBAAmB,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IACpC,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IAC7C;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC3C;AAED,8DAA8D;AAC9D,MAAM,WAAW,WAAW;IAC1B,2DAA2D;IAC3D,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AA8PD;;;;GAIG;AACH,QAAA,MAAM,SAAS,GAjQG,CAAC,SAAS,cAAc,iKAiQwB,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC;AAEjC,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,IAAI,CACvE,mBAAmB,CAAC,CAAC,CAAC,EACtB,YAAY,GAAG,cAAc,GAAG,YAAY,CAC7C;IACC,0EAA0E;IAC1E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;CAC9B;AAED,oDAAoD;AACpD,wBAAgB,YAAY,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CAqBlG;yBArBe,YAAY;;;AAyB5B,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACxF,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,0DAA0D;AAC1D,wBAAgB,eAAe,CAAC,CAAC,SAAS,cAAc,EAAE,EACxD,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAezB;yBApBe,eAAe"}
1
+ {"version":3,"file":"tag-field.d.ts","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAqB,KAAK,cAAc,EAAkD,MAAM,OAAO,CAAC;AAC/G,OAAO,EAUL,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,gBAAgB,IAAI,mBAAmB,EAK7C,MAAM,uBAAuB,CAAC;AAU/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,KAAK,EACV,QAAQ,EACR,cAAc,EACd,eAAe,EACf,WAAW,EACX,yBAAyB,EACzB,GAAG,EACH,kBAAkB,EACnB,MAAM,aAAa,CAAC;AAMrB,gFAAgF;AAChF,MAAM,WAAW,uBAAuB;IACtC,yCAAyC;IACzC,YAAY,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IAC9B,uCAAuC;IACvC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CACtE,SACE,WAAW,EACX,yBAAyB,CAAC,uBAAuB,CAAC,EAClD,eAAe,CAAC,CAAC,CAAC,EAClB,QAAQ,CAAC,WAAW,CAAC,EACrB,IAAI,CACF,gBAAgB,CAAC,CAAC,CAAC,EACjB,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,YAAY,GACZ,mBAAmB,GACnB,WAAW,GACX,eAAe,GACf,SAAS,GACT,QAAQ,GACR,cAAc,CACjB,EACD,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,kBAAkB,CAAC;IAC5C,kEAAkE;IAClE,YAAY,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC7B,kEAAkE;IAClE,mBAAmB,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IACpC,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IAC7C;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC3C;AAED,8DAA8D;AAC9D,MAAM,WAAW,WAAW;IAC1B,2DAA2D;IAC3D,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AA8PD;;;;GAIG;AACH,QAAA,MAAM,SAAS,GAjQG,CAAC,SAAS,cAAc,iKAiQwB,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC;AAEjC,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,IAAI,CACvE,mBAAmB,CAAC,CAAC,CAAC,EACtB,YAAY,GAAG,cAAc,GAAG,YAAY,CAC7C;IACC,0EAA0E;IAC1E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;CAC9B;AAED,oDAAoD;AACpD,wBAAgB,YAAY,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CAiBlG;yBAjBe,YAAY;;;AAqB5B,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACxF,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,0DAA0D;AAC1D,wBAAgB,eAAe,CAAC,CAAC,SAAS,cAAc,EAAE,EACxD,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAezB;yBApBe,eAAe"}
@@ -21,6 +21,7 @@ const index_js_1 = require("../../icons/index.js");
21
21
  const is_production_js_1 = require("../../utils/is-production.js");
22
22
  const use_production_warning_js_1 = require("../../utils/use-production-warning.js");
23
23
  const with_style_props_js_1 = require("../../with-style-props.js");
24
+ const checkbox_indicator_js_1 = require("../internal/checkbox-indicator/checkbox-indicator.js");
24
25
  const collapsible_list_js_1 = require("../internal/collapsible-list/collapsible-list.js");
25
26
  const form_field_js_1 = require("../internal/form-field/form-field.js");
26
27
  const utils_js_1 = require("../typography/utils.js");
@@ -136,7 +137,7 @@ exports.TagField = _TagField;
136
137
  /** Renders a single list item within `TagField`. */
137
138
  function TagFieldItem({ children, ...props }) {
138
139
  const textValue = typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');
139
- return ((0, jsx_runtime_1.jsx)(react_aria_components_1.ListBoxItem, { ...props, className: "cim-tag-field-item cim-checkbox", textValue: textValue, children: ({ isDisabled }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "cim-checkbox-toggle-wrapper", "aria-hidden": true, children: (0, jsx_runtime_1.jsx)("div", { className: "cim-checkbox-toggle", children: (0, jsx_runtime_1.jsx)(index_js_1.IconCheckBold, {}) }) }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { slot: "label", className: (0, utils_js_1.textStyle)({ variant: 'medium', tone: isDisabled ? 'muted' : 'base' }), children: children })] })) }));
140
+ return ((0, jsx_runtime_1.jsx)(react_aria_components_1.ListBoxItem, { ...props, className: "cim-tag-field-item cim-checkbox-indicator-wrapper", textValue: textValue, children: ({ isDisabled }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(checkbox_indicator_js_1.CheckboxIndicator, {}), (0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { slot: "label", className: (0, utils_js_1.textStyle)({ variant: 'medium', tone: isDisabled ? 'muted' : 'base' }), children: children })] })) }));
140
141
  }
141
142
  TagFieldItem.displayName = 'TagFieldItem';
142
143
  /** 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":"AAAA,YAAY,CAAC;;;;;;;AAkXb,oCAqBC;AAYD,0CAoBC;;AAraD,2CAAqD;AACrD,6CAAmE;AACnE,8CAA6D;AAC7D,gDAA0D;AAC1D,gDAAwB;AACxB,iCAA+G;AAC/G,iEAgB+B;AAC/B,yDAAkD;AAClD,kFAA2E;AAC3E,mDAAsE;AACtE,mEAA4D;AAC5D,qFAA6E;AAC7E,mEAA2D;AAC3D,0FAAmF;AACnF,wEAA4G;AAW5G,qDAAmD;AACnD,6DAAqD;AACrD,mEAA0D;AAC1D,2DAAmD;AAoDnD,SAAS,QAAQ,CACf,EACE,KAAK,EACL,WAAW,EACX,KAAK,EACL,KAAK,EACL,QAAQ,EACR,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,UAAU,EAAE,kBAAkB,EAC9B,iBAAiB,EAAE,yBAAyB,EAC5C,aAAa,EACb,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,YAAY,EAAE,oBAAoB,EAClC,mBAAmB,EAAE,2BAA2B,EAChD,iBAAiB,EACjB,EAAE,EACF,gBAAgB,EAChB,aAAa,GAAG,KAAK,EACrB,MAAM,EACN,GAAG,KAAK,EACS,EACnB,GAAiC;IAEjC,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAC;IAEhD,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAEhH,IAAA,gDAAoB,EAAC,GAAG,EAAE;QACxB,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,iFAAiF,CAAC,CAAC;QAClG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,IAAI,CAAC,IAAA,+BAAY,GAAE,IAAI,KAAK,IAAI,IAAI,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;QACvE,OAAO,CAAC,IAAI,CAAC,yEAAyE,CAAC,CAAC;IAC1F,CAAC;IAED,MAAM,QAAQ,GAAG,IAAA,+CAAoB,EAAC,UAAU,CAAC,CAAC;IAElD,IAAA,2BAAmB,EACjB,MAAM,EACN,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE;KACvC,CAAC,EACF,EAAE,CACH,CAAC;IAEF,QAAQ;IAER,MAAM,CAAC,mBAAmB,CAAC,GAAG,IAAA,gBAAQ,EAAC,GAAG,EAAE,CAAC,2BAA2B,IAAI,IAAI,GAAG,EAAO,CAAC,CAAC;IAC5F,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,0BAAkB,EACxD,oBAAoB,EACpB,mBAAmB,EACnB,iBAAiB,CAClB,CAAC;IACF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,0BAAkB,EACpD,kBAAkB,EAClB,yBAAyB,IAAI,EAAE,EAC/B,aAAa,CACd,CAAC;IAEF,MAAM,WAAW,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC/B,0DAA0D;QAC1D,IAAI,YAAY,YAAY,GAAG,EAAE,CAAC;YAChC,OAAO,IAAI,GAAG,CAAM,YAAY,CAAC,MAAM,EAAE,CAAC,CAAC;QAC7C,CAAC;QAED,OAAO,IAAI,GAAG,CAAM,YAAY,CAAC,CAAC;IACpC,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,aAAa;IAEb,MAAM,OAAO,GAAG,IAAA,aAAK,EAAC,EAAE,CAAC,CAAC;IAC1B,MAAM,YAAY,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAC;IAEpD,MAAM,eAAe,GAAG,IAAA,6BAAsB,EAAC;QAC7C,IAAI;QACJ,KAAK,EAAE,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,CAAC,EAAE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC;QAC5F,SAAS;QACT,UAAU;QACV,QAAQ;QACR,kBAAkB,EAAE,QAAQ;KAC7B,CAAC,CAAC;IAEH,MAAM,CAAC,mBAAmB,CAAC,GAAG,IAAA,gBAAQ,EAAC,YAAY,CAAC,CAAC;IACrD,MAAM,CAAC,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,EAAC,UAAU,CAAC,CAAC;IAEjD,IAAA,oBAAY,EACV,YAAY,EACZ,CAAC,2BAA2B,IAAI,mBAAmB,EAAE,yBAAyB,IAAI,iBAAiB,CAAC,EACpG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE;QACT,eAAe,CAAC,CAAC,CAAC,CAAC;QACnB,aAAa,CAAC,CAAC,CAAC,CAAC;IACnB,CAAC,CACF,CAAC;IAEF,IAAA,wBAAiB,EACf;QACE,KAAK,EAAE,GAAG,EAAE;YACV,gFAAgF;YAChF,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC;QAC5C,CAAC;QACD,SAAS;QACT,UAAU;QACV,QAAQ;QACR,kBAAkB,EAAE,QAAQ;KAC7B,EACD,eAAe,EACf,YAAY,CACb,CAAC;IAEF,iBAAiB;IAEjB,6DAA6D;IAC7D,MAAM,iBAAiB,GAAG,IAAA,cAAM,EAAC,UAAU,CAAC,CAAC;IAC7C,MAAM,kBAAkB,GAAG,IAAA,cAAM,EAAC,WAAW,CAAC,CAAC;IAE/C,MAAM,aAAa,GAAG,CAAC,SAAkB,EAAE,EAAE;QAC3C,IAAI,SAAS,EAAE,CAAC;YACd,iBAAiB,CAAC,OAAO,GAAG,UAAU,CAAC;YACvC,kBAAkB,CAAC,OAAO,GAAG,WAAW,CAAC;QAC3C,CAAC;aAAM,IAAI,UAAU,KAAK,iBAAiB,CAAC,OAAO,IAAI,WAAW,KAAK,kBAAkB,CAAC,OAAO,EAAE,CAAC;YAClG,eAAe,CAAC,gBAAgB,EAAE,CAAC;QACrC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,qBAAqB,GAAG,CAAC,GAAQ,EAAE,EAAE;QACzC,IAAI,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;YACzB,uFAAuF;YACvF,oDAAoD;YACpD,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QAC1B,CAAC;aAAM,CAAC;YACN,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QACvB,CAAC;QAED,eAAe,CAAC,IAAI,GAAG,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;QAC/C,eAAe,CAAC,gBAAgB,EAAE,CAAC;IACrC,CAAC,CAAC;IAEF,aAAa;IAEb,MAAM,aAAa,GAAG,IAAA,iBAAS,EAAC,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;IAExD,MAAM,cAAc,GAAG,IAAA,iBAAS,EAAC;QAC/B,OAAO,CAAC,KAAK,IAAI,eAAe,CAAC,iBAAiB,CAAC,gBAAgB,CAAC;QACpE,eAAe,CAAC,iBAAiB,CAAC,SAAS;KAC5C,CAAC,CAAC;IAEH,OAAO,CACL,6DACE,uBAAC,gCAAW,OACN,KAAK,EACT,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,OAAO,EACX,SAAS,EAAE,IAAA,cAAI,EAAC,eAAe,EAAE,eAAe,EAAE,gBAAgB,CAAC,EACnE,KAAK,EAAE,YAAY;gBACnB,6DAA6D;gBAC7D,WAAW,EAAE,IAAI,EACjB,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAC,OAAO,EACnB,UAAU,EAAE,UAAU,mBACP,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC5C,iBAAiB,EAAE,CAAC,GAAG,EAAE,EAAE;oBACzB,IAAI,GAAG,EAAE,CAAC;wBACR,qBAAqB,CAAC,GAAG,CAAC,CAAC;oBAC7B,CAAC;gBACH,CAAC,YAED,wBAAC,gCAAW,IACV,MAAM,EAAE;wBACN,CAAC,mCAAc,EAAE,EAAE,KAAK,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC;wBACzG,CAAC,oCAAe,EAAE,EAAE,SAAS,EAAE,eAAe,CAAC,iBAAiB,CAAC,SAAS,EAAE,UAAU,EAAE,CAAC;wBACzF,CAAC,yCAAoB,EAAE,eAAe,CAAC,iBAAiB,CAAC;qBAC1D,aAED,uBAAC,8BAAc,IAAC,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,YAC3D,KAAK,GACS,EAEjB,wBAAC,6BAAQ,IAAC,SAAS,EAAC,2BAA2B,aAC7C,uBAAC,kCAAa,IACZ,QAAQ,EAAE,QAAQ,sBACA,KAAK,CAAC,kBAAkB,CAAC,EAC3C,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,eAAe,CAAC,iBAAiB,CAAC,SAAS,EACtD,WAAW,EACT,WAAW,CAAC,IAAI,KAAK,CAAC,IAAI,WAAW;wCACnC,CAAC,CAAC,WAAW;wCACb,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,eAAe,EAAE,EAAE,iBAAiB,EAAE,WAAW,CAAC,IAAI,EAAE,CAAC,EAE/E,aAAa,EAAE,aAAa,GAC5B,EACF,uBAAC,8BAAS,IAAC,SAAS,EAAC,sBAAsB,YACzC,uBAAC,0BAAe,KAAG,GACT,IACH,EAEX,uBAAC,8BAAc,cAAE,KAAK,GAAkB,EACxC,uBAAC,oCAAoB,cAAE,WAAW,GAAwB,EAE1D,uBAAC,gCAAY,IACX,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,WAAW,EACzB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,EAAE,qBAAqB,GAC/B,EAEF,uBAAC,qCAAe,IACd,MAAM,EAAE,CAAC,EACT,SAAS,EAAE,GAAG,YAEd,uBAAC,uCAAe,IACd,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,WAAW,EACzB,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,aAAa,YAE3B,QAAQ,GACO,GACF,IACN,GACF,EAGd,uBAAC,6BAAQ,IACP,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAC1B,KAAK,EAAE,WAAW,CAAC,IAAI,IAAI,EAAE,EAC7B,QAAQ,EAAE,UAAU,kBACN,eAAe,CAAC,iBAAiB,CAAC,SAAS,IAAI,SAAS,EACtE,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,GAClB,EAGD,IAAI;gBACH,CAAC,GAAG,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,kCAAO,IAAI,EAAC,QAAQ,EAAa,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,IAA3C,KAAK,CAA0C,CAAC,IAC3G,CACJ,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,SAAS,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC;AAE7C,6BAAQ;AAY9B,oDAAoD;AACpD,SAAgB,YAAY,CAA2B,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAwB;IACjG,MAAM,SAAS,GACb,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAEhH,OAAO,CACL,uBAAC,mCAAc,OAAK,KAAK,EAAE,SAAS,EAAC,iCAAiC,EAAC,SAAS,EAAE,SAAS,YACxF,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CACnB,6DACE,gCAAK,SAAS,EAAC,6BAA6B,iCAC1C,gCAAK,SAAS,EAAC,qBAAqB,YAClC,uBAAC,wBAAa,KAAG,GACb,GACF,EAEN,uBAAC,4BAAO,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,YACnG,QAAQ,GACD,IACT,CACJ,GACc,CAClB,CAAC;AACJ,CAAC;AAED,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAS1C,0DAA0D;AAC1D,SAAgB,eAAe,CAA2B,EACxD,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACgB;IACxB,IAAI,CAAC,IAAA,+BAAY,GAAE,IAAI,KAAK,IAAI,IAAI,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;QACvE,OAAO,CAAC,IAAI,CAAC,gFAAgF,CAAC,CAAC;IACjG,CAAC;IAED,OAAO,CACL,wBAAC,sCAAiB,OAAK,KAAK,EAAE,SAAS,EAAC,uBAAuB,aAC7D,uBAAC,8BAAS,IACR,SAAS,EAAE,IAAA,cAAI,EAAC,8BAA8B,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,YAExG,KAAK,GACI,EACZ,uBAAC,kCAAa,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAiB,IACrC,CACrB,CAAC;AACJ,CAAC;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["'use client';\n\nimport { useFormValidation } from '@react-aria/form';\nimport { useFormReset, useId, useSlotId } from '@react-aria/utils';\nimport { useFormValidationState } from '@react-stately/form';\nimport { useControlledState } from '@react-stately/utils';\nimport clsx from 'clsx';\nimport { type ForwardedRef, type UIEventHandler, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport {\n Button as RACButton,\n Collection as RACCollection,\n ComboBox as RACComboBox,\n Group as RACGroup,\n Header as RACHeader,\n Input as RACInput,\n ListBoxItem as RACListBoxItem,\n ListBoxSection as RACListBoxSection,\n Text as RACText,\n type ComboBoxProps as RACComboBoxProps,\n type ListBoxItemProps as RACListBoxItemProps,\n Provider as RACProvider,\n TextContext as RACTextContext,\n GroupContext as RACGroupContext,\n FieldErrorContext as RACFieldErrorContext,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/localization-provider.js';\nimport { IconCheckBold, 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 { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { TagGroupProps } from '../tag/tag-group.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';\nimport { TagFieldTags } from './tag-field-tags.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 isReadOnly,\n inputValue: consumerInputValue,\n defaultInputValue: defaultConsumerInputValue,\n onInputChange,\n form,\n name,\n validate,\n onScroll,\n selectedKeys: consumerSelectedKeys,\n defaultSelectedKeys: defaultConsumerSelectedKeys,\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, isInvalid } = 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 messages = useLocalizedMessages('tagField');\n\n useImperativeHandle(\n apiRef,\n () => ({\n focus: () => inputRef.current?.focus(),\n }),\n [],\n );\n\n // State\n\n const [defaultSelectedKeys] = useState(() => defaultConsumerSelectedKeys ?? new Set<Key>());\n const [selectedKeys, setSelectedKeys] = useControlledState(\n consumerSelectedKeys,\n defaultSelectedKeys,\n onSelectionChange,\n );\n const [inputValue, setInputValue] = useControlledState(\n consumerInputValue,\n defaultConsumerInputValue ?? '',\n onInputChange,\n );\n\n const selectedSet = useMemo(() => {\n // eslint-disable-next-line unicorn/no-instanceof-builtins\n if (selectedKeys instanceof Set) {\n return new Set<Key>(selectedKeys.values());\n }\n\n return new Set<Key>(selectedKeys);\n }, [selectedKeys]);\n\n // Validation\n\n const inputId = useId(id);\n const formInputRef = useRef<HTMLInputElement>(null);\n\n const validationState = useFormValidationState({\n name,\n value: useMemo(() => ({ selectedKeys: selectedSet, inputValue }), [selectedSet, inputValue]),\n isInvalid,\n isRequired,\n validate,\n validationBehavior: 'native',\n });\n\n const [initialSelectedKeys] = useState(selectedKeys);\n const [initialInputValue] = useState(inputValue);\n\n useFormReset<[Iterable<Key>, string]>(\n formInputRef,\n [defaultConsumerSelectedKeys ?? initialSelectedKeys, defaultConsumerInputValue ?? initialInputValue],\n ([a, b]) => {\n setSelectedKeys(a);\n setInputValue(b);\n },\n );\n\n useFormValidation(\n {\n focus: () => {\n // Querying by element ID because a ref is always null here, I don't know why :(\n document.getElementById(inputId)?.focus();\n },\n isInvalid,\n isRequired,\n validate,\n validationBehavior: 'native',\n },\n validationState,\n formInputRef,\n );\n\n // Event handlers\n\n // Commit validation on input blur if the values have changed\n const inputValueOnFocus = useRef(inputValue);\n const selectedSetOnFocus = useRef(selectedSet);\n\n const onFocusChange = (isFocused: boolean) => {\n if (isFocused) {\n inputValueOnFocus.current = inputValue;\n selectedSetOnFocus.current = selectedSet;\n } else if (inputValue !== inputValueOnFocus.current || selectedSet !== selectedSetOnFocus.current) {\n validationState.commitValidation();\n }\n };\n\n const onItemSelectionChange = (key: Key) => {\n if (selectedSet.has(key)) {\n // This is a temporary mutation followed immediately by a state update, so this is fine\n // eslint-disable-next-line react-hooks/immutability\n selectedSet.delete(key);\n } else {\n selectedSet.add(key);\n }\n\n setSelectedKeys(new Set(selectedSet.values()));\n validationState.commitValidation();\n };\n\n // Text slots\n\n const descriptionId = useSlotId([Boolean(description)]);\n\n const errorMessageId = useSlotId([\n Boolean(error || validationState.displayValidation.validationErrors),\n validationState.displayValidation.isInvalid,\n ]);\n\n return (\n <>\n <RACComboBox\n {...props}\n ref={ref}\n id={inputId}\n className={clsx('cim-combo-box', 'cim-tag-field', UNSAFE_className)}\n style={UNSAFE_style}\n // Force no internal selection - we handle selection manually\n selectedKey={null}\n inputValue={inputValue}\n onInputChange={setInputValue}\n menuTrigger=\"focus\"\n isReadOnly={isReadOnly}\n data-readonly={isReadOnly ? true : undefined}\n onSelectionChange={(key) => {\n if (key) {\n onItemSelectionChange(key);\n }\n }}\n >\n <RACProvider\n values={[\n [RACTextContext, { slots: { description: { id: descriptionId }, errorMessage: { id: errorMessageId } } }],\n [RACGroupContext, { isInvalid: validationState.displayValidation.isInvalid, isDisabled }],\n [RACFieldErrorContext, validationState.displayValidation],\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 isRequired={isRequired}\n isInvalid={validationState.displayValidation.isInvalid}\n placeholder={\n selectedSet.size === 0 && placeholder\n ? placeholder\n : messages.format('itemsSelected', { selectedItemCount: selectedSet.size })\n }\n onFocusChange={onFocusChange}\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 <TagFieldTags<T>\n inputId={inputId}\n selectedKeys={selectedSet}\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n renderEmptyState={renderEmptyState}\n onRemove={onItemSelectionChange}\n />\n\n <CollapsibleList\n offset={5} // 1px border + 4px actual offset\n maxHeight={315}\n >\n <TagFieldListBox<T>\n inputId={inputId}\n items={items}\n selectedKeys={selectedSet}\n setSelectedKeys={setSelectedKeys}\n onScroll={onScroll}\n isVirtualized={isVirtualized}\n >\n {children}\n </TagFieldListBox>\n </CollapsibleList>\n </RACProvider>\n </RACComboBox>\n\n {/* This input is used for native form validation. We can't use the combo box input because its value has no relation to the selected values. */}\n <RACInput\n ref={formInputRef}\n style={{ display: 'none' }}\n value={selectedSet.size || ''}\n required={isRequired}\n aria-invalid={validationState.displayValidation.isInvalid || undefined}\n onChange={() => {}}\n />\n\n {/* These hidden inputs provide values when a form is submitted. */}\n {name &&\n [...selectedSet].map((value) => <input type=\"hidden\" key={value} form={form} name={name} value={value} />)}\n </>\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\" textValue={textValue}>\n {({ isDisabled }) => (\n <>\n <div className=\"cim-checkbox-toggle-wrapper\" aria-hidden>\n <div className=\"cim-checkbox-toggle\">\n <IconCheckBold />\n </div>\n </div>\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 { useFormValidation } from '@react-aria/form';\nimport { useFormReset, useId, useSlotId } from '@react-aria/utils';\nimport { useFormValidationState } from '@react-stately/form';\nimport { useControlledState } from '@react-stately/utils';\nimport clsx from 'clsx';\nimport { type ForwardedRef, type UIEventHandler, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport {\n Button as RACButton,\n Collection as RACCollection,\n ComboBox as RACComboBox,\n Group as RACGroup,\n Header as RACHeader,\n Input as RACInput,\n ListBoxItem as RACListBoxItem,\n ListBoxSection as RACListBoxSection,\n Text as RACText,\n type ComboBoxProps as RACComboBoxProps,\n type ListBoxItemProps as RACListBoxItemProps,\n Provider as RACProvider,\n TextContext as RACTextContext,\n GroupContext as RACGroupContext,\n FieldErrorContext as RACFieldErrorContext,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/localization-provider.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 type { TagGroupProps } from '../tag/tag-group.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';\nimport { TagFieldTags } from './tag-field-tags.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 isReadOnly,\n inputValue: consumerInputValue,\n defaultInputValue: defaultConsumerInputValue,\n onInputChange,\n form,\n name,\n validate,\n onScroll,\n selectedKeys: consumerSelectedKeys,\n defaultSelectedKeys: defaultConsumerSelectedKeys,\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, isInvalid } = 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 messages = useLocalizedMessages('tagField');\n\n useImperativeHandle(\n apiRef,\n () => ({\n focus: () => inputRef.current?.focus(),\n }),\n [],\n );\n\n // State\n\n const [defaultSelectedKeys] = useState(() => defaultConsumerSelectedKeys ?? new Set<Key>());\n const [selectedKeys, setSelectedKeys] = useControlledState(\n consumerSelectedKeys,\n defaultSelectedKeys,\n onSelectionChange,\n );\n const [inputValue, setInputValue] = useControlledState(\n consumerInputValue,\n defaultConsumerInputValue ?? '',\n onInputChange,\n );\n\n const selectedSet = useMemo(() => {\n // eslint-disable-next-line unicorn/no-instanceof-builtins\n if (selectedKeys instanceof Set) {\n return new Set<Key>(selectedKeys.values());\n }\n\n return new Set<Key>(selectedKeys);\n }, [selectedKeys]);\n\n // Validation\n\n const inputId = useId(id);\n const formInputRef = useRef<HTMLInputElement>(null);\n\n const validationState = useFormValidationState({\n name,\n value: useMemo(() => ({ selectedKeys: selectedSet, inputValue }), [selectedSet, inputValue]),\n isInvalid,\n isRequired,\n validate,\n validationBehavior: 'native',\n });\n\n const [initialSelectedKeys] = useState(selectedKeys);\n const [initialInputValue] = useState(inputValue);\n\n useFormReset<[Iterable<Key>, string]>(\n formInputRef,\n [defaultConsumerSelectedKeys ?? initialSelectedKeys, defaultConsumerInputValue ?? initialInputValue],\n ([a, b]) => {\n setSelectedKeys(a);\n setInputValue(b);\n },\n );\n\n useFormValidation(\n {\n focus: () => {\n // Querying by element ID because a ref is always null here, I don't know why :(\n document.getElementById(inputId)?.focus();\n },\n isInvalid,\n isRequired,\n validate,\n validationBehavior: 'native',\n },\n validationState,\n formInputRef,\n );\n\n // Event handlers\n\n // Commit validation on input blur if the values have changed\n const inputValueOnFocus = useRef(inputValue);\n const selectedSetOnFocus = useRef(selectedSet);\n\n const onFocusChange = (isFocused: boolean) => {\n if (isFocused) {\n inputValueOnFocus.current = inputValue;\n selectedSetOnFocus.current = selectedSet;\n } else if (inputValue !== inputValueOnFocus.current || selectedSet !== selectedSetOnFocus.current) {\n validationState.commitValidation();\n }\n };\n\n const onItemSelectionChange = (key: Key) => {\n if (selectedSet.has(key)) {\n // This is a temporary mutation followed immediately by a state update, so this is fine\n // eslint-disable-next-line react-hooks/immutability\n selectedSet.delete(key);\n } else {\n selectedSet.add(key);\n }\n\n setSelectedKeys(new Set(selectedSet.values()));\n validationState.commitValidation();\n };\n\n // Text slots\n\n const descriptionId = useSlotId([Boolean(description)]);\n\n const errorMessageId = useSlotId([\n Boolean(error || validationState.displayValidation.validationErrors),\n validationState.displayValidation.isInvalid,\n ]);\n\n return (\n <>\n <RACComboBox\n {...props}\n ref={ref}\n id={inputId}\n className={clsx('cim-combo-box', 'cim-tag-field', UNSAFE_className)}\n style={UNSAFE_style}\n // Force no internal selection - we handle selection manually\n selectedKey={null}\n inputValue={inputValue}\n onInputChange={setInputValue}\n menuTrigger=\"focus\"\n isReadOnly={isReadOnly}\n data-readonly={isReadOnly ? true : undefined}\n onSelectionChange={(key) => {\n if (key) {\n onItemSelectionChange(key);\n }\n }}\n >\n <RACProvider\n values={[\n [RACTextContext, { slots: { description: { id: descriptionId }, errorMessage: { id: errorMessageId } } }],\n [RACGroupContext, { isInvalid: validationState.displayValidation.isInvalid, isDisabled }],\n [RACFieldErrorContext, validationState.displayValidation],\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 isRequired={isRequired}\n isInvalid={validationState.displayValidation.isInvalid}\n placeholder={\n selectedSet.size === 0 && placeholder\n ? placeholder\n : messages.format('itemsSelected', { selectedItemCount: selectedSet.size })\n }\n onFocusChange={onFocusChange}\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 <TagFieldTags<T>\n inputId={inputId}\n selectedKeys={selectedSet}\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n renderEmptyState={renderEmptyState}\n onRemove={onItemSelectionChange}\n />\n\n <CollapsibleList\n offset={5} // 1px border + 4px actual offset\n maxHeight={315}\n >\n <TagFieldListBox<T>\n inputId={inputId}\n items={items}\n selectedKeys={selectedSet}\n setSelectedKeys={setSelectedKeys}\n onScroll={onScroll}\n isVirtualized={isVirtualized}\n >\n {children}\n </TagFieldListBox>\n </CollapsibleList>\n </RACProvider>\n </RACComboBox>\n\n {/* This input is used for native form validation. We can't use the combo box input because its value has no relation to the selected values. */}\n <RACInput\n ref={formInputRef}\n style={{ display: 'none' }}\n value={selectedSet.size || ''}\n required={isRequired}\n aria-invalid={validationState.displayValidation.isInvalid || undefined}\n onChange={() => {}}\n />\n\n {/* These hidden inputs provide values when a form is submitted. */}\n {name &&\n [...selectedSet].map((value) => <input type=\"hidden\" key={value} form={form} name={name} value={value} />)}\n </>\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 +1 @@
1
- {"version":3,"file":"toast-queue.d.ts","sourceRoot":"","sources":["../../../../src/components/toast/toast-queue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,IAAI,aAAa,EAAwC,MAAM,uBAAuB,CAAC;AAEnH,OAAO,KAAK,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAM9E,eAAO,MAAM,kBAAkB,qCAU7B,CAAC;AAEH;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,qBAAqB,GAAG,MAAM,CAAC;IAC/D;;;OAGG;IACH,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,qBAAqB,GAAG,MAAM,CAAC;IAClE;;;OAGG;IACH,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,qBAAqB,GAAG,MAAM,CAAC;IAClE;;;OAGG;IACH,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,qBAAqB,GAAG,MAAM,CAAC;IACnE;;;OAGG;IACH,KAAK,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB;;OAEG;IACH,KAAK,IAAI,IAAI,CAAC;CACf;AAED,eAAO,MAAM,mBAAmB,EAAE,mBA2CjC,CAAC"}
1
+ {"version":3,"file":"toast-queue.d.ts","sourceRoot":"","sources":["../../../../src/components/toast/toast-queue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE7E,OAAO,KAAK,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAI9E,eAAO,MAAM,kBAAkB,qCAU7B,CAAC;AAcH;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,qBAAqB,GAAG,MAAM,CAAC;IAC/D;;;OAGG;IACH,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,qBAAqB,GAAG,MAAM,CAAC;IAClE;;;OAGG;IACH,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,qBAAqB,GAAG,MAAM,CAAC;IAClE;;;OAGG;IACH,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,qBAAqB,GAAG,MAAM,CAAC;IACnE;;;OAGG;IACH,KAAK,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB;;OAEG;IACH,KAAK,IAAI,IAAI,CAAC;CACf;AAED,eAAO,MAAM,mBAAmB,EAAE,mBA2CjC,CAAC"}
@@ -3,9 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.UNSTABLE_toastQueue = exports.internalToastQueue = void 0;
4
4
  const react_aria_components_1 = require("react-aria-components");
5
5
  const react_dom_1 = require("react-dom");
6
- const DEFAULT_TOAST_OPTIONS = {
7
- timeout: 5000,
8
- };
6
+ const MIN_TOAST_TIMEOUT = 5000;
9
7
  exports.internalToastQueue = new react_aria_components_1.UNSTABLE_ToastQueue({
10
8
  wrapUpdate(fn) {
11
9
  if ('startViewTransition' in document) {
@@ -18,30 +16,37 @@ exports.internalToastQueue = new react_aria_components_1.UNSTABLE_ToastQueue({
18
16
  }
19
17
  },
20
18
  });
19
+ function addToast(content, options) {
20
+ if (options?.timeout != null && options.timeout > 0 && options?.timeout <= MIN_TOAST_TIMEOUT) {
21
+ console.warn(`[ToastQueue] The specified timeout (${options.timeout} ms) is less than the minimum allowed (${MIN_TOAST_TIMEOUT} ms). It will be adjusted to the minimum.`);
22
+ }
23
+ const timeout = Math.max(options?.timeout ?? MIN_TOAST_TIMEOUT, MIN_TOAST_TIMEOUT);
24
+ return exports.internalToastQueue.add(content, { ...options, timeout });
25
+ }
21
26
  exports.UNSTABLE_toastQueue = {
22
27
  info(message, options) {
23
- return exports.internalToastQueue.add({
28
+ return addToast({
24
29
  message: message,
25
30
  tone: 'info',
26
- }, { ...DEFAULT_TOAST_OPTIONS, ...options });
31
+ }, options);
27
32
  },
28
33
  success(message, options) {
29
- return exports.internalToastQueue.add({
34
+ return addToast({
30
35
  message: message,
31
36
  tone: 'success',
32
- }, { ...DEFAULT_TOAST_OPTIONS, ...options });
37
+ }, options);
33
38
  },
34
39
  warning(message, options) {
35
- return exports.internalToastQueue.add({
40
+ return addToast({
36
41
  message: message,
37
42
  tone: 'warning',
38
- }, { ...DEFAULT_TOAST_OPTIONS, ...options });
43
+ }, options);
39
44
  },
40
45
  critical(message, options) {
41
- return exports.internalToastQueue.add({
46
+ return addToast({
42
47
  message: message,
43
48
  tone: 'critical',
44
- }, { ...DEFAULT_TOAST_OPTIONS, ...options });
49
+ }, options);
45
50
  },
46
51
  close(id) {
47
52
  exports.internalToastQueue.close(id);
@@ -1 +1 @@
1
- {"version":3,"file":"toast-queue.js","sourceRoot":"","sources":["../../../../src/components/toast/toast-queue.ts"],"names":[],"mappings":";;;AAAA,iEAAmH;AACnH,yCAAsC;AAGtC,MAAM,qBAAqB,GAAoB;IAC7C,OAAO,EAAE,IAAI;CACd,CAAC;AAEW,QAAA,kBAAkB,GAAG,IAAI,2CAAa,CAAuB;IACxE,UAAU,CAAC,EAAE;QACX,IAAI,qBAAqB,IAAI,QAAQ,EAAE,CAAC;YACtC,QAAQ,CAAC,mBAAmB,CAAC,GAAG,EAAE;gBAChC,IAAA,qBAAS,EAAC,EAAE,CAAC,CAAC;YAChB,CAAC,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,EAAE,EAAE,CAAC;QACP,CAAC;IACH,CAAC;CACF,CAAC,CAAC;AAqCU,QAAA,mBAAmB,GAAwB;IACtD,IAAI,CAAC,OAAe,EAAE,OAA+B;QACnD,OAAO,0BAAkB,CAAC,GAAG,CAC3B;YACE,OAAO,EAAE,OAAO;YAChB,IAAI,EAAE,MAAM;SACb,EACD,EAAE,GAAG,qBAAqB,EAAE,GAAG,OAAO,EAAE,CACzC,CAAC;IACJ,CAAC;IACD,OAAO,CAAC,OAAe,EAAE,OAA+B;QACtD,OAAO,0BAAkB,CAAC,GAAG,CAC3B;YACE,OAAO,EAAE,OAAO;YAChB,IAAI,EAAE,SAAS;SAChB,EACD,EAAE,GAAG,qBAAqB,EAAE,GAAG,OAAO,EAAE,CACzC,CAAC;IACJ,CAAC;IACD,OAAO,CAAC,OAAe,EAAE,OAA+B;QACtD,OAAO,0BAAkB,CAAC,GAAG,CAC3B;YACE,OAAO,EAAE,OAAO;YAChB,IAAI,EAAE,SAAS;SAChB,EACD,EAAE,GAAG,qBAAqB,EAAE,GAAG,OAAO,EAAE,CACzC,CAAC;IACJ,CAAC;IACD,QAAQ,CAAC,OAAe,EAAE,OAA+B;QACvD,OAAO,0BAAkB,CAAC,GAAG,CAC3B;YACE,OAAO,EAAE,OAAO;YAChB,IAAI,EAAE,UAAU;SACjB,EACD,EAAE,GAAG,qBAAqB,EAAE,GAAG,OAAO,EAAE,CACzC,CAAC;IACJ,CAAC;IACD,KAAK,CAAC,EAAU;QACd,0BAAkB,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAC/B,CAAC;IACD,KAAK;QACH,0BAAkB,CAAC,KAAK,EAAE,CAAC;IAC7B,CAAC;CACF,CAAC","sourcesContent":["import { UNSTABLE_ToastQueue as RACToastQueue, type ToastOptions as RACToastOptions } from 'react-aria-components';\nimport { flushSync } from 'react-dom';\nimport type { InternalToastContent, UNSTABLE_ToastOptions } from './types.js';\n\nconst DEFAULT_TOAST_OPTIONS: RACToastOptions = {\n timeout: 5000,\n};\n\nexport const internalToastQueue = new RACToastQueue<InternalToastContent>({\n wrapUpdate(fn) {\n if ('startViewTransition' in document) {\n document.startViewTransition(() => {\n flushSync(fn);\n });\n } else {\n fn();\n }\n },\n});\n\n/**\n * Manages the queue of toasts.\n */\nexport interface UNSTABLE_ToastQueue {\n /**\n * Add an info toast to the queue.\n * @returns The ID of the toast\n */\n info(message: string, options?: UNSTABLE_ToastOptions): string;\n /**\n * Add a success toast to the queue.\n * @returns The ID of the toast\n */\n success(message: string, options?: UNSTABLE_ToastOptions): string;\n /**\n * Add a warning toast to the queue.\n * @returns The ID of the toast\n */\n warning(message: string, options?: UNSTABLE_ToastOptions): string;\n /**\n * Add a critical toast to the queue.\n * @returns The ID of the toast\n */\n critical(message: string, options?: UNSTABLE_ToastOptions): string;\n /**\n * Close a toast.\n * @param id The ID of the toast to close\n */\n close(id: string): void;\n /**\n * Clear the queue.\n */\n clear(): void;\n}\n\nexport const UNSTABLE_toastQueue: UNSTABLE_ToastQueue = {\n info(message: string, options?: UNSTABLE_ToastOptions) {\n return internalToastQueue.add(\n {\n message: message,\n tone: 'info',\n },\n { ...DEFAULT_TOAST_OPTIONS, ...options },\n );\n },\n success(message: string, options?: UNSTABLE_ToastOptions) {\n return internalToastQueue.add(\n {\n message: message,\n tone: 'success',\n },\n { ...DEFAULT_TOAST_OPTIONS, ...options },\n );\n },\n warning(message: string, options?: UNSTABLE_ToastOptions) {\n return internalToastQueue.add(\n {\n message: message,\n tone: 'warning',\n },\n { ...DEFAULT_TOAST_OPTIONS, ...options },\n );\n },\n critical(message: string, options?: UNSTABLE_ToastOptions) {\n return internalToastQueue.add(\n {\n message: message,\n tone: 'critical',\n },\n { ...DEFAULT_TOAST_OPTIONS, ...options },\n );\n },\n close(id: string) {\n internalToastQueue.close(id);\n },\n clear() {\n internalToastQueue.clear();\n },\n};\n"]}
1
+ {"version":3,"file":"toast-queue.js","sourceRoot":"","sources":["../../../../src/components/toast/toast-queue.ts"],"names":[],"mappings":";;;AAAA,iEAA6E;AAC7E,yCAAsC;AAGtC,MAAM,iBAAiB,GAAG,IAAI,CAAC;AAElB,QAAA,kBAAkB,GAAG,IAAI,2CAAa,CAAuB;IACxE,UAAU,CAAC,EAAE;QACX,IAAI,qBAAqB,IAAI,QAAQ,EAAE,CAAC;YACtC,QAAQ,CAAC,mBAAmB,CAAC,GAAG,EAAE;gBAChC,IAAA,qBAAS,EAAC,EAAE,CAAC,CAAC;YAChB,CAAC,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,EAAE,EAAE,CAAC;QACP,CAAC;IACH,CAAC;CACF,CAAC,CAAC;AAEH,SAAS,QAAQ,CAAC,OAA6B,EAAE,OAA+B;IAC9E,IAAI,OAAO,EAAE,OAAO,IAAI,IAAI,IAAI,OAAO,CAAC,OAAO,GAAG,CAAC,IAAI,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,CAAC;QAC7F,OAAO,CAAC,IAAI,CACV,uCAAuC,OAAO,CAAC,OAAO,0CAA0C,iBAAiB,2CAA2C,CAC7J,CAAC;IACJ,CAAC;IAED,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,iBAAiB,CAAC,CAAC;IAEnF,OAAO,0BAAkB,CAAC,GAAG,CAAC,OAAO,EAAE,EAAE,GAAG,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC;AAClE,CAAC;AAqCY,QAAA,mBAAmB,GAAwB;IACtD,IAAI,CAAC,OAAe,EAAE,OAA+B;QACnD,OAAO,QAAQ,CACb;YACE,OAAO,EAAE,OAAO;YAChB,IAAI,EAAE,MAAM;SACb,EACD,OAAO,CACR,CAAC;IACJ,CAAC;IACD,OAAO,CAAC,OAAe,EAAE,OAA+B;QACtD,OAAO,QAAQ,CACb;YACE,OAAO,EAAE,OAAO;YAChB,IAAI,EAAE,SAAS;SAChB,EACD,OAAO,CACR,CAAC;IACJ,CAAC;IACD,OAAO,CAAC,OAAe,EAAE,OAA+B;QACtD,OAAO,QAAQ,CACb;YACE,OAAO,EAAE,OAAO;YAChB,IAAI,EAAE,SAAS;SAChB,EACD,OAAO,CACR,CAAC;IACJ,CAAC;IACD,QAAQ,CAAC,OAAe,EAAE,OAA+B;QACvD,OAAO,QAAQ,CACb;YACE,OAAO,EAAE,OAAO;YAChB,IAAI,EAAE,UAAU;SACjB,EACD,OAAO,CACR,CAAC;IACJ,CAAC;IACD,KAAK,CAAC,EAAU;QACd,0BAAkB,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAC/B,CAAC;IACD,KAAK;QACH,0BAAkB,CAAC,KAAK,EAAE,CAAC;IAC7B,CAAC;CACF,CAAC","sourcesContent":["import { UNSTABLE_ToastQueue as RACToastQueue } from 'react-aria-components';\nimport { flushSync } from 'react-dom';\nimport type { InternalToastContent, UNSTABLE_ToastOptions } from './types.js';\n\nconst MIN_TOAST_TIMEOUT = 5000;\n\nexport const internalToastQueue = new RACToastQueue<InternalToastContent>({\n wrapUpdate(fn) {\n if ('startViewTransition' in document) {\n document.startViewTransition(() => {\n flushSync(fn);\n });\n } else {\n fn();\n }\n },\n});\n\nfunction addToast(content: InternalToastContent, options?: UNSTABLE_ToastOptions) {\n if (options?.timeout != null && options.timeout > 0 && options?.timeout <= MIN_TOAST_TIMEOUT) {\n console.warn(\n `[ToastQueue] The specified timeout (${options.timeout} ms) is less than the minimum allowed (${MIN_TOAST_TIMEOUT} ms). It will be adjusted to the minimum.`,\n );\n }\n\n const timeout = Math.max(options?.timeout ?? MIN_TOAST_TIMEOUT, MIN_TOAST_TIMEOUT);\n\n return internalToastQueue.add(content, { ...options, timeout });\n}\n\n/**\n * Manages the queue of toasts.\n */\nexport interface UNSTABLE_ToastQueue {\n /**\n * Add an info toast to the queue.\n * @returns The ID of the toast\n */\n info(message: string, options?: UNSTABLE_ToastOptions): string;\n /**\n * Add a success toast to the queue.\n * @returns The ID of the toast\n */\n success(message: string, options?: UNSTABLE_ToastOptions): string;\n /**\n * Add a warning toast to the queue.\n * @returns The ID of the toast\n */\n warning(message: string, options?: UNSTABLE_ToastOptions): string;\n /**\n * Add a critical toast to the queue.\n * @returns The ID of the toast\n */\n critical(message: string, options?: UNSTABLE_ToastOptions): string;\n /**\n * Close a toast.\n * @param id The ID of the toast to close\n */\n close(id: string): void;\n /**\n * Clear the queue.\n */\n clear(): void;\n}\n\nexport const UNSTABLE_toastQueue: UNSTABLE_ToastQueue = {\n info(message: string, options?: UNSTABLE_ToastOptions) {\n return addToast(\n {\n message: message,\n tone: 'info',\n },\n options,\n );\n },\n success(message: string, options?: UNSTABLE_ToastOptions) {\n return addToast(\n {\n message: message,\n tone: 'success',\n },\n options,\n );\n },\n warning(message: string, options?: UNSTABLE_ToastOptions) {\n return addToast(\n {\n message: message,\n tone: 'warning',\n },\n options,\n );\n },\n critical(message: string, options?: UNSTABLE_ToastOptions) {\n return addToast(\n {\n message: message,\n tone: 'critical',\n },\n options,\n );\n },\n close(id: string) {\n internalToastQueue.close(id);\n },\n clear() {\n internalToastQueue.clear();\n },\n};\n"]}
@@ -6,6 +6,7 @@ export interface UNSTABLE_ToastOptions {
6
6
  /**
7
7
  * The timeout to automatically close the toast after, in milliseconds.
8
8
  * Setting this to `0` will prevent the toast from automatically closing.
9
+ * The minimum timeout is 5000 milliseconds.
9
10
  * @default 5000
10
11
  */
11
12
  timeout?: number;
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/toast/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;CACnD;AAED,MAAM,WAAW,qBAAqB;IACpC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/toast/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;CACnD;AAED,MAAM,WAAW,qBAAqB;IACpC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB"}
@@ -1 +1 @@
1
- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/toast/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface InternalToastContent {\n message: string;\n tone: 'info' | 'success' | 'warning' | 'critical';\n}\n\nexport interface UNSTABLE_ToastOptions {\n /**\n * The timeout to automatically close the toast after, in milliseconds.\n * Setting this to `0` will prevent the toast from automatically closing.\n * @default 5000\n */\n timeout?: number;\n}\n"]}
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/toast/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface InternalToastContent {\n message: string;\n tone: 'info' | 'success' | 'warning' | 'critical';\n}\n\nexport interface UNSTABLE_ToastOptions {\n /**\n * The timeout to automatically close the toast after, in milliseconds.\n * Setting this to `0` will prevent the toast from automatically closing.\n * The minimum timeout is 5000 milliseconds.\n * @default 5000\n */\n timeout?: number;\n}\n"]}
@@ -1,5 +1,6 @@
1
1
  import { type ReactNode } from 'react';
2
2
  import { type ToggleButtonGroupProps as RACToggleButtonGroupProps } from 'react-aria-components';
3
+ import { type StackProps } from '../spacing/stack/stack.js';
3
4
  import type { CommonProps, FieldProps, Key } from '../types.js';
4
5
  export interface ToggleButtonGroupProps extends Omit<CommonProps, 'id'>, FieldProps<Set<Key>>, Pick<RACToggleButtonGroupProps, 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'selectionMode' | 'isDisabled'> {
5
6
  /** Toggle buttons belonging to the group. Each button must have a `value` prop defined. */
@@ -8,6 +9,8 @@ export interface ToggleButtonGroupProps extends Omit<CommonProps, 'id'>, FieldPr
8
9
  isInvalid?: boolean;
9
10
  /** Whether a selection is required before form submission. */
10
11
  isRequired?: boolean;
12
+ /** Whether the toggle buttons should wrap to the next line when they don't fit in the available space. */
13
+ wrap?: StackProps['wrap'];
11
14
  }
12
15
  /**
13
16
  * Allows users to toggle multiple options, with single or multiple selection.
@@ -1 +1 @@
1
- {"version":3,"file":"toggle-button-group.d.ts","sourceRoot":"","sources":["../../../../src/components/toggle-button/toggle-button-group.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGhD,OAAO,EAML,KAAK,sBAAsB,IAAI,yBAAyB,EACzD,MAAM,uBAAuB,CAAC;AAO/B,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAIhE,MAAM,WAAW,sBACf,SACE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,EACvB,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EACpB,IAAI,CACF,yBAAyB,EACzB,cAAc,GAAG,qBAAqB,GAAG,mBAAmB,GAAG,eAAe,GAAG,YAAY,CAC9F;IACH,2FAA2F;IAC3F,QAAQ,EAAE,SAAS,CAAC;IACpB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA2HD;;;;GAIG;AACH,QAAA,MAAM,kBAAkB,wKAAqE,CAAC;AAE9F,OAAO,EAAE,kBAAkB,IAAI,iBAAiB,EAAE,CAAC"}
1
+ {"version":3,"file":"toggle-button-group.d.ts","sourceRoot":"","sources":["../../../../src/components/toggle-button/toggle-button-group.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGhD,OAAO,EAML,KAAK,sBAAsB,IAAI,yBAAyB,EACzD,MAAM,uBAAuB,CAAC;AAM/B,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAIhE,MAAM,WAAW,sBACf,SACE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,EACvB,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EACpB,IAAI,CACF,yBAAyB,EACzB,cAAc,GAAG,qBAAqB,GAAG,mBAAmB,GAAG,eAAe,GAAG,YAAY,CAC9F;IACH,2FAA2F;IAC3F,QAAQ,EAAE,SAAS,CAAC;IACpB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0GAA0G;IAC1G,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;CAC3B;AA4HD;;;;GAIG;AACH,QAAA,MAAM,kBAAkB,wKAAqE,CAAC;AAE9F,OAAO,EAAE,kBAAkB,IAAI,iBAAiB,EAAE,CAAC"}
@@ -20,7 +20,7 @@ const form_field_js_1 = require("../internal/form-field/form-field.js");
20
20
  const stack_js_1 = require("../spacing/stack/stack.js");
21
21
  const visually_hidden_js_1 = require("../visually-hidden/visually-hidden.js");
22
22
  const context_js_1 = require("./context.js");
23
- function ToggleButtonGroup({ children, label, description, error: errorMessage, validate, form, name, isInvalid, isRequired, selectedKeys: consumerSelectedKeys, defaultSelectedKeys: consumerDefaultSelectedKeys, onSelectionChange, UNSAFE_className, UNSAFE_style, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-details': ariaDetails, ...props }, ref) {
23
+ function ToggleButtonGroup({ children, label, description, error: errorMessage, validate, form, name, isInvalid, isRequired, selectedKeys: consumerSelectedKeys, defaultSelectedKeys: consumerDefaultSelectedKeys, onSelectionChange, wrap, UNSAFE_className, UNSAFE_style, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-details': ariaDetails, ...props }, ref) {
24
24
  (0, use_production_warning_js_1.useProductionWarning)(() => {
25
25
  if (!label && !ariaLabel && !ariaLabelledBy) {
26
26
  console.warn('ToggleButtonGroup requires one of label / aria-label / aria-labelledby for accessibility');
@@ -72,7 +72,7 @@ function ToggleButtonGroup({ children, label, description, error: errorMessage,
72
72
  [react_aria_components_1.TextContext, { slots: { description: descriptionProps, errorMessage: errorMessageProps } }],
73
73
  [react_aria_components_1.FieldErrorContext, validationState.displayValidation],
74
74
  [context_js_1.ToggleButtonGroupContext, toggleButtonGroupContext],
75
- ], children: [label && ((0, jsx_runtime_1.jsxs)(form_field_js_1.FormFieldLabel, { isRequired: isRequired, children: [label, isRequired && (0, jsx_runtime_1.jsx)(visually_hidden_js_1.UNSTABLE_VisuallyHidden, { children: labelMessages.format('required') })] })), (0, jsx_runtime_1.jsx)(stack_js_1.Stack, { gap: 8, direction: "horizontal", wrap: true, children: children }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: errorMessage }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description })] }) }));
75
+ ], children: [label && ((0, jsx_runtime_1.jsxs)(form_field_js_1.FormFieldLabel, { isRequired: isRequired, children: [label, isRequired && (0, jsx_runtime_1.jsx)(visually_hidden_js_1.UNSTABLE_VisuallyHidden, { children: labelMessages.format('required') })] })), (0, jsx_runtime_1.jsx)(stack_js_1.Stack, { gap: 8, direction: "horizontal", wrap: wrap, children: children }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: errorMessage }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description })] }) }));
76
76
  }
77
77
  /**
78
78
  * Allows users to toggle multiple options, with single or multiple selection.
@@ -1 +1 @@
1
- {"version":3,"file":"toggle-button-group.js","sourceRoot":"","sources":["../../../../src/components/toggle-button/toggle-button-group.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useFormValidationState } from '@react-stately/form';\nimport { useControlledState } from '@react-stately/utils';\nimport clsx from 'clsx';\nimport { useMemo, type ReactNode } from 'react';\nimport type { ForwardedRef } from 'react';\nimport { mergeProps, useField } from 'react-aria';\nimport {\n LabelContext as RACLabelContext,\n FieldErrorContext as RACFieldErrorContext,\n Provider as RACProvider,\n TextContext as RACTextContext,\n ToggleButtonGroup as RACToggleButtonGroup,\n type ToggleButtonGroupProps as RACToggleButtonGroupProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { Stack } from '../spacing/stack/stack.js';\nimport type { CommonProps, FieldProps, Key } from '../types.js';\nimport { UNSTABLE_VisuallyHidden as VisuallyHidden } from '../visually-hidden/visually-hidden.js';\nimport { ToggleButtonGroupContext, type ToggleButtonGroupContextValue } from './context.js';\n\nexport interface ToggleButtonGroupProps\n extends\n Omit<CommonProps, 'id'>,\n FieldProps<Set<Key>>,\n Pick<\n RACToggleButtonGroupProps,\n 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'selectionMode' | 'isDisabled'\n > {\n /** Toggle buttons belonging to the group. Each button must have a `value` prop defined. */\n children: ReactNode;\n /** Whether the current selection is invalid. */\n isInvalid?: boolean;\n /** Whether a selection is required before form submission. */\n isRequired?: boolean;\n}\n\nfunction ToggleButtonGroup(\n {\n children,\n label,\n description,\n error: errorMessage,\n validate,\n form,\n name,\n isInvalid,\n isRequired,\n selectedKeys: consumerSelectedKeys,\n defaultSelectedKeys: consumerDefaultSelectedKeys,\n onSelectionChange,\n UNSAFE_className,\n UNSAFE_style,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n 'aria-details': ariaDetails,\n ...props\n }: ToggleButtonGroupProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('ToggleButtonGroup requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n const labelMessages = useLocalizedMessages('label');\n\n // State\n\n const [selectedKeys, setSelectedKeys] = useControlledState(\n consumerSelectedKeys,\n consumerDefaultSelectedKeys ?? [],\n (newSelectedKeys) => {\n onSelectionChange?.(new Set(newSelectedKeys));\n // `validationState` is technically accessed before its declaration, but there's no way to write this in a different order,\n // and this is a callback anyway so it won't be called immediately\n // eslint-disable-next-line react-hooks/immutability\n validationState.commitValidation();\n },\n );\n\n const selectedSet = useMemo(() => new Set<Key>(selectedKeys), [selectedKeys]);\n\n // Validation\n\n const validationState = useFormValidationState({\n value: selectedSet,\n isInvalid,\n isRequired,\n name,\n validate,\n validationBehavior: 'native',\n });\n\n const { labelProps, fieldProps, descriptionProps, errorMessageProps } = useField({\n 'aria-label': isRequired && ariaLabel != null ? `${ariaLabel} ${labelMessages.format('required')}` : ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n 'aria-details': ariaDetails,\n description,\n errorMessage: errorMessage || validationState.displayValidation.validationErrors,\n isInvalid: isInvalid || validationState.displayValidation.isInvalid,\n label,\n labelElementType: 'span',\n validate,\n validationBehavior: 'native',\n });\n\n // Remove props that we don't want from fieldProps\n const { id, ...filteredFieldProps } = fieldProps;\n\n const toggleButtonGroupContext: ToggleButtonGroupContextValue = {\n form,\n name,\n isInvalid: isInvalid || validationState.displayValidation.isInvalid,\n isRequired: isRequired && selectedSet.size === 0,\n validationState,\n };\n\n return (\n <RACToggleButtonGroup\n {...mergeProps(props, filteredFieldProps)}\n ref={ref}\n className={clsx('cim-toggle-button-group', UNSAFE_className)}\n style={UNSAFE_style}\n selectedKeys={selectedKeys}\n onSelectionChange={setSelectedKeys}\n >\n <RACProvider\n values={[\n [RACLabelContext, { ...labelProps, elementType: 'span' }],\n [RACTextContext, { slots: { description: descriptionProps, errorMessage: errorMessageProps } }],\n [RACFieldErrorContext, validationState.displayValidation],\n [ToggleButtonGroupContext, toggleButtonGroupContext],\n ]}\n >\n {label && (\n <FormFieldLabel isRequired={isRequired}>\n {label}\n {/*\n * Button elements don't support `aria-required`, so we need to add visually hidden text to indicate that the field is required.\n * See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-required#examples:~:text=Note%3A%20If%20the%20field%27s%20label%20already%20contains%20the%20word%20%22required%22%2C%20it%20is%20recommended%20to%20leave%20out%20the%20aria%2Drequired%20attribute.%20This%20avoids%20that%20screen%20readers%20read%20out%20the%20term%20%22required%22%20twice.\n */}\n {isRequired && <VisuallyHidden>{labelMessages.format('required')}</VisuallyHidden>}\n </FormFieldLabel>\n )}\n <Stack gap={8} direction=\"horizontal\" wrap>\n {children}\n </Stack>\n <FormFieldError>{errorMessage}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n </RACProvider>\n </RACToggleButtonGroup>\n );\n}\n\n/**\n * Allows users to toggle multiple options, with single or multiple selection.\n *\n * See [toggle button usage guidelines](https://ui.cimpress.io/components/toggle-button/).\n */\nconst _ToggleButtonGroup = withStyleProps(forwardRef(ToggleButtonGroup), 'ToggleButtonGroup');\n\nexport { _ToggleButtonGroup as ToggleButtonGroup };\n"]}
1
+ {"version":3,"file":"toggle-button-group.js","sourceRoot":"","sources":["../../../../src/components/toggle-button/toggle-button-group.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useFormValidationState } from '@react-stately/form';\nimport { useControlledState } from '@react-stately/utils';\nimport clsx from 'clsx';\nimport { useMemo, type ReactNode } from 'react';\nimport type { ForwardedRef } from 'react';\nimport { mergeProps, useField } from 'react-aria';\nimport {\n LabelContext as RACLabelContext,\n FieldErrorContext as RACFieldErrorContext,\n Provider as RACProvider,\n TextContext as RACTextContext,\n ToggleButtonGroup as RACToggleButtonGroup,\n type ToggleButtonGroupProps as RACToggleButtonGroupProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { Stack, type StackProps } from '../spacing/stack/stack.js';\nimport type { CommonProps, FieldProps, Key } from '../types.js';\nimport { UNSTABLE_VisuallyHidden as VisuallyHidden } from '../visually-hidden/visually-hidden.js';\nimport { ToggleButtonGroupContext, type ToggleButtonGroupContextValue } from './context.js';\n\nexport interface ToggleButtonGroupProps\n extends\n Omit<CommonProps, 'id'>,\n FieldProps<Set<Key>>,\n Pick<\n RACToggleButtonGroupProps,\n 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'selectionMode' | 'isDisabled'\n > {\n /** Toggle buttons belonging to the group. Each button must have a `value` prop defined. */\n children: ReactNode;\n /** Whether the current selection is invalid. */\n isInvalid?: boolean;\n /** Whether a selection is required before form submission. */\n isRequired?: boolean;\n /** Whether the toggle buttons should wrap to the next line when they don't fit in the available space. */\n wrap?: StackProps['wrap'];\n}\n\nfunction ToggleButtonGroup(\n {\n children,\n label,\n description,\n error: errorMessage,\n validate,\n form,\n name,\n isInvalid,\n isRequired,\n selectedKeys: consumerSelectedKeys,\n defaultSelectedKeys: consumerDefaultSelectedKeys,\n onSelectionChange,\n wrap,\n UNSAFE_className,\n UNSAFE_style,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n 'aria-details': ariaDetails,\n ...props\n }: ToggleButtonGroupProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('ToggleButtonGroup requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n const labelMessages = useLocalizedMessages('label');\n\n // State\n\n const [selectedKeys, setSelectedKeys] = useControlledState(\n consumerSelectedKeys,\n consumerDefaultSelectedKeys ?? [],\n (newSelectedKeys) => {\n onSelectionChange?.(new Set(newSelectedKeys));\n // `validationState` is technically accessed before its declaration, but there's no way to write this in a different order,\n // and this is a callback anyway so it won't be called immediately\n // eslint-disable-next-line react-hooks/immutability\n validationState.commitValidation();\n },\n );\n\n const selectedSet = useMemo(() => new Set<Key>(selectedKeys), [selectedKeys]);\n\n // Validation\n\n const validationState = useFormValidationState({\n value: selectedSet,\n isInvalid,\n isRequired,\n name,\n validate,\n validationBehavior: 'native',\n });\n\n const { labelProps, fieldProps, descriptionProps, errorMessageProps } = useField({\n 'aria-label': isRequired && ariaLabel != null ? `${ariaLabel} ${labelMessages.format('required')}` : ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n 'aria-details': ariaDetails,\n description,\n errorMessage: errorMessage || validationState.displayValidation.validationErrors,\n isInvalid: isInvalid || validationState.displayValidation.isInvalid,\n label,\n labelElementType: 'span',\n validate,\n validationBehavior: 'native',\n });\n\n // Remove props that we don't want from fieldProps\n const { id, ...filteredFieldProps } = fieldProps;\n\n const toggleButtonGroupContext: ToggleButtonGroupContextValue = {\n form,\n name,\n isInvalid: isInvalid || validationState.displayValidation.isInvalid,\n isRequired: isRequired && selectedSet.size === 0,\n validationState,\n };\n\n return (\n <RACToggleButtonGroup\n {...mergeProps(props, filteredFieldProps)}\n ref={ref}\n className={clsx('cim-toggle-button-group', UNSAFE_className)}\n style={UNSAFE_style}\n selectedKeys={selectedKeys}\n onSelectionChange={setSelectedKeys}\n >\n <RACProvider\n values={[\n [RACLabelContext, { ...labelProps, elementType: 'span' }],\n [RACTextContext, { slots: { description: descriptionProps, errorMessage: errorMessageProps } }],\n [RACFieldErrorContext, validationState.displayValidation],\n [ToggleButtonGroupContext, toggleButtonGroupContext],\n ]}\n >\n {label && (\n <FormFieldLabel isRequired={isRequired}>\n {label}\n {/*\n * Button elements don't support `aria-required`, so we need to add visually hidden text to indicate that the field is required.\n * See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-required#examples:~:text=Note%3A%20If%20the%20field%27s%20label%20already%20contains%20the%20word%20%22required%22%2C%20it%20is%20recommended%20to%20leave%20out%20the%20aria%2Drequired%20attribute.%20This%20avoids%20that%20screen%20readers%20read%20out%20the%20term%20%22required%22%20twice.\n */}\n {isRequired && <VisuallyHidden>{labelMessages.format('required')}</VisuallyHidden>}\n </FormFieldLabel>\n )}\n <Stack gap={8} direction=\"horizontal\" wrap={wrap}>\n {children}\n </Stack>\n <FormFieldError>{errorMessage}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n </RACProvider>\n </RACToggleButtonGroup>\n );\n}\n\n/**\n * Allows users to toggle multiple options, with single or multiple selection.\n *\n * See [toggle button usage guidelines](https://ui.cimpress.io/components/toggle-button/).\n */\nconst _ToggleButtonGroup = withStyleProps(forwardRef(ToggleButtonGroup), 'ToggleButtonGroup');\n\nexport { _ToggleButtonGroup as ToggleButtonGroup };\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA2B,KAAK,aAAa,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAKxG,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGtF,MAAM,WAAW,aACf,SACE,WAAW,EACX,iBAAiB,EACjB,IAAI,CACF,gBAAgB,EACd,UAAU,GACV,YAAY,GACZ,iBAAiB,GACjB,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,MAAM,GACN,MAAM,GACN,OAAO,GACP,iBAAiB,GACjB,WAAW,CACd;IACH,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,kBAAkB,CAAC;CAC/B;AAgCD;;;;GAIG;AACH,QAAA,MAAM,SAAS,iKAAmD,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC"}
1
+ {"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA2B,KAAK,aAAa,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAKxG,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGtF,MAAM,WAAW,aACf,SACE,WAAW,EACX,iBAAiB,EACjB,IAAI,CACF,gBAAgB,EACd,UAAU,GACV,YAAY,GACZ,iBAAiB,GACjB,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,MAAM,GACN,MAAM,GACN,OAAO,GACP,iBAAiB,GACjB,WAAW,CACd;IACH,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,kBAAkB,CAAC;CAC/B;AAmCD;;;;GAIG;AACH,QAAA,MAAM,SAAS,iKAAmD,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC"}
@@ -3,9 +3,9 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
3
3
  import clsx from 'clsx';
4
4
  import { Checkbox as RACCheckbox } from 'react-aria-components';
5
5
  import { forwardRef } from '../../forward-ref.js';
6
- import { IconCheckBold, IconSubtractBold } from '../../icons/index.js';
7
6
  import { useProductionWarning } from '../../utils/use-production-warning.js';
8
7
  import { withStyleProps } from '../../with-style-props.js';
8
+ import { CheckboxIndicator } from '../internal/checkbox-indicator/checkbox-indicator.js';
9
9
  import { Text } from '../typography/text.js';
10
10
  function Checkbox({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
11
11
  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
@@ -14,7 +14,7 @@ function Checkbox({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
14
14
  console.warn('Checkbox requires one of children / aria-label / aria-labelledby for accessibility');
15
15
  }
16
16
  }, [children, ariaLabel, ariaLabelledBy]);
17
- return (_jsx(RACCheckbox, { ...props, ref: ref, className: clsx('cim-checkbox', UNSAFE_className), style: UNSAFE_style, children: ({ isIndeterminate }) => (_jsxs(_Fragment, { children: [_jsx("div", { className: "cim-checkbox-toggle-wrapper", children: _jsx("div", { className: "cim-checkbox-toggle", children: isIndeterminate ? _jsx(IconSubtractBold, {}) : _jsx(IconCheckBold, {}) }) }), children && (_jsx(Text, { as: "span", variant: "medium", children: children }))] })) }));
17
+ return (_jsx(RACCheckbox, { ...props, ref: ref, className: clsx('cim-checkbox', 'cim-checkbox-indicator-wrapper', UNSAFE_className), style: UNSAFE_style, children: ({ isIndeterminate, isSelected }) => (_jsxs(_Fragment, { children: [_jsx(CheckboxIndicator, { isIndeterminate: isIndeterminate, isSelected: isSelected }), children && (_jsx(Text, { as: "span", variant: "medium", children: children }))] })) }));
18
18
  }
19
19
  /**
20
20
  * Allows users to mark an item as selected. Can be used standalone, or as part of `CheckboxGroup`.