@navikt/ds-react 8.10.3 → 8.10.5

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 (242) hide show
  1. package/cjs/action-menu/ActionMenu.js +1 -1
  2. package/cjs/action-menu/ActionMenu.js.map +1 -1
  3. package/cjs/data/drag-and-drop/drag-handler/DragAndDropDragHandler.js +11 -12
  4. package/cjs/data/drag-and-drop/drag-handler/DragAndDropDragHandler.js.map +1 -1
  5. package/cjs/data/drag-and-drop/root/DragAndDrop.context.d.ts +4 -2
  6. package/cjs/data/drag-and-drop/root/DragAndDrop.context.js.map +1 -1
  7. package/cjs/data/drag-and-drop/root/DragAndDropRoot.d.ts +5 -5
  8. package/cjs/data/drag-and-drop/root/DragAndDropRoot.js +49 -28
  9. package/cjs/data/drag-and-drop/root/DragAndDropRoot.js.map +1 -1
  10. package/cjs/data/drag-and-drop/types.d.ts +0 -4
  11. package/cjs/data/{drag-and-drop-old/drag-handler/DataDragAndDropDragHandler.d.ts → drag-and-drop-legacy/drag-handler/DragAndDropDragHandlerLegacy.d.ts} +3 -3
  12. package/cjs/data/{drag-and-drop-old/drag-handler/DataDragAndDropDragHandler.js → drag-and-drop-legacy/drag-handler/DragAndDropDragHandlerLegacy.js} +5 -5
  13. package/cjs/data/drag-and-drop-legacy/drag-handler/DragAndDropDragHandlerLegacy.js.map +1 -0
  14. package/cjs/data/drag-and-drop-legacy/item/DragAndDropItemLegacy.d.ts +27 -0
  15. package/cjs/data/{drag-and-drop-old/item/DataDragAndDropItem.js → drag-and-drop-legacy/item/DragAndDropItemLegacy.js} +12 -12
  16. package/cjs/data/drag-and-drop-legacy/item/DragAndDropItemLegacy.js.map +1 -0
  17. package/cjs/data/drag-and-drop-legacy/root/DragAndDropLegacy.context.d.ts +5 -0
  18. package/cjs/data/drag-and-drop-legacy/root/DragAndDropLegacy.context.js +6 -0
  19. package/cjs/data/drag-and-drop-legacy/root/DragAndDropLegacy.context.js.map +1 -0
  20. package/cjs/data/drag-and-drop-legacy/root/DragAndDropLegacyRoot.d.ts +24 -0
  21. package/cjs/data/{drag-and-drop-old/root/DataDragAndDropRoot.js → drag-and-drop-legacy/root/DragAndDropLegacyRoot.js} +10 -10
  22. package/cjs/data/drag-and-drop-legacy/root/DragAndDropLegacyRoot.js.map +1 -0
  23. package/cjs/data/stories/Data.test-data.d.ts +24 -0
  24. package/cjs/data/stories/Data.test-data.js +1615 -0
  25. package/cjs/data/stories/Data.test-data.js.map +1 -0
  26. package/cjs/data/table/column-header/DataTableColumnHeader.d.ts +4 -1
  27. package/cjs/data/table/column-header/DataTableColumnHeader.js +4 -4
  28. package/cjs/data/table/column-header/DataTableColumnHeader.js.map +1 -1
  29. package/cjs/data/table/column-header/useTableColumnResize.d.ts +21 -18
  30. package/cjs/data/table/column-header/useTableColumnResize.js +7 -25
  31. package/cjs/data/table/column-header/useTableColumnResize.js.map +1 -1
  32. package/cjs/data/table/details-panel-row/DataTableDetailsPanelRow.d.ts +6 -0
  33. package/cjs/data/table/details-panel-row/DataTableDetailsPanelRow.js +32 -0
  34. package/cjs/data/table/details-panel-row/DataTableDetailsPanelRow.js.map +1 -0
  35. package/cjs/data/table/helpers/collectTableRowEntries.d.ts +9 -7
  36. package/cjs/data/table/helpers/collectTableRowEntries.js +21 -14
  37. package/cjs/data/table/helpers/collectTableRowEntries.js.map +1 -1
  38. package/cjs/data/table/helpers/table-focus.d.ts +0 -3
  39. package/cjs/data/table/helpers/table-focus.js +38 -8
  40. package/cjs/data/table/helpers/table-focus.js.map +1 -1
  41. package/cjs/data/table/hooks/useColumnOptions.js +18 -5
  42. package/cjs/data/table/hooks/useColumnOptions.js.map +1 -1
  43. package/cjs/data/table/hooks/useGridCache.js +2 -2
  44. package/cjs/data/table/hooks/useGridCache.js.map +1 -1
  45. package/cjs/data/table/hooks/useTableDetailsPanel.d.ts +62 -0
  46. package/cjs/data/table/hooks/{useTableExpansion.js → useTableDetailsPanel.js} +21 -20
  47. package/cjs/data/table/hooks/useTableDetailsPanel.js.map +1 -0
  48. package/cjs/data/table/hooks/useTableItems.d.ts +14 -17
  49. package/cjs/data/table/hooks/useTableItems.js +17 -16
  50. package/cjs/data/table/hooks/useTableItems.js.map +1 -1
  51. package/cjs/data/table/hooks/useTableKeyboardNav.js +5 -1
  52. package/cjs/data/table/hooks/useTableKeyboardNav.js.map +1 -1
  53. package/cjs/data/table/hooks/useTableSelection.d.ts +4 -2
  54. package/cjs/data/table/hooks/useTableSelection.js +6 -1
  55. package/cjs/data/table/hooks/useTableSelection.js.map +1 -1
  56. package/cjs/data/table/index.d.ts +1 -2
  57. package/cjs/data/table/index.js +22 -12
  58. package/cjs/data/table/index.js.map +1 -1
  59. package/cjs/data/table/root/DataTable.types.d.ts +7 -9
  60. package/cjs/data/table/root/DataTableRoot.context.d.ts +5 -1
  61. package/cjs/data/table/root/DataTableRoot.context.js.map +1 -1
  62. package/cjs/data/table/root/DataTableRoot.d.ts +79 -115
  63. package/cjs/data/table/root/DataTableRoot.js +163 -38
  64. package/cjs/data/table/root/DataTableRoot.js.map +1 -1
  65. package/cjs/data/table/root/DataTableRoot.legacy.d.ts +177 -0
  66. package/cjs/data/table/root/DataTableRoot.legacy.js +104 -0
  67. package/cjs/data/table/root/DataTableRoot.legacy.js.map +1 -0
  68. package/cjs/data/table/sub-row-toggle/DataTableSubRowToggle.d.ts +6 -0
  69. package/cjs/data/table/sub-row-toggle/DataTableSubRowToggle.js +21 -0
  70. package/cjs/data/table/sub-row-toggle/DataTableSubRowToggle.js.map +1 -0
  71. package/cjs/data/table/tr/DataTableTr.js +11 -11
  72. package/cjs/data/table/tr/DataTableTr.js.map +1 -1
  73. package/cjs/utils/components/dismissablelayer/DismissableLayer.js +1 -1
  74. package/cjs/utils/components/dismissablelayer/DismissableLayer.js.map +1 -1
  75. package/cjs/utils/components/floating/Floating.d.ts +16 -1
  76. package/cjs/utils/components/floating/Floating.js +50 -13
  77. package/cjs/utils/components/floating/Floating.js.map +1 -1
  78. package/cjs/utils/components/floating-menu/Menu.js +1 -1
  79. package/cjs/utils/components/floating-menu/Menu.js.map +1 -1
  80. package/cjs/utils/helpers/create-strict-context.js +1 -1
  81. package/cjs/utils/helpers/create-strict-context.js.map +1 -1
  82. package/cjs/utils/hooks/useControllableState.d.ts +5 -5
  83. package/cjs/utils/hooks/useControllableState.js.map +1 -1
  84. package/cjs/utils/hooks/useValueAsRef.js +1 -1
  85. package/cjs/utils/hooks/useValueAsRef.js.map +1 -1
  86. package/cjs/utils-external/hooks/useId.js +1 -1
  87. package/cjs/utils-external/hooks/useId.js.map +1 -1
  88. package/esm/action-menu/ActionMenu.js +1 -1
  89. package/esm/action-menu/ActionMenu.js.map +1 -1
  90. package/esm/data/drag-and-drop/drag-handler/DragAndDropDragHandler.js +11 -12
  91. package/esm/data/drag-and-drop/drag-handler/DragAndDropDragHandler.js.map +1 -1
  92. package/esm/data/drag-and-drop/root/DragAndDrop.context.d.ts +4 -2
  93. package/esm/data/drag-and-drop/root/DragAndDrop.context.js.map +1 -1
  94. package/esm/data/drag-and-drop/root/DragAndDropRoot.d.ts +5 -5
  95. package/esm/data/drag-and-drop/root/DragAndDropRoot.js +49 -28
  96. package/esm/data/drag-and-drop/root/DragAndDropRoot.js.map +1 -1
  97. package/esm/data/drag-and-drop/types.d.ts +0 -4
  98. package/esm/data/{drag-and-drop-old/drag-handler/DataDragAndDropDragHandler.d.ts → drag-and-drop-legacy/drag-handler/DragAndDropDragHandlerLegacy.d.ts} +3 -3
  99. package/esm/data/{drag-and-drop-old/drag-handler/DataDragAndDropDragHandler.js → drag-and-drop-legacy/drag-handler/DragAndDropDragHandlerLegacy.js} +4 -4
  100. package/esm/data/drag-and-drop-legacy/drag-handler/DragAndDropDragHandlerLegacy.js.map +1 -0
  101. package/esm/data/drag-and-drop-legacy/item/DragAndDropItemLegacy.d.ts +27 -0
  102. package/esm/data/{drag-and-drop-old/item/DataDragAndDropItem.js → drag-and-drop-legacy/item/DragAndDropItemLegacy.js} +11 -11
  103. package/esm/data/drag-and-drop-legacy/item/DragAndDropItemLegacy.js.map +1 -0
  104. package/esm/data/drag-and-drop-legacy/root/DragAndDropLegacy.context.d.ts +5 -0
  105. package/esm/data/drag-and-drop-legacy/root/DragAndDropLegacy.context.js +3 -0
  106. package/esm/data/drag-and-drop-legacy/root/DragAndDropLegacy.context.js.map +1 -0
  107. package/esm/data/drag-and-drop-legacy/root/DragAndDropLegacyRoot.d.ts +24 -0
  108. package/esm/data/{drag-and-drop-old/root/DataDragAndDropRoot.js → drag-and-drop-legacy/root/DragAndDropLegacyRoot.js} +8 -8
  109. package/esm/data/drag-and-drop-legacy/root/DragAndDropLegacyRoot.js.map +1 -0
  110. package/esm/data/stories/Data.test-data.d.ts +24 -0
  111. package/esm/data/stories/Data.test-data.js +1606 -0
  112. package/esm/data/stories/Data.test-data.js.map +1 -0
  113. package/esm/data/table/column-header/DataTableColumnHeader.d.ts +4 -1
  114. package/esm/data/table/column-header/DataTableColumnHeader.js +4 -4
  115. package/esm/data/table/column-header/DataTableColumnHeader.js.map +1 -1
  116. package/esm/data/table/column-header/useTableColumnResize.d.ts +21 -18
  117. package/esm/data/table/column-header/useTableColumnResize.js +7 -25
  118. package/esm/data/table/column-header/useTableColumnResize.js.map +1 -1
  119. package/esm/data/table/details-panel-row/DataTableDetailsPanelRow.d.ts +6 -0
  120. package/esm/data/table/details-panel-row/DataTableDetailsPanelRow.js +27 -0
  121. package/esm/data/table/details-panel-row/DataTableDetailsPanelRow.js.map +1 -0
  122. package/esm/data/table/helpers/collectTableRowEntries.d.ts +9 -7
  123. package/esm/data/table/helpers/collectTableRowEntries.js +21 -14
  124. package/esm/data/table/helpers/collectTableRowEntries.js.map +1 -1
  125. package/esm/data/table/helpers/table-focus.d.ts +0 -3
  126. package/esm/data/table/helpers/table-focus.js +38 -8
  127. package/esm/data/table/helpers/table-focus.js.map +1 -1
  128. package/esm/data/table/hooks/useColumnOptions.js +18 -5
  129. package/esm/data/table/hooks/useColumnOptions.js.map +1 -1
  130. package/esm/data/table/hooks/useGridCache.js +2 -2
  131. package/esm/data/table/hooks/useGridCache.js.map +1 -1
  132. package/esm/data/table/hooks/useTableDetailsPanel.d.ts +62 -0
  133. package/esm/data/table/hooks/{useTableExpansion.js → useTableDetailsPanel.js} +18 -17
  134. package/esm/data/table/hooks/useTableDetailsPanel.js.map +1 -0
  135. package/esm/data/table/hooks/useTableItems.d.ts +14 -17
  136. package/esm/data/table/hooks/useTableItems.js +17 -16
  137. package/esm/data/table/hooks/useTableItems.js.map +1 -1
  138. package/esm/data/table/hooks/useTableKeyboardNav.js +6 -2
  139. package/esm/data/table/hooks/useTableKeyboardNav.js.map +1 -1
  140. package/esm/data/table/hooks/useTableSelection.d.ts +4 -2
  141. package/esm/data/table/hooks/useTableSelection.js +6 -1
  142. package/esm/data/table/hooks/useTableSelection.js.map +1 -1
  143. package/esm/data/table/index.d.ts +1 -2
  144. package/esm/data/table/index.js +21 -1
  145. package/esm/data/table/index.js.map +1 -1
  146. package/esm/data/table/root/DataTable.types.d.ts +7 -9
  147. package/esm/data/table/root/DataTableRoot.context.d.ts +5 -1
  148. package/esm/data/table/root/DataTableRoot.context.js.map +1 -1
  149. package/esm/data/table/root/DataTableRoot.d.ts +79 -115
  150. package/esm/data/table/root/DataTableRoot.js +170 -36
  151. package/esm/data/table/root/DataTableRoot.js.map +1 -1
  152. package/esm/data/table/root/DataTableRoot.legacy.d.ts +177 -0
  153. package/esm/data/table/root/DataTableRoot.legacy.js +59 -0
  154. package/esm/data/table/root/DataTableRoot.legacy.js.map +1 -0
  155. package/esm/data/table/sub-row-toggle/DataTableSubRowToggle.d.ts +6 -0
  156. package/esm/data/table/sub-row-toggle/DataTableSubRowToggle.js +16 -0
  157. package/esm/data/table/sub-row-toggle/DataTableSubRowToggle.js.map +1 -0
  158. package/esm/data/table/tr/DataTableTr.js +11 -11
  159. package/esm/data/table/tr/DataTableTr.js.map +1 -1
  160. package/esm/utils/components/dismissablelayer/DismissableLayer.js +1 -1
  161. package/esm/utils/components/dismissablelayer/DismissableLayer.js.map +1 -1
  162. package/esm/utils/components/floating/Floating.d.ts +16 -1
  163. package/esm/utils/components/floating/Floating.js +48 -13
  164. package/esm/utils/components/floating/Floating.js.map +1 -1
  165. package/esm/utils/components/floating-menu/Menu.js +2 -2
  166. package/esm/utils/components/floating-menu/Menu.js.map +1 -1
  167. package/esm/utils/helpers/create-strict-context.js +1 -1
  168. package/esm/utils/helpers/create-strict-context.js.map +1 -1
  169. package/esm/utils/hooks/useControllableState.d.ts +5 -5
  170. package/esm/utils/hooks/useControllableState.js.map +1 -1
  171. package/esm/utils/hooks/useValueAsRef.js +1 -1
  172. package/esm/utils/hooks/useValueAsRef.js.map +1 -1
  173. package/esm/utils-external/hooks/useId.js +1 -1
  174. package/esm/utils-external/hooks/useId.js.map +1 -1
  175. package/package.json +8 -7
  176. package/src/action-menu/ActionMenu.tsx +1 -1
  177. package/src/data/drag-and-drop/drag-handler/DragAndDropDragHandler.tsx +11 -16
  178. package/src/data/drag-and-drop/root/DragAndDrop.context.tsx +4 -2
  179. package/src/data/drag-and-drop/root/DragAndDropRoot.tsx +85 -40
  180. package/src/data/drag-and-drop/types.ts +0 -5
  181. package/src/data/{drag-and-drop-old/drag-handler/DataDragAndDropDragHandler.tsx → drag-and-drop-legacy/drag-handler/DragAndDropDragHandlerLegacy.tsx} +5 -5
  182. package/src/data/{drag-and-drop-old/item/DataDragAndDropItem.tsx → drag-and-drop-legacy/item/DragAndDropItemLegacy.tsx} +13 -13
  183. package/src/data/{drag-and-drop-old/root/DataDragAndDrop.context.tsx → drag-and-drop-legacy/root/DragAndDropLegacy.context.tsx} +3 -3
  184. package/src/data/{drag-and-drop-old/root/DataDragAndDropRoot.tsx → drag-and-drop-legacy/root/DragAndDropLegacyRoot.tsx} +19 -21
  185. package/src/data/stories/Data.test-data.tsx +1702 -0
  186. package/src/data/table/column-header/DataTableColumnHeader.tsx +8 -6
  187. package/src/data/table/column-header/useTableColumnResize.ts +29 -44
  188. package/src/data/table/details-panel-row/DataTableDetailsPanelRow.tsx +57 -0
  189. package/src/data/table/helpers/collectTableRowEntries.ts +36 -30
  190. package/src/data/table/helpers/table-focus.ts +63 -9
  191. package/src/data/table/hooks/__tests__/useTableItems.test.ts +58 -12
  192. package/src/data/table/hooks/__tests__/useTableSelection.test.ts +57 -44
  193. package/src/data/table/hooks/useColumnOptions.ts +19 -5
  194. package/src/data/table/hooks/useGridCache.ts +3 -2
  195. package/src/data/table/hooks/useTableDetailsPanel.tsx +185 -0
  196. package/src/data/table/hooks/useTableItems.ts +44 -52
  197. package/src/data/table/hooks/useTableKeyboardNav.ts +6 -2
  198. package/src/data/table/hooks/useTableSelection.ts +17 -6
  199. package/src/data/table/index.tsx +5 -3
  200. package/src/data/table/root/DataTable.types.ts +20 -9
  201. package/src/data/table/root/DataTableRoot.context.ts +5 -1
  202. package/src/data/table/root/DataTableRoot.legacy.tsx +297 -0
  203. package/src/data/table/root/DataTableRoot.tsx +484 -219
  204. package/src/data/table/root/agent-feature-gap.md +96 -0
  205. package/src/data/table/sub-row-toggle/DataTableSubRowToggle.tsx +39 -0
  206. package/src/data/table/tr/DataTableTr.tsx +14 -13
  207. package/src/utils/components/dismissablelayer/DismissableLayer.tsx +1 -1
  208. package/src/utils/components/floating/Floating.tsx +56 -13
  209. package/src/utils/components/floating-menu/Menu.tsx +4 -1
  210. package/src/utils/helpers/create-strict-context.tsx +1 -1
  211. package/src/utils/hooks/useControllableState.ts +11 -8
  212. package/src/utils/hooks/useValueAsRef.ts +1 -1
  213. package/src/utils-external/hooks/useId.ts +1 -1
  214. package/cjs/data/drag-and-drop-old/drag-handler/DataDragAndDropDragHandler.js.map +0 -1
  215. package/cjs/data/drag-and-drop-old/item/DataDragAndDropItem.d.ts +0 -27
  216. package/cjs/data/drag-and-drop-old/item/DataDragAndDropItem.js.map +0 -1
  217. package/cjs/data/drag-and-drop-old/root/DataDragAndDrop.context.d.ts +0 -5
  218. package/cjs/data/drag-and-drop-old/root/DataDragAndDrop.context.js +0 -6
  219. package/cjs/data/drag-and-drop-old/root/DataDragAndDrop.context.js.map +0 -1
  220. package/cjs/data/drag-and-drop-old/root/DataDragAndDropRoot.d.ts +0 -24
  221. package/cjs/data/drag-and-drop-old/root/DataDragAndDropRoot.js.map +0 -1
  222. package/cjs/data/table/hooks/useTableExpansion.d.ts +0 -27
  223. package/cjs/data/table/hooks/useTableExpansion.js.map +0 -1
  224. package/cjs/data/table/root/DataTableAuto.d.ts +0 -182
  225. package/cjs/data/table/root/DataTableAuto.js +0 -206
  226. package/cjs/data/table/root/DataTableAuto.js.map +0 -1
  227. package/esm/data/drag-and-drop-old/drag-handler/DataDragAndDropDragHandler.js.map +0 -1
  228. package/esm/data/drag-and-drop-old/item/DataDragAndDropItem.d.ts +0 -27
  229. package/esm/data/drag-and-drop-old/item/DataDragAndDropItem.js.map +0 -1
  230. package/esm/data/drag-and-drop-old/root/DataDragAndDrop.context.d.ts +0 -5
  231. package/esm/data/drag-and-drop-old/root/DataDragAndDrop.context.js +0 -3
  232. package/esm/data/drag-and-drop-old/root/DataDragAndDrop.context.js.map +0 -1
  233. package/esm/data/drag-and-drop-old/root/DataDragAndDropRoot.d.ts +0 -24
  234. package/esm/data/drag-and-drop-old/root/DataDragAndDropRoot.js.map +0 -1
  235. package/esm/data/table/hooks/useTableExpansion.d.ts +0 -27
  236. package/esm/data/table/hooks/useTableExpansion.js.map +0 -1
  237. package/esm/data/table/root/DataTableAuto.d.ts +0 -182
  238. package/esm/data/table/root/DataTableAuto.js +0 -170
  239. package/esm/data/table/root/DataTableAuto.js.map +0 -1
  240. package/src/data/table/hooks/useTableExpansion.tsx +0 -146
  241. package/src/data/table/root/DataTableAuto.test.tsx +0 -244
  242. package/src/data/table/root/DataTableAuto.tsx +0 -612
