@navikt/ds-react 5.12.5 → 5.14.0

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/ModalBody.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 ModalBody = (0, react_1.forwardRef)((_a, ref) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
     return (react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-modal__body", className) })));

package/cjs/modal/ModalFooter.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 ModalFooter = (0, react_1.forwardRef)((_a, ref) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
     return (react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-modal__footer", className) })));

package/cjs/modal/ModalHeader.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 aksel_icons_1 = require("@navikt/aksel-icons");
 const button_1 = require("../button");
 const ModalContext_1 = require("./ModalContext");

package/cjs/pagination/PaginationItem.js

@@ -38,8 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Item = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 const button_1 = require("../button");
 exports.Item = (0, react_1.forwardRef)((_a, ref) => {
     var { children, as: Component = "button", selected = false, className } = _a, rest = __rest(_a, ["children", "as", "selected", "className"]);

package/cjs/panel/Panel.js

@@ -38,8 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Panel = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 /**
  * A component that displays a bordered panel with heading and body.
  *

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/popover/PopoverContent.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 PopoverContent = (0, react_1.forwardRef)((_a, ref) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
     return (react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-popover__content", className) })));

package/cjs/read-more/ReadMore.js

@@ -42,6 +42,8 @@ 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
  * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/read-more)
@@ -60,22 +62,20 @@ const typography_1 = require("../typography");
  * </ReadMore>
  */
 exports.ReadMore = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, header, children, open, defaultOpen = false, onClick, size = "medium" } = _a, rest = __rest(_a, ["className", "header", "children", "open", "defaultOpen", "onClick", "size"]);
-    const [internalOpen, setInternalOpen] = (0, react_1.useState)(defaultOpen);
-    const isOpened = open !== null && open !== void 0 ? open : internalOpen;
-    return (react_1.default.createElement("div", { className: (0, clsx_1.default)("navds-read-more", `navds-read-more--${size}`, className, { "navds-read-more--open": isOpened }) },
+    var { className, header, children, open, defaultOpen = false, onClick, size = "medium", onOpenChange } = _a, rest = __rest(_a, ["className", "header", "children", "open", "defaultOpen", "onClick", "size", "onOpenChange"]);
+    const [_open, _setOpen] = (0, useControllableState_1.useControllableState)({
+        defaultValue: defaultOpen,
+        value: open,
+        onChange: onOpenChange,
+    });
+    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) => {
-                if (open === undefined) {
-                    setInternalOpen((isOpen) => !isOpen);
-                }
-                onClick === null || onClick === void 0 ? void 0 : onClick(e);
-            }, "aria-expanded": isOpened }),
+            }), 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": !isOpened, className: (0, clsx_1.default)("navds-read-more__content", {
-                "navds-read-more__content--closed": !isOpened,
+        react_1.default.createElement(typography_1.BodyLong, { as: "div", "aria-hidden": !_open, className: (0, clsx_1.default)("navds-read-more__content", {
+                "navds-read-more__content--closed": !_open,
             }), size: size }, children)));
 });
 exports.default = exports.ReadMore;

package/cjs/skeleton/Skeleton.js

