npm - @cimpress-ui/react - Versions diffs - 1.0.2 → 1.2.0 - Mend

@cimpress-ui/react 1.0.2 → 1.2.0

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 (275) hide show

package/dist/commonjs/components/checkbox/checkbox-group.d.ts CHANGED Viewed

@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react';
 import { type CheckboxGroupProps as RACCheckboxGroupProps } from 'react-aria-components';
 import type { Responsive } from '../spacing/types.js';
-import type { Direction, CommonProps, FieldProps, WithRequired } from '../types.js';
-export interface CheckboxGroupProps extends CommonProps, WithRequired<FieldProps<string[]>, 'label'>, Pick<RACCheckboxGroupProps, 'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid' | 'value' | 'onChange' | 'defaultValue'> {
+import type { Direction, CommonProps, FieldProps } from '../types.js';
+export interface CheckboxGroupProps extends CommonProps, FieldProps<string[]>, Pick<RACCheckboxGroupProps, 'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid' | 'value' | 'onChange' | 'defaultValue'> {
     /** Checkboxes belonging to the group. Each checkbox must have a `value` prop defined. */
     children: ReactNode;
     /**

package/dist/commonjs/components/checkbox/checkbox-group.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox-group.d.ts","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox-group.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAEL,KAAK,kBAAkB,IAAI,qBAAqB,EACjD,MAAM,uBAAuB,CAAC;~~AAK~~/B,OAAO,KAAK,EAAc,UAAU,EAAW,MAAM,qBAAqB,CAAC;AAC3E,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,~~YAAY,EAAE,~~MAAM,aAAa,CAAC;~~AAEpF~~,MAAM,WAAW,kBACf,SAAQ,WAAW,EACjB,~~YAAY,CAAC,~~UAAU,CAAC,MAAM,EAAE,CAAC,~~EAAE~~,~~OAAO,CAAC,EAC3C,~~IAAI,CACF,qBAAqB,EACrB,YAAY,GAAG,YAAY,GAAG,YAAY,GAAG,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,cAAc,CACjG;IACH,yFAAyF;IACzF,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;CACnC;~~AAgCD~~;;;;GAIG;AACH,QAAA,MAAM,cAAc,oKAA6D,CAAC;AAElF,OAAO,EAAE,cAAc,IAAI,aAAa,EAAE,CAAC"}
1	+ {"version":3,"file":"checkbox-group.d.ts","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox-group.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAEL,KAAK,kBAAkB,IAAI,qBAAqB,EACjD,MAAM,uBAAuB,CAAC;AAM/B,OAAO,KAAK,EAAc,UAAU,EAAW,MAAM,qBAAqB,CAAC;AAC3E,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEtE,MAAM,WAAW,kBACf,SAAQ,WAAW,EACjB,UAAU,CAAC,MAAM,EAAE,CAAC,EACpB,IAAI,CACF,qBAAqB,EACrB,YAAY,GAAG,YAAY,GAAG,YAAY,GAAG,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,cAAc,CACjG;IACH,yFAAyF;IACzF,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;CACnC;AA0CD;;;;GAIG;AACH,QAAA,MAAM,cAAc,oKAA6D,CAAC;AAElF,OAAO,EAAE,cAAc,IAAI,aAAa,EAAE,CAAC"}

package/dist/commonjs/components/checkbox/checkbox-group.js CHANGED Viewed

@@ -9,11 +9,18 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = __importDefault(require("clsx"));
 const react_aria_components_1 = require("react-aria-components");
 const forward_ref_js_1 = require("../../forward-ref.js");
+const use_production_warning_js_1 = require("../../utils/use-production-warning.js");
 const with_style_props_js_1 = require("../../with-style-props.js");
 const form_field_js_1 = require("../internal/form-field/form-field.js");
 const stack_js_1 = require("../spacing/stack/stack.js");
 function CheckboxGroup({ label, description, error: errorMessage, direction = 'vertical', children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.CheckboxGroup, { ...props, ref: ref, className: (0, clsx_1.default)('cim-checkbox-group', UNSAFE_className), style: UNSAFE_style, children: [(0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldLabel, { isRequired: props.isRequired, children: label }), (0, jsx_runtime_1.jsx)(stack_js_1.Stack, { gap: getGapFromDirection(direction), direction: direction, wrap: true, children: children }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: errorMessage }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description })] }));
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+    (0, use_production_warning_js_1.useProductionWarning)(() => {
+        if (!label && !ariaLabel && !ariaLabelledBy) {
+            console.warn('CheckboxGroup requires one of label / aria-label / aria-labelledby for accessibility');
+        }
+    }, [label, ariaLabel, ariaLabelledBy]);
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.CheckboxGroup, { ...props, ref: ref, className: (0, clsx_1.default)('cim-checkbox-group', UNSAFE_className), style: UNSAFE_style, children: [(0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), (0, jsx_runtime_1.jsx)(stack_js_1.Stack, { gap: getGapFromDirection(direction), direction: direction, wrap: true, children: children }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: errorMessage }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description })] }));
 }
 /**
  * Allows users to select one or more items from a visible list.

package/dist/commonjs/components/checkbox/checkbox-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox-group.js","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox-group.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAGxB,iEAG+B;AAC/B,yDAAkD;AAClD,mEAA2D;AAC3D,wEAA4G;AAC5G,wDAAkD;AAoBlD,SAAS,aAAa,CACpB,EACE,KAAK,EACL,WAAW,EACX,KAAK,EAAE,YAAY,EACnB,SAAS,GAAG,UAAU,EACtB,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACW,EACrB,GAAiC;IAEjC,OAAO,CACL,wBAAC,qCAAgB,OACX,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,oBAAoB,EAAE,gBAAgB,CAAC,EACvD,KAAK,EAAE,YAAY,aAEnB,uBAAC,8BAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,~~YAAG~~,KAAK,~~GAAkB~~,~~EACtE~~,uBAAC,gBAAK,IAAC,GAAG,EAAE,mBAAmB,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,kBACnE,QAAQ,GACH,EACR,uBAAC,8BAAc,cAAE,YAAY,GAAkB,EAC/C,uBAAC,oCAAoB,cAAE,WAAW,GAAwB,IACzC,CACpB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,cAAc,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,aAAa,CAAC,EAAE,eAAe,CAAC,CAAC;AAEvD,uCAAa;AAExC,6FAA6F;AAC7F,SAAS,mBAAmB,CAAC,SAAgC;IAC3D,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE,CAAC;QAClC,MAAM,GAAG,GAAwB,EAAE,EAAE,EAAE,SAAS,CAAC,EAAE,KAAK,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAE/E,MAAM,CAAC,OAAO,CAAC,SAAS,CAA+B,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;YAC5E,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;YACjD,OAAO,GAAG,CAAC;QACb,CAAC,EAAE,GAAG,CAAC,CAAC;QAER,OAAO,GAAG,CAAC;IACb,CAAC;IAED,OAAO,SAAS,KAAK,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AAC7C,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ReactNode } from 'react';\nimport type { ForwardedRef } from 'react';\nimport {\n CheckboxGroup as RACCheckboxGroup,\n type CheckboxGroupProps as RACCheckboxGroupProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { Stack } from '../spacing/stack/stack.js';\nimport type { Breakpoint, Responsive, Spacing } from '../spacing/types.js';\nimport type { Direction, CommonProps, FieldProps, ~~WithRequired~~ } from '../types.js';\n\nexport interface CheckboxGroupProps\n extends CommonProps,\n ~~WithRequired<~~FieldProps<string[]~~>, 'label'~~>,\n Pick<\n RACCheckboxGroupProps,\n 'isDisabled' \| 'isReadOnly' \| 'isRequired' \| 'isInvalid' \| 'value' \| 'onChange' \| 'defaultValue'\n > {\n /** Checkboxes belonging to the group. Each checkbox must have a `value` prop defined. /\n children: ReactNode;\n /\n Determines the direction in which checkboxes will be stacked.\n * @default 'vertical'\n /\n direction?: Responsive<Direction>;\n}\n\nfunction CheckboxGroup(\n {\n label,\n description,\n error: errorMessage,\n direction = 'vertical',\n children,\n UNSAFE_className,\n UNSAFE_style,\n ...props\n }: CheckboxGroupProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n return (\n <RACCheckboxGroup\n {...props}\n ref={ref}\n className={clsx('cim-checkbox-group', UNSAFE_className)}\n style={UNSAFE_style}\n >\n <FormFieldLabel isRequired={props.isRequired}>{label}</FormFieldLabel>\n <Stack gap={getGapFromDirection(direction)} direction={direction} wrap>\n {children}\n </Stack>\n <FormFieldError>{errorMessage}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n </RACCheckboxGroup>\n );\n}\n\n/\n Allows users to select one or more items from a visible list.\n \n See [checkbox usage guidelines](https://ui.cimpress.io/components/checkbox/).\n */\nconst _CheckboxGroup = withStyleProps(forwardRef(CheckboxGroup), 'CheckboxGroup');\n\nexport { _CheckboxGroup as CheckboxGroup };\n\n// Make sure that checkboxes are spaced by 16px when stacked horizontally, and 8px otherwise.\nfunction getGapFromDirection(direction: Responsive<Direction>): Responsive<Spacing> {\n if (typeof direction === 'object') {\n const gap: Responsive<Spacing> = { sm: direction.sm === 'horizontal' ? 16 : 8 };\n\n (Object.entries(direction) as [Breakpoint, Direction][]).reduce((acc, curr) => {\n gap[curr[0]] = curr[1] === 'horizontal' ? 16 : 8;\n return acc;\n }, gap);\n\n return gap;\n }\n\n return direction === 'horizontal' ? 16 : 8;\n}\n"]}
1	+ {"version":3,"file":"checkbox-group.js","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox-group.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAGxB,iEAG+B;AAC/B,yDAAkD;AAClD,qFAA6E;AAC7E,mEAA2D;AAC3D,wEAA4G;AAC5G,wDAAkD;AAoBlD,SAAS,aAAa,CACpB,EACE,KAAK,EACL,WAAW,EACX,KAAK,EAAE,YAAY,EACnB,SAAS,GAAG,UAAU,EACtB,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACW,EACrB,GAAiC;IAEjC,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,sFAAsF,CAAC,CAAC;QACvG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,OAAO,CACL,wBAAC,qCAAgB,OACX,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,oBAAoB,EAAE,gBAAgB,CAAC,EACvD,KAAK,EAAE,YAAY,aAEnB,uBAAC,8BAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,YACvE,KAAK,GACS,EACjB,uBAAC,gBAAK,IAAC,GAAG,EAAE,mBAAmB,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,kBACnE,QAAQ,GACH,EACR,uBAAC,8BAAc,cAAE,YAAY,GAAkB,EAC/C,uBAAC,oCAAoB,cAAE,WAAW,GAAwB,IACzC,CACpB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,cAAc,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,aAAa,CAAC,EAAE,eAAe,CAAC,CAAC;AAEvD,uCAAa;AAExC,6FAA6F;AAC7F,SAAS,mBAAmB,CAAC,SAAgC;IAC3D,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE,CAAC;QAClC,MAAM,GAAG,GAAwB,EAAE,EAAE,EAAE,SAAS,CAAC,EAAE,KAAK,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAE/E,MAAM,CAAC,OAAO,CAAC,SAAS,CAA+B,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;YAC5E,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;YACjD,OAAO,GAAG,CAAC;QACb,CAAC,EAAE,GAAG,CAAC,CAAC;QAER,OAAO,GAAG,CAAC;IACb,CAAC;IAED,OAAO,SAAS,KAAK,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AAC7C,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ReactNode } from 'react';\nimport type { ForwardedRef } from 'react';\nimport {\n CheckboxGroup as RACCheckboxGroup,\n type CheckboxGroupProps as RACCheckboxGroupProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { Stack } from '../spacing/stack/stack.js';\nimport type { Breakpoint, Responsive, Spacing } from '../spacing/types.js';\nimport type { Direction, CommonProps, FieldProps } from '../types.js';\n\nexport interface CheckboxGroupProps\n extends CommonProps,\n FieldProps<string[]>,\n Pick<\n RACCheckboxGroupProps,\n 'isDisabled' \| 'isReadOnly' \| 'isRequired' \| 'isInvalid' \| 'value' \| 'onChange' \| 'defaultValue'\n > {\n /** Checkboxes belonging to the group. Each checkbox must have a `value` prop defined. /\n children: ReactNode;\n /\n Determines the direction in which checkboxes will be stacked.\n * @default 'vertical'\n /\n direction?: Responsive<Direction>;\n}\n\nfunction CheckboxGroup(\n {\n label,\n description,\n error: errorMessage,\n direction = 'vertical',\n children,\n UNSAFE_className,\n UNSAFE_style,\n ...props\n }: CheckboxGroupProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('CheckboxGroup requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n return (\n <RACCheckboxGroup\n {...props}\n ref={ref}\n className={clsx('cim-checkbox-group', UNSAFE_className)}\n style={UNSAFE_style}\n >\n <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n {label}\n </FormFieldLabel>\n <Stack gap={getGapFromDirection(direction)} direction={direction} wrap>\n {children}\n </Stack>\n <FormFieldError>{errorMessage}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n </RACCheckboxGroup>\n );\n}\n\n/\n Allows users to select one or more items from a visible list.\n \n See [checkbox usage guidelines](https://ui.cimpress.io/components/checkbox/).\n */\nconst _CheckboxGroup = withStyleProps(forwardRef(CheckboxGroup), 'CheckboxGroup');\n\nexport { _CheckboxGroup as CheckboxGroup };\n\n// Make sure that checkboxes are spaced by 16px when stacked horizontally, and 8px otherwise.\nfunction getGapFromDirection(direction: Responsive<Direction>): Responsive<Spacing> {\n if (typeof direction === 'object') {\n const gap: Responsive<Spacing> = { sm: direction.sm === 'horizontal' ? 16 : 8 };\n\n (Object.entries(direction) as [Breakpoint, Direction][]).reduce((acc, curr) => {\n gap[curr[0]] = curr[1] === 'horizontal' ? 16 : 8;\n return acc;\n }, gap);\n\n return gap;\n }\n\n return direction === 'horizontal' ? 16 : 8;\n}\n"]}

package/dist/commonjs/components/checkbox/checkbox.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { type CheckboxProps as RACCheckboxProps } from 'react-aria-components';
 import type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';
-export interface CheckboxProps extends CommonProps, AriaLabelingProps, Pick<RACCheckboxProps, 'onChange' | 'isSelected' | 'isIndeterminate' | 'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid' | 'name' | 'value' | 'defaultSelected' | 'autoFocus'> {
+export interface CheckboxProps extends CommonProps, AriaLabelingProps, Pick<RACCheckboxProps, 'onChange' | 'isSelected' | 'isIndeterminate' | 'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid' | 'form' | 'name' | 'value' | 'defaultSelected' | 'autoFocus'> {
     /** The label rendered next to the checkbox. */
     children?: StringLikeChildren;
 }

package/dist/commonjs/components/checkbox/checkbox.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA2B,KAAK,aAAa,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAKxG,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGtF,MAAM,WAAW,aACf,SAAQ,WAAW,EACjB,iBAAiB,EACjB,IAAI,CACF,gBAAgB,EACd,UAAU,GACV,YAAY,GACZ,iBAAiB,GACjB,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,MAAM,GACN,OAAO,GACP,iBAAiB,GACjB,WAAW,CACd;IACH,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,kBAAkB,CAAC;CAC/B;AAgCD;;;;GAIG;AACH,QAAA,MAAM,SAAS,iKAAmD,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC"}
1	+ {"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA2B,KAAK,aAAa,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAKxG,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGtF,MAAM,WAAW,aACf,SAAQ,WAAW,EACjB,iBAAiB,EACjB,IAAI,CACF,gBAAgB,EACd,UAAU,GACV,YAAY,GACZ,iBAAiB,GACjB,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,MAAM,GACN,MAAM,GACN,OAAO,GACP,iBAAiB,GACjB,WAAW,CACd;IACH,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,kBAAkB,CAAC;CAC/B;AAgCD;;;;GAIG;AACH,QAAA,MAAM,SAAS,iKAAmD,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC"}

package/dist/commonjs/components/checkbox/checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAAwG;AACxG,yDAAkD;AAClD,mDAAuE;AACvE,qFAA6E;AAC7E,mEAA2D;AAE3D,mDAA6C;~~AAuB7C~~,SAAS,QAAQ,CACf,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAiB,EACrE,GAAmC;IAEnC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,IAAA,gDAAoB,EAAC,GAAG,EAAE;QACxB,IAAI,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC/C,OAAO,CAAC,IAAI,CAAC,oFAAoF,CAAC,CAAC;QACrG,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,uBAAC,gCAAW,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,cAAc,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,YACrG,CAAC,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,CACxB,6DACE,gCAAK,SAAS,EAAC,6BAA6B,YAC1C,gCAAK,SAAS,EAAC,qBAAqB,YAAE,eAAe,CAAC,CAAC,CAAC,uBAAC,2BAAgB,KAAG,CAAC,CAAC,CAAC,uBAAC,wBAAa,KAAG,GAAO,GACnG,EACL,QAAQ,IAAI,CACX,uBAAC,cAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,YAC7B,QAAQ,GACJ,CACR,IACA,CACJ,GACW,CACf,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,SAAS,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC;AAE7C,6BAAQ","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Checkbox as RACCheckbox, type CheckboxProps as RACCheckboxProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheckBold, IconSubtractBold } from '../../icons/index.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface CheckboxProps\n extends CommonProps,\n AriaLabelingProps,\n Pick<\n RACCheckboxProps,\n \| 'onChange'\n \| 'isSelected'\n \| 'isIndeterminate'\n \| 'isDisabled'\n \| 'isReadOnly'\n \| 'isRequired'\n \| 'isInvalid'\n \| 'name'\n \| 'value'\n \| 'defaultSelected'\n \| 'autoFocus'\n > {\n /** The label rendered next to the checkbox. /\n children?: StringLikeChildren;\n}\n\nfunction Checkbox(\n { children, UNSAFE_className, UNSAFE_style, ...props }: CheckboxProps,\n ref: ForwardedRef<HTMLLabelElement>,\n) {\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!children && !ariaLabel && !ariaLabelledBy) {\n console.warn('Checkbox requires one of children / aria-label / aria-labelledby for accessibility');\n }\n }, [children, ariaLabel, ariaLabelledBy]);\n\n return (\n <RACCheckbox {...props} ref={ref} className={clsx('cim-checkbox', UNSAFE_className)} style={UNSAFE_style}>\n {({ isIndeterminate }) => (\n <>\n <div className=\"cim-checkbox-toggle-wrapper\">\n <div className=\"cim-checkbox-toggle\">{isIndeterminate ? <IconSubtractBold /> : <IconCheckBold />}</div>\n </div>\n {children && (\n <Text as=\"span\" variant=\"medium\">\n {children}\n </Text>\n )}\n </>\n )}\n </RACCheckbox>\n );\n}\n\n/\n Allows users to mark an item as selected. Can be used standalone, or as part of `CheckboxGroup`.\n \n See [checkbox usage guidelines](https://ui.cimpress.io/components/checkbox/).\n */\nconst _Checkbox = withStyleProps(forwardRef(Checkbox), 'Checkbox');\n\nexport { _Checkbox as Checkbox };\n"]}
1	+ {"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAAwG;AACxG,yDAAkD;AAClD,mDAAuE;AACvE,qFAA6E;AAC7E,mEAA2D;AAE3D,mDAA6C;AAwB7C,SAAS,QAAQ,CACf,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAiB,EACrE,GAAmC;IAEnC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,IAAA,gDAAoB,EAAC,GAAG,EAAE;QACxB,IAAI,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC/C,OAAO,CAAC,IAAI,CAAC,oFAAoF,CAAC,CAAC;QACrG,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,uBAAC,gCAAW,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,cAAc,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,YACrG,CAAC,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,CACxB,6DACE,gCAAK,SAAS,EAAC,6BAA6B,YAC1C,gCAAK,SAAS,EAAC,qBAAqB,YAAE,eAAe,CAAC,CAAC,CAAC,uBAAC,2BAAgB,KAAG,CAAC,CAAC,CAAC,uBAAC,wBAAa,KAAG,GAAO,GACnG,EACL,QAAQ,IAAI,CACX,uBAAC,cAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,YAC7B,QAAQ,GACJ,CACR,IACA,CACJ,GACW,CACf,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,SAAS,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC;AAE7C,6BAAQ","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Checkbox as RACCheckbox, type CheckboxProps as RACCheckboxProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheckBold, IconSubtractBold } from '../../icons/index.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface CheckboxProps\n extends CommonProps,\n AriaLabelingProps,\n Pick<\n RACCheckboxProps,\n \| 'onChange'\n \| 'isSelected'\n \| 'isIndeterminate'\n \| 'isDisabled'\n \| 'isReadOnly'\n \| 'isRequired'\n \| 'isInvalid'\n \| 'form'\n \| 'name'\n \| 'value'\n \| 'defaultSelected'\n \| 'autoFocus'\n > {\n /** The label rendered next to the checkbox. /\n children?: StringLikeChildren;\n}\n\nfunction Checkbox(\n { children, UNSAFE_className, UNSAFE_style, ...props }: CheckboxProps,\n ref: ForwardedRef<HTMLLabelElement>,\n) {\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!children && !ariaLabel && !ariaLabelledBy) {\n console.warn('Checkbox requires one of children / aria-label / aria-labelledby for accessibility');\n }\n }, [children, ariaLabel, ariaLabelledBy]);\n\n return (\n <RACCheckbox {...props} ref={ref} className={clsx('cim-checkbox', UNSAFE_className)} style={UNSAFE_style}>\n {({ isIndeterminate }) => (\n <>\n <div className=\"cim-checkbox-toggle-wrapper\">\n <div className=\"cim-checkbox-toggle\">{isIndeterminate ? <IconSubtractBold /> : <IconCheckBold />}</div>\n </div>\n {children && (\n <Text as=\"span\" variant=\"medium\">\n {children}\n </Text>\n )}\n </>\n )}\n </RACCheckbox>\n );\n}\n\n/\n Allows users to mark an item as selected. Can be used standalone, or as part of `CheckboxGroup`.\n \n See [checkbox usage guidelines](https://ui.cimpress.io/components/checkbox/).\n */\nconst _Checkbox = withStyleProps(forwardRef(Checkbox), 'Checkbox');\n\nexport { _Checkbox as Checkbox };\n"]}

