@navikt/ds-react 0.17.12 → 0.17.15

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

@@ -0,0 +1,76 @@
+"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_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const Row_1 = __importDefault(require("./Row"));
+const DataCell_1 = __importDefault(require("./DataCell"));
+const react_collapse_1 = require("react-collapse");
+const ds_icons_1 = require("@navikt/ds-icons");
+const __1 = require("..");
+const ExpandableRow = (0, react_1.forwardRef)((_a, ref) => {
+    var { className, children, content, togglePlacement = "left", defaultOpen = false, open, onOpenChange } = _a, rest = __rest(_a, ["className", "children", "content", "togglePlacement", "defaultOpen", "open", "onOpenChange"]);
+    const [internalOpen, setInternalOpen] = (0, react_1.useState)(defaultOpen);
+    const id = `expandable-${(0, __1.useId)()}`;
+    const isOpen = open !== null && open !== void 0 ? open : internalOpen;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Row_1.default, Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)("navds-table__expandable-row", className, {
+                "navds-table__expandable-row--open": isOpen,
+            }) }),
+            togglePlacement === "right" && children,
+            react_1.default.createElement(DataCell_1.default, { className: (0, classnames_1.default)("navds-table__toggle-expand-cell", {
+                    "navds-table__toggle-expand-cell--open": isOpen,
+                }) },
+                react_1.default.createElement("button", { className: "navds-table__toggle-expand-button", "aria-controls": id, "aria-expanded": isOpen, onClick: () => {
+                        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(!isOpen);
+                        if (open === undefined) {
+                            setInternalOpen((open) => !open);
+                        }
+                    } },
+                    react_1.default.createElement(ds_icons_1.Expand, { className: "navds-table__expandable-icon", title: "Vis mer" }),
+                    react_1.default.createElement(ds_icons_1.ExpandFilled, { className: "navds-table__expandable-icon navds-table__expandable-icon--filled", title: "Vis mindre" }))),
+            togglePlacement === "left" && children),
+        react_1.default.createElement("tr", { className: "navds-table__expanded-row", "aria-hidden": !isOpen, id: id },
+            react_1.default.createElement("td", { colSpan: 999, className: "navds-table__expanded-row-cell" },
+                react_1.default.createElement(react_collapse_1.UnmountClosed, { isOpened: isOpen, theme: {
+                        collapse: "navds-table__expanded-row-collapse",
+                        content: "navds-table__expanded-row-content",
+                    } }, content)))));
+});
+exports.default = ExpandableRow;

package/cjs/table/Table.js

@@ -46,6 +46,7 @@ const Row_1 = __importDefault(require("./Row"));
 const ColumnHeader_1 = __importDefault(require("./ColumnHeader"));
 const HeaderCell_1 = __importDefault(require("./HeaderCell"));
 const DataCell_1 = __importDefault(require("./DataCell"));
+const ExpandableRow_1 = __importDefault(require("./ExpandableRow"));
 exports.TableContext = (0, react_1.createContext)(null);
 const Table = (0, react_1.forwardRef)((_a, ref) => {
     var { className, zebraStripes = false, size = "medium", onSortChange, sort } = _a, rest = __rest(_a, ["className", "zebraStripes", "size", "onSortChange", "sort"]);
@@ -60,4 +61,5 @@ Table.Row = Row_1.default;
 Table.ColumnHeader = ColumnHeader_1.default;
 Table.HeaderCell = HeaderCell_1.default;
 Table.DataCell = DataCell_1.default;
+Table.ExpandableRow = ExpandableRow_1.default;
 exports.default = Table;

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,108 @@
+"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: () => {
+            if (!listRef.current)
+                return;
+            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/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"}