@navikt/ds-react 7.31.0 → 7.32.1

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/Input/Input.context.tsx

@@ -8,14 +8,14 @@ interface InputContextValue extends FormFieldType {
   clearInput: NonNullable<ComboboxProps["onClear"]>;
   error?: ComboboxProps["error"];
   focusInput: () => void;
-  inputRef: React.RefObject<HTMLInputElement>;
+  inputRef: React.RefObject<HTMLInputElement | null>;
   value: string;
   setValue: (text: string) => void;
   onChange: (newValue: string) => void;
   searchTerm: string;
   setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
   shouldAutocomplete?: boolean;
-  toggleOpenButtonRef: React.RefObject<HTMLDivElement>;
+  toggleOpenButtonRef: React.MutableRefObject<HTMLDivElement | null>;
   hideCaret: boolean;
   setHideCaret: React.Dispatch<React.SetStateAction<boolean>>;
 }

package/src/form/useFormField.ts

@@ -116,7 +116,7 @@ export function containsReadMore(
   children: React.ReactNode,
   checkNested = true,
 ): boolean {
-  if (React.isValidElement(children)) {
+  if (React.isValidElement<{ children?: any }>(children)) {
     if (children.type === ReadMore) {
       return true;
     }

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

@@ -8,19 +8,23 @@ 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

@@ -16,7 +16,7 @@ export const coordsAreInside = (
 };
 
 export function getCloseHandler(
-  modalRef: React.RefObject<HTMLDialogElement>,
+  modalRef: React.RefObject<HTMLDialogElement | null>,
   header: ModalProps["header"],
   onBeforeClose: ModalProps["onBeforeClose"],
 ) {
@@ -31,7 +31,7 @@ export const BODY_CLASS_LEGACY = "navds-modal__document-body";
 export const BODY_CLASS = "aksel-modal__document-body";
 
 export function useBodyScrollLock(
-  modalRef: React.RefObject<HTMLDialogElement>,
+  modalRef: React.RefObject<HTMLDialogElement | null>,
   portalNode: HTMLElement | null,
   isNested: boolean,
 ) {

package/src/overlays/action-menu/ActionMenu.tsx

@@ -16,7 +16,7 @@ import { Menu, MenuPortalProps } from "../floating-menu/Menu";
 /* -------------------------------------------------------------------------- */
 type ActionMenuContextValue = {
   triggerId: string;
-  triggerRef: React.RefObject<HTMLButtonElement>;
+  triggerRef: React.RefObject<HTMLButtonElement | null>;
   contentId: string;
   open: boolean;
   onOpenChange: (open: boolean) => void;

package/src/overlays/floating/Floating.tsx

@@ -27,7 +27,7 @@ import {
   useMergeRefs,
 } from "../../util/hooks";
 import { AsChildProps } from "../../util/types";
-import { useOpenChangeComplete } from "../overlay/hooks/useOpenChangeComplete";
+import { useOpenChangeAnimationComplete } from "../overlay/hooks/useOpenChangeAnimationComplete";
 import {
   type Align,
   type Measurable,
@@ -363,7 +363,7 @@ const FloatingContent = forwardRef<HTMLDivElement, FloatingContentProps>(
       }
     }, [autoUpdateWhileMounted, enabled, floatingElements, update]);
 
-    useOpenChangeComplete({
+    useOpenChangeAnimationComplete({
       enabled: !!modalContext?.ref,
       open: enabled,
       ref: modalContext?.ref,

package/src/overlays/overlay/hooks/{useOpenChangeComplete.ts → useOpenChangeAnimationComplete.ts}

@@ -5,7 +5,7 @@ import { useAnimationsFinished } from "./useAnimationsFinished";
 import { useEventCallback } from "./useEventCallback";
 import { useLatestRef } from "./useLatestRef";
 
-interface useOpenChangeCompleteParameters {
+interface useOpenChangeAnimationCompleteParameters {
   /**
    * Enable / disable the effect. Disabled => no animation tracking / callback.
    * @default true
@@ -34,8 +34,8 @@ interface useOpenChangeCompleteParameters {
  * comparing the `open` value captured at scheduling time with the latest `open` via ref;
  * if they differ (state flipped again mid‑animation) the callback is skipped.
  */
-export function useOpenChangeComplete(
-  parameters: useOpenChangeCompleteParameters,
+export function useOpenChangeAnimationComplete(
+  parameters: useOpenChangeAnimationCompleteParameters,
 ) {
   const {
     enabled = true,

package/src/overlays/overlay/hooks/useTransitionStatus.ts

@@ -0,0 +1,145 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import ReactDOM from "react-dom";
+import { useClientLayoutEffect } from "../../../util";
+
+type TransitionStatus = "entering" | "exiting" | "idle" | undefined;
+
+/**
+ * Transition status state machine for components that animate between an
+ * `open` boolean and actual mount/unmount. Keeps the element mounted while
+ * exit animations run and introduces an optional stable `idle` phase.
+ *
+ * Adapted from MUI Base + Floating UI examples:
+ *  - Source: https://github.com/mui/base-ui/blob/6fd69008d83561dbe75ff89acf270f0fac3e0049/packages/react/src/utils/useTransitionStatus.ts
+ *  - Originally based on https://github.com/floating-ui/floating-ui/blob/7c33a3d0198a9b523d54ae2c37cedb315a309452/packages/react/src/hooks/useTransition.ts
+ *
+ * States (transitionStatus):
+ *  - "entering"  : just entered (initial frame of enter) OR re-entering to reach "idle".
+ *  - "idle"      : stable open (only when `enableIdleState === true`).
+ *  - "exiting"   : exit animation is running; element still mounted.
+ *  - undefined   : closed (unmounted) OR stable open when idle state is disabled.
+ *                   When `enableIdleState` is false we clear the label after
+ *                   the first frame so styling can rely purely on `mounted`.
+ *
+ * Distinction:
+ *  - `mounted` tells you whether to render DOM.
+ *  - `transitionStatus` tells you which phase-specific classes to apply.
+ *
+ * Frame separation: state changes that must trigger CSS transitions are
+ * scheduled with `requestAnimationFrame` so the browser sees distinct style
+ * mutations across frames (avoids missed transitions due to batching).
+ *
+ * @param open              Controls visibility lifecycle.
+ * @param enableIdleState   Insert a persistent "idle" phase after entering.
+ * @param deferExitingState  Delay entering the exit phase by one frame to allow
+ *                          measurement / layout work before applying exit styles.
+ */
+function useTransitionStatus(
+  open: boolean,
+  enableIdleState: boolean = false,
+  deferExitingState: boolean = false,
+) {
+  const [mounted, setMounted] = useState(open);
+  const [transitionStatus, setTransitionStatus] = useState<TransitionStatus>(
+    open && enableIdleState ? "idle" : undefined,
+  );
+
+  /* Opening: mount immediately and label as "entering" for the first frame. */
+  if (open && !mounted) {
+    setMounted(true);
+    setTransitionStatus("entering");
+  }
+
+  /* Closing (no defer): begin exit animation right away. */
+  if (
+    !open &&
+    mounted &&
+    transitionStatus !== "exiting" &&
+    !deferExitingState
+  ) {
+    setTransitionStatus("exiting");
+  }
+
+  /* Cleanup: after unmount post-exit ensure status returns to undefined. */
+  if (!open && !mounted && transitionStatus === "exiting") {
+    setTransitionStatus(undefined);
+  }
+
+  /* Deferred closing: provide one frame to measure / flush layout before exit styles. */
+  useClientLayoutEffect(() => {
+    if (
+      !open &&
+      mounted &&
+      transitionStatus !== "exiting" &&
+      deferExitingState
+    ) {
+      const frame = requestAnimationFrame(() => {
+        setTransitionStatus("exiting");
+      });
+
+      return () => {
+        cancelAnimationFrame(frame);
+      };
+    }
+
+    return undefined;
+  }, [open, mounted, transitionStatus, deferExitingState]);
+
+  /* Enter (no idle): hold "entering" for one frame, then clear label (stable open). */
+  useClientLayoutEffect(() => {
+    if (!open || enableIdleState) {
+      return undefined;
+    }
+
+    const frame = requestAnimationFrame(() => {
+      ReactDOM.flushSync(() => {
+        setTransitionStatus(undefined);
+      });
+    });
+
+    return () => {
+      cancelAnimationFrame(frame);
+    };
+  }, [enableIdleState, open]);
+
+  useClientLayoutEffect(() => {
+    if (!open || !enableIdleState) {
+      return undefined;
+    }
+
+    /*
+     * We can enter this state by re-opening before exiting-state was finished
+     * (open → close → open in quick succession).
+     */
+    if (open && mounted && transitionStatus !== "idle") {
+      setTransitionStatus("entering");
+    }
+
+    /**
+     * Next frame, after "entering", switch to persistent "idle" state.
+     * By delaying to the next frame we ensure any "entering" styles are
+     * applied and the transition can run.
+     */
+    const frame = requestAnimationFrame(() => {
+      setTransitionStatus("idle");
+    });
+
+    return () => {
+      cancelAnimationFrame(frame);
+    };
+  }, [enableIdleState, open, mounted, setTransitionStatus, transitionStatus]);
+
+  return useMemo(
+    () => ({
+      mounted,
+      setMounted,
+      transitionStatus,
+    }),
+    [mounted, transitionStatus],
+  );
+}
+
+export { useTransitionStatus };
+export type { TransitionStatus };

package/src/progress-bar/ProgressBar.tsx

@@ -95,7 +95,7 @@ export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
   ) => {
     const { cn } = useRenameCSS();
     const translateX = 100 - (Math.round(value) / valueMax) * 100;
-    const onTimeoutRef = useRef<() => void>();
+    const onTimeoutRef = useRef<() => void>(undefined);
     onTimeoutRef.current = simulated?.onTimeout;
     const translate = useI18n("ProgressBar");
 

package/src/read-more/ReadMore.tsx

@@ -26,11 +26,11 @@ export interface ReadMoreProps
    */
   defaultOpen?: boolean;
   /**
-   * Callback for current open-state
+   * Callback for current open-state.
    */
   onOpenChange?: (open: boolean) => void;
   /**
-   * Changes fontsize for content.
+   * Changes font size for content.
    * @default "medium"
    */
   size?: "large" | "medium" | "small";
@@ -42,14 +42,7 @@ export interface ReadMoreProps
  * @see 🏷️ {@link ReadMoreProps}
  *
  * @example
- * // Default
  * <ReadMore header="Dette regnes som helsemessige begrensninger">
- *  Med helsemessige begrensninger mener vi funksjonshemming, sykdom...
- * </ReadMore>
- *
- * @example
- * // Litt mindre versjon
- * <ReadMore size="small" header="Dette regnes som helsemessige begrensninger">
  *   Med helsemessige begrensninger mener vi funksjonshemming, sykdom...
  * </ReadMore>
  */
@@ -65,7 +58,7 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
       size = "medium",
       onOpenChange,
       ...rest
-    },
+    }: ReadMoreProps,
     ref,
   ) => {
     const { cn } = useRenameCSS();
@@ -107,7 +100,7 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
 
         <BodyLong
           as="div"
-          aria-hidden={!_open}
+          tabIndex={0}
           className={cn("navds-read-more__content", {
             "navds-read-more__content--closed": !_open,
           })}

package/src/table/AnimateHeight.tsx

@@ -73,8 +73,8 @@ const AnimateHeight: React.FC<AnimateHeightProps> = ({
   const prevHeight = useRef<Height>(height);
   const contentElement = useRef<HTMLDivElement>(null);
 
-  const animationClassesTimeoutID = useRef<Timeout>();
-  const timeoutID = useRef<Timeout>();
+  const animationClassesTimeoutID = useRef<Timeout>(undefined);
+  const timeoutID = useRef<Timeout>(undefined);
 
   const initialHeight = useRef<Height>(height);
   const initialOverflow = useRef<Overflow>("visible");

package/src/tabs/parts/tablist/useScrollButtons.ts

@@ -1,7 +1,9 @@
 import { useEffect, useMemo, useState } from "react";
 import { debounce } from "../../../util";
 
-export function useScrollButtons(listRef: React.RefObject<HTMLDivElement>) {
+export function useScrollButtons(
+  listRef: React.RefObject<HTMLDivElement | null>,
+) {
   const [displayScroll, setDisplayScroll] = useState({
     start: false,
     end: false,

package/src/util/hooks/useMergeRefs.ts

@@ -1,20 +1,20 @@
 /* https://github.com/radix-ui/primitives/blob/main/packages/react/compose-refs/src/composeRefs.tsx */
 import React from "react";
 
-type PossibleRef<T> = React.LegacyRef<T> | undefined;
+type PossibleRef<T> = React.Ref<T> | undefined;
 
 // https://github.com/gregberge/react-merge-refs
 /**
  * Use `useMergeRefs`
  * @internal
  */
-export function mergeRefs<T>(refs: PossibleRef<T>[]): React.RefCallback<T> {
-  return (value) => {
+export function mergeRefs<T>(refs: PossibleRef<T>[]) {
+  return (instance: T | null) => {
     refs.forEach((ref) => {
       if (typeof ref === "function") {
-        ref(value);
+        ref(instance);
       } else if (ref !== null && ref !== undefined) {
-        (ref as React.MutableRefObject<T | null>).current = value;
+        (ref as React.MutableRefObject<T | null>).current = instance;
       }
     });
   };

package/src/util/link-anchor/LinkAnchor.tsx

@@ -14,7 +14,7 @@ import { useMergeRefs } from "../hooks/useMergeRefs";
 import { AsChildProps } from "../types";
 
 type LinkAnchorOverlayContextProps = {
-  anchorRef: React.RefObject<HTMLAnchorElement>;
+  anchorRef: React.RefObject<HTMLAnchorElement | null>;
 };
 
 const [LinkAnchorContextProvider, useLinkAnchorContext] =

package/src/util/renderStoriesForChromatic.tsx

@@ -1,21 +1,20 @@
-import { Args, StoryObj } from "@storybook/react";
+import { Args, StoryObj } from "@storybook/react-vite";
 import React from "react";
 import { Renderer, StoryContext } from "storybook/internal/types";
 
 export function renderStoriesForChromatic(
   stories: Record<
     string,
-    | { render?: (...args: any[]) => React.ReactNode }
-    | React.FunctionComponent<void>
+    { render?: (...args: any[]) => React.ReactNode } | React.FunctionComponent
   >,
 ): StoryObj {
   return {
     render: (...args: [Args, StoryContext<Renderer, Args>]) => (
       <>
-        {Object.entries(stories).map(([storyName, story]) => (
+        {Object.entries(stories).map(([storyName, Story]) => (
           <div key={storyName}>
             <h2 className="storyheading">{storyName}</h2>
-            {typeof story === "function" ? story() : story.render?.(...args)}
+            {typeof Story === "function" ? <Story /> : Story.render?.(...args)}
           </div>
         ))}
       </>

package/cjs/overlays/overlay/hooks/useOpenChangeComplete.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useOpenChangeComplete.js","sourceRoot":"","sources":["../../../../src/overlays/overlay/hooks/useOpenChangeComplete.ts"],"names":[],"mappings":";AAAA,YAAY,CAAC;;AAoCb,sDA6BC;AA/DD,iCAAyC;AACzC,mEAAgE;AAChE,yDAAsD;AACtD,iDAA8C;AAyB9C;;;;;GAKG;AACH,SAAgB,qBAAqB,CACnC,UAA2C;IAE3C,MAAM,EACJ,OAAO,GAAG,IAAI,EACd,IAAI,EACJ,GAAG,GAAG,IAAI,EACV,UAAU,EAAE,eAAe,GAC5B,GAAG,UAAU,CAAC;IAEf,MAAM,OAAO,GAAG,IAAA,2BAAY,EAAC,IAAI,CAAC,CAAC;IACnC,MAAM,UAAU,GAAG,IAAA,mCAAgB,EAAC,eAAe,CAAC,CAAC;IACrD,MAAM,uBAAuB,GAAG,IAAA,6CAAqB,EAAC,GAAG,EAAE,IAAI,CAAC,CAAC;IAEjE,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO;QACT,CAAC;QAED;;;WAGG;QACH,uBAAuB,CAAC,GAAG,EAAE;YAC3B,IAAI,IAAI,KAAK,OAAO,CAAC,OAAO,EAAE,CAAC;gBAC7B,UAAU,EAAE,CAAC;YACf,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,uBAAuB,EAAE,OAAO,CAAC,CAAC,CAAC;AACpE,CAAC"}

package/esm/overlays/overlay/hooks/useOpenChangeComplete.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useOpenChangeComplete.js","sourceRoot":"","sources":["../../../../src/overlays/overlay/hooks/useOpenChangeComplete.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAyB9C;;;;;GAKG;AACH,MAAM,UAAU,qBAAqB,CACnC,UAA2C;IAE3C,MAAM,EACJ,OAAO,GAAG,IAAI,EACd,IAAI,EACJ,GAAG,GAAG,IAAI,EACV,UAAU,EAAE,eAAe,GAC5B,GAAG,UAAU,CAAC;IAEf,MAAM,OAAO,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACnC,MAAM,UAAU,GAAG,gBAAgB,CAAC,eAAe,CAAC,CAAC;IACrD,MAAM,uBAAuB,GAAG,qBAAqB,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;IAEjE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO;QACT,CAAC;QAED;;;WAGG;QACH,uBAAuB,CAAC,GAAG,EAAE;YAC3B,IAAI,IAAI,KAAK,OAAO,CAAC,OAAO,EAAE,CAAC;gBAC7B,UAAU,EAAE,CAAC;YACf,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,uBAAuB,EAAE,OAAO,CAAC,CAAC,CAAC;AACpE,CAAC"}