@navikt/ds-react 5.12.4 → 5.13.0

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

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

@@ -31,7 +31,7 @@ export const GroupedItem: OverridableComponent<
           "navds-dropdown__item",
           "navds-body-short",
           "navds-body-short--small",
-          className
+          className,
         )}
       />
     </dd>

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

@@ -34,7 +34,7 @@ export const DescriptionList = forwardRef(
     <dl {...rest} ref={ref} className={cl("navds-dropdown__list", className)}>
       {children}
     </dl>
-  )
+  ),
 ) as GroupedListType;
 
 DescriptionList.Heading = GroupedHeading;

package/src/dropdown/Menu/List/Item.tsx

@@ -28,7 +28,7 @@ export const ListItem: OverridableComponent<ListItemProps, HTMLButtonElement> =
             "navds-dropdown__item",
             "navds-body-short",
             "navds-body-short--small",
-            className
+            className,
           )}
         />
       </li>

package/src/dropdown/Menu/index.tsx

@@ -86,7 +86,7 @@ export const Menu = forwardRef<HTMLDivElement, MenuProps>(
         }}
       />
     );
-  }
+  },
 ) as MenuType;
 
 Menu.List = List;

package/src/dropdown/dropdown.stories.tsx

@@ -1,6 +1,6 @@
+import { Meta } from "@storybook/react";
 import React, { useState } from "react";
 import { Dropdown } from "..";
-import { Meta } from "@storybook/react";
 import { Button } from "../button";
 
 export default {

package/src/expansion-card/ExpansionCard.tsx

@@ -114,7 +114,7 @@ export const ExpansionCard = forwardRef<HTMLDivElement, ExpansionCardProps>(
       size = "medium",
       ...rest
     },
-    ref
+    ref,
   ) => {
     const [_open, _setOpen] = useState(defaultOpen);
 
@@ -144,13 +144,13 @@ export const ExpansionCard = forwardRef<HTMLDivElement, ExpansionCardProps>(
             {
               "navds-expansioncard--open": open ?? _open,
               "navds-expansioncard--no-animation": !shouldFade.current,
-            }
+            },
           )}
           ref={ref}
         />
       </ExpansionCardContext.Provider>
     );
-  }
+  },
 ) as ExpansionCardComponent;
 
 ExpansionCard.Header = ExpansionCardHeader;

package/src/expansion-card/ExpansionCardContent.tsx

@@ -16,7 +16,7 @@ const ExpansionCardContent = forwardRef<
 
   if (panelContext === null) {
     console.error(
-      "<ExpansionCard.Content> has to be used within an <ExpansionCard>"
+      "<ExpansionCard.Content> has to be used within an <ExpansionCard>",
     );
     return null;
   }

package/src/expansion-card/ExpansionCardDescription.tsx

@@ -16,7 +16,7 @@ export const ExpansionCardDescription = forwardRef<
 
   if (panelContext === null) {
     console.error(
-      "<ExpansionCard.Description> has to be used within an <ExpansionCard>"
+      "<ExpansionCard.Description> has to be used within an <ExpansionCard>",
     );
     return null;
   }

package/src/expansion-card/ExpansionCardHeader.tsx

@@ -1,6 +1,6 @@
-import { ChevronDownIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
+import { ChevronDownIcon } from "@navikt/aksel-icons";
 import { ExpansionCardContext } from "./context";
 
 export interface ExpansionCardHeaderProps
@@ -16,7 +16,7 @@ const ExpansionCardHeader = forwardRef<
 
   if (panelContext === null) {
     console.error(
-      "<ExpansionCard.Header> has to be used within an <ExpansionCard>"
+      "<ExpansionCard.Header> has to be used within an <ExpansionCard>",
     );
     return null;
   }

package/src/expansion-card/ExpansionCardTitle.tsx

@@ -25,8 +25,8 @@ export const ExpansionCardTitle: OverridableComponent<
         `navds-expansioncard__title--${size}`,
         "navds-heading",
         `navds-heading--${size}`,
-        className
+        className,
       )}
     />
-  )
+  ),
 );

package/src/expansion-card/expansion-card.stories.tsx

@@ -1,6 +1,6 @@
-import { PlantIcon } from "@navikt/aksel-icons";
 import { Meta, StoryFn } from "@storybook/react";
 import React, { useState } from "react";
+import { PlantIcon } from "@navikt/aksel-icons";
 import { ExpansionCard, ExpansionCardProps } from ".";
 import { BodyLong } from "../typography";
 

package/src/form/ConfirmationPanel.test.tsx

@@ -1,6 +1,6 @@
-import React from "react";
 import { render, screen } from "@testing-library/react";
 import faker from "faker";
+import React from "react";
 import { ConfirmationPanel } from ".";
 
 test("omits error id from input", async () => {

package/src/form/ConfirmationPanel.tsx

@@ -52,7 +52,7 @@ export const ConfirmationPanel = forwardRef<
 >(({ className, children, label, ...props }, ref) => {
   const { errorId, showErrorMsg, hasError, size, inputProps } = useFormField(
     props,
-    "confirmation-panel"
+    "confirmation-panel",
   );
 
   const id = useId();
@@ -82,7 +82,7 @@ export const ConfirmationPanel = forwardRef<
           {...inputProps}
           aria-describedby={cl(
             inputProps["aria-describedby"],
-            children && `confirmation-panel-${id}`
+            children && `confirmation-panel-${id}`,
           )}
           error={hasError}
           size={size}

package/src/form/Fieldset/Fieldset.tsx

@@ -79,7 +79,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
             {
               "navds-fieldset--error": hasError,
               "navds-fieldset--readonly": readOnly,
-            }
+            },
           )}
         >
           <Label
@@ -118,7 +118,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
         </fieldset>
       </FieldsetContext.Provider>
     );
-  }
+  },
 );
 
 export default Fieldset;

package/src/form/ReadOnlyIcon.tsx

@@ -1,5 +1,5 @@
-import { PadlockLockedFillIcon } from "@navikt/aksel-icons";
 import React from "react";
+import { PadlockLockedFillIcon } from "@navikt/aksel-icons";
 
 export const ReadOnlyIcon = ({
   readOnly,