@navikt/ds-react 5.12.5 → 5.14.0

package/src/accordion/Accordion.tsx

@@ -1,9 +1,9 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import AccordionItem, { AccordionItemProps } from "./AccordionItem";
 import AccordionContent, { AccordionContentProps } from "./AccordionContent";
-import AccordionHeader, { AccordionHeaderProps } from "./AccordionHeader";
 import { AccordionContext } from "./AccordionContext";
+import AccordionHeader, { AccordionHeaderProps } from "./AccordionHeader";
+import AccordionItem, { AccordionItemProps } from "./AccordionItem";
 
 interface AccordionComponent
   extends React.ForwardRefExoticComponent<
@@ -83,7 +83,7 @@ export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
       indent = true,
       ...rest
     },
-    ref
+    ref,
   ) => {
     return (
       <AccordionContext.Provider
@@ -100,13 +100,13 @@ export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
             "navds-accordion",
             className,
             `navds-accordion--${size}`,
-            { "navds-accordion--indent": indent }
+            { "navds-accordion--indent": indent },
           )}
           ref={ref}
         />
       </AccordionContext.Provider>
     );
-  }
+  },
 ) as AccordionComponent;
 
 Accordion.Header = AccordionHeader;

package/src/accordion/AccordionContent.tsx

@@ -17,7 +17,7 @@ const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(
 
     if (context === null) {
       console.error(
-        "<Accordion.Content> has to be used within an <Accordion.Item>"
+        "<Accordion.Content> has to be used within an <Accordion.Item>",
       );
       return null;
     }
@@ -32,7 +32,7 @@ const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(
           {
             "navds-accordion__content--closed": !context.open,
           },
-          className
+          className,
         )}
         aria-hidden={
           !context.open || undefined
@@ -41,7 +41,7 @@ const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(
         {children}
       </BodyLong>
     );
-  }
+  },
 );
 
 export default AccordionContent;

package/src/accordion/AccordionHeader.tsx

@@ -1,7 +1,8 @@
-import { ChevronDownIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
+import { ChevronDownIcon } from "@navikt/aksel-icons";
 import { Heading } from "../typography";
+import { composeEventHandlers } from "../util/composeEventHandlers";
 import { AccordionContext } from "./AccordionContext";
 import { AccordionItemContext } from "./AccordionItem";
 
@@ -20,7 +21,7 @@ const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
 
     if (itemContext === null) {
       console.error(
-        "<Accordion.Header> has to be used within an <Accordion.Item>, which in turn must be within an <Accordion>"
+        "<Accordion.Header> has to be used within an <Accordion.Item>, which in turn must be within an <Accordion>",
       );
       return null;
     }
@@ -30,10 +31,7 @@ const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
         ref={ref}
         {...rest}
         className={cl("navds-accordion__header", className)}
-        onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-          itemContext.toggleOpen();
-          onClick && onClick(e);
-        }}
+        onClick={composeEventHandlers(onClick, itemContext.toggleOpen)}
         aria-expanded={itemContext.open}
         type="button"
       >
@@ -53,7 +51,7 @@ const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
         </Heading>
       </button>
     );
-  }
+  },
 );
 
 export default AccordionHeader;

package/src/accordion/AccordionItem.tsx

@@ -1,13 +1,8 @@
 import cl from "clsx";
-import React, {
-  createContext,
-  forwardRef,
-  useContext,
-  useRef,
-  useState,
-} from "react";
-import { AccordionContext } from "./AccordionContext";
+import React, { createContext, forwardRef, useContext, useRef } from "react";
 import { omit } from "../util";
+import { useControllableState } from "../util/hooks/useControllableState";
+import { AccordionContext } from "./AccordionContext";
 
 export interface AccordionItemProps
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -26,6 +21,10 @@ export interface AccordionItemProps
    * @default false
    */
   defaultOpen?: boolean;
