@astryxdesign/core 0.7.9-canary.ddb8b34 → 0.7.9-canary.de0bbc2
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 +10 -2
- package/dist/CheckboxList/CheckboxListItem.d.ts.map +1 -1
- package/dist/CheckboxList/CheckboxListItem.js +8 -1
- package/dist/ComplexSelector/ComplexSelector.d.ts.map +1 -1
- package/dist/ComplexSelector/ComplexSelector.js +21 -12
- package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
- package/dist/DateTimeInput/DateTimeInput.js +33 -9
- package/dist/HoverCard/HoverCard.d.ts.map +1 -1
- package/dist/HoverCard/HoverCard.js +19 -9
- package/dist/Pagination/Pagination.d.ts.map +1 -1
- package/dist/Pagination/Pagination.js +28 -10
- package/dist/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/Tooltip/Tooltip.js +19 -9
- package/dist/i18n/generated-locales/en.generated.d.ts.map +1 -1
- package/dist/i18n/generated-locales/en.generated.js +2 -1
- package/dist/i18n/generated-locales/pseudo.generated.d.ts.map +1 -1
- package/dist/i18n/generated-locales/pseudo.generated.js +2 -1
- package/dist/internal/touch.d.ts +12 -4
- package/dist/internal/touch.d.ts.map +1 -1
- package/dist/internal/touch.js +14 -5
- package/locales/en.json +4 -0
- package/locales/pseudo.json +3 -0
- package/package.json +4 -4
- package/src/Chat/ChatMessageList.tsx +18 -2
- package/src/CheckboxList/CheckboxListItem.tsx +7 -4
- package/src/ComplexSelector/ComplexSelector.doc.mjs +2 -2
- package/src/ComplexSelector/ComplexSelector.tsx +39 -31
- package/src/DateTimeInput/DateTimeInput.tsx +35 -13
- package/src/HoverCard/HoverCard.tsx +4 -1
- package/src/Pagination/Pagination.tsx +23 -9
- package/src/Tooltip/Tooltip.tsx +4 -1
- package/src/i18n/generated-locales/en.generated.ts +1 -0
- package/src/i18n/generated-locales/pseudo.generated.ts +1 -0
- package/src/internal/touch.ts +19 -4
|
@@ -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;
|
|
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;AAIhF,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;AAWhD,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;AAoGD;;;;;;;;;;;;;;;;;;;;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,+BA6GtB;yBA3He,eAAe"}
|
|
@@ -26,7 +26,8 @@
|
|
|
26
26
|
import { useEffect, useMemo, useRef, useTransition } from 'react';
|
|
27
27
|
import * as stylex from '@stylexjs/stylex';
|
|
28
28
|
import "../theme/tokens.stylex.js";
|
|
29
|
-
import { spacingVars } from "../theme/tokens.stylex.js";
|
|
29
|
+
import { focusVars, spacingVars } from "../theme/tokens.stylex.js";
|
|
30
|
+
import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
|
|
30
31
|
import { ChatListContext, useChatLayoutContext } from "./ChatContext.js";
|
|
31
32
|
import { isRenderable, mergeProps } from "../utils/index.js";
|
|
32
33
|
import { Spinner } from "../Spinner/index.js";
|
|
@@ -48,6 +49,10 @@ const styles = {
|
|
|
48
49
|
kAzted: "x2lwn1j",
|
|
49
50
|
$$css: true
|
|
50
51
|
},
|
|
52
|
+
focusRingInset: {
|
|
53
|
+
kInvED: "x1nw7mhf",
|
|
54
|
+
$$css: true
|
|
55
|
+
},
|
|
51
56
|
inner: {
|
|
52
57
|
k1xSpc: "x78zum5",
|
|
53
58
|
kXwgrk: "xdt5ytf",
|
|
@@ -218,7 +223,10 @@ export function ChatMessageList({
|
|
|
218
223
|
"data-testid": testId,
|
|
219
224
|
...mergeProps(themeProps('chat-message-list', {
|
|
220
225
|
density
|
|
221
|
-
}),
|
|
226
|
+
}),
|
|
227
|
+
// A tab stop: the shared ring, which a theme restyles through the
|
|
228
|
+
// focus-outline tokens.
|
|
229
|
+
stylex.props(styles.root, focusOutlineStyles.focusVisible, styles.focusRingInset, xstyle), className, style),
|
|
222
230
|
children: /*#__PURE__*/_jsxs("div", {
|
|
223
231
|
ref: innerRef,
|
|
224
232
|
...stylex.props(styles.inner, densityGapStyle, gapOverrideStyle),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxListItem.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAkC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAItE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"CheckboxListItem.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAkC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAItE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAe5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,SAAS,CAAC;AAuBvC,MAAM,WAAW,qBAAsB,SAAQ,SAAS,CAAC,aAAa,CAAC;IACrE;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;;;;;;OAaG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IACtC;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;CAChC;AAyCD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,WAAW,EACX,UAAU,EACV,UAAU,EAAE,cAAsB,EAClC,SAAS,EAAE,aAAqB,EAChC,SAAS,EACT,OAAO,EACP,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,KAAK,EACL,GAAG,SAAS,EACb,EAAE,qBAAqB,+BAmLvB;yBApMe,gBAAgB"}
|
|
@@ -32,6 +32,7 @@ import { CheckboxListContext } from "./CheckboxListContext.js";
|
|
|
32
32
|
import { ItemDescriptionContext } from "../Item/ItemDescriptionContext.js";
|
|
33
33
|
import { joinAriaIDs } from "../utils/inputAria.js";
|
|
34
34
|
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
35
|
+
import { themeDataAttributes } from "../utils/themeProps.js";
|
|
35
36
|
import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
|
|
36
37
|
import english from "../i18n/generated-english/CheckboxList/CheckboxListItem.generated.js";
|
|
37
38
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -224,8 +225,14 @@ export function CheckboxListItem({
|
|
|
224
225
|
onCheck?.(shouldCheck);
|
|
225
226
|
}
|
|
226
227
|
};
|
|
228
|
+
|
|
229
|
+
// The state follows the fill, so a theme can restyle the text on it.
|
|
230
|
+
const isCheckedRow = resolvedChecked === true && !effectiveDisabled && !effectiveReadOnly;
|
|
227
231
|
return /*#__PURE__*/_jsx(ListItem, {
|
|
228
232
|
...restProps,
|
|
233
|
+
...themeDataAttributes({
|
|
234
|
+
selected: isCheckedRow ? 'selected' : null
|
|
235
|
+
}),
|
|
229
236
|
ref: ref,
|
|
230
237
|
label: namesFromVisibleLabel ? /*#__PURE__*/_jsx("span", {
|
|
231
238
|
id: labelID,
|
|
@@ -249,7 +256,7 @@ export function CheckboxListItem({
|
|
|
249
256
|
// Item's row layer drops the strength's release, and the box paints
|
|
250
257
|
// at that strength. So the row brings the release back, and the box
|
|
251
258
|
// fades with the row.
|
|
252
|
-
rowOwnsPress && interactionOverlayStyles.pressedAlpha,
|
|
259
|
+
rowOwnsPress && interactionOverlayStyles.pressedAlpha, isCheckedRow && styles.selected, xstyle],
|
|
253
260
|
className: className,
|
|
254
261
|
style: style,
|
|
255
262
|
startContent:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComplexSelector.d.ts","sourceRoot":"","sources":["../../src/ComplexSelector/ComplexSelector.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAQZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACzB,MAAM,qBAAqB,CAAC;AAO7B,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAG5D,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AAoBtE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,+BAA+B,CAAC;
|
|
1
|
+
{"version":3,"file":"ComplexSelector.d.ts","sourceRoot":"","sources":["../../src/ComplexSelector/ComplexSelector.tsx"],"names":[],"mappings":"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"}
|
|
@@ -289,15 +289,14 @@ export function ComplexSelector({
|
|
|
289
289
|
const contentId = useId();
|
|
290
290
|
const descriptionId = useId();
|
|
291
291
|
const statusMessageId = useId();
|
|
292
|
-
// With `tooltip` placement Field renders no message box
|
|
293
|
-
//
|
|
294
|
-
// Only that placement renders an on-field status affordance here.
|
|
292
|
+
// With `tooltip` placement, Field renders no message box. The info-tip
|
|
293
|
+
// holds the message and describes the trigger.
|
|
295
294
|
const isTooltipStatus = effectiveStatusVariant === 'tooltip';
|
|
296
295
|
const {
|
|
297
296
|
statusIcon: statusTip,
|
|
298
297
|
describedBy: statusTipDescribedBy
|
|
299
298
|
} = useInputStatusIcon({
|
|
300
|
-
status
|
|
299
|
+
status,
|
|
301
300
|
statusVariant: effectiveStatusVariant,
|
|
302
301
|
size: 'sm'
|
|
303
302
|
});
|
|
@@ -549,21 +548,31 @@ export function ComplexSelector({
|
|
|
549
548
|
},
|
|
550
549
|
children: triggerContent
|
|
551
550
|
})
|
|
552
|
-
}),
|
|
551
|
+
}), isBusy && /*#__PURE__*/_jsx(Spinner, {
|
|
552
|
+
size: "sm",
|
|
553
|
+
"aria-hidden": "true"
|
|
554
|
+
}), isRenderable(statusTip) && (isTooltipStatus ?
|
|
553
555
|
/*#__PURE__*/
|
|
554
|
-
// The info-tip is its own control: a press on it, or on its
|
|
555
|
-
// bubble (portaled, so outside this span in the DOM but
|
|
556
|
-
// React), shows the message without opening the
|
|
556
|
+
// The info-tip is its own control: a press on it, or on its
|
|
557
|
+
// message bubble (portaled, so outside this span in the DOM but
|
|
558
|
+
// inside it in React), shows the message without opening the
|
|
559
|
+
// popup.
|
|
557
560
|
_jsx("span", {
|
|
558
561
|
onClick: stopPropagation,
|
|
559
562
|
...{
|
|
560
563
|
className: "x3nfvp2 x6s0dn4 x2lah0s"
|
|
561
564
|
},
|
|
562
565
|
children: statusTip
|
|
563
|
-
})
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
566
|
+
}) :
|
|
567
|
+
/*#__PURE__*/
|
|
568
|
+
// The plain icon is part of the field: a press on it opens the
|
|
569
|
+
// popup, as a press on the trigger does.
|
|
570
|
+
_jsx("span", {
|
|
571
|
+
...{
|
|
572
|
+
className: "x3nfvp2 x6s0dn4 x2lah0s"
|
|
573
|
+
},
|
|
574
|
+
children: statusTip
|
|
575
|
+
})), !isRenderable(statusTip) && /*#__PURE__*/_jsx(Icon, {
|
|
567
576
|
icon: "chevronDown",
|
|
568
577
|
size: "sm",
|
|
569
578
|
color: "secondary"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -641,6 +641,34 @@ function PointerDateTimeField({
|
|
|
641
641
|
// it, as BaseTypeahead does.
|
|
642
642
|
const timePointerActiveRef = useRef(false);
|
|
643
643
|
|
|
644
|
+
// These one-shot `document` listeners belong to this field. Unmount removes
|
|
645
|
+
// them. Otherwise the next click runs work for a field that is gone.
|
|
646
|
+
const timeClickWatchersRef = useRef(null);
|
|
647
|
+
const addTimeClickWatcher = useCallback(handler => {
|
|
648
|
+
const watchers = timeClickWatchersRef.current ?? new Set();
|
|
649
|
+
timeClickWatchersRef.current = watchers;
|
|
650
|
+
const watcher = () => {
|
|
651
|
+
// The `once` option removes the listener from the document. Delete it from
|
|
652
|
+
// the set too, or the set keeps every past press.
|
|
653
|
+
watchers.delete(watcher);
|
|
654
|
+
handler();
|
|
655
|
+
};
|
|
656
|
+
watchers.add(watcher);
|
|
657
|
+
document.addEventListener('click', watcher, {
|
|
658
|
+
once: true
|
|
659
|
+
});
|
|
660
|
+
}, []);
|
|
661
|
+
const clearTimeClickWatchers = useCallback(() => {
|
|
662
|
+
for (const watcher of timeClickWatchersRef.current ?? []) {
|
|
663
|
+
document.removeEventListener('click', watcher);
|
|
664
|
+
}
|
|
665
|
+
timeClickWatchersRef.current?.clear();
|
|
666
|
+
}, []);
|
|
667
|
+
|
|
668
|
+
// The Effect owns this field's `document` click watchers: its setup acquires
|
|
669
|
+
// nothing, its cleanup releases whatever a press left pending.
|
|
670
|
+
useEffect(() => clearTimeClickWatchers, [clearTimeClickWatchers]);
|
|
671
|
+
|
|
644
672
|
// Whether the highlight is still the one typing derived, or the user has
|
|
645
673
|
// since moved it themselves. Enter honours typed text only in the former
|
|
646
674
|
// case — otherwise the field would commit something other than the option
|
|
@@ -648,12 +676,10 @@ function PointerDateTimeField({
|
|
|
648
676
|
const timeHighlightFollowsTypingRef = useRef(true);
|
|
649
677
|
const markTimePointerActive = useCallback(() => {
|
|
650
678
|
timePointerActiveRef.current = true;
|
|
651
|
-
|
|
679
|
+
addTimeClickWatcher(() => {
|
|
652
680
|
timePointerActiveRef.current = false;
|
|
653
|
-
}, {
|
|
654
|
-
once: true
|
|
655
681
|
});
|
|
656
|
-
}, []);
|
|
682
|
+
}, [addTimeClickWatcher]);
|
|
657
683
|
|
|
658
684
|
// The time list is a manual popover: the browser's light dismiss counts a
|
|
659
685
|
// press in the time input as outside (a text input cannot be an invoker), so
|
|
@@ -784,17 +810,15 @@ function PointerDateTimeField({
|
|
|
784
810
|
// input must hold DOM focus or aria-activedescendant announces nothing.
|
|
785
811
|
timeInputRef.current?.focus();
|
|
786
812
|
if (timePointerActiveRef.current) {
|
|
787
|
-
|
|
813
|
+
addTimeClickWatcher(() => requestAnimationFrame(() => timePopover.show({
|
|
788
814
|
skipAutoFocus: true
|
|
789
|
-
}))
|
|
790
|
-
once: true
|
|
791
|
-
});
|
|
815
|
+
})));
|
|
792
816
|
} else {
|
|
793
817
|
timePopover.show({
|
|
794
818
|
skipAutoFocus: true
|
|
795
819
|
});
|
|
796
820
|
}
|
|
797
|
-
}, [hasTimeOptions, isEffectivelyDisabled, timePopover, timeOptions.length, closestOptionIndex, selectedOptionTime]);
|
|
821
|
+
}, [addTimeClickWatcher, hasTimeOptions, isEffectivelyDisabled, timePopover, timeOptions.length, closestOptionIndex, selectedOptionTime]);
|
|
798
822
|
|
|
799
823
|
/**
|
|
800
824
|
* The single commit path for a time chosen from the list. Deliberately the
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/HoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAIL,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"HoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/HoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAIL,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAMf,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC3B,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AACtE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,YAAY,EACV,qBAAqB,EACrB,qBAAqB,GACtB,MAAM,gBAAgB,CAAC;AA6ExB,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;;;;;;OASG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEtC;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAoCD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,OAAO,EACP,SAAmB,EACnB,SAAoB,EACpB,KAAW,EACX,SAAe,EACf,YAAqB,EACrB,YAAqB,EACrB,SAAgB,EAChB,KAAK,EACL,YAAY,EACZ,kBAA2B,EAC3B,MAAM,EACN,aAAa,EACb,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,cAAc,GAAG,YAAY,CA6M/B;yBA/Ne,SAAS"}
|
|
@@ -20,6 +20,7 @@ import { isRenderable } from "../utils/isRenderable.js";
|
|
|
20
20
|
import { observeMutations } from "../utils/sharedMutationObserver.js";
|
|
21
21
|
import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
|
|
22
22
|
import * as stylex from '@stylexjs/stylex';
|
|
23
|
+
import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
|
|
23
24
|
import { useHoverCard } from "./useHoverCard.js";
|
|
24
25
|
import "../theme/tokens.stylex.js";
|
|
25
26
|
import { colorVars, spacingVars } from "../theme/tokens.stylex.js";
|
|
@@ -63,6 +64,19 @@ function supportsAriaExpanded(el) {
|
|
|
63
64
|
return false;
|
|
64
65
|
}
|
|
65
66
|
}
|
|
67
|
+
const styles = {
|
|
68
|
+
wrapperInline: {
|
|
69
|
+
k1xSpc: "xt0psk2",
|
|
70
|
+
$$css: true
|
|
71
|
+
},
|
|
72
|
+
hoverIndication: {
|
|
73
|
+
kMnn75: "xujl8zx",
|
|
74
|
+
kmVMDM: "xev0dqp",
|
|
75
|
+
k1TLXF: "xycaml9",
|
|
76
|
+
kcSHmL: "x11b3rvo",
|
|
77
|
+
$$css: true
|
|
78
|
+
}
|
|
79
|
+
};
|
|
66
80
|
/**
|
|
67
81
|
* Check if children are text-only (no React elements)
|
|
68
82
|
*/
|
|
@@ -292,15 +306,11 @@ export function HoverCard({
|
|
|
292
306
|
// No aria-expanded: this wrapper is a role-less <span>, and
|
|
293
307
|
// aria-expanded is invalid on it (see EXPANDABLE_ROLES above).
|
|
294
308
|
,
|
|
295
|
-
"aria-describedby": label ? undefined : hoverCard.describedBy
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
1: {
|
|
301
|
-
className: "xt0psk2 xujl8zx xev0dqp xycaml9 x11b3rvo"
|
|
302
|
-
}
|
|
303
|
-
}[!!showHoverIndication << 0],
|
|
309
|
+
"aria-describedby": label ? undefined : hoverCard.describedBy
|
|
310
|
+
// The span is a tab stop Astryx adds: it draws the shared ring,
|
|
311
|
+
// which a theme restyles through the focus-outline tokens.
|
|
312
|
+
,
|
|
313
|
+
...focusOutlineProps.focusVisible(styles.wrapperInline, showHoverIndication && styles.hoverIndication),
|
|
304
314
|
children: children
|
|
305
315
|
}), renderedHoverCard]
|
|
306
316
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"AA+CA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,SAAS,CAAC;AAalD;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,oBAAoB,CAAC;AAE3D,uCAAuC;AACvC,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,WAAW,CAAC,EACtB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B,+DAA+D;IAC/D,IAAI,EAAE,MAAM,CAAC;IACb,oCAAoC;IACpC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAGtD;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAGlB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6EAA6E;IAC7E,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAG9C;;;;;;;;;;;;OAYG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAGtB,wDAAwD;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC;IAGrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,qCAAqC;IACrC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAwHD;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAC/B,WAAW,EAAE,MAAM,EACnB,UAAU,EAAE,MAAM,EAClB,YAAY,EAAE,MAAM,GACnB,CAAC,MAAM,GAAG,KAAK,CAAC,EAAE,CA6CpB;AAMD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,UAAU,EAAE,cAAc,EAC1B,OAAO,EACP,QAAQ,EAAE,YAAiB,EAC3B,eAAe,EACf,gBAAgB,EAChB,OAAiB,EACjB,SAAS,EACT,YAAY,EAAE,gBAAgB,EAC9B,IAAI,EAAE,QAAY,EAClB,YAAgB,EAChB,IAAW,EACX,UAAkB,EAClB,KAAK,EAAE,cAAc,EACrB,aAAa,EAAE,MAAM,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,sCAsgBjB;yBA9hBe,UAAU"}
|
|
@@ -33,6 +33,9 @@ import { Selector } from "../Selector/index.js";
|
|
|
33
33
|
import { Text } from "../Text/index.js";
|
|
34
34
|
import { useAnnounce } from "../hooks/useAnnounce.js";
|
|
35
35
|
import { useListFocus } from "../hooks/useListFocus.js";
|
|
36
|
+
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
37
|
+
import { focusForLastInput } from "../utils/focusReturn.js";
|
|
38
|
+
import { useInteractionModalityTracking } from "../utils/interactionModality.js";
|
|
36
39
|
import { mergeProps, rtlStyles } from "../utils/index.js";
|
|
37
40
|
import { themeProps } from "../utils/themeProps.js";
|
|
38
41
|
import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
|
|
@@ -270,6 +273,11 @@ export function Pagination({
|
|
|
270
273
|
wrap: true,
|
|
271
274
|
orientation: 'horizontal'
|
|
272
275
|
});
|
|
276
|
+
// The click's focus takes the ring of the dots' own document's last input.
|
|
277
|
+
const {
|
|
278
|
+
ref: modalityRef
|
|
279
|
+
} = useInteractionModalityTracking();
|
|
280
|
+
const dotsRef = useMergedRefs(dotsListRef, modalityRef);
|
|
273
281
|
const computedTotalPages = totalPagesProp ?? (totalItems != null ? Math.ceil(totalItems / pageSize) : undefined);
|
|
274
282
|
const hasPrevious = optimisticPage > 1;
|
|
275
283
|
const hasNext = computedTotalPages != null ? optimisticPage < computedTotalPages : hasMore ?? false;
|
|
@@ -472,11 +480,14 @@ export function Pagination({
|
|
|
472
480
|
return null;
|
|
473
481
|
}
|
|
474
482
|
return /*#__PURE__*/_jsx("div", {
|
|
475
|
-
ref:
|
|
483
|
+
ref: dotsRef,
|
|
476
484
|
...{
|
|
477
485
|
className: "x78zum5 x6s0dn4 xzye2dw"
|
|
478
486
|
},
|
|
479
|
-
|
|
487
|
+
// The dots already behave as an APG radio group (one Tab stop,
|
|
488
|
+
// arrows, Home/End, selection follows focus), so they expose its
|
|
489
|
+
// roles: a reader announces "Page 3, 3 of 7".
|
|
490
|
+
role: "radiogroup",
|
|
480
491
|
"aria-label": pageIndicatorsLabel,
|
|
481
492
|
onKeyDown: handleDotsKeyDown,
|
|
482
493
|
onFocus: handleDotsFocus,
|
|
@@ -486,20 +497,27 @@ export function Pagination({
|
|
|
486
497
|
const isActive = i + 1 === optimisticPage;
|
|
487
498
|
return /*#__PURE__*/_jsx("button", {
|
|
488
499
|
type: "button",
|
|
500
|
+
role: "radio",
|
|
489
501
|
"data-page": i + 1,
|
|
490
|
-
"aria-label": t('@astryx.pagination.
|
|
491
|
-
|
|
492
|
-
})
|
|
493
|
-
|
|
502
|
+
"aria-label": t('@astryx.pagination.pageAnnounce', {
|
|
503
|
+
current: i + 1
|
|
504
|
+
})
|
|
505
|
+
// aria-checked carries the current page; aria-current beside
|
|
506
|
+
// it would announce the same state twice.
|
|
507
|
+
,
|
|
508
|
+
"aria-checked": isActive
|
|
494
509
|
// The active dot is the single roving tab stop; useListFocus
|
|
495
510
|
// maintains it as focus and the active page move.
|
|
496
511
|
,
|
|
497
512
|
tabIndex: isActive ? 0 : -1
|
|
498
|
-
//
|
|
499
|
-
//
|
|
500
|
-
|
|
513
|
+
// Focus selects the page (handleDotsFocus). The click focuses
|
|
514
|
+
// the dot, with the ring the last input calls for.
|
|
515
|
+
,
|
|
516
|
+
onClick: e => focusForLastInput(e.currentTarget)
|
|
517
|
+
// A press must not choose a page before release. Sliding off
|
|
518
|
+
// takes it back. So the press does not focus the dot.
|
|
501
519
|
,
|
|
502
|
-
|
|
520
|
+
onMouseDown: e => e.preventDefault()
|
|
503
521
|
// Disabled dots stay focusable (spec:AST-085 FR1); the page
|
|
504
522
|
// only follows focus while enabled (handleDotsFocus).
|
|
505
523
|
,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,EAGZ,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,EAGZ,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACzB,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AAGtE,YAAY,EAAC,mBAAmB,EAAE,mBAAmB,EAAC,MAAM,cAAc,CAAC;AAiB3E,MAAM,WAAW,YAAY;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAEhD;;;OAGG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;;;;OAOG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEtC;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAiBD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAmB,EACnB,SAAoB,EACpB,KAAW,EACX,SAAa,EACb,YAAqB,EACrB,YAAqB,EACrB,SAAgB,EAChB,YAAY,EACZ,kBAA2B,EAC3B,MAAM,EACN,aAAa,GACd,EAAE,YAAY,GAAG,YAAY,CA+J7B;yBA9Ke,OAAO"}
|
package/dist/Tooltip/Tooltip.js
CHANGED
|
@@ -16,10 +16,24 @@
|
|
|
16
16
|
import React, { useCallback, useRef } from 'react';
|
|
17
17
|
import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
|
|
18
18
|
import * as stylex from '@stylexjs/stylex';
|
|
19
|
+
import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
|
|
19
20
|
import { useTooltip } from "./useTooltip.js";
|
|
20
21
|
import "../theme/tokens.stylex.js";
|
|
21
22
|
import { colorVars } from "../theme/tokens.stylex.js";
|
|
22
23
|
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
24
|
+
const styles = {
|
|
25
|
+
wrapperInline: {
|
|
26
|
+
k1xSpc: "xt0psk2",
|
|
27
|
+
$$css: true
|
|
28
|
+
},
|
|
29
|
+
hoverIndication: {
|
|
30
|
+
kMnn75: "xujl8zx",
|
|
31
|
+
kmVMDM: "xev0dqp",
|
|
32
|
+
k1TLXF: "xycaml9",
|
|
33
|
+
kcSHmL: "xrys4gj",
|
|
34
|
+
$$css: true
|
|
35
|
+
}
|
|
36
|
+
};
|
|
23
37
|
/**
|
|
24
38
|
* Check if children are text-only (no React elements)
|
|
25
39
|
*/
|
|
@@ -187,15 +201,11 @@ export function Tooltip({
|
|
|
187
201
|
children: [/*#__PURE__*/_jsx("span", {
|
|
188
202
|
ref: tooltip.ref,
|
|
189
203
|
tabIndex: 0,
|
|
190
|
-
"aria-describedby": tooltip.describedBy
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
1: {
|
|
196
|
-
className: "xt0psk2 xujl8zx xev0dqp xycaml9 xrys4gj"
|
|
197
|
-
}
|
|
198
|
-
}[!!showHoverIndication << 0],
|
|
204
|
+
"aria-describedby": tooltip.describedBy
|
|
205
|
+
// The span is a tab stop Astryx adds: it draws the shared ring,
|
|
206
|
+
// which a theme restyles through the focus-outline tokens.
|
|
207
|
+
,
|
|
208
|
+
...focusOutlineProps.focusVisible(styles.wrapperInline, showHoverIndication && styles.hoverIndication),
|
|
199
209
|
children: children
|
|
200
210
|
}), tooltip.renderTooltip(content)]
|
|
201
211
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"en.generated.d.ts","sourceRoot":"","sources":["../../../src/i18n/generated-locales/en.generated.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,QAAA,MAAM,cAAc,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"en.generated.d.ts","sourceRoot":"","sources":["../../../src/i18n/generated-locales/en.generated.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,QAAA,MAAM,cAAc,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA2qBpD,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -618,6 +618,7 @@ const runtimeCatalog = {
|
|
|
618
618
|
'@astryx.comments.loading': 'Loading comments',
|
|
619
619
|
'@astryx.comments.olderFailed': "Earlier comments couldn't load",
|
|
620
620
|
'@astryx.comments.postFailed': "Your comment couldn't be posted.",
|
|
621
|
-
'@astryx.infoTip.label': 'More information'
|
|
621
|
+
'@astryx.infoTip.label': 'More information',
|
|
622
|
+
'@astryx.navigationStack.back': 'Back'
|
|
622
623
|
};
|
|
623
624
|
export default runtimeCatalog;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pseudo.generated.d.ts","sourceRoot":"","sources":["../../../src/i18n/generated-locales/pseudo.generated.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,QAAA,MAAM,cAAc,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"pseudo.generated.d.ts","sourceRoot":"","sources":["../../../src/i18n/generated-locales/pseudo.generated.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,QAAA,MAAM,cAAc,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAurBpD,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -618,6 +618,7 @@ const runtimeCatalog = {
|
|
|
618
618
|
'@astryx.comments.loading': '⟦Łóàðíñĝ çóɱɱéñţš⟧',
|
|
619
619
|
'@astryx.comments.olderFailed': "⟦Éàřłíéř çóɱɱéñţš çóúłðñ'ţ łóàð⟧",
|
|
620
620
|
'@astryx.comments.postFailed': "⟦Ýóúř çóɱɱéñţ çóúłðñ'ţ ƀé þóšţéð.⟧",
|
|
621
|
-
'@astryx.infoTip.label': '⟦Ṁóřé íñƒóřɱàţíóñ⟧'
|
|
621
|
+
'@astryx.infoTip.label': '⟦Ṁóřé íñƒóřɱàţíóñ⟧',
|
|
622
|
+
'@astryx.navigationStack.back': '⟦Ɓàçķ⟧'
|
|
622
623
|
};
|
|
623
624
|
export default runtimeCatalog;
|
package/dist/internal/touch.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file touch.ts
|
|
3
|
-
* @input The gesture core: the arena, the recognizers
|
|
4
|
-
* the pan, the motion engine and math, and the touch-presentation
|
|
5
|
-
* direction helpers that Lab components read
|
|
3
|
+
* @input The gesture core: the arena, the recognizers and their geometry.
|
|
4
|
+
* Also the pan, the motion engine and math, and the touch-presentation,
|
|
5
|
+
* direction and focus helpers that Lab components read
|
|
6
6
|
* @output `@astryxdesign/core/internal/touch`: the gesture core's primitives
|
|
7
|
-
* and the motion, touch-presentation and
|
|
7
|
+
* and the motion, touch-presentation, direction and focus modules for Lab
|
|
8
8
|
* components, re-exported by name
|
|
9
9
|
* @position An internal entry reserved for Astryx's own packages:
|
|
10
10
|
* undocumented, outside the public API and its compatibility promise
|
|
@@ -41,4 +41,12 @@ export { isRtlElement } from '../hooks/isRtlElement.js';
|
|
|
41
41
|
export { UIKIT_GESTURES } from '../motion/uikit/gestures.js';
|
|
42
42
|
export { useTouchPresentation } from '../utils/touchPresentation.js';
|
|
43
43
|
export { TOUCH_QUERY } from '../utils/touchQueries.js';
|
|
44
|
+
export { ScreenEdgePanGestureRecognizer } from '../gestures/ScreenEdgePanGestureRecognizer.js';
|
|
45
|
+
export { resolveMotion } from '../motion/resolveMotion.js';
|
|
46
|
+
export { solveSpring, toSpring } from '../motion/spring.js';
|
|
47
|
+
export type { SpringDescription } from '../motion/spring.js';
|
|
48
|
+
export { navigation } from '../motion/uikit/navigation.js';
|
|
49
|
+
export { NAVIGATION_BAR_ELEMENTS_SPRING, NAVIGATION_INTERACTIVE_POP_FINISH_SPRING, NAVIGATION_POP_SPRING, NAVIGATION_PUSH_SPRING, } from '../motion/uikit/springs.js';
|
|
50
|
+
export { focusForLastInput, isFocusLost } from '../utils/focusReturn.js';
|
|
51
|
+
export { useInteractionModalityTracking } from '../utils/interactionModality.js';
|
|
44
52
|
//# sourceMappingURL=touch.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"touch.d.ts","sourceRoot":"","sources":["../../src/internal/touch.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAAC,YAAY,EAAE,YAAY,EAAC,MAAM,0BAA0B,CAAC;AACpE,OAAO,EACL,gBAAgB,EAChB,iBAAiB,EACjB,QAAQ,EACR,UAAU,EACV,mBAAmB,EACnB,YAAY,GACb,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACL,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,WAAW,GACZ,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAC,0BAA0B,EAAC,MAAM,wCAAwC,CAAC;AAClF,OAAO,EAAC,oBAAoB,EAAC,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAC,mBAAmB,EAAC,MAAM,mBAAmB,CAAC;AAOtD,OAAO,EAAC,oBAAoB,EAAC,MAAM,kCAAkC,CAAC;AACtE,YAAY,EAAC,2BAA2B,EAAC,MAAM,kCAAkC,CAAC;AAClF,YAAY,EACV,mBAAmB,EACnB,YAAY,EACZ,WAAW,GACZ,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAC,oBAAoB,EAAC,MAAM,kCAAkC,CAAC;AAGtE,OAAO,EAAC,kBAAkB,EAAC,MAAM,oBAAoB,CAAC;AACtD,YAAY,EACV,QAAQ,IAAI,YAAY,EACxB,eAAe,IAAI,mBAAmB,EACtC,WAAW,GACZ,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAC,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAC,WAAW,EAAC,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAC,cAAc,EAAE,oBAAoB,EAAC,MAAM,iBAAiB,CAAC;AACrE,OAAO,EACL,UAAU,EACV,iBAAiB,EACjB,eAAe,GAChB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAC,MAAM,EAAC,MAAM,wBAAwB,CAAC;AAI9C,OAAO,EAAC,YAAY,EAAC,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAC,cAAc,EAAC,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAC,oBAAoB,EAAC,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC"}
|
|
1
|
+
{"version":3,"file":"touch.d.ts","sourceRoot":"","sources":["../../src/internal/touch.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAAC,YAAY,EAAE,YAAY,EAAC,MAAM,0BAA0B,CAAC;AACpE,OAAO,EACL,gBAAgB,EAChB,iBAAiB,EACjB,QAAQ,EACR,UAAU,EACV,mBAAmB,EACnB,YAAY,GACb,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACL,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,WAAW,GACZ,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAC,0BAA0B,EAAC,MAAM,wCAAwC,CAAC;AAClF,OAAO,EAAC,oBAAoB,EAAC,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAC,mBAAmB,EAAC,MAAM,mBAAmB,CAAC;AAOtD,OAAO,EAAC,oBAAoB,EAAC,MAAM,kCAAkC,CAAC;AACtE,YAAY,EAAC,2BAA2B,EAAC,MAAM,kCAAkC,CAAC;AAClF,YAAY,EACV,mBAAmB,EACnB,YAAY,EACZ,WAAW,GACZ,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAC,oBAAoB,EAAC,MAAM,kCAAkC,CAAC;AAGtE,OAAO,EAAC,kBAAkB,EAAC,MAAM,oBAAoB,CAAC;AACtD,YAAY,EACV,QAAQ,IAAI,YAAY,EACxB,eAAe,IAAI,mBAAmB,EACtC,WAAW,GACZ,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAC,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAC,WAAW,EAAC,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAC,cAAc,EAAE,oBAAoB,EAAC,MAAM,iBAAiB,CAAC;AACrE,OAAO,EACL,UAAU,EACV,iBAAiB,EACjB,eAAe,GAChB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAC,MAAM,EAAC,MAAM,wBAAwB,CAAC;AAI9C,OAAO,EAAC,YAAY,EAAC,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAC,cAAc,EAAC,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAC,oBAAoB,EAAC,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAGlD,OAAO,EAAC,8BAA8B,EAAC,MAAM,4CAA4C,CAAC;AAC1F,OAAO,EAAC,aAAa,EAAC,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAC,WAAW,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAC,iBAAiB,EAAC,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAC,UAAU,EAAC,MAAM,4BAA4B,CAAC;AACtD,OAAO,EACL,8BAA8B,EAC9B,wCAAwC,EACxC,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAC,iBAAiB,EAAE,WAAW,EAAC,MAAM,sBAAsB,CAAC;AACpE,OAAO,EAAC,8BAA8B,EAAC,MAAM,8BAA8B,CAAC"}
|
package/dist/internal/touch.js
CHANGED
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* @file touch.ts
|
|
5
|
-
* @input The gesture core: the arena, the recognizers
|
|
6
|
-
* the pan, the motion engine and math, and the touch-presentation
|
|
7
|
-
* direction helpers that Lab components read
|
|
5
|
+
* @input The gesture core: the arena, the recognizers and their geometry.
|
|
6
|
+
* Also the pan, the motion engine and math, and the touch-presentation,
|
|
7
|
+
* direction and focus helpers that Lab components read
|
|
8
8
|
* @output `@astryxdesign/core/internal/touch`: the gesture core's primitives
|
|
9
|
-
* and the motion, touch-presentation and
|
|
9
|
+
* and the motion, touch-presentation, direction and focus modules for Lab
|
|
10
10
|
* components, re-exported by name
|
|
11
11
|
* @position An internal entry reserved for Astryx's own packages:
|
|
12
12
|
* undocumented, outside the public API and its compatibility promise
|
|
@@ -51,4 +51,13 @@ export { scroll } from "../motion/uikit/scroll.js";
|
|
|
51
51
|
export { isRtlElement } from "../hooks/isRtlElement.js";
|
|
52
52
|
export { UIKIT_GESTURES } from "../motion/uikit/gestures.js";
|
|
53
53
|
export { useTouchPresentation } from "../utils/touchPresentation.js";
|
|
54
|
-
export { TOUCH_QUERY } from "../utils/touchQueries.js";
|
|
54
|
+
export { TOUCH_QUERY } from "../utils/touchQueries.js";
|
|
55
|
+
|
|
56
|
+
// Lab's NavigationStack reads these.
|
|
57
|
+
export { ScreenEdgePanGestureRecognizer } from "../gestures/ScreenEdgePanGestureRecognizer.js";
|
|
58
|
+
export { resolveMotion } from "../motion/resolveMotion.js";
|
|
59
|
+
export { solveSpring, toSpring } from "../motion/spring.js";
|
|
60
|
+
export { navigation } from "../motion/uikit/navigation.js";
|
|
61
|
+
export { NAVIGATION_BAR_ELEMENTS_SPRING, NAVIGATION_INTERACTIVE_POP_FINISH_SPRING, NAVIGATION_POP_SPRING, NAVIGATION_PUSH_SPRING } from "../motion/uikit/springs.js";
|
|
62
|
+
export { focusForLastInput, isFocusLost } from "../utils/focusReturn.js";
|
|
63
|
+
export { useInteractionModalityTracking } from "../utils/interactionModality.js";
|
package/locales/en.json
CHANGED
|
@@ -2446,5 +2446,9 @@
|
|
|
2446
2446
|
"@astryx.infoTip.label": {
|
|
2447
2447
|
"defaultMessage": "More information",
|
|
2448
2448
|
"description": "Default accessible name of an InfoTip, the small info-icon button whose press reveals help about the label, value, or metric beside it."
|
|
2449
|
+
},
|
|
2450
|
+
"@astryx.navigationStack.back": {
|
|
2451
|
+
"defaultMessage": "Back",
|
|
2452
|
+
"description": "Label of the back button in a lab NavigationStack's bar when the screen it returns to has no title of its own. Returns to the previous screen; keep it short, as on an iOS navigation bar."
|
|
2449
2453
|
}
|
|
2450
2454
|
}
|
package/locales/pseudo.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@astryxdesign/core",
|
|
3
|
-
"version": "0.7.9-canary.
|
|
3
|
+
"version": "0.7.9-canary.de0bbc2",
|
|
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",
|
|
@@ -880,9 +880,9 @@
|
|
|
880
880
|
"react-dom": ">=19.0.0"
|
|
881
881
|
},
|
|
882
882
|
"devDependencies": {
|
|
883
|
-
"@astryxdesign/a11y-spec": "0.7.9-canary.
|
|
884
|
-
"@astryxdesign/cli": "0.7.9-canary.
|
|
885
|
-
"@astryxdesign/interaction-harness": "0.7.9-canary.
|
|
883
|
+
"@astryxdesign/a11y-spec": "0.7.9-canary.de0bbc2",
|
|
884
|
+
"@astryxdesign/cli": "0.7.9-canary.de0bbc2",
|
|
885
|
+
"@astryxdesign/interaction-harness": "0.7.9-canary.de0bbc2",
|
|
886
886
|
"@babel/cli": "^7.29.7",
|
|
887
887
|
"@babel/core": "^7.29.7",
|
|
888
888
|
"@babel/preset-react": "^7.29.7",
|
|
@@ -26,7 +26,8 @@
|
|
|
26
26
|
|
|
27
27
|
import {type ReactNode, useEffect, useMemo, useRef, useTransition} from 'react';
|
|
28
28
|
import * as stylex from '@stylexjs/stylex';
|
|
29
|
-
import {spacingVars} from '../theme/tokens.stylex';
|
|
29
|
+
import {focusVars, spacingVars} from '../theme/tokens.stylex';
|
|
30
|
+
import {focusOutlineStyles} from '../utils/focusOutline.stylex';
|
|
30
31
|
import {
|
|
31
32
|
ChatListContext,
|
|
32
33
|
type ChatDensity,
|
|
@@ -127,6 +128,14 @@ const styles = stylex.create({
|
|
|
127
128
|
flex: 1,
|
|
128
129
|
minHeight: 0,
|
|
129
130
|
},
|
|
131
|
+
// The log fills the area that scrolls it, which clips at its edges, so its
|
|
132
|
+
// keyboard ring sits inside its own box instead of around it.
|
|
133
|
+
focusRingInset: {
|
|
134
|
+
outlineOffset: {
|
|
135
|
+
default: null,
|
|
136
|
+
':focus-visible': `calc(-1 * ${focusVars['--focus-outline-width']})`,
|
|
137
|
+
},
|
|
138
|
+
},
|
|
130
139
|
inner: {
|
|
131
140
|
display: 'flex',
|
|
132
141
|
flexDirection: 'column',
|
|
@@ -310,7 +319,14 @@ export function ChatMessageList({
|
|
|
310
319
|
data-testid={testId}
|
|
311
320
|
{...mergeProps(
|
|
312
321
|
themeProps('chat-message-list', {density}),
|
|
313
|
-
|
|
322
|
+
// A tab stop: the shared ring, which a theme restyles through the
|
|
323
|
+
// focus-outline tokens.
|
|
324
|
+
stylex.props(
|
|
325
|
+
styles.root,
|
|
326
|
+
focusOutlineStyles.focusVisible,
|
|
327
|
+
styles.focusRingInset,
|
|
328
|
+
xstyle,
|
|
329
|
+
),
|
|
314
330
|
className,
|
|
315
331
|
style,
|
|
316
332
|
)}>
|
|
@@ -36,6 +36,7 @@ import {CheckboxListContext} from './CheckboxListContext';
|
|
|
36
36
|
import {ItemDescriptionContext} from '../Item/ItemDescriptionContext';
|
|
37
37
|
import {joinAriaIDs} from '../utils/inputAria';
|
|
38
38
|
import {useMergedRefs} from '../hooks/useMergedRefs';
|
|
39
|
+
import {themeDataAttributes} from '../utils/themeProps';
|
|
39
40
|
import type {ItemAlign} from '../Item';
|
|
40
41
|
import {
|
|
41
42
|
registerEnglishFallback,
|
|
@@ -352,9 +353,14 @@ export function CheckboxListItem({
|
|
|
352
353
|
}
|
|
353
354
|
};
|
|
354
355
|
|
|
356
|
+
// The state follows the fill, so a theme can restyle the text on it.
|
|
357
|
+
const isCheckedRow =
|
|
358
|
+
resolvedChecked === true && !effectiveDisabled && !effectiveReadOnly;
|
|
359
|
+
|
|
355
360
|
return (
|
|
356
361
|
<ListItem
|
|
357
362
|
{...restProps}
|
|
363
|
+
{...themeDataAttributes({selected: isCheckedRow ? 'selected' : null})}
|
|
358
364
|
ref={ref}
|
|
359
365
|
label={namesFromVisibleLabel ? <span id={labelID}>{label}</span> : label}
|
|
360
366
|
description={description}
|
|
@@ -376,10 +382,7 @@ export function CheckboxListItem({
|
|
|
376
382
|
// at that strength. So the row brings the release back, and the box
|
|
377
383
|
// fades with the row.
|
|
378
384
|
rowOwnsPress && interactionOverlayStyles.pressedAlpha,
|
|
379
|
-
|
|
380
|
-
!effectiveDisabled &&
|
|
381
|
-
!effectiveReadOnly &&
|
|
382
|
-
styles.selected,
|
|
385
|
+
isCheckedRow && styles.selected,
|
|
383
386
|
xstyle,
|
|
384
387
|
] as StyleXStyles
|
|
385
388
|
}
|
|
@@ -37,9 +37,9 @@ const anatomy = [
|
|
|
37
37
|
},
|
|
38
38
|
{
|
|
39
39
|
name: 'Indicator icon',
|
|
40
|
-
required:
|
|
40
|
+
required: false,
|
|
41
41
|
description:
|
|
42
|
-
'Trailing chevron
|
|
42
|
+
'Trailing chevron shown when status presentation does not replace it; rotates to reflect whether the popup is open.',
|
|
43
43
|
},
|
|
44
44
|
{
|
|
45
45
|
name: 'Popup',
|
|
@@ -79,8 +79,7 @@ registerEnglishFallback(english);
|
|
|
79
79
|
const CONTENT_BLOCK_CAP = '480px';
|
|
80
80
|
|
|
81
81
|
const styles = stylex.create({
|
|
82
|
-
// The
|
|
83
|
-
// its size when the trigger text is long.
|
|
82
|
+
// The status glyph or info-tip keeps its size when the trigger text is long.
|
|
84
83
|
statusTip: {
|
|
85
84
|
display: 'inline-flex',
|
|
86
85
|
alignItems: 'center',
|
|
@@ -598,13 +597,12 @@ export function ComplexSelector<Value>({
|
|
|
598
597
|
const contentId = useId();
|
|
599
598
|
const descriptionId = useId();
|
|
600
599
|
const statusMessageId = useId();
|
|
601
|
-
// With `tooltip` placement Field renders no message box
|
|
602
|
-
//
|
|
603
|
-
// Only that placement renders an on-field status affordance here.
|
|
600
|
+
// With `tooltip` placement, Field renders no message box. The info-tip
|
|
601
|
+
// holds the message and describes the trigger.
|
|
604
602
|
const isTooltipStatus = effectiveStatusVariant === 'tooltip';
|
|
605
603
|
const {statusIcon: statusTip, describedBy: statusTipDescribedBy} =
|
|
606
604
|
useInputStatusIcon({
|
|
607
|
-
status
|
|
605
|
+
status,
|
|
608
606
|
statusVariant: effectiveStatusVariant,
|
|
609
607
|
size: 'sm',
|
|
610
608
|
});
|
|
@@ -927,32 +925,42 @@ export function ComplexSelector<Value>({
|
|
|
927
925
|
{...stylex.props(styles.trigger)}>
|
|
928
926
|
<span {...stylex.props(styles.triggerText)}>{triggerContent}</span>
|
|
929
927
|
</button>
|
|
930
|
-
{isRenderable(statusTip) && (
|
|
931
|
-
// The info-tip is its own control: a press on it, or on its message
|
|
932
|
-
// bubble (portaled, so outside this span in the DOM but inside it in
|
|
933
|
-
// React), shows the message without opening the popup.
|
|
934
|
-
<span onClick={stopPropagation} {...stylex.props(styles.statusTip)}>
|
|
935
|
-
{statusTip}
|
|
936
|
-
</span>
|
|
937
|
-
)}
|
|
938
928
|
{isBusy && <Spinner size="sm" aria-hidden="true" />}
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
929
|
+
{isRenderable(statusTip) &&
|
|
930
|
+
(isTooltipStatus ? (
|
|
931
|
+
// The info-tip is its own control: a press on it, or on its
|
|
932
|
+
// message bubble (portaled, so outside this span in the DOM but
|
|
933
|
+
// inside it in React), shows the message without opening the
|
|
934
|
+
// popup.
|
|
935
|
+
<span onClick={stopPropagation} {...stylex.props(styles.statusTip)}>
|
|
936
|
+
{statusTip}
|
|
937
|
+
</span>
|
|
938
|
+
) : (
|
|
939
|
+
// The plain icon is part of the field: a press on it opens the
|
|
940
|
+
// popup, as a press on the trigger does.
|
|
941
|
+
<span {...stylex.props(styles.statusTip)}>{statusTip}</span>
|
|
942
|
+
))}
|
|
943
|
+
{/* A status icon or info-tip takes the chevron's place, as in
|
|
944
|
+
Selector. */}
|
|
945
|
+
{!isRenderable(statusTip) && (
|
|
946
|
+
<Icon
|
|
947
|
+
icon="chevronDown"
|
|
948
|
+
size="sm"
|
|
949
|
+
color="secondary"
|
|
950
|
+
// No wrapper: Icon's own span already provides the 16px box (`sm`)
|
|
951
|
+
// and the secondary icon color the wrapper used to set, so the glyph
|
|
952
|
+
// IS the trigger's icon element — one node carrying the box, the
|
|
953
|
+
// color, the rotation, and the theme target.
|
|
954
|
+
xstyle={[
|
|
955
|
+
styles.triggerIcon,
|
|
956
|
+
styles.triggerIconRotation,
|
|
957
|
+
isOpen && styles.triggerIconOpen,
|
|
958
|
+
]}
|
|
959
|
+
{...themeProps('complex-selector-indicator-icon', {
|
|
960
|
+
state: isOpen ? 'expanded' : 'collapsed',
|
|
961
|
+
})}
|
|
962
|
+
/>
|
|
963
|
+
)}
|
|
956
964
|
</div>
|
|
957
965
|
|
|
958
966
|
{popup}
|
|
@@ -1142,6 +1142,34 @@ function PointerDateTimeField({
|
|
|
1142
1142
|
// it, as BaseTypeahead does.
|
|
1143
1143
|
const timePointerActiveRef = useRef(false);
|
|
1144
1144
|
|
|
1145
|
+
// These one-shot `document` listeners belong to this field. Unmount removes
|
|
1146
|
+
// them. Otherwise the next click runs work for a field that is gone.
|
|
1147
|
+
const timeClickWatchersRef = useRef<Set<EventListener> | null>(null);
|
|
1148
|
+
|
|
1149
|
+
const addTimeClickWatcher = useCallback((handler: () => void) => {
|
|
1150
|
+
const watchers = timeClickWatchersRef.current ?? new Set<EventListener>();
|
|
1151
|
+
timeClickWatchersRef.current = watchers;
|
|
1152
|
+
const watcher: EventListener = () => {
|
|
1153
|
+
// The `once` option removes the listener from the document. Delete it from
|
|
1154
|
+
// the set too, or the set keeps every past press.
|
|
1155
|
+
watchers.delete(watcher);
|
|
1156
|
+
handler();
|
|
1157
|
+
};
|
|
1158
|
+
watchers.add(watcher);
|
|
1159
|
+
document.addEventListener('click', watcher, {once: true});
|
|
1160
|
+
}, []);
|
|
1161
|
+
|
|
1162
|
+
const clearTimeClickWatchers = useCallback(() => {
|
|
1163
|
+
for (const watcher of timeClickWatchersRef.current ?? []) {
|
|
1164
|
+
document.removeEventListener('click', watcher);
|
|
1165
|
+
}
|
|
1166
|
+
timeClickWatchersRef.current?.clear();
|
|
1167
|
+
}, []);
|
|
1168
|
+
|
|
1169
|
+
// The Effect owns this field's `document` click watchers: its setup acquires
|
|
1170
|
+
// nothing, its cleanup releases whatever a press left pending.
|
|
1171
|
+
useEffect(() => clearTimeClickWatchers, [clearTimeClickWatchers]);
|
|
1172
|
+
|
|
1145
1173
|
// Whether the highlight is still the one typing derived, or the user has
|
|
1146
1174
|
// since moved it themselves. Enter honours typed text only in the former
|
|
1147
1175
|
// case — otherwise the field would commit something other than the option
|
|
@@ -1150,14 +1178,10 @@ function PointerDateTimeField({
|
|
|
1150
1178
|
|
|
1151
1179
|
const markTimePointerActive = useCallback(() => {
|
|
1152
1180
|
timePointerActiveRef.current = true;
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
},
|
|
1158
|
-
{once: true},
|
|
1159
|
-
);
|
|
1160
|
-
}, []);
|
|
1181
|
+
addTimeClickWatcher(() => {
|
|
1182
|
+
timePointerActiveRef.current = false;
|
|
1183
|
+
});
|
|
1184
|
+
}, [addTimeClickWatcher]);
|
|
1161
1185
|
|
|
1162
1186
|
// The time list is a manual popover: the browser's light dismiss counts a
|
|
1163
1187
|
// press in the time input as outside (a text input cannot be an invoker), so
|
|
@@ -1309,16 +1333,14 @@ function PointerDateTimeField({
|
|
|
1309
1333
|
// input must hold DOM focus or aria-activedescendant announces nothing.
|
|
1310
1334
|
timeInputRef.current?.focus();
|
|
1311
1335
|
if (timePointerActiveRef.current) {
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
() =>
|
|
1315
|
-
requestAnimationFrame(() => timePopover.show({skipAutoFocus: true})),
|
|
1316
|
-
{once: true},
|
|
1336
|
+
addTimeClickWatcher(() =>
|
|
1337
|
+
requestAnimationFrame(() => timePopover.show({skipAutoFocus: true})),
|
|
1317
1338
|
);
|
|
1318
1339
|
} else {
|
|
1319
1340
|
timePopover.show({skipAutoFocus: true});
|
|
1320
1341
|
}
|
|
1321
1342
|
}, [
|
|
1343
|
+
addTimeClickWatcher,
|
|
1322
1344
|
hasTimeOptions,
|
|
1323
1345
|
isEffectivelyDisabled,
|
|
1324
1346
|
timePopover,
|
|
@@ -27,6 +27,7 @@ import {isRenderable} from '../utils/isRenderable';
|
|
|
27
27
|
import {observeMutations} from '../utils/sharedMutationObserver';
|
|
28
28
|
import {useIsomorphicLayoutEffect} from '../hooks/useIsomorphicLayoutEffect';
|
|
29
29
|
import * as stylex from '@stylexjs/stylex';
|
|
30
|
+
import {focusOutlineProps} from '../utils/focusOutline.stylex';
|
|
30
31
|
import {
|
|
31
32
|
useHoverCard,
|
|
32
33
|
type HoverCardFocusTrigger,
|
|
@@ -483,7 +484,9 @@ export function HoverCard({
|
|
|
483
484
|
// No aria-expanded: this wrapper is a role-less <span>, and
|
|
484
485
|
// aria-expanded is invalid on it (see EXPANDABLE_ROLES above).
|
|
485
486
|
aria-describedby={label ? undefined : hoverCard.describedBy}
|
|
486
|
-
|
|
487
|
+
// The span is a tab stop Astryx adds: it draws the shared ring,
|
|
488
|
+
// which a theme restyles through the focus-outline tokens.
|
|
489
|
+
{...focusOutlineProps.focusVisible(
|
|
487
490
|
styles.wrapperInline,
|
|
488
491
|
showHoverIndication && styles.hoverIndication,
|
|
489
492
|
)}>
|
|
@@ -41,6 +41,9 @@ import {Selector} from '../Selector';
|
|
|
41
41
|
import {Text} from '../Text';
|
|
42
42
|
import {useAnnounce} from '../hooks/useAnnounce';
|
|
43
43
|
import {useListFocus} from '../hooks/useListFocus';
|
|
44
|
+
import {useMergedRefs} from '../hooks/useMergedRefs';
|
|
45
|
+
import {focusForLastInput} from '../utils/focusReturn';
|
|
46
|
+
import {useInteractionModalityTracking} from '../utils/interactionModality';
|
|
44
47
|
import {mergeProps, rtlStyles} from '../utils';
|
|
45
48
|
import type {BaseProps} from '../BaseProps';
|
|
46
49
|
import {themeProps} from '../utils/themeProps';
|
|
@@ -460,6 +463,9 @@ export function Pagination({
|
|
|
460
463
|
wrap: true,
|
|
461
464
|
orientation: 'horizontal',
|
|
462
465
|
});
|
|
466
|
+
// The click's focus takes the ring of the dots' own document's last input.
|
|
467
|
+
const {ref: modalityRef} = useInteractionModalityTracking();
|
|
468
|
+
const dotsRef = useMergedRefs(dotsListRef, modalityRef);
|
|
463
469
|
|
|
464
470
|
const computedTotalPages =
|
|
465
471
|
totalPagesProp ??
|
|
@@ -688,9 +694,12 @@ export function Pagination({
|
|
|
688
694
|
|
|
689
695
|
return (
|
|
690
696
|
<div
|
|
691
|
-
ref={
|
|
697
|
+
ref={dotsRef}
|
|
692
698
|
{...stylex.props(styles.dotsContainer)}
|
|
693
|
-
|
|
699
|
+
// The dots already behave as an APG radio group (one Tab stop,
|
|
700
|
+
// arrows, Home/End, selection follows focus), so they expose its
|
|
701
|
+
// roles: a reader announces "Page 3, 3 of 7".
|
|
702
|
+
role="radiogroup"
|
|
694
703
|
aria-label={pageIndicatorsLabel}
|
|
695
704
|
onKeyDown={handleDotsKeyDown}
|
|
696
705
|
onFocus={handleDotsFocus}>
|
|
@@ -700,18 +709,23 @@ export function Pagination({
|
|
|
700
709
|
<button
|
|
701
710
|
key={i + 1}
|
|
702
711
|
type="button"
|
|
712
|
+
role="radio"
|
|
703
713
|
data-page={i + 1}
|
|
704
|
-
aria-label={t('@astryx.pagination.
|
|
705
|
-
|
|
714
|
+
aria-label={t('@astryx.pagination.pageAnnounce', {
|
|
715
|
+
current: i + 1,
|
|
706
716
|
})}
|
|
707
|
-
aria-current
|
|
717
|
+
// aria-checked carries the current page; aria-current beside
|
|
718
|
+
// it would announce the same state twice.
|
|
719
|
+
aria-checked={isActive}
|
|
708
720
|
// The active dot is the single roving tab stop; useListFocus
|
|
709
721
|
// maintains it as focus and the active page move.
|
|
710
722
|
tabIndex={isActive ? 0 : -1}
|
|
711
|
-
//
|
|
712
|
-
//
|
|
713
|
-
|
|
714
|
-
|
|
723
|
+
// Focus selects the page (handleDotsFocus). The click focuses
|
|
724
|
+
// the dot, with the ring the last input calls for.
|
|
725
|
+
onClick={e => focusForLastInput(e.currentTarget)}
|
|
726
|
+
// A press must not choose a page before release. Sliding off
|
|
727
|
+
// takes it back. So the press does not focus the dot.
|
|
728
|
+
onMouseDown={e => e.preventDefault()}
|
|
715
729
|
// Disabled dots stay focusable (spec:AST-085 FR1); the page
|
|
716
730
|
// only follows focus while enabled (handleDotsFocus).
|
|
717
731
|
aria-disabled={isDisabled || undefined}
|
package/src/Tooltip/Tooltip.tsx
CHANGED
|
@@ -22,6 +22,7 @@ import React, {
|
|
|
22
22
|
} from 'react';
|
|
23
23
|
import {useIsomorphicLayoutEffect} from '../hooks/useIsomorphicLayoutEffect';
|
|
24
24
|
import * as stylex from '@stylexjs/stylex';
|
|
25
|
+
import {focusOutlineProps} from '../utils/focusOutline.stylex';
|
|
25
26
|
import {
|
|
26
27
|
useTooltip,
|
|
27
28
|
type TooltipFocusTrigger,
|
|
@@ -341,7 +342,9 @@ export function Tooltip({
|
|
|
341
342
|
ref={tooltip.ref}
|
|
342
343
|
tabIndex={0}
|
|
343
344
|
aria-describedby={tooltip.describedBy}
|
|
344
|
-
|
|
345
|
+
// The span is a tab stop Astryx adds: it draws the shared ring,
|
|
346
|
+
// which a theme restyles through the focus-outline tokens.
|
|
347
|
+
{...focusOutlineProps.focusVisible(
|
|
345
348
|
styles.wrapperInline,
|
|
346
349
|
showHoverIndication && styles.hoverIndication,
|
|
347
350
|
)}>
|
|
@@ -688,6 +688,7 @@ const runtimeCatalog: Readonly<Record<string, string>> = {
|
|
|
688
688
|
'@astryx.comments.olderFailed': "Earlier comments couldn't load",
|
|
689
689
|
'@astryx.comments.postFailed': "Your comment couldn't be posted.",
|
|
690
690
|
'@astryx.infoTip.label': 'More information',
|
|
691
|
+
'@astryx.navigationStack.back': 'Back',
|
|
691
692
|
};
|
|
692
693
|
|
|
693
694
|
export default runtimeCatalog;
|
|
@@ -700,6 +700,7 @@ const runtimeCatalog: Readonly<Record<string, string>> = {
|
|
|
700
700
|
'@astryx.comments.olderFailed': "⟦Éàřłíéř çóɱɱéñţš çóúłðñ'ţ łóàð⟧",
|
|
701
701
|
'@astryx.comments.postFailed': "⟦Ýóúř çóɱɱéñţ çóúłðñ'ţ ƀé þóšţéð.⟧",
|
|
702
702
|
'@astryx.infoTip.label': '⟦Ṁóřé íñƒóřɱàţíóñ⟧',
|
|
703
|
+
'@astryx.navigationStack.back': '⟦Ɓàçķ⟧',
|
|
703
704
|
};
|
|
704
705
|
|
|
705
706
|
export default runtimeCatalog;
|
package/src/internal/touch.ts
CHANGED
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* @file touch.ts
|
|
5
|
-
* @input The gesture core: the arena, the recognizers
|
|
6
|
-
* the pan, the motion engine and math, and the touch-presentation
|
|
7
|
-
* direction helpers that Lab components read
|
|
5
|
+
* @input The gesture core: the arena, the recognizers and their geometry.
|
|
6
|
+
* Also the pan, the motion engine and math, and the touch-presentation,
|
|
7
|
+
* direction and focus helpers that Lab components read
|
|
8
8
|
* @output `@astryxdesign/core/internal/touch`: the gesture core's primitives
|
|
9
|
-
* and the motion, touch-presentation and
|
|
9
|
+
* and the motion, touch-presentation, direction and focus modules for Lab
|
|
10
10
|
* components, re-exported by name
|
|
11
11
|
* @position An internal entry reserved for Astryx's own packages:
|
|
12
12
|
* undocumented, outside the public API and its compatibility promise
|
|
@@ -80,3 +80,18 @@ export {isRtlElement} from '../hooks/isRtlElement';
|
|
|
80
80
|
export {UIKIT_GESTURES} from '../motion/uikit/gestures';
|
|
81
81
|
export {useTouchPresentation} from '../utils/touchPresentation';
|
|
82
82
|
export {TOUCH_QUERY} from '../utils/touchQueries';
|
|
83
|
+
|
|
84
|
+
// Lab's NavigationStack reads these.
|
|
85
|
+
export {ScreenEdgePanGestureRecognizer} from '../gestures/ScreenEdgePanGestureRecognizer';
|
|
86
|
+
export {resolveMotion} from '../motion/resolveMotion';
|
|
87
|
+
export {solveSpring, toSpring} from '../motion/spring';
|
|
88
|
+
export type {SpringDescription} from '../motion/spring';
|
|
89
|
+
export {navigation} from '../motion/uikit/navigation';
|
|
90
|
+
export {
|
|
91
|
+
NAVIGATION_BAR_ELEMENTS_SPRING,
|
|
92
|
+
NAVIGATION_INTERACTIVE_POP_FINISH_SPRING,
|
|
93
|
+
NAVIGATION_POP_SPRING,
|
|
94
|
+
NAVIGATION_PUSH_SPRING,
|
|
95
|
+
} from '../motion/uikit/springs';
|
|
96
|
+
export {focusForLastInput, isFocusLost} from '../utils/focusReturn';
|
|
97
|
+
export {useInteractionModalityTracking} from '../utils/interactionModality';
|