@navikt/ds-react 5.12.5 → 5.13.0

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";
 

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

@@ -1,8 +1,8 @@
-import React from "react";
 import { getUnixTime } from "date-fns";
-import { useDayPicker, Day } from "react-day-picker";
-import WeekNumber from "./WeekNumber";
+import React from "react";
+import { Day, useDayPicker } from "react-day-picker";
 import { Hide } from "../../../layout/responsive";
+import WeekNumber from "./WeekNumber";
 
 /**
  * The props for the {@link Row} component.

package/src/date/hooks/useDatepicker.tsx

@@ -132,7 +132,7 @@ const getValidationMessage = (val = {}): DateValidationT => ({
  * });
  */
 export const useDatepicker = (
-  opt: UseDatepickerOptions = {}
+  opt: UseDatepickerOptions = {},
 ): UseDatepickerValue => {
   const {
     locale: _locale = "nb",
@@ -171,7 +171,7 @@ export const useDatepicker = (
       newOpen &&
         setMonth(selectedDay ?? defaultSelected ?? defaultMonth ?? today);
     },
-    [defaultMonth, defaultSelected, selectedDay, today]
+    [defaultMonth, defaultSelected, selectedDay, today],
   );
 
   const updateDate = (date?: Date) => {
@@ -193,7 +193,7 @@ export const useDatepicker = (
     updateDate(date);
     setMonth(date ?? defaultMonth ?? today);
     setInputValue(
-      date ? formatDateForInput(date, locale, "date", inputFormat) : ""
+      date ? formatDateForInput(date, locale, "date", inputFormat) : "",
     );
   };
 
@@ -206,7 +206,7 @@ export const useDatepicker = (
       today,
       locale,
       "date",
-      allowTwoDigitYear
+      allowTwoDigitYear,
     );
     if (isValidDate(day)) {
       setInputValue(formatDateForInput(day, locale, "date", inputFormat));
@@ -226,7 +226,7 @@ export const useDatepicker = (
       today,
       locale,
       "date",
-      allowTwoDigitYear
+      allowTwoDigitYear,
     );
     isValidDate(day) &&
       setInputValue(formatDateForInput(day, locale, "date", inputFormat));
@@ -249,7 +249,7 @@ export const useDatepicker = (
     updateValidation();
     setMonth(day);
     setInputValue(
-      day ? formatDateForInput(day, locale, "date", inputFormat) : ""
+      day ? formatDateForInput(day, locale, "date", inputFormat) : "",
     );
   };
 
@@ -263,7 +263,7 @@ export const useDatepicker = (
       today,
       locale,
       "date",
-      allowTwoDigitYear
+      allowTwoDigitYear,
     );
 
     const isBefore =

package/src/date/hooks/useMonthPicker.tsx

@@ -127,7 +127,7 @@ const getIsAfter = (opt: { toDate?: Date; date?: Date }) =>
  * });
  */
 export const useMonthpicker = (
-  opt: UseMonthPickerOptions = {}
+  opt: UseMonthPickerOptions = {},
 ): UseMonthPickerValue => {
   const {
     locale: _locale = "nb",
@@ -166,7 +166,7 @@ export const useMonthpicker = (
       newOpen &&
         setYear(selectedMonth ?? defaultSelected ?? defaultYear ?? today);
     },
-    [defaultSelected, defaultYear, selectedMonth, today]
+    [defaultSelected, defaultYear, selectedMonth, today],
   );
 
   const updateMonth = (date?: Date) => {
@@ -188,7 +188,7 @@ export const useMonthpicker = (
     updateMonth(date);
     setYear(date ?? defaultYear ?? today);
     setInputValue(
-      date ? formatDateForInput(date, locale, "month", inputFormat) : ""
+      date ? formatDateForInput(date, locale, "month", inputFormat) : "",
     );
   };
 
@@ -202,7 +202,7 @@ export const useMonthpicker = (
       today,
       locale,
       "month",
-      allowTwoDigitYear
+      allowTwoDigitYear,
     );
     const isBefore = getIsBefore({ fromDate, date: day });
     const isAfter = getIsAfter({ toDate, date: day });
@@ -221,7 +221,7 @@ export const useMonthpicker = (
       today,
       locale,
       "month",
-      allowTwoDigitYear
+      allowTwoDigitYear,
     );
     isValidDate(day) &&
       setInputValue(formatDateForInput(day, locale, "month", inputFormat));
@@ -245,7 +245,7 @@ export const useMonthpicker = (
     updateMonth(month);
     updateValidation();
     setInputValue(
-      month ? formatDateForInput(month, locale, "month", inputFormat) : ""
+      month ? formatDateForInput(month, locale, "month", inputFormat) : "",
     );
   };
 
@@ -259,7 +259,7 @@ export const useMonthpicker = (
       today,
       locale,
       "month",
-      allowTwoDigitYear
+      allowTwoDigitYear,
     );
 
     const isBefore = getIsBefore({ fromDate, date: month });

package/src/date/hooks/useRangeDatepicker.test.tsx

@@ -36,7 +36,7 @@ describe("Writing in input sets correct values", () => {
       JSON.stringify({
         from: "2022-08-03T00:00:00.000Z",
         to: "2022-08-03T00:00:00.000Z",
-      })
+      }),
     );
   });
 
@@ -53,7 +53,7 @@ describe("Writing in input sets correct values", () => {
     expect(res.innerHTML).toEqual(
       JSON.stringify({
         from: "2022-08-03T00:00:00.000Z",
-      })
+      }),
     );
   });
 });