@cimpress-ui/react 1.30.1 → 1.32.0

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

@@ -1 +1 @@
-{"version":3,"file":"app-shell-context.js","sourceRoot":"","sources":["../../../../src/components/app-shell/app-shell-context.tsx"],"names":[],"mappings":";;;AAAA,iCAAsC;AAEtC,gBAAgB;AACH,QAAA,eAAe,GAAG,IAAA,qBAAa,EAQlC,IAAI,CAAC,CAAC","sourcesContent":["import { createContext } from 'react';\n\n/** @internal */\nexport const AppShellContext = createContext<{\n  mobileNavIsOpen: boolean;\n  toggleMobileNav: (isOpen?: boolean) => void;\n  sideNavIsCollapsed: boolean | undefined;\n  toggleSideNavCollapse: (isCollapsed?: boolean) => void;\n  sideNavIsCollapsible: boolean;\n  setSideNavIsCollapsible: (isCollapsible: boolean) => void;\n  toggleSideNav: () => void;\n} | null>(null);\n"]}
+{"version":3,"file":"app-shell-context.js","sourceRoot":"","sources":["../../../../src/components/app-shell/app-shell-context.tsx"],"names":[],"mappings":";;;AAAA,iCAAsC;AAEtC,gBAAgB;AACH,QAAA,eAAe,GAAG,IAAA,qBAAa,EAUlC,IAAI,CAAC,CAAC","sourcesContent":["import { createContext } from 'react';\n\n/** @internal */\nexport const AppShellContext = createContext<{\n  mobileNavIsOpen: boolean;\n  toggleMobileNav: (isOpen?: boolean) => void;\n  sideNavIsCollapsed: boolean | undefined;\n  toggleSideNavCollapse: (isCollapsed?: boolean) => void;\n  sideNavIsCollapsible: boolean;\n  setSideNavIsCollapsible: (isCollapsible: boolean) => void;\n  toggleSideNav: () => void;\n  /** ID of the main content area targeted by the skip link. */\n  mainContentId: string;\n} | null>(null);\n"]}

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

@@ -1,11 +1,33 @@
 import { type ReactNode } from 'react';
 import type { CommonProps } from '../types.js';
-export interface UNSTABLE_AppShellProps extends CommonProps {
+export interface AppShellProps extends CommonProps {
+    /**
+     * The children of the app shell should be composed using specific components to fill the available layout slots:
+     * - `<AppHeader />` for the global header
+     * - `<SideNav />` for the side navigation
+     * - `<TopNav />` for the top navigation bar
+     * - `<AppShellBody />` for the main content area
+     *
+     * These components should be passed as direct children to correctly populate the app shell layout.
+     */
     children: ReactNode;
 }
-export declare function UNSTABLE_AppShell({ children, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_AppShellProps): import("react/jsx-runtime").JSX.Element;
-export interface UNSTABLE_AppShellBodyProps extends CommonProps {
+/**
+ * Provides the foundational layout structure for applications, including header, navigation, and main content slots.
+ *
+ * See [app shell usage guidelines](https://ui.cimpress.io/components/app-shell/).
+ */
+export declare function AppShell({ children, UNSAFE_className, UNSAFE_style, ...props }: AppShellProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace AppShell {
+    var displayName: string;
+}
+export interface AppShellBodyProps extends Omit<CommonProps, 'id'> {
+    /** Main content area of the app shell. */
     children: ReactNode;
 }
-export declare function UNSTABLE_AppShellBody({ children, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_AppShellBodyProps): import("react/jsx-runtime").JSX.Element;
+/** Renders the main content area within `AppShell`. */
+export declare function AppShellBody({ children, UNSAFE_className, UNSAFE_style, ...props }: AppShellBodyProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace AppShellBody {
+    var displayName: string;
+}
 //# sourceMappingURL=app-shell.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../../src/components/app-shell/app-shell.tsx"],"names":[],"mappings":"AACA,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAmC/G;AAED,MAAM,WAAW,0BAA2B,SAAQ,WAAW;IAC7D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,0BAA0B,2CAM5B"}
+{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../../src/components/app-shell/app-shell.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAK1E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAI/C,MAAM,WAAW,aAAc,SAAQ,WAAW;IAChD;;;;;;;;OAQG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CA2C7F;yBA3Ce,QAAQ;;;AA8CxB,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC;IAChE,0CAA0C;IAC1C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,uDAAuD;AACvD,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CASrG;yBATe,YAAY"}

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

@@ -1,16 +1,28 @@
+'use client';
 "use strict";
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UNSTABLE_AppShell = UNSTABLE_AppShell;
-exports.UNSTABLE_AppShellBody = UNSTABLE_AppShellBody;
+exports.AppShell = AppShell;
+exports.AppShellBody = AppShellBody;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = require("react");
+const react_aria_1 = require("react-aria");
+const index_js_1 = require("../../i18n/index.js");
 const breakpoints_js_1 = require("../../utils/breakpoints.js");
+const link_button_js_1 = require("../button/link-button.js");
+const visually_hidden_js_1 = require("../visually-hidden/visually-hidden.js");
 const app_shell_context_js_1 = require("./app-shell-context.js");
-function UNSTABLE_AppShell({ children, UNSAFE_className, UNSAFE_style, ...props }) {
+/**
+ * Provides the foundational layout structure for applications, including header, navigation, and main content slots.
+ *
+ * See [app shell usage guidelines](https://ui.cimpress.io/components/app-shell/).
+ */
+function AppShell({ children, UNSAFE_className, UNSAFE_style, ...props }) {
+    const messages = (0, index_js_1.useLocalizedMessages)('appShell');
+    const mainContentId = 'app-shell-body-' + (0, react_aria_1.useId)();
     const [sideNavIsCollapsible, setSideNavIsCollapsible] = (0, react_1.useState)(false);
     const [mobileNavIsOpen, setMobileNavIsOpen] = (0, react_1.useState)(false);
     const toggleMobileNav = (0, react_1.useCallback)((isOpen) => {
@@ -36,9 +48,15 @@ function UNSTABLE_AppShell({ children, UNSAFE_className, UNSAFE_style, ...props
             sideNavIsCollapsed,
             toggleSideNavCollapse,
             toggleSideNav,
-        }, children: (0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('cim-app-shell', UNSAFE_className), style: UNSAFE_style, ...props, children: children }) }));
+            mainContentId,
+        }, children: (0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, clsx_1.default)('cim-app-shell', UNSAFE_className), style: UNSAFE_style, children: [(0, jsx_runtime_1.jsx)(visually_hidden_js_1.UNSTABLE_VisuallyHidden, { showWhenFocused: true, UNSAFE_className: "cim-app-shell-skip-link", children: (0, jsx_runtime_1.jsx)(link_button_js_1.LinkButton, { href: `#${encodeURIComponent(mainContentId)}`, target: "_self", variant: "secondary", size: "small", children: messages.format('skipToContent') }) }), children] }) }));
 }
-function UNSTABLE_AppShellBody({ children, UNSAFE_className, UNSAFE_style, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('cim-app-shell-body', UNSAFE_className), style: UNSAFE_style, ...props, children: children }));
+AppShell.displayName = 'AppShell';
+/** Renders the main content area within `AppShell`. */
+function AppShellBody({ children, UNSAFE_className, UNSAFE_style, ...props }) {
+    const appShellContext = (0, react_1.useContext)(app_shell_context_js_1.AppShellContext);
+    const mainContentId = appShellContext?.mainContentId;
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, id: mainContentId, className: (0, clsx_1.default)('cim-app-shell-body', UNSAFE_className), style: UNSAFE_style, children: children }));
 }
