@navikt/ds-react 8.10.1 → 8.10.2
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/table/column-header/DataTableColumnHeader.d.ts +1 -1
- package/cjs/data/table/column-header/DataTableColumnHeader.js +13 -10
- package/cjs/data/table/column-header/DataTableColumnHeader.js.map +1 -1
- package/cjs/data/table/column-header/useTableColumnResize.d.ts +5 -3
- package/cjs/data/table/column-header/useTableColumnResize.js +128 -53
- package/cjs/data/table/column-header/useTableColumnResize.js.map +1 -1
- package/cjs/data/table/helpers/collectTableRowEntries.d.ts +16 -0
- package/cjs/data/table/helpers/collectTableRowEntries.js +27 -0
- package/cjs/data/table/helpers/collectTableRowEntries.js.map +1 -0
- package/cjs/data/table/helpers/table-keyboard.js +0 -3
- package/cjs/data/table/helpers/table-keyboard.js.map +1 -1
- package/cjs/data/table/hooks/useTableExpansion.d.ts +9 -6
- package/cjs/data/table/hooks/useTableExpansion.js +36 -15
- package/cjs/data/table/hooks/useTableExpansion.js.map +1 -1
- package/cjs/data/table/hooks/useTableItems.d.ts +29 -0
- package/cjs/data/table/hooks/useTableItems.js +63 -0
- package/cjs/data/table/hooks/useTableItems.js.map +1 -0
- package/cjs/data/table/hooks/useTableKeyboardNav.js +3 -3
- package/cjs/data/table/hooks/useTableKeyboardNav.js.map +1 -1
- package/cjs/data/table/root/DataTableAuto.d.ts +18 -0
- package/cjs/data/table/root/DataTableAuto.js +71 -29
- package/cjs/data/table/root/DataTableAuto.js.map +1 -1
- package/cjs/data/table/root/DataTableRoot.context.d.ts +5 -3
- package/cjs/data/table/root/DataTableRoot.context.js.map +1 -1
- package/cjs/data/table/root/DataTableRoot.js +7 -4
- package/cjs/data/table/root/DataTableRoot.js.map +1 -1
- package/cjs/data/table/tr/DataTableTr.js +30 -32
- package/cjs/data/table/tr/DataTableTr.js.map +1 -1
- package/esm/data/table/column-header/DataTableColumnHeader.d.ts +1 -1
- package/esm/data/table/column-header/DataTableColumnHeader.js +14 -11
- package/esm/data/table/column-header/DataTableColumnHeader.js.map +1 -1
- package/esm/data/table/column-header/useTableColumnResize.d.ts +5 -3
- package/esm/data/table/column-header/useTableColumnResize.js +129 -54
- package/esm/data/table/column-header/useTableColumnResize.js.map +1 -1
- package/esm/data/table/helpers/collectTableRowEntries.d.ts +16 -0
- package/esm/data/table/helpers/collectTableRowEntries.js +25 -0
- package/esm/data/table/helpers/collectTableRowEntries.js.map +1 -0
- package/esm/data/table/helpers/table-keyboard.js +0 -3
- package/esm/data/table/helpers/table-keyboard.js.map +1 -1
- package/esm/data/table/hooks/useTableExpansion.d.ts +9 -6
- package/esm/data/table/hooks/useTableExpansion.js +36 -16
- package/esm/data/table/hooks/useTableExpansion.js.map +1 -1
- package/esm/data/table/hooks/useTableItems.d.ts +29 -0
- package/esm/data/table/hooks/useTableItems.js +58 -0
- package/esm/data/table/hooks/useTableItems.js.map +1 -0
- package/esm/data/table/hooks/useTableKeyboardNav.js +3 -3
- package/esm/data/table/hooks/useTableKeyboardNav.js.map +1 -1
- package/esm/data/table/root/DataTableAuto.d.ts +18 -0
- package/esm/data/table/root/DataTableAuto.js +72 -30
- package/esm/data/table/root/DataTableAuto.js.map +1 -1
- package/esm/data/table/root/DataTableRoot.context.d.ts +5 -3
- package/esm/data/table/root/DataTableRoot.context.js.map +1 -1
- package/esm/data/table/root/DataTableRoot.js +7 -4
- package/esm/data/table/root/DataTableRoot.js.map +1 -1
- package/esm/data/table/tr/DataTableTr.js +32 -34
- package/esm/data/table/tr/DataTableTr.js.map +1 -1
- package/package.json +7 -7
- package/src/data/table/column-header/DataTableColumnHeader.tsx +21 -13
- package/src/data/table/column-header/useTableColumnResize.ts +152 -79
- package/src/data/table/helpers/collectTableRowEntries.ts +58 -0
- package/src/data/table/helpers/table-keyboard.ts +0 -4
- package/src/data/table/hooks/__tests__/useTableExpansion.test.tsx +115 -0
- package/src/data/table/hooks/__tests__/useTableItems.test.ts +131 -0
- package/src/data/table/hooks/useTableExpansion.tsx +63 -22
- package/src/data/table/hooks/useTableItems.ts +123 -0
- package/src/data/table/hooks/useTableKeyboardNav.ts +3 -3
- package/src/data/table/root/DataTableAuto.test.tsx +118 -0
- package/src/data/table/root/DataTableAuto.tsx +159 -49
- package/src/data/table/root/DataTableRoot.context.ts +4 -2
- package/src/data/table/root/DataTableRoot.tsx +20 -13
- package/src/data/table/tr/DataTableTr.tsx +48 -47
|
@@ -26,6 +26,6 @@ interface DataTableColumnHeaderProps extends ResizeProps, DataTableBaseCellProps
|
|
|
26
26
|
* - Plan for pinning: Move it into "settings" dialog like here: https://cloudscape.design/examples/react/table.html
|
|
27
27
|
* Toggling `data-block-keyboard-nav` does not work since the created "grid" does not update when toggling this attribute.
|
|
28
28
|
*/
|
|
29
|
-
declare const DataTableColumnHeader: React.ForwardRefExoticComponent<
|
|
29
|
+
declare const DataTableColumnHeader: React.ForwardRefExoticComponent<DataTableColumnHeaderProps & React.RefAttributes<HTMLTableCellElement>>;
|
|
30
30
|
export { DataTableColumnHeader };
|
|
31
31
|
export type { DataTableColumnHeaderProps };
|
|
@@ -63,12 +63,11 @@ const SORT_ICON = {
|
|
|
63
63
|
*/
|
|
64
64
|
const DataTableColumnHeader = (0, react_1.forwardRef)((_a, forwardedRef) => {
|
|
65
65
|
var { className, children, sortable = false, sortDirection = "none", onSortClick, style, width, minWidth, maxWidth, onWidthChange, defaultWidth, colSpan, rowSpan, UNSAFE_isSelection } = _a, rest = __rest(_a, ["className", "children", "sortable", "sortDirection", "onSortClick", "style", "width", "minWidth", "maxWidth", "onWidthChange", "defaultWidth", "colSpan", "rowSpan", "UNSAFE_isSelection"]);
|
|
66
|
-
const [isOverflowing, setIsOverflowing] = react_1.default.useState(false);
|
|
67
66
|
const contentRef = react_1.default.useRef(null);
|
|
68
|
-
const
|
|
69
|
-
const mergedRef = (0, hooks_1.useMergeRefs)(forwardedRef,
|
|
67
|
+
const thRef = (0, react_1.useRef)(null);
|
|
68
|
+
const mergedRef = (0, hooks_1.useMergeRefs)(forwardedRef, thRef);
|
|
70
69
|
const resizeResult = (0, useTableColumnResize_1.useTableColumnResize)({
|
|
71
|
-
|
|
70
|
+
thRef,
|
|
72
71
|
width,
|
|
73
72
|
defaultWidth,
|
|
74
73
|
minWidth,
|
|
@@ -78,17 +77,21 @@ const DataTableColumnHeader = (0, react_1.forwardRef)((_a, forwardedRef) => {
|
|
|
78
77
|
colSpan,
|
|
79
78
|
});
|
|
80
79
|
const SortIcon = sortable ? SORT_ICON[sortDirection] : null;
|
|
81
|
-
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": sortable, style: resizeResult.style, "aria-sort": sortable ? getAriaSort(sortDirection) : undefined,
|
|
82
|
-
const el = contentRef.current;
|
|
83
|
-
setIsOverflowing(el ? el.scrollWidth > el.offsetWidth : false);
|
|
84
|
-
console.info("is overflowing", isOverflowing);
|
|
85
|
-
}, onPointerLeave: () => setIsOverflowing(false), UNSAFE_isSelection: UNSAFE_isSelection, colSpan: colSpan, rowSpan: rowSpan }),
|
|
80
|
+
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": sortable, style: resizeResult.style, "aria-sort": sortable ? getAriaSort(sortDirection) : undefined, UNSAFE_isSelection: UNSAFE_isSelection, colSpan: colSpan, rowSpan: rowSpan }),
|
|
86
81
|
sortable ? (react_1.default.createElement("button", { className: "aksel-data-table__th-sort-button", onClick: onSortClick },
|
|
87
82
|
react_1.default.createElement("div", { ref: contentRef, className: "aksel-data-table__th-content" }, children),
|
|
88
83
|
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)({
|
|
89
84
|
"aksel-data-table__th-content": !UNSAFE_isSelection,
|
|
90
85
|
}) }, children)),
|
|
91
|
-
resizeResult.enabled && !UNSAFE_isSelection && (react_1.default.createElement("button", Object.assign({}, resizeResult.resizeHandlerProps, { className: "aksel-data-table__th-resize-handle", "
|
|
86
|
+
resizeResult.enabled && !UNSAFE_isSelection && (react_1.default.createElement("button", Object.assign({}, resizeResult.resizeHandlerProps, { className: "aksel-data-table__th-resize-handle", "aria-label": resizeResult.isResizingWithKeyboard
|
|
87
|
+
? "Bruk pil venstre/høyre"
|
|
88
|
+
: "Endre bredde", "data-active": resizeResult.isResizingWithKeyboard, "data-disable-keyboard-nav": resizeResult.isResizingWithKeyboard, "data-block-keyboard-nav": true, role: "slider", "aria-valuenow": typeof resizeResult.style.width === "number"
|
|
89
|
+
? resizeResult.style.width
|
|
90
|
+
: 0, "aria-valuetext": typeof resizeResult.style.width === "number" &&
|
|
91
|
+
resizeResult.isResizingWithKeyboard
|
|
92
|
+
? resizeResult.style.width.toString()
|
|
93
|
+
: "" // Needs to be blank when not in keyboard resizing mode to avoid NVDA announcing the value as part of the column heading
|
|
94
|
+
}), resizeResult.isResizingWithKeyboard && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
92
95
|
react_1.default.createElement("span", { className: "aksel-data-table__th-resize-handle-indicator aksel-data-table__th-resize-handle-indicator--start" },
|
|
93
96
|
react_1.default.createElement(aksel_icons_1.CaretLeftCircleFillIcon, { "aria-hidden": true, fontSize: "1.5rem" })),
|
|
94
97
|
react_1.default.createElement("span", { className: "aksel-data-table__th-resize-handle-indicator aksel-data-table__th-resize-handle-indicator--end" },
|
|
@@ -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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"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { type DOMAttributes } from "react";
|
|
2
2
|
type ColumnWidth = number | string;
|
|
3
3
|
type ResizeProps = {
|
|
4
|
-
ref: HTMLTableCellElement | null;
|
|
5
4
|
/**
|
|
6
5
|
* Controlled width of the column.
|
|
7
6
|
*
|
|
@@ -37,15 +36,18 @@ type ResizeProps = {
|
|
|
37
36
|
*/
|
|
38
37
|
colSpan?: number;
|
|
39
38
|
};
|
|
40
|
-
type TableColumnResizeArgs = ResizeProps & {
|
|
39
|
+
type TableColumnResizeArgs = ResizeProps & {
|
|
40
|
+
thRef: React.RefObject<HTMLTableCellElement | null>;
|
|
41
|
+
};
|
|
41
42
|
type TableColumnResizeResult = {
|
|
42
|
-
style
|
|
43
|
+
style: React.CSSProperties;
|
|
43
44
|
resizeHandlerProps: {
|
|
44
45
|
onMouseDown: DOMAttributes<HTMLButtonElement>["onMouseDown"];
|
|
45
46
|
onTouchStart: DOMAttributes<HTMLButtonElement>["onTouchStart"];
|
|
46
47
|
onKeyDown: DOMAttributes<HTMLButtonElement>["onKeyDown"];
|
|
47
48
|
onBlur: DOMAttributes<HTMLButtonElement>["onBlur"];
|
|
48
49
|
onDoubleClick: DOMAttributes<HTMLButtonElement>["onDoubleClick"];
|
|
50
|
+
onClick: DOMAttributes<HTMLButtonElement>["onClick"];
|
|
49
51
|
};
|
|
50
52
|
isResizingWithKeyboard: boolean;
|
|
51
53
|
enabled: true;
|
|
@@ -11,8 +11,10 @@ const DataTableRoot_context_1 = require("../root/DataTableRoot.context");
|
|
|
11
11
|
* be able to set "1fr" or similar and have it fill remaining space.
|
|
12
12
|
*/
|
|
13
13
|
function useTableColumnResize(args) {
|
|
14
|
-
const {
|
|
14
|
+
const { thRef, width: userWidth, defaultWidth, onWidthChange, maxWidth = Infinity, minWidth = 40, style, colSpan, } = args;
|
|
15
15
|
const tableContext = (0, DataTableRoot_context_1.useDataTableContext)();
|
|
16
|
+
const [isResizingWithKeyboard, setIsResizingWithKeyboard] = (0, react_1.useState)(false);
|
|
17
|
+
const ignoreNextOnClick = (0, react_1.useRef)(false);
|
|
16
18
|
const [width, _setWidth] = (0, hooks_1.useControllableState)({
|
|
17
19
|
value: userWidth,
|
|
18
20
|
defaultValue: defaultWidth !== null && defaultWidth !== void 0 ? defaultWidth : (colSpan !== null && colSpan !== void 0 ? colSpan : 1) * 140,
|
|
@@ -23,48 +25,70 @@ function useTableColumnResize(args) {
|
|
|
23
25
|
*/
|
|
24
26
|
onChange: onWidthChange,
|
|
25
27
|
});
|
|
26
|
-
const [isResizingWithKeyboard, setIsResizingWithKeyboard] = (0, react_1.useState)(false);
|
|
27
|
-
const [, setIsResizingWithMouse] = (0, react_1.useState)(false);
|
|
28
28
|
const setWidth = (0, react_1.useCallback)((newWidth) => {
|
|
29
29
|
var _a, _b;
|
|
30
|
-
const currentWidth = ref === null || ref === void 0 ? void 0 : ref.offsetWidth;
|
|
31
|
-
if (!currentWidth) {
|
|
32
|
-
return;
|
|
33
|
-
}
|
|
34
30
|
const min = (_a = parseWidth(minWidth)) !== null && _a !== void 0 ? _a : 0;
|
|
35
31
|
const max = (_b = parseWidth(maxWidth)) !== null && _b !== void 0 ? _b : Infinity;
|
|
36
32
|
const clamped = Math.min(Math.max(newWidth, min), max);
|
|
37
|
-
if (newWidth <= currentWidth && newWidth > max) {
|
|
38
|
-
_setWidth(newWidth);
|
|
39
|
-
return;
|
|
40
|
-
}
|
|
41
|
-
if (newWidth >= currentWidth && newWidth > max) {
|
|
42
|
-
_setWidth(currentWidth);
|
|
43
|
-
return;
|
|
44
|
-
}
|
|
45
33
|
_setWidth(clamped);
|
|
46
|
-
}, [minWidth, maxWidth, _setWidth
|
|
47
|
-
const
|
|
48
|
-
|
|
49
|
-
|
|
34
|
+
}, [minWidth, maxWidth, _setWidth]);
|
|
35
|
+
const handleOnClick = (0, react_1.useCallback)(() => {
|
|
36
|
+
// We need to use the onClick event in order to support screen readers properly,
|
|
37
|
+
// since some of them only send a mouse click when pressing enter/space.
|
|
38
|
+
// We detect a "screen reader click" by checking if we had a mouseUp event right before.
|
|
39
|
+
if (ignoreNextOnClick.current) {
|
|
40
|
+
ignoreNextOnClick.current = false;
|
|
50
41
|
return;
|
|
51
42
|
}
|
|
43
|
+
setIsResizingWithKeyboard((prev) => !prev);
|
|
44
|
+
}, []);
|
|
45
|
+
const handleKeyDown = (0, react_1.useCallback)((event) => {
|
|
46
|
+
var _a, _b;
|
|
52
47
|
if (!isResizingWithKeyboard) {
|
|
53
48
|
return;
|
|
54
49
|
}
|
|
50
|
+
const currentWidth = (_b = (_a = thRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0;
|
|
55
51
|
if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
|
|
56
52
|
event.preventDefault();
|
|
57
|
-
const th = event.target.closest("th");
|
|
58
|
-
const startWidth = th.offsetWidth;
|
|
59
53
|
const delta = event.key === "ArrowRight" ? 20 : -20;
|
|
60
|
-
setWidth(
|
|
54
|
+
setWidth(currentWidth + delta);
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
if (event.key === "Home") {
|
|
58
|
+
event.preventDefault();
|
|
59
|
+
setWidth(0); // will fall back to minWidth
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
if (event.key === "End") {
|
|
63
|
+
event.preventDefault();
|
|
64
|
+
const autoWidth = getAutoColumnWidth(thRef);
|
|
65
|
+
if (autoWidth && autoWidth > currentWidth) {
|
|
66
|
+
setWidth(autoWidth);
|
|
67
|
+
}
|
|
68
|
+
return;
|
|
61
69
|
}
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
70
|
+
if (event.key === "Escape") {
|
|
71
|
+
setIsResizingWithKeyboard(false);
|
|
72
|
+
}
|
|
73
|
+
}, [isResizingWithKeyboard, setWidth, thRef]);
|
|
74
|
+
const startResize = (0, react_1.useCallback)((startX) => {
|
|
75
|
+
var _a, _b;
|
|
76
|
+
const startWidth = (_b = (_a = thRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0;
|
|
66
77
|
function onPointerMove(clientX) {
|
|
67
|
-
|
|
78
|
+
var _a, _b, _c, _d;
|
|
79
|
+
const currentWidth = (_b = (_a = thRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0;
|
|
80
|
+
const newWidth = startWidth + (clientX - startX);
|
|
81
|
+
const min = (_c = parseWidth(minWidth)) !== null && _c !== void 0 ? _c : 0;
|
|
82
|
+
const max = (_d = parseWidth(maxWidth)) !== null && _d !== void 0 ? _d : Infinity;
|
|
83
|
+
if (newWidth > max) {
|
|
84
|
+
setWidth(newWidth < currentWidth ? newWidth : currentWidth);
|
|
85
|
+
return;
|
|
86
|
+
}
|
|
87
|
+
if (newWidth < min) {
|
|
88
|
+
setWidth(newWidth > currentWidth ? newWidth : currentWidth);
|
|
89
|
+
return;
|
|
90
|
+
}
|
|
91
|
+
setWidth(newWidth);
|
|
68
92
|
}
|
|
69
93
|
function onMouseMove(e) {
|
|
70
94
|
onPointerMove(e.clientX);
|
|
@@ -76,39 +100,30 @@ function useTableColumnResize(args) {
|
|
|
76
100
|
function cleanup() {
|
|
77
101
|
document.removeEventListener("mousemove", onMouseMove);
|
|
78
102
|
document.removeEventListener("touchmove", onTouchMove);
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
103
|
+
setIsResizingWithKeyboard(false);
|
|
104
|
+
// We only want onClick to trigger when using the keyboard
|
|
105
|
+
// (we use onClick b.c. keyDown doesn't fire when using a screen reader)
|
|
106
|
+
ignoreNextOnClick.current = true;
|
|
83
107
|
}
|
|
84
108
|
document.addEventListener("mousemove", onMouseMove);
|
|
85
109
|
document.addEventListener("touchmove", onTouchMove, { passive: false });
|
|
86
|
-
document.addEventListener("mouseup", cleanup);
|
|
87
|
-
document.addEventListener("touchend", cleanup);
|
|
88
|
-
document.addEventListener("touchcancel", cleanup);
|
|
89
|
-
}, [setWidth]);
|
|
110
|
+
document.addEventListener("mouseup", cleanup, { once: true });
|
|
111
|
+
document.addEventListener("touchend", cleanup, { once: true });
|
|
112
|
+
document.addEventListener("touchcancel", cleanup, { once: true });
|
|
113
|
+
}, [maxWidth, minWidth, setWidth, thRef]);
|
|
90
114
|
const handleMouseDown = (0, react_1.useCallback)((event) => {
|
|
91
|
-
|
|
92
|
-
startResize(th, event.clientX);
|
|
115
|
+
startResize(event.clientX);
|
|
93
116
|
}, [startResize]);
|
|
94
117
|
const handleTouchStart = (0, react_1.useCallback)((event) => {
|
|
95
|
-
|
|
96
|
-
startResize(th, event.touches[0].clientX);
|
|
118
|
+
startResize(event.touches[0].clientX);
|
|
97
119
|
}, [startResize]);
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
const th = event.target.closest("th");
|
|
106
|
-
const contentEl = th.getElementsByClassName("aksel-data-table__th-content")[0];
|
|
107
|
-
const range = document.createRange();
|
|
108
|
-
range.selectNodeContents(contentEl);
|
|
109
|
-
const contentWidth = range.getBoundingClientRect().width;
|
|
110
|
-
setWidth(contentWidth + 32);
|
|
111
|
-
}, [setWidth]);
|
|
120
|
+
// Auto-size column to fit content on double click. NB: Doesn't work with block content!
|
|
121
|
+
const handleDoubleClick = (0, react_1.useCallback)(() => {
|
|
122
|
+
const newColumnWidth = getAutoColumnWidth(thRef);
|
|
123
|
+
if (newColumnWidth) {
|
|
124
|
+
setWidth(newColumnWidth);
|
|
125
|
+
}
|
|
126
|
+
}, [setWidth, thRef]);
|
|
112
127
|
if (tableContext.layout !== "fixed") {
|
|
113
128
|
return {
|
|
114
129
|
style,
|
|
@@ -123,6 +138,7 @@ function useTableColumnResize(args) {
|
|
|
123
138
|
onKeyDown: handleKeyDown,
|
|
124
139
|
onBlur: () => setIsResizingWithKeyboard(false),
|
|
125
140
|
onDoubleClick: handleDoubleClick,
|
|
141
|
+
onClick: handleOnClick,
|
|
126
142
|
},
|
|
127
143
|
isResizingWithKeyboard,
|
|
128
144
|
enabled: true,
|
|
@@ -141,4 +157,63 @@ function parseWidth(width) {
|
|
|
141
157
|
}
|
|
142
158
|
return undefined;
|
|
143
159
|
}
|
|
160
|
+
function getAutoColumnWidth(thRef) {
|
|
161
|
+
var _a;
|
|
162
|
+
const th = thRef.current;
|
|
163
|
+
const thContent = th.querySelector(".aksel-data-table__th-content");
|
|
164
|
+
const thPaddingEl = th.querySelector("div");
|
|
165
|
+
const rows = (_a = th.closest("table")) === null || _a === void 0 ? void 0 : _a.querySelectorAll("tbody tr, tfoot tr");
|
|
166
|
+
if (!thContent || !thPaddingEl || !rows) {
|
|
167
|
+
return;
|
|
168
|
+
}
|
|
169
|
+
// Find needed width for header cell
|
|
170
|
+
const contentWidth = thContent.scrollWidth;
|
|
171
|
+
const paddingElStyle = window.getComputedStyle(thPaddingEl);
|
|
172
|
+
const thInlinePadding = parseInt(paddingElStyle.paddingLeft, 10) +
|
|
173
|
+
parseInt(paddingElStyle.paddingRight, 10);
|
|
174
|
+
let newColumnWidth = contentWidth + thInlinePadding;
|
|
175
|
+
// Find column position
|
|
176
|
+
let columnPosition = 1;
|
|
177
|
+
let prevSibling = th.previousElementSibling;
|
|
178
|
+
while (prevSibling) {
|
|
179
|
+
columnPosition += prevSibling.colSpan;
|
|
180
|
+
prevSibling = prevSibling.previousElementSibling;
|
|
181
|
+
}
|
|
182
|
+
// Find needed width for each cell in column in tbody and tfoot
|
|
183
|
+
const range = document.createRange();
|
|
184
|
+
let skipRows = 0;
|
|
185
|
+
for (const row of rows) {
|
|
186
|
+
// Skip rows where the cell in this column is covered by a rowspan from a previous row
|
|
187
|
+
if (skipRows > 0) {
|
|
188
|
+
skipRows--;
|
|
189
|
+
continue;
|
|
190
|
+
}
|
|
191
|
+
// Find cell
|
|
192
|
+
let cell = row.firstChild;
|
|
193
|
+
let currentPosition = cell.colSpan;
|
|
194
|
+
while (columnPosition > currentPosition && cell.nextElementSibling) {
|
|
195
|
+
cell = cell.nextElementSibling;
|
|
196
|
+
currentPosition += cell.colSpan;
|
|
197
|
+
}
|
|
198
|
+
skipRows = cell.rowSpan - 1;
|
|
199
|
+
// Find needed width
|
|
200
|
+
const cellContent = cell.firstChild;
|
|
201
|
+
range.selectNodeContents(cellContent);
|
|
202
|
+
const cellContentWidth = range.getBoundingClientRect().width;
|
|
203
|
+
const contentElStyle = window.getComputedStyle(cellContent);
|
|
204
|
+
const inlinePadding = parseInt(contentElStyle.paddingLeft, 10) +
|
|
205
|
+
parseInt(contentElStyle.paddingRight, 10);
|
|
206
|
+
const widthNeededForThisCell = (cellContentWidth + inlinePadding) / cell.colSpan;
|
|
207
|
+
if (widthNeededForThisCell > newColumnWidth) {
|
|
208
|
+
newColumnWidth = widthNeededForThisCell;
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
// Make sure new width is not wider than the table container since that would be impractical
|
|
212
|
+
const container = th.closest("div");
|
|
213
|
+
const maxColWidth = ((container === null || container === void 0 ? void 0 : container.offsetWidth) || document.documentElement.clientWidth * 0.9) *
|
|
214
|
+
0.95;
|
|
215
|
+
return newColumnWidth > maxColWidth
|
|
216
|
+
? Math.floor(maxColWidth)
|
|
217
|
+
: Math.ceil(newColumnWidth);
|
|
218
|
+
}
|
|
144
219
|
//# sourceMappingURL=useTableColumnResize.js.map
|
|
@@ -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":";;AA2VS,oDAAoB;AA3V7B,iCAA0E;AAC1E,gDAA4D;AAC5D,yEAAoE;AAgEpE;;;;;GAKG;AACH,SAAS,oBAAoB,CAC3B,IAA2B;IAE3B,MAAM,EACJ,KAAK,EACL,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,aAAa,EACb,QAAQ,GAAG,QAAQ,EACnB,QAAQ,GAAG,EAAE,EACb,KAAK,EACL,OAAO,GACR,GAAG,IAAI,CAAC;IAET,MAAM,YAAY,GAAG,IAAA,2CAAmB,GAAE,CAAC;IAE3C,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC5E,MAAM,iBAAiB,GAAG,IAAA,cAAM,EAAC,KAAK,CAAC,CAAC;IAExC,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,GAAG,IAAA,4BAAoB,EAAC;QAC9C,KAAK,EAAE,SAAS;QAChB,YAAY,EAAE,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,CAAC,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,CAAC,CAAC,GAAG,GAAG;QAClD;;;;WAIG;QACH,QAAQ,EAAE,aAAa;KACxB,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,IAAA,mBAAW,EAC1B,CAAC,QAAgB,EAAE,EAAE;;QACnB,MAAM,GAAG,GAAG,MAAA,UAAU,CAAC,QAAQ,CAAC,mCAAI,CAAC,CAAC;QACtC,MAAM,GAAG,GAAG,MAAA,UAAU,CAAC,QAAQ,CAAC,mCAAI,QAAQ,CAAC;QAC7C,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;QACvD,SAAS,CAAC,OAAO,CAAC,CAAC;IACrB,CAAC,EACD,CAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC,CAChC,CAAC;IAEF,MAAM,aAAa,GACjB,IAAA,mBAAW,EAAC,GAAG,EAAE;QACf,gFAAgF;QAChF,wEAAwE;QACxE,wFAAwF;QAExF,IAAI,iBAAiB,CAAC,OAAO,EAAE,CAAC;YAC9B,iBAAiB,CAAC,OAAO,GAAG,KAAK,CAAC;YAClC,OAAO;QACT,CAAC;QAED,yBAAyB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IAC7C,CAAC,EAAE,EAAE,CAAC,CAAC;IAET,MAAM,aAAa,GACjB,IAAA,mBAAW,EACT,CAAC,KAAK,EAAE,EAAE;;QACR,IAAI,CAAC,sBAAsB,EAAE,CAAC;YAC5B,OAAO;QACT,CAAC;QACD,MAAM,YAAY,GAAG,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,WAAW,mCAAI,CAAC,CAAC;QAErD,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,EAAE,CAAC;YAC5D,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,KAAK,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YACpD,QAAQ,CAAC,YAAY,GAAG,KAAK,CAAC,CAAC;YAC/B,OAAO;QACT,CAAC;QACD,IAAI,KAAK,CAAC,GAAG,KAAK,MAAM,EAAE,CAAC;YACzB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,6BAA6B;YAC1C,OAAO;QACT,CAAC;QACD,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;YACxB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,MAAM,SAAS,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;YAC5C,IAAI,SAAS,IAAI,SAAS,GAAG,YAAY,EAAE,CAAC;gBAC1C,QAAQ,CAAC,SAAS,CAAC,CAAC;YACtB,CAAC;YACD,OAAO;QACT,CAAC;QACD,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC3B,yBAAyB,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC;IACH,CAAC,EACD,CAAC,sBAAsB,EAAE,QAAQ,EAAE,KAAK,CAAC,CAC1C,CAAC;IAEJ,MAAM,WAAW,GAAG,IAAA,mBAAW,EAC7B,CAAC,MAAc,EAAE,EAAE;;QACjB,MAAM,UAAU,GAAG,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,WAAW,mCAAI,CAAC,CAAC;QAEnD,SAAS,aAAa,CAAC,OAAe;;YACpC,MAAM,YAAY,GAAG,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,WAAW,mCAAI,CAAC,CAAC;YACrD,MAAM,QAAQ,GAAG,UAAU,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC;YAEjD,MAAM,GAAG,GAAG,MAAA,UAAU,CAAC,QAAQ,CAAC,mCAAI,CAAC,CAAC;YACtC,MAAM,GAAG,GAAG,MAAA,UAAU,CAAC,QAAQ,CAAC,mCAAI,QAAQ,CAAC;YAE7C,IAAI,QAAQ,GAAG,GAAG,EAAE,CAAC;gBACnB,QAAQ,CAAC,QAAQ,GAAG,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;gBAC5D,OAAO;YACT,CAAC;YACD,IAAI,QAAQ,GAAG,GAAG,EAAE,CAAC;gBACnB,QAAQ,CAAC,QAAQ,GAAG,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;gBAC5D,OAAO;YACT,CAAC;YAED,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACrB,CAAC;QAED,SAAS,WAAW,CAAC,CAAa;YAChC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QAC3B,CAAC;QAED,SAAS,WAAW,CAAC,CAAa;YAChC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QACtC,CAAC;QAED,SAAS,OAAO;YACd,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;YACvD,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;YACvD,yBAAyB,CAAC,KAAK,CAAC,CAAC;YAEjC,0DAA0D;YAC1D,wEAAwE;YACxE,iBAAiB,CAAC,OAAO,GAAG,IAAI,CAAC;QACnC,CAAC;QAED,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;QACpD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;QACxE,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;QAC9D,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;QAC/D,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;IACpE,CAAC,EACD,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,CAAC,CACtC,CAAC;IAEF,MAAM,eAAe,GACnB,IAAA,mBAAW,EACT,CAAC,KAAK,EAAE,EAAE;QACR,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC7B,CAAC,EACD,CAAC,WAAW,CAAC,CACd,CAAC;IAEJ,MAAM,gBAAgB,GACpB,IAAA,mBAAW,EACT,CAAC,KAAK,EAAE,EAAE;QACR,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IACxC,CAAC,EACD,CAAC,WAAW,CAAC,CACd,CAAC;IAEJ,wFAAwF;IACxF,MAAM,iBAAiB,GACrB,IAAA,mBAAW,EAAC,GAAG,EAAE;QACf,MAAM,cAAc,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;QACjD,IAAI,cAAc,EAAE,CAAC;YACnB,QAAQ,CAAC,cAAc,CAAC,CAAC;QAC3B,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC;IAExB,IAAI,YAAY,CAAC,MAAM,KAAK,OAAO,EAAE,CAAC;QACpC,OAAO;YACL,KAAK;YACL,OAAO,EAAE,KAAK;SACf,CAAC;IACJ,CAAC;IAED,OAAO;QACL,KAAK,kCACA,KAAK,KACR,KAAK,GACN;QACD,kBAAkB,EAAE;YAClB,WAAW,EAAE,eAAe;YAC5B,YAAY,EAAE,gBAAgB;YAC9B,SAAS,EAAE,aAAa;YACxB,MAAM,EAAE,GAAG,EAAE,CAAC,yBAAyB,CAAC,KAAK,CAAC;YAC9C,aAAa,EAAE,iBAAiB;YAChC,OAAO,EAAE,aAAa;SACvB;QACD,sBAAsB;QACtB,OAAO,EAAE,IAAI;KACd,CAAC;AACJ,CAAC;AAED,SAAS,UAAU,CAAC,KAA8B;IAChD,IAAI,KAAK,IAAI,IAAI,EAAE,CAAC;QAClB,OAAO,SAAS,CAAC;IACnB,CAAC;IACD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,KAAK,CAAC;IACf,CAAC;IACD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,MAAM,MAAM,GAAG,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QACnC,OAAO,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;IACnD,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,SAAS,kBAAkB,CACzB,KAAmD;;IAEnD,MAAM,EAAE,GAAG,KAAK,CAAC,OAAQ,CAAC;IAC1B,MAAM,SAAS,GAAG,EAAE,CAAC,aAAa,CAAC,+BAA+B,CAAC,CAAC;IACpE,MAAM,WAAW,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,IAAI,GAAG,MAAA,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,0CAAE,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;IACzE,IAAI,CAAC,SAAS,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,EAAE,CAAC;QACxC,OAAO;IACT,CAAC;IAED,oCAAoC;IACpC,MAAM,YAAY,GAAG,SAAS,CAAC,WAAW,CAAC;IAC3C,MAAM,cAAc,GAAG,MAAM,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAC5D,MAAM,eAAe,GACnB,QAAQ,CAAC,cAAc,CAAC,WAAW,EAAE,EAAE,CAAC;QACxC,QAAQ,CAAC,cAAc,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;IAC5C,IAAI,cAAc,GAAG,YAAY,GAAG,eAAe,CAAC;IAEpD,uBAAuB;IACvB,IAAI,cAAc,GAAG,CAAC,CAAC;IACvB,IAAI,WAAW,GAAG,EAAE,CAAC,sBAAsB,CAAC;IAC5C,OAAO,WAAW,EAAE,CAAC;QACnB,cAAc,IAAK,WAAoC,CAAC,OAAO,CAAC;QAChE,WAAW,GAAG,WAAW,CAAC,sBAAsB,CAAC;IACnD,CAAC;IAED,+DAA+D;IAC/D,MAAM,KAAK,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC;IACrC,IAAI,QAAQ,GAAG,CAAC,CAAC;IACjB,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC;QACvB,sFAAsF;QACtF,IAAI,QAAQ,GAAG,CAAC,EAAE,CAAC;YACjB,QAAQ,EAAE,CAAC;YACX,SAAS;QACX,CAAC;QAED,YAAY;QACZ,IAAI,IAAI,GAAG,GAAG,CAAC,UAAkC,CAAC;QAClD,IAAI,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC;QACnC,OAAO,cAAc,GAAG,eAAe,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;YACnE,IAAI,GAAG,IAAI,CAAC,kBAA0C,CAAC;YACvD,eAAe,IAAI,IAAI,CAAC,OAAO,CAAC;QAClC,CAAC;QACD,QAAQ,GAAG,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;QAE5B,oBAAoB;QACpB,MAAM,WAAW,GAAG,IAAI,CAAC,UAAyB,CAAC;QACnD,KAAK,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC;QACtC,MAAM,gBAAgB,GAAG,KAAK,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;QAC7D,MAAM,cAAc,GAAG,MAAM,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;QAC5D,MAAM,aAAa,GACjB,QAAQ,CAAC,cAAc,CAAC,WAAW,EAAE,EAAE,CAAC;YACxC,QAAQ,CAAC,cAAc,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;QAC5C,MAAM,sBAAsB,GAC1B,CAAC,gBAAgB,GAAG,aAAa,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC;QACpD,IAAI,sBAAsB,GAAG,cAAc,EAAE,CAAC;YAC5C,cAAc,GAAG,sBAAsB,CAAC;QAC1C,CAAC;IACH,CAAC;IAED,4FAA4F;IAC5F,MAAM,SAAS,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IACpC,MAAM,WAAW,GACf,CAAC,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,WAAW,KAAI,QAAQ,CAAC,eAAe,CAAC,WAAW,GAAG,GAAG,CAAC;QACtE,IAAI,CAAC;IAEP,OAAO,cAAc,GAAG,WAAW;QACjC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC;QACzB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;AAChC,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
type TableRowEntryId = string | number;
|
|
2
|
+
type CollectTableRowEntriesArgs<T> = {
|
|
3
|
+
items: T[];
|
|
4
|
+
getRowId?: (rowData: T, index: number) => TableRowEntryId;
|
|
5
|
+
getSubRows?: (rowData: T) => T[];
|
|
6
|
+
isSubRowExpandable?: (rowData: T) => boolean;
|
|
7
|
+
};
|
|
8
|
+
interface ItemDetail<T> {
|
|
9
|
+
id: string | number;
|
|
10
|
+
level: number;
|
|
11
|
+
parent: null | T;
|
|
12
|
+
children: readonly T[];
|
|
13
|
+
}
|
|
14
|
+
declare function collectTableRowEntries<T>({ items, getRowId, getSubRows, isSubRowExpandable, }: CollectTableRowEntriesArgs<T>): Map<T, ItemDetail<T>>;
|
|
15
|
+
export { collectTableRowEntries };
|
|
16
|
+
export type { CollectTableRowEntriesArgs, TableRowEntryId, ItemDetail };
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.collectTableRowEntries = collectTableRowEntries;
|
|
4
|
+
function collectTableRowEntries({ items, getRowId, getSubRows, isSubRowExpandable, }) {
|
|
5
|
+
const itemDetailsMap = new Map();
|
|
6
|
+
const traverseRows = (rows, level, parent, parentId) => {
|
|
7
|
+
var _a, _b, _c;
|
|
8
|
+
for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
|
|
9
|
+
const rowData = rows[rowIndex];
|
|
10
|
+
const rowId = (_a = getRowId === null || getRowId === void 0 ? void 0 : getRowId(rowData, rowIndex)) !== null && _a !== void 0 ? _a : (parentId == null ? rowIndex : `${parentId}-${rowIndex}`);
|
|
11
|
+
const isRowExpandable = (_b = isSubRowExpandable === null || isSubRowExpandable === void 0 ? void 0 : isSubRowExpandable(rowData)) !== null && _b !== void 0 ? _b : true;
|
|
12
|
+
const children = (_c = (isRowExpandable ? getSubRows === null || getSubRows === void 0 ? void 0 : getSubRows(rowData) : [])) !== null && _c !== void 0 ? _c : [];
|
|
13
|
+
itemDetailsMap.set(rowData, {
|
|
14
|
+
id: rowId,
|
|
15
|
+
level,
|
|
16
|
+
parent,
|
|
17
|
+
children,
|
|
18
|
+
});
|
|
19
|
+
if (children.length > 0) {
|
|
20
|
+
traverseRows(children, level + 1, rowData, rowId);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
traverseRows(items, 0, null);
|
|
25
|
+
return itemDetailsMap;
|
|
26
|
+
}
|
|
27
|
+
//# sourceMappingURL=collectTableRowEntries.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"collectTableRowEntries.js","sourceRoot":"","sources":["../../../../src/data/table/helpers/collectTableRowEntries.ts"],"names":[],"mappings":";;AAwDS,wDAAsB;AAxC/B,SAAS,sBAAsB,CAAI,EACjC,KAAK,EACL,QAAQ,EACR,UAAU,EACV,kBAAkB,GACY;IAC9B,MAAM,cAAc,GAAG,IAAI,GAAG,EAAoB,CAAC;IAEnD,MAAM,YAAY,GAAG,CACnB,IAAS,EACT,KAAa,EACb,MAAgB,EAChB,QAA0B,EAC1B,EAAE;;QACF,KAAK,IAAI,QAAQ,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;YAC1D,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC/B,MAAM,KAAK,GACT,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,OAAO,EAAE,QAAQ,CAAC,mCAC7B,CAAC,QAAQ,IAAI,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,QAAQ,IAAI,QAAQ,EAAE,CAAC,CAAC;YAC5D,MAAM,eAAe,GAAG,MAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAG,OAAO,CAAC,mCAAI,IAAI,CAAC;YAC9D,MAAM,QAAQ,GAAG,MAAA,CAAC,eAAe,CAAC,CAAC,CAAC,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,mCAAI,EAAE,CAAC;YAEtE,cAAc,CAAC,GAAG,CAAC,OAAO,EAAE;gBAC1B,EAAE,EAAE,KAAK;gBACT,KAAK;gBACL,MAAM;gBACN,QAAQ;aACT,CAAC,CAAC;YAEH,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACxB,YAAY,CAAC,QAAQ,EAAE,KAAK,GAAG,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;YACpD,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IAEF,YAAY,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC;IAE7B,OAAO,cAAc,CAAC;AACxB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-keyboard.js","sourceRoot":"","sources":["../../../../src/data/table/helpers/table-keyboard.ts"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"table-keyboard.js","sourceRoot":"","sources":["../../../../src/data/table/helpers/table-keyboard.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,26 +1,29 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
import type { ItemDetail } from "./useTableItems";
|
|
2
3
|
type DataTableExpansionContextT = {
|
|
3
|
-
expandedIds: (string | number)[];
|
|
4
4
|
isExpanded: (id: string | number) => boolean;
|
|
5
|
+
isDetailsPanelExpandable: (id: string | number) => boolean;
|
|
5
6
|
toggleExpansion: (id: string | number) => void;
|
|
6
7
|
toggleAll: () => void;
|
|
7
8
|
isAllExpanded: boolean;
|
|
8
9
|
getDetailsPanelContent?: (row: unknown) => React.ReactNode;
|
|
9
10
|
getDetailsPanelHeight?: (row: unknown) => number | "auto";
|
|
10
|
-
showExpandAll
|
|
11
|
-
|
|
11
|
+
showExpandAll: boolean;
|
|
12
|
+
enableDetailsPanel: boolean;
|
|
12
13
|
};
|
|
13
14
|
declare const useDataTableExpansion: <S extends boolean = true>(strict?: S | undefined) => S extends true ? DataTableExpansionContextT : DataTableExpansionContextT | undefined;
|
|
14
15
|
type TableExpansionOptions<T> = {
|
|
15
16
|
detailsPanelRowIds?: (string | number)[];
|
|
16
17
|
defaultDetailsPanelRowIds?: (string | number)[];
|
|
17
18
|
onDetailsPanelChange?: (ids: (string | number)[]) => void;
|
|
18
|
-
|
|
19
|
+
itemDetails: Map<T, ItemDetail<T>>;
|
|
19
20
|
getDetailsPanelContent?: (row: T) => React.ReactNode;
|
|
21
|
+
isDetailsPanelExpandable?: (rowData: T) => boolean;
|
|
20
22
|
getDetailsPanelHeight?: (row: T) => number | "auto";
|
|
21
23
|
showExpandAll?: boolean;
|
|
22
24
|
};
|
|
23
|
-
declare function
|
|
25
|
+
declare function getDataTableExpansionId(tableId: string, rowId: string | number): string;
|
|
26
|
+
declare function DataTableExpansionProvider<T>({ children, detailsPanelRowIds, defaultDetailsPanelRowIds, onDetailsPanelChange, itemDetails, getDetailsPanelContent, isDetailsPanelExpandable, getDetailsPanelHeight, showExpandAll, }: TableExpansionOptions<T> & {
|
|
24
27
|
children: React.ReactNode;
|
|
25
28
|
}): React.JSX.Element;
|
|
26
|
-
export { DataTableExpansionProvider, useDataTableExpansion };
|
|
29
|
+
export { DataTableExpansionProvider, getDataTableExpansionId, useDataTableExpansion, };
|
|
@@ -35,6 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
35
35
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
36
|
exports.useDataTableExpansion = void 0;
|
|
37
37
|
exports.DataTableExpansionProvider = DataTableExpansionProvider;
|
|
38
|
+
exports.getDataTableExpansionId = getDataTableExpansionId;
|
|
38
39
|
const react_1 = __importStar(require("react"));
|
|
39
40
|
const helpers_1 = require("../../../utils/helpers");
|
|
40
41
|
const hooks_1 = require("../../../utils/hooks");
|
|
@@ -43,26 +44,46 @@ const { Provider: DataTableExpansionContextProvider, useContext: useDataTableExp
|
|
|
43
44
|
errorMessage: "useDataTableExpansion must be used within a DataTableExpansionProvider.",
|
|
44
45
|
});
|
|
45
46
|
exports.useDataTableExpansion = useDataTableExpansion;
|
|
46
|
-
function
|
|
47
|
+
function getDataTableExpansionId(tableId, rowId) {
|
|
48
|
+
return `${tableId}-expansion-${rowId}`;
|
|
49
|
+
}
|
|
50
|
+
function DataTableExpansionProvider({ children, detailsPanelRowIds, defaultDetailsPanelRowIds = [], onDetailsPanelChange, itemDetails, getDetailsPanelContent, isDetailsPanelExpandable, getDetailsPanelHeight, showExpandAll = false, }) {
|
|
47
51
|
const [expandedIds, setExpandedIds] = (0, hooks_1.useControllableState)({
|
|
48
52
|
value: detailsPanelRowIds,
|
|
49
53
|
defaultValue: defaultDetailsPanelRowIds,
|
|
54
|
+
onChange: onDetailsPanelChange,
|
|
50
55
|
});
|
|
51
|
-
const
|
|
56
|
+
const expandableIds = react_1.default.useMemo(() => {
|
|
57
|
+
if (!getDetailsPanelContent) {
|
|
58
|
+
return new Set();
|
|
59
|
+
}
|
|
60
|
+
const ids = new Set();
|
|
61
|
+
for (const [rowData, { id, level }] of itemDetails.entries()) {
|
|
62
|
+
/* We only allow Master - Details pattern on top level rows */
|
|
63
|
+
if (level > 0) {
|
|
64
|
+
continue;
|
|
65
|
+
}
|
|
66
|
+
if (!isDetailsPanelExpandable || isDetailsPanelExpandable(rowData)) {
|
|
67
|
+
ids.add(id);
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
return ids;
|
|
71
|
+
}, [getDetailsPanelContent, isDetailsPanelExpandable, itemDetails]);
|
|
72
|
+
const isDetailsPanelExpandableById = (0, react_1.useCallback)((id) => expandableIds.has(id), [expandableIds]);
|
|
73
|
+
const isExpanded = (0, react_1.useCallback)((id) => isDetailsPanelExpandableById(id) && expandedIds.includes(id), [expandedIds, isDetailsPanelExpandableById]);
|
|
52
74
|
const toggleExpansion = (0, react_1.useCallback)((id) => {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
setExpandedIds(
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
75
|
+
if (!isDetailsPanelExpandableById(id)) {
|
|
76
|
+
return;
|
|
77
|
+
}
|
|
78
|
+
setExpandedIds((currentExpandedIds) => currentExpandedIds.includes(id)
|
|
79
|
+
? currentExpandedIds.filter((expandedId) => expandedId !== id)
|
|
80
|
+
: [...currentExpandedIds, id]);
|
|
81
|
+
}, [isDetailsPanelExpandableById, setExpandedIds]);
|
|
82
|
+
const isAllExpanded = expandableIds.size > 0 &&
|
|
83
|
+
Array.from(expandableIds).every((key) => expandedIds.includes(key));
|
|
61
84
|
const toggleAll = (0, react_1.useCallback)(() => {
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
}, [isAllExpanded, allRowKeys, setExpandedIds, onDetailsPanelChange]);
|
|
66
|
-
return (react_1.default.createElement(DataTableExpansionContextProvider, { expandedIds: expandedIds, isExpanded: isExpanded, toggleExpansion: toggleExpansion, toggleAll: toggleAll, isAllExpanded: isAllExpanded, getDetailsPanelContent: getDetailsPanelContent, getDetailsPanelHeight: getDetailsPanelHeight, showExpandAll: showExpandAll, enableExpansion: !!getDetailsPanelContent }, children));
|
|
85
|
+
setExpandedIds(isAllExpanded ? [] : Array.from(expandableIds));
|
|
86
|
+
}, [expandableIds, isAllExpanded, setExpandedIds]);
|
|
87
|
+
return (react_1.default.createElement(DataTableExpansionContextProvider, { isExpanded: isExpanded, isDetailsPanelExpandable: isDetailsPanelExpandableById, toggleExpansion: toggleExpansion, toggleAll: toggleAll, isAllExpanded: isAllExpanded, getDetailsPanelContent: getDetailsPanelContent, getDetailsPanelHeight: getDetailsPanelHeight, showExpandAll: showExpandAll, enableDetailsPanel: !!getDetailsPanelContent }, children));
|
|
67
88
|
}
|
|
68
89
|
//# sourceMappingURL=useTableExpansion.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTableExpansion.js","sourceRoot":"","sources":["../../../../src/data/table/hooks/useTableExpansion.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"useTableExpansion.js","sourceRoot":"","sources":["../../../../src/data/table/hooks/useTableExpansion.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { type ItemDetail } from "../helpers/collectTableRowEntries";
|
|
2
|
+
type UseTableItemsArgs<T> = {
|
|
3
|
+
items: T[];
|
|
4
|
+
getRowId?: (rowData: T, index: number) => string | number;
|
|
5
|
+
/**
|
|
6
|
+
* Master - Detail pattern props
|
|
7
|
+
*/
|
|
8
|
+
/**
|
|
9
|
+
* Expanded/Nested rows pattern props
|
|
10
|
+
*/
|
|
11
|
+
getSubRows?: (rowData: T) => T[];
|
|
12
|
+
expandedSubRowIds?: (string | number)[];
|
|
13
|
+
defaultExpandedSubRowIds?: (string | number)[];
|
|
14
|
+
isSubRowExpandable?: (rowData: T) => boolean;
|
|
15
|
+
onExpandedSubRowIdsChange?: (ids: (string | number)[]) => void;
|
|
16
|
+
};
|
|
17
|
+
type useTableItemsReturn<T> = {
|
|
18
|
+
items: T[];
|
|
19
|
+
itemDetails: Map<T, ItemDetail<T>>;
|
|
20
|
+
onExpandedSubRowIdsChange: (id: string | number) => void;
|
|
21
|
+
isSubRowExpanded: (id: string | number) => boolean;
|
|
22
|
+
};
|
|
23
|
+
declare function useTableItems<T>(args: UseTableItemsArgs<T>): useTableItemsReturn<T>;
|
|
24
|
+
declare const TableItemsProvider: import("react").FC<useTableItemsReturn<any> & {
|
|
25
|
+
children: React.ReactNode;
|
|
26
|
+
ref?: never;
|
|
27
|
+
}>, useTableItemsContext: <S extends boolean = true>(strict?: S | undefined) => S extends true ? useTableItemsReturn<any> : useTableItemsReturn<any> | undefined;
|
|
28
|
+
export { useTableItems, TableItemsProvider, useTableItemsContext };
|
|
29
|
+
export type { ItemDetail };
|