@vuu-ui/vuu-ui-controls 2.1.18 → 2.1.19-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (569) hide show
  1. package/package.json +13 -15
  2. package/types/calendar/useCalendar.d.ts +3 -3
  3. package/types/calendar/useSelection.d.ts +1 -1
  4. package/types/date-input/DateInput.d.ts +1 -1
  5. package/types/date-picker/DatePicker.d.ts +1 -1
  6. package/types/date-picker/DatePickerContext.d.ts +2 -2
  7. package/types/date-picker/DatePickerPanel.d.ts +1 -1
  8. package/types/instrument-picker/useTablePicker.d.ts +4 -4
  9. package/types/split-button/useSplitButton.d.ts +120 -120
  10. package/types/tabs-next/hooks/useOverflow.d.ts +1 -1
  11. package/types/tabstrip/Tab.d.ts +1 -1
  12. package/types/tabstrip/useTabstrip.d.ts +1 -1
  13. package/types/toolbar/useToolbar.d.ts +1 -1
  14. package/cjs/calendar/Calendar.css.js +0 -6
  15. package/cjs/calendar/Calendar.css.js.map +0 -1
  16. package/cjs/calendar/Calendar.js +0 -93
  17. package/cjs/calendar/Calendar.js.map +0 -1
  18. package/cjs/calendar/internal/CalendarCarousel.css.js +0 -6
  19. package/cjs/calendar/internal/CalendarCarousel.css.js.map +0 -1
  20. package/cjs/calendar/internal/CalendarCarousel.js +0 -75
  21. package/cjs/calendar/internal/CalendarCarousel.js.map +0 -1
  22. package/cjs/calendar/internal/CalendarContext.js +0 -19
  23. package/cjs/calendar/internal/CalendarContext.js.map +0 -1
  24. package/cjs/calendar/internal/CalendarDay.css.js +0 -6
  25. package/cjs/calendar/internal/CalendarDay.css.js.map +0 -1
  26. package/cjs/calendar/internal/CalendarDay.js +0 -86
  27. package/cjs/calendar/internal/CalendarDay.js.map +0 -1
  28. package/cjs/calendar/internal/CalendarMonth.css.js +0 -6
  29. package/cjs/calendar/internal/CalendarMonth.css.js.map +0 -1
  30. package/cjs/calendar/internal/CalendarMonth.js +0 -71
  31. package/cjs/calendar/internal/CalendarMonth.js.map +0 -1
  32. package/cjs/calendar/internal/CalendarNavigation.css.js +0 -6
  33. package/cjs/calendar/internal/CalendarNavigation.css.js.map +0 -1
  34. package/cjs/calendar/internal/CalendarNavigation.js +0 -236
  35. package/cjs/calendar/internal/CalendarNavigation.js.map +0 -1
  36. package/cjs/calendar/internal/CalendarWeekHeader.css.js +0 -6
  37. package/cjs/calendar/internal/CalendarWeekHeader.css.js.map +0 -1
  38. package/cjs/calendar/internal/CalendarWeekHeader.js +0 -43
  39. package/cjs/calendar/internal/CalendarWeekHeader.js.map +0 -1
  40. package/cjs/calendar/internal/useFocusManagement.js +0 -66
  41. package/cjs/calendar/internal/useFocusManagement.js.map +0 -1
  42. package/cjs/calendar/internal/utils.js +0 -64
  43. package/cjs/calendar/internal/utils.js.map +0 -1
  44. package/cjs/calendar/useCalendar.js +0 -163
  45. package/cjs/calendar/useCalendar.js.map +0 -1
  46. package/cjs/calendar/useCalendarDay.js +0 -80
  47. package/cjs/calendar/useCalendarDay.js.map +0 -1
  48. package/cjs/calendar/useSelection.js +0 -248
  49. package/cjs/calendar/useSelection.js.map +0 -1
  50. package/cjs/column-picker/ColumnPicker.css.js +0 -6
  51. package/cjs/column-picker/ColumnPicker.css.js.map +0 -1
  52. package/cjs/column-picker/ColumnPicker.js +0 -128
  53. package/cjs/column-picker/ColumnPicker.js.map +0 -1
  54. package/cjs/column-picker/ColumnSearch.css.js +0 -6
  55. package/cjs/column-picker/ColumnSearch.css.js.map +0 -1
  56. package/cjs/column-picker/ColumnSearch.js +0 -82
  57. package/cjs/column-picker/ColumnSearch.js.map +0 -1
  58. package/cjs/common-hooks/selectionTypes.js +0 -18
  59. package/cjs/common-hooks/selectionTypes.js.map +0 -1
  60. package/cjs/common-hooks/use-resize-observer.js +0 -123
  61. package/cjs/common-hooks/use-resize-observer.js.map +0 -1
  62. package/cjs/common-hooks/useControlled.js +0 -58
  63. package/cjs/common-hooks/useControlled.js.map +0 -1
  64. package/cjs/context-panel-provider/ContextPanelProvider.js +0 -99
  65. package/cjs/context-panel-provider/ContextPanelProvider.js.map +0 -1
  66. package/cjs/cycle-state-button/CycleStateButton.js +0 -50
  67. package/cjs/cycle-state-button/CycleStateButton.js.map +0 -1
  68. package/cjs/date-input/DateInput.css.js +0 -6
  69. package/cjs/date-input/DateInput.css.js.map +0 -1
  70. package/cjs/date-input/DateInput.js +0 -277
  71. package/cjs/date-input/DateInput.js.map +0 -1
  72. package/cjs/date-picker/DatePicker.js +0 -169
  73. package/cjs/date-picker/DatePicker.js.map +0 -1
  74. package/cjs/date-picker/DatePickerContext.js +0 -26
  75. package/cjs/date-picker/DatePickerContext.js.map +0 -1
  76. package/cjs/date-picker/DatePickerPanel.css.js +0 -6
  77. package/cjs/date-picker/DatePickerPanel.css.js.map +0 -1
  78. package/cjs/date-picker/DatePickerPanel.js +0 -146
  79. package/cjs/date-picker/DatePickerPanel.js.map +0 -1
  80. package/cjs/drag-drop/DragDropProvider.js +0 -145
  81. package/cjs/drag-drop/DragDropProvider.js.map +0 -1
  82. package/cjs/drag-drop/DragDropState.js +0 -36
  83. package/cjs/drag-drop/DragDropState.js.map +0 -1
  84. package/cjs/drag-drop/Draggable.css.js +0 -6
  85. package/cjs/drag-drop/Draggable.css.js.map +0 -1
  86. package/cjs/drag-drop/Draggable.js +0 -90
  87. package/cjs/drag-drop/Draggable.js.map +0 -1
  88. package/cjs/drag-drop/dragDropTypes.js +0 -8
  89. package/cjs/drag-drop/dragDropTypes.js.map +0 -1
  90. package/cjs/drag-drop/drop-target-utils.js +0 -245
  91. package/cjs/drag-drop/drop-target-utils.js.map +0 -1
  92. package/cjs/drag-drop/useAutoScroll.js +0 -71
  93. package/cjs/drag-drop/useAutoScroll.js.map +0 -1
  94. package/cjs/drag-drop/useDragDisplacers.js +0 -160
  95. package/cjs/drag-drop/useDragDisplacers.js.map +0 -1
  96. package/cjs/drag-drop/useDragDrop.js +0 -504
  97. package/cjs/drag-drop/useDragDrop.js.map +0 -1
  98. package/cjs/drag-drop/useDragDropCopy.js +0 -34
  99. package/cjs/drag-drop/useDragDropCopy.js.map +0 -1
  100. package/cjs/drag-drop/useDragDropIndicator.js +0 -251
  101. package/cjs/drag-drop/useDragDropIndicator.js.map +0 -1
  102. package/cjs/drag-drop/useDragDropNaturalMovement.js +0 -265
  103. package/cjs/drag-drop/useDragDropNaturalMovement.js.map +0 -1
  104. package/cjs/drag-drop/useDropIndicator.js +0 -27
  105. package/cjs/drag-drop/useDropIndicator.js.map +0 -1
  106. package/cjs/drag-drop/useGlobalDragDrop.js +0 -89
  107. package/cjs/drag-drop/useGlobalDragDrop.js.map +0 -1
  108. package/cjs/editable/useEditableText.js +0 -211
  109. package/cjs/editable/useEditableText.js.map +0 -1
  110. package/cjs/editable-label/EditableLabel.css.js +0 -6
  111. package/cjs/editable-label/EditableLabel.css.js.map +0 -1
  112. package/cjs/editable-label/EditableLabel.js +0 -143
  113. package/cjs/editable-label/EditableLabel.js.map +0 -1
  114. package/cjs/expando-input/ExpandoInput.css.js +0 -6
  115. package/cjs/expando-input/ExpandoInput.css.js.map +0 -1
  116. package/cjs/expando-input/ExpandoInput.js +0 -53
  117. package/cjs/expando-input/ExpandoInput.js.map +0 -1
  118. package/cjs/hover-overlay/HoverOverlay.js +0 -96
  119. package/cjs/hover-overlay/HoverOverlay.js.map +0 -1
  120. package/cjs/icon-button/Icon.css.js +0 -6
  121. package/cjs/icon-button/Icon.css.js.map +0 -1
  122. package/cjs/icon-button/Icon.js +0 -37
  123. package/cjs/icon-button/Icon.js.map +0 -1
  124. package/cjs/icon-button/IconButton.css.js +0 -6
  125. package/cjs/icon-button/IconButton.css.js.map +0 -1
  126. package/cjs/icon-button/IconButton.js +0 -26
  127. package/cjs/icon-button/IconButton.js.map +0 -1
  128. package/cjs/icon-button/ToggleIconButton.css.js +0 -6
  129. package/cjs/icon-button/ToggleIconButton.css.js.map +0 -1
  130. package/cjs/icon-button/ToggleIconButton.js +0 -39
  131. package/cjs/icon-button/ToggleIconButton.js.map +0 -1
  132. package/cjs/index.js +0 -170
  133. package/cjs/index.js.map +0 -1
  134. package/cjs/instrument-picker/TablePicker.css.js +0 -6
  135. package/cjs/instrument-picker/TablePicker.css.js.map +0 -1
  136. package/cjs/instrument-picker/TablePicker.js +0 -130
  137. package/cjs/instrument-picker/TablePicker.js.map +0 -1
  138. package/cjs/instrument-picker/useTablePicker.js +0 -150
  139. package/cjs/instrument-picker/useTablePicker.js.map +0 -1
  140. package/cjs/measured-container/MeasuredContainer.css.js +0 -6
  141. package/cjs/measured-container/MeasuredContainer.css.js.map +0 -1
  142. package/cjs/measured-container/MeasuredContainer.js +0 -72
  143. package/cjs/measured-container/MeasuredContainer.js.map +0 -1
  144. package/cjs/measured-container/useMeasuredContainer.js +0 -167
  145. package/cjs/measured-container/useMeasuredContainer.js.map +0 -1
  146. package/cjs/modal-provider/ModalProvider.js +0 -143
  147. package/cjs/modal-provider/ModalProvider.js.map +0 -1
  148. package/cjs/overflow-container/OverflowContainer.css.js +0 -6
  149. package/cjs/overflow-container/OverflowContainer.css.js.map +0 -1
  150. package/cjs/overflow-container/OverflowContainer.js +0 -143
  151. package/cjs/overflow-container/OverflowContainer.js.map +0 -1
  152. package/cjs/overflow-container/overflow-utils.js +0 -286
  153. package/cjs/overflow-container/overflow-utils.js.map +0 -1
  154. package/cjs/overflow-container/useOverflowContainer.js +0 -143
  155. package/cjs/overflow-container/useOverflowContainer.js.map +0 -1
  156. package/cjs/price-ticker/PriceTicker.css.js +0 -6
  157. package/cjs/price-ticker/PriceTicker.css.js.map +0 -1
  158. package/cjs/price-ticker/PriceTicker.js +0 -50
  159. package/cjs/price-ticker/PriceTicker.js.map +0 -1
  160. package/cjs/prompt/Prompt.css.js +0 -6
  161. package/cjs/prompt/Prompt.css.js.map +0 -1
  162. package/cjs/prompt/Prompt.js +0 -142
  163. package/cjs/prompt/Prompt.js.map +0 -1
  164. package/cjs/sortable-list/SortableList.js +0 -37
  165. package/cjs/sortable-list/SortableList.js.map +0 -1
  166. package/cjs/split-button/SplitButton.css.js +0 -6
  167. package/cjs/split-button/SplitButton.css.js.map +0 -1
  168. package/cjs/split-button/SplitButton.js +0 -84
  169. package/cjs/split-button/SplitButton.js.map +0 -1
  170. package/cjs/split-button/SplitStateButton.css.js +0 -6
  171. package/cjs/split-button/SplitStateButton.css.js.map +0 -1
  172. package/cjs/split-button/SplitStateButton.js +0 -31
  173. package/cjs/split-button/SplitStateButton.js.map +0 -1
  174. package/cjs/split-button/useSplitButton.js +0 -84
  175. package/cjs/split-button/useSplitButton.js.map +0 -1
  176. package/cjs/table-search/SearchCell.css.js +0 -6
  177. package/cjs/table-search/SearchCell.css.js.map +0 -1
  178. package/cjs/table-search/SearchCell.js +0 -32
  179. package/cjs/table-search/SearchCell.js.map +0 -1
  180. package/cjs/table-search/TableSearch.css.js +0 -6
  181. package/cjs/table-search/TableSearch.css.js.map +0 -1
  182. package/cjs/table-search/TableSearch.js +0 -89
  183. package/cjs/table-search/TableSearch.js.map +0 -1
  184. package/cjs/table-search/useTableSearch.js +0 -39
  185. package/cjs/table-search/useTableSearch.js.map +0 -1
  186. package/cjs/tabs-next/TabBar.css.js +0 -6
  187. package/cjs/tabs-next/TabBar.css.js.map +0 -1
  188. package/cjs/tabs-next/TabBar.js +0 -41
  189. package/cjs/tabs-next/TabBar.js.map +0 -1
  190. package/cjs/tabs-next/TabListNext.css.js +0 -6
  191. package/cjs/tabs-next/TabListNext.css.js.map +0 -1
  192. package/cjs/tabs-next/TabListNext.js +0 -124
  193. package/cjs/tabs-next/TabListNext.js.map +0 -1
  194. package/cjs/tabs-next/TabNext.css.js +0 -6
  195. package/cjs/tabs-next/TabNext.css.js.map +0 -1
  196. package/cjs/tabs-next/TabNext.js +0 -110
  197. package/cjs/tabs-next/TabNext.js.map +0 -1
  198. package/cjs/tabs-next/TabNextAction.js +0 -35
  199. package/cjs/tabs-next/TabNextAction.js.map +0 -1
  200. package/cjs/tabs-next/TabNextContext.js +0 -23
  201. package/cjs/tabs-next/TabNextContext.js.map +0 -1
  202. package/cjs/tabs-next/TabNextPanel.css.js +0 -6
  203. package/cjs/tabs-next/TabNextPanel.css.js.map +0 -1
  204. package/cjs/tabs-next/TabNextPanel.js +0 -77
  205. package/cjs/tabs-next/TabNextPanel.js.map +0 -1
  206. package/cjs/tabs-next/TabNextTrigger.css.js +0 -6
  207. package/cjs/tabs-next/TabNextTrigger.css.js.map +0 -1
  208. package/cjs/tabs-next/TabNextTrigger.js +0 -74
  209. package/cjs/tabs-next/TabNextTrigger.js.map +0 -1
  210. package/cjs/tabs-next/TabOverflowList.css.js +0 -6
  211. package/cjs/tabs-next/TabOverflowList.css.js.map +0 -1
  212. package/cjs/tabs-next/TabOverflowList.js +0 -130
  213. package/cjs/tabs-next/TabOverflowList.js.map +0 -1
  214. package/cjs/tabs-next/TabsNext.js +0 -174
  215. package/cjs/tabs-next/TabsNext.js.map +0 -1
  216. package/cjs/tabs-next/TabsNextContext.js +0 -33
  217. package/cjs/tabs-next/TabsNextContext.js.map +0 -1
  218. package/cjs/tabs-next/hooks/useCollection.js +0 -91
  219. package/cjs/tabs-next/hooks/useCollection.js.map +0 -1
  220. package/cjs/tabs-next/hooks/useFocusOutside.js +0 -24
  221. package/cjs/tabs-next/hooks/useFocusOutside.js.map +0 -1
  222. package/cjs/tabs-next/hooks/useOverflow.js +0 -138
  223. package/cjs/tabs-next/hooks/useOverflow.js.map +0 -1
  224. package/cjs/tabstrip/Tab.css.js +0 -6
  225. package/cjs/tabstrip/Tab.css.js.map +0 -1
  226. package/cjs/tabstrip/Tab.js +0 -153
  227. package/cjs/tabstrip/Tab.js.map +0 -1
  228. package/cjs/tabstrip/TabMenu.css.js +0 -6
  229. package/cjs/tabstrip/TabMenu.css.js.map +0 -1
  230. package/cjs/tabstrip/TabMenu.js +0 -72
  231. package/cjs/tabstrip/TabMenu.js.map +0 -1
  232. package/cjs/tabstrip/TabMenuOptions.js +0 -20
  233. package/cjs/tabstrip/TabMenuOptions.js.map +0 -1
  234. package/cjs/tabstrip/Tabstrip.css.js +0 -6
  235. package/cjs/tabstrip/Tabstrip.css.js.map +0 -1
  236. package/cjs/tabstrip/Tabstrip.js +0 -160
  237. package/cjs/tabstrip/Tabstrip.js.map +0 -1
  238. package/cjs/tabstrip/tabstrip-dom-utils.js +0 -19
  239. package/cjs/tabstrip/tabstrip-dom-utils.js.map +0 -1
  240. package/cjs/tabstrip/useAnimatedSelectionThumb.js +0 -85
  241. package/cjs/tabstrip/useAnimatedSelectionThumb.js.map +0 -1
  242. package/cjs/tabstrip/useKeyboardNavigation.js +0 -247
  243. package/cjs/tabstrip/useKeyboardNavigation.js.map +0 -1
  244. package/cjs/tabstrip/useSelection.js +0 -60
  245. package/cjs/tabstrip/useSelection.js.map +0 -1
  246. package/cjs/tabstrip/useTabstrip.js +0 -233
  247. package/cjs/tabstrip/useTabstrip.js.map +0 -1
  248. package/cjs/time-input/MaskedInput.js +0 -377
  249. package/cjs/time-input/MaskedInput.js.map +0 -1
  250. package/cjs/time-input/TimeInput.css.js +0 -6
  251. package/cjs/time-input/TimeInput.css.js.map +0 -1
  252. package/cjs/time-input/TimeInput.js +0 -56
  253. package/cjs/time-input/TimeInput.js.map +0 -1
  254. package/cjs/time-input/useTimeInput.js +0 -121
  255. package/cjs/time-input/useTimeInput.js.map +0 -1
  256. package/cjs/toolbar/Toolbar.css.js +0 -6
  257. package/cjs/toolbar/Toolbar.css.js.map +0 -1
  258. package/cjs/toolbar/Toolbar.js +0 -90
  259. package/cjs/toolbar/Toolbar.js.map +0 -1
  260. package/cjs/toolbar/toolbar-dom-utils.js +0 -18
  261. package/cjs/toolbar/toolbar-dom-utils.js.map +0 -1
  262. package/cjs/toolbar/useKeyboardNavigation.js +0 -305
  263. package/cjs/toolbar/useKeyboardNavigation.js.map +0 -1
  264. package/cjs/toolbar/useSelection.js +0 -93
  265. package/cjs/toolbar/useSelection.js.map +0 -1
  266. package/cjs/toolbar/useToolbar.js +0 -100
  267. package/cjs/toolbar/useToolbar.js.map +0 -1
  268. package/cjs/utils/escapeRegExp.js +0 -9
  269. package/cjs/utils/escapeRegExp.js.map +0 -1
  270. package/cjs/utils/forwardCallbackProps.js +0 -22
  271. package/cjs/utils/forwardCallbackProps.js.map +0 -1
  272. package/cjs/utils/isOverflowElement.js +0 -8
  273. package/cjs/utils/isOverflowElement.js.map +0 -1
  274. package/cjs/utils/isPlainObject.js +0 -6
  275. package/cjs/utils/isPlainObject.js.map +0 -1
  276. package/cjs/vuu-date-picker/VuuDatePicker.js +0 -122
  277. package/cjs/vuu-date-picker/VuuDatePicker.js.map +0 -1
  278. package/cjs/vuu-input/VuuInput.css.js +0 -6
  279. package/cjs/vuu-input/VuuInput.css.js.map +0 -1
  280. package/cjs/vuu-input/VuuInput.js +0 -102
  281. package/cjs/vuu-input/VuuInput.js.map +0 -1
  282. package/cjs/vuu-time-picker/VuuTimePicker.css.js +0 -6
  283. package/cjs/vuu-time-picker/VuuTimePicker.css.js.map +0 -1
  284. package/cjs/vuu-time-picker/VuuTimePicker.js +0 -37
  285. package/cjs/vuu-time-picker/VuuTimePicker.js.map +0 -1
  286. package/cjs/vuu-typeahead-input/VuuTypeaheadInput.css.js +0 -6
  287. package/cjs/vuu-typeahead-input/VuuTypeaheadInput.css.js.map +0 -1
  288. package/cjs/vuu-typeahead-input/VuuTypeaheadInput.js +0 -80
  289. package/cjs/vuu-typeahead-input/VuuTypeaheadInput.js.map +0 -1
  290. package/cjs/vuu-typeahead-input/useVuuTypeaheadInput.js +0 -176
  291. package/cjs/vuu-typeahead-input/useVuuTypeaheadInput.js.map +0 -1
  292. package/esm/calendar/Calendar.css.js +0 -4
  293. package/esm/calendar/Calendar.css.js.map +0 -1
  294. package/esm/calendar/Calendar.js +0 -91
  295. package/esm/calendar/Calendar.js.map +0 -1
  296. package/esm/calendar/internal/CalendarCarousel.css.js +0 -4
  297. package/esm/calendar/internal/CalendarCarousel.css.js.map +0 -1
  298. package/esm/calendar/internal/CalendarCarousel.js +0 -73
  299. package/esm/calendar/internal/CalendarCarousel.js.map +0 -1
  300. package/esm/calendar/internal/CalendarContext.js +0 -16
  301. package/esm/calendar/internal/CalendarContext.js.map +0 -1
  302. package/esm/calendar/internal/CalendarDay.css.js +0 -4
  303. package/esm/calendar/internal/CalendarDay.css.js.map +0 -1
  304. package/esm/calendar/internal/CalendarDay.js +0 -84
  305. package/esm/calendar/internal/CalendarDay.js.map +0 -1
  306. package/esm/calendar/internal/CalendarMonth.css.js +0 -4
  307. package/esm/calendar/internal/CalendarMonth.css.js.map +0 -1
  308. package/esm/calendar/internal/CalendarMonth.js +0 -69
  309. package/esm/calendar/internal/CalendarMonth.js.map +0 -1
  310. package/esm/calendar/internal/CalendarNavigation.css.js +0 -4
  311. package/esm/calendar/internal/CalendarNavigation.css.js.map +0 -1
  312. package/esm/calendar/internal/CalendarNavigation.js +0 -234
  313. package/esm/calendar/internal/CalendarNavigation.js.map +0 -1
  314. package/esm/calendar/internal/CalendarWeekHeader.css.js +0 -4
  315. package/esm/calendar/internal/CalendarWeekHeader.css.js.map +0 -1
  316. package/esm/calendar/internal/CalendarWeekHeader.js +0 -41
  317. package/esm/calendar/internal/CalendarWeekHeader.js.map +0 -1
  318. package/esm/calendar/internal/useFocusManagement.js +0 -64
  319. package/esm/calendar/internal/useFocusManagement.js.map +0 -1
  320. package/esm/calendar/internal/utils.js +0 -55
  321. package/esm/calendar/internal/utils.js.map +0 -1
  322. package/esm/calendar/useCalendar.js +0 -161
  323. package/esm/calendar/useCalendar.js.map +0 -1
  324. package/esm/calendar/useCalendarDay.js +0 -78
  325. package/esm/calendar/useCalendarDay.js.map +0 -1
  326. package/esm/calendar/useSelection.js +0 -243
  327. package/esm/calendar/useSelection.js.map +0 -1
  328. package/esm/column-picker/ColumnPicker.css.js +0 -4
  329. package/esm/column-picker/ColumnPicker.css.js.map +0 -1
  330. package/esm/column-picker/ColumnPicker.js +0 -126
  331. package/esm/column-picker/ColumnPicker.js.map +0 -1
  332. package/esm/column-picker/ColumnSearch.css.js +0 -4
  333. package/esm/column-picker/ColumnSearch.css.js.map +0 -1
  334. package/esm/column-picker/ColumnSearch.js +0 -80
  335. package/esm/column-picker/ColumnSearch.js.map +0 -1
  336. package/esm/common-hooks/selectionTypes.js +0 -10
  337. package/esm/common-hooks/selectionTypes.js.map +0 -1
  338. package/esm/common-hooks/use-resize-observer.js +0 -118
  339. package/esm/common-hooks/use-resize-observer.js.map +0 -1
  340. package/esm/common-hooks/useControlled.js +0 -56
  341. package/esm/common-hooks/useControlled.js.map +0 -1
  342. package/esm/context-panel-provider/ContextPanelProvider.js +0 -94
  343. package/esm/context-panel-provider/ContextPanelProvider.js.map +0 -1
  344. package/esm/cycle-state-button/CycleStateButton.js +0 -48
  345. package/esm/cycle-state-button/CycleStateButton.js.map +0 -1
  346. package/esm/date-input/DateInput.css.js +0 -4
  347. package/esm/date-input/DateInput.css.js.map +0 -1
  348. package/esm/date-input/DateInput.js +0 -275
  349. package/esm/date-input/DateInput.js.map +0 -1
  350. package/esm/date-picker/DatePicker.js +0 -167
  351. package/esm/date-picker/DatePicker.js.map +0 -1
  352. package/esm/date-picker/DatePickerContext.js +0 -23
  353. package/esm/date-picker/DatePickerContext.js.map +0 -1
  354. package/esm/date-picker/DatePickerPanel.css.js +0 -4
  355. package/esm/date-picker/DatePickerPanel.css.js.map +0 -1
  356. package/esm/date-picker/DatePickerPanel.js +0 -144
  357. package/esm/date-picker/DatePickerPanel.js.map +0 -1
  358. package/esm/drag-drop/DragDropProvider.js +0 -142
  359. package/esm/drag-drop/DragDropProvider.js.map +0 -1
  360. package/esm/drag-drop/DragDropState.js +0 -34
  361. package/esm/drag-drop/DragDropState.js.map +0 -1
  362. package/esm/drag-drop/Draggable.css.js +0 -4
  363. package/esm/drag-drop/Draggable.css.js.map +0 -1
  364. package/esm/drag-drop/Draggable.js +0 -85
  365. package/esm/drag-drop/Draggable.js.map +0 -1
  366. package/esm/drag-drop/dragDropTypes.js +0 -5
  367. package/esm/drag-drop/dragDropTypes.js.map +0 -1
  368. package/esm/drag-drop/drop-target-utils.js +0 -228
  369. package/esm/drag-drop/drop-target-utils.js.map +0 -1
  370. package/esm/drag-drop/useAutoScroll.js +0 -69
  371. package/esm/drag-drop/useAutoScroll.js.map +0 -1
  372. package/esm/drag-drop/useDragDisplacers.js +0 -158
  373. package/esm/drag-drop/useDragDisplacers.js.map +0 -1
  374. package/esm/drag-drop/useDragDrop.js +0 -502
  375. package/esm/drag-drop/useDragDrop.js.map +0 -1
  376. package/esm/drag-drop/useDragDropCopy.js +0 -31
  377. package/esm/drag-drop/useDragDropCopy.js.map +0 -1
  378. package/esm/drag-drop/useDragDropIndicator.js +0 -249
  379. package/esm/drag-drop/useDragDropIndicator.js.map +0 -1
  380. package/esm/drag-drop/useDragDropNaturalMovement.js +0 -263
  381. package/esm/drag-drop/useDragDropNaturalMovement.js.map +0 -1
  382. package/esm/drag-drop/useDropIndicator.js +0 -25
  383. package/esm/drag-drop/useDropIndicator.js.map +0 -1
  384. package/esm/drag-drop/useGlobalDragDrop.js +0 -87
  385. package/esm/drag-drop/useGlobalDragDrop.js.map +0 -1
  386. package/esm/editable/useEditableText.js +0 -209
  387. package/esm/editable/useEditableText.js.map +0 -1
  388. package/esm/editable-label/EditableLabel.css.js +0 -4
  389. package/esm/editable-label/EditableLabel.css.js.map +0 -1
  390. package/esm/editable-label/EditableLabel.js +0 -140
  391. package/esm/editable-label/EditableLabel.js.map +0 -1
  392. package/esm/expando-input/ExpandoInput.css.js +0 -4
  393. package/esm/expando-input/ExpandoInput.css.js.map +0 -1
  394. package/esm/expando-input/ExpandoInput.js +0 -51
  395. package/esm/expando-input/ExpandoInput.js.map +0 -1
  396. package/esm/hover-overlay/HoverOverlay.js +0 -94
  397. package/esm/hover-overlay/HoverOverlay.js.map +0 -1
  398. package/esm/icon-button/Icon.css.js +0 -4
  399. package/esm/icon-button/Icon.css.js.map +0 -1
  400. package/esm/icon-button/Icon.js +0 -35
  401. package/esm/icon-button/Icon.js.map +0 -1
  402. package/esm/icon-button/IconButton.css.js +0 -4
  403. package/esm/icon-button/IconButton.css.js.map +0 -1
  404. package/esm/icon-button/IconButton.js +0 -24
  405. package/esm/icon-button/IconButton.js.map +0 -1
  406. package/esm/icon-button/ToggleIconButton.css.js +0 -4
  407. package/esm/icon-button/ToggleIconButton.css.js.map +0 -1
  408. package/esm/icon-button/ToggleIconButton.js +0 -37
  409. package/esm/icon-button/ToggleIconButton.js.map +0 -1
  410. package/esm/index.js +0 -59
  411. package/esm/index.js.map +0 -1
  412. package/esm/instrument-picker/TablePicker.css.js +0 -4
  413. package/esm/instrument-picker/TablePicker.css.js.map +0 -1
  414. package/esm/instrument-picker/TablePicker.js +0 -128
  415. package/esm/instrument-picker/TablePicker.js.map +0 -1
  416. package/esm/instrument-picker/useTablePicker.js +0 -148
  417. package/esm/instrument-picker/useTablePicker.js.map +0 -1
  418. package/esm/measured-container/MeasuredContainer.css.js +0 -4
  419. package/esm/measured-container/MeasuredContainer.css.js.map +0 -1
  420. package/esm/measured-container/MeasuredContainer.js +0 -70
  421. package/esm/measured-container/MeasuredContainer.js.map +0 -1
  422. package/esm/measured-container/useMeasuredContainer.js +0 -164
  423. package/esm/measured-container/useMeasuredContainer.js.map +0 -1
  424. package/esm/modal-provider/ModalProvider.js +0 -140
  425. package/esm/modal-provider/ModalProvider.js.map +0 -1
  426. package/esm/overflow-container/OverflowContainer.css.js +0 -4
  427. package/esm/overflow-container/OverflowContainer.css.js.map +0 -1
  428. package/esm/overflow-container/OverflowContainer.js +0 -141
  429. package/esm/overflow-container/OverflowContainer.js.map +0 -1
  430. package/esm/overflow-container/overflow-utils.js +0 -272
  431. package/esm/overflow-container/overflow-utils.js.map +0 -1
  432. package/esm/overflow-container/useOverflowContainer.js +0 -141
  433. package/esm/overflow-container/useOverflowContainer.js.map +0 -1
  434. package/esm/price-ticker/PriceTicker.css.js +0 -4
  435. package/esm/price-ticker/PriceTicker.css.js.map +0 -1
  436. package/esm/price-ticker/PriceTicker.js +0 -48
  437. package/esm/price-ticker/PriceTicker.js.map +0 -1
  438. package/esm/prompt/Prompt.css.js +0 -4
  439. package/esm/prompt/Prompt.css.js.map +0 -1
  440. package/esm/prompt/Prompt.js +0 -140
  441. package/esm/prompt/Prompt.js.map +0 -1
  442. package/esm/sortable-list/SortableList.js +0 -34
  443. package/esm/sortable-list/SortableList.js.map +0 -1
  444. package/esm/split-button/SplitButton.css.js +0 -4
  445. package/esm/split-button/SplitButton.css.js.map +0 -1
  446. package/esm/split-button/SplitButton.js +0 -82
  447. package/esm/split-button/SplitButton.js.map +0 -1
  448. package/esm/split-button/SplitStateButton.css.js +0 -4
  449. package/esm/split-button/SplitStateButton.css.js.map +0 -1
  450. package/esm/split-button/SplitStateButton.js +0 -29
  451. package/esm/split-button/SplitStateButton.js.map +0 -1
  452. package/esm/split-button/useSplitButton.js +0 -82
  453. package/esm/split-button/useSplitButton.js.map +0 -1
  454. package/esm/table-search/SearchCell.css.js +0 -4
  455. package/esm/table-search/SearchCell.css.js.map +0 -1
  456. package/esm/table-search/SearchCell.js +0 -30
  457. package/esm/table-search/SearchCell.js.map +0 -1
  458. package/esm/table-search/TableSearch.css.js +0 -4
  459. package/esm/table-search/TableSearch.css.js.map +0 -1
  460. package/esm/table-search/TableSearch.js +0 -87
  461. package/esm/table-search/TableSearch.js.map +0 -1
  462. package/esm/table-search/useTableSearch.js +0 -37
  463. package/esm/table-search/useTableSearch.js.map +0 -1
  464. package/esm/tabs-next/TabBar.css.js +0 -4
  465. package/esm/tabs-next/TabBar.css.js.map +0 -1
  466. package/esm/tabs-next/TabBar.js +0 -39
  467. package/esm/tabs-next/TabBar.js.map +0 -1
  468. package/esm/tabs-next/TabListNext.css.js +0 -4
  469. package/esm/tabs-next/TabListNext.css.js.map +0 -1
  470. package/esm/tabs-next/TabListNext.js +0 -122
  471. package/esm/tabs-next/TabListNext.js.map +0 -1
  472. package/esm/tabs-next/TabNext.css.js +0 -4
  473. package/esm/tabs-next/TabNext.css.js.map +0 -1
  474. package/esm/tabs-next/TabNext.js +0 -108
  475. package/esm/tabs-next/TabNext.js.map +0 -1
  476. package/esm/tabs-next/TabNextAction.js +0 -33
  477. package/esm/tabs-next/TabNextAction.js.map +0 -1
  478. package/esm/tabs-next/TabNextContext.js +0 -20
  479. package/esm/tabs-next/TabNextContext.js.map +0 -1
  480. package/esm/tabs-next/TabNextPanel.css.js +0 -4
  481. package/esm/tabs-next/TabNextPanel.css.js.map +0 -1
  482. package/esm/tabs-next/TabNextPanel.js +0 -75
  483. package/esm/tabs-next/TabNextPanel.js.map +0 -1
  484. package/esm/tabs-next/TabNextTrigger.css.js +0 -4
  485. package/esm/tabs-next/TabNextTrigger.css.js.map +0 -1
  486. package/esm/tabs-next/TabNextTrigger.js +0 -72
  487. package/esm/tabs-next/TabNextTrigger.js.map +0 -1
  488. package/esm/tabs-next/TabOverflowList.css.js +0 -4
  489. package/esm/tabs-next/TabOverflowList.css.js.map +0 -1
  490. package/esm/tabs-next/TabOverflowList.js +0 -128
  491. package/esm/tabs-next/TabOverflowList.js.map +0 -1
  492. package/esm/tabs-next/TabsNext.js +0 -172
  493. package/esm/tabs-next/TabsNext.js.map +0 -1
  494. package/esm/tabs-next/TabsNextContext.js +0 -30
  495. package/esm/tabs-next/TabsNextContext.js.map +0 -1
  496. package/esm/tabs-next/hooks/useCollection.js +0 -89
  497. package/esm/tabs-next/hooks/useCollection.js.map +0 -1
  498. package/esm/tabs-next/hooks/useFocusOutside.js +0 -22
  499. package/esm/tabs-next/hooks/useFocusOutside.js.map +0 -1
  500. package/esm/tabs-next/hooks/useOverflow.js +0 -136
  501. package/esm/tabs-next/hooks/useOverflow.js.map +0 -1
  502. package/esm/tabstrip/Tab.css.js +0 -4
  503. package/esm/tabstrip/Tab.css.js.map +0 -1
  504. package/esm/tabstrip/Tab.js +0 -151
  505. package/esm/tabstrip/Tab.js.map +0 -1
  506. package/esm/tabstrip/TabMenu.css.js +0 -4
  507. package/esm/tabstrip/TabMenu.css.js.map +0 -1
  508. package/esm/tabstrip/TabMenu.js +0 -70
  509. package/esm/tabstrip/TabMenu.js.map +0 -1
  510. package/esm/tabstrip/TabMenuOptions.js +0 -16
  511. package/esm/tabstrip/TabMenuOptions.js.map +0 -1
  512. package/esm/tabstrip/Tabstrip.css.js +0 -4
  513. package/esm/tabstrip/Tabstrip.css.js.map +0 -1
  514. package/esm/tabstrip/Tabstrip.js +0 -158
  515. package/esm/tabstrip/Tabstrip.js.map +0 -1
  516. package/esm/tabstrip/tabstrip-dom-utils.js +0 -16
  517. package/esm/tabstrip/tabstrip-dom-utils.js.map +0 -1
  518. package/esm/tabstrip/useAnimatedSelectionThumb.js +0 -83
  519. package/esm/tabstrip/useAnimatedSelectionThumb.js.map +0 -1
  520. package/esm/tabstrip/useKeyboardNavigation.js +0 -245
  521. package/esm/tabstrip/useKeyboardNavigation.js.map +0 -1
  522. package/esm/tabstrip/useSelection.js +0 -58
  523. package/esm/tabstrip/useSelection.js.map +0 -1
  524. package/esm/tabstrip/useTabstrip.js +0 -231
  525. package/esm/tabstrip/useTabstrip.js.map +0 -1
  526. package/esm/time-input/MaskedInput.js +0 -375
  527. package/esm/time-input/MaskedInput.js.map +0 -1
  528. package/esm/time-input/TimeInput.css.js +0 -4
  529. package/esm/time-input/TimeInput.css.js.map +0 -1
  530. package/esm/time-input/TimeInput.js +0 -54
  531. package/esm/time-input/TimeInput.js.map +0 -1
  532. package/esm/time-input/useTimeInput.js +0 -119
  533. package/esm/time-input/useTimeInput.js.map +0 -1
  534. package/esm/toolbar/Toolbar.css.js +0 -4
  535. package/esm/toolbar/Toolbar.css.js.map +0 -1
  536. package/esm/toolbar/Toolbar.js +0 -88
  537. package/esm/toolbar/Toolbar.js.map +0 -1
  538. package/esm/toolbar/toolbar-dom-utils.js +0 -15
  539. package/esm/toolbar/toolbar-dom-utils.js.map +0 -1
  540. package/esm/toolbar/useKeyboardNavigation.js +0 -303
  541. package/esm/toolbar/useKeyboardNavigation.js.map +0 -1
  542. package/esm/toolbar/useSelection.js +0 -91
  543. package/esm/toolbar/useSelection.js.map +0 -1
  544. package/esm/toolbar/useToolbar.js +0 -98
  545. package/esm/toolbar/useToolbar.js.map +0 -1
  546. package/esm/utils/escapeRegExp.js +0 -7
  547. package/esm/utils/escapeRegExp.js.map +0 -1
  548. package/esm/utils/forwardCallbackProps.js +0 -20
  549. package/esm/utils/forwardCallbackProps.js.map +0 -1
  550. package/esm/utils/isOverflowElement.js +0 -6
  551. package/esm/utils/isOverflowElement.js.map +0 -1
  552. package/esm/utils/isPlainObject.js +0 -4
  553. package/esm/utils/isPlainObject.js.map +0 -1
  554. package/esm/vuu-date-picker/VuuDatePicker.js +0 -120
  555. package/esm/vuu-date-picker/VuuDatePicker.js.map +0 -1
  556. package/esm/vuu-input/VuuInput.css.js +0 -4
  557. package/esm/vuu-input/VuuInput.css.js.map +0 -1
  558. package/esm/vuu-input/VuuInput.js +0 -100
  559. package/esm/vuu-input/VuuInput.js.map +0 -1
  560. package/esm/vuu-time-picker/VuuTimePicker.css.js +0 -4
  561. package/esm/vuu-time-picker/VuuTimePicker.css.js.map +0 -1
  562. package/esm/vuu-time-picker/VuuTimePicker.js +0 -35
  563. package/esm/vuu-time-picker/VuuTimePicker.js.map +0 -1
  564. package/esm/vuu-typeahead-input/VuuTypeaheadInput.css.js +0 -4
  565. package/esm/vuu-typeahead-input/VuuTypeaheadInput.css.js.map +0 -1
  566. package/esm/vuu-typeahead-input/VuuTypeaheadInput.js +0 -78
  567. package/esm/vuu-typeahead-input/VuuTypeaheadInput.js.map +0 -1
  568. package/esm/vuu-typeahead-input/useVuuTypeaheadInput.js +0 -174
  569. package/esm/vuu-typeahead-input/useVuuTypeaheadInput.js.map +0 -1
