@cimpress-ui/react 0.2.1 → 0.3.0

package/dist/commonjs/components/popover/popover.js

@@ -0,0 +1,40 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Popover = void 0;
+exports.PopoverRoot = PopoverRoot;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
+const react_aria_components_1 = require("react-aria-components");
+const forward_ref_js_1 = require("../../forward-ref.js");
+const focusable_container_js_1 = require("../internal/focusable-container/focusable-container.js");
+const utils_js_1 = require("../typography/utils.js");
+/**
+ * Encapsulates a popover trigger and its associated popover.
+ * The trigger can be any Cimpress UI button, and the popover will be displayed when the trigger is activated.
+ */
+function PopoverRoot(props) {
+    return (0, jsx_runtime_1.jsx)(react_aria_components_1.DialogTrigger, { ...props });
+}
+PopoverRoot.displayName = 'PopoverRoot';
+function Popover({ children, title, UNSAFE_className, UNSAFE_style, isOpen, defaultOpen, onOpenChange, placement, triggerRef, ...props }, ref) {
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+    (0, react_1.useEffect)(() => {
+        if (!title && !ariaLabel && !ariaLabelledBy) {
+            console.warn('Popover requires one of title / aria-label / aria-labelledby for accessibility');
+        }
+    }, [title, ariaLabel, ariaLabelledBy]);
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Popover, { className: (0, clsx_1.default)('cim-popover', UNSAFE_className), style: UNSAFE_style, isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: onOpenChange, triggerRef: triggerRef, placement: placement, containerPadding: 16, offset: 5, arrowBoundaryOffset: 4, "data-cim-style-root": true, children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.OverlayArrow, { className: "cim-popover-arrow", children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "10", viewBox: "0 0 16 10", children: (0, jsx_runtime_1.jsx)("path", { d: "M16 0L8.7809 9.0239C8.3805 9.5243 7.6195 9.5243 7.2191 9.0239L0 0" }) }) }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { ...props, ref: ref, className: "cim-popover-dialog", children: (renderProps) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && ((0, jsx_runtime_1.jsx)(react_aria_components_1.Heading, { slot: "title", className: (0, clsx_1.default)('cim-popover-title', (0, utils_js_1.textStyle)({ variant: 'title-5' })), children: title })), (0, jsx_runtime_1.jsx)(focusable_container_js_1.FocusableContainer, { className: "cim-popover-content", scrollDirection: "vertical", children: typeof children === 'function' ? children(renderProps) : children })] })) })] }));
+}
+/**
+ * Displays an overlay element positioned relative to a trigger.
+ *
+ * See [popover usage guidelines](https://ui.cimpress.io/components/popover/).
+ */
+const _Popover = (0, forward_ref_js_1.forwardRef)(Popover, 'Popover');
+exports.Popover = _Popover;
+//# sourceMappingURL=popover.js.map

