@navikt/ds-react 0.14.5 → 0.14.9

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", { fillRule: "evenodd", clipRule: "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/help-text/HelpText.js

@@ -39,7 +39,7 @@ const react_1 = __importStar(require("react"));
 const react_merge_refs_1 = __importDefault(require("react-merge-refs"));
 const __1 = require("..");
 const HelpText = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, children, placement = "top", title = "hjelp" } = _a, rest = __rest(_a, ["className", "children", "placement", "title"]);
+    var { className, children, placement = "top", strategy = "absolute", title = "hjelp" } = _a, rest = __rest(_a, ["className", "children", "placement", "strategy", "title"]);
     const buttonRef = (0, react_1.useRef)(null);
     const mergedRef = (0, react_merge_refs_1.default)([buttonRef, ref]);
     const popoverRef = (0, react_1.useRef)(null);
@@ -57,7 +57,7 @@ const HelpText = (0, react_1.forwardRef)((_a, ref) => {
         react_1.default.createElement("button", Object.assign({}, rest, { ref: mergedRef, onClick: (e) => handleClick(e), className: (0, classnames_1.default)(className, "navds-help-text__button"), type: "button", "aria-expanded": open, "aria-haspopup": "dialog", title: title }),
             react_1.default.createElement(ds_icons_1.Helptext, { className: "navds-help-text__icon" }),
             react_1.default.createElement("span", { className: "navds-sr-only" }, title)),
-        react_1.default.createElement(__1.Popover, { ref: popoverRef, onClose: () => setOpen(false), className: "navds-help-text__popover", open: open, role: "tooltip", anchorEl: buttonRef.current, placement: placement },
+        react_1.default.createElement(__1.Popover, { ref: popoverRef, onClose: () => setOpen(false), className: "navds-help-text__popover", open: open, role: "tooltip", anchorEl: buttonRef.current, placement: placement, strategy: strategy },
             react_1.default.createElement(__1.Popover.Content, null, children))));
 });
 exports.default = HelpText;

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/popover/Popover.js

@@ -46,7 +46,7 @@ const useEventLister = (event, callback) => (0, react_1.useEffect)(() => {
     };
 }, [event, callback]);
 const Popover = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, children, anchorEl, arrow = true, open, onClose, placement = "right", offset } = _a, rest = __rest(_a, ["className", "children", "anchorEl", "arrow", "open", "onClose", "placement", "offset"]);
+    var { className, children, anchorEl, arrow = true, open, onClose, placement = "right", offset, strategy = "absolute" } = _a, rest = __rest(_a, ["className", "children", "anchorEl", "arrow", "open", "onClose", "placement", "offset", "strategy"]);
     const popoverRef = (0, react_1.useRef)(null);
     const mergedRef = (0, react_merge_refs_1.default)([popoverRef, ref]);
     const close = (0, react_1.useCallback)(() => open && onClose(), [open, onClose]);
@@ -77,6 +77,7 @@ const Popover = (0, react_1.forwardRef)((_a, ref) => {
                 },
             },
         ],
