@astryxdesign/lab 0.2.0-canary.fce8b64 → 0.3.0-canary.12db2a1
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/README.md +6 -0
- package/dist/BottomSheet/BottomSheet.d.ts +29 -7
- package/dist/BottomSheet/BottomSheet.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheet.js +73 -24
- package/dist/BottomSheet/snapOffsets.d.ts +13 -5
- package/dist/BottomSheet/snapOffsets.d.ts.map +1 -1
- package/dist/BottomSheet/snapOffsets.js +22 -9
- package/dist/BottomSheet/useSheetGestures.d.ts +1 -1
- package/dist/BottomSheet/useSheetGestures.js +1 -1
- package/dist/ChatReasoning/ChatReasoning.d.ts.map +1 -1
- package/dist/ChatReasoning/ChatReasoning.js +10 -1
- package/dist/LogStream/LogStream.d.ts +4 -0
- package/dist/LogStream/LogStream.d.ts.map +1 -1
- package/dist/LogStream/LogStream.js +12 -1
- package/dist/RichTextEditor/RichTextEditor.d.ts +12 -2
- package/dist/RichTextEditor/RichTextEditor.d.ts.map +1 -1
- package/dist/RichTextEditor/RichTextEditor.js +81 -7
- package/dist/SVGIcon/SVGIcon.d.ts.map +1 -1
- package/dist/SVGIcon/SVGIcon.js +14 -1
- package/dist/Stepper/Step.d.ts +5 -0
- package/dist/Stepper/Step.d.ts.map +1 -1
- package/dist/Stepper/Step.js +33 -6
- package/dist/Tour/Tour.d.ts +85 -0
- package/dist/Tour/Tour.d.ts.map +1 -0
- package/dist/Tour/Tour.js +112 -0
- package/dist/Tour/TourContext.d.ts +38 -0
- package/dist/Tour/TourContext.d.ts.map +1 -0
- package/dist/Tour/TourContext.js +36 -0
- package/dist/Tour/TourStep.d.ts +77 -0
- package/dist/Tour/TourStep.d.ts.map +1 -0
- package/dist/Tour/TourStep.js +307 -0
- package/dist/Tour/index.d.ts +16 -0
- package/dist/Tour/index.d.ts.map +1 -0
- package/dist/Tour/index.js +15 -0
- package/dist/Tour/useTour.d.ts +27 -0
- package/dist/Tour/useTour.d.ts.map +1 -0
- package/dist/Tour/useTour.js +41 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -1
- package/dist/lab.css +11 -0
- package/package.json +3 -3
- package/src/BottomSheet/BottomSheet.doc.mjs +21 -2
- package/src/BottomSheet/BottomSheet.test.tsx +93 -0
- package/src/BottomSheet/BottomSheet.tsx +93 -22
- package/src/BottomSheet/snapOffsets.test.ts +11 -5
- package/src/BottomSheet/snapOffsets.ts +22 -9
- package/src/BottomSheet/useSheetGestures.doc.mjs +1 -1
- package/src/BottomSheet/useSheetGestures.test.ts +11 -10
- package/src/BottomSheet/useSheetGestures.ts +2 -2
- package/src/ChatReasoning/ChatReasoning.test.tsx +25 -0
- package/src/ChatReasoning/ChatReasoning.tsx +9 -1
- package/src/LogStream/LogStream.doc.mjs +1 -1
- package/src/LogStream/LogStream.test.tsx +25 -0
- package/src/LogStream/LogStream.tsx +10 -0
- package/src/RichTextEditor/RichTextEditor.doc.mjs +7 -0
- package/src/RichTextEditor/RichTextEditor.test.tsx +139 -1
- package/src/RichTextEditor/RichTextEditor.tsx +126 -7
- package/src/SVGIcon/SVGIcon.test.tsx +40 -0
- package/src/SVGIcon/SVGIcon.tsx +14 -6
- package/src/Stepper/Step.tsx +44 -4
- package/src/Stepper/Stepper.test.tsx +84 -3
- package/src/Tour/Tour.doc.mjs +106 -0
- package/src/Tour/Tour.test.tsx +261 -0
- package/src/Tour/Tour.tsx +171 -0
- package/src/Tour/TourContext.ts +59 -0
- package/src/Tour/TourStep.tsx +398 -0
- package/src/Tour/index.ts +23 -0
- package/src/Tour/useTour.ts +58 -0
- package/src/index.ts +11 -1
- package/dist/CodeBlock/index.d.ts +0 -8
- package/dist/CodeBlock/index.d.ts.map +0 -1
- package/dist/CodeBlock/index.js +0 -9
- package/src/CodeBlock/index.ts +0 -10
package/README.md
CHANGED
|
@@ -20,6 +20,12 @@ See the **[Component Lifecycle](https://github.com/facebook/astryx/wiki/Componen
|
|
|
20
20
|
|
|
21
21
|
**Core:** Full keyboard/a11y, hover guards, theming story, status states, spec compliance, vibe tested. Shipped to consumers on `latest`.
|
|
22
22
|
|
|
23
|
+
## Promotion gate: accessibility
|
|
24
|
+
|
|
25
|
+
The [Accessibility Checklist](https://github.com/facebook/astryx/wiki/Accessibility-Checklist) is a hard requirement for graduating to core — every item, verified in the promotion PR, alongside the hardening bar linked above.
|
|
26
|
+
|
|
27
|
+
Lab components get the same scan coverage as core (the `pr-a11y` axe audit and the weekly full scan run against lab too), but a11y findings on a lab component do not block lab merges — they block **promotion**. Iterate freely in lab; clear the checklist to graduate.
|
|
28
|
+
|
|
23
29
|
## Usage
|
|
24
30
|
|
|
25
31
|
Inside the monorepo (storybook/sandbox), imports resolve via pnpm workspaces:
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* @position Lab implementation; consumed by index.ts, tested by BottomSheet.test.tsx, demonstrated in Storybook
|
|
6
6
|
*
|
|
7
7
|
* A mobile touch surface that rises from the bottom edge: grab handle, snap
|
|
8
|
-
* points, and swipe-to-dismiss. It owns a native
|
|
8
|
+
* points, and swipe-to-dismiss. It owns a native `<dialog>` directly and
|
|
9
9
|
* composes core primitives (`useScrollLock`, `<dialog>.showModal()` for the
|
|
10
10
|
* top layer + focus trap, a `::backdrop` scrim) rather than delegating to a
|
|
11
11
|
* heavier overlay component — so it controls its own sizing and can render a
|
|
@@ -13,6 +13,12 @@
|
|
|
13
13
|
* That shell is what lets the sheet translate freely (including a little past
|
|
14
14
|
* fully-open) without clipping against a fixed dialog edge.
|
|
15
15
|
*
|
|
16
|
+
* `hasScrim` picks the presentation: `true` (default) uses `showModal()` (top
|
|
17
|
+
* layer, focus trap, scrim, scroll lock, background inert); `false` uses
|
|
18
|
+
* `show()` for a non-modal sheet with no scrim, leaving the page behind
|
|
19
|
+
* interactive and scrollable (the transparent shell is pointer-events:none so
|
|
20
|
+
* taps pass through).
|
|
21
|
+
*
|
|
16
22
|
* The drag/snap/dismiss machinery lives in `useSheetGestures`; the offset
|
|
17
23
|
* geometry lives in the pure, tested `snapOffsets` module. Both are internal
|
|
18
24
|
* to BottomSheet and not exported from the lab entry point.
|
|
@@ -71,16 +77,32 @@ export interface BottomSheetProps extends BaseProps<HTMLDialogElement> {
|
|
|
71
77
|
* @default 'capped'
|
|
72
78
|
*/
|
|
73
79
|
height?: BottomSheetHeight | number | string;
|
|
80
|
+
/**
|
|
81
|
+
* Whether to render a modal scrim behind the sheet.
|
|
82
|
+
* - `true` (default) — `showModal()`: renders in the top layer with a focus
|
|
83
|
+
* trap, a `::backdrop` scrim, body scroll lock, and tap-scrim-to-dismiss.
|
|
84
|
+
* The background is inert. Use for focused tasks (filters, forms).
|
|
85
|
+
* - `false` — `show()`: a non-modal sheet with **no scrim**. The page behind
|
|
86
|
+
* stays interactive and scrollable (like Material's *standard* bottom
|
|
87
|
+
* sheet, or an iOS undimmed detent). Escape still closes while focus is
|
|
88
|
+
* inside the sheet, and drag/flick-to-dismiss still work. Use for a peek
|
|
89
|
+
* surface that coexists with the page (e.g. a panel over a live map).
|
|
90
|
+
* @default true
|
|
91
|
+
*/
|
|
92
|
+
hasScrim?: boolean;
|
|
74
93
|
/** Test ID for the root element. */
|
|
75
94
|
'data-testid'?: string;
|
|
76
95
|
}
|
|
77
96
|
/**
|
|
78
97
|
* A mobile touch sheet that rises from the bottom edge, with a grab handle,
|
|
79
|
-
* drag-to-resize snap points, and swipe-to-dismiss. It owns a native
|
|
80
|
-
* `<dialog>`
|
|
81
|
-
*
|
|
82
|
-
* dismisses, and Escape closes — so the swipe
|
|
83
|
-
* equivalent.
|
|
98
|
+
* drag-to-resize snap points, and swipe-to-dismiss. It owns a native
|
|
99
|
+
* `<dialog>` and, by default (`hasScrim`), enters the top layer with a focus
|
|
100
|
+
* trap + `::backdrop` scrim and locks body scroll; a slow drag settles to the
|
|
101
|
+
* nearest snap point, a flick down dismisses, and Escape closes — so the swipe
|
|
102
|
+
* always has a keyboard equivalent.
|
|
103
|
+
*
|
|
104
|
+
* With `hasScrim={false}` it opens non-modally (`show()`, no scrim), leaving
|
|
105
|
+
* the page behind interactive and scrollable.
|
|
84
106
|
*
|
|
85
107
|
* @example
|
|
86
108
|
* ```
|
|
@@ -93,7 +115,7 @@ export interface BottomSheetProps extends BaseProps<HTMLDialogElement> {
|
|
|
93
115
|
* </BottomSheet>
|
|
94
116
|
* ```
|
|
95
117
|
*/
|
|
96
|
-
export declare function BottomSheet({ ref, isOpen, onOpenChange, label, children, height, xstyle, ...props }: BottomSheetProps): import("react").JSX.Element;
|
|
118
|
+
export declare function BottomSheet({ ref, isOpen, onOpenChange, label, children, height, hasScrim, xstyle, ...props }: BottomSheetProps): import("react").JSX.Element;
|
|
97
119
|
export declare namespace BottomSheet {
|
|
98
120
|
var displayName: string;
|
|
99
121
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,OAAO,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AA2BlD;;;;;;GAMG;AACH,QAAA,MAAM,cAAc;;;;CAIV,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,cAAc,CAAC;AAiL5D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACpE,wDAAwD;IACxD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC,8EAA8E;IAC9E,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;OAIG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd,0EAA0E;IAC1E,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAE7C;;;;;;;;;;;OAWG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,MAAM,EACN,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,MAAiB,EACjB,QAAe,EACf,MAAM,EACN,GAAG,KAAK,EACT,EAAE,gBAAgB,+BA0LlB;yBApMe,WAAW"}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
* @position Lab implementation; consumed by index.ts, tested by BottomSheet.test.tsx, demonstrated in Storybook
|
|
10
10
|
*
|
|
11
11
|
* A mobile touch surface that rises from the bottom edge: grab handle, snap
|
|
12
|
-
* points, and swipe-to-dismiss. It owns a native
|
|
12
|
+
* points, and swipe-to-dismiss. It owns a native `<dialog>` directly and
|
|
13
13
|
* composes core primitives (`useScrollLock`, `<dialog>.showModal()` for the
|
|
14
14
|
* top layer + focus trap, a `::backdrop` scrim) rather than delegating to a
|
|
15
15
|
* heavier overlay component — so it controls its own sizing and can render a
|
|
@@ -17,6 +17,12 @@
|
|
|
17
17
|
* That shell is what lets the sheet translate freely (including a little past
|
|
18
18
|
* fully-open) without clipping against a fixed dialog edge.
|
|
19
19
|
*
|
|
20
|
+
* `hasScrim` picks the presentation: `true` (default) uses `showModal()` (top
|
|
21
|
+
* layer, focus trap, scrim, scroll lock, background inert); `false` uses
|
|
22
|
+
* `show()` for a non-modal sheet with no scrim, leaving the page behind
|
|
23
|
+
* interactive and scrollable (the transparent shell is pointer-events:none so
|
|
24
|
+
* taps pass through).
|
|
25
|
+
*
|
|
20
26
|
* The drag/snap/dismiss machinery lives in `useSheetGestures`; the offset
|
|
21
27
|
* geometry lives in the pure, tested `snapOffsets` module. Both are internal
|
|
22
28
|
* to BottomSheet and not exported from the lab entry point.
|
|
@@ -35,12 +41,18 @@ import { useDevWarning, useScrollLock } from '@astryxdesign/core/hooks';
|
|
|
35
41
|
import { mergeProps, mergeRefs, themeProps } from '@astryxdesign/core/utils';
|
|
36
42
|
import { useSheetGestures } from "./useSheetGestures.js";
|
|
37
43
|
|
|
44
|
+
// A non-modal sheet (hasScrim={false}) uses show() instead of showModal(), so
|
|
45
|
+
// it isn't in the native top layer and needs an explicit z-index to sit above
|
|
46
|
+
// page content. No z-index token exists in the theme; 1000 matches the Drawer
|
|
47
|
+
// / app-level overlay convention.
|
|
48
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
49
|
+
const NON_MODAL_Z = 1000;
|
|
50
|
+
|
|
38
51
|
// Detent fractions of the viewport, ascending (peek / mid / full). Detents
|
|
39
52
|
// that land within DETENT_DEDUP_PX of each other (e.g. a hug height next to a
|
|
40
53
|
// snap) are de-duped in the gesture hook, and any taller than the sheet are
|
|
41
54
|
// dropped, so a full set is safe to offer. The shortest is a glance "peek";
|
|
42
55
|
// the scrim hides as the sheet collapses onto it (see onScrimOpacity).
|
|
43
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
44
56
|
const SNAP_FRACTIONS = [0.14, 0.5, 0.92];
|
|
45
57
|
|
|
46
58
|
/**
|
|
@@ -116,11 +128,14 @@ const styles = {
|
|
|
116
128
|
};
|
|
117
129
|
/**
|
|
118
130
|
* A mobile touch sheet that rises from the bottom edge, with a grab handle,
|
|
119
|
-
* drag-to-resize snap points, and swipe-to-dismiss. It owns a native
|
|
120
|
-
* `<dialog>`
|
|
121
|
-
*
|
|
122
|
-
* dismisses, and Escape closes — so the swipe
|
|
123
|
-
* equivalent.
|
|
131
|
+
* drag-to-resize snap points, and swipe-to-dismiss. It owns a native
|
|
132
|
+
* `<dialog>` and, by default (`hasScrim`), enters the top layer with a focus
|
|
133
|
+
* trap + `::backdrop` scrim and locks body scroll; a slow drag settles to the
|
|
134
|
+
* nearest snap point, a flick down dismisses, and Escape closes — so the swipe
|
|
135
|
+
* always has a keyboard equivalent.
|
|
136
|
+
*
|
|
137
|
+
* With `hasScrim={false}` it opens non-modally (`show()`, no scrim), leaving
|
|
138
|
+
* the page behind interactive and scrollable.
|
|
124
139
|
*
|
|
125
140
|
* @example
|
|
126
141
|
* ```
|
|
@@ -140,6 +155,7 @@ export function BottomSheet({
|
|
|
140
155
|
label,
|
|
141
156
|
children,
|
|
142
157
|
height = 'capped',
|
|
158
|
+
hasScrim = true,
|
|
143
159
|
xstyle,
|
|
144
160
|
...props
|
|
145
161
|
}) {
|
|
@@ -149,7 +165,7 @@ export function BottomSheet({
|
|
|
149
165
|
const close = useCallback(() => onOpenChange(false), [onOpenChange]);
|
|
150
166
|
|
|
151
167
|
// Set imperatively (not via state) so a 60fps drag doesn't re-render. The
|
|
152
|
-
// hook reports the scrim opacity for the current detent (
|
|
168
|
+
// hook reports the scrim opacity for the current detent (a faint floor at the peek).
|
|
153
169
|
const handleScrimOpacity = useCallback(opacity => {
|
|
154
170
|
dialogRef.current?.style.setProperty('--_sheet-scrim-opacity', String(opacity));
|
|
155
171
|
}, []);
|
|
@@ -165,24 +181,32 @@ export function BottomSheet({
|
|
|
165
181
|
onScrimOpacity: handleScrimOpacity
|
|
166
182
|
});
|
|
167
183
|
|
|
168
|
-
// showModal() enters the top layer with a focus trap + ::backdrop
|
|
169
|
-
// we
|
|
184
|
+
// Modal: showModal() enters the top layer with a focus trap + ::backdrop and
|
|
185
|
+
// we restore focus to the opener on close. Standard: show() is non-modal, so
|
|
186
|
+
// we neither trap nor steal focus (the background stays interactive) — we
|
|
187
|
+
// only honor an explicit data-autofocus.
|
|
170
188
|
useEffect(() => {
|
|
171
189
|
const dialog = dialogRef.current;
|
|
172
190
|
if (!dialog) {
|
|
173
191
|
return;
|
|
174
192
|
}
|
|
175
193
|
if (isOpen) {
|
|
176
|
-
triggerRef.current = document.activeElement;
|
|
177
194
|
dialog.style.setProperty('--_sheet-scrim-opacity', '1');
|
|
178
195
|
if (!dialog.open) {
|
|
179
|
-
|
|
180
|
-
//
|
|
181
|
-
|
|
196
|
+
// Only remember/restore focus for modal sheets; a non-modal sheet must
|
|
197
|
+
// not yank focus back from whatever the user does in the live page.
|
|
198
|
+
if (hasScrim) {
|
|
199
|
+
triggerRef.current = document.activeElement;
|
|
200
|
+
dialog.showModal();
|
|
201
|
+
} else {
|
|
202
|
+
dialog.show();
|
|
203
|
+
}
|
|
204
|
+
// Land on the panel (so AT reads from the label) for modal sheets;
|
|
205
|
+
// otherwise only honor a descendant data-autofocus.
|
|
182
206
|
const autofocus = dialog.querySelector('[data-autofocus]');
|
|
183
207
|
if (autofocus) {
|
|
184
208
|
autofocus.focus();
|
|
185
|
-
} else {
|
|
209
|
+
} else if (hasScrim) {
|
|
186
210
|
sheetNodeRef.current?.focus();
|
|
187
211
|
}
|
|
188
212
|
}
|
|
@@ -219,8 +243,11 @@ export function BottomSheet({
|
|
|
219
243
|
sheet?.removeEventListener('transitionend', onEnd);
|
|
220
244
|
};
|
|
221
245
|
}
|
|
222
|
-
}, [isOpen]);
|
|
223
|
-
|
|
246
|
+
}, [isOpen, hasScrim]);
|
|
247
|
+
|
|
248
|
+
// Only a modal sheet locks body scroll; a non-modal sheet leaves the page
|
|
249
|
+
// scrollable behind it.
|
|
250
|
+
useScrollLock(isOpen && hasScrim);
|
|
224
251
|
|
|
225
252
|
// Enforce an accessible name: label is required by types, but a JS caller
|
|
226
253
|
// can still pass an empty string, leaving the sheet unnamed.
|
|
@@ -230,33 +257,55 @@ export function BottomSheet({
|
|
|
230
257
|
close();
|
|
231
258
|
}, [close]);
|
|
232
259
|
// Explicit Escape handler in addition to the native `cancel` event, for
|
|
233
|
-
// environments that don't synthesize `cancel
|
|
260
|
+
// environments that don't synthesize `cancel` (and the show() path, which
|
|
261
|
+
// never fires `cancel`). Only fires when focus is inside the sheet.
|
|
234
262
|
const handleKeyDown = useCallback(event => {
|
|
235
263
|
if (event.key === 'Escape') {
|
|
236
264
|
event.preventDefault();
|
|
237
265
|
close();
|
|
238
266
|
}
|
|
239
267
|
}, [close]);
|
|
268
|
+
// Tap-outside-to-dismiss only applies to modal sheets (the scrim). A non-modal
|
|
269
|
+
// sheet has no scrim and its transparent shell is pointer-events:none, so taps
|
|
270
|
+
// pass through to the page rather than dismissing.
|
|
240
271
|
const handleClick = useCallback(event => {
|
|
241
|
-
if (event.target === event.currentTarget) {
|
|
272
|
+
if (hasScrim && event.target === event.currentTarget) {
|
|
242
273
|
close();
|
|
243
274
|
}
|
|
244
|
-
}, [close]);
|
|
275
|
+
}, [close, hasScrim]);
|
|
245
276
|
const isNamed = typeof height === 'string' && height in HEIGHT_BUDGETS;
|
|
246
277
|
const budget = isNamed ? HEIGHT_BUDGETS[height] : typeof height === 'number' ? `${height}px` : height;
|
|
247
278
|
const isHug = height === 'hug';
|
|
248
279
|
return /*#__PURE__*/_jsx("dialog", {
|
|
249
280
|
...{
|
|
250
281
|
0: {
|
|
251
|
-
className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz
|
|
282
|
+
className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz"
|
|
283
|
+
},
|
|
284
|
+
4: {
|
|
285
|
+
className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq"
|
|
286
|
+
},
|
|
287
|
+
2: {
|
|
288
|
+
className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w"
|
|
289
|
+
},
|
|
290
|
+
6: {
|
|
291
|
+
className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w"
|
|
252
292
|
},
|
|
253
293
|
1: {
|
|
254
|
-
className: "xixxii4 x10a8y8t
|
|
294
|
+
className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz x47corl xfo81ep xh8yej3 x5yr21d"
|
|
295
|
+
},
|
|
296
|
+
5: {
|
|
297
|
+
className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq x47corl xfo81ep xh8yej3 x5yr21d"
|
|
298
|
+
},
|
|
299
|
+
3: {
|
|
300
|
+
className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w x47corl xfo81ep xh8yej3 x5yr21d"
|
|
301
|
+
},
|
|
302
|
+
7: {
|
|
303
|
+
className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w x47corl xfo81ep xh8yej3 x5yr21d"
|
|
255
304
|
}
|
|
256
|
-
}[!!isOpen << 0],
|
|
305
|
+
}[!!isOpen << 2 | !!hasScrim << 1 | !!!hasScrim << 0],
|
|
257
306
|
ref: mergeRefs(ref, dialogRef),
|
|
258
307
|
"aria-label": label,
|
|
259
|
-
"aria-modal":
|
|
308
|
+
"aria-modal": hasScrim ? 'true' : undefined,
|
|
260
309
|
onCancel: handleCancel,
|
|
261
310
|
onClick: handleClick,
|
|
262
311
|
onKeyDown: handleKeyDown,
|
|
@@ -36,12 +36,20 @@ export declare function computeDetentOffsets(sheetHeight: number, detentHeights:
|
|
|
36
36
|
/** Nearest value in `offsets` to `value` (offsets must be non-empty). */
|
|
37
37
|
export declare function nearestOffset(value: number, offsets: readonly number[]): number;
|
|
38
38
|
/**
|
|
39
|
-
*
|
|
39
|
+
* Minimum scrim opacity at the peek detent. The scrim thins to a glance state
|
|
40
|
+
* but never fully vanishes, because a modal sheet keeps the background inert —
|
|
41
|
+
* a fully clear backdrop would read as "interactive" when it isn't. (For a
|
|
42
|
+
* genuinely interactive, undimmed peek, use a non-modal sheet, `hasScrim=false`.)
|
|
43
|
+
*/
|
|
44
|
+
export declare const MIN_PEEK_SCRIM_OPACITY = 0.3;
|
|
45
|
+
/**
|
|
46
|
+
* Scrim opacity (1 = fully visible) for a drag/settle `offset`.
|
|
40
47
|
* The scrim stays full while the sheet is at or above its second-shortest
|
|
41
|
-
* detent, then fades
|
|
42
|
-
*
|
|
43
|
-
*
|
|
44
|
-
*
|
|
48
|
+
* detent, then fades as it collapses onto the shortest ("peek") detent — a
|
|
49
|
+
* glance state that thins the backdrop to `MIN_PEEK_SCRIM_OPACITY` (not fully
|
|
50
|
+
* gone, since the sheet is still modal) and holds there below it.
|
|
51
|
+
* A single-detent sheet has no peek, so it instead fades all the way to 0
|
|
52
|
+
* across the dismiss overshoot toward `dismissOffset` (the sheet is leaving).
|
|
45
53
|
*/
|
|
46
54
|
export declare function scrimOpacityForOffset(offset: number, offsets: readonly number[], dismissOffset: number): number;
|
|
47
55
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"snapOffsets.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/snapOffsets.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AAEH;;;;;GAKG;AACH,eAAO,MAAM,eAAe,KAAK,CAAC;AAElC,4EAA4E;AAC5E,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,SAAS,MAAM,EAAE,EAC5B,UAAU,EAAE,MAAM,GACjB,MAAM,EAAE,CAEV;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAClC,WAAW,EAAE,MAAM,EACnB,aAAa,EAAE,SAAS,MAAM,EAAE,EAChC,OAAO,GAAE,MAAwB,GAChC,MAAM,EAAE,CAcV;AAED,yEAAyE;AACzE,wBAAgB,aAAa,CAC3B,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,SAAS,MAAM,EAAE,GACzB,MAAM,CAKR;AAED
|
|
1
|
+
{"version":3,"file":"snapOffsets.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/snapOffsets.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AAEH;;;;;GAKG;AACH,eAAO,MAAM,eAAe,KAAK,CAAC;AAElC,4EAA4E;AAC5E,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,SAAS,MAAM,EAAE,EAC5B,UAAU,EAAE,MAAM,GACjB,MAAM,EAAE,CAEV;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAClC,WAAW,EAAE,MAAM,EACnB,aAAa,EAAE,SAAS,MAAM,EAAE,EAChC,OAAO,GAAE,MAAwB,GAChC,MAAM,EAAE,CAcV;AAED,yEAAyE;AACzE,wBAAgB,aAAa,CAC3B,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,SAAS,MAAM,EAAE,GACzB,MAAM,CAKR;AAED;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAE1C;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,SAAS,MAAM,EAAE,EAC1B,aAAa,EAAE,MAAM,GACpB,MAAM,CAeR;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,SAAS,MAAM,EAAE,EAC1B,GAAG,EAAE,MAAM,EACX,UAAU,EAAE,MAAM,GACjB,MAAM,CAcR"}
|
|
@@ -58,24 +58,37 @@ export function nearestOffset(value, offsets) {
|
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
/**
|
|
61
|
-
*
|
|
61
|
+
* Minimum scrim opacity at the peek detent. The scrim thins to a glance state
|
|
62
|
+
* but never fully vanishes, because a modal sheet keeps the background inert —
|
|
63
|
+
* a fully clear backdrop would read as "interactive" when it isn't. (For a
|
|
64
|
+
* genuinely interactive, undimmed peek, use a non-modal sheet, `hasScrim=false`.)
|
|
65
|
+
*/
|
|
66
|
+
export const MIN_PEEK_SCRIM_OPACITY = 0.3;
|
|
67
|
+
|
|
68
|
+
/**
|
|
69
|
+
* Scrim opacity (1 = fully visible) for a drag/settle `offset`.
|
|
62
70
|
* The scrim stays full while the sheet is at or above its second-shortest
|
|
63
|
-
* detent, then fades
|
|
64
|
-
*
|
|
65
|
-
*
|
|
66
|
-
*
|
|
71
|
+
* detent, then fades as it collapses onto the shortest ("peek") detent — a
|
|
72
|
+
* glance state that thins the backdrop to `MIN_PEEK_SCRIM_OPACITY` (not fully
|
|
73
|
+
* gone, since the sheet is still modal) and holds there below it.
|
|
74
|
+
* A single-detent sheet has no peek, so it instead fades all the way to 0
|
|
75
|
+
* across the dismiss overshoot toward `dismissOffset` (the sheet is leaving).
|
|
67
76
|
*/
|
|
68
77
|
export function scrimOpacityForOffset(offset, offsets, dismissOffset) {
|
|
69
78
|
const shortest = offsets[offsets.length - 1];
|
|
70
|
-
const
|
|
71
|
-
const
|
|
79
|
+
const hasPeek = offsets.length >= 2;
|
|
80
|
+
const fadeStart = hasPeek ? offsets[offsets.length - 2] : 0;
|
|
81
|
+
const fadeEnd = hasPeek ? shortest : dismissOffset;
|
|
82
|
+
// Peek is a resting state on a still-modal sheet, so keep a floor; the
|
|
83
|
+
// dismiss overshoot is a sheet on its way out, so let it clear completely.
|
|
84
|
+
const floor = hasPeek ? MIN_PEEK_SCRIM_OPACITY : 0;
|
|
72
85
|
if (offset <= fadeStart) {
|
|
73
86
|
return 1;
|
|
74
87
|
}
|
|
75
88
|
if (offset >= fadeEnd) {
|
|
76
|
-
return
|
|
89
|
+
return floor;
|
|
77
90
|
}
|
|
78
|
-
return 1 - (offset - fadeStart) / (fadeEnd - fadeStart);
|
|
91
|
+
return 1 - (1 - floor) * ((offset - fadeStart) / (fadeEnd - fadeStart));
|
|
79
92
|
}
|
|
80
93
|
|
|
81
94
|
/**
|
|
@@ -43,7 +43,7 @@ export interface UseSheetGesturesOptions {
|
|
|
43
43
|
* Called with the scrim opacity the sheet should show (1 = fully visible,
|
|
44
44
|
* 0 = hidden) as the drag moves and on settle. Full while the sheet is at
|
|
45
45
|
* or above its mid detent, fading to 0 as it collapses onto the shortest
|
|
46
|
-
* "peek" detent —
|
|
46
|
+
* "peek" detent — thinning to a faint glance state without fully clearing — and
|
|
47
47
|
* on the dismiss overshoot. Lets the owner mirror it onto the scrim.
|
|
48
48
|
*/
|
|
49
49
|
onScrimOpacity?: (opacity: number) => void;
|
|
@@ -213,7 +213,7 @@ export function useSheetGestures({
|
|
|
213
213
|
const target = resolveSettleOffset(offset, offsets, dir, baseOffset);
|
|
214
214
|
setSettledOffset(target);
|
|
215
215
|
onSnapRef.current?.(height - target);
|
|
216
|
-
// Keep the scrim in sync with the resting detent (
|
|
216
|
+
// Keep the scrim in sync with the resting detent (faint floor at the peek).
|
|
217
217
|
const dismissOffset = maxOffset + shortestDetentHeight * DISMISS_OVERSHOOT_RATIO;
|
|
218
218
|
onScrimOpacityRef.current?.(scrimOpacityForOffset(target, offsets, dismissOffset));
|
|
219
219
|
// Haptic "tick" when landing on a different detent (where supported).
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatReasoning.d.ts","sourceRoot":"","sources":["../../src/ChatReasoning/ChatReasoning.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,
|
|
1
|
+
{"version":3,"file":"ChatReasoning.d.ts","sourceRoot":"","sources":["../../src/ChatReasoning/ChatReasoning.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAA+B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACnE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAkBlD,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACnE,mFAAmF;IACnF,QAAQ,EAAE,SAAS,CAAC;IACpB,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oEAAoE;IACpE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iCAAiC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAkKD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,+BAkGtD;yBAlGe,aAAa"}
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
* Design: extremely compact by default. One line with ellipsis overflow.
|
|
15
15
|
* Expandable on click.
|
|
16
16
|
*/
|
|
17
|
-
import {
|
|
17
|
+
import { useCallback, useId, useState } from 'react';
|
|
18
18
|
import * as stylex from '@stylexjs/stylex';
|
|
19
19
|
import '@astryxdesign/core/theme/tokens.stylex';
|
|
20
20
|
import { colorVars, spacingVars, typeScaleVars, typographyVars, fontWeightVars, durationVars, easeVars } from '@astryxdesign/core/theme/tokens.stylex';
|
|
@@ -127,6 +127,7 @@ export function ChatReasoning(props) {
|
|
|
127
127
|
const [internalExpanded, setInternalExpanded] = useState(defaultIsExpanded);
|
|
128
128
|
const isControlled = controlledExpanded !== undefined;
|
|
129
129
|
const isExpanded = isControlled ? controlledExpanded : internalExpanded;
|
|
130
|
+
const contentId = useId();
|
|
130
131
|
const toggle = useCallback(() => {
|
|
131
132
|
const next = !isExpanded;
|
|
132
133
|
if (!isControlled) {
|
|
@@ -145,6 +146,7 @@ export function ChatReasoning(props) {
|
|
|
145
146
|
role: "button",
|
|
146
147
|
tabIndex: 0,
|
|
147
148
|
"aria-expanded": isExpanded,
|
|
149
|
+
"aria-controls": contentId,
|
|
148
150
|
onClick: toggle,
|
|
149
151
|
onKeyDown: e => {
|
|
150
152
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
@@ -211,6 +213,13 @@ export function ChatReasoning(props) {
|
|
|
211
213
|
children: /*#__PURE__*/_jsx(ChevronDownIcon, {})
|
|
212
214
|
})]
|
|
213
215
|
}), /*#__PURE__*/_jsx("div", {
|
|
216
|
+
id: contentId
|
|
217
|
+
// Collapsed content is only clipped visually (0fr grid row + overflow
|
|
218
|
+
// hidden), which leaves it in the accessibility tree. `inert` removes
|
|
219
|
+
// it from AT and the tab order while keeping the element rendered, so
|
|
220
|
+
// the grid-template-rows expand/collapse transition still runs.
|
|
221
|
+
,
|
|
222
|
+
inert: !isExpanded,
|
|
214
223
|
...{
|
|
215
224
|
0: {
|
|
216
225
|
className: "xrvj5dj xihq33y xb0j27v"
|
|
@@ -55,6 +55,10 @@ export interface LogStreamProps extends Omit<BaseProps<HTMLDivElement>, 'childre
|
|
|
55
55
|
* polling; rows use `content-visibility: auto` for offscreen skip but are
|
|
56
56
|
* NOT virtualized (window large streams in the caller).
|
|
57
57
|
*
|
|
58
|
+
* Live announcements are tied to follow pinning: the `role="log"` region is
|
|
59
|
+
* `aria-live="polite"` only while following the tail and `aria-live="off"`
|
|
60
|
+
* while unfollowed, so appends never flood assistive tech.
|
|
61
|
+
*
|
|
58
62
|
* @example
|
|
59
63
|
* ```
|
|
60
64
|
* <LogStream
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LogStream.d.ts","sourceRoot":"","sources":["../../src/LogStream/LogStream.tsx"],"names":[],"mappings":"AAyBA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAclD,iCAAiC;AACjC,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAEjE,0EAA0E;AAC1E,MAAM,WAAW,QAAQ;IACvB,4CAA4C;IAC5C,EAAE,EAAE,MAAM,CAAC;IACX,qEAAqE;IACrE,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,cAAc,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,6DAA6D;IAC7D,OAAO,EAAE,QAAQ,EAAE,CAAC;IACpB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+EAA+E;IAC/E,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,+CAA+C;IAC/C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gEAAgE;IAChE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,SAAS,CAAC;CAC9C;AA+ND
|
|
1
|
+
{"version":3,"file":"LogStream.d.ts","sourceRoot":"","sources":["../../src/LogStream/LogStream.tsx"],"names":[],"mappings":"AAyBA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAclD,iCAAiC;AACjC,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAEjE,0EAA0E;AAC1E,MAAM,WAAW,QAAQ;IACvB,4CAA4C;IAC5C,EAAE,EAAE,MAAM,CAAC;IACX,qEAAqE;IACrE,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,cAAc,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,6DAA6D;IAC7D,OAAO,EAAE,QAAQ,EAAE,CAAC;IACpB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+EAA+E;IAC/E,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,+CAA+C;IAC/C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gEAAgE;IAChE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,SAAS,CAAC;CAC9C;AA+ND;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,OAAmB,EACnB,WAAW,EACX,cAAc,EACd,SAAS,EACT,aAAoB,EACpB,KAAoB,EACpB,WAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BAoNhB;yBAlOe,SAAS"}
|
|
@@ -212,6 +212,10 @@ const LEVEL_STYLE_TERMINAL = {
|
|
|
212
212
|
* polling; rows use `content-visibility: auto` for offscreen skip but are
|
|
213
213
|
* NOT virtualized (window large streams in the caller).
|
|
214
214
|
*
|
|
215
|
+
* Live announcements are tied to follow pinning: the `role="log"` region is
|
|
216
|
+
* `aria-live="polite"` only while following the tail and `aria-live="off"`
|
|
217
|
+
* while unfollowed, so appends never flood assistive tech.
|
|
218
|
+
*
|
|
215
219
|
* @example
|
|
216
220
|
* ```
|
|
217
221
|
* <LogStream
|
|
@@ -400,7 +404,14 @@ export function LogStream({
|
|
|
400
404
|
children: [/*#__PURE__*/_jsx("div", {
|
|
401
405
|
ref: scrollerRef,
|
|
402
406
|
role: "log",
|
|
403
|
-
"aria-label": label
|
|
407
|
+
"aria-label": label
|
|
408
|
+
// role="log" is implicitly aria-live="polite" — on a busy stream that
|
|
409
|
+
// floods assistive tech with every appended row (WCAG 2.2.2 / 4.1.3).
|
|
410
|
+
// Follow-pinning doubles as the mute switch: while the user is away
|
|
411
|
+
// from the tail (unfollowed), the region is aria-live="off"; resuming
|
|
412
|
+
// follow ("Jump to latest") restores polite announcements.
|
|
413
|
+
,
|
|
414
|
+
"aria-live": following ? 'polite' : 'off',
|
|
404
415
|
onScroll: handleScroll,
|
|
405
416
|
...stylex.props(styles.scroller(maxHeight ?? null)),
|
|
406
417
|
children: entries.map(entry => /*#__PURE__*/_jsx(Fragment, {
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file RichTextEditor.tsx
|
|
3
|
-
* @input Uses React, useId, Lexical (lexical + @lexical/react), Field,
|
|
3
|
+
* @input Uses React, useId, Lexical (lexical + @lexical/react), Field,
|
|
4
|
+
* VisuallyHidden, design tokens
|
|
4
5
|
* @output Exports RichTextEditor component, RichTextEditorProps, RichTextEditorStatus,
|
|
5
6
|
* RichTextEditorStatusType, RichTextEditorSize
|
|
6
7
|
* @position Experimental (lab) implementation; consumed by RichTextEditor/index.ts and
|
|
@@ -24,7 +25,7 @@ import type { BaseProps } from '@astryxdesign/core';
|
|
|
24
25
|
import type { SizeValue } from '@astryxdesign/core/utils';
|
|
25
26
|
import { type Transformer } from '@lexical/markdown';
|
|
26
27
|
export type { Transformer } from '@lexical/markdown';
|
|
27
|
-
import type
|
|
28
|
+
import { type EditorState, type Klass, type LexicalEditor, type LexicalNode } from 'lexical';
|
|
28
29
|
export type RichTextEditorStatusType = 'warning' | 'error' | 'success';
|
|
29
30
|
export type RichTextEditorSize = 'sm' | 'md' | 'lg';
|
|
30
31
|
export interface RichTextEditorStatus {
|
|
@@ -169,6 +170,15 @@ export interface RichTextEditorProps extends Omit<BaseProps, 'onChange' | 'defau
|
|
|
169
170
|
transformers?: ReadonlyArray<Transformer>;
|
|
170
171
|
/** Whether to automatically focus the editor on mount. @default false */
|
|
171
172
|
hasAutoFocus?: boolean;
|
|
173
|
+
/**
|
|
174
|
+
* Screen-reader hint describing how to move focus out of the editor, since
|
|
175
|
+
* Tab is bound to indentation (press Escape, then Tab). Rendered visually
|
|
176
|
+
* hidden and referenced from the editor's `aria-describedby`. Override it
|
|
177
|
+
* to localize the text, or pass an empty string to omit the hint entirely
|
|
178
|
+
* (e.g. when the host app provides its own instructions).
|
|
179
|
+
* @default 'Press Escape then Tab to move focus out of the editor.'
|
|
180
|
+
*/
|
|
181
|
+
tabEscapeHint?: string;
|
|
172
182
|
/**
|
|
173
183
|
* Maximum number of characters. When set, a character counter
|
|
174
184
|
* (current/max) is displayed below the editor. Like TextArea, this does
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../../src/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../../src/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"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"}
|