@schemavaults/ui 0.101.0 → 0.104.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.
- package/dist/components/layout/dashboard-layout/DashboardLayoutProps.d.ts +19 -0
- package/dist/components/layout/dashboard-layout/dashboard-layout-main-content-container.js +7 -1
- package/dist/components/layout/dashboard-layout/dashboard-layout-main-content-container.js.map +1 -1
- package/dist/components/layout/dashboard-layout/dashboard-layout-reduced-motion.d.ts +43 -0
- package/dist/components/layout/dashboard-layout/dashboard-layout-reduced-motion.js +41 -0
- package/dist/components/layout/dashboard-layout/dashboard-layout-reduced-motion.js.map +1 -0
- package/dist/components/layout/dashboard-layout/dashboard-layout.d.ts +1 -1
- package/dist/components/layout/dashboard-layout/dashboard-layout.js +22 -8
- package/dist/components/layout/dashboard-layout/dashboard-layout.js.map +1 -1
- package/dist/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-content.js +10 -3
- package/dist/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-content.js.map +1 -1
- package/dist/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-header.js +14 -6
- package/dist/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-header.js.map +1 -1
- package/dist/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-item-group-renderer.d.ts +12 -2
- package/dist/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-item-group-renderer.js +92 -33
- package/dist/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-item-group-renderer.js.map +1 -1
- package/dist/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-item-renderer.js +11 -4
- package/dist/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-item-renderer.js.map +1 -1
- package/dist/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-layout.js +6 -1
- package/dist/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-layout.js.map +1 -1
- package/dist/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-sizing.d.ts +46 -3
- package/dist/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-sizing.js +16 -0
- package/dist/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-sizing.js.map +1 -1
- package/dist/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar.js +9 -1
- package/dist/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar.js.map +1 -1
- package/dist/components/layout/dashboard-layout/dashboard-sidebar/index.d.ts +1 -1
- package/dist/components/layout/dashboard-layout/dashboard-sidebar/index.js +1 -1
- package/dist/components/layout/dashboard-layout/dashboard-sidebar/index.js.map +1 -1
- package/dist/components/layout/dashboard-layout/index.d.ts +4 -1
- package/dist/components/layout/dashboard-layout/index.js +5 -1
- package/dist/components/layout/dashboard-layout/index.js.map +1 -1
- package/dist/components/layout/dashboard-layout/useDashboardLayoutReducedMotion.d.ts +36 -0
- package/dist/components/layout/dashboard-layout/useDashboardLayoutReducedMotion.js +55 -0
- package/dist/components/layout/dashboard-layout/useDashboardLayoutReducedMotion.js.map +1 -0
- package/dist/components/layout/dashboard-layout/useToggleDashboardLayoutCollapsedTransitionTime.d.ts +14 -0
- package/dist/components/layout/dashboard-layout/useToggleDashboardLayoutCollapsedTransitionTime.js +21 -0
- package/dist/components/layout/dashboard-layout/useToggleDashboardLayoutCollapsedTransitionTime.js.map +1 -0
- package/dist/framer-motion.d.ts +2 -2
- package/dist/framer-motion.js +1 -1
- package/dist/framer-motion.js.map +1 -1
- package/package.json +1 -1
|
@@ -2,6 +2,7 @@ import type { PropsWithChildren, ReactNode } from "react";
|
|
|
2
2
|
import type { CustomizableDashboardLayoutComponent } from "./customizable-dashboard-component-type";
|
|
3
3
|
import type { DashboardSidebarItemsAndGroupsDefinitions, DashboardLayoutSidebarSizing } from "./dashboard-sidebar";
|
|
4
4
|
import type { LinkComponentType } from "../../../types/Link";
|
|
5
|
+
import type { DashboardLayoutReducedMotionSetting } from "./dashboard-layout-reduced-motion";
|
|
5
6
|
export interface DashboardLayoutProps extends PropsWithChildren {
|
|
6
7
|
wordmark: ReactNode;
|
|
7
8
|
logo: ReactNode;
|
|
@@ -42,4 +43,22 @@ export interface DashboardLayoutProps extends PropsWithChildren {
|
|
|
42
43
|
* `false`, preserving the previous print behaviour.
|
|
43
44
|
*/
|
|
44
45
|
printHidden?: boolean;
|
|
46
|
+
/**
|
|
47
|
+
* How the layout decides whether to animate — the sidebar expanding and
|
|
48
|
+
* collapsing, the content area sliding across, the wordmark and group
|
|
49
|
+
* labels fading in, and the mobile sidebar's slide-in.
|
|
50
|
+
*
|
|
51
|
+
* - `"user"` (default) — honour the `prefers-reduced-motion` media query:
|
|
52
|
+
* every one of those movements becomes an instant state change when the
|
|
53
|
+
* viewer has asked their OS for reduced motion.
|
|
54
|
+
* - `"always"` — never animate. Use this to drive the layout from an
|
|
55
|
+
* in-app "reduce motion" preference.
|
|
56
|
+
* - `"never"` — always animate, even when the OS asks otherwise.
|
|
57
|
+
*
|
|
58
|
+
* The setting is applied through Framer Motion's `MotionConfig`, so it also
|
|
59
|
+
* reaches motion components rendered in `children`, `topBarButtons` and
|
|
60
|
+
* `sidebarFooterContent`. Wrap a subtree in your own `MotionConfig` to opt
|
|
61
|
+
* part of the page back out.
|
|
62
|
+
*/
|
|
63
|
+
reducedMotion?: DashboardLayoutReducedMotionSetting;
|
|
45
64
|
}
|
|
@@ -2,10 +2,16 @@
|
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import { useDashboardSidebarSizing, useDashboardSidebarOpenState, } from "./dashboard-sidebar";
|
|
4
4
|
import { cn } from "../../../lib/utils";
|
|
5
|
+
import { reducedMotionClassName, } from "./dashboard-layout-reduced-motion";
|
|
6
|
+
import { useDashboardLayoutReducedMotionSetting } from "./useDashboardLayoutReducedMotion";
|
|
5
7
|
export function DashboardLayoutMainContentContainer({ children, printHidden = false, }) {
|
|
6
8
|
const openState = useDashboardSidebarOpenState();
|
|
7
9
|
const size = useDashboardSidebarSizing();
|
|
8
|
-
|
|
10
|
+
const reducedMotion = useDashboardLayoutReducedMotionSetting();
|
|
11
|
+
return (_jsx("div", { id: "dashboard-layout-main-content-container", className: cn("absolute", "h-full grow", "flex flex-col flex-nowrap justify-start items-stretch", "overflow-x-hidden overflow-y-scroll", "overscroll-none", "no-scrollbar", "max-md:w-full", "transition-[width,left] ease-linear will-change-[width]",
|
|
12
|
+
// Reduced motion: jump to the new width/offset instead of sliding the
|
|
13
|
+
// whole page across as the sidebar opens.
|
|
14
|
+
reducedMotionClassName(reducedMotion), openState.open
|
|
9
15
|
? size.content_container_desktop_sidebar_open_width_classname
|
|
10
16
|
: size.content_container_desktop_sidebar_closed_width_classname, "max-md:left-0", openState.open
|
|
11
17
|
? size.content_container_desktop_sidebar_open_left_classname
|
package/dist/components/layout/dashboard-layout/dashboard-layout-main-content-container.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dashboard-layout-main-content-container.js","sourceRoot":"","sources":["../../../../src/components/layout/dashboard-layout/dashboard-layout-main-content-container.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EACL,yBAAyB,EACzB,4BAA4B,GAC7B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"dashboard-layout-main-content-container.js","sourceRoot":"","sources":["../../../../src/components/layout/dashboard-layout/dashboard-layout-main-content-container.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EACL,yBAAyB,EACzB,4BAA4B,GAC7B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EACL,sBAAsB,GAEvB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,sCAAsC,EAAE,MAAM,mCAAmC,CAAC;AAa3F,MAAM,UAAU,mCAAmC,CAAC,EAClD,QAAQ,EACR,WAAW,GAAG,KAAK,GACsB;IACzC,MAAM,SAAS,GAAG,4BAA4B,EAAE,CAAC;IACjD,MAAM,IAAI,GAAG,yBAAyB,EAAE,CAAC;IACzC,MAAM,aAAa,GACjB,sCAAsC,EAAE,CAAC;IAE3C,OAAO,CACL,cACE,EAAE,EAAC,yCAAyC,EAC5C,SAAS,EAAE,EAAE,CACX,UAAU,EACV,aAAa,EACb,uDAAuD,EACvD,qCAAqC,EACrC,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,yDAAyD;QACzD,sEAAsE;QACtE,0CAA0C;QAC1C,sBAAsB,CAAC,aAAa,CAAC,EACrC,SAAS,CAAC,IAAI;YACZ,CAAC,CAAC,IAAI,CAAC,sDAAsD;YAC7D,CAAC,CAAC,IAAI,CAAC,wDAAwD,EACjE,eAAe,EACf,SAAS,CAAC,IAAI;YACZ,CAAC,CAAC,IAAI,CAAC,qDAAqD;YAC5D,CAAC,CAAC,IAAI,CAAC,uDAAuD;QAChE,qEAAqE;QACrE,uEAAuE;QACvE,uBAAuB;QACvB,WAAW;YACT,4EAA4E,CAC/E,YAEA,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED,eAAe,mCAAmC,CAAC"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* How `DashboardLayout` decides whether to animate.
|
|
3
|
+
*
|
|
4
|
+
* Mirrors Framer Motion's `MotionConfig` `reducedMotion` setting, which is
|
|
5
|
+
* what the layout hands down to its own `m.*` elements:
|
|
6
|
+
*
|
|
7
|
+
* - `"user"` — follow the `prefers-reduced-motion` media query (the default).
|
|
8
|
+
* - `"always"` — never animate, regardless of the OS setting. Use this to
|
|
9
|
+
* drive the layout from an in-app "reduce motion" preference.
|
|
10
|
+
* - `"never"` — always animate, ignoring the OS setting.
|
|
11
|
+
*/
|
|
12
|
+
export type DashboardLayoutReducedMotionSetting = "user" | "always" | "never";
|
|
13
|
+
/**
|
|
14
|
+
* `DashboardLayout` honours `prefers-reduced-motion` unless a consumer opts
|
|
15
|
+
* out, so the default setting is `"user"` rather than Framer Motion's own
|
|
16
|
+
* `"never"` default.
|
|
17
|
+
*/
|
|
18
|
+
export declare const DEFAULT_DASHBOARD_LAYOUT_REDUCED_MOTION_SETTING: "user";
|
|
19
|
+
/**
|
|
20
|
+
* Classnames that stop an element's CSS transitions and keyframe animations
|
|
21
|
+
* when motion is reduced.
|
|
22
|
+
*
|
|
23
|
+
* Framer Motion covers the parts of the layout that animate in JavaScript
|
|
24
|
+
* (the wordmark, the group labels, and the `layout` reflow of the menu), but
|
|
25
|
+
* the sidebar width, the content container's width/offset, the header, and
|
|
26
|
+
* the mobile sidebar's slide-in are plain CSS — they have to be switched off
|
|
27
|
+
* in CSS too.
|
|
28
|
+
*
|
|
29
|
+
* Keying this off the setting rather than a resolved boolean is deliberate:
|
|
30
|
+
*
|
|
31
|
+
* - `"user"` becomes a `motion-reduce:` media query, so the preference is
|
|
32
|
+
* honoured during SSR and before hydration. The sidebar cannot slide once
|
|
33
|
+
* on first paint and only then start respecting the setting.
|
|
34
|
+
* - `"always"` is a preference no media query can express, so it is applied
|
|
35
|
+
* unconditionally.
|
|
36
|
+
* - `"never"` emits nothing at all — a media query here would override the
|
|
37
|
+
* very opt-out the consumer asked for.
|
|
38
|
+
*
|
|
39
|
+
* The utilities are `!important` so they beat the `data-[state]`-qualified
|
|
40
|
+
* animation utilities on the mobile sidebar's `Sheet`, which carry a higher
|
|
41
|
+
* specificity than a plain utility class.
|
|
42
|
+
*/
|
|
43
|
+
export declare function reducedMotionClassName(setting: DashboardLayoutReducedMotionSetting): string;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `DashboardLayout` honours `prefers-reduced-motion` unless a consumer opts
|
|
3
|
+
* out, so the default setting is `"user"` rather than Framer Motion's own
|
|
4
|
+
* `"never"` default.
|
|
5
|
+
*/
|
|
6
|
+
export const DEFAULT_DASHBOARD_LAYOUT_REDUCED_MOTION_SETTING = "user";
|
|
7
|
+
/**
|
|
8
|
+
* Classnames that stop an element's CSS transitions and keyframe animations
|
|
9
|
+
* when motion is reduced.
|
|
10
|
+
*
|
|
11
|
+
* Framer Motion covers the parts of the layout that animate in JavaScript
|
|
12
|
+
* (the wordmark, the group labels, and the `layout` reflow of the menu), but
|
|
13
|
+
* the sidebar width, the content container's width/offset, the header, and
|
|
14
|
+
* the mobile sidebar's slide-in are plain CSS — they have to be switched off
|
|
15
|
+
* in CSS too.
|
|
16
|
+
*
|
|
17
|
+
* Keying this off the setting rather than a resolved boolean is deliberate:
|
|
18
|
+
*
|
|
19
|
+
* - `"user"` becomes a `motion-reduce:` media query, so the preference is
|
|
20
|
+
* honoured during SSR and before hydration. The sidebar cannot slide once
|
|
21
|
+
* on first paint and only then start respecting the setting.
|
|
22
|
+
* - `"always"` is a preference no media query can express, so it is applied
|
|
23
|
+
* unconditionally.
|
|
24
|
+
* - `"never"` emits nothing at all — a media query here would override the
|
|
25
|
+
* very opt-out the consumer asked for.
|
|
26
|
+
*
|
|
27
|
+
* The utilities are `!important` so they beat the `data-[state]`-qualified
|
|
28
|
+
* animation utilities on the mobile sidebar's `Sheet`, which carry a higher
|
|
29
|
+
* specificity than a plain utility class.
|
|
30
|
+
*/
|
|
31
|
+
export function reducedMotionClassName(setting) {
|
|
32
|
+
switch (setting) {
|
|
33
|
+
case "always":
|
|
34
|
+
return "!transition-none !animate-none";
|
|
35
|
+
case "never":
|
|
36
|
+
return "";
|
|
37
|
+
case "user":
|
|
38
|
+
return "motion-reduce:!transition-none motion-reduce:!animate-none";
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
//# sourceMappingURL=dashboard-layout-reduced-motion.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dashboard-layout-reduced-motion.js","sourceRoot":"","sources":["../../../../src/components/layout/dashboard-layout/dashboard-layout-reduced-motion.ts"],"names":[],"mappings":"AAaA;;;;GAIG;AACH,MAAM,CAAC,MAAM,+CAA+C,GAC1D,MAA6D,CAAC;AAEhE;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,UAAU,sBAAsB,CACpC,OAA4C;IAE5C,QAAQ,OAAO,EAAE,CAAC;QAChB,KAAK,QAAQ;YACX,OAAO,gCAAgC,CAAC;QAC1C,KAAK,OAAO;YACV,OAAO,EAAE,CAAC;QACZ,KAAK,MAAM;YACT,OAAO,4DAA4D,CAAC;IACxE,CAAC;AACH,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ReactElement } from "react";
|
|
2
2
|
import type { DashboardLayoutProps } from "./DashboardLayoutProps";
|
|
3
3
|
export type { DashboardLayoutProps };
|
|
4
|
-
export declare function DashboardLayout({ children, wordmark, logo, Link, brandHref, topBarTitle, usePathname, printHidden, sidebarOpenWidth, ...props }: DashboardLayoutProps): ReactElement;
|
|
4
|
+
export declare function DashboardLayout({ children, wordmark, logo, Link, brandHref, topBarTitle, usePathname, printHidden, sidebarOpenWidth, reducedMotion, ...props }: DashboardLayoutProps): ReactElement;
|
|
5
5
|
export default DashboardLayout;
|
|
@@ -4,6 +4,9 @@ import DashboardSidebar, { DashboardLayoutSidebarTrigger, DashboardSidebarContex
|
|
|
4
4
|
import { Separator } from "../../ui/separator";
|
|
5
5
|
import DashboardLayoutMainContentContainer from "./dashboard-layout-main-content-container";
|
|
6
6
|
import { cn } from "../../../lib/utils";
|
|
7
|
+
import { MotionConfig } from "../../../framer-motion";
|
|
8
|
+
import { reducedMotionClassName, } from "./dashboard-layout-reduced-motion";
|
|
9
|
+
import { useResolvedDashboardLayoutReducedMotionSetting } from "./useDashboardLayoutReducedMotion";
|
|
7
10
|
/**
|
|
8
11
|
*
|
|
9
12
|
* @param param0 DashboardLayoutProps
|
|
@@ -18,8 +21,13 @@ function AutoCloseSidebarOnNavigation({ usePathname, }) {
|
|
|
18
21
|
useCloseDashboardSidebarOnRouteChange(usePathname);
|
|
19
22
|
return null;
|
|
20
23
|
}
|
|
21
|
-
export function DashboardLayout({ children, wordmark, logo, Link, brandHref, topBarTitle, usePathname, printHidden = false, sidebarOpenWidth, ...props }) {
|
|
24
|
+
export function DashboardLayout({ children, wordmark, logo, Link, brandHref, topBarTitle, usePathname, printHidden = false, sidebarOpenWidth, reducedMotion, ...props }) {
|
|
22
25
|
const size = useDashboardSidebarSizing();
|
|
26
|
+
// Resolved once, here, and published on the subtree through `MotionConfig`
|
|
27
|
+
// below. Everything the layout animates — in CSS or in Framer Motion —
|
|
28
|
+
// reads it back from there, so the two halves cannot disagree about whether
|
|
29
|
+
// the layout is animating.
|
|
30
|
+
const reducedMotionSetting = useResolvedDashboardLayoutReducedMotionSetting(reducedMotion);
|
|
23
31
|
// The open-width override travels as a CSS custom property on the root
|
|
24
32
|
// container. The default sizing classnames for the expanded sidebar and the
|
|
25
33
|
// content container's open-state width/offset read it with a 14rem
|
|
@@ -39,13 +47,19 @@ export function DashboardLayout({ children, wordmark, logo, Link, brandHref, top
|
|
|
39
47
|
}
|
|
40
48
|
}
|
|
41
49
|
const TopBarButtonsComponent = props.topBarButtons;
|
|
42
|
-
return (
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
50
|
+
return (
|
|
51
|
+
// Hands the resolved preference to every Framer Motion element inside the
|
|
52
|
+
// layout — the sidebar's own `m.*` elements, and any the consumer renders
|
|
53
|
+
// in `children`, the top bar or the sidebar footer. Framer Motion defaults
|
|
54
|
+
// this to "never", i.e. it ignores `prefers-reduced-motion` until asked
|
|
55
|
+
// not to, so the layout has to opt in on its subtree's behalf.
|
|
56
|
+
_jsx(MotionConfig, { reducedMotion: reducedMotionSetting, children: _jsxs(DashboardSidebarContextProvider, { sidebarItems: props.sidebarItems, sizing: props.sizing, sidebarOpenWidth: sidebarOpenWidth, onOpenSidebar: props.onOpenSidebar, onCloseSidebar: props.onCloseSidebar, children: [typeof usePathname === "function" && (_jsx(AutoCloseSidebarOnNavigation, { usePathname: usePathname })), _jsxs("div", { id: "dashboard-layout-container", className: cn("w-full h-dvh min-h-dvh",
|
|
57
|
+
// When hiding chrome for print, let the container grow to fit all
|
|
58
|
+
// page content across printed pages instead of clamping to the
|
|
59
|
+
// on-screen viewport height.
|
|
60
|
+
printHidden && "print:h-auto print:min-h-0"), style: containerStyle, children: [_jsx(DashboardSidebar, { wordmark: wordmark, Link: Link, brandHref: brandHref, logo: logo, sidebarFooterContent: props.sidebarFooterContent, className: cn(printHidden && "print:hidden") }), _jsxs(DashboardLayoutMainContentContainer, { printHidden: printHidden, 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", reducedMotionClassName(reducedMotionSetting), "bg-background", "border-b border-border", size.sidebar_and_header_z_index_classname, printHidden && "print:hidden"), style: {
|
|
61
|
+
height: size.header_height,
|
|
62
|
+
}, 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] })] })] }) }));
|
|
49
63
|
}
|
|
50
64
|
export default DashboardLayout;
|
|
51
65
|
//# 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,qCAAqC,EACrC,4BAA4B,EAC5B,yBAAyB,EACzB,yCAAyC,GAC1C,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;
|
|
1
|
+
{"version":3,"file":"dashboard-layout.js","sourceRoot":"","sources":["../../../../src/components/layout/dashboard-layout/dashboard-layout.tsx"],"names":[],"mappings":"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"}
|
package/dist/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-content.js
CHANGED
|
@@ -6,6 +6,7 @@ import useDashboardSidebarItemsAndGroups from "./useDashboardSidebarItemsAndGrou
|
|
|
6
6
|
import { m } from "../../../../framer-motion";
|
|
7
7
|
import { cn } from "../../../../lib/utils";
|
|
8
8
|
import useDashboardSidebarSizing from "./useDashboardSidebarSizing";
|
|
9
|
+
import useDashboardLayoutReducedMotion from "../useDashboardLayoutReducedMotion";
|
|
9
10
|
/**
|
|
10
11
|
* Collapse the flat item/group list into render blocks, preserving the order
|
|
11
12
|
* the consumer supplied. Adjacent ungrouped items merge into one run; a group
|
|
@@ -35,14 +36,20 @@ export function toDashboardSidebarRenderBlocks(entries) {
|
|
|
35
36
|
export function DashboardSidebarContent({ Link, }) {
|
|
36
37
|
const sidebarItems = useDashboardSidebarItemsAndGroups();
|
|
37
38
|
const sizes = useDashboardSidebarSizing();
|
|
39
|
+
const reducedMotion = useDashboardLayoutReducedMotion();
|
|
38
40
|
const blocks = toDashboardSidebarRenderBlocks(sidebarItems);
|
|
39
|
-
return (_jsx(m.nav, { className: cn("bg-background grow w-full", "flex flex-col items-center justify-start flex-nowrap", sizes.sidebar_menu_item_gap_classname, "overflow-x-hidden overflow-y-scroll", "no-scrollbar"), children: blocks.map((block) => {
|
|
41
|
+
return (_jsx(m.nav, { className: cn("bg-background grow w-full", "flex flex-col items-center justify-start flex-nowrap", sizes.sidebar_menu_item_gap_classname, "overflow-x-hidden overflow-y-scroll", "no-scrollbar"), children: blocks.map((block, index) => {
|
|
40
42
|
if (block.kind === "group") {
|
|
41
43
|
const group = block.group;
|
|
42
|
-
return (_jsx(DashboardSidebarItemGroupRenderer, { group: group, Link: Link
|
|
44
|
+
return (_jsx(DashboardSidebarItemGroupRenderer, { group: group, Link: Link,
|
|
45
|
+
// The gap below only separates one block from the next, so the
|
|
46
|
+
// leading block has nothing holding it off the sidebar header.
|
|
47
|
+
// A group opens with a bare text label, which then reads as
|
|
48
|
+
// stuck to the header's border; it insets itself when it leads.
|
|
49
|
+
first: index === 0 }, `sidebar-group-[${group.title}]`));
|
|
43
50
|
}
|
|
44
51
|
const firstItemTitle = block.items[0].title;
|
|
45
|
-
return (_jsx(m.ul, { layout:
|
|
52
|
+
return (_jsx(m.ul, { layout: !reducedMotion, className: cn("w-full flex flex-col", "items-start justify-start", sizes.sidebar_menu_item_gap_classname,
|
|
46
53
|
// The <nav> is a scrolling flex column; without this the run
|
|
47
54
|
// would be squashed once the menu overflows.
|
|
48
55
|
"flex-shrink-0"), children: block.items.map((item) => (_jsx(DashboardSidebarItemRenderer, { item: item, Link: Link }, `sidebar-item-[${item.title}]`))) }, `sidebar-ungrouped-items-[${firstItemTitle}]`));
|
package/dist/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-content.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dashboard-sidebar-content.js","sourceRoot":"","sources":["../../../../../src/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-content.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAIb,OAAO,4BAA4B,MAAM,mCAAmC,CAAC;AAG7E,OAAO,iCAAiC,MAAM,yCAAyC,CAAC;AACxF,OAAO,iCAAiC,MAAM,qCAAqC,CAAC;AACpF,OAAO,EAAE,CAAC,EAAE,MAAM,iBAAiB,CAAC;AACpC,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAEjC,OAAO,yBAAyB,MAAM,6BAA6B,CAAC;
|
|
1
|
+
{"version":3,"file":"dashboard-sidebar-content.js","sourceRoot":"","sources":["../../../../../src/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-content.tsx"],"names":[],"mappings":"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"}
|
package/dist/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-header.js
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { AnimatePresence, m } from "../../../../framer-motion";
|
|
4
|
-
import
|
|
4
|
+
import { toggleDashboardLayoutCollapsedTransitionEasing } from "../toggle-dashboard-layout-collapsed-transition-time";
|
|
5
|
+
import useToggleDashboardLayoutCollapsedTransitionTime from "../useToggleDashboardLayoutCollapsedTransitionTime";
|
|
6
|
+
import useDashboardLayoutReducedMotion from "../useDashboardLayoutReducedMotion";
|
|
5
7
|
import useDashboardSidebarOpenState from "./useDashboardSidebarOpenState";
|
|
6
8
|
import { cn } from "../../../../lib/utils";
|
|
7
9
|
import { useDashboardSidebarSizing } from "./useDashboardSidebarSizing";
|
|
@@ -12,6 +14,8 @@ import { useDashboardSidebarSizing } from "./useDashboardSidebarSizing";
|
|
|
12
14
|
// AnimatePresence enter animation on every navigation when used inside a
|
|
13
15
|
// Next.js layout.tsx.
|
|
14
16
|
function AnimatedBrandWordmark({ wordmark, Link, brandHref, }) {
|
|
17
|
+
const transitionTime = useToggleDashboardLayoutCollapsedTransitionTime();
|
|
18
|
+
const reducedMotion = useDashboardLayoutReducedMotion();
|
|
15
19
|
return (_jsx(m.div, { className: "will-change-transform", variants: {
|
|
16
20
|
exit: {
|
|
17
21
|
opacity: 0,
|
|
@@ -21,7 +25,7 @@ function AnimatedBrandWordmark({ wordmark, Link, brandHref, }) {
|
|
|
21
25
|
},
|
|
22
26
|
width: 0,
|
|
23
27
|
transition: {
|
|
24
|
-
duration:
|
|
28
|
+
duration: transitionTime,
|
|
25
29
|
ease: toggleDashboardLayoutCollapsedTransitionEasing,
|
|
26
30
|
delay: 0,
|
|
27
31
|
},
|
|
@@ -32,18 +36,22 @@ function AnimatedBrandWordmark({ wordmark, Link, brandHref, }) {
|
|
|
32
36
|
display: "block",
|
|
33
37
|
width: "auto",
|
|
34
38
|
transition: {
|
|
35
|
-
duration:
|
|
39
|
+
duration: transitionTime,
|
|
36
40
|
ease: toggleDashboardLayoutCollapsedTransitionEasing,
|
|
37
|
-
|
|
41
|
+
// Waits for the sidebar to be most of the way open before the
|
|
42
|
+
// wordmark appears. Zero along with the duration when motion is
|
|
43
|
+
// reduced, so the wordmark is simply there.
|
|
44
|
+
delay: transitionTime / 1.5,
|
|
38
45
|
},
|
|
39
46
|
},
|
|
40
|
-
}, initial: "exit", animate: "enter", exit: "exit", layout:
|
|
47
|
+
}, initial: "exit", animate: "enter", exit: "exit", layout: !reducedMotion, children: _jsx(Link, { href: brandHref, children: wordmark }) }));
|
|
41
48
|
}
|
|
42
49
|
export function DashboardSidebarHeader({ wordmark, logo, Link, brandHref, }) {
|
|
43
50
|
const size = useDashboardSidebarSizing();
|
|
44
51
|
const { open, mobile } = useDashboardSidebarOpenState();
|
|
52
|
+
const reducedMotion = useDashboardLayoutReducedMotion();
|
|
45
53
|
const showWordmark = mobile || open;
|
|
46
|
-
return (_jsxs(m.header, { layout:
|
|
54
|
+
return (_jsxs(m.header, { layout: !reducedMotion, style: {
|
|
47
55
|
height: size.header_height,
|
|
48
56
|
}, 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")) })] }));
|
|
49
57
|
}
|
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,
|
|
1
|
+
{"version":3,"file":"dashboard-sidebar-header.js","sourceRoot":"","sources":["../../../../../src/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-header.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,8 +1,18 @@
|
|
|
1
1
|
import type { ReactElement } from "react";
|
|
2
2
|
import type { DashboardSidebarItemGroupDefinition } from "./dashboard-sidebar-item-group";
|
|
3
3
|
import type { LinkComponentType } from "../../../../types/Link";
|
|
4
|
-
export
|
|
4
|
+
export interface DashboardSidebarItemGroupRendererProps {
|
|
5
5
|
group: DashboardSidebarItemGroupDefinition;
|
|
6
6
|
Link: LinkComponentType;
|
|
7
|
-
|
|
7
|
+
/**
|
|
8
|
+
* Whether this group is the first block in the menu.
|
|
9
|
+
*
|
|
10
|
+
* The menu <nav> spaces its blocks with a gap, which only ever puts space
|
|
11
|
+
* *between* two blocks — the first one has nothing above it, so a leading
|
|
12
|
+
* group's heading rendered flush against the sidebar header's bottom border.
|
|
13
|
+
* A leading group therefore supplies that inset itself.
|
|
14
|
+
*/
|
|
15
|
+
first?: boolean;
|
|
16
|
+
}
|
|
17
|
+
export declare function DashboardSidebarItemGroupRenderer({ group, Link, first, }: DashboardSidebarItemGroupRendererProps): ReactElement;
|
|
8
18
|
export default DashboardSidebarItemGroupRenderer;
|
|
@@ -6,64 +6,123 @@ import useDashboardSidebarOpenState from "./useDashboardSidebarOpenState";
|
|
|
6
6
|
import { cn } from "../../../../lib/utils";
|
|
7
7
|
import { AnimatePresence, m } from "../../../../framer-motion";
|
|
8
8
|
import useDashboardSidebarSizing from "./useDashboardSidebarSizing";
|
|
9
|
-
import {
|
|
9
|
+
import { toggleDashboardLayoutCollapsedTransitionEasing } from "../toggle-dashboard-layout-collapsed-transition-time";
|
|
10
|
+
import useToggleDashboardLayoutCollapsedTransitionTime from "../useToggleDashboardLayoutCollapsedTransitionTime";
|
|
11
|
+
import useDashboardLayoutReducedMotion from "../useDashboardLayoutReducedMotion";
|
|
10
12
|
import { DashboardSidebarAdminOnlyItemsContext } from "./dashboard-sidebar-admin-only-items-context";
|
|
11
|
-
|
|
13
|
+
import { DEFAULT_LEADING_SIDEBAR_MENU_GROUP_LABEL_TOP_PADDING } from "./dashboard-sidebar-sizing";
|
|
14
|
+
export function DashboardSidebarItemGroupRenderer({ group, Link, first = false, }) {
|
|
12
15
|
const groupTitle = group.title;
|
|
13
16
|
const openState = useDashboardSidebarOpenState();
|
|
14
17
|
const sizes = useDashboardSidebarSizing();
|
|
18
|
+
const reducedMotion = useDashboardLayoutReducedMotion();
|
|
19
|
+
const transitionTime = useToggleDashboardLayoutCollapsedTransitionTime();
|
|
15
20
|
const groupItemsContainerId = `sidebar-group-items-[${group.title}]`;
|
|
16
21
|
const showGroupLabel = openState.mobile || openState.open;
|
|
22
|
+
// Zero for every group but the leading one, so the target below stays a
|
|
23
|
+
// single value rather than two conditional variants: a non-leading group
|
|
24
|
+
// animates 0 to 0 and is unaffected.
|
|
25
|
+
//
|
|
26
|
+
// It sits on the group container rather than on the heading, even though it
|
|
27
|
+
// exists for the heading's sake. AnimatePresence mounts and unmounts the
|
|
28
|
+
// heading, and a padding that belongs to an unmounting element cannot
|
|
29
|
+
// animate out — it is simply gone the frame the element leaves, taking its
|
|
30
|
+
// space with it. Framer also cannot drive a border-box element's height
|
|
31
|
+
// below its own padding, so while the inset lived on the heading the
|
|
32
|
+
// collapse bottomed out 24px short and snapped the rest. The container is
|
|
33
|
+
// mounted for as long as the group is, so the same 0 <-> 16 change is an
|
|
34
|
+
// animation rather than a jump, and the end states are unchanged: collapsed
|
|
35
|
+
// means 0, leaving a leading group's icon rows where leading ungrouped rows
|
|
36
|
+
// sit.
|
|
37
|
+
const groupTopPadding = first
|
|
38
|
+
? (sizes.sidebar_leading_menu_group_label_top_padding ??
|
|
39
|
+
DEFAULT_LEADING_SIDEBAR_MENU_GROUP_LABEL_TOP_PADDING)
|
|
40
|
+
: 0;
|
|
17
41
|
return (_jsxs(m.div, { className: cn("w-full", "flex flex-col flex-nowrap", "items-start justify-start",
|
|
18
42
|
// The menu <nav> is a scrolling flex column, so its children shrink
|
|
19
43
|
// by default once the menu overflows. Keep the group at its natural
|
|
20
44
|
// height and let the <nav> scroll instead.
|
|
21
|
-
"flex-shrink-0"), layout:
|
|
45
|
+
"flex-shrink-0"), layout: !reducedMotion,
|
|
46
|
+
// No entrance animation: a group that mounts already open starts at its
|
|
47
|
+
// resting inset rather than easing into it.
|
|
48
|
+
initial: false, animate: {
|
|
49
|
+
paddingTop: showGroupLabel ? groupTopPadding : 0,
|
|
50
|
+
transition: {
|
|
51
|
+
duration: transitionTime,
|
|
52
|
+
ease: toggleDashboardLayoutCollapsedTransitionEasing,
|
|
53
|
+
// Matches the heading's own timing on both legs, so the inset and
|
|
54
|
+
// the heading it is reserving space for move as one: held back on
|
|
55
|
+
// the way in until the sidebar is most of the way open, and leaving
|
|
56
|
+
// immediately on the way out. Both are 0 under reduced motion.
|
|
57
|
+
delay: showGroupLabel ? transitionTime / 1.5 : 0,
|
|
58
|
+
},
|
|
59
|
+
}, children: [_jsx(AnimatePresence, { children: showGroupLabel && (_jsx(m.div
|
|
60
|
+
// A one-row grid whose track animates between `0fr` and `1fr`,
|
|
61
|
+
// which is how the heading opens and closes without anyone having
|
|
62
|
+
// to measure it. The obvious spelling — `height` between 0 and
|
|
63
|
+
// `auto` — does not survive the mount and unmount that
|
|
64
|
+
// AnimatePresence puts either side of it. Framer resolves `auto`
|
|
65
|
+
// by measuring, and the frame it does so paints at the heading's
|
|
66
|
+
// intrinsic height, so opening jumped the rows below down 14px
|
|
67
|
+
// before animating them the rest of the way; closing, it could not
|
|
68
|
+
// drive a border-box height below the element's own padding, so it
|
|
69
|
+
// stopped short and the unmount dropped the remainder in one
|
|
70
|
+
// frame. An `fr` track has neither problem: `0fr` is a true zero,
|
|
71
|
+
// reached before the unmount, and `1fr` resolves against content
|
|
72
|
+
// in an auto-height container with nothing measured up front.
|
|
73
|
+
, {
|
|
74
|
+
// A one-row grid whose track animates between `0fr` and `1fr`,
|
|
75
|
+
// which is how the heading opens and closes without anyone having
|
|
76
|
+
// to measure it. The obvious spelling — `height` between 0 and
|
|
77
|
+
// `auto` — does not survive the mount and unmount that
|
|
78
|
+
// AnimatePresence puts either side of it. Framer resolves `auto`
|
|
79
|
+
// by measuring, and the frame it does so paints at the heading's
|
|
80
|
+
// intrinsic height, so opening jumped the rows below down 14px
|
|
81
|
+
// before animating them the rest of the way; closing, it could not
|
|
82
|
+
// drive a border-box height below the element's own padding, so it
|
|
83
|
+
// stopped short and the unmount dropped the remainder in one
|
|
84
|
+
// frame. An `fr` track has neither problem: `0fr` is a true zero,
|
|
85
|
+
// reached before the unmount, and `1fr` resolves against content
|
|
86
|
+
// in an auto-height container with nothing measured up front.
|
|
87
|
+
className: "w-full grid", initial: {
|
|
22
88
|
scale: 0,
|
|
23
89
|
opacity: 0,
|
|
24
|
-
|
|
25
|
-
height: 0,
|
|
26
|
-
transitionEnd: {
|
|
27
|
-
display: "none",
|
|
28
|
-
},
|
|
29
|
-
paddingBottom: 0,
|
|
90
|
+
gridTemplateRows: "0fr",
|
|
30
91
|
}, animate: {
|
|
31
92
|
scale: 1,
|
|
32
93
|
opacity: 1,
|
|
33
|
-
|
|
34
|
-
height: "auto",
|
|
35
|
-
display: "block",
|
|
36
|
-
paddingBottom: sizes.sidebar_expanded_menu_group_label_bottom_padding,
|
|
94
|
+
gridTemplateRows: "1fr",
|
|
37
95
|
transition: {
|
|
38
|
-
duration:
|
|
96
|
+
duration: transitionTime,
|
|
39
97
|
ease: toggleDashboardLayoutCollapsedTransitionEasing,
|
|
40
|
-
|
|
98
|
+
// Both zero when motion is reduced, so the heading is present
|
|
99
|
+
// as soon as the sidebar is open instead of easing in behind
|
|
100
|
+
// it.
|
|
101
|
+
delay: transitionTime / 1.5,
|
|
41
102
|
},
|
|
42
103
|
}, exit: {
|
|
43
104
|
scale: 0,
|
|
44
105
|
opacity: 0,
|
|
45
|
-
|
|
46
|
-
height: 0,
|
|
47
|
-
transitionEnd: {
|
|
48
|
-
display: "none",
|
|
49
|
-
},
|
|
50
|
-
paddingBottom: 0,
|
|
106
|
+
gridTemplateRows: "0fr",
|
|
51
107
|
transition: {
|
|
52
|
-
duration:
|
|
108
|
+
duration: transitionTime,
|
|
53
109
|
ease: toggleDashboardLayoutCollapsedTransitionEasing,
|
|
54
110
|
delay: 0,
|
|
55
111
|
},
|
|
56
|
-
}, children: _jsx(
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
112
|
+
}, children: _jsx("div", { className: cn("min-h-0 overflow-hidden", "text-nowrap"), children: _jsx("div", { style: {
|
|
113
|
+
paddingBottom: sizes.sidebar_expanded_menu_group_label_bottom_padding,
|
|
114
|
+
}, children: _jsx(Label, { htmlFor: groupItemsContainerId, className: cn("font-bold text-nowrap", "block"),
|
|
115
|
+
// Align the group heading with the item titles underneath
|
|
116
|
+
// it: each item renders its icon inside a box exactly
|
|
117
|
+
// `desktop_collapsed_width` wide, so its title starts at
|
|
118
|
+
// that offset. Deriving the inset from the same value keeps
|
|
119
|
+
// heading and titles on one left edge instead of the old
|
|
120
|
+
// `mx-2`, which lined up with neither the icons nor the
|
|
121
|
+
// titles.
|
|
122
|
+
style: {
|
|
123
|
+
paddingLeft: sizes.desktop_collapsed_width,
|
|
124
|
+
paddingRight: "0.5rem",
|
|
125
|
+
}, children: groupTitle }) }) }) }, "sidebar-item-group-label")) }), _jsx(DashboardSidebarAdminOnlyItemsContext.Provider, { value: group.adminOnly ?? false, children: _jsx(m.ul, { id: groupItemsContainerId, layout: !reducedMotion, className: cn("w-full flex flex-col", "items-start justify-start", sizes.sidebar_menu_item_gap_classname), children: group.items.map((item) => {
|
|
67
126
|
return (_jsx(DashboardSidebarItemRenderer, { item: item, Link: Link }, `sidebar-item-[${groupTitle}]-[${item.title}]`));
|
|
68
127
|
}) }) })] }, `sidebar-group-[${group.title}]`));
|
|
69
128
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dashboard-sidebar-item-group-renderer.js","sourceRoot":"","sources":["../../../../../src/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-item-group-renderer.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAKb,OAAO,4BAA4B,MAAM,mCAAmC,CAAC;AAC7E,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,4BAA4B,MAAM,gCAAgC,CAAC;AAC1E,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,yBAAyB,MAAM,6BAA6B,CAAC;AACpE,OAAO,
|
|
1
|
+
{"version":3,"file":"dashboard-sidebar-item-group-renderer.js","sourceRoot":"","sources":["../../../../../src/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-item-group-renderer.tsx"],"names":[],"mappings":"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"}
|
package/dist/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-item-renderer.js
CHANGED
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useContext } from "react";
|
|
4
4
|
import { AnimatePresence, m } from "../../../../framer-motion";
|
|
5
|
-
import
|
|
5
|
+
import useToggleDashboardLayoutCollapsedTransitionTime from "../useToggleDashboardLayoutCollapsedTransitionTime";
|
|
6
|
+
import useDashboardLayoutReducedMotion from "../useDashboardLayoutReducedMotion";
|
|
6
7
|
import { cn } from "../../../../lib/utils";
|
|
7
8
|
import useDashboardSidebarOpenState from "./useDashboardSidebarOpenState";
|
|
8
9
|
import useDashboardSidebarSizing from "./useDashboardSidebarSizing";
|
|
@@ -16,6 +17,11 @@ export function DashboardSidebarItemRenderer({ item, Link, }) {
|
|
|
16
17
|
const setSidebarOpen = useDashboardSidebarOpenStateDispatch();
|
|
17
18
|
const sizes = useDashboardSidebarSizing();
|
|
18
19
|
const isAdminItemGroup = useContext(DashboardSidebarAdminOnlyItemsContext);
|
|
20
|
+
const reducedMotion = useDashboardLayoutReducedMotion();
|
|
21
|
+
// Read here rather than inside SidebarMenuItemTitle: that component is
|
|
22
|
+
// re-created on every render of this one, so it must stay a plain closure
|
|
23
|
+
// over values this component already has.
|
|
24
|
+
const transitionTime = useToggleDashboardLayoutCollapsedTransitionTime();
|
|
19
25
|
const showItemLabel = mobile || open;
|
|
20
26
|
const IconComponent = item.icon;
|
|
21
27
|
const itemColorClassName = isAdminItemGroup
|
|
@@ -39,15 +45,16 @@ export function DashboardSidebarItemRenderer({ item, Link, }) {
|
|
|
39
45
|
display: "none",
|
|
40
46
|
},
|
|
41
47
|
}, transition: {
|
|
42
|
-
duration:
|
|
48
|
+
duration: transitionTime,
|
|
43
49
|
}, children: item.title }, `sidebar-menu-item-title-container-[${item.title}]`));
|
|
44
50
|
}
|
|
45
51
|
return (_jsx(m.li, {
|
|
46
52
|
// `layout` keeps a row's position/size animated while the sidebar
|
|
47
53
|
// expands and collapses, matching the group wrapper and group <ul>,
|
|
48
54
|
// which have always had it. Without it, ungrouped rows snapped into
|
|
49
|
-
// place while grouped rows glided.
|
|
50
|
-
|
|
55
|
+
// place while grouped rows glided. Under reduced motion every row
|
|
56
|
+
// snaps instead, which is the point.
|
|
57
|
+
layout: !reducedMotion, className: cn("w-full", sizes.sidebar_menu_item_height_classname,
|
|
51
58
|
// The menu <nav> is a flex column with a definite height (it grows
|
|
52
59
|
// inside an h-screen sidebar) and its own scrollbar. Flex children
|
|
53
60
|
// shrink by default, so once the menu overflowed, rows squashed
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dashboard-sidebar-item-renderer.js","sourceRoot":"","sources":["../../../../../src/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-item-renderer.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;AAGtD,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,
|
|
1
|
+
{"version":3,"file":"dashboard-sidebar-item-renderer.js","sourceRoot":"","sources":["../../../../../src/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-item-renderer.tsx"],"names":[],"mappings":"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"}
|
package/dist/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-layout.js
CHANGED
|
@@ -7,9 +7,12 @@ import { cn } from "../../../../lib/utils";
|
|
|
7
7
|
import useDashboardSidebarSizing from "./useDashboardSidebarSizing";
|
|
8
8
|
import useDashboardSidebarOpenState from "./useDashboardSidebarOpenState";
|
|
9
9
|
import Separator from "../../../ui/separator";
|
|
10
|
+
import { reducedMotionClassName, } from "../dashboard-layout-reduced-motion";
|
|
11
|
+
import { useDashboardLayoutReducedMotionSetting } from "../useDashboardLayoutReducedMotion";
|
|
10
12
|
export function DashboardLayoutSidebarLayout({ logo, wordmark, Link, brandHref, ...props }) {
|
|
11
13
|
const size = useDashboardSidebarSizing();
|
|
12
14
|
const openState = useDashboardSidebarOpenState();
|
|
15
|
+
const reducedMotion = useDashboardLayoutReducedMotionSetting();
|
|
13
16
|
const desktop = !openState.mobile;
|
|
14
17
|
let widthClassName;
|
|
15
18
|
if (openState.mobile) {
|
|
@@ -25,7 +28,9 @@ export function DashboardLayoutSidebarLayout({ logo, wordmark, Link, brandHref,
|
|
|
25
28
|
}
|
|
26
29
|
}
|
|
27
30
|
const separatorClassName = cn("flex-shrink-0");
|
|
28
|
-
return (_jsxs("menu", { className: cn("h-screen max-h-screen", desktop ? "absolute" : undefined, "transition-[width] ease-linear will-change-[width]",
|
|
31
|
+
return (_jsxs("menu", { className: cn("h-screen max-h-screen", desktop ? "absolute" : undefined, "transition-[width] ease-linear will-change-[width]",
|
|
32
|
+
// Reduced motion: snap between the collapsed and expanded widths.
|
|
33
|
+
reducedMotionClassName(reducedMotion), "flex flex-col justify-between items-stretch", "border-r", "p-0", size.sidebar_and_header_z_index_classname, widthClassName, props.className), children: [_jsx(DashboardSidebarHeader, { wordmark: wordmark, logo: logo, Link: Link, brandHref: brandHref }), _jsx(DashboardSidebarContent, { Link: Link }), typeof props.sidebarFooterContent === "function" && (_jsxs(_Fragment, { children: [_jsx(Separator, { orientation: "horizontal", className: separatorClassName }), _jsx(DashboardSidebarFooter, { Link: Link, sidebarFooterContent: props.sidebarFooterContent })] }))] }));
|
|
29
34
|
}
|
|
30
35
|
export default DashboardLayoutSidebarLayout;
|
|
31
36
|
//# sourceMappingURL=dashboard-sidebar-layout.js.map
|
package/dist/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-layout.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dashboard-sidebar-layout.js","sourceRoot":"","sources":["../../../../../src/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-layout.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAIb,OAAO,sBAAsB,MAAM,4BAA4B,CAAC;AAChE,OAAO,uBAAuB,MAAM,6BAA6B,CAAC;AAClE,OAAO,sBAAsB,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,yBAAyB,MAAM,6BAA6B,CAAC;AACpE,OAAO,4BAA4B,MAAM,gCAAgC,CAAC;AAC1E,OAAO,SAAS,MAAM,2BAA2B,CAAC;
|
|
1
|
+
{"version":3,"file":"dashboard-sidebar-layout.js","sourceRoot":"","sources":["../../../../../src/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-layout.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAIb,OAAO,sBAAsB,MAAM,4BAA4B,CAAC;AAChE,OAAO,uBAAuB,MAAM,6BAA6B,CAAC;AAClE,OAAO,sBAAsB,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,yBAAyB,MAAM,6BAA6B,CAAC;AACpE,OAAO,4BAA4B,MAAM,gCAAgC,CAAC;AAC1E,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAGlD,OAAO,EACL,sBAAsB,GAEvB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,sCAAsC,EAAE,MAAM,oCAAoC,CAAC;AAW5F,MAAM,UAAU,4BAA4B,CAAC,EAC3C,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,GAAG,KAAK,EAC0B;IAClC,MAAM,IAAI,GAAG,yBAAyB,EAAE,CAAC;IACzC,MAAM,SAAS,GAAG,4BAA4B,EAAE,CAAC;IACjD,MAAM,aAAa,GACjB,sCAAsC,EAAE,CAAC;IAC3C,MAAM,OAAO,GAAY,CAAC,SAAS,CAAC,MAAM,CAAC;IAE3C,IAAI,cAAsB,CAAC;IAC3B,IAAI,SAAS,CAAC,MAAM,EAAE,CAAC;QACrB,cAAc,GAAG,IAAI,CAAC,+BAA+B,CAAC;IACxD,CAAC;SAAM,CAAC;QACN,UAAU;QACV,IAAI,SAAS,CAAC,IAAI,EAAE,CAAC;YACnB,cAAc,GAAG,IAAI,CAAC,gCAAgC,CAAC;QACzD,CAAC;aAAM,CAAC;YACN,cAAc,GAAG,IAAI,CAAC,iCAAiC,CAAC;QAC1D,CAAC;IACH,CAAC;IAED,MAAM,kBAAkB,GAAW,EAAE,CACnC,eAAe,CAChB,CAAA;IAED,OAAO,CACL,gBACE,SAAS,EAAE,EAAE,CACX,uBAAuB,EACvB,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAChC,oDAAoD;QACpD,kEAAkE;QAClE,sBAAsB,CAAC,aAAa,CAAC,EACrC,6CAA6C,EAC7C,UAAU,EACV,KAAK,EACL,IAAI,CAAC,oCAAoC,EACzC,cAAc,EACd,KAAK,CAAC,SAAS,CAChB,aAED,KAAC,sBAAsB,IACrB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,GACpB,EACF,KAAC,uBAAuB,IAAC,IAAI,EAAE,IAAI,GAAI,EACtC,OAAO,KAAK,CAAC,oBAAoB,KAAK,UAAU,IAAI,CACnD,8BACE,KAAC,SAAS,IAAC,WAAW,EAAC,YAAY,EAAC,SAAS,EAAE,kBAAkB,GAAI,EACrE,KAAC,sBAAsB,IACrB,IAAI,EAAE,IAAI,EACV,oBAAoB,EAAE,KAAK,CAAC,oBAAoB,GAChD,IACD,CACJ,IACI,CACR,CAAC;AACJ,CAAC;AAED,eAAe,4BAA4B,CAAC"}
|
package/dist/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-sizing.d.ts
CHANGED
|
@@ -11,6 +11,21 @@ export declare const DASHBOARD_SIDEBAR_OPEN_WIDTH_CSS_VARIABLE = "--dashboard-si
|
|
|
11
11
|
* not supplied to `DashboardLayout`.
|
|
12
12
|
*/
|
|
13
13
|
export declare const DEFAULT_DASHBOARD_SIDEBAR_OPEN_WIDTH = "14rem";
|
|
14
|
+
/**
|
|
15
|
+
* Space, in pixels, above a group's label when that group is the *first*
|
|
16
|
+
* entry in the sidebar menu. Used when `sizing` does not supply
|
|
17
|
+
* `sidebar_leading_menu_group_label_top_padding`.
|
|
18
|
+
*
|
|
19
|
+
* Twice the menu's shared vertical rhythm (`gap-2`, 8px) rather than one
|
|
20
|
+
* helping of it. A heading further down the menu is separated from the row
|
|
21
|
+
* above by that 8px gap *plus* the row's own bottom half-leading — a row is
|
|
22
|
+
* `sidebar_menu_item_height` tall with its title centred inside, so it
|
|
23
|
+
* contributes roughly another 8px of whitespace. Matching the gap alone would
|
|
24
|
+
* put a leading heading 8px under a hard border while every other heading
|
|
25
|
+
* reads as having ~16px above it, which is the tighter spacing this value
|
|
26
|
+
* exists to avoid.
|
|
27
|
+
*/
|
|
28
|
+
export declare const DEFAULT_LEADING_SIDEBAR_MENU_GROUP_LABEL_TOP_PADDING = 16;
|
|
14
29
|
export interface DashboardLayoutSidebarSizing {
|
|
15
30
|
desktop_collapsed_width: string;
|
|
16
31
|
desktop_collapsed_width_classname: string;
|
|
@@ -29,15 +44,42 @@ export interface DashboardLayoutSidebarSizing {
|
|
|
29
44
|
/**
|
|
30
45
|
* Space, in pixels, between a group's label and the first item beneath it.
|
|
31
46
|
*
|
|
32
|
-
*
|
|
33
|
-
*
|
|
34
|
-
*
|
|
47
|
+
* A raw number rather than a Tailwind class so it can be applied inline
|
|
48
|
+
* next to the label, inside the element the collapsing heading clips. It is
|
|
49
|
+
* no longer animated: the heading collapses by way of an `fr` grid track,
|
|
50
|
+
* and this padding rides along as clipped content. Keep it off the wrapper
|
|
51
|
+
* and off the grid item — padding on either floors that box and stops the
|
|
52
|
+
* track reaching zero.
|
|
35
53
|
*
|
|
36
54
|
* Keep it equal to `sidebar_menu_item_gap_classname` expressed in pixels —
|
|
37
55
|
* the default `gap-2` is 0.5rem, i.e. 8px. A mismatch is exactly what made
|
|
38
56
|
* grouped items sit on a different vertical rhythm than ungrouped ones.
|
|
39
57
|
*/
|
|
40
58
|
sidebar_expanded_menu_group_label_bottom_padding: number;
|
|
59
|
+
/**
|
|
60
|
+
* Space, in pixels, above a group's label when that group is the *first*
|
|
61
|
+
* entry in the menu.
|
|
62
|
+
*
|
|
63
|
+
* Every other block in the menu is held off the one before it by the
|
|
64
|
+
* <nav>'s own gap *and* by the bottom half-leading of the row above it, so
|
|
65
|
+
* only the leading block has nothing above it to space against — a leading
|
|
66
|
+
* group's heading was painted flush against the bottom border of the
|
|
67
|
+
* sidebar header. A leading *item* does not need this: its row is
|
|
68
|
+
* `sidebar_menu_item_height` tall with the icon and title centred inside,
|
|
69
|
+
* so the row itself supplies the breathing room that a bare text label
|
|
70
|
+
* does not.
|
|
71
|
+
*
|
|
72
|
+
* A raw number because Framer Motion animates it to 0 as the sidebar
|
|
73
|
+
* collapses, and Framer needs a numeric target. It is applied to the
|
|
74
|
+
* group's container rather than to the label: the label is unmounted on
|
|
75
|
+
* collapse, and padding on an unmounting element cannot animate out.
|
|
76
|
+
*
|
|
77
|
+
* Optional so that consumers already passing a complete `sizing` object
|
|
78
|
+
* keep type-checking;
|
|
79
|
+
* `DEFAULT_LEADING_SIDEBAR_MENU_GROUP_LABEL_TOP_PADDING` applies when it is
|
|
80
|
+
* omitted.
|
|
81
|
+
*/
|
|
82
|
+
sidebar_leading_menu_group_label_top_padding?: number;
|
|
41
83
|
sidebar_and_header_z_index_classname: string;
|
|
42
84
|
/**
|
|
43
85
|
* The single vertical rhythm for the sidebar menu. Applied to every list of
|
|
@@ -70,6 +112,7 @@ export declare const DEFAULT_DASHBOARD_SIDEBAR_SIZE: {
|
|
|
70
112
|
readonly sidebar_menu_item_height: "2.5rem";
|
|
71
113
|
readonly sidebar_menu_item_height_classname: "h-[2.5rem]";
|
|
72
114
|
readonly sidebar_expanded_menu_group_label_bottom_padding: 8;
|
|
115
|
+
readonly sidebar_leading_menu_group_label_top_padding: 16;
|
|
73
116
|
readonly sidebar_and_header_z_index_classname: "z-40";
|
|
74
117
|
readonly sidebar_menu_item_gap_classname: "gap-2";
|
|
75
118
|
readonly sidebar_menu_item_x_margin_classname: "mx-2";
|
package/dist/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-sizing.js
CHANGED
|
@@ -12,6 +12,21 @@ export const DASHBOARD_SIDEBAR_OPEN_WIDTH_CSS_VARIABLE = "--dashboard-sidebar-op
|
|
|
12
12
|
* not supplied to `DashboardLayout`.
|
|
13
13
|
*/
|
|
14
14
|
export const DEFAULT_DASHBOARD_SIDEBAR_OPEN_WIDTH = "14rem";
|
|
15
|
+
/**
|
|
16
|
+
* Space, in pixels, above a group's label when that group is the *first*
|
|
17
|
+
* entry in the sidebar menu. Used when `sizing` does not supply
|
|
18
|
+
* `sidebar_leading_menu_group_label_top_padding`.
|
|
19
|
+
*
|
|
20
|
+
* Twice the menu's shared vertical rhythm (`gap-2`, 8px) rather than one
|
|
21
|
+
* helping of it. A heading further down the menu is separated from the row
|
|
22
|
+
* above by that 8px gap *plus* the row's own bottom half-leading — a row is
|
|
23
|
+
* `sidebar_menu_item_height` tall with its title centred inside, so it
|
|
24
|
+
* contributes roughly another 8px of whitespace. Matching the gap alone would
|
|
25
|
+
* put a leading heading 8px under a hard border while every other heading
|
|
26
|
+
* reads as having ~16px above it, which is the tighter spacing this value
|
|
27
|
+
* exists to avoid.
|
|
28
|
+
*/
|
|
29
|
+
export const DEFAULT_LEADING_SIDEBAR_MENU_GROUP_LABEL_TOP_PADDING = 16;
|
|
15
30
|
export const DEFAULT_DASHBOARD_SIDEBAR_SIZE = {
|
|
16
31
|
desktop_collapsed_width: `4rem`,
|
|
17
32
|
desktop_collapsed_width_classname: `w-[4rem]`,
|
|
@@ -35,6 +50,7 @@ export const DEFAULT_DASHBOARD_SIDEBAR_SIZE = {
|
|
|
35
50
|
// 8px === gap-2 === sidebar_menu_item_gap_classname. See the doc comment on
|
|
36
51
|
// the interface field before changing this.
|
|
37
52
|
sidebar_expanded_menu_group_label_bottom_padding: 8,
|
|
53
|
+
sidebar_leading_menu_group_label_top_padding: DEFAULT_LEADING_SIDEBAR_MENU_GROUP_LABEL_TOP_PADDING,
|
|
38
54
|
sidebar_and_header_z_index_classname: "z-40",
|
|
39
55
|
sidebar_menu_item_gap_classname: "gap-2",
|
|
40
56
|
sidebar_menu_item_x_margin_classname: "mx-2",
|
package/dist/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-sizing.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dashboard-sidebar-sizing.js","sourceRoot":"","sources":["../../../../../src/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-sizing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,yCAAyC,GACpD,gCAAgC,CAAC;AAEnC;;;GAGG;AACH,MAAM,CAAC,MAAM,oCAAoC,GAAG,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"dashboard-sidebar-sizing.js","sourceRoot":"","sources":["../../../../../src/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar-sizing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,yCAAyC,GACpD,gCAAgC,CAAC;AAEnC;;;GAGG;AACH,MAAM,CAAC,MAAM,oCAAoC,GAAG,OAAO,CAAC;AAE5D;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,oDAAoD,GAAG,EAAE,CAAC;AAyEvE,MAAM,CAAC,MAAM,8BAA8B,GAAG;IAC5C,uBAAuB,EAAE,MAAM;IAC/B,iCAAiC,EAAE,UAAU;IAC7C,sBAAsB,EAAE,oCAAoC;IAC5D,2EAA2E;IAC3E,4EAA4E;IAC5E,iEAAiE;IACjE,mEAAmE;IACnE,kDAAkD;IAClD,gCAAgC,EAAE,+CAA+C;IACjF,qBAAqB,EAAE,OAAO;IAC9B,+BAA+B,EAAE,WAAW;IAC5C,aAAa,EAAE,MAAM;IACrB,uBAAuB,EAAE,UAAU;IACnC,sDAAsD,EACpD,6DAA6D;IAC/D,qDAAqD,EACnD,qDAAqD;IACvD,wDAAwD,EACtD,wBAAwB;IAC1B,uDAAuD,EAAE,gBAAgB;IACzE,wBAAwB,EAAE,QAAQ;IAClC,kCAAkC,EAAE,YAAY;IAChD,4EAA4E;IAC5E,4CAA4C;IAC5C,gDAAgD,EAAE,CAAC;IACnD,4CAA4C,EAC1C,oDAAoD;IACtD,oCAAoC,EAAE,MAAM;IAC5C,+BAA+B,EAAE,OAAO;IACxC,oCAAoC,EAAE,MAAM;CACG,CAAC;AAElD,MAAM,CAAC,MAAM,iCAAiC,GAC5C,aAAa,CAA+B,8BAA8B,CAAC,CAAC"}
|
|
@@ -8,14 +8,22 @@ import DashboardLayoutSidebarLayout from "./dashboard-sidebar-layout";
|
|
|
8
8
|
import useDashboardSidebarSizing from "./useDashboardSidebarSizing";
|
|
9
9
|
import { cn } from "../../../../lib/utils";
|
|
10
10
|
import VisuallyHidden from "../../../ui/visually-hidden";
|
|
11
|
+
import { reducedMotionClassName, } from "../dashboard-layout-reduced-motion";
|
|
12
|
+
import { useDashboardLayoutReducedMotionSetting } from "../useDashboardLayoutReducedMotion";
|
|
11
13
|
export function DashboardSidebar(props) {
|
|
12
14
|
const size = useDashboardSidebarSizing();
|
|
13
15
|
const openState = useDashboardSidebarOpenState();
|
|
16
|
+
const reducedMotion = useDashboardLayoutReducedMotionSetting();
|
|
14
17
|
const setOpen = useContext(DashboardSidebarOpenStateDispatchContext);
|
|
15
18
|
if (openState.mobile) {
|
|
16
19
|
return (_jsx(Sheet, { open: openState.open, onOpenChange: (newOpenState) => {
|
|
17
20
|
setOpen(newOpenState);
|
|
18
|
-
}, children: _jsxs(SheetContent, { side: "left", className: cn(size.mobile_expanded_width_classname,
|
|
21
|
+
}, children: _jsxs(SheetContent, { side: "left", className: cn(size.mobile_expanded_width_classname,
|
|
22
|
+
// Reduced motion: the mobile sidebar appears and disappears in
|
|
23
|
+
// place rather than sliding in from the edge of the screen.
|
|
24
|
+
// Radix unmounts the panel as soon as it sees no running
|
|
25
|
+
// animation, so cancelling the keyframes is enough to close it.
|
|
26
|
+
reducedMotionClassName(reducedMotion), props.className), style: {
|
|
19
27
|
zIndex: 1000,
|
|
20
28
|
}, children: [_jsx(VisuallyHidden, { children: _jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: "Sidebar Mobile Navigation Menu" }), _jsx(SheetDescription, { children: "This sidebar contains links for navigating to other pages within this application." })] }) }), _jsx(DashboardLayoutSidebarLayout, { logo: props.logo, wordmark: props.wordmark, Link: props.Link, brandHref: props.brandHref, sidebarFooterContent: props.sidebarFooterContent })] }) }));
|
|
21
29
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dashboard-sidebar.js","sourceRoot":"","sources":["../../../../../src/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAqB,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,4BAA4B,MAAM,gCAAgC,CAAC;AAC1E,OAAO,EAAE,wCAAwC,EAAE,MAAM,gCAAgC,CAAC;AAC1F,OAAO,EACL,KAAK,EACL,YAAY,EACZ,gBAAgB,EAChB,WAAW,EACX,UAAU,GACX,MAAM,uBAAuB,CAAC;AAC/B,OAAO,4BAEN,MAAM,4BAA4B,CAAC;AACpC,OAAO,yBAAyB,MAAM,6BAA6B,CAAC;AACpE,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,cAAc,MAAM,iCAAiC,CAAC;
|
|
1
|
+
{"version":3,"file":"dashboard-sidebar.js","sourceRoot":"","sources":["../../../../../src/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAqB,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,4BAA4B,MAAM,gCAAgC,CAAC;AAC1E,OAAO,EAAE,wCAAwC,EAAE,MAAM,gCAAgC,CAAC;AAC1F,OAAO,EACL,KAAK,EACL,YAAY,EACZ,gBAAgB,EAChB,WAAW,EACX,UAAU,GACX,MAAM,uBAAuB,CAAC;AAC/B,OAAO,4BAEN,MAAM,4BAA4B,CAAC;AACpC,OAAO,yBAAyB,MAAM,6BAA6B,CAAC;AACpE,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,cAAc,MAAM,iCAAiC,CAAC;AAC7D,OAAO,EACL,sBAAsB,GAEvB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,sCAAsC,EAAE,MAAM,oCAAoC,CAAC;AAE5F,MAAM,UAAU,gBAAgB,CAC9B,KAAwC;IAExC,MAAM,IAAI,GAAG,yBAAyB,EAAE,CAAC;IACzC,MAAM,SAAS,GAAG,4BAA4B,EAAE,CAAC;IACjD,MAAM,aAAa,GACjB,sCAAsC,EAAE,CAAC;IAC3C,MAAM,OAAO,GAAG,UAAU,CAAC,wCAAwC,CAAC,CAAC;IACrE,IAAI,SAAS,CAAC,MAAM,EAAE,CAAC;QACrB,OAAO,CACL,KAAC,KAAK,IACJ,IAAI,EAAE,SAAS,CAAC,IAAI,EACpB,YAAY,EAAE,CAAC,YAAqB,EAAQ,EAAE;gBAC5C,OAAO,CAAC,YAAY,CAAC,CAAC;YACxB,CAAC,YAED,MAAC,YAAY,IACX,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,EAAE,CACX,IAAI,CAAC,+BAA+B;gBACpC,+DAA+D;gBAC/D,4DAA4D;gBAC5D,yDAAyD;gBACzD,gEAAgE;gBAChE,sBAAsB,CAAC,aAAa,CAAC,EACrC,KAAK,CAAC,SAAS,CAChB,EACD,KAAK,EAAE;oBACL,MAAM,EAAE,IAAI;iBACb,aAED,KAAC,cAAc,cACb,MAAC,WAAW,eACV,KAAC,UAAU,iDAA4C,EACvD,KAAC,gBAAgB,qGAGE,IACP,GACC,EACjB,KAAC,4BAA4B,IAC3B,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,oBAAoB,EAAE,KAAK,CAAC,oBAAoB,GAChD,IACW,GACT,CACT,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,OAAO,CACL,KAAC,4BAA4B,IAC3B,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,oBAAoB,EAAE,KAAK,CAAC,oBAAoB,EAChD,SAAS,EAAE,KAAK,CAAC,SAAS,GAC1B,CACH,CAAC;IACJ,CAAC;AACH,CAAC;AAED,eAAe,gBAAgB,CAAC"}
|
|
@@ -9,5 +9,5 @@ export type { DashboardSidebarItemDefinition } from "./dashboard-sidebar-item-de
|
|
|
9
9
|
export type { DashboardSidebarItemGroupDefinition } from "./dashboard-sidebar-item-group";
|
|
10
10
|
export type { DashboardSidebarItemsAndGroupsDefinitions } from "./dashboard-sidebar-items-and-groups-context";
|
|
11
11
|
export type { DashboardLayoutSidebarSizing } from "./dashboard-sidebar-sizing";
|
|
12
|
-
export { DASHBOARD_SIDEBAR_OPEN_WIDTH_CSS_VARIABLE, DEFAULT_DASHBOARD_SIDEBAR_OPEN_WIDTH, } from "./dashboard-sidebar-sizing";
|
|
12
|
+
export { DASHBOARD_SIDEBAR_OPEN_WIDTH_CSS_VARIABLE, DEFAULT_DASHBOARD_SIDEBAR_OPEN_WIDTH, DEFAULT_LEADING_SIDEBAR_MENU_GROUP_LABEL_TOP_PADDING, } from "./dashboard-sidebar-sizing";
|
|
13
13
|
export type { IDashboardSidebarOpenStateContextType } from "./dashboard-sidebar-open-state";
|
|
@@ -5,5 +5,5 @@ export { useDashboardSidebarSizing } from "./useDashboardSidebarSizing";
|
|
|
5
5
|
export { useDashboardSidebarOpenStateDispatch } from "./useDashboardSidebarOpenStateDispatch";
|
|
6
6
|
export { useCloseDashboardSidebarOnRouteChange } from "./useCloseDashboardSidebarOnRouteChange";
|
|
7
7
|
export { DashboardSidebarContextProvider } from "./dashboard-sidebar-context-provider";
|
|
8
|
-
export { DASHBOARD_SIDEBAR_OPEN_WIDTH_CSS_VARIABLE, DEFAULT_DASHBOARD_SIDEBAR_OPEN_WIDTH, } from "./dashboard-sidebar-sizing";
|
|
8
|
+
export { DASHBOARD_SIDEBAR_OPEN_WIDTH_CSS_VARIABLE, DEFAULT_DASHBOARD_SIDEBAR_OPEN_WIDTH, DEFAULT_LEADING_SIDEBAR_MENU_GROUP_LABEL_TOP_PADDING, } from "./dashboard-sidebar-sizing";
|
|
9
9
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/layout/dashboard-layout/dashboard-sidebar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,gBAAgB,IAAI,OAAO,GAC5B,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,6BAA6B,EAAE,MAAM,oCAAoC,CAAC;AAEnF,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAC9E,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,oCAAoC,EAAE,MAAM,wCAAwC,CAAC;AAC9F,OAAO,EAAE,qCAAqC,EAAE,MAAM,yCAAyC,CAAC;AAEhG,OAAO,EAAE,+BAA+B,EAAE,MAAM,sCAAsC,CAAC;AAMvF,OAAO,EACL,yCAAyC,EACzC,oCAAoC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/layout/dashboard-layout/dashboard-sidebar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,gBAAgB,IAAI,OAAO,GAC5B,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,6BAA6B,EAAE,MAAM,oCAAoC,CAAC;AAEnF,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAC9E,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,oCAAoC,EAAE,MAAM,wCAAwC,CAAC;AAC9F,OAAO,EAAE,qCAAqC,EAAE,MAAM,yCAAyC,CAAC;AAEhG,OAAO,EAAE,+BAA+B,EAAE,MAAM,sCAAsC,CAAC;AAMvF,OAAO,EACL,yCAAyC,EACzC,oCAAoC,EACpC,oDAAoD,GACrD,MAAM,4BAA4B,CAAC"}
|
|
@@ -2,6 +2,9 @@ export * from "./dashboard-layout";
|
|
|
2
2
|
export type * from "./dashboard-layout";
|
|
3
3
|
export { DashboardLayout as default } from "./dashboard-layout";
|
|
4
4
|
export type * from "./customizable-dashboard-component-type";
|
|
5
|
+
export type { DashboardLayoutReducedMotionSetting } from "./dashboard-layout-reduced-motion";
|
|
6
|
+
export { DEFAULT_DASHBOARD_LAYOUT_REDUCED_MOTION_SETTING } from "./dashboard-layout-reduced-motion";
|
|
7
|
+
export { useDashboardLayoutReducedMotion } from "./useDashboardLayoutReducedMotion";
|
|
5
8
|
export { useDashboardSidebarOpenState, useDashboardSidebarOpenStateDispatch, useCloseDashboardSidebarOnRouteChange, } from "./dashboard-sidebar";
|
|
6
9
|
export type { DashboardSidebarItemDefinition, DashboardSidebarItemGroupDefinition, DashboardSidebarItemsAndGroupsDefinitions, } from "./dashboard-sidebar";
|
|
7
|
-
export { DASHBOARD_SIDEBAR_OPEN_WIDTH_CSS_VARIABLE, DEFAULT_DASHBOARD_SIDEBAR_OPEN_WIDTH, } from "./dashboard-sidebar";
|
|
10
|
+
export { DASHBOARD_SIDEBAR_OPEN_WIDTH_CSS_VARIABLE, DEFAULT_DASHBOARD_SIDEBAR_OPEN_WIDTH, DEFAULT_LEADING_SIDEBAR_MENU_GROUP_LABEL_TOP_PADDING, } from "./dashboard-sidebar";
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
export * from "./dashboard-layout";
|
|
2
2
|
export { DashboardLayout as default } from "./dashboard-layout";
|
|
3
|
+
export { DEFAULT_DASHBOARD_LAYOUT_REDUCED_MOTION_SETTING } from "./dashboard-layout-reduced-motion";
|
|
4
|
+
// Exported so consumer-supplied top bar / sidebar footer components can match
|
|
5
|
+
// the motion of the layout chrome they are rendered into.
|
|
6
|
+
export { useDashboardLayoutReducedMotion } from "./useDashboardLayoutReducedMotion";
|
|
3
7
|
export { useDashboardSidebarOpenState, useDashboardSidebarOpenStateDispatch, useCloseDashboardSidebarOnRouteChange, } from "./dashboard-sidebar";
|
|
4
|
-
export { DASHBOARD_SIDEBAR_OPEN_WIDTH_CSS_VARIABLE, DEFAULT_DASHBOARD_SIDEBAR_OPEN_WIDTH, } from "./dashboard-sidebar";
|
|
8
|
+
export { DASHBOARD_SIDEBAR_OPEN_WIDTH_CSS_VARIABLE, DEFAULT_DASHBOARD_SIDEBAR_OPEN_WIDTH, DEFAULT_LEADING_SIDEBAR_MENU_GROUP_LABEL_TOP_PADDING, } from "./dashboard-sidebar";
|
|
5
9
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/layout/dashboard-layout/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AAEnC,OAAO,EAAE,eAAe,IAAI,OAAO,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/layout/dashboard-layout/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AAEnC,OAAO,EAAE,eAAe,IAAI,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAKhE,OAAO,EAAE,+CAA+C,EAAE,MAAM,mCAAmC,CAAC;AACpG,8EAA8E;AAC9E,0DAA0D;AAC1D,OAAO,EAAE,+BAA+B,EAAE,MAAM,mCAAmC,CAAC;AAEpF,OAAO,EACL,4BAA4B,EAC5B,oCAAoC,EACpC,qCAAqC,GACtC,MAAM,qBAAqB,CAAC;AAM7B,OAAO,EACL,yCAAyC,EACzC,oCAAoC,EACpC,oDAAoD,GACrD,MAAM,qBAAqB,CAAC"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { type DashboardLayoutReducedMotionSetting } from "./dashboard-layout-reduced-motion";
|
|
2
|
+
/**
|
|
3
|
+
* The reduced-motion setting in force for the surrounding dashboard layout.
|
|
4
|
+
*
|
|
5
|
+
* `DashboardLayout` publishes its resolved setting through Framer Motion's
|
|
6
|
+
* `MotionConfig`, so this reads it straight back out — no second context to
|
|
7
|
+
* keep in step. Pair it with
|
|
8
|
+
* {@link ./dashboard-layout-reduced-motion!reducedMotionClassName} on any
|
|
9
|
+
* element of the layout that animates in CSS.
|
|
10
|
+
*/
|
|
11
|
+
export declare function useDashboardLayoutReducedMotionSetting(): DashboardLayoutReducedMotionSetting;
|
|
12
|
+
/**
|
|
13
|
+
* Whether the dashboard layout should skip its animations right now.
|
|
14
|
+
*
|
|
15
|
+
* Accounts for both the `prefers-reduced-motion` media query and the layout's
|
|
16
|
+
* `reducedMotion` prop. Use it for the animations that run in JavaScript —
|
|
17
|
+
* Framer Motion's `layout` reflow and animation durations — where a decision
|
|
18
|
+
* has to be made rather than a media query declared. Exported so
|
|
19
|
+
* consumer-supplied top bar and sidebar footer components can match the
|
|
20
|
+
* layout chrome they are rendered into.
|
|
21
|
+
*/
|
|
22
|
+
export declare function useDashboardLayoutReducedMotion(): boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Resolve `DashboardLayout`'s `reducedMotion` prop into the setting it hands
|
|
25
|
+
* to `MotionConfig` for its subtree.
|
|
26
|
+
*
|
|
27
|
+
* When the prop is omitted the default is `"user"`: the layout opts into
|
|
28
|
+
* honouring `prefers-reduced-motion`, unlike Framer Motion, which defaults to
|
|
29
|
+
* `"never"`. An enclosing `MotionConfig` that has already forced
|
|
30
|
+
* `reducedMotion="always"` (an app-wide "reduce motion" preference) is
|
|
31
|
+
* inherited rather than relaxed back to the media query; an enclosing
|
|
32
|
+
* `"never"` is not, since ignoring the viewer's setting should have to be
|
|
33
|
+
* opted into on the layout itself.
|
|
34
|
+
*/
|
|
35
|
+
export declare function useResolvedDashboardLayoutReducedMotionSetting(setting?: DashboardLayoutReducedMotionSetting): DashboardLayoutReducedMotionSetting;
|
|
36
|
+
export default useDashboardLayoutReducedMotion;
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { useContext } from "react";
|
|
3
|
+
import { MotionConfigContext, useReducedMotionConfig } from "../../../framer-motion";
|
|
4
|
+
import { DEFAULT_DASHBOARD_LAYOUT_REDUCED_MOTION_SETTING, } from "./dashboard-layout-reduced-motion";
|
|
5
|
+
/**
|
|
6
|
+
* The reduced-motion setting in force for the surrounding dashboard layout.
|
|
7
|
+
*
|
|
8
|
+
* `DashboardLayout` publishes its resolved setting through Framer Motion's
|
|
9
|
+
* `MotionConfig`, so this reads it straight back out — no second context to
|
|
10
|
+
* keep in step. Pair it with
|
|
11
|
+
* {@link ./dashboard-layout-reduced-motion!reducedMotionClassName} on any
|
|
12
|
+
* element of the layout that animates in CSS.
|
|
13
|
+
*/
|
|
14
|
+
export function useDashboardLayoutReducedMotionSetting() {
|
|
15
|
+
return (useContext(MotionConfigContext).reducedMotion ??
|
|
16
|
+
DEFAULT_DASHBOARD_LAYOUT_REDUCED_MOTION_SETTING);
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* Whether the dashboard layout should skip its animations right now.
|
|
20
|
+
*
|
|
21
|
+
* Accounts for both the `prefers-reduced-motion` media query and the layout's
|
|
22
|
+
* `reducedMotion` prop. Use it for the animations that run in JavaScript —
|
|
23
|
+
* Framer Motion's `layout` reflow and animation durations — where a decision
|
|
24
|
+
* has to be made rather than a media query declared. Exported so
|
|
25
|
+
* consumer-supplied top bar and sidebar footer components can match the
|
|
26
|
+
* layout chrome they are rendered into.
|
|
27
|
+
*/
|
|
28
|
+
export function useDashboardLayoutReducedMotion() {
|
|
29
|
+
// `useReducedMotionConfig()` is `boolean | null`; null only means the media
|
|
30
|
+
// query has not been read, which is not a preference for reduced motion.
|
|
31
|
+
return useReducedMotionConfig() === true;
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* Resolve `DashboardLayout`'s `reducedMotion` prop into the setting it hands
|
|
35
|
+
* to `MotionConfig` for its subtree.
|
|
36
|
+
*
|
|
37
|
+
* When the prop is omitted the default is `"user"`: the layout opts into
|
|
38
|
+
* honouring `prefers-reduced-motion`, unlike Framer Motion, which defaults to
|
|
39
|
+
* `"never"`. An enclosing `MotionConfig` that has already forced
|
|
40
|
+
* `reducedMotion="always"` (an app-wide "reduce motion" preference) is
|
|
41
|
+
* inherited rather than relaxed back to the media query; an enclosing
|
|
42
|
+
* `"never"` is not, since ignoring the viewer's setting should have to be
|
|
43
|
+
* opted into on the layout itself.
|
|
44
|
+
*/
|
|
45
|
+
export function useResolvedDashboardLayoutReducedMotionSetting(setting) {
|
|
46
|
+
const inheritedSetting = useContext(MotionConfigContext).reducedMotion;
|
|
47
|
+
if (setting !== undefined) {
|
|
48
|
+
return setting;
|
|
49
|
+
}
|
|
50
|
+
return inheritedSetting === "always"
|
|
51
|
+
? "always"
|
|
52
|
+
: DEFAULT_DASHBOARD_LAYOUT_REDUCED_MOTION_SETTING;
|
|
53
|
+
}
|
|
54
|
+
export default useDashboardLayoutReducedMotion;
|
|
55
|
+
//# sourceMappingURL=useDashboardLayoutReducedMotion.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDashboardLayoutReducedMotion.js","sourceRoot":"","sources":["../../../../src/components/layout/dashboard-layout/useDashboardLayoutReducedMotion.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAC9E,OAAO,EACL,+CAA+C,GAEhD,MAAM,mCAAmC,CAAC;AAE3C;;;;;;;;GAQG;AACH,MAAM,UAAU,sCAAsC;IACpD,OAAO,CACL,UAAU,CAAC,mBAAmB,CAAC,CAAC,aAAa;QAC7C,+CAA+C,CAChD,CAAC;AACJ,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,UAAU,+BAA+B;IAC7C,4EAA4E;IAC5E,yEAAyE;IACzE,OAAO,sBAAsB,EAAE,KAAK,IAAI,CAAC;AAC3C,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,8CAA8C,CAC5D,OAA6C;IAE7C,MAAM,gBAAgB,GACpB,UAAU,CAAC,mBAAmB,CAAC,CAAC,aAAa,CAAC;IAEhD,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC1B,OAAO,OAAO,CAAC;IACjB,CAAC;IACD,OAAO,gBAAgB,KAAK,QAAQ;QAClC,CAAC,CAAC,QAAQ;QACV,CAAC,CAAC,+CAA+C,CAAC;AACtD,CAAC;AAED,eAAe,+BAA+B,CAAC"}
|
package/dist/components/layout/dashboard-layout/useToggleDashboardLayoutCollapsedTransitionTime.d.ts
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The duration, in seconds, of the sidebar expand/collapse animations.
|
|
3
|
+
*
|
|
4
|
+
* `0` when motion is reduced, so the wordmark and the group labels appear and
|
|
5
|
+
* disappear with the sidebar instead of scaling and fading over a third of a
|
|
6
|
+
* second. The staggered delays in those variants are derived from this same
|
|
7
|
+
* value, so they collapse to `0` along with it.
|
|
8
|
+
*
|
|
9
|
+
* Framer Motion's own `reducedMotion` handling only switches off *transform*
|
|
10
|
+
* and layout animations; the width, height and padding animations in the
|
|
11
|
+
* sidebar are none of those, which is why the duration is zeroed explicitly.
|
|
12
|
+
*/
|
|
13
|
+
export declare function useToggleDashboardLayoutCollapsedTransitionTime(): number;
|
|
14
|
+
export default useToggleDashboardLayoutCollapsedTransitionTime;
|
package/dist/components/layout/dashboard-layout/useToggleDashboardLayoutCollapsedTransitionTime.js
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import toggleDashboardLayoutCollapsedTransitionTime from "./toggle-dashboard-layout-collapsed-transition-time";
|
|
3
|
+
import useDashboardLayoutReducedMotion from "./useDashboardLayoutReducedMotion";
|
|
4
|
+
/**
|
|
5
|
+
* The duration, in seconds, of the sidebar expand/collapse animations.
|
|
6
|
+
*
|
|
7
|
+
* `0` when motion is reduced, so the wordmark and the group labels appear and
|
|
8
|
+
* disappear with the sidebar instead of scaling and fading over a third of a
|
|
9
|
+
* second. The staggered delays in those variants are derived from this same
|
|
10
|
+
* value, so they collapse to `0` along with it.
|
|
11
|
+
*
|
|
12
|
+
* Framer Motion's own `reducedMotion` handling only switches off *transform*
|
|
13
|
+
* and layout animations; the width, height and padding animations in the
|
|
14
|
+
* sidebar are none of those, which is why the duration is zeroed explicitly.
|
|
15
|
+
*/
|
|
16
|
+
export function useToggleDashboardLayoutCollapsedTransitionTime() {
|
|
17
|
+
const reduced = useDashboardLayoutReducedMotion();
|
|
18
|
+
return reduced ? 0 : toggleDashboardLayoutCollapsedTransitionTime;
|
|
19
|
+
}
|
|
20
|
+
export default useToggleDashboardLayoutCollapsedTransitionTime;
|
|
21
|
+
//# sourceMappingURL=useToggleDashboardLayoutCollapsedTransitionTime.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useToggleDashboardLayoutCollapsedTransitionTime.js","sourceRoot":"","sources":["../../../../src/components/layout/dashboard-layout/useToggleDashboardLayoutCollapsedTransitionTime.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,4CAA4C,MAAM,qDAAqD,CAAC;AAC/G,OAAO,+BAA+B,MAAM,mCAAmC,CAAC;AAEhF;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,+CAA+C;IAC7D,MAAM,OAAO,GAAY,+BAA+B,EAAE,CAAC;IAC3D,OAAO,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,4CAA4C,CAAC;AACpE,CAAC;AAED,eAAe,+CAA+C,CAAC"}
|
package/dist/framer-motion.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { m, animate, AnimatePresence, domAnimation, LazyMotion, Reorder, useAnimate, useAnimationFrame, useTransform, useMotionValue, usePresence, useScroll, useSpring, useMotionValueEvent, useReducedMotion, } from "framer-motion";
|
|
2
|
-
export type { MotionValue, AnimationScope } from "framer-motion";
|
|
1
|
+
export { m, animate, AnimatePresence, domAnimation, LazyMotion, MotionConfig, MotionConfigContext, Reorder, useAnimate, useAnimationFrame, useTransform, useMotionValue, usePresence, useScroll, useSpring, useMotionValueEvent, useReducedMotion, useReducedMotionConfig, } from "framer-motion";
|
|
2
|
+
export type { MotionValue, AnimationScope, MotionConfigProps, } from "framer-motion";
|
package/dist/framer-motion.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
export { m, animate, AnimatePresence, domAnimation, LazyMotion, Reorder, useAnimate, useAnimationFrame, useTransform, useMotionValue, usePresence, useScroll, useSpring, useMotionValueEvent, useReducedMotion, } from "framer-motion";
|
|
2
|
+
export { m, animate, AnimatePresence, domAnimation, LazyMotion, MotionConfig, MotionConfigContext, Reorder, useAnimate, useAnimationFrame, useTransform, useMotionValue, usePresence, useScroll, useSpring, useMotionValueEvent, useReducedMotion, useReducedMotionConfig, } from "framer-motion";
|
|
3
3
|
//# sourceMappingURL=framer-motion.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"framer-motion.js","sourceRoot":"","sources":["../src/framer-motion.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EACL,CAAC,EACD,OAAO,EACP,eAAe,EACf,YAAY,EACZ,UAAU,EACV,OAAO,EACP,UAAU,EACV,iBAAiB,EACjB,YAAY,EACZ,cAAc,EACd,WAAW,EACX,SAAS,EACT,SAAS,EACT,mBAAmB,EACnB,gBAAgB,
|
|
1
|
+
{"version":3,"file":"framer-motion.js","sourceRoot":"","sources":["../src/framer-motion.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EACL,CAAC,EACD,OAAO,EACP,eAAe,EACf,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,mBAAmB,EACnB,OAAO,EACP,UAAU,EACV,iBAAiB,EACjB,YAAY,EACZ,cAAc,EACd,WAAW,EACX,SAAS,EACT,SAAS,EACT,mBAAmB,EACnB,gBAAgB,EAChB,sBAAsB,GACvB,MAAM,eAAe,CAAC"}
|