@navikt/ds-react 0.17.10 → 0.17.13

package/cjs/help-text/HelpText.js

@@ -51,8 +51,8 @@ const HelpText = (0, react_1.forwardRef)((_a, ref) => {
         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, classnames_1.default)(className, "navds-help-text__button"), type: "button", "aria-expanded": open, title: title }),
-            react_1.default.createElement(ds_icons_1.Helptext, { className: "navds-help-text__icon", "aria-hidden": true })),
+            }, className: (0, classnames_1.default)(className, "navds-help-text__button"), type: "button", "aria-expanded": open }),
+            react_1.default.createElement(ds_icons_1.Helptext, { className: "navds-help-text__icon", title: title })),
         react_1.default.createElement(__1.Popover, { onClose: () => setOpen(false), className: "navds-help-text__popover", open: open, anchorEl: buttonRef.current, placement: placement, strategy: strategy },
             react_1.default.createElement(__1.Popover.Content, { className: "navds-body-short" }, children))));
 });

package/cjs/index.js

@@ -32,9 +32,11 @@ __exportStar(require("./popover"), exports);
 __exportStar(require("./read-more"), exports);
 __exportStar(require("./speech-bubble"), exports);
 __exportStar(require("./step-indicator"), exports);
+__exportStar(require("./stepper"), exports);
 __exportStar(require("./tag"), exports);
 __exportStar(require("./toggle-group"), exports);
 __exportStar(require("./table"), exports);
+__exportStar(require("./tabs"), exports);
 __exportStar(require("./typography"), exports);
 __exportStar(require("./util"), exports);
 /* Navno spesific packages */

package/cjs/stepper/Step.js

@@ -0,0 +1,63 @@
+"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 });
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importStar(require("react"));
+const _1 = require(".");
+const __1 = require("..");
+const StepComponent = (0, react_1.forwardRef)((_a, ref) => {
+    var { className, children, as: Component = "a", index = 0 } = _a, rest = __rest(_a, ["className", "children", "as", "index"]);
+    const context = (0, react_1.useContext)(_1.StepperContext);
+    if (context === null) {
+        console.error("<StepIndicator.Step> has to be used within an <StepIndicator>");
+        return null;
+    }
+    const activeStep = context.activeStep === index;
+    return (react_1.default.createElement(Component, Object.assign({}, rest, { "aria-current": Boolean(activeStep), ref: ref, className: (0, classnames_1.default)("navds-stepper__step", className, {
+            "navds-stepper__step--active": activeStep,
+        }), onClick: (e) => {
+            var _a;
+            context.onStepChange(index);
+            (_a = rest === null || rest === void 0 ? void 0 : rest.onClick) === null || _a === void 0 ? void 0 : _a.call(rest, e);
+        } }),
+        react_1.default.createElement(__1.Label, { className: "navds-stepper__step-number", as: "span" }, activeStep ? `${index + 1}` : index + 1),
+        react_1.default.createElement(__1.Label, { className: "navds-stepper__step-label" }, children)));
+});
+const Step = StepComponent;
+exports.default = Step;

package/cjs/stepper/Stepper.js

@@ -0,0 +1,60 @@
+"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.StepperContext = void 0;
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const Step_1 = __importDefault(require("./Step"));
+exports.StepperContext = (0, react_1.createContext)(null);
+const Stepper = (0, react_1.forwardRef)((_a, ref) => {
+    var { children, className, activeStep, onStepChange = () => { } } = _a, rest = __rest(_a, ["children", "className", "activeStep", "onStepChange"]);
+    return (react_1.default.createElement("ol", Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)("navds-stepper", className) }),
+        react_1.default.createElement(exports.StepperContext.Provider, { value: {
+                activeStep,
+                onStepChange,
+                lastIndex: react_1.default.Children.count(children),
+            } }, react_1.default.Children.map(children, (step, index) => {
+            var _a, _b;
+            return (react_1.default.createElement("li", { className: (0, classnames_1.default)("navds-stepper__step-wrapper"), key: index + ((_b = (_a = children === null || children === void 0 ? void 0 : children.toString) === null || _a === void 0 ? void 0 : _a.call(children)) !== null && _b !== void 0 ? _b : "") }, react_1.default.isValidElement(step)
+                ? react_1.default.cloneElement(step, Object.assign(Object.assign({}, step.props), { index }))
+                : step));
+        }))));
+});
+Stepper.Step = Step_1.default;
+exports.default = Stepper;

