@dbcdk/react-components 0.0.103 → 0.0.105

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 (357) hide show
  1. package/dist/assets/logo.cjs +87 -0
  2. package/dist/assets/logo.js +85 -0
  3. package/dist/client.cjs +587 -0
  4. package/dist/client.d.ts +83 -0
  5. package/dist/client.js +84 -0
  6. package/dist/components/accordion/Accordion.cjs +117 -0
  7. package/dist/components/accordion/Accordion.d.ts +5 -2
  8. package/dist/components/accordion/Accordion.js +111 -0
  9. package/dist/components/accordion/Accordion.module.css +41 -0
  10. package/dist/components/accordion/components/AccordionRow.cjs +120 -0
  11. package/dist/components/accordion/components/AccordionRow.js +114 -0
  12. package/dist/components/accordion/components/AccordionRow.module.css +133 -0
  13. package/dist/components/alert/Alert.cjs +52 -0
  14. package/dist/components/alert/Alert.d.ts +2 -1
  15. package/dist/components/alert/Alert.js +46 -0
  16. package/dist/components/alert/Alert.module.css +97 -0
  17. package/dist/components/app-header/AppHeader.cjs +14 -0
  18. package/dist/components/app-header/AppHeader.js +8 -0
  19. package/dist/components/app-header/AppHeader.module.css +74 -0
  20. package/dist/components/attribute-chip/AttributeChip.cjs +22 -0
  21. package/dist/components/attribute-chip/AttributeChip.js +16 -0
  22. package/dist/components/attribute-chip/AttributeChip.module.css +65 -0
  23. package/dist/components/avatar/Avatar.cjs +111 -0
  24. package/dist/components/avatar/Avatar.js +86 -0
  25. package/dist/components/avatar/Avatar.module.css +91 -0
  26. package/dist/components/breadcrumbs/Breadcrumbs.cjs +24 -0
  27. package/dist/components/breadcrumbs/Breadcrumbs.js +18 -0
  28. package/dist/components/breadcrumbs/Breadcrumbs.module.css +80 -0
  29. package/dist/components/button/Button.cjs +149 -0
  30. package/dist/components/button/Button.js +124 -0
  31. package/dist/components/button/Button.module.css +260 -0
  32. package/dist/components/button-select/ButtonSelect.cjs +35 -0
  33. package/dist/components/button-select/ButtonSelect.js +29 -0
  34. package/dist/components/button-select/ButtonSelect.module.css +40 -0
  35. package/dist/components/card/Card.cjs +112 -0
  36. package/dist/components/card/Card.d.ts +2 -1
  37. package/dist/components/card/Card.js +106 -0
  38. package/dist/components/card/Card.module.css +187 -0
  39. package/dist/components/card/components/CardMeta.cjs +62 -0
  40. package/dist/components/card/components/CardMeta.js +55 -0
  41. package/dist/components/card/components/CardMeta.module.css +55 -0
  42. package/dist/components/card-container/CardContainer.cjs +34 -0
  43. package/dist/components/card-container/CardContainer.js +28 -0
  44. package/dist/components/card-container/CardContainer.module.css +63 -0
  45. package/dist/components/chip/Chip.cjs +65 -0
  46. package/dist/components/chip/Chip.js +59 -0
  47. package/dist/components/chip/Chip.module.css +236 -0
  48. package/dist/components/circle/Circle.cjs +33 -0
  49. package/dist/components/circle/Circle.js +27 -0
  50. package/dist/components/circle/Circle.module.css +128 -0
  51. package/dist/components/clear-button/ClearButton.cjs +33 -0
  52. package/dist/components/clear-button/ClearButton.d.ts +2 -1
  53. package/dist/components/clear-button/ClearButton.js +27 -0
  54. package/dist/components/clear-button/ClearButton.module.css +26 -0
  55. package/dist/components/code-block/CodeBlock.cjs +97 -0
  56. package/dist/components/code-block/CodeBlock.js +91 -0
  57. package/dist/components/code-block/CodeBlock.module.css +124 -0
  58. package/dist/components/copy-button/CopyButton.cjs +139 -0
  59. package/dist/components/copy-button/CopyButton.js +133 -0
  60. package/dist/components/copy-button/CopyButton.module.css +22 -0
  61. package/dist/components/datetime-picker/DateTimePicker.cjs +559 -0
  62. package/dist/components/datetime-picker/DateTimePicker.js +553 -0
  63. package/dist/components/datetime-picker/DateTimePicker.module.css +155 -0
  64. package/dist/components/datetime-picker/dateTimeHelpers.cjs +179 -0
  65. package/dist/components/datetime-picker/dateTimeHelpers.js +160 -0
  66. package/dist/components/divider/Divider.cjs +22 -0
  67. package/dist/components/divider/Divider.js +20 -0
  68. package/dist/components/filter-field/FilterField.cjs +296 -0
  69. package/dist/components/filter-field/FilterField.js +289 -0
  70. package/dist/components/filter-field/FilterField.module.css +379 -0
  71. package/dist/components/filtering/chip-multi-toggle/ChipMultiToggle.cjs +115 -0
  72. package/dist/components/filtering/chip-multi-toggle/ChipMultiToggle.js +108 -0
  73. package/dist/components/filtering/chip-multi-toggle/ChipMultiToggle.module.css +59 -0
  74. package/dist/components/forms/checkbox/Checkbox.cjs +88 -0
  75. package/dist/components/forms/checkbox/Checkbox.js +82 -0
  76. package/dist/components/forms/checkbox/Checkbox.module.css +104 -0
  77. package/dist/components/forms/checkbox-group/CheckboxGroup.cjs +121 -0
  78. package/dist/components/forms/checkbox-group/CheckboxGroup.js +115 -0
  79. package/dist/components/forms/checkbox-group/CheckboxGroup.module.css +115 -0
  80. package/dist/components/forms/form-select/FormSelect.cjs +191 -0
  81. package/dist/components/forms/form-select/FormSelect.js +166 -0
  82. package/dist/components/forms/form-select/FormSelect.module.css +236 -0
  83. package/dist/components/forms/input/Input.cjs +188 -0
  84. package/dist/components/forms/input/Input.d.ts +1 -0
  85. package/dist/components/forms/input/Input.js +182 -0
  86. package/dist/components/forms/input/Input.module.css +468 -0
  87. package/dist/components/forms/input-container/InputContainer.cjs +72 -0
  88. package/dist/components/forms/input-container/InputContainer.js +66 -0
  89. package/dist/components/forms/input-container/InputContainer.module.css +59 -0
  90. package/dist/components/forms/multi-select/MultiSelect.cjs +227 -0
  91. package/dist/components/forms/multi-select/MultiSelect.js +225 -0
  92. package/dist/components/forms/radio-buttons/RadioButton.cjs +91 -0
  93. package/dist/components/forms/radio-buttons/RadioButton.js +85 -0
  94. package/dist/components/forms/radio-buttons/RadioButtonGroup.cjs +74 -0
  95. package/dist/components/forms/radio-buttons/RadioButtonGroup.js +72 -0
  96. package/dist/components/forms/radio-buttons/RadioButtons.module.css +118 -0
  97. package/dist/components/forms/select/Select.cjs +286 -0
  98. package/dist/components/forms/select/Select.js +280 -0
  99. package/dist/components/forms/select/Select.module.css +32 -0
  100. package/dist/components/forms/text-area/Textarea.cjs +116 -0
  101. package/dist/components/forms/text-area/Textarea.js +110 -0
  102. package/dist/components/forms/text-area/Textarea.module.css +70 -0
  103. package/dist/components/forms/typeahead/Typeahead.cjs +792 -0
  104. package/dist/components/forms/typeahead/Typeahead.js +768 -0
  105. package/dist/components/forms/typeahead/Typeahead.module.css +38 -0
  106. package/dist/components/grid/Grid.cjs +45 -0
  107. package/dist/components/grid/Grid.js +38 -0
  108. package/dist/components/grid/Grid.module.css +35 -0
  109. package/dist/components/headline/CollapsibleHeadline.cjs +89 -0
  110. package/dist/components/headline/CollapsibleHeadline.d.ts +4 -4
  111. package/dist/components/headline/CollapsibleHeadline.js +83 -0
  112. package/dist/components/headline/Headline.cjs +59 -0
  113. package/dist/components/headline/Headline.js +53 -0
  114. package/dist/components/headline/Headline.module.css +185 -0
  115. package/dist/components/hyperlink/Hyperlink.cjs +107 -0
  116. package/dist/components/hyperlink/Hyperlink.js +82 -0
  117. package/dist/components/hyperlink/Hyperlink.module.css +121 -0
  118. package/dist/components/icon/Icon.cjs +27 -0
  119. package/dist/components/icon/Icon.js +20 -0
  120. package/dist/components/icon/Icon.module.css +36 -0
  121. package/dist/components/inline-status/InlineStatus.cjs +39 -0
  122. package/dist/components/inline-status/InlineStatus.js +33 -0
  123. package/dist/components/inline-status/InlineStatus.module.css +92 -0
  124. package/dist/components/interval-select/IntervalSelect.cjs +203 -0
  125. package/dist/components/interval-select/IntervalSelect.js +201 -0
  126. package/dist/components/json-viewer/HighlightedText.cjs +13 -0
  127. package/dist/components/json-viewer/HighlightedText.js +11 -0
  128. package/dist/components/json-viewer/JsonNode.cjs +124 -0
  129. package/dist/components/json-viewer/JsonNode.js +118 -0
  130. package/dist/components/json-viewer/JsonViewer.cjs +164 -0
  131. package/dist/components/json-viewer/JsonViewer.js +158 -0
  132. package/dist/components/json-viewer/JsonViewer.module.css +346 -0
  133. package/dist/components/json-viewer/types.cjs +2 -0
  134. package/dist/components/json-viewer/types.js +1 -0
  135. package/dist/components/json-viewer/useClipboardStatus.cjs +15 -0
  136. package/dist/components/json-viewer/useClipboardStatus.js +13 -0
  137. package/dist/components/json-viewer/utils.cjs +126 -0
  138. package/dist/components/json-viewer/utils.js +111 -0
  139. package/dist/components/media-card/MediaCard.cjs +60 -0
  140. package/dist/components/media-card/MediaCard.d.ts +19 -0
  141. package/dist/components/media-card/MediaCard.js +54 -0
  142. package/dist/components/media-card/MediaCard.module.css +92 -0
  143. package/dist/components/menu/Menu.cjs +287 -0
  144. package/dist/components/menu/Menu.js +262 -0
  145. package/dist/components/menu/Menu.module.css +220 -0
  146. package/dist/components/meta-bar/MetaBar.cjs +28 -0
  147. package/dist/components/meta-bar/MetaBar.js +22 -0
  148. package/dist/components/meta-bar/MetaBar.module.css +27 -0
  149. package/dist/components/nav-bar/NavBar.cjs +104 -0
  150. package/dist/components/nav-bar/NavBar.d.ts +4 -3
  151. package/dist/components/nav-bar/NavBar.js +98 -0
  152. package/dist/components/nav-bar/NavBar.module.css +225 -0
  153. package/dist/components/overlay/fade-overlay/FadeOverlay.cjs +30 -0
  154. package/dist/components/overlay/fade-overlay/FadeOverlay.js +24 -0
  155. package/dist/components/overlay/fade-overlay/FadeOverlay.module.css +54 -0
  156. package/dist/components/overlay/modal/Modal.cjs +189 -0
  157. package/dist/components/overlay/modal/Modal.d.ts +2 -1
  158. package/dist/components/overlay/modal/Modal.js +183 -0
  159. package/dist/components/overlay/modal/Modal.module.css +112 -0
  160. package/dist/components/overlay/modal/provider/ModalProvider.cjs +98 -0
  161. package/dist/components/overlay/modal/provider/ModalProvider.js +95 -0
  162. package/dist/components/overlay/side-panel/SidePanel.cjs +173 -0
  163. package/dist/components/overlay/side-panel/SidePanel.js +167 -0
  164. package/dist/components/overlay/side-panel/SidePanel.module.css +177 -0
  165. package/dist/components/overlay/side-panel/useSidePanel.cjs +16 -0
  166. package/dist/components/overlay/side-panel/useSidePanel.js +14 -0
  167. package/dist/components/overlay/tooltip/Tooltip.cjs +34 -0
  168. package/dist/components/overlay/tooltip/Tooltip.js +32 -0
  169. package/dist/components/overlay/tooltip/Tooltip.module.css +104 -0
  170. package/dist/components/overlay/tooltip/TooltipProvider.cjs +238 -0
  171. package/dist/components/overlay/tooltip/TooltipProvider.js +231 -0
  172. package/dist/components/overlay/tooltip/useTooltipTrigger.cjs +117 -0
  173. package/dist/components/overlay/tooltip/useTooltipTrigger.js +115 -0
  174. package/dist/components/page/Page.cjs +63 -0
  175. package/dist/components/page/Page.js +57 -0
  176. package/dist/components/page/Page.module.css +95 -0
  177. package/dist/components/page-layout/PageLayout.cjs +97 -0
  178. package/dist/components/page-layout/PageLayout.d.ts +0 -5
  179. package/dist/components/page-layout/PageLayout.js +91 -0
  180. package/dist/components/page-layout/PageLayout.module.css +236 -0
  181. package/dist/components/page-layout/components/footer/Footer.cjs +53 -0
  182. package/dist/components/page-layout/components/footer/Footer.js +47 -0
  183. package/dist/components/page-layout/components/footer/Footer.module.css +89 -0
  184. package/dist/components/pagination/Pagination.cjs +160 -0
  185. package/dist/components/pagination/Pagination.js +154 -0
  186. package/dist/components/pagination/Pagination.module.css +25 -0
  187. package/dist/components/panel/Panel.cjs +38 -0
  188. package/dist/components/panel/Panel.js +32 -0
  189. package/dist/components/panel/Panel.module.css +30 -0
  190. package/dist/components/popover/Popover.cjs +331 -0
  191. package/dist/components/popover/Popover.js +307 -0
  192. package/dist/components/popover/Popover.module.css +52 -0
  193. package/dist/components/search-box/SearchBox.cjs +274 -0
  194. package/dist/components/search-box/SearchBox.js +268 -0
  195. package/dist/components/search-box/SearchBox.module.css +27 -0
  196. package/dist/components/segmented-progress-bar/SegmentedProgressBar.cjs +127 -0
  197. package/dist/components/segmented-progress-bar/SegmentedProgressBar.js +121 -0
  198. package/dist/components/segmented-progress-bar/SegmentedProgressBar.module.css +174 -0
  199. package/dist/components/sidebar/Sidebar.cjs +39 -0
  200. package/dist/components/sidebar/Sidebar.js +37 -0
  201. package/dist/components/sidebar/components/SidebarItem.cjs +29 -0
  202. package/dist/components/sidebar/components/SidebarItem.js +27 -0
  203. package/dist/components/sidebar/components/SidebarItem.module.css +0 -0
  204. package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.cjs +133 -0
  205. package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.js +127 -0
  206. package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.module.css +29 -0
  207. package/dist/components/sidebar/components/sidebar-container/SidebarContainer.cjs +214 -0
  208. package/dist/components/sidebar/components/sidebar-container/SidebarContainer.js +207 -0
  209. package/dist/components/sidebar/components/sidebar-container/SidebarContainer.module.css +260 -0
  210. package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.cjs +54 -0
  211. package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.js +47 -0
  212. package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.module.css +106 -0
  213. package/dist/components/sidebar/components/sidebar-items/SidebarItems.cjs +61 -0
  214. package/dist/components/sidebar/components/sidebar-items/SidebarItems.js +55 -0
  215. package/dist/components/sidebar/components/sidebar-items/SidebarItems.module.css +20 -0
  216. package/dist/components/sidebar/components/sidenav-filteirng/SidenavFiltering.cjs +97 -0
  217. package/dist/components/sidebar/components/sidenav-filteirng/SidenavFiltering.js +91 -0
  218. package/dist/components/sidebar/providers/SidebarProvider.cjs +223 -0
  219. package/dist/components/sidebar/providers/SidebarProvider.js +220 -0
  220. package/dist/components/skeleton-loader/SkeletonLoader.cjs +442 -0
  221. package/dist/components/skeleton-loader/SkeletonLoader.js +440 -0
  222. package/dist/components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem.cjs +42 -0
  223. package/dist/components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem.js +36 -0
  224. package/dist/components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem.module.css +51 -0
  225. package/dist/components/split-button/SplitButton.cjs +46 -0
  226. package/dist/components/split-button/SplitButton.js +40 -0
  227. package/dist/components/split-button/SplitButton.module.css +32 -0
  228. package/dist/components/split-pane/SplitPane.cjs +188 -0
  229. package/dist/components/split-pane/SplitPane.d.ts +2 -1
  230. package/dist/components/split-pane/SplitPane.js +179 -0
  231. package/dist/components/split-pane/SplitPane.module.css +118 -0
  232. package/dist/components/split-pane/provider/SplitPaneContext.cjs +129 -0
  233. package/dist/components/split-pane/provider/SplitPaneContext.js +121 -0
  234. package/dist/components/stack/Stack.cjs +47 -0
  235. package/dist/components/stack/Stack.d.ts +1 -1
  236. package/dist/components/stack/Stack.js +41 -0
  237. package/dist/components/stack/Stack.module.css +61 -0
  238. package/dist/components/state-page/StatePage.cjs +48 -0
  239. package/dist/components/state-page/StatePage.js +42 -0
  240. package/dist/components/state-page/StatePage.module.css +9 -0
  241. package/dist/components/state-page/empty.cjs +664 -0
  242. package/dist/components/state-page/empty.js +662 -0
  243. package/dist/components/state-page/error.cjs +310 -0
  244. package/dist/components/state-page/error.js +308 -0
  245. package/dist/components/state-page/notFound.cjs +243 -0
  246. package/dist/components/state-page/notFound.js +241 -0
  247. package/dist/components/sticky-footer-layout/StickyFooterLayout.cjs +98 -0
  248. package/dist/components/sticky-footer-layout/StickyFooterLayout.js +96 -0
  249. package/dist/components/table/Table.cjs +216 -0
  250. package/dist/components/table/Table.js +210 -0
  251. package/dist/components/table/Table.module.css +534 -0
  252. package/dist/components/table/Table.types.cjs +2 -0
  253. package/dist/components/table/Table.types.js +1 -0
  254. package/dist/components/table/TanstackTable.cjs +172 -0
  255. package/dist/components/table/TanstackTable.js +147 -0
  256. package/dist/components/table/components/TableBody.cjs +50 -0
  257. package/dist/components/table/components/TableBody.js +44 -0
  258. package/dist/components/table/components/TableHeader.cjs +56 -0
  259. package/dist/components/table/components/TableHeader.js +50 -0
  260. package/dist/components/table/components/TableHeaderCell.cjs +69 -0
  261. package/dist/components/table/components/TableHeaderCell.js +63 -0
  262. package/dist/components/table/components/TableLoadingBody.cjs +35 -0
  263. package/dist/components/table/components/TableLoadingBody.js +29 -0
  264. package/dist/components/table/components/TablePagination.cjs +2 -0
  265. package/dist/components/table/components/TablePagination.js +1 -0
  266. package/dist/components/table/components/TableRow.cjs +151 -0
  267. package/dist/components/table/components/TableRow.js +145 -0
  268. package/dist/components/table/components/TableSelectionCell.cjs +41 -0
  269. package/dist/components/table/components/TableSelectionCell.js +35 -0
  270. package/dist/components/table/components/column-resizer/ColumnResizer.cjs +25 -0
  271. package/dist/components/table/components/column-resizer/ColumnResizer.js +19 -0
  272. package/dist/components/table/components/column-resizer/ColumnResizer.module.css +22 -0
  273. package/dist/components/table/components/empty-state/EmptyState.cjs +33 -0
  274. package/dist/components/table/components/empty-state/EmptyState.js +31 -0
  275. package/dist/components/table/components/empty-state/EmptyState.module.css +4 -0
  276. package/dist/components/table/components/table-settings/TableSettings.cjs +139 -0
  277. package/dist/components/table/components/table-settings/TableSettings.js +137 -0
  278. package/dist/components/table/hooks/useTableRowInteractions.cjs +46 -0
  279. package/dist/components/table/hooks/useTableRowInteractions.js +44 -0
  280. package/dist/components/table/table.classes.cjs +49 -0
  281. package/dist/components/table/table.classes.js +40 -0
  282. package/dist/components/table/table.utils.cjs +57 -0
  283. package/dist/components/table/table.utils.js +45 -0
  284. package/dist/components/table/tanstackTable.utils.cjs +166 -0
  285. package/dist/components/table/tanstackTable.utils.js +159 -0
  286. package/dist/components/tabs/Tabs.cjs +172 -0
  287. package/dist/components/tabs/Tabs.js +166 -0
  288. package/dist/components/tabs/Tabs.module.css +261 -0
  289. package/dist/components/theme-button/ThemeButton.cjs +78 -0
  290. package/dist/components/theme-button/ThemeButton.js +75 -0
  291. package/dist/components/toast/Toast.cjs +68 -0
  292. package/dist/components/toast/Toast.js +62 -0
  293. package/dist/components/toast/Toast.module.css +161 -0
  294. package/dist/components/toast/provider/ToastProvider.cjs +105 -0
  295. package/dist/components/toast/provider/ToastProvider.js +97 -0
  296. package/dist/components/user-display/UserDisplay.cjs +22 -0
  297. package/dist/components/user-display/UserDisplay.js +16 -0
  298. package/dist/components/user-display/UserDisplay.module.css +25 -0
  299. package/dist/constants/chart-colors.cjs +10 -0
  300. package/dist/constants/chart-colors.js +8 -0
  301. package/dist/constants/chart-colors.types.cjs +2 -0
  302. package/dist/constants/chart-colors.types.js +1 -0
  303. package/dist/constants/severity.cjs +30 -0
  304. package/dist/constants/severity.js +26 -0
  305. package/dist/constants/severity.types.cjs +2 -0
  306. package/dist/constants/severity.types.js +1 -0
  307. package/dist/constants/sizes.cjs +11 -0
  308. package/dist/constants/sizes.js +9 -0
  309. package/dist/hooks/useDeviceSize.cjs +35 -0
  310. package/dist/hooks/useDeviceSize.js +33 -0
  311. package/dist/hooks/useListNavigation.cjs +237 -0
  312. package/dist/hooks/useListNavigation.js +235 -0
  313. package/dist/hooks/usePagination.cjs +144 -0
  314. package/dist/hooks/usePagination.js +142 -0
  315. package/dist/hooks/useSorting.cjs +119 -0
  316. package/dist/hooks/useSorting.js +117 -0
  317. package/dist/hooks/useTableData.cjs +53 -0
  318. package/dist/hooks/useTableData.js +51 -0
  319. package/dist/hooks/useTableSelection.cjs +172 -0
  320. package/dist/hooks/useTableSelection.js +170 -0
  321. package/dist/hooks/useTableSettings.cjs +90 -0
  322. package/dist/hooks/useTableSettings.js +87 -0
  323. package/dist/hooks/useTheme.cjs +64 -0
  324. package/dist/hooks/useTheme.js +62 -0
  325. package/dist/hooks/useTimeDuration.cjs +72 -0
  326. package/dist/hooks/useTimeDuration.js +70 -0
  327. package/dist/hooks/useViewportFill.cjs +82 -0
  328. package/dist/hooks/useViewportFill.js +80 -0
  329. package/dist/index.cjs +161 -12908
  330. package/dist/index.css +67 -7357
  331. package/dist/index.d.ts +0 -58
  332. package/dist/index.js +24 -12809
  333. package/dist/styles/animation.cjs +9 -0
  334. package/dist/styles/animation.js +7 -0
  335. package/dist/styles/themes/dbc/colors.css +5 -0
  336. package/dist/styles/themes/types.cjs +2 -0
  337. package/dist/styles/themes/types.js +1 -0
  338. package/dist/tanstack.cjs +18 -2717
  339. package/dist/tanstack.js +3 -2701
  340. package/dist/types/a11y-props.types.cjs +2 -0
  341. package/dist/types/a11y-props.types.js +1 -0
  342. package/dist/types/assets.d.cjs +2 -0
  343. package/dist/types/assets.d.js +1 -0
  344. package/dist/types/css.d.cjs +2 -0
  345. package/dist/types/css.d.js +1 -0
  346. package/dist/types/sizes.types.cjs +2 -0
  347. package/dist/types/sizes.types.js +1 -0
  348. package/dist/utils/arrays/nested-filtering.cjs +40 -0
  349. package/dist/utils/arrays/nested-filtering.js +38 -0
  350. package/dist/utils/date/formatDate.cjs +35 -0
  351. package/dist/utils/date/formatDate.js +33 -0
  352. package/dist/utils/localStorage.utils.cjs +53 -0
  353. package/dist/utils/localStorage.utils.js +49 -0
  354. package/dist/utils/text/get-highlighted-segments.cjs +49 -0
  355. package/dist/utils/text/get-highlighted-segments.js +47 -0
  356. package/package.json +8 -3
  357. package/dist/tanstack.css +0 -1385
