@navikt/ds-react 8.10.4 → 8.10.6
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.
- package/cjs/data/data-grid/index.d.ts +2 -0
- package/cjs/data/data-grid/index.js +7 -0
- package/cjs/data/data-grid/index.js.map +1 -0
- package/cjs/data/data-grid/root/DataGridRoot.context.d.ts +11 -0
- package/cjs/data/data-grid/root/DataGridRoot.context.js +11 -0
- package/cjs/data/data-grid/root/DataGridRoot.context.js.map +1 -0
- package/cjs/data/data-grid/root/DataGridRoot.d.ts +38 -0
- package/cjs/data/data-grid/root/DataGridRoot.js +68 -0
- package/cjs/data/data-grid/root/DataGridRoot.js.map +1 -0
- package/cjs/data/drag-and-drop/drag-handler/DragAndDropDragHandler.js +11 -13
- package/cjs/data/drag-and-drop/drag-handler/DragAndDropDragHandler.js.map +1 -1
- package/cjs/data/drag-and-drop/root/DragAndDrop.context.d.ts +4 -2
- package/cjs/data/drag-and-drop/root/DragAndDrop.context.js.map +1 -1
- package/cjs/data/drag-and-drop/root/DragAndDropRoot.js +44 -46
- package/cjs/data/drag-and-drop/root/DragAndDropRoot.js.map +1 -1
- package/cjs/data/drag-and-drop/types.d.ts +0 -4
- package/cjs/data/stories/Data.test-data.d.ts +2 -5
- package/cjs/data/stories/Data.test-data.js +30 -39
- package/cjs/data/stories/Data.test-data.js.map +1 -1
- package/cjs/data/table/base-cell/DataTableBaseCell.d.ts +15 -15
- package/cjs/data/table/base-cell/DataTableBaseCell.js +4 -8
- package/cjs/data/table/base-cell/DataTableBaseCell.js.map +1 -1
- package/cjs/data/table/column-header/DataTableColumnHeader.d.ts +24 -6
- package/cjs/data/table/column-header/DataTableColumnHeader.js +22 -27
- package/cjs/data/table/column-header/DataTableColumnHeader.js.map +1 -1
- package/cjs/data/table/column-header/useTableColumnResize.d.ts +19 -29
- package/cjs/data/table/column-header/useTableColumnResize.js +24 -22
- package/cjs/data/table/column-header/useTableColumnResize.js.map +1 -1
- package/cjs/data/table/details-panel-row/DataTableDetailsPanelRow.d.ts +1 -1
- package/cjs/data/table/details-panel-row/DataTableDetailsPanelRow.js +2 -2
- package/cjs/data/table/details-panel-row/DataTableDetailsPanelRow.js.map +1 -1
- package/cjs/data/table/helpers/collectTableRowEntries.d.ts +9 -7
- package/cjs/data/table/helpers/collectTableRowEntries.js +18 -10
- package/cjs/data/table/helpers/collectTableRowEntries.js.map +1 -1
- package/cjs/data/table/helpers/selection/getMultipleSelectProps.d.ts +13 -11
- package/cjs/data/table/helpers/selection/getMultipleSelectProps.js +43 -53
- package/cjs/data/table/helpers/selection/getMultipleSelectProps.js.map +1 -1
- package/cjs/data/table/helpers/selection/getSingleSelectProps.d.ts +9 -8
- package/cjs/data/table/helpers/selection/getSingleSelectProps.js +23 -10
- package/cjs/data/table/helpers/selection/getSingleSelectProps.js.map +1 -1
- package/cjs/data/table/helpers/selection/selection.types.d.ts +19 -19
- package/cjs/data/table/helpers/selection/selection.utils.d.ts +21 -0
- package/cjs/data/table/helpers/selection/selection.utils.js +46 -0
- package/cjs/data/table/helpers/selection/selection.utils.js.map +1 -0
- package/cjs/data/table/helpers/table-focus.d.ts +0 -3
- package/cjs/data/table/helpers/table-focus.js +38 -8
- package/cjs/data/table/helpers/table-focus.js.map +1 -1
- package/cjs/data/table/hooks/useColumnOptions.d.ts +16 -5
- package/cjs/data/table/hooks/useColumnOptions.js +26 -8
- package/cjs/data/table/hooks/useColumnOptions.js.map +1 -1
- package/cjs/data/table/hooks/useGridCache.js +2 -2
- package/cjs/data/table/hooks/useGridCache.js.map +1 -1
- package/cjs/data/table/hooks/useTableDetailsPanel.d.ts +10 -13
- package/cjs/data/table/hooks/useTableDetailsPanel.js +7 -6
- package/cjs/data/table/hooks/useTableDetailsPanel.js.map +1 -1
- package/cjs/data/table/hooks/useTableItems.d.ts +31 -17
- package/cjs/data/table/hooks/useTableItems.js +10 -20
- package/cjs/data/table/hooks/useTableItems.js.map +1 -1
- package/cjs/data/table/hooks/useTableKeyboardNav.d.ts +1 -6
- package/cjs/data/table/hooks/useTableKeyboardNav.js +6 -5
- package/cjs/data/table/hooks/useTableKeyboardNav.js.map +1 -1
- package/cjs/data/table/hooks/useTableSelection.d.ts +6 -6
- package/cjs/data/table/hooks/useTableSelection.js +13 -13
- package/cjs/data/table/hooks/useTableSelection.js.map +1 -1
- package/cjs/data/table/hooks/useTableSort.d.ts +2 -2
- package/cjs/data/table/hooks/useTableSort.js +4 -5
- package/cjs/data/table/hooks/useTableSort.js.map +1 -1
- package/cjs/data/table/root/DataTable.types.d.ts +22 -13
- package/cjs/data/table/root/DataTableRoot.context.d.ts +13 -7
- package/cjs/data/table/root/DataTableRoot.context.js.map +1 -1
- package/cjs/data/table/root/DataTableRoot.d.ts +49 -72
- package/cjs/data/table/root/DataTableRoot.js +56 -72
- package/cjs/data/table/root/DataTableRoot.js.map +1 -1
- package/cjs/data/table/root/DataTableRoot.legacy.d.ts +2 -7
- package/cjs/data/table/root/DataTableRoot.legacy.js +17 -3
- package/cjs/data/table/root/DataTableRoot.legacy.js.map +1 -1
- package/cjs/data/table/sub-row-toggle/DataTableSubRowToggle.js +4 -4
- package/cjs/data/table/sub-row-toggle/DataTableSubRowToggle.js.map +1 -1
- package/cjs/data/table/tbody/DataTableTbody.js +4 -2
- package/cjs/data/table/tbody/DataTableTbody.js.map +1 -1
- package/cjs/data/table/tr/DataTableTr.d.ts +5 -3
- package/cjs/data/table/tr/DataTableTr.js +36 -23
- package/cjs/data/table/tr/DataTableTr.js.map +1 -1
- package/cjs/table/ColumnHeader.js +2 -1
- package/cjs/table/ColumnHeader.js.map +1 -1
- package/esm/data/data-grid/index.d.ts +2 -0
- package/esm/data/data-grid/index.js +3 -0
- package/esm/data/data-grid/index.js.map +1 -0
- package/esm/data/data-grid/root/DataGridRoot.context.d.ts +11 -0
- package/esm/data/data-grid/root/DataGridRoot.context.js +7 -0
- package/esm/data/data-grid/root/DataGridRoot.context.js.map +1 -0
- package/esm/data/data-grid/root/DataGridRoot.d.ts +38 -0
- package/esm/data/data-grid/root/DataGridRoot.js +32 -0
- package/esm/data/data-grid/root/DataGridRoot.js.map +1 -0
- package/esm/data/drag-and-drop/drag-handler/DragAndDropDragHandler.js +11 -13
- package/esm/data/drag-and-drop/drag-handler/DragAndDropDragHandler.js.map +1 -1
- package/esm/data/drag-and-drop/root/DragAndDrop.context.d.ts +4 -2
- package/esm/data/drag-and-drop/root/DragAndDrop.context.js.map +1 -1
- package/esm/data/drag-and-drop/root/DragAndDropRoot.js +44 -46
- package/esm/data/drag-and-drop/root/DragAndDropRoot.js.map +1 -1
- package/esm/data/drag-and-drop/types.d.ts +0 -4
- package/esm/data/stories/Data.test-data.d.ts +2 -5
- package/esm/data/stories/Data.test-data.js +30 -39
- package/esm/data/stories/Data.test-data.js.map +1 -1
- package/esm/data/table/base-cell/DataTableBaseCell.d.ts +15 -15
- package/esm/data/table/base-cell/DataTableBaseCell.js +4 -8
- package/esm/data/table/base-cell/DataTableBaseCell.js.map +1 -1
- package/esm/data/table/column-header/DataTableColumnHeader.d.ts +24 -6
- package/esm/data/table/column-header/DataTableColumnHeader.js +23 -28
- package/esm/data/table/column-header/DataTableColumnHeader.js.map +1 -1
- package/esm/data/table/column-header/useTableColumnResize.d.ts +19 -29
- package/esm/data/table/column-header/useTableColumnResize.js +24 -22
- package/esm/data/table/column-header/useTableColumnResize.js.map +1 -1
- package/esm/data/table/details-panel-row/DataTableDetailsPanelRow.d.ts +1 -1
- package/esm/data/table/details-panel-row/DataTableDetailsPanelRow.js +2 -2
- package/esm/data/table/details-panel-row/DataTableDetailsPanelRow.js.map +1 -1
- package/esm/data/table/helpers/collectTableRowEntries.d.ts +9 -7
- package/esm/data/table/helpers/collectTableRowEntries.js +18 -10
- package/esm/data/table/helpers/collectTableRowEntries.js.map +1 -1
- package/esm/data/table/helpers/selection/getMultipleSelectProps.d.ts +13 -11
- package/esm/data/table/helpers/selection/getMultipleSelectProps.js +43 -53
- package/esm/data/table/helpers/selection/getMultipleSelectProps.js.map +1 -1
- package/esm/data/table/helpers/selection/getSingleSelectProps.d.ts +9 -8
- package/esm/data/table/helpers/selection/getSingleSelectProps.js +23 -10
- package/esm/data/table/helpers/selection/getSingleSelectProps.js.map +1 -1
- package/esm/data/table/helpers/selection/selection.types.d.ts +19 -19
- package/esm/data/table/helpers/selection/selection.utils.d.ts +21 -0
- package/esm/data/table/helpers/selection/selection.utils.js +43 -0
- package/esm/data/table/helpers/selection/selection.utils.js.map +1 -0
- package/esm/data/table/helpers/table-focus.d.ts +0 -3
- package/esm/data/table/helpers/table-focus.js +38 -8
- package/esm/data/table/helpers/table-focus.js.map +1 -1
- package/esm/data/table/hooks/useColumnOptions.d.ts +16 -5
- package/esm/data/table/hooks/useColumnOptions.js +26 -8
- package/esm/data/table/hooks/useColumnOptions.js.map +1 -1
- package/esm/data/table/hooks/useGridCache.js +2 -2
- package/esm/data/table/hooks/useGridCache.js.map +1 -1
- package/esm/data/table/hooks/useTableDetailsPanel.d.ts +10 -13
- package/esm/data/table/hooks/useTableDetailsPanel.js +7 -6
- package/esm/data/table/hooks/useTableDetailsPanel.js.map +1 -1
- package/esm/data/table/hooks/useTableItems.d.ts +31 -17
- package/esm/data/table/hooks/useTableItems.js +11 -18
- package/esm/data/table/hooks/useTableItems.js.map +1 -1
- package/esm/data/table/hooks/useTableKeyboardNav.d.ts +1 -6
- package/esm/data/table/hooks/useTableKeyboardNav.js +7 -6
- package/esm/data/table/hooks/useTableKeyboardNav.js.map +1 -1
- package/esm/data/table/hooks/useTableSelection.d.ts +6 -6
- package/esm/data/table/hooks/useTableSelection.js +13 -13
- package/esm/data/table/hooks/useTableSelection.js.map +1 -1
- package/esm/data/table/hooks/useTableSort.d.ts +2 -2
- package/esm/data/table/hooks/useTableSort.js +4 -5
- package/esm/data/table/hooks/useTableSort.js.map +1 -1
- package/esm/data/table/root/DataTable.types.d.ts +22 -13
- package/esm/data/table/root/DataTableRoot.context.d.ts +13 -7
- package/esm/data/table/root/DataTableRoot.context.js.map +1 -1
- package/esm/data/table/root/DataTableRoot.d.ts +49 -72
- package/esm/data/table/root/DataTableRoot.js +58 -74
- package/esm/data/table/root/DataTableRoot.js.map +1 -1
- package/esm/data/table/root/DataTableRoot.legacy.d.ts +2 -7
- package/esm/data/table/root/DataTableRoot.legacy.js +17 -3
- package/esm/data/table/root/DataTableRoot.legacy.js.map +1 -1
- package/esm/data/table/sub-row-toggle/DataTableSubRowToggle.js +4 -4
- package/esm/data/table/sub-row-toggle/DataTableSubRowToggle.js.map +1 -1
- package/esm/data/table/tbody/DataTableTbody.js +4 -2
- package/esm/data/table/tbody/DataTableTbody.js.map +1 -1
- package/esm/data/table/tr/DataTableTr.d.ts +5 -3
- package/esm/data/table/tr/DataTableTr.js +35 -23
- package/esm/data/table/tr/DataTableTr.js.map +1 -1
- package/esm/table/ColumnHeader.js +2 -1
- package/esm/table/ColumnHeader.js.map +1 -1
- package/package.json +8 -7
- package/src/data/data-grid/index.ts +3 -0
- package/src/data/data-grid/root/DataGridRoot.context.ts +16 -0
- package/src/data/data-grid/root/DataGridRoot.tsx +71 -0
- package/src/data/drag-and-drop/drag-handler/DragAndDropDragHandler.tsx +11 -17
- package/src/data/drag-and-drop/root/DragAndDrop.context.tsx +4 -2
- package/src/data/drag-and-drop/root/DragAndDropRoot.tsx +63 -52
- package/src/data/drag-and-drop/types.ts +0 -5
- package/src/data/stories/Data.test-data.tsx +52 -44
- package/src/data/table/agent-component-review.md +175 -0
- package/src/data/table/base-cell/DataTableBaseCell.tsx +31 -21
- package/src/data/table/column-header/DataTableColumnHeader.tsx +63 -58
- package/src/data/table/column-header/useTableColumnResize.ts +55 -71
- package/src/data/table/details-panel-row/DataTableDetailsPanelRow.tsx +7 -3
- package/src/data/table/helpers/collectTableRowEntries.ts +32 -19
- package/src/data/table/helpers/selection/getMultipleSelectProps.ts +65 -85
- package/src/data/table/helpers/selection/getSingleSelectProps.ts +35 -17
- package/src/data/table/helpers/selection/selection.types.ts +19 -19
- package/src/data/table/helpers/selection/selection.utils.test.ts +161 -0
- package/src/data/table/helpers/selection/selection.utils.ts +73 -0
- package/src/data/table/helpers/table-focus.ts +63 -9
- package/src/data/table/hooks/__tests__/useTableItems.test.ts +48 -8
- package/src/data/table/hooks/useColumnOptions.ts +48 -14
- package/src/data/table/hooks/useGridCache.ts +3 -2
- package/src/data/table/hooks/useTableDetailsPanel.tsx +25 -25
- package/src/data/table/hooks/useTableItems.ts +51 -42
- package/src/data/table/hooks/useTableKeyboardNav.ts +7 -15
- package/src/data/table/hooks/useTableSelection.ts +26 -31
- package/src/data/table/hooks/useTableSort.ts +10 -9
- package/src/data/table/root/DataTable.types.ts +30 -25
- package/src/data/table/root/DataTableRoot.context.ts +19 -7
- package/src/data/table/root/DataTableRoot.legacy.tsx +22 -14
- package/src/data/table/root/DataTableRoot.tsx +271 -320
- package/src/data/table/sub-row-toggle/DataTableSubRowToggle.tsx +5 -4
- package/src/data/table/tbody/DataTableTbody.tsx +6 -2
- package/src/data/table/tr/DataTableTr.tsx +98 -35
- package/src/table/ColumnHeader.tsx +2 -1
- package/cjs/data/drag-and-drop-old/drag-handler/DataDragAndDropDragHandler.d.ts +0 -22
- package/cjs/data/drag-and-drop-old/drag-handler/DataDragAndDropDragHandler.js +0 -35
- package/cjs/data/drag-and-drop-old/drag-handler/DataDragAndDropDragHandler.js.map +0 -1
- package/cjs/data/drag-and-drop-old/item/DataDragAndDropItem.d.ts +0 -27
- package/cjs/data/drag-and-drop-old/item/DataDragAndDropItem.js +0 -86
- package/cjs/data/drag-and-drop-old/item/DataDragAndDropItem.js.map +0 -1
- package/cjs/data/drag-and-drop-old/root/DataDragAndDrop.context.d.ts +0 -5
- package/cjs/data/drag-and-drop-old/root/DataDragAndDrop.context.js +0 -6
- package/cjs/data/drag-and-drop-old/root/DataDragAndDrop.context.js.map +0 -1
- package/cjs/data/drag-and-drop-old/root/DataDragAndDropRoot.d.ts +0 -24
- package/cjs/data/drag-and-drop-old/root/DataDragAndDropRoot.js +0 -108
- package/cjs/data/drag-and-drop-old/root/DataDragAndDropRoot.js.map +0 -1
- package/cjs/data/table/helpers/selection/SelectionSubtreeHelper.d.ts +0 -46
- package/cjs/data/table/helpers/selection/SelectionSubtreeHelper.js +0 -112
- package/cjs/data/table/helpers/selection/SelectionSubtreeHelper.js.map +0 -1
- package/esm/data/drag-and-drop-old/drag-handler/DataDragAndDropDragHandler.d.ts +0 -22
- package/esm/data/drag-and-drop-old/drag-handler/DataDragAndDropDragHandler.js +0 -29
- package/esm/data/drag-and-drop-old/drag-handler/DataDragAndDropDragHandler.js.map +0 -1
- package/esm/data/drag-and-drop-old/item/DataDragAndDropItem.d.ts +0 -27
- package/esm/data/drag-and-drop-old/item/DataDragAndDropItem.js +0 -50
- package/esm/data/drag-and-drop-old/item/DataDragAndDropItem.js.map +0 -1
- package/esm/data/drag-and-drop-old/root/DataDragAndDrop.context.d.ts +0 -5
- package/esm/data/drag-and-drop-old/root/DataDragAndDrop.context.js +0 -3
- package/esm/data/drag-and-drop-old/root/DataDragAndDrop.context.js.map +0 -1
- package/esm/data/drag-and-drop-old/root/DataDragAndDropRoot.d.ts +0 -24
- package/esm/data/drag-and-drop-old/root/DataDragAndDropRoot.js +0 -68
- package/esm/data/drag-and-drop-old/root/DataDragAndDropRoot.js.map +0 -1
- package/esm/data/table/helpers/selection/SelectionSubtreeHelper.d.ts +0 -46
- package/esm/data/table/helpers/selection/SelectionSubtreeHelper.js +0 -109
- package/esm/data/table/helpers/selection/SelectionSubtreeHelper.js.map +0 -1
- package/src/data/drag-and-drop-old/drag-handler/DataDragAndDropDragHandler.tsx +0 -104
- package/src/data/drag-and-drop-old/item/DataDragAndDropItem.tsx +0 -74
- package/src/data/drag-and-drop-old/root/DataDragAndDrop.context.tsx +0 -11
- package/src/data/drag-and-drop-old/root/DataDragAndDropRoot.tsx +0 -96
- package/src/data/table/helpers/selection/SelectionSubtreeHelper.test.ts +0 -66
- package/src/data/table/helpers/selection/SelectionSubtreeHelper.ts +0 -162
- package/src/data/table/hooks/__tests__/useTableSelection.test.ts +0 -488
|
@@ -1,12 +1,7 @@
|
|
|
1
1
|
type UseTableKeyboardNavOptions = {
|
|
2
2
|
enabled: boolean;
|
|
3
|
-
/**
|
|
4
|
-
* Custom callback to determine if navigation should be blocked.
|
|
5
|
-
* Called before default blocking logic.
|
|
6
|
-
*/
|
|
7
|
-
shouldBlockNavigation?: (event: KeyboardEvent) => boolean;
|
|
8
3
|
};
|
|
9
|
-
declare function useTableKeyboardNav({ enabled
|
|
4
|
+
declare function useTableKeyboardNav({ enabled }: UseTableKeyboardNavOptions): {
|
|
10
5
|
tabIndex: number | undefined;
|
|
11
6
|
setTableRef: import("react").Dispatch<import("react").SetStateAction<HTMLTableElement | null>>;
|
|
12
7
|
};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { useEffect, useState } from "react";
|
|
2
2
|
import { useEventCallback } from "../../../utils/hooks/index.js";
|
|
3
3
|
import { focusInitialTableTarget } from "../helpers/table-cell.js";
|
|
4
|
-
import { focusCellAndUpdateTabIndex } from "../helpers/table-focus.js";
|
|
4
|
+
import { focusCell, focusCellAndUpdateTabIndex } from "../helpers/table-focus.js";
|
|
5
5
|
import { findFirstCell, findFirstCellInRow, findLastCell, findLastCellInRow, findNextFocusableCell, } from "../helpers/table-grid-nav.js";
|
|
6
6
|
import { getNavigationAction, shouldBlockNavigation, } from "../helpers/table-keyboard.js";
|
|
7
7
|
import { useGridCache } from "./useGridCache.js";
|
|
8
|
-
function useTableKeyboardNav({ enabled
|
|
8
|
+
function useTableKeyboardNav({ enabled }) {
|
|
9
9
|
const [tableRef, setTableRef] = useState(null);
|
|
10
10
|
const { getTableGrid, activeCell, setActiveCell } = useGridCache(tableRef, enabled);
|
|
11
11
|
/**
|
|
@@ -64,9 +64,6 @@ function useTableKeyboardNav({ enabled, shouldBlockNavigation: customBlockFn, })
|
|
|
64
64
|
* Checks if navigation should be blocked based on current focus context.
|
|
65
65
|
*/
|
|
66
66
|
const handleTableKeyDown = useEventCallback((event) => {
|
|
67
|
-
if (customBlockFn === null || customBlockFn === void 0 ? void 0 : customBlockFn(event)) {
|
|
68
|
-
return;
|
|
69
|
-
}
|
|
70
67
|
const action = getNavigationAction(event);
|
|
71
68
|
if (!action) {
|
|
72
69
|
return;
|
|
@@ -87,6 +84,10 @@ function useTableKeyboardNav({ enabled, shouldBlockNavigation: customBlockFn, })
|
|
|
87
84
|
var _a;
|
|
88
85
|
const target = event.target;
|
|
89
86
|
if (tableRef && target === tableRef) {
|
|
87
|
+
if (activeCell) {
|
|
88
|
+
focusCell(activeCell);
|
|
89
|
+
return;
|
|
90
|
+
}
|
|
90
91
|
focusInitialTableTarget(tableRef);
|
|
91
92
|
return;
|
|
92
93
|
}
|
|
@@ -117,7 +118,7 @@ function useTableKeyboardNav({ enabled, shouldBlockNavigation: customBlockFn, })
|
|
|
117
118
|
}, [tableRef, handleTableKeyDown, handleTableFocusIn, enabled]);
|
|
118
119
|
return {
|
|
119
120
|
/* Table should only have tabIndex until the focus is moved inside and is enabled */
|
|
120
|
-
tabIndex: enabled ?
|
|
121
|
+
tabIndex: enabled ? 0 : undefined,
|
|
121
122
|
setTableRef,
|
|
122
123
|
};
|
|
123
124
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTableKeyboardNav.js","sourceRoot":"","sources":["../../../../src/data/table/hooks/useTableKeyboardNav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"useTableKeyboardNav.js","sourceRoot":"","sources":["../../../../src/data/table/hooks/useTableKeyboardNav.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import type { SelectionProps, TableSelection } from "../helpers/selection/selection.types.js";
|
|
2
|
-
type
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
2
|
+
import type { UseTableItemsReturn } from "./useTableItems.js";
|
|
3
|
+
type UseTableSelectionArgs<T> = {
|
|
4
|
+
selection?: SelectionProps<T>;
|
|
5
|
+
tableItems: UseTableItemsReturn<T>;
|
|
6
6
|
};
|
|
7
7
|
type UseTableSelectionReturn = {
|
|
8
8
|
selection: TableSelection;
|
|
9
9
|
renderSelection: boolean;
|
|
10
|
-
|
|
10
|
+
selectionTrigger: "row" | "control";
|
|
11
11
|
};
|
|
12
|
-
declare function useTableSelection({ selection,
|
|
12
|
+
declare function useTableSelection<T>({ selection, tableItems, }: UseTableSelectionArgs<T>): UseTableSelectionReturn;
|
|
13
13
|
/**
|
|
14
14
|
* TODO: Only temp needed to keep Root happy
|
|
15
15
|
*/
|
|
@@ -3,8 +3,11 @@ import { useId } from "../../../utils-external/index.js";
|
|
|
3
3
|
import { useControllableState } from "../../../utils/hooks/index.js";
|
|
4
4
|
import { getMultipleSelectProps } from "../helpers/selection/getMultipleSelectProps.js";
|
|
5
5
|
import { getSingleSelectProps } from "../helpers/selection/getSingleSelectProps.js";
|
|
6
|
-
function useTableSelection({ selection = {
|
|
7
|
-
|
|
6
|
+
function useTableSelection({ selection = {
|
|
7
|
+
selectionMode: "none",
|
|
8
|
+
}, tableItems, }) {
|
|
9
|
+
const { selectionMode, defaultSelectedKeys, selectedKeys: selectedKeysProp, onSelectionChange, enableRowSelection, selectionTrigger = "row", } = selection;
|
|
10
|
+
const { visibleRowIds = [] } = tableItems;
|
|
8
11
|
const radioGroupName = useId();
|
|
9
12
|
const [selectedKeys, setSelectedKeys] = useControllableState({
|
|
10
13
|
value: selectionMode !== "none" ? selectedKeysProp : undefined,
|
|
@@ -12,13 +15,12 @@ function useTableSelection({ selection = {}, visibleRowIds = [], childRowIdsById
|
|
|
12
15
|
onChange: onSelectionChange,
|
|
13
16
|
});
|
|
14
17
|
const selectedKeysSet = useMemo(() => new Set(selectedKeys), [selectedKeys]);
|
|
15
|
-
const disabledKeysSet = useMemo(() => new Set(disabledSelectionKeys), [disabledSelectionKeys]);
|
|
16
18
|
const isRowSelected = useCallback((rowId) => selectedKeysSet.has(rowId), [selectedKeysSet]);
|
|
17
|
-
const baseSelection = { selectedKeys,
|
|
19
|
+
const baseSelection = { selectedKeys, isRowSelected };
|
|
18
20
|
if (selectionMode === "none") {
|
|
19
21
|
return {
|
|
20
22
|
selection: Object.assign(Object.assign({ selectionMode }, baseSelection), { selectedKeys: [] }),
|
|
21
|
-
|
|
23
|
+
selectionTrigger,
|
|
22
24
|
renderSelection: false,
|
|
23
25
|
};
|
|
24
26
|
}
|
|
@@ -27,10 +29,10 @@ function useTableSelection({ selection = {}, visibleRowIds = [], childRowIdsById
|
|
|
27
29
|
selection: Object.assign(Object.assign({ selectionMode }, baseSelection), getSingleSelectProps({
|
|
28
30
|
selectedKeysSet,
|
|
29
31
|
setSelectedKeys,
|
|
30
|
-
disabledKeysSet,
|
|
31
32
|
name: radioGroupName,
|
|
33
|
+
enableRowSelection,
|
|
32
34
|
})),
|
|
33
|
-
|
|
35
|
+
selectionTrigger,
|
|
34
36
|
renderSelection: visibleRowIds.length !== 0,
|
|
35
37
|
};
|
|
36
38
|
}
|
|
@@ -39,11 +41,10 @@ function useTableSelection({ selection = {}, visibleRowIds = [], childRowIdsById
|
|
|
39
41
|
selectedKeysSet,
|
|
40
42
|
selectedKeys,
|
|
41
43
|
setSelectedKeys,
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
childRowIdsById,
|
|
44
|
+
enableRowSelection,
|
|
45
|
+
tableItems,
|
|
45
46
|
})),
|
|
46
|
-
|
|
47
|
+
selectionTrigger,
|
|
47
48
|
renderSelection: visibleRowIds.length !== 0,
|
|
48
49
|
};
|
|
49
50
|
}
|
|
@@ -54,10 +55,9 @@ const noSelectionState = {
|
|
|
54
55
|
selection: {
|
|
55
56
|
selectionMode: "none",
|
|
56
57
|
selectedKeys: [],
|
|
57
|
-
disabledSelectionKeys: [],
|
|
58
58
|
isRowSelected: () => false,
|
|
59
59
|
},
|
|
60
|
-
|
|
60
|
+
selectionTrigger: "row",
|
|
61
61
|
renderSelection: false,
|
|
62
62
|
};
|
|
63
63
|
export { useTableSelection, noSelectionState };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTableSelection.js","sourceRoot":"","sources":["../../../../src/data/table/hooks/useTableSelection.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,6CAA6C,CAAC;AACrF,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;
|
|
1
|
+
{"version":3,"file":"useTableSelection.js","sourceRoot":"","sources":["../../../../src/data/table/hooks/useTableSelection.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,6CAA6C,CAAC;AACrF,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AAoBjF,SAAS,iBAAiB,CAAI,EAC5B,SAAS,GAAG;IACV,aAAa,EAAE,MAAM;CACtB,EACD,UAAU,GACe;IACzB,MAAM,EACJ,aAAa,EACb,mBAAmB,EACnB,YAAY,EAAE,gBAAgB,EAC9B,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,GAAG,KAAK,GACzB,GAAG,SAAS,CAAC;IAEd,MAAM,EAAE,aAAa,GAAG,EAAE,EAAE,GAAG,UAAU,CAAC;IAE1C,MAAM,cAAc,GAAG,KAAK,EAAE,CAAC;IAE/B,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,oBAAoB,CAAgB;QAC1E,KAAK,EAAE,aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS;QAC9D,YAAY,EAAE,mBAAmB,aAAnB,mBAAmB,cAAnB,mBAAmB,GAAI,EAAE;QACvC,QAAQ,EAAE,iBAAiB;KAC5B,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAE7E,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,KAAsB,EAAE,EAAE,CAAC,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC,EACtD,CAAC,eAAe,CAAC,CAClB,CAAC;IAEF,MAAM,aAAa,GAAG,EAAE,YAAY,EAAE,aAAa,EAAE,CAAC;IAEtD,IAAI,aAAa,KAAK,MAAM,EAAE,CAAC;QAC7B,OAAO;YACL,SAAS,gCACP,aAAa,IACV,aAAa,KAChB,YAAY,EAAE,EAAE,GACjB;YACD,gBAAgB;YAChB,eAAe,EAAE,KAAK;SACvB,CAAC;IACJ,CAAC;IAED,IAAI,aAAa,KAAK,QAAQ,EAAE,CAAC;QAC/B,OAAO;YACL,SAAS,gCACP,aAAa,IACV,aAAa,GACb,oBAAoB,CAAC;gBACtB,eAAe;gBACf,eAAe;gBACf,IAAI,EAAE,cAAc;gBACpB,kBAAkB;aACnB,CAAC,CACH;YACD,gBAAgB;YAChB,eAAe,EAAE,aAAa,CAAC,MAAM,KAAK,CAAC;SAC5C,CAAC;IACJ,CAAC;IAED,OAAO;QACL,SAAS,gCACP,aAAa,IACV,aAAa,GACb,sBAAsB,CAAC;YACxB,eAAe;YACf,YAAY;YACZ,eAAe;YACf,kBAAkB;YAClB,UAAU;SACX,CAAC,CACH;QACD,gBAAgB;QAChB,eAAe,EAAE,aAAa,CAAC,MAAM,KAAK,CAAC;KAC5C,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,gBAAgB,GAA4B;IAChD,SAAS,EAAE;QACT,aAAa,EAAE,MAAM;QACrB,YAAY,EAAE,EAAE;QAChB,aAAa,EAAE,GAAG,EAAE,CAAC,KAAK;KAC3B;IACD,gBAAgB,EAAE,KAAK;IACvB,eAAe,EAAE,KAAK;CACvB,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,CAAC"}
|
|
@@ -32,6 +32,6 @@ type UseTableSortResults = {
|
|
|
32
32
|
*/
|
|
33
33
|
sortState: SortEntry[];
|
|
34
34
|
};
|
|
35
|
-
declare function useTableSort(options
|
|
35
|
+
declare function useTableSort(options?: TableSortOptions): UseTableSortResults;
|
|
36
36
|
export { useTableSort };
|
|
37
|
-
export type { TableSortOptions };
|
|
37
|
+
export type { TableSortOptions, UseTableSortResults };
|
|
@@ -1,16 +1,15 @@
|
|
|
1
1
|
import { useCallback } from "react";
|
|
2
|
+
import { consoleWarning } from "../../../utils/helpers/consoleWarning.js";
|
|
2
3
|
import { useControllableState } from "../../../utils/hooks/index.js";
|
|
3
4
|
function useTableSort(options) {
|
|
4
|
-
const { defaultSort
|
|
5
|
+
const { defaultSort, onSortChange, sort: sortOption } = options || {};
|
|
5
6
|
const [sort, setSort] = useControllableState({
|
|
6
7
|
value: sortOption,
|
|
7
|
-
defaultValue: defaultSort,
|
|
8
|
+
defaultValue: defaultSort || [],
|
|
8
9
|
});
|
|
9
10
|
const handleSortClick = useCallback((id, event) => {
|
|
10
11
|
if (id === undefined) {
|
|
11
|
-
|
|
12
|
-
console.warn(`Aksel: Column id is undefined for sort event on target ${event.target}. Make sure your column definitions include an 'id' property.`);
|
|
13
|
-
}
|
|
12
|
+
consoleWarning("DataTable: Column id is undefined for sort event on target", event.target, "Make sure your column definitions include an 'id' property.");
|
|
14
13
|
return;
|
|
15
14
|
}
|
|
16
15
|
const cumulative = event.shiftKey;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTableSort.js","sourceRoot":"","sources":["../../../../src/data/table/hooks/useTableSort.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAyC5D,SAAS,YAAY,CAAC,
|
|
1
|
+
{"version":3,"file":"useTableSort.js","sourceRoot":"","sources":["../../../../src/data/table/hooks/useTableSort.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAyC5D,SAAS,YAAY,CAAC,OAA0B;IAC9C,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,OAAO,IAAI,EAAE,CAAC;IAEtE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,oBAAoB,CAAC;QAC3C,KAAK,EAAE,UAAU;QACjB,YAAY,EAAE,WAAW,IAAI,EAAE;KAChC,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,EAAU,EAAE,KAAgD,EAAE,EAAE;QAC/D,IAAI,EAAE,KAAK,SAAS,EAAE,CAAC;YACrB,cAAc,CACZ,4DAA4D,EAC5D,KAAK,CAAC,MAAM,EACZ,6DAA6D,CAC9D,CAAC;YACF,OAAO;QACT,CAAC;QAED,MAAM,UAAU,GAAG,KAAK,CAAC,QAAQ,CAAC;QAClC,MAAM,IAAI,GAAG,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,EAAE,CAAC,CAAC;QACvE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,eAAe,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QACnD,OAAO,CAAC,IAAI,CAAC,CAAC;QACd,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,IAAI,EAAE,MAAM,CAAC,CAAC;IAC/B,CAAC,EACD,CAAC,YAAY,EAAE,OAAO,EAAE,IAAI,CAAC,CAC9B,CAAC;IAEF,OAAO;QACL,WAAW,EAAE,eAAe;QAC5B,SAAS,EAAE,IAAI;KAChB,CAAC;AACJ,CAAC;AAED,SAAS,eAAe,CACtB,OAAoB,EACpB,QAAgB;IAEhB,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC;IAC9D,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO;YACL,IAAI,EAAE,CAAC,GAAG,OAAO,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;YAClD,MAAM,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE;SACvC,CAAC;IACJ,CAAC;IACD,IAAI,QAAQ,CAAC,SAAS,KAAK,KAAK,EAAE,CAAC;QACjC,OAAO;YACL,IAAI,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CACtB,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC,iCAAM,CAAC,KAAE,SAAS,EAAE,MAAM,IAAG,CAAC,CAAC,CAAC,CAC1D;YACD,MAAM,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE;SACxC,CAAC;IACJ,CAAC;IACD,OAAO;QACL,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC;QACpD,MAAM,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE;KACxC,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}
|
|
@@ -1,16 +1,15 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { DataTableColumnHeaderProps } from "../column-header/DataTableColumnHeader.js";
|
|
2
2
|
type SortDirection = "asc" | "desc" | "none";
|
|
3
3
|
/**
|
|
4
4
|
* TODO:
|
|
5
5
|
* - Consider "accessorKey" or similar to allow simple column definitions without a cell function.
|
|
6
6
|
* - Add "align" property for better control over text alignment in cells.
|
|
7
7
|
*/
|
|
8
|
-
type ColumnDefinition<T
|
|
8
|
+
type ColumnDefinition<T> = {
|
|
9
9
|
id: string;
|
|
10
10
|
/**
|
|
11
11
|
* Text alignment for cells in this column.
|
|
12
12
|
*
|
|
13
|
-
*
|
|
14
13
|
* @default "left"
|
|
15
14
|
*/
|
|
16
15
|
align?: "left" | "right" | "center";
|
|
@@ -18,13 +17,12 @@ type ColumnDefinition<T, DetailsT = Record<string, any>> = Pick<ResizeProps, "re
|
|
|
18
17
|
* Assigned to the cell's `th` element instead of `td` if true.
|
|
19
18
|
*
|
|
20
19
|
* Should be used for cells that act as row headers. Each row should have one rowheader, and only have one cell with `isRowHeader: true`,
|
|
21
|
-
*
|
|
22
|
-
* TODO: Not implemented
|
|
23
|
-
* - Add a generic tablecell component that can render either a td or th based on context or this prop.
|
|
20
|
+
* TODO: Better documentation, consider warning if not one column has this set to true.
|
|
24
21
|
*/
|
|
25
22
|
isRowHeader?: boolean;
|
|
26
23
|
/**
|
|
27
24
|
* Renders table header-cell
|
|
25
|
+
* TODO: Pri zero rename to headerCell
|
|
28
26
|
*/
|
|
29
27
|
header?: React.ReactNode;
|
|
30
28
|
/**
|
|
@@ -33,6 +31,7 @@ type ColumnDefinition<T, DetailsT = Record<string, any>> = Pick<ResizeProps, "re
|
|
|
33
31
|
cell: (item: T) => React.ReactNode;
|
|
34
32
|
/**
|
|
35
33
|
* Label of header. Renders if header is not provided.
|
|
34
|
+
* TODO: Pri zero consider renaming to header
|
|
36
35
|
*/
|
|
37
36
|
label: string;
|
|
38
37
|
/**
|
|
@@ -40,12 +39,8 @@ type ColumnDefinition<T, DetailsT = Record<string, any>> = Pick<ResizeProps, "re
|
|
|
40
39
|
* Use `sort` and `onSortChange` on the root component to control sort state.
|
|
41
40
|
*/
|
|
42
41
|
sortable?: boolean;
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
*/
|
|
46
|
-
details?: DetailsT;
|
|
47
|
-
};
|
|
48
|
-
type ColumnDefinitions<T, DetailsT = Record<string, any>> = ColumnDefinition<T, DetailsT>[];
|
|
42
|
+
} & Pick<DataTableColumnHeaderProps, "width">;
|
|
43
|
+
type ColumnDefinitions<T> = ColumnDefinition<T>[];
|
|
49
44
|
/**
|
|
50
45
|
* A single sort entry representing a column's current sort state.
|
|
51
46
|
* Absent from the `sort` array means the column is unsorted.
|
|
@@ -63,4 +58,18 @@ type SortChangeDetail = {
|
|
|
63
58
|
/** The new direction for this column. `"none"` means the column was removed from the sort. */
|
|
64
59
|
direction: "asc" | "desc" | "none";
|
|
65
60
|
};
|
|
66
|
-
|
|
61
|
+
type DataTableLoadingConfig = {
|
|
62
|
+
isLoading?: boolean;
|
|
63
|
+
} & ({
|
|
64
|
+
variant: "content";
|
|
65
|
+
content: React.ReactNode;
|
|
66
|
+
} | {
|
|
67
|
+
variant: "skeleton";
|
|
68
|
+
rows?: number;
|
|
69
|
+
label?: string;
|
|
70
|
+
} | {
|
|
71
|
+
variant: "overlay";
|
|
72
|
+
label?: string;
|
|
73
|
+
});
|
|
74
|
+
type TableRowEntryId = string;
|
|
75
|
+
export type { ColumnDefinition, ColumnDefinitions, DataTableLoadingConfig, SortDirection, SortEntry, SortChangeDetail, TableRowEntryId, };
|
|
@@ -1,22 +1,28 @@
|
|
|
1
|
-
import type { UseColumnOptionsResult } from "../hooks/useColumnOptions.js";
|
|
1
|
+
import type { StickyStartState, UseColumnOptionsResult } from "../hooks/useColumnOptions.js";
|
|
2
|
+
import type { UseTableItemsReturn } from "../hooks/useTableItems.js";
|
|
2
3
|
import type { UseTableSelectionReturn } from "../hooks/useTableSelection.js";
|
|
4
|
+
import type { UseTableSortResults } from "../hooks/useTableSort.js";
|
|
5
|
+
import type { DataTableLoadingConfig, TableRowEntryId } from "./DataTable.types.js";
|
|
3
6
|
type DataTableContextProps<T> = {
|
|
4
7
|
layout: "fixed" | "auto";
|
|
5
8
|
withKeyboardNav: boolean;
|
|
6
9
|
selectionState: UseTableSelectionReturn;
|
|
7
|
-
|
|
10
|
+
stickyStart: StickyStartState;
|
|
8
11
|
stickyHeader: boolean;
|
|
9
12
|
tableId: string;
|
|
10
|
-
|
|
11
|
-
onRowClick?: (rowId:
|
|
12
|
-
isLoading?: boolean;
|
|
13
|
-
showLoadingOverlay: boolean;
|
|
13
|
+
loading: DataTableLoadingConfig | undefined;
|
|
14
|
+
onRowClick?: (rowId: TableRowEntryId, event: React.MouseEvent<HTMLTableRowElement>) => void;
|
|
14
15
|
columns: UseColumnOptionsResult<T>["columns"];
|
|
15
16
|
/**
|
|
16
17
|
* Used to set exact colspan for detailsPanel, loadingState and emptyState.
|
|
17
18
|
* This is necessary to ensure that these components span the entire width of the table.
|
|
18
19
|
*/
|
|
19
|
-
|
|
20
|
+
totalColSpan: number;
|
|
21
|
+
/**
|
|
22
|
+
* The current items and related metadata.
|
|
23
|
+
*/
|
|
24
|
+
tableItems: UseTableItemsReturn<T>;
|
|
25
|
+
sortingState: UseTableSortResults;
|
|
20
26
|
};
|
|
21
27
|
declare const DataTableContextProvider: import("react").FC<DataTableContextProps<any> & {
|
|
22
28
|
children: React.ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableRoot.context.js","sourceRoot":"","sources":["../../../../src/data/table/root/DataTableRoot.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"DataTableRoot.context.js","sourceRoot":"","sources":["../../../../src/data/table/root/DataTableRoot.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAsC7D,MAAM,EAAE,QAAQ,EAAE,wBAAwB,EAAE,UAAU,EAAE,mBAAmB,EAAE,GAC3E,mBAAmB,CAA6B;IAC9C,IAAI,EAAE,kBAAkB;IACxB,YAAY,EAAE,mDAAmD;CAClE,CAAC,CAAC;AAIL,MAAM,EACJ,QAAQ,EAAE,yBAAyB,EACnC,UAAU,EAAE,oBAAoB,GACjC,GAAG,mBAAmB,CAAkC;IACvD,IAAI,EAAE,mBAAmB;IACzB,YAAY,EACV,mIAAmI;CACtI,CAAC,CAAC;AAEH,OAAO,EACL,wBAAwB,EACxB,yBAAyB,EACzB,mBAAmB,EACnB,oBAAoB,GACrB,CAAC"}
|
|
@@ -1,11 +1,22 @@
|
|
|
1
|
-
/** biome-ignore-all lint/correctness/useHookAtTopLevel: False positive because of the way forwardRef() is added */
|
|
2
1
|
import React from "react";
|
|
3
2
|
import { type DetailsPanelProps } from "../hooks/useTableDetailsPanel.js";
|
|
4
3
|
import { type SubRowsProps } from "../hooks/useTableItems.js";
|
|
5
4
|
import { type SelectionProps } from "../hooks/useTableSelection.js";
|
|
6
5
|
import { type TableSortOptions } from "../hooks/useTableSort.js";
|
|
7
|
-
import type {
|
|
8
|
-
|
|
6
|
+
import type { DataTableLoadingConfig, TableRowEntryId } from "./DataTable.types.js";
|
|
7
|
+
/**
|
|
8
|
+
* TODO: For consideration:
|
|
9
|
+
* - Use namespacing for types. There will be a lot of standalone types connected to this component,
|
|
10
|
+
* it could make sense to access them under DataTable.X instead of separate imports.
|
|
11
|
+
* - Consider having a "Wrapper" component that only handles context and logic like,
|
|
12
|
+
* "DataTableRoot" or "DataGrid" or something, and then have the main "DataTable" component only handle rendering of table itself.
|
|
13
|
+
* This would make props more focused and discoverable since its not mixed with htmltable-props.
|
|
14
|
+
*/
|
|
15
|
+
/**
|
|
16
|
+
* TODO:
|
|
17
|
+
* - Test `onColumnDefinitionChange` callback that is called when resize, sort, order etc changes
|
|
18
|
+
*/
|
|
19
|
+
interface DataTableProps<T> extends React.HTMLAttributes<HTMLTableElement> {
|
|
9
20
|
children?: never;
|
|
10
21
|
/**
|
|
11
22
|
* Controls vertical cell padding.
|
|
@@ -20,8 +31,9 @@ interface DataTableProps<T> extends React.HTMLAttributes<HTMLTableElement>, Tabl
|
|
|
20
31
|
/**
|
|
21
32
|
* Truncate content in cells and show ellipsis for overflowed text.
|
|
22
33
|
*
|
|
23
|
-
* **NB:** When using `layout="auto"`,
|
|
24
|
-
*
|
|
34
|
+
* **NB:** When using this together with `layout="auto"`,
|
|
35
|
+
* you have to manually set a `maxWidth` on columns that should be truncated.
|
|
36
|
+
* @default false if layout="auto", else true
|
|
25
37
|
*/
|
|
26
38
|
truncateContent?: boolean;
|
|
27
39
|
/**
|
|
@@ -29,12 +41,6 @@ interface DataTableProps<T> extends React.HTMLAttributes<HTMLTableElement>, Tabl
|
|
|
29
41
|
* @default true
|
|
30
42
|
*/
|
|
31
43
|
withKeyboardNav?: boolean;
|
|
32
|
-
/**
|
|
33
|
-
* Custom callback to determine if navigation should be blocked.
|
|
34
|
-
* Called before default blocking logic.
|
|
35
|
-
* Requires `withKeyboardNav` to be `true`.
|
|
36
|
-
*/
|
|
37
|
-
shouldBlockNavigation?: (event: KeyboardEvent) => boolean;
|
|
38
44
|
/**
|
|
39
45
|
* Controls table layout.
|
|
40
46
|
*
|
|
@@ -50,35 +56,14 @@ interface DataTableProps<T> extends React.HTMLAttributes<HTMLTableElement>, Tabl
|
|
|
50
56
|
* @default "fixed"
|
|
51
57
|
*/
|
|
52
58
|
layout?: "fixed" | "auto";
|
|
53
|
-
/**
|
|
54
|
-
* Defines the columns of the table and how to render them.
|
|
55
|
-
*
|
|
56
|
-
*
|
|
57
|
-
* 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.
|
|
58
|
-
*/
|
|
59
|
-
columnDefinitions: ColumnDefinitions<T>;
|
|
60
|
-
/**
|
|
61
|
-
* The data to display in the table.
|
|
62
|
-
*
|
|
63
|
-
*
|
|
64
|
-
* Each object in the array represents a row, and the properties of the object are used to render the cells based on the `columnDefinitions`.
|
|
65
|
-
*/
|
|
66
|
-
data: T[];
|
|
67
|
-
/**
|
|
68
|
-
* Function to get unique row id from row data.
|
|
69
|
-
*
|
|
70
|
-
*
|
|
71
|
-
* 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.
|
|
72
|
-
*/
|
|
73
|
-
getRowId?: (rowData: T, index: number) => string | number;
|
|
74
59
|
/**
|
|
75
60
|
* Sticky columns that remain visible when horizontally scrolling the table.
|
|
76
61
|
*
|
|
77
62
|
* You can specify 1 sticky column on the left and 1 on the right.
|
|
78
63
|
*/
|
|
79
64
|
stickyColumns?: {
|
|
80
|
-
|
|
81
|
-
|
|
65
|
+
start?: "1";
|
|
66
|
+
end?: "1";
|
|
82
67
|
};
|
|
83
68
|
/**
|
|
84
69
|
* @default true
|
|
@@ -88,54 +73,46 @@ interface DataTableProps<T> extends React.HTMLAttributes<HTMLTableElement>, Tabl
|
|
|
88
73
|
* Callback invoked when a data row is clicked.
|
|
89
74
|
* Not called when clicking header, loading, or empty-state rows.
|
|
90
75
|
*/
|
|
91
|
-
onRowClick?: (rowId:
|
|
76
|
+
onRowClick?: (rowId: TableRowEntryId, event: React.MouseEvent<HTMLTableRowElement>) => void;
|
|
92
77
|
/**
|
|
93
78
|
* Content to render when `data` is empty.
|
|
94
79
|
* Rendered inside a `DataTable.EmptyState` row spanning all columns.
|
|
95
80
|
*/
|
|
96
|
-
|
|
97
|
-
loading?: {
|
|
98
|
-
/**
|
|
99
|
-
* Shows the table in a loading state.
|
|
100
|
-
*
|
|
101
|
-
* - When `loadingState` is provided, it is rendered inside a `DataTable.LoadingState` row.
|
|
102
|
-
* - When `loadingState` is **not** provided, skeleton placeholder rows are rendered instead.
|
|
103
|
-
* @default false
|
|
104
|
-
*/
|
|
105
|
-
isLoading?: boolean;
|
|
106
|
-
/**
|
|
107
|
-
* Custom content to render when `isLoading` is `true`.
|
|
108
|
-
* Rendered inside a `DataTable.LoadingState` row spanning all columns.
|
|
109
|
-
* When omitted, skeleton rows are rendered based on `loadingRows`.
|
|
110
|
-
*/
|
|
111
|
-
loadingState?: React.ReactNode;
|
|
112
|
-
/**
|
|
113
|
-
* Number of skeleton rows to render when `isLoading` is `true` and no `loadingState` is provided.
|
|
114
|
-
*
|
|
115
|
-
*
|
|
116
|
-
* If not provided, the rendered content will get a temporarily overlay while loading
|
|
117
|
-
*/
|
|
118
|
-
loadingRows?: number;
|
|
119
|
-
/**
|
|
120
|
-
* Visually hidden label announced to screen readers when skeleton rows are shown.
|
|
121
|
-
* Only used when `isLoading` is `true` and no `loadingState` is provided.
|
|
122
|
-
* @default "Laster innhold"
|
|
123
|
-
*/
|
|
124
|
-
loadingLabel?: string;
|
|
125
|
-
};
|
|
81
|
+
emptyContent?: React.ReactNode;
|
|
126
82
|
/**
|
|
127
|
-
*
|
|
128
|
-
* When provided, an expand toggle column is added automatically.
|
|
83
|
+
* Configures how the table behaves during loading.
|
|
129
84
|
*
|
|
130
|
-
*
|
|
131
|
-
*
|
|
132
|
-
* -
|
|
85
|
+
* Use `variant` to select the loading strategy:
|
|
86
|
+
* - `"content"` — renders custom content inside a full-width row.
|
|
87
|
+
* - `"skeleton"` — renders skeleton placeholder rows.
|
|
88
|
+
* - `"overlay"` — keeps existing data visible with a loading overlay.
|
|
89
|
+
*/
|
|
90
|
+
loading?: DataTableLoadingConfig;
|
|
91
|
+
/**
|
|
92
|
+
* Adjusts font-size
|
|
93
|
+
* @default "medium"
|
|
94
|
+
*/
|
|
95
|
+
textSize?: "small" | "medium";
|
|
96
|
+
/**
|
|
97
|
+
* Object with props related to row selection.
|
|
98
|
+
*/
|
|
99
|
+
selection?: SelectionProps<T>;
|
|
100
|
+
/**
|
|
101
|
+
* Object with props related to nested rows (sub-rows).
|
|
133
102
|
*/
|
|
134
|
-
selection?: SelectionProps;
|
|
135
103
|
subRows?: SubRowsProps<T>;
|
|
104
|
+
/**
|
|
105
|
+
* Object with props related to details panel.
|
|
106
|
+
* This is a panel that can be expanded below each row to show arbitrary content.
|
|
107
|
+
*/
|
|
136
108
|
detailsPanel?: DetailsPanelProps<T>;
|
|
109
|
+
/**
|
|
110
|
+
* Object with props related to sorting.
|
|
111
|
+
*/
|
|
112
|
+
sorting?: TableSortOptions;
|
|
137
113
|
}
|
|
114
|
+
declare const DataTableInternal: React.ForwardRefExoticComponent<DataTableProps<any> & React.RefAttributes<HTMLTableElement>>;
|
|
138
115
|
declare const DataTable: <T>(props: DataTableProps<T> & React.RefAttributes<HTMLTableElement>) => React.ReactElement | null;
|
|
139
|
-
export { DataTable };
|
|
116
|
+
export { DataTable, DataTableInternal };
|
|
140
117
|
export type { DataTableProps };
|
|
141
118
|
export default DataTable;
|