@navikt/ds-react 7.32.1 → 7.32.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "7.32.1",
+  "version": "7.32.3",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -643,21 +643,21 @@
     "clean": "rimraf cjs esm",
     "build": "yarn i18n-jsdoc && concurrently \"tsc -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": "TZ=UTC vitest run -c tests/vitest.config.ts --silent",
     "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.0.9",
-    "@navikt/aksel-icons": "^7.32.1",
-    "@navikt/ds-tokens": "^7.32.1",
+    "@floating-ui/react-dom": "^2.1.6",
+    "@navikt/aksel-icons": "^7.32.3",
+    "@navikt/ds-tokens": "^7.32.3",
     "clsx": "^2.1.0",
     "date-fns": "^4.0.0",
     "react-day-picker": "9.7.0"
   },
   "devDependencies": {
-    "@testing-library/dom": "10.4.0",
+    "@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",
@@ -674,8 +674,8 @@
     "swr": "^2.3.6",
     "tsc-alias": "1.8.16",
     "tsx": "^4.20.6",
-    "typescript": "5.8.3",
-    "vitest": "^2.1.9"
+    "typescript": "5.9.3",
+    "vitest": "^3.2.4"
   },
   "peerDependencies": {
     "@types/react": ">=17.0.30",

package/src/copybutton/CopyButton.tsx

@@ -1,16 +1,11 @@
-import React, {
-  ButtonHTMLAttributes,
-  forwardRef,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import React, { ButtonHTMLAttributes, forwardRef, useState } from "react";
 import { CheckmarkIcon, FilesIcon } from "@navikt/aksel-icons";
 import { Button, ButtonProps } from "../button";
 import { useRenameCSS, useThemeInternal } from "../theme/Theme";
 import { Label } from "../typography";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import copy from "../util/copy";
+import { useTimeout } from "../util/hooks/useTimeout";
 import { useI18n } from "../util/i18n/i18n.hooks";
 
 export interface CopyButtonProps
@@ -94,29 +89,22 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
     ref,
   ) => {
     const [active, setActive] = useState(false);
-    const timeoutRef = useRef<number>(undefined);
     const translate = useI18n("CopyButton");
+    const timeout = useTimeout();
 
     const { cn } = useRenameCSS();
 
     const themeContext = useThemeInternal(false);
 
-    useEffect(() => {
-      return () => {
-        timeoutRef.current && clearTimeout(timeoutRef.current);
-      };
-    }, []);
-
     const handleClick = () => {
-      timeoutRef.current && clearTimeout(timeoutRef.current);
       copy(copyText);
       setActive(true);
       onActiveChange?.(true);
 
-      timeoutRef.current = window.setTimeout(() => {
+      timeout.start(activeDuration, () => {
         setActive(false);
         onActiveChange?.(false);
-      }, activeDuration);
+      });
     };
 
     const activeString = activeText || translate("activeText");

package/src/form/combobox/Combobox.tsx

@@ -5,7 +5,6 @@ import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import ComboboxWrapper from "./ComboboxWrapper";
 import FilteredOptions from "./FilteredOptions/FilteredOptions";
-import { useFilteredOptionsContext } from "./FilteredOptions/filteredOptionsContext";
 import { useInputContext } from "./Input/Input.context";
 import { InputController } from "./Input/InputController";
 import { ComboboxProps } from "./types";
@@ -21,8 +20,6 @@ export const Combobox = forwardRef<
 
   const { cn } = useRenameCSS();
 
-  const { toggleIsListOpen } = useFilteredOptionsContext();
-
   const {
     error,
     errorId,
@@ -41,7 +38,6 @@ export const Combobox = forwardRef<
         hasError={hasError}
         inputProps={inputProps}
         inputSize={size}
-        toggleIsListOpen={toggleIsListOpen}
       >
         <Label
           htmlFor={inputProps.id}

package/src/form/combobox/ComboboxWrapper.tsx

@@ -11,7 +11,6 @@ type ComboboxWrapperProps = {
   };
   readOnly?: boolean;
   inputSize: string;
-  toggleIsListOpen: (isListOpen: boolean) => void;
 };
 
 const ComboboxWrapper = ({
@@ -20,7 +19,6 @@ const ComboboxWrapper = ({
   hasError,
   inputProps,
   inputSize,
-  toggleIsListOpen,
 }: ComboboxWrapperProps) => {
   const { cn } = useRenameCSS();
   const { toggleOpenButtonRef, clearInput, readOnly } = useInputContext();
@@ -39,7 +37,6 @@ const ComboboxWrapper = ({
 
   function onBlurWrapper(event: React.FocusEvent<HTMLDivElement>) {
     if (!wrapperRef.current?.contains(event.relatedTarget)) {
-      toggleIsListOpen(false);
       setHasFocusWithin(false);
       clearInput(event);
     }

package/src/form/combobox/FilteredOptions/FilteredOptions.tsx

@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
+import { DismissableLayer } from "../../../overlays/dismissablelayer/DismissableLayer";
 import { Floating } from "../../../overlays/floating/Floating";
 import { useRenameCSS, useThemeInternal } from "../../../theme/Theme";
 import { useClientLayoutEffect } from "../../../util";
@@ -17,6 +18,7 @@ const FilteredOptions = () => {
   const themeContext = useThemeInternal(false);
   const {
     inputProps: { id },
+    anchorRef,
   } = useInputContext();
 
   const {
@@ -27,9 +29,12 @@ const FilteredOptions = () => {
     setFilteredOptionsRef,
     isMouseLastUsedInputDevice,
     isValueNew,
+    toggleIsListOpen,
   } = useFilteredOptionsContext();
   const [localOpen, setLocalOpen] = useState(isListOpen);
 
+  const floatingRef = useRef<HTMLDivElement | null>(null);
+
   /**
    * This is a dirty hack to make the positioning-logic in Floating base the "flip" on the static 290px max-height,
    * instead of the dynamic one based on available space. Without this, the list won't flip to top when there's
@@ -53,53 +58,68 @@ const FilteredOptions = () => {
   const height = themeContext?.isDarkside ? "316px" : "290px";
 
   return (
-    <Floating.Content
-      className={cn("navds-combobox__list", {
-        "navds-combobox__list--closed": !isListOpen,
-        "navds-combobox__list--with-hover": isMouseLastUsedInputDevice,
-      })}
-      id={filteredOptionsUtil.getFilteredOptionsId(id)}
-      tabIndex={-1}
-      sideOffset={8}
-      side="bottom"
-      fallbackPlacements={["top"]}
-      enabled={isListOpen}
-      style={{
-        maxHeight: localOpen
-          ? `min(${height}, var(--ac-floating-available-height))`
-          : `${height}`,
+    <DismissableLayer
+      asChild
+      safeZone={{
+        anchor: anchorRef,
+        dismissable: floatingRef.current,
+      }}
+      onDismiss={() => localOpen && toggleIsListOpen(false)}
+      onEscapeKeyDown={(event) => {
+        /* We handle this manually in Input */
+        event.preventDefault();
       }}
-      autoUpdateWhileMounted={false}
+      enabled={localOpen}
     >
-      {shouldRenderNonSelectables && (
-        <div
-          className={cn("navds-combobox__list_non-selectables")}
-          role="status"
-        >
-          {isMultiSelect && maxSelected.limit && <MaxSelectedMessage />}
-          {isLoading && <LoadingMessage />}
-          {!isLoading && filteredOptions.length === 0 && !allowNewValues && (
-            <NoSearchHitsMessage />
-          )}
-        </div>
-      )}
+      <Floating.Content
+        ref={floatingRef}
+        className={cn("navds-combobox__list", {
+          "navds-combobox__list--closed": !isListOpen,
+          "navds-combobox__list--with-hover": isMouseLastUsedInputDevice,
+        })}
+        id={filteredOptionsUtil.getFilteredOptionsId(id)}
+        tabIndex={-1}
+        sideOffset={8}
+        side="bottom"
+        fallbackPlacements={["top"]}
+        enabled={isListOpen}
+        style={{
+          maxHeight: localOpen
+            ? `min(${height}, var(--ac-floating-available-height))`
+            : `${height}`,
+        }}
+        autoUpdateWhileMounted={false}
+      >
+        {shouldRenderNonSelectables && (
+          <div
+            className={cn("navds-combobox__list_non-selectables")}
+            role="status"
+          >
+            {isMultiSelect && maxSelected.limit && <MaxSelectedMessage />}
+            {isLoading && <LoadingMessage />}
+            {!isLoading && filteredOptions.length === 0 && !allowNewValues && (
+              <NoSearchHitsMessage />
+            )}
+          </div>
+        )}
 
-      {shouldRenderFilteredOptionsList && (
-        /* biome-ignore lint/a11y/useFocusableInteractive: Interaction is not handeled by listbox itself. */
-        <ul
-          ref={setFilteredOptionsRef}
-          role="listbox"
-          className={cn("navds-combobox__list-options")}
-        >
-          {isValueNew && !maxSelected.isLimitReached && allowNewValues && (
-            <AddNewOption />
-          )}
-          {filteredOptions.map((option) => (
-            <FilteredOptionsItem key={option.value} option={option} />
-          ))}
-        </ul>
-      )}
-    </Floating.Content>
+        {shouldRenderFilteredOptionsList && (
+          /* biome-ignore lint/a11y/useFocusableInteractive: Interaction is not handeled by listbox itself. */
+          <ul
+            ref={setFilteredOptionsRef}
+            role="listbox"
+            className={cn("navds-combobox__list-options")}
+          >
+            {isValueNew && !maxSelected.isLimitReached && allowNewValues && (
+              <AddNewOption />
+            )}
+            {filteredOptions.map((option) => (
+              <FilteredOptionsItem key={option.value} option={option} />
+            ))}
+          </ul>
+        )}
+      </Floating.Content>
+    </DismissableLayer>
   );
 };
 

package/src/form/combobox/FilteredOptions/FilteredOptionsItem.tsx

@@ -13,6 +13,10 @@ const useTextHighlight = (text: string, searchTerm: string) => {
   const indexOfHighlightedText = text
     .toLowerCase()
     .indexOf(searchTerm.toLowerCase());
+  if (indexOfHighlightedText === -1) {
+    // This can happen if the consumer has implemented their own filtering logic
+    return [text, "", ""];
+  }
   const start = text.substring(0, indexOfHighlightedText);
   const highlight = text.substring(
     indexOfHighlightedText,

package/src/form/combobox/FilteredOptions/useVirtualFocus.ts

@@ -67,6 +67,7 @@ const useVirtualFocus = (
 
     if (!activeElement) {
       setActiveAndScrollToElement(elementsAbleToReceiveFocus[0]);
+
       return;
     }
     const _currentIndex = elementsAbleToReceiveFocus.indexOf(activeElement);

package/src/form/combobox/Input/Input.context.tsx

@@ -18,6 +18,8 @@ interface InputContextValue extends FormFieldType {
   toggleOpenButtonRef: React.MutableRefObject<HTMLDivElement | null>;
   hideCaret: boolean;
   setHideCaret: React.Dispatch<React.SetStateAction<boolean>>;
+  anchorRef: HTMLDivElement | null;
+  setAnchorRef: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;
 }
 
 const [InputContextProvider, useInputContext] =
@@ -75,6 +77,7 @@ const InputProvider = ({ children, value: props }: Props) => {
   const toggleOpenButtonRef = useRef<HTMLDivElement>(null);
   const [internalValue, setInternalValue] = useState<string>(defaultValue);
   const [hideCaret, setHideCaret] = useState(false);
+  const [anchorRef, setAnchorRef] = useState<HTMLDivElement | null>(null);
 
   const value = useMemo(
     () => String(externalValue ?? internalValue),
@@ -127,6 +130,8 @@ const InputProvider = ({ children, value: props }: Props) => {
     toggleOpenButtonRef,
     hideCaret,
     setHideCaret,
+    anchorRef,
+    setAnchorRef,
   };
 
   return (

package/src/form/combobox/Input/InputController.tsx

@@ -49,6 +49,7 @@ export const InputController = forwardRef<
     inputRef,
     toggleOpenButtonRef,
     readOnly,
+    setAnchorRef,
   } = useInputContext();
 
   const { activeDecendantId, toggleIsListOpen } = useFilteredOptionsContext();
@@ -57,7 +58,7 @@ export const InputController = forwardRef<
   const mergedInputRef = useMergeRefs(inputRef, ref);
 
   return (
-    <Floating.Anchor asChild>
+    <Floating.Anchor asChild ref={setAnchorRef}>
       <div
         className={cn("navds-combobox__wrapper-inner navds-text-field__input", {
           "navds-combobox__wrapper-inner--virtually-unfocused":

package/src/form/file-upload/parts/item/utils/format-file-size.test.ts

@@ -60,13 +60,13 @@ describe("format-file-size", () => {
 
 function createLargeMockFile(sizeInBytes: number): File {
   const chunkSize = 1024 * 1024; // 1MB chunk size
-  const chunks: Uint8Array[] = [];
+  const chunks: ArrayBuffer[] = [];
 
   for (let i = 0; i < sizeInBytes; i += chunkSize) {
     const size = Math.min(chunkSize, sizeInBytes - i);
     const chunk = new Uint8Array(size);
     chunk.fill("a".charCodeAt(0));
-    chunks.push(chunk);
+    chunks.push(chunk.buffer);
   }
 
   const blob = new Blob(chunks, { type: "text/plain" });

package/src/form/switch/Switch.tsx

@@ -124,14 +124,14 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
           htmlFor={inputProps.id}
           className={cn("navds-switch__label-wrapper")}
         >
-          <div
+          <span
             className={cn("navds-switch__content", {
               "navds-sr-only": hideLabel,
               "navds-switch--with-description": description && !hideLabel,
             })}
           >
             <BodyShort
-              as="div"
+              as="span"
               size={size}
               className={cn("navds-switch__label")}
             >
@@ -141,7 +141,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
             {description && (
               <BodyShort
                 size={size}
-                as="div"
+                as="span"
                 className={cn(
                   "navds-form-field__subdescription navds-switch__description",
                 )}
@@ -149,7 +149,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
                 {description}
               </BodyShort>
             )}
-          </div>
+          </span>
         </label>
       </div>
     );

package/src/help-text/HelpText.tsx

@@ -70,9 +70,10 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
           className={cn(className, "navds-help-text__button")}
           type="button"
           aria-expanded={open}
+          aria-label={titleWithFallback}
         >
-          <HelpTextIcon title={titleWithFallback} />
-          <HelpTextIcon filled title={titleWithFallback} />
+          <HelpTextIcon />
+          <HelpTextIcon filled />
         </button>
         <Popover
           onClose={() => setOpen(false)}

package/src/help-text/HelpTextIcon.tsx

@@ -1,18 +1,9 @@
 import React from "react";
 import { useRenameCSS } from "../theme/Theme";
-import { useId } from "../util/hooks";
 
-export const HelpTextIcon = ({
-  title,
-  filled = false,
-}: {
-  title: string;
-  filled?: boolean;
-}) => {
+export const HelpTextIcon = ({ filled = false }: { filled?: boolean }) => {
   const { cn } = useRenameCSS();
 
-  let titleId: string | undefined = useId();
-  titleId = title ? `title-${titleId}` : undefined;
   return (
     <svg
       width="1em"
@@ -22,12 +13,11 @@ export const HelpTextIcon = ({
       xmlns="http://www.w3.org/2000/svg"
       focusable={false}
       role="img"
-      aria-labelledby={titleId}
       className={cn("navds-help-text__icon", {
         "navds-help-text__icon--filled": filled,
       })}
+      aria-hidden
     >
-      {title ? <title id={titleId}>{title}</title> : null}
       <circle
         cx="12"
         cy="12"

package/src/layout/page/parts/PageBlock.tsx

@@ -7,24 +7,27 @@ export const widths = ["text", "md", "lg", "xl", "2xl"] as const;
 export interface PageBlockProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Predefined max-width
-   * @example
-   * ```
+   *
    * text: 576px + dynamic gutters
+   *
    * md:   768px
+   *
    * lg:   1024px
+   *
    * xl:   1280px
+   *
    * 2xl:  1440px
-   * ```
+   *
    * @default max-width: 100%;
    */
   width?: (typeof widths)[number];
   /**
    * Adds a standardised responsive padding-inline
-   * @example
-   * ```
+   *
    * 3rem on > md
+   *
    * 1rem on < md
-   * ```
+   *
    * @default false
    */
   gutters?: boolean;

package/src/modal/ModalUtils.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { ownerDocument } from "../util/owner";
 import type { ModalProps } from "./types";
 
 export interface MouseCoordinates {
@@ -45,16 +46,18 @@ export function useBodyScrollLock(
       return;
     }
 
+    const ownerDoc = ownerDocument(modalRef.current);
+
     // In case `open` is true initially
     if (modalRef.current.open) {
-      document.body.classList.add(BODY_CLASS, BODY_CLASS_LEGACY);
+      ownerDoc.body.classList.add(BODY_CLASS, BODY_CLASS_LEGACY);
     }
 
     const observer = new MutationObserver(() => {
       if (modalRef.current?.open) {
-        document.body.classList.add(BODY_CLASS, BODY_CLASS_LEGACY);
+        ownerDoc.body.classList.add(BODY_CLASS, BODY_CLASS_LEGACY);
       } else {
-        document.body.classList.remove(BODY_CLASS, BODY_CLASS_LEGACY);
+        ownerDoc.body.classList.remove(BODY_CLASS, BODY_CLASS_LEGACY);
       }
     });
 
@@ -66,7 +69,7 @@ export function useBodyScrollLock(
     return () => {
       observer.disconnect();
       // In case modal is unmounted before it's closed
-      document.body.classList.remove(BODY_CLASS, BODY_CLASS_LEGACY);
+      ownerDoc.body.classList.remove(BODY_CLASS, BODY_CLASS_LEGACY);
     };
   }, [modalRef, portalNode, isNested]);
 }

package/src/overlays/dismissablelayer/DismissableLayer.tsx

@@ -8,6 +8,7 @@ import React, {
 import { Slot } from "../../slot/Slot";
 import { useMergeRefs } from "../../util/hooks";
 import { createDescendantContext } from "../../util/hooks/descendants/useDescendant";
+import { ownerDocument } from "../../util/owner";
 import { AsChild } from "../../util/types/AsChild";
 import {
   CustomFocusEvent,
@@ -158,11 +159,7 @@ const DismissableLayerNode = forwardRef<HTMLDivElement, DismissableLayerProps>(
 
     const mergedRefs = useMergeRefs(setNode, register, ref);
 
-    /**
-     * In some cases the `node.ownerDocument` can differ from global document.
-     * This can happend when portaling elements or using web-components
-     */
-    const ownerDocument = node?.ownerDocument ?? globalThis?.document;
+    const ownerDoc = ownerDocument(node);
 
     const hasInteractedOutsideRef = useRef(false);
     const hasPointerDownOutsideRef = useRef(false);
@@ -278,7 +275,7 @@ const DismissableLayerNode = forwardRef<HTMLDivElement, DismissableLayerProps>(
       if (!event.defaultPrevented && onDismiss) {
         onDismiss();
       }
-    }, ownerDocument);
+    }, ownerDoc);
 
     const focusOutside = useFocusOutside((event) => {
       if (!enabled) {
@@ -302,7 +299,7 @@ const DismissableLayerNode = forwardRef<HTMLDivElement, DismissableLayerProps>(
       if (!event.defaultPrevented && onDismiss) {
         onDismiss();
       }
-    }, ownerDocument);
+    }, ownerDoc);
 
     useEscapeKeydown((event) => {
       if (!enabled) {
@@ -331,7 +328,7 @@ const DismissableLayerNode = forwardRef<HTMLDivElement, DismissableLayerProps>(
         event.preventDefault();
         onDismiss();
       }
-    }, ownerDocument);
+    }, ownerDoc);
 
     /**
      * If `disableOutsidePointerEvents` is true,
@@ -343,23 +340,17 @@ const DismissableLayerNode = forwardRef<HTMLDivElement, DismissableLayerProps>(
       if (!node || !enabled || !disableOutsidePointerEvents) return;
 
       if (bodyLockCount === 0) {
-        originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
-        ownerDocument.body.style.pointerEvents = "none";
+        originalBodyPointerEvents = ownerDoc.body.style.pointerEvents;
+        ownerDoc.body.style.pointerEvents = "none";
       }
       bodyLockCount++;
       return () => {
         if (bodyLockCount === 1) {
-          ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;
+          ownerDoc.body.style.pointerEvents = originalBodyPointerEvents;
         }
         bodyLockCount--;
       };
-    }, [
-      node,
-      ownerDocument,
-      disableOutsidePointerEvents,
-      descendants,
-      enabled,
-    ]);
+    }, [node, ownerDoc, disableOutsidePointerEvents, descendants, enabled]);
 
     /**
      * To make sure pointerEvents are enabled for all parents and siblings when the layer is removed from the DOM

package/src/overlays/dismissablelayer/util/usePointerDownOutside.ts

@@ -1,5 +1,6 @@
 import { useEffect, useRef } from "react";
 import { useCallbackRef } from "../../../util/hooks";
+import { useTimeout } from "../../../util/hooks/useTimeout";
 import {
   CUSTOM_EVENTS,
   CustomPointerDownEvent,
@@ -19,6 +20,7 @@ export function usePointerDownOutside(
   const handlePointerDownOutside = useCallbackRef(callback) as EventListener;
   const isPointerInsideReactTreeRef = useRef(false);
   const handleClickRef = useRef<typeof handlePointerDownOutside>(() => {});
+  const timeout = useTimeout();
 
   useEffect(() => {
     const handlePointerDown = (event: PointerEvent) => {
@@ -77,16 +79,15 @@ export function usePointerDownOutside(
      *   })
      * });
      */
-    const timerId = window.setTimeout(() => {
+    timeout.start(0, () => {
       ownerDocument.addEventListener("pointerdown", handlePointerDown);
-    }, 0);
+    });
 
     return () => {
-      window.clearTimeout(timerId);
       ownerDocument.removeEventListener("pointerdown", handlePointerDown);
       ownerDocument.removeEventListener("click", handleClickRef.current);
     };
-  }, [ownerDocument, handlePointerDownOutside]);
+  }, [ownerDocument, handlePointerDownOutside, timeout]);
 
   return {
     // ensures we check React component tree (not just DOM tree)