@navikt/ds-react 8.5.2 → 8.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "8.5.2",
+  "version": "8.7.0",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -705,8 +705,8 @@
   "dependencies": {
     "@floating-ui/react": "0.27.8",
     "@floating-ui/react-dom": "^2.1.6",
-    "@navikt/aksel-icons": "^8.5.2",
-    "@navikt/ds-tokens": "^8.5.2",
+    "@navikt/aksel-icons": "^8.7.0",
+    "@navikt/ds-tokens": "^8.7.0",
     "date-fns": "^4.0.0",
     "react-day-picker": "9.7.0"
   },
@@ -716,7 +716,7 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/jscodeshift": "^0.11.11",
-    "@types/react": "19.2.9",
+    "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "aksel": "workspace:^",
     "concurrently": "9.2.1",
@@ -724,10 +724,10 @@
     "fast-glob": "3.3.3",
     "jscodeshift": "17.3.0",
     "jsdom": "27.1.0",
-    "react": "19.2.3",
-    "react-dom": "19.2.3",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
     "react-router": "^7.13.0",
-    "rimraf": "6.1.2",
+    "rimraf": "6.1.3",
     "swr": "^2.3.6",
     "tsc-alias": "1.8.16",
     "tsx": "^4.20.6",

package/src/data/drag-and-drop/item/DataDragAndDropItem.tsx

@@ -0,0 +1,101 @@
+import { useSortable } from "@dnd-kit/react/sortable";
+import React, { useRef } from "react";
+import {
+  CaretDownCircleFillIcon,
+  CaretUpCircleFillIcon,
+  DragVerticalIcon,
+} from "@navikt/aksel-icons";
+import { HStack } from "../../../primitives/stack";
+import { cl } from "../../../utils/helpers";
+import { useMergeRefs } from "../../../utils/hooks";
+import { DataDragAndDropContext } from "../root/DataDragAndDrop.context";
+
+interface DataDragAndDropItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  /**
+   * Unique id
+   */
+  id: string;
+  /**
+   * Index of the item being dragged
+   */
+  index: number;
+}
+
+/**
+ * TODO
+ *
+ * @see 🏷️ {@link DataDragAndDropItemProps}
+ * @example
+ * ```tsx
+ * <DragAndDrop.Item numOfSelectedRows={selectedRows.length} onClear={handleClear}>
+ *   TODO
+ * </DragAndDrop.Item>
+ * ```
+ */
+const DataDragAndDropItem = React.forwardRef<
+  HTMLDivElement,
+  DataDragAndDropItemProps
+>(({ children, id, index, className, ...rest }, forwardedRef) => {
+  const handleRef = useRef<HTMLDivElement>(null);
+  const { ref, isDragging, isDropTarget } = useSortable({
+    id,
+    index,
+    handle: handleRef,
+  });
+  const mergedRef = useMergeRefs(ref, forwardedRef);
+  const context = React.useContext(DataDragAndDropContext);
+  const mouseDragging = isDragging && context?.inputMethod === "mouse";
+  const mouseDropTarget = isDropTarget && context?.inputMethod === "mouse";
+  const keyboardDragging = isDragging && context?.inputMethod === "keyboard";
+
+  return (
+    <HStack gap="space-8" align="center" wrap={false} asChild>
+      {/* TODO Should this be a <li>? */}
+      <div
+        ref={mergedRef}
+        {...rest}
+        className={cl("aksel-data-table__drag-and-drop-item", className)}
+        data-dragging={isDragging}
+        data-mouse-dragging={mouseDragging}
+        data-keyboard-dragging={keyboardDragging}
+        data-drop-target={mouseDropTarget}
+        tabIndex={-1}
+      >
+        <div
+          className="aksel-data-table__drag-and-drop-item-drag-handler"
+          ref={handleRef}
+          // TODO Consider moving this to its own component
+          // TODO Perhaps make it a button where clicking also enables arrow icons?
+        >
+          {keyboardDragging && (
+            <span
+              className="aksel-data-table__drag-and-drop-item-keyboard-drag-icon"
+              data-direction="up"
+            >
+              <CaretUpCircleFillIcon aria-hidden fontSize="1.2rem" />
+            </span>
+          )}
+          <DragVerticalIcon
+            aria-hidden
+            title="Dra for å flytte"
+            fontSize="1.5rem"
+          />
+          {keyboardDragging && (
+            <span
+              className="aksel-data-table__drag-and-drop-item-keyboard-drag-icon"
+              data-direction="down"
+            >
+              <CaretDownCircleFillIcon aria-hidden fontSize="1.2rem" />
+            </span>
+          )}
+        </div>
+        <div>{children}</div>
+      </div>
+    </HStack>
+  );
+});
+
+export default DataDragAndDropItem;
+export { DataDragAndDropItem };
+export type { DataDragAndDropItemProps };

