@astryxdesign/core 0.7.6 → 0.7.7-canary.0f12096
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/AppShell/AppShell.d.ts.map +1 -1
- package/dist/AppShell/AppShell.js +23 -3
- package/dist/BottomSheet/BottomSheetPanel.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheetPanel.js +16 -9
- package/dist/Chat/ChatComposerInput.d.ts +9 -0
- package/dist/Chat/ChatComposerInput.d.ts.map +1 -1
- package/dist/Chat/ChatComposerInput.js +2 -0
- package/dist/Chat/ChatMessage.js +2 -2
- package/dist/Chat/chatMessage.vars.stylex.d.ts +8 -8
- package/dist/Chat/chatMessage.vars.stylex.js +8 -8
- package/dist/CommandPalette/CommandPaletteInput.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPaletteInput.js +8 -1
- package/dist/DateInput/MonthScroller.d.ts.map +1 -1
- package/dist/DateInput/MonthScroller.js +72 -2
- package/dist/Drawer/Drawer.d.ts.map +1 -1
- package/dist/Drawer/Drawer.js +6 -0
- package/dist/Drawer/useDrawerDialogPresence.d.ts.map +1 -1
- package/dist/Drawer/useDrawerDialogPresence.js +4 -0
- package/dist/DropdownMenu/useMenuOverflow.d.ts +13 -3
- package/dist/DropdownMenu/useMenuOverflow.d.ts.map +1 -1
- package/dist/DropdownMenu/useMenuOverflow.js +31 -8
- package/dist/Field/PanelSearchInput.d.ts.map +1 -1
- package/dist/Field/PanelSearchInput.js +8 -1
- package/dist/Field/textEntryTraits.d.ts +6 -6
- package/dist/Field/textEntryTraits.js +6 -6
- package/dist/Layer/layerClickBoundary.d.ts +7 -1
- package/dist/Layer/layerClickBoundary.d.ts.map +1 -1
- package/dist/Layer/layerClickBoundary.js +2 -2
- package/dist/Layer/usePressPin.d.ts +95 -0
- package/dist/Layer/usePressPin.d.ts.map +1 -0
- package/dist/Layer/usePressPin.js +365 -0
- package/dist/Layer/useTouchTrigger.d.ts +23 -1
- package/dist/Layer/useTouchTrigger.d.ts.map +1 -1
- package/dist/Layer/useTouchTrigger.js +45 -7
- package/dist/Link/Link.d.ts.map +1 -1
- package/dist/Link/Link.js +1 -0
- package/dist/ProgressBar/ProgressBar.d.ts.map +1 -1
- package/dist/ProgressBar/ProgressBar.js +20 -9
- package/dist/ProgressBar/ProgressBarTouch.d.ts +29 -0
- package/dist/ProgressBar/ProgressBarTouch.d.ts.map +1 -0
- package/dist/ProgressBar/ProgressBarTouch.js +91 -0
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +25 -13
- package/dist/Slider/Slider.d.ts.map +1 -1
- package/dist/Slider/Slider.js +404 -131
- package/dist/Slider/sliderTouchController.d.ts +189 -0
- package/dist/Slider/sliderTouchController.d.ts.map +1 -0
- package/dist/Slider/sliderTouchController.js +1017 -0
- package/dist/Slider/useSliderTouch.d.ts +22 -0
- package/dist/Slider/useSliderTouch.d.ts.map +1 -0
- package/dist/Slider/useSliderTouch.js +56 -0
- package/dist/Tooltip/Tooltip.d.ts +30 -6
- package/dist/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/Tooltip/Tooltip.js +5 -0
- package/dist/Tooltip/index.d.ts +1 -1
- package/dist/Tooltip/index.d.ts.map +1 -1
- package/dist/Tooltip/useTooltip.d.ts +31 -5
- package/dist/Tooltip/useTooltip.d.ts.map +1 -1
- package/dist/Tooltip/useTooltip.js +59 -18
- package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
- package/dist/Typeahead/BaseTypeahead.js +19 -9
- package/dist/astryx.css +40 -6
- package/dist/gestures/GestureArena.d.ts +21 -2
- package/dist/gestures/GestureArena.d.ts.map +1 -1
- package/dist/gestures/GestureArena.js +23 -3
- package/dist/gestures/GestureHost.d.ts +123 -3
- package/dist/gestures/GestureHost.d.ts.map +1 -1
- package/dist/gestures/GestureHost.js +791 -12
- package/dist/gestures/GestureRecognizer.d.ts +15 -1
- package/dist/gestures/GestureRecognizer.d.ts.map +1 -1
- package/dist/gestures/GestureRecognizer.js +12 -0
- package/dist/gestures/PanGestureRecognizer.d.ts +8 -0
- package/dist/gestures/PanGestureRecognizer.d.ts.map +1 -1
- package/dist/gestures/PinchGestureRecognizer.d.ts +5 -1
- package/dist/gestures/PinchGestureRecognizer.d.ts.map +1 -1
- package/dist/gestures/PinchGestureRecognizer.js +10 -0
- package/dist/gestures/ScreenEdgePanGestureRecognizer.d.ts +3 -3
- package/dist/gestures/ScreenEdgePanGestureRecognizer.d.ts.map +1 -1
- package/dist/gestures/ScreenEdgePanGestureRecognizer.js +7 -5
- package/dist/gestures/nativeScroll.d.ts +16 -2
- package/dist/gestures/nativeScroll.d.ts.map +1 -1
- package/dist/gestures/nativeScroll.js +39 -8
- package/dist/gestures/recognizerInternals.d.ts +4 -2
- package/dist/gestures/recognizerInternals.d.ts.map +1 -1
- package/dist/gestures/types.d.ts +11 -0
- package/dist/gestures/types.d.ts.map +1 -1
- package/dist/gestures/types.js +7 -0
- package/dist/gestures/wheelSegmenter.d.ts +45 -0
- package/dist/gestures/wheelSegmenter.d.ts.map +1 -0
- package/dist/gestures/wheelSegmenter.js +98 -0
- package/dist/motion/animator.d.ts.map +1 -1
- package/dist/motion/animator.js +140 -19
- package/dist/motion/paging.d.ts +58 -0
- package/dist/motion/paging.d.ts.map +1 -0
- package/dist/motion/paging.js +128 -0
- package/dist/motion/uikit/index.d.ts +5 -3
- package/dist/motion/uikit/index.d.ts.map +1 -1
- package/dist/motion/uikit/index.js +5 -3
- package/dist/motion/uikit/paging.d.ts +160 -0
- package/dist/motion/uikit/paging.d.ts.map +1 -0
- package/dist/motion/uikit/paging.js +162 -0
- package/dist/motion/uikit/progressBar.d.ts +59 -0
- package/dist/motion/uikit/progressBar.d.ts.map +1 -0
- package/dist/motion/uikit/progressBar.js +82 -0
- package/dist/motion/uikit/scroll.d.ts +0 -19
- package/dist/motion/uikit/scroll.d.ts.map +1 -1
- package/dist/motion/uikit/scroll.js +2 -21
- package/dist/motion/uikit/slider.d.ts +97 -0
- package/dist/motion/uikit/slider.d.ts.map +1 -0
- package/dist/motion/uikit/slider.js +111 -0
- package/dist/motion/uikit/springs.d.ts +46 -1
- package/dist/motion/uikit/springs.d.ts.map +1 -1
- package/dist/motion/uikit/springs.js +48 -4
- package/dist/utils/selectionLock.d.ts +43 -0
- package/dist/utils/selectionLock.d.ts.map +1 -1
- package/dist/utils/selectionLock.js +394 -6
- package/package.json +5 -5
- package/src/AppShell/AppShell.doc.mjs +10 -0
- package/src/AppShell/AppShell.tsx +48 -2
- package/src/BottomSheet/BottomSheetPanel.tsx +16 -9
- package/src/Chat/Chat.doc.mjs +1 -0
- package/src/Chat/ChatComposerInput.doc.mjs +11 -0
- package/src/Chat/ChatComposerInput.tsx +11 -0
- package/src/Chat/ChatMessage.tsx +2 -2
- package/src/Chat/chatMessage.vars.stylex.ts +8 -8
- package/src/CommandPalette/CommandPaletteInput.tsx +6 -0
- package/src/DateInput/MonthScroller.tsx +63 -5
- package/src/Drawer/Drawer.tsx +6 -0
- package/src/Drawer/useDrawerDialogPresence.ts +4 -0
- package/src/DropdownMenu/useMenuOverflow.ts +44 -8
- package/src/Field/PanelSearchInput.tsx +6 -0
- package/src/Field/textEntryTraits.ts +6 -6
- package/src/Layer/layerClickBoundary.ts +2 -2
- package/src/Layer/usePressPin.ts +516 -0
- package/src/Layer/useTouchTrigger.ts +56 -6
- package/src/Link/Link.tsx +3 -0
- package/src/ProgressBar/ProgressBar.doc.mjs +3 -3
- package/src/ProgressBar/ProgressBar.tsx +82 -11
- package/src/ProgressBar/ProgressBarTouch.ts +109 -0
- package/src/Selector/Selector.tsx +29 -2
- package/src/Slider/Slider.doc.mjs +11 -7
- package/src/Slider/Slider.tsx +539 -132
- package/src/Slider/sliderTouchController.ts +1209 -0
- package/src/Slider/useSliderTouch.ts +78 -0
- package/src/Tooltip/Tooltip.doc.mjs +21 -6
- package/src/Tooltip/Tooltip.tsx +42 -5
- package/src/Tooltip/index.ts +1 -0
- package/src/Tooltip/useTooltip.doc.mjs +4 -2
- package/src/Tooltip/useTooltip.tsx +84 -21
- package/src/Typeahead/BaseTypeahead.tsx +16 -8
- package/src/gestures/GestureArena.ts +45 -4
- package/src/gestures/GestureHost.ts +949 -12
- package/src/gestures/GestureRecognizer.ts +28 -0
- package/src/gestures/PanGestureRecognizer.ts +8 -0
- package/src/gestures/PinchGestureRecognizer.ts +16 -1
- package/src/gestures/README.md +82 -3
- package/src/gestures/ScreenEdgePanGestureRecognizer.ts +7 -5
- package/src/gestures/nativeScroll.ts +49 -9
- package/src/gestures/recognizerInternals.ts +9 -2
- package/src/gestures/types.ts +12 -0
- package/src/gestures/wheelSegmenter.ts +114 -0
- package/src/motion/MEASUREMENTS.md +8 -1
- package/src/motion/README.md +6 -3
- package/src/motion/animator.ts +193 -25
- package/src/motion/paging.ts +138 -0
- package/src/motion/uikit/index.ts +5 -3
- package/src/motion/uikit/paging.ts +162 -0
- package/src/motion/uikit/progressBar.ts +82 -0
- package/src/motion/uikit/scroll.ts +2 -18
- package/src/motion/uikit/slider.ts +105 -0
- package/src/motion/uikit/springs.ts +37 -2
- package/src/utils/selectionLock.ts +501 -6
- package/dist/motion/selectPage.d.ts +0 -26
- package/dist/motion/selectPage.d.ts.map +0 -1
- package/dist/motion/selectPage.js +0 -55
- package/src/motion/selectPage.ts +0 -55
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShell.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAwCf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AA+ChD;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,GAAG,MAAM,CAAC;AAE9D;;;;;;;GAOG;AAEH;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAEhC;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC;IAE7B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,eAAe,GAAG,SAAS,CAAC;IAEhD;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;
|
|
1
|
+
{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShell.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAwCf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AA+ChD;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,GAAG,MAAM,CAAC;AAE9D;;;;;;;GAOG;AAEH;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAEhC;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC;IAE7B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,eAAe,GAAG,SAAS,CAAC;IAEhD;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAuQD,wBAAgB,QAAQ,CAAC,EACvB,OAAoB,EACpB,MAAM,EACN,QAAQ,EACR,cAAc,EACd,aAAa,EAAE,UAAU,EACzB,MAAe,EACf,SAAS,EACT,OAAO,EACP,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,aAAa,qBA8xBf;yBA7yBe,QAAQ"}
|
|
@@ -215,6 +215,23 @@ const styles = {
|
|
|
215
215
|
kY2c9j: "x1vjfegm",
|
|
216
216
|
$$css: true
|
|
217
217
|
},
|
|
218
|
+
headerSafeAreaTop: {
|
|
219
|
+
kLKAdn: "x1mrd0q",
|
|
220
|
+
$$css: true
|
|
221
|
+
},
|
|
222
|
+
headerSafeAreaSides: {
|
|
223
|
+
kZCmMZ: "xs5q72w xqbmqmu",
|
|
224
|
+
kwRFfy: "x180b3rg x17h5b6w",
|
|
225
|
+
$$css: true
|
|
226
|
+
},
|
|
227
|
+
headerStickyBelowTopInset: {
|
|
228
|
+
k87sOh: "xz44ai8",
|
|
229
|
+
$$css: true
|
|
230
|
+
},
|
|
231
|
+
mainSafeAreaEnd: {
|
|
232
|
+
kGO01o: "xvmia7e",
|
|
233
|
+
$$css: true
|
|
234
|
+
},
|
|
218
235
|
panelAutoFill: {
|
|
219
236
|
kUk6DE: "x98rzlu",
|
|
220
237
|
kVQacm: "xysyzu8",
|
|
@@ -535,7 +552,7 @@ export function AppShell({
|
|
|
535
552
|
role: "banner",
|
|
536
553
|
...mergeProps(themeProps('app-shell-header', {
|
|
537
554
|
variant
|
|
538
|
-
}), stylex.props(headerAreaStyle, isAuto && styles.headerSticky)),
|
|
555
|
+
}), stylex.props(headerAreaStyle, isAuto && styles.headerSticky, styles.headerSafeAreaTop, styles.headerSafeAreaSides)),
|
|
539
556
|
children: headerInner
|
|
540
557
|
}) : undefined;
|
|
541
558
|
|
|
@@ -805,7 +822,7 @@ export function AppShell({
|
|
|
805
822
|
tabIndex: isMainScrollRegion ? 0 : -1,
|
|
806
823
|
isScrollable: isFill,
|
|
807
824
|
onBlur: handleMainBlur,
|
|
808
|
-
xstyle: [contentAreaStyle, drawsMainFocusRing && shouldElevateWithCorner && styles.mainElevatedCorner, drawsMainFocusRing ? [focusOutlineStyles.focusVisible, styles.mainScrollRegionInset] : styles.mainFocusTarget],
|
|
825
|
+
xstyle: [contentAreaStyle, drawsMainFocusRing && shouldElevateWithCorner && styles.mainElevatedCorner, drawsMainFocusRing ? [focusOutlineStyles.focusVisible, styles.mainScrollRegionInset] : styles.mainFocusTarget, styles.mainSafeAreaEnd],
|
|
809
826
|
children: children
|
|
810
827
|
});
|
|
811
828
|
|
|
@@ -850,7 +867,10 @@ export function AppShell({
|
|
|
850
867
|
role: headerContent == null ? 'banner' : undefined,
|
|
851
868
|
...mergeProps(themeProps('app-shell-header', {
|
|
852
869
|
variant
|
|
853
|
-
}), stylex.props(headerAreaStyle, isAuto && styles.headerSticky
|
|
870
|
+
}), stylex.props(headerAreaStyle, isAuto && styles.headerSticky, styles.headerSafeAreaSides,
|
|
871
|
+
// Under a banner, the banner's wrapper pads the top inset. This top
|
|
872
|
+
// bar takes only the side insets.
|
|
873
|
+
headerContent == null && styles.headerSafeAreaTop, isAuto && headerContent != null && styles.headerStickyBelowTopInset)),
|
|
854
874
|
children: /*#__PURE__*/_jsx(LayoutHeader, {
|
|
855
875
|
padding: 0,
|
|
856
876
|
hasDivider: navHasDividers,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetPanel.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetPanel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA+B5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,eAAe,CAAC;AAQvB,QAAA,MAAM,cAAc;;;;CAIV,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,cAAc,CAAC;AAC5D,YAAY,EAAC,oBAAoB,EAAC,CAAC;AA4CnC,eAAO,MAAM,2BAA2B,2DACkB,CAAC;AAsM3D,MAAM,MAAM,sBAAsB,GAChC,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEjD,MAAM,MAAM,qBAAqB,GAC7B;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,GAChB;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAC,GACjC;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC1C,eAAe,EAAE,MAAM,CAAC;CACzB,GACD;IAAC,IAAI,EAAE,SAAS,CAAA;CAAC,CAAC;AAEtB,UAAU,qBAAsB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,KAAK,EAAE,qBAAqB,CAAC;IAC7B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,MAAM,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAC5C,mEAAmE;IACnE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,UAAU,CAAC,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IACjD,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gFAAgF;IAChF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,cAAc,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3D,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACzD,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;CAC7D;AA2HD,4EAA4E;AAC5E,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,KAAK,EACL,eAAe,EACf,MAAM,EACN,KAAK,EACL,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,KAAK,EACL,QAAQ,EACR,MAAM,EACN,cAAsB,EACtB,cAAc,EACd,eAAe,EACf,qBAA4B,EAC5B,kBAA0B,EAC1B,SAAS,EACT,cAAc,EACd,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,GAAG,KAAK,EACT,EAAE,qBAAqB,+
|
|
1
|
+
{"version":3,"file":"BottomSheetPanel.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetPanel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA+B5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,eAAe,CAAC;AAQvB,QAAA,MAAM,cAAc;;;;CAIV,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,cAAc,CAAC;AAC5D,YAAY,EAAC,oBAAoB,EAAC,CAAC;AA4CnC,eAAO,MAAM,2BAA2B,2DACkB,CAAC;AAsM3D,MAAM,MAAM,sBAAsB,GAChC,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEjD,MAAM,MAAM,qBAAqB,GAC7B;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,GAChB;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAC,GACjC;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC1C,eAAe,EAAE,MAAM,CAAC;CACzB,GACD;IAAC,IAAI,EAAE,SAAS,CAAA;CAAC,CAAC;AAEtB,UAAU,qBAAsB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,KAAK,EAAE,qBAAqB,CAAC;IAC7B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,MAAM,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAC5C,mEAAmE;IACnE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,UAAU,CAAC,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IACjD,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gFAAgF;IAChF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,cAAc,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3D,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACzD,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;CAC7D;AA2HD,4EAA4E;AAC5E,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,KAAK,EACL,eAAe,EACf,MAAM,EACN,KAAK,EACL,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,KAAK,EACL,QAAQ,EACR,MAAM,EACN,cAAsB,EACtB,cAAc,EACd,eAAe,EACf,qBAA4B,EAC5B,kBAA0B,EAC1B,SAAS,EACT,cAAc,EACd,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,GAAG,KAAK,EACT,EAAE,qBAAqB,+BAyZvB;yBAjbe,gBAAgB"}
|
|
@@ -444,10 +444,23 @@ export function BottomSheetPanel({
|
|
|
444
444
|
if (motion == null) {
|
|
445
445
|
return;
|
|
446
446
|
}
|
|
447
|
-
|
|
447
|
+
// React can run this effect again for the same motion, for example when
|
|
448
|
+
// a Suspense boundary shows this content again. The passive effect below
|
|
449
|
+
// does not run again then, so the motion it started stays started, and a
|
|
450
|
+
// completion completes at once instead of waiting for that effect.
|
|
451
|
+
if (startedMotionRef.current !== motion) {
|
|
452
|
+
startedMotionRef.current = null;
|
|
453
|
+
}
|
|
448
454
|
pendingMotionCompleteRef.current = null;
|
|
455
|
+
const complete = () => {
|
|
456
|
+
if (startedMotionRef.current === motion) {
|
|
457
|
+
onMotionCompleteRef.current?.(motion);
|
|
458
|
+
} else {
|
|
459
|
+
pendingMotionCompleteRef.current = motion;
|
|
460
|
+
}
|
|
461
|
+
};
|
|
449
462
|
if (motion === 'entering' && reactivatedEntranceRef.current) {
|
|
450
|
-
|
|
463
|
+
complete();
|
|
451
464
|
return;
|
|
452
465
|
}
|
|
453
466
|
// What ends a motion: the fade is opacity, and the entrance, alignment and
|
|
@@ -456,13 +469,7 @@ export function BottomSheetPanel({
|
|
|
456
469
|
// opacity. The entrance still waits on its instant transform, so the
|
|
457
470
|
// retained sheet's fade starts at once and the two fades cross.
|
|
458
471
|
const crossFadeMotion = isCrossFade && motion === 'exiting';
|
|
459
|
-
return waitForTransition(elementRef.current, motion === 'fading' || crossFadeMotion ? 'opacity' : 'transform',
|
|
460
|
-
if (startedMotionRef.current === motion) {
|
|
461
|
-
onMotionCompleteRef.current?.(motion);
|
|
462
|
-
} else {
|
|
463
|
-
pendingMotionCompleteRef.current = motion;
|
|
464
|
-
}
|
|
465
|
-
});
|
|
472
|
+
return waitForTransition(elementRef.current, motion === 'fading' || crossFadeMotion ? 'opacity' : 'transform', complete);
|
|
466
473
|
}, [motion, isCrossFade]);
|
|
467
474
|
// The snap is transform-only; the layout height reconciles when it lands.
|
|
468
475
|
// waitForTransition — the same helper the motion states use — resolves that
|
|
@@ -27,6 +27,7 @@ import type { BaseProps } from '../BaseProps.js';
|
|
|
27
27
|
import type { SearchableItem, SearchSource } from '../Typeahead/types.js';
|
|
28
28
|
import { type UseChatPasteAsTokenReturn } from './useChatPasteAsToken.js';
|
|
29
29
|
import { type BadgeProps } from '../Badge/index.js';
|
|
30
|
+
import type { EnterKeyHint } from '../Field/textEntryTraits.js';
|
|
30
31
|
/** Imperative handle exposed by ChatComposerInput via handleRef */
|
|
31
32
|
export interface ChatComposerInputHandle {
|
|
32
33
|
/** Insert a token (badge chip) at the current cursor position */
|
|
@@ -180,6 +181,14 @@ export interface ChatComposerInputProps extends Omit<BaseProps<HTMLDivElement>,
|
|
|
180
181
|
* never submits while a composition is in progress.
|
|
181
182
|
*/
|
|
182
183
|
onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;
|
|
184
|
+
/**
|
|
185
|
+
* What the Return key of a touch keyboard says (the native
|
|
186
|
+
* `enterkeyhint`). Enter sends the message, so the key says so: iOS shows
|
|
187
|
+
* its Send key. When `onKeyDown` makes Enter insert a line break on touch
|
|
188
|
+
* keyboards, pass `'enter'` so the key shows Return again.
|
|
189
|
+
* @default 'send'
|
|
190
|
+
*/
|
|
191
|
+
enterKeyHint?: EnterKeyHint;
|
|
183
192
|
}
|
|
184
193
|
export declare function ChatComposerInput(props: ChatComposerInputProps): import("react").JSX.Element;
|
|
185
194
|
export declare namespace ChatComposerInput {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatComposerInput.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatComposerInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAML,KAAK,SAAS,EACd,KAAK,aAAa,EAClB,KAAK,cAAc,EAEpB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,cAAc,EAAE,YAAY,EAAC,MAAM,oBAAoB,CAAC;AAqBrE,OAAO,EAEL,KAAK,yBAAyB,EAC/B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAQ,KAAK,UAAU,EAAC,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"ChatComposerInput.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatComposerInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -150,6 +150,7 @@ export function ChatComposerInput(props) {
|
|
|
150
150
|
onFiles,
|
|
151
151
|
onSubmit = composerCtx?.onSubmit,
|
|
152
152
|
onKeyDown: onKeyDownProp,
|
|
153
|
+
enterKeyHint = 'send',
|
|
153
154
|
xstyle,
|
|
154
155
|
className,
|
|
155
156
|
style,
|
|
@@ -638,6 +639,7 @@ export function ChatComposerInput(props) {
|
|
|
638
639
|
,
|
|
639
640
|
tabIndex: 0,
|
|
640
641
|
contentEditable: !isDisabled,
|
|
642
|
+
enterKeyHint: enterKeyHint,
|
|
641
643
|
suppressContentEditableWarning: true,
|
|
642
644
|
onInput: handleInput,
|
|
643
645
|
onClick: handleEditorClick,
|
package/dist/Chat/ChatMessage.js
CHANGED
|
@@ -67,7 +67,7 @@ const styles = {
|
|
|
67
67
|
$$css: true
|
|
68
68
|
},
|
|
69
69
|
avatarOffset: {
|
|
70
|
-
"--
|
|
70
|
+
"--_chat-avatar-offset": "xwbd0jv x1p8rq6b",
|
|
71
71
|
$$css: true
|
|
72
72
|
},
|
|
73
73
|
contentColumn: {
|
|
@@ -188,7 +188,7 @@ export function ChatMessage({
|
|
|
188
188
|
}), stylex.props(styles.avatarOffset, styles.root, rootAlignment, hasAvatar && rootGap, xstyle), className, styleProp),
|
|
189
189
|
children: [hasAvatar && /*#__PURE__*/_jsx("div", {
|
|
190
190
|
...{
|
|
191
|
-
className: "xjl7jj x2lah0s
|
|
191
|
+
className: "xjl7jj x2lah0s xb1t4hs"
|
|
192
192
|
},
|
|
193
193
|
children: avatar
|
|
194
194
|
}), /*#__PURE__*/_jsxs("div", {
|
|
@@ -2,15 +2,15 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
2
2
|
/**
|
|
3
3
|
* Per-message values ChatMessage sets on its article for its own slots.
|
|
4
4
|
*
|
|
5
|
-
* `
|
|
6
|
-
* bubble in this message renders a name, else none. Each article sets
|
|
7
|
-
* its own `:has([data-chat-name])`, a parent-relative rule: a
|
|
8
|
-
* `:has(~ …)` in the global stylesheet makes WebKit re-check
|
|
9
|
-
* sibling on each insertion into any container, so filling one
|
|
10
|
-
* quadratically. A message nested in another sets its own value, so it
|
|
11
|
-
* inherits the outer message's.
|
|
5
|
+
* `--_chat-avatar-offset` is the avatar's top spacing: the name row's spacing
|
|
6
|
+
* when a bubble in this message renders a name, else none. Each article sets
|
|
7
|
+
* it from its own `:has([data-chat-name])`, a parent-relative rule: a
|
|
8
|
+
* sibling-relative `:has(~ …)` in the global stylesheet makes WebKit re-check
|
|
9
|
+
* every earlier sibling on each insertion into any container, so filling one
|
|
10
|
+
* grows quadratically. A message nested in another sets its own value, so it
|
|
11
|
+
* never inherits the outer message's.
|
|
12
12
|
*/
|
|
13
13
|
export declare const chatMessageVars: stylex.VarGroup<Readonly<{
|
|
14
|
-
|
|
14
|
+
'--_chat-avatar-offset': string;
|
|
15
15
|
}>, symbol>;
|
|
16
16
|
//# sourceMappingURL=chatMessage.vars.stylex.d.ts.map
|
|
@@ -5,15 +5,15 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
5
5
|
/**
|
|
6
6
|
* Per-message values ChatMessage sets on its article for its own slots.
|
|
7
7
|
*
|
|
8
|
-
* `
|
|
9
|
-
* bubble in this message renders a name, else none. Each article sets
|
|
10
|
-
* its own `:has([data-chat-name])`, a parent-relative rule: a
|
|
11
|
-
* `:has(~ …)` in the global stylesheet makes WebKit re-check
|
|
12
|
-
* sibling on each insertion into any container, so filling one
|
|
13
|
-
* quadratically. A message nested in another sets its own value, so it
|
|
14
|
-
* inherits the outer message's.
|
|
8
|
+
* `--_chat-avatar-offset` is the avatar's top spacing: the name row's spacing
|
|
9
|
+
* when a bubble in this message renders a name, else none. Each article sets
|
|
10
|
+
* it from its own `:has([data-chat-name])`, a parent-relative rule: a
|
|
11
|
+
* sibling-relative `:has(~ …)` in the global stylesheet makes WebKit re-check
|
|
12
|
+
* every earlier sibling on each insertion into any container, so filling one
|
|
13
|
+
* grows quadratically. A message nested in another sets its own value, so it
|
|
14
|
+
* never inherits the outer message's.
|
|
15
15
|
*/
|
|
16
16
|
export const chatMessageVars = {
|
|
17
|
-
|
|
17
|
+
"--_chat-avatar-offset": "var(--_chat-avatar-offset)",
|
|
18
18
|
__varGroupHash__: "x1v1du0q"
|
|
19
19
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandPaletteInput.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPaletteInput.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAcf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"CommandPaletteInput.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPaletteInput.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAcf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA2E5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,CAAC,gBAAgB,CAAC,EAC3B,UAAU,CACX;IACC,iEAAiE;IACjE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAElC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;CACvD;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EAAE,eAAe,EACtB,aAAa,EACb,WAAW,EAAE,oBAAoB,EACjC,KAAK,EACL,YAAmB,EACnB,UAAU,EACV,QAAQ,EACR,SAAS,EACT,OAAO,EACP,MAAM,EACN,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,wBAAwB,+BA2L1B;yBA3Me,mBAAmB"}
|
|
@@ -30,6 +30,7 @@ import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
|
30
30
|
import { useBusyAnnouncement } from "../hooks/useBusyAnnouncement.js";
|
|
31
31
|
import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
|
|
32
32
|
import english from "../i18n/generated-english/CommandPalette/CommandPaletteInput.generated.js";
|
|
33
|
+
import { textEntryTraitAttributes } from "../Field/textEntryTraits.js";
|
|
33
34
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
34
35
|
registerEnglishFallback(english);
|
|
35
36
|
const styles = {
|
|
@@ -189,7 +190,13 @@ export function CommandPaletteInput({
|
|
|
189
190
|
...props,
|
|
190
191
|
ref: useMergedRefs(ref, inputRef, modalityRef),
|
|
191
192
|
...(isKeyboardFocus ? focusOutlineProps.focusVisible(styles.input) : focusOutlineProps.suppressed(styles.input)),
|
|
192
|
-
type: "text"
|
|
193
|
+
type: "text"
|
|
194
|
+
// Autocorrect would rewrite names and identifiers.
|
|
195
|
+
,
|
|
196
|
+
...textEntryTraitAttributes({
|
|
197
|
+
enterKeyHint: 'search',
|
|
198
|
+
hasAutoCorrect: false
|
|
199
|
+
}),
|
|
193
200
|
role: ctx ? 'combobox' : standaloneRole,
|
|
194
201
|
"aria-expanded": ctx ? ctx.isOpen && hasListbox : callerSets('aria-expanded') ? props['aria-expanded'] : callerOwnsPopup || undefined,
|
|
195
202
|
"aria-autocomplete": ctx ? 'list' : callerSets('aria-autocomplete') ? props['aria-autocomplete'] : callerOwnsPopup ? 'list' : undefined,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MonthScroller.d.ts","sourceRoot":"","sources":["../../src/DateInput/MonthScroller.tsx"],"names":[],"mappings":"AAqDA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,aAAa,EAClB,KAAK,SAAS,EAOf,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"MonthScroller.d.ts","sourceRoot":"","sources":["../../src/DateInput/MonthScroller.tsx"],"names":[],"mappings":"AAqDA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,aAAa,EAClB,KAAK,SAAS,EAOf,MAAM,UAAU,CAAC;AAiNlB,MAAM,WAAW,mBAAmB;IAClC,0DAA0D;IAC1D,aAAa,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;CACxE;AAED,MAAM,WAAW,kBAAkB;IACjC,yEAAyE;IACzE,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IACxD,+CAA+C;IAC/C,aAAa,EAAE,MAAM,CAAC;IACtB,8CAA8C;IAC9C,aAAa,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,+DAA+D;IAC/D,oBAAoB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,+BAA+B;IAC/B,YAAY,EAAE,SAAS,GAAG,IAAI,CAAC;IAC/B,4CAA4C;IAC5C,KAAK,EAAE,SAAS,CAAC;IACjB,2DAA2D;IAC3D,cAAc,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAC;IAC7C,gCAAgC;IAChC,YAAY,EAAE,SAAS,CAAC;IACxB,kCAAkC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,aAAa,EACb,aAAa,EACb,iBAAiB,EACjB,oBAAoB,EACpB,YAAY,EACZ,KAAK,EACL,cAAc,EACd,YAAY,EACZ,QAAQ,GACT,EAAE,kBAAkB,+BAmjBpB;yBA9jBe,aAAa"}
|
|
@@ -38,6 +38,7 @@ import { colorVars, radiusVars, fontWeightVars, typeScaleVars, durationVars, bor
|
|
|
38
38
|
import { focusOutlineStyles } from "../utils/index.js";
|
|
39
39
|
import { plainDateFormatStandaloneMonthYear } from "../utils/plainDate.js";
|
|
40
40
|
import { plainDateAddDays, plainDateDayOfWeek, plainDateFormat, plainDateIsEqual, plainDateToISO, DATE_FORMAT_WITH_WEEKDAY } from "../utils/index.js";
|
|
41
|
+
import { reducedMotionFade } from "../motion/reducedMotion.js";
|
|
41
42
|
import "./tokens.stylex.js";
|
|
42
43
|
import { dateInputTouchSizes, dateInputTouchGeometry } from "./tokens.stylex.js";
|
|
43
44
|
import { useOwnScrollGesture } from "./useOwnScrollGesture.js";
|
|
@@ -251,7 +252,25 @@ export function MonthScroller({
|
|
|
251
252
|
hasPositionedRef.current = true;
|
|
252
253
|
scroller.scrollLeft = scrollOffsetForRow(initialMonthIndex - minMonthIndex, paneSize, isRTL);
|
|
253
254
|
}, [paneSize, initialMonthIndex, minMonthIndex, isRTL]);
|
|
255
|
+
|
|
256
|
+
// The Reduced Motion dip of a step on a touch screen, owned here so a
|
|
257
|
+
// second step or the unmount clears it.
|
|
258
|
+
const dipRef = useRef(null);
|
|
259
|
+
const stopDip = useCallback(() => {
|
|
260
|
+
const dip = dipRef.current;
|
|
261
|
+
if (dip != null) {
|
|
262
|
+
window.clearTimeout(dip.timer);
|
|
263
|
+
dip.animation.cancel();
|
|
264
|
+
dipRef.current = null;
|
|
265
|
+
}
|
|
266
|
+
}, []);
|
|
267
|
+
// Synchronizes with the dip's timer and animation: neither outlives the
|
|
268
|
+
// scroller.
|
|
269
|
+
useEffect(() => stopDip, [stopDip]);
|
|
254
270
|
const scrollToMonth = useCallback((monthIndex, behavior = 'smooth') => {
|
|
271
|
+
// Every step replaces a running dip, whichever way it moves. Otherwise
|
|
272
|
+
// the dip's landing would undo a jump or an immediate step made after it.
|
|
273
|
+
stopDip();
|
|
255
274
|
const scroller = scrollerRef.current;
|
|
256
275
|
if (scroller == null || paneSize === 0) {
|
|
257
276
|
return;
|
|
@@ -274,12 +293,63 @@ export function MonthScroller({
|
|
|
274
293
|
recenter(scroller, row);
|
|
275
294
|
return;
|
|
276
295
|
}
|
|
296
|
+
const left = scrollOffsetForRow(row, paneSize, isRTL);
|
|
297
|
+
// Under reduced motion the month changes without travel: at once on a fine
|
|
298
|
+
// primary pointer, under an opacity dip on a coarse one (reducedMotionFade).
|
|
299
|
+
const fade = behavior === 'smooth' ? reducedMotionFade(scroller) : null;
|
|
300
|
+
if (fade != null) {
|
|
301
|
+
// The window mounts around the target first, and the scroll lands in
|
|
302
|
+
// the layout effect below, as a far jump does. So nothing moves the
|
|
303
|
+
// window after the jump. If the window followed the jump, WebKit would
|
|
304
|
+
// re-snap it one pane further on every frame. A scroll that lands on
|
|
305
|
+
// the centre row reports nothing.
|
|
306
|
+
const land = () => {
|
|
307
|
+
// The landing is the newest steer. An earlier steer whose scroll
|
|
308
|
+
// never arrived would otherwise hide every scroll after it, a
|
|
309
|
+
// trackpad's included. Closing the wheels makes such a steer: it
|
|
310
|
+
// re-asserts the month already in view.
|
|
311
|
+
steeredRowRef.current = null;
|
|
312
|
+
if (row === centerRowRef.current) {
|
|
313
|
+
scroller.scrollTo({
|
|
314
|
+
left,
|
|
315
|
+
behavior: 'auto'
|
|
316
|
+
});
|
|
317
|
+
return;
|
|
318
|
+
}
|
|
319
|
+
pendingScrollRef.current = row;
|
|
320
|
+
centerRowRef.current = row;
|
|
321
|
+
setCenterRow(row);
|
|
322
|
+
};
|
|
323
|
+
if (fade.duration === 0) {
|
|
324
|
+
land();
|
|
325
|
+
return;
|
|
326
|
+
}
|
|
327
|
+
// A second step within the dip has replaced the first (above): only
|
|
328
|
+
// its scroll lands, at its own dip's middle.
|
|
329
|
+
dipRef.current = {
|
|
330
|
+
animation: scroller.animate([{
|
|
331
|
+
opacity: 1
|
|
332
|
+
}, {
|
|
333
|
+
opacity: 0
|
|
334
|
+
}, {
|
|
335
|
+
opacity: 1
|
|
336
|
+
}], {
|
|
337
|
+
duration: fade.duration,
|
|
338
|
+
easing: fade.easing
|
|
339
|
+
}),
|
|
340
|
+
timer: window.setTimeout(() => {
|
|
341
|
+
dipRef.current = null;
|
|
342
|
+
land();
|
|
343
|
+
}, fade.duration / 2)
|
|
344
|
+
};
|
|
345
|
+
return;
|
|
346
|
+
}
|
|
277
347
|
steeredRowRef.current = row;
|
|
278
348
|
scroller.scrollTo({
|
|
279
|
-
left
|
|
349
|
+
left,
|
|
280
350
|
behavior
|
|
281
351
|
});
|
|
282
|
-
}, [paneSize, minMonthIndex, rowCount, isRTL, recenter]);
|
|
352
|
+
}, [paneSize, minMonthIndex, rowCount, isRTL, recenter, stopDip]);
|
|
283
353
|
|
|
284
354
|
// Deliberately un-keyed: it runs after every render, costs a null check, and
|
|
285
355
|
// must fire on whichever render finally mounts the pending row's pane.
|
|
@@ -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;AAkB7C,OAAO,KAAK,EAAC,WAAW,EAAe,MAAM,WAAW,CAAC;AA6MzD,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,+BAyMb;yBA3Ne,MAAM"}
|
package/dist/Drawer/Drawer.js
CHANGED
|
@@ -69,6 +69,7 @@ import { LayerDepthProvider, useLayerDismissal } from "../Layer/index.js";
|
|
|
69
69
|
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
|
+
import { useModalOutlet } from "../Layer/modalOutlet.js";
|
|
72
73
|
import { layerClickBoundary } from "../Layer/layerClickBoundary.js";
|
|
73
74
|
import { ModalAnnounceProvider } from "../hooks/ModalAnnounceProvider.js";
|
|
74
75
|
import { composeEventHandlers, mergeProps, themeProps } from "../utils/index.js";
|
|
@@ -302,6 +303,11 @@ export function Drawer({
|
|
|
302
303
|
isModal: hasScrim,
|
|
303
304
|
setIsRendered
|
|
304
305
|
});
|
|
306
|
+
|
|
307
|
+
// Toasts outside an open modal are inert, so the open drawer hosts them.
|
|
308
|
+
// It releases them when its exit starts.
|
|
309
|
+
// showModal() must run first, so keep this call after useDrawerDialogPresence.
|
|
310
|
+
useModalOutlet(dialogRef, isOpen && hasScrim);
|
|
305
311
|
const handleDismiss = useCallback(() => {
|
|
306
312
|
onOpenChange(false);
|
|
307
313
|
}, [onOpenChange]);
|
|
@@ -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;AAcf,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;AA0DF;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,MAAM,EACN,OAAO,EACP,aAAa,GACd,EAAE,8BAA8B,GAAG,IAAI,CAoEvC"}
|
|
@@ -25,6 +25,7 @@
|
|
|
25
25
|
*/
|
|
26
26
|
import { useEffect, useRef } from 'react';
|
|
27
27
|
import { flushSync } from 'react-dom';
|
|
28
|
+
import { notifyTopLayerEntry } from "../Layer/modalOutlet.js";
|
|
28
29
|
|
|
29
30
|
/** Slack past the computed transition before the backstop gives up waiting. */
|
|
30
31
|
const EXIT_BACKSTOP_BUFFER_MS = 50;
|
|
@@ -51,6 +52,9 @@ function showDrawerHost(dialog, isModal) {
|
|
|
51
52
|
dialog.showModal();
|
|
52
53
|
} else if (typeof dialog.showPopover === 'function') {
|
|
53
54
|
dialog.showPopover();
|
|
55
|
+
// The drawer is now the newest top-layer entry: global hosts shown before
|
|
56
|
+
// it (the toast viewport) re-enter above it, as they do above a modal.
|
|
57
|
+
notifyTopLayerEntry();
|
|
54
58
|
} else {
|
|
55
59
|
// Reduced fallback for browsers below the Popover API support floor.
|
|
56
60
|
dialog.show();
|
|
@@ -1,10 +1,20 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file useMenuOverflow.ts
|
|
3
|
-
* @input Menu element ref, rendered content, and
|
|
3
|
+
* @input Menu element ref, rendered content, open state, and optionally the
|
|
4
|
+
* overflow its owner expects from the content alone
|
|
4
5
|
* @output Returns whether the open menu overflows its block-size constraint
|
|
5
6
|
* @position Shared responsive helper for DropdownMenu and DropdownMenuSubMenu
|
|
6
7
|
*/
|
|
7
8
|
import { type ReactNode, type RefObject } from 'react';
|
|
8
|
-
/**
|
|
9
|
-
|
|
9
|
+
/**
|
|
10
|
+
* Detect block-axis overflow without making a fitting menu a scroll container.
|
|
11
|
+
*
|
|
12
|
+
* `expectedOverflow` is the answer the owner can give before any measure (a
|
|
13
|
+
* long option list cannot fit). Until a measure of the same `content` says
|
|
14
|
+
* otherwise, it is the result, so the first open already renders the right
|
|
15
|
+
* class: a class that flips after the open measure restyles the whole list
|
|
16
|
+
* a second time. A measure still runs on every open and corrects a wrong
|
|
17
|
+
* guess.
|
|
18
|
+
*/
|
|
19
|
+
export declare function useMenuOverflow(menuRef: RefObject<HTMLElement | null>, content: ReactNode, isOpen: boolean, expectedOverflow?: boolean): boolean;
|
|
10
20
|
//# sourceMappingURL=useMenuOverflow.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMenuOverflow.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/useMenuOverflow.ts"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"useMenuOverflow.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/useMenuOverflow.ts"],"names":[],"mappings":"AAIA;;;;;;GAMG;AAEH,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAC7B,OAAO,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACtC,OAAO,EAAE,SAAS,EAClB,MAAM,EAAE,OAAO,EACf,gBAAgB,CAAC,EAAE,OAAO,GACzB,OAAO,CA4ET"}
|
|
@@ -4,24 +4,44 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file useMenuOverflow.ts
|
|
7
|
-
* @input Menu element ref, rendered content, and
|
|
7
|
+
* @input Menu element ref, rendered content, open state, and optionally the
|
|
8
|
+
* overflow its owner expects from the content alone
|
|
8
9
|
* @output Returns whether the open menu overflows its block-size constraint
|
|
9
10
|
* @position Shared responsive helper for DropdownMenu and DropdownMenuSubMenu
|
|
10
11
|
*/
|
|
11
|
-
import { useCallback, useState } from 'react';
|
|
12
|
+
import { useCallback, useRef, useState } from 'react';
|
|
12
13
|
import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
|
|
13
14
|
|
|
14
|
-
/**
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
/**
|
|
16
|
+
* Detect block-axis overflow without making a fitting menu a scroll container.
|
|
17
|
+
*
|
|
18
|
+
* `expectedOverflow` is the answer the owner can give before any measure (a
|
|
19
|
+
* long option list cannot fit). Until a measure of the same `content` says
|
|
20
|
+
* otherwise, it is the result, so the first open already renders the right
|
|
21
|
+
* class: a class that flips after the open measure restyles the whole list
|
|
22
|
+
* a second time. A measure still runs on every open and corrects a wrong
|
|
23
|
+
* guess.
|
|
24
|
+
*/
|
|
25
|
+
export function useMenuOverflow(menuRef, content, isOpen, expectedOverflow) {
|
|
26
|
+
// The content each measure stands for, kept only for an owner that gives
|
|
27
|
+
// an expected answer (a caller whose content is a new element on every
|
|
28
|
+
// render compares nothing); set before the measuring effects run.
|
|
29
|
+
const contentRef = useRef(null);
|
|
30
|
+
useIsomorphicLayoutEffect(() => {
|
|
31
|
+
contentRef.current = expectedOverflow === undefined ? null : content;
|
|
32
|
+
});
|
|
33
|
+
const [measured, setMeasured] = useState(null);
|
|
17
34
|
const measureOverflow = useCallback(() => {
|
|
18
35
|
const menu = menuRef.current;
|
|
19
36
|
if (!menu) {
|
|
20
37
|
return;
|
|
21
38
|
}
|
|
22
|
-
const
|
|
39
|
+
const hasOverflow = menu.scrollHeight > menu.clientHeight + 1;
|
|
23
40
|
// eslint-disable-next-line @eslint-react/set-state-in-effect -- DOM overflow measurement controls whether this menu becomes a scroll container
|
|
24
|
-
|
|
41
|
+
setMeasured(current => current != null && current.hasOverflow === hasOverflow && Object.is(current.content, contentRef.current) ? current : {
|
|
42
|
+
content: contentRef.current,
|
|
43
|
+
hasOverflow
|
|
44
|
+
});
|
|
25
45
|
}, [menuRef]);
|
|
26
46
|
useIsomorphicLayoutEffect(() => {
|
|
27
47
|
if (!isOpen) {
|
|
@@ -56,5 +76,8 @@ export function useMenuOverflow(menuRef, content, isOpen) {
|
|
|
56
76
|
measureOverflow();
|
|
57
77
|
}
|
|
58
78
|
}, [content, isOpen, measureOverflow]);
|
|
59
|
-
|
|
79
|
+
if (expectedOverflow === undefined) {
|
|
80
|
+
return measured?.hasOverflow ?? false;
|
|
81
|
+
}
|
|
82
|
+
return measured != null && Object.is(measured.content, content) ? measured.hasOverflow : expectedOverflow;
|
|
60
83
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PanelSearchInput.d.ts","sourceRoot":"","sources":["../../src/Field/PanelSearchInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH,OAAO,EAAwB,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAenD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"PanelSearchInput.d.ts","sourceRoot":"","sources":["../../src/Field/PanelSearchInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH,OAAO,EAAwB,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAenD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiF5C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,SAAS,CAAC,gBAAgB,CAAC,EAC3B,UAAU,CACX;IACC,iEAAiE;IACjE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAE5B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd,6EAA6E;IAC7E,UAAU,EAAE,MAAM,CAAC;IAEnB,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IAEd,kEAAkE;IAClE,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC,wCAAwC;IACxC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IAEzD,0EAA0E;IAC1E,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAEpD,yEAAyE;IACzE,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAEnD;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,cAAc,CAAC,CAAC;IAEhE;;;;;OAKG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC;CAC5B;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,KAAK,EACL,UAAU,EACV,WAAW,EACX,KAAK,EACL,aAAa,EACb,SAAS,EACT,OAAO,EACP,MAAM,EACN,kBAAkB,EAClB,WAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,qBAAqB,+BAmFvB;yBAnGe,gBAAgB"}
|
|
@@ -47,6 +47,7 @@ import { useInteractionModalityTracking } from "../utils/interactionModality.js"
|
|
|
47
47
|
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
48
48
|
import "../theme/tokens.stylex.js";
|
|
49
49
|
import { colorVars, durationVars, easeVars, radiusVars, spacingVars, typeScaleVars, typographyVars } from "../theme/tokens.stylex.js";
|
|
50
|
+
import { textEntryTraitAttributes } from "./textEntryTraits.js";
|
|
50
51
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
51
52
|
const styles = {
|
|
52
53
|
wrapper: {
|
|
@@ -153,7 +154,13 @@ export function PanelSearchInput({
|
|
|
153
154
|
xstyle: styles.icon
|
|
154
155
|
}), /*#__PURE__*/_jsx("input", {
|
|
155
156
|
ref: mergedInputRef,
|
|
156
|
-
type: "text"
|
|
157
|
+
type: "text"
|
|
158
|
+
// Autocorrect would rewrite names and identifiers.
|
|
159
|
+
,
|
|
160
|
+
...textEntryTraitAttributes({
|
|
161
|
+
enterKeyHint: 'search',
|
|
162
|
+
hasAutoCorrect: false
|
|
163
|
+
}),
|
|
157
164
|
"aria-label": label,
|
|
158
165
|
placeholder: placeholder,
|
|
159
166
|
value: value,
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file textEntryTraits.ts
|
|
3
3
|
* @input The keyboard-trait props a text field accepts
|
|
4
|
-
* @output
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
* @position Shared by TextInput and TextArea: the one place that says how a
|
|
9
|
-
* field tells a touch keyboard what it holds
|
|
4
|
+
* @output EnterKeyHint, InputMode and AutoCapitalize (the package entry exports
|
|
5
|
+
* these), TextEntryTraitProps and textEntryTraitAttributes
|
|
6
|
+
* @position Shared by TextInput, TextArea and the search inputs: the one place
|
|
7
|
+
* that says how a field tells a touch keyboard what it holds
|
|
10
8
|
*
|
|
11
9
|
* SYNC: When modified, update:
|
|
12
10
|
* - /packages/core/src/TextInput/TextInput.tsx and TextInput.doc.mjs
|
|
13
11
|
* - /packages/core/src/TextArea/TextArea.tsx and TextArea.doc.mjs
|
|
12
|
+
* - /packages/core/src/Typeahead/BaseTypeahead.tsx, Field/PanelSearchInput.tsx
|
|
13
|
+
* and CommandPalette/CommandPaletteInput.tsx (the search inputs)
|
|
14
14
|
* - /packages/core/src/Field/index.ts (type exports)
|
|
15
15
|
*/
|
|
16
16
|
/**
|
|
@@ -3,16 +3,16 @@
|
|
|
3
3
|
/**
|
|
4
4
|
* @file textEntryTraits.ts
|
|
5
5
|
* @input The keyboard-trait props a text field accepts
|
|
6
|
-
* @output
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
* @position Shared by TextInput and TextArea: the one place that says how a
|
|
11
|
-
* field tells a touch keyboard what it holds
|
|
6
|
+
* @output EnterKeyHint, InputMode and AutoCapitalize (the package entry exports
|
|
7
|
+
* these), TextEntryTraitProps and textEntryTraitAttributes
|
|
8
|
+
* @position Shared by TextInput, TextArea and the search inputs: the one place
|
|
9
|
+
* that says how a field tells a touch keyboard what it holds
|
|
12
10
|
*
|
|
13
11
|
* SYNC: When modified, update:
|
|
14
12
|
* - /packages/core/src/TextInput/TextInput.tsx and TextInput.doc.mjs
|
|
15
13
|
* - /packages/core/src/TextArea/TextArea.tsx and TextArea.doc.mjs
|
|
14
|
+
* - /packages/core/src/Typeahead/BaseTypeahead.tsx, Field/PanelSearchInput.tsx
|
|
15
|
+
* and CommandPalette/CommandPaletteInput.tsx (the search inputs)
|
|
16
16
|
* - /packages/core/src/Field/index.ts (type exports)
|
|
17
17
|
*/
|
|
18
18
|
|