@navikt/ds-react 5.5.0 → 5.6.0

package/cjs/layout/sidemal-test/content-box/ContentBox.js

@@ -0,0 +1,65 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentBox = void 0;
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
+exports.ContentBox = (0, react_1.forwardRef)((_a, ref) => {
+    var { as: Component = "div", className, maxWidth = "xl" } = _a, rest = __rest(_a, ["as", "className", "maxWidth"]);
+    const getMaxWidth = () => {
+        return maxWidth === "3xl"
+            ? "1920px"
+            : maxWidth === "2xl"
+                ? "1440px"
+                : maxWidth === "xl"
+                    ? "1280px"
+                    : "1024px";
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, style: { "--__ac-contentbox--max-width": getMaxWidth() }, className: (0, clsx_1.default)("navds-contentbox", className) })),
+        react_1.default.createElement("style", null, `
+              .navds-contentbox {
+                --__ac-contentbox--max-width: initial;
+
+                margin: 0 auto;
+                max-width: var(--__ac-contentbox--max-width);
+              }
+            `)));
+});
+exports.default = exports.ContentBox;

package/cjs/layout/sidemal-test/content-box/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentBox = void 0;
+var ContentBox_1 = require("./ContentBox");
+Object.defineProperty(exports, "ContentBox", { enumerable: true, get: function () { return __importDefault(ContentBox_1).default; } });

package/cjs/layout/sidemal-test/content-box/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../../../../esm/layout/sidemal-test/content-box/index.js",
+  "types": "../../../../esm/layout/sidemal-test/content-box/index.d.ts"
+}

package/cjs/layout/stack/Stack.js

@@ -42,8 +42,8 @@ const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const css_1 = require("../utilities/css");
 exports.Stack = (0, react_1.forwardRef)((_a, ref) => {
-    var { as: Component = "div", className, align, justify, wrap = true, gap, style: _style, direction } = _a, rest = __rest(_a, ["as", "className", "align", "justify", "wrap", "gap", "style", "direction"]);
-    const style = Object.assign(Object.assign(Object.assign({}, _style), { "--__ac-stack-direction": direction, "--__ac-stack-align": align, "--__ac-stack-justify": justify, "--__ac-stack-wrap": wrap ? "wrap" : "nowrap" }), (0, css_1.getResponsiveProps)(`stack`, "gap", "spacing", gap));
+    var { as: Component = "div", className, align, justify, wrap = true, gap, style: _style, direction = "row" } = _a, rest = __rest(_a, ["as", "className", "align", "justify", "wrap", "gap", "style", "direction"]);
+    const style = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, _style), { "--__ac-stack-wrap": wrap ? "wrap" : "nowrap" }), (0, css_1.getResponsiveProps)(`stack`, "gap", "spacing", gap)), (0, css_1.getResponsiveValue)(`stack`, "direction", direction)), (0, css_1.getResponsiveValue)(`stack`, "align", align)), (0, css_1.getResponsiveValue)(`stack`, "justify", justify));
     return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, style: style, className: (0, clsx_1.default)("navds-stack", className, {
             "navds-vstack": direction === "column",
             "navds-hstack": direction === "row",

package/cjs/layout/stack/index.js

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Spacer = exports.VStack = exports.HStack = void 0;
+exports.Spacer = exports.Stack = exports.VStack = exports.HStack = void 0;
 var HStack_1 = require("./HStack");
 Object.defineProperty(exports, "HStack", { enumerable: true, get: function () { return HStack_1.HStack; } });
 var VStack_1 = require("./VStack");
 Object.defineProperty(exports, "VStack", { enumerable: true, get: function () { return VStack_1.VStack; } });
+var Stack_1 = require("./Stack");
+Object.defineProperty(exports, "Stack", { enumerable: true, get: function () { return Stack_1.Stack; } });
 var Spacer_1 = require("./Spacer");
 Object.defineProperty(exports, "Spacer", { enumerable: true, get: function () { return Spacer_1.Spacer; } });

package/cjs/layout/utilities/css.js

@@ -16,26 +16,49 @@ function getResponsiveValue(componentName, componentProp, responsiveProp) {
     ]));
 }
 exports.getResponsiveValue = getResponsiveValue;
