@navikt/ds-react 5.12.4 → 5.13.0

package/src/accordion/AccordionHeader.tsx

@@ -1,6 +1,6 @@
-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 { AccordionContext } from "./AccordionContext";
 import { AccordionItemContext } from "./AccordionItem";
@@ -20,7 +20,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;
     }
@@ -53,7 +53,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,
           }}
         >

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,9 @@
+import { expect } from "@storybook/jest";
 import type { Meta, StoryObj } from "@storybook/react";
+import { userEvent, within } from "@storybook/testing-library";
 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 +55,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 +74,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 +95,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

@@ -79,7 +79,7 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
         iconPosition = "left",
         ...rest
       },
-      ref
+      ref,
     ) => {
       const buttonRef = useRef<HTMLButtonElement | null>(null);
       const [widthOverride, setWidthOverride] = useState<number>();
@@ -90,7 +90,7 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
         if (loading) {
           const requestID = window.requestAnimationFrame(() => {
             setWidthOverride(
-              buttonRef?.current?.getBoundingClientRect()?.width
+              buttonRef?.current?.getBoundingClientRect()?.width,
             );
           });
           return () => {
@@ -128,7 +128,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 +155,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 RemovableChips, { RemovableChipsProps } from "./Removable";
+import React, { HTMLAttributes, forwardRef } from "react";
 import { OverridableComponent } from "../util";
+import RemovableChips, { RemovableChipsProps } from "./Removable";
+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,6 @@
-import { XMarkIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef } from "react";
+import { XMarkIcon } from "@navikt/aksel-icons";
 
 export interface RemovableChipsProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -35,7 +35,7 @@ export const RemovableChips = forwardRef<
       type = "button",
       ...rest
     },
-    ref
+    ref,
   ) => {
     return (
       <button
@@ -45,7 +45,7 @@ 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) => {
@@ -59,7 +59,7 @@ export const RemovableChips = forwardRef<
         </span>
       </button>
     );
-  }
+  },
 );
 
 export default RemovableChips;

package/src/chips/Toggle.tsx

@@ -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}

package/src/copybutton/CopyButton.tsx

@@ -1,4 +1,3 @@
-import { CheckmarkIcon, FilesIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, {
   ButtonHTMLAttributes,
@@ -7,8 +6,9 @@ import React, {
   useRef,
   useState,
 } from "react";
-import copy from "../util/copy";
+import { CheckmarkIcon, FilesIcon } from "@navikt/aksel-icons";
 import { Label } from "../typography";
+import copy from "../util/copy";
 
 export interface CopyButtonProps
   extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
@@ -99,7 +99,7 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
       iconPosition = "left",
       ...rest
     },
-    ref
+    ref,
   ) => {
     const [active, setActive] = useState(false);
     const timeoutRef = useRef<number>();
@@ -111,7 +111,7 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
     }, []);
 
     const handleClick = (
-      event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+      event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
     ) => {
       timeoutRef.current && clearTimeout(timeoutRef.current);
       copy(copyText);
@@ -158,7 +158,7 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
             "navds-copybutton--icon-only": !text,
             "navds-copybutton--icon-right": iconPosition === "right",
             "navds-copybutton--active": active,
-          }
+          },
         )}
         onClick={handleClick}
       >
@@ -186,7 +186,7 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
         </span>
       </button>
     );
-  }
+  },
 );
 
 export default CopyButton;

package/src/copybutton/copy-button.stories.tsx

@@ -1,9 +1,9 @@
-import React from "react";
-import { userEvent, within } from "@storybook/testing-library";
 import { Meta, StoryObj } from "@storybook/react";
+import { userEvent, within } from "@storybook/testing-library";
+import React from "react";
 import { LinkIcon, ThumbUpIcon } from "@navikt/aksel-icons";
-import { Tooltip } from "../tooltip";
 import { CopyButton } from ".";
+import { Tooltip } from "../tooltip";
 
 const meta: Meta<typeof CopyButton> = {
   title: "ds-react/CopyButton",

package/src/date/context/useSharedMonthContext.tsx

@@ -2,7 +2,7 @@ import setYear from "date-fns/setYear";
 import startOfMonth from "date-fns/startOfMonth";
 import React, { createContext, useContext, useState } from "react";
 import { useDayPicker } from "react-day-picker";
-import { getInitialYear, Matcher } from "../utils";
+import { Matcher, getInitialYear } from "../utils";
 
 export type SharedMonthContextType = {
   hasDropdown: boolean;

package/src/date/datepicker/DatePicker.tsx

@@ -82,7 +82,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       onWeekNumberClick,
       ...rest
     },
-    ref
+    ref,
   ) => {
     const ariaId = useId(id);
     const [open, setOpen] = useState(_open ?? false);
@@ -181,7 +181,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
         </div>
       </DateContext.Provider>
     );
-  }
+  },
 ) as DatePickerComponent;
 
 DatePicker.Standalone = DatePickerStandalone;

package/src/date/datepicker/DatePickerStandalone.tsx

@@ -62,7 +62,7 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
       onWeekNumberClick,
       ...rest
     },
-    ref
+    ref,
   ) => {
     const [selectedDates, setSelectedDates] = React.useState<
       Date | Date[] | DateRange | undefined
@@ -122,7 +122,7 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
         />
       </div>
     );
-  }
+  },
 );
 
 export default DatePickerStandalone;

package/src/date/datepicker/datepicker.stories.tsx

@@ -58,8 +58,8 @@ export const Default: StoryObj<DefaultStoryProps> = {
           {...(props.mode === "single"
             ? singleCtx.datepickerProps
             : props.mode === "range"
-            ? rangeCtx.datepickerProps
-            : {})}
+              ? rangeCtx.datepickerProps
+              : {})}
           {...newProps}
           locale={props.locale}
           disableWeekends={props.disableWeekends}

package/src/date/datepicker/parts/Caption.tsx

@@ -1,10 +1,9 @@
-import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
 import React from "react";
 import { CaptionProps, useDayPicker, useNavigation } from "react-day-picker";
-
-import WeekRow from "./WeekRow";
+import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
 import { Button } from "../../../button";
 import { Label } from "../../../typography";
+import WeekRow from "./WeekRow";
 
 /**
  * https://github.com/gpbl/react-day-picker/tree/main/src/components/Caption

package/src/date/datepicker/parts/DropdownCaption.tsx

@@ -1,10 +1,10 @@
-import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
 import { max, min } from "date-fns";
 import setMonth from "date-fns/setMonth";
 import setYear from "date-fns/setYear";
 import startOfMonth from "date-fns/startOfMonth";
 import React from "react";
 import { CaptionProps, useDayPicker, useNavigation } from "react-day-picker";
+import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
 import { Button } from "../../../button";
 import { Select } from "../../../form/Select";
 import { getMonths, getYears } from "../../utils/get-dates";
@@ -32,7 +32,7 @@ export const DropdownCaption = ({ displayMonth, id }: CaptionProps) => {
   const handleYearChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {
     const newMonth = setYear(
       startOfMonth(displayMonth),
-      Number(e.target.value)
+      Number(e.target.value),
     );
     goToMonth(startOfMonth(min([max([newMonth, fromDate]), toDate])));
   };

package/src/date/datepicker/parts/HeadRow.tsx

@@ -1,5 +1,5 @@
+import { Locale, addDays, startOfWeek } from "date-fns";
 import React from "react";
-import { addDays, Locale, startOfWeek } from "date-fns";
 import { useDayPicker } from "react-day-picker";
 import { Hide } from "../../../layout/responsive";