package/dist/commonjs/components/combo-box/combo-box.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { type ListBoxProps as RACListBoxProps, type ComboBoxProps as RACComboBoxProps, type ListBoxItemProps as RACListBoxItemProps } from 'react-aria-components';
-import type { CollectionItem, CollectionProps, CommonProps, FieldWithPlaceholderProps, Key, StringLikeChildren } from '../types.js';
+import type { AsyncItemLoadingProps, CollectionItem, CollectionProps, CommonProps, FieldWithPlaceholderProps, Key, StringLikeChildren } from '../types.js';
 /** Represents the state of the `ComboBox` component for validation purposes. */
 export interface ComboBoxValidationValue {
     /** The selected key in the ComboBox. */
@@ -7,7 +7,7 @@ export interface ComboBoxValidationValue {
     /** The value of the ComboBox input. */
     inputValue: string;
 }
-export interface ComboBoxProps<T extends CollectionItem = CollectionItem> extends CommonProps, FieldWithPlaceholderProps<ComboBoxValidationValue>, CollectionProps<T>, Pick<RACComboBoxProps<T>, 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'selectedKey' | 'defaultSelectedKey' | 'inputValue' | 'defaultInputValue' | 'autoFocus' | 'onSelectionChange' | 'onInputChange' | 'onFocus' | 'onBlur' | 'onOpenChange'>, Pick<RACListBoxProps<T>, 'onScroll'> {
+export interface ComboBoxProps<T extends CollectionItem = CollectionItem> extends CommonProps, FieldWithPlaceholderProps<ComboBoxValidationValue>, CollectionProps<T>, AsyncItemLoadingProps, Pick<RACComboBoxProps<T>, 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'selectedKey' | 'defaultSelectedKey' | 'inputValue' | 'defaultInputValue' | 'autoFocus' | 'onSelectionChange' | 'onInputChange' | 'onFocus' | 'onBlur' | 'onOpenChange'>, Pick<RACListBoxProps<T>, 'onScroll'> {
     /**
      * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.
      * @default false

package/dist/commonjs/components/combo-box/combo-box.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"combo-box.d.ts","sourceRoot":"","sources":["../../../../src/components/combo-box/combo-box.tsx"],"names":[],"mappings":"AAIA,OAAO,EASL,KAAK,YAAY,IAAI,eAAe,~~EAMpC~~,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,gBAAgB,IAAI,mBAAmB,EAE7C,MAAM,uBAAuB,CAAC;~~AAQ~~/B,OAAO,KAAK,EACV,cAAc,EACd,eAAe,EACf,WAAW,EACX,yBAAyB,EACzB,GAAG,EACH,kBAAkB,EACnB,MAAM,aAAa,CAAC;~~AAUrB~~,gFAAgF;AAChF,MAAM,WAAW,uBAAuB;IACtC,wCAAwC;IACxC,WAAW,EAAE,GAAG,GAAG,IAAI,CAAC;IACxB,uCAAuC;IACvC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CACtE,SAAQ,WAAW,EACjB,yBAAyB,CAAC,uBAAuB,CAAC,EAClD,eAAe,CAAC,CAAC,CAAC,EAClB,IAAI,CACF,gBAAgB,CAAC,CAAC,CAAC,EACjB,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,aAAa,GACb,oBAAoB,GACpB,YAAY,GACZ,mBAAmB,GACnB,WAAW,GACX,mBAAmB,GACnB,eAAe,GACf,SAAS,GACT,QAAQ,GACR,cAAc,CACjB,EACD,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC;IACtC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;~~AA0ED~~;;;;GAIG;AACH,QAAA,MAAM,SAAS,~~GA7EG~~,CAAC,SAAS,cAAc,~~iKA6EwB~~,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC;AAsBjC,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,cAAc,CACzD,SAAQ,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;IACzF,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;CAC9B;AAED,oDAAoD;AACpD,wBAAgB,YAAY,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CAiBlG;yBAjBe,YAAY;;;AAqB5B,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACxF,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,0DAA0D;AAC1D,wBAAgB,eAAe,CAAC,CAAC,SAAS,cAAc,EAAE,EACxD,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAezB;yBApBe,eAAe"}
1	+ {"version":3,"file":"combo-box.d.ts","sourceRoot":"","sources":["../../../../src/components/combo-box/combo-box.tsx"],"names":[],"mappings":"AAIA,OAAO,EASL,KAAK,YAAY,IAAI,eAAe,EAOpC,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,gBAAgB,IAAI,mBAAmB,EAE7C,MAAM,uBAAuB,CAAC;AAU/B,OAAO,KAAK,EACV,qBAAqB,EACrB,cAAc,EACd,eAAe,EACf,WAAW,EACX,yBAAyB,EACzB,GAAG,EACH,kBAAkB,EACnB,MAAM,aAAa,CAAC;AAWrB,gFAAgF;AAChF,MAAM,WAAW,uBAAuB;IACtC,wCAAwC;IACxC,WAAW,EAAE,GAAG,GAAG,IAAI,CAAC;IACxB,uCAAuC;IACvC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CACtE,SAAQ,WAAW,EACjB,yBAAyB,CAAC,uBAAuB,CAAC,EAClD,eAAe,CAAC,CAAC,CAAC,EAClB,qBAAqB,EACrB,IAAI,CACF,gBAAgB,CAAC,CAAC,CAAC,EACjB,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,aAAa,GACb,oBAAoB,GACpB,YAAY,GACZ,mBAAmB,GACnB,WAAW,GACX,mBAAmB,GACnB,eAAe,GACf,SAAS,GACT,QAAQ,GACR,cAAc,CACjB,EACD,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC;IACtC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAuFD;;;;GAIG;AACH,QAAA,MAAM,SAAS,GA1FG,CAAC,SAAS,cAAc,iKA0FwB,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC;AAsBjC,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,cAAc,CACzD,SAAQ,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;IACzF,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;CAC9B;AAED,oDAAoD;AACpD,wBAAgB,YAAY,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CAiBlG;yBAjBe,YAAY;;;AAqB5B,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACxF,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,0DAA0D;AAC1D,wBAAgB,eAAe,CAAC,CAAC,SAAS,cAAc,EAAE,EACxD,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAezB;yBApBe,eAAe"}

package/dist/commonjs/components/combo-box/combo-box.js CHANGED Viewed

@@ -12,20 +12,23 @@ const clsx_1 = __importDefault(require("clsx"));
 const react_1 = require("react");
 const react_aria_components_1 = require("react-aria-components");
 const forward_ref_js_1 = require("../../forward-ref.js");
-const index_js_1 = require("../../icons/index.js");
+const index_js_1 = require("../../i18n/index.js");
+const index_js_2 = require("../../icons/index.js");
 const is_production_js_1 = require("../../utils/is-production.js");
 const use_production_warning_js_1 = require("../../utils/use-production-warning.js");
 const with_style_props_js_1 = require("../../with-style-props.js");
 const collapsible_list_js_1 = require("../internal/collapsible-list/collapsible-list.js");
 const form_field_js_1 = require("../internal/form-field/form-field.js");
+const spinner_js_1 = require("../spinner/spinner.js");
 const utils_js_1 = require("../typography/utils.js");
 const VIRTUAL_LAYOUT_OPTIONS = {
     rowHeight: 40,
     headingHeight: 32,
+    loaderHeight: 40,
     padding: 0,
     gap: 0,
 };
-function ComboBox({ label, description, error, items, children, placeholder, UNSAFE_className, UNSAFE_style, isReadOnly, onScroll, isVirtualized = false, ...props }, ref) {
+function ComboBox({ label, description, error, items, children, placeholder, UNSAFE_className, UNSAFE_style, isReadOnly, onScroll, isVirtualized = false, UNSTABLE_isLoading: isLoading, UNSTABLE_onLoadMore: onLoadMore, ...props }, ref) {
     const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
     (0, use_production_warning_js_1.useProductionWarning)(() => {
         if (!label && !ariaLabel && !ariaLabelledBy) {
@@ -35,8 +38,9 @@ function ComboBox({ label, description, error, items, children, placeholder, UNS
     if (!(0, is_production_js_1.isProduction)() && items != null && typeof children !== 'function') {
         console.warn('`ComboBox` requires `children` to be a function when using `items` prop');
     }
-    const listBox = ((0, jsx_runtime_1.jsx)(react_aria_components_1.ListBox, { className: "cim-combo-box-listbox", onScroll: onScroll, items: items, children: children }));
-    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.ComboBox, { ...props, ref: ref, className: (0, clsx_1.default)('cim-combo-box', UNSAFE_className), style: UNSAFE_style, menuTrigger: "focus", isReadOnly: isReadOnly, "data-readonly": isReadOnly ? true : undefined, children: [(0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Group, { className: "cim-combo-box-input-group", children: [(0, jsx_runtime_1.jsx)(ComboBoxInput, { isReadOnly: isReadOnly, placeholder: placeholder }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { className: "cim-combo-box-button", children: (0, jsx_runtime_1.jsx)(index_js_1.IconChevronDown, {}) })] }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: error }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description }), (0, jsx_runtime_1.jsx)(collapsible_list_js_1.CollapsibleList, { offset: 5, maxHeight: 315, children: isVirtualized ? ((0, jsx_runtime_1.jsx)(react_aria_components_1.Virtualizer, { layout: react_aria_components_1.ListLayout, layoutOptions: VIRTUAL_LAYOUT_OPTIONS, children: listBox })) : (listBox) })] }));
+    const collectionMessages = (0, index_js_1.useLocalizedMessages)('UNSTABLE_collection');
+    const listBox = ((0, jsx_runtime_1.jsxs)(react_aria_components_1.ListBox, { className: "cim-combo-box-listbox", onScroll: onScroll, renderEmptyState: () => isLoading ? (0, jsx_runtime_1.jsx)(spinner_js_1.Spinner, { "aria-label": collectionMessages.format('loading'), size: "small", marginY: 8 }) : null, children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.Collection, { items: items, children: children }), (0, jsx_runtime_1.jsx)(react_aria_components_1.ListBoxLoadMoreItem, { onLoadMore: onLoadMore, isLoading: isLoading, children: (0, jsx_runtime_1.jsx)(spinner_js_1.Spinner, { "aria-label": collectionMessages.format('loadingMore'), size: "small", marginY: 8 }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.ComboBox, { ...props, ref: ref, className: (0, clsx_1.default)('cim-combo-box', UNSAFE_className), style: UNSAFE_style, menuTrigger: "focus", isReadOnly: isReadOnly, "data-readonly": isReadOnly ? true : undefined, children: [(0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Group, { className: "cim-combo-box-input-group", children: [(0, jsx_runtime_1.jsx)(ComboBoxInput, { isReadOnly: isReadOnly, placeholder: placeholder }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { className: "cim-combo-box-button", children: (0, jsx_runtime_1.jsx)(index_js_2.IconChevronDown, {}) })] }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: error }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description }), (0, jsx_runtime_1.jsx)(collapsible_list_js_1.CollapsibleList, { offset: 5, maxHeight: 315, children: isVirtualized ? ((0, jsx_runtime_1.jsx)(react_aria_components_1.Virtualizer, { layout: react_aria_components_1.ListLayout, layoutOptions: VIRTUAL_LAYOUT_OPTIONS, children: listBox })) : (listBox) })] }));
 }
 /**
  * Allows users to filter a collapsible list and select one item from it.
@@ -55,7 +59,7 @@ function ComboBoxInput({ isReadOnly, placeholder, }) {
 /** Renders a single list item within `ComboBox`. */
 function ComboBoxItem({ children, ...props }) {
     const textValue = typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');
-    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.ListBoxItem, { ...props, className: "cim-combo-box-item", textValue: textValue, children: ({ isDisabled }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_js_1.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 })] })) }));
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.ListBoxItem, { ...props, className: "cim-combo-box-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 })] })) }));
 }
 ComboBoxItem.displayName = 'ComboBoxItem';
 /** Groups list items within `ComboBox` into a section. */

