@navikt/ds-react 8.4.1 → 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.
Files changed (73) hide show
  1. package/cjs/accordion/Accordion.d.ts +10 -0
  2. package/cjs/accordion/Accordion.js +2 -2
  3. package/cjs/accordion/Accordion.js.map +1 -1
  4. package/cjs/data/table/helpers/table-cell.d.ts +2 -2
  5. package/cjs/data/table/helpers/table-cell.js +2 -5
  6. package/cjs/data/table/helpers/table-cell.js.map +1 -1
  7. package/cjs/data/table/helpers/table-focus.d.ts +26 -2
  8. package/cjs/data/table/helpers/table-focus.js +60 -9
  9. package/cjs/data/table/helpers/table-focus.js.map +1 -1
  10. package/cjs/data/table/helpers/table-grid-nav.d.ts +45 -9
  11. package/cjs/data/table/helpers/table-grid-nav.js +108 -24
  12. package/cjs/data/table/helpers/table-grid-nav.js.map +1 -1
  13. package/cjs/data/table/helpers/table-keyboard.d.ts +24 -3
  14. package/cjs/data/table/helpers/table-keyboard.js +30 -5
  15. package/cjs/data/table/helpers/table-keyboard.js.map +1 -1
  16. package/cjs/data/table/hooks/useGridCache.d.ts +17 -0
  17. package/cjs/data/table/hooks/useGridCache.js +65 -0
  18. package/cjs/data/table/hooks/useGridCache.js.map +1 -0
  19. package/cjs/data/table/root/DataTableRoot.js +2 -2
  20. package/cjs/data/table/root/DataTableRoot.js.map +1 -1
  21. package/cjs/data/table/root/useTableKeyboardNav.d.ts +9 -3
  22. package/cjs/data/table/root/useTableKeyboardNav.js +53 -95
  23. package/cjs/data/table/root/useTableKeyboardNav.js.map +1 -1
  24. package/cjs/link-card/LinkCard.d.ts +13 -0
  25. package/cjs/link-card/LinkCard.js +2 -2
  26. package/cjs/link-card/LinkCard.js.map +1 -1
  27. package/cjs/process/Process.d.ts +1 -1
  28. package/cjs/utils/i18n/locales/nb.d.ts +154 -75
  29. package/cjs/utils/i18n/locales/nb.js +154 -75
  30. package/cjs/utils/i18n/locales/nb.js.map +1 -1
  31. package/esm/accordion/Accordion.d.ts +10 -0
  32. package/esm/accordion/Accordion.js +2 -2
  33. package/esm/accordion/Accordion.js.map +1 -1
  34. package/esm/data/table/helpers/table-cell.d.ts +2 -2
  35. package/esm/data/table/helpers/table-cell.js +2 -5
  36. package/esm/data/table/helpers/table-cell.js.map +1 -1
  37. package/esm/data/table/helpers/table-focus.d.ts +26 -2
  38. package/esm/data/table/helpers/table-focus.js +55 -9
  39. package/esm/data/table/helpers/table-focus.js.map +1 -1
  40. package/esm/data/table/helpers/table-grid-nav.d.ts +45 -9
  41. package/esm/data/table/helpers/table-grid-nav.js +102 -23
  42. package/esm/data/table/helpers/table-grid-nav.js.map +1 -1
  43. package/esm/data/table/helpers/table-keyboard.d.ts +24 -3
  44. package/esm/data/table/helpers/table-keyboard.js +29 -4
  45. package/esm/data/table/helpers/table-keyboard.js.map +1 -1
  46. package/esm/data/table/hooks/useGridCache.d.ts +17 -0
  47. package/esm/data/table/hooks/useGridCache.js +63 -0
  48. package/esm/data/table/hooks/useGridCache.js.map +1 -0
  49. package/esm/data/table/root/DataTableRoot.js +2 -2
  50. package/esm/data/table/root/DataTableRoot.js.map +1 -1
  51. package/esm/data/table/root/useTableKeyboardNav.d.ts +9 -3
  52. package/esm/data/table/root/useTableKeyboardNav.js +58 -100
  53. package/esm/data/table/root/useTableKeyboardNav.js.map +1 -1
  54. package/esm/link-card/LinkCard.d.ts +13 -0
  55. package/esm/link-card/LinkCard.js +2 -2
  56. package/esm/link-card/LinkCard.js.map +1 -1
  57. package/esm/process/Process.d.ts +1 -1
  58. package/esm/utils/i18n/locales/nb.d.ts +154 -75
  59. package/esm/utils/i18n/locales/nb.js +154 -75
  60. package/esm/utils/i18n/locales/nb.js.map +1 -1
  61. package/package.json +3 -3
  62. package/src/accordion/Accordion.tsx +19 -2
  63. package/src/data/table/helpers/table-cell.ts +2 -7
  64. package/src/data/table/helpers/table-focus.ts +70 -9
  65. package/src/data/table/helpers/table-grid-nav.ts +146 -31
  66. package/src/data/table/helpers/table-keyboard.test.ts +27 -27
  67. package/src/data/table/helpers/table-keyboard.ts +43 -4
  68. package/src/data/table/hooks/useGridCache.ts +73 -0
  69. package/src/data/table/root/DataTableRoot.tsx +1 -2
  70. package/src/data/table/root/useTableKeyboardNav.ts +95 -125
  71. package/src/link-card/LinkCard.tsx +15 -1
  72. package/src/process/Process.tsx +1 -1
  73. package/src/utils/i18n/locales/nb.ts +83 -4