package/dist/tanstack.cjs CHANGED
@@ -1,2725 +1,26 @@
1
1
  'use strict';
2
2
 
3
- var reactTable = require('@tanstack/react-table');
4
- var React8 = require('react');
5
- var jsxRuntime = require('react/jsx-runtime');
6
- var lucideReact = require('lucide-react');
7
- var reactDom = require('react-dom');
3
+ var TanstackTable = require('./components/table/TanstackTable');
4
+ var TableSettings = require('./components/table/components/table-settings/TableSettings');
5
+ var useTableSettings = require('./hooks/useTableSettings');
8
6
 
9
- function _interopNamespace(e) {
10
- if (e && e.__esModule) return e;
11
- var n = Object.create(null);
12
- if (e) {
13
- Object.keys(e).forEach(function (k) {
14
- if (k !== 'default') {
15
- var d = Object.getOwnPropertyDescriptor(e, k);
16
- Object.defineProperty(n, k, d.get ? d : {
17
- enumerable: true,
18
- get: function () { return e[k]; }
19
- });
20
- }
21
- });
22
- }
23
- n.default = e;
24
- return Object.freeze(n);
25
- }
26
7
 
27
- var React8__namespace = /*#__PURE__*/_interopNamespace(React8);
28
8
 
29
- // src/components/table/components/column-resizer/ColumnResizer.module.css
30
- var ColumnResizer_default = {
31
- resizer: "ColumnResizer_resizer"
32
- };
33
- var ColumnResizer = ({ id, handler }) => /* @__PURE__ */ jsxRuntime.jsx(
34
- "span",
35
- {
36
- className: ColumnResizer_default.resizer,
37
- "data-resizer": "true",
38
- onMouseDown: handler,
39
- onTouchStart: handler,
40
- role: "separator",
41
- "aria-orientation": "vertical",
42
- "aria-label": `Resize ${id}`
43
- }
44
- );
45
- var ColumnResizer_default2 = ColumnResizer;
46
-
47
- // src/components/pagination/Pagination.module.css
48
- var Pagination_default = {
49
- container: "Pagination_container2",
50
- range: "Pagination_range2"
51
- };
52
- var TooltipContext = React8.createContext(null);
53
-
54
- // src/components/overlay/tooltip/useTooltipTrigger.tsx
55
- function useTooltipTrigger(options) {
56
- const ctx = React8.useContext(TooltipContext);
57
- if (!ctx) throw new Error("useTooltipTrigger must be used within <TooltipProvider>.");
58
- const {
59
- content,
60
- placement = "top",
61
- offset = 8,
62
- open,
63
- defaultOpen = false,
64
- delayOpenMs = 150,
65
- delayCloseMs = 50,
66
- focusOpenMode = "focus-visible",
67
- closeOnPointerDown = true
68
- } = options;
69
- const id = React8.useId();
70
- const triggerElRef = React8.useRef(null);
71
- const isControlled = open !== void 0;
72
- const [uncontrolledOpen, setUncontrolledOpen] = React8.useState(defaultOpen);
73
- const isOpen = isControlled ? !!open : uncontrolledOpen;
74
- const openTimer = React8.useRef(null);
75
- const closeTimer = React8.useRef(null);
76
- const clearTimers = () => {
77
- if (openTimer.current) window.clearTimeout(openTimer.current);
78
- if (closeTimer.current) window.clearTimeout(closeTimer.current);
79
- openTimer.current = null;
80
- closeTimer.current = null;
81
- };
82
- const lastSentRef = React8.useRef(null);
83
- const show = React8.useCallback(() => {
84
- if (!content) return;
85
- ctx.show({
86
- id,
87
- content,
88
- placement,
89
- offset,
90
- triggerEl: triggerElRef.current
91
- });
92
- lastSentRef.current = { content, placement, offset };
93
- }, [ctx, id, content, placement, offset]);
94
- const hide = React8.useCallback(() => {
95
- ctx.hide(id);
96
- }, [ctx, id]);
97
- React8.useEffect(() => {
98
- if (!isOpen) {
99
- hide();
100
- return;
101
- }
102
- show();
103
- }, [isOpen, show, hide]);
104
- React8.useEffect(() => {
105
- var _a;
106
- if (!isOpen) return;
107
- if (((_a = ctx.active) == null ? void 0 : _a.id) !== id) return;
108
- const last = lastSentRef.current;
109
- const changed = !last || last.content !== content || last.placement !== placement || last.offset !== offset;
110
- if (!changed) return;
111
- ctx.update(id, {
112
- content,
113
- placement,
114
- offset,
115
- triggerEl: triggerElRef.current
116
- });
117
- lastSentRef.current = { content, placement, offset };
118
- }, [ctx, id, isOpen, content, placement, offset]);
119
- const setOpen = (next) => {
120
- if (isControlled) return;
121
- setUncontrolledOpen(next);
122
- };
123
- const onPointerEnter = () => {
124
- clearTimers();
125
- if (isControlled) return;
126
- openTimer.current = window.setTimeout(() => setOpen(true), delayOpenMs);
127
- };
128
- const onPointerLeave = () => {
129
- clearTimers();
130
- if (isControlled) return;
131
- closeTimer.current = window.setTimeout(() => setOpen(false), delayCloseMs);
132
- };
133
- const onPointerDown = () => {
134
- clearTimers();
135
- if (!isControlled && closeOnPointerDown) setOpen(false);
136
- };
137
- const onFocus = (e) => {
138
- clearTimers();
139
- if (focusOpenMode === "off") return;
140
- const shouldOpen = focusOpenMode === "any" || e.currentTarget.matches(":focus-visible");
141
- if (!isControlled && shouldOpen) {
142
- openTimer.current = window.setTimeout(() => setOpen(true), delayOpenMs);
143
- }
144
- };
145
- const onBlur = () => {
146
- clearTimers();
147
- if (!isControlled) setOpen(false);
148
- };
149
- return {
150
- id,
151
- isOpen,
152
- triggerProps: {
153
- ref: (node) => {
154
- triggerElRef.current = node;
155
- },
156
- onPointerEnter,
157
- onPointerLeave,
158
- onPointerDown,
159
- onFocus,
160
- onBlur,
161
- "aria-describedby": content ? id : void 0
162
- }
163
- };
164
- }
165
-
166
- // src/components/button/Button.module.css
167
- var Button_default = {
168
- button: "Button_button2",
169
- buttonLink: "Button_buttonLink2",
170
- round: "Button_round2",
171
- rounded: "Button_rounded2",
172
- link: "Button_link2",
173
- icon: "Button_icon2",
174
- sm: "Button_sm2",
175
- lg: "Button_lg2",
176
- fullWidth: "Button_fullWidth2",
177
- primary: "Button_primary2",
178
- secondary: "Button_secondary2",
179
- default: "Button_default2",
180
- outlined: "Button_outlined2",
181
- active: "Button_active2",
182
- success: "Button_success2",
183
- danger: "Button_danger2",
184
- inline: "Button_inline2",
185
- xs: "Button_xs2"
186
- };
187
- function cx(...parts) {
188
- return parts.filter(Boolean).join(" ");
189
- }
190
- function mergeRefs(...refs) {
191
- return (node) => {
192
- for (const ref of refs) {
193
- if (!ref) continue;
194
- if (typeof ref === "function") ref(node);
195
- else ref.current = node;
196
- }
197
- };
198
- }
199
- var Button = React8__namespace.forwardRef(function Button2({
200
- variant = "outlined",
201
- shape = "default",
202
- size = "md",
203
- fullWidth,
204
- icon,
205
- children,
206
- loading,
207
- active,
208
- spinIcon,
209
- tooltip,
210
- tooltipPlacement = "top",
211
- isLink,
212
- type = "button",
213
- ...rest
214
- }, ref) {
215
- var _a;
216
- const { className: userClassName, ...buttonProps } = rest;
217
- const computedClassName = cx(
218
- Button_default.button,
219
- Button_default[variant],
220
- Button_default[size],
221
- fullWidth ? Button_default.fullWidth : "",
222
- active ? Button_default.active : "",
223
- loading ? Button_default.loading : "",
224
- shape !== "default" ? Button_default[shape] : "",
225
- userClassName
226
- );
227
- const tooltipEnabled = Boolean(tooltip);
228
- const childRef = isLink && React8__namespace.isValidElement(children) ? (_a = children.ref) != null ? _a : null : null;
229
- const mergedRef = React8__namespace.useMemo(() => mergeRefs(childRef, ref), [childRef, ref]);
230
- const { triggerProps, id: tooltipId } = useTooltipTrigger({
231
- content: tooltipEnabled ? tooltip : null,
232
- placement: tooltipPlacement,
233
- offset: 8
234
- });
235
- const describedBy = (() => {
236
- const existing = typeof buttonProps["aria-describedby"] === "string" ? buttonProps["aria-describedby"] : "";
237
- const ids = [existing, tooltipEnabled ? tooltipId : ""].filter(Boolean);
238
- return ids.length ? ids.join(" ") : void 0;
239
- })();
240
- const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
241
- icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx(Button_default.icon, spinIcon ? "spin" : ""), children: icon }),
242
- children,
243
- loading && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "flex", opacity: 0.5 }, className: "spin", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderCircle, {}) })
244
- ] });
245
- let buttonEl;
246
- if (isLink && React8__namespace.isValidElement(children)) {
247
- const childClassName = typeof children.props.className === "string" ? children.props.className : "";
248
- const { disabled, onClick, ...linkButtonProps } = buttonProps;
249
- const handleClick = (e) => {
250
- if (disabled) {
251
- e.preventDefault();
252
- return;
253
- }
254
- onClick == null ? void 0 : onClick(e);
255
- };
256
- buttonEl = React8__namespace.cloneElement(children, {
257
- ...linkButtonProps,
258
- ref: mergedRef,
259
- className: cx(childClassName, computedClassName, Button_default.buttonLink),
260
- ...tooltipEnabled ? triggerProps : {},
261
- "aria-describedby": describedBy,
262
- "aria-disabled": disabled ? "true" : void 0,
263
- onClick: handleClick,
264
- children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
265
- icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx(Button_default.icon, spinIcon ? "spin" : ""), children: icon }),
266
- children.props.children,
267
- loading && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "flex", opacity: 0.5 }, className: "spin", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderCircle, {}) })
268
- ] })
269
- });
270
- } else {
271
- const isDisabled = Boolean(buttonProps.disabled);
272
- buttonEl = /* @__PURE__ */ jsxRuntime.jsx(
273
- "button",
274
- {
275
- className: computedClassName,
276
- type,
277
- ...buttonProps,
278
- ...tooltipEnabled && !isDisabled ? triggerProps : {},
279
- "aria-describedby": describedBy,
280
- children: content
281
- }
282
- );
283
- if (tooltipEnabled && isDisabled) {
284
- buttonEl = /* @__PURE__ */ jsxRuntime.jsx(
285
- "span",
286
- {
287
- ref: triggerProps.ref,
288
- onPointerEnter: triggerProps.onPointerEnter,
289
- onPointerLeave: triggerProps.onPointerLeave,
290
- style: {
291
- display: fullWidth ? "flex" : "inline-flex",
292
- cursor: "not-allowed"
293
- },
294
- children: buttonEl
295
- }
296
- );
297
- }
298
- }
299
- return buttonEl;
9
+ Object.keys(TanstackTable).forEach(function (k) {
10
+ if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
11
+ enumerable: true,
12
+ get: function () { return TanstackTable[k]; }
13
+ });
300
14
  });