+AppShellBody.displayName = 'AppShellBody';
 //# sourceMappingURL=app-shell.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"app-shell.js","sourceRoot":"","sources":["../../../../src/components/app-shell/app-shell.tsx"],"names":[],"mappings":";;;;;AAUA,8CAmCC;AAMD,sDAWC;;AA9DD,gDAAwB;AACxB,iCAA8D;AAC9D,+DAA+D;AAE/D,iEAAyD;AAMzD,SAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAA0B;IAC9G,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACxE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC9D,MAAM,eAAe,GAAG,IAAA,mBAAW,EAAC,CAAC,MAAgB,EAAE,EAAE;QACvD,kBAAkB,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,CAAC;IAC5D,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,IAAA,gBAAQ,EAAsB,SAAS,CAAC,CAAC;IAC7F,MAAM,qBAAqB,GAAG,IAAA,mBAAW,EAAC,CAAC,WAAqB,EAAE,EAAE;QAClE,qBAAqB,CAAC,CAAC,eAAe,EAAE,EAAE,CAAC,WAAW,IAAI,CAAC,eAAe,CAAC,CAAC;IAC9E,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,aAAa,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACrC,IAAI,oBAAoB,IAAI,IAAA,kCAAiB,EAAC,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC;YAC7D,qBAAqB,EAAE,CAAC;QAC1B,CAAC;aAAM,CAAC;YACN,eAAe,EAAE,CAAC;QACpB,CAAC;IACH,CAAC,EAAE,CAAC,oBAAoB,EAAE,eAAe,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAEnE,OAAO,CACL,uBAAC,sCAAe,CAAC,QAAQ,IACvB,KAAK,EAAE;YACL,oBAAoB;YACpB,uBAAuB;YACvB,eAAe;YACf,eAAe;YACf,kBAAkB;YAClB,qBAAqB;YACrB,aAAa;SACd,YAED,gCAAK,SAAS,EAAE,IAAA,cAAI,EAAC,eAAe,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,KAAM,KAAK,YACpF,QAAQ,GACL,GACmB,CAC5B,CAAC;AACJ,CAAC;AAMD,SAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACmB;IAC3B,OAAO,CACL,gCAAK,SAAS,EAAE,IAAA,cAAI,EAAC,oBAAoB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,KAAM,KAAK,YACzF,QAAQ,GACL,CACP,CAAC;AACJ,CAAC","sourcesContent":["import clsx from 'clsx';\nimport { useCallback, useState, type ReactNode } from 'react';\nimport { matchesBreakpoint } from '../../utils/breakpoints.js';\nimport type { CommonProps } from '../types.js';\nimport { AppShellContext } from './app-shell-context.js';\n\nexport interface UNSTABLE_AppShellProps extends CommonProps {\n  children: ReactNode;\n}\n\nexport function UNSTABLE_AppShell({ children, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_AppShellProps) {\n  const [sideNavIsCollapsible, setSideNavIsCollapsible] = useState(false);\n  const [mobileNavIsOpen, setMobileNavIsOpen] = useState(false);\n  const toggleMobileNav = useCallback((isOpen?: boolean) => {\n    setMobileNavIsOpen((prevIsOpen) => isOpen ?? !prevIsOpen);\n  }, []);\n  const [sideNavIsCollapsed, setSideNavIsCollapsed] = useState<boolean | undefined>(undefined);\n  const toggleSideNavCollapse = useCallback((isCollapsed?: boolean) => {\n    setSideNavIsCollapsed((prevIsCollapsed) => isCollapsed ?? !prevIsCollapsed);\n  }, []);\n  const toggleSideNav = useCallback(() => {\n    if (sideNavIsCollapsible && matchesBreakpoint({ min: 'md' })) {\n      toggleSideNavCollapse();\n    } else {\n      toggleMobileNav();\n    }\n  }, [sideNavIsCollapsible, toggleMobileNav, toggleSideNavCollapse]);\n\n  return (\n    <AppShellContext.Provider\n      value={{\n        sideNavIsCollapsible,\n        setSideNavIsCollapsible,\n        mobileNavIsOpen,\n        toggleMobileNav,\n        sideNavIsCollapsed,\n        toggleSideNavCollapse,\n        toggleSideNav,\n      }}\n    >\n      <div className={clsx('cim-app-shell', UNSAFE_className)} style={UNSAFE_style} {...props}>\n        {children}\n      </div>\n    </AppShellContext.Provider>\n  );\n}\n\nexport interface UNSTABLE_AppShellBodyProps extends CommonProps {\n  children: ReactNode;\n}\n\nexport function UNSTABLE_AppShellBody({\n  children,\n  UNSAFE_className,\n  UNSAFE_style,\n  ...props\n}: UNSTABLE_AppShellBodyProps) {\n  return (\n    <div className={clsx('cim-app-shell-body', UNSAFE_className)} style={UNSAFE_style} {...props}>\n      {children}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"app-shell.js","sourceRoot":"","sources":["../../../../src/components/app-shell/app-shell.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useCallback, useContext, useState, type ReactNode } from 'react';\nimport { useId } from 'react-aria';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { matchesBreakpoint } from '../../utils/breakpoints.js';\nimport { LinkButton } from '../button/link-button.js';\nimport type { CommonProps } from '../types.js';\nimport { UNSTABLE_VisuallyHidden as VisuallyHidden } from '../visually-hidden/visually-hidden.js';\nimport { AppShellContext } from './app-shell-context.js';\n\nexport interface AppShellProps extends CommonProps {\n  /**\n   * The children of the app shell should be composed using specific components to fill the available layout slots:\n   * - `<AppHeader />` for the global header\n   * - `<SideNav />` for the side navigation\n   * - `<TopNav />` for the top navigation bar\n   * - `<AppShellBody />` for the main content area\n   *\n   * These components should be passed as direct children to correctly populate the app shell layout.\n   */\n  children: ReactNode;\n}\n\n/**\n * Provides the foundational layout structure for applications, including header, navigation, and main content slots.\n *\n * See [app shell usage guidelines](https://ui.cimpress.io/components/app-shell/).\n */\nexport function AppShell({ children, UNSAFE_className, UNSAFE_style, ...props }: AppShellProps) {\n  const messages = useLocalizedMessages('appShell');\n  const mainContentId = 'app-shell-body-' + useId();\n  const [sideNavIsCollapsible, setSideNavIsCollapsible] = useState(false);\n  const [mobileNavIsOpen, setMobileNavIsOpen] = useState(false);\n  const toggleMobileNav = useCallback((isOpen?: boolean) => {\n    setMobileNavIsOpen((prevIsOpen) => isOpen ?? !prevIsOpen);\n  }, []);\n  const [sideNavIsCollapsed, setSideNavIsCollapsed] = useState<boolean | undefined>(undefined);\n  const toggleSideNavCollapse = useCallback((isCollapsed?: boolean) => {\n    setSideNavIsCollapsed((prevIsCollapsed) => isCollapsed ?? !prevIsCollapsed);\n  }, []);\n  const toggleSideNav = useCallback(() => {\n    if (sideNavIsCollapsible && matchesBreakpoint({ min: 'md' })) {\n      toggleSideNavCollapse();\n    } else {\n      toggleMobileNav();\n    }\n  }, [sideNavIsCollapsible, toggleMobileNav, toggleSideNavCollapse]);\n\n  return (\n    <AppShellContext.Provider\n      value={{\n        sideNavIsCollapsible,\n        setSideNavIsCollapsible,\n        mobileNavIsOpen,\n        toggleMobileNav,\n        sideNavIsCollapsed,\n        toggleSideNavCollapse,\n        toggleSideNav,\n        mainContentId,\n      }}\n    >\n      <div {...props} className={clsx('cim-app-shell', UNSAFE_className)} style={UNSAFE_style}>\n        <VisuallyHidden showWhenFocused UNSAFE_className=\"cim-app-shell-skip-link\">\n          <LinkButton href={`#${encodeURIComponent(mainContentId)}`} target=\"_self\" variant=\"secondary\" size=\"small\">\n            {messages.format('skipToContent')}\n          </LinkButton>\n        </VisuallyHidden>\n        {children}\n      </div>\n    </AppShellContext.Provider>\n  );\n}\nAppShell.displayName = 'AppShell';\n\nexport interface AppShellBodyProps extends Omit<CommonProps, 'id'> {\n  /** Main content area of the app shell. */\n  children: ReactNode;\n}\n\n/** Renders the main content area within `AppShell`. */\nexport function AppShellBody({ children, UNSAFE_className, UNSAFE_style, ...props }: AppShellBodyProps) {\n  const appShellContext = useContext(AppShellContext);\n  const mainContentId = appShellContext?.mainContentId;\n\n  return (\n    <div {...props} id={mainContentId} className={clsx('cim-app-shell-body', UNSAFE_className)} style={UNSAFE_style}>\n      {children}\n    </div>\n  );\n}\nAppShellBody.displayName = 'AppShellBody';\n"]}

package/dist/commonjs/components/side-nav/side-nav.d.ts

@@ -1,6 +1,7 @@
 import { type ReactNode } from 'react';
 import type { Href, StringLikeChildren } from '../types.js';
