@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,228 +0,0 @@
|
|
|
1
|
-
const LEFT_RIGHT = ["left", "right"];
|
|
2
|
-
const TOP_BOTTOM = ["top", "bottom"];
|
|
3
|
-
const NOT_OVERFLOWED = ":not(.wrapped)";
|
|
4
|
-
const NOT_HIDDEN = ':not([aria-hidden="true"])';
|
|
5
|
-
const cloneElement = (element) => {
|
|
6
|
-
const dolly = element.cloneNode(true);
|
|
7
|
-
dolly.removeAttribute("id");
|
|
8
|
-
dolly.dataset.index = "-1";
|
|
9
|
-
return dolly;
|
|
10
|
-
};
|
|
11
|
-
const measureElementSizeAndPosition = (element, dimension = "width", includeAutoMargin = false) => {
|
|
12
|
-
const pos = dimension === "width" ? "left" : "top";
|
|
13
|
-
const { [dimension]: size, [pos]: position } = element.getBoundingClientRect();
|
|
14
|
-
const { padEnd = false, padStart = false } = element.dataset;
|
|
15
|
-
const style = getComputedStyle(element);
|
|
16
|
-
const [start, end] = dimension === "width" ? LEFT_RIGHT : TOP_BOTTOM;
|
|
17
|
-
const marginStart = padStart && !includeAutoMargin ? 0 : parseInt(style.getPropertyValue(`margin-${start}`), 10);
|
|
18
|
-
const marginEnd = padEnd && !includeAutoMargin ? 0 : parseInt(style.getPropertyValue(`margin-${end}`), 10);
|
|
19
|
-
let minWidth = size;
|
|
20
|
-
const flexShrink = parseInt(style.getPropertyValue("flex-shrink"), 10);
|
|
21
|
-
if (flexShrink > 0) {
|
|
22
|
-
const flexBasis = parseInt(style.getPropertyValue("flex-basis"), 10);
|
|
23
|
-
if (!isNaN(flexBasis) && flexBasis > 0) {
|
|
24
|
-
minWidth = flexBasis;
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
return [position, marginStart + minWidth + marginEnd];
|
|
28
|
-
};
|
|
29
|
-
const DIMENSIONS = {
|
|
30
|
-
horizontal: {
|
|
31
|
-
CLIENT_POS: "clientX",
|
|
32
|
-
CLIENT_SIZE: "clientWidth",
|
|
33
|
-
CONTRA: "top",
|
|
34
|
-
CONTRA_CLIENT_POS: "clientY",
|
|
35
|
-
CONTRA_END: "bottom",
|
|
36
|
-
CONTRA_POS: "y",
|
|
37
|
-
DIMENSION: "width",
|
|
38
|
-
END: "right",
|
|
39
|
-
POS: "x",
|
|
40
|
-
SCROLL_POS: "scrollLeft",
|
|
41
|
-
SCROLL_SIZE: "scrollWidth",
|
|
42
|
-
START: "left"
|
|
43
|
-
},
|
|
44
|
-
vertical: {
|
|
45
|
-
CLIENT_POS: "clientY",
|
|
46
|
-
CLIENT_SIZE: "clientHeight",
|
|
47
|
-
CONTRA: "left",
|
|
48
|
-
CONTRA_CLIENT_POS: "clientX",
|
|
49
|
-
CONTRA_END: "right",
|
|
50
|
-
CONTRA_POS: "x",
|
|
51
|
-
DIMENSION: "height",
|
|
52
|
-
END: "bottom",
|
|
53
|
-
POS: "y",
|
|
54
|
-
SCROLL_POS: "scrollTop",
|
|
55
|
-
SCROLL_SIZE: "scrollHeight",
|
|
56
|
-
START: "top"
|
|
57
|
-
}
|
|
58
|
-
};
|
|
59
|
-
const dimensions = (orientation) => DIMENSIONS[orientation];
|
|
60
|
-
const getItemById = (measuredItems, id) => {
|
|
61
|
-
const result = measuredItems.find((item) => item.id === id);
|
|
62
|
-
if (result) {
|
|
63
|
-
return result;
|
|
64
|
-
}
|
|
65
|
-
};
|
|
66
|
-
const removeDraggedItem = (measuredItems, index) => {
|
|
67
|
-
measuredItems.splice(index, 1);
|
|
68
|
-
for (let i = index; i < measuredItems.length; i++) {
|
|
69
|
-
measuredItems[i].currentIndex -= 1;
|
|
70
|
-
}
|
|
71
|
-
};
|
|
72
|
-
const measureDropTargets = (container, orientation, itemQuery, viewportRange, draggedItemId) => {
|
|
73
|
-
const dragThresholds = [];
|
|
74
|
-
const { DIMENSION } = dimensions(orientation);
|
|
75
|
-
const children = Array.from(
|
|
76
|
-
itemQuery ? container.querySelectorAll(itemQuery) : container.children
|
|
77
|
-
);
|
|
78
|
-
const itemCount = children.length;
|
|
79
|
-
const start = typeof viewportRange?.from === "number" ? viewportRange.atEnd ? Math.max(0, viewportRange.from - 1) : viewportRange.from : 0;
|
|
80
|
-
const end = typeof viewportRange?.to === "number" ? Math.min(viewportRange.to + 2, itemCount - 1) : itemCount - 1;
|
|
81
|
-
for (let index = start; index <= end; index++) {
|
|
82
|
-
const element = children[index];
|
|
83
|
-
const [start2, size] = measureElementSizeAndPosition(element, DIMENSION);
|
|
84
|
-
const isLast = index === itemCount - 1;
|
|
85
|
-
const id = element.id;
|
|
86
|
-
dragThresholds.push({
|
|
87
|
-
currentIndex: index,
|
|
88
|
-
id,
|
|
89
|
-
index,
|
|
90
|
-
isDraggedItem: draggedItemId === id,
|
|
91
|
-
isLast,
|
|
92
|
-
isOverflowIndicator: element.dataset.index === "overflow",
|
|
93
|
-
element,
|
|
94
|
-
start: start2,
|
|
95
|
-
end: start2 + size,
|
|
96
|
-
size,
|
|
97
|
-
mid: start2 + size / 2
|
|
98
|
-
});
|
|
99
|
-
}
|
|
100
|
-
return dragThresholds;
|
|
101
|
-
};
|
|
102
|
-
const getIndexOfDraggedItem = (dropTargets) => dropTargets.findIndex((d) => d.isDraggedItem);
|
|
103
|
-
const mutateDropTargetsSwitchDropTargetPosition = (dropTargets, direction) => {
|
|
104
|
-
const indexOfDraggedItem = getIndexOfDraggedItem(dropTargets);
|
|
105
|
-
const indexOfTarget = direction === "fwd" ? indexOfDraggedItem + 1 : indexOfDraggedItem - 1;
|
|
106
|
-
if (indexOfTarget < 0 || indexOfTarget >= dropTargets.length) {
|
|
107
|
-
throw Error("switchDropTargetPosition index out of range");
|
|
108
|
-
}
|
|
109
|
-
const draggedItem = dropTargets.at(indexOfDraggedItem);
|
|
110
|
-
const targetItem = dropTargets.at(indexOfTarget);
|
|
111
|
-
const diff = targetItem.size - draggedItem.size;
|
|
112
|
-
if (direction === "fwd") {
|
|
113
|
-
const draggedStart = targetItem.start + diff;
|
|
114
|
-
const draggedEnd = targetItem.end;
|
|
115
|
-
const newDraggedItem = {
|
|
116
|
-
...draggedItem,
|
|
117
|
-
start: draggedStart,
|
|
118
|
-
mid: Math.floor(draggedStart + (draggedEnd - draggedStart) / 2),
|
|
119
|
-
end: draggedEnd
|
|
120
|
-
};
|
|
121
|
-
const targetStart = draggedItem.start;
|
|
122
|
-
const targetEnd = draggedItem.end + diff;
|
|
123
|
-
const newTargetItem = {
|
|
124
|
-
...targetItem,
|
|
125
|
-
start: targetStart,
|
|
126
|
-
mid: Math.floor(targetStart + (targetEnd - targetStart) / 2),
|
|
127
|
-
end: targetEnd
|
|
128
|
-
};
|
|
129
|
-
dropTargets.splice(indexOfDraggedItem, 2, newTargetItem, newDraggedItem);
|
|
130
|
-
} else {
|
|
131
|
-
const draggedStart = targetItem.start;
|
|
132
|
-
const draggedEnd = targetItem.end - diff;
|
|
133
|
-
const newDraggedItem = {
|
|
134
|
-
...draggedItem,
|
|
135
|
-
start: draggedStart,
|
|
136
|
-
mid: Math.floor(draggedStart + (draggedEnd - draggedStart) / 2),
|
|
137
|
-
end: draggedEnd
|
|
138
|
-
};
|
|
139
|
-
const targetStart = draggedItem.start - diff;
|
|
140
|
-
const targetEnd = draggedItem.end;
|
|
141
|
-
const newTargetItem = {
|
|
142
|
-
...targetItem,
|
|
143
|
-
start: targetStart,
|
|
144
|
-
mid: Math.floor(targetStart + (targetEnd - targetStart) / 2),
|
|
145
|
-
end: targetEnd
|
|
146
|
-
};
|
|
147
|
-
dropTargets.splice(indexOfTarget, 2, newDraggedItem, newTargetItem);
|
|
148
|
-
}
|
|
149
|
-
};
|
|
150
|
-
const getNextDropTarget = (dropTargets, pos, draggedItemSize, mouseMoveDirection) => {
|
|
151
|
-
const len = dropTargets.length;
|
|
152
|
-
const indexOfDraggedItem = getIndexOfDraggedItem(dropTargets);
|
|
153
|
-
const draggedItem = dropTargets[indexOfDraggedItem];
|
|
154
|
-
if (mouseMoveDirection === "fwd") {
|
|
155
|
-
const leadingEdge = Math.round(pos + draggedItemSize);
|
|
156
|
-
for (let index = len - 1; index >= 0; index--) {
|
|
157
|
-
const dropTarget = dropTargets[index];
|
|
158
|
-
if (leadingEdge > dropTarget.mid) {
|
|
159
|
-
if (draggedItem && index < indexOfDraggedItem) {
|
|
160
|
-
return draggedItem;
|
|
161
|
-
} else {
|
|
162
|
-
return dropTarget;
|
|
163
|
-
}
|
|
164
|
-
}
|
|
165
|
-
}
|
|
166
|
-
} else {
|
|
167
|
-
const leadingEdge = Math.round(pos);
|
|
168
|
-
for (let index = 0; index < len; index++) {
|
|
169
|
-
const dropTarget = dropTargets[index];
|
|
170
|
-
if (leadingEdge < dropTarget.mid) {
|
|
171
|
-
if (index > indexOfDraggedItem) {
|
|
172
|
-
return draggedItem;
|
|
173
|
-
} else {
|
|
174
|
-
return dropTarget;
|
|
175
|
-
}
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
throw Error("no dropTarget identified");
|
|
180
|
-
};
|
|
181
|
-
function constrainRect(targetRect, constraintRect) {
|
|
182
|
-
const { height, left, top, width } = targetRect;
|
|
183
|
-
const { height: constrainedHeight, width: constrainedWidth } = constraintRect;
|
|
184
|
-
return {
|
|
185
|
-
height: Math.min(height, constrainedHeight),
|
|
186
|
-
left,
|
|
187
|
-
top,
|
|
188
|
-
width: Math.min(width, constrainedWidth)
|
|
189
|
-
};
|
|
190
|
-
}
|
|
191
|
-
const dropTargetsDebugString = (dropTargets) => dropTargets.map(
|
|
192
|
-
(d, i) => `
|
|
193
|
-
${d.isDraggedItem ? "*" : " "}[${i}] width : ${Math.floor(
|
|
194
|
-
d.size
|
|
195
|
-
)} ${Math.floor(d.start)} - ${Math.floor(d.end)} (mid ${Math.floor(
|
|
196
|
-
d.mid
|
|
197
|
-
)}) ${d.element?.textContent} `
|
|
198
|
-
).join("");
|
|
199
|
-
const getItemParentContainer = (container, itemQuery) => {
|
|
200
|
-
const firstItem = container?.querySelector(
|
|
201
|
-
`${itemQuery}:not([aria-hidden="true"])`
|
|
202
|
-
);
|
|
203
|
-
if (firstItem) {
|
|
204
|
-
return firstItem.parentElement;
|
|
205
|
-
} else {
|
|
206
|
-
return null;
|
|
207
|
-
}
|
|
208
|
-
};
|
|
209
|
-
const getScrollableContainer = (container, itemQuery) => {
|
|
210
|
-
const immediateParent = getItemParentContainer(container, itemQuery);
|
|
211
|
-
if (immediateParent === container) {
|
|
212
|
-
return container;
|
|
213
|
-
} else {
|
|
214
|
-
return immediateParent?.parentElement;
|
|
215
|
-
}
|
|
216
|
-
};
|
|
217
|
-
const isContainerScrollable = (scrollableContainer, orientation) => {
|
|
218
|
-
if (scrollableContainer === null) {
|
|
219
|
-
return false;
|
|
220
|
-
} else {
|
|
221
|
-
const { SCROLL_SIZE, CLIENT_SIZE } = dimensions(orientation);
|
|
222
|
-
const { [SCROLL_SIZE]: scrollSize, [CLIENT_SIZE]: clientSize } = scrollableContainer;
|
|
223
|
-
return scrollSize > clientSize;
|
|
224
|
-
}
|
|
225
|
-
};
|
|
226
|
-
|
|
227
|
-
export { NOT_HIDDEN, NOT_OVERFLOWED, cloneElement, constrainRect, dimensions, dropTargetsDebugString, getIndexOfDraggedItem, getItemById, getItemParentContainer, getNextDropTarget, getScrollableContainer, isContainerScrollable, measureDropTargets, measureElementSizeAndPosition, mutateDropTargetsSwitchDropTargetPosition, removeDraggedItem };
|
|
228
|
-
//# sourceMappingURL=drop-target-utils.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"drop-target-utils.js","sources":["../../../../packages/vuu-ui-controls/src/drag-drop/drop-target-utils.ts"],"sourcesContent":["import { orientationType } from \"@vuu-ui/vuu-utils\";\nimport { ViewportRange } from \"./dragDropTypes\";\nimport { Direction, Rect } from \"./dragDropTypes\";\n\nconst LEFT_RIGHT = [\"left\", \"right\"];\nconst TOP_BOTTOM = [\"top\", \"bottom\"];\n// duplicated in repsonsive\n\nexport const NOT_OVERFLOWED = \":not(.wrapped)\";\nexport const NOT_HIDDEN = ':not([aria-hidden=\"true\"])';\n\n// TODO figure out which of these attributes we no longer need\nexport type MeasuredDropTarget = {\n /** \n The index position currently occupied by this item. If draggable \n is dropped here, this will be the destination drop position.\n */\n currentIndex: number;\n element: HTMLElement;\n id: string;\n index: number;\n isDraggedItem: boolean;\n isExternal?: boolean;\n isLast?: boolean;\n isOverflowIndicator?: boolean;\n start: number;\n end: number;\n mid: number;\n size: number;\n};\n\nexport type targetType = {\n element: HTMLElement | null;\n index: number;\n isLast?: boolean;\n};\n\n/** clones and removes id */\nexport const cloneElement = <T extends HTMLElement>(element: T): T => {\n const dolly = element.cloneNode(true) as T;\n // TOSO should we care about nested id values - perhaps an additional param, defaulting to false ?\n dolly.removeAttribute(\"id\");\n // Set index to -1 in case a moueMove event as we wait for drop to take effect might set highlighted\n // index to wrong value (see useList) -1 will be ignored;\n dolly.dataset.index = \"-1\";\n return dolly;\n};\n\ntype MousePosKey = keyof Pick<MouseEvent, \"clientX\" | \"clientY\">;\ntype DOMRectKey = keyof Omit<DOMRect, \"toJSON\">;\ntype DOMRectDimensionKey = keyof Pick<DOMRect, \"width\" | \"height\">;\ntype Dimension = keyof Pick<DOMRect, \"width\" | \"height\">;\ntype ElementDimension = keyof Pick<\n HTMLElement,\n | \"scrollHeight\"\n | \"scrollWidth\"\n | \"clientHeight\"\n | \"clientWidth\"\n | \"scrollTop\"\n | \"scrollLeft\"\n>;\n\ntype ElementPosition = \"x\" | \"y\";\n\nexport const measureElementSizeAndPosition = (\n element: HTMLElement,\n dimension: Dimension = \"width\",\n includeAutoMargin = false,\n) => {\n const pos = dimension === \"width\" ? \"left\" : \"top\";\n const { [dimension]: size, [pos]: position } =\n element.getBoundingClientRect();\n const { padEnd = false, padStart = false } = element.dataset;\n const style = getComputedStyle(element);\n const [start, end] = dimension === \"width\" ? LEFT_RIGHT : TOP_BOTTOM;\n const marginStart =\n padStart && !includeAutoMargin\n ? 0\n : parseInt(style.getPropertyValue(`margin-${start}`), 10);\n const marginEnd =\n padEnd && !includeAutoMargin\n ? 0\n : parseInt(style.getPropertyValue(`margin-${end}`), 10);\n\n let minWidth = size;\n const flexShrink = parseInt(style.getPropertyValue(\"flex-shrink\"), 10);\n if (flexShrink > 0) {\n const flexBasis = parseInt(style.getPropertyValue(\"flex-basis\"), 10);\n if (!isNaN(flexBasis) && flexBasis > 0) {\n minWidth = flexBasis;\n }\n }\n return [position, marginStart + minWidth + marginEnd];\n};\n\nconst DIMENSIONS = {\n horizontal: {\n CLIENT_POS: \"clientX\" as MousePosKey,\n CLIENT_SIZE: \"clientWidth\" as ElementDimension,\n CONTRA: \"top\" as DOMRectKey,\n CONTRA_CLIENT_POS: \"clientY\" as MousePosKey,\n CONTRA_END: \"bottom\" as DOMRectDimensionKey,\n CONTRA_POS: \"y\" as ElementPosition,\n DIMENSION: \"width\" as DOMRectDimensionKey,\n END: \"right\" as DOMRectKey,\n POS: \"x\" as ElementPosition,\n SCROLL_POS: \"scrollLeft\" as ElementDimension,\n SCROLL_SIZE: \"scrollWidth\" as ElementDimension,\n START: \"left\" as DOMRectKey,\n },\n vertical: {\n CLIENT_POS: \"clientY\" as MousePosKey,\n CLIENT_SIZE: \"clientHeight\" as ElementDimension,\n CONTRA: \"left\" as DOMRectKey,\n CONTRA_CLIENT_POS: \"clientX\" as MousePosKey,\n CONTRA_END: \"right\" as DOMRectDimensionKey,\n CONTRA_POS: \"x\" as ElementPosition,\n DIMENSION: \"height\" as DOMRectDimensionKey,\n END: \"bottom\" as DOMRectKey,\n POS: \"y\" as ElementPosition,\n SCROLL_POS: \"scrollTop\" as ElementDimension,\n SCROLL_SIZE: \"scrollHeight\" as ElementDimension,\n START: \"top\" as DOMRectKey,\n },\n};\nexport const dimensions = (orientation: orientationType) =>\n DIMENSIONS[orientation];\n\nexport const getItemById = (\n measuredItems: MeasuredDropTarget[],\n id: string,\n) => {\n const result = measuredItems.find((item) => item.id === id);\n if (result) {\n return result;\n }\n // else {\n // throw Error(`measuredItems do not contain an item with id #${id}`);\n // }\n};\n\nexport const removeDraggedItem = (\n measuredItems: MeasuredDropTarget[],\n index: number,\n) => {\n measuredItems.splice(index, 1);\n for (let i = index; i < measuredItems.length; i++) {\n measuredItems[i].currentIndex -= 1;\n }\n};\n\nexport type dropZone = \"start\" | \"end\";\n\nexport const measureDropTargets = (\n container: HTMLElement,\n orientation: orientationType,\n itemQuery?: string,\n viewportRange?: ViewportRange,\n draggedItemId?: string,\n) => {\n const dragThresholds: MeasuredDropTarget[] = [];\n const { DIMENSION } = dimensions(orientation);\n const children = Array.from(\n itemQuery ? container.querySelectorAll(itemQuery) : container.children,\n );\n\n const itemCount = children.length;\n const start =\n typeof viewportRange?.from === \"number\"\n ? viewportRange.atEnd\n ? Math.max(0, viewportRange.from - 1)\n : viewportRange.from\n : 0;\n const end =\n typeof viewportRange?.to === \"number\"\n ? Math.min(viewportRange.to + 2, itemCount - 1)\n : itemCount - 1;\n for (let index = start; index <= end; index++) {\n const element = children[index] as HTMLElement;\n const [start, size] = measureElementSizeAndPosition(element, DIMENSION);\n const isLast = index === itemCount - 1;\n const id = element.id;\n\n dragThresholds.push({\n currentIndex: index,\n id,\n index,\n isDraggedItem: draggedItemId === id,\n isLast,\n isOverflowIndicator: element.dataset.index === \"overflow\",\n element: element as HTMLElement,\n start,\n end: start + size,\n size,\n mid: start + size / 2,\n });\n }\n return dragThresholds;\n};\n\nexport const getIndexOfDraggedItem = (dropTargets: MeasuredDropTarget[]) =>\n dropTargets.findIndex((d) => d.isDraggedItem);\n\n// As the draggedItem is moved, displacing existing items, mirror\n// the movements within the dropTargets collection\nexport const mutateDropTargetsSwitchDropTargetPosition = (\n dropTargets: MeasuredDropTarget[],\n direction: Direction,\n) => {\n const indexOfDraggedItem = getIndexOfDraggedItem(dropTargets);\n const indexOfTarget =\n direction === \"fwd\" ? indexOfDraggedItem + 1 : indexOfDraggedItem - 1;\n\n if (indexOfTarget < 0 || indexOfTarget >= dropTargets.length) {\n throw Error(\"switchDropTargetPosition index out of range\");\n }\n\n const draggedItem = dropTargets.at(indexOfDraggedItem) as MeasuredDropTarget;\n const targetItem = dropTargets.at(indexOfTarget) as MeasuredDropTarget;\n\n const diff = targetItem.size - draggedItem.size;\n\n if (direction === \"fwd\") {\n const draggedStart = targetItem.start + diff;\n const draggedEnd = targetItem.end;\n\n const newDraggedItem = {\n ...draggedItem,\n start: draggedStart,\n mid: Math.floor(draggedStart + (draggedEnd - draggedStart) / 2),\n end: draggedEnd,\n } as MeasuredDropTarget;\n\n const targetStart = draggedItem.start;\n const targetEnd = draggedItem.end + diff;\n\n const newTargetItem = {\n ...targetItem,\n start: targetStart,\n mid: Math.floor(targetStart + (targetEnd - targetStart) / 2),\n end: targetEnd,\n } as MeasuredDropTarget;\n dropTargets.splice(indexOfDraggedItem, 2, newTargetItem, newDraggedItem);\n } else {\n const draggedStart = targetItem.start;\n const draggedEnd = targetItem.end - diff;\n\n const newDraggedItem = {\n ...draggedItem,\n start: draggedStart,\n mid: Math.floor(draggedStart + (draggedEnd - draggedStart) / 2),\n end: draggedEnd,\n } as MeasuredDropTarget;\n\n const targetStart = draggedItem.start - diff;\n const targetEnd = draggedItem.end;\n\n const newTargetItem = {\n ...targetItem,\n start: targetStart,\n mid: Math.floor(targetStart + (targetEnd - targetStart) / 2),\n end: targetEnd,\n } as MeasuredDropTarget;\n dropTargets.splice(indexOfTarget, 2, newDraggedItem, newTargetItem);\n }\n};\n\nexport const getNextDropTarget = (\n dropTargets: MeasuredDropTarget[],\n pos: number,\n draggedItemSize: number,\n mouseMoveDirection: Direction,\n): MeasuredDropTarget => {\n const len = dropTargets.length;\n const indexOfDraggedItem = getIndexOfDraggedItem(dropTargets);\n // draggedItem will be undefined if we are handling an external drag\n const draggedItem = dropTargets[indexOfDraggedItem];\n if (mouseMoveDirection === \"fwd\") {\n const leadingEdge = Math.round(pos + draggedItemSize);\n for (let index = len - 1; index >= 0; index--) {\n const dropTarget = dropTargets[index];\n if (leadingEdge > dropTarget.mid) {\n if (draggedItem && index < indexOfDraggedItem) {\n return draggedItem;\n } else {\n return dropTarget;\n }\n }\n }\n } else {\n const leadingEdge = Math.round(pos);\n for (let index = 0; index < len; index++) {\n const dropTarget = dropTargets[index];\n if (leadingEdge < dropTarget.mid) {\n if (index > indexOfDraggedItem) {\n return draggedItem;\n } else {\n return dropTarget;\n }\n }\n }\n }\n throw Error(\"no dropTarget identified\");\n};\n\n/**\n * An item within a scrollable container might have a width or height greater than that of\n * the container. If we drag such an item, we don't want the draggable to be larger than\n * the container.\n */\nexport function constrainRect(targetRect: Rect, constraintRect: Rect): Rect {\n const { height, left, top, width } = targetRect;\n const { height: constrainedHeight, width: constrainedWidth } = constraintRect;\n return {\n height: Math.min(height, constrainedHeight),\n left,\n top,\n width: Math.min(width, constrainedWidth),\n };\n}\n\nexport const dropTargetsDebugString = (dropTargets: MeasuredDropTarget[]) =>\n dropTargets\n .map(\n (d, i) =>\n `\\n${d.isDraggedItem ? \"*\" : \" \"}[${i}] width : ${Math.floor(\n d.size,\n )} ${Math.floor(d.start)} - ${Math.floor(d.end)} (mid ${Math.floor(\n d.mid,\n )}) ${d.element?.textContent} `,\n )\n .join(\"\");\n\nexport const getItemParentContainer = (\n container: HTMLElement | null,\n itemQuery: string,\n) => {\n const firstItem = container?.querySelector(\n `${itemQuery}:not([aria-hidden=\"true\"])`,\n );\n if (firstItem) {\n // generally, we expect the immediateParent to be a contentContainer, the\n // parent of that will be the scrollable container. This may or may not be\n // the outer container (likely not)\n return firstItem.parentElement;\n } else {\n return null;\n }\n};\n\nexport const getScrollableContainer = (\n container: HTMLElement | null,\n itemQuery: string,\n) => {\n const immediateParent = getItemParentContainer(container, itemQuery);\n if (immediateParent === container) {\n return container;\n } else {\n return immediateParent?.parentElement as HTMLElement;\n }\n};\n\nexport const isContainerScrollable = (\n scrollableContainer: HTMLElement | null,\n orientation: orientationType,\n) => {\n if (scrollableContainer === null) {\n return false;\n } else {\n const { SCROLL_SIZE, CLIENT_SIZE } = dimensions(orientation);\n const { [SCROLL_SIZE]: scrollSize, [CLIENT_SIZE]: clientSize } =\n scrollableContainer;\n return scrollSize > clientSize;\n }\n};\n"],"names":["start"],"mappings":"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"}
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
import { useRef, useCallback } from 'react';
|
|
2
|
-
import { dimensions } from './drop-target-utils.js';
|
|
3
|
-
|
|
4
|
-
const useAutoScroll = ({
|
|
5
|
-
containerRef,
|
|
6
|
-
onScrollingStopped,
|
|
7
|
-
orientation = "vertical"
|
|
8
|
-
}) => {
|
|
9
|
-
const scrollTimer = useRef(null);
|
|
10
|
-
const isScrolling = useRef(false);
|
|
11
|
-
const scrollPosRef = useRef(0);
|
|
12
|
-
const lastScrollDirectionRef = useRef("fwd");
|
|
13
|
-
const stopScrolling = useCallback(
|
|
14
|
-
(atEnd = false) => {
|
|
15
|
-
if (scrollTimer.current !== null) {
|
|
16
|
-
clearTimeout(scrollTimer.current);
|
|
17
|
-
scrollTimer.current = null;
|
|
18
|
-
}
|
|
19
|
-
isScrolling.current = false;
|
|
20
|
-
onScrollingStopped?.(
|
|
21
|
-
lastScrollDirectionRef.current,
|
|
22
|
-
scrollPosRef.current,
|
|
23
|
-
atEnd
|
|
24
|
-
);
|
|
25
|
-
},
|
|
26
|
-
[onScrollingStopped]
|
|
27
|
-
);
|
|
28
|
-
const startScrolling = useCallback(
|
|
29
|
-
(direction, scrollRate, scrollUnit = 100) => {
|
|
30
|
-
const { current: container } = containerRef;
|
|
31
|
-
if (container) {
|
|
32
|
-
const { SCROLL_POS, SCROLL_SIZE, CLIENT_SIZE } = dimensions(orientation);
|
|
33
|
-
const {
|
|
34
|
-
[SCROLL_POS]: scrollPos,
|
|
35
|
-
[SCROLL_SIZE]: scrollSize,
|
|
36
|
-
[CLIENT_SIZE]: clientSize
|
|
37
|
-
} = container;
|
|
38
|
-
const maxScroll = direction === "fwd" ? scrollSize - clientSize - scrollPos : scrollPos;
|
|
39
|
-
const nextScroll = Math.min(maxScroll, scrollUnit);
|
|
40
|
-
if (direction === "fwd") {
|
|
41
|
-
lastScrollDirectionRef.current = "fwd";
|
|
42
|
-
container[SCROLL_POS] = scrollPosRef.current = scrollPos + nextScroll;
|
|
43
|
-
} else {
|
|
44
|
-
lastScrollDirectionRef.current = "bwd";
|
|
45
|
-
container[SCROLL_POS] = scrollPosRef.current = scrollPos - nextScroll;
|
|
46
|
-
}
|
|
47
|
-
if (nextScroll === maxScroll) {
|
|
48
|
-
requestAnimationFrame(() => {
|
|
49
|
-
stopScrolling(true);
|
|
50
|
-
});
|
|
51
|
-
} else {
|
|
52
|
-
isScrolling.current = true;
|
|
53
|
-
scrollTimer.current = window.setTimeout(() => {
|
|
54
|
-
startScrolling(direction, scrollRate, scrollUnit);
|
|
55
|
-
}, 100);
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
},
|
|
59
|
-
[containerRef, orientation, stopScrolling]
|
|
60
|
-
);
|
|
61
|
-
return {
|
|
62
|
-
isScrolling,
|
|
63
|
-
startScrolling,
|
|
64
|
-
stopScrolling
|
|
65
|
-
};
|
|
66
|
-
};
|
|
67
|
-
|
|
68
|
-
export { useAutoScroll };
|
|
69
|
-
//# sourceMappingURL=useAutoScroll.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useAutoScroll.js","sources":["../../../../packages/vuu-ui-controls/src/drag-drop/useAutoScroll.ts"],"sourcesContent":["import { RefObject, useCallback, useRef } from \"react\";\nimport { dimensions } from \"./drop-target-utils\";\n\nexport type ScrollStopHandler = (\n scrollDirection: \"fwd\" | \"bwd\",\n scrollPos: number,\n atEnd: boolean,\n) => void;\n\nexport const useAutoScroll = ({\n containerRef,\n onScrollingStopped,\n orientation = \"vertical\",\n}: {\n containerRef: RefObject<HTMLElement | null>;\n onScrollingStopped?: ScrollStopHandler;\n orientation?: \"horizontal\" | \"vertical\";\n}) => {\n const scrollTimer = useRef<number | null>(null);\n const isScrolling = useRef(false);\n const scrollPosRef = useRef(0);\n const lastScrollDirectionRef = useRef<\"fwd\" | \"bwd\">(\"fwd\");\n\n const stopScrolling = useCallback(\n (atEnd = false) => {\n if (scrollTimer.current !== null) {\n clearTimeout(scrollTimer.current);\n scrollTimer.current = null;\n }\n isScrolling.current = false;\n onScrollingStopped?.(\n lastScrollDirectionRef.current,\n scrollPosRef.current,\n atEnd,\n );\n },\n [onScrollingStopped],\n );\n\n const startScrolling = useCallback(\n (direction: \"fwd\" | \"bwd\", scrollRate: number, scrollUnit = 100) => {\n const { current: container } = containerRef;\n if (container) {\n const { SCROLL_POS, SCROLL_SIZE, CLIENT_SIZE } =\n dimensions(orientation);\n const {\n [SCROLL_POS]: scrollPos,\n [SCROLL_SIZE]: scrollSize,\n [CLIENT_SIZE]: clientSize,\n } = container;\n const maxScroll =\n direction === \"fwd\" ? scrollSize - clientSize - scrollPos : scrollPos;\n const nextScroll = Math.min(maxScroll, scrollUnit);\n\n if (direction === \"fwd\") {\n lastScrollDirectionRef.current = \"fwd\";\n container[SCROLL_POS as \"scrollTop\" | \"scrollLeft\"] =\n scrollPosRef.current = scrollPos + nextScroll;\n } else {\n lastScrollDirectionRef.current = \"bwd\";\n container[SCROLL_POS as \"scrollTop\" | \"scrollLeft\"] =\n scrollPosRef.current = scrollPos - nextScroll;\n }\n\n if (nextScroll === maxScroll) {\n // delay this to allow any scroll listeners to do their work\n requestAnimationFrame(() => {\n stopScrolling(true);\n });\n } else {\n isScrolling.current = true;\n scrollTimer.current = window.setTimeout(() => {\n startScrolling(direction, scrollRate, scrollUnit);\n }, 100);\n }\n }\n },\n [containerRef, orientation, stopScrolling],\n );\n\n return {\n isScrolling,\n startScrolling,\n stopScrolling,\n };\n};\n"],"names":[],"mappings":";;;AASO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,YAAA;AAAA,EACA,kBAAA;AAAA,EACA,WAAc,GAAA;AAChB,CAIM,KAAA;AACJ,EAAM,MAAA,WAAA,GAAc,OAAsB,IAAI,CAAA;AAC9C,EAAM,MAAA,WAAA,GAAc,OAAO,KAAK,CAAA;AAChC,EAAM,MAAA,YAAA,GAAe,OAAO,CAAC,CAAA;AAC7B,EAAM,MAAA,sBAAA,GAAyB,OAAsB,KAAK,CAAA;AAE1D,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,QAAQ,KAAU,KAAA;AACjB,MAAI,IAAA,WAAA,CAAY,YAAY,IAAM,EAAA;AAChC,QAAA,YAAA,CAAa,YAAY,OAAO,CAAA;AAChC,QAAA,WAAA,CAAY,OAAU,GAAA,IAAA;AAAA;AAExB,MAAA,WAAA,CAAY,OAAU,GAAA,KAAA;AACtB,MAAA,kBAAA;AAAA,QACE,sBAAuB,CAAA,OAAA;AAAA,QACvB,YAAa,CAAA,OAAA;AAAA,QACb;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,kBAAkB;AAAA,GACrB;AAEA,EAAA,MAAM,cAAiB,GAAA,WAAA;AAAA,IACrB,CAAC,SAAA,EAA0B,UAAoB,EAAA,UAAA,GAAa,GAAQ,KAAA;AAClE,MAAM,MAAA,EAAE,OAAS,EAAA,SAAA,EAAc,GAAA,YAAA;AAC/B,MAAA,IAAI,SAAW,EAAA;AACb,QAAA,MAAM,EAAE,UAAY,EAAA,WAAA,EAAa,WAAY,EAAA,GAC3C,WAAW,WAAW,CAAA;AACxB,QAAM,MAAA;AAAA,UACJ,CAAC,UAAU,GAAG,SAAA;AAAA,UACd,CAAC,WAAW,GAAG,UAAA;AAAA,UACf,CAAC,WAAW,GAAG;AAAA,SACb,GAAA,SAAA;AACJ,QAAA,MAAM,SACJ,GAAA,SAAA,KAAc,KAAQ,GAAA,UAAA,GAAa,aAAa,SAAY,GAAA,SAAA;AAC9D,QAAA,MAAM,UAAa,GAAA,IAAA,CAAK,GAAI,CAAA,SAAA,EAAW,UAAU,CAAA;AAEjD,QAAA,IAAI,cAAc,KAAO,EAAA;AACvB,UAAA,sBAAA,CAAuB,OAAU,GAAA,KAAA;AACjC,UAAA,SAAA,CAAU,UAAwC,CAAA,GAChD,YAAa,CAAA,OAAA,GAAU,SAAY,GAAA,UAAA;AAAA,SAChC,MAAA;AACL,UAAA,sBAAA,CAAuB,OAAU,GAAA,KAAA;AACjC,UAAA,SAAA,CAAU,UAAwC,CAAA,GAChD,YAAa,CAAA,OAAA,GAAU,SAAY,GAAA,UAAA;AAAA;AAGvC,QAAA,IAAI,eAAe,SAAW,EAAA;AAE5B,UAAA,qBAAA,CAAsB,MAAM;AAC1B,YAAA,aAAA,CAAc,IAAI,CAAA;AAAA,WACnB,CAAA;AAAA,SACI,MAAA;AACL,UAAA,WAAA,CAAY,OAAU,GAAA,IAAA;AACtB,UAAY,WAAA,CAAA,OAAA,GAAU,MAAO,CAAA,UAAA,CAAW,MAAM;AAC5C,YAAe,cAAA,CAAA,SAAA,EAAW,YAAY,UAAU,CAAA;AAAA,aAC/C,GAAG,CAAA;AAAA;AACR;AACF,KACF;AAAA,IACA,CAAC,YAAc,EAAA,WAAA,EAAa,aAAa;AAAA,GAC3C;AAEA,EAAO,OAAA;AAAA,IACL,WAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
|
|
@@ -1,158 +0,0 @@
|
|
|
1
|
-
import { useRef, useMemo, useCallback } from 'react';
|
|
2
|
-
import { createDragSpacer } from './Draggable.js';
|
|
3
|
-
import { mutateDropTargetsSwitchDropTargetPosition } from './drop-target-utils.js';
|
|
4
|
-
|
|
5
|
-
const useDragDisplacers = (orientation = "horizontal") => {
|
|
6
|
-
const animationFrame = useRef(0);
|
|
7
|
-
const transitioning = useRef(false);
|
|
8
|
-
const spacers = useMemo(
|
|
9
|
-
// We only need to listen for transition end on one of the spacers
|
|
10
|
-
() => [createDragSpacer(transitioning), createDragSpacer()],
|
|
11
|
-
[]
|
|
12
|
-
);
|
|
13
|
-
const animateTransition = useCallback(
|
|
14
|
-
(size, propertyName = "width") => {
|
|
15
|
-
const [spacer1, spacer2] = spacers;
|
|
16
|
-
animationFrame.current = requestAnimationFrame(() => {
|
|
17
|
-
transitioning.current = true;
|
|
18
|
-
spacer1.style.cssText = `${propertyName}: 0px`;
|
|
19
|
-
spacer2.style.cssText = `${propertyName}: ${size}px`;
|
|
20
|
-
spacers[0] = spacer2;
|
|
21
|
-
spacers[1] = spacer1;
|
|
22
|
-
});
|
|
23
|
-
},
|
|
24
|
-
[spacers]
|
|
25
|
-
);
|
|
26
|
-
const clearSpacers = useCallback(
|
|
27
|
-
(useTransition = false) => {
|
|
28
|
-
if (useTransition === true) {
|
|
29
|
-
const [spacer] = spacers;
|
|
30
|
-
const cleanup = () => {
|
|
31
|
-
spacer.removeEventListener("transitionend", cleanup);
|
|
32
|
-
clearSpacers();
|
|
33
|
-
};
|
|
34
|
-
const propertyName = orientation === "horizontal" ? "width" : "height";
|
|
35
|
-
spacer.addEventListener("transitionend", cleanup);
|
|
36
|
-
animateTransition(0, propertyName);
|
|
37
|
-
} else {
|
|
38
|
-
spacers.forEach((spacer) => spacer.remove());
|
|
39
|
-
}
|
|
40
|
-
},
|
|
41
|
-
[animateTransition, orientation, spacers]
|
|
42
|
-
);
|
|
43
|
-
const setTerminalSpacer = useCallback(
|
|
44
|
-
(container, position, size) => {
|
|
45
|
-
clearSpacers();
|
|
46
|
-
const propertyName = orientation === "horizontal" ? "width" : "height";
|
|
47
|
-
const [spacer] = spacers;
|
|
48
|
-
spacer.style.cssText = `${propertyName}: ${size}px`;
|
|
49
|
-
if (position === "start") {
|
|
50
|
-
container.firstChild?.before(spacer);
|
|
51
|
-
} else {
|
|
52
|
-
container.lastChild?.after(spacer);
|
|
53
|
-
}
|
|
54
|
-
},
|
|
55
|
-
[clearSpacers, orientation, spacers]
|
|
56
|
-
);
|
|
57
|
-
const cancelAnyPendingAnimation = useCallback(() => {
|
|
58
|
-
if (animationFrame.current) {
|
|
59
|
-
cancelAnimationFrame(animationFrame.current);
|
|
60
|
-
animationFrame.current = 0;
|
|
61
|
-
}
|
|
62
|
-
}, []);
|
|
63
|
-
const displaceItem = useCallback(
|
|
64
|
-
(dropTargets, dropTarget, size, useTransition = false, direction = "static") => {
|
|
65
|
-
if (dropTarget) {
|
|
66
|
-
const propertyName = orientation === "horizontal" ? "width" : "height";
|
|
67
|
-
const [spacer1, spacer2] = spacers;
|
|
68
|
-
cancelAnyPendingAnimation();
|
|
69
|
-
if (useTransition) {
|
|
70
|
-
if (transitioning.current) {
|
|
71
|
-
clearSpacers();
|
|
72
|
-
spacer1.style.cssText = `${propertyName}: ${size}px`;
|
|
73
|
-
spacer2.style.cssText = `${propertyName}: 0px`;
|
|
74
|
-
if (direction === "fwd") {
|
|
75
|
-
dropTarget.element.before(spacer1);
|
|
76
|
-
dropTarget.element.after(spacer2);
|
|
77
|
-
} else {
|
|
78
|
-
dropTarget.element.after(spacer1);
|
|
79
|
-
dropTarget.element.before(spacer2);
|
|
80
|
-
}
|
|
81
|
-
} else {
|
|
82
|
-
if (direction === "fwd") {
|
|
83
|
-
dropTarget.element.after(spacer2);
|
|
84
|
-
} else {
|
|
85
|
-
dropTarget.element.before(spacer2);
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
animateTransition(size, propertyName);
|
|
89
|
-
} else if (direction === "static") {
|
|
90
|
-
spacer1.style.cssText = `${propertyName}: ${size}px`;
|
|
91
|
-
dropTarget.element.before(spacer1);
|
|
92
|
-
} else {
|
|
93
|
-
throw Error(
|
|
94
|
-
"useDragDisplacers currently only supports noTransition for static displacement"
|
|
95
|
-
);
|
|
96
|
-
}
|
|
97
|
-
if (direction !== "static") {
|
|
98
|
-
mutateDropTargetsSwitchDropTargetPosition(dropTargets, direction);
|
|
99
|
-
}
|
|
100
|
-
return direction === "bwd" ? dropTarget.index : dropTarget.index + 1;
|
|
101
|
-
}
|
|
102
|
-
return -1;
|
|
103
|
-
},
|
|
104
|
-
[
|
|
105
|
-
animateTransition,
|
|
106
|
-
cancelAnyPendingAnimation,
|
|
107
|
-
clearSpacers,
|
|
108
|
-
orientation,
|
|
109
|
-
spacers
|
|
110
|
-
]
|
|
111
|
-
);
|
|
112
|
-
const displaceLastItem = useCallback(
|
|
113
|
-
(dropTargets, dropTarget, size, useTransition = false, direction = "static") => {
|
|
114
|
-
const propertyName = orientation === "horizontal" ? "width" : "height";
|
|
115
|
-
const [spacer1, spacer2] = spacers;
|
|
116
|
-
cancelAnyPendingAnimation();
|
|
117
|
-
if (useTransition) {
|
|
118
|
-
if (transitioning.current) {
|
|
119
|
-
clearSpacers();
|
|
120
|
-
spacer1.style.cssText = `${propertyName}: ${size}px`;
|
|
121
|
-
spacer2.style.cssText = `${propertyName}: 0px`;
|
|
122
|
-
dropTarget.element.before(spacer1);
|
|
123
|
-
dropTarget.element.after(spacer2);
|
|
124
|
-
} else {
|
|
125
|
-
if (direction === "fwd") {
|
|
126
|
-
dropTarget.element.after(spacer2);
|
|
127
|
-
} else {
|
|
128
|
-
dropTarget.element.before(spacer2);
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
animateTransition(size, propertyName);
|
|
132
|
-
} else {
|
|
133
|
-
spacer1.style.cssText = `${propertyName}: ${size}px`;
|
|
134
|
-
dropTarget.element.after(spacer1);
|
|
135
|
-
}
|
|
136
|
-
if (direction !== "static") {
|
|
137
|
-
mutateDropTargetsSwitchDropTargetPosition(dropTargets, direction);
|
|
138
|
-
}
|
|
139
|
-
return dropTarget.index;
|
|
140
|
-
},
|
|
141
|
-
[
|
|
142
|
-
animateTransition,
|
|
143
|
-
cancelAnyPendingAnimation,
|
|
144
|
-
clearSpacers,
|
|
145
|
-
orientation,
|
|
146
|
-
spacers
|
|
147
|
-
]
|
|
148
|
-
);
|
|
149
|
-
return {
|
|
150
|
-
displaceItem,
|
|
151
|
-
displaceLastItem,
|
|
152
|
-
clearSpacers,
|
|
153
|
-
setTerminalSpacer
|
|
154
|
-
};
|
|
155
|
-
};
|
|
156
|
-
|
|
157
|
-
export { useDragDisplacers };
|
|
158
|
-
//# sourceMappingURL=useDragDisplacers.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useDragDisplacers.js","sources":["../../../../packages/vuu-ui-controls/src/drag-drop/useDragDisplacers.ts"],"sourcesContent":["import type { orientationType } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useMemo, useRef } from \"react\";\nimport { Direction } from \"./dragDropTypes\";\nimport { createDragSpacer as createDragDisplacer } from \"./Draggable\";\nimport {\n MeasuredDropTarget,\n mutateDropTargetsSwitchDropTargetPosition,\n} from \"./drop-target-utils\";\n\nexport type DragDisplacersHookResult = {\n displaceItem: (\n dropTargets: MeasuredDropTarget[],\n dropTarget: MeasuredDropTarget,\n size: number,\n useTransition?: boolean,\n direction?: Direction | \"static\",\n orientation?: \"horizontal\" | \"vertical\",\n ) => number;\n displaceLastItem: (\n dropTargets: MeasuredDropTarget[],\n dropTarget: MeasuredDropTarget,\n size: number,\n useTransition?: boolean,\n direction?: Direction | \"static\",\n orientation?: \"horizontal\" | \"vertical\",\n ) => number;\n clearSpacers: (useAnimation?: boolean) => void;\n /** Insert the sized spacer at start or end of collection */\n setTerminalSpacer: (\n container: HTMLElement,\n position: \"start\" | \"end\",\n size: number,\n ) => void;\n};\n\nexport type DragDisplacersHook = (\n orientation: orientationType,\n) => DragDisplacersHookResult;\n/**\n * Manage a pair of displacer elements to smoothly display a moving gap between\n * list items of any kind. Designed to be used in a drag drop operation. The 'static'\n * direction option should be used at drag start or following scroll.\n */\nexport const useDragDisplacers: DragDisplacersHook = (\n orientation = \"horizontal\",\n) => {\n const animationFrame = useRef(0);\n const transitioning = useRef(false);\n\n const spacers = useMemo(\n // We only need to listen for transition end on one of the spacers\n () => [createDragDisplacer(transitioning), createDragDisplacer()],\n [],\n );\n\n const animateTransition = useCallback(\n (size: number, propertyName = \"width\") => {\n const [spacer1, spacer2] = spacers;\n animationFrame.current = requestAnimationFrame(() => {\n transitioning.current = true;\n spacer1.style.cssText = `${propertyName}: 0px`;\n spacer2.style.cssText = `${propertyName}: ${size}px`;\n spacers[0] = spacer2;\n spacers[1] = spacer1;\n });\n },\n [spacers],\n );\n\n const clearSpacers = useCallback(\n (useTransition = false) => {\n if (useTransition === true) {\n const [spacer] = spacers;\n const cleanup = () => {\n spacer.removeEventListener(\"transitionend\", cleanup);\n clearSpacers();\n };\n const propertyName = orientation === \"horizontal\" ? \"width\" : \"height\";\n spacer.addEventListener(\"transitionend\", cleanup);\n animateTransition(0, propertyName);\n } else {\n spacers.forEach((spacer) => spacer.remove());\n }\n },\n [animateTransition, orientation, spacers],\n );\n\n const setTerminalSpacer = useCallback(\n (container: HTMLElement, position: \"start\" | \"end\", size: number) => {\n clearSpacers();\n\n const propertyName = orientation === \"horizontal\" ? \"width\" : \"height\";\n const [spacer] = spacers;\n spacer.style.cssText = `${propertyName}: ${size}px`;\n\n if (position === \"start\") {\n container.firstChild?.before(spacer);\n } else {\n container.lastChild?.after(spacer);\n }\n },\n [clearSpacers, orientation, spacers],\n );\n\n const cancelAnyPendingAnimation = useCallback(() => {\n if (animationFrame.current) {\n cancelAnimationFrame(animationFrame.current);\n animationFrame.current = 0;\n }\n }, []);\n\n const displaceItem = useCallback(\n (\n dropTargets: MeasuredDropTarget[],\n dropTarget: MeasuredDropTarget,\n size: number,\n useTransition = false,\n direction: Direction | \"static\" = \"static\",\n ): number => {\n if (dropTarget) {\n const propertyName = orientation === \"horizontal\" ? \"width\" : \"height\";\n const [spacer1, spacer2] = spacers;\n cancelAnyPendingAnimation();\n if (useTransition) {\n if (transitioning.current) {\n clearSpacers();\n spacer1.style.cssText = `${propertyName}: ${size}px`;\n spacer2.style.cssText = `${propertyName}: 0px`;\n if (direction === \"fwd\") {\n dropTarget.element.before(spacer1);\n dropTarget.element.after(spacer2);\n } else {\n dropTarget.element.after(spacer1);\n dropTarget.element.before(spacer2);\n }\n } else {\n if (direction === \"fwd\") {\n dropTarget.element.after(spacer2);\n } else {\n dropTarget.element.before(spacer2);\n }\n }\n animateTransition(size, propertyName);\n } else if (direction === \"static\") {\n spacer1.style.cssText = `${propertyName}: ${size}px`;\n dropTarget.element.before(spacer1);\n } else {\n throw Error(\n \"useDragDisplacers currently only supports noTransition for static displacement\",\n );\n }\n if (direction !== \"static\") {\n mutateDropTargetsSwitchDropTargetPosition(dropTargets, direction);\n }\n return direction === \"bwd\" ? dropTarget.index : dropTarget.index + 1;\n }\n return -1;\n },\n [\n animateTransition,\n cancelAnyPendingAnimation,\n clearSpacers,\n orientation,\n spacers,\n ],\n );\n const displaceLastItem = useCallback(\n (\n dropTargets: MeasuredDropTarget[],\n dropTarget: MeasuredDropTarget,\n size: number,\n useTransition = false,\n direction: Direction | \"static\" = \"static\",\n ): number => {\n const propertyName = orientation === \"horizontal\" ? \"width\" : \"height\";\n const [spacer1, spacer2] = spacers;\n\n cancelAnyPendingAnimation();\n\n if (useTransition) {\n if (transitioning.current) {\n clearSpacers();\n spacer1.style.cssText = `${propertyName}: ${size}px`;\n spacer2.style.cssText = `${propertyName}: 0px`;\n dropTarget.element.before(spacer1);\n dropTarget.element.after(spacer2);\n } else {\n if (direction === \"fwd\") {\n dropTarget.element.after(spacer2);\n } else {\n dropTarget.element.before(spacer2);\n }\n }\n animateTransition(size, propertyName);\n } else {\n spacer1.style.cssText = `${propertyName}: ${size}px`;\n dropTarget.element.after(spacer1);\n }\n\n if (direction !== \"static\") {\n mutateDropTargetsSwitchDropTargetPosition(dropTargets, direction);\n }\n\n return dropTarget.index;\n },\n [\n animateTransition,\n cancelAnyPendingAnimation,\n clearSpacers,\n orientation,\n spacers,\n ],\n );\n\n return {\n displaceItem,\n displaceLastItem,\n clearSpacers,\n setTerminalSpacer,\n };\n};\n"],"names":["createDragDisplacer"],"mappings":"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"}
|