@cube-dev/ui-kit 0.121.6 → 0.122.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (480) hide show
  1. package/dist/CHANGELOG.md +12 -0
  2. package/dist/_internal/hooks/use-chained-callback.js +1 -1
  3. package/dist/_internal/hooks/use-debounced-value.js +1 -1
  4. package/dist/_internal/hooks/use-deprecation-warning.js +1 -1
  5. package/dist/_internal/hooks/use-event.js +1 -1
  6. package/dist/_internal/hooks/use-is-first-render.js +1 -1
  7. package/dist/_internal/hooks/use-sync-ref.js +1 -1
  8. package/dist/_internal/hooks/use-timer/timer.js +1 -1
  9. package/dist/_internal/hooks/use-timer/use-timer.js +1 -1
  10. package/dist/_internal/hooks/use-warn.js +1 -1
  11. package/dist/components/Block.js +3 -2
  12. package/dist/components/Block.js.map +1 -1
  13. package/dist/components/CollectionItem.js +1 -1
  14. package/dist/components/GlobalStyles.js +1 -1
  15. package/dist/components/GridProvider.js +1 -1
  16. package/dist/components/HiddenInput.js +1 -1
  17. package/dist/components/Root.js +3 -2
  18. package/dist/components/Root.js.map +1 -1
  19. package/dist/components/actions/Action/Action.js +3 -2
  20. package/dist/components/actions/Action/Action.js.map +1 -1
  21. package/dist/components/actions/Banner/Banner.js +1 -1
  22. package/dist/components/actions/Button/Button.js +3 -2
  23. package/dist/components/actions/Button/Button.js.map +1 -1
  24. package/dist/components/actions/ButtonGroup/ButtonGroup.js +1 -1
  25. package/dist/components/actions/ButtonSplit/ButtonSplit.js +3 -2
  26. package/dist/components/actions/ButtonSplit/ButtonSplit.js.map +1 -1
  27. package/dist/components/actions/ButtonSplit/context.js +1 -1
  28. package/dist/components/actions/CommandMenu/CommandMenu.js +3 -2
  29. package/dist/components/actions/CommandMenu/CommandMenu.js.map +1 -1
  30. package/dist/components/actions/CommandMenu/styled.js +1 -1
  31. package/dist/components/actions/ItemAction/ItemAction.js +1 -1
  32. package/dist/components/actions/ItemActionContext.js +1 -1
  33. package/dist/components/actions/ItemButton/ItemButton.js +1 -1
  34. package/dist/components/actions/Link/Link.js +1 -1
  35. package/dist/components/actions/Menu/Menu.js +3 -2
  36. package/dist/components/actions/Menu/Menu.js.map +1 -1
  37. package/dist/components/actions/Menu/MenuItem.js +1 -1
  38. package/dist/components/actions/Menu/MenuSection.js +1 -1
  39. package/dist/components/actions/Menu/MenuTrigger.js +1 -1
  40. package/dist/components/actions/Menu/SubMenuTrigger.js +1 -1
  41. package/dist/components/actions/Menu/SubmenuTriggerContext.js +1 -1
  42. package/dist/components/actions/Menu/context.js +1 -1
  43. package/dist/components/actions/Menu/styled.js +1 -1
  44. package/dist/components/actions/index.js +1 -1
  45. package/dist/components/actions/use-action.js +1 -1
  46. package/dist/components/actions/use-anchored-menu.js +1 -1
  47. package/dist/components/actions/use-context-menu.js +1 -1
  48. package/dist/components/content/ActiveZone/ActiveZone.js +3 -2
  49. package/dist/components/content/ActiveZone/ActiveZone.js.map +1 -1
  50. package/dist/components/content/Alert/Alert.js +1 -1
  51. package/dist/components/content/Alert/use-alert.js +3 -2
  52. package/dist/components/content/Alert/use-alert.js.map +1 -1
  53. package/dist/components/content/Avatar/Avatar.js +3 -2
  54. package/dist/components/content/Avatar/Avatar.js.map +1 -1
  55. package/dist/components/content/Badge/Badge.js +1 -1
  56. package/dist/components/content/Card/Card.js +3 -2
  57. package/dist/components/content/Card/Card.js.map +1 -1
  58. package/dist/components/content/Content.js +3 -2
  59. package/dist/components/content/Content.js.map +1 -1
  60. package/dist/components/content/CopyPasteBlock/CopyPasteBlock.js +3 -2
  61. package/dist/components/content/CopyPasteBlock/CopyPasteBlock.js.map +1 -1
  62. package/dist/components/content/CopySnippet/CopySnippet.js +1 -1
  63. package/dist/components/content/Disclosure/Disclosure.js +3 -2
  64. package/dist/components/content/Disclosure/Disclosure.js.map +1 -1
  65. package/dist/components/content/Divider.js +1 -1
  66. package/dist/components/content/Footer.js +3 -2
  67. package/dist/components/content/Footer.js.map +1 -1
  68. package/dist/components/content/Header.js +3 -2
  69. package/dist/components/content/Header.js.map +1 -1
  70. package/dist/components/content/HotKeys/HotKeys.js +3 -2
  71. package/dist/components/content/HotKeys/HotKeys.js.map +1 -1
  72. package/dist/components/content/Item/Item.js +1 -1
  73. package/dist/components/content/ItemBadge/ItemBadge.js +1 -1
  74. package/dist/components/content/ItemCard/ItemCard.js +1 -1
  75. package/dist/components/content/Layout/GridLayout.js +1 -1
  76. package/dist/components/content/Layout/Layout.js +3 -2
  77. package/dist/components/content/Layout/Layout.js.map +1 -1
  78. package/dist/components/content/Layout/LayoutBlock.js +1 -1
  79. package/dist/components/content/Layout/LayoutCenter.js +1 -1
  80. package/dist/components/content/Layout/LayoutContainer.js +3 -2
  81. package/dist/components/content/Layout/LayoutContainer.js.map +1 -1
  82. package/dist/components/content/Layout/LayoutContent.js +3 -2
  83. package/dist/components/content/Layout/LayoutContent.js.map +1 -1
  84. package/dist/components/content/Layout/LayoutContext.js +1 -1
  85. package/dist/components/content/Layout/LayoutFlex.js +1 -1
  86. package/dist/components/content/Layout/LayoutFooter.js +1 -1
  87. package/dist/components/content/Layout/LayoutGrid.js +1 -1
  88. package/dist/components/content/Layout/LayoutHeader.js +1 -1
  89. package/dist/components/content/Layout/LayoutPane.js +3 -2
  90. package/dist/components/content/Layout/LayoutPane.js.map +1 -1
  91. package/dist/components/content/Layout/LayoutPanel.js +3 -2
  92. package/dist/components/content/Layout/LayoutPanel.js.map +1 -1
  93. package/dist/components/content/Layout/LayoutPanelHeader.js +3 -2
  94. package/dist/components/content/Layout/LayoutPanelHeader.js.map +1 -1
  95. package/dist/components/content/Layout/LayoutToolbar.js +1 -1
  96. package/dist/components/content/Layout/hooks/useTinyScrollbar.js +1 -1
  97. package/dist/components/content/Layout/index.js +1 -1
  98. package/dist/components/content/Layout/utils.js +1 -1
  99. package/dist/components/content/Paragraph.js +3 -2
  100. package/dist/components/content/Paragraph.js.map +1 -1
  101. package/dist/components/content/Placeholder/Placeholder.js +3 -2
  102. package/dist/components/content/Placeholder/Placeholder.js.map +1 -1
  103. package/dist/components/content/PrismCode/PrismCode.js +1 -1
  104. package/dist/components/content/PrismCode/prismSetup.js +1 -1
  105. package/dist/components/content/PrismDiffCode/PrismDiffCode.js +1 -1
  106. package/dist/components/content/Result/Result.js +3 -2
  107. package/dist/components/content/Result/Result.js.map +1 -1
  108. package/dist/components/content/Skeleton/Skeleton.js +1 -1
  109. package/dist/components/content/Tag/Tag.js +1 -1
  110. package/dist/components/content/Text.js +3 -2
  111. package/dist/components/content/Text.js.map +1 -1
  112. package/dist/components/content/TextItem/TextItem.js +3 -2
  113. package/dist/components/content/TextItem/TextItem.js.map +1 -1
  114. package/dist/components/content/Title.js +3 -2
  115. package/dist/components/content/Title.js.map +1 -1
  116. package/dist/components/content/highlightText.js +1 -1
  117. package/dist/components/content/use-auto-tooltip.js +1 -1
  118. package/dist/components/fields/Checkbox/Checkbox.js +3 -2
  119. package/dist/components/fields/Checkbox/Checkbox.js.map +1 -1
  120. package/dist/components/fields/Checkbox/CheckboxGroup.js +3 -2
  121. package/dist/components/fields/Checkbox/CheckboxGroup.js.map +1 -1
  122. package/dist/components/fields/Checkbox/context.js +1 -1
  123. package/dist/components/fields/ComboBox/ComboBox.js +3 -2
  124. package/dist/components/fields/ComboBox/ComboBox.js.map +1 -1
  125. package/dist/components/fields/DatePicker/DateInput.js +3 -2
  126. package/dist/components/fields/DatePicker/DateInput.js.map +1 -1
  127. package/dist/components/fields/DatePicker/DateInputBase.js +3 -2
  128. package/dist/components/fields/DatePicker/DateInputBase.js.map +1 -1
  129. package/dist/components/fields/DatePicker/DatePicker.js +3 -2
  130. package/dist/components/fields/DatePicker/DatePicker.js.map +1 -1
  131. package/dist/components/fields/DatePicker/DatePickerButton.js +1 -1
  132. package/dist/components/fields/DatePicker/DatePickerElement.js +1 -1
  133. package/dist/components/fields/DatePicker/DatePickerInput.js +1 -1
  134. package/dist/components/fields/DatePicker/DatePickerSegment.js +1 -1
  135. package/dist/components/fields/DatePicker/DateRangePicker.js +3 -2
  136. package/dist/components/fields/DatePicker/DateRangePicker.js.map +1 -1
  137. package/dist/components/fields/DatePicker/DateRangeSeparatedPicker.js +3 -2
  138. package/dist/components/fields/DatePicker/DateRangeSeparatedPicker.js.map +1 -1
  139. package/dist/components/fields/DatePicker/TimeInput.js +3 -2
  140. package/dist/components/fields/DatePicker/TimeInput.js.map +1 -1
  141. package/dist/components/fields/DatePicker/intl.js +1 -1
  142. package/dist/components/fields/DatePicker/parseDate.js +1 -1
  143. package/dist/components/fields/DatePicker/props.js +1 -1
  144. package/dist/components/fields/DatePicker/utils.js +1 -1
  145. package/dist/components/fields/FileInput/FileInput.js +3 -2
  146. package/dist/components/fields/FileInput/FileInput.js.map +1 -1
  147. package/dist/components/fields/FilterListBox/FilterListBox.js +3 -2
  148. package/dist/components/fields/FilterListBox/FilterListBox.js.map +1 -1
  149. package/dist/components/fields/FilterPicker/FilterPicker.js +3 -2
  150. package/dist/components/fields/FilterPicker/FilterPicker.js.map +1 -1
  151. package/dist/components/fields/Input/Input.js +1 -1
  152. package/dist/components/fields/ListBox/ListBox.js +3 -2
  153. package/dist/components/fields/ListBox/ListBox.js.map +1 -1
  154. package/dist/components/fields/NumberInput/NumberInput.js +1 -1
  155. package/dist/components/fields/NumberInput/StepButton.js +1 -1
  156. package/dist/components/fields/PasswordInput/PasswordInput.js +1 -1
  157. package/dist/components/fields/Picker/Picker.js +3 -2
  158. package/dist/components/fields/Picker/Picker.js.map +1 -1
  159. package/dist/components/fields/RadioGroup/Radio.js +3 -2
  160. package/dist/components/fields/RadioGroup/Radio.js.map +1 -1
  161. package/dist/components/fields/RadioGroup/RadioGroup.js +3 -2
  162. package/dist/components/fields/RadioGroup/RadioGroup.js.map +1 -1
  163. package/dist/components/fields/RadioGroup/context.js +1 -1
  164. package/dist/components/fields/SearchInput/SearchInput.js +1 -1
  165. package/dist/components/fields/Select/Select.js +3 -2
  166. package/dist/components/fields/Select/Select.js.map +1 -1
  167. package/dist/components/fields/Slider/Gradation.js +1 -1
  168. package/dist/components/fields/Slider/HueSlider.js +1 -1
  169. package/dist/components/fields/Slider/RangeSlider.js +1 -1
  170. package/dist/components/fields/Slider/Slider.js +3 -2
  171. package/dist/components/fields/Slider/Slider.js.map +1 -1
  172. package/dist/components/fields/Slider/SliderBase.js +3 -2
  173. package/dist/components/fields/Slider/SliderBase.js.map +1 -1
  174. package/dist/components/fields/Slider/SliderThumb.js +1 -1
  175. package/dist/components/fields/Slider/SliderTrack.js +1 -1
  176. package/dist/components/fields/Slider/elements.js +1 -1
  177. package/dist/components/fields/Slider/index.js +1 -1
  178. package/dist/components/fields/Switch/Switch.js +3 -2
  179. package/dist/components/fields/Switch/Switch.js.map +1 -1
  180. package/dist/components/fields/TextArea/TextArea.js +1 -1
  181. package/dist/components/fields/TextInput/TextInput.js +1 -1
  182. package/dist/components/fields/TextInput/TextInputBase.js +3 -2
  183. package/dist/components/fields/TextInput/TextInputBase.js.map +1 -1
  184. package/dist/components/fields/TextInputMapper/TextInputMapper.js +1 -1
  185. package/dist/components/form/FieldWrapper/FieldWrapper.js +1 -1
  186. package/dist/components/form/FieldWrapper/extract-field-wrapper-props.js +1 -1
  187. package/dist/components/form/Form/Field.js +1 -1
  188. package/dist/components/form/Form/Form.js +3 -2
  189. package/dist/components/form/Form/Form.js.map +1 -1
  190. package/dist/components/form/Form/ResetButton/ResetButton.js +1 -1
  191. package/dist/components/form/Form/SubmitButton/SubmitButton.js +1 -1
  192. package/dist/components/form/Form/SubmitError.js +1 -1
  193. package/dist/components/form/Form/index.js +1 -1
  194. package/dist/components/form/Form/use-field/use-field-props.js +1 -1
  195. package/dist/components/form/Form/use-field/use-field.js +1 -1
  196. package/dist/components/form/Form/use-form.js +1 -1
  197. package/dist/components/form/Form/validation.js +1 -1
  198. package/dist/components/form/Label.js +3 -2
  199. package/dist/components/form/Label.js.map +1 -1
  200. package/dist/components/form/wrapper.js +1 -1
  201. package/dist/components/helpers/DisplayTransition/DisplayTransition.js +1 -1
  202. package/dist/components/helpers/IconSwitch/IconSwitch.js +1 -1
  203. package/dist/components/layout/Flex.js +3 -2
  204. package/dist/components/layout/Flex.js.map +1 -1
  205. package/dist/components/layout/Flow.js +3 -2
  206. package/dist/components/layout/Flow.js.map +1 -1
  207. package/dist/components/layout/Grid.js +3 -2
  208. package/dist/components/layout/Grid.js.map +1 -1
  209. package/dist/components/layout/Panel.js +1 -1
  210. package/dist/components/layout/Prefix.js +3 -2
  211. package/dist/components/layout/Prefix.js.map +1 -1
  212. package/dist/components/layout/ResizablePanel.js +1 -1
  213. package/dist/components/layout/Space.js +3 -2
  214. package/dist/components/layout/Space.js.map +1 -1
  215. package/dist/components/layout/Suffix.js +3 -2
  216. package/dist/components/layout/Suffix.js.map +1 -1
  217. package/dist/components/navigation/Tabs/DraggableTabList.js +1 -1
  218. package/dist/components/navigation/Tabs/EditableTitle.js +1 -1
  219. package/dist/components/navigation/Tabs/TabButton.js +19 -16
  220. package/dist/components/navigation/Tabs/TabButton.js.map +1 -1
  221. package/dist/components/navigation/Tabs/TabDropIndicator.js +1 -1
  222. package/dist/components/navigation/Tabs/TabPanel.js +1 -1
  223. package/dist/components/navigation/Tabs/TabPicker.js +1 -1
  224. package/dist/components/navigation/Tabs/Tabs.js +3 -2
  225. package/dist/components/navigation/Tabs/Tabs.js.map +1 -1
  226. package/dist/components/navigation/Tabs/TabsAction.js +1 -1
  227. package/dist/components/navigation/Tabs/TabsContext.js +1 -1
  228. package/dist/components/navigation/Tabs/TabsContext.js.map +1 -1
  229. package/dist/components/navigation/Tabs/index.d.ts +1 -1
  230. package/dist/components/navigation/Tabs/styled.js +1 -1
  231. package/dist/components/navigation/Tabs/types.d.ts +11 -5
  232. package/dist/components/navigation/Tabs/types.js +1 -1
  233. package/dist/components/navigation/Tabs/types.js.map +1 -1
  234. package/dist/components/navigation/Tabs/use-tab-editing.js +1 -1
  235. package/dist/components/navigation/Tabs/use-tab-indicator.js +1 -1
  236. package/dist/components/navigation/index.d.ts +1 -1
  237. package/dist/components/organisms/FileTabs/FileTabs.js +1 -1
  238. package/dist/components/organisms/StatsCard/StatsCard.js +1 -1
  239. package/dist/components/other/Calendar/Calendar.js +1 -1
  240. package/dist/components/other/Calendar/CalendarCell.js +1 -1
  241. package/dist/components/other/Calendar/CalendarGrid.js +1 -1
  242. package/dist/components/other/Calendar/RangeCalendar.js +1 -1
  243. package/dist/components/other/CloudLogo/CloudLogo.js +1 -1
  244. package/dist/components/overlays/AlertDialog/AlertDialog.js +1 -1
  245. package/dist/components/overlays/AlertDialog/AlertDialogApiProvider.js +1 -1
  246. package/dist/components/overlays/AlertDialog/AlertDialogZone.js +1 -1
  247. package/dist/components/overlays/Dialog/Dialog.js +3 -2
  248. package/dist/components/overlays/Dialog/Dialog.js.map +1 -1
  249. package/dist/components/overlays/Dialog/DialogContainer.js +1 -1
  250. package/dist/components/overlays/Dialog/DialogForm.js +1 -1
  251. package/dist/components/overlays/Dialog/DialogTrigger.js +1 -1
  252. package/dist/components/overlays/Dialog/context.js +1 -1
  253. package/dist/components/overlays/Dialog/use-dialog-container.js +1 -1
  254. package/dist/components/overlays/Modal/Modal.js +1 -1
  255. package/dist/components/overlays/Modal/OpenTransition.js +1 -1
  256. package/dist/components/overlays/Modal/Overlay.js +1 -1
  257. package/dist/components/overlays/Modal/Popover.js +1 -1
  258. package/dist/components/overlays/Modal/Tray.js +1 -1
  259. package/dist/components/overlays/Modal/Underlay.js +1 -1
  260. package/dist/components/overlays/Notifications/Notification.js +1 -1
  261. package/dist/components/overlays/Notifications/NotificationAction.js +1 -1
  262. package/dist/components/overlays/Notifications/NotificationCard.js +1 -1
  263. package/dist/components/overlays/Notifications/NotificationContext.js +1 -1
  264. package/dist/components/overlays/Notifications/NotificationItem.js +1 -1
  265. package/dist/components/overlays/Notifications/OverlayContainer.js +1 -1
  266. package/dist/components/overlays/Notifications/OverlayProvider.js +1 -1
  267. package/dist/components/overlays/Notifications/PersistentNotificationsList.js +1 -1
  268. package/dist/components/overlays/Notifications/dismissed-storage.js +1 -1
  269. package/dist/components/overlays/Notifications/format-relative-time.js +1 -1
  270. package/dist/components/overlays/Notifications/index.js +1 -1
  271. package/dist/components/overlays/Notifications/use-notification-state.js +1 -1
  272. package/dist/components/overlays/Notifications/use-notifications.js +1 -1
  273. package/dist/components/overlays/Notifications/use-overlay-timers.js +1 -1
  274. package/dist/components/overlays/Notifications/use-persistent-notifications.js +1 -1
  275. package/dist/components/overlays/Notifications/use-persistent-state.js +1 -1
  276. package/dist/components/overlays/Notifications/use-toast-state.js +1 -1
  277. package/dist/components/overlays/Toast/ToastItem.js +1 -1
  278. package/dist/components/overlays/Toast/index.js +1 -1
  279. package/dist/components/overlays/Toast/useProgressToast.js +1 -1
  280. package/dist/components/overlays/Toast/useToast.js +1 -1
  281. package/dist/components/overlays/Tooltip/Tooltip.js +3 -2
  282. package/dist/components/overlays/Tooltip/Tooltip.js.map +1 -1
  283. package/dist/components/overlays/Tooltip/TooltipProvider.js +1 -1
  284. package/dist/components/overlays/Tooltip/TooltipTrigger.js +1 -1
  285. package/dist/components/overlays/Tooltip/context.js +1 -1
  286. package/dist/components/portal/Portal.js +1 -1
  287. package/dist/components/portal/PortalProvider.js +1 -1
  288. package/dist/components/portal/usePortal.js +1 -1
  289. package/dist/components/shared/InvalidIcon.js +1 -1
  290. package/dist/components/shared/ValidIcon.js +1 -1
  291. package/dist/components/status/LoadingAnimation/LoadingAnimation.js +1 -1
  292. package/dist/components/status/Spin/Cube.js +1 -1
  293. package/dist/components/status/Spin/InternalSpinner.js +1 -1
  294. package/dist/components/status/Spin/Spin.js +1 -1
  295. package/dist/components/status/Spin/SpinsContainer.js +1 -1
  296. package/dist/data/item-themes.js +1 -1
  297. package/dist/data/themes.js +1 -1
  298. package/dist/icons/AdjustmentsHorizontalIcon.js +1 -1
  299. package/dist/icons/AdjustmentsIcon.js +1 -1
  300. package/dist/icons/AiIcon.js +1 -1
  301. package/dist/icons/AreaChartIcon.js +1 -1
  302. package/dist/icons/BackwardIcon.js +1 -1
  303. package/dist/icons/BarChartIcon.js +1 -1
  304. package/dist/icons/BellFilledIcon.js +1 -1
  305. package/dist/icons/BellIcon.js +1 -1
  306. package/dist/icons/BooleanIcon.js +1 -1
  307. package/dist/icons/CalendarEditIcon.js +1 -1
  308. package/dist/icons/CalendarIcon.js +1 -1
  309. package/dist/icons/CaretDownIcon.js +1 -1
  310. package/dist/icons/CaretUpIcon.js +1 -1
  311. package/dist/icons/ChartAreaStackedIcon.js +1 -1
  312. package/dist/icons/ChartAreaStackedPercentageIcon.js +1 -1
  313. package/dist/icons/ChartBarGroupedHorizontalIcon.js +1 -1
  314. package/dist/icons/ChartBarGroupedIcon.js +1 -1
  315. package/dist/icons/ChartBarHorizontalIcon.js +1 -1
  316. package/dist/icons/ChartBarLineIcon.js +1 -1
  317. package/dist/icons/ChartBarStackedHorizontalIcon.js +1 -1
  318. package/dist/icons/ChartBarStackedIcon.js +1 -1
  319. package/dist/icons/ChartBarStackedPercentageHorizontalIcon.js +1 -1
  320. package/dist/icons/ChartBarStackedPercentageIcon.js +1 -1
  321. package/dist/icons/ChartBoxPlot2Icon.js +1 -1
  322. package/dist/icons/ChartBoxPlotIcon.js +1 -1
  323. package/dist/icons/ChartBubbleIcon.js +1 -1
  324. package/dist/icons/ChartDonut2Icon.js +1 -1
  325. package/dist/icons/ChartFunnelIcon.js +1 -1
  326. package/dist/icons/ChartHeatmapIcon.js +1 -1
  327. package/dist/icons/ChartKPIIcon.js +1 -1
  328. package/dist/icons/ChartPie2Icon.js +1 -1
  329. package/dist/icons/ChartScatterIcon.js +1 -1
  330. package/dist/icons/CheckCircleFilledIcon.js +1 -1
  331. package/dist/icons/CheckCircleIcon.js +1 -1
  332. package/dist/icons/CheckIcon.js +1 -1
  333. package/dist/icons/CircleFilledIcon.js +1 -1
  334. package/dist/icons/ClearIcon.js +1 -1
  335. package/dist/icons/CloseCircleFilledIcon.js +1 -1
  336. package/dist/icons/CloseCircleIcon.js +1 -1
  337. package/dist/icons/CloseIcon.js +1 -1
  338. package/dist/icons/CodeIcon.js +1 -1
  339. package/dist/icons/ColumnTotalIcon.js +1 -1
  340. package/dist/icons/CopyIcon.js +1 -1
  341. package/dist/icons/CountIcon.js +1 -1
  342. package/dist/icons/CubeIcon.js +1 -1
  343. package/dist/icons/CubePauseIcon.js +1 -1
  344. package/dist/icons/CubePlayIcon.js +1 -1
  345. package/dist/icons/CurrencyDollarIcon.js +1 -1
  346. package/dist/icons/DangerIcon.js +1 -1
  347. package/dist/icons/DashboardIcon.js +1 -1
  348. package/dist/icons/DatabaseIcon.js +1 -1
  349. package/dist/icons/DecimalDecreaseIcon.js +1 -1
  350. package/dist/icons/DecimalIncreaseIcon.js +1 -1
  351. package/dist/icons/DirectionIcon.js +1 -1
  352. package/dist/icons/DonutIcon.js +1 -1
  353. package/dist/icons/DownIcon.js +1 -1
  354. package/dist/icons/EditIcon.js +1 -1
  355. package/dist/icons/ExclamationCircleFilledIcon.js +1 -1
  356. package/dist/icons/ExclamationCircleIcon.js +1 -1
  357. package/dist/icons/ExclamationIcon.js +1 -1
  358. package/dist/icons/EyeIcon.js +1 -1
  359. package/dist/icons/EyeInvisibleIcon.js +1 -1
  360. package/dist/icons/FilterIcon.js +1 -1
  361. package/dist/icons/FolderFilledIcon.js +1 -1
  362. package/dist/icons/FolderIcon.js +1 -1
  363. package/dist/icons/FolderOpenFilledIcon.js +1 -1
  364. package/dist/icons/FolderOpenIcon.js +1 -1
  365. package/dist/icons/ForwardIcon.js +1 -1
  366. package/dist/icons/HierarchyIcon.js +1 -1
  367. package/dist/icons/HierarchyOpenIcon.js +1 -1
  368. package/dist/icons/Icon.js +1 -1
  369. package/dist/icons/InfoCircleIcon.js +1 -1
  370. package/dist/icons/InfoIcon.js +1 -1
  371. package/dist/icons/KeyIcon.js +1 -1
  372. package/dist/icons/LeftIcon.js +1 -1
  373. package/dist/icons/LineChartIcon.js +1 -1
  374. package/dist/icons/LoadingIcon.js +1 -1
  375. package/dist/icons/LockFilledIcon.js +1 -1
  376. package/dist/icons/LockIcon.js +1 -1
  377. package/dist/icons/MoreIcon.js +1 -1
  378. package/dist/icons/NotAllowedIcon.js +1 -1
  379. package/dist/icons/Number123Icon.js +1 -1
  380. package/dist/icons/NumberIcon.js +1 -1
  381. package/dist/icons/PauseCircleFilledIcon.js +1 -1
  382. package/dist/icons/PauseCircleIcon.js +1 -1
  383. package/dist/icons/PauseIcon.js +1 -1
  384. package/dist/icons/PercentageIcon.js +1 -1
  385. package/dist/icons/PieChartIcon.js +1 -1
  386. package/dist/icons/PlayCircleIcon.js +1 -1
  387. package/dist/icons/PlayIcon.js +1 -1
  388. package/dist/icons/PlusIcon.js +1 -1
  389. package/dist/icons/ProgressBarIcon.js +1 -1
  390. package/dist/icons/ReloadIcon.js +1 -1
  391. package/dist/icons/ReportIcon.js +1 -1
  392. package/dist/icons/ReturnIcon.js +1 -1
  393. package/dist/icons/RightIcon.js +1 -1
  394. package/dist/icons/RowTotalsIcon.js +1 -1
  395. package/dist/icons/SchemeIcon.js +1 -1
  396. package/dist/icons/SearchIcon.js +1 -1
  397. package/dist/icons/SemanticQueryIcon.js +1 -1
  398. package/dist/icons/SettingsIcon.js +1 -1
  399. package/dist/icons/ShieldFilledIcon.js +1 -1
  400. package/dist/icons/ShieldIcon.js +1 -1
  401. package/dist/icons/SlashIcon.js +1 -1
  402. package/dist/icons/SparklesIcon.js +1 -1
  403. package/dist/icons/SqlIcon.js +1 -1
  404. package/dist/icons/StatsIcon.js +1 -1
  405. package/dist/icons/StopIcon.js +1 -1
  406. package/dist/icons/StringIcon.js +1 -1
  407. package/dist/icons/SubtotalsIcon.js +1 -1
  408. package/dist/icons/SwitchIcon.js +1 -1
  409. package/dist/icons/TableIcon.js +1 -1
  410. package/dist/icons/ThumbsDownIcon.js +1 -1
  411. package/dist/icons/ThumbsUpIcon.js +1 -1
  412. package/dist/icons/ThunderboltCrossedIcon.js +1 -1
  413. package/dist/icons/ThunderboltFilledIcon.js +1 -1
  414. package/dist/icons/ThunderboltIcon.js +1 -1
  415. package/dist/icons/TimeIcon.js +1 -1
  416. package/dist/icons/TrashIcon.js +1 -1
  417. package/dist/icons/UnlockIcon.js +1 -1
  418. package/dist/icons/UpIcon.js +1 -1
  419. package/dist/icons/UserGroupIcon.js +1 -1
  420. package/dist/icons/UserIcon.js +1 -1
  421. package/dist/icons/UserLockIcon.js +1 -1
  422. package/dist/icons/ViewIcon.js +1 -1
  423. package/dist/icons/WarningFilledIcon.js +1 -1
  424. package/dist/icons/WarningIcon.js +1 -1
  425. package/dist/icons/wrap-icon.js +1 -1
  426. package/dist/index.d.ts +3 -2
  427. package/dist/index.js +3 -2
  428. package/dist/index.js.map +1 -1
  429. package/dist/provider.js +1 -1
  430. package/dist/providers/TrackingProvider.js +1 -1
  431. package/dist/providers/navigationAdapter.default.js +1 -1
  432. package/dist/tokens/base.js +1 -1
  433. package/dist/tokens/colors.js +1 -1
  434. package/dist/tokens/index.js +1 -1
  435. package/dist/tokens/layout.js +1 -1
  436. package/dist/tokens/shadows.js +1 -1
  437. package/dist/tokens/sizes.js +1 -1
  438. package/dist/tokens/spacing.js +1 -1
  439. package/dist/tokens/typography.js +1 -1
  440. package/dist/utils/ResizeSensor.js +1 -1
  441. package/dist/utils/index.d.ts +1 -0
  442. package/dist/utils/is-dev-env.js +1 -1
  443. package/dist/utils/modules.js +1 -1
  444. package/dist/utils/promise.js +1 -1
  445. package/dist/utils/raf.js +1 -1
  446. package/dist/utils/random.js +1 -1
  447. package/dist/utils/range.js +1 -1
  448. package/dist/utils/react/RenderCache.js +1 -1
  449. package/dist/utils/react/Slots.js +1 -1
  450. package/dist/utils/react/chain.js +1 -1
  451. package/dist/utils/react/forwardRefWithGenerics.js +1 -1
  452. package/dist/utils/react/index.js +1 -1
  453. package/dist/utils/react/interactions.js +1 -1
  454. package/dist/utils/react/isTextOnly.js +1 -1
  455. package/dist/utils/react/mapProps.js +1 -1
  456. package/dist/utils/react/mergeProps.js +1 -1
  457. package/dist/utils/react/nullableValue.js +1 -1
  458. package/dist/utils/react/resolveIcon.js +1 -1
  459. package/dist/utils/react/sharedStore.js +1 -1
  460. package/dist/utils/react/useCombinedRefs.js +1 -1
  461. package/dist/utils/react/useControlledFocusVisible.js +1 -1
  462. package/dist/utils/react/useEventBus.js +1 -1
  463. package/dist/utils/react/useId.js +1 -1
  464. package/dist/utils/react/useIsDarwin.js +1 -1
  465. package/dist/utils/react/useKeySymbols.js +1 -1
  466. package/dist/utils/react/useLayoutEffect.js +1 -1
  467. package/dist/utils/react/useLocalStorage.js +1 -1
  468. package/dist/utils/react/useMergeStyles.js +1 -1
  469. package/dist/utils/react/useQaProps.js +1 -1
  470. package/dist/utils/react/useViewportSize.js +1 -1
  471. package/dist/utils/react/wrapNodeIfPlain.js +1 -1
  472. package/dist/utils/styles.d.ts +19 -0
  473. package/dist/utils/styles.js +31 -0
  474. package/dist/utils/styles.js.map +1 -0
  475. package/dist/utils/tree.js +1 -1
  476. package/dist/utils/warnings.js +1 -1
  477. package/dist/version.js +2 -2
  478. package/docs/components/navigation/Tabs.md +18 -3
  479. package/docs/tasty/tasty-static.md +6 -7
  480. package/package.json +2 -2