-export interface UNSTABLE_SideNavProps {
+export interface SideNavProps {
+    /** The contents of the side navigation. Typically a `<SideNavList>`. */
     children: ReactNode;
     /**
      * Determines if the side navigation can be collapsed down to an icon-only rail, allowing for more screen space when needed.
@@ -16,21 +17,48 @@ export interface UNSTABLE_SideNavProps {
         onCollapseChange?: (isCollapsed: boolean) => void;
     };
 }
-export declare function UNSTABLE_SideNav({ children, UNSTABLE_isCollapsible: isCollapsible }: UNSTABLE_SideNavProps): import("react/jsx-runtime").JSX.Element;
-export interface UNSTABLE_SideNavListProps {
+/**
+ * Displays persistent side navigation for applications with multiple sections or pages.
+ *
+ * See [side nav usage guidelines](https://ui.cimpress.io/components/side-nav/).
+ */
+export declare function SideNav({ children, UNSTABLE_isCollapsible: isCollapsible }: SideNavProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SideNav {
+    var displayName: string;
+}
+export interface SideNavListProps {
+    /** Navigation items and sections belonging to the list. */
     children: ReactNode;
 }
-export declare function UNSTABLE_SideNavList({ children }: UNSTABLE_SideNavListProps): import("react/jsx-runtime").JSX.Element;
-export interface UNSTABLE_SideNavListItemProps {
+/** Renders a list of navigation items within `SideNav`. */
+export declare function SideNavList({ children }: SideNavListProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SideNavList {
+    var displayName: string;
+}
+export interface SideNavListItemProps {
+    /** The text to display as the navigation item label. */
     children: StringLikeChildren;
+    /** A URL to link to. */
     href: Href;
+    /** Whether the navigation item represents the current page. */
     isActive?: boolean;
+    /** An icon displayed before the navigation item label. Required when the side nav is collapsible. */
     icon?: ReactNode;
 }
-export declare function UNSTABLE_SideNavListItem({ children, href, isActive, icon }: UNSTABLE_SideNavListItemProps): import("react/jsx-runtime").JSX.Element;
-export interface UNSTABLE_SideNavListSectionProps {
+/** Renders a single navigation item within `SideNavList`. */
+export declare function SideNavListItem({ children, href, isActive, icon }: SideNavListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SideNavListItem {
+    var displayName: string;
+}
+export interface SideNavListSectionProps {
+    /** Navigation items belonging to the section. */
     children: ReactNode;
+    /** The content to display as the section title. */
     label?: string;
 }
-export declare function UNSTABLE_SideNavListSection({ children, label }: UNSTABLE_SideNavListSectionProps): import("react/jsx-runtime").JSX.Element;
+/** Renders a section of navigation items within `SideNavList`. */
+export declare function SideNavListSection({ children, label }: SideNavListSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SideNavListSection {
+    var displayName: string;
+}
 //# sourceMappingURL=side-nav.d.ts.map

package/dist/commonjs/components/side-nav/side-nav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"side-nav.d.ts","sourceRoot":"","sources":["../../../../src/components/side-nav/side-nav.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQ1E,OAAO,KAAK,EAAE,IAAI,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAQ5D,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,sBAAsB,CAAC,EACnB,OAAO,GACP;QACE,yFAAyF;QACzF,gBAAgB,CAAC,EAAE,IAAI,CAAC;QACxB,qHAAqH;QACrH,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,mFAAmF;QACnF,gBAAgB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;KACnD,CAAC;CACP;AAED,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,sBAAsB,EAAE,aAAa,EAAE,EAAE,qBAAqB,2CAwB1G;AAkED,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,EAAE,yBAAyB,2CAE3E;AAED,MAAM,WAAW,6BAA6B;IAC5C,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,wBAAgB,wBAAwB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,6BAA6B,2CAazG;AAED,MAAM,WAAW,gCAAgC;IAC/C,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,2BAA2B,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,gCAAgC,2CAahG"}
+{"version":3,"file":"side-nav.d.ts","sourceRoot":"","sources":["../../../../src/components/side-nav/side-nav.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAS1E,OAAO,KAAK,EAAE,IAAI,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAQ5D,MAAM,WAAW,YAAY;IAC3B,wEAAwE;IACxE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,sBAAsB,CAAC,EACnB,OAAO,GACP;QACE,yFAAyF;QACzF,gBAAgB,CAAC,EAAE,IAAI,CAAC;QACxB,qHAAqH;QACrH,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,mFAAmF;QACnF,gBAAgB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;KACnD,CAAC;CACP;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,sBAAsB,EAAE,aAAa,EAAE,EAAE,YAAY,2CAwBxF;yBAxBe,OAAO;;;AA4FvB,MAAM,WAAW,gBAAgB;IAC/B,2DAA2D;IAC3D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,2DAA2D;AAC3D,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE,gBAAgB,2CAEzD;yBAFe,WAAW;;;AAK3B,MAAM,WAAW,oBAAoB;IACnC,wDAAwD;IACxD,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,wBAAwB;IACxB,IAAI,EAAE,IAAI,CAAC;IACX,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qGAAqG;IACrG,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,6DAA6D;AAC7D,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,oBAAoB,2CAavF;yBAbe,eAAe;;;AAgB/B,MAAM,WAAW,uBAAuB;IACtC,iDAAiD;IACjD,QAAQ,EAAE,SAAS,CAAC;IACpB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,kEAAkE;AAClE,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,uBAAuB,2CAa9E;yBAbe,kBAAkB"}

package/dist/commonjs/components/side-nav/side-nav.js

@@ -1,15 +1,16 @@
 'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UNSTABLE_SideNav = UNSTABLE_SideNav;
-exports.UNSTABLE_SideNavList = UNSTABLE_SideNavList;
-exports.UNSTABLE_SideNavListItem = UNSTABLE_SideNavListItem;
-exports.UNSTABLE_SideNavListSection = UNSTABLE_SideNavListSection;
+exports.SideNav = SideNav;
+exports.SideNavList = SideNavList;
+exports.SideNavListItem = SideNavListItem;
+exports.SideNavListSection = SideNavListSection;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const utils_1 = require("@react-aria/utils");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
 const react_aria_components_1 = require("react-aria-components");
+const index_js_1 = require("../../i18n/index.js");
 const breakpoints_js_1 = require("../../utils/breakpoints.js");
 const string_like_children_to_string_js_1 = require("../../utils/string-like-children-to-string.js");
 const app_shell_context_js_1 = require("../app-shell/app-shell-context.js");
@@ -17,7 +18,12 @@ const mobile_nav_js_1 = require("../mobile-nav/mobile-nav.js");
 const tooltip_js_1 = require("../tooltip/tooltip.js");
 const text_js_1 = require("../typography/text.js");
 const SideNavContext = (0, react_1.createContext)({ isCollapsed: false });
-function UNSTABLE_SideNav({ children, UNSTABLE_isCollapsible: isCollapsible }) {
+/**
+ * Displays persistent side navigation for applications with multiple sections or pages.
+ *
+ * See [side nav usage guidelines](https://ui.cimpress.io/components/side-nav/).
+ */
+function SideNav({ children, UNSTABLE_isCollapsible: isCollapsible }) {
     const appShellContext = (0, react_1.useContext)(app_shell_context_js_1.AppShellContext);
     (0, utils_1.useLayoutEffect)(() => {
         appShellContext?.setSideNavIsCollapsible(typeof isCollapsible === 'object' || isCollapsible || false);
@@ -27,7 +33,9 @@ function UNSTABLE_SideNav({ children, UNSTABLE_isCollapsible: isCollapsible }) {
                         onItemSelect: () => appShellContext.toggleMobileNav(false),
                     }, children: children }) }))] }));
 }
+SideNav.displayName = 'SideNav';
 function SideNavInner({ children, UNSTABLE_isCollapsible: isCollapsible }) {
+    const messages = (0, index_js_1.useLocalizedMessages)('sideNav');
     const appShellContext = (0, react_1.useContext)(app_shell_context_js_1.AppShellContext);
     const sideNavRef = (0, react_1.useRef)(null);
     const isOverlaySideNav = (0, breakpoints_js_1.useBreakpoint)({ max: 'md' }) && isCollapsible !== false;
@@ -63,16 +71,22 @@ function SideNavInner({ children, UNSTABLE_isCollapsible: isCollapsible }) {
     return ((0, jsx_runtime_1.jsx)(SideNavContext.Provider, { value: {
             isCollapsed: isCollapsed ?? false,
             onItemSelect: isOverlaySideNav ? handleClose : undefined,
-        }, children: (0, jsx_runtime_1.jsx)("div", { ...(isOverlaySideNav ? overlayProps : {}), className: "cim-side-nav", "data-collapsible": typeof isCollapsible === 'object' ? true : isCollapsible || false, "data-collapsed": isCollapsed, "aria-label": "Side navigation", ref: sideNavRef, children: (0, jsx_runtime_1.jsx)("div", { className: "cim-side-nav-panel", children: children }) }) }));
+        }, children: (0, jsx_runtime_1.jsx)("div", { ...(isOverlaySideNav ? overlayProps : {}), className: "cim-side-nav", "data-collapsible": typeof isCollapsible === 'object' ? true : isCollapsible || false, "data-collapsed": isCollapsed, "aria-label": messages.format('srLabel'), ref: sideNavRef, children: (0, jsx_runtime_1.jsx)("div", { className: "cim-side-nav-panel", children: children }) }) }));
 }
