@navikt/ds-react 5.12.4 → 5.13.0

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

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";
@@ -43,23 +43,23 @@ export const MonthCaption = () => {
     toYear(setYear(year, newYear));
   };
 
-  const hasPrevYear = () => {
+  const disablePreviousYear = () => {
     return fromDate
       ? isBefore(year?.getFullYear() - 1, fromDate?.getFullYear())
-      : true;
+      : false;
   };
 
-  const hasNextYear = () => {
+  const disableNextYear = () => {
     return toDate
       ? isAfter(year?.getFullYear() + 1, toDate?.getFullYear())
-      : true;
+      : false;
   };
 
   return (
     <div className="navds-date__caption">
       <Button
         className="navds-date__caption-button"
-        disabled={hasPrevYear()}
+        disabled={disablePreviousYear()}
         onClick={() => handleButtonClick(-1)}
         aria-label={labelPrevYear(locale?.code)}
         icon={<ArrowLeftIcon aria-hidden />}
@@ -88,7 +88,7 @@ export const MonthCaption = () => {
       )}
       <Button
         className="navds-date__caption-button"
-        disabled={hasNextYear()}
+        disabled={disableNextYear()}
         onClick={() => handleButtonClick(1)}
         aria-label={labelNextYear(locale?.code)}
         icon={<ArrowRightIcon aria-hidden />}

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', () => {