package/dist/commonjs/components/popover/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../../src/components/popover/popover.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;AAgCb,kCAEC;;AAhCD,gDAAwB;AACxB,iCAAqE;AACrE,iEAO+B;AAC/B,yDAAkD;AAClD,mGAA4F;AAE5F,qDAAmD;AAanD;;;GAGG;AACH,SAAgB,WAAW,CAAC,KAAuB;IACjD,OAAO,uBAAC,qCAAgB,OAAK,KAAK,GAAI,CAAC;AACzC,CAAC;AAED,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AAgCxC,SAAS,OAAO,CACd,EACE,QAAQ,EACR,KAAK,EACL,gBAAgB,EAChB,YAAY,EACZ,MAAM,EACN,WAAW,EACX,YAAY,EACZ,SAAS,EACT,UAAU,EACV,GAAG,KAAK,EACK,EACf,GAA8B;IAE9B,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,gFAAgF,CAAC,CAAC;QACjG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,OAAO,CACL,wBAAC,+BAAU,IACT,SAAS,EAAE,IAAA,cAAI,EAAC,aAAa,EAAE,gBAAgB,CAAC,EAChD,KAAK,EAAE,YAAY,EACnB,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,EAAE,EACpB,MAAM,EAAE,CAAC,EACT,mBAAmB,EAAE,CAAC,0CAGtB,uBAAC,oCAAe,IAAC,SAAS,EAAC,mBAAmB,YAC5C,gCAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,YAChF,iCAAM,CAAC,EAAC,mEAAmE,GAAG,GAC1E,GACU,EAClB,uBAAC,8BAAS,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,oBAAoB,YAC3D,CAAC,WAAW,EAAE,EAAE,CAAC,CAChB,6DACG,KAAK,IAAI,CACR,uBAAC,+BAAU,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,IAAA,cAAI,EAAC,mBAAmB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,YAC7F,KAAK,GACK,CACd,EACD,uBAAC,2CAAkB,IAAC,SAAS,EAAC,qBAAqB,EAAC,eAAe,EAAC,UAAU,YAC3E,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,QAAQ,GAC/C,IACpB,CACJ,GACS,IACD,CACd,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,QAAQ,GAAG,IAAA,2BAAU,EAAC,OAAO,EAAE,SAAS,CAAC,CAAC;AAE3B,2BAAO","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type ForwardedRef, useEffect, type ReactNode } from 'react';\nimport {\n  DialogTrigger as RACDialogTrigger,\n  Popover as RACPopover,\n  type PopoverProps as RACPopoverProps,\n  OverlayArrow as RACOverlayArrow,\n  Dialog as RACDialog,\n  Heading as RACHeading,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { FocusableContainer } from '../internal/focusable-container/focusable-container.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface PopoverRootProps {\n  /** The popover trigger with its associated popover. Provide the trigger as the first child, and the popover as the second child. */\n  children: ReactNode;\n  /** Whether the popover is open (controlled). */\n  isOpen?: boolean;\n  /** Whether the popover is open by default (uncontrolled). */\n  defaultOpen?: boolean;\n  /** Handler that is called when the popover's open state changes. */\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\n/**\n * Encapsulates a popover trigger and its associated popover.\n * The trigger can be any Cimpress UI button, and the popover will be displayed when the trigger is activated.\n */\nexport function PopoverRoot(props: PopoverRootProps) {\n  return <RACDialogTrigger {...props} />;\n}\n\nPopoverRoot.displayName = 'PopoverRoot';\n\nexport interface PopoverRenderProps {\n  /** Closes the popover when called. */\n  close: () => void;\n}\n\nexport interface PopoverProps\n  extends CommonProps,\n    AriaLabelingProps,\n    Pick<RACPopoverProps, 'placement' | 'triggerRef'> {\n  /** The contents of the popover. A function may be provided to access a function to close the popover. */\n  children: ReactNode | ((renderProps: PopoverRenderProps) => ReactNode);\n  /** The title of the popover. */\n  title?: string;\n  /**\n   * Whether the popover is open (controlled).\n   * If using `PopoverRoot`, this prop has no effect - provide `isOpen` to `PopoverRoot` instead.\n   */\n  isOpen?: boolean;\n  /**\n   * Whether the popover is open by default (uncontrolled).\n   * If using `PopoverRoot`, this prop has no effect - provide `defaultOpen` to `PopoverRoot` instead.\n   */\n  defaultOpen?: boolean;\n  /**\n   * Handler that is called when the popover's open state changes.\n   * If using `PopoverRoot`, this prop has no effect - provide `onOpenChange` to `PopoverRoot` instead.\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\nfunction Popover(\n  {\n    children,\n    title,\n    UNSAFE_className,\n    UNSAFE_style,\n    isOpen,\n    defaultOpen,\n    onOpenChange,\n    placement,\n    triggerRef,\n    ...props\n  }: PopoverProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useEffect(() => {\n    if (!title && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Popover requires one of title / aria-label / aria-labelledby for accessibility');\n    }\n  }, [title, ariaLabel, ariaLabelledBy]);\n\n  return (\n    <RACPopover\n      className={clsx('cim-popover', UNSAFE_className)}\n      style={UNSAFE_style}\n      isOpen={isOpen}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      triggerRef={triggerRef}\n      placement={placement}\n      containerPadding={16}\n      offset={5} // 1px border + 4px actual offset\n      arrowBoundaryOffset={4} // offset by border radius so that the arrow is never positioned over the rounded corner\n      data-cim-style-root\n    >\n      <RACOverlayArrow className=\"cim-popover-arrow\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"10\" viewBox=\"0 0 16 10\">\n          <path d=\"M16 0L8.7809 9.0239C8.3805 9.5243 7.6195 9.5243 7.2191 9.0239L0 0\" />\n        </svg>\n      </RACOverlayArrow>\n      <RACDialog {...props} ref={ref} className=\"cim-popover-dialog\">\n        {(renderProps) => (\n          <>\n            {title && (\n              <RACHeading slot=\"title\" className={clsx('cim-popover-title', textStyle({ variant: 'title-5' }))}>\n                {title}\n              </RACHeading>\n            )}\n            <FocusableContainer className=\"cim-popover-content\" scrollDirection=\"vertical\">\n              {typeof children === 'function' ? children(renderProps) : children}\n            </FocusableContainer>\n          </>\n        )}\n      </RACDialog>\n    </RACPopover>\n  );\n}\n\n/**\n * Displays an overlay element positioned relative to a trigger.\n *\n * See [popover usage guidelines](https://ui.cimpress.io/components/popover/).\n */\nconst _Popover = forwardRef(Popover, 'Popover');\n\nexport { _Popover as Popover };\n"]}

package/dist/commonjs/components/radio/radio.d.ts

@@ -1,6 +1,6 @@
 import { type RadioProps as RACRadioProps } from 'react-aria-components';
-import type { CommonProps, LabellableProps, StringLikeChildren } from '../types.js';
-export interface RadioProps extends CommonProps, Omit<LabellableProps, 'label'>, Pick<RACRadioProps, 'value' | 'isDisabled' | 'autoFocus'> {
+import type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';
+export interface RadioProps extends CommonProps, AriaLabelingProps, Pick<RACRadioProps, 'value' | 'isDisabled' | 'autoFocus'> {
     /** The label rendered next to the radio. */
     children?: StringLikeChildren;
 }

package/dist/commonjs/components/radio/radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../../src/components/radio/radio.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAqB,KAAK,UAAU,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAG5F,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGpF,MAAM,WAAW,UACf,SAAQ,WAAW,EACjB,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,EAC9B,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,YAAY,GAAG,WAAW,CAAC;IAC3D,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,kBAAkB,CAAC;CAC/B;AA8BD;;;;GAIG;AACH,QAAA,MAAM,MAAM,8JAA6C,CAAC;AAE1D,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC"}
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../../src/components/radio/radio.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAqB,KAAK,UAAU,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAG5F,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGtF,MAAM,WAAW,UACf,SAAQ,WAAW,EACjB,iBAAiB,EACjB,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,YAAY,GAAG,WAAW,CAAC;IAC3D,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,kBAAkB,CAAC;CAC/B;AA8BD;;;;GAIG;AACH,QAAA,MAAM,MAAM,8JAA6C,CAAC;AAE1D,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC"}

package/dist/commonjs/components/radio/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../../src/components/radio/radio.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AACxB,iCAAqD;AACrD,iEAA4F;AAC5F,yDAAkD;AAClD,mEAA2D;AAE3D,mDAA6C;AAU7C,SAAS,KAAK,CACZ,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAc,EAClE,GAAmC;IAEnC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC/C,OAAO,CAAC,IAAI,CAAC,iFAAiF,CAAC,CAAC;QAClG,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,wBAAC,6BAAQ,OAAK,KAAK,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,WAAW,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,aAChG,gCAAK,SAAS,EAAC,0BAA0B,YACvC,gCAAK,SAAS,EAAC,kBAAkB,YAC/B,gCAAK,SAAS,EAAC,wBAAwB,GAAG,GACtC,GACF,EACL,QAAQ,IAAI,CACX,uBAAC,cAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,MAAM,YAC3B,QAAQ,GACJ,CACR,IACQ,CACZ,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,MAAM,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;AAEvC,uBAAK","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useEffect, type ForwardedRef } from 'react';\nimport { Radio as RACRadio, type RadioProps as RACRadioProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps, LabellableProps, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface RadioProps\n  extends CommonProps,\n    Omit<LabellableProps, 'label'>,\n    Pick<RACRadioProps, 'value' | 'isDisabled' | 'autoFocus'> {\n  /** The label rendered next to the radio. */\n  children?: StringLikeChildren;\n}\n\nfunction Radio(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: RadioProps,\n  ref: ForwardedRef<HTMLLabelElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useEffect(() => {\n    if (!children && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Radio requires one of children / aria-label / aria-labelledby for accessibility');\n    }\n  }, [children, ariaLabel, ariaLabelledBy]);\n\n  return (\n    <RACRadio {...props} className={clsx('cim-radio', UNSAFE_className)} style={UNSAFE_style} ref={ref}>\n      <div className=\"cim-radio-toggle-wrapper\">\n        <div className=\"cim-radio-toggle\">\n          <div className=\"cim-radio-toggle-inner\" />\n        </div>\n      </div>\n      {children && (\n        <Text as=\"span\" variant=\"body\">\n          {children}\n        </Text>\n      )}\n    </RACRadio>\n  );\n}\n\n/**\n * Renders a single option within `RadioGroup`.\n *\n * See [radio group usage guidelines](https://ui.cimpress.io/components/radio-group/).\n */\nconst _Radio = withStyleProps(forwardRef(Radio), 'Radio');\n\nexport { _Radio as Radio };\n"]}
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../../src/components/radio/radio.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AACxB,iCAAqD;AACrD,iEAA4F;AAC5F,yDAAkD;AAClD,mEAA2D;AAE3D,mDAA6C;AAU7C,SAAS,KAAK,CACZ,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAc,EAClE,GAAmC;IAEnC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC/C,OAAO,CAAC,IAAI,CAAC,iFAAiF,CAAC,CAAC;QAClG,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,wBAAC,6BAAQ,OAAK,KAAK,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,WAAW,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,aAChG,gCAAK,SAAS,EAAC,0BAA0B,YACvC,gCAAK,SAAS,EAAC,kBAAkB,YAC/B,gCAAK,SAAS,EAAC,wBAAwB,GAAG,GACtC,GACF,EACL,QAAQ,IAAI,CACX,uBAAC,cAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,MAAM,YAC3B,QAAQ,GACJ,CACR,IACQ,CACZ,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,MAAM,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;AAEvC,uBAAK","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useEffect, type ForwardedRef } from 'react';\nimport { Radio as RACRadio, type RadioProps as RACRadioProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface RadioProps\n  extends CommonProps,\n    AriaLabelingProps,\n    Pick<RACRadioProps, 'value' | 'isDisabled' | 'autoFocus'> {\n  /** The label rendered next to the radio. */\n  children?: StringLikeChildren;\n}\n\nfunction Radio(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: RadioProps,\n  ref: ForwardedRef<HTMLLabelElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useEffect(() => {\n    if (!children && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Radio requires one of children / aria-label / aria-labelledby for accessibility');\n    }\n  }, [children, ariaLabel, ariaLabelledBy]);\n\n  return (\n    <RACRadio {...props} className={clsx('cim-radio', UNSAFE_className)} style={UNSAFE_style} ref={ref}>\n      <div className=\"cim-radio-toggle-wrapper\">\n        <div className=\"cim-radio-toggle\">\n          <div className=\"cim-radio-toggle-inner\" />\n        </div>\n      </div>\n      {children && (\n        <Text as=\"span\" variant=\"body\">\n          {children}\n        </Text>\n      )}\n    </RACRadio>\n  );\n}\n\n/**\n * Renders a single option within `RadioGroup`.\n *\n * See [radio group usage guidelines](https://ui.cimpress.io/components/radio-group/).\n */\nconst _Radio = withStyleProps(forwardRef(Radio), 'Radio');\n\nexport { _Radio as Radio };\n"]}

package/dist/commonjs/components/select/select.js

@@ -27,7 +27,7 @@ function Select({ children, items, label, description, error, UNSAFE_className,
     if (items != null && typeof children !== 'function') {
         console.warn('`Select` requires `children` to be a function when using `items` prop');
     }
-    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Select, { ...props, ref: ref, className: (0, clsx_1.default)('cim-select', UNSAFE_className), style: UNSAFE_style, children: [(0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { className: "cim-select-button", children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.SelectValue, { className: (values) => (0, clsx_1.default)(values.defaultClassName, (0, utils_js_1.textStyle)({ variant: 'medium', alignment: 'start' })), children: ({ selectedText }) => selectedText }), (0, jsx_runtime_1.jsx)(index_js_1.IconChevronDownFill, {})] }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: error }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description }), (0, jsx_runtime_1.jsx)(collapsible_list_js_1.CollapsibleList, { offset: 5, maxHeight: 315, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.ListBox, { className: "cim-select-listbox", onScroll: onScroll, items: items, children: children }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Select, { ...props, ref: ref, className: (0, clsx_1.default)('cim-select', UNSAFE_className), style: UNSAFE_style, children: [(0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { className: "cim-select-button", children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.SelectValue, { className: (values) => (0, clsx_1.default)(values.defaultClassName, (0, utils_js_1.textStyle)({ variant: 'medium', alignment: 'start' })), children: ({ selectedText }) => selectedText }), (0, jsx_runtime_1.jsx)(index_js_1.IconChevronDown, {})] }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: error }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description }), (0, jsx_runtime_1.jsx)(collapsible_list_js_1.CollapsibleList, { offset: 5, maxHeight: 315, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.ListBox, { className: "cim-select-listbox", onScroll: onScroll, items: items, children: children }) })] }));
 }
 /**
  * Allows users to select one item from a collapsible list.
@@ -39,7 +39,7 @@ exports.Select = _Select;
 /** Renders a single list item within `Select`. */
 function SelectItem({ children, ...props }) {
     const textValue = typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');
-    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.ListBoxItem, { ...props, className: "cim-select-item", textValue: textValue, children: ({ isDisabled }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_js_1.IconCheckmark, {}), (0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { slot: "label", className: (0, utils_js_1.textStyle)({ variant: 'body', tone: isDisabled ? 'muted' : 'base' }), children: children })] })) }));
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.ListBoxItem, { ...props, className: "cim-select-item", textValue: textValue, children: ({ isDisabled }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_js_1.IconCheck, {}), (0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { slot: "label", className: (0, utils_js_1.textStyle)({ variant: 'body', tone: isDisabled ? 'muted' : 'base' }), children: children })] })) }));
 }
 SelectItem.displayName = 'SelectItem';
 /** Groups list items within `Select` into a section. */