package/cjs/stepper/index.js

@@ -0,0 +1,23 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Stepper = void 0;
+var Stepper_1 = require("./Stepper");
+Object.defineProperty(exports, "Stepper", { enumerable: true, get: function () { return __importDefault(Stepper_1).default; } });
+__exportStar(require("./Stepper"), exports);

package/cjs/stepper/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../../esm/stepper/index.js",
+  "types": "../../esm/stepper/index.d.ts"
+}

package/cjs/tabs/Tab.js

@@ -0,0 +1,61 @@
+"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 });
+const RadixTabs = __importStar(require("@radix-ui/react-tabs"));
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importStar(require("react"));
+const __1 = require("..");
+const Tabs_1 = require("./Tabs");
+const Tab = (0, react_1.forwardRef)((_a, ref) => {
+    var _b;
+    var { className, as: Component = "button", label, icon, iconPosition, value } = _a, rest = __rest(_a, ["className", "as", "label", "icon", "iconPosition", "value"]);
+    const context = (0, react_1.useContext)(Tabs_1.TabsContext);
+    if (!label && !icon) {
+        console.error("<Tabs.Tab/> needs label/icon");
+        return null;
+    }
+    return (react_1.default.createElement(RadixTabs.Trigger, { value: value, asChild: true },
+        react_1.default.createElement(Component, Object.assign({ ref: ref, className: (0, classnames_1.default)("navds-tabs__tab", `navds-tabs__tab--${(_b = context === null || context === void 0 ? void 0 : context.size) !== null && _b !== void 0 ? _b : "medium"}`, `navds-tabs__tab-icon--${iconPosition}`, className, {
+                "navds-tabs__tab--icon-only": icon && !label,
+            }) }, rest),
+            react_1.default.createElement(__1.Label, { as: "span", className: "navds-tabs__tab-inner", size: context === null || context === void 0 ? void 0 : context.size },
+                icon,
+                label))));
+});
+exports.default = Tab;

package/cjs/tabs/TabList.js

@@ -0,0 +1,109 @@
+"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 });
+const core_1 = require("@material-ui/core");
+const ds_icons_1 = require("@navikt/ds-icons");
+const react_tabs_1 = require("@radix-ui/react-tabs");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importStar(require("react"));
+const react_merge_refs_1 = __importDefault(require("react-merge-refs"));
+const List = (0, react_1.forwardRef)((_a, ref) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    const listRef = (0, react_1.useRef)(null);
+    const mergedRef = (0, react_merge_refs_1.default)([listRef, ref]);
+    const [displayScroll, setDisplayScroll] = (0, react_1.useState)({
+        start: false,
+        end: false,
+    });
+    const updateScrollButtonState = (0, react_1.useMemo)(() => (0, core_1.debounce)(() => {
+        var _a;
+        if (!(listRef === null || listRef === void 0 ? void 0 : listRef.current))
+            return;
+        const { scrollWidth, clientWidth } = listRef === null || listRef === void 0 ? void 0 : 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;
+        // use 1 for the potential rounding error with browser zooms.
+        showStartScroll = scrollLeft > 1;
+        showEndScroll = scrollLeft < scrollWidth - clientWidth - 1;
+        setDisplayScroll((displayScroll) => showStartScroll === displayScroll.start &&
+            showEndScroll === displayScroll.end
+            ? displayScroll
+            : { start: showStartScroll, end: showEndScroll });
+    }), []);
+    (0, react_1.useEffect)(() => {
+        var _a, _b, _c;
+        const handleResize = () => updateScrollButtonState();
+        const win = (_c = (_b = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) !== null && _b !== void 0 ? _b : document) !== null && _c !== void 0 ? _c : window;
+        win.addEventListener("resize", handleResize);
+        let resizeObserver;
+        if (typeof ResizeObserver !== "undefined") {
+            resizeObserver = new ResizeObserver(handleResize);
+            resizeObserver.observe(listRef.current);
+        }
+        return () => {
+            win.removeEventListener("resize", handleResize);
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+            }
+        };
+    }, [updateScrollButtonState]);
+    (0, react_1.useEffect)(() => {
+        updateScrollButtonState();
+    });
+    (0, react_1.useEffect)(() => {
+        return () => {
+            updateScrollButtonState.clear();
+        };
+    }, [updateScrollButtonState]);
+    const ScrollButton = ({ dir, hidden, }) => (react_1.default.createElement("div", { className: (0, classnames_1.default)("navds-tabs__scroll-button", {
+            "navds-tabs__scroll-button--hidden": hidden,
+        }), onClick: () => {
+            var _a;
+            if (!listRef.current)
+                return;
+            (_a = listRef.current).scrollLeft && (_a.scrollLeft = listRef.current.scrollLeft + dir * 100);
+        } }, dir === -1 ? (react_1.default.createElement(ds_icons_1.Back, { title: "scroll tilbake" })) : (react_1.default.createElement(ds_icons_1.Next, { title: "scroll neste" }))));
+    const showSteppers = displayScroll.end || displayScroll.start;
+    return (react_1.default.createElement("div", { className: "navds-tabs__tablist-wrapper" },
+        showSteppers && (react_1.default.createElement(ScrollButton, { dir: -1, hidden: !displayScroll.start })),
+        react_1.default.createElement(react_tabs_1.TabsList, Object.assign({}, rest, { ref: mergedRef, onScroll: updateScrollButtonState, className: (0, classnames_1.default)("navds-tabs__tablist", className) })),
+        showSteppers && react_1.default.createElement(ScrollButton, { dir: 1, hidden: !displayScroll.end })));
+});
+exports.default = List;

