@dbcdk/react-components 0.0.102 → 0.0.104

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