@schemavaults/ui 0.101.0 → 0.102.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 +3 -1
- 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.js +13 -6
- 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.js +9 -1
- package/dist/components/layout/dashboard-layout/dashboard-sidebar/dashboard-sidebar.js.map +1 -1
- package/dist/components/layout/dashboard-layout/index.d.ts +3 -0
- package/dist/components/layout/dashboard-layout/index.js +4 -0
- 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,6 +36,7 @@ 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
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) => {
|
|
40
42
|
if (block.kind === "group") {
|
|
@@ -42,7 +44,7 @@ export function DashboardSidebarContent({ Link, }) {
|
|
|
42
44
|
return (_jsx(DashboardSidebarItemGroupRenderer, { group: group, Link: Link }, `sidebar-group-[${group.title}]`));
|
|
43
45
|
}
|
|
44
46
|
const firstItemTitle = block.items[0].title;
|
|
45
|
-
return (_jsx(m.ul, { layout:
|
|
47
|
+
return (_jsx(m.ul, { layout: !reducedMotion, className: cn("w-full flex flex-col", "items-start justify-start", sizes.sidebar_menu_item_gap_classname,
|
|
46
48
|
// The <nav> is a scrolling flex column; without this the run
|
|
47
49
|
// would be squashed once the menu overflows.
|
|
48
50
|
"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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"}
|
|
@@ -6,19 +6,23 @@ 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
|
export function DashboardSidebarItemGroupRenderer({ group, Link, }) {
|
|
12
14
|
const groupTitle = group.title;
|
|
13
15
|
const openState = useDashboardSidebarOpenState();
|
|
14
16
|
const sizes = useDashboardSidebarSizing();
|
|
17
|
+
const reducedMotion = useDashboardLayoutReducedMotion();
|
|
18
|
+
const transitionTime = useToggleDashboardLayoutCollapsedTransitionTime();
|
|
15
19
|
const groupItemsContainerId = `sidebar-group-items-[${group.title}]`;
|
|
16
20
|
const showGroupLabel = openState.mobile || openState.open;
|
|
17
21
|
return (_jsxs(m.div, { className: cn("w-full", "flex flex-col flex-nowrap", "items-start justify-start",
|
|
18
22
|
// The menu <nav> is a scrolling flex column, so its children shrink
|
|
19
23
|
// by default once the menu overflows. Keep the group at its natural
|
|
20
24
|
// height and let the <nav> scroll instead.
|
|
21
|
-
"flex-shrink-0"), layout:
|
|
25
|
+
"flex-shrink-0"), layout: !reducedMotion, children: [_jsx(AnimatePresence, { children: showGroupLabel && (_jsx(m.div, { className: "w-full text-nowrap", initial: {
|
|
22
26
|
scale: 0,
|
|
23
27
|
opacity: 0,
|
|
24
28
|
width: 0,
|
|
@@ -35,9 +39,12 @@ export function DashboardSidebarItemGroupRenderer({ group, Link, }) {
|
|
|
35
39
|
display: "block",
|
|
36
40
|
paddingBottom: sizes.sidebar_expanded_menu_group_label_bottom_padding,
|
|
37
41
|
transition: {
|
|
38
|
-
duration:
|
|
42
|
+
duration: transitionTime,
|
|
39
43
|
ease: toggleDashboardLayoutCollapsedTransitionEasing,
|
|
40
|
-
|
|
44
|
+
// Both zero when motion is reduced, so the heading is present
|
|
45
|
+
// as soon as the sidebar is open instead of easing in behind
|
|
46
|
+
// it.
|
|
47
|
+
delay: transitionTime / 1.5,
|
|
41
48
|
},
|
|
42
49
|
}, exit: {
|
|
43
50
|
scale: 0,
|
|
@@ -49,7 +56,7 @@ export function DashboardSidebarItemGroupRenderer({ group, Link, }) {
|
|
|
49
56
|
},
|
|
50
57
|
paddingBottom: 0,
|
|
51
58
|
transition: {
|
|
52
|
-
duration:
|
|
59
|
+
duration: transitionTime,
|
|
53
60
|
ease: toggleDashboardLayoutCollapsedTransitionEasing,
|
|
54
61
|
delay: 0,
|
|
55
62
|
},
|
|
@@ -63,7 +70,7 @@ export function DashboardSidebarItemGroupRenderer({ group, Link, }) {
|
|
|
63
70
|
style: {
|
|
64
71
|
paddingLeft: sizes.desktop_collapsed_width,
|
|
65
72
|
paddingRight: "0.5rem",
|
|
66
|
-
}, children: groupTitle }) }, "sidebar-item-group-label")) }), _jsx(DashboardSidebarAdminOnlyItemsContext.Provider, { value: group.adminOnly ?? false, children: _jsx(m.ul, { id: groupItemsContainerId, layout:
|
|
73
|
+
}, 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
74
|
return (_jsx(DashboardSidebarItemRenderer, { item: item, Link: Link }, `sidebar-item-[${groupTitle}]-[${item.title}]`));
|
|
68
75
|
}) }) })] }, `sidebar-group-[${group.title}]`));
|
|
69
76
|
}
|
|
@@ -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"}
|
|
@@ -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"}
|
|
@@ -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
10
|
export { DASHBOARD_SIDEBAR_OPEN_WIDTH_CSS_VARIABLE, DEFAULT_DASHBOARD_SIDEBAR_OPEN_WIDTH, } 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
8
|
export { DASHBOARD_SIDEBAR_OPEN_WIDTH_CSS_VARIABLE, DEFAULT_DASHBOARD_SIDEBAR_OPEN_WIDTH, } 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,GACrC,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"}
|