301
- Button.displayName = "Button";
302
-
303
- // src/components/menu/Menu.module.css
304
- var Menu_default = {
305
- container: "Menu_container2",
306
- row: "Menu_row2",
307
- interactive: "Menu_interactive2",
308
- interactiveChild: "Menu_interactiveChild2",
309
- selected: "Menu_selected2",
310
- active: "Menu_active2",
311
- itemDanger: "Menu_itemDanger2",
312
- separator: "Menu_separator2",
313
- header: "Menu_header2",
314
- gap: "Menu_gap2",
315
- rowBordered: "Menu_rowBordered2"
316
- };
317
-
318
- // src/components/forms/checkbox/Checkbox.module.css
319
- var Checkbox_default = {
320
- container: "Checkbox_container2",
321
- containerSm: "Checkbox_containerSm2",
322
- checkbox: "Checkbox_checkbox2",
323
- sm: "Checkbox_sm2",
324
- label: "Checkbox_label2",
325
- checked: "Checkbox_checked2",
326
- icon: "Checkbox_icon2",
327
- default: "Checkbox_default2",
328
- outlined: "Checkbox_outlined2",
329
- success: "Checkbox_success2",
330
- info: "Checkbox_info2"
331
- };
332
-
333
- // src/components/forms/input-container/InputContainer.module.css
334
- var InputContainer_default = {
335
- horizontal: "InputContainer_horizontal2",
336
- labelContainer: "InputContainer_labelContainer2",
337
- label: "InputContainer_label2",
338
- errorText: "InputContainer_errorText2",
339
- helpText: "InputContainer_helpText2",
340
- helpTextAddition: "InputContainer_helpTextAddition2",
341
- required: "InputContainer_required2",
342
- messageRow: "InputContainer_messageRow2",
343
- inputContainer: "InputContainer_inputContainer2"
344
- };
345
-
346
- // src/components/inline-status/InlineStatus.module.css
347
- var InlineStatus_default = {
348
- container: "InlineStatus_container2",
349
- fullWidth: "InlineStatus_fullWidth2",
350
- leading: "InlineStatus_leading2",
351
- body: "InlineStatus_body2",
352
- sm: "InlineStatus_sm2",
353
- md: "InlineStatus_md2",
354
- neutral: "InlineStatus_neutral2",
355
- success: "InlineStatus_success2",
356
- warning: "InlineStatus_warning2",
357
- error: "InlineStatus_error2",
358
- info: "InlineStatus_info2",
359
- brand: "InlineStatus_brand2"
360
- };
361
-
362
- // src/components/icon/Icon.module.css
363
- var Icon_default = {
364
- container: "Icon_container2",
365
- icon: "Icon_icon2",
366
- success: "Icon_success2",
367
- error: "Icon_error2",
368
- warning: "Icon_warning2",
369
- info: "Icon_info2",
370
- brand: "Icon_brand2"
371
- };
372
- var SeverityIcon = {
373
- neutral: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, {}),
374
- success: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, {}),
375
- error: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleX, {}),
376
- info: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, {}),
377
- warning: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleAlert, {}),
378
- brand: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Building2, {})
379
- };
380
- function Icon({ severity, label, customIcon }) {
381
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${Icon_default.container}`, children: [
382
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${Icon_default.icon} ${severity ? Icon_default[severity] : ""} dbc-icon`, children: customIcon ? customIcon : severity ? SeverityIcon[severity] : null }),
383
- label && /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
384
- ] });
385
- }
386
- function InlineStatus({
387
- children,
388
- severity = "neutral",
389
- customIcon,
390
- disableIcon = false,
391
- fullWidth = false,
392
- size = "sm"
393
- }) {
394
- const hasLeading = Boolean(customIcon) || !disableIcon;
395
- return /* @__PURE__ */ jsxRuntime.jsxs(
396
- "div",
397
- {
398
- className: [
399
- InlineStatus_default.container,
400
- InlineStatus_default[severity],
401
- InlineStatus_default[size],
402
- fullWidth ? InlineStatus_default.fullWidth : "",
403
- hasLeading ? InlineStatus_default.hasLeading : ""
404
- ].filter(Boolean).join(" "),
405
- children: [
406
- hasLeading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: InlineStatus_default.leading, children: customIcon != null ? customIcon : /* @__PURE__ */ jsxRuntime.jsx(Icon, { severity }) }) : null,
407
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: InlineStatus_default.body, children })
408
- ]
409
- }
410
- );
411
- }
412
- function InputContainer({
413
- label,
414
- labelAction,
415
- htmlFor,
416
- error,
417
- helpText,
418
- helpTextAddition,
419
- fullWidth = false,
420
- required = false,
421
- children,
422
- orientation = "horizontal",
423
- size = "md",
424
- labelWidth = "160px",
425
- modified = false
426
- }) {
427
- const renderLabelRow = (label || labelAction) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${InputContainer_default.labelRow} dbc-flex dbc-items-center dbc-gap-md`, children: [
428
- label && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: InputContainer_default.label, htmlFor, children: [
429
- label,
430
- required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: InputContainer_default.required, children: " *" })
431
- ] }),
432
- labelAction && /* @__PURE__ */ jsxRuntime.jsx("div", { className: InputContainer_default.labelAction, children: labelAction })
433
- ] });
434
- const renderMessageRow = (error || helpText || helpTextAddition) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${error ? InputContainer_default.errorText : InputContainer_default.helpText} ${InputContainer_default.messageRow}`, children: error ? /* @__PURE__ */ jsxRuntime.jsx(InlineStatus, { severity: "error", disableIcon: true, children: error }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
435
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: helpText }),
436
- helpTextAddition && /* @__PURE__ */ jsxRuntime.jsx("span", { className: InputContainer_default.helpTextAddition, children: helpTextAddition })
437
- ] }) });
438
- if (orientation === "vertical") {
439
- return /* @__PURE__ */ jsxRuntime.jsxs(
440
- "div",
441
- {
442
- "data-modified": modified ? "true" : void 0,
443
- className: `dbc-flex dbc-flex-column dbc-gap-xs ${InputContainer_default.inputContainer}`,
444
- style: { width: fullWidth ? "100%" : void 0 },
445
- children: [
446
- renderLabelRow,
447
- children,
448
- renderMessageRow
449
- ]
450
- }
451
- );
452
- }
453
- return /* @__PURE__ */ jsxRuntime.jsx(
454
- "div",
455
- {
456
- "data-modified": modified ? "true" : void 0,
457
- className: InputContainer_default.inputContainer,
458
- style: {
459
- "--label-width": labelWidth,
460
- width: fullWidth ? "100%" : void 0
461
- },
462
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${InputContainer_default.horizontal} dbc-flex dbc-flex-column dbc-gap-xs`, "data-size": size, children: [
463
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${InputContainer_default.labelContainer} dbc-flex dbc-items-center dbc-gap-xs`, children: [
464
- renderLabelRow,
465
- children
466
- ] }),
467
- renderMessageRow
468
- ] })
469
- }
470
- );
471
- }
472
- function Checkbox({
473
- checked: controlled,
474
- onChange,
475
- variant = "default",
476
- disabled,
477
- label,
478
- labelAs = "label",
479
- size = "md",
480
- modified,
481
- containerLabel,
482
- error,
483
- helpText,
484
- orientation = "horizontal",
485
- labelWidth = "160px",
486
- fullWidth = false,
487
- required = false,
488
- noContainer = false,
489
- id,
490
- "data-cy": dataCy
491
- }) {
492
- const [internal, setInternal] = React8.useState(false);
493
- const isChecked = controlled != null ? controlled : internal;
494
- const generatedId = React8.useId();
495
- const controlId = id != null ? id : `checkbox-${generatedId}`;
496
- const toggle = (e) => {
497
- if (disabled) return;
498
- const value = !isChecked;
499
- setInternal(value);
500
- onChange == null ? void 0 : onChange(value, e);
501
- };
502
- const content = /* @__PURE__ */ jsxRuntime.jsxs(
503
- "span",
504
- {
505
- className: [Checkbox_default.container, size === "sm" ? Checkbox_default.containerSm : ""].filter(Boolean).join(" "),
506
- "data-cy": dataCy,
507
- children: [
508
- /* @__PURE__ */ jsxRuntime.jsx(
509
- "button",
510
- {
511
- id: controlId,
512
- disabled,
513
- type: "button",
514
- role: "checkbox",
515
- "aria-checked": isChecked,
516
- "aria-disabled": disabled || void 0,
517
- "aria-invalid": Boolean(error) || void 0,
518
- onClick: toggle,
519
- className: [Checkbox_default.checkbox, isChecked ? Checkbox_default.checked : "", Checkbox_default[variant], Checkbox_default[size]].filter(Boolean).join(" "),
520
- children: isChecked && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: Checkbox_default.icon })
521
- }
522
- ),
523
- label && (labelAs === "label" ? /* @__PURE__ */ jsxRuntime.jsx("label", { className: Checkbox_default.label, htmlFor: controlId, children: label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: Checkbox_default.label, children: label }))
524
- ]
525
- }
526
- );
527
- if (noContainer) return content;
528
- return /* @__PURE__ */ jsxRuntime.jsx(
529
- InputContainer,
530
- {
531
- modified,
532
- label: containerLabel,
533
- htmlFor: controlId,
534
- error,
535
- helpText,
536
- orientation,
537
- size,
538
- labelWidth,
539
- fullWidth,
540
- required,
541
- children: content
542
- }
543
- );
544
- }
545
-
546
- // src/components/forms/radio-buttons/RadioButtons.module.css
547
- var RadioButtons_default = {
548
- container: "RadioButtons_container2",
549
- controlWrap: "RadioButtons_controlWrap2",
550
- input: "RadioButtons_input2",
551
- radio: "RadioButtons_radio2",
552
- dot: "RadioButtons_dot2",
553
- checked: "RadioButtons_checked2",
554
- disabled: "RadioButtons_disabled2",
555
- label: "RadioButtons_label2",
556
- primary: "RadioButtons_primary2",
557
- default: "RadioButtons_default2",
558
- sm: "RadioButtons_sm2",
559
- md: "RadioButtons_md2",
560
- lg: "RadioButtons_lg2"
561
- };
562
- function RadioButton({
563
- name,
564
- value,
565
- selectedValue,
566
- checked,
567
- onChange,
568
- disabled,
569
- label,
570
- variant = "outlined",
571
- size = "md",
572
- containerLabel,
573
- error,
574
- helpText,
575
- orientation = "horizontal",
576
- labelWidth = "160px",
577
- fullWidth = false,
578
- required = false,
579
- noContainer = false,
580
- id,
581
- "data-cy": dataCy
582
- }) {
583
- const generatedId = React8.useId();
584
- const controlId = id != null ? id : `radio-${generatedId}`;
585
- const isChecked = selectedValue !== void 0 ? selectedValue === value : Boolean(checked);
586
- const content = /* @__PURE__ */ jsxRuntime.jsxs("span", { className: RadioButtons_default.container, "data-cy": dataCy, children: [
587
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: RadioButtons_default.controlWrap, children: [
588
- /* @__PURE__ */ jsxRuntime.jsx(
589
- "input",
590
- {
591
- id: controlId,
592
- className: RadioButtons_default.input,
593
- type: "radio",
594
- name,
595
- value,
596
- checked: isChecked,
597
- disabled,
598
- required,
599
- "aria-invalid": Boolean(error) || void 0,
600
- onChange: (e) => {
601
- if (disabled) return;
602
- onChange == null ? void 0 : onChange(e.target.value, e);
603
- }
604
- }
605
- ),
606
- /* @__PURE__ */ jsxRuntime.jsx(
607
- "span",
608
- {
609
- className: [
610
- RadioButtons_default.radio,
611
- isChecked ? RadioButtons_default.checked : "",
612
- disabled ? RadioButtons_default.disabled : "",
613
- RadioButtons_default[variant],
614
- RadioButtons_default[size]
615
- ].filter(Boolean).join(" "),
616
- "aria-hidden": "true",
617
- children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: RadioButtons_default.dot })
618
- }
619
- )
620
- ] }),
621
- label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: RadioButtons_default.label, htmlFor: controlId, children: label })
622
- ] });
623
- if (noContainer || !containerLabel && !error) return content;
624
- return /* @__PURE__ */ jsxRuntime.jsx(
625
- InputContainer,
626
- {
627
- label: containerLabel,
628
- htmlFor: controlId,
629
- error,
630
- helpText,
631
- orientation,
632
- labelWidth,
633
- fullWidth,
634
- required,
635
- children: content
636
- }
637
- );
638
- }
639
- var INTERACTIVE_SELECTOR = 'a:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"]):not([aria-disabled="true"]), [role="menuitem"]:not([aria-disabled="true"]), [role="option"]:not([aria-disabled="true"])';
640
- function getMenuItems(el) {
641
- return Array.from(el.querySelectorAll(INTERACTIVE_SELECTOR));
642
- }
643
- var MenuBase = React8__namespace.forwardRef(
644
- ({ children, className, itemRole = "menuitem", gap, onKeyDown, ...props }, ref) => {
645
- const internalRef = React8__namespace.useRef(null);
646
- const handleKeyDown = (e) => {
647
- const ul = internalRef.current;
648
- if (!ul) return;
649
- const items = getMenuItems(ul);
650
- if (items.length === 0) return;
651
- const focused = document.activeElement;
652
- const currentIndex = items.indexOf(focused);
653
- let nextIndex = null;
654
- if (e.key === "ArrowDown") {
655
- nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
656
- } else if (e.key === "ArrowUp") {
657
- nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
658
- } else if (e.key === "Home") {
659
- nextIndex = 0;
660
- } else if (e.key === "End") {
661
- nextIndex = items.length - 1;
662
- }
663
- if (nextIndex !== null) {
664
- e.preventDefault();
665
- items[nextIndex].focus();
666
- }
667
- onKeyDown == null ? void 0 : onKeyDown(e);
668
- };
669
- return /* @__PURE__ */ jsxRuntime.jsx(
670
- "ul",
671
- {
672
- ref: (node) => {
673
- internalRef.current = node;
674
- if (typeof ref === "function") ref(node);
675
- else if (ref) ref.current = node;
676
- },
677
- role: "menu",
678
- "data-itemrole": itemRole,
679
- className: [Menu_default.container, gap ? Menu_default.gap : "", className].filter(Boolean).join(" "),
680
- onKeyDown: handleKeyDown,
681
- ...props,
682
- children
683
- }
684
- );
685
- }
686
- );
687
- MenuBase.displayName = "Menu";
688
- var isInteractiveEl = (el) => React8__namespace.isValidElement(el) && (typeof el.type === "string" ? el.type === "a" || el.type === "button" : true);
689
- function applyMenuItemPropsToElement(child, opts) {
690
- var _a, _b, _c, _d;
691
- const { active, selected, disabled, role, tabIndex = 0, className } = opts;
692
- const childClass = [Menu_default.item, active ? Menu_default.active : "", selected ? Menu_default.selected : ""].filter(Boolean).join(" ");
693
- const nextImmediate = React8__namespace.cloneElement(child, {
694
- className: [child.props.className, Menu_default.interactiveChild, className].filter(Boolean).join(" ")
695
- });
696
- if (typeof child.type === "string" && (child.type === "a" || child.type === "button")) {
697
- return React8__namespace.cloneElement(child, {
698
- role: (_a = child.props.role) != null ? _a : role,
699
- tabIndex: (_b = child.props.tabIndex) != null ? _b : tabIndex,
700
- "aria-selected": selected || void 0,
701
- "aria-disabled": disabled || void 0,
702
- className: [child.props.className, Menu_default.interactive, childClass, className].filter(Boolean).join(" "),
703
- ...child.type === "button" ? { disabled } : {}
704
- });
705
- }
706
- return React8__namespace.cloneElement(nextImmediate, {
707
- role: (_c = nextImmediate.props.role) != null ? _c : role,
708
- tabIndex: (_d = nextImmediate.props.tabIndex) != null ? _d : tabIndex,
709
- "aria-selected": selected || void 0,
710
- "aria-disabled": disabled || void 0,
711
- className: [nextImmediate.props.className, Menu_default.interactive, childClass].filter(Boolean).join(" "),
712
- disabled
713
- });
714
- }
715
- var MenuItem = React8__namespace.forwardRef(
716
- ({ children, active, selected, disabled, className, itemRole, variant, ...liProps }, ref) => {
717
- const resolvedRole = itemRole != null ? itemRole : "menuitem";
718
- const isBordered = variant === "bordered";
719
- const itemClassName = variant === "danger" ? Menu_default.itemDanger : void 0;
720
- const rowClass = [Menu_default.row, isBordered ? Menu_default.rowBordered : "", className].filter(Boolean).join(" ");
721
- if (isInteractiveEl(children)) {
722
- const child = children;
723
- return /* @__PURE__ */ jsxRuntime.jsx("li", { ref, role: "none", className: rowClass, ...liProps, children: applyMenuItemPropsToElement(child, {
724
- active,
725
- selected,
726
- disabled,
727
- role: resolvedRole,
728
- className: itemClassName
729
- }) });
730
- }
731
- return /* @__PURE__ */ jsxRuntime.jsx("li", { ref, role: "none", className: rowClass, ...liProps, children: /* @__PURE__ */ jsxRuntime.jsx(
732
- "button",
733
- {
734
- role: resolvedRole,
735
- tabIndex: 0,
736
- "aria-selected": selected || void 0,
737
- "aria-disabled": disabled || void 0,
738
- className: [
739
- Menu_default.interactive,
740
- Menu_default.item,
741
- itemClassName,
742
- active ? Menu_default.active : "",
743
- selected ? Menu_default.selected : ""
744
- ].filter(Boolean).join(" "),
745
- type: "button",
746
- disabled,
747
- children
748
- }
749
- ) });
750
- }
751
- );
752
- MenuItem.displayName = "Menu.Item";
753
- var MenuCheckItem = React8__namespace.forwardRef(
754
- ({
755
- label,
756
- checked,
757
- active,
758
- disabled,
759
- interactiveRef,
760
- interactiveProps,
761
- onCheckedChange,
762
- className,
763
- ...liProps
764
- }, ref) => {
765
- const isSelected = checked;
766
- const interactiveClass = [
767
- Menu_default.interactiveChild,
768
- Menu_default.item,
769
- active ? Menu_default.active : "",
770
- isSelected ? Menu_default.selected : ""
771
- ].filter(Boolean).join(" ");
772
- return /* @__PURE__ */ jsxRuntime.jsx(
773
- "li",
774
- {
775
- ref,
776
- role: "none",
777
- className: [Menu_default.row, className].filter(Boolean).join(" "),
778
- ...liProps,
779
- children: /* @__PURE__ */ jsxRuntime.jsx(
780
- "div",
781
- {
782
- ref: interactiveRef,
783
- role: interactiveProps == null ? void 0 : interactiveProps.role,
784
- tabIndex: -1,
785
- "aria-selected": isSelected || void 0,
786
- "aria-disabled": disabled || void 0,
787
- className: interactiveClass,
788
- ...interactiveProps,
789
- onClick: (event) => {
790
- var _a;
791
- (_a = interactiveProps == null ? void 0 : interactiveProps.onClick) == null ? void 0 : _a.call(interactiveProps, event);
792
- if (event.defaultPrevented || disabled) return;
793
- const target = event.target;
794
- if (target instanceof Element && target.closest("button") !== null) {
795
- return;
796
- }
797
- onCheckedChange == null ? void 0 : onCheckedChange(!checked);
798
- },
799
- children: /* @__PURE__ */ jsxRuntime.jsx(
800
- Checkbox,
801
- {
802
- variant: "primary",
803
- size: "sm",
804
- noContainer: true,
805
- checked,
806
- disabled,
807
- labelAs: "span",
808
- label,
809
- onChange: (next, _e) => onCheckedChange == null ? void 0 : onCheckedChange(next)
810
- }
811
- )
812
- }
813
- )
814
- }
815
- );
816
- }
817
- );
818
- MenuCheckItem.displayName = "Menu.CheckItem";
819
- var MenuRadioItem = React8__namespace.forwardRef(
820
- ({ name, value, checked, disabled, label, onValueChange, className, ...liProps }, ref) => {
821
- return /* @__PURE__ */ jsxRuntime.jsx(
822
- "li",
823
- {
824
- ref,
825
- role: "none",
826
- className: [Menu_default.row, className].filter(Boolean).join(" "),
827
- ...liProps,
828
- children: /* @__PURE__ */ jsxRuntime.jsx(
829
- "div",
830
- {
831
- className: Menu_default.interactiveChild,
832
- onClick: (event) => {
833
- var _a;
834
- if (disabled) return;
835
- const target = event.target;
836
- if ((_a = target.closest("label")) != null ? _a : target.closest("input")) return;
837
- onValueChange == null ? void 0 : onValueChange(value);
838
- },
839
- children: /* @__PURE__ */ jsxRuntime.jsx(
840
- RadioButton,
841
- {
842
- noContainer: true,
843
- name,
844
- size: "sm",
845
- value,
846
- checked,
847
- disabled,
848
- label,
849
- onChange: (v, _e) => onValueChange == null ? void 0 : onValueChange(v)
850
- }
851
- )
852
- }
853
- )
854
- }
855
- );
856
- }
857
- );
858
- MenuRadioItem.displayName = "Menu.RadioItem";
859
- var MenuSeparator = React8__namespace.forwardRef(
860
- ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
861
- "li",
862
- {
863
- ref,
864
- role: "separator",
865
- className: [Menu_default.separator, className].filter(Boolean).join(" "),
866
- ...props
867
- }
868
- )
869
- );
870
- MenuSeparator.displayName = "Menu.Separator";
871
- var MenuHeader = React8__namespace.forwardRef(
872
- ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
873
- "li",
874
- {
875
- ref,
876
- role: "presentation",
877
- "aria-hidden": "true",
878
- className: [Menu_default.header, className].filter(Boolean).join(" "),
879
- ...props,
880
- children
881
- }
882
- )
883
- );
884
- MenuHeader.displayName = "Menu.Header";
885
- var Menu = Object.assign(MenuBase, {
886
- Item: MenuItem,
887
- CheckItem: MenuCheckItem,
888
- RadioItem: MenuRadioItem,
889
- Separator: MenuSeparator,
890
- Header: MenuHeader
15
+ Object.keys(TableSettings).forEach(function (k) {
16
+ if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
17
+ enumerable: true,
18
+ get: function () { return TableSettings[k]; }
19
+ });
891
20
  });
