@vuu-ui/vuu-ui-controls 0.13.2 → 0.13.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (301) hide show
  1. package/cjs/column-picker/ColumnPicker.js +2 -2
  2. package/cjs/column-picker/ColumnPicker.js.map +1 -1
  3. package/cjs/column-picker/ColumnSearch.js +4 -24
  4. package/cjs/column-picker/ColumnSearch.js.map +1 -1
  5. package/cjs/context-panel-provider/ContextPanelProvider.js +55 -0
  6. package/cjs/context-panel-provider/ContextPanelProvider.js.map +1 -0
  7. package/cjs/index.js +6 -80
  8. package/cjs/index.js.map +1 -1
  9. package/cjs/sortable-list/SortableList.js +38 -0
  10. package/cjs/sortable-list/SortableList.js.map +1 -0
  11. package/cjs/toolbar/Toolbar.js.map +1 -1
  12. package/cjs/toolbar/useSelection.js +0 -1
  13. package/cjs/toolbar/useSelection.js.map +1 -1
  14. package/esm/column-picker/ColumnPicker.js +2 -2
  15. package/esm/column-picker/ColumnPicker.js.map +1 -1
  16. package/esm/column-picker/ColumnSearch.js +5 -25
  17. package/esm/column-picker/ColumnSearch.js.map +1 -1
  18. package/esm/context-panel-provider/ContextPanelProvider.js +51 -0
  19. package/esm/context-panel-provider/ContextPanelProvider.js.map +1 -0
  20. package/esm/index.js +2 -21
  21. package/esm/index.js.map +1 -1
  22. package/esm/sortable-list/SortableList.js +35 -0
  23. package/esm/sortable-list/SortableList.js.map +1 -0
  24. package/esm/toolbar/Toolbar.js.map +1 -1
  25. package/esm/toolbar/useSelection.js +0 -1
  26. package/esm/toolbar/useSelection.js.map +1 -1
  27. package/package.json +15 -17
  28. package/cjs/common-hooks/collectionProvider.js +0 -24
  29. package/cjs/common-hooks/collectionProvider.js.map +0 -1
  30. package/cjs/common-hooks/isPlainObject.js +0 -6
  31. package/cjs/common-hooks/isPlainObject.js.map +0 -1
  32. package/cjs/common-hooks/itemToString.js +0 -24
  33. package/cjs/common-hooks/itemToString.js.map +0 -1
  34. package/cjs/common-hooks/useCollectionItems.js +0 -309
  35. package/cjs/common-hooks/useCollectionItems.js.map +0 -1
  36. package/cjs/common-hooks/useSelection.js +0 -212
  37. package/cjs/common-hooks/useSelection.js.map +0 -1
  38. package/cjs/list/Highlighter.css.js +0 -6
  39. package/cjs/list/Highlighter.css.js.map +0 -1
  40. package/cjs/list/Highlighter.js +0 -36
  41. package/cjs/list/Highlighter.js.map +0 -1
  42. package/cjs/list/List.css.js +0 -6
  43. package/cjs/list/List.css.js.map +0 -1
  44. package/cjs/list/List.js +0 -317
  45. package/cjs/list/List.js.map +0 -1
  46. package/cjs/list/ListItem.css.js +0 -6
  47. package/cjs/list/ListItem.css.js.map +0 -1
  48. package/cjs/list/ListItem.js +0 -84
  49. package/cjs/list/ListItem.js.map +0 -1
  50. package/cjs/list/ListItemGroup.js +0 -6
  51. package/cjs/list/ListItemGroup.js.map +0 -1
  52. package/cjs/list/ListItemHeader.js +0 -6
  53. package/cjs/list/ListItemHeader.js.map +0 -1
  54. package/cjs/list/RadioIcon.css.js +0 -6
  55. package/cjs/list/RadioIcon.css.js.map +0 -1
  56. package/cjs/list/RadioIcon.js +0 -27
  57. package/cjs/list/RadioIcon.js.map +0 -1
  58. package/cjs/list/common-hooks/keyUtils.js +0 -78
  59. package/cjs/list/common-hooks/keyUtils.js.map +0 -1
  60. package/cjs/list/common-hooks/list-dom-utils.js +0 -25
  61. package/cjs/list/common-hooks/list-dom-utils.js.map +0 -1
  62. package/cjs/list/common-hooks/useCollapsibleGroups.js +0 -72
  63. package/cjs/list/common-hooks/useCollapsibleGroups.js.map +0 -1
  64. package/cjs/list/common-hooks/useImperativeScrollingAPI.js +0 -52
  65. package/cjs/list/common-hooks/useImperativeScrollingAPI.js.map +0 -1
  66. package/cjs/list/common-hooks/useKeyboardNavigation.js +0 -289
  67. package/cjs/list/common-hooks/useKeyboardNavigation.js.map +0 -1
  68. package/cjs/list/common-hooks/useTypeahead.js +0 -74
  69. package/cjs/list/common-hooks/useTypeahead.js.map +0 -1
  70. package/cjs/list/common-hooks/useViewportTracking.js +0 -133
  71. package/cjs/list/common-hooks/useViewportTracking.js.map +0 -1
  72. package/cjs/list/common-hooks/utils/collection-item-utils.js +0 -182
  73. package/cjs/list/common-hooks/utils/collection-item-utils.js.map +0 -1
  74. package/cjs/list/common-hooks/utils/filter-utils.js +0 -11
  75. package/cjs/list/common-hooks/utils/filter-utils.js.map +0 -1
  76. package/cjs/list/common-hooks/utils/isSelected.js +0 -9
  77. package/cjs/list/common-hooks/utils/isSelected.js.map +0 -1
  78. package/cjs/list/useList.js +0 -278
  79. package/cjs/list/useList.js.map +0 -1
  80. package/cjs/list/useListDrop.js +0 -92
  81. package/cjs/list/useListDrop.js.map +0 -1
  82. package/cjs/list/useListHeight.js +0 -77
  83. package/cjs/list/useListHeight.js.map +0 -1
  84. package/cjs/list/useScrollPosition.js +0 -74
  85. package/cjs/list/useScrollPosition.js.map +0 -1
  86. package/esm/common-hooks/collectionProvider.js +0 -20
  87. package/esm/common-hooks/collectionProvider.js.map +0 -1
  88. package/esm/common-hooks/isPlainObject.js +0 -4
  89. package/esm/common-hooks/isPlainObject.js.map +0 -1
  90. package/esm/common-hooks/itemToString.js +0 -22
  91. package/esm/common-hooks/itemToString.js.map +0 -1
  92. package/esm/common-hooks/useCollectionItems.js +0 -307
  93. package/esm/common-hooks/useCollectionItems.js.map +0 -1
  94. package/esm/common-hooks/useSelection.js +0 -205
  95. package/esm/common-hooks/useSelection.js.map +0 -1
  96. package/esm/list/Highlighter.css.js +0 -4
  97. package/esm/list/Highlighter.css.js.map +0 -1
  98. package/esm/list/Highlighter.js +0 -34
  99. package/esm/list/Highlighter.js.map +0 -1
  100. package/esm/list/List.css.js +0 -4
  101. package/esm/list/List.css.js.map +0 -1
  102. package/esm/list/List.js +0 -315
  103. package/esm/list/List.js.map +0 -1
  104. package/esm/list/ListItem.css.js +0 -4
  105. package/esm/list/ListItem.css.js.map +0 -1
  106. package/esm/list/ListItem.js +0 -81
  107. package/esm/list/ListItem.js.map +0 -1
  108. package/esm/list/ListItemGroup.js +0 -4
  109. package/esm/list/ListItemGroup.js.map +0 -1
  110. package/esm/list/ListItemHeader.js +0 -4
  111. package/esm/list/ListItemHeader.js.map +0 -1
  112. package/esm/list/RadioIcon.css.js +0 -4
  113. package/esm/list/RadioIcon.css.js.map +0 -1
  114. package/esm/list/RadioIcon.js +0 -25
  115. package/esm/list/RadioIcon.js.map +0 -1
  116. package/esm/list/common-hooks/keyUtils.js +0 -64
  117. package/esm/list/common-hooks/keyUtils.js.map +0 -1
  118. package/esm/list/common-hooks/list-dom-utils.js +0 -19
  119. package/esm/list/common-hooks/list-dom-utils.js.map +0 -1
  120. package/esm/list/common-hooks/useCollapsibleGroups.js +0 -70
  121. package/esm/list/common-hooks/useCollapsibleGroups.js.map +0 -1
  122. package/esm/list/common-hooks/useImperativeScrollingAPI.js +0 -50
  123. package/esm/list/common-hooks/useImperativeScrollingAPI.js.map +0 -1
  124. package/esm/list/common-hooks/useKeyboardNavigation.js +0 -286
  125. package/esm/list/common-hooks/useKeyboardNavigation.js.map +0 -1
  126. package/esm/list/common-hooks/useTypeahead.js +0 -72
  127. package/esm/list/common-hooks/useTypeahead.js.map +0 -1
  128. package/esm/list/common-hooks/useViewportTracking.js +0 -131
  129. package/esm/list/common-hooks/useViewportTracking.js.map +0 -1
  130. package/esm/list/common-hooks/utils/collection-item-utils.js +0 -168
  131. package/esm/list/common-hooks/utils/collection-item-utils.js.map +0 -1
  132. package/esm/list/common-hooks/utils/filter-utils.js +0 -8
  133. package/esm/list/common-hooks/utils/filter-utils.js.map +0 -1
  134. package/esm/list/common-hooks/utils/isSelected.js +0 -7
  135. package/esm/list/common-hooks/utils/isSelected.js.map +0 -1
  136. package/esm/list/useList.js +0 -276
  137. package/esm/list/useList.js.map +0 -1
  138. package/esm/list/useListDrop.js +0 -90
  139. package/esm/list/useListDrop.js.map +0 -1
  140. package/esm/list/useListHeight.js +0 -75
  141. package/esm/list/useListHeight.js.map +0 -1
  142. package/esm/list/useScrollPosition.js +0 -72
  143. package/esm/list/useScrollPosition.js.map +0 -1
  144. package/types/calendar/Calendar.d.ts +0 -13
  145. package/types/calendar/index.d.ts +0 -4
  146. package/types/calendar/internal/CalendarCarousel.d.ts +0 -3
  147. package/types/calendar/internal/CalendarContext.d.ts +0 -8
  148. package/types/calendar/internal/CalendarDay.d.ts +0 -14
  149. package/types/calendar/internal/CalendarMonth.d.ts +0 -10
  150. package/types/calendar/internal/CalendarNavigation.d.ts +0 -16
  151. package/types/calendar/internal/CalendarWeekHeader.d.ts +0 -3
  152. package/types/calendar/internal/useFocusManagement.d.ts +0 -9
  153. package/types/calendar/internal/utils.d.ts +0 -15
  154. package/types/calendar/useCalendar.d.ts +0 -54
  155. package/types/calendar/useCalendarDay.d.ts +0 -22
  156. package/types/calendar/useSelection.d.ts +0 -78
  157. package/types/column-picker/ColumnPicker.d.ts +0 -7
  158. package/types/column-picker/ColumnSearch.d.ts +0 -6
  159. package/types/column-picker/index.d.ts +0 -2
  160. package/types/column-picker/moving-window.d.ts +0 -14
  161. package/types/common-hooks/collectionProvider.d.ts +0 -13
  162. package/types/common-hooks/collectionTypes.d.ts +0 -58
  163. package/types/common-hooks/index.d.ts +0 -8
  164. package/types/common-hooks/isPlainObject.d.ts +0 -1
  165. package/types/common-hooks/itemToString.d.ts +0 -2
  166. package/types/common-hooks/navigationTypes.d.ts +0 -36
  167. package/types/common-hooks/selectionTypes.d.ts +0 -70
  168. package/types/common-hooks/use-resize-observer.d.ts +0 -16
  169. package/types/common-hooks/useCollectionItems.d.ts +0 -2
  170. package/types/common-hooks/useControlled.d.ts +0 -24
  171. package/types/common-hooks/useSelection.d.ts +0 -8
  172. package/types/cycle-state-button/CycleStateButton.d.ts +0 -11
  173. package/types/cycle-state-button/index.d.ts +0 -1
  174. package/types/date-input/DateInput.d.ts +0 -60
  175. package/types/date-input/index.d.ts +0 -1
  176. package/types/date-picker/DatePicker.d.ts +0 -66
  177. package/types/date-picker/DatePickerContext.d.ts +0 -19
  178. package/types/date-picker/DatePickerPanel.d.ts +0 -10
  179. package/types/date-picker/index.d.ts +0 -1
  180. package/types/drag-drop/DragDropProvider.d.ts +0 -38
  181. package/types/drag-drop/DragDropState.d.ts +0 -15
  182. package/types/drag-drop/Draggable.d.ts +0 -13
  183. package/types/drag-drop/DropIndicator.d.ts +0 -5
  184. package/types/drag-drop/dragDropTypes.d.ts +0 -100
  185. package/types/drag-drop/drop-target-utils.d.ts +0 -82
  186. package/types/drag-drop/index.d.ts +0 -6
  187. package/types/drag-drop/useAutoScroll.d.ts +0 -11
  188. package/types/drag-drop/useDragDisplacers.d.ts +0 -17
  189. package/types/drag-drop/useDragDrop.d.ts +0 -2
  190. package/types/drag-drop/useDragDropCopy.d.ts +0 -6
  191. package/types/drag-drop/useDragDropIndicator.d.ts +0 -2
  192. package/types/drag-drop/useDragDropNaturalMovement.d.ts +0 -2
  193. package/types/drag-drop/useDropIndicator.d.ts +0 -8
  194. package/types/drag-drop/useGlobalDragDrop.d.ts +0 -11
  195. package/types/drag-drop/useTransition.d.ts +0 -3
  196. package/types/editable/index.d.ts +0 -1
  197. package/types/editable/useEditableText.d.ts +0 -19
  198. package/types/editable-label/EditableLabel.d.ts +0 -19
  199. package/types/editable-label/index.d.ts +0 -1
  200. package/types/expando-input/ExpandoInput.d.ts +0 -6
  201. package/types/expando-input/index.d.ts +0 -1
  202. package/types/icon-button/Icon.d.ts +0 -6
  203. package/types/icon-button/IconButton.d.ts +0 -6
  204. package/types/icon-button/ToggleIconButton.d.ts +0 -5
  205. package/types/icon-button/index.d.ts +0 -3
  206. package/types/index.d.ts +0 -27
  207. package/types/instrument-picker/SearchCell.d.ts +0 -2
  208. package/types/instrument-picker/TablePicker.d.ts +0 -10
  209. package/types/instrument-picker/index.d.ts +0 -1
  210. package/types/instrument-picker/moving-window.d.ts +0 -14
  211. package/types/instrument-picker/useDataSource.d.ts +0 -6
  212. package/types/instrument-picker/useTablePicker.d.ts +0 -47
  213. package/types/list/ChevronIcon.d.ts +0 -7
  214. package/types/list/Highlighter.d.ts +0 -6
  215. package/types/list/List.d.ts +0 -6
  216. package/types/list/ListItem.d.ts +0 -6
  217. package/types/list/ListItemGroup.d.ts +0 -6
  218. package/types/list/ListItemHeader.d.ts +0 -5
  219. package/types/list/RadioIcon.d.ts +0 -4
  220. package/types/list/common-hooks/index.d.ts +0 -10
  221. package/types/list/common-hooks/keyUtils.d.ts +0 -14
  222. package/types/list/common-hooks/list-dom-utils.d.ts +0 -5
  223. package/types/list/common-hooks/useCollapsibleGroups.d.ts +0 -14
  224. package/types/list/common-hooks/useImperativeScrollingAPI.d.ts +0 -14
  225. package/types/list/common-hooks/useKeyboardNavigation.d.ts +0 -3
  226. package/types/list/common-hooks/useTypeahead.d.ts +0 -14
  227. package/types/list/common-hooks/useViewportTracking.d.ts +0 -14
  228. package/types/list/common-hooks/utils/collection-item-utils.d.ts +0 -21
  229. package/types/list/common-hooks/utils/filter-utils.d.ts +0 -4
  230. package/types/list/common-hooks/utils/index.d.ts +0 -4
  231. package/types/list/common-hooks/utils/isSelected.d.ts +0 -2
  232. package/types/list/index.d.ts +0 -9
  233. package/types/list/keyset.d.ts +0 -9
  234. package/types/list/listTypes.d.ts +0 -200
  235. package/types/list/useList.d.ts +0 -3
  236. package/types/list/useListDrop.d.ts +0 -15
  237. package/types/list/useListHeight.d.ts +0 -19
  238. package/types/list/useScrollPosition.d.ts +0 -19
  239. package/types/measured-container/MeasuredContainer.d.ts +0 -14
  240. package/types/measured-container/index.d.ts +0 -2
  241. package/types/measured-container/useMeasuredContainer.d.ts +0 -23
  242. package/types/measured-container/useResizeObserver.d.ts +0 -15
  243. package/types/overflow-container/OverflowContainer.d.ts +0 -15
  244. package/types/overflow-container/index.d.ts +0 -2
  245. package/types/overflow-container/overflow-utils.d.ts +0 -48
  246. package/types/overflow-container/useOverflowContainer.d.ts +0 -19
  247. package/types/price-ticker/PriceTicker.d.ts +0 -7
  248. package/types/price-ticker/index.d.ts +0 -1
  249. package/types/split-button/SplitButton.d.ts +0 -11
  250. package/types/split-button/SplitStateButton.d.ts +0 -5
  251. package/types/split-button/index.d.ts +0 -2
  252. package/types/split-button/useSplitButton.d.ts +0 -311
  253. package/types/table-search/SearchCell.d.ts +0 -2
  254. package/types/table-search/TableSearch.d.ts +0 -9
  255. package/types/table-search/index.d.ts +0 -1
  256. package/types/table-search/moving-window.d.ts +0 -14
  257. package/types/table-search/useTableSearch.d.ts +0 -15
  258. package/types/tabs-next/TabBar.d.ts +0 -12
  259. package/types/tabs-next/TabListNext.d.ts +0 -12
  260. package/types/tabs-next/TabNext.d.ts +0 -12
  261. package/types/tabs-next/TabNextAction.d.ts +0 -5
  262. package/types/tabs-next/TabNextContext.d.ts +0 -12
  263. package/types/tabs-next/TabNextPanel.d.ts +0 -8
  264. package/types/tabs-next/TabNextTrigger.d.ts +0 -5
  265. package/types/tabs-next/TabOverflowList.d.ts +0 -11
  266. package/types/tabs-next/TabsNext.d.ts +0 -17
  267. package/types/tabs-next/TabsNextContext.d.ts +0 -21
  268. package/types/tabs-next/hooks/useCollection.d.ts +0 -18
  269. package/types/tabs-next/hooks/useFocusOutside.d.ts +0 -2
  270. package/types/tabs-next/hooks/useOverflow.d.ts +0 -11
  271. package/types/tabs-next/index.d.ts +0 -7
  272. package/types/tabstrip/Tab.d.ts +0 -27
  273. package/types/tabstrip/TabMenu.d.ts +0 -23
  274. package/types/tabstrip/TabMenuOptions.d.ts +0 -10
  275. package/types/tabstrip/TabsTypes.d.ts +0 -127
  276. package/types/tabstrip/Tabstrip.d.ts +0 -2
  277. package/types/tabstrip/index.d.ts +0 -5
  278. package/types/tabstrip/tabstrip-dom-utils.d.ts +0 -2
  279. package/types/tabstrip/useAnimatedSelectionThumb.d.ts +0 -7
  280. package/types/tabstrip/useKeyboardNavigation.d.ts +0 -29
  281. package/types/tabstrip/useSelection.d.ts +0 -13
  282. package/types/tabstrip/useTabstrip.d.ts +0 -55
  283. package/types/toolbar/Toolbar.d.ts +0 -19
  284. package/types/toolbar/index.d.ts +0 -1
  285. package/types/toolbar/toolbar-dom-utils.d.ts +0 -3
  286. package/types/toolbar/useKeyboardNavigation.d.ts +0 -32
  287. package/types/toolbar/useSelection.d.ts +0 -22
  288. package/types/toolbar/useToolbar.d.ts +0 -28
  289. package/types/utils/deprecated-types.d.ts +0 -2
  290. package/types/utils/escapeRegExp.d.ts +0 -1
  291. package/types/utils/forwardCallbackProps.d.ts +0 -3
  292. package/types/utils/index.d.ts +0 -5
  293. package/types/utils/isOverflowElement.d.ts +0 -1
  294. package/types/utils/isPlainObject.d.ts +0 -1
  295. package/types/vuu-date-picker/VuuDatePicker.d.ts +0 -7
  296. package/types/vuu-date-picker/index.d.ts +0 -1
  297. package/types/vuu-input/VuuInput.d.ts +0 -17
  298. package/types/vuu-input/index.d.ts +0 -1
  299. package/types/vuu-typeahead-input/VuuTypeaheadInput.d.ts +0 -29
  300. package/types/vuu-typeahead-input/index.d.ts +0 -1
  301. package/types/vuu-typeahead-input/useVuuTypeaheadInput.d.ts +0 -15