package/cjs/tabs/TabPanel.js

@@ -0,0 +1,47 @@
+"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 });
+const react_tabs_1 = require("@radix-ui/react-tabs");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importStar(require("react"));
+const Panel = (0, react_1.forwardRef)((_a, ref) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (react_1.default.createElement(react_tabs_1.TabsContent, Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)("navds-tabs__tabpanel", className) })));
+});
+exports.default = Panel;

package/cjs/tabs/Tabs.js

@@ -0,0 +1,58 @@
+"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.TabsContext = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importStar(require("react"));
+const RadixTabs = __importStar(require("@radix-ui/react-tabs"));
+const Tab_1 = __importDefault(require("./Tab"));
+const TabList_1 = __importDefault(require("./TabList"));
+const TabPanel_1 = __importDefault(require("./TabPanel"));
+exports.TabsContext = (0, react_1.createContext)(null);
+const Tabs = (0, react_1.forwardRef)((_a, ref) => {
+    var { className, children, onChange, size = "medium", selectionFollowsFocus = false } = _a, rest = __rest(_a, ["className", "children", "onChange", "size", "selectionFollowsFocus"]);
+    return (react_1.default.createElement(RadixTabs.Root, Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)("navds-tabs", className, `navds-tabs--${size}`), activationMode: selectionFollowsFocus ? "automatic" : "manual", onValueChange: onChange }),
+        react_1.default.createElement(exports.TabsContext.Provider, { value: {
+                size,
+            } }, children)));
+});
+Tabs.Tab = Tab_1.default;
+Tabs.List = TabList_1.default;
+Tabs.Panel = TabPanel_1.default;
+exports.default = Tabs;

package/cjs/tabs/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.Tabs = void 0;
+var Tabs_1 = require("./Tabs");
+Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return __importDefault(Tabs_1).default; } });

package/cjs/tabs/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../../esm/tabs/index.js",
+  "types": "../../esm/tabs/index.d.ts"
+}

package/esm/form/ConfirmationPanel.d.ts

@@ -8,7 +8,7 @@ export interface ConfirmationPanelProps extends Partial<CheckboxProps> {
     /**
      * Checkbox label
      */
-    label: string;
+    label: React.ReactNode;
     /**
      * Checked state for checkbox
      */

package/esm/form/Select.d.ts

@@ -12,7 +12,7 @@ export interface SelectProps extends FormFieldProps, Omit<SelectHTMLAttributes<H
     /**
      * Label for select
      */
-    label: string;
+    label: React.ReactNode;
     /**
      * If enabled shows the label and description for screenreaders only
      */

package/esm/help-text/HelpText.js

@@ -23,8 +23,8 @@ const HelpText = forwardRef((_a, ref) => {
         React.createElement("button", Object.assign({}, rest, { ref: mergedRef, onClick: (e) => {
                 setOpen((x) => !x);
                 onClick === null || onClick === void 0 ? void 0 : onClick(e);
-            }, className: cl(className, "navds-help-text__button"), type: "button", "aria-expanded": open, title: title }),
-            React.createElement(HelpTextIcon, { className: "navds-help-text__icon", "aria-hidden": true })),
+            }, className: cl(className, "navds-help-text__button"), type: "button", "aria-expanded": open }),
+            React.createElement(HelpTextIcon, { className: "navds-help-text__icon", title: title })),
         React.createElement(Popover, { onClose: () => setOpen(false), className: "navds-help-text__popover", open: open, anchorEl: buttonRef.current, placement: placement, strategy: strategy },
             React.createElement(Popover.Content, { className: "navds-body-short" }, children))));
 });

