@cimpress-ui/react 1.30.0 → 1.31.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/dist/commonjs/components/app-header/nav-button.d.ts.map +1 -1
  2. package/dist/commonjs/components/app-header/nav-button.js +3 -1
  3. package/dist/commonjs/components/app-header/nav-button.js.map +1 -1
  4. package/dist/commonjs/components/app-shell/app-shell-context.js.map +1 -1
  5. package/dist/commonjs/components/app-shell/app-shell.d.ts +26 -4
  6. package/dist/commonjs/components/app-shell/app-shell.d.ts.map +1 -1
  7. package/dist/commonjs/components/app-shell/app-shell.js +24 -6
  8. package/dist/commonjs/components/app-shell/app-shell.js.map +1 -1
  9. package/dist/commonjs/components/side-nav/side-nav.d.ts +36 -8
  10. package/dist/commonjs/components/side-nav/side-nav.d.ts.map +1 -1
  11. package/dist/commonjs/components/side-nav/side-nav.js +32 -12
  12. package/dist/commonjs/components/side-nav/side-nav.js.map +1 -1
  13. package/dist/commonjs/components/top-nav/top-nav.d.ts +19 -4
  14. package/dist/commonjs/components/top-nav/top-nav.d.ts.map +1 -1
  15. package/dist/commonjs/components/top-nav/top-nav.js +16 -5
  16. package/dist/commonjs/components/top-nav/top-nav.js.map +1 -1
  17. package/dist/commonjs/i18n/messages/en-US.d.ts.map +1 -1
  18. package/dist/commonjs/i18n/messages/en-US.js +3 -0
  19. package/dist/commonjs/i18n/messages/en-US.js.map +1 -1
  20. package/dist/commonjs/i18n/messages/types.d.ts +12 -0
  21. package/dist/commonjs/i18n/messages/types.d.ts.map +1 -1
  22. package/dist/commonjs/i18n/messages/types.js.map +1 -1
  23. package/dist/commonjs/index.d.ts +3 -3
  24. package/dist/commonjs/index.d.ts.map +1 -1
  25. package/dist/commonjs/index.js +3 -3
  26. package/dist/commonjs/index.js.map +1 -1
  27. package/dist/esm/components/app-header/nav-button.d.ts.map +1 -1
  28. package/dist/esm/components/app-header/nav-button.js +3 -1
  29. package/dist/esm/components/app-header/nav-button.js.map +1 -1
  30. package/dist/esm/components/app-shell/app-shell-context.js.map +1 -1
  31. package/dist/esm/components/app-shell/app-shell.d.ts +26 -4
  32. package/dist/esm/components/app-shell/app-shell.d.ts.map +1 -1
  33. package/dist/esm/components/app-shell/app-shell.js +24 -6
  34. package/dist/esm/components/app-shell/app-shell.js.map +1 -1
  35. package/dist/esm/components/side-nav/side-nav.d.ts +36 -8
  36. package/dist/esm/components/side-nav/side-nav.d.ts.map +1 -1
  37. package/dist/esm/components/side-nav/side-nav.js +28 -8
  38. package/dist/esm/components/side-nav/side-nav.js.map +1 -1
  39. package/dist/esm/components/top-nav/top-nav.d.ts +19 -4
  40. package/dist/esm/components/top-nav/top-nav.d.ts.map +1 -1
  41. package/dist/esm/components/top-nav/top-nav.js +14 -3
  42. package/dist/esm/components/top-nav/top-nav.js.map +1 -1
  43. package/dist/esm/i18n/messages/en-US.d.ts.map +1 -1
  44. package/dist/esm/i18n/messages/en-US.js +3 -0
  45. package/dist/esm/i18n/messages/en-US.js.map +1 -1
  46. package/dist/esm/i18n/messages/types.d.ts +12 -0
  47. package/dist/esm/i18n/messages/types.d.ts.map +1 -1
  48. package/dist/esm/i18n/messages/types.js.map +1 -1
  49. package/dist/esm/index.d.ts +3 -3
  50. package/dist/esm/index.d.ts.map +1 -1
  51. package/dist/esm/index.js +3 -3
  52. package/dist/esm/index.js.map +1 -1
  53. package/dist-styles/core.css +1 -1
  54. package/dist-styles/styles.css +1 -1
  55. package/package.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"nav-button.d.ts","sourceRoot":"","sources":["../../../../src/components/app-header/nav-button.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,gCAAiC,SAAQ,WAAW;IACnE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AA6BD,QAAA,MAAM,4BAA4B,qLAAgF,CAAC;AAEnH,OAAO,EAAE,4BAA4B,IAAI,2BAA2B,EAAE,CAAC"}
1
+ {"version":3,"file":"nav-button.d.ts","sourceRoot":"","sources":["../../../../src/components/app-header/nav-button.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,gCAAiC,SAAQ,WAAW;IACnE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAiCD,QAAA,MAAM,4BAA4B,qLAAgF,CAAC;AAEnH,OAAO,EAAE,4BAA4B,IAAI,2BAA2B,EAAE,CAAC"}
@@ -18,7 +18,9 @@ function UNSTABLE_AppHeaderNavButton({ isOpen, onPress, UNSAFE_className, UNSAFE
18
18
  onPress?.();
19
19
  appShellContext?.toggleSideNav();
20
20
  };
21
- return ((0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { ...props, "aria-expanded": isOpen ?? appShellContext?.mobileNavIsOpen, icon: (0, jsx_runtime_1.jsx)(index_js_1.IconMenu, {}), "aria-label": "Open menu", variant: "tertiary", onPress: handlePress, ref: ref, UNSAFE_className: (0, clsx_1.default)('cim-app-header-nav-toggle', UNSAFE_className), UNSAFE_style: UNSAFE_style }));
21
+ return ((0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { ...props, "aria-expanded": isOpen ??
22
+ (appShellContext?.sideNavIsCollapsible && !appShellContext?.sideNavIsCollapsed) ??
23
+ appShellContext?.mobileNavIsOpen, icon: (0, jsx_runtime_1.jsx)(index_js_1.IconMenu, {}), "aria-label": "Open navigation menu", variant: "tertiary", onPress: handlePress, ref: ref, UNSAFE_className: (0, clsx_1.default)('cim-app-header-nav-toggle', UNSAFE_className), UNSAFE_style: UNSAFE_style }));
22
24
  }
23
25
  const _UNSTABLE_AppHeaderNavButton = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(UNSTABLE_AppHeaderNavButton, 'AppHeaderNavButton'));
