@navikt/ds-react 8.9.0 → 8.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "8.9.0",
+  "version": "8.10.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",
@@ -698,24 +698,26 @@
     "clean": "rimraf cjs esm",
     "build": "yarn i18n-jsdoc && concurrently \"tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json\" \"tsc -p tsconfig.esm.json && tsc-alias -p tsconfig.esm.json && yarn write-packagejson\" && yarn i18n-jsdoc --cleanup && yarn copy-types",
     "watch": "tsc --watch -p tsconfig.esm.json",
-    "test": "TZ=UTC vitest run -c tests/vitest.config.ts",
+    "test": "concurrently \"TZ=UTC vitest run -c tests/vitest.config.ts\" \"yarn test-sb-build\"",
+    "test-sb-build": "tsc -p tsconfig.sb.json",
     "test:watch": "TZ=UTC vitest watch -c tests/vitest.config.ts",
     "copy-types": "copyfiles -f ./src/types/theme.d.ts ./esm/types"
   },
   "dependencies": {
     "@floating-ui/react": "0.27.8",
     "@floating-ui/react-dom": "^2.1.8",
-    "@navikt/aksel-icons": "^8.9.0",
-    "@navikt/ds-tokens": "^8.9.0",
+    "@navikt/aksel-icons": "^8.10.0",
+    "@navikt/ds-tokens": "^8.10.0",
     "date-fns": "^4.0.0",
-    "react-day-picker": "9.7.0"
+    "react-day-picker": "9.14.0"
   },
   "devDependencies": {
     "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.5.2",
-    "@types/jscodeshift": "^0.11.11",
+    "@types/jscodeshift": "17.3.0",
+    "@types/node": "^24.10.9",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "aksel": "workspace:^",
@@ -731,7 +733,7 @@
     "swr": "^2.3.6",
     "tsc-alias": "1.8.16",
     "tsx": "^4.20.6",
-    "typescript": "5.9.3",
+    "typescript": "6.0.2",
     "vitest": "4.1.0"
   },
   "peerDependencies": {

package/src/alert/base-alert/content/BaseAlertContent.tsx

@@ -1,6 +1,8 @@
 import React, { forwardRef } from "react";
 import { useThemeInternal } from "../../../theme/Theme";
+import { BodyLong } from "../../../typography";
 import { cl } from "../../../utils/helpers";
+import { useBaseAlert } from "../root/BaseAlertRoot.context";
 
 interface BaseAlertContentProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
@@ -25,16 +27,19 @@ const BaseAlertContent = forwardRef<HTMLDivElement, BaseAlertContentProps>(
     forwardedRef,
   ) => {
     const themeContext = useThemeInternal();
+    const { size } = useBaseAlert();
 
     return (
-      <div
+      <BodyLong
+        as="div"
         ref={forwardedRef}
         data-color={themeContext?.color}
+        size={size}
         {...restProps}
         className={cl(className, "aksel-base-alert__content")}
       >
         {children}
-      </div>
+      </BodyLong>
     );
   },
 );

package/src/data/drag-and-drop/drag-handler/DragAndDropDragHandler.tsx