@@ -1,272 +0,0 @@
1
- import { getElementByDataIndex } from '@vuu-ui/vuu-utils';
2
-
3
- const NON_WRAPPED_ITEM = ".vuuOverflowContainer-item:not(.wrapped)";
4
- const sortByScreenOrder = (elements) => elements.sort((e1, e2) => {
5
- const {
6
- dataset: { index: idx1 = "?" }
7
- } = e1;
8
- const {
9
- dataset: { index: idx2 = "?" }
10
- } = e2;
11
- const isOverflowed1 = e1.classList.contains("wrapped");
12
- const isOverflowed2 = e2.classList.contains("wrapped");
13
- const isOverflowedIndicator1 = idx1 === "overflow";
14
- const isOverflowedIndicator2 = idx2 === "overflow";
15
- if (isOverflowed1 && !isOverflowed2) {
16
- return 1;
17
- } else if (!isOverflowed1 && isOverflowed2) {
18
- return -1;
19
- }
20
- if (isOverflowedIndicator1) {
21
- return 1;
22
- } else if (isOverflowedIndicator2) {
23
- return -1;
24
- }
25
- return parseInt(idx1) > parseInt(idx2) ? 1 : -1;
26
- });
27
- const NO_WRAPPED_ITEMS = [];
28
- const getNonWrappedAndWrappedItems = (container, orientation) => {
29
- const nonWrappedItems = [];
30
- const wrappedItems = [];
31
- let currentPosition = -1;
32
- let overflowed = false;
33
- const sortedChildren = sortByScreenOrder(
34
- Array.from(container.children)
35
- );
36
- const positionAttribute = orientation === "vertical" ? "top" : "left";
37
- for (const child of sortedChildren) {
38
- const element = child;
39
- const {
40
- dataset: { index = "?", label = "?", overflowPriority = "0" }
41
- } = element;
42
- const { [positionAttribute]: position } = element.getBoundingClientRect();
43
- if (position <= currentPosition) {
44
- if (index === "overflow") {
45
- wrappedItems.push(nonWrappedItems.pop());
46
- } else {
47
- wrappedItems.push({ index, label, overflowPriority });
48
- }
49
- overflowed = true;
50
- } else if (overflowed) {
51
- wrappedItems.push({ index, label, overflowPriority });
52
- } else {
53
- nonWrappedItems.push({ index, label, overflowPriority });
54
- }
55
- currentPosition = position;
56
- }
57
- return [nonWrappedItems, wrappedItems];
58
- };
59
- const applyOverflowClassToWrappedItems = (container, overflowedItems, classBase) => {
60
- let ignoreOverflow = false;
61
- const className = classBase ? `${classBase}-overflowed` : "overflow";
62
- if (overflowedItems.find(({ index }) => index === "overflow")) {
63
- if (overflowedItems.length === 1) {
64
- ignoreOverflow = true;
65
- }
66
- }
67
- for (const element of container.children) {
68
- const {
69
- dataset: { index = "?" }
70
- } = element;
71
- if (overflowedItems.length === 0 || ignoreOverflow) {
72
- container.classList.remove(className);
73
- } else {
74
- container.classList.add(className);
75
- }
76
- if (index !== "overflow" && overflowedItems.find((item) => item.index === index)) {
77
- element.classList.add("wrapped");
78
- } else {
79
- element.classList.remove("wrapped");
80
- }
81
- }
82
- };
83
- const maxPriority = (priority, { overflowPriority }) => Math.max(priority, parseInt(overflowPriority));
84
- const minPriority = (priority, { overflowPriority }) => Math.min(priority, parseInt(overflowPriority));
85
- const overflowIndicatorHasWrappedButShouldNotHave = (wrappedItems) => wrappedItems.length > 1 && wrappedItems.at(-1)?.index === "overflow";
86
- const getHighestPriorityItem = (overflowItems) => {
87
- let [highestPriorityItem] = overflowItems;
88
- for (let i = 1; i < overflowItems.length; i++) {
89
- const item = overflowItems[i];
90
- if (parseInt(item.overflowPriority) > parseInt(highestPriorityItem.overflowPriority)) {
91
- highestPriorityItem = item;
92
- }
93
- }
94
- return highestPriorityItem;
95
- };
96
- const highPriorityItemsHaveWrappedButShouldNotHave = (nonWrappedItems, wrappedItems) => {
97
- const minNonwrappedPriority = nonWrappedItems.reduce(
98
- minPriority,
99
- Number.MAX_SAFE_INTEGER
100
- );
101
- const maxwrappedPriority = wrappedItems.reduce(maxPriority, 0);
102
- if (maxwrappedPriority > minNonwrappedPriority) {
103
- return true;
104
- } else {
105
- return wrappedItems.length > 1 && wrappedItems.at(-1)?.index === "overflow";
106
- }
107
- };
108
- const correctForWrappedOverflowIndicator = (container, overflowedItems, orientation) => new Promise((resolve) => {
109
- requestAnimationFrame(() => {
110
- const [, o2] = getNonWrappedAndWrappedItems(container, orientation);
111
- const newlyOverflowed = getNewItems(overflowedItems, o2);
112
- newlyOverflowed.forEach((item) => markElementAsWrapped(container, item));
113
- resolve(o2);
114
- });
115
- });
116
- const correctForWrappedHighPriorityItems = (container, nonWrapped, wrapped, orientation) => new Promise((resolve) => {
117
- requestAnimationFrame(() => {
118
- const [, o2] = getNonWrappedAndWrappedItems(container, orientation);
119
- const highPriorityWrappedItem = getHighestPriorityItem(o2);
120
- if (highPriorityWrappedItem) {
121
- const [nonWrappedItems, wrappedItems] = switchWrappedItemIntoView(
122
- container,
123
- highPriorityWrappedItem,
124
- orientation
125
- );
126
- resolve([nonWrappedItems, wrappedItems]);
127
- } else {
128
- resolve([nonWrapped, wrapped]);
129
- }
130
- });
131
- });
132
- const markElementAsWrapped = (container, item) => {
133
- const el = getElementByDataIndex(container, item.index);
134
- if (el) {
135
- el.classList.add("wrapped");
136
- } else {
137
- throw Error(
138
- `markElementAsWrapped element item with index ${item.index} not found`
139
- );
140
- }
141
- };
142
- const getElementsMarkedAsWrapped = (container) => Array.from(container.querySelectorAll(".wrapped"));
143
- const getNewItems = (items1, items2) => {
144
- const newItems = [];
145
- for (const item of items2) {
146
- if (!items1.find(({ index }) => index === item.index)) {
147
- newItems.push(item);
148
- }
149
- }
150
- return newItems;
151
- };
152
- const unmarkItemsWhichAreNoLongerWrapped = (container, wrappedItems) => {
153
- const elementssMarkedAsWrapped = getElementsMarkedAsWrapped(container);
154
- elementssMarkedAsWrapped.forEach((el) => {
155
- const {
156
- dataset: { index = "?" }
157
- } = el;
158
- if (!wrappedItems.find((i) => i.index === index)) {
159
- el.classList.remove("wrapped");
160
- }
161
- });
162
- };
163
- const getOverflowIndicator = (container) => container.querySelector('[data-index="overflow"]');
164
- const getOverflowedItem = (container) => container.querySelector(".wrapped");
165
- const getElementSize = (el, sizeProperty) => {
166
- const size = parseInt(getComputedStyle(el).getPropertyValue(sizeProperty));
167
- const margin = sizeProperty === "width" ? parseInt(getComputedStyle(el).getPropertyValue("margin-left")) + parseInt(getComputedStyle(el).getPropertyValue("margin-right")) : parseInt(getComputedStyle(el).getPropertyValue("margin-top")) + parseInt(getComputedStyle(el).getPropertyValue("margin-bottom"));
168
- return size + margin;
169
- };
170
- const getAvailableSpace = (container, overflowIndicator, orientation) => {
171
- if (orientation === "horizontal") {
172
- const { right: containerRight } = container.getBoundingClientRect();
173
- const paddingRight = parseInt(
174
- getComputedStyle(container).getPropertyValue("padding-right")
175
- );
176
- const { right: indicatorRight } = overflowIndicator.getBoundingClientRect();
177
- return containerRight - paddingRight - indicatorRight;
178
- } else {
179
- const { bottom: containerBottom } = container.getBoundingClientRect();
180
- const paddingBottom = parseInt(
181
- getComputedStyle(container).getPropertyValue("padding-bottom")
182
- );
183
- const { bottom: indicatorBottom } = overflowIndicator.getBoundingClientRect();
184
- return containerBottom - paddingBottom - indicatorBottom;
185
- }
186
- };
187
- const removeOverflowIndicatorIfNoLongerNeeded = (container, orientation) => {
188
- const sizeProperty = orientation === "horizontal" ? "width" : "height";
189
- const overflowIndicator = getOverflowIndicator(container);
190
- const availableSpace = getAvailableSpace(
191
- container,
192
- overflowIndicator,
193
- orientation
194
- );
195
- const indicatorWidth = getElementSize(overflowIndicator, sizeProperty);
196
- const overflowedItem = getOverflowedItem(container);
197
- const overflowWidth = getElementSize(overflowedItem, sizeProperty);
198
- if (overflowWidth <= availableSpace + indicatorWidth) {
199
- container.classList.remove("vuuOverflowContainer-wrapContainer-overflowed");
200
- overflowedItem.classList.remove("wrapped");
201
- return true;
202
- }
203
- return false;
204
- };
205
- const byPriorityDescending = (h1, h2) => {
206
- const {
207
- dataset: { index: i1 = "0", overflowPriority: p1 = "0" }
208
- } = h1;
209
- const {
210
- dataset: { index: i2 = "0", overflowPriority: p2 = "0" }
211
- } = h2;
212
- if (p1 > p2) {
213
- return -1;
214
- } else if (p1 < p2) {
215
- return 1;
216
- } else {
217
- return parseInt(i1) - parseInt(i2);
218
- }
219
- };
220
- const getNonwrappedItemsByPriority = (container) => Array.from(container.querySelectorAll(NON_WRAPPED_ITEM)).sort(
221
- byPriorityDescending
222
- );
223
- const switchWrappedItemIntoView = (container, overflowItem, orientation) => {
224
- const unwrappedItems = getNonwrappedItemsByPriority(container);
225
- const targetElement = getElementByDataIndex(
226
- container,
227
- overflowItem.index,
228
- true
229
- );
230
- let pos = -1;
231
- let unwrappedItem = unwrappedItems.at(pos);
232
- const sizeProperty = orientation === "horizontal" ? "width" : "height";
233
- const itemWidth = getElementSize(unwrappedItem, sizeProperty);
234
- const targetWidth = getElementSize(targetElement, sizeProperty);
235
- const overflowIndicator = getOverflowIndicator(container);
236
- let availableSpace = getAvailableSpace(container, overflowIndicator, orientation) + itemWidth;
237
- if (availableSpace >= targetWidth) {
238
- switchWrapOnElements(targetElement, unwrappedItem);
239
- } else {
240
- const { left: lastLeft } = unwrappedItem.getBoundingClientRect();
241
- const baseAvailableSpace = availableSpace;
242
- const wrapTargets = [unwrappedItem];
243
- while (availableSpace < targetWidth) {
244
- pos -= 1;
245
- unwrappedItem = unwrappedItems.at(pos);
246
- wrapTargets.push(unwrappedItem);
247
- const { left: nextLeft } = unwrappedItem.getBoundingClientRect();
248
- const extraSpace = lastLeft - nextLeft;
249
- availableSpace = baseAvailableSpace + extraSpace;
250
- }
251
- targetElement?.classList.remove("wrapped");
252
- wrapTargets.forEach((item) => {
253
- item.classList.add("wrapped");
254
- });
255
- }
256
- const [nonWrappedItems, wrappedItems] = getNonWrappedAndWrappedItems(
257
- container,
258
- orientation
259
- );
260
- unmarkItemsWhichAreNoLongerWrapped(container, wrappedItems);
261
- return [nonWrappedItems, wrappedItems];
262
- };
263
- const switchWrapOnElements = (wrappedElement, nonWrappedElement) => {
264
- if (!wrappedElement || !nonWrappedElement) {
265
- throw Error("switchWrapOnElements, element undefined");
266
- }
267
- wrappedElement.classList.remove("wrapped");
268
- nonWrappedElement.classList.add("wrapped");
269
- };
270
-
271
- export { NO_WRAPPED_ITEMS, applyOverflowClassToWrappedItems, correctForWrappedHighPriorityItems, correctForWrappedOverflowIndicator, getElementsMarkedAsWrapped, getNonWrappedAndWrappedItems, highPriorityItemsHaveWrappedButShouldNotHave, markElementAsWrapped, overflowIndicatorHasWrappedButShouldNotHave, removeOverflowIndicatorIfNoLongerNeeded, sortByScreenOrder, switchWrappedItemIntoView, unmarkItemsWhichAreNoLongerWrapped };
272
- //# sourceMappingURL=overflow-utils.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"overflow-utils.js","sources":["../../../../packages/vuu-ui-controls/src/overflow-container/overflow-utils.ts"],"sourcesContent":["import { getElementByDataIndex, orientationType } from \"@vuu-ui/vuu-utils\";\n\nconst NON_WRAPPED_ITEM = \".vuuOverflowContainer-item:not(.wrapped)\";\n\nexport type OverflowItem = {\n index: string;\n label: string;\n overflowPriority: string;\n};\n\nexport const sortByScreenOrder = (elements: HTMLElement[]): HTMLElement[] =>\n elements.sort((e1, e2) => {\n const {\n dataset: { index: idx1 = \"?\" },\n } = e1;\n const {\n dataset: { index: idx2 = \"?\" },\n } = e2;\n const isOverflowed1 = e1.classList.contains(\"wrapped\");\n const isOverflowed2 = e2.classList.contains(\"wrapped\");\n const isOverflowedIndicator1 = idx1 === \"overflow\";\n const isOverflowedIndicator2 = idx2 === \"overflow\";\n if (isOverflowed1 && !isOverflowed2) {\n return 1;\n } else if (!isOverflowed1 && isOverflowed2) {\n return -1;\n }\n if (isOverflowedIndicator1) {\n return 1;\n } else if (isOverflowedIndicator2) {\n return -1;\n }\n return parseInt(idx1) > parseInt(idx2) ? 1 : -1;\n });\n\nexport const NO_WRAPPED_ITEMS: OverflowItem[] = [];\n\n/**\n Identify wrapped items by comparing position of each item. Any item\n not to the right of preceeding item has wrapped. Note: on-screen \n position of items does not necessarily match document position, due\n to use of css order. This is taken into account by sorting. \n TODO support Vertical orientation\n */\nexport const getNonWrappedAndWrappedItems = (\n container: HTMLElement,\n orientation: orientationType,\n): [OverflowItem[], OverflowItem[]] => {\n const nonWrappedItems: OverflowItem[] = [];\n const wrappedItems: OverflowItem[] = [];\n let currentPosition = -1;\n let overflowed = false;\n const sortedChildren = sortByScreenOrder(\n Array.from(container.children) as HTMLElement[],\n );\n const positionAttribute = orientation === \"vertical\" ? \"top\" : \"left\";\n for (const child of sortedChildren) {\n const element = child as HTMLElement;\n const {\n dataset: { index = \"?\", label = \"?\", overflowPriority = \"0\" },\n } = element;\n const { [positionAttribute]: position } = element.getBoundingClientRect();\n if (position <= currentPosition) {\n if (index === \"overflow\") {\n wrappedItems.push(nonWrappedItems.pop() as OverflowItem);\n } else {\n wrappedItems.push({ index, label, overflowPriority });\n }\n overflowed = true;\n } else if (overflowed) {\n wrappedItems.push({ index, label, overflowPriority });\n } else {\n nonWrappedItems.push({ index, label, overflowPriority });\n }\n currentPosition = position;\n }\n return [nonWrappedItems, wrappedItems];\n};\n\nexport const applyOverflowClassToWrappedItems = (\n container: HTMLElement,\n overflowedItems: OverflowItem[],\n classBase?: string,\n) => {\n let ignoreOverflow = false;\n const className = classBase ? `${classBase}-overflowed` : \"overflow\";\n if (overflowedItems.find(({ index }) => index === \"overflow\")) {\n if (overflowedItems.length === 1) {\n ignoreOverflow = true;\n }\n }\n for (const element of container.children) {\n const {\n dataset: { index = \"?\" },\n } = element as HTMLElement;\n if (overflowedItems.length === 0 || ignoreOverflow) {\n container.classList.remove(className);\n } else {\n container.classList.add(className);\n }\n if (\n index !== \"overflow\" &&\n overflowedItems.find((item) => item.index === index)\n ) {\n element.classList.add(\"wrapped\");\n } else {\n element.classList.remove(\"wrapped\");\n }\n }\n};\n\nconst maxPriority = (priority: number, { overflowPriority }: OverflowItem) =>\n Math.max(priority, parseInt(overflowPriority));\n\nconst minPriority = (priority: number, { overflowPriority }: OverflowItem) =>\n Math.min(priority, parseInt(overflowPriority));\n\nexport const overflowIndicatorHasWrappedButShouldNotHave = (\n wrappedItems: OverflowItem[],\n) => wrappedItems.length > 1 && wrappedItems.at(-1)?.index === \"overflow\";\n\nconst getHighestPriorityItem = (overflowItems: OverflowItem[]) => {\n let [highestPriorityItem] = overflowItems;\n for (let i = 1; i < overflowItems.length; i++) {\n const item = overflowItems[i];\n if (\n parseInt(item.overflowPriority) >\n parseInt(highestPriorityItem.overflowPriority)\n ) {\n highestPriorityItem = item;\n }\n }\n return highestPriorityItem;\n};\n\nexport const highPriorityItemsHaveWrappedButShouldNotHave = (\n nonWrappedItems: OverflowItem[],\n wrappedItems: OverflowItem[],\n) => {\n const minNonwrappedPriority = nonWrappedItems.reduce<number>(\n minPriority,\n Number.MAX_SAFE_INTEGER,\n );\n const maxwrappedPriority = wrappedItems.reduce<number>(maxPriority, 0);\n if (maxwrappedPriority > minNonwrappedPriority) {\n return true;\n } else {\n return wrappedItems.length > 1 && wrappedItems.at(-1)?.index === \"overflow\";\n }\n};\n\n/** \n An edge case that may occur when reducing width from unwrapped to\n wrapped, or on first render.\n We overflow one or more items. Then, when the overflowIndicator assumes\n full width, it may itself overflow.\n*/\nexport const correctForWrappedOverflowIndicator = (\n container: HTMLElement,\n overflowedItems: OverflowItem[],\n orientation: orientationType,\n): Promise<OverflowItem[]> =>\n new Promise((resolve) => {\n requestAnimationFrame(() => {\n const [, o2] = getNonWrappedAndWrappedItems(container, orientation);\n const newlyOverflowed = getNewItems(overflowedItems, o2);\n newlyOverflowed.forEach((item) => markElementAsWrapped(container, item));\n resolve(o2);\n });\n });\n\n/** \n An edge case that may occur when reducing width from unwrapped to\n wrapped, or on first render.\n We overflow one or more items. Then, when the overflowIndicator assumes\n full width, it may itself overflow.\n*/\nexport const correctForWrappedHighPriorityItems = (\n container: HTMLElement,\n nonWrapped: OverflowItem[],\n wrapped: OverflowItem[],\n orientation: orientationType,\n): Promise<[OverflowItem[], OverflowItem[]]> =>\n new Promise((resolve) => {\n requestAnimationFrame(() => {\n const [, o2] = getNonWrappedAndWrappedItems(container, orientation);\n const highPriorityWrappedItem = getHighestPriorityItem(o2);\n if (highPriorityWrappedItem) {\n const [nonWrappedItems, wrappedItems] = switchWrappedItemIntoView(\n container,\n highPriorityWrappedItem,\n orientation,\n );\n resolve([nonWrappedItems, wrappedItems]);\n } else {\n resolve([nonWrapped, wrapped]);\n }\n });\n });\n\nexport const markElementAsWrapped = (\n container: HTMLElement,\n item: OverflowItem,\n) => {\n const el = getElementByDataIndex(container, item.index);\n if (el) {\n el.classList.add(\"wrapped\");\n } else {\n throw Error(\n `markElementAsWrapped element item with index ${item.index} not found`,\n );\n }\n};\n\nexport const getElementsMarkedAsWrapped = (container: HTMLElement) =>\n Array.from(container.querySelectorAll(\".wrapped\")) as HTMLElement[];\n\nconst getNewItems = (items1: OverflowItem[], items2: OverflowItem[]) => {\n const newItems: OverflowItem[] = [];\n for (const item of items2) {\n if (!items1.find(({ index }) => index === item.index)) {\n newItems.push(item);\n }\n }\n return newItems;\n};\n\nexport const unmarkItemsWhichAreNoLongerWrapped = (\n container: HTMLElement,\n wrappedItems: OverflowItem[],\n) => {\n const elementssMarkedAsWrapped = getElementsMarkedAsWrapped(container);\n elementssMarkedAsWrapped.forEach((el) => {\n const {\n dataset: { index = \"?\" },\n } = el;\n if (!wrappedItems.find((i) => i.index === index)) {\n el.classList.remove(\"wrapped\");\n }\n });\n};\n\nconst getOverflowIndicator = (container: HTMLElement) =>\n container.querySelector('[data-index=\"overflow\"]') as HTMLElement;\nconst getOverflowedItem = (container: HTMLElement) =>\n container.querySelector(\".wrapped\") as HTMLElement;\nconst getElementSize = (el: HTMLElement, sizeProperty: \"width\" | \"height\") => {\n const size = parseInt(getComputedStyle(el).getPropertyValue(sizeProperty));\n const margin =\n sizeProperty === \"width\"\n ? parseInt(getComputedStyle(el).getPropertyValue(\"margin-left\")) +\n parseInt(getComputedStyle(el).getPropertyValue(\"margin-right\"))\n : parseInt(getComputedStyle(el).getPropertyValue(\"margin-top\")) +\n parseInt(getComputedStyle(el).getPropertyValue(\"margin-bottom\"));\n\n return size + margin;\n};\n\nconst getAvailableSpace = (\n container: HTMLElement,\n overflowIndicator: HTMLElement,\n orientation: orientationType,\n) => {\n if (orientation === \"horizontal\") {\n const { right: containerRight } = container.getBoundingClientRect();\n const paddingRight = parseInt(\n getComputedStyle(container).getPropertyValue(\"padding-right\"),\n );\n const { right: indicatorRight } = overflowIndicator.getBoundingClientRect();\n return containerRight - paddingRight - indicatorRight;\n } else {\n const { bottom: containerBottom } = container.getBoundingClientRect();\n const paddingBottom = parseInt(\n getComputedStyle(container).getPropertyValue(\"padding-bottom\"),\n );\n const { bottom: indicatorBottom } =\n overflowIndicator.getBoundingClientRect();\n return containerBottom - paddingBottom - indicatorBottom;\n }\n};\n\n/**\n An edge case. If container has grown but we still have one\n wrapped item - could the wrapped item return to the fold if the overflow\n indicaor were removed ?\n */\nexport const removeOverflowIndicatorIfNoLongerNeeded = (\n container: HTMLElement,\n orientation: orientationType,\n): boolean => {\n const sizeProperty = orientation === \"horizontal\" ? \"width\" : \"height\";\n const overflowIndicator = getOverflowIndicator(container);\n const availableSpace = getAvailableSpace(\n container,\n overflowIndicator,\n orientation,\n );\n const indicatorWidth = getElementSize(overflowIndicator, sizeProperty);\n const overflowedItem = getOverflowedItem(container);\n const overflowWidth = getElementSize(overflowedItem, sizeProperty);\n\n if (overflowWidth <= availableSpace + indicatorWidth) {\n container.classList.remove(\"vuuOverflowContainer-wrapContainer-overflowed\");\n overflowedItem.classList.remove(\"wrapped\");\n return true;\n }\n return false;\n};\n\nconst byPriorityDescending = (h1: Element, h2: Element) => {\n const {\n dataset: { index: i1 = \"0\", overflowPriority: p1 = \"0\" },\n } = h1 as HTMLElement;\n const {\n dataset: { index: i2 = \"0\", overflowPriority: p2 = \"0\" },\n } = h2 as HTMLElement;\n\n if (p1 > p2) {\n return -1;\n } else if (p1 < p2) {\n return 1;\n } else {\n return parseInt(i1) - parseInt(i2);\n }\n};\n\nconst getNonwrappedItemsByPriority = (container: HTMLElement) =>\n Array.from(container.querySelectorAll(NON_WRAPPED_ITEM)).sort(\n byPriorityDescending,\n ) as HTMLElement[];\n\n/**\n * This is used both when an overflow menu is used to select an overflowed item\n * and when a high priority item has overflowed, whilst lower priority items\n * remain in view.\n */\nexport const switchWrappedItemIntoView = (\n container: HTMLElement,\n overflowItem: OverflowItem,\n orientation: orientationType,\n): [OverflowItem[], OverflowItem[]] => {\n const unwrappedItems = getNonwrappedItemsByPriority(container);\n const targetElement = getElementByDataIndex(\n container,\n overflowItem.index,\n true,\n );\n let pos = -1;\n let unwrappedItem = unwrappedItems.at(pos) as HTMLElement;\n const sizeProperty = orientation === \"horizontal\" ? \"width\" : \"height\";\n const itemWidth = getElementSize(unwrappedItem, sizeProperty);\n const targetWidth = getElementSize(targetElement, sizeProperty);\n const overflowIndicator = getOverflowIndicator(container);\n let availableSpace =\n getAvailableSpace(container, overflowIndicator, orientation) + itemWidth;\n if (availableSpace >= targetWidth) {\n switchWrapOnElements(targetElement, unwrappedItem);\n } else {\n // we need to wrap multiple items to make space for the switched item\n const { left: lastLeft } = unwrappedItem.getBoundingClientRect();\n const baseAvailableSpace = availableSpace;\n const wrapTargets = [unwrappedItem];\n while (availableSpace < targetWidth) {\n pos -= 1;\n unwrappedItem = unwrappedItems.at(pos) as HTMLElement;\n wrapTargets.push(unwrappedItem);\n const { left: nextLeft } = unwrappedItem.getBoundingClientRect();\n const extraSpace = lastLeft - nextLeft;\n availableSpace = baseAvailableSpace + extraSpace;\n }\n\n targetElement?.classList.remove(\"wrapped\");\n wrapTargets.forEach((item) => {\n item.classList.add(\"wrapped\");\n });\n }\n const [nonWrappedItems, wrappedItems] = getNonWrappedAndWrappedItems(\n container,\n orientation,\n );\n unmarkItemsWhichAreNoLongerWrapped(container, wrappedItems);\n return [nonWrappedItems, wrappedItems];\n};\n\nconst switchWrapOnElements = (\n wrappedElement?: HTMLElement | null,\n nonWrappedElement?: HTMLElement,\n) => {\n if (!wrappedElement || !nonWrappedElement) {\n throw Error(\"switchWrapOnElements, element undefined\");\n }\n wrappedElement.classList.remove(\"wrapped\");\n nonWrappedElement.classList.add(\"wrapped\");\n};\n"],"names":[],"mappings":"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"}
@@ -1,141 +0,0 @@
1
- import { MEASURES, isValidNumber, useLayoutEffectSkipFirst } from '@vuu-ui/vuu-utils';
2
- import { useState, useRef, useCallback, useMemo } from 'react';
3
- import { NO_WRAPPED_ITEMS, getNonWrappedAndWrappedItems, applyOverflowClassToWrappedItems, overflowIndicatorHasWrappedButShouldNotHave, correctForWrappedOverflowIndicator, highPriorityItemsHaveWrappedButShouldNotHave, correctForWrappedHighPriorityItems, removeOverflowIndicatorIfNoLongerNeeded, switchWrappedItemIntoView } from './overflow-utils.js';
4
- import '../drag-drop/DragDropProvider.js';
5
- import { useDragDrop } from '../drag-drop/useDragDrop.js';
6
-
7
- const useOverflowContainer = ({
8
- allowDragDrop = false,
9
- itemCount,
10
- onMoveItem,
11
- onSwitchWrappedItemIntoView,
12
- orientation
13
- }) => {
14
- const [container, setContainer] = useState(null);
15
- const wrappedItemsRef = useRef(NO_WRAPPED_ITEMS);
16
- const containerRef = useRef(null);
17
- const setOverflowTabIndex = useCallback((tabIndex) => {
18
- if (containerRef.current) {
19
- containerRef.current.querySelector(".vuuOverflowContainer-OverflowIndicator button")?.setAttribute("tabindex", tabIndex);
20
- }
21
- }, []);
22
- const handleResize = useCallback(async () => {
23
- if (container) {
24
- let [nonWrapped, wrapped] = getNonWrappedAndWrappedItems(
25
- container,
26
- orientation
27
- );
28
- applyOverflowClassToWrappedItems(
29
- container,
30
- wrapped,
31
- "vuuOverflowContainer-wrapContainer"
32
- );
33
- if (overflowIndicatorHasWrappedButShouldNotHave(wrapped)) {
34
- wrapped = await correctForWrappedOverflowIndicator(
35
- container,
36
- wrapped,
37
- orientation
38
- );
39
- }
40
- while (highPriorityItemsHaveWrappedButShouldNotHave(nonWrapped, wrapped)) {
41
- [nonWrapped, wrapped] = await correctForWrappedHighPriorityItems(
42
- container,
43
- nonWrapped,
44
- wrapped,
45
- orientation
46
- );
47
- }
48
- if (wrapped.length === 1) {
49
- if (removeOverflowIndicatorIfNoLongerNeeded(container, orientation)) {
50
- wrapped = NO_WRAPPED_ITEMS;
51
- }
52
- }
53
- if (wrappedItemsRef.current.length === 0 && wrapped.length > 0) {
54
- setOverflowTabIndex("0");
55
- } else if (wrappedItemsRef.current.length > 0 && wrapped.length === 0) {
56
- setOverflowTabIndex("-1");
57
- }
58
- wrappedItemsRef.current = wrapped;
59
- }
60
- }, [container, orientation, setOverflowTabIndex]);
61
- const hasOverflowItem = (opt) => typeof opt === "object" && opt !== null && "overflowItem" in opt;
62
- const [menuBuilder, menuActionHandler] = useMemo(() => {
63
- return [
64
- () => {
65
- const { current: menuItems } = wrappedItemsRef;
66
- return menuItems.map((item) => {
67
- return {
68
- label: item.label,
69
- id: `activate-item-${item.index}`,
70
- options: { overflowItem: item }
71
- };
72
- });
73
- },
74
- // The menu items are our overflowed items, selecting one by default
75
- // brings it back onto the toolbar - TODO is this right ?
76
- (menuItemId, options) => {
77
- if (container && hasOverflowItem(options)) {
78
- const [, wrappedItems] = switchWrappedItemIntoView(
79
- container,
80
- options.overflowItem,
81
- orientation
82
- );
83
- wrappedItemsRef.current = wrappedItems;
84
- onSwitchWrappedItemIntoView?.(options.overflowItem);
85
- }
86
- return true;
87
- }
88
- ];
89
- }, [container, onSwitchWrappedItemIntoView, orientation]);
90
- const resizeObserver = useMemo(() => {
91
- const { sizeProp } = MEASURES[orientation];
92
- let currentSize = 0;
93
- return new ResizeObserver((entries) => {
94
- for (const entry of entries) {
95
- const { [sizeProp]: actualSize } = entry.contentRect;
96
- const size = Math.round(actualSize);
97
- if (isValidNumber(size) && currentSize !== size) {
98
- currentSize = size;
99
- handleResize();
100
- }
101
- }
102
- });
103
- }, [handleResize, orientation]);
104
- useLayoutEffectSkipFirst(() => {
105
- handleResize();
106
- }, [handleResize, itemCount]);
107
- useMemo(() => {
108
- if (container) {
109
- resizeObserver.observe(container);
110
- }
111
- }, [container, resizeObserver]);
112
- const callbackRef = useCallback((el) => {
113
- setContainer(containerRef.current = el);
114
- }, []);
115
- const handleDrop = useCallback(
116
- ({ fromIndex, toIndex }) => {
117
- onMoveItem?.(fromIndex, toIndex);
118
- },
119
- [onMoveItem]
120
- );
121
- const { onMouseDown: dragDropHookHandleMouseDown, ...dragDropHook } = useDragDrop({
122
- allowDragDrop,
123
- containerRef,
124
- // this is for useDragDropNext
125
- draggableClassName: `vuuOverflowContainer`,
126
- // extendedDropZone: overflowedItems.length > 0,
127
- onDrop: handleDrop,
128
- orientation: "horizontal",
129
- itemQuery: ".vuuOverflowContainer-item"
130
- });
131
- return {
132
- menuActionHandler,
133
- menuBuilder,
134
- onItemMouseDown: dragDropHookHandleMouseDown,
135
- rootRef: callbackRef,
136
- ...dragDropHook
137
- };
138
- };
139
-
140
- export { useOverflowContainer };
141
- //# sourceMappingURL=useOverflowContainer.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useOverflowContainer.js","sources":["../../../../packages/vuu-ui-controls/src/overflow-container/useOverflowContainer.ts"],"sourcesContent":["import {\n isValidNumber,\n MEASURES,\n useLayoutEffectSkipFirst,\n} from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport {\n applyOverflowClassToWrappedItems,\n removeOverflowIndicatorIfNoLongerNeeded,\n correctForWrappedHighPriorityItems,\n getNonWrappedAndWrappedItems,\n NO_WRAPPED_ITEMS,\n highPriorityItemsHaveWrappedButShouldNotHave,\n switchWrappedItemIntoView,\n OverflowItem,\n overflowIndicatorHasWrappedButShouldNotHave,\n correctForWrappedOverflowIndicator,\n} from \"./overflow-utils\";\nimport { OverflowContainerProps } from \"./OverflowContainer\";\nimport { DropOptions, useDragDrop } from \"../drag-drop\";\nimport { MenuActionHandler, MenuBuilder } from \"@vuu-ui/vuu-context-menu\";\n\nexport interface OverflowContainerHookProps\n extends Pick<OverflowContainerProps, \"allowDragDrop\" | \"onMoveItem\">,\n Required<Pick<OverflowContainerProps, \"orientation\">> {\n itemCount: number;\n onSwitchWrappedItemIntoView?: (overflowItem: OverflowItem) => void;\n}\n\nexport const useOverflowContainer = ({\n allowDragDrop = false,\n itemCount,\n onMoveItem,\n onSwitchWrappedItemIntoView,\n orientation,\n}: OverflowContainerHookProps) => {\n const [container, setContainer] = useState<HTMLDivElement | null>(null);\n const wrappedItemsRef = useRef<OverflowItem[]>(NO_WRAPPED_ITEMS);\n // Drag drop needs a ref to container\n const containerRef = useRef<HTMLDivElement | null>(null);\n\n const setOverflowTabIndex = useCallback((tabIndex: \"0\" | \"-1\") => {\n if (containerRef.current) {\n containerRef.current\n .querySelector(\".vuuOverflowContainer-OverflowIndicator button\")\n ?.setAttribute(\"tabindex\", tabIndex);\n }\n }, []);\n\n const handleResize = useCallback(async () => {\n if (container) {\n let [nonWrapped, wrapped] = getNonWrappedAndWrappedItems(\n container,\n orientation,\n );\n applyOverflowClassToWrappedItems(\n container,\n wrapped,\n \"vuuOverflowContainer-wrapContainer\",\n );\n if (overflowIndicatorHasWrappedButShouldNotHave(wrapped)) {\n wrapped = await correctForWrappedOverflowIndicator(\n container,\n wrapped,\n orientation,\n );\n }\n while (\n highPriorityItemsHaveWrappedButShouldNotHave(nonWrapped, wrapped)\n ) {\n [nonWrapped, wrapped] = await correctForWrappedHighPriorityItems(\n container,\n nonWrapped,\n wrapped,\n orientation,\n );\n }\n if (wrapped.length === 1) {\n if (removeOverflowIndicatorIfNoLongerNeeded(container, orientation)) {\n wrapped = NO_WRAPPED_ITEMS;\n }\n }\n\n if (wrappedItemsRef.current.length === 0 && wrapped.length > 0) {\n setOverflowTabIndex(\"0\");\n } else if (wrappedItemsRef.current.length > 0 && wrapped.length === 0) {\n setOverflowTabIndex(\"-1\");\n }\n\n wrappedItemsRef.current = wrapped;\n }\n }, [container, orientation, setOverflowTabIndex]);\n\n const hasOverflowItem = (\n opt: unknown,\n ): opt is {\n overflowItem: OverflowItem;\n } => typeof opt === \"object\" && opt !== null && \"overflowItem\" in opt;\n\n const [menuBuilder, menuActionHandler] = useMemo((): [\n MenuBuilder,\n MenuActionHandler,\n ] => {\n return [\n () => {\n const { current: menuItems } = wrappedItemsRef;\n return menuItems.map((item: OverflowItem) => {\n return {\n label: item.label,\n id: `activate-item-${item.index}`,\n options: { overflowItem: item },\n };\n });\n },\n // The menu items are our overflowed items, selecting one by default\n // brings it back onto the toolbar - TODO is this right ?\n (menuItemId, options) => {\n if (container && hasOverflowItem(options)) {\n // TODO do we always want to switch it into view - leave that to caller\n const [, wrappedItems] = switchWrappedItemIntoView(\n container,\n options.overflowItem,\n orientation,\n );\n wrappedItemsRef.current = wrappedItems;\n onSwitchWrappedItemIntoView?.(options.overflowItem);\n }\n return true;\n },\n ];\n }, [container, onSwitchWrappedItemIntoView, orientation]);\n\n const resizeObserver = useMemo(() => {\n const { sizeProp } = MEASURES[orientation];\n let currentSize = 0;\n return new ResizeObserver((entries: ResizeObserverEntry[]) => {\n for (const entry of entries) {\n const { [sizeProp]: actualSize } = entry.contentRect;\n // This is important. Sometimes tiny sub-pixel differeces\n // can be reported, which break the layout assumptions\n const size = Math.round(actualSize as number);\n if (isValidNumber(size) && currentSize !== size) {\n currentSize = size;\n handleResize();\n }\n }\n });\n }, [handleResize, orientation]);\n\n useLayoutEffectSkipFirst(() => {\n handleResize();\n }, [handleResize, itemCount]);\n\n useMemo(() => {\n if (container) {\n resizeObserver.observe(container);\n }\n }, [container, resizeObserver]);\n\n const callbackRef = useCallback((el: HTMLDivElement | null) => {\n setContainer((containerRef.current = el));\n }, []);\n\n const handleDrop = useCallback(\n ({ fromIndex, toIndex }: DropOptions) => {\n onMoveItem?.(fromIndex, toIndex);\n },\n [onMoveItem],\n );\n\n const { onMouseDown: dragDropHookHandleMouseDown, ...dragDropHook } =\n useDragDrop({\n allowDragDrop,\n containerRef,\n // this is for useDragDropNext\n draggableClassName: `vuuOverflowContainer`,\n // extendedDropZone: overflowedItems.length > 0,\n onDrop: handleDrop,\n orientation: \"horizontal\",\n itemQuery: \".vuuOverflowContainer-item\",\n });\n\n return {\n menuActionHandler,\n menuBuilder,\n onItemMouseDown: dragDropHookHandleMouseDown,\n rootRef: callbackRef,\n ...dragDropHook,\n };\n};\n"],"names":[],"mappings":"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"}
@@ -1,4 +0,0 @@
1
- var priceTickerCss = "@property --price-ticker-color {\n syntax: '<color>'; /* <- defined as type number for the transition to work */\n initial-value: #15171B;\n inherits: false;\n}\n \n.vuuPriceTicker {\n align-items: center;\n display: flex;\n font-size: var(--vuuPriceTicker-fontSize, var(--salt-text-fontSize));\n font-weight: var(--vuuPriceTicker-fontWeight, 700);\n transition-property: color;\n transition-duration: .3s;;\n}\n\n.vuuPriceTicker.up1 {\n --vuu-icon-color: var(--vuu-color-green-50);\n color: var(--vuu-color-green-50);\n animation-duration: 30s;\n }\n \n .vuuPriceTicker.up2 {\n --vuu-icon-color: var(--vuu-color-green-50);\n color: var(--vuu-color-green-50);\n animation-duration: 30s;\n }\n \n .vuuPriceTicker.down1 {\n --vuu-icon-transform: rotate(180deg);\n --vuu-icon-color: var(--vuu-color-red-50);\n color: var(--vuu-color-red-50);\n animation-duration: 30s;\n }\n \n .vuuPriceTicker.down2 {\n --vuu-icon-transform: rotate(180deg);\n --vuu-icon-color: var(--vuu-color-red-50);\n color: var(--vuu-color-red-50);\n animation-duration: 30s;\n }\n ";
2
-
3
- export { priceTickerCss as default };
4
- //# sourceMappingURL=PriceTicker.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"PriceTicker.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,48 +0,0 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { isValidNumber, getMovingValueDirection, numericFormatter } from '@vuu-ui/vuu-utils';
3
- import { memo, useRef, useMemo } from 'react';
4
- import cx from 'clsx';
5
- import { useComponentCssInjection } from '@salt-ds/styles';
6
- import { useWindow } from '@salt-ds/window';
7
- import priceTickerCss from './PriceTicker.css.js';
8
-
9
- const classBase = "vuuPriceTicker";
10
- const getValueFormatter = (decimals) => numericFormatter({
11
- type: {
12
- name: "number",
13
- formatting: {
14
- decimals,
15
- zeroPad: true
16
- }
17
- }
18
- });
19
- const INITIAL_VALUE = [void 0, void 0];
20
- const PriceTicker = memo(
21
- ({
22
- className,
23
- decimals = 2,
24
- price,
25
- showArrow,
26
- ...htmlAttributes
27
- }) => {
28
- const targetWindow = useWindow();
29
- useComponentCssInjection({
30
- testId: "vuu-price-ticker",
31
- css: priceTickerCss,
32
- window: targetWindow
33
- });
34
- const ref = useRef(INITIAL_VALUE);
35
- const [prevValue, prevDirection] = ref.current;
36
- const formatNumber = useMemo(() => getValueFormatter(decimals), [decimals]);
37
- const direction = isValidNumber(prevValue) ? getMovingValueDirection(price, prevDirection, prevValue, decimals) : "";
38
- ref.current = [price, direction];
39
- return /* @__PURE__ */ jsxs("div", { ...htmlAttributes, className: cx(classBase, className, direction), children: [
40
- formatNumber(price),
41
- showArrow ? /* @__PURE__ */ jsx("span", { "data-icon": "price-arrow" }) : null
42
- ] });
43
- }
44
- );
45
- PriceTicker.displayName = "PriceTicker";
46
-
47
- export { PriceTicker };
48
- //# sourceMappingURL=PriceTicker.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"PriceTicker.js","sources":["../../../../packages/vuu-ui-controls/src/price-ticker/PriceTicker.tsx"],"sourcesContent":["import {\n getMovingValueDirection,\n isValidNumber,\n numericFormatter,\n valueChangeDirection,\n} from \"@vuu-ui/vuu-utils\";\nimport { HTMLAttributes, memo, useMemo, useRef } from \"react\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nconst classBase = \"vuuPriceTicker\";\n\nimport priceTickerCss from \"./PriceTicker.css\";\n\nconst getValueFormatter = (decimals: number) =>\n numericFormatter({\n type: {\n name: \"number\",\n formatting: {\n decimals,\n zeroPad: true,\n },\n },\n });\n\ntype State = [number | undefined, valueChangeDirection | undefined];\nconst INITIAL_VALUE: State = [undefined, undefined];\n\nexport interface PriceTickerProps extends HTMLAttributes<HTMLDivElement> {\n decimals?: number;\n price?: number;\n showArrow?: boolean;\n}\n\nexport const PriceTicker = memo(\n ({\n className,\n decimals = 2,\n price,\n showArrow,\n ...htmlAttributes\n }: PriceTickerProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-price-ticker\",\n css: priceTickerCss,\n window: targetWindow,\n });\n\n const ref = useRef<State>(INITIAL_VALUE);\n const [prevValue, prevDirection] = ref.current;\n const formatNumber = useMemo(() => getValueFormatter(decimals), [decimals]);\n\n const direction = isValidNumber(prevValue)\n ? getMovingValueDirection(price, prevDirection, prevValue, decimals)\n : \"\";\n\n ref.current = [price, direction];\n\n return (\n <div {...htmlAttributes} className={cx(classBase, className, direction)}>\n {formatNumber(price)}\n {showArrow ? <span data-icon=\"price-arrow\" /> : null}\n </div>\n );\n },\n);\nPriceTicker.displayName = \"PriceTicker\";\n"],"names":[],"mappings":";;;;;;;;AAWA,MAAM,SAAY,GAAA,gBAAA;AAIlB,MAAM,iBAAA,GAAoB,CAAC,QAAA,KACzB,gBAAiB,CAAA;AAAA,EACf,IAAM,EAAA;AAAA,IACJ,IAAM,EAAA,QAAA;AAAA,IACN,UAAY,EAAA;AAAA,MACV,QAAA;AAAA,MACA,OAAS,EAAA;AAAA;AACX;AAEJ,CAAC,CAAA;AAGH,MAAM,aAAA,GAAuB,CAAC,KAAA,CAAA,EAAW,KAAS,CAAA,CAAA;AAQ3C,MAAM,WAAc,GAAA,IAAA;AAAA,EACzB,CAAC;AAAA,IACC,SAAA;AAAA,IACA,QAAW,GAAA,CAAA;AAAA,IACX,KAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG;AAAA,GACmB,KAAA;AACtB,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAA,cAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,GAAA,GAAM,OAAc,aAAa,CAAA;AACvC,IAAA,MAAM,CAAC,SAAA,EAAW,aAAa,CAAA,GAAI,GAAI,CAAA,OAAA;AACvC,IAAM,MAAA,YAAA,GAAe,QAAQ,MAAM,iBAAA,CAAkB,QAAQ,CAAG,EAAA,CAAC,QAAQ,CAAC,CAAA;AAE1E,IAAM,MAAA,SAAA,GAAY,cAAc,SAAS,CAAA,GACrC,wBAAwB,KAAO,EAAA,aAAA,EAAe,SAAW,EAAA,QAAQ,CACjE,GAAA,EAAA;AAEJ,IAAI,GAAA,CAAA,OAAA,GAAU,CAAC,KAAA,EAAO,SAAS,CAAA;AAE/B,IACE,uBAAA,IAAA,CAAC,SAAK,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAA,EAAW,SAAW,EAAA,SAAS,CACnE,EAAA,QAAA,EAAA;AAAA,MAAA,YAAA,CAAa,KAAK,CAAA;AAAA,MAClB,SAAY,mBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAU,eAAc,CAAK,GAAA;AAAA,KAClD,EAAA,CAAA;AAAA;AAGN;AACA,WAAA,CAAY,WAAc,GAAA,aAAA;;;;"}
@@ -1,4 +0,0 @@
1
- var promptCss = ".vuuPrompt {\n min-height: var(--vuuPrompt-minHeight, 257px);\n min-width: var(--vuuPrompt-minWidth,380px);\n\n .saltDialogHeader {\n .vuuIcon {\n width: 24px;\n --vuu-icon-size: 20px;\n }\n }\n\n .saltDialogActions {\n align-items: center;\n }\n\n}\n\n.vuuPrompt.saltDialog-warning {\n --salt-status-warning-borderColor: var(--vuu-color-yellow-20); \n --variant-color: var(--vuu-color-yellow-20);\n\n border-radius: 4px !important;\n min-height: var(--vuuPrompt-minHeight, 150px);\n min-width: var(--vuuPrompt-minWidth, 280px);\n padding-top:0 !important;\n\n .saltDialogHeader {\n background-color: var(--variant-color);\n padding-left: var(--salt-spacing-100);\n padding-bottom: var(--salt-spacing-100);\n padding-right: var(--salt-spacing-100);\n\n .saltDialogHeader-header {\n align-items: end;\n display: flex;\n gap: var(--salt-spacing-100);\n }\n }\n\n .saltDialogContent {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n } \n}\n\n";
2
-
3
- export { promptCss as default };
4
- //# sourceMappingURL=Prompt.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Prompt.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}