package/dist/commonjs/components/combo-box/combo-box.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"combo-box.js","sourceRoot":"","sources":["../../../../src/components/combo-box/combo-box.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useContext, type ForwardedRef } from 'react';\nimport {\n Button as RACButton,\n Collection as RACCollection,\n ComboBox as RACComboBox,\n ComboBoxStateContext as RACComboBoxStateContext,\n Group as RACGroup,\n Header as RACHeader,\n Input as RACInput,\n ListBox as RACListBox,\n type ListBoxProps as RACListBoxProps,\n ListBoxItem as RACListBoxItem,\n ListBoxSection as RACListBoxSection,\n ListLayout as RACListLayout,\n type ListLayoutOptions as RACListLayoutOptions,\n Text as RACText,\n type ComboBoxProps as RACComboBoxProps,\n type ListBoxItemProps as RACListBoxItemProps,\n Virtualizer as RACVirtualizer,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheck, IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type {\n CollectionItem,\n CollectionProps,\n CommonProps,\n FieldWithPlaceholderProps,\n Key,\n StringLikeChildren,\n} from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nconst VIRTUAL_LAYOUT_OPTIONS: RACListLayoutOptions = {\n rowHeight: 40,\n headingHeight: 32,\n padding: 0,\n gap: 0,\n};\n\n/** Represents the state of the `ComboBox` component for validation purposes. /\nexport interface ComboBoxValidationValue {\n /* The selected key in the ComboBox. /\n selectedKey: Key \| null;\n /* The value of the ComboBox input. /\n inputValue: string;\n}\n\nexport interface ComboBoxProps<T extends CollectionItem = CollectionItem>\n extends CommonProps,\n FieldWithPlaceholderProps<ComboBoxValidationValue>,\n CollectionProps<T>,\n Pick<\n RACComboBoxProps<T>,\n \| 'isDisabled'\n \| 'isRequired'\n \| 'isInvalid'\n \| 'isReadOnly'\n \| 'selectedKey'\n \| 'defaultSelectedKey'\n \| 'inputValue'\n \| 'defaultInputValue'\n \| 'autoFocus'\n \| 'onSelectionChange'\n \| 'onInputChange'\n \| 'onFocus'\n \| 'onBlur'\n \| 'onOpenChange'\n >,\n Pick<RACListBoxProps<T>, 'onScroll'> {\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}\n\nfunction ComboBox<T extends CollectionItem>(\n {\n label,\n description,\n error,\n items,\n children,\n placeholder,\n UNSAFE_className,\n UNSAFE_style,\n isReadOnly,\n onScroll,\n isVirtualized = false,\n ...props\n }: ComboBoxProps<T>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('ComboBox 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('`ComboBox` requires `children` to be a function when using `items` prop');\n }\n\n const listBox = (\n <RACListBox className=\"cim-combo-box-listbox\" onScroll={onScroll} items={items}>\n {children}\n </RACListBox>\n );\n\n return (\n <RACComboBox\n {...props}\n ref={ref}\n className={clsx('cim-combo-box', UNSAFE_className)}\n style={UNSAFE_style}\n menuTrigger=\"focus\"\n isReadOnly={isReadOnly}\n data-readonly={isReadOnly ? true : undefined}\n >\n <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n {label}\n </FormFieldLabel>\n <RACGroup className=\"cim-combo-box-input-group\">\n <ComboBoxInput isReadOnly={isReadOnly} placeholder={placeholder} />\n <RACButton className=\"cim-combo-box-button\">\n <IconChevronDown />\n </RACButton>\n </RACGroup>\n <FormFieldError>{error}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n <CollapsibleList\n offset={5} // 1px border + 4px actual offset\n maxHeight={315}\n >\n {isVirtualized ? (\n <RACVirtualizer layout={RACListLayout} layoutOptions={VIRTUAL_LAYOUT_OPTIONS}>\n {listBox}\n </RACVirtualizer>\n ) : (\n listBox\n )}\n </CollapsibleList>\n </RACComboBox>\n );\n}\n\n/\n Allows users to filter a collapsible list and select one item from it.\n \n See [combo box usage guidelines](https://ui.cimpress.com/components/combo-box)\n /\nconst _ComboBox = withStyleProps(forwardRef(ComboBox), 'ComboBox');\n\nexport { _ComboBox as ComboBox };\n\nfunction ComboBoxInput({\n isReadOnly,\n placeholder,\n}: {\n isReadOnly: boolean \| undefined;\n placeholder: string \| undefined;\n}) {\n const comboBoxState = useContext(RACComboBoxStateContext);\n\n return (\n <RACInput\n className={clsx('cim-combo-box-input', textStyle({ variant: 'body' }))}\n // Ensure the popover opens when the input is clicked.\n // By default, React Aria only opens the popover when the input is focused.\n onClick={() => !isReadOnly && comboBoxState!.open()}\n placeholder={placeholder}\n />\n );\n}\n\nexport interface ComboBoxItemProps<T extends CollectionItem>\n extends Pick<RACListBoxItemProps<T>, 'id' \| 'isDisabled' \| 'onHoverStart' \| 'onHoverEnd'> {\n /* The content to display as the label. /\n children: StringLikeChildren;\n}\n\n/* Renders a single list item within `ComboBox`. /\nexport function ComboBoxItem<T extends CollectionItem>({ children, ...props }: ComboBoxItemProps<T>) {\n const textValue =\n typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n return (\n <RACListBoxItem {...props} className=\"cim-combo-box-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\nComboBoxItem.displayName = 'ComboBoxItem';\n\nexport interface ComboBoxSectionProps<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 `ComboBox` into a section. */\nexport function ComboBoxSection<T extends CollectionItem>({\n title,\n children,\n items,\n ...props\n}: ComboBoxSectionProps<T>) {\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`ComboBoxSection` 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\nComboBoxSection.displayName = 'ComboBoxSection';\n"]}
1	+ {"version":3,"file":"combo-box.js","sourceRoot":"","sources":["../../../../src/components/combo-box/combo-box.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;AAmNb,oCAiBC;AAYD,0CAoBC;;AAlQD,gDAAwB;AACxB,iCAAsD;AACtD,iEAmB+B;AAC/B,yDAAkD;AAClD,kDAA2D;AAC3D,mDAAkE;AAClE,mEAA4D;AAC5D,qFAA6E;AAC7E,mEAA2D;AAC3D,0FAAmF;AACnF,wEAA4G;AAC5G,sDAAgD;AAUhD,qDAAmD;AAEnD,MAAM,sBAAsB,GAAyB;IACnD,SAAS,EAAE,EAAE;IACb,aAAa,EAAE,EAAE;IACjB,YAAY,EAAE,EAAE;IAChB,OAAO,EAAE,CAAC;IACV,GAAG,EAAE,CAAC;CACP,CAAC;AAwCF,SAAS,QAAQ,CACf,EACE,KAAK,EACL,WAAW,EACX,KAAK,EACL,KAAK,EACL,QAAQ,EACR,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,aAAa,GAAG,KAAK,EACrB,kBAAkB,EAAE,SAAS,EAC7B,mBAAmB,EAAE,UAAU,EAC/B,GAAG,KAAK,EACS,EACnB,GAAiC;IAEjC,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,iFAAiF,CAAC,CAAC;QAClG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,IAAI,CAAC,IAAA,+BAAY,GAAE,IAAI,KAAK,IAAI,IAAI,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;QACvE,OAAO,CAAC,IAAI,CAAC,yEAAyE,CAAC,CAAC;IAC1F,CAAC;IAED,MAAM,kBAAkB,GAAG,IAAA,+BAAoB,EAAC,qBAAqB,CAAC,CAAC;IAEvE,MAAM,OAAO,GAAG,CACd,wBAAC,+BAAU,IACT,SAAS,EAAC,uBAAuB,EACjC,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,GAAG,EAAE,CACrB,SAAS,CAAC,CAAC,CAAC,uBAAC,oBAAO,kBAAa,kBAAkB,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,GAAI,CAAC,CAAC,CAAC,IAAI,aAG3G,uBAAC,kCAAa,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAiB,EACvD,uBAAC,2CAAsB,IAAC,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,YAClE,uBAAC,oBAAO,kBAAa,kBAAkB,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,GAAI,GACnE,IACd,CACd,CAAC;IAEF,OAAO,CACL,wBAAC,gCAAW,OACN,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,eAAe,EAAE,gBAAgB,CAAC,EAClD,KAAK,EAAE,YAAY,EACnB,WAAW,EAAC,OAAO,EACnB,UAAU,EAAE,UAAU,mBACP,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,aAE5C,uBAAC,8BAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,YACvE,KAAK,GACS,EACjB,wBAAC,6BAAQ,IAAC,SAAS,EAAC,2BAA2B,aAC7C,uBAAC,aAAa,IAAC,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,GAAI,EACnE,uBAAC,8BAAS,IAAC,SAAS,EAAC,sBAAsB,YACzC,uBAAC,0BAAe,KAAG,GACT,IACH,EACX,uBAAC,8BAAc,cAAE,KAAK,GAAkB,EACxC,uBAAC,oCAAoB,cAAE,WAAW,GAAwB,EAC1D,uBAAC,qCAAe,IACd,MAAM,EAAE,CAAC,EACT,SAAS,EAAE,GAAG,YAEb,aAAa,CAAC,CAAC,CAAC,CACf,uBAAC,mCAAc,IAAC,MAAM,EAAE,kCAAa,EAAE,aAAa,EAAE,sBAAsB,YACzE,OAAO,GACO,CAClB,CAAC,CAAC,CAAC,CACF,OAAO,CACR,GACe,IACN,CACf,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,SAAS,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC;AAE7C,6BAAQ;AAE9B,SAAS,aAAa,CAAC,EACrB,UAAU,EACV,WAAW,GAIZ;IACC,MAAM,aAAa,GAAG,IAAA,kBAAU,EAAC,4CAAuB,CAAC,CAAC;IAE1D,OAAO,CACL,uBAAC,6BAAQ,IACP,SAAS,EAAE,IAAA,cAAI,EAAC,qBAAqB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC;QACtE,sDAAsD;QACtD,2EAA2E;QAC3E,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,UAAU,IAAI,aAAc,CAAC,IAAI,EAAE,EACnD,WAAW,EAAE,WAAW,GACxB,CACH,CAAC;AACJ,CAAC;AAQD,oDAAoD;AACpD,SAAgB,YAAY,CAA2B,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAwB;IACjG,MAAM,SAAS,GACb,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAEhH,OAAO,CACL,uBAAC,mCAAc,OAAK,KAAK,EAAE,SAAS,EAAC,oBAAoB,EAAC,SAAS,EAAE,SAAS,YAC3E,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CACnB,6DACE,uBAAC,oBAAS,KAAG,EAEb,uBAAC,4BAAO,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,YACjG,QAAQ,GACD,IACT,CACJ,GACc,CAClB,CAAC;AACJ,CAAC;AAED,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAS1C,0DAA0D;AAC1D,SAAgB,eAAe,CAA2B,EACxD,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACgB;IACxB,IAAI,CAAC,IAAA,+BAAY,GAAE,IAAI,KAAK,IAAI,IAAI,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;QACvE,OAAO,CAAC,IAAI,CAAC,gFAAgF,CAAC,CAAC;IACjG,CAAC;IAED,OAAO,CACL,wBAAC,sCAAiB,OAAK,KAAK,EAAE,SAAS,EAAC,uBAAuB,aAC7D,uBAAC,8BAAS,IACR,SAAS,EAAE,IAAA,cAAI,EAAC,8BAA8B,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,YAExG,KAAK,GACI,EACZ,uBAAC,kCAAa,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAiB,IACrC,CACrB,CAAC;AACJ,CAAC;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useContext, type ForwardedRef } from 'react';\nimport {\n Button as RACButton,\n Collection as RACCollection,\n ComboBox as RACComboBox,\n ComboBoxStateContext as RACComboBoxStateContext,\n Group as RACGroup,\n Header as RACHeader,\n Input as RACInput,\n ListBox as RACListBox,\n type ListBoxProps as RACListBoxProps,\n ListBoxLoadMoreItem as RACListBoxLoadMoreItem,\n ListBoxItem as RACListBoxItem,\n ListBoxSection as RACListBoxSection,\n ListLayout as RACListLayout,\n type ListLayoutOptions as RACListLayoutOptions,\n Text as RACText,\n type ComboBoxProps as RACComboBoxProps,\n type ListBoxItemProps as RACListBoxItemProps,\n Virtualizer as RACVirtualizer,\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 { 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 { Spinner } from '../spinner/spinner.js';\nimport type {\n AsyncItemLoadingProps,\n CollectionItem,\n CollectionProps,\n CommonProps,\n FieldWithPlaceholderProps,\n Key,\n StringLikeChildren,\n} from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nconst VIRTUAL_LAYOUT_OPTIONS: RACListLayoutOptions = {\n rowHeight: 40,\n headingHeight: 32,\n loaderHeight: 40,\n padding: 0,\n gap: 0,\n};\n\n/** Represents the state of the `ComboBox` component for validation purposes. /\nexport interface ComboBoxValidationValue {\n /* The selected key in the ComboBox. /\n selectedKey: Key \| null;\n /* The value of the ComboBox input. /\n inputValue: string;\n}\n\nexport interface ComboBoxProps<T extends CollectionItem = CollectionItem>\n extends CommonProps,\n FieldWithPlaceholderProps<ComboBoxValidationValue>,\n CollectionProps<T>,\n AsyncItemLoadingProps,\n Pick<\n RACComboBoxProps<T>,\n \| 'isDisabled'\n \| 'isRequired'\n \| 'isInvalid'\n \| 'isReadOnly'\n \| 'selectedKey'\n \| 'defaultSelectedKey'\n \| 'inputValue'\n \| 'defaultInputValue'\n \| 'autoFocus'\n \| 'onSelectionChange'\n \| 'onInputChange'\n \| 'onFocus'\n \| 'onBlur'\n \| 'onOpenChange'\n >,\n Pick<RACListBoxProps<T>, 'onScroll'> {\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}\n\nfunction ComboBox<T extends CollectionItem>(\n {\n label,\n description,\n error,\n items,\n children,\n placeholder,\n UNSAFE_className,\n UNSAFE_style,\n isReadOnly,\n onScroll,\n isVirtualized = false,\n UNSTABLE_isLoading: isLoading,\n UNSTABLE_onLoadMore: onLoadMore,\n ...props\n }: ComboBoxProps<T>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('ComboBox 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('`ComboBox` requires `children` to be a function when using `items` prop');\n }\n\n const collectionMessages = useLocalizedMessages('UNSTABLE_collection');\n\n const listBox = (\n <RACListBox\n className=\"cim-combo-box-listbox\"\n onScroll={onScroll}\n renderEmptyState={() =>\n isLoading ? <Spinner aria-label={collectionMessages.format('loading')} size=\"small\" marginY={8} /> : null\n }\n >\n <RACCollection items={items}>{children}</RACCollection>\n <RACListBoxLoadMoreItem onLoadMore={onLoadMore} isLoading={isLoading}>\n <Spinner aria-label={collectionMessages.format('loadingMore')} size=\"small\" marginY={8} />\n </RACListBoxLoadMoreItem>\n </RACListBox>\n );\n\n return (\n <RACComboBox\n {...props}\n ref={ref}\n className={clsx('cim-combo-box', UNSAFE_className)}\n style={UNSAFE_style}\n menuTrigger=\"focus\"\n isReadOnly={isReadOnly}\n data-readonly={isReadOnly ? true : undefined}\n >\n <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n {label}\n </FormFieldLabel>\n <RACGroup className=\"cim-combo-box-input-group\">\n <ComboBoxInput isReadOnly={isReadOnly} placeholder={placeholder} />\n <RACButton className=\"cim-combo-box-button\">\n <IconChevronDown />\n </RACButton>\n </RACGroup>\n <FormFieldError>{error}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n <CollapsibleList\n offset={5} // 1px border + 4px actual offset\n maxHeight={315}\n >\n {isVirtualized ? (\n <RACVirtualizer layout={RACListLayout} layoutOptions={VIRTUAL_LAYOUT_OPTIONS}>\n {listBox}\n </RACVirtualizer>\n ) : (\n listBox\n )}\n </CollapsibleList>\n </RACComboBox>\n );\n}\n\n/\n Allows users to filter a collapsible list and select one item from it.\n \n See [combo box usage guidelines](https://ui.cimpress.com/components/combo-box)\n /\nconst _ComboBox = withStyleProps(forwardRef(ComboBox), 'ComboBox');\n\nexport { _ComboBox as ComboBox };\n\nfunction ComboBoxInput({\n isReadOnly,\n placeholder,\n}: {\n isReadOnly: boolean \| undefined;\n placeholder: string \| undefined;\n}) {\n const comboBoxState = useContext(RACComboBoxStateContext);\n\n return (\n <RACInput\n className={clsx('cim-combo-box-input', textStyle({ variant: 'body' }))}\n // Ensure the popover opens when the input is clicked.\n // By default, React Aria only opens the popover when the input is focused.\n onClick={() => !isReadOnly && comboBoxState!.open()}\n placeholder={placeholder}\n />\n );\n}\n\nexport interface ComboBoxItemProps<T extends CollectionItem>\n extends Pick<RACListBoxItemProps<T>, 'id' \| 'isDisabled' \| 'onHoverStart' \| 'onHoverEnd'> {\n /* The content to display as the label. /\n children: StringLikeChildren;\n}\n\n/* Renders a single list item within `ComboBox`. /\nexport function ComboBoxItem<T extends CollectionItem>({ children, ...props }: ComboBoxItemProps<T>) {\n const textValue =\n typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n return (\n <RACListBoxItem {...props} className=\"cim-combo-box-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\nComboBoxItem.displayName = 'ComboBoxItem';\n\nexport interface ComboBoxSectionProps<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 `ComboBox` into a section. */\nexport function ComboBoxSection<T extends CollectionItem>({\n title,\n children,\n items,\n ...props\n}: ComboBoxSectionProps<T>) {\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`ComboBoxSection` 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\nComboBoxSection.displayName = 'ComboBoxSection';\n"]}