+  /**
+   * Callback for current open-state
+   */
+  onOpenChange?: (open: boolean) => void;
 }
 
 export interface AccordionItemContextProps {
@@ -37,20 +36,21 @@ export const AccordionItemContext =
   createContext<AccordionItemContextProps | null>(null);
 
 const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
-  ({ children, className, open, defaultOpen = false, ...rest }, ref) => {
-    const [internalOpen, setInternalOpen] = useState<boolean>(defaultOpen);
-    const context = useContext(AccordionContext);
+  (
+    { children, className, open, defaultOpen = false, onOpenChange, ...rest },
+    ref,
+  ) => {
+    const [_open, _setOpen] = useControllableState({
+      defaultValue: defaultOpen,
+      value: open,
+      onChange: onOpenChange,
+    });
 
-    const [_open, _setOpen] = useState(defaultOpen);
+    const context = useContext(AccordionContext);
     const shouldAnimate = useRef<boolean>(!(Boolean(open) || defaultOpen));
+
     const handleOpen = () => {
-      if (open === undefined) {
-        const newOpen = !_open;
-        _setOpen(newOpen);
-        setInternalOpen(newOpen);
-      } else {
-        setInternalOpen(!open);
-      }
+      _setOpen((x) => !x);
       shouldAnimate.current = true;
     };
 
@@ -61,7 +61,7 @@ const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
     return (
       <div
         className={cl("navds-accordion__item", className, {
-          "navds-accordion__item--open": open ?? internalOpen,
+          "navds-accordion__item--open": _open,
           "navds-accordion__item--neutral": context?.variant === "neutral",
           "navds-accordion__item--no-animation": !shouldAnimate.current,
         })}
@@ -70,7 +70,7 @@ const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
       >
         <AccordionItemContext.Provider
           value={{
-            open: open ?? internalOpen,
+            open: _open,
             toggleOpen: handleOpen,
           }}
         >
@@ -78,7 +78,7 @@ const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
         </AccordionItemContext.Provider>
       </div>
     );
-  }
+  },
 );
 
 export default AccordionItem;

package/src/accordion/accordion.stories.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
+import { Accordion, AccordionProps } from ".";
+import { Table } from "..";
 import AccordionContent from "./AccordionContent";
 import AccordionHeader from "./AccordionHeader";
 import AccordionItem from "./AccordionItem";
-import { Accordion, AccordionProps } from ".";
-import { Table } from "..";
 
 export default {
   title: "ds-react/Accordion",
@@ -78,7 +78,10 @@ const Item = (props) => {
 
   if (props.defaultOpen) {
     return (
-      <Accordion.Item defaultOpen={props.defaultOpen}>
+      <Accordion.Item
+        defaultOpen={props.defaultOpen}
+        onOpenChange={console.log}
+      >
         <Accordion.Header>Accordion header text</Accordion.Header>
         <SmallContent />
       </Accordion.Item>
@@ -86,14 +89,14 @@ const Item = (props) => {
   }
 
   return props.controlled ? (
-    <Accordion.Item open={open}>
+    <Accordion.Item open={open} onOpenChange={console.log}>
       <Accordion.Header onClick={() => setOpen(!open)}>
         Accordion header text
       </Accordion.Header>
       <Content />
     </Accordion.Item>
   ) : (
-    <Accordion.Item>
+    <Accordion.Item onOpenChange={console.log}>
       <Accordion.Header>Accordion header text</Accordion.Header>
       <Content />
     </Accordion.Item>

package/src/alert/Alert.tsx

@@ -1,14 +1,14 @@
+import cl from "clsx";
+import React, { forwardRef } from "react";
 import {
-  InformationSquareFillIcon,
   CheckmarkCircleFillIcon,
   ExclamationmarkTriangleFillIcon,
-  XMarkOctagonFillIcon,
+  InformationSquareFillIcon,
   XMarkIcon,
+  XMarkOctagonFillIcon,
 } from "@navikt/aksel-icons";
-import cl from "clsx";
-import React, { forwardRef } from "react";
-import { BodyLong } from "../typography";
 import { Button } from "../button";
+import { BodyLong } from "../typography";
 
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
@@ -88,7 +88,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
       onClose,
       ...rest
     },
-    ref
+    ref,
   ) => {
     return (
       <div
@@ -103,7 +103,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
             "navds-alert--full-width": fullWidth,
             "navds-alert--inline": inline,
             "navds-alert--close-button": closeButton,
-          }
+          },
         )}
       >
         <Icon variant={variant} className="navds-alert__icon" />
@@ -124,7 +124,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
         )}
       </div>
     );
