@navikt/ds-react 5.12.4 → 5.13.0

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

@@ -92,7 +92,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       onClick,
       ...rest
     }: ModalProps,
-    ref
+    ref,
   ) => {
     const modalRef = useRef<HTMLDialogElement>(null);
     const mergedRef = useMemo(() => mergeRefs([modalRef, ref]), [ref]);
@@ -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/pagination/Pagination.tsx

@@ -1,6 +1,5 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-
 import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
 import { BodyShort } from "../typography";
 import PaginationItem, {
@@ -72,7 +71,7 @@ export const getSteps = ({
 
   const siblingsStart = Math.max(
     Math.min(page - siblingCount, count - boundaryCount - siblingCount * 2 - 1),
-    boundaryCount + 2
+    boundaryCount + 2,
   );
   const siblingsEnd = siblingsStart + siblingCount * 2;
 
@@ -122,7 +121,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
       ),
       ...rest
     },
-    ref
+    ref,
   ) => {
     if (page < 1) {
       console.error("page cannot be less than 1");
@@ -148,7 +147,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
         className={cl(
           "navds-pagination",
           `navds-pagination--${size}`,
-          className
+          className,
         )}
       >
         <ul className="navds-pagination__list">
@@ -204,7 +203,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
                   </Item>
                 </li>
               );
-            }
+            },
           )}
           <li>
             <Item
@@ -239,7 +238,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
         </ul>
       </nav>
     );
-  }
+  },
 ) as PaginationType;
 
 Pagination.Item = PaginationItem;

package/src/pagination/PaginationItem.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
+import React, { forwardRef } from "react";
 import { Button, ButtonProps } from "../button";
 import { OverridableComponent } from "../util";
 
@@ -35,7 +35,7 @@ export const Item: PaginationItemType = forwardRef(
       className,
       ...rest
     },
-    ref
+    ref,
   ) => {
     return (
       <Button
@@ -52,7 +52,7 @@ export const Item: PaginationItemType = forwardRef(
         {children}
       </Button>
     );
-  }
+  },
 );
 
 export default Item;

package/src/pagination/steps.test.ts

@@ -5,7 +5,7 @@ describe("getSteps", () => {
   it("lists all pages when count is <= 7", () => {
     const count = faker.datatype.number({ min: 1, max: 7 });
     expect(getSteps({ page: 1, count })).toEqual(
-      Array.from({ length: count }, (_, i) => i + 1)
+      Array.from({ length: count }, (_, i) => i + 1),
     );
   });
 
@@ -16,7 +16,7 @@ describe("getSteps", () => {
       getSteps({
         page,
         count,
-      })
+      }),
     ).toEqual([1, 2, 3, 4, 5, "ellipsis", count]);
   });
 
@@ -27,7 +27,7 @@ describe("getSteps", () => {
       getSteps({
         page,
         count,
-      })
+      }),
     ).toEqual([
       1,
       "ellipsis",
@@ -46,7 +46,7 @@ describe("getSteps", () => {
       getSteps({
         page,
         count,
-      })
+      }),
     ).toEqual([1, "ellipsis", page - 1, page, page + 1, "ellipsis", count]);
   });
 
@@ -58,7 +58,7 @@ describe("getSteps", () => {
         page,
         count,
         siblingCount: 0,
-      })
+      }),
     ).toEqual([1, "ellipsis", page, "ellipsis", count]);
   });
 
@@ -70,7 +70,7 @@ describe("getSteps", () => {
         page,
         count,
         siblingCount: 2,
-      })
+      }),
     ).toEqual([
       1,
       "ellipsis",
@@ -92,7 +92,7 @@ describe("getSteps", () => {
         page,
         count,
         boundaryCount: 0,
-      })
+      }),
     ).toEqual(["ellipsis", page - 1, page, page + 1, "ellipsis"]);
   });
 
