@navikt/ds-react 8.9.0 → 8.10.0

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

@@ -1,244 +1,338 @@
-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: 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;
+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;
 }
 
 /**
  * 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
+ * [x] setItems on root
+ * [x] state : active element
+ * [x] pointer over listener / state, onPointerEnter, onPointerLeave
+ * [x] Overlay - Use floating component
+ * [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
+ * [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 [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 = "";
+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],
+  );
+
+  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 = "";
+    }
+
+    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;
+        }
+        return;
       }
 
-      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 active = activeItemRef.current;
+      if (!active) return;
+
+      setVirtualRef({
+        getBoundingClientRect: () =>
+          DOMRect.fromRect({
+            width: 0,
+            height: 0,
+            x: event.clientX,
+            y: event.clientY,
+          }),
+      });
 
-        const hoveredId = targetElement.dataset.dndId;
-        const hoveredIndex = Number(targetElement.dataset.dndIndex);
+      const elements = document.elementsFromPoint(event.clientX, event.clientY);
 
-        if (!hoveredId || Number.isNaN(hoveredIndex)) {
-          setCombinedDropTarget(null);
-          return;
-        }
+      const matchingElements = elements.filter(
+        (el) =>
+          el instanceof HTMLElement && Boolean(el.closest("[data-dnd-id]")),
+      ) as HTMLElement[];
 
-        setCombinedDropTarget({ id: hoveredId, index: hoveredIndex });
-      };
+      const itemElements = matchingElements
+        .map((el) => el.closest("[data-dnd-id]") as HTMLElement)
+        .filter((el) => el instanceof HTMLElement);
 
-      const handlePointerUp = () => {
-        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;
-          });
-        }
-        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);
-      };
+        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);
-      };
-    }, [activeItem, 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 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);
+    const handlePointerCancel = () => {
+      setOverlayWidth(null);
+      setDragHandlerActive(null);
+      setCombinedActiveItem(null);
+      setCombinedDropTarget(null);
+      pendingDragStartRef.current = null;
     };
 
-    // 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" }}
+    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(children[activeItem.index], {
-                "data-dnd-id": undefined,
-                "data-dnd-index": undefined,
-                "data-overlay": 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;
+}

package/src/data/table/base-cell/DataTableBaseCell.tsx

@@ -0,0 +1,92 @@
+import React, { forwardRef } from "react";
+import { cl } from "../../../utils/helpers";
+import { useDataTableContext } from "../root/DataTableRoot.context";
+
+interface DataTableBaseCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
+  /**
+   * Content alignment inside cell
+   * @default "left"
+   */
+  textAlign?: "left" | "center" | "right";
+  /**
+   * TODO: Shouldnt be needed to declare these here... But getting type-errors if not
+   */
+  colSpan?: number;
+  rowSpan?: number;
+  /**
+   * Temp hack to solve overflow and alignment
+   */
+  UNSAFE_isSelection?: boolean;
+  /**
+   * When true, clicking this cell will not trigger `onRowClick` on the row.
+   * Useful for cells that contain their own interactive content or actions
+   * that should be independent of row-level click handling.
+   */
+  preventRowClick?: boolean;
+  /**
+   * Sets a max-width on the content wrapper div inside the cell.
+   * This is only needed when using `layout="auto"` together with
+   * `truncateContent` on `<DataTable>` and you want the cell to be truncated.
+   */
+  contentMaxWidth?: number | `${number}${string}`;
+  /**
+   * Makes the cell sticky.
+   */
+  isSticky?: "start" | "end" | false;
+}
+
+/**
+ * TODO:
+ * - Need a "type" or something that centers content instead of relying on isSelection prop.
+ * - Need a separate prop do disabled resizing instead of relying on isSelection prop.
+ */
+const DataTableBaseCell = forwardRef<
+  HTMLTableCellElement,
+  DataTableBaseCellProps & {
+    /**
+     * Cell type
+     */
+    as: "th" | "td";
+  }
+>(
+  (
+    {
+      className,
+      children,
+      as: Component,
+      textAlign = "left",
+      colSpan,
+      UNSAFE_isSelection,
+      preventRowClick,
+      contentMaxWidth,
+      rowSpan,
+      isSticky,
+      ...rest
+    },
+    forwardedRef,
+  ) => {
+    const { withKeyboardNav } = useDataTableContext();
+
+    return (
+      <Component
+        {...rest}
+        ref={forwardedRef}
+        className={cl("aksel-data-table__cell", className)}
+        tabIndex={withKeyboardNav ? -1 : undefined}
+        data-align={textAlign}
+        data-selectable={UNSAFE_isSelection}
+        data-prevent-row-click={
+          preventRowClick || UNSAFE_isSelection || undefined
+        }
+        data-sticky={isSticky || undefined}
+        colSpan={colSpan}
+        rowSpan={rowSpan}
+      >
+        <div style={{ maxWidth: contentMaxWidth }}>{children}</div>
+      </Component>
+    );
+  },
+);
+
+export { DataTableBaseCell };
+export type { DataTableBaseCellProps };