+        strategy,
     });
     (0, __1.useClientLayoutEffect)(() => {
         open && update && update();

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", { fillRule: "evenodd", clipRule: "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/help-text/HelpText.d.ts

@@ -1,15 +1,10 @@
-import { Placement } from "@popperjs/core";
 import React from "react";
-export interface HelpTextProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+import { PopoverProps } from "..";
+export interface HelpTextProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Pick<PopoverProps, "strategy" | "placement"> {
     /**
      * Component content
      */
     children: React.ReactNode;
-    /**
-     * Placement of popover
-     * @default "top"
-     */
-    placement?: Placement;
 }
 declare const HelpText: React.ForwardRefExoticComponent<HelpTextProps & React.RefAttributes<HTMLButtonElement>>;
 export default HelpText;

package/esm/help-text/HelpText.js

@@ -15,7 +15,7 @@ import React, { forwardRef, useEffect, useRef, useState } from "react";
 import mergeRefs from "react-merge-refs";
 import { Popover } from "..";
 const HelpText = forwardRef((_a, ref) => {
-    var { className, children, placement = "top", title = "hjelp" } = _a, rest = __rest(_a, ["className", "children", "placement", "title"]);
+    var { className, children, placement = "top", strategy = "absolute", title = "hjelp" } = _a, rest = __rest(_a, ["className", "children", "placement", "strategy", "title"]);
     const buttonRef = useRef(null);
     const mergedRef = mergeRefs([buttonRef, ref]);
     const popoverRef = useRef(null);
@@ -33,7 +33,7 @@ const HelpText = forwardRef((_a, ref) => {
         React.createElement("button", Object.assign({}, rest, { ref: mergedRef, onClick: (e) => handleClick(e), className: cl(className, "navds-help-text__button"), type: "button", "aria-expanded": open, "aria-haspopup": "dialog", title: title }),
             React.createElement(HelpTextIcon, { className: "navds-help-text__icon" }),
             React.createElement("span", { className: "navds-sr-only" }, title)),
-        React.createElement(Popover, { ref: popoverRef, onClose: () => setOpen(false), className: "navds-help-text__popover", open: open, role: "tooltip", anchorEl: buttonRef.current, placement: placement },
+        React.createElement(Popover, { ref: popoverRef, onClose: () => setOpen(false), className: "navds-help-text__popover", open: open, role: "tooltip", anchorEl: buttonRef.current, placement: placement, strategy: strategy },
             React.createElement(Popover.Content, null, children))));
 });
 export default HelpText;

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;AAE5D,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC;AAe7B,MAAM,QAAQ,GAAG,UAAU,CACzB,CACE,EAAoE,EACpE,GAAG,EACH,EAAE;QAFF,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,GAAG,KAAK,EAAE,KAAK,GAAG,OAAO,OAAW,EAAN,IAAI,cAAlE,+CAAoE,CAAF;IAGlE,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACzD,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC;IAC9C,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEvD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,KAAI,MAAA,UAAU,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA,CAAC;IACtC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,WAAW,GAAG,CAClB,CAAkD,EAClD,EAAE;QACF,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QACnB,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IAClC,CAAC,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAC,iBAAiB,EAAC,GAAG,EAAE,UAAU;QAC9C,gDACM,IAAI,IACR,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,EAC9B,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,yBAAyB,CAAC,EACnD,IAAI,EAAC,QAAQ,mBACE,IAAI,mBACL,QAAQ,EACtB,KAAK,EAAE,KAAK;YAEZ,oBAAC,YAAY,IAAC,SAAS,EAAC,uBAAuB,GAAG;YAClD,8BAAM,SAAS,EAAC,eAAe,IAAE,KAAK,CAAQ,CACvC;QACT,oBAAC,OAAO,IACN,GAAG,EAAE,UAAU,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAC,0BAA0B,EACpC,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,SAAS,EACd,QAAQ,EAAE,SAAS,CAAC,OAAO,EAC3B,SAAS,EAAE,SAAS;YAEpB,oBAAC,OAAO,CAAC,OAAO,QAAE,QAAQ,CAAmB,CACrC,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,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAgB,MAAM,IAAI,CAAC;AAW3C,MAAM,QAAQ,GAAG,UAAU,CACzB,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,SAAS,EACT,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,UAAU,EACrB,KAAK,GAAG,OAAO,OAEhB,EADI,IAAI,cANT,2DAOC,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,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEvD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,KAAI,MAAA,UAAU,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA,CAAC;IACtC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,WAAW,GAAG,CAClB,CAAkD,EAClD,EAAE;QACF,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QACnB,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IAClC,CAAC,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAC,iBAAiB,EAAC,GAAG,EAAE,UAAU;QAC9C,gDACM,IAAI,IACR,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,EAC9B,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,yBAAyB,CAAC,EACnD,IAAI,EAAC,QAAQ,mBACE,IAAI,mBACL,QAAQ,EACtB,KAAK,EAAE,KAAK;YAEZ,oBAAC,YAAY,IAAC,SAAS,EAAC,uBAAuB,GAAG;YAClD,8BAAM,SAAS,EAAC,eAAe,IAAE,KAAK,CAAQ,CACvC;QACT,oBAAC,OAAO,IACN,GAAG,EAAE,UAAU,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAC,0BAA0B,EACpC,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,SAAS,EACd,QAAQ,EAAE,SAAS,CAAC,OAAO,EAC3B,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ;YAElB,oBAAC,OAAO,CAAC,OAAO,QAAE,QAAQ,CAAmB,CACrC,CACN,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,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/popover/Popover.d.ts

@@ -33,6 +33,12 @@ export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
      * @default 16 w/arrow, 4 w/no-arrow
      */
     offset?: number;
+    /**
+     * Changes what CSS position property to use
+     * You want to use "fixed" if reference element is inside a fixed container, but popover is not
+     * @default "absolute"
+     */
+    strategy?: "absolute" | "fixed";
 }
 interface PopoverComponent extends React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>> {
     Content: PopoverContentType;

package/esm/popover/Popover.js

@@ -22,7 +22,7 @@ const useEventLister = (event, callback) => useEffect(() => {
     };
 }, [event, callback]);
 const Popover = forwardRef((_a, ref) => {
-    var { className, children, anchorEl, arrow = true, open, onClose, placement = "right", offset } = _a, rest = __rest(_a, ["className", "children", "anchorEl", "arrow", "open", "onClose", "placement", "offset"]);
+    var { className, children, anchorEl, arrow = true, open, onClose, placement = "right", offset, strategy = "absolute" } = _a, rest = __rest(_a, ["className", "children", "anchorEl", "arrow", "open", "onClose", "placement", "offset", "strategy"]);
     const popoverRef = useRef(null);
     const mergedRef = mergeRefs([popoverRef, ref]);
     const close = useCallback(() => open && onClose(), [open, onClose]);
@@ -53,6 +53,7 @@ const Popover = forwardRef((_a, ref) => {
                 },
             },
         ],
+        strategy,
     });
     useClientLayoutEffect(() => {
         open && update && update();

package/esm/popover/Popover.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.14.5",
+  "version": "0.14.9",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -64,5 +64,5 @@
     "@types/react": "^17.0.30",
     "react": "^17.0.0"
   },
-  "gitHead": "3db81c9b79f8be93cb23f996002d0cbb38ca2348"
+  "gitHead": "adebf90f68922ff6c012f15ee21564b01b0cc7dd"
 }

package/src/form/Switch.tsx

@@ -1,8 +1,35 @@
 import cl from "classnames";
-import React, { forwardRef, InputHTMLAttributes } from "react";
+import React, {
+  forwardRef,
+  InputHTMLAttributes,
+  useEffect,
+  useState,
+} from "react";
 import { BodyShort, Detail, Loader, omit } from "..";
 import { FormFieldProps, useFormField } from "./useFormField";
 
+const SelectedIcon = () => (
+  <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
+    aria-label="Deaktiver valg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M4.01386 8L10.25 2L11 2.75L4.01386 9.5L1 6.5L1.75 5.75L4.01386 8Z"
+      fill="currentColor"
+      stroke="currentColor"
+    />
+  </svg>
+);
+
 export interface SwitchProps
   extends Omit<FormFieldProps, "error" | "errorId">,
     Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
@@ -18,6 +45,10 @@ export interface SwitchProps
    * Toggles loading state with loader-component on switch
    */
   loading?: boolean;
+  /**
+   * Positions switch on left/right side of label
+   */
+  position?: "left" | "right";
 }
 
 const Switch = forwardRef<HTMLInputElement, SwitchProps>((props, ref) => {
@@ -29,30 +60,58 @@ const Switch = forwardRef<HTMLInputElement, SwitchProps>((props, ref) => {
     description,
     hideLabel = false,
     loading,
+    checked: checkedProp,
+    defaultChecked,
+    position = "left",
     ...rest
   } = props;
 
   const Description = size === "medium" ? BodyShort : Detail;
 
+  const [checked, setChecked] = useState(
+    defaultChecked ?? checkedProp ?? false
+  );
+
+  useEffect(() => {
+    checkedProp !== undefined && setChecked(checkedProp);
+  }, [checkedProp]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked(e.target.checked);
+    props.onChange && props.onChange(e);
+  };
+
   return (
     <div
-      className={cl("navds-switch", props.className, `navds-switch--${size}`, {
-        "navds-switch--disabled": inputProps.disabled,
-      })}
+      className={cl(
+        "navds-switch",
+        props.className,
+        `navds-switch--${size}`,
+        `navds-switch--${position}`,
+        {
+          "navds-switch--disabled": inputProps.disabled,
+        }
+      )}
     >
       <input
         {...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")}
       />
       <span className="navds-switch__track">
         <span className="navds-switch__thumb">
-          {loading && <Loader size="xsmall" />}
+          {loading ? (
+            <Loader size="xsmall" />
+          ) : checked ? (
+            <SelectedIcon />
+          ) : null}
         </span>
       </span>
-
       <label htmlFor={inputProps.id} className="navds-switch__label-wrapper">
         <div
           className={cl("navds-switch__content", {

package/src/form/stories/switch.stories.mdx

@@ -6,21 +6,70 @@ import { Switch } from "../index";
 # Hvordan ta i bruk Switch
 
 ```jsx
-<Switch>Slå på feature</Switch>
+  <Switch>Slå på feature</Switch>
+  <div>
+    <Switch position="right">Slå på feature</Switch>
+  </div>
 ```
 
 <Canvas>
   <Switch>Slå på feature</Switch>
+  <div>
+    <Switch position="right">Slå på feature</Switch>
+  </div>
 </Canvas>
 
 ## Description
 
 ```jsx
 <Switch description="Dette vil gjøre x og y">Slå på feature</Switch>
+  <div>
+    <Switch position="right" description="Dette vil gjøre x og y">
+      Slå på feature
+    </Switch>
+  </div>
 ```
 
 <Canvas>
   <Switch description="Dette vil gjøre x og y">Slå på feature</Switch>
+  <div>
+    <Switch position="right" description="Dette vil gjøre x og y">
+      Slå på feature
+    </Switch>
+  </div>
+</Canvas>
+
+## Position
+
+Switch kan ha label på høyre eller venstre side. Velges med "Position"-prop "left" | "right". Husk at hvis position
+"right" velges, må man selv passe på at den har en definert bredde slik at elementet ikke vises over hele skjermen.
+
+```jsx
+<div>
+  <div>
+    <h3>Feil</h3>
+    <Switch position="right">Slå på feature</Switch>
+    <h3>Riktig</h3>
+    <div style={{ width: 200 }}>
+      <Switch position="right">Slå på feature 1</Switch>
+      <Switch position="right">Slå på feature 2</Switch>
+      <Switch position="right">Slå på feature 3</Switch>
+    </div>
+  </div>
+</div>
+```
+
+<Canvas>
+  <div>
+    <h3>Feil</h3>
+    <Switch position="right">Slå på feature</Switch>
+    <h3>Riktig</h3>
+    <div style={{ width: 300 }}>
+      <Switch position="right">Slå på feature 1</Switch>
+      <Switch position="right">Slå på feature 2</Switch>
+      <Switch position="right">Slå på feature 3</Switch>
+    </div>
+  </div>
 </Canvas>
 
 ## Sizing
@@ -30,6 +79,9 @@ Switch har default 48px høy klikkflate. Med size="small" blir klikkflaten 32px
 ```jsx
 <Switch size="small" >Slå på feature</Switch>
 <Switch size="small" description="Dette vil gjøre x og y">Slå på feature</Switch>
+
+<Switch position="right" size="small" >Slå på feature</Switch>
+<Switch position="right" size="small" description="Dette vil gjøre x og y">Slå på feature</Switch>
 ```
 
 <Canvas>
@@ -39,6 +91,14 @@ Switch har default 48px høy klikkflate. Med size="small" blir klikkflaten 32px
       Slå på feature
     </Switch>
   </div>
+  <div>
+    <Switch position="right" size="small">
+      Slå på feature
+    </Switch>
+    <Switch position="right" size="small" description="Dette vil gjøre x og y">
+      Slå på feature
+    </Switch>
+  </div>
 </Canvas>
 
 ## defaultChecked
@@ -58,11 +118,21 @@ Switch er en stylet checkbox, så både `checked` og `defaultChecked` fungerer
 Ved bruk av `hideLegend` på Switch kan man gjøre slik at legend/description bare vises for skjermlesere
 
 ```jsx
-<Switch hideLabel>Slå på feature</Switch>
+<div style={{ width: 300 }}>
+  <Switch hideLabel>Slå på feature</Switch>
+  <Switch hideLabel position="right">
+    Slå på feature
+  </Switch>
+</div>
 ```
 
 <Canvas>
-  <Switch hideLabel>Slå på feature</Switch>
+  <div style={{ width: 300 }}>
+    <Switch hideLabel>Slå på feature</Switch>
+    <Switch hideLabel position="right">
+      Slå på feature
+    </Switch>
+  </div>
 </Canvas>
 
 ## Disabled

package/src/form/stories/switch.stories.tsx

@@ -10,15 +10,22 @@ export default {
 export const All = () => {
   const [checked, setChecked] = useState(false);
   return (
-    <div>
+    <div style={{ width: "fit-content" }}>
       <h1>Switch</h1>
       <Switch>Label text</Switch>
+      <Switch position="right">Label text</Switch>
 
       <h2>Switch w/Description</h2>
       <Switch>Label text</Switch>
       <Switch description="Switch description">Label text</Switch>
       <Switch>Label text</Switch>
 
+      <Switch position="right">Label text</Switch>
+      <Switch position="right" description="Switch description">
+        Label text
+      </Switch>
+      <Switch position="right">Label text</Switch>
+
       <h2>hidelabel</h2>
       <Switch description="Switch description" hideLabel>
         Label text
@@ -29,6 +36,15 @@ export const All = () => {
       <Switch hideLabel size="small">
         Label text small
       </Switch>
+      <Switch position="right" description="Switch description" hideLabel>
+        Label text
+      </Switch>
+      <Switch position="right" description="Switch description" hideLabel>
+        Label text
+      </Switch>
+      <Switch position="right" hideLabel size="small">
+        Label text small
+      </Switch>
 
       <h2>Switch small</h2>
       <Switch size="small">Label text</Switch>
@@ -37,6 +53,16 @@ export const All = () => {
       </Switch>
       <Switch size="small">Label text</Switch>
 
+      <Switch position="right" size="small">
+        Label text
+      </Switch>
+      <Switch position="right" description="Switch description" size="small">
+        Label text
+      </Switch>
+      <Switch position="right" size="small">
+        Label text
+      </Switch>
+
       <h2>Controlled</h2>
       <Switch checked={checked} onChange={() => setChecked(!checked)}>
         Label text

package/src/help-text/HelpText.tsx

@@ -1,26 +1,28 @@
 import { Helptext as HelpTextIcon } from "@navikt/ds-icons";
-import { Placement } from "@popperjs/core";
 import cl from "classnames";
 import React, { forwardRef, useEffect, useRef, useState } from "react";
 import mergeRefs from "react-merge-refs";
-import { Popover } from "..";
+import { Popover, PopoverProps } from "..";
 
 export interface HelpTextProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    Pick<PopoverProps, "strategy" | "placement"> {
   /**
    * Component content
    */
   children: React.ReactNode;
-  /**
-   * Placement of popover
-   * @default "top"
-   */
-  placement?: Placement;
 }
 
 const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
   (
-    { className, children, placement = "top", title = "hjelp", ...rest },
+    {
+      className,
+      children,
+      placement = "top",
+      strategy = "absolute",
+      title = "hjelp",
+      ...rest
+    },
     ref
   ) => {
     const buttonRef = useRef<HTMLButtonElement | null>(null);
@@ -64,6 +66,7 @@ const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
           role="tooltip"
           anchorEl={buttonRef.current}
           placement={placement}
+          strategy={strategy}
         >
           <Popover.Content>{children}</Popover.Content>
         </Popover>

package/src/link-panel/LinkPanel.tsx

@@ -40,10 +40,7 @@ const LinkPanelComponent: OverridableComponent<
         className={cl("navds-link-panel", className)}
       >
         <div className="navds-link-panel__content">{children}</div>
-        <Next
-          className="navds-link-panel__chevron"
-          aria-label="arrow-icon pointing right"
-        />
+        <Next className="navds-link-panel__chevron" aria-hidden />
       </Panel>
     );
   }

package/src/popover/Popover.tsx

@@ -44,6 +44,12 @@ export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
    * @default 16 w/arrow, 4 w/no-arrow
    */
   offset?: number;
+  /**
+   * Changes what CSS position property to use
+   * You want to use "fixed" if reference element is inside a fixed container, but popover is not
+   * @default "absolute"
+   */
+  strategy?: "absolute" | "fixed";
 }
 
 const useEventLister = (event: string, callback) =>
@@ -72,6 +78,7 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       onClose,
       placement = "right",
       offset,
+      strategy = "absolute",
       ...rest
     },
     ref
@@ -137,6 +144,7 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(
             },
           },
         ],
+        strategy,
       }
     );