@@ -104,7 +104,7 @@ describe("getSteps", () => {
         page,
         count,
         boundaryCount: 2,
-      })
+      }),
     ).toEqual([
       1,
       2,

package/src/panel/Panel.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
+import React, { forwardRef } from "react";
 import { OverridableComponent } from "../util/OverridableComponent";
 
 export interface PanelProps extends React.HTMLAttributes<HTMLElement> {
@@ -38,7 +38,7 @@ export type PanelType = OverridableComponent<PanelProps, HTMLElement>;
 export const Panel: PanelType = forwardRef(
   (
     { children, className, border = false, as: Component = "div", ...rest },
-    ref
+    ref,
   ) => {
     return (
       <Component
@@ -51,7 +51,7 @@ export const Panel: PanelType = forwardRef(
         {children}
       </Component>
     );
-  }
+  },
 );
 
 export default Panel;

package/src/panel/panel.stories.tsx

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

package/src/popover/Popover.test.tsx

@@ -13,7 +13,7 @@ describe("Popover", () => {
         data-testid="popover-id"
       >
         <div />
-      </Popover>
+      </Popover>,
     );
 
     expect(screen.getByTestId("popover-id")).toBeVisible();
@@ -28,7 +28,7 @@ describe("Popover", () => {
         data-testid="popover-id"
       >
         <div />
-      </Popover>
+      </Popover>,
     );
 
     expect(screen.getByTestId("popover-id")).not.toBeVisible();
@@ -47,7 +47,7 @@ describe("Popover", () => {
           <div />
         </Popover>
         <a href="/#">link</a>
-      </div>
+      </div>,
     );
 
     await act(async () => {
@@ -70,14 +70,14 @@ describe("Popover", () => {
         >
           <div />
         </Popover>
-      </div>
+      </div>,
     );
 
     expect(screen.getByTestId("popover-id")).toBeVisible();
     fireEvent.keyDown(
       // Should work anywhere
       container,
-      { key: "Escape" }
+      { key: "Escape" },
     );
 
     expect(fn).toHaveBeenCalled();
@@ -95,7 +95,7 @@ describe("Popover", () => {
         >
           <div />
         </Popover>
-      </div>
+      </div>,
     );
 
     await act(async () => {
@@ -118,7 +118,7 @@ describe("Popover", () => {
         >
           <div />
         </Popover>
-      </div>
+      </div>,
     );
 
     expect(screen.getByTestId("popover-id")).toBeVisible();

package/src/popover/Popover.tsx

@@ -123,7 +123,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       flip: _flip = true,
       ...rest
     },
-    ref
+    ref,
   ) => {
     const arrowRef = useRef<HTMLDivElement | null>(null);
     const isInModal = useContext(ModalContext) !== null;
@@ -165,7 +165,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
 
     const floatingRef = useMemo(
       () => mergeRefs([refs.setFloating, ref]),
-      [refs.setFloating, ref]
+      [refs.setFloating, ref],
     );
 
     useClientLayoutEffect(() => {
@@ -173,7 +173,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       const cleanup = autoUpdate(
         refs.reference.current,
         refs.floating.current,
-        update
+        update,
       );
       return () => cleanup();
     }, [refs.floating, refs.reference, update, open, anchorEl]);
@@ -184,16 +184,16 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
         (e: FocusEvent) => {
           if (
             e.target instanceof HTMLElement &&
-            ![anchorEl, refs.floating.current].some((element) =>
-              element?.contains(e.target as Node)
+            ![anchorEl, refs.floating.current].some(
+              (element) => element?.contains(e.target as Node),
             ) &&
             !e.target.contains(refs.floating.current)
           ) {
             open && onClose();
           }
         },
-        [anchorEl, refs, open, onClose]
-      )
+        [anchorEl, refs, open, onClose],
+      ),
     );
 
     const staticSide = {
@@ -237,7 +237,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
         )}
       </div>
     );
-  }
+  },
 ) as PopoverComponent;
 
 Popover.Content = PopoverContent;

package/src/popover/PopoverContent.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
+import React, { forwardRef } from "react";
 
 export interface PopoverContentProps
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -17,7 +17,7 @@ const PopoverContent: PopoverContentType = forwardRef(
       ref={ref}
       className={cl("navds-popover__content", className)}
     />
-  )
+  ),
 );
 
 export default PopoverContent;

package/src/provider/Provider.tsx

@@ -8,7 +8,7 @@ export interface ProviderContextType {
 }
 
 export const ProviderContext = createContext<ProviderContextType | undefined>(
-  undefined
+  undefined,
 );
 
 export interface ProviderProps {