@navikt/ds-react 8.2.2 → 8.4.0

package/src/data/table/index.tsx

@@ -7,6 +7,7 @@ export {
   DataTableTr,
   DataTableTh,
   DataTableTd,
+  DataTableTfoot,
 } from "./root/DataTableRoot";
 export type {
   DataTableProps,
@@ -16,4 +17,5 @@ export type {
   DataTableTrProps,
   DataTableThProps,
   DataTableTdProps,
+  DataTableTfootProps,
 } from "./root/DataTableRoot";

package/src/data/table/root/DataTableRoot.tsx

@@ -1,5 +1,6 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useState } from "react";
 import { cl } from "../../../utils/helpers";
+import { useMergeRefs } from "../../../utils/hooks";
 import {
   DataTableCaption,
   type DataTableCaptionProps,
@@ -9,15 +10,32 @@ import {
   type DataTableTbodyProps,
 } from "../tbody/DataTableTbody";
 import { DataTableTd, type DataTableTdProps } from "../td/DataTableTd";
+import {
+  DataTableTfoot,
+  type DataTableTfootProps,
+} from "../tfoot/DataTableTfoot";
 import { DataTableTh, type DataTableThProps } from "../th/DataTableTh";
 import {
   DataTableThead,
   type DataTableTheadProps,
 } from "../thead/DataTableThead";
 import { DataTableTr, type DataTableTrProps } from "../tr/DataTableTr";
+import { useTableKeyboardNav } from "./useTableKeyboardNav";
 
 interface DataTableProps extends React.HTMLAttributes<HTMLTableElement> {
   children: React.ReactNode;
+  rowDensity?: "condensed" | "normal" | "spacious";
+  /**
+   * Enables keyboard navigation for table rows and cells.
+   * @default false
+   */
+  withKeyboardNav?: boolean;
+  /**
+   * Zebra striped table
+   * @default false
+   */
+  zebraStripes?: boolean;
+  truncateContent?: boolean;
 }
 
 interface DataTableRootComponent extends React.ForwardRefExoticComponent<
@@ -101,17 +119,54 @@ interface DataTableRootComponent extends React.ForwardRefExoticComponent<
    * ```
    */
   Td: typeof DataTableTd;
+  /**
+   * @see 🏷️ {@link DataTableTfootProps}
+   * @example
+   * ```jsx
+   * <DataTable>
+   *   <DataTable.Tfoot>
+   *     ...
+   *   </DataTable.Tfoot>
+   * </DataTable>
+   * ```
+   */
+  Tfoot: typeof DataTableTfoot;
 }
 
 const DataTable = forwardRef<HTMLTableElement, DataTableProps>(
-  ({ className, ...rest }, forwardedRef) => {
+  (
+    {
+      className,
+      rowDensity = "normal",
+      withKeyboardNav = false,
+      zebraStripes = false,
+      truncateContent = true,
+      ...rest
+    },
+    forwardedRef,
+  ) => {
+    const [tableRef, setTableRef] = useState<HTMLTableElement | null>(null);
+    const mergedRef = useMergeRefs(forwardedRef, setTableRef);
+
+    const { onFocus, tableTabIndex } = useTableKeyboardNav(tableRef, {
+      enabled: withKeyboardNav,
+    });
+
     return (
-      <div className="aksel-data-table__wrapper">
-        <table
-          {...rest}
-          ref={forwardedRef}
-          className={cl("aksel-data-table", className)}
-        />
+      <div className="aksel-data-table__border-wrapper">
+        <div className="aksel-data-table__scroll-wrapper">
+          <table
+            {...rest}
+            ref={mergedRef}
+            className={cl("aksel-data-table", className, {
+              "aksel-data-table--zebra-stripes": zebraStripes,
+              "aksel-data-table--truncate-content": truncateContent,
+            })}
+            data-density={rowDensity}
+            tabIndex={tableTabIndex}
+            onFocus={onFocus}
+          />
+        </div>
       </div>
     );
   },
@@ -123,23 +178,26 @@ DataTable.Tbody = DataTableTbody;
 DataTable.Th = DataTableTh;
 DataTable.Tr = DataTableTr;
 DataTable.Td = DataTableTd;
+DataTable.Tfoot = DataTableTfoot;
 
 export {
   DataTable,
   DataTableCaption,
   DataTableTbody,
   DataTableTd,
+  DataTableTfoot,
   DataTableTh,
   DataTableThead,
   DataTableTr,
 };
 export default DataTable;
 export type {
-  DataTableProps,
   DataTableCaptionProps,
+  DataTableProps,
   DataTableTbodyProps,
   DataTableTdProps,
-  DataTableThProps,
+  DataTableTfootProps,
   DataTableTheadProps,
+  DataTableThProps,
   DataTableTrProps,
 };

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

@@ -0,0 +1,197 @@
+import { useEffect, useRef, useState } from "react";
+import { useEventCallback } from "../../../utils/hooks";
+import { getActiveCell, getFirstCell } from "../helpers/table-cell";
+import { focusCell, focusCellAndUpdateTabIndex } from "../helpers/table-focus";
+import {
+  type GridCache,
+  ensureTableGrid,
+  findNextCell,
+} from "../helpers/table-grid-nav";
+import {
+  getDeltaFromKey,
+  shouldBlockArrowKeyNavigation,
+} from "../helpers/table-keyboard";
+
+function useTableKeyboardNav(
+  tableRef: HTMLTableElement | null,
+  { enabled }: { enabled: boolean },
+) {
+  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,
+  });
+
+  /**
+   * TODO:
+   * - Save original tabIndex of cells and restore when navigating away?
+   */
+  const navigateByArrowKey = useEventCallback(
+    (delta: { x: number; y: number }) => {
+      const currentCell = getActiveCell(tableRef, activeCell);
+      if (!currentCell || !tableRef) {
+        return null;
+      }
+
+      const { grid, positions, maxCols } = ensureTableGrid(
+        tableRef,
+        gridCacheRef.current,
+      );
+      const currentPos = positions.get(currentCell);
+
+      if (!currentPos) {
+        return null;
+      }
+
+      const nextCell = findNextCell(
+        grid,
+        currentPos,
+        delta,
+        currentCell,
+        maxCols,
+      );
+      return nextCell
+        ? focusCellAndUpdateTabIndex(nextCell, currentCell)
+        : null;
+    },
+  );
+
+  /**
+   * 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
+   *
+   */
+  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)) {
+      return;
+    }
+
+    let newCell: Element | null = null;
+
+    const delta = getDeltaFromKey(event.key);
+    if (delta) {
+      event.preventDefault();
+      newCell = navigateByArrowKey(delta);
+    }
+
+    newCell && setActiveCell(newCell);
+  });
+
+  /**
+   * 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 target = event.target as Element | null;
+    const newCell = target?.closest("td, th") ?? null;
+    if (!newCell || newCell === activeCell) {
+      return;
+    }
+
+    const updatedCell = focusCellAndUpdateTabIndex(newCell, activeCell, {
+      shouldFocus: false,
+    });
+    if (updatedCell) {
+      setActiveCell(updatedCell);
+    }
+  });
+
+  /**
+   * 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.
+   */
+  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"],
+    });
+
+    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, 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]);
+
+  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 };

package/src/data/table/td/DataTableTd.tsx

@@ -1,7 +1,13 @@
 import React, { forwardRef } from "react";
 import { cl } from "../../../utils/helpers";
 
-type DataTableTdProps = React.HTMLAttributes<HTMLTableCellElement>;
+interface DataTableTdProps extends React.HTMLAttributes<HTMLTableCellElement> {
+  /**
+   * TODO: Shouldnt be needed to declare these here... But getting type-errors if not
+   */
+  colSpan?: number;
+  rowSpan?: number;
+}
 
 const DataTableTd = forwardRef<HTMLTableCellElement, DataTableTdProps>(
   ({ className, children, ...rest }, forwardedRef) => {

package/src/data/table/tfoot/DataTableTfoot.tsx

@@ -0,0 +1,21 @@
+import React, { forwardRef } from "react";
+import { cl } from "../../../utils/helpers";
+
+type DataTableTfootProps = React.HTMLAttributes<HTMLTableSectionElement>;
+
+const DataTableTfoot = forwardRef<HTMLTableSectionElement, DataTableTfootProps>(
+  ({ className, children, ...rest }, forwardedRef) => {
+    return (
+      <tfoot
+        {...rest}
+        ref={forwardedRef}
+        className={cl("aksel-data-table__tfoot", className)}
+      >
+        {children}
+      </tfoot>
+    );
+  },
+);
+
+export { DataTableTfoot };
+export type { DataTableTfootProps };

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

@@ -1,64 +1,107 @@
 import React, { forwardRef } from "react";
-import {
-  CaretLeftRightIcon,
-  PushPinFillIcon,
-  PushPinIcon,
-} from "@navikt/aksel-icons";
-import { Button } from "../../../button";
+import { FunnelIcon, SortDownIcon, SortUpIcon } from "@navikt/aksel-icons";
+import { ActionMenu } from "../../../action-menu";
+import { HStack, Spacer } from "../../../primitives/stack";
 import { cl } from "../../../utils/helpers";
+import { DataTableThActions } from "./DataTableThActions";
+import { DataTableThSortHandle } from "./DataTableThSortHandle";
 
-type DataTableThProps = React.HTMLAttributes<HTMLTableCellElement> & {
+interface DataTableThProps extends React.HTMLAttributes<HTMLTableCellElement> {
   resizeHandler?: React.MouseEventHandler<HTMLButtonElement>;
-  isPinned?: boolean;
-  pinningHandler?: React.MouseEventHandler<HTMLButtonElement>;
-  size?: number;
-};
+  size?: number; // TODO: size should be required when resizeHandler is set
+  sortDirection?: "asc" | "desc" | "none" | false;
+  onSortChange?: (direction: "asc" | "desc" | "none", event: Event) => void;
+  render?: {
+    filterMenu?: {
+      title: string;
+      content: React.ReactNode;
+    };
+  };
+  /**
+   * TODO: Shouldnt be needed to declare these here... But getting type-errors if not
+   */
+  colSpan?: number;
+  rowSpan?: number;
+}
 
+/**
+ * TODO:
+ * - Plan for pinning: Move it into "settings" dialog like here: https://cloudscape.design/examples/react/table.html
+ */
 const DataTableTh = forwardRef<HTMLTableCellElement, DataTableThProps>(
   (
     {
       className,
       children,
       resizeHandler,
-      isPinned = false,
-      pinningHandler,
       size,
+      sortDirection,
+      onSortChange,
+      style,
+      render,
       ...rest
     },
     forwardedRef,
   ) => {
+    const { filterMenu } = render || {};
+
     return (
       <th
         {...rest}
         ref={forwardedRef}
         className={cl("aksel-data-table__th", className)}
-        style={{ width: size }}
+        style={{ width: size, ...style }}
       >
-        {children}
-        {pinningHandler && (
-          <Button
-            onClick={pinningHandler}
-            size="small"
-            variant="secondary"
-            icon={
-              isPinned ? (
-                <PushPinFillIcon aria-hidden title="Fest kolonne" />
-              ) : (
-                <PushPinIcon aria-hidden title="Løstne kolonne" />
-              )
-            }
+        <HStack align="center" gap="space-8" wrap={false}>
+          <div className="aksel-data-table__th-content">{children}</div>
+          {/* TODO: If the column is too narrow, the sort button will move when hovering b.c. the actions menu button slides in */}
+          <DataTableThSortHandle
+            sortDirection={sortDirection}
+            onSortChange={onSortChange}
           />
-        )}
+          <Spacer />
+
+          <DataTableThActions>
+            {/* TODO: onSortChange just rotates between the three states now */}
+            {/* TODO: Sorting texts do not handle different data-types now */}
+            {sortDirection && (
+              <ActionMenu.Group label="Sortering">
+                <ActionMenu.Item
+                  onSelect={(event) => onSortChange?.("desc", event)}
+                  icon={<SortUpIcon aria-hidden />}
+                >
+                  {sortDirection === "desc" ? "Fjern sortering" : "A-Z"}
+                </ActionMenu.Item>
+                <ActionMenu.Item
+                  onSelect={(event) => onSortChange?.("asc", event)}
+                  icon={<SortDownIcon aria-hidden />}
+                >
+                  {sortDirection === "asc" ? "Fjern sortering" : "Z-A"}
+                </ActionMenu.Item>
+              </ActionMenu.Group>
+            )}
+            {filterMenu && (
+              <ActionMenu.Group label="Filter">
+                <ActionMenu.Sub>
+                  <ActionMenu.SubTrigger icon={<FunnelIcon aria-hidden />}>
+                    {filterMenu.title}
+                  </ActionMenu.SubTrigger>
+                  <ActionMenu.SubContent>
+                    {/* TODO: ActionMenu stops tab from working, so user cant tab "into" filter now even when wrapper has focus */}
+                    {filterMenu.content}
+                  </ActionMenu.SubContent>
+                </ActionMenu.Sub>
+              </ActionMenu.Group>
+            )}
+          </DataTableThActions>
+        </HStack>
+
         {resizeHandler && (
-          <Button
+          <button
             onMouseDown={resizeHandler}
             onMouseUp={resizeHandler}
-            className={cl("aksel-data-table__th-resize-handle")}
-            size="small"
-            variant="secondary"
-            icon={
-              <CaretLeftRightIcon aria-hidden title="Endre kolonnestørrelse" />
-            }
+            className="aksel-data-table__th-resize-handle"
+            data-color="neutral"
           />
         )}
       </th>

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

@@ -0,0 +1,32 @@
+import React from "react";
+import { MenuElipsisVerticalIcon } from "@navikt/aksel-icons";
+import { ActionMenu } from "../../../action-menu";
+import { Button } from "../../../button";
+
+function DataTableThActions({ children }: { children?: React.ReactNode }) {
+  const [open, setOpen] = React.useState(false);
+  /* TODO: Fix this */
+  // @ts-expect-error Temp hack to hide when no children present
+  if (!children || !children.filter(Boolean).length) {
+    return null;
+  }
+
+  return (
+    <ActionMenu open={open} onOpenChange={setOpen}>
+      <ActionMenu.Trigger>
+        <Button
+          data-color="neutral"
+          variant="tertiary"
+          size="small"
+          icon={<MenuElipsisVerticalIcon title="Åpne kolonnemeny" />}
+          onClick={() => setOpen(!open)}
+          data-expanded={open}
+          className="aksel-data-table__th-action-button"
+        />
+      </ActionMenu.Trigger>
+      <ActionMenu.Content>{children}</ActionMenu.Content>
+    </ActionMenu>
+  );
+}
+
+export { DataTableThActions };

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

@@ -0,0 +1,67 @@
+import React, { useMemo } from "react";
+import {
+  ArrowsUpDownIcon,
+  SortDownIcon,
+  SortUpIcon,
+} from "@navikt/aksel-icons";
+import { Button } from "../../../button";
+
+const ICON_CONFIG = {
+  desc: {
+    icon: SortDownIcon,
+    title: "Sorter stigende",
+  },
+  asc: {
+    icon: SortUpIcon,
+    title: "Ingen sortering",
+  },
+  none: {
+    icon: ArrowsUpDownIcon,
+    title: "Sorter synkende",
+  },
+};
+
+function DataTableThSortHandle({
+  sortDirection = false,
+  onSortChange,
+}: {
+  sortDirection?: "asc" | "desc" | "none" | false;
+  onSortChange?: (direction: "asc" | "desc" | "none", event: Event) => void;
+}) {
+  const IconConfig = useMemo(() => {
+    if (!sortDirection) {
+      return null;
+    }
+    return ICON_CONFIG[sortDirection];
+  }, [sortDirection]);
+
+  if (!sortDirection || !IconConfig) {
+    return null;
+  }
+
+  return (
+    <Button
+      data-color="neutral"
+      variant="tertiary"
+      size="small"
+      icon={<IconConfig.icon title={IconConfig.title} />}
+      onClick={(event) => {
+        if (!onSortChange) return;
+
+        /* TODO: This configuration is not a given */
+        let newDirection: "asc" | "desc" | "none";
+        if (sortDirection === "none") {
+          newDirection = "asc";
+        } else if (sortDirection === "asc") {
+          newDirection = "desc";
+        } else {
+          newDirection = "none";
+        }
+        /* TODO: Handle types better */
+        onSortChange(newDirection, event as unknown as Event);
+      }}
+    />
+  );
+}
+
+export { DataTableThSortHandle };

package/src/date/Date.Input.tsx

@@ -35,8 +35,7 @@ export const {
 });
 
 export interface DateInputProps
-  extends FormFieldProps,
-    Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+  extends FormFieldProps, Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
   /**
    * Input label
    */

package/src/date/datepicker/DatePicker.types.ts

@@ -39,7 +39,8 @@ export type ConditionalModeProps = SingleMode | MultipleMode | RangeMode;
 
 // https://daypicker.dev/api/interfaces/PropsBase
 export interface DatePickerDefaultProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect">,
+  extends
+    Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect">,
     Pick<
       PropsBase,
       "month" | "onMonthChange" | "today" | "onDayClick" | "defaultMonth"

package/src/date/datepicker/hooks/useDatepicker.tsx

@@ -7,19 +7,18 @@ import { getLocaleFromString } from "../../Date.locale";
 import { formatDateForInput, isValidDate, parseDate } from "../../date-utils";
 import { DatePickerProps } from "../DatePicker";
 
-export interface UseDatepickerOptions
-  extends Pick<
-    DatePickerProps,
-    | "locale"
-    | "fromDate"
-    | "toDate"
-    | "today"
-    | "toDate"
-    | "fromDate"
-    | "toDate"
-    | "disabled"
-    | "disableWeekends"
-  > {
+export interface UseDatepickerOptions extends Pick<
+  DatePickerProps,
+  | "locale"
+  | "fromDate"
+  | "toDate"
+  | "today"
+  | "toDate"
+  | "fromDate"
+  | "toDate"
+  | "disabled"
+  | "disableWeekends"
+> {
   /**
    * The initially selected Date
    */