@@ -38,8 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Skeleton = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 /**
  * Simple skeleton loader
  * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/skeleton)

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/table/Body.js

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

package/cjs/table/ColumnHeader.js

@@ -38,8 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColumnHeader = void 0;
-const aksel_icons_1 = require("@navikt/aksel-icons");
 const react_1 = __importStar(require("react"));
+const aksel_icons_1 = require("@navikt/aksel-icons");
 const HeaderCell_1 = __importDefault(require("./HeaderCell"));
 const context_1 = require("./context");
 exports.ColumnHeader = (0, react_1.forwardRef)((_a, ref) => {

package/cjs/table/DataCell.js

@@ -38,13 +38,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataCell = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 const typography_1 = require("../typography");
 exports.DataCell = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, children = "", align } = _a, rest = __rest(_a, ["className", "children", "align"]);
+    var { className, children = "", align, textSize } = _a, rest = __rest(_a, ["className", "children", "align", "textSize"]);
     return (react_1.default.createElement(typography_1.BodyShort, Object.assign({ as: "td", ref: ref, className: (0, clsx_1.default)("navds-table__data-cell", className, {
             [`navds-table__data-cell--align-${align}`]: align,
-        }) }, rest), children));
+        }), size: textSize }, rest), children));
 });
 exports.default = exports.DataCell;

package/cjs/table/ExpandableRow.js

@@ -38,45 +38,46 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExpandableRow = void 0;
-const aksel_icons_1 = require("@navikt/aksel-icons");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
-const util_1 = require("../util");
-const AnimateHeight_1 = __importDefault(require("../util/AnimateHeight"));
+const aksel_icons_1 = require("@navikt/aksel-icons");
+const composeEventHandlers_1 = require("../util/composeEventHandlers");
+const hooks_1 = require("../util/hooks");
+const useControllableState_1 = require("../util/hooks/useControllableState");
+const AnimateHeight_1 = __importDefault(require("./AnimateHeight"));
 const DataCell_1 = __importDefault(require("./DataCell"));
 const Row_1 = __importDefault(require("./Row"));
 exports.ExpandableRow = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, children, content, togglePlacement = "left", defaultOpen = false, open, onOpenChange, expansionDisabled = false, expandOnRowClick = false, colSpan = 999 } = _a, rest = __rest(_a, ["className", "children", "content", "togglePlacement", "defaultOpen", "open", "onOpenChange", "expansionDisabled", "expandOnRowClick", "colSpan"]);
-    const [internalOpen, setInternalOpen] = (0, react_1.useState)(defaultOpen);
-    const id = (0, util_1.useId)();
-    const isOpen = open !== null && open !== void 0 ? open : internalOpen;
+    var { className, children, content, togglePlacement = "left", defaultOpen = false, open, onOpenChange, expansionDisabled = false, expandOnRowClick = false, colSpan = 999, onClick } = _a, rest = __rest(_a, ["className", "children", "content", "togglePlacement", "defaultOpen", "open", "onOpenChange", "expansionDisabled", "expandOnRowClick", "colSpan", "onClick"]);
+    const [_open, _setOpen] = (0, useControllableState_1.useControllableState)({
+        defaultValue: defaultOpen,
+        value: open,
+        onChange: onOpenChange,
+    });
+    const id = (0, hooks_1.useId)();
     const expansionHandler = (e) => {
-        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(!isOpen);
-        if (open === undefined) {
-            setInternalOpen((oldOpen) => !oldOpen);
-        }
+        _setOpen((x) => !x);
         e.stopPropagation();
     };
     const onRowClick = (e) => !isInteractiveTarget(e.target) && expansionHandler(e);
+    const handleRowClick = (e) => {
+        !expansionDisabled && expandOnRowClick && onRowClick(e);
+    };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(Row_1.default, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-table__expandable-row", className, {
-                "navds-table__expandable-row--open": isOpen,
+                "navds-table__expandable-row--open": _open,
                 "navds-table__expandable-row--expansion-disabled": expansionDisabled,
                 "navds-table__expandable-row--clickable": expandOnRowClick,
-            }), onClick: (e) => {
-                var _a;
-                !expansionDisabled && expandOnRowClick && onRowClick(e);
-                (_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, handleRowClick) }),
             togglePlacement === "right" && children,
             react_1.default.createElement(DataCell_1.default, { className: (0, clsx_1.default)("navds-table__toggle-expand-cell", {
-                    "navds-table__toggle-expand-cell--open": isOpen,
-                }) }, !expansionDisabled && (react_1.default.createElement("button", { className: "navds-table__toggle-expand-button", type: "button", "aria-controls": id, "aria-expanded": isOpen, onClick: expansionHandler },
-                react_1.default.createElement(aksel_icons_1.ChevronDownIcon, { className: "navds-table__expandable-icon", title: isOpen ? "Vis mindre" : "Vis mer" })))),
+                    "navds-table__toggle-expand-cell--open": _open,
+                }) }, !expansionDisabled && (react_1.default.createElement("button", { className: "navds-table__toggle-expand-button", type: "button", "aria-controls": id, "aria-expanded": _open, onClick: expansionHandler },
+                react_1.default.createElement(aksel_icons_1.ChevronDownIcon, { className: "navds-table__expandable-icon", title: _open ? "Vis mindre" : "Vis mer" })))),
             togglePlacement === "left" && children),
-        react_1.default.createElement("tr", { className: "navds-table__expanded-row", "aria-hidden": !isOpen, id: id },
+        react_1.default.createElement("tr", { className: "navds-table__expanded-row", "aria-hidden": !_open, id: id },
             react_1.default.createElement("td", { colSpan: colSpan, className: "navds-table__expanded-row-cell" },
-                react_1.default.createElement(AnimateHeight_1.default, { className: "navds-table__expanded-row-collapse", innerClassName: "navds-table__expanded-row-content", height: isOpen ? "auto" : 0, duration: 250 }, content)))));
+                react_1.default.createElement(AnimateHeight_1.default, { className: "navds-table__expanded-row-collapse", innerClassName: "navds-table__expanded-row-content", height: _open ? "auto" : 0, duration: 250 }, content)))));
 });
 function isInteractiveTarget(elm) {
     if (elm.nodeName === "TD" || elm.nodeName === "TH" || !elm.parentElement) {

package/cjs/table/Header.js

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

package/cjs/table/HeaderCell.js

@@ -41,9 +41,10 @@ exports.HeaderCell = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 exports.HeaderCell = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, children, align } = _a, rest = __rest(_a, ["className", "children", "align"]);
+    var { className, children, align, textSize } = _a, rest = __rest(_a, ["className", "children", "align", "textSize"]);
     return (react_1.default.createElement("th", Object.assign({ ref: ref, className: (0, clsx_1.default)("navds-table__header-cell", "navds-label", className, {
             [`navds-table__header-cell--align-${align}`]: align,
+            "navds-label--small": textSize === "small",
         }) }, rest), children));
 });
 exports.default = exports.HeaderCell;

package/cjs/table/Row.js

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

package/cjs/tabs/TabList.js

@@ -38,17 +38,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabList = void 0;
-const aksel_icons_1 = require("@navikt/aksel-icons");
 const react_tabs_1 = require("@radix-ui/react-tabs");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
+const aksel_icons_1 = require("@navikt/aksel-icons");
 const util_1 = require("../util");
+const useMergeRefs_1 = require("../util/hooks/useMergeRefs");
 const context_1 = require("./context");
 exports.TabList = (0, react_1.forwardRef)((_a, ref) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
     const context = (0, react_1.useContext)(context_1.TabsContext);
     const listRef = (0, react_1.useRef)(null);
-    const mergedRef = (0, react_1.useMemo)(() => (0, util_1.mergeRefs)([listRef, ref]), [ref]);
+    const mergedRef = (0, useMergeRefs_1.useMergeRefs)(listRef, ref);
     const [displayScroll, setDisplayScroll] = (0, react_1.useState)({
         start: false,
         end: false,

package/cjs/tabs/Tabs.js

@@ -41,10 +41,10 @@ exports.Tabs = void 0;
 const RadixTabs = __importStar(require("@radix-ui/react-tabs"));
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
-const context_1 = require("./context");
 const Tab_1 = __importDefault(require("./Tab"));
 const TabList_1 = __importDefault(require("./TabList"));
 const TabPanel_1 = __importDefault(require("./TabPanel"));
+const context_1 = require("./context");
 /**
  * A component that displays a set of tabs that can be used to switch between different views.
  *

package/cjs/tag/Tag.js

@@ -38,8 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tag = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 const typography_1 = require("../typography");
 /**
  * A component that displays a small label with a text and a background color.
@@ -53,7 +53,9 @@ const typography_1 = require("../typography");
  * ```
  */
 exports.Tag = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, variant, size = "medium" } = _a, rest = __rest(_a, ["className", "variant", "size"]);
