@navikt/ds-react 5.12.5 → 5.14.0

package/src/layout/stack/Stack.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
-import React, { forwardRef, HTMLAttributes } from "react";
-import { OverridableComponent } from "../../util/OverridableComponent";
+import React, { HTMLAttributes, forwardRef } from "react";
+import { OverridableComponent } from "../../util/types";
 import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
 import { ResponsiveProp, SpacingScale } from "../utilities/types";
 
@@ -52,7 +52,7 @@ export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
         direction = "row",
         ...rest
       },
-      ref
+      ref,
     ) => {
       const style: React.CSSProperties = {
         ..._style,
@@ -74,5 +74,5 @@ export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
           })}
         />
       );
-    }
+    },
   );

package/src/layout/stack/VStack.tsx

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

package/src/layout/stack/stack.stories.tsx

@@ -1,6 +1,6 @@
-import React from "react";
 import type { Meta } from "@storybook/react";
-import { HStack, VStack, Spacer, Stack } from ".";
+import React from "react";
+import { HStack, Spacer, Stack, VStack } from ".";
 import { Box } from "../box";
 
 export default {

package/src/layout/utilities/css.ts

@@ -3,7 +3,7 @@ import { ResponsiveProp } from "./types";
 export function getResponsiveValue<T = string>(
   componentName: string,
   componentProp: string,
-  responsiveProp?: ResponsiveProp<T>
+  responsiveProp?: ResponsiveProp<T>,
 ) {
   if (!responsiveProp) {
     return {};
@@ -19,7 +19,7 @@ export function getResponsiveValue<T = string>(
     Object.entries(responsiveProp).map(([breakpointAlias, responsiveValue]) => [
       `--__ac-${componentName}-${componentProp}-${breakpointAlias}`,
       responsiveValue,
-    ])
+    ]),
   );
 }
 
@@ -36,7 +36,7 @@ const translateTokenStringToCSS = (
   tokenString: string,
   tokenSubgroup: string,
   tokenExceptions: string[],
-  invert: boolean
+  invert: boolean,
 ) => {
   return tokenString
     .split(" ")
@@ -67,7 +67,7 @@ export function getResponsiveProps<T extends string>(
   tokenSubgroup: string,
   responsiveProp?: ResponsiveProp<T>,
   invert = false,
-  tokenExceptions: string[] = []
+  tokenExceptions: string[] = [],
 ) {
   if (!responsiveProp) {
     return {};
@@ -81,7 +81,7 @@ export function getResponsiveProps<T extends string>(
           responsiveProp,
           tokenSubgroup,
           tokenExceptions,
-          invert
+          invert,
         ),
     };
   }
@@ -94,7 +94,7 @@ export function getResponsiveProps<T extends string>(
         aliasOrScale,
         tokenSubgroup,
         tokenExceptions,
-        invert
+        invert,
       );
   });
   return styleProps;

package/src/layout/utilities/types.ts

@@ -1,7 +1,7 @@
+import borderRadii from "@navikt/ds-tokens/src/border.json";
 import bgColors from "@navikt/ds-tokens/src/colors-bg.json";
-import surfaceColors from "@navikt/ds-tokens/src/colors-surface.json";
 import borderColors from "@navikt/ds-tokens/src/colors-border.json";
-import borderRadii from "@navikt/ds-tokens/src/border.json";
+import surfaceColors from "@navikt/ds-tokens/src/colors-surface.json";
 import shadows from "@navikt/ds-tokens/src/shadow.json";
 import Spacing from "@navikt/ds-tokens/src/spacing.json";
 

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> {
@@ -60,7 +60,7 @@ export const Link: OverridableComponent<LinkProps, HTMLAnchorElement> =
         inlineText = false,
         ...rest
       },
-      ref
+      ref,
     ) => (
       <Component
         {...rest}
@@ -70,7 +70,7 @@ export const Link: OverridableComponent<LinkProps, HTMLAnchorElement> =
           "navds-link--inline-text": inlineText,
         })}
       />
-    )
+    ),
   );
 
 export default Link;

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

@@ -1,12 +1,12 @@
-import { PlusCircleFillIcon } from "@navikt/aksel-icons";
 import React from "react";
