@cube-dev/ui-kit 0.0.0-canary-8e09ade → 0.0.0-canary-261df01

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 (430) hide show
  1. package/dist/_internal/hooks/use-chained-callback.js +1 -1
  2. package/dist/_internal/hooks/use-debounced-value.js +1 -1
  3. package/dist/_internal/hooks/use-deprecation-warning.js +1 -1
  4. package/dist/_internal/hooks/use-event.js +1 -1
  5. package/dist/_internal/hooks/use-is-first-render.js +1 -1
  6. package/dist/_internal/hooks/use-sync-ref.js +1 -1
  7. package/dist/_internal/hooks/use-timer/timer.js +1 -1
  8. package/dist/_internal/hooks/use-timer/use-timer.js +1 -1
  9. package/dist/_internal/hooks/use-warn.js +1 -1
  10. package/dist/components/Block.js +1 -1
  11. package/dist/components/CollectionItem.js +1 -1
  12. package/dist/components/GlobalStyles.js +1 -1
  13. package/dist/components/GridProvider.js +1 -1
  14. package/dist/components/HiddenInput.js +1 -1
  15. package/dist/components/Root.js +1 -1
  16. package/dist/components/actions/Action/Action.js +1 -1
  17. package/dist/components/actions/Banner/Banner.js +1 -1
  18. package/dist/components/actions/Button/Button.js +1 -1
  19. package/dist/components/actions/ButtonGroup/ButtonGroup.js +1 -1
  20. package/dist/components/actions/ButtonSplit/ButtonSplit.js +1 -1
  21. package/dist/components/actions/ButtonSplit/context.js +1 -1
  22. package/dist/components/actions/CommandMenu/CommandMenu.js +1 -1
  23. package/dist/components/actions/CommandMenu/styled.js +1 -1
  24. package/dist/components/actions/ItemAction/ItemAction.js +1 -1
  25. package/dist/components/actions/ItemActionContext.js +1 -1
  26. package/dist/components/actions/ItemButton/ItemButton.js +1 -1
  27. package/dist/components/actions/Link/Link.js +1 -1
  28. package/dist/components/actions/Menu/Menu.js +1 -1
  29. package/dist/components/actions/Menu/MenuItem.js +1 -1
  30. package/dist/components/actions/Menu/MenuSection.js +1 -1
  31. package/dist/components/actions/Menu/MenuTrigger.js +1 -1
  32. package/dist/components/actions/Menu/SubMenuTrigger.js +1 -1
  33. package/dist/components/actions/Menu/SubmenuTriggerContext.js +1 -1
  34. package/dist/components/actions/Menu/context.js +1 -1
  35. package/dist/components/actions/Menu/styled.js +1 -1
  36. package/dist/components/actions/index.js +1 -1
  37. package/dist/components/actions/use-action.js +1 -1
  38. package/dist/components/actions/use-anchored-menu.js +1 -1
  39. package/dist/components/actions/use-context-menu.js +1 -1
  40. package/dist/components/content/ActiveZone/ActiveZone.js +1 -1
  41. package/dist/components/content/Alert/Alert.js +1 -1
  42. package/dist/components/content/Alert/use-alert.js +1 -1
  43. package/dist/components/content/Avatar/Avatar.js +1 -1
  44. package/dist/components/content/Badge/Badge.js +1 -1
  45. package/dist/components/content/Card/Card.js +1 -1
  46. package/dist/components/content/Content.js +1 -1
  47. package/dist/components/content/CopyPasteBlock/CopyPasteBlock.js +1 -1
  48. package/dist/components/content/CopySnippet/CopySnippet.js +1 -1
  49. package/dist/components/content/Disclosure/Disclosure.js +1 -1
  50. package/dist/components/content/Divider.js +1 -1
  51. package/dist/components/content/Footer.js +1 -1
  52. package/dist/components/content/Header.js +1 -1
  53. package/dist/components/content/HotKeys/HotKeys.js +1 -1
  54. package/dist/components/content/InlineInput/InlineInput.js +1 -1
  55. package/dist/components/content/Item/Item.js +11 -2
  56. package/dist/components/content/Item/Item.js.map +1 -1
  57. package/dist/components/content/ItemBadge/ItemBadge.js +1 -1
  58. package/dist/components/content/ItemCard/ItemCard.js +1 -1
  59. package/dist/components/content/Layout/GridLayout.js +1 -1
  60. package/dist/components/content/Layout/Layout.js +1 -1
  61. package/dist/components/content/Layout/LayoutBlock.js +1 -1
  62. package/dist/components/content/Layout/LayoutCenter.js +1 -1
  63. package/dist/components/content/Layout/LayoutContainer.js +1 -1
  64. package/dist/components/content/Layout/LayoutContent.js +1 -1
  65. package/dist/components/content/Layout/LayoutContext.js +1 -1
  66. package/dist/components/content/Layout/LayoutFlex.js +1 -1
  67. package/dist/components/content/Layout/LayoutFooter.js +1 -1
  68. package/dist/components/content/Layout/LayoutGrid.js +1 -1
  69. package/dist/components/content/Layout/LayoutHeader.js +1 -1
  70. package/dist/components/content/Layout/LayoutPane.js +1 -1
  71. package/dist/components/content/Layout/LayoutPanel.js +1 -1
  72. package/dist/components/content/Layout/LayoutPanelHeader.js +1 -1
  73. package/dist/components/content/Layout/LayoutToolbar.js +1 -1
  74. package/dist/components/content/Layout/hooks/useTinyScrollbar.js +1 -1
  75. package/dist/components/content/Layout/index.js +1 -1
  76. package/dist/components/content/Layout/utils.js +1 -1
  77. package/dist/components/content/Paragraph.js +1 -1
  78. package/dist/components/content/Placeholder/Placeholder.js +1 -1
  79. package/dist/components/content/PrismCode/PrismCode.js +1 -1
  80. package/dist/components/content/PrismCode/prismSetup.js +1 -1
  81. package/dist/components/content/PrismDiffCode/PrismDiffCode.js +1 -1
  82. package/dist/components/content/Result/Result.js +1 -1
  83. package/dist/components/content/Skeleton/Skeleton.js +1 -1
  84. package/dist/components/content/Tag/Tag.js +1 -1
  85. package/dist/components/content/Text.js +1 -1
  86. package/dist/components/content/TextItem/TextItem.js +1 -1
  87. package/dist/components/content/Title.js +1 -1
  88. package/dist/components/content/Tree/Tree.js +1 -1
  89. package/dist/components/content/Tree/TreeNode.js +1 -1
  90. package/dist/components/content/Tree/styled.js +1 -1
  91. package/dist/components/content/Tree/tree-index.js +1 -1
  92. package/dist/components/content/Tree/use-checkbox-tree.js +1 -1
  93. package/dist/components/content/Tree/use-load-data.js +1 -1
  94. package/dist/components/content/highlightText.js +1 -1
  95. package/dist/components/content/use-auto-tooltip.js +1 -1
  96. package/dist/components/fields/Checkbox/Checkbox.js +1 -1
  97. package/dist/components/fields/Checkbox/CheckboxGroup.js +1 -1
  98. package/dist/components/fields/Checkbox/context.js +1 -1
  99. package/dist/components/fields/ComboBox/ComboBox.js +1 -1
  100. package/dist/components/fields/CommandTextArea/CommandTextArea.d.ts +7 -2
  101. package/dist/components/fields/CommandTextArea/CommandTextArea.js +7 -2
  102. package/dist/components/fields/CommandTextArea/CommandTextArea.js.map +1 -1
  103. package/dist/components/fields/DatePicker/DateInput.js +1 -1
  104. package/dist/components/fields/DatePicker/DateInputBase.js +1 -1
  105. package/dist/components/fields/DatePicker/DatePicker.js +1 -1
  106. package/dist/components/fields/DatePicker/DatePickerButton.js +1 -1
  107. package/dist/components/fields/DatePicker/DatePickerElement.js +1 -1
  108. package/dist/components/fields/DatePicker/DatePickerInput.js +1 -1
  109. package/dist/components/fields/DatePicker/DatePickerSegment.js +1 -1
  110. package/dist/components/fields/DatePicker/DateRangePicker.js +1 -1
  111. package/dist/components/fields/DatePicker/DateRangeSeparatedPicker.js +1 -1
  112. package/dist/components/fields/DatePicker/TimeInput.js +1 -1
  113. package/dist/components/fields/DatePicker/intl.js +1 -1
  114. package/dist/components/fields/DatePicker/parseDate.js +1 -1
  115. package/dist/components/fields/DatePicker/props.js +1 -1
  116. package/dist/components/fields/DatePicker/utils.js +1 -1
  117. package/dist/components/fields/FileInput/FileInput.js +1 -1
  118. package/dist/components/fields/FilterListBox/FilterListBox.js +1 -1
  119. package/dist/components/fields/FilterPicker/FilterPicker.js +1 -1
  120. package/dist/components/fields/Input/Input.js +1 -1
  121. package/dist/components/fields/ListBox/DraggableListBox.js +1 -1
  122. package/dist/components/fields/ListBox/ListBox.d.ts +5 -0
  123. package/dist/components/fields/ListBox/ListBox.js +10 -4
  124. package/dist/components/fields/ListBox/ListBox.js.map +1 -1
  125. package/dist/components/fields/ListBoxPopover/ListBoxPopover.js +3 -2
  126. package/dist/components/fields/ListBoxPopover/ListBoxPopover.js.map +1 -1
  127. package/dist/components/fields/ListBoxPopover/listNavigation.js +25 -5
  128. package/dist/components/fields/ListBoxPopover/listNavigation.js.map +1 -1
  129. package/dist/components/fields/ListBoxPopover/useCompositeFocus.js +1 -1
  130. package/dist/components/fields/NumberInput/NumberInput.js +1 -1
  131. package/dist/components/fields/NumberInput/StepButton.js +1 -1
  132. package/dist/components/fields/PasswordInput/PasswordInput.js +1 -1
  133. package/dist/components/fields/Picker/Picker.js +1 -1
  134. package/dist/components/fields/RadioGroup/Radio.js +1 -1
  135. package/dist/components/fields/RadioGroup/RadioGroup.js +1 -1
  136. package/dist/components/fields/RadioGroup/context.js +1 -1
  137. package/dist/components/fields/SearchInput/SearchInput.js +1 -1
  138. package/dist/components/fields/Select/Select.js +1 -1
  139. package/dist/components/fields/Slider/Gradation.js +1 -1
  140. package/dist/components/fields/Slider/HueSlider.js +1 -1
  141. package/dist/components/fields/Slider/RangeSlider.js +1 -1
  142. package/dist/components/fields/Slider/Slider.js +1 -1
  143. package/dist/components/fields/Slider/SliderBase.js +1 -1
  144. package/dist/components/fields/Slider/SliderThumb.js +1 -1
  145. package/dist/components/fields/Slider/SliderTrack.js +1 -1
  146. package/dist/components/fields/Slider/elements.js +1 -1
  147. package/dist/components/fields/Slider/index.js +1 -1
  148. package/dist/components/fields/Switch/Switch.js +1 -1
  149. package/dist/components/fields/TextArea/TextArea.js +1 -1
  150. package/dist/components/fields/TextInput/TextInput.js +1 -1
  151. package/dist/components/fields/TextInput/TextInputBase.js +1 -1
  152. package/dist/components/fields/TextInputMapper/TextInputMapper.js +1 -1
  153. package/dist/components/form/FieldWrapper/FieldWrapper.js +1 -1
  154. package/dist/components/form/FieldWrapper/extract-field-wrapper-props.js +1 -1
  155. package/dist/components/form/Form/Field.js +1 -1
  156. package/dist/components/form/Form/Form.js +1 -1
  157. package/dist/components/form/Form/ResetButton/ResetButton.js +1 -1
  158. package/dist/components/form/Form/SubmitButton/SubmitButton.js +1 -1
  159. package/dist/components/form/Form/SubmitError.js +1 -1
  160. package/dist/components/form/Form/index.js +1 -1
  161. package/dist/components/form/Form/use-field/use-field-props.js +1 -1
  162. package/dist/components/form/Form/use-field/use-field.js +1 -1
  163. package/dist/components/form/Form/use-form.js +1 -1
  164. package/dist/components/form/Form/validation.js +1 -1
  165. package/dist/components/form/Label.js +1 -1
  166. package/dist/components/form/wrapper.js +1 -1
  167. package/dist/components/helpers/DisplayTransition/DisplayTransition.js +1 -1
  168. package/dist/components/helpers/IconSwitch/IconSwitch.js +1 -1
  169. package/dist/components/layout/Flex.js +1 -1
  170. package/dist/components/layout/Flow.js +1 -1
  171. package/dist/components/layout/Grid.js +1 -1
  172. package/dist/components/layout/Panel.js +1 -1
  173. package/dist/components/layout/Prefix.js +1 -1
  174. package/dist/components/layout/ResizablePanel.js +1 -1
  175. package/dist/components/layout/Space.js +1 -1
  176. package/dist/components/layout/Suffix.js +1 -1
  177. package/dist/components/navigation/Tabs/DraggableTabList.js +1 -1
  178. package/dist/components/navigation/Tabs/TabButton.js +1 -1
  179. package/dist/components/navigation/Tabs/TabDropIndicator.js +1 -1
  180. package/dist/components/navigation/Tabs/TabPanel.js +1 -1
  181. package/dist/components/navigation/Tabs/TabPicker.js +1 -1
  182. package/dist/components/navigation/Tabs/Tabs.js +1 -1
  183. package/dist/components/navigation/Tabs/TabsAction.js +1 -1
  184. package/dist/components/navigation/Tabs/TabsContext.js +1 -1
  185. package/dist/components/navigation/Tabs/popover-placement.js +1 -1
  186. package/dist/components/navigation/Tabs/styled.js +1 -1
  187. package/dist/components/navigation/Tabs/types.js +1 -1
  188. package/dist/components/navigation/Tabs/use-tab-editing.js +1 -1
  189. package/dist/components/navigation/Tabs/use-tab-indicator.js +1 -1
  190. package/dist/components/organisms/FileTabs/FileTabs.js +1 -1
  191. package/dist/components/organisms/StatsCard/StatsCard.js +1 -1
  192. package/dist/components/other/Calendar/Calendar.js +1 -1
  193. package/dist/components/other/Calendar/CalendarCell.js +1 -1
  194. package/dist/components/other/Calendar/CalendarGrid.js +1 -1
  195. package/dist/components/other/Calendar/RangeCalendar.js +1 -1
  196. package/dist/components/other/CloudLogo/CloudLogo.js +1 -1
  197. package/dist/components/overlays/AlertDialog/AlertDialog.js +1 -1
  198. package/dist/components/overlays/AlertDialog/AlertDialogApiProvider.js +1 -1
  199. package/dist/components/overlays/AlertDialog/AlertDialogZone.js +1 -1
  200. package/dist/components/overlays/Dialog/Dialog.js +1 -1
  201. package/dist/components/overlays/Dialog/DialogContainer.js +1 -1
  202. package/dist/components/overlays/Dialog/DialogForm.js +1 -1
  203. package/dist/components/overlays/Dialog/DialogTrigger.js +1 -1
  204. package/dist/components/overlays/Dialog/context.js +1 -1
  205. package/dist/components/overlays/Dialog/use-dialog-container.js +1 -1
  206. package/dist/components/overlays/Modal/Modal.js +1 -1
  207. package/dist/components/overlays/Modal/OpenTransitionContext.js +1 -1
  208. package/dist/components/overlays/Modal/Overlay.js +1 -1
  209. package/dist/components/overlays/Modal/Popover.js +1 -1
  210. package/dist/components/overlays/Modal/Tray.js +1 -1
  211. package/dist/components/overlays/Modal/Underlay.js +1 -1
  212. package/dist/components/overlays/Notifications/Notification.js +1 -1
  213. package/dist/components/overlays/Notifications/NotificationAction.js +1 -1
  214. package/dist/components/overlays/Notifications/NotificationCard.js +1 -1
  215. package/dist/components/overlays/Notifications/NotificationContext.js +1 -1
  216. package/dist/components/overlays/Notifications/NotificationItem.js +1 -1
  217. package/dist/components/overlays/Notifications/OverlayContainer.js +1 -1
  218. package/dist/components/overlays/Notifications/OverlayProvider.js +1 -1
  219. package/dist/components/overlays/Notifications/PersistentNotificationsList.js +1 -1
  220. package/dist/components/overlays/Notifications/dismissed-storage.js +1 -1
  221. package/dist/components/overlays/Notifications/format-relative-time.js +1 -1
  222. package/dist/components/overlays/Notifications/index.js +1 -1
  223. package/dist/components/overlays/Notifications/use-notification-state.js +1 -1
  224. package/dist/components/overlays/Notifications/use-notifications.js +1 -1
  225. package/dist/components/overlays/Notifications/use-overlay-timers.js +1 -1
  226. package/dist/components/overlays/Notifications/use-persistent-notifications.js +1 -1
  227. package/dist/components/overlays/Notifications/use-persistent-state.js +1 -1
  228. package/dist/components/overlays/Notifications/use-toast-state.js +1 -1
  229. package/dist/components/overlays/Toast/ToastItem.js +1 -1
  230. package/dist/components/overlays/Toast/index.js +1 -1
  231. package/dist/components/overlays/Toast/useProgressToast.js +1 -1
  232. package/dist/components/overlays/Toast/useToast.js +1 -1
  233. package/dist/components/overlays/Tooltip/Tooltip.js +1 -1
  234. package/dist/components/overlays/Tooltip/TooltipProvider.js +1 -1
  235. package/dist/components/overlays/Tooltip/TooltipTrigger.js +1 -1
  236. package/dist/components/overlays/Tooltip/context.js +1 -1
  237. package/dist/components/portal/Portal.js +1 -1
  238. package/dist/components/portal/PortalProvider.js +1 -1
  239. package/dist/components/portal/usePortal.js +1 -1
  240. package/dist/components/shared/DraggableCollection.js +1 -1
  241. package/dist/components/shared/InvalidIcon.js +1 -1
  242. package/dist/components/shared/ValidIcon.js +1 -1
  243. package/dist/components/status/LoadingAnimation/LoadingAnimation.js +1 -1
  244. package/dist/components/status/Spin/Cube.js +1 -1
  245. package/dist/components/status/Spin/InternalSpinner.js +1 -1
  246. package/dist/components/status/Spin/Spin.js +1 -1
  247. package/dist/components/status/Spin/SpinsContainer.js +1 -1
  248. package/dist/data/item-themes.js +1 -1
  249. package/dist/data/themes.js +1 -1
  250. package/dist/icons/AdjustmentsHorizontalIcon.js +1 -1
  251. package/dist/icons/AdjustmentsIcon.js +1 -1
  252. package/dist/icons/AiIcon.js +1 -1
  253. package/dist/icons/AreaChartIcon.js +1 -1
  254. package/dist/icons/BackwardIcon.js +1 -1
  255. package/dist/icons/BarChartIcon.js +1 -1
  256. package/dist/icons/BellFilledIcon.js +1 -1
  257. package/dist/icons/BellIcon.js +1 -1
  258. package/dist/icons/BooleanIcon.js +1 -1
  259. package/dist/icons/CalendarEditIcon.js +1 -1
  260. package/dist/icons/CalendarIcon.js +1 -1
  261. package/dist/icons/CaretDownIcon.js +1 -1
  262. package/dist/icons/CaretUpIcon.js +1 -1
  263. package/dist/icons/ChartAreaStackedIcon.js +1 -1
  264. package/dist/icons/ChartAreaStackedPercentageIcon.js +1 -1
  265. package/dist/icons/ChartBarGroupedHorizontalIcon.js +1 -1
  266. package/dist/icons/ChartBarGroupedIcon.js +1 -1
  267. package/dist/icons/ChartBarHorizontalIcon.js +1 -1
  268. package/dist/icons/ChartBarLineIcon.js +1 -1
  269. package/dist/icons/ChartBarStackedHorizontalIcon.js +1 -1
  270. package/dist/icons/ChartBarStackedIcon.js +1 -1
  271. package/dist/icons/ChartBarStackedPercentageHorizontalIcon.js +1 -1
  272. package/dist/icons/ChartBarStackedPercentageIcon.js +1 -1
  273. package/dist/icons/ChartBoxPlot2Icon.js +1 -1
  274. package/dist/icons/ChartBoxPlotIcon.js +1 -1
  275. package/dist/icons/ChartBubbleIcon.js +1 -1
  276. package/dist/icons/ChartDonut2Icon.js +1 -1
  277. package/dist/icons/ChartFunnelIcon.js +1 -1
  278. package/dist/icons/ChartHeatmapIcon.js +1 -1
  279. package/dist/icons/ChartKPIIcon.js +1 -1
  280. package/dist/icons/ChartPie2Icon.js +1 -1
  281. package/dist/icons/ChartScatterIcon.js +1 -1
  282. package/dist/icons/CheckCircleFilledIcon.js +1 -1
  283. package/dist/icons/CheckCircleIcon.js +1 -1
  284. package/dist/icons/CheckIcon.js +1 -1
  285. package/dist/icons/CircleFilledIcon.js +1 -1
  286. package/dist/icons/ClearIcon.js +1 -1
  287. package/dist/icons/CloseCircleFilledIcon.js +1 -1
  288. package/dist/icons/CloseCircleIcon.js +1 -1
  289. package/dist/icons/CloseIcon.js +1 -1
  290. package/dist/icons/CodeIcon.js +1 -1
  291. package/dist/icons/ColumnTotalIcon.js +1 -1
  292. package/dist/icons/CopyIcon.js +1 -1
  293. package/dist/icons/CountIcon.js +1 -1
  294. package/dist/icons/CubeIcon.js +1 -1
  295. package/dist/icons/CubePauseIcon.js +1 -1
  296. package/dist/icons/CubePlayIcon.js +1 -1
  297. package/dist/icons/CurrencyDollarIcon.js +1 -1
  298. package/dist/icons/DangerIcon.js +1 -1
  299. package/dist/icons/DashboardIcon.js +1 -1
  300. package/dist/icons/DatabaseIcon.js +1 -1
  301. package/dist/icons/DecimalDecreaseIcon.js +1 -1
  302. package/dist/icons/DecimalIncreaseIcon.js +1 -1
  303. package/dist/icons/DirectionIcon.js +1 -1
  304. package/dist/icons/DonutIcon.js +1 -1
  305. package/dist/icons/DownIcon.js +1 -1
  306. package/dist/icons/EditIcon.js +1 -1
  307. package/dist/icons/ExclamationCircleFilledIcon.js +1 -1
  308. package/dist/icons/ExclamationCircleIcon.js +1 -1
  309. package/dist/icons/ExclamationIcon.js +1 -1
  310. package/dist/icons/EyeIcon.js +1 -1
  311. package/dist/icons/EyeInvisibleIcon.js +1 -1
  312. package/dist/icons/FilterIcon.js +1 -1
  313. package/dist/icons/FolderFilledIcon.js +1 -1
  314. package/dist/icons/FolderIcon.js +1 -1
  315. package/dist/icons/FolderOpenFilledIcon.js +1 -1
  316. package/dist/icons/FolderOpenIcon.js +1 -1
  317. package/dist/icons/ForwardIcon.js +1 -1
  318. package/dist/icons/GripVerticalIcon.js +1 -1
  319. package/dist/icons/HierarchyIcon.js +1 -1
  320. package/dist/icons/HierarchyOpenIcon.js +1 -1
  321. package/dist/icons/Icon.js +1 -1
  322. package/dist/icons/InfoCircleIcon.js +1 -1
  323. package/dist/icons/InfoIcon.js +1 -1
  324. package/dist/icons/KeyIcon.js +1 -1
  325. package/dist/icons/LeftIcon.js +1 -1
  326. package/dist/icons/LineChartIcon.js +1 -1
  327. package/dist/icons/LoadingIcon.js +1 -1
  328. package/dist/icons/LockFilledIcon.js +1 -1
  329. package/dist/icons/LockIcon.js +1 -1
  330. package/dist/icons/MoreIcon.js +1 -1
  331. package/dist/icons/NotAllowedIcon.js +1 -1
  332. package/dist/icons/Number123Icon.js +1 -1
  333. package/dist/icons/NumberIcon.js +1 -1
  334. package/dist/icons/PauseCircleFilledIcon.js +1 -1
  335. package/dist/icons/PauseCircleIcon.js +1 -1
  336. package/dist/icons/PauseIcon.js +1 -1
  337. package/dist/icons/PercentageIcon.js +1 -1
  338. package/dist/icons/PieChartIcon.js +1 -1
  339. package/dist/icons/PlayCircleIcon.js +1 -1
  340. package/dist/icons/PlayIcon.js +1 -1
  341. package/dist/icons/PlusIcon.js +1 -1
  342. package/dist/icons/ProgressBarIcon.js +1 -1
  343. package/dist/icons/ReloadIcon.js +1 -1
  344. package/dist/icons/ReportIcon.js +1 -1
  345. package/dist/icons/ReturnIcon.js +1 -1
  346. package/dist/icons/RightIcon.js +1 -1
  347. package/dist/icons/RowTotalsIcon.js +1 -1
  348. package/dist/icons/SchemeIcon.js +1 -1
  349. package/dist/icons/SearchIcon.js +1 -1
  350. package/dist/icons/SemanticQueryIcon.js +1 -1
  351. package/dist/icons/SettingsIcon.js +1 -1
  352. package/dist/icons/ShieldFilledIcon.js +1 -1
  353. package/dist/icons/ShieldIcon.js +1 -1
  354. package/dist/icons/SlashIcon.js +1 -1
  355. package/dist/icons/SparklesIcon.js +1 -1
  356. package/dist/icons/SqlIcon.js +1 -1
  357. package/dist/icons/StatsIcon.js +1 -1
  358. package/dist/icons/StopIcon.js +1 -1
  359. package/dist/icons/StringIcon.js +1 -1
  360. package/dist/icons/SubtotalsIcon.js +1 -1
  361. package/dist/icons/SwitchIcon.js +1 -1
  362. package/dist/icons/TableIcon.js +1 -1
  363. package/dist/icons/ThumbsDownIcon.js +1 -1
  364. package/dist/icons/ThumbsUpIcon.js +1 -1
  365. package/dist/icons/ThunderboltCrossedIcon.js +1 -1
  366. package/dist/icons/ThunderboltFilledIcon.js +1 -1
  367. package/dist/icons/ThunderboltIcon.js +1 -1
  368. package/dist/icons/TimeIcon.js +1 -1
  369. package/dist/icons/TrashIcon.js +1 -1
  370. package/dist/icons/UnlockIcon.js +1 -1
  371. package/dist/icons/UpIcon.js +1 -1
  372. package/dist/icons/UserGroupIcon.js +1 -1
  373. package/dist/icons/UserIcon.js +1 -1
  374. package/dist/icons/UserLockIcon.js +1 -1
  375. package/dist/icons/ViewIcon.js +1 -1
  376. package/dist/icons/WarningFilledIcon.js +1 -1
  377. package/dist/icons/WarningIcon.js +1 -1
  378. package/dist/icons/wrap-icon.js +1 -1
  379. package/dist/index.js +1 -1
  380. package/dist/provider.js +1 -1
  381. package/dist/providers/TrackingProvider.js +1 -1
  382. package/dist/providers/navigationAdapter.default.js +1 -1
  383. package/dist/tokens/base.js +1 -1
  384. package/dist/tokens/colors.js +1 -1
  385. package/dist/tokens/index.js +1 -1
  386. package/dist/tokens/layout.js +1 -1
  387. package/dist/tokens/palette.js +1 -1
  388. package/dist/tokens/shadows.js +1 -1
  389. package/dist/tokens/sizes.js +1 -1
  390. package/dist/tokens/spacing.js +1 -1
  391. package/dist/tokens/typography.js +1 -1
  392. package/dist/utils/ResizeSensor.js +1 -1
  393. package/dist/utils/is-dev-env.js +1 -1
  394. package/dist/utils/modules.js +1 -1
  395. package/dist/utils/promise.js +1 -1
  396. package/dist/utils/raf.js +1 -1
  397. package/dist/utils/random.js +1 -1
  398. package/dist/utils/range.js +1 -1
  399. package/dist/utils/react/RenderCache.js +1 -1
  400. package/dist/utils/react/Slots.js +1 -1
  401. package/dist/utils/react/chain.js +1 -1
  402. package/dist/utils/react/forwardRefWithGenerics.js +1 -1
  403. package/dist/utils/react/index.js +1 -1
  404. package/dist/utils/react/interactions.js +1 -1
  405. package/dist/utils/react/isTextOnly.js +1 -1
  406. package/dist/utils/react/mapProps.js +1 -1
  407. package/dist/utils/react/mergeProps.js +1 -1
  408. package/dist/utils/react/nullableValue.js +1 -1
  409. package/dist/utils/react/resolveIcon.js +1 -1
  410. package/dist/utils/react/sharedStore.js +1 -1
  411. package/dist/utils/react/useCombinedRefs.js +1 -1
  412. package/dist/utils/react/useControlledFocusVisible.js +1 -1
  413. package/dist/utils/react/useEventBus.js +1 -1
  414. package/dist/utils/react/useId.js +1 -1
  415. package/dist/utils/react/useIsDarwin.js +1 -1
  416. package/dist/utils/react/useKeySymbols.js +1 -1
  417. package/dist/utils/react/useLayoutEffect.js +1 -1
  418. package/dist/utils/react/useLocalStorage.js +1 -1
  419. package/dist/utils/react/useMergeStyles.js +1 -1
  420. package/dist/utils/react/usePopoverSync.js +1 -1
  421. package/dist/utils/react/useQaProps.js +1 -1
  422. package/dist/utils/react/useViewportSize.js +1 -1
  423. package/dist/utils/react/wrapNodeIfPlain.js +1 -1
  424. package/dist/utils/selection.js +1 -1
  425. package/dist/utils/styles.js +1 -1
  426. package/dist/utils/tree.js +1 -1
  427. package/dist/utils/warnings.js +1 -1
  428. package/dist/version.js +2 -2
  429. package/docs/components/fields/CommandTextArea.md +20 -5
  430. package/package.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"ListBox.js","names":["Item","useHover","mergeProps","useFocus","BaseSection","CollectionItem"],"sources":["../../../../src/components/fields/ListBox/ListBox.tsx"],"sourcesContent":["import { useHover } from '@react-aria/interactions';\nimport { IconMinus } from '@tabler/icons-react';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport {\n BASE_STYLES,\n BasePropsWithoutChildren,\n COLOR_STYLES,\n mergeStyles,\n OUTER_STYLES,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport {\n CSSProperties,\n ForwardedRef,\n forwardRef,\n MutableRefObject,\n ReactElement,\n ReactNode,\n RefObject,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport {\n AriaListBoxProps,\n DropTarget,\n useDraggableItem,\n useDropIndicator,\n useKeyboard,\n useListBox,\n useListBoxSection,\n useOption,\n} from 'react-aria';\nimport {\n Section as BaseSection,\n DraggableCollectionState,\n DroppableCollectionState,\n useListState,\n} from 'react-stately';\n\nimport { useWarn } from '../../../_internal/hooks/use-warn';\nimport { CheckIcon, GripVerticalIcon } from '../../../icons';\nimport { Icon } from '../../../icons/index';\nimport { useProviderProps } from '../../../provider';\nimport { SIZE_NAME_TO_KEY, SIZES } from '../../../tokens';\nimport { mergeProps, useCombinedRefs } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport { extractStyles } from '../../../utils/styles';\n// Import Menu styled components for header and footer\nimport {\n StyledDivider,\n StyledFooter,\n StyledHeader,\n StyledSectionHeading,\n} from '../../actions/Menu/styled';\nimport {\n CollectionItem,\n CubeCollectionItemProps,\n filterCollectionItemProps,\n} from '../../CollectionItem';\nimport { Item } from '../../content/Item/Item';\nimport { useFieldProps, useFormProps, wrapWithField } from '../../form';\nimport { createMockDragState } from '../../shared/DraggableCollection';\n\nimport { DraggableListBox } from './DraggableListBox';\n\nimport type { CollectionBase, Key } from '@react-types/shared';\nimport type { FieldBaseProps } from '../../../shared';\n\ntype FirstArg<F> = F extends (...args: infer A) => any ? A[0] : never;\n\nconst ListBoxWrapperElement = tasty({\n qa: 'ListBox',\n styles: {\n display: 'grid',\n gridColumns: '1sf',\n gridRows: 'max-content max-content max-content 1sf max-content',\n flow: 'column',\n gap: 0,\n position: 'relative',\n radius: {\n '': '1cr',\n '[data-shape=\"popover\"]': '(1cr - 1bw)',\n '[data-shape=\"plain\"]': '0',\n },\n color: '#dark-02',\n transition: 'theme',\n outline: {\n '': '#purple-03.0',\n 'invalid & focused': '#danger.50',\n focused: '#purple-03',\n },\n border: {\n '': true,\n focused: '#primary-text',\n valid: '#success-text.50',\n invalid: '#danger-text.50',\n disabled: true,\n '[data-shape=\"plain\"] | [data-shape=\"popover\"] | searchable': false,\n },\n },\n});\n\nconst ListElement = tasty({\n as: 'ul',\n styles: {\n display: 'block',\n padding: 0,\n listStyle: 'none',\n boxSizing: 'border-box',\n margin: {\n '': '.5x .5x 0 .5x',\n '[data-shape=\"plain\"]': '0',\n },\n height: 'max-content',\n },\n});\n\n// NEW: dedicated scroll container for ListBox\nconst ListBoxScrollElement = tasty({\n as: 'div',\n styles: {\n display: 'grid',\n gridColumns: '1sf',\n gridRows: '1sf',\n overflow: 'auto',\n scrollbar: 'styled',\n },\n});\n\n// Create an extended Item for ListBox options with 'all' modifier support\nconst ListBoxItem = tasty(Item, {\n as: 'li',\n disableActionsFocus: true,\n styles: {\n margin: {\n '': '0 0 1bw 0',\n ':last-of-type': '0',\n 'draggable & :last-of-type': '0 0 .5x 0',\n all: '.5x',\n },\n Icon: {\n cursor: {\n draggable: 'grab',\n },\n opacity: {\n gripIcon: '.4',\n 'gripIcon & hovered': '1',\n },\n transition: {\n draggable: 'opacity',\n },\n },\n },\n});\n\n// Horizontal drop indicator for DnD reordering\nconst ListBoxDropIndicatorElement = tasty({\n as: 'li',\n styles: {\n zIndex: 10,\n position: 'relative',\n pointerEvents: 'none',\n height: 0,\n opacity: {\n '': 0,\n 'drop-target': 1,\n },\n\n Indicator: {\n $: '>',\n position: 'absolute',\n left: '.5x',\n right: '.5x',\n top: '-1px',\n height: '2px',\n fill: '#primary',\n radius: 'round',\n },\n },\n});\n\nconst SectionWrapperElement = tasty({\n as: 'li',\n styles: {\n display: 'block',\n padding: {\n '': 0,\n ':last-of-type': '0 0 .5x 0',\n },\n },\n});\n\nconst SectionListElement = tasty({\n qa: 'ListBoxSectionList',\n as: 'ul',\n styles: {\n display: 'flex',\n gap: '0',\n flow: 'column',\n margin: '0',\n padding: '0',\n listStyle: 'none',\n },\n});\n\n// Checkbox component for multiple selection options\nconst ListBoxCheckbox = tasty({\n as: 'div',\n styles: {\n display: 'grid',\n placeItems: 'center',\n radius: '.5r',\n width: '(2x - 2bw)',\n height: '(2x - 2bw)',\n flexShrink: 0,\n transition: 'theme',\n opacity: {\n '': 0,\n 'selected | indeterminate | hovered | focused': 1,\n },\n fill: {\n '': '#surface',\n 'selected | indeterminate': '#primary',\n 'invalid & !(selected | indeterminate)': '#surface',\n 'invalid & (selected | indeterminate)': '#danger',\n disabled: '#dark.12',\n },\n color: {\n '': '#clear',\n 'selected | indeterminate': '#white',\n },\n border: {\n '': '#dark.30',\n invalid: '#danger',\n 'disabled | ((selected | indeterminate) & !invalid)': '#clear',\n },\n },\n});\n\nconst ListBoxCheckboxWrapper = tasty({\n as: 'div',\n styles: {\n display: 'grid',\n placeItems: 'center',\n placeContent: 'center',\n cursor: '$pointer',\n placeSelf: 'stretch',\n },\n});\n\nfunction renderCheckboxIcon({\n isSelected,\n isDisabled,\n isFocused,\n isHovered,\n validationState,\n}: {\n isSelected: boolean;\n isDisabled: boolean;\n isFocused: boolean;\n isHovered: boolean;\n validationState?: string;\n}) {\n const mods = {\n selected: isSelected,\n disabled: isDisabled,\n focused: isFocused,\n hovered: isHovered,\n invalid: validationState === 'invalid',\n };\n\n return (\n <ListBoxCheckboxWrapper data-element=\"CheckboxWrapper\" mods={mods}>\n <ListBoxCheckbox data-element=\"Checkbox\" mods={mods}>\n <CheckIcon size={12} stroke={3} />\n </ListBoxCheckbox>\n </ListBoxCheckboxWrapper>\n );\n}\n\nexport interface CubeListBoxProps<T>\n extends AriaListBoxProps<T>,\n CollectionBase<T>,\n FieldBaseProps,\n BasePropsWithoutChildren {\n /** Custom styles for the list container */\n listStyles?: Styles;\n /** Custom styles for individual options */\n optionStyles?: Styles;\n /** Custom styles for section containers */\n sectionStyles?: Styles;\n /** Custom styles for section headings */\n headingStyles?: Styles;\n /** Whether the ListBox is disabled */\n isDisabled?: boolean;\n /** The selected key in controlled single selection mode */\n selectedKey?: Key | null;\n /** The selected keys in controlled multiple selection mode. Use \"all\" to select all items or an array of keys */\n selectedKeys?: 'all' | Key[];\n /** The default selected key in uncontrolled single selection mode */\n defaultSelectedKey?: Key | null;\n /** The default selected keys in uncontrolled multiple selection mode. Use \"all\" to select all items or an array of keys */\n defaultSelectedKeys?: 'all' | Key[];\n /** Callback fired when selection changes */\n onSelectionChange?: (key: Key | null | 'all' | Key[]) => void;\n /** The selection mode of the ListBox */\n selectionMode?: 'single' | 'multiple';\n /** Ref for accessing the list DOM element */\n listRef?: RefObject<HTMLUListElement | null>;\n /** Whether to disallow empty selection */\n disallowEmptySelection?: boolean;\n /** Whether to wrap focus when reaching the end of the list */\n shouldFocusWrap?: boolean;\n /**\n * Ref to access the internal ListState instance.\n * This allows parent components to access selection state and other list functionality.\n */\n stateRef?: RefObject<any | null>;\n\n /**\n * Whether moving the pointer over an option will move DOM focus to that option.\n * Set to false for components that keep DOM focus outside (e.g. searchable FilterListBox).\n * Defaults to true.\n */\n focusOnHover?: boolean;\n /** Custom header content displayed above the list */\n header?: ReactNode;\n /** Custom footer content displayed below the list */\n footer?: ReactNode;\n /** Custom styles for the header */\n headerStyles?: Styles;\n /** Custom styles for the footer */\n footerStyles?: Styles;\n /** Additional modifiers for styling the ListBox */\n mods?: Record<string, boolean>;\n /** Size variant of the ListBox */\n size?: 'small' | 'medium' | 'large';\n\n /**\n * When `true`, clicking an already-selected item keeps it selected instead of toggling it off.\n * Useful when embedding ListBox inside components like ComboBox.\n */\n disableSelectionToggle?: boolean;\n\n /**\n * Whether to use virtual focus for keyboard navigation.\n * When true, DOM focus stays outside individual option elements (useful for searchable lists).\n * Defaults to false for backward compatibility.\n */\n shouldUseVirtualFocus?: boolean;\n\n /**\n * Callback fired when the user presses Escape key.\n * When provided, this prevents React Aria's default Escape behavior (selection reset).\n */\n onEscape?: () => void;\n\n /**\n * Whether to show checkboxes for multiple selection mode.\n * This adds a checkbox icon to the left of each option.\n */\n isCheckable?: boolean;\n\n /**\n * Callback fired when an option is clicked but not on the checkbox area.\n * Used by FilterPicker to close the popover on non-checkbox clicks.\n */\n onOptionClick?: (key: Key) => void;\n\n /**\n * Whether to show the \"Select All\" option in multiple selection mode.\n * This adds a select all option to the header that allows selecting/deselecting all items.\n */\n showSelectAll?: boolean;\n\n /**\n * Label for the \"Select All\" option. Defaults to \"Select All\".\n */\n selectAllLabel?: ReactNode;\n\n /**\n * Props to apply to the \"Select All\" option.\n */\n allValueProps?: Partial<CubeCollectionItemProps<T>>;\n\n /**\n * Filter function to apply to the collection nodes.\n * Takes an iterable of nodes and returns a filtered iterable.\n * Useful for implementing search/filter functionality.\n */\n filter?: (nodes: Iterable<any>) => Iterable<any>;\n\n /**\n * Label to display when the list is empty (no items available).\n * Defaults to \"No items\".\n */\n emptyLabel?: ReactNode;\n\n /**\n * Visual shape of the ListBox styling.\n * - `card` (default): Standard card styling with border and margin\n * - `plain`: No border, no margin, no radius - suitable for embedded use\n * - `popover`: No border, but keeps margin and radius - suitable for overlay use\n * Defaults to 'card'.\n */\n shape?: 'card' | 'plain' | 'popover';\n\n /**\n * Enable drag-and-drop reordering of list items.\n * When enabled, virtualization is disabled and each item gets a drag handle.\n * @default false\n */\n isReorderable?: boolean;\n\n /**\n * Callback when items are reordered via drag-and-drop.\n * Called with the new array of item keys in their new order.\n */\n onReorder?: (newOrder: string[]) => void;\n}\n\nconst PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];\n\nconst SelectAllOption = ({\n label = 'Select All',\n isSelected,\n isIndeterminate,\n isDisabled,\n isCheckable,\n size = 'medium',\n state,\n lastFocusSourceRef,\n onClick,\n allValueProps = {},\n}: {\n label?: ReactNode;\n isSelected: boolean;\n isIndeterminate: boolean;\n isDisabled?: boolean;\n isCheckable?: boolean;\n size?: 'small' | 'medium' | 'large';\n state: any;\n lastFocusSourceRef: MutableRefObject<'keyboard' | 'mouse' | 'other'>;\n onClick: (propagate?: boolean) => void;\n allValueProps?: Partial<CubeCollectionItemProps<any>>;\n}) => {\n const { hoverProps, isHovered } = useHover({ isDisabled });\n\n const markIcon = isIndeterminate ? (\n <Icon size={12} stroke={3}>\n <IconMinus />\n </Icon>\n ) : (\n <CheckIcon size={12} stroke={3} />\n );\n\n const localRef = useRef<HTMLLIElement>(null);\n\n // Create checkbox icon for select all option\n const checkboxIcon = useMemo(() => {\n if (!isCheckable) {\n return null;\n }\n\n return (\n <ListBoxCheckboxWrapper\n data-element=\"CheckboxWrapper\"\n mods={{\n selected: isSelected,\n disabled: isDisabled,\n hovered: isHovered,\n indeterminate: isIndeterminate,\n }}\n >\n <ListBoxCheckbox\n data-element=\"Checkbox\"\n mods={{\n selected: isSelected,\n disabled: isDisabled,\n hovered: isHovered,\n indeterminate: isIndeterminate,\n }}\n >\n {(isIndeterminate || isSelected) && markIcon}\n </ListBoxCheckbox>\n </ListBoxCheckboxWrapper>\n );\n }, [\n isCheckable,\n isSelected,\n isDisabled,\n isHovered,\n isIndeterminate,\n markIcon,\n ]);\n\n const handleOptionClick = (e) => {\n // Mark focus changes from mouse clicks\n if (lastFocusSourceRef) {\n lastFocusSourceRef.current = 'mouse';\n }\n\n // If there's an onOptionClick callback and this is checkable in multiple mode,\n // we need to distinguish between checkbox and content clicks\n if (state.selectionManager.selectionMode === 'multiple') {\n // Check if the click target is within the checkbox area\n const clickTarget = e.target as HTMLElement;\n const checkboxElement = localRef.current?.querySelector(\n '[data-element=\"CheckboxWrapper\"]',\n );\n\n if (\n checkboxElement &&\n (checkboxElement === clickTarget ||\n checkboxElement.contains(clickTarget))\n ) {\n onClick?.(false);\n } else {\n // Then call the callback (which will close the popover in FilterPicker)\n onClick?.(true);\n }\n } else {\n onClick?.(true);\n }\n };\n\n return (\n <>\n <ListBoxItem\n ref={localRef}\n data-size={size}\n size={size}\n role=\"option\"\n aria-selected={isSelected}\n isSelected={isSelected}\n isDisabled={isDisabled}\n icon={checkboxIcon}\n mods={{\n listboxitem: true,\n disabled: isDisabled,\n checkable: isCheckable,\n hovered: isHovered,\n indeterminate: isIndeterminate,\n all: true, // Important: this preserves the 'all' modifier\n }}\n {...mergeProps(hoverProps, allValueProps, {\n onClick: handleOptionClick,\n })}\n >\n {label}\n </ListBoxItem>\n <StyledDivider />\n </>\n );\n};\n\nexport const ListBox = forwardRef(function ListBox<T extends object>(\n props: CubeListBoxProps<T>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n props = useProviderProps(props);\n props = useFormProps(props);\n props = useFieldProps(props, {\n valuePropsMapper: ({ value, onChange }) => {\n const fieldProps: any = {};\n\n if (props.selectionMode === 'multiple') {\n fieldProps.selectedKeys = value || [];\n } else {\n fieldProps.selectedKey = value ?? null;\n }\n\n fieldProps.onSelectionChange = (key: any) => {\n if (props.selectionMode === 'multiple') {\n onChange(key ? (Array.isArray(key) ? key : [key]) : []);\n } else {\n onChange(Array.isArray(key) ? key[0] : key);\n }\n };\n\n return fieldProps;\n },\n });\n\n let {\n qa,\n label,\n extra,\n id,\n labelStyles,\n isRequired,\n necessityIndicator,\n validationState,\n isDisabled,\n listStyles,\n optionStyles,\n sectionStyles,\n headingStyles,\n listRef,\n message,\n description,\n styles,\n mods: externalMods,\n size = 'medium',\n labelSuffix,\n selectedKey,\n defaultSelectedKey,\n selectedKeys,\n defaultSelectedKeys,\n shouldUseVirtualFocus,\n onSelectionChange,\n disableSelectionToggle = false,\n stateRef,\n focusOnHover,\n header,\n footer,\n headerStyles,\n footerStyles,\n onEscape,\n isCheckable,\n onOptionClick,\n showSelectAll,\n selectAllLabel,\n allValueProps,\n filter,\n emptyLabel = 'No items',\n shape = 'card',\n isReorderable = false,\n onReorder,\n form,\n ...otherProps\n } = props;\n\n const [, forceUpdate] = useState({});\n const lastSelectedKeyRef = useRef<Key | null>(null);\n\n // Wrap onSelectionChange to prevent selection when disabled and handle React Aria's Set format\n const externalSelectionHandler = onSelectionChange || (props as any).onChange;\n\n const wrappedOnSelectionChange = useMemo(() => {\n if (!externalSelectionHandler) return undefined;\n\n return (keys: any) => {\n // Don't allow selection changes when disabled\n if (isDisabled) {\n return;\n }\n\n // React Aria always passes a Set for selection changes\n // Handle the special \"all\" case and convert to our public API format\n if (keys === 'all') {\n externalSelectionHandler('all');\n } else if (keys instanceof Set) {\n if (keys.size === 0) {\n if (disableSelectionToggle && props.selectionMode === 'single') {\n const prevKey = lastSelectedKeyRef.current;\n if (prevKey != null) {\n externalSelectionHandler(prevKey);\n return;\n }\n }\n externalSelectionHandler(\n props.selectionMode === 'multiple' ? [] : null,\n );\n } else if (props.selectionMode === 'multiple') {\n externalSelectionHandler(Array.from(keys));\n } else {\n const key = Array.from(keys)[0];\n lastSelectedKeyRef.current = key ?? null;\n externalSelectionHandler(key);\n }\n } else {\n lastSelectedKeyRef.current = keys as Key | null;\n externalSelectionHandler(keys);\n }\n };\n }, [\n externalSelectionHandler,\n isDisabled,\n props.selectionMode,\n disableSelectionToggle,\n ]);\n\n // Prepare props for useListState with correct selection props\n const listStateProps: FirstArg<typeof useListState> = {\n ...props,\n onSelectionChange: wrappedOnSelectionChange,\n isDisabled,\n disabledBehavior: 'all',\n filter,\n selectionMode: props.selectionMode || 'single',\n };\n\n // Set selection props based on mode\n if (listStateProps.selectionMode === 'multiple') {\n if (selectedKeys !== undefined) {\n // Handle \"all\" selection by passing it directly to React Aria\n listStateProps.selectedKeys =\n selectedKeys === 'all' ? 'all' : new Set(selectedKeys as Key[]);\n }\n if (defaultSelectedKeys !== undefined) {\n // Handle \"all\" default selection\n listStateProps.defaultSelectedKeys =\n defaultSelectedKeys === 'all'\n ? 'all'\n : new Set(defaultSelectedKeys as Key[]);\n }\n // Remove single-selection props if any\n delete listStateProps.selectedKey;\n delete listStateProps.defaultSelectedKey;\n } else {\n // For single-selection we convert the scalar key props that our public\n // API exposes into the Set-based props that React Stately expects.\n if (selectedKey !== undefined) {\n listStateProps.selectedKeys =\n selectedKey == null ? new Set() : new Set([selectedKey]);\n }\n\n if (defaultSelectedKey !== undefined) {\n listStateProps.defaultSelectedKeys =\n defaultSelectedKey == null ? new Set() : new Set([defaultSelectedKey]);\n }\n\n // Remove the single-value props so we don't pass unsupported keys through.\n delete listStateProps.selectedKey;\n delete listStateProps.defaultSelectedKey;\n }\n\n const listState = useListState(listStateProps);\n\n useLayoutEffect(() => {\n const selected = listState.selectionManager.selectedKeys;\n if (selected && (selected as any).size > 0) {\n const first = Array.from(selected as Set<Key>)[0];\n lastSelectedKeyRef.current = first ?? null;\n }\n }, [listState.selectionManager.selectedKeys]);\n\n // Calculate select all state for multiple selection mode\n const selectAllState = useMemo(() => {\n // Select-all only makes sense for multiple selection mode *and* when the UI is enabled\n if (props.selectionMode !== 'multiple' || !showSelectAll) {\n return { isSelected: false, isIndeterminate: false };\n }\n\n // React Stately exposes the raw selection value which is either the string \"all\"\n // (when `selectAll(true)` was used) **or** a Set of item keys.\n const rawSelection: any = (listState.selectionManager as any).rawSelection;\n\n // Fast path – user pressed our \"Select All\" control previously.\n if (rawSelection === 'all') {\n return { isSelected: true, isIndeterminate: false };\n }\n\n const selectedKeys = listState.selectionManager.selectedKeys as Set<Key>;\n\n // When there is nothing selected, we are in a clear state\n if (selectedKeys.size === 0) {\n return { isSelected: false, isIndeterminate: false };\n }\n\n // Otherwise it must be a partial (indeterminate) selection.\n return { isSelected: false, isIndeterminate: true };\n }, [\n props.selectionMode,\n showSelectAll,\n listState.collection,\n listState.disabledKeys,\n listState.selectionManager.selectedKeys,\n listState.selectionManager.rawSelection,\n ]);\n\n // Handle select all click\n const handleSelectAllClick = (propagate?: boolean) => {\n if (isDisabled || props.selectionMode !== 'multiple') return;\n\n if (selectAllState.isSelected) {\n // All selected, deselect all\n listState.selectionManager.clearSelection();\n // Manually call the wrapped handler since React Aria might not trigger it\n wrappedOnSelectionChange?.(new Set());\n } else {\n // Some or none selected, select all\n listState.selectionManager.selectAll(true);\n // Manually call the wrapped handler since React Aria might not trigger it\n wrappedOnSelectionChange?.('all');\n forceUpdate({});\n }\n\n if (propagate && !selectAllState.isSelected) {\n onOptionClick?.('__ALL__');\n }\n };\n\n // Track whether the last focus change was due to keyboard navigation\n const lastFocusSourceRef = useRef<'keyboard' | 'mouse' | 'other'>('other');\n\n // Expose the list state instance via the provided ref (if any)\n if (stateRef) {\n stateRef.current = {\n ...listState,\n lastFocusSourceRef,\n };\n }\n\n // Warn if isCheckable is false in single selection mode\n useWarn(isCheckable === false && props.selectionMode === 'single', {\n key: ['listbox-checkable-single-mode'],\n args: [\n 'CubeUIKit: isCheckable=false is not recommended in single selection mode as it may confuse users about selection behavior.',\n ],\n });\n\n // Custom keyboard handling to prevent selection clearing on Escape while allowing overlay dismiss\n const { keyboardProps } = useKeyboard({\n onKeyDown: (e) => {\n // Mark focus changes from keyboard navigation\n if (\n e.key === 'ArrowDown' ||\n e.key === 'ArrowUp' ||\n e.key === 'Home' ||\n e.key === 'End' ||\n e.key === 'PageUp' ||\n e.key === 'PageDown'\n ) {\n lastFocusSourceRef.current = 'keyboard';\n }\n\n if (e.key === 'Escape' && onEscape) {\n // Don't prevent default - let the overlay system handle closing\n // But we'll call onEscape to potentially override the default selection clearing\n onEscape();\n }\n },\n });\n\n styles = extractStyles(otherProps, PROP_STYLES, styles);\n\n ref = useCombinedRefs(ref);\n listRef = useCombinedRefs(listRef);\n\n // ----- Collection and virtualization decision (must precede useListBox) -----\n const itemsArray = useMemo(\n () => [...listState.collection],\n [listState.collection],\n );\n\n const hasSections = useMemo(\n () => itemsArray.some((i) => i.type === 'section'),\n [itemsArray],\n );\n\n const shouldVirtualize = !hasSections && !isReorderable;\n\n const { listBoxProps } = useListBox(\n {\n ...props,\n id: id,\n 'aria-label': props['aria-label'] || label?.toString(),\n isDisabled,\n // Only disable isVirtualized for reorderable lists (DnD needs real DOM focus).\n // Section-based lists keep isVirtualized: true to preserve ARIA attributes.\n isVirtualized: !isReorderable,\n shouldUseVirtualFocus: shouldUseVirtualFocus ?? false,\n escapeKeyBehavior: onEscape ? 'none' : 'clearSelection',\n },\n listState,\n listRef,\n );\n\n const { isFocused, focusProps } = useFocus({ isDisabled });\n const isInvalid = validationState === 'invalid';\n\n // Use ref to ensure estimateSize always accesses current itemsArray\n const itemsArrayRef = useRef(itemsArray);\n itemsArrayRef.current = itemsArray;\n\n // Scroll container ref for virtualization\n const scrollRef = useRef<HTMLDivElement>(null);\n\n const rowVirtualizer = useVirtualizer({\n count: shouldVirtualize ? itemsArray.length : 0,\n getScrollElement: () => scrollRef.current,\n // Use the actual item key to ensure React properly reconciles DOM elements\n // when items are filtered, added, or removed. Without this, the virtualizer\n // uses index-based keys which causes DOM reuse issues and style leaking.\n getItemKey: (index: number) => {\n const item = itemsArrayRef.current[index];\n return item?.key ?? index;\n },\n estimateSize: (index: number) => {\n const currentItem: any = itemsArrayRef.current[index];\n\n if (currentItem?.props?.description) {\n return SIZES.XL + 1;\n }\n return SIZES[SIZE_NAME_TO_KEY[size] as keyof typeof SIZES] + 1;\n },\n measureElement: (el) => {\n return el.offsetHeight + 1;\n },\n overscan: 10,\n });\n\n // Trigger remeasurement when items change (for filtering scenarios)\n useEffect(() => {\n if (shouldVirtualize) {\n rowVirtualizer.measure();\n }\n }, [shouldVirtualize, itemsArray, rowVirtualizer]);\n\n // Keep focused item visible, but only for keyboard navigation\n useLayoutEffect(() => {\n const focusedKey = listState.selectionManager.focusedKey;\n if (focusedKey == null) return;\n\n // Only scroll on keyboard navigation\n if (lastFocusSourceRef.current !== 'keyboard') return;\n\n const scrollElement = scrollRef.current;\n if (!scrollElement) return;\n\n const itemElement = scrollElement.querySelector(\n `[data-key=\"${CSS.escape(String(focusedKey))}\"]`,\n ) as HTMLElement;\n if (!itemElement) return;\n\n const scrollTop = scrollElement.scrollTop;\n const viewportHeight = scrollElement.clientHeight;\n const viewportBottom = scrollTop + viewportHeight;\n\n const itemRect = itemElement.getBoundingClientRect();\n const scrollRect = scrollElement.getBoundingClientRect();\n\n // Calculate item position relative to scroll container\n const itemTop = itemRect.top - scrollRect.top + scrollTop;\n const itemBottom = itemTop + itemRect.height;\n\n // Check if the item is fully visible in the viewport\n const isAlreadyVisible =\n itemTop >= scrollTop && itemBottom <= viewportBottom;\n\n if (!isAlreadyVisible) {\n // Use scrollIntoView with block: 'nearest' to minimize scroll jumps\n itemElement.scrollIntoView({ block: 'nearest', behavior: 'auto' });\n }\n }, [listState.selectionManager.focusedKey, itemsArray]);\n\n // Merge React Aria listbox props with custom keyboard props so both sets of\n // event handlers (e.g. Arrow navigation *and* our Escape handler) are\n // preserved.\n const mergedListBoxProps = mergeProps(listBoxProps, keyboardProps);\n\n // Ordered keys for DnD reordering\n const orderedKeys = useMemo(() => {\n if (!isReorderable) {\n return [];\n }\n\n return itemsArray\n .filter((i) => i.type === 'item')\n .map((i) => String(i.key));\n }, [isReorderable, itemsArray]);\n\n const mods = useMemo(\n () => ({\n invalid: isInvalid,\n valid: validationState === 'valid',\n disabled: isDisabled,\n focused: isFocused,\n header: !!header || (showSelectAll && props.selectionMode === 'multiple'),\n footer: !!footer,\n selectAll: showSelectAll && props.selectionMode === 'multiple',\n ...externalMods,\n }),\n [\n isInvalid,\n validationState,\n isDisabled,\n isFocused,\n header,\n footer,\n showSelectAll,\n props.selectionMode,\n externalMods,\n ],\n );\n\n const listBoxField = (\n <ListBoxWrapperElement\n ref={ref}\n qa=\"ListBoxWrapper\"\n mods={mods}\n styles={styles}\n data-shape={shape}\n >\n {header ? (\n <StyledHeader styles={headerStyles} data-size={size}>\n {header}\n </StyledHeader>\n ) : (\n <div role=\"presentation\" />\n )}\n {showSelectAll && props.selectionMode === 'multiple' ? (\n <SelectAllOption\n label={selectAllLabel || 'Select All'}\n state={listState}\n lastFocusSourceRef={lastFocusSourceRef}\n isSelected={selectAllState.isSelected}\n isIndeterminate={selectAllState.isIndeterminate}\n isDisabled={isDisabled}\n isCheckable={isCheckable}\n size={size}\n allValueProps={allValueProps}\n onClick={handleSelectAllClick}\n />\n ) : (\n <>\n <div role=\"presentation\" />\n <div role=\"presentation\" />\n </>\n )}\n {/* Scroll container wrapper */}\n <ListBoxScrollElement ref={scrollRef} mods={mods} {...focusProps}>\n {listState.collection.size === 0 ? (\n <Item preset=\"t4\" color=\"#dark-03\" size={size} padding=\"(.5x - 1bw)\">\n {emptyLabel}\n </Item>\n ) : isReorderable ? (\n <DraggableListBox\n state={listState}\n listRef={listRef}\n orderedKeys={orderedKeys}\n onReorder={onReorder}\n >\n {(dragState, dropState, collectionProps) => (\n <ListElement\n qa={qa || 'ListBox'}\n {...mergeProps(mergedListBoxProps, collectionProps)}\n ref={listRef}\n styles={listStyles}\n aria-disabled={isDisabled || undefined}\n mods={{ sections: false }}\n data-shape={shape}\n data-input-type=\"listbox\"\n >\n {itemsArray\n .filter((item) => item.type === 'item')\n .map((item) => (\n <Option\n key={item.key}\n size={size}\n item={item}\n state={listState}\n styles={optionStyles}\n isParentDisabled={isDisabled}\n validationState={validationState}\n focusOnHover={focusOnHover}\n isCheckable={isCheckable}\n lastFocusSourceRef={lastFocusSourceRef}\n dragState={dragState}\n dropState={dropState}\n onClick={onOptionClick}\n />\n ))}\n </ListElement>\n )}\n </DraggableListBox>\n ) : (\n <ListElement\n qa={qa || 'ListBox'}\n {...mergedListBoxProps}\n ref={listRef}\n styles={listStyles}\n aria-disabled={isDisabled || undefined}\n mods={{ sections: hasSections }}\n data-shape={shape}\n data-input-type=\"listbox\"\n style={\n shouldVirtualize\n ? {\n position: 'relative',\n height: `${rowVirtualizer.getTotalSize() + 3}px`,\n }\n : undefined\n }\n >\n {shouldVirtualize\n ? rowVirtualizer.getVirtualItems().map((virtualItem) => {\n const item = itemsArray[virtualItem.index];\n\n return (\n <Option\n key={item.key}\n size={size}\n item={item}\n state={listState}\n styles={optionStyles}\n isParentDisabled={isDisabled}\n validationState={validationState}\n focusOnHover={focusOnHover}\n isCheckable={isCheckable}\n // We don't need to measure the element here, because the height is already set by the virtualizer\n // This is a workaround to avoid glitches when selecting/deselecting items\n virtualRef={rowVirtualizer.measureElement as any}\n virtualStyle={{\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n transform: `translateY(${virtualItem.start}px)`,\n }}\n virtualIndex={virtualItem.index}\n lastFocusSourceRef={lastFocusSourceRef}\n onClick={onOptionClick}\n />\n );\n })\n : (() => {\n const renderedItems: ReactNode[] = [];\n let isFirstSection = true;\n\n for (const item of listState.collection) {\n if (item.type === 'section') {\n if (!isFirstSection) {\n renderedItems.push(\n <StyledDivider\n key={`divider-${String(item.key)}`}\n role=\"separator\"\n aria-orientation=\"horizontal\"\n />,\n );\n }\n\n renderedItems.push(\n <ListBoxSection\n key={item.key}\n item={item}\n state={listState}\n optionStyles={optionStyles}\n headingStyles={headingStyles}\n sectionStyles={sectionStyles}\n isParentDisabled={isDisabled}\n validationState={validationState}\n focusOnHover={focusOnHover}\n isCheckable={isCheckable}\n size={size}\n lastFocusSourceRef={lastFocusSourceRef}\n onClick={onOptionClick}\n />,\n );\n\n isFirstSection = false;\n } else {\n renderedItems.push(\n <Option\n key={item.key}\n size={size}\n item={item}\n state={listState}\n styles={optionStyles}\n isParentDisabled={isDisabled}\n validationState={validationState}\n focusOnHover={focusOnHover}\n isCheckable={isCheckable}\n lastFocusSourceRef={lastFocusSourceRef}\n onClick={onOptionClick}\n />,\n );\n }\n }\n\n return renderedItems;\n })()}\n </ListElement>\n )}\n </ListBoxScrollElement>\n {footer ? (\n <StyledFooter styles={footerStyles} data-size={size}>\n {footer}\n </StyledFooter>\n ) : (\n <div role=\"presentation\" />\n )}\n </ListBoxWrapperElement>\n );\n\n return wrapWithField<Omit<CubeListBoxProps<T>, 'children'>>(\n listBoxField,\n ref,\n props,\n );\n}) as unknown as (<T>(\n props: CubeListBoxProps<T> & { ref?: ForwardedRef<HTMLDivElement> },\n) => ReactElement) & {\n Item: typeof CollectionItem;\n Section: typeof BaseSection;\n};\n\nfunction Option({\n size = 'medium',\n item,\n state,\n styles,\n isParentDisabled,\n validationState,\n focusOnHover = false,\n isCheckable,\n onClick: onOptionClick,\n virtualStyle,\n virtualRef,\n virtualIndex,\n lastFocusSourceRef,\n dragState,\n dropState,\n}: {\n size?: 'small' | 'medium' | 'large';\n item: any;\n state: any;\n styles?: Styles;\n isParentDisabled?: boolean;\n validationState?: any;\n focusOnHover?: boolean;\n isCheckable?: boolean;\n onClick?: (key: Key) => void;\n /** Inline style applied when virtualized (absolute positioning etc.) */\n virtualStyle?: CSSProperties;\n /** Ref callback from react-virtual to measure row height */\n virtualRef?: (element: HTMLElement | null) => void;\n /** Virtual index from react-virtual for data-index attribute */\n virtualIndex?: number;\n /** Ref to track the source of focus changes */\n lastFocusSourceRef?: MutableRefObject<'keyboard' | 'mouse' | 'other'>;\n /** Drag state from DraggableCollection. When provided, enables drag-and-drop. */\n dragState?: DraggableCollectionState;\n /** Drop state from DraggableCollection. When provided, renders drop indicators. */\n dropState?: DroppableCollectionState;\n}) {\n const localRef = useRef<HTMLLIElement>(null);\n // Merge local ref with react-virtual measure ref when provided\n const combinedRef = useCombinedRefs(localRef, virtualRef);\n\n const isDisabled = isParentDisabled || state.disabledKeys.has(item.key);\n const isSelected = state.selectionManager.isSelected(item.key);\n const isFocused = state.selectionManager.focusedKey === item.key;\n\n // Drag-and-drop support — only enable when both states are provided\n const isDraggable = !!dragState && !!dropState;\n\n // useDraggableItem must be called unconditionally (Rules of Hooks).\n // When dragState is undefined, we pass a minimal mock state to satisfy the hook.\n const mockDragState = useMemo(\n () => createMockDragState(state.collection, state.selectionManager),\n [state.collection, state.selectionManager],\n );\n\n const dragResult = useDraggableItem(\n { key: item.key },\n dragState ?? mockDragState,\n );\n const effectiveDragProps = isDraggable ? dragResult.dragProps : {};\n const isDragging = isDraggable && dragResult.isDragging;\n\n const { hoverProps, isHovered } = useHover({ isDisabled });\n\n const { optionProps, isPressed, labelProps, descriptionProps } = useOption(\n {\n key: item.key,\n isDisabled,\n isSelected,\n shouldSelectOnPressUp: true,\n shouldFocusOnHover: focusOnHover,\n },\n state,\n combinedRef,\n );\n\n // Filter out service props - all remaining props can be passed to Item\n const filteredItemProps = filterCollectionItemProps(item.props);\n\n // Determine icon: drag handle > checkbox > user icon > default\n const effectiveIcon = useMemo(() => {\n if (isDraggable) {\n if (!filteredItemProps.icon || isHovered) {\n return <GripVerticalIcon size={14} />;\n }\n }\n\n if (\n !isCheckable ||\n state.selectionManager.selectionMode !== 'multiple' ||\n filteredItemProps.icon\n ) {\n return (\n filteredItemProps.icon ??\n (state.selectionManager.selectionMode !== 'multiple' ? null : undefined)\n );\n }\n\n return renderCheckboxIcon({\n isSelected,\n isDisabled,\n isFocused,\n isHovered,\n validationState,\n });\n }, [\n isDraggable,\n isCheckable,\n state.selectionManager.selectionMode,\n isSelected,\n isDisabled,\n isFocused,\n isHovered,\n validationState,\n filteredItemProps.icon,\n ]);\n\n // Side-effects layered on top of React Aria's own onClick. The underlying\n // React Aria onClick is already chained via mergeProps below, so this handler\n // must NOT call optionProps.onClick again — re-invoking it would trigger\n // usePress's virtual-click branch and double-fire onPress (and toggle\n // selection twice in multiple mode).\n const handleOptionExtras = (e: MouseEvent) => {\n if (lastFocusSourceRef) {\n lastFocusSourceRef.current = 'mouse';\n }\n\n state.selectionManager.setFocusedKey(item.key);\n\n if (!onOptionClick) {\n return;\n }\n\n // In checkable multiple mode, suppress the callback when the click landed\n // inside the checkbox wrapper — that area is reserved for toggle-only\n // behaviour (React Aria still handles the toggle via the chained onClick).\n if (isCheckable && state.selectionManager.selectionMode === 'multiple') {\n const clickTarget = e.target as HTMLElement;\n const checkboxElement = localRef.current?.querySelector(\n '[data-element=\"CheckboxWrapper\"]',\n );\n\n if (\n checkboxElement &&\n (checkboxElement === clickTarget ||\n checkboxElement.contains(clickTarget))\n ) {\n return;\n }\n }\n\n onOptionClick(item.key);\n };\n\n // Filter out React Aria props that shouldn't reach the DOM\n const {\n onKeyDown,\n onKeyUp,\n tabIndex,\n 'aria-selected': ariaSelected,\n 'aria-disabled': ariaDisabled,\n role,\n ...filteredOptionProps\n } = optionProps;\n\n const theme =\n { valid: 'success', invalid: 'danger' }[validationState] || 'default';\n\n const listBoxItem = (\n <ListBoxItem\n ref={combinedRef}\n id={`ListBoxItem-${String(item.key)}`}\n data-key={String(item.key)}\n {...mergeProps(\n filteredOptionProps,\n hoverProps,\n filteredItemProps,\n {\n onClick: handleOptionExtras,\n onKeyDown,\n onKeyUp,\n tabIndex,\n 'aria-selected': ariaSelected,\n 'aria-disabled': ariaDisabled,\n role,\n },\n effectiveDragProps,\n )}\n theme={theme}\n style={virtualStyle}\n data-size={size}\n data-index={virtualIndex}\n size={size}\n display={isDraggable ? 'grid' : undefined}\n isSelected={isSelected}\n isDisabled={isDisabled}\n icon={effectiveIcon}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n styles={mergeStyles(styles, filteredItemProps.styles)}\n defaultTooltipPlacement=\"right\"\n mods={{\n listboxitem: true,\n focused: isFocused,\n pressed: isPressed,\n dragging: isDragging,\n draggable: isDraggable,\n gripIcon: isDraggable && (!filteredItemProps.icon || isHovered),\n valid: isSelected && validationState === 'valid',\n invalid: isSelected && validationState === 'invalid',\n checkable: isCheckable,\n hovered: isHovered,\n all: false, // This will be set to true for SelectAllOption\n }}\n >\n {item.rendered}\n </ListBoxItem>\n );\n\n if (!isDraggable || !dropState) {\n return listBoxItem;\n }\n\n return (\n <>\n <ListBoxDropIndicator\n target={{ type: 'item', key: item.key, dropPosition: 'before' }}\n dropState={dropState}\n />\n {listBoxItem}\n <ListBoxDropIndicator\n target={{ type: 'item', key: item.key, dropPosition: 'after' }}\n dropState={dropState}\n />\n </>\n );\n}\n\n// =============================================================================\n// Drop Indicator for DnD reordering\n// =============================================================================\n\nfunction ListBoxDropIndicator({\n target,\n dropState,\n}: {\n target: DropTarget;\n dropState: DroppableCollectionState;\n}) {\n const ref = useRef<HTMLLIElement>(null);\n const { dropIndicatorProps, isHidden, isDropTarget } = useDropIndicator(\n { target },\n dropState,\n ref,\n );\n\n if (isHidden) {\n return null;\n }\n\n return (\n <ListBoxDropIndicatorElement\n ref={ref}\n role=\"option\"\n {...dropIndicatorProps}\n mods={{ 'drop-target': isDropTarget }}\n >\n <div data-element=\"Indicator\" />\n </ListBoxDropIndicatorElement>\n );\n}\n\ninterface ListBoxSectionProps<T> {\n item: any;\n state: any;\n optionStyles?: Styles;\n headingStyles?: Styles;\n sectionStyles?: Styles;\n isParentDisabled?: boolean;\n validationState?: any;\n focusOnHover?: boolean;\n isCheckable?: boolean;\n onClick?: (key: Key) => void;\n size?: 'small' | 'medium' | 'large';\n lastFocusSourceRef?: MutableRefObject<'keyboard' | 'mouse' | 'other'>;\n}\n\nfunction ListBoxSection<T>(props: ListBoxSectionProps<T>) {\n const {\n item,\n state,\n optionStyles,\n headingStyles,\n sectionStyles,\n isParentDisabled,\n validationState,\n focusOnHover,\n isCheckable,\n onClick: onOptionClick,\n lastFocusSourceRef,\n } = props;\n const heading = item.rendered;\n\n const { itemProps, headingProps, groupProps } = useListBoxSection({\n heading,\n 'aria-label': item['aria-label'],\n });\n\n return (\n <SectionWrapperElement {...itemProps} styles={sectionStyles}>\n {heading && (\n <StyledSectionHeading\n {...headingProps}\n size={props.size}\n styles={headingStyles}\n >\n {heading}\n </StyledSectionHeading>\n )}\n <SectionListElement {...groupProps}>\n {[...item.childNodes]\n .filter((node: any) => state.collection.getItem(node.key))\n .map((node: any) => (\n <Option\n key={node.key}\n size={props.size}\n item={node}\n state={state}\n styles={optionStyles}\n isParentDisabled={isParentDisabled}\n validationState={validationState}\n focusOnHover={focusOnHover}\n isCheckable={isCheckable}\n lastFocusSourceRef={lastFocusSourceRef}\n onClick={onOptionClick}\n />\n ))}\n </SectionListElement>\n </SectionWrapperElement>\n );\n}\n\ntype SectionComponent = typeof BaseSection;\n\nconst ListBoxSectionComponent = Object.assign(BaseSection, {\n displayName: 'Section',\n}) as SectionComponent;\n\nListBox.Item = CollectionItem;\n\nListBox.Section = ListBoxSectionComponent;\n\nObject.defineProperty(ListBox, 'cubeInputType', {\n value: 'ListBox',\n enumerable: false,\n configurable: false,\n});\n"],"mappings":"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"}
