@cimpress-ui/react 1.25.2 → 1.27.0

package/dist/commonjs/components/app-header/app-header.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import type { CommonProps, Href, NavigationProps, WithRequired } from '../types.js';
 export interface AppHeaderTitleLinkProps extends WithRequired<NavigationProps, 'href'> {
 }

package/dist/commonjs/components/app-header/app-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-header.d.ts","sourceRoot":"","sources":["../../../../src/components/app-header/app-header.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAOrD,OAAO,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAKpF,MAAM,WAAW,uBAAwB,SAAQ,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;CAAG;AAEzF,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,sGAAsG;IACtG,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,SAAS,EAAE,IAAI,GAAG,uBAAuB,CAAC;IAC1C,oDAAoD;IACpD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,eAAe,CAAC,EAAE,SAAS,CAAC;CAC7B;AA2DD;;;;GAIG;AACH,QAAA,MAAM,UAAU,+GAAqC,CAAC;AAEtD,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC"}
+{"version":3,"file":"app-header.d.ts","sourceRoot":"","sources":["../../../../src/components/app-header/app-header.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAiC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQtE,OAAO,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAMpF,MAAM,WAAW,uBAAwB,SAAQ,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;CAAG;AAEzF,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,sGAAsG;IACtG,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,SAAS,EAAE,IAAI,GAAG,uBAAuB,CAAC;IAC1C,oDAAoD;IACpD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,eAAe,CAAC,EAAE,SAAS,CAAC;CAC7B;AAiED;;;;GAIG;AACH,QAAA,MAAM,UAAU,+GAAqC,CAAC;AAEtD,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC"}

package/dist/commonjs/components/app-header/app-header.js

@@ -7,19 +7,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AppHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
 const forward_ref_js_1 = require("../../forward-ref.js");
 const index_js_1 = require("../../icons/index.js");
 const use_is_mobile_js_1 = require("../../utils/use-is-mobile.js");
+const app_shell_context_js_1 = require("../app-shell/app-shell-context.js");
 const icon_button_js_1 = require("../button/icon-button.js");
 const divider_js_1 = require("../divider/divider.js");
 const popover_js_1 = require("../popover/popover.js");
 const link_js_1 = require("../typography/link.js");
 const text_js_1 = require("../typography/text.js");
 const cimpress_logo_js_1 = require("./cimpress-logo.js");
+const nav_button_js_1 = require("./nav-button.js");
 function AppHeader({ title, titleLink, tools, UNSTABLE_navButton: navButton, UNSTABLE_postTitle: postTitle, UNSTABLE_search: search, UNSAFE_className, UNSAFE_style, ...props }, ref) {
     const isMobile = (0, use_is_mobile_js_1.useIsMobile)();
+    const appShellContext = (0, react_1.useContext)(app_shell_context_js_1.AppShellContext);
     const titleLinkProps = typeof titleLink === 'object' && 'href' in titleLink ? titleLink : { href: titleLink };
-    return ((0, jsx_runtime_1.jsxs)("header", { ...props, ref: ref, className: (0, clsx_1.default)('cim-app-header', UNSAFE_className), style: UNSAFE_style, children: [(0, jsx_runtime_1.jsxs)("div", { className: "cim-app-header-title", children: [navButton, (0, jsx_runtime_1.jsx)(cimpress_logo_js_1.CimpressLogo, { height: 24 }), (0, jsx_runtime_1.jsx)(divider_js_1.Divider, { orientation: "vertical" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "h1", variant: "title-5", tone: "base", children: (0, jsx_runtime_1.jsx)(link_js_1.Link, { ...titleLinkProps, UNSAFE_className: "cim-app-header-title-link", children: title }) }), postTitle] }), search && (0, jsx_runtime_1.jsx)("div", { className: "cim-app-header-search", children: search }), (0, jsx_runtime_1.jsx)("div", { className: "cim-app-header-tools", children: isMobile && tools ? ((0, jsx_runtime_1.jsxs)(popover_js_1.PopoverRoot, { children: [(0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(index_js_1.IconMenuMoreVertical, {}), "aria-label": "Expand/collapse header", variant: "tertiary", size: "small" }), (0, jsx_runtime_1.jsx)(popover_js_1.Popover, { "aria-label": "Expanded header", placement: "bottom end", children: (0, jsx_runtime_1.jsx)("div", { className: "cim-app-header-tools-collapsed", children: tools }) })] })) : (tools) })] }));
+    return ((0, jsx_runtime_1.jsxs)("header", { ...props, ref: ref, className: (0, clsx_1.default)('cim-app-header', UNSAFE_className), style: UNSAFE_style, "data-react-aria-top-layer": appShellContext?.sideNavIsOpen || undefined, children: [(0, jsx_runtime_1.jsxs)("div", { className: "cim-app-header-title", children: [navButton !== undefined ? navButton : appShellContext ? (0, jsx_runtime_1.jsx)(nav_button_js_1.UNSTABLE_AppHeaderNavButton, {}) : null, (0, jsx_runtime_1.jsx)(cimpress_logo_js_1.CimpressLogo, { height: 24 }), (0, jsx_runtime_1.jsx)(divider_js_1.Divider, { orientation: "vertical" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "h1", variant: "title-5", tone: "base", children: (0, jsx_runtime_1.jsx)(link_js_1.Link, { ...titleLinkProps, UNSAFE_className: "cim-app-header-title-link", children: title }) }), postTitle] }), search && (0, jsx_runtime_1.jsx)("div", { className: "cim-app-header-search", children: search }), (0, jsx_runtime_1.jsx)("div", { className: "cim-app-header-tools", children: isMobile && tools ? ((0, jsx_runtime_1.jsxs)(popover_js_1.PopoverRoot, { children: [(0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(index_js_1.IconMenuMoreVertical, {}), "aria-label": "Expand/collapse header", variant: "tertiary", size: "small" }), (0, jsx_runtime_1.jsx)(popover_js_1.Popover, { "aria-label": "Expanded header", placement: "bottom end", children: (0, jsx_runtime_1.jsx)("div", { className: "cim-app-header-tools-collapsed", children: tools }) })] })) : (tools) })] }));
 }
 /**
  * Displays a basic application header.

package/dist/commonjs/components/app-header/app-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-header.js","sourceRoot":"","sources":["../../../../src/components/app-header/app-header.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,yDAAkD;AAClD,mDAA4D;AAC5D,mEAA2D;AAC3D,6DAAsD;AACtD,sDAAgD;AAChD,sDAA6D;AAE7D,mDAA6C;AAC7C,mDAA6C;AAC7C,yDAAkD;AAgBlD,SAAS,SAAS,CAChB,EACE,KAAK,EACL,SAAS,EACT,KAAK,EACL,kBAAkB,EAAE,SAAS,EAC7B,kBAAkB,EAAE,SAAS,EAC7B,eAAe,EAAE,MAAM,EACvB,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACO,EACjB,GAAiC;IAEjC,MAAM,QAAQ,GAAG,IAAA,8BAAW,GAAE,CAAC;IAE/B,MAAM,cAAc,GAAG,OAAO,SAAS,KAAK,QAAQ,IAAI,MAAM,IAAI,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;IAE9G,OAAO,CACL,uCAAY,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,gBAAgB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aACnG,iCAAK,SAAS,EAAC,sBAAsB,aAClC,SAAS,EACV,uBAAC,+BAAY,IAAC,MAAM,EAAE,EAAE,GAAI,EAC5B,uBAAC,oBAAO,IAAC,WAAW,EAAC,UAAU,GAAG,EAClC,uBAAC,cAAI,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,YACzC,uBAAC,cAAI,OAAK,cAAc,EAAE,gBAAgB,EAAC,2BAA2B,YACnE,KAAK,GACD,GACF,EAEN,SAAS,IACN,EAEL,MAAM,IAAI,gCAAK,SAAS,EAAC,uBAAuB,YAAE,MAAM,GAAO,EAEhE,gCAAK,SAAS,EAAC,sBAAsB,YAClC,QAAQ,IAAI,KAAK,CAAC,CAAC,CAAC,CACnB,wBAAC,wBAAW,eACV,uBAAC,2BAAU,IACT,IAAI,EAAE,uBAAC,+BAAoB,KAAG,gBAEnB,wBAAwB,EACnC,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,GACZ,EACF,uBAAC,oBAAO,kBAAY,iBAAiB,EAAC,SAAS,EAAC,YAAY,YAC1D,gCAAK,SAAS,EAAC,gCAAgC,YAAE,KAAK,GAAO,GACrD,IACE,CACf,CAAC,CAAC,CAAC,CACF,KAAK,CACN,GACG,IACC,CACV,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,GAAG,IAAA,2BAAU,EAAC,SAAS,EAAE,WAAW,CAAC,CAAC;AAE/B,+BAAS","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconMenuMoreVertical } from '../../icons/index.js';\nimport { useIsMobile } from '../../utils/use-is-mobile.js';\nimport { IconButton } from '../button/icon-button.js';\nimport { Divider } from '../divider/divider.js';\nimport { Popover, PopoverRoot } from '../popover/popover.js';\nimport type { CommonProps, Href, NavigationProps, WithRequired } from '../types.js';\nimport { Link } from '../typography/link.js';\nimport { Text } from '../typography/text.js';\nimport { CimpressLogo } from './cimpress-logo.js';\n\nexport interface AppHeaderTitleLinkProps extends WithRequired<NavigationProps, 'href'> {}\n\nexport interface AppHeaderProps extends CommonProps {\n  /** The title displayed in the header, usually the application name. Rendered as an `<h1>` element. */\n  title: string;\n  /** The props of the link that is rendered around the header title. */\n  titleLink: Href | AppHeaderTitleLinkProps;\n  /** The tools to render at the end of the header. */\n  tools?: ReactNode;\n  UNSTABLE_navButton?: ReactNode;\n  UNSTABLE_postTitle?: ReactNode;\n  UNSTABLE_search?: ReactNode;\n}\n\nfunction AppHeader(\n  {\n    title,\n    titleLink,\n    tools,\n    UNSTABLE_navButton: navButton,\n    UNSTABLE_postTitle: postTitle,\n    UNSTABLE_search: search,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: AppHeaderProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const isMobile = useIsMobile();\n\n  const titleLinkProps = typeof titleLink === 'object' && 'href' in titleLink ? titleLink : { href: titleLink };\n\n  return (\n    <header {...props} ref={ref} className={clsx('cim-app-header', UNSAFE_className)} style={UNSAFE_style}>\n      <div className=\"cim-app-header-title\">\n        {navButton}\n        <CimpressLogo height={24} />\n        <Divider orientation=\"vertical\" />\n        <Text as=\"h1\" variant=\"title-5\" tone=\"base\">\n          <Link {...titleLinkProps} UNSAFE_className=\"cim-app-header-title-link\">\n            {title}\n          </Link>\n        </Text>\n\n        {postTitle}\n      </div>\n\n      {search && <div className=\"cim-app-header-search\">{search}</div>}\n\n      <div className=\"cim-app-header-tools\">\n        {isMobile && tools ? (\n          <PopoverRoot>\n            <IconButton\n              icon={<IconMenuMoreVertical />}\n              // TODO: i18n\n              aria-label=\"Expand/collapse header\"\n              variant=\"tertiary\"\n              size=\"small\"\n            />\n            <Popover aria-label=\"Expanded header\" placement=\"bottom end\">\n              <div className=\"cim-app-header-tools-collapsed\">{tools}</div>\n            </Popover>\n          </PopoverRoot>\n        ) : (\n          tools\n        )}\n      </div>\n    </header>\n  );\n}\n\n/**\n * Displays a basic application header.\n *\n * See [app header usage guidelines](https://ui.cimpress.io/components/app-header/).\n */\nconst _AppHeader = forwardRef(AppHeader, 'AppHeader');\n\nexport { _AppHeader as AppHeader };\n"]}
+{"version":3,"file":"app-header.js","sourceRoot":"","sources":["../../../../src/components/app-header/app-header.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AACxB,iCAAsE;AACtE,yDAAkD;AAClD,mDAA4D;AAC5D,mEAA2D;AAC3D,4EAAoE;AACpE,6DAAsD;AACtD,sDAAgD;AAChD,sDAA6D;AAE7D,mDAA6C;AAC7C,mDAA6C;AAC7C,yDAAkD;AAClD,mDAAoF;AAgBpF,SAAS,SAAS,CAChB,EACE,KAAK,EACL,SAAS,EACT,KAAK,EACL,kBAAkB,EAAE,SAAS,EAC7B,kBAAkB,EAAE,SAAS,EAC7B,eAAe,EAAE,MAAM,EACvB,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACO,EACjB,GAAiC;IAEjC,MAAM,QAAQ,GAAG,IAAA,8BAAW,GAAE,CAAC;IAC/B,MAAM,eAAe,GAAG,IAAA,kBAAU,EAAC,sCAAe,CAAC,CAAC;IACpD,MAAM,cAAc,GAAG,OAAO,SAAS,KAAK,QAAQ,IAAI,MAAM,IAAI,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;IAE9G,OAAO,CACL,uCACM,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,gBAAgB,EAAE,gBAAgB,CAAC,EACnD,KAAK,EAAE,YAAY,+BACQ,eAAe,EAAE,aAAa,IAAI,SAAS,aAEtE,iCAAK,SAAS,EAAC,sBAAsB,aAClC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,uBAAC,2CAAkB,KAAG,CAAC,CAAC,CAAC,IAAI,EACtF,uBAAC,+BAAY,IAAC,MAAM,EAAE,EAAE,GAAI,EAC5B,uBAAC,oBAAO,IAAC,WAAW,EAAC,UAAU,GAAG,EAClC,uBAAC,cAAI,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,YACzC,uBAAC,cAAI,OAAK,cAAc,EAAE,gBAAgB,EAAC,2BAA2B,YACnE,KAAK,GACD,GACF,EAEN,SAAS,IACN,EAEL,MAAM,IAAI,gCAAK,SAAS,EAAC,uBAAuB,YAAE,MAAM,GAAO,EAEhE,gCAAK,SAAS,EAAC,sBAAsB,YAClC,QAAQ,IAAI,KAAK,CAAC,CAAC,CAAC,CACnB,wBAAC,wBAAW,eACV,uBAAC,2BAAU,IACT,IAAI,EAAE,uBAAC,+BAAoB,KAAG,gBAEnB,wBAAwB,EACnC,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,GACZ,EACF,uBAAC,oBAAO,kBAAY,iBAAiB,EAAC,SAAS,EAAC,YAAY,YAC1D,gCAAK,SAAS,EAAC,gCAAgC,YAAE,KAAK,GAAO,GACrD,IACE,CACf,CAAC,CAAC,CAAC,CACF,KAAK,CACN,GACG,IACC,CACV,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,GAAG,IAAA,2BAAU,EAAC,SAAS,EAAE,WAAW,CAAC,CAAC;AAE/B,+BAAS","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useContext, type ForwardedRef, type ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconMenuMoreVertical } from '../../icons/index.js';\nimport { useIsMobile } from '../../utils/use-is-mobile.js';\nimport { AppShellContext } from '../app-shell/app-shell-context.js';\nimport { IconButton } from '../button/icon-button.js';\nimport { Divider } from '../divider/divider.js';\nimport { Popover, PopoverRoot } from '../popover/popover.js';\nimport type { CommonProps, Href, NavigationProps, WithRequired } from '../types.js';\nimport { Link } from '../typography/link.js';\nimport { Text } from '../typography/text.js';\nimport { CimpressLogo } from './cimpress-logo.js';\nimport { UNSTABLE_AppHeaderNavButton as AppHeaderNavButton } from './nav-button.js';\n\nexport interface AppHeaderTitleLinkProps extends WithRequired<NavigationProps, 'href'> {}\n\nexport interface AppHeaderProps extends CommonProps {\n  /** The title displayed in the header, usually the application name. Rendered as an `<h1>` element. */\n  title: string;\n  /** The props of the link that is rendered around the header title. */\n  titleLink: Href | AppHeaderTitleLinkProps;\n  /** The tools to render at the end of the header. */\n  tools?: ReactNode;\n  UNSTABLE_navButton?: ReactNode;\n  UNSTABLE_postTitle?: ReactNode;\n  UNSTABLE_search?: ReactNode;\n}\n\nfunction AppHeader(\n  {\n    title,\n    titleLink,\n    tools,\n    UNSTABLE_navButton: navButton,\n    UNSTABLE_postTitle: postTitle,\n    UNSTABLE_search: search,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: AppHeaderProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const isMobile = useIsMobile();\n  const appShellContext = useContext(AppShellContext);\n  const titleLinkProps = typeof titleLink === 'object' && 'href' in titleLink ? titleLink : { href: titleLink };\n\n  return (\n    <header\n      {...props}\n      ref={ref}\n      className={clsx('cim-app-header', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-react-aria-top-layer={appShellContext?.sideNavIsOpen || undefined}\n    >\n      <div className=\"cim-app-header-title\">\n        {navButton !== undefined ? navButton : appShellContext ? <AppHeaderNavButton /> : null}\n        <CimpressLogo height={24} />\n        <Divider orientation=\"vertical\" />\n        <Text as=\"h1\" variant=\"title-5\" tone=\"base\">\n          <Link {...titleLinkProps} UNSAFE_className=\"cim-app-header-title-link\">\n            {title}\n          </Link>\n        </Text>\n\n        {postTitle}\n      </div>\n\n      {search && <div className=\"cim-app-header-search\">{search}</div>}\n\n      <div className=\"cim-app-header-tools\">\n        {isMobile && tools ? (\n          <PopoverRoot>\n            <IconButton\n              icon={<IconMenuMoreVertical />}\n              // TODO: i18n\n              aria-label=\"Expand/collapse header\"\n              variant=\"tertiary\"\n              size=\"small\"\n            />\n            <Popover aria-label=\"Expanded header\" placement=\"bottom end\">\n              <div className=\"cim-app-header-tools-collapsed\">{tools}</div>\n            </Popover>\n          </PopoverRoot>\n        ) : (\n          tools\n        )}\n      </div>\n    </header>\n  );\n}\n\n/**\n * Displays a basic application header.\n *\n * See [app header usage guidelines](https://ui.cimpress.io/components/app-header/).\n */\nconst _AppHeader = forwardRef(AppHeader, 'AppHeader');\n\nexport { _AppHeader as AppHeader };\n"]}

package/dist/commonjs/components/app-header/nav-button.d.ts

@@ -1,7 +1,7 @@
 import type { CommonProps } from '../types.js';
 export interface UNSTABLE_AppHeaderNavButtonProps extends CommonProps {
-    isOpen: boolean;
-    onPress: () => void;
+    isOpen?: boolean;
+    onPress?: () => void;
 }
 declare const _UNSTABLE_AppHeaderNavButton: (props: UNSTABLE_AppHeaderNavButtonProps & import("react").RefAttributes<HTMLButtonElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
 export { _UNSTABLE_AppHeaderNavButton as UNSTABLE_AppHeaderNavButton };

package/dist/commonjs/components/app-header/nav-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nav-button.d.ts","sourceRoot":"","sources":["../../../../src/components/app-header/nav-button.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,gCAAiC,SAAQ,WAAW;IACnE,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAsBD,QAAA,MAAM,4BAA4B,qLAAgF,CAAC;AAEnH,OAAO,EAAE,4BAA4B,IAAI,2BAA2B,EAAE,CAAC"}
+{"version":3,"file":"nav-button.d.ts","sourceRoot":"","sources":["../../../../src/components/app-header/nav-button.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,gCAAiC,SAAQ,WAAW;IACnE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AA4BD,QAAA,MAAM,4BAA4B,qLAAgF,CAAC;AAEnH,OAAO,EAAE,4BAA4B,IAAI,2BAA2B,EAAE,CAAC"}

package/dist/commonjs/components/app-header/nav-button.js

@@ -6,12 +6,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UNSTABLE_AppHeaderNavButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
 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 app_shell_context_js_1 = require("../app-shell/app-shell-context.js");
 const icon_button_js_1 = require("../button/icon-button.js");
 function UNSTABLE_AppHeaderNavButton({ isOpen, onPress, UNSAFE_className, UNSAFE_style }, ref) {
-    return ((0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { "aria-expanded": isOpen, icon: (0, jsx_runtime_1.jsx)(index_js_1.IconMenu, {}), size: "small", "aria-label": "Open menu", variant: "tertiary", onPress: onPress, ref: ref, UNSAFE_className: (0, clsx_1.default)('cim-app-header-nav-toggle', UNSAFE_className), UNSAFE_style: UNSAFE_style }));
+    const appShellContext = (0, react_1.useContext)(app_shell_context_js_1.AppShellContext);
+    const handlePress = () => {
+        onPress?.();
+        appShellContext?.toggleSideNav();
+    };
+    return ((0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { "aria-expanded": isOpen ?? appShellContext?.sideNavIsOpen, icon: (0, jsx_runtime_1.jsx)(index_js_1.IconMenu, {}), "aria-label": "Open menu", variant: "tertiary", onPress: handlePress, ref: ref, UNSAFE_className: (0, clsx_1.default)('cim-app-header-nav-toggle', UNSAFE_className), UNSAFE_style: UNSAFE_style }));
 }
 const _UNSTABLE_AppHeaderNavButton = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(UNSTABLE_AppHeaderNavButton, 'AppHeaderNavButton'));
 exports.UNSTABLE_AppHeaderNavButton = _UNSTABLE_AppHeaderNavButton;

package/dist/commonjs/components/app-header/nav-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"nav-button.js","sourceRoot":"","sources":["../../../../src/components/app-header/nav-button.tsx"],"names":[],"mappings":";;;;;;;AAAA,gDAAwB;AAExB,yDAAkD;AAClD,mDAAgD;AAChD,mEAA2D;AAC3D,6DAAsD;AAQtD,SAAS,2BAA2B,CAClC,EAAE,MAAM,EAAE,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAoC,EACrF,GAAoC;IAEpC,OAAO,CACL,uBAAC,2BAAU,qBACM,MAAM,EACrB,IAAI,EAAE,uBAAC,mBAAQ,KAAG,EAClB,IAAI,EAAC,OAAO,gBAED,WAAW,EACtB,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,EACR,gBAAgB,EAAE,IAAA,cAAI,EAAC,2BAA2B,EAAE,gBAAgB,CAAC,EACrE,YAAY,EAAE,YAAY,GAC1B,CACH,CAAC;AACJ,CAAC;AAED,MAAM,4BAA4B,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,2BAA2B,EAAE,oBAAoB,CAAC,CAAC,CAAC;AAE1E,mEAA2B","sourcesContent":["import clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconMenu } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { IconButton } from '../button/icon-button.js';\nimport type { CommonProps } from '../types.js';\n\nexport interface UNSTABLE_AppHeaderNavButtonProps extends CommonProps {\n  isOpen: boolean;\n  onPress: () => void;\n}\n\nfunction UNSTABLE_AppHeaderNavButton(\n  { isOpen, onPress, UNSAFE_className, UNSAFE_style }: UNSTABLE_AppHeaderNavButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  return (\n    <IconButton\n      aria-expanded={isOpen}\n      icon={<IconMenu />}\n      size=\"small\"\n      // TODO\n      aria-label=\"Open menu\"\n      variant=\"tertiary\"\n      onPress={onPress}\n      ref={ref}\n      UNSAFE_className={clsx('cim-app-header-nav-toggle', UNSAFE_className)}\n      UNSAFE_style={UNSAFE_style}\n    />\n  );\n}\n\nconst _UNSTABLE_AppHeaderNavButton = withStyleProps(forwardRef(UNSTABLE_AppHeaderNavButton, 'AppHeaderNavButton'));\n\nexport { _UNSTABLE_AppHeaderNavButton as UNSTABLE_AppHeaderNavButton };\n"]}
+{"version":3,"file":"nav-button.js","sourceRoot":"","sources":["../../../../src/components/app-header/nav-button.tsx"],"names":[],"mappings":";;;;;;;AAAA,gDAAwB;AACxB,iCAAsD;AACtD,yDAAkD;AAClD,mDAAgD;AAChD,mEAA2D;AAC3D,4EAAoE;AACpE,6DAAsD;AAQtD,SAAS,2BAA2B,CAClC,EAAE,MAAM,EAAE,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAoC,EACrF,GAAoC;IAEpC,MAAM,eAAe,GAAG,IAAA,kBAAU,EAAC,sCAAe,CAAC,CAAC;IAEpD,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,OAAO,EAAE,EAAE,CAAC;QACZ,eAAe,EAAE,aAAa,EAAE,CAAC;IACnC,CAAC,CAAC;IAEF,OAAO,CACL,uBAAC,2BAAU,qBACM,MAAM,IAAI,eAAe,EAAE,aAAa,EACvD,IAAI,EAAE,uBAAC,mBAAQ,KAAG,gBAEP,WAAW,EACtB,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,WAAW,EACpB,GAAG,EAAE,GAAG,EACR,gBAAgB,EAAE,IAAA,cAAI,EAAC,2BAA2B,EAAE,gBAAgB,CAAC,EACrE,YAAY,EAAE,YAAY,GAC1B,CACH,CAAC;AACJ,CAAC;AAED,MAAM,4BAA4B,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,2BAA2B,EAAE,oBAAoB,CAAC,CAAC,CAAC;AAE1E,mEAA2B","sourcesContent":["import clsx from 'clsx';\nimport { useContext, type ForwardedRef } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconMenu } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { AppShellContext } from '../app-shell/app-shell-context.js';\nimport { IconButton } from '../button/icon-button.js';\nimport type { CommonProps } from '../types.js';\n\nexport interface UNSTABLE_AppHeaderNavButtonProps extends CommonProps {\n  isOpen?: boolean;\n  onPress?: () => void;\n}\n\nfunction UNSTABLE_AppHeaderNavButton(\n  { isOpen, onPress, UNSAFE_className, UNSAFE_style }: UNSTABLE_AppHeaderNavButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  const appShellContext = useContext(AppShellContext);\n\n  const handlePress = () => {\n    onPress?.();\n    appShellContext?.toggleSideNav();\n  };\n\n  return (\n    <IconButton\n      aria-expanded={isOpen ?? appShellContext?.sideNavIsOpen}\n      icon={<IconMenu />}\n      // TODO\n      aria-label=\"Open menu\"\n      variant=\"tertiary\"\n      onPress={handlePress}\n      ref={ref}\n      UNSAFE_className={clsx('cim-app-header-nav-toggle', UNSAFE_className)}\n      UNSAFE_style={UNSAFE_style}\n    />\n  );\n}\n\nconst _UNSTABLE_AppHeaderNavButton = withStyleProps(forwardRef(UNSTABLE_AppHeaderNavButton, 'AppHeaderNavButton'));\n\nexport { _UNSTABLE_AppHeaderNavButton as UNSTABLE_AppHeaderNavButton };\n"]}

package/dist/commonjs/components/app-shell/app-shell-context.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=app-shell-context.d.ts.map

package/dist/commonjs/components/app-shell/app-shell-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-shell-context.d.ts","sourceRoot":"","sources":["../../../../src/components/app-shell/app-shell-context.tsx"],"names":[],"mappings":""}

package/dist/commonjs/components/app-shell/app-shell-context.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppShellContext = void 0;
+const react_1 = require("react");
+/** @internal */
+exports.AppShellContext = (0, react_1.createContext)(null);
+//# sourceMappingURL=app-shell-context.js.map

package/dist/commonjs/components/app-shell/app-shell-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-shell-context.js","sourceRoot":"","sources":["../../../../src/components/app-shell/app-shell-context.tsx"],"names":[],"mappings":";;;AAAA,iCAAsC;AAEtC,gBAAgB;AACH,QAAA,eAAe,GAAG,IAAA,qBAAa,EAGlC,IAAI,CAAC,CAAC","sourcesContent":["import { createContext } from 'react';\n\n/** @internal */\nexport const AppShellContext = createContext<{\n  sideNavIsOpen: boolean;\n  toggleSideNav: (isOpen?: boolean) => void;\n} | null>(null);\n"]}

package/dist/commonjs/components/app-shell/app-shell.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import type { CommonProps } from '../types.js';
 export interface UNSTABLE_AppShellProps extends CommonProps {
     children: ReactNode;

package/dist/commonjs/components/app-shell/app-shell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../../src/components/app-shell/app-shell.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAM/G;AAED,MAAM,WAAW,0BAA2B,SAAQ,WAAW;IAC7D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,0BAA0B,2CAM5B"}
+{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../../src/components/app-shell/app-shell.tsx"],"names":[],"mappings":"AACA,OAAO,EAAqC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAa/G;AAED,MAAM,WAAW,0BAA2B,SAAQ,WAAW;IAC7D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,0BAA0B,2CAkB5B"}

package/dist/commonjs/components/app-shell/app-shell.js

@@ -7,10 +7,20 @@ exports.UNSTABLE_AppShell = UNSTABLE_AppShell;
 exports.UNSTABLE_AppShellBody = UNSTABLE_AppShellBody;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
+const use_is_mobile_js_1 = require("../../utils/use-is-mobile.js");
+const app_shell_context_js_1 = require("./app-shell-context.js");
 function UNSTABLE_AppShell({ children, UNSAFE_className, UNSAFE_style, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('cim-app-shell', UNSAFE_className), style: UNSAFE_style, ...props, children: children }));
+    const [sideNavIsOpen, setSideNavIsOpen] = (0, react_1.useState)(true);
+    const toggleSideNav = (0, react_1.useCallback)((isOpen) => {
+        setSideNavIsOpen((prevIsOpen) => isOpen ?? !prevIsOpen);
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(app_shell_context_js_1.AppShellContext.Provider, { value: { sideNavIsOpen, toggleSideNav }, children: (0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('cim-app-shell', UNSAFE_className), style: UNSAFE_style, ...props, children: children }) }));
 }
 function UNSTABLE_AppShellBody({ children, UNSAFE_className, UNSAFE_style, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('cim-app-shell-body', UNSAFE_className), style: UNSAFE_style, ...props, children: children }));