892
-
893
- // src/components/popover/Popover.module.css
894
- var Popover_default = {
895
- container: "Popover_container2",
896
- triggerSlot: "Popover_triggerSlot2",
897
- fullWidth: "Popover_fullWidth2",
898
- fillTrigger: "Popover_fillTrigger2",
899
- content: "Popover_content2"
900
- };
901
- function assignRef(ref, value) {
902
- if (!ref) return;
903
- if (typeof ref === "function") {
904
- ref(value);
905
- return;
906
- }
907
- ref.current = value;
908
- }
909
- function getFocusable(container) {
910
- const els = container.querySelectorAll(
911
- [
912
- "a[href]",
913
- "button:not([disabled])",
914
- "input:not([disabled])",
915
- "select:not([disabled])",
916
- "textarea:not([disabled])",
917
- '[tabindex]:not([tabindex="-1"])'
918
- ].join(",")
919
- );
920
- return Array.from(els).filter(
921
- (el) => !el.hasAttribute("disabled") && !el.getAttribute("aria-hidden")
922
- );
923
- }
924
- function parseMinWidthPx(minWidth, elForEm) {
925
- const v = minWidth.trim();
926
- if (v.endsWith("px")) {
927
- const n = Number.parseFloat(v);
928
- return Number.isFinite(n) ? n : 0;
929
- }
930
- if (typeof window !== "undefined" && v.endsWith("rem")) {
931
- const n = Number.parseFloat(v);
932
- if (!Number.isFinite(n)) return 0;
933
- const rootFont = Number.parseFloat(getComputedStyle(document.documentElement).fontSize || "16");
934
- return n * (Number.isFinite(rootFont) ? rootFont : 16);
935
- }
936
- if (typeof window !== "undefined" && v.endsWith("em")) {
937
- const n = Number.parseFloat(v);
938
- if (!Number.isFinite(n)) return 0;
939
- const font = elForEm ? Number.parseFloat(getComputedStyle(elForEm).fontSize || "16") : 16;
940
- return n * (Number.isFinite(font) ? font : 16);
941
- }
942
- return 0;
943
- }
944
- var Popover = React8.forwardRef(function Popover2({
945
- trigger: Trigger,
946
- children,
947
- open,
948
- defaultOpen = false,
949
- onOpenChange,
950
- contentId,
951
- minWidth = "200px",
952
- matchTriggerWidth = true,
953
- viewportPadding = 8,
954
- contentMaxHeightPx = 400,
955
- edgeBuffer = 100,
956
- dataCy,
957
- fullWidth = false,
958
- fillTrigger = false,
959
- autoFocusContent = false,
960
- returnFocus = true,
961
- anchorRef,
962
- overlayRef
963
- }, ref) {
964
- const internalId = React8.useId();
965
- const resolvedContentId = contentId != null ? contentId : `popover-${internalId}`;
966
- const isControlled = open !== void 0;
967
- const [uncontrolledOpen, setUncontrolledOpen] = React8.useState(defaultOpen);
968
- const isOpen = isControlled ? !!open : uncontrolledOpen;
969
- const [pos, setPos] = React8.useState({ top: 0, left: 0 });
970
- const [positioned, setPositioned] = React8.useState(false);
971
- const [triggerWidth, setTriggerWidth] = React8.useState(null);
972
- const containerRef = React8.useRef(null);
973
- const contentRef = React8.useRef(null);
974
- const triggerElRef = React8.useRef(null);
975
- const lastCloseReasonRef = React8.useRef("unknown");
976
- const [mounted, setMounted] = React8.useState(false);
977
- React8.useEffect(() => setMounted(true), []);
978
- const setOpen = React8.useCallback(
979
- (next) => {
980
- if (!isControlled) setUncontrolledOpen(next);
981
- onOpenChange == null ? void 0 : onOpenChange(next);
982
- },
983
- [isControlled, onOpenChange]
984
- );
985
- const openPopover = React8.useCallback(() => {
986
- setPositioned(false);
987
- setOpen(true);
988
- }, [setOpen]);
989
- const closePopover = React8.useCallback(
990
- (reason = "api") => {
991
- lastCloseReasonRef.current = reason;
992
- setOpen(false);
993
- },
994
- [setOpen]
995
- );
996
- const togglePopover = React8.useCallback(
997
- (e) => {
998
- var _a, _b;
999
- triggerElRef.current = (_b = (_a = anchorRef == null ? void 0 : anchorRef.current) != null ? _a : e.currentTarget) != null ? _b : containerRef.current;
1000
- if (isOpen) closePopover("trigger");
1001
- else openPopover();
1002
- },
1003
- [isOpen, closePopover, openPopover, anchorRef]
1004
- );
1005
- React8.useImperativeHandle(
1006
- ref,
1007
- () => ({
1008
- close: () => closePopover("api"),
1009
- open: openPopover,
1010
- isOpen: () => isOpen
1011
- }),
1012
- [closePopover, openPopover, isOpen]
1013
- );
1014
- const computeAndSetPosition = React8.useCallback(() => {
1015
- var _a, _b;
1016
- const content = contentRef.current;
1017
- if (!content) return;
1018
- const triggerEl = (_b = (_a = anchorRef == null ? void 0 : anchorRef.current) != null ? _a : triggerElRef.current) != null ? _b : containerRef.current;
1019
- if (!triggerEl) return;
1020
- const triggerRect = triggerEl.getBoundingClientRect();
1021
- const overlayWidthBuffer = 8;
1022
- let forcedWidthPx = null;
1023
- if (matchTriggerWidth) {
1024
- const minWidthPx = parseMinWidthPx(minWidth, triggerEl);
1025
- forcedWidthPx = Math.max(triggerRect.width + overlayWidthBuffer, minWidthPx || 0);
1026
- setTriggerWidth(forcedWidthPx);
1027
- } else {
1028
- setTriggerWidth(null);
1029
- }
1030
- const prevHidden = content.hidden;
1031
- const prevVis = content.style.visibility;
1032
- const prevDisp = content.style.display;
1033
- const prevMinWidth = content.style.minWidth;
1034
- const prevWidth = content.style.width;
1035
- const prevTop = content.style.top;
1036
- const prevLeft = content.style.left;
1037
- content.hidden = false;
1038
- content.style.visibility = "hidden";
1039
- content.style.display = "block";
1040
- content.style.top = "0px";
1041
- content.style.left = "0px";
1042
- content.style.minWidth = minWidth;
1043
- content.style.width = forcedWidthPx != null ? `${forcedWidthPx}px` : "auto";
1044
- const contentWidth = content.offsetWidth;
1045
- const contentHeight = content.offsetHeight;
1046
- content.hidden = prevHidden;
1047
- content.style.visibility = prevVis;
1048
- content.style.display = prevDisp;
1049
- content.style.minWidth = prevMinWidth;
1050
- content.style.width = prevWidth;
1051
- content.style.top = prevTop;
1052
- content.style.left = prevLeft;
1053
- const vw = window.innerWidth;
1054
- const vh = window.innerHeight;
1055
- const spaceAbove = Math.max(0, triggerRect.top);
1056
- const spaceBelow = Math.max(0, vh - triggerRect.bottom);
1057
- const spaceLeft = Math.max(0, triggerRect.left);
1058
- const spaceRight = Math.max(0, vw - triggerRect.right);
1059
- const preferBelow = spaceBelow >= contentHeight + edgeBuffer || spaceBelow >= spaceAbove;
1060
- const spacing = viewportPadding;
1061
- const rawTop = preferBelow ? triggerRect.bottom + spacing : triggerRect.top - contentHeight - spacing;
1062
- const placeRightOfLeftEdge = spaceRight >= contentWidth + edgeBuffer;
1063
- const placeLeftOfRightEdge = spaceLeft >= contentWidth + edgeBuffer;
1064
- let rawLeft;
1065
- if (placeRightOfLeftEdge) rawLeft = triggerRect.left;
1066
- else if (placeLeftOfRightEdge) rawLeft = triggerRect.right - contentWidth;
1067
- else rawLeft = triggerRect.left + (triggerRect.width - contentWidth) / 2;
1068
- const clampedLeft = Math.max(
1069
- viewportPadding,
1070
- Math.min(rawLeft, vw - contentWidth - viewportPadding)
1071
- );
1072
- const clampedTop = Math.max(
1073
- viewportPadding,
1074
- Math.min(rawTop, vh - contentHeight - viewportPadding)
1075
- );
1076
- setPos({ top: clampedTop, left: clampedLeft });
1077
- setPositioned(true);
1078
- }, [anchorRef, edgeBuffer, viewportPadding, minWidth, matchTriggerWidth]);
1079
- React8.useLayoutEffect(() => {
1080
- if (!isOpen) return;
1081
- computeAndSetPosition();
1082
- }, [isOpen, computeAndSetPosition]);
1083
- React8.useEffect(() => {
1084
- var _a, _b, _c;
1085
- if (!isOpen) return;
1086
- const content = contentRef.current;
1087
- if (!content) return;
1088
- const triggerEl = (_b = (_a = anchorRef == null ? void 0 : anchorRef.current) != null ? _a : triggerElRef.current) != null ? _b : containerRef.current;
1089
- if (autoFocusContent) {
1090
- const focusables = getFocusable(content);
1091
- (_c = focusables[0]) == null ? void 0 : _c.focus();
1092
- }
1093
- const handlePointerDownCapture = (e) => {
1094
- const container = containerRef.current;
1095
- const contentEl = contentRef.current;
1096
- if (!container || !contentEl) return;
1097
- const target = e.target;
1098
- if (!container.contains(target) && !contentEl.contains(target)) {
1099
- closePopover("outside");
1100
- }
1101
- };
1102
- const handleEscape = (e) => {
1103
- if (e.key === "Escape") closePopover("escape");
1104
- };
1105
- const handleReposition = () => computeAndSetPosition();
1106
- const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => {
1107
- handleReposition();
1108
- }) : null;
1109
- document.addEventListener("pointerdown", handlePointerDownCapture, true);
1110
- document.addEventListener("keydown", handleEscape, true);
1111
- window.addEventListener("resize", handleReposition);
1112
- window.addEventListener("scroll", handleReposition, true);
1113
- resizeObserver == null ? void 0 : resizeObserver.observe(content);
1114
- if (triggerEl) resizeObserver == null ? void 0 : resizeObserver.observe(triggerEl);
1115
- return () => {
1116
- document.removeEventListener("pointerdown", handlePointerDownCapture, true);
1117
- document.removeEventListener("keydown", handleEscape, true);
1118
- window.removeEventListener("resize", handleReposition);
1119
- window.removeEventListener("scroll", handleReposition, true);
1120
- resizeObserver == null ? void 0 : resizeObserver.disconnect();
1121
- };
1122
- }, [isOpen, closePopover, computeAndSetPosition, autoFocusContent, anchorRef]);
1123
- React8.useEffect(() => {
1124
- var _a, _b;
1125
- if (isOpen) return;
1126
- if (!returnFocus) return;
1127
- if (lastCloseReasonRef.current === "outside") return;
1128
- (_b = (_a = triggerElRef.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
1129
- }, [isOpen, returnFocus]);
1130
- const icon = isOpen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "dbc-muted-text", size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "dbc-muted-text", size: 20 });
1131
- const setOverlayRef = React8__namespace.useCallback(
1132
- (node) => {
1133
- assignRef(overlayRef, node);
1134
- },
1135
- [overlayRef]
1136
- );
1137
- return /* @__PURE__ */ jsxRuntime.jsxs(
1138
- "div",
1139
- {
1140
- className: [
1141
- Popover_default.container,
1142
- fullWidth ? Popover_default.fullWidth : "",
1143
- fillTrigger ? Popover_default.fillTrigger : ""
1144
- ].filter(Boolean).join(" "),
1145
- ref: containerRef,
1146
- children: [
1147
- /* @__PURE__ */ jsxRuntime.jsx(
1148
- "div",
1149
- {
1150
- className: [
1151
- Popover_default.triggerSlot,
1152
- fullWidth ? Popover_default.fullWidth : "",
1153
- fillTrigger ? Popover_default.fillTrigger : ""
1154
- ].filter(Boolean).join(" "),
1155
- children: Trigger(togglePopover, icon, isOpen)
1156
- }
1157
- ),
1158
- mounted && isOpen && reactDom.createPortal(
1159
- /* @__PURE__ */ jsxRuntime.jsx(
1160
- "div",
1161
- {
1162
- id: resolvedContentId,
1163
- ref: (node) => {
1164
- contentRef.current = node;
1165
- setOverlayRef(node);
1166
- },
1167
- className: Popover_default.content,
1168
- style: {
1169
- top: pos.top,
1170
- left: pos.left,
1171
- minWidth,
1172
- width: triggerWidth != null ? `${triggerWidth}px` : void 0,
1173
- maxWidth: `calc(100vw - ${viewportPadding * 2}px)`,
1174
- maxHeight: `clamp(100px, calc(100vh - ${viewportPadding * 2}px), ${contentMaxHeightPx}px)`,
1175
- visibility: positioned ? void 0 : "hidden"
1176
- },
1177
- "data-cy": dataCy != null ? dataCy : "popover-content",
1178
- children: typeof children === "function" ? (
1179
- // eslint-disable-next-line react-hooks/refs
1180
- children(() => closePopover("api"))
1181
- ) : children
1182
- }
1183
- ),
1184
- document.body
1185
- )
1186
- ]
1187
- }
1188
- );
21
+ Object.keys(useTableSettings).forEach(function (k) {
22
+ if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
23
+ enumerable: true,
24
+ get: function () { return useTableSettings[k]; }
25
+ });
1189
26
  });
