@navikt/ds-react 0.14.3 → 0.14.7

package/cjs/form/Select.js

@@ -54,7 +54,7 @@ const Select = (0, react_1.forwardRef)((props, ref) => {
             }), id: inputDescriptionId, size: size }, description)),
         react_1.default.createElement("div", { className: "navds-select__container" },
             react_1.default.createElement("select", Object.assign({}, (0, __1.omit)(rest, ["error", "errorId", "size"]), inputProps, { ref: ref, className: (0, classnames_1.default)("navds-select__input", "navds-body-short", `navds-body--${size !== null && size !== void 0 ? size : "medium"}`), size: props.htmlSize }), children),
-            react_1.default.createElement(ds_icons_1.Expand, { className: "navds-select__chevron" })),
+            react_1.default.createElement(ds_icons_1.Expand, { className: "navds-select__chevron", "aria-hidden": true })),
         react_1.default.createElement("div", { id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && react_1.default.createElement(ErrorMessage_1.default, { size: size }, props.error))));
 });
 exports.default = Select;

package/cjs/form/Switch.js

@@ -37,16 +37,27 @@ const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importStar(require("react"));
 const __1 = require("..");
 const useFormField_1 = require("./useFormField");
+const SelectedIcon = () => (react_1.default.createElement("svg", { width: "12px", height: "12px", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", focusable: false, role: "img", "aria-hidden": true, "aria-label": "Deaktiver valg" },
+    react_1.default.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.01386 8L10.25 2L11 2.75L4.01386 9.5L1 6.5L1.75 5.75L4.01386 8Z", fill: "currentColor", stroke: "currentColor" })));
 const Switch = (0, react_1.forwardRef)((props, ref) => {
+    var _a;
     const { inputProps, size } = (0, useFormField_1.useFormField)(props, "switch");
-    const { children, className, description, hideLabel = false, loading } = props, rest = __rest(props, ["children", "className", "description", "hideLabel", "loading"]);
+    const { children, className, description, hideLabel = false, loading, checked: checkedProp, defaultChecked, position = "left" } = props, rest = __rest(props, ["children", "className", "description", "hideLabel", "loading", "checked", "defaultChecked", "position"]);
     const Description = size === "medium" ? __1.BodyShort : __1.Detail;
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)("navds-switch", props.className, `navds-switch--${size}`, {
+    const [checked, setChecked] = (0, react_1.useState)((_a = defaultChecked !== null && defaultChecked !== void 0 ? defaultChecked : checkedProp) !== null && _a !== void 0 ? _a : false);
+    (0, react_1.useEffect)(() => {
+        checkedProp !== undefined && setChecked(checkedProp);
+    }, [checkedProp]);
+    const handleChange = (e) => {
+        setChecked(e.target.checked);
+        props.onChange && props.onChange(e);
+    };
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)("navds-switch", props.className, `navds-switch--${size}`, `navds-switch--${position}`, {
             "navds-switch--disabled": inputProps.disabled,
         }) },
-        react_1.default.createElement("input", Object.assign({}, (0, __1.omit)(rest, ["size"]), (0, __1.omit)(inputProps, ["aria-invalid", "aria-describedby"]), { ref: ref, type: "checkbox", className: (0, classnames_1.default)(className, "navds-switch__input") })),
+        react_1.default.createElement("input", Object.assign({}, (0, __1.omit)(rest, ["size"]), (0, __1.omit)(inputProps, ["aria-invalid", "aria-describedby"]), { checked: checkedProp, defaultChecked: defaultChecked, ref: ref, type: "checkbox", onChange: (e) => handleChange(e), className: (0, classnames_1.default)(className, "navds-switch__input") })),
         react_1.default.createElement("span", { className: "navds-switch__track" },
-            react_1.default.createElement("span", { className: "navds-switch__thumb" }, loading && react_1.default.createElement(__1.Loader, { size: "xsmall" }))),
+            react_1.default.createElement("span", { className: "navds-switch__thumb" }, loading ? (react_1.default.createElement(__1.Loader, { size: "xsmall" })) : checked ? (react_1.default.createElement(SelectedIcon, null)) : null)),
         react_1.default.createElement("label", { htmlFor: inputProps.id, className: "navds-switch__label-wrapper" },
             react_1.default.createElement("div", { className: (0, classnames_1.default)("navds-switch__content", {
                     "sr-only": hideLabel,

package/cjs/index.js

@@ -25,6 +25,7 @@ __exportStar(require("./modal"), exports);
 __exportStar(require("./panel"), exports);
 __exportStar(require("./popover"), exports);
 __exportStar(require("./speech-bubble"), exports);
+__exportStar(require("./step-indicator"), exports);
 __exportStar(require("./tag"), exports);
 __exportStar(require("./table"), exports);
 __exportStar(require("./typography"), exports);

package/cjs/link-panel/LinkPanel.js

@@ -43,7 +43,7 @@ const LinkPanelComponent = (0, react_1.forwardRef)((_a, ref) => {
     var { children, as = "a", border = true, className } = _a, rest = __rest(_a, ["children", "as", "border", "className"]);
     return (react_1.default.createElement(__1.Panel, Object.assign({}, rest, { as: as, border: border, ref: ref, className: (0, classnames_1.default)("navds-link-panel", className) }),
         react_1.default.createElement("div", { className: "navds-link-panel__content" }, children),
-        react_1.default.createElement(ds_icons_1.Next, { className: "navds-link-panel__chevron", "aria-label": "arrow-icon pointing right" })));
+        react_1.default.createElement(ds_icons_1.Next, { className: "navds-link-panel__chevron", "aria-hidden": true })));
 });
 const LinkPanel = LinkPanelComponent;
 LinkPanel.Title = LinkPanelTitle_1.LinkPanelTitle;

package/cjs/step-indicator/Step.js

@@ -0,0 +1,62 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 _1 = require(".");
+const __1 = require("..");
+const StepComponent = (0, react_1.forwardRef)((_a, ref) => {
+    var { className, children, as: Component = "button", disabled, index } = _a, rest = __rest(_a, ["className", "children", "as", "disabled", "index"]);
+    const context = (0, react_1.useContext)(_1.StepContext);
+    if (context === null) {
+        console.error("<StepIndicator.Step> has to be used within an <StepIndicator>");
+        return null;
+    }
+    const safeIndex = index !== null && index !== void 0 ? index : 0;
+    const Number = context.activeStep === safeIndex ? __1.Label : __1.BodyShort;
+    return (react_1.default.createElement(Component, Object.assign({}, rest, { disabled: disabled, ref: ref, className: (0, classnames_1.default)("navds-step-indicator__step", className, {
+            "navds-step-indicator__step--disabled": disabled,
+            "navds-step-indicator__step--active": context.activeStep === safeIndex,
+            "navds-step-indicator__step--finished": context.activeStep > safeIndex,
+        }), onClick: (e) => {
+            context.onStepChange(safeIndex);
+            rest.onClick && rest.onClick(e);
+        } }),
+        react_1.default.createElement(Number, { className: "navds-step-indicator__step-number" }, safeIndex + 1),
+        react_1.default.createElement("div", { className: (0, classnames_1.default)("navds-step-indicator__step-label") }, !context.hideLabels && children),
+        safeIndex !== 0 && (react_1.default.createElement("span", { "aria-hidden": true, className: "navds-step-indicator__step-line" }))));
+});
+const Step = StepComponent;
+exports.default = Step;

package/cjs/step-indicator/StepIndicator.js

@@ -0,0 +1,76 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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.StepContext = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importStar(require("react"));
+const react_merge_refs_1 = __importDefault(require("react-merge-refs"));
+const Step_1 = __importDefault(require("./Step"));
+exports.StepContext = (0, react_1.createContext)(null);
+const StepIndicator = (0, react_1.forwardRef)((_a, ref) => {
+    var { children, className, activeStep, hideLabels, onStepChange = () => { }, responsive } = _a, rest = __rest(_a, ["children", "className", "activeStep", "hideLabels", "onStepChange", "responsive"]);
+    const wrapperRef = (0, react_1.useRef)(null);
+    const mergedRef = (0, react_merge_refs_1.default)([wrapperRef, ref]);
+    const [showLabels, setShowLabels] = (0, react_1.useState)(true);
+    const removeLabels = hideLabels !== null && hideLabels !== void 0 ? hideLabels : (!!responsive && !showLabels);
+    const stepsWithIndex = react_1.default.Children.map(children, (step, index) => {
+        return react_1.default.isValidElement(step) ? (react_1.default.createElement("li", { className: (0, classnames_1.default)("navds-step-indicator__step-wrapper", {
+                "navds-step-indicator__step-wrapper--hidelabel": removeLabels,
+            }), key: index, "aria-current": index === activeStep && "step" }, react_1.default.cloneElement(step, Object.assign(Object.assign({}, step.props), { index })))) : (step);
+    });
+    const canShowLabels = (0, react_1.useCallback)(() => {
+        var _a;
+        const remSize = parseFloat(String(getComputedStyle(document.documentElement).fontSize));
+        const childrenLength = react_1.default.Children.toArray(children).filter((child) => react_1.default.isValidElement(child)).length;
+        wrapperRef.current &&
+            setShowLabels(((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) >=
+                remSize * 10 * childrenLength);
+    }, [children]);
+    (0, react_1.useEffect)(() => {
+        window.addEventListener("resize", canShowLabels);
+        canShowLabels();
+        return () => {
+            window.removeEventListener("resize", canShowLabels);
+        };
+    }, [canShowLabels]);
+    return (react_1.default.createElement("ol", Object.assign({ ref: mergedRef, className: (0, classnames_1.default)(`navds-step-indicator`, className) }, rest),
+        react_1.default.createElement(exports.StepContext.Provider, { value: {
+                activeStep,
+                onStepChange,
+                hideLabels: removeLabels,
+            } }, stepsWithIndex)));
+});
+StepIndicator.Step = Step_1.default;
+exports.default = StepIndicator;

package/cjs/step-indicator/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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.StepIndicator = void 0;
+var StepIndicator_1 = require("./StepIndicator");
+Object.defineProperty(exports, "StepIndicator", { enumerable: true, get: function () { return __importDefault(StepIndicator_1).default; } });
+__exportStar(require("./StepIndicator"), exports);

package/cjs/step-indicator/package.json

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

package/esm/form/Select.js

@@ -30,7 +30,7 @@ const Select = forwardRef((props, ref) => {
             }), id: inputDescriptionId, size: size }, description)),
         React.createElement("div", { className: "navds-select__container" },
             React.createElement("select", Object.assign({}, omit(rest, ["error", "errorId", "size"]), inputProps, { ref: ref, className: cl("navds-select__input", "navds-body-short", `navds-body--${size !== null && size !== void 0 ? size : "medium"}`), size: props.htmlSize }), children),
-            React.createElement(Expand, { className: "navds-select__chevron" })),
+            React.createElement(Expand, { className: "navds-select__chevron", "aria-hidden": true })),
         React.createElement("div", { id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && React.createElement(ErrorMessage, { size: size }, props.error))));
 });
 export default Select;

