npm - @cimpress-ui/react - Versions diffs - 1.7.0 → 1.8.0 - Mend

@cimpress-ui/react 1.7.0 → 1.8.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 (186) hide show

package/dist/commonjs/components/app-header/side-nav.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import type { Href } from '../types.js';
+import type { Href, StringLikeChildren } from '../types.js';
 export interface UNSTABLE_SideNavProps {
     children: ReactNode;
     isOpen?: boolean;
@@ -18,17 +18,16 @@ export interface UNSTABLE_SideNavListProps {
     children: ReactNode;
 }
 export declare function UNSTABLE_SideNavList({ children }: UNSTABLE_SideNavListProps): import("react/jsx-runtime").JSX.Element;
-interface UNSTABLE_SideNavListItem {
-    label: string;
+export interface UNSTABLE_SideNavListItemProps {
+    children: StringLikeChildren;
     href: Href;
     isActive?: boolean;
     icon?: ReactNode;
 }
-export declare function UNSTABLE_SideNavListItem({ label, href, isActive, icon }: UNSTABLE_SideNavListItem): import("react/jsx-runtime").JSX.Element;
+export declare function UNSTABLE_SideNavListItem({ children, href, isActive, icon }: UNSTABLE_SideNavListItemProps): import("react/jsx-runtime").JSX.Element;
 export interface UNSTABLE_SideNavListSectionProps {
     children: ReactNode;
     label?: string;
 }
 export declare function UNSTABLE_SideNavListSection({ children, label }: UNSTABLE_SideNavListSectionProps): import("react/jsx-runtime").JSX.Element;
-export {};
 //# sourceMappingURL=side-nav.d.ts.map

package/dist/commonjs/components/app-header/side-nav.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"side-nav.d.ts","sourceRoot":"","sources":["../../../../src/components/app-header/side-nav.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;~~AAQlE~~,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;~~AAKxC~~,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAC/B;AAED,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,OAAiB,EAAE,EAAE,qBAAqB,2CA6B5G;AAED,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,EAAE,yBAAyB,2CAE3E;AAED,~~UAAU~~,~~wBAAwB~~;~~IAChC~~,~~KAAK~~,EAAE,~~MAAM~~,CAAC;~~IACd~~,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,wBAAgB,wBAAwB,CAAC,EAAE,~~KAAK~~,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,~~wBAAwB~~,~~2CAajG~~;AAED,MAAM,WAAW,gCAAgC;IAC/C,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,2BAA2B,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,gCAAgC,2CAehG"}
1	+ {"version":3,"file":"side-nav.d.ts","sourceRoot":"","sources":["../../../../src/components/app-header/side-nav.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AASlE,OAAO,KAAK,EAAE,IAAI,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAK5D,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAC/B;AAED,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,OAAiB,EAAE,EAAE,qBAAqB,2CA6B5G;AAED,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,EAAE,yBAAyB,2CAE3E;AAED,MAAM,WAAW,6BAA6B;IAC5C,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,wBAAgB,wBAAwB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,6BAA6B,2CAazG;AAED,MAAM,WAAW,gCAAgC;IAC/C,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,2BAA2B,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,gCAAgC,2CAehG"}

package/dist/commonjs/components/app-header/side-nav.js CHANGED Viewed

@@ -9,6 +9,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_aria_components_1 = require("react-aria-components");
 const index_js_1 = require("../../icons/index.js");
+const string_like_children_to_string_js_1 = require("../../utils/string-like-children-to-string.js");
 const use_is_mobile_js_1 = require("../../utils/use-is-mobile.js");
 const icon_button_js_1 = require("../button/icon-button.js");
 const drawer_js_1 = require("../drawer/drawer.js");
@@ -24,9 +25,9 @@ function UNSTABLE_SideNav({ children, isOpen, onOpenChange, variant = 'fixed' })
 function UNSTABLE_SideNavList({ children }) {
     return (0, jsx_runtime_1.jsx)("div", { className: "cim-side-nav-list", children: children });
 }
-function UNSTABLE_SideNavListItem({ label, href, isActive, icon }) {
+function UNSTABLE_SideNavListItem({ children, href, isActive, icon }) {
     const { isOpen } = (0, react_1.useContext)(SideNavContext);
-    return ((0, jsx_runtime_1.jsx)(tooltip_js_1.Tooltip, { label: label, placement: "right", isDisabled: isOpen, children: (0, jsx_runtime_1.jsxs)(react_aria_components_1.Link, { href: href, className: "cim-side-nav-list-item", "data-active": isActive, "data-expanded": isOpen, children: [icon, (0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "span", variant: "medium", UNSAFE_className: "cim-side-nav-list-item-label", children: label })] }) }));
+    return ((0, jsx_runtime_1.jsx)(tooltip_js_1.Tooltip, { label: (0, string_like_children_to_string_js_1.stringLikeChildrenToString)(children), placement: "right", isDisabled: isOpen, children: (0, jsx_runtime_1.jsxs)(react_aria_components_1.Link, { href: href, className: "cim-side-nav-list-item", "data-active": isActive, "data-expanded": isOpen, children: [icon, (0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "span", variant: "medium", UNSAFE_className: "cim-side-nav-list-item-label", children: children })] }) }));
 }
 function UNSTABLE_SideNavListSection({ children, label }) {
     const { isOpen } = (0, react_1.useContext)(SideNavContext);

package/dist/commonjs/components/app-header/side-nav.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"side-nav.js","sourceRoot":"","sources":["../../../../src/components/app-header/side-nav.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;~~AA6Bb~~,4CA6BC;AAMD,oDAEC;AASD,4DAaC;AAOD,kEAeC;;~~AA5GD~~,iCAAkE;AAClE,iEAAwD;AACxD,mDAA2D;AAC3D,mEAA2D;AAC3D,6DAAsD;AACtD,mDAAyD;AACzD,mDAAsD;AACtD,sDAAgD;AAEhD,mDAA6C;AAE7C,MAAM,cAAc,GAAG,IAAA,qBAAa,EAAsB,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;AAgB7E,SAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,GAAG,OAAO,EAAyB;IAC3G,MAAM,QAAQ,GAAG,IAAA,8BAAW,GAAE,CAAC;IAE/B,MAAM,MAAM,GAAG,CAAC,QAAQ,IAAI,OAAO,KAAK,SAAS,CAAC,IAAI,CACpD,uBAAC,kBAAM,IAAC,kBAAkB,EAAC,OAAO,EAAC,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,YAAY,gBAAa,iBAAiB,YACzG,uBAAC,sBAAU,cAAE,QAAQ,GAAc,GAC5B,CACV,CAAC;IAEF,OAAO,CACL,wBAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,IAAI,KAAK,EAAE,aACxD,MAAM,EACN,OAAO,KAAK,OAAO,IAAI,CACtB,uBAAC,2BAAe,IAAC,IAAI,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,YAC5C,iCAAK,SAAS,EAAC,cAAc,mBAAgB,MAAM,aACjD,gCAAK,SAAS,EAAC,qBAAqB,YAClC,uBAAC,2BAAU,IACT,OAAO,EAAC,UAAU,EAClB,IAAI,EAAE,uBAAC,8BAAmB,IAAC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC,CAAC,CAAC,EAAE,GAAI,gBAC/E,gBAAgB,EAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,EAAE,CAAC,CAAC,MAAM,CAAC,GACtC,GACE,EACN,gCAAK,SAAS,EAAC,6BAA6B,YAAE,QAAQ,GAAO,IACzD,GACU,CACnB,IACuB,CAC3B,CAAC;AACJ,CAAC;AAMD,SAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAA6B;IAC1E,OAAO,gCAAK,SAAS,EAAC,mBAAmB,YAAE,QAAQ,GAAO,CAAC;AAC7D,CAAC;AASD,SAAgB,wBAAwB,CAAC,EAAE,~~KAAK~~,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,~~EAA4B~~;~~IAChG~~,MAAM,EAAE,MAAM,EAAE,GAAG,IAAA,kBAAU,EAAC,cAAc,CAAC,CAAC;IAE9C,OAAO,CACL,uBAAC,oBAAO,IAAC,KAAK,EAAE,~~KAAK~~,EAAE,SAAS,EAAC,OAAO,EAAC,UAAU,EAAE,MAAM,~~YACzD~~,wBAAC,4BAAO,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,wBAAwB,iBAAc,QAAQ,mBAAiB,MAAM,aACjG,IAAI,EACL,uBAAC,cAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,EAAC,gBAAgB,EAAC,8BAA8B,YAC7E,~~KAAK~~,~~GACD~~,IACC,GACF,CACX,CAAC;AACJ,CAAC;AAOD,SAAgB,2BAA2B,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAoC;IAC/F,MAAM,EAAE,MAAM,EAAE,GAAG,IAAA,kBAAU,EAAC,cAAc,CAAC,CAAC;IAE9C,OAAO,CACL,iCAAK,SAAS,EAAC,2BAA2B,mBAAgB,MAAM,aAC7D,KAAK,IAAI,CACR,gCAAK,SAAS,EAAC,kCAAkC,YAC/C,uBAAC,cAAI,IAAC,EAAE,EAAC,GAAG,EAAC,OAAO,EAAC,gBAAgB,EAAC,IAAI,EAAC,QAAQ,EAAC,gBAAgB,EAAC,wCAAwC,YAC1G,KAAK,GACD,GACH,CACP,EACA,QAAQ,IACL,CACP,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\nimport { createContext, useContext, type ReactNode } from 'react';\nimport { Link as RACLink } from 'react-aria-components';\nimport { UNSTABLE_IconExpand } from '../../icons/index.js';\nimport { useIsMobile } from '../../utils/use-is-mobile.js';\nimport { IconButton } from '../button/icon-button.js';\nimport { Drawer, DrawerBody } from '../drawer/drawer.js';\nimport { UNSTABLE_Hidden } from '../hidden/hidden.js';\nimport { Tooltip } from '../tooltip/tooltip.js';\nimport type { Href } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nconst SideNavContext = createContext<{ isOpen: boolean }>({ isOpen: false });\n\nexport interface UNSTABLE_SideNavProps {\n children: ReactNode;\n isOpen?: boolean;\n onOpenChange?: (isOpen: boolean) => void;\n /*\n Determines how the side nav is displayed and behaves.\n * - `overlay`: The side nav slides in as an overlay on top of the main content. This is used when all available screen space is needed for the main content.\n * - `fixed`: The side nav is fixed to the side and includes an expand button to toggle between a compact icon-only view and an expanded view showing labels. On smaller screens, it slides in as an overlay.\n \n @default 'fixed'\n */\n variant?: 'overlay' \| 'fixed';\n}\n\nexport function UNSTABLE_SideNav({ children, isOpen, onOpenChange, variant = 'fixed' }: UNSTABLE_SideNavProps) {\n const isMobile = useIsMobile();\n\n const drawer = (isMobile \|\| variant === 'overlay') && (\n <Drawer UNSTABLE_placement=\"start\" isOpen={isOpen} onOpenChange={onOpenChange} aria-label=\"Side navigation\">\n <DrawerBody>{children}</DrawerBody>\n </Drawer>\n );\n\n return (\n <SideNavContext.Provider value={{ isOpen: isOpen ?? false }}>\n {drawer}\n {variant === 'fixed' && (\n <UNSTABLE_Hidden hide={{ sm: true, md: false }}>\n <div className=\"cim-side-nav\" data-expanded={isOpen}>\n <div className=\"cim-side-nav-header\">\n <IconButton\n variant=\"tertiary\"\n icon={<UNSTABLE_IconExpand UNSAFE_style={isOpen ? { transform: 'rotate(180deg)' } : {}} />}\n aria-label=\"Expand sidebar\"\n onPress={() => onOpenChange?.(!isOpen)}\n />\n </div>\n <div className=\"cim-side-nav-list-container\">{children}</div>\n </div>\n </UNSTABLE_Hidden>\n )}\n </SideNavContext.Provider>\n );\n}\n\nexport interface UNSTABLE_SideNavListProps {\n children: ReactNode;\n}\n\nexport function UNSTABLE_SideNavList({ children }: UNSTABLE_SideNavListProps) {\n return <div className=\"cim-side-nav-list\">{children}</div>;\n}\n\~~ninterface~~ ~~UNSTABLE_SideNavListItem~~ {\n ~~label~~: ~~string~~;\n href: Href;\n isActive?: boolean;\n icon?: ReactNode;\n}\n\nexport function UNSTABLE_SideNavListItem({ ~~label~~, href, isActive, icon }: ~~UNSTABLE_SideNavListItem~~) {\n const { isOpen } = useContext(SideNavContext);\n\n return (\n <Tooltip label={~~label~~} placement=\"right\" isDisabled={isOpen}>\n <RACLink href={href} className=\"cim-side-nav-list-item\" data-active={isActive} data-expanded={isOpen}>\n {icon}\n <Text as=\"span\" variant=\"medium\" UNSAFE_className=\"cim-side-nav-list-item-label\">\n {~~label~~}\n </Text>\n </RACLink>\n </Tooltip>\n );\n}\n\nexport interface UNSTABLE_SideNavListSectionProps {\n children: ReactNode;\n label?: string;\n}\n\nexport function UNSTABLE_SideNavListSection({ children, label }: UNSTABLE_SideNavListSectionProps) {\n const { isOpen } = useContext(SideNavContext);\n\n return (\n <div className=\"cim-side-nav-list-section\" data-expanded={isOpen}>\n {label && (\n <div className=\"cim-side-nav-list-section-header\">\n <Text as=\"p\" variant=\"small-semibold\" tone=\"subtle\" UNSAFE_className=\"cim-side-nav-list-section-header-label\">\n {label}\n </Text>\n </div>\n )}\n {children}\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"side-nav.js","sourceRoot":"","sources":["../../../../src/components/app-header/side-nav.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { createContext, useContext, type ReactNode } from 'react';\nimport { Link as RACLink } from 'react-aria-components';\nimport { UNSTABLE_IconExpand } from '../../icons/index.js';\nimport { stringLikeChildrenToString } from '../../utils/string-like-children-to-string.js';\nimport { useIsMobile } from '../../utils/use-is-mobile.js';\nimport { IconButton } from '../button/icon-button.js';\nimport { Drawer, DrawerBody } from '../drawer/drawer.js';\nimport { UNSTABLE_Hidden } from '../hidden/hidden.js';\nimport { Tooltip } from '../tooltip/tooltip.js';\nimport type { Href, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nconst SideNavContext = createContext<{ isOpen: boolean }>({ isOpen: false });\n\nexport interface UNSTABLE_SideNavProps {\n children: ReactNode;\n isOpen?: boolean;\n onOpenChange?: (isOpen: boolean) => void;\n /*\n Determines how the side nav is displayed and behaves.\n * - `overlay`: The side nav slides in as an overlay on top of the main content. This is used when all available screen space is needed for the main content.\n * - `fixed`: The side nav is fixed to the side and includes an expand button to toggle between a compact icon-only view and an expanded view showing labels. On smaller screens, it slides in as an overlay.\n \n @default 'fixed'\n */\n variant?: 'overlay' \| 'fixed';\n}\n\nexport function UNSTABLE_SideNav({ children, isOpen, onOpenChange, variant = 'fixed' }: UNSTABLE_SideNavProps) {\n const isMobile = useIsMobile();\n\n const drawer = (isMobile \|\| variant === 'overlay') && (\n <Drawer UNSTABLE_placement=\"start\" isOpen={isOpen} onOpenChange={onOpenChange} aria-label=\"Side navigation\">\n <DrawerBody>{children}</DrawerBody>\n </Drawer>\n );\n\n return (\n <SideNavContext.Provider value={{ isOpen: isOpen ?? false }}>\n {drawer}\n {variant === 'fixed' && (\n <UNSTABLE_Hidden hide={{ sm: true, md: false }}>\n <div className=\"cim-side-nav\" data-expanded={isOpen}>\n <div className=\"cim-side-nav-header\">\n <IconButton\n variant=\"tertiary\"\n icon={<UNSTABLE_IconExpand UNSAFE_style={isOpen ? { transform: 'rotate(180deg)' } : {}} />}\n aria-label=\"Expand sidebar\"\n onPress={() => onOpenChange?.(!isOpen)}\n />\n </div>\n <div className=\"cim-side-nav-list-container\">{children}</div>\n </div>\n </UNSTABLE_Hidden>\n )}\n </SideNavContext.Provider>\n );\n}\n\nexport interface UNSTABLE_SideNavListProps {\n children: ReactNode;\n}\n\nexport function UNSTABLE_SideNavList({ children }: UNSTABLE_SideNavListProps) {\n return <div className=\"cim-side-nav-list\">{children}</div>;\n}\n\nexport interface UNSTABLE_SideNavListItemProps {\n children: StringLikeChildren;\n href: Href;\n isActive?: boolean;\n icon?: ReactNode;\n}\n\nexport function UNSTABLE_SideNavListItem({ children, href, isActive, icon }: UNSTABLE_SideNavListItemProps) {\n const { isOpen } = useContext(SideNavContext);\n\n return (\n <Tooltip label={stringLikeChildrenToString(children)} placement=\"right\" isDisabled={isOpen}>\n <RACLink href={href} className=\"cim-side-nav-list-item\" data-active={isActive} data-expanded={isOpen}>\n {icon}\n <Text as=\"span\" variant=\"medium\" UNSAFE_className=\"cim-side-nav-list-item-label\">\n {children}\n </Text>\n </RACLink>\n </Tooltip>\n );\n}\n\nexport interface UNSTABLE_SideNavListSectionProps {\n children: ReactNode;\n label?: string;\n}\n\nexport function UNSTABLE_SideNavListSection({ children, label }: UNSTABLE_SideNavListSectionProps) {\n const { isOpen } = useContext(SideNavContext);\n\n return (\n <div className=\"cim-side-nav-list-section\" data-expanded={isOpen}>\n {label && (\n <div className=\"cim-side-nav-list-section-header\">\n <Text as=\"p\" variant=\"small-semibold\" tone=\"subtle\" UNSAFE_className=\"cim-side-nav-list-section-header-label\">\n {label}\n </Text>\n </div>\n )}\n {children}\n </div>\n );\n}\n"]}

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

@@ -1,5 +1,6 @@
-import { type ListBoxProps as RACListBoxProps, type ComboBoxProps as RACComboBoxProps, type ListBoxItemProps as RACListBoxItemProps } from 'react-aria-components';
-import type { AsyncItemLoadingProps, CollectionItem, CollectionProps, CommonProps, FieldWithPlaceholderProps, Key, StringLikeChildren } from '../types.js';
+import { type UIEventHandler } from 'react';
+import { type ComboBoxProps as RACComboBoxProps, type ListBoxItemProps as RACListBoxItemProps } from 'react-aria-components';
+import type { ApiProps, 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,12 +8,21 @@ export interface ComboBoxValidationValue {
     /** The value of the ComboBox input. */
     inputValue: string;
 }
-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'> {
+export interface ComboBoxProps<T extends CollectionItem = CollectionItem> extends CommonProps, FieldWithPlaceholderProps<ComboBoxValidationValue>, CollectionProps<T>, AsyncItemLoadingProps, ApiProps<ComboBoxApi>, Pick<RACComboBoxProps<T>, 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'selectedKey' | 'defaultSelectedKey' | 'inputValue' | 'defaultInputValue' | 'autoFocus' | 'onSelectionChange' | 'onInputChange' | 'onFocus' | 'onBlur' | 'onOpenChange'> {
     /**
      * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.
      * @default false
      */
     isVirtualized?: boolean;
+    /** Handler that is called when the list of items is scrolled. */
+    onScroll?: UIEventHandler<HTMLDivElement>;
+}
+/** The imperative API exposed by the `ComboBox` component. */
+export interface ComboBoxApi {
+    /** Focuses the input field and opens the list of items. */
+    focus: () => void;
+    /** Selects the contents of the input field. */
+    select: () => void;
 }
 /**
  * Allows users to filter a collapsible list and select one item from it.
@@ -21,7 +31,9 @@ export interface ComboBoxProps<T extends CollectionItem = CollectionItem> extend
  */
 declare const _ComboBox: <T extends CollectionItem>(props: ComboBoxProps<T> & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
 export { _ComboBox as ComboBox };
-export interface ComboBoxItemProps<T extends CollectionItem> extends Pick<RACListBoxItemProps<T>, 'id' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {
+export interface ComboBoxItemProps<T extends CollectionItem> extends Pick<RACListBoxItemProps<T>, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {
+    /** The ID of the item. Has to be unique across all sections and items. */
+    id?: Key;
     /** The content to display as the label. */
     children: StringLikeChildren;
 }

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":"~~AAKA~~,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~~;~~AA4ED~~;;;;GAIG;AACH,QAAA,MAAM,SAAS,~~GA/EG~~,CAAC,SAAS,cAAc,~~iKA+EwB~~,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC;~~AAqDjC~~,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":"AAGA,OAAO,EAGL,KAAK,cAAc,EAIpB,MAAM,OAAO,CAAC;AAEf,OAAO,EAeL,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,gBAAgB,IAAI,mBAAmB,EAE7C,MAAM,uBAAuB,CAAC;AAU/B,OAAO,KAAK,EACV,QAAQ,EACR,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,QAAQ,CAAC,WAAW,CAAC,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;IACH;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC3C;AAED,8DAA8D;AAC9D,MAAM,WAAW,WAAW;IAC1B,2DAA2D;IAC3D,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,+CAA+C;IAC/C,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAwFD;;;;GAIG;AACH,QAAA,MAAM,SAAS,GA3FG,CAAC,SAAS,cAAc,iKA2FwB,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC;AAwDjC,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,cAAc,CACzD,SAAQ,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;IAClF,0EAA0E;IAC1E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;CAC9B;AAED,oDAAoD;AACpD,wBAAgB,YAAY,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CAiBlG;yBAjBe,YAAY;;;AAqB5B,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACxF,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,0DAA0D;AAC1D,wBAAgB,eAAe,CAAC,CAAC,SAAS,cAAc,EAAE,EACxD,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAezB;yBApBe,eAAe"}

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

@@ -29,7 +29,8 @@ const VIRTUAL_LAYOUT_OPTIONS = {
     padding: 0,
     gap: 0,
 };
-function ComboBox({ label, description, error, items, children, placeholder, UNSAFE_className, UNSAFE_style, isReadOnly, onScroll, isVirtualized = false, UNSTABLE_isLoading: isLoading, UNSTABLE_onLoadMore: onLoadMore, ...props }, ref) {
+function ComboBox({ label, description, error, items, children, placeholder, UNSAFE_className, UNSAFE_style, isReadOnly, onScroll, isVirtualized = false, UNSTABLE_isLoading: isLoading, UNSTABLE_onLoadMore: onLoadMore, apiRef, ...props }, ref) {
+    const inputRef = (0, react_1.useRef)(null);
     const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
     (0, use_production_warning_js_1.useProductionWarning)(() => {
         if (!label && !ariaLabel && !ariaLabelledBy) {
@@ -39,8 +40,12 @@ 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');
     }
+    (0, react_1.useImperativeHandle)(apiRef, () => ({
+        focus: () => inputRef.current?.focus(),
+        select: () => inputRef.current?.select(),
+    }), []);
     const listBox = ((0, jsx_runtime_1.jsx)(ComboBoxList, { items: items, isLoading: isLoading, onLoadMore: onLoadMore, onScroll: onScroll, 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_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) })] }));
+    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, { inputRef: inputRef, 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.
@@ -49,9 +54,9 @@ function ComboBox({ label, description, error, items, children, placeholder, UNS
  */
 const _ComboBox = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(ComboBox), 'ComboBox');
 exports.ComboBox = _ComboBox;
-function ComboBoxInput({ isReadOnly, placeholder, }) {
+function ComboBoxInput({ inputRef, isReadOnly, placeholder, }) {
     const comboBoxState = (0, react_1.useContext)(react_aria_components_1.ComboBoxStateContext);
-    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Input, { className: (0, clsx_1.default)('cim-combo-box-input', (0, utils_js_1.textStyle)({ variant: 'body' })),
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Input, { ref: inputRef, className: (0, clsx_1.default)('cim-combo-box-input', (0, utils_js_1.textStyle)({ variant: 'body' })),
         // Ensure the popover opens when the input is clicked.
         // By default, React Aria only opens the popover when the input is focused.
         onClick: () => !isReadOnly && comboBoxState.open(), placeholder: placeholder }));

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 { usePreventScroll } from 'react-aria';\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 listBox = (\n <ComboBoxList<T> items={items} isLoading={isLoading} onLoadMore={onLoadMore} onScroll={onScroll}>\n {children}\n </ComboBoxList>\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.io/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\nfunction ComboBoxList<T extends CollectionItem = CollectionItem>({\n items,\n children,\n isLoading,\n onLoadMore,\n onScroll,\n}: Pick<ComboBoxProps<T>, 'items' \| 'children' \| 'onScroll'> & {\n isLoading: ComboBoxProps['UNSTABLE_isLoading'];\n onLoadMore: ComboBoxProps['UNSTABLE_onLoadMore'];\n}) {\n const comboBoxState = useContext(RACComboBoxStateContext);\n const collectionMessages = useLocalizedMessages('UNSTABLE_collection');\n\n usePreventScroll({ isDisabled: !comboBoxState?.isOpen });\n\n return (\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\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":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n type ForwardedRef,\n type MutableRefObject,\n type UIEventHandler,\n useContext,\n useImperativeHandle,\n useRef,\n} from 'react';\nimport { usePreventScroll } from 'react-aria';\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 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 ApiProps,\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 ApiProps<ComboBoxApi>,\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 /\n Whether the list of options should be virtualized. Use this as a performance optimization for large lists.\n * @default false\n /\n isVirtualized?: boolean;\n /* Handler that is called when the list of items is scrolled. /\n onScroll?: UIEventHandler<HTMLDivElement>;\n}\n\n/* The imperative API exposed by the `ComboBox` component. /\nexport interface ComboBoxApi {\n /* Focuses the input field and opens the list of items. /\n focus: () => void;\n /* Selects the contents of the input field. /\n select: () => void;\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 apiRef,\n ...props\n }: ComboBoxProps<T>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const inputRef = useRef<HTMLInputElement>(null);\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 useImperativeHandle(\n apiRef,\n () => ({\n focus: () => inputRef.current?.focus(),\n select: () => inputRef.current?.select(),\n }),\n [],\n );\n\n const listBox = (\n <ComboBoxList<T> items={items} isLoading={isLoading} onLoadMore={onLoadMore} onScroll={onScroll}>\n {children}\n </ComboBoxList>\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 inputRef={inputRef} 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.io/components/combo-box)\n /\nconst _ComboBox = withStyleProps(forwardRef(ComboBox), 'ComboBox');\n\nexport { _ComboBox as ComboBox };\n\nfunction ComboBoxInput({\n inputRef,\n isReadOnly,\n placeholder,\n}: {\n inputRef: MutableRefObject<HTMLInputElement \| null>;\n isReadOnly: boolean \| undefined;\n placeholder: string \| undefined;\n}) {\n const comboBoxState = useContext(RACComboBoxStateContext);\n\n return (\n <RACInput\n ref={inputRef}\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\nfunction ComboBoxList<T extends CollectionItem = CollectionItem>({\n items,\n children,\n isLoading,\n onLoadMore,\n onScroll,\n}: Pick<ComboBoxProps<T>, 'items' \| 'children' \| 'onScroll'> & {\n isLoading: ComboBoxProps['UNSTABLE_isLoading'];\n onLoadMore: ComboBoxProps['UNSTABLE_onLoadMore'];\n}) {\n const comboBoxState = useContext(RACComboBoxStateContext);\n const collectionMessages = useLocalizedMessages('UNSTABLE_collection');\n\n usePreventScroll({ isDisabled: !comboBoxState?.isOpen });\n\n return (\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\nexport interface ComboBoxItemProps<T extends CollectionItem>\n extends Pick<RACListBoxItemProps<T>, 'isDisabled' \| 'onHoverStart' \| 'onHoverEnd'> {\n /* The ID of the item. Has to be unique across all sections and items. /\n id?: Key;\n /* The content to display as the label. /\n children: StringLikeChildren;\n}\n\n/* Renders a single list item within `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/copy/copy-button.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import type { ActionButtonProps, BaseButtonProps } from '../button/types.js';
+import type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';
+export interface UNSTABLE_CopyButtonProps extends CommonProps, AriaLabelingProps, Pick<BaseButtonProps, 'size'>, Pick<ActionButtonProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {
+    /** The text displayed on the button. */
+    children?: StringLikeChildren;
+    /** The content to be copied. */
+    value: string;
+    /** A handler that gets called when the user triggers the copying. */
+    onCopy?: () => void;
+}
+declare const _UNSTABLE_CopyButton: (props: UNSTABLE_CopyButtonProps & import("react").RefAttributes<HTMLButtonElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _UNSTABLE_CopyButton as UNSTABLE_CopyButton };
+//# sourceMappingURL=copy-button.d.ts.map

package/dist/commonjs/components/copy/copy-button.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"copy-button.d.ts","sourceRoot":"","sources":["../../../../src/components/copy/copy-button.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE7E,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGtF,MAAM,WAAW,wBACf,SAAQ,WAAW,EACjB,iBAAiB,EACjB,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,EAC7B,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;IACvE,wCAAwC;IACxC,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AA0CD,QAAA,MAAM,oBAAoB,6KAAgE,CAAC;AAE3F,OAAO,EAAE,oBAAoB,IAAI,mBAAmB,EAAE,CAAC"}

package/dist/commonjs/components/copy/copy-button.js ADDED Viewed

@@ -0,0 +1,33 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UNSTABLE_CopyButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const forward_ref_js_1 = require("../../forward-ref.js");
+const index_js_1 = require("../../icons/index.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 button_js_1 = require("../button/button.js");
+const icon_button_js_1 = require("../button/icon-button.js");
+const tooltip_js_1 = require("../tooltip/tooltip.js");
+const use_copy_js_1 = require("./use-copy.js");
+function UNSTABLE_CopyButton({ UNSAFE_className, UNSAFE_style, children, value, onCopy, ...props }, ref) {
+    const [copyStatus, showCopyFeedback, copyToClipboard] = (0, use_copy_js_1.useCopyToClipboard)();
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+    (0, use_production_warning_js_1.useProductionWarning)(() => {
+        if (!children && !ariaLabel && !ariaLabelledBy) {
+            console.warn('CopyButton requires one of children / aria-label / aria-labelledby for accessibility');
+        }
+    }, [children, ariaLabel, ariaLabelledBy]);
+    const icon = showCopyFeedback ? (0, jsx_runtime_1.jsx)(index_js_1.IconCheckCircle, {}) : (0, jsx_runtime_1.jsx)(index_js_1.IconCopy, {});
+    const onPress = () => {
+        copyToClipboard(value);
+        onCopy?.();
+    };
+    return ((0, jsx_runtime_1.jsx)(tooltip_js_1.Tooltip, { isOpen: showCopyFeedback, isDisabled: props.isDisabled,
+        // TODO: i18n
+        label: copyStatus?.success ? 'Copied to clipboard.' : 'Failed to copy to clipboard.', placement: "top", children: children ? ((0, jsx_runtime_1.jsx)(button_js_1.Button, { ...props, ref: ref, iconEnd: icon, variant: "secondary", tone: "base", onPress: onPress, children: children })) : ((0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { ...props, ref: ref, icon: icon, "aria-label": ariaLabel ?? '', onPress: onPress })) }));
+}
+const _UNSTABLE_CopyButton = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(UNSTABLE_CopyButton), 'CopyButton');
+exports.UNSTABLE_CopyButton = _UNSTABLE_CopyButton;
+//# sourceMappingURL=copy-button.js.map

package/dist/commonjs/components/copy/copy-button.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"copy-button.js","sourceRoot":"","sources":["../../../../src/components/copy/copy-button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;AAGb,yDAAkD;AAClD,mDAAiE;AACjE,qFAA6E;AAC7E,mEAA2D;AAC3D,mDAA6C;AAC7C,6DAAsD;AAEtD,sDAAgD;AAEhD,+CAAmD;AAenD,SAAS,mBAAmB,CAC1B,EAAE,gBAAgB,EAAE,YAAY,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,EAA4B,EAC/F,GAAoC;IAEpC,MAAM,CAAC,UAAU,EAAE,gBAAgB,EAAE,eAAe,CAAC,GAAG,IAAA,gCAAkB,GAAE,CAAC;IAE7E,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,sFAAsF,CAAC,CAAC;QACvG,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAE1C,MAAM,IAAI,GAAG,gBAAgB,CAAC,CAAC,CAAC,uBAAC,0BAAe,KAAG,CAAC,CAAC,CAAC,uBAAC,mBAAQ,KAAG,CAAC;IAEnE,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,eAAe,CAAC,KAAK,CAAC,CAAC;QACvB,MAAM,EAAE,EAAE,CAAC;IACb,CAAC,CAAC;IAEF,OAAO,CACL,uBAAC,oBAAO,IACN,MAAM,EAAE,gBAAgB,EACxB,UAAU,EAAE,KAAK,CAAC,UAAU;QAC5B,aAAa;QACb,KAAK,EAAE,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,8BAA8B,EACpF,SAAS,EAAC,KAAK,YAEd,QAAQ,CAAC,CAAC,CAAC,CACV,uBAAC,kBAAM,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,OAAO,YACzF,QAAQ,GACF,CACV,CAAC,CAAC,CAAC,CACF,uBAAC,2BAAU,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,gBAAc,SAAS,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,GAAI,CAC/F,GACO,CACX,CAAC;AACJ,CAAC;AAED,MAAM,oBAAoB,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,mBAAmB,CAAC,EAAE,YAAY,CAAC,CAAC;AAE1D,mDAAmB","sourcesContent":["'use client';\n\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheckCircle, IconCopy } from '../../icons/index.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { Button } from '../button/button.js';\nimport { IconButton } from '../button/icon-button.js';\nimport type { ActionButtonProps, BaseButtonProps } from '../button/types.js';\nimport { Tooltip } from '../tooltip/tooltip.js';\nimport type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';\nimport { useCopyToClipboard } from './use-copy.js';\n\nexport interface UNSTABLE_CopyButtonProps\n extends CommonProps,\n AriaLabelingProps,\n Pick<BaseButtonProps, 'size'>,\n Pick<ActionButtonProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n /** The text displayed on the button. */\n children?: StringLikeChildren;\n /** The content to be copied. */\n value: string;\n /** A handler that gets called when the user triggers the copying. */\n onCopy?: () => void;\n}\n\nfunction UNSTABLE_CopyButton(\n { UNSAFE_className, UNSAFE_style, children, value, onCopy, ...props }: UNSTABLE_CopyButtonProps,\n ref: ForwardedRef<HTMLButtonElement>,\n) {\n const [copyStatus, showCopyFeedback, copyToClipboard] = useCopyToClipboard();\n\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!children && !ariaLabel && !ariaLabelledBy) {\n console.warn('CopyButton requires one of children / aria-label / aria-labelledby for accessibility');\n }\n }, [children, ariaLabel, ariaLabelledBy]);\n\n const icon = showCopyFeedback ? <IconCheckCircle /> : <IconCopy />;\n\n const onPress = () => {\n copyToClipboard(value);\n onCopy?.();\n };\n\n return (\n <Tooltip\n isOpen={showCopyFeedback}\n isDisabled={props.isDisabled}\n // TODO: i18n\n label={copyStatus?.success ? 'Copied to clipboard.' : 'Failed to copy to clipboard.'}\n placement=\"top\"\n >\n {children ? (\n <Button {...props} ref={ref} iconEnd={icon} variant=\"secondary\" tone=\"base\" onPress={onPress}>\n {children}\n </Button>\n ) : (\n <IconButton {...props} ref={ref} icon={icon} aria-label={ariaLabel ?? ''} onPress={onPress} />\n )}\n </Tooltip>\n );\n}\n\nconst _UNSTABLE_CopyButton = withStyleProps(forwardRef(UNSTABLE_CopyButton), 'CopyButton');\n\nexport { _UNSTABLE_CopyButton as UNSTABLE_CopyButton };\n"]}

package/dist/commonjs/components/copy/inline-copy.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import type { ActionButtonProps } from '../button/types.js';
+import type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';
+import type { TextStyleOptions } from '../typography/types.js';
+export interface UNSTABLE_InlineCopyProps extends CommonProps, AriaLabelingProps, Pick<TextStyleOptions, 'variant' | 'tone' | 'fontStyle'>, Pick<ActionButtonProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {
+    /** The content to be copied. */
+    children: StringLikeChildren;
+    /** A handler that gets called when the user triggers the copying. */
+    onCopy?: () => void;
+}
+declare const _UNSTABLE_InlineCopy: (props: UNSTABLE_InlineCopyProps & import("react").RefAttributes<HTMLButtonElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _UNSTABLE_InlineCopy as UNSTABLE_InlineCopy };
+//# sourceMappingURL=inline-copy.d.ts.map

package/dist/commonjs/components/copy/inline-copy.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"inline-copy.d.ts","sourceRoot":"","sources":["../../../../src/components/copy/inline-copy.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACtF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAO/D,MAAM,WAAW,wBACf,SAAQ,WAAW,EACjB,iBAAiB,EACjB,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,MAAM,GAAG,WAAW,CAAC,EACxD,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;IACvE,gCAAgC;IAChC,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAyCD,QAAA,MAAM,oBAAoB,6KAAgE,CAAC;AAE3F,OAAO,EAAE,oBAAoB,IAAI,mBAAmB,EAAE,CAAC"}

package/dist/commonjs/components/copy/inline-copy.js ADDED Viewed

@@ -0,0 +1,33 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UNSTABLE_InlineCopy = void 0;
+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("../../icons/index.js");
+const with_style_props_js_1 = require("../../with-style-props.js");
+const tooltip_js_1 = require("../tooltip/tooltip.js");
+const utils_js_1 = require("../typography/utils.js");
+const use_copy_js_1 = require("./use-copy.js");
+// Used to prevent word wrap between icons and text
+const WORD_JOINER = '\u2060';
+function UNSTABLE_InlineCopy({ children, UNSAFE_className, UNSAFE_style, variant, tone, fontStyle, onCopy, ...props }, ref) {
+    const tooltipTriggerRef = (0, react_1.useRef)(null);
+    const [copyStatus, showCopyFeedback, copyToClipboard] = (0, use_copy_js_1.useCopyToClipboard)();
+    const textValue = typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');
+    return ((0, jsx_runtime_1.jsx)(tooltip_js_1.Tooltip, { isOpen: showCopyFeedback, isDisabled: props.isDisabled,
+        // TODO: i18n
+        label: copyStatus?.success ? 'Copied to clipboard.' : 'Failed to copy to clipboard.', placement: "top", triggerRef: tooltipTriggerRef, children: (0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { ...props, ref: ref, className: (0, clsx_1.default)('cim-inline-copy', (0, utils_js_1.textStyle)({ variant, tone, fontStyle }), UNSAFE_className), style: UNSAFE_style, onPress: () => {
+                copyToClipboard(textValue);
+                onCopy?.();
+            }, children: [(0, jsx_runtime_1.jsx)("span", { className: "cim-inline-copy-text", children: children }), WORD_JOINER, (0, jsx_runtime_1.jsx)("span", { className: "cim-inline-copy-icon", ref: tooltipTriggerRef, children: showCopyFeedback ? (0, jsx_runtime_1.jsx)(index_js_1.IconCheckCircle, {}) : (0, jsx_runtime_1.jsx)(index_js_1.IconCopy, {}) })] }) }));
+}
+const _UNSTABLE_InlineCopy = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(UNSTABLE_InlineCopy), 'InlineCopy');
+exports.UNSTABLE_InlineCopy = _UNSTABLE_InlineCopy;
+//# sourceMappingURL=inline-copy.js.map

package/dist/commonjs/components/copy/inline-copy.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"inline-copy.js","sourceRoot":"","sources":["../../../../src/components/copy/inline-copy.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AACxB,iCAAkD;AAClD,iEAA4D;AAC5D,yDAAkD;AAClD,mDAAiE;AACjE,mEAA2D;AAE3D,sDAAgD;AAGhD,qDAAmD;AACnD,+CAAmD;AAEnD,mDAAmD;AACnD,MAAM,WAAW,GAAG,QAAQ,CAAC;AAa7B,SAAS,mBAAmB,CAC1B,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAA4B,EAClH,GAAoC;IAEpC,MAAM,iBAAiB,GAAG,IAAA,cAAM,EAAkB,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,UAAU,EAAE,gBAAgB,EAAE,eAAe,CAAC,GAAG,IAAA,gCAAkB,GAAE,CAAC;IAE7E,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,oBAAO,IACN,MAAM,EAAE,gBAAgB,EACxB,UAAU,EAAE,KAAK,CAAC,UAAU;QAC5B,aAAa;QACb,KAAK,EAAE,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,8BAA8B,EACpF,SAAS,EAAC,KAAK,EACf,UAAU,EAAE,iBAAiB,YAE7B,wBAAC,8BAAS,OACJ,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,iBAAiB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE,gBAAgB,CAAC,EAC7F,KAAK,EAAE,YAAY,EACnB,OAAO,EAAE,GAAG,EAAE;gBACZ,eAAe,CAAC,SAAS,CAAC,CAAC;gBAC3B,MAAM,EAAE,EAAE,CAAC;YACb,CAAC,aAED,iCAAM,SAAS,EAAC,sBAAsB,YAAE,QAAQ,GAAQ,EACvD,WAAW,EACZ,iCAAM,SAAS,EAAC,sBAAsB,EAAC,GAAG,EAAE,iBAAiB,YAC1D,gBAAgB,CAAC,CAAC,CAAC,uBAAC,0BAAe,KAAG,CAAC,CAAC,CAAC,uBAAC,mBAAQ,KAAG,GACjD,IACG,GACJ,CACX,CAAC;AACJ,CAAC;AAED,MAAM,oBAAoB,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,mBAAmB,CAAC,EAAE,YAAY,CAAC,CAAC;AAE1D,mDAAmB","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useRef, type ForwardedRef } from 'react';\nimport { Button as RACButton } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheckCircle, IconCopy } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { ActionButtonProps } from '../button/types.js';\nimport { Tooltip } from '../tooltip/tooltip.js';\nimport type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';\nimport type { TextStyleOptions } from '../typography/types.js';\nimport { textStyle } from '../typography/utils.js';\nimport { useCopyToClipboard } from './use-copy.js';\n\n// Used to prevent word wrap between icons and text\nconst WORD_JOINER = '\\u2060';\n\nexport interface UNSTABLE_InlineCopyProps\n extends CommonProps,\n AriaLabelingProps,\n Pick<TextStyleOptions, 'variant' | 'tone' | 'fontStyle'>,\n Pick<ActionButtonProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n /** The content to be copied. */\n children: StringLikeChildren;\n /** A handler that gets called when the user triggers the copying. */\n onCopy?: () => void;\n}\n\nfunction UNSTABLE_InlineCopy(\n { children, UNSAFE_className, UNSAFE_style, variant, tone, fontStyle, onCopy, ...props }: UNSTABLE_InlineCopyProps,\n ref: ForwardedRef<HTMLButtonElement>,\n) {\n const tooltipTriggerRef = useRef<HTMLSpanElement>(null);\n const [copyStatus, showCopyFeedback, copyToClipboard] = useCopyToClipboard();\n\n const textValue =\n typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n return (\n <Tooltip\n isOpen={showCopyFeedback}\n isDisabled={props.isDisabled}\n // TODO: i18n\n label={copyStatus?.success ? 'Copied to clipboard.' : 'Failed to copy to clipboard.'}\n placement=\"top\"\n triggerRef={tooltipTriggerRef}\n >\n <RACButton\n {...props}\n ref={ref}\n className={clsx('cim-inline-copy', textStyle({ variant, tone, fontStyle }), UNSAFE_className)}\n style={UNSAFE_style}\n onPress={() => {\n copyToClipboard(textValue);\n onCopy?.();\n }}\n >\n <span className=\"cim-inline-copy-text\">{children}</span>\n {WORD_JOINER}\n <span className=\"cim-inline-copy-icon\" ref={tooltipTriggerRef}>\n {showCopyFeedback ? <IconCheckCircle /> : <IconCopy />}\n </span>\n </RACButton>\n </Tooltip>\n );\n}\n\nconst _UNSTABLE_InlineCopy = withStyleProps(forwardRef(UNSTABLE_InlineCopy), 'InlineCopy');\n\nexport { _UNSTABLE_InlineCopy as UNSTABLE_InlineCopy };\n"]}

package/dist/commonjs/components/copy/use-copy.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+export interface CopyStatus {
+    success: boolean;
+    timestamp: number;
+}
+export declare function useCopyToClipboard(): [
+    copyStatus: CopyStatus | undefined,
+    showCopyFeedback: boolean,
+    copyToClipboard: (text: string) => void
+];
+//# sourceMappingURL=use-copy.d.ts.map

package/dist/commonjs/components/copy/use-copy.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"use-copy.d.ts","sourceRoot":"","sources":["../../../../src/components/copy/use-copy.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,kBAAkB,IAAI;IACpC,UAAU,EAAE,UAAU,GAAG,SAAS;IAClC,gBAAgB,EAAE,OAAO;IACzB,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI;CACxC,CA8BA"}

package/dist/commonjs/components/copy/use-copy.js ADDED Viewed

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCopyToClipboard = useCopyToClipboard;
+const react_1 = require("react");
+function useCopyToClipboard() {
+    const [copyStatus, setCopyStatus] = (0, react_1.useState)(undefined);
+    const [showCopyFeedback, setShowCopyFeedback] = (0, react_1.useState)(false);
+    const copyToClipboard = (0, react_1.useCallback)((text) => {
+        navigator.clipboard
+            .writeText(text)
+            .then(() => {
+            setCopyStatus({ success: true, timestamp: Date.now() });
+        })
+            .catch(() => {
+            setCopyStatus({ success: false, timestamp: Date.now() });
+        });
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!copyStatus) {
+            return;
+        }
+        setShowCopyFeedback(true);
+        const timeout = setTimeout(() => {
+            setShowCopyFeedback(false);
+        }, 2000);
+        return () => clearTimeout(timeout);
+    }, [copyStatus]);
+    return [copyStatus, showCopyFeedback, copyToClipboard];
+}
+//# sourceMappingURL=use-copy.js.map

package/dist/commonjs/components/copy/use-copy.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"use-copy.js","sourceRoot":"","sources":["../../../../src/components/copy/use-copy.ts"],"names":[],"mappings":";;AAOA,gDAkCC;AAzCD,iCAAyD;AAOzD,SAAgB,kBAAkB;IAKhC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAyB,SAAS,CAAC,CAAC;IAChF,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAEhE,MAAM,eAAe,GAAG,IAAA,mBAAW,EAAC,CAAC,IAAY,EAAE,EAAE;QACnD,SAAS,CAAC,SAAS;aAChB,SAAS,CAAC,IAAI,CAAC;aACf,IAAI,CAAC,GAAG,EAAE;YACT,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;QAC1D,CAAC,CAAC;aACD,KAAK,CAAC,GAAG,EAAE;YACV,aAAa,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;QAC3D,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,OAAO;QACT,CAAC;QAED,mBAAmB,CAAC,IAAI,CAAC,CAAC;QAE1B,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YAC9B,mBAAmB,CAAC,KAAK,CAAC,CAAC;QAC7B,CAAC,EAAE,IAAI,CAAC,CAAC;QAET,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CAAC,UAAU,EAAE,gBAAgB,EAAE,eAAe,CAAC,CAAC;AACzD,CAAC","sourcesContent":["import { useCallback, useEffect, useState } from 'react';\n\nexport interface CopyStatus {\n success: boolean;\n timestamp: number;\n}\n\nexport function useCopyToClipboard(): [\n copyStatus: CopyStatus | undefined,\n showCopyFeedback: boolean,\n copyToClipboard: (text: string) => void,\n] {\n const [copyStatus, setCopyStatus] = useState<CopyStatus | undefined>(undefined);\n const [showCopyFeedback, setShowCopyFeedback] = useState(false);\n\n const copyToClipboard = useCallback((text: string) => {\n navigator.clipboard\n .writeText(text)\n .then(() => {\n setCopyStatus({ success: true, timestamp: Date.now() });\n })\n .catch(() => {\n setCopyStatus({ success: false, timestamp: Date.now() });\n });\n }, []);\n\n useEffect(() => {\n if (!copyStatus) {\n return;\n }\n\n setShowCopyFeedback(true);\n\n const timeout = setTimeout(() => {\n setShowCopyFeedback(false);\n }, 2000);\n\n return () => clearTimeout(timeout);\n }, [copyStatus]);\n\n return [copyStatus, showCopyFeedback, copyToClipboard];\n}\n"]}

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

@@ -1,11 +1,16 @@
 import type { CalendarDate, CalendarDateTime, ZonedDateTime } from '@internationalized/date';
 import { type CalendarProps as RACCalendarProps, type DatePickerProps as RACDatePickerProps } from 'react-aria-components';
-import type { CommonProps, FieldProps } from '../types.js';
+import type { ApiProps, CommonProps, FieldProps } from '../types.js';
 /** Represents a date with optional time and timezone components. */
 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' | 'autoComplete'>, Pick<RACCalendarProps<T>, 'focusedValue' | 'defaultFocusedValue'> {
+export interface DatePickerProps<T extends DateValue> extends CommonProps, FieldProps<MappedDateValue<T>>, ApiProps<DatePickerApi>, 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'> {
+}
+/** The imperative API exposed by the `DatePicker` component. */
+export interface DatePickerApi {
+    /** Focuses the first editable segment in the input field. */
+    focus: () => void;
 }
 /**
  * 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,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"}
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,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAoB,MAAM,aAAa,CAAC;AAIvF,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,QAAQ,CAAC,aAAa,CAAC,EACvB,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;AAExE,gEAAgE;AAChE,MAAM,WAAW,aAAa;IAC5B,6DAA6D;IAC7D,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAiFD;;;;GAIG;AACH,QAAA,MAAM,WAAW,GApFG,CAAC,SAAS,SAAS,mKAoFiC,CAAC;AAEzE,OAAO,EAAE,WAAW,IAAI,UAAU,EAAE,CAAC"}

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

@@ -18,7 +18,8 @@ const icon_button_js_1 = require("../button/icon-button.js");
 const form_field_js_1 = require("../internal/form-field/form-field.js");
 const utils_js_1 = require("../typography/utils.js");
 const date_picker_calendar_js_1 = require("./date-picker-calendar.js");
-function DatePicker({ label, description, error: errorMessage, focusedValue, defaultFocusedValue, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+function DatePicker({ label, description, error: errorMessage, focusedValue, defaultFocusedValue, UNSAFE_className, UNSAFE_style, apiRef, ...props }, ref) {
+    const inputRef = (0, react_1.useRef)(null);
     const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
     (0, use_production_warning_js_1.useProductionWarning)(() => {
         if (!label && !ariaLabel && !ariaLabelledBy) {
@@ -26,7 +27,10 @@ function DatePicker({ label, description, error: errorMessage, focusedValue, def
         }
     }, [label, ariaLabel, ariaLabelledBy]);
     const messages = (0, index_js_1.useLocalizedMessages)('datePicker');
-    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.DatePicker, { ...props, ref: ref, className: (0, clsx_1.default)('cim-date-picker', 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.jsxs)(react_aria_components_1.Group, { className: "cim-date-picker-input-group", "data-readonly": props.isReadOnly || undefined, children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.DateInput, { className: (0, clsx_1.default)('cim-date-picker-input', (0, utils_js_1.textStyle)({ variant: 'body' })), children: (segment) => ((0, jsx_runtime_1.jsx)("span", { className: "cim-date-picker-segment-wrapper", children: (0, jsx_runtime_1.jsx)(react_aria_components_1.DateSegment, { segment: segment }) })) }), (0, jsx_runtime_1.jsxs)("div", { className: "cim-date-picker-input-controls", children: [(0, jsx_runtime_1.jsx)(DatePickerClearButton, { isDisabled: props.isDisabled || props.isReadOnly }), (0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(index_js_2.IconCalendarEmpty, {}), "aria-label": messages.format('openCalendar'), variant: "tertiary", size: "small" })] })] }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: errorMessage }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: "cim-date-picker-popover", placement: "bottom end", offset: 5, containerPadding: 16, "data-cim-style-root": true, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { children: (0, jsx_runtime_1.jsx)(date_picker_calendar_js_1.DatePickerCalendar, { focusedValue: focusedValue, defaultFocusedValue: defaultFocusedValue, placeholderValue: props.placeholderValue }) }) })] }));
+    (0, react_1.useImperativeHandle)(apiRef, () => ({
+        focus: () => inputRef.current?.querySelector('[role=spinbutton]:not([data-disabled])')?.focus(),
+    }), []);
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.DatePicker, { ...props, ref: ref, className: (0, clsx_1.default)('cim-date-picker', 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.jsxs)(react_aria_components_1.Group, { className: "cim-date-picker-input-group", "data-readonly": props.isReadOnly || undefined, children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.DateInput, { ref: inputRef, className: (0, clsx_1.default)('cim-date-picker-input', (0, utils_js_1.textStyle)({ variant: 'body' })), children: (segment) => ((0, jsx_runtime_1.jsx)("span", { className: "cim-date-picker-segment-wrapper", children: (0, jsx_runtime_1.jsx)(react_aria_components_1.DateSegment, { segment: segment }) })) }), (0, jsx_runtime_1.jsxs)("div", { className: "cim-date-picker-input-controls", children: [(0, jsx_runtime_1.jsx)(DatePickerClearButton, { isDisabled: props.isDisabled || props.isReadOnly }), (0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(index_js_2.IconCalendarEmpty, {}), "aria-label": messages.format('openCalendar'), variant: "tertiary", size: "small" })] })] }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: errorMessage }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: "cim-date-picker-popover", placement: "bottom end", offset: 5, containerPadding: 16, "data-cim-style-root": true, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { children: (0, jsx_runtime_1.jsx)(date_picker_calendar_js_1.DatePickerCalendar, { focusedValue: focusedValue, defaultFocusedValue: defaultFocusedValue, placeholderValue: props.placeholderValue }) }) })] }));
 }
 /**
  * Allows users to enter or select a date and time value.

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":"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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"]}
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 { type ForwardedRef, useContext, useImperativeHandle, useRef } 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 { ApiProps, CommonProps, FieldProps, FocusableElement } 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 ApiProps<DatePickerApi>,\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\n/* The imperative API exposed by the `DatePicker` component. /\nexport interface DatePickerApi {\n /* Focuses the first editable segment in the input field. /\n focus: () => void;\n}\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 apiRef,\n ...props\n }: DatePickerProps<T>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const inputRef = useRef<HTMLDivElement>(null);\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 useImperativeHandle(\n apiRef,\n () => ({\n focus: () =>\n (inputRef.current?.querySelector('[role=spinbutton]:not([data-disabled])') as FocusableElement \| null)?.focus(),\n }),\n [],\n );\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 ref={inputRef} 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"]}