1190
- Popover.displayName = "Popover";
1191
- var DEFAULT_PAGE_SIZE_OPTIONS = [20, 50, 100];
1192
- var NUMBER_LOCALE = "da-DK";
1193
- function Pagination({
1194
- itemsCount = 0,
1195
- skip = 0,
1196
- take = DEFAULT_PAGE_SIZE_OPTIONS[1],
1197
- onPageChange,
1198
- pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
1199
- showFirstLast = true,
1200
- showGoToPage = true
1201
- }) {
1202
- const popoverRef = React8.useRef(null);
1203
- const pageSizeRef = React8.useRef(null);
1204
- const formatNumber = React8.useCallback((value) => value.toLocaleString(NUMBER_LOCALE), []);
1205
- const totalPages = React8.useMemo(
1206
- () => Math.max(1, Math.ceil(itemsCount / Math.max(1, take))),
1207
- [itemsCount, take]
1208
- );
1209
- const currentPage = React8.useMemo(() => {
1210
- const p = Math.floor(skip / Math.max(1, take)) + 1;
1211
- return Math.min(Math.max(1, p), totalPages);
1212
- }, [skip, take, totalPages]);
1213
- const emit = React8.useCallback(
1214
- (page, nextTake = take) => {
1215
- const nextTotalPages = Math.max(1, Math.ceil(itemsCount / Math.max(1, nextTake)));
1216
- const clampedPage = Math.min(Math.max(1, page), nextTotalPages);
1217
- const nextSkip = (clampedPage - 1) * nextTake;
1218
- onPageChange == null ? void 0 : onPageChange({
1219
- page: clampedPage,
1220
- take: nextTake,
1221
- skip: nextSkip,
1222
- totalPages: nextTotalPages
1223
- });
1224
- },
1225
- [onPageChange, take, itemsCount]
1226
- );
1227
- const firstPage = React8.useCallback(() => emit(1), [emit]);
1228
- const lastPage = React8.useCallback(() => emit(totalPages), [emit, totalPages]);
1229
- const prevPage = React8.useCallback(() => emit(currentPage - 1), [emit, currentPage]);
1230
- const nextPage = React8.useCallback(() => emit(currentPage + 1), [emit, currentPage]);
1231
- const goToPage = React8.useCallback((page) => emit(page), [emit]);
1232
- const canPrev = currentPage > 1;
1233
- const canNext = currentPage < totalPages;
1234
- const rangeLabel = React8.useMemo(() => {
1235
- if (itemsCount <= 0) return "0 af 0";
1236
- const first = skip + 1;
1237
- const last = Math.min(skip + take, itemsCount);
1238
- return `${formatNumber(first)}\u2013${formatNumber(last)} af ${formatNumber(itemsCount)}`;
1239
- }, [formatNumber, itemsCount, skip, take]);
1240
- const pages = React8.useMemo(() => Array.from({ length: totalPages }, (_, i) => i + 1), [totalPages]);
1241
- const handlePageSizeChange = React8.useCallback((size) => emit(1, size), [emit]);
1242
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Pagination_default.container, children: [
1243
- showFirstLast && /* @__PURE__ */ jsxRuntime.jsx(
1244
- Button,
1245
- {
1246
- size: "sm",
1247
- icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeft, {}),
1248
- disabled: !canPrev,
1249
- onClick: firstPage,
1250
- "aria-label": "First page"
1251
- }
1252
- ),
1253
- /* @__PURE__ */ jsxRuntime.jsx(
1254
- Button,
1255
- {
1256
- size: "sm",
1257
- icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, {}),
1258
- disabled: !canPrev,
1259
- onClick: prevPage,
1260
- "aria-label": "Previous page"
1261
- }
1262
- ),
1263
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: Pagination_default.range, "aria-live": "polite", children: rangeLabel }),
1264
- /* @__PURE__ */ jsxRuntime.jsx(
1265
- Button,
1266
- {
1267
- size: "sm",
1268
- icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, {}),
1269
- disabled: !canNext,
1270
- onClick: nextPage,
1271
- "aria-label": "Next page"
1272
- }
1273
- ),
1274
- showFirstLast && /* @__PURE__ */ jsxRuntime.jsx(
1275
- Button,
1276
- {
1277
- size: "sm",
1278
- icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsRight, {}),
1279
- disabled: !canNext,
1280
- onClick: lastPage,
1281
- "aria-label": "Last page"
1282
- }
1283
- ),
1284
- showGoToPage && /* @__PURE__ */ jsxRuntime.jsx(
1285
- Popover,
1286
- {
1287
- ref: popoverRef,
1288
- trigger: (open) => /* @__PURE__ */ jsxRuntime.jsxs(Button, { size: "sm", variant: "outlined", onClick: open, children: [
1289
- "Side ",
1290
- formatNumber(currentPage),
1291
- "/",
1292
- formatNumber(totalPages),
1293
- " ",
1294
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 16 })
1295
- ] }),
1296
- children: /* @__PURE__ */ jsxRuntime.jsx(Menu, { children: pages == null ? void 0 : pages.map((page) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Item, { active: page === currentPage, children: /* @__PURE__ */ jsxRuntime.jsx(
1297
- "button",
1298
- {
1299
- onClick: () => {
1300
- var _a;
1301
- goToPage(page);
1302
- (_a = popoverRef.current) == null ? void 0 : _a.close();
1303
- },
1304
- children: formatNumber(page)
1305
- }
1306
- ) }, page)) })
1307
- }
1308
- ),
1309
- /* @__PURE__ */ jsxRuntime.jsx(
1310
- Popover,
1311
- {
1312
- ref: pageSizeRef,
1313
- trigger: (open) => /* @__PURE__ */ jsxRuntime.jsxs(Button, { size: "sm", variant: "outlined", onClick: open, children: [
1314
- "Vis ",
1315
- formatNumber(take),
1316
- " ",
1317
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 16 })
1318
- ] }),
1319
- children: /* @__PURE__ */ jsxRuntime.jsx(Menu, { children: pageSizeOptions == null ? void 0 : pageSizeOptions.map((size) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Item, { active: size === take, children: /* @__PURE__ */ jsxRuntime.jsx(
1320
- "button",
1321
- {
1322
- onClick: () => {
1323
- var _a;
1324
- handlePageSizeChange(size);
1325
- (_a = pageSizeRef.current) == null ? void 0 : _a.close();
1326
- },
1327
- children: formatNumber(size)
1328
- }
1329
- ) }, size)) })
1330
- }
1331
- )
1332
- ] });
1333
- }
1334
- var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React8.useLayoutEffect : React8.useEffect;
1335
- function useViewportFill(ref, { bottomOffset = 0, min = 120, includeMarginTop = false, watchRef } = {}) {
1336
- const [maxHeight, setMaxHeight] = React8.useState(min);
1337
- const raf = React8.useRef(null);
1338
- const measure = React8.useCallback(() => {
1339
- if (typeof window === "undefined" || !ref.current) return;
1340
- const el = ref.current;
1341
- const rect = el.getBoundingClientRect();
1342
- let top = rect.top;
1343
- if (includeMarginTop) {
1344
- const marginTop = parseFloat(window.getComputedStyle(el).marginTop || "0") || 0;
1345
- top -= marginTop;
1346
- }
1347
- const next = Math.max(min, Math.floor(window.innerHeight - bottomOffset - top));
1348
- setMaxHeight((prev) => prev === next ? prev : next);
1349
- }, [ref, bottomOffset, min, includeMarginTop]);
1350
- const scheduleMeasure = React8.useCallback(() => {
1351
- if (typeof window === "undefined") return;
1352
- if (raf.current != null) {
1353
- cancelAnimationFrame(raf.current);
1354
- }
1355
- raf.current = window.requestAnimationFrame(() => {
1356
- raf.current = null;
1357
- measure();
1358
- });
1359
- }, [measure]);
1360
- useIsomorphicLayoutEffect(() => {
1361
- measure();
1362
- }, [measure]);
1363
- React8.useEffect(() => {
1364
- var _a;
1365
- if (typeof window === "undefined" || !ref.current) return;
1366
- const target = ref.current;
1367
- const extra = (_a = watchRef == null ? void 0 : watchRef.current) != null ? _a : null;
1368
- const parent = target.parentElement;
1369
- const onResize = () => scheduleMeasure();
1370
- const onTransitionOrAnimationEnd = () => scheduleMeasure();
1371
- window.addEventListener("resize", onResize);
1372
- document.addEventListener("transitionend", onTransitionOrAnimationEnd, true);
1373
- document.addEventListener("animationend", onTransitionOrAnimationEnd, true);
1374
- let resizeObserver = null;
1375
- if ("ResizeObserver" in window) {
1376
- resizeObserver = new ResizeObserver(() => scheduleMeasure());
1377
- resizeObserver.observe(target);
1378
- if (parent && parent !== target) {
1379
- resizeObserver.observe(parent);
1380
- }
1381
- if (extra && extra !== target && extra !== parent) {
1382
- resizeObserver.observe(extra);
1383
- }
1384
- }
1385
- return () => {
1386
- window.removeEventListener("resize", onResize);
1387
- document.removeEventListener("transitionend", onTransitionOrAnimationEnd, true);
1388
- document.removeEventListener("animationend", onTransitionOrAnimationEnd, true);
1389
- resizeObserver == null ? void 0 : resizeObserver.disconnect();
1390
- if (raf.current != null) {
1391
- cancelAnimationFrame(raf.current);
1392
- raf.current = null;
1393
- }
1394
- };
1395
- }, [ref, watchRef, scheduleMeasure]);
1396
- const style = React8.useMemo(
1397
- () => ({
1398
- maxHeight,
1399
- overflow: "auto"
1400
- }),
1401
- [maxHeight]
1402
- );
1403
- return {
1404
- maxHeight,
1405
- style,
1406
- recompute: measure
1407
- };
1408
- }
1409
- var defaultEmptyConfig = {
1410
- enabled: true,
1411
- title: "Ingen resultater",
1412
- description: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Ingen data at vise." }),
1413
- showBack: false,
1414
- showRefresh: false,
1415
- showClearFilters: true,
1416
- backLabel: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1417
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { size: 16 }),
1418
- "Tilbage"
1419
- ] }),
1420
- refreshLabel: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Indl\xE6s igen" }),
1421
- clearFiltersLabel: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Nulstil alle filtre" }),
1422
- className: "dbc-flex dbc-flex-column dbc-items-start dbc-justify-start dbc-text-left dbc-gap-sm dbc-py-lg"
1423
- };
1424
- function TableEmptyState({ config }) {
1425
- const merged = {
1426
- ...defaultEmptyConfig,
1427
- ...config != null ? config : {}
1428
- };
1429
- if (!merged.enabled) return null;
1430
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dbc-flex dbc-flex-column dbc-gap-md dbc-pt-sm dbc-pb-sm", children: [
1431
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dbc-text-sm dbc-muted-text", children: merged.description }),
1432
- merged.actions ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dbc-flex dbc-gap-sm", children: merged.actions }) : null
1433
- ] });
1434
- }
1435
-
1436
- // src/components/table/Table.module.css
1437
- var Table_default = {
1438
- fillViewportRoot: "Table_fillViewportRoot2",
1439
- inlineRoot: "Table_inlineRoot2",
1440
- toolbarSlot: "Table_toolbarSlot2",
1441
- tableViewport: "Table_tableViewport2",
1442
- paginationSlot: "Table_paginationSlot2",
1443
- paginationSlotTop: "Table_paginationSlotTop2",
1444
- tableRoot: "Table_tableRoot2",
1445
- measuringLayout: "Table_measuringLayout2",
1446
- tableScroll: "Table_tableScroll2",
1447
- tableElement: "Table_tableElement2",
1448
- header: "Table_header2",
1449
- headerRow: "Table_headerRow2",
1450
- row: "Table_row2",
1451
- emptyStateSlot: "Table_emptyStateSlot2",
1452
- body: "Table_body2",
1453
- cell: "Table_cell2",
1454
- headerCell: "Table_headerCell2",
1455
- md: "Table_md2",
1456
- sm: "Table_sm2",
1457
- selectionCell: "Table_selectionCell2",
1458
- selectionHitArea: "Table_selectionHitArea2",
1459
- selectionControlWrap: "Table_selectionControlWrap2",
1460
- clickableRow: "Table_clickableRow2",
1461
- selectedRow: "Table_selectedRow2",
1462
- striped: "Table_striped2",
1463
- nowrap: "Table_nowrap2",
1464
- allowWrap: "Table_allowWrap2",
1465
- thInner: "Table_thInner2",
1466
- thInnerRight: "Table_thInnerRight2",
1467
- thInnerCenter: "Table_thInnerCenter2",
1468
- thMain: "Table_thMain2",
1469
- thMainRight: "Table_thMainRight2",
1470
- thMainCenter: "Table_thMainCenter2",
1471
- thButton: "Table_thButton2",
1472
- thButtonRight: "Table_thButtonRight2",
1473
- thButtonCenter: "Table_thButtonCenter2",
1474
- thLabel: "Table_thLabel2",
1475
- thLabelRight: "Table_thLabelRight2",
1476
- thLabelCenter: "Table_thLabelCenter2",
1477
- thOverlayExtras: "Table_thOverlayExtras2",
1478
- sortIndicator: "Table_sortIndicator2",
1479
- descending: "Table_descending2",
1480
- inActiveSort: "Table_inActiveSort2",
1481
- cellContent: "Table_cellContent2",
1482
- cellValueEllipsis: "Table_cellValueEllipsis2",
1483
- severityTable: "Table_severityTable2",
1484
- severity: "Table_severity2",
1485
- severityFailed: "Table_severityFailed2",
1486
- dividerLeft: "Table_dividerLeft2",
1487
- dividerRight: "Table_dividerRight2"
1488
- };
1489
-
1490
- // src/components/table/table.classes.ts
1491
- function cx2(...values) {
1492
- return values.filter(Boolean).join(" ");
1493
- }
1494
- function getDividerClass(column) {
1495
- if (column.divider === "left") return Table_default.dividerLeft;
1496
- if (column.divider === "right") return Table_default.dividerRight;
1497
- return "";
1498
- }
1499
- function getAlignValue(column) {
1500
- var _a;
1501
- return (_a = column.align) != null ? _a : "left";
1502
- }
1503
- function getHeaderAlignClasses(align) {
1504
- return {
1505
- inner: cx2(
1506
- Table_default.thInner,
1507
- align === "right" && Table_default.thInnerRight,
1508
- align === "center" && Table_default.thInnerCenter
1509
- ),
1510
- main: cx2(
1511
- Table_default.thMain,
1512
- align === "right" && Table_default.thMainRight,
1513
- align === "center" && Table_default.thMainCenter
1514
- ),
1515
- button: cx2(
1516
- Table_default.thButton,
1517
- align === "right" && Table_default.thButtonRight,
1518
- align === "center" && Table_default.thButtonCenter
1519
- ),
1520
- label: cx2(
1521
- Table_default.thLabel,
1522
- align === "right" && Table_default.thLabelRight,
1523
- align === "center" && Table_default.thLabelCenter
1524
- )
1525
- };
1526
- }
1527
-
1528
- // src/constants/severity.ts
1529
- var SeverityBorderColor = {
1530
- neutral: "var(--color-neutral-strong)",
1531
- brand: "var(--color-brand)",
1532
- success: "var(--color-status-success-border)",
1533
- error: "var(--color-status-error-border)",
1534
- info: "var(--color-status-info-border)",
1535
- warning: "var(--color-status-warning-border)"
1536
- };
1537
-
1538
- // src/components/table/table.utils.ts
1539
- var SELECTION_COLUMN_PX = 40;
1540
- var DEFAULT_COLUMN_PX = 150;
1541
- function getVisibleColumns(columns) {
1542
- return columns.filter((column) => !column.hidden);
1543
- }
1544
- function getHeaderLabel(header) {
1545
- return typeof header === "function" ? header() : header;
1546
- }
1547
- function isActiveSort(sortById, columnId) {
1548
- return sortById === columnId;
1549
- }
1550
- function getAriaSort(sortable, active, direction) {
1551
- if (!sortable || !active || !direction) return "none";
1552
- return direction === "asc" ? "ascending" : "descending";
1553
- }
1554
- function getNextSortDirection(sortable, active, currentDirection) {
1555
- if (!sortable) return null;
1556
- if (!active) return "asc";
1557
- if (currentDirection === "asc") return "desc";
1558
- return null;
1559
- }
1560
- function shouldToggleOnKey(key) {
1561
- return key === "Enter" || key === " ";
1562
- }
1563
- function isModifierClick(e) {
1564
- return Boolean(e.metaKey || e.ctrlKey);
1565
- }
1566
- function shouldAllowWrap(columnAllowWrap, isRowSelected, viewMode) {
1567
- return Boolean(columnAllowWrap || isRowSelected || viewMode === "wrapped");
1568
- }
1569
- function getCellDisplayValue(row, column) {
1570
- var _a;
1571
- const empty = (_a = column.emptyPlaceholder) != null ? _a : "";
1572
- if (column.render) {
1573
- const rendered = column.render(row);
1574
- return rendered != null ? rendered : empty;
1575
- }
1576
- if (column.accessor) {
1577
- const value = row[column.accessor];
1578
- return value != null ? value : empty;
1579
- }
1580
- return empty;
1581
- }
1582
-
1583
- // src/components/table/hooks/useTableRowInteractions.ts
1584
- function useTableRowInteractions({
1585
- row,
1586
- rowId,
1587
- isSelected,
1588
- canSelect,
1589
- onRowClick,
1590
- onRowSelect
1591
- }) {
1592
- const handleRowClick = React8.useCallback(
1593
- (e) => {
1594
- var _a;
1595
- const target = e.target;
1596
- if ((_a = target == null ? void 0 : target.closest) == null ? void 0 : _a.call(target, '[data-selection-control="true"]')) {
1597
- return;
1598
- }
1599
- if (isModifierClick(e) && canSelect) {
1600
- e.preventDefault();
1601
- e.stopPropagation();
1602
- onRowSelect == null ? void 0 : onRowSelect(rowId, !isSelected);
1603
- return;
1604
- }
1605
- onRowClick == null ? void 0 : onRowClick(row);
1606
- },
1607
- [canSelect, isSelected, onRowClick, onRowSelect, row, rowId]
1608
- );
1609
- const handleRowKeyDown = React8.useCallback(
1610
- (e) => {
1611
- if (!onRowClick) return;
1612
- if (!shouldToggleOnKey(e.key)) return;
1613
- e.preventDefault();
1614
- onRowClick(row);
1615
- },
1616
- [onRowClick, row]
1617
- );
1618
- return {
1619
- handleRowClick,
1620
- handleRowKeyDown
1621
- };
1622
- }
1623
- function TableRow({
1624
- row,
1625
- rowId,
1626
- columns,
1627
- selectedRows,
1628
- hasSelection,
1629
- selectionMode,
1630
- selectionInputName,
1631
- viewMode,
1632
- getRowSeverity,
1633
- onRowClick,
1634
- onRowMouseEnter,
1635
- onRowSelect
1636
- }) {
1637
- var _a;
1638
- const isSelected = (_a = selectedRows == null ? void 0 : selectedRows.has(rowId)) != null ? _a : false;
1639
- const rowSeverity = getRowSeverity == null ? void 0 : getRowSeverity(row);
1640
- const canSelect = Boolean(selectedRows && onRowSelect);
1641
- const { handleRowClick, handleRowKeyDown } = useTableRowInteractions({
1642
- row,
1643
- rowId,
1644
- isSelected,
1645
- canSelect,
1646
- onRowClick,
1647
- onRowSelect
1648
- });
1649
- return /* @__PURE__ */ jsxRuntime.jsxs(
1650
- "tr",
1651
- {
1652
- className: cx2(
1653
- Table_default.row,
1654
- onRowClick && Table_default.clickableRow,
1655
- isSelected && Table_default.selectedRow,
1656
- rowSeverity && Table_default.severity
1657
- ),
1658
- style: {
1659
- ["--row-severity-color"]: rowSeverity ? SeverityBorderColor[rowSeverity] : void 0
1660
- },
1661
- tabIndex: onRowClick ? 0 : -1,
1662
- onKeyDown: handleRowKeyDown,
1663
- onMouseEnter: () => onRowMouseEnter == null ? void 0 : onRowMouseEnter(row),
1664
- onClick: handleRowClick,
1665
- children: [
1666
- hasSelection ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: cx2(Table_default.cell, Table_default.selectionCell), "data-selection-control": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
1667
- "div",
1668
- {
1669
- className: Table_default.selectionHitArea,
1670
- "data-selection-control": "true",
1671
- onClick: (e) => {
1672
- if (e.target !== e.currentTarget) return;
1673
- e.stopPropagation();
1674
- onRowSelect == null ? void 0 : onRowSelect(rowId, !isSelected);
1675
- },
1676
- children: /* @__PURE__ */ jsxRuntime.jsx(
1677
- "div",
1678
- {
1679
- className: Table_default.selectionControlWrap,
1680
- "data-selection-control": "true",
1681
- onMouseDown: (e) => {
1682
- if (selectionMode !== "single" || !isSelected) return;
1683
- e.preventDefault();
1684
- },
1685
- onClick: (e) => {
1686
- e.stopPropagation();
1687
- if (selectionMode === "single" && isSelected) {
1688
- e.preventDefault();
1689
- onRowSelect == null ? void 0 : onRowSelect(rowId, false);
1690
- }
1691
- },
1692
- children: selectionMode === "single" ? /* @__PURE__ */ jsxRuntime.jsx(
1693
- RadioButton,
1694
- {
1695
- noContainer: true,
1696
- name: selectionInputName,
1697
- value: String(rowId),
1698
- checked: isSelected,
1699
- size: "sm",
1700
- variant: "primary",
1701
- onChange: (_value, e) => {
1702
- e.stopPropagation();
1703
- onRowSelect == null ? void 0 : onRowSelect(rowId, true);
1704
- }
1705
- }
1706
- ) : /* @__PURE__ */ jsxRuntime.jsx(
1707
- Checkbox,
1708
- {
1709
- noContainer: true,
1710
- variant: "primary",
1711
- checked: isSelected,
1712
- size: "sm",
1713
- onChange: (checked, e) => {
1714
- e.stopPropagation();
1715
- onRowSelect == null ? void 0 : onRowSelect(rowId, checked);
1716
- }
1717
- }
1718
- )
1719
- }
1720
- )
1721
- }
1722
- ) }) : null,
1723
- columns.map((column) => {
1724
- var _a2, _b, _c, _d;
1725
- const allowWrap = shouldAllowWrap(column.allowWrap, isSelected, viewMode);
1726
- column.allowOverflow;
1727
- const cellValue = getCellDisplayValue(row, column);
1728
- return /* @__PURE__ */ jsxRuntime.jsx(
1729
- "td",
1730
- {
1731
- className: cx2(
1732
- Table_default.cell,
1733
- allowWrap ? Table_default.allowWrap : Table_default.nowrap,
1734
- column.divider === "left" && Table_default.dividerLeft,
1735
- column.divider === "right" && Table_default.dividerRight
1736
- ),
1737
- "data-align": (_a2 = column.align) != null ? _a2 : "left",
1738
- "data-vertical-align": (_b = column.verticalAlign) != null ? _b : "top",
1739
- "data-divider": column.divider,
1740
- children: /* @__PURE__ */ jsxRuntime.jsx(
1741
- "div",
1742
- {
1743
- className: Table_default.cellContent,
1744
- "data-align": (_c = column.align) != null ? _c : "left",
1745
- "data-vertical-align": (_d = column.verticalAlign) != null ? _d : "top",
1746
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: Table_default.cellValueEllipsis, children: cellValue })
1747
- }
1748
- )
1749
- },
1750
- column.id
1751
- );
1752
- })
1753
- ]
1754
- }
1755
- );
1756
- }
1757
- function TableBody({
1758
- data,
1759
- dataKey,
1760
- columns,
1761
- striped,
1762
- selectedRows,
1763
- hasSelection,
1764
- selectionMode,
1765
- selectionInputName,
1766
- viewMode,
1767
- getRowSeverity,
1768
- onRowClick,
1769
- onRowMouseEnter,
1770
- onRowSelect
1771
- }) {
1772
- return /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: cx2(Table_default.body, striped && Table_default.striped), children: data.map((row) => {
1773
- const rowId = row[dataKey];
1774
- return /* @__PURE__ */ jsxRuntime.jsx(
1775
- TableRow,
1776
- {
1777
- row,
1778
- rowId,
1779
- columns,
1780
- selectedRows,
1781
- hasSelection,
1782
- selectionMode,
1783
- selectionInputName,
1784
- viewMode,
1785
- getRowSeverity,
1786
- onRowClick,
1787
- onRowMouseEnter,
1788
- onRowSelect
1789
- },
1790
- `gridRow-${rowId}`
1791
- );
1792
- }) });
1793
- }
1794
- function TableHeaderCell({
1795
- column,
1796
- index,
1797
- sortById,
1798
- sortDirection,
1799
- onSortChange,
1800
- extraContent
1801
- }) {
1802
- const active = isActiveSort(sortById, column.id);
1803
- const ariaSort = getAriaSort(column.sortable, active, sortDirection != null ? sortDirection : null);
1804
- const align = getAlignValue(column);
1805
- const dividerClass = getDividerClass(column);
1806
- const alignClasses = getHeaderAlignClasses(align);
1807
- const handleToggleSort = () => {
1808
- if (!column.sortable || !onSortChange) return;
1809
- const nextDirection = getNextSortDirection(column.sortable, active, sortDirection != null ? sortDirection : null);
1810
- onSortChange(column, nextDirection);
1811
- };
1812
- return /* @__PURE__ */ jsxRuntime.jsxs(
1813
- "th",
1814
- {
1815
- className: cx2(Table_default.headerCell, dividerClass),
1816
- scope: "col",
1817
- "aria-sort": ariaSort,
1818
- "data-align": align,
1819
- "data-divider": column.divider,
1820
- "data-column-index": index,
1821
- children: [
1822
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: alignClasses.inner, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: alignClasses.main, children: column.sortable ? /* @__PURE__ */ jsxRuntime.jsxs(
1823
- "button",
1824
- {
1825
- type: "button",
1826
- className: alignClasses.button,
1827
- onClick: handleToggleSort,
1828
- onKeyDown: (e) => {
1829
- if (!shouldToggleOnKey(e.key)) return;
1830
- e.preventDefault();
1831
- handleToggleSort();
1832
- },
1833
- children: [
1834
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: alignClasses.label, children: getHeaderLabel(column.header) }),
1835
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: Table_default.sortIndicator, "aria-hidden": "true", children: [
1836
- active && sortDirection === "asc" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, {}),
1837
- active && sortDirection === "desc" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, {}),
1838
- !active && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: Table_default.inActiveSort })
1839
- ] })
1840
- ]
1841
- }
1842
- ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: alignClasses.label, children: getHeaderLabel(column.header) }) }) }),
1843
- extraContent != null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: Table_default.thOverlayExtras, children: extraContent }) : null
1844
- ]
1845
- },
1846
- column.id
1847
- );
1848
- }
1849
- function TableSelectionCell({ checked, isHeader, multiple, onToggle }) {
1850
- const Tag = isHeader ? "th" : "td";
1851
- return /* @__PURE__ */ jsxRuntime.jsx(
1852
- Tag,
1853
- {
1854
- className: cx2(Table_default.headerCell, Table_default.selectionCell),
1855
- scope: isHeader ? "col" : void 0,
1856
- onClick: (e) => {
1857
- if (isHeader && !multiple) return;
1858
- e.stopPropagation();
1859
- onToggle(!checked, e);
1860
- },
1861
- children: isHeader && !multiple ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { className: Table_default.selectionHitArea, children: /* @__PURE__ */ jsxRuntime.jsx(
1862
- Checkbox,
1863
- {
1864
- noContainer: true,
1865
- size: "sm",
1866
- variant: "primary",
1867
- checked,
1868
- onChange: (nextChecked, e) => {
1869
- e.stopPropagation();
1870
- onToggle(nextChecked, e);
1871
- }
1872
- }
1873
- ) })
1874
- }
1875
- );
1876
- }
1877
- function TableHeader({
1878
- columns,
1879
- hasSelection,
1880
- selectionMode,
1881
- allRowsSelected,
1882
- onSelectAllRows,
1883
- sortById,
1884
- sortDirection,
1885
- onSortChange,
1886
- headerExtras,
1887
- stickyTop
1888
- }) {
1889
- return /* @__PURE__ */ jsxRuntime.jsx(
1890
- "thead",
1891
- {
1892
- className: Table_default.header,
1893
- style: stickyTop ? { top: stickyTop, position: "sticky", zIndex: 2 } : void 0,
1894
- children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: Table_default.headerRow, children: [
1895
- hasSelection ? /* @__PURE__ */ jsxRuntime.jsx(
1896
- TableSelectionCell,
1897
- {
1898
- isHeader: true,
1899
- multiple: selectionMode === "multiple",
1900
- checked: allRowsSelected,
1901
- onToggle: (checked) => onSelectAllRows == null ? void 0 : onSelectAllRows(checked)
1902
- }
1903
- ) : null,
1904
- columns.map((column, index) => /* @__PURE__ */ jsxRuntime.jsx(
1905
- TableHeaderCell,
1906
- {
1907
- column,
1908
- index,
1909
- sortById,
1910
- sortDirection,
1911
- onSortChange,
1912
- extraContent: headerExtras == null ? void 0 : headerExtras({ column, index })
1913
- },
1914
- column.id
1915
- ))
1916
- ] })
1917
- }
1918
- );
1919
- }
1920
-
1921
- // src/components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem.module.css
1922
- var SkeletonLoaderItem_default = {
1923
- skeletonLoader: "SkeletonLoaderItem_skeletonLoader2",
1924
- shimmer: "SkeletonLoaderItem_shimmer2",
1925
- invert: "SkeletonLoaderItem_invert2",
1926
- bar: "SkeletonLoaderItem_bar2"
1927
- };
1928
- function SkeletonLoaderItem({
1929
- height = 14,
1930
- width = "100%",
1931
- radius = 6,
1932
- speedSec = 3,
1933
- ariaLabel = "Loading",
1934
- variant = "default"
1935
- }) {
1936
- const h = typeof height === "number" ? `${height}px` : height;
1937
- const w = typeof width === "number" ? `${width}px` : width;
1938
- const r = typeof radius === "number" ? `${radius}px` : radius;
1939
- return /* @__PURE__ */ jsxRuntime.jsxs(
1940
- "div",
1941
- {
1942
- className: `${SkeletonLoaderItem_default.skeletonLoader} ${SkeletonLoaderItem_default[variant]}`,
1943
- role: "status",
1944
- "aria-label": ariaLabel,
1945
- "aria-live": "polite",
1946
- style: {
1947
- ["--h"]: h,
1948
- ["--r"]: r,
1949
- ["--speed"]: `${speedSec}s`,
1950
- ["--width"]: w
1951
- },
1952
- children: [
1953
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: SkeletonLoaderItem_default.bar, "aria-hidden": "true" }),
1954
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "srOnly", children: "Loading\u2026" })
1955
- ]
1956
- }
1957
- );
1958
- }
1959
- function TableLoadingBody({ rows, columns, hasSelection }) {
1960
- return /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: Table_default.body, children: Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: Table_default.row, children: [
1961
- hasSelection ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: cx2(Table_default.cell, Table_default.selectionCell), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: Table_default.cellContent, children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem, { height: 20, width: 20 }) }) }) : null,
1962
- columns.map((column) => {
1963
- var _a;
1964
- return /* @__PURE__ */ jsxRuntime.jsx(
1965
- "td",
1966
- {
1967
- className: cx2(
1968
- Table_default.cell,
1969
- column.divider === "left" && Table_default.dividerLeft,
1970
- column.divider === "right" && Table_default.dividerRight
1971
- ),
1972
- "data-align": (_a = column.align) != null ? _a : "left",
1973
- "data-divider": column.divider,
1974
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: Table_default.cellContent, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: Table_default.cellValueEllipsis, children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem, { height: 20, width: "100%" }) }) })
1975
- },
1976
- column.id
1977
- );
1978
- })
1979
- ] }, `loading-row-${rowIndex}`)) });
1980
- }
1981
- function Table({
1982
- data,
1983
- dataKey,
1984
- columns,
1985
- selectedRows,
1986
- selectionMode = "single",
1987
- allRowsSelected,
1988
- sortById,
1989
- sortDirection,
1990
- loading,
1991
- emptyConfig,
1992
- variant = "primary",
1993
- size = "md",
1994
- viewMode,
1995
- striped,
1996
- fillViewport = false,
1997
- fillViewportBottomOffset = 16,
1998
- containScrolling = true,
1999
- stickyHeader,
2000
- tableWidth,
2001
- tableRootRef,
2002
- measuringLayout = false,
2003
- toolbar,
2004
- headerExtras,
2005
- take,
2006
- skip,
2007
- totalItemsCount,
2008
- paginationPlacement = "bottom",
2009
- showFirstLast = false,
2010
- pageSizeOptions,
2011
- getRowSeverity,
2012
- onRowClick,
2013
- onRowMouseEnter,
2014
- onRowSelect,
2015
- onSelectAllRows,
2016
- onSortChange,
2017
- onPageChange,
2018
- ...rest
2019
- }) {
2020
- const visibleColumns = React8.useMemo(() => getVisibleColumns(columns), [columns]);
2021
- const selectionInputName = React8.useId();
2022
- const internalTableRootRef = React8.useRef(null);
2023
- const tableRootRefWrapper = React8.useRef(tableRootRef);
2024
- const hasSelection = Boolean(selectedRows && onRowSelect);
2025
- const hasPagination = Boolean(onPageChange && (loading || data.length > 0));
2026
- const paginationOffset = hasPagination ? 72 : 0;
2027
- const { style: viewportFillStyle, maxHeight } = useViewportFill(internalTableRootRef, {
2028
- bottomOffset: fillViewportBottomOffset + paginationOffset,
2029
- min: 0
2030
- });
2031
- const fillViewportActive = fillViewport && containScrolling && maxHeight >= 500;
2032
- const stickyTop = stickyHeader === "app-header" ? "var(--app-header-height, 60px)" : typeof stickyHeader === "number" ? `${stickyHeader}px` : void 0;
2033
- const setTableRootRef = React8.useCallback((node) => {
2034
- internalTableRootRef.current = node;
2035
- if (typeof tableRootRefWrapper.current === "function") {
2036
- tableRootRefWrapper.current(node);
2037
- } else if (tableRootRefWrapper.current) {
2038
- tableRootRefWrapper.current.current = node;
2039
- }
2040
- }, []);
2041
- const handlePageChange = React8.useCallback(
2042
- (e) => {
2043
- onPageChange == null ? void 0 : onPageChange(e);
2044
- },
2045
- [onPageChange]
2046
- );
2047
- const bodyContent = loading && !data.length ? /* @__PURE__ */ jsxRuntime.jsx(TableLoadingBody, { rows: take != null ? take : 5, columns: visibleColumns, hasSelection }) : /* @__PURE__ */ jsxRuntime.jsx(
2048
- TableBody,
2049
- {
2050
- data,
2051
- dataKey,
2052
- columns: visibleColumns,
2053
- striped,
2054
- selectedRows,
2055
- hasSelection,
2056
- selectionMode,
2057
- selectionInputName,
2058
- viewMode,
2059
- getRowSeverity,
2060
- onRowClick,
2061
- onRowMouseEnter,
2062
- onRowSelect
2063
- }
2064
- );
2065
- const paginationEl = hasPagination ? /* @__PURE__ */ jsxRuntime.jsx(
2066
- "div",
2067
- {
2068
- className: cx2(
2069
- Table_default.paginationSlot,
2070
- paginationPlacement === "top" && Table_default.paginationSlotTop
2071
- ),
2072
- children: /* @__PURE__ */ jsxRuntime.jsx(
2073
- Pagination,
2074
- {
2075
- itemsCount: totalItemsCount,
2076
- take,
2077
- skip,
2078
- onPageChange: handlePageChange,
2079
- showFirstLast,
2080
- pageSizeOptions
2081
- }
2082
- )
2083
- }
2084
- ) : null;
2085
- const tableClassName = cx2(
2086
- Table_default.tableRoot,
2087
- Table_default[variant],
2088
- Table_default[size],
2089
- measuringLayout && Table_default.measuringLayout,
2090
- getRowSeverity && Table_default.severityTable
2091
- );
2092
- const tableShell = /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, className: tableClassName, children: /* @__PURE__ */ jsxRuntime.jsx(
2093
- "div",
2094
- {
2095
- ref: setTableRootRef,
2096
- className: Table_default.tableScroll,
2097
- style: fillViewportActive ? viewportFillStyle : !containScrolling ? { overflow: "visible" } : void 0,
2098
- children: !data.length && !loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: Table_default.emptyStateSlot, children: /* @__PURE__ */ jsxRuntime.jsx(TableEmptyState, { config: emptyConfig }) }) : /* @__PURE__ */ jsxRuntime.jsxs(
2099
- "table",
2100
- {
2101
- className: Table_default.tableElement,
2102
- "aria-rowcount": data.length,
2103
- style: tableWidth != null ? { width: tableWidth } : void 0,
2104
- children: [
2105
- /* @__PURE__ */ jsxRuntime.jsxs("colgroup", { children: [
2106
- hasSelection ? /* @__PURE__ */ jsxRuntime.jsx("col", { style: { width: SELECTION_COLUMN_PX } }) : null,
2107
- visibleColumns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
2108
- "col",
2109
- {
2110
- style: column.width != null ? { width: column.width } : void 0
2111
- },
2112
- column.id
2113
- ))
2114
- ] }),
2115
- /* @__PURE__ */ jsxRuntime.jsx(
2116
- TableHeader,
2117
- {
2118
- columns: visibleColumns,
2119
- hasSelection,
2120
- selectionMode,
2121
- allRowsSelected,
2122
- onSelectAllRows,
2123
- sortById,
2124
- sortDirection,
2125
- onSortChange,
2126
- headerExtras,
2127
- stickyTop
2128
- }
2129
- ),
2130
- bodyContent
2131
- ]
2132
- }
2133
- )
2134
- }
2135
- ) });
2136
- if (fillViewport) {
2137
- return /* @__PURE__ */ jsxRuntime.jsxs(
2138
- "div",
2139
- {
2140
- className: Table_default.fillViewportRoot,
2141
- style: {
2142
- flexDirection: paginationPlacement === "top" ? "column-reverse" : "column",
2143
- ...!fillViewportActive && { blockSize: "auto", overflow: "visible" }
2144
- },
2145
- children: [
2146
- toolbar ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: Table_default.toolbarSlot, children: toolbar }) : null,
2147
- /* @__PURE__ */ jsxRuntime.jsx(
2148
- "div",
2149
- {
2150
- className: Table_default.tableViewport,
2151
- style: !fillViewportActive ? { overflow: "visible" } : void 0,
2152
- children: tableShell
2153
- }
2154
- ),
2155
- paginationEl
2156
- ]
2157
- }
2158
- );
2159
- }
2160
- return /* @__PURE__ */ jsxRuntime.jsxs(
2161
- "div",
2162
- {
2163
- className: "dbc-flex dbc-flex-column dbc-gap-md",
2164
- style: {
2165
- flexFlow: paginationPlacement === "top" ? "column-reverse" : "column",
2166
- position: "relative"
2167
- },
2168
- children: [
2169
- toolbar ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: Table_default.toolbarSlot, children: toolbar }) : null,
2170
- tableShell,
2171
- paginationEl
2172
- ]
2173
- }
2174
- );
2175
- }
2176
-
2177
- // src/components/table/tanstackTable.utils.ts
2178
- function getColumnId(def, index) {
2179
- const d = def;
2180
- if (d.id != null && String(d.id).length > 0) return String(d.id);
2181
- if (d.accessorKey != null && String(d.accessorKey).length > 0) return String(d.accessorKey);
2182
- return `col_${index}`;
2183
- }
2184
- function buildColumnVisibilityFromVisibleIds(defs, visibleColumnIds) {
2185
- if (!(visibleColumnIds == null ? void 0 : visibleColumnIds.length)) return {};
2186
- const visible = new Set(visibleColumnIds);
2187
- const next = {};
2188
- defs.forEach((def, index) => {
2189
- const id = getColumnId(def, index);
2190
- next[id] = visible.has(id);
2191
- });
2192
- return next;
2193
- }
2194
- function mapDefsToColumnItems(defs, columnVisibility, resolvedLayout = {}) {
2195
- return defs.map((def, index) => {
2196
- var _a, _b, _c, _d, _e, _f, _g;
2197
- const id = getColumnId(def, index);
2198
- const accessorKey = def.accessorKey;
2199
- const accessorFn = def.accessorFn;
2200
- const cell = def.cell;
2201
- const meta = (_a = def.meta) != null ? _a : {};
2202
- let render;
2203
- if (typeof cell === "function") {
2204
- render = (row) => cell({
2205
- row: { original: row },
2206
- getValue: () => accessorKey != null ? row[accessorKey] : accessorFn ? accessorFn(row) : void 0
2207
- });
2208
- } else if (accessorFn) {
2209
- render = (row) => accessorFn(row);
2210
- } else if (accessorKey != null) {
2211
- render = (row) => row[accessorKey];
2212
- } else {
2213
- render = () => null;
2214
- }
2215
- const isVisible = (_b = columnVisibility[id]) != null ? _b : true;
2216
- return {
2217
- id,
2218
- header: def.header,
2219
- accessor: accessorKey,
2220
- sortable: (_c = def.enableSorting) != null ? _c : !!accessorKey,
2221
- render,
2222
- hidden: !isVisible,
2223
- width: (_d = resolvedLayout[id]) == null ? void 0 : _d.width,
2224
- align: meta.align,
2225
- verticalAlign: meta.verticalAlign,
2226
- emptyPlaceholder: (_e = meta.emptyPlaceholder) != null ? _e : "-",
2227
- allowWrap: (_f = meta.allowWrap) != null ? _f : false,
2228
- severity: meta.severity,
2229
- divider: meta.divider,
2230
- allowOverflow: (_g = meta.allowOverflow) != null ? _g : false
2231
- };
2232
- });
2233
- }
2234
- function sortingEqual(a, b) {
2235
- const A = a == null ? void 0 : a[0];
2236
- const B = b == null ? void 0 : b[0];
2237
- if (!A && !B) return true;
2238
- if (!A || !B) return false;
2239
- return A.id === B.id && A.desc === B.desc;
2240
- }
2241
- function getSortPropsFromSorting(sorting) {
2242
- const s = sorting == null ? void 0 : sorting[0];
2243
- return {
2244
- sortById: s == null ? void 0 : s.id,
2245
- sortDirection: s ? s.desc ? "desc" : "asc" : null
2246
- };
2247
- }
2248
- function clamp(value, min, max) {
2249
- const lowerBounded = Math.max(min, value);
2250
- if (max == null || !Number.isFinite(max)) return lowerBounded;
2251
- return Math.min(lowerBounded, max);
2252
- }
2253
- function toIntegerTrackWidths(tracks, targetWidth) {
2254
- const floored = tracks.map((track) => ({
2255
- id: track.id,
2256
- width: Math.floor(track.width),
2257
- fraction: track.width - Math.floor(track.width)
2258
- }));
2259
- const baseTotal = floored.reduce((sum, track) => sum + track.width, 0);
2260
- let remainder = Math.max(0, targetWidth - baseTotal);
2261
- floored.slice().sort((a, b) => b.fraction - a.fraction).forEach((track) => {
2262
- if (remainder <= 0) return;
2263
- track.width += 1;
2264
- remainder -= 1;
2265
- });
2266
- return Object.fromEntries(floored.map((track) => [track.id, track.width]));
2267
- }
2268
- function buildDistributedColumnWidths(args) {
2269
- const { table, hasSelection, defaultMinPx, columnSizing, availableWidth } = args;
2270
- const leaf = table.getVisibleLeafColumns();
2271
- const selectionWidth = hasSelection ? SELECTION_COLUMN_PX : 0;
2272
- const tracks = leaf.map((c) => {
2273
- var _a, _b, _c, _d;
2274
- const def = c.columnDef;
2275
- const meta = (_a = def.meta) != null ? _a : {};
2276
- const min = Math.max(1, Number((_b = def.minSize) != null ? _b : defaultMinPx));
2277
- const max = def.maxSize != null ? Math.max(min, Number(def.maxSize)) : void 0;
2278
- const resizedPxRaw = columnSizing[c.id];
2279
- const resizedPx = resizedPxRaw != null ? Math.round(clamp(Number(resizedPxRaw), min, max)) : void 0;
2280
- if (resizedPx != null) {
2281
- return {
2282
- id: c.id,
2283
- width: resizedPx,
2284
- weight: 0,
2285
- max: resizedPx,
2286
- fixed: true
2287
- };
2288
- }
2289
- const rawWeight = Number((_d = (_c = meta.weight) != null ? _c : def.size) != null ? _d : DEFAULT_COLUMN_PX);
2290
- const weight = Number.isFinite(rawWeight) && rawWeight > 0 ? rawWeight : DEFAULT_COLUMN_PX;
2291
- return {
2292
- id: c.id,
2293
- width: min,
2294
- weight,
2295
- max,
2296
- fixed: false
2297
- };
2298
- });
2299
- const fixedWidth = selectionWidth + tracks.reduce((sum, track) => sum + track.width, 0);
2300
- let remaining = Math.max(0, availableWidth - fixedWidth);
2301
- let active = tracks.filter(
2302
- (track) => !track.fixed && (track.max == null || track.width < track.max)
2303
- );
2304
- while (remaining > 0.5 && active.length > 0) {
2305
- const totalWeight = active.reduce((sum, track) => sum + track.weight, 0);
2306
- if (totalWeight <= 0) break;
2307
- let consumed = 0;
2308
- const nextActive = [];
2309
- for (const track of active) {
2310
- const share = remaining * track.weight / totalWeight;
2311
- const maxGrow = track.max == null ? share : Math.max(0, track.max - track.width);
2312
- const growth = Math.min(share, maxGrow);
2313
- track.width += growth;
2314
- consumed += growth;
2315
- if (track.max == null || track.width < track.max - 0.5) {
2316
- nextActive.push(track);
2317
- }
2318
- }
2319
- if (consumed <= 0.5) break;
2320
- remaining -= consumed;
2321
- active = nextActive;
2322
- }
2323
- const floatTrackTotal = tracks.reduce((sum, track) => sum + track.width, 0);
2324
- const targetTrackWidth = floatTrackTotal <= availableWidth - selectionWidth ? Math.floor(floatTrackTotal) : Math.ceil(floatTrackTotal);
2325
- const widths = toIntegerTrackWidths(tracks, targetTrackWidth);
2326
- const totalWidth = selectionWidth + Object.values(widths).reduce((sum, width) => sum + width, 0);
2327
- return {
2328
- selectionWidth: hasSelection ? SELECTION_COLUMN_PX : void 0,
2329
- widths,
2330
- totalWidth
2331
- };
2332
- }
2333
- function TanstackTable(props) {
2334
- const {
2335
- data,
2336
- dataKey,
2337
- columns,
2338
- sorting: controlledSorting,
2339
- onSortingChange,
2340
- optimisticSortingUi = true,
2341
- visibleColumnIds,
2342
- manualSorting,
2343
- selectedRows,
2344
- onRowSelect,
2345
- ...tableProps
2346
- } = props;
2347
- const isControlledSorting = controlledSorting != null;
2348
- const [uiSorting, setUiSorting] = React8__namespace.useState(controlledSorting != null ? controlledSorting : []);
2349
- React8__namespace.useEffect(() => {
2350
- if (!isControlledSorting) return;
2351
- if (sortingEqual(uiSorting, controlledSorting)) return;
2352
- setUiSorting(controlledSorting);
2353
- }, [isControlledSorting, controlledSorting, uiSorting]);
2354
- const columnVisibility = React8__namespace.useMemo(
2355
- () => buildColumnVisibilityFromVisibleIds(columns, visibleColumnIds),
2356
- [columns, visibleColumnIds]
2357
- );
2358
- const [columnSizing, setColumnSizing] = React8__namespace.useState({});
2359
- const containerRef = React8__namespace.useRef(null);
2360
- const [availableWidth, setAvailableWidth] = React8__namespace.useState(void 0);
2361
- const table = reactTable.useReactTable({
2362
- data,
2363
- columns,
2364
- state: {
2365
- sorting: uiSorting,
2366
- columnSizing,
2367
- columnVisibility
2368
- },
2369
- onSortingChange: (updater) => {
2370
- const next = typeof updater === "function" ? updater(uiSorting) : updater;
2371
- if (optimisticSortingUi) setUiSorting(next);
2372
- onSortingChange == null ? void 0 : onSortingChange(next);
2373
- },
2374
- onColumnSizingChange: setColumnSizing,
2375
- getCoreRowModel: reactTable.getCoreRowModel(),
2376
- getSortedRowModel: reactTable.getSortedRowModel(),
2377
- manualSorting: manualSorting != null ? manualSorting : false,
2378
- enableColumnResizing: true,
2379
- columnResizeMode: "onChange",
2380
- defaultColumn: {
2381
- enableResizing: true,
2382
- minSize: 80,
2383
- size: DEFAULT_COLUMN_PX
2384
- }
2385
- });
2386
- React8__namespace.useLayoutEffect(() => {
2387
- const el = containerRef.current;
2388
- if (!el) return;
2389
- const updateWidth = () => {
2390
- const next = el.clientWidth;
2391
- setAvailableWidth(next > 0 ? next : void 0);
2392
- };
2393
- updateWidth();
2394
- if (typeof ResizeObserver === "undefined") {
2395
- window.addEventListener("resize", updateWidth);
2396
- return () => window.removeEventListener("resize", updateWidth);
2397
- }
2398
- const observer = new ResizeObserver(() => updateWidth());
2399
- observer.observe(el);
2400
- return () => observer.disconnect();
2401
- }, []);
2402
- const distributedLayout = React8__namespace.useMemo(() => {
2403
- if (availableWidth == null) return null;
2404
- return buildDistributedColumnWidths({
2405
- table,
2406
- hasSelection: Boolean(selectedRows && onRowSelect && dataKey),
2407
- defaultMinPx: 80,
2408
- columnSizing,
2409
- availableWidth
2410
- });
2411
- }, [table, selectedRows, onRowSelect, dataKey, columnSizing, availableWidth]);
2412
- const initialLayoutReady = availableWidth != null;
2413
- const resolvedLayout = React8__namespace.useMemo(() => {
2414
- const next = {};
2415
- table.getVisibleLeafColumns().forEach((column) => {
2416
- next[column.id] = {
2417
- width: distributedLayout == null ? void 0 : distributedLayout.widths[column.id]
2418
- };
2419
- });
2420
- return next;
2421
- }, [table, distributedLayout]);
2422
- const columnItems = React8__namespace.useMemo(
2423
- () => mapDefsToColumnItems(columns, columnVisibility, resolvedLayout),
2424
- [columns, columnVisibility, resolvedLayout]
2425
- );
2426
- const visibleData = table.getRowModel().rows.map((r) => r.original);
2427
- const { sortById, sortDirection } = getSortPropsFromSorting(uiSorting);
2428
- const handleSortChange = React8__namespace.useCallback(
2429
- (column, direction) => {
2430
- const next = direction == null ? [] : [{ id: column.id, desc: direction === "desc" }];
2431
- if (optimisticSortingUi) setUiSorting(next);
2432
- onSortingChange == null ? void 0 : onSortingChange(next);
2433
- },
2434
- [optimisticSortingUi, onSortingChange]
2435
- );
2436
- const headerExtras = React8__namespace.useCallback(
2437
- ({ index }) => {
2438
- var _a, _b, _c, _d;
2439
- const headerGroups = table.getHeaderGroups();
2440
- const leafHeaders = headerGroups.length > 0 ? headerGroups[headerGroups.length - 1].headers : [];
2441
- const header = leafHeaders[index];
2442
- if (!header) return null;
2443
- const canResize = (_c = (_b = (_a = header.column).getCanResize) == null ? void 0 : _b.call(_a)) != null ? _c : false;
2444
- const handler = (_d = header.getResizeHandler) == null ? void 0 : _d.call(header);
2445
- if (!canResize || !handler) return null;
2446
- return /* @__PURE__ */ jsxRuntime.jsx(ColumnResizer_default2, { id: header.column.id, handler });
2447
- },
2448
- [table]
2449
- );
2450
- return /* @__PURE__ */ jsxRuntime.jsx(
2451
- Table,
2452
- {
2453
- ...tableProps,
2454
- tableRootRef: containerRef,
2455
- onSortChange: handleSortChange,
2456
- dataKey,
2457
- data: visibleData,
2458
- columns: columnItems,
2459
- tableWidth: distributedLayout == null ? void 0 : distributedLayout.totalWidth,
2460
- measuringLayout: !initialLayoutReady,
2461
- sortById,
2462
- sortDirection,
2463
- headerExtras,
2464
- selectedRows,
2465
- onRowSelect
2466
- }
2467
- );
2468
- }
2469
- function TableSettings({
2470
- viewMode,
2471
- handleChangeViewMode,
2472
- columns = [],
2473
- visibleColumnIds = [],
2474
- onVisibleColumnIdsChange,
2475
- columnsLabel = "Kolonner",
2476
- allPresetLabel = "Alle",
2477
- standardPresetLabel = "Standard",
2478
- buttonSize = "sm",
2479
- additionalSettings
2480
- }) {
2481
- const handleViewModeChange = (mode, close) => {
2482
- handleChangeViewMode(mode === "wrapped" ? "compact" : "wrapped");
2483
- close == null ? void 0 : close();
2484
- };
2485
- const hideableColumns = React8.useMemo(() => columns.filter((c) => c.enableHiding !== false), [columns]);
2486
- const allPresetIds = React8.useMemo(() => hideableColumns.map((c) => c.id), [hideableColumns]);
2487
- const standardPresetIds = React8.useMemo(
2488
- () => hideableColumns.filter((c) => {
2489
- var _a;
2490
- return ((_a = c.meta) == null ? void 0 : _a.hidden) !== true;
2491
- }).map((c) => c.id),
2492
- [hideableColumns]
2493
- );
2494
- const visibleSet = React8.useMemo(() => new Set(visibleColumnIds), [visibleColumnIds]);
2495
- const visibleCount = React8.useMemo(() => {
2496
- return hideableColumns.reduce((acc, c) => {
2497
- var _a;
2498
- return acc + (visibleSet.has((_a = c.id) != null ? _a : "") ? 1 : 0);
2499
- }, 0);
2500
- }, [hideableColumns, visibleSet]);
2501
- const setVisibleIds = (nextIds) => {
2502
- if (!onVisibleColumnIdsChange) return;
2503
- const safe = nextIds.length > 0 ? nextIds : standardPresetIds.length > 0 ? standardPresetIds : allPresetIds;
2504
- onVisibleColumnIdsChange(
2505
- safe.filter((id) => typeof id === "string" && Boolean(id))
2506
- );
2507
- };
2508
- const toggleColumn = (id, nextVisible) => {
2509
- const next = new Set(visibleColumnIds);
2510
- if (nextVisible) next.add(id);
2511
- else next.delete(id);
2512
- setVisibleIds(Array.from(next));
2513
- };
2514
- const isAllActive = React8.useMemo(() => {
2515
- if (!hideableColumns.length) return false;
2516
- return hideableColumns.every((c) => c.id && visibleSet.has(c.id));
2517
- }, [hideableColumns, visibleSet]);
2518
- const isStandardActive = React8.useMemo(() => {
2519
- if (!hideableColumns.length) return false;
2520
- const std = new Set(standardPresetIds);
2521
- return hideableColumns.every((c) => c.id && visibleSet.has(c.id) === std.has(c.id));
2522
- }, [hideableColumns, visibleSet, standardPresetIds]);
2523
- const presetRadioName = "table-columns-preset";
2524
- return /* @__PURE__ */ jsxRuntime.jsx(
2525
- Popover,
2526
- {
2527
- trigger: (onClick, icon) => /* @__PURE__ */ jsxRuntime.jsxs(Button, { size: buttonSize, onClick, type: "button", children: [
2528
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, {}),
2529
- icon
2530
- ] }),
2531
- children: (close) => /* @__PURE__ */ jsxRuntime.jsxs(Menu, { children: [
2532
- additionalSettings == null ? void 0 : additionalSettings(close),
2533
- /* @__PURE__ */ jsxRuntime.jsx(Menu.Item, { active: viewMode === "wrapped", children: /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: () => handleViewModeChange(viewMode, close), children: [
2534
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListChevronsDownUp, {}),
2535
- "Ombryd tekst"
2536
- ] }) }),
2537
- hideableColumns.length > 0 && onVisibleColumnIdsChange ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
2538
- /* @__PURE__ */ jsxRuntime.jsx(Menu.Separator, {}),
2539
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "6px 10px", fontSize: 12, opacity: 0.7 }, children: columnsLabel }),
2540
- /* @__PURE__ */ jsxRuntime.jsx(
2541
- Menu.RadioItem,
2542
- {
2543
- name: presetRadioName,
2544
- value: "all",
2545
- checked: isAllActive,
2546
- label: allPresetLabel,
2547
- onValueChange: () => {
2548
- setVisibleIds(
2549
- allPresetIds.filter((id) => typeof id === "string" && Boolean(id))
2550
- );
2551
- close == null ? void 0 : close();
2552
- }
2553
- }
2554
- ),
2555
- /* @__PURE__ */ jsxRuntime.jsx(
2556
- Menu.RadioItem,
2557
- {
2558
- name: presetRadioName,
2559
- value: "standard",
2560
- checked: isStandardActive,
2561
- label: standardPresetLabel,
2562
- onValueChange: () => {
2563
- setVisibleIds(
2564
- standardPresetIds.filter(
2565
- (id) => typeof id === "string" && Boolean(id)
2566
- )
2567
- );
2568
- close == null ? void 0 : close();
2569
- }
2570
- }
2571
- ),
2572
- /* @__PURE__ */ jsxRuntime.jsx(Menu.Separator, {}),
2573
- hideableColumns.map((col) => {
2574
- const isVisible = col.id ? visibleSet.has(col.id) : false;
2575
- const disableUncheckingLast = isVisible && visibleCount <= 1;
2576
- const label = col.header;
2577
- return /* @__PURE__ */ jsxRuntime.jsx(
2578
- Menu.CheckItem,
2579
- {
2580
- checked: isVisible,
2581
- disabled: disableUncheckingLast,
2582
- label,
2583
- onCheckedChange: (nextChecked) => {
2584
- if (disableUncheckingLast) return;
2585
- toggleColumn(col.id, nextChecked);
2586
- }
2587
- },
2588
- col.id
2589
- );
2590
- })
2591
- ] }) : null
2592
- ] })
2593
- }
2594
- );
2595
- }
2596
-
2597
- // src/utils/localStorage.utils.ts
2598
- function isBrowser() {
2599
- return typeof window !== "undefined" && typeof window.localStorage !== "undefined";
2600
- }
2601
- function readLocalStorage(key) {
2602
- if (!isBrowser()) return void 0;
2603
- try {
2604
- const raw = window.localStorage.getItem(key);
2605
- if (raw == null) return void 0;
2606
- try {
2607
- const parsed = JSON.parse(raw);
2608
- if (typeof parsed === "string") {
2609
- try {
2610
- return JSON.parse(parsed);
2611
- } catch {
2612
- return parsed;
2613
- }
2614
- }
2615
- return parsed;
2616
- } catch {
2617
- return raw;
2618
- }
2619
- } catch {
2620
- return void 0;
2621
- }
2622
- }
2623
- function writeLocalStorage(key, value) {
2624
- if (!isBrowser()) return;
2625
- try {
2626
- if (value === void 0) {
2627
- window.localStorage.removeItem(key);
2628
- return;
2629
- }
2630
- if (typeof value === "string") {
2631
- window.localStorage.setItem(key, value);
2632
- } else {
2633
- window.localStorage.setItem(key, JSON.stringify(value));
2634
- }
2635
- } catch {
2636
- }
2637
- }
2638
-
2639
- // src/hooks/useTableSettings.tsx
2640
- function getDefaultVisibleIds(tableColumns) {
2641
- var _a;
2642
- return (_a = tableColumns == null ? void 0 : tableColumns.filter((c) => {
2643
- var _a2;
2644
- return !((_a2 = c.meta) == null ? void 0 : _a2.hidden);
2645
- }).map((c) => c.id).filter(Boolean)) != null ? _a : [];
2646
- }
2647
- function mergeDefaults(stored, defaults) {
2648
- const viewMode = (stored == null ? void 0 : stored.viewMode) === "compact" || (stored == null ? void 0 : stored.viewMode) === "wrapped" ? stored.viewMode : defaults.viewMode;
2649
- const visibleColumnIds = Array.isArray(stored == null ? void 0 : stored.visibleColumnIds) && stored.visibleColumnIds.length > 0 ? stored.visibleColumnIds : defaults.visibleColumnIds;
2650
- return { viewMode, visibleColumnIds };
2651
- }
2652
- var localStorageTableSettingsStorage = {
2653
- get: (key) => {
2654
- const v = readLocalStorage(key);
2655
- return v && typeof v === "object" ? v : void 0;
2656
- },
2657
- set: (key, next) => {
2658
- writeLocalStorage(key, next);
2659
- }
2660
- };
2661
- function useTableSettings({
2662
- storageKey,
2663
- tableColumns,
2664
- defaultViewMode = "compact",
2665
- defaultVisibleColumnIds,
2666
- storage = localStorageTableSettingsStorage
2667
- }) {
2668
- const defaults = React8.useMemo(() => {
2669
- return {
2670
- viewMode: defaultViewMode,
2671
- visibleColumnIds: defaultVisibleColumnIds != null ? defaultVisibleColumnIds : getDefaultVisibleIds(tableColumns)
2672
- };
2673
- }, [defaultViewMode, defaultVisibleColumnIds, tableColumns]);
2674
- const [state, setState] = React8.useState(defaults);
2675
- React8.useEffect(() => {
2676
- const stored = storage.get(storageKey);
2677
- const next = mergeDefaults(stored, defaults);
2678
- setState(next);
2679
- }, [storageKey, storage, defaults]);
2680
- const persist = React8.useCallback(
2681
- (next) => storage.set(storageKey, next),
2682
- [storage, storageKey]
2683
- );
2684
- const setViewMode = React8.useCallback(
2685
- (mode) => {
2686
- setState((prev) => {
2687
- if (prev.viewMode === mode) return prev;
2688
- const next = { ...prev, viewMode: mode };
2689
- persist(next);
2690
- return next;
2691
- });
2692
- },
2693
- [persist]
2694
- );
2695
- const toggleViewMode = React8.useCallback(() => {
2696
- setState((prev) => {
2697
- const nextMode = prev.viewMode === "wrapped" ? "compact" : "wrapped";
2698
- const next = { ...prev, viewMode: nextMode };
2699
- persist(next);
2700
- return next;
2701
- });
2702
- }, [persist]);
2703
- const setVisibleColumnIds = React8.useCallback(
2704
- (ids) => {
2705
- setState((prev) => {
2706
- const next = { ...prev, visibleColumnIds: ids };
2707
- persist(next);
2708
- return next;
2709
- });
2710
- },
2711
- [persist]
2712
- );
2713
- return {
2714
- viewMode: state.viewMode,
2715
- toggleViewMode,
2716
- setViewMode,
2717
- visibleColumnIds: state.visibleColumnIds,
2718
- setVisibleColumnIds
2719
- };
2720
- }
2721
-
2722
- exports.TableSettings = TableSettings;
2723
- exports.TanstackTable = TanstackTable;
2724
- exports.localStorageTableSettingsStorage = localStorageTableSettingsStorage;
2725
- exports.useTableSettings = useTableSettings;