@navikt/ds-react 5.12.5 → 5.14.0

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/parts/DateWrapper.tsx

@@ -4,7 +4,7 @@ import { Button } from "../../button";
 import { Modal } from "../../modal";
 import { ModalContext } from "../../modal/ModalContext";
 import { Popover } from "../../popover";
-import { useMedia } from "../../util/useMedia";
+import { useMedia } from "../../util/hooks";
 import { modalCloseButtonLabel, modalLabel } from "../utils/labels";
 
 type DateWrapperProps = {

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

package/src/date/utils/navigation.ts

@@ -1,5 +1,5 @@
 import setYear from "date-fns/setYear";
-import { isMatch, Matcher } from "./is-match";
+import { Matcher, isMatch } from "./is-match";
 
 export const nextEnabled = (
   months,
@@ -10,7 +10,7 @@ export const nextEnabled = (
   yearState: Date,
   dropdownCaption: boolean,
   fromDate?: Date,
-  toDate?: Date
+  toDate?: Date,
 ): Date => {
   const currentIndex = currentMonth.getMonth();
 
@@ -20,7 +20,7 @@ export const nextEnabled = (
       months,
       yearState,
       disabled,
-      "home"
+      "home",
     );
     if (nextDate) {
       return nextDate;
@@ -32,7 +32,7 @@ export const nextEnabled = (
       months,
       yearState,
       disabled,
-      "end"
+      "end",
     );
     if (nextDate) {
       return nextDate;
@@ -64,7 +64,7 @@ export const nextEnabled = (
       false,
       dropdownCaption,
       fromDate,
-      toDate
+      toDate,
     );
     if (nextMonth) {
       return setYear(months[nextMonth.index], nextMonth.year);
@@ -80,7 +80,7 @@ export const nextEnabled = (
       false,
       dropdownCaption,
       fromDate,
-      toDate
+      toDate,
     );
     if (prevMonth) {
       return setYear(months[prevMonth.index], prevMonth.year);
@@ -91,7 +91,7 @@ export const nextEnabled = (
       months[currentIndex + 4] &&
       !isMatch(
         setYear(months[currentIndex + 4], yearState.getFullYear()),
-        disabled
+        disabled,
       )
     ) {
       return setYear(months[currentIndex + 4], yearState.getFullYear());
@@ -106,7 +106,7 @@ export const nextEnabled = (
       true,
       dropdownCaption,
       fromDate,
-      toDate
+      toDate,
     );
 
     if (
@@ -122,7 +122,7 @@ export const nextEnabled = (
       months[currentIndex - 4] &&
       !isMatch(
         setYear(months[currentIndex - 4], Number(yearState.getFullYear())),
-        disabled
+        disabled,
       )
     )
       return setYear(months[currentIndex - 4], Number(yearState.getFullYear()));
@@ -135,7 +135,7 @@ export const nextEnabled = (
       true,
       dropdownCaption,
       fromDate,
-      toDate
+      toDate,
     );
     if (fallbackPrev)
       return setYear(months[fallbackPrev.index], fallbackPrev.year);
@@ -152,7 +152,7 @@ const loopBack = (
   rowCheck: boolean,
   dropdownCaption: boolean,
   fromDate?: Date,
-  toDate?: Date
+  toDate?: Date,
 ): { index: number; year: number } | undefined => {
   let currentYear = setYear(yearState, Number(yearState.getFullYear()));
   for (let i = currentIndex; i >= -1; i--) {
@@ -162,7 +162,7 @@ const loopBack = (
           dropdownCaption,
           setYear(currentYear, Number(currentYear.getFullYear() - 1)),
           fromDate,
-          toDate
+          toDate,
         )
       )
         return;
@@ -173,7 +173,7 @@ const loopBack = (
     const month = months[i];
     const isDisabled = !isMatch(
       setYear(month, Number(currentYear.getFullYear())),
-      disabled
+      disabled,
     );
     if (rowCheck) {
       if (isDisabled && getRow(i) !== getRow(currentIndex)) {
@@ -196,7 +196,7 @@ const loopForward = (
   rowCheck: boolean,
   dropdownCaption: boolean,
   fromDate?: Date,
-  toDate?: Date
+  toDate?: Date,
 ): { index: number; year: number } | undefined => {
   let currentYear = setYear(yearState, Number(yearState.getFullYear()));
   for (let i = currentIndex + 1; i < months.length + 1; i++) {
@@ -206,7 +206,7 @@ const loopForward = (
           dropdownCaption,
           setYear(currentYear, Number(currentYear.getFullYear() + 1)),
           fromDate,
-          toDate
+          toDate,
         )
       )
         return;
@@ -217,7 +217,7 @@ const loopForward = (
     const month = months[i];
     const isDisabled = !isMatch(
       setYear(month, Number(currentYear.getFullYear())),
-      disabled
+      disabled,
     );
     if (rowCheck) {
       if (isDisabled && getRow(i) !== getRow(currentIndex)) {
@@ -241,7 +241,7 @@ const isOutOfRange = (
   dropdownCaption: boolean,
   year: Date,
   fromDate?: Date,
-  toDate?: Date
+  toDate?: Date,
 ): boolean => {
   if (
     dropdownCaption &&
@@ -261,7 +261,7 @@ const nextOnRow = (
   months,
   yearState: Date,
   disabled: Matcher[],
-  mode: "home" | "end"
+  mode: "home" | "end",
 ) => {
   const row = getRow(currentIndex);
   let monthsOfRow;

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

@@ -1,5 +1,5 @@
-import parse from "date-fns/parse";
 import isBefore from "date-fns/isBefore";
+import parse from "date-fns/parse";
 import sub from "date-fns/sub";
 import { isValidDate } from "./check-dates";
 
@@ -29,7 +29,7 @@ export const parseDate = (
   today: Date,
   locale: Locale,
   type: "date" | "month",
-  allowTwoDigitYear: boolean
+  allowTwoDigitYear: boolean,
 ): Date => {
   let parsed;
   const ALLOWED_FORMATS =
@@ -93,20 +93,20 @@ function assignCenturyToDate(
   dateStr: string,
   format: string,
   today: Date,
-  locale: Locale
+  locale: Locale,
 ) {
   const date20Century = parse(
     appendCenturyToTwoYearDigitDateString(dateStr, "19"),
     format.replace("yy", "yyyy"),
     today,
-    { locale }
+    { locale },
   );
 
   const date21Century = parse(
     appendCenturyToTwoYearDigitDateString(dateStr, "20"),
     format.replace("yy", "yyyy"),
     today,
-    { locale }
+    { locale },
   );
 
   if (isValidDate(date20Century) && isValidDate(date21Century)) {
@@ -114,7 +114,7 @@ function assignCenturyToDate(
       date20Century,
       sub(new Date(), {
         years: 80,
-      })
+      }),
     )
       ? date21Century
       : date20Century;
@@ -125,11 +125,11 @@ function assignCenturyToDate(
 
 function appendCenturyToTwoYearDigitDateString(
   dateString: string,
-  century: "19" | "20"
+  century: "19" | "20",
 ) {
   const twoDigitYear = dateString.slice(-2);
   return `${dateString.slice(
     0,
-    dateString.length - 2
+    dateString.length - 2,
   )}${century}${twoDigitYear}`;
 }

package/src/dropdown/Dropdown.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { useControllableState } from "../util/hooks/useControllableState";
 import Menu, { MenuType } from "./Menu";
 import Toggle, { ToggleProps } from "./Toggle";
 import { DropdownContext } from "./context";
@@ -22,6 +23,10 @@ export interface DropdownProps {
    * Controlled state of the dropdown. When set, you will need to handle onClose and onSelect manually.
    */
   open?: boolean;
+  /**
+   * Change handler for open
+   */
+  onOpenChange?: (open: boolean) => void;
 }
 
 export interface DropdownType extends React.FC<DropdownProps> {
@@ -74,28 +79,26 @@ export const Dropdown = (({
   closeOnSelect = true,
   defaultOpen = false,
   open,
+  onOpenChange,
 }) => {
-  const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
   const [anchorEl, setAnchorEl] = useState<Element | null>(null);
 
-  const handleToggle = (v: boolean) => {
-    if (open === undefined) {
-      setIsOpen(v);
-    }
-  };
+  const [_open, _setOpen] = useControllableState({
+    defaultValue: defaultOpen,
+    value: open,
+    onChange: onOpenChange,
+  });
 
   return (
     <DropdownContext.Provider
       value={{
-        isOpen: open ?? isOpen,
-        handleToggle,
+        isOpen: _open,
+        handleToggle: _setOpen,
         anchorEl,
         setAnchorEl,
         onSelect: (event) => {
           onSelect?.(event);
-          if (closeOnSelect) {
-            open === undefined && setIsOpen(false);
-          }
+          closeOnSelect && _setOpen(false);
         },
       }}
     >

package/src/dropdown/Menu/Divider.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
+import React, { forwardRef } from "react";
 
 export const Divider = forwardRef<
   HTMLHRElement,

package/src/dropdown/Menu/GroupedList/GroupedHeading.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
+import React, { forwardRef } from "react";
 
 export interface GroupedHeadingProps
   extends React.HTMLAttributes<HTMLDetailsElement> {
@@ -20,7 +20,7 @@ export const GroupedHeading = forwardRef<
       "navds-dropdown__list-heading",
       "navds-heading",
       "navds-heading--xsmall",
-      className
+      className,
     )}
   />
 ));