@@ -1,4 +1,5 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
2
+ import { extractStyles } from "../../../utils/styles.js";
2
3
  import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
3
4
  import { useEvent } from "../../../_internal/hooks/use-event.js";
4
5
  import { useMergeStyles } from "../../../utils/react/useMergeStyles.js";
@@ -14,7 +15,7 @@ import { TabPicker } from "./TabPicker.js";
14
15
  import { TabsAction } from "./TabsAction.js";
15
16
  import { useTabEditing } from "./use-tab-editing.js";
16
17
  import { useTabIndicator } from "./use-tab-indicator.js";
17
- import { OUTER_STYLES, extractStyles, mergeStyles } from "@tenphi/tasty";
18
+ import { OUTER_STYLES, mergeStyles } from "@tenphi/tasty";
18
19
  import { Children, forwardRef, isValidElement, useEffect, useMemo, useRef } from "react";
19
20
  import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
20
21
  import { useTabList } from "react-aria";
@@ -1 +1 @@
1
- {"version":3,"file":"Tabs.js","names":["CollectionItem","mergeProps"],"sources":["../../../../src/components/navigation/Tabs/Tabs.tsx"],"sourcesContent":["import { extractStyles, mergeStyles, OUTER_STYLES } from '@tenphi/tasty';\nimport {\n Children,\n ForwardedRef,\n forwardRef,\n isValidElement,\n ReactElement,\n ReactNode,\n useEffect,\n useMemo,\n useRef,\n} from 'react';\nimport { AriaTabListProps, useTabList } from 'react-aria';\nimport {\n Item as CollectionItem,\n DraggableCollectionState,\n DroppableCollectionState,\n useTabListState,\n} from 'react-stately';\n\nimport { useEvent, useWarn } from '../../../_internal/hooks';\nimport { DirectionIcon } from '../../../icons';\nimport { mergeProps, useMergeStyles } from '../../../utils/react';\nimport { useTinyScrollbar } from '../../content/Layout/hooks/useTinyScrollbar';\n\nimport { DraggableTabList } from './DraggableTabList';\nimport { TabIndicatorElement, TabsElement } from './styled';\nimport { TabButton } from './TabButton';\nimport { CachedPanelRenderer, TabPanelRenderer } from './TabPanel';\nimport { TabPicker } from './TabPicker';\nimport { TabsAction } from './TabsAction';\nimport { TabsContextValue, TabsProvider } from './TabsContext';\nimport { useTabEditing } from './use-tab-editing';\nimport { useTabIndicator } from './use-tab-indicator';\n\nimport type { Key } from '@react-types/shared';\nimport type {\n CubeTabListProps,\n CubeTabPanelProps,\n CubeTabProps,\n CubeTabsProps,\n ParsedPanel,\n ParsedTab,\n} from './types';\n\n// =============================================================================\n// Helper Functions\n// =============================================================================\n\n/**\n * Generic helper to check if a child is a specific component by displayName.\n */\nfunction isComponentElement<T>(\n child: ReactNode,\n displayName: string,\n): child is ReactElement<T> {\n return (\n isValidElement(child) &&\n typeof child.type === 'function' &&\n (child.type as any).displayName === displayName\n );\n}\n\n/** Checks if a child is a Tab component. */\nconst isTabElement = (child: ReactNode): child is ReactElement<CubeTabProps> =>\n isComponentElement<CubeTabProps>(child, 'CubeTab');\n\n/** Checks if a child is a TabPanel component. */\nconst isTabPanelElement = (\n child: ReactNode,\n): child is ReactElement<CubeTabPanelProps> =>\n isComponentElement<CubeTabPanelProps>(child, 'CubeTabPanel');\n\n/** Checks if a child is a TabList component. */\nconst isTabListElement = (\n child: ReactNode,\n): child is ReactElement<CubeTabListProps> =>\n isComponentElement<CubeTabListProps>(child, 'CubeTabList');\n\n/**\n * Extracts the raw key from a React element, stripping the \".$\" prefix\n * that React adds via Children.map/toArray.\n */\nfunction getRawKey(element: ReactElement): string | null {\n if (element.key == null) return null;\n const keyStr = String(element.key);\n return keyStr.startsWith('.$') ? keyStr.slice(2) : keyStr;\n}\n\n// =============================================================================\n// Tab Component (configuration only - not rendered directly)\n// =============================================================================\n\nfunction Tab(_props: CubeTabProps): ReactElement | null {\n return null;\n}\n\nTab.displayName = 'CubeTab';\n\n// =============================================================================\n// TabPanel Component (configuration only - not rendered directly)\n// =============================================================================\n\nfunction TabPanel(_props: CubeTabPanelProps): ReactElement | null {\n return null;\n}\n\nTabPanel.displayName = 'CubeTabPanel';\n\n// =============================================================================\n// TabList Component (configuration only - not rendered directly)\n// =============================================================================\n\nfunction TabList(_props: CubeTabListProps): ReactElement | null {\n return null;\n}\n\nTabList.displayName = 'CubeTabList';\n\n// =============================================================================\n// Main Tabs Component\n// =============================================================================\n\nfunction TabsComponent(\n props: CubeTabsProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const {\n label = 'Tabs',\n defaultActiveKey,\n activeKey,\n size,\n type = 'default',\n onChange,\n onDelete,\n onTitleChange,\n autoHideActions,\n isEditable: parentIsEditable,\n menu: parentMenu,\n menuTriggerProps: parentMenuTriggerProps,\n menuProps: parentMenuProps,\n contextMenu: parentContextMenu,\n onAction: parentOnAction,\n children,\n prefix,\n suffix,\n prerender = false,\n keepMounted = false,\n qa = 'Tabs',\n renderPanel,\n panelCacheKeys,\n isReorderable = false,\n keyOrder,\n onReorder,\n showTabPicker = false,\n showScrollArrows = false,\n tabPickerPosition = 'suffix',\n scrollArrowsPosition = 'suffix',\n tabListPadding,\n tabListStyles,\n prefixStyles,\n suffixStyles,\n ...otherProps\n } = props;\n\n // Extract outer styles\n const baseStyles = extractStyles(otherProps, OUTER_STYLES);\n\n // Build TabList padding style (memoized)\n const tabListPaddingStyles = useMemo(\n () =>\n tabListPadding ? { '$tablist-padding': `${tabListPadding}` } : undefined,\n [tabListPadding],\n );\n\n // Merge tabListPaddingStyles with tabListStyles (memoized)\n const mergedTabListStyles = useMemo(\n () => mergeStyles(tabListPaddingStyles, tabListStyles),\n [tabListPaddingStyles, tabListStyles],\n );\n\n // Merge all sub-element styles into baseStyles\n const combinedStyles = useMergeStyles(baseStyles, {\n TabList: mergedTabListStyles,\n Prefix: prefixStyles,\n Suffix: suffixStyles,\n });\n\n // DOM element refs\n const listRef = useRef<HTMLDivElement>(null);\n const scrollRef = useRef<HTMLDivElement>(null);\n\n // Track visited tabs for keepMounted functionality\n const visitedKeysRef = useRef<Set<string>>(new Set());\n\n // =========================================================================\n // Tab Title Editing Hook\n // =========================================================================\n const {\n editingKey,\n editValue,\n setEditValue,\n startEditing,\n cancelEditing,\n submitEditing,\n } = useTabEditing({ onChange, onTitleChange });\n\n // =========================================================================\n // Parse children to extract tabs and explicit panels\n // =========================================================================\n const { parsedTabs, explicitPanels, hasAnyContent } = useMemo(() => {\n const childArray = Children.toArray(children);\n const tabs: ParsedTab[] = [];\n const panels = new Map<string, ParsedPanel>();\n let hasExplicitList = false;\n let tabChildren: ReactNode[] = [];\n\n // Check for explicit Tabs.List / Tabs.Panel structure\n for (const child of childArray) {\n if (isTabListElement(child)) {\n hasExplicitList = true;\n tabChildren = Children.toArray(child.props.children);\n } else if (isTabPanelElement(child)) {\n const key = getRawKey(child as ReactElement);\n\n if (key != null) {\n panels.set(key, {\n key,\n content: child.props.children,\n prerender: child.props.prerender,\n keepMounted: child.props.keepMounted,\n styles: child.props.styles,\n qa: child.props.qa,\n qaVal: child.props.qaVal,\n });\n }\n }\n }\n\n // If no explicit list, use direct Tab children\n if (!hasExplicitList) {\n tabChildren = childArray;\n }\n\n // Parse Tab elements\n let hasContent = panels.size > 0;\n\n for (const child of tabChildren) {\n if (isTabElement(child)) {\n const key = getRawKey(child) ?? child.props.id;\n\n if (key != null) {\n const { id: _id, children: tabContent, ...tabProps } = child.props;\n\n tabs.push({\n ...tabProps,\n key,\n content: tabContent,\n });\n\n if (tabContent != null) {\n hasContent = true;\n }\n }\n }\n }\n\n return {\n parsedTabs: tabs,\n explicitPanels: panels,\n hasAnyContent: hasContent,\n };\n }, [children]);\n\n // Clean up visitedKeys when tabs are removed\n const currentTabKeysSet = useMemo(\n () => new Set(parsedTabs.map((t) => t.key)),\n [parsedTabs],\n );\n\n useEffect(() => {\n for (const key of visitedKeysRef.current) {\n if (!currentTabKeysSet.has(key)) {\n visitedKeysRef.current.delete(key);\n }\n }\n }, [currentTabKeysSet]);\n\n // =========================================================================\n // Order tabs according to keyOrder\n // =========================================================================\n const orderedParsedTabs = useMemo(() => {\n if (!keyOrder || keyOrder.length === 0) {\n return parsedTabs;\n }\n\n const tabMap = new Map<string, ParsedTab>();\n for (const tab of parsedTabs) {\n tabMap.set(tab.key, tab);\n }\n\n const ordered: ParsedTab[] = [];\n for (const key of keyOrder) {\n const tab = tabMap.get(String(key));\n if (tab) {\n ordered.push(tab);\n tabMap.delete(String(key));\n }\n }\n\n // Append any tabs not in keyOrder\n for (const tab of parsedTabs) {\n if (tabMap.has(tab.key)) {\n ordered.push(tab);\n }\n }\n\n return ordered;\n }, [parsedTabs, keyOrder]);\n\n // Create collection items for React Stately\n const collectionItems = useMemo(() => {\n return orderedParsedTabs.map((tab) => (\n <CollectionItem\n key={tab.key}\n textValue={typeof tab.title === 'string' ? tab.title : String(tab.key)}\n >\n {tab.title}\n </CollectionItem>\n ));\n }, [orderedParsedTabs]);\n\n // Determine disabled keys\n const disabledKeys = useMemo(() => {\n return new Set(\n parsedTabs.filter((tab) => tab.isDisabled).map((tab) => tab.key),\n );\n }, [parsedTabs]);\n\n // Handle selection change (converts React Aria's Key to string for our API)\n const handleSelectionChange = useEvent((key: Key) => {\n const keyStr = String(key);\n visitedKeysRef.current.add(keyStr);\n onChange?.(keyStr);\n });\n\n // Convert keys to strings for React Aria compatibility\n const selectedKey = activeKey != null ? String(activeKey) : undefined;\n const defaultSelectedKey =\n defaultActiveKey != null ? String(defaultActiveKey) : undefined;\n\n // Create aria props for useTabListState\n const ariaProps: AriaTabListProps<object> = useMemo(\n () => ({\n selectedKey,\n defaultSelectedKey,\n onSelectionChange: handleSelectionChange,\n disabledKeys,\n children: collectionItems,\n 'aria-label': label,\n }),\n [\n selectedKey,\n defaultSelectedKey,\n handleSelectionChange,\n disabledKeys,\n collectionItems,\n label,\n ],\n );\n\n // Create state using useTabListState\n const state = useTabListState(ariaProps);\n\n // Track initial selected key for visited tabs\n useEffect(() => {\n if (state.selectedKey != null) {\n visitedKeysRef.current.add(String(state.selectedKey));\n }\n }, [state.selectedKey]);\n\n // Get tablist props from react-aria\n const { tabListProps } = useTabList(ariaProps, state, listRef);\n\n // Handle selection from TabPicker (needs to update internal state in uncontrolled mode)\n const handleTabPickerSelect = useEvent((key: string) => {\n // Update internal state (for uncontrolled mode)\n state.setSelectedKey(key);\n // Also call the external onChange handler\n handleSelectionChange(key);\n });\n\n // =========================================================================\n // Tab Indicator (for default type)\n // =========================================================================\n // Create order token that changes when tab order changes (for indicator recalculation)\n const orderToken = useMemo(\n () => orderedParsedTabs.map((t) => t.key).join(','),\n [orderedParsedTabs],\n );\n\n const indicatorStyle = useTabIndicator(\n listRef,\n state.selectedKey,\n type === 'default' || type === 'narrow',\n orderToken,\n );\n\n // =========================================================================\n // Tiny Scrollbar (not for radio type)\n // =========================================================================\n const isTinyScrollbar = type !== 'radio';\n const { handleHStyle, hasOverflowX, isScrolling, isAtStartX, isAtEndX } =\n useTinyScrollbar(scrollRef, isTinyScrollbar);\n\n const hasPanels = hasAnyContent || !!renderPanel;\n\n // =========================================================================\n // Tab Picker visibility\n // =========================================================================\n useWarn(showTabPicker && type === 'radio', {\n key: ['tabs-tabpicker-radio-unsupported'],\n args: [\n 'Tabs:',\n '`showTabPicker` is not supported when `type=\"radio\"`. The TabPicker will not be rendered.',\n ],\n });\n\n const shouldShowTabPicker =\n type !== 'radio' &&\n (showTabPicker === true || (showTabPicker === 'auto' && hasOverflowX));\n\n // =========================================================================\n // Scroll Arrows visibility and handlers\n // =========================================================================\n useWarn(showScrollArrows && type === 'radio', {\n key: ['tabs-scrollarrows-radio-unsupported'],\n args: [\n 'Tabs:',\n '`showScrollArrows` is not supported when `type=\"radio\"`. The scroll arrows will not be rendered.',\n ],\n });\n\n const shouldShowScrollArrows =\n type !== 'radio' &&\n (showScrollArrows === true ||\n (showScrollArrows === 'auto' && hasOverflowX));\n\n const handleScrollLeft = useEvent(() => {\n const el = scrollRef.current;\n if (el) {\n el.scrollTo({\n left: el.scrollLeft - el.clientWidth,\n behavior: 'smooth',\n });\n }\n });\n\n const handleScrollRight = useEvent(() => {\n const el = scrollRef.current;\n if (el) {\n el.scrollTo({\n left: el.scrollLeft + el.clientWidth,\n behavior: 'smooth',\n });\n }\n });\n\n // =========================================================================\n // Base Context Value (without drag/drop states)\n // =========================================================================\n const baseContextValue = useMemo(\n () => ({\n state,\n type,\n size,\n autoHideActions,\n isEditable: parentIsEditable,\n menu: parentMenu,\n menuTriggerProps: parentMenuTriggerProps,\n menuProps: parentMenuProps,\n contextMenu: parentContextMenu,\n onDelete,\n onAction: parentOnAction,\n editingKey,\n editValue,\n setEditValue,\n startEditing,\n submitEditing,\n cancelEditing,\n }),\n [\n state,\n type,\n size,\n autoHideActions,\n parentIsEditable,\n parentMenu,\n parentMenuTriggerProps,\n parentMenuProps,\n parentContextMenu,\n onDelete,\n parentOnAction,\n editingKey,\n editValue,\n setEditValue,\n startEditing,\n submitEditing,\n cancelEditing,\n ],\n );\n\n // Helper to create full context value with optional drag/drop states\n const createContextValue = (\n dragState?: DraggableCollectionState,\n dropState?: DroppableCollectionState,\n ): TabsContextValue => ({\n ...baseContextValue,\n dragState,\n dropState,\n });\n\n // =========================================================================\n // Tab List Content Renderer\n // =========================================================================\n const renderTabListContent = (\n contextValue: TabsContextValue,\n collectionProps: Record<string, unknown> = {},\n ) => (\n <div\n {...mergeProps(tabListProps, collectionProps)}\n ref={listRef}\n data-element=\"TabList\"\n >\n <TabsProvider value={contextValue}>\n {orderedParsedTabs.map((tab, index) => {\n const item = state.collection.getItem(tab.key);\n if (!item) return null;\n\n return (\n <TabButton\n key={item.key}\n item={item}\n tabData={tab}\n isLastTab={index === orderedParsedTabs.length - 1}\n />\n );\n })}\n </TabsProvider>\n {indicatorStyle && (\n <TabIndicatorElement\n style={{\n left: indicatorStyle.left,\n width: indicatorStyle.width,\n }}\n />\n )}\n </div>\n );\n\n // =========================================================================\n // Mods for styling\n // =========================================================================\n const mods = useMemo(\n () => ({\n type,\n size,\n deletable: !!onDelete,\n scrolling: isScrolling,\n 'fade-left': !isAtStartX,\n 'fade-right': !isAtEndX,\n 'has-panels': hasPanels,\n }),\n [type, size, onDelete, isScrolling, isAtStartX, isAtEndX, hasPanels],\n );\n\n // =========================================================================\n // Action Elements (TabPicker and Scroll Arrows)\n // =========================================================================\n const scrollArrowsElement = shouldShowScrollArrows ? (\n <>\n <TabsAction\n icon={<DirectionIcon to=\"left\" />}\n aria-label=\"Scroll tabs left\"\n isDisabled={isAtStartX}\n onPress={handleScrollLeft}\n />\n <TabsAction\n icon={<DirectionIcon to=\"right\" />}\n aria-label=\"Scroll tabs right\"\n isDisabled={isAtEndX}\n onPress={handleScrollRight}\n />\n </>\n ) : null;\n\n const tabPickerElement = shouldShowTabPicker ? (\n <TabPicker\n tabs={orderedParsedTabs}\n selectedKey={state.selectedKey}\n size={size}\n type={type}\n onSelect={handleTabPickerSelect}\n onDelete={onDelete}\n />\n ) : null;\n\n // Determine which actions go in prefix/suffix\n // In prefix: TabPicker first (left), then scroll arrows (right)\n // In suffix: scroll arrows first (left), then TabPicker (right)\n const prefixHasActions =\n (shouldShowTabPicker && tabPickerPosition === 'prefix') ||\n (shouldShowScrollArrows && scrollArrowsPosition === 'prefix');\n\n const suffixHasActions =\n (shouldShowTabPicker && tabPickerPosition === 'suffix') ||\n (shouldShowScrollArrows && scrollArrowsPosition === 'suffix');\n\n // Wrap with TabsProvider so prefix/suffix can access context (size, type)\n // The inner TabsProvider in renderTabListContent will override for tab buttons\n return (\n <TabsProvider value={baseContextValue}>\n <TabsElement\n ref={ref}\n qa={qa}\n mods={mods}\n styles={combinedStyles}\n style={handleHStyle}\n data-size={size}\n >\n {prefix || prefixHasActions ? (\n <div data-element=\"Prefix\">\n {tabPickerPosition === 'prefix' && tabPickerElement}\n {scrollArrowsPosition === 'prefix' && scrollArrowsElement}\n {prefix}\n </div>\n ) : null}\n <div data-element=\"ScrollWrapper\">\n <div ref={scrollRef} data-element=\"Scroll\">\n {isReorderable ? (\n <DraggableTabList\n state={state}\n listRef={listRef}\n orderedKeys={orderedParsedTabs.map((t) => t.key)}\n onReorder={onReorder}\n >\n {(dragState, dropState, collectionProps) =>\n renderTabListContent(\n createContextValue(dragState, dropState),\n collectionProps,\n )\n }\n </DraggableTabList>\n ) : (\n renderTabListContent(createContextValue())\n )}\n </div>\n {isTinyScrollbar && hasOverflowX && <div data-element=\"ScrollbarH\" />}\n </div>\n {suffix || suffixHasActions ? (\n <div data-element=\"Suffix\">\n {scrollArrowsPosition === 'suffix' && scrollArrowsElement}\n {tabPickerPosition === 'suffix' && tabPickerElement}\n {suffix}\n </div>\n ) : null}\n </TabsElement>\n\n {/* Functional panel rendering with content caching */}\n {renderPanel && (\n <CachedPanelRenderer\n parsedTabs={parsedTabs}\n explicitPanels={explicitPanels}\n state={state}\n renderPanel={renderPanel}\n panelCacheKeys={panelCacheKeys}\n prerender={prerender}\n keepMounted={keepMounted}\n visitedKeys={visitedKeysRef.current}\n />\n )}\n\n {/* Static panel rendering (traditional children-based approach) */}\n {!renderPanel &&\n hasAnyContent &&\n parsedTabs.map((tab) => {\n const explicitPanel = explicitPanels.get(tab.key);\n const content = explicitPanel?.content ?? tab.content;\n\n if (content == null) return null;\n\n return (\n <TabPanelRenderer\n key={tab.key}\n tabKey={tab.key}\n state={state}\n content={content}\n prerender={prerender}\n keepMounted={keepMounted}\n tabPrerender={explicitPanel?.prerender ?? tab.prerender}\n tabKeepMounted={explicitPanel?.keepMounted ?? tab.keepMounted}\n visitedKeys={visitedKeysRef.current}\n panelStyles={explicitPanel?.styles}\n qa={explicitPanel?.qa}\n qaVal={explicitPanel?.qaVal}\n />\n );\n })}\n </TabsProvider>\n );\n}\n\n// =============================================================================\n// Exports\n// =============================================================================\n\nconst _Tabs = forwardRef(TabsComponent);\n\n/**\n * Tabs component for organizing content into multiple panels.\n * Built with React Aria for full accessibility support.\n *\n * **Note:** Tab keys are internally converted to strings for React Aria compatibility.\n *\n * @example\n * // Simple usage\n * <Tabs defaultActiveKey=\"tab1\">\n * <Tab key=\"tab1\" title=\"Tab 1\">Content 1</Tab>\n * <Tab key=\"tab2\" title=\"Tab 2\">Content 2</Tab>\n * </Tabs>\n *\n * @example\n * // Tabs-only (no panels)\n * <Tabs activeKey={activeTab} onChange={setActiveTab}>\n * <Tab key=\"overview\" title=\"Overview\" />\n * <Tab key=\"settings\" title=\"Settings\" />\n * </Tabs>\n *\n * @example\n * // Explicit panels\n * <Tabs defaultActiveKey=\"tab1\">\n * <Tabs.List>\n * <Tab key=\"tab1\" title=\"Tab 1\" />\n * <Tab key=\"tab2\" title=\"Tab 2\" />\n * </Tabs.List>\n * <Tabs.Panel key=\"tab1\">Content 1</Tabs.Panel>\n * <Tabs.Panel key=\"tab2\">Content 2</Tabs.Panel>\n * </Tabs>\n */\nexport const Tabs = Object.assign(_Tabs, {\n Tab,\n List: TabList,\n Panel: TabPanel,\n Action: TabsAction,\n});\n\nexport { Tab, TabList, TabPanel, TabsAction };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,SAAS,mBACP,OACA,aAC0B;AAC1B,QACE,eAAe,MAAM,IACrB,OAAO,MAAM,SAAS,cACrB,MAAM,KAAa,gBAAgB;;;AAKxC,MAAM,gBAAgB,UACpB,mBAAiC,OAAO,UAAU;;AAGpD,MAAM,qBACJ,UAEA,mBAAsC,OAAO,eAAe;;AAG9D,MAAM,oBACJ,UAEA,mBAAqC,OAAO,cAAc;;;;;AAM5D,SAAS,UAAU,SAAsC;AACvD,KAAI,QAAQ,OAAO,KAAM,QAAO;CAChC,MAAM,SAAS,OAAO,QAAQ,IAAI;AAClC,QAAO,OAAO,WAAW,KAAK,GAAG,OAAO,MAAM,EAAE,GAAG;;AAOrD,SAAS,IAAI,QAA2C;AACtD,QAAO;;AAGT,IAAI,cAAc;AAMlB,SAAS,SAAS,QAAgD;AAChE,QAAO;;AAGT,SAAS,cAAc;AAMvB,SAAS,QAAQ,QAA+C;AAC9D,QAAO;;AAGT,QAAQ,cAAc;AAMtB,SAAS,cACP,OACA,KACA;CACA,MAAM,EACJ,QAAQ,QACR,kBACA,WACA,MACA,OAAO,WACP,UACA,UACA,eACA,iBACA,YAAY,kBACZ,MAAM,YACN,kBAAkB,wBAClB,WAAW,iBACX,aAAa,mBACb,UAAU,gBACV,UACA,QACA,QACA,YAAY,OACZ,cAAc,OACd,KAAK,QACL,aACA,gBACA,gBAAgB,OAChB,UACA,WACA,gBAAgB,OAChB,mBAAmB,OACnB,oBAAoB,UACpB,uBAAuB,UACvB,gBACA,eACA,cACA,cACA,GAAG,eACD;CAGJ,MAAM,aAAa,cAAc,YAAY,aAAa;CAG1D,MAAM,uBAAuB,cAEzB,iBAAiB,EAAE,oBAAoB,GAAG,kBAAkB,GAAG,QACjE,CAAC,eAAe,CACjB;CASD,MAAM,iBAAiB,eAAe,YAAY;EAChD,SAP0B,cACpB,YAAY,sBAAsB,cAAc,EACtD,CAAC,sBAAsB,cAAc,CACtC;EAKC,QAAQ;EACR,QAAQ;EACT,CAAC;CAGF,MAAM,UAAU,OAAuB,KAAK;CAC5C,MAAM,YAAY,OAAuB,KAAK;CAG9C,MAAM,iBAAiB,uBAAoB,IAAI,KAAK,CAAC;CAKrD,MAAM,EACJ,YACA,WACA,cACA,cACA,eACA,kBACE,cAAc;EAAE;EAAU;EAAe,CAAC;CAK9C,MAAM,EAAE,YAAY,gBAAgB,kBAAkB,cAAc;EAClE,MAAM,aAAa,SAAS,QAAQ,SAAS;EAC7C,MAAM,OAAoB,EAAE;EAC5B,MAAM,yBAAS,IAAI,KAA0B;EAC7C,IAAI,kBAAkB;EACtB,IAAI,cAA2B,EAAE;AAGjC,OAAK,MAAM,SAAS,WAClB,KAAI,iBAAiB,MAAM,EAAE;AAC3B,qBAAkB;AAClB,iBAAc,SAAS,QAAQ,MAAM,MAAM,SAAS;aAC3C,kBAAkB,MAAM,EAAE;GACnC,MAAM,MAAM,UAAU,MAAsB;AAE5C,OAAI,OAAO,KACT,QAAO,IAAI,KAAK;IACd;IACA,SAAS,MAAM,MAAM;IACrB,WAAW,MAAM,MAAM;IACvB,aAAa,MAAM,MAAM;IACzB,QAAQ,MAAM,MAAM;IACpB,IAAI,MAAM,MAAM;IAChB,OAAO,MAAM,MAAM;IACpB,CAAC;;AAMR,MAAI,CAAC,gBACH,eAAc;EAIhB,IAAI,aAAa,OAAO,OAAO;AAE/B,OAAK,MAAM,SAAS,YAClB,KAAI,aAAa,MAAM,EAAE;GACvB,MAAM,MAAM,UAAU,MAAM,IAAI,MAAM,MAAM;AAE5C,OAAI,OAAO,MAAM;IACf,MAAM,EAAE,IAAI,KAAK,UAAU,YAAY,GAAG,aAAa,MAAM;AAE7D,SAAK,KAAK;KACR,GAAG;KACH;KACA,SAAS;KACV,CAAC;AAEF,QAAI,cAAc,KAChB,cAAa;;;AAMrB,SAAO;GACL,YAAY;GACZ,gBAAgB;GAChB,eAAe;GAChB;IACA,CAAC,SAAS,CAAC;CAGd,MAAM,oBAAoB,cAClB,IAAI,IAAI,WAAW,KAAK,MAAM,EAAE,IAAI,CAAC,EAC3C,CAAC,WAAW,CACb;AAED,iBAAgB;AACd,OAAK,MAAM,OAAO,eAAe,QAC/B,KAAI,CAAC,kBAAkB,IAAI,IAAI,CAC7B,gBAAe,QAAQ,OAAO,IAAI;IAGrC,CAAC,kBAAkB,CAAC;CAKvB,MAAM,oBAAoB,cAAc;AACtC,MAAI,CAAC,YAAY,SAAS,WAAW,EACnC,QAAO;EAGT,MAAM,yBAAS,IAAI,KAAwB;AAC3C,OAAK,MAAM,OAAO,WAChB,QAAO,IAAI,IAAI,KAAK,IAAI;EAG1B,MAAM,UAAuB,EAAE;AAC/B,OAAK,MAAM,OAAO,UAAU;GAC1B,MAAM,MAAM,OAAO,IAAI,OAAO,IAAI,CAAC;AACnC,OAAI,KAAK;AACP,YAAQ,KAAK,IAAI;AACjB,WAAO,OAAO,OAAO,IAAI,CAAC;;;AAK9B,OAAK,MAAM,OAAO,WAChB,KAAI,OAAO,IAAI,IAAI,IAAI,CACrB,SAAQ,KAAK,IAAI;AAIrB,SAAO;IACN,CAAC,YAAY,SAAS,CAAC;CAG1B,MAAM,kBAAkB,cAAc;AACpC,SAAO,kBAAkB,KAAK,QAC5B,oBAACA;GAEC,WAAW,OAAO,IAAI,UAAU,WAAW,IAAI,QAAQ,OAAO,IAAI,IAAI;aAErE,IAAI;KAHA,IAAI,IAIM,CACjB;IACD,CAAC,kBAAkB,CAAC;CAGvB,MAAM,eAAe,cAAc;AACjC,SAAO,IAAI,IACT,WAAW,QAAQ,QAAQ,IAAI,WAAW,CAAC,KAAK,QAAQ,IAAI,IAAI,CACjE;IACA,CAAC,WAAW,CAAC;CAGhB,MAAM,wBAAwB,UAAU,QAAa;EACnD,MAAM,SAAS,OAAO,IAAI;AAC1B,iBAAe,QAAQ,IAAI,OAAO;AAClC,aAAW,OAAO;GAClB;CAGF,MAAM,cAAc,aAAa,OAAO,OAAO,UAAU,GAAG;CAC5D,MAAM,qBACJ,oBAAoB,OAAO,OAAO,iBAAiB,GAAG;CAGxD,MAAM,YAAsC,eACnC;EACL;EACA;EACA,mBAAmB;EACnB;EACA,UAAU;EACV,cAAc;EACf,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAGD,MAAM,QAAQ,gBAAgB,UAAU;AAGxC,iBAAgB;AACd,MAAI,MAAM,eAAe,KACvB,gBAAe,QAAQ,IAAI,OAAO,MAAM,YAAY,CAAC;IAEtD,CAAC,MAAM,YAAY,CAAC;CAGvB,MAAM,EAAE,iBAAiB,WAAW,WAAW,OAAO,QAAQ;CAG9D,MAAM,wBAAwB,UAAU,QAAgB;AAEtD,QAAM,eAAe,IAAI;AAEzB,wBAAsB,IAAI;GAC1B;CAMF,MAAM,aAAa,cACX,kBAAkB,KAAK,MAAM,EAAE,IAAI,CAAC,KAAK,IAAI,EACnD,CAAC,kBAAkB,CACpB;CAED,MAAM,iBAAiB,gBACrB,SACA,MAAM,aACN,SAAS,aAAa,SAAS,UAC/B,WACD;CAKD,MAAM,kBAAkB,SAAS;CACjC,MAAM,EAAE,cAAc,cAAc,aAAa,YAAY,aAC3D,iBAAiB,WAAW,gBAAgB;CAE9C,MAAM,YAAY,iBAAiB,CAAC,CAAC;AAKrC,SAAQ,iBAAiB,SAAS,SAAS;EACzC,KAAK,CAAC,mCAAmC;EACzC,MAAM,CACJ,SACA,8FACD;EACF,CAAC;CAEF,MAAM,sBACJ,SAAS,YACR,kBAAkB,QAAS,kBAAkB,UAAU;AAK1D,SAAQ,oBAAoB,SAAS,SAAS;EAC5C,KAAK,CAAC,sCAAsC;EAC5C,MAAM,CACJ,SACA,qGACD;EACF,CAAC;CAEF,MAAM,yBACJ,SAAS,YACR,qBAAqB,QACnB,qBAAqB,UAAU;CAEpC,MAAM,mBAAmB,eAAe;EACtC,MAAM,KAAK,UAAU;AACrB,MAAI,GACF,IAAG,SAAS;GACV,MAAM,GAAG,aAAa,GAAG;GACzB,UAAU;GACX,CAAC;GAEJ;CAEF,MAAM,oBAAoB,eAAe;EACvC,MAAM,KAAK,UAAU;AACrB,MAAI,GACF,IAAG,SAAS;GACV,MAAM,GAAG,aAAa,GAAG;GACzB,UAAU;GACX,CAAC;GAEJ;CAKF,MAAM,mBAAmB,eAChB;EACL;EACA;EACA;EACA;EACA,YAAY;EACZ,MAAM;EACN,kBAAkB;EAClB,WAAW;EACX,aAAa;EACb;EACA,UAAU;EACV;EACA;EACA;EACA;EACA;EACA;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAGD,MAAM,sBACJ,WACA,eACsB;EACtB,GAAG;EACH;EACA;EACD;CAKD,MAAM,wBACJ,cACA,kBAA2C,EAAE,KAE7C,qBAAC;EACC,GAAIC,aAAW,cAAc,gBAAgB;EAC7C,KAAK;EACL,gBAAa;aAEb,oBAAC;GAAa,OAAO;aAClB,kBAAkB,KAAK,KAAK,UAAU;IACrC,MAAM,OAAO,MAAM,WAAW,QAAQ,IAAI,IAAI;AAC9C,QAAI,CAAC,KAAM,QAAO;AAElB,WACE,oBAAC;KAEO;KACN,SAAS;KACT,WAAW,UAAU,kBAAkB,SAAS;OAH3C,KAAK,IAIV;KAEJ;IACW,EACd,kBACC,oBAAC,uBACC,OAAO;GACL,MAAM,eAAe;GACrB,OAAO,eAAe;GACvB,GACD;GAEA;CAMR,MAAM,OAAO,eACJ;EACL;EACA;EACA,WAAW,CAAC,CAAC;EACb,WAAW;EACX,aAAa,CAAC;EACd,cAAc,CAAC;EACf,cAAc;EACf,GACD;EAAC;EAAM;EAAM;EAAU;EAAa;EAAY;EAAU;EAAU,CACrE;CAKD,MAAM,sBAAsB,yBAC1B,8CACE,oBAAC;EACC,MAAM,oBAAC,iBAAc,IAAG,SAAS;EACjC,cAAW;EACX,YAAY;EACZ,SAAS;GACT,EACF,oBAAC;EACC,MAAM,oBAAC,iBAAc,IAAG,UAAU;EAClC,cAAW;EACX,YAAY;EACZ,SAAS;GACT,IACD,GACD;CAEJ,MAAM,mBAAmB,sBACvB,oBAAC;EACC,MAAM;EACN,aAAa,MAAM;EACb;EACA;EACN,UAAU;EACA;GACV,GACA;CAKJ,MAAM,mBACH,uBAAuB,sBAAsB,YAC7C,0BAA0B,yBAAyB;CAEtD,MAAM,mBACH,uBAAuB,sBAAsB,YAC7C,0BAA0B,yBAAyB;AAItD,QACE,qBAAC;EAAa,OAAO;;GACnB,qBAAC;IACM;IACD;IACE;IACN,QAAQ;IACR,OAAO;IACP,aAAW;;KAEV,UAAU,mBACT,qBAAC;MAAI,gBAAa;;OACf,sBAAsB,YAAY;OAClC,yBAAyB,YAAY;OACrC;;OACG,GACJ;KACJ,qBAAC;MAAI,gBAAa;iBAChB,oBAAC;OAAI,KAAK;OAAW,gBAAa;iBAC/B,gBACC,oBAAC;QACQ;QACE;QACT,aAAa,kBAAkB,KAAK,MAAM,EAAE,IAAI;QACrC;mBAET,WAAW,WAAW,oBACtB,qBACE,mBAAmB,WAAW,UAAU,EACxC,gBACD;SAEc,GAEnB,qBAAqB,oBAAoB,CAAC;QAExC,EACL,mBAAmB,gBAAgB,oBAAC,SAAI,gBAAa,eAAe;OACjE;KACL,UAAU,mBACT,qBAAC;MAAI,gBAAa;;OACf,yBAAyB,YAAY;OACrC,sBAAsB,YAAY;OAClC;;OACG,GACJ;;KACQ;GAGb,eACC,oBAAC;IACa;IACI;IACT;IACM;IACG;IACL;IACE;IACb,aAAa,eAAe;KAC5B;GAIH,CAAC,eACA,iBACA,WAAW,KAAK,QAAQ;IACtB,MAAM,gBAAgB,eAAe,IAAI,IAAI,IAAI;IACjD,MAAM,UAAU,eAAe,WAAW,IAAI;AAE9C,QAAI,WAAW,KAAM,QAAO;AAE5B,WACE,oBAAC;KAEC,QAAQ,IAAI;KACL;KACE;KACE;KACE;KACb,cAAc,eAAe,aAAa,IAAI;KAC9C,gBAAgB,eAAe,eAAe,IAAI;KAClD,aAAa,eAAe;KAC5B,aAAa,eAAe;KAC5B,IAAI,eAAe;KACnB,OAAO,eAAe;OAXjB,IAAI,IAYT;KAEJ;;GACS;;AAQnB,MAAM,QAAQ,WAAW,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCvC,MAAa,OAAO,OAAO,OAAO,OAAO;CACvC;CACA,MAAM;CACN,OAAO;CACP,QAAQ;CACT,CAAC"}
1
+ {"version":3,"file":"Tabs.js","names":["CollectionItem","mergeProps"],"sources":["../../../../src/components/navigation/Tabs/Tabs.tsx"],"sourcesContent":["import { mergeStyles, OUTER_STYLES } from '@tenphi/tasty';\nimport {\n Children,\n ForwardedRef,\n forwardRef,\n isValidElement,\n ReactElement,\n ReactNode,\n useEffect,\n useMemo,\n useRef,\n} from 'react';\nimport { AriaTabListProps, useTabList } from 'react-aria';\nimport {\n Item as CollectionItem,\n DraggableCollectionState,\n DroppableCollectionState,\n useTabListState,\n} from 'react-stately';\n\nimport { useEvent, useWarn } from '../../../_internal/hooks';\nimport { DirectionIcon } from '../../../icons';\nimport { mergeProps, useMergeStyles } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { useTinyScrollbar } from '../../content/Layout/hooks/useTinyScrollbar';\n\nimport { DraggableTabList } from './DraggableTabList';\nimport { TabIndicatorElement, TabsElement } from './styled';\nimport { TabButton } from './TabButton';\nimport { CachedPanelRenderer, TabPanelRenderer } from './TabPanel';\nimport { TabPicker } from './TabPicker';\nimport { TabsAction } from './TabsAction';\nimport { TabsContextValue, TabsProvider } from './TabsContext';\nimport { useTabEditing } from './use-tab-editing';\nimport { useTabIndicator } from './use-tab-indicator';\n\nimport type { Key } from '@react-types/shared';\nimport type {\n CubeTabListProps,\n CubeTabPanelProps,\n CubeTabProps,\n CubeTabsProps,\n ParsedPanel,\n ParsedTab,\n} from './types';\n\n// =============================================================================\n// Helper Functions\n// =============================================================================\n\n/**\n * Generic helper to check if a child is a specific component by displayName.\n */\nfunction isComponentElement<T>(\n child: ReactNode,\n displayName: string,\n): child is ReactElement<T> {\n return (\n isValidElement(child) &&\n typeof child.type === 'function' &&\n (child.type as any).displayName === displayName\n );\n}\n\n/** Checks if a child is a Tab component. */\nconst isTabElement = (child: ReactNode): child is ReactElement<CubeTabProps> =>\n isComponentElement<CubeTabProps>(child, 'CubeTab');\n\n/** Checks if a child is a TabPanel component. */\nconst isTabPanelElement = (\n child: ReactNode,\n): child is ReactElement<CubeTabPanelProps> =>\n isComponentElement<CubeTabPanelProps>(child, 'CubeTabPanel');\n\n/** Checks if a child is a TabList component. */\nconst isTabListElement = (\n child: ReactNode,\n): child is ReactElement<CubeTabListProps> =>\n isComponentElement<CubeTabListProps>(child, 'CubeTabList');\n\n/**\n * Extracts the raw key from a React element, stripping the \".$\" prefix\n * that React adds via Children.map/toArray.\n */\nfunction getRawKey(element: ReactElement): string | null {\n if (element.key == null) return null;\n const keyStr = String(element.key);\n return keyStr.startsWith('.$') ? keyStr.slice(2) : keyStr;\n}\n\n// =============================================================================\n// Tab Component (configuration only - not rendered directly)\n// =============================================================================\n\nfunction Tab(_props: CubeTabProps): ReactElement | null {\n return null;\n}\n\nTab.displayName = 'CubeTab';\n\n// =============================================================================\n// TabPanel Component (configuration only - not rendered directly)\n// =============================================================================\n\nfunction TabPanel(_props: CubeTabPanelProps): ReactElement | null {\n return null;\n}\n\nTabPanel.displayName = 'CubeTabPanel';\n\n// =============================================================================\n// TabList Component (configuration only - not rendered directly)\n// =============================================================================\n\nfunction TabList(_props: CubeTabListProps): ReactElement | null {\n return null;\n}\n\nTabList.displayName = 'CubeTabList';\n\n// =============================================================================\n// Main Tabs Component\n// =============================================================================\n\nfunction TabsComponent(\n props: CubeTabsProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const {\n label = 'Tabs',\n defaultActiveKey,\n activeKey,\n size,\n type = 'default',\n onChange,\n onDelete,\n onTitleChange,\n autoHideActions,\n isEditable: parentIsEditable,\n menu: parentMenu,\n menuTriggerProps: parentMenuTriggerProps,\n menuProps: parentMenuProps,\n contextMenu: parentContextMenu,\n onAction: parentOnAction,\n children,\n prefix,\n suffix,\n prerender = false,\n keepMounted = false,\n qa = 'Tabs',\n renderPanel,\n panelCacheKeys,\n isReorderable = false,\n keyOrder,\n onReorder,\n showTabPicker = false,\n showScrollArrows = false,\n tabPickerPosition = 'suffix',\n scrollArrowsPosition = 'suffix',\n tabListPadding,\n tabListStyles,\n prefixStyles,\n suffixStyles,\n ...otherProps\n } = props;\n\n // Extract outer styles\n const baseStyles = extractStyles(otherProps, OUTER_STYLES);\n\n // Build TabList padding style (memoized)\n const tabListPaddingStyles = useMemo(\n () =>\n tabListPadding ? { '$tablist-padding': `${tabListPadding}` } : undefined,\n [tabListPadding],\n );\n\n // Merge tabListPaddingStyles with tabListStyles (memoized)\n const mergedTabListStyles = useMemo(\n () => mergeStyles(tabListPaddingStyles, tabListStyles),\n [tabListPaddingStyles, tabListStyles],\n );\n\n // Merge all sub-element styles into baseStyles\n const combinedStyles = useMergeStyles(baseStyles, {\n TabList: mergedTabListStyles,\n Prefix: prefixStyles,\n Suffix: suffixStyles,\n });\n\n // DOM element refs\n const listRef = useRef<HTMLDivElement>(null);\n const scrollRef = useRef<HTMLDivElement>(null);\n\n // Track visited tabs for keepMounted functionality\n const visitedKeysRef = useRef<Set<string>>(new Set());\n\n // =========================================================================\n // Tab Title Editing Hook\n // =========================================================================\n const {\n editingKey,\n editValue,\n setEditValue,\n startEditing,\n cancelEditing,\n submitEditing,\n } = useTabEditing({ onChange, onTitleChange });\n\n // =========================================================================\n // Parse children to extract tabs and explicit panels\n // =========================================================================\n const { parsedTabs, explicitPanels, hasAnyContent } = useMemo(() => {\n const childArray = Children.toArray(children);\n const tabs: ParsedTab[] = [];\n const panels = new Map<string, ParsedPanel>();\n let hasExplicitList = false;\n let tabChildren: ReactNode[] = [];\n\n // Check for explicit Tabs.List / Tabs.Panel structure\n for (const child of childArray) {\n if (isTabListElement(child)) {\n hasExplicitList = true;\n tabChildren = Children.toArray(child.props.children);\n } else if (isTabPanelElement(child)) {\n const key = getRawKey(child as ReactElement);\n\n if (key != null) {\n panels.set(key, {\n key,\n content: child.props.children,\n prerender: child.props.prerender,\n keepMounted: child.props.keepMounted,\n styles: child.props.styles,\n qa: child.props.qa,\n qaVal: child.props.qaVal,\n });\n }\n }\n }\n\n // If no explicit list, use direct Tab children\n if (!hasExplicitList) {\n tabChildren = childArray;\n }\n\n // Parse Tab elements\n let hasContent = panels.size > 0;\n\n for (const child of tabChildren) {\n if (isTabElement(child)) {\n const key = getRawKey(child) ?? child.props.id;\n\n if (key != null) {\n const { id: _id, children: tabContent, ...tabProps } = child.props;\n\n tabs.push({\n ...tabProps,\n key,\n content: tabContent,\n });\n\n if (tabContent != null) {\n hasContent = true;\n }\n }\n }\n }\n\n return {\n parsedTabs: tabs,\n explicitPanels: panels,\n hasAnyContent: hasContent,\n };\n }, [children]);\n\n // Clean up visitedKeys when tabs are removed\n const currentTabKeysSet = useMemo(\n () => new Set(parsedTabs.map((t) => t.key)),\n [parsedTabs],\n );\n\n useEffect(() => {\n for (const key of visitedKeysRef.current) {\n if (!currentTabKeysSet.has(key)) {\n visitedKeysRef.current.delete(key);\n }\n }\n }, [currentTabKeysSet]);\n\n // =========================================================================\n // Order tabs according to keyOrder\n // =========================================================================\n const orderedParsedTabs = useMemo(() => {\n if (!keyOrder || keyOrder.length === 0) {\n return parsedTabs;\n }\n\n const tabMap = new Map<string, ParsedTab>();\n for (const tab of parsedTabs) {\n tabMap.set(tab.key, tab);\n }\n\n const ordered: ParsedTab[] = [];\n for (const key of keyOrder) {\n const tab = tabMap.get(String(key));\n if (tab) {\n ordered.push(tab);\n tabMap.delete(String(key));\n }\n }\n\n // Append any tabs not in keyOrder\n for (const tab of parsedTabs) {\n if (tabMap.has(tab.key)) {\n ordered.push(tab);\n }\n }\n\n return ordered;\n }, [parsedTabs, keyOrder]);\n\n // Create collection items for React Stately\n const collectionItems = useMemo(() => {\n return orderedParsedTabs.map((tab) => (\n <CollectionItem\n key={tab.key}\n textValue={typeof tab.title === 'string' ? tab.title : String(tab.key)}\n >\n {tab.title}\n </CollectionItem>\n ));\n }, [orderedParsedTabs]);\n\n // Determine disabled keys\n const disabledKeys = useMemo(() => {\n return new Set(\n parsedTabs.filter((tab) => tab.isDisabled).map((tab) => tab.key),\n );\n }, [parsedTabs]);\n\n // Handle selection change (converts React Aria's Key to string for our API)\n const handleSelectionChange = useEvent((key: Key) => {\n const keyStr = String(key);\n visitedKeysRef.current.add(keyStr);\n onChange?.(keyStr);\n });\n\n // Convert keys to strings for React Aria compatibility\n const selectedKey = activeKey != null ? String(activeKey) : undefined;\n const defaultSelectedKey =\n defaultActiveKey != null ? String(defaultActiveKey) : undefined;\n\n // Create aria props for useTabListState\n const ariaProps: AriaTabListProps<object> = useMemo(\n () => ({\n selectedKey,\n defaultSelectedKey,\n onSelectionChange: handleSelectionChange,\n disabledKeys,\n children: collectionItems,\n 'aria-label': label,\n }),\n [\n selectedKey,\n defaultSelectedKey,\n handleSelectionChange,\n disabledKeys,\n collectionItems,\n label,\n ],\n );\n\n // Create state using useTabListState\n const state = useTabListState(ariaProps);\n\n // Track initial selected key for visited tabs\n useEffect(() => {\n if (state.selectedKey != null) {\n visitedKeysRef.current.add(String(state.selectedKey));\n }\n }, [state.selectedKey]);\n\n // Get tablist props from react-aria\n const { tabListProps } = useTabList(ariaProps, state, listRef);\n\n // Handle selection from TabPicker (needs to update internal state in uncontrolled mode)\n const handleTabPickerSelect = useEvent((key: string) => {\n // Update internal state (for uncontrolled mode)\n state.setSelectedKey(key);\n // Also call the external onChange handler\n handleSelectionChange(key);\n });\n\n // =========================================================================\n // Tab Indicator (for default type)\n // =========================================================================\n // Create order token that changes when tab order changes (for indicator recalculation)\n const orderToken = useMemo(\n () => orderedParsedTabs.map((t) => t.key).join(','),\n [orderedParsedTabs],\n );\n\n const indicatorStyle = useTabIndicator(\n listRef,\n state.selectedKey,\n type === 'default' || type === 'narrow',\n orderToken,\n );\n\n // =========================================================================\n // Tiny Scrollbar (not for radio type)\n // =========================================================================\n const isTinyScrollbar = type !== 'radio';\n const { handleHStyle, hasOverflowX, isScrolling, isAtStartX, isAtEndX } =\n useTinyScrollbar(scrollRef, isTinyScrollbar);\n\n const hasPanels = hasAnyContent || !!renderPanel;\n\n // =========================================================================\n // Tab Picker visibility\n // =========================================================================\n useWarn(showTabPicker && type === 'radio', {\n key: ['tabs-tabpicker-radio-unsupported'],\n args: [\n 'Tabs:',\n '`showTabPicker` is not supported when `type=\"radio\"`. The TabPicker will not be rendered.',\n ],\n });\n\n const shouldShowTabPicker =\n type !== 'radio' &&\n (showTabPicker === true || (showTabPicker === 'auto' && hasOverflowX));\n\n // =========================================================================\n // Scroll Arrows visibility and handlers\n // =========================================================================\n useWarn(showScrollArrows && type === 'radio', {\n key: ['tabs-scrollarrows-radio-unsupported'],\n args: [\n 'Tabs:',\n '`showScrollArrows` is not supported when `type=\"radio\"`. The scroll arrows will not be rendered.',\n ],\n });\n\n const shouldShowScrollArrows =\n type !== 'radio' &&\n (showScrollArrows === true ||\n (showScrollArrows === 'auto' && hasOverflowX));\n\n const handleScrollLeft = useEvent(() => {\n const el = scrollRef.current;\n if (el) {\n el.scrollTo({\n left: el.scrollLeft - el.clientWidth,\n behavior: 'smooth',\n });\n }\n });\n\n const handleScrollRight = useEvent(() => {\n const el = scrollRef.current;\n if (el) {\n el.scrollTo({\n left: el.scrollLeft + el.clientWidth,\n behavior: 'smooth',\n });\n }\n });\n\n // =========================================================================\n // Base Context Value (without drag/drop states)\n // =========================================================================\n const baseContextValue = useMemo(\n () => ({\n state,\n type,\n size,\n autoHideActions,\n isEditable: parentIsEditable,\n menu: parentMenu,\n menuTriggerProps: parentMenuTriggerProps,\n menuProps: parentMenuProps,\n contextMenu: parentContextMenu,\n onDelete,\n onAction: parentOnAction,\n editingKey,\n editValue,\n setEditValue,\n startEditing,\n submitEditing,\n cancelEditing,\n }),\n [\n state,\n type,\n size,\n autoHideActions,\n parentIsEditable,\n parentMenu,\n parentMenuTriggerProps,\n parentMenuProps,\n parentContextMenu,\n onDelete,\n parentOnAction,\n editingKey,\n editValue,\n setEditValue,\n startEditing,\n submitEditing,\n cancelEditing,\n ],\n );\n\n // Helper to create full context value with optional drag/drop states\n const createContextValue = (\n dragState?: DraggableCollectionState,\n dropState?: DroppableCollectionState,\n ): TabsContextValue => ({\n ...baseContextValue,\n dragState,\n dropState,\n });\n\n // =========================================================================\n // Tab List Content Renderer\n // =========================================================================\n const renderTabListContent = (\n contextValue: TabsContextValue,\n collectionProps: Record<string, unknown> = {},\n ) => (\n <div\n {...mergeProps(tabListProps, collectionProps)}\n ref={listRef}\n data-element=\"TabList\"\n >\n <TabsProvider value={contextValue}>\n {orderedParsedTabs.map((tab, index) => {\n const item = state.collection.getItem(tab.key);\n if (!item) return null;\n\n return (\n <TabButton\n key={item.key}\n item={item}\n tabData={tab}\n isLastTab={index === orderedParsedTabs.length - 1}\n />\n );\n })}\n </TabsProvider>\n {indicatorStyle && (\n <TabIndicatorElement\n style={{\n left: indicatorStyle.left,\n width: indicatorStyle.width,\n }}\n />\n )}\n </div>\n );\n\n // =========================================================================\n // Mods for styling\n // =========================================================================\n const mods = useMemo(\n () => ({\n type,\n size,\n deletable: !!onDelete,\n scrolling: isScrolling,\n 'fade-left': !isAtStartX,\n 'fade-right': !isAtEndX,\n 'has-panels': hasPanels,\n }),\n [type, size, onDelete, isScrolling, isAtStartX, isAtEndX, hasPanels],\n );\n\n // =========================================================================\n // Action Elements (TabPicker and Scroll Arrows)\n // =========================================================================\n const scrollArrowsElement = shouldShowScrollArrows ? (\n <>\n <TabsAction\n icon={<DirectionIcon to=\"left\" />}\n aria-label=\"Scroll tabs left\"\n isDisabled={isAtStartX}\n onPress={handleScrollLeft}\n />\n <TabsAction\n icon={<DirectionIcon to=\"right\" />}\n aria-label=\"Scroll tabs right\"\n isDisabled={isAtEndX}\n onPress={handleScrollRight}\n />\n </>\n ) : null;\n\n const tabPickerElement = shouldShowTabPicker ? (\n <TabPicker\n tabs={orderedParsedTabs}\n selectedKey={state.selectedKey}\n size={size}\n type={type}\n onSelect={handleTabPickerSelect}\n onDelete={onDelete}\n />\n ) : null;\n\n // Determine which actions go in prefix/suffix\n // In prefix: TabPicker first (left), then scroll arrows (right)\n // In suffix: scroll arrows first (left), then TabPicker (right)\n const prefixHasActions =\n (shouldShowTabPicker && tabPickerPosition === 'prefix') ||\n (shouldShowScrollArrows && scrollArrowsPosition === 'prefix');\n\n const suffixHasActions =\n (shouldShowTabPicker && tabPickerPosition === 'suffix') ||\n (shouldShowScrollArrows && scrollArrowsPosition === 'suffix');\n\n // Wrap with TabsProvider so prefix/suffix can access context (size, type)\n // The inner TabsProvider in renderTabListContent will override for tab buttons\n return (\n <TabsProvider value={baseContextValue}>\n <TabsElement\n ref={ref}\n qa={qa}\n mods={mods}\n styles={combinedStyles}\n style={handleHStyle}\n data-size={size}\n >\n {prefix || prefixHasActions ? (\n <div data-element=\"Prefix\">\n {tabPickerPosition === 'prefix' && tabPickerElement}\n {scrollArrowsPosition === 'prefix' && scrollArrowsElement}\n {prefix}\n </div>\n ) : null}\n <div data-element=\"ScrollWrapper\">\n <div ref={scrollRef} data-element=\"Scroll\">\n {isReorderable ? (\n <DraggableTabList\n state={state}\n listRef={listRef}\n orderedKeys={orderedParsedTabs.map((t) => t.key)}\n onReorder={onReorder}\n >\n {(dragState, dropState, collectionProps) =>\n renderTabListContent(\n createContextValue(dragState, dropState),\n collectionProps,\n )\n }\n </DraggableTabList>\n ) : (\n renderTabListContent(createContextValue())\n )}\n </div>\n {isTinyScrollbar && hasOverflowX && <div data-element=\"ScrollbarH\" />}\n </div>\n {suffix || suffixHasActions ? (\n <div data-element=\"Suffix\">\n {scrollArrowsPosition === 'suffix' && scrollArrowsElement}\n {tabPickerPosition === 'suffix' && tabPickerElement}\n {suffix}\n </div>\n ) : null}\n </TabsElement>\n\n {/* Functional panel rendering with content caching */}\n {renderPanel && (\n <CachedPanelRenderer\n parsedTabs={parsedTabs}\n explicitPanels={explicitPanels}\n state={state}\n renderPanel={renderPanel}\n panelCacheKeys={panelCacheKeys}\n prerender={prerender}\n keepMounted={keepMounted}\n visitedKeys={visitedKeysRef.current}\n />\n )}\n\n {/* Static panel rendering (traditional children-based approach) */}\n {!renderPanel &&\n hasAnyContent &&\n parsedTabs.map((tab) => {\n const explicitPanel = explicitPanels.get(tab.key);\n const content = explicitPanel?.content ?? tab.content;\n\n if (content == null) return null;\n\n return (\n <TabPanelRenderer\n key={tab.key}\n tabKey={tab.key}\n state={state}\n content={content}\n prerender={prerender}\n keepMounted={keepMounted}\n tabPrerender={explicitPanel?.prerender ?? tab.prerender}\n tabKeepMounted={explicitPanel?.keepMounted ?? tab.keepMounted}\n visitedKeys={visitedKeysRef.current}\n panelStyles={explicitPanel?.styles}\n qa={explicitPanel?.qa}\n qaVal={explicitPanel?.qaVal}\n />\n );\n })}\n </TabsProvider>\n );\n}\n\n// =============================================================================\n// Exports\n// =============================================================================\n\nconst _Tabs = forwardRef(TabsComponent);\n\n/**\n * Tabs component for organizing content into multiple panels.\n * Built with React Aria for full accessibility support.\n *\n * **Note:** Tab keys are internally converted to strings for React Aria compatibility.\n *\n * @example\n * // Simple usage\n * <Tabs defaultActiveKey=\"tab1\">\n * <Tab key=\"tab1\" title=\"Tab 1\">Content 1</Tab>\n * <Tab key=\"tab2\" title=\"Tab 2\">Content 2</Tab>\n * </Tabs>\n *\n * @example\n * // Tabs-only (no panels)\n * <Tabs activeKey={activeTab} onChange={setActiveTab}>\n * <Tab key=\"overview\" title=\"Overview\" />\n * <Tab key=\"settings\" title=\"Settings\" />\n * </Tabs>\n *\n * @example\n * // Explicit panels\n * <Tabs defaultActiveKey=\"tab1\">\n * <Tabs.List>\n * <Tab key=\"tab1\" title=\"Tab 1\" />\n * <Tab key=\"tab2\" title=\"Tab 2\" />\n * </Tabs.List>\n * <Tabs.Panel key=\"tab1\">Content 1</Tabs.Panel>\n * <Tabs.Panel key=\"tab2\">Content 2</Tabs.Panel>\n * </Tabs>\n */\nexport const Tabs = Object.assign(_Tabs, {\n Tab,\n List: TabList,\n Panel: TabPanel,\n Action: TabsAction,\n});\n\nexport { Tab, TabList, TabPanel, TabsAction };\n"],"mappings":"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"}
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
2
2
  import { _ItemButton } from "../../actions/ItemButton/ItemButton.js";
3
3
  import { useOptionalTabsContext } from "./TabsContext.js";
4
4
  import { tasty } from "@tenphi/tasty";
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
2
2
  import { createContext, useContext } from "react";
3
3
  import { jsx } from "react/jsx-runtime";
4
4
 
@@ -1 +1 @@
1
- {"version":3,"file":"TabsContext.js","names":[],"sources":["../../../../src/components/navigation/Tabs/TabsContext.tsx"],"sourcesContent":["import { createContext, ReactNode, useContext } from 'react';\n\nimport type {\n DraggableCollectionState,\n DroppableCollectionState,\n TabListState,\n} from 'react-stately';\nimport type { CubeItemActionProps } from '../../actions/ItemAction';\nimport type { CubeMenuProps } from '../../actions/Menu';\nimport type { TabSize, TabType } from './types';\n\n// =============================================================================\n// Context Value Interface\n// =============================================================================\n\nexport interface TabsContextValue {\n /** Tab list state from React Stately */\n state: TabListState<object>;\n /** Parent-level type default */\n type: TabType;\n /** Parent-level size default */\n size?: TabSize;\n /** Parent-level autoHideActions default */\n autoHideActions?: boolean;\n /** Parent-level isEditable default */\n isEditable?: boolean;\n /** Parent-level menu default */\n menu?: ReactNode;\n /** Parent-level menuTriggerProps default */\n menuTriggerProps?: Partial<CubeItemActionProps>;\n /** Parent-level menuProps default */\n menuProps?: Partial<CubeMenuProps<object>>;\n /** Parent-level contextMenu default */\n contextMenu?: boolean;\n /** Callback when tab is deleted */\n onDelete?: (key: string) => void;\n /** Parent-level onAction callback */\n onAction?: (action: string, tabKey: string) => void;\n /** Drag state for reorderable tabs (undefined if not reorderable) */\n dragState?: DraggableCollectionState;\n /** Drop state for reorderable tabs (undefined if not reorderable) */\n dropState?: DroppableCollectionState;\n\n // Editing callbacks\n /** Current tab being edited (null if none) */\n editingKey: string | null;\n /** Current edit value */\n editValue: string;\n /** Set the edit value */\n setEditValue: (value: string) => void;\n /** Start editing a tab */\n startEditing: (key: string, currentTitle: string) => void;\n /** Submit the current edit */\n submitEditing: (\n key: string,\n newTitle: string,\n tabOnTitleChange?: (title: string) => void,\n ) => void;\n /** Cancel the current edit */\n cancelEditing: () => void;\n}\n\n// =============================================================================\n// Context\n// =============================================================================\n\nconst TabsContext = createContext<TabsContextValue | null>(null);\n\nTabsContext.displayName = 'TabsContext';\n\n// =============================================================================\n// Provider\n// =============================================================================\n\nexport interface TabsProviderProps {\n value: TabsContextValue;\n children: ReactNode;\n}\n\nexport function TabsProvider({ value, children }: TabsProviderProps) {\n return <TabsContext.Provider value={value}>{children}</TabsContext.Provider>;\n}\n\n// =============================================================================\n// Hook\n// =============================================================================\n\nexport function useTabsContext(): TabsContextValue {\n const context = useContext(TabsContext);\n\n if (!context) {\n throw new Error('useTabsContext must be used within a TabsProvider');\n }\n\n return context;\n}\n\n/**\n * Optional hook to get TabsContext value.\n * Returns null when used outside a TabsProvider (e.g., for TabsAction in standalone usage).\n */\nexport function useOptionalTabsContext(): TabsContextValue | null {\n return useContext(TabsContext);\n}\n"],"mappings":";;;;;AAkEA,MAAM,cAAc,cAAuC,KAAK;AAEhE,YAAY,cAAc;AAW1B,SAAgB,aAAa,EAAE,OAAO,YAA+B;AACnE,QAAO,oBAAC,YAAY;EAAgB;EAAQ;GAAgC;;AAO9E,SAAgB,iBAAmC;CACjD,MAAM,UAAU,WAAW,YAAY;AAEvC,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,oDAAoD;AAGtE,QAAO;;;;;;AAOT,SAAgB,yBAAkD;AAChE,QAAO,WAAW,YAAY"}
1
+ {"version":3,"file":"TabsContext.js","names":[],"sources":["../../../../src/components/navigation/Tabs/TabsContext.tsx"],"sourcesContent":["import { createContext, ReactNode, useContext } from 'react';\n\nimport type {\n DraggableCollectionState,\n DroppableCollectionState,\n TabListState,\n} from 'react-stately';\nimport type { CubeItemActionProps } from '../../actions/ItemAction';\nimport type { CubeMenuProps } from '../../actions/Menu';\nimport type { TabContextMenu, TabSize, TabType } from './types';\n\n// =============================================================================\n// Context Value Interface\n// =============================================================================\n\nexport interface TabsContextValue {\n /** Tab list state from React Stately */\n state: TabListState<object>;\n /** Parent-level type default */\n type: TabType;\n /** Parent-level size default */\n size?: TabSize;\n /** Parent-level autoHideActions default */\n autoHideActions?: boolean;\n /** Parent-level isEditable default */\n isEditable?: boolean;\n /** Parent-level menu default */\n menu?: ReactNode;\n /** Parent-level menuTriggerProps default */\n menuTriggerProps?: Partial<CubeItemActionProps>;\n /** Parent-level menuProps default */\n menuProps?: Partial<CubeMenuProps<object>>;\n /** Parent-level contextMenu default */\n contextMenu?: TabContextMenu;\n /** Callback when tab is deleted */\n onDelete?: (key: string) => void;\n /** Parent-level onAction callback */\n onAction?: (action: string, tabKey: string) => void;\n /** Drag state for reorderable tabs (undefined if not reorderable) */\n dragState?: DraggableCollectionState;\n /** Drop state for reorderable tabs (undefined if not reorderable) */\n dropState?: DroppableCollectionState;\n\n // Editing callbacks\n /** Current tab being edited (null if none) */\n editingKey: string | null;\n /** Current edit value */\n editValue: string;\n /** Set the edit value */\n setEditValue: (value: string) => void;\n /** Start editing a tab */\n startEditing: (key: string, currentTitle: string) => void;\n /** Submit the current edit */\n submitEditing: (\n key: string,\n newTitle: string,\n tabOnTitleChange?: (title: string) => void,\n ) => void;\n /** Cancel the current edit */\n cancelEditing: () => void;\n}\n\n// =============================================================================\n// Context\n// =============================================================================\n\nconst TabsContext = createContext<TabsContextValue | null>(null);\n\nTabsContext.displayName = 'TabsContext';\n\n// =============================================================================\n// Provider\n// =============================================================================\n\nexport interface TabsProviderProps {\n value: TabsContextValue;\n children: ReactNode;\n}\n\nexport function TabsProvider({ value, children }: TabsProviderProps) {\n return <TabsContext.Provider value={value}>{children}</TabsContext.Provider>;\n}\n\n// =============================================================================\n// Hook\n// =============================================================================\n\nexport function useTabsContext(): TabsContextValue {\n const context = useContext(TabsContext);\n\n if (!context) {\n throw new Error('useTabsContext must be used within a TabsProvider');\n }\n\n return context;\n}\n\n/**\n * Optional hook to get TabsContext value.\n * Returns null when used outside a TabsProvider (e.g., for TabsAction in standalone usage).\n */\nexport function useOptionalTabsContext(): TabsContextValue | null {\n return useContext(TabsContext);\n}\n"],"mappings":";;;;;AAkEA,MAAM,cAAc,cAAuC,KAAK;AAEhE,YAAY,cAAc;AAW1B,SAAgB,aAAa,EAAE,OAAO,YAA+B;AACnE,QAAO,oBAAC,YAAY;EAAgB;EAAQ;GAAgC;;AAO9E,SAAgB,iBAAmC;CACjD,MAAM,UAAU,WAAW,YAAY;AAEvC,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,oDAAoD;AAGtE,QAAO;;;;;;AAOT,SAAgB,yBAAkD;AAChE,QAAO,WAAW,YAAY"}
@@ -1,4 +1,4 @@
1
1
 
2
- import { CubeTabListProps, CubeTabPanelProps, CubeTabProps, CubeTabsProps, TabSize, TabType, TabsActionPosition } from "./types.js";
2
+ import { CubeTabListProps, CubeTabPanelProps, CubeTabProps, CubeTabsProps, TabContextMenu, TabSize, TabType, TabsActionPosition } from "./types.js";
3
3
  import { CubeTabsActionProps, TabsAction } from "./TabsAction.js";
4
4
  import { Tab, Tabs } from "./Tabs.js";
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
2
2
  import { _Item } from "../../content/Item/Item.js";
3
3
  import { tasty } from "@tenphi/tasty";
4
4
 
@@ -18,6 +18,8 @@ type TabsActionPosition = 'prefix' | 'suffix';
18
18
  * Radio type only supports 'medium' | 'large' (mapped to smaller Item sizes).
19
19
  */
20
20
  type TabSize = 'xsmall' | 'small' | 'medium' | 'large';
21
+ /** How the tab `menu` is exposed alongside or instead of the overflow trigger. */
22
+ type TabContextMenu = boolean | 'context-only';
21
23
  /** Common props for panel rendering behavior */
22
24
  interface PanelBehaviorProps {
23
25
  /** If true, panel is rendered but hidden when not active. */
@@ -106,11 +108,15 @@ interface CubeTabsProps extends BaseProps, OuterStyleProps, PanelBehaviorProps {
106
108
  */
107
109
  menuProps?: Partial<CubeMenuProps<object>>;
108
110
  /**
109
- * Whether to show context menu on right-click for all tabs.
111
+ * Context menu / overflow behavior for tab `menu` items.
112
+ * - `false` (default) — overflow trigger only; no right-click menu
113
+ * - `true` — overflow trigger and right-click menu
114
+ * - `'context-only'` — right-click menu only; no overflow trigger. Inline close
115
+ * (`onDelete`) shows even when `menu` is non-empty, like tabs without a menu.
110
116
  * Can be overridden per-tab via Tab's contextMenu prop.
111
117
  * @default false
112
118
  */
113
- contextMenu?: boolean;
119
+ contextMenu?: TabContextMenu;
114
120
  /**
115
121
  * Callback when a menu action is triggered on any tab.
116
122
  * Called with the action key and the tab key.
@@ -224,11 +230,11 @@ interface CubeTabProps extends TabStyleProps, PanelBehaviorProps {
224
230
  */
225
231
  menuProps?: Partial<CubeMenuProps<object>>;
226
232
  /**
227
- * Whether to show context menu on right-click.
233
+ * Context menu / overflow behavior. Same values as Tabs `contextMenu`.
228
234
  * Uses the same menu items as `menu` prop.
229
235
  * @default false
230
236
  */
231
- contextMenu?: boolean;
237
+ contextMenu?: TabContextMenu;
232
238
  /**
233
239
  * Callback when a menu action is triggered.
234
240
  * Called with the action key from Menu.Item.
@@ -251,5 +257,5 @@ interface CubeTabListProps {
251
257
  children?: ReactNode;
252
258
  }
253
259
  //#endregion
254
- export { CubeTabListProps, CubeTabPanelProps, CubeTabProps, CubeTabsProps, TabSize, TabType, TabsActionPosition };
260
+ export { CubeTabListProps, CubeTabPanelProps, CubeTabProps, CubeTabsProps, TabContextMenu, TabSize, TabType, TabsActionPosition };
255
261
  //# sourceMappingURL=types.d.ts.map
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
2
2
  //#region src/components/navigation/Tabs/types.ts
3
3
  /**
4
4
  * Size mapping for radio type tabs.
@@ -1 +1 @@
1
- {"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/navigation/Tabs/types.ts"],"sourcesContent":["import type { BaseProps, OuterStyleProps, Styles } from '@tenphi/tasty';\nimport type { ReactNode } from 'react';\nimport type { CubeItemActionProps } from '../../actions/ItemAction';\nimport type { CubeMenuProps } from '../../actions/Menu';\nimport type { CubeItemProps } from '../../content/Item';\n\n// =============================================================================\n// Core Types\n// =============================================================================\n\n/** Visual appearance type for tabs */\nexport type TabType = 'default' | 'narrow' | 'file' | 'radio';\n\n/** Position for TabPicker and scroll arrows */\nexport type TabsActionPosition = 'prefix' | 'suffix';\n\n/**\n * Tab size options.\n * Radio type only supports 'medium' | 'large' (mapped to smaller Item sizes).\n */\nexport type TabSize = 'xsmall' | 'small' | 'medium' | 'large';\n\n/**\n * Size mapping for radio type tabs.\n * Radio type uses smaller sizes similar to RadioGroup tabs mode.\n */\nexport const RADIO_SIZE_MAP: Record<'medium' | 'large', TabSize> = {\n medium: 'xsmall',\n large: 'medium',\n};\n\n// =============================================================================\n// Shared Props Interfaces\n// =============================================================================\n\n/** Common props for panel rendering behavior */\nexport interface PanelBehaviorProps {\n /** If true, panel is rendered but hidden when not active. */\n prerender?: boolean;\n /** If true, once visited the panel stays in DOM. */\n keepMounted?: boolean;\n}\n\n/** Common props for QA attributes */\nexport interface QAProps {\n /** QA selector attribute. */\n qa?: string;\n /** Additional QA value attribute. */\n qaVal?: string;\n}\n\n// =============================================================================\n// Tab Style Props\n// =============================================================================\n\n/** Props from CubeItemProps that don't apply to Tab */\ntype OmittedItemProps =\n | 'id' // Tab has its own id as Key type\n | 'type' // Tab has its own TabType\n | 'size' // Tab has its own TabSize\n | 'theme' // Tabs have internal theming\n | 'shape' // Tabs have internal shape logic\n | 'description' // Tabs don't have descriptions\n | 'descriptionPlacement'\n | 'descriptionProps'\n | 'hotkeys' // Tabs have their own keyboard navigation\n | 'keyboardShortcutProps'\n | 'labelProps' // Tabs use title prop instead\n | 'labelRef'\n | 'level' // Tabs don't use heading levels\n | 'highlight' // Tabs don't use highlighting\n | 'highlightCaseSensitive'\n | 'highlightStyles'\n | 'variant' // Tabs have internal variant logic\n | 'htmlType' // Tab is always a button\n | 'isSelected' // Handled internally by state\n | 'preserveActionsSpace' // Set internally in TabButton\n | 'disableActionsFocus' // Not used in Tab\n | 'actions' // Tab has its own actions definition\n | 'autoHideActions' // Tab has its own autoHideActions\n | 'insideWrapper' // Internal Item wrapper prop\n | 'showActions'; // Internal Item wrapper prop\n\n/** Common styling props for tabs - inherits style props from CubeItemProps */\nexport interface TabStyleProps extends Omit<CubeItemProps, OmittedItemProps> {\n /**\n * Tab size. Supports 'xsmall', 'small', 'medium', 'large'.\n * Radio type only supports 'medium' | 'large' (mapped to smaller Item sizes).\n */\n size?: TabSize;\n /** Visual appearance type. */\n type?: TabType;\n /** Whether to show actions only on hover. */\n autoHideActions?: boolean;\n}\n\n// =============================================================================\n// Component Props\n// =============================================================================\n\n/** Cache key type - primitives only for reliable comparison */\nexport type CacheKeyValue = string | number | boolean | null | undefined;\n\nexport interface CubeTabsProps\n extends BaseProps,\n OuterStyleProps,\n PanelBehaviorProps {\n /** Controlled active tab key. When provided, component is controlled. */\n activeKey?: string;\n /** Initial active tab key for uncontrolled mode. */\n defaultActiveKey?: string;\n /**\n * Visual appearance type for tabs.\n * - `default` - Standard tabs with selection indicator below (default)\n * - `narrow` - Same as default but with collapsed vertical padding on labels\n * - `file` - File-style tabs with border bottom highlight on selection, delimiter between tabs\n * - `radio` - Radio button style for tab selection\n * @default 'default'\n */\n type?: TabType;\n /**\n * Tab size. Supports 'xsmall', 'small', 'medium', 'large'.\n * Radio type only supports 'medium' | 'large' (mapped to smaller Item sizes).\n * @default 'medium'\n */\n size?: TabSize;\n /** Accessible label for the tab list. */\n label?: string;\n /** Content rendered before the tab list. */\n prefix?: ReactNode;\n /** Content rendered after the tab list. */\n suffix?: ReactNode;\n /** Callback when active tab changes. */\n onChange?: (key: string) => void;\n /** Callback when tab delete button is clicked. Presence enables delete buttons. */\n onDelete?: (key: string) => void;\n /** Callback when a tab title is changed. Enables title editing on tabs with isEditable. */\n onTitleChange?: (key: string, newTitle: string) => void;\n /** Whether to show tab actions only on hover. Can be overridden per-tab. */\n autoHideActions?: boolean;\n /**\n * Whether tabs are editable by default.\n * Can be overridden per-tab via Tab's isEditable prop.\n * @default false\n */\n isEditable?: boolean;\n /**\n * Default menu items for all tabs.\n * Can be overridden per-tab via Tab's menu prop.\n * Set to `null` on individual Tab to disable menu for that tab.\n */\n menu?: ReactNode;\n /**\n * Default props for the menu trigger button.\n * Can be overridden per-tab via Tab's menuTriggerProps prop.\n * @default { icon: <MoreIcon /> }\n */\n menuTriggerProps?: Partial<CubeItemActionProps>;\n /**\n * Default props passed to the Menu component.\n * Can be overridden per-tab via Tab's menuProps prop.\n */\n menuProps?: Partial<CubeMenuProps<object>>;\n /**\n * Whether to show context menu on right-click for all tabs.\n * Can be overridden per-tab via Tab's contextMenu prop.\n * @default false\n */\n contextMenu?: boolean;\n /**\n * Callback when a menu action is triggered on any tab.\n * Called with the action key and the tab key.\n * Tab-level onAction is called first, then this.\n */\n onAction?: (action: string, tabKey: string) => void;\n /** Custom tasty styles for the tab bar container. */\n styles?: Styles;\n /** QA selector attribute. */\n qa?: string;\n /** Tab components or Tabs.List with Tabs.Panel. */\n children?: ReactNode;\n /**\n * Functional content renderer for optimized lazy evaluation.\n * When provided, panel content is only evaluated for the active tab,\n * while inactive tabs use cached content.\n */\n renderPanel?: (key: string) => ReactNode;\n /**\n * Cache keys for individual panels. Enables caching for specified panels.\n */\n panelCacheKeys?: Record<string | number, CacheKeyValue>;\n /**\n * Enable drag-and-drop tab reordering.\n * @default false\n */\n isReorderable?: boolean;\n /**\n * Controlled order of tab keys.\n * When provided, tabs are displayed in this order.\n */\n keyOrder?: string[];\n /**\n * Callback when tabs are reordered via drag-and-drop.\n */\n onReorder?: (newOrder: string[]) => void;\n /**\n * Whether to show a tab picker dropdown in the suffix area.\n * - `true` - always show the tab picker\n * - `false` - never show the tab picker (default)\n * - `'auto'` - show only when tabs overflow (has horizontal scroll)\n * @default false\n */\n showTabPicker?: boolean | 'auto';\n /**\n * Whether to show scroll arrow buttons in the suffix area.\n * - `true` - always show scroll arrows\n * - `false` - never show scroll arrows (default)\n * - `'auto'` - show only when tabs overflow (has horizontal scroll)\n * @default false\n */\n showScrollArrows?: boolean | 'auto';\n /**\n * Position of the tab picker dropdown.\n * - `'prefix'` - render in the prefix slot (before tab list)\n * - `'suffix'` - render in the suffix slot (after tab list)\n * @default 'suffix'\n */\n tabPickerPosition?: TabsActionPosition;\n /**\n * Position of the scroll arrow buttons.\n * - `'prefix'` - render in the prefix slot (before tab list)\n * - `'suffix'` - render in the suffix slot (after tab list)\n * @default 'suffix'\n */\n scrollArrowsPosition?: TabsActionPosition;\n /**\n * Inline padding for the tab list container.\n * Sets horizontal padding only (e.g., \"2x\" → padding: \"0 2x\").\n */\n tabListPadding?: string;\n /** Custom tasty styles for the TabList sub-element. */\n tabListStyles?: Styles;\n /** Custom tasty styles for the Prefix sub-element. */\n prefixStyles?: Styles;\n /** Custom tasty styles for the Suffix sub-element. */\n suffixStyles?: Styles;\n}\n\nexport interface CubeTabProps extends TabStyleProps, PanelBehaviorProps {\n /**\n * Unique identifier for the tab.\n * Auto-injected from the React `key` prop (converted to string).\n */\n id?: string;\n /** Content displayed in the tab button. */\n title: ReactNode;\n /** Panel content rendered when tab is active. */\n children?: ReactNode;\n /** Disables the tab (cannot be selected). */\n isDisabled?: boolean;\n /** Actions to render in the tab. Rendered before menu trigger if tab has menu. */\n actions?: ReactNode;\n /** Whether the tab title can be edited. Overrides the Tabs-level isEditable default. */\n isEditable?: boolean;\n /** Callback when this tab's title is changed. Overrides parent's onTitleChange. */\n onTitleChange?: (newTitle: string) => void;\n /**\n * Menu items to display in a dropdown menu on the tab.\n * Pass Menu.Item elements directly - they will be wrapped in a Menu internally.\n * Overrides the Tabs-level menu default. Set to `null` to disable menu.\n */\n menu?: ReactNode | null;\n /**\n * Props to customize the menu trigger button.\n * Overrides the Tabs-level menuTriggerProps default.\n */\n menuTriggerProps?: Partial<CubeItemActionProps>;\n /**\n * Props passed to the Menu component.\n * Overrides the Tabs-level menuProps default.\n */\n menuProps?: Partial<CubeMenuProps<object>>;\n /**\n * Whether to show context menu on right-click.\n * Uses the same menu items as `menu` prop.\n * @default false\n */\n contextMenu?: boolean;\n /**\n * Callback when a menu action is triggered.\n * Called with the action key from Menu.Item.\n */\n onAction?: (action: string) => void;\n}\n\nexport interface CubeTabPanelProps extends PanelBehaviorProps, QAProps {\n /**\n * Panel identifier. Must match a Tab's id.\n * Auto-injected from the React `key` prop (converted to string).\n */\n id?: string;\n /** Panel content. */\n children?: ReactNode;\n /** Custom tasty styles for the panel container. */\n styles?: Styles;\n}\n\nexport interface CubeTabListProps {\n /** Tab components. */\n children?: ReactNode;\n}\n\n// =============================================================================\n// Internal Types\n// =============================================================================\n\n/**\n * Internal representation of a parsed Tab.\n * Uses `content` instead of `children` to distinguish panel content.\n */\nexport interface ParsedTab extends Omit<CubeTabProps, 'id' | 'children'> {\n /** Tab key (always a string internally for React Aria compatibility) */\n key: string;\n /** Panel content extracted from Tab's children prop */\n content: ReactNode;\n}\n\n/**\n * Internal representation of a parsed TabPanel.\n */\nexport interface ParsedPanel\n extends Omit<CubeTabPanelProps, 'id' | 'children'> {\n /** Panel key (always a string internally for React Aria compatibility) */\n key: string;\n /** Panel content extracted from TabPanel's children prop */\n content: ReactNode;\n}\n"],"mappings":";;;;;;AA0BA,MAAa,iBAAsD;CACjE,QAAQ;CACR,OAAO;CACR"}
1
+ {"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/navigation/Tabs/types.ts"],"sourcesContent":["import type { BaseProps, OuterStyleProps, Styles } from '@tenphi/tasty';\nimport type { ReactNode } from 'react';\nimport type { CubeItemActionProps } from '../../actions/ItemAction';\nimport type { CubeMenuProps } from '../../actions/Menu';\nimport type { CubeItemProps } from '../../content/Item';\n\n// =============================================================================\n// Core Types\n// =============================================================================\n\n/** Visual appearance type for tabs */\nexport type TabType = 'default' | 'narrow' | 'file' | 'radio';\n\n/** Position for TabPicker and scroll arrows */\nexport type TabsActionPosition = 'prefix' | 'suffix';\n\n/**\n * Tab size options.\n * Radio type only supports 'medium' | 'large' (mapped to smaller Item sizes).\n */\nexport type TabSize = 'xsmall' | 'small' | 'medium' | 'large';\n\n/**\n * Size mapping for radio type tabs.\n * Radio type uses smaller sizes similar to RadioGroup tabs mode.\n */\nexport const RADIO_SIZE_MAP: Record<'medium' | 'large', TabSize> = {\n medium: 'xsmall',\n large: 'medium',\n};\n\n/** How the tab `menu` is exposed alongside or instead of the overflow trigger. */\nexport type TabContextMenu = boolean | 'context-only';\n\n// =============================================================================\n// Shared Props Interfaces\n// =============================================================================\n\n/** Common props for panel rendering behavior */\nexport interface PanelBehaviorProps {\n /** If true, panel is rendered but hidden when not active. */\n prerender?: boolean;\n /** If true, once visited the panel stays in DOM. */\n keepMounted?: boolean;\n}\n\n/** Common props for QA attributes */\nexport interface QAProps {\n /** QA selector attribute. */\n qa?: string;\n /** Additional QA value attribute. */\n qaVal?: string;\n}\n\n// =============================================================================\n// Tab Style Props\n// =============================================================================\n\n/** Props from CubeItemProps that don't apply to Tab */\ntype OmittedItemProps =\n | 'id' // Tab has its own id as Key type\n | 'type' // Tab has its own TabType\n | 'size' // Tab has its own TabSize\n | 'theme' // Tabs have internal theming\n | 'shape' // Tabs have internal shape logic\n | 'description' // Tabs don't have descriptions\n | 'descriptionPlacement'\n | 'descriptionProps'\n | 'hotkeys' // Tabs have their own keyboard navigation\n | 'keyboardShortcutProps'\n | 'labelProps' // Tabs use title prop instead\n | 'labelRef'\n | 'level' // Tabs don't use heading levels\n | 'highlight' // Tabs don't use highlighting\n | 'highlightCaseSensitive'\n | 'highlightStyles'\n | 'variant' // Tabs have internal variant logic\n | 'htmlType' // Tab is always a button\n | 'isSelected' // Handled internally by state\n | 'preserveActionsSpace' // Set internally in TabButton\n | 'disableActionsFocus' // Not used in Tab\n | 'actions' // Tab has its own actions definition\n | 'autoHideActions' // Tab has its own autoHideActions\n | 'insideWrapper' // Internal Item wrapper prop\n | 'showActions'; // Internal Item wrapper prop\n\n/** Common styling props for tabs - inherits style props from CubeItemProps */\nexport interface TabStyleProps extends Omit<CubeItemProps, OmittedItemProps> {\n /**\n * Tab size. Supports 'xsmall', 'small', 'medium', 'large'.\n * Radio type only supports 'medium' | 'large' (mapped to smaller Item sizes).\n */\n size?: TabSize;\n /** Visual appearance type. */\n type?: TabType;\n /** Whether to show actions only on hover. */\n autoHideActions?: boolean;\n}\n\n// =============================================================================\n// Component Props\n// =============================================================================\n\n/** Cache key type - primitives only for reliable comparison */\nexport type CacheKeyValue = string | number | boolean | null | undefined;\n\nexport interface CubeTabsProps\n extends BaseProps,\n OuterStyleProps,\n PanelBehaviorProps {\n /** Controlled active tab key. When provided, component is controlled. */\n activeKey?: string;\n /** Initial active tab key for uncontrolled mode. */\n defaultActiveKey?: string;\n /**\n * Visual appearance type for tabs.\n * - `default` - Standard tabs with selection indicator below (default)\n * - `narrow` - Same as default but with collapsed vertical padding on labels\n * - `file` - File-style tabs with border bottom highlight on selection, delimiter between tabs\n * - `radio` - Radio button style for tab selection\n * @default 'default'\n */\n type?: TabType;\n /**\n * Tab size. Supports 'xsmall', 'small', 'medium', 'large'.\n * Radio type only supports 'medium' | 'large' (mapped to smaller Item sizes).\n * @default 'medium'\n */\n size?: TabSize;\n /** Accessible label for the tab list. */\n label?: string;\n /** Content rendered before the tab list. */\n prefix?: ReactNode;\n /** Content rendered after the tab list. */\n suffix?: ReactNode;\n /** Callback when active tab changes. */\n onChange?: (key: string) => void;\n /** Callback when tab delete button is clicked. Presence enables delete buttons. */\n onDelete?: (key: string) => void;\n /** Callback when a tab title is changed. Enables title editing on tabs with isEditable. */\n onTitleChange?: (key: string, newTitle: string) => void;\n /** Whether to show tab actions only on hover. Can be overridden per-tab. */\n autoHideActions?: boolean;\n /**\n * Whether tabs are editable by default.\n * Can be overridden per-tab via Tab's isEditable prop.\n * @default false\n */\n isEditable?: boolean;\n /**\n * Default menu items for all tabs.\n * Can be overridden per-tab via Tab's menu prop.\n * Set to `null` on individual Tab to disable menu for that tab.\n */\n menu?: ReactNode;\n /**\n * Default props for the menu trigger button.\n * Can be overridden per-tab via Tab's menuTriggerProps prop.\n * @default { icon: <MoreIcon /> }\n */\n menuTriggerProps?: Partial<CubeItemActionProps>;\n /**\n * Default props passed to the Menu component.\n * Can be overridden per-tab via Tab's menuProps prop.\n */\n menuProps?: Partial<CubeMenuProps<object>>;\n /**\n * Context menu / overflow behavior for tab `menu` items.\n * - `false` (default) — overflow trigger only; no right-click menu\n * - `true` — overflow trigger and right-click menu\n * - `'context-only'` — right-click menu only; no overflow trigger. Inline close\n * (`onDelete`) shows even when `menu` is non-empty, like tabs without a menu.\n * Can be overridden per-tab via Tab's contextMenu prop.\n * @default false\n */\n contextMenu?: TabContextMenu;\n /**\n * Callback when a menu action is triggered on any tab.\n * Called with the action key and the tab key.\n * Tab-level onAction is called first, then this.\n */\n onAction?: (action: string, tabKey: string) => void;\n /** Custom tasty styles for the tab bar container. */\n styles?: Styles;\n /** QA selector attribute. */\n qa?: string;\n /** Tab components or Tabs.List with Tabs.Panel. */\n children?: ReactNode;\n /**\n * Functional content renderer for optimized lazy evaluation.\n * When provided, panel content is only evaluated for the active tab,\n * while inactive tabs use cached content.\n */\n renderPanel?: (key: string) => ReactNode;\n /**\n * Cache keys for individual panels. Enables caching for specified panels.\n */\n panelCacheKeys?: Record<string | number, CacheKeyValue>;\n /**\n * Enable drag-and-drop tab reordering.\n * @default false\n */\n isReorderable?: boolean;\n /**\n * Controlled order of tab keys.\n * When provided, tabs are displayed in this order.\n */\n keyOrder?: string[];\n /**\n * Callback when tabs are reordered via drag-and-drop.\n */\n onReorder?: (newOrder: string[]) => void;\n /**\n * Whether to show a tab picker dropdown in the suffix area.\n * - `true` - always show the tab picker\n * - `false` - never show the tab picker (default)\n * - `'auto'` - show only when tabs overflow (has horizontal scroll)\n * @default false\n */\n showTabPicker?: boolean | 'auto';\n /**\n * Whether to show scroll arrow buttons in the suffix area.\n * - `true` - always show scroll arrows\n * - `false` - never show scroll arrows (default)\n * - `'auto'` - show only when tabs overflow (has horizontal scroll)\n * @default false\n */\n showScrollArrows?: boolean | 'auto';\n /**\n * Position of the tab picker dropdown.\n * - `'prefix'` - render in the prefix slot (before tab list)\n * - `'suffix'` - render in the suffix slot (after tab list)\n * @default 'suffix'\n */\n tabPickerPosition?: TabsActionPosition;\n /**\n * Position of the scroll arrow buttons.\n * - `'prefix'` - render in the prefix slot (before tab list)\n * - `'suffix'` - render in the suffix slot (after tab list)\n * @default 'suffix'\n */\n scrollArrowsPosition?: TabsActionPosition;\n /**\n * Inline padding for the tab list container.\n * Sets horizontal padding only (e.g., \"2x\" → padding: \"0 2x\").\n */\n tabListPadding?: string;\n /** Custom tasty styles for the TabList sub-element. */\n tabListStyles?: Styles;\n /** Custom tasty styles for the Prefix sub-element. */\n prefixStyles?: Styles;\n /** Custom tasty styles for the Suffix sub-element. */\n suffixStyles?: Styles;\n}\n\nexport interface CubeTabProps extends TabStyleProps, PanelBehaviorProps {\n /**\n * Unique identifier for the tab.\n * Auto-injected from the React `key` prop (converted to string).\n */\n id?: string;\n /** Content displayed in the tab button. */\n title: ReactNode;\n /** Panel content rendered when tab is active. */\n children?: ReactNode;\n /** Disables the tab (cannot be selected). */\n isDisabled?: boolean;\n /** Actions to render in the tab. Rendered before menu trigger if tab has menu. */\n actions?: ReactNode;\n /** Whether the tab title can be edited. Overrides the Tabs-level isEditable default. */\n isEditable?: boolean;\n /** Callback when this tab's title is changed. Overrides parent's onTitleChange. */\n onTitleChange?: (newTitle: string) => void;\n /**\n * Menu items to display in a dropdown menu on the tab.\n * Pass Menu.Item elements directly - they will be wrapped in a Menu internally.\n * Overrides the Tabs-level menu default. Set to `null` to disable menu.\n */\n menu?: ReactNode | null;\n /**\n * Props to customize the menu trigger button.\n * Overrides the Tabs-level menuTriggerProps default.\n */\n menuTriggerProps?: Partial<CubeItemActionProps>;\n /**\n * Props passed to the Menu component.\n * Overrides the Tabs-level menuProps default.\n */\n menuProps?: Partial<CubeMenuProps<object>>;\n /**\n * Context menu / overflow behavior. Same values as Tabs `contextMenu`.\n * Uses the same menu items as `menu` prop.\n * @default false\n */\n contextMenu?: TabContextMenu;\n /**\n * Callback when a menu action is triggered.\n * Called with the action key from Menu.Item.\n */\n onAction?: (action: string) => void;\n}\n\nexport interface CubeTabPanelProps extends PanelBehaviorProps, QAProps {\n /**\n * Panel identifier. Must match a Tab's id.\n * Auto-injected from the React `key` prop (converted to string).\n */\n id?: string;\n /** Panel content. */\n children?: ReactNode;\n /** Custom tasty styles for the panel container. */\n styles?: Styles;\n}\n\nexport interface CubeTabListProps {\n /** Tab components. */\n children?: ReactNode;\n}\n\n// =============================================================================\n// Internal Types\n// =============================================================================\n\n/**\n * Internal representation of a parsed Tab.\n * Uses `content` instead of `children` to distinguish panel content.\n */\nexport interface ParsedTab extends Omit<CubeTabProps, 'id' | 'children'> {\n /** Tab key (always a string internally for React Aria compatibility) */\n key: string;\n /** Panel content extracted from Tab's children prop */\n content: ReactNode;\n}\n\n/**\n * Internal representation of a parsed TabPanel.\n */\nexport interface ParsedPanel\n extends Omit<CubeTabPanelProps, 'id' | 'children'> {\n /** Panel key (always a string internally for React Aria compatibility) */\n key: string;\n /** Panel content extracted from TabPanel's children prop */\n content: ReactNode;\n}\n"],"mappings":";;;;;;AA0BA,MAAa,iBAAsD;CACjE,QAAQ;CACR,OAAO;CACR"}
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
2
2
  import { chainRaf } from "../../../utils/raf.js";
3
3
  import { useCallback, useState } from "react";
4
4
 
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
2
2
  import { chainRaf } from "../../../utils/raf.js";
3
3
  import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
4
4
 
@@ -1,5 +1,5 @@
1
1
 
2
- import { CubeTabListProps, CubeTabPanelProps, CubeTabProps, CubeTabsProps, TabSize, TabType, TabsActionPosition } from "./Tabs/types.js";
2
+ import { CubeTabListProps, CubeTabPanelProps, CubeTabProps, CubeTabsProps, TabContextMenu, TabSize, TabType, TabsActionPosition } from "./Tabs/types.js";
3
3
  import { CubeTabsActionProps, TabsAction } from "./Tabs/TabsAction.js";
4
4
  import { Tab, Tabs } from "./Tabs/Tabs.js";
5
5
  import "./Tabs/index.js";
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
2
2
  import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
3
3
  import { Block } from "../../Block.js";
4
4
  import { Space } from "../../layout/Space.js";
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
2
2
  import { _Text } from "../../content/Text.js";
3
3
  import { _Title } from "../../content/Title.js";
4
4
  import { Card } from "../../content/Card/Card.js";
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
2
2
  import { _Title } from "../../content/Title.js";
3
3
  import { useProviderProps } from "../../../provider.js";
4
4
  import { Space } from "../../layout/Space.js";
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
2
2
  import { tasty } from "@tenphi/tasty";
3
3
  import { useRef } from "react";
4
4
  import { jsx } from "react/jsx-runtime";
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
2
2
  import { CalendarCell } from "./CalendarCell.js";
3
3
  import { tasty } from "@tenphi/tasty";
4
4
  import { jsx, jsxs } from "react/jsx-runtime";
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
2
2
  import { _Title } from "../../content/Title.js";
3
3
  import { useProviderProps } from "../../../provider.js";
4
4
  import { Space } from "../../layout/Space.js";
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
2
2
  import { Button } from "../../actions/index.js";
3
3
  import { tasty } from "@tenphi/tasty";
4
4
  import { forwardRef } from "react";
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
2
2
  import { chain } from "../../../utils/react/chain.js";
3
3
  import { Paragraph } from "../../content/Paragraph.js";
4
4
  import { _Title } from "../../content/Title.js";
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
2
2
  import { AlertDialogZone } from "./AlertDialogZone.js";
3
3
  import { createContext, useContext, useMemo, useRef, useState } from "react";
4
4
  import { jsx, jsxs } from "react/jsx-runtime";
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
2
2
  import { Portal } from "../../portal/Portal.js";
3
3
  import { DialogContainer } from "../Dialog/DialogContainer.js";
4
4
  import { _AlertDialog } from "./AlertDialog.js";
@@ -1,11 +1,12 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
2
+ import { extractStyles } from "../../../utils/styles.js";
2
3
  import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
3
4
  import { SlotProvider } from "../../../utils/react/Slots.js";
4
5
  import { CloseIcon } from "../../../icons/CloseIcon.js";
5
6
  import { useOpenTransitionContext } from "../Modal/OpenTransition.js";
6
7
  import { _ItemButton } from "../../actions/ItemButton/ItemButton.js";
7
8
  import { useDialogContext } from "./context.js";
8
- import { BASE_STYLES, BLOCK_STYLES, DIMENSION_STYLES, FLOW_STYLES, extractStyles, tasty } from "@tenphi/tasty";
9
+ import { BASE_STYLES, BLOCK_STYLES, DIMENSION_STYLES, FLOW_STYLES, tasty } from "@tenphi/tasty";
9
10
  import { forwardRef, useEffect, useMemo, useRef } from "react";
10
11
  import { jsx, jsxs } from "react/jsx-runtime";
11
12
  import { DismissButton, FocusScope, useDialog, useMessageFormatter } from "react-aria";
@@ -1 +1 @@
1
- {"version":3,"file":"Dialog.js","names":["ItemButton","mergeProps"],"sources":["../../../../src/components/overlays/Dialog/Dialog.tsx"],"sourcesContent":["import { createFocusManager } from '@react-aria/focus';\nimport { useDOMRef } from '@react-spectrum/utils';\nimport { DOMRef } from '@react-types/shared';\nimport {\n BASE_STYLES,\n BaseProps,\n BaseStyleProps,\n BLOCK_STYLES,\n BlockStyleProps,\n DIMENSION_STYLES,\n DimensionStyleProps,\n extractStyles,\n FLOW_STYLES,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, ReactElement, useEffect, useMemo, useRef } from 'react';\nimport {\n AriaDialogProps,\n DismissButton,\n FocusScope,\n useDialog,\n useMessageFormatter,\n} from 'react-aria';\n\nimport { CloseIcon } from '../../../icons';\nimport { mergeProps, SlotProvider } from '../../../utils/react';\nimport { ItemButton } from '../../actions';\nimport { useOpenTransitionContext } from '../Modal/OpenTransition';\n\nimport { useDialogContext } from './context';\n\nconst STYLES_LIST = [\n ...BASE_STYLES,\n ...DIMENSION_STYLES,\n ...BLOCK_STYLES,\n ...FLOW_STYLES,\n];\n\nconst DialogElement = tasty({\n as: 'section',\n styles: {\n display: 'flex',\n flow: 'column',\n fill: '#white',\n pointerEvents: 'auto',\n outline: 0,\n position: {\n '': 'relative',\n 'type=panel': 'absolute',\n },\n width: {\n '': '$min-dialog-size $dialog-size (100dvw - 8x)',\n 'type=fullscreen': '(100dvw - 8x) (100dvw - 8x)',\n 'type=fullscreenTakeover': '100dvw 100dvw',\n 'type=panel': 'auto',\n },\n height: {\n '': 'auto (100dvh - 8x)',\n 'type=fullscreen': '(100dvh - 8x) (100dvh - 8x)',\n 'type=fullscreenTakeover | type=panel': '100dvh 100dvh',\n 'type=popover': 'initial initial (50dvh - 5x)',\n },\n gap: 0,\n border: {\n '': false,\n 'type=popover': true,\n },\n radius: {\n '': '1cr',\n 'type=tray': '1cr top',\n 'type=fullscreenTakeover': '0r',\n },\n shadow: {\n '': '$dialog-shadow',\n 'type=popover | type=panel': '$shadow',\n },\n top: {\n '': false,\n 'type=modal': '((50vh - 50%) / -3)',\n 'type=panel': 'auto',\n },\n '$dialog-title-padding-v': {\n '': '1.5x',\n 'type=popover': '1x',\n },\n '$dialog-content-padding-v': {\n '': '1.5x',\n 'type=popover': '1x',\n },\n '$dialog-padding-h': {\n '': '1.5x',\n 'type=popover': '1x',\n },\n '$dialog-footer-v': {\n '': '1.5x',\n 'type=popover': '1x',\n },\n '$dialog-content-gap': {\n '': '1.5x',\n 'type=popover': '1x',\n },\n },\n});\n\nconst CloseButton = tasty(ItemButton, {\n qa: 'ModalCloseButton',\n type: 'neutral',\n styles: {\n position: 'absolute',\n top: '1x',\n right: '1x',\n },\n});\n\nconst sizeMap = {\n S: 'small',\n M: 'medium',\n L: 'large',\n};\nconst sizePxMap = {\n small: 360,\n medium: 479,\n large: 798,\n};\n\nconst intlMessages = {\n 'en-US': {\n dismiss: 'Dismiss',\n alert: 'Alert',\n },\n};\n\nexport interface CubeDialogProps\n extends Omit<BaseProps, 'role'>,\n AriaDialogProps,\n BaseStyleProps,\n BlockStyleProps,\n DimensionStyleProps {\n /** The size of the dialog */\n size?: 'S' | 'M' | 'L' | 'small' | 'medium' | 'large';\n /** Whether the dialog is dismissable */\n isDismissable?: boolean;\n /** Trigger when the dialog is dismissed */\n onDismiss?: (arg?: any) => void;\n /** That you can replace the close icon with */\n closeIcon?: ReactElement;\n closeButtonStyles?: Styles;\n role?: 'dialog' | 'alertdialog';\n}\n\n/**\n * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.\n * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.\n */\nexport const Dialog = forwardRef(function Dialog(\n props: CubeDialogProps,\n ref: DOMRef<HTMLDivElement>,\n) {\n const transitionContext = useOpenTransitionContext();\n\n const isEntered = transitionContext?.transitionState === 'entered';\n\n const context = useDialogContext();\n\n const content = useMemo(() => {\n return <DialogContent key=\"content\" {...props} ref={ref} />;\n }, [props, ref]);\n\n const shouldContainFocus = isEntered && context.type !== 'panel';\n\n // Track the element that was focused before the dialog opened\n // This handles hideOnClose case where FocusScope doesn't unmount\n const previouslyFocusedRef = useRef<Element | null>(null);\n\n // Capture the focused element when dialog opens\n useEffect(() => {\n if (context.isOpen) {\n previouslyFocusedRef.current = document.activeElement;\n }\n }, [context.isOpen]);\n\n // Restore focus when dialog closes (for hideOnClose case where component stays mounted)\n useEffect(() => {\n if (!context.isOpen && previouslyFocusedRef.current) {\n const elementToFocus = previouslyFocusedRef.current as HTMLElement;\n\n // Use setTimeout to ensure this runs after the close transition\n setTimeout(() => {\n elementToFocus?.focus?.();\n });\n previouslyFocusedRef.current = null;\n }\n }, [context.isOpen]);\n\n return (\n // This component traps the focus inside the dialog and restores it on close.\n <FocusScope restoreFocus contain={shouldContainFocus}>\n {content}\n </FocusScope>\n );\n});\n\nconst DialogContent = forwardRef(function DialogContent(\n props: CubeDialogProps,\n ref: DOMRef<HTMLDivElement>,\n) {\n let { type = 'modal', ...contextProps } = useDialogContext();\n\n let {\n qa,\n children,\n size = 'M',\n isDismissable = contextProps.isDismissable,\n onDismiss = contextProps.onClose,\n closeIcon,\n closeButtonStyles,\n style,\n ...otherProps\n } = props;\n\n size = sizeMap[size.toUpperCase()] || size;\n\n const styles: Styles = extractStyles(otherProps, STYLES_LIST);\n\n let formatMessage = useMessageFormatter(intlMessages);\n\n let domRef = useDOMRef(ref);\n let { dialogProps, titleProps } = useDialog(\n mergeProps(contextProps, props),\n domRef,\n );\n\n // If rendered in a popover or tray there won't be a visible dismiss button,\n // so we render a hidden one for screen readers.\n let dismissButton;\n if (type === 'popover' || type === 'tray') {\n dismissButton = <DismissButton onDismiss={onDismiss} />;\n }\n\n // Focus the first focusable element in the dialog when it opens\n useEffect(() => {\n if (contextProps.isOpen) {\n setTimeout(() => {\n if (\n domRef.current &&\n !domRef.current.contains(document.activeElement)\n ) {\n // Priority 1: autofocus input or primary button\n const priorityElement = domRef.current.querySelector(\n 'input[data-autofocus], button[type=\"submit\"], button[data-type=\"primary\"]',\n ) as HTMLElement | null;\n\n if (priorityElement) {\n priorityElement.focus();\n } else {\n // Fallback: focus first tabbable element, or dialog itself\n const focusManager = createFocusManager(domRef);\n\n if (!focusManager.focusFirst({ tabbable: true })) {\n domRef.current.focus();\n }\n }\n }\n });\n }\n }, [contextProps.isOpen]);\n\n // let hasHeader = useHasChild('[data-id=\"Header\"]', domRef);\n // let hasFooter = useHasChild('[data-id=\"Footer\"]', domRef);\n\n let slots = {\n title: {\n level: 2,\n preset: 'h4',\n ...titleProps,\n },\n content: {\n styles: {\n flexGrow: 1,\n padding: '$dialog-content-padding-v $dialog-padding-h',\n gap: '$dialog-content-gap',\n height: {\n '': 'max (100% - (2 * $dialog-content-padding-v))',\n ':last-child': 'max (100% - $dialog-content-padding-v)',\n },\n },\n },\n header: {\n ellipsis: true,\n styles: {\n display: 'flex',\n flow: 'row',\n gap: '1x',\n placeItems: 'center stretch',\n placeContent: 'space-between',\n padding: `$dialog-title-padding-v ${\n isDismissable ? '($dialog-padding-h + 4x)' : '$dialog-padding-h'\n } $dialog-title-padding-v $dialog-padding-h`,\n border: 'bottom',\n },\n },\n footer: {\n styles: {\n display: 'flex',\n gap: '1x',\n flow: 'row-reverse',\n placeItems: 'baseline stretch',\n placeContent: 'space-between',\n padding: '$dialog-footer-v $dialog-padding-h',\n },\n },\n buttonGroup: {\n styles: {\n flow: 'row-reverse',\n },\n },\n };\n\n return (\n <DialogElement\n ref={domRef}\n data-id=\"Dialog\"\n data-qa={qa || 'Dialog'}\n styles={styles}\n as=\"section\"\n {...dialogProps}\n mods={{ dismissable: isDismissable }}\n style={{\n '--dialog-size': `${sizePxMap[size] || sizePxMap.small}px`,\n ...style,\n }}\n data-type={type}\n data-size={size}\n >\n {dismissButton}\n\n <SlotProvider slots={slots}>\n {isDismissable && (\n <CloseButton\n icon={closeIcon || <CloseIcon size={20} />}\n label={formatMessage('dismiss')}\n onPress={() => onDismiss && onDismiss()}\n />\n )}\n {children}\n </SlotProvider>\n </DialogElement>\n );\n});\n"],"mappings":"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"}
1
+ {"version":3,"file":"Dialog.js","names":["ItemButton","mergeProps"],"sources":["../../../../src/components/overlays/Dialog/Dialog.tsx"],"sourcesContent":["import { createFocusManager } from '@react-aria/focus';\nimport { useDOMRef } from '@react-spectrum/utils';\nimport { DOMRef } from '@react-types/shared';\nimport {\n BASE_STYLES,\n BaseProps,\n BaseStyleProps,\n BLOCK_STYLES,\n BlockStyleProps,\n DIMENSION_STYLES,\n DimensionStyleProps,\n FLOW_STYLES,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, ReactElement, useEffect, useMemo, useRef } from 'react';\nimport {\n AriaDialogProps,\n DismissButton,\n FocusScope,\n useDialog,\n useMessageFormatter,\n} from 'react-aria';\n\nimport { CloseIcon } from '../../../icons';\nimport { mergeProps, SlotProvider } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { ItemButton } from '../../actions';\nimport { useOpenTransitionContext } from '../Modal/OpenTransition';\n\nimport { useDialogContext } from './context';\n\nconst STYLES_LIST = [\n ...BASE_STYLES,\n ...DIMENSION_STYLES,\n ...BLOCK_STYLES,\n ...FLOW_STYLES,\n];\n\nconst DialogElement = tasty({\n as: 'section',\n styles: {\n display: 'flex',\n flow: 'column',\n fill: '#white',\n pointerEvents: 'auto',\n outline: 0,\n position: {\n '': 'relative',\n 'type=panel': 'absolute',\n },\n width: {\n '': '$min-dialog-size $dialog-size (100dvw - 8x)',\n 'type=fullscreen': '(100dvw - 8x) (100dvw - 8x)',\n 'type=fullscreenTakeover': '100dvw 100dvw',\n 'type=panel': 'auto',\n },\n height: {\n '': 'auto (100dvh - 8x)',\n 'type=fullscreen': '(100dvh - 8x) (100dvh - 8x)',\n 'type=fullscreenTakeover | type=panel': '100dvh 100dvh',\n 'type=popover': 'initial initial (50dvh - 5x)',\n },\n gap: 0,\n border: {\n '': false,\n 'type=popover': true,\n },\n radius: {\n '': '1cr',\n 'type=tray': '1cr top',\n 'type=fullscreenTakeover': '0r',\n },\n shadow: {\n '': '$dialog-shadow',\n 'type=popover | type=panel': '$shadow',\n },\n top: {\n '': false,\n 'type=modal': '((50vh - 50%) / -3)',\n 'type=panel': 'auto',\n },\n '$dialog-title-padding-v': {\n '': '1.5x',\n 'type=popover': '1x',\n },\n '$dialog-content-padding-v': {\n '': '1.5x',\n 'type=popover': '1x',\n },\n '$dialog-padding-h': {\n '': '1.5x',\n 'type=popover': '1x',\n },\n '$dialog-footer-v': {\n '': '1.5x',\n 'type=popover': '1x',\n },\n '$dialog-content-gap': {\n '': '1.5x',\n 'type=popover': '1x',\n },\n },\n});\n\nconst CloseButton = tasty(ItemButton, {\n qa: 'ModalCloseButton',\n type: 'neutral',\n styles: {\n position: 'absolute',\n top: '1x',\n right: '1x',\n },\n});\n\nconst sizeMap = {\n S: 'small',\n M: 'medium',\n L: 'large',\n};\nconst sizePxMap = {\n small: 360,\n medium: 479,\n large: 798,\n};\n\nconst intlMessages = {\n 'en-US': {\n dismiss: 'Dismiss',\n alert: 'Alert',\n },\n};\n\nexport interface CubeDialogProps\n extends Omit<BaseProps, 'role'>,\n AriaDialogProps,\n BaseStyleProps,\n BlockStyleProps,\n DimensionStyleProps {\n /** The size of the dialog */\n size?: 'S' | 'M' | 'L' | 'small' | 'medium' | 'large';\n /** Whether the dialog is dismissable */\n isDismissable?: boolean;\n /** Trigger when the dialog is dismissed */\n onDismiss?: (arg?: any) => void;\n /** That you can replace the close icon with */\n closeIcon?: ReactElement;\n closeButtonStyles?: Styles;\n role?: 'dialog' | 'alertdialog';\n}\n\n/**\n * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.\n * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.\n */\nexport const Dialog = forwardRef(function Dialog(\n props: CubeDialogProps,\n ref: DOMRef<HTMLDivElement>,\n) {\n const transitionContext = useOpenTransitionContext();\n\n const isEntered = transitionContext?.transitionState === 'entered';\n\n const context = useDialogContext();\n\n const content = useMemo(() => {\n return <DialogContent key=\"content\" {...props} ref={ref} />;\n }, [props, ref]);\n\n const shouldContainFocus = isEntered && context.type !== 'panel';\n\n // Track the element that was focused before the dialog opened\n // This handles hideOnClose case where FocusScope doesn't unmount\n const previouslyFocusedRef = useRef<Element | null>(null);\n\n // Capture the focused element when dialog opens\n useEffect(() => {\n if (context.isOpen) {\n previouslyFocusedRef.current = document.activeElement;\n }\n }, [context.isOpen]);\n\n // Restore focus when dialog closes (for hideOnClose case where component stays mounted)\n useEffect(() => {\n if (!context.isOpen && previouslyFocusedRef.current) {\n const elementToFocus = previouslyFocusedRef.current as HTMLElement;\n\n // Use setTimeout to ensure this runs after the close transition\n setTimeout(() => {\n elementToFocus?.focus?.();\n });\n previouslyFocusedRef.current = null;\n }\n }, [context.isOpen]);\n\n return (\n // This component traps the focus inside the dialog and restores it on close.\n <FocusScope restoreFocus contain={shouldContainFocus}>\n {content}\n </FocusScope>\n );\n});\n\nconst DialogContent = forwardRef(function DialogContent(\n props: CubeDialogProps,\n ref: DOMRef<HTMLDivElement>,\n) {\n let { type = 'modal', ...contextProps } = useDialogContext();\n\n let {\n qa,\n children,\n size = 'M',\n isDismissable = contextProps.isDismissable,\n onDismiss = contextProps.onClose,\n closeIcon,\n closeButtonStyles,\n style,\n ...otherProps\n } = props;\n\n size = sizeMap[size.toUpperCase()] || size;\n\n const styles: Styles = extractStyles(otherProps, STYLES_LIST);\n\n let formatMessage = useMessageFormatter(intlMessages);\n\n let domRef = useDOMRef(ref);\n let { dialogProps, titleProps } = useDialog(\n mergeProps(contextProps, props),\n domRef,\n );\n\n // If rendered in a popover or tray there won't be a visible dismiss button,\n // so we render a hidden one for screen readers.\n let dismissButton;\n if (type === 'popover' || type === 'tray') {\n dismissButton = <DismissButton onDismiss={onDismiss} />;\n }\n\n // Focus the first focusable element in the dialog when it opens\n useEffect(() => {\n if (contextProps.isOpen) {\n setTimeout(() => {\n if (\n domRef.current &&\n !domRef.current.contains(document.activeElement)\n ) {\n // Priority 1: autofocus input or primary button\n const priorityElement = domRef.current.querySelector(\n 'input[data-autofocus], button[type=\"submit\"], button[data-type=\"primary\"]',\n ) as HTMLElement | null;\n\n if (priorityElement) {\n priorityElement.focus();\n } else {\n // Fallback: focus first tabbable element, or dialog itself\n const focusManager = createFocusManager(domRef);\n\n if (!focusManager.focusFirst({ tabbable: true })) {\n domRef.current.focus();\n }\n }\n }\n });\n }\n }, [contextProps.isOpen]);\n\n // let hasHeader = useHasChild('[data-id=\"Header\"]', domRef);\n // let hasFooter = useHasChild('[data-id=\"Footer\"]', domRef);\n\n let slots = {\n title: {\n level: 2,\n preset: 'h4',\n ...titleProps,\n },\n content: {\n styles: {\n flexGrow: 1,\n padding: '$dialog-content-padding-v $dialog-padding-h',\n gap: '$dialog-content-gap',\n height: {\n '': 'max (100% - (2 * $dialog-content-padding-v))',\n ':last-child': 'max (100% - $dialog-content-padding-v)',\n },\n },\n },\n header: {\n ellipsis: true,\n styles: {\n display: 'flex',\n flow: 'row',\n gap: '1x',\n placeItems: 'center stretch',\n placeContent: 'space-between',\n padding: `$dialog-title-padding-v ${\n isDismissable ? '($dialog-padding-h + 4x)' : '$dialog-padding-h'\n } $dialog-title-padding-v $dialog-padding-h`,\n border: 'bottom',\n },\n },\n footer: {\n styles: {\n display: 'flex',\n gap: '1x',\n flow: 'row-reverse',\n placeItems: 'baseline stretch',\n placeContent: 'space-between',\n padding: '$dialog-footer-v $dialog-padding-h',\n },\n },\n buttonGroup: {\n styles: {\n flow: 'row-reverse',\n },\n },\n };\n\n return (\n <DialogElement\n ref={domRef}\n data-id=\"Dialog\"\n data-qa={qa || 'Dialog'}\n styles={styles}\n as=\"section\"\n {...dialogProps}\n mods={{ dismissable: isDismissable }}\n style={{\n '--dialog-size': `${sizePxMap[size] || sizePxMap.small}px`,\n ...style,\n }}\n data-type={type}\n data-size={size}\n >\n {dismissButton}\n\n <SlotProvider slots={slots}>\n {isDismissable && (\n <CloseButton\n icon={closeIcon || <CloseIcon size={20} />}\n label={formatMessage('dismiss')}\n onPress={() => onDismiss && onDismiss()}\n />\n )}\n {children}\n </SlotProvider>\n </DialogElement>\n );\n});\n"],"mappings":"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"}
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
2
2
  import { _Modal } from "../Modal/Modal.js";
3
3
  import { DialogContext } from "./context.js";
4
4
  import { Children, isValidElement, useRef } from "react";
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
2
2
  import { _Title } from "../../content/Title.js";
3
3
  import { ButtonGroup } from "../../actions/ButtonGroup/ButtonGroup.js";
4
4
  import { Button } from "../../actions/index.js";
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
2
2
  import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
3
3
  import { _Modal } from "../Modal/Modal.js";
4
4
  import { _Tray } from "../Modal/Tray.js";
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
2
2
  import { createContext, useContext } from "react";
3
3
  import invariant from "tiny-invariant";
4
4
 
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
2
2
  import { mergeProps } from "../../../utils/react/mergeProps.js";
3
3
  import { useEvent } from "../../../_internal/hooks/use-event.js";
4
4
  import { DialogContainer } from "./DialogContainer.js";
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
2
2
  import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
3
3
  import { _Overlay } from "./Overlay.js";
4
4
  import { _Underlay } from "./Underlay.js";
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
2
2
  import { Children, cloneElement, createContext, useContext, useRef } from "react";
3
3
  import { jsx } from "react/jsx-runtime";
4
4
  import { Transition } from "react-transition-group";
@@ -1,4 +1,4 @@
1
- /** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
1
+ /** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
2
2
  import { Provider, useProviderProps } from "../../../provider.js";
3
3
  import { OpenTransition } from "./OpenTransition.js";
4
4
  import { forwardRef, useCallback, useState } from "react";