@danxbot/ui 3.3.1 → 3.4.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/index.js +745 -700
- package/dist/index.js.map +1 -1
- package/dist/types/components/AppShell.d.ts +39 -1
- package/package.json +2 -2
|
@@ -52,7 +52,45 @@ export interface AppShellProps {
|
|
|
52
52
|
* @default "Main"
|
|
53
53
|
*/
|
|
54
54
|
navLabel?: string;
|
|
55
|
+
/**
|
|
56
|
+
* Which box scrolls when the content is taller than the screen.
|
|
57
|
+
*
|
|
58
|
+
* `"content"` — the default, and what an application shell IS. The shell is
|
|
59
|
+
* exactly the viewport, the header and sidebar are fixed by structure, and
|
|
60
|
+
* the content column scrolls itself. A screen that wants to fill the height
|
|
61
|
+
* it has been given writes `flex-1 min-h-0` and never names a viewport unit
|
|
62
|
+
* or one of this library's tokens.
|
|
63
|
+
*
|
|
64
|
+
* `"document"` — the shell grows with its content and the PAGE scrolls, with
|
|
65
|
+
* the header and sidebar stuck to the top. For a shell embedded in a longer
|
|
66
|
+
* document, or a page whose content genuinely wants the browser's own
|
|
67
|
+
* scrollbar. It is the opt-out rather than the default, deliberately: the
|
|
68
|
+
* bounded arrangement is the one nobody has to compute anything for, and a
|
|
69
|
+
* default that made consumers subtract a header height from `100dvh` is what
|
|
70
|
+
* this prop exists to have stopped.
|
|
71
|
+
*
|
|
72
|
+
* @default "content"
|
|
73
|
+
*/
|
|
74
|
+
scroll?: "content" | "document";
|
|
75
|
+
/**
|
|
76
|
+
* Change this to send the content back to the top — a route path, a record
|
|
77
|
+
* id, whatever identifies "a different screen is showing now".
|
|
78
|
+
*
|
|
79
|
+
* IT EXISTS BECAUSE BOUNDING THE SHELL MOVED THE SCROLLER. Every routed
|
|
80
|
+
* application resets the scroll on navigation, and while the DOCUMENT was
|
|
81
|
+
* the scroller they all wrote `window.scrollTo({ top: 0 })`. That line is
|
|
82
|
+
* inert here: the window no longer scrolls, so a route change would leave
|
|
83
|
+
* the new screen opened halfway down with nothing to indicate why.
|
|
84
|
+
*
|
|
85
|
+
* The alternative was to hand out a ref and let each consumer scroll it,
|
|
86
|
+
* which is the same work in every application plus a piece of this
|
|
87
|
+
* component's internals in all of them. The scroller stays private; the
|
|
88
|
+
* element also carries `data-app-shell-content` for the rarer jobs — scroll
|
|
89
|
+
* restoration on a back navigation, an intersection observer — that need the
|
|
90
|
+
* box itself.
|
|
91
|
+
*/
|
|
92
|
+
scrollResetKey?: string | number;
|
|
55
93
|
children: ReactNode;
|
|
56
94
|
className?: string;
|
|
57
95
|
}
|
|
58
|
-
export declare function AppShell({ brand, sections, activeId, sidebarFooter, header, contentLandmark, navLabel, children, className, }: AppShellProps): import("react").JSX.Element;
|
|
96
|
+
export declare function AppShell({ brand, sections, activeId, sidebarFooter, header, contentLandmark, navLabel, scroll, scrollResetKey, children, className, }: AppShellProps): import("react").JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@danxbot/ui",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.4.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Danxbot — a domain-agnostic React design system with motion as a first-class primitive.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
"gates": "npm run shoot && npm run a11y && node scripts/shoot-overlays.mjs && npm run probe",
|
|
70
70
|
"a11y": "node scripts/a11y-scan.mjs",
|
|
71
71
|
"shoot": "node scripts/shoot.mjs",
|
|
72
|
-
"probe": "node scripts/probe-scale.mjs && node scripts/probe-switch.mjs && node scripts/probe-slider.mjs && node scripts/probe-panel.mjs && node scripts/probe-popover-width.mjs && node scripts/probe-api.mjs && node scripts/probe-api-live.mjs && node scripts/probe-tabs-overflow.mjs && node scripts/probe-stat-row.mjs && node scripts/probe-packaging.mjs && node scripts/probe-containment.mjs",
|
|
72
|
+
"probe": "node scripts/probe-scale.mjs && node scripts/probe-switch.mjs && node scripts/probe-slider.mjs && node scripts/probe-panel.mjs && node scripts/probe-popover-width.mjs && node scripts/probe-api.mjs && node scripts/probe-api-live.mjs && node scripts/probe-tabs-overflow.mjs && node scripts/probe-stat-row.mjs && node scripts/probe-packaging.mjs && node scripts/probe-containment.mjs && node scripts/probe-shell.mjs",
|
|
73
73
|
"sync": "node scripts/sync.mjs",
|
|
74
74
|
"visual": "node scripts/visual-docker.mjs",
|
|
75
75
|
"visual:update": "node scripts/visual-docker.mjs --update-snapshots",
|