@cimpress-ui/react 1.24.0 → 1.25.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (101) hide show
  1. package/dist/commonjs/components/app-header/side-nav.d.ts +1 -9
  2. package/dist/commonjs/components/app-header/side-nav.d.ts.map +1 -1
  3. package/dist/commonjs/components/app-header/side-nav.js +3 -3
  4. package/dist/commonjs/components/app-header/side-nav.js.map +1 -1
  5. package/dist/commonjs/components/checkbox/checkbox.d.ts.map +1 -1
  6. package/dist/commonjs/components/checkbox/checkbox.js +1 -1
  7. package/dist/commonjs/components/checkbox/checkbox.js.map +1 -1
  8. package/dist/commonjs/components/combo-box/combo-box.d.ts +1 -0
  9. package/dist/commonjs/components/combo-box/combo-box.d.ts.map +1 -1
  10. package/dist/commonjs/components/combo-box/combo-box.js +23 -5
  11. package/dist/commonjs/components/combo-box/combo-box.js.map +1 -1
  12. package/dist/commonjs/components/internal/checkbox-indicator/checkbox-indicator.js +2 -4
  13. package/dist/commonjs/components/internal/checkbox-indicator/checkbox-indicator.js.map +1 -1
  14. package/dist/commonjs/components/internal/collapsible-list/collapsible-list.js.map +1 -1
  15. package/dist/commonjs/components/menu/menu.d.ts +14 -1
  16. package/dist/commonjs/components/menu/menu.d.ts.map +1 -1
  17. package/dist/commonjs/components/menu/menu.js +16 -2
  18. package/dist/commonjs/components/menu/menu.js.map +1 -1
  19. package/dist/commonjs/components/popover/popover.d.ts +10 -1
  20. package/dist/commonjs/components/popover/popover.d.ts.map +1 -1
  21. package/dist/commonjs/components/popover/popover.js +23 -2
  22. package/dist/commonjs/components/popover/popover.js.map +1 -1
  23. package/dist/commonjs/components/select/select.d.ts +1 -1
  24. package/dist/commonjs/components/select/select.d.ts.map +1 -1
  25. package/dist/commonjs/components/select/select.js +3 -2
  26. package/dist/commonjs/components/select/select.js.map +1 -1
  27. package/dist/commonjs/components/tag-field/tag-field.js +1 -1
  28. package/dist/commonjs/components/tag-field/tag-field.js.map +1 -1
  29. package/dist/commonjs/components/toast/toast-queue.d.ts +9 -7
  30. package/dist/commonjs/components/toast/toast-queue.d.ts.map +1 -1
  31. package/dist/commonjs/components/toast/toast-queue.js +6 -5
  32. package/dist/commonjs/components/toast/toast-queue.js.map +1 -1
  33. package/dist/commonjs/components/toast/toast-region.d.ts +1 -1
  34. package/dist/commonjs/components/toast/toast-region.d.ts.map +1 -1
  35. package/dist/commonjs/components/toast/toast-region.js +3 -3
  36. package/dist/commonjs/components/toast/toast-region.js.map +1 -1
  37. package/dist/commonjs/components/toast/toast.js +3 -3
  38. package/dist/commonjs/components/toast/toast.js.map +1 -1
  39. package/dist/commonjs/components/toast/types.d.ts +1 -1
  40. package/dist/commonjs/components/toast/types.d.ts.map +1 -1
  41. package/dist/commonjs/components/toast/types.js.map +1 -1
  42. package/dist/commonjs/components/typography/list.d.ts +31 -0
  43. package/dist/commonjs/components/typography/list.d.ts.map +1 -0
  44. package/dist/commonjs/components/typography/list.js +39 -0
  45. package/dist/commonjs/components/typography/list.js.map +1 -0
  46. package/dist/commonjs/index.d.ts +4 -3
  47. package/dist/commonjs/index.d.ts.map +1 -1
  48. package/dist/commonjs/index.js +5 -4
  49. package/dist/commonjs/index.js.map +1 -1
  50. package/dist/esm/components/app-header/side-nav.d.ts +1 -9
  51. package/dist/esm/components/app-header/side-nav.d.ts.map +1 -1
  52. package/dist/esm/components/app-header/side-nav.js +3 -3
  53. package/dist/esm/components/app-header/side-nav.js.map +1 -1
  54. package/dist/esm/components/checkbox/checkbox.d.ts.map +1 -1
  55. package/dist/esm/components/checkbox/checkbox.js +1 -1
  56. package/dist/esm/components/checkbox/checkbox.js.map +1 -1
  57. package/dist/esm/components/combo-box/combo-box.d.ts +1 -0
  58. package/dist/esm/components/combo-box/combo-box.d.ts.map +1 -1
  59. package/dist/esm/components/combo-box/combo-box.js +24 -6
  60. package/dist/esm/components/combo-box/combo-box.js.map +1 -1
  61. package/dist/esm/components/internal/checkbox-indicator/checkbox-indicator.js +2 -4
  62. package/dist/esm/components/internal/checkbox-indicator/checkbox-indicator.js.map +1 -1
  63. package/dist/esm/components/internal/collapsible-list/collapsible-list.js.map +1 -1
  64. package/dist/esm/components/menu/menu.d.ts +14 -1
  65. package/dist/esm/components/menu/menu.d.ts.map +1 -1
  66. package/dist/esm/components/menu/menu.js +17 -4
  67. package/dist/esm/components/menu/menu.js.map +1 -1
  68. package/dist/esm/components/popover/popover.d.ts +10 -1
  69. package/dist/esm/components/popover/popover.d.ts.map +1 -1
  70. package/dist/esm/components/popover/popover.js +25 -4
  71. package/dist/esm/components/popover/popover.js.map +1 -1
  72. package/dist/esm/components/select/select.d.ts +1 -1
  73. package/dist/esm/components/select/select.d.ts.map +1 -1
  74. package/dist/esm/components/select/select.js +4 -3
  75. package/dist/esm/components/select/select.js.map +1 -1
  76. package/dist/esm/components/tag-field/tag-field.js +1 -1
  77. package/dist/esm/components/tag-field/tag-field.js.map +1 -1
  78. package/dist/esm/components/toast/toast-queue.d.ts +9 -7
  79. package/dist/esm/components/toast/toast-queue.d.ts.map +1 -1
  80. package/dist/esm/components/toast/toast-queue.js +5 -4
  81. package/dist/esm/components/toast/toast-queue.js.map +1 -1
  82. package/dist/esm/components/toast/toast-region.d.ts +1 -1
  83. package/dist/esm/components/toast/toast-region.d.ts.map +1 -1
  84. package/dist/esm/components/toast/toast-region.js +3 -3
  85. package/dist/esm/components/toast/toast-region.js.map +1 -1
  86. package/dist/esm/components/toast/toast.js +2 -2
  87. package/dist/esm/components/toast/toast.js.map +1 -1
  88. package/dist/esm/components/toast/types.d.ts +1 -1
  89. package/dist/esm/components/toast/types.d.ts.map +1 -1
  90. package/dist/esm/components/toast/types.js.map +1 -1
  91. package/dist/esm/components/typography/list.d.ts +31 -0
  92. package/dist/esm/components/typography/list.d.ts.map +1 -0
  93. package/dist/esm/components/typography/list.js +31 -0
  94. package/dist/esm/components/typography/list.js.map +1 -0
  95. package/dist/esm/index.d.ts +4 -3
  96. package/dist/esm/index.d.ts.map +1 -1
  97. package/dist/esm/index.js +3 -2
  98. package/dist/esm/index.js.map +1 -1
  99. package/dist-styles/core.css +1 -1
  100. package/dist-styles/styles.css +1 -1
  101. package/package.json +6 -6
@@ -8,6 +8,8 @@ exports.Popover = void 0;
8
8
  exports.PopoverRoot = PopoverRoot;
9
9
  const jsx_runtime_1 = require("react/jsx-runtime");
10
10
  const clsx_1 = __importDefault(require("clsx"));
11
+ const react_1 = require("react");
12
+ const react_aria_1 = require("react-aria");
11
13
  const react_aria_components_1 = require("react-aria-components");
12
14
  const forward_ref_js_1 = require("../../forward-ref.js");
13
15
  const use_production_warning_js_1 = require("../../utils/use-production-warning.js");
@@ -21,14 +23,33 @@ function PopoverRoot(props) {
21
23
  return (0, jsx_runtime_1.jsx)(react_aria_components_1.DialogTrigger, { ...props });
22
24
  }
23
25
  PopoverRoot.displayName = 'PopoverRoot';
24
- function Popover({ children, title, UNSAFE_className, UNSAFE_style, isOpen, defaultOpen, onOpenChange, placement, triggerRef, ...props }, ref) {
26
+ function Popover({ children, title, UNSAFE_className, UNSAFE_style, isOpen, defaultOpen, onOpenChange, placement, triggerRef, UNSTABLE_isNonModal, UNSTABLE_maxHeight, ...props }, ref) {
25
27
  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
26
28
  (0, use_production_warning_js_1.useProductionWarning)(() => {
27
29
  if (!title && !ariaLabel && !ariaLabelledBy) {
28
30
  console.warn('Popover requires one of title / aria-label / aria-labelledby for accessibility');
29
31
  }
30
32
  }, [title, ariaLabel, ariaLabelledBy]);
31
- return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Popover, { className: (0, clsx_1.default)('cim-popover', UNSAFE_className), style: UNSAFE_style, isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: onOpenChange, triggerRef: triggerRef, placement: placement, containerPadding: 16, offset: 5, arrowBoundaryOffset: 4, "data-cim-style-root": true, children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.OverlayArrow, { className: "cim-popover-arrow", children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "10", viewBox: "0 0 16 10", children: (0, jsx_runtime_1.jsx)("path", { d: "M16 0L8.7809 9.0239C8.3805 9.5243 7.6195 9.5243 7.2191 9.0239L0 0" }) }) }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { ...props, ref: ref, className: "cim-popover-dialog", children: (renderProps) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && ((0, jsx_runtime_1.jsx)(react_aria_components_1.Heading, { slot: "title", className: (0, clsx_1.default)('cim-popover-title', (0, utils_js_1.textStyle)({ variant: 'title-5' })), children: title })), (0, jsx_runtime_1.jsx)(focusable_container_js_1.FocusableContainer, { className: "cim-popover-content", scrollDirection: "vertical", children: typeof children === 'function' ? children(renderProps) : children })] })) })] }));
33
+ const popoverRef = (0, react_aria_1.useObjectRef)(ref);
34
+ return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { ref: popoverRef, className: (0, clsx_1.default)('cim-popover', UNSAFE_className), style: UNSAFE_style, isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: onOpenChange, triggerRef: triggerRef, placement: placement, containerPadding: 16, offset: 5, arrowBoundaryOffset: 4, isNonModal: UNSTABLE_isNonModal, maxHeight: UNSTABLE_maxHeight, "data-cim-style-root": true, children: (0, jsx_runtime_1.jsx)(PopoverInner, { title: title, children: children, popoverRef: popoverRef, isNonModal: UNSTABLE_isNonModal }) }));
35
+ }
36
+ function PopoverInner({ title, children, popoverRef, isNonModal }) {
37
+ const overlayTriggerState = (0, react_1.useContext)(react_aria_components_1.OverlayTriggerStateContext);
38
+ const renderProps = (0, react_1.useMemo)(() => ({ close: () => overlayTriggerState?.close() }), [overlayTriggerState]);
39
+ // For non-modal popovers, React Aria does not handle outside interaction by default,
40
+ // so we use a custom handler here. Modal popovers already handle this internally.
41
+ (0, react_aria_1.useInteractOutside)({
42
+ ref: popoverRef,
43
+ onInteractOutside: () => {
44
+ // Delay closing to prevent race conditions: when the trigger is pressed, both the trigger and the interact outside handler fire.
45
+ // Without this delay, the popover may immediately reopen after closing.
46
+ requestAnimationFrame(() => {
47
+ overlayTriggerState?.close();
48
+ });
49
+ },
50
+ isDisabled: !isNonModal,
51
+ });
52
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.OverlayArrow, { className: "cim-popover-arrow", children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "10", viewBox: "0 0 16 10", children: (0, jsx_runtime_1.jsx)("path", { d: "M16 0L8.7809 9.0239C8.3805 9.5243 7.6195 9.5243 7.2191 9.0239L0 0" }) }) }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Dialog, { className: "cim-popover-body", children: [title && ((0, jsx_runtime_1.jsx)(react_aria_components_1.Heading, { slot: "title", className: (0, clsx_1.default)('cim-popover-title', (0, utils_js_1.textStyle)({ variant: 'title-5' })), children: title })), (0, jsx_runtime_1.jsx)(focusable_container_js_1.FocusableContainer, { className: "cim-popover-content", scrollDirection: "vertical", children: typeof children === 'function' ? children(renderProps) : children })] })] }));
32
53
  }
