@astryxdesign/core 0.7.7 → 0.7.8-canary.0b39b51
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/AlertDialog/AlertDialog.d.ts +4 -1
- package/dist/AlertDialog/AlertDialog.d.ts.map +1 -1
- package/dist/AlertDialog/AlertDialog.js +46 -6
- package/dist/AppShell/AppShell.d.ts.map +1 -1
- package/dist/AppShell/AppShell.js +5 -0
- package/dist/BottomSheet/BottomSheet.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheet.js +1 -0
- package/dist/BottomSheet/BottomSheetPanel.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheetPanel.js +25 -4
- package/dist/BottomSheet/BottomSheetSwitcher.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheetSwitcher.js +5 -0
- package/dist/BottomSheet/useMobileKeyboard.d.ts.map +1 -1
- package/dist/BottomSheet/useMobileKeyboard.js +6 -0
- package/dist/BottomSheet/useSheetGestures.d.ts.map +1 -1
- package/dist/BottomSheet/useSheetGestures.js +12 -1
- package/dist/Button/Button.d.ts.map +1 -1
- package/dist/Button/Button.js +17 -1
- package/dist/Calendar/Calendar.d.ts.map +1 -1
- package/dist/Calendar/Calendar.js +15 -16
- package/dist/Carousel/Carousel.d.ts.map +1 -1
- package/dist/Carousel/Carousel.js +2 -0
- package/dist/Chat/ChatComposerInput.d.ts.map +1 -1
- package/dist/Chat/ChatComposerInput.js +4 -0
- package/dist/Chat/ChatMessageList.d.ts.map +1 -1
- package/dist/Chat/ChatMessageList.js +2 -1
- package/dist/Chat/useChatDictation.d.ts.map +1 -1
- package/dist/Chat/useChatDictation.js +2 -0
- package/dist/Chat/useChatNewMessages.js +1 -1
- package/dist/Chat/useChatStreamScroll.d.ts.map +1 -1
- package/dist/Chat/useChatStreamScroll.js +2 -0
- package/dist/Chat/useSpeechRecognition.d.ts.map +1 -1
- package/dist/Chat/useSpeechRecognition.js +3 -0
- package/dist/Chat/useTriggerMenu.js +1 -1
- package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/CheckboxInput/CheckboxInput.js +17 -12
- package/dist/CodeBlock/CodeBlock.d.ts +10 -1
- package/dist/CodeBlock/CodeBlock.d.ts.map +1 -1
- package/dist/CodeBlock/CodeBlock.js +28 -11
- package/dist/CommandPalette/CommandPalette.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPalette.js +2 -0
- package/dist/CommandPalette/CommandPaletteItem.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPaletteItem.js +2 -0
- package/dist/ComplexSelector/ComplexSelector.d.ts +4 -1
- package/dist/ComplexSelector/ComplexSelector.d.ts.map +1 -1
- package/dist/ComplexSelector/ComplexSelector.js +14 -4
- package/dist/ContextMenu/ContextMenu.js +2 -2
- package/dist/DateInput/MonthScroller.d.ts.map +1 -1
- package/dist/DateInput/MonthScroller.js +5 -2
- package/dist/DateInput/PickerWheel.d.ts +19 -0
- package/dist/DateInput/PickerWheel.d.ts.map +1 -0
- package/dist/DateInput/PickerWheel.js +625 -0
- package/dist/DateInput/TouchDateField.d.ts.map +1 -1
- package/dist/DateInput/TouchDateField.js +1 -0
- package/dist/DateInput/Wheel.d.ts +18 -37
- package/dist/DateInput/Wheel.d.ts.map +1 -1
- package/dist/DateInput/Wheel.js +84 -113
- package/dist/DateInput/useOwnScrollGesture.d.ts +10 -0
- package/dist/DateInput/useOwnScrollGesture.d.ts.map +1 -1
- package/dist/DateInput/useOwnScrollGesture.js +16 -3
- package/dist/DateInput/usePointerDragScroll.d.ts.map +1 -1
- package/dist/DateInput/usePointerDragScroll.js +2 -0
- package/dist/DateInput/useScrollSettle.d.ts.map +1 -1
- package/dist/DateInput/useScrollSettle.js +3 -0
- package/dist/DateInput/useWheelListbox.d.ts +59 -0
- package/dist/DateInput/useWheelListbox.d.ts.map +1 -0
- package/dist/DateInput/useWheelListbox.js +88 -0
- package/dist/DateInput/wheelOptions.d.ts +74 -0
- package/dist/DateInput/wheelOptions.d.ts.map +1 -0
- package/dist/DateInput/wheelOptions.js +98 -0
- package/dist/DateInput/wheelPhysics.d.ts +127 -0
- package/dist/DateInput/wheelPhysics.d.ts.map +1 -0
- package/dist/DateInput/wheelPhysics.js +341 -0
- package/dist/DateInput/wheelStrip.d.ts +92 -0
- package/dist/DateInput/wheelStrip.d.ts.map +1 -0
- package/dist/DateInput/wheelStrip.js +258 -0
- package/dist/DateTimeInput/TouchDateTimeField.d.ts.map +1 -1
- package/dist/DateTimeInput/TouchDateTimeField.js +2 -0
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +9 -32
- package/dist/Drawer/useDrawerDialogPresence.d.ts.map +1 -1
- package/dist/Drawer/useDrawerDialogPresence.js +3 -0
- package/dist/DropdownMenu/useMenuOverflow.d.ts.map +1 -1
- package/dist/DropdownMenu/useMenuOverflow.js +5 -0
- package/dist/Field/Field.js +2 -2
- package/dist/FieldStatus/useFieldStatusAnnouncement.d.ts.map +1 -1
- package/dist/FieldStatus/useFieldStatusAnnouncement.js +1 -0
- package/dist/FormLayout/FormLayout.d.ts +5 -1
- package/dist/FormLayout/FormLayout.d.ts.map +1 -1
- package/dist/HoverCard/HoverCard.d.ts +6 -4
- package/dist/HoverCard/HoverCard.d.ts.map +1 -1
- package/dist/HoverCard/HoverCard.js +48 -3
- package/dist/HoverCard/useHoverCard.d.ts +5 -4
- package/dist/HoverCard/useHoverCard.d.ts.map +1 -1
- package/dist/HoverCard/useHoverCard.js +20 -33
- package/dist/Icon/Icon.d.ts +5 -1
- package/dist/Icon/Icon.d.ts.map +1 -1
- package/dist/Icon/Icon.js +5 -2
- package/dist/Item/useSwipeAction.d.ts.map +1 -1
- package/dist/Item/useSwipeAction.js +3 -0
- package/dist/Layer/modalOutlet.d.ts.map +1 -1
- package/dist/Layer/modalOutlet.js +2 -0
- package/dist/Layer/outsidePress.d.ts.map +1 -1
- package/dist/Layer/outsidePress.js +1 -0
- package/dist/Layer/useLayer.d.ts.map +1 -1
- package/dist/Layer/useLayer.js +3 -0
- package/dist/Layer/useLayerDismissal.d.ts.map +1 -1
- package/dist/Layer/useLayerDismissal.js +3 -0
- package/dist/Layer/usePressPin.d.ts +17 -5
- package/dist/Layer/usePressPin.d.ts.map +1 -1
- package/dist/Layer/usePressPin.js +62 -12
- package/dist/Layer/useTouchTrigger.d.ts.map +1 -1
- package/dist/Layer/useTouchTrigger.js +3 -0
- package/dist/Lightbox/Lightbox.d.ts.map +1 -1
- package/dist/Lightbox/Lightbox.js +19 -0
- package/dist/MobileNav/MobileNav.d.ts +3 -2
- package/dist/MobileNav/MobileNav.d.ts.map +1 -1
- package/dist/MobileNav/MobileNav.js +9 -25
- package/dist/Outline/useOutlineFromDOM.d.ts.map +1 -1
- package/dist/Outline/useOutlineFromDOM.js +3 -0
- package/dist/Outline/useScrollSpy.d.ts.map +1 -1
- package/dist/Outline/useScrollSpy.js +3 -0
- package/dist/OverflowList/OverflowList.d.ts.map +1 -1
- package/dist/OverflowList/OverflowList.js +3 -0
- package/dist/Popover/Popover.d.ts.map +1 -1
- package/dist/Popover/Popover.js +6 -0
- package/dist/PowerSearch/PowerSearch.d.ts +43 -4
- package/dist/PowerSearch/PowerSearch.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearch.js +445 -134
- package/dist/PowerSearch/PowerSearchBottomSheet.d.ts +102 -0
- package/dist/PowerSearch/PowerSearchBottomSheet.d.ts.map +1 -0
- package/dist/PowerSearch/PowerSearchBottomSheet.js +1919 -0
- package/dist/PowerSearch/PowerSearchEditPopover.d.ts +35 -2
- package/dist/PowerSearch/PowerSearchEditPopover.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearchEditPopover.js +25 -6
- package/dist/PowerSearch/PowerSearchFilterEditor.d.ts +1 -1
- package/dist/PowerSearch/PowerSearchFilterEditor.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearchFilterEditor.js +4 -2
- package/dist/PowerSearch/PowerSearchToken.d.ts +1 -1
- package/dist/PowerSearch/PowerSearchToken.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearchToken.js +7 -2
- package/dist/PowerSearch/PowerSearchValueEditor.d.ts +38 -3
- package/dist/PowerSearch/PowerSearchValueEditor.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearchValueEditor.js +193 -83
- package/dist/PowerSearch/formatFilterValue.d.ts +18 -6
- package/dist/PowerSearch/formatFilterValue.d.ts.map +1 -1
- package/dist/PowerSearch/formatFilterValue.js +33 -12
- package/dist/PowerSearch/formatTokenValue.d.ts +28 -0
- package/dist/PowerSearch/formatTokenValue.d.ts.map +1 -0
- package/dist/PowerSearch/formatTokenValue.js +162 -0
- package/dist/PowerSearch/powerSearchDateZone.d.ts +21 -0
- package/dist/PowerSearch/powerSearchDateZone.d.ts.map +1 -0
- package/dist/PowerSearch/powerSearchDateZone.js +37 -0
- package/dist/PowerSearch/powerSearchSheetUtils.d.ts +65 -0
- package/dist/PowerSearch/powerSearchSheetUtils.d.ts.map +1 -0
- package/dist/PowerSearch/powerSearchSheetUtils.js +168 -0
- package/dist/PowerSearch/types.d.ts +2 -0
- package/dist/PowerSearch/types.d.ts.map +1 -1
- package/dist/ProgressBar/ProgressBarTouch.d.ts.map +1 -1
- package/dist/ProgressBar/ProgressBarTouch.js +2 -0
- package/dist/RadioList/RadioList.d.ts.map +1 -1
- package/dist/RadioList/RadioList.js +3 -2
- package/dist/RadioList/RadioListItem.d.ts +1 -1
- package/dist/RadioList/RadioListItem.d.ts.map +1 -1
- package/dist/RadioList/RadioListItem.js +5 -3
- package/dist/Resizable/ResizeHandle.d.ts +2 -1
- package/dist/Resizable/ResizeHandle.d.ts.map +1 -1
- package/dist/Resizable/ResizeHandle.js +101 -77
- package/dist/Resizable/createResizable.d.ts +145 -0
- package/dist/Resizable/createResizable.d.ts.map +1 -0
- package/dist/Resizable/createResizable.js +575 -0
- package/dist/Resizable/useResizable.d.ts +3 -3
- package/dist/Resizable/useResizable.d.ts.map +1 -1
- package/dist/Resizable/useResizable.js +252 -459
- package/dist/SegmentedControl/useSegmentedSelectionMotion.d.ts.map +1 -1
- package/dist/SegmentedControl/useSegmentedSelectionMotion.js +3 -3
- package/dist/SelectableCard/SelectableCard.d.ts +2 -0
- package/dist/SelectableCard/SelectableCard.d.ts.map +1 -1
- package/dist/SelectableCard/SelectableCard.js +36 -11
- package/dist/SelectableCard/selectableCardInput.d.ts +12 -0
- package/dist/SelectableCard/selectableCardInput.d.ts.map +1 -0
- package/dist/SelectableCard/selectableCardInput.js +20 -0
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +5 -8
- package/dist/Slider/sliderTouchController.js +2 -2
- package/dist/Spinner/Spinner.d.ts +1 -1
- package/dist/Spinner/Spinner.d.ts.map +1 -1
- package/dist/Spinner/Spinner.js +60 -58
- package/dist/Switch/Switch.d.ts.map +1 -1
- package/dist/Switch/Switch.js +4 -10
- package/dist/Switch/useSwitchTouch.js +4 -4
- package/dist/Table/BaseTable.d.ts.map +1 -1
- package/dist/Table/BaseTable.js +29 -8
- package/dist/Table/plugins/columnResize/useTableColumnResize.d.ts.map +1 -1
- package/dist/Table/plugins/columnResize/useTableColumnResize.js +3 -1
- package/dist/Table/plugins/filtering/useTableFiltering.d.ts.map +1 -1
- package/dist/Table/plugins/filtering/useTableFiltering.js +2 -1
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts.map +1 -1
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.js +4 -0
- package/dist/Table/plugins/stickyColumns/useTableStickyColumns.d.ts.map +1 -1
- package/dist/Table/plugins/stickyColumns/useTableStickyColumns.js +2 -0
- package/dist/TextInput/TextInput.d.ts +2 -2
- package/dist/TextInput/TextInput.d.ts.map +1 -1
- package/dist/TextInput/TextInput.js +10 -7
- package/dist/TimeInput/TimeInput.d.ts.map +1 -1
- package/dist/TimeInput/TimeInput.js +2 -0
- package/dist/TimeInput/TouchTimeField.d.ts.map +1 -1
- package/dist/TimeInput/TouchTimeField.js +2 -0
- package/dist/Timer/Timer.d.ts.map +1 -1
- package/dist/Timer/Timer.js +2 -0
- package/dist/Timestamp/Timestamp.js +1 -1
- package/dist/Toast/Toast.d.ts +11 -1
- package/dist/Toast/Toast.d.ts.map +1 -1
- package/dist/Toast/Toast.js +25 -15
- package/dist/Toast/ToastViewport.d.ts.map +1 -1
- package/dist/Toast/ToastViewport.js +97 -34
- package/dist/Toast/types.d.ts +9 -3
- package/dist/Toast/types.d.ts.map +1 -1
- package/dist/Toast/useToast.d.ts.map +1 -1
- package/dist/Toast/useToast.js +1 -0
- package/dist/Tokenizer/Tokenizer.d.ts +49 -37
- package/dist/Tokenizer/Tokenizer.d.ts.map +1 -1
- package/dist/Tokenizer/Tokenizer.js +22 -19
- package/dist/Tokenizer/TokenizerBottomSheet.d.ts +1 -1
- package/dist/Tokenizer/TokenizerBottomSheet.js +1 -1
- package/dist/Tokenizer/index.d.ts +1 -1
- package/dist/Tokenizer/index.d.ts.map +1 -1
- package/dist/Tooltip/useTooltip.d.ts +19 -1
- package/dist/Tooltip/useTooltip.d.ts.map +1 -1
- package/dist/Tooltip/useTooltip.js +34 -53
- package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
- package/dist/Typeahead/BaseTypeahead.js +27 -18
- package/dist/Typeahead/TypeaheadItem.d.ts +2 -1
- package/dist/Typeahead/TypeaheadItem.d.ts.map +1 -1
- package/dist/animator/createAnimator.d.ts +98 -0
- package/dist/animator/createAnimator.d.ts.map +1 -0
- package/dist/animator/createAnimator.js +259 -0
- package/dist/astryx.css +39 -6
- package/dist/gestures/GestureHost.d.ts +16 -1
- package/dist/gestures/GestureHost.d.ts.map +1 -1
- package/dist/gestures/GestureHost.js +1 -1
- package/dist/gestures/PressTracker.d.ts.map +1 -1
- package/dist/gestures/PressTracker.js +4 -3
- package/dist/hooks/ModalAnnounceProvider.d.ts.map +1 -1
- package/dist/hooks/ModalAnnounceProvider.js +1 -0
- package/dist/hooks/actionGroupTracker.d.ts +4 -1
- package/dist/hooks/actionGroupTracker.d.ts.map +1 -1
- package/dist/hooks/actionGroupTracker.js +13 -3
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +1 -0
- package/dist/hooks/longPressDetector.d.ts +66 -0
- package/dist/hooks/longPressDetector.d.ts.map +1 -0
- package/dist/hooks/longPressDetector.js +200 -0
- package/dist/hooks/pressGroupContext.d.ts +6 -0
- package/dist/hooks/pressGroupContext.d.ts.map +1 -0
- package/dist/hooks/pressGroupContext.js +20 -0
- package/dist/hooks/rootScrollStyles.d.ts +48 -0
- package/dist/hooks/rootScrollStyles.d.ts.map +1 -0
- package/dist/hooks/rootScrollStyles.js +207 -0
- package/dist/hooks/scrollLockTouchGuard.d.ts +13 -0
- package/dist/hooks/scrollLockTouchGuard.d.ts.map +1 -0
- package/dist/hooks/scrollLockTouchGuard.js +134 -0
- package/dist/hooks/scrollbarGutter.d.ts +4 -4
- package/dist/hooks/scrollbarGutter.d.ts.map +1 -1
- package/dist/hooks/scrollbarGutter.js +36 -23
- package/dist/hooks/useActionGroupTracking.d.ts +53 -0
- package/dist/hooks/useActionGroupTracking.d.ts.map +1 -0
- package/dist/hooks/useActionGroupTracking.js +174 -0
- package/dist/hooks/useAnimator.d.ts +41 -0
- package/dist/hooks/useAnimator.d.ts.map +1 -0
- package/dist/hooks/useAnimator.js +70 -0
- package/dist/hooks/useAnnounceRenderedText.d.ts.map +1 -1
- package/dist/hooks/useAnnounceRenderedText.js +1 -0
- package/dist/hooks/useAttachment.d.ts +1 -1
- package/dist/hooks/useAttachment.js +1 -1
- package/dist/hooks/useAutoMediaMode.d.ts.map +1 -1
- package/dist/hooks/useAutoMediaMode.js +1 -0
- package/dist/hooks/useBusyAnnouncement.d.ts.map +1 -1
- package/dist/hooks/useBusyAnnouncement.js +2 -0
- package/dist/hooks/useDevWarning.d.ts.map +1 -1
- package/dist/hooks/useDevWarning.js +2 -0
- package/dist/hooks/useFocusTrap.d.ts.map +1 -1
- package/dist/hooks/useFocusTrap.js +2 -0
- package/dist/hooks/useGridFocus.d.ts +8 -5
- package/dist/hooks/useGridFocus.d.ts.map +1 -1
- package/dist/hooks/useGridFocus.js +4 -3
- package/dist/hooks/useHotkeys.d.ts.map +1 -1
- package/dist/hooks/useHotkeys.js +3 -0
- package/dist/hooks/useImageMode.d.ts.map +1 -1
- package/dist/hooks/useImageMode.js +3 -0
- package/dist/hooks/useInputStatusIcon.d.ts +1 -1
- package/dist/hooks/useInputStatusIcon.d.ts.map +1 -1
- package/dist/hooks/useInputStatusIcon.js +2 -2
- package/dist/hooks/useKeyboardHint.js +1 -1
- package/dist/hooks/useLongPress.d.ts +8 -9
- package/dist/hooks/useLongPress.d.ts.map +1 -1
- package/dist/hooks/useLongPress.js +23 -106
- package/dist/hooks/useMenuHover.d.ts.map +1 -1
- package/dist/hooks/useMenuHover.js +2 -0
- package/dist/hooks/useMenuPress.d.ts.map +1 -1
- package/dist/hooks/useMenuPress.js +3 -0
- package/dist/hooks/useOverflow.d.ts.map +1 -1
- package/dist/hooks/useOverflow.js +2 -1
- package/dist/hooks/usePressFeedback.d.ts.map +1 -1
- package/dist/hooks/usePressFeedback.js +1 -0
- package/dist/hooks/useResolvedRequired.d.ts +3 -0
- package/dist/hooks/useResolvedRequired.d.ts.map +1 -1
- package/dist/hooks/useResolvedRequired.js +3 -0
- package/dist/hooks/useScrollLock.d.ts +7 -9
- package/dist/hooks/useScrollLock.d.ts.map +1 -1
- package/dist/hooks/useScrollLock.js +55 -48
- package/dist/hooks/useScrollableArea.d.ts.map +1 -1
- package/dist/hooks/useScrollableArea.js +5 -0
- package/dist/hooks/useStreamingText.d.ts.map +1 -1
- package/dist/hooks/useStreamingText.js +3 -0
- package/dist/i18n/generated-english/PowerSearch/PowerSearchBottomSheet.generated.d.ts +8 -0
- package/dist/i18n/generated-english/PowerSearch/PowerSearchBottomSheet.generated.d.ts.map +1 -0
- package/dist/i18n/generated-english/PowerSearch/PowerSearchBottomSheet.generated.js +42 -0
- package/dist/i18n/generated-english/PowerSearch/PowerSearchValueEditor.generated.d.ts.map +1 -1
- package/dist/i18n/generated-english/PowerSearch/PowerSearchValueEditor.generated.js +6 -0
- package/dist/i18n/generated-english/PowerSearch/formatTokenValue.generated.d.ts +8 -0
- package/dist/i18n/generated-english/PowerSearch/formatTokenValue.generated.d.ts.map +1 -0
- package/dist/i18n/generated-english/PowerSearch/formatTokenValue.generated.js +14 -0
- package/dist/i18n/generated-locales/en.generated.d.ts.map +1 -1
- package/dist/i18n/generated-locales/en.generated.js +30 -0
- package/dist/i18n/generated-locales/pseudo.generated.d.ts.map +1 -1
- package/dist/i18n/generated-locales/pseudo.generated.js +30 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4 -0
- package/dist/internal/indicatorPress.stylex.d.ts +20 -0
- package/dist/internal/indicatorPress.stylex.d.ts.map +1 -0
- package/dist/internal/indicatorPress.stylex.js +26 -0
- package/dist/internal/selectable-card.d.ts +21 -0
- package/dist/internal/selectable-card.d.ts.map +1 -0
- package/dist/internal/selectable-card.js +20 -0
- package/dist/internal/sheetDraft.d.ts +2 -2
- package/dist/internal/sheetDraft.js +2 -2
- package/dist/motion/animatedLayout.d.ts.map +1 -1
- package/dist/motion/animatedLayout.js +7 -7
- package/dist/motion/animator.d.ts +14 -14
- package/dist/motion/animator.d.ts.map +1 -1
- package/dist/motion/animator.js +45 -20
- package/dist/motion/progress.d.ts +88 -0
- package/dist/motion/progress.d.ts.map +1 -0
- package/dist/motion/progress.js +128 -0
- package/dist/motion/reducedMotion.d.ts.map +1 -1
- package/dist/motion/reducedMotion.js +3 -1
- package/dist/motion/uikit/alert.d.ts +41 -0
- package/dist/motion/uikit/alert.d.ts.map +1 -0
- package/dist/motion/uikit/alert.js +43 -0
- package/dist/motion/uikit/index.d.ts +4 -3
- package/dist/motion/uikit/index.d.ts.map +1 -1
- package/dist/motion/uikit/index.js +4 -3
- package/dist/motion/uikit/picker.d.ts +96 -0
- package/dist/motion/uikit/picker.d.ts.map +1 -0
- package/dist/motion/uikit/picker.js +117 -0
- package/dist/privateAttributes/pressGroupItem.stylex.d.ts +22 -0
- package/dist/privateAttributes/pressGroupItem.stylex.d.ts.map +1 -0
- package/dist/privateAttributes/pressGroupItem.stylex.js +36 -0
- package/dist/privateAttributes/reducedMotion.stylex.d.ts +23 -0
- package/dist/privateAttributes/reducedMotion.stylex.d.ts.map +1 -0
- package/dist/privateAttributes/reducedMotion.stylex.js +40 -0
- package/dist/theme/Theme.d.ts.map +1 -1
- package/dist/theme/Theme.js +29 -4
- package/dist/theme/motionKnobs.d.ts +4 -3
- package/dist/theme/motionKnobs.d.ts.map +1 -1
- package/dist/theme/motionKnobs.js +3 -2
- package/dist/theme/themeMotion.d.ts +6 -0
- package/dist/theme/themeMotion.d.ts.map +1 -1
- package/dist/theme/themeMotion.js +7 -0
- package/dist/utils/dateParser.d.ts.map +1 -1
- package/dist/utils/dateParser.js +12 -0
- package/dist/utils/focusReturn.d.ts +15 -0
- package/dist/utils/focusReturn.d.ts.map +1 -1
- package/dist/utils/focusReturn.js +28 -0
- package/dist/utils/interactionModality.d.ts.map +1 -1
- package/dist/utils/interactionModality.js +4 -0
- package/dist/utils/interactionOverlay.stylex.d.ts +3 -2
- package/dist/utils/interactionOverlay.stylex.d.ts.map +1 -1
- package/dist/utils/interactionOverlay.stylex.js +3 -2
- package/dist/utils/plainDate.d.ts +8 -0
- package/dist/utils/plainDate.d.ts.map +1 -1
- package/dist/utils/plainDate.js +19 -0
- package/dist/utils/pressFeedback.d.ts.map +1 -1
- package/dist/utils/pressFeedback.js +20 -6
- package/dist/utils/triggerFocus.d.ts +36 -0
- package/dist/utils/triggerFocus.d.ts.map +1 -0
- package/dist/utils/triggerFocus.js +65 -0
- package/locales/en.json +120 -0
- package/locales/pseudo.json +90 -0
- package/package.json +14 -9
- package/src/AlertDialog/AlertDialog.doc.mjs +2 -2
- package/src/AlertDialog/AlertDialog.tsx +46 -5
- package/src/AppShell/AppShell.tsx +4 -0
- package/src/BottomSheet/BottomSheet.tsx +1 -0
- package/src/BottomSheet/BottomSheetPanel.tsx +39 -3
- package/src/BottomSheet/BottomSheetSwitcher.tsx +5 -0
- package/src/BottomSheet/useMobileKeyboard.ts +4 -0
- package/src/BottomSheet/useSheetGestures.ts +10 -1
- package/src/Button/Button.tsx +26 -4
- package/src/Calendar/Calendar.tsx +36 -25
- package/src/Carousel/Carousel.tsx +1 -0
- package/src/Chat/ChatComposerInput.tsx +2 -0
- package/src/Chat/ChatMessageList.tsx +2 -1
- package/src/Chat/useChatDictation.ts +1 -0
- package/src/Chat/useChatNewMessages.ts +1 -1
- package/src/Chat/useChatStreamScroll.ts +2 -0
- package/src/Chat/useSpeechRecognition.ts +2 -0
- package/src/Chat/useTriggerMenu.tsx +1 -1
- package/src/CheckboxInput/CheckboxInput.doc.mjs +18 -0
- package/src/CheckboxInput/CheckboxInput.tsx +38 -15
- package/src/CodeBlock/CodeBlock.doc.mjs +9 -1
- package/src/CodeBlock/CodeBlock.tsx +41 -4
- package/src/CommandPalette/CommandPalette.tsx +1 -0
- package/src/CommandPalette/CommandPaletteItem.tsx +1 -0
- package/src/ComplexSelector/ComplexSelector.tsx +20 -5
- package/src/ContextMenu/ContextMenu.tsx +2 -2
- package/src/DateInput/MonthScroller.tsx +8 -2
- package/src/DateInput/PickerWheel.tsx +765 -0
- package/src/DateInput/TouchDateField.tsx +1 -0
- package/src/DateInput/Wheel.tsx +94 -150
- package/src/DateInput/useOwnScrollGesture.ts +25 -3
- package/src/DateInput/usePointerDragScroll.ts +1 -0
- package/src/DateInput/useScrollSettle.ts +2 -0
- package/src/DateInput/useWheelListbox.ts +112 -0
- package/src/DateInput/wheelOptions.ts +155 -0
- package/src/DateInput/wheelPhysics.ts +406 -0
- package/src/DateInput/wheelStrip.ts +341 -0
- package/src/DateTimeInput/TouchDateTimeField.tsx +2 -0
- package/src/Dialog/Dialog.tsx +12 -32
- package/src/Drawer/useDrawerDialogPresence.ts +2 -0
- package/src/DropdownMenu/useMenuOverflow.ts +3 -0
- package/src/Field/Field.tsx +2 -2
- package/src/FieldStatus/useFieldStatusAnnouncement.ts +1 -0
- package/src/FormLayout/FormLayout.doc.mjs +181 -46
- package/src/FormLayout/FormLayout.tsx +5 -1
- package/src/HoverCard/HoverCard.doc.mjs +10 -8
- package/src/HoverCard/HoverCard.tsx +58 -6
- package/src/HoverCard/useHoverCard.doc.mjs +178 -36
- package/src/HoverCard/useHoverCard.tsx +49 -54
- package/src/Icon/Icon.doc.mjs +49 -8
- package/src/Icon/Icon.tsx +15 -7
- package/src/IconButton/IconButton.doc.mjs +141 -21
- package/src/Item/useSwipeAction.ts +2 -0
- package/src/Layer/modalOutlet.ts +2 -0
- package/src/Layer/outsidePress.ts +1 -0
- package/src/Layer/useLayer.tsx +2 -0
- package/src/Layer/useLayerDismissal.ts +2 -0
- package/src/Layer/usePressPin.ts +81 -15
- package/src/Layer/useTouchTrigger.ts +2 -0
- package/src/Lightbox/Lightbox.tsx +19 -0
- package/src/MobileNav/MobileNav.tsx +9 -30
- package/src/Outline/useOutlineFromDOM.ts +2 -0
- package/src/Outline/useScrollSpy.ts +2 -0
- package/src/OverflowList/OverflowList.tsx +2 -0
- package/src/Popover/Popover.tsx +4 -0
- package/src/PowerSearch/PowerSearch.doc.mjs +60 -8
- package/src/PowerSearch/PowerSearch.tsx +627 -157
- package/src/PowerSearch/PowerSearchBottomSheet.tsx +2525 -0
- package/src/PowerSearch/PowerSearchEditPopover.tsx +39 -6
- package/src/PowerSearch/PowerSearchFilterEditor.tsx +2 -0
- package/src/PowerSearch/PowerSearchToken.tsx +7 -0
- package/src/PowerSearch/PowerSearchValueEditor.tsx +244 -58
- package/src/PowerSearch/formatFilterValue.ts +55 -17
- package/src/PowerSearch/formatTokenValue.ts +222 -0
- package/src/PowerSearch/powerSearchDateZone.ts +64 -0
- package/src/PowerSearch/powerSearchSheetUtils.ts +224 -0
- package/src/PowerSearch/types.ts +2 -0
- package/src/ProgressBar/ProgressBarTouch.ts +2 -0
- package/src/RadioList/RadioList.tsx +3 -2
- package/src/RadioList/RadioListItem.tsx +5 -3
- package/src/Resizable/Resizable.doc.mjs +5 -4
- package/src/Resizable/ResizeHandle.tsx +169 -109
- package/src/Resizable/createResizable.ts +831 -0
- package/src/Resizable/useResizable.ts +292 -623
- package/src/SegmentedControl/useSegmentedSelectionMotion.ts +6 -3
- package/src/SelectableCard/SelectableCard.tsx +39 -10
- package/src/SelectableCard/selectableCardInput.ts +30 -0
- package/src/Selector/Selector.tsx +5 -12
- package/src/Slider/sliderTouchController.ts +2 -2
- package/src/Spinner/Spinner.tsx +77 -63
- package/src/Switch/Switch.tsx +2 -6
- package/src/Switch/useSwitchTouch.ts +4 -4
- package/src/Table/BaseTable.tsx +46 -12
- package/src/Table/plugins/columnResize/useTableColumnResize.tsx +2 -1
- package/src/Table/plugins/filtering/useTableFiltering.tsx +1 -0
- package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx +4 -0
- package/src/Table/plugins/stickyColumns/useTableStickyColumns.tsx +2 -0
- package/src/TextInput/TextInput.tsx +11 -10
- package/src/TimeInput/TimeInput.tsx +2 -0
- package/src/TimeInput/TouchTimeField.tsx +2 -0
- package/src/Timer/Timer.tsx +1 -0
- package/src/Timestamp/Timestamp.tsx +1 -1
- package/src/Toast/Toast.doc.mjs +4 -3
- package/src/Toast/Toast.tsx +52 -32
- package/src/Toast/ToastViewport.tsx +123 -35
- package/src/Toast/types.ts +9 -3
- package/src/Toast/useToast.tsx +1 -0
- package/src/Tokenizer/Tokenizer.doc.mjs +19 -3
- package/src/Tokenizer/Tokenizer.tsx +73 -51
- package/src/Tokenizer/TokenizerBottomSheet.tsx +1 -1
- package/src/Tokenizer/index.ts +1 -0
- package/src/Tooltip/useTooltip.doc.mjs +24 -0
- package/src/Tooltip/useTooltip.tsx +61 -56
- package/src/Typeahead/BaseTypeahead.tsx +27 -17
- package/src/Typeahead/TypeaheadItem.doc.mjs +6 -3
- package/src/Typeahead/TypeaheadItem.tsx +2 -1
- package/src/animator/createAnimator.doc.mjs +153 -0
- package/src/animator/createAnimator.ts +324 -0
- package/src/gestures/GestureHost.ts +1 -1
- package/src/gestures/PressTracker.ts +4 -3
- package/src/gestures/README.md +10 -4
- package/src/hooks/ModalAnnounceProvider.tsx +1 -0
- package/src/hooks/actionGroupTracker.ts +20 -5
- package/src/hooks/index.ts +2 -0
- package/src/hooks/longPressDetector.ts +273 -0
- package/src/hooks/pressGroupContext.ts +21 -0
- package/src/hooks/rootScrollStyles.ts +247 -0
- package/src/hooks/scrollLockTouchGuard.ts +182 -0
- package/src/hooks/scrollbarGutter.ts +41 -26
- package/src/hooks/useActionGroupTracking.ts +224 -0
- package/src/hooks/useAnimator.doc.mjs +109 -0
- package/src/hooks/useAnimator.ts +67 -0
- package/src/hooks/useAnnounceRenderedText.ts +1 -0
- package/src/hooks/useAttachment.ts +1 -1
- package/src/hooks/useAutoMediaMode.ts +1 -0
- package/src/hooks/useBusyAnnouncement.ts +2 -0
- package/src/hooks/useDevWarning.ts +2 -0
- package/src/hooks/useFocusTrap.ts +2 -0
- package/src/hooks/useGridFocus.doc.mjs +6 -6
- package/src/hooks/useGridFocus.ts +10 -7
- package/src/hooks/useHotkeys.ts +2 -0
- package/src/hooks/useImageMode.ts +2 -0
- package/src/hooks/useInputStatusIcon.tsx +3 -2
- package/src/hooks/useKeyboardHint.tsx +1 -1
- package/src/hooks/useLongPress.doc.mjs +2 -2
- package/src/hooks/useLongPress.ts +32 -122
- package/src/hooks/useMenuHover.ts +1 -0
- package/src/hooks/useMenuPress.ts +2 -0
- package/src/hooks/useOverflow.ts +2 -1
- package/src/hooks/usePressFeedback.ts +1 -0
- package/src/hooks/useResolvedRequired.ts +3 -0
- package/src/hooks/useScrollLock.doc.mjs +51 -12
- package/src/hooks/useScrollLock.ts +57 -60
- package/src/hooks/useScrollableArea.ts +4 -0
- package/src/hooks/useStreamingText.ts +2 -0
- package/src/i18n/generated-english/PowerSearch/PowerSearchBottomSheet.generated.ts +43 -0
- package/src/i18n/generated-english/PowerSearch/PowerSearchValueEditor.generated.ts +6 -0
- package/src/i18n/generated-english/PowerSearch/formatTokenValue.generated.ts +15 -0
- package/src/i18n/generated-locales/en.generated.ts +41 -0
- package/src/i18n/generated-locales/pseudo.generated.ts +42 -0
- package/src/index.ts +13 -0
- package/src/internal/indicatorPress.stylex.ts +24 -0
- package/src/internal/selectable-card.ts +21 -0
- package/src/internal/sheetDraft.ts +2 -2
- package/src/motion/MEASUREMENTS.md +18 -0
- package/src/motion/README.md +10 -5
- package/src/motion/animatedLayout.ts +10 -5
- package/src/motion/animator.ts +66 -31
- package/src/motion/progress.ts +155 -0
- package/src/motion/reducedMotion.ts +3 -1
- package/src/motion/uikit/alert.ts +43 -0
- package/src/motion/uikit/index.ts +4 -3
- package/src/motion/uikit/picker.ts +116 -0
- package/src/privateAttributes/pressGroupItem.stylex.ts +44 -0
- package/src/privateAttributes/reducedMotion.stylex.ts +45 -0
- package/src/theme/Theme.tsx +37 -3
- package/src/theme/motionKnobs.ts +4 -3
- package/src/theme/themeMotion.ts +7 -0
- package/src/utils/dateParser.ts +16 -0
- package/src/utils/focusReturn.ts +30 -0
- package/src/utils/interactionModality.ts +4 -0
- package/src/utils/interactionOverlay.stylex.ts +3 -2
- package/src/utils/plainDate.ts +21 -0
- package/src/utils/pressFeedback.ts +24 -6
- package/src/utils/triggerFocus.ts +80 -0
- package/dist/internal/touch-sheet.d.ts +0 -21
- package/dist/internal/touch-sheet.d.ts.map +0 -1
- package/dist/internal/touch-sheet.js +0 -19
- package/src/internal/touch-sheet.ts +0 -21
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/Toast/types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,gDAAgD;AAChD,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAEzC,6DAA6D;AAC7D,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,WAAW,GAAG,aAAa,CAAC;AAEhF,mEAAmE;AACnE,MAAM,MAAM,sBAAsB,GAAG,WAAW,GAAG,QAAQ,CAAC;AAE5D,wCAAwC;AACxC,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEnD,mCAAmC;AACnC,MAAM,WAAW,YAAY;IAC3B,+BAA+B;IAC/B,IAAI,EAAE,SAAS,CAAC;IAChB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gEAAgE;IAChE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/Toast/types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,gDAAgD;AAChD,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAEzC,6DAA6D;AAC7D,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,WAAW,GAAG,aAAa,CAAC;AAEhF,mEAAmE;AACnE,MAAM,MAAM,sBAAsB,GAAG,WAAW,GAAG,QAAQ,CAAC;AAE5D,wCAAwC;AACxC,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEnD,mCAAmC;AACnC,MAAM,WAAW,YAAY;IAC3B,+BAA+B;IAC/B,IAAI,EAAE,SAAS,CAAC;IAChB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gEAAgE;IAChE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;;;;;;;;;OAcG;IACH,aAAa,CAAC,EAAE,oBAAoB,CAAC;IAErC,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,sBAAsB,CAAC;IAC3C,gDAAgD;IAChD,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAC/C;AAED,oDAAoD;AACpD,MAAM,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC;AAExC,wDAAwD;AACxD,MAAM,WAAW,uBAAuB;IACtC,yDAAyD;IACzD,IAAI,EAAE,SAAS,CAAC;IAChB,2EAA2E;IAC3E,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,4EAA4E;IAC5E,IAAI,EAAE,SAAS,CAAC;IAChB,8CAA8C;IAC9C,UAAU,EAAE,OAAO,CAAC;IACpB,0DAA0D;IAC1D,gBAAgB,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,OAAO,EAAE,cAAc,CAAC;CACzB;AAED;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAAG,CACjC,KAAK,EAAE,uBAAuB,KAC3B,SAAS,CAAC;AAEf,oDAAoD;AACpD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,EAAE,YAAY,KAAK,cAAc,CAAC;AAEpE,iDAAiD;AACjD,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,YAAY,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../src/Toast/useToast.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAGV,WAAW,EAEZ,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../src/Toast/useToast.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAGV,WAAW,EAEZ,MAAM,SAAS,CAAC;AAyIjB;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,QAAQ,IAAI,WAAW,CAetC"}
|
package/dist/Toast/useToast.js
CHANGED
|
@@ -70,6 +70,7 @@ function getFallbackContext() {
|
|
|
70
70
|
const FallbackCapture = () => {
|
|
71
71
|
const ctx = use(ToastContext);
|
|
72
72
|
const doneRef = useRef(false);
|
|
73
|
+
// Syncs the module-level fallback with the first toast context that mounts.
|
|
73
74
|
useEffect(() => {
|
|
74
75
|
if (ctx && !doneRef.current) {
|
|
75
76
|
doneRef.current = true;
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
* useAdaptivePresentation, and TokenizerBottomSheet (lazy)
|
|
5
5
|
* @output Exports Tokenizer multi-select typeahead component
|
|
6
6
|
* @position Composed component; forwards DOM ref and exposes focus control via
|
|
7
|
-
* handleRef. The
|
|
8
|
-
*
|
|
7
|
+
* handleRef. The `presentation` prop swaps the inline combobox for a
|
|
8
|
+
* trigger that opens TokenizerBottomSheet.
|
|
9
9
|
*
|
|
10
10
|
* SYNC: When modified, update:
|
|
11
11
|
* - /packages/core/src/Tokenizer/index.ts
|
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
*/
|
|
16
16
|
import React, { type ReactNode } from 'react';
|
|
17
17
|
import { type FieldInputBaseProps } from '../Field/fieldParts.js';
|
|
18
|
+
import { type AdaptivePresentation } from '../hooks/useAdaptivePresentation.js';
|
|
18
19
|
import type { SizeValue } from '../utils/types.js';
|
|
19
20
|
import { type InputStatus } from '../Field/index.js';
|
|
20
21
|
import { type IconType } from '../Icon/index.js';
|
|
@@ -202,62 +203,73 @@ export interface TokenizerProps<T extends SearchableItem> extends Omit<FieldInpu
|
|
|
202
203
|
onFocus?: (e: React.FocusEvent) => void;
|
|
203
204
|
/** Fires when focus leaves the tokenizer entirely. */
|
|
204
205
|
onBlur?: (e: React.FocusEvent) => void;
|
|
205
|
-
/**
|
|
206
|
+
/**
|
|
207
|
+
* How the field presents its choices.
|
|
208
|
+
* - `'popover'`: the inline combobox with its anchored suggestion menu, on
|
|
209
|
+
* every device.
|
|
210
|
+
* - `'bottom-sheet'`: a trigger showing the selected tokens that opens one
|
|
211
|
+
* tall modal sheet: a search row on top, full-width checkbox rows that
|
|
212
|
+
* keep their place while the sheet is open, a create row with
|
|
213
|
+
* `hasCreate`, and a footer pinned in every state with a confirmed Clear
|
|
214
|
+
* all and Save. The sheet edits a draft: `onChange` fires once, when Save
|
|
215
|
+
* commits it, and a swipe, scrim or Escape close of a changed draft asks
|
|
216
|
+
* before discarding. Suited to compact touch screens, where the inline
|
|
217
|
+
* combobox competes with the software keyboard.
|
|
218
|
+
* - `'adaptive'`: the bottom sheet on compact coarse-pointer screens,
|
|
219
|
+
* otherwise the popover — the same resolution Selector uses. The server
|
|
220
|
+
* render and the hydrating render are the popover.
|
|
221
|
+
*
|
|
222
|
+
* In the sheet presentation the trigger is the control: `ref`, `id`,
|
|
223
|
+
* `aria-*`, and `data-*` reach it. `renderItem`, `renderToken`,
|
|
224
|
+
* `endContent`, `hasClear`, `hasEntriesOnFocus`, `menuWidth`,
|
|
225
|
+
* `tokenOverflowBehavior`, and `hasAutoFocus` have no surface to act on
|
|
226
|
+
* and warn once in development. Pass `'popover'` to keep the inline field
|
|
227
|
+
* and those props on every device.
|
|
228
|
+
* @default 'adaptive'
|
|
229
|
+
*/
|
|
230
|
+
presentation?: TokenizerPresentation;
|
|
231
|
+
/**
|
|
232
|
+
* Ref forwarded to the control: the combobox input in the popover
|
|
233
|
+
* presentation, the trigger button in the sheet presentation. This type
|
|
234
|
+
* keeps its released input element; the component itself also accepts a
|
|
235
|
+
* `Ref<HTMLInputElement | HTMLButtonElement>`, the type to use where the
|
|
236
|
+
* sheet can present.
|
|
237
|
+
*/
|
|
206
238
|
ref?: React.Ref<HTMLInputElement>;
|
|
207
239
|
/** Imperative handle ref for focus/blur control. */
|
|
208
240
|
handleRef?: React.Ref<TokenizerHandle>;
|
|
209
241
|
/**
|
|
210
242
|
* Experimental options, outside the stable compatibility promise: anything
|
|
211
|
-
* in this object may change or be removed in a patch release.
|
|
212
|
-
* the stable behavior.
|
|
243
|
+
* in this object may change or be removed in a patch release.
|
|
213
244
|
* @experimental
|
|
214
245
|
*/
|
|
215
246
|
experimental?: {
|
|
216
247
|
/**
|
|
217
|
-
*
|
|
218
|
-
* - `
|
|
219
|
-
* the stable behavior.
|
|
220
|
-
* - `'bottom-sheet'`: a trigger showing the selected tokens that opens one
|
|
221
|
-
* tall modal sheet: a search row on top, full-width checkbox rows that
|
|
222
|
-
* keep their place while the sheet is open, a create row with
|
|
223
|
-
* `hasCreate`, and a footer pinned in every state with a confirmed Clear
|
|
224
|
-
* all and Save. The sheet edits a draft: `onChange` fires once, when Save
|
|
225
|
-
* commits it, and a swipe, scrim or Escape close of a changed draft asks
|
|
226
|
-
* before discarding. Suited to compact touch screens, where the inline
|
|
227
|
-
* combobox competes with the software keyboard.
|
|
228
|
-
* - `'adaptive'`: the bottom sheet on compact coarse-pointer screens,
|
|
229
|
-
* otherwise the popover — the same resolution Selector uses.
|
|
230
|
-
*
|
|
231
|
-
* In the sheet presentation the trigger is the control: `ref`, `id`,
|
|
232
|
-
* `aria-*`, and `data-*` reach it. `renderItem`, `renderToken`,
|
|
233
|
-
* `endContent`, `hasClear`, `hasEntriesOnFocus`, `menuWidth`,
|
|
234
|
-
* `tokenOverflowBehavior`, and `hasAutoFocus` have no surface to act on
|
|
235
|
-
* and warn once in development.
|
|
248
|
+
* The earlier spelling of `presentation`, with the same values. The
|
|
249
|
+
* top-level `presentation` wins when both are set.
|
|
236
250
|
* @experimental
|
|
237
|
-
* @
|
|
251
|
+
* @deprecated Use the stable `presentation` prop.
|
|
238
252
|
*/
|
|
239
|
-
presentation?:
|
|
253
|
+
presentation?: TokenizerPresentation;
|
|
240
254
|
};
|
|
241
255
|
}
|
|
256
|
+
/** How Tokenizer presents its choices; see `TokenizerProps.presentation`. */
|
|
257
|
+
export type TokenizerPresentation = AdaptivePresentation;
|
|
242
258
|
/**
|
|
243
|
-
* The props the
|
|
244
|
-
* `ref` also accepts the sheet
|
|
245
|
-
*
|
|
246
|
-
*
|
|
247
|
-
* `
|
|
248
|
-
* `ComponentProps<typeof Tokenizer>` keep their released shapes.
|
|
259
|
+
* The props the component accepts: `TokenizerProps`, whose `ref` keeps its
|
|
260
|
+
* released input type, with a `ref` that also accepts the sheet
|
|
261
|
+
* presentation's trigger button. `TokenizerProps` stays the declared props
|
|
262
|
+
* type, so `interface X extends TokenizerProps<T>`, `Omit<TokenizerProps<T>,
|
|
263
|
+
* …>` and `ComponentProps<typeof Tokenizer>` keep their released shapes.
|
|
249
264
|
*/
|
|
250
|
-
type
|
|
251
|
-
/** @experimental */
|
|
252
|
-
experimental: NonNullable<TokenizerProps<T>['experimental']>;
|
|
265
|
+
type TokenizerAcceptedProps<T extends SearchableItem> = Omit<TokenizerProps<T>, 'ref'> & {
|
|
253
266
|
/**
|
|
254
267
|
* Ref forwarded to the control: the combobox input in the popover
|
|
255
268
|
* presentation, the trigger button in the sheet presentation.
|
|
256
|
-
* @experimental
|
|
257
269
|
*/
|
|
258
270
|
ref?: React.Ref<HTMLInputElement | HTMLButtonElement>;
|
|
259
271
|
};
|
|
260
|
-
export declare function Tokenizer<T extends SearchableItem>(props:
|
|
272
|
+
export declare function Tokenizer<T extends SearchableItem>(props: TokenizerAcceptedProps<T>): React.JSX.Element;
|
|
261
273
|
export declare function Tokenizer<T extends SearchableItem>(props: TokenizerProps<T>): React.JSX.Element;
|
|
262
274
|
export declare namespace Tokenizer {
|
|
263
275
|
var displayName: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tokenizer.d.ts","sourceRoot":"","sources":["../../src/Tokenizer/Tokenizer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAYZ,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAUf,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"Tokenizer.d.ts","sourceRoot":"","sources":["../../src/Tokenizer/Tokenizer.tsx"],"names":[],"mappings":"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"}
|
|
@@ -8,8 +8,8 @@
|
|
|
8
8
|
* useAdaptivePresentation, and TokenizerBottomSheet (lazy)
|
|
9
9
|
* @output Exports Tokenizer multi-select typeahead component
|
|
10
10
|
* @position Composed component; forwards DOM ref and exposes focus control via
|
|
11
|
-
* handleRef. The
|
|
12
|
-
*
|
|
11
|
+
* handleRef. The `presentation` prop swaps the inline combobox for a
|
|
12
|
+
* trigger that opens TokenizerBottomSheet.
|
|
13
13
|
*
|
|
14
14
|
* SYNC: When modified, update:
|
|
15
15
|
* - /packages/core/src/Tokenizer/index.ts
|
|
@@ -31,6 +31,7 @@ import { useBusyAnnouncement } from "../hooks/useBusyAnnouncement.js";
|
|
|
31
31
|
import { useAdaptivePresentation } from "../hooks/useAdaptivePresentation.js";
|
|
32
32
|
import { useIsHydrating } from "../hooks/useIsHydrating.js";
|
|
33
33
|
import { VisuallyHidden } from "../VisuallyHidden/index.js";
|
|
34
|
+
import { useDevWarning } from "../hooks/useDevWarning.js";
|
|
34
35
|
import { warnOnce } from "../utils/devWarning.js";
|
|
35
36
|
import { BaseTypeahead } from "../Typeahead/BaseTypeahead.js";
|
|
36
37
|
import { useSize } from "../SizeContext/SizeContext.js";
|
|
@@ -77,13 +78,14 @@ registerEnglishFallback(english);
|
|
|
77
78
|
* Imperative handle for Tokenizer handleRef.
|
|
78
79
|
*/
|
|
79
80
|
|
|
81
|
+
/** How Tokenizer presents its choices; see `TokenizerProps.presentation`. */
|
|
82
|
+
|
|
80
83
|
/**
|
|
81
|
-
* The props the
|
|
82
|
-
* `ref` also accepts the sheet
|
|
83
|
-
*
|
|
84
|
-
*
|
|
85
|
-
* `
|
|
86
|
-
* `ComponentProps<typeof Tokenizer>` keep their released shapes.
|
|
84
|
+
* The props the component accepts: `TokenizerProps`, whose `ref` keeps its
|
|
85
|
+
* released input type, with a `ref` that also accepts the sheet
|
|
86
|
+
* presentation's trigger button. `TokenizerProps` stays the declared props
|
|
87
|
+
* type, so `interface X extends TokenizerProps<T>`, `Omit<TokenizerProps<T>,
|
|
88
|
+
* …>` and `ComponentProps<typeof Tokenizer>` keep their released shapes.
|
|
87
89
|
*/
|
|
88
90
|
|
|
89
91
|
// =============================================================================
|
|
@@ -381,9 +383,9 @@ function EndLane({
|
|
|
381
383
|
}
|
|
382
384
|
|
|
383
385
|
// Keep this overload first. TypeScript resolves `ComponentProps<typeof
|
|
384
|
-
// Tokenizer>` against the last overload, so that type stays the
|
|
385
|
-
//
|
|
386
|
-
//
|
|
386
|
+
// Tokenizer>` against the last overload, so that type stays the released
|
|
387
|
+
// props. Every call matches this one, so a ref typed for both controls is
|
|
388
|
+
// accepted.
|
|
387
389
|
|
|
388
390
|
export function Tokenizer({
|
|
389
391
|
label,
|
|
@@ -430,6 +432,7 @@ export function Tokenizer({
|
|
|
430
432
|
ref,
|
|
431
433
|
handleRef,
|
|
432
434
|
onKeyDown,
|
|
435
|
+
presentation: presentationProp,
|
|
433
436
|
experimental,
|
|
434
437
|
id: idProp,
|
|
435
438
|
'aria-describedby': ariaDescribedByProp,
|
|
@@ -467,11 +470,11 @@ export function Tokenizer({
|
|
|
467
470
|
const inputRef = useRef(null);
|
|
468
471
|
const wrapperRef = useRef(null);
|
|
469
472
|
|
|
470
|
-
//
|
|
471
|
-
//
|
|
472
|
-
//
|
|
473
|
-
|
|
474
|
-
|
|
473
|
+
// `adaptive` resolves through the policy the selection controls share. An
|
|
474
|
+
// open sheet keeps its presentation until it closes. A resolution change
|
|
475
|
+
// during a task does not replace the open surface.
|
|
476
|
+
const presentation = presentationProp ?? experimental?.presentation ?? 'adaptive';
|
|
477
|
+
useDevWarning('Tokenizer', '`presentation` and `experimental.presentation` are both set; `presentation` wins. Remove `experimental.presentation`.', presentationProp !== undefined && experimental?.presentation !== undefined);
|
|
475
478
|
const resolvedPresentation = useAdaptivePresentation(presentation);
|
|
476
479
|
const [isSheetOpen, setIsSheetOpen] = useState(false);
|
|
477
480
|
// Latched for the sheet's lifetime: a sheet stays presented after it closes
|
|
@@ -561,7 +564,7 @@ export function Tokenizer({
|
|
|
561
564
|
if (inertSheetPropsKey === '') {
|
|
562
565
|
return;
|
|
563
566
|
}
|
|
564
|
-
warnOnce(`tokenizer:sheet-inert:${inertSheetPropsKey}`, 'Tokenizer', `\`${inertSheetProps.join('`, `')}\` ${inertSheetProps.length === 1 ? 'has' : 'have'} no surface in the bottom-sheet presentation and ${inertSheetProps.length === 1 ? 'is' : 'are'} not rendered there.`);
|
|
567
|
+
warnOnce(`tokenizer:sheet-inert:${inertSheetPropsKey}`, 'Tokenizer', `\`${inertSheetProps.join('`, `')}\` ${inertSheetProps.length === 1 ? 'has' : 'have'} no surface in the bottom-sheet presentation and ${inertSheetProps.length === 1 ? 'is' : 'are'} not rendered there. Pass \`presentation="popover"\` to keep the inline field on every device.`);
|
|
565
568
|
// eslint-disable-next-line @eslint-react/exhaustive-deps -- keyed by the joined names
|
|
566
569
|
}, [inertSheetPropsKey]);
|
|
567
570
|
// A field that becomes disabled cannot keep its sheet open, and must not
|
|
@@ -996,8 +999,8 @@ export function Tokenizer({
|
|
|
996
999
|
children: /*#__PURE__*/_jsx(BaseTypeahead, {
|
|
997
1000
|
...rest,
|
|
998
1001
|
ref: useMergedRefs(inputRef,
|
|
999
|
-
//
|
|
1000
|
-
//
|
|
1002
|
+
// The ref type admits the sheet's trigger too; in this
|
|
1003
|
+
// presentation it receives the input.
|
|
1001
1004
|
ref, handOffFocusRef),
|
|
1002
1005
|
searchSource: isAtMax ? emptySource : filteredSource,
|
|
1003
1006
|
value: null,
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* EmptyState, AlertDialog, Icon, Spinner, Text, useBusyAnnouncement, and
|
|
5
5
|
* the i18n translator
|
|
6
6
|
* @output Exports TokenizerBottomSheet — the touch surface of
|
|
7
|
-
* `Tokenizer
|
|
7
|
+
* `Tokenizer presentation="bottom-sheet"`: one tall modal sheet
|
|
8
8
|
* with a search row on top, stable-order checkbox rows, progressive
|
|
9
9
|
* long-list rendering, an optional create row, and a confirmed Clear all
|
|
10
10
|
* @position Internal presentation surface of Tokenizer. Loaded on demand by
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
* EmptyState, AlertDialog, Icon, Spinner, Text, useBusyAnnouncement, and
|
|
9
9
|
* the i18n translator
|
|
10
10
|
* @output Exports TokenizerBottomSheet — the touch surface of
|
|
11
|
-
* `Tokenizer
|
|
11
|
+
* `Tokenizer presentation="bottom-sheet"`: one tall modal sheet
|
|
12
12
|
* with a search row on top, stable-order checkbox rows, progressive
|
|
13
13
|
* long-list rendering, an optional create row, and a confirmed Clear all
|
|
14
14
|
* @position Internal presentation surface of Tokenizer. Loaded on demand by
|
|
@@ -7,5 +7,5 @@
|
|
|
7
7
|
* SYNC: When adding new Tokenizer files, update exports here
|
|
8
8
|
*/
|
|
9
9
|
export { Tokenizer } from './Tokenizer.js';
|
|
10
|
-
export type { TokenizerProps, TokenizerSize, TokenizerOverflowBehavior, TokenizerChange, TokenizerHandle, TokenizerStatus, TokenizerStatusType, } from './Tokenizer.js';
|
|
10
|
+
export type { TokenizerProps, TokenizerSize, TokenizerOverflowBehavior, TokenizerPresentation, TokenizerChange, TokenizerHandle, TokenizerStatus, TokenizerStatusType, } from './Tokenizer.js';
|
|
11
11
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Tokenizer/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,YAAY,EACV,cAAc,EACd,aAAa,EACb,yBAAyB,EACzB,eAAe,EACf,eAAe,EACf,eAAe,EACf,mBAAmB,GACpB,MAAM,aAAa,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Tokenizer/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,YAAY,EACV,cAAc,EACd,aAAa,EACb,yBAAyB,EACzB,qBAAqB,EACrB,eAAe,EACf,eAAe,EACf,eAAe,EACf,mBAAmB,GACpB,MAAM,aAAa,CAAC"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file useTooltip.tsx
|
|
3
3
|
* @input Uses useLayer, usePressPin, React hooks
|
|
4
|
-
* @output Exports useTooltip hook with stable trigger refs for hover/focus/tap tooltips
|
|
4
|
+
* @output Exports useTooltip hook with stable trigger refs for hover/focus/tap tooltips
|
|
5
|
+
* and imperative show() and hide() for an app-built toggle trigger,
|
|
5
6
|
* and the module-only useTooltipWithTriggerBehavior that InfoTip's press-to-pin uses
|
|
6
7
|
* @position Layer hook; builds on useLayer for tooltip behavior
|
|
7
8
|
*
|
|
@@ -133,6 +134,23 @@ export interface TooltipReturn {
|
|
|
133
134
|
* silent no-op.
|
|
134
135
|
*/
|
|
135
136
|
renderTooltip: (children: ReactNode, props?: Omit<ContextRenderProps, 'positioning'>) => ReactNode;
|
|
137
|
+
/**
|
|
138
|
+
* Opens the tooltip now and keeps it open until `hide()`, Escape, a press
|
|
139
|
+
* outside, or focus leaving its trigger, as a pinned tooltip does. Its text
|
|
140
|
+
* is announced once. Reports through `onShow`. Under a controlled `isOpen`,
|
|
141
|
+
* it calls `onShow` and does not change `isOpen`. Does nothing while
|
|
142
|
+
* `isEnabled` is false.
|
|
143
|
+
*
|
|
144
|
+
* Use `show()` and `hide()` to build a toggle-style trigger: your own button
|
|
145
|
+
* calls them, sets `aria-describedby` and `aria-controls` to `describedBy`
|
|
146
|
+
* and `aria-expanded` (true while shown), and keeps its own accessible name.
|
|
147
|
+
*/
|
|
148
|
+
show: () => void;
|
|
149
|
+
/**
|
|
150
|
+
* Closes the tooltip now. Reports through `onHide`. Under a controlled
|
|
151
|
+
* `isOpen`, it calls `onHide` and does not change `isOpen`.
|
|
152
|
+
*/
|
|
153
|
+
hide: () => void;
|
|
136
154
|
}
|
|
137
155
|
/**
|
|
138
156
|
* Hook for tooltip behavior with hover/focus triggers.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/useTooltip.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/useTooltip.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,0BAA0B,CAAC;AAKhE,OAAO,EAAc,KAAK,oBAAoB,EAAC,MAAM,sBAAsB,CAAC;AA0C5E;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE9D;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,CAAC;AAEpD,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IACH,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC;;;;OAIG;IACH,cAAc,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEzC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;;;;OAOG;IACH,aAAa,EAAE,CACb,QAAQ,EAAE,SAAS,EACnB,KAAK,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,aAAa,CAAC,KAC5C,SAAS,CAAC;IAEf;;;;;;;;;;OAUG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;;OAGG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,wBAAgB,UAAU,CAAC,OAAO,GAAE,cAAmB,GAAG,aAAa,CAOtE;AAED;;;GAGG;AACH,MAAM,WAAW,iCAAkC,SAAQ,cAAc;IACvE;;;;;;;;;;;;OAYG;IACH,eAAe,CAAC,EAAE,oBAAoB,CAAC;CACxC;AAED;;;GAGG;AACH,wBAAgB,6BAA6B,CAC3C,OAAO,GAAE,iCAAsC,GAC9C,aAAa,CA2df"}
|
|
@@ -5,14 +5,16 @@
|
|
|
5
5
|
/**
|
|
6
6
|
* @file useTooltip.tsx
|
|
7
7
|
* @input Uses useLayer, usePressPin, React hooks
|
|
8
|
-
* @output Exports useTooltip hook with stable trigger refs for hover/focus/tap tooltips
|
|
8
|
+
* @output Exports useTooltip hook with stable trigger refs for hover/focus/tap tooltips
|
|
9
|
+
* and imperative show() and hide() for an app-built toggle trigger,
|
|
9
10
|
* and the module-only useTooltipWithTriggerBehavior that InfoTip's press-to-pin uses
|
|
10
11
|
* @position Layer hook; builds on useLayer for tooltip behavior
|
|
11
12
|
*
|
|
12
13
|
* SYNC: When modified, update:
|
|
13
14
|
* - /packages/core/src/Tooltip/index.ts
|
|
14
15
|
*/
|
|
15
|
-
import { useCallback, useEffect, useRef } from 'react';
|
|
16
|
+
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
17
|
+
import { createTriggerFocusGate } from "../utils/triggerFocus.js";
|
|
16
18
|
import * as stylex from '@stylexjs/stylex';
|
|
17
19
|
import { useLayerInternal } from "../Layer/useLayer.js";
|
|
18
20
|
import { useAnnounceRenderedText } from "../hooks/useAnnounceRenderedText.js";
|
|
@@ -52,28 +54,6 @@ const styles = {
|
|
|
52
54
|
* Touch trigger behavior for tooltips
|
|
53
55
|
*/
|
|
54
56
|
|
|
55
|
-
/**
|
|
56
|
-
* Check if an element is naturally focusable
|
|
57
|
-
*/
|
|
58
|
-
function isFocusable(element) {
|
|
59
|
-
// Elements with explicit tabindex
|
|
60
|
-
if (element.hasAttribute('tabindex')) {
|
|
61
|
-
return element.tabIndex >= 0;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
// Naturally focusable elements
|
|
65
|
-
const focusableTags = ['A', 'BUTTON', 'INPUT', 'SELECT', 'TEXTAREA'];
|
|
66
|
-
if (focusableTags.includes(element.tagName)) {
|
|
67
|
-
return !element.disabled;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
// Elements with contenteditable
|
|
71
|
-
if (element.isContentEditable) {
|
|
72
|
-
return true;
|
|
73
|
-
}
|
|
74
|
-
return false;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
57
|
/**
|
|
78
58
|
* Hook for tooltip behavior with hover/focus triggers.
|
|
79
59
|
*
|
|
@@ -187,6 +167,9 @@ export function useTooltipWithTriggerBehavior(options = {}) {
|
|
|
187
167
|
isHeldOpen: isPressHeldOpen,
|
|
188
168
|
attach: attachPressPin,
|
|
189
169
|
unpin: unpinPress,
|
|
170
|
+
hold: holdPress,
|
|
171
|
+
release: releasePress,
|
|
172
|
+
isAppHeld,
|
|
190
173
|
isPinShown,
|
|
191
174
|
touch: {
|
|
192
175
|
isTouchPointerRef,
|
|
@@ -289,25 +272,11 @@ export function useTooltipWithTriggerBehavior(options = {}) {
|
|
|
289
272
|
scheduleHide();
|
|
290
273
|
}, [isTouchPointerRef, layerId, scheduleHide]);
|
|
291
274
|
|
|
292
|
-
// Under `auto`, whether focus counts is decided when it arrives,
|
|
293
|
-
//
|
|
294
|
-
|
|
295
|
-
// by definition; focus inside it counts only while the trigger is
|
|
296
|
-
// focusable too, so a plain wrapper still ignores its children's focus.
|
|
297
|
-
const isFocusForTrigger = useCallback(e => {
|
|
298
|
-
if (focusTrigger === 'always') {
|
|
299
|
-
return true;
|
|
300
|
-
}
|
|
301
|
-
const triggerEl = e.currentTarget;
|
|
302
|
-
return triggerEl != null && (e.target === triggerEl || isFocusable(triggerEl));
|
|
303
|
-
}, [focusTrigger]);
|
|
304
|
-
|
|
305
|
-
// Whether the trigger's current focus counted when it arrived, so its blur
|
|
306
|
-
// hides the tooltip even if the trigger has since left the tab order.
|
|
307
|
-
const focusCountedRef = useRef(false);
|
|
275
|
+
// Under `auto`, whether focus counts is decided when it arrives, and a
|
|
276
|
+
// focus that counted still hides on blur (utils/triggerFocus.ts).
|
|
277
|
+
const [focusGate] = useState(createTriggerFocusGate);
|
|
308
278
|
const handleFocusIn = useCallback(e => {
|
|
309
|
-
|
|
310
|
-
if (!isEnabled || !focusCountedRef.current) {
|
|
279
|
+
if (!focusGate.focusIn(e, focusTrigger) || !isEnabled) {
|
|
311
280
|
return;
|
|
312
281
|
}
|
|
313
282
|
// A tap focuses the trigger it activates, and `:focus-visible` does not
|
|
@@ -326,18 +295,17 @@ export function useTooltipWithTriggerBehavior(options = {}) {
|
|
|
326
295
|
}
|
|
327
296
|
clearTimeouts();
|
|
328
297
|
showLayer();
|
|
329
|
-
}, [
|
|
298
|
+
}, [focusGate, focusTrigger, isEnabled, isTouchInteraction, clearTimeouts, showLayer]);
|
|
330
299
|
|
|
331
300
|
// A pinned tooltip's focus-leave close is the pin's own: it listens on the
|
|
332
301
|
// trigger whatever `focusTrigger` is. This schedules the unpinned hide,
|
|
333
302
|
// which a held tooltip skips.
|
|
334
303
|
const handleFocusOut = useCallback(e => {
|
|
335
|
-
if (!
|
|
304
|
+
if (!focusGate.focusOut(e, focusTrigger)) {
|
|
336
305
|
return;
|
|
337
306
|
}
|
|
338
|
-
focusCountedRef.current = false;
|
|
339
307
|
scheduleHide();
|
|
340
|
-
}, [
|
|
308
|
+
}, [focusGate, focusTrigger, scheduleHide]);
|
|
341
309
|
|
|
342
310
|
// Pressing the trigger hides its own tooltip: once the control is activated
|
|
343
311
|
// the hint has served its purpose, and a tooltip lingering over a
|
|
@@ -347,9 +315,10 @@ export function useTooltipWithTriggerBehavior(options = {}) {
|
|
|
347
315
|
// A touch press is a different gesture (it may be the only way to open the
|
|
348
316
|
// tooltip at all), so the touch path answers it first.
|
|
349
317
|
const handlePointerDown = useCallback(event => {
|
|
350
|
-
// A
|
|
351
|
-
//
|
|
352
|
-
|
|
318
|
+
// A toggle trigger's press pins or closes through its click. The app's
|
|
319
|
+
// hide() closes a held tooltip. Neither path hides here or waits for a
|
|
320
|
+
// tap verdict.
|
|
321
|
+
if (isToggleTrigger(triggerRef.current) || isAppHeld()) {
|
|
353
322
|
return;
|
|
354
323
|
}
|
|
355
324
|
if (handleTouchPointerDown(event)) {
|
|
@@ -360,7 +329,7 @@ export function useTooltipWithTriggerBehavior(options = {}) {
|
|
|
360
329
|
}
|
|
361
330
|
clearTimeouts();
|
|
362
331
|
hideLayer();
|
|
363
|
-
}, [isToggleTrigger, handleTouchPointerDown, isOpen, clearTimeouts, hideLayer]);
|
|
332
|
+
}, [isToggleTrigger, isAppHeld, handleTouchPointerDown, isOpen, clearTimeouts, hideLayer]);
|
|
364
333
|
|
|
365
334
|
// Interaction ref that handles event listeners only
|
|
366
335
|
const interactionRef = useCallback(el => {
|
|
@@ -384,7 +353,7 @@ export function useTooltipWithTriggerBehavior(options = {}) {
|
|
|
384
353
|
el.addEventListener('pointerdown', handlePointerDown);
|
|
385
354
|
|
|
386
355
|
// Focus listeners unless focus never opens the tooltip; `auto` decides
|
|
387
|
-
// per event (
|
|
356
|
+
// per event (utils/triggerFocus.ts).
|
|
388
357
|
if (focusTrigger !== 'never') {
|
|
389
358
|
el.addEventListener('focusin', handleFocusIn);
|
|
390
359
|
el.addEventListener('focusout', handleFocusOut);
|
|
@@ -425,9 +394,11 @@ export function useTooltipWithTriggerBehavior(options = {}) {
|
|
|
425
394
|
showLayer();
|
|
426
395
|
} else {
|
|
427
396
|
clearTimeouts();
|
|
397
|
+
// A pin or app hold ends when the consumer closes the tooltip.
|
|
398
|
+
unpinPress();
|
|
428
399
|
hideLayer();
|
|
429
400
|
}
|
|
430
|
-
}, [isOpen, clearTimeouts, showLayer, hideLayer]);
|
|
401
|
+
}, [isOpen, clearTimeouts, showLayer, hideLayer, unpinPress]);
|
|
431
402
|
|
|
432
403
|
// Dismiss on Escape (WCAG 1.4.13 — dismissible) through the shared layer
|
|
433
404
|
// stack. A visible tip is the top-most layer, so it takes the press and
|
|
@@ -507,12 +478,22 @@ export function useTooltipWithTriggerBehavior(options = {}) {
|
|
|
507
478
|
children: children
|
|
508
479
|
}), renderProps);
|
|
509
480
|
}, [renderLayer, placement, alignment, popoverXstyle, cancelHide, scheduleHide, contentRefs]);
|
|
481
|
+
const show = useCallback(() => {
|
|
482
|
+
clearTimeouts();
|
|
483
|
+
holdPress();
|
|
484
|
+
}, [clearTimeouts, holdPress]);
|
|
485
|
+
const hide = useCallback(() => {
|
|
486
|
+
clearTimeouts();
|
|
487
|
+
releasePress();
|
|
488
|
+
}, [clearTimeouts, releasePress]);
|
|
510
489
|
return {
|
|
511
490
|
ref,
|
|
512
491
|
positionRef: layerRef,
|
|
513
492
|
interactionRef,
|
|
514
493
|
anchorId: layerAnchorId,
|
|
515
494
|
describedBy: layerId,
|
|
516
|
-
renderTooltip
|
|
495
|
+
renderTooltip,
|
|
496
|
+
show,
|
|
497
|
+
hide
|
|
517
498
|
};
|
|
518
499
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseTypeahead.d.ts","sourceRoot":"","sources":["../../src/Typeahead/BaseTypeahead.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"BaseTypeahead.d.ts","sourceRoot":"","sources":["../../src/Typeahead/BaseTypeahead.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,EAQZ,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAgCnD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAgB,cAAc,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAmBzE,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,IAAI,CACxE,SAAS,CAAC,WAAW,CAAC,EACtB,UAAU,CACX;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAE9B;;OAEG;IACH,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAEhB;;OAEG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IAEpC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,mEAAmE;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;;;OAUG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;;;;;;;;;;OAaG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;OASG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;;;;;;;;;;;;;;;;OAmBG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;IAEtD;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC;IAE3B;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAE1C;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAE/D;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AA8MD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,aAAa,EA81CrB,CAAC,CAAC,SAAS,cAAc,EAC5B,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,KACzB,KAAK,CAAC,YAAY,CAAC"}
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
* - /packages/core/src/Typeahead/index.ts
|
|
20
20
|
* - /packages/cli/assets/templates/blocks/components/Typeahead/ (showcase blocks)
|
|
21
21
|
*/
|
|
22
|
-
import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
|
|
22
|
+
import React, { useCallback, useEffect, useId, useInsertionEffect, useMemo, useRef, useState } from 'react';
|
|
23
23
|
import * as stylex from '@stylexjs/stylex';
|
|
24
24
|
import { useBusyIndicatorLane } from "./busyIndicatorLane.js";
|
|
25
25
|
import { useTrailingKeyDown } from "./trailingKeyDown.js";
|
|
@@ -455,15 +455,6 @@ export const BaseTypeahead = function BaseTypeahead({
|
|
|
455
455
|
// source: they can never be re-shown, so focus bootstraps the new source.
|
|
456
456
|
const sourceGenRef = useRef(0);
|
|
457
457
|
|
|
458
|
-
// Results still arriving from a replaced source must not land in the new
|
|
459
|
-
// one's menu.
|
|
460
|
-
const prevSearchSourceRef = useRef(searchSource);
|
|
461
|
-
if (prevSearchSourceRef.current !== searchSource) {
|
|
462
|
-
prevSearchSourceRef.current.cancel?.();
|
|
463
|
-
prevSearchSourceRef.current = searchSource;
|
|
464
|
-
sourceGenRef.current = ++searchGenRef.current;
|
|
465
|
-
}
|
|
466
|
-
|
|
467
458
|
// The previous source is remembered in state, not a ref, so a render React
|
|
468
459
|
// discards cannot consume the comparison without its state updates.
|
|
469
460
|
const [sourceOfState, setSourceOfState] = useState(searchSource);
|
|
@@ -473,7 +464,6 @@ export const BaseTypeahead = function BaseTypeahead({
|
|
|
473
464
|
setIsLoading(false);
|
|
474
465
|
setHasSearched(false);
|
|
475
466
|
}
|
|
476
|
-
loadingRef.current = false;
|
|
477
467
|
}
|
|
478
468
|
// A field that becomes disabled stops showing a search as busy in the same
|
|
479
469
|
// render, and the dropped query shows no outcome, so no empty state; the
|
|
@@ -487,15 +477,34 @@ export const BaseTypeahead = function BaseTypeahead({
|
|
|
487
477
|
}
|
|
488
478
|
}
|
|
489
479
|
|
|
490
|
-
//
|
|
491
|
-
// source
|
|
492
|
-
//
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
480
|
+
// Results that arrive from a replaced source must not land in the new
|
|
481
|
+
// source's menu, so the replacement starts a new generation. That happens
|
|
482
|
+
// when the replacement commits, not in render. React can render a
|
|
483
|
+
// replacement and then discard it, for example when a transition suspends
|
|
484
|
+
// and a newer update replaces it. The source that stays then keeps its read.
|
|
485
|
+
// An insertion effect runs before every layout effect and ref callback of
|
|
486
|
+
// its commit. A read that one of them starts against the replacement gets a
|
|
487
|
+
// later generation, after the replaced source stopped its requests.
|
|
488
|
+
const prevSearchSourceRef = useRef(searchSource);
|
|
489
|
+
const isSourceReplacedRef = useRef(false);
|
|
490
|
+
useInsertionEffect(() => {
|
|
491
|
+
if (prevSearchSourceRef.current === searchSource) {
|
|
492
|
+
return;
|
|
493
|
+
}
|
|
494
|
+
prevSearchSourceRef.current.cancel?.();
|
|
495
|
+
prevSearchSourceRef.current = searchSource;
|
|
496
|
+
sourceGenRef.current = ++searchGenRef.current;
|
|
497
|
+
// The replacing render cleared the busy state.
|
|
498
|
+
loadingRef.current = false;
|
|
499
|
+
isSourceReplacedRef.current = true;
|
|
500
|
+
}, [searchSource]);
|
|
501
|
+
// Syncs the wrapper's busy lane. A read of the replacement that already
|
|
502
|
+
// started keeps the lane busy.
|
|
503
|
+
useIsomorphicLayoutEffect(() => {
|
|
504
|
+
if (!isSourceReplacedRef.current) {
|
|
497
505
|
return;
|
|
498
506
|
}
|
|
507
|
+
isSourceReplacedRef.current = false;
|
|
499
508
|
if (!loadingRef.current) {
|
|
500
509
|
onLoadingChangeRef.current?.(false);
|
|
501
510
|
}
|
|
@@ -31,7 +31,8 @@ export interface TypeaheadItemProps<T extends SearchableItem = SearchableItem> e
|
|
|
31
31
|
*/
|
|
32
32
|
isDisabled?: boolean;
|
|
33
33
|
/**
|
|
34
|
-
*
|
|
34
|
+
* This prop has no effect. Set `item.auxiliaryData.group` on search-source
|
|
35
|
+
* items to group results in Typeahead or BaseTypeahead.
|
|
35
36
|
*/
|
|
36
37
|
group?: string;
|
|
37
38
|
}
|