@astryxdesign/core 0.7.6-canary.962dffe → 0.7.6-canary.9d7cffe
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/ComplexSelector/ComplexSelector.d.ts.map +1 -1
- package/dist/ComplexSelector/ComplexSelector.js +41 -4
- package/dist/DateInput/Wheel.d.ts.map +1 -1
- package/dist/DateInput/Wheel.js +11 -7
- package/dist/DateInput/usePointerDragScroll.d.ts +10 -1
- package/dist/DateInput/usePointerDragScroll.d.ts.map +1 -1
- package/dist/DateInput/usePointerDragScroll.js +25 -9
- package/dist/DateInput/useScrollSettle.d.ts +3 -1
- package/dist/DateInput/useScrollSettle.d.ts.map +1 -1
- package/dist/DateInput/useScrollSettle.js +37 -8
- package/dist/Item/Item.d.ts.map +1 -1
- package/dist/Item/Item.js +19 -6
- package/dist/Link/Link.d.ts.map +1 -1
- package/dist/Link/Link.js +8 -3
- package/dist/Markdown/plugins/headingLinks.a11y.chromium.spec.js +1 -1
- package/dist/NavMenu/NavHeadingMenuItem.d.ts.map +1 -1
- package/dist/NavMenu/NavHeadingMenuItem.js +5 -29
- package/dist/NumberInput/NumberInput.d.ts.map +1 -1
- package/dist/NumberInput/NumberInput.js +23 -2
- package/dist/RadioList/RadioListItem.d.ts.map +1 -1
- package/dist/RadioList/RadioListItem.js +6 -1
- package/dist/SideNav/SideNavItem.d.ts +2 -2
- package/dist/SideNav/SideNavItem.d.ts.map +1 -1
- package/dist/SideNav/SideNavItem.js +18 -7
- package/dist/Switch/Switch.d.ts.map +1 -1
- package/dist/Switch/Switch.js +5 -2
- package/dist/Toast/ToastViewport.d.ts.map +1 -1
- package/dist/Toast/ToastViewport.js +19 -3
- package/dist/TreeList/TreeListItem.d.ts.map +1 -1
- package/dist/TreeList/TreeListItem.js +27 -4
- package/dist/Typeahead/BaseTypeahead.d.ts +4 -4
- package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
- package/dist/Typeahead/BaseTypeahead.js +43 -7
- package/dist/astryx.css +4 -0
- package/dist/gestures/GestureArena.d.ts +26 -1
- package/dist/gestures/GestureArena.d.ts.map +1 -1
- package/dist/gestures/GestureArena.js +71 -9
- package/dist/gestures/GestureHost.d.ts +2 -3
- package/dist/gestures/GestureHost.d.ts.map +1 -1
- package/dist/gestures/GestureHost.js +7 -7
- package/dist/gestures/GestureRecognizer.d.ts +3 -1
- package/dist/gestures/GestureRecognizer.d.ts.map +1 -1
- package/dist/gestures/GestureRecognizer.js +3 -1
- package/dist/gestures/PressTracker.d.ts +112 -0
- package/dist/gestures/PressTracker.d.ts.map +1 -0
- package/dist/gestures/PressTracker.js +267 -0
- package/dist/gestures/index.d.ts +37 -0
- package/dist/gestures/index.d.ts.map +1 -0
- package/dist/gestures/index.js +25 -0
- package/dist/gestures/useGestureRecognizer.d.ts +56 -0
- package/dist/gestures/useGestureRecognizer.d.ts.map +1 -0
- package/dist/gestures/useGestureRecognizer.js +226 -0
- package/dist/motion/animator.d.ts +76 -7
- package/dist/motion/animator.d.ts.map +1 -1
- package/dist/motion/animator.js +589 -99
- package/dist/motion/coast.d.ts +4 -1
- package/dist/motion/coast.d.ts.map +1 -1
- package/dist/motion/coast.js +4 -2
- package/dist/motion/reducedMotion.d.ts.map +1 -1
- package/dist/motion/reducedMotion.js +6 -2
- package/dist/motion/reducedMotionPlan.d.ts +7 -0
- package/dist/motion/reducedMotionPlan.d.ts.map +1 -1
- package/dist/motion/reducedMotionPlan.js +14 -1
- package/dist/motion/resolveMotion.d.ts +42 -0
- package/dist/motion/resolveMotion.d.ts.map +1 -0
- package/dist/motion/resolveMotion.js +43 -0
- package/dist/motion/roleValue.d.ts +2 -1
- package/dist/motion/roleValue.d.ts.map +1 -1
- package/dist/motion/roleValue.js +2 -1
- package/dist/motion/uikit/timing.d.ts +7 -1
- package/dist/motion/uikit/timing.d.ts.map +1 -1
- package/dist/motion/uikit/timing.js +19 -1
- package/dist/utils/focusOutline.stylex.d.ts +6 -0
- package/dist/utils/focusOutline.stylex.d.ts.map +1 -1
- package/dist/utils/focusOutline.stylex.js +7 -0
- package/dist/utils/touchPresentation.d.ts +2 -2
- package/dist/utils/touchPresentation.d.ts.map +1 -1
- package/dist/utils/touchPresentation.js +8 -5
- package/dist/utils/touchQueries.d.ts +13 -0
- package/dist/utils/touchQueries.d.ts.map +1 -0
- package/dist/utils/touchQueries.js +15 -0
- package/dist/utils/useFocusAcrossSwap.d.ts +19 -0
- package/dist/utils/useFocusAcrossSwap.d.ts.map +1 -0
- package/dist/utils/useFocusAcrossSwap.js +41 -0
- package/package.json +4 -4
- package/src/Chat/ChatComposer.spec.md +75 -59
- package/src/Chat/ChatDictationButton.spec.md +126 -81
- package/src/ComplexSelector/ComplexSelector.test.tsx +111 -0
- package/src/ComplexSelector/ComplexSelector.tsx +41 -4
- package/src/DateInput/DateInputTouch.test.tsx +44 -0
- package/src/DateInput/Wheel.tsx +9 -6
- package/src/DateInput/usePointerDragScroll.ts +34 -10
- package/src/DateInput/useScrollSettle.ts +38 -7
- package/src/Item/Item.test.tsx +60 -0
- package/src/Item/Item.tsx +14 -7
- package/src/Link/Link.spec.md +3 -2
- package/src/Link/Link.tsx +11 -0
- package/src/Link/__tests__/Link.truncation.a11y.chromium.spec.ts +58 -0
- package/src/Markdown/plugins/headingLinks.a11y.chromium.spec.ts +1 -1
- package/src/NavMenu/NavHeadingMenuItem.tsx +5 -39
- package/src/NumberInput/NumberInput.test.tsx +68 -7
- package/src/NumberInput/NumberInput.tsx +31 -1
- package/src/OverflowList/OverflowList.spec.md +102 -55
- package/src/Pagination/Pagination.spec.md +158 -84
- package/src/RadioList/RadioList.spec.md +1 -1
- package/src/RadioList/RadioList.test.tsx +28 -0
- package/src/RadioList/RadioListItem.tsx +6 -0
- package/src/Resizable/Resizable.spec.md +144 -124
- package/src/SideNav/SideNav.test.tsx +124 -4
- package/src/SideNav/SideNavItem.spec.md +14 -24
- package/src/SideNav/SideNavItem.tsx +27 -10
- package/src/Switch/Switch.spec.md +1 -1
- package/src/Switch/Switch.test.tsx +21 -1
- package/src/Switch/Switch.tsx +5 -1
- package/src/TimeInput/TimeInput.spec.md +13 -13
- package/src/Toast/Toast.spec.md +2 -5
- package/src/Toast/ToastViewport.test.tsx +79 -0
- package/src/Toast/ToastViewport.tsx +21 -3
- package/src/TreeList/TreeList.test.tsx +26 -0
- package/src/TreeList/TreeListItem.tsx +26 -4
- package/src/Typeahead/BaseTypeahead.doc.mjs +3 -3
- package/src/Typeahead/BaseTypeahead.spec.md +45 -45
- package/src/Typeahead/BaseTypeahead.tsx +48 -9
- package/src/Typeahead/Typeahead.test.tsx +120 -0
- package/src/__tests__/internalModulesNotExperimental.test.ts +88 -0
- package/src/gestures/GestureArena.ts +76 -11
- package/src/gestures/GestureHost.ts +6 -7
- package/src/gestures/GestureRecognizer.ts +3 -1
- package/src/gestures/PressTracker.ts +386 -0
- package/src/gestures/README.md +420 -0
- package/src/gestures/__tests__/GestureHost.test.ts +50 -1
- package/src/gestures/__tests__/PressTracker.test.ts +275 -0
- package/src/gestures/__tests__/arena.test.ts +35 -0
- package/src/gestures/__tests__/harness.ts +31 -2
- package/src/gestures/__tests__/pressTrackerFactory.test.ts +59 -0
- package/src/gestures/__tests__/useGestureRecognizer.test.tsx +570 -0
- package/src/gestures/index.ts +79 -0
- package/src/gestures/useGestureRecognizer.ts +305 -0
- package/src/motion/MEASUREMENTS.md +2 -1
- package/src/motion/README.md +102 -32
- package/src/motion/__tests__/animator.interaction.browser.spec.ts +843 -0
- package/src/motion/__tests__/motionBundle.ts +14 -0
- package/src/motion/animator.test.ts +978 -33
- package/src/motion/animator.ts +790 -104
- package/src/motion/coast.ts +10 -3
- package/src/motion/reducedMotion.ts +12 -2
- package/src/motion/reducedMotionPlan.test.ts +26 -0
- package/src/motion/reducedMotionPlan.ts +20 -1
- package/src/motion/resolveMotion.test.ts +123 -0
- package/src/motion/resolveMotion.ts +68 -0
- package/src/motion/roleValue.ts +2 -1
- package/src/motion/roles.test.ts +21 -4
- package/src/motion/uikit/tableImports.test.ts +293 -0
- package/src/motion/uikit/timing.ts +15 -1
- package/src/motion/uikit/values.test.ts +23 -12
- package/src/utils/focusOutline.stylex.ts +28 -0
- package/src/utils/pressGesture.test.ts +9 -0
- package/src/utils/touchPresentation.ts +8 -5
- package/src/utils/touchQueries.ts +15 -0
- package/src/utils/useFocusAcrossSwap.ts +55 -0
|
@@ -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;AAK7B,OAAO,EAA4B,KAAK,kBAAkB,EAAC,MAAM,UAAU,CAAC;AAC5E,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAI5D,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"ComplexSelector.d.ts","sourceRoot":"","sources":["../../src/ComplexSelector/ComplexSelector.tsx"],"names":[],"mappings":"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"}
|
|
@@ -29,16 +29,23 @@ import { useTranslator } from "../i18n/index.js";
|
|
|
29
29
|
import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
|
|
30
30
|
import { usePopover } from "../Popover/usePopover.js";
|
|
31
31
|
import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
|
|
32
|
+
import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
|
|
32
33
|
import "../theme/tokens.stylex.js";
|
|
33
34
|
import { colorVars, durationVars, easeVars, fontWeightVars, radiusVars, sizeVars, spacingVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
35
|
+
import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
|
|
34
36
|
import { isRenderable, mergeProps } from "../utils/index.js";
|
|
35
37
|
import { composeEventHandlers } from "../utils/composeEventHandlers.js";
|
|
36
|
-
import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
|
|
37
38
|
import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
|
|
38
39
|
import { usePressFeedback } from "../hooks/usePressFeedback.js";
|
|
39
40
|
import { themeProps } from "../utils/themeProps.js";
|
|
40
41
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
41
42
|
const styles = {
|
|
43
|
+
statusTip: {
|
|
44
|
+
k1xSpc: "x3nfvp2",
|
|
45
|
+
kGNEyG: "x6s0dn4",
|
|
46
|
+
kmuXW: "x2lah0s",
|
|
47
|
+
$$css: true
|
|
48
|
+
},
|
|
42
49
|
triggerContainer: {
|
|
43
50
|
kVAEAm: "x1n2onr6",
|
|
44
51
|
k1xSpc: "x78zum5",
|
|
@@ -177,6 +184,11 @@ const RENDER_TRIGGER_PARTS_MESSAGE = '`container*` and `control*` styling props
|
|
|
177
184
|
* open and close, including the ones the selector performs itself.
|
|
178
185
|
*/
|
|
179
186
|
|
|
187
|
+
/** Keeps a click from reaching the control box's open-the-popup handler. */
|
|
188
|
+
function stopPropagation(event) {
|
|
189
|
+
event.stopPropagation();
|
|
190
|
+
}
|
|
191
|
+
|
|
180
192
|
/**
|
|
181
193
|
* A selector shell for rich, custom selection surfaces.
|
|
182
194
|
*
|
|
@@ -268,7 +280,19 @@ export function ComplexSelector({
|
|
|
268
280
|
const contentId = useId();
|
|
269
281
|
const descriptionId = useId();
|
|
270
282
|
const statusMessageId = useId();
|
|
271
|
-
|
|
283
|
+
// With `tooltip` placement Field renders no message box, so the status
|
|
284
|
+
// lives in an info-tip button on the trigger row (family:input-fields FR8).
|
|
285
|
+
// Only that placement renders an on-field status affordance here.
|
|
286
|
+
const isTooltipStatus = effectiveStatusVariant === 'tooltip';
|
|
287
|
+
const {
|
|
288
|
+
statusIcon: statusTip,
|
|
289
|
+
describedBy: statusTipDescribedBy
|
|
290
|
+
} = useInputStatusIcon({
|
|
291
|
+
status: isTooltipStatus ? status : undefined,
|
|
292
|
+
statusVariant: effectiveStatusVariant,
|
|
293
|
+
size: 'sm'
|
|
294
|
+
});
|
|
295
|
+
const ariaDescribedBy = [description ? descriptionId : null, isTooltipStatus ? statusTipDescribedBy : status?.message ? statusMessageId : null].filter(id => id != null).join(' ') || undefined;
|
|
272
296
|
const triggerRef = useRef(null);
|
|
273
297
|
const triggerButtonRef = useMergedRefs(triggerRef, ref);
|
|
274
298
|
const [isPending, startTransition] = useTransition();
|
|
@@ -464,8 +488,10 @@ export function ComplexSelector({
|
|
|
464
488
|
// The ring belongs to the wrapper (the focusable `<button>` sits
|
|
465
489
|
// inside it), but it must still be a KEYBOARD ring: `:focus-within`
|
|
466
490
|
// matched a mouse click on the trigger and drew the outline for
|
|
467
|
-
// pointer users too.
|
|
468
|
-
|
|
491
|
+
// pointer users too. It keys off the trigger alone, so the status
|
|
492
|
+
// info-tip beside it rings itself and the box does not ring too
|
|
493
|
+
// (architecture:interaction-modality INV3).
|
|
494
|
+
focusOutlineStyles.focusWithinCombobox, variant === 'secondary' && styles.triggerSecondary, variant === 'ghost' && styles.triggerGhost, variant !== 'input' && interactionOverlayStyles.backgroundImage, isDisabled && inputWrapperStyles.disabled, variant !== 'input' && isDisabled && styles.triggerGhostDisabled, isDisabled && styles.disabled, triggerLabel == null && styles.placeholder, controlXstyle), controlClassName, controlStyle),
|
|
469
495
|
children: [isRenderable(startIconSlot) && startIconSlot, /*#__PURE__*/_jsx("button", {
|
|
470
496
|
...rest,
|
|
471
497
|
ref: triggerButtonRef,
|
|
@@ -505,6 +531,17 @@ export function ComplexSelector({
|
|
|
505
531
|
},
|
|
506
532
|
children: triggerContent
|
|
507
533
|
})
|
|
534
|
+
}), isRenderable(statusTip) &&
|
|
535
|
+
/*#__PURE__*/
|
|
536
|
+
// The info-tip is its own control: a press on it, or on its message
|
|
537
|
+
// bubble (portaled, so outside this span in the DOM but inside it in
|
|
538
|
+
// React), shows the message without opening the popup.
|
|
539
|
+
_jsx("span", {
|
|
540
|
+
onClick: stopPropagation,
|
|
541
|
+
...{
|
|
542
|
+
className: "x3nfvp2 x6s0dn4 x2lah0s"
|
|
543
|
+
},
|
|
544
|
+
children: statusTip
|
|
508
545
|
}), isBusy && /*#__PURE__*/_jsx(Spinner, {
|
|
509
546
|
size: "sm",
|
|
510
547
|
"aria-hidden": "true"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Wheel.d.ts","sourceRoot":"","sources":["../../src/DateInput/Wheel.tsx"],"names":[],"mappings":"AA8MA,MAAM,WAAW,WAAW;IAC1B,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,OAAO,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACpC,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAe,GAChB,EAAE,UAAU,+
|
|
1
|
+
{"version":3,"file":"Wheel.d.ts","sourceRoot":"","sources":["../../src/DateInput/Wheel.tsx"],"names":[],"mappings":"AA8MA,MAAM,WAAW,WAAW;IAC1B,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,OAAO,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACpC,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAe,GAChB,EAAE,UAAU,+BAmOZ;yBAzOe,KAAK"}
|
package/dist/DateInput/Wheel.js
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
* rubber-banding, and the settle animation are the platform's; all this adds
|
|
13
13
|
* is `scroll-snap-align: center` on each option, half a viewport of padding at
|
|
14
14
|
* each end so the first and last option can reach the middle, and a commit
|
|
15
|
-
* when the scrolling stops.
|
|
15
|
+
* when the scrolling stops and no finger or mouse drag still holds it.
|
|
16
16
|
*
|
|
17
17
|
* The falloff (rows fading and tipping away from the centre) is a CSS
|
|
18
18
|
* scroll-driven animation on a `view()` timeline — the browser interpolates it
|
|
@@ -99,6 +99,15 @@ export function Wheel({
|
|
|
99
99
|
// `selectedIndex` only catches up when the wheel settles.
|
|
100
100
|
const [activeIndex, setActiveIndex] = useState(selectedIndex);
|
|
101
101
|
|
|
102
|
+
// A mouse cannot drag a scroll container, so without this the wheel ignores
|
|
103
|
+
// the one gesture its shape invites. Touch is untouched — it pans natively,
|
|
104
|
+
// with momentum this could not match. See usePointerDragScroll. The drag it
|
|
105
|
+
// holds is not rest either: the settle below waits for its release, as it
|
|
106
|
+
// waits for a finger's (useScrollSettle).
|
|
107
|
+
const {
|
|
108
|
+
isDraggingRef
|
|
109
|
+
} = usePointerDragScroll(scrollerRef, isActive);
|
|
110
|
+
|
|
102
111
|
// Row height in px, read from layout rather than assumed, so a theme that
|
|
103
112
|
// retunes --date-input-touch-wheel-item-size still lands on the right row.
|
|
104
113
|
const itemBlockSize = useCallback(() => {
|
|
@@ -138,7 +147,7 @@ export function Wheel({
|
|
|
138
147
|
if (option.value !== value) {
|
|
139
148
|
onChange(option.value);
|
|
140
149
|
}
|
|
141
|
-
}, isActive);
|
|
150
|
+
}, isActive, isDraggingRef);
|
|
142
151
|
|
|
143
152
|
// Park the committed row under the band whenever the wheel is shown, or the
|
|
144
153
|
// value is changed from outside (the calendar scrolled to another month).
|
|
@@ -210,11 +219,6 @@ export function Wheel({
|
|
|
210
219
|
useOwnScrollGesture(scrollerRef, 'all', {
|
|
211
220
|
isEnabled: isActive
|
|
212
221
|
});
|
|
213
|
-
|
|
214
|
-
// A mouse cannot drag a scroll container, so without this the wheel ignores
|
|
215
|
-
// the one gesture its shape invites. Touch is untouched — it pans natively,
|
|
216
|
-
// with momentum this could not match. See usePointerDragScroll.
|
|
217
|
-
usePointerDragScroll(scrollerRef, isActive);
|
|
218
222
|
const moveBy = useCallback(delta => {
|
|
219
223
|
const next = Math.min(options.length - 1, Math.max(0, activeIndex + delta));
|
|
220
224
|
const option = options[next];
|
|
@@ -3,6 +3,15 @@
|
|
|
3
3
|
* press of the button itself, and a wheel row is a click target.
|
|
4
4
|
*/
|
|
5
5
|
export declare const DRAG_SLOP = 4;
|
|
6
|
+
/** What {@link usePointerDragScroll} reports back about the drag. */
|
|
7
|
+
export type PointerDragScrollState = {
|
|
8
|
+
/**
|
|
9
|
+
* True while a mouse drag holds the container: from the press that moved
|
|
10
|
+
* past {@link DRAG_SLOP} until its release. Pass it to `useScrollSettle`,
|
|
11
|
+
* which treats a held drag as it treats a finger still down.
|
|
12
|
+
*/
|
|
13
|
+
isDraggingRef: React.RefObject<boolean>;
|
|
14
|
+
};
|
|
6
15
|
/**
|
|
7
16
|
* Let a mouse drag `ref`'s contents, on a container that already scrolls and
|
|
8
17
|
* snaps for touch.
|
|
@@ -11,5 +20,5 @@ export declare const DRAG_SLOP = 4;
|
|
|
11
20
|
* @param isEnabled - skip while the wheel is hidden; a hidden panel keeps its
|
|
12
21
|
* layout box, so its listeners would otherwise still be live
|
|
13
22
|
*/
|
|
14
|
-
export declare function usePointerDragScroll(ref: React.RefObject<HTMLElement | null>, isEnabled?: boolean):
|
|
23
|
+
export declare function usePointerDragScroll(ref: React.RefObject<HTMLElement | null>, isEnabled?: boolean): PointerDragScrollState;
|
|
15
24
|
//# sourceMappingURL=usePointerDragScroll.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePointerDragScroll.d.ts","sourceRoot":"","sources":["../../src/DateInput/usePointerDragScroll.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"usePointerDragScroll.d.ts","sourceRoot":"","sources":["../../src/DateInput/usePointerDragScroll.ts"],"names":[],"mappings":"AAwDA;;;GAGG;AACH,eAAO,MAAM,SAAS,IAAI,CAAC;AAK3B,qEAAqE;AACrE,MAAM,MAAM,sBAAsB,GAAG;IACnC;;;;OAIG;IACH,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;CACzC,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAClC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,SAAS,GAAE,OAAc,GACxB,sBAAsB,CAmJxB"}
|
|
@@ -5,7 +5,8 @@
|
|
|
5
5
|
/**
|
|
6
6
|
* @file usePointerDragScroll.ts
|
|
7
7
|
* @input A scroll container ref
|
|
8
|
-
* @output Lets a mouse drag the container's contents the way a finger does
|
|
8
|
+
* @output Lets a mouse drag the container's contents the way a finger does,
|
|
9
|
+
* and reports while a drag holds it (`isDraggingRef`)
|
|
9
10
|
* @position Internal behavior hook; consumed by Wheel.tsx
|
|
10
11
|
*
|
|
11
12
|
* ## Why this exists
|
|
@@ -38,11 +39,19 @@
|
|
|
38
39
|
* then jumps a whole one. The drag therefore suspends snapping, and restores
|
|
39
40
|
* it once the release has settled somewhere legal.
|
|
40
41
|
*
|
|
42
|
+
* ## A held drag is not rest
|
|
43
|
+
*
|
|
44
|
+
* Every `scrollTop` the drag assigns is a programmatic scroll, and Chromium
|
|
45
|
+
* ends each one with a `scrollend` — 14 moves, 14 of them. A settle listening
|
|
46
|
+
* for `scrollend` alone would commit the row under the band at every step,
|
|
47
|
+
* with the button still down. `isDraggingRef` tells `useScrollSettle` the
|
|
48
|
+
* drag is still held, the way a touch that has not ended does.
|
|
49
|
+
*
|
|
41
50
|
* SYNC: When modified, update:
|
|
42
51
|
* - /packages/core/src/DateInput/Wheel.tsx
|
|
43
52
|
* - /packages/core/src/DateInput/DateInputTouch.test.tsx
|
|
44
53
|
*/
|
|
45
|
-
import { useEffect } from 'react';
|
|
54
|
+
import { useEffect, useRef } from 'react';
|
|
46
55
|
|
|
47
56
|
/**
|
|
48
57
|
* Movement below this stays a click. A mouse shifts a pixel or two under the
|
|
@@ -53,6 +62,8 @@ export const DRAG_SLOP = 4;
|
|
|
53
62
|
/** How long to wait for a release's settle before restoring snapping. */
|
|
54
63
|
const SETTLE_FALLBACK_MS = 260;
|
|
55
64
|
|
|
65
|
+
/** What {@link usePointerDragScroll} reports back about the drag. */
|
|
66
|
+
|
|
56
67
|
/**
|
|
57
68
|
* Let a mouse drag `ref`'s contents, on a container that already scrolls and
|
|
58
69
|
* snaps for touch.
|
|
@@ -62,6 +73,7 @@ const SETTLE_FALLBACK_MS = 260;
|
|
|
62
73
|
* layout box, so its listeners would otherwise still be live
|
|
63
74
|
*/
|
|
64
75
|
export function usePointerDragScroll(ref, isEnabled = true) {
|
|
76
|
+
const isDraggingRef = useRef(false);
|
|
65
77
|
useEffect(() => {
|
|
66
78
|
const element = ref.current;
|
|
67
79
|
if (element == null || !isEnabled) {
|
|
@@ -70,9 +82,9 @@ export function usePointerDragScroll(ref, isEnabled = true) {
|
|
|
70
82
|
let pointerId = null;
|
|
71
83
|
let originY = 0;
|
|
72
84
|
let originScrollTop = 0;
|
|
73
|
-
|
|
85
|
+
isDraggingRef.current = false;
|
|
74
86
|
// Survives from the drag's end to the click it produces, which is the
|
|
75
|
-
// whole reason it is not just `
|
|
87
|
+
// whole reason it is not just `isDraggingRef`.
|
|
76
88
|
let wasDragged = false;
|
|
77
89
|
let restoreTimer;
|
|
78
90
|
const restoreSnap = () => {
|
|
@@ -112,7 +124,7 @@ export function usePointerDragScroll(ref, isEnabled = true) {
|
|
|
112
124
|
pointerId = event.pointerId;
|
|
113
125
|
originY = event.clientY;
|
|
114
126
|
originScrollTop = element.scrollTop;
|
|
115
|
-
|
|
127
|
+
isDraggingRef.current = false;
|
|
116
128
|
// Not captured yet: a press that never moves has to stay a click on the
|
|
117
129
|
// row under it, and capturing here would retarget that click.
|
|
118
130
|
};
|
|
@@ -121,11 +133,11 @@ export function usePointerDragScroll(ref, isEnabled = true) {
|
|
|
121
133
|
return;
|
|
122
134
|
}
|
|
123
135
|
const delta = event.clientY - originY;
|
|
124
|
-
if (!
|
|
136
|
+
if (!isDraggingRef.current) {
|
|
125
137
|
if (Math.abs(delta) < DRAG_SLOP) {
|
|
126
138
|
return;
|
|
127
139
|
}
|
|
128
|
-
|
|
140
|
+
isDraggingRef.current = true;
|
|
129
141
|
element.setPointerCapture(event.pointerId);
|
|
130
142
|
suspendSnap();
|
|
131
143
|
// Dragging across rows would otherwise select their text, leaving the
|
|
@@ -141,10 +153,10 @@ export function usePointerDragScroll(ref, isEnabled = true) {
|
|
|
141
153
|
return;
|
|
142
154
|
}
|
|
143
155
|
pointerId = null;
|
|
144
|
-
if (!
|
|
156
|
+
if (!isDraggingRef.current) {
|
|
145
157
|
return;
|
|
146
158
|
}
|
|
147
|
-
|
|
159
|
+
isDraggingRef.current = false;
|
|
148
160
|
wasDragged = true;
|
|
149
161
|
element.style.removeProperty('user-select');
|
|
150
162
|
if (element.hasPointerCapture(event.pointerId)) {
|
|
@@ -200,9 +212,13 @@ export function usePointerDragScroll(ref, isEnabled = true) {
|
|
|
200
212
|
element.removeEventListener('click', onClickCapture, {
|
|
201
213
|
capture: true
|
|
202
214
|
});
|
|
215
|
+
isDraggingRef.current = false;
|
|
203
216
|
restoreSnap();
|
|
204
217
|
};
|
|
205
218
|
}, [ref, isEnabled]);
|
|
219
|
+
return {
|
|
220
|
+
isDraggingRef
|
|
221
|
+
};
|
|
206
222
|
}
|
|
207
223
|
|
|
208
224
|
/**
|
|
@@ -21,6 +21,8 @@ export type ScrollSettleState = {
|
|
|
21
21
|
* @param ref - the scroll container
|
|
22
22
|
* @param onSettle - called with the settled element; may change every render
|
|
23
23
|
* @param isEnabled - skip attaching while false (e.g. a hidden panel)
|
|
24
|
+
* @param isHeldRef - true while a mouse drag holds the scroller
|
|
25
|
+
* (usePointerDragScroll's `isDraggingRef`): not rest, however quiet
|
|
24
26
|
*/
|
|
25
|
-
export declare function useScrollSettle(ref: React.RefObject<HTMLElement | null>, onSettle: (element: HTMLElement) => void, isEnabled?: boolean): ScrollSettleState;
|
|
27
|
+
export declare function useScrollSettle(ref: React.RefObject<HTMLElement | null>, onSettle: (element: HTMLElement) => void, isEnabled?: boolean, isHeldRef?: React.RefObject<boolean>): ScrollSettleState;
|
|
26
28
|
//# sourceMappingURL=useScrollSettle.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useScrollSettle.d.ts","sourceRoot":"","sources":["../../src/DateInput/useScrollSettle.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useScrollSettle.d.ts","sourceRoot":"","sources":["../../src/DateInput/useScrollSettle.ts"],"names":[],"mappings":"AA0DA;;;;;GAKG;AACH,eAAO,MAAM,eAAe,MAAM,CAAC;AAEnC,4EAA4E;AAC5E,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;;;OAKG;IACH,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;CACvC,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAC7B,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,QAAQ,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,EACxC,SAAS,GAAE,OAAc,EACzB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,GACnC,iBAAiB,CAuGnB"}
|
|
@@ -4,7 +4,8 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file useScrollSettle.ts
|
|
7
|
-
* @input A scroll container ref
|
|
7
|
+
* @input A scroll container ref, a settle callback, and optionally whether a
|
|
8
|
+
* mouse drag holds it (usePointerDragScroll's `isDraggingRef`)
|
|
8
9
|
* @output Calls back once, after scrolling (including momentum) stops
|
|
9
10
|
* @position Internal behavior hook; consumed by Wheel.tsx and MonthScroller.tsx
|
|
10
11
|
*
|
|
@@ -27,7 +28,10 @@
|
|
|
27
28
|
* moment without lifting and the scroll events stop, so the timer fires
|
|
28
29
|
* and the value commits to whatever is under the band. Chrome hides this
|
|
29
30
|
* because it has `scrollend`, which does not fire until the touch is
|
|
30
|
-
* released.
|
|
31
|
+
* released. A mouse drag (usePointerDragScroll) is held the same way, and
|
|
32
|
+
* there Chrome gives no cover at all: each `scrollTop` the drag assigns
|
|
33
|
+
* ends in its own `scrollend`, so the settle waits for the drag's
|
|
34
|
+
* `pointerup` as it waits for `touchend`.
|
|
31
35
|
*
|
|
32
36
|
* 2. **Momentum is not rest either.** iOS momentum runs on the UI thread and
|
|
33
37
|
* keeps going for a second or more after the finger is gone, and its scroll
|
|
@@ -41,7 +45,7 @@
|
|
|
41
45
|
* underneath, and the fresh scroll events start the next premature settle —
|
|
42
46
|
* each one landing a row further along, which is why the month climbed.
|
|
43
47
|
*
|
|
44
|
-
* So: the settle waits for the touch to end, and then for a quiet period
|
|
48
|
+
* So: the settle waits for the touch or the mouse drag to end, and then for a quiet period
|
|
45
49
|
* measured from the LAST scroll event, which is what makes it outlast
|
|
46
50
|
* momentum however long it runs. {@link useScrollSettle} also reports whether
|
|
47
51
|
* the scroller is at rest, so a caller can refuse to reposition one that is
|
|
@@ -67,8 +71,10 @@ export const SCROLL_QUIET_MS = 220;
|
|
|
67
71
|
* @param ref - the scroll container
|
|
68
72
|
* @param onSettle - called with the settled element; may change every render
|
|
69
73
|
* @param isEnabled - skip attaching while false (e.g. a hidden panel)
|
|
74
|
+
* @param isHeldRef - true while a mouse drag holds the scroller
|
|
75
|
+
* (usePointerDragScroll's `isDraggingRef`): not rest, however quiet
|
|
70
76
|
*/
|
|
71
|
-
export function useScrollSettle(ref, onSettle, isEnabled = true) {
|
|
77
|
+
export function useScrollSettle(ref, onSettle, isEnabled = true, isHeldRef) {
|
|
72
78
|
// The callback closes over render-fresh values (the option list, the current
|
|
73
79
|
// value); keeping it in a ref means the listeners attach once instead of
|
|
74
80
|
// re-attaching mid-scroll, which would drop an in-flight settle.
|
|
@@ -84,10 +90,17 @@ export function useScrollSettle(ref, onSettle, isEnabled = true) {
|
|
|
84
90
|
let timer;
|
|
85
91
|
let hasSettled = false;
|
|
86
92
|
let isTouching = false;
|
|
93
|
+
// Whether a mouse drag held this gesture, so its release re-arms the
|
|
94
|
+
// settle; a plain click does not.
|
|
95
|
+
let wasHeld = false;
|
|
87
96
|
const settle = () => {
|
|
88
|
-
// A finger still on the glass
|
|
89
|
-
// has gone. The release re-arms
|
|
90
|
-
|
|
97
|
+
// A finger still on the glass, or a mouse button still holding a drag,
|
|
98
|
+
// is not rest, however quiet the scroller has gone. The release re-arms
|
|
99
|
+
// this.
|
|
100
|
+
if (isHeldRef?.current) {
|
|
101
|
+
wasHeld = true;
|
|
102
|
+
}
|
|
103
|
+
if (hasSettled || isTouching || isHeldRef?.current) {
|
|
91
104
|
return;
|
|
92
105
|
}
|
|
93
106
|
hasSettled = true;
|
|
@@ -106,6 +119,9 @@ export function useScrollSettle(ref, onSettle, isEnabled = true) {
|
|
|
106
119
|
// the last of it however long it runs.
|
|
107
120
|
hasSettled = false;
|
|
108
121
|
isAtRestRef.current = false;
|
|
122
|
+
if (isHeldRef?.current) {
|
|
123
|
+
wasHeld = true;
|
|
124
|
+
}
|
|
109
125
|
arm();
|
|
110
126
|
};
|
|
111
127
|
const onTouchStart = () => {
|
|
@@ -121,6 +137,15 @@ export function useScrollSettle(ref, onSettle, isEnabled = true) {
|
|
|
121
137
|
// produces no further scroll events at all.
|
|
122
138
|
arm();
|
|
123
139
|
};
|
|
140
|
+
const onPointerEnd = () => {
|
|
141
|
+
// The drag's release: its glide to the nearest row re-arms this on its
|
|
142
|
+
// own, and the timer covers a release already on a row, which scrolls
|
|
143
|
+
// no further.
|
|
144
|
+
if (wasHeld) {
|
|
145
|
+
wasHeld = false;
|
|
146
|
+
arm();
|
|
147
|
+
}
|
|
148
|
+
};
|
|
124
149
|
element.addEventListener('scroll', onScroll, {
|
|
125
150
|
passive: true
|
|
126
151
|
});
|
|
@@ -134,6 +159,8 @@ export function useScrollSettle(ref, onSettle, isEnabled = true) {
|
|
|
134
159
|
element.addEventListener('touchcancel', onTouchEnd, {
|
|
135
160
|
passive: true
|
|
136
161
|
});
|
|
162
|
+
element.addEventListener('pointerup', onPointerEnd);
|
|
163
|
+
element.addEventListener('pointercancel', onPointerEnd);
|
|
137
164
|
return () => {
|
|
138
165
|
clearTimeout(timer);
|
|
139
166
|
element.removeEventListener('scroll', onScroll);
|
|
@@ -141,8 +168,10 @@ export function useScrollSettle(ref, onSettle, isEnabled = true) {
|
|
|
141
168
|
element.removeEventListener('touchstart', onTouchStart);
|
|
142
169
|
element.removeEventListener('touchend', onTouchEnd);
|
|
143
170
|
element.removeEventListener('touchcancel', onTouchEnd);
|
|
171
|
+
element.removeEventListener('pointerup', onPointerEnd);
|
|
172
|
+
element.removeEventListener('pointercancel', onPointerEnd);
|
|
144
173
|
};
|
|
145
|
-
}, [ref, isEnabled]);
|
|
174
|
+
}, [ref, isEnabled, isHeldRef]);
|
|
146
175
|
return {
|
|
147
176
|
isAtRestRef
|
|
148
177
|
};
|
package/dist/Item/Item.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/Item/Item.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAUf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/Item/Item.tsx"],"names":[],"mappings":"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"}
|
package/dist/Item/Item.js
CHANGED
|
@@ -34,6 +34,7 @@ import "../theme/tokens.stylex.js";
|
|
|
34
34
|
import { colorVars, radiusVars, spacingVars, durationVars, easeVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
35
35
|
import { isRenderable } from "../utils/isRenderable.js";
|
|
36
36
|
import { mergeProps } from "../utils/mergeProps.js";
|
|
37
|
+
import { useFocusAcrossSwap } from "../utils/useFocusAcrossSwap.js";
|
|
37
38
|
import { ItemDescriptionContext } from "./ItemDescriptionContext.js";
|
|
38
39
|
import { ItemMarkerColumnsContext } from "./ItemMarkerColumnsContext.js";
|
|
39
40
|
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
@@ -274,6 +275,13 @@ export function Item({
|
|
|
274
275
|
const pressable = usePressFeedback();
|
|
275
276
|
const columnMarker = use(ItemMarkerColumnsContext);
|
|
276
277
|
const LinkComponent = useLinkComponent();
|
|
278
|
+
// A disabled row's anchor has no destination, so no activation path (a
|
|
279
|
+
// screen reader's click, Enter, a link context menu) can navigate
|
|
280
|
+
// (spec:AST-085 FR2). Like a disabled Link, it keeps the link role and skips
|
|
281
|
+
// the router link component, which may require a live href. The element type
|
|
282
|
+
// then changes with `isDisabled`, so focus follows the swap (FR4).
|
|
283
|
+
const RowAnchor = isDisabled ? 'a' : LinkComponent;
|
|
284
|
+
const anchorRef = useFocusAcrossSwap();
|
|
277
285
|
|
|
278
286
|
// Delegation mode: the row is an enlarged click/tap target for a nested
|
|
279
287
|
// control (e.g. a checkbox) that owns the keyboard access and action. The
|
|
@@ -399,12 +407,17 @@ export function Item({
|
|
|
399
407
|
}
|
|
400
408
|
}[!!isInline << 1 | !!isDisabled << 0],
|
|
401
409
|
children: labelAndDescription
|
|
402
|
-
}) : href != null && !isLinkRoot ? /*#__PURE__*/_jsx(
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
410
|
+
}) : href != null && !isLinkRoot ? /*#__PURE__*/_jsx(RowAnchor, {
|
|
411
|
+
ref: anchorRef,
|
|
412
|
+
...(isDisabled ? {
|
|
413
|
+
role: 'link',
|
|
414
|
+
'aria-disabled': true,
|
|
415
|
+
tabIndex: -1
|
|
416
|
+
} : {
|
|
417
|
+
href,
|
|
418
|
+
target,
|
|
419
|
+
rel
|
|
420
|
+
}),
|
|
408
421
|
...{
|
|
409
422
|
0: {
|
|
410
423
|
className: "xmper1u x16khyan x1heor9g x78zum5 xdt5ytf x98rzlu xeuugli x1yc453h x1hl2dhg x1a2a7pz"
|
package/dist/Link/Link.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/Link/Link.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAc5C,OAAO,KAAK,EACV,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,UAAU,EACV,WAAW,EACZ,MAAM,gBAAgB,CAAC;AAExB,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/Link/Link.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAc5C,OAAO,KAAK,EACV,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,UAAU,EACV,WAAW,EACZ,MAAM,gBAAgB,CAAC;AAExB,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,SAAS,CAAC;AA8G/C,MAAM,WAAW,SAAU,SAAQ,SAAS,CAC1C,iBAAiB,GAAG,iBAAiB,CACtC;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACvD;;;;;OAKG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,2BAA2B,CAAC;IACnD;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACzE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,IAAI,CAAC,EACnB,EAAE,EACF,KAAK,EACL,IAAI,EACJ,YAAoB,EACpB,UAAkB,EAClB,cAAsB,EACtB,WAAW,EAAE,oBAAoB,EACjC,MAAM,EAAE,eAAe,EACvB,OAAO,EACP,OAAO,EACP,YAAoB,EACpB,IAAa,EACb,IAAI,EACJ,MAAM,EACN,KAAgB,EAChB,OAAkB,EAClB,QAAY,EACZ,QAAQ,EACR,GAAG,EAAE,YAAY,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BAuJX;yBAhLe,IAAI"}
|
package/dist/Link/Link.js
CHANGED
|
@@ -53,6 +53,11 @@ const styles = {
|
|
|
53
53
|
kAMwcw: "xlr8y92",
|
|
54
54
|
$$css: true
|
|
55
55
|
},
|
|
56
|
+
truncating: {
|
|
57
|
+
ks0D6T: "x193iq5w",
|
|
58
|
+
k7Eaqz: "xeuugli",
|
|
59
|
+
$$css: true
|
|
60
|
+
},
|
|
56
61
|
buttonReset: {
|
|
57
62
|
kWkggS: "xjbqb8w",
|
|
58
63
|
ksu8eU: "xng3xce",
|
|
@@ -206,7 +211,7 @@ export function Link({
|
|
|
206
211
|
}), focusOutlineProps.focusVisible(styles.base, styles.buttonReset, linkColorStyles[color],
|
|
207
212
|
// The system's pressed overlay behind the text; the hover stays the
|
|
208
213
|
// colour change above, so a press is the one background it paints.
|
|
209
|
-
!isDisabled && interactionOverlayStyles.pressedBackgroundColor, hasUnderline && styles.hasUnderline, isStandalone && styles.standalone, isDisabled && styles.disabled, xstyle), className, style),
|
|
214
|
+
!isDisabled && interactionOverlayStyles.pressedBackgroundColor, hasUnderline && styles.hasUnderline, isStandalone && styles.standalone, isDisabled && styles.disabled, maxLines > 0 && styles.truncating, xstyle), className, style),
|
|
210
215
|
...props,
|
|
211
216
|
...(isDisabled ? disabledInteractionProps(props.onKeyDown) : null),
|
|
212
217
|
children: sharedContent
|
|
@@ -226,7 +231,7 @@ export function Link({
|
|
|
226
231
|
tabIndex: 0,
|
|
227
232
|
...mergeProps(themeProps('link', {
|
|
228
233
|
color
|
|
229
|
-
}), focusOutlineProps.focusVisible(styles.base, linkColorStyles[color], hasUnderline && styles.hasUnderline, isStandalone && styles.standalone, styles.disabled, xstyle), className, style),
|
|
234
|
+
}), focusOutlineProps.focusVisible(styles.base, linkColorStyles[color], hasUnderline && styles.hasUnderline, isStandalone && styles.standalone, styles.disabled, maxLines > 0 && styles.truncating, xstyle), className, style),
|
|
230
235
|
...props,
|
|
231
236
|
...disabledInteractionProps(props.onKeyDown),
|
|
232
237
|
children: sharedContent
|
|
@@ -244,7 +249,7 @@ export function Link({
|
|
|
244
249
|
tabIndex: isDisabled ? -1 : undefined,
|
|
245
250
|
...mergeProps(themeProps('link', {
|
|
246
251
|
color
|
|
247
|
-
}), focusOutlineProps.focusVisible(styles.base, linkColorStyles[color], !isDisabled && interactionOverlayStyles.pressedBackgroundColor, hasUnderline && styles.hasUnderline, isStandalone && styles.standalone, isDisabled && styles.disabled, xstyle), className, style),
|
|
252
|
+
}), focusOutlineProps.focusVisible(styles.base, linkColorStyles[color], !isDisabled && interactionOverlayStyles.pressedBackgroundColor, hasUnderline && styles.hasUnderline, isStandalone && styles.standalone, isDisabled && styles.disabled, maxLines > 0 && styles.truncating, xstyle), className, style),
|
|
248
253
|
...props,
|
|
249
254
|
children: sharedContent
|
|
250
255
|
});
|
|
@@ -16,7 +16,7 @@ import * as fs from 'node:fs';
|
|
|
16
16
|
import * as path from 'node:path';
|
|
17
17
|
import { expect, test } from '@playwright/test';
|
|
18
18
|
import { DEFAULT_STORYBOOK_DIR, serveStorybook } from '@astryxdesign/a11y-spec/storybook';
|
|
19
|
-
const STORY = 'core-markdown
|
|
19
|
+
const STORY = 'core-markdown--heading-links';
|
|
20
20
|
const OUTPUT = path.resolve('test-results/markdown-heading-links');
|
|
21
21
|
const GEOMETRY_TOLERANCE_PX = 1;
|
|
22
22
|
let storybook;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavHeadingMenuItem.d.ts","sourceRoot":"","sources":["../../src/NavMenu/NavHeadingMenuItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"NavHeadingMenuItem.d.ts","sourceRoot":"","sources":["../../src/NavMenu/NavHeadingMenuItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAWtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA+D5C,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CACnD,SAAS,CAAC,WAAW,CAAC,EACtB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B,wCAAwC;IACxC,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,0BAA0B;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,GAAG,EACH,IAAI,EACJ,KAAK,EACL,WAAW,EACX,IAAI,EACJ,OAAO,EACP,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,SAAS,EACb,EAAE,uBAAuB,qBAqEzB;yBAlFe,kBAAkB"}
|
|
@@ -11,13 +11,14 @@
|
|
|
11
11
|
* SYNC: When modified, update:
|
|
12
12
|
* - /packages/core/src/NavMenu/index.ts
|
|
13
13
|
*/
|
|
14
|
-
import React, { useCallback
|
|
14
|
+
import React, { useCallback } from 'react';
|
|
15
15
|
import * as stylex from '@stylexjs/stylex';
|
|
16
16
|
import { renderIconSlot } from "../Icon/index.js";
|
|
17
17
|
import { Text } from "../Text/index.js";
|
|
18
18
|
import "../theme/tokens.stylex.js";
|
|
19
19
|
import { colorVars, spacingVars, typographyVars, typeScaleVars, radiusVars } from "../theme/tokens.stylex.js";
|
|
20
|
-
import { mergeProps
|
|
20
|
+
import { mergeProps } from "../utils/mergeProps.js";
|
|
21
|
+
import { useFocusAcrossSwap } from "../utils/useFocusAcrossSwap.js";
|
|
21
22
|
import { useNavHeadingMenuContext } from "./NavMenuContext.js";
|
|
22
23
|
import { useLinkComponent } from "../Link/useLinkComponent.js";
|
|
23
24
|
import { themeProps } from "../utils/themeProps.js";
|
|
@@ -114,33 +115,8 @@ export function NavHeadingMenuItem({
|
|
|
114
115
|
const Element = href ? isDisabled ? 'a' : LinkComponent : 'div';
|
|
115
116
|
|
|
116
117
|
// The element type above changes when `isDisabled` flips, so React replaces
|
|
117
|
-
// the row
|
|
118
|
-
|
|
119
|
-
// `activeElement` is still readable there. Only a different node replacing a
|
|
120
|
-
// removed one takes focus, and only if focus has fallen to the page: React
|
|
121
|
-
// also detaches and re-attaches the same node (for example when an <Activity>
|
|
122
|
-
// boundary hides and reveals the row), and neither case may pull focus back
|
|
123
|
-
// after the person has moved elsewhere.
|
|
124
|
-
const focusedNodeRef = useRef(null);
|
|
125
|
-
const itemRef = useCallback(node => {
|
|
126
|
-
if (node === null) {
|
|
127
|
-
return;
|
|
128
|
-
}
|
|
129
|
-
const outgoing = focusedNodeRef.current;
|
|
130
|
-
focusedNodeRef.current = null;
|
|
131
|
-
// Focus only follows the swap when it has fallen to the page. If the
|
|
132
|
-
// person moved focus elsewhere in the meantime (for example while an
|
|
133
|
-
// <Activity> boundary kept the row hidden), leave it alone.
|
|
134
|
-
const focusFell = document.activeElement === null || document.activeElement === document.body;
|
|
135
|
-
if (outgoing !== null && outgoing !== node && !outgoing.isConnected && focusFell) {
|
|
136
|
-
node.focus();
|
|
137
|
-
}
|
|
138
|
-
const release = mergeRefs(ref)(node);
|
|
139
|
-
return () => {
|
|
140
|
-
focusedNodeRef.current = document.activeElement === node ? node : null;
|
|
141
|
-
release?.();
|
|
142
|
-
};
|
|
143
|
-
}, [ref]);
|
|
118
|
+
// the row; focus follows to the replacement (spec:AST-085 FR4).
|
|
119
|
+
const itemRef = useFocusAcrossSwap(ref);
|
|
144
120
|
return /*#__PURE__*/_jsxs(Element, {
|
|
145
121
|
...restProps,
|
|
146
122
|
ref: itemRef,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../src/NumberInput/NumberInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,
|
|
1
|
+
{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../src/NumberInput/NumberInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAQL,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAS3C,OAAO,EAGL,KAAK,WAAW,EAKhB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAyJ5D,QAAA,MAAM,UAAU;;;;;;;;;;EAUd,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,UAAU,CAAC;AAMtD,YAAY,EACV,WAAW,IAAI,iBAAiB,EAChC,eAAe,IAAI,qBAAqB,GACzC,MAAM,UAAU,CAAC;AAGlB,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAM9C,UAAU,oBAAqB,SAAQ,IAAI,CACzC,mBAAmB,EACnB,UAAU,GAAG,cAAc,CAC5B;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;;OAIG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IAEvB;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACjC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACpD;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC1D;AAED;;;GAGG;AACH,KAAK,4BAA4B,GAAG,oBAAoB,GAAG;IACzD,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,KAAK,yBAAyB,GAAG,oBAAoB,GAAG;IACtD;;;;;;OAMG;IACH,QAAQ,EAAE,IAAI,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAC1B,4BAA4B,GAAG,yBAAyB,CAAC;AAsF3D;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAU,EAAE,cAAsB,EAClC,UAAkB,EAClB,eAAe,EACf,SAAS,EACT,SAAS,EACT,MAAM,EACN,aAA0B,EAC1B,IAAI,EAAE,QAAQ,EACd,QAAQ,EACR,KAAK,EACL,WAAW,EACX,YAAY,EACZ,YAAoB,EACpB,QAAQ,EACR,YAAY,EACZ,GAAG,EACH,GAAG,EACH,IAAI,EACJ,WAAW,EACX,cAAqB,EACrB,iBAAyB,EACzB,KAAK,EACL,aAAqB,EACrB,OAAO,EACP,MAAM,EACN,QAAQ,EACR,OAAO,EACP,SAAS,EACT,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,EAAE,EAAE,MAAM,EACV,kBAAkB,EAAE,mBAAmB,EACvC,iBAAiB,EAAE,kBAAkB,EACrC,GAAG,SAAS,EACb,EAAE,gBAAgB,+BA2kBlB;yBAznBe,WAAW"}
|