npm - @cimpress-ui/react - Versions diffs - 1.7.1 → 1.8.1 - Mend

@cimpress-ui/react 1.7.1 → 1.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (230) hide show

package/dist/esm/components/stepper/stepper-item.js CHANGED Viewed

@@ -10,14 +10,15 @@ import { Text } from '../typography/text.js';
 import { StepContext } from './context.js';
 function UNSTABLE_StepperItem({ title, description, status: overrideStatus, UNSAFE_className, UNSAFE_style, ...props }, ref) {
     const labelId = useId();
-    const { currentStep, stepIndex, onChange } = useContext(StepContext);
+    const { currentStep, stepIndex, onChange, stepCount, orientation } = useContext(StepContext);
     const isCurrent = stepIndex === currentStep;
     const isPrevious = stepIndex < currentStep;
+    const isLast = stepIndex === stepCount - 1;
     const status = overrideStatus ?? (isCurrent ? 'in-progress' : isPrevious ? 'complete' : undefined);
     const isNavigable = !isCurrent && onChange && (status != null || isPrevious);
     const titleElement = (_jsx(Text, { id: labelId, as: "span", variant: isCurrent ? 'body-semibold' : 'body', UNSAFE_className: "cim-stepper-item-title", children: title }));
     const iconElement = (_jsx("div", { className: "cim-stepper-item-icon", children: status && _jsx(StepperItemIcon, { status: status, isCurrent: isCurrent }) }));
-    return (_jsxs("li", { ...props, ref: ref, className: clsx('cim-stepper-item', UNSAFE_className), style: UNSAFE_style, "data-status": status, "aria-current": isCurrent, children: [_jsxs("div", { className: "cim-stepper-item-icon-container", children: [isNavigable ? (_jsx("button", { className: "cim-stepper-item-icon-button", type: "button", onClick: onChange, "aria-labelledby": labelId, children: iconElement })) : (iconElement), _jsx("div", { className: "cim-stepper-item-tail" })] }), _jsxs("div", { className: "cim-stepper-item-content", children: [isNavigable ? (_jsx("button", { className: "cim-stepper-item-title-button", type: "button", onClick: onChange, tabIndex: -1, children: titleElement })) : (titleElement), description && (_jsx(Text, { as: "div", UNSAFE_className: "cim-stepper-item-description", variant: "medium", tone: "muted", children: description }))] })] }));
+    return (_jsxs("li", { ...props, ref: ref, className: clsx('cim-stepper-item', UNSAFE_className), style: UNSAFE_style, "data-status": status, "aria-current": isCurrent, children: [_jsxs("div", { className: "cim-stepper-item-icon-container", children: [isNavigable ? (_jsx("button", { className: "cim-stepper-item-icon-button", type: "button", onClick: onChange, "aria-labelledby": labelId, children: iconElement })) : (iconElement), !isLast && orientation === 'vertical' && _jsx("div", { className: "cim-stepper-item-tail" })] }), _jsxs("div", { className: "cim-stepper-item-content", children: [isNavigable ? (_jsx("button", { className: "cim-stepper-item-title-button", type: "button", onClick: onChange, tabIndex: -1, children: titleElement })) : (titleElement), description && (_jsx(Text, { as: "div", UNSAFE_className: "cim-stepper-item-description", variant: "medium", tone: "muted", children: description }))] })] }));
 }
 /**
  * Represents a single step in a stepper component.

package/dist/esm/components/stepper/stepper-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stepper-item.js","sourceRoot":"","sources":["../../../../src/components/stepper/stepper-item.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACzE,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAY3C,SAAS,oBAAoB,CAC3B,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAA6B,EACnH,GAAgC;IAEhC,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IAExB,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;~~IACrE~~,MAAM,SAAS,GAAG,SAAS,KAAK,WAAW,CAAC;IAC5C,MAAM,UAAU,GAAG,SAAS,GAAG,WAAW,CAAC;IAE3C,MAAM,MAAM,GAAG,cAAc,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAEnG,MAAM,WAAW,GAAG,CAAC,SAAS,IAAI,QAAQ,IAAI,CAAC,MAAM,IAAI,IAAI,IAAI,UAAU,CAAC,CAAC;IAE7E,MAAM,YAAY,GAAG,CACnB,KAAC,IAAI,IACH,EAAE,EAAE,OAAO,EACX,EAAE,EAAC,MAAM,EACT,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,EAC7C,gBAAgB,EAAC,wBAAwB,YAExC,KAAK,GACD,CACR,CAAC;IACF,MAAM,WAAW,GAAG,CAClB,cAAK,SAAS,EAAC,uBAAuB,YAAE,MAAM,IAAI,KAAC,eAAe,IAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,GAAI,GAAO,CACnH,CAAC;IAEF,OAAO,CACL,iBACM,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,EACrD,KAAK,EAAE,YAAY,iBACN,MAAM,kBACL,SAAS,aAEvB,eAAK,SAAS,EAAC,iCAAiC,aAC7C,WAAW,CAAC,CAAC,CAAC,CACb,iBAAQ,SAAS,EAAC,8BAA8B,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,QAAQ,qBAAmB,OAAO,YACvG,WAAW,GACL,CACV,CAAC,CAAC,CAAC,CACF,WAAW,CACZ,~~EACD~~,cAAK,SAAS,EAAC,uBAAuB,GAAG,~~IACrC~~,EACN,eAAK,SAAS,EAAC,0BAA0B,aACtC,WAAW,CAAC,CAAC,CAAC,CACb,iBAAQ,SAAS,EAAC,+BAA+B,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC,YAC5F,YAAY,GACN,CACV,CAAC,CAAC,CAAC,CACF,YAAY,CACb,EACA,WAAW,IAAI,CACd,KAAC,IAAI,IAAC,EAAE,EAAC,KAAK,EAAC,gBAAgB,EAAC,8BAA8B,EAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,YACzF,WAAW,GACP,CACR,IACG,IACH,CACN,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,qBAAqB,GAAG,cAAc,CAAC,UAAU,CAAC,oBAAoB,CAAC,EAAE,aAAa,CAAC,CAAC;AAE9F,OAAO,EAAE,qBAAqB,IAAI,oBAAoB,EAAE,CAAC;AAEzD,MAAM,YAAY,GAAG;IACnB,QAAQ,EAAE,aAAa;IACvB,sDAAsD;IACtD,KAAK,EAAE,GAAG,EAAE,CAAC,CACX,eAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,aAC5F,eACE,CAAC,EAAC,mPAAmP,EACrP,IAAI,EAAC,cAAc,GACnB,EACF,eACE,CAAC,EAAC,mPAAmP,EACrP,IAAI,EAAC,cAAc,GACnB,IACE,CACP;IACD,sDAAsD;IACtD,OAAO,EAAE,GAAG,EAAE,CAAC,CACb,eAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,aAC5F,eACE,CAAC,EAAC,yHAAyH,EAC3H,IAAI,EAAC,cAAc,GACnB,EACF,eAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAC,GAAG,EAAC,aAAa,EAAC,OAAO,GAAG,IAC/F,CACP;IACD,aAAa,EAAE,kBAAkB;CAClC,CAAC;AAEF,gEAAgE;AAChE,SAAS,eAAe,CAAC,EAAE,MAAM,EAAE,SAAS,EAAiD;IAC3F,MAAM,IAAI,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC;IAElC,IAAI,MAAM,KAAK,aAAa,IAAI,CAAC,SAAS,EAAE,CAAC;QAC3C,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,KAAC,IAAI,0BAAe,CAAC;AAC9B,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useContext, type ForwardedRef } from 'react';\nimport { useId } from 'react-aria';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheckBold, IconCircleBoldFill } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps } from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { StepContext } from './context.js';\nimport type { StepperStatus } from './types.js';\n\nexport interface UNSTABLE_StepperItemProps extends CommonProps {\n /** The title of the step. /\n title: string;\n /* The description of the step. /\n description?: string;\n /* The status of the step. /\n status?: StepperStatus;\n}\n\nfunction UNSTABLE_StepperItem(\n { title, description, status: overrideStatus, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_StepperItemProps,\n ref: ForwardedRef<HTMLLIElement>,\n) {\n const labelId = useId();\n\n const { currentStep, stepIndex, onChange } = useContext(StepContext);\n const isCurrent = stepIndex === currentStep;\n const isPrevious = stepIndex < currentStep;\n\n const status = overrideStatus ?? (isCurrent ? 'in-progress' : isPrevious ? 'complete' : undefined);\n\n const isNavigable = !isCurrent && onChange && (status != null \|\| isPrevious);\n\n const titleElement = (\n <Text\n id={labelId}\n as=\"span\"\n variant={isCurrent ? 'body-semibold' : 'body'}\n UNSAFE_className=\"cim-stepper-item-title\"\n >\n {title}\n </Text>\n );\n const iconElement = (\n <div className=\"cim-stepper-item-icon\">{status && <StepperItemIcon status={status} isCurrent={isCurrent} />}</div>\n );\n\n return (\n <li\n {...props}\n ref={ref}\n className={clsx('cim-stepper-item', UNSAFE_className)}\n style={UNSAFE_style}\n data-status={status}\n aria-current={isCurrent}\n >\n <div className=\"cim-stepper-item-icon-container\">\n {isNavigable ? (\n <button className=\"cim-stepper-item-icon-button\" type=\"button\" onClick={onChange} aria-labelledby={labelId}>\n {iconElement}\n </button>\n ) : (\n iconElement\n )}\n <div className=\"cim-stepper-item-tail\" ~~/>\~~n </div>\n <div className=\"cim-stepper-item-content\">\n {isNavigable ? (\n <button className=\"cim-stepper-item-title-button\" type=\"button\" onClick={onChange} tabIndex={-1}>\n {titleElement}\n </button>\n ) : (\n titleElement\n )}\n {description && (\n <Text as=\"div\" UNSAFE_className=\"cim-stepper-item-description\" variant=\"medium\" tone=\"muted\">\n {description}\n </Text>\n )}\n </div>\n </li>\n );\n}\n\n/\n Represents a single step in a stepper component.\n */\nconst _UNSTABLE_StepperItem = withStyleProps(forwardRef(UNSTABLE_StepperItem), 'StepperItem');\n\nexport { _UNSTABLE_StepperItem as UNSTABLE_StepperItem };\n\nconst statusToIcon = {\n complete: IconCheckBold,\n // TODO: replace with icon from library when available\n error: () => (\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M24.1421 21.1421C24.9232 21.9232 24.9232 23.1895 24.1421 23.9706C23.3611 24.7516 22.0948 24.7516 21.3137 23.9706L8.58579 11.2426C7.80474 10.4616 7.80474 9.19526 8.58579 8.41421C9.36684 7.63316 10.6332 7.63316 11.4142 8.41421L24.1421 21.1421Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M21.1421 8.85786C21.9232 8.07682 23.1895 8.07682 23.9706 8.85786C24.7516 9.63891 24.7516 10.9052 23.9706 11.6863L11.2426 24.4142C10.4616 25.1953 9.19526 25.1953 8.41421 24.4142C7.63316 23.6332 7.63316 22.3668 8.41421 21.5858L21.1421 8.85786Z\"\n fill=\"currentColor\"\n />\n </svg>\n ),\n // TODO: replace with icon from library when available\n warning: () => (\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M18 24C18 25.1046 17.1046 26 16 26C14.8954 26 14 25.1046 14 24C14 22.8954 14.8954 22 16 22C17.1046 22 18 22.8954 18 24Z\"\n fill=\"currentColor\"\n />\n <line x1=\"16\" y1=\"8\" x2=\"16\" y2=\"18\" stroke=\"currentColor\" strokeWidth=\"4\" strokeLinecap=\"round\" />\n </svg>\n ),\n 'in-progress': IconCircleBoldFill,\n};\n\n// eslint-disable-next-line react-refresh/only-export-components\nfunction StepperItemIcon({ status, isCurrent }: { status: StepperStatus; isCurrent: boolean }) {\n const Icon = statusToIcon[status];\n\n if (status === 'in-progress' && !isCurrent) {\n return null;\n }\n\n return <Icon aria-hidden />;\n}\n"]}
1	+ {"version":3,"file":"stepper-item.js","sourceRoot":"","sources":["../../../../src/components/stepper/stepper-item.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACzE,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAY3C,SAAS,oBAAoB,CAC3B,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAA6B,EACnH,GAAgC;IAEhC,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IAExB,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAC7F,MAAM,SAAS,GAAG,SAAS,KAAK,WAAW,CAAC;IAC5C,MAAM,UAAU,GAAG,SAAS,GAAG,WAAW,CAAC;IAC3C,MAAM,MAAM,GAAG,SAAS,KAAK,SAAS,GAAG,CAAC,CAAC;IAE3C,MAAM,MAAM,GAAG,cAAc,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAEnG,MAAM,WAAW,GAAG,CAAC,SAAS,IAAI,QAAQ,IAAI,CAAC,MAAM,IAAI,IAAI,IAAI,UAAU,CAAC,CAAC;IAE7E,MAAM,YAAY,GAAG,CACnB,KAAC,IAAI,IACH,EAAE,EAAE,OAAO,EACX,EAAE,EAAC,MAAM,EACT,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,EAC7C,gBAAgB,EAAC,wBAAwB,YAExC,KAAK,GACD,CACR,CAAC;IACF,MAAM,WAAW,GAAG,CAClB,cAAK,SAAS,EAAC,uBAAuB,YAAE,MAAM,IAAI,KAAC,eAAe,IAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,GAAI,GAAO,CACnH,CAAC;IAEF,OAAO,CACL,iBACM,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,EACrD,KAAK,EAAE,YAAY,iBACN,MAAM,kBACL,SAAS,aAEvB,eAAK,SAAS,EAAC,iCAAiC,aAC7C,WAAW,CAAC,CAAC,CAAC,CACb,iBAAQ,SAAS,EAAC,8BAA8B,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,QAAQ,qBAAmB,OAAO,YACvG,WAAW,GACL,CACV,CAAC,CAAC,CAAC,CACF,WAAW,CACZ,EACA,CAAC,MAAM,IAAI,WAAW,KAAK,UAAU,IAAI,cAAK,SAAS,EAAC,uBAAuB,GAAG,IAC/E,EACN,eAAK,SAAS,EAAC,0BAA0B,aACtC,WAAW,CAAC,CAAC,CAAC,CACb,iBAAQ,SAAS,EAAC,+BAA+B,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC,YAC5F,YAAY,GACN,CACV,CAAC,CAAC,CAAC,CACF,YAAY,CACb,EACA,WAAW,IAAI,CACd,KAAC,IAAI,IAAC,EAAE,EAAC,KAAK,EAAC,gBAAgB,EAAC,8BAA8B,EAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,YACzF,WAAW,GACP,CACR,IACG,IACH,CACN,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,qBAAqB,GAAG,cAAc,CAAC,UAAU,CAAC,oBAAoB,CAAC,EAAE,aAAa,CAAC,CAAC;AAE9F,OAAO,EAAE,qBAAqB,IAAI,oBAAoB,EAAE,CAAC;AAEzD,MAAM,YAAY,GAAG;IACnB,QAAQ,EAAE,aAAa;IACvB,sDAAsD;IACtD,KAAK,EAAE,GAAG,EAAE,CAAC,CACX,eAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,aAC5F,eACE,CAAC,EAAC,mPAAmP,EACrP,IAAI,EAAC,cAAc,GACnB,EACF,eACE,CAAC,EAAC,mPAAmP,EACrP,IAAI,EAAC,cAAc,GACnB,IACE,CACP;IACD,sDAAsD;IACtD,OAAO,EAAE,GAAG,EAAE,CAAC,CACb,eAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,aAC5F,eACE,CAAC,EAAC,yHAAyH,EAC3H,IAAI,EAAC,cAAc,GACnB,EACF,eAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAC,GAAG,EAAC,aAAa,EAAC,OAAO,GAAG,IAC/F,CACP;IACD,aAAa,EAAE,kBAAkB;CAClC,CAAC;AAEF,gEAAgE;AAChE,SAAS,eAAe,CAAC,EAAE,MAAM,EAAE,SAAS,EAAiD;IAC3F,MAAM,IAAI,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC;IAElC,IAAI,MAAM,KAAK,aAAa,IAAI,CAAC,SAAS,EAAE,CAAC;QAC3C,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,KAAC,IAAI,0BAAe,CAAC;AAC9B,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useContext, type ForwardedRef } from 'react';\nimport { useId } from 'react-aria';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheckBold, IconCircleBoldFill } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps } from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { StepContext } from './context.js';\nimport type { StepperStatus } from './types.js';\n\nexport interface UNSTABLE_StepperItemProps extends CommonProps {\n /** The title of the step. /\n title: string;\n /* The description of the step. /\n description?: string;\n /* The status of the step. /\n status?: StepperStatus;\n}\n\nfunction UNSTABLE_StepperItem(\n { title, description, status: overrideStatus, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_StepperItemProps,\n ref: ForwardedRef<HTMLLIElement>,\n) {\n const labelId = useId();\n\n const { currentStep, stepIndex, onChange, stepCount, orientation } = useContext(StepContext);\n const isCurrent = stepIndex === currentStep;\n const isPrevious = stepIndex < currentStep;\n const isLast = stepIndex === stepCount - 1;\n\n const status = overrideStatus ?? (isCurrent ? 'in-progress' : isPrevious ? 'complete' : undefined);\n\n const isNavigable = !isCurrent && onChange && (status != null \|\| isPrevious);\n\n const titleElement = (\n <Text\n id={labelId}\n as=\"span\"\n variant={isCurrent ? 'body-semibold' : 'body'}\n UNSAFE_className=\"cim-stepper-item-title\"\n >\n {title}\n </Text>\n );\n const iconElement = (\n <div className=\"cim-stepper-item-icon\">{status && <StepperItemIcon status={status} isCurrent={isCurrent} />}</div>\n );\n\n return (\n <li\n {...props}\n ref={ref}\n className={clsx('cim-stepper-item', UNSAFE_className)}\n style={UNSAFE_style}\n data-status={status}\n aria-current={isCurrent}\n >\n <div className=\"cim-stepper-item-icon-container\">\n {isNavigable ? (\n <button className=\"cim-stepper-item-icon-button\" type=\"button\" onClick={onChange} aria-labelledby={labelId}>\n {iconElement}\n </button>\n ) : (\n iconElement\n )}\n {!isLast && orientation === 'vertical' && <div className=\"cim-stepper-item-tail\" />}\n </div>\n <div className=\"cim-stepper-item-content\">\n {isNavigable ? (\n <button className=\"cim-stepper-item-title-button\" type=\"button\" onClick={onChange} tabIndex={-1}>\n {titleElement}\n </button>\n ) : (\n titleElement\n )}\n {description && (\n <Text as=\"div\" UNSAFE_className=\"cim-stepper-item-description\" variant=\"medium\" tone=\"muted\">\n {description}\n </Text>\n )}\n </div>\n </li>\n );\n}\n\n/\n Represents a single step in a stepper component.\n */\nconst _UNSTABLE_StepperItem = withStyleProps(forwardRef(UNSTABLE_StepperItem), 'StepperItem');\n\nexport { _UNSTABLE_StepperItem as UNSTABLE_StepperItem };\n\nconst statusToIcon = {\n complete: IconCheckBold,\n // TODO: replace with icon from library when available\n error: () => (\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M24.1421 21.1421C24.9232 21.9232 24.9232 23.1895 24.1421 23.9706C23.3611 24.7516 22.0948 24.7516 21.3137 23.9706L8.58579 11.2426C7.80474 10.4616 7.80474 9.19526 8.58579 8.41421C9.36684 7.63316 10.6332 7.63316 11.4142 8.41421L24.1421 21.1421Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M21.1421 8.85786C21.9232 8.07682 23.1895 8.07682 23.9706 8.85786C24.7516 9.63891 24.7516 10.9052 23.9706 11.6863L11.2426 24.4142C10.4616 25.1953 9.19526 25.1953 8.41421 24.4142C7.63316 23.6332 7.63316 22.3668 8.41421 21.5858L21.1421 8.85786Z\"\n fill=\"currentColor\"\n />\n </svg>\n ),\n // TODO: replace with icon from library when available\n warning: () => (\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M18 24C18 25.1046 17.1046 26 16 26C14.8954 26 14 25.1046 14 24C14 22.8954 14.8954 22 16 22C17.1046 22 18 22.8954 18 24Z\"\n fill=\"currentColor\"\n />\n <line x1=\"16\" y1=\"8\" x2=\"16\" y2=\"18\" stroke=\"currentColor\" strokeWidth=\"4\" strokeLinecap=\"round\" />\n </svg>\n ),\n 'in-progress': IconCircleBoldFill,\n};\n\n// eslint-disable-next-line react-refresh/only-export-components\nfunction StepperItemIcon({ status, isCurrent }: { status: StepperStatus; isCurrent: boolean }) {\n const Icon = statusToIcon[status];\n\n if (status === 'in-progress' && !isCurrent) {\n return null;\n }\n\n return <Icon aria-hidden />;\n}\n"]}

package/dist/esm/components/stepper/stepper.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../../src/components/stepper/stepper.tsx"],"names":[],"mappings":"AAGA,OAAO,~~EAA+B~~,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;~~AAGpE~~,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,qBAAsB,SAAQ,WAAW;IACxD,2CAA2C;IAC3C,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CACzC;~~AAyCD~~;;GAEG;AACH,QAAA,MAAM,iBAAiB,yKAA0D,CAAC;AAElF,OAAO,EAAE,iBAAiB,IAAI,gBAAgB,EAAE,CAAC"}
1	+ {"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../../src/components/stepper/stepper.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAmD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,qBAAsB,SAAQ,WAAW;IACxD,2CAA2C;IAC3C,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CACzC;AAoDD;;GAEG;AACH,QAAA,MAAM,iBAAiB,yKAA0D,CAAC;AAElF,OAAO,EAAE,iBAAiB,IAAI,gBAAgB,EAAE,CAAC"}

package/dist/esm/components/stepper/stepper.js CHANGED Viewed

@@ -1,19 +1,25 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { Children } from 'react';
 import { forwardRef } from '../../forward-ref.js';
 import { withStyleProps } from '../../with-style-props.js';
 import { StepContext } from './context.js';
 function UNSTABLE_Stepper({ children, currentStep, onChange, orientation = 'horizontal', UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    return (_jsx("ol", { ...props, ref: ref, className: clsx('cim-stepper', UNSAFE_className), style: UNSAFE_style, "data-orientation": orientation, children: Children.map(children, (child, stepIndex) => (_jsx(StepContext.Provider, { value: {
-                currentStep: currentStep ?? -1,
-                stepIndex,
-                onChange: onChange &&
-                    (() => {
-                        onChange(stepIndex);
-                    }),
-            }, children: child }))) }));
+    const stepCount = Children.count(children);
+    return (_jsx("ol", { ...props, ref: ref, className: clsx('cim-stepper', UNSAFE_className), style: { ...UNSAFE_style, '--cim-stepper-step-count': stepCount }, "data-orientation": orientation, children: Children.map(children, (child, stepIndex) => {
+            const isLast = stepIndex === stepCount - 1;
+            return (_jsxs(_Fragment, { children: [_jsx(StepContext.Provider, { value: {
+                            orientation,
+                            stepCount: Children.count(children),
+                            currentStep: currentStep ?? -1,
+                            stepIndex,
+                            onChange: onChange &&
+                                (() => {
+                                    onChange(stepIndex);
+                                }),
+                        }, children: child }), !isLast && orientation === 'horizontal' && _jsx("div", { className: "cim-stepper-item-tail" })] }));
+        }) }));
 }
 /**
  * Displays a series of steps in a process.

package/dist/esm/components/stepper/stepper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stepper.js","sourceRoot":"","sources":["../../../../src/components/stepper/stepper.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,QAAQ,~~EAAqC~~,MAAM,OAAO,CAAC;~~AACpE~~,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAgB3C,SAAS,gBAAgB,CACvB,EACE,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,WAAW,GAAG,YAAY,EAC1B,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACc,EACxB,GAAmC;IAEnC,OAAO,CACL,gBACM,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,gBAAgB,CAAC,EAChD,KAAK,EAAE,YAAY,~~sBACD~~,WAAW,YAE5B,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,~~CAC5C~~,KAAC,WAAW,CAAC,QAAQ,IACnB,KAAK,EAAE;~~gBACL~~,WAAW,EAAE,WAAW,IAAI,CAAC,CAAC;~~gBAC9B~~,SAAS;~~gBACT~~,QAAQ,EACN,QAAQ;~~oBACR~~,CAAC,GAAG,EAAE;~~wBACJ~~,QAAQ,CAAC,SAAS,CAAC,CAAC;~~oBACtB~~,CAAC,CAAC;~~aACL~~,YAEA,KAAK,GACe,~~CACxB~~,CAAC,GACC,CACN,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,iBAAiB,GAAG,cAAc,CAAC,UAAU,CAAC,gBAAgB,CAAC,EAAE,SAAS,CAAC,CAAC;AAElF,OAAO,EAAE,iBAAiB,IAAI,gBAAgB,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { Children, type ForwardedRef, type ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps } from '../types.js';\nimport { StepContext } from './context.js';\n\nexport interface UNSTABLE_StepperProps extends CommonProps {\n /** The steps to display in the stepper. /\n children: ReactNode;\n /* The index of the active step. /\n currentStep?: number;\n /* The callback to call when the current step changes. /\n onChange?: (step: number) => void;\n /* The orientation of the stepper.\n \n @default 'horizontal'\n /\n orientation?: 'vertical' \| 'horizontal';\n}\n\nfunction UNSTABLE_Stepper(\n {\n children,\n currentStep,\n onChange,\n orientation = 'horizontal',\n UNSAFE_className,\n UNSAFE_style,\n ...props\n }: UNSTABLE_StepperProps,\n ref: ForwardedRef<HTMLOListElement>,\n) {\n return (\n <ol\n {...props}\n ref={ref}\n className={clsx('cim-stepper', UNSAFE_className)}\n style={UNSAFE_style}\n data-orientation={orientation}\n >\n {Children.map(children, (child, stepIndex) => (\n <StepContext.Provider\n value={{\n currentStep: currentStep ?? -1,\n stepIndex,\n onChange:\n onChange &&\n (() => {\n onChange(stepIndex);\n }),\n }}\n >\n {child}\n </StepContext.Provider>\n ))}\n </ol>\n );\n}\n\n/\n Displays a series of steps in a process.\n */\nconst _UNSTABLE_Stepper = withStyleProps(forwardRef(UNSTABLE_Stepper), 'Stepper');\n\nexport { _UNSTABLE_Stepper as UNSTABLE_Stepper };\n"]}
1	+ {"version":3,"file":"stepper.js","sourceRoot":"","sources":["../../../../src/components/stepper/stepper.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAyD,MAAM,OAAO,CAAC;AACxF,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAgB3C,SAAS,gBAAgB,CACvB,EACE,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,WAAW,GAAG,YAAY,EAC1B,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACc,EACxB,GAAmC;IAEnC,MAAM,SAAS,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAE3C,OAAO,CACL,gBACM,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,gBAAgB,CAAC,EAChD,KAAK,EAAE,EAAE,GAAG,YAAY,EAAE,0BAA0B,EAAE,SAAS,EAAmB,sBAChE,WAAW,YAE5B,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE;YAC3C,MAAM,MAAM,GAAG,SAAS,KAAK,SAAS,GAAG,CAAC,CAAC;YAE3C,OAAO,CACL,8BACE,KAAC,WAAW,CAAC,QAAQ,IACnB,KAAK,EAAE;4BACL,WAAW;4BACX,SAAS,EAAE,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC;4BACnC,WAAW,EAAE,WAAW,IAAI,CAAC,CAAC;4BAC9B,SAAS;4BACT,QAAQ,EACN,QAAQ;gCACR,CAAC,GAAG,EAAE;oCACJ,QAAQ,CAAC,SAAS,CAAC,CAAC;gCACtB,CAAC,CAAC;yBACL,YAEA,KAAK,GACe,EACtB,CAAC,MAAM,IAAI,WAAW,KAAK,YAAY,IAAI,cAAK,SAAS,EAAC,uBAAuB,GAAG,IACpF,CACJ,CAAC;QACJ,CAAC,CAAC,GACC,CACN,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,iBAAiB,GAAG,cAAc,CAAC,UAAU,CAAC,gBAAgB,CAAC,EAAE,SAAS,CAAC,CAAC;AAElF,OAAO,EAAE,iBAAiB,IAAI,gBAAgB,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { Children, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps } from '../types.js';\nimport { StepContext } from './context.js';\n\nexport interface UNSTABLE_StepperProps extends CommonProps {\n /** The steps to display in the stepper. /\n children: ReactNode;\n /* The index of the active step. /\n currentStep?: number;\n /* The callback to call when the current step changes. /\n onChange?: (step: number) => void;\n /* The orientation of the stepper.\n \n @default 'horizontal'\n /\n orientation?: 'vertical' \| 'horizontal';\n}\n\nfunction UNSTABLE_Stepper(\n {\n children,\n currentStep,\n onChange,\n orientation = 'horizontal',\n UNSAFE_className,\n UNSAFE_style,\n ...props\n }: UNSTABLE_StepperProps,\n ref: ForwardedRef<HTMLOListElement>,\n) {\n const stepCount = Children.count(children);\n\n return (\n <ol\n {...props}\n ref={ref}\n className={clsx('cim-stepper', UNSAFE_className)}\n style={{ ...UNSAFE_style, '--cim-stepper-step-count': stepCount } as CSSProperties}\n data-orientation={orientation}\n >\n {Children.map(children, (child, stepIndex) => {\n const isLast = stepIndex === stepCount - 1;\n\n return (\n <>\n <StepContext.Provider\n value={{\n orientation,\n stepCount: Children.count(children),\n currentStep: currentStep ?? -1,\n stepIndex,\n onChange:\n onChange &&\n (() => {\n onChange(stepIndex);\n }),\n }}\n >\n {child}\n </StepContext.Provider>\n {!isLast && orientation === 'horizontal' && <div className=\"cim-stepper-item-tail\" />}\n </>\n );\n })}\n </ol>\n );\n}\n\n/\n Displays a series of steps in a process.\n */\nconst _UNSTABLE_Stepper = withStyleProps(forwardRef(UNSTABLE_Stepper), 'Stepper');\n\nexport { _UNSTABLE_Stepper as UNSTABLE_Stepper };\n"]}

package/dist/esm/components/table/contexts/column-collection.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"column-collection.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/contexts/column-collection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAyC,MAAM,OAAO,CAAC;AAQ7G,UAAU,UAAU;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,gBAAgB,EAAE,sBAAsB,CAAC;CAC1C;AAED,2EAA2E;AAC3E,MAAM,MAAM,sBAAsB,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAMhE,wBAAgB,wBAAwB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAsB7E;AAED,KAAK,iBAAiB,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,KAAK,MAAM,IAAI,CAAC;AAGvE,wBAAgB,qBAAqB,IAAI,iBAAiB,~~CAuBzD~~;AAGD,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,CAAC,UAAU,CAAC,GAAG,SAAS,CAO3E;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CACjB;AAGD,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,SAAS,CAAC,oBAAoB,GAAG,IAAI,CAAC,GAAG,iBAAiB,CAchG"}
1	+ {"version":3,"file":"column-collection.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/contexts/column-collection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAyC,MAAM,OAAO,CAAC;AAQ7G,UAAU,UAAU;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,gBAAgB,EAAE,sBAAsB,CAAC;CAC1C;AAED,2EAA2E;AAC3E,MAAM,MAAM,sBAAsB,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAMhE,wBAAgB,wBAAwB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAsB7E;AAED,KAAK,iBAAiB,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,KAAK,MAAM,IAAI,CAAC;AAGvE,wBAAgB,qBAAqB,IAAI,iBAAiB,CAsBzD;AAGD,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,CAAC,UAAU,CAAC,GAAG,SAAS,CAO3E;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CACjB;AAGD,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,SAAS,CAAC,oBAAoB,GAAG,IAAI,CAAC,GAAG,iBAAiB,CAchG"}

package/dist/esm/components/table/contexts/column-collection.js CHANGED Viewed

@@ -37,7 +37,6 @@ export function useColumnRegistration() {
             const { columns } = columnCollection;
             if (columns[key] === data) {
                 // This is a temporary deletion before a context update, so this is fine
-                // eslint-disable-next-line react-hooks/react-compiler
                 delete columns[key];
                 columnCollection.setColumns({ ...columns });
             }

package/dist/esm/components/table/contexts/column-collection.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"column-collection.js","sourceRoot":"","sources":["../../../../../src/components/table/contexts/column-collection.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAkC,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7G,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AAgBjF,MAAM,uBAAuB,GAAG,aAAa,CAA0B,IAAI,CAAC,CAAC;AAE7E,MAAM,YAAY,GAAG,EAAE,CAAC;AAExB,MAAM,UAAU,wBAAwB,CAAC,EAAE,QAAQ,EAA2B;IAC5E,qEAAqE;IACrE,0EAA0E;IAC1E,oDAAoD;IACpD,MAAM,UAAU,GAAG,MAAM,CAA6B,YAAY,CAAC,CAAC;IACpE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAA6B,YAAY,CAAC,CAAC;IAEnF,MAAM,UAAU,GAAqB,OAAO,CAC1C,GAAG,EAAE,CAAC,CAAC;QACL,IAAI,OAAO;YACT,OAAO,UAAU,CAAC,OAAO,CAAC;QAC5B,CAAC;QACD,UAAU,EAAE,CAAC,OAAO,EAAE,EAAE;YACtB,UAAU,CAAC,OAAO,GAAG,OAAO,CAAC;YAC7B,WAAW,CAAC,OAAO,CAAC,CAAC;QACvB,CAAC;KACF,CAAC;IACF,uDAAuD;IACvD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,KAAC,uBAAuB,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,YAAG,QAAQ,GAAoC,CAAC;AAC5G,CAAC;AAID,gEAAgE;AAChE,MAAM,UAAU,qBAAqB;IACnC,MAAM,gBAAgB,GAAG,UAAU,CAAC,uBAAuB,CAAC,CAAC;IAC7D,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACtB,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;IACvE,CAAC;IAED,OAAO,oBAAoB,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;QACxC,gBAAgB,CAAC,UAAU,CAAC;YAC1B,GAAG,gBAAgB,CAAC,OAAO;YAC3B,CAAC,GAAG,CAAC,EAAE,IAAI;SACZ,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,MAAM,EAAE,OAAO,EAAE,GAAG,gBAAgB,CAAC;YAErC,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC;gBAC1B,wEAAwE;gBACxE,~~sDAAsD;gBACtD,~~OAAO,OAAO,CAAC,GAAG,CAAC,CAAC;gBACpB,gBAAgB,CAAC,UAAU,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;YAC9C,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC;AAED,gEAAgE;AAChE,MAAM,UAAU,aAAa,CAAC,GAAW;IACvC,MAAM,gBAAgB,GAAG,UAAU,CAAC,uBAAuB,CAAC,CAAC;IAC7D,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACtB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;IAC/D,CAAC;IAED,OAAO,gBAAgB,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;AACvC,CAAC;AAOD,gEAAgE;AAChE,MAAM,UAAU,iBAAiB,CAAC,GAA2C;IAC3E,MAAM,gBAAgB,GAAG,UAAU,CAAC,uBAAuB,CAAC,CAAC;IAC7D,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACtB,MAAM,IAAI,KAAK,CAAC,gDAAgD,CAAC,CAAC;IACpE,CAAC;IAED,gGAAgG;IAChG,MAAM,kBAAkB,GAAG,GAAG,CAAC,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;IACzD,MAAM,WAAW,GAAG,kBAAkB,EAAE,aAAa,CAAC,2CAA2C,CAAC,CAAC;IAEnG,OAAO;QACL,SAAS,EAAG,WAAgD,EAAE,OAAO,CAAC,aAAa,IAAI,KAAK;QAC5F,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,MAAM;KACtD,CAAC;AACJ,CAAC","sourcesContent":["import { createContext, type ReactNode, type RefObject, useContext, useMemo, useRef, useState } from 'react';\nimport { useServerEffectEvent } from '../../../utils/use-server-effect-event.js';\n\ninterface ColumnCollection {\n columns: Record<string, ColumnData>;\n setColumns: (columns: Record<string, ColumnData>) => void;\n}\n\ninterface ColumnData {\n number?: number;\n width?: string \| number;\n contentAlignment: ColumnContentAlignment;\n}\n\n/** Represents the direction of content alignment within a table column. */\nexport type ColumnContentAlignment = 'start' \| 'center' \| 'end';\n\nconst ColumnCollectionContext = createContext<ColumnCollection \| null>(null);\n\nconst EMPTY_OBJECT = {};\n\nexport function ColumnCollectionProvider({ children }: { children: ReactNode }) {\n // When column collection is updated, we want to trigger a re-render,\n // but we also want immediate access to the updated collection during SSR.\n // Hence why it is stored as both a ref and a state.\n const columnsRef = useRef<Record<string, ColumnData>>(EMPTY_OBJECT);\n const [_columns, _setColumns] = useState<Record<string, ColumnData>>(EMPTY_OBJECT);\n\n const collection: ColumnCollection = useMemo(\n () => ({\n get columns() {\n return columnsRef.current;\n },\n setColumns: (columns) => {\n columnsRef.current = columns;\n _setColumns(columns);\n },\n }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [_columns],\n );\n\n return <ColumnCollectionContext.Provider value={collection}>{children}</ColumnCollectionContext.Provider>;\n}\n\ntype ColumnRegistrator = (key: string, data: ColumnData) => () => void;\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useColumnRegistration(): ColumnRegistrator {\n const columnCollection = useContext(ColumnCollectionContext);\n if (!columnCollection) {\n throw new Error('Cannot use column registration outside of a table');\n }\n\n return useServerEffectEvent((key, data) => {\n columnCollection.setColumns({\n ...columnCollection.columns,\n [key]: data,\n });\n\n return () => {\n const { columns } = columnCollection;\n\n if (columns[key] === data) {\n // This is a temporary deletion before a context update, so this is fine\n ~~// eslint-disable-next-line react-hooks/react-compiler\n~~ delete columns[key];\n columnCollection.setColumns({ ...columns });\n }\n };\n });\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useColumnData(key: string): Readonly<ColumnData> \| undefined {\n const columnCollection = useContext(ColumnCollectionContext);\n if (!columnCollection) {\n throw new Error('Cannot use column data outside of a table');\n }\n\n return columnCollection.columns[key];\n}\n\nexport interface UseEmptyStateCell {\n columnKey: string;\n colSpan: number;\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useEmptyStateCell(ref: RefObject<HTMLTableCellElement \| null>): UseEmptyStateCell {\n const columnCollection = useContext(ColumnCollectionContext);\n if (!columnCollection) {\n throw new Error('Cannot use empty state cell outside of a table');\n }\n\n // Empty state cell should have the same column key as the first column in the table, so find it\n const parentTableElement = ref.current?.closest('table');\n const firstColumn = parentTableElement?.querySelector('[data-cell-row-key][data-cell-column-key]');\n\n return {\n columnKey: (firstColumn as HTMLTableCellElement \| undefined)?.dataset.cellColumnKey ?? '???',\n colSpan: Object.keys(columnCollection.columns).length,\n };\n}\n"]}
1	+ {"version":3,"file":"column-collection.js","sourceRoot":"","sources":["../../../../../src/components/table/contexts/column-collection.tsx"],"names":[],"mappings":"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","sourcesContent":["import { createContext, type ReactNode, type RefObject, useContext, useMemo, useRef, useState } from 'react';\nimport { useServerEffectEvent } from '../../../utils/use-server-effect-event.js';\n\ninterface ColumnCollection {\n columns: Record<string, ColumnData>;\n setColumns: (columns: Record<string, ColumnData>) => void;\n}\n\ninterface ColumnData {\n number?: number;\n width?: string \| number;\n contentAlignment: ColumnContentAlignment;\n}\n\n/** Represents the direction of content alignment within a table column. */\nexport type ColumnContentAlignment = 'start' \| 'center' \| 'end';\n\nconst ColumnCollectionContext = createContext<ColumnCollection \| null>(null);\n\nconst EMPTY_OBJECT = {};\n\nexport function ColumnCollectionProvider({ children }: { children: ReactNode }) {\n // When column collection is updated, we want to trigger a re-render,\n // but we also want immediate access to the updated collection during SSR.\n // Hence why it is stored as both a ref and a state.\n const columnsRef = useRef<Record<string, ColumnData>>(EMPTY_OBJECT);\n const [_columns, _setColumns] = useState<Record<string, ColumnData>>(EMPTY_OBJECT);\n\n const collection: ColumnCollection = useMemo(\n () => ({\n get columns() {\n return columnsRef.current;\n },\n setColumns: (columns) => {\n columnsRef.current = columns;\n _setColumns(columns);\n },\n }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [_columns],\n );\n\n return <ColumnCollectionContext.Provider value={collection}>{children}</ColumnCollectionContext.Provider>;\n}\n\ntype ColumnRegistrator = (key: string, data: ColumnData) => () => void;\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useColumnRegistration(): ColumnRegistrator {\n const columnCollection = useContext(ColumnCollectionContext);\n if (!columnCollection) {\n throw new Error('Cannot use column registration outside of a table');\n }\n\n return useServerEffectEvent((key, data) => {\n columnCollection.setColumns({\n ...columnCollection.columns,\n [key]: data,\n });\n\n return () => {\n const { columns } = columnCollection;\n\n if (columns[key] === data) {\n // This is a temporary deletion before a context update, so this is fine\n delete columns[key];\n columnCollection.setColumns({ ...columns });\n }\n };\n });\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useColumnData(key: string): Readonly<ColumnData> \| undefined {\n const columnCollection = useContext(ColumnCollectionContext);\n if (!columnCollection) {\n throw new Error('Cannot use column data outside of a table');\n }\n\n return columnCollection.columns[key];\n}\n\nexport interface UseEmptyStateCell {\n columnKey: string;\n colSpan: number;\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useEmptyStateCell(ref: RefObject<HTMLTableCellElement \| null>): UseEmptyStateCell {\n const columnCollection = useContext(ColumnCollectionContext);\n if (!columnCollection) {\n throw new Error('Cannot use empty state cell outside of a table');\n }\n\n // Empty state cell should have the same column key as the first column in the table, so find it\n const parentTableElement = ref.current?.closest('table');\n const firstColumn = parentTableElement?.querySelector('[data-cell-row-key][data-cell-column-key]');\n\n return {\n columnKey: (firstColumn as HTMLTableCellElement \| undefined)?.dataset.cellColumnKey ?? '???',\n colSpan: Object.keys(columnCollection.columns).length,\n };\n}\n"]}

package/dist/esm/components/table/contexts/row-state.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffectEvent } from '@react-aria/utils';
+import { useEffectEvent as useRACEffectEvent } from '@react-aria/utils';
 import { createContext, useContext, useMemo } from 'react';
 const TableRowStateContext = createContext(null);
 export function TableRowStateProvider({ children, rowKey, isSelected, onSelectionToggle, }) {
-    const onSelectionToggleMemoized = useEffectEvent(onSelectionToggle);
+    const onSelectionToggleMemoized = useRACEffectEvent(onSelectionToggle);
     const tableRowState = useMemo(() => ({
         rowKey,
         isSelected,

package/dist/esm/components/table/contexts/row-state.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"row-state.js","sourceRoot":"","sources":["../../../../../src/components/table/contexts/row-state.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;~~AACnD~~,OAAO,EAAE,aAAa,EAAkB,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAQ3E,MAAM,oBAAoB,GAAG,aAAa,CAAuB,IAAI,CAAC,CAAC;AAEvE,MAAM,UAAU,qBAAqB,CAAC,EACpC,QAAQ,EACR,MAAM,EACN,UAAU,EACV,iBAAiB,GAMlB;IACC,MAAM,yBAAyB,GAAG,~~cAAc~~,CAAC,iBAAiB,CAAC,CAAC;~~IAEpE~~,MAAM,aAAa,GAAkB,OAAO,CAC1C,GAAG,EAAE,CAAC,CAAC;QACL,MAAM;QACN,UAAU;QACV,iBAAiB,EAAE,yBAAyB;KAC7C,CAAC,EACF,CAAC,MAAM,EAAE,UAAU,EAAE,yBAAyB,CAAC,CAChD,CAAC;IAEF,OAAO,KAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,aAAa,YAAG,QAAQ,GAAiC,CAAC;AACzG,CAAC;AAED,gEAAgE;AAChE,MAAM,UAAU,gBAAgB;IAC9B,MAAM,aAAa,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IACvD,IAAI,CAAC,aAAa,EAAE,CAAC;QACnB,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;IACvE,CAAC;IAED,OAAO,aAAa,CAAC;AACvB,CAAC","sourcesContent":["import { useEffectEvent } from '@react-aria/utils';\nimport { createContext, type ReactNode, useContext, useMemo } from 'react';\n\nexport interface TableRowState {\n rowKey: string;\n isSelected?: boolean;\n onSelectionToggle?: (value?: boolean) => void;\n}\n\nconst TableRowStateContext = createContext<TableRowState \| null>(null);\n\nexport function TableRowStateProvider({\n children,\n rowKey,\n isSelected,\n onSelectionToggle,\n}: {\n children: ReactNode;\n rowKey: string;\n isSelected?: boolean;\n onSelectionToggle?: (value?: boolean) => void;\n}) {\n const onSelectionToggleMemoized = ~~useEffectEvent~~(onSelectionToggle);\n\n const tableRowState: TableRowState = useMemo(\n () => ({\n rowKey,\n isSelected,\n onSelectionToggle: onSelectionToggleMemoized,\n }),\n [rowKey, isSelected, onSelectionToggleMemoized],\n );\n\n return <TableRowStateContext.Provider value={tableRowState}>{children}</TableRowStateContext.Provider>;\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useTableRowState(): TableRowState {\n const tableRowState = useContext(TableRowStateContext);\n if (!tableRowState) {\n throw new Error('Cannot use table row state outside of a table row');\n }\n\n return tableRowState;\n}\n"]}
1	+ {"version":3,"file":"row-state.js","sourceRoot":"","sources":["../../../../../src/components/table/contexts/row-state.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,IAAI,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,aAAa,EAAkB,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAQ3E,MAAM,oBAAoB,GAAG,aAAa,CAAuB,IAAI,CAAC,CAAC;AAEvE,MAAM,UAAU,qBAAqB,CAAC,EACpC,QAAQ,EACR,MAAM,EACN,UAAU,EACV,iBAAiB,GAMlB;IACC,MAAM,yBAAyB,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAEvE,MAAM,aAAa,GAAkB,OAAO,CAC1C,GAAG,EAAE,CAAC,CAAC;QACL,MAAM;QACN,UAAU;QACV,iBAAiB,EAAE,yBAAyB;KAC7C,CAAC,EACF,CAAC,MAAM,EAAE,UAAU,EAAE,yBAAyB,CAAC,CAChD,CAAC;IAEF,OAAO,KAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,aAAa,YAAG,QAAQ,GAAiC,CAAC;AACzG,CAAC;AAED,gEAAgE;AAChE,MAAM,UAAU,gBAAgB;IAC9B,MAAM,aAAa,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IACvD,IAAI,CAAC,aAAa,EAAE,CAAC;QACnB,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;IACvE,CAAC;IAED,OAAO,aAAa,CAAC;AACvB,CAAC","sourcesContent":["import { useEffectEvent as useRACEffectEvent } from '@react-aria/utils';\nimport { createContext, type ReactNode, useContext, useMemo } from 'react';\n\nexport interface TableRowState {\n rowKey: string;\n isSelected?: boolean;\n onSelectionToggle?: (value?: boolean) => void;\n}\n\nconst TableRowStateContext = createContext<TableRowState \| null>(null);\n\nexport function TableRowStateProvider({\n children,\n rowKey,\n isSelected,\n onSelectionToggle,\n}: {\n children: ReactNode;\n rowKey: string;\n isSelected?: boolean;\n onSelectionToggle?: (value?: boolean) => void;\n}) {\n const onSelectionToggleMemoized = useRACEffectEvent(onSelectionToggle);\n\n const tableRowState: TableRowState = useMemo(\n () => ({\n rowKey,\n isSelected,\n onSelectionToggle: onSelectionToggleMemoized,\n }),\n [rowKey, isSelected, onSelectionToggleMemoized],\n );\n\n return <TableRowStateContext.Provider value={tableRowState}>{children}</TableRowStateContext.Provider>;\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useTableRowState(): TableRowState {\n const tableRowState = useContext(TableRowStateContext);\n if (!tableRowState) {\n throw new Error('Cannot use table row state outside of a table row');\n }\n\n return tableRowState;\n}\n"]}

package/dist/esm/components/table/contexts/table-state.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffectEvent, useId } from '@react-aria/utils';
+import { useEffectEvent as useRACEffectEvent, useId } from '@react-aria/utils';
 import { createContext, useContext, useMemo, useRef, useState } from 'react';
 import { useLocalizedMessages } from '../../../i18n/localization-provider.js';
 const TableStateContext = createContext(null);
@@ -11,7 +11,7 @@ export function TableStateProvider({ children, rowSelectionMode, areAllRowsSelec
     const [_pendingRowSelectionState, _setPendingRowSelectionState] = useState(undefined);
     const sortLabelId = useId();
     const messages = useLocalizedMessages('table');
-    const onAllRowsSelectionToggleMemoized = useEffectEvent(onAllRowsSelectionToggle);
+    const onAllRowsSelectionToggleMemoized = useRACEffectEvent(onAllRowsSelectionToggle);
     const tableState = useMemo(() => ({
         sortLabelId,
         rowSelectionMode,

package/dist/esm/components/table/contexts/table-state.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"table-state.js","sourceRoot":"","sources":["../../../../../src/components/table/contexts/table-state.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;~~AAC1D~~,OAAO,EAAE,aAAa,EAAkB,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7F,OAAO,EAAE,oBAAoB,EAAE,MAAM,wCAAwC,CAAC;AAgB9E,MAAM,iBAAiB,GAAG,aAAa,CAAoB,IAAI,CAAC,CAAC;AAEjE,MAAM,UAAU,kBAAkB,CAAC,EACjC,QAAQ,EACR,gBAAgB,EAChB,kBAAkB,EAClB,mBAAmB,EACnB,wBAAwB,GAOzB;IACC,+EAA+E;IAC/E,sDAAsD;IACtD,oDAAoD;IACpD,MAAM,2BAA2B,GAAG,MAAM,CAAsB,SAAS,CAAC,CAAC;IAC3E,MAAM,CAAC,yBAAyB,EAAE,4BAA4B,CAAC,GAAG,QAAQ,CAAsB,SAAS,CAAC,CAAC;IAE3G,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,QAAQ,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAE/C,MAAM,gCAAgC,GAAG,~~cAAc~~,CAAC,wBAAwB,CAAC,CAAC;~~IAElF~~,MAAM,UAAU,GAAe,OAAO,CACpC,GAAG,EAAE,CAAC,CAAC;QACL,WAAW;QACX,gBAAgB;QAChB,kBAAkB;QAClB,mBAAmB;QACnB,wBAAwB,EAAE,gCAAgC;QAC1D,IAAI,wBAAwB;YAC1B,OAAO,2BAA2B,CAAC,OAAO,CAAC;QAC7C,CAAC;QACD,2BAA2B,CAAC,wBAA6C;YACvE,2BAA2B,CAAC,OAAO,GAAG,wBAAwB,CAAC;YAC/D,4BAA4B,CAAC,wBAAwB,CAAC,CAAC;QACzD,CAAC;KACF,CAAC;IACF,uDAAuD;IACvD;QACE,WAAW;QACX,gBAAgB;QAChB,kBAAkB;QAClB,mBAAmB;QACnB,gCAAgC;QAChC,yBAAyB;KAC1B,CACF,CAAC;IAEF,OAAO,CACL,MAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,aAC1C,QAAQ,EACT,eAAM,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,WAAW,YAC9C,QAAQ,CAAC,MAAM,CAAC,uBAAuB,CAAC,GACpC,IACoB,CAC9B,CAAC;AACJ,CAAC;AAED,gEAAgE;AAChE,MAAM,UAAU,aAAa;IAC3B,MAAM,UAAU,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IACjD,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;IAC/D,CAAC;IAED,OAAO,UAAU,CAAC;AACpB,CAAC","sourcesContent":["import { useEffectEvent, useId } from '@react-aria/utils';\nimport { createContext, type ReactNode, useContext, useMemo, useRef, useState } from 'react';\nimport { useLocalizedMessages } from '../../../i18n/localization-provider.js';\n\n/** Represents the type of row selection allowed within a table. /\nexport type RowSelectionMode = 'single' \| 'multiple' \| 'none';\n\nexport interface TableState {\n sortLabelId: string;\n rowSelectionMode: RowSelectionMode;\n areAllRowsSelected?: boolean;\n areSomeRowsSelected?: boolean;\n onAllRowsSelectionToggle?: (value?: boolean) => void;\n /* The selection state that will be applied to the next focused row. */\n pendingRowSelectionState?: boolean;\n setPendingRowSelectionState: (value: boolean \| undefined) => void;\n}\n\nconst TableStateContext = createContext<TableState \| null>(null);\n\nexport function TableStateProvider({\n children,\n rowSelectionMode,\n areAllRowsSelected,\n areSomeRowsSelected,\n onAllRowsSelectionToggle,\n}: {\n children: ReactNode;\n rowSelectionMode: RowSelectionMode;\n areAllRowsSelected?: boolean;\n areSomeRowsSelected?: boolean;\n onAllRowsSelectionToggle?: (value?: boolean) => void;\n}) {\n // When the pending selection state is updated, we want to trigger a re-render,\n // but we also want immediate access to the new value.\n // Hence why it is stored as both a ref and a state.\n const pendingRowSelectionStateRef = useRef<boolean \| undefined>(undefined);\n const [_pendingRowSelectionState, _setPendingRowSelectionState] = useState<boolean \| undefined>(undefined);\n\n const sortLabelId = useId();\n const messages = useLocalizedMessages('table');\n\n const onAllRowsSelectionToggleMemoized = ~~useEffectEvent~~(onAllRowsSelectionToggle);\n\n const tableState: TableState = useMemo(\n () => ({\n sortLabelId,\n rowSelectionMode,\n areAllRowsSelected,\n areSomeRowsSelected,\n onAllRowsSelectionToggle: onAllRowsSelectionToggleMemoized,\n get pendingRowSelectionState() {\n return pendingRowSelectionStateRef.current;\n },\n setPendingRowSelectionState(pendingRowSelectionState: boolean \| undefined) {\n pendingRowSelectionStateRef.current = pendingRowSelectionState;\n _setPendingRowSelectionState(pendingRowSelectionState);\n },\n }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [\n sortLabelId,\n rowSelectionMode,\n areAllRowsSelected,\n areSomeRowsSelected,\n onAllRowsSelectionToggleMemoized,\n _pendingRowSelectionState,\n ],\n );\n\n return (\n <TableStateContext.Provider value={tableState}>\n {children}\n <span style={{ display: 'none' }} id={sortLabelId}>\n {messages.format('toggleColumnSortOrder')}\n </span>\n </TableStateContext.Provider>\n );\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useTableState(): TableState {\n const tableState = useContext(TableStateContext);\n if (!tableState) {\n throw new Error('Cannot use table state outside of a table');\n }\n\n return tableState;\n}\n"]}
1	+ {"version":3,"file":"table-state.js","sourceRoot":"","sources":["../../../../../src/components/table/contexts/table-state.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,IAAI,iBAAiB,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAkB,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7F,OAAO,EAAE,oBAAoB,EAAE,MAAM,wCAAwC,CAAC;AAgB9E,MAAM,iBAAiB,GAAG,aAAa,CAAoB,IAAI,CAAC,CAAC;AAEjE,MAAM,UAAU,kBAAkB,CAAC,EACjC,QAAQ,EACR,gBAAgB,EAChB,kBAAkB,EAClB,mBAAmB,EACnB,wBAAwB,GAOzB;IACC,+EAA+E;IAC/E,sDAAsD;IACtD,oDAAoD;IACpD,MAAM,2BAA2B,GAAG,MAAM,CAAsB,SAAS,CAAC,CAAC;IAC3E,MAAM,CAAC,yBAAyB,EAAE,4BAA4B,CAAC,GAAG,QAAQ,CAAsB,SAAS,CAAC,CAAC;IAE3G,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,QAAQ,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAE/C,MAAM,gCAAgC,GAAG,iBAAiB,CAAC,wBAAwB,CAAC,CAAC;IAErF,MAAM,UAAU,GAAe,OAAO,CACpC,GAAG,EAAE,CAAC,CAAC;QACL,WAAW;QACX,gBAAgB;QAChB,kBAAkB;QAClB,mBAAmB;QACnB,wBAAwB,EAAE,gCAAgC;QAC1D,IAAI,wBAAwB;YAC1B,OAAO,2BAA2B,CAAC,OAAO,CAAC;QAC7C,CAAC;QACD,2BAA2B,CAAC,wBAA6C;YACvE,2BAA2B,CAAC,OAAO,GAAG,wBAAwB,CAAC;YAC/D,4BAA4B,CAAC,wBAAwB,CAAC,CAAC;QACzD,CAAC;KACF,CAAC;IACF,uDAAuD;IACvD;QACE,WAAW;QACX,gBAAgB;QAChB,kBAAkB;QAClB,mBAAmB;QACnB,gCAAgC;QAChC,yBAAyB;KAC1B,CACF,CAAC;IAEF,OAAO,CACL,MAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,aAC1C,QAAQ,EACT,eAAM,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,WAAW,YAC9C,QAAQ,CAAC,MAAM,CAAC,uBAAuB,CAAC,GACpC,IACoB,CAC9B,CAAC;AACJ,CAAC;AAED,gEAAgE;AAChE,MAAM,UAAU,aAAa;IAC3B,MAAM,UAAU,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IACjD,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;IAC/D,CAAC;IAED,OAAO,UAAU,CAAC;AACpB,CAAC","sourcesContent":["import { useEffectEvent as useRACEffectEvent, useId } from '@react-aria/utils';\nimport { createContext, type ReactNode, useContext, useMemo, useRef, useState } from 'react';\nimport { useLocalizedMessages } from '../../../i18n/localization-provider.js';\n\n/** Represents the type of row selection allowed within a table. /\nexport type RowSelectionMode = 'single' \| 'multiple' \| 'none';\n\nexport interface TableState {\n sortLabelId: string;\n rowSelectionMode: RowSelectionMode;\n areAllRowsSelected?: boolean;\n areSomeRowsSelected?: boolean;\n onAllRowsSelectionToggle?: (value?: boolean) => void;\n /* The selection state that will be applied to the next focused row. */\n pendingRowSelectionState?: boolean;\n setPendingRowSelectionState: (value: boolean \| undefined) => void;\n}\n\nconst TableStateContext = createContext<TableState \| null>(null);\n\nexport function TableStateProvider({\n children,\n rowSelectionMode,\n areAllRowsSelected,\n areSomeRowsSelected,\n onAllRowsSelectionToggle,\n}: {\n children: ReactNode;\n rowSelectionMode: RowSelectionMode;\n areAllRowsSelected?: boolean;\n areSomeRowsSelected?: boolean;\n onAllRowsSelectionToggle?: (value?: boolean) => void;\n}) {\n // When the pending selection state is updated, we want to trigger a re-render,\n // but we also want immediate access to the new value.\n // Hence why it is stored as both a ref and a state.\n const pendingRowSelectionStateRef = useRef<boolean \| undefined>(undefined);\n const [_pendingRowSelectionState, _setPendingRowSelectionState] = useState<boolean \| undefined>(undefined);\n\n const sortLabelId = useId();\n const messages = useLocalizedMessages('table');\n\n const onAllRowsSelectionToggleMemoized = useRACEffectEvent(onAllRowsSelectionToggle);\n\n const tableState: TableState = useMemo(\n () => ({\n sortLabelId,\n rowSelectionMode,\n areAllRowsSelected,\n areSomeRowsSelected,\n onAllRowsSelectionToggle: onAllRowsSelectionToggleMemoized,\n get pendingRowSelectionState() {\n return pendingRowSelectionStateRef.current;\n },\n setPendingRowSelectionState(pendingRowSelectionState: boolean \| undefined) {\n pendingRowSelectionStateRef.current = pendingRowSelectionState;\n _setPendingRowSelectionState(pendingRowSelectionState);\n },\n }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [\n sortLabelId,\n rowSelectionMode,\n areAllRowsSelected,\n areSomeRowsSelected,\n onAllRowsSelectionToggleMemoized,\n _pendingRowSelectionState,\n ],\n );\n\n return (\n <TableStateContext.Provider value={tableState}>\n {children}\n <span style={{ display: 'none' }} id={sortLabelId}>\n {messages.format('toggleColumnSortOrder')}\n </span>\n </TableStateContext.Provider>\n );\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useTableState(): TableState {\n const tableState = useContext(TableStateContext);\n if (!tableState) {\n throw new Error('Cannot use table state outside of a table');\n }\n\n return tableState;\n}\n"]}

package/dist/esm/components/table/hooks/use-table-cell.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { getFocusableTreeWalker, useFocusRing } from '@react-aria/focus';
 import { isFocusVisible } from '@react-aria/interactions';
-import { mergeProps, useEffectEvent, useLayoutEffect } from '@react-aria/utils';
+import { mergeProps, useEffectEvent as useRACEffectEvent, useLayoutEffect } from '@react-aria/utils';
 import { useEffect } from 'react';
 import { useTableFocus } from '../contexts/focus.js';
 import { useTableRowState } from '../contexts/row-state.js';
@@ -50,7 +50,7 @@ export function useTableCell(ref, rowKey, columnKey) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [ref, isTabbable]);
-    const resetIfFocused = useEffectEvent(() => {
+    const resetIfFocused = useRACEffectEvent(() => {
         if (isTabbable) {
             tableFocus.setFocus('', '');
         }

package/dist/esm/components/table/hooks/use-table-cell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-table-cell.js","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-table-cell.ts"],"names":[],"mappings":"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","sourcesContent":["import { getFocusableTreeWalker, useFocusRing } from '@react-aria/focus';\nimport { isFocusVisible } from '@react-aria/interactions';\nimport { mergeProps, useEffectEvent, useLayoutEffect } from '@react-aria/utils';\nimport { type KeyboardEventHandler, type FocusEventHandler, type RefObject, useEffect } from 'react';\nimport type { FocusableElement, NativeElementProps } from '../../types.js';\nimport { useTableFocus } from '../contexts/focus.js';\nimport { useTableRowState } from '../contexts/row-state.js';\nimport { useTableState } from '../contexts/table-state.js';\nimport { focusTableChild } from '../utils/focus-table-child.js';\n\nexport interface UseTableCell {\n cellProps: NativeElementProps<HTMLTableCellElement>;\n}\n\nexport function useTableCell(\n ref: RefObject<HTMLTableCellElement \| null>,\n rowKey: string,\n columnKey: string,\n): UseTableCell {\n const tableFocus = useTableFocus();\n const { pendingRowSelectionState, setPendingRowSelectionState } = useTableState();\n const { onSelectionToggle } = useTableRowState();\n\n const { focusProps, isFocusVisible: isCellFocusVisible } = useFocusRing();\n\n const isTabbable = rowKey === tableFocus.focusedRowKey && columnKey === tableFocus.focusedColumnKey;\n\n // Handles focusing the cell.\n // If there is a focusable child, it is focused, otherwise the cell itself is focused.\n const focusCell = () => {\n if (!ref.current) {\n return;\n }\n\n // If there's a pending selection state, apply it to this cell's row.\n // If this cell is a header cell, `onSelectionToggle` will be undefined, but we still want to clear the pending selection state.\n if (pendingRowSelectionState !== undefined) {\n onSelectionToggle?.(pendingRowSelectionState);\n setPendingRowSelectionState(undefined);\n }\n\n // If focus is already on a focusable child within the cell, early return so we don't shift focus\n if (ref.current.contains(document.activeElement) && ref.current !== document.activeElement) {\n return;\n }\n\n const treeWalker = getFocusableTreeWalker(ref.current);\n const focusable = tableFocus.childFocusStrategy === 'last' ? treeWalker.lastChild() : treeWalker.firstChild();\n\n if (focusable) {\n // Cell has focusable children, focus the child\n focusTableChild(focusable as FocusableElement);\n } else if (!ref.current.contains(document.activeElement)) {\n // Cell has no focusable children and current focus is outside of the cell, focus the cell itself\n focusTableChild(ref.current);\n } else if (ref.current === document.activeElement && !isTabbable) {\n // Focus is on the current cell, but table focus is elsewhere, update table focus state\n tableFocus.setFocus(rowKey, columnKey);\n }\n };\n\n // Focus the cell DOM node when table focus moves to this cell\n useLayoutEffect(() => {\n if (isTabbable && !ref.current!.contains(document.activeElement)) {\n focusCell();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [ref, isTabbable]);\n\n const resetIfFocused = useEffectEvent(() => {\n if (isTabbable) {\n tableFocus.setFocus('', '');\n }\n });\n\n // Reset table focus when the focused cell unmounts\n useEffect(\n () => () => {\n resetIfFocused();\n },\n [resetIfFocused],\n );\n\n const onFocus: FocusEventHandler = (e) => {\n // Ignore focus events bubbling through portals\n if (!e.currentTarget.contains(e.target)) {\n return;\n }\n\n // If cell is already focused, return early.\n // However, if focus happens as a result of a press, we need to re-run the child-focusing logic,\n // otherwise `useFocusRing` will force the cell itself to become focused.\n if (e.currentTarget.contains(e.relatedTarget) && isFocusVisible()) {\n return;\n }\n\n // There are 3 scenarios for why a cell might receive focus:\n // - focus happens through a press, we need to update table focus state to the current cell\n // - focus happens through arrow key navigation within the table,\n // we do nothing as table focus state would have already been updated earlier\n // - focus happens through tabbing into the table from outside,\n // we do nothing because we want to restore focus to the previously focused cell,\n // and overriding table focus state would make that impossible\n if (!isFocusVisible()) {\n tableFocus.setFocus(rowKey, columnKey);\n }\n\n if (e.target === ref.current) {\n // If the cell itself receives focus, wait a frame so that focus finishes propagating\n // up to the tree, and move focus to a focusable child if possible.\n requestAnimationFrame(() => {\n if (document.activeElement === ref.current) {\n focusCell();\n }\n });\n }\n };\n\n // Handles keyboard navigation between focusable children within the cell.\n const onKeyDownCapture: KeyboardEventHandler = (e) => {\n // Ignore keyboard events bubbling through portals\n if (!e.currentTarget.contains(e.target as Element) \|\| !ref.current \|\| !document.activeElement) {\n return;\n }\n\n const walker = getFocusableTreeWalker(ref.current);\n walker.currentNode = document.activeElement;\n\n if (e.key === 'ArrowLeft' \|\| e.key === 'ArrowRight') {\n // Move to the previous/next focusable element within the cell\n const childElementToFocus = e.key === 'ArrowLeft' ? walker.previousNode() : walker.nextNode();\n\n if (childElementToFocus && childElementToFocus !== ref.current) {\n focusTableChild(childElementToFocus as FocusableElement);\n } else {\n // If there is no previous/next focusable element within the current cell, focus should move to the previous/next cell.\n // This is handled by `useTable`, so we need to let the event bubble up to it.\n // But we also don't want this event to reach children of the current cell, as arrow keys should be used exclusively for table navigation.\n // Solution: re-dispatch the event from a parent element of the current cell.\n ref.current.parentElement!.dispatchEvent(new KeyboardEvent(e.nativeEvent.type, e.nativeEvent));\n }\n } else if (e.key === 'ArrowUp' \|\| e.key === 'ArrowDown') {\n // Move to the previous/next cell in the current column.\n // This is handled by `useTable`, so we need to let the event bubble up to it.\n // But we also don't want this event to reach children of the current cell, as arrow keys should be used exclusively for table navigation.\n // Solution: re-dispatch the event from a parent element of the current cell.\n ref.current.parentElement?.dispatchEvent(new KeyboardEvent(e.nativeEvent.type, e.nativeEvent));\n } else {\n // if we didn't handle anything, return early so we don't stop propagation and preventDefault\n return;\n }\n\n e.preventDefault();\n e.stopPropagation();\n };\n\n const customProps: NativeElementProps<HTMLTableCellElement> = {\n tabIndex: isTabbable ? 0 : -1,\n onFocus,\n onKeyDownCapture,\n 'data-cell-row-key': rowKey,\n 'data-cell-column-key': columnKey,\n 'data-focus-visible': isCellFocusVisible \|\| undefined,\n };\n\n return {\n cellProps: mergeProps(focusProps, customProps),\n };\n}\n"]}
1	+ {"version":3,"file":"use-table-cell.js","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-table-cell.ts"],"names":[],"mappings":"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","sourcesContent":["import { getFocusableTreeWalker, useFocusRing } from '@react-aria/focus';\nimport { isFocusVisible } from '@react-aria/interactions';\nimport { mergeProps, useEffectEvent as useRACEffectEvent, useLayoutEffect } from '@react-aria/utils';\nimport { type KeyboardEventHandler, type FocusEventHandler, type RefObject, useEffect } from 'react';\nimport type { FocusableElement, NativeElementProps } from '../../types.js';\nimport { useTableFocus } from '../contexts/focus.js';\nimport { useTableRowState } from '../contexts/row-state.js';\nimport { useTableState } from '../contexts/table-state.js';\nimport { focusTableChild } from '../utils/focus-table-child.js';\n\nexport interface UseTableCell {\n cellProps: NativeElementProps<HTMLTableCellElement>;\n}\n\nexport function useTableCell(\n ref: RefObject<HTMLTableCellElement \| null>,\n rowKey: string,\n columnKey: string,\n): UseTableCell {\n const tableFocus = useTableFocus();\n const { pendingRowSelectionState, setPendingRowSelectionState } = useTableState();\n const { onSelectionToggle } = useTableRowState();\n\n const { focusProps, isFocusVisible: isCellFocusVisible } = useFocusRing();\n\n const isTabbable = rowKey === tableFocus.focusedRowKey && columnKey === tableFocus.focusedColumnKey;\n\n // Handles focusing the cell.\n // If there is a focusable child, it is focused, otherwise the cell itself is focused.\n const focusCell = () => {\n if (!ref.current) {\n return;\n }\n\n // If there's a pending selection state, apply it to this cell's row.\n // If this cell is a header cell, `onSelectionToggle` will be undefined, but we still want to clear the pending selection state.\n if (pendingRowSelectionState !== undefined) {\n onSelectionToggle?.(pendingRowSelectionState);\n setPendingRowSelectionState(undefined);\n }\n\n // If focus is already on a focusable child within the cell, early return so we don't shift focus\n if (ref.current.contains(document.activeElement) && ref.current !== document.activeElement) {\n return;\n }\n\n const treeWalker = getFocusableTreeWalker(ref.current);\n const focusable = tableFocus.childFocusStrategy === 'last' ? treeWalker.lastChild() : treeWalker.firstChild();\n\n if (focusable) {\n // Cell has focusable children, focus the child\n focusTableChild(focusable as FocusableElement);\n } else if (!ref.current.contains(document.activeElement)) {\n // Cell has no focusable children and current focus is outside of the cell, focus the cell itself\n focusTableChild(ref.current);\n } else if (ref.current === document.activeElement && !isTabbable) {\n // Focus is on the current cell, but table focus is elsewhere, update table focus state\n tableFocus.setFocus(rowKey, columnKey);\n }\n };\n\n // Focus the cell DOM node when table focus moves to this cell\n useLayoutEffect(() => {\n if (isTabbable && !ref.current!.contains(document.activeElement)) {\n focusCell();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [ref, isTabbable]);\n\n const resetIfFocused = useRACEffectEvent(() => {\n if (isTabbable) {\n tableFocus.setFocus('', '');\n }\n });\n\n // Reset table focus when the focused cell unmounts\n useEffect(\n () => () => {\n resetIfFocused();\n },\n [resetIfFocused],\n );\n\n const onFocus: FocusEventHandler = (e) => {\n // Ignore focus events bubbling through portals\n if (!e.currentTarget.contains(e.target)) {\n return;\n }\n\n // If cell is already focused, return early.\n // However, if focus happens as a result of a press, we need to re-run the child-focusing logic,\n // otherwise `useFocusRing` will force the cell itself to become focused.\n if (e.currentTarget.contains(e.relatedTarget) && isFocusVisible()) {\n return;\n }\n\n // There are 3 scenarios for why a cell might receive focus:\n // - focus happens through a press, we need to update table focus state to the current cell\n // - focus happens through arrow key navigation within the table,\n // we do nothing as table focus state would have already been updated earlier\n // - focus happens through tabbing into the table from outside,\n // we do nothing because we want to restore focus to the previously focused cell,\n // and overriding table focus state would make that impossible\n if (!isFocusVisible()) {\n tableFocus.setFocus(rowKey, columnKey);\n }\n\n if (e.target === ref.current) {\n // If the cell itself receives focus, wait a frame so that focus finishes propagating\n // up to the tree, and move focus to a focusable child if possible.\n requestAnimationFrame(() => {\n if (document.activeElement === ref.current) {\n focusCell();\n }\n });\n }\n };\n\n // Handles keyboard navigation between focusable children within the cell.\n const onKeyDownCapture: KeyboardEventHandler = (e) => {\n // Ignore keyboard events bubbling through portals\n if (!e.currentTarget.contains(e.target as Element) \|\| !ref.current \|\| !document.activeElement) {\n return;\n }\n\n const walker = getFocusableTreeWalker(ref.current);\n walker.currentNode = document.activeElement;\n\n if (e.key === 'ArrowLeft' \|\| e.key === 'ArrowRight') {\n // Move to the previous/next focusable element within the cell\n const childElementToFocus = e.key === 'ArrowLeft' ? walker.previousNode() : walker.nextNode();\n\n if (childElementToFocus && childElementToFocus !== ref.current) {\n focusTableChild(childElementToFocus as FocusableElement);\n } else {\n // If there is no previous/next focusable element within the current cell, focus should move to the previous/next cell.\n // This is handled by `useTable`, so we need to let the event bubble up to it.\n // But we also don't want this event to reach children of the current cell, as arrow keys should be used exclusively for table navigation.\n // Solution: re-dispatch the event from a parent element of the current cell.\n ref.current.parentElement!.dispatchEvent(new KeyboardEvent(e.nativeEvent.type, e.nativeEvent));\n }\n } else if (e.key === 'ArrowUp' \|\| e.key === 'ArrowDown') {\n // Move to the previous/next cell in the current column.\n // This is handled by `useTable`, so we need to let the event bubble up to it.\n // But we also don't want this event to reach children of the current cell, as arrow keys should be used exclusively for table navigation.\n // Solution: re-dispatch the event from a parent element of the current cell.\n ref.current.parentElement?.dispatchEvent(new KeyboardEvent(e.nativeEvent.type, e.nativeEvent));\n } else {\n // if we didn't handle anything, return early so we don't stop propagation and preventDefault\n return;\n }\n\n e.preventDefault();\n e.stopPropagation();\n };\n\n const customProps: NativeElementProps<HTMLTableCellElement> = {\n tabIndex: isTabbable ? 0 : -1,\n onFocus,\n onKeyDownCapture,\n 'data-cell-row-key': rowKey,\n 'data-cell-column-key': columnKey,\n 'data-focus-visible': isCellFocusVisible \|\| undefined,\n };\n\n return {\n cellProps: mergeProps(focusProps, customProps),\n };\n}\n"]}

package/dist/esm/components/tabs/tabs.d.ts CHANGED Viewed

@@ -19,7 +19,9 @@ export declare function TabList<T extends CollectionItem>({ children, ...props }
 export declare namespace TabList {
     var displayName: string;
 }
-export interface TabProps extends Pick<RACTabProps, 'id' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {
+export interface TabProps extends Pick<RACTabProps, 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {
+    /** The unique ID of the tab. */
+    id?: Key;
     /** The text to display as the tab title. */
     children: StringLikeChildren;
     /** An icon displayed before the tab title. */

package/dist/esm/components/tabs/tabs.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACrF,OAAO,EAML,KAAK,SAAS,IAAI,YAAY,EAC9B,KAAK,QAAQ,IAAI,WAAW,EAC7B,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EACV,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,WAAW,EACX,GAAG,EACH,kBAAkB,EACnB,MAAM,aAAa,CAAC;AASrB,MAAM,WAAW,SACf,SAAQ,WAAW,EACjB,iBAAiB,EACjB,IAAI,CAAC,YAAY,EAAE,aAAa,GAAG,oBAAoB,GAAG,cAAc,GAAG,mBAAmB,CAAC;IACjG,mGAAmG;IACnG,QAAQ,EAAE,SAAS,CAAC;CACrB;AAgDD;;;;GAIG;AACH,QAAA,MAAM,KAAK,2JAA2C,CAAC;AAEvD,OAAO,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC;AAEzB,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;CAAG;AAErF,8DAA8D;AAC9D,wBAAgB,OAAO,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC,2CAqBxF;yBArBe,OAAO;;;AAyBvB,MAAM,WAAW,QAAS,SAAQ,IAAI,CAAC,WAAW,EAAE,~~IAAI,GAAG,~~YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;~~IACtG~~,4CAA4C;IAC5C,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,8CAA8C;IAC9C,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,6CAA6C;AAC7C,wBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,QAAQ,2CAUrE;yBAVe,GAAG;;;AAcnB,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;CAAG;AAEvF,mEAAmE;AACnE,wBAAgB,SAAS,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC,2CAElF;yBAFe,SAAS;;;AAMzB,MAAM,WAAW,aAAa;IAC5B,+CAA+C;IAC/C,QAAQ,EAAE,SAAS,CAAC;IACpB,2CAA2C;IAC3C,EAAE,CAAC,EAAE,GAAG,CAAC;CACV;AAED,qDAAqD;AACrD,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAM7D;yBANe,QAAQ"}
1	+ {"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACrF,OAAO,EAML,KAAK,SAAS,IAAI,YAAY,EAC9B,KAAK,QAAQ,IAAI,WAAW,EAC7B,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EACV,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,WAAW,EACX,GAAG,EACH,kBAAkB,EACnB,MAAM,aAAa,CAAC;AASrB,MAAM,WAAW,SACf,SAAQ,WAAW,EACjB,iBAAiB,EACjB,IAAI,CAAC,YAAY,EAAE,aAAa,GAAG,oBAAoB,GAAG,cAAc,GAAG,mBAAmB,CAAC;IACjG,mGAAmG;IACnG,QAAQ,EAAE,SAAS,CAAC;CACrB;AAgDD;;;;GAIG;AACH,QAAA,MAAM,KAAK,2JAA2C,CAAC;AAEvD,OAAO,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC;AAEzB,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;CAAG;AAErF,8DAA8D;AAC9D,wBAAgB,OAAO,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC,2CAqBxF;yBArBe,OAAO;;;AAyBvB,MAAM,WAAW,QAAS,SAAQ,IAAI,CAAC,WAAW,EAAE,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;IAC/F,gCAAgC;IAChC,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,4CAA4C;IAC5C,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,8CAA8C;IAC9C,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,6CAA6C;AAC7C,wBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,QAAQ,2CAUrE;yBAVe,GAAG;;;AAcnB,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;CAAG;AAEvF,mEAAmE;AACnE,wBAAgB,SAAS,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC,2CAElF;yBAFe,SAAS;;;AAMzB,MAAM,WAAW,aAAa;IAC5B,+CAA+C;IAC/C,QAAQ,EAAE,SAAS,CAAC;IACpB,2CAA2C;IAC3C,EAAE,CAAC,EAAE,GAAG,CAAC;CACV;AAED,qDAAqD;AACrD,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAM7D;yBANe,QAAQ"}

package/dist/esm/components/tabs/tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,aAAa,EAAE,UAAU,EAAqC,MAAM,OAAO,CAAC;AACrF,OAAO,EACL,UAAU,IAAI,aAAa,EAC3B,GAAG,IAAI,MAAM,EACb,OAAO,IAAI,UAAU,EACrB,QAAQ,IAAI,WAAW,EACvB,IAAI,IAAI,OAAO,GAGhB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAS3D,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAM7C,MAAM,WAAW,GAAG,aAAa,CAAmB,EAAE,CAAC,CAAC;AAUxD,SAAS,IAAI,CACX,EACE,QAAQ,EACR,gBAAgB,EAChB,YAAY;AAEZ,sBAAsB;AACtB,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,kBAAkB,EAAE,eAAe,EACnC,cAAc,EAAE,WAAW,EAE3B,GAAG,KAAK,EACE,EACZ,GAAiC;IAEjC,oBAAoB,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAClC,OAAO,CAAC,IAAI,CAAC,qEAAqE,CAAC,CAAC;QACtF,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEhC,OAAO,CACL,KAAC,WAAW,CAAC,QAAQ,IACnB,KAAK,EAAE;YACL,SAAS,EAAE;gBACT,YAAY,EAAE,SAAS;gBACvB,iBAAiB,EAAE,cAAc;gBACjC,kBAAkB,EAAE,eAAe;gBACnC,cAAc,EAAE,WAAW;aAC5B;SACF,YAED,KAAC,OAAO,OACF,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE,gBAAgB,CAAC,EAC7C,KAAK,EAAE,YAAY,EACnB,kBAAkB,EAAC,QAAQ,YAE1B,QAAQ,GACD,GACW,CACxB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,KAAK,GAAG,cAAc,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,CAAC;AAEvD,OAAO,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC;AAIzB,8DAA8D;AAC9D,MAAM,UAAU,OAAO,CAA2B,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAmB;IACvF,MAAM,EAAE,SAAS,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAC9C,MAAM,EACJ,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,kBAAkB,EAAE,eAAe,EACnC,cAAc,EAAE,WAAW,GAC5B,GAAG,SAAS,IAAI,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,UAAU,OACL,KAAK,EACT,SAAS,EAAC,cAAc,gBACZ,SAAS,qBACJ,cAAc,sBACb,eAAe,kBACnB,WAAW,YAExB,QAAQ,GACE,CACd,CAAC;AACJ,CAAC;AAED,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC;~~AAWhC~~,6CAA6C;AAC7C,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAY;IACpE,OAAO,CACL,MAAC,MAAM,OAAK,KAAK,EAAE,SAAS,EAAC,cAAc,aACxC,SAAS,EACV,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,iBAAiB,EAAC,SAAS,EAAC,QAAQ,YACzD,QAAQ,GACJ,EACN,KAAK,IACC,CACV,CAAC;AACJ,CAAC;AAED,GAAG,CAAC,WAAW,GAAG,KAAK,CAAC;AAIxB,mEAAmE;AACnE,MAAM,UAAU,SAAS,CAA2B,EAAE,GAAG,KAAK,EAAqB;IACjF,OAAO,KAAC,aAAa,OAAK,KAAK,GAAI,CAAC;AACtC,CAAC;AAED,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AASpC,qDAAqD;AACrD,MAAM,UAAU,QAAQ,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAiB;IAC5D,OAAO,CACL,KAAC,WAAW,OAAK,KAAK,EAAE,SAAS,EAAC,eAAe,YAC9C,QAAQ,GACG,CACf,CAAC;AACJ,CAAC;AAED,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { createContext, useContext, type ForwardedRef, type ReactNode } from 'react';\nimport {\n Collection as RACCollection,\n Tab as RACTab,\n TabList as RACTabList,\n TabPanel as RACTabPanel,\n Tabs as RACTabs,\n type TabsProps as RACTabsProps,\n type TabProps as RACTabProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type {\n AriaLabelingProps,\n CollectionItem,\n CollectionProps,\n CommonProps,\n Key,\n StringLikeChildren,\n} from '../types.js';\nimport { Text } from '../typography/text.js';\n\ninterface TabsContextValue {\n tabsProps?: AriaLabelingProps;\n}\n\nconst TabsContext = createContext<TabsContextValue>({});\n\nexport interface TabsProps\n extends CommonProps,\n AriaLabelingProps,\n Pick<RACTabsProps, 'selectedKey' \| 'defaultSelectedKey' \| 'disabledKeys' \| 'onSelectionChange'> {\n /** The children of the `<Tabs>` element. Should include `<TabList>` and `<TabPanels>` elements. /\n children: ReactNode;\n}\n\nfunction Tabs(\n {\n children,\n UNSAFE_className,\n UNSAFE_style,\n\n // Aria labeling props\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n 'aria-details': ariaDetails,\n\n ...props\n }: TabsProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n useProductionWarning(() => {\n if (!ariaLabel && !ariaLabelledBy) {\n console.warn('Tabs requires one of aria-label / aria-labelledby for accessibility');\n }\n }, [ariaLabel, ariaLabelledBy]);\n\n return (\n <TabsContext.Provider\n value={{\n tabsProps: {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n 'aria-details': ariaDetails,\n },\n }}\n >\n <RACTabs\n {...props}\n ref={ref}\n className={clsx('cim-tabs', UNSAFE_className)}\n style={UNSAFE_style}\n keyboardActivation=\"manual\"\n >\n {children}\n </RACTabs>\n </TabsContext.Provider>\n );\n}\n\n/\n Organizes content into multiple sections that users can switch between.\n \n See [tabs usage guidelines](https://ui.cimpress.io/components/tabs/).\n /\nconst _Tabs = withStyleProps(forwardRef(Tabs), 'Tabs');\n\nexport { _Tabs as Tabs };\n\nexport interface TabListProps<T extends CollectionItem> extends CollectionProps<T> {}\n\n/* Renders a collection of `Tab` components within `Tabs`. /\nexport function TabList<T extends CollectionItem>({ children, ...props }: TabListProps<T>) {\n const { tabsProps } = useContext(TabsContext);\n const {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n 'aria-details': ariaDetails,\n } = tabsProps ?? {};\n\n return (\n <RACTabList\n {...props}\n className=\"cim-tab-list\"\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n aria-details={ariaDetails}\n >\n {children}\n </RACTabList>\n );\n}\n\nTabList.displayName = 'TabList';\n\nexport interface TabProps extends Pick<RACTabProps, '~~id' \| '~~isDisabled' \| 'onHoverStart' \| 'onHoverEnd'> {\n /* The text to display as the tab title. /\n children: StringLikeChildren;\n /* An icon displayed before the tab title. /\n iconStart?: ReactNode;\n /* A badge displayed after the tab title. /\n badge?: ReactNode;\n}\n\n/* Renders a single tab within `TabList`. /\nexport function Tab({ children, iconStart, badge, ...props }: TabProps) {\n return (\n <RACTab {...props} className=\"cim-tab-item\">\n {iconStart}\n <Text as=\"span\" variant=\"medium-semibold\" alignment=\"center\">\n {children}\n </Text>\n {badge}\n </RACTab>\n );\n}\n\nTab.displayName = 'Tab';\n\nexport interface TabPanelsProps<T extends CollectionItem> extends CollectionProps<T> {}\n\n/* Renders a collection of `TabPanel` components within `Tabs`. /\nexport function TabPanels<T extends CollectionItem>({ ...props }: TabPanelsProps<T>) {\n return <RACCollection {...props} />;\n}\n\nTabPanels.displayName = 'TabPanels';\n\nexport interface TabPanelProps {\n /* The content to display in the tab panel. /\n children: ReactNode;\n /* The unique id of the associated tab. /\n id?: Key;\n}\n\n/* Renders a single tab panel within `TabPanels`. */\nexport function TabPanel({ children, ...props }: TabPanelProps) {\n return (\n <RACTabPanel {...props} className=\"cim-tab-panel\">\n {children}\n </RACTabPanel>\n );\n}\n\nTabPanel.displayName = 'TabPanel';\n"]}
1	+ {"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { createContext, useContext, type ForwardedRef, type ReactNode } from 'react';\nimport {\n Collection as RACCollection,\n Tab as RACTab,\n TabList as RACTabList,\n TabPanel as RACTabPanel,\n Tabs as RACTabs,\n type TabsProps as RACTabsProps,\n type TabProps as RACTabProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type {\n AriaLabelingProps,\n CollectionItem,\n CollectionProps,\n CommonProps,\n Key,\n StringLikeChildren,\n} from '../types.js';\nimport { Text } from '../typography/text.js';\n\ninterface TabsContextValue {\n tabsProps?: AriaLabelingProps;\n}\n\nconst TabsContext = createContext<TabsContextValue>({});\n\nexport interface TabsProps\n extends CommonProps,\n AriaLabelingProps,\n Pick<RACTabsProps, 'selectedKey' \| 'defaultSelectedKey' \| 'disabledKeys' \| 'onSelectionChange'> {\n /** The children of the `<Tabs>` element. Should include `<TabList>` and `<TabPanels>` elements. /\n children: ReactNode;\n}\n\nfunction Tabs(\n {\n children,\n UNSAFE_className,\n UNSAFE_style,\n\n // Aria labeling props\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n 'aria-details': ariaDetails,\n\n ...props\n }: TabsProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n useProductionWarning(() => {\n if (!ariaLabel && !ariaLabelledBy) {\n console.warn('Tabs requires one of aria-label / aria-labelledby for accessibility');\n }\n }, [ariaLabel, ariaLabelledBy]);\n\n return (\n <TabsContext.Provider\n value={{\n tabsProps: {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n 'aria-details': ariaDetails,\n },\n }}\n >\n <RACTabs\n {...props}\n ref={ref}\n className={clsx('cim-tabs', UNSAFE_className)}\n style={UNSAFE_style}\n keyboardActivation=\"manual\"\n >\n {children}\n </RACTabs>\n </TabsContext.Provider>\n );\n}\n\n/\n Organizes content into multiple sections that users can switch between.\n \n See [tabs usage guidelines](https://ui.cimpress.io/components/tabs/).\n /\nconst _Tabs = withStyleProps(forwardRef(Tabs), 'Tabs');\n\nexport { _Tabs as Tabs };\n\nexport interface TabListProps<T extends CollectionItem> extends CollectionProps<T> {}\n\n/* Renders a collection of `Tab` components within `Tabs`. /\nexport function TabList<T extends CollectionItem>({ children, ...props }: TabListProps<T>) {\n const { tabsProps } = useContext(TabsContext);\n const {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n 'aria-details': ariaDetails,\n } = tabsProps ?? {};\n\n return (\n <RACTabList\n {...props}\n className=\"cim-tab-list\"\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n aria-details={ariaDetails}\n >\n {children}\n </RACTabList>\n );\n}\n\nTabList.displayName = 'TabList';\n\nexport interface TabProps extends Pick<RACTabProps, 'isDisabled' \| 'onHoverStart' \| 'onHoverEnd'> {\n /* The unique ID of the tab. /\n id?: Key;\n /* The text to display as the tab title. /\n children: StringLikeChildren;\n /* An icon displayed before the tab title. /\n iconStart?: ReactNode;\n /* A badge displayed after the tab title. /\n badge?: ReactNode;\n}\n\n/* Renders a single tab within `TabList`. /\nexport function Tab({ children, iconStart, badge, ...props }: TabProps) {\n return (\n <RACTab {...props} className=\"cim-tab-item\">\n {iconStart}\n <Text as=\"span\" variant=\"medium-semibold\" alignment=\"center\">\n {children}\n </Text>\n {badge}\n </RACTab>\n );\n}\n\nTab.displayName = 'Tab';\n\nexport interface TabPanelsProps<T extends CollectionItem> extends CollectionProps<T> {}\n\n/* Renders a collection of `TabPanel` components within `Tabs`. /\nexport function TabPanels<T extends CollectionItem>({ ...props }: TabPanelsProps<T>) {\n return <RACCollection {...props} />;\n}\n\nTabPanels.displayName = 'TabPanels';\n\nexport interface TabPanelProps {\n /* The content to display in the tab panel. /\n children: ReactNode;\n /* The unique id of the associated tab. /\n id?: Key;\n}\n\n/* Renders a single tab panel within `TabPanels`. */\nexport function TabPanel({ children, ...props }: TabPanelProps) {\n return (\n <RACTabPanel {...props} className=\"cim-tab-panel\">\n {children}\n </RACTabPanel>\n );\n}\n\nTabPanel.displayName = 'TabPanel';\n"]}

package/dist/esm/components/tag-field/tag-field-input.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { useContext } from 'react';
 import { ComboBoxStateContext as RACComboBoxStateContext, Input as RACInput, InputContext as RACInputContext, TextContext as RACTextContext, useSlottedContext, } from 'react-aria-components';
 import { textStyle } from '../typography/utils.js';
 /** @internal */
-export function TagFieldInput({ isReadOnly, isRequired, isInvalid, placeholder, onFocusChange, 'aria-describedby': ariaDescribedby, }) {
+export function TagFieldInput({ inputRef, isReadOnly, isRequired, isInvalid, placeholder, onFocusChange, 'aria-describedby': ariaDescribedby, }) {
     const comboBoxState = useContext(RACComboBoxStateContext);
     const inputContext = useContext(RACInputContext);
     // We use custom IDs for description and error message, so we need to manually attach them to the input
@@ -16,7 +16,7 @@ export function TagFieldInput({ isReadOnly, isRequired, isInvalid, placeholder,
             required: false,
             'aria-required': isRequired,
             'aria-invalid': isInvalid || undefined,
-        }, children: _jsx(RACInput, { className: clsx('cim-combo-box-input', textStyle({ variant: 'body' })),
+        }, children: _jsx(RACInput, { ref: inputRef, className: clsx('cim-combo-box-input', 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, onFocus: () => onFocusChange(true), onBlur: () => onFocusChange(false), "aria-describedby": [descriptionId, errorMessageId, ariaDescribedby].filter(Boolean).join(' ') || undefined }) }));

package/dist/esm/components/tag-field/tag-field-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tag-field-input.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field-input.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,~~EAAE~~,UAAU,EAAE,MAAM,OAAO,CAAC;~~AACnC~~,OAAO,EACL,oBAAoB,IAAI,uBAAuB,EAC/C,KAAK,IAAI,QAAQ,EACjB,YAAY,IAAI,eAAe,EAC/B,WAAW,IAAI,cAAc,EAC7B,iBAAiB,GAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,gBAAgB;AAChB,MAAM,UAAU,aAAa,CAAC,EAC5B,UAAU,EACV,UAAU,EACV,SAAS,EACT,WAAW,EACX,aAAa,EACb,kBAAkB,EAAE,eAAe,~~GAQpC~~;IACC,MAAM,aAAa,GAAG,UAAU,CAAC,uBAAuB,CAAC,CAAC;IAC1D,MAAM,YAAY,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAEjD,uGAAuG;IACvG,MAAM,EAAE,EAAE,EAAE,aAAa,EAAE,GAAG,iBAAiB,CAAC,cAAc,EAAE,aAAa,CAAE,CAAC;IAChF,MAAM,EAAE,EAAE,EAAE,cAAc,EAAE,GAAG,iBAAiB,CAAC,cAAc,EAAE,cAAc,CAAE,CAAC;IAElF,OAAO,CACL,KAAC,eAAe,CAAC,QAAQ,IACvB,KAAK,EAAE;YACL,GAAG,YAAY;YACf,sIAAsI;YACtI,QAAQ,EAAE,KAAK;YACf,eAAe,EAAE,UAAU;YAC3B,cAAc,EAAE,SAAS,IAAI,SAAS;SACvC,YAED,KAAC,QAAQ,IACP,SAAS,EAAE,IAAI,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC;YACtE,sDAAsD;YACtD,2EAA2E;YAC3E,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,UAAU,IAAI,aAAc,CAAC,IAAI,EAAE,EACnD,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EAClC,MAAM,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,sBAChB,CAAC,aAAa,EAAE,cAAc,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,SAAS,GACzG,GACuB,CAC5B,CAAC;AACJ,CAAC","sourcesContent":["import clsx from 'clsx';\nimport { useContext } from 'react';\nimport {\n ComboBoxStateContext as RACComboBoxStateContext,\n Input as RACInput,\n InputContext as RACInputContext,\n TextContext as RACTextContext,\n useSlottedContext,\n} from 'react-aria-components';\nimport { textStyle } from '../typography/utils.js';\n\n/** @internal */\nexport function TagFieldInput({\n isReadOnly,\n isRequired,\n isInvalid,\n placeholder,\n onFocusChange,\n 'aria-describedby': ariaDescribedby,\n}: {\n isReadOnly: boolean \| undefined;\n isRequired: boolean \| undefined;\n isInvalid: boolean \| undefined;\n placeholder: string \| undefined;\n onFocusChange: (isFocused: boolean) => void;\n 'aria-describedby': string \| undefined;\n}) {\n const comboBoxState = useContext(RACComboBoxStateContext);\n const inputContext = useContext(RACInputContext);\n\n // We use custom IDs for description and error message, so we need to manually attach them to the input\n const { id: descriptionId } = useSlottedContext(RACTextContext, 'description')!;\n const { id: errorMessageId } = useSlottedContext(RACTextContext, 'errorMessage')!;\n\n return (\n <RACInputContext.Provider\n value={{\n ...inputContext,\n // Change `required` to `aria-required` so that form submission isn't blocked, but required state is still announced by screen readers\n required: false,\n 'aria-required': isRequired,\n 'aria-invalid': isInvalid \|\| undefined,\n }}\n >\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 onFocus={() => onFocusChange(true)}\n onBlur={() => onFocusChange(false)}\n aria-describedby={[descriptionId, errorMessageId, ariaDescribedby].filter(Boolean).join(' ') \|\| undefined}\n />\n </RACInputContext.Provider>\n );\n}\n"]}
1	+ {"version":3,"file":"tag-field-input.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field-input.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAyB,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,EACL,oBAAoB,IAAI,uBAAuB,EAC/C,KAAK,IAAI,QAAQ,EACjB,YAAY,IAAI,eAAe,EAC/B,WAAW,IAAI,cAAc,EAC7B,iBAAiB,GAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,gBAAgB;AAChB,MAAM,UAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,UAAU,EACV,UAAU,EACV,SAAS,EACT,WAAW,EACX,aAAa,EACb,kBAAkB,EAAE,eAAe,GASpC;IACC,MAAM,aAAa,GAAG,UAAU,CAAC,uBAAuB,CAAC,CAAC;IAC1D,MAAM,YAAY,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAEjD,uGAAuG;IACvG,MAAM,EAAE,EAAE,EAAE,aAAa,EAAE,GAAG,iBAAiB,CAAC,cAAc,EAAE,aAAa,CAAE,CAAC;IAChF,MAAM,EAAE,EAAE,EAAE,cAAc,EAAE,GAAG,iBAAiB,CAAC,cAAc,EAAE,cAAc,CAAE,CAAC;IAElF,OAAO,CACL,KAAC,eAAe,CAAC,QAAQ,IACvB,KAAK,EAAE;YACL,GAAG,YAAY;YACf,sIAAsI;YACtI,QAAQ,EAAE,KAAK;YACf,eAAe,EAAE,UAAU;YAC3B,cAAc,EAAE,SAAS,IAAI,SAAS;SACvC,YAED,KAAC,QAAQ,IACP,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC;YACtE,sDAAsD;YACtD,2EAA2E;YAC3E,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,UAAU,IAAI,aAAc,CAAC,IAAI,EAAE,EACnD,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EAClC,MAAM,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,sBAChB,CAAC,aAAa,EAAE,cAAc,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,SAAS,GACzG,GACuB,CAC5B,CAAC;AACJ,CAAC","sourcesContent":["import clsx from 'clsx';\nimport { type MutableRefObject, useContext } from 'react';\nimport {\n ComboBoxStateContext as RACComboBoxStateContext,\n Input as RACInput,\n InputContext as RACInputContext,\n TextContext as RACTextContext,\n useSlottedContext,\n} from 'react-aria-components';\nimport { textStyle } from '../typography/utils.js';\n\n/** @internal */\nexport function TagFieldInput({\n inputRef,\n isReadOnly,\n isRequired,\n isInvalid,\n placeholder,\n onFocusChange,\n 'aria-describedby': ariaDescribedby,\n}: {\n inputRef: MutableRefObject<HTMLInputElement \| null>;\n isReadOnly: boolean \| undefined;\n isRequired: boolean \| undefined;\n isInvalid: boolean \| undefined;\n placeholder: string \| undefined;\n onFocusChange: (isFocused: boolean) => void;\n 'aria-describedby': string \| undefined;\n}) {\n const comboBoxState = useContext(RACComboBoxStateContext);\n const inputContext = useContext(RACInputContext);\n\n // We use custom IDs for description and error message, so we need to manually attach them to the input\n const { id: descriptionId } = useSlottedContext(RACTextContext, 'description')!;\n const { id: errorMessageId } = useSlottedContext(RACTextContext, 'errorMessage')!;\n\n return (\n <RACInputContext.Provider\n value={{\n ...inputContext,\n // Change `required` to `aria-required` so that form submission isn't blocked, but required state is still announced by screen readers\n required: false,\n 'aria-required': isRequired,\n 'aria-invalid': isInvalid \|\| undefined,\n }}\n >\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 onFocus={() => onFocusChange(true)}\n onBlur={() => onFocusChange(false)}\n aria-describedby={[descriptionId, errorMessageId, ariaDescribedby].filter(Boolean).join(' ') \|\| undefined}\n />\n </RACInputContext.Provider>\n );\n}\n"]}

package/dist/esm/components/tag-field/tag-field-list-box.js CHANGED Viewed

@@ -18,13 +18,15 @@ export function TagFieldListBox({ children, inputId, selectedKeys, setSelectedKe
         if (!listState || !listState.selectionManager) {
             return listState;
         }
-        // @ts-expect-error `selectionManager.state` is private
         // This is a temporary mutation before a context update, so this is fine
-        // eslint-disable-next-line react-hooks/react-compiler
+        // @ts-expect-error `selectionManager.state` is private
+        // eslint-disable-next-line react-hooks/immutability
         listState.selectionManager.state.selectionMode = 'multiple';
         // @ts-expect-error `selectionManager.state` is private
+        // eslint-disable-next-line react-hooks/immutability
         listState.selectionManager.state.selectedKeys = selectedKeys;
         // @ts-expect-error `selectionManager.state` is private
+        // eslint-disable-next-line react-hooks/immutability
         listState.selectionManager.state.setSelectedKeys = (keys) => {
             if (keys === 'all') {
                 // When the end-user presses Ctrl/Cmd + A on a list which has `selectionMode` set to `'multiple'`,
@@ -38,6 +40,7 @@ export function TagFieldListBox({ children, inputId, selectedKeys, setSelectedKe
             }
         };
         // @ts-expect-error `selectionManager.state` is private
+        // eslint-disable-next-line react-hooks/immutability
         listState.selectionManager.state.disallowEmptySelection = false;
         return {
             ...listState,

package/dist/esm/components/tag-field/tag-field-list-box.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tag-field-list-box.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field-list-box.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EACL,oBAAoB,IAAI,uBAAuB,EAC/C,OAAO,IAAI,UAAU,EACrB,UAAU,IAAI,aAAa,EAE3B,gBAAgB,IAAI,mBAAmB,EACvC,WAAW,IAAI,cAAc,GAC9B,MAAM,uBAAuB,CAAC;AAI/B,MAAM,sBAAsB,GAAyB;IACnD,SAAS,EAAE,EAAE;IACb,aAAa,EAAE,EAAE;IACjB,OAAO,EAAE,CAAC;IACV,GAAG,EAAE,CAAC;CACP,CAAC;AAEF,gBAAgB;AAChB,MAAM,UAAU,eAAe,CAA2B,EACxD,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,eAAe,EACf,KAAK,EACL,QAAQ,EACR,aAAa,GAKd;IACC,MAAM,aAAa,GAAG,UAAU,CAAC,uBAAuB,CAAC,CAAC;IAC1D,MAAM,SAAS,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAElD,gBAAgB,CAAC,EAAE,UAAU,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,CAAC,CAAC;IAEzD,2EAA2E;IAC3E,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,EAAE;QACpC,IAAI,CAAC,SAAS,IAAI,CAAC,SAAS,CAAC,gBAAgB,EAAE,CAAC;YAC9C,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,uDAAuD;QACvD,~~wEAAwE~~;~~QACxE~~,~~sDAAsD;QACtD,~~SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,aAAa,GAAG,UAAU,CAAC;QAC5D,uDAAuD;QACvD,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,YAAY,GAAG,YAAY,CAAC;QAC7D,uDAAuD;QACvD,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,eAAe,GAAG,CAAC,IAAsB,EAAE,EAAE;YAC5E,IAAI,IAAI,KAAK,KAAK,EAAE,CAAC;gBACnB,kGAAkG;gBAClG,uFAAuF;gBACvF,iFAAiF;gBACjF,yEAAyE;gBACxE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAA6B,EAAE,MAAM,EAAE,CAAC;YAC1E,CAAC;iBAAM,CAAC;gBACN,eAAe,CAAC,IAAI,CAAC,CAAC;YACxB,CAAC;QACH,CAAC,CAAC;QACF,uDAAuD;QACvD,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,sBAAsB,GAAG,KAAK,CAAC;QAEhE,OAAO;YACL,GAAG,SAAS;SACb,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,EAAE,eAAe,EAAE,OAAO,CAAC,CAAC,CAAC;IAExD,MAAM,OAAO,GAAG,CACd,KAAC,UAAU,IAAC,SAAS,EAAC,uBAAuB,EAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,YAC3E,QAAQ,GACE,CACd,CAAC;IAEF,OAAO,CACL,KAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,gBAAgB,YAClD,aAAa,CAAC,CAAC,CAAC,CACf,KAAC,cAAc,IAAC,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,sBAAsB,YACzE,OAAO,GACO,CAClB,CAAC,CAAC,CAAC,CACF,OAAO,CACR,GAC4B,CAChC,CAAC;AACJ,CAAC","sourcesContent":["import { useContext, useMemo } from 'react';\nimport { usePreventScroll } from 'react-aria';\nimport {\n ComboBoxStateContext as RACComboBoxStateContext,\n ListBox as RACListBox,\n ListLayout as RACListLayout,\n type ListLayoutOptions as RACListLayoutOptions,\n ListStateContext as RACListStateContext,\n Virtualizer as RACVirtualizer,\n} from 'react-aria-components';\nimport type { CollectionItem, Key } from '../types.js';\nimport type { TagFieldProps } from './tag-field.js';\n\nconst VIRTUAL_LAYOUT_OPTIONS: RACListLayoutOptions = {\n rowHeight: 36,\n headingHeight: 32,\n padding: 0,\n gap: 0,\n};\n\n/** @internal */\nexport function TagFieldListBox<T extends CollectionItem>({\n children,\n inputId,\n selectedKeys,\n setSelectedKeys,\n items,\n onScroll,\n isVirtualized,\n}: Pick<TagFieldProps<T>, 'children' \| 'items' \| 'onScroll' \| 'isVirtualized'> & {\n inputId: string;\n selectedKeys: Set<Key>;\n setSelectedKeys: (keys: Set<Key>) => void;\n}) {\n const comboBoxState = useContext(RACComboBoxStateContext);\n const listState = useContext(RACListStateContext);\n\n usePreventScroll({ isDisabled: !comboBoxState?.isOpen });\n\n // Override RACListStateContext to allow multiple selection within the list\n const updatedListState = useMemo(() => {\n if (!listState \|\| !listState.selectionManager) {\n return listState;\n }\n\n // ~~@ts-expect-error `selectionManager.state` is private\n //~~ This is a temporary mutation before a context update, so this is fine\n // eslint-disable-next-line react-hooks/~~react-compiler~~\n listState.selectionManager.state.selectionMode = 'multiple';\n // @ts-expect-error `selectionManager.state` is private\n listState.selectionManager.state.selectedKeys = selectedKeys;\n // @ts-expect-error `selectionManager.state` is private\n listState.selectionManager.state.setSelectedKeys = (keys: Set<Key> \| 'all') => {\n if (keys === 'all') {\n // When the end-user presses Ctrl/Cmd + A on a list which has `selectionMode` set to `'multiple'`,\n // the selection manager emits the `'all'` string as an indication to select all items.\n // We don't want to do that - instead, we select the contents of the input field.\n // Querying by ID because RACInputContext has a null ref for some reason.\n (document.getElementById(inputId) as HTMLInputElement \| null)?.select();\n } else {\n setSelectedKeys(keys);\n }\n };\n // @ts-expect-error `selectionManager.state` is private\n listState.selectionManager.state.disallowEmptySelection = false;\n\n return {\n ...listState,\n };\n }, [listState, selectedKeys, setSelectedKeys, inputId]);\n\n const listBox = (\n <RACListBox className=\"cim-combo-box-listbox\" onScroll={onScroll} items={items}>\n {children}\n </RACListBox>\n );\n\n return (\n <RACListStateContext.Provider value={updatedListState}>\n {isVirtualized ? (\n <RACVirtualizer layout={RACListLayout} layoutOptions={VIRTUAL_LAYOUT_OPTIONS}>\n {listBox}\n </RACVirtualizer>\n ) : (\n listBox\n )}\n </RACListStateContext.Provider>\n );\n}\n"]}
1	+ {"version":3,"file":"tag-field-list-box.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field-list-box.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EACL,oBAAoB,IAAI,uBAAuB,EAC/C,OAAO,IAAI,UAAU,EACrB,UAAU,IAAI,aAAa,EAE3B,gBAAgB,IAAI,mBAAmB,EACvC,WAAW,IAAI,cAAc,GAC9B,MAAM,uBAAuB,CAAC;AAI/B,MAAM,sBAAsB,GAAyB;IACnD,SAAS,EAAE,EAAE;IACb,aAAa,EAAE,EAAE;IACjB,OAAO,EAAE,CAAC;IACV,GAAG,EAAE,CAAC;CACP,CAAC;AAEF,gBAAgB;AAChB,MAAM,UAAU,eAAe,CAA2B,EACxD,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,eAAe,EACf,KAAK,EACL,QAAQ,EACR,aAAa,GAKd;IACC,MAAM,aAAa,GAAG,UAAU,CAAC,uBAAuB,CAAC,CAAC;IAC1D,MAAM,SAAS,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAElD,gBAAgB,CAAC,EAAE,UAAU,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,CAAC,CAAC;IAEzD,2EAA2E;IAC3E,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,EAAE;QACpC,IAAI,CAAC,SAAS,IAAI,CAAC,SAAS,CAAC,gBAAgB,EAAE,CAAC;YAC9C,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,wEAAwE;QACxE,uDAAuD;QACvD,oDAAoD;QACpD,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,aAAa,GAAG,UAAU,CAAC;QAC5D,uDAAuD;QACvD,oDAAoD;QACpD,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,YAAY,GAAG,YAAY,CAAC;QAC7D,uDAAuD;QACvD,oDAAoD;QACpD,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,eAAe,GAAG,CAAC,IAAsB,EAAE,EAAE;YAC5E,IAAI,IAAI,KAAK,KAAK,EAAE,CAAC;gBACnB,kGAAkG;gBAClG,uFAAuF;gBACvF,iFAAiF;gBACjF,yEAAyE;gBACxE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAA6B,EAAE,MAAM,EAAE,CAAC;YAC1E,CAAC;iBAAM,CAAC;gBACN,eAAe,CAAC,IAAI,CAAC,CAAC;YACxB,CAAC;QACH,CAAC,CAAC;QACF,uDAAuD;QACvD,oDAAoD;QACpD,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,sBAAsB,GAAG,KAAK,CAAC;QAEhE,OAAO;YACL,GAAG,SAAS;SACb,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,EAAE,eAAe,EAAE,OAAO,CAAC,CAAC,CAAC;IAExD,MAAM,OAAO,GAAG,CACd,KAAC,UAAU,IAAC,SAAS,EAAC,uBAAuB,EAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,YAC3E,QAAQ,GACE,CACd,CAAC;IAEF,OAAO,CACL,KAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,gBAAgB,YAClD,aAAa,CAAC,CAAC,CAAC,CACf,KAAC,cAAc,IAAC,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,sBAAsB,YACzE,OAAO,GACO,CAClB,CAAC,CAAC,CAAC,CACF,OAAO,CACR,GAC4B,CAChC,CAAC;AACJ,CAAC","sourcesContent":["import { useContext, useMemo } from 'react';\nimport { usePreventScroll } from 'react-aria';\nimport {\n ComboBoxStateContext as RACComboBoxStateContext,\n ListBox as RACListBox,\n ListLayout as RACListLayout,\n type ListLayoutOptions as RACListLayoutOptions,\n ListStateContext as RACListStateContext,\n Virtualizer as RACVirtualizer,\n} from 'react-aria-components';\nimport type { CollectionItem, Key } from '../types.js';\nimport type { TagFieldProps } from './tag-field.js';\n\nconst VIRTUAL_LAYOUT_OPTIONS: RACListLayoutOptions = {\n rowHeight: 36,\n headingHeight: 32,\n padding: 0,\n gap: 0,\n};\n\n/** @internal */\nexport function TagFieldListBox<T extends CollectionItem>({\n children,\n inputId,\n selectedKeys,\n setSelectedKeys,\n items,\n onScroll,\n isVirtualized,\n}: Pick<TagFieldProps<T>, 'children' \| 'items' \| 'onScroll' \| 'isVirtualized'> & {\n inputId: string;\n selectedKeys: Set<Key>;\n setSelectedKeys: (keys: Set<Key>) => void;\n}) {\n const comboBoxState = useContext(RACComboBoxStateContext);\n const listState = useContext(RACListStateContext);\n\n usePreventScroll({ isDisabled: !comboBoxState?.isOpen });\n\n // Override RACListStateContext to allow multiple selection within the list\n const updatedListState = useMemo(() => {\n if (!listState \|\| !listState.selectionManager) {\n return listState;\n }\n\n // This is a temporary mutation before a context update, so this is fine\n // @ts-expect-error `selectionManager.state` is private\n // eslint-disable-next-line react-hooks/immutability\n listState.selectionManager.state.selectionMode = 'multiple';\n // @ts-expect-error `selectionManager.state` is private\n // eslint-disable-next-line react-hooks/immutability\n listState.selectionManager.state.selectedKeys = selectedKeys;\n // @ts-expect-error `selectionManager.state` is private\n // eslint-disable-next-line react-hooks/immutability\n listState.selectionManager.state.setSelectedKeys = (keys: Set<Key> \| 'all') => {\n if (keys === 'all') {\n // When the end-user presses Ctrl/Cmd + A on a list which has `selectionMode` set to `'multiple'`,\n // the selection manager emits the `'all'` string as an indication to select all items.\n // We don't want to do that - instead, we select the contents of the input field.\n // Querying by ID because RACInputContext has a null ref for some reason.\n (document.getElementById(inputId) as HTMLInputElement \| null)?.select();\n } else {\n setSelectedKeys(keys);\n }\n };\n // @ts-expect-error `selectionManager.state` is private\n // eslint-disable-next-line react-hooks/immutability\n listState.selectionManager.state.disallowEmptySelection = false;\n\n return {\n ...listState,\n };\n }, [listState, selectedKeys, setSelectedKeys, inputId]);\n\n const listBox = (\n <RACListBox className=\"cim-combo-box-listbox\" onScroll={onScroll} items={items}>\n {children}\n </RACListBox>\n );\n\n return (\n <RACListStateContext.Provider value={updatedListState}>\n {isVirtualized ? (\n <RACVirtualizer layout={RACListLayout} layoutOptions={VIRTUAL_LAYOUT_OPTIONS}>\n {listBox}\n </RACVirtualizer>\n ) : (\n listBox\n )}\n </RACListStateContext.Provider>\n );\n}\n"]}

package/dist/esm/components/tag-field/tag-field-tags.js CHANGED Viewed

@@ -6,6 +6,8 @@ import { Tag } from '../tag/tag.js';
 /** @internal */
 export function TagFieldTags({ inputId, selectedKeys, isDisabled, isReadOnly, renderEmptyState, onRemove, }) {
     const listState = useContext(RACListStateContext);
+    // The plugin doesn't see `selectedKeys` as a legitimate dependency
+    // eslint-disable-next-line react-hooks/preserve-manual-memoization
     const selectedItems = useMemo(() => {
         return [...selectedKeys.values()]
             .map((key) => listState?.selectionManager.collection.getItem(key))

package/dist/esm/components/tag-field/tag-field-tags.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tag-field-tags.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field-tags.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EACL,aAAa,IAAI,gBAAgB,EACjC,YAAY,IAAI,eAAe,EAC/B,gBAAgB,IAAI,mBAAmB,EACvC,QAAQ,IAAI,WAAW,EACvB,WAAW,IAAI,cAAc,GAC9B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,GAAG,EAAiB,MAAM,eAAe,CAAC;AAInD,gBAAgB;AAChB,MAAM,UAAU,YAAY,CAA2B,EACrD,OAAO,EACP,YAAY,EACZ,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,QAAQ,GAKT;IACC,MAAM,SAAS,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAElD,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,CAAC;aAC9B,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,SAAS,EAAE,gBAAgB,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;aACjE,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC,CAAC;IAE3D,OAAO,CACL,KAAC,WAAW,IACV,MAAM,EAAE;YACN,4EAA4E;YAC5E,CAAC,eAAe,EAAE,IAAI,CAAC;YACvB,CAAC,gBAAgB,EAAE,IAAI,CAAC;YACxB,CAAC,cAAc,EAAE,IAAI,CAAC;YACtB,CAAC,mBAAmB,EAAE,IAAI,CAAC;SAC5B,YAED,KAAC,QAAQ,uBACU,OAAO,EACxB,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EACnD,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,EACN,UAAU;gBACR,CAAC,CAAC,SAAS;gBACX,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE;oBACP,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;gBACzB,CAAC,YAGN,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC3B,KAAC,GAAG,IAAgB,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,UAAU,EAAG,IAAI,CAAC,KAAkB,CAAC,UAAU,YAC9E,IAAI,CAAC,SAAS,IADP,IAAI,CAAC,GAAG,CAEZ,CACP,CAAC,GACO,GACC,CACf,CAAC;AACJ,CAAC","sourcesContent":["import { useContext, useMemo } from 'react';\nimport {\n ButtonContext as RACButtonContext,\n LabelContext as RACLabelContext,\n ListStateContext as RACListStateContext,\n Provider as RACProvider,\n TextContext as RACTextContext,\n} from 'react-aria-components';\nimport { TagGroup } from '../tag/tag-group.js';\nimport { Tag, type TagProps } from '../tag/tag.js';\nimport type { CollectionItem, Key } from '../types.js';\nimport type { TagFieldProps } from './tag-field.js';\n\n/** @internal */\nexport function TagFieldTags<T extends CollectionItem>({\n inputId,\n selectedKeys,\n isDisabled,\n isReadOnly,\n renderEmptyState,\n onRemove,\n}: Pick<TagFieldProps<T>, 'isDisabled' \| 'isReadOnly' \| 'renderEmptyState'> & {\n inputId: string;\n selectedKeys: Set<Key>;\n onRemove: (key: Key) => void;\n}) {\n const listState = useContext(RACListStateContext);\n\n const selectedItems = useMemo(() => {\n return [...selectedKeys.values()]\n .map((key) => listState?.selectionManager.collection.getItem(key))\n .filter((value) => !!value);\n }, [selectedKeys, listState?.selectionManager.collection]);\n\n return (\n <RACProvider\n values={[\n // Reset contexts so that TagGroup doesn't inherit any data from RACComboBox\n [RACLabelContext, null],\n [RACButtonContext, null],\n [RACTextContext, null],\n [RACListStateContext, null],\n ]}\n >\n <TagGroup\n aria-labelledby={inputId}\n disabledKeys={isDisabled ? selectedKeys : undefined}\n renderEmptyState={renderEmptyState}\n onRemove={\n isReadOnly\n ? undefined\n : (keys) => {\n keys.forEach(onRemove);\n }\n }\n >\n {selectedItems.map((item) => (\n <Tag key={item.key} id={item.key} isDisabled={(item.props as TagProps).isDisabled}>\n {item.textValue}\n </Tag>\n ))}\n </TagGroup>\n </RACProvider>\n );\n}\n"]}
1	+ {"version":3,"file":"tag-field-tags.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field-tags.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EACL,aAAa,IAAI,gBAAgB,EACjC,YAAY,IAAI,eAAe,EAC/B,gBAAgB,IAAI,mBAAmB,EACvC,QAAQ,IAAI,WAAW,EACvB,WAAW,IAAI,cAAc,GAC9B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,GAAG,EAAiB,MAAM,eAAe,CAAC;AAInD,gBAAgB;AAChB,MAAM,UAAU,YAAY,CAA2B,EACrD,OAAO,EACP,YAAY,EACZ,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,QAAQ,GAKT;IACC,MAAM,SAAS,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAElD,mEAAmE;IACnE,mEAAmE;IACnE,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,CAAC;aAC9B,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,SAAS,EAAE,gBAAgB,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;aACjE,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC,CAAC;IAE3D,OAAO,CACL,KAAC,WAAW,IACV,MAAM,EAAE;YACN,4EAA4E;YAC5E,CAAC,eAAe,EAAE,IAAI,CAAC;YACvB,CAAC,gBAAgB,EAAE,IAAI,CAAC;YACxB,CAAC,cAAc,EAAE,IAAI,CAAC;YACtB,CAAC,mBAAmB,EAAE,IAAI,CAAC;SAC5B,YAED,KAAC,QAAQ,uBACU,OAAO,EACxB,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EACnD,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,EACN,UAAU;gBACR,CAAC,CAAC,SAAS;gBACX,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE;oBACP,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;gBACzB,CAAC,YAGN,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC3B,KAAC,GAAG,IAAgB,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,UAAU,EAAG,IAAI,CAAC,KAAkB,CAAC,UAAU,YAC9E,IAAI,CAAC,SAAS,IADP,IAAI,CAAC,GAAG,CAEZ,CACP,CAAC,GACO,GACC,CACf,CAAC;AACJ,CAAC","sourcesContent":["import { useContext, useMemo } from 'react';\nimport {\n ButtonContext as RACButtonContext,\n LabelContext as RACLabelContext,\n ListStateContext as RACListStateContext,\n Provider as RACProvider,\n TextContext as RACTextContext,\n} from 'react-aria-components';\nimport { TagGroup } from '../tag/tag-group.js';\nimport { Tag, type TagProps } from '../tag/tag.js';\nimport type { CollectionItem, Key } from '../types.js';\nimport type { TagFieldProps } from './tag-field.js';\n\n/** @internal */\nexport function TagFieldTags<T extends CollectionItem>({\n inputId,\n selectedKeys,\n isDisabled,\n isReadOnly,\n renderEmptyState,\n onRemove,\n}: Pick<TagFieldProps<T>, 'isDisabled' \| 'isReadOnly' \| 'renderEmptyState'> & {\n inputId: string;\n selectedKeys: Set<Key>;\n onRemove: (key: Key) => void;\n}) {\n const listState = useContext(RACListStateContext);\n\n // The plugin doesn't see `selectedKeys` as a legitimate dependency\n // eslint-disable-next-line react-hooks/preserve-manual-memoization\n const selectedItems = useMemo(() => {\n return [...selectedKeys.values()]\n .map((key) => listState?.selectionManager.collection.getItem(key))\n .filter((value) => !!value);\n }, [selectedKeys, listState?.selectionManager.collection]);\n\n return (\n <RACProvider\n values={[\n // Reset contexts so that TagGroup doesn't inherit any data from RACComboBox\n [RACLabelContext, null],\n [RACButtonContext, null],\n [RACTextContext, null],\n [RACListStateContext, null],\n ]}\n >\n <TagGroup\n aria-labelledby={inputId}\n disabledKeys={isDisabled ? selectedKeys : undefined}\n renderEmptyState={renderEmptyState}\n onRemove={\n isReadOnly\n ? undefined\n : (keys) => {\n keys.forEach(onRemove);\n }\n }\n >\n {selectedItems.map((item) => (\n <Tag key={item.key} id={item.key} isDisabled={(item.props as TagProps).isDisabled}>\n {item.textValue}\n </Tag>\n ))}\n </TagGroup>\n </RACProvider>\n );\n}\n"]}

package/dist/esm/components/tag-field/tag-field.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
-import { type ListBoxProps as RACListBoxProps, type ComboBoxProps as RACComboBoxProps, type ListBoxItemProps as RACListBoxItemProps } from 'react-aria-components';
+import { type UIEventHandler } from 'react';
+import { type ComboBoxProps as RACComboBoxProps, type ListBoxItemProps as RACListBoxItemProps } from 'react-aria-components';
 import type { TagGroupProps } from '../tag/tag-group.js';
-import type { CollectionItem, CollectionProps, CommonProps, FieldWithPlaceholderProps, Key, StringLikeChildren } from '../types.js';
+import type { ApiProps, CollectionItem, CollectionProps, CommonProps, FieldWithPlaceholderProps, Key, StringLikeChildren } from '../types.js';
 /** Represents the state of the `TagField` component for validation purposes. */
 export interface TagFieldValidationValue {
     /** The selected keys in the TagField. */
@@ -8,7 +9,7 @@ export interface TagFieldValidationValue {
     /** The value of the TagField input. */
     inputValue: string;
 }
-export interface TagFieldProps<T extends CollectionItem = CollectionItem> extends CommonProps, FieldWithPlaceholderProps<TagFieldValidationValue>, CollectionProps<T>, Pick<RACComboBoxProps<T>, 'isRequired' | 'isDisabled' | 'isInvalid' | 'isReadOnly' | 'inputValue' | 'defaultInputValue' | 'autoFocus' | 'onInputChange' | 'onFocus' | 'onBlur' | 'onOpenChange'>, Pick<RACListBoxProps<T>, 'onScroll'>, Pick<TagGroupProps<T>, 'renderEmptyState'> {
+export interface TagFieldProps<T extends CollectionItem = CollectionItem> extends CommonProps, FieldWithPlaceholderProps<TagFieldValidationValue>, CollectionProps<T>, ApiProps<TagFieldApi>, Pick<RACComboBoxProps<T>, 'isRequired' | 'isDisabled' | 'isInvalid' | 'isReadOnly' | 'inputValue' | 'defaultInputValue' | 'autoFocus' | 'onInputChange' | 'onFocus' | 'onBlur' | 'onOpenChange'>, Pick<TagGroupProps<T>, 'renderEmptyState'> {
     /** The currently selected keys in the collection (controlled). */
     selectedKeys?: Iterable<Key>;
     /** The initial selected keys in the collection (uncontrolled). */
@@ -20,6 +21,13 @@ export interface TagFieldProps<T extends CollectionItem = CollectionItem> extend
      * @default false
      */
     isVirtualized?: boolean;
+    /** Handler that is called when the list of items is scrolled. */
+    onScroll?: UIEventHandler<HTMLDivElement>;
+}
+/** The imperative API exposed by the `TagField` component. */
+export interface TagFieldApi {
+    /** Focuses the input field and opens the list of items. */
+    focus: () => void;
 }
 /**
  * Allows users to filter a collapsible list and select multiple items from it.
@@ -28,7 +36,9 @@ export interface TagFieldProps<T extends CollectionItem = CollectionItem> extend
  */
 declare const _TagField: <T extends CollectionItem>(props: TagFieldProps<T> & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
 export { _TagField as TagField };
-export interface TagFieldItemProps<T extends CollectionItem> extends Pick<RACListBoxItemProps<T>, 'id' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {
+export interface TagFieldItemProps<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;
 }