-function getResponsiveProps(componentName, componentProp, tokenSubgroup, responsiveProp, tokenExceptions = []) {
+const translateExceptionToCSS = (exception) => {
+    switch (exception) {
+        case "px":
+            return "1px";
+    }
+    return exception;
+};
+const translateTokenStringToCSS = (componentProp, tokenString, tokenSubgroup, tokenExceptions, invert) => {
+    return tokenString
+        .split(" ")
+        .map((x, _, arr) => {
+        if (componentProp === "margin-inline" && x === "full") {
+            const width = 100 / arr.length;
+            return `calc((100vw - ${width}%)/-2)`;
+        }
+        let output = `var(--a-${tokenSubgroup}-${x})`;
+        if (tokenExceptions.includes(x)) {
+            output = translateExceptionToCSS(x);
+        }
+        if (invert) {
+            if (x === "0") {
+                return `0`;
+            }
+            return `calc(-1 * ${output})`;
+        }
+        return output;
+    })
+        .join(" ");
+};
+function getResponsiveProps(componentName, componentProp, tokenSubgroup, responsiveProp, invert = false, tokenExceptions = []) {
     if (!responsiveProp) {
         return {};
     }
     if (typeof responsiveProp === "string") {
         return {
-            [`--__ac-${componentName}-${componentProp}-xs`]: responsiveProp
-                .split(" ")
-                .map((x) => tokenExceptions.includes(x) ? x : `var(--a-${tokenSubgroup}-${x})`)
-                .join(" "),
+            [`--__ac-${componentName}-${componentProp}-xs`]: translateTokenStringToCSS(componentProp, responsiveProp, tokenSubgroup, tokenExceptions, invert),
         };
     }
-    return Object.fromEntries(Object.entries(responsiveProp).map(([breakpointAlias, aliasOrScale]) => {
-        return [
-            `--__ac-${componentName}-${componentProp}-${breakpointAlias}`,
-            aliasOrScale
-                .split(" ")
-                .map((x) => tokenExceptions.includes(x) ? x : `var(--a-${tokenSubgroup}-${x})`)
-                .join(" "),
-        ];
-    }));
+    const styleProps = {};
+    Object.entries(responsiveProp).forEach(([breakpointAlias, aliasOrScale]) => {
+        styleProps[`--__ac-${componentName}-${componentProp}-${breakpointAlias}`] =
+            translateTokenStringToCSS(componentProp, aliasOrScale, tokenSubgroup, tokenExceptions, invert);
+    });
+    return styleProps;
 }
 exports.getResponsiveProps = getResponsiveProps;

package/cjs/loader/Loader.js

@@ -53,11 +53,11 @@ const __1 = require("..");
  * ```
  */
 exports.Loader = (0, react_1.forwardRef)((_a, ref) => {
-    var { children, className, size = "medium", title = "venter...", transparent = false, variant = "neutral", id } = _a, rest = __rest(_a, ["children", "className", "size", "title", "transparent", "variant", "id"]);
+    var { className, size = "medium", title = "venter...", transparent = false, variant = "neutral", id } = _a, rest = __rest(_a, ["className", "size", "title", "transparent", "variant", "id"]);
     const internalId = (0, __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" }, rest),
+        }), focusable: "false", viewBox: "0 0 50 50", preserveAspectRatio: "xMidYMid" }, (0, __1.omit)(rest, ["children"])),
         react_1.default.createElement("title", { id: id !== null && id !== void 0 ? id : `loader-${internalId}` }, title),
         react_1.default.createElement("circle", { className: "navds-loader__background", xmlns: "http://www.w3.org/2000/svg", cx: "25", cy: "25", r: "20", fill: "none" }),
         react_1.default.createElement("circle", { className: "navds-loader__foreground", cx: "25", cy: "25", r: "20", fill: "none", strokeDasharray: "50 155" })));

package/cjs/modal/dialog-polyfill.js

@@ -1,4 +1,6 @@
 "use strict";
+/* eslint-disable no-var */
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.needPolyfill = void 0;

package/cjs/popover/Popover.js

@@ -74,7 +74,7 @@ exports.Popover = (0, react_2.forwardRef)((_a, ref) => {
         strategy: chosenStrategy,
         placement,
         open: open,
-        onOpenChange: onClose,
+        onOpenChange: () => onClose(),
         middleware: [
             (0, react_1.offset)(offset !== null && offset !== void 0 ? offset : (arrow ? 16 : 4)),
             (0, react_1.flip)({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
@@ -115,13 +115,14 @@ exports.Popover = (0, react_2.forwardRef)((_a, ref) => {
     }[flPlacement.split("-")[0]];
     return (react_2.default.createElement("div", Object.assign({ className: (0, clsx_1.default)("navds-popover", className, {
             "navds-popover--hidden": !open || !anchorEl,
-        }), "data-placement": flPlacement, "aria-hidden": !open || !anchorEl, tabIndex: -1 }, getFloatingProps({
+        }), "data-placement": flPlacement, "aria-hidden": !open || !anchorEl }, getFloatingProps({
         ref: floatingRef,
         style: {
             position: strategy,
             top: y !== null && y !== void 0 ? y : 0,
             left: x !== null && x !== void 0 ? x : 0,
         },
+        tabIndex: undefined,
     }), rest),
         children,
         arrow && (react_2.default.createElement("div", { ref: (node) => {

package/cjs/tabs/TabList.js

@@ -54,16 +54,13 @@ exports.TabList = (0, react_1.forwardRef)((_a, ref) => {
         end: false,
     });
     const updateScrollButtonState = (0, react_1.useMemo)(() => (0, __1.debounce)(() => {
-        var _a;
         if (!(listRef === null || listRef === void 0 ? void 0 : listRef.current))
             return;
         const { scrollWidth, clientWidth } = listRef.current;
-        let showStartScroll;
-        let showEndScroll;
-        const scrollLeft = (_a = listRef === null || listRef === void 0 ? void 0 : listRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft;
+        const scrollLeft = listRef.current.scrollLeft;
         // use 1 for the potential rounding error with browser zooms.
-        showStartScroll = scrollLeft > 1;
-        showEndScroll = scrollLeft < scrollWidth - clientWidth - 1;
+        const showStartScroll = scrollLeft > 1;
+        const showEndScroll = scrollLeft < scrollWidth - clientWidth - 1;
         setDisplayScroll((displayScroll) => showStartScroll === displayScroll.start &&
             showEndScroll === displayScroll.end
             ? displayScroll
@@ -94,7 +91,9 @@ exports.TabList = (0, react_1.forwardRef)((_a, ref) => {
             updateScrollButtonState.clear();
         };
     }, [updateScrollButtonState]);
-    const ScrollButton = ({ dir, hidden, }) => (react_1.default.createElement("div", { className: (0, clsx_1.default)("navds-tabs__scroll-button", {
+    const ScrollButton = ({ dir, hidden, }) => (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    react_1.default.createElement("div", { className: (0, clsx_1.default)("navds-tabs__scroll-button", {
             "navds-tabs__scroll-button--hidden": hidden,
         }), onClick: () => {
             if (!listRef.current)

package/cjs/timeline/Pin.js

@@ -48,24 +48,30 @@ exports.Pin = (0, react_2.forwardRef)((_a, ref) => {
     const arrowRef = (0, react_2.useRef)(null);
     const { context, placement, middlewareData: { arrow: { x: arrowX, y: arrowY } = {} }, refs, floatingStyles, } = (0, react_1.useFloating)({
         placement: "top",
-        open: open,
-        onOpenChange: setOpen,
+        open,
+        onOpenChange: (_open) => setOpen(_open),
+        whileElementsMounted: react_1.autoUpdate,
         middleware: [
             (0, react_1.offset)(16),
             (0, react_1.shift)(),
             (0, react_1.flip)({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
             (0, react_1.arrow)({ element: arrowRef, padding: 5 }),
         ],
-        whileElementsMounted: react_1.autoUpdate,
     });
+    const hover = (0, react_1.useHover)(context, {
+        handleClose: (0, react_1.safePolygon)(),
+        restMs: 25,
+        delay: { open: 1000 },
+        move: false,
+    });
+    const focus = (0, react_1.useFocus)(context);
+    const dismiss = (0, react_1.useDismiss)(context);
+    const role = (0, react_1.useRole)(context, { role: "dialog" });
     const { getFloatingProps, getReferenceProps } = (0, react_1.useInteractions)([
-        (0, react_1.useHover)(context, {
-            handleClose: (0, react_1.safePolygon)(),
-            restMs: 25,
-            delay: { open: 1000 },
-        }),
-        (0, react_1.useFocus)(context),
-        (0, react_1.useDismiss)(context),
+        hover,
+        focus,
+        dismiss,
+        role,
     ]);
     const mergedRef = (0, react_2.useMemo)(() => (0, util_1.mergeRefs)([refs.setReference, ref]), [ref, refs.setReference]);
     const staticSide = {
@@ -88,16 +94,10 @@ exports.Pin = (0, react_2.forwardRef)((_a, ref) => {
                     }
                 },
             })))),
-        children && (react_2.default.createElement("div", Object.assign({ className: "navds-timeline__popover", "data-placement": placement, "aria-hidden": !open, ref: refs.setFloating }, getFloatingProps({
-            tabIndex: -1,
-            onBlur: (e) => e.target.previousSibling !== document.activeElement &&
-                open &&
-                setOpen(false),
-        }), { style: Object.assign(Object.assign({}, floatingStyles), { display: open ? undefined : "none" }) }),
-            react_2.default.createElement("div", { className: "navds-timeline__popover-content" }, children),
-            react_2.default.createElement("div", { ref: (node) => {
-                    arrowRef.current = node;
-                }, style: Object.assign(Object.assign(Object.assign({}, (arrowX != null ? { left: arrowX } : {})), (arrowY != null ? { top: arrowY } : {})), (staticSide ? { [staticSide]: "-0.5rem" } : {})), className: "navds-timeline__popover-arrow" })))));
+        children && open && (react_2.default.createElement(react_1.FloatingFocusManager, { context: context, modal: false, initialFocus: -1, returnFocus: false },
+            react_2.default.createElement("div", Object.assign({ className: "navds-timeline__popover", "data-placement": placement, ref: refs.setFloating }, getFloatingProps(), { tabIndex: undefined, style: floatingStyles }),
+                children,
+                react_2.default.createElement("div", { ref: arrowRef, style: Object.assign(Object.assign(Object.assign({}, (arrowX != null ? { left: arrowX } : {})), (arrowY != null ? { top: arrowY } : {})), (staticSide ? { [staticSide]: "-0.5rem" } : {})), className: "navds-timeline__popover-arrow" }))))));
 });
 exports.Pin.componentType = "pin";
 exports.default = exports.Pin;

package/cjs/timeline/Timeline.js

@@ -75,7 +75,9 @@ exports.Timeline = (0, react_1.forwardRef)((_a, ref) => {
         children = [children];
     }
     const rowChildren = react_1.default.Children.toArray(children).filter((c) => { var _a; return ((_a = c === null || c === void 0 ? void 0 : c.type) === null || _a === void 0 ? void 0 : _a.componentType) === "row"; });
-    const pins = react_1.default.Children.toArray(children).filter((c) => { var _a; return ((_a = c === null || c === void 0 ? void 0 : c.type) === null || _a === void 0 ? void 0 : _a.componentType) === "pin"; });
+    const pins = react_1.default.Children.toArray(children)
+        .filter((c) => { var _a; return ((_a = c === null || c === void 0 ? void 0 : c.type) === null || _a === void 0 ? void 0 : _a.componentType) === "pin"; })
+        .map((x) => () => x);
     const zoomComponent = react_1.default.Children.toArray(children).find((c) => { var _a; return ((_a = c === null || c === void 0 ? void 0 : c.type) === null || _a === void 0 ? void 0 : _a.componentType) === "zoom"; });
     const rowsRaw = (0, react_1.useMemo)(() => {
         return (0, timeline_1.parseRows)(rowChildren);
@@ -159,9 +161,7 @@ exports.Timeline = (0, react_1.forwardRef)((_a, ref) => {
         react_1.default.createElement("div", Object.assign({}, rest, { ref: ref }),
             react_1.default.createElement("div", { className: "navds-timeline" },
                 react_1.default.createElement(AxisLabels_1.AxisLabels, { templates: axisLabelTemplates }),
-                pins.map((pin) => {
-                    return pin;
-                }),
+                pins.map((Pin, i) => (react_1.default.createElement(Pin, { key: `pin-${i}` }))),
                 processedRows.map((row, i) => {
                     return (react_1.default.createElement(useRowContext_1.RowContext.Provider, { key: `row-${row.id}`, value: {
                             periods: row.periods,

package/cjs/timeline/period/ClickablePeriod.js

@@ -43,23 +43,29 @@ const ClickablePeriod = react_2.default.memo(({ onSelectPeriod, start, end, stat
     const { context, placement, middlewareData: { arrow: { x: arrowX, y: arrowY } = {} }, refs, floatingStyles, } = (0, react_1.useFloating)({
         placement: "top",
         open: open,
-        onOpenChange: setOpen,
+        onOpenChange: (_open) => setOpen(_open),
+        whileElementsMounted: react_1.autoUpdate,
         middleware: [
             (0, react_1.offset)(16),
             (0, react_1.shift)(),
             (0, react_1.flip)({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
             (0, react_1.arrow)({ element: arrowRef, padding: 5 }),
         ],
-        whileElementsMounted: react_1.autoUpdate,
     });
+    const hover = (0, react_1.useHover)(context, {
+        handleClose: (0, react_1.safePolygon)(),
+        restMs: 25,
+        delay: { open: 1000 },
+        move: false,
+    });
+    const focus = (0, react_1.useFocus)(context);
+    const dismiss = (0, react_1.useDismiss)(context);
+    const role = (0, react_1.useRole)(context, { role: "dialog" });
     const { getFloatingProps, getReferenceProps } = (0, react_1.useInteractions)([
-        (0, react_1.useHover)(context, {
-            handleClose: (0, react_1.safePolygon)(),
-            restMs: 25,
-            delay: { open: 1000 },
-        }),
-        (0, react_1.useFocus)(context),
-        (0, react_1.useDismiss)(context),
+        hover,
+        focus,
+        dismiss,
+        role,
     ]);
     const mergedRef = (0, react_2.useMemo)(() => (0, util_1.mergeRefs)([refs.setReference, periodRef]), [periodRef, refs.setReference]);
     const staticSide = {
@@ -103,15 +109,9 @@ const ClickablePeriod = react_2.default.memo(({ onSelectPeriod, start, end, stat
             },
         })),
             react_2.default.createElement("span", { className: "navds-timeline__period--inner" }, icon)),
-        children && (react_2.default.createElement("div", Object.assign({ className: "navds-timeline__popover", "data-placement": placement, "aria-hidden": !open, ref: refs.setFloating }, getFloatingProps({
-            tabIndex: -1,
-            onBlur: (e) => e.target.previousSibling !== document.activeElement &&
-                open &&
-                setOpen(false),
-        }), { style: Object.assign(Object.assign({}, floatingStyles), { display: open ? undefined : "none" }) }),
-            react_2.default.createElement("div", { className: "navds-timeline__popover-content" }, children),
-            react_2.default.createElement("div", { ref: (node) => {
-                    arrowRef.current = node;
-                }, style: Object.assign(Object.assign(Object.assign({}, (arrowX != null ? { left: arrowX } : {})), (arrowY != null ? { top: arrowY } : {})), (staticSide ? { [staticSide]: "-0.5rem" } : {})), className: "navds-timeline__popover-arrow" })))));
+        children && open && (react_2.default.createElement(react_1.FloatingFocusManager, { context: context, modal: false, initialFocus: -1, returnFocus: false },
+            react_2.default.createElement("div", Object.assign({ className: "navds-timeline__popover", "data-placement": placement, ref: refs.setFloating }, getFloatingProps(), { style: floatingStyles }),
+                children,
+                react_2.default.createElement("div", { ref: arrowRef, style: Object.assign(Object.assign(Object.assign({}, (arrowX != null ? { left: arrowX } : {})), (arrowY != null ? { top: arrowY } : {})), (staticSide ? { [staticSide]: "-0.5rem" } : {})), className: "navds-timeline__popover-arrow" }))))));
 });
 exports.default = ClickablePeriod;

package/cjs/timeline/period/index.js

@@ -40,7 +40,7 @@ exports.Period = (0, react_1.forwardRef)(({ icon }, ref) => {
         return react_1.default.createElement(react_1.default.Fragment, null);
     }
     const { start, endInclusive, width, horizontalPosition, status = "neutral", onSelectPeriod, cropped, direction, children, isActive, statusLabel, } = period;
-    return onSelectPeriod || children ? (react_1.default.createElement(ClickablePeriod_1.default, { periodRef: ref, start: start, end: endInclusive, status: status, onSelectPeriod: onSelectPeriod, cropped: cropped || "", direction: direction, width: width, left: horizontalPosition, icon: icon, children: children, isActive: isActive, statusLabel: statusLabel, restProps: restProps })) : (react_1.default.createElement(NonClickablePeriod_1.default, { periodRef: ref, start: start, end: endInclusive, status: status, cropped: cropped || "", direction: direction, width: width, left: horizontalPosition, icon: icon, statusLabel: statusLabel, restProps: restProps }));
+    return onSelectPeriod || children ? (react_1.default.createElement(ClickablePeriod_1.default, { periodRef: ref, start: start, end: endInclusive, status: status, onSelectPeriod: onSelectPeriod, cropped: cropped || "", direction: direction, width: width, left: horizontalPosition, icon: icon, isActive: isActive, statusLabel: statusLabel, restProps: restProps }, children)) : (react_1.default.createElement(NonClickablePeriod_1.default, { periodRef: ref, start: start, end: endInclusive, status: status, cropped: cropped || "", direction: direction, width: width, left: horizontalPosition, icon: icon, statusLabel: statusLabel, restProps: restProps }));
 });
 exports.Period.componentType = "period";
 exports.default = exports.Period;

package/cjs/timeline/utils/timeline.js

@@ -7,10 +7,10 @@ exports.parseRows = void 0;
 const util_1 = require("../../util");
 const react_1 = __importDefault(require("react"));
 const parseRows = (rowChildren) => {
-    let parsedChildren = [];
+    const parsedChildren = [];
     rowChildren === null || rowChildren === void 0 ? void 0 : rowChildren.forEach((r) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        let periods = [];
+        const periods = [];
         if (react_1.default.isValidElement(r) && ((_a = r === null || r === void 0 ? void 0 : r.props) === null || _a === void 0 ? void 0 : _a.children)) {
             if (Array.isArray(r.props.children)) {
                 for (let i = 0; i < r.props.children.length; i++) {
@@ -68,7 +68,7 @@ const parseRows = (rowChildren) => {
                 label: r.props.label,
                 icon: r.props.icon,
                 headingTag: r.props.headingTag,
-                periods: periods,
+                periods,
                 restProps: (0, util_1.omit)(r.props, ["label", "icon", "headingTag"]),
                 ref: r === null || r === void 0 ? void 0 : r.ref,
             });

package/cjs/toggle-group/ToggleGroup.js

@@ -60,7 +60,7 @@ exports.ToggleGroupContext = (0, react_1.createContext)(null);
  * ```
  */
 exports.ToggleGroup = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, children, onChange, size = "medium", label, value, defaultValue, id, "aria-describedby": desc, variant = "action" } = _a, rest = __rest(_a, ["className", "children", "onChange", "size", "label", "value", "defaultValue", "id", "aria-describedby", "variant"]);
