@vuu-ui/vuu-ui-controls 0.9.2 → 0.10.0

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 (438) hide show
  1. package/cjs/calendar/Calendar.js.map +1 -1
  2. package/cjs/calendar/internal/CalendarCarousel.js.map +1 -1
  3. package/cjs/calendar/internal/CalendarContext.js.map +1 -1
  4. package/cjs/calendar/internal/CalendarDay.js.map +1 -1
  5. package/cjs/calendar/internal/CalendarMonth.js.map +1 -1
  6. package/cjs/calendar/internal/CalendarNavigation.js.map +1 -1
  7. package/cjs/calendar/internal/CalendarWeekHeader.js.map +1 -1
  8. package/cjs/calendar/internal/useFocusManagement.js.map +1 -1
  9. package/cjs/calendar/internal/utils.js.map +1 -1
  10. package/cjs/calendar/useCalendar.js.map +1 -1
  11. package/cjs/calendar/useCalendarDay.js.map +1 -1
  12. package/cjs/calendar/useSelection.js.map +1 -1
  13. package/cjs/column-picker/ColumnPicker.js.map +1 -1
  14. package/cjs/column-picker/ColumnSearch.js.map +1 -1
  15. package/cjs/common-hooks/collectionProvider.js.map +1 -1
  16. package/cjs/common-hooks/itemToString.js.map +1 -1
  17. package/cjs/common-hooks/selectionTypes.js.map +1 -1
  18. package/cjs/common-hooks/use-resize-observer.js.map +1 -1
  19. package/cjs/common-hooks/useCollectionItems.js.map +1 -1
  20. package/cjs/common-hooks/useControlled.js.map +1 -1
  21. package/cjs/common-hooks/useSelection.js.map +1 -1
  22. package/cjs/cycle-state-button/CycleStateButton.js.map +1 -1
  23. package/cjs/date-input/DateInput.js.map +1 -1
  24. package/cjs/date-picker/DatePicker.js.map +1 -1
  25. package/cjs/date-picker/DatePickerContext.js.map +1 -1
  26. package/cjs/date-picker/DatePickerPanel.js.map +1 -1
  27. package/cjs/drag-drop/DragDropProvider.js.map +1 -1
  28. package/cjs/drag-drop/DragDropState.js.map +1 -1
  29. package/cjs/drag-drop/Draggable.js +0 -5
  30. package/cjs/drag-drop/Draggable.js.map +1 -1
  31. package/cjs/drag-drop/dragDropTypes.js.map +1 -1
  32. package/cjs/drag-drop/drop-target-utils.js.map +1 -1
  33. package/cjs/drag-drop/useAutoScroll.js.map +1 -1
  34. package/cjs/drag-drop/useDragDisplacers.js.map +1 -1
  35. package/cjs/drag-drop/useDragDrop.js.map +1 -1
  36. package/cjs/drag-drop/useDragDropCopy.js.map +1 -1
  37. package/cjs/drag-drop/useDragDropIndicator.js.map +1 -1
  38. package/cjs/drag-drop/useDragDropNaturalMovement.js.map +1 -1
  39. package/cjs/drag-drop/useDropIndicator.js.map +1 -1
  40. package/cjs/drag-drop/useGlobalDragDrop.js.map +1 -1
  41. package/cjs/editable/useEditableText.js.map +1 -1
  42. package/cjs/editable-label/EditableLabel.css.js +1 -1
  43. package/cjs/editable-label/EditableLabel.js.map +1 -1
  44. package/cjs/expando-input/ExpandoInput.js +1 -1
  45. package/cjs/expando-input/ExpandoInput.js.map +1 -1
  46. package/cjs/icon-button/Icon.js.map +1 -1
  47. package/cjs/icon-button/IconButton.js.map +1 -1
  48. package/cjs/icon-button/ToggleIconButton.css.js +1 -1
  49. package/cjs/icon-button/ToggleIconButton.js.map +1 -1
  50. package/cjs/index.js +14 -5
  51. package/cjs/index.js.map +1 -1
  52. package/cjs/instrument-picker/TablePicker.js.map +1 -1
  53. package/cjs/instrument-picker/useTablePicker.js.map +1 -1
  54. package/cjs/list/Highlighter.js.map +1 -1
  55. package/cjs/list/List.js.map +1 -1
  56. package/cjs/list/ListItem.js.map +1 -1
  57. package/cjs/list/RadioIcon.js.map +1 -1
  58. package/cjs/list/common-hooks/keyUtils.js.map +1 -1
  59. package/cjs/list/common-hooks/list-dom-utils.js.map +1 -1
  60. package/cjs/list/common-hooks/useCollapsibleGroups.js.map +1 -1
  61. package/cjs/list/common-hooks/useImperativeScrollingAPI.js.map +1 -1
  62. package/cjs/list/common-hooks/useKeyboardNavigation.js.map +1 -1
  63. package/cjs/list/common-hooks/useTypeahead.js.map +1 -1
  64. package/cjs/list/common-hooks/useViewportTracking.js.map +1 -1
  65. package/cjs/list/common-hooks/utils/collection-item-utils.js.map +1 -1
  66. package/cjs/list/common-hooks/utils/filter-utils.js.map +1 -1
  67. package/cjs/list/common-hooks/utils/isSelected.js.map +1 -1
  68. package/cjs/list/useList.js.map +1 -1
  69. package/cjs/list/useListDrop.js.map +1 -1
  70. package/cjs/list/useListHeight.js.map +1 -1
  71. package/cjs/list/useScrollPosition.js.map +1 -1
  72. package/cjs/measured-container/MeasuredContainer.js +1 -0
  73. package/cjs/measured-container/MeasuredContainer.js.map +1 -1
  74. package/cjs/measured-container/useMeasuredContainer.js +4 -1
  75. package/cjs/measured-container/useMeasuredContainer.js.map +1 -1
  76. package/cjs/measured-container/useResizeObserver.js.map +1 -1
  77. package/cjs/overflow-container/OverflowContainer.js.map +1 -1
  78. package/cjs/overflow-container/overflow-utils.js.map +1 -1
  79. package/cjs/overflow-container/useOverflowContainer.js.map +1 -1
  80. package/cjs/price-ticker/PriceTicker.js.map +1 -1
  81. package/cjs/split-button/SplitButton.css.js +1 -1
  82. package/cjs/split-button/SplitButton.js.map +1 -1
  83. package/cjs/split-button/SplitStateButton.css.js +1 -1
  84. package/cjs/split-button/SplitStateButton.js.map +1 -1
  85. package/cjs/split-button/useSplitButton.js.map +1 -1
  86. package/cjs/table-search/SearchCell.css.js +1 -1
  87. package/cjs/table-search/SearchCell.js +8 -3
  88. package/cjs/table-search/SearchCell.js.map +1 -1
  89. package/cjs/table-search/TableSearch.js +11 -18
  90. package/cjs/table-search/TableSearch.js.map +1 -1
  91. package/cjs/table-search/useTableSearch.js +1 -1
  92. package/cjs/table-search/useTableSearch.js.map +1 -1
  93. package/cjs/tabs-next/TabBar.css.js +6 -0
  94. package/cjs/tabs-next/TabBar.css.js.map +1 -0
  95. package/cjs/tabs-next/TabBar.js +41 -0
  96. package/cjs/tabs-next/TabBar.js.map +1 -0
  97. package/cjs/tabs-next/TabListNext.css.js +6 -0
  98. package/cjs/tabs-next/TabListNext.css.js.map +1 -0
  99. package/cjs/tabs-next/TabListNext.js +124 -0
  100. package/cjs/tabs-next/TabListNext.js.map +1 -0
  101. package/cjs/tabs-next/TabNext.css.js +6 -0
  102. package/cjs/tabs-next/TabNext.css.js.map +1 -0
  103. package/cjs/tabs-next/TabNext.js +110 -0
  104. package/cjs/tabs-next/TabNext.js.map +1 -0
  105. package/cjs/tabs-next/TabNextAction.js +35 -0
  106. package/cjs/tabs-next/TabNextAction.js.map +1 -0
  107. package/cjs/tabs-next/TabNextContext.js +23 -0
  108. package/cjs/tabs-next/TabNextContext.js.map +1 -0
  109. package/cjs/tabs-next/TabNextPanel.css.js +6 -0
  110. package/cjs/tabs-next/TabNextPanel.css.js.map +1 -0
  111. package/cjs/tabs-next/TabNextPanel.js +77 -0
  112. package/cjs/tabs-next/TabNextPanel.js.map +1 -0
  113. package/cjs/tabs-next/TabNextTrigger.css.js +6 -0
  114. package/cjs/tabs-next/TabNextTrigger.css.js.map +1 -0
  115. package/cjs/tabs-next/TabNextTrigger.js +74 -0
  116. package/cjs/tabs-next/TabNextTrigger.js.map +1 -0
  117. package/cjs/tabs-next/TabOverflowList.css.js +6 -0
  118. package/cjs/tabs-next/TabOverflowList.css.js.map +1 -0
  119. package/cjs/tabs-next/TabOverflowList.js +130 -0
  120. package/cjs/tabs-next/TabOverflowList.js.map +1 -0
  121. package/cjs/tabs-next/TabsNext.js +174 -0
  122. package/cjs/tabs-next/TabsNext.js.map +1 -0
  123. package/cjs/tabs-next/TabsNextContext.js +33 -0
  124. package/cjs/tabs-next/TabsNextContext.js.map +1 -0
  125. package/cjs/tabs-next/hooks/useCollection.js +91 -0
  126. package/cjs/tabs-next/hooks/useCollection.js.map +1 -0
  127. package/cjs/tabs-next/hooks/useFocusOutside.js +24 -0
  128. package/cjs/tabs-next/hooks/useFocusOutside.js.map +1 -0
  129. package/cjs/tabs-next/hooks/useOverflow.js +138 -0
  130. package/cjs/tabs-next/hooks/useOverflow.js.map +1 -0
  131. package/cjs/tabstrip/Tab.js.map +1 -1
  132. package/cjs/tabstrip/TabMenu.js.map +1 -1
  133. package/cjs/tabstrip/TabMenuOptions.js.map +1 -1
  134. package/cjs/tabstrip/Tabstrip.css.js +1 -1
  135. package/cjs/tabstrip/Tabstrip.js.map +1 -1
  136. package/cjs/tabstrip/tabstrip-dom-utils.js.map +1 -1
  137. package/cjs/tabstrip/useAnimatedSelectionThumb.js.map +1 -1
  138. package/cjs/tabstrip/useKeyboardNavigation.js.map +1 -1
  139. package/cjs/tabstrip/useSelection.js.map +1 -1
  140. package/cjs/tabstrip/useTabstrip.js.map +1 -1
  141. package/cjs/toolbar/Toolbar.js.map +1 -1
  142. package/cjs/toolbar/toolbar-dom-utils.js.map +1 -1
  143. package/cjs/toolbar/useKeyboardNavigation.js.map +1 -1
  144. package/cjs/toolbar/useSelection.js.map +1 -1
  145. package/cjs/toolbar/useToolbar.js.map +1 -1
  146. package/cjs/utils/escapeRegExp.js.map +1 -1
  147. package/cjs/utils/forwardCallbackProps.js.map +1 -1
  148. package/cjs/utils/isOverflowElement.js.map +1 -1
  149. package/cjs/vuu-date-picker/VuuDatePicker.js.map +1 -1
  150. package/cjs/vuu-input/VuuInput.js.map +1 -1
  151. package/cjs/vuu-typeahead-input/VuuTypeaheadInput.js.map +1 -1
  152. package/cjs/vuu-typeahead-input/useVuuTypeaheadInput.js.map +1 -1
  153. package/esm/calendar/Calendar.js.map +1 -1
  154. package/esm/calendar/internal/CalendarCarousel.js.map +1 -1
  155. package/esm/calendar/internal/CalendarContext.js.map +1 -1
  156. package/esm/calendar/internal/CalendarDay.js.map +1 -1
  157. package/esm/calendar/internal/CalendarMonth.js.map +1 -1
  158. package/esm/calendar/internal/CalendarNavigation.js.map +1 -1
  159. package/esm/calendar/internal/CalendarWeekHeader.js.map +1 -1
  160. package/esm/calendar/internal/useFocusManagement.js.map +1 -1
  161. package/esm/calendar/internal/utils.js.map +1 -1
  162. package/esm/calendar/useCalendar.js.map +1 -1
  163. package/esm/calendar/useCalendarDay.js.map +1 -1
  164. package/esm/calendar/useSelection.js.map +1 -1
  165. package/esm/column-picker/ColumnPicker.js.map +1 -1
  166. package/esm/column-picker/ColumnSearch.js.map +1 -1
  167. package/esm/common-hooks/collectionProvider.js.map +1 -1
  168. package/esm/common-hooks/itemToString.js.map +1 -1
  169. package/esm/common-hooks/selectionTypes.js.map +1 -1
  170. package/esm/common-hooks/use-resize-observer.js.map +1 -1
  171. package/esm/common-hooks/useCollectionItems.js.map +1 -1
  172. package/esm/common-hooks/useControlled.js.map +1 -1
  173. package/esm/common-hooks/useSelection.js.map +1 -1
  174. package/esm/cycle-state-button/CycleStateButton.js.map +1 -1
  175. package/esm/date-input/DateInput.js.map +1 -1
  176. package/esm/date-picker/DatePicker.js.map +1 -1
  177. package/esm/date-picker/DatePickerContext.js.map +1 -1
  178. package/esm/date-picker/DatePickerPanel.js.map +1 -1
  179. package/esm/drag-drop/DragDropProvider.js.map +1 -1
  180. package/esm/drag-drop/DragDropState.js.map +1 -1
  181. package/esm/drag-drop/Draggable.js +0 -5
  182. package/esm/drag-drop/Draggable.js.map +1 -1
  183. package/esm/drag-drop/dragDropTypes.js.map +1 -1
  184. package/esm/drag-drop/drop-target-utils.js.map +1 -1
  185. package/esm/drag-drop/useAutoScroll.js.map +1 -1
  186. package/esm/drag-drop/useDragDisplacers.js.map +1 -1
  187. package/esm/drag-drop/useDragDrop.js +1 -1
  188. package/esm/drag-drop/useDragDrop.js.map +1 -1
  189. package/esm/drag-drop/useDragDropCopy.js.map +1 -1
  190. package/esm/drag-drop/useDragDropIndicator.js +1 -1
  191. package/esm/drag-drop/useDragDropIndicator.js.map +1 -1
  192. package/esm/drag-drop/useDragDropNaturalMovement.js +1 -1
  193. package/esm/drag-drop/useDragDropNaturalMovement.js.map +1 -1
  194. package/esm/drag-drop/useDropIndicator.js.map +1 -1
  195. package/esm/drag-drop/useGlobalDragDrop.js.map +1 -1
  196. package/esm/editable/useEditableText.js.map +1 -1
  197. package/esm/editable-label/EditableLabel.css.js +1 -1
  198. package/esm/editable-label/EditableLabel.js.map +1 -1
  199. package/esm/expando-input/ExpandoInput.js +1 -1
  200. package/esm/expando-input/ExpandoInput.js.map +1 -1
  201. package/esm/icon-button/Icon.js.map +1 -1
  202. package/esm/icon-button/IconButton.js.map +1 -1
  203. package/esm/icon-button/ToggleIconButton.css.js +1 -1
  204. package/esm/icon-button/ToggleIconButton.js.map +1 -1
  205. package/esm/index.js +7 -2
  206. package/esm/index.js.map +1 -1
  207. package/esm/instrument-picker/TablePicker.js.map +1 -1
  208. package/esm/instrument-picker/useTablePicker.js.map +1 -1
  209. package/esm/list/Highlighter.js.map +1 -1
  210. package/esm/list/List.js.map +1 -1
  211. package/esm/list/ListItem.js.map +1 -1
  212. package/esm/list/RadioIcon.js.map +1 -1
  213. package/esm/list/common-hooks/keyUtils.js.map +1 -1
  214. package/esm/list/common-hooks/list-dom-utils.js.map +1 -1
  215. package/esm/list/common-hooks/useCollapsibleGroups.js.map +1 -1
  216. package/esm/list/common-hooks/useImperativeScrollingAPI.js.map +1 -1
  217. package/esm/list/common-hooks/useKeyboardNavigation.js.map +1 -1
  218. package/esm/list/common-hooks/useTypeahead.js.map +1 -1
  219. package/esm/list/common-hooks/useViewportTracking.js.map +1 -1
  220. package/esm/list/common-hooks/utils/collection-item-utils.js.map +1 -1
  221. package/esm/list/common-hooks/utils/filter-utils.js.map +1 -1
  222. package/esm/list/common-hooks/utils/isSelected.js.map +1 -1
  223. package/esm/list/useList.js.map +1 -1
  224. package/esm/list/useListDrop.js.map +1 -1
  225. package/esm/list/useListHeight.js.map +1 -1
  226. package/esm/list/useScrollPosition.js.map +1 -1
  227. package/esm/measured-container/MeasuredContainer.js +1 -0
  228. package/esm/measured-container/MeasuredContainer.js.map +1 -1
  229. package/esm/measured-container/useMeasuredContainer.js +4 -1
  230. package/esm/measured-container/useMeasuredContainer.js.map +1 -1
  231. package/esm/measured-container/useResizeObserver.js.map +1 -1
  232. package/esm/overflow-container/OverflowContainer.js.map +1 -1
  233. package/esm/overflow-container/overflow-utils.js.map +1 -1
  234. package/esm/overflow-container/useOverflowContainer.js.map +1 -1
  235. package/esm/price-ticker/PriceTicker.js.map +1 -1
  236. package/esm/split-button/SplitButton.css.js +1 -1
  237. package/esm/split-button/SplitButton.js.map +1 -1
  238. package/esm/split-button/SplitStateButton.css.js +1 -1
  239. package/esm/split-button/SplitStateButton.js.map +1 -1
  240. package/esm/split-button/useSplitButton.js.map +1 -1
  241. package/esm/table-search/SearchCell.css.js +1 -1
  242. package/esm/table-search/SearchCell.js +8 -3
  243. package/esm/table-search/SearchCell.js.map +1 -1
  244. package/esm/table-search/TableSearch.js +12 -19
  245. package/esm/table-search/TableSearch.js.map +1 -1
  246. package/esm/table-search/useTableSearch.js +1 -1
  247. package/esm/table-search/useTableSearch.js.map +1 -1
  248. package/esm/tabs-next/TabBar.css.js +4 -0
  249. package/esm/tabs-next/TabBar.css.js.map +1 -0
  250. package/esm/tabs-next/TabBar.js +39 -0
  251. package/esm/tabs-next/TabBar.js.map +1 -0
  252. package/esm/tabs-next/TabListNext.css.js +4 -0
  253. package/esm/tabs-next/TabListNext.css.js.map +1 -0
  254. package/esm/tabs-next/TabListNext.js +122 -0
  255. package/esm/tabs-next/TabListNext.js.map +1 -0
  256. package/esm/tabs-next/TabNext.css.js +4 -0
  257. package/esm/tabs-next/TabNext.css.js.map +1 -0
  258. package/esm/tabs-next/TabNext.js +108 -0
  259. package/esm/tabs-next/TabNext.js.map +1 -0
  260. package/esm/tabs-next/TabNextAction.js +33 -0
  261. package/esm/tabs-next/TabNextAction.js.map +1 -0
  262. package/esm/tabs-next/TabNextContext.js +20 -0
  263. package/esm/tabs-next/TabNextContext.js.map +1 -0
  264. package/esm/tabs-next/TabNextPanel.css.js +4 -0
  265. package/esm/tabs-next/TabNextPanel.css.js.map +1 -0
  266. package/esm/tabs-next/TabNextPanel.js +75 -0
  267. package/esm/tabs-next/TabNextPanel.js.map +1 -0
  268. package/esm/tabs-next/TabNextTrigger.css.js +4 -0
  269. package/esm/tabs-next/TabNextTrigger.css.js.map +1 -0
  270. package/esm/tabs-next/TabNextTrigger.js +72 -0
  271. package/esm/tabs-next/TabNextTrigger.js.map +1 -0
  272. package/esm/tabs-next/TabOverflowList.css.js +4 -0
  273. package/esm/tabs-next/TabOverflowList.css.js.map +1 -0
  274. package/esm/tabs-next/TabOverflowList.js +128 -0
  275. package/esm/tabs-next/TabOverflowList.js.map +1 -0
  276. package/esm/tabs-next/TabsNext.js +172 -0
  277. package/esm/tabs-next/TabsNext.js.map +1 -0
  278. package/esm/tabs-next/TabsNextContext.js +30 -0
  279. package/esm/tabs-next/TabsNextContext.js.map +1 -0
  280. package/esm/tabs-next/hooks/useCollection.js +89 -0
  281. package/esm/tabs-next/hooks/useCollection.js.map +1 -0
  282. package/esm/tabs-next/hooks/useFocusOutside.js +22 -0
  283. package/esm/tabs-next/hooks/useFocusOutside.js.map +1 -0
  284. package/esm/tabs-next/hooks/useOverflow.js +136 -0
  285. package/esm/tabs-next/hooks/useOverflow.js.map +1 -0
  286. package/esm/tabstrip/Tab.js.map +1 -1
  287. package/esm/tabstrip/TabMenu.js.map +1 -1
  288. package/esm/tabstrip/TabMenuOptions.js.map +1 -1
  289. package/esm/tabstrip/Tabstrip.css.js +1 -1
  290. package/esm/tabstrip/Tabstrip.js.map +1 -1
  291. package/esm/tabstrip/tabstrip-dom-utils.js.map +1 -1
  292. package/esm/tabstrip/useAnimatedSelectionThumb.js.map +1 -1
  293. package/esm/tabstrip/useKeyboardNavigation.js.map +1 -1
  294. package/esm/tabstrip/useSelection.js.map +1 -1
  295. package/esm/tabstrip/useTabstrip.js.map +1 -1
  296. package/esm/toolbar/Toolbar.js.map +1 -1
  297. package/esm/toolbar/toolbar-dom-utils.js.map +1 -1
  298. package/esm/toolbar/useKeyboardNavigation.js.map +1 -1
  299. package/esm/toolbar/useSelection.js.map +1 -1
  300. package/esm/toolbar/useToolbar.js.map +1 -1
  301. package/esm/utils/escapeRegExp.js.map +1 -1
  302. package/esm/utils/forwardCallbackProps.js.map +1 -1
  303. package/esm/utils/isOverflowElement.js.map +1 -1
  304. package/esm/vuu-date-picker/VuuDatePicker.js.map +1 -1
  305. package/esm/vuu-input/VuuInput.js.map +1 -1
  306. package/esm/vuu-typeahead-input/VuuTypeaheadInput.js.map +1 -1
  307. package/esm/vuu-typeahead-input/useVuuTypeaheadInput.js.map +1 -1
  308. package/package.json +15 -14
  309. package/types/calendar/Calendar.d.ts +0 -1
  310. package/types/calendar/internal/CalendarCarousel.d.ts +0 -1
  311. package/types/calendar/internal/CalendarContext.d.ts +0 -1
  312. package/types/calendar/internal/CalendarWeekHeader.d.ts +1 -1
  313. package/types/calendar/useCalendar.d.ts +4 -4
  314. package/types/calendar/useCalendarDay.d.ts +2 -2
  315. package/types/column-picker/ColumnPicker.d.ts +0 -1
  316. package/types/common-hooks/collectionProvider.d.ts +1 -1
  317. package/types/common-hooks/selectionTypes.d.ts +1 -1
  318. package/types/cycle-state-button/CycleStateButton.d.ts +2 -2
  319. package/types/date-picker/DatePickerContext.d.ts +0 -1
  320. package/types/drag-drop/DragDropProvider.d.ts +1 -1
  321. package/types/drag-drop/DropIndicator.d.ts +1 -2
  322. package/types/drag-drop/drop-target-utils.d.ts +24 -20
  323. package/types/drag-drop/useAutoScroll.d.ts +4 -4
  324. package/types/drag-drop/useGlobalDragDrop.d.ts +0 -1
  325. package/types/expando-input/ExpandoInput.d.ts +2 -2
  326. package/types/icon-button/Icon.d.ts +1 -1
  327. package/types/icon-button/IconButton.d.ts +0 -1
  328. package/types/icon-button/ToggleIconButton.d.ts +1 -2
  329. package/types/index.d.ts +1 -1
  330. package/types/instrument-picker/SearchCell.d.ts +1 -2
  331. package/types/instrument-picker/TablePicker.d.ts +1 -1
  332. package/types/instrument-picker/useTablePicker.d.ts +3 -10
  333. package/types/list/ChevronIcon.d.ts +1 -1
  334. package/types/list/ListItem.d.ts +1 -1
  335. package/types/list/RadioIcon.d.ts +1 -2
  336. package/types/list/common-hooks/useTypeahead.d.ts +0 -1
  337. package/types/measured-container/MeasuredContainer.d.ts +1 -1
  338. package/types/overflow-container/useOverflowContainer.d.ts +4 -5
  339. package/types/price-ticker/PriceTicker.d.ts +1 -1
  340. package/types/split-button/SplitStateButton.d.ts +0 -1
  341. package/types/split-button/useSplitButton.d.ts +71 -60
  342. package/types/table-search/SearchCell.d.ts +1 -2
  343. package/types/table-search/TableSearch.d.ts +2 -4
  344. package/types/table-search/useTableSearch.d.ts +4 -2
  345. package/types/tabs-next/TabBar.d.ts +12 -0
  346. package/types/tabs-next/TabListNext.d.ts +12 -0
  347. package/types/tabs-next/TabNext.d.ts +12 -0
  348. package/types/tabs-next/TabNextAction.d.ts +5 -0
  349. package/types/tabs-next/TabNextContext.d.ts +12 -0
  350. package/types/tabs-next/TabNextPanel.d.ts +8 -0
  351. package/types/tabs-next/TabNextTrigger.d.ts +5 -0
  352. package/types/tabs-next/TabOverflowList.d.ts +11 -0
  353. package/types/tabs-next/TabsNext.d.ts +17 -0
  354. package/types/tabs-next/TabsNextContext.d.ts +21 -0
  355. package/types/tabs-next/hooks/useCollection.d.ts +18 -0
  356. package/types/tabs-next/hooks/useFocusOutside.d.ts +2 -0
  357. package/types/tabs-next/hooks/useOverflow.d.ts +11 -0
  358. package/types/tabs-next/index.d.ts +7 -0
  359. package/types/tabstrip/Tab.d.ts +23 -22
  360. package/types/tabstrip/TabMenu.d.ts +1 -2
  361. package/types/tabstrip/Tabstrip.d.ts +1 -2
  362. package/types/tabstrip/useSelection.d.ts +3 -3
  363. package/types/tabstrip/useTabstrip.d.ts +5 -5
  364. package/types/toolbar/Toolbar.d.ts +1 -2
  365. package/types/toolbar/useToolbar.d.ts +1 -1
  366. package/types/vuu-date-picker/VuuDatePicker.d.ts +4 -6
  367. package/types/vuu-input/VuuInput.d.ts +1 -1
  368. package/types/vuu-typeahead-input/VuuTypeaheadInput.d.ts +1 -2
  369. package/cjs/tree/Tree.css.js +0 -6
  370. package/cjs/tree/Tree.css.js.map +0 -1
  371. package/cjs/tree/Tree.js +0 -179
  372. package/cjs/tree/Tree.js.map +0 -1
  373. package/cjs/tree/hierarchical-data-utils.js +0 -72
  374. package/cjs/tree/hierarchical-data-utils.js.map +0 -1
  375. package/cjs/tree/key-code.js +0 -62
  376. package/cjs/tree/key-code.js.map +0 -1
  377. package/cjs/tree/list-dom-utils.js +0 -19
  378. package/cjs/tree/list-dom-utils.js.map +0 -1
  379. package/cjs/tree/treeTypeUtils.js +0 -6
  380. package/cjs/tree/treeTypeUtils.js.map +0 -1
  381. package/cjs/tree/use-collapsible-groups.js +0 -85
  382. package/cjs/tree/use-collapsible-groups.js.map +0 -1
  383. package/cjs/tree/use-hierarchical-data.js +0 -51
  384. package/cjs/tree/use-hierarchical-data.js.map +0 -1
  385. package/cjs/tree/use-items-with-ids.js +0 -100
  386. package/cjs/tree/use-items-with-ids.js.map +0 -1
  387. package/cjs/tree/use-keyboard-navigation.js +0 -144
  388. package/cjs/tree/use-keyboard-navigation.js.map +0 -1
  389. package/cjs/tree/use-selection.js +0 -154
  390. package/cjs/tree/use-selection.js.map +0 -1
  391. package/cjs/tree/use-tree-keyboard-navigation.js +0 -41
  392. package/cjs/tree/use-tree-keyboard-navigation.js.map +0 -1
  393. package/cjs/tree/use-viewport-tracking.js +0 -76
  394. package/cjs/tree/use-viewport-tracking.js.map +0 -1
  395. package/cjs/tree/useTree.js +0 -106
  396. package/cjs/tree/useTree.js.map +0 -1
  397. package/esm/tree/Tree.css.js +0 -4
  398. package/esm/tree/Tree.css.js.map +0 -1
  399. package/esm/tree/Tree.js +0 -176
  400. package/esm/tree/Tree.js.map +0 -1
  401. package/esm/tree/hierarchical-data-utils.js +0 -65
  402. package/esm/tree/hierarchical-data-utils.js.map +0 -1
  403. package/esm/tree/key-code.js +0 -54
  404. package/esm/tree/key-code.js.map +0 -1
  405. package/esm/tree/list-dom-utils.js +0 -15
  406. package/esm/tree/list-dom-utils.js.map +0 -1
  407. package/esm/tree/treeTypeUtils.js +0 -4
  408. package/esm/tree/treeTypeUtils.js.map +0 -1
  409. package/esm/tree/use-collapsible-groups.js +0 -83
  410. package/esm/tree/use-collapsible-groups.js.map +0 -1
  411. package/esm/tree/use-hierarchical-data.js +0 -49
  412. package/esm/tree/use-hierarchical-data.js.map +0 -1
  413. package/esm/tree/use-items-with-ids.js +0 -98
  414. package/esm/tree/use-items-with-ids.js.map +0 -1
  415. package/esm/tree/use-keyboard-navigation.js +0 -142
  416. package/esm/tree/use-keyboard-navigation.js.map +0 -1
  417. package/esm/tree/use-selection.js +0 -147
  418. package/esm/tree/use-selection.js.map +0 -1
  419. package/esm/tree/use-tree-keyboard-navigation.js +0 -39
  420. package/esm/tree/use-tree-keyboard-navigation.js.map +0 -1
  421. package/esm/tree/use-viewport-tracking.js +0 -74
  422. package/esm/tree/use-viewport-tracking.js.map +0 -1
  423. package/esm/tree/useTree.js +0 -104
  424. package/esm/tree/useTree.js.map +0 -1
  425. package/types/tree/Tree.d.ts +0 -19
  426. package/types/tree/hierarchical-data-utils.d.ts +0 -8
  427. package/types/tree/index.d.ts +0 -3
  428. package/types/tree/key-code.d.ts +0 -11
  429. package/types/tree/list-dom-utils.d.ts +0 -6
  430. package/types/tree/treeTypeUtils.d.ts +0 -2
  431. package/types/tree/use-collapsible-groups.d.ts +0 -18
  432. package/types/tree/use-hierarchical-data.d.ts +0 -6
  433. package/types/tree/use-items-with-ids.d.ts +0 -8
  434. package/types/tree/use-keyboard-navigation.d.ts +0 -26
  435. package/types/tree/use-selection.d.ts +0 -31
  436. package/types/tree/use-tree-keyboard-navigation.d.ts +0 -12
  437. package/types/tree/use-viewport-tracking.d.ts +0 -2
  438. package/types/tree/useTree.d.ts +0 -30
