@astryxdesign/core 0.7.6-canary.5ef8ecf → 0.7.6-canary.67e293e
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/Badge/Badge.d.ts.map +1 -1
- package/dist/Badge/Badge.js +2 -1
- package/dist/DateInput/MonthScroller.d.ts.map +1 -1
- package/dist/DateInput/MonthScroller.js +17 -18
- package/dist/DateRangeInput/DateRangeInput.d.ts.map +1 -1
- package/dist/DateRangeInput/DateRangeInput.js +8 -4
- package/dist/DropdownMenu/DropdownMenuGroup.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuGroup.js +2 -1
- package/dist/Field/FieldLabel.d.ts.map +1 -1
- package/dist/Field/FieldLabel.js +27 -2
- package/dist/Layer/useTouchTrigger.d.ts +9 -0
- package/dist/Layer/useTouchTrigger.d.ts.map +1 -1
- package/dist/Layer/useTouchTrigger.js +1 -1
- package/dist/Slider/Slider.d.ts.map +1 -1
- package/dist/Slider/Slider.js +82 -10
- package/package.json +4 -4
- package/src/Badge/Badge.tsx +2 -1
- package/src/DateInput/MonthScroller.tsx +15 -17
- package/src/DateRangeInput/DateRangeInput.tsx +18 -3
- package/src/DropdownMenu/DropdownMenuGroup.tsx +2 -1
- package/src/Field/Field.doc.mjs +2 -1
- package/src/Field/FieldLabel.doc.mjs +4 -2
- package/src/Field/FieldLabel.spec.md +30 -21
- package/src/Field/FieldLabel.tsx +37 -3
- package/src/Layer/useTouchTrigger.ts +1 -1
- package/src/Lightbox/Lightbox.spec.md +249 -61
- package/src/Slider/Slider.spec.md +18 -16
- package/src/Slider/Slider.tsx +101 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/Badge/Badge.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/Badge/Badge.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAY5C,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAwJ7C;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,eAAe,CAAC;AAEjD,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,KAAK,CAAC,EACpB,OAAmB,EACnB,KAAK,EACL,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,UAAU,+BA6CZ;yBAtDe,KAAK"}
|
package/dist/Badge/Badge.js
CHANGED
|
@@ -19,6 +19,7 @@ import "../theme/tokens.stylex.js";
|
|
|
19
19
|
import { colorVars, spacingVars, radiusVars, fontWeightVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
20
20
|
import { mergeProps } from "../utils/index.js";
|
|
21
21
|
import { themeProps } from "../utils/themeProps.js";
|
|
22
|
+
import { isRenderable } from "../utils/isRenderable.js";
|
|
22
23
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
23
24
|
/**
|
|
24
25
|
* Base badge styles
|
|
@@ -187,7 +188,7 @@ export function Badge({
|
|
|
187
188
|
// a client component, so it is tracked in #5585.
|
|
188
189
|
const labelTitle = typeof label === 'number' ? String(label) : typeof label === 'string' && label.length > 0 ? label : undefined;
|
|
189
190
|
// Whether the label renders anything, which is when the badge grows with it.
|
|
190
|
-
const hasLabel = label
|
|
191
|
+
const hasLabel = isRenderable(label);
|
|
191
192
|
return /*#__PURE__*/_jsxs("span", {
|
|
192
193
|
ref: ref,
|
|
193
194
|
...mergeProps(themeProps('badge', {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MonthScroller.d.ts","sourceRoot":"","sources":["../../src/DateInput/MonthScroller.tsx"],"names":[],"mappings":"AAoDA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,aAAa,EAClB,KAAK,SAAS,EAQf,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"MonthScroller.d.ts","sourceRoot":"","sources":["../../src/DateInput/MonthScroller.tsx"],"names":[],"mappings":"AAoDA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,aAAa,EAClB,KAAK,SAAS,EAQf,MAAM,UAAU,CAAC;AAgNlB,MAAM,WAAW,mBAAmB;IAClC,0DAA0D;IAC1D,aAAa,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;CACxE;AAED,MAAM,WAAW,kBAAkB;IACjC,yEAAyE;IACzE,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IACxD,+CAA+C;IAC/C,aAAa,EAAE,MAAM,CAAC;IACtB,8CAA8C;IAC9C,aAAa,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,+DAA+D;IAC/D,oBAAoB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,+BAA+B;IAC/B,YAAY,EAAE,SAAS,GAAG,IAAI,CAAC;IAC/B,4CAA4C;IAC5C,KAAK,EAAE,SAAS,CAAC;IACjB,2DAA2D;IAC3D,cAAc,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAC;IAC7C,gCAAgC;IAChC,YAAY,EAAE,SAAS,CAAC;IACxB,kCAAkC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,aAAa,EACb,aAAa,EACb,iBAAiB,EACjB,oBAAoB,EACpB,YAAY,EACZ,KAAK,EACL,cAAc,EACd,YAAY,EACZ,QAAQ,GACT,EAAE,kBAAkB,+BA0fpB;yBArgBe,aAAa"}
|
|
@@ -54,8 +54,10 @@ const DAY_SIZE = dateInputTouchSizes.daySize;
|
|
|
54
54
|
*/
|
|
55
55
|
const OVERSCAN = 3;
|
|
56
56
|
|
|
57
|
-
/**
|
|
58
|
-
const
|
|
57
|
+
/** Every listener on the scroller is passive; one options object serves all. */
|
|
58
|
+
const PASSIVE = {
|
|
59
|
+
passive: true
|
|
60
|
+
};
|
|
59
61
|
const styles = {
|
|
60
62
|
spacer: {
|
|
61
63
|
kVAEAm: "x1n2onr6",
|
|
@@ -483,23 +485,20 @@ export function MonthScroller({
|
|
|
483
485
|
onVisibleMonthChangeRef.current(minMonthIndex + row);
|
|
484
486
|
});
|
|
485
487
|
};
|
|
486
|
-
scroller.addEventListener('scroll', onScroll,
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
}
|
|
494
|
-
scroller.addEventListener('touchstart', onTouchStart, {
|
|
495
|
-
passive: true
|
|
496
|
-
});
|
|
488
|
+
scroller.addEventListener('scroll', onScroll, PASSIVE);
|
|
489
|
+
// The user's input on the scroller ends a steer: from here, it's theirs.
|
|
490
|
+
scroller.addEventListener('touchstart', endSteer, PASSIVE);
|
|
491
|
+
scroller.addEventListener('wheel', endSteer, PASSIVE);
|
|
492
|
+
scroller.addEventListener('pointerdown', endSteer, PASSIVE);
|
|
493
|
+
scroller.addEventListener('keydown', endSteer, PASSIVE);
|
|
494
|
+
scroller.addEventListener('touchstart', onTouchStart, PASSIVE);
|
|
497
495
|
return () => {
|
|
498
|
-
scroller.removeEventListener('scroll', onScroll);
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
scroller.removeEventListener('
|
|
496
|
+
scroller.removeEventListener('scroll', onScroll, PASSIVE);
|
|
497
|
+
scroller.removeEventListener('touchstart', endSteer, PASSIVE);
|
|
498
|
+
scroller.removeEventListener('wheel', endSteer, PASSIVE);
|
|
499
|
+
scroller.removeEventListener('pointerdown', endSteer, PASSIVE);
|
|
500
|
+
scroller.removeEventListener('keydown', endSteer, PASSIVE);
|
|
501
|
+
scroller.removeEventListener('touchstart', onTouchStart, PASSIVE);
|
|
503
502
|
if (frameRef.current != null) {
|
|
504
503
|
cancelAnimationFrame(frameRef.current);
|
|
505
504
|
frameRef.current = undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../src/DateRangeInput/DateRangeInput.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../src/DateRangeInput/DateRangeInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -281,7 +281,7 @@ export function DateRangeInput({
|
|
|
281
281
|
dateConstraints
|
|
282
282
|
});
|
|
283
283
|
const fireChange = useCallback(newValue => {
|
|
284
|
-
if (
|
|
284
|
+
if (isEffectivelyDisabled) {
|
|
285
285
|
return;
|
|
286
286
|
}
|
|
287
287
|
onChange(newValue);
|
|
@@ -291,7 +291,7 @@ export function DateRangeInput({
|
|
|
291
291
|
await changeAction(newValue);
|
|
292
292
|
});
|
|
293
293
|
}
|
|
294
|
-
}, [
|
|
294
|
+
}, [isEffectivelyDisabled, onChange, changeAction, startTransition, setOptimisticValue]);
|
|
295
295
|
const handleToggle = useCallback(() => {
|
|
296
296
|
if (!isEffectivelyDisabled) {
|
|
297
297
|
if (popover.isOpen) {
|
|
@@ -302,9 +302,12 @@ export function DateRangeInput({
|
|
|
302
302
|
}
|
|
303
303
|
}, [isEffectivelyDisabled, popover]);
|
|
304
304
|
const handleRangeSelect = useCallback(range => {
|
|
305
|
+
if (isDisabled) {
|
|
306
|
+
return;
|
|
307
|
+
}
|
|
305
308
|
fireChange(range);
|
|
306
309
|
popover.hide();
|
|
307
|
-
}, [fireChange, popover]);
|
|
310
|
+
}, [isDisabled, fireChange, popover]);
|
|
308
311
|
const triggerRef = useRef(null);
|
|
309
312
|
// The busy Spinner is decorative; this control announces its busy start
|
|
310
313
|
// (spec:AST-086 FR8).
|
|
@@ -432,7 +435,7 @@ export function DateRangeInput({
|
|
|
432
435
|
children: presets.map(preset => {
|
|
433
436
|
const presetRange = preset.getRange();
|
|
434
437
|
const isActive = isRangeEqual(value, presetRange);
|
|
435
|
-
const isPresetDisabled = !isRangeWithinSpan(presetRange, maxRangeSpan, minRangeSpan) || isDateDisabled(plainDateFromISO(presetRange.start)) || isDateDisabled(plainDateFromISO(presetRange.end));
|
|
438
|
+
const isPresetDisabled = isDisabled || !isRangeWithinSpan(presetRange, maxRangeSpan, minRangeSpan) || isDateDisabled(plainDateFromISO(presetRange.start)) || isDateDisabled(plainDateFromISO(presetRange.end));
|
|
436
439
|
return /*#__PURE__*/_jsx("button", {
|
|
437
440
|
type: "button"
|
|
438
441
|
// These presets are independent action buttons navigated by
|
|
@@ -445,6 +448,7 @@ export function DateRangeInput({
|
|
|
445
448
|
// Focusable while disabled (AR3, spec:AST-085 FR1).
|
|
446
449
|
,
|
|
447
450
|
"aria-disabled": isPresetDisabled || undefined,
|
|
451
|
+
"aria-describedby": showsDisabledMessage ? disabledMessageTooltip.describedBy : undefined,
|
|
448
452
|
onClick: () => {
|
|
449
453
|
if (!isPresetDisabled) {
|
|
450
454
|
handleRangeSelect(presetRange);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenuGroup.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAAQ,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQ5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"DropdownMenuGroup.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAAQ,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQ5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiB5C,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAClD,SAAS,CAAC,cAAc,CAAC,EACzB,MAAM,CACP;IACC;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mDAAmD;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,iBAAiB,EAAE,cAAc,EACjC,GAAG,IAAI,EACR,EAAE,sBAAsB,+BAwBxB;yBAjCe,iBAAiB"}
|
|
@@ -29,6 +29,7 @@ import "../theme/tokens.stylex.js";
|
|
|
29
29
|
import { colorVars, spacingVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
30
30
|
import { mergeProps } from "../utils/index.js";
|
|
31
31
|
import { themeProps } from "../utils/themeProps.js";
|
|
32
|
+
import { isRenderable } from "../utils/isRenderable.js";
|
|
32
33
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
33
34
|
/**
|
|
34
35
|
* A titled group of menu rows.
|
|
@@ -64,7 +65,7 @@ export function DropdownMenuGroup({
|
|
|
64
65
|
...rest
|
|
65
66
|
}) {
|
|
66
67
|
const headingId = useId();
|
|
67
|
-
const hasTitle = title
|
|
68
|
+
const hasTitle = isRenderable(title);
|
|
68
69
|
return /*#__PURE__*/_jsxs("div", {
|
|
69
70
|
...rest,
|
|
70
71
|
ref: ref,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldLabel.d.ts","sourceRoot":"","sources":["../../src/Field/FieldLabel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,
|
|
1
|
+
{"version":3,"file":"FieldLabel.d.ts","sourceRoot":"","sources":["../../src/Field/FieldLabel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAW5C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAiFtC,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAClE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,OAAO,EACP,OAAO,EACP,YAAoB,EACpB,aAAqB,EACrB,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,aAAa,EACb,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,+BAkKjB;yBApLe,UAAU"}
|
package/dist/Field/FieldLabel.js
CHANGED
|
@@ -22,6 +22,7 @@ import "../theme/tokens.stylex.js";
|
|
|
22
22
|
import { colorVars, fontWeightVars, spacingVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
23
23
|
import { Icon, renderIconSlot } from "../Icon/Icon.js";
|
|
24
24
|
import { Tooltip } from "../Tooltip/Tooltip.js";
|
|
25
|
+
import { TOUCH_POINTER_TYPES } from "../Layer/useTouchTrigger.js";
|
|
25
26
|
import { useTranslator } from "../i18n/useTranslator.js";
|
|
26
27
|
import { themeProps } from "../utils/themeProps.js";
|
|
27
28
|
import { useInputContainer } from "../hooks/useInputContainer.js";
|
|
@@ -136,6 +137,22 @@ export function FieldLabel({
|
|
|
136
137
|
// a ref-shaped object, since FieldLabel points at the control by id rather
|
|
137
138
|
// than holding a ref to it.
|
|
138
139
|
const descriptionRef = useRef(null);
|
|
140
|
+
// A tap on the info icon asks for the help, so it stops there: it does not
|
|
141
|
+
// go on to activate the label's control, as a press anywhere else on the
|
|
142
|
+
// label would (focus the field, toggle a switch). A mouse click on the icon
|
|
143
|
+
// keeps that native activation, and hover shows the help.
|
|
144
|
+
const iconPressIsTapRef = useRef(false);
|
|
145
|
+
const handleIconPointerDown = event => {
|
|
146
|
+
// A finger or a pen: the pointers whose tap the shared touch trigger
|
|
147
|
+
// answers, so the ones whose tap opens or closes the help.
|
|
148
|
+
iconPressIsTapRef.current = TOUCH_POINTER_TYPES.has(event.pointerType);
|
|
149
|
+
};
|
|
150
|
+
const handleIconClick = event => {
|
|
151
|
+
if (iconPressIsTapRef.current) {
|
|
152
|
+
event.preventDefault();
|
|
153
|
+
}
|
|
154
|
+
iconPressIsTapRef.current = false;
|
|
155
|
+
};
|
|
139
156
|
const controlRef = useMemo(() => ({
|
|
140
157
|
get current() {
|
|
141
158
|
return inputID == null ? null : descriptionRef.current?.ownerDocument.getElementById(inputID) ?? null;
|
|
@@ -159,13 +176,21 @@ export function FieldLabel({
|
|
|
159
176
|
"aria-hidden": "true",
|
|
160
177
|
children: " \u2219 "
|
|
161
178
|
}), statusText]
|
|
162
|
-
}), labelTooltip &&
|
|
179
|
+
}), labelTooltip &&
|
|
180
|
+
/*#__PURE__*/
|
|
181
|
+
// The icon's one job is to reveal the help, so a tap on it opens or
|
|
182
|
+
// closes the help (`touchTrigger="tap"`), although it sits inside a
|
|
183
|
+
// `<label>`.
|
|
184
|
+
_jsx(Tooltip, {
|
|
163
185
|
content: labelTooltip,
|
|
164
186
|
placement: "above",
|
|
187
|
+
touchTrigger: "tap",
|
|
165
188
|
children: /*#__PURE__*/_jsx(Icon, {
|
|
166
189
|
icon: "info",
|
|
167
190
|
size: "sm",
|
|
168
|
-
color: "inherit"
|
|
191
|
+
color: "inherit",
|
|
192
|
+
onPointerDown: handleIconPointerDown,
|
|
193
|
+
onClick: handleIconClick
|
|
169
194
|
})
|
|
170
195
|
})]
|
|
171
196
|
});
|
|
@@ -41,6 +41,15 @@ import { type RefObject } from 'react';
|
|
|
41
41
|
* - `none`: never open on touch
|
|
42
42
|
*/
|
|
43
43
|
export type LayerTouchTrigger = 'auto' | 'tap' | 'none';
|
|
44
|
+
/**
|
|
45
|
+
* Pointer types whose *press* is a tap rather than a click.
|
|
46
|
+
*
|
|
47
|
+
* A pen belongs here but not in the arrival path: in detection range it hovers
|
|
48
|
+
* — firing `pointerenter`/`pointermove` with no contact, exactly as a mouse
|
|
49
|
+
* does, on a device where `(hover: hover)` matches — and only becomes a tap
|
|
50
|
+
* once it lands. See `handlePointerEnter`.
|
|
51
|
+
*/
|
|
52
|
+
export declare const TOUCH_POINTER_TYPES: Set<string>;
|
|
44
53
|
/**
|
|
45
54
|
* Whether activating this element does something other than reveal the layer.
|
|
46
55
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTouchTrigger.d.ts","sourceRoot":"","sources":["../../src/Layer/useTouchTrigger.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEH,OAAO,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAOrE;;;;;;GAMG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"useTouchTrigger.d.ts","sourceRoot":"","sources":["../../src/Layer/useTouchTrigger.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEH,OAAO,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAOrE;;;;;;GAMG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;AAExD;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,aAA4B,CAAC;AAyB7D;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO,CAoB7D;AAeD,MAAM,WAAW,sBAAsB;IACrC,sDAAsD;IACtD,YAAY,EAAE,iBAAiB,CAAC;IAEhC,oDAAoD;IACpD,SAAS,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,EAAE,OAAO,CAAC;IAEtB,2CAA2C;IAC3C,MAAM,EAAE,OAAO,CAAC;IAEhB,0EAA0E;IAC1E,OAAO,EAAE,MAAM,CAAC;IAEhB,oDAAoD;IACpD,UAAU,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAE1C,uDAAuD;IACvD,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB,mCAAmC;IACnC,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAED,MAAM,WAAW,qBAAqB;IACpC;;;;OAIG;IACH,iBAAiB,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAEtC;;;;OAIG;IACH,kBAAkB,EAAE,MAAM,OAAO,CAAC;IAElC;;;;OAIG;IACH,kBAAkB,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAElD;;;;;;OAMG;IACH,iBAAiB,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,OAAO,CAAC;IAEpD,gFAAgF;IAChF,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,eAAe,CAC7B,OAAO,EAAE,sBAAsB,GAC9B,qBAAqB,CAuMvB"}
|
|
@@ -56,7 +56,7 @@ import { getInteractionModality, useInteractionModalityTracking } from "../utils
|
|
|
56
56
|
* does, on a device where `(hover: hover)` matches — and only becomes a tap
|
|
57
57
|
* once it lands. See `handlePointerEnter`.
|
|
58
58
|
*/
|
|
59
|
-
const TOUCH_POINTER_TYPES = new Set(['touch', 'pen']);
|
|
59
|
+
export const TOUCH_POINTER_TYPES = new Set(['touch', 'pen']);
|
|
60
60
|
|
|
61
61
|
/**
|
|
62
62
|
* ARIA roles that make an element do something when activated. An explicit
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../src/Slider/Slider.tsx"],"names":[],"mappings":"AA2CA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAShD,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAU9C,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,mBAAmB,CAAC,cAAc,CAAC,EACnC,UAAU,CACX;IACC,mDAAmD;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,uEAAuE;IACvE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,6DAA6D;IAC7D,YAAY,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAC3C,8DAA8D;IAC9D,KAAK,CAAC,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAC1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,8CAA8C;IAC9C,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC7C,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAChD,8CAA8C;IAC9C,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;AAmT/D;;;;;;;;GAQG;AACH,wBAAgB,MAAM,CAAC,EAAC,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,WAAW,+
|
|
1
|
+
{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../src/Slider/Slider.tsx"],"names":[],"mappings":"AA2CA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAShD,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAU9C,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,mBAAmB,CAAC,cAAc,CAAC,EACnC,UAAU,CACX;IACC,mDAAmD;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,uEAAuE;IACvE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,6DAA6D;IAC7D,YAAY,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAC3C,8DAA8D;IAC9D,KAAK,CAAC,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAC1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,8CAA8C;IAC9C,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC7C,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAChD,8CAA8C;IAC9C,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;AAmT/D;;;;;;;;GAQG;AACH,wBAAgB,MAAM,CAAC,EAAC,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,WAAW,+BAy5BlD;yBAz5Be,MAAM"}
|
package/dist/Slider/Slider.js
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
/**
|
|
6
6
|
* @file Slider.tsx
|
|
7
7
|
* @input Uses React, useId, useRef, useCallback, useEffect, Field, Tooltip, useTooltip, VisuallyHidden
|
|
8
|
-
* @output Exports Slider and its props; unfilled marks share the track token; modifier-only key presses do not restore the thumb focus ring; a drag belongs to the pointer that started it
|
|
8
|
+
* @output Exports Slider and its props; unfilled marks share the track token; modifier-only key presses do not restore the thumb focus ring; a drag belongs to the pointer that started it; two coincident range thumbs separate toward the press or the first movement
|
|
9
9
|
* @position Core implementation; consumed by index.ts, tested by Slider.test.tsx
|
|
10
10
|
*
|
|
11
11
|
* SYNC: When modified, update these files to stay in sync:
|
|
@@ -422,7 +422,19 @@ export function Slider({
|
|
|
422
422
|
// Prefer the lower thumb if equidistant
|
|
423
423
|
return d0 <= d1 ? 0 : 1;
|
|
424
424
|
}, [isRange, values]);
|
|
425
|
-
|
|
425
|
+
|
|
426
|
+
// The pointer's value at a press on two coincident thumbs, while no
|
|
427
|
+
// movement has said which way the drag goes; the first value off it picks
|
|
428
|
+
// the thumb that can travel that way (see handlePointerMove).
|
|
429
|
+
const coincidentDragRef = useRef(null);
|
|
430
|
+
// Whether the drag in progress began on two coincident thumbs: such a drag
|
|
431
|
+
// can always follow the pointer, so when the dragged thumb is held against
|
|
432
|
+
// the other one and the pointer passes it, the other thumb takes the drag.
|
|
433
|
+
const coincidentOriginRef = useRef(false);
|
|
434
|
+
const updateValue = useCallback((thumbIndex, newVal, snap = true,
|
|
435
|
+
// The other thumb's values to start from, when one event moves both
|
|
436
|
+
// (a drag handed from one coincident thumb to the other).
|
|
437
|
+
from = values) => {
|
|
426
438
|
if (isDisabled) {
|
|
427
439
|
return;
|
|
428
440
|
}
|
|
@@ -431,7 +443,7 @@ export function Slider({
|
|
|
431
443
|
// grid (max 100 with step 3 snapped End to 99, not 100).
|
|
432
444
|
const clamped = clamp(snap ? snapToStep(newVal, min, step) : newVal, min, max);
|
|
433
445
|
if (isRange) {
|
|
434
|
-
const currentValues = [...
|
|
446
|
+
const currentValues = [...from];
|
|
435
447
|
currentValues[thumbIndex] = clamped;
|
|
436
448
|
|
|
437
449
|
// Enforce minStepsBetweenThumbs
|
|
@@ -479,6 +491,8 @@ export function Slider({
|
|
|
479
491
|
detachLostCaptureRef.current = null;
|
|
480
492
|
draggingThumbRef.current = null;
|
|
481
493
|
dragPointerRef.current = null;
|
|
494
|
+
coincidentDragRef.current = null;
|
|
495
|
+
coincidentOriginRef.current = false;
|
|
482
496
|
setDraggingThumb(null);
|
|
483
497
|
fireChangeEnd();
|
|
484
498
|
}
|
|
@@ -505,12 +519,29 @@ export function Slider({
|
|
|
505
519
|
const thumbs = track?.querySelectorAll('[role="slider"]');
|
|
506
520
|
const pressedThumb = e.target.closest('[role="slider"]');
|
|
507
521
|
const pressedThumbIndex = pressedThumb == null || thumbs == null ? -1 : Array.from(thumbs).indexOf(pressedThumb);
|
|
508
|
-
// A direct thumb press owns that thumb
|
|
509
|
-
//
|
|
510
|
-
|
|
522
|
+
// A direct thumb press owns that thumb; track and mark presses choose
|
|
523
|
+
// the nearest value. Two thumbs on one value are the exception: only
|
|
524
|
+
// one of them can travel toward where the pointer goes. A track press
|
|
525
|
+
// beside them picks the thumb on its side. A press on the thumbs
|
|
526
|
+
// themselves (or on their shared value) moves nothing: the pressed
|
|
527
|
+
// thumb holds the press until the pointer moves, and the direction of
|
|
528
|
+
// that first movement from the press picks the thumb.
|
|
529
|
+
const isCoincident = isRange && values[0] === values[1];
|
|
530
|
+
let thumbIndex = pressedThumbIndex >= 0 ? pressedThumbIndex : getClosestThumb(newVal);
|
|
531
|
+
const parks = isCoincident && (pressedThumbIndex >= 0 || newVal === values[0]);
|
|
532
|
+
// The first movement is measured from the pointer itself, not from a
|
|
533
|
+
// mark it pressed (a wide label sits away from its mark's value).
|
|
534
|
+
coincidentDragRef.current = parks ? getValueFromPosition(e.clientX, e.clientY) : null;
|
|
535
|
+
// Only a drag that began on the shared thumbs, the press that waited for
|
|
536
|
+
// the first movement, hands itself to the other thumb (FR6); a track
|
|
537
|
+
// press beside them already picked its thumb.
|
|
538
|
+
coincidentOriginRef.current = parks;
|
|
539
|
+
if (isCoincident && !parks) {
|
|
540
|
+
thumbIndex = newVal > values[0] ? 1 : 0;
|
|
541
|
+
}
|
|
511
542
|
draggingThumbRef.current = thumbIndex;
|
|
512
543
|
setDraggingThumb(thumbIndex);
|
|
513
|
-
updateValue(thumbIndex, newVal);
|
|
544
|
+
updateValue(thumbIndex, parks ? values[thumbIndex] : newVal);
|
|
514
545
|
|
|
515
546
|
// Focus the thumb that owns this drag.
|
|
516
547
|
thumbs?.[thumbIndex]?.focus();
|
|
@@ -533,12 +564,50 @@ export function Slider({
|
|
|
533
564
|
if (typeof e.currentTarget.setPointerCapture === 'function') {
|
|
534
565
|
e.currentTarget.setPointerCapture(e.pointerId);
|
|
535
566
|
}
|
|
536
|
-
}, [isDisabled, getValueFromPosition, getClosestThumb, updateValue, endDrag]);
|
|
567
|
+
}, [isDisabled, isRange, values, getValueFromPosition, getClosestThumb, updateValue, endDrag]);
|
|
537
568
|
const handlePointerMove = useCallback(e => {
|
|
538
569
|
if (draggingThumbRef.current === null || e.pointerId !== dragPointerRef.current || isDisabled) {
|
|
539
570
|
return;
|
|
540
571
|
}
|
|
541
572
|
const newVal = getValueFromPosition(e.clientX, e.clientY);
|
|
573
|
+
// Hands the drag to a thumb, with its focus and pressed paint.
|
|
574
|
+
const handTo = thumbIndex => {
|
|
575
|
+
if (thumbIndex === draggingThumbRef.current) {
|
|
576
|
+
return;
|
|
577
|
+
}
|
|
578
|
+
draggingThumbRef.current = thumbIndex;
|
|
579
|
+
setDraggingThumb(thumbIndex);
|
|
580
|
+
const thumbs = trackRef.current?.querySelectorAll('[role="slider"]');
|
|
581
|
+
thumbs?.[thumbIndex]?.focus();
|
|
582
|
+
setKeyboardFocusThumb(null);
|
|
583
|
+
};
|
|
584
|
+
const pressValue = coincidentDragRef.current;
|
|
585
|
+
if (pressValue !== null) {
|
|
586
|
+
if (newVal === pressValue) {
|
|
587
|
+
return;
|
|
588
|
+
}
|
|
589
|
+
// The first movement from a press on coincident thumbs hands the
|
|
590
|
+
// drag to the thumb that can travel that way.
|
|
591
|
+
coincidentDragRef.current = null;
|
|
592
|
+
handTo(newVal > pressValue ? 1 : 0);
|
|
593
|
+
} else if (coincidentOriginRef.current) {
|
|
594
|
+
// A drag that began on coincident thumbs follows the pointer either
|
|
595
|
+
// way: once the pointer passes the other thumb, the dragged one stops
|
|
596
|
+
// against it and the other takes the drag (a first step that drifted
|
|
597
|
+
// the wrong way never sticks the drag).
|
|
598
|
+
const current = valuesRef.current;
|
|
599
|
+
const dragging = draggingThumbRef.current;
|
|
600
|
+
const other = dragging === 0 ? 1 : 0;
|
|
601
|
+
if (dragging === 0 && newVal > current[1] || dragging === 1 && newVal < current[0]) {
|
|
602
|
+
// The dragged thumb ends against the other one, as if it had
|
|
603
|
+
// followed the pointer there, and the other follows the pointer on.
|
|
604
|
+
const from = [...current];
|
|
605
|
+
from[dragging] = current[other];
|
|
606
|
+
handTo(other);
|
|
607
|
+
updateValue(other, newVal, true, from);
|
|
608
|
+
return;
|
|
609
|
+
}
|
|
610
|
+
}
|
|
542
611
|
updateValue(draggingThumbRef.current, newVal);
|
|
543
612
|
}, [isDisabled, getValueFromPosition, updateValue]);
|
|
544
613
|
const handlePointerUp = useCallback(e => endDrag(e.pointerId), [endDrag]);
|
|
@@ -685,8 +754,11 @@ export function Slider({
|
|
|
685
754
|
content: displayValue(val),
|
|
686
755
|
placement: tooltipPlacement,
|
|
687
756
|
delay: 0,
|
|
688
|
-
focusTrigger: "always"
|
|
689
|
-
|
|
757
|
+
focusTrigger: "always"
|
|
758
|
+
// A drag keeps its own thumb's value showing and closes the other
|
|
759
|
+
// thumb's, which a drag handed over from it may have forced open.
|
|
760
|
+
,
|
|
761
|
+
isOpen: draggingThumb === null ? undefined : draggingThumb === thumbIndex,
|
|
690
762
|
children: thumbElement
|
|
691
763
|
}, thumbIndex);
|
|
692
764
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@astryxdesign/core",
|
|
3
|
-
"version": "0.7.6-canary.
|
|
3
|
+
"version": "0.7.6-canary.67e293e",
|
|
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",
|
|
@@ -860,9 +860,9 @@
|
|
|
860
860
|
"react-dom": ">=19.0.0"
|
|
861
861
|
},
|
|
862
862
|
"devDependencies": {
|
|
863
|
-
"@astryxdesign/a11y-spec": "0.7.6-canary.
|
|
864
|
-
"@astryxdesign/cli": "0.7.6-canary.
|
|
865
|
-
"@astryxdesign/interaction-harness": "0.7.6-canary.
|
|
863
|
+
"@astryxdesign/a11y-spec": "0.7.6-canary.67e293e",
|
|
864
|
+
"@astryxdesign/cli": "0.7.6-canary.67e293e",
|
|
865
|
+
"@astryxdesign/interaction-harness": "0.7.6-canary.67e293e",
|
|
866
866
|
"@babel/cli": "^7.29.7",
|
|
867
867
|
"@babel/core": "^7.29.7",
|
|
868
868
|
"@babel/preset-react": "^7.29.7",
|
package/src/Badge/Badge.tsx
CHANGED
|
@@ -26,6 +26,7 @@ import {
|
|
|
26
26
|
} from '../theme/tokens.stylex';
|
|
27
27
|
import {mergeProps} from '../utils';
|
|
28
28
|
import {themeProps} from '../utils/themeProps';
|
|
29
|
+
import {isRenderable} from '../utils/isRenderable';
|
|
29
30
|
import type {BadgeVariantMap} from './index';
|
|
30
31
|
|
|
31
32
|
/**
|
|
@@ -249,7 +250,7 @@ export function Badge({
|
|
|
249
250
|
? label
|
|
250
251
|
: undefined;
|
|
251
252
|
// Whether the label renders anything, which is when the badge grows with it.
|
|
252
|
-
const hasLabel = label
|
|
253
|
+
const hasLabel = isRenderable(label);
|
|
253
254
|
|
|
254
255
|
return (
|
|
255
256
|
<span
|
|
@@ -85,13 +85,8 @@ const DAY_SIZE = dateInputTouchSizes.daySize;
|
|
|
85
85
|
*/
|
|
86
86
|
const OVERSCAN = 3;
|
|
87
87
|
|
|
88
|
-
/**
|
|
89
|
-
const
|
|
90
|
-
'touchstart',
|
|
91
|
-
'wheel',
|
|
92
|
-
'pointerdown',
|
|
93
|
-
'keydown',
|
|
94
|
-
] as const;
|
|
88
|
+
/** Every listener on the scroller is passive; one options object serves all. */
|
|
89
|
+
const PASSIVE: AddEventListenerOptions = {passive: true};
|
|
95
90
|
|
|
96
91
|
const styles = stylex.create({
|
|
97
92
|
scroller: {
|
|
@@ -682,17 +677,20 @@ export function MonthScroller({
|
|
|
682
677
|
onVisibleMonthChangeRef.current(minMonthIndex + row);
|
|
683
678
|
});
|
|
684
679
|
};
|
|
685
|
-
scroller.addEventListener('scroll', onScroll,
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
scroller.addEventListener('
|
|
680
|
+
scroller.addEventListener('scroll', onScroll, PASSIVE);
|
|
681
|
+
// The user's input on the scroller ends a steer: from here, it's theirs.
|
|
682
|
+
scroller.addEventListener('touchstart', endSteer, PASSIVE);
|
|
683
|
+
scroller.addEventListener('wheel', endSteer, PASSIVE);
|
|
684
|
+
scroller.addEventListener('pointerdown', endSteer, PASSIVE);
|
|
685
|
+
scroller.addEventListener('keydown', endSteer, PASSIVE);
|
|
686
|
+
scroller.addEventListener('touchstart', onTouchStart, PASSIVE);
|
|
690
687
|
return () => {
|
|
691
|
-
scroller.removeEventListener('scroll', onScroll);
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
scroller.removeEventListener('
|
|
688
|
+
scroller.removeEventListener('scroll', onScroll, PASSIVE);
|
|
689
|
+
scroller.removeEventListener('touchstart', endSteer, PASSIVE);
|
|
690
|
+
scroller.removeEventListener('wheel', endSteer, PASSIVE);
|
|
691
|
+
scroller.removeEventListener('pointerdown', endSteer, PASSIVE);
|
|
692
|
+
scroller.removeEventListener('keydown', endSteer, PASSIVE);
|
|
693
|
+
scroller.removeEventListener('touchstart', onTouchStart, PASSIVE);
|
|
696
694
|
if (frameRef.current != null) {
|
|
697
695
|
cancelAnimationFrame(frameRef.current);
|
|
698
696
|
frameRef.current = undefined;
|
|
@@ -613,7 +613,7 @@ export function DateRangeInput({
|
|
|
613
613
|
|
|
614
614
|
const fireChange = useCallback(
|
|
615
615
|
(newValue: DateRange | null) => {
|
|
616
|
-
if (
|
|
616
|
+
if (isEffectivelyDisabled) {
|
|
617
617
|
return;
|
|
618
618
|
}
|
|
619
619
|
onChange(newValue);
|
|
@@ -624,7 +624,13 @@ export function DateRangeInput({
|
|
|
624
624
|
});
|
|
625
625
|
}
|
|
626
626
|
},
|
|
627
|
-
[
|
|
627
|
+
[
|
|
628
|
+
isEffectivelyDisabled,
|
|
629
|
+
onChange,
|
|
630
|
+
changeAction,
|
|
631
|
+
startTransition,
|
|
632
|
+
setOptimisticValue,
|
|
633
|
+
],
|
|
628
634
|
);
|
|
629
635
|
|
|
630
636
|
const handleToggle = useCallback(() => {
|
|
@@ -639,10 +645,13 @@ export function DateRangeInput({
|
|
|
639
645
|
|
|
640
646
|
const handleRangeSelect = useCallback(
|
|
641
647
|
(range: DateRange) => {
|
|
648
|
+
if (isDisabled) {
|
|
649
|
+
return;
|
|
650
|
+
}
|
|
642
651
|
fireChange(range);
|
|
643
652
|
popover.hide();
|
|
644
653
|
},
|
|
645
|
-
[fireChange, popover],
|
|
654
|
+
[isDisabled, fireChange, popover],
|
|
646
655
|
);
|
|
647
656
|
|
|
648
657
|
const triggerRef = useRef<HTMLButtonElement>(null);
|
|
@@ -813,6 +822,7 @@ export function DateRangeInput({
|
|
|
813
822
|
const presetRange = preset.getRange();
|
|
814
823
|
const isActive = isRangeEqual(value, presetRange);
|
|
815
824
|
const isPresetDisabled =
|
|
825
|
+
isDisabled ||
|
|
816
826
|
!isRangeWithinSpan(presetRange, maxRangeSpan, minRangeSpan) ||
|
|
817
827
|
isDateDisabled(plainDateFromISO(presetRange.start)) ||
|
|
818
828
|
isDateDisabled(plainDateFromISO(presetRange.end));
|
|
@@ -828,6 +838,11 @@ export function DateRangeInput({
|
|
|
828
838
|
aria-current={isActive ? 'true' : undefined}
|
|
829
839
|
// Focusable while disabled (AR3, spec:AST-085 FR1).
|
|
830
840
|
aria-disabled={isPresetDisabled || undefined}
|
|
841
|
+
aria-describedby={
|
|
842
|
+
showsDisabledMessage
|
|
843
|
+
? disabledMessageTooltip.describedBy
|
|
844
|
+
: undefined
|
|
845
|
+
}
|
|
831
846
|
onClick={() => {
|
|
832
847
|
if (!isPresetDisabled) {
|
|
833
848
|
handleRangeSelect(presetRange);
|
|
@@ -35,6 +35,7 @@ import {
|
|
|
35
35
|
import type {BaseProps} from '../BaseProps';
|
|
36
36
|
import {mergeProps} from '../utils';
|
|
37
37
|
import {themeProps} from '../utils/themeProps';
|
|
38
|
+
import {isRenderable} from '../utils/isRenderable';
|
|
38
39
|
|
|
39
40
|
const styles = stylex.create({
|
|
40
41
|
heading: {
|
|
@@ -98,7 +99,7 @@ export function DropdownMenuGroup({
|
|
|
98
99
|
...rest
|
|
99
100
|
}: DropdownMenuGroupProps) {
|
|
100
101
|
const headingId = useId();
|
|
101
|
-
const hasTitle = title
|
|
102
|
+
const hasTitle = isRenderable(title);
|
|
102
103
|
|
|
103
104
|
return (
|
|
104
105
|
<div
|
package/src/Field/Field.doc.mjs
CHANGED
|
@@ -120,7 +120,8 @@ export const docs = {
|
|
|
120
120
|
{
|
|
121
121
|
name: 'labelTooltip',
|
|
122
122
|
type: 'string',
|
|
123
|
-
description:
|
|
123
|
+
description:
|
|
124
|
+
'Tooltip text to display in an info icon at the end of the label. Hover shows it; on a touch screen a tap on the icon opens it without focusing the field, while a mouse click on the icon focuses the field like the rest of the label.',
|
|
124
125
|
},
|
|
125
126
|
{
|
|
126
127
|
name: 'status',
|
|
@@ -72,7 +72,8 @@ export const docs = {
|
|
|
72
72
|
{
|
|
73
73
|
name: 'labelTooltip',
|
|
74
74
|
type: 'string',
|
|
75
|
-
description:
|
|
75
|
+
description:
|
|
76
|
+
'Tooltip text for the info icon after the label. Hover shows it; on a touch screen a tap on the icon opens it without focusing the field or toggling the control, while a mouse click on the icon activates the control like the rest of the label.',
|
|
76
77
|
},
|
|
77
78
|
{
|
|
78
79
|
name: 'description',
|
|
@@ -176,7 +177,8 @@ export const docsZh = {
|
|
|
176
177
|
{
|
|
177
178
|
name: 'labelTooltip',
|
|
178
179
|
type: 'string',
|
|
179
|
-
description:
|
|
180
|
+
description:
|
|
181
|
+
'标签后信息图标的工具提示文本。悬停即可显示;在触摸屏上点按图标即可打开,不会聚焦字段或切换控件;用鼠标点击图标则与点击标签其他部分一样激活控件。',
|
|
180
182
|
},
|
|
181
183
|
{
|
|
182
184
|
name: 'description',
|