@navikt/ds-react 5.13.0 → 5.14.0

package/esm/util/hooks/useMedia.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMedia.js","sourceRoot":"","sources":["../../../src/util/hooks/useMedia.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,CAAC,MAAM,YAAY,GACvB,OAAO,MAAM,KAAK,WAAW,IAAI,MAAM,CAAC,UAAU,KAAK,SAAS,CAAC;AAEnE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CACtB,KAAa,EACb,QAAkB,EACG,EAAE;IACvB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAEjD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,EAAE,CAAC;YACjB,OAAO;QACT,CAAC;QACD,MAAM,cAAc,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QAEhD,UAAU,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;QAEnC,MAAM,QAAQ,GAAG,CAAC,GAAwB,EAAE,EAAE;YAC5C,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAC1B,CAAC,CAAC;QAEF,cAAc,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAEpD,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QACzD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC"}

package/esm/util/hooks/useMergeRefs.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+type PossibleRef<T> = React.Ref<T> | undefined;
+/**
+ * Use `useMergeRefs`
+ * @internal
+ */
+export declare function mergeRefs<T>(refs: PossibleRef<T>[]): React.RefCallback<T>;
+/**
+ * Merges refs within useCallback
+ * @internal
+ * @param ...refs: React.Ref<T> | undefined
+ * @returns React.useCallback(mergeRefs(refs), refs)
+ */
+export declare function useMergeRefs<T>(...refs: PossibleRef<T>[]): (instance: T | null) => void;
+export {};

package/esm/util/hooks/useMergeRefs.js

@@ -0,0 +1,30 @@
+/* https://github.com/radix-ui/primitives/blob/main/packages/react/compose-refs/src/composeRefs.tsx */
+import React from "react";
+// https://github.com/gregberge/react-merge-refs
+/**
+ * Use `useMergeRefs`
+ * @internal
+ */
+export function mergeRefs(refs) {
+    return (value) => {
+        refs.forEach((ref) => {
+            if (typeof ref === "function") {
+                ref(value);
+            }
+            else if (ref !== null && ref !== undefined) {
+                ref.current = value;
+            }
+        });
+    };
+}
+/**
+ * Merges refs within useCallback
+ * @internal
+ * @param ...refs: React.Ref<T> | undefined
+ * @returns React.useCallback(mergeRefs(refs), refs)
+ */
+export function useMergeRefs(...refs) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    return React.useCallback(mergeRefs(refs), refs);
+}
+//# sourceMappingURL=useMergeRefs.js.map

package/esm/util/hooks/useMergeRefs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMergeRefs.js","sourceRoot":"","sources":["../../../src/util/hooks/useMergeRefs.ts"],"names":[],"mappings":"AAAA,sGAAsG;AACtG,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,gDAAgD;AAChD;;;GAGG;AACH,MAAM,UAAU,SAAS,CAAI,IAAsB;IACjD,OAAO,CAAC,KAAK,EAAE,EAAE;QACf,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;YACnB,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE,CAAC;gBAC9B,GAAG,CAAC,KAAK,CAAC,CAAC;YACb,CAAC;iBAAM,IAAI,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;gBAC5C,GAAwC,CAAC,OAAO,GAAG,KAAK,CAAC;YAC5D,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,YAAY,CAAI,GAAG,IAAsB;IACvD,uDAAuD;IACvD,OAAO,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;AAClD,CAAC"}

package/esm/util/hooks/usePrevious.d.ts

@@ -0,0 +1 @@
+export declare const usePrevious: <T>(value: T) => T | undefined;

package/esm/util/{usePrevious.js → hooks/usePrevious.js}

@@ -6,12 +6,11 @@ import { useEffect, useRef } from "react";
  * https://usehooks.com/usePrevious/
  * https://blog.logrocket.com/accessing-previous-props-state-react-hooks/
  */
