@navikt/ds-react 5.13.0 → 5.15.0

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/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/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,

package/cjs/form/combobox/Combobox.js

@@ -41,7 +41,7 @@ exports.Combobox = 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 useMergeRefs_1 = require("../../util/hooks/useMergeRefs");
 const ClearButton_1 = __importDefault(require("./ClearButton"));
 const ComboboxWrapper_1 = __importDefault(require("./ComboboxWrapper"));
 const FilteredOptions_1 = __importDefault(require("./FilteredOptions/FilteredOptions"));
@@ -57,7 +57,7 @@ exports.Combobox = (0, react_1.forwardRef)((props, ref) => {
     const { activeDecendantId, toggleIsListOpen } = (0, filteredOptionsContext_1.useFilteredOptionsContext)();
     const { selectedOptions } = (0, selectedOptionsContext_1.useSelectedOptionsContext)();
     const { clearInput, error, errorId, focusInput, hasError, inputDescriptionId, inputProps, inputRef, value, showErrorMsg, size = "medium", } = (0, inputContext_1.useInputContext)();
-    const mergedInputRef = (0, react_1.useMemo)(() => (0, util_1.mergeRefs)([inputRef, ref]), [inputRef, ref]);
+    const mergedInputRef = (0, useMergeRefs_1.useMergeRefs)(inputRef, ref);
     return (react_1.default.createElement(ComboboxWrapper_1.default, { className: className, hasError: hasError, inputProps: inputProps, inputSize: size, toggleIsListOpen: toggleIsListOpen, toggleListButtonRef: toggleListButtonRef },
         react_1.default.createElement(typography_1.Label, { htmlFor: inputProps.id, size: size, className: (0, clsx_1.default)("navds-form-field__label", {
                 "navds-sr-only": hideLabel,

package/cjs/form/combobox/FilteredOptions/filteredOptionsContext.js

@@ -29,8 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFilteredOptionsContext = exports.FilteredOptionsProvider = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
-const util_1 = require("../../../util");
-const usePrevious_1 = __importDefault(require("../../../util/usePrevious"));
+const hooks_1 = require("../../../util/hooks");
 const inputContext_1 = require("../Input/inputContext");
 const customOptionsContext_1 = require("../customOptionsContext");
 const filtered_options_util_1 = __importDefault(require("./filtered-options-util"));
@@ -50,14 +49,14 @@ const FilteredOptionsProvider = ({ children, value: props, }) => {
         const opts = [...customOptions, ...options];
         return filtered_options_util_1.default.getMatchingValuesFromList(searchTerm, opts);
     }, [customOptions, externalFilteredOptions, options, searchTerm]);
-    const previousSearchTerm = (0, usePrevious_1.default)(searchTerm);
+    const previousSearchTerm = (0, hooks_1.usePrevious)(searchTerm);
     const [isMouseLastUsedInputDevice, setIsMouseLastUsedInputDevice] = (0, react_1.useState)(false);
     const filteredOptionsMap = (0, react_1.useMemo)(() => options.reduce((map, _option) => (Object.assign(Object.assign({}, map), { [filtered_options_util_1.default.getOptionId(id, _option)]: _option })), {
         [filtered_options_util_1.default.getAddNewOptionId(id)]: allowNewValues
             ? value
             : undefined,
     }), [allowNewValues, id, options, value]);
-    (0, util_1.useClientLayoutEffect)(() => {
+    (0, hooks_1.useClientLayoutEffect)(() => {
         if (shouldAutocomplete &&
             filtered_options_util_1.default.normalizeText(searchTerm) !== "" &&
             ((previousSearchTerm === null || previousSearchTerm === void 0 ? void 0 : previousSearchTerm.length) || 0) < searchTerm.length &&

package/cjs/form/combobox/Input/inputContext.js

@@ -25,7 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useInputContext = exports.InputContextProvider = void 0;
 const react_1 = __importStar(require("react"));
-const util_1 = require("../../../util");
+const hooks_1 = require("../../../util/hooks");
 const useFormField_1 = require("../../useFormField");
 const InputContext = (0, react_1.createContext)({});
 const InputContextProvider = ({ children, value: props }) => {
@@ -61,7 +61,7 @@ const InputContextProvider = ({ children, value: props }) => {
         var _a, _b;
         (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
     }, []);
-    (0, util_1.useClientLayoutEffect)(() => {
+    (0, hooks_1.useClientLayoutEffect)(() => {
         var _a, _b;
         if (shouldAutocomplete && inputRef && value !== searchTerm) {
             (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange) === null || _b === void 0 ? void 0 : _b.call(_a, searchTerm.length, value.length);

package/cjs/form/combobox/SelectedOptions/selectedOptionsContext.js

@@ -22,13 +22,10 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSelectedOptionsContext = exports.SelectedOptionsProvider = void 0;
 const react_1 = __importStar(require("react"));
-const usePrevious_1 = __importDefault(require("../../../util/usePrevious"));
+const hooks_1 = require("../../../util/hooks");
 const inputContext_1 = require("../Input/inputContext");
 const customOptionsContext_1 = require("../customOptionsContext");
 const SelectedOptionsContext = (0, react_1.createContext)({});
@@ -92,7 +89,7 @@ const SelectedOptionsProvider = ({ children, value, }) => {
         removeSelectedOption,
         selectedOptions,
     ]);
-    const prevSelectedOptions = (0, usePrevious_1.default)(selectedOptions);
+    const prevSelectedOptions = (0, hooks_1.usePrevious)(selectedOptions);
     const selectedOptionsState = {
         addSelectedOption,
         isMultiSelect,

package/cjs/form/error-summary/ErrorSummary.js

@@ -41,7 +41,7 @@ exports.ErrorSummary = 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 ErrorSummaryItem_1 = __importDefault(require("./ErrorSummaryItem"));
 /**
  * A component that displays a summary of errors.
@@ -63,7 +63,7 @@ const ErrorSummaryItem_1 = __importDefault(require("./ErrorSummaryItem"));
  */
 exports.ErrorSummary = (0, react_1.forwardRef)((_a, ref) => {
     var { children, className, size = "medium", headingTag = "h2", heading } = _a, rest = __rest(_a, ["children", "className", "size", "headingTag", "heading"]);
-    const headingId = (0, util_1.useId)();
+    const headingId = (0, hooks_1.useId)();
     return (react_1.default.createElement("section", Object.assign({ ref: ref }, rest, { className: (0, clsx_1.default)(className, "navds-error-summary", `navds-error-summary--${size}`), tabIndex: -1, "aria-live": "polite", "aria-relevant": "all", "aria-labelledby": headingId }),
         react_1.default.createElement(typography_1.Heading, { className: "navds-error-summary__heading", as: headingTag, size: "small", id: headingId }, heading),
         react_1.default.createElement(typography_1.BodyShort, { as: "ul", size: size, className: "navds-error-summary__list" }, react_1.default.Children.map(children, (child) => {

package/cjs/form/radio/Radio.js

@@ -31,11 +31,12 @@ 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 useRadio_1 = require("./useRadio");
 exports.Radio = (0, react_1.forwardRef)((props, ref) => {
     const { inputProps, size, hasError, readOnly } = (0, useRadio_1.useRadio)(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-radio", `navds-radio--${size}`, {
             "navds-radio--error": hasError,
             "navds-radio--disabled": inputProps.disabled,

package/cjs/form/radio/RadioGroup.js

@@ -40,7 +40,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioGroup = exports.RadioGroupContext = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
-const util_1 = require("../../util");
+const hooks_1 = require("../../util/hooks");
 const Fieldset_1 = require("../Fieldset");
 exports.RadioGroupContext = react_1.default.createContext(null);
 /**
@@ -57,7 +57,7 @@ exports.RadioGroup = (0, react_1.forwardRef)((_a, ref) => {
     var _b, _c;
     var { children, className, name, defaultValue, value, onChange = () => { }, required, readOnly } = _a, rest = __rest(_a, ["children", "className", "name", "defaultValue", "value", "onChange", "required", "readOnly"]);
     const fieldset = (0, react_1.useContext)(Fieldset_1.FieldsetContext);
-    const nameId = (0, util_1.useId)();
+    const nameId = (0, hooks_1.useId)();
     return (react_1.default.createElement(Fieldset_1.Fieldset, Object.assign({}, rest, { readOnly: readOnly, ref: ref, className: (0, clsx_1.default)(className, "navds-radio-group", `navds-radio-group--${(_c = (_b = rest.size) !== null && _b !== void 0 ? _b : fieldset === null || fieldset === void 0 ? void 0 : fieldset.size) !== null && _c !== void 0 ? _c : "medium"}`), nativeReadOnly: false }),
         react_1.default.createElement(exports.RadioGroupContext.Provider, { value: {
                 name: name !== null && name !== void 0 ? name : `radioGroupName-${nameId}`,

package/cjs/form/search/Search.js

@@ -43,6 +43,7 @@ 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 useMergeRefs_1 = require("../../util/hooks/useMergeRefs");
 const useFormField_1 = require("../useFormField");
 const SearchButton_1 = __importDefault(require("./SearchButton"));
 const context_1 = require("./context");
@@ -63,7 +64,7 @@ exports.Search = (0, react_1.forwardRef)((props, ref) => {
     const { inputProps, size = "medium", inputDescriptionId, errorId, showErrorMsg, hasError, } = (0, useFormField_1.useFormField)(props, "searchfield");
     const { className, hideLabel = true, label, description, value, clearButtonLabel, onClear, clearButton = true, children, variant = "primary", defaultValue, onChange, onSearchClick, htmlSize } = props, rest = __rest(props, ["className", "hideLabel", "label", "description", "value", "clearButtonLabel", "onClear", "clearButton", "children", "variant", "defaultValue", "onChange", "onSearchClick", "htmlSize"]);
     const searchRef = (0, react_1.useRef)(null);
-    const mergedRef = (0, react_1.useMemo)(() => (0, util_1.mergeRefs)([searchRef, ref]), [ref]);
+    const mergedRef = (0, useMergeRefs_1.useMergeRefs)(searchRef, ref);
     const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : "");
     const handleChange = (0, react_1.useCallback)((v) => {
         value === undefined && setInternalValue(v);

package/cjs/form/search/SearchButton.js

@@ -41,6 +41,7 @@ const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const aksel_icons_1 = require("@navikt/aksel-icons");
 const button_1 = require("../../button");
+const composeEventHandlers_1 = require("../../util/composeEventHandlers");
 const context_1 = require("./context");
 const SearchButton = (0, react_1.forwardRef)((_a, ref) => {
     var _b;
@@ -51,9 +52,6 @@ const SearchButton = (0, react_1.forwardRef)((_a, ref) => {
         return null;
     }
     const { size, variant, handleClick } = context;
-    return (react_1.default.createElement(button_1.Button, Object.assign({ type: "submit" }, rest, { ref: ref, size: size, variant: variant === "secondary" ? "secondary" : "primary", className: (0, clsx_1.default)("navds-search__button-search", className), disabled: (_b = context === null || context === void 0 ? void 0 : context.disabled) !== null && _b !== void 0 ? _b : disabled, onClick: (e) => {
-            handleClick();
-            onClick === null || onClick === void 0 ? void 0 : onClick(e);
-        }, icon: react_1.default.createElement(aksel_icons_1.MagnifyingGlassIcon, Object.assign({}, (children ? { "aria-hidden": true } : { title: "Søk" }))) }), children));
+    return (react_1.default.createElement(button_1.Button, Object.assign({ type: "submit" }, rest, { ref: ref, size: size, variant: variant === "secondary" ? "secondary" : "primary", className: (0, clsx_1.default)("navds-search__button-search", className), disabled: (_b = context === null || context === void 0 ? void 0 : context.disabled) !== null && _b !== void 0 ? _b : disabled, onClick: (0, composeEventHandlers_1.composeEventHandlers)(onClick, handleClick), icon: react_1.default.createElement(aksel_icons_1.MagnifyingGlassIcon, Object.assign({}, (children ? { "aria-hidden": true } : { title: "Søk" }))) }), children));
 });
 exports.default = SearchButton;

package/cjs/form/useFormField.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFormField = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = require("react");
-const util_1 = require("../util");
+const hooks_1 = require("../util/hooks");
 const context_1 = require("./Fieldset/context");
 /**
  * Handles props and their state for various form-fields in context with Fieldset
@@ -15,7 +15,7 @@ const useFormField = (props, prefix) => {
     var _a, _b, _c;
     const { size, error, errorId: propErrorId } = props;
     const fieldset = (0, react_1.useContext)(context_1.FieldsetContext);
-    const genId = (0, util_1.useId)();
+    const genId = (0, hooks_1.useId)();
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : `${prefix}-${genId}`;
     const errorId = propErrorId !== null && propErrorId !== void 0 ? propErrorId : `${prefix}-error-${genId}`;
     const inputDescriptionId = `${prefix}-description-${genId}`;

package/cjs/guide-panel/Illustration.js

@@ -16,10 +16,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DefaultIllustration = void 0;
 const react_1 = __importDefault(require("react"));
-const util_1 = require("../util");
+const hooks_1 = require("../util/hooks");
 const DefaultIllustration = (_a) => {
     var { title, titleId: _titleId } = _a, props = __rest(_a, ["title", "titleId"]);
-    let titleId = (0, util_1.useId)();
+    let titleId = (0, hooks_1.useId)();
     titleId = title ? (_titleId ? _titleId : "title-" + titleId) : undefined;
     return (react_1.default.createElement("svg", Object.assign({ width: "56", height: "85", viewBox: "0 0 56 85", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-label": "NAV veileder illustrasjon", focusable: false, role: "img", "aria-labelledby": titleId }, props),
         title ? react_1.default.createElement("title", { id: titleId }, title) : null,

package/cjs/help-text/HelpText.js

@@ -41,7 +41,8 @@ exports.HelpText = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const popover_1 = require("../popover");
-const util_1 = require("../util");
+const composeEventHandlers_1 = require("../util/composeEventHandlers");
+const useMergeRefs_1 = require("../util/hooks/useMergeRefs");
 const HelpTextIcon_1 = require("./HelpTextIcon");
 /**
  * A component that displays a help text button with a popover.
@@ -57,15 +58,12 @@ const HelpTextIcon_1 = require("./HelpTextIcon");
  * ```
  */
 exports.HelpText = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, children, placement = "top", strategy = "absolute", title = "hjelp", onClick, wrapperClassName } = _a, rest = __rest(_a, ["className", "children", "placement", "strategy", "title", "onClick", "wrapperClassName"]);
+    var { className, children, placement, strategy = "absolute", title = "hjelp", onClick, wrapperClassName } = _a, rest = __rest(_a, ["className", "children", "placement", "strategy", "title", "onClick", "wrapperClassName"]);
     const buttonRef = (0, react_1.useRef)(null);
-    const mergedRef = (0, react_1.useMemo)(() => (0, util_1.mergeRefs)([buttonRef, ref]), [ref]);
+    const mergedRef = (0, useMergeRefs_1.useMergeRefs)(buttonRef, ref);
     const [open, setOpen] = (0, react_1.useState)(false);
     return (react_1.default.createElement("div", { className: (0, clsx_1.default)("navds-help-text", wrapperClassName) },
-        react_1.default.createElement("button", Object.assign({}, rest, { ref: mergedRef, onClick: (e) => {
-                setOpen((x) => !x);
-                onClick === null || onClick === void 0 ? void 0 : onClick(e);
-            }, className: (0, clsx_1.default)(className, "navds-help-text__button"), type: "button", "aria-expanded": open }),
+        react_1.default.createElement("button", Object.assign({}, rest, { ref: mergedRef, onClick: (0, composeEventHandlers_1.composeEventHandlers)(onClick, () => setOpen((x) => x)), className: (0, clsx_1.default)(className, "navds-help-text__button"), type: "button", "aria-expanded": open }),
             react_1.default.createElement(HelpTextIcon_1.HelpTextIcon, { title: title }),
             react_1.default.createElement(HelpTextIcon_1.HelpTextIcon, { filled: true, title: title })),
         react_1.default.createElement(popover_1.Popover, { onClose: () => setOpen(false), className: "navds-help-text__popover", open: open, anchorEl: buttonRef.current, placement: placement, strategy: strategy, offset: 12 },

package/cjs/help-text/HelpTextIcon.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HelpTextIcon = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importDefault(require("react"));
-const useId_1 = require("../util/useId");
+const hooks_1 = require("../util/hooks");
 const HelpTextIcon = ({ title, filled = false, }) => {
-    let titleId = (0, useId_1.useId)();
+    let titleId = (0, hooks_1.useId)();
     titleId = title ? `title-${titleId}` : undefined;
     return (react_1.default.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", focusable: false, role: "img", "aria-labelledby": titleId, className: (0, clsx_1.default)("navds-help-text__icon", {
             "navds-help-text__icon--filled": filled,

package/cjs/list/List.js

@@ -41,13 +41,13 @@ exports.List = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const typography_1 = require("../typography");
-const useId_1 = require("../util/useId");
+const hooks_1 = require("../util/hooks");
 const ListItem_1 = require("./ListItem");
 const context_1 = require("./context");
 exports.List = (0, react_1.forwardRef)((_a, ref) => {
     var _b;
     var { children, className, as: ListTag = "ul", title, description, headingTag = "h3", size } = _a, rest = __rest(_a, ["children", "className", "as", "title", "description", "headingTag", "size"]);
-    const ariaId = (0, useId_1.useId)();
+    const ariaId = (0, hooks_1.useId)();
     const { isNested, size: _size } = (0, react_1.useContext)(context_1.ListContext);
     const listSize = (_b = size !== null && size !== void 0 ? size : _size) !== null && _b !== void 0 ? _b : "medium";
     return (react_1.default.createElement(context_1.ListContext.Provider, { value: {

package/cjs/loader/Loader.js

@@ -41,6 +41,7 @@ exports.Loader = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const util_1 = require("../util");
+const hooks_1 = require("../util/hooks");
 /**
  * A component that displays a loading spinner.
  *
@@ -54,7 +55,7 @@ const util_1 = require("../util");
  */
 exports.Loader = (0, react_1.forwardRef)((_a, ref) => {
     var { className, size = "medium", title = "venter...", transparent = false, variant = "neutral", id } = _a, rest = __rest(_a, ["className", "size", "title", "transparent", "variant", "id"]);
-    const internalId = (0, util_1.useId)();
+    const internalId = (0, hooks_1.useId)();
     return (react_1.default.createElement("svg", Object.assign({ "aria-labelledby": id !== null && id !== void 0 ? id : `loader-${internalId}`, ref: ref, className: (0, clsx_1.default)("navds-loader", className, `navds-loader--${size}`, `navds-loader--${variant}`, {
             "navds-loader--transparent": transparent,
         }), focusable: "false", viewBox: "0 0 50 50", preserveAspectRatio: "xMidYMid" }, (0, util_1.omit)(rest, ["children"])),

package/cjs/modal/Modal.js

@@ -45,7 +45,9 @@ const react_dom_1 = require("react-dom");
 const context_1 = require("../date/context");
 const provider_1 = require("../provider");
 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");
 const ModalBody_1 = __importDefault(require("./ModalBody"));
 const ModalContext_1 = require("./ModalContext");
 const ModalFooter_1 = __importDefault(require("./ModalFooter"));
@@ -102,8 +104,8 @@ exports.Modal = (0, react_2.forwardRef)((_a, ref) => {
     var _b, _c;
     var { header, children, open, onBeforeClose, onCancel, closeOnBackdropClick, width, portal, className, "aria-labelledby": ariaLabelledby, style, onClick } = _a, rest = __rest(_a, ["header", "children", "open", "onBeforeClose", "onCancel", "closeOnBackdropClick", "width", "portal", "className", "aria-labelledby", "style", "onClick"]);
     const modalRef = (0, react_2.useRef)(null);
-    const mergedRef = (0, react_2.useMemo)(() => (0, util_1.mergeRefs)([modalRef, ref]), [ref]);
-    const ariaLabelId = (0, util_1.useId)();
+    const mergedRef = (0, useMergeRefs_1.useMergeRefs)(modalRef, ref);
+    const ariaLabelId = (0, hooks_1.useId)();
     const rootElement = (_b = (0, provider_1.useProvider)()) === null || _b === void 0 ? void 0 : _b.rootElement;
     const portalNode = (0, react_1.useFloatingPortalNode)({ root: rootElement });
     const dateContext = (0, react_2.useContext)(context_1.DateContext);
@@ -146,28 +148,29 @@ exports.Modal = (0, react_2.forwardRef)((_a, ref) => {
         [`navds-modal--${width}`]: isWidthPreset,
     });
     const mergedStyle = Object.assign(Object.assign({}, style), (!isWidthPreset ? { width } : {}));
-    const mergedOnCancel = (event) => {
-        if (onBeforeClose && onBeforeClose() === false) {
-            event.preventDefault();
+    /**
+     * @note `closeOnBackdropClick` has issues on polyfill when nesting modals (DatePicker)
+     */
+    const handleModalClick = (event) => {
+        if (closeOnBackdropClick &&
+            !dialog_polyfill_1.needPolyfill &&
+            event.target === modalRef.current &&
+            (!onBeforeClose || onBeforeClose() !== false)) {
+            modalRef.current.close();
         }
-        else if (onCancel)
-            onCancel(event);
     };
-    const mergedOnClick = closeOnBackdropClick && !dialog_polyfill_1.needPolyfill // closeOnBackdropClick has issues on polyfill when nesting modals (DatePicker)
-        ? (event) => {
-            onClick && onClick(event);
-            if (event.target === modalRef.current &&
-                (!onBeforeClose || onBeforeClose() !== false)) {
-                modalRef.current.close();
-            }
-        }
-        : onClick;
+    /**
+     * @note onCancel fires when you press `Esc`
+     */
+    const handleModalCancel = (event) => {
+        onBeforeClose && onBeforeClose() === false && event.preventDefault();
+    };
     const mergedAriaLabelledBy = !ariaLabelledby && !rest["aria-label"] && header
         ? ariaLabelId
         : ariaLabelledby;
     const component = (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
-    react_2.default.createElement("dialog", Object.assign({}, rest, { ref: mergedRef, className: mergedClassName, style: mergedStyle, onCancel: mergedOnCancel, onClick: mergedOnClick, "aria-labelledby": mergedAriaLabelledBy }),
+    react_2.default.createElement("dialog", Object.assign({}, rest, { ref: mergedRef, className: mergedClassName, style: mergedStyle, onCancel: (0, composeEventHandlers_1.composeEventHandlers)(onCancel, handleModalCancel), onClick: (0, composeEventHandlers_1.composeEventHandlers)(onClick, handleModalClick), "aria-labelledby": mergedAriaLabelledBy }),
         react_2.default.createElement(ModalContext_1.ModalContext.Provider, { value: {
                 closeHandler: (0, ModalUtils_1.getCloseHandler)(modalRef, header, onBeforeClose),
                 ref: modalRef,

package/cjs/modal/dialog-polyfill.js

@@ -511,7 +511,7 @@ dialogPolyfill.registerDialog = function (element) {
  * @constructor
  */
 dialogPolyfill.DialogManager = function () {
-    /** @type {!Array<!dialogPolyfillInfo>} */
+    /** @type {!dialogPolyfillInfo[]} */
     this.pendingDialogStack = [];
     var checkDOM = this.checkDOM_.bind(this);
     // The overlay is used to simulate how a modal dialog blocks the document.
@@ -657,7 +657,7 @@ dialogPolyfill.DialogManager.prototype.handleKey_ = function (event) {
  * Finds and downgrades any known modal dialogs that are no longer displayed. Dialogs that are
  * removed and immediately readded don't stay modal, they become normal.
  *
- * @param {!Array<!HTMLDialogElement>} removed that have definitely been removed
+ * @param {!HTMLDialogElement[]} removed that have definitely been removed
  */
 dialogPolyfill.DialogManager.prototype.checkDOM_ = function (removed) {
     // This operates on a clone because it may cause it to change. Each change also calls

package/cjs/popover/Popover.js

@@ -43,7 +43,8 @@ const clsx_1 = __importDefault(require("clsx"));
 const react_2 = __importStar(require("react"));
 const context_1 = require("../date/context");
 const ModalContext_1 = require("../modal/ModalContext");
-const util_1 = require("../util");
+const hooks_1 = require("../util/hooks");
+const useMergeRefs_1 = require("../util/hooks/useMergeRefs");
 const PopoverContent_1 = __importDefault(require("./PopoverContent"));
 /**
  * A component that displays a popover.
@@ -89,17 +90,17 @@ exports.Popover = (0, react_2.forwardRef)((_a, ref) => {
         (0, react_1.useClick)(context),
         (0, react_1.useDismiss)(context),
     ]);
-    (0, util_1.useClientLayoutEffect)(() => {
+    (0, hooks_1.useClientLayoutEffect)(() => {
         refs.setReference(anchorEl);
     }, [anchorEl]);
-    const floatingRef = (0, react_2.useMemo)(() => (0, util_1.mergeRefs)([refs.setFloating, ref]), [refs.setFloating, ref]);
-    (0, util_1.useClientLayoutEffect)(() => {
+    const floatingRef = (0, useMergeRefs_1.useMergeRefs)(refs.setFloating, ref);
+    (0, hooks_1.useClientLayoutEffect)(() => {
         if (!refs.reference.current || !refs.floating.current || !open)
             return;
         const cleanup = (0, react_1.autoUpdate)(refs.reference.current, refs.floating.current, update);
         return () => cleanup();
     }, [refs.floating, refs.reference, update, open, anchorEl]);
-    (0, util_1.useEventListener)("focusin", (0, react_2.useCallback)((e) => {
+    (0, hooks_1.useEventListener)("focusin", (0, react_2.useCallback)((e) => {
         if (e.target instanceof HTMLElement &&
             ![anchorEl, refs.floating.current].some((element) => element === null || element === void 0 ? void 0 : element.contains(e.target)) &&
             !e.target.contains(refs.floating.current)) {

package/cjs/read-more/ReadMore.js

@@ -42,6 +42,7 @@ 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 composeEventHandlers_1 = require("../util/composeEventHandlers");
 const useControllableState_1 = require("../util/hooks/useControllableState");
 /**
  * ReadMore
@@ -70,10 +71,7 @@ exports.ReadMore = (0, react_1.forwardRef)((_a, ref) => {
     return (react_1.default.createElement("div", { className: (0, clsx_1.default)("navds-read-more", `navds-read-more--${size}`, className, { "navds-read-more--open": _open }) },
         react_1.default.createElement("button", Object.assign({}, rest, { ref: ref, type: "button", className: (0, clsx_1.default)("navds-read-more__button", "navds-body-short", {
                 "navds-body-short--small": size === "small",
-            }), onClick: (e) => {
-                _setOpen((x) => !x);
-                onClick === null || onClick === void 0 ? void 0 : onClick(e);
-            }, "aria-expanded": _open }),
+            }), onClick: (0, composeEventHandlers_1.composeEventHandlers)(onClick, () => _setOpen((x) => !x)), "aria-expanded": _open }),
             react_1.default.createElement(aksel_icons_1.ChevronDownIcon, { className: "navds-read-more__expand-icon", "aria-hidden": true }),
             react_1.default.createElement("span", null, header)),
         react_1.default.createElement(typography_1.BodyLong, { as: "div", "aria-hidden": !_open, className: (0, clsx_1.default)("navds-read-more__content", {

package/cjs/stepper/Step.js

@@ -41,11 +41,12 @@ exports.Step = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const typography_1 = require("../typography");
+const composeEventHandlers_1 = require("../util/composeEventHandlers");
 const context_1 = require("./context");
 const CompletedIcon = () => (react_1.default.createElement("svg", { width: "14", height: "10", viewBox: "0 0 14 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", focusable: false, role: "img", "aria-hidden": true, "aria-label": "Fullf\u00F8rt" },
     react_1.default.createElement("path", { d: "M4.93563 6.41478L11.3755 0.404669C11.9796 -0.160351 12.9294 -0.130672 13.4959 0.47478C14.0624 1.08027 14.0299 2.03007 13.4249 2.59621L5.92151 9.59934C5.64138 9.85904 5.27598 10 4.90064 10C4.5069 10 4.12756 9.84621 3.83953 9.56111L1.33953 7.06111C0.75401 6.47558 0.75401 5.52542 1.33953 4.93989C1.92506 4.35437 2.87522 4.35437 3.46075 4.93989L4.93563 6.41478Z", fill: "currentColor" })));
 exports.Step = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, children, as: Component = "a", unsafe_index = 0, completed = false, interactive } = _a, rest = __rest(_a, ["className", "children", "as", "unsafe_index", "completed", "interactive"]);
+    var { className, children, as: Component = "a", unsafe_index = 0, completed = false, interactive, onClick } = _a, rest = __rest(_a, ["className", "children", "as", "unsafe_index", "completed", "interactive", "onClick"]);
     const context = (0, react_1.useContext)(context_1.StepperContext);
     if (context === null) {
         console.error("<Stepper.Step> has to be used within <Stepper>");
@@ -54,16 +55,15 @@ exports.Step = (0, react_1.forwardRef)((_a, ref) => {
     const { activeStep } = context;
     const isInteractive = interactive !== null && interactive !== void 0 ? interactive : context === null || context === void 0 ? void 0 : context.interactive;
     const Comp = isInteractive ? Component : "div";
+    const handleStepClick = () => {
+        isInteractive && context.onStepChange(unsafe_index + 1);
+    };
     return (react_1.default.createElement(Comp, Object.assign({}, rest, { "aria-current": activeStep === unsafe_index, ref: ref, className: (0, clsx_1.default)("navds-stepper__step", className, {
             "navds-stepper__step--active": activeStep === unsafe_index,
             "navds-stepper__step--behind": activeStep > unsafe_index,
             "navds-stepper__step--non-interactive": !isInteractive,
             "navds-stepper__step--completed": completed,
-        }), onClick: (e) => {
-            var _a;
-            isInteractive && context.onStepChange(unsafe_index + 1);
-            (_a = rest === null || rest === void 0 ? void 0 : rest.onClick) === null || _a === void 0 ? void 0 : _a.call(rest, e);
-        } }),
+        }), onClick: (0, composeEventHandlers_1.composeEventHandlers)(onClick, handleStepClick) }),
         completed ? (react_1.default.createElement("span", { className: "navds-stepper__circle navds-stepper__circle--success" },
             react_1.default.createElement(CompletedIcon, null))) : (react_1.default.createElement(typography_1.Label, { className: "navds-stepper__circle", as: "span", "aria-hidden": "true" }, unsafe_index + 1)),
         react_1.default.createElement(typography_1.Label, { as: "span", className: "navds-stepper__content" }, children)));

package/cjs/{util → table}/AnimateHeight.js

@@ -37,6 +37,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 /* https://github.com/Stanko/react-animate-height/blob/v3/src/index.tsx */
 const react_1 = __importStar(require("react"));
 // ------------------ Helpers
+const prefersReducedMotion = (globalThis === null || globalThis === void 0 ? void 0 : globalThis.matchMedia)
+    ? globalThis.matchMedia("(prefers-reduced-motion: reduce)").matches
+    : false;
 function isNumber(n) {
     const number = parseFloat(n);
     return !isNaN(number) && isFinite(number);
@@ -68,11 +71,7 @@ const AnimateHeight = (_a) => {
     const contentElement = (0, react_1.useRef)(null);
     const animationClassesTimeoutID = (0, react_1.useRef)();
     const timeoutID = (0, react_1.useRef)();
-    const isBrowser = typeof window !== "undefined";
-    const prefersReducedMotion = (0, react_1.useRef)(isBrowser && window.matchMedia
-        ? window.matchMedia("(prefers-reduced-motion)").matches
-        : false);
-    const duration = prefersReducedMotion.current ? 0 : userDuration;
+    const duration = prefersReducedMotion ? 0 : userDuration;
     let initHeight = height;
     let initOverflow = "visible";
     if (typeof initHeight === "number") {