-function UNSTABLE_SideNavList({ children }) {
+/** Renders a list of navigation items within `SideNav`. */
+function SideNavList({ children }) {
     return (0, jsx_runtime_1.jsx)("nav", { className: "cim-side-nav-list", children: children });
 }
-function UNSTABLE_SideNavListItem({ children, href, isActive, icon }) {
+SideNavList.displayName = 'SideNavList';
+/** Renders a single navigation item within `SideNavList`. */
+function SideNavListItem({ children, href, isActive, icon }) {
     const { isCollapsed, onItemSelect } = (0, react_1.useContext)(SideNavContext);
     return ((0, jsx_runtime_1.jsx)(tooltip_js_1.Tooltip, { label: (0, string_like_children_to_string_js_1.stringLikeChildrenToString)(children), placement: "right", isDisabled: !isCollapsed, children: (0, jsx_runtime_1.jsxs)(react_aria_components_1.Link, { href: href, className: "cim-side-nav-list-item", "data-active": isActive, onPress: onItemSelect, children: [icon, (0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "span", variant: "medium", UNSAFE_className: "cim-side-nav-list-item-label", children: children })] }) }));
 }
-function UNSTABLE_SideNavListSection({ children, label }) {
+SideNavListItem.displayName = 'SideNavListItem';
+/** Renders a section of navigation items within `SideNavList`. */
+function SideNavListSection({ children, label }) {
     return ((0, jsx_runtime_1.jsxs)("div", { className: "cim-side-nav-list-section", children: [label && ((0, jsx_runtime_1.jsx)("div", { className: "cim-side-nav-list-section-header", children: (0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "p", variant: "small-semibold", tone: "subtle", UNSAFE_className: "cim-side-nav-list-section-header-label", children: label }) })), children] }));
 }
+SideNavListSection.displayName = 'SideNavListSection';
 //# sourceMappingURL=side-nav.js.map

package/dist/commonjs/components/side-nav/side-nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-nav.js","sourceRoot":"","sources":["../../../../src/components/side-nav/side-nav.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useEffectEvent, useLayoutEffect } from '@react-aria/utils';\nimport { createContext, useContext, useRef, type ReactNode } from 'react';\nimport { useOverlay } from 'react-aria';\nimport { Link as RACLink } from 'react-aria-components';\nimport { matchesBreakpoint, useBreakpoint } from '../../utils/breakpoints.js';\nimport { stringLikeChildrenToString } from '../../utils/string-like-children-to-string.js';\nimport { AppShellContext } from '../app-shell/app-shell-context.js';\nimport { UNSTABLE_MobileNav as MobileNav } from '../mobile-nav/mobile-nav.js';\nimport { Tooltip } from '../tooltip/tooltip.js';\nimport type { Href, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nconst SideNavContext = createContext<{\n  isCollapsed: boolean;\n  onItemSelect?: () => void;\n}>({ isCollapsed: false });\n\nexport interface UNSTABLE_SideNavProps {\n  children: ReactNode;\n  /**\n   * Determines if the side navigation can be collapsed down to an icon-only rail, allowing for more screen space when needed.\n   *\n   * Setting to `true` will enable collapsibility. Passing an object allows for more advanced configuration, including fully controlled usage outside app shell context.\n   */\n  UNSTABLE_isCollapsible?:\n    | boolean\n    | {\n        /** Whether the side nav should be collapsed by default. Only affects large viewports. */\n        defaultCollapsed?: true;\n        /** Whether the side nav is currently collapsed. Only needed when the side nav is not controlled by the app shell. */\n        isCollapsed?: boolean;\n        /** Callback function that is called when the side nav is collapsed or expanded. */\n        onCollapseChange?: (isCollapsed: boolean) => void;\n      };\n}\n\nexport function UNSTABLE_SideNav({ children, UNSTABLE_isCollapsible: isCollapsible }: UNSTABLE_SideNavProps) {\n  const appShellContext = useContext(AppShellContext);\n\n  useLayoutEffect(() => {\n    appShellContext?.setSideNavIsCollapsible(typeof isCollapsible === 'object' || isCollapsible || false);\n  }, [isCollapsible, appShellContext]);\n\n  return (\n    <>\n      <SideNavInner UNSTABLE_isCollapsible={isCollapsible}>{children}</SideNavInner>\n      {appShellContext && (\n        <MobileNav isOpen={appShellContext.mobileNavIsOpen} onOpenChange={() => appShellContext.toggleMobileNav(false)}>\n          <SideNavContext.Provider\n            value={{\n              isCollapsed: false,\n              onItemSelect: () => appShellContext.toggleMobileNav(false),\n            }}\n          >\n            {children}\n          </SideNavContext.Provider>\n        </MobileNav>\n      )}\n    </>\n  );\n}\n\nfunction SideNavInner({ children, UNSTABLE_isCollapsible: isCollapsible }: UNSTABLE_SideNavProps) {\n  const appShellContext = useContext(AppShellContext);\n  const sideNavRef = useRef<HTMLDivElement>(null);\n  const isOverlaySideNav = useBreakpoint({ max: 'md' }) && isCollapsible !== false;\n  const isCollapsed =\n    typeof isCollapsible === 'object'\n      ? (isCollapsible.isCollapsed ?? appShellContext?.sideNavIsCollapsed ?? isCollapsible.defaultCollapsed)\n      : isCollapsible\n        ? appShellContext?.sideNavIsCollapsed\n        : undefined;\n\n  function handleClose() {\n    appShellContext?.toggleSideNavCollapse(true);\n\n    if (typeof isCollapsible === 'object') {\n      isCollapsible.onCollapseChange?.(true);\n    }\n  }\n\n  const { overlayProps } = useOverlay(\n    {\n      isDismissable: isOverlaySideNav,\n      isOpen: isOverlaySideNav && isCollapsed !== undefined ? !isCollapsed : undefined,\n      onClose: () => handleClose(),\n    },\n    sideNavRef,\n  );\n\n  const resetState = useEffectEvent(() => {\n    if (typeof isCollapsible === 'object' || isCollapsible) {\n      const defaultIsCollapsed = typeof isCollapsible === 'object' ? isCollapsible.defaultCollapsed : false;\n      appShellContext?.toggleSideNavCollapse(defaultIsCollapsed || matchesBreakpoint({ max: 'md' }));\n      if (typeof isCollapsible === 'object') {\n        isCollapsible.onCollapseChange?.(defaultIsCollapsed || matchesBreakpoint({ max: 'md' }));\n      }\n    }\n  });\n\n  // Hydrate state and reset when screen size changes to or from overlay mode\n  useLayoutEffect(() => {\n    resetState();\n  }, [isOverlaySideNav]);\n\n  return (\n    <SideNavContext.Provider\n      value={{\n        isCollapsed: isCollapsed ?? false,\n        onItemSelect: isOverlaySideNav ? handleClose : undefined,\n      }}\n    >\n      <div\n        {...(isOverlaySideNav ? overlayProps : {})}\n        className=\"cim-side-nav\"\n        data-collapsible={typeof isCollapsible === 'object' ? true : isCollapsible || false}\n        data-collapsed={isCollapsed}\n        aria-label=\"Side navigation\"\n        ref={sideNavRef}\n      >\n        <div className=\"cim-side-nav-panel\">{children}</div>\n      </div>\n    </SideNavContext.Provider>\n  );\n}\n\nexport interface UNSTABLE_SideNavListProps {\n  children: ReactNode;\n}\n\nexport function UNSTABLE_SideNavList({ children }: UNSTABLE_SideNavListProps) {\n  return <nav className=\"cim-side-nav-list\">{children}</nav>;\n}\n\nexport interface UNSTABLE_SideNavListItemProps {\n  children: StringLikeChildren;\n  href: Href;\n  isActive?: boolean;\n  icon?: ReactNode;\n}\n\nexport function UNSTABLE_SideNavListItem({ children, href, isActive, icon }: UNSTABLE_SideNavListItemProps) {\n  const { isCollapsed, onItemSelect } = useContext(SideNavContext);\n\n  return (\n    <Tooltip label={stringLikeChildrenToString(children)} placement=\"right\" isDisabled={!isCollapsed}>\n      <RACLink href={href} className=\"cim-side-nav-list-item\" data-active={isActive} onPress={onItemSelect}>\n        {icon}\n        <Text as=\"span\" variant=\"medium\" UNSAFE_className=\"cim-side-nav-list-item-label\">\n          {children}\n        </Text>\n      </RACLink>\n    </Tooltip>\n  );\n}\n\nexport interface UNSTABLE_SideNavListSectionProps {\n  children: ReactNode;\n  label?: string;\n}\n\nexport function UNSTABLE_SideNavListSection({ children, label }: UNSTABLE_SideNavListSectionProps) {\n  return (\n    <div className=\"cim-side-nav-list-section\">\n      {label && (\n        <div className=\"cim-side-nav-list-section-header\">\n          <Text as=\"p\" variant=\"small-semibold\" tone=\"subtle\" UNSAFE_className=\"cim-side-nav-list-section-header-label\">\n            {label}\n          </Text>\n        </div>\n      )}\n      {children}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"side-nav.js","sourceRoot":"","sources":["../../../../src/components/side-nav/side-nav.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useEffectEvent, useLayoutEffect } from '@react-aria/utils';\nimport { createContext, useContext, useRef, type ReactNode } from 'react';\nimport { useOverlay } from 'react-aria';\nimport { Link as RACLink } from 'react-aria-components';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { matchesBreakpoint, useBreakpoint } from '../../utils/breakpoints.js';\nimport { stringLikeChildrenToString } from '../../utils/string-like-children-to-string.js';\nimport { AppShellContext } from '../app-shell/app-shell-context.js';\nimport { UNSTABLE_MobileNav as MobileNav } from '../mobile-nav/mobile-nav.js';\nimport { Tooltip } from '../tooltip/tooltip.js';\nimport type { Href, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nconst SideNavContext = createContext<{\n  isCollapsed: boolean;\n  onItemSelect?: () => void;\n}>({ isCollapsed: false });\n\nexport interface SideNavProps {\n  /** The contents of the side navigation. Typically a `<SideNavList>`. */\n  children: ReactNode;\n  /**\n   * Determines if the side navigation can be collapsed down to an icon-only rail, allowing for more screen space when needed.\n   *\n   * Setting to `true` will enable collapsibility. Passing an object allows for more advanced configuration, including fully controlled usage outside app shell context.\n   */\n  UNSTABLE_isCollapsible?:\n    | boolean\n    | {\n        /** Whether the side nav should be collapsed by default. Only affects large viewports. */\n        defaultCollapsed?: true;\n        /** Whether the side nav is currently collapsed. Only needed when the side nav is not controlled by the app shell. */\n        isCollapsed?: boolean;\n        /** Callback function that is called when the side nav is collapsed or expanded. */\n        onCollapseChange?: (isCollapsed: boolean) => void;\n      };\n}\n\n/**\n * Displays persistent side navigation for applications with multiple sections or pages.\n *\n * See [side nav usage guidelines](https://ui.cimpress.io/components/side-nav/).\n */\nexport function SideNav({ children, UNSTABLE_isCollapsible: isCollapsible }: SideNavProps) {\n  const appShellContext = useContext(AppShellContext);\n\n  useLayoutEffect(() => {\n    appShellContext?.setSideNavIsCollapsible(typeof isCollapsible === 'object' || isCollapsible || false);\n  }, [isCollapsible, appShellContext]);\n\n  return (\n    <>\n      <SideNavInner UNSTABLE_isCollapsible={isCollapsible}>{children}</SideNavInner>\n      {appShellContext && (\n        <MobileNav isOpen={appShellContext.mobileNavIsOpen} onOpenChange={() => appShellContext.toggleMobileNav(false)}>\n          <SideNavContext.Provider\n            value={{\n              isCollapsed: false,\n              onItemSelect: () => appShellContext.toggleMobileNav(false),\n            }}\n          >\n            {children}\n          </SideNavContext.Provider>\n        </MobileNav>\n      )}\n    </>\n  );\n}\nSideNav.displayName = 'SideNav';\n\nfunction SideNavInner({ children, UNSTABLE_isCollapsible: isCollapsible }: SideNavProps) {\n  const messages = useLocalizedMessages('sideNav');\n  const appShellContext = useContext(AppShellContext);\n  const sideNavRef = useRef<HTMLDivElement>(null);\n  const isOverlaySideNav = useBreakpoint({ max: 'md' }) && isCollapsible !== false;\n  const isCollapsed =\n    typeof isCollapsible === 'object'\n      ? (isCollapsible.isCollapsed ?? appShellContext?.sideNavIsCollapsed ?? isCollapsible.defaultCollapsed)\n      : isCollapsible\n        ? appShellContext?.sideNavIsCollapsed\n        : undefined;\n\n  function handleClose() {\n    appShellContext?.toggleSideNavCollapse(true);\n\n    if (typeof isCollapsible === 'object') {\n      isCollapsible.onCollapseChange?.(true);\n    }\n  }\n\n  const { overlayProps } = useOverlay(\n    {\n      isDismissable: isOverlaySideNav,\n      isOpen: isOverlaySideNav && isCollapsed !== undefined ? !isCollapsed : undefined,\n      onClose: () => handleClose(),\n    },\n    sideNavRef,\n  );\n\n  const resetState = useEffectEvent(() => {\n    if (typeof isCollapsible === 'object' || isCollapsible) {\n      const defaultIsCollapsed = typeof isCollapsible === 'object' ? isCollapsible.defaultCollapsed : false;\n      appShellContext?.toggleSideNavCollapse(defaultIsCollapsed || matchesBreakpoint({ max: 'md' }));\n      if (typeof isCollapsible === 'object') {\n        isCollapsible.onCollapseChange?.(defaultIsCollapsed || matchesBreakpoint({ max: 'md' }));\n      }\n    }\n  });\n\n  // Hydrate state and reset when screen size changes to or from overlay mode\n  useLayoutEffect(() => {\n    resetState();\n  }, [isOverlaySideNav]);\n\n  return (\n    <SideNavContext.Provider\n      value={{\n        isCollapsed: isCollapsed ?? false,\n        onItemSelect: isOverlaySideNav ? handleClose : undefined,\n      }}\n    >\n      <div\n        {...(isOverlaySideNav ? overlayProps : {})}\n        className=\"cim-side-nav\"\n        data-collapsible={typeof isCollapsible === 'object' ? true : isCollapsible || false}\n        data-collapsed={isCollapsed}\n        aria-label={messages.format('srLabel')}\n        ref={sideNavRef}\n      >\n        <div className=\"cim-side-nav-panel\">{children}</div>\n      </div>\n    </SideNavContext.Provider>\n  );\n}\n\nexport interface SideNavListProps {\n  /** Navigation items and sections belonging to the list. */\n  children: ReactNode;\n}\n\n/** Renders a list of navigation items within `SideNav`. */\nexport function SideNavList({ children }: SideNavListProps) {\n  return <nav className=\"cim-side-nav-list\">{children}</nav>;\n}\nSideNavList.displayName = 'SideNavList';\n\nexport interface SideNavListItemProps {\n  /** The text to display as the navigation item label. */\n  children: StringLikeChildren;\n  /** A URL to link to. */\n  href: Href;\n  /** Whether the navigation item represents the current page. */\n  isActive?: boolean;\n  /** An icon displayed before the navigation item label. Required when the side nav is collapsible. */\n  icon?: ReactNode;\n}\n\n/** Renders a single navigation item within `SideNavList`. */\nexport function SideNavListItem({ children, href, isActive, icon }: SideNavListItemProps) {\n  const { isCollapsed, onItemSelect } = useContext(SideNavContext);\n\n  return (\n    <Tooltip label={stringLikeChildrenToString(children)} placement=\"right\" isDisabled={!isCollapsed}>\n      <RACLink href={href} className=\"cim-side-nav-list-item\" data-active={isActive} onPress={onItemSelect}>\n        {icon}\n        <Text as=\"span\" variant=\"medium\" UNSAFE_className=\"cim-side-nav-list-item-label\">\n          {children}\n        </Text>\n      </RACLink>\n    </Tooltip>\n  );\n}\nSideNavListItem.displayName = 'SideNavListItem';\n\nexport interface SideNavListSectionProps {\n  /** Navigation items belonging to the section. */\n  children: ReactNode;\n  /** The content to display as the section title. */\n  label?: string;\n}\n\n/** Renders a section of navigation items within `SideNavList`. */\nexport function SideNavListSection({ children, label }: SideNavListSectionProps) {\n  return (\n    <div className=\"cim-side-nav-list-section\">\n      {label && (\n        <div className=\"cim-side-nav-list-section-header\">\n          <Text as=\"p\" variant=\"small-semibold\" tone=\"subtle\" UNSAFE_className=\"cim-side-nav-list-section-header-label\">\n            {label}\n          </Text>\n        </div>\n      )}\n      {children}\n    </div>\n  );\n}\nSideNavListSection.displayName = 'SideNavListSection';\n"]}

package/dist/commonjs/components/table/contexts/refs.d.ts

@@ -0,0 +1,10 @@
+import { type MutableRefObject, type ReactNode } from 'react';
+export interface TableRefs {
+    header: MutableRefObject<HTMLTableSectionElement | null>;
+}
+export declare function TableRefsProvider({ children, header, }: {
+    children: ReactNode;
+    header: MutableRefObject<HTMLTableSectionElement | null>;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useTableRefs(): TableRefs;
+//# sourceMappingURL=refs.d.ts.map

package/dist/commonjs/components/table/contexts/refs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"refs.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/contexts/refs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,gBAAgB,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAElG,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE,gBAAgB,CAAC,uBAAuB,GAAG,IAAI,CAAC,CAAC;CAC1D;AAID,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,MAAM,GACP,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,gBAAgB,CAAC,uBAAuB,GAAG,IAAI,CAAC,CAAC;CAC1D,2CASA;AAGD,wBAAgB,YAAY,IAAI,SAAS,CAOxC"}

package/dist/commonjs/components/table/contexts/refs.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableRefsProvider = TableRefsProvider;
+exports.useTableRefs = useTableRefs;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const TableRefsContext = (0, react_1.createContext)(null);
+function TableRefsProvider({ children, header, }) {
+    const tableRefs = (0, react_1.useMemo)(() => ({
+        header,
+    }), [header]);
+    return (0, jsx_runtime_1.jsx)(TableRefsContext.Provider, { value: tableRefs, children: children });
+}
+// eslint-disable-next-line react-refresh/only-export-components
+function useTableRefs() {
+    const tableRefs = (0, react_1.useContext)(TableRefsContext);
+    if (!tableRefs) {
+        throw new Error('Cannot use table refs outside of a table');
+    }
+    return tableRefs;
+}
+//# sourceMappingURL=refs.js.map

package/dist/commonjs/components/table/contexts/refs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"refs.js","sourceRoot":"","sources":["../../../../../src/components/table/contexts/refs.tsx"],"names":[],"mappings":";;AAQA,8CAeC;AAGD,oCAOC;;AAjCD,iCAAkG;AAMlG,MAAM,gBAAgB,GAAG,IAAA,qBAAa,EAAmB,IAAI,CAAC,CAAC;AAE/D,SAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,MAAM,GAIP;IACC,MAAM,SAAS,GAAc,IAAA,eAAO,EAClC,GAAG,EAAE,CAAC,CAAC;QACL,MAAM;KACP,CAAC,EACF,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,OAAO,uBAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,SAAS,YAAG,QAAQ,GAA6B,CAAC;AAC7F,CAAC;AAED,gEAAgE;AAChE,SAAgB,YAAY;IAC1B,MAAM,SAAS,GAAG,IAAA,kBAAU,EAAC,gBAAgB,CAAC,CAAC;IAC/C,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,MAAM,IAAI,KAAK,CAAC,0CAA0C,CAAC,CAAC;IAC9D,CAAC;IAED,OAAO,SAAS,CAAC;AACnB,CAAC","sourcesContent":["import { createContext, type MutableRefObject, type ReactNode, useContext, useMemo } from 'react';\n\nexport interface TableRefs {\n  header: MutableRefObject<HTMLTableSectionElement | null>;\n}\n\nconst TableRefsContext = createContext<TableRefs | null>(null);\n\nexport function TableRefsProvider({\n  children,\n  header,\n}: {\n  children: ReactNode;\n  header: MutableRefObject<HTMLTableSectionElement | null>;\n}) {\n  const tableRefs: TableRefs = useMemo(\n    () => ({\n      header,\n    }),\n    [header],\n  );\n\n  return <TableRefsContext.Provider value={tableRefs}>{children}</TableRefsContext.Provider>;\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useTableRefs(): TableRefs {\n  const tableRefs = useContext(TableRefsContext);\n  if (!tableRefs) {\n    throw new Error('Cannot use table refs outside of a table');\n  }\n\n  return tableRefs;\n}\n"]}

package/dist/commonjs/components/table/table-body.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-body.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-body.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAI/C,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,+CAA+C;IAC/C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAgBD;;;;GAIG;AACH,QAAA,MAAM,UAAU,wHAAqC,CAAC;AAEtD,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC"}
+{"version":3,"file":"table-body.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-body.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAM/C,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,+CAA+C;IAC/C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAgBD;;;;GAIG;AACH,QAAA,MAAM,UAAU,wHAAqC,CAAC;AAEtD,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC"}

package/dist/commonjs/components/table/table-body.js

@@ -4,11 +4,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableBody = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const react_aria_1 = require("react-aria");
 const forward_ref_js_1 = require("../../forward-ref.js");
 const localization_provider_js_1 = require("../../i18n/localization-provider.js");
 const spinner_js_1 = require("../spinner/spinner.js");
 const column_collection_js_1 = require("./contexts/column-collection.js");
 const loading_js_1 = require("./contexts/loading.js");
+const row_state_js_1 = require("./contexts/row-state.js");
+const use_table_cell_js_1 = require("./hooks/use-table-cell.js");
 function TableBody({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
     const isLoading = (0, loading_js_1.useTableLoading)();
     return ((0, jsx_runtime_1.jsxs)("tbody", { ...props, ref: ref, className: UNSAFE_className, style: UNSAFE_style, children: [isLoading && (0, jsx_runtime_1.jsx)(TableLoader, {}), children] }));
@@ -21,9 +24,17 @@ function TableBody({ children, UNSAFE_className, UNSAFE_style, ...props }, ref)
 const _TableBody = (0, forward_ref_js_1.forwardRef)(TableBody, 'TableBody');
 exports.TableBody = _TableBody;
 function TableLoader() {
+    const rowKey = (0, react_aria_1.useId)();
+    return ((0, jsx_runtime_1.jsx)(row_state_js_1.TableRowStateProvider, { rowKey: rowKey, children: (0, jsx_runtime_1.jsx)(TableLoaderInner, {}) }));
+}
+function TableLoaderInner() {
     const loaderCellRef = (0, react_1.useRef)(null);
-    const { colSpan } = (0, column_collection_js_1.useFullWidthCell)(loaderCellRef);
+    const { rowKey } = (0, row_state_js_1.useTableRowState)();
+    const { colSpan, columnKey } = (0, column_collection_js_1.useFullWidthCell)(loaderCellRef);
+    // `useTableCell` requires `TableRowStateProvider`
+    const { cellProps } = (0, use_table_cell_js_1.useTableCell)(loaderCellRef, rowKey, columnKey);
+    const columnData = (0, column_collection_js_1.useColumnData)(columnKey);
     const messages = (0, localization_provider_js_1.useLocalizedMessages)('table');
-    return ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { ref: loaderCellRef, className: "cim-table-loading-state", colSpan: colSpan, "data-alignment": "center", children: (0, jsx_runtime_1.jsx)("div", { className: "cim-table-loading-state-overlay", children: (0, jsx_runtime_1.jsx)(spinner_js_1.Spinner, { size: "medium", "aria-label": messages.format('loadingData'), UNSAFE_style: { height: 'min(70%, 48px)' } }) }) }) }, "__cim__internal__loading-state__"));
+    return ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { ...cellProps, ref: loaderCellRef, className: "cim-table-loading-state", "aria-colindex": columnData?.number, colSpan: colSpan, "data-alignment": "center", children: (0, jsx_runtime_1.jsx)("div", { className: "cim-table-loading-state-overlay", children: (0, jsx_runtime_1.jsx)(spinner_js_1.Spinner, { size: "medium", "aria-label": messages.format('loadingData'), UNSAFE_style: { height: 'min(70%, 48px)' } }) }) }) }, "__cim__internal__loading-state__"));
 }
 //# sourceMappingURL=table-body.js.map

