@navikt/ds-react 8.10.5 → 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 +0 -1
- package/cjs/data/drag-and-drop/drag-handler/DragAndDropDragHandler.js.map +1 -1
- package/cjs/data/drag-and-drop/root/DragAndDropRoot.d.ts +5 -5
- package/cjs/data/drag-and-drop/root/DragAndDropRoot.js +4 -27
- package/cjs/data/drag-and-drop/root/DragAndDropRoot.js.map +1 -1
- package/cjs/data/stories/Data.test-data.d.ts +2 -5
- package/cjs/data/stories/Data.test-data.js +30 -38
- 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 +2 -2
- 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/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/useTableDetailsPanel.d.ts +10 -13
- package/cjs/data/table/hooks/useTableDetailsPanel.js +6 -5
- package/cjs/data/table/hooks/useTableDetailsPanel.js.map +1 -1
- package/cjs/data/table/hooks/useTableItems.d.ts +29 -15
- package/cjs/data/table/hooks/useTableItems.js +2 -12
- 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 +1 -4
- 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 -10
- 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 +54 -66
- 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 +0 -1
- package/esm/data/drag-and-drop/drag-handler/DragAndDropDragHandler.js.map +1 -1
- package/esm/data/drag-and-drop/root/DragAndDropRoot.d.ts +5 -5
- package/esm/data/drag-and-drop/root/DragAndDropRoot.js +4 -27
- package/esm/data/drag-and-drop/root/DragAndDropRoot.js.map +1 -1
- package/esm/data/stories/Data.test-data.d.ts +2 -5
- package/esm/data/stories/Data.test-data.js +30 -38
- 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 +2 -2
- 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/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/useTableDetailsPanel.d.ts +10 -13
- package/esm/data/table/hooks/useTableDetailsPanel.js +6 -5
- package/esm/data/table/hooks/useTableDetailsPanel.js.map +1 -1
- package/esm/data/table/hooks/useTableItems.d.ts +29 -15
- package/esm/data/table/hooks/useTableItems.js +3 -10
- 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 +1 -4
- 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 -10
- 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 +56 -68
- 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 +3 -3
- 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 +0 -1
- package/src/data/drag-and-drop/root/DragAndDropRoot.tsx +15 -49
- package/src/data/stories/Data.test-data.tsx +52 -43
- 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 +61 -58
- package/src/data/table/column-header/useTableColumnResize.ts +55 -71
- package/src/data/table/details-panel-row/DataTableDetailsPanelRow.tsx +3 -3
- package/src/data/table/helpers/collectTableRowEntries.ts +1 -2
- 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/hooks/__tests__/useTableItems.test.ts +2 -1
- package/src/data/table/hooks/useColumnOptions.ts +48 -14
- package/src/data/table/hooks/useTableDetailsPanel.tsx +22 -25
- package/src/data/table/hooks/useTableItems.ts +32 -24
- package/src/data/table/hooks/useTableKeyboardNav.ts +1 -13
- 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 -22
- 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 +244 -293
- 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-legacy/drag-handler/DragAndDropDragHandlerLegacy.d.ts +0 -22
- package/cjs/data/drag-and-drop-legacy/drag-handler/DragAndDropDragHandlerLegacy.js +0 -35
- package/cjs/data/drag-and-drop-legacy/drag-handler/DragAndDropDragHandlerLegacy.js.map +0 -1
- package/cjs/data/drag-and-drop-legacy/item/DragAndDropItemLegacy.d.ts +0 -27
- package/cjs/data/drag-and-drop-legacy/item/DragAndDropItemLegacy.js +0 -86
- package/cjs/data/drag-and-drop-legacy/item/DragAndDropItemLegacy.js.map +0 -1
- package/cjs/data/drag-and-drop-legacy/root/DragAndDropLegacy.context.d.ts +0 -5
- package/cjs/data/drag-and-drop-legacy/root/DragAndDropLegacy.context.js +0 -6
- package/cjs/data/drag-and-drop-legacy/root/DragAndDropLegacy.context.js.map +0 -1
- package/cjs/data/drag-and-drop-legacy/root/DragAndDropLegacyRoot.d.ts +0 -24
- package/cjs/data/drag-and-drop-legacy/root/DragAndDropLegacyRoot.js +0 -108
- package/cjs/data/drag-and-drop-legacy/root/DragAndDropLegacyRoot.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-legacy/drag-handler/DragAndDropDragHandlerLegacy.d.ts +0 -22
- package/esm/data/drag-and-drop-legacy/drag-handler/DragAndDropDragHandlerLegacy.js +0 -29
- package/esm/data/drag-and-drop-legacy/drag-handler/DragAndDropDragHandlerLegacy.js.map +0 -1
- package/esm/data/drag-and-drop-legacy/item/DragAndDropItemLegacy.d.ts +0 -27
- package/esm/data/drag-and-drop-legacy/item/DragAndDropItemLegacy.js +0 -50
- package/esm/data/drag-and-drop-legacy/item/DragAndDropItemLegacy.js.map +0 -1
- package/esm/data/drag-and-drop-legacy/root/DragAndDropLegacy.context.d.ts +0 -5
- package/esm/data/drag-and-drop-legacy/root/DragAndDropLegacy.context.js +0 -3
- package/esm/data/drag-and-drop-legacy/root/DragAndDropLegacy.context.js.map +0 -1
- package/esm/data/drag-and-drop-legacy/root/DragAndDropLegacyRoot.d.ts +0 -24
- package/esm/data/drag-and-drop-legacy/root/DragAndDropLegacyRoot.js +0 -68
- package/esm/data/drag-and-drop-legacy/root/DragAndDropLegacyRoot.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-legacy/drag-handler/DragAndDropDragHandlerLegacy.tsx +0 -104
- package/src/data/drag-and-drop-legacy/item/DragAndDropItemLegacy.tsx +0 -74
- package/src/data/drag-and-drop-legacy/root/DragAndDropLegacy.context.tsx +0 -11
- package/src/data/drag-and-drop-legacy/root/DragAndDropLegacyRoot.tsx +0 -94
- 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
- package/src/data/table/root/agent-feature-gap.md +0 -96
|
@@ -1,19 +1,18 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
interface DataTableBaseCellProps extends React.
|
|
2
|
+
interface DataTableBaseCellProps extends Omit<React.TdHTMLAttributes<HTMLTableCellElement>, "width"> {
|
|
3
3
|
/**
|
|
4
|
-
* Content alignment inside cell
|
|
4
|
+
* Content alignment inside cell.
|
|
5
|
+
*
|
|
6
|
+
* Quantitative figures like amounts and percentages should be right‑aligned (but not phone numbers, postal codes etc.)
|
|
5
7
|
* @default "left"
|
|
6
8
|
*/
|
|
7
9
|
textAlign?: "left" | "center" | "right";
|
|
8
10
|
/**
|
|
9
|
-
*
|
|
11
|
+
* Internal cell type that controls padding, alignment, row-click prevention, and resize behavior.
|
|
12
|
+
* - `"action"`: Centers content, removes cell padding, prevents row click, and disables column resize.
|
|
13
|
+
* Used for selection (checkbox/radio) and expansion (expand/collapse) cells.
|
|
10
14
|
*/
|
|
11
|
-
|
|
12
|
-
rowSpan?: number;
|
|
13
|
-
/**
|
|
14
|
-
* Temp hack to solve overflow and alignment
|
|
15
|
-
*/
|
|
16
|
-
UNSAFE_isSelection?: boolean;
|
|
15
|
+
cellType?: "action";
|
|
17
16
|
/**
|
|
18
17
|
* When true, clicking this cell will not trigger `onRowClick` on the row.
|
|
19
18
|
* Useful for cells that contain their own interactive content or actions
|
|
@@ -25,22 +24,23 @@ interface DataTableBaseCellProps extends React.HTMLAttributes<HTMLTableCellEleme
|
|
|
25
24
|
* This is only needed when using `layout="auto"` together with
|
|
26
25
|
* `truncateContent` on `<DataTable>` and you want the cell to be truncated.
|
|
27
26
|
*/
|
|
28
|
-
contentMaxWidth?: number |
|
|
27
|
+
contentMaxWidth?: number | string;
|
|
29
28
|
/**
|
|
30
29
|
* Makes the cell sticky.
|
|
31
30
|
*/
|
|
32
31
|
isSticky?: "start" | "end" | false;
|
|
33
32
|
}
|
|
34
|
-
/**
|
|
35
|
-
* TODO:
|
|
36
|
-
* - Need a "type" or something that centers content instead of relying on isSelection prop.
|
|
37
|
-
* - Need a separate prop do disabled resizing instead of relying on isSelection prop.
|
|
38
|
-
*/
|
|
39
33
|
declare const DataTableBaseCell: React.ForwardRefExoticComponent<DataTableBaseCellProps & {
|
|
40
34
|
/**
|
|
41
35
|
* Cell type
|
|
42
36
|
*/
|
|
43
37
|
as: "th" | "td";
|
|
38
|
+
/**
|
|
39
|
+
* Content to render before the main cell content.
|
|
40
|
+
*
|
|
41
|
+
* **WARNING: Adding content here that takes up space will probably break auto-resizing!**
|
|
42
|
+
*/
|
|
43
|
+
beforeContent?: React.ReactNode;
|
|
44
44
|
} & React.RefAttributes<HTMLTableCellElement>>;
|
|
45
45
|
export { DataTableBaseCell };
|
|
46
46
|
export type { DataTableBaseCellProps };
|
|
@@ -48,16 +48,12 @@ exports.DataTableBaseCell = void 0;
|
|
|
48
48
|
const react_1 = __importStar(require("react"));
|
|
49
49
|
const helpers_1 = require("../../../utils/helpers");
|
|
50
50
|
const DataTableRoot_context_1 = require("../root/DataTableRoot.context");
|
|
51
|
-
/**
|
|
52
|
-
* TODO:
|
|
53
|
-
* - Need a "type" or something that centers content instead of relying on isSelection prop.
|
|
54
|
-
* - Need a separate prop do disabled resizing instead of relying on isSelection prop.
|
|
55
|
-
*/
|
|
56
51
|
const DataTableBaseCell = (0, react_1.forwardRef)((_a, forwardedRef) => {
|
|
57
|
-
var { className, children, as: Component, textAlign = "left",
|
|
52
|
+
var { className, children, as: Component, beforeContent, textAlign = "left", cellType, preventRowClick, contentMaxWidth, isSticky, colSpan, rowSpan } = _a, rest = __rest(_a, ["className", "children", "as", "beforeContent", "textAlign", "cellType", "preventRowClick", "contentMaxWidth", "isSticky", "colSpan", "rowSpan"]);
|
|
58
53
|
const { withKeyboardNav } = (0, DataTableRoot_context_1.useDataTableContext)();
|
|
59
|
-
return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: forwardedRef, className: (0, helpers_1.cl)("aksel-data-table__cell", className), tabIndex: withKeyboardNav ? -1 : undefined, "data-align": textAlign, "data-
|
|
60
|
-
|
|
54
|
+
return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: forwardedRef, className: (0, helpers_1.cl)("aksel-data-table__cell", className), tabIndex: withKeyboardNav ? -1 : undefined, "data-align": textAlign, "data-cell-type": cellType || undefined, "data-prevent-row-click": preventRowClick || cellType === "action" || undefined, "data-sticky": isSticky || undefined, colSpan: colSpan, rowSpan: rowSpan }),
|
|
55
|
+
beforeContent,
|
|
56
|
+
react_1.default.createElement("div", { className: "aksel-data-table__cell-content", style: { maxWidth: contentMaxWidth } }, children)));
|
|
61
57
|
});
|
|
62
58
|
exports.DataTableBaseCell = DataTableBaseCell;
|
|
63
59
|
//# sourceMappingURL=DataTableBaseCell.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableBaseCell.js","sourceRoot":"","sources":["../../../../src/data/table/base-cell/DataTableBaseCell.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,oDAA4C;AAC5C,yEAAoE;
|
|
1
|
+
{"version":3,"file":"DataTableBaseCell.js","sourceRoot":"","sources":["../../../../src/data/table/base-cell/DataTableBaseCell.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,oDAA4C;AAC5C,yEAAoE;AAqCpE,MAAM,iBAAiB,GAAG,IAAA,kBAAU,EAelC,CACE,EAaC,EACD,YAAY,EACZ,EAAE;QAfF,EACE,SAAS,EACT,QAAQ,EACR,EAAE,EAAE,SAAS,EACb,aAAa,EACb,SAAS,GAAG,MAAM,EAClB,QAAQ,EACR,eAAe,EACf,eAAe,EACf,QAAQ,EACR,OAAO,EACP,OAAO,OAER,EADI,IAAI,cAZT,iJAaC,CADQ;IAIT,MAAM,EAAE,eAAe,EAAE,GAAG,IAAA,2CAAmB,GAAE,CAAC;IAElD,OAAO,CACL,8BAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,YAAE,EAAC,wBAAwB,EAAE,SAAS,CAAC,EAClD,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,gBAC9B,SAAS,oBACL,QAAQ,IAAI,SAAS,4BAEnC,eAAe,IAAI,QAAQ,KAAK,QAAQ,IAAI,SAAS,iBAE1C,QAAQ,IAAI,SAAS,EAClC,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO;QAEf,aAAa;QACd,uCACE,SAAS,EAAC,gCAAgC,EAC1C,KAAK,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,IAEnC,QAAQ,CACL,CACI,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,8CAAiB"}
|
|
@@ -2,27 +2,45 @@ import React from "react";
|
|
|
2
2
|
import { type DataTableBaseCellProps } from "../base-cell/DataTableBaseCell";
|
|
3
3
|
import type { SortDirection } from "../root/DataTable.types";
|
|
4
4
|
import { type ResizeProps } from "./useTableColumnResize";
|
|
5
|
-
interface DataTableColumnHeaderProps extends
|
|
5
|
+
interface DataTableColumnHeaderProps extends DataTableBaseCellProps {
|
|
6
|
+
/**
|
|
7
|
+
* Unique identifier for the column. Required for sortable columns to identify which column is being sorted.
|
|
8
|
+
*/
|
|
9
|
+
id?: string;
|
|
6
10
|
/**
|
|
7
11
|
* Accessible name of the column.
|
|
8
12
|
*/
|
|
9
13
|
label: string;
|
|
10
14
|
/**
|
|
11
|
-
* Makes the column
|
|
12
|
-
* a clickable button when true.
|
|
15
|
+
* Makes the column sortable by clicking on the header.
|
|
16
|
+
* The entire header cell content becomes a clickable button when true.
|
|
13
17
|
*/
|
|
14
18
|
sortable?: boolean;
|
|
15
19
|
/**
|
|
16
20
|
* Current sort direction. Only relevant when `sortable` is true.
|
|
17
|
-
* Uses values matching the `aria-sort` attribute directly.
|
|
21
|
+
* Uses values matching the `aria-sort` attribute directly. // TODO: What does this mean? (Can we just remove it?)
|
|
18
22
|
* @default "none"
|
|
19
23
|
*/
|
|
20
24
|
sortDirection?: SortDirection;
|
|
21
25
|
/**
|
|
22
|
-
* Called when the user clicks the sortable
|
|
23
|
-
* The consumer is responsible for determining and setting the next sort state.
|
|
26
|
+
* Called when the user clicks the header. Only relevant when `sortable` is true.
|
|
27
|
+
* The consumer is responsible for determining and setting the next sort state. // TODO: We don't use the term "consumer" in JSDoc anywhere else
|
|
24
28
|
*/
|
|
25
29
|
onSortClick?: (event: React.MouseEvent<HTMLElement>) => void;
|
|
30
|
+
/**
|
|
31
|
+
* Object with props related to column width and resizing. Summary:
|
|
32
|
+
*
|
|
33
|
+
* - `resizable?: boolean` - Whether the column should be resizable by the user.
|
|
34
|
+
* - `autoResizeOnce?: boolean` - Whether the column should automatically resize to fit its content.
|
|
35
|
+
* - `resizeMin?: number` - Minimum width of the column when resizing.
|
|
36
|
+
* - `resizeMax?: number` - Maximum width of the column when resizing.
|
|
37
|
+
* - `value?: number | string` - Controlled width of the column.
|
|
38
|
+
* - `default?: number | string` - Initial width of the column.
|
|
39
|
+
* - `onChange?: (width: number) => void` - Called when the column width changes.
|
|
40
|
+
*
|
|
41
|
+
* See individual props for details and defaults.
|
|
42
|
+
*/
|
|
43
|
+
width?: ResizeProps;
|
|
26
44
|
}
|
|
27
45
|
/**
|
|
28
46
|
* TODO:
|
|
@@ -50,6 +50,7 @@ const aksel_icons_1 = require("@navikt/aksel-icons");
|
|
|
50
50
|
const helpers_1 = require("../../../utils/helpers");
|
|
51
51
|
const hooks_1 = require("../../../utils/hooks");
|
|
52
52
|
const DataTableBaseCell_1 = require("../base-cell/DataTableBaseCell");
|
|
53
|
+
const DataTableRoot_context_1 = require("../root/DataTableRoot.context");
|
|
53
54
|
const useTableColumnResize_1 = require("./useTableColumnResize");
|
|
54
55
|
const SORT_ICON = {
|
|
55
56
|
asc: aksel_icons_1.SortUpIcon,
|
|
@@ -62,41 +63,35 @@ const SORT_ICON = {
|
|
|
62
63
|
* Toggling `data-block-keyboard-nav` does not work since the created "grid" does not update when toggling this attribute.
|
|
63
64
|
*/
|
|
64
65
|
const DataTableColumnHeader = (0, react_1.forwardRef)((_a, forwardedRef) => {
|
|
65
|
-
var {
|
|
66
|
-
const contentRef = react_1.default.useRef(null);
|
|
66
|
+
var { id, label, sortable = false, width, cellType, className, children, style } = _a, rest = __rest(_a, ["id", "label", "sortable", "width", "cellType", "className", "children", "style"]);
|
|
67
67
|
const thRef = (0, react_1.useRef)(null);
|
|
68
68
|
const mergedRef = (0, hooks_1.useMergeRefs)(forwardedRef, thRef);
|
|
69
|
-
const
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
react_1.default.createElement("div", { ref: contentRef, className: "aksel-data-table__th-content" }, children),
|
|
85
|
-
SortIcon && (react_1.default.createElement(SortIcon, { "aria-hidden": true, "data-sort-direction": sortDirection, className: "aksel-data-table__th-sort-icon", fontSize: "1.25rem" })))) : (react_1.default.createElement("div", { ref: contentRef, className: (0, helpers_1.cl)({
|
|
86
|
-
"aksel-data-table__th-content": !UNSAFE_isSelection,
|
|
69
|
+
const { sortingState } = (0, DataTableRoot_context_1.useDataTableContext)();
|
|
70
|
+
const { onSortClick, sortState } = sortingState;
|
|
71
|
+
const resizeResult = (0, useTableColumnResize_1.useTableColumnResize)(Object.assign(Object.assign({}, width), { thRef, colSpan: rest.colSpan }));
|
|
72
|
+
const sortDirection = (0, react_1.useMemo)(() => {
|
|
73
|
+
var _a;
|
|
74
|
+
const sortEntry = sortState.find((s) => s.columnId === id);
|
|
75
|
+
return (_a = sortEntry === null || sortEntry === void 0 ? void 0 : sortEntry.direction) !== null && _a !== void 0 ? _a : "none";
|
|
76
|
+
}, [id, sortState]);
|
|
77
|
+
const canSort = sortable && id !== undefined;
|
|
78
|
+
const SortIcon = canSort ? SORT_ICON[sortDirection] : null;
|
|
79
|
+
return (react_1.default.createElement(DataTableBaseCell_1.DataTableBaseCell, Object.assign({ as: "th" }, rest, { ref: mergedRef, className: (0, helpers_1.cl)("aksel-data-table__column-header", className), "data-sortable": canSort, style: Object.assign(Object.assign({}, style), { width: resizeResult.width }), "aria-sort": canSort ? getAriaSort(sortDirection) : undefined, cellType: cellType }),
|
|
80
|
+
canSort ? (react_1.default.createElement("button", { type: "button", className: "aksel-data-table__th-sort-button", onClick: (event) => onSortClick(id, event) },
|
|
81
|
+
react_1.default.createElement("div", { className: "aksel-data-table__th-content" }, children),
|
|
82
|
+
SortIcon && (react_1.default.createElement(SortIcon, { "aria-hidden": true, "data-sort-direction": sortDirection, className: "aksel-data-table__th-sort-icon", fontSize: "1.25rem" })))) : (react_1.default.createElement("div", { className: (0, helpers_1.cl)({
|
|
83
|
+
"aksel-data-table__th-content": cellType !== "action",
|
|
87
84
|
}) }, children)),
|
|
88
|
-
resizeResult.enabled &&
|
|
85
|
+
resizeResult.enabled && cellType !== "action" && (react_1.default.createElement("button", Object.assign({}, resizeResult.resizeHandlerProps, { type: "button", className: "aksel-data-table__th-resize-handle", "aria-label": resizeResult.isResizingWithKeyboard
|
|
89
86
|
? "Bruk pil venstre/høyre"
|
|
90
|
-
: `Endre bredde ${label}`, "data-active": resizeResult.isResizingWithKeyboard, "data-disable-keyboard-nav": resizeResult.isResizingWithKeyboard, "data-block-keyboard-nav": true, role: "slider", "aria-valuenow": typeof resizeResult.
|
|
91
|
-
? resizeResult.style.width
|
|
92
|
-
: 0, "aria-valuetext": typeof resizeResult.style.width === "number" &&
|
|
87
|
+
: `Endre bredde ${label}`, "data-active": resizeResult.isResizingWithKeyboard, "data-disable-keyboard-nav": resizeResult.isResizingWithKeyboard, "data-block-keyboard-nav": true, role: "slider", "aria-valuenow": typeof resizeResult.width === "number" ? resizeResult.width : 0, "aria-valuetext": typeof resizeResult.width === "number" &&
|
|
93
88
|
resizeResult.isResizingWithKeyboard
|
|
94
|
-
? resizeResult.
|
|
89
|
+
? resizeResult.width.toString()
|
|
95
90
|
: "" // Needs to be blank when not in keyboard resizing mode to avoid NVDA announcing the value as part of the column heading
|
|
96
91
|
}), resizeResult.isResizingWithKeyboard && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
97
|
-
react_1.default.createElement("span", { className: "aksel-data-table__th-resize-handle-indicator
|
|
92
|
+
react_1.default.createElement("span", { className: "aksel-data-table__th-resize-handle-indicator" },
|
|
98
93
|
react_1.default.createElement(aksel_icons_1.CaretLeftCircleFillIcon, { "aria-hidden": true, fontSize: "1.5rem" })),
|
|
99
|
-
react_1.default.createElement("span", { className: "aksel-data-table__th-resize-handle-indicator
|
|
94
|
+
react_1.default.createElement("span", { className: "aksel-data-table__th-resize-handle-indicator" },
|
|
100
95
|
react_1.default.createElement(aksel_icons_1.CaretRightCircleFillIcon, { "aria-hidden": true, fontSize: "1.5rem" }))))))));
|
|
101
96
|
});
|
|
102
97
|
exports.DataTableColumnHeader = DataTableColumnHeader;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableColumnHeader.js","sourceRoot":"","sources":["../../../../src/data/table/column-header/DataTableColumnHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+
|
|
1
|
+
{"version":3,"file":"DataTableColumnHeader.js","sourceRoot":"","sources":["../../../../src/data/table/column-header/DataTableColumnHeader.tsx"],"names":[],"mappings":"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"}
|
|
@@ -16,56 +16,47 @@ type ResizeProps = {
|
|
|
16
16
|
* consider using `layout="auto"` on the root instead for better performance.
|
|
17
17
|
*
|
|
18
18
|
* **NB:** This can cause a layout shift. Set a good initial width with `width` or `defaultWidth` to mitigate this.
|
|
19
|
+
*
|
|
20
|
+
* **NB:** Does not work with block content.
|
|
19
21
|
*/
|
|
20
|
-
|
|
22
|
+
autoResizeOnce?: boolean;
|
|
21
23
|
/**
|
|
22
|
-
* Minimum width of the column when resizing. Only used when `resizable` or `
|
|
24
|
+
* Minimum width of the column when resizing. Only used when `resizable` or `autoResizeOnce` is enabled.
|
|
23
25
|
* @default 40
|
|
24
26
|
*/
|
|
25
|
-
|
|
27
|
+
resizeMin?: number;
|
|
26
28
|
/**
|
|
27
|
-
* Maximum width of the column when resizing. Only used when `resizable` or `
|
|
29
|
+
* Maximum width of the column when resizing. Only used when `resizable` or `autoResizeOnce` is enabled.
|
|
28
30
|
*/
|
|
29
|
-
|
|
31
|
+
resizeMax?: number;
|
|
30
32
|
/**
|
|
31
|
-
* Controlled width of the column. Does not respect `
|
|
33
|
+
* Controlled width of the column. (Does not respect `resizeMin` and `resizeMax`.)
|
|
32
34
|
*
|
|
33
|
-
* Should only be used to fully control column width state. Otherwise, use `
|
|
35
|
+
* Should only be used to fully control column width state. Otherwise, use `default` and let the component handle resizing.
|
|
34
36
|
*
|
|
35
37
|
* **NB:** Percentage as initial width does not work well with resizing.
|
|
36
38
|
*/
|
|
37
|
-
|
|
39
|
+
value?: number | string;
|
|
38
40
|
/**
|
|
39
|
-
* Initial width of the column. Only used when `
|
|
40
|
-
* Does not respect `
|
|
41
|
+
* Initial width of the column. Only used when `value` is not set.
|
|
42
|
+
* (Does not respect `resizeMin` and `resizeMax`.)
|
|
41
43
|
*
|
|
42
44
|
* **NB:** Percentage as initial width does not work well with resizing.
|
|
43
45
|
* @default 140px
|
|
44
46
|
*/
|
|
45
|
-
|
|
47
|
+
default?: number | string;
|
|
46
48
|
/**
|
|
47
49
|
* Called when the column width changes.
|
|
48
50
|
* @param width New width in pixels.
|
|
49
51
|
*/
|
|
50
|
-
|
|
51
|
-
/**
|
|
52
|
-
* Forwarded styles
|
|
53
|
-
*/
|
|
54
|
-
style?: React.CSSProperties;
|
|
55
|
-
/**
|
|
56
|
-
* Forwarded colSpan
|
|
57
|
-
*/
|
|
58
|
-
colSpan?: number;
|
|
52
|
+
onChange?: (width: number) => void;
|
|
59
53
|
};
|
|
60
|
-
type
|
|
61
|
-
[K in keyof T]: T[K] | undefined;
|
|
62
|
-
};
|
|
63
|
-
type Unomittable<T> = WithUndefined<Required<T>>;
|
|
64
|
-
type TableColumnResizeArgs = Unomittable<ResizeProps> & {
|
|
54
|
+
type TableColumnResizeArgs = ResizeProps & {
|
|
65
55
|
thRef: React.RefObject<HTMLTableCellElement | null>;
|
|
56
|
+
colSpan: number | undefined;
|
|
66
57
|
};
|
|
67
58
|
type TableColumnResizeResult = {
|
|
68
|
-
|
|
59
|
+
width: number | string;
|
|
69
60
|
resizeHandlerProps: {
|
|
70
61
|
onMouseDown: DOMAttributes<HTMLButtonElement>["onMouseDown"];
|
|
71
62
|
onTouchStart: DOMAttributes<HTMLButtonElement>["onTouchStart"];
|
|
@@ -77,15 +68,14 @@ type TableColumnResizeResult = {
|
|
|
77
68
|
isResizingWithKeyboard: boolean;
|
|
78
69
|
enabled: true;
|
|
79
70
|
} | {
|
|
80
|
-
|
|
71
|
+
width?: number | string;
|
|
81
72
|
enabled: false;
|
|
82
73
|
};
|
|
83
74
|
/**
|
|
84
75
|
* TODO:
|
|
85
|
-
* - Do we allow % widths?
|
|
86
76
|
* - Auto-width mode is hard now since that might cause layout-shifts on mount. But would be preferable to
|
|
87
77
|
* be able to set "1fr" or similar and have it fill remaining space.
|
|
88
78
|
*/
|
|
89
|
-
declare function useTableColumnResize(
|
|
79
|
+
declare function useTableColumnResize({ resizable, autoResizeOnce, resizeMin, resizeMax, value, default: defaultProp, onChange, thRef, colSpan, }: TableColumnResizeArgs): TableColumnResizeResult;
|
|
90
80
|
export { useTableColumnResize };
|
|
91
81
|
export type { ResizeProps };
|
|
@@ -6,41 +6,39 @@ const hooks_1 = require("../../../utils/hooks");
|
|
|
6
6
|
const DataTableRoot_context_1 = require("../root/DataTableRoot.context");
|
|
7
7
|
/**
|
|
8
8
|
* TODO:
|
|
9
|
-
* - Do we allow % widths?
|
|
10
9
|
* - Auto-width mode is hard now since that might cause layout-shifts on mount. But would be preferable to
|
|
11
10
|
* be able to set "1fr" or similar and have it fill remaining space.
|
|
12
11
|
*/
|
|
13
|
-
function useTableColumnResize(
|
|
14
|
-
const { resizable, thRef, width: userWidth, defaultWidth, autoWidth, onWidthChange, maxWidth = Infinity, minWidth = 40, style, colSpan, } = args;
|
|
12
|
+
function useTableColumnResize({ resizable = true, autoResizeOnce, resizeMin = 40, resizeMax = Infinity, value, default: defaultProp, onChange, thRef, colSpan, }) {
|
|
15
13
|
const tableContext = (0, DataTableRoot_context_1.useDataTableContext)();
|
|
16
14
|
const [isResizingWithKeyboard, setIsResizingWithKeyboard] = (0, react_1.useState)(false);
|
|
17
15
|
const ignoreNextOnClick = (0, react_1.useRef)(false);
|
|
18
16
|
const [width, setWidth] = (0, hooks_1.useControllableState)({
|
|
19
|
-
value
|
|
20
|
-
defaultValue:
|
|
17
|
+
value,
|
|
18
|
+
defaultValue: defaultProp !== null && defaultProp !== void 0 ? defaultProp : (colSpan !== null && colSpan !== void 0 ? colSpan : 1) * 140,
|
|
21
19
|
/**
|
|
22
20
|
* TODO:
|
|
23
21
|
* - Potential optimization: Only call when width as "stopped" changing, e.g. on mouse up or after a debounce when resizing with keyboard.
|
|
24
22
|
* Otherwise, this could cause excessive calls when resizing quickly.
|
|
25
23
|
*/
|
|
26
|
-
onChange
|
|
24
|
+
onChange,
|
|
27
25
|
});
|
|
28
26
|
const setClampedWidth = (0, react_1.useCallback)((newWidth) => {
|
|
29
|
-
setWidth(Math.min(Math.max(newWidth,
|
|
30
|
-
}, [
|
|
31
|
-
// biome-ignore lint/correctness/useExhaustiveDependencies: We only want to run this on mount and when
|
|
27
|
+
setWidth(Math.min(Math.max(newWidth, resizeMin), resizeMax));
|
|
28
|
+
}, [resizeMin, resizeMax, setWidth]);
|
|
29
|
+
// biome-ignore lint/correctness/useExhaustiveDependencies: We only want to run this on mount and when autoResizeOnce changes
|
|
32
30
|
(0, react_1.useEffect)(function autoResizeColumn() {
|
|
33
|
-
if (!
|
|
31
|
+
if (!autoResizeOnce) {
|
|
34
32
|
return;
|
|
35
33
|
}
|
|
36
34
|
const newColumnWidth = getAutoColumnWidth(thRef);
|
|
37
35
|
if (newColumnWidth) {
|
|
38
36
|
setClampedWidth(newColumnWidth);
|
|
39
37
|
}
|
|
40
|
-
}, [
|
|
38
|
+
}, [autoResizeOnce]);
|
|
41
39
|
const handleOnClick = (0, react_1.useCallback)(() => {
|
|
42
40
|
// We need to use the onClick event in order to support screen readers properly,
|
|
43
|
-
// since some of them only send a mouse click when pressing enter/space.
|
|
41
|
+
// since some of them only send a mouse click (no kbd events) when pressing enter/space.
|
|
44
42
|
// We detect a "screen reader click" by checking if we had a mouseUp event right before.
|
|
45
43
|
if (ignoreNextOnClick.current) {
|
|
46
44
|
ignoreNextOnClick.current = false;
|
|
@@ -84,11 +82,11 @@ function useTableColumnResize(args) {
|
|
|
84
82
|
var _a, _b;
|
|
85
83
|
const currentWidth = (_b = (_a = thRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0;
|
|
86
84
|
const newWidth = startWidth + (clientX - startX);
|
|
87
|
-
if (newWidth >
|
|
85
|
+
if (newWidth > resizeMax) {
|
|
88
86
|
setWidth(newWidth < currentWidth ? newWidth : currentWidth);
|
|
89
87
|
return;
|
|
90
88
|
}
|
|
91
|
-
if (newWidth <
|
|
89
|
+
if (newWidth < resizeMin) {
|
|
92
90
|
setWidth(newWidth > currentWidth ? newWidth : currentWidth);
|
|
93
91
|
return;
|
|
94
92
|
}
|
|
@@ -114,14 +112,14 @@ function useTableColumnResize(args) {
|
|
|
114
112
|
document.addEventListener("mouseup", cleanup, { once: true });
|
|
115
113
|
document.addEventListener("touchend", cleanup, { once: true });
|
|
116
114
|
document.addEventListener("touchcancel", cleanup, { once: true });
|
|
117
|
-
}, [
|
|
115
|
+
}, [resizeMax, resizeMin, setWidth, setClampedWidth, thRef]);
|
|
118
116
|
const handleMouseDown = (0, react_1.useCallback)((event) => {
|
|
119
117
|
startResize(event.clientX);
|
|
120
118
|
}, [startResize]);
|
|
121
119
|
const handleTouchStart = (0, react_1.useCallback)((event) => {
|
|
122
120
|
startResize(event.touches[0].clientX);
|
|
123
121
|
}, [startResize]);
|
|
124
|
-
// Auto-size column to fit content on double click
|
|
122
|
+
// Auto-size column to fit content on double click
|
|
125
123
|
const handleDoubleClick = (0, react_1.useCallback)(() => {
|
|
126
124
|
const newColumnWidth = getAutoColumnWidth(thRef);
|
|
127
125
|
if (newColumnWidth) {
|
|
@@ -130,18 +128,17 @@ function useTableColumnResize(args) {
|
|
|
130
128
|
}, [setClampedWidth, thRef]);
|
|
131
129
|
if (tableContext.layout !== "fixed") {
|
|
132
130
|
return {
|
|
133
|
-
style,
|
|
134
131
|
enabled: false,
|
|
135
132
|
};
|
|
136
133
|
}
|
|
137
134
|
if (!resizable) {
|
|
138
135
|
return {
|
|
139
|
-
|
|
136
|
+
width,
|
|
140
137
|
enabled: false,
|
|
141
138
|
};
|
|
142
139
|
}
|
|
143
140
|
return {
|
|
144
|
-
|
|
141
|
+
width,
|
|
145
142
|
resizeHandlerProps: {
|
|
146
143
|
onMouseDown: handleMouseDown,
|
|
147
144
|
onTouchStart: handleTouchStart,
|
|
@@ -154,11 +151,15 @@ function useTableColumnResize(args) {
|
|
|
154
151
|
enabled: true,
|
|
155
152
|
};
|
|
156
153
|
}
|
|
154
|
+
/**
|
|
155
|
+
* Figures out how wide the column needs to be to fit all the content without truncation.
|
|
156
|
+
* NB: Does not work with block content!
|
|
157
|
+
*/
|
|
157
158
|
function getAutoColumnWidth(thRef) {
|
|
158
159
|
var _a;
|
|
159
160
|
const th = thRef.current;
|
|
160
161
|
const thContent = th.querySelector(".aksel-data-table__th-content");
|
|
161
|
-
const thPaddingEl = th.querySelector("
|
|
162
|
+
const thPaddingEl = th.querySelector(".aksel-data-table__cell-content");
|
|
162
163
|
const rows = (_a = th.closest("table")) === null || _a === void 0 ? void 0 : _a.querySelectorAll("tbody tr, tfoot tr");
|
|
163
164
|
if (!thContent || !thPaddingEl || !rows) {
|
|
164
165
|
return;
|
|
@@ -195,13 +196,14 @@ function getAutoColumnWidth(thRef) {
|
|
|
195
196
|
}
|
|
196
197
|
skipRows = cell.rowSpan - 1;
|
|
197
198
|
// Find needed width
|
|
198
|
-
const cellContent = cell.
|
|
199
|
+
const cellContent = cell.querySelector(".aksel-data-table__cell-content");
|
|
199
200
|
range.selectNodeContents(cellContent);
|
|
200
201
|
const cellContentWidth = range.getBoundingClientRect().width;
|
|
201
202
|
const contentElStyle = window.getComputedStyle(cellContent);
|
|
202
203
|
const inlinePadding = parseInt(contentElStyle.paddingLeft, 10) +
|
|
203
204
|
parseInt(contentElStyle.paddingRight, 10);
|
|
204
|
-
const
|
|
205
|
+
const marginLeft = parseInt(contentElStyle.marginLeft, 10); // We don't have right margin for now
|
|
206
|
+
const widthNeededForThisCell = (cellContentWidth + inlinePadding + marginLeft) / cell.colSpan;
|
|
205
207
|
if (widthNeededForThisCell > newColumnWidth) {
|
|
206
208
|
newColumnWidth = widthNeededForThisCell;
|
|
207
209
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTableColumnResize.js","sourceRoot":"","sources":["../../../../src/data/table/column-header/useTableColumnResize.ts"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"useTableColumnResize.js","sourceRoot":"","sources":["../../../../src/data/table/column-header/useTableColumnResize.ts"],"names":[],"mappings":"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"}
|
|
@@ -8,7 +8,7 @@ const react_1 = __importDefault(require("react"));
|
|
|
8
8
|
const useTableDetailsPanel_1 = require("../hooks/useTableDetailsPanel");
|
|
9
9
|
const DataTableRoot_context_1 = require("../root/DataTableRoot.context");
|
|
10
10
|
function DataTableDetailsPanelRow({ rowId, rowData, }) {
|
|
11
|
-
const { tableId,
|
|
11
|
+
const { tableId, totalColSpan } = (0, DataTableRoot_context_1.useDataTableContext)();
|
|
12
12
|
const { enableDetailsPanel, isExpanded, getDetailsPanelContent, getDetailsPanelHeight, } = (0, useTableDetailsPanel_1.useDataTableDetailsPanel)();
|
|
13
13
|
if (!enableDetailsPanel) {
|
|
14
14
|
return null;
|
|
@@ -26,7 +26,7 @@ function DataTableDetailsPanelRow({ rowId, rowData, }) {
|
|
|
26
26
|
? { height: panelHeight, overflow: "auto" }
|
|
27
27
|
: { height: "auto" };
|
|
28
28
|
return (react_1.default.createElement("tr", { className: "aksel-data-table__details-panel-row" },
|
|
29
|
-
react_1.default.createElement("td", { id: expansionId, colSpan:
|
|
29
|
+
react_1.default.createElement("td", { id: expansionId, colSpan: totalColSpan, className: "aksel-data-table__details-panel-row-cell" },
|
|
30
30
|
react_1.default.createElement("div", { style: style }, content))));
|
|
31
31
|
}
|
|
32
32
|
//# sourceMappingURL=DataTableDetailsPanelRow.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableDetailsPanelRow.js","sourceRoot":"","sources":["../../../../src/data/table/details-panel-row/DataTableDetailsPanelRow.tsx"],"names":[],"mappings":";;;;;AAwDS,4DAAwB;AAxDjC,kDAA0B;AAC1B,wEAGuC;AACvC,yEAAoE;AAEpE,SAAS,wBAAwB,CAAI,EACnC,KAAK,EACL,OAAO,GAIR;IACC,MAAM,EAAE,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"DataTableDetailsPanelRow.js","sourceRoot":"","sources":["../../../../src/data/table/details-panel-row/DataTableDetailsPanelRow.tsx"],"names":[],"mappings":";;;;;AAwDS,4DAAwB;AAxDjC,kDAA0B;AAC1B,wEAGuC;AACvC,yEAAoE;AAEpE,SAAS,wBAAwB,CAAI,EACnC,KAAK,EACL,OAAO,GAIR;IACC,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,IAAA,2CAAmB,GAAE,CAAC;IACxD,MAAM,EACJ,kBAAkB,EAClB,UAAU,EACV,sBAAsB,EACtB,qBAAqB,GACtB,GAAG,IAAA,+CAAwB,GAAE,CAAC;IAE/B,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACxB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC;QACvB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,OAAO,GAAG,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAG,OAAO,CAAC,CAAC;IAClD,MAAM,WAAW,GAAG,IAAA,iDAA0B,EAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IAE/D,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,WAAW,GAAG,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAG,OAAO,CAAC,CAAC;IAErD,MAAM,KAAK,GAAwB,WAAW;QAC5C,CAAC,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE;QAC3C,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;IAEvB,OAAO,CACL,sCAAI,SAAS,EAAC,qCAAqC;QACjD,sCACE,EAAE,EAAE,WAAW,EACf,OAAO,EAAE,YAAY,EACrB,SAAS,EAAC,0CAA0C;YAEpD,uCAAK,KAAK,EAAE,KAAK,IAAG,OAAO,CAAO,CAC/B,CACF,CACN,CAAC;AACJ,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
type TableRowEntryId
|
|
1
|
+
import type { TableRowEntryId } from "../root/DataTable.types";
|
|
2
2
|
type CollectTableRowEntriesArgs<T> = {
|
|
3
3
|
items: T[];
|
|
4
4
|
getRowId?: (rowData: T, index: number) => TableRowEntryId;
|
|
@@ -23,4 +23,4 @@ type CollectTableRowEntriesReturn<T> = {
|
|
|
23
23
|
};
|
|
24
24
|
declare function collectTableRowEntries<T>({ items, getRowId, getRows, isRowExpandable, }: CollectTableRowEntriesArgs<T>): CollectTableRowEntriesReturn<T>;
|
|
25
25
|
export { collectTableRowEntries };
|
|
26
|
-
export type { CollectTableRowEntriesArgs, CollectTableRowEntriesReturn,
|
|
26
|
+
export type { CollectTableRowEntriesArgs, CollectTableRowEntriesReturn, ItemDetail, };
|
|
@@ -1,15 +1,17 @@
|
|
|
1
|
+
import type { SetStateAction } from "react";
|
|
1
2
|
import type { CheckboxInputProps } from "../../../../form/checkbox/checkbox-input/CheckboxInput";
|
|
2
|
-
type
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
3
|
+
import type { UseTableItemsReturn } from "../../hooks/useTableItems";
|
|
4
|
+
import type { TableRowEntryId } from "../../root/DataTable.types";
|
|
5
|
+
import type { SelectedKeysT, SelectionProps } from "./selection.types";
|
|
6
|
+
type GetMultipleSelectPropsArgs<T> = {
|
|
7
|
+
selectedKeysSet: Set<TableRowEntryId>;
|
|
8
|
+
selectedKeys: SelectedKeysT;
|
|
9
|
+
setSelectedKeys: (next: SetStateAction<SelectedKeysT>) => void;
|
|
10
|
+
tableItems: UseTableItemsReturn<T>;
|
|
11
|
+
} & Pick<SelectionProps<T>, "enableRowSelection">;
|
|
12
|
+
declare function getMultipleSelectProps<T>({ selectedKeysSet, selectedKeys, setSelectedKeys, enableRowSelection, tableItems, }: GetMultipleSelectPropsArgs<T>): {
|
|
11
13
|
getTheadCheckboxProps: () => CheckboxInputProps;
|
|
12
|
-
getRowCheckboxProps: (key:
|
|
13
|
-
toggleSelection: (key:
|
|
14
|
+
getRowCheckboxProps: (key: TableRowEntryId, row: T) => CheckboxInputProps;
|
|
15
|
+
toggleSelection: (key: TableRowEntryId, row: T) => void;
|
|
14
16
|
};
|
|
15
17
|
export { getMultipleSelectProps };
|