@navikt/ds-react 5.12.5 → 5.14.0

package/cjs/button/Button.js

@@ -43,6 +43,9 @@ const react_1 = __importStar(require("react"));
 const loader_1 = require("../loader");
 const typography_1 = require("../typography");
 const util_1 = require("../util");
+const composeEventHandlers_1 = require("../util/composeEventHandlers");
+const hooks_1 = require("../util/hooks");
+const useMergeRefs_1 = require("../util/hooks/useMergeRefs");
 /**
  * A button component
  * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/button)
@@ -57,8 +60,8 @@ exports.Button = (0, react_1.forwardRef)((_a, ref) => {
     var { as: Component = "button", variant = "primary", className, children, size = "medium", loading = false, disabled, style, icon, iconPosition = "left" } = _a, rest = __rest(_a, ["as", "variant", "className", "children", "size", "loading", "disabled", "style", "icon", "iconPosition"]);
     const buttonRef = (0, react_1.useRef)(null);
     const [widthOverride, setWidthOverride] = (0, react_1.useState)();
-    const mergedRef = (0, react_1.useMemo)(() => (0, util_1.mergeRefs)([buttonRef, ref]), [ref]);
-    (0, util_1.useClientLayoutEffect)(() => {
+    const mergedRef = (0, useMergeRefs_1.useMergeRefs)(buttonRef, ref);
+    (0, hooks_1.useClientLayoutEffect)(() => {
         if (loading) {
             const requestID = window.requestAnimationFrame(() => {
                 var _a, _b;
@@ -71,16 +74,12 @@ exports.Button = (0, react_1.forwardRef)((_a, ref) => {
         }
     }, [loading, children]);
     const filterProps = (disabled !== null && disabled !== void 0 ? disabled : widthOverride) ? (0, util_1.omit)(rest, ["href"]) : rest;
-    return (react_1.default.createElement(Component, Object.assign({}, (Component !== "button" ? { role: "button" } : {}), filterProps, { ref: mergedRef, onKeyUp: (e) => {
-            var _a;
-            (_a = filterProps.onKeyUp) === null || _a === void 0 ? void 0 : _a.call(filterProps, e);
-            if (e.key === " " &&
-                !disabled &&
-                !widthOverride &&
-                !e.isDefaultPrevented()) {
-                e.currentTarget.click();
-            }
-        }, className: (0, clsx_1.default)(className, "navds-button", `navds-button--${variant}`, `navds-button--${size}`, {
+    const handleKeyUp = (e) => {
+        if (e.key === " " && !disabled && !widthOverride) {
+            e.currentTarget.click();
+        }
+    };
+    return (react_1.default.createElement(Component, Object.assign({}, (Component !== "button" ? { role: "button" } : {}), filterProps, { ref: mergedRef, onKeyUp: (0, composeEventHandlers_1.composeEventHandlers)(filterProps.onKeyUp, handleKeyUp), className: (0, clsx_1.default)(className, "navds-button", `navds-button--${variant}`, `navds-button--${size}`, {
             "navds-button--loading": widthOverride,
             "navds-button--icon-only": !!icon && !children,
             "navds-button--disabled": disabled !== null && disabled !== void 0 ? disabled : widthOverride,

package/cjs/chat/Bubble.js

@@ -37,8 +37,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 const typography_1 = require("../typography");
 const Bubble = (0, react_1.forwardRef)((_a, ref) => {
     var { children, className, name, timestamp, backgroundColor, toptextPosition } = _a, rest = __rest(_a, ["children", "className", "name", "timestamp", "backgroundColor", "toptextPosition"]);

package/cjs/chat/Chat.js

@@ -38,10 +38,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Chat = exports.SIZES = exports.POSITIONS = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
-const Bubble_1 = __importDefault(require("./Bubble"));
+const react_1 = __importStar(require("react"));
 const typography_1 = require("../typography");
+const Bubble_1 = __importDefault(require("./Bubble"));
 exports.POSITIONS = ["left", "right"];
 exports.SIZES = ["medium", "small"];
 /**

package/cjs/chips/Chips.js

@@ -40,8 +40,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Chips = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
-const Toggle_1 = __importDefault(require("./Toggle"));
 const Removable_1 = __importDefault(require("./Removable"));
+const Toggle_1 = __importDefault(require("./Toggle"));
 /**
  * A component that displays a list of items as chips.
  *

package/cjs/chips/Removable.js

@@ -38,16 +38,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RemovableChips = void 0;
-const aksel_icons_1 = require("@navikt/aksel-icons");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
+const aksel_icons_1 = require("@navikt/aksel-icons");
+const composeEventHandlers_1 = require("../util/composeEventHandlers");
 exports.RemovableChips = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, children, variant = "action", removeLabel = "slett", onDelete, type = "button" } = _a, rest = __rest(_a, ["className", "children", "variant", "removeLabel", "onDelete", "type"]);
-    return (react_1.default.createElement("button", Object.assign({}, rest, { ref: ref, type: type, className: (0, clsx_1.default)("navds-chips__chip navds-chips__removable navds-chips--icon-right", className, `navds-chips__removable--${variant}`), "aria-label": `${children} ${removeLabel}`, onClick: (e) => {
-            var _a;
-            onDelete === null || onDelete === void 0 ? void 0 : onDelete();
-            (_a = rest === null || rest === void 0 ? void 0 : rest.onClick) === null || _a === void 0 ? void 0 : _a.call(rest, e);
-        } }),
+    var { className, children, variant = "action", removeLabel = "slett", onDelete, type = "button", onClick } = _a, rest = __rest(_a, ["className", "children", "variant", "removeLabel", "onDelete", "type", "onClick"]);
+    return (react_1.default.createElement("button", Object.assign({}, rest, { ref: ref, type: type, className: (0, clsx_1.default)("navds-chips__chip navds-chips__removable navds-chips--icon-right", className, `navds-chips__removable--${variant}`), "aria-label": `${children} ${removeLabel}`, onClick: (0, composeEventHandlers_1.composeEventHandlers)(onClick, onDelete) }),
         react_1.default.createElement("span", { className: "navds-chips__chip-text" }, children),
         react_1.default.createElement("span", { className: "navds-chips__removable-icon" },
             react_1.default.createElement(aksel_icons_1.XMarkIcon, { "aria-hidden": true }))));

package/cjs/copybutton/CopyButton.js

@@ -38,11 +38,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CopyButton = void 0;
-const aksel_icons_1 = require("@navikt/aksel-icons");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
-const copy_1 = __importDefault(require("../util/copy"));
+const aksel_icons_1 = require("@navikt/aksel-icons");
 const typography_1 = require("../typography");
+const composeEventHandlers_1 = require("../util/composeEventHandlers");
+const copy_1 = __importDefault(require("../util/copy"));
 /**
  * A button component that copies text to the clipboard when clicked.
  *
@@ -55,7 +56,7 @@ const typography_1 = require("../typography");
  * ```
  */
 exports.CopyButton = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, copyText, text, activeText = "Kopiert!", variant = "neutral", size = "medium", onActiveChange, icon, activeIcon, activeDuration = 2000, title = "Kopier", activeTitle = "Kopiert", iconPosition = "left" } = _a, rest = __rest(_a, ["className", "copyText", "text", "activeText", "variant", "size", "onActiveChange", "icon", "activeIcon", "activeDuration", "title", "activeTitle", "iconPosition"]);