package/esm/form/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../src/form/Select.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAwB,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC;AAC5C,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAkB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAuB9D,MAAM,MAAM,GAAG,UAAU,CAAiC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACvE,MAAM,EACJ,UAAU,EACV,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,kBAAkB,GACnB,GAAG,YAAY,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;IAErC,MAAM,EACJ,QAAQ,EACR,KAAK,EACL,SAAS,EACT,WAAW,EACX,QAAQ,EACR,SAAS,GAAG,KAAK,KAEf,KAAK,EADJ,IAAI,UACL,KAAK,EARH,0EAQL,CAAQ,CAAC;IAEV,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CACX,SAAS,EACT,kBAAkB,EAClB,qBAAqB,IAAI,EAAE,EAC3B;YACE,qBAAqB,EAAE,QAAQ;YAC/B,wBAAwB,EAAE,CAAC,CAAC,UAAU,CAAC,QAAQ;SAChD,CACF;QAED,oBAAC,KAAK,IACJ,OAAO,EAAE,UAAU,CAAC,EAAE,EACtB,IAAI,EAAE,IAAI,EACV,EAAE,EAAC,OAAO,EACV,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE;gBACnC,SAAS,EAAE,SAAS;aACrB,CAAC,IAED,KAAK,CACA;QACP,CAAC,CAAC,WAAW,IAAI,CAChB,oBAAC,SAAS,IACR,EAAE,EAAC,KAAK,EACR,SAAS,EAAE,EAAE,CAAC,2BAA2B,EAAE;gBACzC,SAAS,EAAE,SAAS;aACrB,CAAC,EACF,EAAE,EAAE,kBAAkB,EACtB,IAAI,EAAE,IAAI,IAET,WAAW,CACF,CACb;QACD,6BAAK,SAAS,EAAC,yBAAyB;YACtC,gDACM,IAAI,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,EACxC,UAAU,IACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,qBAAqB,EACrB,kBAAkB,EAClB,eAAe,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,QAAQ,EAAE,CAClC,EACD,IAAI,EAAE,KAAK,CAAC,QAAQ,KAEnB,QAAQ,CACF;YACT,oBAAC,MAAM,IAAC,SAAS,EAAC,uBAAuB,GAAG,CACxC;QACN,6BAAK,EAAE,EAAE,OAAO,mBAAgB,oBAAoB,eAAW,QAAQ,IACpE,YAAY,IAAI,oBAAC,YAAY,IAAC,IAAI,EAAE,IAAI,IAAG,KAAK,CAAC,KAAK,CAAgB,CACnE,CACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../src/form/Select.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAwB,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC;AAC5C,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAkB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAuB9D,MAAM,MAAM,GAAG,UAAU,CAAiC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACvE,MAAM,EACJ,UAAU,EACV,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,kBAAkB,GACnB,GAAG,YAAY,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;IAErC,MAAM,EACJ,QAAQ,EACR,KAAK,EACL,SAAS,EACT,WAAW,EACX,QAAQ,EACR,SAAS,GAAG,KAAK,KAEf,KAAK,EADJ,IAAI,UACL,KAAK,EARH,0EAQL,CAAQ,CAAC;IAEV,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CACX,SAAS,EACT,kBAAkB,EAClB,qBAAqB,IAAI,EAAE,EAC3B;YACE,qBAAqB,EAAE,QAAQ;YAC/B,wBAAwB,EAAE,CAAC,CAAC,UAAU,CAAC,QAAQ;SAChD,CACF;QAED,oBAAC,KAAK,IACJ,OAAO,EAAE,UAAU,CAAC,EAAE,EACtB,IAAI,EAAE,IAAI,EACV,EAAE,EAAC,OAAO,EACV,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE;gBACnC,SAAS,EAAE,SAAS;aACrB,CAAC,IAED,KAAK,CACA;QACP,CAAC,CAAC,WAAW,IAAI,CAChB,oBAAC,SAAS,IACR,EAAE,EAAC,KAAK,EACR,SAAS,EAAE,EAAE,CAAC,2BAA2B,EAAE;gBACzC,SAAS,EAAE,SAAS;aACrB,CAAC,EACF,EAAE,EAAE,kBAAkB,EACtB,IAAI,EAAE,IAAI,IAET,WAAW,CACF,CACb;QACD,6BAAK,SAAS,EAAC,yBAAyB;YACtC,gDACM,IAAI,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,EACxC,UAAU,IACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,qBAAqB,EACrB,kBAAkB,EAClB,eAAe,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,QAAQ,EAAE,CAClC,EACD,IAAI,EAAE,KAAK,CAAC,QAAQ,KAEnB,QAAQ,CACF;YACT,oBAAC,MAAM,IAAC,SAAS,EAAC,uBAAuB,wBAAe,CACpD;QACN,6BAAK,EAAE,EAAE,OAAO,mBAAgB,oBAAoB,eAAW,QAAQ,IACpE,YAAY,IAAI,oBAAC,YAAY,IAAC,IAAI,EAAE,IAAI,IAAG,KAAK,CAAC,KAAK,CAAgB,CACnE,CACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/esm/form/Switch.d.ts

