@navikt/ds-react 8.9.1 → 8.10.0

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

@@ -1,29 +1,24 @@
-import React, { forwardRef, useEffect } from "react";
+/** biome-ignore-all lint/correctness/useHookAtTopLevel: False positive because of the way forwardRef() is added */
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { Floating } from "../../../utils/components/floating/Floating";
+import {
+  ColumnDefinition,
+  ColumnDefinitions,
+} from "../../table/root/DataTable.types";
 import DragAndDropItem, { DragAndDropItemProps } from "../item/DragAndDropItem";
 import { DragAndDropElement } from "../types";
 import { DragAndDropProvider } from "./DragAndDrop.context";
 
-interface DragAndDropProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactElement<DragAndDropItemProps>[];
-  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;
+interface DragAndDropProps<T> extends React.HTMLAttributes<HTMLUListElement> {
+  items: ColumnDefinitions<T>;
+  setItems: React.Dispatch<React.SetStateAction<ColumnDefinitions<T>>>;
+  renderItem: (item: ColumnDefinition<T>, index: number) => React.ReactNode;
 }
 
 /**
@@ -35,259 +30,309 @@ interface DataDragAndDropRootComponent extends React.ForwardRefExoticComponent<
  * [x] Keyboard navigation
  * [ ] UU - announce on drag start, item moved, drag end
  * [x] Make overlay same width as the OG item, currently jumps to content width
- * [ ] Look into adding a cancel listener event
- * [ ] Make onClick work on drag handler button, currently blocked by pointer down/up listeners
- * [ ] Talk to design about what should happen on ESC key press, currently just cancels dragging, should it also reset position?
- * [ ] Make arrow icons into buttons that react to keyboard events, currently just decorative
+ * [x] Look into adding a cancel listener event
+ * [x] Make onClick work on drag handler button, currently blocked by pointer down/up listeners
+ * [x] Talk to design about what should happen on ESC key press, currently just cancels dragging, should it also reset position?
+ * [x] Make arrow icons into buttons that react to keyboard events, currently just decorative
+ * [x] Keep handler focus after clicking arrows for dragging
+ * [x] Look into data-based API vs component-based API
+ * [ ] Should we have hidden instructions for screen readers on how to use the drag and drop, and should we announce the position of the item while dragging?
+ * [x] Discuss if this component should be generic for drag and drop, or if it should be specifically for tables - just for table for now
+ * [x] Discuss items type
+ * [ ] Discuss how to implement label best
+ * [ ] Quick nav (< > samtidig) - få piltastene til å fungere
+ * [x] Implement new type for items - ColumnDefinitions<T>
+ * [ ] Remove announcer div and use a live region component instead
+ * [ ] Make ESC reset position, not just cancel dragging
+ * [ ] Make instructions for keyboard users (visible?)
+ * [ ] Ask design about visible keyboard instructions
+ *
  */
 
