@navikt/ds-react 8.7.0 → 8.9.0

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

@@ -0,0 +1,245 @@
+import React, { forwardRef, useEffect } from "react";
+import { Floating } from "../../../utils/components/floating/Floating";
+import DragAndDropItem, { DragAndDropItemProps } from "../item/DragAndDropItem";
+import { DragAndDropElement } from "../types";
+import { DragAndDropProvider } from "./DragAndDrop.context";
+
+interface DragAndDropProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: any[];
+  setItems: React.Dispatch<React.SetStateAction<any[]>>;
+}
+
+interface DataDragAndDropRootComponent extends React.ForwardRefExoticComponent<
+  DragAndDropProps & React.RefAttributes<HTMLDivElement>
+> {
+  /**
+   * @see 🏷️ {@link DragAndDropItemProps}
+   * * @example
+   * ```jsx
+   * <DragAndDrop>
+   *   <DragAndDrop.Item id="1" index={0}>
+   *     ...
+   *   </DragAndDrop.Item>
+   * </DragAndDrop>
+   * ```
+   */
+  Item: typeof DragAndDropItem;
+}
+
+/**
+ * TODO
+ * setItems on root
+ * state : active element
+ * pointer over listener / state, onPointerEnter, onPointerLeave
+ * Overlay - Use floating component
+ * Keyboard navigation
+ * Handle - button, arrows also button
+ * UU - announce on drag start, item moved, drag end
+ *
+ * []
+ */
+
+const DragAndDrop = forwardRef<HTMLDivElement, DragAndDropProps>(
+  ({ setItems, children }, forwardedRef) => {
+    const [activeItem, setActiveItem] =
+      React.useState<DragAndDropElement | null>(null);
+    const [dropTarget, setDropTarget] =
+      React.useState<DragAndDropElement | null>(null);
+    const [dragHandlerActive, setDragHandlerActive] =
+      React.useState<DragAndDropElement | null>(null);
+
+    const activeItemRef = React.useRef<DragAndDropElement | null>(null);
+    const dropTargetRef = React.useRef<DragAndDropElement | null>(null);
+
+    const [virtualRef, setVirtualRef] = React.useState({
+      getBoundingClientRect: () =>
+        DOMRect.fromRect({ width: 0, height: 0, x: 0, y: 0 }),
+    });
+
+    const setCombinedActiveItem = React.useCallback(
+      (item: DragAndDropElement | null) => {
+        activeItemRef.current = item;
+        setActiveItem(item);
+      },
+      [],
+    );
+
+    const setCombinedDropTarget = React.useCallback(
+      (item: DragAndDropElement | null) => {
+        dropTargetRef.current = item;
+        setDropTarget(item);
+      },
+      [],
+    );
+
+    useEffect(() => {
+      if (activeItem) {
+        document.documentElement.setAttribute("data-dragging", "true");
+        document.body.style.userSelect = "none";
+      } else {
+        document.documentElement.removeAttribute("data-dragging");
+        document.body.style.userSelect = "";
+      }
+
+      return () => {
+        document.documentElement.removeAttribute("data-dragging");
+        document.body.style.userSelect = "";
+      };
+    }, [activeItem]);
+
+    useEffect(() => {
+      if (!activeItem) return;
+
+      const handlePointerMove = (event: PointerEvent) => {
+        setVirtualRef({
+          getBoundingClientRect: () =>
+            DOMRect.fromRect({
+              width: 0,
+              height: 0,
+              x: event.clientX,
+              y: event.clientY,
+            }),
+        });
+
+        const active = activeItemRef.current;
+        if (!active) return;
+
+        const elements = document.elementsFromPoint(
+          event.clientX,
+          event.clientY,
+        );
+
+        const matchingElements = elements.filter(
+          (el) =>
+            el instanceof HTMLElement && Boolean(el.closest("[data-dnd-id]")),
+        ) as HTMLElement[];
+
+        const itemElements = matchingElements
+          .map((el) => el.closest("[data-dnd-id]") as HTMLElement)
+          .filter((el) => el instanceof HTMLElement);
+
+        const uniqueItemElements = Array.from(new Set(itemElements));
+
+        const targetElement =
+          uniqueItemElements.find((el) => el.dataset.dndId !== active.id) ??
+          uniqueItemElements.find((el) => el.dataset.dndId === active.id) ??
+          null;
+
+        if (!targetElement) {
+          setCombinedDropTarget(null);
+          return;
+        }
+
+        const hoveredId = targetElement.dataset.dndId;
+        const hoveredIndex = Number(targetElement.dataset.dndIndex);
+
+        if (!hoveredId || Number.isNaN(hoveredIndex)) {
+          setCombinedDropTarget(null);
+          return;
+        }
+
+        setCombinedDropTarget({ id: hoveredId, index: hoveredIndex });
+      };
+
+      const handlePointerUp = () => {
+        const active = activeItemRef.current;
+        const target = dropTargetRef.current;
+
+        if (active && target && active.id !== target.id) {
+          setItems((items) => {
+            const newItems = [...items];
+            const [movedItem] = newItems.splice(active.index, 1);
+            newItems.splice(target.index, 0, movedItem);
+            return newItems;
+          });
+        }
+        setCombinedActiveItem(null);
+        setCombinedDropTarget(null);
+      };
+
+      // TODO - Look into adding a cancel listener event
+      window.addEventListener("pointermove", handlePointerMove);
+      window.addEventListener("pointerup", handlePointerUp);
+
+      return () => {
+        window.removeEventListener("pointermove", handlePointerMove);
+        window.removeEventListener("pointerup", handlePointerUp);
+      };
+    }, [activeItem, setCombinedDropTarget, setCombinedActiveItem, setItems]);
+
+    const onKeyboardDragEnd = (diff: number) => {
+      if (!dragHandlerActive) return;
+
+      const targetIndex = dragHandlerActive.index + diff;
+      if (targetIndex < 0 || targetIndex >= children.length) {
+        return;
+      }
+
+      setItems((items) => {
+        const newItems = [...items];
+        const [movedItem] = newItems.splice(dragHandlerActive.index, 1);
+        newItems.splice(targetIndex, 0, movedItem);
+        return newItems;
+      });
+      setDragHandlerActive({ ...dragHandlerActive, index: targetIndex });
+    };
+
+    const onDragStart = (
+      event: React.PointerEvent | React.MouseEvent,
+      item: DragAndDropElement,
+    ) => {
+      setVirtualRef({
+        getBoundingClientRect: () =>
+          DOMRect.fromRect({
+            width: 0,
+            height: 0,
+            x: event.clientX,
+            y: event.clientY,
+          }),
+      });
+      setCombinedActiveItem(item);
+      setCombinedDropTarget(item);
+    };
+
+    // TODO - Make overlay same width as the OG item, currently jumps to content width
+
+    return (
+      <DragAndDropProvider
+        activeItem={activeItem}
+        setActiveItem={setCombinedActiveItem}
+        dropTarget={dropTarget}
+        setDropTarget={setCombinedDropTarget}
+        dragHandlerActive={dragHandlerActive}
+        setDragHandlerActive={setDragHandlerActive}
+        onKeyboardDragEnd={onKeyboardDragEnd}
+        onDragStart={onDragStart}
+      >
+        <div ref={forwardedRef}>{children}</div>
+        {activeItem && (
+          <Floating>
+            <Floating.Anchor virtualRef={virtualRef}>
+              <span />
+            </Floating.Anchor>
+            <Floating.Content
+              align="start"
+              updatePositionStrategy="always"
+              style={{ pointerEvents: "none" }}
+            >
+              {React.cloneElement(children[activeItem.index], {
+                "data-dnd-id": undefined,
+                "data-dnd-index": undefined,
+                "data-overlay": true,
+              })}
+            </Floating.Content>
+          </Floating>
+        )}
+      </DragAndDropProvider>
+    );
+  },
+) as DataDragAndDropRootComponent;
+
+DragAndDrop.Item = DragAndDropItem;
+
+export { DragAndDrop, DragAndDropItem };
+export default DragAndDrop;
+export type { DragAndDropItemProps, DragAndDropProps };