33
54
  /**
34
55
  * Displays an overlay element positioned relative to a trigger.
@@ -1 +1 @@
1
- {"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../../src/components/popover/popover.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;AAiCb,kCAEC;;AAjCD,gDAAwB;AAExB,iEAO+B;AAC/B,yDAAkD;AAClD,qFAA6E;AAC7E,mGAA4F;AAE5F,qDAAmD;AAanD;;;GAGG;AACH,SAAgB,WAAW,CAAC,KAAuB;IACjD,OAAO,uBAAC,qCAAgB,OAAK,KAAK,GAAI,CAAC;AACzC,CAAC;AAED,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AAkCxC,SAAS,OAAO,CACd,EACE,QAAQ,EACR,KAAK,EACL,gBAAgB,EAChB,YAAY,EACZ,MAAM,EACN,WAAW,EACX,YAAY,EACZ,SAAS,EACT,UAAU,EACV,GAAG,KAAK,EACK,EACf,GAA8B;IAE9B,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,IAAA,gDAAoB,EAAC,GAAG,EAAE;QACxB,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,gFAAgF,CAAC,CAAC;QACjG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,OAAO,CACL,wBAAC,+BAAU,IACT,SAAS,EAAE,IAAA,cAAI,EAAC,aAAa,EAAE,gBAAgB,CAAC,EAChD,KAAK,EAAE,YAAY,EACnB,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,EAAE,EACpB,MAAM,EAAE,CAAC,EACT,mBAAmB,EAAE,CAAC,0CAGtB,uBAAC,oCAAe,IAAC,SAAS,EAAC,mBAAmB,YAC5C,gCAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,YAChF,iCAAM,CAAC,EAAC,mEAAmE,GAAG,GAC1E,GACU,EAClB,uBAAC,8BAAS,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,oBAAoB,YAC3D,CAAC,WAAW,EAAE,EAAE,CAAC,CAChB,6DACG,KAAK,IAAI,CACR,uBAAC,+BAAU,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,IAAA,cAAI,EAAC,mBAAmB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,YAC7F,KAAK,GACK,CACd,EACD,uBAAC,2CAAkB,IAAC,SAAS,EAAC,qBAAqB,EAAC,eAAe,EAAC,UAAU,YAC3E,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,QAAQ,GAC/C,IACpB,CACJ,GACS,IACD,CACd,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,QAAQ,GAAG,IAAA,2BAAU,EAAC,OAAO,EAAE,SAAS,CAAC,CAAC;AAE3B,2BAAO","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode, RefObject } from 'react';\nimport {\n DialogTrigger as RACDialogTrigger,\n Popover as RACPopover,\n type PopoverProps as RACPopoverProps,\n OverlayArrow as RACOverlayArrow,\n Dialog as RACDialog,\n Heading as RACHeading,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { FocusableContainer } from '../internal/focusable-container/focusable-container.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface PopoverRootProps {\n /** The popover trigger with its associated popover. Provide the trigger as the first child, and the popover as the second child. */\n children: ReactNode;\n /** Whether the popover is open (controlled). */\n isOpen?: boolean;\n /** Whether the popover is open by default (uncontrolled). */\n defaultOpen?: boolean;\n /** Handler that is called when the popover's open state changes. */\n onOpenChange?: (isOpen: boolean) => void;\n}\n\n/**\n * Encapsulates a popover trigger and its associated popover.\n * The trigger can be any Cimpress UI button, and the popover will be displayed when the trigger is activated.\n */\nexport function PopoverRoot(props: PopoverRootProps) {\n return <RACDialogTrigger {...props} />;\n}\n\nPopoverRoot.displayName = 'PopoverRoot';\n\nexport interface PopoverRenderProps {\n /** Closes the popover when called. */\n close: () => void;\n}\n\nexport interface PopoverProps extends CommonProps, AriaLabelingProps, Pick<RACPopoverProps, 'placement'> {\n /** The contents of the popover. A function may be provided to access a function to close the popover. */\n children: ReactNode | ((renderProps: PopoverRenderProps) => ReactNode);\n /** The title of the popover. */\n title?: string;\n /**\n * Whether the popover is open (controlled).\n * If using `PopoverRoot`, this prop has no effect - provide `isOpen` to `PopoverRoot` instead.\n */\n isOpen?: boolean;\n /**\n * Whether the popover is open by default (uncontrolled).\n * If using `PopoverRoot`, this prop has no effect - provide `defaultOpen` to `PopoverRoot` instead.\n */\n defaultOpen?: boolean;\n /**\n * Handler that is called when the popover's open state changes.\n * If using `PopoverRoot`, this prop has no effect - provide `onOpenChange` to `PopoverRoot` instead.\n */\n onOpenChange?: (isOpen: boolean) => void;\n /**\n * The ref for the element which the popover positions itself with respect to.\n * When used within `PopoverRoot`, this is set automatically. Provide `triggerRef` only when `Popover` is used standalone.\n */\n triggerRef?: RefObject<Element | null>;\n}\n\nfunction Popover(\n {\n children,\n title,\n UNSAFE_className,\n UNSAFE_style,\n isOpen,\n defaultOpen,\n onOpenChange,\n placement,\n triggerRef,\n ...props\n }: PopoverProps,\n ref: ForwardedRef<HTMLElement>,\n) {\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!title && !ariaLabel && !ariaLabelledBy) {\n console.warn('Popover requires one of title / aria-label / aria-labelledby for accessibility');\n }\n }, [title, ariaLabel, ariaLabelledBy]);\n\n return (\n <RACPopover\n className={clsx('cim-popover', UNSAFE_className)}\n style={UNSAFE_style}\n isOpen={isOpen}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n triggerRef={triggerRef}\n placement={placement}\n containerPadding={16}\n offset={5} // 1px border + 4px actual offset\n arrowBoundaryOffset={4} // offset by border radius so that the arrow is never positioned over the rounded corner\n data-cim-style-root\n >\n <RACOverlayArrow className=\"cim-popover-arrow\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"10\" viewBox=\"0 0 16 10\">\n <path d=\"M16 0L8.7809 9.0239C8.3805 9.5243 7.6195 9.5243 7.2191 9.0239L0 0\" />\n </svg>\n </RACOverlayArrow>\n <RACDialog {...props} ref={ref} className=\"cim-popover-dialog\">\n {(renderProps) => (\n <>\n {title && (\n <RACHeading slot=\"title\" className={clsx('cim-popover-title', textStyle({ variant: 'title-5' }))}>\n {title}\n </RACHeading>\n )}\n <FocusableContainer className=\"cim-popover-content\" scrollDirection=\"vertical\">\n {typeof children === 'function' ? children(renderProps) : children}\n </FocusableContainer>\n </>\n )}\n </RACDialog>\n </RACPopover>\n );\n}\n\n/**\n * Displays an overlay element positioned relative to a trigger.\n *\n * See [popover usage guidelines](https://ui.cimpress.io/components/popover/).\n */\nconst _Popover = forwardRef(Popover, 'Popover');\n\nexport { _Popover as Popover };\n"]}
1
+ {"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../../src/components/popover/popover.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useContext, useMemo, type ForwardedRef, type ReactNode, type RefObject } from 'react';\nimport { useInteractOutside, useObjectRef } from 'react-aria';\nimport {\n DialogTrigger as RACDialogTrigger,\n Popover as RACPopover,\n type PopoverProps as RACPopoverProps,\n OverlayArrow as RACOverlayArrow,\n Heading as RACHeading,\n OverlayTriggerStateContext as RACOverlayTriggerStateContext,\n Dialog as RACDialog,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { FocusableContainer } from '../internal/focusable-container/focusable-container.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface PopoverRootProps {\n /** The popover trigger with its associated popover. Provide the trigger as the first child, and the popover as the second child. */\n children: ReactNode;\n /** Whether the popover is open (controlled). */\n isOpen?: boolean;\n /** Whether the popover is open by default (uncontrolled). */\n defaultOpen?: boolean;\n /** Handler that is called when the popover's open state changes. */\n onOpenChange?: (isOpen: boolean) => void;\n}\n\n/**\n * Encapsulates a popover trigger and its associated popover.\n * The trigger can be any Cimpress UI button, and the popover will be displayed when the trigger is activated.\n */\nexport function PopoverRoot(props: PopoverRootProps) {\n return <RACDialogTrigger {...props} />;\n}\n\nPopoverRoot.displayName = 'PopoverRoot';\n\nexport interface PopoverRenderProps {\n /** Closes the popover when called. */\n close: () => void;\n}\n\nexport interface PopoverProps extends CommonProps, AriaLabelingProps, Pick<RACPopoverProps, 'placement'> {\n /** The contents of the popover. A function may be provided to access a function to close the popover. */\n children: ReactNode | ((renderProps: PopoverRenderProps) => ReactNode);\n /** The title of the popover. */\n title?: string;\n /**\n * Whether the popover is open (controlled).\n * If using `PopoverRoot`, this prop has no effect - provide `isOpen` to `PopoverRoot` instead.\n */\n isOpen?: boolean;\n /**\n * Whether the popover is open by default (uncontrolled).\n * If using `PopoverRoot`, this prop has no effect - provide `defaultOpen` to `PopoverRoot` instead.\n */\n defaultOpen?: boolean;\n /**\n * Handler that is called when the popover's open state changes.\n * If using `PopoverRoot`, this prop has no effect - provide `onOpenChange` to `PopoverRoot` instead.\n */\n onOpenChange?: (isOpen: boolean) => void;\n /**\n * The ref for the element which the popover positions itself with respect to.\n * When used within `PopoverRoot`, this is set automatically. Provide `triggerRef` only when `Popover` is used standalone.\n */\n triggerRef?: RefObject<Element | null>;\n /**\n * Allows the popover to be non-modal, meaning it will not block interactions outside the popover.\n * This is non-default behavior and can lead to accessibility and interaction issues. Use only if you have a specific, valid reason.\n */\n UNSTABLE_isNonModal?: boolean;\n /**\n * Limits the maximum height of the popover.\n */\n UNSTABLE_maxHeight?: number;\n}\n\nfunction Popover(\n {\n children,\n title,\n UNSAFE_className,\n UNSAFE_style,\n isOpen,\n defaultOpen,\n onOpenChange,\n placement,\n triggerRef,\n UNSTABLE_isNonModal,\n UNSTABLE_maxHeight,\n ...props\n }: PopoverProps,\n ref: ForwardedRef<HTMLElement>,\n) {\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!title && !ariaLabel && !ariaLabelledBy) {\n console.warn('Popover requires one of title / aria-label / aria-labelledby for accessibility');\n }\n }, [title, ariaLabel, ariaLabelledBy]);\n\n const popoverRef = useObjectRef(ref);\n\n return (\n <RACPopover\n ref={popoverRef}\n className={clsx('cim-popover', UNSAFE_className)}\n style={UNSAFE_style}\n isOpen={isOpen}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n triggerRef={triggerRef}\n placement={placement}\n containerPadding={16}\n offset={5} // 1px border + 4px actual offset\n arrowBoundaryOffset={4} // offset by border radius so that the arrow is never positioned over the rounded corner\n isNonModal={UNSTABLE_isNonModal}\n maxHeight={UNSTABLE_maxHeight}\n data-cim-style-root\n >\n <PopoverInner title={title} children={children} popoverRef={popoverRef} isNonModal={UNSTABLE_isNonModal} />\n </RACPopover>\n );\n}\n\ninterface PopoverInnerProps {\n title?: string;\n children: ReactNode | ((renderProps: PopoverRenderProps) => ReactNode);\n popoverRef: RefObject<HTMLElement>;\n isNonModal?: boolean;\n}\n\nfunction PopoverInner({ title, children, popoverRef, isNonModal }: PopoverInnerProps) {\n const overlayTriggerState = useContext(RACOverlayTriggerStateContext);\n const renderProps = useMemo(() => ({ close: () => overlayTriggerState?.close() }), [overlayTriggerState]);\n\n // For non-modal popovers, React Aria does not handle outside interaction by default,\n // so we use a custom handler here. Modal popovers already handle this internally.\n useInteractOutside({\n ref: popoverRef,\n onInteractOutside: () => {\n // Delay closing to prevent race conditions: when the trigger is pressed, both the trigger and the interact outside handler fire.\n // Without this delay, the popover may immediately reopen after closing.\n requestAnimationFrame(() => {\n overlayTriggerState?.close();\n });\n },\n isDisabled: !isNonModal,\n });\n\n return (\n <>\n <RACOverlayArrow className=\"cim-popover-arrow\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"10\" viewBox=\"0 0 16 10\">\n <path d=\"M16 0L8.7809 9.0239C8.3805 9.5243 7.6195 9.5243 7.2191 9.0239L0 0\" />\n </svg>\n </RACOverlayArrow>\n\n <RACDialog className=\"cim-popover-body\">\n {title && (\n <RACHeading slot=\"title\" className={clsx('cim-popover-title', textStyle({ variant: 'title-5' }))}>\n {title}\n </RACHeading>\n )}\n <FocusableContainer className=\"cim-popover-content\" scrollDirection=\"vertical\">\n {typeof children === 'function' ? children(renderProps) : children}\n </FocusableContainer>\n </RACDialog>\n </>\n );\n}\n\n/**\n * Displays an overlay element positioned relative to a trigger.\n *\n * See [popover usage guidelines](https://ui.cimpress.io/components/popover/).\n */\nconst _Popover = forwardRef(Popover, 'Popover');\n\nexport { _Popover as Popover };\n"]}
@@ -31,7 +31,7 @@ export interface SelectProps<T extends CollectionItem = CollectionItem, M extend
31
31
  * How the selected value is displayed.