+    var { className, children, onChange, size = "medium", label, value, defaultValue, "aria-describedby": desc, variant = "action" } = _a, rest = __rest(_a, ["className", "children", "onChange", "size", "label", "value", "defaultValue", "aria-describedby", "variant"]);
     const [groupValue, setGroupValue] = (0, react_1.useState)(defaultValue);
     const labelId = (0, __1.useId)();
     const handleValueChange = (v) => {

package/cjs/tooltip/Tooltip.js

@@ -65,7 +65,7 @@ exports.Tooltip = (0, react_2.forwardRef)((_a, ref) => {
     const { x, y, strategy, context, placement, middlewareData: { arrow: { x: arrowX, y: arrowY } = {}, hide: { referenceHidden } = {}, }, refs, } = (0, react_1.useFloating)({
         placement: _placement,
         open: userOpen !== null && userOpen !== void 0 ? userOpen : open,
-        onOpenChange: setOpen,
+        onOpenChange: (_open) => setOpen(_open),
         middleware: [
             (0, react_1.offset)(_offset ? _offset : _arrow ? 10 : 2),
             (0, react_1.shift)(),

package/cjs/typography/Heading.js

@@ -57,7 +57,7 @@ const util_1 = require("./util");
  */
 exports.Heading = (0, react_1.forwardRef)((_a, ref) => {
     var { level = "1", size, className, as, spacing, align, visuallyHidden, textColor } = _a, rest = __rest(_a, ["level", "size", "className", "as", "spacing", "align", "visuallyHidden", "textColor"]);
-    let HeadingTag = as !== null && as !== void 0 ? as : `h${level}`;
+    const HeadingTag = as !== null && as !== void 0 ? as : `h${level}`;
     return (react_1.default.createElement(HeadingTag, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)(className, "navds-heading", `navds-heading--${size}`, (0, util_1.typoClassNames)({
             spacing,
             align,

package/cjs/util/RandomIcon.js

@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RandomIcon = void 0;
 const AllIcons = __importStar(require("@navikt/aksel-icons"));
 const react_1 = __importDefault(require("react"));
+// eslint-disable-next-line import/namespace
 const icons = Object.keys(AllIcons).map((key) => AllIcons[key]);
 const RandomIcon = () => {
     const Icon = icons[Math.floor(Math.random() * icons.length)];

package/cjs/util/Slot.js

@@ -0,0 +1,88 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Slot = void 0;
+// https://github.com/radix-ui/primitives/blob/main/packages/react/slot/src/Slot.tsx
+const React = __importStar(require("react"));
+const mergeRefs_1 = __importDefault(require("./mergeRefs"));
+exports.Slot = React.forwardRef((props, forwardedRef) => {
+    const { children } = props, slotProps = __rest(props, ["children"]);
+    if (React.isValidElement(children)) {
+        return React.cloneElement(children, Object.assign(Object.assign({}, mergeProps(slotProps, children.props)), { ref: forwardedRef
+                ? (0, mergeRefs_1.default)([forwardedRef, children.ref])
+                : children.ref }));
+    }
+    if (React.Children.count(children) > 1) {
+        console.error("Aksel: Components using 'asChild' expects to recieve a single React element child.");
+        return React.Children.only(null);
+    }
+    return null;
+});
+function mergeProps(slotProps, childProps) {
+    // all child props should override
+    const overrideProps = Object.assign({}, childProps);
+    for (const propName in childProps) {
+        const slotPropValue = slotProps[propName];
+        const childPropValue = childProps[propName];
+        const isHandler = /^on[A-Z]/.test(propName);
+        if (isHandler) {
+            // if the handler exists on both, we compose them
+            if (slotPropValue && childPropValue) {
+                overrideProps[propName] = (...args) => {
+                    childPropValue(...args);
+                    slotPropValue(...args);
+                };
+            }
+            // but if it exists only on the slot, we use only this one
+            else if (slotPropValue) {
+                overrideProps[propName] = slotPropValue;
+            }
+        }
+        // if it's `style`, we merge them
+        else if (propName === "style") {
+            overrideProps[propName] = Object.assign(Object.assign({}, slotPropValue), childPropValue);
+        }
+        else if (propName === "className") {
+            overrideProps[propName] = [slotPropValue, childPropValue]
+                .filter(Boolean)
+                .join(" ");
+        }
+    }
+    return Object.assign(Object.assign({}, slotProps), overrideProps);
+}

package/cjs/util/useId.js

@@ -42,10 +42,8 @@ function useGlobalId(idOverride) {
     }, [defaultId]);
     return id;
 }
-// eslint-disable-next-line no-useless-concat -- Workaround for https://github.com/webpack/webpack/issues/14814
-const maybeReactUseId = react_1.default[
-// eslint-disable-next-line no-useless-concat
-"useId" + ""];
+const maybeReactUseId = react_1.default["useId" + "" // Workaround for https://github.com/webpack/webpack/issues/14814
+];
 /**
  *
  * @example <div id={useId()} />

package/esm/accordion/Accordion.js

@@ -41,6 +41,7 @@ export const Accordion = forwardRef((_a, ref) => {
             variant,
             headingSize,
             size,
+            mounted: true,
         } },
         React.createElement("div", Object.assign({}, rest, { className: cl("navds-accordion", className, `navds-accordion--${size}`, { "navds-accordion--indent": indent }), ref: ref }))));
 });

package/esm/accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/accordion/Accordion.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,aAAqC,MAAM,iBAAiB,CAAC;AACpE,OAAO,gBAA2C,MAAM,oBAAoB,CAAC;AAC7E,OAAO,eAAyC,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAkDtD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CACjC,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,WAAW,GAAG,OAAO,EACrB,IAAI,GAAG,QAAQ,EACf,MAAM,GAAG,IAAI,OAEd,EADI,IAAI,cANT,yDAOC,CADQ;IAIT,OAAO,CACL,oBAAC,gBAAgB,CAAC,QAAQ,IACxB,KAAK,EAAE;YACL,OAAO;YACP,WAAW;YACX,IAAI;SACL;QAED,6CACM,IAAI,IACR,SAAS,EAAE,EAAE,CACX,iBAAiB,EACjB,SAAS,EACT,oBAAoB,IAAI,EAAE,EAC1B,EAAE,yBAAyB,EAAE,MAAM,EAAE,CACtC,EACD,GAAG,EAAE,GAAG,IACR,CACwB,CAC7B,CAAC;AACJ,CAAC,CACoB,CAAC;AAExB,SAAS,CAAC,MAAM,GAAG,eAAe,CAAC;AACnC,SAAS,CAAC,OAAO,GAAG,gBAAgB,CAAC;AACrC,SAAS,CAAC,IAAI,GAAG,aAAa,CAAC;AAE/B,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/accordion/Accordion.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,aAAqC,MAAM,iBAAiB,CAAC;AACpE,OAAO,gBAA2C,MAAM,oBAAoB,CAAC;AAC7E,OAAO,eAAyC,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAkDtD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CACjC,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,WAAW,GAAG,OAAO,EACrB,IAAI,GAAG,QAAQ,EACf,MAAM,GAAG,IAAI,OAEd,EADI,IAAI,cANT,yDAOC,CADQ;IAIT,OAAO,CACL,oBAAC,gBAAgB,CAAC,QAAQ,IACxB,KAAK,EAAE;YACL,OAAO;YACP,WAAW;YACX,IAAI;YACJ,OAAO,EAAE,IAAI;SACd;QAED,6CACM,IAAI,IACR,SAAS,EAAE,EAAE,CACX,iBAAiB,EACjB,SAAS,EACT,oBAAoB,IAAI,EAAE,EAC1B,EAAE,yBAAyB,EAAE,MAAM,EAAE,CACtC,EACD,GAAG,EAAE,GAAG,IACR,CACwB,CAC7B,CAAC;AACJ,CAAC,CACoB,CAAC;AAExB,SAAS,CAAC,MAAM,GAAG,eAAe,CAAC;AACnC,SAAS,CAAC,OAAO,GAAG,gBAAgB,CAAC;AACrC,SAAS,CAAC,IAAI,GAAG,aAAa,CAAC;AAE/B,eAAe,SAAS,CAAC"}

package/esm/accordion/AccordionContext.d.ts

@@ -4,5 +4,6 @@ export type AccordionContextProps = {
     headingSize?: "large" | "medium" | "small" | "xsmall";
     size?: "large" | "medium" | "small";
     openItems?: number[];
+    mounted: boolean;
 };
 export declare const AccordionContext: import("react").Context<AccordionContextProps | null>;

package/esm/accordion/AccordionContext.js

@@ -1,8 +1,8 @@
 import { createContext } from "react";
 export const AccordionContext = createContext({
-    variant: "default",
     headingSize: "small",
     size: "medium",
     openItems: [],
+    mounted: false,
 });
 //# sourceMappingURL=AccordionContext.js.map

package/esm/accordion/AccordionContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionContext.js","sourceRoot":"","sources":["../../src/accordion/AccordionContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAStC,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAA+B;IAC1E,OAAO,EAAE,SAAS;IAClB,WAAW,EAAE,OAAO;IACpB,IAAI,EAAE,QAAQ;IACd,SAAS,EAAE,EAAE;CACd,CAAC,CAAC"}
+{"version":3,"file":"AccordionContext.js","sourceRoot":"","sources":["../../src/accordion/AccordionContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAUtC,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAA+B;IAC1E,WAAW,EAAE,OAAO;IACpB,IAAI,EAAE,QAAQ;IACd,SAAS,EAAE,EAAE;IACb,OAAO,EAAE,KAAK;CACf,CAAC,CAAC"}