@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.
Files changed (301) hide show
  1. package/cjs/column-picker/ColumnPicker.js +2 -2
  2. package/cjs/column-picker/ColumnPicker.js.map +1 -1
  3. package/cjs/column-picker/ColumnSearch.js +4 -24
  4. package/cjs/column-picker/ColumnSearch.js.map +1 -1
  5. package/cjs/context-panel-provider/ContextPanelProvider.js +55 -0
  6. package/cjs/context-panel-provider/ContextPanelProvider.js.map +1 -0
  7. package/cjs/index.js +6 -80
  8. package/cjs/index.js.map +1 -1
  9. package/cjs/sortable-list/SortableList.js +38 -0
  10. package/cjs/sortable-list/SortableList.js.map +1 -0
  11. package/cjs/toolbar/Toolbar.js.map +1 -1
  12. package/cjs/toolbar/useSelection.js +0 -1
  13. package/cjs/toolbar/useSelection.js.map +1 -1
  14. package/esm/column-picker/ColumnPicker.js +2 -2
  15. package/esm/column-picker/ColumnPicker.js.map +1 -1
  16. package/esm/column-picker/ColumnSearch.js +5 -25
  17. package/esm/column-picker/ColumnSearch.js.map +1 -1
  18. package/esm/context-panel-provider/ContextPanelProvider.js +51 -0
  19. package/esm/context-panel-provider/ContextPanelProvider.js.map +1 -0
  20. package/esm/index.js +2 -21
  21. package/esm/index.js.map +1 -1
  22. package/esm/sortable-list/SortableList.js +35 -0
  23. package/esm/sortable-list/SortableList.js.map +1 -0
  24. package/esm/toolbar/Toolbar.js.map +1 -1
  25. package/esm/toolbar/useSelection.js +0 -1
  26. package/esm/toolbar/useSelection.js.map +1 -1
  27. package/package.json +15 -17
  28. package/cjs/common-hooks/collectionProvider.js +0 -24
  29. package/cjs/common-hooks/collectionProvider.js.map +0 -1
  30. package/cjs/common-hooks/isPlainObject.js +0 -6
  31. package/cjs/common-hooks/isPlainObject.js.map +0 -1
  32. package/cjs/common-hooks/itemToString.js +0 -24
  33. package/cjs/common-hooks/itemToString.js.map +0 -1
  34. package/cjs/common-hooks/useCollectionItems.js +0 -309
  35. package/cjs/common-hooks/useCollectionItems.js.map +0 -1
  36. package/cjs/common-hooks/useSelection.js +0 -212
  37. package/cjs/common-hooks/useSelection.js.map +0 -1
  38. package/cjs/list/Highlighter.css.js +0 -6
  39. package/cjs/list/Highlighter.css.js.map +0 -1
  40. package/cjs/list/Highlighter.js +0 -36
  41. package/cjs/list/Highlighter.js.map +0 -1
  42. package/cjs/list/List.css.js +0 -6
  43. package/cjs/list/List.css.js.map +0 -1
  44. package/cjs/list/List.js +0 -317
  45. package/cjs/list/List.js.map +0 -1
  46. package/cjs/list/ListItem.css.js +0 -6
  47. package/cjs/list/ListItem.css.js.map +0 -1
  48. package/cjs/list/ListItem.js +0 -84
  49. package/cjs/list/ListItem.js.map +0 -1
  50. package/cjs/list/ListItemGroup.js +0 -6
  51. package/cjs/list/ListItemGroup.js.map +0 -1
  52. package/cjs/list/ListItemHeader.js +0 -6
  53. package/cjs/list/ListItemHeader.js.map +0 -1
  54. package/cjs/list/RadioIcon.css.js +0 -6
  55. package/cjs/list/RadioIcon.css.js.map +0 -1
  56. package/cjs/list/RadioIcon.js +0 -27
  57. package/cjs/list/RadioIcon.js.map +0 -1
  58. package/cjs/list/common-hooks/keyUtils.js +0 -78
  59. package/cjs/list/common-hooks/keyUtils.js.map +0 -1
  60. package/cjs/list/common-hooks/list-dom-utils.js +0 -25
  61. package/cjs/list/common-hooks/list-dom-utils.js.map +0 -1
  62. package/cjs/list/common-hooks/useCollapsibleGroups.js +0 -72
  63. package/cjs/list/common-hooks/useCollapsibleGroups.js.map +0 -1
  64. package/cjs/list/common-hooks/useImperativeScrollingAPI.js +0 -52
  65. package/cjs/list/common-hooks/useImperativeScrollingAPI.js.map +0 -1
  66. package/cjs/list/common-hooks/useKeyboardNavigation.js +0 -289
  67. package/cjs/list/common-hooks/useKeyboardNavigation.js.map +0 -1
  68. package/cjs/list/common-hooks/useTypeahead.js +0 -74
  69. package/cjs/list/common-hooks/useTypeahead.js.map +0 -1
  70. package/cjs/list/common-hooks/useViewportTracking.js +0 -133
  71. package/cjs/list/common-hooks/useViewportTracking.js.map +0 -1
  72. package/cjs/list/common-hooks/utils/collection-item-utils.js +0 -182
  73. package/cjs/list/common-hooks/utils/collection-item-utils.js.map +0 -1
  74. package/cjs/list/common-hooks/utils/filter-utils.js +0 -11
  75. package/cjs/list/common-hooks/utils/filter-utils.js.map +0 -1
  76. package/cjs/list/common-hooks/utils/isSelected.js +0 -9
  77. package/cjs/list/common-hooks/utils/isSelected.js.map +0 -1
  78. package/cjs/list/useList.js +0 -278
  79. package/cjs/list/useList.js.map +0 -1
  80. package/cjs/list/useListDrop.js +0 -92
  81. package/cjs/list/useListDrop.js.map +0 -1
  82. package/cjs/list/useListHeight.js +0 -77
  83. package/cjs/list/useListHeight.js.map +0 -1
  84. package/cjs/list/useScrollPosition.js +0 -74
  85. package/cjs/list/useScrollPosition.js.map +0 -1
  86. package/esm/common-hooks/collectionProvider.js +0 -20
  87. package/esm/common-hooks/collectionProvider.js.map +0 -1
  88. package/esm/common-hooks/isPlainObject.js +0 -4
  89. package/esm/common-hooks/isPlainObject.js.map +0 -1
  90. package/esm/common-hooks/itemToString.js +0 -22
  91. package/esm/common-hooks/itemToString.js.map +0 -1
  92. package/esm/common-hooks/useCollectionItems.js +0 -307
  93. package/esm/common-hooks/useCollectionItems.js.map +0 -1
  94. package/esm/common-hooks/useSelection.js +0 -205
  95. package/esm/common-hooks/useSelection.js.map +0 -1
  96. package/esm/list/Highlighter.css.js +0 -4
  97. package/esm/list/Highlighter.css.js.map +0 -1
  98. package/esm/list/Highlighter.js +0 -34
  99. package/esm/list/Highlighter.js.map +0 -1
  100. package/esm/list/List.css.js +0 -4
  101. package/esm/list/List.css.js.map +0 -1
  102. package/esm/list/List.js +0 -315
  103. package/esm/list/List.js.map +0 -1
  104. package/esm/list/ListItem.css.js +0 -4
  105. package/esm/list/ListItem.css.js.map +0 -1
  106. package/esm/list/ListItem.js +0 -81
  107. package/esm/list/ListItem.js.map +0 -1
  108. package/esm/list/ListItemGroup.js +0 -4
  109. package/esm/list/ListItemGroup.js.map +0 -1
  110. package/esm/list/ListItemHeader.js +0 -4
  111. package/esm/list/ListItemHeader.js.map +0 -1
  112. package/esm/list/RadioIcon.css.js +0 -4
  113. package/esm/list/RadioIcon.css.js.map +0 -1
  114. package/esm/list/RadioIcon.js +0 -25
  115. package/esm/list/RadioIcon.js.map +0 -1
  116. package/esm/list/common-hooks/keyUtils.js +0 -64
  117. package/esm/list/common-hooks/keyUtils.js.map +0 -1
  118. package/esm/list/common-hooks/list-dom-utils.js +0 -19
  119. package/esm/list/common-hooks/list-dom-utils.js.map +0 -1
  120. package/esm/list/common-hooks/useCollapsibleGroups.js +0 -70
  121. package/esm/list/common-hooks/useCollapsibleGroups.js.map +0 -1
  122. package/esm/list/common-hooks/useImperativeScrollingAPI.js +0 -50
  123. package/esm/list/common-hooks/useImperativeScrollingAPI.js.map +0 -1
  124. package/esm/list/common-hooks/useKeyboardNavigation.js +0 -286
  125. package/esm/list/common-hooks/useKeyboardNavigation.js.map +0 -1
  126. package/esm/list/common-hooks/useTypeahead.js +0 -72
  127. package/esm/list/common-hooks/useTypeahead.js.map +0 -1
  128. package/esm/list/common-hooks/useViewportTracking.js +0 -131
  129. package/esm/list/common-hooks/useViewportTracking.js.map +0 -1
  130. package/esm/list/common-hooks/utils/collection-item-utils.js +0 -168
  131. package/esm/list/common-hooks/utils/collection-item-utils.js.map +0 -1
  132. package/esm/list/common-hooks/utils/filter-utils.js +0 -8
  133. package/esm/list/common-hooks/utils/filter-utils.js.map +0 -1
  134. package/esm/list/common-hooks/utils/isSelected.js +0 -7
  135. package/esm/list/common-hooks/utils/isSelected.js.map +0 -1
  136. package/esm/list/useList.js +0 -276
  137. package/esm/list/useList.js.map +0 -1
  138. package/esm/list/useListDrop.js +0 -90
  139. package/esm/list/useListDrop.js.map +0 -1
  140. package/esm/list/useListHeight.js +0 -75
  141. package/esm/list/useListHeight.js.map +0 -1
  142. package/esm/list/useScrollPosition.js +0 -72
  143. package/esm/list/useScrollPosition.js.map +0 -1
  144. package/types/calendar/Calendar.d.ts +0 -13
  145. package/types/calendar/index.d.ts +0 -4
  146. package/types/calendar/internal/CalendarCarousel.d.ts +0 -3
  147. package/types/calendar/internal/CalendarContext.d.ts +0 -8
  148. package/types/calendar/internal/CalendarDay.d.ts +0 -14
  149. package/types/calendar/internal/CalendarMonth.d.ts +0 -10
  150. package/types/calendar/internal/CalendarNavigation.d.ts +0 -16
  151. package/types/calendar/internal/CalendarWeekHeader.d.ts +0 -3
  152. package/types/calendar/internal/useFocusManagement.d.ts +0 -9
  153. package/types/calendar/internal/utils.d.ts +0 -15
  154. package/types/calendar/useCalendar.d.ts +0 -54
  155. package/types/calendar/useCalendarDay.d.ts +0 -22
  156. package/types/calendar/useSelection.d.ts +0 -78
  157. package/types/column-picker/ColumnPicker.d.ts +0 -7
  158. package/types/column-picker/ColumnSearch.d.ts +0 -6
  159. package/types/column-picker/index.d.ts +0 -2
  160. package/types/column-picker/moving-window.d.ts +0 -14
  161. package/types/common-hooks/collectionProvider.d.ts +0 -13
  162. package/types/common-hooks/collectionTypes.d.ts +0 -58
  163. package/types/common-hooks/index.d.ts +0 -8
  164. package/types/common-hooks/isPlainObject.d.ts +0 -1
  165. package/types/common-hooks/itemToString.d.ts +0 -2
  166. package/types/common-hooks/navigationTypes.d.ts +0 -36
  167. package/types/common-hooks/selectionTypes.d.ts +0 -70
  168. package/types/common-hooks/use-resize-observer.d.ts +0 -16
  169. package/types/common-hooks/useCollectionItems.d.ts +0 -2
  170. package/types/common-hooks/useControlled.d.ts +0 -24
  171. package/types/common-hooks/useSelection.d.ts +0 -8
  172. package/types/cycle-state-button/CycleStateButton.d.ts +0 -11
  173. package/types/cycle-state-button/index.d.ts +0 -1
  174. package/types/date-input/DateInput.d.ts +0 -60
  175. package/types/date-input/index.d.ts +0 -1
  176. package/types/date-picker/DatePicker.d.ts +0 -66
  177. package/types/date-picker/DatePickerContext.d.ts +0 -19
  178. package/types/date-picker/DatePickerPanel.d.ts +0 -10
  179. package/types/date-picker/index.d.ts +0 -1
  180. package/types/drag-drop/DragDropProvider.d.ts +0 -38
  181. package/types/drag-drop/DragDropState.d.ts +0 -15
  182. package/types/drag-drop/Draggable.d.ts +0 -13
  183. package/types/drag-drop/DropIndicator.d.ts +0 -5
  184. package/types/drag-drop/dragDropTypes.d.ts +0 -100
  185. package/types/drag-drop/drop-target-utils.d.ts +0 -82
  186. package/types/drag-drop/index.d.ts +0 -6
  187. package/types/drag-drop/useAutoScroll.d.ts +0 -11
  188. package/types/drag-drop/useDragDisplacers.d.ts +0 -17
  189. package/types/drag-drop/useDragDrop.d.ts +0 -2
  190. package/types/drag-drop/useDragDropCopy.d.ts +0 -6
  191. package/types/drag-drop/useDragDropIndicator.d.ts +0 -2
  192. package/types/drag-drop/useDragDropNaturalMovement.d.ts +0 -2
  193. package/types/drag-drop/useDropIndicator.d.ts +0 -8
  194. package/types/drag-drop/useGlobalDragDrop.d.ts +0 -11
  195. package/types/drag-drop/useTransition.d.ts +0 -3
  196. package/types/editable/index.d.ts +0 -1
  197. package/types/editable/useEditableText.d.ts +0 -19
  198. package/types/editable-label/EditableLabel.d.ts +0 -19
  199. package/types/editable-label/index.d.ts +0 -1
  200. package/types/expando-input/ExpandoInput.d.ts +0 -6
  201. package/types/expando-input/index.d.ts +0 -1
  202. package/types/icon-button/Icon.d.ts +0 -6
  203. package/types/icon-button/IconButton.d.ts +0 -6
  204. package/types/icon-button/ToggleIconButton.d.ts +0 -5
  205. package/types/icon-button/index.d.ts +0 -3
  206. package/types/index.d.ts +0 -27
  207. package/types/instrument-picker/SearchCell.d.ts +0 -2
  208. package/types/instrument-picker/TablePicker.d.ts +0 -10
  209. package/types/instrument-picker/index.d.ts +0 -1
  210. package/types/instrument-picker/moving-window.d.ts +0 -14
  211. package/types/instrument-picker/useDataSource.d.ts +0 -6
  212. package/types/instrument-picker/useTablePicker.d.ts +0 -47
  213. package/types/list/ChevronIcon.d.ts +0 -7
  214. package/types/list/Highlighter.d.ts +0 -6
  215. package/types/list/List.d.ts +0 -6
  216. package/types/list/ListItem.d.ts +0 -6
  217. package/types/list/ListItemGroup.d.ts +0 -6
  218. package/types/list/ListItemHeader.d.ts +0 -5
  219. package/types/list/RadioIcon.d.ts +0 -4
  220. package/types/list/common-hooks/index.d.ts +0 -10
  221. package/types/list/common-hooks/keyUtils.d.ts +0 -14
  222. package/types/list/common-hooks/list-dom-utils.d.ts +0 -5
  223. package/types/list/common-hooks/useCollapsibleGroups.d.ts +0 -14
  224. package/types/list/common-hooks/useImperativeScrollingAPI.d.ts +0 -14
  225. package/types/list/common-hooks/useKeyboardNavigation.d.ts +0 -3
  226. package/types/list/common-hooks/useTypeahead.d.ts +0 -14
  227. package/types/list/common-hooks/useViewportTracking.d.ts +0 -14
  228. package/types/list/common-hooks/utils/collection-item-utils.d.ts +0 -21
  229. package/types/list/common-hooks/utils/filter-utils.d.ts +0 -4
  230. package/types/list/common-hooks/utils/index.d.ts +0 -4
  231. package/types/list/common-hooks/utils/isSelected.d.ts +0 -2
  232. package/types/list/index.d.ts +0 -9
  233. package/types/list/keyset.d.ts +0 -9
  234. package/types/list/listTypes.d.ts +0 -200
  235. package/types/list/useList.d.ts +0 -3
  236. package/types/list/useListDrop.d.ts +0 -15
  237. package/types/list/useListHeight.d.ts +0 -19
  238. package/types/list/useScrollPosition.d.ts +0 -19
  239. package/types/measured-container/MeasuredContainer.d.ts +0 -14
  240. package/types/measured-container/index.d.ts +0 -2
  241. package/types/measured-container/useMeasuredContainer.d.ts +0 -23
  242. package/types/measured-container/useResizeObserver.d.ts +0 -15
  243. package/types/overflow-container/OverflowContainer.d.ts +0 -15
  244. package/types/overflow-container/index.d.ts +0 -2
  245. package/types/overflow-container/overflow-utils.d.ts +0 -48
  246. package/types/overflow-container/useOverflowContainer.d.ts +0 -19
  247. package/types/price-ticker/PriceTicker.d.ts +0 -7
  248. package/types/price-ticker/index.d.ts +0 -1
  249. package/types/split-button/SplitButton.d.ts +0 -11
  250. package/types/split-button/SplitStateButton.d.ts +0 -5
  251. package/types/split-button/index.d.ts +0 -2
  252. package/types/split-button/useSplitButton.d.ts +0 -311
  253. package/types/table-search/SearchCell.d.ts +0 -2
  254. package/types/table-search/TableSearch.d.ts +0 -9
  255. package/types/table-search/index.d.ts +0 -1
  256. package/types/table-search/moving-window.d.ts +0 -14
  257. package/types/table-search/useTableSearch.d.ts +0 -15
  258. package/types/tabs-next/TabBar.d.ts +0 -12
  259. package/types/tabs-next/TabListNext.d.ts +0 -12
  260. package/types/tabs-next/TabNext.d.ts +0 -12
  261. package/types/tabs-next/TabNextAction.d.ts +0 -5
  262. package/types/tabs-next/TabNextContext.d.ts +0 -12
  263. package/types/tabs-next/TabNextPanel.d.ts +0 -8
  264. package/types/tabs-next/TabNextTrigger.d.ts +0 -5
  265. package/types/tabs-next/TabOverflowList.d.ts +0 -11
  266. package/types/tabs-next/TabsNext.d.ts +0 -17
  267. package/types/tabs-next/TabsNextContext.d.ts +0 -21
  268. package/types/tabs-next/hooks/useCollection.d.ts +0 -18
  269. package/types/tabs-next/hooks/useFocusOutside.d.ts +0 -2
  270. package/types/tabs-next/hooks/useOverflow.d.ts +0 -11
  271. package/types/tabs-next/index.d.ts +0 -7
  272. package/types/tabstrip/Tab.d.ts +0 -27
  273. package/types/tabstrip/TabMenu.d.ts +0 -23
  274. package/types/tabstrip/TabMenuOptions.d.ts +0 -10
  275. package/types/tabstrip/TabsTypes.d.ts +0 -127
  276. package/types/tabstrip/Tabstrip.d.ts +0 -2
  277. package/types/tabstrip/index.d.ts +0 -5
  278. package/types/tabstrip/tabstrip-dom-utils.d.ts +0 -2
  279. package/types/tabstrip/useAnimatedSelectionThumb.d.ts +0 -7
  280. package/types/tabstrip/useKeyboardNavigation.d.ts +0 -29
  281. package/types/tabstrip/useSelection.d.ts +0 -13
  282. package/types/tabstrip/useTabstrip.d.ts +0 -55
  283. package/types/toolbar/Toolbar.d.ts +0 -19
  284. package/types/toolbar/index.d.ts +0 -1
  285. package/types/toolbar/toolbar-dom-utils.d.ts +0 -3
  286. package/types/toolbar/useKeyboardNavigation.d.ts +0 -32
  287. package/types/toolbar/useSelection.d.ts +0 -22
  288. package/types/toolbar/useToolbar.d.ts +0 -28
  289. package/types/utils/deprecated-types.d.ts +0 -2
  290. package/types/utils/escapeRegExp.d.ts +0 -1
  291. package/types/utils/forwardCallbackProps.d.ts +0 -3
  292. package/types/utils/index.d.ts +0 -5
  293. package/types/utils/isOverflowElement.d.ts +0 -1
  294. package/types/utils/isPlainObject.d.ts +0 -1
  295. package/types/vuu-date-picker/VuuDatePicker.d.ts +0 -7
  296. package/types/vuu-date-picker/index.d.ts +0 -1
  297. package/types/vuu-input/VuuInput.d.ts +0 -17
  298. package/types/vuu-input/index.d.ts +0 -1
  299. package/types/vuu-typeahead-input/VuuTypeaheadInput.d.ts +0 -29
  300. package/types/vuu-typeahead-input/index.d.ts +0 -1
  301. package/types/vuu-typeahead-input/useVuuTypeaheadInput.d.ts +0 -15
