@navikt/ds-react 5.12.5 → 5.14.0

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

@@ -1,6 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import { OverridableComponent } from "../../../util";
+import { composeEventHandlers } from "../../../util/composeEventHandlers";
+import { OverridableComponent } from "../../../util/types";
 import { DropdownContext } from "../../context";
 
 export interface GroupedItemProps
@@ -14,28 +15,27 @@ export interface GroupedItemProps
 export const GroupedItem: OverridableComponent<
   GroupedItemProps,
   HTMLButtonElement
-> = forwardRef(({ as: Component = "button", className, ...rest }, ref) => {
-  const context = useContext(DropdownContext);
+> = forwardRef(
+  ({ as: Component = "button", className, onClick, ...rest }, ref) => {
+    const context = useContext(DropdownContext);
 
-  return (
-    <dd className="navds-dropdown__list-item">
-      <Component
-        {...rest}
-        value={rest.children}
-        onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-          context?.onSelect?.(event);
-          rest?.onClick?.(event);
-        }}
-        ref={ref}
-        className={cl(
-          "navds-dropdown__item",
-          "navds-body-short",
-          "navds-body-short--small",
-          className
-        )}
-      />
-    </dd>
-  );
-});
+    return (
+      <dd className="navds-dropdown__list-item">
+        <Component
+          {...rest}
+          value={rest.children}
+          onClick={composeEventHandlers(onClick, context?.onSelect)}
+          ref={ref}
+          className={cl(
+            "navds-dropdown__item",
+            "navds-body-short",
+            "navds-body-short--small",
+            className,
+          )}
+        />
+      </dd>
+    );
+  },
+);
 
 export default GroupedItem;

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

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../../../util";
+import { OverridableComponent } from "../../../util/types";
 import GroupedHeading, { GroupedHeadingProps } from "./GroupedHeading";
 import GroupedItem, { GroupedItemProps } from "./GroupedItem";
 
@@ -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

@@ -1,6 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import { OverridableComponent } from "../../../util";
+import { composeEventHandlers } from "../../../util/composeEventHandlers";
+import { OverridableComponent } from "../../../util/types";
 import { DropdownContext } from "../../context";
 
 export interface ListItemProps extends React.ButtonHTMLAttributes<HTMLElement> {
@@ -11,28 +12,27 @@ export interface ListItemProps extends React.ButtonHTMLAttributes<HTMLElement> {
 }
 
 export const ListItem: OverridableComponent<ListItemProps, HTMLButtonElement> =
-  forwardRef(({ as: Component = "button", className, ...rest }, ref) => {
-    const context = useContext(DropdownContext);
+  forwardRef(
+    ({ as: Component = "button", className, onClick, ...rest }, ref) => {
+      const context = useContext(DropdownContext);
 
-    return (
-      <li className="navds-dropdown__list-item">
-        <Component
-          {...rest}
-          value={rest.children}
-          onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-            context?.onSelect?.(event);
-            rest?.onClick?.(event);
-          }}
-          ref={ref}
-          className={cl(
-            "navds-dropdown__item",
-            "navds-body-short",
-            "navds-body-short--small",
-            className
-          )}
-        />
-      </li>
-    );
-  });
+      return (
+        <li className="navds-dropdown__list-item">
+          <Component
+            {...rest}
+            value={rest.children}
+            onClick={composeEventHandlers(onClick, context?.onSelect)}
+            ref={ref}
+            className={cl(
+              "navds-dropdown__item",
+              "navds-body-short",
+              "navds-body-short--small",
+              className,
+            )}
+          />
+        </li>
+      );
+    },
+  );
 
 export default ListItem;

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

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../../../util";
+import { OverridableComponent } from "../../../util/types";
 import ListItem, { ListItemProps } from "./Item";
 
 export interface ListProps extends React.HTMLAttributes<HTMLUListElement> {

package/src/dropdown/Menu/index.tsx

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

package/src/dropdown/Toggle.tsx

@@ -1,5 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
+import { composeEventHandlers } from "../util/composeEventHandlers";
 import { DropdownContext } from "./context";
 
 export interface ToggleProps
@@ -21,6 +22,13 @@ export const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
 
     const { setAnchorEl, handleToggle, isOpen } = context;
 
+    const handleClick = (
+      e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+    ) => {
+      setAnchorEl(e.currentTarget);
+      handleToggle(!isOpen);
+    };
+
     return (
       <button
         {...rest}
@@ -33,16 +41,12 @@ export const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
             ref.current = el;
           }
         }}
-        onClick={(e) => {
-          setAnchorEl(e.currentTarget);
-          handleToggle(!isOpen);
-          onClick && onClick(e);
-        }}
+        onClick={composeEventHandlers(onClick, handleClick)}
         aria-expanded={isOpen}
         className={cl("navds-dropdown__toggle", className)}
       />
     );
-  }
+  },
 );
 
 export default Toggle;

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

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef, useRef, useState } from "react";
-import { OverridableComponent } from "../util";
+import { OverridableComponent } from "../util/types";
 import ExpansionCardContent, {
   ExpansionCardContentProps,
 } from "./ExpansionCardContent";