32
32
  * @default 'text'
33
33
  */
34
- UNSTABLE_valueDisplay?: 'text' | 'tags';
34
+ UNSTABLE_valueDisplay?: 'text' | 'tags' | 'count';
35
35
  /**
36
36
  * Whether the list of options should be filterable.
37
37
  * @default false
@@ -1 +1 @@
1
- {"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"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"}
@@ -20,6 +20,7 @@ const is_production_js_1 = require("../../utils/is-production.js");
20
20
  const string_like_children_to_string_js_1 = require("../../utils/string-like-children-to-string.js");
21
21
  const use_production_warning_js_1 = require("../../utils/use-production-warning.js");
22
22
  const with_style_props_js_1 = require("../../with-style-props.js");
23
+ const checkbox_indicator_js_1 = require("../internal/checkbox-indicator/checkbox-indicator.js");
23
24
  const collapsible_list_js_1 = require("../internal/collapsible-list/collapsible-list.js");
24
25
  const form_field_js_1 = require("../internal/form-field/form-field.js");
25
26
  const x_button_js_1 = require("../internal/x-button/x-button.js");
@@ -77,7 +78,7 @@ const SelectButton = (0, forward_ref_js_1.forwardRef)(({ valueDisplay, isClearab
77
78
  const triggerRef = (0, react_1.useRef)(null);
78
79
  const collectionMessages = (0, index_js_1.useLocalizedMessages)('UNSTABLE_collection');
79
80
  return ((0, jsx_runtime_1.jsxs)("div", { className: "cim-select-button", children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { ref: (0, utils_1.mergeRefs)(ref, triggerRef), className: "cim-select-button-trigger" }), (0, jsx_runtime_1.jsx)(react_aria_components_1.SelectValue, { className: (0, clsx_1.default)('cim-select-button-value', (0, utils_js_1.textStyle)({ variant: 'body', alignment: 'start' })), children: ({ selectedText, defaultChildren, isPlaceholder, state }) => {
80
- if (valueDisplay === 'tags' && state.selectedItems.length > 0) {
81
+ if ((valueDisplay === 'tags' && state.selectedItems.length > 0) || valueDisplay === 'count') {
81
82
  return ((0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "span", variant: "body", tone: "subtle", children: collectionMessages.format('itemsSelected', { selectedItemCount: state.selectedItems.length }) }));
82
83
  }
83
84
  return isPlaceholder ? defaultChildren : selectedText;
@@ -148,7 +149,7 @@ exports.Select = _Select;
148
149
  /** Renders a single list item within `Select`. */
149
150
  function SelectItem({ children, ...props }) {
150
151
  const textValue = (0, string_like_children_to_string_js_1.stringLikeChildrenToString)(children);
151
- return ((0, jsx_runtime_1.jsx)(react_aria_components_1.ListBoxItem, { ...props, className: "cim-select-item", textValue: textValue, children: ({ isDisabled }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_js_2.IconCheck, {}), (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 })] })) }));
152
+ return ((0, jsx_runtime_1.jsx)(react_aria_components_1.ListBoxItem, { ...props, className: "cim-select-item", 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_2.IconCheckBold, {}), selectionMode === 'multiple' && (0, jsx_runtime_1.jsx)(checkbox_indicator_js_1.CheckboxIndicator, { isSelected: isSelected, isDisabled: isDisabled }), (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 })] })) }));
152
153
  }
153
154
  SelectItem.displayName = 'SelectItem';
154
155
  /** Groups list items within `Select` into a section. */