package/dist/commonjs/components/table/table-body.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-body.js","sourceRoot":"","sources":["../../../../src/components/table/table-body.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;AAEb,iCAAkE;AAClE,yDAAkD;AAClD,kFAA2E;AAC3E,sDAAgD;AAEhD,0EAAmE;AACnE,sDAAwD;AAOxD,SAAS,SAAS,CAChB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAkB,EACtE,GAA0C;IAE1C,MAAM,SAAS,GAAG,IAAA,4BAAe,GAAE,CAAC;IAEpC,OAAO,CACL,sCAAW,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,aACzE,SAAS,IAAI,uBAAC,WAAW,KAAG,EAC5B,QAAQ,IACH,CACT,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,GAAG,IAAA,2BAAU,EAAC,SAAS,EAAE,WAAW,CAAC,CAAC;AAE/B,+BAAS;AAEhC,SAAS,WAAW;IAClB,MAAM,aAAa,GAAG,IAAA,cAAM,EAAuB,IAAI,CAAC,CAAC;IACzD,MAAM,EAAE,OAAO,EAAE,GAAG,IAAA,uCAAgB,EAAC,aAAa,CAAC,CAAC;IACpD,MAAM,QAAQ,GAAG,IAAA,+CAAoB,EAAC,OAAO,CAAC,CAAC;IAE/C,OAAO,CACL,yCACE,+BAAI,GAAG,EAAE,aAAa,EAAE,SAAS,EAAC,yBAAyB,EAAC,OAAO,EAAE,OAAO,oBAAiB,QAAQ,YACnG,gCAAK,SAAS,EAAC,iCAAiC,YAC9C,uBAAC,oBAAO,IACN,IAAI,EAAC,QAAQ,gBACD,QAAQ,CAAC,MAAM,CAAC,aAAa,CAAC,EAC1C,YAAY,EAAE,EAAE,MAAM,EAAE,gBAAgB,EAAE,GAC1C,GACE,GACH,IATC,kCAAkC,CAUrC,CACN,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\nimport { useRef, type ForwardedRef, type ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/localization-provider.js';\nimport { Spinner } from '../spinner/spinner.js';\nimport type { CommonProps } from '../types.js';\nimport { useFullWidthCell } from './contexts/column-collection.js';\nimport { useTableLoading } from './contexts/loading.js';\n\nexport interface TableBodyProps extends CommonProps {\n  /** The rows that belong to this table body. */\n  children: ReactNode;\n}\n\nfunction TableBody(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: TableBodyProps,\n  ref: ForwardedRef<HTMLTableSectionElement>,\n) {\n  const isLoading = useTableLoading();\n\n  return (\n    <tbody {...props} ref={ref} className={UNSAFE_className} style={UNSAFE_style}>\n      {isLoading && <TableLoader />}\n      {children}\n    </tbody>\n  );\n}\n\n/**\n * Renders a body section within a table.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableBody = forwardRef(TableBody, 'TableBody');\n\nexport { _TableBody as TableBody };\n\nfunction TableLoader() {\n  const loaderCellRef = useRef<HTMLTableCellElement>(null);\n  const { colSpan } = useFullWidthCell(loaderCellRef);\n  const messages = useLocalizedMessages('table');\n\n  return (\n    <tr key=\"__cim__internal__loading-state__\">\n      <td ref={loaderCellRef} className=\"cim-table-loading-state\" colSpan={colSpan} data-alignment=\"center\">\n        <div className=\"cim-table-loading-state-overlay\">\n          <Spinner\n            size=\"medium\"\n            aria-label={messages.format('loadingData')}\n            UNSAFE_style={{ height: 'min(70%, 48px)' }}\n          />\n        </div>\n      </td>\n    </tr>\n  );\n}\n"]}
+{"version":3,"file":"table-body.js","sourceRoot":"","sources":["../../../../src/components/table/table-body.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;AAEb,iCAAkE;AAClE,2CAAmC;AACnC,yDAAkD;AAClD,kFAA2E;AAC3E,sDAAgD;AAEhD,0EAAkF;AAClF,sDAAwD;AACxD,0DAAkF;AAClF,iEAAyD;AAOzD,SAAS,SAAS,CAChB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAkB,EACtE,GAA0C;IAE1C,MAAM,SAAS,GAAG,IAAA,4BAAe,GAAE,CAAC;IAEpC,OAAO,CACL,sCAAW,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,aACzE,SAAS,IAAI,uBAAC,WAAW,KAAG,EAC5B,QAAQ,IACH,CACT,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,GAAG,IAAA,2BAAU,EAAC,SAAS,EAAE,WAAW,CAAC,CAAC;AAE/B,+BAAS;AAEhC,SAAS,WAAW;IAClB,MAAM,MAAM,GAAG,IAAA,kBAAK,GAAE,CAAC;IAEvB,OAAO,CACL,uBAAC,oCAAqB,IAAC,MAAM,EAAE,MAAM,YACnC,uBAAC,gBAAgB,KAAG,GACE,CACzB,CAAC;AACJ,CAAC;AAED,SAAS,gBAAgB;IACvB,MAAM,aAAa,GAAG,IAAA,cAAM,EAAuB,IAAI,CAAC,CAAC;IACzD,MAAM,EAAE,MAAM,EAAE,GAAG,IAAA,+BAAgB,GAAE,CAAC;IACtC,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAA,uCAAgB,EAAC,aAAa,CAAC,CAAC;IAC/D,kDAAkD;IAClD,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,gCAAY,EAAC,aAAa,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC;IACrE,MAAM,UAAU,GAAG,IAAA,oCAAa,EAAC,SAAS,CAAC,CAAC;IAC5C,MAAM,QAAQ,GAAG,IAAA,+CAAoB,EAAC,OAAO,CAAC,CAAC;IAE/C,OAAO,CACL,yCACE,kCACM,SAAS,EACb,GAAG,EAAE,aAAa,EAClB,SAAS,EAAC,yBAAyB,mBACpB,UAAU,EAAE,MAAM,EACjC,OAAO,EAAE,OAAO,oBACD,QAAQ,YAEvB,gCAAK,SAAS,EAAC,iCAAiC,YAC9C,uBAAC,oBAAO,IACN,IAAI,EAAC,QAAQ,gBACD,QAAQ,CAAC,MAAM,CAAC,aAAa,CAAC,EAC1C,YAAY,EAAE,EAAE,MAAM,EAAE,gBAAgB,EAAE,GAC1C,GACE,GACH,IAhBC,kCAAkC,CAiBrC,CACN,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\nimport { useRef, type ForwardedRef, type ReactNode } from 'react';\nimport { useId } from 'react-aria';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/localization-provider.js';\nimport { Spinner } from '../spinner/spinner.js';\nimport type { CommonProps } from '../types.js';\nimport { useColumnData, useFullWidthCell } from './contexts/column-collection.js';\nimport { useTableLoading } from './contexts/loading.js';\nimport { TableRowStateProvider, useTableRowState } from './contexts/row-state.js';\nimport { useTableCell } from './hooks/use-table-cell.js';\n\nexport interface TableBodyProps extends CommonProps {\n  /** The rows that belong to this table body. */\n  children: ReactNode;\n}\n\nfunction TableBody(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: TableBodyProps,\n  ref: ForwardedRef<HTMLTableSectionElement>,\n) {\n  const isLoading = useTableLoading();\n\n  return (\n    <tbody {...props} ref={ref} className={UNSAFE_className} style={UNSAFE_style}>\n      {isLoading && <TableLoader />}\n      {children}\n    </tbody>\n  );\n}\n\n/**\n * Renders a body section within a table.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableBody = forwardRef(TableBody, 'TableBody');\n\nexport { _TableBody as TableBody };\n\nfunction TableLoader() {\n  const rowKey = useId();\n\n  return (\n    <TableRowStateProvider rowKey={rowKey}>\n      <TableLoaderInner />\n    </TableRowStateProvider>\n  );\n}\n\nfunction TableLoaderInner() {\n  const loaderCellRef = useRef<HTMLTableCellElement>(null);\n  const { rowKey } = useTableRowState();\n  const { colSpan, columnKey } = useFullWidthCell(loaderCellRef);\n  // `useTableCell` requires `TableRowStateProvider`\n  const { cellProps } = useTableCell(loaderCellRef, rowKey, columnKey);\n  const columnData = useColumnData(columnKey);\n  const messages = useLocalizedMessages('table');\n\n  return (\n    <tr key=\"__cim__internal__loading-state__\">\n      <td\n        {...cellProps}\n        ref={loaderCellRef}\n        className=\"cim-table-loading-state\"\n        aria-colindex={columnData?.number}\n        colSpan={colSpan}\n        data-alignment=\"center\"\n      >\n        <div className=\"cim-table-loading-state-overlay\">\n          <Spinner\n            size=\"medium\"\n            aria-label={messages.format('loadingData')}\n            UNSAFE_style={{ height: 'min(70%, 48px)' }}\n          />\n        </div>\n      </td>\n    </tr>\n  );\n}\n"]}

package/dist/commonjs/components/table/table-container.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import type { AriaLabelingProps, CommonProps } from '../types.js';
 export interface TableContainerProps extends CommonProps, AriaLabelingProps {
     /** The contents of the container. */

package/dist/commonjs/components/table/table-container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-container.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-container.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAElE,MAAM,WAAW,mBAAoB,SAAQ,WAAW,EAAE,iBAAiB;IACzE,qCAAqC;IACrC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAmBD;;;;GAIG;AACH,QAAA,MAAM,eAAe,qKAA+D,CAAC;AAErF,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,CAAC"}
+{"version":3,"file":"table-container.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-container.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA2D,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIhG,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAGlE,MAAM,WAAW,mBAAoB,SAAQ,WAAW,EAAE,iBAAiB;IACzE,qCAAqC;IACrC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAuED;;;;GAIG;AACH,QAAA,MAAM,eAAe,qKAA+D,CAAC;AAErF,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,CAAC"}

package/dist/commonjs/components/table/table-container.js

@@ -6,12 +6,54 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("@react-aria/utils");
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
 const forward_ref_js_1 = require("../../forward-ref.js");
 const with_style_props_js_1 = require("../../with-style-props.js");
 const focusable_container_js_1 = require("../internal/focusable-container/focusable-container.js");
+const refs_js_1 = require("./contexts/refs.js");
 function TableContainer({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)(focusable_container_js_1.FocusableContainer, { ...props, ref: ref, className: (0, clsx_1.default)('cim-table-container', UNSAFE_className), style: UNSAFE_style, scrollDirection: "horizontal", children: children }));
+    const containerRef = (0, utils_1.useObjectRef)(ref);
+    const headerRef = (0, react_1.useRef)(null);
+    const [headerHeight, setHeaderHeight] = (0, react_1.useState)(40);
+    const [hasClassicHorizontalScrollbar, setHasClassicHorizontalScrollbar] = (0, react_1.useState)(false);
+    const [hasClassicVerticalScrollbar, setHasClassicVerticalScrollbar] = (0, react_1.useState)(false);
+    (0, utils_1.useResizeObserver)({
+        ref: containerRef,
+        onResize: () => {
+            const element = containerRef.current;
+            if (element) {
+                setHasClassicHorizontalScrollbar(element.offsetHeight - element.clientHeight > Number.EPSILON);
+                setHasClassicVerticalScrollbar(element.offsetWidth - element.clientWidth > Number.EPSILON);
+            }
+        },
+    });
+    (0, utils_1.useLayoutEffect)(() => {
+        const headerElement = headerRef.current;
+        const isSSR = typeof window === 'undefined';
+        let observer;
+        if (headerElement && !isSSR) {
+            observer = new window.ResizeObserver((entries) => {
+                if (entries[0]) {
+                    const { target } = entries[0];
+                    setHeaderHeight(target.clientHeight);
+                }
+            });
+            observer.observe(headerElement);
+        }
+        return () => {
+            if (headerElement && observer) {
+                observer.unobserve(headerElement);
+            }
+        };
+    }, [headerRef]);
+    return ((0, jsx_runtime_1.jsx)(refs_js_1.TableRefsProvider, { header: headerRef, children: (0, jsx_runtime_1.jsx)("div", { className: "cim-table-container-outer", children: (0, jsx_runtime_1.jsx)(focusable_container_js_1.FocusableContainer, { ...props, ref: containerRef, className: (0, clsx_1.default)('cim-table-container', UNSAFE_className), style: {
+                    ...UNSAFE_style,
+                    '--cim-table-header-height': `${headerHeight}px`,
+                    '--cim-table-has-classic-v-scrollbar': hasClassicVerticalScrollbar ? 1 : 0,
+                    '--cim-table-has-classic-h-scrollbar': hasClassicHorizontalScrollbar ? 1 : 0,
+                }, scrollDirection: "horizontal", children: children }) }) }));
 }
 /**
  * Renders a scrollable container that allows a table to overflow in a responsive way.

package/dist/commonjs/components/table/table-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-container.js","sourceRoot":"","sources":["../../../../src/components/table/table-container.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,yDAAkD;AAClD,mEAA2D;AAC3D,mGAA4F;AAQ5F,SAAS,cAAc,CACrB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAuB,EAC3E,GAAiC;IAEjC,OAAO,CACL,uBAAC,2CAAkB,OACb,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,qBAAqB,EAAE,gBAAgB,CAAC,EACxD,KAAK,EAAE,YAAY,EACnB,eAAe,EAAC,YAAY,YAE3B,QAAQ,GACU,CACtB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,eAAe,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,cAAc,CAAC,EAAE,gBAAgB,CAAC,CAAC;AAEzD,yCAAc","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FocusableContainer } from '../internal/focusable-container/focusable-container.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\n\nexport interface TableContainerProps extends CommonProps, AriaLabelingProps {\n  /** The contents of the container. */\n  children: ReactNode;\n}\n\nfunction TableContainer(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: TableContainerProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <FocusableContainer\n      {...props}\n      ref={ref}\n      className={clsx('cim-table-container', UNSAFE_className)}\n      style={UNSAFE_style}\n      scrollDirection=\"horizontal\"\n    >\n      {children}\n    </FocusableContainer>\n  );\n}\n\n/**\n * Renders a scrollable container that allows a table to overflow in a responsive way.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableContainer = withStyleProps(forwardRef(TableContainer), 'TableContainer');\n\nexport { _TableContainer as TableContainer };\n"]}
+{"version":3,"file":"table-container.js","sourceRoot":"","sources":["../../../../src/components/table/table-container.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useLayoutEffect, useObjectRef, useResizeObserver } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport { type CSSProperties, useRef, useState, type ForwardedRef, type ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FocusableContainer } from '../internal/focusable-container/focusable-container.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { TableRefsProvider } from './contexts/refs.js';\n\nexport interface TableContainerProps extends CommonProps, AriaLabelingProps {\n  /** The contents of the container. */\n  children: ReactNode;\n}\n\nfunction TableContainer(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: TableContainerProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const containerRef = useObjectRef(ref);\n  const headerRef = useRef<HTMLTableSectionElement | null>(null);\n  const [headerHeight, setHeaderHeight] = useState(40);\n  const [hasClassicHorizontalScrollbar, setHasClassicHorizontalScrollbar] = useState(false);\n  const [hasClassicVerticalScrollbar, setHasClassicVerticalScrollbar] = useState(false);\n\n  useResizeObserver({\n    ref: containerRef,\n    onResize: () => {\n      const element = containerRef.current;\n      if (element) {\n        setHasClassicHorizontalScrollbar(element.offsetHeight - element.clientHeight > Number.EPSILON);\n        setHasClassicVerticalScrollbar(element.offsetWidth - element.clientWidth > Number.EPSILON);\n      }\n    },\n  });\n\n  useLayoutEffect(() => {\n    const headerElement = headerRef.current;\n    const isSSR = typeof window === 'undefined';\n\n    let observer: ResizeObserver | undefined;\n\n    if (headerElement && !isSSR) {\n      observer = new window.ResizeObserver((entries) => {\n        if (entries[0]) {\n          const { target } = entries[0];\n          setHeaderHeight(target.clientHeight);\n        }\n      });\n\n      observer.observe(headerElement);\n    }\n\n    return () => {\n      if (headerElement && observer) {\n        observer.unobserve(headerElement);\n      }\n    };\n  }, [headerRef]);\n\n  return (\n    <TableRefsProvider header={headerRef}>\n      <div className=\"cim-table-container-outer\">\n        <FocusableContainer\n          {...props}\n          ref={containerRef}\n          className={clsx('cim-table-container', UNSAFE_className)}\n          style={\n            {\n              ...UNSAFE_style,\n              '--cim-table-header-height': `${headerHeight}px`,\n              '--cim-table-has-classic-v-scrollbar': hasClassicVerticalScrollbar ? 1 : 0,\n              '--cim-table-has-classic-h-scrollbar': hasClassicHorizontalScrollbar ? 1 : 0,\n            } as CSSProperties\n          }\n          scrollDirection=\"horizontal\"\n        >\n          {children}\n        </FocusableContainer>\n      </div>\n    </TableRefsProvider>\n  );\n}\n\n/**\n * Renders a scrollable container that allows a table to overflow in a responsive way.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableContainer = withStyleProps(forwardRef(TableContainer), 'TableContainer');\n\nexport { _TableContainer as TableContainer };\n"]}

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import type { CommonProps } from '../types.js';
 export interface TableHeaderProps extends CommonProps {
     /** The header rows that belong to this table header. */

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

@@ -1 +1 @@
-{"version":3,"file":"table-header.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,wDAAwD;IACxD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAaD;;;;GAIG;AACH,QAAA,MAAM,YAAY,0HAAyC,CAAC;AAE5D,OAAO,EAAE,YAAY,IAAI,WAAW,EAAE,CAAC"}
+{"version":3,"file":"table-header.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-header.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA8B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,wDAAwD;IACxD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAgBD;;;;GAIG;AACH,QAAA,MAAM,YAAY,0HAAyC,CAAC;AAE5D,OAAO,EAAE,YAAY,IAAI,WAAW,EAAE,CAAC"}

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

@@ -3,9 +3,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("@react-aria/utils");
+const react_1 = require("react");
 const forward_ref_js_1 = require("../../forward-ref.js");
+const refs_js_1 = require("./contexts/refs.js");
 function TableHeader({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)("thead", { ...props, ref: ref, className: UNSAFE_className, style: UNSAFE_style, children: children }));
+    const { header: headerRef } = (0, refs_js_1.useTableRefs)();
+    const mergedRef = (0, utils_1.useObjectRef)((0, react_1.useMemo)(() => (0, utils_1.mergeRefs)(ref, headerRef), [ref, headerRef]));
+    return ((0, jsx_runtime_1.jsx)("thead", { ...props, ref: mergedRef, className: UNSAFE_className, style: UNSAFE_style, children: children }));
 }
 /**
  * Renders a header section within a table.

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

@@ -1 +1 @@
-{"version":3,"file":"table-header.js","sourceRoot":"","sources":["../../../../src/components/table/table-header.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;AAGb,yDAAkD;AAQlD,SAAS,WAAW,CAClB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAoB,EACxE,GAA0C;IAE1C,OAAO,CACL,qCAAW,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,YACzE,QAAQ,GACH,CACT,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,YAAY,GAAG,IAAA,2BAAU,EAAC,WAAW,EAAE,aAAa,CAAC,CAAC;AAEnC,mCAAW","sourcesContent":["'use client';\n\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps } from '../types.js';\n\nexport interface TableHeaderProps extends CommonProps {\n  /** The header rows that belong to this table header. */\n  children: ReactNode;\n}\n\nfunction TableHeader(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: TableHeaderProps,\n  ref: ForwardedRef<HTMLTableSectionElement>,\n) {\n  return (\n    <thead {...props} ref={ref} className={UNSAFE_className} style={UNSAFE_style}>\n      {children}\n    </thead>\n  );\n}\n\n/**\n * Renders a header section within a table.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableHeader = forwardRef(TableHeader, 'TableHeader');\n\nexport { _TableHeader as TableHeader };\n"]}
+{"version":3,"file":"table-header.js","sourceRoot":"","sources":["../../../../src/components/table/table-header.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;AAEb,6CAA4D;AAC5D,iCAAmE;AACnE,yDAAkD;AAElD,gDAAkD;AAOlD,SAAS,WAAW,CAClB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAoB,EACxE,GAA0C;IAE1C,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,sBAAY,GAAE,CAAC;IAC7C,MAAM,SAAS,GAAG,IAAA,oBAAY,EAAC,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,IAAA,iBAAS,EAAC,GAAG,EAAE,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IAE3F,OAAO,CACL,qCAAW,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,YAC/E,QAAQ,GACH,CACT,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,YAAY,GAAG,IAAA,2BAAU,EAAC,WAAW,EAAE,aAAa,CAAC,CAAC;AAEnC,mCAAW","sourcesContent":["'use client';\n\nimport { mergeRefs, useObjectRef } from '@react-aria/utils';\nimport { useMemo, type ForwardedRef, type ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps } from '../types.js';\nimport { useTableRefs } from './contexts/refs.js';\n\nexport interface TableHeaderProps extends CommonProps {\n  /** The header rows that belong to this table header. */\n  children: ReactNode;\n}\n\nfunction TableHeader(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: TableHeaderProps,\n  ref: ForwardedRef<HTMLTableSectionElement>,\n) {\n  const { header: headerRef } = useTableRefs();\n  const mergedRef = useObjectRef(useMemo(() => mergeRefs(ref, headerRef), [ref, headerRef]));\n\n  return (\n    <thead {...props} ref={mergedRef} className={UNSAFE_className} style={UNSAFE_style}>\n      {children}\n    </thead>\n  );\n}\n\n/**\n * Renders a header section within a table.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableHeader = forwardRef(TableHeader, 'TableHeader');\n\nexport { _TableHeader as TableHeader };\n"]}