24
26
  exports.UNSTABLE_AppHeaderNavButton = _UNSTABLE_AppHeaderNavButton;
@@ -1 +1 @@
1
- {"version":3,"file":"nav-button.js","sourceRoot":"","sources":["../../../../src/components/app-header/nav-button.tsx"],"names":[],"mappings":";;;;;;;AAAA,gDAAwB;AACxB,iCAAsD;AACtD,yDAAkD;AAClD,mDAAgD;AAChD,mEAA2D;AAC3D,4EAAoE;AACpE,6DAAsD;AAQtD,SAAS,2BAA2B,CAClC,EAAE,MAAM,EAAE,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAoC,EAC/F,GAAoC;IAEpC,MAAM,eAAe,GAAG,IAAA,kBAAU,EAAC,sCAAe,CAAC,CAAC;IAEpD,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,OAAO,EAAE,EAAE,CAAC;QACZ,eAAe,EAAE,aAAa,EAAE,CAAC;IACnC,CAAC,CAAC;IAEF,OAAO,CACL,uBAAC,2BAAU,OACL,KAAK,mBACM,MAAM,IAAI,eAAe,EAAE,eAAe,EACzD,IAAI,EAAE,uBAAC,mBAAQ,KAAG,gBAEP,WAAW,EACtB,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,WAAW,EACpB,GAAG,EAAE,GAAG,EACR,gBAAgB,EAAE,IAAA,cAAI,EAAC,2BAA2B,EAAE,gBAAgB,CAAC,EACrE,YAAY,EAAE,YAAY,GAC1B,CACH,CAAC;AACJ,CAAC;AAED,MAAM,4BAA4B,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,2BAA2B,EAAE,oBAAoB,CAAC,CAAC,CAAC;AAE1E,mEAA2B","sourcesContent":["import clsx from 'clsx';\nimport { useContext, type ForwardedRef } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconMenu } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { AppShellContext } from '../app-shell/app-shell-context.js';\nimport { IconButton } from '../button/icon-button.js';\nimport type { CommonProps } from '../types.js';\n\nexport interface UNSTABLE_AppHeaderNavButtonProps extends CommonProps {\n isOpen?: boolean;\n onPress?: () => void;\n}\n\nfunction UNSTABLE_AppHeaderNavButton(\n { isOpen, onPress, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_AppHeaderNavButtonProps,\n ref: ForwardedRef<HTMLButtonElement>,\n) {\n const appShellContext = useContext(AppShellContext);\n\n const handlePress = () => {\n onPress?.();\n appShellContext?.toggleSideNav();\n };\n\n return (\n <IconButton\n {...props}\n aria-expanded={isOpen ?? appShellContext?.mobileNavIsOpen}\n icon={<IconMenu />}\n // TODO\n aria-label=\"Open menu\"\n variant=\"tertiary\"\n onPress={handlePress}\n ref={ref}\n UNSAFE_className={clsx('cim-app-header-nav-toggle', UNSAFE_className)}\n UNSAFE_style={UNSAFE_style}\n />\n );\n}\n\nconst _UNSTABLE_AppHeaderNavButton = withStyleProps(forwardRef(UNSTABLE_AppHeaderNavButton, 'AppHeaderNavButton'));\n\nexport { _UNSTABLE_AppHeaderNavButton as UNSTABLE_AppHeaderNavButton };\n"]}
1
+ {"version":3,"file":"nav-button.js","sourceRoot":"","sources":["../../../../src/components/app-header/nav-button.tsx"],"names":[],"mappings":";;;;;;;AAAA,gDAAwB;AACxB,iCAAsD;AACtD,yDAAkD;AAClD,mDAAgD;AAChD,mEAA2D;AAC3D,4EAAoE;AACpE,6DAAsD;AAQtD,SAAS,2BAA2B,CAClC,EAAE,MAAM,EAAE,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAoC,EAC/F,GAAoC;IAEpC,MAAM,eAAe,GAAG,IAAA,kBAAU,EAAC,sCAAe,CAAC,CAAC;IAEpD,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,OAAO,EAAE,EAAE,CAAC;QACZ,eAAe,EAAE,aAAa,EAAE,CAAC;IACnC,CAAC,CAAC;IAEF,OAAO,CACL,uBAAC,2BAAU,OACL,KAAK,mBAEP,MAAM;YACN,CAAC,eAAe,EAAE,oBAAoB,IAAI,CAAC,eAAe,EAAE,kBAAkB,CAAC;YAC/E,eAAe,EAAE,eAAe,EAElC,IAAI,EAAE,uBAAC,mBAAQ,KAAG,gBAEP,sBAAsB,EACjC,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,WAAW,EACpB,GAAG,EAAE,GAAG,EACR,gBAAgB,EAAE,IAAA,cAAI,EAAC,2BAA2B,EAAE,gBAAgB,CAAC,EACrE,YAAY,EAAE,YAAY,GAC1B,CACH,CAAC;AACJ,CAAC;AAED,MAAM,4BAA4B,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,2BAA2B,EAAE,oBAAoB,CAAC,CAAC,CAAC;AAE1E,mEAA2B","sourcesContent":["import clsx from 'clsx';\nimport { useContext, type ForwardedRef } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconMenu } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { AppShellContext } from '../app-shell/app-shell-context.js';\nimport { IconButton } from '../button/icon-button.js';\nimport type { CommonProps } from '../types.js';\n\nexport interface UNSTABLE_AppHeaderNavButtonProps extends CommonProps {\n isOpen?: boolean;\n onPress?: () => void;\n}\n\nfunction UNSTABLE_AppHeaderNavButton(\n { isOpen, onPress, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_AppHeaderNavButtonProps,\n ref: ForwardedRef<HTMLButtonElement>,\n) {\n const appShellContext = useContext(AppShellContext);\n\n const handlePress = () => {\n onPress?.();\n appShellContext?.toggleSideNav();\n };\n\n return (\n <IconButton\n {...props}\n aria-expanded={\n isOpen ??\n (appShellContext?.sideNavIsCollapsible && !appShellContext?.sideNavIsCollapsed) ??\n appShellContext?.mobileNavIsOpen\n }\n icon={<IconMenu />}\n // TODO\n aria-label=\"Open navigation menu\"\n variant=\"tertiary\"\n onPress={handlePress}\n ref={ref}\n UNSAFE_className={clsx('cim-app-header-nav-toggle', UNSAFE_className)}\n UNSAFE_style={UNSAFE_style}\n />\n );\n}\n\nconst _UNSTABLE_AppHeaderNavButton = withStyleProps(forwardRef(UNSTABLE_AppHeaderNavButton, 'AppHeaderNavButton'));\n\nexport { _UNSTABLE_AppHeaderNavButton as UNSTABLE_AppHeaderNavButton };\n"]}
@@ -1 +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"]}
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,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"]}
@@ -1,11 +1,33 @@
1
1
  import { type ReactNode } from 'react';