@@ -0,0 +1,17 @@
1
+ /**
2
+ * Manages the table grid cache and observes DOM changes that require grid rebuilding.
3
+ * Watches for structural changes (rows/cells added/removed) and attribute changes
4
+ * (colspan, rowspan, hidden, style) that affect grid layout and focusability.
5
+ */
6
+ declare function useGridCache(tableRef: HTMLTableElement | null, enabled: boolean): {
7
+ getTableGrid: (_tableRef: HTMLTableElement) => {
8
+ grid: (Element | undefined)[][];
9
+ positions: Map<Element, {
10
+ x: number;
11
+ y: number;
12
+ }>;
13
+ };
14
+ activeCell: Element | null;
15
+ setActiveCell: import("react").Dispatch<import("react").SetStateAction<Element | null>>;
16
+ };
17
+ export { useGridCache };
@@ -0,0 +1,65 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.useGridCache = useGridCache;
4
+ const react_1 = require("react");
5
+ const hooks_1 = require("../../../utils/hooks");
6
+ const table_grid_nav_1 = require("../helpers/table-grid-nav");
7
+ /**
8
+ * Manages the table grid cache and observes DOM changes that require grid rebuilding.
9
+ * Watches for structural changes (rows/cells added/removed) and attribute changes
10
+ * (colspan, rowspan, hidden, style) that affect grid layout and focusability.
11
+ */
12
+ function useGridCache(tableRef, enabled) {
13
+ const gridCacheRef = (0, react_1.useRef)({
14
+ grid: null,
15
+ dirty: true,
16
+ });
17
+ const [activeCell, setActiveCell] = (0, react_1.useState)(null);
18
+ const activeCellRef = (0, hooks_1.useValueAsRef)(activeCell).current;
19
+ const observerRef = (0, react_1.useRef)(null);
20
+ (0, react_1.useEffect)(() => {
21
+ if (!tableRef || !enabled) {
22
+ return;
23
+ }
24
+ observerRef.current = new MutationObserver(() => {
25
+ gridCacheRef.current.dirty = true;
26
+ if (activeCellRef && !activeCellRef.isConnected) {
27
+ setActiveCell(null);
28
+ }
29
+ });
30
+ observerRef.current.observe(tableRef, {
31
+ subtree: true,
32
+ childList: true,
33
+ attributes: true,
34
+ attributeFilter: ["colspan", "rowspan", "hidden", "style"],
35
+ });
36
+ return () => {
37
+ if (observerRef.current) {
38
+ observerRef.current.disconnect();
39
+ observerRef.current = null;
40
+ }
41
+ };
42
+ }, [tableRef, enabled, activeCellRef]);
43
+ /**
44
+ * If keyboard-nav is re-enabled, mark grid as dirty since
45
+ * the table might have changed while it was disabled.
46
+ */
47
+ (0, react_1.useEffect)(() => {
48
+ if (enabled) {
49
+ gridCacheRef.current.dirty = true;
50
+ }
51
+ }, [enabled]);
52
+ const getTableGrid = (0, react_1.useCallback)((_tableRef) => {
53
+ if (gridCacheRef.current.dirty || !gridCacheRef.current.grid) {
54
+ gridCacheRef.current.grid = (0, table_grid_nav_1.buildTableGridMap)(_tableRef);
55
+ gridCacheRef.current.dirty = false;
56
+ }
57
+ return gridCacheRef.current.grid;
58
+ }, []);
59
+ return {
60
+ getTableGrid,
61
+ activeCell,
62
+ setActiveCell,
63
+ };
64
+ }
65
+ //# sourceMappingURL=useGridCache.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useGridCache.js","sourceRoot":"","sources":["../../../../src/data/table/hooks/useGridCache.ts"],"names":[],"mappings":";;AAwES,oCAAY;AAxErB,iCAAiE;AACjE,gDAAqD;AACrD,8DAA8E;AAE9E;;;;GAIG;AACH,SAAS,YAAY,CAAC,QAAiC,EAAE,OAAgB;IACvE,MAAM,YAAY,GAAG,IAAA,cAAM,EAAY;QACrC,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,IAAI;KACZ,CAAC,CAAC;IAEH,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAiB,IAAI,CAAC,CAAC;IACnE,MAAM,aAAa,GAAG,IAAA,qBAAa,EAAC,UAAU,CAAC,CAAC,OAAO,CAAC;IACxD,MAAM,WAAW,GAAG,IAAA,cAAM,EAA0B,IAAI,CAAC,CAAC;IAE1D,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;YAC1B,OAAO;QACT,CAAC;QAED,WAAW,CAAC,OAAO,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YAC9C,YAAY,CAAC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC;YAClC,IAAI,aAAa,IAAI,CAAC,aAAa,CAAC,WAAW,EAAE,CAAC;gBAChD,aAAa,CAAC,IAAI,CAAC,CAAC;YACtB,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,EAAE;YACpC,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI;YACf,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,CAAC;SAC3D,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,IAAI,WAAW,CAAC,OAAO,EAAE,CAAC;gBACxB,WAAW,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;gBACjC,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;YAC7B,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC;IAEvC;;;OAGG;IACH,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,OAAO,EAAE,CAAC;YACZ,YAAY,CAAC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC;QACpC,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,YAAY,GAAG,IAAA,mBAAW,EAAC,CAAC,SAA2B,EAAE,EAAE;QAC/D,IAAI,YAAY,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;YAC7D,YAAY,CAAC,OAAO,CAAC,IAAI,GAAG,IAAA,kCAAiB,EAAC,SAAS,CAAC,CAAC;YACzD,YAAY,CAAC,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC;QACrC,CAAC;QAED,OAAO,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC;IACnC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,YAAY;QACZ,UAAU;QACV,aAAa;KACd,CAAC;AACJ,CAAC"}
@@ -67,7 +67,7 @@ const DataTable = (0, react_1.forwardRef)((_a, forwardedRef) => {
67
67
  var { className, rowDensity = "normal", withKeyboardNav = false, zebraStripes = false, truncateContent = true } = _a, rest = __rest(_a, ["className", "rowDensity", "withKeyboardNav", "zebraStripes", "truncateContent"]);
68
68
  const [tableRef, setTableRef] = (0, react_1.useState)(null);
69
69
  const mergedRef = (0, hooks_1.useMergeRefs)(forwardedRef, setTableRef);
70
- const { onFocus, tableTabIndex } = (0, useTableKeyboardNav_1.useTableKeyboardNav)(tableRef, {
70
+ const { tableTabIndex } = (0, useTableKeyboardNav_1.useTableKeyboardNav)(tableRef, {
71
71
  enabled: withKeyboardNav,
72
72
  });
73
73
  return (react_1.default.createElement("div", { className: "aksel-data-table__border-wrapper" },
@@ -75,7 +75,7 @@ const DataTable = (0, react_1.forwardRef)((_a, forwardedRef) => {
75
75
  react_1.default.createElement("table", Object.assign({}, rest, { ref: mergedRef, className: (0, helpers_1.cl)("aksel-data-table", className, {
76
76
  "aksel-data-table--zebra-stripes": zebraStripes,
77
77
  "aksel-data-table--truncate-content": truncateContent,
78
- }), "data-density": rowDensity, tabIndex: tableTabIndex, onFocus: onFocus })))));
78
+ }), "data-density": rowDensity, tabIndex: tableTabIndex })))));
79
79
  });
