@navikt/ds-react 8.7.0 → 8.9.0

package/esm/utils/hooks/useScrollLock.js

@@ -4,6 +4,34 @@ import { Timeout } from "./useTimeout.js";
 let originalHtmlStyles = {};
 let originalBodyStyles = {};
 let originalHtmlScrollBehavior = "";
+function supportsStableScrollbarGutter(referenceElement) {
+    const supported = typeof CSS !== "undefined" &&
+        CSS.supports &&
+        CSS.supports("scrollbar-gutter", "stable");
+    if (!supported || typeof document === "undefined") {
+        return false;
+    }
+    /*
+     * We need to do aditional checks since the scenario:
+     * - Scrollbar is edited with `::-webkit-scrollbar`
+     * - MacOS setting: Show scroll bars -> Automatically based on mouse or tracked
+     * Causes the calculation of scrollbar width to be incorrect, and thus the scrollbar gutter to not work as intended.
+     */
+    const doc = ownerDocument(referenceElement);
+    const html = doc.documentElement;
+    const body = doc.body;
+    const scrollContainer = isOverflowElement(html) ? html : body;
+    const originalScrollContainerOverflowY = scrollContainer.style.overflowY;
+    const originalHtmlStyleGutter = html.style.scrollbarGutter;
+    html.style.scrollbarGutter = "stable";
+    scrollContainer.style.overflowY = "scroll";
+    const before = scrollContainer.offsetWidth;
+    scrollContainer.style.overflowY = "hidden";
+    const after = scrollContainer.offsetWidth;
+    scrollContainer.style.overflowY = originalScrollContainerOverflowY;
+    html.style.scrollbarGutter = originalHtmlStyleGutter;
+    return before === after;
+}
 function hasInsetScrollbars(referenceElement) {
     if (typeof document === "undefined") {
         return false;
@@ -48,9 +76,11 @@ function preventScrollStandard(referenceElement) {
      */
     function lockScroll() {
         /* DOM reads: */
-        var _a;
         const htmlStyles = win.getComputedStyle(html);
         const bodyStyles = win.getComputedStyle(body);
+        const htmlScrollbarGutterValue = htmlStyles.scrollbarGutter || "";
+        const hasBothEdges = htmlScrollbarGutterValue.includes("both-edges");
+        const scrollbarGutterValue = hasBothEdges ? "stable both-edges" : "stable";
         scrollTop = html.scrollTop;
         scrollLeft = html.scrollLeft;
         originalHtmlStyles = {
@@ -84,22 +114,22 @@ function preventScrollStandard(referenceElement) {
         /**
          * Check support for stable scrollbar gutter to avoid layout shift when scrollbars appear/disappear.
          */
-        const supportsStableScrollbarGutter = typeof CSS !== "undefined" &&
-            ((_a = CSS.supports) === null || _a === void 0 ? void 0 : _a.call(CSS, "scrollbar-gutter", "stable"));
+        const supportsScrollbarGutter = supportsStableScrollbarGutter(referenceElement);
         /*
          * DOM writes:
          * Do not read the DOM past this point!
          */
+        if (supportsScrollbarGutter) {
+            const elementToLock = isOverflowElement(html) ? html : body;
+            html.style.scrollbarGutter = scrollbarGutterValue;
+            elementToLock.style.overflowY = "hidden";
+            elementToLock.style.overflowX = "hidden";
+            return;
+        }
         Object.assign(html.style, {
             scrollbarGutter: "stable",
-            overflowY: !supportsStableScrollbarGutter &&
-                (isScrollableY || hasConstantOverflowY)
-                ? "scroll"
-                : "hidden",
-            overflowX: !supportsStableScrollbarGutter &&
-                (isScrollableX || hasConstantOverflowX)
-                ? "scroll"
-                : "hidden",
+            overflowY: isScrollableY || hasConstantOverflowY ? "scroll" : "hidden",
+            overflowX: isScrollableX || hasConstantOverflowX ? "scroll" : "hidden",
         });
         Object.assign(body.style, {
             /*

package/esm/utils/hooks/useScrollLock.js.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollLock.js","sourceRoot":"","sources":["../../../src/utils/hooks/useScrollLock.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useScrollLock.js","sourceRoot":"","sources":["../../../src/utils/hooks/useScrollLock.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "8.7.0",
+  "version": "8.9.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",
@@ -704,9 +704,9 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.27.8",
-    "@floating-ui/react-dom": "^2.1.6",
-    "@navikt/aksel-icons": "^8.7.0",
-    "@navikt/ds-tokens": "^8.7.0",
+    "@floating-ui/react-dom": "^2.1.8",
+    "@navikt/aksel-icons": "^8.9.0",
+    "@navikt/ds-tokens": "^8.9.0",
     "date-fns": "^4.0.0",
     "react-day-picker": "9.7.0"
   },
@@ -726,13 +726,13 @@
     "jsdom": "27.1.0",
     "react": "19.2.4",
     "react-dom": "19.2.4",
-    "react-router": "^7.13.0",
+    "react-router": "^7.13.1",
     "rimraf": "6.1.3",
     "swr": "^2.3.6",
     "tsc-alias": "1.8.16",
     "tsx": "^4.20.6",
     "typescript": "5.9.3",
-    "vitest": "4.0.18"
+    "vitest": "4.1.0"
   },
   "peerDependencies": {
     "@types/react": "^17.0.30 || ^18 || ^19",

package/src/alert/base-alert/root/BaseAlertRoot.tsx

@@ -91,7 +91,7 @@ const BaseAlert = forwardRef<HTMLDivElement, BaseAlertProps>(
           data-variant={type}
           data-global={global}
         >
-          <div role={role}>{children}</div>
+          {role ? <div role={role}>{children}</div> : children}
         </Component>
       </BaseAlertProvider>
     );

package/src/alert/info-card/index.ts

@@ -4,6 +4,7 @@ export {
   InfoCardHeader,
   InfoCardTitle,
   InfoCardContent,
+  InfoCardMessage,
 } from "./root/InfoCardRoot";
 
 export type {
@@ -11,4 +12,5 @@ export type {
   InfoCardHeaderProps,
   InfoCardTitleProps,
   InfoCardContentProps,
+  InfoCardMessageProps,
 } from "./root/InfoCardRoot";

package/src/alert/info-card/message/InfoCardMessage.tsx

@@ -0,0 +1,48 @@
+import React, { forwardRef } from "react";
+import { BodyLong } from "../../../typography";
+import { cl } from "../../../utils/helpers";
+import { useBaseAlert } from "../../base-alert/root/BaseAlertRoot.context";
+
+interface InfoCardMessageProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Icon to display in message.
+   */
+  icon: React.ReactNode;
+}
+
+/**
+ * A component for displaying informational messages.
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/infocard)
+ * @see 🏷️ {@link InfoCardMessageProps}
+ * @example
+ * ```jsx
+ * <InfoCard data-color="info">
+ *   <InfoCard.Message icon={<InformationSquareIcon aria-hidden />}>
+ *     Message contents
+ *   </InfoCard.Message>
+ * </InfoCard>
+ * ```
+ */
+const InfoCardMessage = forwardRef<HTMLDivElement, InfoCardMessageProps>(
+  (
+    { children, className, icon, ...restProps }: InfoCardMessageProps,
+    forwardedRef,
+  ) => {
+    const context = useBaseAlert();
+    return (
+      <div
+        ref={forwardedRef}
+        className={cl(className, "aksel-base-alert__message")}
+        {...restProps}
+      >
+        <div className="aksel-base-alert__icon">{icon}</div>
+        <BodyLong size={context.size} as="div" textColor="default">
+          {children}
+        </BodyLong>
+      </div>
+    );
+  },
+);
+
+export { InfoCardMessage };
+export type { InfoCardMessageProps };

package/src/alert/info-card/root/InfoCardRoot.tsx

@@ -8,6 +8,10 @@ import {
   InfoCardHeader,
   type InfoCardHeaderProps,
 } from "../header/InfoCardHeader";
+import {
+  InfoCardMessage,
+  type InfoCardMessageProps,
+} from "../message/InfoCardMessage";
 import { InfoCardTitle, type InfoCardTitleProps } from "../title/InfoCardTitle";
 
 type InfoCardProps = Omit<
@@ -70,6 +74,19 @@ interface InfoCardComponent extends React.ForwardRefExoticComponent<
    * ```
    */
   Content: typeof InfoCardContent;
+
+  /**
+   * @see 🏷️ {@link InfoCardMessageProps}
+   * @example
+   * ```jsx
+   * <InfoCard data-color="info">
+   *   <InfoCard.Message icon={<InformationSquareIcon aria-hidden />}>
+   *     Message contents
+   *   </InfoCard.Message>
+   * </InfoCard>
+   * ```
+   */
+  Message: typeof InfoCardMessage;
 }
 
 /**
@@ -111,12 +128,14 @@ export const InfoCard = forwardRef<HTMLDivElement, InfoCardProps>(
 InfoCard.Header = InfoCardHeader;
 InfoCard.Title = InfoCardTitle;
 InfoCard.Content = InfoCardContent;
+InfoCard.Message = InfoCardMessage;
 
 export default InfoCard;
-export { InfoCardContent, InfoCardHeader, InfoCardTitle };
+export { InfoCardContent, InfoCardHeader, InfoCardTitle, InfoCardMessage };
 export type {
   InfoCardProps,
   InfoCardHeaderProps,
   InfoCardTitleProps,
   InfoCardContentProps,
+  InfoCardMessageProps,
 };

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

@@ -0,0 +1,90 @@
+import React from "react";
+import {
+  CaretDownCircleFillIcon,
+  CaretUpCircleFillIcon,
+  DragVerticalIcon,
+} from "@navikt/aksel-icons";
+import { useDragAndDropContext } from "../root/DragAndDrop.context";
+import { DragAndDropElement } from "../types";
+
+export interface DragAndDropDragHandlerProps {
+  item: DragAndDropElement;
+}
+
+/**
+ * DragAndDropDragHandler
+ *
+ * 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 DragAndDropDragHandler = React.forwardRef<
+  HTMLDivElement,
+  DragAndDropDragHandlerProps
+>(({ item }, forwardedRef) => {
+  const context = useDragAndDropContext();
+  const active = context?.dragHandlerActive?.id === item.id;
+
+  return (
+    <div className="aksel-data-drag-and-drop__drag-handler" ref={forwardedRef}>
+      {active && (
+        <span
+          className="aksel-data-drag-and-drop__drag-handler__arrow"
+          data-direction="up"
+        >
+          <CaretUpCircleFillIcon aria-hidden fontSize="1.2rem" />
+        </span>
+      )}
+      <button
+        aria-label="Dra for å flytte"
+        className="aksel-data-drag-and-drop__drag-handler__button"
+        data-drag-handler-active={active}
+        onPointerDown={(event) => {
+          event.stopPropagation();
+          context?.onDragStart(event, item);
+        }}
+        onClick={() => context?.setDragHandlerActive(item)}
+        onKeyDown={(event) => {
+          if (
+            (event.key === "Enter" || event.key === " ") &&
+            context?.dragHandlerActive
+          ) {
+            // 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") {
+            // Cancel dragging
+            // TODO Handle reset
+            context?.setDragHandlerActive(null);
+          } else if (event.key === "ArrowUp") {
+            // Move item up
+            context?.onKeyboardDragEnd(-1);
+          } else if (event.key === "ArrowDown") {
+            // Move item down
+            context?.onKeyboardDragEnd(1);
+          }
+        }}
+      >
+        <DragVerticalIcon
+          aria-hidden
+          title="Dra for å flytte"
+          fontSize="1.5rem"
+        />
+      </button>
+      {active && (
+        <span
+          className="aksel-data-drag-and-drop__drag-handler__arrow"
+          data-direction="down"
+        >
+          <CaretDownCircleFillIcon aria-hidden fontSize="1.2rem" />
+        </span>
+      )}
+    </div>
+  );
+});

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

@@ -0,0 +1,71 @@
+import React from "react";
+import { HStack } from "../../../primitives/stack";
+import { cl } from "../../../utils/helpers";
+import { DragAndDropDragHandler } from "../drag-handler/DragAndDropDragHandler";
+import { useDragAndDropContext } from "../root/DragAndDrop.context";
+
+interface DragAndDropItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  /**
+   * Unique id
+   */
+  id: string;
+  /**
+   * Index of the item being dragged
+   */
+  index: number;
+}
+
+/**
+ * TODO
+ *
+ * @see 🏷️ {@link DragAndDropItemProps}
+ * @example
+ * ```tsx
+ * <DragAndDrop.Item numOfSelectedRows={selectedRows.length} onClear={handleClear}>
+ *   TODO
+ * </DragAndDrop.Item>
+ * ```
+ */
+const DragAndDropItem = React.forwardRef<HTMLDivElement, DragAndDropItemProps>(
+  ({ children, id, index, className, ...rest }, forwardedRef) => {
+    const ref = React.useRef<HTMLDivElement>(null);
+    const context = useDragAndDropContext();
+    const item = { id, index };
+    const isDropTarget = context?.dropTarget?.id === id;
+
+    return (
+      <HStack
+        gap="space-8"
+        align="center"
+        wrap={false}
+        asChild
+        ref={forwardedRef}
+        padding="space-4"
+      >
+        {/* TODO Should this be a <li>? */}
+        <div
+          id={id}
+          ref={ref}
+          {...rest}
+          data-dnd-id={id}
+          data-dnd-index={index}
+          role="button"
+          className={cl("aksel-data-table__drag-and-drop-item", className)}
+          data-drop-target={isDropTarget}
+          /*
+          data-keyboard-dragging={keyboardDragging}
+          */
+          tabIndex={-1}
+        >
+          <DragAndDropDragHandler item={item} />
+          <div>{children}</div>
+        </div>
+      </HStack>
+    );
+  },
+);
+
+export default DragAndDropItem;
+export { DragAndDropItem };
+export type { DragAndDropItemProps };

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

@@ -0,0 +1,25 @@
+import { createStrictContext } from "../../../utils/helpers";
+import { DragAndDropElement } from "../types";
+
+interface DragAndDropContextType {
+  activeItem: DragAndDropElement | null;
+  setActiveItem: (id: DragAndDropElement | null) => void;
+  dropTarget: DragAndDropElement | null;
+  setDropTarget: (id: DragAndDropElement | null) => void;
+  dragHandlerActive: DragAndDropElement | null;
+  setDragHandlerActive: (active: DragAndDropElement | null) => void;
+  onKeyboardDragEnd: (diff: number) => void;
+  onDragStart: (
+    event: React.PointerEvent | React.MouseEvent,
+    item: DragAndDropElement,
+  ) => void;
+}
+
+export const {
+  Provider: DragAndDropProvider,
+  useContext: useDragAndDropContext,
+} = createStrictContext<DragAndDropContextType | undefined>({
+  errorMessage:
+    "useDragAndDropContext must be used within a DragAndDropProvider",
+  name: "DragAndDropContext",
+});