-  }
+  },
 );
 
 export default Alert;

package/src/alert/alert.stories.tsx

@@ -1,9 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { expect, userEvent, within } from "@storybook/test";
 import React from "react";
 import { Alert, AlertProps } from ".";
 import { BodyLong, Heading as DsHeading, Link } from "..";
-import { within, userEvent } from "@storybook/testing-library";
-import { expect } from "@storybook/jest";
 
 const meta: Meta<typeof Alert> = {
   title: "ds-react/Alert",
@@ -55,7 +54,7 @@ export const Small: Story = {
             closeButton={props.closeButton}
           >
             {new Array(i + 1).fill(
-              "Id elit esse enim reprehenderit enim nisi veniam nostrud."
+              "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
             )}
           </Alert>
         ))}
@@ -74,14 +73,14 @@ export const FullWidth = () => {
       {variants.map((variant, i) => (
         <Alert key={variant} variant={variant} fullWidth>
           {new Array(i + 1).fill(
-            "Id elit esse enim reprehenderit enim nisi veniam nostrud."
+            "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
           )}
         </Alert>
       ))}
       {variants.map((variant, i) => (
         <Alert key={variant} variant={variant} fullWidth size="small">
           {new Array(i + 1).fill(
-            "Id elit esse enim reprehenderit enim nisi veniam nostrud."
+            "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
           )}
         </Alert>
       ))}
@@ -95,14 +94,14 @@ export const Inline = () => {
       {variants.map((variant, i) => (
         <Alert key={variant} variant={variant} inline>
           {new Array(i + 1).fill(
-            "Id elit esse enim reprehenderit enim nisi veniam nostrud."
+            "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
           )}
         </Alert>
       ))}
       {variants.map((variant, i) => (
         <Alert key={variant} variant={variant} inline size="small">
           {new Array(i + 1).fill(
-            "Id elit esse enim reprehenderit enim nisi veniam nostrud."
+            "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
           )}
         </Alert>
       ))}

package/src/button/Button.tsx

@@ -1,13 +1,12 @@
 import cl from "clsx";
-import React, { forwardRef, useMemo, useRef, useState } from "react";
+import React, { forwardRef, useRef, useState } from "react";
 import { Loader } from "../loader";
 import { Label } from "../typography";
-import {
-  OverridableComponent,
-  mergeRefs,
-  omit,
-  useClientLayoutEffect,
-} from "../util";
+import { omit } from "../util";
+import { composeEventHandlers } from "../util/composeEventHandlers";
+import { useClientLayoutEffect } from "../util/hooks";
+import { useMergeRefs } from "../util/hooks/useMergeRefs";
+import { OverridableComponent } from "../util/types";
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -79,18 +78,18 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
         iconPosition = "left",
         ...rest
       },
-      ref
+      ref,
     ) => {
       const buttonRef = useRef<HTMLButtonElement | null>(null);
       const [widthOverride, setWidthOverride] = useState<number>();
 
-      const mergedRef = useMemo(() => mergeRefs([buttonRef, ref]), [ref]);
+      const mergedRef = useMergeRefs(buttonRef, ref);
 
       useClientLayoutEffect(() => {
         if (loading) {
           const requestID = window.requestAnimationFrame(() => {
             setWidthOverride(
-              buttonRef?.current?.getBoundingClientRect()?.width
+              buttonRef?.current?.getBoundingClientRect()?.width,
             );
           });
           return () => {
@@ -103,22 +102,18 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
       const filterProps: React.ButtonHTMLAttributes<HTMLButtonElement> =
         disabled ?? widthOverride ? omit(rest, ["href"]) : rest;
 
+      const handleKeyUp = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+        if (e.key === " " && !disabled && !widthOverride) {
+          e.currentTarget.click();
+        }
+      };
+
       return (
         <Component
           {...(Component !== "button" ? { role: "button" } : {})}
           {...filterProps}
           ref={mergedRef}
-          onKeyUp={(e: React.KeyboardEvent<HTMLButtonElement>) => {
-            filterProps.onKeyUp?.(e);
-            if (
-              e.key === " " &&
-              !disabled &&
-              !widthOverride &&
-              !e.isDefaultPrevented()
-            ) {
-              e.currentTarget.click();
-            }
-          }}
+          onKeyUp={composeEventHandlers(filterProps.onKeyUp, handleKeyUp)}
           className={cl(
             className,
             "navds-button",
@@ -128,7 +123,7 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
               "navds-button--loading": widthOverride,
               "navds-button--icon-only": !!icon && !children,
               "navds-button--disabled": disabled ?? widthOverride,
-            }
+            },
           )}
           style={{
             ...style,
@@ -155,7 +150,7 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
           )}
         </Component>
       );
-    }
+    },
   );
 
 export default Button;