@@ -9,6 +9,9 @@ import { DragAndDropElement } from "../types";
 
 export interface DragAndDropDragHandlerProps {
   item: DragAndDropElement;
+  itemRef: React.RefObject<HTMLLIElement | null>;
+  isOverlay: boolean;
+  itemLabel: string;
 }
 
 /**
@@ -20,70 +23,111 @@ export interface DragAndDropDragHandlerProps {
 export const DragAndDropDragHandler = React.forwardRef<
   HTMLDivElement,
   DragAndDropDragHandlerProps
->(({ item }, forwardedRef) => {
+>(({ item, itemRef, isOverlay, itemLabel }, forwardedRef) => {
   const context = useDragAndDropContext();
-  const active = context?.dragHandlerActive?.id === item.id;
+  const active =
+    context?.dragHandlerActive &&
+    item &&
+    context?.dragHandlerActive?.id === item.id;
+
+  if (isOverlay) {
+    // Render a simple drag icon for the overlay, which is used as a visual representation of the item being dragged
+    return (
+      <div
+        className="aksel-data-drag-and-drop__drag-handler"
+        ref={forwardedRef}
+        aria-hidden
+      >
+        <DragVerticalIcon fontSize="1.5rem" />
+      </div>
+    );
+  }
 
   return (
     <div className="aksel-data-drag-and-drop__drag-handler" ref={forwardedRef}>
       {active && (
-        <span
+        <button
           className="aksel-data-drag-and-drop__drag-handler__arrow"
           data-direction="up"
+          onClick={() => context?.onKeyboardDragEnd(-1)}
+          onMouseDown={(e) => e.preventDefault()}
+          disabled={context?.dragHandlerActive?.index === 0}
+          type="button"
         >
-          <CaretUpCircleFillIcon aria-hidden fontSize="1.2rem" />
-        </span>
+          <CaretUpCircleFillIcon aria-hidden fontSize="1.8rem" />
+        </button>
       )}
       <button
-        aria-label="Dra for å flytte"
+        // TODO - Bedre formulering av aria-label?
+        //aria-label={`Flytt element ${item.index + 1}. Trykk Enter eller Mellomrom for å aktivere, deretter piltastene for å flytte elementet.`}
+        aria-label={
+          active
+            ? `Flytt element ${itemLabel || item.index + 1}. Bruk piltastene for å flytte elementet.`
+            : `Flytt element ${itemLabel || item.index + 1}. Trykk Enter eller Mellomrom for å aktivere flytting.`
+        }
+        aria-pressed={Boolean(active)}
+        aria-roledescription="draggable"
+        type="button"
         className="aksel-data-drag-and-drop__drag-handler__button"
         data-drag-handler-active={active}
         onPointerDown={(event) => {
+          if (active) return;
           event.stopPropagation();
-          context?.onDragStart(event, item);
+          context?.startPendingDrag(event, item, itemRef?.current || null);
+        }}
+        onClick={(event) => {
+          if (!active) {
+            context?.setDragHandlerActive(item);
+            event.currentTarget.focus();
+          } else {
+            context?.setDragHandlerActive(null);
+          }
         }}
-        onClick={() => context?.setDragHandlerActive(item)}
+        onBlur={() => context?.setDragHandlerActive(null)}
         onKeyDown={(event) => {
-          if (
-            (event.key === "Enter" || event.key === " ") &&
-            context?.dragHandlerActive
-          ) {
+          if (event.key === "Enter" || event.key === " ") {
             // Enter or space, currently active item - end keyboard dragging
             event.preventDefault();
-            context?.setDragHandlerActive(null);
-          } else if (
-            (event.key === "Enter" || event.key === " ") &&
-            !context?.dragHandlerActive
-          ) {
-            // Enter or space, not currently active item - start keyboard dragging
-            event.preventDefault();
-            context?.setDragHandlerActive(item);
-          } else if (event.key === "Escape") {
+            context?.setDragHandlerActive(active ? null : item);
+            return;
+          }
+
+          if (!active) return;
+
+          if (event.key === "Escape") {
             // Cancel dragging
             // TODO Handle reset
+            event.preventDefault();
             context?.setDragHandlerActive(null);
+            return;
           } else if (event.key === "ArrowUp") {
             // Move item up
+            event.preventDefault();
             context?.onKeyboardDragEnd(-1);
+            return;
           } else if (event.key === "ArrowDown") {
             // Move item down
+            event.preventDefault();
             context?.onKeyboardDragEnd(1);
+            return;
           }
         }}
       >
-        <DragVerticalIcon
-          aria-hidden
-          title="Dra for å flytte"
-          fontSize="1.5rem"
-        />
+        <DragVerticalIcon aria-hidden fontSize="1.5rem" />
       </button>
       {active && (
-        <span
+        <button
           className="aksel-data-drag-and-drop__drag-handler__arrow"
           data-direction="down"
+          type="button"
+          onClick={() => context?.onKeyboardDragEnd(1)}
+          onMouseDown={(e) => e.preventDefault()}
+          disabled={
+            context?.dragHandlerActive?.index === context?.itemAmount - 1
+          }
         >
-          <CaretDownCircleFillIcon aria-hidden fontSize="1.2rem" />
-        </span>
+          <CaretDownCircleFillIcon aria-hidden fontSize="1.8rem" />
+        </button>
       )}
     </div>
   );

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

@@ -1,10 +1,11 @@
 import React from "react";
 import { HStack } from "../../../primitives/stack";
 import { cl } from "../../../utils/helpers";
+import { useMergeRefs } from "../../../utils/hooks";
 import { DragAndDropDragHandler } from "../drag-handler/DragAndDropDragHandler";
 import { useDragAndDropContext } from "../root/DragAndDrop.context";
 
-interface DragAndDropItemProps extends React.HTMLAttributes<HTMLDivElement> {
+interface DragAndDropItemProps extends React.HTMLAttributes<HTMLLIElement> {
   children: React.ReactNode;
   /**
    * Unique id
@@ -14,6 +15,11 @@ interface DragAndDropItemProps extends React.HTMLAttributes<HTMLDivElement> {
    * Index of the item being dragged
    */
   index: number;