package/dist/commonjs/components/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useEffect, type ForwardedRef } from 'react';\nimport {\n  Button as RACButton,\n  Collection as RACCollection,\n  Header as RACHeader,\n  ListBox as RACListBox,\n  type ListBoxProps as RACListBoxProps,\n  ListBoxItem as RACListBoxItem,\n  ListBoxSection as RACListBoxSection,\n  Select as RACSelect,\n  SelectValue as RACSelectValue,\n  Text as RACText,\n  type ListBoxItemProps as RACListBoxItemProps,\n  type SelectProps as RACSelectProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheckmark, IconChevronDownFill } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CollectionItem, CollectionProps, CommonProps, FieldProps, Key, StringLikeChildren } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface SelectProps<T extends CollectionItem = CollectionItem>\n  extends CommonProps,\n    FieldProps<Key>,\n    CollectionProps<T>,\n    Pick<\n      RACSelectProps<T>,\n      | 'name'\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'selectedKey'\n      | 'defaultSelectedKey'\n      | 'autoComplete'\n      | 'autoFocus'\n      | 'onSelectionChange'\n      | 'placeholder'\n      | 'onFocus'\n      | 'onBlur'\n      | 'onOpenChange'\n    >,\n    Pick<RACListBoxProps<T>, 'onScroll'> {}\n\nfunction Select<T extends CollectionItem>(\n  { children, items, label, description, error, UNSAFE_className, UNSAFE_style, onScroll, ...props }: SelectProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useEffect(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Select requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  if (items != null && typeof children !== 'function') {\n    console.warn('`Select` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACSelect {...props} ref={ref} className={clsx('cim-select', UNSAFE_className)} style={UNSAFE_style}>\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACButton className=\"cim-select-button\">\n        <RACSelectValue\n          className={(values) => clsx(values.defaultClassName, textStyle({ variant: 'medium', alignment: 'start' }))}\n        >\n          {({ selectedText }) => selectedText}\n        </RACSelectValue>\n        <IconChevronDownFill />\n      </RACButton>\n      <FormFieldError>{error}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n      <CollapsibleList\n        offset={5} // 1px border + 4px actual offset\n        maxHeight={315}\n      >\n        <RACListBox className=\"cim-select-listbox\" onScroll={onScroll} items={items}>\n          {children}\n        </RACListBox>\n      </CollapsibleList>\n    </RACSelect>\n  );\n}\n\n/**\n * Allows users to select one item from a collapsible list.\n *\n * See [select usage guidelines](https://ui.cimpress.io/components/select/).\n */\nconst _Select = withStyleProps(forwardRef(Select), 'Select');\n\nexport { _Select as Select };\n\nexport interface SelectItemProps\n  extends Pick<RACListBoxItemProps, 'id' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n  children: StringLikeChildren;\n}\n\n/** Renders a single list item within `Select`. */\nexport function SelectItem({ children, ...props }: SelectItemProps) {\n  const textValue =\n    typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n  return (\n    <RACListBoxItem {...props} className=\"cim-select-item\" textValue={textValue}>\n      {({ isDisabled }) => (\n        <>\n          <IconCheckmark />\n\n          <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n            {children}\n          </RACText>\n        </>\n      )}\n    </RACListBoxItem>\n  );\n}\n\nSelectItem.displayName = 'SelectItem';\n\nexport interface SelectSectionProps<T extends CollectionItem> extends CollectionProps<T> {\n  /** The ID of the section. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the section title. */\n  title: string;\n}\n\n/** Groups list items within `Select` into a section. */\nexport function SelectSection<T extends CollectionItem>({ title, children, items, ...props }: SelectSectionProps<T>) {\n  if (items != null && typeof children !== 'function') {\n    console.warn('`SelectSection` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACListBoxSection {...props} className=\"cim-select-section\">\n      <RACHeader\n        className={clsx('cim-select-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n      >\n        {title}\n      </RACHeader>\n      <RACCollection items={items}>{children}</RACCollection>\n    </RACListBoxSection>\n  );\n}\n\nSelectSection.displayName = 'SelectSection';\n"]}
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;AA0Gb,gCAiBC;AAYD,sCAeC;;AApJD,gDAAwB;AACxB,iCAAqD;AACrD,iEAa+B;AAC/B,yDAAkD;AAClD,mDAAkE;AAClE,mEAA2D;AAC3D,0FAAmF;AACnF,wEAA4G;AAE5G,qDAAmD;AAwBnD,SAAS,MAAM,CACb,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,gBAAgB,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAkB,EAClH,GAAiC;IAEjC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,+EAA+E,CAAC,CAAC;QAChG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,IAAI,KAAK,IAAI,IAAI,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;QACpD,OAAO,CAAC,IAAI,CAAC,uEAAuE,CAAC,CAAC;IACxF,CAAC;IAED,OAAO,CACL,wBAAC,8BAAS,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,YAAY,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aAClG,uBAAC,8BAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,YACvE,KAAK,GACS,EACjB,wBAAC,8BAAS,IAAC,SAAS,EAAC,mBAAmB,aACtC,uBAAC,mCAAc,IACb,SAAS,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,IAAA,cAAI,EAAC,MAAM,CAAC,gBAAgB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAAC,YAEzG,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,GACpB,EACjB,uBAAC,0BAAe,KAAG,IACT,EACZ,uBAAC,8BAAc,cAAE,KAAK,GAAkB,EACxC,uBAAC,oCAAoB,cAAE,WAAW,GAAwB,EAC1D,uBAAC,qCAAe,IACd,MAAM,EAAE,CAAC,EACT,SAAS,EAAE,GAAG,YAEd,uBAAC,+BAAU,IAAC,SAAS,EAAC,oBAAoB,EAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,YACxE,QAAQ,GACE,GACG,IACR,CACb,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,OAAO,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,MAAM,CAAC,EAAE,QAAQ,CAAC,CAAC;AAEzC,yBAAM;AAO1B,kDAAkD;AAClD,SAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAmB;IAChE,MAAM,SAAS,GACb,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAEhH,OAAO,CACL,uBAAC,mCAAc,OAAK,KAAK,EAAE,SAAS,EAAC,iBAAiB,EAAC,SAAS,EAAE,SAAS,YACxE,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CACnB,6DACE,uBAAC,oBAAS,KAAG,EAEb,uBAAC,4BAAO,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,YACjG,QAAQ,GACD,IACT,CACJ,GACc,CAClB,CAAC;AACJ,CAAC;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAStC,wDAAwD;AACxD,SAAgB,aAAa,CAA2B,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAyB;IACjH,IAAI,KAAK,IAAI,IAAI,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;QACpD,OAAO,CAAC,IAAI,CAAC,8EAA8E,CAAC,CAAC;IAC/F,CAAC;IAED,OAAO,CACL,wBAAC,sCAAiB,OAAK,KAAK,EAAE,SAAS,EAAC,oBAAoB,aAC1D,uBAAC,8BAAS,IACR,SAAS,EAAE,IAAA,cAAI,EAAC,2BAA2B,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,YAErG,KAAK,GACI,EACZ,uBAAC,kCAAa,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAiB,IACrC,CACrB,CAAC;AACJ,CAAC;AAED,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useEffect, type ForwardedRef } from 'react';\nimport {\n  Button as RACButton,\n  Collection as RACCollection,\n  Header as RACHeader,\n  ListBox as RACListBox,\n  type ListBoxProps as RACListBoxProps,\n  ListBoxItem as RACListBoxItem,\n  ListBoxSection as RACListBoxSection,\n  Select as RACSelect,\n  SelectValue as RACSelectValue,\n  Text as RACText,\n  type ListBoxItemProps as RACListBoxItemProps,\n  type SelectProps as RACSelectProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheck, IconChevronDown } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CollectionItem, CollectionProps, CommonProps, FieldProps, Key, StringLikeChildren } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface SelectProps<T extends CollectionItem = CollectionItem>\n  extends CommonProps,\n    FieldProps<Key>,\n    CollectionProps<T>,\n    Pick<\n      RACSelectProps<T>,\n      | 'name'\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'selectedKey'\n      | 'defaultSelectedKey'\n      | 'autoComplete'\n      | 'autoFocus'\n      | 'onSelectionChange'\n      | 'placeholder'\n      | 'onFocus'\n      | 'onBlur'\n      | 'onOpenChange'\n    >,\n    Pick<RACListBoxProps<T>, 'onScroll'> {}\n\nfunction Select<T extends CollectionItem>(\n  { children, items, label, description, error, UNSAFE_className, UNSAFE_style, onScroll, ...props }: SelectProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useEffect(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('Select requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  if (items != null && typeof children !== 'function') {\n    console.warn('`Select` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACSelect {...props} ref={ref} className={clsx('cim-select', UNSAFE_className)} style={UNSAFE_style}>\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACButton className=\"cim-select-button\">\n        <RACSelectValue\n          className={(values) => clsx(values.defaultClassName, textStyle({ variant: 'medium', alignment: 'start' }))}\n        >\n          {({ selectedText }) => selectedText}\n        </RACSelectValue>\n        <IconChevronDown />\n      </RACButton>\n      <FormFieldError>{error}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n      <CollapsibleList\n        offset={5} // 1px border + 4px actual offset\n        maxHeight={315}\n      >\n        <RACListBox className=\"cim-select-listbox\" onScroll={onScroll} items={items}>\n          {children}\n        </RACListBox>\n      </CollapsibleList>\n    </RACSelect>\n  );\n}\n\n/**\n * Allows users to select one item from a collapsible list.\n *\n * See [select usage guidelines](https://ui.cimpress.io/components/select/).\n */\nconst _Select = withStyleProps(forwardRef(Select), 'Select');\n\nexport { _Select as Select };\n\nexport interface SelectItemProps\n  extends Pick<RACListBoxItemProps, 'id' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n  children: StringLikeChildren;\n}\n\n/** Renders a single list item within `Select`. */\nexport function SelectItem({ children, ...props }: SelectItemProps) {\n  const textValue =\n    typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n  return (\n    <RACListBoxItem {...props} className=\"cim-select-item\" textValue={textValue}>\n      {({ isDisabled }) => (\n        <>\n          <IconCheck />\n\n          <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n            {children}\n          </RACText>\n        </>\n      )}\n    </RACListBoxItem>\n  );\n}\n\nSelectItem.displayName = 'SelectItem';\n\nexport interface SelectSectionProps<T extends CollectionItem> extends CollectionProps<T> {\n  /** The ID of the section. Has to be unique across all sections and items. */\n  id?: Key;\n  /** The content to display as the section title. */\n  title: string;\n}\n\n/** Groups list items within `Select` into a section. */\nexport function SelectSection<T extends CollectionItem>({ title, children, items, ...props }: SelectSectionProps<T>) {\n  if (items != null && typeof children !== 'function') {\n    console.warn('`SelectSection` requires `children` to be a function when using `items` prop');\n  }\n\n  return (\n    <RACListBoxSection {...props} className=\"cim-select-section\">\n      <RACHeader\n        className={clsx('cim-select-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n      >\n        {title}\n      </RACHeader>\n      <RACCollection items={items}>{children}</RACCollection>\n    </RACListBoxSection>\n  );\n}\n\nSelectSection.displayName = 'SelectSection';\n"]}

package/dist/commonjs/components/table/contexts/column-collection.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode, type RefObject } from 'react';
+interface ColumnData {
+    number?: number;
+    width?: string | number;
+    contentAlignment: ColumnContentAlignment;
+}
+/** Represents the direction of content alignment within a table column. */
+export type ColumnContentAlignment = 'start' | 'center' | 'end';
+export declare function ColumnCollectionProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+type ColumnRegistrator = (key: string, data: ColumnData) => () => void;
+export declare function useColumnRegistration(): ColumnRegistrator;
+export declare function useColumnData(key: string): Readonly<ColumnData> | undefined;
+export interface UseEmptyStateCell {
+    columnKey: string;
+    colSpan: number;
+}
+export declare function useEmptyStateCell(ref: RefObject<HTMLTableCellElement | null>): UseEmptyStateCell;
+export {};
+//# sourceMappingURL=column-collection.d.ts.map

