@astryxdesign/core 0.7.7-canary.c0929c8 → 0.7.7-canary.ce667be
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/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 +38 -30
- 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/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 +31 -89
- 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 +8 -2
- package/dist/Tokenizer/TokenizerItemRemovableContext.d.ts +3 -0
- package/dist/Tokenizer/TokenizerItemRemovableContext.d.ts.map +1 -0
- package/dist/Tokenizer/TokenizerItemRemovableContext.js +17 -0
- package/dist/astryx.css +74 -0
- package/dist/gestures/GestureHost.d.ts.map +1 -1
- package/dist/gestures/GestureHost.js +14 -8
- 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/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-locales/en.generated.d.ts.map +1 -1
- package/dist/i18n/generated-locales/en.generated.js +2 -1
- package/dist/i18n/generated-locales/pseudo.generated.d.ts.map +1 -1
- package/dist/i18n/generated-locales/pseudo.generated.js +2 -1
- package/dist/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 +4 -0
- package/locales/pseudo.json +3 -0
- package/package.json +9 -4
- package/src/Dialog/Dialog.tsx +25 -10
- package/src/Drawer/Drawer.tsx +27 -10
- 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.tsx +38 -31
- 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/Switch/switchTouch.ts +2 -10
- package/src/Switch/useSwitchTouch.ts +34 -100
- package/src/Toast/Toast.tsx +5 -0
- package/src/Token/Token.tsx +2 -0
- package/src/Tokenizer/Tokenizer.tsx +11 -2
- package/src/Tokenizer/TokenizerItemRemovableContext.ts +22 -0
- package/src/gestures/GestureHost.ts +20 -6
- package/src/hooks/actionGroupTracker.ts +12 -56
- 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-locales/en.generated.ts +1 -0
- package/src/i18n/generated-locales/pseudo.generated.ts +1 -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, {
|
|
@@ -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;
|
|
1
|
+
{"version":3,"file":"PowerSearch.d.ts","sourceRoot":"","sources":["../../src/PowerSearch/PowerSearch.tsx"],"names":[],"mappings":"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"}
|
|
@@ -17,6 +17,7 @@ import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, us
|
|
|
17
17
|
import * as stylex from '@stylexjs/stylex';
|
|
18
18
|
import { Tokenizer } from "../Tokenizer/index.js";
|
|
19
19
|
import { TokenizerClearAllMessageContext } from "../Tokenizer/TokenizerClearAllMessageContext.js";
|
|
20
|
+
import { TokenizerItemRemovableContext } from "../Tokenizer/TokenizerItemRemovableContext.js";
|
|
20
21
|
import { TypeaheadItem } from "../Typeahead/TypeaheadItem.js";
|
|
21
22
|
import { Token } from "../Token/index.js";
|
|
22
23
|
import { Avatar } from "../Avatar/index.js";
|
|
@@ -541,6 +542,10 @@ export function PowerSearch({
|
|
|
541
542
|
}
|
|
542
543
|
}, [config, filters, onChange, setPopoverState]);
|
|
543
544
|
|
|
545
|
+
// Tokenizer's Backspace does not go through renderToken. This predicate
|
|
546
|
+
// locks every token of a read-only field.
|
|
547
|
+
const isItemRemovable = useCallback(() => !isReadOnly, [isReadOnly]);
|
|
548
|
+
|
|
544
549
|
// Handle clicking a token to edit
|
|
545
550
|
const handleTokenClick = useCallback(index => {
|
|
546
551
|
if (isReadOnly || isDisabled) {
|
|
@@ -809,36 +814,39 @@ export function PowerSearch({
|
|
|
809
814
|
...themeProps('power-search'),
|
|
810
815
|
children: /*#__PURE__*/_jsx(TokenizerClearAllMessageContext, {
|
|
811
816
|
value: clearAllMessage,
|
|
812
|
-
children: /*#__PURE__*/_jsx(
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
817
|
+
children: /*#__PURE__*/_jsx(TokenizerItemRemovableContext, {
|
|
818
|
+
value: isItemRemovable,
|
|
819
|
+
children: /*#__PURE__*/_jsx(Tokenizer, {
|
|
820
|
+
handleRef: tokenizerRef,
|
|
821
|
+
label: label,
|
|
822
|
+
isLabelHidden: isLabelHidden,
|
|
823
|
+
searchSource: searchSource,
|
|
824
|
+
value: tokenizerValue,
|
|
825
|
+
onChange: handleTokenizerChange,
|
|
826
|
+
renderToken: renderToken,
|
|
827
|
+
renderItem: renderItem,
|
|
828
|
+
maxMenuItems: MAX_BROWSE_MENU_ITEMS,
|
|
829
|
+
menuWidth: menuWidth,
|
|
830
|
+
placeholder: filters.length === 0 ? placeholder : '',
|
|
831
|
+
hasAutoFocus: hasAutoFocus,
|
|
832
|
+
hasClear: hasClear && !isReadOnly,
|
|
833
|
+
startIcon: startIcon,
|
|
834
|
+
endContent: combinedEndContent,
|
|
835
|
+
isDisabled: isDisabled,
|
|
836
|
+
disabledMessage: disabledMessage,
|
|
837
|
+
size: size,
|
|
838
|
+
tokenOverflowBehavior: tokenOverflowBehavior,
|
|
839
|
+
hasEntriesOnFocus: true,
|
|
840
|
+
debounceMs: 0,
|
|
841
|
+
status: status,
|
|
842
|
+
statusVariant: statusVariant,
|
|
843
|
+
onFocus: onFocus,
|
|
844
|
+
onBlur: onBlur,
|
|
845
|
+
containerXstyle: xstyle,
|
|
846
|
+
containerClassName: className,
|
|
847
|
+
containerStyle: style,
|
|
848
|
+
"data-testid": testId
|
|
849
|
+
})
|
|
842
850
|
})
|
|
843
851
|
})
|
|
844
852
|
}), popover.render(popoverContent, {
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file SegmentedControl.tsx
|
|
3
|
-
* @input Uses React, StyleX, SegmentedControlContext, useListFocus,
|
|
3
|
+
* @input Uses React, StyleX, SegmentedControlContext, useListFocus,
|
|
4
|
+
* useKeyboardHint, useTouchPresentation, useSegmentedSelectionMotion
|
|
4
5
|
* @output Exports SegmentedControl component and SegmentedControlProps type
|
|
5
6
|
* @position Container wrapper; provides context to SegmentedControlItem children
|
|
6
7
|
*
|
|
@@ -8,6 +9,7 @@
|
|
|
8
9
|
* - /packages/core/src/SegmentedControl/SegmentedControl.doc.mjs
|
|
9
10
|
* - /packages/core/src/SegmentedControl/index.ts
|
|
10
11
|
* - /packages/core/src/SegmentedControl/SegmentedControl.test.tsx
|
|
12
|
+
* - /packages/core/src/SegmentedControl/useSegmentedSelectionMotion.ts
|
|
11
13
|
* - /packages/cli/assets/templates/blocks/components/SegmentedControl/ (showcase blocks)
|
|
12
14
|
*/
|
|
13
15
|
import React, { type ReactNode } from 'react';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAA+B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQ1E,OAAO,KAAK,EACV,oBAAoB,EACpB,sBAAsB,EACvB,MAAM,2BAA2B,CAAC;AAInC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAqMD;;;;;;;;;;;;GAYG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,KAAK,EACL,QAAQ,EACR,KAAK,EACL,IAAI,EAAE,QAAQ,EACd,MAAc,EACd,UAAkB,EAClB,eAAe,EACf,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,EAClB,kBAAkB,EAAE,mBAAmB,EACvC,GAAG,IAAI,EACR,EAAE,qBAAqB,qBAkLvB;yBApMe,gBAAgB"}
|