+  /**
+   * Indicates if the item is an overlay
+   */
+  isOverlay?: boolean;
+  itemLabel: string;
 }
 
 /**
@@ -27,9 +33,13 @@ interface DragAndDropItemProps extends React.HTMLAttributes<HTMLDivElement> {
  * </DragAndDrop.Item>
  * ```
  */
-const DragAndDropItem = React.forwardRef<HTMLDivElement, DragAndDropItemProps>(
-  ({ children, id, index, className, ...rest }, forwardedRef) => {
-    const ref = React.useRef<HTMLDivElement>(null);
+const DragAndDropItem = React.forwardRef<HTMLLIElement, DragAndDropItemProps>(
+  (
+    { children, id, index, className, isOverlay = false, itemLabel, ...rest },
+    forwardedRef,
+  ) => {
+    const ref = React.useRef<HTMLLIElement>(null);
+    const mergedRef = useMergeRefs(forwardedRef, ref);
     const context = useDragAndDropContext();
     const item = { id, index };
     const isDropTarget = context?.dropTarget?.id === id;
@@ -40,27 +50,27 @@ const DragAndDropItem = React.forwardRef<HTMLDivElement, DragAndDropItemProps>(
         align="center"
         wrap={false}
         asChild
-        ref={forwardedRef}
         padding="space-4"
       >
         {/* TODO Should this be a <li>? */}
-        <div
-          id={id}
-          ref={ref}
+        <li
+          id={isOverlay ? undefined : id}
           {...rest}
-          data-dnd-id={id}
-          data-dnd-index={index}
-          role="button"
+          ref={mergedRef}
+          data-dnd-id={isOverlay ? undefined : id}
+          data-dnd-index={isOverlay ? undefined : index}
           className={cl("aksel-data-table__drag-and-drop-item", className)}
-          data-drop-target={isDropTarget}
-          /*
-          data-keyboard-dragging={keyboardDragging}
-          */
-          tabIndex={-1}
+          data-drop-target={isOverlay ? undefined : isDropTarget}
+          data-overlay={isOverlay}
         >
-          <DragAndDropDragHandler item={item} />
+          <DragAndDropDragHandler
+            item={item}
+            itemRef={ref}
+            isOverlay={isOverlay}
+            itemLabel={itemLabel}
+          />
           <div>{children}</div>
-        </div>
+        </li>
       </HStack>
     );
   },

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

@@ -9,10 +9,12 @@ interface DragAndDropContextType {
   dragHandlerActive: DragAndDropElement | null;
   setDragHandlerActive: (active: DragAndDropElement | null) => void;
   onKeyboardDragEnd: (diff: number) => void;
-  onDragStart: (
-    event: React.PointerEvent | React.MouseEvent,
+  startPendingDrag: (
+    event: React.PointerEvent,
     item: DragAndDropElement,
+    element?: HTMLElement | null,
   ) => void;
+  itemAmount: number;
 }
 
 export const {