@navikt/ds-react 5.12.5 → 5.13.0

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,

package/src/form/Select.tsx

@@ -1,6 +1,6 @@
-import { ChevronDownIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
-import React, { forwardRef, SelectHTMLAttributes } from "react";
+import React, { SelectHTMLAttributes, forwardRef } from "react";
+import { ChevronDownIcon } from "@navikt/aksel-icons";
 import { BodyShort, ErrorMessage, Label } from "../typography";
 import { omit } from "../util";
 import { ReadOnlyIcon } from "./ReadOnlyIcon";
@@ -83,7 +83,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
         if (
           readOnly &&
           ["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft", " "].includes(
-            evt.key
+            evt.key,
           )
         ) {
           evt.preventDefault();
@@ -102,7 +102,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
             "navds-form-field--readonly": readOnly,
             "navds-select--error": hasError,
             "navds-select--readonly": readOnly,
-          }
+          },
         )}
       >
         <Label
@@ -136,7 +136,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
             className={cl(
               "navds-select__input",
               "navds-body-short",
-              `navds-body-short--${size ?? "medium"}`
+              `navds-body-short--${size ?? "medium"}`,
             )}
             size={htmlSize}
           >
@@ -156,7 +156,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
         </div>
       </div>
     );
-  }
+  },
 );
 
 export default Select;

package/src/form/Switch.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, {
-  forwardRef,
   InputHTMLAttributes,
+  forwardRef,
   useEffect,
   useState,
 } from "react";
@@ -86,7 +86,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
     } = props;
 
     const [checked, setChecked] = useState(
-      defaultChecked ?? checkedProp ?? false
+      defaultChecked ?? checkedProp ?? false,
     );
 
     useEffect(() => {
@@ -104,7 +104,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
             "navds-switch--loading": loading,
             "navds-switch--disabled": inputProps.disabled ?? loading,
             "navds-switch--readonly": readOnly,
-          }
+          },
         )}
       >
         <input
@@ -168,7 +168,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
         </label>
       </div>
     );
-  }
+  },
 );
 
 export default Switch;

package/src/form/TextField.tsx

@@ -1,5 +1,5 @@
 import cl from "clsx";
-import React, { forwardRef, InputHTMLAttributes } from "react";
+import React, { InputHTMLAttributes, forwardRef } from "react";
 import { BodyShort, ErrorMessage, Label } from "../typography";
 import { omit } from "../util";
 import { ReadOnlyIcon } from "./ReadOnlyIcon";
@@ -81,7 +81,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
             "navds-form-field--disabled": !!inputProps.disabled,
             "navds-form-field--readonly": readOnly,
             "navds-text-field--readonly": readOnly,
-          }
+          },
         )}
       >
         <Label
@@ -116,7 +116,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           className={cl(
             "navds-text-field__input",
             "navds-body-short",
-            `navds-body-short--${size ?? "medium"}`
+            `navds-body-short--${size ?? "medium"}`,
           )}
           size={htmlSize}
         />
@@ -132,7 +132,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         </div>
       </div>
     );
-  }
+  },
 );
 
 export default TextField;

package/src/form/Textarea.tsx

@@ -102,7 +102,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
     const hasMaxLength = maxLength !== undefined && maxLength > 0;
 
     const [controlledValue, setControlledValue] = useState<string>(
-      props?.defaultValue ?? ""
+      props?.defaultValue ?? "",
     );
 
     const getMinRows = () => {
@@ -131,7 +131,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             "navds-textarea--autoscrollbar": UNSAFE_autoScrollbar,
             [`navds-textarea--resize-${resize === true ? "both" : resize}`]:
               resize,
-          }
+          },
         )}
       >
         <Label
@@ -172,7 +172,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             className={cl(
               "navds-textarea__input",
               "navds-body-short",
-              `navds-body-short--${size ?? "medium"}`
+              `navds-body-short--${size ?? "medium"}`,
             )}
             {...(describedBy ? { "aria-describedby": describedBy } : {})}
           />
@@ -202,7 +202,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         </div>
       </div>
     );
-  }
+  },
 );
 
 export default Textarea;