+    var { className, copyText, text, activeText = "Kopiert!", variant = "neutral", size = "medium", onActiveChange, icon, activeIcon, activeDuration = 2000, title = "Kopier", activeTitle = "Kopiert", iconPosition = "left", onClick } = _a, rest = __rest(_a, ["className", "copyText", "text", "activeText", "variant", "size", "onActiveChange", "icon", "activeIcon", "activeDuration", "title", "activeTitle", "iconPosition", "onClick"]);
     const [active, setActive] = (0, react_1.useState)(false);
     const timeoutRef = (0, react_1.useRef)();
     (0, react_1.useEffect)(() => {
@@ -63,13 +64,11 @@ exports.CopyButton = (0, react_1.forwardRef)((_a, ref) => {
             timeoutRef.current && clearTimeout(timeoutRef.current);
         };
     }, []);
-    const handleClick = (event) => {
-        var _a;
+    const handleClick = () => {
         timeoutRef.current && clearTimeout(timeoutRef.current);
         (0, copy_1.default)(copyText);
         setActive(true);
         onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(true);
-        (_a = rest.onClick) === null || _a === void 0 ? void 0 : _a.call(rest, event);
         timeoutRef.current = window.setTimeout(() => {
             setActive(false);
             onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(false);
@@ -82,7 +81,7 @@ exports.CopyButton = (0, react_1.forwardRef)((_a, ref) => {
             "navds-copybutton--icon-only": !text,
             "navds-copybutton--icon-right": iconPosition === "right",
             "navds-copybutton--active": active,
-        }), onClick: handleClick }),
+        }), onClick: (0, composeEventHandlers_1.composeEventHandlers)(onClick, handleClick) }),
         react_1.default.createElement("span", { className: "navds-copybutton__content" },
             iconPosition === "left" && copyIcon,
             text &&

package/cjs/date/datepicker/DatePicker.js

@@ -43,6 +43,8 @@ const isWeekend_1 = __importDefault(require("date-fns/isWeekend"));
 const react_1 = __importStar(require("react"));
 const react_day_picker_1 = require("react-day-picker");
 const util_1 = require("../../util");
+const hooks_1 = require("../../util/hooks");
+const useMergeRefs_1 = require("../../util/hooks/useMergeRefs");
 const context_1 = require("../context");
 const DateInput_1 = require("../parts/DateInput");
 const DateWrapper_1 = require("../parts/DateWrapper");
@@ -80,10 +82,10 @@ const WeekNumber_1 = __importDefault(require("./parts/WeekNumber"));
 exports.DatePicker = (0, react_1.forwardRef)((_a, ref) => {
     var _b;
     var { children, locale = "nb", dropdownCaption, disabled = [], disableWeekends = false, showWeekNumber = false, selected, id, defaultSelected, className, wrapperClassName, open: _open, onClose, onOpenToggle, strategy, onWeekNumberClick } = _a, rest = __rest(_a, ["children", "locale", "dropdownCaption", "disabled", "disableWeekends", "showWeekNumber", "selected", "id", "defaultSelected", "className", "wrapperClassName", "open", "onClose", "onOpenToggle", "strategy", "onWeekNumberClick"]);
-    const ariaId = (0, util_1.useId)(id);
+    const ariaId = (0, hooks_1.useId)(id);
     const [open, setOpen] = (0, react_1.useState)(_open !== null && _open !== void 0 ? _open : false);
     const wrapperRef = (0, react_1.useRef)(null);
-    const mergedRef = (0, react_1.useMemo)(() => (0, util_1.mergeRefs)([wrapperRef, ref]), [ref]);
+    const mergedRef = (0, useMergeRefs_1.useMergeRefs)(wrapperRef, ref);
     const [selectedDates, setSelectedDates] = react_1.default.useState(defaultSelected);
     const mode = (_b = rest.mode) !== null && _b !== void 0 ? _b : "single";
     /**

package/cjs/date/datepicker/parts/Caption.js

@@ -4,12 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatePickerCaption = void 0;
-const aksel_icons_1 = require("@navikt/aksel-icons");
 const react_1 = __importDefault(require("react"));
 const react_day_picker_1 = require("react-day-picker");
-const WeekRow_1 = __importDefault(require("./WeekRow"));
+const aksel_icons_1 = require("@navikt/aksel-icons");
 const button_1 = require("../../../button");
 const typography_1 = require("../../../typography");
+const WeekRow_1 = __importDefault(require("./WeekRow"));
 /**
  * https://github.com/gpbl/react-day-picker/tree/main/src/components/Caption
  */

package/cjs/date/datepicker/parts/DropdownCaption.js

@@ -4,13 +4,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownCaption = void 0;
-const aksel_icons_1 = require("@navikt/aksel-icons");
 const date_fns_1 = require("date-fns");
 const setMonth_1 = __importDefault(require("date-fns/setMonth"));
 const setYear_1 = __importDefault(require("date-fns/setYear"));
 const startOfMonth_1 = __importDefault(require("date-fns/startOfMonth"));
 const react_1 = __importDefault(require("react"));
 const react_day_picker_1 = require("react-day-picker");
+const aksel_icons_1 = require("@navikt/aksel-icons");
 const button_1 = require("../../../button");
 const Select_1 = require("../../../form/Select");
 const get_dates_1 = require("../../utils/get-dates");

package/cjs/date/datepicker/parts/HeadRow.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getWeekdays = exports.HeadRow = void 0;
-const react_1 = __importDefault(require("react"));
 const date_fns_1 = require("date-fns");
+const react_1 = __importDefault(require("react"));
 const react_day_picker_1 = require("react-day-picker");
 const responsive_1 = require("../../../layout/responsive");
 /**

package/cjs/date/datepicker/parts/Row.js

@@ -3,11 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
 const date_fns_1 = require("date-fns");
+const react_1 = __importDefault(require("react"));
 const react_day_picker_1 = require("react-day-picker");
-const WeekNumber_1 = __importDefault(require("./WeekNumber"));
 const responsive_1 = require("../../../layout/responsive");
+const WeekNumber_1 = __importDefault(require("./WeekNumber"));
 /**
  * https://github.com/gpbl/react-day-picker/tree/main/src/components/Row
  */

package/cjs/date/datepicker/parts/WeekRow.js

@@ -7,13 +7,13 @@ const react_1 = __importDefault(require("react"));
 const react_day_picker_1 = require("react-day-picker");
 const responsive_1 = require("../../../layout/responsive");
 const typography_1 = require("../../../typography");
-const util_1 = require("../../../util");
+const hooks_1 = require("../../../util/hooks");
 const get_month_weeks_1 = require("../../utils/get-month-weeks");
 const labels_1 = require("../../utils/labels");
 const WeekNumber_1 = __importDefault(require("./WeekNumber"));
 const WeekRow = ({ displayMonth }) => {
     const { locale, fixedWeeks, onWeekNumberClick } = (0, react_day_picker_1.useDayPicker)();
-    const labelId = (0, util_1.useId)();
+    const labelId = (0, hooks_1.useId)();
     if (!onWeekNumberClick) {
         return null;
     }

package/cjs/date/monthpicker/MonthCaption.js

@@ -4,13 +4,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MonthCaption = void 0;
-const aksel_icons_1 = require("@navikt/aksel-icons");
 const date_fns_1 = require("date-fns");
 const setYear_1 = __importDefault(require("date-fns/setYear"));
 const startOfMonth_1 = __importDefault(require("date-fns/startOfMonth"));
 const startOfYear_1 = __importDefault(require("date-fns/startOfYear"));
 const react_1 = __importDefault(require("react"));
 const react_day_picker_1 = require("react-day-picker");
+const aksel_icons_1 = require("@navikt/aksel-icons");
 const button_1 = require("../../button");
 const Select_1 = require("../../form/Select");
 const context_1 = require("../context");

package/cjs/date/monthpicker/MonthPicker.js

@@ -30,7 +30,8 @@ exports.MonthPicker = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const react_day_picker_1 = require("react-day-picker");
-const util_1 = require("../../util");
+const hooks_1 = require("../../util/hooks");
+const useMergeRefs_1 = require("../../util/hooks/useMergeRefs");
 const context_1 = require("../context");
 const DateInput_1 = require("../parts/DateInput");
 const DateWrapper_1 = require("../parts/DateWrapper");
@@ -61,10 +62,10 @@ const MonthSelector_1 = __importDefault(require("./MonthSelector"));
  * ```
  */
 exports.MonthPicker = (0, react_1.forwardRef)(({ children, dropdownCaption = false, fromDate, toDate, disabled = [], selected, open: _open, id, onClose, onOpenToggle, locale = "nb", onMonthSelect, className, wrapperClassName, defaultSelected, year, onYearChange, strategy = "absolute", }, ref) => {
-    const ariaId = (0, util_1.useId)(id);
+    const ariaId = (0, hooks_1.useId)(id);
     const [open, setOpen] = (0, react_1.useState)(_open !== null && _open !== void 0 ? _open : false);
     const wrapperRef = (0, react_1.useRef)(null);
-    const mergedRef = (0, react_1.useMemo)(() => (0, util_1.mergeRefs)([wrapperRef, ref]), [ref]);
+    const mergedRef = (0, useMergeRefs_1.useMergeRefs)(wrapperRef, ref);
     const [selectedMonth, setSelectedMonth] = (0, react_1.useState)(defaultSelected);
     const handleSelect = (month) => {
         var _a;

package/cjs/date/parts/DateInput.js

@@ -38,9 +38,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MonthPickerInput = exports.DatePickerInput = void 0;
-const aksel_icons_1 = require("@navikt/aksel-icons");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
+const aksel_icons_1 = require("@navikt/aksel-icons");
 const ReadOnlyIcon_1 = require("../../form/ReadOnlyIcon");
 const useFormField_1 = require("../../form/useFormField");
 const typography_1 = require("../../typography");

package/cjs/date/parts/DateWrapper.js

@@ -33,12 +33,12 @@ const button_1 = require("../../button");
 const modal_1 = require("../../modal");
 const ModalContext_1 = require("../../modal/ModalContext");
 const popover_1 = require("../../popover");
-const useMedia_1 = require("../../util/useMedia");
+const hooks_1 = require("../../util/hooks");
 const labels_1 = require("../utils/labels");
 const DateWrapper = ({ open, children, onClose, anchor, locale, variant, popoverProps, }) => {
     const modalRef = (0, react_1.useRef)(null);
     const isInModal = (0, react_1.useContext)(ModalContext_1.ModalContext) !== null;
-    const hideModal = (0, useMedia_1.useMedia)("screen and (min-width: 768px)", true) && !isInModal;
+    const hideModal = (0, hooks_1.useMedia)("screen and (min-width: 768px)", true) && !isInModal;
     if (hideModal) {
         return (react_1.default.createElement(popover_1.Popover, Object.assign({ arrow: false, anchorEl: anchor, open: open, onClose: onClose, placement: "bottom-start", role: "dialog", className: (0, clsx_1.default)("navds-date__popover", {
                 "navds-date": variant === "month",

package/cjs/date/utils/check-dates.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isValidDate = exports.dateIsInCurrentMonth = void 0;
-const setYear_1 = __importDefault(require("date-fns/setYear"));
 const isThisMonth_1 = __importDefault(require("date-fns/isThisMonth"));
+const setYear_1 = __importDefault(require("date-fns/setYear"));
 const dateIsInCurrentMonth = (date, dateToCompare) => {
     return (0, isThisMonth_1.default)((0, setYear_1.default)(date, Number(dateToCompare.getFullYear())));
 };

package/cjs/date/utils/is-match.js

@@ -4,9 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isDateInRange = exports.isMatch = void 0;
-const isSameDay_1 = __importDefault(require("date-fns/isSameDay"));
-const isDate_1 = __importDefault(require("date-fns/isDate"));
 const differenceInCalendarDays_1 = __importDefault(require("date-fns/differenceInCalendarDays"));
+const isDate_1 = __importDefault(require("date-fns/isDate"));
+const isSameDay_1 = __importDefault(require("date-fns/isSameDay"));
 const isSameMonth_1 = __importDefault(require("date-fns/isSameMonth"));
 const react_day_picker_1 = require("react-day-picker");
 function isDateType(value) {

package/cjs/date/utils/parse-date.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parseDate = exports.INPUT_DATE_STRING_FORMAT_MONTH = exports.INPUT_DATE_STRING_FORMAT_DATE = void 0;
-const parse_1 = __importDefault(require("date-fns/parse"));
 const isBefore_1 = __importDefault(require("date-fns/isBefore"));
+const parse_1 = __importDefault(require("date-fns/parse"));
 const sub_1 = __importDefault(require("date-fns/sub"));
 const check_dates_1 = require("./check-dates");
 exports.INPUT_DATE_STRING_FORMAT_DATE = "dd.MM.yyyy";

package/cjs/dropdown/Dropdown.js

@@ -28,6 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dropdown = void 0;
 const react_1 = __importStar(require("react"));
+const useControllableState_1 = require("../util/hooks/useControllableState");
 const Menu_1 = __importDefault(require("./Menu"));
 const Toggle_1 = __importDefault(require("./Toggle"));
 const context_1 = require("./context");
@@ -62,24 +63,21 @@ const context_1 = require("./context");
  * </Dropdown>
  * ```
  */
-exports.Dropdown = (({ children, onSelect, closeOnSelect = true, defaultOpen = false, open, }) => {
-    const [isOpen, setIsOpen] = (0, react_1.useState)(defaultOpen);
+exports.Dropdown = (({ children, onSelect, closeOnSelect = true, defaultOpen = false, open, onOpenChange, }) => {
     const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
-    const handleToggle = (v) => {
-        if (open === undefined) {
-            setIsOpen(v);
-        }
-    };
+    const [_open, _setOpen] = (0, useControllableState_1.useControllableState)({
+        defaultValue: defaultOpen,
+        value: open,
+        onChange: onOpenChange,
+    });
     return (react_1.default.createElement(context_1.DropdownContext.Provider, { value: {
-            isOpen: open !== null && open !== void 0 ? open : isOpen,
-            handleToggle,
+            isOpen: _open,
+            handleToggle: _setOpen,
             anchorEl,
             setAnchorEl,
             onSelect: (event) => {
                 onSelect === null || onSelect === void 0 ? void 0 : onSelect(event);
-                if (closeOnSelect) {
-                    open === undefined && setIsOpen(false);
-                }
+                closeOnSelect && _setOpen(false);
             },
         } }, children));
 });

package/cjs/dropdown/Menu/Divider.js

@@ -38,8 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Divider = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 exports.Divider = (0, react_1.forwardRef)((_a, ref) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
     return (react_1.default.createElement("hr", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-dropdown__divider", className) })));

package/cjs/dropdown/Menu/GroupedList/GroupedHeading.js

@@ -38,8 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GroupedHeading = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 exports.GroupedHeading = (0, react_1.forwardRef)((_a, ref) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
     return (react_1.default.createElement("dt", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-dropdown__list-heading", "navds-heading", "navds-heading--xsmall", className) })));

package/cjs/dropdown/Menu/GroupedList/GroupedItem.js

@@ -40,15 +40,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GroupedItem = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
+const composeEventHandlers_1 = require("../../../util/composeEventHandlers");
 const context_1 = require("../../context");
 exports.GroupedItem = (0, react_1.forwardRef)((_a, ref) => {
-    var { as: Component = "button", className } = _a, rest = __rest(_a, ["as", "className"]);
+    var { as: Component = "button", className, onClick } = _a, rest = __rest(_a, ["as", "className", "onClick"]);
     const context = (0, react_1.useContext)(context_1.DropdownContext);
     return (react_1.default.createElement("dd", { className: "navds-dropdown__list-item" },
-        react_1.default.createElement(Component, Object.assign({}, rest, { value: rest.children, onClick: (event) => {
-                var _a, _b;
-                (_a = context === null || context === void 0 ? void 0 : context.onSelect) === null || _a === void 0 ? void 0 : _a.call(context, event);
-                (_b = rest === null || rest === void 0 ? void 0 : rest.onClick) === null || _b === void 0 ? void 0 : _b.call(rest, event);
-            }, ref: ref, className: (0, clsx_1.default)("navds-dropdown__item", "navds-body-short", "navds-body-short--small", className) }))));
+        react_1.default.createElement(Component, Object.assign({}, rest, { value: rest.children, onClick: (0, composeEventHandlers_1.composeEventHandlers)(onClick, context === null || context === void 0 ? void 0 : context.onSelect), ref: ref, className: (0, clsx_1.default)("navds-dropdown__item", "navds-body-short", "navds-body-short--small", className) }))));
 });
 exports.default = exports.GroupedItem;

package/cjs/dropdown/Menu/List/Item.js

@@ -40,15 +40,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListItem = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
+const composeEventHandlers_1 = require("../../../util/composeEventHandlers");
 const context_1 = require("../../context");
 exports.ListItem = (0, react_1.forwardRef)((_a, ref) => {
-    var { as: Component = "button", className } = _a, rest = __rest(_a, ["as", "className"]);
+    var { as: Component = "button", className, onClick } = _a, rest = __rest(_a, ["as", "className", "onClick"]);
     const context = (0, react_1.useContext)(context_1.DropdownContext);
     return (react_1.default.createElement("li", { className: "navds-dropdown__list-item" },
-        react_1.default.createElement(Component, Object.assign({}, rest, { value: rest.children, onClick: (event) => {
-                var _a, _b;
-                (_a = context === null || context === void 0 ? void 0 : context.onSelect) === null || _a === void 0 ? void 0 : _a.call(context, event);
-                (_b = rest === null || rest === void 0 ? void 0 : rest.onClick) === null || _b === void 0 ? void 0 : _b.call(rest, event);
-            }, ref: ref, className: (0, clsx_1.default)("navds-dropdown__item", "navds-body-short", "navds-body-short--small", className) }))));
+        react_1.default.createElement(Component, Object.assign({}, rest, { value: rest.children, onClick: (0, composeEventHandlers_1.composeEventHandlers)(onClick, context === null || context === void 0 ? void 0 : context.onSelect), ref: ref, className: (0, clsx_1.default)("navds-dropdown__item", "navds-body-short", "navds-body-short--small", className) }))));
 });
 exports.default = exports.ListItem;

package/cjs/dropdown/Toggle.js

@@ -40,6 +40,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Toggle = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
+const composeEventHandlers_1 = require("../util/composeEventHandlers");
 const context_1 = require("./context");
 exports.Toggle = (0, react_1.forwardRef)((_a, ref) => {
     var { className, onClick } = _a, rest = __rest(_a, ["className", "onClick"]);
@@ -49,6 +50,10 @@ exports.Toggle = (0, react_1.forwardRef)((_a, ref) => {
         return null;
     }
     const { setAnchorEl, handleToggle, isOpen } = context;
+    const handleClick = (e) => {
+        setAnchorEl(e.currentTarget);
+        handleToggle(!isOpen);
+    };
     return (react_1.default.createElement("button", Object.assign({}, rest, { ref: (el) => {
             setAnchorEl(el);
             if (typeof ref === "function") {
@@ -57,10 +62,6 @@ exports.Toggle = (0, react_1.forwardRef)((_a, ref) => {
             else if (ref != null) {
                 ref.current = el;
             }
-        }, onClick: (e) => {
-            setAnchorEl(e.currentTarget);
-            handleToggle(!isOpen);
-            onClick && onClick(e);
-        }, "aria-expanded": isOpen, className: (0, clsx_1.default)("navds-dropdown__toggle", className) })));
+        }, onClick: (0, composeEventHandlers_1.composeEventHandlers)(onClick, handleClick), "aria-expanded": isOpen, className: (0, clsx_1.default)("navds-dropdown__toggle", className) })));
 });
 exports.default = exports.Toggle;

package/cjs/expansion-card/ExpansionCardHeader.js

@@ -37,9 +37,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const aksel_icons_1 = require("@navikt/aksel-icons");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
+const aksel_icons_1 = require("@navikt/aksel-icons");
 const context_1 = require("./context");
 const ExpansionCardHeader = (0, react_1.forwardRef)((_a, ref) => {
     var { children, className } = _a, rest = __rest(_a, ["children", "className"]);

package/cjs/form/ConfirmationPanel.js

@@ -41,7 +41,7 @@ exports.ConfirmationPanel = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const typography_1 = require("../typography");
-const util_1 = require("../util");
+const hooks_1 = require("../util/hooks");
 const checkbox_1 = require("./checkbox");
 const useFormField_1 = require("./useFormField");
 /**
@@ -65,7 +65,7 @@ const useFormField_1 = require("./useFormField");
 exports.ConfirmationPanel = (0, react_1.forwardRef)((_a, ref) => {
     var { className, children, label } = _a, props = __rest(_a, ["className", "children", "label"]);
     const { errorId, showErrorMsg, hasError, size, inputProps } = (0, useFormField_1.useFormField)(props, "confirmation-panel");
-    const id = (0, util_1.useId)();
+    const id = (0, hooks_1.useId)();
     return (react_1.default.createElement("div", { className: (0, clsx_1.default)("navds-confirmation-panel", "navds-form-field", className, {
             "navds-confirmation-panel--small": size === "small",
             "navds-confirmation-panel--error": hasError,

package/cjs/form/ReadOnlyIcon.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReadOnlyIcon = void 0;
-const aksel_icons_1 = require("@navikt/aksel-icons");
 const react_1 = __importDefault(require("react"));
+const aksel_icons_1 = require("@navikt/aksel-icons");
 const ReadOnlyIcon = ({ readOnly, nativeReadOnly = true, }) => {
     if (readOnly) {
         return (react_1.default.createElement(aksel_icons_1.PadlockLockedFillIcon, Object.assign({}, (nativeReadOnly ? { "aria-hidden": true } : { title: "readonly" }), { className: "navds-form-field__readonly-icon" })));

package/cjs/form/Select.js

@@ -38,9 +38,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = void 0;
-const aksel_icons_1 = require("@navikt/aksel-icons");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
+const aksel_icons_1 = require("@navikt/aksel-icons");
 const typography_1 = require("../typography");
 const util_1 = require("../util");
 const ReadOnlyIcon_1 = require("./ReadOnlyIcon");

package/cjs/form/Textarea.js

@@ -43,6 +43,7 @@ const react_1 = __importStar(require("react"));
 const typography_1 = require("../typography");
 const util_1 = require("../util");
 const TextareaAutoSize_1 = __importDefault(require("../util/TextareaAutoSize"));
+const hooks_1 = require("../util/hooks");
 const ReadOnlyIcon_1 = require("./ReadOnlyIcon");
 const TextareaCounter_1 = __importDefault(require("./TextareaCounter"));
 const useFormField_1 = require("./useFormField");
@@ -61,7 +62,7 @@ exports.Textarea = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b, _c;
     const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = (0, useFormField_1.useFormField)(props, "textarea");
     const { label, className, description, maxLength, hideLabel = false, resize, UNSAFE_autoScrollbar, i18n, readOnly } = props, rest = __rest(props, ["label", "className", "description", "maxLength", "hideLabel", "resize", "UNSAFE_autoScrollbar", "i18n", "readOnly"]);
-    const maxLengthId = (0, util_1.useId)();
+    const maxLengthId = (0, hooks_1.useId)();
     const hasMaxLength = maxLength !== undefined && maxLength > 0;
     const [controlledValue, setControlledValue] = (0, react_1.useState)((_a = props === null || props === void 0 ? void 0 : props.defaultValue) !== null && _a !== void 0 ? _a : "");
     const getMinRows = () => {

package/cjs/form/checkbox/Checkbox.js

@@ -31,12 +31,13 @@ const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const typography_1 = require("../../typography");
 const util_1 = require("../../util");
+const hooks_1 = require("../../util/hooks");
 const ReadOnlyIcon_1 = require("../ReadOnlyIcon");
 const useCheckbox_1 = __importDefault(require("./useCheckbox"));
 exports.Checkbox = (0, react_1.forwardRef)((props, ref) => {
     const { inputProps, hasError, size, readOnly, nested } = (0, useCheckbox_1.default)(props);
-    const labelId = (0, util_1.useId)();
-    const descriptionId = (0, util_1.useId)();
+    const labelId = (0, hooks_1.useId)();
+    const descriptionId = (0, hooks_1.useId)();
     return (react_1.default.createElement("div", { className: (0, clsx_1.default)(props.className, "navds-checkbox", `navds-checkbox--${size}`, {
             "navds-checkbox--error": hasError,
             "navds-checkbox--disabled": inputProps.disabled,