@vuu-ui/vuu-ui-controls 2.1.17 → 2.1.19-beta.1
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/package.json +13 -15
- package/types/calendar/useCalendar.d.ts +3 -3
- package/types/calendar/useSelection.d.ts +1 -1
- package/types/date-input/DateInput.d.ts +1 -1
- package/types/date-picker/DatePicker.d.ts +1 -1
- package/types/date-picker/DatePickerContext.d.ts +2 -2
- package/types/date-picker/DatePickerPanel.d.ts +1 -1
- package/types/instrument-picker/useTablePicker.d.ts +4 -4
- package/types/split-button/useSplitButton.d.ts +120 -120
- package/types/tabs-next/hooks/useOverflow.d.ts +1 -1
- package/types/tabstrip/Tab.d.ts +1 -1
- package/types/tabstrip/useTabstrip.d.ts +1 -1
- package/types/toolbar/useToolbar.d.ts +1 -1
- package/cjs/calendar/Calendar.css.js +0 -6
- package/cjs/calendar/Calendar.css.js.map +0 -1
- package/cjs/calendar/Calendar.js +0 -93
- package/cjs/calendar/Calendar.js.map +0 -1
- package/cjs/calendar/internal/CalendarCarousel.css.js +0 -6
- package/cjs/calendar/internal/CalendarCarousel.css.js.map +0 -1
- package/cjs/calendar/internal/CalendarCarousel.js +0 -75
- package/cjs/calendar/internal/CalendarCarousel.js.map +0 -1
- package/cjs/calendar/internal/CalendarContext.js +0 -19
- package/cjs/calendar/internal/CalendarContext.js.map +0 -1
- package/cjs/calendar/internal/CalendarDay.css.js +0 -6
- package/cjs/calendar/internal/CalendarDay.css.js.map +0 -1
- package/cjs/calendar/internal/CalendarDay.js +0 -86
- package/cjs/calendar/internal/CalendarDay.js.map +0 -1
- package/cjs/calendar/internal/CalendarMonth.css.js +0 -6
- package/cjs/calendar/internal/CalendarMonth.css.js.map +0 -1
- package/cjs/calendar/internal/CalendarMonth.js +0 -71
- package/cjs/calendar/internal/CalendarMonth.js.map +0 -1
- package/cjs/calendar/internal/CalendarNavigation.css.js +0 -6
- package/cjs/calendar/internal/CalendarNavigation.css.js.map +0 -1
- package/cjs/calendar/internal/CalendarNavigation.js +0 -236
- package/cjs/calendar/internal/CalendarNavigation.js.map +0 -1
- package/cjs/calendar/internal/CalendarWeekHeader.css.js +0 -6
- package/cjs/calendar/internal/CalendarWeekHeader.css.js.map +0 -1
- package/cjs/calendar/internal/CalendarWeekHeader.js +0 -43
- package/cjs/calendar/internal/CalendarWeekHeader.js.map +0 -1
- package/cjs/calendar/internal/useFocusManagement.js +0 -66
- package/cjs/calendar/internal/useFocusManagement.js.map +0 -1
- package/cjs/calendar/internal/utils.js +0 -64
- package/cjs/calendar/internal/utils.js.map +0 -1
- package/cjs/calendar/useCalendar.js +0 -163
- package/cjs/calendar/useCalendar.js.map +0 -1
- package/cjs/calendar/useCalendarDay.js +0 -80
- package/cjs/calendar/useCalendarDay.js.map +0 -1
- package/cjs/calendar/useSelection.js +0 -248
- package/cjs/calendar/useSelection.js.map +0 -1
- package/cjs/column-picker/ColumnPicker.css.js +0 -6
- package/cjs/column-picker/ColumnPicker.css.js.map +0 -1
- package/cjs/column-picker/ColumnPicker.js +0 -128
- package/cjs/column-picker/ColumnPicker.js.map +0 -1
- package/cjs/column-picker/ColumnSearch.css.js +0 -6
- package/cjs/column-picker/ColumnSearch.css.js.map +0 -1
- package/cjs/column-picker/ColumnSearch.js +0 -82
- package/cjs/column-picker/ColumnSearch.js.map +0 -1
- package/cjs/common-hooks/selectionTypes.js +0 -18
- package/cjs/common-hooks/selectionTypes.js.map +0 -1
- package/cjs/common-hooks/use-resize-observer.js +0 -123
- package/cjs/common-hooks/use-resize-observer.js.map +0 -1
- package/cjs/common-hooks/useControlled.js +0 -58
- package/cjs/common-hooks/useControlled.js.map +0 -1
- package/cjs/context-panel-provider/ContextPanelProvider.js +0 -99
- package/cjs/context-panel-provider/ContextPanelProvider.js.map +0 -1
- package/cjs/cycle-state-button/CycleStateButton.js +0 -50
- package/cjs/cycle-state-button/CycleStateButton.js.map +0 -1
- package/cjs/date-input/DateInput.css.js +0 -6
- package/cjs/date-input/DateInput.css.js.map +0 -1
- package/cjs/date-input/DateInput.js +0 -277
- package/cjs/date-input/DateInput.js.map +0 -1
- package/cjs/date-picker/DatePicker.js +0 -169
- package/cjs/date-picker/DatePicker.js.map +0 -1
- package/cjs/date-picker/DatePickerContext.js +0 -26
- package/cjs/date-picker/DatePickerContext.js.map +0 -1
- package/cjs/date-picker/DatePickerPanel.css.js +0 -6
- package/cjs/date-picker/DatePickerPanel.css.js.map +0 -1
- package/cjs/date-picker/DatePickerPanel.js +0 -146
- package/cjs/date-picker/DatePickerPanel.js.map +0 -1
- package/cjs/drag-drop/DragDropProvider.js +0 -145
- package/cjs/drag-drop/DragDropProvider.js.map +0 -1
- package/cjs/drag-drop/DragDropState.js +0 -36
- package/cjs/drag-drop/DragDropState.js.map +0 -1
- package/cjs/drag-drop/Draggable.css.js +0 -6
- package/cjs/drag-drop/Draggable.css.js.map +0 -1
- package/cjs/drag-drop/Draggable.js +0 -90
- package/cjs/drag-drop/Draggable.js.map +0 -1
- package/cjs/drag-drop/dragDropTypes.js +0 -8
- package/cjs/drag-drop/dragDropTypes.js.map +0 -1
- package/cjs/drag-drop/drop-target-utils.js +0 -245
- package/cjs/drag-drop/drop-target-utils.js.map +0 -1
- package/cjs/drag-drop/useAutoScroll.js +0 -71
- package/cjs/drag-drop/useAutoScroll.js.map +0 -1
- package/cjs/drag-drop/useDragDisplacers.js +0 -160
- package/cjs/drag-drop/useDragDisplacers.js.map +0 -1
- package/cjs/drag-drop/useDragDrop.js +0 -504
- package/cjs/drag-drop/useDragDrop.js.map +0 -1
- package/cjs/drag-drop/useDragDropCopy.js +0 -34
- package/cjs/drag-drop/useDragDropCopy.js.map +0 -1
- package/cjs/drag-drop/useDragDropIndicator.js +0 -251
- package/cjs/drag-drop/useDragDropIndicator.js.map +0 -1
- package/cjs/drag-drop/useDragDropNaturalMovement.js +0 -265
- package/cjs/drag-drop/useDragDropNaturalMovement.js.map +0 -1
- package/cjs/drag-drop/useDropIndicator.js +0 -27
- package/cjs/drag-drop/useDropIndicator.js.map +0 -1
- package/cjs/drag-drop/useGlobalDragDrop.js +0 -89
- package/cjs/drag-drop/useGlobalDragDrop.js.map +0 -1
- package/cjs/editable/useEditableText.js +0 -211
- package/cjs/editable/useEditableText.js.map +0 -1
- package/cjs/editable-label/EditableLabel.css.js +0 -6
- package/cjs/editable-label/EditableLabel.css.js.map +0 -1
- package/cjs/editable-label/EditableLabel.js +0 -143
- package/cjs/editable-label/EditableLabel.js.map +0 -1
- package/cjs/expando-input/ExpandoInput.css.js +0 -6
- package/cjs/expando-input/ExpandoInput.css.js.map +0 -1
- package/cjs/expando-input/ExpandoInput.js +0 -53
- package/cjs/expando-input/ExpandoInput.js.map +0 -1
- package/cjs/hover-overlay/HoverOverlay.js +0 -96
- package/cjs/hover-overlay/HoverOverlay.js.map +0 -1
- package/cjs/icon-button/Icon.css.js +0 -6
- package/cjs/icon-button/Icon.css.js.map +0 -1
- package/cjs/icon-button/Icon.js +0 -37
- package/cjs/icon-button/Icon.js.map +0 -1
- package/cjs/icon-button/IconButton.css.js +0 -6
- package/cjs/icon-button/IconButton.css.js.map +0 -1
- package/cjs/icon-button/IconButton.js +0 -26
- package/cjs/icon-button/IconButton.js.map +0 -1
- package/cjs/icon-button/ToggleIconButton.css.js +0 -6
- package/cjs/icon-button/ToggleIconButton.css.js.map +0 -1
- package/cjs/icon-button/ToggleIconButton.js +0 -39
- package/cjs/icon-button/ToggleIconButton.js.map +0 -1
- package/cjs/index.js +0 -170
- package/cjs/index.js.map +0 -1
- package/cjs/instrument-picker/TablePicker.css.js +0 -6
- package/cjs/instrument-picker/TablePicker.css.js.map +0 -1
- package/cjs/instrument-picker/TablePicker.js +0 -130
- package/cjs/instrument-picker/TablePicker.js.map +0 -1
- package/cjs/instrument-picker/useTablePicker.js +0 -150
- package/cjs/instrument-picker/useTablePicker.js.map +0 -1
- package/cjs/measured-container/MeasuredContainer.css.js +0 -6
- package/cjs/measured-container/MeasuredContainer.css.js.map +0 -1
- package/cjs/measured-container/MeasuredContainer.js +0 -72
- package/cjs/measured-container/MeasuredContainer.js.map +0 -1
- package/cjs/measured-container/useMeasuredContainer.js +0 -167
- package/cjs/measured-container/useMeasuredContainer.js.map +0 -1
- package/cjs/modal-provider/ModalProvider.js +0 -143
- package/cjs/modal-provider/ModalProvider.js.map +0 -1
- package/cjs/overflow-container/OverflowContainer.css.js +0 -6
- package/cjs/overflow-container/OverflowContainer.css.js.map +0 -1
- package/cjs/overflow-container/OverflowContainer.js +0 -143
- package/cjs/overflow-container/OverflowContainer.js.map +0 -1
- package/cjs/overflow-container/overflow-utils.js +0 -286
- package/cjs/overflow-container/overflow-utils.js.map +0 -1
- package/cjs/overflow-container/useOverflowContainer.js +0 -143
- package/cjs/overflow-container/useOverflowContainer.js.map +0 -1
- package/cjs/price-ticker/PriceTicker.css.js +0 -6
- package/cjs/price-ticker/PriceTicker.css.js.map +0 -1
- package/cjs/price-ticker/PriceTicker.js +0 -50
- package/cjs/price-ticker/PriceTicker.js.map +0 -1
- package/cjs/prompt/Prompt.css.js +0 -6
- package/cjs/prompt/Prompt.css.js.map +0 -1
- package/cjs/prompt/Prompt.js +0 -142
- package/cjs/prompt/Prompt.js.map +0 -1
- package/cjs/sortable-list/SortableList.js +0 -37
- package/cjs/sortable-list/SortableList.js.map +0 -1
- package/cjs/split-button/SplitButton.css.js +0 -6
- package/cjs/split-button/SplitButton.css.js.map +0 -1
- package/cjs/split-button/SplitButton.js +0 -84
- package/cjs/split-button/SplitButton.js.map +0 -1
- package/cjs/split-button/SplitStateButton.css.js +0 -6
- package/cjs/split-button/SplitStateButton.css.js.map +0 -1
- package/cjs/split-button/SplitStateButton.js +0 -31
- package/cjs/split-button/SplitStateButton.js.map +0 -1
- package/cjs/split-button/useSplitButton.js +0 -84
- package/cjs/split-button/useSplitButton.js.map +0 -1
- package/cjs/table-search/SearchCell.css.js +0 -6
- package/cjs/table-search/SearchCell.css.js.map +0 -1
- package/cjs/table-search/SearchCell.js +0 -32
- package/cjs/table-search/SearchCell.js.map +0 -1
- package/cjs/table-search/TableSearch.css.js +0 -6
- package/cjs/table-search/TableSearch.css.js.map +0 -1
- package/cjs/table-search/TableSearch.js +0 -89
- package/cjs/table-search/TableSearch.js.map +0 -1
- package/cjs/table-search/useTableSearch.js +0 -39
- package/cjs/table-search/useTableSearch.js.map +0 -1
- package/cjs/tabs-next/TabBar.css.js +0 -6
- package/cjs/tabs-next/TabBar.css.js.map +0 -1
- package/cjs/tabs-next/TabBar.js +0 -41
- package/cjs/tabs-next/TabBar.js.map +0 -1
- package/cjs/tabs-next/TabListNext.css.js +0 -6
- package/cjs/tabs-next/TabListNext.css.js.map +0 -1
- package/cjs/tabs-next/TabListNext.js +0 -124
- package/cjs/tabs-next/TabListNext.js.map +0 -1
- package/cjs/tabs-next/TabNext.css.js +0 -6
- package/cjs/tabs-next/TabNext.css.js.map +0 -1
- package/cjs/tabs-next/TabNext.js +0 -110
- package/cjs/tabs-next/TabNext.js.map +0 -1
- package/cjs/tabs-next/TabNextAction.js +0 -35
- package/cjs/tabs-next/TabNextAction.js.map +0 -1
- package/cjs/tabs-next/TabNextContext.js +0 -23
- package/cjs/tabs-next/TabNextContext.js.map +0 -1
- package/cjs/tabs-next/TabNextPanel.css.js +0 -6
- package/cjs/tabs-next/TabNextPanel.css.js.map +0 -1
- package/cjs/tabs-next/TabNextPanel.js +0 -77
- package/cjs/tabs-next/TabNextPanel.js.map +0 -1
- package/cjs/tabs-next/TabNextTrigger.css.js +0 -6
- package/cjs/tabs-next/TabNextTrigger.css.js.map +0 -1
- package/cjs/tabs-next/TabNextTrigger.js +0 -74
- package/cjs/tabs-next/TabNextTrigger.js.map +0 -1
- package/cjs/tabs-next/TabOverflowList.css.js +0 -6
- package/cjs/tabs-next/TabOverflowList.css.js.map +0 -1
- package/cjs/tabs-next/TabOverflowList.js +0 -130
- package/cjs/tabs-next/TabOverflowList.js.map +0 -1
- package/cjs/tabs-next/TabsNext.js +0 -174
- package/cjs/tabs-next/TabsNext.js.map +0 -1
- package/cjs/tabs-next/TabsNextContext.js +0 -33
- package/cjs/tabs-next/TabsNextContext.js.map +0 -1
- package/cjs/tabs-next/hooks/useCollection.js +0 -91
- package/cjs/tabs-next/hooks/useCollection.js.map +0 -1
- package/cjs/tabs-next/hooks/useFocusOutside.js +0 -24
- package/cjs/tabs-next/hooks/useFocusOutside.js.map +0 -1
- package/cjs/tabs-next/hooks/useOverflow.js +0 -138
- package/cjs/tabs-next/hooks/useOverflow.js.map +0 -1
- package/cjs/tabstrip/Tab.css.js +0 -6
- package/cjs/tabstrip/Tab.css.js.map +0 -1
- package/cjs/tabstrip/Tab.js +0 -153
- package/cjs/tabstrip/Tab.js.map +0 -1
- package/cjs/tabstrip/TabMenu.css.js +0 -6
- package/cjs/tabstrip/TabMenu.css.js.map +0 -1
- package/cjs/tabstrip/TabMenu.js +0 -72
- package/cjs/tabstrip/TabMenu.js.map +0 -1
- package/cjs/tabstrip/TabMenuOptions.js +0 -20
- package/cjs/tabstrip/TabMenuOptions.js.map +0 -1
- package/cjs/tabstrip/Tabstrip.css.js +0 -6
- package/cjs/tabstrip/Tabstrip.css.js.map +0 -1
- package/cjs/tabstrip/Tabstrip.js +0 -160
- package/cjs/tabstrip/Tabstrip.js.map +0 -1
- package/cjs/tabstrip/tabstrip-dom-utils.js +0 -19
- package/cjs/tabstrip/tabstrip-dom-utils.js.map +0 -1
- package/cjs/tabstrip/useAnimatedSelectionThumb.js +0 -85
- package/cjs/tabstrip/useAnimatedSelectionThumb.js.map +0 -1
- package/cjs/tabstrip/useKeyboardNavigation.js +0 -247
- package/cjs/tabstrip/useKeyboardNavigation.js.map +0 -1
- package/cjs/tabstrip/useSelection.js +0 -60
- package/cjs/tabstrip/useSelection.js.map +0 -1
- package/cjs/tabstrip/useTabstrip.js +0 -233
- package/cjs/tabstrip/useTabstrip.js.map +0 -1
- package/cjs/time-input/MaskedInput.js +0 -377
- package/cjs/time-input/MaskedInput.js.map +0 -1
- package/cjs/time-input/TimeInput.css.js +0 -6
- package/cjs/time-input/TimeInput.css.js.map +0 -1
- package/cjs/time-input/TimeInput.js +0 -56
- package/cjs/time-input/TimeInput.js.map +0 -1
- package/cjs/time-input/useTimeInput.js +0 -121
- package/cjs/time-input/useTimeInput.js.map +0 -1
- package/cjs/toolbar/Toolbar.css.js +0 -6
- package/cjs/toolbar/Toolbar.css.js.map +0 -1
- package/cjs/toolbar/Toolbar.js +0 -90
- package/cjs/toolbar/Toolbar.js.map +0 -1
- package/cjs/toolbar/toolbar-dom-utils.js +0 -18
- package/cjs/toolbar/toolbar-dom-utils.js.map +0 -1
- package/cjs/toolbar/useKeyboardNavigation.js +0 -305
- package/cjs/toolbar/useKeyboardNavigation.js.map +0 -1
- package/cjs/toolbar/useSelection.js +0 -93
- package/cjs/toolbar/useSelection.js.map +0 -1
- package/cjs/toolbar/useToolbar.js +0 -100
- package/cjs/toolbar/useToolbar.js.map +0 -1
- package/cjs/utils/escapeRegExp.js +0 -9
- package/cjs/utils/escapeRegExp.js.map +0 -1
- package/cjs/utils/forwardCallbackProps.js +0 -22
- package/cjs/utils/forwardCallbackProps.js.map +0 -1
- package/cjs/utils/isOverflowElement.js +0 -8
- package/cjs/utils/isOverflowElement.js.map +0 -1
- package/cjs/utils/isPlainObject.js +0 -6
- package/cjs/utils/isPlainObject.js.map +0 -1
- package/cjs/vuu-date-picker/VuuDatePicker.js +0 -122
- package/cjs/vuu-date-picker/VuuDatePicker.js.map +0 -1
- package/cjs/vuu-input/VuuInput.css.js +0 -6
- package/cjs/vuu-input/VuuInput.css.js.map +0 -1
- package/cjs/vuu-input/VuuInput.js +0 -102
- package/cjs/vuu-input/VuuInput.js.map +0 -1
- package/cjs/vuu-time-picker/VuuTimePicker.css.js +0 -6
- package/cjs/vuu-time-picker/VuuTimePicker.css.js.map +0 -1
- package/cjs/vuu-time-picker/VuuTimePicker.js +0 -37
- package/cjs/vuu-time-picker/VuuTimePicker.js.map +0 -1
- package/cjs/vuu-typeahead-input/VuuTypeaheadInput.css.js +0 -6
- package/cjs/vuu-typeahead-input/VuuTypeaheadInput.css.js.map +0 -1
- package/cjs/vuu-typeahead-input/VuuTypeaheadInput.js +0 -80
- package/cjs/vuu-typeahead-input/VuuTypeaheadInput.js.map +0 -1
- package/cjs/vuu-typeahead-input/useVuuTypeaheadInput.js +0 -176
- package/cjs/vuu-typeahead-input/useVuuTypeaheadInput.js.map +0 -1
- package/esm/calendar/Calendar.css.js +0 -4
- package/esm/calendar/Calendar.css.js.map +0 -1
- package/esm/calendar/Calendar.js +0 -91
- package/esm/calendar/Calendar.js.map +0 -1
- package/esm/calendar/internal/CalendarCarousel.css.js +0 -4
- package/esm/calendar/internal/CalendarCarousel.css.js.map +0 -1
- package/esm/calendar/internal/CalendarCarousel.js +0 -73
- package/esm/calendar/internal/CalendarCarousel.js.map +0 -1
- package/esm/calendar/internal/CalendarContext.js +0 -16
- package/esm/calendar/internal/CalendarContext.js.map +0 -1
- package/esm/calendar/internal/CalendarDay.css.js +0 -4
- package/esm/calendar/internal/CalendarDay.css.js.map +0 -1
- package/esm/calendar/internal/CalendarDay.js +0 -84
- package/esm/calendar/internal/CalendarDay.js.map +0 -1
- package/esm/calendar/internal/CalendarMonth.css.js +0 -4
- package/esm/calendar/internal/CalendarMonth.css.js.map +0 -1
- package/esm/calendar/internal/CalendarMonth.js +0 -69
- package/esm/calendar/internal/CalendarMonth.js.map +0 -1
- package/esm/calendar/internal/CalendarNavigation.css.js +0 -4
- package/esm/calendar/internal/CalendarNavigation.css.js.map +0 -1
- package/esm/calendar/internal/CalendarNavigation.js +0 -234
- package/esm/calendar/internal/CalendarNavigation.js.map +0 -1
- package/esm/calendar/internal/CalendarWeekHeader.css.js +0 -4
- package/esm/calendar/internal/CalendarWeekHeader.css.js.map +0 -1
- package/esm/calendar/internal/CalendarWeekHeader.js +0 -41
- package/esm/calendar/internal/CalendarWeekHeader.js.map +0 -1
- package/esm/calendar/internal/useFocusManagement.js +0 -64
- package/esm/calendar/internal/useFocusManagement.js.map +0 -1
- package/esm/calendar/internal/utils.js +0 -55
- package/esm/calendar/internal/utils.js.map +0 -1
- package/esm/calendar/useCalendar.js +0 -161
- package/esm/calendar/useCalendar.js.map +0 -1
- package/esm/calendar/useCalendarDay.js +0 -78
- package/esm/calendar/useCalendarDay.js.map +0 -1
- package/esm/calendar/useSelection.js +0 -243
- package/esm/calendar/useSelection.js.map +0 -1
- package/esm/column-picker/ColumnPicker.css.js +0 -4
- package/esm/column-picker/ColumnPicker.css.js.map +0 -1
- package/esm/column-picker/ColumnPicker.js +0 -126
- package/esm/column-picker/ColumnPicker.js.map +0 -1
- package/esm/column-picker/ColumnSearch.css.js +0 -4
- package/esm/column-picker/ColumnSearch.css.js.map +0 -1
- package/esm/column-picker/ColumnSearch.js +0 -80
- package/esm/column-picker/ColumnSearch.js.map +0 -1
- package/esm/common-hooks/selectionTypes.js +0 -10
- package/esm/common-hooks/selectionTypes.js.map +0 -1
- package/esm/common-hooks/use-resize-observer.js +0 -118
- package/esm/common-hooks/use-resize-observer.js.map +0 -1
- package/esm/common-hooks/useControlled.js +0 -56
- package/esm/common-hooks/useControlled.js.map +0 -1
- package/esm/context-panel-provider/ContextPanelProvider.js +0 -94
- package/esm/context-panel-provider/ContextPanelProvider.js.map +0 -1
- package/esm/cycle-state-button/CycleStateButton.js +0 -48
- package/esm/cycle-state-button/CycleStateButton.js.map +0 -1
- package/esm/date-input/DateInput.css.js +0 -4
- package/esm/date-input/DateInput.css.js.map +0 -1
- package/esm/date-input/DateInput.js +0 -275
- package/esm/date-input/DateInput.js.map +0 -1
- package/esm/date-picker/DatePicker.js +0 -167
- package/esm/date-picker/DatePicker.js.map +0 -1
- package/esm/date-picker/DatePickerContext.js +0 -23
- package/esm/date-picker/DatePickerContext.js.map +0 -1
- package/esm/date-picker/DatePickerPanel.css.js +0 -4
- package/esm/date-picker/DatePickerPanel.css.js.map +0 -1
- package/esm/date-picker/DatePickerPanel.js +0 -144
- package/esm/date-picker/DatePickerPanel.js.map +0 -1
- package/esm/drag-drop/DragDropProvider.js +0 -142
- package/esm/drag-drop/DragDropProvider.js.map +0 -1
- package/esm/drag-drop/DragDropState.js +0 -34
- package/esm/drag-drop/DragDropState.js.map +0 -1
- package/esm/drag-drop/Draggable.css.js +0 -4
- package/esm/drag-drop/Draggable.css.js.map +0 -1
- package/esm/drag-drop/Draggable.js +0 -85
- package/esm/drag-drop/Draggable.js.map +0 -1
- package/esm/drag-drop/dragDropTypes.js +0 -5
- package/esm/drag-drop/dragDropTypes.js.map +0 -1
- package/esm/drag-drop/drop-target-utils.js +0 -228
- package/esm/drag-drop/drop-target-utils.js.map +0 -1
- package/esm/drag-drop/useAutoScroll.js +0 -69
- package/esm/drag-drop/useAutoScroll.js.map +0 -1
- package/esm/drag-drop/useDragDisplacers.js +0 -158
- package/esm/drag-drop/useDragDisplacers.js.map +0 -1
- package/esm/drag-drop/useDragDrop.js +0 -502
- package/esm/drag-drop/useDragDrop.js.map +0 -1
- package/esm/drag-drop/useDragDropCopy.js +0 -31
- package/esm/drag-drop/useDragDropCopy.js.map +0 -1
- package/esm/drag-drop/useDragDropIndicator.js +0 -249
- package/esm/drag-drop/useDragDropIndicator.js.map +0 -1
- package/esm/drag-drop/useDragDropNaturalMovement.js +0 -263
- package/esm/drag-drop/useDragDropNaturalMovement.js.map +0 -1
- package/esm/drag-drop/useDropIndicator.js +0 -25
- package/esm/drag-drop/useDropIndicator.js.map +0 -1
- package/esm/drag-drop/useGlobalDragDrop.js +0 -87
- package/esm/drag-drop/useGlobalDragDrop.js.map +0 -1
- package/esm/editable/useEditableText.js +0 -209
- package/esm/editable/useEditableText.js.map +0 -1
- package/esm/editable-label/EditableLabel.css.js +0 -4
- package/esm/editable-label/EditableLabel.css.js.map +0 -1
- package/esm/editable-label/EditableLabel.js +0 -140
- package/esm/editable-label/EditableLabel.js.map +0 -1
- package/esm/expando-input/ExpandoInput.css.js +0 -4
- package/esm/expando-input/ExpandoInput.css.js.map +0 -1
- package/esm/expando-input/ExpandoInput.js +0 -51
- package/esm/expando-input/ExpandoInput.js.map +0 -1
- package/esm/hover-overlay/HoverOverlay.js +0 -94
- package/esm/hover-overlay/HoverOverlay.js.map +0 -1
- package/esm/icon-button/Icon.css.js +0 -4
- package/esm/icon-button/Icon.css.js.map +0 -1
- package/esm/icon-button/Icon.js +0 -35
- package/esm/icon-button/Icon.js.map +0 -1
- package/esm/icon-button/IconButton.css.js +0 -4
- package/esm/icon-button/IconButton.css.js.map +0 -1
- package/esm/icon-button/IconButton.js +0 -24
- package/esm/icon-button/IconButton.js.map +0 -1
- package/esm/icon-button/ToggleIconButton.css.js +0 -4
- package/esm/icon-button/ToggleIconButton.css.js.map +0 -1
- package/esm/icon-button/ToggleIconButton.js +0 -37
- package/esm/icon-button/ToggleIconButton.js.map +0 -1
- package/esm/index.js +0 -59
- package/esm/index.js.map +0 -1
- package/esm/instrument-picker/TablePicker.css.js +0 -4
- package/esm/instrument-picker/TablePicker.css.js.map +0 -1
- package/esm/instrument-picker/TablePicker.js +0 -128
- package/esm/instrument-picker/TablePicker.js.map +0 -1
- package/esm/instrument-picker/useTablePicker.js +0 -148
- package/esm/instrument-picker/useTablePicker.js.map +0 -1
- package/esm/measured-container/MeasuredContainer.css.js +0 -4
- package/esm/measured-container/MeasuredContainer.css.js.map +0 -1
- package/esm/measured-container/MeasuredContainer.js +0 -70
- package/esm/measured-container/MeasuredContainer.js.map +0 -1
- package/esm/measured-container/useMeasuredContainer.js +0 -164
- package/esm/measured-container/useMeasuredContainer.js.map +0 -1
- package/esm/modal-provider/ModalProvider.js +0 -140
- package/esm/modal-provider/ModalProvider.js.map +0 -1
- package/esm/overflow-container/OverflowContainer.css.js +0 -4
- package/esm/overflow-container/OverflowContainer.css.js.map +0 -1
- package/esm/overflow-container/OverflowContainer.js +0 -141
- package/esm/overflow-container/OverflowContainer.js.map +0 -1
- package/esm/overflow-container/overflow-utils.js +0 -272
- package/esm/overflow-container/overflow-utils.js.map +0 -1
- package/esm/overflow-container/useOverflowContainer.js +0 -141
- package/esm/overflow-container/useOverflowContainer.js.map +0 -1
- package/esm/price-ticker/PriceTicker.css.js +0 -4
- package/esm/price-ticker/PriceTicker.css.js.map +0 -1
- package/esm/price-ticker/PriceTicker.js +0 -48
- package/esm/price-ticker/PriceTicker.js.map +0 -1
- package/esm/prompt/Prompt.css.js +0 -4
- package/esm/prompt/Prompt.css.js.map +0 -1
- package/esm/prompt/Prompt.js +0 -140
- package/esm/prompt/Prompt.js.map +0 -1
- package/esm/sortable-list/SortableList.js +0 -34
- package/esm/sortable-list/SortableList.js.map +0 -1
- package/esm/split-button/SplitButton.css.js +0 -4
- package/esm/split-button/SplitButton.css.js.map +0 -1
- package/esm/split-button/SplitButton.js +0 -82
- package/esm/split-button/SplitButton.js.map +0 -1
- package/esm/split-button/SplitStateButton.css.js +0 -4
- package/esm/split-button/SplitStateButton.css.js.map +0 -1
- package/esm/split-button/SplitStateButton.js +0 -29
- package/esm/split-button/SplitStateButton.js.map +0 -1
- package/esm/split-button/useSplitButton.js +0 -82
- package/esm/split-button/useSplitButton.js.map +0 -1
- package/esm/table-search/SearchCell.css.js +0 -4
- package/esm/table-search/SearchCell.css.js.map +0 -1
- package/esm/table-search/SearchCell.js +0 -30
- package/esm/table-search/SearchCell.js.map +0 -1
- package/esm/table-search/TableSearch.css.js +0 -4
- package/esm/table-search/TableSearch.css.js.map +0 -1
- package/esm/table-search/TableSearch.js +0 -87
- package/esm/table-search/TableSearch.js.map +0 -1
- package/esm/table-search/useTableSearch.js +0 -37
- package/esm/table-search/useTableSearch.js.map +0 -1
- package/esm/tabs-next/TabBar.css.js +0 -4
- package/esm/tabs-next/TabBar.css.js.map +0 -1
- package/esm/tabs-next/TabBar.js +0 -39
- package/esm/tabs-next/TabBar.js.map +0 -1
- package/esm/tabs-next/TabListNext.css.js +0 -4
- package/esm/tabs-next/TabListNext.css.js.map +0 -1
- package/esm/tabs-next/TabListNext.js +0 -122
- package/esm/tabs-next/TabListNext.js.map +0 -1
- package/esm/tabs-next/TabNext.css.js +0 -4
- package/esm/tabs-next/TabNext.css.js.map +0 -1
- package/esm/tabs-next/TabNext.js +0 -108
- package/esm/tabs-next/TabNext.js.map +0 -1
- package/esm/tabs-next/TabNextAction.js +0 -33
- package/esm/tabs-next/TabNextAction.js.map +0 -1
- package/esm/tabs-next/TabNextContext.js +0 -20
- package/esm/tabs-next/TabNextContext.js.map +0 -1
- package/esm/tabs-next/TabNextPanel.css.js +0 -4
- package/esm/tabs-next/TabNextPanel.css.js.map +0 -1
- package/esm/tabs-next/TabNextPanel.js +0 -75
- package/esm/tabs-next/TabNextPanel.js.map +0 -1
- package/esm/tabs-next/TabNextTrigger.css.js +0 -4
- package/esm/tabs-next/TabNextTrigger.css.js.map +0 -1
- package/esm/tabs-next/TabNextTrigger.js +0 -72
- package/esm/tabs-next/TabNextTrigger.js.map +0 -1
- package/esm/tabs-next/TabOverflowList.css.js +0 -4
- package/esm/tabs-next/TabOverflowList.css.js.map +0 -1
- package/esm/tabs-next/TabOverflowList.js +0 -128
- package/esm/tabs-next/TabOverflowList.js.map +0 -1
- package/esm/tabs-next/TabsNext.js +0 -172
- package/esm/tabs-next/TabsNext.js.map +0 -1
- package/esm/tabs-next/TabsNextContext.js +0 -30
- package/esm/tabs-next/TabsNextContext.js.map +0 -1
- package/esm/tabs-next/hooks/useCollection.js +0 -89
- package/esm/tabs-next/hooks/useCollection.js.map +0 -1
- package/esm/tabs-next/hooks/useFocusOutside.js +0 -22
- package/esm/tabs-next/hooks/useFocusOutside.js.map +0 -1
- package/esm/tabs-next/hooks/useOverflow.js +0 -136
- package/esm/tabs-next/hooks/useOverflow.js.map +0 -1
- package/esm/tabstrip/Tab.css.js +0 -4
- package/esm/tabstrip/Tab.css.js.map +0 -1
- package/esm/tabstrip/Tab.js +0 -151
- package/esm/tabstrip/Tab.js.map +0 -1
- package/esm/tabstrip/TabMenu.css.js +0 -4
- package/esm/tabstrip/TabMenu.css.js.map +0 -1
- package/esm/tabstrip/TabMenu.js +0 -70
- package/esm/tabstrip/TabMenu.js.map +0 -1
- package/esm/tabstrip/TabMenuOptions.js +0 -16
- package/esm/tabstrip/TabMenuOptions.js.map +0 -1
- package/esm/tabstrip/Tabstrip.css.js +0 -4
- package/esm/tabstrip/Tabstrip.css.js.map +0 -1
- package/esm/tabstrip/Tabstrip.js +0 -158
- package/esm/tabstrip/Tabstrip.js.map +0 -1
- package/esm/tabstrip/tabstrip-dom-utils.js +0 -16
- package/esm/tabstrip/tabstrip-dom-utils.js.map +0 -1
- package/esm/tabstrip/useAnimatedSelectionThumb.js +0 -83
- package/esm/tabstrip/useAnimatedSelectionThumb.js.map +0 -1
- package/esm/tabstrip/useKeyboardNavigation.js +0 -245
- package/esm/tabstrip/useKeyboardNavigation.js.map +0 -1
- package/esm/tabstrip/useSelection.js +0 -58
- package/esm/tabstrip/useSelection.js.map +0 -1
- package/esm/tabstrip/useTabstrip.js +0 -231
- package/esm/tabstrip/useTabstrip.js.map +0 -1
- package/esm/time-input/MaskedInput.js +0 -375
- package/esm/time-input/MaskedInput.js.map +0 -1
- package/esm/time-input/TimeInput.css.js +0 -4
- package/esm/time-input/TimeInput.css.js.map +0 -1
- package/esm/time-input/TimeInput.js +0 -54
- package/esm/time-input/TimeInput.js.map +0 -1
- package/esm/time-input/useTimeInput.js +0 -119
- package/esm/time-input/useTimeInput.js.map +0 -1
- package/esm/toolbar/Toolbar.css.js +0 -4
- package/esm/toolbar/Toolbar.css.js.map +0 -1
- package/esm/toolbar/Toolbar.js +0 -88
- package/esm/toolbar/Toolbar.js.map +0 -1
- package/esm/toolbar/toolbar-dom-utils.js +0 -15
- package/esm/toolbar/toolbar-dom-utils.js.map +0 -1
- package/esm/toolbar/useKeyboardNavigation.js +0 -303
- package/esm/toolbar/useKeyboardNavigation.js.map +0 -1
- package/esm/toolbar/useSelection.js +0 -91
- package/esm/toolbar/useSelection.js.map +0 -1
- package/esm/toolbar/useToolbar.js +0 -98
- package/esm/toolbar/useToolbar.js.map +0 -1
- package/esm/utils/escapeRegExp.js +0 -7
- package/esm/utils/escapeRegExp.js.map +0 -1
- package/esm/utils/forwardCallbackProps.js +0 -20
- package/esm/utils/forwardCallbackProps.js.map +0 -1
- package/esm/utils/isOverflowElement.js +0 -6
- package/esm/utils/isOverflowElement.js.map +0 -1
- package/esm/utils/isPlainObject.js +0 -4
- package/esm/utils/isPlainObject.js.map +0 -1
- package/esm/vuu-date-picker/VuuDatePicker.js +0 -120
- package/esm/vuu-date-picker/VuuDatePicker.js.map +0 -1
- package/esm/vuu-input/VuuInput.css.js +0 -4
- package/esm/vuu-input/VuuInput.css.js.map +0 -1
- package/esm/vuu-input/VuuInput.js +0 -100
- package/esm/vuu-input/VuuInput.js.map +0 -1
- package/esm/vuu-time-picker/VuuTimePicker.css.js +0 -4
- package/esm/vuu-time-picker/VuuTimePicker.css.js.map +0 -1
- package/esm/vuu-time-picker/VuuTimePicker.js +0 -35
- package/esm/vuu-time-picker/VuuTimePicker.js.map +0 -1
- package/esm/vuu-typeahead-input/VuuTypeaheadInput.css.js +0 -4
- package/esm/vuu-typeahead-input/VuuTypeaheadInput.css.js.map +0 -1
- package/esm/vuu-typeahead-input/VuuTypeaheadInput.js +0 -78
- package/esm/vuu-typeahead-input/VuuTypeaheadInput.js.map +0 -1
- package/esm/vuu-typeahead-input/useVuuTypeaheadInput.js +0 -174
- package/esm/vuu-typeahead-input/useVuuTypeaheadInput.js.map +0 -1
|
@@ -1,122 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var React = require('react');
|
|
4
|
-
var date = require('@internationalized/date');
|
|
5
|
-
var cx = require('clsx');
|
|
6
|
-
var DatePicker = require('../date-picker/DatePicker.js');
|
|
7
|
-
|
|
8
|
-
const classBase = "VuuDatePicker";
|
|
9
|
-
const isSameDate = (d1, d2) => d2 !== void 0 && date.isSameDay(d1, d2) && date.isSameMonth(d1, d2) && date.isSameYear(d1, d2);
|
|
10
|
-
const datePattern = /^\d{1,2} [a-z]{3} \d{4}$/i;
|
|
11
|
-
const isValidDate = (value) => value !== void 0 && value?.match(datePattern) !== null && !Number.isNaN(new Date(value).getDay());
|
|
12
|
-
const localTimeZone = date.getLocalTimeZone();
|
|
13
|
-
const toEpochMillis = (date$1, timezone = date.getLocalTimeZone()) => date$1.toDate(timezone).getTime();
|
|
14
|
-
const getDates = (selectedDate) => {
|
|
15
|
-
if (selectedDate) {
|
|
16
|
-
return {
|
|
17
|
-
datePickerKey: "controlled",
|
|
18
|
-
defaultDate: void 0,
|
|
19
|
-
selectedDate
|
|
20
|
-
};
|
|
21
|
-
} else {
|
|
22
|
-
return {
|
|
23
|
-
datePickerKey: "uncontrolled",
|
|
24
|
-
defaultDate: void 0,
|
|
25
|
-
selectedDate
|
|
26
|
-
};
|
|
27
|
-
}
|
|
28
|
-
};
|
|
29
|
-
const VuuDatePicker = ({
|
|
30
|
-
className,
|
|
31
|
-
onSelectionChange,
|
|
32
|
-
selectedDate: selectedDateProp,
|
|
33
|
-
onCommit,
|
|
34
|
-
preserveFocusOnSelect,
|
|
35
|
-
...props
|
|
36
|
-
}) => {
|
|
37
|
-
const [open, _setOpen] = React.useState(false);
|
|
38
|
-
const valueRef = React.useRef("");
|
|
39
|
-
const datePickerRef = React.useRef(null);
|
|
40
|
-
const dateState = React.useRef(getDates(selectedDateProp));
|
|
41
|
-
const setOpen = (o) => {
|
|
42
|
-
console.log(`setOpen ${o}`);
|
|
43
|
-
_setOpen(o);
|
|
44
|
-
};
|
|
45
|
-
const commitDateChange = React.useCallback(
|
|
46
|
-
(e, date) => {
|
|
47
|
-
onSelectionChange?.(e, date);
|
|
48
|
-
setOpen(false);
|
|
49
|
-
onCommit?.(
|
|
50
|
-
e,
|
|
51
|
-
toEpochMillis(date, localTimeZone)
|
|
52
|
-
);
|
|
53
|
-
if (preserveFocusOnSelect) {
|
|
54
|
-
requestAnimationFrame(() => {
|
|
55
|
-
datePickerRef.current?.querySelector("input")?.focus();
|
|
56
|
-
});
|
|
57
|
-
}
|
|
58
|
-
},
|
|
59
|
-
[onCommit, onSelectionChange, preserveFocusOnSelect]
|
|
60
|
-
);
|
|
61
|
-
const handleSelectionChange = React.useCallback(
|
|
62
|
-
(e, date) => {
|
|
63
|
-
const { selectedDate: selectedDate2 } = dateState.current;
|
|
64
|
-
if (date) {
|
|
65
|
-
if (selectedDate2 === void 0) {
|
|
66
|
-
dateState.current = getDates(date);
|
|
67
|
-
commitDateChange(e, date);
|
|
68
|
-
} else if (!isSameDate(date, selectedDate2)) {
|
|
69
|
-
dateState.current.selectedDate = date;
|
|
70
|
-
commitDateChange(e, date);
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
},
|
|
74
|
-
[commitDateChange]
|
|
75
|
-
);
|
|
76
|
-
const handleChange = (evt, value = "") => {
|
|
77
|
-
console.log(`handleChange`, {
|
|
78
|
-
evt,
|
|
79
|
-
value
|
|
80
|
-
});
|
|
81
|
-
valueRef.current = value;
|
|
82
|
-
console.log(`is '${value}' a valid date ? ${isValidDate(value)}`);
|
|
83
|
-
};
|
|
84
|
-
const handleKeyDown = (e) => {
|
|
85
|
-
if (e.key === "ArrowDown") {
|
|
86
|
-
setOpen(true);
|
|
87
|
-
}
|
|
88
|
-
};
|
|
89
|
-
const handleKeyDownCapture = (e) => {
|
|
90
|
-
if (e.key === "Enter") {
|
|
91
|
-
if (isValidDate(valueRef.current)) {
|
|
92
|
-
console.log(`committayaface (${valueRef.current})`);
|
|
93
|
-
} else {
|
|
94
|
-
console.log(
|
|
95
|
-
`nice try cowboy, but '${valueRef.current}' is nota valid date`
|
|
96
|
-
);
|
|
97
|
-
e.stopPropagation();
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
};
|
|
101
|
-
const { datePickerKey, defaultDate, selectedDate } = dateState.current;
|
|
102
|
-
return /* @__PURE__ */ React.createElement(
|
|
103
|
-
DatePicker.DatePicker,
|
|
104
|
-
{
|
|
105
|
-
...props,
|
|
106
|
-
className: cx(classBase, className),
|
|
107
|
-
defaultSelectedDate: defaultDate,
|
|
108
|
-
key: datePickerKey,
|
|
109
|
-
open,
|
|
110
|
-
onChange: handleChange,
|
|
111
|
-
onKeyDown: handleKeyDown,
|
|
112
|
-
onKeyDownCapture: handleKeyDownCapture,
|
|
113
|
-
onOpenChange: setOpen,
|
|
114
|
-
ref: datePickerRef,
|
|
115
|
-
onSelectionChange: (e, date) => handleSelectionChange(e, date),
|
|
116
|
-
selectedDate
|
|
117
|
-
}
|
|
118
|
-
);
|
|
119
|
-
};
|
|
120
|
-
|
|
121
|
-
exports.VuuDatePicker = VuuDatePicker;
|
|
122
|
-
//# sourceMappingURL=VuuDatePicker.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"VuuDatePicker.js","sources":["../../../../packages/vuu-ui-controls/src/vuu-date-picker/VuuDatePicker.tsx"],"sourcesContent":["import { CommitHandler } from \"@vuu-ui/vuu-utils\";\nimport {\n DateValue,\n getLocalTimeZone,\n isSameDay,\n isSameMonth,\n isSameYear,\n} from \"@internationalized/date\";\nimport cx from \"clsx\";\nimport {\n ChangeEvent,\n KeyboardEvent,\n SyntheticEvent,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport { SingleSelectionValueType } from \"../calendar\";\nimport { DatePicker, DatePickerProps } from \"../date-picker\";\n\nconst classBase = \"VuuDatePicker\";\n\nconst isSameDate = (d1: DateValue, d2?: DateValue) =>\n d2 !== undefined &&\n isSameDay(d1, d2) &&\n isSameMonth(d1, d2) &&\n isSameYear(d1, d2);\n\nconst datePattern = /^\\d{1,2} [a-z]{3} \\d{4}$/i;\nconst isValidDate = (value?: string) =>\n value !== undefined &&\n value?.match(datePattern) !== null &&\n !Number.isNaN(new Date(value).getDay());\n\nconst localTimeZone = getLocalTimeZone();\n\nconst toEpochMillis = (\n date: DateValue,\n timezone: string = getLocalTimeZone(),\n): number => date.toDate(timezone).getTime();\n\ntype DateState =\n | {\n datePickerKey: \"controlled\";\n defaultDate: undefined;\n selectedDate: DateValue;\n }\n | {\n datePickerKey: \"uncontrolled\";\n defaultDate: DateValue | undefined;\n selectedDate: undefined;\n };\n\nconst getDates = (selectedDate: DateValue | undefined): DateState => {\n if (selectedDate) {\n return {\n datePickerKey: \"controlled\",\n defaultDate: undefined,\n selectedDate,\n };\n } else {\n return {\n datePickerKey: \"uncontrolled\",\n defaultDate: undefined,\n selectedDate,\n };\n }\n};\n\nexport const VuuDatePicker = ({\n className,\n onSelectionChange,\n selectedDate: selectedDateProp,\n onCommit,\n preserveFocusOnSelect,\n ...props\n}: Omit<DatePickerProps<SingleSelectionValueType>, \"defaultSelectedDate\"> & {\n onCommit?: CommitHandler<HTMLElement, number>;\n preserveFocusOnSelect?: boolean;\n}) => {\n const [open, _setOpen] = useState(false);\n const valueRef = useRef(\"\");\n const datePickerRef = useRef<HTMLDivElement>(null);\n\n const dateState = useRef<DateState>(getDates(selectedDateProp));\n\n const setOpen = (o: boolean) => {\n console.log(`setOpen ${o}`);\n _setOpen(o);\n };\n\n const commitDateChange = useCallback(\n (e: SyntheticEvent<Element>, date: DateValue) => {\n onSelectionChange?.(e, date);\n setOpen(false);\n onCommit?.(\n e as SyntheticEvent<HTMLElement>,\n toEpochMillis(date, localTimeZone),\n );\n\n if (preserveFocusOnSelect) {\n requestAnimationFrame(() => {\n datePickerRef.current?.querySelector(\"input\")?.focus();\n });\n }\n },\n [onCommit, onSelectionChange, preserveFocusOnSelect],\n );\n\n const handleSelectionChange = useCallback(\n (e: SyntheticEvent<Element>, date: DateValue) => {\n const { selectedDate } = dateState.current;\n // id date is undefined, we're openung the picker on an empty field\n if (date) {\n if (selectedDate === undefined) {\n dateState.current = getDates(date);\n commitDateChange(e, date);\n } else if (!isSameDate(date, selectedDate)) {\n dateState.current.selectedDate = date;\n commitDateChange(e, date);\n }\n }\n },\n [commitDateChange],\n );\n\n const handleChange = (evt: ChangeEvent<HTMLInputElement>, value = \"\") => {\n console.log(`handleChange`, {\n evt,\n value,\n });\n valueRef.current = value;\n console.log(`is '${value}' a valid date ? ${isValidDate(value)}`);\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n if (e.key === \"ArrowDown\") {\n setOpen(true);\n }\n };\n\n const handleKeyDownCapture = (e: KeyboardEvent<HTMLDivElement>) => {\n if (e.key === \"Enter\") {\n if (isValidDate(valueRef.current)) {\n console.log(`committayaface (${valueRef.current})`);\n } else {\n console.log(\n `nice try cowboy, but '${valueRef.current}' is nota valid date`,\n );\n e.stopPropagation();\n }\n }\n };\n\n const { datePickerKey, defaultDate, selectedDate } = dateState.current;\n\n return (\n <DatePicker\n {...props}\n className={cx(classBase, className)}\n defaultSelectedDate={defaultDate}\n key={datePickerKey}\n open={open}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onKeyDownCapture={handleKeyDownCapture}\n onOpenChange={setOpen}\n ref={datePickerRef}\n onSelectionChange={(e, date) =>\n handleSelectionChange(e, date as DateValue)\n }\n selectedDate={selectedDate}\n />\n );\n};\n"],"names":["isSameDay","isSameMonth","isSameYear","getLocalTimeZone","date","useState","useRef","useCallback","selectedDate","createElement","DatePicker"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"VuuInput.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,102 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
5
|
-
var core = require('@salt-ds/core');
|
|
6
|
-
var styles = require('@salt-ds/styles');
|
|
7
|
-
var window = require('@salt-ds/window');
|
|
8
|
-
var cx = require('clsx');
|
|
9
|
-
var React = require('react');
|
|
10
|
-
var VuuInput$1 = require('./VuuInput.css.js');
|
|
11
|
-
|
|
12
|
-
const classBase = "vuuInput";
|
|
13
|
-
const VuuInput = React.forwardRef(function VuuInput2({
|
|
14
|
-
className,
|
|
15
|
-
commitOnBlur = true,
|
|
16
|
-
commitWhenCleared = false,
|
|
17
|
-
errorMessage,
|
|
18
|
-
id: idProp,
|
|
19
|
-
onCommit,
|
|
20
|
-
onKeyDown,
|
|
21
|
-
type,
|
|
22
|
-
...props
|
|
23
|
-
}, forwardedRef) {
|
|
24
|
-
const targetWindow = window.useWindow();
|
|
25
|
-
styles.useComponentCssInjection({
|
|
26
|
-
testId: "vuu-input",
|
|
27
|
-
css: VuuInput$1,
|
|
28
|
-
window: targetWindow
|
|
29
|
-
});
|
|
30
|
-
const id = vuuUtils.useId(idProp);
|
|
31
|
-
const commitValue = React.useCallback(
|
|
32
|
-
(evt, value) => {
|
|
33
|
-
if (type === "number") {
|
|
34
|
-
const numericValue = parseFloat(value);
|
|
35
|
-
if (vuuUtils.isValidNumber(numericValue)) {
|
|
36
|
-
onCommit(evt, numericValue, "text-input");
|
|
37
|
-
} else {
|
|
38
|
-
throw Error("Invalid value");
|
|
39
|
-
}
|
|
40
|
-
} else if (type === "boolean") {
|
|
41
|
-
onCommit(evt, Boolean(value), "text-input");
|
|
42
|
-
} else {
|
|
43
|
-
onCommit(evt, value, "text-input");
|
|
44
|
-
}
|
|
45
|
-
},
|
|
46
|
-
[onCommit, type]
|
|
47
|
-
);
|
|
48
|
-
const handleChange = React.useCallback(
|
|
49
|
-
(evt) => {
|
|
50
|
-
const value = evt.target.value;
|
|
51
|
-
if (value.trim() === "" && commitWhenCleared) {
|
|
52
|
-
onCommit?.(evt, value);
|
|
53
|
-
}
|
|
54
|
-
props.inputProps?.onChange?.(evt);
|
|
55
|
-
},
|
|
56
|
-
[commitWhenCleared, onCommit, props.inputProps]
|
|
57
|
-
);
|
|
58
|
-
const handleKeyDown = React.useCallback(
|
|
59
|
-
(evt) => {
|
|
60
|
-
if (evt.key === "Enter") {
|
|
61
|
-
evt.preventDefault();
|
|
62
|
-
evt.stopPropagation();
|
|
63
|
-
const { value } = evt.target;
|
|
64
|
-
commitValue(evt, value);
|
|
65
|
-
}
|
|
66
|
-
onKeyDown?.(evt);
|
|
67
|
-
},
|
|
68
|
-
[commitValue, onKeyDown]
|
|
69
|
-
);
|
|
70
|
-
const handleBlur = React.useCallback(
|
|
71
|
-
(evt) => {
|
|
72
|
-
if (commitOnBlur) {
|
|
73
|
-
const { value } = evt.target;
|
|
74
|
-
commitValue(evt, value);
|
|
75
|
-
}
|
|
76
|
-
},
|
|
77
|
-
[commitOnBlur, commitValue]
|
|
78
|
-
);
|
|
79
|
-
const endAdornment = errorMessage ? /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, { content: errorMessage, status: "error", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-errorIcon`, "data-icon": "error" }) }) : void 0;
|
|
80
|
-
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
81
|
-
core.Input,
|
|
82
|
-
{
|
|
83
|
-
...props,
|
|
84
|
-
endAdornment,
|
|
85
|
-
id,
|
|
86
|
-
inputProps: {
|
|
87
|
-
autoComplete: "off",
|
|
88
|
-
...props.inputProps,
|
|
89
|
-
onChange: handleChange
|
|
90
|
-
},
|
|
91
|
-
className: cx(classBase, className, {
|
|
92
|
-
[`${classBase}-error`]: errorMessage
|
|
93
|
-
}),
|
|
94
|
-
onBlur: handleBlur,
|
|
95
|
-
ref: forwardedRef,
|
|
96
|
-
onKeyDown: handleKeyDown
|
|
97
|
-
}
|
|
98
|
-
) });
|
|
99
|
-
});
|
|
100
|
-
|
|
101
|
-
exports.VuuInput = VuuInput;
|
|
102
|
-
//# sourceMappingURL=VuuInput.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"VuuInput.js","sources":["../../../../packages/vuu-ui-controls/src/vuu-input/VuuInput.tsx"],"sourcesContent":["import { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { CommitHandler, isValidNumber, useId } from \"@vuu-ui/vuu-utils\";\nimport { Input, InputProps, Tooltip } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n ChangeEventHandler,\n FocusEventHandler,\n ForwardedRef,\n KeyboardEventHandler,\n ReactElement,\n ReactNode,\n forwardRef,\n useCallback,\n} from \"react\";\n\nimport vuuInputCss from \"./VuuInput.css\";\n\nconst classBase = \"vuuInput\";\n\nexport interface VuuInputProps<T extends VuuRowDataItemType = string>\n extends Omit<InputProps, \"validationStatus\"> {\n commitOnBlur?: boolean;\n commitWhenCleared?: boolean;\n errorMessage?: ReactNode;\n onCommit: CommitHandler;\n type?: T;\n}\n\n/**\n * A variant of Salt Input that provides a commit callback prop,\n * TODO along with cancel behaviour ?\n */\nexport const VuuInput = forwardRef(function VuuInput<\n T extends VuuRowDataItemType = string,\n>(\n {\n className,\n commitOnBlur = true,\n commitWhenCleared = false,\n errorMessage,\n id: idProp,\n onCommit,\n onKeyDown,\n type,\n ...props\n }: VuuInputProps<T>,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-input\",\n css: vuuInputCss,\n window: targetWindow,\n });\n\n const id = useId(idProp);\n\n const commitValue = useCallback<CommitHandler<HTMLInputElement, string>>(\n (evt, value) => {\n if (type === \"number\") {\n const numericValue = parseFloat(value);\n if (isValidNumber(numericValue)) {\n onCommit(evt, numericValue as T, \"text-input\");\n } else {\n //TODO add validation logic\n throw Error(\"Invalid value\");\n }\n } else if (type === \"boolean\") {\n onCommit(evt, Boolean(value) as T, \"text-input\");\n } else {\n onCommit(evt, value as T, \"text-input\");\n }\n },\n [onCommit, type],\n );\n\n const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n (evt) => {\n const value = evt.target.value;\n if (value.trim() === \"\" && commitWhenCleared) {\n onCommit?.(evt, value as T);\n }\n props.inputProps?.onChange?.(evt);\n },\n [commitWhenCleared, onCommit, props.inputProps],\n );\n\n const handleKeyDown = useCallback<KeyboardEventHandler<HTMLInputElement>>(\n (evt) => {\n if (evt.key === \"Enter\") {\n evt.preventDefault();\n evt.stopPropagation();\n const { value } = evt.target as HTMLInputElement;\n commitValue(evt, value);\n }\n onKeyDown?.(evt);\n },\n [commitValue, onKeyDown],\n );\n\n const handleBlur = useCallback<FocusEventHandler<HTMLInputElement>>(\n (evt) => {\n if (commitOnBlur) {\n const { value } = evt.target as HTMLInputElement;\n commitValue(evt, value);\n }\n },\n [commitOnBlur, commitValue],\n );\n\n const endAdornment = errorMessage ? (\n <Tooltip content={errorMessage} status=\"error\">\n <span className={`${classBase}-errorIcon`} data-icon=\"error\" />\n </Tooltip>\n ) : undefined;\n\n return (\n <>\n <Input\n {...props}\n endAdornment={endAdornment}\n id={id}\n inputProps={{\n autoComplete: \"off\",\n ...props.inputProps,\n onChange: handleChange,\n }}\n className={cx(classBase, className, {\n [`${classBase}-error`]: errorMessage,\n })}\n onBlur={handleBlur}\n ref={forwardedRef}\n onKeyDown={handleKeyDown}\n />\n </>\n );\n}) as <T extends VuuRowDataItemType = string>(\n props: VuuInputProps<T> & {\n ref?: ForwardedRef<HTMLDivElement>;\n },\n) => ReactElement<VuuInputProps<T>>;\n"],"names":["forwardRef","VuuInput","useWindow","useComponentCssInjection","vuuInputCss","useId","useCallback","isValidNumber","jsx","Tooltip","Fragment","Input"],"mappings":";;;;;;;;;;;AAmBA,MAAM,SAAY,GAAA,UAAA;AAeL,MAAA,QAAA,GAAWA,gBAAW,CAAA,SAASC,SAG1C,CAAA;AAAA,EACE,SAAA;AAAA,EACA,YAAe,GAAA,IAAA;AAAA,EACf,iBAAoB,GAAA,KAAA;AAAA,EACpB,YAAA;AAAA,EACA,EAAI,EAAA,MAAA;AAAA,EACJ,QAAA;AAAA,EACA,SAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,UAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,EAAA,GAAKC,eAAM,MAAM,CAAA;AAEvB,EAAA,MAAM,WAAc,GAAAC,iBAAA;AAAA,IAClB,CAAC,KAAK,KAAU,KAAA;AACd,MAAA,IAAI,SAAS,QAAU,EAAA;AACrB,QAAM,MAAA,YAAA,GAAe,WAAW,KAAK,CAAA;AACrC,QAAI,IAAAC,sBAAA,CAAc,YAAY,CAAG,EAAA;AAC/B,UAAS,QAAA,CAAA,GAAA,EAAK,cAAmB,YAAY,CAAA;AAAA,SACxC,MAAA;AAEL,UAAA,MAAM,MAAM,eAAe,CAAA;AAAA;AAC7B,OACF,MAAA,IAAW,SAAS,SAAW,EAAA;AAC7B,QAAA,QAAA,CAAS,GAAK,EAAA,OAAA,CAAQ,KAAK,CAAA,EAAQ,YAAY,CAAA;AAAA,OAC1C,MAAA;AACL,QAAS,QAAA,CAAA,GAAA,EAAK,OAAY,YAAY,CAAA;AAAA;AACxC,KACF;AAAA,IACA,CAAC,UAAU,IAAI;AAAA,GACjB;AAEA,EAAA,MAAM,YAAe,GAAAD,iBAAA;AAAA,IACnB,CAAC,GAAQ,KAAA;AACP,MAAM,MAAA,KAAA,GAAQ,IAAI,MAAO,CAAA,KAAA;AACzB,MAAA,IAAI,KAAM,CAAA,IAAA,EAAW,KAAA,EAAA,IAAM,iBAAmB,EAAA;AAC5C,QAAA,QAAA,GAAW,KAAK,KAAU,CAAA;AAAA;AAE5B,MAAM,KAAA,CAAA,UAAA,EAAY,WAAW,GAAG,CAAA;AAAA,KAClC;AAAA,IACA,CAAC,iBAAA,EAAmB,QAAU,EAAA,KAAA,CAAM,UAAU;AAAA,GAChD;AAEA,EAAA,MAAM,aAAgB,GAAAA,iBAAA;AAAA,IACpB,CAAC,GAAQ,KAAA;AACP,MAAI,IAAA,GAAA,CAAI,QAAQ,OAAS,EAAA;AACvB,QAAA,GAAA,CAAI,cAAe,EAAA;AACnB,QAAA,GAAA,CAAI,eAAgB,EAAA;AACpB,QAAM,MAAA,EAAE,KAAM,EAAA,GAAI,GAAI,CAAA,MAAA;AACtB,QAAA,WAAA,CAAY,KAAK,KAAK,CAAA;AAAA;AAExB,MAAA,SAAA,GAAY,GAAG,CAAA;AAAA,KACjB;AAAA,IACA,CAAC,aAAa,SAAS;AAAA,GACzB;AAEA,EAAA,MAAM,UAAa,GAAAA,iBAAA;AAAA,IACjB,CAAC,GAAQ,KAAA;AACP,MAAA,IAAI,YAAc,EAAA;AAChB,QAAM,MAAA,EAAE,KAAM,EAAA,GAAI,GAAI,CAAA,MAAA;AACtB,QAAA,WAAA,CAAY,KAAK,KAAK,CAAA;AAAA;AACxB,KACF;AAAA,IACA,CAAC,cAAc,WAAW;AAAA,GAC5B;AAEA,EAAA,MAAM,eAAe,YACnB,mBAAAE,cAAA,CAACC,YAAQ,EAAA,EAAA,OAAA,EAAS,cAAc,MAAO,EAAA,OAAA,EACrC,QAAC,kBAAAD,cAAA,CAAA,MAAA,EAAA,EAAK,WAAW,CAAG,EAAA,SAAS,cAAc,WAAU,EAAA,OAAA,EAAQ,GAC/D,CACE,GAAA,KAAA,CAAA;AAEJ,EAAA,uBAEIA,cAAA,CAAAE,mBAAA,EAAA,EAAA,QAAA,kBAAAF,cAAA;AAAA,IAACG,UAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,YAAA;AAAA,MACA,EAAA;AAAA,MACA,UAAY,EAAA;AAAA,QACV,YAAc,EAAA,KAAA;AAAA,QACd,GAAG,KAAM,CAAA,UAAA;AAAA,QACT,QAAU,EAAA;AAAA,OACZ;AAAA,MACA,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAW,EAAA;AAAA,QAClC,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG;AAAA,OACzB,CAAA;AAAA,MACD,MAAQ,EAAA,UAAA;AAAA,MACR,GAAK,EAAA,YAAA;AAAA,MACL,SAAW,EAAA;AAAA;AAAA,GAEf,EAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"VuuTimePicker.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var styles = require('@salt-ds/styles');
|
|
5
|
-
var window = require('@salt-ds/window');
|
|
6
|
-
var cx = require('clsx');
|
|
7
|
-
var TimeInput = require('../time-input/TimeInput.js');
|
|
8
|
-
var VuuTimePicker$1 = require('./VuuTimePicker.css.js');
|
|
9
|
-
|
|
10
|
-
const classBase = "vuuTimePicker";
|
|
11
|
-
const VuuTimePicker = ({
|
|
12
|
-
className,
|
|
13
|
-
defaultValue,
|
|
14
|
-
onChange,
|
|
15
|
-
onCommit,
|
|
16
|
-
value,
|
|
17
|
-
...htmlAttributes
|
|
18
|
-
}) => {
|
|
19
|
-
const targetWindow = window.useWindow();
|
|
20
|
-
styles.useComponentCssInjection({
|
|
21
|
-
testId: "vuu-time-picker",
|
|
22
|
-
css: VuuTimePicker$1,
|
|
23
|
-
window: targetWindow
|
|
24
|
-
});
|
|
25
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlAttributes, className: cx(classBase, className), children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
26
|
-
TimeInput.TimeInput,
|
|
27
|
-
{
|
|
28
|
-
defaultValue,
|
|
29
|
-
onChange,
|
|
30
|
-
onCommit,
|
|
31
|
-
value
|
|
32
|
-
}
|
|
33
|
-
) });
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
exports.VuuTimePicker = VuuTimePicker;
|
|
37
|
-
//# sourceMappingURL=VuuTimePicker.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"VuuTimePicker.js","sources":["../../../../packages/vuu-ui-controls/src/vuu-time-picker/VuuTimePicker.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { CommitHandler, TimeString } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { HTMLAttributes } from \"react\";\nimport { TimeInput, TimeInputProps } from \"../time-input/TimeInput\";\n\nimport timePickerCss from \"./VuuTimePicker.css\";\n\nexport interface VuuTimePickerProps\n extends Pick<TimeInputProps, \"defaultValue\" | \"onChange\" | \"value\">,\n Omit<\n HTMLAttributes<HTMLDivElement>,\n \"defaultValue\" | \"onChange\" | \"value\"\n > {\n onCommit: CommitHandler<HTMLInputElement, TimeString>;\n}\n\nconst classBase = \"vuuTimePicker\";\n\nexport const VuuTimePicker = ({\n className,\n defaultValue,\n onChange,\n onCommit,\n value,\n ...htmlAttributes\n}: VuuTimePickerProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-time-picker\",\n css: timePickerCss,\n window: targetWindow,\n });\n\n return (\n <div {...htmlAttributes} className={cx(classBase, className)}>\n <TimeInput\n defaultValue={defaultValue}\n onChange={onChange}\n onCommit={onCommit}\n value={value}\n />\n </div>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","timePickerCss","jsx","TimeInput"],"mappings":";;;;;;;;;AAkBA,MAAM,SAAY,GAAA,eAAA;AAEX,MAAM,gBAAgB,CAAC;AAAA,EAC5B,SAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAA0B,KAAA;AACxB,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,eAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,cAAA,CAAC,SAAK,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CACzD,EAAA,QAAA,kBAAAA,cAAA;AAAA,IAACC,mBAAA;AAAA,IAAA;AAAA,MACC,YAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA;AAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var vuuTypeaheadInputCss = ".vuuTypeaheadInput {\n .saltPillInput-activationIndicator {\n display: none;\n }\n\n .saltPillInput-endAdornmentContainer {\n padding:0;\n }\n\n .saltButton {\n --vuuButton-borderColor: transparent;\n height: 24px;\n width: 24px;\n }\n\n .saltButton:before {\n content: \"\";\n background-color: var(--salt-separable-secondary-borderColor);\n height: 100%;\n left: calc(-1 * var(--salt-spacing-100));\n position: absolute;\n width: 1px;\n }\n\n .saltButton:after {\n --vuu-icon-color: var(--salt-content-primary-foreground);\n --vuu-icon-size: 10px;\n --vuu-icon-transform: rotate(45deg);\n\n content: \"\";\n background-color: var(--vuu-icon-color);\n height: var(--vuu-icon-size);\n mask: var(--vuu-svg-triangle-right) center center/var(--vuu-icon-size)\n var(--vuu-icon-size);\n mask-repeat: no-repeat;\n position: absolute;\n top: 3px;\n transform: var(--vuu-icon-transform, none);\n width: var(--vuu-icon-size);\n }\n}\n\n.vuuTypeaheadOption[aria-disabled=\"true\"] {\n color: var(--salt-content-secondary-foreground);\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = vuuTypeaheadInputCss;
|
|
6
|
-
//# sourceMappingURL=VuuTypeaheadInput.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"VuuTypeaheadInput.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var core = require('@salt-ds/core');
|
|
5
|
-
var styles = require('@salt-ds/styles');
|
|
6
|
-
var window = require('@salt-ds/window');
|
|
7
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
8
|
-
var cx = require('clsx');
|
|
9
|
-
var useVuuTypeaheadInput = require('./useVuuTypeaheadInput.js');
|
|
10
|
-
var VuuTypeaheadInput$1 = require('./VuuTypeaheadInput.css.js');
|
|
11
|
-
|
|
12
|
-
const classBase = "vuuTypeaheadInput";
|
|
13
|
-
const [noMatchingData] = vuuUtils.NO_DATA_MATCH;
|
|
14
|
-
const VuuTypeaheadInput = ({
|
|
15
|
-
allowFreeInput,
|
|
16
|
-
className,
|
|
17
|
-
column,
|
|
18
|
-
freeTextWarning,
|
|
19
|
-
highlightFirstSuggestion,
|
|
20
|
-
inputProps: inputPropsProp,
|
|
21
|
-
minCharacterCountToTriggerSuggestions,
|
|
22
|
-
onCommit,
|
|
23
|
-
selectOnTab,
|
|
24
|
-
table
|
|
25
|
-
}) => {
|
|
26
|
-
const targetWindow = window.useWindow();
|
|
27
|
-
styles.useComponentCssInjection({
|
|
28
|
-
testId: "vuu-typeahead-input",
|
|
29
|
-
css: VuuTypeaheadInput$1,
|
|
30
|
-
window: targetWindow
|
|
31
|
-
});
|
|
32
|
-
const {
|
|
33
|
-
inputProps,
|
|
34
|
-
noFreeText,
|
|
35
|
-
onChange,
|
|
36
|
-
onKeyDown,
|
|
37
|
-
onOpenChange,
|
|
38
|
-
onSelectionChange,
|
|
39
|
-
open,
|
|
40
|
-
ref,
|
|
41
|
-
typeaheadValues,
|
|
42
|
-
value
|
|
43
|
-
} = useVuuTypeaheadInput.useVuuTypeaheadInput({
|
|
44
|
-
allowFreeInput,
|
|
45
|
-
column,
|
|
46
|
-
freeTextWarning,
|
|
47
|
-
highlightFirstSuggestion,
|
|
48
|
-
inputProps: inputPropsProp,
|
|
49
|
-
minCharacterCountToTriggerSuggestions,
|
|
50
|
-
onCommit,
|
|
51
|
-
table
|
|
52
|
-
});
|
|
53
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
54
|
-
core.ComboBox,
|
|
55
|
-
{
|
|
56
|
-
className: cx(classBase, className),
|
|
57
|
-
inputProps,
|
|
58
|
-
onChange,
|
|
59
|
-
onKeyDown,
|
|
60
|
-
onOpenChange,
|
|
61
|
-
onSelectionChange,
|
|
62
|
-
open,
|
|
63
|
-
ref,
|
|
64
|
-
selectOnTab,
|
|
65
|
-
value,
|
|
66
|
-
children: typeaheadValues.map((state) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
67
|
-
core.Option,
|
|
68
|
-
{
|
|
69
|
-
className: "vuuTypeaheadOption",
|
|
70
|
-
value: state,
|
|
71
|
-
disabled: state === noMatchingData || state === noFreeText
|
|
72
|
-
},
|
|
73
|
-
state
|
|
74
|
-
))
|
|
75
|
-
}
|
|
76
|
-
);
|
|
77
|
-
};
|
|
78
|
-
|
|
79
|
-
exports.VuuTypeaheadInput = VuuTypeaheadInput;
|
|
80
|
-
//# sourceMappingURL=VuuTypeaheadInput.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"VuuTypeaheadInput.js","sources":["../../../../packages/vuu-ui-controls/src/vuu-typeahead-input/VuuTypeaheadInput.tsx"],"sourcesContent":["import { ComboBox, ComboBoxProps, Option } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { NO_DATA_MATCH } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport {\n useVuuTypeaheadInput,\n VuuTypeaheadInputHookProps,\n} from \"./useVuuTypeaheadInput\";\n\nimport vuuTypeaheadInputCss from \"./VuuTypeaheadInput.css\";\n\nconst classBase = \"vuuTypeaheadInput\";\nconst [noMatchingData] = NO_DATA_MATCH;\n\nexport interface VuuTypeaheadInputProps\n extends VuuTypeaheadInputHookProps,\n Pick<ComboBoxProps, \"selectOnTab\"> {\n className?: string;\n}\n\nexport const VuuTypeaheadInput = ({\n allowFreeInput,\n className,\n column,\n freeTextWarning,\n highlightFirstSuggestion,\n inputProps: inputPropsProp,\n minCharacterCountToTriggerSuggestions,\n onCommit,\n selectOnTab,\n table,\n}: VuuTypeaheadInputProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-typeahead-input\",\n css: vuuTypeaheadInputCss,\n window: targetWindow,\n });\n\n const {\n inputProps,\n noFreeText,\n onChange,\n onKeyDown,\n onOpenChange,\n onSelectionChange,\n open,\n ref,\n typeaheadValues,\n value,\n } = useVuuTypeaheadInput({\n allowFreeInput,\n column,\n freeTextWarning,\n highlightFirstSuggestion,\n inputProps: inputPropsProp,\n minCharacterCountToTriggerSuggestions,\n onCommit,\n table,\n });\n\n return (\n <ComboBox\n className={cx(classBase, className)}\n inputProps={inputProps}\n onChange={onChange}\n onKeyDown={onKeyDown}\n onOpenChange={onOpenChange}\n onSelectionChange={onSelectionChange}\n open={open}\n ref={ref}\n selectOnTab={selectOnTab}\n value={value}\n >\n {typeaheadValues.map((state) => (\n <Option\n className=\"vuuTypeaheadOption\"\n value={state}\n key={state}\n disabled={state === noMatchingData || state === noFreeText}\n />\n ))}\n </ComboBox>\n );\n};\n"],"names":["NO_DATA_MATCH","useWindow","useComponentCssInjection","vuuTypeaheadInputCss","useVuuTypeaheadInput","jsx","ComboBox","Option"],"mappings":";;;;;;;;;;;AAYA,MAAM,SAAY,GAAA,mBAAA;AAClB,MAAM,CAAC,cAAc,CAAI,GAAAA,sBAAA;AAQlB,MAAM,oBAAoB,CAAC;AAAA,EAChC,cAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,eAAA;AAAA,EACA,wBAAA;AAAA,EACA,UAAY,EAAA,cAAA;AAAA,EACZ,qCAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAA8B,KAAA;AAC5B,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qBAAA;AAAA,IACR,GAAK,EAAAC,mBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,iBAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAA;AAAA,IACA,eAAA;AAAA,IACA;AAAA,MACEC,yCAAqB,CAAA;AAAA,IACvB,cAAA;AAAA,IACA,MAAA;AAAA,IACA,eAAA;AAAA,IACA,wBAAA;AAAA,IACA,UAAY,EAAA,cAAA;AAAA,IACZ,qCAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAACC,aAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,UAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,iBAAA;AAAA,MACA,IAAA;AAAA,MACA,GAAA;AAAA,MACA,WAAA;AAAA,MACA,KAAA;AAAA,MAEC,QAAA,EAAA,eAAA,CAAgB,GAAI,CAAA,CAAC,KACpB,qBAAAD,cAAA;AAAA,QAACE,WAAA;AAAA,QAAA;AAAA,UACC,SAAU,EAAA,oBAAA;AAAA,UACV,KAAO,EAAA,KAAA;AAAA,UAEP,QAAA,EAAU,KAAU,KAAA,cAAA,IAAkB,KAAU,KAAA;AAAA,SAAA;AAAA,QAD3C;AAAA,OAGR;AAAA;AAAA,GACH;AAEJ;;;;"}
|
|
@@ -1,176 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var vuuDataReact = require('@vuu-ui/vuu-data-react');
|
|
4
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
5
|
-
var React = require('react');
|
|
6
|
-
|
|
7
|
-
const meetsMinTextLengthThreshold = (value, minLength) => value.length >= minLength;
|
|
8
|
-
const defaultFreeTextWarning = "Please select a value from the list of suggestions. If no suggestions match your text, then the value is not valid. If you believe this should be a valid value, please reach out to the support team";
|
|
9
|
-
const useVuuTypeaheadInput = ({
|
|
10
|
-
allowFreeInput = true,
|
|
11
|
-
column,
|
|
12
|
-
freeTextWarning,
|
|
13
|
-
highlightFirstSuggestion = true,
|
|
14
|
-
inputProps: inputPropsProp,
|
|
15
|
-
minCharacterCountToTriggerSuggestions = 1,
|
|
16
|
-
onCommit,
|
|
17
|
-
table
|
|
18
|
-
}) => {
|
|
19
|
-
const NO_FREE_TEXT = React.useMemo(
|
|
20
|
-
() => [freeTextWarning ?? defaultFreeTextWarning],
|
|
21
|
-
[freeTextWarning]
|
|
22
|
-
);
|
|
23
|
-
const [valueRef, setValue] = vuuUtils.useStateRef("");
|
|
24
|
-
const [open, setOpen] = React.useState(false);
|
|
25
|
-
const inputRef = React.useRef(null);
|
|
26
|
-
const rootRef = React.useRef(null);
|
|
27
|
-
const [typeaheadValues, setTypeaheadValues] = React.useState([]);
|
|
28
|
-
const getSuggestions = vuuDataReact.useTypeaheadSuggestions();
|
|
29
|
-
const pendingListFocusRef = React.useRef(false);
|
|
30
|
-
const { current: value } = valueRef;
|
|
31
|
-
React.useMemo(() => {
|
|
32
|
-
if (inputPropsProp?.value !== void 0 && inputPropsProp?.value !== valueRef.current) {
|
|
33
|
-
setValue(`${inputPropsProp.value}`);
|
|
34
|
-
}
|
|
35
|
-
}, [inputPropsProp?.value, setValue, valueRef]);
|
|
36
|
-
const commitTimeout = React.useRef(null);
|
|
37
|
-
const handleKeyDown = React.useCallback(
|
|
38
|
-
(evt) => {
|
|
39
|
-
const { current: value2 } = valueRef;
|
|
40
|
-
if (evt.key === "Enter" && value2 !== "") {
|
|
41
|
-
if (allowFreeInput) {
|
|
42
|
-
commitTimeout.current = setTimeout(() => {
|
|
43
|
-
onCommit?.(evt, value2, "text-input");
|
|
44
|
-
setOpen(false);
|
|
45
|
-
commitTimeout.current = null;
|
|
46
|
-
}, 200);
|
|
47
|
-
} else {
|
|
48
|
-
setTypeaheadValues(NO_FREE_TEXT);
|
|
49
|
-
}
|
|
50
|
-
} else if (evt.key === "Enter" && value2 === "") {
|
|
51
|
-
console.log("ENTER no value");
|
|
52
|
-
}
|
|
53
|
-
},
|
|
54
|
-
[NO_FREE_TEXT, allowFreeInput, onCommit, valueRef]
|
|
55
|
-
);
|
|
56
|
-
const callbackRef = React.useCallback((el) => {
|
|
57
|
-
rootRef.current = el;
|
|
58
|
-
const input = el?.querySelector("input") ?? null;
|
|
59
|
-
inputRef.current = input;
|
|
60
|
-
}, []);
|
|
61
|
-
const refreshSuggestions = React.useCallback(() => {
|
|
62
|
-
if (table) {
|
|
63
|
-
const vuuTable = vuuUtils.getVuuTable(table);
|
|
64
|
-
if (meetsMinTextLengthThreshold(
|
|
65
|
-
value,
|
|
66
|
-
minCharacterCountToTriggerSuggestions
|
|
67
|
-
)) {
|
|
68
|
-
const params = value ? [vuuTable, column, value] : [vuuTable, column];
|
|
69
|
-
getSuggestions(params).then((suggestions) => {
|
|
70
|
-
if (suggestions === false) {
|
|
71
|
-
setTypeaheadValues([]);
|
|
72
|
-
} else if (suggestions.length === 0 && value) {
|
|
73
|
-
setTypeaheadValues(
|
|
74
|
-
(values) => (
|
|
75
|
-
// Do not update if we have already set suggestions to the no free text warning
|
|
76
|
-
values === NO_FREE_TEXT ? NO_FREE_TEXT : vuuUtils.NO_DATA_MATCH
|
|
77
|
-
)
|
|
78
|
-
);
|
|
79
|
-
} else {
|
|
80
|
-
setTypeaheadValues(suggestions);
|
|
81
|
-
if (pendingListFocusRef.current && inputRef.current) {
|
|
82
|
-
setTimeout(() => {
|
|
83
|
-
if (inputRef.current) {
|
|
84
|
-
vuuUtils.dispatchKeyboardEvent(
|
|
85
|
-
inputRef.current,
|
|
86
|
-
"keydown",
|
|
87
|
-
"ArrowDown"
|
|
88
|
-
);
|
|
89
|
-
}
|
|
90
|
-
}, 60);
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
pendingListFocusRef.current = false;
|
|
94
|
-
}).catch((err) => {
|
|
95
|
-
console.error("Error getting suggestions", err);
|
|
96
|
-
});
|
|
97
|
-
} else {
|
|
98
|
-
setTypeaheadValues([]);
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
}, [
|
|
102
|
-
NO_FREE_TEXT,
|
|
103
|
-
column,
|
|
104
|
-
getSuggestions,
|
|
105
|
-
minCharacterCountToTriggerSuggestions,
|
|
106
|
-
table,
|
|
107
|
-
value
|
|
108
|
-
]);
|
|
109
|
-
React.useEffect(() => {
|
|
110
|
-
refreshSuggestions();
|
|
111
|
-
}, [refreshSuggestions]);
|
|
112
|
-
const handleChange = React.useCallback(
|
|
113
|
-
(evt) => {
|
|
114
|
-
const { value: newValue } = evt.target;
|
|
115
|
-
const { current: value2 } = valueRef;
|
|
116
|
-
if (value2 === "" && newValue) {
|
|
117
|
-
setOpen(true);
|
|
118
|
-
const input = rootRef.current?.querySelector("input");
|
|
119
|
-
if (input && highlightFirstSuggestion) {
|
|
120
|
-
pendingListFocusRef.current = true;
|
|
121
|
-
}
|
|
122
|
-
} else if (newValue === "" && value2) {
|
|
123
|
-
onCommit(evt, "");
|
|
124
|
-
}
|
|
125
|
-
setValue(newValue);
|
|
126
|
-
},
|
|
127
|
-
[highlightFirstSuggestion, onCommit, setValue, valueRef]
|
|
128
|
-
);
|
|
129
|
-
const handleSelectionChange = (evt, [newSelected]) => {
|
|
130
|
-
if (commitTimeout.current) {
|
|
131
|
-
clearTimeout(commitTimeout.current);
|
|
132
|
-
commitTimeout.current = null;
|
|
133
|
-
}
|
|
134
|
-
setValue(newSelected);
|
|
135
|
-
onCommit(
|
|
136
|
-
evt,
|
|
137
|
-
newSelected,
|
|
138
|
-
"typeahead-suggestion"
|
|
139
|
-
);
|
|
140
|
-
};
|
|
141
|
-
const handleOpenChange = (newOpen) => {
|
|
142
|
-
if (newOpen && valueRef.current === "") {
|
|
143
|
-
setOpen(newOpen);
|
|
144
|
-
} else {
|
|
145
|
-
setOpen(newOpen);
|
|
146
|
-
}
|
|
147
|
-
};
|
|
148
|
-
const handleInputFocus = React.useCallback(
|
|
149
|
-
(e) => {
|
|
150
|
-
inputPropsProp?.onFocus?.(e);
|
|
151
|
-
refreshSuggestions();
|
|
152
|
-
},
|
|
153
|
-
[inputPropsProp, refreshSuggestions]
|
|
154
|
-
);
|
|
155
|
-
const inputProps = {
|
|
156
|
-
...inputPropsProp,
|
|
157
|
-
autoComplete: "off",
|
|
158
|
-
onFocus: handleInputFocus
|
|
159
|
-
};
|
|
160
|
-
const [noFreeText] = NO_FREE_TEXT;
|
|
161
|
-
return {
|
|
162
|
-
inputProps,
|
|
163
|
-
noFreeText,
|
|
164
|
-
onChange: handleChange,
|
|
165
|
-
onKeyDown: handleKeyDown,
|
|
166
|
-
onOpenChange: handleOpenChange,
|
|
167
|
-
onSelectionChange: handleSelectionChange,
|
|
168
|
-
open,
|
|
169
|
-
ref: callbackRef,
|
|
170
|
-
typeaheadValues,
|
|
171
|
-
value: valueRef.current
|
|
172
|
-
};
|
|
173
|
-
};
|
|
174
|
-
|
|
175
|
-
exports.useVuuTypeaheadInput = useVuuTypeaheadInput;
|
|
176
|
-
//# sourceMappingURL=useVuuTypeaheadInput.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useVuuTypeaheadInput.js","sources":["../../../../packages/vuu-ui-controls/src/vuu-typeahead-input/useVuuTypeaheadInput.ts"],"sourcesContent":["import { PillInputProps } from \"@salt-ds/core/dist-types/pill-input\";\nimport { useTypeaheadSuggestions } from \"@vuu-ui/vuu-data-react\";\nimport { TableSchemaTable } from \"@vuu-ui/vuu-data-types\";\nimport type { TypeaheadParams } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n getVuuTable,\n useStateRef,\n NO_DATA_MATCH,\n type CommitHandler,\n dispatchKeyboardEvent,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n ComponentPropsWithoutRef,\n FocusEventHandler,\n KeyboardEventHandler,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n type ChangeEventHandler,\n type RefCallback,\n type SyntheticEvent,\n} from \"react\";\n\nconst meetsMinTextLengthThreshold = (value: string, minLength: number) =>\n value.length >= minLength;\n\nexport interface VuuTypeaheadInputHookProps {\n /**\n * Allows a text string to be submitted that does not match any suggestion\n * Defaults to true\n */\n allowFreeInput?: boolean;\n column: string;\n /**\n * A warning to display to the user if allowFreeText is false and they attempt\n * to commit text which does not match any suggestions. A default message will\n * be shown if not provided\n */\n freeTextWarning?: string;\n /**\n * When suggestions are displayed, should first option be highlighted ?\n * Highlighted option will be selected if Enter pressed. If this option\n * is not applied and no suggestion is highlighted, Enter will commit\n * current text. This will be desirable if filter operator will be\n * 'contains', not if filter operator will be '='.\n */\n highlightFirstSuggestion?: boolean;\n inputProps?: PillInputProps[\"inputProps\"];\n /**\n * If zero, suggestions will be shown even without any text input.\n * Suggestions will be displayed on click, or, if focused via keynoard,\n * on ArrowDown.\n * If n, where n > 0, then n characters must be typed before suggestion\n * list will be fetched.\n */\n minCharacterCountToTriggerSuggestions?: 0 | 1 | 2 | 3;\n onCommit: CommitHandler<HTMLInputElement>;\n table: TableSchemaTable;\n}\n\nconst defaultFreeTextWarning =\n \"Please select a value from the list of suggestions. If no suggestions match your text, then the value is not valid. If you believe this should be a valid value, please reach out to the support team\";\n\nexport const useVuuTypeaheadInput = ({\n allowFreeInput = true,\n column,\n freeTextWarning,\n highlightFirstSuggestion = true,\n inputProps: inputPropsProp,\n minCharacterCountToTriggerSuggestions = 1,\n onCommit,\n table,\n}: VuuTypeaheadInputHookProps) => {\n const NO_FREE_TEXT = useMemo(\n () => [freeTextWarning ?? defaultFreeTextWarning],\n [freeTextWarning],\n );\n const [valueRef, setValue] = useStateRef(\"\");\n const [open, setOpen] = useState(false);\n const inputRef = useRef<HTMLInputElement | null>(null);\n const rootRef = useRef<HTMLDivElement | null>(null);\n const [typeaheadValues, setTypeaheadValues] = useState<string[]>([]);\n const getSuggestions = useTypeaheadSuggestions();\n const pendingListFocusRef = useRef(false);\n\n const { current: value } = valueRef;\n\n useMemo(() => {\n if (\n inputPropsProp?.value !== undefined &&\n inputPropsProp?.value !== valueRef.current\n ) {\n setValue(`${inputPropsProp.value}`);\n }\n }, [inputPropsProp?.value, setValue, valueRef]);\n\n const commitTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n const handleKeyDown = useCallback<KeyboardEventHandler<HTMLInputElement>>(\n (evt) => {\n const { current: value } = valueRef;\n if (evt.key === \"Enter\" && value !== \"\") {\n if (allowFreeInput) {\n commitTimeout.current = setTimeout(() => {\n onCommit?.(evt, value, \"text-input\");\n setOpen(false);\n commitTimeout.current = null;\n }, 200);\n } else {\n setTypeaheadValues(NO_FREE_TEXT);\n }\n } else if (evt.key === \"Enter\" && value === \"\") {\n console.log(\"ENTER no value\");\n }\n },\n [NO_FREE_TEXT, allowFreeInput, onCommit, valueRef],\n );\n\n const callbackRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n rootRef.current = el;\n const input = el?.querySelector(\"input\") ?? null;\n inputRef.current = input;\n }, []);\n\n const refreshSuggestions = useCallback(() => {\n if (table) {\n const vuuTable = getVuuTable(table);\n if (\n meetsMinTextLengthThreshold(\n value,\n minCharacterCountToTriggerSuggestions,\n )\n ) {\n const params: TypeaheadParams = value\n ? [vuuTable, column, value]\n : [vuuTable, column];\n getSuggestions(params)\n .then((suggestions) => {\n if (suggestions === false) {\n // TODO is this right\n setTypeaheadValues([]);\n } else if (suggestions.length === 0 && value) {\n setTypeaheadValues((values) =>\n // Do not update if we have already set suggestions to the no free text warning\n values === NO_FREE_TEXT ? NO_FREE_TEXT : NO_DATA_MATCH,\n );\n } else {\n setTypeaheadValues(suggestions);\n if (pendingListFocusRef.current && inputRef.current) {\n setTimeout(() => {\n if (inputRef.current) {\n dispatchKeyboardEvent(\n inputRef.current,\n \"keydown\",\n \"ArrowDown\",\n );\n }\n },60);\n }\n }\n pendingListFocusRef.current = false;\n })\n .catch((err) => {\n console.error(\"Error getting suggestions\", err);\n });\n } else {\n setTypeaheadValues([]);\n }\n }\n }, [\n NO_FREE_TEXT,\n column,\n getSuggestions,\n minCharacterCountToTriggerSuggestions,\n table,\n value,\n ]);\n\n useEffect(() => {\n // This will preload suggestions for controls with no char input minimum\n refreshSuggestions();\n }, [refreshSuggestions]);\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = useCallback(\n (evt) => {\n const { value: newValue } = evt.target;\n const { current: value } = valueRef;\n if (value === \"\" && newValue) {\n setOpen(true);\n const input = rootRef.current?.querySelector(\"input\");\n if (input && highlightFirstSuggestion) {\n pendingListFocusRef.current = true;\n }\n } else if (newValue === \"\" && value) {\n // treat clear value as a commit event\n onCommit(evt, \"\");\n }\n setValue(newValue);\n },\n [highlightFirstSuggestion, onCommit, setValue, valueRef],\n );\n\n const handleSelectionChange = (\n evt: SyntheticEvent,\n [newSelected]: string[],\n ) => {\n if (commitTimeout.current) {\n clearTimeout(commitTimeout.current);\n commitTimeout.current = null;\n }\n setValue(newSelected);\n onCommit(\n evt as SyntheticEvent<HTMLInputElement>,\n newSelected,\n \"typeahead-suggestion\",\n );\n };\n\n const handleOpenChange = (newOpen: boolean) => {\n if (newOpen && valueRef.current === \"\") {\n // ignore this, don't open dropdown unless user has typed at least one character\n setOpen(newOpen);\n } else {\n setOpen(newOpen);\n }\n };\n\n const handleInputFocus = useCallback<FocusEventHandler<HTMLInputElement>>(\n (e) => {\n inputPropsProp?.onFocus?.(e);\n refreshSuggestions();\n },\n [inputPropsProp, refreshSuggestions],\n );\n\n const inputProps: ComponentPropsWithoutRef<\"input\"> = {\n ...inputPropsProp,\n autoComplete: \"off\",\n onFocus: handleInputFocus,\n };\n\n const [noFreeText] = NO_FREE_TEXT;\n return {\n inputProps,\n noFreeText,\n onChange: handleChange,\n onKeyDown: handleKeyDown,\n onOpenChange: handleOpenChange,\n onSelectionChange: handleSelectionChange,\n open,\n ref: callbackRef,\n typeaheadValues,\n value: valueRef.current,\n };\n};\n"],"names":["useMemo","useStateRef","useState","useRef","useTypeaheadSuggestions","useCallback","value","getVuuTable","NO_DATA_MATCH","dispatchKeyboardEvent","useEffect"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|