-const usePrevious = (value) => {
+export const usePrevious = (value) => {
     const ref = useRef(value);
     useEffect(() => {
         ref.current = value;
     }, [value]);
     return ref.current;
 };
-export default usePrevious;
 //# sourceMappingURL=usePrevious.js.map

package/esm/util/hooks/usePrevious.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePrevious.js","sourceRoot":"","sources":["../../../src/util/hooks/usePrevious.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAI,KAAQ,EAAiB,EAAE;IACxD,MAAM,GAAG,GAAG,MAAM,CAAI,KAAK,CAAC,CAAC;IAC7B,SAAS,CAAC,GAAG,EAAE;QACb,GAAG,CAAC,OAAO,GAAG,KAAK,CAAC;IACtB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACZ,OAAO,GAAG,CAAC,OAAO,CAAC;AACrB,CAAC,CAAC"}

package/esm/util/index.d.ts

@@ -1,7 +1,6 @@
-export * from "./OverridableComponent";
+export type * from "./types";
 export { default as debounce } from "./debounce";
-export { default as mergeRefs } from "./mergeRefs";
 export * from "./omit";
-export * from "./useClientLayoutEffect";
-export * from "./useEventListener";
-export * from "./useId";
+export { useClientLayoutEffect } from "./hooks/useClientLayoutEffect";
+export { useEventListener } from "./hooks/useEventListener";
+export { useId } from "./hooks/useId";

package/esm/util/index.js

@@ -1,8 +1,6 @@
-export * from "./OverridableComponent";
 export { default as debounce } from "./debounce";
-export { default as mergeRefs } from "./mergeRefs";
 export * from "./omit";
-export * from "./useClientLayoutEffect";
-export * from "./useEventListener";
-export * from "./useId";
+export { useClientLayoutEffect } from "./hooks/useClientLayoutEffect";
+export { useEventListener } from "./hooks/useEventListener";
+export { useId } from "./hooks/useId";
 //# sourceMappingURL=index.js.map

package/esm/util/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/util/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,cAAc,QAAQ,CAAC;AACvB,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/util/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,cAAc,QAAQ,CAAC;AACvB,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC"}

package/esm/util/types/OverridableComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverridableComponent.js","sourceRoot":"","sources":["../../../src/util/types/OverridableComponent.ts"],"names":[],"mappings":""}

package/esm/util/types/index.d.ts

@@ -0,0 +1 @@
+export type { OverridableComponent } from "./OverridableComponent";

package/esm/util/types/index.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.js.map

package/esm/util/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/util/types/index.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "5.13.0",
+  "version": "5.14.0",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -38,8 +38,8 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.25.4",
-    "@navikt/aksel-icons": "^5.13.0",
-    "@navikt/ds-tokens": "^5.13.0",
+    "@navikt/aksel-icons": "^5.14.0",
+    "@navikt/ds-tokens": "^5.14.0",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

package/src/accordion/AccordionHeader.tsx

@@ -2,6 +2,7 @@ import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
 import { Heading } from "../typography";
+import { composeEventHandlers } from "../util/composeEventHandlers";
 import { AccordionContext } from "./AccordionContext";
 import { AccordionItemContext } from "./AccordionItem";
 
@@ -30,10 +31,7 @@ const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
         ref={ref}
         {...rest}
         className={cl("navds-accordion__header", className)}
-        onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-          itemContext.toggleOpen();
-          onClick && onClick(e);
-        }}
+        onClick={composeEventHandlers(onClick, itemContext.toggleOpen)}
         aria-expanded={itemContext.open}
         type="button"
       >

package/src/accordion/AccordionItem.tsx

@@ -38,7 +38,7 @@ export const AccordionItemContext =
 const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
   (
     { children, className, open, defaultOpen = false, onOpenChange, ...rest },
-    ref
+    ref,
   ) => {
     const [_open, _setOpen] = useControllableState({
       defaultValue: defaultOpen,
@@ -78,7 +78,7 @@ const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
         </AccordionItemContext.Provider>
       </div>
     );
-  }
+  },
 );
 
 export default AccordionItem;

package/src/alert/alert.stories.tsx

