@navikt/ds-react 5.12.5 → 5.13.0

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

@@ -75,7 +75,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
       onYearChange,
       strategy = "absolute",
     },
-    ref
+    ref,
   ) => {
     const ariaId = useId(id);
     const [open, setOpen] = useState(_open ?? false);
@@ -84,7 +84,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
     const mergedRef = useMemo(() => mergeRefs([wrapperRef, ref]), [ref]);
 
     const [selectedMonth, setSelectedMonth] = useState<Date | undefined>(
-      defaultSelected
+      defaultSelected,
     );
 
     const handleSelect = (month?: Date) => {
@@ -151,7 +151,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()) {

package/src/date/parts/DateInput.tsx

@@ -1,6 +1,6 @@
-import { CalendarIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
-import React, { forwardRef, InputHTMLAttributes, useRef } from "react";
+import React, { InputHTMLAttributes, forwardRef, useRef } from "react";
+import { CalendarIcon } from "@navikt/aksel-icons";
 import { ReadOnlyIcon } from "../../form/ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "../../form/useFormField";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
@@ -84,7 +84,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
           "navds-form-field--readonly": readOnly,
           "navds-text-field--readonly": readOnly,
           "navds-date__field--readonly": readOnly,
-        }
+        },
       )}
     >
       <Label
@@ -121,7 +121,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
             "navds-date__field-input",
             "navds-text-field__input",
             "navds-body-short",
-            `navds-body-short--${size}`
+            `navds-body-short--${size}`,
           )}
           size={isDatepickerVariant ? 11 : 14}
         />
@@ -159,9 +159,9 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
 });
 
 export const DatePickerInput = forwardRef<HTMLInputElement, DateInputProps>(
-  (props, ref) => <DateInput {...props} ref={ref} />
+  (props, ref) => <DateInput {...props} ref={ref} />,
 );
 
 export const MonthPickerInput = forwardRef<HTMLInputElement, DateInputProps>(
-  (props, ref) => <DateInput {...props} variant="monthpicker" ref={ref} />
+  (props, ref) => <DateInput {...props} variant="monthpicker" ref={ref} />,
 );

package/src/date/utils/__tests__/check-dates.test.ts

@@ -9,13 +9,13 @@ describe("Returns if date is in current month", () => {
 
   test("Date should not be within current month (false)", () => {
     expect(
-      dateIsInCurrentMonth(new Date("Sep 2 2021"), selectedDate)
+      dateIsInCurrentMonth(new Date("Sep 2 2021"), selectedDate),
     ).toBeFalsy();
     expect(
-      dateIsInCurrentMonth(new Date("Sep 1 2021"), selectedDate)
+      dateIsInCurrentMonth(new Date("Sep 1 2021"), selectedDate),
     ).toBeFalsy();
     expect(
-      dateIsInCurrentMonth(new Date("Sep 30 2021"), selectedDate)
+      dateIsInCurrentMonth(new Date("Sep 30 2021"), selectedDate),
     ).toBeFalsy();
   });
 });

package/src/date/utils/__tests__/format-dates.test.ts

@@ -1,6 +1,6 @@
-import { parseDate } from "../parse-date";
 import nb from "date-fns/locale/nb";
 import { formatDateForInput } from "../format-date";
+import { parseDate } from "../parse-date";
 
 const parse = (inp: string) => parseDate(inp, new Date(), nb, "date", false);
 const parseTwoDigit = (inp: string) =>
@@ -9,24 +9,24 @@ const parseTwoDigit = (inp: string) =>
 describe("Format date to correct output", () => {
   test("formatDateForInput", () => {
     expect(formatDateForInput(parse("15/05/2022"), nb, "date")).toEqual(
-      "15.05.2022"
+      "15.05.2022",
     );
     expect(formatDateForInput(parse("1/5/2022"), nb, "date")).toEqual(
-      "01.05.2022"
+      "01.05.2022",
     );
     expect(formatDateForInput(parse("1/05/2022"), nb, "date")).toEqual(
-      "01.05.2022"
+      "01.05.2022",
     );
     expect(formatDateForInput(parse("15/5/2022"), nb, "date")).toEqual(
-      "15.05.2022"
+      "15.05.2022",
     );
   });
   test("formatDateForInput with twoDigitYears", () => {
     expect(formatDateForInput(parseTwoDigit("15/05/22"), nb, "date")).toEqual(
-      "15.05.2022"
+      "15.05.2022",
     );
     expect(formatDateForInput(parseTwoDigit("1/5/95"), nb, "date")).toEqual(
-      "01.05.1995"
+      "01.05.1995",
     );
   });
 });