-    return (react_1.default.createElement(typography_1.BodyShort, Object.assign({}, rest, { ref: ref, as: "span", size: size === "medium" ? "medium" : "small", className: (0, clsx_1.default)("navds-tag", className, `navds-tag--${variant}`, `navds-tag--${size}`) })));
+    var { children, className, variant, size = "medium", icon } = _a, rest = __rest(_a, ["children", "className", "variant", "size", "icon"]);
+    return (react_1.default.createElement(typography_1.BodyShort, Object.assign({}, rest, { ref: ref, as: "span", size: size === "medium" ? "medium" : "small", className: (0, clsx_1.default)("navds-tag", className, `navds-tag--${variant}`, `navds-tag--${size}`) }),
+        icon && react_1.default.createElement("span", { className: "navds-tag__icon--left" }, icon),
+        children));
 });
 exports.default = exports.Tag;

package/cjs/timeline/AxisLabels.js

@@ -4,10 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AxisLabels = exports.yearLabels = exports.monthLabels = exports.dayLabels = void 0;
-const Detail_1 = require("../typography/Detail");
 const date_fns_1 = require("date-fns");
 const nb_1 = __importDefault(require("date-fns/locale/nb"));
 const react_1 = __importDefault(require("react"));
+const Detail_1 = require("../typography/Detail");
 const useTimelineContext_1 = require("./hooks/useTimelineContext");
 const utils_1 = require("./utils");
 const calc_1 = require("./utils/calc");

package/cjs/timeline/Pin.js

@@ -38,7 +38,7 @@ exports.Pin = void 0;
 const react_1 = require("@floating-ui/react");
 const date_fns_1 = require("date-fns");
 const react_2 = __importStar(require("react"));