package/dist/commonjs/components/table/contexts/column-collection.d.ts.map

@@ -0,0 +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,CAqBzD;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/commonjs/components/table/contexts/column-collection.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnCollectionProvider = ColumnCollectionProvider;
+exports.useColumnRegistration = useColumnRegistration;
+exports.useColumnData = useColumnData;
+exports.useEmptyStateCell = useEmptyStateCell;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const use_server_effect_event_js_1 = require("../../../utils/use-server-effect-event.js");
+const ColumnCollectionContext = (0, react_1.createContext)(null);
+const EMPTY_OBJECT = {};
+function ColumnCollectionProvider({ children }) {
+    // When column collection is updated, we want to trigger a re-render,
+    // but we also want immediate access to the updated collection during SSR.
+    // Hence why it is stored as both a ref and a state.
+    const columnsRef = (0, react_1.useRef)(EMPTY_OBJECT);
+    const [_columns, _setColumns] = (0, react_1.useState)(EMPTY_OBJECT);
+    const collection = (0, react_1.useMemo)(() => ({
+        get columns() {
+            return columnsRef.current;
+        },
+        setColumns: (columns) => {
+            columnsRef.current = columns;
+            _setColumns(columns);
+        },
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [_columns]);
+    return (0, jsx_runtime_1.jsx)(ColumnCollectionContext.Provider, { value: collection, children: children });
+}
+// eslint-disable-next-line react-refresh/only-export-components
+function useColumnRegistration() {
+    const columnCollection = (0, react_1.useContext)(ColumnCollectionContext);
+    if (!columnCollection) {
+        throw new Error('Cannot use column registration outside of a table');
+    }
+    return (0, use_server_effect_event_js_1.useServerEffectEvent)((key, data) => {
+        columnCollection.setColumns({
+            ...columnCollection.columns,
+            [key]: data,
+        });
+        return () => {
+            const { columns } = columnCollection;
+            if (columns[key] === data) {
+                delete columns[key];
+                columnCollection.setColumns({ ...columns });
+            }
+        };
+    });
+}
+// eslint-disable-next-line react-refresh/only-export-components
+function useColumnData(key) {
+    const columnCollection = (0, react_1.useContext)(ColumnCollectionContext);
+    if (!columnCollection) {
+        throw new Error('Cannot use column data outside of a table');
+    }
+    return columnCollection.columns[key];
+}
+// eslint-disable-next-line react-refresh/only-export-components
+function useEmptyStateCell(ref) {
+    const columnCollection = (0, react_1.useContext)(ColumnCollectionContext);
+    if (!columnCollection) {
+        throw new Error('Cannot use empty state cell outside of a table');
+    }
+    // Empty state cell should have the same column key as the first column in the table, so find it
+    const parentTableElement = ref.current?.closest('table');
+    const firstColumn = parentTableElement?.querySelector('[data-cell-row-key][data-cell-column-key]');
+    return {
+        columnKey: firstColumn?.dataset.cellColumnKey ?? '???',
+        colSpan: Object.keys(columnCollection.columns).length,
+    };
+}
+//# sourceMappingURL=column-collection.js.map

package/dist/commonjs/components/table/contexts/column-collection.js.map

@@ -0,0 +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        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/commonjs/components/table/contexts/row-state.d.ts

@@ -1,10 +1,14 @@
 import { type ReactNode } from 'react';
 export interface TableRowState {
     rowKey: string;
+    isSelected?: boolean;
+    onSelectionToggle?: (value?: boolean) => void;
 }
-export declare function TableRowStateProvider({ children, rowKey }: {
+export declare function TableRowStateProvider({ children, rowKey, isSelected, onSelectionToggle, }: {
     children: ReactNode;
     rowKey: string;
+    isSelected?: boolean;
+    onSelectionToggle?: (value?: boolean) => void;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function useTableRowState(): TableRowState;
 //# sourceMappingURL=row-state.d.ts.map

package/dist/commonjs/components/table/contexts/row-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"row-state.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/contexts/row-state.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAE3E,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,CAAC;CAChB;AAID,wBAAgB,qBAAqB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,2CASlG;AAGD,wBAAgB,gBAAgB,IAAI,aAAa,CAOhD"}
+{"version":3,"file":"row-state.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/contexts/row-state.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAE3E,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAC/C;AAID,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,MAAM,EACN,UAAU,EACV,iBAAiB,GAClB,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAC/C,2CAaA;AAGD,wBAAgB,gBAAgB,IAAI,aAAa,CAOhD"}

package/dist/commonjs/components/table/contexts/row-state.js

@@ -3,12 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableRowStateProvider = TableRowStateProvider;
 exports.useTableRowState = useTableRowState;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("@react-aria/utils");
 const react_1 = require("react");
 const TableRowStateContext = (0, react_1.createContext)(null);
-function TableRowStateProvider({ children, rowKey }) {
+function TableRowStateProvider({ children, rowKey, isSelected, onSelectionToggle, }) {
+    const onSelectionToggleMemoized = (0, utils_1.useEffectEvent)(onSelectionToggle);
     const tableRowState = (0, react_1.useMemo)(() => ({
         rowKey,
-    }), [rowKey]);
+        isSelected,
+        onSelectionToggle: onSelectionToggleMemoized,
+    }), [rowKey, isSelected, onSelectionToggleMemoized]);
     return (0, jsx_runtime_1.jsx)(TableRowStateContext.Provider, { value: tableRowState, children: children });
 }
 // eslint-disable-next-line react-refresh/only-export-components

package/dist/commonjs/components/table/contexts/row-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"row-state.js","sourceRoot":"","sources":["../../../../../src/components/table/contexts/row-state.tsx"],"names":[],"mappings":";;AAQA,sDASC;AAGD,4CAOC;;AA3BD,iCAA2E;AAM3E,MAAM,oBAAoB,GAAG,IAAA,qBAAa,EAAuB,IAAI,CAAC,CAAC;AAEvE,SAAgB,qBAAqB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAA2C;IACjG,MAAM,aAAa,GAAkB,IAAA,eAAO,EAC1C,GAAG,EAAE,CAAC,CAAC;QACL,MAAM;KACP,CAAC,EACF,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,OAAO,uBAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,aAAa,YAAG,QAAQ,GAAiC,CAAC;AACzG,CAAC;AAED,gEAAgE;AAChE,SAAgB,gBAAgB;IAC9B,MAAM,aAAa,GAAG,IAAA,kBAAU,EAAC,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 { createContext, type ReactNode, useContext, useMemo } from 'react';\n\nexport interface TableRowState {\n  rowKey: string;\n}\n\nconst TableRowStateContext = createContext<TableRowState | null>(null);\n\nexport function TableRowStateProvider({ children, rowKey }: { children: ReactNode; rowKey: string }) {\n  const tableRowState: TableRowState = useMemo(\n    () => ({\n      rowKey,\n    }),\n    [rowKey],\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"]}
+{"version":3,"file":"row-state.js","sourceRoot":"","sources":["../../../../../src/components/table/contexts/row-state.tsx"],"names":[],"mappings":";;AAWA,sDAuBC;AAGD,4CAOC;;AA5CD,6CAAmD;AACnD,iCAA2E;AAQ3E,MAAM,oBAAoB,GAAG,IAAA,qBAAa,EAAuB,IAAI,CAAC,CAAC;AAEvE,SAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,MAAM,EACN,UAAU,EACV,iBAAiB,GAMlB;IACC,MAAM,yBAAyB,GAAG,IAAA,sBAAc,EAAC,iBAAiB,CAAC,CAAC;IAEpE,MAAM,aAAa,GAAkB,IAAA,eAAO,EAC1C,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,uBAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,aAAa,YAAG,QAAQ,GAAiC,CAAC;AACzG,CAAC;AAED,gEAAgE;AAChE,SAAgB,gBAAgB;IAC9B,MAAM,aAAa,GAAG,IAAA,kBAAU,EAAC,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"]}