package/src/date/utils/__tests__/get-initial-year.test.ts

@@ -8,8 +8,8 @@ describe("Returns initial year for monthpicker", () => {
         new Date("Oct 4 2021"),
         getInitialYear({
           defaultMonth: new Date("Aug 4 2021"),
-        })
-      )
+        }),
+      ),
     ).toBeTruthy();
   });
   test("Default selected should not be valid (false)", () => {
@@ -18,8 +18,8 @@ describe("Returns initial year for monthpicker", () => {
         new Date("Oct 4 2021"),
         getInitialYear({
           defaultMonth: new Date("Aug 4 2020"),
-        })
-      )
+        }),
+      ),
     ).toBeFalsy();
   });
   test("Default selected should be valid with fromDate", () => {
@@ -30,8 +30,8 @@ describe("Returns initial year for monthpicker", () => {
           defaultMonth: new Date("Aug 4 2021"),
           /* toDate: new Date("Oct 4 2021"), */
           fromDate: new Date("Oct 4 2021"),
-        })
-      )
+        }),
+      ),
     ).toBeTruthy();
   });
   test("Default selected should be valid with toDate", () => {
@@ -41,8 +41,8 @@ describe("Returns initial year for monthpicker", () => {
         getInitialYear({
           defaultMonth: new Date("Aug 4 2021"),
           toDate: new Date("Jun 4 2021"),
-        })
-      )
+        }),
+      ),
     ).toBeTruthy();
   });
   test("Default selected should be moved to toDate", () => {
@@ -52,8 +52,8 @@ describe("Returns initial year for monthpicker", () => {
         getInitialYear({
           defaultMonth: new Date("Aug 4 2021"),
           toDate: new Date("Jun 4 2020"),
-        })
-      )
+        }),
+      ),
     ).toBeTruthy();
   });
   test("Default selected should be moved to fromDate", () => {
@@ -63,8 +63,8 @@ describe("Returns initial year for monthpicker", () => {
         getInitialYear({
           defaultMonth: new Date("Aug 4 2021"),
           fromDate: new Date("Jun 4 2022"),
-        })
-      )
+        }),
+      ),
     ).toBeTruthy();
   });
   test("Default selected should be moved to fromDate, not toDate", () => {
@@ -75,8 +75,8 @@ describe("Returns initial year for monthpicker", () => {
           defaultMonth: new Date("Aug 4 2021"),
           toDate: new Date("Oct 4 2023"),
           fromDate: new Date("Jun 4 2022"),
-        })
-      )
+        }),
+      ),
     ).toBeTruthy();
   });
 });

package/src/date/utils/__tests__/get-month-weeks.test.ts

@@ -1,6 +1,5 @@
 /* https://github.com/gpbl/react-day-picker/blob/main/src/components/Table/utils/getMonthWeeks.test.ts */
 import { enGB, nb } from "date-fns/locale";
-
 import { getMonthWeeks } from "../get-month-weeks";
 
 describe('when using the "nB" locale', () => {

package/src/date/utils/__tests__/is-match.test.ts

@@ -21,22 +21,22 @@ describe("Returns if date is disabled", () => {
   });
   test("Date should be disabled type After (same month)(true)", () => {
     expect(
-      isMatch(new Date("Aug 5 2018"), [{ after: new Date("Aug 2 2018") }])
+      isMatch(new Date("Aug 5 2018"), [{ after: new Date("Aug 2 2018") }]),
     ).toBeTruthy();
   });
   test("Date should be disabled type After (true)", () => {
     expect(
-      isMatch(new Date("Oct 5 2018"), [{ after: new Date("Aug 2 2018") }])
+      isMatch(new Date("Oct 5 2018"), [{ after: new Date("Aug 2 2018") }]),
     ).toBeTruthy();
   });
   test("Date should be disabled type Before (true)", () => {
     expect(
-      isMatch(new Date("Aug 1 2018"), [{ before: new Date("Aug 2 2018") }])
+      isMatch(new Date("Aug 1 2018"), [{ before: new Date("Aug 2 2018") }]),
     ).toBeTruthy();
   });
   test("Date should be disabled type Before (false)", () => {
     expect(
-      isMatch(new Date("Jul 1 2018"), [{ before: new Date("Aug 2 2018") }])
+      isMatch(new Date("Jul 1 2018"), [{ before: new Date("Aug 2 2018") }]),
     ).toBeTruthy();
   });
 });

package/src/date/utils/__tests__/parse-dates.test.ts

