@sigmela/router 0.7.2 → 0.9.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/CHANGELOG.md +45 -0
- package/README.md +70 -1
- package/dist/Router.d.ts +9 -0
- package/dist/Router.d.ts.map +1 -1
- package/dist/components/Modal.d.ts +10 -3
- package/dist/components/Modal.d.ts.map +1 -1
- package/dist/components/SheetSurface.d.ts +4 -1
- package/dist/components/SheetSurface.d.ts.map +1 -1
- package/dist/index.js +320 -151
- package/dist/index.js.map +1 -1
- package/dist/navigationHistory.d.ts +1 -1
- package/dist/navigationHistory.d.ts.map +1 -1
- package/dist/router.css +95 -9
- package/dist/utils/useMediaQuery.d.ts +5 -0
- package/dist/utils/useMediaQuery.d.ts.map +1 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,51 @@ All notable changes to this package are documented here. The format follows
|
|
|
4
4
|
[Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and the project uses
|
|
5
5
|
[semantic versioning](https://semver.org/).
|
|
6
6
|
|
|
7
|
+
## 0.9.0
|
|
8
|
+
|
|
9
|
+
### Added
|
|
10
|
+
|
|
11
|
+
- `presentation="right"` on `Modal`: a right-side panel at 640px and wider.
|
|
12
|
+
It anchors to the viewport's right edge in either shell mode, fills the
|
|
13
|
+
height minus an 18px margin, slides in and out from the right (300ms) over
|
|
14
|
+
the dimmed backdrop, and closes on backdrop click, Escape or the header
|
|
15
|
+
button. `width` sets its width (default 393px, clamped to the viewport).
|
|
16
|
+
Below 640px it is the regular fullscreen modal, swipe-down included. Modal
|
|
17
|
+
flows (`Router.Modal` with child screens) push inside the panel. With
|
|
18
|
+
`prefers-reduced-motion` it appears and leaves without sliding. This brings
|
|
19
|
+
back the `modalRight` presentation dropped in the 0.4.0 rewrite.
|
|
20
|
+
|
|
21
|
+
### Fixed
|
|
22
|
+
|
|
23
|
+
- The modal backdrop positions itself in `router.css` instead of relying on
|
|
24
|
+
Tailwind utility classes, so it covers the shell in apps without Tailwind.
|
|
25
|
+
|
|
26
|
+
## 0.8.0
|
|
27
|
+
|
|
28
|
+
### Added
|
|
29
|
+
|
|
30
|
+
- `popTo(path)` replaces the URL while playing a Back transition to a parent
|
|
31
|
+
screen in the active secondary stack, including from a cold deep link.
|
|
32
|
+
- Responsive drawer state and optional `desktopCollapsible="icon"` rail.
|
|
33
|
+
`useDrawer()` exposes `isMobile`, `isCollapsed`, and `desktopCollapsible`.
|
|
34
|
+
Desktop preference survives navigation and resizing; mobile navigation
|
|
35
|
+
closes on selection, route changes, Escape, and breakpoint changes.
|
|
36
|
+
- Reduced-motion drawer styles and inert hidden navigation/covered content
|
|
37
|
+
in the default layout.
|
|
38
|
+
|
|
39
|
+
### Changed
|
|
40
|
+
|
|
41
|
+
- `isOpen` consistently means visible on mobile or expanded on desktop.
|
|
42
|
+
Custom CSS layouts must add `data-drawer-collapsed` and
|
|
43
|
+
`data-drawer-desktop`; desktop styles no longer invert `data-drawer-open`.
|
|
44
|
+
|
|
45
|
+
### Fixed
|
|
46
|
+
|
|
47
|
+
- Ignore null/boolean conditional route children.
|
|
48
|
+
- Make inactive root stack entries inert and hidden from assistive technology.
|
|
49
|
+
- Only the top stacked sheet responds to Escape.
|
|
50
|
+
- Preserve split pane mounts and local state across responsive resizing.
|
|
51
|
+
|
|
7
52
|
## 0.7.1
|
|
8
53
|
|
|
9
54
|
### Fixed
|
package/README.md
CHANGED
|
@@ -92,6 +92,11 @@ overlay. `goBack()` pops the local stack first, then closes the overlay from its
|
|
|
92
92
|
root. The close button, backdrop tap, Escape, swipe dismissal and
|
|
93
93
|
`useCurrentModal().close()` all dismiss the whole flow from any depth.
|
|
94
94
|
|
|
95
|
+
For URL-hierarchy Back buttons in a split-view secondary pane, call
|
|
96
|
+
`router.popTo(parentPath)`. It replaces the current browser entry instead of
|
|
97
|
+
using browser history, while animating back to the parent screen. Unlike
|
|
98
|
+
`replace()`, it also animates when the parent was not previously mounted.
|
|
99
|
+
|
|
95
100
|
### Content-sized modals
|
|
96
101
|
|
|
97
102
|
A modal covers the viewport by default. Content that renders `<Modal>` with
|
|
@@ -110,6 +115,49 @@ function ProductDetail({ product }) {
|
|
|
110
115
|
}
|
|
111
116
|
```
|
|
112
117
|
|
|
118
|
+
`width` sets the modal surface's preferred desktop width, clamped to the
|
|
119
|
+
viewport with a 24px margin. `height` sets its preferred height on both desktop
|
|
120
|
+
and mobile; desktop keeps a 24px margin, while mobile clamps to the available
|
|
121
|
+
viewport height. Without `height`, mobile modals remain full-screen. Update
|
|
122
|
+
these props while the modal is open to resize the surface without letting its
|
|
123
|
+
content overflow a fixed 600px or 860px frame:
|
|
124
|
+
|
|
125
|
+
```tsx
|
|
126
|
+
<Modal width={previewWidth} height={previewHeight}>
|
|
127
|
+
<Preview />
|
|
128
|
+
</Modal>
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
### Right-side panel
|
|
132
|
+
|
|
133
|
+
`presentation="right"` turns the modal into a side panel at 640px and wider:
|
|
134
|
+
anchored to the right edge of the viewport (in either shell mode), full height
|
|
135
|
+
with an 18px margin, sliding in and out from the right over a dimmed backdrop.
|
|
136
|
+
`width` sets the panel width (default 393px, clamped to the viewport); `height`
|
|
137
|
+
and `size` are ignored. Backdrop click, Escape and the header close button
|
|
138
|
+
dismiss it; there is no swipe. Below 640px it is the regular fullscreen modal,
|
|
139
|
+
swipe-down included. With reduced motion the panel appears and leaves without
|
|
140
|
+
sliding.
|
|
141
|
+
|
|
142
|
+
Declare it from any screen's content. In a modal flow every step declares its
|
|
143
|
+
own options, so give each step the same presentation:
|
|
144
|
+
|
|
145
|
+
```tsx
|
|
146
|
+
<Router.Modal path="cart">
|
|
147
|
+
<Router.Screen element={CartScreen} />
|
|
148
|
+
<Router.Screen path="checkout" element={CheckoutScreen} />
|
|
149
|
+
</Router.Modal>
|
|
150
|
+
|
|
151
|
+
function CartScreen() {
|
|
152
|
+
return (
|
|
153
|
+
<Modal presentation="right" width={460} ariaLabel="Cart">
|
|
154
|
+
<Modal.Header title="Cart" />
|
|
155
|
+
{/* … */}
|
|
156
|
+
</Modal>
|
|
157
|
+
);
|
|
158
|
+
}
|
|
159
|
+
```
|
|
160
|
+
|
|
113
161
|
### Guards that are not decided yet
|
|
114
162
|
|
|
115
163
|
`Router.Protected` answers three states, not two. A guard whose `when` is
|
|
@@ -153,7 +201,28 @@ Semantics worth knowing:
|
|
|
153
201
|
| `useRoute(pattern)` | Match test for an arbitrary pattern |
|
|
154
202
|
| `useHistoryState()` | State passed through `navigate(path, { state })` |
|
|
155
203
|
| `useCurrentModal()` | `close()` / `id` for the overlay a component renders in |
|
|
156
|
-
| `useDrawer()` |
|
|
204
|
+
| `useDrawer()` | Responsive drawer state and controls |
|
|
205
|
+
|
|
206
|
+
### Responsive drawer
|
|
207
|
+
|
|
208
|
+
`Router.Drawer` accepts `desktopCollapsible="offcanvas"` (default) or `"icon"`.
|
|
209
|
+
At widths up to 640px, both modes start hidden and push the content aside when
|
|
210
|
+
opened. Above 640px, the drawer starts expanded; closing either hides it or
|
|
211
|
+
leaves a 56px icon rail. Override `--sigmela-drawer-rail-width` when needed.
|
|
212
|
+
|
|
213
|
+
`useDrawer()` exposes `isMobile`, `isCollapsed`, `isOpen`,
|
|
214
|
+
`desktopCollapsible`, and `open()`, `close()`, `toggle()`. `isOpen` means mobile
|
|
215
|
+
visibility or desktop expansion, not an inverted desktop collapse flag.
|
|
216
|
+
Desktop preference survives item selection and resizing while mounted. Mobile
|
|
217
|
+
visibility closes on navigation, Escape, or crossing the breakpoint.
|
|
218
|
+
|
|
219
|
+
Custom drawer layouts must put `data-drawer-open={drawer.isOpen}`,
|
|
220
|
+
`data-drawer-collapsed={drawer.isCollapsed}` and
|
|
221
|
+
`data-drawer-desktop={drawer.desktopCollapsible}` on `.sigmela-drawer`, with
|
|
222
|
+
`__sidebar`, `__overlay`, and `__main` as direct children. Use `isMobile` to
|
|
223
|
+
place a root screen toggle and to make hidden navigation or covered content
|
|
224
|
+
inert. Keep a desktop toggle accessible in the rail. Controls must delegate
|
|
225
|
+
to this API instead of maintaining a second responsive state.
|
|
157
226
|
|
|
158
227
|
## Theming
|
|
159
228
|
|
package/dist/Router.d.ts
CHANGED
|
@@ -115,6 +115,8 @@ export interface RouterDrawerItemProps extends RouterRouteProps {
|
|
|
115
115
|
hidden?: boolean;
|
|
116
116
|
}
|
|
117
117
|
export interface RouterDrawerProps extends RouterRouteProps {
|
|
118
|
+
/** Desktop collapse hides the panel or keeps a compact navigation rail. */
|
|
119
|
+
desktopCollapsible?: 'offcanvas' | 'icon';
|
|
118
120
|
/** Persistent content rendered to the right of the active Drawer route. */
|
|
119
121
|
aside?: ReactNode;
|
|
120
122
|
/** Persistent content anchored below the navigation items in the Drawer. */
|
|
@@ -149,13 +151,20 @@ export interface RouterApi {
|
|
|
149
151
|
navigate: RouterNavigateFunction;
|
|
150
152
|
/** Replaces the active screen without adding a browser or router history entry. */
|
|
151
153
|
replace: RouterReplaceFunction;
|
|
154
|
+
/** Replaces the URL while popping to an ancestor screen in the active stack. */
|
|
155
|
+
popTo: RouterReplaceFunction;
|
|
152
156
|
close: (id: string) => void;
|
|
153
157
|
closeAll: () => void;
|
|
154
158
|
/** Closes the top overlay with animation or pops the active router stack. */
|
|
155
159
|
goBack: () => boolean;
|
|
156
160
|
}
|
|
157
161
|
export interface RouterDrawerApi {
|
|
162
|
+
/** Whether the mobile panel is visible or the desktop panel is expanded. */
|
|
158
163
|
isOpen: boolean;
|
|
164
|
+
isMobile: boolean;
|
|
165
|
+
/** True only on desktop when the panel is collapsed. */
|
|
166
|
+
isCollapsed: boolean;
|
|
167
|
+
desktopCollapsible: 'offcanvas' | 'icon';
|
|
159
168
|
open: () => void;
|
|
160
169
|
close: () => void;
|
|
161
170
|
toggle: () => void;
|
package/dist/Router.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Router.d.ts","sourceRoot":"","sources":["../src/Router.tsx"],"names":[],"mappings":"AAAA,OAAO,EAeL,KAAK,aAAa,EAElB,KAAK,WAAW,EAChB,KAAK,GAAG,EAER,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAOL,KAAK,aAAa,EAEnB,MAAM,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"Router.d.ts","sourceRoot":"","sources":["../src/Router.tsx"],"names":[],"mappings":"AAAA,OAAO,EAeL,KAAK,aAAa,EAElB,KAAK,WAAW,EAChB,KAAK,GAAG,EAER,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAOL,KAAK,aAAa,EAEnB,MAAM,QAAQ,CAAC;AAUhB,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AACpE,OAAO,cAAc,CAAC;AAGtB,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAC3D,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,mBAAmB,CAAC;AAgBjE,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AASD,MAAM,MAAM,sBAAsB,GAAG,CACnC,EAAE,EAAE,MAAM,GAAG,MAAM,EACnB,OAAO,CAAC,EAAE,qBAAqB,KAC5B,IAAI,CAAC;AACV,MAAM,MAAM,qBAAqB,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;AAC1F,KAAK,gBAAgB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,sBAAsB,KAAK,CAAC,CAAC,CAAC;AACtE;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,SAAS,CAAC;AACnD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,WAAW,CAAC;AA6BtD,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,iBAAiB,CAAC;IAChC,SAAS,CAAC,EAAE,eAAe,CAAC;CAC7B;AAED,MAAM,WAAW,uBAAwB,SAAQ,sBAAsB;IACrE,YAAY,EAAE,eAAe,CAAC;CAC/B;AAED,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,gBAAgB,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,SAAS,CAAC;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,gBAAgB,GACxB,gBAAgB,GAChB,iBAAiB,GACjB,mBAAmB,CAAC;AAExB,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,eAAe,EAAE,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IACnC,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,KAAK,mBAAmB,GAAG,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,sBAAsB,KAAK,SAAS,CAAC,CAAC;AAEtF,KAAK,kBAAkB,GAAG,SAAS,GAAG,WAAW,CAAC;AAElD,MAAM,WAAW,gBAAgB;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,sBAAsB,KAAK,MAAM,CAAC,CAAC;IAChE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,qBAAqB,CAAC;IAClC,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,MAAM,CAAC,EAAE,WAAW,CAAC,sBAAsB,CAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,mBAAmB,CAAC;CAChC;AAED,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB;IAC7D,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB;IAC7D,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACzD,2EAA2E;IAC3E,kBAAkB,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAC1C,2EAA2E;IAC3E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,4EAA4E;IAC5E,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,WAAW,sBAAuB,SAAQ,gBAAgB;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,wBAAyB,SAAQ,gBAAgB;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,MAAM,wBAAwB,GAAG,gBAAgB,CAAC;AAExD,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB;IAC5D,IAAI,EAAE,gBAAgB,CAAC,gBAAgB,GAAG,SAAS,CAAC,CAAC;IACrD,UAAU,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACrC,iEAAiE;IACjE,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;IAC3D,EAAE,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;CAC9B;AAED,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,sBAAsB,CAAC;IACjC,mFAAmF;IACnF,OAAO,EAAE,qBAAqB,CAAC;IAC/B,gFAAgF;IAChF,KAAK,EAAE,qBAAqB,CAAC;IAC7B,KAAK,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5B,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,6EAA6E;IAC7E,MAAM,EAAE,MAAM,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,eAAe;IAC9B,4EAA4E;IAC5E,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,wDAAwD;IACxD,WAAW,EAAE,OAAO,CAAC;IACrB,kBAAkB,EAAE,WAAW,GAAG,MAAM,CAAC;IACzC,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAUD,UAAU,eAAe;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,eAAe,CAAC;CACzB;AA4xDD,wBAAgB,QAAQ,IAAI,uBAAuB,CAMlD;AAED,wBAAgB,eAAe,IAAI,uBAAuB,CAEzD;AAED,wBAAgB,SAAS,CAAC,OAAO,SAAS,aAAa,GAAG,aAAa,KAAK,OAAO,CAElF;AAED,wBAAgB,eAAe,IAAI,eAAe,CAEjD;AAED,wBAAgB,eAAe,CAAC,MAAM,GAAG,OAAO,KAAK,MAAM,CAE1D;AAED,wBAAgB,SAAS,IAAI,SAAS,CAoCrC;AAED,wBAAgB,SAAS,IAAI,eAAe,CAM3C;AAED,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,0GAA0G;IAC1G,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,6GAA6G;IAC7G,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,wBAAgB,eAAe,IAAI,eAAe,CAMjD;AAwnED,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,2CAUzC;AAiCD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;CAcjB,CAAC"}
|
|
@@ -1,13 +1,20 @@
|
|
|
1
1
|
import { type CSSProperties, type ReactNode } from 'react';
|
|
2
2
|
import type { RouterShellMode } from '../types';
|
|
3
3
|
export declare function useModalSwipeTarget(): (el: HTMLElement | null) => void;
|
|
4
|
-
type ModalPresentation = 'fullscreen' | 'content';
|
|
4
|
+
type ModalPresentation = 'fullscreen' | 'content' | 'right';
|
|
5
5
|
interface ModalProps {
|
|
6
6
|
children: ReactNode;
|
|
7
7
|
swipeToClose?: boolean;
|
|
8
8
|
ariaLabel?: string;
|
|
9
9
|
size?: 'regular' | 'wide';
|
|
10
|
-
/**
|
|
10
|
+
/** Desired desktop surface size; the viewport still constrains it. */
|
|
11
|
+
width?: number;
|
|
12
|
+
height?: number;
|
|
13
|
+
/**
|
|
14
|
+
* 'content' sizes the surface to its content, floored at half the viewport.
|
|
15
|
+
* 'right' is a full-height side panel on desktop (>= 640px); below that it
|
|
16
|
+
* is the regular fullscreen modal.
|
|
17
|
+
*/
|
|
11
18
|
presentation?: ModalPresentation;
|
|
12
19
|
}
|
|
13
20
|
interface ModalFrameProps {
|
|
@@ -21,7 +28,7 @@ interface ModalFrameProps {
|
|
|
21
28
|
activeContentKey?: string;
|
|
22
29
|
}
|
|
23
30
|
export declare function ModalFrame({ children, open, onRequestClose, onExitComplete, zIndex, shell, contentSized, activeContentKey, }: ModalFrameProps): import("react/jsx-runtime").JSX.Element;
|
|
24
|
-
declare function ModalRoot({ children, swipeToClose, ariaLabel, size, presentation, }: ModalProps): import("react/jsx-runtime").JSX.Element;
|
|
31
|
+
declare function ModalRoot({ children, swipeToClose, ariaLabel, size, width, height, presentation, }: ModalProps): import("react/jsx-runtime").JSX.Element;
|
|
25
32
|
interface ModalHeaderProps {
|
|
26
33
|
title?: string;
|
|
27
34
|
leftAction?: ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAQf,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAqBhD,wBAAgB,mBAAmB,IAAI,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAOtE;AAED,KAAK,iBAAiB,GAAG,YAAY,GAAG,SAAS,GAAG,OAAO,CAAC;AAE5D,UAAU,UAAU;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,sEAAsE;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,YAAY,CAAC,EAAE,iBAAiB,CAAC;CAClC;AAgBD,UAAU,eAAe;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,EAAE,OAAO,CAAC;IACd,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,IAAI,EACJ,cAAc,EACd,cAAc,EACd,MAAM,EACN,KAA0B,EAC1B,YAAoB,EACpB,gBAA8C,GAC/C,EAAE,eAAe,2CA+FjB;AAED,iBAAS,SAAS,CAAC,EACjB,QAAQ,EACR,YAAmB,EACnB,SAAS,EACT,IAAgB,EAChB,KAAK,EACL,MAAM,EACN,YAA2B,GAC5B,EAAE,UAAU,2CAUZ;AAED,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,iBAAS,WAAW,CAAC,EACnB,KAAK,EACL,UAAU,EACV,WAAW,EACX,eAAe,EACf,MAAa,GACd,EAAE,gBAAgB,2CAelB;AAED,UAAU,iBAAiB;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,iBAAS,YAAY,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,iBAAiB,2CAI/D;AAED,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,iBAAS,eAAe,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,oBAAoB,2CAW5E;AAED,UAAU,gBAAgB;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,iBAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,gBAAgB,2CAQ7D;AAED,eAAO,MAAM,KAAK;;;;;CAKhB,CAAC"}
|
|
@@ -2,6 +2,8 @@ import { type CSSProperties, type ReactNode } from 'react';
|
|
|
2
2
|
import type { RouterShellMode } from '../types';
|
|
3
3
|
export type SheetSurfaceMode = 'content' | 'fullscreen';
|
|
4
4
|
export type SheetSurfaceCloseTarget = 'surface' | 'viewport';
|
|
5
|
+
/** The viewport edge the surface slides in from. Only 'bottom' can be swiped. */
|
|
6
|
+
export type SheetSurfaceEdge = 'bottom' | 'right';
|
|
5
7
|
interface SheetSurfaceProps {
|
|
6
8
|
children: ReactNode;
|
|
7
9
|
open: boolean;
|
|
@@ -21,7 +23,8 @@ interface SheetSurfaceProps {
|
|
|
21
23
|
ariaLabel?: string;
|
|
22
24
|
shell?: RouterShellMode;
|
|
23
25
|
closeTarget?: SheetSurfaceCloseTarget;
|
|
26
|
+
edge?: SheetSurfaceEdge;
|
|
24
27
|
}
|
|
25
|
-
export declare function SheetSurface({ children, open, onRequestClose, onExitComplete, zIndex, mode, canDismiss, swipeToClose, backdrop, backdropClassName, backdropStyle, shellClassName, surfaceClassName, surfaceStyle, scrollElement, ariaLabel, shell, closeTarget, }: SheetSurfaceProps): import("react/jsx-runtime").JSX.Element;
|
|
28
|
+
export declare function SheetSurface({ children, open, onRequestClose, onExitComplete, zIndex, mode, canDismiss, swipeToClose, backdrop, backdropClassName, backdropStyle, shellClassName, surfaceClassName, surfaceStyle, scrollElement, ariaLabel, shell, closeTarget, edge, }: SheetSurfaceProps): import("react/jsx-runtime").JSX.Element;
|
|
26
29
|
export {};
|
|
27
30
|
//# sourceMappingURL=SheetSurface.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SheetSurface.d.ts","sourceRoot":"","sources":["../../src/components/SheetSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SheetSurface.d.ts","sourceRoot":"","sources":["../../src/components/SheetSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAUf,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAUhD,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,YAAY,CAAC;AACxD,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,UAAU,CAAC;AAC7D,iFAAiF;AACjF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,OAAO,CAAC;AAElD,UAAU,iBAAiB;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,EAAE,OAAO,CAAC;IACd,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,gBAAgB,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAcD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,IAAI,EACJ,cAAc,EACd,cAAc,EACd,MAAM,EACN,IAAI,EACJ,UAAiB,EACjB,YAAmB,EACnB,QAAgB,EAChB,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,aAAa,EACb,SAAS,EACT,KAA0B,EAC1B,WAAuB,EACvB,IAAe,GAChB,EAAE,iBAAiB,2CA+LnB"}
|