package/esm/list/List.js DELETED
@@ -1,315 +0,0 @@
1
- import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
2
- import { forwardRef, useRef, useState, useCallback, createElement, isValidElement, cloneElement } from 'react';
3
- import { useId } from '@vuu-ui/vuu-utils';
4
- import { useForkRef } from '@salt-ds/core';
5
- import { useComponentCssInjection } from '@salt-ds/styles';
6
- import { useWindow } from '@salt-ds/window';
7
- import cx from 'clsx';
8
- import '../common-hooks/collectionProvider.js';
9
- import { itemToString } from '../common-hooks/itemToString.js';
10
- import { useCollectionItems } from '../common-hooks/useCollectionItems.js';
11
- import '../common-hooks/use-resize-observer.js';
12
- import './common-hooks/keyUtils.js';
13
- import { useImperativeScrollingAPI } from './common-hooks/useImperativeScrollingAPI.js';
14
- import { LIST_FOCUS_VISIBLE } from './common-hooks/useKeyboardNavigation.js';
15
- import { isSelected } from './common-hooks/utils/isSelected.js';
16
- import { ListItemProxy, ListItem } from './ListItem.js';
17
- import { useList } from './useList.js';
18
- import { useListHeight } from './useListHeight.js';
19
- import { useScrollPosition } from './useScrollPosition.js';
20
- import { MeasuredContainer } from '../measured-container/MeasuredContainer.js';
21
- import '../measured-container/useResizeObserver.js';
22
- import listCss from './List.css.js';
23
-
24
- const classBase = "vuuList";
25
- const List = forwardRef(function List2({
26
- ListItem: ListItem$1 = ListItem,
27
- ListPlaceholder,
28
- allowDragDrop,
29
- children,
30
- className,
31
- collapsibleHeaders = false,
32
- defaultHighlightedIndex,
33
- defaultSelected,
34
- disabled: listDisabled = false,
35
- disableFocus = false,
36
- disableTypeToSelect,
37
- displayedItemCount = 10,
38
- emptyMessage,
39
- focusVisible: focusVisibleProp,
40
- getItemHeight: getItemHeightProp,
41
- getItemId,
42
- height,
43
- highlightedIndex: highlightedIndexProp,
44
- id: idProp,
45
- itemGapSize = 0,
46
- itemHeight: itemHeightProp,
47
- itemTextHighlightPattern,
48
- itemToString: itemToString$1 = itemToString,
49
- listHandlers: listHandlersProp,
50
- maxHeight,
51
- maxWidth,
52
- minHeight,
53
- minWidth,
54
- onClick: onClickProp,
55
- onDragStart,
56
- onDrop,
57
- onMoveListItem,
58
- onSelect,
59
- onSelectionChange,
60
- onHighlight,
61
- restoreLastFocus,
62
- selected: selectedProp,
63
- selectionStrategy,
64
- checkable = selectionStrategy === "multiple",
65
- scrollingApiRef,
66
- // TODO do we still need these ?
67
- selectionKeys,
68
- showEmptyMessage = false,
69
- source,
70
- style: styleProp,
71
- stickyHeaders,
72
- tabIndex = 0,
73
- tabToSelect,
74
- ...htmlAttributes
75
- }, forwardedRef) {
76
- const targetWindow = useWindow();
77
- useComponentCssInjection({
78
- testId: "vuu-list",
79
- css: listCss,
80
- window: targetWindow
81
- });
82
- const id = useId(idProp);
83
- const contentContainerRef = useRef(null);
84
- const [size, setSize] = useState();
85
- const handleResize = useCallback((size2) => {
86
- setSize(size2);
87
- }, []);
88
- const collectionHook = useCollectionItems({
89
- id,
90
- label: "List",
91
- source,
92
- children,
93
- options: {
94
- collapsibleHeaders,
95
- // Add Group ChildTypes to options
96
- getItemId,
97
- itemToString: itemToString$1
98
- }
99
- });
100
- const {
101
- listClientHeight,
102
- computedListHeight,
103
- listItemHeight,
104
- rowHeightProxyRef
105
- } = useListHeight({
106
- displayedItemCount,
107
- getItemHeight: getItemHeightProp,
108
- height,
109
- itemCount: collectionHook.data.length,
110
- itemGapSize,
111
- itemHeight: itemHeightProp,
112
- size
113
- });
114
- const { onVerticalScroll, viewportRange } = useScrollPosition({
115
- containerSize: (
116
- // TODO whats the right way to handle string values - ie percentages
117
- listClientHeight ?? computedListHeight ?? size?.height ?? 0
118
- ),
119
- itemCount: collectionHook.data.length,
120
- itemGapSize,
121
- itemSize: listItemHeight
122
- });
123
- const {
124
- containerRef,
125
- setContainerRef,
126
- draggable,
127
- draggedItemIndex,
128
- dropIndicator,
129
- focusVisible,
130
- highlightedIndex,
131
- listControlProps,
132
- listHandlers,
133
- listItemHeaderHandlers,
134
- scrollIntoView,
135
- selected
136
- } = useList({
137
- allowDragDrop,
138
- collapsibleHeaders,
139
- collectionHook,
140
- contentRef: contentContainerRef,
141
- defaultHighlightedIndex,
142
- defaultSelected: collectionHook.itemToCollectionItemId(defaultSelected),
143
- disabled: listDisabled,
144
- disableTypeToSelect,
145
- highlightedIndex: highlightedIndexProp,
146
- id,
147
- label: "List",
148
- listHandlers: listHandlersProp,
149
- // should this be in context ?
150
- onClick: onClickProp,
151
- onDragStart,
152
- onDrop,
153
- onMoveListItem,
154
- onSelect,
155
- onSelectionChange,
156
- onHighlight,
157
- restoreLastFocus,
158
- selected: collectionHook.itemToCollectionItemId(selectedProp),
159
- selectionStrategy,
160
- selectionKeys,
161
- stickyHeaders,
162
- tabToSelect,
163
- viewportRange
164
- });
165
- useImperativeScrollingAPI({
166
- collectionHook,
167
- forwardedRef: scrollingApiRef,
168
- // this should surely be scrollContainerRef
169
- scrollableRef: containerRef,
170
- scrollIntoView
171
- });
172
- const appliedFocusVisible = focusVisibleProp ?? focusVisible;
173
- const createHeader = function createHeader2(idx, headerId, title, expanded) {
174
- const header = /* @__PURE__ */ createElement(
175
- ListItem$1,
176
- {
177
- ...listItemHeaderHandlers,
178
- className: cx(`${classBase}Header`, {
179
- focusVisible: collapsibleHeaders && appliedFocusVisible === idx.value
180
- }),
181
- "aria-expanded": expanded,
182
- "data-index": collapsibleHeaders ? idx.value : void 0,
183
- "data-highlighted": idx.value === highlightedIndex || void 0,
184
- "data-sticky": stickyHeaders,
185
- "data-selectable": false,
186
- id: headerId,
187
- itemHeight: getItemHeight(idx.value),
188
- key: `header-${idx.value}`,
189
- label: title
190
- }
191
- );
192
- idx.value += 1;
193
- return header;
194
- };
195
- const getItemHeight = getItemHeightProp === void 0 ? () => itemHeightProp : getItemHeightProp;
196
- function renderCollectionItem(list, item, idx) {
197
- const { disabled, value, id: itemId, label } = item;
198
- const isChildItem = isValidElement(value);
199
- const listItemProps = {
200
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
201
- // @ts-ignore until we refactor this whole section
202
- className: cx(value?.props?.className, {
203
- vuuHighlighted: idx.value === highlightedIndex,
204
- vuuFocusVisible: appliedFocusVisible === idx.value,
205
- [`vuuDraggable-dragAway`]: draggedItemIndex === idx.value
206
- }),
207
- disabled: disabled || listDisabled,
208
- id: itemId,
209
- item: isChildItem ? void 0 : item?.value ?? void 0,
210
- itemHeight: getItemHeight(idx.value),
211
- itemTextHighlightPattern,
212
- key: itemId,
213
- "data-index": idx.value,
214
- label,
215
- role: "option",
216
- selected: isSelected(selected, item),
217
- showCheckbox: checkable
218
- };
219
- list.push(
220
- isChildItem ? cloneElement(value, listItemProps) : /* @__PURE__ */ jsx(ListItem$1, { ...listItemProps })
221
- );
222
- idx.value += 1;
223
- }
224
- const addGroup = function addGroup2(list, items, idx) {
225
- const { count = 0, id: id2, expanded, label = "" } = items[idx.value];
226
- const header = createHeader(idx, id2, label, expanded);
227
- const childItems = expanded !== false ? [header].concat(
228
- renderCollectionItems(items, idx, idx.value + count) || []
229
- ) : header;
230
- list.push(
231
- /* @__PURE__ */ jsx("div", { role: "group", children: childItems }, id2)
232
- );
233
- };
234
- const renderCollectionItems = (items, idx = { value: 0 }, end = items.length) => {
235
- const listItems = [];
236
- while (idx.value < end) {
237
- const item = items[idx.value];
238
- if (item.header) {
239
- listItems.push(
240
- createHeader(idx, item.id, item.label, item.expanded === false)
241
- );
242
- } else if (item.childNodes) {
243
- addGroup(listItems, items, idx);
244
- } else {
245
- renderCollectionItem(listItems, item, idx);
246
- }
247
- }
248
- return listItems;
249
- };
250
- const isEmpty = collectionHook.data.length === 0;
251
- const renderContent = () => {
252
- if (!isEmpty) {
253
- const itemsToRender = collectionHook.data;
254
- return renderCollectionItems(itemsToRender);
255
- }
256
- };
257
- const contentHeight = "auto";
258
- const sizeStyles = {
259
- "--list-borderWidth": "var(--vuuList-borderWidth, var(--salt-size-border, 0))",
260
- "--list-item-gap": itemGapSize ? `${itemGapSize}px` : void 0,
261
- "--computed-list-height": computedListHeight === void 0 ? void 0 : `${computedListHeight}px`,
262
- minWidth,
263
- minHeight,
264
- maxWidth,
265
- maxHeight
266
- };
267
- return /* @__PURE__ */ jsxs(
268
- MeasuredContainer,
269
- {
270
- "aria-multiselectable": selectionStrategy === "multiple" || selectionStrategy === "extended" || selectionStrategy === "extended-multi-range" || void 0,
271
- ...htmlAttributes,
272
- ...listHandlers,
273
- ...listControlProps,
274
- className: cx(classBase, className, "vuuScrollable", {
275
- [`${classBase}-collapsible`]: collapsibleHeaders,
276
- [`${classBase}-contentSized`]: computedListHeight !== void 0,
277
- [`${classBase}-empty`]: isEmpty,
278
- vuuFocusVisible: highlightedIndex === LIST_FOCUS_VISIBLE
279
- }),
280
- height: computedListHeight ?? height,
281
- id: `${id}`,
282
- onResize: handleResize,
283
- ref: useForkRef(setContainerRef, forwardedRef),
284
- role: "listbox",
285
- style: { ...styleProp, ...sizeStyles },
286
- tabIndex: listDisabled || disableFocus ? void 0 : tabIndex,
287
- children: [
288
- /* @__PURE__ */ jsx(
289
- ListItemProxy,
290
- {
291
- ref: rowHeightProxyRef,
292
- height: itemHeightProp
293
- },
294
- "canary"
295
- ),
296
- collectionHook.data.length === 0 && ListPlaceholder !== void 0 ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ListPlaceholder, {}) }) : /* @__PURE__ */ jsx("div", { className: `${classBase}-viewport`, onScroll: onVerticalScroll, children: /* @__PURE__ */ jsxs(
297
- "div",
298
- {
299
- className: `${classBase}-scrollingContentContainer`,
300
- ref: contentContainerRef,
301
- style: { height: contentHeight },
302
- children: [
303
- renderContent(),
304
- dropIndicator,
305
- draggable
306
- ]
307
- }
308
- ) })
309
- ]
310
- }
311
- );
312
- });
313
-
314
- export { List };
315
- //# sourceMappingURL=List.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"List.js","sources":["../../src/list/List.tsx"],"sourcesContent":["import { useId } from \"@vuu-ui/vuu-utils\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n cloneElement,\n ForwardedRef,\n forwardRef,\n isValidElement,\n ReactElement,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport {\n CollectionIndexer,\n CollectionItem,\n itemToString as defaultItemToString,\n SelectionStrategy,\n} from \"../common-hooks\";\nimport {\n isSelected,\n LIST_FOCUS_VISIBLE,\n useCollectionItems,\n useImperativeScrollingAPI,\n} from \"./common-hooks\";\n\nimport { ListItem as DefaultListItem, ListItemProxy } from \"./ListItem\";\nimport { ListItemProps, ListProps } from \"./listTypes\";\nimport { useList } from \"./useList\";\nimport { useListHeight } from \"./useListHeight\";\nimport { useScrollPosition } from \"./useScrollPosition\";\nimport { MeasuredContainer, MeasuredSize } from \"../measured-container\";\n\nimport listCss from \"./List.css\";\n\nconst defaultEmptyMessage = \"No data to display\";\n\nconst classBase = \"vuuList\";\n\nexport const List = forwardRef(function List<\n Item = string,\n S extends SelectionStrategy = \"default\",\n>(\n {\n ListItem = DefaultListItem,\n ListPlaceholder,\n allowDragDrop,\n children,\n className,\n collapsibleHeaders = false,\n defaultHighlightedIndex,\n defaultSelected,\n disabled: listDisabled = false,\n disableFocus = false,\n disableTypeToSelect,\n displayedItemCount = 10,\n emptyMessage,\n focusVisible: focusVisibleProp,\n getItemHeight: getItemHeightProp,\n getItemId,\n height,\n highlightedIndex: highlightedIndexProp,\n id: idProp,\n itemGapSize = 0,\n itemHeight: itemHeightProp,\n itemTextHighlightPattern,\n itemToString = defaultItemToString,\n listHandlers: listHandlersProp,\n maxHeight,\n maxWidth,\n minHeight,\n minWidth,\n onClick: onClickProp,\n onDragStart,\n onDrop,\n onMoveListItem,\n onSelect,\n onSelectionChange,\n onHighlight,\n restoreLastFocus,\n selected: selectedProp,\n selectionStrategy,\n checkable = selectionStrategy === \"multiple\",\n scrollingApiRef,\n // TODO do we still need these ?\n selectionKeys,\n showEmptyMessage = false,\n source,\n style: styleProp,\n stickyHeaders,\n tabIndex = 0,\n tabToSelect,\n ...htmlAttributes\n }: ListProps<Item, S>,\n forwardedRef?: ForwardedRef<HTMLDivElement>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-list\",\n css: listCss,\n window: targetWindow,\n });\n\n const id = useId(idProp);\n const contentContainerRef = useRef<HTMLDivElement>(null);\n const [size, setSize] = useState<MeasuredSize | undefined>();\n const handleResize = useCallback((size: MeasuredSize) => {\n setSize(size);\n }, []);\n\n const collectionHook = useCollectionItems<Item>({\n id,\n label: \"List\",\n source,\n children,\n options: {\n collapsibleHeaders,\n // Add Group ChildTypes to options\n getItemId,\n itemToString,\n },\n });\n\n const {\n listClientHeight,\n computedListHeight,\n listItemHeight,\n rowHeightProxyRef,\n } = useListHeight({\n displayedItemCount,\n getItemHeight: getItemHeightProp,\n height,\n itemCount: collectionHook.data.length,\n itemGapSize,\n itemHeight: itemHeightProp,\n size,\n });\n\n const { onVerticalScroll, viewportRange } = useScrollPosition({\n containerSize:\n // TODO whats the right way to handle string values - ie percentages\n listClientHeight ?? computedListHeight ?? size?.height ?? 0,\n itemCount: collectionHook.data.length,\n itemGapSize: itemGapSize,\n itemSize: listItemHeight,\n });\n\n const {\n containerRef,\n setContainerRef,\n draggable,\n draggedItemIndex,\n dropIndicator,\n focusVisible,\n highlightedIndex,\n listControlProps,\n listHandlers,\n listItemHeaderHandlers,\n scrollIntoView,\n selected,\n } = useList<Item, S>({\n allowDragDrop,\n collapsibleHeaders,\n collectionHook,\n contentRef: contentContainerRef,\n defaultHighlightedIndex,\n defaultSelected: collectionHook.itemToCollectionItemId(defaultSelected),\n disabled: listDisabled,\n disableTypeToSelect,\n highlightedIndex: highlightedIndexProp,\n id,\n label: \"List\",\n listHandlers: listHandlersProp, // should this be in context ?\n onClick: onClickProp,\n onDragStart,\n onDrop,\n onMoveListItem,\n onSelect,\n onSelectionChange,\n onHighlight,\n restoreLastFocus,\n selected: collectionHook.itemToCollectionItemId(selectedProp as any),\n selectionStrategy,\n selectionKeys,\n stickyHeaders,\n tabToSelect,\n viewportRange,\n });\n\n useImperativeScrollingAPI({\n collectionHook,\n forwardedRef: scrollingApiRef,\n // this should surely be scrollContainerRef\n scrollableRef: containerRef,\n scrollIntoView,\n });\n\n // focusVisible passes as a prop takes precedence\n const appliedFocusVisible = focusVisibleProp ?? focusVisible;\n\n const createHeader: (\n idx: { value: number },\n headerId: string,\n title: string,\n expanded?: boolean,\n ) => ReactElement = function createHeader(idx, headerId, title, expanded) {\n const header = (\n <ListItem\n {...listItemHeaderHandlers}\n className={cx(`${classBase}Header`, {\n focusVisible: collapsibleHeaders && appliedFocusVisible === idx.value,\n })}\n aria-expanded={expanded}\n data-index={collapsibleHeaders ? idx.value : undefined}\n data-highlighted={idx.value === highlightedIndex || undefined}\n data-sticky={stickyHeaders}\n data-selectable={false}\n id={headerId}\n itemHeight={getItemHeight(idx.value)}\n key={`header-${idx.value}`}\n label={title}\n // role=\"presentation\"\n />\n );\n idx.value += 1;\n return header;\n };\n\n const getItemHeight =\n getItemHeightProp === undefined ? () => itemHeightProp : getItemHeightProp;\n\n function renderCollectionItem(\n list: ReactElement[],\n item: CollectionItem<Item>,\n idx: { value: number },\n ) {\n // Note, a number of these props are specific to ListItem. What if user\n // implements a custom ListItem but neglects to handle all these props.\n // Is that on them ?\n const { disabled, value, id: itemId, label } = item;\n const isChildItem = isValidElement(value);\n const listItemProps: ListItemProps<Item> & {\n key: string;\n \"data-index\": number;\n } = {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore until we refactor this whole section\n className: cx(value?.props?.className, {\n vuuHighlighted: idx.value === highlightedIndex,\n vuuFocusVisible: appliedFocusVisible === idx.value,\n [`vuuDraggable-dragAway`]: draggedItemIndex === idx.value,\n }),\n disabled: disabled || listDisabled,\n id: itemId,\n item: isChildItem ? undefined : (item?.value ?? undefined),\n itemHeight: getItemHeight(idx.value),\n itemTextHighlightPattern,\n key: itemId,\n \"data-index\": idx.value,\n label,\n role: \"option\",\n selected: isSelected<Item>(selected, item),\n showCheckbox: checkable,\n };\n list.push(\n isChildItem ? (\n cloneElement(value, listItemProps)\n ) : (\n <ListItem {...listItemProps} />\n ),\n );\n\n idx.value += 1;\n }\n\n const addGroup: (\n list: ReactElement[],\n items: CollectionItem<Item>[],\n idx: { value: number },\n ) => void = function addGroup(\n list: ReactElement[],\n items: CollectionItem<Item>[],\n idx: { value: number },\n ) {\n const { count = 0, id, expanded, label = \"\" } = items[idx.value];\n const header = createHeader(idx, id, label, expanded);\n const childItems: ReactElement | ReactElement[] =\n expanded !== false\n ? [header].concat(\n renderCollectionItems(items, idx, idx.value + count) || [],\n )\n : header;\n\n list.push(\n <div key={id} role=\"group\">\n {childItems}\n </div>,\n );\n };\n\n const renderCollectionItems = (\n items: CollectionItem<Item>[],\n idx: CollectionIndexer = { value: 0 },\n end = items.length,\n ): ReactElement[] | undefined => {\n const listItems: ReactElement[] = [];\n while (idx.value < end) {\n const item = items[idx.value];\n if (item.header) {\n listItems.push(\n createHeader(idx, item.id, item.label!, item.expanded === false),\n );\n } else if (item.childNodes) {\n addGroup(listItems, items, idx);\n } else {\n renderCollectionItem(listItems, item, idx);\n }\n }\n return listItems;\n };\n\n function renderEmpty() {\n if (emptyMessage || showEmptyMessage) {\n return (\n <span className={`${classBase}-empty-message`}>\n {emptyMessage ?? defaultEmptyMessage}\n </span>\n );\n } else {\n return null;\n }\n }\n\n const isEmpty = collectionHook.data.length === 0;\n\n const renderContent = () => {\n if (!isEmpty) {\n // const itemsToRender =\n // typeof draggedItemIndex === \"number\" && draggedItemIndex >= 0\n // ? collectionHook.data.filter((d) => d.index !== draggedItemIndex)\n // : collectionHook.data;\n const itemsToRender = collectionHook.data;\n\n return renderCollectionItems(itemsToRender);\n } else {\n renderEmpty();\n }\n };\n const contentHeight = \"auto\";\n const sizeStyles = {\n \"--list-borderWidth\":\n \"var(--vuuList-borderWidth, var(--salt-size-border, 0))\",\n \"--list-item-gap\": itemGapSize ? `${itemGapSize}px` : undefined,\n \"--computed-list-height\":\n computedListHeight === undefined ? undefined : `${computedListHeight}px`,\n minWidth,\n minHeight,\n maxWidth,\n maxHeight,\n };\n return (\n <MeasuredContainer\n aria-multiselectable={\n selectionStrategy === \"multiple\" ||\n selectionStrategy === \"extended\" ||\n selectionStrategy === \"extended-multi-range\" ||\n undefined\n }\n {...htmlAttributes}\n {...listHandlers}\n {...listControlProps}\n className={cx(classBase, className, \"vuuScrollable\", {\n [`${classBase}-collapsible`]: collapsibleHeaders,\n [`${classBase}-contentSized`]: computedListHeight !== undefined,\n [`${classBase}-empty`]: isEmpty,\n vuuFocusVisible: highlightedIndex === LIST_FOCUS_VISIBLE,\n })}\n height={computedListHeight ?? height}\n id={`${id}`}\n onResize={handleResize}\n ref={useForkRef<HTMLDivElement>(setContainerRef, forwardedRef)}\n role=\"listbox\"\n style={{ ...styleProp, ...sizeStyles }}\n tabIndex={listDisabled || disableFocus ? undefined : tabIndex}\n >\n <ListItemProxy\n ref={rowHeightProxyRef}\n height={itemHeightProp}\n key=\"canary\"\n />\n {collectionHook.data.length === 0 && ListPlaceholder !== undefined ? (\n <>\n <ListPlaceholder />\n </>\n ) : (\n <div className={`${classBase}-viewport`} onScroll={onVerticalScroll}>\n <div\n className={`${classBase}-scrollingContentContainer`}\n ref={contentContainerRef}\n style={{ height: contentHeight }}\n >\n {renderContent()}\n {dropIndicator}\n {draggable}\n </div>\n </div>\n )}\n </MeasuredContainer>\n );\n}) as <Item = string, S extends SelectionStrategy = \"default\">(\n props: ListProps<Item, S> & {\n ref?: ForwardedRef<HTMLDivElement>;\n },\n) => ReactElement<ListProps<Item>>;\n"],"names":["List","ListItem","DefaultListItem","itemToString","defaultItemToString","size","createHeader","addGroup","id"],"mappings":"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"}
@@ -1,4 +0,0 @@
1
- var listItemCss = ".vuuListItem {\n /* Color */\n --list-item-text-color: var(--salt-content-primary-foreground);\n --list-item-background: var(--vuuList-item-background, var(--salt-selectable-background));\n /* --list-item-selected-focus-outlineColor: var(--salt-color-white); TODO: Check token with design */\n --list-item-text-color-active: var(--salt-selectable-foreground-selected);\n --list-item-background-active: var(--salt-selectable-background-selected);\n --list-item-alignItems: center;\n}\n\n.vuuListItem.vuuHighlighted {\n --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-hover);\n --list-item-background: var(--salt-selectable-background-hover);\n}\n\n.vuuListItemHeader {\n font-weight: var(--salt-text-fontWeight-strong); /* TODO: Check token with design */\n}\n\n.vuuListItemHeader[data-sticky] {\n position: sticky;\n top: 0;\n z-index: 1;\n}\n\n.vuuListItem {\n color: var(--list-item-text-color);\n cursor: var(--vuuList-item-cursor, pointer);\n background: var(--vuuList-item-background, var(--list-item-background));\n font-size: var(--salt-text-fontSize);\n text-align: var(--salt-text-textAlign);\n line-height: var(--salt-text-lineHeight);\n height: var(--vuuList-item-height, var(--list-item-height, auto));\n /* Replaced border-bottom with margin. In design spec, the height of the items should not include gap */\n margin-bottom: var(--list-item-gap);\n padding: 0 var(--vuuListItem-padding, var(--salt-size-unit));\n left: 0;\n right: 0;\n display: flex;\n position: relative;\n align-items: var(--list-item-alignItems);\n white-space: nowrap;\n}\n\n.vuuListItem:last-child {\n margin-bottom: 0px;\n}\n\n.vuuListItem-checkbox {\n --list-item-background-active: var(--salt-selectable-background);\n --list-item-text-color-active: var(--salt-content-primary-foreground);\n --list-item-text-padding: 0 0 0 var(--salt-size-unit);\n}\n\n.vuuListItem[aria-selected=\"true\"]:not(.vuuListItem-checkbox) {\n --list-item-background: var(--list-item-background-active);\n color: var(--list-item-text-color-active);\n}\n\n.vuuListItem.vuuDisabled {\n --list-item-text-color: var(--salt-content-primary-foreground-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.vuuListItem.vuuFocusVisible {\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-offset: -2px;\n outline-color: var(--salt-focused-outlineColor);\n}\n\n.vuuListItem.vuuFocusVisible:after {\n content: none;\n}\n\n.vuuListItem[aria-selected=\"true\"]:not(.vuuListItem-checkbox).vuuFocusVisible {\n outline-color: var(--list-item-selected-focus-outlineColor);\n}\n\n.vuuListItem-textWrapper {\n flex: 1;\n overflow: hidden;\n padding: var(--list-item-text-padding, 0px);\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.vuuListItem-proxy {\n position: absolute !important;\n visibility: hidden;\n}\n.vuuDraggable-list-item {\n --vuuList-item-height: 24px;\n background-color: white;\n}\n\n.vuuListItem.vuuDraggable-dragAway {\n display: none;\n}";
2
-
3
- export { listItemCss as default };
4
- //# sourceMappingURL=ListItem.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ListItem.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,81 +0,0 @@
1
- import { jsx, jsxs } from 'react/jsx-runtime';
2
- import { forwardRef } from 'react';
3
- import cx from 'clsx';
4
- import { Checkbox } from '@salt-ds/core';
5
- import { useComponentCssInjection } from '@salt-ds/styles';
6
- import { useWindow } from '@salt-ds/window';
7
- import { Highlighter } from './Highlighter.js';
8
- import listItemCss from './ListItem.css.js';
9
-
10
- const classBase = "vuuListItem";
11
- const ListItemProxy = forwardRef(function ListItemProxy2({
12
- height,
13
- ...htmlAttributes
14
- }, forwardedRef) {
15
- const targetWindow = useWindow();
16
- useComponentCssInjection({
17
- testId: "vuu-list-item",
18
- css: listItemCss,
19
- window: targetWindow
20
- });
21
- return /* @__PURE__ */ jsx(
22
- "div",
23
- {
24
- ...htmlAttributes,
25
- "aria-hidden": true,
26
- className: cx(classBase, `${classBase}-proxy`),
27
- ref: forwardedRef,
28
- style: { height }
29
- }
30
- );
31
- });
32
- const ListItem = forwardRef(
33
- function ListItem2({
34
- children,
35
- className: classNameProp,
36
- disabled,
37
- tabIndex,
38
- item,
39
- itemHeight,
40
- itemTextHighlightPattern,
41
- label,
42
- selectable: _notUsed,
43
- selected,
44
- showCheckbox,
45
- style: styleProp,
46
- ...props
47
- }, forwardedRef) {
48
- const className = cx(classBase, classNameProp, {
49
- vuuDisabled: disabled,
50
- [`${classBase}-checkbox`]: showCheckbox
51
- });
52
- const style = itemHeight !== void 0 ? {
53
- ...styleProp,
54
- height: itemHeight
55
- } : styleProp;
56
- return /* @__PURE__ */ jsxs(
57
- "div",
58
- {
59
- className,
60
- ...props,
61
- "aria-disabled": disabled || void 0,
62
- "aria-selected": selected || void 0,
63
- ref: forwardedRef,
64
- style,
65
- children: [
66
- showCheckbox && /* @__PURE__ */ jsx(Checkbox, { "aria-hidden": true, checked: selected }),
67
- children && typeof children !== "string" ? children : itemTextHighlightPattern == null ? /* @__PURE__ */ jsx("span", { className: `${classBase}-textWrapper`, children: label || children }) : /* @__PURE__ */ jsx(
68
- Highlighter,
69
- {
70
- matchPattern: itemTextHighlightPattern,
71
- text: label || children
72
- }
73
- )
74
- ]
75
- }
76
- );
77
- }
78
- );
79
-
80
- export { ListItem, ListItemProxy };
81
- //# sourceMappingURL=ListItem.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ListItem.js","sources":["../../src/list/ListItem.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, HTMLAttributes } from \"react\";\nimport cx from \"clsx\";\nimport { Checkbox } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ListItemProps, ListItemType } from \"./listTypes\";\nimport { Highlighter } from \"./Highlighter\";\n\nimport listItemCss from \"./ListItem.css\";\n\nconst classBase = \"vuuListItem\";\n\n// A dummy ListItem rendered once and not visible. We measure this to\n// determine height of ListItem and monitor it for size changes (in\n// case of runtime density switch). This allows ListItem height to\n// be controlled purely through CSS.\nexport const ListItemProxy = forwardRef(function ListItemProxy(\n {\n height,\n ...htmlAttributes\n }: HTMLAttributes<HTMLDivElement> & {\n height?: number;\n },\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-list-item\",\n css: listItemCss,\n window: targetWindow,\n });\n\n return (\n <div\n {...htmlAttributes}\n aria-hidden\n className={cx(classBase, `${classBase}-proxy`)}\n ref={forwardedRef}\n style={{ height }}\n />\n );\n});\n\n// Note: the memo is effective if List label is passed as simple string\n// If children are used, it is the responsibility of caller to memoise\n// these if performance on highlight is perceived to be an issue.\nexport const ListItem = forwardRef<HTMLDivElement, ListItemProps>(\n function ListItem(\n {\n children,\n className: classNameProp,\n disabled,\n tabIndex,\n item,\n itemHeight,\n itemTextHighlightPattern,\n label,\n selectable: _notUsed,\n selected,\n showCheckbox,\n style: styleProp,\n ...props\n },\n forwardedRef\n ) {\n const className = cx(classBase, classNameProp, {\n vuuDisabled: disabled,\n [`${classBase}-checkbox`]: showCheckbox,\n });\n const style =\n itemHeight !== undefined\n ? {\n ...styleProp,\n height: itemHeight,\n }\n : styleProp;\n\n return (\n <div\n className={className}\n {...props}\n aria-disabled={disabled || undefined}\n aria-selected={selected || undefined}\n ref={forwardedRef}\n style={style}\n >\n {showCheckbox && <Checkbox aria-hidden checked={selected} />}\n {children && typeof children !== \"string\" ? (\n children\n ) : itemTextHighlightPattern == null ? (\n <span className={`${classBase}-textWrapper`}>\n {label || children}\n </span>\n ) : (\n <Highlighter\n matchPattern={itemTextHighlightPattern}\n text={label || (children as string)}\n />\n )}\n </div>\n );\n }\n) as ListItemType;\n"],"names":["ListItemProxy","ListItem"],"mappings":";;;;;;;;;AAUA,MAAM,SAAY,GAAA,aAAA;AAML,MAAA,aAAA,GAAgB,UAAW,CAAA,SAASA,cAC/C,CAAA;AAAA,EACE,MAAA;AAAA,EACA,GAAG;AACL,CAAA,EAGA,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAA,WAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,aAAW,EAAA,IAAA;AAAA,MACX,SAAW,EAAA,EAAA,CAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAQ,MAAA,CAAA,CAAA;AAAA,MAC7C,GAAK,EAAA,YAAA;AAAA,MACL,KAAA,EAAO,EAAE,MAAO;AAAA;AAAA,GAClB;AAEJ,CAAC;AAKM,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASC,SACP,CAAA;AAAA,IACE,QAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,IACX,QAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,UAAA;AAAA,IACA,wBAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAY,EAAA,QAAA;AAAA,IACZ,QAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACP,GAAG;AAAA,KAEL,YACA,EAAA;AACA,IAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAe,EAAA;AAAA,MAC7C,WAAa,EAAA,QAAA;AAAA,MACb,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG;AAAA,KAC5B,CAAA;AACD,IAAM,MAAA,KAAA,GACJ,eAAe,KACX,CAAA,GAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACH,MAAQ,EAAA;AAAA,KAEV,GAAA,SAAA;AAEN,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA;AAAA,QACC,GAAG,KAAA;AAAA,QACJ,iBAAe,QAAY,IAAA,KAAA,CAAA;AAAA,QAC3B,iBAAe,QAAY,IAAA,KAAA,CAAA;AAAA,QAC3B,GAAK,EAAA,YAAA;AAAA,QACL,KAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,YAAA,oBAAiB,GAAA,CAAA,QAAA,EAAA,EAAS,aAAW,EAAA,IAAA,EAAC,SAAS,QAAU,EAAA,CAAA;AAAA,UACzD,QAAY,IAAA,OAAO,QAAa,KAAA,QAAA,GAC/B,WACE,wBAA4B,IAAA,IAAA,mBAC7B,GAAA,CAAA,MAAA,EAAA,EAAK,WAAW,CAAG,EAAA,SAAS,CAC1B,YAAA,CAAA,EAAA,QAAA,EAAA,KAAA,IAAS,UACZ,CAEA,mBAAA,GAAA;AAAA,YAAC,WAAA;AAAA,YAAA;AAAA,cACC,YAAc,EAAA,wBAAA;AAAA,cACd,MAAM,KAAU,IAAA;AAAA;AAAA;AAClB;AAAA;AAAA,KAEJ;AAAA;AAGN;;;;"}
@@ -1,4 +0,0 @@
1
- const ListItemGroup = (_) => null;
2
-
3
- export { ListItemGroup };
4
- //# sourceMappingURL=ListItemGroup.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ListItemGroup.js","sources":["../../src/list/ListItemGroup.ts"],"sourcesContent":["import { HTMLAttributes, ReactElement } from \"react\";\n\n// Purely used as markers, props will be extracted\nexport interface ListItemGroupProps extends HTMLAttributes<HTMLDivElement> {\n // children?: ListItemType | ListItemType[];\n children?: ReactElement | ReactElement[];\n label?: string;\n}\nexport const ListItemGroup = (_: ListItemGroupProps) => null;\n"],"names":[],"mappings":"AAQa,MAAA,aAAA,GAAgB,CAAC,CAA0B,KAAA;;;;"}
@@ -1,4 +0,0 @@
1
- const ListItemHeader = (_) => null;
2
-
3
- export { ListItemHeader };
4
- //# sourceMappingURL=ListItemHeader.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ListItemHeader.js","sources":["../../src/list/ListItemHeader.ts"],"sourcesContent":["import { HTMLAttributes } from \"react\";\n\n// Purely used as markers, props will be extracted\nexport interface ListItemHeaderProps extends HTMLAttributes<HTMLDivElement> {\n label?: string;\n}\nexport const ListItemHeader = (_: ListItemHeaderProps) => null;\n"],"names":[],"mappings":"AAMa,MAAA,cAAA,GAAiB,CAAC,CAA2B,KAAA;;;;"}
@@ -1,4 +0,0 @@
1
- var radioIconCss = ".vuuRadioIcon {\n --vuu-icon-size: 12px;\n --vuu-icon-left: -1px;\n --vuu-icon-top: -1px;\n --vuu-icon-svg: var(--vuu-svg-radio);\n border-style: solid;\n border-color: var(--vuuRadioIcon-borderColor, var(--salt-selectable-borderColor));\n border-radius: 50%;\n border-width: 1px;\n display: inline-block;\n height: var(--vuuRadioIcon-size, 12px);\n position: relative;\n width: var(--vuuRadioIcon-size, 12px);\n}\n\n.vuuRadioIcon-checked {\n background-image: var(--vuu-svg-radio);\n border: none;\n background-repeat: no-repeat;\n}\n\n.vuuRadioIcon-checked:after {\n content: \"\";\n left: var(--vuu-icon-left, auto);\n height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));\n -webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n mask-repeat: no-repeat;\n -webkit-mask-repeat: no-repeat;\n position: absolute;\n top: var(--vuu-icon-top, auto);\n width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));\n}\n";
2
-
3
- export { radioIconCss as default };
4
- //# sourceMappingURL=RadioIcon.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"RadioIcon.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,25 +0,0 @@
1
- import { jsx } from 'react/jsx-runtime';
2
- import cx from 'clsx';
3
- import { useComponentCssInjection } from '@salt-ds/styles';
4
- import { useWindow } from '@salt-ds/window';
5
- import radioIconCss from './RadioIcon.css.js';
6
-
7
- const classBase = "vuuRadioIcon";
8
- const RadioIcon = ({ checked = false, ...htmlAttributes }) => {
9
- const targetWindow = useWindow();
10
- useComponentCssInjection({
11
- testId: "vuu-radio-icon",
12
- css: radioIconCss,
13
- window: targetWindow
14
- });
15
- return /* @__PURE__ */ jsx(
16
- "span",
17
- {
18
- ...htmlAttributes,
19
- className: cx(classBase, { [`${classBase}-checked`]: checked })
20
- }
21
- );
22
- };
23
-
24
- export { RadioIcon };
25
- //# sourceMappingURL=RadioIcon.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"RadioIcon.js","sources":["../../src/list/RadioIcon.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport radioIconCss from \"./RadioIcon.css\";\n\nconst classBase = \"vuuRadioIcon\";\n\nexport const RadioIcon = ({ checked = false, ...htmlAttributes }) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-radio-icon\",\n css: radioIconCss,\n window: targetWindow,\n });\n\n return (\n <span\n {...htmlAttributes}\n className={cx(classBase, { [`${classBase}-checked`]: checked })}\n />\n );\n};\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,SAAY,GAAA,cAAA;AAEX,MAAM,YAAY,CAAC,EAAE,UAAU,KAAO,EAAA,GAAG,gBAAqB,KAAA;AACnE,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAA,YAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,EAAE,CAAC,GAAG,SAAS,CAAA,QAAA,CAAU,GAAG,OAAA,EAAS;AAAA;AAAA,GAChE;AAEJ;;;;"}
@@ -1,64 +0,0 @@
1
- function union(set1, ...sets) {
2
- const result = new Set(set1);
3
- for (const set of sets) {
4
- for (const element of set) {
5
- result.add(element);
6
- }
7
- }
8
- return result;
9
- }
10
- const ArrowUp = "ArrowUp";
11
- const ArrowDown = "ArrowDown";
12
- const ArrowLeft = "ArrowLeft";
13
- const ArrowRight = "ArrowRight";
14
- const Enter = "Enter";
15
- const Escape = "Escape";
16
- const Home = "Home";
17
- const End = "End";
18
- const PageUp = "PageUp";
19
- const PageDown = "PageDown";
20
- const Space = " ";
21
- const actionKeys = /* @__PURE__ */ new Set(["Enter", "Delete", " "]);
22
- const focusKeys = /* @__PURE__ */ new Set(["Tab"]);
23
- const arrowLeftRightKeys = /* @__PURE__ */ new Set(["ArrowRight", "ArrowLeft"]);
24
- const navigationKeys = /* @__PURE__ */ new Set([
25
- Home,
26
- End,
27
- PageUp,
28
- PageDown,
29
- ArrowDown,
30
- ArrowUp
31
- ]);
32
- const functionKeys = /* @__PURE__ */ new Set([
33
- "F1",
34
- "F2",
35
- "F3",
36
- "F4",
37
- "F5",
38
- "F6",
39
- "F7",
40
- "F8",
41
- "F9",
42
- "F10",
43
- "F11",
44
- "F12"
45
- ]);
46
- const specialKeys = union(
47
- actionKeys,
48
- navigationKeys,
49
- arrowLeftRightKeys,
50
- functionKeys,
51
- focusKeys
52
- );
53
- const isCharacterKey = (evt) => {
54
- if (specialKeys.has(evt.key)) {
55
- return false;
56
- }
57
- return evt.key.length === 1 && !evt.ctrlKey && !evt.metaKey && !evt.altKey;
58
- };
59
- const isNavigationKey = ({ key }) => {
60
- return navigationKeys.has(key);
61
- };
62
-
63
- export { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Enter, Escape, Home, PageDown, PageUp, Space, isCharacterKey, isNavigationKey };
64
- //# sourceMappingURL=keyUtils.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"keyUtils.js","sources":["../../../src/list/common-hooks/keyUtils.ts"],"sourcesContent":["import React from \"react\";\n\nfunction union<T>(set1: Set<T>, ...sets: Set<T>[]) {\n const result = new Set(set1);\n for (const set of sets) {\n for (const element of set) {\n result.add(element);\n }\n }\n return result;\n}\n\nexport const ArrowUp = \"ArrowUp\";\nexport const ArrowDown = \"ArrowDown\";\nexport const ArrowLeft = \"ArrowLeft\";\nexport const ArrowRight = \"ArrowRight\";\nexport const Enter = \"Enter\";\nexport const Escape = \"Escape\";\nexport const Home = \"Home\";\nexport const End = \"End\";\nexport const PageUp = \"PageUp\";\nexport const PageDown = \"PageDown\";\nexport const Space = \" \";\n\nconst actionKeys = new Set([\"Enter\", \"Delete\", \" \"]);\nconst focusKeys = new Set([\"Tab\"]);\nconst arrowLeftRightKeys = new Set([\"ArrowRight\", \"ArrowLeft\"]);\nconst navigationKeys = new Set([\n Home,\n End,\n PageUp,\n PageDown,\n ArrowDown,\n ArrowUp,\n]);\nconst functionKeys = new Set([\n \"F1\",\n \"F2\",\n \"F3\",\n \"F4\",\n \"F5\",\n \"F6\",\n \"F7\",\n \"F8\",\n \"F9\",\n \"F10\",\n \"F11\",\n \"F12\",\n]);\nconst specialKeys = union(\n actionKeys,\n navigationKeys,\n arrowLeftRightKeys,\n functionKeys,\n focusKeys\n);\nexport const isCharacterKey = (evt: React.KeyboardEvent): boolean => {\n if (specialKeys.has(evt.key)) {\n return false;\n }\n return evt.key.length === 1 && !evt.ctrlKey && !evt.metaKey && !evt.altKey;\n};\n\nexport const isNavigationKey = ({ key }: React.KeyboardEvent): boolean => {\n return navigationKeys.has(key);\n};\n"],"names":[],"mappings":"AAEA,SAAS,KAAA,CAAS,SAAiB,IAAgB,EAAA;AACjD,EAAM,MAAA,MAAA,GAAS,IAAI,GAAA,CAAI,IAAI,CAAA;AAC3B,EAAA,KAAA,MAAW,OAAO,IAAM,EAAA;AACtB,IAAA,KAAA,MAAW,WAAW,GAAK,EAAA;AACzB,MAAA,MAAA,CAAO,IAAI,OAAO,CAAA;AAAA;AACpB;AAEF,EAAO,OAAA,MAAA;AACT;AAEO,MAAM,OAAU,GAAA;AAChB,MAAM,SAAY,GAAA;AAClB,MAAM,SAAY,GAAA;AAClB,MAAM,UAAa,GAAA;AACnB,MAAM,KAAQ,GAAA;AACd,MAAM,MAAS,GAAA;AACf,MAAM,IAAO,GAAA;AACb,MAAM,GAAM,GAAA;AACZ,MAAM,MAAS,GAAA;AACf,MAAM,QAAW,GAAA;AACjB,MAAM,KAAQ,GAAA;AAErB,MAAM,6BAAiB,IAAA,GAAA,CAAI,CAAC,OAAS,EAAA,QAAA,EAAU,GAAG,CAAC,CAAA;AACnD,MAAM,SAAY,mBAAA,IAAI,GAAI,CAAA,CAAC,KAAK,CAAC,CAAA;AACjC,MAAM,qCAAyB,IAAA,GAAA,CAAI,CAAC,YAAA,EAAc,WAAW,CAAC,CAAA;AAC9D,MAAM,cAAA,uBAAqB,GAAI,CAAA;AAAA,EAC7B,IAAA;AAAA,EACA,GAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAC,CAAA;AACD,MAAM,YAAA,uBAAmB,GAAI,CAAA;AAAA,EAC3B,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAC,CAAA;AACD,MAAM,WAAc,GAAA,KAAA;AAAA,EAClB,UAAA;AAAA,EACA,cAAA;AAAA,EACA,kBAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAA;AACa,MAAA,cAAA,GAAiB,CAAC,GAAsC,KAAA;AACnE,EAAA,IAAI,WAAY,CAAA,GAAA,CAAI,GAAI,CAAA,GAAG,CAAG,EAAA;AAC5B,IAAO,OAAA,KAAA;AAAA;AAET,EAAO,OAAA,GAAA,CAAI,GAAI,CAAA,MAAA,KAAW,CAAK,IAAA,CAAC,GAAI,CAAA,OAAA,IAAW,CAAC,GAAA,CAAI,OAAW,IAAA,CAAC,GAAI,CAAA,MAAA;AACtE;AAEO,MAAM,eAAkB,GAAA,CAAC,EAAE,GAAA,EAAwC,KAAA;AACxE,EAAO,OAAA,cAAA,CAAe,IAAI,GAAG,CAAA;AAC/B;;;;"}
@@ -1,19 +0,0 @@
1
- const listItemElement = (listEl, listItemIdx) => listEl.querySelector(`:scope > [data-idx="${listItemIdx}"]`);
2
- function listItemIndex(listItemEl) {
3
- if (listItemEl) {
4
- let idx = listItemEl.dataset.index;
5
- if (idx) {
6
- return parseInt(idx, 10);
7
- } else if (idx = listItemEl.ariaPosInSet) {
8
- return parseInt(idx, 10) - 1;
9
- }
10
- }
11
- return -1;
12
- }
13
- const listItemId = (el) => el?.id;
14
- const closestListItem = (el) => el.closest("[data-index],[aria-posinset]");
15
- const closestListItemId = (el) => listItemId(closestListItem(el));
16
- const closestListItemIndex = (el) => listItemIndex(closestListItem(el));
17
-
18
- export { closestListItemId, closestListItemIndex, listItemElement, listItemId, listItemIndex };
19
- //# sourceMappingURL=list-dom-utils.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"list-dom-utils.js","sources":["../../../src/list/common-hooks/list-dom-utils.ts"],"sourcesContent":["export const listItemElement = (listEl: HTMLElement, listItemIdx: number) =>\n listEl.querySelector(`:scope > [data-idx=\"${listItemIdx}\"]`);\n\nexport function listItemIndex(listItemEl?: HTMLElement) {\n if (listItemEl) {\n let idx: string | null | undefined = listItemEl.dataset.index;\n if (idx) {\n return parseInt(idx, 10);\n // eslint-disable-next-line no-cond-assign\n } else if ((idx = listItemEl.ariaPosInSet)) {\n return parseInt(idx, 10) - 1;\n }\n }\n return -1;\n}\n\nexport const listItemId = (el: HTMLElement | null) => el?.id;\n\nconst closestListItem = (el: HTMLElement) =>\n el.closest(\"[data-index],[aria-posinset]\") as HTMLElement;\n\nexport const closestListItemId = (el: HTMLElement) =>\n listItemId(closestListItem(el));\n\nexport const closestListItemIndex = (el: HTMLElement) =>\n listItemIndex(closestListItem(el));\n"],"names":[],"mappings":"AAAa,MAAA,eAAA,GAAkB,CAAC,MAAqB,EAAA,WAAA,KACnD,OAAO,aAAc,CAAA,CAAA,oBAAA,EAAuB,WAAW,CAAI,EAAA,CAAA;AAEtD,SAAS,cAAc,UAA0B,EAAA;AACtD,EAAA,IAAI,UAAY,EAAA;AACd,IAAI,IAAA,GAAA,GAAiC,WAAW,OAAQ,CAAA,KAAA;AACxD,IAAA,IAAI,GAAK,EAAA;AACP,MAAO,OAAA,QAAA,CAAS,KAAK,EAAE,CAAA;AAAA,KAEzB,MAAA,IAAY,GAAM,GAAA,UAAA,CAAW,YAAe,EAAA;AAC1C,MAAO,OAAA,QAAA,CAAS,GAAK,EAAA,EAAE,CAAI,GAAA,CAAA;AAAA;AAC7B;AAEF,EAAO,OAAA,CAAA,CAAA;AACT;AAEa,MAAA,UAAA,GAAa,CAAC,EAAA,KAA2B,EAAI,EAAA;AAE1D,MAAM,eAAkB,GAAA,CAAC,EACvB,KAAA,EAAA,CAAG,QAAQ,8BAA8B,CAAA;AAEpC,MAAM,oBAAoB,CAAC,EAAA,KAChC,UAAW,CAAA,eAAA,CAAgB,EAAE,CAAC;AAEzB,MAAM,uBAAuB,CAAC,EAAA,KACnC,aAAc,CAAA,eAAA,CAAgB,EAAE,CAAC;;;;"}