@navikt/ds-react 0.14.10-next.0 → 0.14.13

package/esm/form/Textarea.js

@@ -26,10 +26,10 @@ const Textarea = forwardRef((props, ref) => {
             "navds-textarea--disabled": !!inputProps.disabled,
         }) },
         React.createElement(Label, { htmlFor: inputProps.id, size: size, as: "label", className: cl("navds-textarea__label", {
-                "sr-only": hideLabel,
+                "navds-sr-only": hideLabel,
             }) }, label),
         !!description && (React.createElement(BodyShort, { as: "div", className: cl("navds-textarea__description", {
-                "sr-only": hideLabel,
+                "navds-sr-only": hideLabel,
             }), id: inputDescriptionId, size: size }, description)),
         React.createElement("div", { className: "navds-textarea__wrapper" },
             React.createElement(TextareaAutosize, Object.assign({}, omit(rest, ["error", "errorId", "size"]), inputProps, { ref: ref, className: cl("navds-textarea__input", "navds-body-short", `navds-body-${size !== null && size !== void 0 ? size : "medium"}`, {
@@ -38,7 +38,7 @@ const Textarea = forwardRef((props, ref) => {
                     [maxLengthId]: hasMaxLength,
                 }) })),
             hasMaxLength && (React.createElement(React.Fragment, null,
-                React.createElement("span", { id: maxLengthId, className: "sr-only" },
+                React.createElement("span", { id: maxLengthId, className: "navds-sr-only" },
                     "Tekstomr\u00E5de med plass til ",
                     maxLength,
                     " tegn., Textarea can have",

package/esm/form/Textarea.js.map

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

package/esm/form/checkbox/Checkbox.js

@@ -18,7 +18,7 @@ const Checkbox = forwardRef((props, ref) => {
         ]), inputProps, { className: "navds-checkbox__input", ref: ref })),
         React.createElement("label", { htmlFor: inputProps.id, className: "navds-checkbox__label" },
             React.createElement("div", { className: cl("navds-checkbox__content", {
-                    "sr-only": props.hideLabel,
+                    "navds-sr-only": props.hideLabel,
                 }) },
                 React.createElement(BodyShort, { as: "div", size: size }, props.children),
                 props.description && (React.createElement(Description, { as: "div", size: "small", className: "navds-checkbox__description" }, props.description))))));

package/esm/form/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/form/checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,WAAW,MAAM,eAAe,CAAC;AAExC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAwBhD,MAAM,QAAQ,GAAG,UAAU,CAAkC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC1E,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;IAE1D,MAAM,WAAW,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;IAE3D,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CACX,KAAK,CAAC,SAAS,EACf,gBAAgB,EAChB,mBAAmB,IAAI,EAAE,EACzB;YACE,uBAAuB,EAAE,QAAQ;YACjC,0BAA0B,EAAE,UAAU,CAAC,QAAQ;SAChD,CACF;QAED,+CACM,IAAI,CAAC,KAAK,EAAE;YACd,UAAU;YACV,MAAM;YACN,OAAO;YACP,aAAa;YACb,WAAW;SACZ,CAAC,EACE,UAAU,IACd,SAAS,EAAC,uBAAuB,EACjC,GAAG,EAAE,GAAG,IACR;QACF,+BAAO,OAAO,EAAE,UAAU,CAAC,EAAE,EAAE,SAAS,EAAC,uBAAuB;YAC9D,6BACE,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE;oBACvC,SAAS,EAAE,KAAK,CAAC,SAAS;iBAC3B,CAAC;gBAEF,oBAAC,SAAS,IAAC,EAAE,EAAC,KAAK,EAAC,IAAI,EAAE,IAAI,IAC3B,KAAK,CAAC,QAAQ,CACL;gBACX,KAAK,CAAC,WAAW,IAAI,CACpB,oBAAC,WAAW,IACV,EAAE,EAAC,KAAK,EACR,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,6BAA6B,IAEtC,KAAK,CAAC,WAAW,CACN,CACf,CACG,CACA,CACJ,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/form/checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,WAAW,MAAM,eAAe,CAAC;AAExC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAwBhD,MAAM,QAAQ,GAAG,UAAU,CAAkC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC1E,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;IAE1D,MAAM,WAAW,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;IAE3D,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CACX,KAAK,CAAC,SAAS,EACf,gBAAgB,EAChB,mBAAmB,IAAI,EAAE,EACzB;YACE,uBAAuB,EAAE,QAAQ;YACjC,0BAA0B,EAAE,UAAU,CAAC,QAAQ;SAChD,CACF;QAED,+CACM,IAAI,CAAC,KAAK,EAAE;YACd,UAAU;YACV,MAAM;YACN,OAAO;YACP,aAAa;YACb,WAAW;SACZ,CAAC,EACE,UAAU,IACd,SAAS,EAAC,uBAAuB,EACjC,GAAG,EAAE,GAAG,IACR;QACF,+BAAO,OAAO,EAAE,UAAU,CAAC,EAAE,EAAE,SAAS,EAAC,uBAAuB;YAC9D,6BACE,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE;oBACvC,eAAe,EAAE,KAAK,CAAC,SAAS;iBACjC,CAAC;gBAEF,oBAAC,SAAS,IAAC,EAAE,EAAC,KAAK,EAAC,IAAI,EAAE,IAAI,IAC3B,KAAK,CAAC,QAAQ,CACL;gBACX,KAAK,CAAC,WAAW,IAAI,CACpB,oBAAC,WAAW,IACV,EAAE,EAAC,KAAK,EACR,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,6BAA6B,IAEtC,KAAK,CAAC,WAAW,CACN,CACf,CACG,CACA,CACJ,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/esm/form/search-field/SearchField.d.ts

@@ -1,6 +1,23 @@
-import React, { InputHTMLAttributes } from "react";
+import React from "react";
 import { FormFieldProps } from "../useFormField";
-export interface SearchFieldProps extends Omit<FormFieldProps, "error" | "errorId">, Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> {
+import { SearchFieldButtonType } from "./SearchFieldButton";
+import { SearchFieldClearButtonType } from "./SearchFieldClearButton";
+import { SearchFieldInputType } from "./SearchFieldInput";
+export interface SearchFieldContextProps {
+    inputProps: {
+        id: string;
+        "aria-invalid": boolean;
+        "aria-describedby"?: string;
+        disabled?: boolean;
+    };
+    size?: "medium" | "small";
+}
+export declare const SearchFieldContext: React.Context<SearchFieldContextProps | null>;
+export interface SearchFieldProps extends FormFieldProps, React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * SearchFieldInput & SearchFieldButton
+     */
+    children: React.ReactNode;
     /**
      * If enabled shows the label and description for screenreaders only
      */
@@ -9,28 +26,11 @@ export interface SearchFieldProps extends Omit<FormFieldProps, "error" | "errorI
      * SearchField label
      */
     label: React.ReactNode;
-    /**
-     * Inverts color theme
-     * @default false
-     */
-    inverted?: boolean;
-    /**
-     * Customize aria-label on clear button
-     * @default "Slett tekst i felt"
-     */
-    clearButtonLabel?: string;
-    /**
-     * Callback for when user manually clears input with button or Escape
-     */
-    onClear?: () => void;
-    /**
-     * Callback for value in input after change
-     */
-    onChange?: (value: string) => void;
-    /**
-     * Toggles display of "clear"-button when there is text in field
-     */
-    clearButton?: boolean;
 }
-declare const SearchField: React.ForwardRefExoticComponent<SearchFieldProps & React.RefAttributes<HTMLInputElement>>;
+interface SearchFieldComponent extends React.ForwardRefExoticComponent<SearchFieldProps & React.RefAttributes<HTMLDivElement>> {
+    Button: SearchFieldButtonType;
+    Clear: SearchFieldClearButtonType;
+    Input: SearchFieldInputType;
+}
+declare const SearchField: SearchFieldComponent;
 export default SearchField;

package/esm/form/search-field/SearchField.js

@@ -9,59 +9,37 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { Close, Search } from "@navikt/ds-icons";
 import cl from "classnames";
-import React, { forwardRef, useCallback, useEffect, useRef, useState, } from "react";
-import mergeRefs from "react-merge-refs";
-import { BodyShort, Label, omit, useEventListener } from "../..";
-import { useSearchField } from "./useSearchField";
+import React, { forwardRef } from "react";
+import { BodyShort, Label, omit } from "../..";
+import ErrorMessage from "../ErrorMessage";
+import { useFormField } from "../useFormField";
+import SearchFieldButton from "./SearchFieldButton";
+import SearchFieldClearButton from "./SearchFieldClearButton";
+import SearchFieldInput from "./SearchFieldInput";
+export const SearchFieldContext = React.createContext(null);
 const SearchField = forwardRef((props, ref) => {
-    const { inputProps, size, inputDescriptionId } = useSearchField(props, "searchfield");
-    const { className, hideLabel, label, description, value, clearButtonLabel, onClear, inverted = false, clearButton = true } = props, rest = __rest(props, ["className", "hideLabel", "label", "description", "value", "clearButtonLabel", "onClear", "inverted", "clearButton"]);
-    const [controlledValue, setControlledValue] = useState(value !== null && value !== void 0 ? value : "");
-    const searchRef = useRef(null);
-    const mergedRef = mergeRefs([searchRef, ref]);
-    const [wrapperRef, setWrapperRef] = useState(null);
-    const handleChange = useCallback((v) => {
-        var _a;
-        if (searchRef.current && value === undefined) {
-            searchRef.current.value = v;
-            setControlledValue(v);
-        }
-        (_a = props === null || props === void 0 ? void 0 : props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v);
-    }, [props, value]);
-    const handleClear = useCallback(() => {
-        var _a, _b;
-        onClear === null || onClear === void 0 ? void 0 : onClear();
-        handleChange("");
-        searchRef.current && ((_b = (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a));
-    }, [handleChange, onClear]);
-    useEventListener("keydown", useCallback((e) => {
-        if (e.key === "Escape") {
-            e.preventDefault();
-            handleClear();
-        }
-    }, [handleClear]), wrapperRef);
-    useEffect(() => {
-        value !== undefined && setControlledValue(value);
-    }, [value]);
-    return (React.createElement("div", { ref: setWrapperRef, className: cl(className, "navds-form-field", `navds-form-field--${size !== null && size !== void 0 ? size : "medium"}`, "navds-search-field", {
+    const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = useFormField(props, "searchfield");
+    const { className, hideLabel, children, label, description, error } = props, rest = __rest(props, ["className", "hideLabel", "children", "label", "description", "error"]);
+    return (React.createElement("div", Object.assign({ ref: ref }, omit(rest, ["id", "error", "errorId", "size", "disabled"]), { className: cl(className, "navds-form-field", `navds-form-field--${size !== null && size !== void 0 ? size : "medium"}`, "navds-search-field", {
+            "navds-search-field--error": hasError,
             "navds-search-field--disabled": !!inputProps.disabled,
-            "navds-search-field--inverted": inverted,
-        }) },
+        }) }),
         React.createElement(Label, { htmlFor: inputProps.id, size: size, as: "label", className: cl("navds-text-field__label", {
                 "navds-sr-only": hideLabel,
             }) }, label),
         !!description && (React.createElement(BodyShort, { as: "div", className: cl("navds-text-field__description", {
                 "navds-sr-only": hideLabel,
             }), id: inputDescriptionId, size: size }, description)),
-        React.createElement("div", { "data-value": !!controlledValue, className: "navds-search-field__input-wrapper" },
-            React.createElement("span", { className: "navds-search-field__input-icon" },
-                React.createElement(Search, { "aria-hidden": true })),
-            React.createElement("input", Object.assign({ ref: mergedRef }, omit(rest, ["size"]), inputProps, (props.value !== undefined && { value: props.value }), { onChange: (e) => handleChange(e.target.value), type: "search", role: "searchbox", className: cl(className, "navds-search-field__input", "navds-text-field__input", "navds-body-short", `navds-body-${size !== null && size !== void 0 ? size : "medium"}`) })),
-            controlledValue && clearButton && (React.createElement("button", { onClick: () => handleClear(), className: "navds-search-field__clear-button" },
-                React.createElement("span", { className: "navds-sr-only" }, clearButtonLabel ? clearButtonLabel : "Slett tekst i felt"),
-                React.createElement(Close, { "aria-hidden": true }))))));
+        React.createElement("div", { className: "navds-search-field__input-wrapper" },
+            React.createElement(SearchFieldContext.Provider, { value: {
+                    inputProps,
+                    size,
+                } }, children)),
+        React.createElement("div", { id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && React.createElement(ErrorMessage, { size: size }, error))));
 });
+SearchField.Button = SearchFieldButton;
+SearchField.Clear = SearchFieldClearButton;
+SearchField.Input = SearchFieldInput;
 export default SearchField;
 //# sourceMappingURL=SearchField.js.map

package/esm/form/search-field/SearchField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchField.js","sourceRoot":"","sources":["../../../src/form/search-field/SearchField.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SearchField.js","sourceRoot":"","sources":["../../../src/form/search-field/SearchField.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAkB,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,iBAA4C,MAAM,qBAAqB,CAAC;AAC/E,OAAO,sBAEN,MAAM,0BAA0B,CAAC;AAClC,OAAO,gBAA0C,MAAM,oBAAoB,CAAC;AAY5E,MAAM,CAAC,MAAM,kBAAkB,GAAG,KAAK,CAAC,aAAa,CACnD,IAAI,CACL,CAAC;AA4BF,MAAM,WAAW,GAAG,UAAU,CAC5B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACb,MAAM,EACJ,UAAU,EACV,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,kBAAkB,GACnB,GAAG,YAAY,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IAEvC,MAAM,EACJ,SAAS,EACT,SAAS,EACT,QAAQ,EACR,KAAK,EACL,WAAW,EACX,KAAK,KAEH,KAAK,EADJ,IAAI,UACL,KAAK,EARH,uEAQL,CAAQ,CAAC;IAEV,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,IACJ,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC,IAC9D,SAAS,EAAE,EAAE,CACX,SAAS,EACT,kBAAkB,EAClB,qBAAqB,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,QAAQ,EAAE,EACvC,oBAAoB,EACpB;YACE,2BAA2B,EAAE,QAAQ;YACrC,8BAA8B,EAAE,CAAC,CAAC,UAAU,CAAC,QAAQ;SACtD,CACF;QAED,oBAAC,KAAK,IACJ,OAAO,EAAE,UAAU,CAAC,EAAE,EACtB,IAAI,EAAE,IAAI,EACV,EAAE,EAAC,OAAO,EACV,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE;gBACvC,eAAe,EAAE,SAAS;aAC3B,CAAC,IAED,KAAK,CACA;QACP,CAAC,CAAC,WAAW,IAAI,CAChB,oBAAC,SAAS,IACR,EAAE,EAAC,KAAK,EACR,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE;gBAC7C,eAAe,EAAE,SAAS;aAC3B,CAAC,EACF,EAAE,EAAE,kBAAkB,EACtB,IAAI,EAAE,IAAI,IAET,WAAW,CACF,CACb;QACD,6BAAK,SAAS,EAAC,mCAAmC;YAChD,oBAAC,kBAAkB,CAAC,QAAQ,IAC1B,KAAK,EAAE;oBACL,UAAU;oBACV,IAAI;iBACL,IAEA,QAAQ,CACmB,CAC1B;QACN,6BAAK,EAAE,EAAE,OAAO,mBAAgB,oBAAoB,eAAW,QAAQ,IACpE,YAAY,IAAI,oBAAC,YAAY,IAAC,IAAI,EAAE,IAAI,IAAG,KAAK,CAAgB,CAC7D,CACF,CACP,CAAC;AACJ,CAAC,CACsB,CAAC;AAE1B,WAAW,CAAC,MAAM,GAAG,iBAAiB,CAAC;AACvC,WAAW,CAAC,KAAK,GAAG,sBAAsB,CAAC;AAC3C,WAAW,CAAC,KAAK,GAAG,gBAAgB,CAAC;AAErC,eAAe,WAAW,CAAC"}

package/esm/form/search-field/SearchFieldButton.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { ButtonProps } from "../..";
+export interface SearchFieldButtonProps extends Omit<ButtonProps, "size"> {
+    /**
+     * Button text
+     * @example <Search /> <span>Søk</span>
+     */
+    children: React.ReactNode;
+    /**
+     * Changes design and interactions
+     * @default "primary"
+     */
+    variant?: "primary" | "secondary";
+}
+export declare type SearchFieldButtonType = React.ForwardRefExoticComponent<SearchFieldButtonProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SearchFieldButton: SearchFieldButtonType;
+export default SearchFieldButton;

package/esm/form/search-field/SearchFieldButton.js

@@ -0,0 +1,27 @@
+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 { SearchFieldContext } from "./SearchField";
+import { Button } from "../..";
+const SearchFieldButton = forwardRef((_a, ref) => {
+    var { className, variant = "primary", disabled } = _a, rest = __rest(_a, ["className", "variant", "disabled"]);
+    const searchField = useContext(SearchFieldContext);
+    if (searchField === null) {
+        console.warn("SearchFieldButton has to be wrapped in <SearchField />");
+        return null;
+    }
+    const { size, inputProps } = searchField;
+    return (React.createElement(Button, Object.assign({ ref: ref, className: cl(className, "navds-search-field__button") }, rest, { size: size, variant: variant, disabled: disabled !== null && disabled !== void 0 ? disabled : inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled })));
+});
+export default SearchFieldButton;
+//# sourceMappingURL=SearchFieldButton.js.map

package/esm/form/search-field/SearchFieldButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchFieldButton.js","sourceRoot":"","sources":["../../../src/form/search-field/SearchFieldButton.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,MAAM,EAAe,MAAM,OAAO,CAAC;AAmB5C,MAAM,iBAAiB,GAA0B,UAAU,CACzD,CAAC,EAAqD,EAAE,GAAG,EAAE,EAAE;QAA9D,EAAE,SAAS,EAAE,OAAO,GAAG,SAAS,EAAE,QAAQ,OAAW,EAAN,IAAI,cAAnD,oCAAqD,CAAF;IAClD,MAAM,WAAW,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAEnD,IAAI,WAAW,KAAK,IAAI,EAAE;QACxB,OAAO,CAAC,IAAI,CAAC,wDAAwD,CAAC,CAAC;QACvE,OAAO,IAAI,CAAC;KACb;IAED,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,WAAW,CAAC;IAEzC,OAAO,CACL,oBAAC,MAAM,kBACL,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,4BAA4B,CAAC,IAClD,IAAI,IACR,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ,IAC1C,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/esm/form/search-field/SearchFieldClearButton.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { ButtonProps } from "../..";
+export interface SearchFieldClearButtonProps extends Omit<ButtonProps, "size"> {
+    /**
+     * Button text
+     * @example <Close /> <span>Søk</span>
+     */
+    children: React.ReactNode;
+    /**
+     * Changes design and interactions
+     * @default "secondary"
+     */
+    variant?: "primary" | "secondary";
+}
+export declare type SearchFieldClearButtonType = React.ForwardRefExoticComponent<SearchFieldClearButtonProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SearchFieldClearButton: SearchFieldClearButtonType;
+export default SearchFieldClearButton;

package/esm/form/search-field/SearchFieldClearButton.js

@@ -0,0 +1,27 @@
+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 { SearchFieldContext } from "./SearchField";
+import { Button } from "../..";
+const SearchFieldClearButton = forwardRef((_a, ref) => {
+    var { className, variant = "secondary", disabled } = _a, rest = __rest(_a, ["className", "variant", "disabled"]);
+    const searchField = useContext(SearchFieldContext);
+    if (searchField === null) {
+        console.warn("SearchFieldClearButton has to be wrapped in <SearchField />");
+        return null;
+    }
+    const { size, inputProps } = searchField;
+    return (React.createElement(Button, Object.assign({}, rest, { ref: ref, className: cl(className, "navds-search-field__clear-button"), size: size, variant: variant, disabled: disabled !== null && disabled !== void 0 ? disabled : inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled })));
+});
+export default SearchFieldClearButton;
+//# sourceMappingURL=SearchFieldClearButton.js.map

package/esm/form/search-field/SearchFieldClearButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchFieldClearButton.js","sourceRoot":"","sources":["../../../src/form/search-field/SearchFieldClearButton.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,MAAM,EAAe,MAAM,OAAO,CAAC;AAmB5C,MAAM,sBAAsB,GAA+B,UAAU,CACnE,CAAC,EAAuD,EAAE,GAAG,EAAE,EAAE;QAAhE,EAAE,SAAS,EAAE,OAAO,GAAG,WAAW,EAAE,QAAQ,OAAW,EAAN,IAAI,cAArD,oCAAuD,CAAF;IACpD,MAAM,WAAW,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAEnD,IAAI,WAAW,KAAK,IAAI,EAAE;QACxB,OAAO,CAAC,IAAI,CACV,6DAA6D,CAC9D,CAAC;QACF,OAAO,IAAI,CAAC;KACb;IAED,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,WAAW,CAAC;IAEzC,OAAO,CACL,oBAAC,MAAM,oBACD,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,kCAAkC,CAAC,EAC5D,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ,IAC1C,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/esm/form/search-field/SearchFieldInput.d.ts

@@ -0,0 +1,6 @@
+import React, { InputHTMLAttributes } from "react";
+export interface SearchFieldInputProps extends InputHTMLAttributes<HTMLInputElement> {
+}
+export declare type SearchFieldInputType = React.ForwardRefExoticComponent<SearchFieldInputProps & React.RefAttributes<HTMLInputElement>>;
+declare const SearchFieldInput: SearchFieldInputType;
+export default SearchFieldInput;

package/esm/form/search-field/SearchFieldInput.js

@@ -0,0 +1,26 @@
+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 { SearchFieldContext } from "./SearchField";
+const SearchFieldInput = forwardRef((_a, ref) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    const searchField = useContext(SearchFieldContext);
+    if (searchField === null) {
+        console.warn("SearchFieldInput has to be wrapped in <SearchField />");
+        return null;
+    }
+    const { size, inputProps } = searchField;
+    return (React.createElement("input", Object.assign({}, rest, inputProps, { type: "search", role: "searchbox", ref: ref, className: cl(className, "navds-search-field__input", "navds-text-field__input", "navds-body-short", `navds-body-${size !== null && size !== void 0 ? size : "medium"}`) })));
+});
+export default SearchFieldInput;
+//# sourceMappingURL=SearchFieldInput.js.map

package/esm/form/search-field/SearchFieldInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchFieldInput.js","sourceRoot":"","sources":["../../../src/form/search-field/SearchFieldInput.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAuB,UAAU,EAAE,MAAM,OAAO,CAAC;AAC3E,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AASnD,MAAM,gBAAgB,GAAyB,UAAU,CACvD,CAAC,EAAsB,EAAE,GAAG,EAAE,EAAE;QAA/B,EAAE,SAAS,OAAW,EAAN,IAAI,cAApB,aAAsB,CAAF;IACnB,MAAM,WAAW,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAEnD,IAAI,WAAW,KAAK,IAAI,EAAE;QACxB,OAAO,CAAC,IAAI,CAAC,uDAAuD,CAAC,CAAC;QACtE,OAAO,IAAI,CAAC;KACb;IAED,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,WAAW,CAAC;IAEzC,OAAO,CACL,+CACM,IAAI,EACJ,UAAU,IACd,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,WAAW,EAChB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,SAAS,EACT,2BAA2B,EAC3B,yBAAyB,EACzB,kBAAkB,EAClB,cAAc,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,QAAQ,EAAE,CACjC,IACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/esm/modal/Modal.d.ts

@@ -23,6 +23,11 @@ export interface ModalProps {
      * User defined classname for modal
      */
     className?: string;
+    /**
+     * Toggles addition of a X-button on modal
+     * @default true
+     */
+    closeButton?: boolean;
 }
 interface ModalComponent extends ModalLifecycle, React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<ReactModal>> {
     Content: ModalContentType;

package/esm/modal/Modal.js

@@ -17,7 +17,7 @@ import { Close } from "@navikt/ds-icons";
 import { Button } from "..";
 import ModalContent from "./ModalContent";
 const Modal = forwardRef((_a, ref) => {
-    var { children, open, onClose, className, shouldCloseOnOverlayClick = true } = _a, rest = __rest(_a, ["children", "open", "onClose", "className", "shouldCloseOnOverlayClick"]);
+    var { children, open, onClose, className, shouldCloseOnOverlayClick = true, closeButton = true } = _a, rest = __rest(_a, ["children", "open", "onClose", "className", "shouldCloseOnOverlayClick", "closeButton"]);
     const modalRef = useRef(null);
     const mergedRef = mergeRefs([modalRef, ref]);
     const buttonRef = useRef(null);
@@ -31,10 +31,10 @@ const Modal = forwardRef((_a, ref) => {
     };
     return (React.createElement(ReactModal, Object.assign({}, rest, { isOpen: open, ref: mergedRef, className: cl("navds-modal", className), overlayClassName: "navds-modal__overlay", shouldCloseOnOverlayClick: shouldCloseOnOverlayClick, onRequestClose: (e) => onModalCloseRequest(e) }),
         children,
-        React.createElement(Button, { className: cl("navds-modal__button", {
+        closeButton && (React.createElement(Button, { className: cl("navds-modal__button", {
                 "navds-modal__button--shake": shouldCloseOnOverlayClick,
-            }), size: "small", variant: "secondary", ref: buttonRef, "aria-label": "lukk modalvindu", onClick: onClose },
-            React.createElement(Close, { title: "X-ikon for \u00E5 lukke modal" }))));
+            }), size: "small", variant: "tertiary", ref: buttonRef, onClick: onClose },
+            React.createElement(Close, { title: "Lukk modalvindu" })))));
 });
 Modal.setAppElement = (element) => ReactModal.setAppElement(element);
 Modal.Content = ModalContent;

package/esm/modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AAC5B,OAAO,YAAkC,MAAM,gBAAgB,CAAC;AAsChE,MAAM,KAAK,GAAG,UAAU,CACtB,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EACT,yBAAyB,GAAG,IAAI,OAEjC,EADI,IAAI,cANT,yEAOC,CADQ;IAIT,MAAM,QAAQ,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC;IAC7C,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAElD,MAAM,mBAAmB,GAAG,CAAC,CAAC,EAAE,EAAE;QAChC,IAAI,yBAAyB,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS,EAAE;YACrD,OAAO,EAAE,CAAC;SACX;aAAM,IAAI,SAAS,CAAC,OAAO,EAAE;YAC5B,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;SAC3B;IACH,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,oBACL,IAAI,IACR,MAAM,EAAE,IAAI,EACZ,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,EACvC,gBAAgB,EAAC,sBAAsB,EACvC,yBAAyB,EAAE,yBAAyB,EACpD,cAAc,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAC;QAE5C,QAAQ;QACT,oBAAC,MAAM,IACL,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE;gBACnC,4BAA4B,EAAE,yBAAyB;aACxD,CAAC,EACF,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,WAAW,EACnB,GAAG,EAAE,SAAS,gBACH,iBAAiB,EAC5B,OAAO,EAAE,OAAO;YAEhB,oBAAC,KAAK,IAAC,KAAK,EAAC,+BAA0B,GAAG,CACnC,CACE,CACd,CAAC;AACJ,CAAC,CACgB,CAAC;AAEpB,KAAK,CAAC,aAAa,GAAG,CAAC,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AACrE,KAAK,CAAC,OAAO,GAAG,YAAY,CAAC;AAE7B,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AAC5B,OAAO,YAAkC,MAAM,gBAAgB,CAAC;AA2ChE,MAAM,KAAK,GAAG,UAAU,CACtB,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EACT,yBAAyB,GAAG,IAAI,EAChC,WAAW,GAAG,IAAI,OAEnB,EADI,IAAI,cAPT,wFAQC,CADQ;IAIT,MAAM,QAAQ,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC;IAC7C,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAElD,MAAM,mBAAmB,GAAG,CAAC,CAAC,EAAE,EAAE;QAChC,IAAI,yBAAyB,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS,EAAE;YACrD,OAAO,EAAE,CAAC;SACX;aAAM,IAAI,SAAS,CAAC,OAAO,EAAE;YAC5B,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;SAC3B;IACH,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,oBACL,IAAI,IACR,MAAM,EAAE,IAAI,EACZ,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,EACvC,gBAAgB,EAAC,sBAAsB,EACvC,yBAAyB,EAAE,yBAAyB,EACpD,cAAc,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAC;QAE5C,QAAQ;QACR,WAAW,IAAI,CACd,oBAAC,MAAM,IACL,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE;gBACnC,4BAA4B,EAAE,yBAAyB;aACxD,CAAC,EACF,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,EAClB,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,OAAO;YAEhB,oBAAC,KAAK,IAAC,KAAK,EAAC,iBAAiB,GAAG,CAC1B,CACV,CACU,CACd,CAAC;AACJ,CAAC,CACgB,CAAC;AAEpB,KAAK,CAAC,aAAa,GAAG,CAAC,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AACrE,KAAK,CAAC,OAAO,GAAG,YAAY,CAAC;AAE7B,eAAe,KAAK,CAAC"}

package/esm/util/index.d.ts

@@ -1,8 +1,3 @@
 export * from "./OverridableComponent";
 export * from "./useId";
 export declare const omit: (obj: object, props: string[]) => {};
-export interface ListenerT {
-    addEventListener(name: string, handler: (event?: any) => void, ...args: any[]): any;
-    removeEventListener(name: string, handler: (event?: any) => void, ...args: any[]): any;
-}
-export declare const useEventListener: <T extends ListenerT>(name: Parameters<ListenerT["addEventListener"]>[0], handler: Parameters<ListenerT["addEventListener"]>[1], target?: Window | T | null) => void;

package/esm/util/index.js

@@ -1,19 +1,6 @@
-import { useEffect } from "react";
 export * from "./OverridableComponent";
 export * from "./useId";
 export const omit = (obj, props) => Object.entries(obj)
     .filter(([key]) => !props.includes(key))
     .reduce((obj, [key, value]) => (Object.assign(Object.assign({}, obj), { [key]: value })), {});
-/* https://github.com/streamich/react-use/blob/master/src/useEvent.ts */
-export const useEventListener = (name, handler, target = window) => {
-    useEffect(() => {
-        if (!target) {
-            return;
-        }
-        target === null || target === void 0 ? void 0 : target.addEventListener(name, handler);
-        return () => {
-            target === null || target === void 0 ? void 0 : target.addEventListener(name, handler);
-        };
-    }, [name, handler, target]);
-};
 //# sourceMappingURL=index.js.map

package/esm/util/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/util/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,cAAc,wBAAwB,CAAC;AACvC,cAAc,SAAS,CAAC;AAExB,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,GAAW,EAAE,KAAe,EAAE,EAAE,CACnD,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;KAChB,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;KACvC,MAAM,CACL,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,iCAClB,GAAG,KACN,CAAC,GAAG,CAAC,EAAE,KAAK,IACZ,EACF,EAAE,CACH,CAAC;AAgBN,wEAAwE;AACxE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,IAAkD,EAClD,OAAqD,EACrD,SAA4B,MAAM,EAC5B,EAAE;IACR,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM,EAAE;YACX,OAAO;SACR;QACD,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,gBAAgB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACxC,OAAO,GAAG,EAAE;YACV,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,gBAAgB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAC1C,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;AAC9B,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/util/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,SAAS,CAAC;AAExB,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,GAAW,EAAE,KAAe,EAAE,EAAE,CACnD,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;KAChB,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;KACvC,MAAM,CACL,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,iCAClB,GAAG,KACN,CAAC,GAAG,CAAC,EAAE,KAAK,IACZ,EACF,EAAE,CACH,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.14.10-next.0",
+  "version": "0.14.13",
   "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.2",
+    "@navikt/ds-icons": "^0.7.3",
     "@popperjs/core": "^2.10.1",
     "classnames": "^2.2.6",
     "react-collapse": "^5.1.0",
@@ -64,5 +64,5 @@
     "@types/react": "^17.0.30",
     "react": "^17.0.0"
   },
-  "gitHead": "d9174b43520c8691e6f539ed7c76554fb50dadd0"
+  "gitHead": "74d0b0cf1f0d0becc7b1b2768bddcc007b00e432"
 }

package/src/button/Button.tsx

@@ -1,6 +1,8 @@
-import React, { forwardRef } from "react";
+import React, { useRef, useState, forwardRef } from "react";
+import mergeRefs from "react-merge-refs";
 import cl from "classnames";
-import { BodyShort, OverridableComponent } from "../";
+import { BodyShort, OverridableComponent, Loader } from "../";
+import { useClientLayoutEffect } from "../util";
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -24,6 +26,11 @@ export interface ButtonProps
    * @default false
    */
   disabled?: boolean;
+  /**
+   * Replaces button content with a Loader component, keeps width
+   * @default false
+   */
+  loading?: boolean;
 }
 
 const Button: OverridableComponent<ButtonProps, HTMLButtonElement> = forwardRef(
@@ -34,25 +41,55 @@ const Button: OverridableComponent<ButtonProps, HTMLButtonElement> = forwardRef(
       className,
       children,
       size = "medium",
+      loading = false,
+      disabled,
       ...rest
     },
     ref
-  ) => (
-    <Component
-      {...rest}
-      ref={ref}
-      className={cl(
-        className,
-        "navds-button",
-        `navds-button--${variant}`,
-        `navds-button--${size}`
-      )}
-    >
-      <BodyShort as="span" className="navds-button__inner" size={size}>
-        {children}
-      </BodyShort>
-    </Component>
-  )
+  ) => {
+    const buttonRef = useRef<HTMLButtonElement | null>(null);
+    const mergedRef = mergeRefs([buttonRef, ref]);
+    const [widthOverride, setWidthOverride] = useState<number>();
+
+    useClientLayoutEffect(() => {
+      if (loading) {
+        const requestID = window.requestAnimationFrame(() => {
+          setWidthOverride(buttonRef?.current?.getBoundingClientRect()?.width);
+        });
+        return () => {
+          setWidthOverride(undefined);
+          cancelAnimationFrame(requestID);
+        };
+      }
+    }, [loading, children]);
+
+    return (
+      <Component
+        {...rest}
+        ref={mergedRef}
+        className={cl(
+          className,
+          "navds-button",
+          `navds-button--${variant}`,
+          `navds-button--${size}`,
+          {
+            "navds-button--loading": widthOverride,
+          }
+        )}
+        style={{ width: widthOverride }}
+        disabled={disabled ?? widthOverride ? true : undefined}
+      >
+        <BodyShort
+          as="span"
+          className="navds-button__inner"
+          size={size}
+          aria-live="polite"
+        >
+          {widthOverride ? <Loader size={size} /> : children}
+        </BodyShort>
+      </Component>
+    );
+  }
 );
 
 export default Button;

package/src/button/stories/button.stories.mdx

@@ -45,26 +45,32 @@ Button har to størrelser: Default 48px min-height og small 32px min-height
   </Button>
 </Canvas>
 
-## Med ikon eller `<Loader />`
+## Loading
 
-Hvis man setter ikoner (svg) eller `<Loader />` rett på button vil størrelsen
-bli justert automatisk og sentrert.
+Button har en egen `loading`-prop setter knappen til disabled og viser `Loader`.
+Button width bli automatisk justert basert på innholdet sin bredde.
 
 <Canvas>
-  <Button>
-    <Loader /> Laster... <Loader />
+  <Button loading variant="primary">
+    Primary
   </Button>
-  <Button size="small">
-    <Loader />
-    Laster...
-    <Loader />
+  <Button loading variant="secondary">
+    Secondary
   </Button>
+</Canvas>
+
+## Med ikon
+
+Hvis man setter ikoner (svg) rett på button vil størrelsen
+bli justert automatisk og sentrert.
+
+<Canvas>
   <Button>
-    <Success /> Laster... <Success />
+    <Success /> Knapp <Success />
   </Button>
   <Button size="small">
     <Success />
-    Laster...
+    Knapp
     <Success />
   </Button>
 </Canvas>