@navikt/ds-react 5.12.5 → 5.14.0

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,10 @@ import React, {
   useRef,
   useState,
 } from "react";
-import copy from "../util/copy";
+import { CheckmarkIcon, FilesIcon } from "@navikt/aksel-icons";
 import { Label } from "../typography";
+import { composeEventHandlers } from "../util/composeEventHandlers";
+import copy from "../util/copy";
 
 export interface CopyButtonProps
   extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
@@ -97,9 +98,10 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
       title = "Kopier",
       activeTitle = "Kopiert",
       iconPosition = "left",
+      onClick,
       ...rest
     },
-    ref
+    ref,
   ) => {
     const [active, setActive] = useState(false);
     const timeoutRef = useRef<number>();
@@ -110,14 +112,11 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
       };
     }, []);
 
-    const handleClick = (
-      event: React.MouseEvent<HTMLButtonElement, MouseEvent>
-    ) => {
+    const handleClick = () => {
       timeoutRef.current && clearTimeout(timeoutRef.current);
       copy(copyText);
       setActive(true);
       onActiveChange?.(true);
-      rest.onClick?.(event);
 
       timeoutRef.current = window.setTimeout(() => {
         setActive(false);
@@ -158,9 +157,9 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
             "navds-copybutton--icon-only": !text,
             "navds-copybutton--icon-right": iconPosition === "right",
             "navds-copybutton--active": active,
-          }
+          },
         )}
-        onClick={handleClick}
+        onClick={composeEventHandlers(onClick, handleClick)}
       >
         <span className="navds-copybutton__content">
           {iconPosition === "left" && copyIcon}
@@ -186,7 +185,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/test";
+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

@@ -1,8 +1,10 @@
 import cl from "clsx";
 import isWeekend from "date-fns/isWeekend";
-import React, { forwardRef, useMemo, useRef, useState } from "react";
+import React, { forwardRef, useRef, useState } from "react";
 import { DateRange, DayPicker, isMatch } from "react-day-picker";
-import { mergeRefs, omit, useId } from "../../util";
+import { omit } from "../../util";
+import { useId } from "../../util/hooks";
+import { useMergeRefs } from "../../util/hooks/useMergeRefs";
 import { DateContext } from "../context";
 import { DatePickerInput } from "../parts/DateInput";
 import { DateWrapper } from "../parts/DateWrapper";
@@ -82,13 +84,13 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       onWeekNumberClick,
       ...rest
     },
-    ref
+    ref,
   ) => {
     const ariaId = useId(id);
     const [open, setOpen] = useState(_open ?? false);
 
     const wrapperRef = useRef<HTMLDivElement | null>(null);
-    const mergedRef = useMemo(() => mergeRefs([wrapperRef, ref]), [ref]);
+    const mergedRef = useMergeRefs(wrapperRef, ref);
 
     const [selectedDates, setSelectedDates] = React.useState<
       Date | Date[] | DateRange | undefined
@@ -181,7 +183,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/datepicker/parts/WeekRow.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { useDayPicker } from "react-day-picker";
 import { Show } from "../../../layout/responsive";
 import { Detail } from "../../../typography";
-import { useId } from "../../../util";
+import { useId } from "../../../util/hooks";
 import { getMonthWeeks } from "../../utils/get-month-weeks";
 import { labelWeek } from "../../utils/labels";
 import WeekNumber from "./WeekNumber";

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",
-      })
+      }),
     );
   });
 });

package/src/date/hooks/useRangeDatepicker.tsx