@@ -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

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../util";
+import { OverridableComponent } from "../util/types";
 
 export interface ExpansionCardTitleProps
   extends React.HTMLAttributes<HTMLHeadingElement> {
@@ -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

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { BodyLong, ErrorMessage } from "../typography";
-import { useId } from "../util";
+import { useId } from "../util/hooks";
 import { Checkbox, CheckboxProps } from "./checkbox";
 import { useFormField } from "./useFormField";
 
@@ -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

@@ -1,8 +1,9 @@
 import cl from "clsx";
 import React, { forwardRef, useState } from "react";
 import { BodyShort, ErrorMessage, Label } from "../typography";
-import { omit, useId } from "../util";
+import { omit } from "../util";
 import TextareaAutosize from "../util/TextareaAutoSize";
+import { useId } from "../util/hooks";
 import { ReadOnlyIcon } from "./ReadOnlyIcon";
 import Counter from "./TextareaCounter";
 import { FormFieldProps, useFormField } from "./useFormField";
@@ -102,7 +103,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 +132,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             "navds-textarea--autoscrollbar": UNSAFE_autoScrollbar,
             [`navds-textarea--resize-${resize === true ? "both" : resize}`]:
               resize,
-          }
+          },
         )}
       >
         <Label
@@ -172,7 +173,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 +203,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         </div>
       </div>
     );
-  }
+  },
 );
 
 export default Textarea;

package/src/form/checkbox/Checkbox.test.tsx

@@ -16,7 +16,7 @@ test("checkbox group chains onChange calls", async () => {
       <Checkbox onChange={onChange} value={value}>
         {label}
       </Checkbox>
-    </CheckboxGroup>
+    </CheckboxGroup>,
   );
 
   fireEvent.click(screen.getByLabelText(label));
@@ -42,11 +42,11 @@ describe("Checkbox handles controlled-state correctly", () => {
     fireEvent.click(screen.getByLabelText("label2"));
 
     expect((screen.getByLabelText("label1") as HTMLInputElement).checked).toBe(
-      true
+      true,
     );
 
     expect((screen.getByLabelText("label2") as HTMLInputElement).checked).toBe(
-      true
+      true,
     );
   });
 
@@ -57,7 +57,7 @@ describe("Checkbox handles controlled-state correctly", () => {
       <CheckboxComponent
         onChange={onGroupChange}
         value={["value1", "value2"]}
-      />
+      />,
     );
 
     fireEvent.click(screen.getByLabelText("label1"));
@@ -71,19 +71,19 @@ describe("Checkbox handles controlled-state correctly", () => {
     const { rerender } = render(<CheckboxComponent value={[]} />);
 
     expect((screen.getByLabelText("label1") as HTMLInputElement).checked).toBe(
-      false
+      false,
     );
     expect((screen.getByLabelText("label2") as HTMLInputElement).checked).toBe(
-      false
+      false,
     );
 
     rerender(<CheckboxComponent value={["value1", "value2"]} />);
 
     expect((screen.getByLabelText("label1") as HTMLInputElement).checked).toBe(
-      true
+      true,
     );
     expect((screen.getByLabelText("label2") as HTMLInputElement).checked).toBe(
-      true
+      true,
     );
   });
 });

package/src/form/checkbox/Checkbox.tsx

@@ -1,7 +1,8 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { BodyShort } from "../../typography";
-import { omit, useId } from "../../util";
+import { omit } from "../../util";
+import { useId } from "../../util/hooks";
 import { ReadOnlyIcon } from "../ReadOnlyIcon";
 import { CheckboxProps } from "./types";
 import useCheckbox from "./useCheckbox";
@@ -23,7 +24,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             "navds-checkbox--error": hasError,
             "navds-checkbox--disabled": inputProps.disabled,
             "navds-checkbox--readonly": readOnly,
-          }
+          },
         )}
       >
         <input
@@ -57,7 +58,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             !!props["aria-labelledby"] && props["aria-labelledby"],
             {
               [descriptionId]: props.description,
-            }
+            },
           )}
         />
         <label htmlFor={inputProps.id} className="navds-checkbox__label">
@@ -110,7 +111,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
         </label>
       </div>
     );
-  }
+  },
 );
 
 export default Checkbox;

package/src/form/checkbox/CheckboxGroup.tsx

@@ -9,7 +9,7 @@ export interface CheckboxGroupState {
 }
 
 export const CheckboxGroupContext = createContext<CheckboxGroupState | null>(
-  null
+  null,
 );
 
 export interface CheckboxGroupProps
@@ -56,7 +56,7 @@ export const CheckboxGroup = forwardRef<
 >(
   (
     { value, defaultValue, onChange = () => {}, children, className, ...rest },
-    ref
+    ref,
   ) => {
     const fieldset = useContext(FieldsetContext);
 
@@ -79,7 +79,7 @@ export const CheckboxGroup = forwardRef<
         className={cl(
           className,
           "navds-checkbox-group",
-          `navds-checkbox-group--${rest.size ?? fieldset?.size ?? "medium"}`
+          `navds-checkbox-group--${rest.size ?? fieldset?.size ?? "medium"}`,
         )}
         nativeReadOnly={false}
       >
@@ -94,7 +94,7 @@ export const CheckboxGroup = forwardRef<
         </CheckboxGroupContext.Provider>
       </Fieldset>
     );
-  }
+  },
 );
 
 export default CheckboxGroup;