@@ -1,51 +0,0 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
- var hierarchicalDataUtils = require('./hierarchical-data-utils.js');
5
- var treeTypeUtils = require('./treeTypeUtils.js');
6
-
7
- const populateIndices = (nodes, results = [], idx = { value: 0 }) => {
8
- let skipToNextHeader = false;
9
- for (const node of nodes) {
10
- if (skipToNextHeader && !hierarchicalDataUtils.isHeader(node)) {
11
- continue;
12
- } else {
13
- results[idx.value] = node;
14
- idx.value += 1;
15
- skipToNextHeader = false;
16
- if (hierarchicalDataUtils.isHeader(node) && node.expanded === false) {
17
- skipToNextHeader = true;
18
- } else if (hierarchicalDataUtils.isGroupNode(node)) {
19
- if (treeTypeUtils.isExpanded(node)) {
20
- populateIndices(node.childNodes, results, idx);
21
- }
22
- }
23
- }
24
- }
25
- return results;
26
- };
27
- const useHierarchicalData = (source) => {
28
- const externalSource = React.useRef(source);
29
- const statefulSource = React.useRef(source);
30
- const indexPositions = React.useRef(populateIndices(source));
31
- const [, forceUpdate] = React.useState({});
32
- if (source !== externalSource.current) {
33
- externalSource.current = source;
34
- statefulSource.current = source;
35
- indexPositions.current = populateIndices(source);
36
- }
37
- const setData = (value) => {
38
- statefulSource.current = value;
39
- indexPositions.current = populateIndices(value);
40
- forceUpdate({});
41
- };
42
- return {
43
- // data, // do we actually use the data anywhere
44
- data: statefulSource.current,
45
- indexPositions: indexPositions.current,
46
- setData
47
- };
48
- };
49
-
50
- exports.useHierarchicalData = useHierarchicalData;
51
- //# sourceMappingURL=use-hierarchical-data.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"use-hierarchical-data.js","sources":["../../src/tree/use-hierarchical-data.ts"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { isGroupNode, isHeader } from \"./hierarchical-data-utils\";\nimport { isExpanded } from \"./treeTypeUtils\";\nimport { NormalisedTreeSourceNode } from \"@vuu-ui/vuu-utils\";\n\nconst populateIndices = (\n nodes: NormalisedTreeSourceNode[],\n results: NormalisedTreeSourceNode[] = [],\n idx = { value: 0 },\n) => {\n let skipToNextHeader = false;\n for (const node of nodes) {\n if (skipToNextHeader && !isHeader(node)) {\n continue;\n } else {\n results[idx.value] = node;\n idx.value += 1;\n skipToNextHeader = false;\n if (isHeader(node) && node.expanded === false) {\n skipToNextHeader = true;\n } else if (isGroupNode(node)) {\n if (isExpanded(node)) {\n populateIndices(node.childNodes, results, idx);\n }\n }\n }\n }\n return results;\n};\n\n//TODO return a read-only data structure\n// Question: is source changes at runtime, do we lose any current state ?\nexport const useHierarchicalData = (source: NormalisedTreeSourceNode[]) => {\n // console.log(`%c[useHierarchicalData<${label}>] entry`, 'color: green; font-weight: bold;');\n\n const externalSource = useRef(source);\n const statefulSource = useRef(source);\n const indexPositions = useRef(populateIndices(source));\n const [, forceUpdate] = useState({});\n\n // Maintain a mapping between nodes and their current index position within the rendered list.\n // This index position is liable to change with every expand/collapse operation. We require this\n // when handling keyboard events - these are List level, not listItem level, so we depend on the\n\n // Client needs to be careful source is not recreated inadvertently on each render\n if (source !== externalSource.current) {\n // console.log(\n // `%cuseHierarchicalData source has changed`,\n // 'color:red;font-weight: bold;',\n // externalSource.current,\n // source\n // );\n externalSource.current = source;\n // we might want to try and merge existing state here ?\n statefulSource.current = source;\n indexPositions.current = populateIndices(source);\n }\n\n const setData = (value: NormalisedTreeSourceNode[]) => {\n statefulSource.current = value;\n indexPositions.current = populateIndices(value);\n // console.log(\n // `data set in ${label} (${indexPositions.current.length} visible items)`,\n // indexPositions.current.map((i) => ({ index: i.index, label: i.label }))\n // );\n forceUpdate({});\n };\n\n return {\n // data, // do we actually use the data anywhere\n data: statefulSource.current,\n indexPositions: indexPositions.current,\n setData,\n };\n};\n"],"names":["isHeader","isGroupNode","isExpanded","useRef","useState"],"mappings":";;;;;;AAKA,MAAM,eAAA,GAAkB,CACtB,KAAA,EACA,OAAsC,GAAA,IACtC,GAAM,GAAA,EAAE,KAAO,EAAA,CAAA,EACZ,KAAA;AACH,EAAA,IAAI,gBAAmB,GAAA,KAAA,CAAA;AACvB,EAAA,KAAA,MAAW,QAAQ,KAAO,EAAA;AACxB,IAAA,IAAI,gBAAoB,IAAA,CAACA,8BAAS,CAAA,IAAI,CAAG,EAAA;AACvC,MAAA,SAAA;AAAA,KACK,MAAA;AACL,MAAQ,OAAA,CAAA,GAAA,CAAI,KAAK,CAAI,GAAA,IAAA,CAAA;AACrB,MAAA,GAAA,CAAI,KAAS,IAAA,CAAA,CAAA;AACb,MAAmB,gBAAA,GAAA,KAAA,CAAA;AACnB,MAAA,IAAIA,8BAAS,CAAA,IAAI,CAAK,IAAA,IAAA,CAAK,aAAa,KAAO,EAAA;AAC7C,QAAmB,gBAAA,GAAA,IAAA,CAAA;AAAA,OACrB,MAAA,IAAWC,iCAAY,CAAA,IAAI,CAAG,EAAA;AAC5B,QAAI,IAAAC,wBAAA,CAAW,IAAI,CAAG,EAAA;AACpB,UAAgB,eAAA,CAAA,IAAA,CAAK,UAAY,EAAA,OAAA,EAAS,GAAG,CAAA,CAAA;AAAA,SAC/C;AAAA,OACF;AAAA,KACF;AAAA,GACF;AACA,EAAO,OAAA,OAAA,CAAA;AACT,CAAA,CAAA;AAIa,MAAA,mBAAA,GAAsB,CAAC,MAAuC,KAAA;AAGzE,EAAM,MAAA,cAAA,GAAiBC,aAAO,MAAM,CAAA,CAAA;AACpC,EAAM,MAAA,cAAA,GAAiBA,aAAO,MAAM,CAAA,CAAA;AACpC,EAAA,MAAM,cAAiB,GAAAA,YAAA,CAAO,eAAgB,CAAA,MAAM,CAAC,CAAA,CAAA;AACrD,EAAA,MAAM,GAAG,WAAW,CAAI,GAAAC,cAAA,CAAS,EAAE,CAAA,CAAA;AAOnC,EAAI,IAAA,MAAA,KAAW,eAAe,OAAS,EAAA;AAOrC,IAAA,cAAA,CAAe,OAAU,GAAA,MAAA,CAAA;AAEzB,IAAA,cAAA,CAAe,OAAU,GAAA,MAAA,CAAA;AACzB,IAAe,cAAA,CAAA,OAAA,GAAU,gBAAgB,MAAM,CAAA,CAAA;AAAA,GACjD;AAEA,EAAM,MAAA,OAAA,GAAU,CAAC,KAAsC,KAAA;AACrD,IAAA,cAAA,CAAe,OAAU,GAAA,KAAA,CAAA;AACzB,IAAe,cAAA,CAAA,OAAA,GAAU,gBAAgB,KAAK,CAAA,CAAA;AAK9C,IAAA,WAAA,CAAY,EAAE,CAAA,CAAA;AAAA,GAChB,CAAA;AAEA,EAAO,OAAA;AAAA;AAAA,IAEL,MAAM,cAAe,CAAA,OAAA;AAAA,IACrB,gBAAgB,cAAe,CAAA,OAAA;AAAA,IAC/B,OAAA;AAAA,GACF,CAAA;AACF;;;;"}
@@ -1,100 +0,0 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
-
5
- const PathSeparators = /* @__PURE__ */ new Set(["/", "-", "."]);
6
- const isPathSeparator = (char) => PathSeparators.has(char);
7
- const isParentPath = (parentPath, childPath) => childPath.startsWith(parentPath) && isPathSeparator(childPath[parentPath.length]);
8
- const useItemsWithIds = (sourceProp, idRoot = "root", {
9
- collapsibleHeaders = void 0,
10
- defaultExpanded = false,
11
- revealSelected = false
12
- } = {}) => {
13
- const countChildItems = (item, items, idx) => {
14
- if (item.childNodes) {
15
- return item.childNodes.length;
16
- } else if (item.header) {
17
- let i = idx + 1;
18
- let count2 = 0;
19
- while (i < items.length && !items[i].header) {
20
- count2++;
21
- i++;
22
- }
23
- return count2;
24
- } else {
25
- return 0;
26
- }
27
- };
28
- const isExpanded = React.useCallback(
29
- (path) => {
30
- if (Array.isArray(revealSelected)) {
31
- return revealSelected.some((id) => isParentPath(path, id));
32
- }
33
- return defaultExpanded;
34
- },
35
- [defaultExpanded, revealSelected]
36
- );
37
- const normalizeItems = React.useCallback(
38
- (items, indexer, level = 1, path = "", results = [], flattenedSource2 = []) => {
39
- let count2 = 0;
40
- items.forEach((item, i, all) => {
41
- const isCollapsibleHeader = item.header && collapsibleHeaders;
42
- const isNonCollapsibleGroupNode = item.childNodes && collapsibleHeaders === false;
43
- const isLeaf = !item.childNodes || item.childNodes.length === 0;
44
- const nonCollapsible = isNonCollapsibleGroupNode || isLeaf && !isCollapsibleHeader;
45
- const childPath = path ? `${path}.${i}` : `${i}`;
46
- const id = item.id ?? `${idRoot}-${childPath}`;
47
- const expanded = nonCollapsible ? void 0 : isExpanded(id);
48
- const normalisedItem = {
49
- ...item,
50
- childNodes: void 0,
51
- id,
52
- count: !isNonCollapsibleGroupNode && expanded === void 0 ? 0 : countChildItems(item, all, i),
53
- expanded,
54
- index: indexer.index,
55
- level
56
- };
57
- results.push(normalisedItem);
58
- flattenedSource2.push(items[i]);
59
- count2 += 1;
60
- indexer.index += 1;
61
- if (item.childNodes) {
62
- const [childCount, children] = normalizeItems(
63
- item.childNodes,
64
- indexer,
65
- level + 1,
66
- childPath,
67
- [],
68
- flattenedSource2
69
- );
70
- normalisedItem.childNodes = children;
71
- if (expanded === true || isNonCollapsibleGroupNode) {
72
- count2 += childCount;
73
- }
74
- }
75
- });
76
- return [count2, results, flattenedSource2];
77
- },
78
- [collapsibleHeaders, idRoot, isExpanded]
79
- );
80
- const [count, sourceWithIds, flattenedSource] = React.useMemo(() => {
81
- return normalizeItems(sourceProp, { index: 0 });
82
- }, [normalizeItems, sourceProp]);
83
- const sourceItemById = React.useCallback(
84
- (id, target = sourceWithIds) => {
85
- const sourceWithId = target.find(
86
- (i) => i.id === id || i?.childNodes?.length && isParentPath(i.id, id)
87
- );
88
- if (sourceWithId?.id === id) {
89
- return flattenedSource[sourceWithId.index];
90
- } else if (sourceWithId) {
91
- return sourceItemById(id, sourceWithId.childNodes);
92
- }
93
- },
94
- [flattenedSource, sourceWithIds]
95
- );
96
- return [count, sourceWithIds, sourceItemById];
97
- };
98
-
99
- exports.useItemsWithIds = useItemsWithIds;
100
- //# sourceMappingURL=use-items-with-ids.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"use-items-with-ids.js","sources":["../../src/tree/use-items-with-ids.ts"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { NormalisedTreeSourceNode, TreeSourceNode } from \"@vuu-ui/vuu-utils\";\n\nconst PathSeparators = new Set([\"/\", \"-\", \".\"]);\n// TODO where do we define or identify separators\nconst isPathSeparator = (char: string) => PathSeparators.has(char);\n\nconst isParentPath = (parentPath: string, childPath: string) =>\n childPath.startsWith(parentPath) &&\n isPathSeparator(childPath[parentPath.length]);\n\ntype Indexer = {\n index: number;\n};\n\ntype SourceItemById = (\n id: string,\n target?: NormalisedTreeSourceNode[],\n) => TreeSourceNode | undefined;\n\nexport const useItemsWithIds = (\n sourceProp: TreeSourceNode[],\n idRoot = \"root\",\n {\n collapsibleHeaders = undefined,\n defaultExpanded = false,\n revealSelected = false,\n } = {},\n): [number, NormalisedTreeSourceNode[], SourceItemById] => {\n const countChildItems = (\n item: TreeSourceNode,\n items: TreeSourceNode[],\n idx: number,\n ) => {\n if (item.childNodes) {\n return item.childNodes.length;\n } else if (item.header) {\n let i = idx + 1;\n let count = 0;\n while (i < items.length && !items[i].header) {\n count++;\n i++;\n }\n return count;\n } else {\n return 0;\n }\n };\n\n const isExpanded = useCallback(\n (path) => {\n if (Array.isArray(revealSelected)) {\n return revealSelected.some((id) => isParentPath(path, id));\n }\n return defaultExpanded;\n },\n [defaultExpanded, revealSelected],\n );\n\n const normalizeItems = useCallback(\n (\n items: TreeSourceNode[],\n indexer: Indexer,\n level = 1,\n path = \"\",\n results: NormalisedTreeSourceNode[] = [],\n flattenedSource: TreeSourceNode[] = [],\n ): [number, NormalisedTreeSourceNode[], TreeSourceNode[]] => {\n let count = 0;\n // TODO get rid of the Proxy\n items.forEach((item, i, all) => {\n const isCollapsibleHeader = item.header && collapsibleHeaders;\n const isNonCollapsibleGroupNode =\n item.childNodes && collapsibleHeaders === false;\n const isLeaf = !item.childNodes || item.childNodes.length === 0;\n const nonCollapsible =\n isNonCollapsibleGroupNode || (isLeaf && !isCollapsibleHeader);\n const childPath = path ? `${path}.${i}` : `${i}`;\n const id = item.id ?? `${idRoot}-${childPath}`;\n\n const expanded = nonCollapsible ? undefined : isExpanded(id);\n //TODO dev time check - if id is provided by user, make sure\n // hierarchical pattern is consistent\n const normalisedItem: NormalisedTreeSourceNode = {\n ...item,\n childNodes: undefined,\n id,\n count:\n !isNonCollapsibleGroupNode && expanded === undefined\n ? 0\n : countChildItems(item, all, i),\n expanded,\n index: indexer.index,\n level,\n };\n results.push(normalisedItem);\n flattenedSource.push(items[i]);\n\n count += 1;\n indexer.index += 1;\n\n // if ((isNonCollapsibleGroupNode || expanded !== undefined) && !isCollapsibleHeader) {\n if (item.childNodes) {\n const [childCount, children] = normalizeItems(\n item.childNodes,\n indexer,\n level + 1,\n childPath,\n [],\n flattenedSource,\n );\n normalisedItem.childNodes = children;\n if (expanded === true || isNonCollapsibleGroupNode) {\n count += childCount;\n }\n }\n });\n return [count, results, flattenedSource];\n },\n [collapsibleHeaders, idRoot, isExpanded],\n );\n\n const [count, sourceWithIds, flattenedSource] = useMemo<\n [number, NormalisedTreeSourceNode[], TreeSourceNode[]]\n >(() => {\n return normalizeItems(sourceProp, { index: 0 });\n }, [normalizeItems, sourceProp]);\n\n const sourceItemById = useCallback<SourceItemById>(\n (id, target = sourceWithIds): TreeSourceNode | undefined => {\n const sourceWithId = target.find(\n (i) => i.id === id || (i?.childNodes?.length && isParentPath(i.id, id)),\n );\n if (sourceWithId?.id === id) {\n return flattenedSource[sourceWithId.index];\n } else if (sourceWithId) {\n return sourceItemById(id, sourceWithId.childNodes);\n }\n },\n [flattenedSource, sourceWithIds],\n );\n\n return [count, sourceWithIds, sourceItemById];\n};\n"],"names":["count","useCallback","flattenedSource","useMemo"],"mappings":"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"}
@@ -1,144 +0,0 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
- var hierarchicalDataUtils = require('./hierarchical-data-utils.js');
5
- var core = require('@salt-ds/core');
6
- var keyCode = require('./key-code.js');
7
-
8
- function nextItemIdx(count, key, idx) {
9
- if (key === keyCode.ArrowUp || key === keyCode.ArrowLeft) {
10
- if (idx > 0) {
11
- return idx - 1;
12
- } else {
13
- return idx;
14
- }
15
- } else {
16
- if (idx === null) {
17
- return 0;
18
- } else if (idx === count - 1) {
19
- return idx;
20
- } else {
21
- return idx + 1;
22
- }
23
- }
24
- }
25
- const isLeaf = (item) => !item.header && !item.childNodes;
26
- const isFocusable = (item) => isLeaf(item) || item.expanded !== void 0;
27
- const useKeyboardNavigation = ({
28
- defaultHighlightedIdx = -1,
29
- highlightedIdx: highlightedIdxProp,
30
- treeNodes,
31
- onHighlight,
32
- onKeyboardNavigation,
33
- selected = []
34
- }) => {
35
- const { bwd: ArrowBwd, fwd: ArrowFwd } = React.useMemo(
36
- () => ({
37
- bwd: keyCode.ArrowUp,
38
- fwd: keyCode.ArrowDown
39
- }),
40
- []
41
- );
42
- const [highlightedIdx, setHighlightedIdx, isControlledHighlighting] = core.useControlled({
43
- controlled: highlightedIdxProp,
44
- default: defaultHighlightedIdx,
45
- name: "highlightedIdx"
46
- });
47
- const setHighlightedIndex = React.useCallback(
48
- (idx) => {
49
- onHighlight?.(idx);
50
- setHighlightedIdx(idx);
51
- },
52
- [onHighlight, setHighlightedIdx]
53
- );
54
- const nextFocusableItemIdx = React.useCallback(
55
- (key = ArrowFwd, idx = key === ArrowFwd ? -1 : treeNodes.length) => {
56
- let nextIdx = nextItemIdx(treeNodes.length, key, idx);
57
- while (nextIdx !== -1 && (key === ArrowFwd && nextIdx < treeNodes.length || key === ArrowBwd && nextIdx > 0) && !isFocusable(treeNodes[nextIdx])) {
58
- nextIdx = nextItemIdx(treeNodes.length, key, nextIdx);
59
- }
60
- return nextIdx;
61
- },
62
- [ArrowBwd, ArrowFwd, treeNodes]
63
- );
64
- const keyBoardNavigation = React.useRef(true);
65
- const ignoreFocus = React.useRef(false);
66
- const setIgnoreFocus = (value) => ignoreFocus.current = value;
67
- const handleFocus = React.useCallback(() => {
68
- if (ignoreFocus.current) {
69
- ignoreFocus.current = false;
70
- } else if (selected.length > 0) {
71
- const node = hierarchicalDataUtils.getNodeById(treeNodes, selected[0]);
72
- if (node) {
73
- const idx = hierarchicalDataUtils.getIndexOfNode(treeNodes, node);
74
- setHighlightedIndex(idx);
75
- }
76
- } else {
77
- setHighlightedIndex(nextFocusableItemIdx());
78
- }
79
- }, [treeNodes, nextFocusableItemIdx, selected, setHighlightedIndex]);
80
- const navigateChildItems = React.useCallback(
81
- (e) => {
82
- const nextIdx = nextFocusableItemIdx(e.key, highlightedIdx);
83
- if (nextIdx !== highlightedIdx) {
84
- setHighlightedIndex(nextIdx);
85
- onKeyboardNavigation?.(e, nextIdx);
86
- }
87
- },
88
- [
89
- highlightedIdx,
90
- nextFocusableItemIdx,
91
- onKeyboardNavigation,
92
- setHighlightedIndex
93
- ]
94
- );
95
- const handleKeyDown = React.useCallback(
96
- (e) => {
97
- if (treeNodes.length > 0 && keyCode.isNavigationKey(e, "vertical")) {
98
- e.preventDefault();
99
- e.stopPropagation();
100
- keyBoardNavigation.current = true;
101
- navigateChildItems(e);
102
- }
103
- },
104
- [treeNodes, navigateChildItems]
105
- );
106
- const listProps = React.useMemo(
107
- () => ({
108
- onBlur: () => {
109
- setHighlightedIndex(-1);
110
- },
111
- onFocus: handleFocus,
112
- onKeyDown: handleKeyDown,
113
- onMouseDownCapture: () => {
114
- keyBoardNavigation.current = false;
115
- setIgnoreFocus(true);
116
- },
117
- // onMouseEnter would seem less expensive but it misses some cases
118
- // SHould this be here - this is not strictly keyboard nav
119
- onMouseMove: () => {
120
- if (keyBoardNavigation.current) {
121
- keyBoardNavigation.current = false;
122
- }
123
- },
124
- onMouseLeave: () => {
125
- keyBoardNavigation.current = true;
126
- setIgnoreFocus(false);
127
- setHighlightedIndex(-1);
128
- }
129
- }),
130
- [handleFocus, handleKeyDown, setHighlightedIndex]
131
- );
132
- return {
133
- focusVisible: keyBoardNavigation.current ? highlightedIdx : -1,
134
- controlledHighlighting: isControlledHighlighting,
135
- highlightedIdx,
136
- hiliteItemAtIndex: setHighlightedIndex,
137
- keyBoardNavigation,
138
- listProps,
139
- setIgnoreFocus
140
- };
141
- };
142
-
143
- exports.useKeyboardNavigation = useKeyboardNavigation;
144
- //# sourceMappingURL=use-keyboard-navigation.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"use-keyboard-navigation.js","sources":["../../src/tree/use-keyboard-navigation.ts"],"sourcesContent":["import { KeyboardEvent, useCallback, useMemo, useRef } from \"react\";\nimport { getIndexOfNode, getNodeById } from \"./hierarchical-data-utils\";\nimport { useControlled } from \"@salt-ds/core\";\nimport { ArrowDown, ArrowLeft, ArrowUp, isNavigationKey } from \"./key-code\";\nimport { NormalisedTreeSourceNode } from \"@vuu-ui/vuu-utils\";\n\nfunction nextItemIdx(count: number, key: string, idx: number) {\n if (key === ArrowUp || key === ArrowLeft) {\n if (idx > 0) {\n return idx - 1;\n } else {\n return idx;\n }\n } else {\n if (idx === null) {\n return 0;\n } else if (idx === count - 1) {\n return idx;\n } else {\n return idx + 1;\n }\n }\n}\n\nconst isLeaf = (item: NormalisedTreeSourceNode) =>\n !item.header && !item.childNodes;\nconst isFocusable = (item: NormalisedTreeSourceNode) =>\n isLeaf(item) || item.expanded !== undefined;\n\nexport interface KeyboardNavigationHookProps {\n defaultHighlightedIdx?: number;\n highlightedIdx?: number;\n onHighlight?: (highlightedIdx: number) => void;\n onKeyboardNavigation?: (evt: KeyboardEvent, nextIdx: number) => void;\n selected: string[];\n treeNodes: NormalisedTreeSourceNode[];\n}\n\n// we need a way to set highlightedIdx when selection changes\nexport const useKeyboardNavigation = ({\n defaultHighlightedIdx = -1,\n highlightedIdx: highlightedIdxProp,\n treeNodes,\n onHighlight,\n onKeyboardNavigation,\n selected = [],\n}: KeyboardNavigationHookProps) => {\n const { bwd: ArrowBwd, fwd: ArrowFwd } = useMemo(\n () => ({\n bwd: ArrowUp,\n fwd: ArrowDown,\n }),\n [],\n );\n\n const [highlightedIdx, setHighlightedIdx, isControlledHighlighting] =\n useControlled({\n controlled: highlightedIdxProp,\n default: defaultHighlightedIdx,\n name: \"highlightedIdx\",\n });\n\n const setHighlightedIndex = useCallback(\n (idx) => {\n onHighlight?.(idx);\n setHighlightedIdx(idx);\n },\n [onHighlight, setHighlightedIdx],\n );\n\n const nextFocusableItemIdx = useCallback(\n (key = ArrowFwd, idx = key === ArrowFwd ? -1 : treeNodes.length) => {\n let nextIdx = nextItemIdx(treeNodes.length, key, idx);\n while (\n nextIdx !== -1 &&\n ((key === ArrowFwd && nextIdx < treeNodes.length) ||\n (key === ArrowBwd && nextIdx > 0)) &&\n !isFocusable(treeNodes[nextIdx])\n ) {\n nextIdx = nextItemIdx(treeNodes.length, key, nextIdx);\n }\n return nextIdx;\n },\n [ArrowBwd, ArrowFwd, treeNodes],\n );\n\n // does this belong here or should it be a method passed in?\n const keyBoardNavigation = useRef(true);\n const ignoreFocus = useRef(false);\n const setIgnoreFocus = (value: boolean) => (ignoreFocus.current = value);\n\n const handleFocus = useCallback(() => {\n if (ignoreFocus.current) {\n ignoreFocus.current = false;\n } else if (selected.length > 0) {\n const node = getNodeById(treeNodes, selected[0]);\n if (node) {\n const idx = getIndexOfNode(treeNodes, node);\n setHighlightedIndex(idx);\n }\n } else {\n setHighlightedIndex(nextFocusableItemIdx());\n }\n }, [treeNodes, nextFocusableItemIdx, selected, setHighlightedIndex]);\n\n const navigateChildItems = useCallback(\n (e) => {\n const nextIdx = nextFocusableItemIdx(e.key, highlightedIdx);\n if (nextIdx !== highlightedIdx) {\n setHighlightedIndex(nextIdx);\n // What exactly is the point of this ?\n onKeyboardNavigation?.(e, nextIdx);\n }\n },\n [\n highlightedIdx,\n nextFocusableItemIdx,\n onKeyboardNavigation,\n setHighlightedIndex,\n ],\n );\n\n const handleKeyDown = useCallback(\n (e) => {\n if (treeNodes.length > 0 && isNavigationKey(e, \"vertical\")) {\n e.preventDefault();\n e.stopPropagation();\n keyBoardNavigation.current = true;\n navigateChildItems(e);\n }\n },\n [treeNodes, navigateChildItems],\n );\n\n const listProps = useMemo(\n () => ({\n onBlur: () => {\n setHighlightedIndex(-1);\n },\n onFocus: handleFocus,\n onKeyDown: handleKeyDown,\n onMouseDownCapture: () => {\n keyBoardNavigation.current = false;\n setIgnoreFocus(true);\n },\n\n // onMouseEnter would seem less expensive but it misses some cases\n // SHould this be here - this is not strictly keyboard nav\n onMouseMove: () => {\n if (keyBoardNavigation.current) {\n keyBoardNavigation.current = false;\n }\n },\n onMouseLeave: () => {\n keyBoardNavigation.current = true;\n setIgnoreFocus(false);\n setHighlightedIndex(-1);\n },\n }),\n [handleFocus, handleKeyDown, setHighlightedIndex],\n );\n\n return {\n focusVisible: keyBoardNavigation.current ? highlightedIdx : -1,\n controlledHighlighting: isControlledHighlighting,\n highlightedIdx,\n hiliteItemAtIndex: setHighlightedIndex,\n keyBoardNavigation,\n listProps,\n setIgnoreFocus,\n };\n};\n"],"names":["ArrowUp","ArrowLeft","useMemo","ArrowDown","useControlled","useCallback","useRef","getNodeById","getIndexOfNode","isNavigationKey"],"mappings":"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"}
@@ -1,154 +0,0 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
- var core = require('@salt-ds/core');
5
-
6
- const SINGLE = "single";
7
- const CHECKBOX = "checkbox";
8
- const MULTI = "multi";
9
- const EXTENDED = "extended";
10
- const defaultSelectionKeys = ["Enter", " "];
11
- const NO_HANDLERS = {};
12
- const isCollapsibleItem = (item) => item.expanded !== void 0;
13
- const groupSelectionEnabled = (groupSelection) => groupSelection && groupSelection !== "none";
14
- const useSelection = ({
15
- defaultSelected,
16
- highlightedIdx,
17
- treeNodes,
18
- onChange,
19
- selected: selectedProp,
20
- selection = SINGLE,
21
- selectionKeys = defaultSelectionKeys
22
- }) => {
23
- const singleSelect = selection === SINGLE;
24
- const multiSelect = selection === MULTI || selection.startsWith(CHECKBOX);
25
- const extendedSelect = selection === EXTENDED;
26
- const lastActive = React.useRef(-1);
27
- const isSelectionEvent = React.useCallback(
28
- (evt) => selectionKeys.includes(evt.key),
29
- [selectionKeys]
30
- );
31
- const [selected, setSelected] = core.useControlled({
32
- controlled: selectedProp,
33
- default: defaultSelected ?? [],
34
- name: "selected"
35
- });
36
- const selectItemAtIndex = React.useCallback(
37
- (evt, idx, id, rangeSelect, preserveExistingSelection = false) => {
38
- const { current: active } = lastActive;
39
- const isSelected = selected?.includes(id);
40
- const inactiveRange = active === -1;
41
- const actsLikeSingleSelect = singleSelect || extendedSelect && !preserveExistingSelection && (!rangeSelect || inactiveRange);
42
- const actsLikeMultiSelect = multiSelect || extendedSelect && preserveExistingSelection && !rangeSelect;
43
- let newSelected = [];
44
- if (actsLikeSingleSelect && isSelected) {
45
- newSelected = [];
46
- } else if (actsLikeSingleSelect) {
47
- newSelected = [id];
48
- } else if (actsLikeMultiSelect && isSelected) {
49
- newSelected = selected.filter((i) => i !== id);
50
- } else if (actsLikeMultiSelect) {
51
- newSelected = selected.concat(id);
52
- } else if (extendedSelect) {
53
- const [from, to] = idx > active ? [active, idx] : [idx, active];
54
- newSelected = selected.slice();
55
- for (let i = from; i <= to; i++) {
56
- const { id: id2 } = treeNodes[i];
57
- if (!selected.includes(id2)) {
58
- newSelected.push(id2);
59
- }
60
- }
61
- }
62
- setSelected(newSelected);
63
- if (onChange) {
64
- onChange(evt, newSelected);
65
- }
66
- },
67
- [
68
- extendedSelect,
69
- treeNodes,
70
- multiSelect,
71
- onChange,
72
- selected,
73
- setSelected,
74
- singleSelect
75
- ]
76
- );
77
- const handleKeyDown = React.useCallback(
78
- (evt) => {
79
- if (~highlightedIdx && isSelectionEvent(evt)) {
80
- evt.preventDefault();
81
- const item = treeNodes[highlightedIdx];
82
- selectItemAtIndex(
83
- evt,
84
- highlightedIdx,
85
- item.id,
86
- false,
87
- evt.ctrlKey || evt.metaKey
88
- );
89
- if (extendedSelect) {
90
- lastActive.current = highlightedIdx;
91
- }
92
- }
93
- },
94
- [
95
- extendedSelect,
96
- highlightedIdx,
97
- treeNodes,
98
- isSelectionEvent,
99
- selectItemAtIndex
100
- ]
101
- );
102
- const handleKeyboardNavigation = React.useCallback(
103
- (evt, currentIndex) => {
104
- if (extendedSelect && evt.shiftKey) {
105
- const item = treeNodes[currentIndex];
106
- selectItemAtIndex(evt, currentIndex, item.id, true);
107
- }
108
- },
109
- [extendedSelect, treeNodes, selectItemAtIndex]
110
- );
111
- const listHandlers = selection === "none" ? NO_HANDLERS : {
112
- onKeyDown: handleKeyDown,
113
- onKeyboardNavigation: handleKeyboardNavigation
114
- };
115
- const handleClick = React.useCallback(
116
- (evt) => {
117
- if (highlightedIdx !== -1) {
118
- const item = treeNodes[highlightedIdx];
119
- if (!isCollapsibleItem(item)) {
120
- evt.preventDefault();
121
- evt.stopPropagation();
122
- selectItemAtIndex(
123
- evt,
124
- highlightedIdx,
125
- item.id,
126
- evt.shiftKey,
127
- evt.ctrlKey || evt.metaKey
128
- );
129
- if (extendedSelect) {
130
- lastActive.current = highlightedIdx;
131
- }
132
- }
133
- }
134
- },
135
- [extendedSelect, highlightedIdx, treeNodes, selectItemAtIndex]
136
- );
137
- const listItemHandlers = selection === "none" ? NO_HANDLERS : {
138
- onClick: handleClick
139
- };
140
- return {
141
- listHandlers,
142
- listItemHandlers,
143
- selected,
144
- setSelected
145
- };
146
- };
147
-
148
- exports.CHECKBOX = CHECKBOX;
149
- exports.EXTENDED = EXTENDED;
150
- exports.MULTI = MULTI;
151
- exports.SINGLE = SINGLE;
152
- exports.groupSelectionEnabled = groupSelectionEnabled;
153
- exports.useSelection = useSelection;
154
- //# sourceMappingURL=use-selection.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"use-selection.js","sources":["../../src/tree/use-selection.ts"],"sourcesContent":["import {\n KeyboardEvent,\n MouseEvent,\n SyntheticEvent,\n useCallback,\n useRef,\n} from \"react\";\nimport { useControlled } from \"@salt-ds/core\";\nimport { NormalisedTreeSourceNode } from \"@vuu-ui/vuu-utils\";\n\nexport type TreeSelection =\n | \"none\"\n | \"single\"\n | \"checkbox\"\n | \"multi\"\n | \"extended\";\n\nexport const SINGLE = \"single\";\nexport const CHECKBOX = \"checkbox\";\nexport const MULTI = \"multi\";\nexport const EXTENDED = \"extended\";\n\nexport type GroupSelection = \"none\" | \"single\" | \"cascade\";\n\nconst defaultSelectionKeys = [\"Enter\", \" \"];\n\nconst NO_HANDLERS = {};\n\nconst isCollapsibleItem = (item: NormalisedTreeSourceNode) =>\n item.expanded !== undefined;\n\nexport type TreeNodeSelectionHandler = (\n evt: SyntheticEvent,\n selected: string[],\n) => void;\n\nexport const groupSelectionEnabled = (groupSelection: GroupSelection) =>\n groupSelection && groupSelection !== \"none\";\n\nexport interface SelectionHookProps {\n defaultSelected?: string[];\n highlightedIdx: number;\n onChange: TreeNodeSelectionHandler;\n selected?: string[];\n selection: TreeSelection;\n selectionKeys?: string[];\n treeNodes: NormalisedTreeSourceNode[];\n}\n\nexport interface SelectionHookResult {\n listHandlers: {\n onKeyDown?: (evt: KeyboardEvent) => void;\n onKeyboardNavigation?: (evt: KeyboardEvent, currentIndex: number) => void;\n };\n listItemHandlers: {\n onClick?: (evt: MouseEvent) => void;\n };\n selected: string[];\n setSelected: (selected: string[]) => void;\n}\n\nexport const useSelection = ({\n defaultSelected,\n highlightedIdx,\n treeNodes,\n onChange,\n selected: selectedProp,\n selection = SINGLE,\n selectionKeys = defaultSelectionKeys,\n}: SelectionHookProps): SelectionHookResult => {\n const singleSelect = selection === SINGLE;\n const multiSelect = selection === MULTI || selection.startsWith(CHECKBOX);\n const extendedSelect = selection === EXTENDED;\n const lastActive = useRef(-1);\n\n const isSelectionEvent = useCallback(\n (evt) => selectionKeys.includes(evt.key),\n [selectionKeys],\n );\n\n const [selected, setSelected] = useControlled({\n controlled: selectedProp,\n default: defaultSelected ?? [],\n name: \"selected\",\n });\n\n // const highlightedIdxRef = useRef();\n // highlightedIdxRef.current = highlightedIdx;\n\n const selectItemAtIndex = useCallback(\n (\n evt: SyntheticEvent,\n idx: number,\n id: string,\n rangeSelect: boolean,\n preserveExistingSelection = false,\n ) => {\n const { current: active } = lastActive;\n const isSelected = selected?.includes(id);\n const inactiveRange = active === -1;\n const actsLikeSingleSelect =\n singleSelect ||\n (extendedSelect &&\n !preserveExistingSelection &&\n (!rangeSelect || inactiveRange));\n const actsLikeMultiSelect =\n multiSelect ||\n (extendedSelect && preserveExistingSelection && !rangeSelect);\n\n let newSelected: string[] = [];\n if (actsLikeSingleSelect && isSelected) {\n newSelected = [];\n } else if (actsLikeSingleSelect) {\n newSelected = [id];\n } else if (actsLikeMultiSelect && isSelected) {\n newSelected = selected.filter((i) => i !== id);\n } else if (actsLikeMultiSelect) {\n newSelected = selected.concat(id);\n } else if (extendedSelect) {\n const [from, to] = idx > active ? [active, idx] : [idx, active];\n newSelected = selected.slice();\n for (let i = from; i <= to; i++) {\n const { id } = treeNodes[i];\n if (!selected.includes(id)) {\n newSelected.push(id);\n }\n }\n }\n setSelected(newSelected);\n if (onChange) {\n onChange(evt, newSelected);\n }\n },\n [\n extendedSelect,\n treeNodes,\n multiSelect,\n onChange,\n selected,\n setSelected,\n singleSelect,\n ],\n );\n\n const handleKeyDown = useCallback(\n (evt: KeyboardEvent) => {\n if (~highlightedIdx && isSelectionEvent(evt)) {\n evt.preventDefault();\n const item = treeNodes[highlightedIdx];\n selectItemAtIndex(\n evt,\n highlightedIdx,\n item.id,\n false,\n evt.ctrlKey || evt.metaKey,\n );\n if (extendedSelect) {\n lastActive.current = highlightedIdx;\n }\n }\n },\n [\n extendedSelect,\n highlightedIdx,\n treeNodes,\n isSelectionEvent,\n selectItemAtIndex,\n ],\n );\n\n const handleKeyboardNavigation = useCallback(\n (evt: KeyboardEvent, currentIndex: number) => {\n if (extendedSelect && evt.shiftKey) {\n const item = treeNodes[currentIndex];\n selectItemAtIndex(evt, currentIndex, item.id, true);\n }\n },\n [extendedSelect, treeNodes, selectItemAtIndex],\n );\n\n const listHandlers =\n selection === \"none\"\n ? NO_HANDLERS\n : {\n onKeyDown: handleKeyDown,\n onKeyboardNavigation: handleKeyboardNavigation,\n };\n\n const handleClick = useCallback(\n (evt: MouseEvent) => {\n if (highlightedIdx !== -1) {\n const item = treeNodes[highlightedIdx];\n if (!isCollapsibleItem(item)) {\n evt.preventDefault();\n evt.stopPropagation();\n selectItemAtIndex(\n evt,\n highlightedIdx,\n item.id,\n evt.shiftKey,\n evt.ctrlKey || evt.metaKey,\n );\n if (extendedSelect) {\n lastActive.current = highlightedIdx;\n }\n }\n }\n },\n [extendedSelect, highlightedIdx, treeNodes, selectItemAtIndex],\n );\n\n const listItemHandlers =\n selection === \"none\"\n ? NO_HANDLERS\n : {\n onClick: handleClick,\n };\n\n return {\n listHandlers,\n listItemHandlers,\n selected,\n setSelected,\n };\n};\n"],"names":["useRef","useCallback","useControlled","id"],"mappings":"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"}
@@ -1,41 +0,0 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
- var keyCode = require('./key-code.js');
5
- var hierarchicalDataUtils = require('./hierarchical-data-utils.js');
6
-
7
- const useTreeKeyboardNavigation = ({
8
- highlightedIdx,
9
- hiliteItemAtIndex,
10
- indexPositions,
11
- source
12
- }) => {
13
- const handleKeyDown = React.useCallback(
14
- (e) => {
15
- if (e.key === keyCode.ArrowLeft) {
16
- const node = indexPositions[highlightedIdx];
17
- const parentId = hierarchicalDataUtils.getNodeParentPath(node);
18
- if (parentId) {
19
- e.preventDefault();
20
- const parentNode = hierarchicalDataUtils.getNodeById(source, parentId);
21
- if (parentNode) {
22
- const idx = hierarchicalDataUtils.getIndexOfNode(indexPositions, parentNode);
23
- if (idx !== void 0) {
24
- hiliteItemAtIndex(idx);
25
- }
26
- }
27
- }
28
- }
29
- },
30
- [highlightedIdx, hiliteItemAtIndex, indexPositions, source]
31
- );
32
- const listHandlers = {
33
- onKeyDown: handleKeyDown
34
- };
35
- return {
36
- listHandlers
37
- };
38
- };
39
-
40
- exports.useTreeKeyboardNavigation = useTreeKeyboardNavigation;
41
- //# sourceMappingURL=use-tree-keyboard-navigation.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"use-tree-keyboard-navigation.js","sources":["../../src/tree/use-tree-keyboard-navigation.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport { ArrowLeft } from \"./key-code\";\nimport {\n getNodeById,\n getNodeParentPath,\n getIndexOfNode,\n} from \"./hierarchical-data-utils\";\nimport { NormalisedTreeSourceNode } from \"@vuu-ui/vuu-utils\";\n\nexport interface TreeKeyboardNavigationHookProps {\n highlightedIdx: number;\n hiliteItemAtIndex: (idx: number) => void;\n indexPositions: NormalisedTreeSourceNode[];\n source: NormalisedTreeSourceNode[];\n}\n\n// we need a way to set highlightedIdx when selection changes\nexport const useTreeKeyboardNavigation = ({\n highlightedIdx,\n hiliteItemAtIndex,\n indexPositions,\n source,\n}: TreeKeyboardNavigationHookProps) => {\n const handleKeyDown = useCallback(\n (e) => {\n if (e.key === ArrowLeft) {\n const node = indexPositions[highlightedIdx];\n const parentId = getNodeParentPath(node);\n if (parentId) {\n e.preventDefault();\n const parentNode = getNodeById(source, parentId);\n if (parentNode) {\n const idx = getIndexOfNode(indexPositions, parentNode);\n if (idx !== undefined) {\n hiliteItemAtIndex(idx);\n }\n }\n }\n }\n },\n [highlightedIdx, hiliteItemAtIndex, indexPositions, source],\n );\n\n const listHandlers = {\n onKeyDown: handleKeyDown,\n };\n\n return {\n listHandlers,\n };\n};\n"],"names":["useCallback","ArrowLeft","getNodeParentPath","getNodeById","getIndexOfNode"],"mappings":";;;;;;AAiBO,MAAM,4BAA4B,CAAC;AAAA,EACxC,cAAA;AAAA,EACA,iBAAA;AAAA,EACA,cAAA;AAAA,EACA,MAAA;AACF,CAAuC,KAAA;AACrC,EAAA,MAAM,aAAgB,GAAAA,iBAAA;AAAA,IACpB,CAAC,CAAM,KAAA;AACL,MAAI,IAAA,CAAA,CAAE,QAAQC,iBAAW,EAAA;AACvB,QAAM,MAAA,IAAA,GAAO,eAAe,cAAc,CAAA,CAAA;AAC1C,QAAM,MAAA,QAAA,GAAWC,wCAAkB,IAAI,CAAA,CAAA;AACvC,QAAA,IAAI,QAAU,EAAA;AACZ,UAAA,CAAA,CAAE,cAAe,EAAA,CAAA;AACjB,UAAM,MAAA,UAAA,GAAaC,iCAAY,CAAA,MAAA,EAAQ,QAAQ,CAAA,CAAA;AAC/C,UAAA,IAAI,UAAY,EAAA;AACd,YAAM,MAAA,GAAA,GAAMC,oCAAe,CAAA,cAAA,EAAgB,UAAU,CAAA,CAAA;AACrD,YAAA,IAAI,QAAQ,KAAW,CAAA,EAAA;AACrB,cAAA,iBAAA,CAAkB,GAAG,CAAA,CAAA;AAAA,aACvB;AAAA,WACF;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,cAAA,EAAgB,iBAAmB,EAAA,cAAA,EAAgB,MAAM,CAAA;AAAA,GAC5D,CAAA;AAEA,EAAA,MAAM,YAAe,GAAA;AAAA,IACnB,SAAW,EAAA,aAAA;AAAA,GACb,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,YAAA;AAAA,GACF,CAAA;AACF;;;;"}
@@ -1,76 +0,0 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
- require('../common-hooks/collectionProvider.js');
5
- var useResizeObserver = require('../common-hooks/use-resize-observer.js');
6
-
7
- const HeightOnly = ["height", "scrollHeight"];
8
- const useViewportTracking = (root, highlightedIdx, stickyHeaders = false) => {
9
- const scrollTop = React.useRef(0);
10
- const scrolling = React.useRef(false);
11
- const rootHeight = React.useRef(0);
12
- const rootScrollHeight = React.useRef(0);
13
- const scrollIntoView = React.useCallback(
14
- (el) => {
15
- const targetEl = el.ariaExpanded ? el.firstChild : el;
16
- const headerHeight = stickyHeaders ? 30 : 0;
17
- const t = targetEl.offsetTop;
18
- const h = targetEl.offsetHeight;
19
- const viewportStart = scrollTop.current + headerHeight;
20
- const viewportEnd = viewportStart + rootHeight.current - headerHeight;
21
- if (t + h > viewportEnd || t < viewportStart) {
22
- scrollTop.current = t + h > viewportEnd ? scrollTop.current + (t + h) - viewportEnd : t - headerHeight;
23
- scrolling.current = true;
24
- if (root.current) {
25
- root.current.scrollTop = scrollTop.current;
26
- }
27
- setTimeout(() => {
28
- scrolling.current = false;
29
- });
30
- }
31
- },
32
- [root, stickyHeaders]
33
- );
34
- const scrollHandler = React.useCallback((e) => {
35
- scrollTop.current = e.target.scrollTop;
36
- }, []);
37
- React.useEffect(() => {
38
- const { current: rootEl } = root;
39
- if (rootEl) {
40
- rootEl.addEventListener("scroll", scrollHandler);
41
- }
42
- return () => {
43
- if (rootEl) {
44
- rootEl.removeEventListener("scroll", scrollHandler);
45
- }
46
- };
47
- }, [root, scrollHandler]);
48
- React.useLayoutEffect(() => {
49
- if (highlightedIdx !== -1 && rootScrollHeight.current > rootHeight.current) {
50
- if (root.current) {
51
- const item = root.current.querySelector(`
52
- [data-idx='${highlightedIdx}'],
53
- [aria-posinset='${highlightedIdx + 1}']
54
- `);
55
- if (item === null) {
56
- console.log(
57
- "[useViewportTracking], is this virtualised ? we're going to have to know rowHeight"
58
- );
59
- } else {
60
- scrollIntoView(item);
61
- }
62
- }
63
- }
64
- }, [highlightedIdx, root, scrollIntoView]);
65
- React.useEffect(() => {
66
- }, [stickyHeaders]);
67
- const onResize = React.useCallback(({ height, scrollHeight }) => {
68
- rootHeight.current = height;
69
- rootScrollHeight.current = scrollHeight;
70
- }, []);
71
- useResizeObserver.useResizeObserver(root, HeightOnly, onResize, true);
72
- return scrolling;
73
- };
74
-
75
- exports.useViewportTracking = useViewportTracking;
76
- //# sourceMappingURL=use-viewport-tracking.js.map