package/esm/help-text/HelpText.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelpText.js","sourceRoot":"","sources":["../../src/help-text/HelpText.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAgB,MAAM,IAAI,CAAC;AAW3C,MAAM,QAAQ,GAAG,UAAU,CACzB,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,SAAS,EACT,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,UAAU,EACrB,KAAK,GAAG,OAAO,EACf,OAAO,OAER,EADI,IAAI,cAPT,sEAQC,CADQ;IAIT,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACzD,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC;IAC9C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,OAAO,CACL,6BAAK,SAAS,EAAC,iBAAiB;QAC9B,gDACM,IAAI,IACR,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACb,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;gBACnB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAC;YACf,CAAC,EACD,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,yBAAyB,CAAC,EACnD,IAAI,EAAC,QAAQ,mBACE,IAAI,EACnB,KAAK,EAAE,KAAK;YAEZ,oBAAC,YAAY,IAAC,SAAS,EAAC,uBAAuB,wBAAc,CACtD;QACT,oBAAC,OAAO,IACN,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAC,0BAA0B,EACpC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,SAAS,CAAC,OAAO,EAC3B,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ;YAElB,oBAAC,OAAO,CAAC,OAAO,IAAC,SAAS,EAAC,kBAAkB,IAC1C,QAAQ,CACO,CACV,CACN,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"HelpText.js","sourceRoot":"","sources":["../../src/help-text/HelpText.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAgB,MAAM,IAAI,CAAC;AAW3C,MAAM,QAAQ,GAAG,UAAU,CACzB,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,SAAS,EACT,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,UAAU,EACrB,KAAK,GAAG,OAAO,EACf,OAAO,OAER,EADI,IAAI,cAPT,sEAQC,CADQ;IAIT,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACzD,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC;IAC9C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,OAAO,CACL,6BAAK,SAAS,EAAC,iBAAiB;QAC9B,gDACM,IAAI,IACR,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACb,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;gBACnB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAC;YACf,CAAC,EACD,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,yBAAyB,CAAC,EACnD,IAAI,EAAC,QAAQ,mBACE,IAAI;YAEnB,oBAAC,YAAY,IAAC,SAAS,EAAC,uBAAuB,EAAC,KAAK,EAAE,KAAK,GAAI,CACzD;QACT,oBAAC,OAAO,IACN,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAC,0BAA0B,EACpC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,SAAS,CAAC,OAAO,EAC3B,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ;YAElB,oBAAC,OAAO,CAAC,OAAO,IAAC,SAAS,EAAC,kBAAkB,IAC1C,QAAQ,CACO,CACV,CACN,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/esm/index.d.ts

@@ -16,9 +16,11 @@ export * from "./popover";
 export * from "./read-more";
 export * from "./speech-bubble";
 export * from "./step-indicator";
+export * from "./stepper";
 export * from "./tag";
 export * from "./toggle-group";
 export * from "./table";
+export * from "./tabs";
 export * from "./typography";
 export * from "./util";
 export * from "./card";

package/esm/index.js

@@ -16,9 +16,11 @@ export * from "./popover";
 export * from "./read-more";
 export * from "./speech-bubble";
 export * from "./step-indicator";
+export * from "./stepper";
 export * from "./tag";
 export * from "./toggle-group";
 export * from "./table";
+export * from "./tabs";
 export * from "./typography";
 export * from "./util";
 /* Navno spesific packages */

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,OAAO,CAAC;AACtB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AAEvB,6BAA6B;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AAEvB,6BAA6B;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC"}

package/esm/stepper/Step.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { OverridableComponent } from "..";
+export interface StepperStepProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * Text content under indicator
+     */
+    children: string;
+    /**
+     * Handled by Stepper
+     */
+    index?: number;
+}
+export interface StepperStepType extends OverridableComponent<StepperStepProps, HTMLAnchorElement> {
+}
+declare const Step: StepperStepType;
+export default Step;