package/dist/commonjs/components/date-picker/date-picker.d.ts CHANGED Viewed

@@ -5,7 +5,7 @@ import type { CommonProps, FieldProps } from '../types.js';
 export type DateValue = CalendarDate | CalendarDateTime | ZonedDateTime;
 /** Maps a date value to a specific subtype depending on which components it contains. */
 export type MappedDateValue<T> = T extends ZonedDateTime ? ZonedDateTime : T extends CalendarDateTime ? CalendarDateTime : T extends CalendarDate ? CalendarDate : never;
-export interface DatePickerProps<T extends DateValue> extends CommonProps, FieldProps<MappedDateValue<T>>, Pick<RACDatePickerProps<T>, 'value' | 'defaultValue' | 'placeholderValue' | 'onChange' | 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'autoFocus' | 'onFocus' | 'onBlur' | 'isOpen' | 'defaultOpen' | 'onOpenChange' | 'minValue' | 'maxValue' | 'isDateUnavailable' | 'granularity' | 'firstDayOfWeek'>, Pick<RACCalendarProps<T>, 'focusedValue' | 'defaultFocusedValue'> {
+export interface DatePickerProps<T extends DateValue> extends CommonProps, FieldProps<MappedDateValue<T>>, Pick<RACDatePickerProps<T>, 'value' | 'defaultValue' | 'placeholderValue' | 'onChange' | 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'autoFocus' | 'onFocus' | 'onBlur' | 'isOpen' | 'defaultOpen' | 'onOpenChange' | 'minValue' | 'maxValue' | 'isDateUnavailable' | 'granularity' | 'firstDayOfWeek' | 'autoComplete'>, Pick<RACCalendarProps<T>, 'focusedValue' | 'defaultFocusedValue'> {
 }
 /**
  * Allows users to enter or select a date and time value.

package/dist/commonjs/components/date-picker/date-picker.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../../src/components/date-picker/date-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAG7F,OAAO,EACL,KAAK,aAAa,IAAI,gBAAgB,EAGtC,KAAK,eAAe,IAAI,kBAAkB,EAM3C,MAAM,uBAAuB,CAAC;AAQ/B,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAI3D,oEAAoE;AACpE,MAAM,MAAM,SAAS,GAAG,YAAY,GAAG,gBAAgB,GAAG,aAAa,CAAC;AAExE,yFAAyF;AACzF,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,CAAC,SAAS,aAAa,GACpD,aAAa,GACb,CAAC,SAAS,gBAAgB,GACxB,gBAAgB,GAChB,CAAC,SAAS,YAAY,GACpB,YAAY,GACZ,KAAK,CAAC;AAEd,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,SAAS,CAClD,SAAQ,WAAW,EACjB,UAAU,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,EAC9B,IAAI,CACF,kBAAkB,CAAC,CAAC,CAAC,EACnB,OAAO,GACP,cAAc,GACd,kBAAkB,GAClB,UAAU,GACV,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,WAAW,GACX,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,aAAa,GACb,cAAc,GACd,UAAU,GACV,UAAU,GACV,mBAAmB,GACnB,aAAa,GACb,gBAAgB,~~CACnB~~,EACD,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,cAAc,GAAG,qBAAqB,CAAC;CAAG;AAqExE;;;;GAIG;AACH,QAAA,MAAM,WAAW,GAxEG,CAAC,SAAS,SAAS,mKAwEiC,CAAC;AAEzE,OAAO,EAAE,WAAW,IAAI,UAAU,EAAE,CAAC"}
1	+ {"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../../src/components/date-picker/date-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAG7F,OAAO,EACL,KAAK,aAAa,IAAI,gBAAgB,EAGtC,KAAK,eAAe,IAAI,kBAAkB,EAM3C,MAAM,uBAAuB,CAAC;AAQ/B,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAI3D,oEAAoE;AACpE,MAAM,MAAM,SAAS,GAAG,YAAY,GAAG,gBAAgB,GAAG,aAAa,CAAC;AAExE,yFAAyF;AACzF,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,CAAC,SAAS,aAAa,GACpD,aAAa,GACb,CAAC,SAAS,gBAAgB,GACxB,gBAAgB,GAChB,CAAC,SAAS,YAAY,GACpB,YAAY,GACZ,KAAK,CAAC;AAEd,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,SAAS,CAClD,SAAQ,WAAW,EACjB,UAAU,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,EAC9B,IAAI,CACF,kBAAkB,CAAC,CAAC,CAAC,EACnB,OAAO,GACP,cAAc,GACd,kBAAkB,GAClB,UAAU,GACV,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,WAAW,GACX,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,aAAa,GACb,cAAc,GACd,UAAU,GACV,UAAU,GACV,mBAAmB,GACnB,aAAa,GACb,gBAAgB,GAChB,cAAc,CACjB,EACD,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,cAAc,GAAG,qBAAqB,CAAC;CAAG;AAqExE;;;;GAIG;AACH,QAAA,MAAM,WAAW,GAxEG,CAAC,SAAS,SAAS,mKAwEiC,CAAC;AAEzE,OAAO,EAAE,WAAW,IAAI,UAAU,EAAE,CAAC"}

package/dist/commonjs/components/date-picker/date-picker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../../../src/components/date-picker/date-picker.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAGb,gDAAwB;AACxB,iCAAsD;AACtD,iEAU+B;AAC/B,yDAAkD;AAClD,kDAA2D;AAC3D,mDAAyD;AACzD,qFAA6E;AAC7E,mEAA2D;AAC3D,6DAAsD;AACtD,wEAA4G;AAE5G,qDAAmD;AACnD,uEAA+D;~~AAyC~~/D,SAAS,UAAU,CACjB,EACE,KAAK,EACL,WAAW,EACX,KAAK,EAAE,YAAY,EACnB,YAAY,EACZ,mBAAmB,EACnB,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACW,EACrB,GAAiC;IAEjC,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,mFAAmF,CAAC,CAAC;QACpG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,MAAM,QAAQ,GAAG,IAAA,+BAAoB,EAAC,YAAY,CAAC,CAAC;IAEpD,OAAO,CACL,wBAAC,kCAAa,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,iBAAiB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aAC3G,uBAAC,8BAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,YACvE,KAAK,GACS,EACjB,wBAAC,6BAAQ,IAAC,SAAS,EAAC,6BAA6B,mBAAgB,KAAK,CAAC,UAAU,IAAI,SAAS,aAC5F,uBAAC,iCAAY,IAAC,SAAS,EAAE,IAAA,cAAI,EAAC,uBAAuB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC,YACnF,CAAC,OAAO,EAAE,EAAE,CAAC,CACZ,iCAAM,SAAS,EAAC,iCAAiC,YAC/C,uBAAC,mCAAc,IAAC,OAAO,EAAE,OAAO,GAAI,GAC/B,CACR,GACY,EACf,iCAAK,SAAS,EAAC,gCAAgC,aAC7C,uBAAC,qBAAqB,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,UAAU,GAAI,EAC3E,uBAAC,2BAAU,IACT,IAAI,EAAE,uBAAC,4BAAiB,KAAG,gBACf,QAAQ,CAAC,MAAM,CAAC,cAAc,CAAC,EAC3C,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,GACZ,IACE,IACG,EACX,uBAAC,8BAAc,cAAE,YAAY,GAAkB,EAC/C,uBAAC,oCAAoB,cAAE,WAAW,GAAwB,EAC1D,uBAAC,+BAAU,IACT,SAAS,EAAC,yBAAyB,EACnC,SAAS,EAAC,YAAY,EACtB,MAAM,EAAE,CAAC,EACT,gBAAgB,EAAE,EAAE,yCAGpB,uBAAC,8BAAS,cACR,uBAAC,4CAAkB,IACjB,YAAY,EAAE,YAAY,EAC1B,mBAAmB,EAAE,mBAAmB,EACxC,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,GACxC,GACQ,GACD,IACC,CACjB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,WAAW,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAEjD,iCAAU;AAElC,SAAS,qBAAqB,CAAC,EAAE,UAAU,EAAuC;IAChF,MAAM,eAAe,GAAG,IAAA,kBAAU,EAAC,8CAAyB,CAAE,CAAC;IAC/D,MAAM,QAAQ,GAAG,IAAA,+BAAoB,EAAC,YAAY,CAAC,CAAC;IAEpD,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,CAAC;QAC3B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,uBAAC,2BAAU;IACT,wDAAwD;;QAAxD,wDAAwD;QACxD,IAAI,EAAE,IAAI,EACV,gBAAgB,EAAC,uBAAuB,gBAC5B,QAAQ,CAAC,MAAM,CAAC,YAAY,CAAC,EACzC,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,QAAQ,CAAC,IAAI,CAAC,EAC7C,IAAI,EAAE,uBAAC,iBAAiB,KAAG,EAC3B,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,UAAU,GACtB,CACH,CAAC;AACJ,CAAC;AAED,iEAAiE;AACjE,SAAS,iBAAiB;IACxB,OAAO,CACL,gCAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAC,SAAS,EAAC,UAAU,EAAC,IAAI,EAAC,cAAc,+BAClG,iCACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,2hBAA2hB,GAC7hB,GACE,CACP,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\nimport type { CalendarDate, CalendarDateTime, ZonedDateTime } from '@internationalized/date';\nimport clsx from 'clsx';\nimport { useContext, type ForwardedRef } from 'react';\nimport {\n type CalendarProps as RACCalendarProps,\n DateInput as RACDateInput,\n DatePicker as RACDatePicker,\n type DatePickerProps as RACDatePickerProps,\n DatePickerStateContext as RACDatePickerStateContext,\n DateSegment as RACDateSegment,\n Dialog as RACDialog,\n Group as RACGroup,\n Popover as RACPopover,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { IconCalendarEmpty } from '../../icons/index.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { IconButton } from '../button/icon-button.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CommonProps, FieldProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\nimport { DatePickerCalendar } from './date-picker-calendar.js';\n\n/** Represents a date with optional time and timezone components. /\nexport type DateValue = CalendarDate \| CalendarDateTime \| ZonedDateTime;\n\n/* Maps a date value to a specific subtype depending on which components it contains. /\nexport type MappedDateValue<T> = T extends ZonedDateTime\n ? ZonedDateTime\n : T extends CalendarDateTime\n ? CalendarDateTime\n : T extends CalendarDate\n ? CalendarDate\n : never;\n\nexport interface DatePickerProps<T extends DateValue>\n extends CommonProps,\n FieldProps<MappedDateValue<T>>,\n Pick<\n RACDatePickerProps<T>,\n \| 'value'\n \| 'defaultValue'\n \| 'placeholderValue'\n \| 'onChange'\n \| 'isDisabled'\n \| 'isRequired'\n \| 'isInvalid'\n \| 'isReadOnly'\n \| 'autoFocus'\n \| 'onFocus'\n \| 'onBlur'\n \| 'isOpen'\n \| 'defaultOpen'\n \| 'onOpenChange'\n \| 'minValue'\n \| 'maxValue'\n \| 'isDateUnavailable'\n \| 'granularity'\n \| 'firstDayOfWeek'\n >,\n Pick<RACCalendarProps<T>, 'focusedValue' \| 'defaultFocusedValue'> {}\n\nfunction DatePicker<T extends DateValue>(\n {\n label,\n description,\n error: errorMessage,\n focusedValue,\n defaultFocusedValue,\n UNSAFE_className,\n UNSAFE_style,\n ...props\n }: DatePickerProps<T>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('DatePicker requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n const messages = useLocalizedMessages('datePicker');\n\n return (\n <RACDatePicker {...props} ref={ref} className={clsx('cim-date-picker', UNSAFE_className)} style={UNSAFE_style}>\n <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n {label}\n </FormFieldLabel>\n <RACGroup className=\"cim-date-picker-input-group\" data-readonly={props.isReadOnly \|\| undefined}>\n <RACDateInput className={clsx('cim-date-picker-input', textStyle({ variant: 'body' }))}>\n {(segment) => (\n <span className=\"cim-date-picker-segment-wrapper\">\n <RACDateSegment segment={segment} />\n </span>\n )}\n </RACDateInput>\n <div className=\"cim-date-picker-input-controls\">\n <DatePickerClearButton isDisabled={props.isDisabled \|\| props.isReadOnly} />\n <IconButton\n icon={<IconCalendarEmpty />}\n aria-label={messages.format('openCalendar')}\n variant=\"tertiary\"\n size=\"small\"\n />\n </div>\n </RACGroup>\n <FormFieldError>{errorMessage}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n <RACPopover\n className=\"cim-date-picker-popover\"\n placement=\"bottom end\"\n offset={5} // 1px border + 4px actual offset\n containerPadding={16}\n data-cim-style-root\n >\n <RACDialog>\n <DatePickerCalendar<T>\n focusedValue={focusedValue}\n defaultFocusedValue={defaultFocusedValue}\n placeholderValue={props.placeholderValue}\n />\n </RACDialog>\n </RACPopover>\n </RACDatePicker>\n );\n}\n\n/\n Allows users to enter or select a date and time value.\n \n See [date picker usage guidelines](https://ui.cimpress.io/components/date-picker/).\n */\nconst _DatePicker = withStyleProps(forwardRef(DatePicker), 'DatePicker');\n\nexport { _DatePicker as DatePicker };\n\nfunction DatePickerClearButton({ isDisabled }: { isDisabled: boolean \| undefined }) {\n const datePickerState = useContext(RACDatePickerStateContext)!;\n const messages = useLocalizedMessages('datePicker');\n\n if (!datePickerState.value) {\n return null;\n }\n\n return (\n <IconButton\n // Don't inherit default Button behavior from DatePicker\n slot={null}\n UNSAFE_className=\"cim-date-picker-clear\"\n aria-label={messages.format('clearValue')}\n onPress={() => datePickerState.setValue(null)}\n icon={<IconCloseDetached />}\n variant=\"tertiary\"\n size=\"small\"\n isDisabled={isDisabled}\n />\n );\n}\n\n// TODO: use one of our standard icons instead of this custom one\nfunction IconCloseDetached() {\n return (\n <svg viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg\" className=\"cim-icon\" fill=\"currentcolor\" data-icon>\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M0.21967 0.21967C0.512563 -0.0732233 0.987437 -0.0732233 1.28033 0.21967L6 4.93934L10.7197 0.21967C11.0126 -0.0732233 11.4874 -0.0732233 11.7803 0.21967C12.0732 0.512563 12.0732 0.987437 11.7803 1.28033L7.06066 6L11.7803 10.7197C12.0732 11.0126 12.0732 11.4874 11.7803 11.7803C11.4874 12.0732 11.0126 12.0732 10.7197 11.7803L6 7.06066L1.28033 11.7803C0.987437 12.0732 0.512563 12.0732 0.21967 11.7803C-0.0732233 11.4874 -0.0732233 11.0126 0.21967 10.7197L4.93934 6L0.21967 1.28033C-0.0732233 0.987437 -0.0732233 0.512563 0.21967 0.21967Z\"\n />\n </svg>\n );\n}\n"]}
1	+ {"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../../../src/components/date-picker/date-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport type { CalendarDate, CalendarDateTime, ZonedDateTime } from '@internationalized/date';\nimport clsx from 'clsx';\nimport { useContext, type ForwardedRef } from 'react';\nimport {\n type CalendarProps as RACCalendarProps,\n DateInput as RACDateInput,\n DatePicker as RACDatePicker,\n type DatePickerProps as RACDatePickerProps,\n DatePickerStateContext as RACDatePickerStateContext,\n DateSegment as RACDateSegment,\n Dialog as RACDialog,\n Group as RACGroup,\n Popover as RACPopover,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { IconCalendarEmpty } from '../../icons/index.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { IconButton } from '../button/icon-button.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CommonProps, FieldProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\nimport { DatePickerCalendar } from './date-picker-calendar.js';\n\n/** Represents a date with optional time and timezone components. /\nexport type DateValue = CalendarDate \| CalendarDateTime \| ZonedDateTime;\n\n/* Maps a date value to a specific subtype depending on which components it contains. /\nexport type MappedDateValue<T> = T extends ZonedDateTime\n ? ZonedDateTime\n : T extends CalendarDateTime\n ? CalendarDateTime\n : T extends CalendarDate\n ? CalendarDate\n : never;\n\nexport interface DatePickerProps<T extends DateValue>\n extends CommonProps,\n FieldProps<MappedDateValue<T>>,\n Pick<\n RACDatePickerProps<T>,\n \| 'value'\n \| 'defaultValue'\n \| 'placeholderValue'\n \| 'onChange'\n \| 'isDisabled'\n \| 'isRequired'\n \| 'isInvalid'\n \| 'isReadOnly'\n \| 'autoFocus'\n \| 'onFocus'\n \| 'onBlur'\n \| 'isOpen'\n \| 'defaultOpen'\n \| 'onOpenChange'\n \| 'minValue'\n \| 'maxValue'\n \| 'isDateUnavailable'\n \| 'granularity'\n \| 'firstDayOfWeek'\n \| 'autoComplete'\n >,\n Pick<RACCalendarProps<T>, 'focusedValue' \| 'defaultFocusedValue'> {}\n\nfunction DatePicker<T extends DateValue>(\n {\n label,\n description,\n error: errorMessage,\n focusedValue,\n defaultFocusedValue,\n UNSAFE_className,\n UNSAFE_style,\n ...props\n }: DatePickerProps<T>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('DatePicker requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n const messages = useLocalizedMessages('datePicker');\n\n return (\n <RACDatePicker {...props} ref={ref} className={clsx('cim-date-picker', UNSAFE_className)} style={UNSAFE_style}>\n <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n {label}\n </FormFieldLabel>\n <RACGroup className=\"cim-date-picker-input-group\" data-readonly={props.isReadOnly \|\| undefined}>\n <RACDateInput className={clsx('cim-date-picker-input', textStyle({ variant: 'body' }))}>\n {(segment) => (\n <span className=\"cim-date-picker-segment-wrapper\">\n <RACDateSegment segment={segment} />\n </span>\n )}\n </RACDateInput>\n <div className=\"cim-date-picker-input-controls\">\n <DatePickerClearButton isDisabled={props.isDisabled \|\| props.isReadOnly} />\n <IconButton\n icon={<IconCalendarEmpty />}\n aria-label={messages.format('openCalendar')}\n variant=\"tertiary\"\n size=\"small\"\n />\n </div>\n </RACGroup>\n <FormFieldError>{errorMessage}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n <RACPopover\n className=\"cim-date-picker-popover\"\n placement=\"bottom end\"\n offset={5} // 1px border + 4px actual offset\n containerPadding={16}\n data-cim-style-root\n >\n <RACDialog>\n <DatePickerCalendar<T>\n focusedValue={focusedValue}\n defaultFocusedValue={defaultFocusedValue}\n placeholderValue={props.placeholderValue}\n />\n </RACDialog>\n </RACPopover>\n </RACDatePicker>\n );\n}\n\n/\n Allows users to enter or select a date and time value.\n \n See [date picker usage guidelines](https://ui.cimpress.io/components/date-picker/).\n */\nconst _DatePicker = withStyleProps(forwardRef(DatePicker), 'DatePicker');\n\nexport { _DatePicker as DatePicker };\n\nfunction DatePickerClearButton({ isDisabled }: { isDisabled: boolean \| undefined }) {\n const datePickerState = useContext(RACDatePickerStateContext)!;\n const messages = useLocalizedMessages('datePicker');\n\n if (!datePickerState.value) {\n return null;\n }\n\n return (\n <IconButton\n // Don't inherit default Button behavior from DatePicker\n slot={null}\n UNSAFE_className=\"cim-date-picker-clear\"\n aria-label={messages.format('clearValue')}\n onPress={() => datePickerState.setValue(null)}\n icon={<IconCloseDetached />}\n variant=\"tertiary\"\n size=\"small\"\n isDisabled={isDisabled}\n />\n );\n}\n\n// TODO: use one of our standard icons instead of this custom one\nfunction IconCloseDetached() {\n return (\n <svg viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg\" className=\"cim-icon\" fill=\"currentcolor\" data-icon>\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M0.21967 0.21967C0.512563 -0.0732233 0.987437 -0.0732233 1.28033 0.21967L6 4.93934L10.7197 0.21967C11.0126 -0.0732233 11.4874 -0.0732233 11.7803 0.21967C12.0732 0.512563 12.0732 0.987437 11.7803 1.28033L7.06066 6L11.7803 10.7197C12.0732 11.0126 12.0732 11.4874 11.7803 11.7803C11.4874 12.0732 11.0126 12.0732 10.7197 11.7803L6 7.06066L1.28033 11.7803C0.987437 12.0732 0.512563 12.0732 0.21967 11.7803C-0.0732233 11.4874 -0.0732233 11.0126 0.21967 10.7197L4.93934 6L0.21967 1.28033C-0.0732233 0.987437 -0.0732233 0.512563 0.21967 0.21967Z\"\n />\n </svg>\n );\n}\n"]}

package/dist/commonjs/components/drawer/drawer.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
-import { type ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import type { AriaLabelingProps, CommonProps } from '../types.js';
-export interface UNSTABLE_DrawerRootProps {
+export interface DrawerRootProps {
     /** The drawer trigger with its associated drawer. Provide the trigger as the first child, and the drawer as the second child. */
     children: ReactNode;
     /** Whether the drawer is open (controlled). */
@@ -14,26 +14,27 @@ export interface UNSTABLE_DrawerRootProps {
  * Encapsulates a drawer trigger and its associated drawer.
  * The trigger can be any Cimpress UI button, and the drawer will be displayed when the trigger is activated.
  */
-export declare function UNSTABLE_DrawerRoot(props: UNSTABLE_DrawerRootProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace UNSTABLE_DrawerRoot {
+export declare function DrawerRoot(props: DrawerRootProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DrawerRoot {
     var displayName: string;
 }
-export interface UNSTABLE_DrawerRenderProps {
+export interface DrawerRenderProps {
     /** Closes the drawer when called. */
     close: () => void;
 }
-export interface UNSTABLE_DrawerProps extends CommonProps, AriaLabelingProps {
+export interface DrawerProps extends CommonProps, AriaLabelingProps {
     /** The contents of the drawer. A function may be provided to access a function to close the drawer. */
-    children: ReactNode | ((renderProps: UNSTABLE_DrawerRenderProps) => ReactNode);
+    children: ReactNode | ((renderProps: DrawerRenderProps) => ReactNode);
     /** The title of the drawer. */
-    title?: string;
+    title: string;
     /**
      * The size of the drawer. This prop is ignored on small devices - drawers on small devices will always take up all available width.
-     * @default 'medium'
+     * @default 'small'
      */
     size?: 'small' | 'medium' | 'large';
     /**
-     * Whether to close the drawer when the user interacts outside of it or presses the Escape key.
+     * Whether the drawer can be closed by clicking the close button, clicking outside of the drawer, or pressing the Escape key.
+     * When `false`, the drawer can only be closed programmatically.
      * @default true
      */
     isDismissible?: boolean;
@@ -58,24 +59,24 @@ export interface UNSTABLE_DrawerProps extends CommonProps, AriaLabelingProps {
  *
  * See [drawer usage guidelines](https://ui.cimpress.io/components/drawer/).
  */
-declare const _UNSTABLE_Drawer: (props: UNSTABLE_DrawerProps & import("react").RefAttributes<HTMLElement>) => import("react").JSX.Element | null;
-export { _UNSTABLE_Drawer as UNSTABLE_Drawer };
-export interface UNSTABLE_DrawerBodyProps {
+declare const _Drawer: (props: DrawerProps & import("react").RefAttributes<HTMLElement>) => import("react").JSX.Element | null;
+export { _Drawer as Drawer };
+export interface DrawerBodyProps {
     /** The content to render within the drawer. */
     children: ReactNode;
 }
 /** Renders content within `Drawer`. */
-export declare function UNSTABLE_DrawerBody(props: UNSTABLE_DrawerBodyProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace UNSTABLE_DrawerBody {
+export declare function DrawerBody(props: DrawerBodyProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DrawerBody {
     var displayName: string;
 }
-export interface UNSTABLE_DrawerActionsProps {
+export interface DrawerActionsProps {
     /** Actions that should be available in the drawer. */
     children: ReactNode;
 }
 /** Renders actions within `Drawer`. */
-export declare function UNSTABLE_DrawerActions({ children, ...props }: UNSTABLE_DrawerActionsProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace UNSTABLE_DrawerActions {
+export declare function DrawerActions({ children, ...props }: DrawerActionsProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DrawerActions {
     var displayName: string;
 }
 //# sourceMappingURL=drawer.d.ts.map

package/dist/commonjs/components/drawer/drawer.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"AAGA,OAAO,~~EAA+B,~~KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;~~AAcpE~~,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAGlE,MAAM,WAAW,~~wBAAwB~~;~~IACvC~~,iIAAiI;IACjI,QAAQ,EAAE,SAAS,CAAC;IACpB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mEAAmE;IACnE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED;;;GAGG;AACH,wBAAgB,~~mBAAmB~~,CAAC,KAAK,EAAE,~~wBAAwB~~,~~2CAElE~~;yBAFe,~~mBAAmB~~;;;~~AAMnC~~,MAAM,WAAW,~~0BAA0B~~;~~IACzC~~,qCAAqC;IACrC,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,~~oBAAqB~~,SAAQ,WAAW,EAAE,iBAAiB;~~IAC1E~~,uGAAuG;IACvG,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,WAAW,EAAE,~~0BAA0B~~,KAAK,SAAS,CAAC,CAAC;~~IAC/E~~,+BAA+B;IAC/B,KAAK,~~CAAC,~~EAAE,MAAM,CAAC;~~IACf~~;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC~~;;;OAGG~~;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AA6DD;;;;GAIG;AACH,QAAA,MAAM,~~gBAAgB~~,~~kHAAwC~~,CAAC;~~AAE/D~~,OAAO,EAAE,~~gBAAgB~~,IAAI,~~eAAe~~,EAAE,CAAC;~~AAE/C~~,MAAM,WAAW,~~wBAAwB~~;~~IACvC~~,+CAA+C;IAC/C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,uCAAuC;AACvC,wBAAgB,~~mBAAmB~~,CAAC,KAAK,EAAE,~~wBAAwB~~,~~2CAElE~~;yBAFe,~~mBAAmB~~;;;~~AAMnC~~,MAAM,WAAW,~~2BAA2B~~;~~IAC1C~~,sDAAsD;IACtD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,uCAAuC;AACvC,wBAAgB,~~sBAAsB~~,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,~~2BAA2B~~,~~2CASzF~~;~~yBATe~~,~~sBAAsB~~"}
1	+ {"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAYrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAGlE,MAAM,WAAW,eAAe;IAC9B,iIAAiI;IACjI,QAAQ,EAAE,SAAS,CAAC;IACpB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mEAAmE;IACnE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAEhD;yBAFe,UAAU;;;AAM1B,MAAM,WAAW,iBAAiB;IAChC,qCAAqC;IACrC,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,WAAY,SAAQ,WAAW,EAAE,iBAAiB;IACjE,uGAAuG;IACvG,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,WAAW,EAAE,iBAAiB,KAAK,SAAS,CAAC,CAAC;IACtE,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AA6DD;;;;GAIG;AACH,QAAA,MAAM,OAAO,yGAA+B,CAAC;AAE7C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,CAAC;AAE7B,MAAM,WAAW,eAAe;IAC9B,+CAA+C;IAC/C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,uCAAuC;AACvC,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAEhD;yBAFe,UAAU;;;AAM1B,MAAM,WAAW,kBAAkB;IACjC,sDAAsD;IACtD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,uCAAuC;AACvC,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAMvE;yBANe,aAAa"}

package/dist/commonjs/components/drawer/drawer.js CHANGED Viewed

@@ -4,30 +4,27 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UNSTABLE_Drawer = void 0;
-exports.UNSTABLE_DrawerRoot = UNSTABLE_DrawerRoot;
-exports.UNSTABLE_DrawerBody = UNSTABLE_DrawerBody;
-exports.UNSTABLE_DrawerActions = UNSTABLE_DrawerActions;
+exports.Drawer = void 0;
+exports.DrawerRoot = DrawerRoot;
+exports.DrawerBody = DrawerBody;
+exports.DrawerActions = DrawerActions;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = __importDefault(require("clsx"));
-const react_1 = require("react");
 const react_aria_components_1 = require("react-aria-components");
 const forward_ref_js_1 = require("../../forward-ref.js");
 const index_js_1 = require("../../i18n/index.js");
-const use_media_query_js_1 = require("../../utils/use-media-query.js");
 const use_production_warning_js_1 = require("../../utils/use-production-warning.js");
-const focusable_container_js_1 = require("../internal/focusable-container/focusable-container.js");
 const x_button_js_1 = require("../internal/x-button/x-button.js");
 const utils_js_1 = require("../typography/utils.js");
 /**
  * Encapsulates a drawer trigger and its associated drawer.
  * The trigger can be any Cimpress UI button, and the drawer will be displayed when the trigger is activated.
  */
-function UNSTABLE_DrawerRoot(props) {
+function DrawerRoot(props) {
     return (0, jsx_runtime_1.jsx)(react_aria_components_1.DialogTrigger, { ...props });
 }
-UNSTABLE_DrawerRoot.displayName = 'DrawerRoot';
-function UNSTABLE_Drawer({ children, title, size = 'medium', UNSAFE_className, UNSAFE_style, isDismissible = true, isOpen, defaultOpen, onOpenChange, ...props }, ref) {
+DrawerRoot.displayName = 'DrawerRoot';
+function Drawer({ children, title, size = 'small', UNSAFE_className, UNSAFE_style, isDismissible = true, isOpen, defaultOpen, onOpenChange, ...props }, ref) {
     const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
     (0, use_production_warning_js_1.useProductionWarning)(() => {
         if (!title && !ariaLabel && !ariaLabelledBy) {
@@ -35,25 +32,23 @@ function UNSTABLE_Drawer({ children, title, size = 'medium', UNSAFE_className, U
         }
     }, [title, ariaLabel, ariaLabelledBy]);
     const messages = (0, index_js_1.useLocalizedMessages)('common');
-    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.ModalOverlay, { className: "cim-drawer-overlay", isDismissable: isDismissible, isKeyboardDismissDisabled: !isDismissible, isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: onOpenChange, "data-cim-style-root": true, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Modal, { className: (0, clsx_1.default)('cim-drawer', UNSAFE_className), style: UNSAFE_style, "data-size": size, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { ...props, ref: ref, className: "cim-drawer-dialog", children: (renderProps) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "cim-drawer-header", children: [title && ((0, jsx_runtime_1.jsx)(react_aria_components_1.Heading, { slot: "title", className: (0, clsx_1.default)('cim-drawer-title', (0, utils_js_1.textStyle)({ variant: 'title-5', tone: 'base' })), children: title })), (0, jsx_runtime_1.jsx)(x_button_js_1.XButton, { "aria-label": messages.format('dismiss'), slot: "close" })] }), typeof children === 'function' ? children(renderProps) : children] })) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.ModalOverlay, { className: "cim-drawer-overlay", isDismissable: isDismissible, isKeyboardDismissDisabled: !isDismissible, isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: onOpenChange, "data-cim-style-root": true, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Modal, { className: (0, clsx_1.default)('cim-drawer', UNSAFE_className), style: UNSAFE_style, "data-size": size, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { ...props, ref: ref, className: "cim-drawer-dialog", children: (renderProps) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "cim-drawer-header", children: [title && ((0, jsx_runtime_1.jsx)(react_aria_components_1.Heading, { slot: "title", className: (0, clsx_1.default)('cim-drawer-title', (0, utils_js_1.textStyle)({ variant: 'title-5', tone: 'base' })), children: title })), isDismissible && (0, jsx_runtime_1.jsx)(x_button_js_1.XButton, { "aria-label": messages.format('dismiss'), slot: "close" })] }), typeof children === 'function' ? children(renderProps) : children] })) }) }) }));
 }
 /**
  * Displays an overlay element which blocks interaction with outside elements.
  *
  * See [drawer usage guidelines](https://ui.cimpress.io/components/drawer/).
  */
-const _UNSTABLE_Drawer = (0, forward_ref_js_1.forwardRef)(UNSTABLE_Drawer, 'Drawer');
-exports.UNSTABLE_Drawer = _UNSTABLE_Drawer;
+const _Drawer = (0, forward_ref_js_1.forwardRef)(Drawer, 'Drawer');
+exports.Drawer = _Drawer;
 /** Renders content within `Drawer`. */
-function UNSTABLE_DrawerBody(props) {
-    return (0, jsx_runtime_1.jsx)(focusable_container_js_1.FocusableContainer, { ...props, className: "cim-drawer-body", scrollDirection: "vertical" });
+function DrawerBody(props) {
+    return (0, jsx_runtime_1.jsx)("div", { ...props, className: "cim-drawer-body" });
 }
-UNSTABLE_DrawerBody.displayName = 'DrawerBody';
+DrawerBody.displayName = 'DrawerBody';
 /** Renders actions within `Drawer`. */
-function UNSTABLE_DrawerActions({ children, ...props }) {
-    const matches = (0, use_media_query_js_1.useMediaQuery)('(min-width: 640px)');
-    const componentChildren = matches ? children : react_1.Children.toArray(children).reverse();
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, className: "cim-drawer-actions", children: componentChildren }));
+function DrawerActions({ children, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, className: "cim-drawer-actions", children: children }));
 }
-UNSTABLE_DrawerActions.displayName = 'DrawerActions';
+DrawerActions.displayName = 'DrawerActions';
 //# sourceMappingURL=drawer.js.map

package/dist/commonjs/components/drawer/drawer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;~~AAmCb~~,~~kDAEC~~;~~AAmHD~~,~~kDAEC~~;AAUD,~~wDASC~~;;~~AA3KD~~,gDAAwB;~~AACxB~~,~~iCAAoE;AACpE,~~iEAM+B;AAC/B,yDAAkD;AAClD,kDAA2D;AAC3D,~~uEAA+D;AAC/D,~~qFAA6E;AAC7E,~~mGAA4F;AAC5F,~~kEAA2D;AAE3D,qDAAmD;AAanD;;;GAGG;AACH,SAAgB,~~mBAAmB~~,CAAC,~~KAA+B~~;~~IACjE~~,OAAO,uBAAC,qCAAgB,OAAK,KAAK,GAAI,CAAC;AACzC,CAAC;AAED,~~mBAAmB~~,CAAC,WAAW,GAAG,YAAY,CAAC;~~AAuC/C~~,SAAS,~~eAAe~~,~~CACtB~~,EACE,QAAQ,EACR,KAAK,EACL,IAAI,GAAG,~~QAAQ~~,~~EACf~~,gBAAgB,EAChB,YAAY,EACZ,aAAa,GAAG,IAAI,EACpB,MAAM,EACN,WAAW,EACX,YAAY,EACZ,GAAG,KAAK,~~EACa~~,~~EACvB~~,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,+EAA+E,CAAC,CAAC;QAChG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,MAAM,QAAQ,GAAG,IAAA,+BAAoB,EAAC,QAAQ,CAAC,CAAC;IAEhD,OAAO,CACL,uBAAC,oCAAe,IACd,SAAS,EAAC,oBAAoB,EAC9B,aAAa,EAAE,aAAa,EAC5B,yBAAyB,EAAE,CAAC,aAAa,EACzC,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,yCAG1B,uBAAC,6BAAQ,IAAC,SAAS,EAAE,IAAA,cAAI,EAAC,YAAY,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,eAAa,IAAI,YAC7F,uBAAC,8BAAS,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,mBAAmB,YAC1D,CAAC,WAAW,EAAE,EAAE,CAAC,CAChB,6DACE,iCAAK,SAAS,EAAC,mBAAmB,aAC/B,KAAK,IAAI,CACR,uBAAC,+BAAU,IACT,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,IAAA,cAAI,EAAC,kBAAkB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,YAEnF,KAAK,GACK,CACd,~~EACD~~,uBAAC,qBAAO,kBAAa,QAAQ,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,IAAI,EAAC,OAAO,GAAG,~~IAC5D~~,EACL,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,QAAQ,IACjE,CACJ,GACS,GACH,GACK,CACnB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,~~gBAAgB~~,GAAG,IAAA,2BAAU,EAAC,~~eAAe~~,EAAE,QAAQ,CAAC,CAAC;~~AAElC~~,~~2CAAe~~;~~AAO5C~~,uCAAuC;AACvC,SAAgB,~~mBAAmB~~,CAAC,~~KAA+B~~;~~IACjE~~,OAAO,~~uBAAC~~,~~2CAAkB,OAAK,~~KAAK,EAAE,SAAS,EAAC,iBAAiB,~~EAAC,eAAe,EAAC,UAAU,~~GAAG,CAAC;~~AAClG~~,CAAC;AAED,~~mBAAmB~~,CAAC,WAAW,GAAG,YAAY,CAAC;~~AAO/C~~,uCAAuC;AACvC,SAAgB,~~sBAAsB~~,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,~~EAA+B~~;~~IACxF~~,~~MAAM,~~OAAO,~~GAAG,IAAA,kCAAa,EAAC,oBAAoB,CAAC,CAAC;IACpD,MAAM,iBAAiB,GAAG,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,OAAO,EAAE,CAAC;IAEpF,OAAO,~~CACL,mCAAS,KAAK,EAAE,SAAS,EAAC,oBAAoB,YAC3C,~~iBAAiB~~,~~GACd~~,CACP,CAAC;AACJ,CAAC;AAED,~~sBAAsB~~,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { ~~Children, type~~ ForwardedRef, ~~type~~ ReactNode } from 'react';\nimport {\n Dialog as RACDialog,\n DialogTrigger as RACDialogTrigger,\n Heading as RACHeading,\n Modal as RACModal,\n ModalOverlay as RACModalOverlay,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { ~~useMediaQuery } from '../../utils/use-media-query.js';\nimport {~~ useProductionWarning } from '../../utils/use-production-warning.js';\nimport { ~~FocusableContainer } from '../internal/focusable-container/focusable-container.js';\nimport {~~ XButton } from '../internal/x-button/x-button.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface ~~UNSTABLE_DrawerRootProps~~ {\n /** The drawer trigger with its associated drawer. Provide the trigger as the first child, and the drawer as the second child. /\n children: ReactNode;\n /* Whether the drawer is open (controlled). /\n isOpen?: boolean;\n /* Whether the drawer is open by default (uncontrolled). /\n defaultOpen?: boolean;\n /* Handler that is called when the drawer's open state changes. /\n onOpenChange?: (isOpen: boolean) => void;\n}\n\n/\n Encapsulates a drawer trigger and its associated drawer.\n * The trigger can be any Cimpress UI button, and the drawer will be displayed when the trigger is activated.\n /\nexport function ~~UNSTABLE_DrawerRoot~~(props: ~~UNSTABLE_DrawerRootProps~~) {\n return <RACDialogTrigger {...props} />;\n}\n\~~nUNSTABLE_DrawerRoot~~.displayName = 'DrawerRoot';\n\nexport interface ~~UNSTABLE_DrawerRenderProps~~ {\n /* Closes the drawer when called. /\n close: () => void;\n}\n\nexport interface ~~UNSTABLE_DrawerProps~~ extends CommonProps, AriaLabelingProps {\n /* The contents of the drawer. A function may be provided to access a function to close the drawer. /\n children: ReactNode \| ((renderProps: ~~UNSTABLE_DrawerRenderProps~~) => ReactNode);\n /* The title of the drawer. /\n title?: string;\n /\n The size of the drawer. This prop is ignored on small devices - drawers on small devices will always take up all available width.\n * @default '~~medium~~'\n /\n size?: 'small' \| 'medium' \| 'large';\n /\n Whether ~~to close~~ the drawer ~~when~~ the ~~user~~ ~~interacts~~ outside of it or ~~presses~~ the Escape key.\n * @default true\n /\n isDismissible?: boolean;\n /\n Whether the drawer is open (controlled).\n * If using `DrawerRoot`, this prop has no effect - provide `isOpen` to `DrawerRoot` instead.\n /\n isOpen?: boolean;\n /\n Whether the drawer is open by default (uncontrolled).\n * If using `DrawerRoot`, this prop has no effect - provide `defaultOpen` to `DrawerRoot` instead.\n /\n defaultOpen?: boolean;\n /\n Handler that is called when the drawer's open state changes.\n * If using `DrawerRoot`, this prop has no effect - provide `onOpenChange` to `DrawerRoot` instead.\n /\n onOpenChange?: (isOpen: boolean) => void;\n}\n\nfunction ~~UNSTABLE_Drawer~~(\n {\n children,\n title,\n size = '~~medium~~',\n UNSAFE_className,\n UNSAFE_style,\n isDismissible = true,\n isOpen,\n defaultOpen,\n onOpenChange,\n ...props\n }: ~~UNSTABLE_DrawerProps~~,\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('Drawer requires one of title / aria-label / aria-labelledby for accessibility');\n }\n }, [title, ariaLabel, ariaLabelledBy]);\n\n const messages = useLocalizedMessages('common');\n\n return (\n <RACModalOverlay\n className=\"cim-drawer-overlay\"\n isDismissable={isDismissible}\n isKeyboardDismissDisabled={!isDismissible}\n isOpen={isOpen}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n data-cim-style-root\n >\n <RACModal className={clsx('cim-drawer', UNSAFE_className)} style={UNSAFE_style} data-size={size}>\n <RACDialog {...props} ref={ref} className=\"cim-drawer-dialog\">\n {(renderProps) => (\n <>\n <div className=\"cim-drawer-header\">\n {title && (\n <RACHeading\n slot=\"title\"\n className={clsx('cim-drawer-title', textStyle({ variant: 'title-5', tone: 'base' }))}\n >\n {title}\n </RACHeading>\n )}\n <XButton aria-label={messages.format('dismiss')} slot=\"close\" ~~/>\~~n </div>\n {typeof children === 'function' ? children(renderProps) : children}\n </>\n )}\n </RACDialog>\n </RACModal>\n </RACModalOverlay>\n );\n}\n\n/\n Displays an overlay element which blocks interaction with outside elements.\n \n See [drawer usage guidelines](https://ui.cimpress.io/components/drawer/).\n /\nconst ~~_UNSTABLE_Drawer~~ = forwardRef(~~UNSTABLE_Drawer~~, 'Drawer');\n\nexport { ~~_UNSTABLE_Drawer~~ as ~~UNSTABLE_Drawer~~ };\n\nexport interface ~~UNSTABLE_DrawerBodyProps~~ {\n /* The content to render within the drawer. /\n children: ReactNode;\n}\n\n/* Renders content within `Drawer`. /\nexport function ~~UNSTABLE_DrawerBody~~(props: ~~UNSTABLE_DrawerBodyProps~~) {\n return <~~FocusableContainer~~ {...props} className=\"cim-drawer-body\" ~~scrollDirection=\"vertical\"~~ />;\n}\n\~~nUNSTABLE_DrawerBody~~.displayName = 'DrawerBody';\n\nexport interface ~~UNSTABLE_DrawerActionsProps~~ {\n /* Actions that should be available in the drawer. /\n children: ReactNode;\n}\n\n/* Renders actions within `Drawer`. */\nexport function ~~UNSTABLE_DrawerActions~~({ children, ...props }: ~~UNSTABLE_DrawerActionsProps~~) {\n ~~const matches = useMediaQuery('(min-width: 640px)');\n const componentChildren = matches ? children : Children.toArray(children).reverse();\n\n~~ return (\n <div {...props} className=\"cim-drawer-actions\">\n {~~componentChildren~~}\n </div>\n );\n}\n\~~nUNSTABLE_DrawerActions~~.displayName = 'DrawerActions';\n"]}
1	+ {"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;AAiCb,gCAEC;AAoHD,gCAEC;AAUD,sCAMC;;AAvKD,gDAAwB;AAExB,iEAM+B;AAC/B,yDAAkD;AAClD,kDAA2D;AAC3D,qFAA6E;AAC7E,kEAA2D;AAE3D,qDAAmD;AAanD;;;GAGG;AACH,SAAgB,UAAU,CAAC,KAAsB;IAC/C,OAAO,uBAAC,qCAAgB,OAAK,KAAK,GAAI,CAAC;AACzC,CAAC;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAwCtC,SAAS,MAAM,CACb,EACE,QAAQ,EACR,KAAK,EACL,IAAI,GAAG,OAAO,EACd,gBAAgB,EAChB,YAAY,EACZ,aAAa,GAAG,IAAI,EACpB,MAAM,EACN,WAAW,EACX,YAAY,EACZ,GAAG,KAAK,EACI,EACd,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,+EAA+E,CAAC,CAAC;QAChG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,MAAM,QAAQ,GAAG,IAAA,+BAAoB,EAAC,QAAQ,CAAC,CAAC;IAEhD,OAAO,CACL,uBAAC,oCAAe,IACd,SAAS,EAAC,oBAAoB,EAC9B,aAAa,EAAE,aAAa,EAC5B,yBAAyB,EAAE,CAAC,aAAa,EACzC,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,yCAG1B,uBAAC,6BAAQ,IAAC,SAAS,EAAE,IAAA,cAAI,EAAC,YAAY,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,eAAa,IAAI,YAC7F,uBAAC,8BAAS,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,mBAAmB,YAC1D,CAAC,WAAW,EAAE,EAAE,CAAC,CAChB,6DACE,iCAAK,SAAS,EAAC,mBAAmB,aAC/B,KAAK,IAAI,CACR,uBAAC,+BAAU,IACT,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,IAAA,cAAI,EAAC,kBAAkB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,YAEnF,KAAK,GACK,CACd,EACA,aAAa,IAAI,uBAAC,qBAAO,kBAAa,QAAQ,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,IAAI,EAAC,OAAO,GAAG,IAC9E,EACL,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,QAAQ,IACjE,CACJ,GACS,GACH,GACK,CACnB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,OAAO,GAAG,IAAA,2BAAU,EAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;AAEzB,yBAAM;AAO1B,uCAAuC;AACvC,SAAgB,UAAU,CAAC,KAAsB;IAC/C,OAAO,mCAAS,KAAK,EAAE,SAAS,EAAC,iBAAiB,GAAG,CAAC;AACxD,CAAC;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAOtC,uCAAuC;AACvC,SAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAsB;IACtE,OAAO,CACL,mCAAS,KAAK,EAAE,SAAS,EAAC,oBAAoB,YAC3C,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport {\n Dialog as RACDialog,\n DialogTrigger as RACDialogTrigger,\n Heading as RACHeading,\n Modal as RACModal,\n ModalOverlay as RACModalOverlay,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { XButton } from '../internal/x-button/x-button.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface DrawerRootProps {\n /** The drawer trigger with its associated drawer. Provide the trigger as the first child, and the drawer as the second child. /\n children: ReactNode;\n /* Whether the drawer is open (controlled). /\n isOpen?: boolean;\n /* Whether the drawer is open by default (uncontrolled). /\n defaultOpen?: boolean;\n /* Handler that is called when the drawer's open state changes. /\n onOpenChange?: (isOpen: boolean) => void;\n}\n\n/\n Encapsulates a drawer trigger and its associated drawer.\n * The trigger can be any Cimpress UI button, and the drawer will be displayed when the trigger is activated.\n /\nexport function DrawerRoot(props: DrawerRootProps) {\n return <RACDialogTrigger {...props} />;\n}\n\nDrawerRoot.displayName = 'DrawerRoot';\n\nexport interface DrawerRenderProps {\n /* Closes the drawer when called. /\n close: () => void;\n}\n\nexport interface DrawerProps extends CommonProps, AriaLabelingProps {\n /* The contents of the drawer. A function may be provided to access a function to close the drawer. /\n children: ReactNode \| ((renderProps: DrawerRenderProps) => ReactNode);\n /* The title of the drawer. /\n title: string;\n /\n The size of the drawer. This prop is ignored on small devices - drawers on small devices will always take up all available width.\n * @default 'small'\n /\n size?: 'small' \| 'medium' \| 'large';\n /\n Whether the drawer can be closed by clicking the close button, clicking outside of the drawer, or pressing the Escape key.\n * When `false`, the drawer can only be closed programmatically.\n * @default true\n /\n isDismissible?: boolean;\n /\n Whether the drawer is open (controlled).\n * If using `DrawerRoot`, this prop has no effect - provide `isOpen` to `DrawerRoot` instead.\n /\n isOpen?: boolean;\n /\n Whether the drawer is open by default (uncontrolled).\n * If using `DrawerRoot`, this prop has no effect - provide `defaultOpen` to `DrawerRoot` instead.\n /\n defaultOpen?: boolean;\n /\n Handler that is called when the drawer's open state changes.\n * If using `DrawerRoot`, this prop has no effect - provide `onOpenChange` to `DrawerRoot` instead.\n /\n onOpenChange?: (isOpen: boolean) => void;\n}\n\nfunction Drawer(\n {\n children,\n title,\n size = 'small',\n UNSAFE_className,\n UNSAFE_style,\n isDismissible = true,\n isOpen,\n defaultOpen,\n onOpenChange,\n ...props\n }: DrawerProps,\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('Drawer requires one of title / aria-label / aria-labelledby for accessibility');\n }\n }, [title, ariaLabel, ariaLabelledBy]);\n\n const messages = useLocalizedMessages('common');\n\n return (\n <RACModalOverlay\n className=\"cim-drawer-overlay\"\n isDismissable={isDismissible}\n isKeyboardDismissDisabled={!isDismissible}\n isOpen={isOpen}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n data-cim-style-root\n >\n <RACModal className={clsx('cim-drawer', UNSAFE_className)} style={UNSAFE_style} data-size={size}>\n <RACDialog {...props} ref={ref} className=\"cim-drawer-dialog\">\n {(renderProps) => (\n <>\n <div className=\"cim-drawer-header\">\n {title && (\n <RACHeading\n slot=\"title\"\n className={clsx('cim-drawer-title', textStyle({ variant: 'title-5', tone: 'base' }))}\n >\n {title}\n </RACHeading>\n )}\n {isDismissible && <XButton aria-label={messages.format('dismiss')} slot=\"close\" />}\n </div>\n {typeof children === 'function' ? children(renderProps) : children}\n </>\n )}\n </RACDialog>\n </RACModal>\n </RACModalOverlay>\n );\n}\n\n/\n Displays an overlay element which blocks interaction with outside elements.\n \n See [drawer usage guidelines](https://ui.cimpress.io/components/drawer/).\n /\nconst _Drawer = forwardRef(Drawer, 'Drawer');\n\nexport { _Drawer as Drawer };\n\nexport interface DrawerBodyProps {\n /* The content to render within the drawer. /\n children: ReactNode;\n}\n\n/* Renders content within `Drawer`. /\nexport function DrawerBody(props: DrawerBodyProps) {\n return <div {...props} className=\"cim-drawer-body\" />;\n}\n\nDrawerBody.displayName = 'DrawerBody';\n\nexport interface DrawerActionsProps {\n /* Actions that should be available in the drawer. /\n children: ReactNode;\n}\n\n/* Renders actions within `Drawer`. */\nexport function DrawerActions({ children, ...props }: DrawerActionsProps) {\n return (\n <div {...props} className=\"cim-drawer-actions\">\n {children}\n </div>\n );\n}\n\nDrawerActions.displayName = 'DrawerActions';\n"]}

package/dist/commonjs/components/file-picker/file-picker.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"file-picker.d.ts","sourceRoot":"","sources":["../../../../src/components/file-picker/file-picker.tsx"],"names":[],"mappings":"AAKA,OAAO,EAGL,KAAK,gBAAgB,IAAI,mBAAmB,EAI7C,MAAM,uBAAuB,CAAC;AAM/B,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAI3D,MAAM,WAAW,wBACf,SAAQ,WAAW,EACjB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,EAAE,YAAY,CAAC,EACtC,IAAI,CAAC,mBAAmB,EAAE,mBAAmB,GAAG,gBAAgB,GAAG,iBAAiB,GAAG,eAAe,CAAC;IACzG,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oCAAoC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mDAAmD;IACnD,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,8CAA8C;IAC9C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3C;~~AAmID~~,QAAA,MAAM,oBAAoB,0KAAgE,CAAC;AAE3F,OAAO,EAAE,oBAAoB,IAAI,mBAAmB,EAAE,CAAC"}
1	+ {"version":3,"file":"file-picker.d.ts","sourceRoot":"","sources":["../../../../src/components/file-picker/file-picker.tsx"],"names":[],"mappings":"AAKA,OAAO,EAGL,KAAK,gBAAgB,IAAI,mBAAmB,EAI7C,MAAM,uBAAuB,CAAC;AAM/B,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAI3D,MAAM,WAAW,wBACf,SAAQ,WAAW,EACjB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,EAAE,YAAY,CAAC,EACtC,IAAI,CAAC,mBAAmB,EAAE,mBAAmB,GAAG,gBAAgB,GAAG,iBAAiB,GAAG,eAAe,CAAC;IACzG,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oCAAoC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mDAAmD;IACnD,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,8CAA8C;IAC9C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3C;AAqID,QAAA,MAAM,oBAAoB,0KAAgE,CAAC;AAE3F,OAAO,EAAE,oBAAoB,IAAI,mBAAmB,EAAE,CAAC"}