package/src/data/drag-and-drop/types.ts

@@ -0,0 +1,4 @@
+export interface DragAndDropElement {
+  id: string;
+  index: number;
+}

package/src/data/drag-and-drop-old/drag-handler/DataDragAndDropDragHandler.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+import {
+  CaretDownCircleFillIcon,
+  CaretUpCircleFillIcon,
+  DragVerticalIcon,
+} from "@navikt/aksel-icons";
+import { Floating } from "../../../utils/components/floating/Floating";
+
+export interface DataDragAndDropDragHandlerProps {
+  /**
+   * Whether the drag handler is disabled
+   */
+  // disabled?: boolean;
+  /**
+   * Wether dragging is done by keyboard. Used to conditionally render drag indicators.
+   */
+  keyboardDragging?: boolean;
+  /**
+   * Handle ref is forwarded to the button element serving as drag handle.
+   */
+  handleRef: React.Ref<HTMLDivElement>;
+  // Just for testing purposes, to render an alternative drag handler
+  alt?: boolean;
+}
+
+/**
+ * DataDragAndDropDragHandler
+ *
+ * A button component that serves as a drag handle for drag and drop operations.
+ * Can be used to initiate dragging of elements in a data table or list.
+ */
+export const DataDragAndDropDragHandler = React.forwardRef<
+  HTMLButtonElement,
+  DataDragAndDropDragHandlerProps
+>(({ keyboardDragging, handleRef, alt }) => {
+  if (alt) {
+    return (
+      <div className="aksel-data-drag-and-drop__drag-handler__alt">
+        {keyboardDragging && (
+          <span
+            className="aksel-data-drag-and-drop__drag-handler__arrow"
+            data-direction="up"
+          >
+            <CaretUpCircleFillIcon aria-hidden fontSize="1.2rem" />
+          </span>
+        )}
+        <div
+          ref={handleRef}
+          className="aksel-data-drag-and-drop__drag-handler__button"
+        >
+          <DragVerticalIcon
+            aria-hidden
+            title="Dra for å flytte"
+            fontSize="1.5rem"
+          />
+        </div>
+        {keyboardDragging && (
+          <span
+            className="aksel-data-drag-and-drop__drag-handler__arrow"
+            data-direction="down"
+          >
+            <CaretDownCircleFillIcon aria-hidden fontSize="1.2rem" />
+          </span>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <Floating>
+      {keyboardDragging && (
+        <Floating.Content
+          side="top"
+          avoidCollisions={false}
+          updatePositionStrategy="always"
+          className="aksel-data-drag-and-drop__drag-handler__arrow"
+        >
+          <CaretUpCircleFillIcon aria-hidden fontSize="1.2rem" />
+        </Floating.Content>
+      )}
+      <Floating.Anchor asChild>
+        <div
+          ref={handleRef}
+          className="aksel-data-drag-and-drop__drag-handler__button"
+        >
+          <DragVerticalIcon
+            aria-hidden
+            title="Dra for å flytte"
+            fontSize="1.5rem"
+          />
+        </div>
+      </Floating.Anchor>
+      {keyboardDragging && (
+        <Floating.Content
+          avoidCollisions={false}
+          updatePositionStrategy="always"
+          className="aksel-data-drag-and-drop__drag-handler__arrow"
+        >
+          <CaretDownCircleFillIcon aria-hidden fontSize="1.2rem" />
+        </Floating.Content>
+      )}
+    </Floating>
+  );
+});

package/src/data/{drag-and-drop → drag-and-drop-old}/item/DataDragAndDropItem.tsx

@@ -1,13 +1,9 @@
 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 { DataDragAndDropDragHandler } from "../drag-handler/DataDragAndDropDragHandler";
 import { DataDragAndDropContext } from "../root/DataDragAndDrop.context";
 
 interface DataDragAndDropItemProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -62,34 +58,11 @@ const DataDragAndDropItem = React.forwardRef<
         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>
+        <DataDragAndDropDragHandler
+          handleRef={handleRef}
+          keyboardDragging={keyboardDragging}
+          alt
+        />
         <div>{children}</div>
       </div>
     </HStack>

package/src/data/{drag-and-drop → drag-and-drop-old}/root/DataDragAndDrop.context.tsx

@@ -2,6 +2,8 @@ import { createContext } from "react";
 
 interface DataDragAndDropContextType {
   inputMethod: "mouse" | "keyboard" | null;
+  // setInputMethod: (method: "mouse" | "keyboard" | null) => void;
+  // setItems: React.Dispatch<React.SetStateAction<any[]>>;
 }
 
 export const DataDragAndDropContext = createContext<

package/src/data/{drag-and-drop → drag-and-drop-old}/root/DataDragAndDropRoot.tsx

@@ -7,13 +7,13 @@ import DataDragAndDropItem, {
 } from "../item/DataDragAndDropItem";
 import { DataDragAndDropContext } from "./DataDragAndDrop.context";
 
-interface DataDragAndDropProps extends React.HTMLAttributes<HTMLTableElement> {
+interface DataDragAndDropProps extends React.HTMLAttributes<HTMLDivElement> {
   children: any[];
   setItems: React.Dispatch<React.SetStateAction<any[]>>;
 }
 
 interface DataDragAndDropRootComponent extends React.ForwardRefExoticComponent<
-  DataDragAndDropProps & React.RefAttributes<HTMLTableElement>
+  DataDragAndDropProps & React.RefAttributes<HTMLDivElement>
 > {
   /**
    * @see 🏷️ {@link DataDragAndDropItemProps}
@@ -62,11 +62,9 @@ const DataDragAndDrop = forwardRef<HTMLDivElement, DataDragAndDropProps>(
             }
           }}
           onDragEnd={(event) => {
-            if (event.operation.activatorEvent?.type === "pointerdown") {
-              const { source, target } = event.operation;
-              if (!isSortable(source) || !isSortable(target)) return;
-              setItemOrder(source.initialIndex, target.index);
-            }
+            const { source, target } = event.operation;
+            if (!isSortable(source) || !isSortable(target)) return;
+            setItemOrder(source.initialIndex, target.index);
           }}
         >
           <VStack asChild gap="space-12">
@@ -74,7 +72,7 @@ const DataDragAndDrop = forwardRef<HTMLDivElement, DataDragAndDropProps>(
               {children}
             </div>
           </VStack>
-          <DragOverlay>
+          <DragOverlay dropAnimation={null}>
             {(source) => {
               // Overlay not needed and causes glitching when using keyboard
               if (inputMethod === "keyboard") return null;

package/src/data/table/empty-state/DataTableEmptyState.tsx

@@ -0,0 +1,26 @@
+import React, { forwardRef } from "react";
+import { cl } from "../../../utils/helpers";
+
+type DataTableEmptyStateProps = React.HTMLAttributes<HTMLDivElement>;
+
+const DataTableEmptyState = forwardRef<
+  HTMLDivElement,
+  DataTableEmptyStateProps
+>(({ className, children, ...rest }, forwardedRef) => {
+  return (
+    <tr>
+      <td colSpan={999}>
+        <div
+          {...rest}
+          ref={forwardedRef}
+          className={cl("aksel-data-table__empty-state", className)}
+        >
+          {children}
+        </div>
+      </td>
+    </tr>
+  );
+});
+
+export { DataTableEmptyState };
+export type { DataTableEmptyStateProps };

package/src/data/table/helpers/selection/getMultipleSelectProps.ts

@@ -0,0 +1,70 @@
+import type { CheckboxProps } from "../../../../form/checkbox/types";
+import type { SelectionT } from "./selection.types";
+
+type GetMultipleSelectPropsArgs = {
+  selectedKeys: SelectionT;
+  setSelectedKeys: (keys: SelectionT) => void;
+  disabledKeys: (string | number)[];
+  allKeys: (string | number)[];
+  totalCount: number;
+};
+
+function getMultipleSelectProps({
+  selectedKeys,
+  setSelectedKeys,
+  disabledKeys,
+  allKeys,
+  totalCount,
+}: GetMultipleSelectPropsArgs) {
+  const handleToggleAll = () => {
+    const allSelected =
+      selectedKeys === "all" ||
+      (Array.isArray(selectedKeys) && selectedKeys.length === totalCount);
+
+    setSelectedKeys(allSelected ? [] : allKeys);
+  };
+
+  const handleToggleRow = (key: string | number) => {
+    if (selectedKeys === "all") {
+      setSelectedKeys(allKeys.filter((id) => id !== key));
+    } else if (selectedKeys.includes(key)) {
+      setSelectedKeys(selectedKeys.filter((k) => k !== key));
+    } else {
+      setSelectedKeys([...selectedKeys, key]);
+    }
+  };
+
+  const isChecked = (key: string | number) =>
+    selectedKeys === "all" ||
+    (Array.isArray(selectedKeys) && selectedKeys.includes(key));
+
+  return {
+    getTheadCheckboxProps: (): CheckboxProps => {
+      const indeterminate =
+        Array.isArray(selectedKeys) &&
+        selectedKeys.length > 0 &&
+        selectedKeys.length < totalCount;
+
+      return {
+        children: "Select all rows",
+        onChange: handleToggleAll,
+        checked:
+          (selectedKeys === "all" ||
+            (Array.isArray(selectedKeys) && selectedKeys.length > 0)) &&
+          !indeterminate,
+        indeterminate,
+        disabled: disabledKeys.length === totalCount,
+        hideLabel: true,
+      };
+    },
+    getRowCheckboxProps: (key: string | number): CheckboxProps => ({
+      children: `Select row with id ${key}`,
+      onChange: () => handleToggleRow(key),
+      checked: isChecked(key),
+      disabled: disabledKeys.includes(key),
+      hideLabel: true,
+    }),
+  };
+}
+
+export { getMultipleSelectProps };

package/src/data/table/helpers/selection/getSingleSelectProps.ts

@@ -0,0 +1,33 @@
+import type { RadioProps } from "../../../../form/radio/types";
+
+type GetSingleSelectPropsArgs = {
+  selectedKeys: (string | number)[];
+  setSelectedKeys: (keys: (string | number)[]) => void;
+  disabledKeys: (string | number)[];
+};
+
+function getSingleSelectProps({
+  selectedKeys,
+  setSelectedKeys,
+  disabledKeys,
+}: GetSingleSelectPropsArgs) {
+  const handleSelectionChange = (key: string | number) => {
+    if (selectedKeys.includes(key)) {
+      setSelectedKeys([]);
+    } else {
+      setSelectedKeys([key]);
+    }
+  };
+
+  return {
+    getRowRadioProps: (key: string | number): RadioProps => ({
+      children: `Select row with id ${key}`,
+      checked: selectedKeys.includes(key),
+      onChange: () => handleSelectionChange(key),
+      disabled: disabledKeys.includes(key),
+      value: key,
+    }),
+  };
+}
+
+export { getSingleSelectProps };

package/src/data/table/helpers/selection/selection.types.ts

@@ -0,0 +1,56 @@
+import type { CheckboxProps } from "../../../../form/checkbox/types";
+import type { RadioProps } from "../../../../form/radio/types";
+
+type SelectionT = (string | number)[] | "all";
+
+type SelectionProps = {
+  /**
+   * Enables selection of rows.
+   *
+   * When set to "single", only one row can be selected at a time (renders radio buttons).
+   *
+   * When set to "multiple", multiple rows can be selected (renders checkboxes).
+   *
+   * @default "none"
+   */
+  selectionMode?: "none" | "single" | "multiple";
+  selectedKeys?: SelectionT;
+  defaultSelectedKeys?: SelectionT;
+  onSelectionChange?: (keys: SelectionT) => void;
+  disabledKeys?: (string | number)[];
+};
+
+type NoneSelection = {
+  selectionMode: "none";
+  allKeys: (string | number)[];
+  selectedKeys: (string | number)[];
+  disabledKeys: (string | number)[];
+};
+
+type SingleSelection = {
+  selectionMode: "single";
+  allKeys: (string | number)[];
+  selectedKeys: (string | number)[];
+  disabledKeys: (string | number)[];
+  getRowRadioProps: (key: string | number) => RadioProps;
+};
+
+type MultipleSelection = {
+  selectionMode: "multiple";
+  allKeys: (string | number)[];
+  selectedKeys: SelectionT;
+  disabledKeys: (string | number)[];
+  getTheadCheckboxProps: () => CheckboxProps;
+  getRowCheckboxProps: (key: string | number) => CheckboxProps;
+};
+
+type TableSelection = NoneSelection | SingleSelection | MultipleSelection;
+
+export type {
+  MultipleSelection,
+  NoneSelection,
+  SelectionProps,
+  SelectionT,
+  SingleSelection,
+  TableSelection,
+};

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

@@ -34,7 +34,11 @@ function restoreTabIndex(cell: Element): void {
  */
 function findFocusableElementInCell(cell: Element): HTMLElement | null {
   const el = cell as HTMLElement | null;
-  if (!el || isHiddenElement(el)) {
+  if (
+    !el ||
+    isHiddenElement(el) ||
+    el.hasAttribute("data-block-keyboard-nav")
+  ) {
     return null;
   }
 
@@ -48,6 +52,11 @@ function findFocusableElementInCell(cell: Element): HTMLElement | null {
 
   for (let i = 0; i < focusables.length; i += 1) {
     const focusable = focusables[i] as HTMLElement;
+    /* Ignore element if it has [data-block-keyboard-nav="true"] */
+    if (focusable.hasAttribute("data-block-keyboard-nav")) {
+      continue;
+    }
+
     if (!isHiddenElement(focusable) && !isDisabledElement(focusable)) {
       return focusable;
     }