@navikt/ds-react 7.32.0 → 7.32.2

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/date/date-utils/dropdown-options.test.ts

@@ -4,19 +4,27 @@ import { getMonthOptions, getYearOptions } from "./dropdown-options";
 
 describe("getYearOptions", () => {
   test("should return undefined if navStart is undefined", () => {
-    const result = getYearOptions(undefined, new Date(), nb);
+    const result = getYearOptions({
+      navStart: undefined,
+      navEnd: new Date(),
+      locale: nb,
+    });
     expect(result).toBeUndefined();
   });
 
   test("should return undefined if navEnd is undefined", () => {
-    const result = getYearOptions(new Date(), undefined, nb);
+    const result = getYearOptions({
+      navStart: new Date(),
+      navEnd: undefined,
+      locale: nb,
+    });
     expect(result).toBeUndefined();
   });
 
   test("should return the correct year options within the interval", () => {
     const navStart = new Date(2020, 0, 1); // Januar 1, 2020
     const navEnd = new Date(2022, 11, 31); // Desember 31, 2022
-    const result = getYearOptions(navStart, navEnd, nb);
+    const result = getYearOptions({ navStart, navEnd, locale: nb });
 
     const expected = [
       { value: 2020, label: "2020", disabled: false },
@@ -30,7 +38,7 @@ describe("getYearOptions", () => {
   test("should return the correct year options for a single year", () => {
     const navStart = new Date(2021, 0, 1); // Januar 1, 2021
     const navEnd = new Date(2021, 11, 31); // Desember 31, 2021
-    const result = getYearOptions(navStart, navEnd, nb);
+    const result = getYearOptions({ navStart, navEnd, locale: nb });
 
     const expected = [{ value: 2021, label: "2021", disabled: false }];
 
@@ -40,7 +48,7 @@ describe("getYearOptions", () => {
   test("should return the correct year options when navStart and navEnd are the same date", () => {
     const navStart = new Date(2021, 0, 1); // Januar 1, 2021
     const navEnd = new Date(2021, 0, 1); // Januar 1, 2021
-    const result = getYearOptions(navStart, navEnd, nb);
+    const result = getYearOptions({ navStart, navEnd, locale: nb });
 
     const expected = [{ value: 2021, label: "2021", disabled: false }];
 
@@ -51,7 +59,12 @@ describe("getYearOptions", () => {
 describe("getMonthOptions", () => {
   test("should return the correct month options for the given year", () => {
     const displayMonth = new Date(2021, 0, 1); // Januar 1, 2021
-    const result = getMonthOptions(displayMonth, undefined, undefined, nb);
+    const result = getMonthOptions({
+      displayMonth,
+      navStart: undefined,
+      navEnd: undefined,
+      locale: nb,
+    });
 
     const expected = [
       { value: 0, label: "januar", disabled: false },
@@ -74,7 +87,12 @@ describe("getMonthOptions", () => {
   test("should disable months before navStart", () => {
     const displayMonth = new Date(2021, 0, 1); // Januar 1, 2021
     const navStart = new Date(2021, 5, 1); // Juni 1, 2021
-    const result = getMonthOptions(displayMonth, navStart, undefined, nb);
+    const result = getMonthOptions({
+      displayMonth,
+      navStart,
+      navEnd: undefined,
+      locale: nb,
+    });
 
     const expected = [
       { value: 0, label: "januar", disabled: true },
@@ -97,7 +115,12 @@ describe("getMonthOptions", () => {
   test("should disable months after navEnd", () => {
     const displayMonth = new Date(2021, 0, 1); // Januar 1, 2021
     const navEnd = new Date(2021, 5, 1); // Juni 1, 2021
-    const result = getMonthOptions(displayMonth, undefined, navEnd, nb);
+    const result = getMonthOptions({
+      displayMonth,
+      navStart: undefined,
+      navEnd,
+      locale: nb,
+    });
 
     const expected = [
       { value: 0, label: "januar", disabled: false },
@@ -121,7 +144,12 @@ describe("getMonthOptions", () => {
     const displayMonth = new Date(2021, 0, 1); // Januar 1, 2021
     const navStart = new Date(2021, 3, 1); // April 1, 2021
     const navEnd = new Date(2021, 8, 1); // September 1, 2021
-    const result = getMonthOptions(displayMonth, navStart, navEnd, nb);
+    const result = getMonthOptions({
+      displayMonth,
+      navStart,
+      navEnd,
+      locale: nb,
+    });
 
     const expected = [
       { value: 0, label: "januar", disabled: true },

package/src/date/date-utils/dropdown-options.ts

@@ -13,12 +13,17 @@ import {
 } from "date-fns";
 
 /** Return the months to show in the dropdown. */
-export function getMonthOptions(
-  displayMonth: Date,
-  navStart: Date | undefined,
-  navEnd: Date | undefined,
-  locale: Locale,
-):
+export function getMonthOptions({
+  displayMonth,
+  navStart,
+  navEnd,
+  locale,
+}: {
+  displayMonth: Date;
+  navStart: Date | undefined;
+  navEnd: Date | undefined;
+  locale: Locale;
+}):
   | {
       value: number;
       label: string;
@@ -31,7 +36,9 @@ export function getMonthOptions(
   });
 
   const options = months.map((month) => {
-    const label = format(month, "LLLL", { locale });
+    const label = format(month, "LLLL", {
+      locale,
+    }).replace(".", "");
     const value = getMonth(month);
     const disabled =
       (navStart && month < startOfMonth(navStart)) ||
@@ -44,11 +51,15 @@ export function getMonthOptions(
 }
 
 /** Return the years to show in the dropdown. */
-export function getYearOptions(
-  navStart: Date | undefined,
-  navEnd: Date | undefined,
-  locale: Locale,
-):
+export function getYearOptions({
+  navStart,
+  navEnd,
+  locale,
+}: {
+  navStart: Date | undefined;
+  navEnd: Date | undefined;
+  locale: Locale;
+}):
   | {
       value: number;
       label: string;

package/src/date/datepicker/parts/DatePicker.Months.tsx

@@ -69,8 +69,14 @@ const DatePickerMonths = ({
     today: dayPickerProps.today,
   });
 
-  const months = getMonthOptions(calendarMonth.date, navStart, navEnd, locale);
-  const dropdownYears = getYearOptions(navStart, navEnd, locale);
+  const months = getMonthOptions({
+    displayMonth: calendarMonth.date,
+    navStart,
+    navEnd,
+    locale,
+  });
+
+  const dropdownYears = getYearOptions({ navStart, navEnd, locale });
 
   return (
     <div {...omit(rest, ["displayIndex"])}>

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/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/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,20 +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]);
 }