package/src/button/button.stories.tsx

@@ -1,5 +1,5 @@
-import { StarIcon } from "@navikt/aksel-icons";
 import React from "react";
+import { StarIcon } from "@navikt/aksel-icons";
 import { Button } from "./index";
 
 export default {

package/src/chat/Bubble.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "clsx";
+import React, { HTMLAttributes, forwardRef } from "react";
 import { Detail } from "../typography";
 
 export interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
@@ -37,7 +37,7 @@ const Bubble = forwardRef<HTMLDivElement, BubbleProps>(
       toptextPosition,
       ...rest
     },
-    ref
+    ref,
   ) => {
     return (
       <div
@@ -50,7 +50,7 @@ const Bubble = forwardRef<HTMLDivElement, BubbleProps>(
           <h3
             className={cl(
               `navds-chat__top-text`,
-              toptextPosition && `navds-chat__top-text--${toptextPosition}`
+              toptextPosition && `navds-chat__top-text--${toptextPosition}`,
             )}
           >
             {name && <Detail as="span">{name}</Detail>}
@@ -65,7 +65,7 @@ const Bubble = forwardRef<HTMLDivElement, BubbleProps>(
         {children}
       </div>
     );
-  }
+  },
 );
 
 export default Bubble;

package/src/chat/Chat.tsx

@@ -1,7 +1,7 @@
-import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "clsx";
-import Bubble from "./Bubble";
+import React, { HTMLAttributes, forwardRef } from "react";
 import { BodyLong } from "../typography";
+import Bubble from "./Bubble";
 
 export const POSITIONS = ["left", "right"] as const;
 export const SIZES = ["medium", "small"] as const;
@@ -99,7 +99,7 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
       size = "medium",
       ...rest
     }: ChatProps,
-    ref
+    ref,
   ) => (
     <div
       ref={ref}
@@ -109,7 +109,7 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
         `navds-chat--${position}`,
         `navds-chat--top-text-${toptextPosition ?? position}`,
         `navds-chat--${size}`,
-        `navds-chat--${variant}`
+        `navds-chat--${variant}`,
       )}
       {...rest}
     >
@@ -139,7 +139,7 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
         })}
       </ol>
     </div>
-  )
+  ),
 ) as ChatComponent;
 
 Chat.Bubble = Bubble;

package/src/chat/chat.stories.tsx

@@ -1,6 +1,6 @@
+import { Meta } from "@storybook/react";
 import React from "react";
 import { Chat } from "../index";
-import { Meta } from "@storybook/react";
 import { POSITIONS, SIZES } from "./Chat";
 
 export default {

package/src/chips/Chips.tsx

@@ -1,8 +1,8 @@
 import cl from "clsx";
-import React, { forwardRef, HTMLAttributes } from "react";
-import ToggleChips, { ToggleChipsProps } from "./Toggle";
+import React, { HTMLAttributes, forwardRef } from "react";
+import { OverridableComponent } from "../util/types";
 import RemovableChips, { RemovableChipsProps } from "./Removable";
-import { OverridableComponent } from "../util";
+import ToggleChips, { ToggleChipsProps } from "./Toggle";
 
 export interface ChipsProps extends HTMLAttributes<HTMLUListElement> {
   children: React.ReactNode;
@@ -74,7 +74,7 @@ export const Chips: ChipsComponent = forwardRef<HTMLUListElement, ChipsProps>(
         })}
       </ul>
     );