@@ -1,182 +0,0 @@
1
- /** biome-ignore-all lint/correctness/useHookAtTopLevel: False positive because of the way forwardRef() is added */
2
- import React from "react";
3
- import { type SelectionProps } from "../hooks/useTableSelection.js";
4
- import { type TableSortOptions } from "../hooks/useTableSort.js";
5
- import type { ColumnDefinitions } from "./DataTable.types.js";
6
- interface DataTableProps<T> extends React.HTMLAttributes<HTMLTableElement>, TableSortOptions {
7
- children?: never;
8
- /**
9
- * Controls vertical cell padding.
10
- * @default "normal"
11
- */
12
- rowDensity?: "condensed" | "normal" | "spacious";
13
- /**
14
- * Zebra striped table
15
- * @default false
16
- */
17
- zebraStripes?: boolean;
18
- /**
19
- * Truncate content in cells and show ellipsis for overflowed text.
20
- *
21
- * **NB:** When using `layout="auto"`, you have to manually set a `maxWidth` on columns that should be truncated.
22
- * @default true
23
- */
24
- truncateContent?: boolean;
25
- /**
26
- * Enables keyboard navigation for table rows and cells.
27
- * @default false
28
- */
29
- withKeyboardNav?: boolean;
30
- /**
31
- * Custom callback to determine if navigation should be blocked.
32
- * Called before default blocking logic.
33
- * Requires `withKeyboardNav` to be `true`.
34
- */
35
- shouldBlockNavigation?: (event: KeyboardEvent) => boolean;
36
- /**
37
- * Controls table layout.
38
- *
39
- * ### fixed
40
- * Gives you full control of column widths. This is required for resizable columns.
41
- *
42
- * ### auto
43
- * Makes the columns resize automatically based on the content.
44
- * The table will take up at least 100% of available width.
45
- *
46
- * **NB:** When using this with `truncateContent`, you have to manually
47
- * set a `contentMaxWidth` on cells that should be truncated.
48
- * @default "fixed"
49
- */
50
- layout?: "fixed" | "auto";
51
- /**
52
- * Defines the columns of the table and how to render them.
53
- *
54
- *
55
- * Each column definition should have a unique `id` (or use the column index as fallback) and a `cell`-renderer function that takes the row data as argument and returns a React node.
56
- */
57
- columnDefinitions: ColumnDefinitions<T>;
58
- /**
59
- * The data to display in the table.
60
- *
61
- *
62
- * Each object in the array represents a row, and the properties of the object are used to render the cells based on the `columnDefinitions`.
63
- */
64
- data: T[];
65
- /**
66
- * Function to get unique row id from row data.
67
- *
68
- *
69
- * If not provided, the row index will be used as id. This can cause issues if your data changes dynamically, so it's recommended to provide a stable id if possible.
70
- */
71
- getRowId?: (rowData: T, index: number) => string | number;
72
- /**
73
- * Sticky columns that remain visible when horizontally scrolling the table.
74
- *
75
- * You can specify 1 sticky column on the left and 1 on the right.
76
- */
77
- stickyColumns?: {
78
- first?: "1";
79
- last?: "1";
80
- };
81
- /**
82
- * @default false
83
- */
84
- stickyHeader?: boolean;
85
- /**
86
- * Callback invoked when a data row is clicked.
87
- * Not called when clicking header, loading, or empty-state rows.
88
- */
89
- onRowClick?: (rowId: string | number, event: React.MouseEvent<HTMLTableRowElement>) => void;
90
- /**
91
- * Content to render when `data` is empty.
92
- * Rendered inside a `DataTable.EmptyState` row spanning all columns.
93
- */
94
- emptyState?: React.ReactNode;
95
- /**
96
- * Shows the table in a loading state.
97
- *
98
- * - When `loadingState` is provided, it is rendered inside a `DataTable.LoadingState` row.
99
- * - When `loadingState` is **not** provided, skeleton placeholder rows are rendered instead.
100
- * @default false
101
- */
102
- isLoading?: boolean;
103
- /**
104
- * Custom content to render when `isLoading` is `true`.
105
- * Rendered inside a `DataTable.LoadingState` row spanning all columns.
106
- * When omitted, skeleton rows are rendered based on `loadingRows`.
107
- */
108
- loadingState?: React.ReactNode;
109
- /**
110
- * Number of skeleton rows to render when `isLoading` is `true` and no `loadingState` is provided.
111
- *
112
- *
113
- * If not provided, the rendered content will get a temporarily overlay while loading
114
- */
115
- loadingRows?: number;
116
- /**
117
- * Visually hidden label announced to screen readers when skeleton rows are shown.
118
- * Only used when `isLoading` is `true` and no `loadingState` is provided.
119
- * @default "Laster innhold"
120
- */
121
- loadingLabel?: string;
122
- /**
123
- * Renders a details panel below the row when expanded.
124
- * When provided, an expand toggle column is added automatically.
125
- */
126
- getDetailsPanelContent?: (rowData: T) => React.ReactNode;
127
- /**
128
- * Determines whether a row can be expanded to show details panel content.
129
- * @default () => true
130
- */
131
- isDetailsPanelExpandable?: (rowData: T) => boolean;
132
- /**
133
- * Controlled list of expanded row IDs.
134
- * Use with `onDetailsPanelChange` for controlled usage, or `defaultDetailsPanelRowIds` for uncontrolled.
135
- */
136
- detailsPanelRowIds?: (string | number)[];
137
- /**
138
- * Initial list of expanded row IDs for uncontrolled usage.
139
- * @default []
140
- */
141
- defaultDetailsPanelRowIds?: (string | number)[];
142
- /**
143
- * Called when the list of expanded row IDs changes.
144
- *
145
- *
146
- * TODO:
147
- * - Docs: This pattern is called "Master / Detail" in general terms
148
- */
149
- onDetailsPanelChange?: (ids: (string | number)[]) => void;
150
- /**
151
- * Returns the height (in px) or `"auto"` for a row's details panel.
152
- * When a number is returned, the panel scrolls within that fixed height.
153
- * @default "auto"
154
- */
155
- getDetailsPanelHeight?: (rowData: T) => number | "auto";
156
- /**
157
- * Shows an expand-all toggle button in the expand column header.
158
- * @default false
159
- */
160
- showExpandAll?: boolean;
161
- /**
162
- * Function to get sub-rows for a given row, used for nested rows.
163
- * When provided, an expand toggle column is added automatically.
164
- *
165
- *
166
- * TODO:
167
- * - Table might need to be implemented with role="treegrid" for a11y when having nested rows.
168
- */
169
- getSubRows?: (rowData: T) => T[];
170
- expandedSubRowIds?: (string | number)[];
171
- defaultExpandedSubRowIds?: (string | number)[];
172
- isSubRowExpandable?: (rowData: T) => boolean;
173
- onExpandedSubRowIdsChange?: (ids: (string | number)[]) => void;
174
- /**
175
- * Props for row selection functionality.
176
- */
177
- selection?: SelectionProps;
178
- }
179
- declare const DataTableAuto: <T>(props: DataTableProps<T> & React.RefAttributes<HTMLTableElement>) => React.ReactElement | null;
180
- export { DataTableAuto };
181
- export type { DataTableProps };
182
- export default DataTableAuto;
@@ -1,170 +0,0 @@
1
- var __rest = (this && this.__rest) || function (s, e) {
2
- var t = {};
3
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
- t[p] = s[p];
5
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
- t[p[i]] = s[p[i]];
9
- }
10
- return t;
11
- };
12
- /** biome-ignore-all lint/correctness/useHookAtTopLevel: False positive because of the way forwardRef() is added */
13
- import React, { forwardRef } from "react";
14
- import { ChevronDownIcon, ChevronRightIcon } from "@navikt/aksel-icons";
15
- import { Button } from "../../../button/index.js";
16
- import { Skeleton } from "../../../skeleton/index.js";
17
- import { useId } from "../../../utils-external/index.js";
18
- import { cl } from "../../../utils/helpers/index.js";
19
- import { useMergeRefs } from "../../../utils/hooks/index.js";
20
- import { DataTableBaseCell } from "../base-cell/DataTableBaseCell.js";
21
- import { DataTableColumnHeader } from "../column-header/DataTableColumnHeader.js";
22
- import { DataTableEmptyState } from "../empty-state/DataTableEmptyState.js";
23
- import { useColumnOptions } from "../hooks/useColumnOptions.js";
24
- import { DataTableExpansionProvider, getDataTableExpansionId, useDataTableExpansion, } from "../hooks/useTableExpansion.js";
25
- import { TableItemsProvider, useTableItems, useTableItemsContext, } from "../hooks/useTableItems.js";
26
- import { useTableKeyboardNav } from "../hooks/useTableKeyboardNav.js";
27
- import { useTableSelection, } from "../hooks/useTableSelection.js";
28
- import { useTableSort } from "../hooks/useTableSort.js";
29
- import { DataTableLoadingState } from "../loading-state/DataTableLoadingState.js";
30
- import { DataTableTbody } from "../tbody/DataTableTbody.js";
31
- import { DataTableThead } from "../thead/DataTableThead.js";
32
- import { DataTableTr } from "../tr/DataTableTr.js";
33
- import { DataTableContextProvider, useDataTableContext, } from "./DataTableRoot.context.js";
34
- function DataTableAutoInner(_a, forwardedRef) {
35
- var { className, id, rowDensity = "normal", withKeyboardNav = false, zebraStripes = false, truncateContent = true, shouldBlockNavigation, layout = "fixed", selection, data, columnDefinitions, getRowId, stickyColumns, stickyHeader = false, sort: sortProp, defaultSort = [], onSortChange, onRowClick, emptyState, isLoading = false, loadingState, loadingRows, loadingLabel = "Laster innhold", getDetailsPanelContent, isDetailsPanelExpandable, getDetailsPanelHeight, showExpandAll = false, detailsPanelRowIds, defaultDetailsPanelRowIds, onDetailsPanelChange, getSubRows, expandedSubRowIds, defaultExpandedSubRowIds, isSubRowExpandable, onExpandedSubRowIdsChange } = _a, rest = __rest(_a, ["className", "id", "rowDensity", "withKeyboardNav", "zebraStripes", "truncateContent", "shouldBlockNavigation", "layout", "selection", "data", "columnDefinitions", "getRowId", "stickyColumns", "stickyHeader", "sort", "defaultSort", "onSortChange", "onRowClick", "emptyState", "isLoading", "loadingState", "loadingRows", "loadingLabel", "getDetailsPanelContent", "isDetailsPanelExpandable", "getDetailsPanelHeight", "showExpandAll", "detailsPanelRowIds", "defaultDetailsPanelRowIds", "onDetailsPanelChange", "getSubRows", "expandedSubRowIds", "defaultExpandedSubRowIds", "isSubRowExpandable", "onExpandedSubRowIdsChange"]);
36
- const { tabIndex, setTableRef } = useTableKeyboardNav({
37
- enabled: withKeyboardNav,
38
- shouldBlockNavigation,
39
- });
40
- const { sortState, onSortClick } = useTableSort({
41
- defaultSort,
42
- onSortChange,
43
- sort: sortProp,
44
- });
45
- const mergedRef = useMergeRefs(forwardedRef, setTableRef);
46
- const tableItems = useTableItems({
47
- items: data,
48
- getRowId,
49
- getSubRows,
50
- expandedSubRowIds,
51
- defaultExpandedSubRowIds,
52
- isSubRowExpandable,
53
- onExpandedSubRowIdsChange,
54
- });
55
- const { selectionMode: selectionModeProp = "none", selectedKeys, defaultSelectedKeys, onSelectionChange, disabledSelectionKeys = [], disableRowSelectionOnClick = false, } = selection || {};
56
- const tableSelectionState = useTableSelection({
57
- selectionMode: selectionModeProp,
58
- selectedKeys,
59
- defaultSelectedKeys,
60
- onSelectionChange,
61
- disabledSelectionKeys,
62
- visibleRowIds: tableItems.visibleRowIds,
63
- childRowIdsById: tableItems.childRowIdsById,
64
- });
65
- const { columns, stickySelection } = useColumnOptions(columnDefinitions, {
66
- stickyColumns,
67
- selectionMode: tableSelectionState.selection.selectionMode,
68
- });
69
- const fullWidthColSpan = columns.length +
70
- (layout === "fixed" ? 1 : 0) +
71
- (tableSelectionState.selection.selectionMode !== "none" ? 1 : 0) +
72
- (getDetailsPanelContent ? 1 : 0);
73
- const tableId = useId(id);
74
- return (React.createElement(DataTableContextProvider, { layout: layout, withKeyboardNav: withKeyboardNav, selectionState: tableSelectionState, stickySelection: stickySelection, stickyHeader: stickyHeader, tableId: tableId, showLoadingSkeletons: isLoading && loadingState == null, onRowClick: onRowClick, disableRowSelectionOnClick: disableRowSelectionOnClick, isLoading: isLoading, showLoadingOverlay: isLoading && !loadingState && !loadingRows, columns: columns },
75
- React.createElement(TableItemsProvider, { itemDetails: tableItems.itemDetails, items: tableItems.items, onExpandedSubRowIdsChange: tableItems.onExpandedSubRowIdsChange, isSubRowExpanded: tableItems.isSubRowExpanded },
76
- React.createElement(DataTableExpansionProvider, { detailsPanelRowIds: detailsPanelRowIds, defaultDetailsPanelRowIds: defaultDetailsPanelRowIds, onDetailsPanelChange: onDetailsPanelChange, getDetailsPanelContent: getDetailsPanelContent, isDetailsPanelExpandable: isDetailsPanelExpandable, getDetailsPanelHeight: getDetailsPanelHeight, showExpandAll: showExpandAll },
77
- React.createElement("div", { className: "aksel-data-table__border-wrapper" },
78
- React.createElement("div", { className: "aksel-data-table__scroll-wrapper" },
79
- React.createElement("table", Object.assign({}, rest, { ref: mergedRef, className: cl("aksel-data-table", className), "data-zebra-stripes": zebraStripes, "data-truncate-content": truncateContent, "data-density": rowDensity, "data-layout": layout, "data-loading": isLoading || undefined, tabIndex: tabIndex, "aria-busy": isLoading || undefined }),
80
- React.createElement(DataTableThead, null,
81
- React.createElement(DataTableTr, null, columns.map(({ isSticky, colDef }) => {
82
- var _a, _b, _c;
83
- const sortEntry = sortState.find((s) => s.columnId === colDef.id);
84
- const sortDirection = (_a = sortEntry === null || sortEntry === void 0 ? void 0 : sortEntry.direction) !== null && _a !== void 0 ? _a : "none";
85
- return (React.createElement(DataTableColumnHeader, { maxWidth: colDef.maxWidth, minWidth: colDef.minWidth, width: colDef.width, defaultWidth: (_b = colDef.defaultWidth) !== null && _b !== void 0 ? _b : "100%", textAlign: (_c = colDef.align) !== null && _c !== void 0 ? _c : "left", key: colDef.id, isSticky: isSticky, sortable: colDef.sortable, sortDirection: sortDirection, onSortClick: (event) => onSortClick(colDef.id, event) }, colDef.header));
86
- }))),
87
- React.createElement(DataTableTbody, null,
88
- React.createElement(DataTableAutoTBodyContent, { loadingState: loadingState, loadingRows: loadingRows, loadingLabel: loadingLabel, emptyState: emptyState, fullWidthColSpan: fullWidthColSpan })))))))));
89
- }
90
- function DataTableAutoTBodyContent({ loadingState, loadingRows, loadingLabel, emptyState, fullWidthColSpan, }) {
91
- const { items, itemDetails } = useTableItemsContext();
92
- const { columns, isLoading } = useDataTableContext();
93
- if (isLoading && loadingState != null) {
94
- return (React.createElement(DataTableLoadingState, { colSpan: fullWidthColSpan }, loadingState));
95
- }
96
- if (isLoading && loadingRows) {
97
- return (React.createElement(React.Fragment, null,
98
- React.createElement("tr", null,
99
- React.createElement("td", { colSpan: fullWidthColSpan, className: "aksel-sr-only" }, loadingLabel)),
100
- Array.from({ length: loadingRows }, (_, rowIndex) => (React.createElement(DataTableTr, { key: `skeleton-row-${rowIndex}`, "aria-hidden": true }, columns.map(({ isSticky, colDef }, colDefIndex) => {
101
- var _a;
102
- return (React.createElement(DataTableBaseCell, { textAlign: (_a = colDef.align) !== null && _a !== void 0 ? _a : "left", key: colDef.id || colDefIndex, as: colDef.isRowHeader ? "th" : "td", isSticky: isSticky },
103
- React.createElement(Skeleton, { variant: "text" })));
104
- }))))));
105
- }
106
- if (items.length === 0 && emptyState !== undefined) {
107
- return (React.createElement(DataTableEmptyState, { colSpan: fullWidthColSpan }, emptyState));
108
- }
109
- const renderLoadingAnnouncement = isLoading && !loadingState && !loadingRows;
110
- return (React.createElement(React.Fragment, null,
111
- renderLoadingAnnouncement && (React.createElement("tr", null,
112
- React.createElement("td", { colSpan: fullWidthColSpan, className: "aksel-sr-only" }, loadingLabel))),
113
- items.map((rowData) => {
114
- const details = itemDetails.get(rowData);
115
- /* Should in theory be impossible. Look about typing this? */
116
- if (!details) {
117
- return null;
118
- }
119
- const hasSubRows = details.children.length > 0;
120
- return (React.createElement(React.Fragment, { key: details.id },
121
- React.createElement(DataTableTr, { rowId: details.id }, columns.map(({ isSticky, colDef }, colDefIndex) => {
122
- var _a;
123
- const renderNestedToggle = colDefIndex === 0 && hasSubRows;
124
- const renderNestedIndent = colDefIndex === 0 && (details.level > 0 || hasSubRows);
125
- const style = {
126
- "--__axc-data-table-nested-depth": details.level,
127
- };
128
- return (React.createElement(DataTableBaseCell, { textAlign: (_a = colDef.align) !== null && _a !== void 0 ? _a : "left", key: colDef.id || colDefIndex, as: colDef.isRowHeader ? "th" : "td", isSticky: isSticky, "data-nested": renderNestedIndent || undefined, style: style },
129
- renderNestedToggle && (React.createElement(NestedRowToggle, { details: details })),
130
- colDef.cell(rowData)));
131
- })),
132
- React.createElement(DataTableExpandedRow, { rowId: details.id, rowData: rowData, fullWidthColSpan: fullWidthColSpan })));
133
- })));
134
- }
135
- function NestedRowToggle({ details }) {
136
- const { isSubRowExpanded, onExpandedSubRowIdsChange } = useTableItemsContext();
137
- const subRows = details.children;
138
- const hasSubRows = subRows && subRows.length > 0;
139
- const isRowExpanded = isSubRowExpanded(details.id);
140
- return (React.createElement("div", { className: "aksel-data-table__nested-toggle" }, hasSubRows && (React.createElement(Button, { variant: "tertiary", "data-color": "neutral", size: "small", onClick: (e) => {
141
- e.stopPropagation();
142
- onExpandedSubRowIdsChange(details.id);
143
- }, "aria-expanded": isRowExpanded, "aria-label": isRowExpanded ? "Skjul under-rader" : "Vis under-rader", icon: isRowExpanded ? (React.createElement(ChevronDownIcon, { "aria-hidden": true })) : (React.createElement(ChevronRightIcon, { "aria-hidden": true })) }))));
144
- }
145
- function DataTableExpandedRow({ rowId, rowData, fullWidthColSpan, }) {
146
- const { tableId } = useDataTableContext();
147
- const { enableDetailsPanel, isExpanded, getDetailsPanelContent, getDetailsPanelHeight, } = useDataTableExpansion();
148
- if (!enableDetailsPanel) {
149
- return null;
150
- }
151
- if (!isExpanded(rowId)) {
152
- return null;
153
- }
154
- const content = getDetailsPanelContent === null || getDetailsPanelContent === void 0 ? void 0 : getDetailsPanelContent(rowData);
155
- const expansionId = getDataTableExpansionId(tableId, rowId);
156
- if (!content) {
157
- return null;
158
- }
159
- const panelHeight = getDetailsPanelHeight === null || getDetailsPanelHeight === void 0 ? void 0 : getDetailsPanelHeight(rowData);
160
- const style = panelHeight
161
- ? { height: panelHeight, overflow: "auto" }
162
- : { height: "auto" };
163
- return (React.createElement("tr", null,
164
- React.createElement("td", { id: expansionId, colSpan: fullWidthColSpan },
165
- React.createElement("div", { style: style }, content))));
166
- }
167
- const DataTableAuto = forwardRef(DataTableAutoInner);
168
- export { DataTableAuto };
169
- export default DataTableAuto;
170
- //# sourceMappingURL=DataTableAuto.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DataTableAuto.js","sourceRoot":"","sources":["../../../../src/data/table/root/DataTableAuto.tsx"],"names":[],"mappings":"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"}
@@ -1,146 +0,0 @@
1
- import React, { useCallback } from "react";
2
- import { createStrictContext } from "../../../utils/helpers";
3
- import { useControllableState } from "../../../utils/hooks";
4
- import { useTableItemsContext } from "./useTableItems";
5
-
6
- type DataTableExpansionContextT = {
7
- isExpanded: (id: string | number) => boolean;
8
- isDetailsPanelExpandable: (id: string | number) => boolean;
9
- toggleExpansion: (id: string | number) => void;
10
- toggleAll: () => void;
11
- isAllExpanded: boolean;
12
- getDetailsPanelContent?: (row: unknown) => React.ReactNode;
13
- getDetailsPanelHeight?: (row: unknown) => number | "auto";
14
- showExpandAll: boolean;
15
- enableDetailsPanel: boolean;
16
- };
17
-
18
- const {
19
- Provider: DataTableExpansionContextProvider,
20
- useContext: useDataTableExpansion,
21
- } = createStrictContext<DataTableExpansionContextT>({
22
- name: "DataTableExpansionContext",
23
- errorMessage:
24
- "useDataTableExpansion must be used within a DataTableExpansionProvider.",
25
- });
26
-
27
- type TableExpansionOptions<T> = {
28
- detailsPanelRowIds?: (string | number)[];
29
- defaultDetailsPanelRowIds?: (string | number)[];
30
- onDetailsPanelChange?: (ids: (string | number)[]) => void;
31
- getDetailsPanelContent?: (row: T) => React.ReactNode;
32
- isDetailsPanelExpandable?: (rowData: T) => boolean;
33
- getDetailsPanelHeight?: (row: T) => number | "auto";
34
- showExpandAll?: boolean;
35
- };
36
-
37
- function getDataTableExpansionId(tableId: string, rowId: string | number) {
38
- return `${tableId}-expansion-${rowId}`;
39
- }
40
-
41
- function DataTableExpansionProvider<T>({
42
- children,
43
- detailsPanelRowIds,
44
- defaultDetailsPanelRowIds = [],
45
- onDetailsPanelChange,
46
- getDetailsPanelContent,
47
- isDetailsPanelExpandable,
48
- getDetailsPanelHeight,
49
- showExpandAll = false,
50
- }: TableExpansionOptions<T> & { children: React.ReactNode }) {
51
- const [expandedIds, setExpandedIds] = useControllableState({
52
- value: detailsPanelRowIds,
53
- defaultValue: defaultDetailsPanelRowIds,
54
- onChange: onDetailsPanelChange,
55
- });
56
-
57
- /* TODO: False is just fallback until auto and root is merged */
58
- const tableItemsContext = useTableItemsContext(false);
59
-
60
- const { itemDetails } = tableItemsContext ?? {
61
- itemDetails: new Map(),
62
- };
63
-
64
- const expandableIds = React.useMemo(() => {
65
- if (!getDetailsPanelContent) {
66
- return new Set<string | number>();
67
- }
68
-
69
- const ids = new Set<string | number>();
70
-
71
- for (const [rowData, { id, level }] of itemDetails.entries()) {
72
- /* We only allow Master - Details pattern on top level rows */
73
- if (level > 0) {
74
- continue;
75
- }
76
-
77
- if (!isDetailsPanelExpandable || isDetailsPanelExpandable(rowData)) {
78
- ids.add(id);
79
- }
80
- }
81
-
82
- return ids;
83
- }, [getDetailsPanelContent, isDetailsPanelExpandable, itemDetails]);
84
-
85
- const isDetailsPanelExpandableById = useCallback(
86
- (id: string | number) => expandableIds.has(id),
87
- [expandableIds],
88
- );
89
-
90
- const isExpanded = useCallback(
91
- (id: string | number) =>
92
- isDetailsPanelExpandableById(id) && expandedIds.includes(id),
93
- [expandedIds, isDetailsPanelExpandableById],
94
- );
95
-
96
- const toggleExpansion = useCallback(
97
- (id: string | number) => {
98
- if (!isDetailsPanelExpandableById(id)) {
99
- return;
100
- }
101
-
102
- setExpandedIds((currentExpandedIds) =>
103
- currentExpandedIds.includes(id)
104
- ? currentExpandedIds.filter((expandedId) => expandedId !== id)
105
- : [...currentExpandedIds, id],
106
- );
107
- },
108
- [isDetailsPanelExpandableById, setExpandedIds],
109
- );
110
-
111
- const isAllExpanded =
112
- expandableIds.size > 0 &&
113
- Array.from(expandableIds).every((key) => expandedIds.includes(key));
114
-
115
- const toggleAll = useCallback(() => {
116
- setExpandedIds(isAllExpanded ? [] : Array.from(expandableIds));
117
- }, [expandableIds, isAllExpanded, setExpandedIds]);
118
-
119
- return (
120
- <DataTableExpansionContextProvider
121
- isExpanded={isExpanded}
122
- isDetailsPanelExpandable={isDetailsPanelExpandableById}
123
- toggleExpansion={toggleExpansion}
124
- toggleAll={toggleAll}
125
- isAllExpanded={isAllExpanded}
126
- getDetailsPanelContent={
127
- getDetailsPanelContent as
128
- | ((row: unknown) => React.ReactNode)
129
- | undefined
130
- }
131
- getDetailsPanelHeight={
132
- getDetailsPanelHeight as ((row: unknown) => number | "auto") | undefined
133
- }
134
- showExpandAll={showExpandAll}
135
- enableDetailsPanel={!!getDetailsPanelContent}
136
- >
137
- {children}
138
- </DataTableExpansionContextProvider>
139
- );
140
- }
141
-
142
- export {
143
- DataTableExpansionProvider,
144
- getDataTableExpansionId,
145
- useDataTableExpansion,
146
- };