@vuu-ui/vuu-ui-controls 0.13.2 → 0.13.4
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/cjs/column-picker/ColumnPicker.js +2 -2
- package/cjs/column-picker/ColumnPicker.js.map +1 -1
- package/cjs/column-picker/ColumnSearch.js +4 -24
- package/cjs/column-picker/ColumnSearch.js.map +1 -1
- package/cjs/context-panel-provider/ContextPanelProvider.js +55 -0
- package/cjs/context-panel-provider/ContextPanelProvider.js.map +1 -0
- package/cjs/index.js +6 -80
- package/cjs/index.js.map +1 -1
- package/cjs/sortable-list/SortableList.js +38 -0
- package/cjs/sortable-list/SortableList.js.map +1 -0
- package/cjs/toolbar/Toolbar.js.map +1 -1
- package/cjs/toolbar/useSelection.js +0 -1
- package/cjs/toolbar/useSelection.js.map +1 -1
- package/esm/column-picker/ColumnPicker.js +2 -2
- package/esm/column-picker/ColumnPicker.js.map +1 -1
- package/esm/column-picker/ColumnSearch.js +5 -25
- package/esm/column-picker/ColumnSearch.js.map +1 -1
- package/esm/context-panel-provider/ContextPanelProvider.js +51 -0
- package/esm/context-panel-provider/ContextPanelProvider.js.map +1 -0
- package/esm/index.js +2 -21
- package/esm/index.js.map +1 -1
- package/esm/sortable-list/SortableList.js +35 -0
- package/esm/sortable-list/SortableList.js.map +1 -0
- package/esm/toolbar/Toolbar.js.map +1 -1
- package/esm/toolbar/useSelection.js +0 -1
- package/esm/toolbar/useSelection.js.map +1 -1
- package/package.json +15 -17
- package/cjs/common-hooks/collectionProvider.js +0 -24
- package/cjs/common-hooks/collectionProvider.js.map +0 -1
- package/cjs/common-hooks/isPlainObject.js +0 -6
- package/cjs/common-hooks/isPlainObject.js.map +0 -1
- package/cjs/common-hooks/itemToString.js +0 -24
- package/cjs/common-hooks/itemToString.js.map +0 -1
- package/cjs/common-hooks/useCollectionItems.js +0 -309
- package/cjs/common-hooks/useCollectionItems.js.map +0 -1
- package/cjs/common-hooks/useSelection.js +0 -212
- package/cjs/common-hooks/useSelection.js.map +0 -1
- package/cjs/list/Highlighter.css.js +0 -6
- package/cjs/list/Highlighter.css.js.map +0 -1
- package/cjs/list/Highlighter.js +0 -36
- package/cjs/list/Highlighter.js.map +0 -1
- package/cjs/list/List.css.js +0 -6
- package/cjs/list/List.css.js.map +0 -1
- package/cjs/list/List.js +0 -317
- package/cjs/list/List.js.map +0 -1
- package/cjs/list/ListItem.css.js +0 -6
- package/cjs/list/ListItem.css.js.map +0 -1
- package/cjs/list/ListItem.js +0 -84
- package/cjs/list/ListItem.js.map +0 -1
- package/cjs/list/ListItemGroup.js +0 -6
- package/cjs/list/ListItemGroup.js.map +0 -1
- package/cjs/list/ListItemHeader.js +0 -6
- package/cjs/list/ListItemHeader.js.map +0 -1
- package/cjs/list/RadioIcon.css.js +0 -6
- package/cjs/list/RadioIcon.css.js.map +0 -1
- package/cjs/list/RadioIcon.js +0 -27
- package/cjs/list/RadioIcon.js.map +0 -1
- package/cjs/list/common-hooks/keyUtils.js +0 -78
- package/cjs/list/common-hooks/keyUtils.js.map +0 -1
- package/cjs/list/common-hooks/list-dom-utils.js +0 -25
- package/cjs/list/common-hooks/list-dom-utils.js.map +0 -1
- package/cjs/list/common-hooks/useCollapsibleGroups.js +0 -72
- package/cjs/list/common-hooks/useCollapsibleGroups.js.map +0 -1
- package/cjs/list/common-hooks/useImperativeScrollingAPI.js +0 -52
- package/cjs/list/common-hooks/useImperativeScrollingAPI.js.map +0 -1
- package/cjs/list/common-hooks/useKeyboardNavigation.js +0 -289
- package/cjs/list/common-hooks/useKeyboardNavigation.js.map +0 -1
- package/cjs/list/common-hooks/useTypeahead.js +0 -74
- package/cjs/list/common-hooks/useTypeahead.js.map +0 -1
- package/cjs/list/common-hooks/useViewportTracking.js +0 -133
- package/cjs/list/common-hooks/useViewportTracking.js.map +0 -1
- package/cjs/list/common-hooks/utils/collection-item-utils.js +0 -182
- package/cjs/list/common-hooks/utils/collection-item-utils.js.map +0 -1
- package/cjs/list/common-hooks/utils/filter-utils.js +0 -11
- package/cjs/list/common-hooks/utils/filter-utils.js.map +0 -1
- package/cjs/list/common-hooks/utils/isSelected.js +0 -9
- package/cjs/list/common-hooks/utils/isSelected.js.map +0 -1
- package/cjs/list/useList.js +0 -278
- package/cjs/list/useList.js.map +0 -1
- package/cjs/list/useListDrop.js +0 -92
- package/cjs/list/useListDrop.js.map +0 -1
- package/cjs/list/useListHeight.js +0 -77
- package/cjs/list/useListHeight.js.map +0 -1
- package/cjs/list/useScrollPosition.js +0 -74
- package/cjs/list/useScrollPosition.js.map +0 -1
- package/esm/common-hooks/collectionProvider.js +0 -20
- package/esm/common-hooks/collectionProvider.js.map +0 -1
- package/esm/common-hooks/isPlainObject.js +0 -4
- package/esm/common-hooks/isPlainObject.js.map +0 -1
- package/esm/common-hooks/itemToString.js +0 -22
- package/esm/common-hooks/itemToString.js.map +0 -1
- package/esm/common-hooks/useCollectionItems.js +0 -307
- package/esm/common-hooks/useCollectionItems.js.map +0 -1
- package/esm/common-hooks/useSelection.js +0 -205
- package/esm/common-hooks/useSelection.js.map +0 -1
- package/esm/list/Highlighter.css.js +0 -4
- package/esm/list/Highlighter.css.js.map +0 -1
- package/esm/list/Highlighter.js +0 -34
- package/esm/list/Highlighter.js.map +0 -1
- package/esm/list/List.css.js +0 -4
- package/esm/list/List.css.js.map +0 -1
- package/esm/list/List.js +0 -315
- package/esm/list/List.js.map +0 -1
- package/esm/list/ListItem.css.js +0 -4
- package/esm/list/ListItem.css.js.map +0 -1
- package/esm/list/ListItem.js +0 -81
- package/esm/list/ListItem.js.map +0 -1
- package/esm/list/ListItemGroup.js +0 -4
- package/esm/list/ListItemGroup.js.map +0 -1
- package/esm/list/ListItemHeader.js +0 -4
- package/esm/list/ListItemHeader.js.map +0 -1
- package/esm/list/RadioIcon.css.js +0 -4
- package/esm/list/RadioIcon.css.js.map +0 -1
- package/esm/list/RadioIcon.js +0 -25
- package/esm/list/RadioIcon.js.map +0 -1
- package/esm/list/common-hooks/keyUtils.js +0 -64
- package/esm/list/common-hooks/keyUtils.js.map +0 -1
- package/esm/list/common-hooks/list-dom-utils.js +0 -19
- package/esm/list/common-hooks/list-dom-utils.js.map +0 -1
- package/esm/list/common-hooks/useCollapsibleGroups.js +0 -70
- package/esm/list/common-hooks/useCollapsibleGroups.js.map +0 -1
- package/esm/list/common-hooks/useImperativeScrollingAPI.js +0 -50
- package/esm/list/common-hooks/useImperativeScrollingAPI.js.map +0 -1
- package/esm/list/common-hooks/useKeyboardNavigation.js +0 -286
- package/esm/list/common-hooks/useKeyboardNavigation.js.map +0 -1
- package/esm/list/common-hooks/useTypeahead.js +0 -72
- package/esm/list/common-hooks/useTypeahead.js.map +0 -1
- package/esm/list/common-hooks/useViewportTracking.js +0 -131
- package/esm/list/common-hooks/useViewportTracking.js.map +0 -1
- package/esm/list/common-hooks/utils/collection-item-utils.js +0 -168
- package/esm/list/common-hooks/utils/collection-item-utils.js.map +0 -1
- package/esm/list/common-hooks/utils/filter-utils.js +0 -8
- package/esm/list/common-hooks/utils/filter-utils.js.map +0 -1
- package/esm/list/common-hooks/utils/isSelected.js +0 -7
- package/esm/list/common-hooks/utils/isSelected.js.map +0 -1
- package/esm/list/useList.js +0 -276
- package/esm/list/useList.js.map +0 -1
- package/esm/list/useListDrop.js +0 -90
- package/esm/list/useListDrop.js.map +0 -1
- package/esm/list/useListHeight.js +0 -75
- package/esm/list/useListHeight.js.map +0 -1
- package/esm/list/useScrollPosition.js +0 -72
- package/esm/list/useScrollPosition.js.map +0 -1
- package/types/calendar/Calendar.d.ts +0 -13
- package/types/calendar/index.d.ts +0 -4
- package/types/calendar/internal/CalendarCarousel.d.ts +0 -3
- package/types/calendar/internal/CalendarContext.d.ts +0 -8
- package/types/calendar/internal/CalendarDay.d.ts +0 -14
- package/types/calendar/internal/CalendarMonth.d.ts +0 -10
- package/types/calendar/internal/CalendarNavigation.d.ts +0 -16
- package/types/calendar/internal/CalendarWeekHeader.d.ts +0 -3
- package/types/calendar/internal/useFocusManagement.d.ts +0 -9
- package/types/calendar/internal/utils.d.ts +0 -15
- package/types/calendar/useCalendar.d.ts +0 -54
- package/types/calendar/useCalendarDay.d.ts +0 -22
- package/types/calendar/useSelection.d.ts +0 -78
- package/types/column-picker/ColumnPicker.d.ts +0 -7
- package/types/column-picker/ColumnSearch.d.ts +0 -6
- package/types/column-picker/index.d.ts +0 -2
- package/types/column-picker/moving-window.d.ts +0 -14
- package/types/common-hooks/collectionProvider.d.ts +0 -13
- package/types/common-hooks/collectionTypes.d.ts +0 -58
- package/types/common-hooks/index.d.ts +0 -8
- package/types/common-hooks/isPlainObject.d.ts +0 -1
- package/types/common-hooks/itemToString.d.ts +0 -2
- package/types/common-hooks/navigationTypes.d.ts +0 -36
- package/types/common-hooks/selectionTypes.d.ts +0 -70
- package/types/common-hooks/use-resize-observer.d.ts +0 -16
- package/types/common-hooks/useCollectionItems.d.ts +0 -2
- package/types/common-hooks/useControlled.d.ts +0 -24
- package/types/common-hooks/useSelection.d.ts +0 -8
- package/types/cycle-state-button/CycleStateButton.d.ts +0 -11
- package/types/cycle-state-button/index.d.ts +0 -1
- package/types/date-input/DateInput.d.ts +0 -60
- package/types/date-input/index.d.ts +0 -1
- package/types/date-picker/DatePicker.d.ts +0 -66
- package/types/date-picker/DatePickerContext.d.ts +0 -19
- package/types/date-picker/DatePickerPanel.d.ts +0 -10
- package/types/date-picker/index.d.ts +0 -1
- package/types/drag-drop/DragDropProvider.d.ts +0 -38
- package/types/drag-drop/DragDropState.d.ts +0 -15
- package/types/drag-drop/Draggable.d.ts +0 -13
- package/types/drag-drop/DropIndicator.d.ts +0 -5
- package/types/drag-drop/dragDropTypes.d.ts +0 -100
- package/types/drag-drop/drop-target-utils.d.ts +0 -82
- package/types/drag-drop/index.d.ts +0 -6
- package/types/drag-drop/useAutoScroll.d.ts +0 -11
- package/types/drag-drop/useDragDisplacers.d.ts +0 -17
- package/types/drag-drop/useDragDrop.d.ts +0 -2
- package/types/drag-drop/useDragDropCopy.d.ts +0 -6
- package/types/drag-drop/useDragDropIndicator.d.ts +0 -2
- package/types/drag-drop/useDragDropNaturalMovement.d.ts +0 -2
- package/types/drag-drop/useDropIndicator.d.ts +0 -8
- package/types/drag-drop/useGlobalDragDrop.d.ts +0 -11
- package/types/drag-drop/useTransition.d.ts +0 -3
- package/types/editable/index.d.ts +0 -1
- package/types/editable/useEditableText.d.ts +0 -19
- package/types/editable-label/EditableLabel.d.ts +0 -19
- package/types/editable-label/index.d.ts +0 -1
- package/types/expando-input/ExpandoInput.d.ts +0 -6
- package/types/expando-input/index.d.ts +0 -1
- package/types/icon-button/Icon.d.ts +0 -6
- package/types/icon-button/IconButton.d.ts +0 -6
- package/types/icon-button/ToggleIconButton.d.ts +0 -5
- package/types/icon-button/index.d.ts +0 -3
- package/types/index.d.ts +0 -27
- package/types/instrument-picker/SearchCell.d.ts +0 -2
- package/types/instrument-picker/TablePicker.d.ts +0 -10
- package/types/instrument-picker/index.d.ts +0 -1
- package/types/instrument-picker/moving-window.d.ts +0 -14
- package/types/instrument-picker/useDataSource.d.ts +0 -6
- package/types/instrument-picker/useTablePicker.d.ts +0 -47
- package/types/list/ChevronIcon.d.ts +0 -7
- package/types/list/Highlighter.d.ts +0 -6
- package/types/list/List.d.ts +0 -6
- package/types/list/ListItem.d.ts +0 -6
- package/types/list/ListItemGroup.d.ts +0 -6
- package/types/list/ListItemHeader.d.ts +0 -5
- package/types/list/RadioIcon.d.ts +0 -4
- package/types/list/common-hooks/index.d.ts +0 -10
- package/types/list/common-hooks/keyUtils.d.ts +0 -14
- package/types/list/common-hooks/list-dom-utils.d.ts +0 -5
- package/types/list/common-hooks/useCollapsibleGroups.d.ts +0 -14
- package/types/list/common-hooks/useImperativeScrollingAPI.d.ts +0 -14
- package/types/list/common-hooks/useKeyboardNavigation.d.ts +0 -3
- package/types/list/common-hooks/useTypeahead.d.ts +0 -14
- package/types/list/common-hooks/useViewportTracking.d.ts +0 -14
- package/types/list/common-hooks/utils/collection-item-utils.d.ts +0 -21
- package/types/list/common-hooks/utils/filter-utils.d.ts +0 -4
- package/types/list/common-hooks/utils/index.d.ts +0 -4
- package/types/list/common-hooks/utils/isSelected.d.ts +0 -2
- package/types/list/index.d.ts +0 -9
- package/types/list/keyset.d.ts +0 -9
- package/types/list/listTypes.d.ts +0 -200
- package/types/list/useList.d.ts +0 -3
- package/types/list/useListDrop.d.ts +0 -15
- package/types/list/useListHeight.d.ts +0 -19
- package/types/list/useScrollPosition.d.ts +0 -19
- package/types/measured-container/MeasuredContainer.d.ts +0 -14
- package/types/measured-container/index.d.ts +0 -2
- package/types/measured-container/useMeasuredContainer.d.ts +0 -23
- package/types/measured-container/useResizeObserver.d.ts +0 -15
- package/types/overflow-container/OverflowContainer.d.ts +0 -15
- package/types/overflow-container/index.d.ts +0 -2
- package/types/overflow-container/overflow-utils.d.ts +0 -48
- package/types/overflow-container/useOverflowContainer.d.ts +0 -19
- package/types/price-ticker/PriceTicker.d.ts +0 -7
- package/types/price-ticker/index.d.ts +0 -1
- package/types/split-button/SplitButton.d.ts +0 -11
- package/types/split-button/SplitStateButton.d.ts +0 -5
- package/types/split-button/index.d.ts +0 -2
- package/types/split-button/useSplitButton.d.ts +0 -311
- package/types/table-search/SearchCell.d.ts +0 -2
- package/types/table-search/TableSearch.d.ts +0 -9
- package/types/table-search/index.d.ts +0 -1
- package/types/table-search/moving-window.d.ts +0 -14
- package/types/table-search/useTableSearch.d.ts +0 -15
- package/types/tabs-next/TabBar.d.ts +0 -12
- package/types/tabs-next/TabListNext.d.ts +0 -12
- package/types/tabs-next/TabNext.d.ts +0 -12
- package/types/tabs-next/TabNextAction.d.ts +0 -5
- package/types/tabs-next/TabNextContext.d.ts +0 -12
- package/types/tabs-next/TabNextPanel.d.ts +0 -8
- package/types/tabs-next/TabNextTrigger.d.ts +0 -5
- package/types/tabs-next/TabOverflowList.d.ts +0 -11
- package/types/tabs-next/TabsNext.d.ts +0 -17
- package/types/tabs-next/TabsNextContext.d.ts +0 -21
- package/types/tabs-next/hooks/useCollection.d.ts +0 -18
- package/types/tabs-next/hooks/useFocusOutside.d.ts +0 -2
- package/types/tabs-next/hooks/useOverflow.d.ts +0 -11
- package/types/tabs-next/index.d.ts +0 -7
- package/types/tabstrip/Tab.d.ts +0 -27
- package/types/tabstrip/TabMenu.d.ts +0 -23
- package/types/tabstrip/TabMenuOptions.d.ts +0 -10
- package/types/tabstrip/TabsTypes.d.ts +0 -127
- package/types/tabstrip/Tabstrip.d.ts +0 -2
- package/types/tabstrip/index.d.ts +0 -5
- package/types/tabstrip/tabstrip-dom-utils.d.ts +0 -2
- package/types/tabstrip/useAnimatedSelectionThumb.d.ts +0 -7
- package/types/tabstrip/useKeyboardNavigation.d.ts +0 -29
- package/types/tabstrip/useSelection.d.ts +0 -13
- package/types/tabstrip/useTabstrip.d.ts +0 -55
- package/types/toolbar/Toolbar.d.ts +0 -19
- package/types/toolbar/index.d.ts +0 -1
- package/types/toolbar/toolbar-dom-utils.d.ts +0 -3
- package/types/toolbar/useKeyboardNavigation.d.ts +0 -32
- package/types/toolbar/useSelection.d.ts +0 -22
- package/types/toolbar/useToolbar.d.ts +0 -28
- package/types/utils/deprecated-types.d.ts +0 -2
- package/types/utils/escapeRegExp.d.ts +0 -1
- package/types/utils/forwardCallbackProps.d.ts +0 -3
- package/types/utils/index.d.ts +0 -5
- package/types/utils/isOverflowElement.d.ts +0 -1
- package/types/utils/isPlainObject.d.ts +0 -1
- package/types/vuu-date-picker/VuuDatePicker.d.ts +0 -7
- package/types/vuu-date-picker/index.d.ts +0 -1
- package/types/vuu-input/VuuInput.d.ts +0 -17
- package/types/vuu-input/index.d.ts +0 -1
- package/types/vuu-typeahead-input/VuuTypeaheadInput.d.ts +0 -29
- package/types/vuu-typeahead-input/index.d.ts +0 -1
- package/types/vuu-typeahead-input/useVuuTypeaheadInput.d.ts +0 -15
package/esm/list/useList.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useList.js","sources":["../../src/list/useList.ts"],"sourcesContent":["import { useLayoutEffectSkipFirst } from \"@vuu-ui/vuu-utils\";\nimport {\n KeyboardEvent,\n MouseEvent,\n RefCallback,\n useCallback,\n useRef,\n} from \"react\";\nimport {\n hasSelection,\n isMultiSelection,\n isSingleSelection,\n ListHandlers,\n MultiSelectionHandler,\n SelectHandler,\n SelectionStrategy,\n SingleSelectionHandler,\n} from \"../common-hooks\";\nimport { DragStartHandler, useDragDrop } from \"../drag-drop\";\nimport {\n closestListItemIndex,\n useCollapsibleGroups,\n useKeyboardNavigation,\n useSelection,\n useTypeahead,\n useViewportTracking,\n} from \"./common-hooks\";\n\nimport { ListControlProps, ListHookProps, ListHookResult } from \"./listTypes\";\nimport { useListDrop } from \"./useListDrop\";\n\nexport const useList = <Item, S extends SelectionStrategy>({\n allowDragDrop = false,\n collapsibleHeaders,\n collectionHook: dataHook,\n contentRef,\n defaultHighlightedIndex,\n defaultSelected,\n disabled,\n disableAriaActiveDescendant,\n disableHighlightOnFocus,\n disableTypeToSelect,\n highlightedIndex: highlightedIndexProp,\n id,\n label = \"\",\n listHandlers: listHandlersProp,\n onClick: onClickProp,\n onDragStart,\n onDrop,\n onHighlight,\n onKeyboardNavigation,\n onKeyDown,\n onMoveListItem,\n onSelect,\n onSelectionChange,\n restoreLastFocus,\n selected,\n selectionStrategy,\n selectionKeys,\n stickyHeaders,\n tabToSelect,\n viewportRange,\n}: ListHookProps<Item, S>): ListHookResult<Item> => {\n const containerRef = useRef<HTMLDivElement | null>(null);\n const scrollContainerRef = useRef<HTMLDivElement | null>(null);\n\n const lastSelection = useRef<string[] | undefined>(\n selected || defaultSelected,\n );\n const handleKeyboardNavigation = (evt: KeyboardEvent, nextIndex: number) => {\n selectionHook.listHandlers.onKeyboardNavigation?.(evt, nextIndex);\n onKeyboardNavigation?.(evt, nextIndex);\n };\n\n // TODO where do these belong ?\n const handleSelect = useCallback<SelectHandler>(\n (evt, selectedId) => {\n if (onSelect) {\n if (selectedId !== null) {\n onSelect(evt, dataHook.itemById(selectedId));\n }\n }\n },\n [dataHook, onSelect],\n );\n\n const setContainerRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n if (el) {\n containerRef.current = el;\n scrollContainerRef.current = el.querySelector(\".vuuList-viewport\");\n }\n }, []);\n\n const handleSelectionChange = useCallback<MultiSelectionHandler>(\n (evt, selected) => {\n // TODO what about empty selection\n if (onSelectionChange) {\n if (isSingleSelection(selectionStrategy)) {\n const [selectedItem] = selected;\n (onSelectionChange as SingleSelectionHandler<Item>)(\n evt,\n dataHook.itemById(selectedItem),\n );\n } else if (isMultiSelection(selectionStrategy)) {\n const selectedItems = selected.map((id) => dataHook.itemById(id));\n (onSelectionChange as MultiSelectionHandler<Item>)(\n evt,\n selectedItems,\n );\n }\n }\n },\n [dataHook, onSelectionChange, selectionStrategy],\n );\n\n const {\n highlightedIndex,\n containerProps: {\n onKeyDown: navigationKeyDown,\n onMouseMove: navigationMouseMove,\n ...navigationControlProps\n },\n setHighlightedIndex,\n ...keyboardHook\n } = useKeyboardNavigation({\n containerRef: scrollContainerRef,\n defaultHighlightedIndex,\n disableHighlightOnFocus,\n highlightedIndex: highlightedIndexProp,\n itemCount: dataHook.data.length,\n label,\n onHighlight,\n onKeyboardNavigation: handleKeyboardNavigation,\n restoreLastFocus,\n selected: lastSelection.current,\n viewportItemCount: 10,\n });\n\n const collapsibleHook = useCollapsibleGroups({\n collapsibleHeaders,\n highlightedIdx: highlightedIndex,\n collectionHook: dataHook,\n });\n\n const handleDragStart = useCallback<DragStartHandler>(\n (dragDropState) => {\n setHighlightedIndex(-1);\n onDragStart?.(dragDropState);\n },\n [onDragStart, setHighlightedIndex],\n );\n\n const selectionHook = useSelection({\n containerRef,\n defaultSelected,\n highlightedIndex: highlightedIndex,\n itemQuery: \".vuuListItem\",\n label: `${label}:useList`,\n onClick: onClickProp,\n onSelect: handleSelect,\n onSelectionChange: handleSelectionChange,\n selected,\n selectionStrategy,\n selectionKeys,\n tabToSelect,\n });\n\n const { handleDrop, onDropSettle } = useListDrop<Item>({\n dataHook,\n onDrop,\n onMoveListItem,\n selected: selectionHook.selected,\n setHighlightedIndex,\n setSelected: selectionHook.setSelected,\n });\n\n const { setSelected } = selectionHook;\n useLayoutEffectSkipFirst(() => {\n if (hasSelection(lastSelection.current)) {\n setSelected([]);\n }\n }, [selected, dataHook.data, setSelected]);\n\n const {\n onMouseDown,\n isDragging,\n isScrolling: isDragDropScrolling,\n ...dragDropHook\n } = useDragDrop({\n allowDragDrop,\n draggableClassName: \"list-item\",\n orientation: \"vertical\",\n containerRef,\n id,\n itemQuery: \".vuuListItem\",\n onDragStart: handleDragStart,\n onDrop: handleDrop,\n onDropSettle,\n viewportRange,\n });\n\n const { onKeyDown: typeaheadOnKeyDown } = useTypeahead<Item>({\n disableTypeToSelect,\n highlightedIdx: highlightedIndex,\n highlightItemAtIndex: setHighlightedIndex,\n typeToNavigate: true,\n items: dataHook.data,\n });\n\n const handleKeyDown = useCallback(\n (evt: KeyboardEvent<HTMLElement>) => {\n if (!evt.defaultPrevented) {\n typeaheadOnKeyDown?.(evt);\n }\n // We still let the keyboard navigation hook process the event even\n // if it has been handled by the typeahead hook. That is so it can\n // correctly manage the focusVisible state.\n navigationKeyDown(evt);\n if (!evt.defaultPrevented) {\n selectionHook.listHandlers.onKeyDown?.(evt);\n }\n if (!evt.defaultPrevented) {\n collapsibleHook?.onKeyDown?.(evt);\n }\n\n if (!evt.defaultPrevented) {\n onKeyDown?.(evt);\n }\n },\n [\n collapsibleHook,\n navigationKeyDown,\n onKeyDown,\n selectionHook.listHandlers,\n typeaheadOnKeyDown,\n ],\n );\n\n // This is only appropriate when we are directly controlling a List,\n // not when a control is manipulating the list\n const { isScrolling: isViewportScrolling, scrollIntoView } =\n useViewportTracking({\n containerRef: scrollContainerRef,\n contentRef,\n highlightedIdx: highlightedIndex,\n indexPositions: dataHook.data,\n stickyHeaders,\n });\n\n const isScrolling =\n isViewportScrolling.current || isDragDropScrolling.current;\n\n const handleMouseMove = useCallback(\n (evt: MouseEvent) => {\n if (!isScrolling && !disabled && !isDragging) {\n navigationMouseMove();\n const idx = closestListItemIndex(evt.target as HTMLElement);\n if (idx !== -1 && idx !== highlightedIndex) {\n const item = dataHook.data[idx];\n if (!item || item.disabled) {\n setHighlightedIndex(-1);\n } else {\n setHighlightedIndex(idx);\n }\n }\n }\n },\n [\n isDragging,\n isScrolling,\n disabled,\n setHighlightedIndex,\n navigationMouseMove,\n highlightedIndex,\n dataHook.data,\n ],\n );\n\n const getActiveDescendant = () =>\n highlightedIndex === undefined ||\n highlightedIndex === -1 ||\n disableAriaActiveDescendant\n ? undefined\n : dataHook.data[highlightedIndex]?.id;\n\n // We need this on reEntry for navigation hook to handle focus\n lastSelection.current = selectionHook.selected;\n\n // controlProps ?\n const listControlProps: ListControlProps = {\n \"aria-activedescendant\": getActiveDescendant(),\n onBlur: navigationControlProps.onBlur,\n onFocus: navigationControlProps.onFocus,\n onKeyDown: handleKeyDown,\n onMouseDown: onMouseDown,\n onMouseDownCapture: navigationControlProps.onMouseDownCapture,\n onMouseLeave: navigationControlProps.onMouseLeave,\n };\n\n const listHandlers: ListHandlers = listHandlersProp || {\n onClick: selectionHook.listHandlers.onClick,\n // MouseEnter would be much better for this. There is a bug in Cypress\n // wheby it emits spurious MouseEnter (and MouseOver) events around\n // keypress events, which break many tests.\n onMouseMove: handleMouseMove,\n };\n\n return {\n containerRef,\n setContainerRef,\n focusVisible: keyboardHook.focusVisible,\n controlledHighlighting: keyboardHook.controlledHighlighting,\n highlightedIndex,\n keyboardNavigation: keyboardHook.keyboardNavigation,\n listHandlers,\n listItemHeaderHandlers: collapsibleHook,\n listControlProps,\n scrollIntoView,\n //TODO given that we firs onSelect and onSelectionCHange with Item(s), should we return Item(s) here ?\n selected: selectionHook.selected,\n setHighlightedIndex,\n setIgnoreFocus: keyboardHook.setIgnoreFocus,\n setSelected: selectionHook.setSelected,\n ...dragDropHook,\n };\n};\n"],"names":["selected","id"],"mappings":"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"}
|
package/esm/list/useListDrop.js
DELETED
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
import { useRef, useCallback, useEffect } from 'react';
|
|
2
|
-
import '../common-hooks/collectionProvider.js';
|
|
3
|
-
import '../common-hooks/use-resize-observer.js';
|
|
4
|
-
import { hasSelection } from '../common-hooks/selectionTypes.js';
|
|
5
|
-
|
|
6
|
-
const useListDrop = ({
|
|
7
|
-
dataHook,
|
|
8
|
-
onDrop,
|
|
9
|
-
onMoveListItem,
|
|
10
|
-
selected,
|
|
11
|
-
setHighlightedIndex,
|
|
12
|
-
setSelected
|
|
13
|
-
}) => {
|
|
14
|
-
const selectedByIndexRef = useRef([]);
|
|
15
|
-
const dataHookRef = useRef(dataHook);
|
|
16
|
-
dataHookRef.current = dataHook;
|
|
17
|
-
const adjustIndex = useCallback(
|
|
18
|
-
(index, fromIndex, toIndex) => {
|
|
19
|
-
if (index === fromIndex) {
|
|
20
|
-
return toIndex;
|
|
21
|
-
} else if (index < Math.min(fromIndex, toIndex) || index > Math.max(fromIndex, toIndex)) {
|
|
22
|
-
return index;
|
|
23
|
-
}
|
|
24
|
-
if (fromIndex < index) {
|
|
25
|
-
return index - 1;
|
|
26
|
-
} else {
|
|
27
|
-
return index + 1;
|
|
28
|
-
}
|
|
29
|
-
},
|
|
30
|
-
[]
|
|
31
|
-
);
|
|
32
|
-
const reorderSelectedIndices = useCallback(
|
|
33
|
-
(selected2, fromIndex, toIndex) => {
|
|
34
|
-
const selectedIndices = selected2.map(
|
|
35
|
-
(id) => dataHookRef.current.indexOfItemById(id)
|
|
36
|
-
);
|
|
37
|
-
return selectedIndices.map(
|
|
38
|
-
(item) => adjustIndex(item, fromIndex, toIndex)
|
|
39
|
-
);
|
|
40
|
-
},
|
|
41
|
-
[adjustIndex]
|
|
42
|
-
);
|
|
43
|
-
const handleDrop = useCallback(
|
|
44
|
-
(options) => {
|
|
45
|
-
const { fromIndex, toIndex } = options;
|
|
46
|
-
if (hasSelection(selected)) {
|
|
47
|
-
selectedByIndexRef.current = reorderSelectedIndices(
|
|
48
|
-
selected,
|
|
49
|
-
fromIndex,
|
|
50
|
-
toIndex
|
|
51
|
-
);
|
|
52
|
-
}
|
|
53
|
-
if (options.isExternal) {
|
|
54
|
-
onDrop?.(options);
|
|
55
|
-
} else {
|
|
56
|
-
onMoveListItem?.(fromIndex, toIndex);
|
|
57
|
-
}
|
|
58
|
-
setHighlightedIndex(-1);
|
|
59
|
-
},
|
|
60
|
-
[
|
|
61
|
-
selected,
|
|
62
|
-
setHighlightedIndex,
|
|
63
|
-
reorderSelectedIndices,
|
|
64
|
-
onDrop,
|
|
65
|
-
onMoveListItem
|
|
66
|
-
]
|
|
67
|
-
);
|
|
68
|
-
const handleDropSettle = useCallback(
|
|
69
|
-
(toIndex) => {
|
|
70
|
-
setHighlightedIndex(toIndex);
|
|
71
|
-
},
|
|
72
|
-
[setHighlightedIndex]
|
|
73
|
-
);
|
|
74
|
-
useEffect(() => {
|
|
75
|
-
const { current: selectedByIndex } = selectedByIndexRef;
|
|
76
|
-
if (hasSelection(selectedByIndex)) {
|
|
77
|
-
selectedByIndexRef.current = [];
|
|
78
|
-
const postDropSelected = Array.isArray(selectedByIndex) ? selectedByIndex.map((i) => dataHook.data[i].id) : dataHook.data[selectedByIndex].id;
|
|
79
|
-
selectedByIndexRef.current = [];
|
|
80
|
-
setSelected(postDropSelected);
|
|
81
|
-
}
|
|
82
|
-
}, [dataHook.data, setSelected]);
|
|
83
|
-
return {
|
|
84
|
-
handleDrop,
|
|
85
|
-
onDropSettle: handleDropSettle
|
|
86
|
-
};
|
|
87
|
-
};
|
|
88
|
-
|
|
89
|
-
export { useListDrop };
|
|
90
|
-
//# sourceMappingURL=useListDrop.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useListDrop.js","sources":["../../src/list/useListDrop.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from \"react\";\nimport { CollectionHookResult, hasSelection } from \"../common-hooks\";\nimport { DropHandler } from \"../drag-drop\";\nimport { MoveItemHandler } from \"./listTypes\";\n\nexport interface ListDropProps<Item = string> {\n dataHook: CollectionHookResult<Item>;\n onDrop?: DropHandler;\n onMoveListItem?: MoveItemHandler;\n selected: string[];\n setHighlightedIndex: (idx: number) => void;\n setSelected: (selected: string[]) => void;\n}\n\nexport const useListDrop = <Item>({\n dataHook,\n onDrop,\n onMoveListItem,\n selected,\n setHighlightedIndex,\n setSelected,\n}: ListDropProps<Item>) => {\n // Used to preserve selection across a drop event.\n const selectedByIndexRef = useRef<number[]>([]);\n\n /** prevent recreating reorderSelectedIndices when dataHook changes */\n const dataHookRef = useRef(dataHook);\n dataHookRef.current = dataHook;\n\n const adjustIndex = useCallback(\n (index: number, fromIndex: number, toIndex: number) => {\n if (index === fromIndex) {\n return toIndex;\n } else if (\n index < Math.min(fromIndex, toIndex) ||\n index > Math.max(fromIndex, toIndex)\n ) {\n return index;\n }\n if (fromIndex < index) {\n return index - 1;\n } else {\n return index + 1;\n }\n },\n []\n );\n\n // Used after a drop event, to calculate wht the new selected indices will be\n const reorderSelectedIndices = useCallback(\n (selected: string[], fromIndex: number, toIndex: number) => {\n const selectedIndices = selected.map((id) =>\n dataHookRef.current.indexOfItemById(id)\n );\n return selectedIndices.map((item) =>\n adjustIndex(item, fromIndex, toIndex)\n );\n },\n [adjustIndex]\n );\n\n const handleDrop = useCallback<DropHandler>(\n (options) => {\n const { fromIndex, toIndex } = options;\n if (hasSelection(selected)) {\n selectedByIndexRef.current = reorderSelectedIndices(\n selected,\n fromIndex,\n toIndex\n );\n }\n\n if (options.isExternal) {\n onDrop?.(options);\n } else {\n onMoveListItem?.(fromIndex, toIndex);\n }\n setHighlightedIndex(-1);\n },\n [\n selected,\n setHighlightedIndex,\n reorderSelectedIndices,\n onDrop,\n onMoveListItem,\n ]\n );\n\n const handleDropSettle = useCallback(\n (toIndex: number) => {\n setHighlightedIndex(toIndex);\n },\n [setHighlightedIndex]\n );\n\n useEffect(() => {\n const { current: selectedByIndex } = selectedByIndexRef;\n if (hasSelection(selectedByIndex)) {\n selectedByIndexRef.current = [];\n const postDropSelected = Array.isArray(selectedByIndex)\n ? selectedByIndex.map((i) => dataHook.data[i].id)\n : dataHook.data[selectedByIndex].id;\n\n selectedByIndexRef.current = [];\n // TODO gave up trying to figure out how to type this correctly\n setSelected(postDropSelected as any);\n }\n }, [dataHook.data, setSelected]);\n\n return {\n handleDrop,\n onDropSettle: handleDropSettle,\n };\n};\n"],"names":["selected"],"mappings":"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"}
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
import { useState, useRef, useMemo, useCallback } from 'react';
|
|
2
|
-
import '../common-hooks/collectionProvider.js';
|
|
3
|
-
import { useResizeObserver, HeightOnly } from '../common-hooks/use-resize-observer.js';
|
|
4
|
-
|
|
5
|
-
const getContentHeight = (itemCount, itemHeight, itemGapSize = 0) => {
|
|
6
|
-
if (itemCount === 0) {
|
|
7
|
-
return 0;
|
|
8
|
-
} else if (itemGapSize === 0) {
|
|
9
|
-
return itemCount * itemHeight;
|
|
10
|
-
} else {
|
|
11
|
-
return itemCount - 1 * (itemHeight + itemGapSize) + itemHeight;
|
|
12
|
-
}
|
|
13
|
-
};
|
|
14
|
-
const useListHeight = ({
|
|
15
|
-
displayedItemCount,
|
|
16
|
-
getItemHeight,
|
|
17
|
-
// TODO no need to incur the cost of a resizeObserver if height is explicit
|
|
18
|
-
height,
|
|
19
|
-
itemCount,
|
|
20
|
-
itemGapSize,
|
|
21
|
-
itemHeight: itemHeightProp = 36,
|
|
22
|
-
size
|
|
23
|
-
}) => {
|
|
24
|
-
const [measuredItemHeight, setMeasuredItemHeight] = useState(itemHeightProp);
|
|
25
|
-
const [, forceUpdate] = useState({});
|
|
26
|
-
const proxyItemRef = useRef(null);
|
|
27
|
-
const [contentHeight, computedListHeight] = useMemo(() => {
|
|
28
|
-
let result = 0;
|
|
29
|
-
const itemHeight = measuredItemHeight ?? itemHeightProp;
|
|
30
|
-
const contentHeight2 = getContentHeight(itemCount, itemHeight, itemGapSize);
|
|
31
|
-
if (height !== void 0) {
|
|
32
|
-
return [contentHeight2, void 0];
|
|
33
|
-
}
|
|
34
|
-
const preferredItemCount = Math.min(displayedItemCount, itemCount) || displayedItemCount;
|
|
35
|
-
if (typeof getItemHeight === "function") {
|
|
36
|
-
result += Array(preferredItemCount).fill(0).reduce(
|
|
37
|
-
(total, _, index) => total + getItemHeight(index) + itemGapSize,
|
|
38
|
-
0
|
|
39
|
-
) - // We don't want gap after the last item
|
|
40
|
-
itemGapSize;
|
|
41
|
-
} else {
|
|
42
|
-
result += preferredItemCount * Number(itemHeight) + (preferredItemCount - 1) * itemGapSize;
|
|
43
|
-
}
|
|
44
|
-
const listHeight = result;
|
|
45
|
-
return [contentHeight2, listHeight];
|
|
46
|
-
}, [
|
|
47
|
-
displayedItemCount,
|
|
48
|
-
getItemHeight,
|
|
49
|
-
height,
|
|
50
|
-
itemCount,
|
|
51
|
-
itemGapSize,
|
|
52
|
-
itemHeightProp,
|
|
53
|
-
measuredItemHeight
|
|
54
|
-
]);
|
|
55
|
-
const handleRowHeight = useCallback(({ height: height2 }) => {
|
|
56
|
-
if (typeof height2 === "number") {
|
|
57
|
-
setMeasuredItemHeight(height2);
|
|
58
|
-
}
|
|
59
|
-
}, []);
|
|
60
|
-
const rowHeightProxyRef = useCallback((el) => {
|
|
61
|
-
proxyItemRef.current = el;
|
|
62
|
-
forceUpdate({});
|
|
63
|
-
}, []);
|
|
64
|
-
useResizeObserver(proxyItemRef, HeightOnly, handleRowHeight, true);
|
|
65
|
-
return {
|
|
66
|
-
computedListHeight,
|
|
67
|
-
contentHeight,
|
|
68
|
-
listClientHeight: size?.height,
|
|
69
|
-
listItemHeight: measuredItemHeight,
|
|
70
|
-
rowHeightProxyRef
|
|
71
|
-
};
|
|
72
|
-
};
|
|
73
|
-
|
|
74
|
-
export { useListHeight };
|
|
75
|
-
//# sourceMappingURL=useListHeight.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useListHeight.js","sources":["../../src/list/useListHeight.ts"],"sourcesContent":["import { RefCallback, useCallback, useMemo, useRef, useState } from \"react\";\nimport { HeightOnly, ResizeHandler, useResizeObserver } from \"../common-hooks\";\nimport { MeasuredSize } from \"../measured-container\";\n\nexport interface ListHeightHookProps {\n displayedItemCount: number;\n getItemHeight?: (index: number) => number;\n height?: number | string;\n itemCount: number;\n itemGapSize: number;\n itemHeight?: number;\n size: MeasuredSize | undefined;\n}\n\nexport interface HeightHookResult {\n computedListHeight: number | undefined;\n contentHeight: number;\n listClientHeight?: number;\n listItemHeight: number;\n rowHeightProxyRef: RefCallback<HTMLDivElement>;\n}\n\nconst getContentHeight = (\n itemCount: number,\n itemHeight: number,\n itemGapSize = 0,\n) => {\n if (itemCount === 0) {\n return 0;\n } else if (itemGapSize === 0) {\n return itemCount * itemHeight;\n } else {\n return itemCount - 1 * (itemHeight + itemGapSize) + itemHeight;\n }\n};\n\nexport const useListHeight = ({\n displayedItemCount,\n getItemHeight,\n // TODO no need to incur the cost of a resizeObserver if height is explicit\n height,\n itemCount,\n itemGapSize,\n itemHeight: itemHeightProp = 36,\n size,\n}: ListHeightHookProps): HeightHookResult => {\n // TODO default by density\n const [measuredItemHeight, setMeasuredItemHeight] =\n useState<number>(itemHeightProp);\n // Not 100% sure why we need this forceUpdate\n const [, forceUpdate] = useState({});\n // This is a ref to the 'item proxy' a hiden list item used to detect css driven\n // size changes (e.g. runtime density switch)\n const proxyItemRef = useRef<HTMLDivElement | null>(null);\n\n const [contentHeight, computedListHeight] = useMemo(() => {\n let result = 0;\n const itemHeight = measuredItemHeight ?? itemHeightProp;\n const contentHeight = getContentHeight(itemCount, itemHeight, itemGapSize);\n if (height !== undefined) {\n // TODO if this is a percentage, convert to number\n return [contentHeight, undefined];\n }\n\n // if there are 0 items we render with the preferred count\n const preferredItemCount =\n Math.min(displayedItemCount, itemCount) || displayedItemCount;\n\n if (typeof getItemHeight === \"function\") {\n result +=\n Array(preferredItemCount)\n .fill(0)\n .reduce<number>(\n (total, _, index) => total + getItemHeight(index) + itemGapSize,\n 0,\n ) -\n // We don't want gap after the last item\n itemGapSize;\n } else {\n result +=\n preferredItemCount * Number(itemHeight) +\n (preferredItemCount - 1) * itemGapSize;\n }\n\n const listHeight = result;\n\n return [contentHeight, listHeight];\n }, [\n displayedItemCount,\n getItemHeight,\n height,\n itemCount,\n itemGapSize,\n itemHeightProp,\n measuredItemHeight,\n ]);\n\n const handleRowHeight: ResizeHandler = useCallback(({ height }) => {\n if (typeof height === \"number\") {\n setMeasuredItemHeight(height);\n }\n }, []);\n\n const rowHeightProxyRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n proxyItemRef.current = el;\n forceUpdate({});\n }, []);\n\n useResizeObserver(proxyItemRef, HeightOnly, handleRowHeight, true);\n\n return {\n computedListHeight,\n contentHeight,\n listClientHeight: size?.height,\n listItemHeight: measuredItemHeight,\n rowHeightProxyRef,\n };\n};\n"],"names":["contentHeight","height"],"mappings":"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"}
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
import { useIsomorphicLayoutEffect } from '@salt-ds/core';
|
|
2
|
-
import { useRef, useMemo, useState, useCallback } from 'react';
|
|
3
|
-
|
|
4
|
-
const getRange = (scrollPos, height, itemCount, itemHeight) => {
|
|
5
|
-
const viewportRowCount = Math.ceil(height / itemHeight);
|
|
6
|
-
const from = Math.floor(scrollPos / itemHeight);
|
|
7
|
-
const to = Math.ceil(from + viewportRowCount - 1);
|
|
8
|
-
return {
|
|
9
|
-
atStart: from === 0,
|
|
10
|
-
atEnd: to === itemCount - 1,
|
|
11
|
-
from,
|
|
12
|
-
to
|
|
13
|
-
};
|
|
14
|
-
};
|
|
15
|
-
const useScrollPosition = ({
|
|
16
|
-
containerSize: listHeight,
|
|
17
|
-
itemCount: listItemCount,
|
|
18
|
-
itemGapSize: listItemGapSize = 0,
|
|
19
|
-
itemSize: listItemHeight,
|
|
20
|
-
onViewportScroll
|
|
21
|
-
}) => {
|
|
22
|
-
const firstVisibleRowRef = useRef(0);
|
|
23
|
-
const lastVisibleRowRef = useRef(0);
|
|
24
|
-
const scrollPosRef = useRef(0);
|
|
25
|
-
const range = useMemo(() => {
|
|
26
|
-
return getRange(
|
|
27
|
-
scrollPosRef.current,
|
|
28
|
-
listHeight,
|
|
29
|
-
listItemCount,
|
|
30
|
-
listItemHeight + listItemGapSize
|
|
31
|
-
);
|
|
32
|
-
}, [listHeight, listItemCount, listItemHeight, listItemGapSize]);
|
|
33
|
-
const [viewportRange, setViewportRange] = useState(range);
|
|
34
|
-
useIsomorphicLayoutEffect(() => {
|
|
35
|
-
setViewportRange(range);
|
|
36
|
-
}, [range]);
|
|
37
|
-
const handleVerticalScroll = useCallback(
|
|
38
|
-
(e) => {
|
|
39
|
-
const scrollTop = e.target.scrollTop;
|
|
40
|
-
if (scrollTop !== scrollPosRef.current) {
|
|
41
|
-
scrollPosRef.current = scrollTop;
|
|
42
|
-
const itemHeight = listItemHeight + listItemGapSize;
|
|
43
|
-
const range2 = getRange(
|
|
44
|
-
scrollTop,
|
|
45
|
-
listHeight,
|
|
46
|
-
listItemCount,
|
|
47
|
-
itemHeight
|
|
48
|
-
);
|
|
49
|
-
if (range2.from !== firstVisibleRowRef.current || range2.to !== lastVisibleRowRef.current) {
|
|
50
|
-
firstVisibleRowRef.current = range2.from;
|
|
51
|
-
lastVisibleRowRef.current = range2.to;
|
|
52
|
-
onViewportScroll?.(range2.from, range2.to);
|
|
53
|
-
setViewportRange(range2);
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
},
|
|
57
|
-
[
|
|
58
|
-
listItemHeight,
|
|
59
|
-
listItemGapSize,
|
|
60
|
-
listHeight,
|
|
61
|
-
listItemCount,
|
|
62
|
-
onViewportScroll
|
|
63
|
-
]
|
|
64
|
-
);
|
|
65
|
-
return {
|
|
66
|
-
onVerticalScroll: handleVerticalScroll,
|
|
67
|
-
viewportRange
|
|
68
|
-
};
|
|
69
|
-
};
|
|
70
|
-
|
|
71
|
-
export { useScrollPosition };
|
|
72
|
-
//# sourceMappingURL=useScrollPosition.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useScrollPosition.js","sources":["../../src/list/useScrollPosition.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { UIEvent, useCallback, useMemo, useRef, useState } from \"react\";\n\nexport type ViewportRange = {\n atEnd: boolean;\n atStart: boolean;\n from: number;\n to: number;\n};\n\ninterface ScrollPositionHookProps {\n containerSize: number;\n itemCount: number;\n itemGapSize?: number;\n itemSize: number;\n onViewportScroll?: (\n firstVisibleItemIndex: number,\n lastVisibleitemIndex: number\n ) => void;\n}\n\nconst getRange = (\n scrollPos: number,\n height: number,\n itemCount: number,\n itemHeight: number\n): ViewportRange => {\n const viewportRowCount = Math.ceil(height / itemHeight);\n const from = Math.floor(scrollPos / itemHeight);\n const to = Math.ceil(from + viewportRowCount - 1);\n return {\n atStart: from === 0,\n atEnd: to === itemCount - 1,\n from,\n to,\n };\n};\n\nexport const useScrollPosition = ({\n containerSize: listHeight,\n itemCount: listItemCount,\n itemGapSize: listItemGapSize = 0,\n itemSize: listItemHeight,\n onViewportScroll,\n}: ScrollPositionHookProps) => {\n const firstVisibleRowRef = useRef(0);\n const lastVisibleRowRef = useRef(0);\n const scrollPosRef = useRef(0);\n\n const range = useMemo(() => {\n return getRange(\n scrollPosRef.current,\n listHeight,\n listItemCount,\n listItemHeight + listItemGapSize\n );\n }, [listHeight, listItemCount, listItemHeight, listItemGapSize]);\n\n const [viewportRange, setViewportRange] = useState<ViewportRange>(range);\n\n useIsomorphicLayoutEffect(() => {\n setViewportRange(range);\n }, [range]);\n\n const handleVerticalScroll = useCallback(\n (e: UIEvent<HTMLElement>) => {\n const scrollTop = (e.target as HTMLElement).scrollTop;\n if (scrollTop !== scrollPosRef.current) {\n scrollPosRef.current = scrollTop;\n const itemHeight = listItemHeight + listItemGapSize;\n const range = getRange(\n scrollTop,\n listHeight,\n listItemCount,\n itemHeight\n );\n if (\n range.from !== firstVisibleRowRef.current ||\n range.to !== lastVisibleRowRef.current\n ) {\n firstVisibleRowRef.current = range.from;\n lastVisibleRowRef.current = range.to;\n onViewportScroll?.(range.from, range.to);\n setViewportRange(range);\n }\n }\n },\n [\n listItemHeight,\n listItemGapSize,\n listHeight,\n listItemCount,\n onViewportScroll,\n ]\n );\n\n return {\n onVerticalScroll: handleVerticalScroll,\n viewportRange,\n };\n};\n"],"names":["range"],"mappings":";;;AAqBA,MAAM,QAAW,GAAA,CACf,SACA,EAAA,MAAA,EACA,WACA,UACkB,KAAA;AAClB,EAAA,MAAM,gBAAmB,GAAA,IAAA,CAAK,IAAK,CAAA,MAAA,GAAS,UAAU,CAAA;AACtD,EAAA,MAAM,IAAO,GAAA,IAAA,CAAK,KAAM,CAAA,SAAA,GAAY,UAAU,CAAA;AAC9C,EAAA,MAAM,EAAK,GAAA,IAAA,CAAK,IAAK,CAAA,IAAA,GAAO,mBAAmB,CAAC,CAAA;AAChD,EAAO,OAAA;AAAA,IACL,SAAS,IAAS,KAAA,CAAA;AAAA,IAClB,KAAA,EAAO,OAAO,SAAY,GAAA,CAAA;AAAA,IAC1B,IAAA;AAAA,IACA;AAAA,GACF;AACF,CAAA;AAEO,MAAM,oBAAoB,CAAC;AAAA,EAChC,aAAe,EAAA,UAAA;AAAA,EACf,SAAW,EAAA,aAAA;AAAA,EACX,aAAa,eAAkB,GAAA,CAAA;AAAA,EAC/B,QAAU,EAAA,cAAA;AAAA,EACV;AACF,CAA+B,KAAA;AAC7B,EAAM,MAAA,kBAAA,GAAqB,OAAO,CAAC,CAAA;AACnC,EAAM,MAAA,iBAAA,GAAoB,OAAO,CAAC,CAAA;AAClC,EAAM,MAAA,YAAA,GAAe,OAAO,CAAC,CAAA;AAE7B,EAAM,MAAA,KAAA,GAAQ,QAAQ,MAAM;AAC1B,IAAO,OAAA,QAAA;AAAA,MACL,YAAa,CAAA,OAAA;AAAA,MACb,UAAA;AAAA,MACA,aAAA;AAAA,MACA,cAAiB,GAAA;AAAA,KACnB;AAAA,KACC,CAAC,UAAA,EAAY,aAAe,EAAA,cAAA,EAAgB,eAAe,CAAC,CAAA;AAE/D,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAwB,KAAK,CAAA;AAEvE,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,gBAAA,CAAiB,KAAK,CAAA;AAAA,GACxB,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,MAAM,oBAAuB,GAAA,WAAA;AAAA,IAC3B,CAAC,CAA4B,KAAA;AAC3B,MAAM,MAAA,SAAA,GAAa,EAAE,MAAuB,CAAA,SAAA;AAC5C,MAAI,IAAA,SAAA,KAAc,aAAa,OAAS,EAAA;AACtC,QAAA,YAAA,CAAa,OAAU,GAAA,SAAA;AACvB,QAAA,MAAM,aAAa,cAAiB,GAAA,eAAA;AACpC,QAAA,MAAMA,MAAQ,GAAA,QAAA;AAAA,UACZ,SAAA;AAAA,UACA,UAAA;AAAA,UACA,aAAA;AAAA,UACA;AAAA,SACF;AACA,QAAA,IACEA,OAAM,IAAS,KAAA,kBAAA,CAAmB,WAClCA,MAAM,CAAA,EAAA,KAAO,kBAAkB,OAC/B,EAAA;AACA,UAAA,kBAAA,CAAmB,UAAUA,MAAM,CAAA,IAAA;AACnC,UAAA,iBAAA,CAAkB,UAAUA,MAAM,CAAA,EAAA;AAClC,UAAmBA,gBAAAA,GAAAA,MAAAA,CAAM,IAAMA,EAAAA,MAAAA,CAAM,EAAE,CAAA;AACvC,UAAA,gBAAA,CAAiBA,MAAK,CAAA;AAAA;AACxB;AACF,KACF;AAAA,IACA;AAAA,MACE,cAAA;AAAA,MACA,eAAA;AAAA,MACA,UAAA;AAAA,MACA,aAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAO,OAAA;AAAA,IACL,gBAAkB,EAAA,oBAAA;AAAA,IAClB;AAAA,GACF;AACF;;;;"}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { type CalendarCarouselProps } from "./internal/CalendarCarousel";
|
|
2
|
-
import { type CalendarNavigationProps } from "./internal/CalendarNavigation";
|
|
3
|
-
import { type useCalendarProps } from "./useCalendar";
|
|
4
|
-
export type CalendarProps = useCalendarProps & {
|
|
5
|
-
className?: string;
|
|
6
|
-
id?: string;
|
|
7
|
-
renderDayContents?: CalendarCarouselProps["renderDayContents"];
|
|
8
|
-
hideYearDropdown?: CalendarNavigationProps["hideYearDropdown"];
|
|
9
|
-
borderedDropdown?: CalendarNavigationProps["borderedDropdown"];
|
|
10
|
-
TooltipProps?: CalendarCarouselProps["TooltipProps"];
|
|
11
|
-
hideOutOfRangeDates?: CalendarCarouselProps["hideOutOfRangeDates"];
|
|
12
|
-
};
|
|
13
|
-
export declare const Calendar: import("react").ForwardRefExoticComponent<CalendarProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import { type CalendarMonthProps } from "./CalendarMonth";
|
|
2
|
-
export type CalendarCarouselProps = Omit<CalendarMonthProps, "date">;
|
|
3
|
-
export declare const CalendarCarousel: import("react").ForwardRefExoticComponent<Omit<CalendarCarouselProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import type { useCalendar } from "../useCalendar";
|
|
2
|
-
interface CalendarState {
|
|
3
|
-
state: ReturnType<typeof useCalendar>["state"];
|
|
4
|
-
helpers: ReturnType<typeof useCalendar>["helpers"];
|
|
5
|
-
}
|
|
6
|
-
declare const CalendarContext: import("react").Context<CalendarState | null>;
|
|
7
|
-
declare function useCalendarContext(): CalendarState;
|
|
8
|
-
export { CalendarContext, useCalendarContext };
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import type { DateValue } from "@internationalized/date";
|
|
2
|
-
import { type TooltipProps } from "@salt-ds/core";
|
|
3
|
-
import { type ComponentPropsWithRef, type ReactElement } from "react";
|
|
4
|
-
import { type DayStatus } from "../useCalendarDay";
|
|
5
|
-
export type DateFormatter = (day: Date) => string | undefined;
|
|
6
|
-
export interface CalendarDayProps extends Omit<ComponentPropsWithRef<"button">, "children"> {
|
|
7
|
-
day: DateValue;
|
|
8
|
-
formatDate?: DateFormatter;
|
|
9
|
-
renderDayContents?: (date: DateValue, status: DayStatus) => ReactElement;
|
|
10
|
-
status?: DayStatus;
|
|
11
|
-
month: DateValue;
|
|
12
|
-
TooltipProps?: Partial<TooltipProps>;
|
|
13
|
-
}
|
|
14
|
-
export declare const CalendarDay: import("react").ForwardRefExoticComponent<Omit<CalendarDayProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { DateValue } from "@internationalized/date";
|
|
2
|
-
import { type ComponentPropsWithRef } from "react";
|
|
3
|
-
import { type CalendarDayProps } from "./CalendarDay";
|
|
4
|
-
export interface CalendarMonthProps extends ComponentPropsWithRef<"div"> {
|
|
5
|
-
date: DateValue;
|
|
6
|
-
hideOutOfRangeDates?: boolean;
|
|
7
|
-
renderDayContents?: CalendarDayProps["renderDayContents"];
|
|
8
|
-
TooltipProps?: CalendarDayProps["TooltipProps"];
|
|
9
|
-
}
|
|
10
|
-
export declare const CalendarMonth: import("react").ForwardRefExoticComponent<Omit<CalendarMonthProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { type ButtonProps, type DropdownProps } from "@salt-ds/core";
|
|
2
|
-
import { type ComponentPropsWithRef } from "react";
|
|
3
|
-
import { type DateValue } from "@internationalized/date";
|
|
4
|
-
type dateDropdownProps = DropdownProps<DateValue>;
|
|
5
|
-
export interface CalendarNavigationProps extends ComponentPropsWithRef<"div"> {
|
|
6
|
-
MonthDropdownProps?: dateDropdownProps;
|
|
7
|
-
YearDropdownProps?: dateDropdownProps;
|
|
8
|
-
onMonthSelect?: dateDropdownProps["onChange"];
|
|
9
|
-
onYearSelect?: dateDropdownProps["onChange"];
|
|
10
|
-
borderedDropdown?: dateDropdownProps["bordered"];
|
|
11
|
-
onNavigateNext?: ButtonProps["onClick"];
|
|
12
|
-
onNavigatePrevious?: ButtonProps["onClick"];
|
|
13
|
-
hideYearDropdown?: boolean;
|
|
14
|
-
}
|
|
15
|
-
export declare const CalendarNavigation: import("react").ForwardRefExoticComponent<Omit<CalendarNavigationProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
16
|
-
export {};
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import { type ComponentPropsWithRef } from "react";
|
|
2
|
-
export type CalendarWeekHeaderProps = ComponentPropsWithRef<"div">;
|
|
3
|
-
export declare const CalendarWeekHeader: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { type DateValue } from "@internationalized/date";
|
|
2
|
-
import type { FocusEventHandler, KeyboardEventHandler, MouseEventHandler } from "react";
|
|
3
|
-
export declare function useFocusManagement({ date }: {
|
|
4
|
-
date: DateValue;
|
|
5
|
-
}): {
|
|
6
|
-
handleClick: MouseEventHandler<HTMLButtonElement>;
|
|
7
|
-
handleKeyDown: KeyboardEventHandler<HTMLButtonElement>;
|
|
8
|
-
handleFocus: FocusEventHandler<HTMLButtonElement>;
|
|
9
|
-
};
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { DateFormatter, type DateValue } from "@internationalized/date";
|
|
2
|
-
export declare function getCurrentLocale(): string;
|
|
3
|
-
export declare function getDateFormatter(options?: Intl.DateTimeFormatOptions): DateFormatter;
|
|
4
|
-
export declare function formatDate(date: DateValue, options?: Intl.DateTimeFormatOptions): string;
|
|
5
|
-
export declare function getCalender(): import("@internationalized/date").Calendar;
|
|
6
|
-
type WeekdayFormat = Intl.DateTimeFormatOptions["weekday"];
|
|
7
|
-
export declare function daysForLocale(weekday?: WeekdayFormat): string[];
|
|
8
|
-
export declare function monthsForLocale(currentYear: DateValue): (import("@internationalized/date").CalendarDate | import("@internationalized/date").CalendarDateTime | import("@internationalized/date").ZonedDateTime)[];
|
|
9
|
-
export declare function generateVisibleDays(currentMonth: DateValue): {
|
|
10
|
-
date: DateValue;
|
|
11
|
-
dateOfMonth: number;
|
|
12
|
-
isCurrentMonth: boolean;
|
|
13
|
-
}[];
|
|
14
|
-
export declare function monthDiff(a: DateValue, b: DateValue): number;
|
|
15
|
-
export {};
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import { type DateValue } from "@internationalized/date";
|
|
2
|
-
import { type SyntheticEvent } from "react";
|
|
3
|
-
import { type UseMultiSelectionCalendarProps, type UseOffsetSelectionCalendarProps, type UseRangeSelectionCalendarProps, type UseSingleSelectionCalendarProps } from "./useSelection";
|
|
4
|
-
interface BaseUseCalendarProps {
|
|
5
|
-
defaultVisibleMonth?: DateValue;
|
|
6
|
-
onVisibleMonthChange?: (event: SyntheticEvent, visibleMonth: DateValue) => void;
|
|
7
|
-
isDayUnselectable?: (date: DateValue) => string | false | undefined;
|
|
8
|
-
isDayHighlighted?: (date: DateValue) => string | false | undefined;
|
|
9
|
-
isDayDisabled?: (date: DateValue) => boolean;
|
|
10
|
-
visibleMonth?: DateValue;
|
|
11
|
-
hideOutOfRangeDates?: boolean;
|
|
12
|
-
hideYearDropdown?: boolean;
|
|
13
|
-
minDate?: DateValue;
|
|
14
|
-
maxDate?: DateValue;
|
|
15
|
-
}
|
|
16
|
-
export type useCalendarProps = (Omit<UseSingleSelectionCalendarProps, "isDaySelectable"> | Omit<UseMultiSelectionCalendarProps, "isDaySelectable"> | Omit<UseRangeSelectionCalendarProps, "isDaySelectable"> | Omit<UseOffsetSelectionCalendarProps, "isDaySelectable">) & BaseUseCalendarProps;
|
|
17
|
-
export declare function useCalendar(props: useCalendarProps): {
|
|
18
|
-
state: {
|
|
19
|
-
selectedDate: DateValue | import("./useSelection").RangeSelectionValueType | {
|
|
20
|
-
startDate?: DateValue;
|
|
21
|
-
endDate?: DateValue;
|
|
22
|
-
} | DateValue[] | null | undefined;
|
|
23
|
-
hoveredDate: import("@internationalized/date").CalendarDate | import("@internationalized/date").CalendarDateTime | import("@internationalized/date").ZonedDateTime | null | undefined;
|
|
24
|
-
visibleMonth: DateValue;
|
|
25
|
-
focusedDate: DateValue;
|
|
26
|
-
minDate: DateValue | undefined;
|
|
27
|
-
maxDate: DateValue | undefined;
|
|
28
|
-
selectionVariant: "offset" | "range" | "multiselect" | "default";
|
|
29
|
-
hideOutOfRangeDates: boolean | undefined;
|
|
30
|
-
calendarFocused: boolean;
|
|
31
|
-
};
|
|
32
|
-
helpers: {
|
|
33
|
-
setSelectedDate: (event: SyntheticEvent<HTMLButtonElement>, newSelectedDate: DateValue) => void;
|
|
34
|
-
isSelected: (date: DateValue) => boolean;
|
|
35
|
-
setHoveredDate: (event: SyntheticEvent, date: DateValue | null) => void;
|
|
36
|
-
isHovered: (date: DateValue) => boolean;
|
|
37
|
-
isSelectedSpan: (date: DateValue) => boolean;
|
|
38
|
-
isHoveredSpan: (date: DateValue) => boolean;
|
|
39
|
-
isSelectedStart: (date: DateValue) => boolean;
|
|
40
|
-
isSelectedEnd: (date: DateValue) => boolean;
|
|
41
|
-
isHoveredOffset: (date: DateValue) => boolean;
|
|
42
|
-
setVisibleMonth: (event: SyntheticEvent, newVisibleMonth: DateValue) => void;
|
|
43
|
-
setFocusedDate: (event: SyntheticEvent, date: DateValue) => void;
|
|
44
|
-
setCalendarFocused: import("react").Dispatch<import("react").SetStateAction<boolean>>;
|
|
45
|
-
isDayUnselectable: (date: DateValue) => string | false | undefined;
|
|
46
|
-
isDayHighlighted: (date: DateValue) => string | false | undefined;
|
|
47
|
-
isDayDisabled: (date: DateValue) => boolean;
|
|
48
|
-
isDayVisible: (date: DateValue) => boolean;
|
|
49
|
-
isOutsideAllowedDates: (date: DateValue) => boolean;
|
|
50
|
-
isOutsideAllowedMonths: (date: DateValue) => boolean;
|
|
51
|
-
isOutsideAllowedYears: (date: DateValue) => boolean;
|
|
52
|
-
};
|
|
53
|
-
};
|
|
54
|
-
export {};
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { type DateValue } from "@internationalized/date";
|
|
2
|
-
import { type ComponentPropsWithoutRef, type RefObject } from "react";
|
|
3
|
-
export interface DayStatus {
|
|
4
|
-
outOfRange?: boolean;
|
|
5
|
-
selected?: boolean;
|
|
6
|
-
today?: boolean;
|
|
7
|
-
unselectable?: string | false;
|
|
8
|
-
highlighted?: string | false;
|
|
9
|
-
focused?: boolean;
|
|
10
|
-
disabled?: boolean;
|
|
11
|
-
hidden?: boolean;
|
|
12
|
-
}
|
|
13
|
-
export interface useCalendarDayProps {
|
|
14
|
-
date: DateValue;
|
|
15
|
-
month: DateValue;
|
|
16
|
-
}
|
|
17
|
-
export declare function useCalendarDay({ date, month }: useCalendarDayProps, ref: RefObject<HTMLElement | null>): {
|
|
18
|
-
status: DayStatus;
|
|
19
|
-
dayProps: ComponentPropsWithoutRef<"button">;
|
|
20
|
-
unselectableReason: string | false | undefined;
|
|
21
|
-
highlightedReason: string | false | undefined;
|
|
22
|
-
};
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
import { CalendarDate, type DateValue } from "@internationalized/date";
|
|
2
|
-
import type { KeyboardEventHandler, MouseEventHandler, SyntheticEvent } from "react";
|
|
3
|
-
interface BaseUseSelectionCalendarProps<SelectionVariantType> {
|
|
4
|
-
hoveredDate?: DateValue | null;
|
|
5
|
-
selectedDate?: SelectionVariantType | null;
|
|
6
|
-
defaultSelectedDate?: SelectionVariantType;
|
|
7
|
-
onSelectedDateChange?: (event: SyntheticEvent, selectedDate: SelectionVariantType) => void;
|
|
8
|
-
isDaySelectable: (date?: DateValue) => boolean;
|
|
9
|
-
onHoveredDateChange?: (event: SyntheticEvent, hoveredDate: DateValue | null) => void;
|
|
10
|
-
}
|
|
11
|
-
export type SingleSelectionValueType = DateValue;
|
|
12
|
-
type MultiSelectionValueType = DateValue[];
|
|
13
|
-
export type RangeSelectionValueType = {
|
|
14
|
-
startDate?: DateValue;
|
|
15
|
-
endDate?: DateValue;
|
|
16
|
-
};
|
|
17
|
-
type OffsetSelectionValueType = {
|
|
18
|
-
startDate?: DateValue;
|
|
19
|
-
endDate?: DateValue;
|
|
20
|
-
};
|
|
21
|
-
type AllSelectionValueType = SingleSelectionValueType | MultiSelectionValueType | RangeSelectionValueType | OffsetSelectionValueType | null;
|
|
22
|
-
export interface UseOffsetSelectionCalendarProps extends Omit<BaseUseSelectionCalendarProps<OffsetSelectionValueType>, "startDateOffset" | "endDateOffset"> {
|
|
23
|
-
selectionVariant: "offset";
|
|
24
|
-
startDateOffset?: (date: DateValue) => DateValue;
|
|
25
|
-
endDateOffset?: (date: DateValue) => DateValue;
|
|
26
|
-
}
|
|
27
|
-
export interface UseRangeSelectionCalendarProps extends BaseUseSelectionCalendarProps<RangeSelectionValueType> {
|
|
28
|
-
selectionVariant: "range";
|
|
29
|
-
}
|
|
30
|
-
export interface UseMultiSelectionCalendarProps extends BaseUseSelectionCalendarProps<MultiSelectionValueType> {
|
|
31
|
-
selectionVariant: "multiselect";
|
|
32
|
-
}
|
|
33
|
-
export interface UseSingleSelectionCalendarProps extends BaseUseSelectionCalendarProps<SingleSelectionValueType> {
|
|
34
|
-
selectionVariant: "default";
|
|
35
|
-
}
|
|
36
|
-
export type useSelectionCalendarProps = UseSingleSelectionCalendarProps | UseMultiSelectionCalendarProps | UseRangeSelectionCalendarProps | UseOffsetSelectionCalendarProps;
|
|
37
|
-
export declare function isRangeOrOffsetSelectionValue(selectionValue?: AllSelectionValueType): selectionValue is RangeSelectionValueType | OffsetSelectionValueType;
|
|
38
|
-
export declare function isRangeOrOffsetSelectionWithStartDate(selectionValue?: AllSelectionValueType): selectionValue is RangeSelectionValueType | OffsetSelectionValueType;
|
|
39
|
-
export declare function useSelectionCalendar(props: useSelectionCalendarProps): {
|
|
40
|
-
state: {
|
|
41
|
-
selectedDate: DateValue | RangeSelectionValueType | OffsetSelectionValueType | MultiSelectionValueType | null | undefined;
|
|
42
|
-
hoveredDate: CalendarDate | import("@internationalized/date").CalendarDateTime | import("@internationalized/date").ZonedDateTime | null | undefined;
|
|
43
|
-
};
|
|
44
|
-
helpers: {
|
|
45
|
-
setSelectedDate: (event: SyntheticEvent<HTMLButtonElement>, newSelectedDate: DateValue) => void;
|
|
46
|
-
isSelected: (date: DateValue) => boolean;
|
|
47
|
-
setHoveredDate: (event: SyntheticEvent, date: DateValue | null) => void;
|
|
48
|
-
isHovered: (date: DateValue) => boolean;
|
|
49
|
-
isSelectedSpan: (date: DateValue) => boolean;
|
|
50
|
-
isHoveredSpan: (date: DateValue) => boolean;
|
|
51
|
-
isSelectedStart: (date: DateValue) => boolean;
|
|
52
|
-
isSelectedEnd: (date: DateValue) => boolean;
|
|
53
|
-
isHoveredOffset: (date: DateValue) => boolean;
|
|
54
|
-
};
|
|
55
|
-
};
|
|
56
|
-
export declare function useSelectionDay({ date }: {
|
|
57
|
-
date: DateValue;
|
|
58
|
-
}): {
|
|
59
|
-
handleClick: MouseEventHandler<HTMLButtonElement>;
|
|
60
|
-
handleKeyDown: KeyboardEventHandler<HTMLButtonElement>;
|
|
61
|
-
handleMouseOver: MouseEventHandler<HTMLButtonElement>;
|
|
62
|
-
handleMouseLeave: MouseEventHandler<HTMLButtonElement>;
|
|
63
|
-
status: {
|
|
64
|
-
selected: boolean;
|
|
65
|
-
selectedSpan: boolean;
|
|
66
|
-
hoveredSpan: boolean;
|
|
67
|
-
selectedStart: boolean;
|
|
68
|
-
selectedEnd: boolean;
|
|
69
|
-
hovered: boolean;
|
|
70
|
-
hoveredOffset: boolean;
|
|
71
|
-
};
|
|
72
|
-
dayProps: {
|
|
73
|
-
className: string;
|
|
74
|
-
"aria-pressed": string | undefined;
|
|
75
|
-
"aria-disabled": string | undefined;
|
|
76
|
-
};
|
|
77
|
-
};
|
|
78
|
-
export {};
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { IconButtonProps } from "../icon-button";
|
|
2
|
-
import { ColumnSearchProps } from "./ColumnSearch";
|
|
3
|
-
export interface ColumnPickerProps extends Omit<IconButtonProps, "icon">, Pick<ColumnSearchProps, "columns" | "onSelectionChange" | "selected"> {
|
|
4
|
-
icon?: string;
|
|
5
|
-
iconSize?: number;
|
|
6
|
-
}
|
|
7
|
-
export declare const ColumnPicker: import("react").ForwardRefExoticComponent<ColumnPickerProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { HTMLAttributes } from "react";
|
|
2
|
-
import { ListProps } from "../list";
|
|
3
|
-
export interface ColumnSearchProps extends HTMLAttributes<HTMLDivElement>, Pick<ListProps<string, "multiple">, "onMoveListItem" | "onSelectionChange" | "selected"> {
|
|
4
|
-
columns: string[];
|
|
5
|
-
}
|
|
6
|
-
export declare const ColumnSearch: import("react").ForwardRefExoticComponent<ColumnSearchProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import type { DataSourceRow } from "@vuu-ui/vuu-data-types";
|
|
2
|
-
import type { VuuRange } from "@vuu-ui/vuu-protocol-types";
|
|
3
|
-
export declare class MovingWindow {
|
|
4
|
-
data: DataSourceRow[];
|
|
5
|
-
rowCount: number;
|
|
6
|
-
private range;
|
|
7
|
-
constructor({ from, to }: VuuRange);
|
|
8
|
-
setRowCount: (rowCount: number) => void;
|
|
9
|
-
add(data: DataSourceRow): void;
|
|
10
|
-
getAtIndex(index: number): DataSourceRow | undefined;
|
|
11
|
-
isWithinRange(index: number): boolean;
|
|
12
|
-
setRange({ from, to }: VuuRange): void;
|
|
13
|
-
getSelectedRows(): DataSourceRow[];
|
|
14
|
-
}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { ReactElement } from "react";
|
|
2
|
-
import { CollectionHookResult } from "./collectionTypes";
|
|
3
|
-
export interface collectionContext<T> {
|
|
4
|
-
collection: CollectionHookResult<T>;
|
|
5
|
-
}
|
|
6
|
-
export declare const CollectionContext: import("react").Context<CollectionHookResult<any> | undefined>;
|
|
7
|
-
interface ContextProviderProps<Item> {
|
|
8
|
-
children: ReactElement;
|
|
9
|
-
collectionHook: CollectionHookResult<Item>;
|
|
10
|
-
}
|
|
11
|
-
export declare function CollectionProvider<Item>({ children, collectionHook, ...props }: ContextProviderProps<Item>): import("react/jsx-runtime").JSX.Element;
|
|
12
|
-
export declare function useCollection<Item>(): CollectionHookResult<Item> | undefined;
|
|
13
|
-
export {};
|