+    const appShellContext = (0, react_1.useContext)(app_shell_context_js_1.AppShellContext);
+    const sideNavIsOpen = appShellContext?.sideNavIsOpen ?? false;
+    const isMobile = (0, use_is_mobile_js_1.useIsMobile)();
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('cim-app-shell-body', UNSAFE_className), style: UNSAFE_style, inert: isMobile && sideNavIsOpen ? '' : undefined, ...props, children: children }));
 }
 //# sourceMappingURL=app-shell.js.map

package/dist/commonjs/components/app-shell/app-shell.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-shell.js","sourceRoot":"","sources":["../../../../src/components/app-shell/app-shell.tsx"],"names":[],"mappings":";;;;;AAQA,8CAMC;AAMD,sDAWC;;AA/BD,gDAAwB;AAQxB,SAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAA0B;IAC9G,OAAO,CACL,gCAAK,SAAS,EAAE,IAAA,cAAI,EAAC,eAAe,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,KAAM,KAAK,YACpF,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAMD,SAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACmB;IAC3B,OAAO,CACL,gCAAK,SAAS,EAAE,IAAA,cAAI,EAAC,oBAAoB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,KAAM,KAAK,YACzF,QAAQ,GACL,CACP,CAAC;AACJ,CAAC","sourcesContent":["import clsx from 'clsx';\nimport type { ReactNode } from 'react';\nimport type { CommonProps } from '../types.js';\n\nexport interface UNSTABLE_AppShellProps extends CommonProps {\n  children: ReactNode;\n}\n\nexport function UNSTABLE_AppShell({ children, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_AppShellProps) {\n  return (\n    <div className={clsx('cim-app-shell', UNSAFE_className)} style={UNSAFE_style} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport interface UNSTABLE_AppShellBodyProps extends CommonProps {\n  children: ReactNode;\n}\n\nexport function UNSTABLE_AppShellBody({\n  children,\n  UNSAFE_className,\n  UNSAFE_style,\n  ...props\n}: UNSTABLE_AppShellBodyProps) {\n  return (\n    <div className={clsx('cim-app-shell-body', UNSAFE_className)} style={UNSAFE_style} {...props}>\n      {children}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"app-shell.js","sourceRoot":"","sources":["../../../../src/components/app-shell/app-shell.tsx"],"names":[],"mappings":";;;;;AAUA,8CAaC;AAMD,sDAuBC;;AApDD,gDAAwB;AACxB,iCAA0E;AAC1E,mEAA2D;AAE3D,iEAAyD;AAMzD,SAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAA0B;IAC9G,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,CAAC;IACzD,MAAM,aAAa,GAAG,IAAA,mBAAW,EAAC,CAAC,MAAgB,EAAE,EAAE;QACrD,gBAAgB,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,CAAC;IAC1D,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,uBAAC,sCAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,aAAa,EAAE,aAAa,EAAE,YAC/D,gCAAK,SAAS,EAAE,IAAA,cAAI,EAAC,eAAe,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,KAAM,KAAK,YACpF,QAAQ,GACL,GACmB,CAC5B,CAAC;AACJ,CAAC;AAMD,SAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACmB;IAC3B,MAAM,eAAe,GAAG,IAAA,kBAAU,EAAC,sCAAe,CAAC,CAAC;IACpD,MAAM,aAAa,GAAG,eAAe,EAAE,aAAa,IAAI,KAAK,CAAC;IAC9D,MAAM,QAAQ,GAAG,IAAA,8BAAW,GAAE,CAAC;IAE/B,OAAO,CACL,gCACE,SAAS,EAAE,IAAA,cAAI,EAAC,oBAAoB,EAAE,gBAAgB,CAAC,EACvD,KAAK,EAAE,YAAY,EAIb,KAAK,EAAE,QAAQ,IAAI,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,KACnD,KAAK,YAER,QAAQ,GACL,CACP,CAAC;AACJ,CAAC","sourcesContent":["import clsx from 'clsx';\nimport { useCallback, useContext, useState, type ReactNode } from 'react';\nimport { useIsMobile } from '../../utils/use-is-mobile.js';\nimport type { CommonProps } from '../types.js';\nimport { AppShellContext } from './app-shell-context.js';\n\nexport interface UNSTABLE_AppShellProps extends CommonProps {\n  children: ReactNode;\n}\n\nexport function UNSTABLE_AppShell({ children, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_AppShellProps) {\n  const [sideNavIsOpen, setSideNavIsOpen] = useState(true);\n  const toggleSideNav = useCallback((isOpen?: boolean) => {\n    setSideNavIsOpen((prevIsOpen) => isOpen ?? !prevIsOpen);\n  }, []);\n\n  return (\n    <AppShellContext.Provider value={{ sideNavIsOpen, toggleSideNav }}>\n      <div className={clsx('cim-app-shell', UNSAFE_className)} style={UNSAFE_style} {...props}>\n        {children}\n      </div>\n    </AppShellContext.Provider>\n  );\n}\n\nexport interface UNSTABLE_AppShellBodyProps extends CommonProps {\n  children: ReactNode;\n}\n\nexport function UNSTABLE_AppShellBody({\n  children,\n  UNSAFE_className,\n  UNSAFE_style,\n  ...props\n}: UNSTABLE_AppShellBodyProps) {\n  const appShellContext = useContext(AppShellContext);\n  const sideNavIsOpen = appShellContext?.sideNavIsOpen ?? false;\n  const isMobile = useIsMobile();\n\n  return (\n    <div\n      className={clsx('cim-app-shell-body', UNSAFE_className)}\n      style={UNSAFE_style}\n      // Make the body inert when the side nav is open on mobile so that tabbing is contained to app header and side nav\n      // Workaround for React not having type definitions for the `inert` attribute\n      // eslint-disable-next-line internal/no-extra-props-in-spread\n      {...{ inert: isMobile && sideNavIsOpen ? '' : undefined }}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"]}

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

@@ -3,18 +3,40 @@ import { type ComboBoxProps as RACComboBoxProps, type ListBoxItemProps as RACLis
 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. */
-    selectedKey: Key | null;
-    /** The value of the ComboBox input. */
+    /** The selected key in the combo box. */
+    value: Key | null;
+    /** The value of the combo box input. */
     inputValue: string;
+    /**
+     * The selected key in the combo box.
+     * @deprecated Use `value` instead.
+     */
+    selectedKey: Key | null;
 }
 export interface ComboBoxProps<T extends CollectionItem = CollectionItem> extends CommonProps, FieldWithPlaceholderProps<ComboBoxValidationValue>, CollectionProps<T>, AsyncItemLoadingProps, ApiProps<ComboBoxApi>, Pick<RACComboBoxProps<T>, 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'inputValue' | 'defaultInputValue' | 'autoFocus' | 'onInputChange' | 'onFocus' | 'onBlur' | 'onOpenChange'> {
-    /** The currently selected key in the collection (controlled). */
+    /** The current value (controlled). */
+    value?: Key | null;
+    /** The initial value (uncontrolled). */
+    defaultValue?: Key;
+    /** Handler that is called when the value changes. */
+    onChange?: (key: Key | null) => void;
+    /**
+     * The currently selected key in the collection (controlled).
+     * @deprecated Use `value` instead.
+     */
     selectedKey?: Key | null;
-    /** The initial selected key in the collection (uncontrolled). */
+    /**
+     * The initial selected key in the collection (uncontrolled).
+     * @deprecated Use `defaultValue` instead.
+     */
     defaultSelectedKey?: Key;
-    /** Handler that is called when the selection changes. */
+    /**
+     * Handler that is called when the selection changes.
+     * @deprecated Use `onChange` instead.
+     */
     onSelectionChange?: (key: Key | null) => void;
+    /** Whether to display a clear button to clear the selection. */
+    isClearable?: boolean;
     /**
      * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.
      * @default false
@@ -22,7 +44,6 @@ export interface ComboBoxProps<T extends CollectionItem = CollectionItem> extend
     isVirtualized?: boolean;
     /** Handler that is called when the list of items is scrolled. */
     onScroll?: UIEventHandler<HTMLDivElement>;
-    UNSTABLE_isClearable?: boolean;
 }
 /** The imperative API exposed by the `ComboBox` component. */
 export interface ComboBoxApi {

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

@@ -1 +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;AAW/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,SACE,WAAW,EACX,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,YAAY,GACZ,mBAAmB,GACnB,WAAW,GACX,eAAe,GACf,SAAS,GACT,QAAQ,GACR,cAAc,CACjB;IACH,iEAAiE;IACjE,WAAW,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC;IACzB,iEAAiE;IACjE,kBAAkB,CAAC,EAAE,GAAG,CAAC;IACzB,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC1C,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;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;AAgHD;;;;GAIG;AACH,QAAA,MAAM,SAAS,GAnHG,CAAC,SAAS,cAAc,iKAmHwB,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC;AAsFjC,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,IAAI,CACvE,mBAAmB,CAAC,CAAC,CAAC,EACtB,YAAY,GAAG,cAAc,GAAG,YAAY,CAC7C;IACC,0EAA0E;IAC1E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;CAC9B;AAED,oDAAoD;AACpD,wBAAgB,YAAY,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CAiBlG;yBAjBe,YAAY;;;AAqB5B,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACxF,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,0DAA0D;AAC1D,wBAAgB,eAAe,CAAC,CAAC,SAAS,cAAc,EAAE,EACxD,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAezB;yBApBe,eAAe"}
+{"version":3,"file":"combo-box.d.ts","sourceRoot":"","sources":["../../../../src/components/combo-box/combo-box.tsx"],"names":[],"mappings":"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"}

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

@@ -30,7 +30,7 @@ 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, UNSTABLE_isClearable: isClearable = false, apiRef, selectedKey, defaultSelectedKey, onSelectionChange, validate, ...props }, ref) {
+function ComboBox({ label, description, error, items, children, placeholder, UNSAFE_className, UNSAFE_style, isReadOnly, onScroll, isVirtualized = false, isClearable = false, UNSTABLE_isLoading: isLoading, UNSTABLE_onLoadMore: onLoadMore, apiRef, value, defaultValue, onChange, selectedKey, defaultSelectedKey, onSelectionChange, validate, ...props }, ref) {
     const inputRef = (0, react_1.useRef)(null);
     const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
     (0, use_production_warning_js_1.useProductionWarning)(() => {
@@ -47,11 +47,11 @@ function ComboBox({ label, description, error, items, children, placeholder, UNS
     }), []);
     const isFieldClearable = isClearable && !props.isDisabled && !isReadOnly;
     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, selectionMode: "single", value: selectedKey, defaultValue: defaultSelectedKey, onChange: onSelectionChange, menuTrigger: "focus", isReadOnly: isReadOnly, "data-readonly": isReadOnly ? true : undefined, validate: validate
+    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, selectionMode: "single", value: value, defaultValue: defaultValue, onChange: onChange, selectedKey: selectedKey, defaultSelectedKey: defaultSelectedKey, onSelectionChange: onSelectionChange, menuTrigger: "focus", isReadOnly: isReadOnly, "data-readonly": isReadOnly ? true : undefined, validate: validate
             ? ({ inputValue, value }) => {
-                return validate({ inputValue, selectedKey: value });
+                return validate({ inputValue, value, selectedKey: value });
             }
-            : 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, isClearable: isFieldClearable }), isFieldClearable && (0, jsx_runtime_1.jsx)(ComboBoxClearButton, {}), (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) })] }));
+            : 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, isClearable: isFieldClearable }), isFieldClearable && (0, jsx_runtime_1.jsx)(ComboBoxClearButton, { onClear: () => inputRef.current?.focus() }), (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.
@@ -60,15 +60,17 @@ 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 ComboBoxClearButton() {
+function ComboBoxClearButton({ onClear }) {
     const comboBoxState = (0, react_1.useContext)(react_aria_components_1.ComboBoxStateContext);
+    const selectMessages = (0, index_js_1.useLocalizedMessages)('select');
     const inputValue = comboBoxState?.inputValue;
     if (!comboBoxState || inputValue === '') {
         return null;
     }
     return ((0, jsx_runtime_1.jsx)(x_button_js_1.XButton, { onPress: () => {
-            comboBoxState?.setValue(null);
-        }, iconType: "circled", "aria-label": "Clear selection", 
+            comboBoxState.setValue(null);
+            onClear?.();
+        }, iconType: "circled", "aria-label": selectMessages.format('clearSelection'), 
         // Prevent this button from acting as a trigger for opening/closing the ComboBox
         slot: null, excludeFromTabOrder: true }));
 }

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

@@ -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 {\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 { IconCheckBold, IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { XButton } from '../internal/x-button/x-button.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  estimatedRowHeight: 40,\n  estimatedHeadingHeight: 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\n    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      | 'inputValue'\n      | 'defaultInputValue'\n      | 'autoFocus'\n      | 'onInputChange'\n      | 'onFocus'\n      | 'onBlur'\n      | 'onOpenChange'\n    > {\n  /** The currently selected key in the collection (controlled). */\n  selectedKey?: Key | null;\n  /** The initial selected key in the collection (uncontrolled). */\n  defaultSelectedKey?: Key;\n  /** Handler that is called when the selection changes. */\n  onSelectionChange?: (key: Key | null) => void;\n  /**\n   * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.\n   * @default false\n   */\n  isVirtualized?: boolean;\n  /** Handler that is called when the list of items is scrolled. */\n  onScroll?: UIEventHandler<HTMLDivElement>;\n  UNSTABLE_isClearable?: boolean;\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    UNSTABLE_isClearable: isClearable = false,\n    apiRef,\n    selectedKey,\n    defaultSelectedKey,\n    onSelectionChange,\n    validate,\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 isFieldClearable = isClearable && !props.isDisabled && !isReadOnly;\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      selectionMode=\"single\"\n      value={selectedKey}\n      defaultValue={defaultSelectedKey}\n      onChange={onSelectionChange}\n      menuTrigger=\"focus\"\n      isReadOnly={isReadOnly}\n      data-readonly={isReadOnly ? true : undefined}\n      validate={\n        validate\n          ? ({ inputValue, value }) => {\n              return validate({ inputValue, selectedKey: value });\n            }\n          : undefined\n      }\n    >\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACGroup className=\"cim-combo-box-input-group\">\n        <ComboBoxInput\n          inputRef={inputRef}\n          isReadOnly={isReadOnly}\n          placeholder={placeholder}\n          isClearable={isFieldClearable}\n        />\n        {isFieldClearable && <ComboBoxClearButton />}\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 ComboBoxClearButton() {\n  const comboBoxState = useContext(RACComboBoxStateContext);\n  const inputValue = comboBoxState?.inputValue;\n\n  if (!comboBoxState || inputValue === '') {\n    return null;\n  }\n\n  return (\n    <XButton\n      onPress={() => {\n        comboBoxState?.setValue(null);\n      }}\n      iconType=\"circled\"\n      // TODO: i18n once stabilized\n      aria-label=\"Clear selection\"\n      // Prevent this button from acting as a trigger for opening/closing the ComboBox\n      slot={null}\n      excludeFromTabOrder\n    />\n  );\n}\n\nfunction ComboBoxInput({\n  inputRef,\n  isReadOnly,\n  placeholder,\n  isClearable,\n}: {\n  inputRef: MutableRefObject<HTMLInputElement | null>;\n  isReadOnly: boolean | undefined;\n  placeholder: string | undefined;\n  isClearable: boolean;\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      onKeyDown={(e) => {\n        if (e.key === 'Escape' && !comboBoxState?.isOpen && isClearable) {\n          comboBoxState?.setValue(null);\n        }\n      }}\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> extends Pick<\n  RACListBoxItemProps<T>,\n  'isDisabled' | 'onHoverStart' | 'onHoverEnd'\n> {\n  /** The ID of the item. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the label. */\n  children: StringLikeChildren;\n}\n\n/** Renders a single list item within `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          <IconCheckBold />\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"]}
+{"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 { IconCheckBold, IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { XButton } from '../internal/x-button/x-button.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  estimatedRowHeight: 40,\n  estimatedHeadingHeight: 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 combo box. */\n  value: Key | null;\n  /** The value of the combo box input. */\n  inputValue: string;\n  /**\n   * The selected key in the combo box.\n   * @deprecated Use `value` instead.\n   */\n  selectedKey: Key | null;\n}\n\nexport interface ComboBoxProps<T extends CollectionItem = CollectionItem>\n  extends\n    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      | 'inputValue'\n      | 'defaultInputValue'\n      | 'autoFocus'\n      | 'onInputChange'\n      | 'onFocus'\n      | 'onBlur'\n      | 'onOpenChange'\n    > {\n  /** The current value (controlled). */\n  value?: Key | null;\n  /** The initial value (uncontrolled). */\n  defaultValue?: Key;\n  /** Handler that is called when the value changes. */\n  onChange?: (key: Key | null) => void;\n  /**\n   * The currently selected key in the collection (controlled).\n   * @deprecated Use `value` instead.\n   */\n  selectedKey?: Key | null;\n  /**\n   * The initial selected key in the collection (uncontrolled).\n   * @deprecated Use `defaultValue` instead.\n   */\n  defaultSelectedKey?: Key;\n  /**\n   * Handler that is called when the selection changes.\n   * @deprecated Use `onChange` instead.\n   */\n  onSelectionChange?: (key: Key | null) => void;\n  /** Whether to display a clear button to clear the selection. */\n  isClearable?: boolean;\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    isClearable = false,\n    UNSTABLE_isLoading: isLoading,\n    UNSTABLE_onLoadMore: onLoadMore,\n    apiRef,\n    value,\n    defaultValue,\n    onChange,\n    selectedKey,\n    defaultSelectedKey,\n    onSelectionChange,\n    validate,\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 isFieldClearable = isClearable && !props.isDisabled && !isReadOnly;\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      selectionMode=\"single\"\n      value={value}\n      defaultValue={defaultValue}\n      onChange={onChange}\n      selectedKey={selectedKey}\n      defaultSelectedKey={defaultSelectedKey}\n      onSelectionChange={onSelectionChange}\n      menuTrigger=\"focus\"\n      isReadOnly={isReadOnly}\n      data-readonly={isReadOnly ? true : undefined}\n      validate={\n        validate\n          ? ({ inputValue, value }) => {\n              return validate({ inputValue, value, selectedKey: value });\n            }\n          : undefined\n      }\n    >\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACGroup className=\"cim-combo-box-input-group\">\n        <ComboBoxInput\n          inputRef={inputRef}\n          isReadOnly={isReadOnly}\n          placeholder={placeholder}\n          isClearable={isFieldClearable}\n        />\n        {isFieldClearable && <ComboBoxClearButton onClear={() => inputRef.current?.focus()} />}\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 ComboBoxClearButton({ onClear }: { onClear?: () => void }) {\n  const comboBoxState = useContext(RACComboBoxStateContext);\n  const selectMessages = useLocalizedMessages('select');\n  const inputValue = comboBoxState?.inputValue;\n\n  if (!comboBoxState || inputValue === '') {\n    return null;\n  }\n\n  return (\n    <XButton\n      onPress={() => {\n        comboBoxState.setValue(null);\n        onClear?.();\n      }}\n      iconType=\"circled\"\n      aria-label={selectMessages.format('clearSelection')}\n      // Prevent this button from acting as a trigger for opening/closing the ComboBox\n      slot={null}\n      excludeFromTabOrder\n    />\n  );\n}\n\nfunction ComboBoxInput({\n  inputRef,\n  isReadOnly,\n  placeholder,\n  isClearable,\n}: {\n  inputRef: MutableRefObject<HTMLInputElement | null>;\n  isReadOnly: boolean | undefined;\n  placeholder: string | undefined;\n  isClearable: boolean;\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      onKeyDown={(e) => {\n        if (e.key === 'Escape' && !comboBoxState?.isOpen && isClearable) {\n          comboBoxState?.setValue(null);\n        }\n      }}\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> extends Pick<\n  RACListBoxItemProps<T>,\n  'isDisabled' | 'onHoverStart' | 'onHoverEnd'\n> {\n  /** The ID of the item. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the label. */\n  children: StringLikeChildren;\n}\n\n/** Renders a single list item within `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          <IconCheckBold />\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/internal/input/input.d.ts

@@ -1,8 +1,2 @@
-import { type InputProps as RACInputProps } from 'react-aria-components';
-import type { CommonProps } from '../../types.js';
-interface InputProps extends CommonProps, Exclude<RACInputProps, 'className' | 'style'> {
-    width?: 'fit-content' | 'full-width';
-}
-export declare function Input(props: InputProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=input.d.ts.map

package/dist/commonjs/components/internal/input/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../../src/components/internal/input/input.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqB,KAAK,UAAU,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC5F,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAGlD,UAAU,UAAW,SAAQ,WAAW,EAAE,OAAO,CAAC,aAAa,EAAE,WAAW,GAAG,OAAO,CAAC;IACrF,KAAK,CAAC,EAAE,aAAa,GAAG,YAAY,CAAC;CACtC;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,2CAqDtC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../../src/components/internal/input/input.tsx"],"names":[],"mappings":""}

package/dist/commonjs/components/internal/input/input.js

@@ -5,32 +5,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = Input;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const utils_1 = require("@react-aria/utils");
 const clsx_1 = __importDefault(require("clsx"));
-const react_1 = require("react");
 const react_aria_components_1 = require("react-aria-components");
 const utils_js_1 = require("../../typography/utils.js");
+/**
+ * Renders a styled input field.
+ * @internal
+ */
 function Input(props) {
-    const inputRef = (0, react_1.useRef)(null);
     // TODO: find a better way to extract common props, if a new prop is added to `CommonProps` this will break
-    const { id, UNSAFE_className, UNSAFE_style, 'data-cim-style-root': dataCimStyleRoot, width, ...inputProps } = props;
-    // Field sizing based on input length for browsers that don't support `field-sizing: content`
-    (0, utils_1.useLayoutEffect)(() => {
-        const input = inputRef.current;
-        function setInputLengthStyle() {
-            // Ensure input value changes are flushed before updating input width, especially in Safari
-            requestAnimationFrame(() => input?.style.setProperty('--cim-input-length', input?.value.length.toString() ?? '0'));
-        }
-        if (input != null) {
-            setInputLengthStyle();
-            input.addEventListener('input', setInputLengthStyle);
-            input.addEventListener('change', setInputLengthStyle);
-        }
-        return () => {
-            input?.removeEventListener('input', setInputLengthStyle);
-            input?.removeEventListener('change', setInputLengthStyle);
-        };
-    }, []);
-    return ((0, jsx_runtime_1.jsx)("div", { id: id, className: (0, clsx_1.default)('cim-input', UNSAFE_className), style: UNSAFE_style, "data-cim-style-root": dataCimStyleRoot, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Input, { ...inputProps, ref: inputRef, className: (0, clsx_1.default)('cim-input-control', (0, utils_js_1.textStyle)({ variant: 'body' })), "data-width": width }) }));
+    const { id, UNSAFE_className, UNSAFE_style, 'data-cim-style-root': dataCimStyleRoot, contentWidth, ...inputProps } = props;
+    return ((0, jsx_runtime_1.jsx)("div", { id: id, className: (0, clsx_1.default)('cim-input', UNSAFE_className), style: UNSAFE_style, "data-cim-style-root": dataCimStyleRoot, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Input, { ...inputProps, className: (0, clsx_1.default)('cim-input-control', (0, utils_js_1.textStyle)({ variant: 'body' })), style: { '--cim-input-content-width': contentWidth } }) }));
 }
 //# sourceMappingURL=input.js.map

package/dist/commonjs/components/internal/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../../../src/components/internal/input/input.tsx"],"names":[],"mappings":";;;;;AAWA,sBAqDC;;AAhED,6CAAoD;AACpD,gDAAwB;AACxB,iCAA+B;AAC/B,iEAA4F;AAE5F,wDAAsD;AAMtD,SAAgB,KAAK,CAAC,KAAiB;IACrC,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAC;IAChD,2GAA2G;IAC3G,MAAM,EACJ,EAAE,EACF,gBAAgB,EAChB,YAAY,EACZ,qBAAqB,EAAE,gBAAgB,EAEvC,KAAK,EAEL,GAAG,UAAU,EACd,GAAG,KAAK,CAAC;IAEV,6FAA6F;IAC7F,IAAA,uBAAe,EAAC,GAAG,EAAE;QACnB,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC;QAE/B,SAAS,mBAAmB;YAC1B,2FAA2F;YAC3F,qBAAqB,CAAC,GAAG,EAAE,CACzB,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,oBAAoB,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,QAAQ,EAAE,IAAI,GAAG,CAAC,CACtF,CAAC;QACJ,CAAC;QAED,IAAI,KAAK,IAAI,IAAI,EAAE,CAAC;YAClB,mBAAmB,EAAE,CAAC;YAEtB,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAC;YACrD,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,mBAAmB,CAAC,CAAC;QACxD,CAAC;QAED,OAAO,GAAG,EAAE;YACV,KAAK,EAAE,mBAAmB,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAC;YACzD,KAAK,EAAE,mBAAmB,CAAC,QAAQ,EAAE,mBAAmB,CAAC,CAAC;QAC5D,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,gCACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,IAAA,cAAI,EAAC,WAAW,EAAE,gBAAgB,CAAC,EAC9C,KAAK,EAAE,YAAY,yBACE,gBAAgB,YAErC,uBAAC,6BAAQ,OACH,UAAU,EACd,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,IAAA,cAAI,EAAC,mBAAmB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC,gBACxD,KAAK,GACjB,GACE,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { useLayoutEffect } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport { useRef } from 'react';\nimport { Input as RACInput, type InputProps as RACInputProps } from 'react-aria-components';\nimport type { CommonProps } from '../../types.js';\nimport { textStyle } from '../../typography/utils.js';\n\ninterface InputProps extends CommonProps, Exclude<RACInputProps, 'className' | 'style'> {\n  width?: 'fit-content' | 'full-width';\n}\n\nexport function Input(props: InputProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  // TODO: find a better way to extract common props, if a new prop is added to `CommonProps` this will break\n  const {\n    id,\n    UNSAFE_className,\n    UNSAFE_style,\n    'data-cim-style-root': dataCimStyleRoot,\n\n    width,\n\n    ...inputProps\n  } = props;\n\n  // Field sizing based on input length for browsers that don't support `field-sizing: content`\n  useLayoutEffect(() => {\n    const input = inputRef.current;\n\n    function setInputLengthStyle() {\n      // Ensure input value changes are flushed before updating input width, especially in Safari\n      requestAnimationFrame(() =>\n        input?.style.setProperty('--cim-input-length', input?.value.length.toString() ?? '0'),\n      );\n    }\n\n    if (input != null) {\n      setInputLengthStyle();\n\n      input.addEventListener('input', setInputLengthStyle);\n      input.addEventListener('change', setInputLengthStyle);\n    }\n\n    return () => {\n      input?.removeEventListener('input', setInputLengthStyle);\n      input?.removeEventListener('change', setInputLengthStyle);\n    };\n  }, []);\n\n  return (\n    <div\n      id={id}\n      className={clsx('cim-input', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-cim-style-root={dataCimStyleRoot}\n    >\n      <RACInput\n        {...inputProps}\n        ref={inputRef}\n        className={clsx('cim-input-control', textStyle({ variant: 'body' }))}\n        data-width={width}\n      />\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../../../src/components/internal/input/input.tsx"],"names":[],"mappings":";;;;;AAcA,sBA2BC;;AAzCD,gDAAwB;AAExB,iEAA4F;AAE5F,wDAAsD;AAMtD;;;GAGG;AACH,SAAgB,KAAK,CAAC,KAAiB;IACrC,2GAA2G;IAC3G,MAAM,EACJ,EAAE,EACF,gBAAgB,EAChB,YAAY,EACZ,qBAAqB,EAAE,gBAAgB,EAEvC,YAAY,EAEZ,GAAG,UAAU,EACd,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,gCACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,IAAA,cAAI,EAAC,WAAW,EAAE,gBAAgB,CAAC,EAC9C,KAAK,EAAE,YAAY,yBACE,gBAAgB,YAErC,uBAAC,6BAAQ,OACH,UAAU,EACd,SAAS,EAAE,IAAA,cAAI,EAAC,mBAAmB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC,EACpE,KAAK,EAAE,EAAE,2BAA2B,EAAE,YAAY,EAAmB,GACrE,GACE,CACP,CAAC;AACJ,CAAC","sourcesContent":["import clsx from 'clsx';\nimport type { CSSProperties } from 'react';\nimport { Input as RACInput, type InputProps as RACInputProps } from 'react-aria-components';\nimport type { CommonProps } from '../../types.js';\nimport { textStyle } from '../../typography/utils.js';\n\ninterface InputProps extends CommonProps, Exclude<RACInputProps, 'className' | 'style'> {\n  contentWidth?: CSSProperties['width'];\n}\n\n/**\n * Renders a styled input field.\n * @internal\n */\nexport function Input(props: InputProps) {\n  // TODO: find a better way to extract common props, if a new prop is added to `CommonProps` this will break\n  const {\n    id,\n    UNSAFE_className,\n    UNSAFE_style,\n    'data-cim-style-root': dataCimStyleRoot,\n\n    contentWidth,\n\n    ...inputProps\n  } = props;\n\n  return (\n    <div\n      id={id}\n      className={clsx('cim-input', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-cim-style-root={dataCimStyleRoot}\n    >\n      <RACInput\n        {...inputProps}\n        className={clsx('cim-input-control', textStyle({ variant: 'body' }))}\n        style={{ '--cim-input-content-width': contentWidth } as CSSProperties}\n      />\n    </div>\n  );\n}\n"]}