package/dist/commonjs/components/table/contexts/table-state.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from 'react';
+/** Represents the type of row selection allowed within a table. */
+export type RowSelectionMode = 'single' | 'multiple' | 'none';
+export interface TableState {
+    rowSelectionMode: RowSelectionMode;
+    areAllRowsSelected?: boolean;
+    areSomeRowsSelected?: boolean;
+    onAllRowsSelectionToggle?: (value?: boolean) => void;
+    /** The selection state that will be applied to the next focused row. */
+    pendingRowSelectionState?: boolean;
+    setPendingRowSelectionState: (value: boolean | undefined) => void;
+}
+export declare function TableStateProvider({ children, rowSelectionMode, areAllRowsSelected, areSomeRowsSelected, onAllRowsSelectionToggle, }: {
+    children: ReactNode;
+    rowSelectionMode: RowSelectionMode;
+    areAllRowsSelected?: boolean;
+    areSomeRowsSelected?: boolean;
+    onAllRowsSelectionToggle?: (value?: boolean) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useTableState(): TableState;
+//# sourceMappingURL=table-state.d.ts.map

package/dist/commonjs/components/table/contexts/table-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-state.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/contexts/table-state.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,KAAK,SAAS,EAAyC,MAAM,OAAO,CAAC;AAE7F,mEAAmE;AACnE,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AAE9D,MAAM,WAAW,UAAU;IACzB,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,wBAAwB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACrD,wEAAwE;IACxE,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,2BAA2B,EAAE,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,KAAK,IAAI,CAAC;CACnE;AAID,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,gBAAgB,EAChB,kBAAkB,EAClB,mBAAmB,EACnB,wBAAwB,GACzB,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,wBAAwB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CACtD,2CAkCA;AAGD,wBAAgB,aAAa,IAAI,UAAU,CAO1C"}

package/dist/commonjs/components/table/contexts/table-state.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableStateProvider = TableStateProvider;
+exports.useTableState = useTableState;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("@react-aria/utils");
+const react_1 = require("react");
+const TableStateContext = (0, react_1.createContext)(null);
+function TableStateProvider({ children, rowSelectionMode, areAllRowsSelected, areSomeRowsSelected, onAllRowsSelectionToggle, }) {
+    // When the pending selection state is updated, we want to trigger a re-render,
+    // but we also want immediate access to the new value.
+    // Hence why it is stored as both a ref and a state.
+    const pendingRowSelectionStateRef = (0, react_1.useRef)(undefined);
+    const [_pendingRowSelectionState, _setPendingRowSelectionState] = (0, react_1.useState)(undefined);
+    const onAllRowsSelectionToggleMemoized = (0, utils_1.useEffectEvent)(onAllRowsSelectionToggle);
+    const tableState = (0, react_1.useMemo)(() => ({
+        rowSelectionMode,
+        areAllRowsSelected,
+        areSomeRowsSelected,
+        onAllRowsSelectionToggle: onAllRowsSelectionToggleMemoized,
+        get pendingRowSelectionState() {
+            return pendingRowSelectionStateRef.current;
+        },
+        setPendingRowSelectionState(pendingRowSelectionState) {
+            pendingRowSelectionStateRef.current = pendingRowSelectionState;
+            _setPendingRowSelectionState(pendingRowSelectionState);
+        },
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        rowSelectionMode,
+        areAllRowsSelected,
+        areSomeRowsSelected,
+        onAllRowsSelectionToggleMemoized,
+        _pendingRowSelectionState,
+    ]);
+    return (0, jsx_runtime_1.jsx)(TableStateContext.Provider, { value: tableState, children: children });
+}
+// eslint-disable-next-line react-refresh/only-export-components
+function useTableState() {
+    const tableState = (0, react_1.useContext)(TableStateContext);
+    if (!tableState) {
+        throw new Error('Cannot use table state outside of a table');
+    }
+    return tableState;
+}
+//# sourceMappingURL=table-state.js.map

package/dist/commonjs/components/table/contexts/table-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-state.js","sourceRoot":"","sources":["../../../../../src/components/table/contexts/table-state.tsx"],"names":[],"mappings":";;AAkBA,gDA8CC;AAGD,sCAOC;;AA1ED,6CAAmD;AACnD,iCAA6F;AAe7F,MAAM,iBAAiB,GAAG,IAAA,qBAAa,EAAoB,IAAI,CAAC,CAAC;AAEjE,SAAgB,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,IAAA,cAAM,EAAsB,SAAS,CAAC,CAAC;IAC3E,MAAM,CAAC,yBAAyB,EAAE,4BAA4B,CAAC,GAAG,IAAA,gBAAQ,EAAsB,SAAS,CAAC,CAAC;IAE3G,MAAM,gCAAgC,GAAG,IAAA,sBAAc,EAAC,wBAAwB,CAAC,CAAC;IAElF,MAAM,UAAU,GAAe,IAAA,eAAO,EACpC,GAAG,EAAE,CAAC,CAAC;QACL,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,gBAAgB;QAChB,kBAAkB;QAClB,mBAAmB;QACnB,gCAAgC;QAChC,yBAAyB;KAC1B,CACF,CAAC;IAEF,OAAO,uBAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,YAAG,QAAQ,GAA8B,CAAC;AAChG,CAAC;AAED,gEAAgE;AAChE,SAAgB,aAAa;IAC3B,MAAM,UAAU,GAAG,IAAA,kBAAU,EAAC,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 } from '@react-aria/utils';\nimport { createContext, type ReactNode, useContext, useMemo, useRef, useState } from 'react';\n\n/** Represents the type of row selection allowed within a table. */\nexport type RowSelectionMode = 'single' | 'multiple' | 'none';\n\nexport interface TableState {\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 onAllRowsSelectionToggleMemoized = useEffectEvent(onAllRowsSelectionToggle);\n\n  const tableState: TableState = useMemo(\n    () => ({\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      rowSelectionMode,\n      areAllRowsSelected,\n      areSomeRowsSelected,\n      onAllRowsSelectionToggleMemoized,\n      _pendingRowSelectionState,\n    ],\n  );\n\n  return <TableStateContext.Provider value={tableState}>{children}</TableStateContext.Provider>;\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/commonjs/components/table/hooks/use-selectable-row.d.ts

@@ -0,0 +1,6 @@
+import type { NativeElementProps } from '../../types.js';
+export interface UseSelectableRow {
+    rowProps: NativeElementProps<HTMLTableRowElement>;
+}
+export declare function useSelectableRow(): UseSelectableRow;
+//# sourceMappingURL=use-selectable-row.d.ts.map

package/dist/commonjs/components/table/hooks/use-selectable-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-selectable-row.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-selectable-row.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAIzD,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;CACnD;AAED,wBAAgB,gBAAgB,IAAI,gBAAgB,CAoCnD"}

package/dist/commonjs/components/table/hooks/use-selectable-row.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSelectableRow = useSelectableRow;
+const row_state_js_1 = require("../contexts/row-state.js");
+const table_state_js_1 = require("../contexts/table-state.js");
+function useSelectableRow() {
+    const { rowSelectionMode, setPendingRowSelectionState } = (0, table_state_js_1.useTableState)();
+    const { isSelected, onSelectionToggle } = (0, row_state_js_1.useTableRowState)();
+    // Handles row selection using a keyboard.
+    const onKeyDownCapture = (e) => {
+        // Ignore keyboard events bubbling through portals
+        if (!e.currentTarget.contains(e.target)) {
+            return;
+        }
+        if (e.key === ' ' && e.shiftKey) {
+            // Toggle selection of current row
+            onSelectionToggle?.();
+        }
+        else if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && e.shiftKey && rowSelectionMode === 'multiple') {
+            // Extend selection up/down by one row
+            // We're not going to stop propagation so that the arrow navigation handler runs as usual,
+            // and we'll set a special state variable so that the selection state gets updated when the new row receives focus.
+            setPendingRowSelectionState(isSelected);
+            return;
+        }
+        else {
+            // if we didn't handle anything, return early so we don't stop propagation and preventDefault
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+    };
+    const rowProps = {
+        onKeyDownCapture: rowSelectionMode !== 'none' ? onKeyDownCapture : undefined,
+    };
+    return {
+        rowProps,
+    };
+}
+//# sourceMappingURL=use-selectable-row.js.map

package/dist/commonjs/components/table/hooks/use-selectable-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-selectable-row.js","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-selectable-row.ts"],"names":[],"mappings":";;AASA,4CAoCC;AA3CD,2DAA4D;AAC5D,+DAA2D;AAM3D,SAAgB,gBAAgB;IAC9B,MAAM,EAAE,gBAAgB,EAAE,2BAA2B,EAAE,GAAG,IAAA,8BAAa,GAAE,CAAC;IAC1E,MAAM,EAAE,UAAU,EAAE,iBAAiB,EAAE,GAAG,IAAA,+BAAgB,GAAE,CAAC;IAE7D,0CAA0C;IAC1C,MAAM,gBAAgB,GAAyB,CAAC,CAAC,EAAE,EAAE;QACnD,kDAAkD;QAClD,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAiB,CAAC,EAAE,CAAC;YACnD,OAAO;QACT,CAAC;QAED,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC;YAChC,kCAAkC;YAClC,iBAAiB,EAAE,EAAE,CAAC;QACxB,CAAC;aAAM,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,SAAS,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,CAAC,IAAI,CAAC,CAAC,QAAQ,IAAI,gBAAgB,KAAK,UAAU,EAAE,CAAC;YAC3G,sCAAsC;YACtC,0FAA0F;YAC1F,mHAAmH;YACnH,2BAA2B,CAAC,UAAU,CAAC,CAAC;YACxC,OAAO;QACT,CAAC;aAAM,CAAC;YACN,6FAA6F;YAC7F,OAAO;QACT,CAAC;QAED,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,QAAQ,GAA4C;QACxD,gBAAgB,EAAE,gBAAgB,KAAK,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS;KAC7E,CAAC;IAEF,OAAO;QACL,QAAQ;KACT,CAAC;AACJ,CAAC","sourcesContent":["import type { KeyboardEventHandler } from 'react';\nimport type { NativeElementProps } from '../../types.js';\nimport { useTableRowState } from '../contexts/row-state.js';\nimport { useTableState } from '../contexts/table-state.js';\n\nexport interface UseSelectableRow {\n  rowProps: NativeElementProps<HTMLTableRowElement>;\n}\n\nexport function useSelectableRow(): UseSelectableRow {\n  const { rowSelectionMode, setPendingRowSelectionState } = useTableState();\n  const { isSelected, onSelectionToggle } = useTableRowState();\n\n  // Handles row selection using a keyboard.\n  const onKeyDownCapture: KeyboardEventHandler = (e) => {\n    // Ignore keyboard events bubbling through portals\n    if (!e.currentTarget.contains(e.target as Element)) {\n      return;\n    }\n\n    if (e.key === ' ' && e.shiftKey) {\n      // Toggle selection of current row\n      onSelectionToggle?.();\n    } else if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && e.shiftKey && rowSelectionMode === 'multiple') {\n      // Extend selection up/down by one row\n      // We're not going to stop propagation so that the arrow navigation handler runs as usual,\n      // and we'll set a special state variable so that the selection state gets updated when the new row receives focus.\n      setPendingRowSelectionState(isSelected);\n      return;\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 rowProps: NativeElementProps<HTMLTableRowElement> = {\n    onKeyDownCapture: rowSelectionMode !== 'none' ? onKeyDownCapture : undefined,\n  };\n\n  return {\n    rowProps,\n  };\n}\n"]}

package/dist/commonjs/components/table/hooks/use-table-cell.d.ts

@@ -3,5 +3,5 @@ import type { NativeElementProps } from '../../types.js';
 export interface UseTableCell {
     cellProps: NativeElementProps<HTMLTableCellElement>;
 }
-export declare function useTableCell(ref: RefObject<HTMLTableCellElement>, rowKey: string, columnKey: string): UseTableCell;
+export declare function useTableCell(ref: RefObject<HTMLTableCellElement | null>, rowKey: string, columnKey: string): UseTableCell;
 //# sourceMappingURL=use-table-cell.d.ts.map

package/dist/commonjs/components/table/hooks/use-table-cell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-table-cell.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-table-cell.ts"],"names":[],"mappings":"AAGA,OAAO,EAAsE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3G,OAAO,KAAK,EAAoB,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAI3E,MAAM,WAAW,YAAY;IAC3B,SAAS,EAAE,kBAAkB,CAAC,oBAAoB,CAAC,CAAC;CACrD;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,SAAS,CAAC,oBAAoB,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,YAAY,CA6HlH"}
+{"version":3,"file":"use-table-cell.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-table-cell.ts"],"names":[],"mappings":"AAGA,OAAO,EAAqD,KAAK,SAAS,EAAa,MAAM,OAAO,CAAC;AACrG,OAAO,KAAK,EAAoB,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAM3E,MAAM,WAAW,YAAY;IAC3B,SAAS,EAAE,kBAAkB,CAAC,oBAAoB,CAAC,CAAC;CACrD;AAED,wBAAgB,YAAY,CAC1B,GAAG,EAAE,SAAS,CAAC,oBAAoB,GAAG,IAAI,CAAC,EAC3C,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,MAAM,GAChB,YAAY,CAsJd"}

package/dist/commonjs/components/table/hooks/use-table-cell.js

@@ -6,9 +6,13 @@ const interactions_1 = require("@react-aria/interactions");
 const utils_1 = require("@react-aria/utils");
 const react_1 = require("react");
 const focus_js_1 = require("../contexts/focus.js");
+const row_state_js_1 = require("../contexts/row-state.js");
+const table_state_js_1 = require("../contexts/table-state.js");
 const focus_table_child_js_1 = require("../utils/focus-table-child.js");
 function useTableCell(ref, rowKey, columnKey) {
     const tableFocus = (0, focus_js_1.useTableFocus)();
+    const { pendingRowSelectionState, setPendingRowSelectionState } = (0, table_state_js_1.useTableState)();
+    const { onSelectionToggle } = (0, row_state_js_1.useTableRowState)();
     const isTabbable = rowKey === tableFocus.focusedRowKey && columnKey === tableFocus.focusedColumnKey;
     // Handles focusing the cell.
     // If there is a focusable child, it is focused, otherwise the cell itself is focused.
@@ -16,6 +20,12 @@ function useTableCell(ref, rowKey, columnKey) {
         if (!ref.current) {
             return;
         }
+        // If there's a pending selection state, apply it to this cell's row.
+        // If this cell is a header cell, `onSelectionToggle` will be undefined, but we still want to clear the pending selection state.
+        if (pendingRowSelectionState !== undefined) {
+            onSelectionToggle?.(pendingRowSelectionState);
+            setPendingRowSelectionState(undefined);
+        }
         // If focus is already on a focusable child within the cell, early return so we don't shift focus
         if (ref.current.contains(document.activeElement) && ref.current !== document.activeElement) {
             return;
@@ -36,34 +46,43 @@ function useTableCell(ref, rowKey, columnKey) {
         }
     };
     // Focus the cell DOM node when table focus moves to this cell
-    (0, react_1.useLayoutEffect)(() => {
+    (0, utils_1.useLayoutEffect)(() => {
         if (isTabbable && !ref.current.contains(document.activeElement)) {
             focusCell();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [ref, isTabbable]);
+    const resetIfFocused = (0, utils_1.useEffectEvent)(() => {
+        if (isTabbable) {
+            tableFocus.setFocus('', '');
+        }
+    });
+    // Reset table focus when the focused cell unmounts
+    (0, react_1.useEffect)(() => () => {
+        resetIfFocused();
+    }, [resetIfFocused]);
     const onFocus = (e) => {
         // Ignore focus events bubbling through portals
         if (!e.currentTarget.contains(e.target)) {
             return;
         }
-        // If cell is already focused, return early
-        if (e.currentTarget.contains(e.relatedTarget)) {
+        // If cell is already focused, return early.
+        // However, if focus happens as a result of a press, we need to re-run the child-focusing logic,
+        // otherwise `useFocusRing` will force the cell itself to become focused.
+        if (e.currentTarget.contains(e.relatedTarget) && (0, interactions_1.isFocusVisible)()) {
             return;
         }
-        if (e.target !== ref.current) {
-            // If a child element of the cell receives focus, there are 3 scenarios:
-            // - focus happens through a press, we need to update table focus state to the current cell
-            // - focus happens through arrow key navigation within the table,
-            //   we do nothing as table focus state would have already been updated earlier
-            // - focus happens through tabbing into the table from outside,
-            //   we do nothing because we want to restore focus to the previously focused cell,
-            //   and overriding table focus state would make that impossible
-            if (!(0, interactions_1.isFocusVisible)()) {
-                tableFocus.setFocus(rowKey, columnKey);
-            }
+        // There are 3 scenarios for why a cell might receive focus:
+        // - focus happens through a press, we need to update table focus state to the current cell
+        // - focus happens through arrow key navigation within the table,
+        //   we do nothing as table focus state would have already been updated earlier
+        // - focus happens through tabbing into the table from outside,
+        //   we do nothing because we want to restore focus to the previously focused cell,
+        //   and overriding table focus state would make that impossible
+        if (!(0, interactions_1.isFocusVisible)()) {
+            tableFocus.setFocus(rowKey, columnKey);
         }
-        else {
+        if (e.target === ref.current) {
             // If the cell itself receives focus, wait a frame so that focus finishes propagating
             // up to the tree, and move focus to a focusable child if possible.
             requestAnimationFrame(() => {