@@ -1 +1 @@
1
- {"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { mergeRefs } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport {\n type ForwardedRef,\n type ReactNode,\n type UIEventHandler,\n useContext,\n useImperativeHandle,\n useMemo,\n useRef,\n} from 'react';\nimport { useFilter, useId, useInteractOutside, usePreventScroll } from 'react-aria';\nimport {\n Autocomplete as RACAutocomplete,\n Button as RACButton,\n Collection as RACCollection,\n Header as RACHeader,\n LabelContext as RACLabelContext,\n ListBox as RACListBox,\n ListBoxItem as RACListBoxItem,\n type ListBoxItemProps as RACListBoxItemProps,\n ListBoxLoadMoreItem as RACListBoxLoadMoreItem,\n type ListBoxProps as RACListBoxProps,\n ListBoxSection as RACListBoxSection,\n ListLayout as RACListLayout,\n type ListLayoutOptions as RACListLayoutOptions,\n Select as RACSelect,\n type SelectProps as RACSelectProps,\n SelectStateContext as RACSelectStateContext,\n SelectValue as RACSelectValue,\n Text as RACText,\n Virtualizer as RACVirtualizer,\n useSlottedContext,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { IconCheck, IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { stringLikeChildrenToString } from '../../utils/string-like-children-to-string.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { XButton } from '../internal/x-button/x-button.js';\nimport { Spinner } from '../spinner/spinner.js';\nimport { TagGroup } from '../tag/tag-group.js';\nimport { Tag } from '../tag/tag.js';\nimport { SearchField } from '../text-inputs/search-field.js';\nimport type {\n ApiProps,\n AsyncItemLoadingProps,\n CollectionItem,\n CollectionProps,\n CommonProps,\n FieldProps,\n Key,\n StringLikeChildren,\n} from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { textStyle } from '../typography/utils.js';\nimport { UNSTABLE_VisuallyHidden } from '../visually-hidden/visually-hidden.js';\n\nexport type UNSTABLE_SelectSelectionMode = 'single' | 'multiple';\n\nconst VIRTUAL_LAYOUT_OPTIONS: RACListLayoutOptions = {\n estimatedRowHeight: 40,\n estimatedHeadingHeight: 32,\n loaderHeight: 40,\n padding: 0,\n gap: 0,\n};\n\nexport interface SelectProps<\n T extends CollectionItem = CollectionItem,\n M extends UNSTABLE_SelectSelectionMode = 'single',\n>\n extends\n CommonProps,\n FieldProps<M extends 'single' ? Key : Key[]>,\n CollectionProps<T>,\n AsyncItemLoadingProps,\n ApiProps<SelectApi>,\n Pick<\n RACSelectProps<T, M>,\n | 'isDisabled'\n | 'isRequired'\n | 'isInvalid'\n | 'autoComplete'\n | 'autoFocus'\n | 'placeholder'\n | 'onFocus'\n | 'onBlur'\n | 'onOpenChange'\n > {\n /** The currently selected key in the collection (controlled). */\n selectedKey?: Key | null;\n /** The initial selected key in the collection (uncontrolled). */\n defaultSelectedKey?: Key;\n /** Handler that is called when the selection changes. */\n onSelectionChange?: (key: Key | null) => void;\n /**\n * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.\n * @default false\n */\n isVirtualized?: boolean;\n /** Handler that is called when the list of items is scrolled. */\n onScroll?: UIEventHandler<HTMLDivElement>;\n /**\n * The selection mode of the select.\n * @default 'single'\n */\n UNSTABLE_selectionMode?: M;\n /** The value of the select (controlled). */\n UNSTABLE_value?: M extends 'single' ? Key | null : Key[];\n /** The initial value of the select (uncontrolled). */\n UNSTABLE_defaultValue?: M extends 'single' ? Key : Key[];\n /** Handler that is called when the value changes. */\n UNSTABLE_onChange?: (key: M extends 'single' ? Key | null : Key[]) => void;\n /**\n * How the selected value is displayed.\n * @default 'text'\n */\n UNSTABLE_valueDisplay?: 'text' | 'tags';\n /**\n * Whether the list of options should be filterable.\n * @default false\n */\n UNSTABLE_isFilterable?: boolean;\n /** The value of the filter input (controlled). */\n UNSTABLE_filterValue?: string;\n /** The initial value of the filter input (uncontrolled). */\n UNSTABLE_defaultFilterValue?: string;\n /** Handler that is called when the filter value changes. */\n UNSTABLE_onFilterChange?: (value: string) => void;\n /** A custom filter function to use instead of the default filter. */\n UNSTABLE_filter?: ((textValue: string, inputValue: string, node: { key: Key; value: T | null }) => boolean) | null;\n UNSTABLE_isClearable?: boolean;\n}\n\n/** The imperative API exposed by the `Select` component. */\nexport interface SelectApi {\n /** Focuses the trigger button and opens the list of items. */\n focus: () => void;\n}\n\nfunction Select<T extends CollectionItem, M extends UNSTABLE_SelectSelectionMode = 'single'>(\n {\n children,\n items,\n label,\n description,\n error,\n UNSAFE_className,\n UNSAFE_style,\n onScroll,\n isVirtualized = false,\n apiRef,\n UNSTABLE_isLoading: isLoading,\n UNSTABLE_onLoadMore: onLoadMore,\n selectedKey,\n defaultSelectedKey,\n onSelectionChange,\n UNSTABLE_selectionMode,\n UNSTABLE_value,\n UNSTABLE_defaultValue,\n UNSTABLE_onChange,\n UNSTABLE_valueDisplay: valueDisplay = 'text',\n UNSTABLE_isFilterable: isFilterable = false,\n UNSTABLE_filterValue: filterValue,\n UNSTABLE_defaultFilterValue: defaultFilterValue,\n UNSTABLE_onFilterChange: onFilterChange,\n UNSTABLE_filter: filter,\n UNSTABLE_isClearable: isClearable = false,\n ...props\n }: SelectProps<T, M>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const triggerRef = useRef<HTMLButtonElement>(null);\n\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('Select requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`Select` requires `children` to be a function when using `items` prop');\n }\n\n useImperativeHandle(\n apiRef,\n () => ({\n focus: () => triggerRef.current?.focus(),\n }),\n [],\n );\n\n const listBox = (\n <SelectListBox items={items} isLoading={isLoading} onLoadMore={onLoadMore} onScroll={onScroll}>\n {children}\n </SelectListBox>\n );\n\n const listBoxWithVirtualizer = isVirtualized ? (\n <RACVirtualizer layout={RACListLayout} layoutOptions={VIRTUAL_LAYOUT_OPTIONS}>\n {listBox}\n </RACVirtualizer>\n ) : (\n listBox\n );\n\n const listBoxWithFilter = isFilterable ? (\n <SelectFilter\n filterValue={filterValue}\n defaultFilterValue={defaultFilterValue}\n onFilterChange={onFilterChange}\n filter={filter}\n >\n {listBoxWithVirtualizer}\n </SelectFilter>\n ) : (\n listBoxWithVirtualizer\n );\n\n return (\n <RACSelect\n {...props}\n ref={ref}\n className={clsx('cim-select', UNSAFE_className)}\n style={UNSAFE_style}\n selectedKey={selectedKey}\n defaultSelectedKey={defaultSelectedKey}\n onSelectionChange={onSelectionChange}\n value={UNSTABLE_value}\n defaultValue={UNSTABLE_defaultValue}\n onChange={UNSTABLE_onChange}\n selectionMode={UNSTABLE_selectionMode}\n allowsEmptyCollection={isLoading}\n >\n <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n {label}\n </FormFieldLabel>\n <SelectButton ref={triggerRef} valueDisplay={valueDisplay} isClearable={isClearable} />\n <FormFieldError>{error}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n <SelectPopover>{listBoxWithFilter}</SelectPopover>\n {UNSTABLE_selectionMode === 'multiple' && valueDisplay === 'tags' && <SelectTags />}\n </RACSelect>\n );\n}\n\ninterface SelectPopoverProps {\n children: ReactNode;\n}\n\nfunction SelectPopover({ children }: SelectPopoverProps) {\n const popoverRef = useRef<HTMLDivElement>(null);\n const selectState = useContext(RACSelectStateContext);\n\n // Popover is non-modal, but we still want to close it when the user interacts outside\n useInteractOutside({\n ref: popoverRef,\n onInteractOutside: () => {\n selectState?.close();\n },\n isDisabled: !selectState?.isOpen,\n });\n\n // Popover is non-modal, but we still want to prevent scrolling when it is open\n usePreventScroll({ isDisabled: !selectState?.isOpen });\n\n return (\n <CollapsibleList\n ref={popoverRef}\n offset={5} // 1px border + 4px actual offset\n maxHeight={315}\n // Set to non-modal so that interactions like clicking the clear button can be performed without first having to close the popover\n isNonModal\n >\n {children}\n </CollapsibleList>\n );\n}\n\ninterface SelectButtonProps {\n valueDisplay: SelectProps['UNSTABLE_valueDisplay'];\n isClearable?: SelectProps['UNSTABLE_isClearable'];\n}\n\nconst SelectButton = forwardRef<SelectButtonProps, HTMLButtonElement>(({ valueDisplay, isClearable }, ref) => {\n const triggerRef = useRef<HTMLButtonElement>(null);\n const collectionMessages = useLocalizedMessages('UNSTABLE_collection');\n\n return (\n <div className=\"cim-select-button\">\n <RACButton ref={mergeRefs(ref, triggerRef)} className=\"cim-select-button-trigger\" />\n <RACSelectValue className={clsx('cim-select-button-value', textStyle({ variant: 'body', alignment: 'start' }))}>\n {({ selectedText, defaultChildren, isPlaceholder, state }) => {\n if (valueDisplay === 'tags' && state.selectedItems.length > 0) {\n return (\n <Text as=\"span\" variant=\"body\" tone=\"subtle\">\n {collectionMessages.format('itemsSelected', { selectedItemCount: state.selectedItems.length })}\n </Text>\n );\n }\n\n return isPlaceholder ? defaultChildren : selectedText;\n }}\n </RACSelectValue>\n {isClearable && (\n <SelectClearButton\n // Move focus to trigger button, because button will disappear after clearing\n onClear={() => triggerRef.current?.focus()}\n />\n )}\n <IconChevronDown UNSAFE_className=\"cim-select-button-chevron\" />\n </div>\n );\n});\n\nfunction SelectClearButton({ onClear }: { onClear?: () => void }) {\n const selectState = useContext(RACSelectStateContext);\n\n if (!selectState || selectState.selectedItems.length === 0) {\n return null;\n }\n\n return (\n <XButton\n // TODO: i18n once stabilized\n aria-label=\"Clear selection\"\n iconType=\"circled\"\n onPress={() => {\n selectState.setValue(null);\n onClear?.();\n }}\n slot={null}\n UNSAFE_className=\"cim-select-button-clear\"\n />\n );\n}\n\nfunction SelectListBox<T extends CollectionItem>({\n children,\n items,\n isLoading,\n onLoadMore,\n ...props\n}: RACListBoxProps<T> & {\n isLoading?: boolean;\n onLoadMore?: () => void;\n}) {\n const collectionMessages = useLocalizedMessages('UNSTABLE_collection');\n const selectState = useContext(RACSelectStateContext);\n const isEmpty = selectState?.collection.size === 0;\n\n return (\n <RACListBox\n className=\"cim-select-listbox\"\n renderEmptyState={() =>\n !isLoading && (\n // TODO: i18n once stabilized\n <Text\n as=\"p\"\n variant=\"body\"\n tone=\"subtle\"\n marginX={8}\n marginY={8}\n UNSAFE_className=\"cim-select-listbox-empty-state\"\n >\n No results found.\n </Text>\n )\n }\n {...props}\n >\n <RACCollection items={items}>{children}</RACCollection>\n <RACListBoxLoadMoreItem onLoadMore={onLoadMore} isLoading={isLoading}>\n <Spinner aria-label={collectionMessages.format(isEmpty ? 'loading' : 'loadingMore')} size=\"small\" marginY={8} />\n </RACListBoxLoadMoreItem>\n </RACListBox>\n );\n}\n\nfunction SelectFilter<T extends CollectionItem>({\n children,\n filterValue,\n defaultFilterValue,\n onFilterChange,\n filter,\n}: RACListBoxProps<T> & {\n children: ReactNode;\n filterValue?: string;\n defaultFilterValue?: string;\n onFilterChange?: (value: string) => void;\n filter?: ((textValue: string, inputValue: string, node: { key: Key; value: T | null }) => boolean) | null;\n}) {\n const { contains } = useFilter({ sensitivity: 'base' });\n const filterFn = useMemo(() => {\n if (filter === null) return undefined;\n if (filter == null) return contains;\n\n return (textValue: string, inputValue: string, node: { key: Key; value: T | null }) => {\n return filter(textValue, inputValue, { key: node.key, value: node.value });\n };\n }, [filter, contains]);\n\n return (\n <RACAutocomplete<T>\n filter={filterFn}\n inputValue={filterValue}\n defaultInputValue={defaultFilterValue}\n onInputChange={onFilterChange}\n >\n <SearchField\n // TODO: i18n once stabilized\n aria-label=\"Search\"\n placeholder=\"Search\"\n autoFocus\n marginX={8}\n marginTop={8}\n />\n {children}\n </RACAutocomplete>\n );\n}\n\nfunction SelectTags() {\n const labelContext = useSlottedContext(RACLabelContext);\n const selectedItemsLabelId = useId();\n\n return (\n <RACSelectValue>\n {({ state }) => {\n if (state.selectedItems.length === 0) {\n return <></>;\n }\n\n return (\n <>\n <TagGroup\n aria-labelledby={[labelContext?.id, selectedItemsLabelId].filter(Boolean).join(' ')}\n items={state.selectedItems\n .filter((item) => item != null)\n .map((item) => ({ id: item.key, label: item.textValue }))}\n onRemove={(keys) => {\n if (Array.isArray(state.value)) {\n state.setValue(state.value.filter((k) => !keys.has(k)));\n }\n }}\n marginTop={8}\n >\n {(item) => <Tag>{item.label}</Tag>}\n </TagGroup>\n {/* TODO: i18n once stabilized */}\n <UNSTABLE_VisuallyHidden id={selectedItemsLabelId}>selected items</UNSTABLE_VisuallyHidden>\n </>\n );\n }}\n </RACSelectValue>\n );\n}\n\n/**\n * Allows users to select one item from a collapsible list.\n *\n * See [select usage guidelines](https://ui.cimpress.io/components/select/).\n */\nconst _Select = withStyleProps(forwardRef(Select), 'Select');\n\nexport { _Select as Select };\n\nexport interface SelectItemProps extends Pick<RACListBoxItemProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n /** The ID of the item. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the label. */\n children: StringLikeChildren;\n}\n\n/** Renders a single list item within `Select`. */\nexport function SelectItem({ children, ...props }: SelectItemProps) {\n const textValue = stringLikeChildrenToString(children);\n\n return (\n <RACListBoxItem {...props} className=\"cim-select-item\" textValue={textValue}>\n {({ isDisabled }) => (\n <>\n <IconCheck />\n\n <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n {children}\n </RACText>\n </>\n )}\n </RACListBoxItem>\n );\n}\n\nSelectItem.displayName = 'SelectItem';\n\nexport interface SelectSectionProps<T extends CollectionItem> extends CollectionProps<T> {\n /** The ID of the section. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the section title. */\n title: string;\n}\n\n/** Groups list items within `Select` into a section. */\nexport function SelectSection<T extends CollectionItem>({ title, children, items, ...props }: SelectSectionProps<T>) {\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`SelectSection` requires `children` to be a function when using `items` prop');\n }\n\n return (\n <RACListBoxSection {...props} className=\"cim-select-section\">\n <RACHeader\n className={clsx('cim-select-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n >\n {title}\n </RACHeader>\n <RACCollection items={items}>{children}</RACCollection>\n </RACListBoxSection>\n );\n}\n\nSelectSection.displayName = 'SelectSection';\n"]}
1
+ {"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { mergeRefs } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport {\n type ForwardedRef,\n type ReactNode,\n type UIEventHandler,\n useContext,\n useImperativeHandle,\n useMemo,\n useRef,\n} from 'react';\nimport { useFilter, useId, useInteractOutside, usePreventScroll } from 'react-aria';\nimport {\n Autocomplete as RACAutocomplete,\n Button as RACButton,\n Collection as RACCollection,\n Header as RACHeader,\n LabelContext as RACLabelContext,\n ListBox as RACListBox,\n ListBoxItem as RACListBoxItem,\n type ListBoxItemProps as RACListBoxItemProps,\n ListBoxLoadMoreItem as RACListBoxLoadMoreItem,\n type ListBoxProps as RACListBoxProps,\n ListBoxSection as RACListBoxSection,\n ListLayout as RACListLayout,\n type ListLayoutOptions as RACListLayoutOptions,\n Select as RACSelect,\n type SelectProps as RACSelectProps,\n SelectStateContext as RACSelectStateContext,\n SelectValue as RACSelectValue,\n Text as RACText,\n Virtualizer as RACVirtualizer,\n useSlottedContext,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { IconCheckBold, IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { stringLikeChildrenToString } from '../../utils/string-like-children-to-string.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CheckboxIndicator } from '../internal/checkbox-indicator/checkbox-indicator.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { XButton } from '../internal/x-button/x-button.js';\nimport { Spinner } from '../spinner/spinner.js';\nimport { TagGroup } from '../tag/tag-group.js';\nimport { Tag } from '../tag/tag.js';\nimport { SearchField } from '../text-inputs/search-field.js';\nimport type {\n ApiProps,\n AsyncItemLoadingProps,\n CollectionItem,\n CollectionProps,\n CommonProps,\n FieldProps,\n Key,\n StringLikeChildren,\n} from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { textStyle } from '../typography/utils.js';\nimport { UNSTABLE_VisuallyHidden } from '../visually-hidden/visually-hidden.js';\n\nexport type UNSTABLE_SelectSelectionMode = 'single' | 'multiple';\n\nconst VIRTUAL_LAYOUT_OPTIONS: RACListLayoutOptions = {\n estimatedRowHeight: 40,\n estimatedHeadingHeight: 32,\n loaderHeight: 40,\n padding: 0,\n gap: 0,\n};\n\nexport interface SelectProps<\n T extends CollectionItem = CollectionItem,\n M extends UNSTABLE_SelectSelectionMode = 'single',\n>\n extends\n CommonProps,\n FieldProps<M extends 'single' ? Key : Key[]>,\n CollectionProps<T>,\n AsyncItemLoadingProps,\n ApiProps<SelectApi>,\n Pick<\n RACSelectProps<T, M>,\n | 'isDisabled'\n | 'isRequired'\n | 'isInvalid'\n | 'autoComplete'\n | 'autoFocus'\n | 'placeholder'\n | 'onFocus'\n | 'onBlur'\n | 'onOpenChange'\n > {\n /** The currently selected key in the collection (controlled). */\n selectedKey?: Key | null;\n /** The initial selected key in the collection (uncontrolled). */\n defaultSelectedKey?: Key;\n /** Handler that is called when the selection changes. */\n onSelectionChange?: (key: Key | null) => void;\n /**\n * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.\n * @default false\n */\n isVirtualized?: boolean;\n /** Handler that is called when the list of items is scrolled. */\n onScroll?: UIEventHandler<HTMLDivElement>;\n /**\n * The selection mode of the select.\n * @default 'single'\n */\n UNSTABLE_selectionMode?: M;\n /** The value of the select (controlled). */\n UNSTABLE_value?: M extends 'single' ? Key | null : Key[];\n /** The initial value of the select (uncontrolled). */\n UNSTABLE_defaultValue?: M extends 'single' ? Key : Key[];\n /** Handler that is called when the value changes. */\n UNSTABLE_onChange?: (key: M extends 'single' ? Key | null : Key[]) => void;\n /**\n * How the selected value is displayed.\n * @default 'text'\n */\n UNSTABLE_valueDisplay?: 'text' | 'tags' | 'count';\n /**\n * Whether the list of options should be filterable.\n * @default false\n */\n UNSTABLE_isFilterable?: boolean;\n /** The value of the filter input (controlled). */\n UNSTABLE_filterValue?: string;\n /** The initial value of the filter input (uncontrolled). */\n UNSTABLE_defaultFilterValue?: string;\n /** Handler that is called when the filter value changes. */\n UNSTABLE_onFilterChange?: (value: string) => void;\n /** A custom filter function to use instead of the default filter. */\n UNSTABLE_filter?: ((textValue: string, inputValue: string, node: { key: Key; value: T | null }) => boolean) | null;\n UNSTABLE_isClearable?: boolean;\n}\n\n/** The imperative API exposed by the `Select` component. */\nexport interface SelectApi {\n /** Focuses the trigger button and opens the list of items. */\n focus: () => void;\n}\n\nfunction Select<T extends CollectionItem, M extends UNSTABLE_SelectSelectionMode = 'single'>(\n {\n children,\n items,\n label,\n description,\n error,\n UNSAFE_className,\n UNSAFE_style,\n onScroll,\n isVirtualized = false,\n apiRef,\n UNSTABLE_isLoading: isLoading,\n UNSTABLE_onLoadMore: onLoadMore,\n selectedKey,\n defaultSelectedKey,\n onSelectionChange,\n UNSTABLE_selectionMode,\n UNSTABLE_value,\n UNSTABLE_defaultValue,\n UNSTABLE_onChange,\n UNSTABLE_valueDisplay: valueDisplay = 'text',\n UNSTABLE_isFilterable: isFilterable = false,\n UNSTABLE_filterValue: filterValue,\n UNSTABLE_defaultFilterValue: defaultFilterValue,\n UNSTABLE_onFilterChange: onFilterChange,\n UNSTABLE_filter: filter,\n UNSTABLE_isClearable: isClearable = false,\n ...props\n }: SelectProps<T, M>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const triggerRef = useRef<HTMLButtonElement>(null);\n\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('Select requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`Select` requires `children` to be a function when using `items` prop');\n }\n\n useImperativeHandle(\n apiRef,\n () => ({\n focus: () => triggerRef.current?.focus(),\n }),\n [],\n );\n\n const listBox = (\n <SelectListBox items={items} isLoading={isLoading} onLoadMore={onLoadMore} onScroll={onScroll}>\n {children}\n </SelectListBox>\n );\n\n const listBoxWithVirtualizer = isVirtualized ? (\n <RACVirtualizer layout={RACListLayout} layoutOptions={VIRTUAL_LAYOUT_OPTIONS}>\n {listBox}\n </RACVirtualizer>\n ) : (\n listBox\n );\n\n const listBoxWithFilter = isFilterable ? (\n <SelectFilter\n filterValue={filterValue}\n defaultFilterValue={defaultFilterValue}\n onFilterChange={onFilterChange}\n filter={filter}\n >\n {listBoxWithVirtualizer}\n </SelectFilter>\n ) : (\n listBoxWithVirtualizer\n );\n\n return (\n <RACSelect\n {...props}\n ref={ref}\n className={clsx('cim-select', UNSAFE_className)}\n style={UNSAFE_style}\n selectedKey={selectedKey}\n defaultSelectedKey={defaultSelectedKey}\n onSelectionChange={onSelectionChange}\n value={UNSTABLE_value}\n defaultValue={UNSTABLE_defaultValue}\n onChange={UNSTABLE_onChange}\n selectionMode={UNSTABLE_selectionMode}\n allowsEmptyCollection={isLoading}\n >\n <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n {label}\n </FormFieldLabel>\n <SelectButton ref={triggerRef} valueDisplay={valueDisplay} isClearable={isClearable} />\n <FormFieldError>{error}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n <SelectPopover>{listBoxWithFilter}</SelectPopover>\n {UNSTABLE_selectionMode === 'multiple' && valueDisplay === 'tags' && <SelectTags />}\n </RACSelect>\n );\n}\n\ninterface SelectPopoverProps {\n children: ReactNode;\n}\n\nfunction SelectPopover({ children }: SelectPopoverProps) {\n const popoverRef = useRef<HTMLDivElement>(null);\n const selectState = useContext(RACSelectStateContext);\n\n // Popover is non-modal, but we still want to close it when the user interacts outside\n useInteractOutside({\n ref: popoverRef,\n onInteractOutside: () => {\n selectState?.close();\n },\n isDisabled: !selectState?.isOpen,\n });\n\n // Popover is non-modal, but we still want to prevent scrolling when it is open\n usePreventScroll({ isDisabled: !selectState?.isOpen });\n\n return (\n <CollapsibleList\n ref={popoverRef}\n offset={5} // 1px border + 4px actual offset\n maxHeight={315}\n // Set to non-modal so that interactions like clicking the clear button can be performed without first having to close the popover\n isNonModal\n >\n {children}\n </CollapsibleList>\n );\n}\n\ninterface SelectButtonProps {\n valueDisplay: SelectProps['UNSTABLE_valueDisplay'];\n isClearable?: SelectProps['UNSTABLE_isClearable'];\n}\n\nconst SelectButton = forwardRef<SelectButtonProps, HTMLButtonElement>(({ valueDisplay, isClearable }, ref) => {\n const triggerRef = useRef<HTMLButtonElement>(null);\n const collectionMessages = useLocalizedMessages('UNSTABLE_collection');\n\n return (\n <div className=\"cim-select-button\">\n <RACButton ref={mergeRefs(ref, triggerRef)} className=\"cim-select-button-trigger\" />\n <RACSelectValue className={clsx('cim-select-button-value', textStyle({ variant: 'body', alignment: 'start' }))}>\n {({ selectedText, defaultChildren, isPlaceholder, state }) => {\n if ((valueDisplay === 'tags' && state.selectedItems.length > 0) || valueDisplay === 'count') {\n return (\n <Text as=\"span\" variant=\"body\" tone=\"subtle\">\n {collectionMessages.format('itemsSelected', { selectedItemCount: state.selectedItems.length })}\n </Text>\n );\n }\n\n return isPlaceholder ? defaultChildren : selectedText;\n }}\n </RACSelectValue>\n {isClearable && (\n <SelectClearButton\n // Move focus to trigger button, because button will disappear after clearing\n onClear={() => triggerRef.current?.focus()}\n />\n )}\n <IconChevronDown UNSAFE_className=\"cim-select-button-chevron\" />\n </div>\n );\n});\n\nfunction SelectClearButton({ onClear }: { onClear?: () => void }) {\n const selectState = useContext(RACSelectStateContext);\n\n if (!selectState || selectState.selectedItems.length === 0) {\n return null;\n }\n\n return (\n <XButton\n // TODO: i18n once stabilized\n aria-label=\"Clear selection\"\n iconType=\"circled\"\n onPress={() => {\n selectState.setValue(null);\n onClear?.();\n }}\n slot={null}\n UNSAFE_className=\"cim-select-button-clear\"\n />\n );\n}\n\nfunction SelectListBox<T extends CollectionItem>({\n children,\n items,\n isLoading,\n onLoadMore,\n ...props\n}: RACListBoxProps<T> & {\n isLoading?: boolean;\n onLoadMore?: () => void;\n}) {\n const collectionMessages = useLocalizedMessages('UNSTABLE_collection');\n const selectState = useContext(RACSelectStateContext);\n const isEmpty = selectState?.collection.size === 0;\n\n return (\n <RACListBox\n className=\"cim-select-listbox\"\n renderEmptyState={() =>\n !isLoading && (\n // TODO: i18n once stabilized\n <Text\n as=\"p\"\n variant=\"body\"\n tone=\"subtle\"\n marginX={8}\n marginY={8}\n UNSAFE_className=\"cim-select-listbox-empty-state\"\n >\n No results found.\n </Text>\n )\n }\n {...props}\n >\n <RACCollection items={items}>{children}</RACCollection>\n <RACListBoxLoadMoreItem onLoadMore={onLoadMore} isLoading={isLoading}>\n <Spinner aria-label={collectionMessages.format(isEmpty ? 'loading' : 'loadingMore')} size=\"small\" marginY={8} />\n </RACListBoxLoadMoreItem>\n </RACListBox>\n );\n}\n\nfunction SelectFilter<T extends CollectionItem>({\n children,\n filterValue,\n defaultFilterValue,\n onFilterChange,\n filter,\n}: RACListBoxProps<T> & {\n children: ReactNode;\n filterValue?: string;\n defaultFilterValue?: string;\n onFilterChange?: (value: string) => void;\n filter?: ((textValue: string, inputValue: string, node: { key: Key; value: T | null }) => boolean) | null;\n}) {\n const { contains } = useFilter({ sensitivity: 'base' });\n const filterFn = useMemo(() => {\n if (filter === null) return undefined;\n if (filter == null) return contains;\n\n return (textValue: string, inputValue: string, node: { key: Key; value: T | null }) => {\n return filter(textValue, inputValue, { key: node.key, value: node.value });\n };\n }, [filter, contains]);\n\n return (\n <RACAutocomplete<T>\n filter={filterFn}\n inputValue={filterValue}\n defaultInputValue={defaultFilterValue}\n onInputChange={onFilterChange}\n >\n <SearchField\n // TODO: i18n once stabilized\n aria-label=\"Search\"\n placeholder=\"Search\"\n autoFocus\n marginX={8}\n marginTop={8}\n />\n {children}\n </RACAutocomplete>\n );\n}\n\nfunction SelectTags() {\n const labelContext = useSlottedContext(RACLabelContext);\n const selectedItemsLabelId = useId();\n\n return (\n <RACSelectValue>\n {({ state }) => {\n if (state.selectedItems.length === 0) {\n return <></>;\n }\n\n return (\n <>\n <TagGroup\n aria-labelledby={[labelContext?.id, selectedItemsLabelId].filter(Boolean).join(' ')}\n items={state.selectedItems\n .filter((item) => item != null)\n .map((item) => ({ id: item.key, label: item.textValue }))}\n onRemove={(keys) => {\n if (Array.isArray(state.value)) {\n state.setValue(state.value.filter((k) => !keys.has(k)));\n }\n }}\n marginTop={8}\n >\n {(item) => <Tag>{item.label}</Tag>}\n </TagGroup>\n {/* TODO: i18n once stabilized */}\n <UNSTABLE_VisuallyHidden id={selectedItemsLabelId}>selected items</UNSTABLE_VisuallyHidden>\n </>\n );\n }}\n </RACSelectValue>\n );\n}\n\n/**\n * Allows users to select one item from a collapsible list.\n *\n * See [select usage guidelines](https://ui.cimpress.io/components/select/).\n */\nconst _Select = withStyleProps(forwardRef(Select), 'Select');\n\nexport { _Select as Select };\n\nexport interface SelectItemProps extends Pick<RACListBoxItemProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n /** The ID of the item. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the label. */\n children: StringLikeChildren;\n}\n\n/** Renders a single list item within `Select`. */\nexport function SelectItem({ children, ...props }: SelectItemProps) {\n const textValue = stringLikeChildrenToString(children);\n\n return (\n <RACListBoxItem {...props} className=\"cim-select-item\" textValue={textValue}>\n {({ isDisabled, isSelected, selectionMode }) => (\n <>\n {selectionMode === 'single' && <IconCheckBold />}\n {selectionMode === 'multiple' && <CheckboxIndicator isSelected={isSelected} isDisabled={isDisabled} />}\n\n <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n {children}\n </RACText>\n </>\n )}\n </RACListBoxItem>\n );\n}\n\nSelectItem.displayName = 'SelectItem';\n\nexport interface SelectSectionProps<T extends CollectionItem> extends CollectionProps<T> {\n /** The ID of the section. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the section title. */\n title: string;\n}\n\n/** Groups list items within `Select` into a section. */\nexport function SelectSection<T extends CollectionItem>({ title, children, items, ...props }: SelectSectionProps<T>) {\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`SelectSection` requires `children` to be a function when using `items` prop');\n }\n\n return (\n <RACListBoxSection {...props} className=\"cim-select-section\">\n <RACHeader\n className={clsx('cim-select-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n >\n {title}\n </RACHeader>\n <RACCollection items={items}>{children}</RACCollection>\n </RACListBoxSection>\n );\n}\n\nSelectSection.displayName = 'SelectSection';\n"]}
@@ -62,7 +62,7 @@ exports.TagField = _TagField;
62
62
  /** Renders a single list item within `TagField`. */
