@astryxdesign/core 0.7.4-canary.b25f95e → 0.7.4-canary.b33622e
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/Chat/ChatMessageList.d.ts.map +1 -1
- package/dist/Chat/ChatMessageList.js +8 -1
- package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/CheckboxInput/CheckboxInput.js +6 -0
- package/dist/CommandPalette/CommandPalette.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPalette.js +6 -11
- package/dist/CommandPalette/CommandPaletteInput.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPaletteInput.js +7 -1
- package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
- package/dist/DateTimeInput/DateTimeInput.js +6 -1
- package/dist/DateTimeInput/TouchDateTimeField.d.ts.map +1 -1
- package/dist/DateTimeInput/TouchDateTimeField.js +9 -1
- package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuSubMenu.js +7 -1
- package/dist/FileInput/FileInput.d.ts.map +1 -1
- package/dist/FileInput/FileInput.js +16 -2
- package/dist/Thumbnail/Thumbnail.d.ts.map +1 -1
- package/dist/Thumbnail/Thumbnail.js +9 -2
- package/dist/TimeInput/TimeInput.d.ts.map +1 -1
- package/dist/TimeInput/TimeInput.js +6 -1
- package/dist/TimeInput/TouchTimeField.d.ts.map +1 -1
- package/dist/TimeInput/TouchTimeField.js +9 -1
- package/dist/hooks/useTypeahead.d.ts.map +1 -1
- package/dist/hooks/useTypeahead.js +7 -2
- package/package.json +3 -3
- package/src/BottomSheet/BottomSheet.spec.md +1 -0
- package/src/BottomSheet/BottomSheetEdgeTint.test.tsx +25 -2
- package/src/BottomSheet/BottomSheetSwitcher.spec.md +7 -6
- package/src/BottomSheet/BottomSheetSwitcher.test.tsx +221 -1
- package/src/BottomSheet/__tests__/BottomSheetNativeModal.a11y.browser.spec.ts +461 -0
- package/src/Chat/ChatMessageList.test.tsx +6 -2
- package/src/Chat/ChatMessageList.tsx +7 -1
- package/src/Chat/__tests__/ChatMessageList.a11y.chromium.spec.ts +20 -12
- package/src/CheckboxInput/CheckboxInput.tsx +6 -0
- package/src/CommandPalette/CommandPalette.test.tsx +4 -2
- package/src/CommandPalette/CommandPalette.tsx +6 -11
- package/src/CommandPalette/CommandPaletteInput.test.tsx +3 -1
- package/src/CommandPalette/CommandPaletteInput.tsx +10 -1
- package/src/DateTimeInput/DateTimeInput.tsx +5 -1
- package/src/DateTimeInput/TouchDateTimeField.tsx +14 -2
- package/src/DropdownMenu/DropdownMenuSubMenu.tsx +10 -1
- package/src/FileInput/FileInput.tsx +18 -2
- package/src/Overlay/Overlay.spec.md +304 -0
- package/src/Thumbnail/Thumbnail.test.tsx +6 -1
- package/src/Thumbnail/Thumbnail.tsx +12 -3
- package/src/TimeInput/TimeInput.tsx +5 -1
- package/src/TimeInput/TouchTimeField.tsx +12 -2
- package/src/__tests__/BusyOwnerAnnouncement.test.tsx +426 -3
- package/src/hooks/useTypeahead.test.tsx +42 -1
- package/src/hooks/useTypeahead.ts +7 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatMessageList.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatMessageList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAAC,KAAK,SAAS,EAA4C,MAAM,OAAO,CAAC;AAGhF,OAAO,EAEL,KAAK,WAAW,EAEjB,MAAM,eAAe,CAAC;AAGvB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"ChatMessageList.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatMessageList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAAC,KAAK,SAAS,EAA4C,MAAM,OAAO,CAAC;AAGhF,OAAO,EAEL,KAAK,WAAW,EAEjB,MAAM,eAAe,CAAC;AAGvB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAKhD,MAAM,WAAW,oBAAqB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACrE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAExC;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC;IAElB;;;;;;;;;;;;;;;OAeG;IACH,KAAK,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAEzB;;;;;;;;;;;OAWG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA4FD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,UAAU,EACV,iBAAiB,EACjB,OAAoB,EACpB,GAAG,EACH,KAAgB,EAChB,WAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,oBAAoB,+BAoGtB;yBAlHe,eAAe"}
|
|
@@ -31,6 +31,8 @@ import { ChatListContext, useChatLayoutContext } from "./ChatContext.js";
|
|
|
31
31
|
import { isRenderable, mergeProps } from "../utils/index.js";
|
|
32
32
|
import { Spinner } from "../Spinner/index.js";
|
|
33
33
|
import { themeProps } from "../utils/themeProps.js";
|
|
34
|
+
import { useTranslator } from "../i18n/index.js";
|
|
35
|
+
import { useBusyAnnouncement } from "../hooks/useBusyAnnouncement.js";
|
|
34
36
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
35
37
|
// =============================================================================
|
|
36
38
|
// Styles
|
|
@@ -161,6 +163,10 @@ export function ChatMessageList({
|
|
|
161
163
|
const sentinelRef = useRef(null);
|
|
162
164
|
const innerRef = useRef(null);
|
|
163
165
|
const [isLoadingTop, startTransition] = useTransition();
|
|
166
|
+
const t = useTranslator();
|
|
167
|
+
// The top loading Spinner sits inside the log and is silent; the list
|
|
168
|
+
// announces its loading through the channel (spec:AST-086 FR4, FR8).
|
|
169
|
+
useBusyAnnouncement(isLoadingTop, t('@astryx.spinner.loading'), innerRef);
|
|
164
170
|
|
|
165
171
|
// Register inner content element with the layout for height observation
|
|
166
172
|
useEffect(() => {
|
|
@@ -219,7 +225,8 @@ export function ChatMessageList({
|
|
|
219
225
|
className: "x78zum5 xl56j7k x8o8v82"
|
|
220
226
|
},
|
|
221
227
|
children: /*#__PURE__*/_jsx(Spinner, {
|
|
222
|
-
size: "md"
|
|
228
|
+
size: "md",
|
|
229
|
+
"aria-hidden": "true"
|
|
223
230
|
})
|
|
224
231
|
}), align === 'bottom' && /*#__PURE__*/_jsx("div", {
|
|
225
232
|
...{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/CheckboxInput/CheckboxInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAS3C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACtC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/CheckboxInput/CheckboxInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -27,7 +27,9 @@ import { mergeProps, rtlStyles } from "../utils/index.js";
|
|
|
27
27
|
import "../Indicator/indicator.markers.stylex.js";
|
|
28
28
|
import { indicatorScope } from "../Indicator/indicator.markers.stylex.js";
|
|
29
29
|
import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
|
|
30
|
+
import { useTranslator } from "../i18n/index.js";
|
|
30
31
|
import { useIndicatorFocusRing } from "../hooks/useIndicatorFocusRing.js";
|
|
32
|
+
import { useBusyAnnouncement } from "../hooks/useBusyAnnouncement.js";
|
|
31
33
|
import { usePressFeedback } from "../hooks/usePressFeedback.js";
|
|
32
34
|
import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
|
|
33
35
|
import { useIndicator } from "../Indicator/index.js";
|
|
@@ -195,6 +197,10 @@ export function CheckboxInput({
|
|
|
195
197
|
// `opacity: 0`, and only the indicator's own element can shape the outline
|
|
196
198
|
// to match it. See useIndicatorFocusRing.
|
|
197
199
|
const indicatorRef = useRef(null);
|
|
200
|
+
const t = useTranslator();
|
|
201
|
+
// The busy Spinner sits in the decorative, aria-hidden indicator, so this
|
|
202
|
+
// control announces its busy start itself (spec:AST-086 FR8).
|
|
203
|
+
useBusyAnnouncement(isBusy, t('@astryx.spinner.loading'), indicatorRef);
|
|
198
204
|
const {
|
|
199
205
|
focusProps
|
|
200
206
|
} = useIndicatorFocusRing(indicatorRef);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandPalette.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPalette.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,OAAO,EASL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,YAAY,EAAE,cAAc,EAAC,MAAM,cAAc,CAAC;AAU/D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,MAAM,WAAW,mBAAmB,CAClC,CAAC,SAAS,cAAc,GAAG,cAAc,CACzC,SAAQ,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACtD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,2CAA2C;IAC3C,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0DAA0D;IAC1D,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;;OAIG;IACH,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAE9B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAC;IAEzD;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAE/B,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,8CAA8C;IAC9C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AAiID;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,EAAE,EACxE,GAAG,EACH,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,KAAK,EACL,MAAM,EACN,UAAU,EACV,eAAe,EAAE,wBAAwB,EACzC,kBAAkB,EAAE,2BAA2B,EAC/C,KAAK,EAAE,eAAe,EACtB,aAAa,EACb,KAAK,EAAE,cAAc,EACrB,KAAW,EACX,SAAe,EACf,GAAG,IAAI,EACR,EAAE,mBAAmB,CAAC,CAAC,CAAC,+
|
|
1
|
+
{"version":3,"file":"CommandPalette.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPalette.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,OAAO,EASL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,YAAY,EAAE,cAAc,EAAC,MAAM,cAAc,CAAC;AAU/D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,MAAM,WAAW,mBAAmB,CAClC,CAAC,SAAS,cAAc,GAAG,cAAc,CACzC,SAAQ,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACtD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,2CAA2C;IAC3C,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0DAA0D;IAC1D,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;;OAIG;IACH,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAE9B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAC;IAEzD;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAE/B,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,8CAA8C;IAC9C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AAiID;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,EAAE,EACxE,GAAG,EACH,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,KAAK,EACL,MAAM,EACN,UAAU,EACV,eAAe,EAAE,wBAAwB,EACzC,kBAAkB,EAAE,2BAA2B,EAC/C,KAAK,EAAE,eAAe,EACtB,aAAa,EACb,KAAK,EAAE,cAAc,EACrB,KAAW,EACX,SAAe,EACf,GAAG,IAAI,EACR,EAAE,mBAAmB,CAAC,CAAC,CAAC,+BAsYxB;yBAvZe,cAAc"}
|
|
@@ -205,11 +205,11 @@ export function CommandPalette({
|
|
|
205
205
|
const searchVersionRef = useRef(0);
|
|
206
206
|
const emptyStateRef = useRef(null);
|
|
207
207
|
|
|
208
|
-
// Announce search
|
|
208
|
+
// Announce search results to screen readers through the shared polite live
|
|
209
209
|
// region (comboboxes-7 announce path, mirroring Selector / BaseTypeahead).
|
|
210
|
-
// The
|
|
211
|
-
//
|
|
212
|
-
//
|
|
210
|
+
// The empty states are otherwise purely visual, so a screen-reader user
|
|
211
|
+
// typing a query would hear nothing when results disappear. The busy start
|
|
212
|
+
// is announced by CommandPaletteInput.
|
|
213
213
|
const announce = useAnnounce();
|
|
214
214
|
const value = controlledValue ?? internalValue;
|
|
215
215
|
const setValue = useCallback(newValue => {
|
|
@@ -278,13 +278,8 @@ export function CommandPalette({
|
|
|
278
278
|
startTransition(async () => {
|
|
279
279
|
const isBootstrap = query === '';
|
|
280
280
|
|
|
281
|
-
//
|
|
282
|
-
//
|
|
283
|
-
// fast sources the result-count announcement below simply replaces
|
|
284
|
-
// this instead of stacking one "Loading" per keystroke.
|
|
285
|
-
if (!isBootstrap) {
|
|
286
|
-
announce(t('@astryx.commandPalette.loading'));
|
|
287
|
-
}
|
|
281
|
+
// The busy start ("Loading") is announced by CommandPaletteInput,
|
|
282
|
+
// from a region inside the palette's dialog (spec:AST-086 FR8, FR3).
|
|
288
283
|
|
|
289
284
|
// Client-filter previous results for instant narrowing while fetch is in flight
|
|
290
285
|
if (!isBootstrap && searchResults.length > 0) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandPaletteInput.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPaletteInput.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,OAAO,EAA2C,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAa/E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"CommandPaletteInput.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPaletteInput.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,OAAO,EAA2C,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAa/E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAuE5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,CAAC,gBAAgB,CAAC,EAC3B,UAAU,CACX;IACC,iEAAiE;IACjE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAElC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;CACvD;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EAAE,eAAe,EACtB,aAAa,EACb,WAAW,EAAE,oBAAoB,EACjC,KAAK,EACL,YAAmB,EACnB,UAAU,EACV,QAAQ,EACR,SAAS,EACT,OAAO,EACP,MAAM,EACN,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,wBAAwB,+BA2K1B;yBA3Le,mBAAmB"}
|
|
@@ -27,6 +27,7 @@ import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
|
|
|
27
27
|
import { getInteractionModality, useInteractionModalityTracking } from "../utils/interactionModality.js";
|
|
28
28
|
import { useTranslator } from "../i18n/index.js";
|
|
29
29
|
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
30
|
+
import { useBusyAnnouncement } from "../hooks/useBusyAnnouncement.js";
|
|
30
31
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
31
32
|
const styles = {
|
|
32
33
|
wrapper: {
|
|
@@ -97,6 +98,10 @@ export function CommandPaletteInput({
|
|
|
97
98
|
const hasListbox = ctx ? ctx.selectableItems.length > 0 : true;
|
|
98
99
|
const dialogContext = useDialogContext();
|
|
99
100
|
const inputRef = useRef(null);
|
|
101
|
+
// The search Spinner is decorative; the input announces each busy start,
|
|
102
|
+
// including the load on opening or clearing the query. Inside the palette's
|
|
103
|
+
// native modal it does so from a region in the dialog (spec:AST-086 FR8, FR3).
|
|
104
|
+
useBusyAnnouncement(ctx?.isBusy === true, t('@astryx.commandPalette.loading'), inputRef);
|
|
100
105
|
const [isKeyboardFocus, setIsKeyboardFocus] = useState(false);
|
|
101
106
|
|
|
102
107
|
// Text-entry controls match :focus-visible after pointer focus in Chromium.
|
|
@@ -195,7 +200,8 @@ export function CommandPaletteInput({
|
|
|
195
200
|
className: "x78zum5 x6s0dn4 x2lah0s xv1l7n4 x1hc1fzr x19991ni xjd9b36 x5h36tt x4itv7f"
|
|
196
201
|
},
|
|
197
202
|
children: /*#__PURE__*/_jsx(Spinner, {
|
|
198
|
-
size: "sm"
|
|
203
|
+
size: "sm",
|
|
204
|
+
"aria-hidden": "true"
|
|
199
205
|
})
|
|
200
206
|
}), hasEndContent && endContent]
|
|
201
207
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"AA4CA,OAAO,EAGL,KAAK,WAAW,EAKjB,MAAM,UAAU,CAAC;AAIlB,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,aAAa,EACnB,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -32,6 +32,7 @@ import { useCalendarConstraints } from "../Calendar/hooks/index.js";
|
|
|
32
32
|
import { usePopover } from "../Popover/index.js";
|
|
33
33
|
import { useTooltip } from "../Tooltip/index.js";
|
|
34
34
|
import { useInputContainer } from "../hooks/useInputContainer.js";
|
|
35
|
+
import { useBusyAnnouncement } from "../hooks/useBusyAnnouncement.js";
|
|
35
36
|
import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
|
|
36
37
|
import { parseDateInput, parseISOTime, parseTimeInput, formatDisplayTime12h, formatDisplayTime24h, formatISOTime, isTimeInRange, adjustTime, isImeKeyEvent, mergeProps, isFocusDetached } from "../utils/index.js";
|
|
37
38
|
import { chainEventHandlers } from "../utils/chainEventHandlers.js";
|
|
@@ -317,6 +318,9 @@ function PointerDateTimeField({
|
|
|
317
318
|
const [optimisticValue, setOptimisticValue] = useOptimistic(value);
|
|
318
319
|
const isPendingChange = optimisticValue !== value;
|
|
319
320
|
const isBusy = isLoading || isPendingChange;
|
|
321
|
+
// The busy Spinner is decorative; this control announces its busy start
|
|
322
|
+
// (spec:AST-086 FR8).
|
|
323
|
+
useBusyAnnouncement(isBusy, t('@astryx.spinner.loading'), dateInputRef);
|
|
320
324
|
// A native wheel emits several edits while it remains open. Disabling the
|
|
321
325
|
// control after the first optimistic edit detaches the iOS picker, so pending
|
|
322
326
|
// changeAction work stays interactive just like TouchDateTimeField. Explicit
|
|
@@ -1130,7 +1134,8 @@ function PointerDateTimeField({
|
|
|
1130
1134
|
}),
|
|
1131
1135
|
onClick: handleClear
|
|
1132
1136
|
}), isBusy && /*#__PURE__*/_jsx(Spinner, {
|
|
1133
|
-
size: "sm"
|
|
1137
|
+
size: "sm",
|
|
1138
|
+
"aria-hidden": "true"
|
|
1134
1139
|
}), statusIcon]
|
|
1135
1140
|
}), /*#__PURE__*/_jsx("div", {
|
|
1136
1141
|
ref: timeContainerRef,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TouchDateTimeField.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/TouchDateTimeField.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TouchDateTimeField.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/TouchDateTimeField.tsx"],"names":[],"mappings":"AA8GA,OAAO,KAAK,EAAC,kBAAkB,EAAoB,MAAM,iBAAiB,CAAC;AAuV3E,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,eAAe,EACf,UAAkB,EAClB,UAAkB,EAElB,aAAa,EAAE,cAAc,EAC7B,kBAAkB,EAAE,mBAAmB,EACvC,QAAgB,EAChB,WAAW,EAAE,oBAAoB,EACjC,eAAe,EAAE,wBAAwB,EACzC,SAAS,EACT,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,YAAY,EAEZ,cAAc,EAAE,eAAe,EAC/B,YAAY,EAAE,gBAAoB,EAClC,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,GAAG,SAAS,EACb,EAAE,kBAAkB,+BAkgCpB;yBAziCe,kBAAkB"}
|
|
@@ -29,6 +29,7 @@ import { useCalendarConstraints } from "../Calendar/index.js";
|
|
|
29
29
|
import { Field, InputClearButton, inputWrapperStyles, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputStatusFocusWithinStyles } from "../Field/index.js";
|
|
30
30
|
import { useInputStatusIcon, useMergedRefs } from "../hooks/index.js";
|
|
31
31
|
import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
|
|
32
|
+
import { useBusyAnnouncement } from "../hooks/useBusyAnnouncement.js";
|
|
32
33
|
import { Icon } from "../Icon/index.js";
|
|
33
34
|
import { IconButton } from "../IconButton/index.js";
|
|
34
35
|
import { useTranslator, InternationalizationContext } from "../i18n/index.js";
|
|
@@ -338,6 +339,11 @@ export function TouchDateTimeField({
|
|
|
338
339
|
dateConstraints
|
|
339
340
|
});
|
|
340
341
|
const [isSheetOpen, setIsSheetOpen] = useState(false);
|
|
342
|
+
const sheetBodyRef = useRef(null);
|
|
343
|
+
// The busy Spinner is decorative; this control announces its busy start
|
|
344
|
+
// (spec:AST-086 FR8). A change made in the open modal sheet starts it while
|
|
345
|
+
// the sheet is open, so it is announced from inside the sheet.
|
|
346
|
+
useBusyAnnouncement(isBusy, t('@astryx.spinner.loading'), isSheetOpen ? sheetBodyRef : dateInputRef);
|
|
341
347
|
const [activePanel, setActivePanel] = useState('date');
|
|
342
348
|
const [isWheelOpen, setIsWheelOpen] = useState(false);
|
|
343
349
|
const [draftTime, setDraftTime] = useState(() => normalizeISOTime(splitDateTime(value).time, hasSeconds));
|
|
@@ -990,7 +996,8 @@ export function TouchDateTimeField({
|
|
|
990
996
|
}),
|
|
991
997
|
onClick: handleClear
|
|
992
998
|
}), isBusy && /*#__PURE__*/_jsx(Spinner, {
|
|
993
|
-
size: "sm"
|
|
999
|
+
size: "sm",
|
|
1000
|
+
"aria-hidden": "true"
|
|
994
1001
|
}), isRenderable(statusIcon) && statusIcon]
|
|
995
1002
|
}), /*#__PURE__*/_jsxs("div", {
|
|
996
1003
|
onClick: event => {
|
|
@@ -1058,6 +1065,7 @@ export function TouchDateTimeField({
|
|
|
1058
1065
|
,
|
|
1059
1066
|
padding: 0,
|
|
1060
1067
|
children: /*#__PURE__*/_jsx("div", {
|
|
1068
|
+
ref: sheetBodyRef,
|
|
1061
1069
|
...{
|
|
1062
1070
|
className: "x9f619 xh8yej3 xeuugli x1pzlopt x1adxfkp x1awphl8"
|
|
1063
1071
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenuSubMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuSubMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AAEH,OAAO,KAAK,EAAE,EASZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"DropdownMenuSubMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuSubMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AAEH,OAAO,KAAK,EAAE,EASZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAyC5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6N5C,MAAM,MAAM,+BAA+B,GACzC,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAC;AAErC,UAAU,4BAA6B,SAAQ,IAAI,CACjD,SAAS,EACT,MAAM,GAAG,UAAU,CACpB;IACC,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,8CAA8C;IAC9C,KAAK,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,+BAA+B,CAAC;IAC/C;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B;AAED,MAAM,WAAW,wBAAyB,SAAQ,4BAA4B;IAC5E;;;;;;;;OAQG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AA6CD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,wBAAwB,GAC9B,SAAS,CAg5BX;yBAl5Be,mBAAmB"}
|
|
@@ -61,6 +61,7 @@ import { Item } from "../Item/index.js";
|
|
|
61
61
|
import { useLayer } from "../Layer/useLayer.js";
|
|
62
62
|
import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
|
|
63
63
|
import { useListFocus } from "../hooks/useListFocus.js";
|
|
64
|
+
import { useBusyAnnouncement } from "../hooks/useBusyAnnouncement.js";
|
|
64
65
|
import { useMenuHover } from "../hooks/useMenuHover.js";
|
|
65
66
|
import { isMenuPressActivation, MENU_PRESS_SURFACE_ATTR, useMenuPress } from "../hooks/useMenuPress.js";
|
|
66
67
|
import { useTypeahead } from "../hooks/useTypeahead.js";
|
|
@@ -461,6 +462,10 @@ export function DropdownMenuSubMenu(props) {
|
|
|
461
462
|
// closed from elsewhere is cancelled instead of firing into the hidden
|
|
462
463
|
// menu (#6893).
|
|
463
464
|
const isRootMenuOpen = useDropdownMenuRootOpen();
|
|
465
|
+
// The loading Spinner on the trigger is decorative; the submenu announces
|
|
466
|
+
// its busy start instead (spec:AST-086 FR8), once its level is shown: a
|
|
467
|
+
// closed menu stays mounted but hidden, and announces nothing.
|
|
468
|
+
useBusyAnnouncement(hasSpinner && isRootMenuOpen, t('@astryx.spinner.loading'), triggerRef);
|
|
464
469
|
const {
|
|
465
470
|
triggerProps,
|
|
466
471
|
contentProps,
|
|
@@ -761,7 +766,8 @@ export function DropdownMenuSubMenu(props) {
|
|
|
761
766
|
className: "x78zum5 x6s0dn4"
|
|
762
767
|
},
|
|
763
768
|
children: /*#__PURE__*/_jsx(Spinner, {
|
|
764
|
-
size: "sm"
|
|
769
|
+
size: "sm",
|
|
770
|
+
"aria-hidden": "true"
|
|
765
771
|
})
|
|
766
772
|
}) : /*#__PURE__*/_jsx("span", {
|
|
767
773
|
...{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAuCA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAuCA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAUlB,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAGlB,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAmP9C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,mBAAmB,EACnB,UAAU,GAAG,cAAc,GAAG,OAAO,CACtC;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;IAC5B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAqB,EACrB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,UAAkB,EAClB,eAAe,EACf,UAAkB,EAClB,SAAiB,EACjB,MAAM,EAAE,UAAU,EAClB,aAA0B,EAC1B,WAAW,EACX,WAAW,EACX,IAAc,EACd,UAAkB,EAClB,YAAY,EACZ,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,EAAE,EAAE,MAAM,EACV,GAAG,SAAS,EACb,EAAE,cAAc,+BAmdhB;yBAlfe,SAAS"}
|
|
@@ -24,6 +24,7 @@ import { Icon } from "../Icon/index.js";
|
|
|
24
24
|
import { Spinner } from "../Spinner/index.js";
|
|
25
25
|
import { VisuallyHidden } from "../VisuallyHidden/index.js";
|
|
26
26
|
import { useAnnounce } from "../hooks/useAnnounce.js";
|
|
27
|
+
import { useBusyAnnouncement } from "../hooks/useBusyAnnouncement.js";
|
|
27
28
|
import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
|
|
28
29
|
import { useClickableContainer } from "../hooks/useClickableContainer.js";
|
|
29
30
|
import { useTooltip } from "../Tooltip/index.js";
|
|
@@ -232,6 +233,16 @@ export function FileInput({
|
|
|
232
233
|
const [, startTransition] = useTransition();
|
|
233
234
|
const [optimisticValue, setOptimisticValue] = useOptimistic(value);
|
|
234
235
|
const isBusy = isLoading || optimisticValue !== value;
|
|
236
|
+
// A pick is one user action, already announced as "file selected"; a busy
|
|
237
|
+
// period it starts (changeAction, or a caller setting isLoading from
|
|
238
|
+
// onChange) adds no second message (spec:AST-086 FR6). The mark lasts until
|
|
239
|
+
// the field is idle again. Other busy starts announce; the Spinner stays
|
|
240
|
+
// decorative (FR8).
|
|
241
|
+
const [isPickAnnounced, setIsPickAnnounced] = useState(false);
|
|
242
|
+
if (isPickAnnounced && !isBusy) {
|
|
243
|
+
setIsPickAnnounced(false);
|
|
244
|
+
}
|
|
245
|
+
useBusyAnnouncement(isBusy && !isPickAnnounced, t('@astryx.spinner.loading'), containerRef);
|
|
235
246
|
|
|
236
247
|
// Announce successful file selection to screen readers via a persistent
|
|
237
248
|
// live region (forms-17). Validation errors are announced (assertively) by
|
|
@@ -299,6 +310,7 @@ export function FileInput({
|
|
|
299
310
|
// status mounts, so only announce the attach here (do not
|
|
300
311
|
// double-announce errors).
|
|
301
312
|
if (errors.length === 0) {
|
|
313
|
+
setIsPickAnnounced(true);
|
|
302
314
|
announce(valid.length === 1 ? t('@astryx.fileInput.fileSelected', {
|
|
303
315
|
fileName: valid[0].name
|
|
304
316
|
}) : t('@astryx.fileInput.filesSelected', {
|
|
@@ -414,7 +426,8 @@ export function FileInput({
|
|
|
414
426
|
const renderDropzoneContent = () => {
|
|
415
427
|
if (isBusy) {
|
|
416
428
|
return /*#__PURE__*/_jsx(Spinner, {
|
|
417
|
-
size: "md"
|
|
429
|
+
size: "md",
|
|
430
|
+
"aria-hidden": "true"
|
|
418
431
|
});
|
|
419
432
|
}
|
|
420
433
|
if (hasFiles) {
|
|
@@ -450,7 +463,8 @@ export function FileInput({
|
|
|
450
463
|
},
|
|
451
464
|
children: fileNames ?? displayPlaceholder
|
|
452
465
|
}), /*#__PURE__*/_jsx(Spinner, {
|
|
453
|
-
size: "sm"
|
|
466
|
+
size: "sm",
|
|
467
|
+
"aria-hidden": "true"
|
|
454
468
|
})]
|
|
455
469
|
});
|
|
456
470
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Thumbnail.d.ts","sourceRoot":"","sources":["../../src/Thumbnail/Thumbnail.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Thumbnail.d.ts","sourceRoot":"","sources":["../../src/Thumbnail/Thumbnail.tsx"],"names":[],"mappings":"AA4CA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;;;;;OASG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA6LD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,SAAS,CAAC,EACxB,GAAG,EACH,GAAG,EACH,KAAK,EACL,QAAQ,EACR,OAAO,EACP,SAAiB,EACjB,UAAkB,EAClB,YAAsB,EACtB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,+BA2JhB;yBA1Ke,SAAS"}
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
* - /apps/storybook/stories/Thumbnail.stories.tsx
|
|
25
25
|
* - /packages/cli/assets/templates/blocks/components/Thumbnail/ (showcase blocks)
|
|
26
26
|
*/
|
|
27
|
-
import { useState } from 'react';
|
|
27
|
+
import { useRef, useState } from 'react';
|
|
28
28
|
import * as stylex from '@stylexjs/stylex';
|
|
29
29
|
import "../theme/tokens.stylex.js";
|
|
30
30
|
import { colorVars, radiusVars, spacingVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
|
|
@@ -34,6 +34,7 @@ import { Skeleton } from "../Skeleton/index.js";
|
|
|
34
34
|
import { Spinner } from "../Spinner/index.js";
|
|
35
35
|
import { Tooltip } from "../Tooltip/Tooltip.js";
|
|
36
36
|
import { useDevWarning } from "../hooks/useDevWarning.js";
|
|
37
|
+
import { useBusyAnnouncement } from "../hooks/useBusyAnnouncement.js";
|
|
37
38
|
import { useContainerReveal } from "../hooks/useContainerReveal.js";
|
|
38
39
|
import { mergeProps } from "../utils/index.js";
|
|
39
40
|
import { themeProps } from "../utils/themeProps.js";
|
|
@@ -175,6 +176,10 @@ export function Thumbnail({
|
|
|
175
176
|
const showSkeleton = isLoading && !hasSrc;
|
|
176
177
|
const showImage = hasSrc && !showSkeleton && !hasError;
|
|
177
178
|
const showUploadOverlay = isLoading && hasSrc;
|
|
179
|
+
const uploadOverlayRef = useRef(null);
|
|
180
|
+
// The upload Spinner is decorative; the thumbnail announces its busy start
|
|
181
|
+
// instead (spec:AST-086 FR8).
|
|
182
|
+
useBusyAnnouncement(showUploadOverlay, t('@astryx.spinner.loading'), uploadOverlayRef);
|
|
178
183
|
const showPlaceholder = !isLoading && !hasSrc || hasError;
|
|
179
184
|
const isInteractive = onClick != null && !isDisabled && !isLoading;
|
|
180
185
|
const hasRemove = onRemove != null && !isDisabled;
|
|
@@ -273,12 +278,14 @@ export function Thumbnail({
|
|
|
273
278
|
className: "x10l6tqk x10a8y8t x1pjcqnp x1er153n x47corl"
|
|
274
279
|
}
|
|
275
280
|
}), showUploadOverlay && /*#__PURE__*/_jsx("div", {
|
|
281
|
+
ref: uploadOverlayRef,
|
|
276
282
|
...{
|
|
277
283
|
className: "x10l6tqk x10a8y8t x78zum5 x6s0dn4 xl56j7k x1u4601x x1pjcqnp x1vjfegm x14ju556"
|
|
278
284
|
},
|
|
279
285
|
children: /*#__PURE__*/_jsx(Spinner, {
|
|
280
286
|
size: "sm",
|
|
281
|
-
shade: "onMedia"
|
|
287
|
+
shade: "onMedia",
|
|
288
|
+
"aria-hidden": "true"
|
|
282
289
|
})
|
|
283
290
|
}), removeButtonEl]
|
|
284
291
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../../src/TimeInput/TimeInput.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAO3C,OAAO,EAGL,KAAK,WAAW,EAKhB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAIlB,OAAO,EACL,KAAK,aAAa,EAUnB,MAAM,UAAU,CAAC;AAGlB,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../../src/TimeInput/TimeInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -30,6 +30,7 @@ import { joinAriaIDs } from "../utils/inputAria.js";
|
|
|
30
30
|
import { useFieldInputStyling } from "../Field/fieldParts.js";
|
|
31
31
|
import { useSize } from "../SizeContext/SizeContext.js";
|
|
32
32
|
import { useAnnounce } from "../hooks/useAnnounce.js";
|
|
33
|
+
import { useBusyAnnouncement } from "../hooks/useBusyAnnouncement.js";
|
|
33
34
|
import { useInputContainer } from "../hooks/useInputContainer.js";
|
|
34
35
|
import { useMediaQuery } from "../hooks/useMediaQuery.js";
|
|
35
36
|
import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
|
|
@@ -169,6 +170,9 @@ function TimeField({
|
|
|
169
170
|
const [, startTransition] = useTransition();
|
|
170
171
|
const [optimisticValue, setOptimisticValue] = useOptimistic(value);
|
|
171
172
|
const isBusy = isLoading || optimisticValue !== value;
|
|
173
|
+
// The busy Spinner is decorative; this control announces its busy start
|
|
174
|
+
// (spec:AST-086 FR8).
|
|
175
|
+
useBusyAnnouncement(isBusy, t('@astryx.spinner.loading'), containerRef);
|
|
172
176
|
|
|
173
177
|
// In grouped mode the status message renders as a visually-hidden node that
|
|
174
178
|
// exists only for aria-describedby. Announce it through the persistent
|
|
@@ -504,7 +508,8 @@ function TimeField({
|
|
|
504
508
|
children: !isInputValid ? t('@astryx.timeInput.invalidTime') : ''
|
|
505
509
|
})]
|
|
506
510
|
}), isBusy && /*#__PURE__*/_jsx(Spinner, {
|
|
507
|
-
size: "sm"
|
|
511
|
+
size: "sm",
|
|
512
|
+
"aria-hidden": "true"
|
|
508
513
|
}), hasClear && optimisticValue && !isDisabled && /*#__PURE__*/_jsx(InputClearButton, {
|
|
509
514
|
label: t('@astryx.timeInput.clearLabel', {
|
|
510
515
|
label
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TouchTimeField.d.ts","sourceRoot":"","sources":["../../src/TimeInput/TouchTimeField.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TouchTimeField.d.ts","sourceRoot":"","sources":["../../src/TimeInput/TouchTimeField.tsx"],"names":[],"mappings":"AAqEA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AAqHhD;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,UAAkB,EAClB,QAAgB,EAChB,UAAkB,EAGlB,SAAS,EAAE,UAAU,EACrB,YAAY,EAAE,aAAa,EAC3B,WAAW,EAAE,oBAAoB,EACjC,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,aAA0B,EAC1B,YAAY,EACZ,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,GAAG,SAAS,EACb,EAAE,cAAc,+BA0ZhB;yBA7be,cAAc"}
|
|
@@ -25,6 +25,7 @@ import { useFieldInputStyling } from "../Field/fieldParts.js";
|
|
|
25
25
|
import { joinAriaIDs } from "../utils/inputAria.js";
|
|
26
26
|
import { groupStyles } from "../InputGroup/groupStyles.js";
|
|
27
27
|
import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
|
|
28
|
+
import { useBusyAnnouncement } from "../hooks/useBusyAnnouncement.js";
|
|
28
29
|
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
29
30
|
import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
|
|
30
31
|
import { Icon } from "../Icon/index.js";
|
|
@@ -180,6 +181,11 @@ export function TouchTimeField({
|
|
|
180
181
|
const [, startTransition] = useTransition();
|
|
181
182
|
const [optimisticValue, setOptimisticValue] = useOptimistic(value);
|
|
182
183
|
const isBusy = isLoading || optimisticValue !== value;
|
|
184
|
+
const sheetBodyRef = useRef(null);
|
|
185
|
+
// The busy Spinner is decorative; this control announces its busy start
|
|
186
|
+
// (spec:AST-086 FR8). A change made in the open modal sheet starts it while
|
|
187
|
+
// the sheet is open, so it is announced from inside the sheet.
|
|
188
|
+
useBusyAnnouncement(isBusy, t('@astryx.spinner.loading'), isSheetOpen ? sheetBodyRef : inputRef);
|
|
183
189
|
const isEffectivelyDisabled = isDisabled || isLoading;
|
|
184
190
|
const showsDisabledMessage = isDisabled && !!disabledMessage;
|
|
185
191
|
const disabledMessageTooltip = useTooltip({
|
|
@@ -362,7 +368,8 @@ export function TouchTimeField({
|
|
|
362
368
|
className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv xjbqb8w x1a2a7pz x1ypdohk x16khyan"
|
|
363
369
|
}
|
|
364
370
|
}), isBusy && /*#__PURE__*/_jsx(Spinner, {
|
|
365
|
-
size: "sm"
|
|
371
|
+
size: "sm",
|
|
372
|
+
"aria-hidden": "true"
|
|
366
373
|
}), hasClear && optimisticValue && !isEffectivelyDisabled && /*#__PURE__*/_jsx(InputClearButton, {
|
|
367
374
|
label: t('@astryx.timeInput.clearLabel', {
|
|
368
375
|
label
|
|
@@ -377,6 +384,7 @@ export function TouchTimeField({
|
|
|
377
384
|
,
|
|
378
385
|
padding: 0,
|
|
379
386
|
children: /*#__PURE__*/_jsxs("div", {
|
|
387
|
+
ref: sheetBodyRef,
|
|
380
388
|
...{
|
|
381
389
|
className: "x9f619 x78zum5 xdt5ytf xh8yej3 xeuugli x1txdalj x1pzlopt x1adxfkp x1awphl8"
|
|
382
390
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTypeahead.d.ts","sourceRoot":"","sources":["../../src/hooks/useTypeahead.ts"],"names":[],"mappings":"AAkBA,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,aAAa,EAAE,MAAM,aAAa,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IAE9D;;;OAGG;IACH,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjC;;;;;OAKG;IACH,eAAe,CAAC,EAAE,MAAM,MAAM,CAAC;IAE/B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;CACzC;AAED,MAAM,WAAW,kBAAkB;IACjC;;;;OAIG;IACH,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,aAAa,KAAK,OAAO,CAAC;IAC/D,gDAAgD;IAChD,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AA+BD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,mBAAmB,GAAG,kBAAkB,
|
|
1
|
+
{"version":3,"file":"useTypeahead.d.ts","sourceRoot":"","sources":["../../src/hooks/useTypeahead.ts"],"names":[],"mappings":"AAkBA,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,aAAa,EAAE,MAAM,aAAa,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IAE9D;;;OAGG;IACH,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjC;;;;;OAKG;IACH,eAAe,CAAC,EAAE,MAAM,MAAM,CAAC;IAE/B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;CACzC;AAED,MAAM,WAAW,kBAAkB;IACjC;;;;OAIG;IACH,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,aAAa,KAAK,OAAO,CAAC;IAC/D,gDAAgD;IAChD,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AA+BD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,mBAAmB,GAAG,kBAAkB,CAmG7E"}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file useTypeahead.ts
|
|
7
|
-
* @input Uses React useCallback/useRef
|
|
7
|
+
* @input Uses React useCallback/useEffect/useRef
|
|
8
8
|
* @output Exports useTypeahead hook for first-character (type-to-focus) search
|
|
9
9
|
* @position Core hook; adds APG typeahead to menus, listboxes, and other
|
|
10
10
|
* collections. Composes with useListFocus/useGridFocus (or any collection)
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
* SYNC: When modified, update:
|
|
14
14
|
* - /packages/core/src/hooks/index.ts
|
|
15
15
|
*/
|
|
16
|
-
import { useCallback, useRef } from 'react';
|
|
16
|
+
import { useCallback, useEffect, useRef } from 'react';
|
|
17
17
|
/**
|
|
18
18
|
* Whether a key event represents a single printable character (a type-to-focus
|
|
19
19
|
* candidate) rather than a control/navigation key or a shortcut chord.
|
|
@@ -79,6 +79,11 @@ export function useTypeahead(options) {
|
|
|
79
79
|
timeoutRef.current = undefined;
|
|
80
80
|
}
|
|
81
81
|
}, []);
|
|
82
|
+
|
|
83
|
+
// A collection that unmounts, or that an `<Activity>` boundary hides,
|
|
84
|
+
// mid-typing leaves no reset timer running and comes back with an empty
|
|
85
|
+
// buffer, as the reset would have left it.
|
|
86
|
+
useEffect(() => reset, [reset]);
|
|
82
87
|
const scheduleReset = useCallback(() => {
|
|
83
88
|
if (timeoutRef.current) {
|
|
84
89
|
clearTimeout(timeoutRef.current);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@astryxdesign/core",
|
|
3
|
-
"version": "0.7.4-canary.
|
|
3
|
+
"version": "0.7.4-canary.b33622e",
|
|
4
4
|
"displayName": "Astryx Core",
|
|
5
5
|
"description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
|
|
6
6
|
"author": "Meta Open Source",
|
|
@@ -792,8 +792,8 @@
|
|
|
792
792
|
"react-dom": ">=19.0.0"
|
|
793
793
|
},
|
|
794
794
|
"devDependencies": {
|
|
795
|
-
"@astryxdesign/a11y-spec": "0.7.4-canary.
|
|
796
|
-
"@astryxdesign/cli": "0.7.4-canary.
|
|
795
|
+
"@astryxdesign/a11y-spec": "0.7.4-canary.b33622e",
|
|
796
|
+
"@astryxdesign/cli": "0.7.4-canary.b33622e",
|
|
797
797
|
"@babel/cli": "^7.29.7",
|
|
798
798
|
"@babel/core": "^7.29.7",
|
|
799
799
|
"@babel/preset-react": "^7.29.7",
|
|
@@ -15,6 +15,7 @@ verified_by:
|
|
|
15
15
|
packages/core/src/BottomSheet/BottomSheet.test.tsx,
|
|
16
16
|
packages/core/src/BottomSheet/BottomSheetPanel.test.tsx,
|
|
17
17
|
packages/core/src/BottomSheet/BottomSheetKeyboard.test.tsx,
|
|
18
|
+
packages/core/src/BottomSheet/__tests__/BottomSheetNativeModal.a11y.browser.spec.ts,
|
|
18
19
|
packages/core/src/BottomSheet/__tests__/BottomSheetKeyboard.a11y.browser.spec.ts,
|
|
19
20
|
apps/storybook/stories/BottomSheet.stories.tsx,
|
|
20
21
|
scripts/check-knowledge.mjs,
|
|
@@ -148,15 +148,38 @@ describe('BottomSheetEdgeTint', () => {
|
|
|
148
148
|
expect(tints()).toHaveLength(1);
|
|
149
149
|
});
|
|
150
150
|
|
|
151
|
-
it('gives a modal switcher flow exactly one tint', () => {
|
|
152
|
-
render(
|
|
151
|
+
it('gives a modal switcher flow exactly one tint at rest, and one per presented dialog through a handoff', () => {
|
|
152
|
+
const {rerender} = render(
|
|
153
153
|
<BottomSheetSwitcher activeSheet="comment" onActiveSheetChange={() => {}}>
|
|
154
154
|
<BottomSheet sheetId="comment" label="Add a comment">
|
|
155
155
|
Comment
|
|
156
156
|
</BottomSheet>
|
|
157
|
+
<BottomSheet sheetId="confirmation" label="Confirmation">
|
|
158
|
+
Confirmation
|
|
159
|
+
</BottomSheet>
|
|
157
160
|
</BottomSheetSwitcher>,
|
|
158
161
|
);
|
|
159
162
|
expect(tints()).toHaveLength(1);
|
|
163
|
+
expect(tints()[0]?.closest('dialog')?.getAttribute('aria-label')).toBe(
|
|
164
|
+
'Add a comment',
|
|
165
|
+
);
|
|
166
|
+
|
|
167
|
+
rerender(
|
|
168
|
+
<BottomSheetSwitcher
|
|
169
|
+
activeSheet="confirmation"
|
|
170
|
+
onActiveSheetChange={() => {}}>
|
|
171
|
+
<BottomSheet sheetId="comment" label="Add a comment">
|
|
172
|
+
Comment
|
|
173
|
+
</BottomSheet>
|
|
174
|
+
<BottomSheet sheetId="confirmation" label="Confirmation">
|
|
175
|
+
Confirmation
|
|
176
|
+
</BottomSheet>
|
|
177
|
+
</BottomSheetSwitcher>,
|
|
178
|
+
);
|
|
179
|
+
// Mid-handoff both dialogs are presented; each carries its own tint.
|
|
180
|
+
expect(
|
|
181
|
+
tints().map(tint => tint.closest('dialog')?.getAttribute('aria-label')),
|
|
182
|
+
).toEqual(['Add a comment', 'Confirmation']);
|
|
160
183
|
});
|
|
161
184
|
|
|
162
185
|
it('keeps the tint out of the accessibility tree and out of hit testing', async () => {
|