2
2
  import type { CommonProps } from '../types.js';
3
- export interface UNSTABLE_AppShellProps extends CommonProps {
3
+ export interface AppShellProps extends CommonProps {
4
+ /**
5
+ * The children of the app shell should be composed using specific components to fill the available layout slots:
6
+ * - `<AppHeader />` for the global header
7
+ * - `<SideNav />` for the side navigation
8
+ * - `<TopNav />` for the top navigation bar
9
+ * - `<AppShellBody />` for the main content area
10
+ *
11
+ * These components should be passed as direct children to correctly populate the app shell layout.
12
+ */
4
13
  children: ReactNode;
5
14
  }
6
- export declare function UNSTABLE_AppShell({ children, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_AppShellProps): import("react/jsx-runtime").JSX.Element;
7
- export interface UNSTABLE_AppShellBodyProps extends CommonProps {
15
+ /**
16
+ * Provides the foundational layout structure for applications, including header, navigation, and main content slots.
17
+ *
18
+ * See [app shell usage guidelines](https://ui.cimpress.io/components/app-shell/).
19
+ */
20
+ export declare function AppShell({ children, UNSAFE_className, UNSAFE_style, ...props }: AppShellProps): import("react/jsx-runtime").JSX.Element;
21
+ export declare namespace AppShell {
22
+ var displayName: string;
23
+ }
24
+ export interface AppShellBodyProps extends Omit<CommonProps, 'id'> {
25
+ /** Main content area of the app shell. */
8
26
  children: ReactNode;
9
27
  }
10
- export declare function UNSTABLE_AppShellBody({ children, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_AppShellBodyProps): import("react/jsx-runtime").JSX.Element;
28
+ /** Renders the main content area within `AppShell`. */
29
+ export declare function AppShellBody({ children, UNSAFE_className, UNSAFE_style, ...props }: AppShellBodyProps): import("react/jsx-runtime").JSX.Element;
30
+ export declare namespace AppShellBody {
31
+ var displayName: string;
32
+ }
11
33
  //# sourceMappingURL=app-shell.d.ts.map
@@ -1 +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"}
1
+ {"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"}
@@ -1,16 +1,28 @@
1
+ 'use client';
1
2
  "use strict";
2
3
  var __importDefault = (this && this.__importDefault) || function (mod) {
3
4
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
5
  };
5
6
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.UNSTABLE_AppShell = UNSTABLE_AppShell;
7
- exports.UNSTABLE_AppShellBody = UNSTABLE_AppShellBody;
7
+ exports.AppShell = AppShell;
8
+ exports.AppShellBody = AppShellBody;
8
9
  const jsx_runtime_1 = require("react/jsx-runtime");
9
10
  const clsx_1 = __importDefault(require("clsx"));
10
11
  const react_1 = require("react");
12
+ const react_aria_1 = require("react-aria");
13
+ const index_js_1 = require("../../i18n/index.js");
11
14
  const breakpoints_js_1 = require("../../utils/breakpoints.js");
15
+ const link_button_js_1 = require("../button/link-button.js");
16
+ const visually_hidden_js_1 = require("../visually-hidden/visually-hidden.js");
12
17
  const app_shell_context_js_1 = require("./app-shell-context.js");
13
- function UNSTABLE_AppShell({ children, UNSAFE_className, UNSAFE_style, ...props }) {
18
+ /**
19
+ * Provides the foundational layout structure for applications, including header, navigation, and main content slots.
20
+ *
21
+ * See [app shell usage guidelines](https://ui.cimpress.io/components/app-shell/).
22
+ */
23
+ function AppShell({ children, UNSAFE_className, UNSAFE_style, ...props }) {
24
+ const messages = (0, index_js_1.useLocalizedMessages)('appShell');
25
+ const mainContentId = 'app-shell-body-' + (0, react_aria_1.useId)();
14
26
  const [sideNavIsCollapsible, setSideNavIsCollapsible] = (0, react_1.useState)(false);
15
27
  const [mobileNavIsOpen, setMobileNavIsOpen] = (0, react_1.useState)(false);
16
28
  const toggleMobileNav = (0, react_1.useCallback)((isOpen) => {
@@ -36,9 +48,15 @@ function UNSTABLE_AppShell({ children, UNSAFE_className, UNSAFE_style, ...props
36
48
  sideNavIsCollapsed,
37
49
  toggleSideNavCollapse,
38
50
  toggleSideNav,
39
- }, children: (0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('cim-app-shell', UNSAFE_className), style: UNSAFE_style, ...props, children: children }) }));
51
+ mainContentId,
52
+ }, 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] }) }));
40
53
  }
