@astryxdesign/core 0.7.7-canary.7f1bace → 0.7.7-canary.7fbd51e
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/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +12 -11
- package/dist/Drawer/Drawer.d.ts.map +1 -1
- package/dist/Drawer/Drawer.js +15 -10
- package/dist/Drawer/useDrawerDialogPresence.d.ts.map +1 -1
- package/dist/Drawer/useDrawerDialogPresence.js +5 -1
- package/dist/InfoTip/InfoTip.d.ts +63 -0
- package/dist/InfoTip/InfoTip.d.ts.map +1 -0
- package/dist/InfoTip/InfoTip.js +126 -0
- package/dist/InfoTip/index.d.ts +10 -0
- package/dist/InfoTip/index.d.ts.map +1 -0
- package/dist/InfoTip/index.js +12 -0
- package/dist/Layer/useBackdropPress.d.ts +27 -0
- package/dist/Layer/useBackdropPress.d.ts.map +1 -0
- package/dist/Layer/useBackdropPress.js +53 -0
- package/dist/PowerSearch/PowerSearch.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearch.js +17 -9
- package/dist/Resizable/ResizeHandle.d.ts.map +1 -1
- package/dist/Resizable/ResizeHandle.js +118 -260
- package/dist/Resizable/resizeGesture.d.ts +91 -0
- package/dist/Resizable/resizeGesture.d.ts.map +1 -0
- package/dist/Resizable/resizeGesture.js +251 -0
- package/dist/SegmentedControl/SegmentedControl.d.ts +3 -1
- package/dist/SegmentedControl/SegmentedControl.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControl.js +115 -8
- package/dist/SegmentedControl/SegmentedControlContext.d.ts +6 -0
- package/dist/SegmentedControl/SegmentedControlContext.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControlItem.d.ts +1 -0
- package/dist/SegmentedControl/SegmentedControlItem.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControlItem.js +8 -1
- package/dist/SegmentedControl/useSegmentedSelectionMotion.d.ts +357 -0
- package/dist/SegmentedControl/useSegmentedSelectionMotion.d.ts.map +1 -0
- package/dist/SegmentedControl/useSegmentedSelectionMotion.js +1349 -0
- package/dist/SegmentedControl/useSegmentedTouchTracking.d.ts +70 -0
- package/dist/SegmentedControl/useSegmentedTouchTracking.d.ts.map +1 -0
- package/dist/SegmentedControl/useSegmentedTouchTracking.js +264 -0
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +96 -67
- package/dist/Selector/optionShape.d.ts +24 -0
- package/dist/Selector/optionShape.d.ts.map +1 -0
- package/dist/Selector/optionShape.js +48 -0
- package/dist/Selector/selectableOptionEntries.d.ts +20 -0
- package/dist/Selector/selectableOptionEntries.d.ts.map +1 -0
- package/dist/Selector/selectableOptionEntries.js +38 -0
- package/dist/Selector/utils.d.ts +2 -17
- package/dist/Selector/utils.d.ts.map +1 -1
- package/dist/Selector/utils.js +3 -51
- package/dist/Switch/switchTouch.d.ts +0 -7
- package/dist/Switch/switchTouch.d.ts.map +1 -1
- package/dist/Switch/switchTouch.js +2 -10
- package/dist/Switch/useSwitchTouch.d.ts +2 -11
- package/dist/Switch/useSwitchTouch.d.ts.map +1 -1
- package/dist/Switch/useSwitchTouch.js +26 -85
- package/dist/Toast/Toast.d.ts.map +1 -1
- package/dist/Toast/Toast.js +5 -0
- package/dist/Token/Token.d.ts.map +1 -1
- package/dist/Token/Token.js +1 -0
- package/dist/Tokenizer/Tokenizer.d.ts.map +1 -1
- package/dist/Tokenizer/Tokenizer.js +11 -12
- package/dist/Tokenizer/TokenizerItemRemovableContext.d.ts.map +1 -1
- package/dist/Tokenizer/TokenizerItemRemovableContext.js +5 -3
- package/dist/astryx.css +74 -0
- package/dist/gestures/GestureHost.d.ts.map +1 -1
- package/dist/gestures/GestureHost.js +67 -13
- package/dist/hooks/actionGroupTracker.d.ts +3 -3
- package/dist/hooks/actionGroupTracker.d.ts.map +1 -1
- package/dist/hooks/actionGroupTracker.js +6 -53
- package/dist/hooks/useHighlightedOptionScroll.d.ts.map +1 -1
- package/dist/hooks/useHighlightedOptionScroll.js +14 -11
- package/dist/hooks/useMediaQuery.d.ts +2 -1
- package/dist/hooks/useMediaQuery.d.ts.map +1 -1
- package/dist/hooks/useMediaQuery.js +7 -4
- package/dist/i18n/generated-english/InfoTip/InfoTip.generated.d.ts +8 -0
- package/dist/i18n/generated-english/InfoTip/InfoTip.generated.d.ts.map +1 -0
- package/dist/i18n/generated-english/InfoTip/InfoTip.generated.js +12 -0
- package/dist/i18n/generated-english/PowerSearch/PowerSearch.generated.d.ts.map +1 -1
- package/dist/i18n/generated-english/PowerSearch/PowerSearch.generated.js +1 -0
- package/dist/i18n/generated-locales/en.generated.d.ts.map +1 -1
- package/dist/i18n/generated-locales/en.generated.js +3 -1
- package/dist/i18n/generated-locales/pseudo.generated.d.ts.map +1 -1
- package/dist/i18n/generated-locales/pseudo.generated.js +3 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/motion/roles.d.ts +7 -1
- package/dist/motion/roles.d.ts.map +1 -1
- package/dist/motion/roles.js +20 -1
- package/dist/motion/uikit/index.d.ts +6 -5
- package/dist/motion/uikit/index.d.ts.map +1 -1
- package/dist/motion/uikit/index.js +6 -5
- package/dist/motion/uikit/segmented.d.ts +55 -0
- package/dist/motion/uikit/segmented.d.ts.map +1 -0
- package/dist/motion/uikit/segmented.js +77 -0
- package/dist/motion/uikit/springs.d.ts +0 -18
- package/dist/motion/uikit/springs.d.ts.map +1 -1
- package/dist/motion/uikit/springs.js +5 -21
- package/dist/privateAttributes/segmentTitle.stylex.d.ts +5 -0
- package/dist/privateAttributes/segmentTitle.stylex.d.ts.map +1 -0
- package/dist/privateAttributes/segmentTitle.stylex.js +22 -0
- package/dist/utils/browserClickWait.d.ts +35 -0
- package/dist/utils/browserClickWait.d.ts.map +1 -0
- package/dist/utils/browserClickWait.js +123 -0
- package/dist/utils/clickGuard.d.ts +7 -1
- package/dist/utils/clickGuard.d.ts.map +1 -1
- package/dist/utils/clickGuard.js +23 -1
- package/locales/en.json +8 -0
- package/locales/pseudo.json +6 -0
- package/package.json +9 -4
- package/src/Dialog/Dialog.tsx +25 -10
- package/src/Drawer/Drawer.tsx +27 -10
- package/src/Drawer/useDrawerDialogPresence.ts +5 -1
- package/src/InfoTip/InfoTip.doc.mjs +192 -0
- package/src/InfoTip/InfoTip.tsx +186 -0
- package/src/InfoTip/index.ts +14 -0
- package/src/Layer/useBackdropPress.ts +81 -0
- package/src/PowerSearch/PowerSearch.doc.mjs +3 -3
- package/src/PowerSearch/PowerSearch.tsx +32 -11
- package/src/Resizable/ResizeHandle.tsx +133 -328
- package/src/Resizable/resizeGesture.ts +368 -0
- package/src/SegmentedControl/SegmentedControl.doc.mjs +3 -3
- package/src/SegmentedControl/SegmentedControl.tsx +179 -5
- package/src/SegmentedControl/SegmentedControlContext.ts +6 -0
- package/src/SegmentedControl/SegmentedControlItem.tsx +12 -1
- package/src/SegmentedControl/useSegmentedSelectionMotion.ts +1637 -0
- package/src/SegmentedControl/useSegmentedTouchTracking.ts +308 -0
- package/src/Selector/Selector.tsx +136 -89
- package/src/Selector/optionShape.ts +64 -0
- package/src/Selector/selectableOptionEntries.ts +39 -0
- package/src/Selector/utils.ts +9 -68
- package/src/Switch/switchTouch.ts +2 -10
- package/src/Switch/useSwitchTouch.ts +26 -96
- package/src/Toast/Toast.tsx +5 -0
- package/src/Token/Token.tsx +2 -0
- package/src/Tokenizer/Tokenizer.tsx +13 -11
- package/src/Tokenizer/TokenizerItemRemovableContext.ts +5 -3
- package/src/gestures/GestureHost.ts +93 -10
- package/src/hooks/actionGroupTracker.ts +12 -56
- package/src/hooks/useHighlightedOptionScroll.ts +15 -11
- package/src/hooks/useMediaQuery.doc.mjs +2 -2
- package/src/hooks/useMediaQuery.ts +13 -4
- package/src/i18n/generated-english/InfoTip/InfoTip.generated.ts +13 -0
- package/src/i18n/generated-english/PowerSearch/PowerSearch.generated.ts +1 -0
- package/src/i18n/generated-locales/en.generated.ts +2 -0
- package/src/i18n/generated-locales/pseudo.generated.ts +2 -0
- package/src/index.ts +1 -0
- package/src/motion/MEASUREMENTS.md +7 -0
- package/src/motion/README.md +1 -0
- package/src/motion/roles.ts +20 -1
- package/src/motion/uikit/index.ts +5 -5
- package/src/motion/uikit/segmented.ts +74 -0
- package/src/motion/uikit/springs.ts +5 -21
- package/src/privateAttributes/segmentTitle.stylex.ts +22 -0
- package/src/utils/browserClickWait.ts +133 -0
- package/src/utils/clickGuard.ts +28 -1
|
@@ -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;
|
|
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;AA+B9C;;;;;;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;AAyKX;;;;;;;;;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,sCAgbb;yBAhce,MAAM"}
|
package/dist/Dialog/Dialog.js
CHANGED
|
@@ -42,6 +42,7 @@ import { LayerContentBoundary } from "../Layer/layerScopedContext.js";
|
|
|
42
42
|
import { layerClickBoundary } from "../Layer/layerClickBoundary.js";
|
|
43
43
|
import { LayerDepthProvider } from "../Layer/LayerDepthContext.js";
|
|
44
44
|
import { useLayerDismissal } from "../Layer/useLayerDismissal.js";
|
|
45
|
+
import { useBackdropPress } from "../Layer/useBackdropPress.js";
|
|
45
46
|
import { useModalOutlet } from "../Layer/modalOutlet.js";
|
|
46
47
|
import "../theme/tokens.stylex.js";
|
|
47
48
|
import { colorVars, radiusVars, durationVars, easeVars, shadowVars, spacingVars } from "../theme/tokens.stylex.js";
|
|
@@ -57,12 +58,12 @@ import { useInteractionModalityTracking } from "../utils/interactionModality.js"
|
|
|
57
58
|
import { focusForLastInput, isFocusLost } from "../utils/focusReturn.js";
|
|
58
59
|
import { ModalAnnounceProvider } from "../hooks/ModalAnnounceProvider.js";
|
|
59
60
|
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
61
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
60
62
|
/**
|
|
61
63
|
* Calculate a directional translate offset for dialog entry animation.
|
|
62
64
|
* Returns a normalized vector from the trigger element toward the viewport
|
|
63
65
|
* center, scaled to the given distance.
|
|
64
66
|
*/
|
|
65
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
66
67
|
function getDialogDirection(triggerEl, distance = 16) {
|
|
67
68
|
const rect = triggerEl.getBoundingClientRect();
|
|
68
69
|
// The trigger's own window: its rect is measured in that window's viewport,
|
|
@@ -538,16 +539,13 @@ export function Dialog({
|
|
|
538
539
|
}
|
|
539
540
|
}, [isOpen, isInline, hasConsumerName, titleId]);
|
|
540
541
|
|
|
541
|
-
//
|
|
542
|
-
// the event target is the <dialog> element itself; clicks on child content
|
|
543
|
-
// always target the child. This avoids false positives from native browser
|
|
542
|
+
// A press on the ::backdrop targets the <dialog> itself, so native browser
|
|
544
543
|
// popups (date pickers, selects, color pickers) that render outside the
|
|
545
|
-
// dialog's
|
|
546
|
-
const
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
};
|
|
544
|
+
// dialog's rect never count. The press must start and end there.
|
|
545
|
+
const handleBackdropPress = useCallback(() => {
|
|
546
|
+
onOpenChange(false);
|
|
547
|
+
}, [onOpenChange]);
|
|
548
|
+
const backdropPress = useBackdropPress(handleBackdropPress, allowBackdropClick);
|
|
551
549
|
|
|
552
550
|
// The native `cancel` event is the browser's own close-watcher firing: an
|
|
553
551
|
// Android back gesture, or a close request the stack never saw a press for.
|
|
@@ -638,8 +636,11 @@ export function Dialog({
|
|
|
638
636
|
})(), isFullscreen && styles.fullscreen, isFullscreen && isOpen && styles.fullscreenOpen, opensSettled && styles.openSettled, xstyle), className, style),
|
|
639
637
|
...layerClickBoundary({
|
|
640
638
|
...safeProps,
|
|
641
|
-
onClick: chainEventHandlers(
|
|
639
|
+
onClick: chainEventHandlers(backdropPress.onClick, onClickProp)
|
|
642
640
|
}),
|
|
641
|
+
onPointerDownCapture: chainEventHandlers(backdropPress.onPointerDownCapture, safeProps.onPointerDownCapture),
|
|
642
|
+
onPointerUpCapture: chainEventHandlers(backdropPress.onPointerUpCapture, safeProps.onPointerUpCapture),
|
|
643
|
+
onPointerCancelCapture: chainEventHandlers(backdropPress.onPointerCancelCapture, safeProps.onPointerCancelCapture),
|
|
643
644
|
onCancel: handleCancel,
|
|
644
645
|
"aria-modal": isHydrating ? undefined : 'true'
|
|
645
646
|
// The default aria-labelledby (from a DialogHeader title) is set
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AAEH,OAAO,EAAgC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAIpE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AAEH,OAAO,EAAgC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAIpE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;AAoB7C,OAAO,KAAK,EAAC,WAAW,EAAe,MAAM,WAAW,CAAC;AA+MzD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,iDAAiD;IACjD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAEvB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;OAKG;IACH,YAAY,CAAC,EAAE;QACb;;;;;;WAMG;QACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;KAC/B,CAAC;IAEF;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EAAE,UAAU,EAClB,YAAY,EACZ,IAAY,EACZ,KAAW,EACX,YAAY,EACZ,KAAK,EACL,QAAe,EACf,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BAsNb;yBAxOe,MAAM"}
|
package/dist/Drawer/Drawer.js
CHANGED
|
@@ -70,13 +70,15 @@ import { layerTextReset } from "../Layer/layerTextReset.stylex.js";
|
|
|
70
70
|
import { layerStructureReset } from "../Layer/layerStructureReset.stylex.js";
|
|
71
71
|
import { LayerContentBoundary } from "../Layer/layerScopedContext.js";
|
|
72
72
|
import { useModalOutlet } from "../Layer/modalOutlet.js";
|
|
73
|
+
import { useBackdropPress } from "../Layer/useBackdropPress.js";
|
|
73
74
|
import { layerClickBoundary } from "../Layer/layerClickBoundary.js";
|
|
74
75
|
import { ModalAnnounceProvider } from "../hooks/ModalAnnounceProvider.js";
|
|
75
76
|
import { composeEventHandlers, mergeProps, themeProps } from "../utils/index.js";
|
|
77
|
+
import { chainEventHandlers } from "../utils/chainEventHandlers.js";
|
|
76
78
|
import { container, overlayPaddingReset } from "../Layout/index.js";
|
|
77
79
|
import { containerPaddingBlockEndVarStyles, containerPaddingBlockStartVarStyles, containerPaddingInlineVarStyles, paddingStyles, spacingStepToToken } from "../Layout/padding.stylex.js";
|
|
78
80
|
import { useDrawerDialogPresence } from "./useDrawerDialogPresence.js";
|
|
79
|
-
|
|
81
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
80
82
|
// =============================================================================
|
|
81
83
|
// Styles
|
|
82
84
|
// =============================================================================
|
|
@@ -84,7 +86,6 @@ import { useDrawerDialogPresence } from "./useDrawerDialogPresence.js";
|
|
|
84
86
|
// Below this viewport width the drawer preserves a fixed reveal of the page
|
|
85
87
|
// behind instead of growing proportionally with the viewport. 640px is the
|
|
86
88
|
// repo's mobile breakpoint.
|
|
87
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
88
89
|
const MOBILE_BREAKPOINT = 640;
|
|
89
90
|
|
|
90
91
|
// Material's established mobile drawer pattern leaves a 56dp reveal. Using
|
|
@@ -347,13 +348,12 @@ export function Drawer({
|
|
|
347
348
|
}
|
|
348
349
|
}, [allowEscape, handleDismiss, shouldDismissOnCloseRequest]);
|
|
349
350
|
|
|
350
|
-
//
|
|
351
|
-
//
|
|
352
|
-
const
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
}, [allowScrimClick, hasScrim, onOpenChange]);
|
|
351
|
+
// A press on the ::backdrop targets the <dialog> itself (the content area
|
|
352
|
+
// fills the panel). The press must start and end there.
|
|
353
|
+
const handleScrimPress = useCallback(() => {
|
|
354
|
+
onOpenChange(false);
|
|
355
|
+
}, [onOpenChange]);
|
|
356
|
+
const scrimPress = useBackdropPress(handleScrimPress, hasScrim && allowScrimClick);
|
|
357
357
|
const widthValue = typeof width === 'number' ? `${width}px` : width;
|
|
358
358
|
const isFullWidthOnMobile = experimental?.isFullWidthOnMobile ?? false;
|
|
359
359
|
const mobileWidth = isFullWidthOnMobile ? MOBILE_WIDTH_FULL : `min(${widthValue}, calc(100dvw - ${MOBILE_PAGE_REVEAL}px))`;
|
|
@@ -391,8 +391,13 @@ export function Drawer({
|
|
|
391
391
|
} : undefined),
|
|
392
392
|
...layerClickBoundary({
|
|
393
393
|
...safeProps,
|
|
394
|
-
onClick: composeEventHandlers(onClickProp,
|
|
394
|
+
onClick: composeEventHandlers(onClickProp, scrimPress.onClick)
|
|
395
395
|
}),
|
|
396
|
+
// The hook records where the press started first. The caller's capture
|
|
397
|
+
// handler then runs, also when a child prevented default.
|
|
398
|
+
onPointerDownCapture: chainEventHandlers(scrimPress.onPointerDownCapture, safeProps.onPointerDownCapture),
|
|
399
|
+
onPointerUpCapture: chainEventHandlers(scrimPress.onPointerUpCapture, safeProps.onPointerUpCapture),
|
|
400
|
+
onPointerCancelCapture: chainEventHandlers(scrimPress.onPointerCancelCapture, safeProps.onPointerCancelCapture),
|
|
396
401
|
onKeyDown: onKeyDownProp,
|
|
397
402
|
onCancel: handleCancel,
|
|
398
403
|
children: /*#__PURE__*/_jsx(ModalAnnounceProvider, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDrawerDialogPresence.d.ts","sourceRoot":"","sources":["../../src/Drawer/useDrawerDialogPresence.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAGL,KAAK,QAAQ,EACb,KAAK,SAAS,EACd,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"useDrawerDialogPresence.d.ts","sourceRoot":"","sources":["../../src/Drawer/useDrawerDialogPresence.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAGL,KAAK,QAAQ,EACb,KAAK,SAAS,EACd,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAef,KAAK,8BAA8B,GAAG;IACpC,SAAS,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IAC/C,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CAClD,CAAC;AA6DF;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,MAAM,EACN,OAAO,EACP,aAAa,GACd,EAAE,8BAA8B,GAAG,IAAI,CAoEvC"}
|
|
@@ -26,6 +26,7 @@
|
|
|
26
26
|
import { useEffect, useRef } from 'react';
|
|
27
27
|
import { flushSync } from 'react-dom';
|
|
28
28
|
import { notifyTopLayerEntry } from "../Layer/modalOutlet.js";
|
|
29
|
+
import { runPopoverOperation } from "../Layer/popoverOperations.js";
|
|
29
30
|
|
|
30
31
|
/** Slack past the computed transition before the backstop gives up waiting. */
|
|
31
32
|
const EXIT_BACKSTOP_BUFFER_MS = 50;
|
|
@@ -51,7 +52,10 @@ function showDrawerHost(dialog, isModal) {
|
|
|
51
52
|
if (isModal) {
|
|
52
53
|
dialog.showModal();
|
|
53
54
|
} else if (typeof dialog.showPopover === 'function') {
|
|
54
|
-
dialog.
|
|
55
|
+
// The dialog's show focuses its first control. A tooltip on that control
|
|
56
|
+
// then asks to show. The browser refuses a show inside another show.
|
|
57
|
+
// Counting this show makes the tooltip wait until it ends.
|
|
58
|
+
runPopoverOperation(dialog.ownerDocument, () => dialog.showPopover());
|
|
55
59
|
// The drawer is now the newest top-layer entry: global hosts shown before
|
|
56
60
|
// it (the toast viewport) re-enter above it, as they do above a modal.
|
|
57
61
|
notifyTopLayerEntry();
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file InfoTip.tsx
|
|
3
|
+
* @input Uses React, StyleX, Tooltip, Icon, useComponentTranslator, the shared
|
|
4
|
+
* touch hit area, color/spacing/radius/duration/ease tokens
|
|
5
|
+
* @output Exports InfoTip component, InfoTipProps, InfoTipSize types
|
|
6
|
+
* @position Core implementation; consumed by index.ts, tested by
|
|
7
|
+
* InfoTip.test.tsx; `@astryxdesign/lab` re-exports it, deprecated
|
|
8
|
+
*
|
|
9
|
+
* SYNC: When modified, update these files to stay in sync:
|
|
10
|
+
* - /packages/core/src/InfoTip/InfoTip.doc.mjs (props table, features)
|
|
11
|
+
* - /docs/specs/components/InfoTip/InfoTip.spec.md (contract)
|
|
12
|
+
* - /packages/core/src/InfoTip/InfoTip.test.tsx (tests for new/changed behavior)
|
|
13
|
+
* - /packages/core/src/InfoTip/index.ts (exports if types change)
|
|
14
|
+
*/
|
|
15
|
+
import { type ReactNode, type Ref } from 'react';
|
|
16
|
+
import type { BaseProps } from '../BaseProps.js';
|
|
17
|
+
import { type IconSize } from '../Icon/Icon.js';
|
|
18
|
+
/**
|
|
19
|
+
* Size of the info icon. Maps 1:1 to Icon sizes
|
|
20
|
+
* (xsm: 12px, sm: 16px, md: 20px, lg: 24px).
|
|
21
|
+
*/
|
|
22
|
+
export type InfoTipSize = IconSize;
|
|
23
|
+
export interface InfoTipProps extends Pick<BaseProps, 'xstyle' | 'className' | 'style'> {
|
|
24
|
+
/** Ref forwarded to the info button. */
|
|
25
|
+
ref?: Ref<HTMLButtonElement>;
|
|
26
|
+
/**
|
|
27
|
+
* The help the button reveals. Short, noninteractive text; for links or
|
|
28
|
+
* buttons, use HoverCard.
|
|
29
|
+
*/
|
|
30
|
+
content: ReactNode;
|
|
31
|
+
/**
|
|
32
|
+
* Accessible name of the button.
|
|
33
|
+
* @default A translated "More information"
|
|
34
|
+
*/
|
|
35
|
+
label?: string;
|
|
36
|
+
/**
|
|
37
|
+
* Size of the info icon.
|
|
38
|
+
* @default 'sm'
|
|
39
|
+
*/
|
|
40
|
+
size?: InfoTipSize;
|
|
41
|
+
}
|
|
42
|
+
/**
|
|
43
|
+
* An info icon that reveals help: a small "i" button. Hover and keyboard
|
|
44
|
+
* focus preview the help. A click, tap, Enter, or Space pins it open until
|
|
45
|
+
* Escape, a second press, a press outside, or focus leaving. Use it next to
|
|
46
|
+
* labels, values, and metrics for permission notes, metric definitions, and
|
|
47
|
+
* field help.
|
|
48
|
+
*
|
|
49
|
+
* InfoTip is Tooltip with `triggerBehavior="toggle"` on a named button: Tooltip
|
|
50
|
+
* opens, pins, announces, and closes the help. The info icon resolves from
|
|
51
|
+
* the icon registry, so themes can replace it.
|
|
52
|
+
*
|
|
53
|
+
* @example
|
|
54
|
+
* ```
|
|
55
|
+
* <InfoTip content="Editors can change this field; viewers cannot." />
|
|
56
|
+
* <InfoTip content="30-day rolling average." label="About this metric" />
|
|
57
|
+
* ```
|
|
58
|
+
*/
|
|
59
|
+
export declare function InfoTip({ content, label, size, ref, xstyle, className, style, }: InfoTipProps): ReactNode;
|
|
60
|
+
export declare namespace InfoTip {
|
|
61
|
+
var displayName: string;
|
|
62
|
+
}
|
|
63
|
+
//# sourceMappingURL=InfoTip.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InfoTip.d.ts","sourceRoot":"","sources":["../../src/InfoTip/InfoTip.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAc,KAAK,SAAS,EAAE,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAG5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAO,KAAK,QAAQ,EAAC,MAAM,cAAc,CAAC;AAoBjD;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC;AAEnC,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAC7B;;;OAGG;IACH,OAAO,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AA8CD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,KAAK,EACL,IAAW,EACX,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,YAAY,GAAG,SAAS,CAyC1B;yBAjDe,OAAO"}
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
'use client';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* @file InfoTip.tsx
|
|
7
|
+
* @input Uses React, StyleX, Tooltip, Icon, useComponentTranslator, the shared
|
|
8
|
+
* touch hit area, color/spacing/radius/duration/ease tokens
|
|
9
|
+
* @output Exports InfoTip component, InfoTipProps, InfoTipSize types
|
|
10
|
+
* @position Core implementation; consumed by index.ts, tested by
|
|
11
|
+
* InfoTip.test.tsx; `@astryxdesign/lab` re-exports it, deprecated
|
|
12
|
+
*
|
|
13
|
+
* SYNC: When modified, update these files to stay in sync:
|
|
14
|
+
* - /packages/core/src/InfoTip/InfoTip.doc.mjs (props table, features)
|
|
15
|
+
* - /docs/specs/components/InfoTip/InfoTip.spec.md (contract)
|
|
16
|
+
* - /packages/core/src/InfoTip/InfoTip.test.tsx (tests for new/changed behavior)
|
|
17
|
+
* - /packages/core/src/InfoTip/index.ts (exports if types change)
|
|
18
|
+
*/
|
|
19
|
+
import { useCallback } from 'react';
|
|
20
|
+
import * as stylex from '@stylexjs/stylex';
|
|
21
|
+
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
22
|
+
import { Icon } from "../Icon/Icon.js";
|
|
23
|
+
import { Tooltip } from "../Tooltip/Tooltip.js";
|
|
24
|
+
import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
|
|
25
|
+
import english from "../i18n/generated-english/InfoTip/InfoTip.generated.js";
|
|
26
|
+
import "../theme/tokens.stylex.js";
|
|
27
|
+
import { colorVars, durationVars, easeVars, radiusVars, spacingVars } from "../theme/tokens.stylex.js";
|
|
28
|
+
import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
|
|
29
|
+
import { mergeProps } from "../utils/mergeProps.js";
|
|
30
|
+
import { watchHitArea, writeHitInsets } from "../utils/hitArea.js";
|
|
31
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
32
|
+
registerEnglishFallback(english);
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* Size of the info icon. Maps 1:1 to Icon sizes
|
|
36
|
+
* (xsm: 12px, sm: 16px, md: 20px, lg: 24px).
|
|
37
|
+
*/
|
|
38
|
+
|
|
39
|
+
const styles = {
|
|
40
|
+
trigger: {
|
|
41
|
+
kVAEAm: "x1n2onr6",
|
|
42
|
+
k1xSpc: "x3nfvp2",
|
|
43
|
+
kGNEyG: "x6s0dn4",
|
|
44
|
+
kjj79g: "xl56j7k",
|
|
45
|
+
kXLuUW: "xxymvpz",
|
|
46
|
+
kmVPX3: "x12nba7r",
|
|
47
|
+
kogj98: "x1ghz6dp",
|
|
48
|
+
ksu8eU: "xng3xce",
|
|
49
|
+
kWkggS: "xjbqb8w",
|
|
50
|
+
kaIpWk: "xjspbzw",
|
|
51
|
+
kkrTdU: "x1ypdohk x16khyan",
|
|
52
|
+
kMwMTN: "xv9yike x10ue8fs",
|
|
53
|
+
k1ekBW: "xt3l3uh",
|
|
54
|
+
kIyJzY: "xuedmi6",
|
|
55
|
+
kAMwcw: "xlr8y92",
|
|
56
|
+
$$css: true
|
|
57
|
+
},
|
|
58
|
+
hitArea: {
|
|
59
|
+
k5JduY: "x1s928wv",
|
|
60
|
+
kwXMNM: "x1j6awrg",
|
|
61
|
+
kv0HGH: "xzdy5ak",
|
|
62
|
+
$$css: true
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
/**
|
|
67
|
+
* An info icon that reveals help: a small "i" button. Hover and keyboard
|
|
68
|
+
* focus preview the help. A click, tap, Enter, or Space pins it open until
|
|
69
|
+
* Escape, a second press, a press outside, or focus leaving. Use it next to
|
|
70
|
+
* labels, values, and metrics for permission notes, metric definitions, and
|
|
71
|
+
* field help.
|
|
72
|
+
*
|
|
73
|
+
* InfoTip is Tooltip with `triggerBehavior="toggle"` on a named button: Tooltip
|
|
74
|
+
* opens, pins, announces, and closes the help. The info icon resolves from
|
|
75
|
+
* the icon registry, so themes can replace it.
|
|
76
|
+
*
|
|
77
|
+
* @example
|
|
78
|
+
* ```
|
|
79
|
+
* <InfoTip content="Editors can change this field; viewers cannot." />
|
|
80
|
+
* <InfoTip content="30-day rolling average." label="About this metric" />
|
|
81
|
+
* ```
|
|
82
|
+
*/
|
|
83
|
+
export function InfoTip({
|
|
84
|
+
content,
|
|
85
|
+
label,
|
|
86
|
+
size = 'sm',
|
|
87
|
+
ref,
|
|
88
|
+
xstyle,
|
|
89
|
+
className,
|
|
90
|
+
style
|
|
91
|
+
}) {
|
|
92
|
+
const t = useComponentTranslator();
|
|
93
|
+
// Under a coarse pointer the button takes taps out toward 44 px. The watch
|
|
94
|
+
// lives as long as the button is attached: the ref's cleanup stops it, and a
|
|
95
|
+
// replaced button starts its own.
|
|
96
|
+
const watchButtonHitArea = useCallback(button => {
|
|
97
|
+
if (button == null) {
|
|
98
|
+
return;
|
|
99
|
+
}
|
|
100
|
+
return watchHitArea(button, insets => writeHitInsets(button, insets));
|
|
101
|
+
}, []);
|
|
102
|
+
const mergedRef = useMergedRefs(ref, watchButtonHitArea);
|
|
103
|
+
|
|
104
|
+
// No Escape handler of its own. Tooltip's entry in the shared dismissal
|
|
105
|
+
// stack takes Escape, so one press never closes both the help and an
|
|
106
|
+
// enclosing Dialog.
|
|
107
|
+
return /*#__PURE__*/_jsx(Tooltip, {
|
|
108
|
+
content: content
|
|
109
|
+
// The tooltip is the button's only purpose. A click, a tap, Enter, or
|
|
110
|
+
// Space pins it open, and the press stops at the button. So an InfoTip's
|
|
111
|
+
// content is reachable on a phone and from the keyboard alike.
|
|
112
|
+
,
|
|
113
|
+
triggerBehavior: "toggle",
|
|
114
|
+
children: /*#__PURE__*/_jsx("button", {
|
|
115
|
+
ref: mergedRef,
|
|
116
|
+
type: "button",
|
|
117
|
+
"aria-label": label ?? t('@astryx.infoTip.label'),
|
|
118
|
+
...mergeProps(stylex.props(focusOutlineStyles.focusVisible, styles.trigger, styles.hitArea, xstyle), className, style),
|
|
119
|
+
children: /*#__PURE__*/_jsx(Icon, {
|
|
120
|
+
icon: "info",
|
|
121
|
+
size: size
|
|
122
|
+
})
|
|
123
|
+
})
|
|
124
|
+
});
|
|
125
|
+
}
|
|
126
|
+
InfoTip.displayName = 'InfoTip';
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file InfoTip component barrel export
|
|
3
|
+
* @input InfoTip.tsx
|
|
4
|
+
* @output Exports InfoTip, InfoTipProps, InfoTipSize
|
|
5
|
+
* @position Barrel; consumed by packages/core/src/index.ts and the
|
|
6
|
+
* `@astryxdesign/core/InfoTip` entry
|
|
7
|
+
*/
|
|
8
|
+
export { InfoTip } from './InfoTip.js';
|
|
9
|
+
export type { InfoTipProps, InfoTipSize } from './InfoTip.js';
|
|
10
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/InfoTip/index.ts"],"names":[],"mappings":"AAIA;;;;;;GAMG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,YAAY,EAAC,YAAY,EAAE,WAAW,EAAC,MAAM,WAAW,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
'use client';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* @file InfoTip component barrel export
|
|
7
|
+
* @input InfoTip.tsx
|
|
8
|
+
* @output Exports InfoTip, InfoTipProps, InfoTipSize
|
|
9
|
+
* @position Barrel; consumed by packages/core/src/index.ts and the
|
|
10
|
+
* `@astryxdesign/core/InfoTip` entry
|
|
11
|
+
*/
|
|
12
|
+
export { InfoTip } from "./InfoTip.js";
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file useBackdropPress.ts
|
|
3
|
+
* @input A modal layer's backdrop dismissal and whether it is allowed now
|
|
4
|
+
* @output Capture-phase pointer handlers and a click handler for the layer's
|
|
5
|
+
* <dialog> root
|
|
6
|
+
* @position Shared backdrop-press rule for Dialog and Drawer
|
|
7
|
+
*/
|
|
8
|
+
import { type PointerEvent, type MouseEvent } from 'react';
|
|
9
|
+
export interface BackdropPressHandlers {
|
|
10
|
+
onPointerDownCapture: (event: PointerEvent<HTMLElement>) => void;
|
|
11
|
+
onPointerUpCapture: (event: PointerEvent<HTMLElement>) => void;
|
|
12
|
+
onPointerCancelCapture: (event: PointerEvent<HTMLElement>) => void;
|
|
13
|
+
onClick: (event: MouseEvent<HTMLElement>) => void;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* A press on a modal layer's backdrop targets the <dialog> root itself. A
|
|
17
|
+
* click there is also what the browser sends when a press starts on one side
|
|
18
|
+
* of the layer's edge and ends on the other (it goes to the nearest common
|
|
19
|
+
* ancestor), so a backdrop press dismisses only when its pointer-down and its
|
|
20
|
+
* pointer-up both landed on the backdrop. A cancelled pointer ends the press.
|
|
21
|
+
*
|
|
22
|
+
* The pointer handlers run in the capture phase. A nested layer, such as a
|
|
23
|
+
* popover open in the dialog, stops its presses at its own root, so a
|
|
24
|
+
* bubble-phase handler here does not see them.
|
|
25
|
+
*/
|
|
26
|
+
export declare function useBackdropPress(onBackdropPress: () => void, isEnabled: boolean): BackdropPressHandlers;
|
|
27
|
+
//# sourceMappingURL=useBackdropPress.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useBackdropPress.d.ts","sourceRoot":"","sources":["../../src/Layer/useBackdropPress.ts"],"names":[],"mappings":"AAIA;;;;;;GAMG;AAEH,OAAO,EAAsB,KAAK,YAAY,EAAE,KAAK,UAAU,EAAC,MAAM,OAAO,CAAC;AAE9E,MAAM,WAAW,qBAAqB;IACpC,oBAAoB,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACjE,kBAAkB,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC/D,sBAAsB,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnE,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACnD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAC9B,eAAe,EAAE,MAAM,IAAI,EAC3B,SAAS,EAAE,OAAO,GACjB,qBAAqB,CA6CvB"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
'use client';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* @file useBackdropPress.ts
|
|
7
|
+
* @input A modal layer's backdrop dismissal and whether it is allowed now
|
|
8
|
+
* @output Capture-phase pointer handlers and a click handler for the layer's
|
|
9
|
+
* <dialog> root
|
|
10
|
+
* @position Shared backdrop-press rule for Dialog and Drawer
|
|
11
|
+
*/
|
|
12
|
+
import { useCallback, useRef } from 'react';
|
|
13
|
+
/**
|
|
14
|
+
* A press on a modal layer's backdrop targets the <dialog> root itself. A
|
|
15
|
+
* click there is also what the browser sends when a press starts on one side
|
|
16
|
+
* of the layer's edge and ends on the other (it goes to the nearest common
|
|
17
|
+
* ancestor), so a backdrop press dismisses only when its pointer-down and its
|
|
18
|
+
* pointer-up both landed on the backdrop. A cancelled pointer ends the press.
|
|
19
|
+
*
|
|
20
|
+
* The pointer handlers run in the capture phase. A nested layer, such as a
|
|
21
|
+
* popover open in the dialog, stops its presses at its own root, so a
|
|
22
|
+
* bubble-phase handler here does not see them.
|
|
23
|
+
*/
|
|
24
|
+
export function useBackdropPress(onBackdropPress, isEnabled) {
|
|
25
|
+
const startedOnBackdropRef = useRef(false);
|
|
26
|
+
const endedOnBackdropRef = useRef(false);
|
|
27
|
+
const onPointerDownCapture = useCallback(event => {
|
|
28
|
+
startedOnBackdropRef.current = event.target === event.currentTarget;
|
|
29
|
+
endedOnBackdropRef.current = false;
|
|
30
|
+
}, []);
|
|
31
|
+
const onPointerUpCapture = useCallback(event => {
|
|
32
|
+
endedOnBackdropRef.current = startedOnBackdropRef.current && event.target === event.currentTarget;
|
|
33
|
+
startedOnBackdropRef.current = false;
|
|
34
|
+
}, []);
|
|
35
|
+
const onPointerCancelCapture = useCallback(() => {
|
|
36
|
+
startedOnBackdropRef.current = false;
|
|
37
|
+
endedOnBackdropRef.current = false;
|
|
38
|
+
}, []);
|
|
39
|
+
const onClick = useCallback(event => {
|
|
40
|
+
const pressWasOnBackdrop = endedOnBackdropRef.current;
|
|
41
|
+
startedOnBackdropRef.current = false;
|
|
42
|
+
endedOnBackdropRef.current = false;
|
|
43
|
+
if (isEnabled && pressWasOnBackdrop && event.target === event.currentTarget) {
|
|
44
|
+
onBackdropPress();
|
|
45
|
+
}
|
|
46
|
+
}, [isEnabled, onBackdropPress]);
|
|
47
|
+
return {
|
|
48
|
+
onPointerDownCapture,
|
|
49
|
+
onPointerUpCapture,
|
|
50
|
+
onPointerCancelCapture,
|
|
51
|
+
onClick
|
|
52
|
+
};
|
|
53
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PowerSearch.d.ts","sourceRoot":"","sources":["../../src/PowerSearch/PowerSearch.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAGL,KAAK,yBAAyB,EAC/B,MAAM,cAAc,CAAC;AAQtB,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEtC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"PowerSearch.d.ts","sourceRoot":"","sources":["../../src/PowerSearch/PowerSearch.tsx"],"names":[],"mappings":"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"}
|
|
@@ -533,18 +533,25 @@ export function PowerSearch({
|
|
|
533
533
|
value: undefined
|
|
534
534
|
}
|
|
535
535
|
});
|
|
536
|
-
} else if (change.type === 'remove'
|
|
537
|
-
const
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
onChange(
|
|
536
|
+
} else if (change.type === 'remove') {
|
|
537
|
+
const keptIndices = new Set(_items.map(item => item.auxiliaryData?.filterIndex));
|
|
538
|
+
const firstRemovedIndex = filters.findIndex((_, i) => !keptIndices.has(i));
|
|
539
|
+
if (firstRemovedIndex >= 0) {
|
|
540
|
+
onChange(filters.filter((_, i) => keptIndices.has(i)), 'remove', firstRemovedIndex);
|
|
541
541
|
}
|
|
542
542
|
}
|
|
543
543
|
}, [config, filters, onChange, setPopoverState]);
|
|
544
544
|
|
|
545
|
-
// Tokenizer's Backspace
|
|
546
|
-
// locks every token of a read-only
|
|
547
|
-
|
|
545
|
+
// Tokenizer's Backspace and Clear all do not go through renderToken. This
|
|
546
|
+
// predicate locks each read-only filter, and every token of a read-only
|
|
547
|
+
// field.
|
|
548
|
+
const isItemRemovable = useCallback(item => {
|
|
549
|
+
if (isReadOnly) {
|
|
550
|
+
return false;
|
|
551
|
+
}
|
|
552
|
+
const filterIndex = item.auxiliaryData?.filterIndex;
|
|
553
|
+
return filterIndex == null || !filters[filterIndex]?.isReadOnly;
|
|
554
|
+
}, [filters, isReadOnly]);
|
|
548
555
|
|
|
549
556
|
// Handle clicking a token to edit
|
|
550
557
|
const handleTokenClick = useCallback(index => {
|
|
@@ -779,7 +786,8 @@ export function PowerSearch({
|
|
|
779
786
|
const announce = useAnnounce();
|
|
780
787
|
// PowerSearch words its Clear all as its record does; the field announces
|
|
781
788
|
// these words instead of Tokenizer's (component:Tokenizer AR7).
|
|
782
|
-
const
|
|
789
|
+
const hasReadOnlyFilter = filters.some(filter => filter.isReadOnly);
|
|
790
|
+
const clearAllMessage = useMemo(() => hasReadOnlyFilter ? t('@astryx.powersearch.editableFiltersRemoved') : t('@astryx.powersearch.allFiltersRemoved'), [hasReadOnlyFilter, t]);
|
|
783
791
|
const announcedResultCountRef = useRef(resultCountText);
|
|
784
792
|
useEffect(() => {
|
|
785
793
|
if (resultCountText === announcedResultCountRef.current) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../src/Resizable/ResizeHandle.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../src/Resizable/ResizeHandle.tsx"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,gBAAgB,CAAC;AAkBxB,KAAK,aAAa,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AA0NzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,SAAS,CAAC,cAAc,CAAC,EACzB,OAAO,CACR;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAEtC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAEhC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,6CAA6C;IAC7C,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B,yDAAyD;IACzD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;GAcG;AAEH,wBAAgB,YAAY,CAAC,EAC3B,SAAwB,EACxB,QAAQ,EAAE,YAAuB,EACjC,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAsB,EACtB,aAAsB,EACtB,KAAK,EAAE,cAAc,EACrB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,iBAAiB,+BAuQnB;yBAtRe,YAAY"}
|