@cimpress-ui/react 1.29.0 → 1.30.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/commonjs/components/app-header/nav-button.d.ts.map +1 -1
- package/dist/commonjs/components/app-header/nav-button.js +3 -1
- package/dist/commonjs/components/app-header/nav-button.js.map +1 -1
- package/dist/commonjs/components/side-nav/side-nav.d.ts.map +1 -1
- package/dist/commonjs/components/side-nav/side-nav.js +10 -4
- package/dist/commonjs/components/side-nav/side-nav.js.map +1 -1
- package/dist/esm/components/app-header/nav-button.d.ts.map +1 -1
- package/dist/esm/components/app-header/nav-button.js +3 -1
- package/dist/esm/components/app-header/nav-button.js.map +1 -1
- package/dist/esm/components/side-nav/side-nav.d.ts.map +1 -1
- package/dist/esm/components/side-nav/side-nav.js +10 -4
- package/dist/esm/components/side-nav/side-nav.js.map +1 -1
- package/dist-styles/core.css +1 -1
- package/dist-styles/styles.css +1 -1
- 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;
|
|
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 ??
|
|
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,
|
|
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":"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;
|
|
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"}
|
|
@@ -22,7 +22,10 @@ function UNSTABLE_SideNav({ children, UNSTABLE_isCollapsible: isCollapsible }) {
|
|
|
22
22
|
(0, utils_1.useLayoutEffect)(() => {
|
|
23
23
|
appShellContext?.setSideNavIsCollapsible(typeof isCollapsible === 'object' || isCollapsible || false);
|
|
24
24
|
}, [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:
|
|
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: (0, jsx_runtime_1.jsx)(SideNavContext.Provider, { value: {
|
|
26
|
+
isCollapsed: false,
|
|
27
|
+
onItemSelect: () => appShellContext.toggleMobileNav(false),
|
|
28
|
+
}, children: children }) }))] }));
|
|
26
29
|
}
|
|
27
30
|
function SideNavInner({ children, UNSTABLE_isCollapsible: isCollapsible }) {
|
|
28
31
|
const appShellContext = (0, react_1.useContext)(app_shell_context_js_1.AppShellContext);
|
|
@@ -57,14 +60,17 @@ function SideNavInner({ children, UNSTABLE_isCollapsible: isCollapsible }) {
|
|
|
57
60
|
(0, utils_1.useLayoutEffect)(() => {
|
|
58
61
|
resetState();
|
|
59
62
|
}, [isOverlaySideNav]);
|
|
60
|
-
return ((0, jsx_runtime_1.jsx)(SideNavContext.Provider, { value: {
|
|
63
|
+
return ((0, jsx_runtime_1.jsx)(SideNavContext.Provider, { value: {
|
|
64
|
+
isCollapsed: isCollapsed ?? false,
|
|
65
|
+
onItemSelect: isOverlaySideNav ? handleClose : undefined,
|
|
66
|
+
}, 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 }) }) }));
|
|
61
67
|
}
|
|
62
68
|
function UNSTABLE_SideNavList({ children }) {
|
|
63
69
|
return (0, jsx_runtime_1.jsx)("nav", { className: "cim-side-nav-list", children: children });
|
|
64
70
|
}
|
|
65
71
|
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 })] }) }));
|
|
72
|
+
const { isCollapsed, onItemSelect } = (0, react_1.useContext)(SideNavContext);
|
|
73
|
+
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
74
|
}
|
|
69
75
|
function UNSTABLE_SideNavListSection({ children, label }) {
|
|
70
76
|
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] }));
|
|
@@ -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 {children}\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 { 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"]}
|
|
@@ -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;
|
|
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"}
|
|
@@ -12,7 +12,9 @@ function UNSTABLE_AppHeaderNavButton({ isOpen, onPress, UNSAFE_className, UNSAFE
|
|
|
12
12
|
onPress?.();
|
|
13
13
|
appShellContext?.toggleSideNav();
|
|
14
14
|
};
|
|
15
|
-
return (_jsx(IconButton, { ...props, "aria-expanded": isOpen ??
|
|
15
|
+
return (_jsx(IconButton, { ...props, "aria-expanded": isOpen ??
|
|
16
|
+
(appShellContext?.sideNavIsCollapsible && !appShellContext?.sideNavIsCollapsed) ??
|
|
17
|
+
appShellContext?.mobileNavIsOpen, icon: _jsx(IconMenu, {}), "aria-label": "Open navigation menu", variant: "tertiary", onPress: handlePress, ref: ref, UNSAFE_className: clsx('cim-app-header-nav-toggle', UNSAFE_className), UNSAFE_style: UNSAFE_style }));
|
|
16
18
|
}
|
|
17
19
|
const _UNSTABLE_AppHeaderNavButton = withStyleProps(forwardRef(UNSTABLE_AppHeaderNavButton, 'AppHeaderNavButton'));
|
|
18
20
|
export { _UNSTABLE_AppHeaderNavButton as UNSTABLE_AppHeaderNavButton };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nav-button.js","sourceRoot":"","sources":["../../../../src/components/app-header/nav-button.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAQtD,SAAS,2BAA2B,CAClC,EAAE,MAAM,EAAE,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAoC,EAC/F,GAAoC;IAEpC,MAAM,eAAe,GAAG,UAAU,CAAC,eAAe,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,KAAC,UAAU,OACL,KAAK,
|
|
1
|
+
{"version":3,"file":"nav-button.js","sourceRoot":"","sources":["../../../../src/components/app-header/nav-button.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAQtD,SAAS,2BAA2B,CAClC,EAAE,MAAM,EAAE,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAoC,EAC/F,GAAoC;IAEpC,MAAM,eAAe,GAAG,UAAU,CAAC,eAAe,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,KAAC,UAAU,OACL,KAAK,mBAEP,MAAM;YACN,CAAC,eAAe,EAAE,oBAAoB,IAAI,CAAC,eAAe,EAAE,kBAAkB,CAAC;YAC/E,eAAe,EAAE,eAAe,EAElC,IAAI,EAAE,KAAC,QAAQ,KAAG,gBAEP,sBAAsB,EACjC,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,WAAW,EACpB,GAAG,EAAE,GAAG,EACR,gBAAgB,EAAE,IAAI,CAAC,2BAA2B,EAAE,gBAAgB,CAAC,EACrE,YAAY,EAAE,YAAY,GAC1B,CACH,CAAC;AACJ,CAAC;AAED,MAAM,4BAA4B,GAAG,cAAc,CAAC,UAAU,CAAC,2BAA2B,EAAE,oBAAoB,CAAC,CAAC,CAAC;AAEnH,OAAO,EAAE,4BAA4B,IAAI,2BAA2B,EAAE,CAAC","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":"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;
|
|
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"}
|
|
@@ -16,7 +16,10 @@ export function UNSTABLE_SideNav({ children, UNSTABLE_isCollapsible: isCollapsib
|
|
|
16
16
|
useLayoutEffect(() => {
|
|
17
17
|
appShellContext?.setSideNavIsCollapsible(typeof isCollapsible === 'object' || isCollapsible || false);
|
|
18
18
|
}, [isCollapsible, appShellContext]);
|
|
19
|
-
return (_jsxs(_Fragment, { children: [_jsx(SideNavInner, { UNSTABLE_isCollapsible: isCollapsible, children: children }), appShellContext && (_jsx(MobileNav, { isOpen: appShellContext.mobileNavIsOpen, onOpenChange: () => appShellContext.toggleMobileNav(false), children:
|
|
19
|
+
return (_jsxs(_Fragment, { children: [_jsx(SideNavInner, { UNSTABLE_isCollapsible: isCollapsible, children: children }), appShellContext && (_jsx(MobileNav, { isOpen: appShellContext.mobileNavIsOpen, onOpenChange: () => appShellContext.toggleMobileNav(false), children: _jsx(SideNavContext.Provider, { value: {
|
|
20
|
+
isCollapsed: false,
|
|
21
|
+
onItemSelect: () => appShellContext.toggleMobileNav(false),
|
|
22
|
+
}, children: children }) }))] }));
|
|
20
23
|
}
|
|
21
24
|
function SideNavInner({ children, UNSTABLE_isCollapsible: isCollapsible }) {
|
|
22
25
|
const appShellContext = useContext(AppShellContext);
|
|
@@ -51,14 +54,17 @@ function SideNavInner({ children, UNSTABLE_isCollapsible: isCollapsible }) {
|
|
|
51
54
|
useLayoutEffect(() => {
|
|
52
55
|
resetState();
|
|
53
56
|
}, [isOverlaySideNav]);
|
|
54
|
-
return (_jsx(SideNavContext.Provider, { value: {
|
|
57
|
+
return (_jsx(SideNavContext.Provider, { value: {
|
|
58
|
+
isCollapsed: isCollapsed ?? false,
|
|
59
|
+
onItemSelect: isOverlaySideNav ? handleClose : undefined,
|
|
60
|
+
}, children: _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: _jsx("div", { className: "cim-side-nav-panel", children: children }) }) }));
|
|
55
61
|
}
|
|
56
62
|
export function UNSTABLE_SideNavList({ children }) {
|
|
57
63
|
return _jsx("nav", { className: "cim-side-nav-list", children: children });
|
|
58
64
|
}
|
|
59
65
|
export function UNSTABLE_SideNavListItem({ children, href, isActive, icon }) {
|
|
60
|
-
const { isCollapsed } = useContext(SideNavContext);
|
|
61
|
-
return (_jsx(Tooltip, { label: stringLikeChildrenToString(children), placement: "right", isDisabled: !isCollapsed, children: _jsxs(RACLink, { href: href, className: "cim-side-nav-list-item", "data-active": isActive, children: [icon, _jsx(Text, { as: "span", variant: "medium", UNSAFE_className: "cim-side-nav-list-item-label", children: children })] }) }));
|
|
66
|
+
const { isCollapsed, onItemSelect } = useContext(SideNavContext);
|
|
67
|
+
return (_jsx(Tooltip, { label: stringLikeChildrenToString(children), placement: "right", isDisabled: !isCollapsed, children: _jsxs(RACLink, { href: href, className: "cim-side-nav-list-item", "data-active": isActive, onPress: onItemSelect, children: [icon, _jsx(Text, { as: "span", variant: "medium", UNSAFE_className: "cim-side-nav-list-item-label", children: children })] }) }));
|
|
62
68
|
}
|
|
63
69
|
export function UNSTABLE_SideNavListSection({ children, label }) {
|
|
64
70
|
return (_jsxs("div", { className: "cim-side-nav-list-section", children: [label && (_jsx("div", { className: "cim-side-nav-list-section-header", children: _jsx(Text, { as: "p", variant: "small-semibold", tone: "subtle", UNSAFE_className: "cim-side-nav-list-section-header-label", children: label }) })), children] }));
|
|
@@ -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 {children}\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 { 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"]}
|