@@ -1,7 +1,7 @@
 /* eslint-disable jest/expect-expect */
-import { parseDate, isValidDate } from "..";
-import nb from "date-fns/locale/nb";
 import getMonth from "date-fns/getMonth";
+import nb from "date-fns/locale/nb";
+import { isValidDate, parseDate } from "..";
 
 const check = (inp: string) =>
   // eslint-disable-next-line jest/valid-expect

package/src/date/utils/check-dates.ts

@@ -1,9 +1,9 @@
-import setYear from "date-fns/setYear";
 import isThisMonth from "date-fns/isThisMonth";
+import setYear from "date-fns/setYear";
 
 export const dateIsInCurrentMonth = (
   date: Date,
-  dateToCompare: Date
+  dateToCompare: Date,
 ): boolean => {
   return isThisMonth(setYear(date, Number(dateToCompare.getFullYear())));
 };

package/src/date/utils/dates-disabled.ts

@@ -4,7 +4,7 @@ import { isDateRange } from "react-day-picker";
 // TODO: ((date: Date) => boolean)
 export const disableDate = (
   disabledSelection: Date | Array<any>,
-  date: Date
+  date: Date,
 ): boolean => {
   let result: boolean = false;
   if (disabledSelection instanceof Date) {

package/src/date/utils/format-date.ts

@@ -8,7 +8,7 @@ export const formatDateForInput = (
   date: Date,
   locale: Locale,
   type: "date" | "month",
-  inputFormat?: string
+  inputFormat?: string,
 ) => {
   const INPUT_DATE_STRING_FORMAT =
     inputFormat ??

package/src/date/utils/get-dates.ts

@@ -40,7 +40,7 @@ export const getMonths = (start: Date, end: Date, current: Date): Date[] => {
 export const getYears = (
   start: Date,
   end: Date,
-  currentYear: number
+  currentYear: number,
 ): Date[] => {
   const years: Date[] = [];
   const fromYear = start.getFullYear();

package/src/date/utils/get-month-weeks.ts

@@ -1,4 +1,5 @@
 import {
+  Locale,
   addDays,
   addWeeks,
   differenceInCalendarDays,
@@ -6,7 +7,6 @@ import {
   endOfWeek,
   getWeek,
   getWeeksInMonth,
-  Locale,
   startOfMonth,
   startOfWeek,
 } from "date-fns";
@@ -23,7 +23,7 @@ export function getMonthWeeks(
   options: {
     locale: Locale;
     useFixedWeeks?: boolean;
-  }
+  },
 ): MonthWeek[] {
   const _options = {
     ...options,
@@ -32,7 +32,7 @@ export function getMonthWeeks(
   const weeksInMonth: MonthWeek[] = daysToMonthWeeks(
     startOfMonth(month),
     endOfMonth(month),
-    _options
+    _options,
   );
 
   if (_options?.useFixedWeeks) {
@@ -45,7 +45,7 @@ export function getMonthWeeks(
       const extraWeeks = daysToMonthWeeks(
         addWeeks(lastDate, 1),
         toDate,
-        _options
+        _options,
       );
       weeksInMonth.push(...extraWeeks);
     }
@@ -60,7 +60,7 @@ export function daysToMonthWeeks(
   options?: {
     locale?: Locale;
     weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-  }
+  },
 ): MonthWeek[] {
   const toWeek = endOfWeek(toDate, options);
   const fromWeek = startOfWeek(fromDate, options);
@@ -76,7 +76,7 @@ export function daysToMonthWeeks(
     const weekNumber = getWeek(date, options);
 
     const existingWeek = result.find(
-      (value) => value.weekNumber === weekNumber
+      (value) => value.weekNumber === weekNumber,
     );
     if (existingWeek) {
       existingWeek.dates.push(date);

package/src/date/utils/is-match.ts

@@ -1,8 +1,7 @@
-import isSameDay from "date-fns/isSameDay";
-import isDate from "date-fns/isDate";
 import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
+import isDate from "date-fns/isDate";
+import isSameDay from "date-fns/isSameDay";
 import isSameMonth from "date-fns/isSameMonth";
-
 import {
   DateAfter,
   DateBefore,

package/src/date/utils/labels.ts

@@ -188,7 +188,7 @@ const modalLabelMonth = (localeCode?: string): string => {
 
 export const modalLabel = (
   localeCode: string,
-  variant: "single" | "multiple" | "range" | "month"
+  variant: "single" | "multiple" | "range" | "month",
 ) => {
   switch (variant) {
     case "single":