63
63
  function TagFieldItem({ children, ...props }) {
64
64
  const textValue = typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');
65
- 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 })] })) }));
65
+ return ((0, jsx_runtime_1.jsx)(react_aria_components_1.ListBoxItem, { ...props, className: "cim-tag-field-item", textValue: textValue, children: ({ isDisabled, isSelected }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(checkbox_indicator_js_1.CheckboxIndicator, { isSelected: isSelected, isDisabled: isDisabled }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { slot: "label", className: (0, utils_js_1.textStyle)({ variant: 'body' }), children: children })] })) }));
66
66
  }
67
67
  TagFieldItem.displayName = 'TagFieldItem';
68
68
  /** Groups list items within `TagField` into a section. */
@@ -1 +1 @@
1
- {"version":3,"file":"tag-field.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type ForwardedRef, type UIEventHandler, useImperativeHandle, useRef } from 'react';\nimport { useId } from 'react-aria';\nimport {\n Button as RACButton,\n Collection as RACCollection,\n ComboBox as RACComboBox,\n Group as RACGroup,\n Header as RACHeader,\n ListBoxItem as RACListBoxItem,\n ListBoxSection as RACListBoxSection,\n Text as RACText,\n type ComboBoxProps as RACComboBoxProps,\n type ListBoxItemProps as RACListBoxItemProps,\n ComboBoxValue as RACComboBoxValue,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CheckboxIndicator } from '../internal/checkbox-indicator/checkbox-indicator.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { TagGroup, type TagGroupProps } from '../tag/tag-group.js';\nimport { Tag, type TagProps } from '../tag/tag.js';\nimport type {\n ApiProps,\n CollectionItem,\n CollectionProps,\n CommonProps,\n FieldWithPlaceholderProps,\n Key,\n StringLikeChildren,\n} from '../types.js';\nimport { textStyle } from '../typography/utils.js';\nimport { TagFieldInput } from './tag-field-input.js';\nimport { TagFieldListBox } from './tag-field-list-box.js';\n\n/** Represents the state of the `TagField` component for validation purposes. */\nexport interface TagFieldValidationValue {\n /** The selected keys in the TagField. */\n selectedKeys: Set<Key> | null;\n /** The value of the TagField input. */\n inputValue: string;\n}\n\nexport interface TagFieldProps<T extends CollectionItem = CollectionItem>\n extends\n CommonProps,\n FieldWithPlaceholderProps<TagFieldValidationValue>,\n CollectionProps<T>,\n ApiProps<TagFieldApi>,\n Pick<\n RACComboBoxProps<T>,\n | 'isRequired'\n | 'isDisabled'\n | 'isInvalid'\n | 'isReadOnly'\n | 'inputValue'\n | 'defaultInputValue'\n | 'autoFocus'\n | 'onInputChange'\n | 'onFocus'\n | 'onBlur'\n | 'onOpenChange'\n >,\n Pick<TagGroupProps<T>, 'renderEmptyState'> {\n /** The currently selected keys in the collection (controlled). */\n selectedKeys?: Iterable<Key>;\n /** The initial selected keys in the collection (uncontrolled). */\n defaultSelectedKeys?: Iterable<Key>;\n /** Handler that is called when the selection changes. */\n onSelectionChange?: (keys: Set<Key>) => void;\n /**\n * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.\n * @default false\n */\n isVirtualized?: boolean;\n /** Handler that is called when the list of items is scrolled. */\n onScroll?: UIEventHandler<HTMLDivElement>;\n}\n\n/** The imperative API exposed by the `TagField` component. */\nexport interface TagFieldApi {\n /** Focuses the input field and opens the list of items. */\n focus: () => void;\n}\n\nfunction TagField<T extends CollectionItem>(\n {\n label,\n description,\n error,\n items,\n children,\n placeholder,\n UNSAFE_className,\n UNSAFE_style,\n validate,\n isReadOnly,\n onScroll,\n selectedKeys,\n defaultSelectedKeys,\n onSelectionChange,\n id,\n renderEmptyState,\n isVirtualized = false,\n apiRef,\n ...props\n }: TagFieldProps<T>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const inputRef = useRef<HTMLInputElement>(null);\n\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, isRequired, isDisabled } = props;\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('TagField requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`TagField` requires `children` to be a function when using `items` prop');\n }\n\n const inputId = useId(id);\n\n useImperativeHandle(\n apiRef,\n () => ({\n focus: () => inputRef.current?.focus(),\n }),\n [],\n );\n\n return (\n <RACComboBox\n {...props}\n ref={ref}\n className={clsx('cim-combo-box', 'cim-tag-field', UNSAFE_className)}\n style={UNSAFE_style}\n id={inputId}\n selectionMode=\"multiple\"\n value={selectedKeys ? Array.from(selectedKeys) : undefined}\n defaultValue={defaultSelectedKeys ? Array.from(defaultSelectedKeys) : undefined}\n onChange={(keys) => onSelectionChange?.(new Set(keys))}\n menuTrigger=\"focus\"\n isReadOnly={isReadOnly}\n data-readonly={isReadOnly ? true : undefined}\n validate={\n validate\n ? ({ inputValue, value }) => {\n return validate({ inputValue, selectedKeys: new Set(value as unknown as Key[]) });\n }\n : undefined\n }\n >\n <FormFieldLabel isRequired={isRequired} isDisabled={isDisabled}>\n {label}\n </FormFieldLabel>\n\n <RACGroup className=\"cim-combo-box-input-group\">\n <TagFieldInput\n inputRef={inputRef}\n aria-describedby={props['aria-describedby']}\n isReadOnly={isReadOnly}\n placeholder={placeholder}\n />\n <RACButton className=\"cim-combo-box-button\">\n <IconChevronDown />\n </RACButton>\n </RACGroup>\n\n <FormFieldError>{error}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n\n <RACComboBoxValue>\n {({ state }) => (\n <TagGroup\n aria-labelledby={inputId}\n disabledKeys={isDisabled ? state.selectedItems.map((item) => item.key) : undefined}\n renderEmptyState={renderEmptyState}\n onRemove={\n isReadOnly\n ? undefined\n : (keys) => {\n if (Array.isArray(state.value)) {\n state.setValue(state.value.filter((k) => !keys.has(k)));\n }\n }\n }\n >\n {state.selectedItems.map((item) => (\n <Tag key={item.key} id={item.key} isDisabled={(item.props as TagProps).isDisabled}>\n {item.textValue}\n </Tag>\n ))}\n </TagGroup>\n )}\n </RACComboBoxValue>\n\n <CollapsibleList\n offset={5} // 1px border + 4px actual offset\n maxHeight={315}\n >\n <TagFieldListBox<T> items={items} onScroll={onScroll} isVirtualized={isVirtualized}>\n {children}\n </TagFieldListBox>\n </CollapsibleList>\n </RACComboBox>\n );\n}\n\n/**\n * Allows users to filter a collapsible list and select multiple items from it.\n *\n * See [tag field usage guidelines](https://ui.cimpress.io/components/tag-field).\n */\nconst _TagField = withStyleProps(forwardRef(TagField), 'TagField');\n\nexport { _TagField as TagField };\n\nexport interface TagFieldItemProps<T extends CollectionItem> extends Pick<\n RACListBoxItemProps<T>,\n 'isDisabled' | 'onHoverStart' | 'onHoverEnd'\n> {\n /** The ID of the item. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the label. */\n children: StringLikeChildren;\n}\n\n/** Renders a single list item within `TagField`. */\nexport function TagFieldItem<T extends CollectionItem>({ children, ...props }: TagFieldItemProps<T>) {\n const textValue =\n typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n return (\n <RACListBoxItem {...props} className=\"cim-tag-field-item cim-checkbox-indicator-wrapper\" textValue={textValue}>\n {({ isDisabled }) => (\n <>\n <CheckboxIndicator />\n\n <RACText slot=\"label\" className={textStyle({ variant: 'medium', tone: isDisabled ? 'muted' : 'base' })}>\n {children}\n </RACText>\n </>\n )}\n </RACListBoxItem>\n );\n}\n\nTagFieldItem.displayName = 'TagFieldItem';\n\nexport interface TagFieldSectionProps<T extends CollectionItem> extends CollectionProps<T> {\n /** The ID of the section. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the section title. */\n title: string;\n}\n\n/** Groups list items within `TagField` into a section. */\nexport function TagFieldSection<T extends CollectionItem>({\n title,\n children,\n items,\n ...props\n}: TagFieldSectionProps<T>) {\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`TagFieldSection` requires `children` to be a function when using `items` prop');\n }\n\n return (\n <RACListBoxSection {...props} className=\"cim-combo-box-section\">\n <RACHeader\n className={clsx('cim-combo-box-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n >\n {title}\n </RACHeader>\n <RACCollection items={items}>{children}</RACCollection>\n </RACListBoxSection>\n );\n}\n\nTagFieldSection.displayName = 'TagFieldSection';\n"]}
1
+ {"version":3,"file":"tag-field.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type ForwardedRef, type UIEventHandler, useImperativeHandle, useRef } from 'react';\nimport { useId } from 'react-aria';\nimport {\n Button as RACButton,\n Collection as RACCollection,\n ComboBox as RACComboBox,\n Group as RACGroup,\n Header as RACHeader,\n ListBoxItem as RACListBoxItem,\n ListBoxSection as RACListBoxSection,\n Text as RACText,\n type ComboBoxProps as RACComboBoxProps,\n type ListBoxItemProps as RACListBoxItemProps,\n ComboBoxValue as RACComboBoxValue,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CheckboxIndicator } from '../internal/checkbox-indicator/checkbox-indicator.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { TagGroup, type TagGroupProps } from '../tag/tag-group.js';\nimport { Tag, type TagProps } from '../tag/tag.js';\nimport type {\n ApiProps,\n CollectionItem,\n CollectionProps,\n CommonProps,\n FieldWithPlaceholderProps,\n Key,\n StringLikeChildren,\n} from '../types.js';\nimport { textStyle } from '../typography/utils.js';\nimport { TagFieldInput } from './tag-field-input.js';\nimport { TagFieldListBox } from './tag-field-list-box.js';\n\n/** Represents the state of the `TagField` component for validation purposes. */\nexport interface TagFieldValidationValue {\n /** The selected keys in the TagField. */\n selectedKeys: Set<Key> | null;\n /** The value of the TagField input. */\n inputValue: string;\n}\n\nexport interface TagFieldProps<T extends CollectionItem = CollectionItem>\n extends\n CommonProps,\n FieldWithPlaceholderProps<TagFieldValidationValue>,\n CollectionProps<T>,\n ApiProps<TagFieldApi>,\n Pick<\n RACComboBoxProps<T>,\n | 'isRequired'\n | 'isDisabled'\n | 'isInvalid'\n | 'isReadOnly'\n | 'inputValue'\n | 'defaultInputValue'\n | 'autoFocus'\n | 'onInputChange'\n | 'onFocus'\n | 'onBlur'\n | 'onOpenChange'\n >,\n Pick<TagGroupProps<T>, 'renderEmptyState'> {\n /** The currently selected keys in the collection (controlled). */\n selectedKeys?: Iterable<Key>;\n /** The initial selected keys in the collection (uncontrolled). */\n defaultSelectedKeys?: Iterable<Key>;\n /** Handler that is called when the selection changes. */\n onSelectionChange?: (keys: Set<Key>) => void;\n /**\n * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.\n * @default false\n */\n isVirtualized?: boolean;\n /** Handler that is called when the list of items is scrolled. */\n onScroll?: UIEventHandler<HTMLDivElement>;\n}\n\n/** The imperative API exposed by the `TagField` component. */\nexport interface TagFieldApi {\n /** Focuses the input field and opens the list of items. */\n focus: () => void;\n}\n\nfunction TagField<T extends CollectionItem>(\n {\n label,\n description,\n error,\n items,\n children,\n placeholder,\n UNSAFE_className,\n UNSAFE_style,\n validate,\n isReadOnly,\n onScroll,\n selectedKeys,\n defaultSelectedKeys,\n onSelectionChange,\n id,\n renderEmptyState,\n isVirtualized = false,\n apiRef,\n ...props\n }: TagFieldProps<T>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const inputRef = useRef<HTMLInputElement>(null);\n\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, isRequired, isDisabled } = props;\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('TagField requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`TagField` requires `children` to be a function when using `items` prop');\n }\n\n const inputId = useId(id);\n\n useImperativeHandle(\n apiRef,\n () => ({\n focus: () => inputRef.current?.focus(),\n }),\n [],\n );\n\n return (\n <RACComboBox\n {...props}\n ref={ref}\n className={clsx('cim-combo-box', 'cim-tag-field', UNSAFE_className)}\n style={UNSAFE_style}\n id={inputId}\n selectionMode=\"multiple\"\n value={selectedKeys ? Array.from(selectedKeys) : undefined}\n defaultValue={defaultSelectedKeys ? Array.from(defaultSelectedKeys) : undefined}\n onChange={(keys) => onSelectionChange?.(new Set(keys))}\n menuTrigger=\"focus\"\n isReadOnly={isReadOnly}\n data-readonly={isReadOnly ? true : undefined}\n validate={\n validate\n ? ({ inputValue, value }) => {\n return validate({ inputValue, selectedKeys: new Set(value as unknown as Key[]) });\n }\n : undefined\n }\n >\n <FormFieldLabel isRequired={isRequired} isDisabled={isDisabled}>\n {label}\n </FormFieldLabel>\n\n <RACGroup className=\"cim-combo-box-input-group\">\n <TagFieldInput\n inputRef={inputRef}\n aria-describedby={props['aria-describedby']}\n isReadOnly={isReadOnly}\n placeholder={placeholder}\n />\n <RACButton className=\"cim-combo-box-button\">\n <IconChevronDown />\n </RACButton>\n </RACGroup>\n\n <FormFieldError>{error}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n\n <RACComboBoxValue>\n {({ state }) => (\n <TagGroup\n aria-labelledby={inputId}\n disabledKeys={isDisabled ? state.selectedItems.map((item) => item.key) : undefined}\n renderEmptyState={renderEmptyState}\n onRemove={\n isReadOnly\n ? undefined\n : (keys) => {\n if (Array.isArray(state.value)) {\n state.setValue(state.value.filter((k) => !keys.has(k)));\n }\n }\n }\n >\n {state.selectedItems.map((item) => (\n <Tag key={item.key} id={item.key} isDisabled={(item.props as TagProps).isDisabled}>\n {item.textValue}\n </Tag>\n ))}\n </TagGroup>\n )}\n </RACComboBoxValue>\n\n <CollapsibleList\n offset={5} // 1px border + 4px actual offset\n maxHeight={315}\n >\n <TagFieldListBox<T> items={items} onScroll={onScroll} isVirtualized={isVirtualized}>\n {children}\n </TagFieldListBox>\n </CollapsibleList>\n </RACComboBox>\n );\n}\n\n/**\n * Allows users to filter a collapsible list and select multiple items from it.\n *\n * See [tag field usage guidelines](https://ui.cimpress.io/components/tag-field).\n */\nconst _TagField = withStyleProps(forwardRef(TagField), 'TagField');\n\nexport { _TagField as TagField };\n\nexport interface TagFieldItemProps<T extends CollectionItem> extends Pick<\n RACListBoxItemProps<T>,\n 'isDisabled' | 'onHoverStart' | 'onHoverEnd'\n> {\n /** The ID of the item. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the label. */\n children: StringLikeChildren;\n}\n\n/** Renders a single list item within `TagField`. */\nexport function TagFieldItem<T extends CollectionItem>({ children, ...props }: TagFieldItemProps<T>) {\n const textValue =\n typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n return (\n <RACListBoxItem {...props} className=\"cim-tag-field-item\" textValue={textValue}>\n {({ isDisabled, isSelected }) => (\n <>\n <CheckboxIndicator isSelected={isSelected} isDisabled={isDisabled} />\n\n <RACText slot=\"label\" className={textStyle({ variant: 'body' })}>\n {children}\n </RACText>\n </>\n )}\n </RACListBoxItem>\n );\n}\n\nTagFieldItem.displayName = 'TagFieldItem';\n\nexport interface TagFieldSectionProps<T extends CollectionItem> extends CollectionProps<T> {\n /** The ID of the section. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the section title. */\n title: string;\n}\n\n/** Groups list items within `TagField` into a section. */\nexport function TagFieldSection<T extends CollectionItem>({\n title,\n children,\n items,\n ...props\n}: TagFieldSectionProps<T>) {\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`TagFieldSection` requires `children` to be a function when using `items` prop');\n }\n\n return (\n <RACListBoxSection {...props} className=\"cim-combo-box-section\">\n <RACHeader\n className={clsx('cim-combo-box-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n >\n {title}\n </RACHeader>\n <RACCollection items={items}>{children}</RACCollection>\n </RACListBoxSection>\n );\n}\n\nTagFieldSection.displayName = 'TagFieldSection';\n"]}
@@ -1,30 +1,32 @@
1
1
  import { UNSTABLE_ToastQueue as RACToastQueue } from 'react-aria-components';