+import { PlusCircleFillIcon } from "@navikt/aksel-icons";
 import {
   BodyLong,
   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

@@ -1,14 +1,13 @@
-import React, { forwardRef } from "react";
-
 import cl from "clsx";
-import { LinkPanelTitle, LinkPanelTitleProps } from "./LinkPanelTitle";
+import React, { forwardRef } from "react";
+import { ChevronRightIcon } from "@navikt/aksel-icons";
+import { Panel } from "../panel";
+import { OverridableComponent } from "../util/types";
 import {
   LinkPanelDescription,
   LinkPanelDescriptionProps,
 } from "./LinkPanelDescription";
-import { ChevronRightIcon } from "@navikt/aksel-icons";
-import { OverridableComponent } from "../util";
-import { Panel } from "../panel";
+import { LinkPanelTitle, LinkPanelTitleProps } from "./LinkPanelTitle";
 
 export interface LinkPanelProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -72,7 +71,7 @@ export const LinkPanelComponent: OverridableComponent<
         <ChevronRightIcon className="navds-link-panel__chevron" aria-hidden />
       </Panel>
     );
-  }
+  },
 );
 
 const LinkPanel = LinkPanelComponent as LinkPanelComponentType;

package/src/link-panel/LinkPanelDescription.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
+import React, { forwardRef } from "react";
 import { BodyLong } from "../typography";
 
 export interface LinkPanelDescriptionProps

package/src/link-panel/LinkPanelTitle.tsx

@@ -1,6 +1,6 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
-import { OverridableComponent } from "../util/OverridableComponent";
+import React, { forwardRef } from "react";
+import { OverridableComponent } from "../util/types";
 
 export interface LinkPanelTitleProps
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -18,7 +18,7 @@ export const LinkPanelTitle: OverridableComponent<
       "navds-link-panel__title",
       "navds-heading",
       "navds-heading--medium",
-      className
+      className,
     )}
   />
 ));

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";
@@ -28,7 +28,7 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
       size,
       ...rest
     },
-    ref
+    ref,
   ) => {
     const ariaId = useId();
 
@@ -73,7 +73,7 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
         </div>
       </ListContext.Provider>
     );
-  }
+  },
 ) as ListComponent;
 
 List.Item = ListItem;

package/src/list/ListItem.tsx

@@ -24,7 +24,7 @@ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
 
     if (listType === "ol" && icon) {
       console.warn(
-        "<List />: Icon prop is not supported for ordered lists. Please remove the icon prop."
+        "<List />: Icon prop is not supported for ordered lists. Please remove the icon prop.",
       );
     }
 
@@ -66,7 +66,7 @@ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
         </BodyShort>
       </li>
     );
-  }
+  },
 );
 
 ListItem.displayName = "List.Item";

package/src/list/list.stories.tsx

@@ -1,11 +1,11 @@
+import { Meta } from "@storybook/react";
+import React from "react";
 import {
   BabyWrappedIcon,
   BrailleIcon,
   HeadHeartIcon,
   RecycleIcon,
 } from "@navikt/aksel-icons";
