@astryxdesign/core 0.7.7-canary.bf14580 → 0.7.7-canary.c19ca12
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/AlertDialog/AlertDialog.d.ts +4 -1
- package/dist/AlertDialog/AlertDialog.d.ts.map +1 -1
- package/dist/AlertDialog/AlertDialog.js +36 -6
- package/dist/BottomSheet/BottomSheet.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheet.js +76 -6
- package/dist/BottomSheet/BottomSheetPanel.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheetPanel.js +23 -4
- package/dist/BottomSheet/bottomSheetStack.d.ts.map +1 -1
- package/dist/BottomSheet/bottomSheetStack.js +5 -4
- package/dist/BottomSheet/useSheetGestures.d.ts.map +1 -1
- package/dist/BottomSheet/useSheetGestures.js +3 -1
- package/dist/Button/Button.d.ts.map +1 -1
- package/dist/Button/Button.js +47 -3
- package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/CheckboxInput/CheckboxInput.js +13 -2
- package/dist/ComplexSelector/ComplexSelector.d.ts +4 -1
- package/dist/ComplexSelector/ComplexSelector.d.ts.map +1 -1
- package/dist/ComplexSelector/ComplexSelector.js +14 -4
- package/dist/ContextMenu/ContextMenu.js +2 -2
- package/dist/DateInput/MonthScroller.d.ts.map +1 -1
- package/dist/DateInput/MonthScroller.js +13 -27
- package/dist/DateInput/Wheel.d.ts.map +1 -1
- package/dist/DateInput/Wheel.js +22 -41
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +7 -31
- package/dist/Field/Field.js +2 -2
- package/dist/HoverCard/HoverCard.d.ts +4 -3
- package/dist/HoverCard/HoverCard.d.ts.map +1 -1
- package/dist/HoverCard/HoverCard.js +27 -2
- package/dist/HoverCard/useHoverCard.d.ts +5 -4
- package/dist/HoverCard/useHoverCard.d.ts.map +1 -1
- package/dist/HoverCard/useHoverCard.js +17 -31
- package/dist/Icon/Icon.d.ts +5 -1
- package/dist/Icon/Icon.d.ts.map +1 -1
- package/dist/Icon/Icon.js +5 -2
- package/dist/Layer/layerAnimations.stylex.d.ts +7 -8
- package/dist/Layer/layerAnimations.stylex.d.ts.map +1 -1
- package/dist/Layer/layerAnimations.stylex.js +25 -20
- package/dist/Layer/usePressPin.d.ts +17 -5
- package/dist/Layer/usePressPin.d.ts.map +1 -1
- package/dist/Layer/usePressPin.js +62 -12
- package/dist/Lightbox/Lightbox.d.ts.map +1 -1
- package/dist/Lightbox/Lightbox.js +18 -0
- package/dist/PowerSearch/PowerSearch.d.ts +36 -3
- package/dist/PowerSearch/PowerSearch.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearch.js +522 -269
- package/dist/PowerSearch/PowerSearchBottomSheet.d.ts +100 -0
- package/dist/PowerSearch/PowerSearchBottomSheet.d.ts.map +1 -0
- package/dist/PowerSearch/PowerSearchBottomSheet.js +1913 -0
- package/dist/PowerSearch/PowerSearchEditPopover.d.ts +32 -1
- package/dist/PowerSearch/PowerSearchEditPopover.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearchEditPopover.js +17 -6
- package/dist/PowerSearch/PowerSearchValueEditor.d.ts +38 -3
- package/dist/PowerSearch/PowerSearchValueEditor.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearchValueEditor.js +170 -61
- package/dist/PowerSearch/formatFilterValue.d.ts +7 -0
- package/dist/PowerSearch/formatFilterValue.d.ts.map +1 -1
- package/dist/PowerSearch/formatFilterValue.js +11 -1
- package/dist/PowerSearch/formatTokenValue.d.ts +28 -0
- package/dist/PowerSearch/formatTokenValue.d.ts.map +1 -0
- package/dist/PowerSearch/formatTokenValue.js +160 -0
- package/dist/PowerSearch/powerSearchSheetUtils.d.ts +65 -0
- package/dist/PowerSearch/powerSearchSheetUtils.d.ts.map +1 -0
- package/dist/PowerSearch/powerSearchSheetUtils.js +168 -0
- package/dist/RadioList/RadioList.d.ts.map +1 -1
- package/dist/RadioList/RadioList.js +3 -2
- package/dist/RadioList/RadioListItem.d.ts +1 -1
- package/dist/RadioList/RadioListItem.d.ts.map +1 -1
- package/dist/RadioList/RadioListItem.js +5 -3
- package/dist/SegmentedControl/useSegmentedSelectionMotion.d.ts.map +1 -1
- package/dist/SegmentedControl/useSegmentedSelectionMotion.js +3 -3
- package/dist/Slider/sliderTouchController.js +2 -2
- package/dist/Spinner/Spinner.d.ts +1 -1
- package/dist/Spinner/Spinner.d.ts.map +1 -1
- package/dist/Spinner/Spinner.js +60 -58
- package/dist/Switch/useSwitchTouch.js +4 -4
- package/dist/Table/BaseTable.d.ts.map +1 -1
- package/dist/Table/BaseTable.js +29 -8
- package/dist/TextInput/TextInput.d.ts +2 -2
- package/dist/TextInput/TextInput.d.ts.map +1 -1
- package/dist/TextInput/TextInput.js +10 -7
- package/dist/Toast/Toast.d.ts +11 -1
- package/dist/Toast/Toast.d.ts.map +1 -1
- package/dist/Toast/Toast.js +25 -15
- package/dist/Toast/ToastViewport.d.ts.map +1 -1
- package/dist/Toast/ToastViewport.js +94 -34
- package/dist/Toast/types.d.ts +9 -3
- package/dist/Toast/types.d.ts.map +1 -1
- package/dist/Token/Token.d.ts +2 -2
- package/dist/Token/Token.d.ts.map +1 -1
- package/dist/Token/Token.js +12 -4
- package/dist/Token/TokenNamingContext.d.ts +14 -0
- package/dist/Token/TokenNamingContext.d.ts.map +1 -0
- package/dist/Token/TokenNamingContext.js +23 -0
- package/dist/Tooltip/useTooltip.d.ts +19 -1
- package/dist/Tooltip/useTooltip.d.ts.map +1 -1
- package/dist/Tooltip/useTooltip.js +34 -53
- package/dist/Typeahead/TypeaheadItem.d.ts +2 -1
- package/dist/Typeahead/TypeaheadItem.d.ts.map +1 -1
- package/dist/animator/createAnimator.d.ts +98 -0
- package/dist/animator/createAnimator.d.ts.map +1 -0
- package/dist/animator/createAnimator.js +259 -0
- package/dist/astryx.css +22 -6
- package/dist/gestures/GestureHost.d.ts +27 -1
- package/dist/gestures/GestureHost.d.ts.map +1 -1
- package/dist/gestures/GestureHost.js +90 -8
- package/dist/gestures/PressTracker.d.ts.map +1 -1
- package/dist/gestures/PressTracker.js +4 -3
- package/dist/hooks/actionGroupTracker.d.ts +4 -1
- package/dist/hooks/actionGroupTracker.d.ts.map +1 -1
- package/dist/hooks/actionGroupTracker.js +13 -3
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +1 -0
- package/dist/hooks/pressGroupContext.d.ts +6 -0
- package/dist/hooks/pressGroupContext.d.ts.map +1 -0
- package/dist/hooks/pressGroupContext.js +20 -0
- package/dist/hooks/useActionGroupTracking.d.ts +53 -0
- package/dist/hooks/useActionGroupTracking.d.ts.map +1 -0
- package/dist/hooks/useActionGroupTracking.js +174 -0
- package/dist/hooks/useAnimator.d.ts +41 -0
- package/dist/hooks/useAnimator.d.ts.map +1 -0
- package/dist/hooks/useAnimator.js +70 -0
- package/dist/hooks/useAttachment.d.ts +1 -1
- package/dist/hooks/useAttachment.js +1 -1
- package/dist/hooks/useInputStatusIcon.d.ts +1 -1
- package/dist/hooks/useInputStatusIcon.d.ts.map +1 -1
- package/dist/hooks/useInputStatusIcon.js +2 -2
- package/dist/hooks/useLongPress.d.ts +6 -2
- package/dist/hooks/useLongPress.d.ts.map +1 -1
- package/dist/hooks/useLongPress.js +95 -15
- package/dist/hooks/useMenuPress.d.ts.map +1 -1
- package/dist/hooks/useMenuPress.js +4 -2
- package/dist/i18n/generated-english/PowerSearch/PowerSearchBottomSheet.generated.d.ts +8 -0
- package/dist/i18n/generated-english/PowerSearch/PowerSearchBottomSheet.generated.d.ts.map +1 -0
- package/dist/i18n/generated-english/PowerSearch/PowerSearchBottomSheet.generated.js +42 -0
- package/dist/i18n/generated-english/PowerSearch/PowerSearchValueEditor.generated.d.ts.map +1 -1
- package/dist/i18n/generated-english/PowerSearch/PowerSearchValueEditor.generated.js +6 -0
- package/dist/i18n/generated-english/PowerSearch/formatTokenValue.generated.d.ts +8 -0
- package/dist/i18n/generated-english/PowerSearch/formatTokenValue.generated.d.ts.map +1 -0
- package/dist/i18n/generated-english/PowerSearch/formatTokenValue.generated.js +14 -0
- package/dist/i18n/generated-locales/en.generated.d.ts.map +1 -1
- package/dist/i18n/generated-locales/en.generated.js +30 -0
- package/dist/i18n/generated-locales/pseudo.generated.d.ts.map +1 -1
- package/dist/i18n/generated-locales/pseudo.generated.js +30 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4 -0
- package/dist/internal/indicatorPress.stylex.d.ts +20 -0
- package/dist/internal/indicatorPress.stylex.d.ts.map +1 -0
- package/dist/internal/indicatorPress.stylex.js +26 -0
- package/dist/motion/animator.d.ts +14 -14
- package/dist/motion/animator.d.ts.map +1 -1
- package/dist/motion/animator.js +41 -18
- package/dist/motion/reducedMotion.d.ts +24 -0
- package/dist/motion/reducedMotion.d.ts.map +1 -1
- package/dist/motion/reducedMotion.js +78 -1
- package/dist/motion/uikit/alert.d.ts +41 -0
- package/dist/motion/uikit/alert.d.ts.map +1 -0
- package/dist/motion/uikit/alert.js +43 -0
- package/dist/privateAttributes/pressGroupItem.stylex.d.ts +15 -0
- package/dist/privateAttributes/pressGroupItem.stylex.d.ts.map +1 -0
- package/dist/privateAttributes/pressGroupItem.stylex.js +23 -0
- package/dist/utils/clickGuard.d.ts +8 -1
- package/dist/utils/clickGuard.d.ts.map +1 -1
- package/dist/utils/clickGuard.js +24 -1
- package/dist/utils/dateParser.d.ts.map +1 -1
- package/dist/utils/dateParser.js +12 -0
- package/dist/utils/focusReturn.d.ts +15 -0
- package/dist/utils/focusReturn.d.ts.map +1 -1
- package/dist/utils/focusReturn.js +28 -0
- package/dist/utils/interactionOverlay.stylex.d.ts +3 -2
- package/dist/utils/interactionOverlay.stylex.d.ts.map +1 -1
- package/dist/utils/interactionOverlay.stylex.js +3 -2
- package/dist/utils/pressFeedback.d.ts.map +1 -1
- package/dist/utils/pressFeedback.js +19 -6
- package/dist/utils/triggerFocus.d.ts +36 -0
- package/dist/utils/triggerFocus.d.ts.map +1 -0
- package/dist/utils/triggerFocus.js +65 -0
- package/locales/en.json +120 -0
- package/locales/pseudo.json +90 -0
- package/package.json +9 -4
- package/src/AlertDialog/AlertDialog.doc.mjs +2 -2
- package/src/AlertDialog/AlertDialog.tsx +37 -5
- package/src/BottomSheet/BottomSheet.tsx +85 -5
- package/src/BottomSheet/BottomSheetPanel.tsx +40 -5
- package/src/BottomSheet/bottomSheetStack.ts +8 -4
- package/src/BottomSheet/useSheetGestures.ts +3 -1
- package/src/Button/Button.tsx +63 -5
- package/src/CheckboxInput/CheckboxInput.doc.mjs +18 -0
- package/src/CheckboxInput/CheckboxInput.tsx +36 -9
- package/src/ComplexSelector/ComplexSelector.tsx +20 -5
- package/src/ContextMenu/ContextMenu.tsx +2 -2
- package/src/DateInput/MonthScroller.tsx +18 -22
- package/src/DateInput/Wheel.tsx +30 -32
- package/src/Dialog/Dialog.tsx +10 -31
- package/src/Field/Field.tsx +2 -2
- package/src/HoverCard/HoverCard.doc.mjs +4 -2
- package/src/HoverCard/HoverCard.tsx +35 -4
- package/src/HoverCard/useHoverCard.doc.mjs +178 -36
- package/src/HoverCard/useHoverCard.tsx +46 -52
- package/src/Icon/Icon.doc.mjs +49 -8
- package/src/Icon/Icon.tsx +15 -7
- package/src/Layer/layerAnimations.stylex.ts +24 -16
- package/src/Layer/usePressPin.ts +81 -15
- package/src/Lightbox/Lightbox.tsx +18 -0
- package/src/PowerSearch/PowerSearch.doc.mjs +54 -5
- package/src/PowerSearch/PowerSearch.tsx +734 -288
- package/src/PowerSearch/PowerSearchBottomSheet.tsx +2515 -0
- package/src/PowerSearch/PowerSearchEditPopover.tsx +28 -6
- package/src/PowerSearch/PowerSearchValueEditor.tsx +203 -38
- package/src/PowerSearch/formatFilterValue.ts +18 -1
- package/src/PowerSearch/formatTokenValue.ts +215 -0
- package/src/PowerSearch/powerSearchSheetUtils.ts +224 -0
- package/src/RadioList/RadioList.tsx +3 -2
- package/src/RadioList/RadioListItem.tsx +5 -3
- package/src/SegmentedControl/useSegmentedSelectionMotion.ts +6 -3
- package/src/Slider/sliderTouchController.ts +2 -2
- package/src/Spinner/Spinner.tsx +77 -63
- package/src/Switch/useSwitchTouch.ts +4 -4
- package/src/Table/BaseTable.tsx +46 -12
- package/src/TextInput/TextInput.tsx +11 -10
- package/src/Toast/Toast.doc.mjs +4 -3
- package/src/Toast/Toast.tsx +52 -32
- package/src/Toast/ToastViewport.tsx +121 -35
- package/src/Toast/types.ts +9 -3
- package/src/Token/Token.tsx +13 -4
- package/src/Token/TokenNamingContext.ts +28 -0
- package/src/Tooltip/useTooltip.doc.mjs +24 -0
- package/src/Tooltip/useTooltip.tsx +61 -56
- package/src/Typeahead/TypeaheadItem.doc.mjs +6 -3
- package/src/Typeahead/TypeaheadItem.tsx +2 -1
- package/src/animator/createAnimator.doc.mjs +153 -0
- package/src/animator/createAnimator.ts +324 -0
- package/src/gestures/GestureHost.ts +105 -10
- package/src/gestures/PressTracker.ts +4 -3
- package/src/gestures/README.md +7 -1
- package/src/hooks/actionGroupTracker.ts +20 -5
- package/src/hooks/index.ts +2 -0
- package/src/hooks/pressGroupContext.ts +21 -0
- package/src/hooks/useActionGroupTracking.ts +224 -0
- package/src/hooks/useAnimator.doc.mjs +109 -0
- package/src/hooks/useAnimator.ts +67 -0
- package/src/hooks/useAttachment.ts +1 -1
- package/src/hooks/useInputStatusIcon.tsx +3 -2
- package/src/hooks/useLongPress.doc.mjs +2 -2
- package/src/hooks/useLongPress.ts +136 -15
- package/src/hooks/useMenuPress.ts +8 -2
- package/src/i18n/generated-english/PowerSearch/PowerSearchBottomSheet.generated.ts +43 -0
- package/src/i18n/generated-english/PowerSearch/PowerSearchValueEditor.generated.ts +6 -0
- package/src/i18n/generated-english/PowerSearch/formatTokenValue.generated.ts +15 -0
- package/src/i18n/generated-locales/en.generated.ts +41 -0
- package/src/i18n/generated-locales/pseudo.generated.ts +42 -0
- package/src/index.ts +13 -0
- package/src/internal/indicatorPress.stylex.ts +24 -0
- package/src/motion/README.md +8 -5
- package/src/motion/animator.ts +61 -29
- package/src/motion/reducedMotion.ts +79 -1
- package/src/motion/uikit/alert.ts +43 -0
- package/src/privateAttributes/pressGroupItem.stylex.ts +23 -0
- package/src/utils/clickGuard.ts +37 -1
- package/src/utils/dateParser.ts +16 -0
- package/src/utils/focusReturn.ts +30 -0
- package/src/utils/interactionOverlay.stylex.ts +3 -2
- package/src/utils/pressFeedback.ts +19 -6
- package/src/utils/triggerFocus.ts +80 -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;
|
|
1
|
+
{"version":3,"file":"ComplexSelector.d.ts","sourceRoot":"","sources":["../../src/ComplexSelector/ComplexSelector.tsx"],"names":[],"mappings":"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"}
|
|
@@ -20,6 +20,7 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
20
20
|
import { useFieldInputStyling } from "../Field/fieldParts.js";
|
|
21
21
|
import { useDevWarning } from "../hooks/useDevWarning.js";
|
|
22
22
|
import { mergeRefs } from "../utils/mergeRefs.js";
|
|
23
|
+
import { isFocusLost } from "../utils/focusReturn.js";
|
|
23
24
|
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
24
25
|
import { useBusyAnnouncement } from "../hooks/useBusyAnnouncement.js";
|
|
25
26
|
import { Field, inputWrapperStyles } from "../Field/index.js";
|
|
@@ -312,12 +313,20 @@ export function ComplexSelector({
|
|
|
312
313
|
const handlePopoverShow = useCallback(() => {
|
|
313
314
|
onOpenChange?.(true);
|
|
314
315
|
}, [onOpenChange]);
|
|
316
|
+
|
|
317
|
+
// The popup's content element, read when it closes.
|
|
318
|
+
const popupContentRef = useRef(null);
|
|
319
|
+
const hasCallerTrigger = renderTrigger != null;
|
|
315
320
|
const handlePopoverHide = useCallback(() => {
|
|
316
|
-
|
|
317
|
-
//
|
|
318
|
-
|
|
321
|
+
const trigger = triggerRef.current;
|
|
322
|
+
// A press that moved focus to another control keeps it there. A caller's
|
|
323
|
+
// control always gets focus back. Focus moves before the callback, so a
|
|
324
|
+
// consumer that moves it from the callback wins.
|
|
325
|
+
if (hasCallerTrigger || isFocusLost(popupContentRef.current, trigger?.ownerDocument)) {
|
|
326
|
+
trigger?.focus();
|
|
327
|
+
}
|
|
319
328
|
onOpenChange?.(false);
|
|
320
|
-
}, [onOpenChange]);
|
|
329
|
+
}, [hasCallerTrigger, onOpenChange]);
|
|
321
330
|
const popover = usePopover({
|
|
322
331
|
dialogLabel: label,
|
|
323
332
|
hasCloseButton: false,
|
|
@@ -326,6 +335,7 @@ export function ComplexSelector({
|
|
|
326
335
|
onShow: handlePopoverShow,
|
|
327
336
|
onHide: handlePopoverHide
|
|
328
337
|
});
|
|
338
|
+
popupContentRef.current = popover.contentRef.current;
|
|
329
339
|
const isOpen = popover.isOpen;
|
|
330
340
|
const handleTriggerClick = useCallback(() => {
|
|
331
341
|
if (isDisabled) {
|
|
@@ -528,11 +528,11 @@ export function ContextMenu({
|
|
|
528
528
|
onTouchMoveProp?.(event);
|
|
529
529
|
}, [handleLongPressTouchMove, onTouchMoveProp]);
|
|
530
530
|
const handleTriggerTouchEnd = useCallback(event => {
|
|
531
|
-
handleLongPressTouchEnd();
|
|
531
|
+
handleLongPressTouchEnd(event);
|
|
532
532
|
onTouchEndProp?.(event);
|
|
533
533
|
}, [handleLongPressTouchEnd, onTouchEndProp]);
|
|
534
534
|
const handleTriggerTouchCancel = useCallback(event => {
|
|
535
|
-
handleLongPressTouchCancel();
|
|
535
|
+
handleLongPressTouchCancel(event);
|
|
536
536
|
onTouchCancelProp?.(event);
|
|
537
537
|
}, [handleLongPressTouchCancel, onTouchCancelProp]);
|
|
538
538
|
const popoverXstyle = menuWidth ? styles.popoverCustomWidth(menuWidth) : styles.popover;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MonthScroller.d.ts","sourceRoot":"","sources":["../../src/DateInput/MonthScroller.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"MonthScroller.d.ts","sourceRoot":"","sources":["../../src/DateInput/MonthScroller.tsx"],"names":[],"mappings":"AAsDA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,aAAa,EAClB,KAAK,SAAS,EAOf,MAAM,UAAU,CAAC;AAqNlB,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,+BA0iBpB;yBArjBe,aAAa"}
|
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
* - /packages/core/src/DateInput/DateInputTouch.test.tsx
|
|
31
31
|
*/
|
|
32
32
|
import { useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
|
|
33
|
+
import { flushSync } from 'react-dom';
|
|
33
34
|
import * as stylex from '@stylexjs/stylex';
|
|
34
35
|
import { useCalendarDays } from "../Calendar/index.js";
|
|
35
36
|
import { useDirection, useLocale } from "../i18n/index.js";
|
|
@@ -38,7 +39,7 @@ import { colorVars, radiusVars, fontWeightVars, typeScaleVars, durationVars, bor
|
|
|
38
39
|
import { focusOutlineStyles } from "../utils/index.js";
|
|
39
40
|
import { plainDateFormatStandaloneMonthYear } from "../utils/plainDate.js";
|
|
40
41
|
import { plainDateAddDays, plainDateDayOfWeek, plainDateFormat, plainDateIsEqual, plainDateToISO, DATE_FORMAT_WITH_WEEKDAY } from "../utils/index.js";
|
|
41
|
-
import { reducedMotionFade } from "../motion/reducedMotion.js";
|
|
42
|
+
import { playReducedMotionDip, reducedMotionFade } from "../motion/reducedMotion.js";
|
|
42
43
|
import "./tokens.stylex.js";
|
|
43
44
|
import { dateInputTouchSizes, dateInputTouchGeometry } from "./tokens.stylex.js";
|
|
44
45
|
import { useOwnScrollGesture } from "./useOwnScrollGesture.js";
|
|
@@ -257,15 +258,10 @@ export function MonthScroller({
|
|
|
257
258
|
// second step or the unmount clears it.
|
|
258
259
|
const dipRef = useRef(null);
|
|
259
260
|
const stopDip = useCallback(() => {
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
window.clearTimeout(dip.timer);
|
|
263
|
-
dip.animation.cancel();
|
|
264
|
-
dipRef.current = null;
|
|
265
|
-
}
|
|
261
|
+
dipRef.current?.cancel();
|
|
262
|
+
dipRef.current = null;
|
|
266
263
|
}, []);
|
|
267
|
-
// Synchronizes with the dip's
|
|
268
|
-
// scroller.
|
|
264
|
+
// Synchronizes with the dip's animations: they do not outlive the scroller.
|
|
269
265
|
useEffect(() => stopDip, [stopDip]);
|
|
270
266
|
const scrollToMonth = useCallback((monthIndex, behavior = 'smooth') => {
|
|
271
267
|
// Every step replaces a running dip, whichever way it moves. Otherwise
|
|
@@ -324,24 +320,14 @@ export function MonthScroller({
|
|
|
324
320
|
land();
|
|
325
321
|
return;
|
|
326
322
|
}
|
|
327
|
-
// A
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
opacity: 1
|
|
336
|
-
}], {
|
|
337
|
-
duration: fade.duration,
|
|
338
|
-
easing: fade.easing
|
|
339
|
-
}),
|
|
340
|
-
timer: window.setTimeout(() => {
|
|
341
|
-
dipRef.current = null;
|
|
342
|
-
land();
|
|
343
|
-
}, fade.duration / 2)
|
|
344
|
-
};
|
|
323
|
+
// A newer step replaces this one: only its scroll lands.
|
|
324
|
+
dipRef.current = playReducedMotionDip(scroller, fade, () => {
|
|
325
|
+
dipRef.current = null;
|
|
326
|
+
// The fade-in starts as soon as this returns. So render now: the
|
|
327
|
+
// scroll lands in the layout effect, before the fade-in.
|
|
328
|
+
// eslint-disable-next-line @eslint-react/dom-no-flush-sync -- the month must change before the dip's fade-in starts
|
|
329
|
+
flushSync(land);
|
|
330
|
+
});
|
|
345
331
|
return;
|
|
346
332
|
}
|
|
347
333
|
steeredRowRef.current = row;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Wheel.d.ts","sourceRoot":"","sources":["../../src/DateInput/Wheel.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Wheel.d.ts","sourceRoot":"","sources":["../../src/DateInput/Wheel.tsx"],"names":[],"mappings":"AAwNA,MAAM,WAAW,WAAW;IAC1B,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB;IAChB,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,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;;;;;;;;;;;GAWG;AACH,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,aAAa,CAAC,WAAW,CAAC,EACnC,KAAK,EAAE,MAAM,EACb,WAAW,EAAE,MAAM,GAClB,MAAM,CAsBR;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAe,GAChB,EAAE,UAAU,+BA4UZ;yBAlVe,KAAK"}
|
package/dist/DateInput/Wheel.js
CHANGED
|
@@ -42,7 +42,7 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
42
42
|
import "../theme/tokens.stylex.js";
|
|
43
43
|
import { colorVars, radiusVars, fontWeightVars, typeScaleVars, spacingVars, durationVars } from "../theme/tokens.stylex.js";
|
|
44
44
|
import { focusOutlineStyles } from "../utils/index.js";
|
|
45
|
-
import { reducedMotionFade } from "../motion/reducedMotion.js";
|
|
45
|
+
import { playReducedMotionDip, reducedMotionFade } from "../motion/reducedMotion.js";
|
|
46
46
|
import "./tokens.stylex.js";
|
|
47
47
|
import { dateInputTouchSizes, dateInputTouchGeometry } from "./tokens.stylex.js";
|
|
48
48
|
import { useOwnScrollGesture } from "./useOwnScrollGesture.js";
|
|
@@ -163,18 +163,18 @@ export function Wheel({
|
|
|
163
163
|
// once on a fine one.
|
|
164
164
|
const lastPointerRef = useRef(null);
|
|
165
165
|
|
|
166
|
-
// A reduced-motion dip whose rows have not landed yet:
|
|
167
|
-
//
|
|
168
|
-
//
|
|
166
|
+
// A reduced-motion dip whose rows have not landed yet: the row they land
|
|
167
|
+
// on. While one is pending the rows stay put for it, so they never move at
|
|
168
|
+
// full opacity, and a further step retargets it.
|
|
169
169
|
const pendingFadeRef = useRef(null);
|
|
170
170
|
// The running dip, so a step during its fade-in starts the next one where
|
|
171
171
|
// the column is.
|
|
172
172
|
const dipRef = useRef(null);
|
|
173
|
+
// Synchronizes with the dip's animations: an unmounted wheel lands nothing.
|
|
173
174
|
useEffect(() => () => {
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
}
|
|
175
|
+
pendingFadeRef.current = null;
|
|
176
|
+
dipRef.current?.cancel();
|
|
177
|
+
dipRef.current = null;
|
|
178
178
|
}, []);
|
|
179
179
|
const scrollToIndex = useCallback((index, behavior, {
|
|
180
180
|
touchRelease = false
|
|
@@ -192,11 +192,10 @@ export function Wheel({
|
|
|
192
192
|
touchRelease
|
|
193
193
|
}) : null;
|
|
194
194
|
const pending = pendingFadeRef.current;
|
|
195
|
+
// A change that lands now replaces a pending landing. Its dip goes on
|
|
196
|
+
// and fades back in.
|
|
195
197
|
if (fadeTiming == null) {
|
|
196
|
-
|
|
197
|
-
window.clearTimeout(pending.timer);
|
|
198
|
-
pendingFadeRef.current = null;
|
|
199
|
-
}
|
|
198
|
+
pendingFadeRef.current = null;
|
|
200
199
|
scroller.scrollTo({
|
|
201
200
|
top,
|
|
202
201
|
behavior
|
|
@@ -204,10 +203,7 @@ export function Wheel({
|
|
|
204
203
|
return;
|
|
205
204
|
}
|
|
206
205
|
if (fadeTiming.duration === 0 || typeof scroller.animate !== 'function') {
|
|
207
|
-
|
|
208
|
-
window.clearTimeout(pending.timer);
|
|
209
|
-
pendingFadeRef.current = null;
|
|
210
|
-
}
|
|
206
|
+
pendingFadeRef.current = null;
|
|
211
207
|
scroller.scrollTo({
|
|
212
208
|
top,
|
|
213
209
|
behavior: 'auto'
|
|
@@ -219,39 +215,24 @@ export function Wheel({
|
|
|
219
215
|
pending.top = top;
|
|
220
216
|
return;
|
|
221
217
|
}
|
|
222
|
-
const {
|
|
223
|
-
duration,
|
|
224
|
-
easing
|
|
225
|
-
} = fadeTiming;
|
|
226
218
|
// A step during the last dip's fade-in starts the new dip at the
|
|
227
219
|
// column's current opacity, not at full opacity. A leaving element fades
|
|
228
220
|
// out from where it is.
|
|
229
221
|
const shown = Number.parseFloat(getComputedStyle(scroller).opacity);
|
|
230
222
|
dipRef.current?.cancel();
|
|
231
|
-
dipRef.current = scroller.animate([{
|
|
232
|
-
opacity: Number.isFinite(shown) ? shown : 1,
|
|
233
|
-
easing
|
|
234
|
-
}, {
|
|
235
|
-
opacity: 0,
|
|
236
|
-
easing
|
|
237
|
-
}, {
|
|
238
|
-
opacity: 1
|
|
239
|
-
}], {
|
|
240
|
-
duration,
|
|
241
|
-
easing: 'linear'
|
|
242
|
-
});
|
|
243
223
|
const landing = {
|
|
244
|
-
top
|
|
245
|
-
timer: 0
|
|
224
|
+
top
|
|
246
225
|
};
|
|
247
|
-
landing.timer = window.setTimeout(() => {
|
|
248
|
-
pendingFadeRef.current = null;
|
|
249
|
-
scroller.scrollTo({
|
|
250
|
-
top: landing.top,
|
|
251
|
-
behavior: 'auto'
|
|
252
|
-
});
|
|
253
|
-
}, duration / 2);
|
|
254
226
|
pendingFadeRef.current = landing;
|
|
227
|
+
dipRef.current = playReducedMotionDip(scroller, fadeTiming, () => {
|
|
228
|
+
if (pendingFadeRef.current === landing) {
|
|
229
|
+
pendingFadeRef.current = null;
|
|
230
|
+
scroller.scrollTo({
|
|
231
|
+
top: landing.top,
|
|
232
|
+
behavior: 'auto'
|
|
233
|
+
});
|
|
234
|
+
}
|
|
235
|
+
}, Number.isFinite(shown) ? shown : 1);
|
|
255
236
|
}, [itemBlockSize]);
|
|
256
237
|
|
|
257
238
|
// Commit on rest. A wheel that stops on a disabled row travels on to the
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6B5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAMhD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6B5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAMhD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;AAkC9C;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,gBAAgB,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzD,4EAA4E;AAC5E,UAAU,mBAAmB;IAC3B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;GAKG;AACH,MAAM,WAAW,cAAe,SAAQ,mBAAmB;IACzD,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,yEAAyE;IACzE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAuBD,2FAA2F;AAC3F,eAAO,MAAM,uCAAuC;;;;;;;;;;;CAW1C,CAAC;AAwLX;;;;;;;;;GASG;AACH,wBAAgB,4BAA4B,CAAC,QAAQ,EAAE,cAAc;;;;;EAUpE;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC;IAEpC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EAAE,UAAU,EAClB,QAAgB,EAChB,YAAY,EACZ,KAAW,EACX,SAAmB,EACnB,QAAQ,EACR,OAAoB,EACpB,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,sCAwZb;yBAxae,MAAM"}
|
package/dist/Dialog/Dialog.js
CHANGED
|
@@ -55,7 +55,7 @@ import { DialogContext } from "./DialogContext.js";
|
|
|
55
55
|
import { themeProps } from "../utils/themeProps.js";
|
|
56
56
|
import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
|
|
57
57
|
import { useInteractionModalityTracking } from "../utils/interactionModality.js";
|
|
58
|
-
import { focusForLastInput,
|
|
58
|
+
import { focusForLastInput, prepareFocusReturnOnRemoval } from "../utils/focusReturn.js";
|
|
59
59
|
import { ModalAnnounceProvider } from "../hooks/ModalAnnounceProvider.js";
|
|
60
60
|
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
61
61
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -461,39 +461,15 @@ export function Dialog({
|
|
|
461
461
|
}, [isOpen, isInline]);
|
|
462
462
|
|
|
463
463
|
// A dialog that unmounts while open (rendered only while open, or removed
|
|
464
|
-
// with the rest of a view) never runs the close branch above
|
|
465
|
-
//
|
|
466
|
-
// it, or dropped to the body by the removal, goes back to the opener.
|
|
464
|
+
// with the rest of a view) never runs the close branch above. Focus the
|
|
465
|
+
// removal lost goes back to the opener.
|
|
467
466
|
useEffect(() => {
|
|
468
|
-
|
|
467
|
+
const dialog = dialogRef.current;
|
|
468
|
+
if (isInline || dialog == null) {
|
|
469
469
|
return;
|
|
470
470
|
}
|
|
471
|
-
const
|
|
472
|
-
|
|
473
|
-
// element can no longer be found once the dialog is gone.
|
|
474
|
-
const host = dialog?.ownerDocument.defaultView?.frameElement ?? null;
|
|
475
|
-
return () => {
|
|
476
|
-
const trigger = triggerElementRef.current;
|
|
477
|
-
if (dialog == null || trigger == null) {
|
|
478
|
-
return;
|
|
479
|
-
}
|
|
480
|
-
// Checked once the commit has finished: StrictMode's simulated unmount
|
|
481
|
-
// leaves the dialog in the document, and only a real removal returns
|
|
482
|
-
// focus.
|
|
483
|
-
queueMicrotask(() => {
|
|
484
|
-
if (dialog.isConnected || !trigger.isConnected) {
|
|
485
|
-
return;
|
|
486
|
-
}
|
|
487
|
-
// isFocusLost reads the dialog's own document. For a dialog in an
|
|
488
|
-
// iframe, the document that hosts the frame must also have lost focus
|
|
489
|
-
// or keep it on that frame, wherever the opener is: a control the
|
|
490
|
-
// user pressed outside the frame to remove the dialog, or the frame
|
|
491
|
-
// itself, keeps its focus.
|
|
492
|
-
if (isFocusLost(dialog) && (host == null || isFocusLost(host))) {
|
|
493
|
-
focusForLastInput(trigger);
|
|
494
|
-
}
|
|
495
|
-
});
|
|
496
|
-
};
|
|
471
|
+
const returnFocusOnRemoval = prepareFocusReturnOnRemoval(dialog);
|
|
472
|
+
return () => returnFocusOnRemoval(triggerElementRef.current);
|
|
497
473
|
}, [isInline]);
|
|
498
474
|
|
|
499
475
|
// Host app-global surfaces (toasts) inside this modal while it is open, so
|
package/dist/Field/Field.js
CHANGED
|
@@ -22,11 +22,11 @@ import { FieldStatus } from "../FieldStatus/FieldStatus.js";
|
|
|
22
22
|
import { useFieldStatusAnnouncement } from "../FieldStatus/useFieldStatusAnnouncement.js";
|
|
23
23
|
import "../theme/tokens.stylex.js";
|
|
24
24
|
import { spacingVars, borderVars, sizeVars } from "../theme/tokens.stylex.js";
|
|
25
|
-
import { mergeProps } from "../utils/
|
|
25
|
+
import { mergeProps } from "../utils/mergeProps.js";
|
|
26
26
|
import { useDevWarning } from "../hooks/useDevWarning.js";
|
|
27
27
|
import { FormLayoutContext } from "../FormLayout/FormLayoutContext.js";
|
|
28
28
|
import { Text } from "../Text/Text.js";
|
|
29
|
-
import { VisuallyHidden } from "../VisuallyHidden/
|
|
29
|
+
import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
|
|
30
30
|
import { themeProps } from "../utils/themeProps.js";
|
|
31
31
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
32
32
|
const styles = {
|
|
@@ -47,9 +47,10 @@ export interface HoverCardProps extends Pick<BaseProps, 'xstyle' | 'className' |
|
|
|
47
47
|
hideDelay?: number;
|
|
48
48
|
/**
|
|
49
49
|
* When to trigger on focus:
|
|
50
|
-
* - `auto`:
|
|
51
|
-
*
|
|
52
|
-
* - `
|
|
50
|
+
* - `auto`: focus on the trigger itself, or within a trigger that is
|
|
51
|
+
* focusable when focus arrives
|
|
52
|
+
* - `always`: focus on the trigger or anything inside it
|
|
53
|
+
* - `never`: never on focus (for composite widgets)
|
|
53
54
|
*
|
|
54
55
|
* @default 'auto'
|
|
55
56
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/HoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,
|
|
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;AAIf,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;;;;;;;;OAQG;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;AAiBD;;;;;;;;;;;;;;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,CA2M/B;yBA7Ne,SAAS"}
|
|
@@ -15,7 +15,8 @@
|
|
|
15
15
|
* - /apps/storybook/stories/HoverCard.stories.tsx
|
|
16
16
|
* - /packages/cli/assets/templates/blocks/components/HoverCard/ (showcase blocks)
|
|
17
17
|
*/
|
|
18
|
-
import { useCallback, useRef } from 'react';
|
|
18
|
+
import { useCallback, useRef, useState } from 'react';
|
|
19
|
+
import { observeMutations } from "../utils/sharedMutationObserver.js";
|
|
19
20
|
import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
|
|
20
21
|
import * as stylex from '@stylexjs/stylex';
|
|
21
22
|
import { useHoverCard } from "./useHoverCard.js";
|
|
@@ -138,6 +139,30 @@ export function HoverCard({
|
|
|
138
139
|
onHide: handleHide
|
|
139
140
|
});
|
|
140
141
|
|
|
142
|
+
// The wrapper's first element is the trigger, and it can be replaced after
|
|
143
|
+
// mount: by new children, or by a child component that swaps its own root
|
|
144
|
+
// without a render here. Syncs with the DOM: on a replacement the wiring
|
|
145
|
+
// below re-runs, so the old element is released before the new one is wired.
|
|
146
|
+
const [triggerReplacements, setTriggerReplacements] = useState(0);
|
|
147
|
+
const observedTriggerRef = useRef(null);
|
|
148
|
+
useIsomorphicLayoutEffect(() => {
|
|
149
|
+
const wrapper = wrapperRef.current;
|
|
150
|
+
if (textOnly || wrapper == null) {
|
|
151
|
+
return;
|
|
152
|
+
}
|
|
153
|
+
observedTriggerRef.current = wrapper.firstElementChild;
|
|
154
|
+
return observeMutations(wrapper, {
|
|
155
|
+
childList: true
|
|
156
|
+
}, () => {
|
|
157
|
+
const trigger = wrapper.firstElementChild;
|
|
158
|
+
if (trigger === observedTriggerRef.current) {
|
|
159
|
+
return;
|
|
160
|
+
}
|
|
161
|
+
observedTriggerRef.current = trigger;
|
|
162
|
+
setTriggerReplacements(count => count + 1);
|
|
163
|
+
});
|
|
164
|
+
}, [textOnly]);
|
|
165
|
+
|
|
141
166
|
// For element children with display:contents, attach ref to first child
|
|
142
167
|
useIsomorphicLayoutEffect(() => {
|
|
143
168
|
if (textOnly) {
|
|
@@ -224,7 +249,7 @@ export function HoverCard({
|
|
|
224
249
|
firstChild.removeAttribute('aria-describedby');
|
|
225
250
|
}
|
|
226
251
|
};
|
|
227
|
-
}, [textOnly, label, hoverCard.ref, hoverCard.id, hoverCard.isOpen, hoverCard.describedBy]);
|
|
252
|
+
}, [textOnly, label, hoverCard.ref, hoverCard.id, hoverCard.isOpen, hoverCard.describedBy, triggerReplacements]);
|
|
228
253
|
|
|
229
254
|
// While closed, useLayer leaves only an inert <template> marker at this JSX
|
|
230
255
|
// position. When the card needs to open, it uses that marker to keep the
|
|
@@ -11,7 +11,7 @@ import { type ReactNode, type RefCallback } from 'react';
|
|
|
11
11
|
import { type ContextRenderProps, type LayerAlignment, type LayerPlacement } from '../Layer/useLayer.js';
|
|
12
12
|
import { type LayerTouchTrigger } from '../Layer/useTouchTrigger.js';
|
|
13
13
|
/**
|
|
14
|
-
*
|
|
14
|
+
* When focus on the trigger opens the hover card
|
|
15
15
|
*/
|
|
16
16
|
export type HoverCardFocusTrigger = 'auto' | 'always' | 'never';
|
|
17
17
|
/**
|
|
@@ -41,9 +41,10 @@ export interface HoverCardOptions {
|
|
|
41
41
|
hideDelay?: number;
|
|
42
42
|
/**
|
|
43
43
|
* When to trigger on focus:
|
|
44
|
-
* - `auto`:
|
|
45
|
-
*
|
|
46
|
-
* - `
|
|
44
|
+
* - `auto`: focus on the trigger itself, or within a trigger that is
|
|
45
|
+
* focusable when focus arrives
|
|
46
|
+
* - `always`: focus on the trigger or anything inside it
|
|
47
|
+
* - `never`: never on focus (for composite widgets)
|
|
47
48
|
*
|
|
48
49
|
* @default 'auto'
|
|
49
50
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/useHoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,
|
|
1
|
+
{"version":3,"file":"useHoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/useHoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,0BAA0B,CAAC;AA8BlC;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEhE;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,iBAAiB,CAAC;AAEtD,MAAM,WAAW,gBAAgB;IAC/B;;;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;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IACH,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC;;;;OAIG;IACH,cAAc,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEzC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;;;OAMG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;;OAOG;IACH,eAAe,EAAE,CACf,QAAQ,EAAE,SAAS,EACnB,KAAK,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,aAAa,CAAC,KAC5C,SAAS,CAAC;IAEf;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;GAgBG;AAEH,wBAAgB,YAAY,CAAC,OAAO,GAAE,gBAAqB,GAAG,eAAe,CA4d5E"}
|
|
@@ -11,7 +11,8 @@
|
|
|
11
11
|
* SYNC: When modified, update:
|
|
12
12
|
* - /packages/core/src/HoverCard/index.ts
|
|
13
13
|
*/
|
|
14
|
-
import { useCallback, useEffect, useRef } from 'react';
|
|
14
|
+
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
15
|
+
import { createTriggerFocusGate } from "../utils/triggerFocus.js";
|
|
15
16
|
import * as stylex from '@stylexjs/stylex';
|
|
16
17
|
import { useLayer } from "../Layer/useLayer.js";
|
|
17
18
|
import { useTouchTrigger } from "../Layer/useTouchTrigger.js";
|
|
@@ -33,35 +34,13 @@ const styles = {
|
|
|
33
34
|
};
|
|
34
35
|
|
|
35
36
|
/**
|
|
36
|
-
*
|
|
37
|
+
* When focus on the trigger opens the hover card
|
|
37
38
|
*/
|
|
38
39
|
|
|
39
40
|
/**
|
|
40
41
|
* Touch trigger behavior for hover cards
|
|
41
42
|
*/
|
|
42
43
|
|
|
43
|
-
/**
|
|
44
|
-
* Check if an element is naturally focusable
|
|
45
|
-
*/
|
|
46
|
-
function isFocusable(element) {
|
|
47
|
-
// Elements with explicit tabindex
|
|
48
|
-
if (element.hasAttribute('tabindex')) {
|
|
49
|
-
return element.tabIndex >= 0;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
// Naturally focusable elements
|
|
53
|
-
const focusableTags = ['A', 'BUTTON', 'INPUT', 'SELECT', 'TEXTAREA'];
|
|
54
|
-
if (focusableTags.includes(element.tagName)) {
|
|
55
|
-
return !element.disabled;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
// Elements with contenteditable
|
|
59
|
-
if (element.isContentEditable) {
|
|
60
|
-
return true;
|
|
61
|
-
}
|
|
62
|
-
return false;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
44
|
/**
|
|
66
45
|
* Hook for hover card behavior with hover/focus triggers.
|
|
67
46
|
*
|
|
@@ -220,8 +199,12 @@ export function useHoverCard(options = {}) {
|
|
|
220
199
|
const handlePointerDown = useCallback(event => {
|
|
221
200
|
handleTouchPointerDown(event);
|
|
222
201
|
}, [handleTouchPointerDown]);
|
|
223
|
-
|
|
224
|
-
|
|
202
|
+
|
|
203
|
+
// Under `auto`, whether focus counts is decided when it arrives, and a
|
|
204
|
+
// focus that counted still hides on blur (utils/triggerFocus.ts).
|
|
205
|
+
const [focusGate] = useState(createTriggerFocusGate);
|
|
206
|
+
const handleFocusIn = useCallback(e => {
|
|
207
|
+
if (!focusGate.focusIn(e, focusTrigger) || !isEnabled) {
|
|
225
208
|
return;
|
|
226
209
|
}
|
|
227
210
|
// A tap focuses the trigger it activates. Opening on that focus would
|
|
@@ -237,8 +220,11 @@ export function useHoverCard(options = {}) {
|
|
|
237
220
|
}
|
|
238
221
|
clearTimeouts();
|
|
239
222
|
showLayer();
|
|
240
|
-
}, [isEnabled, isTouchInteraction, clearTimeouts, showLayer]);
|
|
223
|
+
}, [focusGate, focusTrigger, isEnabled, isTouchInteraction, clearTimeouts, showLayer]);
|
|
241
224
|
const handleFocusOut = useCallback(e => {
|
|
225
|
+
if (!focusGate.focusOut(e, focusTrigger)) {
|
|
226
|
+
return;
|
|
227
|
+
}
|
|
242
228
|
// Check if focus is moving to the hover card content
|
|
243
229
|
const relatedTarget = e.relatedTarget;
|
|
244
230
|
const popoverElement = document.getElementById(layerId);
|
|
@@ -247,7 +233,7 @@ export function useHoverCard(options = {}) {
|
|
|
247
233
|
return;
|
|
248
234
|
}
|
|
249
235
|
scheduleHide();
|
|
250
|
-
}, [layerId, scheduleHide]);
|
|
236
|
+
}, [focusGate, focusTrigger, layerId, scheduleHide]);
|
|
251
237
|
|
|
252
238
|
// Escape dismissal (WCAG 1.4.13) goes through the shared layer stack: a
|
|
253
239
|
// visible card is the top-most layer, so it takes the press and consumes it.
|
|
@@ -329,9 +315,9 @@ export function useHoverCard(options = {}) {
|
|
|
329
315
|
el.addEventListener('mouseleave', handleMouseLeave);
|
|
330
316
|
el.addEventListener('pointerdown', handlePointerDown);
|
|
331
317
|
|
|
332
|
-
//
|
|
333
|
-
|
|
334
|
-
if (
|
|
318
|
+
// Focus listeners unless focus never opens the card; `auto` decides
|
|
319
|
+
// per event (utils/triggerFocus.ts).
|
|
320
|
+
if (focusTrigger !== 'never') {
|
|
335
321
|
el.addEventListener('focusin', handleFocusIn);
|
|
336
322
|
el.addEventListener('focusout', handleFocusOut);
|
|
337
323
|
}
|
package/dist/Icon/Icon.d.ts
CHANGED
|
@@ -105,7 +105,11 @@ export type IconType = ComponentType<SVGProps<SVGSVGElement>>;
|
|
|
105
105
|
* Extends SVGProps to allow passing additional SVG attributes (used when icon is a component).
|
|
106
106
|
*/
|
|
107
107
|
export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'ref' | 'color'> {
|
|
108
|
-
/**
|
|
108
|
+
/**
|
|
109
|
+
* Ref to the rendered SVG element when `icon` is an icon component. A
|
|
110
|
+
* semantic or namespaced name renders inside an internal wrapper, and the
|
|
111
|
+
* ref is not attached.
|
|
112
|
+
*/
|
|
109
113
|
ref?: React.Ref<SVGSVGElement>;
|
|
110
114
|
/**
|
|
111
115
|
* Icon to render. Can be:
|
package/dist/Icon/Icon.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAC3C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAInD,OAAO,KAAK,EAAC,QAAQ,EAAE,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AACvE,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AAIzC,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAEhE,YAAY,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAiDhD,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8Df,CAAC;AAMH,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AAEjD;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE9D;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,QAAQ,CAAC,aAAa,CAAC,EACvB,KAAK,GAAG,OAAO,CAChB;IACC
|
|
1
|
+
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAC3C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAInD,OAAO,KAAK,EAAC,QAAQ,EAAE,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AACvE,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AAIzC,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAEhE,YAAY,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAiDhD,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8Df,CAAC;AAMH,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AAEjD;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE9D;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,QAAQ,CAAC,aAAa,CAAC,EACvB,KAAK,GAAG,OAAO,CAChB;IACC;;;;OAIG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;;;OAMG;IACH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,kBAAkB,CAAC;IAC/C;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;;;;;;;;;;;;OAeG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AA6BD;;;;;;;GAOG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAiB,EACjB,IAAI,EAAE,QAAQ,EACd,OAAO,EACP,KAAK,EACL,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,KAAK,EACT,EAAE,SAAS,qBAoDX;yBA/De,IAAI;;;AA2IpB;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,QAAQ,EAChC,KAAK,CAAC,EAAE;IAAC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAC,GAC3C,KAAK,CAAC,SAAS,CAYjB"}
|
package/dist/Icon/Icon.js
CHANGED
|
@@ -193,7 +193,9 @@ const colorStyles = {
|
|
|
193
193
|
*
|
|
194
194
|
* - Non-empty `label` → meaningful image: `role="img"` + `aria-label`, and no
|
|
195
195
|
* `aria-hidden` (an `aria-hidden` element is removed from the accessibility
|
|
196
|
-
* tree, so its accessible name would be ignored).
|
|
196
|
+
* tree, so its accessible name would be ignored). Icon passes
|
|
197
|
+
* `aria-hidden: undefined`. Many icon components, such as Heroicons, write
|
|
198
|
+
* `aria-hidden="true"` unless a prop replaces it.
|
|
197
199
|
* - Omitted or empty `label` → decorative default: `aria-hidden="true"`.
|
|
198
200
|
*
|
|
199
201
|
* The result is spread BEFORE `{...props}` in both render modes so an explicit
|
|
@@ -202,7 +204,8 @@ const colorStyles = {
|
|
|
202
204
|
function getIconA11yProps(label) {
|
|
203
205
|
return label != null && label !== '' ? {
|
|
204
206
|
role: 'img',
|
|
205
|
-
'aria-label': label
|
|
207
|
+
'aria-label': label,
|
|
208
|
+
'aria-hidden': undefined
|
|
206
209
|
} : {
|
|
207
210
|
'aria-hidden': 'true'
|
|
208
211
|
};
|