2
- import type { InternalToastContent, UNSTABLE_ToastOptions } from './types.js';
2
+ import type { InternalToastContent, ToastOptions } from './types.js';
3
3
  export declare const internalToastQueue: RACToastQueue<InternalToastContent>;
4
4
  /**
5
5
  * Manages the queue of toasts.
6
+ *
7
+ * See [toast usage guidelines](https://ui.cimpress.io/components/toast/).
6
8
  */
7
- export interface UNSTABLE_ToastQueue {
9
+ export interface ToastQueue {
8
10
  /**
9
11
  * Add an info toast to the queue.
10
12
  * @returns The ID of the toast
11
13
  */
12
- info(message: string, options?: UNSTABLE_ToastOptions): string;
14
+ info(message: string, options?: ToastOptions): string;
13
15
  /**
14
16
  * Add a success toast to the queue.
15
17
  * @returns The ID of the toast
16
18
  */
17
- success(message: string, options?: UNSTABLE_ToastOptions): string;
19
+ success(message: string, options?: ToastOptions): string;
18
20
  /**
19
21
  * Add a warning toast to the queue.
20
22
  * @returns The ID of the toast
21
23
  */
22
- warning(message: string, options?: UNSTABLE_ToastOptions): string;
24
+ warning(message: string, options?: ToastOptions): string;
23
25
  /**
24
26
  * Add a critical toast to the queue.
25
27
  * @returns The ID of the toast
26
28
  */
27
- critical(message: string, options?: UNSTABLE_ToastOptions): string;
29
+ critical(message: string, options?: ToastOptions): string;
28
30
  /**
29
31
  * Close a toast.
30
32
  * @param id The ID of the toast to close
@@ -35,5 +37,5 @@ export interface UNSTABLE_ToastQueue {
35
37
  */
36
38
  clear(): void;
37
39
  }
38
- export declare const UNSTABLE_toastQueue: UNSTABLE_ToastQueue;
40
+ export declare const toastQueue: ToastQueue;
39
41
  //# sourceMappingURL=toast-queue.d.ts.map
@@ -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,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"}
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,YAAY,EAAE,MAAM,YAAY,CAAC;AAIrE,eAAO,MAAM,kBAAkB,qCAU7B,CAAC;AAgBH;;;;GAIG;AACH,MAAM,WAAW,UAAU;IACzB;;;OAGG;IACH,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IACtD;;;OAGG;IACH,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IACzD;;;OAGG;IACH,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IACzD;;;OAGG;IACH,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IAC1D;;;OAGG;IACH,KAAK,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB;;OAEG;IACH,KAAK,IAAI,IAAI,CAAC;CACf;AAED,eAAO,MAAM,UAAU,EAAE,UA2CxB,CAAC"}
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.UNSTABLE_toastQueue = exports.internalToastQueue = void 0;
3
+ exports.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
6
  const MIN_TOAST_TIMEOUT = 5000;
@@ -17,13 +17,14 @@ exports.internalToastQueue = new react_aria_components_1.UNSTABLE_ToastQueue({
17
17
  },
18
18
  });
