@navikt/ds-react 8.4.0 → 8.5.0
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/accordion/Accordion.d.ts +10 -0
- package/cjs/accordion/Accordion.js +2 -2
- package/cjs/accordion/Accordion.js.map +1 -1
- package/cjs/data/table/helpers/table-cell.d.ts +2 -2
- package/cjs/data/table/helpers/table-cell.js +2 -5
- package/cjs/data/table/helpers/table-cell.js.map +1 -1
- package/cjs/data/table/helpers/table-focus.d.ts +26 -2
- package/cjs/data/table/helpers/table-focus.js +60 -9
- package/cjs/data/table/helpers/table-focus.js.map +1 -1
- package/cjs/data/table/helpers/table-grid-nav.d.ts +45 -9
- package/cjs/data/table/helpers/table-grid-nav.js +108 -24
- package/cjs/data/table/helpers/table-grid-nav.js.map +1 -1
- package/cjs/data/table/helpers/table-keyboard.d.ts +24 -3
- package/cjs/data/table/helpers/table-keyboard.js +30 -5
- package/cjs/data/table/helpers/table-keyboard.js.map +1 -1
- package/cjs/data/table/hooks/useGridCache.d.ts +17 -0
- package/cjs/data/table/hooks/useGridCache.js +65 -0
- package/cjs/data/table/hooks/useGridCache.js.map +1 -0
- package/cjs/data/table/root/DataTableRoot.d.ts +1 -1
- package/cjs/data/table/root/DataTableRoot.js +2 -2
- package/cjs/data/table/root/DataTableRoot.js.map +1 -1
- package/cjs/data/table/root/useTableKeyboardNav.d.ts +9 -3
- package/cjs/data/table/root/useTableKeyboardNav.js +53 -95
- package/cjs/data/table/root/useTableKeyboardNav.js.map +1 -1
- package/cjs/data/table/th/DataTableTh.d.ts +1 -1
- package/cjs/data/table/th/DataTableTh.js +3 -1
- package/cjs/data/table/th/DataTableTh.js.map +1 -1
- package/cjs/data/table/tr/DataTableTr.d.ts +6 -2
- package/cjs/data/table/tr/DataTableTr.js +4 -2
- package/cjs/data/table/tr/DataTableTr.js.map +1 -1
- package/cjs/link-card/LinkCard.d.ts +13 -0
- package/cjs/link-card/LinkCard.js +2 -2
- package/cjs/link-card/LinkCard.js.map +1 -1
- package/cjs/process/Process.d.ts +1 -1
- package/cjs/utils/i18n/locales/nb.d.ts +154 -75
- package/cjs/utils/i18n/locales/nb.js +154 -75
- package/cjs/utils/i18n/locales/nb.js.map +1 -1
- package/esm/accordion/Accordion.d.ts +10 -0
- package/esm/accordion/Accordion.js +2 -2
- package/esm/accordion/Accordion.js.map +1 -1
- package/esm/data/table/helpers/table-cell.d.ts +2 -2
- package/esm/data/table/helpers/table-cell.js +2 -5
- package/esm/data/table/helpers/table-cell.js.map +1 -1
- package/esm/data/table/helpers/table-focus.d.ts +26 -2
- package/esm/data/table/helpers/table-focus.js +55 -9
- package/esm/data/table/helpers/table-focus.js.map +1 -1
- package/esm/data/table/helpers/table-grid-nav.d.ts +45 -9
- package/esm/data/table/helpers/table-grid-nav.js +102 -23
- package/esm/data/table/helpers/table-grid-nav.js.map +1 -1
- package/esm/data/table/helpers/table-keyboard.d.ts +24 -3
- package/esm/data/table/helpers/table-keyboard.js +29 -4
- package/esm/data/table/helpers/table-keyboard.js.map +1 -1
- package/esm/data/table/hooks/useGridCache.d.ts +17 -0
- package/esm/data/table/hooks/useGridCache.js +63 -0
- package/esm/data/table/hooks/useGridCache.js.map +1 -0
- package/esm/data/table/root/DataTableRoot.d.ts +1 -1
- package/esm/data/table/root/DataTableRoot.js +2 -2
- package/esm/data/table/root/DataTableRoot.js.map +1 -1
- package/esm/data/table/root/useTableKeyboardNav.d.ts +9 -3
- package/esm/data/table/root/useTableKeyboardNav.js +58 -100
- package/esm/data/table/root/useTableKeyboardNav.js.map +1 -1
- package/esm/data/table/th/DataTableTh.d.ts +1 -1
- package/esm/data/table/th/DataTableTh.js +3 -1
- package/esm/data/table/th/DataTableTh.js.map +1 -1
- package/esm/data/table/tr/DataTableTr.d.ts +6 -2
- package/esm/data/table/tr/DataTableTr.js +4 -2
- package/esm/data/table/tr/DataTableTr.js.map +1 -1
- package/esm/link-card/LinkCard.d.ts +13 -0
- package/esm/link-card/LinkCard.js +2 -2
- package/esm/link-card/LinkCard.js.map +1 -1
- package/esm/process/Process.d.ts +1 -1
- package/esm/utils/i18n/locales/nb.d.ts +154 -75
- package/esm/utils/i18n/locales/nb.js +154 -75
- package/esm/utils/i18n/locales/nb.js.map +1 -1
- package/package.json +3 -3
- package/src/accordion/Accordion.tsx +19 -2
- package/src/data/table/helpers/table-cell.ts +2 -7
- package/src/data/table/helpers/table-focus.ts +70 -9
- package/src/data/table/helpers/table-grid-nav.ts +146 -31
- package/src/data/table/helpers/table-keyboard.test.ts +27 -27
- package/src/data/table/helpers/table-keyboard.ts +43 -4
- package/src/data/table/hooks/useGridCache.ts +73 -0
- package/src/data/table/root/DataTableRoot.tsx +2 -3
- package/src/data/table/root/useTableKeyboardNav.ts +95 -125
- package/src/data/table/th/DataTableTh.tsx +7 -3
- package/src/data/table/tr/DataTableTr.tsx +7 -3
- package/src/link-card/LinkCard.tsx +15 -1
- package/src/process/Process.tsx +1 -1
- package/src/utils/i18n/locales/nb.ts +83 -4
|
@@ -1,67 +1,80 @@
|
|
|
1
|
-
import { useEffect
|
|
1
|
+
import { useEffect } from "react";
|
|
2
2
|
import { useEventCallback } from "../../../utils/hooks/index.js";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
const
|
|
10
|
-
activeCellRef.current = activeCell;
|
|
11
|
-
const observerRef = useRef(null);
|
|
12
|
-
const gridCacheRef = useRef({
|
|
13
|
-
grid: null,
|
|
14
|
-
dirty: true,
|
|
15
|
-
});
|
|
3
|
+
import { focusInitialTableTarget } from "../helpers/table-cell.js";
|
|
4
|
+
import { focusCellAndUpdateTabIndex } from "../helpers/table-focus.js";
|
|
5
|
+
import { findFirstCell, findFirstCellInRow, findLastCell, findLastCellInRow, findNextFocusableCell, } from "../helpers/table-grid-nav.js";
|
|
6
|
+
import { getNavigationAction, shouldBlockNavigation, } from "../helpers/table-keyboard.js";
|
|
7
|
+
import { useGridCache } from "../hooks/useGridCache.js";
|
|
8
|
+
function useTableKeyboardNav(tableRef, { enabled, shouldBlockNavigation: customBlockFn }) {
|
|
9
|
+
const { getTableGrid, activeCell, setActiveCell } = useGridCache(tableRef, enabled);
|
|
16
10
|
/**
|
|
17
|
-
*
|
|
18
|
-
* - Save original tabIndex of cells and restore when navigating away?
|
|
11
|
+
* Executes a navigation action and returns the target cell.
|
|
19
12
|
*/
|
|
20
|
-
const
|
|
21
|
-
|
|
22
|
-
|
|
13
|
+
const executeNavigationAction = useEventCallback((action) => {
|
|
14
|
+
if (!tableRef) {
|
|
15
|
+
return null;
|
|
16
|
+
}
|
|
17
|
+
let currentCell = activeCell;
|
|
18
|
+
currentCell !== null && currentCell !== void 0 ? currentCell : (currentCell = focusInitialTableTarget(tableRef));
|
|
19
|
+
if (!currentCell) {
|
|
23
20
|
return null;
|
|
24
21
|
}
|
|
25
|
-
const { grid, positions
|
|
22
|
+
const { grid, positions } = getTableGrid(tableRef);
|
|
26
23
|
const currentPos = positions.get(currentCell);
|
|
27
|
-
if (!currentPos
|
|
24
|
+
if (!currentPos &&
|
|
25
|
+
action.type !== "tableStart" &&
|
|
26
|
+
action.type !== "tableEnd") {
|
|
28
27
|
return null;
|
|
29
28
|
}
|
|
30
|
-
|
|
29
|
+
let nextCell = null;
|
|
30
|
+
switch (action.type) {
|
|
31
|
+
case "delta":
|
|
32
|
+
nextCell = findNextFocusableCell(grid, currentPos, action.delta, currentCell);
|
|
33
|
+
break;
|
|
34
|
+
case "home":
|
|
35
|
+
nextCell = findFirstCellInRow(grid, positions, currentCell);
|
|
36
|
+
break;
|
|
37
|
+
case "end":
|
|
38
|
+
nextCell = findLastCellInRow(grid, positions, currentCell);
|
|
39
|
+
break;
|
|
40
|
+
case "tableStart":
|
|
41
|
+
nextCell = findFirstCell(grid, currentCell);
|
|
42
|
+
break;
|
|
43
|
+
case "tableEnd":
|
|
44
|
+
nextCell = findLastCell(grid, currentCell);
|
|
45
|
+
break;
|
|
46
|
+
}
|
|
31
47
|
return nextCell
|
|
32
48
|
? focusCellAndUpdateTabIndex(nextCell, currentCell)
|
|
33
49
|
: null;
|
|
34
50
|
});
|
|
35
51
|
/**
|
|
36
|
-
* Handles keyboard navigation with arrow keys.
|
|
37
|
-
*
|
|
38
|
-
*
|
|
39
|
-
* TODO:
|
|
40
|
-
* - Check for other "blocking" scenarios, like actionmenus, dropdown etc
|
|
41
|
-
* - Consider having acallback user can hook into to determine if navigation should be blocked
|
|
42
|
-
* - Consider adding Home, End, PageUp, PageDown navigation
|
|
43
|
-
*
|
|
52
|
+
* Handles keyboard navigation with arrow keys, Home/End, and PageUp/PageDown.
|
|
53
|
+
* Checks if navigation should be blocked based on current focus context.
|
|
44
54
|
*/
|
|
45
|
-
const
|
|
46
|
-
|
|
47
|
-
if (shouldBlockArrowKeyNavigation(event)) {
|
|
55
|
+
const handleTableKeyDown = useEventCallback((event) => {
|
|
56
|
+
if (shouldBlockNavigation(event, customBlockFn)) {
|
|
48
57
|
return;
|
|
49
58
|
}
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
event.preventDefault();
|
|
54
|
-
newCell = navigateByArrowKey(delta);
|
|
59
|
+
const action = getNavigationAction(event);
|
|
60
|
+
if (!action) {
|
|
61
|
+
return;
|
|
55
62
|
}
|
|
63
|
+
event.preventDefault();
|
|
64
|
+
const newCell = executeNavigationAction(action);
|
|
56
65
|
newCell && setActiveCell(newCell);
|
|
57
66
|
});
|
|
58
67
|
/**
|
|
59
68
|
* When focus is moved to elements inside a cell like inputs, checkbox etc
|
|
60
69
|
* we want to update the active cell to the parent td/th, so that keyboard navigation continues to work as expected from there.
|
|
61
70
|
*/
|
|
62
|
-
const
|
|
71
|
+
const handleTableFocusIn = useEventCallback((event) => {
|
|
63
72
|
var _a;
|
|
64
73
|
const target = event.target;
|
|
74
|
+
if (tableRef && target === tableRef) {
|
|
75
|
+
focusInitialTableTarget(tableRef);
|
|
76
|
+
return;
|
|
77
|
+
}
|
|
65
78
|
const newCell = (_a = target === null || target === void 0 ? void 0 : target.closest("td, th")) !== null && _a !== void 0 ? _a : null;
|
|
66
79
|
if (!newCell || newCell === activeCell) {
|
|
67
80
|
return;
|
|
@@ -74,77 +87,22 @@ function useTableKeyboardNav(tableRef, { enabled }) {
|
|
|
74
87
|
}
|
|
75
88
|
});
|
|
76
89
|
/**
|
|
77
|
-
*
|
|
78
|
-
* - We want to check if elements are removed/added, like when filtering table, pagination etc
|
|
79
|
-
* - Changes in colspan/rowspan that can affect the grid structure
|
|
80
|
-
* - Hidden attribute or styles that can affect focusability of cells
|
|
81
|
-
*
|
|
82
|
-
* We also check if the active cell is removed from the DOM, and clear it if so.
|
|
90
|
+
* Attach event listeners for keyboard navigation and focus management.
|
|
83
91
|
*/
|
|
84
92
|
useEffect(() => {
|
|
85
93
|
if (!tableRef || !enabled) {
|
|
86
94
|
return;
|
|
87
95
|
}
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
if (activeCellRef.current && !activeCellRef.current.isConnected) {
|
|
91
|
-
setActiveCell(null);
|
|
92
|
-
}
|
|
93
|
-
});
|
|
94
|
-
observerRef.current.observe(tableRef, {
|
|
95
|
-
subtree: true,
|
|
96
|
-
childList: true,
|
|
97
|
-
attributes: true,
|
|
98
|
-
attributeFilter: ["colspan", "rowspan", "hidden", "style"],
|
|
99
|
-
});
|
|
96
|
+
tableRef.addEventListener("keydown", handleTableKeyDown);
|
|
97
|
+
tableRef.addEventListener("focusin", handleTableFocusIn);
|
|
100
98
|
return () => {
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
observerRef.current = null;
|
|
104
|
-
}
|
|
99
|
+
tableRef.removeEventListener("keydown", handleTableKeyDown);
|
|
100
|
+
tableRef.removeEventListener("focusin", handleTableFocusIn);
|
|
105
101
|
};
|
|
106
|
-
}, [tableRef, enabled]);
|
|
107
|
-
useEffect(() => {
|
|
108
|
-
if (!tableRef || !enabled) {
|
|
109
|
-
return;
|
|
110
|
-
}
|
|
111
|
-
tableRef.addEventListener("keydown", onKeyDown);
|
|
112
|
-
tableRef.addEventListener("focusin", onFocusIn);
|
|
113
|
-
return () => {
|
|
114
|
-
tableRef.removeEventListener("keydown", onKeyDown);
|
|
115
|
-
tableRef.removeEventListener("focusin", onFocusIn);
|
|
116
|
-
};
|
|
117
|
-
}, [tableRef, onKeyDown, onFocusIn, enabled]);
|
|
118
|
-
/*
|
|
119
|
-
* If keyboard-nav is re-enabled, we need to make sure to update the grid cache,
|
|
120
|
-
* since the table might have changed while it was disabled.
|
|
121
|
-
*/
|
|
122
|
-
useEffect(() => {
|
|
123
|
-
if (!enabled) {
|
|
124
|
-
return;
|
|
125
|
-
}
|
|
126
|
-
gridCacheRef.current.dirty = true;
|
|
127
|
-
}, [enabled]);
|
|
102
|
+
}, [tableRef, handleTableKeyDown, handleTableFocusIn, enabled]);
|
|
128
103
|
return {
|
|
129
104
|
/* Table should only have tabIndex until the focus is moved inside and is enabled */
|
|
130
105
|
tableTabIndex: enabled ? (activeCell ? undefined : 0) : undefined,
|
|
131
|
-
/*
|
|
132
|
-
* Allows us to capture focus on the table when navigating with Tab from outside, and move it to the first cell.
|
|
133
|
-
* We only want to do this if no cell is already focused.
|
|
134
|
-
*/
|
|
135
|
-
onFocus: () => {
|
|
136
|
-
if (!tableRef) {
|
|
137
|
-
return;
|
|
138
|
-
}
|
|
139
|
-
const focusedElement = document.activeElement;
|
|
140
|
-
const cellInTable = focusedElement === null || focusedElement === void 0 ? void 0 : focusedElement.closest("td, th");
|
|
141
|
-
/* Assume onFocusIn handler has updates cell */
|
|
142
|
-
if (cellInTable && tableRef.contains(cellInTable)) {
|
|
143
|
-
return;
|
|
144
|
-
}
|
|
145
|
-
const firstCell = getFirstCell(tableRef);
|
|
146
|
-
return firstCell ? focusCell(firstCell) : null;
|
|
147
|
-
},
|
|
148
106
|
};
|
|
149
107
|
}
|
|
150
108
|
export { useTableKeyboardNav };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTableKeyboardNav.js","sourceRoot":"","sources":["../../../../src/data/table/root/useTableKeyboardNav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"useTableKeyboardNav.js","sourceRoot":"","sources":["../../../../src/data/table/root/useTableKeyboardNav.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
interface DataTableThProps extends React.HTMLAttributes<HTMLTableCellElement> {
|
|
3
|
-
resizeHandler?: React.
|
|
3
|
+
resizeHandler?: (event: React.MouseEvent<HTMLButtonElement> | React.TouchEvent<HTMLButtonElement>) => void;
|
|
4
4
|
size?: number;
|
|
5
5
|
sortDirection?: "asc" | "desc" | "none" | false;
|
|
6
6
|
onSortChange?: (direction: "asc" | "desc" | "none", event: Event) => void;
|
|
@@ -36,7 +36,9 @@ const DataTableTh = forwardRef((_a, forwardedRef) => {
|
|
|
36
36
|
React.createElement(ActionMenu.Sub, null,
|
|
37
37
|
React.createElement(ActionMenu.SubTrigger, { icon: React.createElement(FunnelIcon, { "aria-hidden": true }) }, filterMenu.title),
|
|
38
38
|
React.createElement(ActionMenu.SubContent, null, filterMenu.content)))))),
|
|
39
|
-
resizeHandler && (React.createElement("button", {
|
|
39
|
+
resizeHandler && (React.createElement("button", {
|
|
40
|
+
// TODO: Should probably not be a button since it doesn't have onClick
|
|
41
|
+
onMouseDown: resizeHandler, onTouchStart: resizeHandler, className: "aksel-data-table__th-resize-handle" }))));
|
|
40
42
|
});
|
|
41
43
|
export { DataTableTh };
|
|
42
44
|
//# sourceMappingURL=DataTableTh.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableTh.js","sourceRoot":"","sources":["../../../../src/data/table/th/DataTableTh.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"DataTableTh.js","sourceRoot":"","sources":["../../../../src/data/table/th/DataTableTh.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAwBhE;;;GAGG;AACH,MAAM,WAAW,GAAG,UAAU,CAC5B,CACE,EAUC,EACD,YAAY,EACZ,EAAE;QAZF,EACE,SAAS,EACT,QAAQ,EACR,aAAa,EACb,IAAI,EACJ,aAAa,EACb,YAAY,EACZ,KAAK,EACL,MAAM,OAEP,EADI,IAAI,cATT,sGAUC,CADQ;IAIT,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,IAAI,EAAE,CAAC;IAEpC,OAAO,CACL,4CACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,CAAC,EAChD,KAAK,kBAAI,KAAK,EAAE,IAAI,IAAK,KAAK;QAE9B,oBAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,SAAS,EAAC,IAAI,EAAE,KAAK;YAC9C,6BAAK,SAAS,EAAC,8BAA8B,IAAE,QAAQ,CAAO;YAE9D,oBAAC,qBAAqB,IACpB,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,YAAY,GAC1B;YACF,oBAAC,MAAM,OAAG;YAEV,oBAAC,kBAAkB;gBAGhB,aAAa,IAAI,CAChB,oBAAC,UAAU,CAAC,KAAK,IAAC,KAAK,EAAC,WAAW;oBACjC,oBAAC,UAAU,CAAC,IAAI,IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,MAAM,EAAE,KAAK,CAAC,EAClD,IAAI,EAAE,oBAAC,UAAU,0BAAe,IAE/B,aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,CACrC;oBAClB,oBAAC,UAAU,CAAC,IAAI,IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,KAAK,EAAE,KAAK,CAAC,EACjD,IAAI,EAAE,oBAAC,YAAY,0BAAe,IAEjC,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,CACpC,CACD,CACpB;gBACA,UAAU,IAAI,CACb,oBAAC,UAAU,CAAC,KAAK,IAAC,KAAK,EAAC,QAAQ;oBAC9B,oBAAC,UAAU,CAAC,GAAG;wBACb,oBAAC,UAAU,CAAC,UAAU,IAAC,IAAI,EAAE,oBAAC,UAAU,0BAAe,IACpD,UAAU,CAAC,KAAK,CACK;wBACxB,oBAAC,UAAU,CAAC,UAAU,QAEnB,UAAU,CAAC,OAAO,CACG,CACT,CACA,CACpB,CACkB,CACd;QAER,aAAa,IAAI,CAChB;YACE,sEAAsE;YACtE,WAAW,EAAE,aAAa,EAC1B,YAAY,EAAE,aAAa,EAC3B,SAAS,EAAC,oCAAoC,GAC9C,CACH,CACE,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
type DataTableTrProps = React.HTMLAttributes<HTMLTableRowElement
|
|
3
|
-
|
|
2
|
+
type DataTableTrProps = React.HTMLAttributes<HTMLTableRowElement> & {
|
|
3
|
+
selected?: boolean;
|
|
4
|
+
};
|
|
5
|
+
declare const DataTableTr: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & {
|
|
6
|
+
selected?: boolean;
|
|
7
|
+
} & React.RefAttributes<HTMLTableRowElement>>;
|
|
4
8
|
export { DataTableTr };
|
|
5
9
|
export type { DataTableTrProps };
|
|
@@ -12,8 +12,10 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
12
12
|
import React, { forwardRef } from "react";
|
|
13
13
|
import { cl } from "../../../utils/helpers/index.js";
|
|
14
14
|
const DataTableTr = forwardRef((_a, forwardedRef) => {
|
|
15
|
-
var { className } = _a, rest = __rest(_a, ["className"]);
|
|
16
|
-
return (React.createElement("tr", Object.assign({}, rest, { ref: forwardedRef, className: cl("aksel-data-table__tr", className
|
|
15
|
+
var { className, selected = false } = _a, rest = __rest(_a, ["className", "selected"]);
|
|
16
|
+
return (React.createElement("tr", Object.assign({}, rest, { ref: forwardedRef, className: cl("aksel-data-table__tr", className, {
|
|
17
|
+
"aksel-data-table__tr--selected": selected,
|
|
18
|
+
}) })));
|
|
17
19
|
});
|
|
18
20
|
export { DataTableTr };
|
|
19
21
|
//# sourceMappingURL=DataTableTr.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableTr.js","sourceRoot":"","sources":["../../../../src/data/table/tr/DataTableTr.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"DataTableTr.js","sourceRoot":"","sources":["../../../../src/data/table/tr/DataTableTr.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAM5C,MAAM,WAAW,GAAG,UAAU,CAC5B,CAAC,EAAwC,EAAE,YAAY,EAAE,EAAE;QAA1D,EAAE,SAAS,EAAE,QAAQ,GAAG,KAAK,OAAW,EAAN,IAAI,cAAtC,yBAAwC,CAAF;IACrC,OAAO,CACL,4CACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,EAAE;YAC/C,gCAAgC,EAAE,QAAQ;SAC3C,CAAC,IACF,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}
|
|
@@ -24,6 +24,19 @@ interface LinkCardProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
24
24
|
* @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
|
|
25
25
|
*/
|
|
26
26
|
"data-color"?: AkselColor;
|
|
27
|
+
/**
|
|
28
|
+
* Changes the HTML element used for the root element.
|
|
29
|
+
*
|
|
30
|
+
* **When using `section`, provide either `aria-label` or `aria-labelledby` for better accessibility.**
|
|
31
|
+
* `axe-core` might warn about unique landmarks if you have multiple Accordions on page with the same label.
|
|
32
|
+
* In those cases consider updating to unique `aria-label` or `aria-labelledby` props.
|
|
33
|
+
* @see [📝 Landmarks unique](https://dequeuniversity.com/rules/axe/4.6/landmark-unique)
|
|
34
|
+
*
|
|
35
|
+
*
|
|
36
|
+
* **When using `article`, make sure `<LinkCard.Title />` is a heading and not a `span`.**
|
|
37
|
+
* @default "div"
|
|
38
|
+
*/
|
|
39
|
+
as?: "div" | "section" | "article";
|
|
27
40
|
}
|
|
28
41
|
interface LinkCardComponent extends React.ForwardRefExoticComponent<LinkCardProps & React.RefAttributes<HTMLDivElement>> {
|
|
29
42
|
/**
|
|
@@ -42,10 +42,10 @@ const { Provider: LinkCardContextProvider, useContext: useLinkCardContext } = cr
|
|
|
42
42
|
* ```
|
|
43
43
|
*/
|
|
44
44
|
export const LinkCard = forwardRef((_a, forwardedRef) => {
|
|
45
|
-
var { children, className, arrow = true, arrowPosition = "baseline", size = "medium" } = _a, restProps = __rest(_a, ["children", "className", "arrow", "arrowPosition", "size"]);
|
|
45
|
+
var { children, className, arrow = true, arrowPosition = "baseline", size = "medium", as: Component = "div" } = _a, restProps = __rest(_a, ["children", "className", "arrow", "arrowPosition", "size", "as"]);
|
|
46
46
|
return (React.createElement(LinkCardContextProvider, { size: size },
|
|
47
47
|
React.createElement(LinkAnchorOverlay, { asChild: true },
|
|
48
|
-
React.createElement(BodyLong, Object.assign({ as:
|
|
48
|
+
React.createElement(BodyLong, Object.assign({ as: Component, size: size, ref: forwardedRef, "data-color": "neutral", className: cl("aksel-link-card", className, `aksel-link-card--${size}`), "data-align-arrow": arrowPosition }, restProps),
|
|
49
49
|
children,
|
|
50
50
|
arrow && (React.createElement(LinkAnchorArrow, { fontSize: size === "medium" ? "1.75rem" : "1.5rem", className: "aksel-link-card__arrow" }))))));
|
|
51
51
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkCard.js","sourceRoot":"","sources":["../../src/link-card/LinkCard.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAkB,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EACL,UAAU,EACV,eAAe,EACf,iBAAiB,GAElB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,EAAE,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"LinkCard.js","sourceRoot":"","sources":["../../src/link-card/LinkCard.tsx"],"names":[],"mappings":"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"}
|
package/esm/process/Process.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ interface ProcessProps extends React.HTMLAttributes<HTMLOListElement> {
|
|
|
3
3
|
/**
|
|
4
4
|
* `<Process.Event />` elements.
|
|
5
5
|
*/
|
|
6
|
-
children: React.
|
|
6
|
+
children: React.ReactNode;
|
|
7
7
|
/**
|
|
8
8
|
* Hides the "aktiv"-text when the event is active.
|
|
9
9
|
* @default false
|