@navikt/ds-react 5.13.0 → 5.15.0

package/src/help-text/help-text.stories.tsx

@@ -1,63 +1,57 @@
+import { Meta, StoryFn, StoryObj } from "@storybook/react";
 import React, { useEffect, useRef } from "react";
 import { BodyLong, Heading, HelpText } from "..";
 
-export default {
+const meta: Meta<typeof HelpText> = {
   title: "ds-react/HelpText",
   component: HelpText,
   parameters: {
     chromatic: { delay: 300 },
   },
+};
+export default meta;
+
+export const Default: StoryObj<typeof HelpText> = {
+  render: (props) => (
+    <HelpText {...props}>Id ullamco excepteur elit fugiat labore.</HelpText>
+  ),
+
+  args: {
+    title: "Show tooltip",
+  },
   argTypes: {
     placement: {
-      control: {
-        type: "radio",
-        options: [
-          "top",
-          "bottom",
-          "right",
-          "left",
-          "top-start",
-          "top-end",
-          "bottom-start",
-          "bottom-end",
-          "right-start",
-          "right-end",
-          "left-start",
-          "left-end",
-        ],
-      },
+      control: { type: "radio" },
+      options: [
+        "top",
+        "bottom",
+        "right",
+        "left",
+        "top-start",
+        "top-end",
+        "bottom-start",
+        "bottom-end",
+        "right-start",
+        "right-end",
+        "left-start",
+        "left-end",
+      ],
     },
     strategy: {
-      control: {
-        type: "radio",
-        options: ["fixed", "absolute"],
-      },
+      control: { type: "radio" },
+      options: ["fixed", "absolute"],
     },
   },
 };
 
-export const Default = {
-  render: (props: any) => {
-    return (
-      <HelpText title="show tooltip" strategy="fixed" {...props}>
-        Id ullamco excepteur elit fugiat labore.
-      </HelpText>
-    );
-  },
-
-  args: {
-    title: "show tooltip",
-  },
-};
-
-export const Open = () => {
+export const Open: StoryFn = () => {
   const ref = useRef<HTMLButtonElement | null>(null);
   useEffect(() => {
     ref.current && ref.current.click();
   }, []);
 
   return (
-    <HelpText ref={ref} title="show tooltip" strategy="fixed">
+    <HelpText ref={ref} title="Show tooltip" strategy="fixed">
       Incididunt laborum eiusmod ullamco id aliquip officia ex irure aliqua
       laboris id ea do nisi. Ex esse ad duis culpa non aliquip exercitation eu
       culpa cupidatat nisi. Deserunt voluptate consectetur cillum elit qui ad
@@ -66,35 +60,31 @@ export const Open = () => {
   );
 };
 
-export const WrapperClassName = {
-  render: () => {
-    return (
-      <div>
-        <BodyLong spacing>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
-          perspiciatis vero voluptatum, asperiores cumque, deserunt accusantium
-          ullam ipsa accusamus officia cupiditate quae unde esse culpa, ratione
-          ab quam ea quas?
-        </BodyLong>
+export const WrapperClassName: StoryFn = () => (
+  <div>
+    <BodyLong spacing>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
+      perspiciatis vero voluptatum, asperiores cumque, deserunt accusantium
+      ullam ipsa accusamus officia cupiditate quae unde esse culpa, ratione ab
+      quam ea quas?
+    </BodyLong>
 
-        <Heading level="2" size="medium">
-          67 år og 1 måneder øklasdjkl askdak døkasøk daøkdkølasøkld asølkdøka
-          <HelpText wrapperClassName="testClass">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
-            perspiciatis vero voluptatum, asperiores cumque, deserunt
-            accusantium ullam ipsa accusamus officia cupiditate quae unde esse
-            culpa, ratione ab quam ea quas?
-          </HelpText>
-          <style>{`.testClass {display: inline-block; margin-left: 0.5rem; vertical-align: middle;}`}</style>
-        </Heading>
+    <Heading level="2" size="medium">
+      67 år og 1 måneder øklasdjkl askdak døkasøk daøkdkølasøkld asølkdøka
+      <HelpText wrapperClassName="testClass">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
+        perspiciatis vero voluptatum, asperiores cumque, deserunt accusantium
+        ullam ipsa accusamus officia cupiditate quae unde esse culpa, ratione ab
+        quam ea quas?
+      </HelpText>
+      <style>{`.testClass {display: inline-block; margin-left: 0.5rem; vertical-align: middle;}`}</style>
+    </Heading>
 
-        <BodyLong spacing>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
-          perspiciatis vero voluptatum, asperiores cumque, deserunt accusantium
-          ullam ipsa accusamus officia cupiditate quae unde esse culpa, ratione
-          ab quam ea quas?
-        </BodyLong>
-      </div>
-    );
-  },
-};
+    <BodyLong spacing>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
+      perspiciatis vero voluptatum, asperiores cumque, deserunt accusantium
+      ullam ipsa accusamus officia cupiditate quae unde esse culpa, ratione ab
+      quam ea quas?
+    </BodyLong>
+  </div>
+);

package/src/internal-header/InternalHeader.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
-import { OverridableComponent } from "../util/OverridableComponent";
+import { OverridableComponent } from "../util/types";
 import InternalHeaderButton, {
   InternalHeaderButtonProps,
 } from "./InternalHeaderButton";

package/src/internal-header/InternalHeaderButton.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../util/OverridableComponent";
+import { OverridableComponent } from "../util/types";
 
 export interface InternalHeaderButtonProps
   extends React.AnchorHTMLAttributes<HTMLButtonElement> {

package/src/internal-header/InternalHeaderTitle.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../util/OverridableComponent";
+import { OverridableComponent } from "../util/types";
 
 export interface InternalHeaderTitleProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {

package/src/internal-header/InternalHeaderUserButton.tsx

@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { forwardRef } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
 import { BodyShort, Detail } from "../typography";
-import { OverridableComponent } from "../util/OverridableComponent";
+import { OverridableComponent } from "../util/types";
 import InternalHeaderButton from "./InternalHeaderButton";
 
 export interface InternalHeaderUserButtonProps

package/src/layout/box/Box.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../../util/OverridableComponent";
+import { OverridableComponent } from "../../util/types";
 import { getResponsiveProps } from "../utilities/css";
 import {
   BackgroundToken,

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

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../../../util/OverridableComponent";
+import { OverridableComponent } from "../../../util/types";
 
 export const widths = ["text", "md", "lg", "xl", "2xl"] as const;
 

package/src/layout/stack/HStack.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../../util/OverridableComponent";
+import { OverridableComponent } from "../../util/types";
 import { Stack, StackProps } from "./Stack";
 
 export type HStackProps = Omit<StackProps, "direction">;

package/src/layout/stack/Stack.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
-import { OverridableComponent } from "../../util/OverridableComponent";
+import { OverridableComponent } from "../../util/types";
 import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
 import { ResponsiveProp, SpacingScale } from "../utilities/types";
 

package/src/layout/stack/VStack.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../../util/OverridableComponent";
+import { OverridableComponent } from "../../util/types";
 import { Stack, StackProps } from "./Stack";
 
 export type VStackProps = Omit<StackProps, "direction" | "wrap">;

package/src/link/Link.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../util/OverridableComponent";
+import { OverridableComponent } from "../util/types";
 
 export interface LinkProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {

package/src/link/{link.stories.tsx → stories/link.stories.tsx}

@@ -5,8 +5,8 @@ import {
   Alert as DsAlert,
   ConfirmationPanel as DsConfirmationPanel,
   Link,
-} from "..";
-import { RandomIcon } from "../util/RandomIcon";
+} from "../..";
+import { RandomIcon } from "./RandomIcon";
 
 export default {
   title: "ds-react/Link",

package/src/link-panel/LinkPanel.tsx

@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { forwardRef } from "react";
 import { ChevronRightIcon } from "@navikt/aksel-icons";
 import { Panel } from "../panel";
-import { OverridableComponent } from "../util";
+import { OverridableComponent } from "../util/types";
 import {
   LinkPanelDescription,
   LinkPanelDescriptionProps,

package/src/link-panel/LinkPanelTitle.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../util/OverridableComponent";
+import { OverridableComponent } from "../util/types";
 
 export interface LinkPanelTitleProps
   extends React.HTMLAttributes<HTMLDivElement> {

package/src/list/List.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { BodyShort, Heading } from "../typography";
-import { useId } from "../util/useId";
+import { useId } from "../util/hooks";
 import { ListItem } from "./ListItem";
 import { ListContext } from "./context";
 import { ListProps } from "./types";

package/src/loader/Loader.tsx

@@ -1,6 +1,7 @@
 import cl from "clsx";
 import React, { SVGProps, forwardRef } from "react";
-import { omit, useId } from "../util";
+import { omit } from "../util";
+import { useId } from "../util/hooks";
 
 export interface LoaderProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
   /**

package/src/modal/Modal.tsx

@@ -1,17 +1,13 @@
 import { useFloatingPortalNode } from "@floating-ui/react";
 import cl from "clsx";
-import React, {
-  forwardRef,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-} from "react";
+import React, { forwardRef, useContext, useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 import { DateContext } from "../date/context";
 import { useProvider } from "../provider";
 import { Detail, Heading } from "../typography";
-import { mergeRefs, useId } from "../util";
+import { composeEventHandlers } from "../util/composeEventHandlers";
+import { useId } from "../util/hooks";
+import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import ModalBody from "./ModalBody";
 import { ModalContext } from "./ModalContext";
 import ModalFooter from "./ModalFooter";
@@ -95,7 +91,8 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
     ref,
   ) => {
     const modalRef = useRef<HTMLDialogElement>(null);
-    const mergedRef = useMemo(() => mergeRefs([modalRef, ref]), [ref]);
+    const mergedRef = useMergeRefs(modalRef, ref);
+
     const ariaLabelId = useId();
     const rootElement = useProvider()?.rootElement;
     const portalNode = useFloatingPortalNode({ root: rootElement });
@@ -149,25 +146,28 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       ...(!isWidthPreset ? { width } : {}),
     };
 
-    const mergedOnCancel: React.DialogHTMLAttributes<HTMLDialogElement>["onCancel"] =
-      (event) => {
-        if (onBeforeClose && onBeforeClose() === false) {
-          event.preventDefault();
-        } else if (onCancel) onCancel(event);
-      };
-
-    const mergedOnClick =
-      closeOnBackdropClick && !needPolyfill // closeOnBackdropClick has issues on polyfill when nesting modals (DatePicker)
-        ? (event: React.MouseEvent<HTMLDialogElement>) => {
-            onClick && onClick(event);
-            if (
-              event.target === modalRef.current &&
-              (!onBeforeClose || onBeforeClose() !== false)
-            ) {
-              modalRef.current.close();
-            }
-          }
-        : onClick;
+    /**
+     * @note `closeOnBackdropClick` has issues on polyfill when nesting modals (DatePicker)
+     */
+    const handleModalClick = (event: React.MouseEvent<HTMLDialogElement>) => {
+      if (
+        closeOnBackdropClick &&
+        !needPolyfill &&
+        event.target === modalRef.current &&
+        (!onBeforeClose || onBeforeClose() !== false)
+      ) {
+        modalRef.current.close();
+      }
+    };
+
+    /**
+     * @note onCancel fires when you press `Esc`
+     */
+    const handleModalCancel = (
+      event: React.SyntheticEvent<HTMLDialogElement, Event>,
+    ) => {
+      onBeforeClose && onBeforeClose() === false && event.preventDefault();
+    };
 
     const mergedAriaLabelledBy =
       !ariaLabelledby && !rest["aria-label"] && header
@@ -181,8 +181,8 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
         ref={mergedRef}
         className={mergedClassName}
         style={mergedStyle}
-        onCancel={mergedOnCancel} // FYI: onCancel fires when you press Esc
-        onClick={mergedOnClick}
+        onCancel={composeEventHandlers(onCancel, handleModalCancel)}
+        onClick={composeEventHandlers(onClick, handleModalClick)}
         aria-labelledby={mergedAriaLabelledBy}
       >
         <ModalContext.Provider

package/src/modal/dialog-polyfill.ts

@@ -598,7 +598,7 @@ dialogPolyfill.registerDialog = function (element) {
  * @constructor
  */
 dialogPolyfill.DialogManager = function () {
-  /** @type {!Array<!dialogPolyfillInfo>} */
+  /** @type {!dialogPolyfillInfo[]} */
   this.pendingDialogStack = [];
 
   var checkDOM = this.checkDOM_.bind(this);
@@ -769,7 +769,7 @@ dialogPolyfill.DialogManager.prototype.handleKey_ = function (event) {
  * Finds and downgrades any known modal dialogs that are no longer displayed. Dialogs that are
  * removed and immediately readded don't stay modal, they become normal.
  *
- * @param {!Array<!HTMLDialogElement>} removed that have definitely been removed
+ * @param {!HTMLDialogElement[]} removed that have definitely been removed
  */
 dialogPolyfill.DialogManager.prototype.checkDOM_ = function (removed) {
   // This operates on a clone because it may cause it to change. Each change also calls

package/src/modal/types.ts

@@ -41,7 +41,7 @@ export interface ModalProps
    */
   onBeforeClose?: () => boolean | void;
   /**
-   * *Sometimes** called when the user presses the Esc key, unless you return `false` in `onBeforeClose()`.
+   * *Sometimes** called when the user presses the Esc key.
    * @warning *Some browsers does not always trigger this event. Chrome only triggers it if you have
    *  interacted with the modal, and will not trigger it a second time if you press Esc twice in a row.
    */

package/src/pagination/PaginationItem.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { Button, ButtonProps } from "../button";
-import { OverridableComponent } from "../util";
+import { OverridableComponent } from "../util/types";
 
 export interface PaginationItemProps extends ButtonProps {
   children: React.ReactNode;

package/src/panel/Panel.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../util/OverridableComponent";
+import { OverridableComponent } from "../util/types";
 
 export interface PanelProps extends React.HTMLAttributes<HTMLElement> {
   /**

package/src/popover/Popover.tsx

@@ -15,12 +15,12 @@ import React, {
   forwardRef,
   useCallback,
   useContext,
-  useMemo,
   useRef,
 } from "react";
 import { DateContext } from "../date/context";
 import { ModalContext } from "../modal/ModalContext";
-import { mergeRefs, useClientLayoutEffect, useEventListener } from "../util";
+import { useClientLayoutEffect, useEventListener } from "../util/hooks";
+import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import PopoverContent, { PopoverContentType } from "./PopoverContent";
 
 export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
@@ -41,7 +41,7 @@ export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
    */
   onClose: () => void;
   /**
-   * Orientation for popover
+   * Default orientation of popover
    * @note Try to keep general usage to "top", "bottom", "left", "right"
    * @default "top"
    */
@@ -163,10 +163,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       refs.setReference(anchorEl);
     }, [anchorEl]);
 
-    const floatingRef = useMemo(
-      () => mergeRefs([refs.setFloating, ref]),
-      [refs.setFloating, ref],
-    );
+    const floatingRef = useMergeRefs(refs.setFloating, ref);
 
     useClientLayoutEffect(() => {
       if (!refs.reference.current || !refs.floating.current || !open) return;

package/src/read-more/ReadMore.tsx

@@ -2,6 +2,7 @@ import cl from "clsx";
 import React, { forwardRef } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
 import { BodyLong } from "../typography";
+import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useControllableState } from "../util/hooks/useControllableState";
 
 export interface ReadMoreProps
@@ -89,10 +90,7 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
           className={cl("navds-read-more__button", "navds-body-short", {
             "navds-body-short--small": size === "small",
           })}
-          onClick={(e) => {
-            _setOpen((x) => !x);
-            onClick?.(e);
-          }}
+          onClick={composeEventHandlers(onClick, () => _setOpen((x) => !x))}
           aria-expanded={_open}
         >
           <ChevronDownIcon

package/src/stepper/Step.tsx

@@ -1,7 +1,8 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { Label } from "../typography";
-import { OverridableComponent } from "../util";
+import { composeEventHandlers } from "../util/composeEventHandlers";
+import { OverridableComponent } from "../util/types";
 import { StepperContext } from "./context";
 
 export interface StepperStepProps
@@ -56,6 +57,7 @@ export const Step: OverridableComponent<StepperStepProps, HTMLAnchorElement> =
         unsafe_index = 0,
         completed = false,
         interactive,
+        onClick,
         ...rest
       },
       ref,
@@ -71,6 +73,10 @@ export const Step: OverridableComponent<StepperStepProps, HTMLAnchorElement> =
 
       const Comp = isInteractive ? Component : "div";
 
+      const handleStepClick = () => {
+        isInteractive && context.onStepChange(unsafe_index + 1);
+      };
+
       return (
         <Comp
           {...rest}
@@ -82,10 +88,7 @@ export const Step: OverridableComponent<StepperStepProps, HTMLAnchorElement> =
             "navds-stepper__step--non-interactive": !isInteractive,
             "navds-stepper__step--completed": completed,
           })}
-          onClick={(e) => {
-            isInteractive && context.onStepChange(unsafe_index + 1);
-            rest?.onClick?.(e);
-          }}
+          onClick={composeEventHandlers(onClick, handleStepClick)}
         >
           {completed ? (
             <span className="navds-stepper__circle navds-stepper__circle--success">

package/src/{util → table}/AnimateHeight.tsx

@@ -9,6 +9,10 @@ type Overflow = "auto" | "visible" | "hidden" | undefined;
 
 // ------------------ Helpers
 
+const prefersReducedMotion = globalThis?.matchMedia
+  ? globalThis.matchMedia("(prefers-reduced-motion: reduce)").matches
+  : false;
+
 function isNumber(n: string) {
   const number = parseFloat(n);
   return !isNaN(number) && isFinite(number);
@@ -70,15 +74,7 @@ const AnimateHeight: React.FC<AnimateHeightProps> = ({
   const animationClassesTimeoutID = useRef<Timeout>();
   const timeoutID = useRef<Timeout>();
 
-  const isBrowser = typeof window !== "undefined";
-
-  const prefersReducedMotion = useRef<boolean>(
-    isBrowser && window.matchMedia
-      ? window.matchMedia("(prefers-reduced-motion)").matches
-      : false,
-  );
-
-  const duration = prefersReducedMotion.current ? 0 : userDuration;
+  const duration = prefersReducedMotion ? 0 : userDuration;
 
   let initHeight: Height = height;
   let initOverflow: Overflow = "visible";

package/src/table/DataCell.tsx

@@ -9,6 +9,10 @@ export interface DataCellProps
    * @default "left"
    */
   align?: "left" | "center" | "right";
+  /**
+   * Adjusts font-size
+   */
+  textSize?: "medium" | "small";
 }
 
 export interface DataCellType
@@ -17,7 +21,7 @@ export interface DataCellType
   > {}
 
 export const DataCell: DataCellType = forwardRef(
-  ({ className, children = "", align, ...rest }, ref) => {
+  ({ className, children = "", align, textSize, ...rest }, ref) => {
     return (
       <BodyShort
         as="td"
@@ -25,6 +29,7 @@ export const DataCell: DataCellType = forwardRef(
         className={cl("navds-table__data-cell", className, {
           [`navds-table__data-cell--align-${align}`]: align,
         })}
+        size={textSize}
         {...rest}
       >
         {children}

package/src/table/ExpandableRow.tsx

@@ -1,9 +1,10 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
-import { useId } from "../util";
-import AnimateHeight from "../util/AnimateHeight";
+import { composeEventHandlers } from "../util/composeEventHandlers";
+import { useId } from "../util/hooks";
 import { useControllableState } from "../util/hooks/useControllableState";
+import AnimateHeight from "./AnimateHeight";
 import DataCell from "./DataCell";
 import Row, { RowProps } from "./Row";
 
@@ -66,6 +67,7 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
       expansionDisabled = false,
       expandOnRowClick = false,
       colSpan = 999,
+      onClick,
       ...rest
     },
     ref,
@@ -86,6 +88,12 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
     const onRowClick = (e) =>
       !isInteractiveTarget(e.target) && expansionHandler(e);
 
+    const handleRowClick = (
+      e: React.MouseEvent<HTMLTableRowElement, MouseEvent>,
+    ) => {
+      !expansionDisabled && expandOnRowClick && onRowClick(e);
+    };
+
     return (
       <>
         <Row
@@ -97,10 +105,7 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
               expansionDisabled,
             "navds-table__expandable-row--clickable": expandOnRowClick,
           })}
-          onClick={(e) => {
-            !expansionDisabled && expandOnRowClick && onRowClick(e);
-            rest?.onClick?.(e);
-          }}
+          onClick={composeEventHandlers(onClick, handleRowClick)}
         >
           {togglePlacement === "right" && children}
           <DataCell