-const util_1 = require("../util");
+const useMergeRefs_1 = require("../util/hooks/useMergeRefs");
 const useTimelineContext_1 = require("./hooks/useTimelineContext");
 const calc_1 = require("./utils/calc");
 exports.Pin = (0, react_2.forwardRef)((_a, ref) => {
@@ -73,7 +73,7 @@ exports.Pin = (0, react_2.forwardRef)((_a, ref) => {
         dismiss,
         role,
     ]);
-    const mergedRef = (0, react_2.useMemo)(() => (0, util_1.mergeRefs)([refs.setReference, ref]), [ref, refs.setReference]);
+    const mergedRef = (0, useMergeRefs_1.useMergeRefs)(refs.setReference, ref);
     const staticSide = {
         top: "bottom",
         right: "left",

package/cjs/timeline/TimelineRow.js

@@ -38,14 +38,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineRow = void 0;
-const BodyShort_1 = require("../typography/BodyShort");
+const clsx_1 = __importDefault(require("clsx"));
 const date_fns_1 = require("date-fns");
 const react_1 = __importStar(require("react"));
+const BodyShort_1 = require("../typography/BodyShort");
 const usePeriodContext_1 = require("./hooks/usePeriodContext");
 const useRowContext_1 = require("./hooks/useRowContext");
 const useTimelineContext_1 = require("./hooks/useTimelineContext");
 const period_1 = __importDefault(require("./period"));
-const clsx_1 = __importDefault(require("clsx"));
 exports.TimelineRow = (0, react_1.forwardRef)((_a, ref) => {
     var { label, className, headingTag = "h3", icon } = _a, rest = __rest(_a, ["label", "className", "headingTag", "icon"]);
     const { periods, id, active } = (0, useRowContext_1.useRowContext)();

package/cjs/timeline/hooks/useTimelineRows.js

@@ -1,16 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLatestDate = exports.useEarliestDate = exports.useTimelineRows = void 0;
-const react_1 = require("react");
 const date_fns_1 = require("date-fns");
-const sort_1 = require("../utils/sort");
+const react_1 = require("react");
 const calc_1 = require("../utils/calc");
 const filter_1 = require("../utils/filter");
+const sort_1 = require("../utils/sort");
 const spatialPeriod = (period, timelineStart, timelineEndInclusive, direction = "left", i, periods, rowIndex) => {
     const start = period.start;
     const endInclusive = period.end;
     const rightOverlap = i < periods.length - 1 && !(0, date_fns_1.isAfter)(periods[i + 1].start, endInclusive);
-    const { horizontalPosition, width } = (0, calc_1.horizontalPositionAndWidth)((0, date_fns_1.startOfDay)(start), (0, date_fns_1.endOfDay)(rightOverlap ? (0, date_fns_1.startOfDay)((0, date_fns_1.subDays)(periods[i + 1].start, 1)) : endInclusive), timelineStart, timelineEndInclusive);
+    const { horizontalPosition, width } = (0, calc_1.horizontalPositionAndWidth)((0, date_fns_1.startOfDay)(start), (0, date_fns_1.endOfDay)(rightOverlap
+        ? (0, date_fns_1.startOfDay)((0, date_fns_1.subDays)(periods[i + 1].start, 1))
+        : endInclusive), timelineStart, timelineEndInclusive);
     return {
         id: `r-${rowIndex}-p-${i}`,
         start,

package/cjs/timeline/period/ClickablePeriod.js

@@ -29,7 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("@floating-ui/react");
 const clsx_1 = __importDefault(require("clsx"));
 const react_2 = __importStar(require("react"));
-const util_1 = require("../../util");
+const useMergeRefs_1 = require("../../util/hooks/useMergeRefs");
 const usePeriodContext_1 = require("../hooks/usePeriodContext");
 const useRowContext_1 = require("../hooks/useRowContext");
 const useTimelineContext_1 = require("../hooks/useTimelineContext");
@@ -67,7 +67,7 @@ const ClickablePeriod = react_2.default.memo(({ onSelectPeriod, start, end, stat
         dismiss,
         role,
     ]);
-    const mergedRef = (0, react_2.useMemo)(() => (0, util_1.mergeRefs)([refs.setReference, periodRef]), [periodRef, refs.setReference]);
+    const mergedRef = (0, useMergeRefs_1.useMergeRefs)(refs.setReference, periodRef);
     const staticSide = {
         top: "bottom",
         right: "left",

package/cjs/timeline/utils/timeline.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parseRows = void 0;
-const util_1 = require("../../util");
 const react_1 = __importDefault(require("react"));
+const util_1 = require("../../util");
 const parseRows = (rowChildren) => {
     const parsedChildren = [];
     rowChildren === null || rowChildren === void 0 ? void 0 : rowChildren.forEach((r) => {

package/cjs/timeline/zoom/ZoomButton.js

@@ -35,9 +35,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZoomButton = void 0;
-const Detail_1 = require("../../typography/Detail");
 const date_fns_1 = require("date-fns");
 const react_1 = __importStar(require("react"));
+const Detail_1 = require("../../typography/Detail");
 const useTimelineContext_1 = require("../hooks/useTimelineContext");
 exports.ZoomButton = (0, react_1.forwardRef)((_a, ref) => {
     var { label, interval, count } = _a, rest = __rest(_a, ["label", "interval", "count"]);