@@ -13,6 +13,10 @@ export interface SwitchProps extends Omit<FormFieldProps, "error" | "errorId">,
      * Toggles loading state with loader-component on switch
      */
     loading?: boolean;
+    /**
+     * Positions switch on left/right side of label
+     */
+    position?: "left" | "right";
 }
 declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
 export default Switch;

package/esm/form/Switch.js

@@ -10,19 +10,30 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import cl from "classnames";
-import React, { forwardRef } from "react";
+import React, { forwardRef, useEffect, useState, } from "react";
 import { BodyShort, Detail, Loader, omit } from "..";
 import { useFormField } from "./useFormField";
+const SelectedIcon = () => (React.createElement("svg", { width: "12px", height: "12px", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", focusable: false, role: "img", "aria-hidden": true, "aria-label": "Deaktiver valg" },
+    React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.01386 8L10.25 2L11 2.75L4.01386 9.5L1 6.5L1.75 5.75L4.01386 8Z", fill: "currentColor", stroke: "currentColor" })));
 const Switch = forwardRef((props, ref) => {
+    var _a;
     const { inputProps, size } = useFormField(props, "switch");
-    const { children, className, description, hideLabel = false, loading } = props, rest = __rest(props, ["children", "className", "description", "hideLabel", "loading"]);
+    const { children, className, description, hideLabel = false, loading, checked: checkedProp, defaultChecked, position = "left" } = props, rest = __rest(props, ["children", "className", "description", "hideLabel", "loading", "checked", "defaultChecked", "position"]);
     const Description = size === "medium" ? BodyShort : Detail;
-    return (React.createElement("div", { className: cl("navds-switch", props.className, `navds-switch--${size}`, {
+    const [checked, setChecked] = useState((_a = defaultChecked !== null && defaultChecked !== void 0 ? defaultChecked : checkedProp) !== null && _a !== void 0 ? _a : false);
+    useEffect(() => {
+        checkedProp !== undefined && setChecked(checkedProp);
+    }, [checkedProp]);
+    const handleChange = (e) => {
+        setChecked(e.target.checked);
+        props.onChange && props.onChange(e);
+    };
+    return (React.createElement("div", { className: cl("navds-switch", props.className, `navds-switch--${size}`, `navds-switch--${position}`, {
             "navds-switch--disabled": inputProps.disabled,
         }) },
-        React.createElement("input", Object.assign({}, omit(rest, ["size"]), omit(inputProps, ["aria-invalid", "aria-describedby"]), { ref: ref, type: "checkbox", className: cl(className, "navds-switch__input") })),
+        React.createElement("input", Object.assign({}, omit(rest, ["size"]), omit(inputProps, ["aria-invalid", "aria-describedby"]), { checked: checkedProp, defaultChecked: defaultChecked, ref: ref, type: "checkbox", onChange: (e) => handleChange(e), className: cl(className, "navds-switch__input") })),
         React.createElement("span", { className: "navds-switch__track" },
-            React.createElement("span", { className: "navds-switch__thumb" }, loading && React.createElement(Loader, { size: "xsmall" }))),
+            React.createElement("span", { className: "navds-switch__thumb" }, loading ? (React.createElement(Loader, { size: "xsmall" })) : checked ? (React.createElement(SelectedIcon, null)) : null)),
         React.createElement("label", { htmlFor: inputProps.id, className: "navds-switch__label-wrapper" },
             React.createElement("div", { className: cl("navds-switch__content", {
                     "sr-only": hideLabel,

package/esm/form/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../src/form/Switch.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC;AACrD,OAAO,EAAkB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAmB9D,MAAM,MAAM,GAAG,UAAU,CAAgC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACtE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;IAE3D,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,WAAW,EACX,SAAS,GAAG,KAAK,EACjB,OAAO,KAEL,KAAK,EADJ,IAAI,UACL,KAAK,EAPH,gEAOL,CAAQ,CAAC;IAEV,MAAM,WAAW,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;IAE3D,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,KAAK,CAAC,SAAS,EAAE,iBAAiB,IAAI,EAAE,EAAE;YACtE,wBAAwB,EAAE,UAAU,CAAC,QAAQ;SAC9C,CAAC;QAEF,+CACM,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,EACpB,IAAI,CAAC,UAAU,EAAE,CAAC,cAAc,EAAE,kBAAkB,CAAC,CAAC,IAC1D,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,EACf,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,qBAAqB,CAAC,IAC/C;QACF,8BAAM,SAAS,EAAC,qBAAqB;YACnC,8BAAM,SAAS,EAAC,qBAAqB,IAClC,OAAO,IAAI,oBAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,GAAG,CAC/B,CACF;QAEP,+BAAO,OAAO,EAAE,UAAU,CAAC,EAAE,EAAE,SAAS,EAAC,6BAA6B;YACpE,6BACE,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE;oBACrC,SAAS,EAAE,SAAS;oBACpB,gCAAgC,EAAE,CAAC,CAAC,WAAW,IAAI,CAAC,SAAS;iBAC9D,CAAC;gBAEF,oBAAC,SAAS,IAAC,EAAE,EAAC,KAAK,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,qBAAqB,IAC5D,QAAQ,CACC;gBACX,WAAW,IAAI,CACd,oBAAC,WAAW,IACV,EAAE,EAAC,KAAK,EACR,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,2BAA2B,IAEpC,WAAW,CACA,CACf,CACG,CACA,CACJ,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../src/form/Switch.tsx"],"names":[],"mappings":"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"}

package/esm/index.d.ts

@@ -13,6 +13,7 @@ export * from "./modal";
 export * from "./panel";
 export * from "./popover";
 export * from "./speech-bubble";
+export * from "./step-indicator";
 export * from "./tag";
 export * from "./table";
 export * from "./typography";

package/esm/index.js

@@ -13,6 +13,7 @@ export * from "./modal";
 export * from "./panel";
 export * from "./popover";
 export * from "./speech-bubble";
+export * from "./step-indicator";
 export * from "./tag";
 export * from "./table";
 export * from "./typography";

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,kBAAkB,CAAC;AACjC,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,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,OAAO,CAAC;AACtB,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,kBAAkB,CAAC;AACjC,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,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AAEvB,6BAA6B;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC"}

package/esm/link-panel/LinkPanel.js

@@ -19,7 +19,7 @@ const LinkPanelComponent = forwardRef((_a, ref) => {
     var { children, as = "a", border = true, className } = _a, rest = __rest(_a, ["children", "as", "border", "className"]);
     return (React.createElement(Panel, Object.assign({}, rest, { as: as, border: border, ref: ref, className: cl("navds-link-panel", className) }),
         React.createElement("div", { className: "navds-link-panel__content" }, children),
-        React.createElement(Next, { className: "navds-link-panel__chevron", "aria-label": "arrow-icon pointing right" })));
+        React.createElement(Next, { className: "navds-link-panel__chevron", "aria-hidden": true })));
 });
 const LinkPanel = LinkPanelComponent;
 LinkPanel.Title = LinkPanelTitle;

package/esm/link-panel/LinkPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkPanel.js","sourceRoot":"","sources":["../../src/link-panel/LinkPanel.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAwB,MAAM,IAAI,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,cAAc,EAAsB,MAAM,kBAAkB,CAAC;AACtE,OAAO,EACL,oBAAoB,GAErB,MAAM,wBAAwB,CAAC;AAoBhC,MAAM,kBAAkB,GAGpB,UAAU,CACZ,CAAC,EAAyD,EAAE,GAAG,EAAE,EAAE;QAAlE,EAAE,QAAQ,EAAE,EAAE,GAAG,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,SAAS,OAAW,EAAN,IAAI,cAAvD,yCAAyD,CAAF;IACtD,OAAO,CACL,oBAAC,KAAK,oBACA,IAAI,IACR,EAAE,EAAE,EAAE,EACN,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,SAAS,CAAC;QAE5C,6BAAK,SAAS,EAAC,2BAA2B,IAAE,QAAQ,CAAO;QAC3D,oBAAC,IAAI,IACH,SAAS,EAAC,2BAA2B,gBAC1B,2BAA2B,GACtC,CACI,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,SAAS,GAAG,kBAA4C,CAAC;AAE/D,SAAS,CAAC,KAAK,GAAG,cAAc,CAAC;AACjC,SAAS,CAAC,WAAW,GAAG,oBAAoB,CAAC;AAE7C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"LinkPanel.js","sourceRoot":"","sources":["../../src/link-panel/LinkPanel.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAwB,MAAM,IAAI,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,cAAc,EAAsB,MAAM,kBAAkB,CAAC;AACtE,OAAO,EACL,oBAAoB,GAErB,MAAM,wBAAwB,CAAC;AAoBhC,MAAM,kBAAkB,GAGpB,UAAU,CACZ,CAAC,EAAyD,EAAE,GAAG,EAAE,EAAE;QAAlE,EAAE,QAAQ,EAAE,EAAE,GAAG,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,SAAS,OAAW,EAAN,IAAI,cAAvD,yCAAyD,CAAF;IACtD,OAAO,CACL,oBAAC,KAAK,oBACA,IAAI,IACR,EAAE,EAAE,EAAE,EACN,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,SAAS,CAAC;QAE5C,6BAAK,SAAS,EAAC,2BAA2B,IAAE,QAAQ,CAAO;QAC3D,oBAAC,IAAI,IAAC,SAAS,EAAC,2BAA2B,wBAAe,CACpD,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,SAAS,GAAG,kBAA4C,CAAC;AAE/D,SAAS,CAAC,KAAK,GAAG,cAAc,CAAC;AACjC,SAAS,CAAC,WAAW,GAAG,oBAAoB,CAAC;AAE7C,eAAe,SAAS,CAAC"}

package/esm/step-indicator/Step.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { OverridableComponent } from "..";
+export interface StepIndicatorStepProps extends React.HTMLAttributes<HTMLButtonElement> {
+    /**
+     * Text content under indicator
+     */
+    children: React.ReactNode;
+    /**
+     * Disables interaction with element
+     */
+    disabled?: boolean;
+    /**
+     * Handled by StepIndicator
+     */
+    index?: number;
+}
+export interface StepIndicatorStepType extends OverridableComponent<StepIndicatorStepProps, HTMLButtonElement> {
+}
+declare const Step: StepIndicatorStepType;
+export default Step;

package/esm/step-indicator/Step.js

@@ -0,0 +1,39 @@
+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 React, { forwardRef, useContext } from "react";
+import cl from "classnames";
+import { StepContext } from ".";
+import { BodyShort, Label } from "..";
+const StepComponent = forwardRef((_a, ref) => {
+    var { className, children, as: Component = "button", disabled, index } = _a, rest = __rest(_a, ["className", "children", "as", "disabled", "index"]);
+    const context = useContext(StepContext);
+    if (context === null) {
+        console.error("<StepIndicator.Step> has to be used within an <StepIndicator>");
+        return null;
+    }
+    const safeIndex = index !== null && index !== void 0 ? index : 0;
+    const Number = context.activeStep === safeIndex ? Label : BodyShort;
+    return (React.createElement(Component, Object.assign({}, rest, { disabled: disabled, ref: ref, className: cl("navds-step-indicator__step", className, {
+            "navds-step-indicator__step--disabled": disabled,
+            "navds-step-indicator__step--active": context.activeStep === safeIndex,
+            "navds-step-indicator__step--finished": context.activeStep > safeIndex,
+        }), onClick: (e) => {
+            context.onStepChange(safeIndex);
+            rest.onClick && rest.onClick(e);
+        } }),
+        React.createElement(Number, { className: "navds-step-indicator__step-number" }, safeIndex + 1),
+        React.createElement("div", { className: cl("navds-step-indicator__step-label") }, !context.hideLabels && children),
+        safeIndex !== 0 && (React.createElement("span", { "aria-hidden": true, className: "navds-step-indicator__step-line" }))));
+});
+const Step = StepComponent;
+export default Step;
+//# sourceMappingURL=Step.js.map

package/esm/step-indicator/Step.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.js","sourceRoot":"","sources":["../../src/step-indicator/Step.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,WAAW,EAAE,MAAM,GAAG,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,KAAK,EAAwB,MAAM,IAAI,CAAC;AAqB5D,MAAM,aAAa,GAGf,UAAU,CACZ,CACE,EAA2E,EAC3E,GAAG,EACH,EAAE;QAFF,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,GAAG,QAAQ,EAAE,QAAQ,EAAE,KAAK,OAAW,EAAN,IAAI,cAAzE,oDAA2E,CAAF;IAGzE,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAExC,IAAI,OAAO,KAAK,IAAI,EAAE;QACpB,OAAO,CAAC,KAAK,CACX,+DAA+D,CAChE,CAAC;QACF,OAAO,IAAI,CAAC;KACb;IAED,MAAM,SAAS,GAAG,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,CAAC,CAAC;IAE7B,MAAM,MAAM,GAAG,OAAO,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;IAEpE,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,4BAA4B,EAAE,SAAS,EAAE;YACrD,sCAAsC,EAAE,QAAQ;YAChD,oCAAoC,EAClC,OAAO,CAAC,UAAU,KAAK,SAAS;YAClC,sCAAsC,EACpC,OAAO,CAAC,UAAU,GAAG,SAAS;SACjC,CAAC,EACF,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,OAAO,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;YAChC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAClC,CAAC;QAED,oBAAC,MAAM,IAAC,SAAS,EAAC,mCAAmC,IAClD,SAAS,GAAG,CAAC,CACP;QACT,6BAAK,SAAS,EAAE,EAAE,CAAC,kCAAkC,CAAC,IACnD,CAAC,OAAO,CAAC,UAAU,IAAI,QAAQ,CAC5B;QACL,SAAS,KAAK,CAAC,IAAI,CAClB,mDAAkB,SAAS,EAAC,iCAAiC,GAAG,CACjE,CACS,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,IAAI,GAAG,aAAsC,CAAC;AAEpD,eAAe,IAAI,CAAC"}

package/esm/step-indicator/StepIndicator.d.ts

@@ -0,0 +1,41 @@
+import React from "react";
+import { StepIndicatorStepType } from "./Step";
+export interface StepIndicatorProps extends React.HTMLAttributes<HTMLOListElement> {
+    /**
+     * <StepIndicator.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;
+    /**
+     * Hides labels for each step if true
+     * @default false
+     */
+    hideLabels?: boolean;
+    /**
+     * enables `hideLabels` internally when steps start to overflow.
+     * @note declaring `hideLabels` overwrites this functionality
+     */
+    responsive?: boolean;
+}
+interface StepIndicatorComponent extends React.ForwardRefExoticComponent<StepIndicatorProps & React.RefAttributes<HTMLOListElement>> {
+    Step: StepIndicatorStepType;
+}
+interface StepContextProps {
+    activeStep: number;
+    onStepChange: (step: number) => void;
+    hideLabels: boolean;
+}
+export declare const StepContext: React.Context<StepContextProps | null>;
+declare const StepIndicator: StepIndicatorComponent;
+export default StepIndicator;

package/esm/step-indicator/StepIndicator.js

@@ -0,0 +1,52 @@
+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, { createContext, forwardRef, useCallback, useEffect, useRef, useState, } from "react";
+import mergeRefs from "react-merge-refs";
+import Step from "./Step";
+export const StepContext = createContext(null);
+const StepIndicator = forwardRef((_a, ref) => {
+    var { children, className, activeStep, hideLabels, onStepChange = () => { }, responsive } = _a, rest = __rest(_a, ["children", "className", "activeStep", "hideLabels", "onStepChange", "responsive"]);
+    const wrapperRef = useRef(null);
+    const mergedRef = mergeRefs([wrapperRef, ref]);
+    const [showLabels, setShowLabels] = useState(true);
+    const removeLabels = hideLabels !== null && hideLabels !== void 0 ? hideLabels : (!!responsive && !showLabels);
+    const stepsWithIndex = React.Children.map(children, (step, index) => {
+        return React.isValidElement(step) ? (React.createElement("li", { className: cl("navds-step-indicator__step-wrapper", {
+                "navds-step-indicator__step-wrapper--hidelabel": removeLabels,
+            }), key: index, "aria-current": index === activeStep && "step" }, React.cloneElement(step, Object.assign(Object.assign({}, step.props), { index })))) : (step);
+    });
+    const canShowLabels = useCallback(() => {
+        var _a;
+        const remSize = parseFloat(String(getComputedStyle(document.documentElement).fontSize));
+        const childrenLength = React.Children.toArray(children).filter((child) => React.isValidElement(child)).length;
+        wrapperRef.current &&
+            setShowLabels(((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) >=
+                remSize * 10 * childrenLength);
+    }, [children]);
+    useEffect(() => {
+        window.addEventListener("resize", canShowLabels);
+        canShowLabels();
+        return () => {
+            window.removeEventListener("resize", canShowLabels);
+        };
+    }, [canShowLabels]);
+    return (React.createElement("ol", Object.assign({ ref: mergedRef, className: cl(`navds-step-indicator`, className) }, rest),
+        React.createElement(StepContext.Provider, { value: {
+                activeStep,
+                onStepChange,
+                hideLabels: removeLabels,
+            } }, stepsWithIndex)));
+});
+StepIndicator.Step = Step;
+export default StepIndicator;
+//# sourceMappingURL=StepIndicator.js.map

package/esm/step-indicator/StepIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepIndicator.js","sourceRoot":"","sources":["../../src/step-indicator/StepIndicator.tsx"],"names":[],"mappings":"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"}

package/esm/step-indicator/index.d.ts

@@ -0,0 +1,2 @@
+export { default as StepIndicator } from "./StepIndicator";
+export * from "./StepIndicator";

package/esm/step-indicator/index.js

@@ -0,0 +1,3 @@
+export { default as StepIndicator } from "./StepIndicator";
+export * from "./StepIndicator";
+//# sourceMappingURL=index.js.map

package/esm/step-indicator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/step-indicator/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,cAAc,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.14.3",
+  "version": "0.14.7",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@material-ui/core": "^4.12.3",
-    "@navikt/ds-icons": "^0.7.1",
+    "@navikt/ds-icons": "^0.7.2",
     "@popperjs/core": "^2.10.1",
     "classnames": "^2.2.6",
     "react-collapse": "^5.1.0",
@@ -50,12 +50,12 @@
     "@testing-library/user-event": "^13.2.1",
     "@types/faker": "^5.5.8",
     "@types/jest": "^27.0.1",
-    "@types/react-router-dom": "^5.1.9",
+    "@types/react-modal": "^3.13.1",
     "@types/styled-components": "^5.1.14",
     "copyfiles": "^2.4.1",
     "faker": "^5.5.3",
     "jest": "^27.2.0",
-    "react-router-dom": "^5.3.0",
+    "react-router-dom": "^6.1.0",
     "rimraf": "3.0.2",
     "styled-components": "^5.3.1",
     "ts-jest": "^27.0.5"
@@ -64,5 +64,5 @@
     "@types/react": "^17.0.30",
     "react": "^17.0.0"
   },
-  "gitHead": "c24f5a029c37093ceb1b881f443a1c14a9dac135"
+  "gitHead": "381adf6cb1b6ca93cd090073b545110c52187ae4"
 }

package/src/form/Select.tsx

@@ -94,7 +94,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
         >
           {children}
         </select>
-        <Expand className="navds-select__chevron" />
+        <Expand className="navds-select__chevron" aria-hidden />
       </div>
       <div id={errorId} aria-relevant="additions removals" aria-live="polite">
         {showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}