@@ -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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"}
@@ -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":";;;;AAsBA,MAAM,gBAAmB,GAAA,CACvB,SACA,EAAA,UAAA,EACA,cAAc,CACX,KAAA;AACH,EAAA,IAAI,cAAc,CAAG,EAAA;AACnB,IAAO,OAAA,CAAA;AAAA,GACT,MAAA,IAAW,gBAAgB,CAAG,EAAA;AAC5B,IAAA,OAAO,SAAY,GAAA,UAAA;AAAA,GACd,MAAA;AACL,IAAO,OAAA,SAAA,GAAY,CAAK,IAAA,UAAA,GAAa,WAAe,CAAA,GAAA,UAAA;AAAA;AAExD,CAAA;AAEO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,kBAAA;AAAA,EACA,aAAA;AAAA;AAAA,EAEA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAY,cAAiB,GAAA,EAAA;AAAA,EAC7B;AACF,CAA6C,KAAA;AAE3C,EAAA,MAAM,CAAC,kBAAA,EAAoB,qBAAqB,CAAA,GAC9C,SAAiB,cAAc,CAAA;AAEjC,EAAA,MAAM,GAAG,WAAW,CAAI,GAAA,QAAA,CAAS,EAAE,CAAA;AAGnC,EAAM,MAAA,YAAA,GAAe,OAA8B,IAAI,CAAA;AAEvD,EAAA,MAAM,CAAC,aAAA,EAAe,kBAAkB,CAAA,GAAI,QAAQ,MAAM;AACxD,IAAA,IAAI,MAAS,GAAA,CAAA;AACb,IAAA,MAAM,aAAa,kBAAsB,IAAA,cAAA;AACzC,IAAA,MAAMA,cAAgB,GAAA,gBAAA,CAAiB,SAAW,EAAA,UAAA,EAAY,WAAW,CAAA;AACzE,IAAA,IAAI,WAAW,KAAW,CAAA,EAAA;AAExB,MAAO,OAAA,CAACA,gBAAe,KAAS,CAAA,CAAA;AAAA;AAIlC,IAAA,MAAM,kBACJ,GAAA,IAAA,CAAK,GAAI,CAAA,kBAAA,EAAoB,SAAS,CAAK,IAAA,kBAAA;AAE7C,IAAI,IAAA,OAAO,kBAAkB,UAAY,EAAA;AACvC,MAAA,MAAA,IACE,KAAM,CAAA,kBAAkB,CACrB,CAAA,IAAA,CAAK,CAAC,CACN,CAAA,MAAA;AAAA,QACC,CAAC,KAAO,EAAA,CAAA,EAAG,UAAU,KAAQ,GAAA,aAAA,CAAc,KAAK,CAAI,GAAA,WAAA;AAAA,QACpD;AAAA,OACF;AAAA,MAEF,WAAA;AAAA,KACG,MAAA;AACL,MAAA,MAAA,IACE,kBAAqB,GAAA,MAAA,CAAO,UAAU,CAAA,GAAA,CACrC,qBAAqB,CAAK,IAAA,WAAA;AAAA;AAG/B,IAAA,MAAM,UAAa,GAAA,MAAA;AAEnB,IAAO,OAAA,CAACA,gBAAe,UAAU,CAAA;AAAA,GAChC,EAAA;AAAA,IACD,kBAAA;AAAA,IACA,aAAA;AAAA,IACA,MAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,kBAAiC,WAAY,CAAA,CAAC,EAAE,MAAA,EAAAC,SAAa,KAAA;AACjE,IAAI,IAAA,OAAOA,YAAW,QAAU,EAAA;AAC9B,MAAA,qBAAA,CAAsBA,OAAM,CAAA;AAAA;AAC9B,GACF,EAAG,EAAE,CAAA;AAEL,EAAM,MAAA,iBAAA,GAAoB,WAAyC,CAAA,CAAC,EAAO,KAAA;AACzE,IAAA,YAAA,CAAa,OAAU,GAAA,EAAA;AACvB,IAAA,WAAA,CAAY,EAAE,CAAA;AAAA,GAChB,EAAG,EAAE,CAAA;AAEL,EAAkB,iBAAA,CAAA,YAAA,EAAc,UAAY,EAAA,eAAA,EAAiB,IAAI,CAAA;AAEjE,EAAO,OAAA;AAAA,IACL,kBAAA;AAAA,IACA,aAAA;AAAA,IACA,kBAAkB,IAAM,EAAA,MAAA;AAAA,IACxB,cAAgB,EAAA,kBAAA;AAAA,IAChB;AAAA,GACF;AACF;;;;"}
@@ -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,4 +0,0 @@
1
- export * from "./Calendar";
2
- export * from "./useCalendarDay";
3
- export * from "./useCalendar";
4
- export * from "./useSelection";
@@ -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,2 +0,0 @@
1
- export * from "./ColumnPicker";
2
- export * from "./ColumnSearch";
@@ -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 {};