41
- function UNSTABLE_AppShellBody({ children, UNSAFE_className, UNSAFE_style, ...props }) {
42
- return ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('cim-app-shell-body', UNSAFE_className), style: UNSAFE_style, ...props, children: children }));
54
+ AppShell.displayName = 'AppShell';
55
+ /** Renders the main content area within `AppShell`. */
56
+ function AppShellBody({ children, UNSAFE_className, UNSAFE_style, ...props }) {
57
+ const appShellContext = (0, react_1.useContext)(app_shell_context_js_1.AppShellContext);
58
+ const mainContentId = appShellContext?.mainContentId;
59
+ 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 }));
43
60
  }
61
+ AppShellBody.displayName = 'AppShellBody';
44
62
  //# sourceMappingURL=app-shell.js.map
@@ -1 +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"]}
1
+ {"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"]}
@@ -1,6 +1,7 @@
1
1
  import { type ReactNode } from 'react';
2
2
  import type { Href, StringLikeChildren } from '../types.js';
3
- export interface UNSTABLE_SideNavProps {
3
+ export interface SideNavProps {
4
+ /** The contents of the side navigation. Typically a `<SideNavList>`. */
4
5
  children: ReactNode;
5
6
  /**
6
7
  * 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 {
16
17
  onCollapseChange?: (isCollapsed: boolean) => void;
17
18
  };
18
19
  }
19
- export declare function UNSTABLE_SideNav({ children, UNSTABLE_isCollapsible: isCollapsible }: UNSTABLE_SideNavProps): import("react/jsx-runtime").JSX.Element;
20
- export interface UNSTABLE_SideNavListProps {
20
+ /**
21
+ * Displays persistent side navigation for applications with multiple sections or pages.
22
+ *
23
+ * See [side nav usage guidelines](https://ui.cimpress.io/components/side-nav/).
24
+ */
25
+ export declare function SideNav({ children, UNSTABLE_isCollapsible: isCollapsible }: SideNavProps): import("react/jsx-runtime").JSX.Element;
26
+ export declare namespace SideNav {
27
+ var displayName: string;
28
+ }
29
+ export interface SideNavListProps {
30
+ /** Navigation items and sections belonging to the list. */
21
31
  children: ReactNode;
22
32
  }
23
- export declare function UNSTABLE_SideNavList({ children }: UNSTABLE_SideNavListProps): import("react/jsx-runtime").JSX.Element;
24
- export interface UNSTABLE_SideNavListItemProps {
33
+ /** Renders a list of navigation items within `SideNav`. */
34
+ export declare function SideNavList({ children }: SideNavListProps): import("react/jsx-runtime").JSX.Element;
35
+ export declare namespace SideNavList {
36
+ var displayName: string;
37
+ }
38
+ export interface SideNavListItemProps {
39
+ /** The text to display as the navigation item label. */
25
40
  children: StringLikeChildren;
41
+ /** A URL to link to. */
26
42
  href: Href;
43
+ /** Whether the navigation item represents the current page. */
27
44
  isActive?: boolean;
45
+ /** An icon displayed before the navigation item label. Required when the side nav is collapsible. */
28
46
  icon?: ReactNode;
29
47
  }
30
- export declare function UNSTABLE_SideNavListItem({ children, href, isActive, icon }: UNSTABLE_SideNavListItemProps): import("react/jsx-runtime").JSX.Element;
31
- export interface UNSTABLE_SideNavListSectionProps {
48
+ /** Renders a single navigation item within `SideNavList`. */
49
+ export declare function SideNavListItem({ children, href, isActive, icon }: SideNavListItemProps): import("react/jsx-runtime").JSX.Element;
50
+ export declare namespace SideNavListItem {
51
+ var displayName: string;
52
+ }
53
+ export interface SideNavListSectionProps {
54
+ /** Navigation items belonging to the section. */
32
55
  children: ReactNode;
56
+ /** The content to display as the section title. */
33
57
  label?: string;
34
58
  }
35
- export declare function UNSTABLE_SideNavListSection({ children, label }: UNSTABLE_SideNavListSectionProps): import("react/jsx-runtime").JSX.Element;
59
+ /** Renders a section of navigation items within `SideNavList`. */
60
+ export declare function SideNavListSection({ children, label }: SideNavListSectionProps): import("react/jsx-runtime").JSX.Element;
61
+ export declare namespace SideNavListSection {
62
+ var displayName: string;
63
+ }
36
64
  //# sourceMappingURL=side-nav.d.ts.map
@@ -1 +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;AAK5D,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,2CAiB1G;AA6DD,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"}
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;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"}
@@ -1,15 +1,16 @@
1
1
  'use client';
2
2
  "use strict";
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.UNSTABLE_SideNav = UNSTABLE_SideNav;
5
- exports.UNSTABLE_SideNavList = UNSTABLE_SideNavList;
6
- exports.UNSTABLE_SideNavListItem = UNSTABLE_SideNavListItem;
7
- exports.UNSTABLE_SideNavListSection = UNSTABLE_SideNavListSection;
4
+ exports.SideNav = SideNav;
5
+ exports.SideNavList = SideNavList;
6
+ exports.SideNavListItem = SideNavListItem;
7
+ exports.SideNavListSection = SideNavListSection;
8
8
  const jsx_runtime_1 = require("react/jsx-runtime");
9
9
  const utils_1 = require("@react-aria/utils");
10
10
  const react_1 = require("react");
11
11
  const react_aria_1 = require("react-aria");
12
12
  const react_aria_components_1 = require("react-aria-components");
13
+ const index_js_1 = require("../../i18n/index.js");
13
14
  const breakpoints_js_1 = require("../../utils/breakpoints.js");
14
15
  const string_like_children_to_string_js_1 = require("../../utils/string-like-children-to-string.js");
15
16
  const app_shell_context_js_1 = require("../app-shell/app-shell-context.js");
@@ -17,14 +18,24 @@ const mobile_nav_js_1 = require("../mobile-nav/mobile-nav.js");
17
18
  const tooltip_js_1 = require("../tooltip/tooltip.js");
18
19
  const text_js_1 = require("../typography/text.js");
19
20
  const SideNavContext = (0, react_1.createContext)({ isCollapsed: false });
20
- function UNSTABLE_SideNav({ children, UNSTABLE_isCollapsible: isCollapsible }) {
21
+ /**
22
+ * Displays persistent side navigation for applications with multiple sections or pages.
23
+ *
24
+ * See [side nav usage guidelines](https://ui.cimpress.io/components/side-nav/).
25
+ */
26
+ function SideNav({ children, UNSTABLE_isCollapsible: isCollapsible }) {
21
27
  const appShellContext = (0, react_1.useContext)(app_shell_context_js_1.AppShellContext);
22
28
  (0, utils_1.useLayoutEffect)(() => {
23
29
  appShellContext?.setSideNavIsCollapsible(typeof isCollapsible === 'object' || isCollapsible || false);
24
30
  }, [isCollapsible, appShellContext]);
25
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SideNavInner, { UNSTABLE_isCollapsible: isCollapsible, children: children }), appShellContext && ((0, jsx_runtime_1.jsx)(mobile_nav_js_1.UNSTABLE_MobileNav, { isOpen: appShellContext.mobileNavIsOpen, onOpenChange: () => appShellContext.toggleMobileNav(false), children: children }))] }));
31
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SideNavInner, { UNSTABLE_isCollapsible: isCollapsible, children: children }), appShellContext && ((0, jsx_runtime_1.jsx)(mobile_nav_js_1.UNSTABLE_MobileNav, { isOpen: appShellContext.mobileNavIsOpen, onOpenChange: () => appShellContext.toggleMobileNav(false), children: (0, jsx_runtime_1.jsx)(SideNavContext.Provider, { value: {
32
+ isCollapsed: false,
33
+ onItemSelect: () => appShellContext.toggleMobileNav(false),
34
+ }, children: children }) }))] }));
26
35
  }
