@navikt/ds-react 8.4.0 → 8.5.0

package/src/data/table/root/useTableKeyboardNav.ts

@@ -1,60 +1,95 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect } from "react";
 import { useEventCallback } from "../../../utils/hooks";
-import { getActiveCell, getFirstCell } from "../helpers/table-cell";
-import { focusCell, focusCellAndUpdateTabIndex } from "../helpers/table-focus";
+import { focusInitialTableTarget } from "../helpers/table-cell";
+import { focusCellAndUpdateTabIndex } from "../helpers/table-focus";
 import {
-  type GridCache,
-  ensureTableGrid,
-  findNextCell,
+  findFirstCell,
+  findFirstCellInRow,
+  findLastCell,
+  findLastCellInRow,
+  findNextFocusableCell,
 } from "../helpers/table-grid-nav";
 import {
-  getDeltaFromKey,
-  shouldBlockArrowKeyNavigation,
+  type NavigationAction,
+  getNavigationAction,
+  shouldBlockNavigation,
 } from "../helpers/table-keyboard";
+import { useGridCache } from "../hooks/useGridCache";
+
+type UseTableKeyboardNavOptions = {
+  enabled: boolean;
+  /**
+   * Custom callback to determine if navigation should be blocked.
+   * Called before default blocking logic.
+   */
+  shouldBlockNavigation?: (event: KeyboardEvent) => boolean;
+};
 
 function useTableKeyboardNav(
   tableRef: HTMLTableElement | null,
-  { enabled }: { enabled: boolean },
+  { enabled, shouldBlockNavigation: customBlockFn }: UseTableKeyboardNavOptions,
 ) {
-  const [activeCell, setActiveCell] = useState<Element | null>(null);
-  const activeCellRef = useRef<Element | null>(null);
-  activeCellRef.current = activeCell;
-
-  const observerRef = useRef<MutationObserver | null>(null);
-
-  const gridCacheRef = useRef<GridCache>({
-    grid: null,
-    dirty: true,
-  });
+  const { getTableGrid, activeCell, setActiveCell } = useGridCache(
+    tableRef,
+    enabled,
+  );
 
   /**
-   * TODO:
-   * - Save original tabIndex of cells and restore when navigating away?
+   * Executes a navigation action and returns the target cell.
    */
-  const navigateByArrowKey = useEventCallback(
-    (delta: { x: number; y: number }) => {
-      const currentCell = getActiveCell(tableRef, activeCell);
-      if (!currentCell || !tableRef) {
+  const executeNavigationAction = useEventCallback(
+    (action: NavigationAction) => {
+      if (!tableRef) {
+        return null;
+      }
+
+      let currentCell = activeCell;
+      currentCell ??= focusInitialTableTarget(tableRef);
+
+      if (!currentCell) {
         return null;
       }
 
-      const { grid, positions, maxCols } = ensureTableGrid(
-        tableRef,
-        gridCacheRef.current,
-      );
+      const { grid, positions } = getTableGrid(tableRef);
       const currentPos = positions.get(currentCell);
 
-      if (!currentPos) {
+      if (
+        !currentPos &&
+        action.type !== "tableStart" &&
+        action.type !== "tableEnd"
+      ) {
         return null;
       }
 
-      const nextCell = findNextCell(
-        grid,
-        currentPos,
-        delta,
-        currentCell,
-        maxCols,
-      );
+      let nextCell: Element | null = null;
+
+      switch (action.type) {
+        case "delta":
+          nextCell = findNextFocusableCell(
+            grid,
+            currentPos!,
+            action.delta,
+            currentCell,
+          );
+          break;
+
+        case "home":
+          nextCell = findFirstCellInRow(grid, positions, currentCell);
+          break;
+
+        case "end":
+          nextCell = findLastCellInRow(grid, positions, currentCell);
+          break;
+
+        case "tableStart":
+          nextCell = findFirstCell(grid, currentCell);
+          break;
+
+        case "tableEnd":
+          nextCell = findLastCell(grid, currentCell);
+          break;
+      }
+
       return nextCell
         ? focusCellAndUpdateTabIndex(nextCell, currentCell)
         : null;
@@ -62,29 +97,21 @@ function useTableKeyboardNav(
   );
 
   /**
-   * Handles keyboard navigation with arrow keys.
-   * 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.
-   *
-   * TODO:
-   * - Check for other "blocking" scenarios, like actionmenus, dropdown etc
-   * - Consider having acallback user can hook into to determine if navigation should be blocked
-   * - Consider adding Home, End, PageUp, PageDown navigation
-   *
+   * Handles keyboard navigation with arrow keys, Home/End, and PageUp/PageDown.
+   * Checks if navigation should be blocked based on current focus context.
    */
-  const onKeyDown = useEventCallback((event: KeyboardEvent): void => {
-    /* Stops keydown from moving if we can assume that you are currently editing input, select etc */
-    if (shouldBlockArrowKeyNavigation(event)) {
+  const handleTableKeyDown = useEventCallback((event: KeyboardEvent): void => {
+    if (shouldBlockNavigation(event, customBlockFn)) {
       return;
     }
 
-    let newCell: Element | null = null;
-
-    const delta = getDeltaFromKey(event.key);
-    if (delta) {
-      event.preventDefault();
-      newCell = navigateByArrowKey(delta);
+    const action = getNavigationAction(event);
+    if (!action) {
+      return;
     }
 
+    event.preventDefault();
+    const newCell = executeNavigationAction(action);
     newCell && setActiveCell(newCell);
   });
 
@@ -92,8 +119,14 @@ function useTableKeyboardNav(
    * When focus is moved to elements inside a cell like inputs, checkbox etc
    * we want to update the active cell to the parent td/th, so that keyboard navigation continues to work as expected from there.
    */
-  const onFocusIn = useEventCallback((event: FocusEvent): void => {
+  const handleTableFocusIn = useEventCallback((event: FocusEvent): void => {
     const target = event.target as Element | null;
+
+    if (tableRef && target === tableRef) {
+      focusInitialTableTarget(tableRef);
+      return;
+    }
+
     const newCell = target?.closest("td, th") ?? null;
     if (!newCell || newCell === activeCell) {
       return;
@@ -108,90 +141,27 @@ function useTableKeyboardNav(
   });
 
   /**
-   * Observes changes is table structure and updates the grid cache accordingly.
-   * - We want to check if elements are removed/added, like when filtering table, pagination etc
-   * - Changes in colspan/rowspan that can affect the grid structure
-   * - Hidden attribute or styles that can affect focusability of cells
-   *
-   * We also check if the active cell is removed from the DOM, and clear it if so.
+   * Attach event listeners for keyboard navigation and focus management.
    */
   useEffect(() => {
     if (!tableRef || !enabled) {
       return;
     }
 
-    observerRef.current = new MutationObserver(() => {
-      gridCacheRef.current.dirty = true;
-      if (activeCellRef.current && !activeCellRef.current.isConnected) {
-        setActiveCell(null);
-      }
-    });
-
-    observerRef.current.observe(tableRef, {
-      subtree: true,
-      childList: true,
-      attributes: true,
-      attributeFilter: ["colspan", "rowspan", "hidden", "style"],
-    });
+    tableRef.addEventListener("keydown", handleTableKeyDown);
+    tableRef.addEventListener("focusin", handleTableFocusIn);
 
     return () => {
-      if (observerRef.current) {
-        observerRef.current.disconnect();
-        observerRef.current = null;
-      }
-    };
-  }, [tableRef, enabled]);
-
-  useEffect(() => {
-    if (!tableRef || !enabled) {
-      return;
-    }
-
-    tableRef.addEventListener("keydown", onKeyDown);
-    tableRef.addEventListener("focusin", onFocusIn);
-
-    return () => {
-      tableRef.removeEventListener("keydown", onKeyDown);
-      tableRef.removeEventListener("focusin", onFocusIn);
+      tableRef.removeEventListener("keydown", handleTableKeyDown);
+      tableRef.removeEventListener("focusin", handleTableFocusIn);
     };
-  }, [tableRef, onKeyDown, onFocusIn, enabled]);
-
-  /*
-   * If keyboard-nav is re-enabled, we need to make sure to update the grid cache,
-   * since the table might have changed while it was disabled.
-   */
-  useEffect(() => {
-    if (!enabled) {
-      return;
-    }
-
-    gridCacheRef.current.dirty = true;
-  }, [enabled]);
+  }, [tableRef, handleTableKeyDown, handleTableFocusIn, enabled]);
 
   return {
     /* Table should only have tabIndex until the focus is moved inside and is enabled */
     tableTabIndex: enabled ? (activeCell ? undefined : 0) : undefined,
-    /*
-     * Allows us to capture focus on the table when navigating with Tab from outside, and move it to the first cell.
-     * We only want to do this if no cell is already focused.
-     */
-    onFocus: () => {
-      if (!tableRef) {
-        return;
-      }
-
-      const focusedElement = document.activeElement;
-      const cellInTable = focusedElement?.closest("td, th");
-
-      /* Assume onFocusIn handler has updates cell */
-      if (cellInTable && tableRef.contains(cellInTable)) {
-        return;
-      }
-
-      const firstCell = getFirstCell(tableRef);
-      return firstCell ? focusCell(firstCell) : null;
-    },
   };
 }
 
 export { useTableKeyboardNav };
+export type { UseTableKeyboardNavOptions };

package/src/data/table/th/DataTableTh.tsx

@@ -7,7 +7,11 @@ import { DataTableThActions } from "./DataTableThActions";
 import { DataTableThSortHandle } from "./DataTableThSortHandle";
 
 interface DataTableThProps extends React.HTMLAttributes<HTMLTableCellElement> {
-  resizeHandler?: React.MouseEventHandler<HTMLButtonElement>;
+  resizeHandler?: (
+    event:
+      | React.MouseEvent<HTMLButtonElement>
+      | React.TouchEvent<HTMLButtonElement>,
+  ) => void;
   size?: number; // TODO: size should be required when resizeHandler is set
   sortDirection?: "asc" | "desc" | "none" | false;
   onSortChange?: (direction: "asc" | "desc" | "none", event: Event) => void;
@@ -98,10 +102,10 @@ const DataTableTh = forwardRef<HTMLTableCellElement, DataTableThProps>(
 
         {resizeHandler && (
           <button
+            // TODO: Should probably not be a button since it doesn't have onClick
             onMouseDown={resizeHandler}
-            onMouseUp={resizeHandler}
+            onTouchStart={resizeHandler}
             className="aksel-data-table__th-resize-handle"
-            data-color="neutral"
           />
         )}
       </th>

package/src/data/table/tr/DataTableTr.tsx

@@ -1,15 +1,19 @@
 import React, { forwardRef } from "react";
 import { cl } from "../../../utils/helpers";
 
-type DataTableTrProps = React.HTMLAttributes<HTMLTableRowElement>;
+type DataTableTrProps = React.HTMLAttributes<HTMLTableRowElement> & {
+  selected?: boolean;
+};
 
 const DataTableTr = forwardRef<HTMLTableRowElement, DataTableTrProps>(
-  ({ className, ...rest }, forwardedRef) => {
+  ({ className, selected = false, ...rest }, forwardedRef) => {
     return (
       <tr
         {...rest}
         ref={forwardedRef}
-        className={cl("aksel-data-table__tr", className)}
+        className={cl("aksel-data-table__tr", className, {
+          "aksel-data-table__tr--selected": selected,
+        })}
       />
     );
   },

package/src/link-card/LinkCard.tsx

@@ -33,6 +33,19 @@ interface LinkCardProps extends HTMLAttributes<HTMLDivElement> {
    * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
    */
   "data-color"?: AkselColor;
+  /**
+   * Changes the HTML element used for the root element.
+   *
+   * **When using `section`, provide either `aria-label` or `aria-labelledby` for better accessibility.**
+   * `axe-core` might warn about unique landmarks if you have multiple Accordions on page with the same label.
+   * In those cases consider updating to unique `aria-label` or `aria-labelledby` props.
+   * @see [📝 Landmarks unique](https://dequeuniversity.com/rules/axe/4.6/landmark-unique)
+   *
+   *
+   * **When using `article`, make sure `<LinkCard.Title />` is a heading and not a `span`.**
+   * @default "div"
+   */
+  as?: "div" | "section" | "article";
 }
 
 type LinkCardContextProps = {
@@ -106,6 +119,7 @@ export const LinkCard = forwardRef<HTMLDivElement, LinkCardProps>(
       arrow = true,
       arrowPosition = "baseline",
       size = "medium",
+      as: Component = "div",
       ...restProps
     }: LinkCardProps,
     forwardedRef,
@@ -114,7 +128,7 @@ export const LinkCard = forwardRef<HTMLDivElement, LinkCardProps>(
       <LinkCardContextProvider size={size}>
         <LinkAnchorOverlay asChild>
           <BodyLong
-            as="div"
+            as={Component}
             size={size}
             ref={forwardedRef}
             data-color="neutral"

package/src/process/Process.tsx

@@ -15,7 +15,7 @@ interface ProcessProps extends React.HTMLAttributes<HTMLOListElement> {
   /**
    * `<Process.Event />` elements.
    */
-  children: React.ReactElement<typeof ProcessEvent>[];
+  children: React.ReactNode;
   /**
    * Hides the "aktiv"-text when the event is active.
    * @default false

package/src/utils/i18n/locales/nb.ts

@@ -7,139 +7,218 @@ interface TranslationMap {
 export default {
   global: {
     dateLocale: nb,
+    /** @default "Vis mer" */
     showMore: "Vis mer",
+    /** @default "Vis mindre" */
     showLess: "Vis mindre",
+    /** @default "Skrivebeskyttet" */
     readOnly: "Skrivebeskyttet",
+    /** @default "Lukk" */
     close: "Lukk",
+    /** @default "Feil" */
     error: "Feil",
+    /** @default "Informasjon" */
     info: "Informasjon",
+    /** @default "Suksess" */
     success: "Suksess",
+    /** @default "Advarsel" */
     warning: "Advarsel",
+    /** @default "Kunngjøring" */
     announcement: "Kunngjøring",
   },
   Chips: {
     Removable: {
-      /** Will be appended to the accessible name for the button. */
+      /** Will be appended to the accessible name for the button.
+       * @default "slett" */
       labelSuffix: "slett",
     },
   },
   Combobox: {
-    /** The input value will be appended to the end of this text, e.g. `Legg til "input value"`. */
+    /** The input value will be appended to the end of this text, e.g. `Legg til "input value"`.
+     * @default "Legg til" */
     addOption: "Legg til",
+    /** @default "Ingen søketreff" */
     noMatches: "Ingen søketreff",
-    /** Loader title */
+    /** Loader title
+     * @default "Søker…" */
     loading: "Søker…",
+    /** @default "{selected} av maks {limit} er valgt." */
     maxSelected: "{selected} av maks {limit} er valgt.",
   },
   CopyButton: {
+    /** @default "Kopier" */
     title: "Kopier",
+    /** @default "Kopiert!" */
     activeText: "Kopiert!",
   },
   DatePicker: {
+    /** @default "Velg dato" */
     chooseDate: "Velg dato",
+    /** @default "Velg datoer" */
     chooseDates: "Velg datoer",
+    /** @default "Velg start- og sluttdato" */
     chooseDateRange: "Velg start- og sluttdato",
+    /** @default "Velg måned" */
     chooseMonth: "Velg måned",
+    /** @default "Uke" */
     week: "Uke",
+    /** @default "Uke {week}" */
     weekNumber: "Uke {week}",
+    /** @default "Velg uke {week}" */
     selectWeekNumber: "Velg uke {week}",
+    /** @default "Måned" */
     month: "Måned",
+    /** @default "Gå til neste måned" */
     goToNextMonth: "Gå til neste måned",
+    /** @default "Gå til forrige måned" */
     goToPreviousMonth: "Gå til forrige måned",
+    /** @default "År" */
     year: "År",
+    /** @default "Gå til neste år" */
     goToNextYear: "Gå til neste år",
+    /** @default "Gå til forrige år" */
     goToPreviousYear: "Gå til forrige år",
+    /** @default "Åpne datovelger" */
     openDatePicker: "Åpne datovelger",
+    /** @default "Åpne månedsvelger" */
     openMonthPicker: "Åpne månedsvelger",
+    /** @default "Lukk datovelger" */
     closeDatePicker: "Lukk datovelger",
+    /** @default "Lukk månedsvelger" */
     closeMonthPicker: "Lukk månedsvelger",
   },
   ErrorSummary: {
+    /** @default "Du må rette disse feilene før du kan fortsette:" */
     heading: "Du må rette disse feilene før du kan fortsette:",
   },
   FileUpload: {
     dropzone: {
+      /** @default "Velg fil" */
       button: "Velg fil",
+      /** @default "Velg filer" */
       buttonMultiple: "Velg filer",
+      /** @default "Dra og slipp filen her" */
       dragAndDrop: "Dra og slipp filen her",
+      /** @default "Dra og slipp filer her" */
       dragAndDropMultiple: "Dra og slipp filer her",
+      /** @default "Slipp" */
       drop: "Slipp",
+      /** @default "eller" */
       or: "eller",
+      /** @default "Filopplasting er deaktivert" */
       disabled: "Filopplasting er deaktivert",
+      /** @default "Du kan ikke laste opp flere filer" */
       disabledFilelimit: "Du kan ikke laste opp flere filer",
     },
     item: {
+      /** @default "Prøv å laste opp filen på nytt" */
       retryButtonTitle: "Prøv å laste opp filen på nytt",
+      /** @default "Slett filen" */
       deleteButtonTitle: "Slett filen",
+      /** @default "Laster opp…" */
       uploading: "Laster opp…",
+      /** @default "Laster ned…" */
       downloading: "Laster ned…",
     },
   },
   FormProgress: {
+    /** @default "Steg {activeStep} av {totalSteps}" */
     step: "Steg {activeStep} av {totalSteps}",
+    /** @default "Vis alle steg" */
     showAllSteps: "Vis alle steg",
+    /** @default "Skjul alle steg" */
     hideAllSteps: "Skjul alle steg",
   },
   FormSummary: {
+    /** @default "Endre svar" */
     editAnswer: "Endre svar",
   },
   GuidePanel: {
+    /** @default "Illustrasjon av veileder" */
     illustrationLabel: "Illustrasjon av veileder",
   },
   HelpText: {
+    /** @default "Mer informasjon" */
     title: "Mer informasjon",
   },
   Loader: {
+    /** @default "Venter…" */
     title: "Venter…",
   },
   Pagination: {
+    /** @default "Forrige" */
     previous: "Forrige",
+    /** @default "Neste" */
     next: "Neste",
   },
   Process: {
+    /** @default "Aktiv" */
     active: "Aktiv",
   },
   ProgressBar: {
+    /** @default "{current} av {max}" */
     progress: "{current} av {max}",
+    /** @default "Fremdrift kan ikke beregnes, antatt tid er {seconds} sekunder." */
     progressUnknown:
       "Fremdrift kan ikke beregnes, antatt tid er {seconds} sekunder.",
   },
   Search: {
+    /** @default "Tøm feltet" */
     clear: "Tøm feltet",
+    /** @default "Søk" */
     search: "Søk",
   },
   Textarea: {
-    /** Screen readers only */
+    /** Screen readers only
+     * @default "Tekstområde med plass til {maxLength} tegn." */
     maxLength: "Tekstområde med plass til {maxLength} tegn.",
+    /** @default "{chars} tegn for mye" */
     charsTooMany: "{chars} tegn for mye",
+    /** @default "{chars} tegn igjen" */
     charsLeft: "{chars} tegn igjen",
   },
   Timeline: {
+    /** @default "dd.MM.yyyy" */
     dateFormat: "dd.MM.yyyy",
+    /** @default "dd.MM" */
     dayFormat: "dd.MM",
+    /** @default "MMM yy" */
     monthFormat: "MMM yy",
+    /** @default "yyyy" */
     yearFormat: "yyyy",
     Row: {
+      /** @default "Ingen perioder" */
       noPeriods: "Ingen perioder",
+      /** @default "{start} til {end}" */
       period: "{start} til {end}",
     },
     Period: {
+      /** @default "Suksess" */
       success: "Suksess",
+      /** @default "Advarsel" */
       warning: "Advarsel",
+      /** @default "Fare" */
       danger: "Fare",
+      /** @default "Info" */
       info: "Info",
+      /** @default "Nøytral" */
       neutral: "Nøytral",
+      /** @default "{status} fra {start} til {end}" */
       period: "{status} fra {start} til {end}",
     },
     Pin: {
+      /** @default "Pin: {date}" */
       pin: "Pin: {date}",
     },
     Zoom: {
+      /** @default "Zoom tidslinjen {start} til {end}" */
       zoom: "Zoom tidslinjen {start} til {end}",
+      /** @default "Tilbakestill tidsperspektiv" */
       reset: "Tilbakestill tidsperspektiv",
     },
   },
   Tooltip: {
+    /** @default "eller" */
     shortcutSeparator: "eller",
   },
 } satisfies TranslationMap;