@hanzo/ui 8.10.1 → 8.11.1
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/backends/gui/carousel.cjs +31 -4
- package/dist/backends/gui/carousel.d.ts +11 -0
- package/dist/backends/gui/carousel.d.ts.map +1 -1
- package/dist/backends/gui/carousel.js +31 -4
- package/dist/backends/gui/carousel.js.map +1 -1
- package/dist/backends/gui/drawer.cjs +24 -4
- package/dist/backends/gui/drawer.d.ts +16 -3
- package/dist/backends/gui/drawer.d.ts.map +1 -1
- package/dist/backends/gui/drawer.js +24 -4
- package/dist/backends/gui/drawer.js.map +1 -1
- package/dist/gallery.html +1 -1
- package/package.json +1 -1
|
@@ -201,7 +201,27 @@ const Carousel = ({ options, setApi, onCarouselSelect, className, children, ...p
|
|
|
201
201
|
cancelAnimationFrame(frame);
|
|
202
202
|
};
|
|
203
203
|
}, []);
|
|
204
|
-
|
|
204
|
+
// Advance on its own, unless something says not to. Held over the whole
|
|
205
|
+
// region rather than the scroller, so the pause covers the arrows too.
|
|
206
|
+
const [held, setHeld] = React.useState(false);
|
|
207
|
+
const every = options?.autoplay;
|
|
208
|
+
React.useEffect(() => {
|
|
209
|
+
if (!every || held)
|
|
210
|
+
return;
|
|
211
|
+
if (typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) {
|
|
212
|
+
return;
|
|
213
|
+
}
|
|
214
|
+
const t = setInterval(() => api.current?.scrollNext(), every);
|
|
215
|
+
return () => clearInterval(t);
|
|
216
|
+
}, [every, held]);
|
|
217
|
+
return ((0, jsx_runtime_1.jsx)(CarouselCtx.Provider, { value: { scroller, api, selected, loop, align: options?.align ?? 'center' }, children: (0, jsx_runtime_1.jsx)(box_1.Box, { className: (0, cn_1.cn)('relative', className), role: "region", "aria-roledescription": "carousel", ...(every
|
|
218
|
+
? {
|
|
219
|
+
onMouseEnter: () => setHeld(true),
|
|
220
|
+
onMouseLeave: () => setHeld(false),
|
|
221
|
+
onFocusCapture: () => setHeld(true),
|
|
222
|
+
onBlurCapture: () => setHeld(false),
|
|
223
|
+
}
|
|
224
|
+
: null), ...props, children: children }) }));
|
|
205
225
|
};
|
|
206
226
|
exports.Carousel = Carousel;
|
|
207
227
|
/**
|
|
@@ -219,9 +239,16 @@ const CarouselContent = ({ className, ...props }) => {
|
|
|
219
239
|
style: { scrollbarWidth: 'none' }, ...props }));
|
|
220
240
|
};
|
|
221
241
|
exports.CarouselContent = CarouselContent;
|
|
222
|
-
const
|
|
223
|
-
|
|
224
|
-
|
|
242
|
+
const SNAP = { start: 'snap-start', center: 'snap-center', end: 'snap-end' };
|
|
243
|
+
const CarouselItem = ({ className, ...props }) => {
|
|
244
|
+
// Read directly, not through `useCarousel`: an item is legible on its own and
|
|
245
|
+
// rejecting a loose one would reject markup that works. Centred is the
|
|
246
|
+
// default a carousel would have given it anyway.
|
|
247
|
+
const align = React.useContext(CarouselCtx)?.align ?? 'center';
|
|
248
|
+
return ((0, jsx_runtime_1.jsx)(box_1.Box, { role: "group", "aria-roledescription": "slide",
|
|
249
|
+
// `min-w-0` is what lets a long title wrap instead of widening the column.
|
|
250
|
+
className: (0, cn_1.cn)(SNAP[align], 'min-w-0', className), ...props }));
|
|
251
|
+
};
|
|
225
252
|
exports.CarouselItem = CarouselItem;
|
|
226
253
|
/**
|
|
227
254
|
* The two arrows.
|
|
@@ -25,6 +25,17 @@ export type CarouselOptions = {
|
|
|
25
25
|
loop?: boolean;
|
|
26
26
|
/** The slide it opens on. Default 0. */
|
|
27
27
|
startIndex?: number;
|
|
28
|
+
/** Where a slide settles in the viewport. Default `center`. */
|
|
29
|
+
align?: 'start' | 'center' | 'end';
|
|
30
|
+
/**
|
|
31
|
+
* Advance every N milliseconds.
|
|
32
|
+
*
|
|
33
|
+
* Stops while the pointer is over the carousel or focus is inside it, and
|
|
34
|
+
* never starts at all under `prefers-reduced-motion` — a carousel that moves
|
|
35
|
+
* on its own is the canonical vestibular trigger, and it also steals the
|
|
36
|
+
* slide out from under someone still reading it.
|
|
37
|
+
*/
|
|
38
|
+
autoplay?: number;
|
|
28
39
|
};
|
|
29
40
|
/** What a caller can ask of a mounted carousel. */
|
|
30
41
|
export type CarouselApi = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/carousel.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AAG/B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,MAAM,MAAM,eAAe,GAAG;IAC5B,8DAA8D;IAC9D,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAA;
|
|
1
|
+
{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/carousel.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AAG/B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,MAAM,MAAM,eAAe,GAAG;IAC5B,8DAA8D;IAC9D,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,mDAAmD;AACnD,MAAM,MAAM,WAAW,GAAG;IACxB,uEAAuE;IACvE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,+DAA+D;IAC/D,kBAAkB,EAAE,MAAM,MAAM,CAAA;IAChC,aAAa,EAAE,MAAM,OAAO,CAAA;IAC5B,aAAa,EAAE,MAAM,OAAO,CAAA;IAC5B,UAAU,EAAE,MAAM,MAAM,CAAA;CACzB,CAAA;AA2DD,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,UAAU,CAAC,GAAG;IAC/E,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,qCAAqC;IACrC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAA;IACnC,2DAA2D;IAC3D,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAA;CAC9C,CAAA;AAED,eAAO,MAAM,QAAQ,yEAOlB,aAAa,4CAgIf,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,4BAA6B,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,4CAexF,CAAA;AAID,eAAO,MAAM,YAAY,4BAA6B,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,4CAcrF,CAAA;AAED,KAAK,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC,CAAA;AA+ClF,eAAO,MAAM,gBAAgB;8BAhCa,UAAU;;CAsCnD,CAAA;AAED,eAAO,MAAM,YAAY;8BAxCiB,UAAU;;CA8CnD,CAAA"}
|
|
@@ -165,7 +165,27 @@ export const Carousel = ({ options, setApi, onCarouselSelect, className, childre
|
|
|
165
165
|
cancelAnimationFrame(frame);
|
|
166
166
|
};
|
|
167
167
|
}, []);
|
|
168
|
-
|
|
168
|
+
// Advance on its own, unless something says not to. Held over the whole
|
|
169
|
+
// region rather than the scroller, so the pause covers the arrows too.
|
|
170
|
+
const [held, setHeld] = React.useState(false);
|
|
171
|
+
const every = options?.autoplay;
|
|
172
|
+
React.useEffect(() => {
|
|
173
|
+
if (!every || held)
|
|
174
|
+
return;
|
|
175
|
+
if (typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) {
|
|
176
|
+
return;
|
|
177
|
+
}
|
|
178
|
+
const t = setInterval(() => api.current?.scrollNext(), every);
|
|
179
|
+
return () => clearInterval(t);
|
|
180
|
+
}, [every, held]);
|
|
181
|
+
return (_jsx(CarouselCtx.Provider, { value: { scroller, api, selected, loop, align: options?.align ?? 'center' }, children: _jsx(Box, { className: cn('relative', className), role: "region", "aria-roledescription": "carousel", ...(every
|
|
182
|
+
? {
|
|
183
|
+
onMouseEnter: () => setHeld(true),
|
|
184
|
+
onMouseLeave: () => setHeld(false),
|
|
185
|
+
onFocusCapture: () => setHeld(true),
|
|
186
|
+
onBlurCapture: () => setHeld(false),
|
|
187
|
+
}
|
|
188
|
+
: null), ...props, children: children }) }));
|
|
169
189
|
};
|
|
170
190
|
/**
|
|
171
191
|
* The scroller itself: one grid ROW, each slide a full-width column.
|
|
@@ -181,9 +201,16 @@ export const CarouselContent = ({ className, ...props }) => {
|
|
|
181
201
|
// pseudo-element, so one lives here and the other in theme.css.
|
|
182
202
|
style: { scrollbarWidth: 'none' }, ...props }));
|
|
183
203
|
};
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
204
|
+
const SNAP = { start: 'snap-start', center: 'snap-center', end: 'snap-end' };
|
|
205
|
+
export const CarouselItem = ({ className, ...props }) => {
|
|
206
|
+
// Read directly, not through `useCarousel`: an item is legible on its own and
|
|
207
|
+
// rejecting a loose one would reject markup that works. Centred is the
|
|
208
|
+
// default a carousel would have given it anyway.
|
|
209
|
+
const align = React.useContext(CarouselCtx)?.align ?? 'center';
|
|
210
|
+
return (_jsx(Box, { role: "group", "aria-roledescription": "slide",
|
|
211
|
+
// `min-w-0` is what lets a long title wrap instead of widening the column.
|
|
212
|
+
className: cn(SNAP[align], 'min-w-0', className), ...props }));
|
|
213
|
+
};
|
|
187
214
|
/**
|
|
188
215
|
* The two arrows.
|
|
189
216
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"carousel.js","sourceRoot":"","sources":["../../../src/backends/gui/carousel.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEpE,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AAC/B,OAAO,EAAE,EAAE,EAAE,MAAM,eAAe,CAAA;AAClC,OAAO,EAAE,EAAE,EAAE,MAAM,UAAU,CAAA;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"carousel.js","sourceRoot":"","sources":["../../../src/backends/gui/carousel.tsx"],"names":[],"mappings":"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"}
|
|
@@ -63,7 +63,7 @@ const useDrawer = () => {
|
|
|
63
63
|
const px = (p, viewport) => typeof p === 'number' ? p * viewport : parseFloat(p) || 0;
|
|
64
64
|
/** A flick: fast enough that where it was pointing matters more than where it stopped. */
|
|
65
65
|
const FLICK = 0.5; // px per ms
|
|
66
|
-
const Drawer = ({ open = false, onOpenChange, modal = true, snapPoints, activeSnapPoint, setActiveSnapPoint, dragHandleOnly = false, fastDragSkipsToEnd = true, handleHandleClicked, extendHandleDragRegion = false, children, }) => {
|
|
66
|
+
const Drawer = ({ open = false, onOpenChange, modal = true, snapPoints, activeSnapPoint, setActiveSnapPoint, dragHandleOnly = false, fastDragSkipsToEnd = true, handleHandleClicked, handleCloseGesture, extendHandleDragRegion = false, children, }) => {
|
|
67
67
|
// The viewport is only known in a browser, and a fractional snap point needs
|
|
68
68
|
// it. Zero on the server means those resolve to zero and the sheet renders
|
|
69
69
|
// closed, which is the right thing to send.
|
|
@@ -77,7 +77,9 @@ const Drawer = ({ open = false, onOpenChange, modal = true, snapPoints, activeSn
|
|
|
77
77
|
const points = snapPoints?.length ? snapPoints : [1];
|
|
78
78
|
const heights = points.map((p) => px(p, viewport));
|
|
79
79
|
const tallest = Math.max(...heights, 0);
|
|
80
|
-
const activePx = activeSnapPoint !== undefined
|
|
80
|
+
const activePx = activeSnapPoint !== undefined && activeSnapPoint !== null
|
|
81
|
+
? px(activeSnapPoint, viewport)
|
|
82
|
+
: tallest;
|
|
81
83
|
const [offset, setOffset] = React.useState(0);
|
|
82
84
|
const [dragging, setDragging] = React.useState(false);
|
|
83
85
|
const snapTo = (target) => {
|
|
@@ -87,6 +89,7 @@ const Drawer = ({ open = false, onOpenChange, modal = true, snapPoints, activeSn
|
|
|
87
89
|
best = h;
|
|
88
90
|
// Below the shortest point by more than half of it, this is a dismissal.
|
|
89
91
|
if (target < Math.min(...heights) / 2) {
|
|
92
|
+
handleCloseGesture?.();
|
|
90
93
|
onOpenChange?.(false);
|
|
91
94
|
return;
|
|
92
95
|
}
|
|
@@ -153,8 +156,22 @@ const DrawerHandle = ({ className, ...props }) => {
|
|
|
153
156
|
}, onPointerDown: drag, onClick: handleHandleClicked, ...props, children: (0, jsx_runtime_1.jsx)(box_1.Box, { className: "rounded-full bg-muted", style: { width: 48, height: 4 } }) }));
|
|
154
157
|
};
|
|
155
158
|
exports.DrawerHandle = DrawerHandle;
|
|
156
|
-
const DrawerContent = ({ className, children, defaultHandle = true, ...props }) => {
|
|
159
|
+
const DrawerContent = ({ className, children, defaultHandle = true, onOpenAutoFocus, ...props }) => {
|
|
157
160
|
const { open, modal, heights, active, offset, dragging, onOpenChange, dragHandleOnly, drag } = useDrawer();
|
|
161
|
+
// A modal sheet that does not take focus leaves the keyboard behind it, on
|
|
162
|
+
// a page the sheet is covering. Held in a ref so an inline handler does not
|
|
163
|
+
// re-run this on every render.
|
|
164
|
+
const panel = React.useRef(null);
|
|
165
|
+
const announce = React.useRef(onOpenAutoFocus);
|
|
166
|
+
announce.current = onOpenAutoFocus;
|
|
167
|
+
React.useEffect(() => {
|
|
168
|
+
if (!open)
|
|
169
|
+
return;
|
|
170
|
+
const e = new Event('openAutoFocus', { cancelable: true });
|
|
171
|
+
announce.current?.(e);
|
|
172
|
+
if (!e.defaultPrevented)
|
|
173
|
+
panel.current?.focus();
|
|
174
|
+
}, [open]);
|
|
158
175
|
if (!open)
|
|
159
176
|
return null;
|
|
160
177
|
const tallest = Math.max(...heights, 0);
|
|
@@ -164,7 +181,10 @@ const DrawerContent = ({ className, children, defaultHandle = true, ...props })
|
|
|
164
181
|
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modal && ((0, jsx_runtime_1.jsx)(box_1.Box
|
|
165
182
|
// The scrim is not a control and must not be in the tab order, but it
|
|
166
183
|
// does dismiss — which is why the sheet also closes on Escape below.
|
|
167
|
-
, { "aria-hidden": "true", onClick: () => onOpenChange?.(false), style: { position: 'fixed', inset: 0, background: 'rgba(0,0,0,.5)', zIndex: 50 } })), (0, jsx_runtime_1.jsxs)(box_1.Box, { role: "dialog", "aria-modal": modal,
|
|
184
|
+
, { "aria-hidden": "true", onClick: () => onOpenChange?.(false), style: { position: 'fixed', inset: 0, background: 'rgba(0,0,0,.5)', zIndex: 50 } })), (0, jsx_runtime_1.jsxs)(box_1.Box, { ref: panel, role: "dialog", "aria-modal": modal,
|
|
185
|
+
// Focusable but not tabbable: the sheet itself is the focus target when
|
|
186
|
+
// it opens, and the tab order inside it belongs to its contents.
|
|
187
|
+
tabIndex: -1, className: (0, cn_1.cn)('bg-background', className), style: {
|
|
168
188
|
position: 'fixed',
|
|
169
189
|
left: 0,
|
|
170
190
|
right: 0,
|
|
@@ -21,8 +21,15 @@ export type DrawerProps = React.PropsWithChildren<{
|
|
|
21
21
|
/** Blocks the page behind it and dims it. */
|
|
22
22
|
modal?: boolean;
|
|
23
23
|
snapPoints?: SnapPoint[];
|
|
24
|
-
|
|
24
|
+
/** `null` is "not decided yet", which a store holding this can be. */
|
|
25
|
+
activeSnapPoint?: SnapPoint | null;
|
|
25
26
|
setActiveSnapPoint?: (point: SnapPoint) => void;
|
|
27
|
+
/**
|
|
28
|
+
* The sheet was dismissed by a GESTURE — dragged or flicked below its
|
|
29
|
+
* shortest point — as opposed to closed by the app. Worth telling apart: one
|
|
30
|
+
* is the person saying no, the other is the flow moving on.
|
|
31
|
+
*/
|
|
32
|
+
handleCloseGesture?: () => void;
|
|
26
33
|
/** Only the handle starts a drag — so the content can scroll. */
|
|
27
34
|
dragHandleOnly?: boolean;
|
|
28
35
|
/** A fast flick goes to the far end rather than the next point along. */
|
|
@@ -32,7 +39,7 @@ export type DrawerProps = React.PropsWithChildren<{
|
|
|
32
39
|
/** Widen the handle's grab area past its drawn size. */
|
|
33
40
|
extendHandleDragRegion?: boolean;
|
|
34
41
|
}>;
|
|
35
|
-
export declare const Drawer: ({ open, onOpenChange, modal, snapPoints, activeSnapPoint, setActiveSnapPoint, dragHandleOnly, fastDragSkipsToEnd, handleHandleClicked, extendHandleDragRegion, children, }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
|
|
42
|
+
export declare const Drawer: ({ open, onOpenChange, modal, snapPoints, activeSnapPoint, setActiveSnapPoint, dragHandleOnly, fastDragSkipsToEnd, handleHandleClicked, handleCloseGesture, extendHandleDragRegion, children, }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
|
|
36
43
|
/**
|
|
37
44
|
* The grab bar.
|
|
38
45
|
*
|
|
@@ -44,6 +51,12 @@ export declare const DrawerHandle: ({ className, ...props }: React.ComponentProp
|
|
|
44
51
|
export type DrawerContentProps = React.ComponentProps<typeof Box> & {
|
|
45
52
|
/** The sheet draws its own handle unless the caller draws one. */
|
|
46
53
|
defaultHandle?: boolean;
|
|
54
|
+
/**
|
|
55
|
+
* Fires as the sheet takes focus. `preventDefault()` leaves focus where it
|
|
56
|
+
* was — which is what a sheet that opens beside a form the person is still
|
|
57
|
+
* typing in wants.
|
|
58
|
+
*/
|
|
59
|
+
onOpenAutoFocus?: (e: Event) => void;
|
|
47
60
|
};
|
|
48
|
-
export declare const DrawerContent: ({ className, children, defaultHandle, ...props }: DrawerContentProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
61
|
+
export declare const DrawerContent: ({ className, children, defaultHandle, onOpenAutoFocus, ...props }: DrawerContentProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
49
62
|
//# sourceMappingURL=drawer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/drawer.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AAG/B,0DAA0D;AAC1D,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,CAAA;AAEvC,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAChD,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,6CAA6C;IAC7C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,UAAU,CAAC,EAAE,SAAS,EAAE,CAAA;IACxB,eAAe,CAAC,EAAE,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/drawer.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AAG/B,0DAA0D;AAC1D,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,CAAA;AAEvC,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAChD,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,6CAA6C;IAC7C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,UAAU,CAAC,EAAE,SAAS,EAAE,CAAA;IACxB,sEAAsE;IACtE,eAAe,CAAC,EAAE,SAAS,GAAG,IAAI,CAAA;IAClC,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAA;IAC/C;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC/B,iEAAiE;IACjE,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,yEAAyE;IACzE,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,mDAAmD;IACnD,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAA;IAChC,wDAAwD;IACxD,sBAAsB,CAAC,EAAE,OAAO,CAAA;CACjC,CAAC,CAAA;AA6BF,eAAO,MAAM,MAAM,mMAahB,WAAW,4CAwFb,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,4BAA6B,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,4CAmBrF,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG;IAClE,kEAAkE;IAClE,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAA;CACrC,CAAA;AAED,eAAO,MAAM,aAAa,sEAMvB,kBAAkB,mDAiEpB,CAAA"}
|
|
@@ -27,7 +27,7 @@ const useDrawer = () => {
|
|
|
27
27
|
const px = (p, viewport) => typeof p === 'number' ? p * viewport : parseFloat(p) || 0;
|
|
28
28
|
/** A flick: fast enough that where it was pointing matters more than where it stopped. */
|
|
29
29
|
const FLICK = 0.5; // px per ms
|
|
30
|
-
export const Drawer = ({ open = false, onOpenChange, modal = true, snapPoints, activeSnapPoint, setActiveSnapPoint, dragHandleOnly = false, fastDragSkipsToEnd = true, handleHandleClicked, extendHandleDragRegion = false, children, }) => {
|
|
30
|
+
export const Drawer = ({ open = false, onOpenChange, modal = true, snapPoints, activeSnapPoint, setActiveSnapPoint, dragHandleOnly = false, fastDragSkipsToEnd = true, handleHandleClicked, handleCloseGesture, extendHandleDragRegion = false, children, }) => {
|
|
31
31
|
// The viewport is only known in a browser, and a fractional snap point needs
|
|
32
32
|
// it. Zero on the server means those resolve to zero and the sheet renders
|
|
33
33
|
// closed, which is the right thing to send.
|
|
@@ -41,7 +41,9 @@ export const Drawer = ({ open = false, onOpenChange, modal = true, snapPoints, a
|
|
|
41
41
|
const points = snapPoints?.length ? snapPoints : [1];
|
|
42
42
|
const heights = points.map((p) => px(p, viewport));
|
|
43
43
|
const tallest = Math.max(...heights, 0);
|
|
44
|
-
const activePx = activeSnapPoint !== undefined
|
|
44
|
+
const activePx = activeSnapPoint !== undefined && activeSnapPoint !== null
|
|
45
|
+
? px(activeSnapPoint, viewport)
|
|
46
|
+
: tallest;
|
|
45
47
|
const [offset, setOffset] = React.useState(0);
|
|
46
48
|
const [dragging, setDragging] = React.useState(false);
|
|
47
49
|
const snapTo = (target) => {
|
|
@@ -51,6 +53,7 @@ export const Drawer = ({ open = false, onOpenChange, modal = true, snapPoints, a
|
|
|
51
53
|
best = h;
|
|
52
54
|
// Below the shortest point by more than half of it, this is a dismissal.
|
|
53
55
|
if (target < Math.min(...heights) / 2) {
|
|
56
|
+
handleCloseGesture?.();
|
|
54
57
|
onOpenChange?.(false);
|
|
55
58
|
return;
|
|
56
59
|
}
|
|
@@ -115,8 +118,22 @@ export const DrawerHandle = ({ className, ...props }) => {
|
|
|
115
118
|
touchAction: 'none',
|
|
116
119
|
}, onPointerDown: drag, onClick: handleHandleClicked, ...props, children: _jsx(Box, { className: "rounded-full bg-muted", style: { width: 48, height: 4 } }) }));
|
|
117
120
|
};
|
|
118
|
-
export const DrawerContent = ({ className, children, defaultHandle = true, ...props }) => {
|
|
121
|
+
export const DrawerContent = ({ className, children, defaultHandle = true, onOpenAutoFocus, ...props }) => {
|
|
119
122
|
const { open, modal, heights, active, offset, dragging, onOpenChange, dragHandleOnly, drag } = useDrawer();
|
|
123
|
+
// A modal sheet that does not take focus leaves the keyboard behind it, on
|
|
124
|
+
// a page the sheet is covering. Held in a ref so an inline handler does not
|
|
125
|
+
// re-run this on every render.
|
|
126
|
+
const panel = React.useRef(null);
|
|
127
|
+
const announce = React.useRef(onOpenAutoFocus);
|
|
128
|
+
announce.current = onOpenAutoFocus;
|
|
129
|
+
React.useEffect(() => {
|
|
130
|
+
if (!open)
|
|
131
|
+
return;
|
|
132
|
+
const e = new Event('openAutoFocus', { cancelable: true });
|
|
133
|
+
announce.current?.(e);
|
|
134
|
+
if (!e.defaultPrevented)
|
|
135
|
+
panel.current?.focus();
|
|
136
|
+
}, [open]);
|
|
120
137
|
if (!open)
|
|
121
138
|
return null;
|
|
122
139
|
const tallest = Math.max(...heights, 0);
|
|
@@ -126,7 +143,10 @@ export const DrawerContent = ({ className, children, defaultHandle = true, ...pr
|
|
|
126
143
|
return (_jsxs(_Fragment, { children: [modal && (_jsx(Box
|
|
127
144
|
// The scrim is not a control and must not be in the tab order, but it
|
|
128
145
|
// does dismiss — which is why the sheet also closes on Escape below.
|
|
129
|
-
, { "aria-hidden": "true", onClick: () => onOpenChange?.(false), style: { position: 'fixed', inset: 0, background: 'rgba(0,0,0,.5)', zIndex: 50 } })), _jsxs(Box, { role: "dialog", "aria-modal": modal,
|
|
146
|
+
, { "aria-hidden": "true", onClick: () => onOpenChange?.(false), style: { position: 'fixed', inset: 0, background: 'rgba(0,0,0,.5)', zIndex: 50 } })), _jsxs(Box, { ref: panel, role: "dialog", "aria-modal": modal,
|
|
147
|
+
// Focusable but not tabbable: the sheet itself is the focus target when
|
|
148
|
+
// it opens, and the tab order inside it belongs to its contents.
|
|
149
|
+
tabIndex: -1, className: cn('bg-background', className), style: {
|
|
130
150
|
position: 'fixed',
|
|
131
151
|
left: 0,
|
|
132
152
|
right: 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/backends/gui/drawer.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;GAYG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AAC/B,OAAO,EAAE,EAAE,EAAE,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/backends/gui/drawer.tsx"],"names":[],"mappings":"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"}
|
package/dist/gallery.html
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!doctype html><html lang="en" class="t_dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>@hanzo/ui 8.
|
|
1
|
+
<!doctype html><html lang="en" class="t_dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>@hanzo/ui 8.11.1</title><style>/* @hanzo/ui — generated by scripts/gen-css.mjs. Do not edit. */
|
|
2
2
|
:root { --hanzo-ui-styles: 1; }
|
|
3
3
|
/* Hanzo Design System — the entry point. Import THIS one file.
|
|
4
4
|
*
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hanzo/ui",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.11.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Hanzo UI — the one canonical Hanzo component library, on @hanzo/gui + @hanzo/design. ONE substrate: every component renders through @hanzo/gui primitives, so the same import works on web, native (expo) and desktop (Tauri). Self-contained (theme.css), presentational, host-agnostic, clean-room.",
|
|
6
6
|
"exports": {
|