-const DragAndDrop = forwardRef<HTMLDivElement, DragAndDropProps>(
-  ({ setItems, children }, forwardedRef) => {
-    const DRAG_THRESHOLD = 4; // Minimum movement in pixels to start dragging
-
-    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 [overlayWidth, setOverlayWidth] = React.useState<number | null>(null);
-
-    const activeItemRef = React.useRef<DragAndDropElement | null>(null);
-    const dropTargetRef = React.useRef<DragAndDropElement | null>(null);
-    const activeChild = children.find(
-      (child) => child.props.id === activeItem?.id,
-    );
-
-    const [virtualRef, setVirtualRef] = React.useState({
-      getBoundingClientRect: () =>
-        DOMRect.fromRect({ width: 0, height: 0, x: 0, y: 0 }),
-    });
-
-    const pendingDragStartRef = React.useRef<{
-      item: DragAndDropElement;
-      element: HTMLElement | null;
-      pointerId: number;
-      startX: number;
-      startY: number;
-    } | null>(null);
-
-    const startPendingDragStart = (
-      event: React.PointerEvent,
-      item: DragAndDropElement,
-      element?: HTMLElement | null,
-    ) => {
-      pendingDragStartRef.current = {
-        item,
-        element: element || null,
-        pointerId: event.pointerId,
-        startX: event.clientX,
-        startY: event.clientY,
-      };
-    };
-
-    const cancelDragStart = () => {
-      pendingDragStartRef.current = null;
+const DRAG_THRESHOLD = 4; // Minimum movement in pixels to start dragging
+
+function DragAndDropInner<T>(
+  { items, setItems, renderItem }: DragAndDropProps<T>,
+  forwardedRef: React.ForwardedRef<HTMLUListElement>,
+) {
+  const [activeItem, setActiveItem] = useState<DragAndDropElement | null>(null);
+  const [dropTarget, setDropTarget] = useState<DragAndDropElement | null>(null);
+  const [dragHandlerActive, setDragHandlerActive] =
+    useState<DragAndDropElement | null>(null);
+  const [overlayWidth, setOverlayWidth] = useState<number | null>(null);
+  const [announcement, setAnnouncement] = useState("");
+  const activeData = items.find((item) => item.id === activeItem?.id);
+
+  const activeItemRef = useRef<DragAndDropElement | null>(null);
+  const dropTargetRef = useRef<DragAndDropElement | null>(null);
+
+  const [virtualRef, setVirtualRef] = useState({
+    getBoundingClientRect: () =>
+      DOMRect.fromRect({ width: 0, height: 0, x: 0, y: 0 }),
+  });
+
+  const pendingDragStartRef = useRef<{
+    item: DragAndDropElement;
+    element: HTMLElement | null;
+    pointerId: number;
+    startX: number;
+    startY: number;
+  } | null>(null);
+
+  const startPendingDrag = (
+    event: React.PointerEvent,
+    item: DragAndDropElement,
+    element?: HTMLElement | null,
+  ) => {
+    pendingDragStartRef.current = {
+      item,
+      element: element || null,
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startY: event.clientY,
     };
+  };
+
+  const setCombinedActiveItem = useCallback(
+    (item: DragAndDropElement | null) => {
+      activeItemRef.current = item;
+      setActiveItem(item);
+    },
+    [],
+  );
+
+  const setCombinedDropTarget = useCallback(
+    (item: DragAndDropElement | null) => {
+      dropTargetRef.current = item;
+      setDropTarget(item);
+    },
+    [],
+  );
+
+  const reorderItems = useCallback(
+    (fromIndex: number, toIndex: number) => {
+      setItems((currentItems) => {
+        const newItems = [...currentItems];
+        const [movedItem] = newItems.splice(fromIndex, 1);
+        newItems.splice(toIndex, 0, movedItem);
+        return newItems;
+      });
+    },
+    [setItems],
+  );
 
-    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(() => {
-      /* This useEffect is used to toggle a class on the html element when dragging, 
+  useEffect(() => {
+    /* This useEffect is used to toggle a class on the html element when dragging, 
       to prevent cursor issues when dragging over interactive elements, 
       and to prevent text selection during dragging. */
 
-      if (activeItem) {
-        document.documentElement.setAttribute("data-dragging-cursor", "true");
-        document.body.style.userSelect = "none";
-      } else {
-        document.documentElement.removeAttribute("data-dragging-cursor");
-        document.body.style.userSelect = "";
-      }
+    if (activeItem) {
+      document.documentElement.setAttribute("data-dragging-cursor", "true");
+      document.body.style.userSelect = "none";
+    } else {
+      document.documentElement.removeAttribute("data-dragging-cursor");
+      document.body.style.userSelect = "";
+    }
+
+    return () => {
+      document.documentElement.removeAttribute("data-dragging-cursor");
+      document.body.style.userSelect = "";
+    };
+  }, [activeItem]);
+
+  useEffect(() => {
+    const handlePointerMove = (event: PointerEvent) => {
+      const pendingStart = pendingDragStartRef.current;
+      const activeRef = activeItemRef.current;
+      const element = pendingStart?.element;
+
+      if (!activeRef && pendingStart) {
+        const deltaX = Math.abs(event.clientX - pendingStart.startX);
+        const deltaY = Math.abs(event.clientY - pendingStart.startY);
 
-      return () => {
-        document.documentElement.removeAttribute("data-dragging-cursor");
-        document.body.style.userSelect = "";
-      };
-    }, [activeItem]);
-
-    useEffect(() => {
-      const handlePointerMove = (event: PointerEvent) => {
-        const pendingStart = pendingDragStartRef.current;
-        const activeRef = activeItemRef.current;
-        const element = pendingStart?.element;
-
-        if (!activeRef && pendingStart) {
-          const deltaX = Math.abs(event.clientX - pendingStart.startX);
-          const deltaY = Math.abs(event.clientY - pendingStart.startY);
-
-          if (deltaX > DRAG_THRESHOLD || deltaY > DRAG_THRESHOLD) {
-            if (element) {
-              element.setPointerCapture(pendingStart.pointerId);
-            }
-
-            setOverlayWidth(element?.getBoundingClientRect().width ?? null);
-            setCombinedActiveItem(pendingStart.item);
-            setCombinedDropTarget(pendingStart.item);
-            pendingDragStartRef.current = null;
+        if (deltaX > DRAG_THRESHOLD || deltaY > DRAG_THRESHOLD) {
+          if (element) {
+            element.setPointerCapture(pendingStart.pointerId);
           }
-          return;
-        }
 
-        const active = activeItemRef.current;
-        if (!active) return;
-
-        setVirtualRef({
-          getBoundingClientRect: () =>
-            DOMRect.fromRect({
-              width: 0,
-              height: 0,
-              x: event.clientX,
-              y: event.clientY,
-            }),
-        });
-
-        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;
+          setOverlayWidth(element?.getBoundingClientRect().width ?? null);
+          setCombinedActiveItem(pendingStart.item);
+          setCombinedDropTarget(pendingStart.item);
+          pendingDragStartRef.current = null;
         }
+        return;
+      }
 
-        const hoveredId = targetElement.dataset.dndId;
-        const hoveredIndex = Number(targetElement.dataset.dndIndex);
+      const active = activeItemRef.current;
+      if (!active) return;
+
+      setVirtualRef({
+        getBoundingClientRect: () =>
+          DOMRect.fromRect({
+            width: 0,
+            height: 0,
+            x: event.clientX,
+            y: event.clientY,
+          }),
+      });
 
-        if (!hoveredId || Number.isNaN(hoveredIndex)) {
-          setCombinedDropTarget(null);
-          return;
-        }
+      const elements = document.elementsFromPoint(event.clientX, event.clientY);
 
-        setCombinedDropTarget({ id: hoveredId, index: hoveredIndex });
-      };
+      const matchingElements = elements.filter(
+        (el) =>
+          el instanceof HTMLElement && Boolean(el.closest("[data-dnd-id]")),
+      ) as HTMLElement[];
 
-      const handlePointerUp = () => {
-        if (!activeItemRef.current) {
-          pendingDragStartRef.current = null;
-          return;
-        }
+      const itemElements = matchingElements
+        .map((el) => el.closest("[data-dnd-id]") as HTMLElement)
+        .filter((el) => el instanceof HTMLElement);
 
-        const active = activeItemRef.current;
-        const target = dropTargetRef.current;
+      const uniqueItemElements = Array.from(new Set(itemElements));
 
-        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;
-          });
-        }
-        setOverlayWidth(null);
-        setDragHandlerActive(null);
-        setCombinedActiveItem(null);
+      const targetElement =
+        uniqueItemElements.find((el) => el.dataset.dndId !== active.id) ??
+        uniqueItemElements.find((el) => el.dataset.dndId === active.id) ??
+        null;
+
+      if (!targetElement) {
         setCombinedDropTarget(null);
-        pendingDragStartRef.current = null;
-      };
+        return;
+      }
 
-      // TODO - Look into adding a cancel listener event
-      window.addEventListener("pointermove", handlePointerMove);
-      window.addEventListener("pointerup", handlePointerUp);
+      const hoveredId = targetElement.dataset.dndId;
+      const hoveredIndex = Number(targetElement.dataset.dndIndex);
 
-      return () => {
-        window.removeEventListener("pointermove", handlePointerMove);
-        window.removeEventListener("pointerup", handlePointerUp);
-      };
-    }, [setCombinedDropTarget, setCombinedActiveItem, setItems]);
+      if (!hoveredId || Number.isNaN(hoveredIndex)) {
+        setCombinedDropTarget(null);
+        return;
+      }
 
-    const onKeyboardDragEnd = (diff: number) => {
-      if (!dragHandlerActive) return;
+      setCombinedDropTarget({ id: hoveredId, index: hoveredIndex });
+    };
 
-      const targetIndex = dragHandlerActive.index + diff;
-      if (targetIndex < 0 || targetIndex >= children.length) {
+    const handlePointerUp = () => {
+      if (!activeItemRef.current) {
+        pendingDragStartRef.current = null;
         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 active = activeItemRef.current;
+      const target = dropTargetRef.current;
+
+      if (active && target && active.id !== target.id) {
+        reorderItems(active.index, target.index);
+        setAnnouncement(
+          `Element flyttet til posisjon ${target?.index + 1} av ${items.length}`,
+        ); // TODO - Bedre formulering?
+      }
+
+      setOverlayWidth(null);
+      setDragHandlerActive(null);
+      setCombinedActiveItem(null);
+      setCombinedDropTarget(null);
+      pendingDragStartRef.current = null;
+    };
+
+    const handlePointerCancel = () => {
+      setOverlayWidth(null);
+      setDragHandlerActive(null);
+      setCombinedActiveItem(null);
+      setCombinedDropTarget(null);
+      pendingDragStartRef.current = null;
     };
 
-    return (
-      <DragAndDropProvider
-        activeItem={activeItem}
-        setActiveItem={setCombinedActiveItem}
-        dropTarget={dropTarget}
-        setDropTarget={setCombinedDropTarget}
-        dragHandlerActive={dragHandlerActive}
-        setDragHandlerActive={setDragHandlerActive}
-        onKeyboardDragEnd={onKeyboardDragEnd}
-        startPendingDragStart={startPendingDragStart}
-        cancelDragStart={cancelDragStart}
-      >
-        <div ref={forwardedRef}>{children}</div>
-        {activeItem && activeChild && (
-          <Floating>
-            <Floating.Anchor virtualRef={virtualRef}>
-              <span />
-            </Floating.Anchor>
-            <Floating.Content
-              align="start"
-              updatePositionStrategy="always"
-              style={{
-                pointerEvents: "none",
-                boxSizing: "border-box",
-                width: overlayWidth ? `${overlayWidth}px` : "fit-content",
-              }}
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", handlePointerUp);
+    window.addEventListener("pointercancel", handlePointerCancel);
+
+    return () => {
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", handlePointerUp);
+      window.removeEventListener("pointercancel", handlePointerCancel);
+    };
+  }, [
+    setCombinedDropTarget,
+    setCombinedActiveItem,
+    reorderItems,
+    items.length,
+  ]);
+
+  const onKeyboardDragEnd = (diff: number) => {
+    if (!dragHandlerActive) return;
+
+    const targetIndex = dragHandlerActive.index + diff;
+    if (targetIndex < 0 || targetIndex >= items.length) {
+      return;
+    }
+
+    reorderItems(dragHandlerActive.index, targetIndex);
+    setDragHandlerActive({ ...dragHandlerActive, index: targetIndex });
+    setAnnouncement(
+      `Element flyttet til posisjon ${targetIndex + 1} av ${items.length}`,
+    ); // TODO - Bedre formulering?
+  };
+
+  return (
+    <DragAndDropProvider
+      activeItem={activeItem}
+      setActiveItem={setCombinedActiveItem}
+      dropTarget={dropTarget}
+      setDropTarget={setCombinedDropTarget}
+      dragHandlerActive={dragHandlerActive}
+      setDragHandlerActive={setDragHandlerActive}
+      onKeyboardDragEnd={onKeyboardDragEnd}
+      startPendingDrag={startPendingDrag}
+      itemAmount={items.length}
+    >
+      <ul ref={forwardedRef} aria-label="Dra og slipp elementer">
+        {items.map((item, index) => {
+          return (
+            <DragAndDropItem
+              key={item.id}
+              id={item.id}
+              index={index}
+              itemLabel={item.label}
+            >
+              {renderItem(item, index)}
+            </DragAndDropItem>
+          );
+        })}
+      </ul>
+      {activeItem && activeData && (
+        <Floating>
+          <Floating.Anchor virtualRef={virtualRef}>
+            <span />
+          </Floating.Anchor>
+          <Floating.Content
+            align="start"
+            updatePositionStrategy="always"
+            style={{
+              pointerEvents: "none",
+              boxSizing: "border-box",
+              width: overlayWidth ? `${overlayWidth}px` : "fit-content",
+            }}
+          >
+            <DragAndDropItem
+              id={activeItem.id}
+              index={activeItem.index}
+              isOverlay
+              itemLabel={activeData.label}
             >
-              {React.cloneElement(activeChild, {
-                isOverlay: true,
-              })}
-            </Floating.Content>
-          </Floating>
-        )}
-      </DragAndDropProvider>
-    );
-  },
-) as DataDragAndDropRootComponent;
-
-DragAndDrop.Item = DragAndDropItem;
+              {renderItem(activeData, activeItem.index)}
+            </DragAndDropItem>
+          </Floating.Content>
+        </Floating>
+      )}
+      <div aria-live="assertive" className="sr-only" aria-atomic="true">
+        {announcement}
+      </div>
+    </DragAndDropProvider>
+  );
+}
+
+const DragAndDrop = forwardRef(DragAndDropInner) as <T>(
+  props: DragAndDropProps<T> & React.RefAttributes<HTMLUListElement>,
+) => React.ReactElement | null;
 
 export { DragAndDrop, DragAndDropItem };
 export default DragAndDrop;

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

@@ -2,3 +2,8 @@ export interface DragAndDropElement {
   id: string;
   index: number;
 }
+
+export interface DragAndDropItemData {
+  id: string;
+  label: string;
+}