-import { Meta } from "@storybook/react";
-import React from "react";
 import { List, VStack } from "..";
 
 export default {

package/src/loader/Loader.tsx

@@ -1,6 +1,7 @@
 import cl from "clsx";
-import React, { forwardRef, SVGProps } from "react";
-import { omit, useId } from "../util";
+import React, { SVGProps, forwardRef } from "react";
+import { omit } from "../util";
+import { useId } from "../util/hooks";
 
 export interface LoaderProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
   /**
@@ -66,7 +67,7 @@ export const Loader: LoaderType = forwardRef<SVGSVGElement, LoaderProps>(
       id,
       ...rest
     },
-    ref
+    ref,
   ) => {
     const internalId = useId();
 
@@ -81,7 +82,7 @@ export const Loader: LoaderType = forwardRef<SVGSVGElement, LoaderProps>(
           `navds-loader--${variant}`,
           {
             "navds-loader--transparent": transparent,
-          }
+          },
         )}
         focusable="false"
         viewBox="0 0 50 50"
@@ -107,7 +108,7 @@ export const Loader: LoaderType = forwardRef<SVGSVGElement, LoaderProps>(
         />
       </svg>
     );
-  }
+  },
 );
 
 export default Loader;

package/src/loader/loader.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta } from "@storybook/react";
 import React from "react";
 import { Loader, LoaderProps } from "..";
+
 export default {
   title: "ds-react/Loader",
   component: Loader,

package/src/modal/Modal.test.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from "react";
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import React, { useState } from "react";
 import { Button, Modal } from "..";
 import { BODY_CLASS } from "./ModalUtils";
 
@@ -34,7 +34,7 @@ describe("Modal", () => {
 
     fireEvent.click(screen.getByText("Close"));
     await waitFor(() =>
-      expect(document.body.classList).not.toContain(BODY_CLASS)
+      expect(document.body.classList).not.toContain(BODY_CLASS),
     );
   });
 
@@ -42,13 +42,13 @@ describe("Modal", () => {
     render(
       <Modal portal open>
         <Modal.Header />
-      </Modal>
+      </Modal>,
     );
     expect(document.body.classList).toContain(BODY_CLASS);
 
     fireEvent.click(screen.getByRole("button"));
     await waitFor(() =>
-      expect(document.body.classList).not.toContain(BODY_CLASS)
+      expect(document.body.classList).not.toContain(BODY_CLASS),
     );
   });
 });

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";
@@ -92,10 +88,11 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       onClick,
       ...rest
     }: ModalProps,
-    ref
+    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
@@ -217,7 +217,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       return null;
     }
     return component;
-  }
+  },
 ) as ModalComponent;
 
 Modal.Header = ModalHeader;

package/src/modal/ModalBody.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
+import React, { forwardRef } from "react";
 
 export interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
@@ -8,7 +8,7 @@ export interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {
 const ModalBody = forwardRef<HTMLDivElement, ModalBodyProps>(
   ({ className, ...rest }, ref) => (
     <div {...rest} ref={ref} className={cl("navds-modal__body", className)} />
-  )
+  ),
 );
 
 export default ModalBody;

package/src/modal/ModalFooter.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
+import React, { forwardRef } from "react";
 
 export interface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
@@ -8,7 +8,7 @@ export interface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {
 const ModalFooter = forwardRef<HTMLDivElement, ModalFooterProps>(
   ({ className, ...rest }, ref) => (
     <div {...rest} ref={ref} className={cl("navds-modal__footer", className)} />
-  )
+  ),
 );
 
 export default ModalFooter;

package/src/modal/ModalHeader.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef, useContext } from "react";
 import cl from "clsx";
+import React, { forwardRef, useContext } from "react";
 import { XMarkIcon } from "@navikt/aksel-icons";
 import { Button } from "../button";
 import { ModalContext } from "./ModalContext";
@@ -36,7 +36,7 @@ const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(
         {children}
       </div>
     );
-  }
+  },
 );
 
 export default ModalHeader;

package/src/modal/ModalUtils.ts

@@ -4,7 +4,7 @@ import type { ModalProps } from "./types";
 export function getCloseHandler(
   modalRef: React.RefObject<HTMLDialogElement>,
   header: ModalProps["header"],
-  onBeforeClose: ModalProps["onBeforeClose"]
+  onBeforeClose: ModalProps["onBeforeClose"],
 ) {
   if (header && header.closeButton === false) return undefined;
   if (onBeforeClose) {
@@ -17,7 +17,7 @@ export const BODY_CLASS = "navds-modal__document-body";
 
 export function useBodyScrollLock(
   modalRef: React.RefObject<HTMLDialogElement>,
-  portalNode: HTMLElement | null
+  portalNode: HTMLElement | null,
 ) {
   React.useEffect(() => {
     if (!modalRef.current || !portalNode) return; // We check both to avoid running this twice when not using portal

package/src/modal/dialog-polyfill.ts

@@ -273,7 +273,7 @@ function dialogPolyfillInfo(dialog) {
     ["DOMAttrModified", "DOMNodeRemoved", "DOMNodeRemovedFromDocument"].forEach(
       function (name) {
         dialog.addEventListener(name, delayModel);
-      }
+      },
     );
   }
   // Note that the DOM is observed inside DialogManager while any dialog
@@ -288,11 +288,11 @@ function dialogPolyfillInfo(dialog) {
   this.backdrop_.className = "backdrop";
   this.backdrop_.addEventListener(
     "mouseup",
-    this.backdropMouseEvent_.bind(this)
+    this.backdropMouseEvent_.bind(this),
   );
   this.backdrop_.addEventListener(
     "mousedown",
-    this.backdropMouseEvent_.bind(this)
+    this.backdropMouseEvent_.bind(this),
   );
   this.backdrop_.addEventListener("click", this.backdropMouseEvent_.bind(this));
 }
@@ -387,7 +387,7 @@ dialogPolyfillInfo.prototype = /** @type {HTMLDialogElement.prototype} */ {
       e.shiftKey,
       e.metaKey,
       e.button,
-      e.relatedTarget
+      e.relatedTarget,
     );
     this.dialog_.dispatchEvent(redirectedEvent);
     e.stopPropagation();
@@ -440,17 +440,17 @@ dialogPolyfillInfo.prototype = /** @type {HTMLDialogElement.prototype} */ {
   showModal: function () {
     if (this.dialog_.hasAttribute("open")) {
       throw new Error(
-        "Failed to execute 'showModal' on dialog: The element is already open, and therefore cannot be opened modally."
+        "Failed to execute 'showModal' on dialog: The element is already open, and therefore cannot be opened modally.",
       );
     }
     if (!isConnected(this.dialog_)) {
       throw new Error(
-        "Failed to execute 'showModal' on dialog: The element is not in a Document."
+        "Failed to execute 'showModal' on dialog: The element is not in a Document.",
       );
     }
     if (!dialogPolyfill.dm.pushDialog(this)) {
       throw new Error(
-        "Failed to execute 'showModal' on dialog: There are too many open modal dialogs."
+        "Failed to execute 'showModal' on dialog: There are too many open modal dialogs.",
       );
     }
 
@@ -468,7 +468,7 @@ dialogPolyfillInfo.prototype = /** @type {HTMLDialogElement.prototype} */ {
     // Insert backdrop.
     this.dialog_.parentNode.insertBefore(
       this.backdrop_,
-      this.dialog_.nextSibling
+      this.dialog_.nextSibling,
     );
 
     // Focus on whatever inside the dialog.
@@ -484,7 +484,7 @@ dialogPolyfillInfo.prototype = /** @type {HTMLDialogElement.prototype} */ {
   close: function (opt_returnValue) {
     if (!this.dialog_.hasAttribute("open")) {
       throw new Error(
-        "Failed to execute 'close' on dialog: The element does not have an 'open' attribute, and therefore cannot be closed."
+        "Failed to execute 'close' on dialog: The element does not have an 'open' attribute, and therefore cannot be closed.",
       );
     }
     this.setOpen(false);
@@ -576,7 +576,7 @@ dialogPolyfill.forceRegisterDialog = function (element) {
     console.warn(
       "This browser already supports <dialog>, the polyfill " +
         "may not work correctly",
-      element
+      element,
     );
   }
   if (element.localName !== "dialog") {
@@ -616,7 +616,7 @@ dialogPolyfill.DialogManager = function () {
       this.forwardTab_ = undefined;
       e.stopPropagation();
       checkDOM([]); // sanity-check DOM
-    }.bind(this)
+    }.bind(this),
   );
 
   this.handleKey_ = this.handleKey_.bind(this);
@@ -663,7 +663,7 @@ dialogPolyfill.DialogManager.prototype.unblockDocument = function () {
   document.documentElement.removeEventListener(
     "focus",
     this.handleFocus_,
-    true
+    true,
   );
   document.removeEventListener("keydown", this.handleKey_);
   this.mo_ && this.mo_.disconnect();
@@ -697,7 +697,7 @@ dialogPolyfill.DialogManager.prototype.updateStacking = function () {
  * @return {boolean} whether candidate is contained in top dialog
  */
 dialogPolyfill.DialogManager.prototype.containedByTopDialog_ = function (
-  candidate
+  candidate,
 ) {
   while ((candidate = findNearestDialog(candidate))) {
     for (var i = 0, dpi; (dpi = this.pendingDialogStack[i]); ++i) {
@@ -837,7 +837,7 @@ if (needPolyfill) {
   if (testForm.method !== "dialog") {
     var methodDescriptor = Object.getOwnPropertyDescriptor(
       HTMLFormElement.prototype,
-      "method"
+      "method",
     );
     if (methodDescriptor) {
       // nb. Some older iOS and older PhantomJS fail to return the descriptor. Don't do anything
@@ -860,7 +860,7 @@ if (needPolyfill) {
       Object.defineProperty(
         HTMLFormElement.prototype,
         "method",
-        methodDescriptor
+        methodDescriptor,
       );
     }
   }
@@ -906,7 +906,7 @@ if (needPolyfill) {
 
       dialogPolyfill.formSubmitter = target;
     },
-    false
+    false,
   );
 
   /**

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.
    */