-  }
+  },
 ) as ChipsComponent;
 
 Chips.Toggle = ToggleChips;

package/src/chips/Removable.tsx

@@ -1,6 +1,7 @@
-import { XMarkIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef } from "react";
+import { XMarkIcon } from "@navikt/aksel-icons";
+import { composeEventHandlers } from "../util/composeEventHandlers";
 
 export interface RemovableChipsProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -33,9 +34,10 @@ export const RemovableChips = forwardRef<
       removeLabel = "slett",
       onDelete,
       type = "button",
+      onClick,
       ...rest
     },
-    ref
+    ref,
   ) => {
     return (
       <button
@@ -45,13 +47,10 @@ export const RemovableChips = forwardRef<
         className={cl(
           "navds-chips__chip navds-chips__removable navds-chips--icon-right",
           className,
-          `navds-chips__removable--${variant}`
+          `navds-chips__removable--${variant}`,
         )}
         aria-label={`${children} ${removeLabel}`}
-        onClick={(e) => {
-          onDelete?.();
-          rest?.onClick?.(e);
-        }}
+        onClick={composeEventHandlers(onClick, onDelete)}
       >
         <span className="navds-chips__chip-text">{children}</span>
         <span className="navds-chips__removable-icon">
@@ -59,7 +58,7 @@ export const RemovableChips = forwardRef<
         </span>
       </button>
     );
-  }
+  },
 );
 
 export default RemovableChips;

package/src/chips/Toggle.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../util";
+import { OverridableComponent } from "../util/types";
 
 export interface ToggleChipsProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -35,7 +35,7 @@ export const ToggleChips: OverridableComponent<
       as: Component = "button",
       ...rest
     },
-    ref
+    ref,
   ) => {
     return (
       <Component
@@ -45,7 +45,7 @@ export const ToggleChips: OverridableComponent<
           "navds-chips__chip navds-chips__toggle",
           className,
           `navds-chips__toggle--${variant}`,
-          { "navds-chips__toggle--with-checkmark": checkmark }
+          { "navds-chips__toggle--with-checkmark": checkmark },
         )}
         aria-pressed={selected}
       >
@@ -81,7 +81,7 @@ export const ToggleChips: OverridableComponent<
         <span className="navds-chips__chip-text">{children}</span>
       </Component>
     );
-  }
+  },
 );
 
 export default ToggleChips;

package/src/chips/chips.stories.tsx

@@ -25,7 +25,7 @@ export const Default = (props) => {
               setSelected(
                 selected.includes(c)
                   ? selected.filter((x) => x !== c)
-                  : [...selected, c]
+                  : [...selected, c],
               )
             }
           >
@@ -72,7 +72,7 @@ export const Toggle = ({ size }) => {
               setSelected(
                 selected.includes(y)
                   ? selected.filter((x) => x !== y)
-                  : [...selected, y]
+                  : [...selected, y],
               )
             }
             key={y}
@@ -90,7 +90,7 @@ export const Toggle = ({ size }) => {
               setSelected(
                 selected.includes(y)
                   ? selected.filter((x) => x !== y)
-                  : [...selected, y]
+                  : [...selected, y],
               )
             }
             key={y}
@@ -178,7 +178,7 @@ export const Regular = () => {
               setSelected(
                 selected.includes(y)
                   ? selected.filter((x) => x !== y)
-                  : [...selected, y]
+                  : [...selected, y],
               )
             }
             key={y}
@@ -208,7 +208,7 @@ export const Small = () => {
               setSelected(
                 selected.includes(y)
                   ? selected.filter((x) => x !== y)
-                  : [...selected, y]
+                  : [...selected, y],
               )
             }
             key={y}