@bitrise/bitkit-v2 0.3.462-beta.2923 → 0.3.462-beta.2927
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.
|
@@ -11,9 +11,10 @@ import UISideNavWorkspaceSelector from "./UISideNavWorkspaceSelector.js";
|
|
|
11
11
|
import { uiSideNavRailWidth } from "../../theme/slot-recipes/UISideNav.recipe.js";
|
|
12
12
|
import { Box } from "@chakra-ui/react/box";
|
|
13
13
|
import { useSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
14
|
-
import { forwardRef, useMemo, useRef, useState } from "react";
|
|
14
|
+
import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
|
|
15
15
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
16
16
|
import { Portal } from "@chakra-ui/react/portal";
|
|
17
|
+
import { mergeRefs } from "@chakra-ui/react";
|
|
17
18
|
import { Drawer } from "@chakra-ui/react/drawer";
|
|
18
19
|
//#region lib/components/BitkitUISideNav/BitkitUISideNav.tsx
|
|
19
20
|
/**
|
|
@@ -57,12 +58,16 @@ var BitkitUISideNav = forwardRef((props, ref) => {
|
|
|
57
58
|
const [focusInside, setFocusInside] = useState(false);
|
|
58
59
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
59
60
|
const menuContainerRef = useRef(null);
|
|
61
|
+
const navRef = useRef(null);
|
|
62
|
+
const setNavRef = useMemo(() => mergeRefs(navRef, ref), [ref]);
|
|
60
63
|
const styles = useSlotRecipe({ key: "uiSideNav" })({ layout: isMobile ? "drawer" : "rail" });
|
|
61
64
|
const expanded = isMobile || (expandedProp ?? (pointerInside || focusInside || menuOpen));
|
|
62
65
|
const tracksPointer = !isMobile && expandedProp === void 0;
|
|
66
|
+
const isInsideNav = (event) => event.target instanceof Node && event.currentTarget.contains(event.target);
|
|
63
67
|
const handleFocus = (event) => {
|
|
64
68
|
onFocus?.(event);
|
|
65
|
-
if (!tracksPointer || !event
|
|
69
|
+
if (!tracksPointer || !isInsideNav(event)) return;
|
|
70
|
+
if (!event.target.matches(":focus-visible")) return;
|
|
66
71
|
setFocusInside(true);
|
|
67
72
|
};
|
|
68
73
|
const handleBlur = (event) => {
|
|
@@ -72,14 +77,30 @@ var BitkitUISideNav = forwardRef((props, ref) => {
|
|
|
72
77
|
};
|
|
73
78
|
const handlePointerEnter = (event) => {
|
|
74
79
|
onPointerEnter?.(event);
|
|
75
|
-
if (tracksPointer) setPointerInside(true);
|
|
80
|
+
if (tracksPointer && isInsideNav(event)) setPointerInside(true);
|
|
76
81
|
};
|
|
77
82
|
const handlePointerLeave = (event) => {
|
|
78
83
|
onPointerLeave?.(event);
|
|
79
|
-
if (tracksPointer) setPointerInside(false);
|
|
84
|
+
if (tracksPointer && isInsideNav(event)) setPointerInside(false);
|
|
80
85
|
};
|
|
86
|
+
useEffect(() => {
|
|
87
|
+
if (!tracksPointer || !focusInside) return void 0;
|
|
88
|
+
const syncFocusInside = () => {
|
|
89
|
+
if (!navRef.current?.contains(document.activeElement)) setFocusInside(false);
|
|
90
|
+
};
|
|
91
|
+
document.addEventListener("focusin", syncFocusInside);
|
|
92
|
+
return () => document.removeEventListener("focusin", syncFocusInside);
|
|
93
|
+
}, [focusInside, tracksPointer]);
|
|
94
|
+
useEffect(() => {
|
|
95
|
+
if (!tracksPointer || !pointerInside) return void 0;
|
|
96
|
+
const syncPointerInside = () => {
|
|
97
|
+
if (!navRef.current?.matches(":hover")) setPointerInside(false);
|
|
98
|
+
};
|
|
99
|
+
document.addEventListener("pointerover", syncPointerInside);
|
|
100
|
+
return () => document.removeEventListener("pointerover", syncPointerInside);
|
|
101
|
+
}, [pointerInside, tracksPointer]);
|
|
81
102
|
const nav = /* @__PURE__ */ jsx(Box, {
|
|
82
|
-
ref,
|
|
103
|
+
ref: setNavRef,
|
|
83
104
|
"aria-label": "Platform navigation",
|
|
84
105
|
asChild: true,
|
|
85
106
|
"data-expanded": expanded ? "" : void 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitUISideNav.js","names":[],"sources":["../../../lib/components/BitkitUISideNav/BitkitUISideNav.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Drawer } from '@chakra-ui/react/drawer';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactNode, useMemo, useRef, useState } from 'react';\n\nimport useResponsive from '../../hooks/useResponsive';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport UISideNavBody from './UISideNavBody';\nimport { UISideNavContextProvider } from './UISideNavContext';\nimport UISideNavFooter from './UISideNavFooter';\nimport UISideNavFooterHeading from './UISideNavFooterHeading';\nimport UISideNavItem from './UISideNavItem';\nimport UISideNavLink from './UISideNavLink';\nimport UISideNavWorkspaceSelector from './UISideNavWorkspaceSelector';\n\nexport interface BitkitUISideNavProps extends Omit<BoxProps, 'children'> {\n children: ReactNode;\n /**\n * Forces the desktop rail open or shut, overriding the pointer and focus behaviour. Leave it\n * unset for the normal rail. Set it to `true` while something the rail does not know about is\n * anchored to it, such as a popover opened from the footer.\n */\n expanded?: boolean;\n /** Mobile drawer visibility. Controlled, because the header's menu button is what opens it. */\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n}\n\n/**\n * The platform's primary navigation. It expects a workspace selector, a body of navigation\n * items, and an optional footer:\n *\n * ```tsx\n * <BitkitUISideNav open={open} onOpenChange={setOpen}>\n * <BitkitUISideNav.WorkspaceSelector\n * workspaces={workspaces}\n * value={workspace}\n * onValueChange={setWorkspace}\n * />\n * <BitkitUISideNav.Body>\n * <BitkitUISideNav.Item href=\"/dashboard\" icon={IconDashboard} selectedIcon={IconDashboardFilled} selected>\n * Dashboard\n * </BitkitUISideNav.Item>\n * </BitkitUISideNav.Body>\n * <BitkitUISideNav.Footer>…</BitkitUISideNav.Footer>\n * </BitkitUISideNav>\n * ```\n *\n * On desktop it is a 72px rail that widens to 256px under the pointer and while anything inside\n * it holds keyboard focus. The rows are always laid out at the full width and clipped, so the\n * labels appear without any text reflowing. It will not collapse while the workspace menu is\n * open. There is no pin: the rail is the resting state.\n *\n * Below the `tablet` breakpoint it becomes an overlay drawer instead, opened by the header rather\n * than by hovering. Pass `open` and `onOpenChange`; they are ignored on desktop.\n *\n * It does not position itself. The consumer decides where it sits and how tall it is, which is\n * what lets a page slot it under a header of any height. The expanded rail overlays the page\n * rather than pushing it, so give it a `position` of your own and reserve 72px beside it.\n *\n * Descendants can read the current state with `useUISideNav()`.\n */\nconst BitkitUISideNav = forwardRef<HTMLElement, BitkitUISideNavProps>((props, ref) => {\n const {\n children,\n css,\n expanded: expandedProp,\n onBlur,\n onFocus,\n onOpenChange,\n onPointerEnter,\n onPointerLeave,\n open = false,\n ...rest\n } = props;\n\n const { isMobile } = useResponsive();\n\n const [pointerInside, setPointerInside] = useState(false);\n const [focusInside, setFocusInside] = useState(false);\n const [menuOpen, setMenuOpen] = useState(false);\n const menuContainerRef = useRef<HTMLDivElement>(null);\n\n const recipe = useSlotRecipe({ key: 'uiSideNav' });\n const styles = recipe({ layout: isMobile ? 'drawer' : 'rail' });\n\n const expanded = isMobile || (expandedProp ?? (pointerInside || focusInside || menuOpen));\n const tracksPointer = !isMobile && expandedProp === undefined;\n\n // The consumer's handlers run first and unconditionally: the rail listens on the same events,\n // it does not own them.\n const handleFocus: NonNullable<BitkitUISideNavProps['onFocus']> = (event) => {\n onFocus?.(event);\n if (!tracksPointer || !event.target.matches(':focus-visible')) return;\n setFocusInside(true);\n };\n\n const handleBlur: NonNullable<BitkitUISideNavProps['onBlur']> = (event) => {\n onBlur?.(event);\n // `blur` also fires when focus moves between two rows. Only a target outside the nav counts.\n if (!tracksPointer || event.currentTarget.contains(event.relatedTarget)) return;\n setFocusInside(false);\n };\n\n const handlePointerEnter: NonNullable<BitkitUISideNavProps['onPointerEnter']> = (event) => {\n onPointerEnter?.(event);\n if (tracksPointer) setPointerInside(true);\n };\n\n const handlePointerLeave: NonNullable<BitkitUISideNavProps['onPointerLeave']> = (event) => {\n onPointerLeave?.(event);\n if (tracksPointer) setPointerInside(false);\n };\n\n const nav = (\n <Box\n ref={ref}\n aria-label=\"Platform navigation\"\n asChild\n data-expanded={expanded ? '' : undefined}\n {...rest}\n css={[styles.root, css]}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onPointerEnter={handlePointerEnter}\n onPointerLeave={handlePointerLeave}\n >\n <nav>{children}</nav>\n </Box>\n );\n\n const context = useMemo(\n () => ({ expanded, isMobile, menuContainerRef, setMenuOpen, styles }),\n [expanded, isMobile, styles],\n );\n\n if (!isMobile) {\n return <UISideNavContextProvider value={context}>{nav}</UISideNavContextProvider>;\n }\n\n return (\n <UISideNavContextProvider value={context}>\n <Drawer.Root onOpenChange={(details) => onOpenChange?.(details.open)} open={open}>\n <Portal>\n <Drawer.Backdrop css={styles.backdrop} />\n <Drawer.Positioner css={styles.positioner}>\n <Drawer.Content ref={menuContainerRef} aria-label=\"Navigation\" css={styles.content}>\n {nav}\n <Box css={styles.closeButton}>\n <BitkitCloseButton\n aria-label=\"Close navigation\"\n colorVariant=\"white\"\n onClick={() => onOpenChange?.(false)}\n size=\"md\"\n />\n </Box>\n </Drawer.Content>\n </Drawer.Positioner>\n </Portal>\n </Drawer.Root>\n </UISideNavContextProvider>\n );\n});\n\nexport { uiSideNavRailWidth } from '../../theme/slot-recipes/UISideNav.recipe';\nexport { type BitkitUISideNavBodyProps } from './UISideNavBody';\nexport { type BitkitUISideNavFooterProps } from './UISideNavFooter';\nexport { type BitkitUISideNavFooterHeadingProps } from './UISideNavFooterHeading';\nexport { type BitkitUISideNavItemProps } from './UISideNavItem';\nexport {\n type BitkitUISideNavLinkAsAnchorProps,\n type BitkitUISideNavLinkAsButtonProps,\n type BitkitUISideNavLinkProps,\n} from './UISideNavLink';\nexport {\n type BitkitUISideNavWorkspaceProps,\n type BitkitUISideNavWorkspaceSelectorProps,\n} from './UISideNavWorkspaceSelector';\n\nBitkitUISideNav.displayName = 'BitkitUISideNav';\n\nexport default withSubComponents(BitkitUISideNav, {\n Body: UISideNavBody,\n Footer: UISideNavFooter,\n FooterHeading: UISideNavFooterHeading,\n Item: UISideNavItem,\n Link: UISideNavLink,\n WorkspaceSelector: UISideNavWorkspaceSelector,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,IAAM,kBAAkB,YAA+C,OAAO,QAAQ;CACpF,MAAM,EACJ,UACA,KACA,UAAU,cACV,QACA,SACA,cACA,gBACA,gBACA,OAAO,OACP,GAAG,SACD;CAEJ,MAAM,EAAE,aAAa,cAAc;CAEnC,MAAM,CAAC,eAAe,oBAAoB,SAAS,KAAK;CACxD,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CACpD,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,mBAAmB,OAAuB,IAAI;CAGpD,MAAM,SADS,cAAc,EAAE,KAAK,YAAY,CACjC,CAAA,CAAO,EAAE,QAAQ,WAAW,WAAW,OAAO,CAAC;CAE9D,MAAM,WAAW,aAAa,iBAAiB,iBAAiB,eAAe;CAC/E,MAAM,gBAAgB,CAAC,YAAY,iBAAiB,KAAA;CAIpD,MAAM,eAA6D,UAAU;EAC3E,UAAU,KAAK;EACf,IAAI,CAAC,iBAAiB,CAAC,MAAM,OAAO,QAAQ,gBAAgB,GAAG;EAC/D,eAAe,IAAI;CACrB;CAEA,MAAM,cAA2D,UAAU;EACzE,SAAS,KAAK;EAEd,IAAI,CAAC,iBAAiB,MAAM,cAAc,SAAS,MAAM,aAAa,GAAG;EACzE,eAAe,KAAK;CACtB;CAEA,MAAM,sBAA2E,UAAU;EACzF,iBAAiB,KAAK;EACtB,IAAI,eAAe,iBAAiB,IAAI;CAC1C;CAEA,MAAM,sBAA2E,UAAU;EACzF,iBAAiB,KAAK;EACtB,IAAI,eAAe,iBAAiB,KAAK;CAC3C;CAEA,MAAM,MACJ,oBAAC,KAAD;EACO;EACL,cAAW;EACX,SAAA;EACA,iBAAe,WAAW,KAAK,KAAA;EAC/B,GAAI;EACJ,KAAK,CAAC,OAAO,MAAM,GAAG;EACtB,QAAQ;EACR,SAAS;EACT,gBAAgB;EAChB,gBAAgB;EAEhB,UAAA,oBAAC,OAAD,EAAM,SAAc,CAAA;CACjB,CAAA;CAGP,MAAM,UAAU,eACP;EAAE;EAAU;EAAU;EAAkB;EAAa;CAAO,IACnE;EAAC;EAAU;EAAU;CAAM,CAC7B;CAEA,IAAI,CAAC,UACH,OAAO,oBAAC,0BAAD;EAA0B,OAAO;EAAU,UAAA;CAA8B,CAAA;CAGlF,OACE,oBAAC,0BAAD;EAA0B,OAAO;EAC/B,UAAA,oBAAC,OAAO,MAAR;GAAa,eAAe,YAAY,eAAe,QAAQ,IAAI;GAAS;GAC1E,UAAA,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,OAAO,UAAR,EAAiB,KAAK,OAAO,SAAW,CAAA,GACxC,oBAAC,OAAO,YAAR;IAAmB,KAAK,OAAO;IAC7B,UAAA,qBAAC,OAAO,SAAR;KAAgB,KAAK;KAAkB,cAAW;KAAa,KAAK,OAAO;KAA3E,UAAA,CACG,KACD,oBAAC,KAAD;MAAK,KAAK,OAAO;MACf,UAAA,oBAAC,mBAAD;OACE,cAAW;OACX,cAAa;OACb,eAAe,eAAe,KAAK;OACnC,MAAK;MACN,CAAA;KACE,CAAA,CACS;;GACC,CAAA,CACb,EAAA,CAAA;EACG,CAAA;CACW,CAAA;AAE9B,CAAC;AAiBD,gBAAgB,cAAc;AAE9B,IAAA,0BAAe,kBAAkB,iBAAiB;CAChD,MAAM;CACN,QAAQ;CACR,eAAe;CACf,MAAM;CACN,MAAM;CACN,mBAAmB;AACrB,CAAC"}
|
|
1
|
+
{"version":3,"file":"BitkitUISideNav.js","names":[],"sources":["../../../lib/components/BitkitUISideNav/BitkitUISideNav.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { mergeRefs } from '@chakra-ui/react';\nimport { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Drawer } from '@chakra-ui/react/drawer';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactNode, useEffect, useMemo, useRef, useState } from 'react';\n\nimport useResponsive from '../../hooks/useResponsive';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport UISideNavBody from './UISideNavBody';\nimport { UISideNavContextProvider } from './UISideNavContext';\nimport UISideNavFooter from './UISideNavFooter';\nimport UISideNavFooterHeading from './UISideNavFooterHeading';\nimport UISideNavItem from './UISideNavItem';\nimport UISideNavLink from './UISideNavLink';\nimport UISideNavWorkspaceSelector from './UISideNavWorkspaceSelector';\n\nexport interface BitkitUISideNavProps extends Omit<BoxProps, 'children'> {\n children: ReactNode;\n /**\n * Forces the desktop rail open or shut, overriding the pointer and focus behaviour. Leave it\n * unset for the normal rail. Set it to `true` while something the rail does not know about is\n * anchored to it, such as a popover opened from the footer.\n */\n expanded?: boolean;\n /** Mobile drawer visibility. Controlled, because the header's menu button is what opens it. */\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n}\n\n/**\n * The platform's primary navigation. It expects a workspace selector, a body of navigation\n * items, and an optional footer:\n *\n * ```tsx\n * <BitkitUISideNav open={open} onOpenChange={setOpen}>\n * <BitkitUISideNav.WorkspaceSelector\n * workspaces={workspaces}\n * value={workspace}\n * onValueChange={setWorkspace}\n * />\n * <BitkitUISideNav.Body>\n * <BitkitUISideNav.Item href=\"/dashboard\" icon={IconDashboard} selectedIcon={IconDashboardFilled} selected>\n * Dashboard\n * </BitkitUISideNav.Item>\n * </BitkitUISideNav.Body>\n * <BitkitUISideNav.Footer>…</BitkitUISideNav.Footer>\n * </BitkitUISideNav>\n * ```\n *\n * On desktop it is a 72px rail that widens to 256px under the pointer and while anything inside\n * it holds keyboard focus. The rows are always laid out at the full width and clipped, so the\n * labels appear without any text reflowing. It will not collapse while the workspace menu is\n * open. There is no pin: the rail is the resting state.\n *\n * Below the `tablet` breakpoint it becomes an overlay drawer instead, opened by the header rather\n * than by hovering. Pass `open` and `onOpenChange`; they are ignored on desktop.\n *\n * It does not position itself. The consumer decides where it sits and how tall it is, which is\n * what lets a page slot it under a header of any height. The expanded rail overlays the page\n * rather than pushing it, so give it a `position` of your own and reserve 72px beside it.\n *\n * Descendants can read the current state with `useUISideNav()`.\n */\nconst BitkitUISideNav = forwardRef<HTMLElement, BitkitUISideNavProps>((props, ref) => {\n const {\n children,\n css,\n expanded: expandedProp,\n onBlur,\n onFocus,\n onOpenChange,\n onPointerEnter,\n onPointerLeave,\n open = false,\n ...rest\n } = props;\n\n const { isMobile } = useResponsive();\n\n const [pointerInside, setPointerInside] = useState(false);\n const [focusInside, setFocusInside] = useState(false);\n const [menuOpen, setMenuOpen] = useState(false);\n const menuContainerRef = useRef<HTMLDivElement>(null);\n const navRef = useRef<HTMLElement>(null);\n const setNavRef = useMemo(() => mergeRefs(navRef, ref), [ref]);\n\n const recipe = useSlotRecipe({ key: 'uiSideNav' });\n const styles = recipe({ layout: isMobile ? 'drawer' : 'rail' });\n\n const expanded = isMobile || (expandedProp ?? (pointerInside || focusInside || menuOpen));\n const tracksPointer = !isMobile && expandedProp === undefined;\n\n // React bubbles a portalled descendant's events through the React tree rather than the DOM\n // tree, so a dialog opened from a footer row reaches these handlers while sitting under\n // `body`. Only a target that is really a DOM descendant counts as being inside the rail.\n const isInsideNav = (event: { currentTarget: Node; target: EventTarget | null }) =>\n event.target instanceof Node && event.currentTarget.contains(event.target);\n\n // The consumer's handlers run first and unconditionally: the rail listens on the same events,\n // it does not own them.\n const handleFocus: NonNullable<BitkitUISideNavProps['onFocus']> = (event) => {\n onFocus?.(event);\n if (!tracksPointer || !isInsideNav(event)) return;\n if (!event.target.matches(':focus-visible')) return;\n setFocusInside(true);\n };\n\n const handleBlur: NonNullable<BitkitUISideNavProps['onBlur']> = (event) => {\n onBlur?.(event);\n // `blur` also fires when focus moves between two rows. Only a target outside the nav counts.\n if (!tracksPointer || event.currentTarget.contains(event.relatedTarget)) return;\n setFocusInside(false);\n };\n\n const handlePointerEnter: NonNullable<BitkitUISideNavProps['onPointerEnter']> = (event) => {\n onPointerEnter?.(event);\n if (tracksPointer && isInsideNav(event)) setPointerInside(true);\n };\n\n const handlePointerLeave: NonNullable<BitkitUISideNavProps['onPointerLeave']> = (event) => {\n onPointerLeave?.(event);\n if (tracksPointer && isInsideNav(event)) setPointerInside(false);\n };\n\n // A blur does not always reach the nav. Focus can move into a portal, or the focused row can be\n // unmounted, and then the rail would stay open with nothing to close it. While focus counts as\n // inside, re-check every focus change against the document rather than trusting blur alone.\n useEffect(() => {\n if (!tracksPointer || !focusInside) return undefined;\n\n const syncFocusInside = () => {\n if (!navRef.current?.contains(document.activeElement)) setFocusInside(false);\n };\n\n document.addEventListener('focusin', syncFocusInside);\n return () => document.removeEventListener('focusin', syncFocusInside);\n }, [focusInside, tracksPointer]);\n\n // React derives pointer enter and leave from the React tree too, so moving from a row onto a\n // portalled descendant never counts as leaving and `onPointerLeave` never fires. While the\n // pointer counts as inside, read the nav's own `:hover` on every pointer target change rather\n // than waiting for a leave that may not come.\n useEffect(() => {\n if (!tracksPointer || !pointerInside) return undefined;\n\n const syncPointerInside = () => {\n if (!navRef.current?.matches(':hover')) setPointerInside(false);\n };\n\n document.addEventListener('pointerover', syncPointerInside);\n return () => document.removeEventListener('pointerover', syncPointerInside);\n }, [pointerInside, tracksPointer]);\n\n const nav = (\n <Box\n ref={setNavRef}\n aria-label=\"Platform navigation\"\n asChild\n data-expanded={expanded ? '' : undefined}\n {...rest}\n css={[styles.root, css]}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onPointerEnter={handlePointerEnter}\n onPointerLeave={handlePointerLeave}\n >\n <nav>{children}</nav>\n </Box>\n );\n\n const context = useMemo(\n () => ({ expanded, isMobile, menuContainerRef, setMenuOpen, styles }),\n [expanded, isMobile, styles],\n );\n\n if (!isMobile) {\n return <UISideNavContextProvider value={context}>{nav}</UISideNavContextProvider>;\n }\n\n return (\n <UISideNavContextProvider value={context}>\n <Drawer.Root onOpenChange={(details) => onOpenChange?.(details.open)} open={open}>\n <Portal>\n <Drawer.Backdrop css={styles.backdrop} />\n <Drawer.Positioner css={styles.positioner}>\n <Drawer.Content ref={menuContainerRef} aria-label=\"Navigation\" css={styles.content}>\n {nav}\n <Box css={styles.closeButton}>\n <BitkitCloseButton\n aria-label=\"Close navigation\"\n colorVariant=\"white\"\n onClick={() => onOpenChange?.(false)}\n size=\"md\"\n />\n </Box>\n </Drawer.Content>\n </Drawer.Positioner>\n </Portal>\n </Drawer.Root>\n </UISideNavContextProvider>\n );\n});\n\nexport { uiSideNavRailWidth } from '../../theme/slot-recipes/UISideNav.recipe';\nexport { type BitkitUISideNavBodyProps } from './UISideNavBody';\nexport { type BitkitUISideNavFooterProps } from './UISideNavFooter';\nexport { type BitkitUISideNavFooterHeadingProps } from './UISideNavFooterHeading';\nexport { type BitkitUISideNavItemProps } from './UISideNavItem';\nexport {\n type BitkitUISideNavLinkAsAnchorProps,\n type BitkitUISideNavLinkAsButtonProps,\n type BitkitUISideNavLinkProps,\n} from './UISideNavLink';\nexport {\n type BitkitUISideNavWorkspaceProps,\n type BitkitUISideNavWorkspaceSelectorProps,\n} from './UISideNavWorkspaceSelector';\n\nBitkitUISideNav.displayName = 'BitkitUISideNav';\n\nexport default withSubComponents(BitkitUISideNav, {\n Body: UISideNavBody,\n Footer: UISideNavFooter,\n FooterHeading: UISideNavFooterHeading,\n Item: UISideNavItem,\n Link: UISideNavLink,\n WorkspaceSelector: UISideNavWorkspaceSelector,\n});\n"],"mappings":"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"}
|