36
+ SideNav.displayName = 'SideNav';
27
37
  function SideNavInner({ children, UNSTABLE_isCollapsible: isCollapsible }) {
38
+ const messages = (0, index_js_1.useLocalizedMessages)('sideNav');
28
39
  const appShellContext = (0, react_1.useContext)(app_shell_context_js_1.AppShellContext);
29
40
  const sideNavRef = (0, react_1.useRef)(null);
30
41
  const isOverlaySideNav = (0, breakpoints_js_1.useBreakpoint)({ max: 'md' }) && isCollapsible !== false;
@@ -57,16 +68,25 @@ function SideNavInner({ children, UNSTABLE_isCollapsible: isCollapsible }) {
57
68
  (0, utils_1.useLayoutEffect)(() => {
58
69
  resetState();
59
70
  }, [isOverlaySideNav]);
60
- return ((0, jsx_runtime_1.jsx)(SideNavContext.Provider, { value: { isCollapsed: isCollapsed ?? false }, 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 }) }) }));
71
+ return ((0, jsx_runtime_1.jsx)(SideNavContext.Provider, { value: {
72
+ isCollapsed: isCollapsed ?? false,
73
+ onItemSelect: isOverlaySideNav ? handleClose : undefined,
74
+ }, 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 }) }) }));
61
75
  }
62
- function UNSTABLE_SideNavList({ children }) {
76
+ /** Renders a list of navigation items within `SideNav`. */
77
+ function SideNavList({ children }) {
63
78
  return (0, jsx_runtime_1.jsx)("nav", { className: "cim-side-nav-list", children: children });
64
79
  }
65
- function UNSTABLE_SideNavListItem({ children, href, isActive, icon }) {
66
- const { isCollapsed } = (0, react_1.useContext)(SideNavContext);
67
- 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, 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 })] }) }));
80
+ SideNavList.displayName = 'SideNavList';
81
+ /** Renders a single navigation item within `SideNavList`. */
82
+ function SideNavListItem({ children, href, isActive, icon }) {
83
+ const { isCollapsed, onItemSelect } = (0, react_1.useContext)(SideNavContext);
84
+ 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 })] }) }));
68
85
  }
69
- function UNSTABLE_SideNavListSection({ children, label }) {
86
+ SideNavListItem.displayName = 'SideNavListItem';
87
+ /** Renders a section of navigation items within `SideNavList`. */
88
+ function SideNavListSection({ children, label }) {
70
89
  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] }));
71
90
  }
91
+ SideNavListSection.displayName = 'SideNavListSection';
72
92
  //# sourceMappingURL=side-nav.js.map