80
80
  exports.DataTable = DataTable;
81
81
  DataTable.Caption = DataTableCaption_1.DataTableCaption;
@@ -1 +1 @@
1
- {"version":3,"file":"DataTableRoot.js","sourceRoot":"","sources":["../../../../src/data/table/root/DataTableRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAoD;AACpD,oDAA4C;AAC5C,gDAAoD;AACpD,kEAGqC;AAkLnC,iGApLA,mCAAgB,OAoLA;AAjLlB,4DAGiC;AA+K/B,+FAjLA,+BAAc,OAiLA;AA9KhB,mDAAuE;AA+KrE,4FA/KO,yBAAW,OA+KP;AA9Kb,4DAGiC;AA4K/B,+FA9KA,+BAAc,OA8KA;AA3KhB,mDAAuE;AA4KrE,4FA5KO,yBAAW,OA4KP;AA3Kb,4DAGiC;AAyK/B,+FA3KA,+BAAc,OA2KA;AAxKhB,mDAAuE;AAyKrE,4FAzKO,yBAAW,OAyKP;AAxKb,+DAA4D;AAiH5D,MAAM,SAAS,GAAG,IAAA,kBAAU,EAC1B,CACE,EAOC,EACD,YAAY,EACZ,EAAE;QATF,EACE,SAAS,EACT,UAAU,GAAG,QAAQ,EACrB,eAAe,GAAG,KAAK,EACvB,YAAY,GAAG,KAAK,EACpB,eAAe,GAAG,IAAI,OAEvB,EADI,IAAI,cANT,iFAOC,CADQ;IAIT,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAA0B,IAAI,CAAC,CAAC;IACxE,MAAM,SAAS,GAAG,IAAA,oBAAY,EAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IAE1D,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,GAAG,IAAA,yCAAmB,EAAC,QAAQ,EAAE;QAC/D,OAAO,EAAE,eAAe;KACzB,CAAC,CAAC;IAEH,OAAO,CACL,uCAAK,SAAS,EAAC,kCAAkC;QAC/C,uCAAK,SAAS,EAAC,kCAAkC;YAC/C,yDACM,IAAI,IACR,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,IAAA,YAAE,EAAC,kBAAkB,EAAE,SAAS,EAAE;oBAC3C,iCAAiC,EAAE,YAAY;oBAC/C,oCAAoC,EAAE,eAAe;iBACtD,CAAC,kBACY,UAAU,EACxB,QAAQ,EAAE,aAAa,EACvB,OAAO,EAAE,OAAO,IAChB,CACE,CACF,CACP,CAAC;AACJ,CAAC,CACwB,CAAC;AAW1B,8BAAS;AATX,SAAS,CAAC,OAAO,GAAG,mCAAgB,CAAC;AACrC,SAAS,CAAC,KAAK,GAAG,+BAAc,CAAC;AACjC,SAAS,CAAC,KAAK,GAAG,+BAAc,CAAC;AACjC,SAAS,CAAC,EAAE,GAAG,yBAAW,CAAC;AAC3B,SAAS,CAAC,EAAE,GAAG,yBAAW,CAAC;AAC3B,SAAS,CAAC,EAAE,GAAG,yBAAW,CAAC;AAC3B,SAAS,CAAC,KAAK,GAAG,+BAAc,CAAC;AAYjC,kBAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"DataTableRoot.js","sourceRoot":"","sources":["../../../../src/data/table/root/DataTableRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAoD;AACpD,oDAA4C;AAC5C,gDAAoD;AACpD,kEAGqC;AAiLnC,iGAnLA,mCAAgB,OAmLA;AAhLlB,4DAGiC;AA8K/B,+FAhLA,+BAAc,OAgLA;AA7KhB,mDAAuE;AA8KrE,4FA9KO,yBAAW,OA8KP;AA7Kb,4DAGiC;AA2K/B,+FA7KA,+BAAc,OA6KA;AA1KhB,mDAAuE;AA2KrE,4FA3KO,yBAAW,OA2KP;AA1Kb,4DAGiC;AAwK/B,+FA1KA,+BAAc,OA0KA;AAvKhB,mDAAuE;AAwKrE,4FAxKO,yBAAW,OAwKP;AAvKb,+DAA4D;AAiH5D,MAAM,SAAS,GAAG,IAAA,kBAAU,EAC1B,CACE,EAOC,EACD,YAAY,EACZ,EAAE;QATF,EACE,SAAS,EACT,UAAU,GAAG,QAAQ,EACrB,eAAe,GAAG,KAAK,EACvB,YAAY,GAAG,KAAK,EACpB,eAAe,GAAG,IAAI,OAEvB,EADI,IAAI,cANT,iFAOC,CADQ;IAIT,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAA0B,IAAI,CAAC,CAAC;IACxE,MAAM,SAAS,GAAG,IAAA,oBAAY,EAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IAE1D,MAAM,EAAE,aAAa,EAAE,GAAG,IAAA,yCAAmB,EAAC,QAAQ,EAAE;QACtD,OAAO,EAAE,eAAe;KACzB,CAAC,CAAC;IAEH,OAAO,CACL,uCAAK,SAAS,EAAC,kCAAkC;QAC/C,uCAAK,SAAS,EAAC,kCAAkC;YAC/C,yDACM,IAAI,IACR,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,IAAA,YAAE,EAAC,kBAAkB,EAAE,SAAS,EAAE;oBAC3C,iCAAiC,EAAE,YAAY;oBAC/C,oCAAoC,EAAE,eAAe;iBACtD,CAAC,kBACY,UAAU,EACxB,QAAQ,EAAE,aAAa,IACvB,CACE,CACF,CACP,CAAC;AACJ,CAAC,CACwB,CAAC;AAW1B,8BAAS;AATX,SAAS,CAAC,OAAO,GAAG,mCAAgB,CAAC;AACrC,SAAS,CAAC,KAAK,GAAG,+BAAc,CAAC;AACjC,SAAS,CAAC,KAAK,GAAG,+BAAc,CAAC;AACjC,SAAS,CAAC,EAAE,GAAG,yBAAW,CAAC;AAC3B,SAAS,CAAC,EAAE,GAAG,yBAAW,CAAC;AAC3B,SAAS,CAAC,EAAE,GAAG,yBAAW,CAAC;AAC3B,SAAS,CAAC,KAAK,GAAG,+BAAc,CAAC;AAYjC,kBAAe,SAAS,CAAC"}
@@ -1,7 +1,13 @@
1
- declare function useTableKeyboardNav(tableRef: HTMLTableElement | null, { enabled }: {
1
+ type UseTableKeyboardNavOptions = {
2
2
  enabled: boolean;
3
- }): {
3
+ /**
4
+ * Custom callback to determine if navigation should be blocked.
5
+ * Called before default blocking logic.
6
+ */
7
+ shouldBlockNavigation?: (event: KeyboardEvent) => boolean;
8
+ };
9
+ declare function useTableKeyboardNav(tableRef: HTMLTableElement | null, { enabled, shouldBlockNavigation: customBlockFn }: UseTableKeyboardNavOptions): {
4
10
  tableTabIndex: number | undefined;
5
- onFocus: () => Element | null | undefined;
6
11
  };
7
12
  export { useTableKeyboardNav };
13
+ export type { UseTableKeyboardNavOptions };
@@ -7,64 +7,77 @@ const table_cell_1 = require("../helpers/table-cell");
7
7
  const table_focus_1 = require("../helpers/table-focus");
8
8
  const table_grid_nav_1 = require("../helpers/table-grid-nav");
9
9
  const table_keyboard_1 = require("../helpers/table-keyboard");
10
- function useTableKeyboardNav(tableRef, { enabled }) {
11
- const [activeCell, setActiveCell] = (0, react_1.useState)(null);
12
- const activeCellRef = (0, react_1.useRef)(null);
13
- activeCellRef.current = activeCell;
14
- const observerRef = (0, react_1.useRef)(null);
15
- const gridCacheRef = (0, react_1.useRef)({
16
- grid: null,
17
- dirty: true,
18
- });
10
+ const useGridCache_1 = require("../hooks/useGridCache");
11
+ function useTableKeyboardNav(tableRef, { enabled, shouldBlockNavigation: customBlockFn }) {
12
+ const { getTableGrid, activeCell, setActiveCell } = (0, useGridCache_1.useGridCache)(tableRef, enabled);
19
13
  /**
20
- * TODO:
21
- * - Save original tabIndex of cells and restore when navigating away?
14
+ * Executes a navigation action and returns the target cell.
22
15
  */
23
- const navigateByArrowKey = (0, hooks_1.useEventCallback)((delta) => {
24
- const currentCell = (0, table_cell_1.getActiveCell)(tableRef, activeCell);
25
- if (!currentCell || !tableRef) {
16
+ const executeNavigationAction = (0, hooks_1.useEventCallback)((action) => {
17
+ if (!tableRef) {
18
+ return null;
19
+ }
20
+ let currentCell = activeCell;
21
+ currentCell !== null && currentCell !== void 0 ? currentCell : (currentCell = (0, table_cell_1.focusInitialTableTarget)(tableRef));
22
+ if (!currentCell) {
26
23
  return null;
27
24
  }
28
- const { grid, positions, maxCols } = (0, table_grid_nav_1.ensureTableGrid)(tableRef, gridCacheRef.current);
25
+ const { grid, positions } = getTableGrid(tableRef);
29
26
  const currentPos = positions.get(currentCell);
30
- if (!currentPos) {
27
+ if (!currentPos &&
28
+ action.type !== "tableStart" &&
29
+ action.type !== "tableEnd") {
31
30
  return null;
32
31
  }
33
- const nextCell = (0, table_grid_nav_1.findNextCell)(grid, currentPos, delta, currentCell, maxCols);
32
+ let nextCell = null;
33
+ switch (action.type) {
34
+ case "delta":
35
+ nextCell = (0, table_grid_nav_1.findNextFocusableCell)(grid, currentPos, action.delta, currentCell);
36
+ break;
37
+ case "home":
38
+ nextCell = (0, table_grid_nav_1.findFirstCellInRow)(grid, positions, currentCell);
39
+ break;
40
+ case "end":
41
+ nextCell = (0, table_grid_nav_1.findLastCellInRow)(grid, positions, currentCell);
42
+ break;
43
+ case "tableStart":
44
+ nextCell = (0, table_grid_nav_1.findFirstCell)(grid, currentCell);
45
+ break;
46
+ case "tableEnd":
47
+ nextCell = (0, table_grid_nav_1.findLastCell)(grid, currentCell);
48
+ break;
49
+ }
34
50
  return nextCell
35
51
  ? (0, table_focus_1.focusCellAndUpdateTabIndex)(nextCell, currentCell)
36
52
  : null;
37
53
  });
38
54
  /**
39
- * Handles keyboard navigation with arrow keys.
40
- * We check if the key is an arrow key, and if so, we calculate the next cell to focus based on the current active cell and the grid structure.
41
- *
42
- * TODO:
43
- * - Check for other "blocking" scenarios, like actionmenus, dropdown etc
44
- * - Consider having acallback user can hook into to determine if navigation should be blocked
45
- * - Consider adding Home, End, PageUp, PageDown navigation
46
- *
55
+ * Handles keyboard navigation with arrow keys, Home/End, and PageUp/PageDown.
56
+ * Checks if navigation should be blocked based on current focus context.
47
57
  */
48
- const onKeyDown = (0, hooks_1.useEventCallback)((event) => {
49
- /* Stops keydown from moving if we can assume that you are currently editing input, select etc */
50
- if ((0, table_keyboard_1.shouldBlockArrowKeyNavigation)(event)) {
58
+ const handleTableKeyDown = (0, hooks_1.useEventCallback)((event) => {
59
+ if ((0, table_keyboard_1.shouldBlockNavigation)(event, customBlockFn)) {
51
60
  return;
52
61
  }
53
- let newCell = null;
54
- const delta = (0, table_keyboard_1.getDeltaFromKey)(event.key);
55
- if (delta) {
56
- event.preventDefault();
57
- newCell = navigateByArrowKey(delta);
62
+ const action = (0, table_keyboard_1.getNavigationAction)(event);
63
+ if (!action) {
64
+ return;
58
65
  }
66
+ event.preventDefault();
67
+ const newCell = executeNavigationAction(action);
59
68
  newCell && setActiveCell(newCell);
60
69
  });
61
70
  /**
62
71
  * When focus is moved to elements inside a cell like inputs, checkbox etc
63
72
  * we want to update the active cell to the parent td/th, so that keyboard navigation continues to work as expected from there.
64
73
  */
65
- const onFocusIn = (0, hooks_1.useEventCallback)((event) => {
74
+ const handleTableFocusIn = (0, hooks_1.useEventCallback)((event) => {
66
75
  var _a;
67
76
  const target = event.target;
77
+ if (tableRef && target === tableRef) {
78
+ (0, table_cell_1.focusInitialTableTarget)(tableRef);
79
+ return;
80
+ }
68
81
  const newCell = (_a = target === null || target === void 0 ? void 0 : target.closest("td, th")) !== null && _a !== void 0 ? _a : null;
69
82
  if (!newCell || newCell === activeCell) {
70
83
  return;
@@ -77,77 +90,22 @@ function useTableKeyboardNav(tableRef, { enabled }) {
77
90
  }
78
91
  });
79
92
  /**
80
- * Observes changes is table structure and updates the grid cache accordingly.
81
- * - We want to check if elements are removed/added, like when filtering table, pagination etc
82
- * - Changes in colspan/rowspan that can affect the grid structure
83
- * - Hidden attribute or styles that can affect focusability of cells
84
- *
85
- * We also check if the active cell is removed from the DOM, and clear it if so.
93
+ * Attach event listeners for keyboard navigation and focus management.
86
94
  */
87
95
  (0, react_1.useEffect)(() => {
88
96
  if (!tableRef || !enabled) {
89
97
  return;
90
98
  }
91
- observerRef.current = new MutationObserver(() => {
92
- gridCacheRef.current.dirty = true;
93
- if (activeCellRef.current && !activeCellRef.current.isConnected) {
94
- setActiveCell(null);
95
- }
96
- });
97
- observerRef.current.observe(tableRef, {
98
- subtree: true,
99
- childList: true,
100
- attributes: true,
101
- attributeFilter: ["colspan", "rowspan", "hidden", "style"],
102
- });
99
+ tableRef.addEventListener("keydown", handleTableKeyDown);
100
+ tableRef.addEventListener("focusin", handleTableFocusIn);
103
101
  return () => {
104
- if (observerRef.current) {
105
- observerRef.current.disconnect();
106
- observerRef.current = null;
107
- }
102
+ tableRef.removeEventListener("keydown", handleTableKeyDown);
103
+ tableRef.removeEventListener("focusin", handleTableFocusIn);
108
104
  };
109
- }, [tableRef, enabled]);
110
- (0, react_1.useEffect)(() => {
111
- if (!tableRef || !enabled) {
112
- return;
113
- }
114
- tableRef.addEventListener("keydown", onKeyDown);
115
- tableRef.addEventListener("focusin", onFocusIn);
116
- return () => {
117
- tableRef.removeEventListener("keydown", onKeyDown);
118
- tableRef.removeEventListener("focusin", onFocusIn);
119
- };
120
- }, [tableRef, onKeyDown, onFocusIn, enabled]);
121
- /*
122
- * If keyboard-nav is re-enabled, we need to make sure to update the grid cache,
123
- * since the table might have changed while it was disabled.
124
- */
125
- (0, react_1.useEffect)(() => {
126
- if (!enabled) {
127
- return;
128
- }
129
- gridCacheRef.current.dirty = true;
130
- }, [enabled]);
105
+ }, [tableRef, handleTableKeyDown, handleTableFocusIn, enabled]);
131
106
  return {
132
107
  /* Table should only have tabIndex until the focus is moved inside and is enabled */
133
108
  tableTabIndex: enabled ? (activeCell ? undefined : 0) : undefined,
134
- /*
135
- * Allows us to capture focus on the table when navigating with Tab from outside, and move it to the first cell.
136
- * We only want to do this if no cell is already focused.
137
- */
138
- onFocus: () => {
139
- if (!tableRef) {
140
- return;
141
- }
142
- const focusedElement = document.activeElement;
143
- const cellInTable = focusedElement === null || focusedElement === void 0 ? void 0 : focusedElement.closest("td, th");
144
- /* Assume onFocusIn handler has updates cell */
145
- if (cellInTable && tableRef.contains(cellInTable)) {
146
- return;
147
- }
148
- const firstCell = (0, table_cell_1.getFirstCell)(tableRef);
149
- return firstCell ? (0, table_focus_1.focusCell)(firstCell) : null;
150
- },
151
109
  };
152
110
  }
153
111
  //# sourceMappingURL=useTableKeyboardNav.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"useTableKeyboardNav.js","sourceRoot":"","sources":["../../../../src/data/table/root/useTableKeyboardNav.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"useTableKeyboardNav.js","sourceRoot":"","sources":["../../../../src/data/table/root/useTableKeyboardNav.ts"],"names":[],"mappings":"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"}
@@ -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
  /**
@@ -78,10 +78,10 @@ const { Provider: LinkCardContextProvider, useContext: useLinkCardContext } = (0
78
78
  * ```
79
79
  */
80
80
  exports.LinkCard = (0, react_1.forwardRef)((_a, forwardedRef) => {
81
- var { children, className, arrow = true, arrowPosition = "baseline", size = "medium" } = _a, restProps = __rest(_a, ["children", "className", "arrow", "arrowPosition", "size"]);
81
+ var { children, className, arrow = true, arrowPosition = "baseline", size = "medium", as: Component = "div" } = _a, restProps = __rest(_a, ["children", "className", "arrow", "arrowPosition", "size", "as"]);
82
82
  return (react_1.default.createElement(LinkCardContextProvider, { size: size },
83
83
  react_1.default.createElement(link_anchor_1.LinkAnchorOverlay, { asChild: true },
84
- react_1.default.createElement(typography_1.BodyLong, Object.assign({ as: "div", size: size, ref: forwardedRef, "data-color": "neutral", className: (0, helpers_1.cl)("aksel-link-card", className, `aksel-link-card--${size}`), "data-align-arrow": arrowPosition }, restProps),
84
+ react_1.default.createElement(typography_1.BodyLong, Object.assign({ as: Component, size: size, ref: forwardedRef, "data-color": "neutral", className: (0, helpers_1.cl)("aksel-link-card", className, `aksel-link-card--${size}`), "data-align-arrow": arrowPosition }, restProps),
85
85
  children,
86
86
  arrow && (react_1.default.createElement(link_anchor_1.LinkAnchorArrow, { fontSize: size === "medium" ? "1.75rem" : "1.5rem", className: "aksel-link-card__arrow" }))))));
87
87
  });
@@ -1 +1 @@
1
- {"version":3,"file":"LinkCard.js","sourceRoot":"","sources":["../../src/link-card/LinkCard.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"LinkCard.js","sourceRoot":"","sources":["../../src/link-card/LinkCard.tsx"],"names":[],"mappings":"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"}
@@ -3,7 +3,7 @@ interface ProcessProps extends React.HTMLAttributes<HTMLOListElement> {
3
3
  /**
4
4
  * `<Process.Event />` elements.
5
5
  */
6
- children: React.ReactElement<typeof ProcessEvent>[];
6
+ children: React.ReactNode;
7
7
  /**
8
8
  * Hides the "aktiv"-text when the event is active.
9
9
  * @default false