package/src/data/drag-and-drop/root/DataDragAndDrop.context.tsx

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+
+interface DataDragAndDropContextType {
+  inputMethod: "mouse" | "keyboard" | null;
+}
+
+export const DataDragAndDropContext = createContext<
+  DataDragAndDropContextType | undefined
+>(undefined);

package/src/data/drag-and-drop/root/DataDragAndDropRoot.tsx

@@ -0,0 +1,98 @@
+import { DragDropProvider, DragOverlay } from "@dnd-kit/react";
+import { isSortable } from "@dnd-kit/react/sortable";
+import React, { forwardRef, isValidElement } from "react";
+import { VStack } from "../../../primitives/stack";
+import DataDragAndDropItem, {
+  DataDragAndDropItemProps,
+} from "../item/DataDragAndDropItem";
+import { DataDragAndDropContext } from "./DataDragAndDrop.context";
+
+interface DataDragAndDropProps extends React.HTMLAttributes<HTMLTableElement> {
+  children: any[];
+  setItems: React.Dispatch<React.SetStateAction<any[]>>;
+}
+
+interface DataDragAndDropRootComponent extends React.ForwardRefExoticComponent<
+  DataDragAndDropProps & React.RefAttributes<HTMLTableElement>
+> {
+  /**
+   * @see 🏷️ {@link DataDragAndDropItemProps}
+   * * @example
+   * ```jsx
+   * <DragAndDrop>
+   *   <DragAndDrop.Item id="1" index={0}>
+   *     ...
+   *   </DragAndDrop.Item>
+   * </DragAndDrop>
+   * ```
+   */
+  Item: typeof DataDragAndDropItem;
+}
+
+const DataDragAndDrop = forwardRef<HTMLDivElement, DataDragAndDropProps>(
+  ({ setItems, children, ...rest }, forwardedRef) => {
+    const [inputMethod, setInputMethod] = React.useState<
+      "mouse" | "keyboard" | null
+    >(null);
+
+    const setItemOrder = (initalIndex: number, targetIndex: number) => {
+      setItems((items) => {
+        const newItems = [...items];
+        const [movedItem] = newItems.splice(initalIndex, 1);
+        newItems.splice(targetIndex, 0, movedItem);
+        return newItems;
+      });
+    };
+
+    return (
+      <DataDragAndDropContext.Provider value={{ inputMethod }}>
+        <DragDropProvider
+          // TODO Look into overriding default keybinds, might eliminate context need
+          onBeforeDragStart={(event) =>
+            setInputMethod(
+              event.operation.activatorEvent?.type === "pointerdown"
+                ? "mouse"
+                : "keyboard",
+            )
+          }
+          onDragOver={(event) => {
+            if (event.operation.activatorEvent?.type === "pointerdown") {
+              // Prevents items to rearrange while dragging with mouse, but allows keyboard dragging to work as intended
+              event.preventDefault();
+            }
+          }}
+          onDragEnd={(event) => {
+            if (event.operation.activatorEvent?.type === "pointerdown") {
+              const { source, target } = event.operation;
+              if (!isSortable(source) || !isSortable(target)) return;
+              setItemOrder(source.initialIndex, target.index);
+            }
+          }}
+        >
+          <VStack asChild gap="space-12">
+            <div {...rest} ref={forwardedRef}>
+              {children}
+            </div>
+          </VStack>
+          <DragOverlay>
+            {(source) => {
+              // Overlay not needed and causes glitching when using keyboard
+              if (inputMethod === "keyboard") return null;
+              if (!isSortable(source)) return null;
+              if (isValidElement(children[source.initialIndex])) {
+                return children[source.initialIndex];
+              }
+              return null;
+            }}
+          </DragOverlay>
+        </DragDropProvider>
+      </DataDragAndDropContext.Provider>
+    );
+  },
+) as DataDragAndDropRootComponent;
+
+DataDragAndDrop.Item = DataDragAndDropItem;
+
+export { DataDragAndDrop, DataDragAndDropItem };
+export default DataDragAndDrop;
+export type { DataDragAndDropItemProps, DataDragAndDropProps };