19
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.`);
20
+ let timeout = options?.timeout ?? MIN_TOAST_TIMEOUT;
21
+ if (timeout > 0 && timeout < MIN_TOAST_TIMEOUT) {
22
+ console.warn(`[ToastQueue] The specified timeout (${timeout} ms) is less than the minimum allowed (${MIN_TOAST_TIMEOUT} ms). It will be adjusted to the minimum.`);
23
+ timeout = MIN_TOAST_TIMEOUT;
22
24
  }
23
- const timeout = Math.max(options?.timeout ?? MIN_TOAST_TIMEOUT, MIN_TOAST_TIMEOUT);
24
25
  return exports.internalToastQueue.add(content, { ...options, timeout });
25
26
  }
26
- exports.UNSTABLE_toastQueue = {
27
+ exports.toastQueue = {
27
28
  info(message, options) {
28
29
  return addToast({
29
30
  message: message,
@@ -1 +1 @@
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"]}
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,OAAsB;IACrE,IAAI,OAAO,GAAG,OAAO,EAAE,OAAO,IAAI,iBAAiB,CAAC;IAEpD,IAAI,OAAO,GAAG,CAAC,IAAI,OAAO,GAAG,iBAAiB,EAAE,CAAC;QAC/C,OAAO,CAAC,IAAI,CACV,uCAAuC,OAAO,0CAA0C,iBAAiB,2CAA2C,CACrJ,CAAC;QAEF,OAAO,GAAG,iBAAiB,CAAC;IAC9B,CAAC;IAED,OAAO,0BAAkB,CAAC,GAAG,CAAC,OAAO,EAAE,EAAE,GAAG,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC;AAClE,CAAC;AAuCY,QAAA,UAAU,GAAe;IACpC,IAAI,CAAC,OAAe,EAAE,OAAsB;QAC1C,OAAO,QAAQ,CACb;YACE,OAAO,EAAE,OAAO;YAChB,IAAI,EAAE,MAAM;SACb,EACD,OAAO,CACR,CAAC;IACJ,CAAC;IACD,OAAO,CAAC,OAAe,EAAE,OAAsB;QAC7C,OAAO,QAAQ,CACb;YACE,OAAO,EAAE,OAAO;YAChB,IAAI,EAAE,SAAS;SAChB,EACD,OAAO,CACR,CAAC;IACJ,CAAC;IACD,OAAO,CAAC,OAAe,EAAE,OAAsB;QAC7C,OAAO,QAAQ,CACb;YACE,OAAO,EAAE,OAAO;YAChB,IAAI,EAAE,SAAS;SAChB,EACD,OAAO,CACR,CAAC;IACJ,CAAC;IACD,QAAQ,CAAC,OAAe,EAAE,OAAsB;QAC9C,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, 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?: ToastOptions) {\n let timeout = options?.timeout ?? MIN_TOAST_TIMEOUT;\n\n if (timeout > 0 && timeout < MIN_TOAST_TIMEOUT) {\n console.warn(\n `[ToastQueue] The specified timeout (${timeout} ms) is less than the minimum allowed (${MIN_TOAST_TIMEOUT} ms). It will be adjusted to the minimum.`,\n );\n\n timeout = MIN_TOAST_TIMEOUT;\n }\n\n return internalToastQueue.add(content, { ...options, timeout });\n}\n\n/**\n * Manages the queue of toasts.\n *\n * See [toast usage guidelines](https://ui.cimpress.io/components/toast/).\n */\nexport interface ToastQueue {\n /**\n * Add an info toast to the queue.\n * @returns The ID of the toast\n */\n info(message: string, options?: ToastOptions): string;\n /**\n * Add a success toast to the queue.\n * @returns The ID of the toast\n */\n success(message: string, options?: ToastOptions): string;\n /**\n * Add a warning toast to the queue.\n * @returns The ID of the toast\n */\n warning(message: string, options?: ToastOptions): string;\n /**\n * Add a critical toast to the queue.\n * @returns The ID of the toast\n */\n critical(message: string, options?: 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 toastQueue: ToastQueue = {\n info(message: string, options?: ToastOptions) {\n return addToast(\n {\n message: message,\n tone: 'info',\n },\n options,\n );\n },\n success(message: string, options?: ToastOptions) {\n return addToast(\n {\n message: message,\n tone: 'success',\n },\n options,\n );\n },\n warning(message: string, options?: ToastOptions) {\n return addToast(\n {\n message: message,\n tone: 'warning',\n },\n options,\n );\n },\n critical(message: string, options?: 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"]}
@@ -3,5 +3,5 @@
3
3
  *
4
4
  * See [toast usage guidelines](https://ui.cimpress.io/components/toast/).
5
5
  */
6
- export declare function UNSTABLE_ToastRegion(): import("react/jsx-runtime").JSX.Element;
6
+ export declare function ToastRegion(): import("react/jsx-runtime").JSX.Element;
7
7
  //# sourceMappingURL=toast-region.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"toast-region.d.ts","sourceRoot":"","sources":["../../../../src/components/toast/toast-region.tsx"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,wBAAgB,oBAAoB,4CAMnC"}
1
+ {"version":3,"file":"toast-region.d.ts","sourceRoot":"","sources":["../../../../src/components/toast/toast-region.tsx"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,wBAAgB,WAAW,4CAM1B"}
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.UNSTABLE_ToastRegion = UNSTABLE_ToastRegion;
3
+ exports.ToastRegion = ToastRegion;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const react_aria_components_1 = require("react-aria-components");
6
6
  const toast_queue_js_1 = require("./toast-queue.js");
@@ -10,7 +10,7 @@ const toast_js_1 = require("./toast.js");
10
10
  *
11
11
  * See [toast usage guidelines](https://ui.cimpress.io/components/toast/).
12
12
  */
13
- function UNSTABLE_ToastRegion() {
14
- return ((0, jsx_runtime_1.jsx)(react_aria_components_1.UNSTABLE_ToastRegion, { queue: toast_queue_js_1.internalToastQueue, className: "cim-toast-region", "data-cim-style-root": true, children: ({ toast }) => (0, jsx_runtime_1.jsx)(toast_js_1.UNSTABLE_Toast, { toast: toast }) }));
13
+ function ToastRegion() {
14
+ return ((0, jsx_runtime_1.jsx)(react_aria_components_1.UNSTABLE_ToastRegion, { queue: toast_queue_js_1.internalToastQueue, className: "cim-toast-region", "data-cim-style-root": true, children: ({ toast }) => (0, jsx_runtime_1.jsx)(toast_js_1.Toast, { toast: toast }) }));
15
15
  }
16
16
  //# sourceMappingURL=toast-region.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"toast-region.js","sourceRoot":"","sources":["../../../../src/components/toast/toast-region.tsx"],"names":[],"mappings":";;AASA,oDAMC;;AAfD,iEAA+E;AAC/E,qDAAsD;AACtD,yCAA4C;AAE5C;;;;GAIG;AACH,SAAgB,oBAAoB;IAClC,OAAO,CACL,uBAAC,4CAAc,IAAC,KAAK,EAAE,mCAAkB,EAAE,SAAS,EAAC,kBAAkB,yCACpE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,uBAAC,yBAAc,IAAC,KAAK,EAAE,KAAK,GAAI,GACjC,CAClB,CAAC;AACJ,CAAC","sourcesContent":["import { UNSTABLE_ToastRegion as RACToastRegion } from 'react-aria-components';\nimport { internalToastQueue } from './toast-queue.js';\nimport { UNSTABLE_Toast } from './toast.js';\n\n/**\n * Displays toast notifications. Toast notifications are non-intrusive messages that appear briefly at the top of the page, overlaying content.\n *\n * See [toast usage guidelines](https://ui.cimpress.io/components/toast/).\n */\nexport function UNSTABLE_ToastRegion() {\n return (\n <RACToastRegion queue={internalToastQueue} className=\"cim-toast-region\" data-cim-style-root>\n {({ toast }) => <UNSTABLE_Toast toast={toast} />}\n </RACToastRegion>\n );\n}\n"]}
1
+ {"version":3,"file":"toast-region.js","sourceRoot":"","sources":["../../../../src/components/toast/toast-region.tsx"],"names":[],"mappings":";;AASA,kCAMC;;AAfD,iEAA+E;AAC/E,qDAAsD;AACtD,yCAAmC;AAEnC;;;;GAIG;AACH,SAAgB,WAAW;IACzB,OAAO,CACL,uBAAC,4CAAc,IAAC,KAAK,EAAE,mCAAkB,EAAE,SAAS,EAAC,kBAAkB,yCACpE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,uBAAC,gBAAK,IAAC,KAAK,EAAE,KAAK,GAAI,GACxB,CAClB,CAAC;AACJ,CAAC","sourcesContent":["import { UNSTABLE_ToastRegion as RACToastRegion } from 'react-aria-components';\nimport { internalToastQueue } from './toast-queue.js';\nimport { Toast } from './toast.js';\n\n/**\n * Displays toast notifications. Toast notifications are non-intrusive messages that appear briefly at the top of the page, overlaying content.\n *\n * See [toast usage guidelines](https://ui.cimpress.io/components/toast/).\n */\nexport function ToastRegion() {\n return (\n <RACToastRegion queue={internalToastQueue} className=\"cim-toast-region\" data-cim-style-root>\n {({ toast }) => <Toast toast={toast} />}\n </RACToastRegion>\n );\n}\n"]}
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.UNSTABLE_Toast = UNSTABLE_Toast;
3
+ exports.Toast = Toast;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const react_aria_components_1 = require("react-aria-components");
6
6
  const index_js_1 = require("../../i18n/index.js");
@@ -16,9 +16,9 @@ const iconMap = {
16
16
  /**
17
17
  * @internal
18
18
  */
19
- function UNSTABLE_Toast({ toast }) {
19
+ function Toast({ toast }) {
20
20
  const Icon = iconMap[toast.content.tone];
21
21
  const messages = (0, index_js_1.useLocalizedMessages)('common');
22
- return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.UNSTABLE_Toast, { toast: toast, className: "cim-toast", style: { viewTransitionName: toast.key }, "data-cim-style-root": true, children: [(0, jsx_runtime_1.jsx)("div", { className: "cim-toast-icon", children: (0, jsx_runtime_1.jsx)(Icon, { size: 24, tone: toast.content.tone, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)(react_aria_components_1.UNSTABLE_ToastContent, { className: "cim-toast-content", children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { className: (0, utils_js_1.textStyle)({ variant: 'medium' }), children: toast.content.message }) }), (0, jsx_runtime_1.jsx)(x_button_js_1.XButton, { slot: "close", UNSAFE_className: "cim-toast-close", "aria-label": messages.format('dismiss') })] }));
22
+ return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.UNSTABLE_Toast, { toast: toast, className: "cim-toast", style: { viewTransitionName: toast.key }, "data-cim-style-root": true, children: [(0, jsx_runtime_1.jsx)("div", { className: "cim-toast-icon", children: (0, jsx_runtime_1.jsx)(Icon, { size: 24, tone: toast.content.tone, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)(react_aria_components_1.UNSTABLE_ToastContent, { className: "cim-toast-content", children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { slot: "title", className: (0, utils_js_1.textStyle)({ variant: 'medium' }), children: toast.content.message }) }), (0, jsx_runtime_1.jsx)(x_button_js_1.XButton, { slot: "close", UNSAFE_className: "cim-toast-close", "aria-label": messages.format('dismiss') })] }));
23
23
  }
24
24
  //# sourceMappingURL=toast.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"toast.js","sourceRoot":"","sources":["../../../../src/components/toast/toast.tsx"],"names":[],"mappings":";;AA6BA,wCAeC;;AA5CD,iEAK+B;AAC/B,kDAA2D;AAC3D,mDAA2G;AAC3G,kEAA2D;AAC3D,qDAAmD;AAGnD,MAAM,OAAO,GAAG;IACd,IAAI,EAAE,yBAAc;IACpB,OAAO,EAAE,0BAAe;IACxB,OAAO,EAAE,sBAAW;IACpB,QAAQ,EAAE,gCAAqB;CAChC,CAAC;AASF;;GAEG;AACH,SAAgB,cAAc,CAAC,EAAE,KAAK,EAAuB;IAC3D,MAAM,IAAI,GAAG,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACzC,MAAM,QAAQ,GAAG,IAAA,+BAAoB,EAAC,QAAQ,CAAC,CAAC;IAEhD,OAAO,CACL,wBAAC,sCAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,kBAAkB,EAAE,KAAK,CAAC,GAAG,EAAE,0CACpF,gCAAK,SAAS,EAAC,gBAAgB,YAC7B,uBAAC,IAAI,IAAC,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,wBAAgB,GACpD,EACN,uBAAC,6CAAe,IAAC,SAAS,EAAC,mBAAmB,YAC5C,uBAAC,4BAAO,IAAC,SAAS,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,YAAG,KAAK,CAAC,OAAO,CAAC,OAAO,GAAW,GACvE,EAClB,uBAAC,qBAAO,IAAC,IAAI,EAAC,OAAO,EAAC,gBAAgB,EAAC,iBAAiB,gBAAa,QAAQ,CAAC,MAAM,CAAC,SAAS,CAAC,GAAI,IAC1F,CACZ,CAAC;AACJ,CAAC","sourcesContent":["import {\n type QueuedToast as RACQueuedToast,\n Text as RACText,\n UNSTABLE_Toast as RACToast,\n UNSTABLE_ToastContent as RACToastContent,\n} from 'react-aria-components';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { IconCheckCircle, IconInfoCircle, IconWarning, IconWarningCircleFill } from '../../icons/index.js';\nimport { XButton } from '../internal/x-button/x-button.js';\nimport { textStyle } from '../typography/utils.js';\nimport type { InternalToastContent } from './types.js';\n\nconst iconMap = {\n info: IconInfoCircle,\n success: IconCheckCircle,\n warning: IconWarning,\n critical: IconWarningCircleFill,\n};\n\n/**\n * @internal\n */\ninterface UNSTABLE_ToastProps {\n toast: RACQueuedToast<InternalToastContent>;\n}\n\n/**\n * @internal\n */\nexport function UNSTABLE_Toast({ toast }: UNSTABLE_ToastProps) {\n const Icon = iconMap[toast.content.tone];\n const messages = useLocalizedMessages('common');\n\n return (\n <RACToast toast={toast} className=\"cim-toast\" style={{ viewTransitionName: toast.key }} data-cim-style-root>\n <div className=\"cim-toast-icon\">\n <Icon size={24} tone={toast.content.tone} aria-hidden />\n </div>\n <RACToastContent className=\"cim-toast-content\">\n <RACText className={textStyle({ variant: 'medium' })}>{toast.content.message}</RACText>\n </RACToastContent>\n <XButton slot=\"close\" UNSAFE_className=\"cim-toast-close\" aria-label={messages.format('dismiss')} />\n </RACToast>\n );\n}\n"]}
1
+ {"version":3,"file":"toast.js","sourceRoot":"","sources":["../../../../src/components/toast/toast.tsx"],"names":[],"mappings":";;AA6BA,sBAiBC;;AA9CD,iEAK+B;AAC/B,kDAA2D;AAC3D,mDAA2G;AAC3G,kEAA2D;AAC3D,qDAAmD;AAGnD,MAAM,OAAO,GAAG;IACd,IAAI,EAAE,yBAAc;IACpB,OAAO,EAAE,0BAAe;IACxB,OAAO,EAAE,sBAAW;IACpB,QAAQ,EAAE,gCAAqB;CAChC,CAAC;AASF;;GAEG;AACH,SAAgB,KAAK,CAAC,EAAE,KAAK,EAAc;IACzC,MAAM,IAAI,GAAG,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACzC,MAAM,QAAQ,GAAG,IAAA,+BAAoB,EAAC,QAAQ,CAAC,CAAC;IAEhD,OAAO,CACL,wBAAC,sCAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,kBAAkB,EAAE,KAAK,CAAC,GAAG,EAAE,0CACpF,gCAAK,SAAS,EAAC,gBAAgB,YAC7B,uBAAC,IAAI,IAAC,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,wBAAgB,GACpD,EACN,uBAAC,6CAAe,IAAC,SAAS,EAAC,mBAAmB,YAC5C,uBAAC,4BAAO,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,YAC9D,KAAK,CAAC,OAAO,CAAC,OAAO,GACd,GACM,EAClB,uBAAC,qBAAO,IAAC,IAAI,EAAC,OAAO,EAAC,gBAAgB,EAAC,iBAAiB,gBAAa,QAAQ,CAAC,MAAM,CAAC,SAAS,CAAC,GAAI,IAC1F,CACZ,CAAC;AACJ,CAAC","sourcesContent":["import {\n type QueuedToast as RACQueuedToast,\n Text as RACText,\n UNSTABLE_Toast as RACToast,\n UNSTABLE_ToastContent as RACToastContent,\n} from 'react-aria-components';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { IconCheckCircle, IconInfoCircle, IconWarning, IconWarningCircleFill } from '../../icons/index.js';\nimport { XButton } from '../internal/x-button/x-button.js';\nimport { textStyle } from '../typography/utils.js';\nimport type { InternalToastContent } from './types.js';\n\nconst iconMap = {\n info: IconInfoCircle,\n success: IconCheckCircle,\n warning: IconWarning,\n critical: IconWarningCircleFill,\n};\n\n/**\n * @internal\n */\ninterface ToastProps {\n toast: RACQueuedToast<InternalToastContent>;\n}\n\n/**\n * @internal\n */\nexport function Toast({ toast }: ToastProps) {\n const Icon = iconMap[toast.content.tone];\n const messages = useLocalizedMessages('common');\n\n return (\n <RACToast toast={toast} className=\"cim-toast\" style={{ viewTransitionName: toast.key }} data-cim-style-root>\n <div className=\"cim-toast-icon\">\n <Icon size={24} tone={toast.content.tone} aria-hidden />\n </div>\n <RACToastContent className=\"cim-toast-content\">\n <RACText slot=\"title\" className={textStyle({ variant: 'medium' })}>\n {toast.content.message}\n </RACText>\n </RACToastContent>\n <XButton slot=\"close\" UNSAFE_className=\"cim-toast-close\" aria-label={messages.format('dismiss')} />\n </RACToast>\n );\n}\n"]}
@@ -2,7 +2,7 @@ export interface InternalToastContent {
2
2
  message: string;
3
3
  tone: 'info' | 'success' | 'warning' | 'critical';
4
4
  }
5
- export interface UNSTABLE_ToastOptions {
5
+ export interface 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.
@@ -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;;;;;OAKG;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,YAAY;IAC3B;;;;;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 * The minimum timeout is 5000 milliseconds.\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 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"]}