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