@@ -148,7 +148,7 @@ const fromValidation = (day: Date, opt?: UseRangeDatepickerOptions) => {
 const toValidation = (
   day: Date,
   from: Date,
-  opt?: UseRangeDatepickerOptions
+  opt?: UseRangeDatepickerOptions,
 ) => {
   const isBefore =
     opt?.fromDate && day && differenceInCalendarDays(opt?.fromDate, day) > 0;
@@ -185,12 +185,12 @@ const toValidation = (
 
 const initialValidation = (
   range?: DateRange,
-  opt?: UseRangeDatepickerOptions
+  opt?: UseRangeDatepickerOptions,
 ): RangeValidationT => {
   if (!range || !range?.from) {
     return getValidationMessage(
       { isEmpty: true, isValidDate: false },
-      { isEmpty: true, isValidDate: false }
+      { isEmpty: true, isValidDate: false },
     );
   }
 
@@ -215,7 +215,7 @@ const initialValidation = (
  * });
  */
 export const useRangeDatepicker = (
-  opt: UseRangeDatepickerOptions = {}
+  opt: UseRangeDatepickerOptions = {},
 ): UseRangeDatepickerValue => {
   const {
     locale: _locale = "nb",
@@ -240,26 +240,26 @@ export const useRangeDatepicker = (
 
   // Initialize states
   const [month, setMonth] = useState(
-    defaultSelected ? defaultSelected?.from : defaultMonth ?? today
+    defaultSelected ? defaultSelected?.from : defaultMonth ?? today,
   );
   const [selectedRange, setSelectedRange] = useState<DateRange | undefined>(
-    defaultSelected ?? { from: undefined, to: undefined }
+    defaultSelected ?? { from: undefined, to: undefined },
   );
 
   const [fromInputValue, setFromInputValue] = useState(
     defaultSelected?.from
       ? formatDateForInput(defaultSelected.from, locale, "date", inputFormat)
-      : ""
+      : "",
   );
 
   const [toInputValue, setToInputValue] = useState(
     defaultSelected?.to
       ? formatDateForInput(defaultSelected.to, locale, "date", inputFormat)
-      : ""
+      : "",
   );
 
   const [validation, setValidation] = useState<RangeValidationT>(
-    initialValidation(selectedRange, opt)
+    initialValidation(selectedRange, opt),
   );
 
   const [open, setOpen] = useState(false);
@@ -271,7 +271,7 @@ export const useRangeDatepicker = (
 
   const updateValidation = (
     from: Partial<RangeValidationT["from"]> = {},
-    to: Partial<RangeValidationT["to"]> = {}
+    to: Partial<RangeValidationT["to"]> = {},
   ) => {
     const msg = getValidationMessage(from, to);
     setValidation(msg);
@@ -284,18 +284,18 @@ export const useRangeDatepicker = (
     setValidation(
       initialValidation(
         defaultSelected ?? { from: undefined, to: undefined },
-        opt
-      )
+        opt,
+      ),
     );
     setFromInputValue(
       defaultSelected?.from
         ? formatDateForInput(defaultSelected.from, locale, "date", inputFormat)
-        : ""
+        : "",
     );
     setToInputValue(
       defaultSelected?.to
         ? formatDateForInput(defaultSelected.to, locale, "date", inputFormat)
-        : ""
+        : "",
     );
     setDefaultSelected(_defaultSelected);
   };
@@ -305,12 +305,12 @@ export const useRangeDatepicker = (
     setFromInputValue(
       range?.from
         ? formatDateForInput(range.from, locale, "date", inputFormat)
-        : ""
+        : "",
     );
     setToInputValue(
       range?.to
         ? formatDateForInput(range?.to, locale, "date", inputFormat)
-        : ""
+        : "",
     );
     setValidation(initialValidation(range, opt));
   };
@@ -324,12 +324,12 @@ export const useRangeDatepicker = (
       today,
       locale,
       "date",
-      allowTwoDigitYear
+      allowTwoDigitYear,
     );
     if (isValidDate(day)) {
       src === RANGE.FROM
         ? setFromInputValue(
-            formatDateForInput(day, locale, "date", inputFormat)
+            formatDateForInput(day, locale, "date", inputFormat),
           )
         : setToInputValue(formatDateForInput(day, locale, "date", inputFormat));
 
@@ -348,7 +348,7 @@ export const useRangeDatepicker = (
       today,
       locale,
       "date",
-      allowTwoDigitYear
+      allowTwoDigitYear,
     );
     if (!isValidDate(day)) {
       return;
@@ -381,18 +381,18 @@ export const useRangeDatepicker = (
 
     range?.from
       ? setFromInputValue(
-          formatDateForInput(range?.from, locale, "date", inputFormat)
+          formatDateForInput(range?.from, locale, "date", inputFormat),
         )
       : setFromInputValue("");
     prevToRange && !resetTo
       ? setToInputValue(
-          formatDateForInput(prevToRange, locale, "date", inputFormat)
+          formatDateForInput(prevToRange, locale, "date", inputFormat),
         )
       : setToInputValue("");
     updateRange({ from: range?.from, to: resetTo ? undefined : prevToRange });
     updateValidation(
       { isValidDate: !!range?.from, isEmpty: !range?.from },
-      { isValidDate: !!range?.to, isEmpty: !prevToRange || resetTo }
+      { isValidDate: !!range?.to, isEmpty: !prevToRange || resetTo },
     );
   };
 
@@ -400,7 +400,7 @@ export const useRangeDatepicker = (
     val: string = "",
     day: Date,
     isBefore = false,
-    isAfter = false
+    isAfter = false,
   ) => {
     setFromInputValue(val);
     if (!validateDay(day)) {
@@ -415,7 +415,7 @@ export const useRangeDatepicker = (
           isBefore,
           isAfter,
         },
-        validation.to
+        validation.to,
       );
       return;
     }
@@ -427,7 +427,7 @@ export const useRangeDatepicker = (
           isBefore,
           isAfter,
         },
-        validation.to
+        validation.to,
       );
       return;
     }
@@ -449,7 +449,7 @@ export const useRangeDatepicker = (
         today,
         locale,
         "date",
-        allowTwoDigitYear
+        allowTwoDigitYear,
       );
       if (validateDay(toDay)) {
         updateRange({ from: day, to: toDay });
@@ -467,7 +467,7 @@ export const useRangeDatepicker = (
     val: string = "",
     day: Date,
     isBefore = false,
-    isAfter = false
+    isAfter = false,
   ) => {
     setToInputValue(val);
     if (!validateDay(day)) {
@@ -518,7 +518,7 @@ export const useRangeDatepicker = (
       today,
       locale,
       "date",
-      allowTwoDigitYear
+      allowTwoDigitYear,
     );
     const isBefore = fromDate && differenceInCalendarDays(fromDate, day) > 0;
     const isAfter = toDate && differenceInCalendarDays(day, toDate) > 0;

package/src/date/monthpicker/MonthButton.tsx

@@ -84,7 +84,7 @@ export const MonthButton = ({
           year,
           hasDropdown,
           fromDate,
-          toDate
+          toDate,
         );
         setFocus(next);
         setTabRoot(next);

package/src/date/monthpicker/MonthCaption.tsx

@@ -1,10 +1,10 @@
-import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
 import { isAfter, isBefore } from "date-fns";
 import setYear from "date-fns/setYear";
 import startOfMonth from "date-fns/startOfMonth";
 import startOfYear from "date-fns/startOfYear";
 import React from "react";
 import { useDayPicker } from "react-day-picker";
+import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
 import { Button } from "../../button";
 import { Select } from "../../form/Select";
 import { useSharedMonthContext } from "../context";

package/src/date/monthpicker/MonthPicker.tsx

@@ -1,7 +1,8 @@
 import cl from "clsx";
-import React, { forwardRef, useMemo, useRef, useState } from "react";
+import React, { forwardRef, useRef, useState } from "react";
 import { RootProvider } from "react-day-picker";
-import { mergeRefs, useId } from "../../util";
+import { useId } from "../../util/hooks";
+import { useMergeRefs } from "../../util/hooks/useMergeRefs";
 import { DateContext, SharedMonthProvider } from "../context";
 import { MonthPickerInput } from "../parts/DateInput";
 import { DateWrapper } from "../parts/DateWrapper";
@@ -75,16 +76,16 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
       onYearChange,
       strategy = "absolute",
     },
-    ref
+    ref,
   ) => {
     const ariaId = useId(id);
     const [open, setOpen] = useState(_open ?? false);
 
     const wrapperRef = useRef<HTMLDivElement | null>(null);
-    const mergedRef = useMemo(() => mergeRefs([wrapperRef, ref]), [ref]);
+    const mergedRef = useMergeRefs(wrapperRef, ref);
 
     const [selectedMonth, setSelectedMonth] = useState<Date | undefined>(
-      defaultSelected
+      defaultSelected,
     );
 
     const handleSelect = (month?: Date) => {
@@ -151,7 +152,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
         </div>
       </DateContext.Provider>
     );
-  }
+  },
 ) as MonthPickerComponent;
 
 MonthPicker.Standalone = MonthPickerStandalone;

package/src/date/monthpicker/MonthPickerStandalone.tsx

@@ -40,10 +40,10 @@ export const MonthPickerStandalone = forwardRef<
       year,
       onYearChange,
     },
-    ref
+    ref,
   ) => {
     const [selectedMonth, setSelectedMonth] = useState<Date | undefined>(
-      defaultSelected
+      defaultSelected,
     );
 
     const handleSelect = (month?: Date) => {
@@ -81,7 +81,7 @@ export const MonthPickerStandalone = forwardRef<
         </RootProvider>
       </div>
     );
-  }
+  },
 );
 
 export default MonthPickerStandalone;

package/src/date/monthpicker/MonthSelector.tsx

@@ -46,7 +46,7 @@ export const MonthSelector = () => {
   };
 
   const [tabRoot, setTabRoot] = useState(
-    hasSelected ? selected : getRootFallback()
+    hasSelected ? selected : getRootFallback(),
   );
 
   if (tabRoot?.getFullYear() !== year.getFullYear()) {