@schemavaults/ui 0.100.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/components/ui/index.d.ts +2 -0
- package/dist/components/ui/index.js +1 -0
- package/dist/components/ui/index.js.map +1 -1
- package/dist/components/ui/scatter-plot/index.d.ts +3 -0
- package/dist/components/ui/scatter-plot/index.js +3 -0
- package/dist/components/ui/scatter-plot/index.js.map +1 -0
- package/dist/components/ui/scatter-plot/scatter-plot.d.ts +169 -0
- package/dist/components/ui/scatter-plot/scatter-plot.js +385 -0
- package/dist/components/ui/scatter-plot/scatter-plot.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"}
|