@schemavaults/ui 0.43.0 → 0.44.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/components/layout/dashboard-layout/DashboardLayoutProps.d.ts +6 -0
- package/dist/components/layout/dashboard-layout/dashboard-layout.d.ts +1 -7
- package/dist/components/layout/dashboard-layout/dashboard-layout.js +13 -5
- package/dist/components/layout/dashboard-layout/dashboard-layout.js.map +1 -1
- package/dist/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-header.js +35 -29
- package/dist/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-header.js.map +1 -1
- package/dist/components/layout/dashboard-layout/dashboard-sidebar/useCloseDashboardSidebarOnRouteChange.js +8 -2
- package/dist/components/layout/dashboard-layout/dashboard-sidebar/useCloseDashboardSidebarOnRouteChange.js.map +1 -1
- package/package.json +3 -3
|
@@ -14,4 +14,10 @@ export interface DashboardLayoutProps extends PropsWithChildren {
|
|
|
14
14
|
sizing?: DashboardLayoutSidebarSizing;
|
|
15
15
|
onOpenSidebar?: () => void;
|
|
16
16
|
onCloseSidebar?: () => void;
|
|
17
|
+
/**
|
|
18
|
+
* Optional `usePathname` hook (e.g. from `next/navigation`). When provided,
|
|
19
|
+
* the mobile sidebar will automatically close whenever the pathname
|
|
20
|
+
* changes. Pass the hook itself, not its return value.
|
|
21
|
+
*/
|
|
22
|
+
usePathname?: () => string;
|
|
17
23
|
}
|
|
@@ -1,11 +1,5 @@
|
|
|
1
1
|
import type { ReactElement } from "react";
|
|
2
2
|
import type { DashboardLayoutProps } from "./DashboardLayoutProps";
|
|
3
3
|
export type { DashboardLayoutProps };
|
|
4
|
-
|
|
5
|
-
*
|
|
6
|
-
* @param param0 DashboardLayoutProps
|
|
7
|
-
*
|
|
8
|
-
* @returns A layout component wrapping the page content of 'children'
|
|
9
|
-
*/
|
|
10
|
-
export declare function DashboardLayout({ children, wordmark, logo, Link, brandHref, topBarTitle, ...props }: DashboardLayoutProps): ReactElement;
|
|
4
|
+
export declare function DashboardLayout({ children, wordmark, logo, Link, brandHref, topBarTitle, usePathname, ...props }: DashboardLayoutProps): ReactElement;
|
|
11
5
|
export default DashboardLayout;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import DashboardSidebar, { DashboardLayoutSidebarTrigger, DashboardSidebarContextProvider, useDashboardSidebarOpenState, useDashboardSidebarSizing, } from "./dashboard-sidebar";
|
|
3
|
+
import DashboardSidebar, { DashboardLayoutSidebarTrigger, DashboardSidebarContextProvider, useCloseDashboardSidebarOnRouteChange, useDashboardSidebarOpenState, useDashboardSidebarSizing, } from "./dashboard-sidebar";
|
|
4
4
|
import { Separator } from "../../ui/separator";
|
|
5
5
|
import DashboardLayoutMainContentContainer from "./dashboard-layout-main-content-container";
|
|
6
6
|
import { cn } from "../../../lib/utils";
|
|
@@ -10,7 +10,15 @@ import { cn } from "../../../lib/utils";
|
|
|
10
10
|
*
|
|
11
11
|
* @returns A layout component wrapping the page content of 'children'
|
|
12
12
|
*/
|
|
13
|
-
|
|
13
|
+
// Sibling component that subscribes to `usePathname` and closes the mobile
|
|
14
|
+
// sidebar on navigation. Rendered conditionally only when consumers opt in
|
|
15
|
+
// by passing `usePathname` — keeping the hook call out of the parent avoids
|
|
16
|
+
// the rule-of-hooks issue of a conditionally-called hook.
|
|
17
|
+
function AutoCloseSidebarOnNavigation({ usePathname, }) {
|
|
18
|
+
useCloseDashboardSidebarOnRouteChange(usePathname);
|
|
19
|
+
return null;
|
|
20
|
+
}
|
|
21
|
+
export function DashboardLayout({ children, wordmark, logo, Link, brandHref, topBarTitle, usePathname, ...props }) {
|
|
14
22
|
const size = useDashboardSidebarSizing();
|
|
15
23
|
function HeaderBarPageIdentifierComponent() {
|
|
16
24
|
if (typeof topBarTitle === "string") {
|
|
@@ -22,9 +30,9 @@ export function DashboardLayout({ children, wordmark, logo, Link, brandHref, top
|
|
|
22
30
|
}
|
|
23
31
|
}
|
|
24
32
|
const TopBarButtonsComponent = props.topBarButtons;
|
|
25
|
-
return (
|
|
26
|
-
|
|
27
|
-
|
|
33
|
+
return (_jsxs(DashboardSidebarContextProvider, { sidebarItems: props.sidebarItems, sizing: props.sizing, onOpenSidebar: props.onOpenSidebar, onCloseSidebar: props.onCloseSidebar, children: [typeof usePathname === "function" && (_jsx(AutoCloseSidebarOnNavigation, { usePathname: usePathname })), _jsxs("div", { id: "dashboard-layout-container", className: "w-full h-dvh min-h-dvh", children: [_jsx(DashboardSidebar, { wordmark: wordmark, Link: Link, brandHref: brandHref, logo: logo, sidebarFooterContent: props.sidebarFooterContent }), _jsxs(DashboardLayoutMainContentContainer, { children: [_jsx("header", { id: "dashboard-layout-main-content-header", className: cn("sticky top-0", "flex shrink-0 items-center gap-2", "transition-[width,height] ease-linear", "bg-background", "border-b border-border", size.sidebar_and_header_z_index_classname), style: {
|
|
34
|
+
height: size.header_height,
|
|
35
|
+
}, children: _jsxs("div", { className: "flex flex-row justify-between items-center gap-2 px-4 w-full", children: [_jsx(DashboardLayoutSidebarTrigger, {}), _jsx(Separator, { orientation: "vertical", className: "mr-2 data-[orientation=vertical]:h-4" }), _jsx(HeaderBarPageIdentifierComponent, {}), _jsx("div", { role: "none", className: "grow" }), typeof TopBarButtonsComponent === "function" && (_jsx(TopBarButtonsComponent, { useDashboardSidebarSizing: useDashboardSidebarSizing, useDashboardSidebarOpenState: useDashboardSidebarOpenState, Link: Link }))] }) }), children] })] })] }));
|
|
28
36
|
}
|
|
29
37
|
export default DashboardLayout;
|
|
30
38
|
//# sourceMappingURL=dashboard-layout.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dashboard-layout.js","sourceRoot":"","sources":["../../../../src/components/layout/dashboard-layout/dashboard-layout.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,gBAAgB,EAAE,EACvB,6BAA6B,EAC7B,+BAA+B,EAC/B,4BAA4B,EAC5B,yBAAyB,GAC1B,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,mCAAmC,MAAM,2CAA2C,CAAC;AAE5F,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAIjC;;;;;GAKG;AACH,MAAM,UAAU,eAAe,CAAC,EAC9B,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,WAAW,EACX,GAAG,KAAK,EACa;IACrB,MAAM,IAAI,GAAG,yBAAyB,EAAE,CAAC;IAEzC,SAAS,gCAAgC;QACvC,IAAI,OAAO,WAAW,KAAK,QAAQ,EAAE,CAAC;YACpC,OAAO,aAAI,SAAS,EAAC,mBAAmB,YAAE,WAAW,GAAM,CAAC;QAC9D,CAAC;aAAM,CAAC;YACN,MAAM,2BAA2B,GAAG,WAAW,CAAC;YAChD,OAAO,CACL,KAAC,2BAA2B,IAC1B,yBAAyB,EAAE,yBAAyB,EACpD,4BAA4B,EAAE,4BAA4B,EAC1D,IAAI,EAAE,IAAI,GACV,CACH,CAAC;QACJ,CAAC;IACH,CAAC;IAED,MAAM,sBAAsB,GAEZ,KAAK,CAAC,aAAa,CAAC;IAEpC,OAAO,CACL,
|
|
1
|
+
{"version":3,"file":"dashboard-layout.js","sourceRoot":"","sources":["../../../../src/components/layout/dashboard-layout/dashboard-layout.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,gBAAgB,EAAE,EACvB,6BAA6B,EAC7B,+BAA+B,EAC/B,qCAAqC,EACrC,4BAA4B,EAC5B,yBAAyB,GAC1B,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,mCAAmC,MAAM,2CAA2C,CAAC;AAE5F,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAIjC;;;;;GAKG;AACH,2EAA2E;AAC3E,2EAA2E;AAC3E,4EAA4E;AAC5E,0DAA0D;AAC1D,SAAS,4BAA4B,CAAC,EACpC,WAAW,GAGZ;IACC,qCAAqC,CAAC,WAAW,CAAC,CAAC;IACnD,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,EAC9B,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,WAAW,EACX,WAAW,EACX,GAAG,KAAK,EACa;IACrB,MAAM,IAAI,GAAG,yBAAyB,EAAE,CAAC;IAEzC,SAAS,gCAAgC;QACvC,IAAI,OAAO,WAAW,KAAK,QAAQ,EAAE,CAAC;YACpC,OAAO,aAAI,SAAS,EAAC,mBAAmB,YAAE,WAAW,GAAM,CAAC;QAC9D,CAAC;aAAM,CAAC;YACN,MAAM,2BAA2B,GAAG,WAAW,CAAC;YAChD,OAAO,CACL,KAAC,2BAA2B,IAC1B,yBAAyB,EAAE,yBAAyB,EACpD,4BAA4B,EAAE,4BAA4B,EAC1D,IAAI,EAAE,IAAI,GACV,CACH,CAAC;QACJ,CAAC;IACH,CAAC;IAED,MAAM,sBAAsB,GAEZ,KAAK,CAAC,aAAa,CAAC;IAEpC,OAAO,CACL,MAAC,+BAA+B,IAC9B,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,aAAa,EAAE,KAAK,CAAC,aAAa,EAClC,cAAc,EAAE,KAAK,CAAC,cAAc,aAEnC,OAAO,WAAW,KAAK,UAAU,IAAI,CACpC,KAAC,4BAA4B,IAAC,WAAW,EAAE,WAAW,GAAI,CAC3D,EACD,eAAK,EAAE,EAAC,4BAA4B,EAAC,SAAS,EAAC,wBAAwB,aACrE,KAAC,gBAAgB,IACf,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,oBAAoB,EAAE,KAAK,CAAC,oBAAoB,GAChD,EACF,MAAC,mCAAmC,eAClC,iBACE,EAAE,EAAC,sCAAsC,EACzC,SAAS,EAAE,EAAE,CACX,cAAc,EACd,kCAAkC,EAClC,uCAAuC,EACvC,eAAe,EACf,wBAAwB,EACxB,IAAI,CAAC,oCAAoC,CAC1C,EACD,KAAK,EAAE;oCACL,MAAM,EAAE,IAAI,CAAC,aAAa;iCAC3B,YAED,eAAK,SAAS,EAAC,8DAA8D,aAC3E,KAAC,6BAA6B,KAAG,EACjC,KAAC,SAAS,IACR,WAAW,EAAC,UAAU,EACtB,SAAS,EAAC,sCAAsC,GAChD,EACF,KAAC,gCAAgC,KAAG,EACpC,cAAK,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,GAAG,EACnC,OAAO,sBAAsB,KAAK,UAAU,IAAI,CAC/C,KAAC,sBAAsB,IACrB,yBAAyB,EAAE,yBAAyB,EACpD,4BAA4B,EAAE,4BAA4B,EAC1D,IAAI,EAAE,IAAI,GACV,CACH,IACG,GACC,EACR,QAAQ,IAC2B,IAClC,IAC0B,CACnC,CAAC;AACJ,CAAC;AAED,eAAe,eAAe,CAAC"}
|
package/dist/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-header.js
CHANGED
|
@@ -5,41 +5,47 @@ import toggleDashboardLayoutCollapsedTransitionTime, { toggleDashboardLayoutColl
|
|
|
5
5
|
import useDashboardSidebarOpenState from "./useDashboardSidebarOpenState";
|
|
6
6
|
import { cn } from "../../../../lib/utils";
|
|
7
7
|
import { useDashboardSidebarSizing } from "./useDashboardSidebarSizing";
|
|
8
|
+
// Declared at module scope so its component identity is stable across
|
|
9
|
+
// renders of DashboardSidebarHeader. Previously this was an inner function
|
|
10
|
+
// declaration, which produced a new component type on every parent render
|
|
11
|
+
// and caused React to unmount/remount the wordmark — re-triggering the
|
|
12
|
+
// AnimatePresence enter animation on every navigation when used inside a
|
|
13
|
+
// Next.js layout.tsx.
|
|
14
|
+
function AnimatedBrandWordmark({ wordmark, Link, brandHref, }) {
|
|
15
|
+
return (_jsx(m.div, { className: "will-change-transform", variants: {
|
|
16
|
+
exit: {
|
|
17
|
+
opacity: 0,
|
|
18
|
+
scale: 0,
|
|
19
|
+
transitionEnd: {
|
|
20
|
+
display: "none",
|
|
21
|
+
},
|
|
22
|
+
width: 0,
|
|
23
|
+
transition: {
|
|
24
|
+
duration: toggleDashboardLayoutCollapsedTransitionTime,
|
|
25
|
+
ease: toggleDashboardLayoutCollapsedTransitionEasing,
|
|
26
|
+
delay: 0,
|
|
27
|
+
},
|
|
28
|
+
},
|
|
29
|
+
enter: {
|
|
30
|
+
opacity: 1,
|
|
31
|
+
scale: 1,
|
|
32
|
+
display: "block",
|
|
33
|
+
width: "auto",
|
|
34
|
+
transition: {
|
|
35
|
+
duration: toggleDashboardLayoutCollapsedTransitionTime,
|
|
36
|
+
ease: toggleDashboardLayoutCollapsedTransitionEasing,
|
|
37
|
+
delay: toggleDashboardLayoutCollapsedTransitionTime / 1.5,
|
|
38
|
+
},
|
|
39
|
+
},
|
|
40
|
+
}, initial: "exit", animate: "enter", exit: "exit", layout: true, children: _jsx(Link, { href: brandHref, children: wordmark }) }));
|
|
41
|
+
}
|
|
8
42
|
export function DashboardSidebarHeader({ wordmark, logo, Link, brandHref, }) {
|
|
9
43
|
const size = useDashboardSidebarSizing();
|
|
10
44
|
const { open, mobile } = useDashboardSidebarOpenState();
|
|
11
45
|
const showWordmark = mobile || open;
|
|
12
|
-
function AnimatedBrandWordmark() {
|
|
13
|
-
return (_jsx(m.div, { className: "will-change-transform", variants: {
|
|
14
|
-
exit: {
|
|
15
|
-
opacity: 0,
|
|
16
|
-
scale: 0,
|
|
17
|
-
transitionEnd: {
|
|
18
|
-
display: "none",
|
|
19
|
-
},
|
|
20
|
-
width: 0,
|
|
21
|
-
transition: {
|
|
22
|
-
duration: toggleDashboardLayoutCollapsedTransitionTime,
|
|
23
|
-
ease: toggleDashboardLayoutCollapsedTransitionEasing,
|
|
24
|
-
delay: 0,
|
|
25
|
-
},
|
|
26
|
-
},
|
|
27
|
-
enter: {
|
|
28
|
-
opacity: 1,
|
|
29
|
-
scale: 1,
|
|
30
|
-
display: "block",
|
|
31
|
-
width: "auto",
|
|
32
|
-
transition: {
|
|
33
|
-
duration: toggleDashboardLayoutCollapsedTransitionTime,
|
|
34
|
-
ease: toggleDashboardLayoutCollapsedTransitionEasing,
|
|
35
|
-
delay: toggleDashboardLayoutCollapsedTransitionTime / 1.5,
|
|
36
|
-
},
|
|
37
|
-
},
|
|
38
|
-
}, initial: "exit", animate: "enter", exit: "exit", layout: true, children: _jsx(Link, { href: brandHref, children: wordmark }) }));
|
|
39
|
-
}
|
|
40
46
|
return (_jsxs(m.header, { layout: true, style: {
|
|
41
47
|
height: size.header_height,
|
|
42
|
-
}, className: cn("w-full", "flex flex-row flex-nowrap", "justify-start items-center bg-background", "overflow-hidden", "flex-shrink-0", "border-b"), children: [_jsx(Link, { href: brandHref, className: cn(size.desktop_collapsed_width_classname, size.header_height_classname, "flex items-center justify-center", "flex-shrink-0"), children: logo }), _jsx(AnimatePresence, { initial: !mobile, children: showWordmark && (_jsx(AnimatedBrandWordmark, {}, "animated-brand-wordmark")) })] }));
|
|
48
|
+
}, className: cn("w-full", "flex flex-row flex-nowrap", "justify-start items-center bg-background", "overflow-hidden", "flex-shrink-0", "border-b"), children: [_jsx(Link, { href: brandHref, className: cn(size.desktop_collapsed_width_classname, size.header_height_classname, "flex items-center justify-center", "flex-shrink-0"), children: logo }), _jsx(AnimatePresence, { initial: !mobile, children: showWordmark && (_jsx(AnimatedBrandWordmark, { wordmark: wordmark, Link: Link, brandHref: brandHref }, "animated-brand-wordmark")) })] }));
|
|
43
49
|
}
|
|
44
50
|
export default DashboardSidebarHeader;
|
|
45
51
|
//# sourceMappingURL=dashboard-sidebar-header.js.map
|
package/dist/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-header.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dashboard-sidebar-header.js","sourceRoot":"","sources":["../../../../../src/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-header.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,MAAM,iBAAiB,CAAC;AAErD,OAAO,4CAA4C,EAAE,EACnD,8CAA8C,GAC/C,MAAM,sDAAsD,CAAC;AAC9D,OAAO,4BAA4B,MAAM,gCAAgC,CAAC;AAC1E,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;
|
|
1
|
+
{"version":3,"file":"dashboard-sidebar-header.js","sourceRoot":"","sources":["../../../../../src/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-header.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,MAAM,iBAAiB,CAAC;AAErD,OAAO,4CAA4C,EAAE,EACnD,8CAA8C,GAC/C,MAAM,sDAAsD,CAAC;AAC9D,OAAO,4BAA4B,MAAM,gCAAgC,CAAC;AAC1E,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAgBxE,sEAAsE;AACtE,2EAA2E;AAC3E,0EAA0E;AAC1E,uEAAuE;AACvE,yEAAyE;AACzE,sBAAsB;AACtB,SAAS,qBAAqB,CAAC,EAC7B,QAAQ,EACR,IAAI,EACJ,SAAS,GACkB;IAC3B,OAAO,CACL,KAAC,CAAC,CAAC,GAAG,IACJ,SAAS,EAAC,uBAAuB,EACjC,QAAQ,EAAE;YACR,IAAI,EAAE;gBACJ,OAAO,EAAE,CAAC;gBACV,KAAK,EAAE,CAAC;gBACR,aAAa,EAAE;oBACb,OAAO,EAAE,MAAM;iBAChB;gBACD,KAAK,EAAE,CAAC;gBACR,UAAU,EAAE;oBACV,QAAQ,EAAE,4CAA4C;oBACtD,IAAI,EAAE,8CAA8C;oBACpD,KAAK,EAAE,CAAC;iBACT;aACF;YACD,KAAK,EAAE;gBACL,OAAO,EAAE,CAAC;gBACV,KAAK,EAAE,CAAC;gBACR,OAAO,EAAE,OAAO;gBAChB,KAAK,EAAE,MAAM;gBACb,UAAU,EAAE;oBACV,QAAQ,EAAE,4CAA4C;oBACtD,IAAI,EAAE,8CAA8C;oBACpD,KAAK,EAAE,4CAA4C,GAAG,GAAG;iBAC1D;aACF;SACF,EACD,OAAO,EAAC,MAAM,EACd,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,MAAM,EACX,MAAM,kBAEN,KAAC,IAAI,IAAC,IAAI,EAAE,SAAS,YAAG,QAAQ,GAAQ,GAClC,CACT,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,sBAAsB,CAAC,EACrC,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,SAAS,GACyB;IAClC,MAAM,IAAI,GAAG,yBAAyB,EAAE,CAAC;IACzC,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,4BAA4B,EAAE,CAAC;IACxD,MAAM,YAAY,GAAY,MAAM,IAAI,IAAI,CAAC;IAE7C,OAAO,CACL,MAAC,CAAC,CAAC,MAAM,IACP,MAAM,QACN,KAAK,EAAE;YACL,MAAM,EAAE,IAAI,CAAC,aAAa;SAC3B,EACD,SAAS,EAAE,EAAE,CACX,QAAQ,EACR,2BAA2B,EAC3B,0CAA0C,EAC1C,iBAAiB,EACjB,eAAe,EACf,UAAU,CACX,aAED,KAAC,IAAI,IAAC,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,CAClC,IAAI,CAAC,iCAAiC,EACtC,IAAI,CAAC,uBAAuB,EAC5B,kCAAkC,EAClC,eAAe,CAChB,YAAG,IAAI,GAAQ,EAEhB,KAAC,eAAe,IAAC,OAAO,EAAE,CAAC,MAAM,YAC9B,YAAY,IAAI,CACf,KAAC,qBAAqB,IAEpB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,IAHhB,yBAAyB,CAI7B,CACH,GACe,IACT,CACZ,CAAC;AACJ,CAAC;AAED,eAAe,sBAAsB,CAAC"}
|
|
@@ -3,20 +3,26 @@ import { useEffect } from "react";
|
|
|
3
3
|
import useDashboardSidebarOpenState from "./useDashboardSidebarOpenState";
|
|
4
4
|
import useDashboardSidebarOpenStateDispatch from "./useDashboardSidebarOpenStateDispatch";
|
|
5
5
|
import useDebug from "../../../hooks/use-debug";
|
|
6
|
+
// Auto-closes the sidebar on route changes. Only acts on mobile — on desktop
|
|
7
|
+
// the sidebar's expanded/collapsed state is the user's preference and should
|
|
8
|
+
// persist across navigation. Closing the desktop sidebar on every route
|
|
9
|
+
// change would also re-animate the wordmark (via AnimatePresence) every
|
|
10
|
+
// navigation, which is undesirable.
|
|
6
11
|
export function useCloseDashboardSidebarOnRouteChange(usePathname) {
|
|
7
12
|
const debug = useDebug();
|
|
8
13
|
const pathname = usePathname();
|
|
9
14
|
const state = useDashboardSidebarOpenState();
|
|
10
15
|
const open = state.open;
|
|
16
|
+
const mobile = state.mobile ?? false;
|
|
11
17
|
const setOpen = useDashboardSidebarOpenStateDispatch();
|
|
12
18
|
useEffect(() => {
|
|
13
|
-
if (open) {
|
|
19
|
+
if (mobile && open) {
|
|
14
20
|
if (debug) {
|
|
15
21
|
console.log("[useCloseDashboardSidebarOnRouteChange] Closing sidebar...");
|
|
16
22
|
}
|
|
17
23
|
setOpen(false);
|
|
18
24
|
}
|
|
19
|
-
}, [pathname, open, setOpen, debug]);
|
|
25
|
+
}, [pathname, open, mobile, setOpen, debug]);
|
|
20
26
|
}
|
|
21
27
|
export default useCloseDashboardSidebarOnRouteChange;
|
|
22
28
|
//# sourceMappingURL=useCloseDashboardSidebarOnRouteChange.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCloseDashboardSidebarOnRouteChange.js","sourceRoot":"","sources":["../../../../../src/components/layout/dashboard-layout/dashboard-sidebar/useCloseDashboardSidebarOnRouteChange.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,4BAA4B,MAAM,gCAAgC,CAAC;AAC1E,OAAO,oCAAoC,MAAM,wCAAwC,CAAC;AAC1F,OAAO,QAAQ,MAAM,8BAA8B,CAAC;AAEpD,MAAM,UAAU,qCAAqC,CACnD,WAAyB;IAEzB,MAAM,KAAK,GAAY,QAAQ,EAAE,CAAC;IAClC,MAAM,QAAQ,GAAW,WAAW,EAAE,CAAC;IACvC,MAAM,KAAK,GAAG,4BAA4B,EAAE,CAAC;IAC7C,MAAM,IAAI,GAAY,KAAK,CAAC,IAAI,CAAC;IACjC,MAAM,OAAO,GAAG,oCAAoC,EAAE,CAAC;IAEvD,SAAS,CAAC,GAAS,EAAE;QACnB,IAAI,IAAI,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"useCloseDashboardSidebarOnRouteChange.js","sourceRoot":"","sources":["../../../../../src/components/layout/dashboard-layout/dashboard-sidebar/useCloseDashboardSidebarOnRouteChange.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,4BAA4B,MAAM,gCAAgC,CAAC;AAC1E,OAAO,oCAAoC,MAAM,wCAAwC,CAAC;AAC1F,OAAO,QAAQ,MAAM,8BAA8B,CAAC;AAEpD,6EAA6E;AAC7E,6EAA6E;AAC7E,wEAAwE;AACxE,wEAAwE;AACxE,oCAAoC;AACpC,MAAM,UAAU,qCAAqC,CACnD,WAAyB;IAEzB,MAAM,KAAK,GAAY,QAAQ,EAAE,CAAC;IAClC,MAAM,QAAQ,GAAW,WAAW,EAAE,CAAC;IACvC,MAAM,KAAK,GAAG,4BAA4B,EAAE,CAAC;IAC7C,MAAM,IAAI,GAAY,KAAK,CAAC,IAAI,CAAC;IACjC,MAAM,MAAM,GAAY,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC;IAC9C,MAAM,OAAO,GAAG,oCAAoC,EAAE,CAAC;IAEvD,SAAS,CAAC,GAAS,EAAE;QACnB,IAAI,MAAM,IAAI,IAAI,EAAE,CAAC;YACnB,IAAI,KAAK,EAAE,CAAC;gBACV,OAAO,CAAC,GAAG,CACT,4DAA4D,CAC7D,CAAC;YACJ,CAAC;YACD,OAAO,CAAC,KAAK,CAAC,CAAC;QACjB,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;AAC/C,CAAC;AAED,eAAe,qCAAqC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@schemavaults/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.44.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"description": "React.js UI components for SchemaVaults frontend applications",
|
|
@@ -9,8 +9,8 @@
|
|
|
9
9
|
"url": "https://github.com/schemavaults/ui.git"
|
|
10
10
|
},
|
|
11
11
|
"peerDependencies": {
|
|
12
|
-
"react": "
|
|
13
|
-
"react-dom": "
|
|
12
|
+
"react": "19.2.6",
|
|
13
|
+
"react-dom": "19.2.6"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
16
|
"@emotion/is-prop-valid": "1.4.0",
|