package/src/data/table/helpers/table-keyboard.ts

@@ -52,6 +52,7 @@ function getNavigationAction(event: KeyboardEvent): NavigationAction | null {
  * - Select arrow down/up for opening popup
  * - User is navigating inside multiline textarea
  * - contenteditable attrb is in use
+ * - element has attribute data-block-keyboard-nav="true"
  */
 function shouldBlockNavigation(event: KeyboardEvent): boolean {
   const key = event.key;
@@ -68,9 +69,9 @@ function shouldBlockNavigation(event: KeyboardEvent): boolean {
     return true;
   }
 
-  /* If not any of these elements, assueme "safe" to navigate */
+  /* If not any of these elements, assume "safe" to navigate */
   const editable = el.closest(
-    'input, textarea, select, [contenteditable="true"]',
+    'input, textarea, select, [contenteditable="true"], [data-block-keyboard-nav="true"]',
   );
 
   if (!editable) {
@@ -92,7 +93,10 @@ function shouldBlockNavigation(event: KeyboardEvent): boolean {
     return false;
   }
 
-  return editable.hasAttribute("contenteditable");
+  return (
+    editable.hasAttribute("contenteditable") ||
+    editable.hasAttribute("data-block-keyboard-nav")
+  );
 }
 
 function shouldBlockInputArrow(input: HTMLInputElement, key: string): boolean {

package/src/data/table/root/DataTableRoot.context.ts

@@ -0,0 +1,13 @@
+import { createStrictContext } from "../../../utils/helpers";
+
+interface DataTableContextProps {
+  layout: "fixed" | "auto";
+}
+
+const { Provider: DataTableContextProvider, useContext: useDataTableContext } =
+  createStrictContext<DataTableContextProps>({
+    name: "DataTableContext",
+    errorMessage: "useDataTableContext must be used within DataTable",
+  });
+
+export { DataTableContextProvider, useDataTableContext };

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

@@ -20,6 +20,7 @@ import {
   type DataTableTheadProps,
 } from "../thead/DataTableThead";
 import { DataTableTr, type DataTableTrProps } from "../tr/DataTableTr";
+import { DataTableContextProvider } from "./DataTableRoot.context";
 import { useTableKeyboardNav } from "./useTableKeyboardNav";
 
 interface DataTableProps extends React.HTMLAttributes<HTMLTableElement> {
@@ -193,20 +194,22 @@ const DataTable = forwardRef<HTMLTableElement, DataTableProps>(
     });
 
     return (
-      <div className="aksel-data-table__border-wrapper">
-        <div className="aksel-data-table__scroll-wrapper">
-          <table
-            {...rest}
-            ref={mergedRef}
-            className={cl("aksel-data-table", className)}
-            data-zebra-stripes={zebraStripes}
-            data-truncate-content={truncateContent}
-            data-density={rowDensity}
-            data-layout={layout}
-            tabIndex={tabIndex}
-          />
+      <DataTableContextProvider layout={layout}>
+        <div className="aksel-data-table__border-wrapper">
+          <div className="aksel-data-table__scroll-wrapper">
+            <table
+              {...rest}
+              ref={mergedRef}
+              className={cl("aksel-data-table", className)}
+              data-zebra-stripes={zebraStripes}
+              data-truncate-content={truncateContent}
+              data-density={rowDensity}
+              data-layout={layout}
+              tabIndex={tabIndex}
+            />
+          </div>
         </div>
-      </div>
+      </DataTableContextProvider>
     );
   },
 ) as DataTableRootComponent;

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

@@ -1,10 +1,14 @@
 import React, { forwardRef } from "react";
-import { FunnelIcon, SortDownIcon, SortUpIcon } from "@navikt/aksel-icons";
-import { ActionMenu } from "../../../action-menu";
-import { HStack, Spacer } from "../../../primitives/stack";
+import {
+  ArrowsUpDownIcon,
+  CaretLeftCircleFillIcon,
+  CaretRightCircleFillIcon,
+  SortDownIcon,
+  SortUpIcon,
+} from "@navikt/aksel-icons";
 import { cl } from "../../../utils/helpers";
-import { DataTableThActions } from "./DataTableThActions";
-import { DataTableThSortHandle } from "./DataTableThSortHandle";
+
+type SortDirection = "asc" | "desc" | "none";
 
 interface DataTableThProps extends React.HTMLAttributes<HTMLTableCellElement> {
   resizeHandler?: (
@@ -13,8 +17,22 @@ interface DataTableThProps extends React.HTMLAttributes<HTMLTableCellElement> {
       | 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;
+  /**
+   * Makes the column header sortable. The entire header cell content becomes
+   * a clickable button when true.
+   */
+  sortable?: boolean;
+  /**
+   * Current sort direction. Only relevant when `sortable` is true.
+   * Uses values matching the `aria-sort` attribute directly.
+   * @default "none"
+   */
+  sortDirection?: SortDirection;
+  /**
+   * Called when the user clicks the sortable header.
+   * The consumer is responsible for determining and setting the next sort state.
+   */
+  onSortClick?: (event: React.MouseEvent<HTMLElement>) => void;
   render?: {
     filterMenu?: {
       title: string;
@@ -26,8 +44,15 @@ interface DataTableThProps extends React.HTMLAttributes<HTMLTableCellElement> {
    */
   colSpan?: number;
   rowSpan?: number;
+  keyboardResizingHandler?: (size: number) => void;
 }
 
+const SORT_ICON: Record<SortDirection, React.ElementType | null> = {
+  asc: SortUpIcon,
+  desc: SortDownIcon,
+  none: ArrowsUpDownIcon,
+};
+
 /**
  * TODO:
  * - Plan for pinning: Move it into "settings" dialog like here: https://cloudscape.design/examples/react/table.html
@@ -39,79 +64,110 @@ const DataTableTh = forwardRef<HTMLTableCellElement, DataTableThProps>(
       children,
       resizeHandler,
       size,
-      sortDirection,
-      onSortChange,
+      sortable = false,
+      sortDirection = "none",
+      onSortClick,
       style,
-      render,
+      keyboardResizingHandler,
       ...rest
     },
     forwardedRef,
   ) => {
-    const { filterMenu } = render || {};
+    const [resizeHandlerActive, setResizeHandlerActive] = React.useState(false);
+    const [isOverflowing, setIsOverflowing] = React.useState(false);
+    const contentRef = React.useRef<HTMLDivElement>(null);
+
+    const keyDownHandler = (event: React.KeyboardEvent<HTMLButtonElement>) => {
+      if (keyboardResizingHandler) {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          setResizeHandlerActive((active) => !active);
+        } else if (
+          resizeHandlerActive &&
+          (event.key === "ArrowLeft" || event.key === "ArrowRight")
+        ) {
+          event.preventDefault();
+          keyboardResizingHandler(event.key === "ArrowRight" ? 10 : -10);
+        }
+      }
+    };
+
+    const SortIcon = sortable ? SORT_ICON[sortDirection] : null;
 
     return (
       <th
         {...rest}
         ref={forwardedRef}
         className={cl("aksel-data-table__th", className)}
+        data-sortable={sortable}
         style={{ width: size, ...style }}
+        aria-sort={sortable ? getAriaSort(sortDirection) : undefined}
+        onPointerEnter={() => {
+          const el = contentRef.current;
+          setIsOverflowing(el ? el.scrollWidth > el.offsetWidth : false);
+          console.info("is overflowing", isOverflowing);
+        }}
+        onPointerLeave={() => setIsOverflowing(false)}
       >
-        <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>
+        {sortable ? (
+          <button
+            className="aksel-data-table__th-sort-button"
+            onClick={sortable ? onSortClick : undefined}
+          >
+            {SortIcon && (
+              <SortIcon
+                aria-hidden
+                data-sort-direction={sortDirection}
+                className="aksel-data-table__th-sort-icon"
+              />
             )}
-          </DataTableThActions>
-        </HStack>
+            <div ref={contentRef} className="aksel-data-table__th-content">
+              {children}
+            </div>
+          </button>
+        ) : (
+          <div ref={contentRef} className="aksel-data-table__th-content">
+            {children}
+          </div>
+        )}
 
         {resizeHandler && (
           <button
             // TODO: Should probably not be a button since it doesn't have onClick
             onMouseDown={resizeHandler}
             onTouchStart={resizeHandler}
+            onBlur={() => setResizeHandlerActive(false)}
             className="aksel-data-table__th-resize-handle"
-          />
+            data-active={resizeHandlerActive}
+            // TODO Very open to a better name for this
+            data-block-keyboard-nav
+            onKeyDown={keyDownHandler}
+          >
+            {resizeHandlerActive && (
+              <>
+                <span className="aksel-data-table__th-resize-handle-indicator aksel-data-table__th-resize-handle-indicator--start">
+                  <CaretLeftCircleFillIcon aria-hidden fontSize="1.5rem" />
+                </span>
+                <span className="aksel-data-table__th-resize-handle-indicator aksel-data-table__th-resize-handle-indicator--end">
+                  <CaretRightCircleFillIcon aria-hidden fontSize="1.5rem" />
+                </span>
+              </>
+            )}
+          </button>
         )}
       </th>
     );
   },
 );
 
+function getAriaSort(
+  sortDirection: SortDirection | undefined,
+): "ascending" | "descending" | "none" | undefined {
+  if (sortDirection === "asc") return "ascending";
+  if (sortDirection === "desc") return "descending";
+  if (sortDirection === "none") return "none";
+  return undefined;
+}
+
 export { DataTableTh };
 export type { DataTableThProps };

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

@@ -1,12 +1,17 @@
 import React, { forwardRef } from "react";
 import { cl } from "../../../utils/helpers";
+import { useDataTableContext } from "../root/DataTableRoot.context";
 
 type DataTableTrProps = React.HTMLAttributes<HTMLTableRowElement> & {
   selected?: boolean;
 };
 
 const DataTableTr = forwardRef<HTMLTableRowElement, DataTableTrProps>(
-  ({ className, selected = false, ...rest }, forwardedRef) => {
+  ({ className, children, selected = false, ...rest }, forwardedRef) => {
+    const rootContext = useDataTableContext();
+
+    const renderFillerCell = rootContext.layout === "fixed" && children;
+
     return (
       <tr
         {...rest}
@@ -14,7 +19,13 @@ const DataTableTr = forwardRef<HTMLTableRowElement, DataTableTrProps>(
         className={cl("aksel-data-table__tr", className, {
           "aksel-data-table__tr--selected": selected,
         })}
-      />
+      >
+        {children}
+        {renderFillerCell && (
+          /* TODO: Consider chaning between th and td based on context */
+          <div className="aksel-data-table__th aksel-data-table__filler-cell" />
+        )}
+      </tr>
     );
   },
 );