@@ -1,6 +1,5 @@
-import { expect } from "@storybook/jest";
 import type { Meta, StoryObj } from "@storybook/react";
-import { userEvent, within } from "@storybook/testing-library";
+import { expect, userEvent, within } from "@storybook/test";
 import React from "react";
 import { Alert, AlertProps } from ".";
 import { BodyLong, Heading as DsHeading, Link } from "..";

package/src/button/Button.tsx

@@ -1,13 +1,12 @@
 import cl from "clsx";
-import React, { forwardRef, useMemo, useRef, useState } from "react";
+import React, { forwardRef, useRef, useState } from "react";
 import { Loader } from "../loader";
 import { Label } from "../typography";
-import {
-  OverridableComponent,
-  mergeRefs,
-  omit,
-  useClientLayoutEffect,
-} from "../util";
+import { omit } from "../util";
+import { composeEventHandlers } from "../util/composeEventHandlers";
+import { useClientLayoutEffect } from "../util/hooks";
+import { useMergeRefs } from "../util/hooks/useMergeRefs";
+import { OverridableComponent } from "../util/types";
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -84,7 +83,7 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
       const buttonRef = useRef<HTMLButtonElement | null>(null);
       const [widthOverride, setWidthOverride] = useState<number>();
 
-      const mergedRef = useMemo(() => mergeRefs([buttonRef, ref]), [ref]);
+      const mergedRef = useMergeRefs(buttonRef, ref);
 
       useClientLayoutEffect(() => {
         if (loading) {
@@ -103,22 +102,18 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
       const filterProps: React.ButtonHTMLAttributes<HTMLButtonElement> =
         disabled ?? widthOverride ? omit(rest, ["href"]) : rest;
 
+      const handleKeyUp = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+        if (e.key === " " && !disabled && !widthOverride) {
+          e.currentTarget.click();
+        }
+      };
+
       return (
         <Component
           {...(Component !== "button" ? { role: "button" } : {})}
           {...filterProps}
           ref={mergedRef}
-          onKeyUp={(e: React.KeyboardEvent<HTMLButtonElement>) => {
-            filterProps.onKeyUp?.(e);
-            if (
-              e.key === " " &&
-              !disabled &&
-              !widthOverride &&
-              !e.isDefaultPrevented()
-            ) {
-              e.currentTarget.click();
-            }
-          }}
+          onKeyUp={composeEventHandlers(filterProps.onKeyUp, handleKeyUp)}
           className={cl(
             className,
             "navds-button",

package/src/chips/Chips.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
-import { OverridableComponent } from "../util";
+import { OverridableComponent } from "../util/types";
 import RemovableChips, { RemovableChipsProps } from "./Removable";
 import ToggleChips, { ToggleChipsProps } from "./Toggle";
 

package/src/chips/Removable.tsx

@@ -1,6 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { XMarkIcon } from "@navikt/aksel-icons";
+import { composeEventHandlers } from "../util/composeEventHandlers";
 
 export interface RemovableChipsProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -33,6 +34,7 @@ export const RemovableChips = forwardRef<
       removeLabel = "slett",
       onDelete,
       type = "button",
+      onClick,
       ...rest
     },
     ref,
@@ -48,10 +50,7 @@ export const RemovableChips = forwardRef<
           `navds-chips__removable--${variant}`,
         )}
         aria-label={`${children} ${removeLabel}`}
-        onClick={(e) => {
-          onDelete?.();
-          rest?.onClick?.(e);
-        }}
+        onClick={composeEventHandlers(onClick, onDelete)}
       >
         <span className="navds-chips__chip-text">{children}</span>
         <span className="navds-chips__removable-icon">

package/src/chips/Toggle.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 ToggleChipsProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {

package/src/copybutton/CopyButton.tsx

@@ -8,6 +8,7 @@ import React, {
 } from "react";
 import { CheckmarkIcon, FilesIcon } from "@navikt/aksel-icons";
 import { Label } from "../typography";
+import { composeEventHandlers } from "../util/composeEventHandlers";
 import copy from "../util/copy";
 
 export interface CopyButtonProps
@@ -97,6 +98,7 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
       title = "Kopier",
       activeTitle = "Kopiert",
       iconPosition = "left",
+      onClick,
       ...rest
     },
     ref,
@@ -110,14 +112,11 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
       };
     }, []);
 