1
+ {"version":3,"file":"ListBox.js","names":["Item","useHover","mergeProps","useFocus","BaseSection","CollectionItem"],"sources":["../../../../src/components/fields/ListBox/ListBox.tsx"],"sourcesContent":["import { useHover } from '@react-aria/interactions';\nimport { IconMinus } from '@tabler/icons-react';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport {\n BASE_STYLES,\n BasePropsWithoutChildren,\n COLOR_STYLES,\n mergeStyles,\n OUTER_STYLES,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport {\n CSSProperties,\n ForwardedRef,\n forwardRef,\n MutableRefObject,\n ReactElement,\n ReactNode,\n RefObject,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport {\n AriaListBoxProps,\n DropTarget,\n useDraggableItem,\n useDropIndicator,\n useKeyboard,\n useListBox,\n useListBoxSection,\n useOption,\n} from 'react-aria';\nimport {\n Section as BaseSection,\n DraggableCollectionState,\n DroppableCollectionState,\n useListState,\n} from 'react-stately';\n\nimport { useWarn } from '../../../_internal/hooks/use-warn';\nimport { CheckIcon, GripVerticalIcon } from '../../../icons';\nimport { Icon } from '../../../icons/index';\nimport { useProviderProps } from '../../../provider';\nimport { SIZE_NAME_TO_KEY, SIZES } from '../../../tokens';\nimport { mergeProps, useCombinedRefs } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport { extractStyles } from '../../../utils/styles';\n// Import Menu styled components for header and footer\nimport {\n StyledDivider,\n StyledFooter,\n StyledHeader,\n StyledSectionHeading,\n} from '../../actions/Menu/styled';\nimport {\n CollectionItem,\n CubeCollectionItemProps,\n filterCollectionItemProps,\n} from '../../CollectionItem';\nimport { Item } from '../../content/Item/Item';\nimport { useFieldProps, useFormProps, wrapWithField } from '../../form';\nimport { createMockDragState } from '../../shared/DraggableCollection';\n\nimport { DraggableListBox } from './DraggableListBox';\n\nimport type { CollectionBase, Key } from '@react-types/shared';\nimport type { FieldBaseProps } from '../../../shared';\n\ntype FirstArg<F> = F extends (...args: infer A) => any ? A[0] : never;\n\nconst ListBoxWrapperElement = tasty({\n qa: 'ListBox',\n styles: {\n display: 'grid',\n gridColumns: '1sf',\n gridRows: 'max-content max-content max-content 1sf max-content',\n flow: 'column',\n gap: 0,\n position: 'relative',\n radius: {\n '': '1cr',\n '[data-shape=\"popover\"]': '(1cr - 1bw)',\n '[data-shape=\"plain\"]': '0',\n },\n color: '#dark-02',\n transition: 'theme',\n outline: {\n '': '#purple-03.0',\n 'invalid & focused': '#danger.50',\n focused: '#purple-03',\n },\n border: {\n '': true,\n focused: '#primary-text',\n valid: '#success-text.50',\n invalid: '#danger-text.50',\n disabled: true,\n '[data-shape=\"plain\"] | [data-shape=\"popover\"] | searchable': false,\n },\n },\n});\n\nconst ListElement = tasty({\n as: 'ul',\n styles: {\n display: 'block',\n padding: 0,\n listStyle: 'none',\n boxSizing: 'border-box',\n margin: {\n '': '.5x .5x 0 .5x',\n '[data-shape=\"plain\"]': '0',\n },\n height: 'max-content',\n },\n});\n\n// NEW: dedicated scroll container for ListBox\nconst ListBoxScrollElement = tasty({\n as: 'div',\n styles: {\n display: 'grid',\n gridColumns: '1sf',\n gridRows: '1sf',\n overflow: 'auto',\n scrollbar: 'styled',\n },\n});\n\n// Create an extended Item for ListBox options with 'all' modifier support\nconst ListBoxItem = tasty(Item, {\n as: 'li',\n disableActionsFocus: true,\n styles: {\n margin: {\n '': '0 0 1bw 0',\n ':last-of-type': '0',\n 'draggable & :last-of-type': '0 0 .5x 0',\n all: '.5x',\n },\n Icon: {\n cursor: {\n draggable: 'grab',\n },\n opacity: {\n gripIcon: '.4',\n 'gripIcon & hovered': '1',\n },\n transition: {\n draggable: 'opacity',\n },\n },\n },\n});\n\n// Horizontal drop indicator for DnD reordering\nconst ListBoxDropIndicatorElement = tasty({\n as: 'li',\n styles: {\n zIndex: 10,\n position: 'relative',\n pointerEvents: 'none',\n height: 0,\n opacity: {\n '': 0,\n 'drop-target': 1,\n },\n\n Indicator: {\n $: '>',\n position: 'absolute',\n left: '.5x',\n right: '.5x',\n top: '-1px',\n height: '2px',\n fill: '#primary',\n radius: 'round',\n },\n },\n});\n\nconst SectionWrapperElement = tasty({\n as: 'li',\n styles: {\n display: 'block',\n padding: {\n '': 0,\n ':last-of-type': '0 0 .5x 0',\n },\n },\n});\n\nconst SectionListElement = tasty({\n qa: 'ListBoxSectionList',\n as: 'ul',\n styles: {\n display: 'flex',\n gap: '0',\n flow: 'column',\n margin: '0',\n padding: '0',\n listStyle: 'none',\n },\n});\n\n// Checkbox component for multiple selection options\nconst ListBoxCheckbox = tasty({\n as: 'div',\n styles: {\n display: 'grid',\n placeItems: 'center',\n radius: '.5r',\n width: '(2x - 2bw)',\n height: '(2x - 2bw)',\n flexShrink: 0,\n transition: 'theme',\n opacity: {\n '': 0,\n 'selected | indeterminate | hovered | focused': 1,\n },\n fill: {\n '': '#surface',\n 'selected | indeterminate': '#primary',\n 'invalid & !(selected | indeterminate)': '#surface',\n 'invalid & (selected | indeterminate)': '#danger',\n disabled: '#dark.12',\n },\n color: {\n '': '#clear',\n 'selected | indeterminate': '#white',\n },\n border: {\n '': '#dark.30',\n invalid: '#danger',\n 'disabled | ((selected | indeterminate) & !invalid)': '#clear',\n },\n },\n});\n\nconst ListBoxCheckboxWrapper = tasty({\n as: 'div',\n styles: {\n display: 'grid',\n placeItems: 'center',\n placeContent: 'center',\n cursor: '$pointer',\n placeSelf: 'stretch',\n },\n});\n\nfunction renderCheckboxIcon({\n isSelected,\n isDisabled,\n isFocused,\n isHovered,\n validationState,\n}: {\n isSelected: boolean;\n isDisabled: boolean;\n isFocused: boolean;\n isHovered: boolean;\n validationState?: string;\n}) {\n const mods = {\n selected: isSelected,\n disabled: isDisabled,\n focused: isFocused,\n hovered: isHovered,\n invalid: validationState === 'invalid',\n };\n\n return (\n <ListBoxCheckboxWrapper data-element=\"CheckboxWrapper\" mods={mods}>\n <ListBoxCheckbox data-element=\"Checkbox\" mods={mods}>\n <CheckIcon size={12} stroke={3} />\n </ListBoxCheckbox>\n </ListBoxCheckboxWrapper>\n );\n}\n\nexport interface CubeListBoxProps<T>\n extends AriaListBoxProps<T>,\n CollectionBase<T>,\n FieldBaseProps,\n BasePropsWithoutChildren {\n /** Custom styles for the list container */\n listStyles?: Styles;\n /** Custom styles for individual options */\n optionStyles?: Styles;\n /**\n * Substring to highlight within each option's (text) children. Typically the\n * current search query. Matching is case-insensitive.\n */\n optionHighlight?: string;\n /** Custom styles for section containers */\n sectionStyles?: Styles;\n /** Custom styles for section headings */\n headingStyles?: Styles;\n /** Whether the ListBox is disabled */\n isDisabled?: boolean;\n /** The selected key in controlled single selection mode */\n selectedKey?: Key | null;\n /** The selected keys in controlled multiple selection mode. Use \"all\" to select all items or an array of keys */\n selectedKeys?: 'all' | Key[];\n /** The default selected key in uncontrolled single selection mode */\n defaultSelectedKey?: Key | null;\n /** The default selected keys in uncontrolled multiple selection mode. Use \"all\" to select all items or an array of keys */\n defaultSelectedKeys?: 'all' | Key[];\n /** Callback fired when selection changes */\n onSelectionChange?: (key: Key | null | 'all' | Key[]) => void;\n /** The selection mode of the ListBox */\n selectionMode?: 'single' | 'multiple';\n /** Ref for accessing the list DOM element */\n listRef?: RefObject<HTMLUListElement | null>;\n /** Whether to disallow empty selection */\n disallowEmptySelection?: boolean;\n /** Whether to wrap focus when reaching the end of the list */\n shouldFocusWrap?: boolean;\n /**\n * Ref to access the internal ListState instance.\n * This allows parent components to access selection state and other list functionality.\n */\n stateRef?: RefObject<any | null>;\n\n /**\n * Whether moving the pointer over an option will move DOM focus to that option.\n * Set to false for components that keep DOM focus outside (e.g. searchable FilterListBox).\n * Defaults to true.\n */\n focusOnHover?: boolean;\n /** Custom header content displayed above the list */\n header?: ReactNode;\n /** Custom footer content displayed below the list */\n footer?: ReactNode;\n /** Custom styles for the header */\n headerStyles?: Styles;\n /** Custom styles for the footer */\n footerStyles?: Styles;\n /** Additional modifiers for styling the ListBox */\n mods?: Record<string, boolean>;\n /** Size variant of the ListBox */\n size?: 'small' | 'medium' | 'large';\n\n /**\n * When `true`, clicking an already-selected item keeps it selected instead of toggling it off.\n * Useful when embedding ListBox inside components like ComboBox.\n */\n disableSelectionToggle?: boolean;\n\n /**\n * Whether to use virtual focus for keyboard navigation.\n * When true, DOM focus stays outside individual option elements (useful for searchable lists).\n * Defaults to false for backward compatibility.\n */\n shouldUseVirtualFocus?: boolean;\n\n /**\n * Callback fired when the user presses Escape key.\n * When provided, this prevents React Aria's default Escape behavior (selection reset).\n */\n onEscape?: () => void;\n\n /**\n * Whether to show checkboxes for multiple selection mode.\n * This adds a checkbox icon to the left of each option.\n */\n isCheckable?: boolean;\n\n /**\n * Callback fired when an option is clicked but not on the checkbox area.\n * Used by FilterPicker to close the popover on non-checkbox clicks.\n */\n onOptionClick?: (key: Key) => void;\n\n /**\n * Whether to show the \"Select All\" option in multiple selection mode.\n * This adds a select all option to the header that allows selecting/deselecting all items.\n */\n showSelectAll?: boolean;\n\n /**\n * Label for the \"Select All\" option. Defaults to \"Select All\".\n */\n selectAllLabel?: ReactNode;\n\n /**\n * Props to apply to the \"Select All\" option.\n */\n allValueProps?: Partial<CubeCollectionItemProps<T>>;\n\n /**\n * Filter function to apply to the collection nodes.\n * Takes an iterable of nodes and returns a filtered iterable.\n * Useful for implementing search/filter functionality.\n */\n filter?: (nodes: Iterable<any>) => Iterable<any>;\n\n /**\n * Label to display when the list is empty (no items available).\n * Defaults to \"No items\".\n */\n emptyLabel?: ReactNode;\n\n /**\n * Visual shape of the ListBox styling.\n * - `card` (default): Standard card styling with border and margin\n * - `plain`: No border, no margin, no radius - suitable for embedded use\n * - `popover`: No border, but keeps margin and radius - suitable for overlay use\n * Defaults to 'card'.\n */\n shape?: 'card' | 'plain' | 'popover';\n\n /**\n * Enable drag-and-drop reordering of list items.\n * When enabled, virtualization is disabled and each item gets a drag handle.\n * @default false\n */\n isReorderable?: boolean;\n\n /**\n * Callback when items are reordered via drag-and-drop.\n * Called with the new array of item keys in their new order.\n */\n onReorder?: (newOrder: string[]) => void;\n}\n\nconst PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];\n\nconst SelectAllOption = ({\n label = 'Select All',\n isSelected,\n isIndeterminate,\n isDisabled,\n isCheckable,\n size = 'medium',\n state,\n lastFocusSourceRef,\n onClick,\n allValueProps = {},\n}: {\n label?: ReactNode;\n isSelected: boolean;\n isIndeterminate: boolean;\n isDisabled?: boolean;\n isCheckable?: boolean;\n size?: 'small' | 'medium' | 'large';\n state: any;\n lastFocusSourceRef: MutableRefObject<'keyboard' | 'mouse' | 'other'>;\n onClick: (propagate?: boolean) => void;\n allValueProps?: Partial<CubeCollectionItemProps<any>>;\n}) => {\n const { hoverProps, isHovered } = useHover({ isDisabled });\n\n const markIcon = isIndeterminate ? (\n <Icon size={12} stroke={3}>\n <IconMinus />\n </Icon>\n ) : (\n <CheckIcon size={12} stroke={3} />\n );\n\n const localRef = useRef<HTMLLIElement>(null);\n\n // Create checkbox icon for select all option\n const checkboxIcon = useMemo(() => {\n if (!isCheckable) {\n return null;\n }\n\n return (\n <ListBoxCheckboxWrapper\n data-element=\"CheckboxWrapper\"\n mods={{\n selected: isSelected,\n disabled: isDisabled,\n hovered: isHovered,\n indeterminate: isIndeterminate,\n }}\n >\n <ListBoxCheckbox\n data-element=\"Checkbox\"\n mods={{\n selected: isSelected,\n disabled: isDisabled,\n hovered: isHovered,\n indeterminate: isIndeterminate,\n }}\n >\n {(isIndeterminate || isSelected) && markIcon}\n </ListBoxCheckbox>\n </ListBoxCheckboxWrapper>\n );\n }, [\n isCheckable,\n isSelected,\n isDisabled,\n isHovered,\n isIndeterminate,\n markIcon,\n ]);\n\n const handleOptionClick = (e) => {\n // Mark focus changes from mouse clicks\n if (lastFocusSourceRef) {\n lastFocusSourceRef.current = 'mouse';\n }\n\n // If there's an onOptionClick callback and this is checkable in multiple mode,\n // we need to distinguish between checkbox and content clicks\n if (state.selectionManager.selectionMode === 'multiple') {\n // Check if the click target is within the checkbox area\n const clickTarget = e.target as HTMLElement;\n const checkboxElement = localRef.current?.querySelector(\n '[data-element=\"CheckboxWrapper\"]',\n );\n\n if (\n checkboxElement &&\n (checkboxElement === clickTarget ||\n checkboxElement.contains(clickTarget))\n ) {\n onClick?.(false);\n } else {\n // Then call the callback (which will close the popover in FilterPicker)\n onClick?.(true);\n }\n } else {\n onClick?.(true);\n }\n };\n\n return (\n <>\n <ListBoxItem\n ref={localRef}\n data-size={size}\n size={size}\n role=\"option\"\n aria-selected={isSelected}\n isSelected={isSelected}\n isDisabled={isDisabled}\n icon={checkboxIcon}\n mods={{\n listboxitem: true,\n disabled: isDisabled,\n checkable: isCheckable,\n hovered: isHovered,\n indeterminate: isIndeterminate,\n all: true, // Important: this preserves the 'all' modifier\n }}\n {...mergeProps(hoverProps, allValueProps, {\n onClick: handleOptionClick,\n })}\n >\n {label}\n </ListBoxItem>\n <StyledDivider />\n </>\n );\n};\n\nexport const ListBox = forwardRef(function ListBox<T extends object>(\n props: CubeListBoxProps<T>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n props = useProviderProps(props);\n props = useFormProps(props);\n props = useFieldProps(props, {\n valuePropsMapper: ({ value, onChange }) => {\n const fieldProps: any = {};\n\n if (props.selectionMode === 'multiple') {\n fieldProps.selectedKeys = value || [];\n } else {\n fieldProps.selectedKey = value ?? null;\n }\n\n fieldProps.onSelectionChange = (key: any) => {\n if (props.selectionMode === 'multiple') {\n onChange(key ? (Array.isArray(key) ? key : [key]) : []);\n } else {\n onChange(Array.isArray(key) ? key[0] : key);\n }\n };\n\n return fieldProps;\n },\n });\n\n let {\n qa,\n label,\n extra,\n id,\n labelStyles,\n isRequired,\n necessityIndicator,\n validationState,\n isDisabled,\n listStyles,\n optionStyles,\n optionHighlight,\n sectionStyles,\n headingStyles,\n listRef,\n message,\n description,\n styles,\n mods: externalMods,\n size = 'medium',\n labelSuffix,\n selectedKey,\n defaultSelectedKey,\n selectedKeys,\n defaultSelectedKeys,\n shouldUseVirtualFocus,\n onSelectionChange,\n disableSelectionToggle = false,\n stateRef,\n focusOnHover,\n header,\n footer,\n headerStyles,\n footerStyles,\n onEscape,\n isCheckable,\n onOptionClick,\n showSelectAll,\n selectAllLabel,\n allValueProps,\n filter,\n emptyLabel = 'No items',\n shape = 'card',\n isReorderable = false,\n onReorder,\n form,\n ...otherProps\n } = props;\n\n const [, forceUpdate] = useState({});\n const lastSelectedKeyRef = useRef<Key | null>(null);\n\n // Wrap onSelectionChange to prevent selection when disabled and handle React Aria's Set format\n const externalSelectionHandler = onSelectionChange || (props as any).onChange;\n\n const wrappedOnSelectionChange = useMemo(() => {\n if (!externalSelectionHandler) return undefined;\n\n return (keys: any) => {\n // Don't allow selection changes when disabled\n if (isDisabled) {\n return;\n }\n\n // React Aria always passes a Set for selection changes\n // Handle the special \"all\" case and convert to our public API format\n if (keys === 'all') {\n externalSelectionHandler('all');\n } else if (keys instanceof Set) {\n if (keys.size === 0) {\n if (disableSelectionToggle && props.selectionMode === 'single') {\n const prevKey = lastSelectedKeyRef.current;\n if (prevKey != null) {\n externalSelectionHandler(prevKey);\n return;\n }\n }\n externalSelectionHandler(\n props.selectionMode === 'multiple' ? [] : null,\n );\n } else if (props.selectionMode === 'multiple') {\n externalSelectionHandler(Array.from(keys));\n } else {\n const key = Array.from(keys)[0];\n lastSelectedKeyRef.current = key ?? null;\n externalSelectionHandler(key);\n }\n } else {\n lastSelectedKeyRef.current = keys as Key | null;\n externalSelectionHandler(keys);\n }\n };\n }, [\n externalSelectionHandler,\n isDisabled,\n props.selectionMode,\n disableSelectionToggle,\n ]);\n\n // Prepare props for useListState with correct selection props\n const listStateProps: FirstArg<typeof useListState> = {\n ...props,\n onSelectionChange: wrappedOnSelectionChange,\n isDisabled,\n disabledBehavior: 'all',\n filter,\n selectionMode: props.selectionMode || 'single',\n };\n\n // Set selection props based on mode\n if (listStateProps.selectionMode === 'multiple') {\n if (selectedKeys !== undefined) {\n // Handle \"all\" selection by passing it directly to React Aria\n listStateProps.selectedKeys =\n selectedKeys === 'all' ? 'all' : new Set(selectedKeys as Key[]);\n }\n if (defaultSelectedKeys !== undefined) {\n // Handle \"all\" default selection\n listStateProps.defaultSelectedKeys =\n defaultSelectedKeys === 'all'\n ? 'all'\n : new Set(defaultSelectedKeys as Key[]);\n }\n // Remove single-selection props if any\n delete listStateProps.selectedKey;\n delete listStateProps.defaultSelectedKey;\n } else {\n // For single-selection we convert the scalar key props that our public\n // API exposes into the Set-based props that React Stately expects.\n if (selectedKey !== undefined) {\n listStateProps.selectedKeys =\n selectedKey == null ? new Set() : new Set([selectedKey]);\n }\n\n if (defaultSelectedKey !== undefined) {\n listStateProps.defaultSelectedKeys =\n defaultSelectedKey == null ? new Set() : new Set([defaultSelectedKey]);\n }\n\n // Remove the single-value props so we don't pass unsupported keys through.\n delete listStateProps.selectedKey;\n delete listStateProps.defaultSelectedKey;\n }\n\n const listState = useListState(listStateProps);\n\n useLayoutEffect(() => {\n const selected = listState.selectionManager.selectedKeys;\n if (selected && (selected as any).size > 0) {\n const first = Array.from(selected as Set<Key>)[0];\n lastSelectedKeyRef.current = first ?? null;\n }\n }, [listState.selectionManager.selectedKeys]);\n\n // Calculate select all state for multiple selection mode\n const selectAllState = useMemo(() => {\n // Select-all only makes sense for multiple selection mode *and* when the UI is enabled\n if (props.selectionMode !== 'multiple' || !showSelectAll) {\n return { isSelected: false, isIndeterminate: false };\n }\n\n // React Stately exposes the raw selection value which is either the string \"all\"\n // (when `selectAll(true)` was used) **or** a Set of item keys.\n const rawSelection: any = (listState.selectionManager as any).rawSelection;\n\n // Fast path – user pressed our \"Select All\" control previously.\n if (rawSelection === 'all') {\n return { isSelected: true, isIndeterminate: false };\n }\n\n const selectedKeys = listState.selectionManager.selectedKeys as Set<Key>;\n\n // When there is nothing selected, we are in a clear state\n if (selectedKeys.size === 0) {\n return { isSelected: false, isIndeterminate: false };\n }\n\n // Otherwise it must be a partial (indeterminate) selection.\n return { isSelected: false, isIndeterminate: true };\n }, [\n props.selectionMode,\n showSelectAll,\n listState.collection,\n listState.disabledKeys,\n listState.selectionManager.selectedKeys,\n listState.selectionManager.rawSelection,\n ]);\n\n // Handle select all click\n const handleSelectAllClick = (propagate?: boolean) => {\n if (isDisabled || props.selectionMode !== 'multiple') return;\n\n if (selectAllState.isSelected) {\n // All selected, deselect all\n listState.selectionManager.clearSelection();\n // Manually call the wrapped handler since React Aria might not trigger it\n wrappedOnSelectionChange?.(new Set());\n } else {\n // Some or none selected, select all\n listState.selectionManager.selectAll(true);\n // Manually call the wrapped handler since React Aria might not trigger it\n wrappedOnSelectionChange?.('all');\n forceUpdate({});\n }\n\n if (propagate && !selectAllState.isSelected) {\n onOptionClick?.('__ALL__');\n }\n };\n\n // Track whether the last focus change was due to keyboard navigation\n const lastFocusSourceRef = useRef<'keyboard' | 'mouse' | 'other'>('other');\n\n // Expose the list state instance via the provided ref (if any)\n if (stateRef) {\n stateRef.current = {\n ...listState,\n lastFocusSourceRef,\n };\n }\n\n // Warn if isCheckable is false in single selection mode\n useWarn(isCheckable === false && props.selectionMode === 'single', {\n key: ['listbox-checkable-single-mode'],\n args: [\n 'CubeUIKit: isCheckable=false is not recommended in single selection mode as it may confuse users about selection behavior.',\n ],\n });\n\n // Custom keyboard handling to prevent selection clearing on Escape while allowing overlay dismiss\n const { keyboardProps } = useKeyboard({\n onKeyDown: (e) => {\n // Mark focus changes from keyboard navigation\n if (\n e.key === 'ArrowDown' ||\n e.key === 'ArrowUp' ||\n e.key === 'Home' ||\n e.key === 'End' ||\n e.key === 'PageUp' ||\n e.key === 'PageDown'\n ) {\n lastFocusSourceRef.current = 'keyboard';\n }\n\n if (e.key === 'Escape' && onEscape) {\n // Don't prevent default - let the overlay system handle closing\n // But we'll call onEscape to potentially override the default selection clearing\n onEscape();\n }\n },\n });\n\n styles = extractStyles(otherProps, PROP_STYLES, styles);\n\n ref = useCombinedRefs(ref);\n listRef = useCombinedRefs(listRef);\n\n // ----- Collection and virtualization decision (must precede useListBox) -----\n const itemsArray = useMemo(\n () => [...listState.collection],\n [listState.collection],\n );\n\n const hasSections = useMemo(\n () => itemsArray.some((i) => i.type === 'section'),\n [itemsArray],\n );\n\n const shouldVirtualize = !hasSections && !isReorderable;\n\n const { listBoxProps } = useListBox(\n {\n ...props,\n id: id,\n 'aria-label': props['aria-label'] || label?.toString(),\n isDisabled,\n // Only disable isVirtualized for reorderable lists (DnD needs real DOM focus).\n // Section-based lists keep isVirtualized: true to preserve ARIA attributes.\n isVirtualized: !isReorderable,\n shouldUseVirtualFocus: shouldUseVirtualFocus ?? false,\n escapeKeyBehavior: onEscape ? 'none' : 'clearSelection',\n },\n listState,\n listRef,\n );\n\n const { isFocused, focusProps } = useFocus({ isDisabled });\n const isInvalid = validationState === 'invalid';\n\n // Use ref to ensure estimateSize always accesses current itemsArray\n const itemsArrayRef = useRef(itemsArray);\n itemsArrayRef.current = itemsArray;\n\n // Scroll container ref for virtualization\n const scrollRef = useRef<HTMLDivElement>(null);\n\n const rowVirtualizer = useVirtualizer({\n count: shouldVirtualize ? itemsArray.length : 0,\n getScrollElement: () => scrollRef.current,\n // Use the actual item key to ensure React properly reconciles DOM elements\n // when items are filtered, added, or removed. Without this, the virtualizer\n // uses index-based keys which causes DOM reuse issues and style leaking.\n getItemKey: (index: number) => {\n const item = itemsArrayRef.current[index];\n return item?.key ?? index;\n },\n estimateSize: (index: number) => {\n const currentItem: any = itemsArrayRef.current[index];\n\n if (currentItem?.props?.description) {\n return SIZES.XL + 1;\n }\n return SIZES[SIZE_NAME_TO_KEY[size] as keyof typeof SIZES] + 1;\n },\n measureElement: (el) => {\n return el.offsetHeight + 1;\n },\n overscan: 10,\n });\n\n // Trigger remeasurement when items change (for filtering scenarios)\n useEffect(() => {\n if (shouldVirtualize) {\n rowVirtualizer.measure();\n }\n }, [shouldVirtualize, itemsArray, rowVirtualizer]);\n\n // Keep focused item visible, but only for keyboard navigation\n useLayoutEffect(() => {\n const focusedKey = listState.selectionManager.focusedKey;\n if (focusedKey == null) return;\n\n // Only scroll on keyboard navigation\n if (lastFocusSourceRef.current !== 'keyboard') return;\n\n const scrollElement = scrollRef.current;\n if (!scrollElement) return;\n\n const itemElement = scrollElement.querySelector(\n `[data-key=\"${CSS.escape(String(focusedKey))}\"]`,\n ) as HTMLElement;\n if (!itemElement) return;\n\n const scrollTop = scrollElement.scrollTop;\n const viewportHeight = scrollElement.clientHeight;\n const viewportBottom = scrollTop + viewportHeight;\n\n const itemRect = itemElement.getBoundingClientRect();\n const scrollRect = scrollElement.getBoundingClientRect();\n\n // Calculate item position relative to scroll container\n const itemTop = itemRect.top - scrollRect.top + scrollTop;\n const itemBottom = itemTop + itemRect.height;\n\n // Check if the item is fully visible in the viewport\n const isAlreadyVisible =\n itemTop >= scrollTop && itemBottom <= viewportBottom;\n\n if (!isAlreadyVisible) {\n // Use scrollIntoView with block: 'nearest' to minimize scroll jumps\n itemElement.scrollIntoView({ block: 'nearest', behavior: 'auto' });\n }\n }, [listState.selectionManager.focusedKey, itemsArray]);\n\n // Merge React Aria listbox props with custom keyboard props so both sets of\n // event handlers (e.g. Arrow navigation *and* our Escape handler) are\n // preserved.\n const mergedListBoxProps = mergeProps(listBoxProps, keyboardProps);\n\n // Ordered keys for DnD reordering\n const orderedKeys = useMemo(() => {\n if (!isReorderable) {\n return [];\n }\n\n return itemsArray\n .filter((i) => i.type === 'item')\n .map((i) => String(i.key));\n }, [isReorderable, itemsArray]);\n\n const mods = useMemo(\n () => ({\n invalid: isInvalid,\n valid: validationState === 'valid',\n disabled: isDisabled,\n focused: isFocused,\n header: !!header || (showSelectAll && props.selectionMode === 'multiple'),\n footer: !!footer,\n selectAll: showSelectAll && props.selectionMode === 'multiple',\n ...externalMods,\n }),\n [\n isInvalid,\n validationState,\n isDisabled,\n isFocused,\n header,\n footer,\n showSelectAll,\n props.selectionMode,\n externalMods,\n ],\n );\n\n const listBoxField = (\n <ListBoxWrapperElement\n ref={ref}\n qa=\"ListBoxWrapper\"\n mods={mods}\n styles={styles}\n data-shape={shape}\n >\n {header ? (\n <StyledHeader styles={headerStyles} data-size={size}>\n {header}\n </StyledHeader>\n ) : (\n <div role=\"presentation\" />\n )}\n {showSelectAll && props.selectionMode === 'multiple' ? (\n <SelectAllOption\n label={selectAllLabel || 'Select All'}\n state={listState}\n lastFocusSourceRef={lastFocusSourceRef}\n isSelected={selectAllState.isSelected}\n isIndeterminate={selectAllState.isIndeterminate}\n isDisabled={isDisabled}\n isCheckable={isCheckable}\n size={size}\n allValueProps={allValueProps}\n onClick={handleSelectAllClick}\n />\n ) : (\n <>\n <div role=\"presentation\" />\n <div role=\"presentation\" />\n </>\n )}\n {/* Scroll container wrapper */}\n <ListBoxScrollElement ref={scrollRef} mods={mods} {...focusProps}>\n {listState.collection.size === 0 ? (\n <Item preset=\"t4\" color=\"#dark-03\" size={size} padding=\"(.5x - 1bw)\">\n {emptyLabel}\n </Item>\n ) : isReorderable ? (\n <DraggableListBox\n state={listState}\n listRef={listRef}\n orderedKeys={orderedKeys}\n onReorder={onReorder}\n >\n {(dragState, dropState, collectionProps) => (\n <ListElement\n qa={qa || 'ListBox'}\n {...mergeProps(mergedListBoxProps, collectionProps)}\n ref={listRef}\n styles={listStyles}\n aria-disabled={isDisabled || undefined}\n mods={{ sections: false }}\n data-shape={shape}\n data-input-type=\"listbox\"\n >\n {itemsArray\n .filter((item) => item.type === 'item')\n .map((item) => (\n <Option\n key={item.key}\n size={size}\n item={item}\n state={listState}\n styles={optionStyles}\n highlight={optionHighlight}\n isParentDisabled={isDisabled}\n validationState={validationState}\n focusOnHover={focusOnHover}\n isCheckable={isCheckable}\n lastFocusSourceRef={lastFocusSourceRef}\n dragState={dragState}\n dropState={dropState}\n onClick={onOptionClick}\n />\n ))}\n </ListElement>\n )}\n </DraggableListBox>\n ) : (\n <ListElement\n qa={qa || 'ListBox'}\n {...mergedListBoxProps}\n ref={listRef}\n styles={listStyles}\n aria-disabled={isDisabled || undefined}\n mods={{ sections: hasSections }}\n data-shape={shape}\n data-input-type=\"listbox\"\n style={\n shouldVirtualize\n ? {\n position: 'relative',\n height: `${rowVirtualizer.getTotalSize() + 3}px`,\n }\n : undefined\n }\n >\n {shouldVirtualize\n ? rowVirtualizer.getVirtualItems().map((virtualItem) => {\n const item = itemsArray[virtualItem.index];\n\n return (\n <Option\n key={item.key}\n size={size}\n item={item}\n state={listState}\n styles={optionStyles}\n highlight={optionHighlight}\n isParentDisabled={isDisabled}\n validationState={validationState}\n focusOnHover={focusOnHover}\n isCheckable={isCheckable}\n // We don't need to measure the element here, because the height is already set by the virtualizer\n // This is a workaround to avoid glitches when selecting/deselecting items\n virtualRef={rowVirtualizer.measureElement as any}\n virtualStyle={{\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n transform: `translateY(${virtualItem.start}px)`,\n }}\n virtualIndex={virtualItem.index}\n lastFocusSourceRef={lastFocusSourceRef}\n onClick={onOptionClick}\n />\n );\n })\n : (() => {\n const renderedItems: ReactNode[] = [];\n let isFirstSection = true;\n\n for (const item of listState.collection) {\n if (item.type === 'section') {\n if (!isFirstSection) {\n renderedItems.push(\n <StyledDivider\n key={`divider-${String(item.key)}`}\n role=\"separator\"\n aria-orientation=\"horizontal\"\n />,\n );\n }\n\n renderedItems.push(\n <ListBoxSection\n key={item.key}\n item={item}\n state={listState}\n optionStyles={optionStyles}\n optionHighlight={optionHighlight}\n headingStyles={headingStyles}\n sectionStyles={sectionStyles}\n isParentDisabled={isDisabled}\n validationState={validationState}\n focusOnHover={focusOnHover}\n isCheckable={isCheckable}\n size={size}\n lastFocusSourceRef={lastFocusSourceRef}\n onClick={onOptionClick}\n />,\n );\n\n isFirstSection = false;\n } else {\n renderedItems.push(\n <Option\n key={item.key}\n size={size}\n item={item}\n state={listState}\n styles={optionStyles}\n highlight={optionHighlight}\n isParentDisabled={isDisabled}\n validationState={validationState}\n focusOnHover={focusOnHover}\n isCheckable={isCheckable}\n lastFocusSourceRef={lastFocusSourceRef}\n onClick={onOptionClick}\n />,\n );\n }\n }\n\n return renderedItems;\n })()}\n </ListElement>\n )}\n </ListBoxScrollElement>\n {footer ? (\n <StyledFooter styles={footerStyles} data-size={size}>\n {footer}\n </StyledFooter>\n ) : (\n <div role=\"presentation\" />\n )}\n </ListBoxWrapperElement>\n );\n\n return wrapWithField<Omit<CubeListBoxProps<T>, 'children'>>(\n listBoxField,\n ref,\n props,\n );\n}) as unknown as (<T>(\n props: CubeListBoxProps<T> & { ref?: ForwardedRef<HTMLDivElement> },\n) => ReactElement) & {\n Item: typeof CollectionItem;\n Section: typeof BaseSection;\n};\n\nfunction Option({\n size = 'medium',\n item,\n state,\n styles,\n highlight,\n isParentDisabled,\n validationState,\n focusOnHover = false,\n isCheckable,\n onClick: onOptionClick,\n virtualStyle,\n virtualRef,\n virtualIndex,\n lastFocusSourceRef,\n dragState,\n dropState,\n}: {\n size?: 'small' | 'medium' | 'large';\n item: any;\n state: any;\n styles?: Styles;\n highlight?: string;\n isParentDisabled?: boolean;\n validationState?: any;\n focusOnHover?: boolean;\n isCheckable?: boolean;\n onClick?: (key: Key) => void;\n /** Inline style applied when virtualized (absolute positioning etc.) */\n virtualStyle?: CSSProperties;\n /** Ref callback from react-virtual to measure row height */\n virtualRef?: (element: HTMLElement | null) => void;\n /** Virtual index from react-virtual for data-index attribute */\n virtualIndex?: number;\n /** Ref to track the source of focus changes */\n lastFocusSourceRef?: MutableRefObject<'keyboard' | 'mouse' | 'other'>;\n /** Drag state from DraggableCollection. When provided, enables drag-and-drop. */\n dragState?: DraggableCollectionState;\n /** Drop state from DraggableCollection. When provided, renders drop indicators. */\n dropState?: DroppableCollectionState;\n}) {\n const localRef = useRef<HTMLLIElement>(null);\n // Merge local ref with react-virtual measure ref when provided\n const combinedRef = useCombinedRefs(localRef, virtualRef);\n\n const isDisabled = isParentDisabled || state.disabledKeys.has(item.key);\n const isSelected = state.selectionManager.isSelected(item.key);\n const isFocused = state.selectionManager.focusedKey === item.key;\n\n // Drag-and-drop support — only enable when both states are provided\n const isDraggable = !!dragState && !!dropState;\n\n // useDraggableItem must be called unconditionally (Rules of Hooks).\n // When dragState is undefined, we pass a minimal mock state to satisfy the hook.\n const mockDragState = useMemo(\n () => createMockDragState(state.collection, state.selectionManager),\n [state.collection, state.selectionManager],\n );\n\n const dragResult = useDraggableItem(\n { key: item.key },\n dragState ?? mockDragState,\n );\n const effectiveDragProps = isDraggable ? dragResult.dragProps : {};\n const isDragging = isDraggable && dragResult.isDragging;\n\n const { hoverProps, isHovered } = useHover({ isDisabled });\n\n const { optionProps, isPressed, labelProps, descriptionProps } = useOption(\n {\n key: item.key,\n isDisabled,\n isSelected,\n shouldSelectOnPressUp: true,\n shouldFocusOnHover: focusOnHover,\n },\n state,\n combinedRef,\n );\n\n // Filter out service props - all remaining props can be passed to Item\n const filteredItemProps = filterCollectionItemProps(item.props);\n\n // Determine icon: drag handle > checkbox > user icon > default\n const effectiveIcon = useMemo(() => {\n if (isDraggable) {\n if (!filteredItemProps.icon || isHovered) {\n return <GripVerticalIcon size={14} />;\n }\n }\n\n if (\n !isCheckable ||\n state.selectionManager.selectionMode !== 'multiple' ||\n filteredItemProps.icon\n ) {\n return (\n filteredItemProps.icon ??\n (state.selectionManager.selectionMode !== 'multiple' ? null : undefined)\n );\n }\n\n return renderCheckboxIcon({\n isSelected,\n isDisabled,\n isFocused,\n isHovered,\n validationState,\n });\n }, [\n isDraggable,\n isCheckable,\n state.selectionManager.selectionMode,\n isSelected,\n isDisabled,\n isFocused,\n isHovered,\n validationState,\n filteredItemProps.icon,\n ]);\n\n // Side-effects layered on top of React Aria's own onClick. The underlying\n // React Aria onClick is already chained via mergeProps below, so this handler\n // must NOT call optionProps.onClick again — re-invoking it would trigger\n // usePress's virtual-click branch and double-fire onPress (and toggle\n // selection twice in multiple mode).\n const handleOptionExtras = (e: MouseEvent) => {\n if (lastFocusSourceRef) {\n lastFocusSourceRef.current = 'mouse';\n }\n\n state.selectionManager.setFocusedKey(item.key);\n\n if (!onOptionClick) {\n return;\n }\n\n // In checkable multiple mode, suppress the callback when the click landed\n // inside the checkbox wrapper — that area is reserved for toggle-only\n // behaviour (React Aria still handles the toggle via the chained onClick).\n if (isCheckable && state.selectionManager.selectionMode === 'multiple') {\n const clickTarget = e.target as HTMLElement;\n const checkboxElement = localRef.current?.querySelector(\n '[data-element=\"CheckboxWrapper\"]',\n );\n\n if (\n checkboxElement &&\n (checkboxElement === clickTarget ||\n checkboxElement.contains(clickTarget))\n ) {\n return;\n }\n }\n\n onOptionClick(item.key);\n };\n\n // Filter out React Aria props that shouldn't reach the DOM\n const {\n onKeyDown,\n onKeyUp,\n tabIndex,\n 'aria-selected': ariaSelected,\n 'aria-disabled': ariaDisabled,\n role,\n ...filteredOptionProps\n } = optionProps;\n\n const theme =\n { valid: 'success', invalid: 'danger' }[validationState] || 'default';\n\n const listBoxItem = (\n <ListBoxItem\n ref={combinedRef}\n id={`ListBoxItem-${String(item.key)}`}\n data-key={String(item.key)}\n {...mergeProps(\n filteredOptionProps,\n hoverProps,\n filteredItemProps,\n {\n onClick: handleOptionExtras,\n onKeyDown,\n onKeyUp,\n tabIndex,\n 'aria-selected': ariaSelected,\n 'aria-disabled': ariaDisabled,\n role,\n },\n effectiveDragProps,\n )}\n theme={theme}\n style={virtualStyle}\n data-size={size}\n data-index={virtualIndex}\n size={size}\n display={isDraggable ? 'grid' : undefined}\n isSelected={isSelected}\n isDisabled={isDisabled}\n icon={effectiveIcon}\n highlight={highlight}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n styles={mergeStyles(styles, filteredItemProps.styles)}\n defaultTooltipPlacement=\"right\"\n mods={{\n listboxitem: true,\n focused: isFocused,\n pressed: isPressed,\n dragging: isDragging,\n draggable: isDraggable,\n gripIcon: isDraggable && (!filteredItemProps.icon || isHovered),\n valid: isSelected && validationState === 'valid',\n invalid: isSelected && validationState === 'invalid',\n checkable: isCheckable,\n hovered: isHovered,\n all: false, // This will be set to true for SelectAllOption\n }}\n >\n {item.rendered}\n </ListBoxItem>\n );\n\n if (!isDraggable || !dropState) {\n return listBoxItem;\n }\n\n return (\n <>\n <ListBoxDropIndicator\n target={{ type: 'item', key: item.key, dropPosition: 'before' }}\n dropState={dropState}\n />\n {listBoxItem}\n <ListBoxDropIndicator\n target={{ type: 'item', key: item.key, dropPosition: 'after' }}\n dropState={dropState}\n />\n </>\n );\n}\n\n// =============================================================================\n// Drop Indicator for DnD reordering\n// =============================================================================\n\nfunction ListBoxDropIndicator({\n target,\n dropState,\n}: {\n target: DropTarget;\n dropState: DroppableCollectionState;\n}) {\n const ref = useRef<HTMLLIElement>(null);\n const { dropIndicatorProps, isHidden, isDropTarget } = useDropIndicator(\n { target },\n dropState,\n ref,\n );\n\n if (isHidden) {\n return null;\n }\n\n return (\n <ListBoxDropIndicatorElement\n ref={ref}\n role=\"option\"\n {...dropIndicatorProps}\n mods={{ 'drop-target': isDropTarget }}\n >\n <div data-element=\"Indicator\" />\n </ListBoxDropIndicatorElement>\n );\n}\n\ninterface ListBoxSectionProps<T> {\n item: any;\n state: any;\n optionStyles?: Styles;\n optionHighlight?: string;\n headingStyles?: Styles;\n sectionStyles?: Styles;\n isParentDisabled?: boolean;\n validationState?: any;\n focusOnHover?: boolean;\n isCheckable?: boolean;\n onClick?: (key: Key) => void;\n size?: 'small' | 'medium' | 'large';\n lastFocusSourceRef?: MutableRefObject<'keyboard' | 'mouse' | 'other'>;\n}\n\nfunction ListBoxSection<T>(props: ListBoxSectionProps<T>) {\n const {\n item,\n state,\n optionStyles,\n optionHighlight,\n headingStyles,\n sectionStyles,\n isParentDisabled,\n validationState,\n focusOnHover,\n isCheckable,\n onClick: onOptionClick,\n lastFocusSourceRef,\n } = props;\n const heading = item.rendered;\n\n const { itemProps, headingProps, groupProps } = useListBoxSection({\n heading,\n 'aria-label': item['aria-label'],\n });\n\n return (\n <SectionWrapperElement {...itemProps} styles={sectionStyles}>\n {heading && (\n <StyledSectionHeading\n {...headingProps}\n size={props.size}\n styles={headingStyles}\n >\n {heading}\n </StyledSectionHeading>\n )}\n <SectionListElement {...groupProps}>\n {[...item.childNodes]\n .filter((node: any) => state.collection.getItem(node.key))\n .map((node: any) => (\n <Option\n key={node.key}\n size={props.size}\n item={node}\n state={state}\n styles={optionStyles}\n highlight={optionHighlight}\n isParentDisabled={isParentDisabled}\n validationState={validationState}\n focusOnHover={focusOnHover}\n isCheckable={isCheckable}\n lastFocusSourceRef={lastFocusSourceRef}\n onClick={onOptionClick}\n />\n ))}\n </SectionListElement>\n </SectionWrapperElement>\n );\n}\n\ntype SectionComponent = typeof BaseSection;\n\nconst ListBoxSectionComponent = Object.assign(BaseSection, {\n displayName: 'Section',\n}) as SectionComponent;\n\nListBox.Item = CollectionItem;\n\nListBox.Section = ListBoxSectionComponent;\n\nObject.defineProperty(ListBox, 'cubeInputType', {\n value: 'ListBox',\n enumerable: false,\n configurable: false,\n});\n"],"mappings":"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"}
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
2
2
  import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