@@ -1 +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<{ isCollapsed: boolean }>({ 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 {children}\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 value={{ isCollapsed: isCollapsed ?? false }}>\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 } = 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}>\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"]}
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 { 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"]}
@@ -1,12 +1,27 @@
1
1
  import type { ReactNode } from 'react';
2
2
  import type { NavigationProps, StringLikeChildren, WithRequired } from '../types.js';
3
- export interface UNSTABLE_TopNavProps {
3
+ export interface TopNavProps {
4
+ /** The contents of the top navigation. Must be one or more of `<TopNavItem>`. */
4
5
  children: ReactNode;
5
6
  }
6
- export declare function UNSTABLE_TopNav({ children }: UNSTABLE_TopNavProps): import("react/jsx-runtime").JSX.Element;
7
- export interface UNSTABLE_TopNavItemProps extends WithRequired<NavigationProps, 'href'> {
7
+ /**
8
+ * Displays horizontal navigation, typically below the app header.
9
+ *
10
+ * See [top nav usage guidelines](https://ui.cimpress.io/components/top-nav/).
11
+ */
12
+ export declare function TopNav({ children, ...props }: TopNavProps): import("react/jsx-runtime").JSX.Element;
13
+ export declare namespace TopNav {
14
+ var displayName: string;
15
+ }
16
+ export interface TopNavItemProps extends WithRequired<NavigationProps, 'href'> {
17
+ /** The text to display as the navigation item label. */
8
18
  children: StringLikeChildren;
19
+ /** Whether the navigation item represents the current page. */
9
20
  isActive?: boolean;
10
21
  }
11
- export declare function UNSTABLE_TopNavItem({ children, href, isActive, ...props }: UNSTABLE_TopNavItemProps): import("react/jsx-runtime").JSX.Element;
22
+ /** Renders a single navigation item within `TopNav`. */
23
+ export declare function TopNavItem({ children, href, isActive, ...props }: TopNavItemProps): import("react/jsx-runtime").JSX.Element;
24
+ export declare namespace TopNavItem {
25
+ var displayName: string;
26
+ }
12
27
  //# sourceMappingURL=top-nav.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"top-nav.d.ts","sourceRoot":"","sources":["../../../../src/components/top-nav/top-nav.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,eAAe,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGrF,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,EAAE,oBAAoB,2CAMjE;AAED,MAAM,WAAW,wBAAyB,SAAQ,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;IACrF,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,mBAAmB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,wBAAwB,2CAgBnG"}
1
+ {"version":3,"file":"top-nav.d.ts","sourceRoot":"","sources":["../../../../src/components/top-nav/top-nav.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,eAAe,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGrF,MAAM,WAAW,WAAW;IAC1B,iFAAiF;IACjF,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAQzD;yBARe,MAAM;;;AAWtB,MAAM,WAAW,eAAgB,SAAQ,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;IAC5E,wDAAwD;IACxD,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wDAAwD;AACxD,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAgBjF;yBAhBe,UAAU"}
@@ -1,18 +1,29 @@
1
+ 'use client';
1
2
  "use strict";
2
3
  var __importDefault = (this && this.__importDefault) || function (mod) {
3
4
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
5
  };
5
6
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.UNSTABLE_TopNav = UNSTABLE_TopNav;
7
- exports.UNSTABLE_TopNavItem = UNSTABLE_TopNavItem;
7
+ exports.TopNav = TopNav;
8
+ exports.TopNavItem = TopNavItem;
8
9
  const jsx_runtime_1 = require("react/jsx-runtime");
9
10
  const clsx_1 = __importDefault(require("clsx"));
10
11
  const react_aria_components_1 = require("react-aria-components");
12
+ const index_js_1 = require("../../i18n/index.js");
11
13
  const text_js_1 = require("../typography/text.js");
12
- function UNSTABLE_TopNav({ children }) {
13
- return ((0, jsx_runtime_1.jsx)("nav", { className: (0, clsx_1.default)('cim-top-nav', 'cim-link-tabs'), children: (0, jsx_runtime_1.jsx)("ul", { className: "cim-tab-list", children: children }) }));
14
+ /**
15
+ * Displays horizontal navigation, typically below the app header.
16
+ *
17
+ * See [top nav usage guidelines](https://ui.cimpress.io/components/top-nav/).
18
+ */
19
+ function TopNav({ children, ...props }) {
20
+ const messages = (0, index_js_1.useLocalizedMessages)('topNav');
21
+ return ((0, jsx_runtime_1.jsx)("nav", { ...props, className: (0, clsx_1.default)('cim-top-nav', 'cim-link-tabs'), "aria-label": messages.format('srLabel'), children: (0, jsx_runtime_1.jsx)("ul", { className: "cim-tab-list", children: children }) }));
14
22
  }
15
- function UNSTABLE_TopNavItem({ children, href, isActive, ...props }) {
23
+ TopNav.displayName = 'TopNav';
24
+ /** Renders a single navigation item within `TopNav`. */
25
+ function TopNavItem({ children, href, isActive, ...props }) {
16
26
  return ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Link, { ...props, className: (0, clsx_1.default)('cim-tab-item', 'cim-link-tab-item'), href: href, "aria-current": isActive ? 'page' : undefined, "data-selected": isActive || undefined, children: (0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "span", variant: "medium-semibold", alignment: "center", children: children }) }) }));
17
27
  }
28
+ TopNavItem.displayName = 'TopNavItem';
18
29
  //# sourceMappingURL=top-nav.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"top-nav.js","sourceRoot":"","sources":["../../../../src/components/top-nav/top-nav.tsx"],"names":[],"mappings":";;;;;AAUA,0CAMC;AAOD,kDAgBC;;AAvCD,gDAAwB;AAExB,iEAAwD;AAExD,mDAA6C;AAM7C,SAAgB,eAAe,CAAC,EAAE,QAAQ,EAAwB;IAChE,OAAO,CACL,gCAAK,SAAS,EAAE,IAAA,cAAI,EAAC,aAAa,EAAE,eAAe,CAAC,YAClD,+BAAI,SAAS,EAAC,cAAc,YAAE,QAAQ,GAAM,GACxC,CACP,CAAC;AACJ,CAAC;AAOD,SAAgB,mBAAmB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAA4B;IAClG,OAAO,CACL,yCACE,uBAAC,4BAAO,OACF,KAAK,EACT,SAAS,EAAE,IAAA,cAAI,EAAC,cAAc,EAAE,mBAAmB,CAAC,EACpD,IAAI,EAAE,IAAI,kBACI,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,mBAC5B,QAAQ,IAAI,SAAS,YAEpC,uBAAC,cAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,iBAAiB,EAAC,SAAS,EAAC,QAAQ,YACzD,QAAQ,GACJ,GACC,GACP,CACN,CAAC;AACJ,CAAC","sourcesContent":["import clsx from 'clsx';\nimport type { ReactNode } from 'react';\nimport { Link as RACLink } from 'react-aria-components';\nimport type { NavigationProps, StringLikeChildren, WithRequired } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface UNSTABLE_TopNavProps {\n children: ReactNode;\n}\n\nexport function UNSTABLE_TopNav({ children }: UNSTABLE_TopNavProps) {\n return (\n <nav className={clsx('cim-top-nav', 'cim-link-tabs')}>\n <ul className=\"cim-tab-list\">{children}</ul>\n </nav>\n );\n}\n\nexport interface UNSTABLE_TopNavItemProps extends WithRequired<NavigationProps, 'href'> {\n children: StringLikeChildren;\n isActive?: boolean;\n}\n\nexport function UNSTABLE_TopNavItem({ children, href, isActive, ...props }: UNSTABLE_TopNavItemProps) {\n return (\n <li>\n <RACLink\n {...props}\n className={clsx('cim-tab-item', 'cim-link-tab-item')}\n href={href}\n aria-current={isActive ? 'page' : undefined}\n data-selected={isActive || undefined}\n >\n <Text as=\"span\" variant=\"medium-semibold\" alignment=\"center\">\n {children}\n </Text>\n </RACLink>\n </li>\n );\n}\n"]}
1
+ {"version":3,"file":"top-nav.js","sourceRoot":"","sources":["../../../../src/components/top-nav/top-nav.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;AAmBb,wBAQC;AAWD,gCAgBC;;AApDD,gDAAwB;AAExB,iEAAwD;AACxD,kDAA2D;AAE3D,mDAA6C;AAO7C;;;;GAIG;AACH,SAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAe;IACxD,MAAM,QAAQ,GAAG,IAAA,+BAAoB,EAAC,QAAQ,CAAC,CAAC;IAEhD,OAAO,CACL,mCAAS,KAAK,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,aAAa,EAAE,eAAe,CAAC,gBAAc,QAAQ,CAAC,MAAM,CAAC,SAAS,CAAC,YACrG,+BAAI,SAAS,EAAC,cAAc,YAAE,QAAQ,GAAM,GACxC,CACP,CAAC;AACJ,CAAC;AACD,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC;AAS9B,wDAAwD;AACxD,SAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAmB;IAChF,OAAO,CACL,yCACE,uBAAC,4BAAO,OACF,KAAK,EACT,SAAS,EAAE,IAAA,cAAI,EAAC,cAAc,EAAE,mBAAmB,CAAC,EACpD,IAAI,EAAE,IAAI,kBACI,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,mBAC5B,QAAQ,IAAI,SAAS,YAEpC,uBAAC,cAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,iBAAiB,EAAC,SAAS,EAAC,QAAQ,YACzD,QAAQ,GACJ,GACC,GACP,CACN,CAAC;AACJ,CAAC;AACD,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ReactNode } from 'react';\nimport { Link as RACLink } from 'react-aria-components';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport type { NavigationProps, StringLikeChildren, WithRequired } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface TopNavProps {\n /** The contents of the top navigation. Must be one or more of `<TopNavItem>`. */\n children: ReactNode;\n}\n\n/**\n * Displays horizontal navigation, typically below the app header.\n *\n * See [top nav usage guidelines](https://ui.cimpress.io/components/top-nav/).\n */\nexport function TopNav({ children, ...props }: TopNavProps) {\n const messages = useLocalizedMessages('topNav');\n\n return (\n <nav {...props} className={clsx('cim-top-nav', 'cim-link-tabs')} aria-label={messages.format('srLabel')}>\n <ul className=\"cim-tab-list\">{children}</ul>\n </nav>\n );\n}\nTopNav.displayName = 'TopNav';\n\nexport interface TopNavItemProps extends WithRequired<NavigationProps, 'href'> {\n /** The text to display as the navigation item label. */\n children: StringLikeChildren;\n /** Whether the navigation item represents the current page. */\n isActive?: boolean;\n}\n\n/** Renders a single navigation item within `TopNav`. */\nexport function TopNavItem({ children, href, isActive, ...props }: TopNavItemProps) {\n return (\n <li>\n <RACLink\n {...props}\n className={clsx('cim-tab-item', 'cim-link-tab-item')}\n href={href}\n aria-current={isActive ? 'page' : undefined}\n data-selected={isActive || undefined}\n >\n <Text as=\"span\" variant=\"medium-semibold\" alignment=\"center\">\n {children}\n </Text>\n </RACLink>\n </li>\n );\n}\nTopNavItem.displayName = 'TopNavItem';\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"en-US.d.ts","sourceRoot":"","sources":["../../../../src/i18n/messages/en-US.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAEpD,+EAA+E;AAC/E,eAAO,MAAM,IAAI,EAAE,iBAsDlB,CAAC"}
1
+ {"version":3,"file":"en-US.d.ts","sourceRoot":"","sources":["../../../../src/i18n/messages/en-US.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAEpD,+EAA+E;AAC/E,eAAO,MAAM,IAAI,EAAE,iBAyDlB,CAAC"}
@@ -5,6 +5,9 @@ exports.enUS = void 0;
5
5
  /** Strings used by Cimpress UI components, localized in the `en-US` locale. */
6
6
  exports.enUS = {
7
7
  common: { clearValue: `Clear`, dismiss: `Dismiss`, clearValueDescription: `Press Escape to clear text.` },
8
+ appShell: { skipToContent: `Skip to content` },
9
+ topNav: { srLabel: `Top` },
10
+ sideNav: { srLabel: `Side` },
8
11
  copyToClipboard: { success: `Copied to clipboard.`, failure: `Failed to copy to clipboard.` },
9
12
  label: { required: `(required)` },
10
13
  datePicker: {
@@ -1 +1 @@
1
- {"version":3,"file":"en-US.js","sourceRoot":"","sources":["../../../../src/i18n/messages/en-US.ts"],"names":[],"mappings":"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","sourcesContent":["// @ts-nocheck\n\nimport type { LocalizedMessages } from './types.js';\n\n/** Strings used by Cimpress UI components, localized in the `en-US` locale. */\nexport const enUS: LocalizedMessages = {\n common: { clearValue: `Clear`, dismiss: `Dismiss`, clearValueDescription: `Press Escape to clear text.` },\n copyToClipboard: { success: `Copied to clipboard.`, failure: `Failed to copy to clipboard.` },\n label: { required: `(required)` },\n datePicker: {\n clearValue: `Clear`,\n openCalendar: `Open calendar`,\n previousMonth: `Previous month`,\n nextMonth: `Next month`,\n switchToYearView: `Year view`,\n previousYear: `Previous year`,\n nextYear: `Next year`,\n switchToMultiYearView: `Multi-year view`,\n previousMultiYearSection: (args, formatter) => `Previous ${formatter.number(args.yearCount)} years`,\n nextMultiYearSection: (args, formatter) => `Next ${formatter.number(args.yearCount)} years`,\n },\n numberField: { decrement: `Decrement`, increment: `Increment` },\n pagination: {\n goToPage: (args, formatter) => `Page ${formatter.number(args.pageNumber)}`,\n previousPage: `Previous page`,\n nextPage: `Next page`,\n selectedPageAnnouncement: (args, formatter) => `Selected page: ${formatter.number(args.pageNumber)}`,\n },\n slider: { rangeStart: `Range start`, rangeEnd: `Range end` },\n tagField: {\n itemsSelected: (args, formatter) =>\n `${formatter.plural(args.selectedItemCount, { one: () => `${formatter.number(args.selectedItemCount)} item selected`, other: () => `${formatter.number(args.selectedItemCount)} items selected` })}`,\n },\n filePicker: {\n chooseFile: `Choose file`,\n noFilesSelected: (args, formatter) =>\n `${formatter.select({ true: `No files selected`, other: `No file selected` }, args.allowsMultiple)}`,\n multipleFilesSelected: (args, formatter) => `${formatter.number(args.fileCount)} files`,\n },\n table: { loadingData: `Loading data`, toggleColumnSortOrder: `Toggle sort order of column:` },\n simpleAuthTool: {\n logIn: `Log in`,\n logOut: `Log out`,\n profileDetails: (args) => `Profile details for ${args.userFullName}`,\n unknownUser: `Unknown User`,\n },\n select: {\n searchLabel: `Search`,\n searchPlaceholder: `Search`,\n noResultsFound: `No results found.`,\n clearSelection: `Clear selection`,\n selectedItems: `selected items`,\n },\n UNSTABLE_collection: {\n loading: `Loading items`,\n loadingMore: `Loading more items`,\n itemsSelected: (args, formatter) =>\n `${formatter.plural(args.selectedItemCount, { one: () => `${formatter.number(args.selectedItemCount)} item selected`, other: () => `${formatter.number(args.selectedItemCount)} items selected` })}`,\n },\n};\n"]}
1
+ {"version":3,"file":"en-US.js","sourceRoot":"","sources":["../../../../src/i18n/messages/en-US.ts"],"names":[],"mappings":"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","sourcesContent":["// @ts-nocheck\n\nimport type { LocalizedMessages } from './types.js';\n\n/** Strings used by Cimpress UI components, localized in the `en-US` locale. */\nexport const enUS: LocalizedMessages = {\n common: { clearValue: `Clear`, dismiss: `Dismiss`, clearValueDescription: `Press Escape to clear text.` },\n appShell: { skipToContent: `Skip to content` },\n topNav: { srLabel: `Top` },\n sideNav: { srLabel: `Side` },\n copyToClipboard: { success: `Copied to clipboard.`, failure: `Failed to copy to clipboard.` },\n label: { required: `(required)` },\n datePicker: {\n clearValue: `Clear`,\n openCalendar: `Open calendar`,\n previousMonth: `Previous month`,\n nextMonth: `Next month`,\n switchToYearView: `Year view`,\n previousYear: `Previous year`,\n nextYear: `Next year`,\n switchToMultiYearView: `Multi-year view`,\n previousMultiYearSection: (args, formatter) => `Previous ${formatter.number(args.yearCount)} years`,\n nextMultiYearSection: (args, formatter) => `Next ${formatter.number(args.yearCount)} years`,\n },\n numberField: { decrement: `Decrement`, increment: `Increment` },\n pagination: {\n goToPage: (args, formatter) => `Page ${formatter.number(args.pageNumber)}`,\n previousPage: `Previous page`,\n nextPage: `Next page`,\n selectedPageAnnouncement: (args, formatter) => `Selected page: ${formatter.number(args.pageNumber)}`,\n },\n slider: { rangeStart: `Range start`, rangeEnd: `Range end` },\n tagField: {\n itemsSelected: (args, formatter) =>\n `${formatter.plural(args.selectedItemCount, { one: () => `${formatter.number(args.selectedItemCount)} item selected`, other: () => `${formatter.number(args.selectedItemCount)} items selected` })}`,\n },\n filePicker: {\n chooseFile: `Choose file`,\n noFilesSelected: (args, formatter) =>\n `${formatter.select({ true: `No files selected`, other: `No file selected` }, args.allowsMultiple)}`,\n multipleFilesSelected: (args, formatter) => `${formatter.number(args.fileCount)} files`,\n },\n table: { loadingData: `Loading data`, toggleColumnSortOrder: `Toggle sort order of column:` },\n simpleAuthTool: {\n logIn: `Log in`,\n logOut: `Log out`,\n profileDetails: (args) => `Profile details for ${args.userFullName}`,\n unknownUser: `Unknown User`,\n },\n select: {\n searchLabel: `Search`,\n searchPlaceholder: `Search`,\n noResultsFound: `No results found.`,\n clearSelection: `Clear selection`,\n selectedItems: `selected items`,\n },\n UNSTABLE_collection: {\n loading: `Loading items`,\n loadingMore: `Loading more items`,\n itemsSelected: (args, formatter) =>\n `${formatter.plural(args.selectedItemCount, { one: () => `${formatter.number(args.selectedItemCount)} item selected`, other: () => `${formatter.number(args.selectedItemCount)} items selected` })}`,\n },\n};\n"]}
@@ -14,6 +14,18 @@ export type LocalizedMessages = {
14
14
  /** A visually hidden label that indicates a text field can be cleared by pressing the Escape key. This text is only announced by screen readers. */
15
15
  clearValueDescription: LocalizedString;
16
16
  };
17
+ appShell: {
18
+ /** Label for a skip link rendered by the app shell that moves keyboard focus to the main content area. */
19
+ skipToContent: LocalizedString;
20
+ };
21
+ topNav: {
22
+ /** An ARIA label for the top navigation landmark. */
23
+ srLabel: LocalizedString;
24
+ };
25
+ sideNav: {
26
+ /** An ARIA label for the side navigation landmark. */
27
+ srLabel: LocalizedString;
28
+ };
17
29
  copyToClipboard: {
18
30
  /** The message displayed in a tooltip when a value is successfully copied to clipboard. */
19
31
  success: LocalizedString;
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/i18n/messages/types.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/i18n/messages/types.ts"],"names":[],"mappings":"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"}