-    const handleClick = (
-      event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
-    ) => {
+    const handleClick = () => {
       timeoutRef.current && clearTimeout(timeoutRef.current);
       copy(copyText);
       setActive(true);
       onActiveChange?.(true);
-      rest.onClick?.(event);
 
       timeoutRef.current = window.setTimeout(() => {
         setActive(false);
@@ -160,7 +159,7 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
             "navds-copybutton--active": active,
           },
         )}
-        onClick={handleClick}
+        onClick={composeEventHandlers(onClick, handleClick)}
       >
         <span className="navds-copybutton__content">
           {iconPosition === "left" && copyIcon}

package/src/copybutton/copy-button.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { userEvent, within } from "@storybook/testing-library";
+import { userEvent, within } from "@storybook/test";
 import React from "react";
 import { LinkIcon, ThumbUpIcon } from "@navikt/aksel-icons";
 import { CopyButton } from ".";

package/src/date/datepicker/DatePicker.tsx

@@ -1,8 +1,10 @@
 import cl from "clsx";
 import isWeekend from "date-fns/isWeekend";
-import React, { forwardRef, useMemo, useRef, useState } from "react";
+import React, { forwardRef, useRef, useState } from "react";
 import { DateRange, DayPicker, isMatch } from "react-day-picker";
-import { mergeRefs, omit, useId } from "../../util";
+import { omit } from "../../util";
+import { useId } from "../../util/hooks";
+import { useMergeRefs } from "../../util/hooks/useMergeRefs";
 import { DateContext } from "../context";
 import { DatePickerInput } from "../parts/DateInput";
 import { DateWrapper } from "../parts/DateWrapper";
@@ -88,7 +90,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     const [open, setOpen] = useState(_open ?? false);
 
     const wrapperRef = useRef<HTMLDivElement | null>(null);
-    const mergedRef = useMemo(() => mergeRefs([wrapperRef, ref]), [ref]);
+    const mergedRef = useMergeRefs(wrapperRef, ref);
 
     const [selectedDates, setSelectedDates] = React.useState<
       Date | Date[] | DateRange | undefined

package/src/date/datepicker/parts/WeekRow.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { useDayPicker } from "react-day-picker";
 import { Show } from "../../../layout/responsive";
 import { Detail } from "../../../typography";
-import { useId } from "../../../util";
+import { useId } from "../../../util/hooks";
 import { getMonthWeeks } from "../../utils/get-month-weeks";
 import { labelWeek } from "../../utils/labels";
 import WeekNumber from "./WeekNumber";

package/src/date/monthpicker/MonthPicker.tsx

@@ -1,7 +1,8 @@
 import cl from "clsx";
-import React, { forwardRef, useMemo, useRef, useState } from "react";
+import React, { forwardRef, useRef, useState } from "react";
 import { RootProvider } from "react-day-picker";
-import { mergeRefs, useId } from "../../util";
+import { useId } from "../../util/hooks";
+import { useMergeRefs } from "../../util/hooks/useMergeRefs";
 import { DateContext, SharedMonthProvider } from "../context";
 import { MonthPickerInput } from "../parts/DateInput";
 import { DateWrapper } from "../parts/DateWrapper";
@@ -81,7 +82,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
     const [open, setOpen] = useState(_open ?? false);
 
     const wrapperRef = useRef<HTMLDivElement | null>(null);
-    const mergedRef = useMemo(() => mergeRefs([wrapperRef, ref]), [ref]);
+    const mergedRef = useMergeRefs(wrapperRef, ref);
 
     const [selectedMonth, setSelectedMonth] = useState<Date | undefined>(
       defaultSelected,

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/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";
 

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/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/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";

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> {

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

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

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