3
3
  import { DisplayTransition } from "../../helpers/DisplayTransition/DisplayTransition.js";
4
4
  import { Portal } from "../../portal/Portal.js";
@@ -59,7 +59,7 @@ const ListBoxPopoverElement = tasty({
59
59
  }
60
60
  });
61
61
  const ListBoxPopover = function ListBoxPopover(props) {
62
- const { isOpen, triggerRef, popoverRef, listBoxRef, direction, shouldFlip, overlayOffset, containerPadding, comboBoxWidth, listBoxId, overlayStyles, listBoxStyles, optionStyles, sectionStyles, headingStyles, selectedKey, isDisabled, disabledKeys, items, children, listStateRef, onSelectionChange, onClose, label, ariaLabel, compositeFocusProps, filter, size = "medium" } = props;
62
+ const { isOpen, triggerRef, popoverRef, listBoxRef, direction, shouldFlip, overlayOffset, containerPadding, comboBoxWidth, listBoxId, overlayStyles, listBoxStyles, optionStyles, optionHighlight, sectionStyles, headingStyles, selectedKey, isDisabled, disabledKeys, items, children, listStateRef, onSelectionChange, onClose, label, ariaLabel, compositeFocusProps, filter, size = "medium" } = props;
63
63
  const mergedPopoverRef = popoverRef;
64
64
  const { overlayProps: overlayPositionProps, placement } = useOverlayPosition({
65
65
  targetRef: triggerRef,
@@ -121,6 +121,7 @@ const ListBoxPopover = function ListBoxPopover(props) {
121
121
  filter,
122
122
  styles: listBoxStyles,
123
123
  optionStyles,
124
+ optionHighlight,
124
125
  sectionStyles,
125
126
  headingStyles,
126
127
  stateRef: listStateRef,
@@ -1 +1 @@
1
- {"version":3,"file":"ListBoxPopover.js","names":["mergeProps"],"sources":["../../../../src/components/fields/ListBoxPopover/ListBoxPopover.tsx"],"sourcesContent":["import { Key } from '@react-types/shared';\nimport { Styles, tasty } from '@tenphi/tasty';\nimport React, { ReactNode, RefObject } from 'react';\nimport { useOverlay, useOverlayPosition } from 'react-aria';\n\nimport { mergeProps } from '../../../utils/react';\nimport { DisplayTransition } from '../../helpers';\nimport { Portal } from '../../portal';\nimport { ListBox } from '../ListBox/ListBox';\n\nexport interface ListBoxPopoverProps {\n isOpen: boolean;\n triggerRef: RefObject<HTMLElement>;\n popoverRef: RefObject<HTMLDivElement>;\n listBoxRef: RefObject<HTMLDivElement>;\n direction: 'bottom' | 'top';\n shouldFlip: boolean;\n overlayOffset: number;\n containerPadding: number;\n /** Min width (px) for the overlay; usually the trigger's width. */\n comboBoxWidth?: number;\n /** Stable id used for the ListBox element and aria-controls wiring. */\n listBoxId: string;\n overlayStyles?: Styles;\n listBoxStyles?: Styles;\n optionStyles?: Styles;\n sectionStyles?: Styles;\n headingStyles?: Styles;\n selectedKey?: Key | null;\n isDisabled?: boolean;\n disabledKeys?: Iterable<Key>;\n items?: Iterable<any>;\n children: ReactNode;\n /** Ref through which the ListBox exposes its internal list state. */\n listStateRef: RefObject<any>;\n onSelectionChange: (selection: Key | Key[] | null) => void;\n onClose: () => void;\n label?: ReactNode;\n ariaLabel?: string;\n compositeFocusProps: {\n onFocus: (e: React.FocusEvent) => void;\n onBlur: (e: React.FocusEvent) => void;\n };\n /** Collection node filter applied to the ListBox. */\n filter?: (nodes: Iterable<any>) => Iterable<any>;\n size?: 'small' | 'medium' | 'large' | (string & {});\n}\n\nconst ListBoxPopoverWrapper = tasty({\n qa: 'ComboBoxOverlayWrapper',\n styles: {\n position: 'absolute',\n zIndex: 1000,\n },\n});\n\nconst ListBoxPopoverElement = tasty({\n qa: 'ComboBoxOverlay',\n styles: {\n display: 'grid',\n gridRows: '1sf',\n gridColumns: '1sf',\n width: '$overlay-min-width max-content 50vw',\n height: 'initial max-content (50vh - 5x)',\n overflow: 'auto',\n fill: '#surface',\n radius: '1cr',\n shadow: true,\n padding: '0',\n border: '#border',\n hide: {\n '': false,\n hidden: true,\n },\n boxSizing: 'border-box',\n transition:\n 'translate $transition ease-out, scale $transition ease-out, theme $transition ease-out',\n translate: {\n '': '0 0',\n 'open & [data-placement=\"top\"]': '0 0',\n '!open & [data-placement=\"top\"]': '0 1x',\n 'open & ([data-placement=\"bottom\"] | ![data-placement])': '0 0',\n '!open & ([data-placement=\"bottom\"] | ![data-placement])': '0 -1x',\n },\n transformOrigin: {\n '': 'top center',\n '[data-placement=\"top\"]': 'bottom center',\n },\n scale: {\n '': '1 1',\n '!open': '1 .9',\n },\n opacity: {\n '': 1,\n '!open': 0.001,\n },\n\n '$overlay-min-width': 'min 30x',\n },\n});\n\nexport const ListBoxPopover = function ListBoxPopover(\n props: ListBoxPopoverProps,\n) {\n const {\n isOpen,\n triggerRef,\n popoverRef,\n listBoxRef,\n direction,\n shouldFlip,\n overlayOffset,\n containerPadding,\n comboBoxWidth,\n listBoxId,\n overlayStyles,\n listBoxStyles,\n optionStyles,\n sectionStyles,\n headingStyles,\n selectedKey,\n isDisabled,\n disabledKeys,\n items,\n children,\n listStateRef,\n onSelectionChange,\n onClose,\n label,\n ariaLabel,\n compositeFocusProps,\n filter,\n size = 'medium',\n } = props;\n\n const mergedPopoverRef = popoverRef;\n\n // Overlay positioning\n const { overlayProps: overlayPositionProps, placement } = useOverlayPosition({\n targetRef: triggerRef as any,\n overlayRef: mergedPopoverRef as any,\n placement: `${direction} start` as any,\n shouldFlip,\n isOpen,\n offset: overlayOffset,\n containerPadding: containerPadding,\n });\n\n // Overlay behavior (dismiss on outside click, escape)\n const { overlayProps: overlayBehaviorProps } = useOverlay(\n {\n onClose,\n shouldCloseOnBlur: true,\n isOpen,\n isDismissable: true,\n shouldCloseOnInteractOutside: (el) => {\n const menuTriggerEl = el.closest('[data-popover-trigger]');\n if (!menuTriggerEl) {\n if (el.closest('[data-popover-keep]')) return false;\n // Plain interactive controls (Button, ItemButton) opt in via\n // `data-popover-dismiss` to dismiss us without losing their click\n // to useOverlay's stopPropagation. Schedule the close after the\n // click finishes so the button's onPress runs first.\n if (el.closest('[data-popover-dismiss]')) {\n setTimeout(onClose, 0);\n return false;\n }\n return true;\n }\n if (menuTriggerEl === triggerRef?.current) return true;\n return false;\n },\n },\n mergedPopoverRef as any,\n );\n\n // Extract primary placement direction for consistent styling\n const placementDirection = placement?.split(' ')[0] || direction;\n\n const overlayContent = (\n <DisplayTransition isShown={isOpen}>\n {({ phase, isShown, ref: transitionRef }) => (\n <ListBoxPopoverWrapper\n {...mergeProps(\n overlayPositionProps,\n overlayBehaviorProps,\n compositeFocusProps,\n )}\n ref={mergedPopoverRef}\n style={overlayPositionProps.style}\n >\n <ListBoxPopoverElement\n ref={transitionRef}\n data-placement={placementDirection}\n data-phase={phase}\n mods={{\n open: isShown,\n hidden: phase === 'unmounted',\n }}\n styles={overlayStyles}\n style={{\n '--overlay-min-width': comboBoxWidth\n ? `${comboBoxWidth}px`\n : undefined,\n }}\n >\n <ListBox\n ref={listBoxRef}\n focusOnHover\n disableSelectionToggle\n id={listBoxId}\n aria-label={\n ariaLabel || (typeof label === 'string' ? label : 'Options')\n }\n selectedKey={selectedKey}\n selectionMode=\"single\"\n isDisabled={isDisabled}\n disabledKeys={disabledKeys}\n shouldUseVirtualFocus={true}\n items={items as any}\n filter={filter}\n styles={listBoxStyles}\n optionStyles={optionStyles}\n sectionStyles={sectionStyles}\n headingStyles={headingStyles}\n stateRef={listStateRef}\n size=\"medium\"\n shape=\"popover\"\n onSelectionChange={onSelectionChange}\n >\n {children as any}\n </ListBox>\n </ListBoxPopoverElement>\n </ListBoxPopoverWrapper>\n )}\n </DisplayTransition>\n );\n\n return <Portal>{overlayContent}</Portal>;\n};\n"],"mappings":";;;;;;;;;;;AAgDA,MAAM,wBAAwB,MAAM;CAClC,IAAI;CACJ,QAAQ;EACN,UAAU;EACV,QAAQ;EACT;CACF,CAAC;AAEF,MAAM,wBAAwB,MAAM;CAClC,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,UAAU;EACV,aAAa;EACb,OAAO;EACP,QAAQ;EACR,UAAU;EACV,MAAM;EACN,QAAQ;EACR,QAAQ;EACR,SAAS;EACT,QAAQ;EACR,MAAM;GACJ,IAAI;GACJ,QAAQ;GACT;EACD,WAAW;EACX,YACE;EACF,WAAW;GACT,IAAI;GACJ,mCAAiC;GACjC,oCAAkC;GAClC,4DAA0D;GAC1D,6DAA2D;GAC5D;EACD,iBAAiB;GACf,IAAI;GACJ,4BAA0B;GAC3B;EACD,OAAO;GACL,IAAI;GACJ,SAAS;GACV;EACD,SAAS;GACP,IAAI;GACJ,SAAS;GACV;EAED,sBAAsB;EACvB;CACF,CAAC;AAEF,MAAa,iBAAiB,SAAS,eACrC,OACA;CACA,MAAM,EACJ,QACA,YACA,YACA,YACA,WACA,YACA,eACA,kBACA,eACA,WACA,eACA,eACA,cACA,eACA,eACA,aACA,YACA,cACA,OACA,UACA,cACA,mBACA,SACA,OACA,WACA,qBACA,QACA,OAAO,aACL;CAEJ,MAAM,mBAAmB;CAGzB,MAAM,EAAE,cAAc,sBAAsB,cAAc,mBAAmB;EAC3E,WAAW;EACX,YAAY;EACZ,WAAW,GAAG,UAAU;EACxB;EACA;EACA,QAAQ;EACU;EACnB,CAAC;CAGF,MAAM,EAAE,cAAc,yBAAyB,WAC7C;EACE;EACA,mBAAmB;EACnB;EACA,eAAe;EACf,+BAA+B,OAAO;GACpC,MAAM,gBAAgB,GAAG,QAAQ,yBAAyB;AAC1D,OAAI,CAAC,eAAe;AAClB,QAAI,GAAG,QAAQ,sBAAsB,CAAE,QAAO;AAK9C,QAAI,GAAG,QAAQ,yBAAyB,EAAE;AACxC,gBAAW,SAAS,EAAE;AACtB,YAAO;;AAET,WAAO;;AAET,OAAI,kBAAkB,YAAY,QAAS,QAAO;AAClD,UAAO;;EAEV,EACD,iBACD;CAGD,MAAM,qBAAqB,WAAW,MAAM,IAAI,CAAC,MAAM;AA6DvD,QAAO,oBAAC,oBA1DN,oBAAC;EAAkB,SAAS;aACxB,EAAE,OAAO,SAAS,KAAK,oBACvB,oBAAC;GACC,GAAIA,aACF,sBACA,sBACA,oBACD;GACD,KAAK;GACL,OAAO,qBAAqB;aAE5B,oBAAC;IACC,KAAK;IACL,kBAAgB;IAChB,cAAY;IACZ,MAAM;KACJ,MAAM;KACN,QAAQ,UAAU;KACnB;IACD,QAAQ;IACR,OAAO,EACL,uBAAuB,gBACnB,GAAG,cAAc,MACjB,QACL;cAED,oBAAC;KACC,KAAK;KACL;KACA;KACA,IAAI;KACJ,cACE,cAAc,OAAO,UAAU,WAAW,QAAQ;KAEvC;KACb,eAAc;KACF;KACE;KACd,uBAAuB;KAChB;KACC;KACR,QAAQ;KACM;KACC;KACA;KACf,UAAU;KACV,MAAK;KACL,OAAM;KACa;KAElB;MACO;KACY;IACF;GAER,GAGkB"}
1
+ {"version":3,"file":"ListBoxPopover.js","names":["mergeProps"],"sources":["../../../../src/components/fields/ListBoxPopover/ListBoxPopover.tsx"],"sourcesContent":["import { Key } from '@react-types/shared';\nimport { Styles, tasty } from '@tenphi/tasty';\nimport React, { ReactNode, RefObject } from 'react';\nimport { useOverlay, useOverlayPosition } from 'react-aria';\n\nimport { mergeProps } from '../../../utils/react';\nimport { DisplayTransition } from '../../helpers';\nimport { Portal } from '../../portal';\nimport { ListBox } from '../ListBox/ListBox';\n\nexport interface ListBoxPopoverProps {\n isOpen: boolean;\n triggerRef: RefObject<HTMLElement>;\n popoverRef: RefObject<HTMLDivElement>;\n listBoxRef: RefObject<HTMLDivElement>;\n direction: 'bottom' | 'top';\n shouldFlip: boolean;\n overlayOffset: number;\n containerPadding: number;\n /** Min width (px) for the overlay; usually the trigger's width. */\n comboBoxWidth?: number;\n /** Stable id used for the ListBox element and aria-controls wiring. */\n listBoxId: string;\n overlayStyles?: Styles;\n listBoxStyles?: Styles;\n optionStyles?: Styles;\n /** Substring to highlight within each option's (text) children. */\n optionHighlight?: string;\n sectionStyles?: Styles;\n headingStyles?: Styles;\n selectedKey?: Key | null;\n isDisabled?: boolean;\n disabledKeys?: Iterable<Key>;\n items?: Iterable<any>;\n children: ReactNode;\n /** Ref through which the ListBox exposes its internal list state. */\n listStateRef: RefObject<any>;\n onSelectionChange: (selection: Key | Key[] | null) => void;\n onClose: () => void;\n label?: ReactNode;\n ariaLabel?: string;\n compositeFocusProps: {\n onFocus: (e: React.FocusEvent) => void;\n onBlur: (e: React.FocusEvent) => void;\n };\n /** Collection node filter applied to the ListBox. */\n filter?: (nodes: Iterable<any>) => Iterable<any>;\n size?: 'small' | 'medium' | 'large' | (string & {});\n}\n\nconst ListBoxPopoverWrapper = tasty({\n qa: 'ComboBoxOverlayWrapper',\n styles: {\n position: 'absolute',\n zIndex: 1000,\n },\n});\n\nconst ListBoxPopoverElement = tasty({\n qa: 'ComboBoxOverlay',\n styles: {\n display: 'grid',\n gridRows: '1sf',\n gridColumns: '1sf',\n width: '$overlay-min-width max-content 50vw',\n height: 'initial max-content (50vh - 5x)',\n overflow: 'auto',\n fill: '#surface',\n radius: '1cr',\n shadow: true,\n padding: '0',\n border: '#border',\n hide: {\n '': false,\n hidden: true,\n },\n boxSizing: 'border-box',\n transition:\n 'translate $transition ease-out, scale $transition ease-out, theme $transition ease-out',\n translate: {\n '': '0 0',\n 'open & [data-placement=\"top\"]': '0 0',\n '!open & [data-placement=\"top\"]': '0 1x',\n 'open & ([data-placement=\"bottom\"] | ![data-placement])': '0 0',\n '!open & ([data-placement=\"bottom\"] | ![data-placement])': '0 -1x',\n },\n transformOrigin: {\n '': 'top center',\n '[data-placement=\"top\"]': 'bottom center',\n },\n scale: {\n '': '1 1',\n '!open': '1 .9',\n },\n opacity: {\n '': 1,\n '!open': 0.001,\n },\n\n '$overlay-min-width': 'min 30x',\n },\n});\n\nexport const ListBoxPopover = function ListBoxPopover(\n props: ListBoxPopoverProps,\n) {\n const {\n isOpen,\n triggerRef,\n popoverRef,\n listBoxRef,\n direction,\n shouldFlip,\n overlayOffset,\n containerPadding,\n comboBoxWidth,\n listBoxId,\n overlayStyles,\n listBoxStyles,\n optionStyles,\n optionHighlight,\n sectionStyles,\n headingStyles,\n selectedKey,\n isDisabled,\n disabledKeys,\n items,\n children,\n listStateRef,\n onSelectionChange,\n onClose,\n label,\n ariaLabel,\n compositeFocusProps,\n filter,\n size = 'medium',\n } = props;\n\n const mergedPopoverRef = popoverRef;\n\n // Overlay positioning\n const { overlayProps: overlayPositionProps, placement } = useOverlayPosition({\n targetRef: triggerRef as any,\n overlayRef: mergedPopoverRef as any,\n placement: `${direction} start` as any,\n shouldFlip,\n isOpen,\n offset: overlayOffset,\n containerPadding: containerPadding,\n });\n\n // Overlay behavior (dismiss on outside click, escape)\n const { overlayProps: overlayBehaviorProps } = useOverlay(\n {\n onClose,\n shouldCloseOnBlur: true,\n isOpen,\n isDismissable: true,\n shouldCloseOnInteractOutside: (el) => {\n const menuTriggerEl = el.closest('[data-popover-trigger]');\n if (!menuTriggerEl) {\n if (el.closest('[data-popover-keep]')) return false;\n // Plain interactive controls (Button, ItemButton) opt in via\n // `data-popover-dismiss` to dismiss us without losing their click\n // to useOverlay's stopPropagation. Schedule the close after the\n // click finishes so the button's onPress runs first.\n if (el.closest('[data-popover-dismiss]')) {\n setTimeout(onClose, 0);\n return false;\n }\n return true;\n }\n if (menuTriggerEl === triggerRef?.current) return true;\n return false;\n },\n },\n mergedPopoverRef as any,\n );\n\n // Extract primary placement direction for consistent styling\n const placementDirection = placement?.split(' ')[0] || direction;\n\n const overlayContent = (\n <DisplayTransition isShown={isOpen}>\n {({ phase, isShown, ref: transitionRef }) => (\n <ListBoxPopoverWrapper\n {...mergeProps(\n overlayPositionProps,\n overlayBehaviorProps,\n compositeFocusProps,\n )}\n ref={mergedPopoverRef}\n style={overlayPositionProps.style}\n >\n <ListBoxPopoverElement\n ref={transitionRef}\n data-placement={placementDirection}\n data-phase={phase}\n mods={{\n open: isShown,\n hidden: phase === 'unmounted',\n }}\n styles={overlayStyles}\n style={{\n '--overlay-min-width': comboBoxWidth\n ? `${comboBoxWidth}px`\n : undefined,\n }}\n >\n <ListBox\n ref={listBoxRef}\n focusOnHover\n disableSelectionToggle\n id={listBoxId}\n aria-label={\n ariaLabel || (typeof label === 'string' ? label : 'Options')\n }\n selectedKey={selectedKey}\n selectionMode=\"single\"\n isDisabled={isDisabled}\n disabledKeys={disabledKeys}\n shouldUseVirtualFocus={true}\n items={items as any}\n filter={filter}\n styles={listBoxStyles}\n optionStyles={optionStyles}\n optionHighlight={optionHighlight}\n sectionStyles={sectionStyles}\n headingStyles={headingStyles}\n stateRef={listStateRef}\n size=\"medium\"\n shape=\"popover\"\n onSelectionChange={onSelectionChange}\n >\n {children as any}\n </ListBox>\n </ListBoxPopoverElement>\n </ListBoxPopoverWrapper>\n )}\n </DisplayTransition>\n );\n\n return <Portal>{overlayContent}</Portal>;\n};\n"],"mappings":";;;;;;;;;;;AAkDA,MAAM,wBAAwB,MAAM;CAClC,IAAI;CACJ,QAAQ;EACN,UAAU;EACV,QAAQ;EACT;CACF,CAAC;AAEF,MAAM,wBAAwB,MAAM;CAClC,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,UAAU;EACV,aAAa;EACb,OAAO;EACP,QAAQ;EACR,UAAU;EACV,MAAM;EACN,QAAQ;EACR,QAAQ;EACR,SAAS;EACT,QAAQ;EACR,MAAM;GACJ,IAAI;GACJ,QAAQ;GACT;EACD,WAAW;EACX,YACE;EACF,WAAW;GACT,IAAI;GACJ,mCAAiC;GACjC,oCAAkC;GAClC,4DAA0D;GAC1D,6DAA2D;GAC5D;EACD,iBAAiB;GACf,IAAI;GACJ,4BAA0B;GAC3B;EACD,OAAO;GACL,IAAI;GACJ,SAAS;GACV;EACD,SAAS;GACP,IAAI;GACJ,SAAS;GACV;EAED,sBAAsB;EACvB;CACF,CAAC;AAEF,MAAa,iBAAiB,SAAS,eACrC,OACA;CACA,MAAM,EACJ,QACA,YACA,YACA,YACA,WACA,YACA,eACA,kBACA,eACA,WACA,eACA,eACA,cACA,iBACA,eACA,eACA,aACA,YACA,cACA,OACA,UACA,cACA,mBACA,SACA,OACA,WACA,qBACA,QACA,OAAO,aACL;CAEJ,MAAM,mBAAmB;CAGzB,MAAM,EAAE,cAAc,sBAAsB,cAAc,mBAAmB;EAC3E,WAAW;EACX,YAAY;EACZ,WAAW,GAAG,UAAU;EACxB;EACA;EACA,QAAQ;EACU;EACnB,CAAC;CAGF,MAAM,EAAE,cAAc,yBAAyB,WAC7C;EACE;EACA,mBAAmB;EACnB;EACA,eAAe;EACf,+BAA+B,OAAO;GACpC,MAAM,gBAAgB,GAAG,QAAQ,yBAAyB;AAC1D,OAAI,CAAC,eAAe;AAClB,QAAI,GAAG,QAAQ,sBAAsB,CAAE,QAAO;AAK9C,QAAI,GAAG,QAAQ,yBAAyB,EAAE;AACxC,gBAAW,SAAS,EAAE;AACtB,YAAO;;AAET,WAAO;;AAET,OAAI,kBAAkB,YAAY,QAAS,QAAO;AAClD,UAAO;;EAEV,EACD,iBACD;CAGD,MAAM,qBAAqB,WAAW,MAAM,IAAI,CAAC,MAAM;AA8DvD,QAAO,oBAAC,oBA3DN,oBAAC;EAAkB,SAAS;aACxB,EAAE,OAAO,SAAS,KAAK,oBACvB,oBAAC;GACC,GAAIA,aACF,sBACA,sBACA,oBACD;GACD,KAAK;GACL,OAAO,qBAAqB;aAE5B,oBAAC;IACC,KAAK;IACL,kBAAgB;IAChB,cAAY;IACZ,MAAM;KACJ,MAAM;KACN,QAAQ,UAAU;KACnB;IACD,QAAQ;IACR,OAAO,EACL,uBAAuB,gBACnB,GAAG,cAAc,MACjB,QACL;cAED,oBAAC;KACC,KAAK;KACL;KACA;KACA,IAAI;KACJ,cACE,cAAc,OAAO,UAAU,WAAW,QAAQ;KAEvC;KACb,eAAc;KACF;KACE;KACd,uBAAuB;KAChB;KACC;KACR,QAAQ;KACM;KACG;KACF;KACA;KACf,UAAU;KACV,MAAK;KACL,OAAM;KACa;KAElB;MACO;KACY;IACF;GAER,GAGkB"}
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
2
2
  //#region src/components/fields/ListBoxPopover/listNavigation.ts
3
3
  /**
4
4
  * Walks a collection (possibly nested under sections) and collects the keys of
@@ -53,15 +53,35 @@ function markKeyboardFocus(listState) {
53
53
  if (listState.lastFocusSourceRef) listState.lastFocusSourceRef.current = "keyboard";
54
54
  }
55
55
  /**
56
+ * Collects the strings a node can be matched against: its `textValue` plus any
57
+ * plain-text `children` and `description` props. Non-string children/description
58
+ * (e.g. React elements) are ignored since we can't reliably read their text.
59
+ */
60
+ function getSearchableStrings(node) {
61
+ const strings = [];
62
+ if (node.textValue) strings.push(node.textValue);
63
+ const props = node.props;
64
+ if (props) {
65
+ if (typeof props.children === "string") strings.push(props.children);
66
+ if (typeof props.description === "string") strings.push(props.description);
67
+ }
68
+ return strings.length > 0 ? strings : [node.textValue || ""];
69
+ }
70
+ /** True when the term matches any of the node's searchable strings. */
71
+ function nodeMatchesTerm(node, term, textFilterFn) {
72
+ return getSearchableStrings(node).some((text) => textFilterFn(text, term));
73
+ }
74
+ /**
56
75
  * Filters collection nodes by a search term while preserving section structure.
57
- * Sections whose children all fail the filter are dropped. Extracted verbatim
58
- * from the former `useComboBoxFiltering` inline filter.
76
+ * A node matches when the term matches its `textValue`, its plain-text
77
+ * `children`, or its plain-text `description`. Sections whose children all fail
78
+ * the filter are dropped.
59
79
  */
60
80
  function filterCollectionNodes(nodes, term, textFilterFn) {
61
81
  if (!term) return nodes;
62
82
  return [...nodes].map((node) => {
63
83
  if (node.type === "section" && node.childNodes) {
64
- const filteredChildren = [...node.childNodes].filter((child) => textFilterFn(child.textValue || "", term));
84
+ const filteredChildren = [...node.childNodes].filter((child) => nodeMatchesTerm(child, term, textFilterFn));
65
85
  if (filteredChildren.length === 0) return null;
66
86
  return {
67
87
  ...node,
@@ -69,7 +89,7 @@ function filterCollectionNodes(nodes, term, textFilterFn) {
69
89
  hasChildNodes: true
70
90
  };
71
91
  }
72
- return textFilterFn(node.textValue || "", term) ? node : null;
92
+ return nodeMatchesTerm(node, term, textFilterFn) ? node : null;
73
93
  }).filter(Boolean);
74
94
  }
75
95
 
@@ -1 +1 @@
1
- {"version":3,"file":"listNavigation.js","names":[],"sources":["../../../../src/components/fields/ListBoxPopover/listNavigation.ts"],"sourcesContent":["import { Key } from '@react-types/shared';\n\n/**\n * Minimal view of a React Stately list state. Kept structural (no imports from\n * `react-stately`) so the helpers can be used from any collection-backed\n * component without dragging extra types in.\n */\nexport interface ListStateLike {\n selectionManager: {\n focusedKey: Key | null;\n setFocusedKey: (key: Key | null) => void;\n };\n collection: Iterable<any>;\n disabledKeys?: Set<Key>;\n lastFocusSourceRef?: { current: 'keyboard' | 'mouse' | 'other' };\n}\n\nexport type NavigationDirection = 1 | -1;\nexport type NavigationEdge = 'first' | 'last';\n\n/**\n * Walks a collection (possibly nested under sections) and collects the keys of\n * selectable items, skipping disabled ones. Mirrors the inline walker that\n * used to live in `useComboBoxKeyboard`.\n */\nexport function collectVisibleKeys(\n nodes: Iterable<any>,\n out: Key[],\n disabledKeys?: Set<Key>,\n): void {\n for (const node of nodes) {\n if (node.type === 'item') {\n if (!disabledKeys?.has(node.key)) {\n out.push(node.key);\n }\n } else if (node.childNodes) {\n collectVisibleKeys(node.childNodes, out, disabledKeys);\n }\n }\n}\n\n/** Convenience: returns the flat list of selectable keys for a list state. */\nexport function getVisibleKeys(listState: ListStateLike): Key[] {\n const keys: Key[] = [];\n collectVisibleKeys(\n listState.collection,\n keys,\n listState.disabledKeys as Set<Key> | undefined,\n );\n return keys;\n}\n\n/**\n * Computes the next key to focus when navigating with ArrowUp/ArrowDown.\n *\n * - If `fromKey` is omitted, reads `selectionManager.focusedKey`.\n * - When nothing is focused (or the focused key is no longer visible), falls\n * back to the first/last visible key depending on `direction`.\n * - When the current key is the boundary, either returns `null` (default) or\n * wraps to the opposite edge when `opts.wrap` is true.\n */\nexport function getNextVisibleKey(\n listState: ListStateLike,\n direction: NavigationDirection,\n opts?: { wrap?: boolean; fromKey?: Key | null },\n): Key | null {\n const visibleKeys = getVisibleKeys(listState);\n if (visibleKeys.length === 0) return null;\n\n const isForward = direction === 1;\n const currentKey = opts?.fromKey ?? listState.selectionManager.focusedKey;\n\n if (currentKey == null) {\n return isForward ? visibleKeys[0] : visibleKeys[visibleKeys.length - 1];\n }\n\n const currentIndex = visibleKeys.indexOf(currentKey);\n\n if (currentIndex === -1) {\n // Focused item was filtered out — restart from the matching edge.\n return isForward ? visibleKeys[0] : visibleKeys[visibleKeys.length - 1];\n }\n\n const newIndex = currentIndex + direction;\n if (newIndex >= 0 && newIndex < visibleKeys.length) {\n return visibleKeys[newIndex];\n }\n\n if (opts?.wrap) {\n return isForward ? visibleKeys[0] : visibleKeys[visibleKeys.length - 1];\n }\n\n return null;\n}\n\n/** Returns the first or last selectable key. */\nexport function getEdgeVisibleKey(\n listState: ListStateLike,\n edge: NavigationEdge,\n): Key | null {\n const visibleKeys = getVisibleKeys(listState);\n if (visibleKeys.length === 0) return null;\n return edge === 'first'\n ? visibleKeys[0]\n : visibleKeys[visibleKeys.length - 1];\n}\n\n/**\n * Marks a focus change as keyboard-driven so the underlying ListBox scrolls the\n * highlighted option into view. No-op when the list state doesn't expose a\n * `lastFocusSourceRef`.\n */\nexport function markKeyboardFocus(listState: ListStateLike): void {\n if (listState.lastFocusSourceRef) {\n listState.lastFocusSourceRef.current = 'keyboard';\n }\n}\n\nexport type TextFilterFn = (textValue: string, inputValue: string) => boolean;\n\n/**\n * Filters collection nodes by a search term while preserving section structure.\n * Sections whose children all fail the filter are dropped. Extracted verbatim\n * from the former `useComboBoxFiltering` inline filter.\n */\nexport function filterCollectionNodes(\n nodes: Iterable<any>,\n term: string,\n textFilterFn: TextFilterFn,\n): Iterable<any> {\n if (!term) {\n return nodes;\n }\n\n return [...nodes]\n .map((node: any) => {\n if (node.type === 'section' && node.childNodes) {\n const filteredChildren = [...node.childNodes].filter((child: any) =>\n textFilterFn(child.textValue || '', term),\n );\n\n if (filteredChildren.length === 0) {\n return null;\n }\n\n return {\n ...node,\n childNodes: filteredChildren,\n hasChildNodes: true,\n };\n }\n\n return textFilterFn(node.textValue || '', term) ? node : null;\n })\n .filter(Boolean);\n}\n"],"mappings":";;;;;;;AAyBA,SAAgB,mBACd,OACA,KACA,cACM;AACN,MAAK,MAAM,QAAQ,MACjB,KAAI,KAAK,SAAS,QAChB;MAAI,CAAC,cAAc,IAAI,KAAK,IAAI,CAC9B,KAAI,KAAK,KAAK,IAAI;YAEX,KAAK,WACd,oBAAmB,KAAK,YAAY,KAAK,aAAa;;;AAM5D,SAAgB,eAAe,WAAiC;CAC9D,MAAM,OAAc,EAAE;AACtB,oBACE,UAAU,YACV,MACA,UAAU,aACX;AACD,QAAO;;;;;;;;;;;AAYT,SAAgB,kBACd,WACA,WACA,MACY;CACZ,MAAM,cAAc,eAAe,UAAU;AAC7C,KAAI,YAAY,WAAW,EAAG,QAAO;CAErC,MAAM,YAAY,cAAc;CAChC,MAAM,aAAa,MAAM,WAAW,UAAU,iBAAiB;AAE/D,KAAI,cAAc,KAChB,QAAO,YAAY,YAAY,KAAK,YAAY,YAAY,SAAS;CAGvE,MAAM,eAAe,YAAY,QAAQ,WAAW;AAEpD,KAAI,iBAAiB,GAEnB,QAAO,YAAY,YAAY,KAAK,YAAY,YAAY,SAAS;CAGvE,MAAM,WAAW,eAAe;AAChC,KAAI,YAAY,KAAK,WAAW,YAAY,OAC1C,QAAO,YAAY;AAGrB,KAAI,MAAM,KACR,QAAO,YAAY,YAAY,KAAK,YAAY,YAAY,SAAS;AAGvE,QAAO;;;AAIT,SAAgB,kBACd,WACA,MACY;CACZ,MAAM,cAAc,eAAe,UAAU;AAC7C,KAAI,YAAY,WAAW,EAAG,QAAO;AACrC,QAAO,SAAS,UACZ,YAAY,KACZ,YAAY,YAAY,SAAS;;;;;;;AAQvC,SAAgB,kBAAkB,WAAgC;AAChE,KAAI,UAAU,mBACZ,WAAU,mBAAmB,UAAU;;;;;;;AAW3C,SAAgB,sBACd,OACA,MACA,cACe;AACf,KAAI,CAAC,KACH,QAAO;AAGT,QAAO,CAAC,GAAG,MAAM,CACd,KAAK,SAAc;AAClB,MAAI,KAAK,SAAS,aAAa,KAAK,YAAY;GAC9C,MAAM,mBAAmB,CAAC,GAAG,KAAK,WAAW,CAAC,QAAQ,UACpD,aAAa,MAAM,aAAa,IAAI,KAAK,CAC1C;AAED,OAAI,iBAAiB,WAAW,EAC9B,QAAO;AAGT,UAAO;IACL,GAAG;IACH,YAAY;IACZ,eAAe;IAChB;;AAGH,SAAO,aAAa,KAAK,aAAa,IAAI,KAAK,GAAG,OAAO;GACzD,CACD,OAAO,QAAQ"}
1
+ {"version":3,"file":"listNavigation.js","names":[],"sources":["../../../../src/components/fields/ListBoxPopover/listNavigation.ts"],"sourcesContent":["import { Key } from '@react-types/shared';\n\n/**\n * Minimal view of a React Stately list state. Kept structural (no imports from\n * `react-stately`) so the helpers can be used from any collection-backed\n * component without dragging extra types in.\n */\nexport interface ListStateLike {\n selectionManager: {\n focusedKey: Key | null;\n setFocusedKey: (key: Key | null) => void;\n };\n collection: Iterable<any>;\n disabledKeys?: Set<Key>;\n lastFocusSourceRef?: { current: 'keyboard' | 'mouse' | 'other' };\n}\n\nexport type NavigationDirection = 1 | -1;\nexport type NavigationEdge = 'first' | 'last';\n\n/**\n * Walks a collection (possibly nested under sections) and collects the keys of\n * selectable items, skipping disabled ones. Mirrors the inline walker that\n * used to live in `useComboBoxKeyboard`.\n */\nexport function collectVisibleKeys(\n nodes: Iterable<any>,\n out: Key[],\n disabledKeys?: Set<Key>,\n): void {\n for (const node of nodes) {\n if (node.type === 'item') {\n if (!disabledKeys?.has(node.key)) {\n out.push(node.key);\n }\n } else if (node.childNodes) {\n collectVisibleKeys(node.childNodes, out, disabledKeys);\n }\n }\n}\n\n/** Convenience: returns the flat list of selectable keys for a list state. */\nexport function getVisibleKeys(listState: ListStateLike): Key[] {\n const keys: Key[] = [];\n collectVisibleKeys(\n listState.collection,\n keys,\n listState.disabledKeys as Set<Key> | undefined,\n );\n return keys;\n}\n\n/**\n * Computes the next key to focus when navigating with ArrowUp/ArrowDown.\n *\n * - If `fromKey` is omitted, reads `selectionManager.focusedKey`.\n * - When nothing is focused (or the focused key is no longer visible), falls\n * back to the first/last visible key depending on `direction`.\n * - When the current key is the boundary, either returns `null` (default) or\n * wraps to the opposite edge when `opts.wrap` is true.\n */\nexport function getNextVisibleKey(\n listState: ListStateLike,\n direction: NavigationDirection,\n opts?: { wrap?: boolean; fromKey?: Key | null },\n): Key | null {\n const visibleKeys = getVisibleKeys(listState);\n if (visibleKeys.length === 0) return null;\n\n const isForward = direction === 1;\n const currentKey = opts?.fromKey ?? listState.selectionManager.focusedKey;\n\n if (currentKey == null) {\n return isForward ? visibleKeys[0] : visibleKeys[visibleKeys.length - 1];\n }\n\n const currentIndex = visibleKeys.indexOf(currentKey);\n\n if (currentIndex === -1) {\n // Focused item was filtered out — restart from the matching edge.\n return isForward ? visibleKeys[0] : visibleKeys[visibleKeys.length - 1];\n }\n\n const newIndex = currentIndex + direction;\n if (newIndex >= 0 && newIndex < visibleKeys.length) {\n return visibleKeys[newIndex];\n }\n\n if (opts?.wrap) {\n return isForward ? visibleKeys[0] : visibleKeys[visibleKeys.length - 1];\n }\n\n return null;\n}\n\n/** Returns the first or last selectable key. */\nexport function getEdgeVisibleKey(\n listState: ListStateLike,\n edge: NavigationEdge,\n): Key | null {\n const visibleKeys = getVisibleKeys(listState);\n if (visibleKeys.length === 0) return null;\n return edge === 'first'\n ? visibleKeys[0]\n : visibleKeys[visibleKeys.length - 1];\n}\n\n/**\n * Marks a focus change as keyboard-driven so the underlying ListBox scrolls the\n * highlighted option into view. No-op when the list state doesn't expose a\n * `lastFocusSourceRef`.\n */\nexport function markKeyboardFocus(listState: ListStateLike): void {\n if (listState.lastFocusSourceRef) {\n listState.lastFocusSourceRef.current = 'keyboard';\n }\n}\n\nexport type TextFilterFn = (textValue: string, inputValue: string) => boolean;\n\n/**\n * Collects the strings a node can be matched against: its `textValue` plus any\n * plain-text `children` and `description` props. Non-string children/description\n * (e.g. React elements) are ignored since we can't reliably read their text.\n */\nfunction getSearchableStrings(node: any): string[] {\n const strings: string[] = [];\n\n if (node.textValue) {\n strings.push(node.textValue);\n }\n\n const props = node.props;\n if (props) {\n if (typeof props.children === 'string') {\n strings.push(props.children);\n }\n if (typeof props.description === 'string') {\n strings.push(props.description);\n }\n }\n\n return strings.length > 0 ? strings : [node.textValue || ''];\n}\n\n/** True when the term matches any of the node's searchable strings. */\nfunction nodeMatchesTerm(\n node: any,\n term: string,\n textFilterFn: TextFilterFn,\n): boolean {\n return getSearchableStrings(node).some((text) => textFilterFn(text, term));\n}\n\n/**\n * Filters collection nodes by a search term while preserving section structure.\n * A node matches when the term matches its `textValue`, its plain-text\n * `children`, or its plain-text `description`. Sections whose children all fail\n * the filter are dropped.\n */\nexport function filterCollectionNodes(\n nodes: Iterable<any>,\n term: string,\n textFilterFn: TextFilterFn,\n): Iterable<any> {\n if (!term) {\n return nodes;\n }\n\n return [...nodes]\n .map((node: any) => {\n if (node.type === 'section' && node.childNodes) {\n const filteredChildren = [...node.childNodes].filter((child: any) =>\n nodeMatchesTerm(child, term, textFilterFn),\n );\n\n if (filteredChildren.length === 0) {\n return null;\n }\n\n return {\n ...node,\n childNodes: filteredChildren,\n hasChildNodes: true,\n };\n }\n\n return nodeMatchesTerm(node, term, textFilterFn) ? node : null;\n })\n .filter(Boolean);\n}\n"],"mappings":";;;;;;;AAyBA,SAAgB,mBACd,OACA,KACA,cACM;AACN,MAAK,MAAM,QAAQ,MACjB,KAAI,KAAK,SAAS,QAChB;MAAI,CAAC,cAAc,IAAI,KAAK,IAAI,CAC9B,KAAI,KAAK,KAAK,IAAI;YAEX,KAAK,WACd,oBAAmB,KAAK,YAAY,KAAK,aAAa;;;AAM5D,SAAgB,eAAe,WAAiC;CAC9D,MAAM,OAAc,EAAE;AACtB,oBACE,UAAU,YACV,MACA,UAAU,aACX;AACD,QAAO;;;;;;;;;;;AAYT,SAAgB,kBACd,WACA,WACA,MACY;CACZ,MAAM,cAAc,eAAe,UAAU;AAC7C,KAAI,YAAY,WAAW,EAAG,QAAO;CAErC,MAAM,YAAY,cAAc;CAChC,MAAM,aAAa,MAAM,WAAW,UAAU,iBAAiB;AAE/D,KAAI,cAAc,KAChB,QAAO,YAAY,YAAY,KAAK,YAAY,YAAY,SAAS;CAGvE,MAAM,eAAe,YAAY,QAAQ,WAAW;AAEpD,KAAI,iBAAiB,GAEnB,QAAO,YAAY,YAAY,KAAK,YAAY,YAAY,SAAS;CAGvE,MAAM,WAAW,eAAe;AAChC,KAAI,YAAY,KAAK,WAAW,YAAY,OAC1C,QAAO,YAAY;AAGrB,KAAI,MAAM,KACR,QAAO,YAAY,YAAY,KAAK,YAAY,YAAY,SAAS;AAGvE,QAAO;;;AAIT,SAAgB,kBACd,WACA,MACY;CACZ,MAAM,cAAc,eAAe,UAAU;AAC7C,KAAI,YAAY,WAAW,EAAG,QAAO;AACrC,QAAO,SAAS,UACZ,YAAY,KACZ,YAAY,YAAY,SAAS;;;;;;;AAQvC,SAAgB,kBAAkB,WAAgC;AAChE,KAAI,UAAU,mBACZ,WAAU,mBAAmB,UAAU;;;;;;;AAW3C,SAAS,qBAAqB,MAAqB;CACjD,MAAM,UAAoB,EAAE;AAE5B,KAAI,KAAK,UACP,SAAQ,KAAK,KAAK,UAAU;CAG9B,MAAM,QAAQ,KAAK;AACnB,KAAI,OAAO;AACT,MAAI,OAAO,MAAM,aAAa,SAC5B,SAAQ,KAAK,MAAM,SAAS;AAE9B,MAAI,OAAO,MAAM,gBAAgB,SAC/B,SAAQ,KAAK,MAAM,YAAY;;AAInC,QAAO,QAAQ,SAAS,IAAI,UAAU,CAAC,KAAK,aAAa,GAAG;;;AAI9D,SAAS,gBACP,MACA,MACA,cACS;AACT,QAAO,qBAAqB,KAAK,CAAC,MAAM,SAAS,aAAa,MAAM,KAAK,CAAC;;;;;;;;AAS5E,SAAgB,sBACd,OACA,MACA,cACe;AACf,KAAI,CAAC,KACH,QAAO;AAGT,QAAO,CAAC,GAAG,MAAM,CACd,KAAK,SAAc;AAClB,MAAI,KAAK,SAAS,aAAa,KAAK,YAAY;GAC9C,MAAM,mBAAmB,CAAC,GAAG,KAAK,WAAW,CAAC,QAAQ,UACpD,gBAAgB,OAAO,MAAM,aAAa,CAC3C;AAED,OAAI,iBAAiB,WAAW,EAC9B,QAAO;AAGT,UAAO;IACL,GAAG;IACH,YAAY;IACZ,eAAe;IAChB;;AAGH,SAAO,gBAAgB,MAAM,MAAM,aAAa,GAAG,OAAO;GAC1D,CACD,OAAO,QAAQ"}
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
2
2
  import { useCallback, useEffect, useRef } from "react";
3
3
 
4
4
  //#region src/components/fields/ListBoxPopover/useCompositeFocus.ts
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
2
2
  import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
3
3
  import { useProviderProps } from "../../../provider.js";
4
4
  import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
2
2
  import { DirectionIcon } from "../../../icons/DirectionIcon.js";
3
3
  import { Button } from "../../actions/index.js";
4
4
  import { tasty } from "@tenphi/tasty";
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
2
2
  import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
3
3
  import { useProviderProps } from "../../../provider.js";
4
4
  import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
2
2
  import { extractStyles } from "../../../utils/styles.js";
3
3
  import { useEvent } from "../../../_internal/hooks/use-event.js";
4
4
  import { _Text } from "../../content/Text.js";
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
2
2
  import { extractStyles } from "../../../utils/styles.js";
3
3
  import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
4
4
  import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
2
2
  import { extractStyles } from "../../../utils/styles.js";
3
3
  import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
4
4
  import { useProviderProps } from "../../../provider.js";
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
2
2
  import { createContext, useContext } from "react";
3
3
 
4
4
  //#region src/components/fields/RadioGroup/context.ts
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
2
2
  import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
3
3
  import { useProviderProps } from "../../../provider.js";
4
4
  import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
2
2
  import { extractStyles } from "../../../utils/styles.js";
3
3
  import { forwardRefWithGenerics } from "../../../utils/react/forwardRefWithGenerics.js";
4
4
  import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
2
2
  import { SliderGradationElement, SliderGradeElement } from "./elements.js";
3
3
  import { jsx } from "react/jsx-runtime";
4
4
 
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
2
2
  import { __Slider } from "./Slider.js";
3
3
  import { forwardRef, useCallback, useMemo, useState } from "react";
4
4
  import { jsx } from "react/jsx-runtime";
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
2
2
  import { Gradation } from "./Gradation.js";
3
3
  import { _SliderBase } from "./SliderBase.js";
4
4
  import { SliderThumb } from "./SliderThumb.js";
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
2
2
  import { extractStyles } from "../../../utils/styles.js";
3
3
  import { mergeProps } from "../../../utils/react/mergeProps.js";
4
4
  import { Gradation } from "./Gradation.js";
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
2
2
  import { extractStyles } from "../../../utils/styles.js";
3
3
  import { forwardRefWithGenerics } from "../../../utils/react/forwardRefWithGenerics.js";
4
4
  import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.0.0-canary-261df01 | Cube Dev Team */
2
2
  import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
3
3
  import { SliderThumbElement } from "./elements.js";
4
4
  import { useMemo, useRef } from "react";