package/esm/stepper/Step.js

@@ -0,0 +1,36 @@
+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;
+};
+import cl from "classnames";
+import React, { forwardRef, useContext } from "react";
+import { StepperContext } from ".";
+import { Label } from "..";
+const StepComponent = forwardRef((_a, ref) => {
+    var { className, children, as: Component = "a", index = 0 } = _a, rest = __rest(_a, ["className", "children", "as", "index"]);
+    const context = useContext(StepperContext);
+    if (context === null) {
+        console.error("<StepIndicator.Step> has to be used within an <StepIndicator>");
+        return null;
+    }
+    const activeStep = context.activeStep === index;
+    return (React.createElement(Component, Object.assign({}, rest, { "aria-current": Boolean(activeStep), ref: ref, className: cl("navds-stepper__step", className, {
+            "navds-stepper__step--active": activeStep,
+        }), onClick: (e) => {
+            var _a;
+            context.onStepChange(index);
+            (_a = rest === null || rest === void 0 ? void 0 : rest.onClick) === null || _a === void 0 ? void 0 : _a.call(rest, e);
+        } }),
+        React.createElement(Label, { className: "navds-stepper__step-number", as: "span" }, activeStep ? `${index + 1}` : index + 1),
+        React.createElement(Label, { className: "navds-stepper__step-label" }, children)));
+});
+const Step = StepComponent;
+export default Step;
+//# sourceMappingURL=Step.js.map

package/esm/stepper/Step.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.js","sourceRoot":"","sources":["../../src/stepper/Step.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,GAAG,CAAC;AACnC,OAAO,EAAE,KAAK,EAAwB,MAAM,IAAI,CAAC;AAiBjD,MAAM,aAAa,GAGf,UAAU,CACZ,CAAC,EAAgE,EAAE,GAAG,EAAE,EAAE;QAAzE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,GAAG,GAAG,EAAE,KAAK,GAAG,CAAC,OAAW,EAAN,IAAI,cAA9D,wCAAgE,CAAF;IAC7D,MAAM,OAAO,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAC3C,IAAI,OAAO,KAAK,IAAI,EAAE;QACpB,OAAO,CAAC,KAAK,CACX,+DAA+D,CAChE,CAAC;QACF,OAAO,IAAI,CAAC;KACb;IACD,MAAM,UAAU,GAAG,OAAO,CAAC,UAAU,KAAK,KAAK,CAAC;IAEhD,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,oBACM,OAAO,CAAC,UAAU,CAAC,EACjC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE;YAC9C,6BAA6B,EAAE,UAAU;SAC1C,CAAC,EACF,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;;YACb,OAAO,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;YAC5B,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,qDAAG,CAAC,CAAC,CAAC;QACrB,CAAC;QAED,oBAAC,KAAK,IAAC,SAAS,EAAC,4BAA4B,EAAC,EAAE,EAAC,MAAM,IACpD,UAAU,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAClC;QACR,oBAAC,KAAK,IAAC,SAAS,EAAC,2BAA2B,IAAE,QAAQ,CAAS,CACrD,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,IAAI,GAAG,aAAgC,CAAC;AAE9C,eAAe,IAAI,CAAC"}

package/esm/stepper/Stepper.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import { StepperStepType } from "./Step";
+export interface StepperProps extends React.HTMLAttributes<HTMLOListElement> {
+    /**
+     * <Stepper.Step /> elements
+     */
+    children: React.ReactNode;
+    /**
+     * Adds classname to wrapper
+     */
+    className?: string;
+    /**
+     * Current active step index
+     */
+    activeStep: number;
+    /**
+     * Callback for clicked step index
+     */
+    onStepChange?: (step: number) => void;
+}
+interface StepperComponent extends React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLOListElement>> {
+    Step: StepperStepType;
+}
+interface StepperContextProps {
+    activeStep: number;
+    onStepChange: (step: number) => void;
+    lastIndex: number;
+}
+export declare const StepperContext: React.Context<StepperContextProps | null>;
+declare const Stepper: StepperComponent;
+export default Stepper;