@astryxdesign/core 0.7.7-canary.e70d5dc → 0.7.7-canary.f4edef8
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/Avatar/Avatar.d.ts.map +1 -1
- package/dist/Avatar/Avatar.js +1 -1
- package/dist/Breadcrumbs/BreadcrumbItem.d.ts.map +1 -1
- package/dist/Breadcrumbs/BreadcrumbItem.js +2 -1
- package/dist/Button/Button.d.ts.map +1 -1
- package/dist/Button/Button.js +3 -2
- package/dist/DateRangeInput/DateRangeInput.d.ts.map +1 -1
- package/dist/DateRangeInput/DateRangeInput.js +63 -49
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +49 -12
- 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/Lightbox/Lightbox.d.ts.map +1 -1
- package/dist/Lightbox/Lightbox.js +2 -1
- 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 +10 -2
- 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 +31 -89
- package/dist/TabList/Tab.d.ts.map +1 -1
- package/dist/TabList/Tab.js +4 -3
- 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 +12 -5
- 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 +79 -0
- package/dist/gestures/GestureHost.d.ts.map +1 -1
- package/dist/gestures/GestureHost.js +17 -9
- package/dist/gestures/wheelSegmenter.d.ts +14 -3
- package/dist/gestures/wheelSegmenter.d.ts.map +1 -1
- package/dist/gestures/wheelSegmenter.js +32 -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/useAttachment.d.ts +16 -8
- package/dist/hooks/useAttachment.d.ts.map +1 -1
- package/dist/hooks/useAttachment.js +35 -15
- 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/hooks/usePager.d.ts +261 -0
- package/dist/hooks/usePager.d.ts.map +1 -0
- package/dist/hooks/usePager.js +1169 -0
- 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/paging.d.ts +16 -5
- package/dist/motion/paging.d.ts.map +1 -1
- package/dist/motion/paging.js +34 -14
- 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/paging.d.ts +31 -20
- package/dist/motion/uikit/paging.d.ts.map +1 -1
- package/dist/motion/uikit/paging.js +41 -11
- 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/Avatar/Avatar.tsx +3 -1
- package/src/Breadcrumbs/BreadcrumbItem.tsx +4 -1
- package/src/Button/Button.tsx +3 -2
- package/src/DateRangeInput/DateRangeInput.doc.mjs +3 -2
- package/src/DateRangeInput/DateRangeInput.tsx +117 -71
- package/src/Dialog/Dialog.tsx +62 -11
- 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/Lightbox/Lightbox.tsx +2 -1
- 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 +14 -2
- 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 +34 -100
- package/src/TabList/Tab.tsx +5 -3
- package/src/Toast/Toast.tsx +5 -0
- package/src/Token/Token.tsx +2 -0
- package/src/Tokenizer/Tokenizer.tsx +15 -5
- package/src/Tokenizer/TokenizerItemRemovableContext.ts +22 -0
- package/src/gestures/GestureHost.ts +23 -7
- package/src/gestures/wheelSegmenter.ts +36 -7
- package/src/hooks/actionGroupTracker.ts +12 -56
- package/src/hooks/useAttachment.ts +56 -14
- package/src/hooks/useHighlightedOptionScroll.ts +15 -11
- package/src/hooks/useMediaQuery.doc.mjs +2 -2
- package/src/hooks/useMediaQuery.ts +13 -4
- package/src/hooks/usePager.ts +1446 -0
- 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/paging.ts +37 -14
- package/src/motion/roles.ts +20 -1
- package/src/motion/uikit/index.ts +5 -5
- package/src/motion/uikit/paging.ts +41 -10
- 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":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAqB3C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAmCrD;;;;;;GAMG;AACH,KAAK,eAAe,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzD;;GAEG;AACH,KAAK,iBAAiB,GACpB,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEzE;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG,iBAAiB,CAAC;AAE7D;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE1D;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAgBpD;AASD,eAAO,MAAM,WAAW;;;;;;;;;;EAUtB,CAAC;AA2JH,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAChD;AAsJD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,MAAM,CAAC,EACrB,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,WAAW,EACX,IAAI,EACJ,IAAW,EACX,KAAgB,EAChB,GAAG,EACH,MAAM,EACN,OAAc,EACd,IAAI,EACJ,EAAE,EACF,MAAM,EACN,GAAG,EACH,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+
|
|
1
|
+
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAqB3C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAmCrD;;;;;;GAMG;AACH,KAAK,eAAe,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzD;;GAEG;AACH,KAAK,iBAAiB,GACpB,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEzE;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG,iBAAiB,CAAC;AAE7D;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE1D;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAgBpD;AASD,eAAO,MAAM,WAAW;;;;;;;;;;EAUtB,CAAC;AA2JH,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAChD;AAsJD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,MAAM,CAAC,EACrB,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,WAAW,EACX,IAAI,EACJ,IAAW,EACX,KAAgB,EAChB,GAAG,EACH,MAAM,EACN,OAAc,EACd,IAAI,EACJ,EAAE,EACF,MAAM,EACN,GAAG,EACH,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BA+Vb;yBAnXe,MAAM"}
|
package/dist/Avatar/Avatar.js
CHANGED
|
@@ -590,7 +590,7 @@ export function Avatar({
|
|
|
590
590
|
size: numericSize
|
|
591
591
|
})
|
|
592
592
|
})]
|
|
593
|
-
}), status && /*#__PURE__*/_jsx("div", {
|
|
593
|
+
}), Boolean(status) && /*#__PURE__*/_jsx("div", {
|
|
594
594
|
...stylex.props(styles.status, resolvedShape === 'circle' ? dynamicStyles.statusPositionCircle(numericSize) : dynamicStyles.statusPositionCorner),
|
|
595
595
|
children: status
|
|
596
596
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BreadcrumbItem.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/BreadcrumbItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACd,KAAK,UAAU,EAChB,MAAM,OAAO,CAAC;AAWf,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAa5C,OAAO,EAIL,KAAK,gBAAgB,EACtB,MAAM,qCAAqC,CAAC;AAM7C,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,8BAA8B,CAAC;
|
|
1
|
+
{"version":3,"file":"BreadcrumbItem.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/BreadcrumbItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACd,KAAK,UAAU,EAChB,MAAM,OAAO,CAAC;AAWf,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAa5C,OAAO,EAIL,KAAK,gBAAgB,EACtB,MAAM,qCAAqC,CAAC;AAM7C,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,8BAA8B,CAAC;AASrE,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,SAAS,CAAC,aAAa,CAAC,EACxB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC/C;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;;;;;;;OAaG;IACH,IAAI,CAAC,EAAE,kBAAkB,EAAE,GAAG,SAAS,CAAC;IACxC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAC;CAC7B;AAsID;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,EAAE,EACF,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EAAE,aAAa,EACxB,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,mBAAmB,qBAkMrB;yBAjNe,cAAc"}
|
|
@@ -45,6 +45,7 @@ import { DropdownMenuContext, DropdownMenuRootOpenContext } from "../DropdownMen
|
|
|
45
45
|
import { MENU_ITEM_ROLES, MENU_ITEM_SELECTOR, MENU_BOUNDARY_SELECTOR } from "../DropdownMenu/menuItemRoles.js";
|
|
46
46
|
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
47
47
|
import { useInteractionModalityTracking } from "../utils/interactionModality.js";
|
|
48
|
+
import { isRenderable } from "../utils/isRenderable.js";
|
|
48
49
|
// =============================================================================
|
|
49
50
|
// Props
|
|
50
51
|
// =============================================================================
|
|
@@ -242,7 +243,7 @@ export function BreadcrumbItem({
|
|
|
242
243
|
});
|
|
243
244
|
const mergedItemRef = useMergedRefs(ref, liRef);
|
|
244
245
|
const content = /*#__PURE__*/_jsxs(_Fragment, {
|
|
245
|
-
children: [startIcon && /*#__PURE__*/_jsx("span", {
|
|
246
|
+
children: [isRenderable(startIcon) && /*#__PURE__*/_jsx("span", {
|
|
246
247
|
...{
|
|
247
248
|
className: "x78zum5 x6s0dn4 x2lah0s"
|
|
248
249
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAC;AACzD,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAgC3C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAKrD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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"}
|
package/dist/Button/Button.js
CHANGED
|
@@ -41,6 +41,7 @@ import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js"
|
|
|
41
41
|
import { usePressFeedback } from "../hooks/usePressFeedback.js";
|
|
42
42
|
import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
|
|
43
43
|
import english from "../i18n/generated-english/Button/Button.generated.js";
|
|
44
|
+
import { isRenderable } from "../utils/isRenderable.js";
|
|
44
45
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
45
46
|
registerEnglishFallback(english);
|
|
46
47
|
|
|
@@ -513,7 +514,7 @@ export function Button({
|
|
|
513
514
|
}), /*#__PURE__*/_jsxs("span", {
|
|
514
515
|
...stylex.props(styles.contentWrapper, isLoadingState && (delaySpinner ? loadingStyles.hiddenContentDelayed : loadingStyles.hiddenContent)),
|
|
515
516
|
"aria-hidden": isLoadingState || undefined,
|
|
516
|
-
children: [icon && /*#__PURE__*/_jsx("span", {
|
|
517
|
+
children: [isRenderable(icon) && /*#__PURE__*/_jsx("span", {
|
|
517
518
|
...stylex.props(styles.iconWrapper, iconBoxSizeStyles[iconSize]),
|
|
518
519
|
children: /*#__PURE__*/_jsx(IconDefaultSizeProvider, {
|
|
519
520
|
value: iconSize,
|
|
@@ -524,7 +525,7 @@ export function Button({
|
|
|
524
525
|
className: "xb3r6kr xlyipyv xeuugli"
|
|
525
526
|
},
|
|
526
527
|
children: children ?? label
|
|
527
|
-
}), !isIconOnly && endContent && /*#__PURE__*/_jsx("span", {
|
|
528
|
+
}), !isIconOnly && isRenderable(endContent) && /*#__PURE__*/_jsx("span", {
|
|
528
529
|
...{
|
|
529
530
|
className: "x3nfvp2 x6s0dn4 x1heor9g"
|
|
530
531
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../src/DateRangeInput/DateRangeInput.tsx"],"names":[],"mappings":"AA6CA,OAAO,EAGL,KAAK,WAAW,EAKjB,MAAM,UAAU,CAAC;AAIlB,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,aAAa,EACnB,MAAM,aAAa,CAAC;AAOrB,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAU9C,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,+BAA+B,CAAC;
|
|
1
|
+
{"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../src/DateRangeInput/DateRangeInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -43,6 +43,8 @@ import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
|
|
|
43
43
|
import { useLocale } from "../i18n/index.js";
|
|
44
44
|
import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
|
|
45
45
|
import english from "../i18n/generated-english/DateRangeInput/DateRangeInput.generated.js";
|
|
46
|
+
import "../Layer/layerViewportInset.stylex.js";
|
|
47
|
+
import { layerViewportInset } from "../Layer/layerViewportInset.stylex.js";
|
|
46
48
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
47
49
|
registerEnglishFallback(english);
|
|
48
50
|
const styles = {
|
|
@@ -63,6 +65,12 @@ const styles = {
|
|
|
63
65
|
kkrTdU: "xt0e3qv",
|
|
64
66
|
$$css: true
|
|
65
67
|
},
|
|
68
|
+
calendarPane: {
|
|
69
|
+
keTefX: "x1furv9r",
|
|
70
|
+
kCS8Yb: "x1rnznto",
|
|
71
|
+
kzQI83: "xq3h3fj",
|
|
72
|
+
$$css: true
|
|
73
|
+
},
|
|
66
74
|
presetButton: {
|
|
67
75
|
k1xSpc: "x1lliihq",
|
|
68
76
|
kzqmXN: "xh8yej3",
|
|
@@ -421,57 +429,63 @@ export function DateRangeInput({
|
|
|
421
429
|
}), isEffectivelyRequired && /*#__PURE__*/_jsx(VisuallyHidden, {
|
|
422
430
|
id: requiredID,
|
|
423
431
|
children: t('@astryx.field.required')
|
|
424
|
-
}), popover.render(/*#__PURE__*/
|
|
432
|
+
}), popover.render(/*#__PURE__*/_jsx("div", {
|
|
425
433
|
...{
|
|
426
|
-
className: "
|
|
434
|
+
className: "x1odjw0f xish69e x3v4n1"
|
|
427
435
|
},
|
|
428
|
-
children:
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
436
|
+
children: /*#__PURE__*/_jsxs("div", {
|
|
437
|
+
...{
|
|
438
|
+
className: "x78zum5 x1a02dak x7giv3"
|
|
439
|
+
},
|
|
440
|
+
children: [presets && presets.length > 0 && /*#__PURE__*/_jsx("div", {
|
|
441
|
+
role: "group",
|
|
442
|
+
"aria-label": t('@astryx.dateRangeInput.presetDateRanges'),
|
|
443
|
+
...mergeProps(themeProps('date-range-input-presets'), {
|
|
444
|
+
className: "x78zum5 xdt5ytf xzye2dw x1b2ylru xw8tdv1 x18b5jzi xl0t3rv x92x3c3 x1q0q8m5 xib2hle x10xtbk5 xmtqr6q x1iyjqo2 x1d77m7x"
|
|
445
|
+
}),
|
|
446
|
+
children: presets.map(preset => {
|
|
447
|
+
const presetRange = preset.getRange();
|
|
448
|
+
const isActive = isRangeEqual(value, presetRange);
|
|
449
|
+
const isPresetDisabled = isDisabled || !isRangeWithinSpan(presetRange, maxRangeSpan, minRangeSpan) || isDateDisabled(plainDateFromISO(presetRange.start)) || isDateDisabled(plainDateFromISO(presetRange.end));
|
|
450
|
+
return /*#__PURE__*/_jsx("button", {
|
|
451
|
+
type: "button"
|
|
452
|
+
// These presets are independent action buttons navigated by
|
|
453
|
+
// Tab, not a single-tab-stop listbox — so they are a labeled
|
|
454
|
+
// group of buttons, and the currently-applied preset is
|
|
455
|
+
// marked with aria-current (not aria-selected, a listbox
|
|
456
|
+
// concept that contradicted the Tab interaction) (forms-5).
|
|
457
|
+
,
|
|
458
|
+
"aria-current": isActive ? 'true' : undefined
|
|
459
|
+
// Focusable while disabled (AR3, spec:AST-085 FR1).
|
|
460
|
+
,
|
|
461
|
+
"aria-disabled": isPresetDisabled || undefined,
|
|
462
|
+
"aria-describedby": showsDisabledMessage ? disabledMessageTooltip.describedBy : undefined,
|
|
463
|
+
onClick: () => {
|
|
464
|
+
if (!isPresetDisabled) {
|
|
465
|
+
handleRangeSelect(presetRange);
|
|
466
|
+
}
|
|
467
|
+
},
|
|
468
|
+
...mergeProps(themeProps('date-range-input-preset', {
|
|
469
|
+
selected: isActive ? 'selected' : null,
|
|
470
|
+
disabled: isPresetDisabled ? 'disabled' : null
|
|
471
|
+
}), stylex.props(focusOutlineStyles.focusVisible, styles.presetButton, isActive && styles.presetButtonActive, isPresetDisabled && styles.presetButtonDisabled)),
|
|
472
|
+
children: preset.label
|
|
473
|
+
}, preset.label);
|
|
474
|
+
})
|
|
475
|
+
}), popover.isOpen && /*#__PURE__*/_jsx(Calendar, {
|
|
476
|
+
mode: "range",
|
|
477
|
+
value: optimisticValue,
|
|
478
|
+
onChange: handleRangeSelect,
|
|
479
|
+
min: min,
|
|
480
|
+
max: max,
|
|
481
|
+
dateConstraints: dateConstraints,
|
|
482
|
+
maxRangeSpan: maxRangeSpan,
|
|
483
|
+
minRangeSpan: minRangeSpan,
|
|
484
|
+
numberOfMonths: numberOfMonths,
|
|
485
|
+
weekStartsOn: weekStartsOn,
|
|
486
|
+
xstyle: presets && presets.length > 0 && styles.calendarPane
|
|
487
|
+
})]
|
|
488
|
+
})
|
|
475
489
|
}), {
|
|
476
490
|
placement: 'below',
|
|
477
491
|
alignment: 'start'
|
|
@@ -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";
|
|
@@ -54,15 +55,15 @@ import { DialogContext } from "./DialogContext.js";
|
|
|
54
55
|
import { themeProps } from "../utils/themeProps.js";
|
|
55
56
|
import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
|
|
56
57
|
import { useInteractionModalityTracking } from "../utils/interactionModality.js";
|
|
57
|
-
import { focusForLastInput } from "../utils/focusReturn.js";
|
|
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,
|
|
@@ -458,6 +459,42 @@ export function Dialog({
|
|
|
458
459
|
}
|
|
459
460
|
}, [isOpen, isInline]);
|
|
460
461
|
|
|
462
|
+
// A dialog that unmounts while open (rendered only while open, or removed
|
|
463
|
+
// with the rest of a view) never runs the close branch above, and removing a
|
|
464
|
+
// <dialog> does not run the browser's own focus return. Focus left inside
|
|
465
|
+
// it, or dropped to the body by the removal, goes back to the opener.
|
|
466
|
+
useEffect(() => {
|
|
467
|
+
if (isInline) {
|
|
468
|
+
return;
|
|
469
|
+
}
|
|
470
|
+
const dialog = dialogRef.current;
|
|
471
|
+
// Read now: a removed iframe's document has no window, so its frame
|
|
472
|
+
// element can no longer be found once the dialog is gone.
|
|
473
|
+
const host = dialog?.ownerDocument.defaultView?.frameElement ?? null;
|
|
474
|
+
return () => {
|
|
475
|
+
const trigger = triggerElementRef.current;
|
|
476
|
+
if (dialog == null || trigger == null) {
|
|
477
|
+
return;
|
|
478
|
+
}
|
|
479
|
+
// Checked once the commit has finished: StrictMode's simulated unmount
|
|
480
|
+
// leaves the dialog in the document, and only a real removal returns
|
|
481
|
+
// focus.
|
|
482
|
+
queueMicrotask(() => {
|
|
483
|
+
if (dialog.isConnected || !trigger.isConnected) {
|
|
484
|
+
return;
|
|
485
|
+
}
|
|
486
|
+
// isFocusLost reads the dialog's own document. For a dialog in an
|
|
487
|
+
// iframe, the document that hosts the frame must also have lost focus
|
|
488
|
+
// or keep it on that frame, wherever the opener is: a control the
|
|
489
|
+
// user pressed outside the frame to remove the dialog, or the frame
|
|
490
|
+
// itself, keeps its focus.
|
|
491
|
+
if (isFocusLost(dialog) && (host == null || isFocusLost(host))) {
|
|
492
|
+
focusForLastInput(trigger);
|
|
493
|
+
}
|
|
494
|
+
});
|
|
495
|
+
};
|
|
496
|
+
}, [isInline]);
|
|
497
|
+
|
|
461
498
|
// Host app-global surfaces (toasts) inside this modal while it is open, so
|
|
462
499
|
// they stay visible and operable above it.
|
|
463
500
|
useModalOutlet(dialogRef, isOpen && !isInline);
|
|
@@ -502,16 +539,13 @@ export function Dialog({
|
|
|
502
539
|
}
|
|
503
540
|
}, [isOpen, isInline, hasConsumerName, titleId]);
|
|
504
541
|
|
|
505
|
-
//
|
|
506
|
-
// the event target is the <dialog> element itself; clicks on child content
|
|
507
|
-
// always target the child. This avoids false positives from native browser
|
|
542
|
+
// A press on the ::backdrop targets the <dialog> itself, so native browser
|
|
508
543
|
// popups (date pickers, selects, color pickers) that render outside the
|
|
509
|
-
// dialog's
|
|
510
|
-
const
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
};
|
|
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);
|
|
515
549
|
|
|
516
550
|
// The native `cancel` event is the browser's own close-watcher firing: an
|
|
517
551
|
// Android back gesture, or a close request the stack never saw a press for.
|
|
@@ -602,8 +636,11 @@ export function Dialog({
|
|
|
602
636
|
})(), isFullscreen && styles.fullscreen, isFullscreen && isOpen && styles.fullscreenOpen, opensSettled && styles.openSettled, xstyle), className, style),
|
|
603
637
|
...layerClickBoundary({
|
|
604
638
|
...safeProps,
|
|
605
|
-
onClick: chainEventHandlers(
|
|
639
|
+
onClick: chainEventHandlers(backdropPress.onClick, onClickProp)
|
|
606
640
|
}),
|
|
641
|
+
onPointerDownCapture: chainEventHandlers(backdropPress.onPointerDownCapture, safeProps.onPointerDownCapture),
|
|
642
|
+
onPointerUpCapture: chainEventHandlers(backdropPress.onPointerUpCapture, safeProps.onPointerUpCapture),
|
|
643
|
+
onPointerCancelCapture: chainEventHandlers(backdropPress.onPointerCancelCapture, safeProps.onPointerCancelCapture),
|
|
607
644
|
onCancel: handleCancel,
|
|
608
645
|
"aria-modal": isHydrating ? undefined : 'true'
|
|
609
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
|