@navikt/ds-react 0.17.17 → 0.17.20

package/cjs/form/search/Search.js

@@ -48,34 +48,27 @@ const useSearch_1 = require("./useSearch");
 exports.SearchContext = react_1.default.createContext(null);
 const Search = (0, react_1.forwardRef)((props, ref) => {
     const { inputProps, size = "medium", inputDescriptionId } = (0, useSearch_1.useSearch)(props, "searchfield");
-    const { className, hideLabel = true, label, description, value, clearButtonLabel, onClear, clearButton = true, children, onSearch, variant = "tertiary" } = props, rest = __rest(props, ["className", "hideLabel", "label", "description", "value", "clearButtonLabel", "onClear", "clearButton", "children", "onSearch", "variant"]);
+    const { className, hideLabel = true, label, description, value, clearButtonLabel, onClear, clearButton = true, children, onSearch, variant = "primary", defaultValue, onChange } = props, rest = __rest(props, ["className", "hideLabel", "label", "description", "value", "clearButtonLabel", "onClear", "clearButton", "children", "onSearch", "variant", "defaultValue", "onChange"]);
     const searchRef = (0, react_1.useRef)(null);
     const mergedRef = (0, react_merge_refs_1.default)([searchRef, ref]);
     const [wrapperRef, setWrapperRef] = (0, react_1.useState)(null);
-    const [controlledValue, setControlledValue] = (0, react_1.useState)(value !== null && value !== void 0 ? value : "");
+    const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : "");
     const handleChange = (0, react_1.useCallback)((v) => {
-        var _a;
-        searchRef.current && value === undefined && setControlledValue(v);
-        (_a = props === null || props === void 0 ? void 0 : props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v);
-    }, [props, value]);
+        value === undefined && setInternalValue(v);
+        onChange === null || onChange === void 0 ? void 0 : onChange(v);
+    }, [onChange, value]);
     const handleClear = (0, react_1.useCallback)((event) => {
         var _a, _b;
         onClear === null || onClear === void 0 ? void 0 : onClear(event);
         handleChange("");
-        if (searchRef.current && value === undefined) {
-            searchRef.current.value = "";
-        }
         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, value]);
+    }, [handleChange, onClear]);
     (0, __1.useEventListener)("keydown", (0, react_1.useCallback)((e) => {
         if (e.key === "Escape") {
             e.preventDefault();
             handleClear({ trigger: "Escape", event: e });
         }
     }, [handleClear]), wrapperRef);
-    (0, react_1.useEffect)(() => {
-        value !== undefined && setControlledValue(value);
-    }, [value]);
     return (react_1.default.createElement("div", { ref: setWrapperRef, className: (0, classnames_1.default)(className, "navds-form-field", `navds-form-field--${size}`, "navds-search", {
             "navds-search--disabled": !!inputProps.disabled,
         }) },
@@ -87,16 +80,17 @@ const Search = (0, react_1.forwardRef)((props, ref) => {
             }), id: inputDescriptionId, size: size }, description)),
         react_1.default.createElement("div", { className: "navds-search__wrapper" },
             react_1.default.createElement("div", { className: "navds-search__wrapper-inner" },
-                react_1.default.createElement("input", Object.assign({ ref: mergedRef }, (0, __1.omit)(rest, ["size"]), inputProps, (props.value !== undefined && { value: props.value }), { onChange: (e) => handleChange(e.target.value), type: "search", role: "searchbox", className: (0, classnames_1.default)(className, "navds-search__input", "navds-text-field__input", "navds-body-short", `navds-body-${size !== null && size !== void 0 ? size : "medium"}`) })),
-                controlledValue && clearButton && (react_1.default.createElement("button", { type: "button", onClick: (e) => handleClear({ trigger: "Click", event: e }), className: "navds-search__button-clear" },
+                variant === "simple" && (react_1.default.createElement(ds_icons_1.Search, { "aria-hidden": true, className: "navds-search__search-icon" })),
+                react_1.default.createElement("input", Object.assign({ ref: mergedRef }, (0, __1.omit)(rest, ["size"]), inputProps, { value: value !== null && value !== void 0 ? value : internalValue, onChange: (e) => handleChange(e.target.value), type: "search", role: "searchbox", className: (0, classnames_1.default)(className, "navds-search__input", `navds-search__input--${variant}`, "navds-text-field__input", "navds-body-short", `navds-body-${size}`) })),
+                (value !== null && value !== void 0 ? value : internalValue) && clearButton && (react_1.default.createElement("button", { type: "button", onClick: (e) => handleClear({ trigger: "Click", event: e }), className: "navds-search__button-clear" },
                     react_1.default.createElement("span", { className: "navds-sr-only" }, clearButtonLabel ? clearButtonLabel : "Tøm"),
                     react_1.default.createElement(ds_icons_1.Close, { "aria-hidden": true })))),
             react_1.default.createElement(exports.SearchContext.Provider, { value: {
                     size,
                     disabled: inputProps.disabled,
                     variant,
-                    onSearch: () => onSearch === null || onSearch === void 0 ? void 0 : onSearch(controlledValue),
-                } }, children ? children : react_1.default.createElement(SearchButton_1.default, null)))));
+                    onSearch: () => onSearch === null || onSearch === void 0 ? void 0 : onSearch(value !== null && value !== void 0 ? value : internalValue),
+                } }, children ? children : variant !== "simple" && react_1.default.createElement(SearchButton_1.default, null)))));
 });
 Search.Button = SearchButton_1.default;
 exports.default = Search;

package/cjs/form/search/SearchButton.js

@@ -51,7 +51,7 @@ const SearchButton = (0, react_1.forwardRef)((_a, ref) => {
         return null;
     }
     const { size, variant, onSearch } = context;
-    return (react_1.default.createElement(__1.Button, Object.assign({ type: "submit" }, rest, { ref: ref, size: size, variant: variant, className: (0, classnames_1.default)("navds-search__button-search", className), disabled: (_b = context === null || context === void 0 ? void 0 : context.disabled) !== null && _b !== void 0 ? _b : disabled, onClick: (e) => {
+    return (react_1.default.createElement(__1.Button, Object.assign({ type: "submit" }, rest, { ref: ref, size: size, variant: variant === "secondary" ? "secondary" : "primary", className: (0, classnames_1.default)("navds-search__button-search", className), disabled: (_b = context === null || context === void 0 ? void 0 : context.disabled) !== null && _b !== void 0 ? _b : disabled, onClick: (e) => {
             onSearch === null || onSearch === void 0 ? void 0 : onSearch();
             onClick === null || onClick === void 0 ? void 0 : onClick(e);
         } }),

package/esm/form/search/Search.d.ts

@@ -44,9 +44,9 @@ export interface SearchProps extends Omit<FormFieldProps, "error" | "errorId">,
     clearButton?: boolean;
     /**
      * Changes button-variant
-     * @default "tertiary"
+     * @default "primary"
      */
-    variant?: "tertiary" | "primary";
+    variant?: "primary" | "secondary" | "simple";
 }
 interface SearchComponent extends React.ForwardRefExoticComponent<SearchProps & React.RefAttributes<HTMLDivElement>> {
     Button: SearchButtonType;
@@ -54,8 +54,8 @@ interface SearchComponent extends React.ForwardRefExoticComponent<SearchProps &
 export interface SearchContextProps {
     disabled?: boolean;
     size: "medium" | "small";
-    variant?: "tertiary" | "primary";
-    onSearch?: () => void;
+    variant: "primary" | "secondary" | "simple";
+    onSearch: () => void;
 }
 export declare const SearchContext: React.Context<SearchContextProps | null>;
 declare const Search: SearchComponent;

package/esm/form/search/Search.js

@@ -9,9 +9,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { Close } from "@navikt/ds-icons";
+import { Close, Search as SearchIcon } from "@navikt/ds-icons";
 import cl from "classnames";
-import React, { forwardRef, useCallback, useEffect, useRef, useState, } from "react";
+import React, { forwardRef, useCallback, useRef, useState, } from "react";
 import mergeRefs from "react-merge-refs";
 import { BodyShort, Label, omit, useEventListener } from "../..";
 import SearchButton from "./SearchButton";
@@ -19,34 +19,27 @@ import { useSearch } from "./useSearch";
 export const SearchContext = React.createContext(null);
 const Search = forwardRef((props, ref) => {
     const { inputProps, size = "medium", inputDescriptionId } = useSearch(props, "searchfield");
-    const { className, hideLabel = true, label, description, value, clearButtonLabel, onClear, clearButton = true, children, onSearch, variant = "tertiary" } = props, rest = __rest(props, ["className", "hideLabel", "label", "description", "value", "clearButtonLabel", "onClear", "clearButton", "children", "onSearch", "variant"]);
+    const { className, hideLabel = true, label, description, value, clearButtonLabel, onClear, clearButton = true, children, onSearch, variant = "primary", defaultValue, onChange } = props, rest = __rest(props, ["className", "hideLabel", "label", "description", "value", "clearButtonLabel", "onClear", "clearButton", "children", "onSearch", "variant", "defaultValue", "onChange"]);
     const searchRef = useRef(null);
     const mergedRef = mergeRefs([searchRef, ref]);
     const [wrapperRef, setWrapperRef] = useState(null);
-    const [controlledValue, setControlledValue] = useState(value !== null && value !== void 0 ? value : "");
+    const [internalValue, setInternalValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : "");
     const handleChange = useCallback((v) => {
-        var _a;
-        searchRef.current && value === undefined && setControlledValue(v);
-        (_a = props === null || props === void 0 ? void 0 : props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v);
-    }, [props, value]);
+        value === undefined && setInternalValue(v);
+        onChange === null || onChange === void 0 ? void 0 : onChange(v);
+    }, [onChange, value]);
     const handleClear = useCallback((event) => {
         var _a, _b;
         onClear === null || onClear === void 0 ? void 0 : onClear(event);
         handleChange("");
-        if (searchRef.current && value === undefined) {
-            searchRef.current.value = "";
-        }
         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, value]);
+    }, [handleChange, onClear]);
     useEventListener("keydown", useCallback((e) => {
         if (e.key === "Escape") {
             e.preventDefault();
             handleClear({ trigger: "Escape", event: e });
         }
     }, [handleClear]), wrapperRef);
-    useEffect(() => {
-        value !== undefined && setControlledValue(value);
-    }, [value]);
     return (React.createElement("div", { ref: setWrapperRef, className: cl(className, "navds-form-field", `navds-form-field--${size}`, "navds-search", {
             "navds-search--disabled": !!inputProps.disabled,
         }) },
@@ -58,16 +51,17 @@ const Search = forwardRef((props, ref) => {
             }), id: inputDescriptionId, size: size }, description)),
         React.createElement("div", { className: "navds-search__wrapper" },
             React.createElement("div", { className: "navds-search__wrapper-inner" },
-                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__input", "navds-text-field__input", "navds-body-short", `navds-body-${size !== null && size !== void 0 ? size : "medium"}`) })),
-                controlledValue && clearButton && (React.createElement("button", { type: "button", onClick: (e) => handleClear({ trigger: "Click", event: e }), className: "navds-search__button-clear" },
+                variant === "simple" && (React.createElement(SearchIcon, { "aria-hidden": true, className: "navds-search__search-icon" })),
+                React.createElement("input", Object.assign({ ref: mergedRef }, omit(rest, ["size"]), inputProps, { value: value !== null && value !== void 0 ? value : internalValue, onChange: (e) => handleChange(e.target.value), type: "search", role: "searchbox", className: cl(className, "navds-search__input", `navds-search__input--${variant}`, "navds-text-field__input", "navds-body-short", `navds-body-${size}`) })),
+                (value !== null && value !== void 0 ? value : internalValue) && clearButton && (React.createElement("button", { type: "button", onClick: (e) => handleClear({ trigger: "Click", event: e }), className: "navds-search__button-clear" },
                     React.createElement("span", { className: "navds-sr-only" }, clearButtonLabel ? clearButtonLabel : "Tøm"),
                     React.createElement(Close, { "aria-hidden": true })))),
             React.createElement(SearchContext.Provider, { value: {
                     size,
                     disabled: inputProps.disabled,
                     variant,
-                    onSearch: () => onSearch === null || onSearch === void 0 ? void 0 : onSearch(controlledValue),
-                } }, children ? children : React.createElement(SearchButton, null)))));
+                    onSearch: () => onSearch === null || onSearch === void 0 ? void 0 : onSearch(value !== null && value !== void 0 ? value : internalValue),
+                } }, children ? children : variant !== "simple" && React.createElement(SearchButton, null)))));
 });
 Search.Button = SearchButton;
 export default Search;

package/esm/form/search/Search.js.map

@@ -1 +1 @@
-{"version":3,"file":"Search.js","sourceRoot":"","sources":["../../../src/form/search/Search.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Search.js","sourceRoot":"","sources":["../../../src/form/search/Search.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC/D,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EACZ,UAAU,EAEV,WAAW,EACX,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAEjE,OAAO,YAAkC,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAkExC,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,CAAC,aAAa,CAC9C,IAAI,CACL,CAAC;AAEF,MAAM,MAAM,GAAG,UAAU,CAAgC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACtE,MAAM,EAAE,UAAU,EAAE,IAAI,GAAG,QAAQ,EAAE,kBAAkB,EAAE,GAAG,SAAS,CACnE,KAAK,EACL,aAAa,CACd,CAAC;IAEF,MAAM,EACJ,SAAS,EACT,SAAS,GAAG,IAAI,EAChB,KAAK,EACL,WAAW,EACX,KAAK,EACL,gBAAgB,EAChB,OAAO,EACP,WAAW,GAAG,IAAI,EAClB,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,YAAY,EACZ,QAAQ,KAEN,KAAK,EADJ,IAAI,UACL,KAAK,EAfH,wKAeL,CAAQ,CAAC;IAEV,MAAM,SAAS,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IACxD,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC;IAC9C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC,CAAC;IAE1E,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,EAAE,CAAC,CAAC;IAEvE,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAS,EAAE,EAAE;QACZ,KAAK,KAAK,SAAS,IAAI,gBAAgB,CAAC,CAAC,CAAC,CAAC;QAC3C,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,CAAC;IAChB,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,KAAuB,EAAE,EAAE;;QAC1B,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,KAAK,CAAC,CAAC;QACjB,YAAY,CAAC,EAAE,CAAC,CAAC;QACjB,SAAS,CAAC,OAAO,KAAI,MAAA,MAAA,SAAS,CAAC,OAAO,0CAAE,KAAK,kDAAI,CAAA,CAAC;IACpD,CAAC,EACD,CAAC,YAAY,EAAE,OAAO,CAAC,CACxB,CAAC;IAEF,gBAAgB,CACd,SAAS,EACT,WAAW,CACT,CAAC,CAAC,EAAE,EAAE;QACJ,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;YACtB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,WAAW,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;SAC9C;IACH,CAAC,EACD,CAAC,WAAW,CAAC,CACd,EACD,UAAU,CACX,CAAC;IAEF,OAAO,CACL,6BACE,GAAG,EAAE,aAAa,EAClB,SAAS,EAAE,EAAE,CACX,SAAS,EACT,kBAAkB,EAClB,qBAAqB,IAAI,EAAE,EAC3B,cAAc,EACd;YACE,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,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,uBAAuB;YACpC,6BAAK,SAAS,EAAC,6BAA6B;gBACzC,OAAO,KAAK,QAAQ,IAAI,CACvB,oBAAC,UAAU,yBAAa,SAAS,EAAC,2BAA2B,GAAG,CACjE;gBACD,6CACE,GAAG,EAAE,SAAS,IACV,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,EACpB,UAAU,IACd,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,aAAa,EAC7B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC7C,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,WAAW,EAChB,SAAS,EAAE,EAAE,CACX,SAAS,EACT,qBAAqB,EACrB,wBAAwB,OAAO,EAAE,EACjC,yBAAyB,EACzB,kBAAkB,EAClB,cAAc,IAAI,EAAE,CACrB,IACD;gBACD,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,aAAa,CAAC,IAAI,WAAW,IAAI,CAC1C,gCACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAC3D,SAAS,EAAC,4BAA4B;oBAEtC,8BAAM,SAAS,EAAC,eAAe,IAC5B,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CACvC;oBACP,oBAAC,KAAK,0BAAe,CACd,CACV,CACG;YACN,oBAAC,aAAa,CAAC,QAAQ,IACrB,KAAK,EAAE;oBACL,IAAI;oBACJ,QAAQ,EAAE,UAAU,CAAC,QAAQ;oBAC7B,OAAO;oBACP,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,aAAa,CAAC;iBACnD,IAEA,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,KAAK,QAAQ,IAAI,oBAAC,YAAY,OAAG,CACxC,CACrB,CACF,CACP,CAAC;AACJ,CAAC,CAAoB,CAAC;AAEtB,MAAM,CAAC,MAAM,GAAG,YAAY,CAAC;AAE7B,eAAe,MAAM,CAAC"}

package/esm/form/search/SearchButton.js

@@ -23,7 +23,7 @@ const SearchButton = forwardRef((_a, ref) => {
         return null;
     }
     const { size, variant, onSearch } = context;
-    return (React.createElement(Button, Object.assign({ type: "submit" }, rest, { ref: ref, size: size, variant: variant, className: cl("navds-search__button-search", className), disabled: (_b = context === null || context === void 0 ? void 0 : context.disabled) !== null && _b !== void 0 ? _b : disabled, onClick: (e) => {
+    return (React.createElement(Button, Object.assign({ type: "submit" }, rest, { ref: ref, size: size, variant: variant === "secondary" ? "secondary" : "primary", className: cl("navds-search__button-search", className), disabled: (_b = context === null || context === void 0 ? void 0 : context.disabled) !== null && _b !== void 0 ? _b : disabled, onClick: (e) => {
             onSearch === null || onSearch === void 0 ? void 0 : onSearch();
             onClick === null || onClick === void 0 ? void 0 : onClick(e);
         } }),

package/esm/form/search/SearchButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchButton.js","sourceRoot":"","sources":["../../../src/form/search/SearchButton.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,MAAM,EAAe,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAczC,MAAM,YAAY,GAAqB,UAAU,CAC/C,CAAC,EAAmD,EAAE,GAAG,EAAE,EAAE;;QAA5D,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,OAAW,EAAN,IAAI,cAAjD,gDAAmD,CAAF;IAChD,MAAM,OAAO,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAE1C,IAAI,OAAO,KAAK,IAAI,EAAE;QACpB,OAAO,CAAC,IAAI,CAAC,iDAAiD,CAAC,CAAC;QAChE,OAAO,IAAI,CAAC;KACb;IAED,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAC;IAE5C,OAAO,CACL,oBAAC,MAAM,kBACL,IAAI,EAAC,QAAQ,IACT,IAAI,IACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,EAAE,CAAC,6BAA6B,EAAE,SAAS,CAAC,EACvD,QAAQ,EAAE,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,mCAAI,QAAQ,EACvC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,EAAI,CAAC;YACb,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAC;QACf,CAAC;QAED,oBAAC,MAAM,0BAAe;QACrB,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,8BAAM,SAAS,EAAC,eAAe,eAAW,CAC1D,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SearchButton.js","sourceRoot":"","sources":["../../../src/form/search/SearchButton.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,MAAM,EAAe,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAczC,MAAM,YAAY,GAAqB,UAAU,CAC/C,CAAC,EAAmD,EAAE,GAAG,EAAE,EAAE;;QAA5D,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,OAAW,EAAN,IAAI,cAAjD,gDAAmD,CAAF;IAChD,MAAM,OAAO,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAE1C,IAAI,OAAO,KAAK,IAAI,EAAE;QACpB,OAAO,CAAC,IAAI,CAAC,iDAAiD,CAAC,CAAC;QAChE,OAAO,IAAI,CAAC;KACb;IAED,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAC;IAE5C,OAAO,CACL,oBAAC,MAAM,kBACL,IAAI,EAAC,QAAQ,IACT,IAAI,IACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EAC1D,SAAS,EAAE,EAAE,CAAC,6BAA6B,EAAE,SAAS,CAAC,EACvD,QAAQ,EAAE,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,mCAAI,QAAQ,EACvC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,EAAI,CAAC;YACb,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAC;QACf,CAAC;QAED,oBAAC,MAAM,0BAAe;QACrB,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,8BAAM,SAAS,EAAC,eAAe,eAAW,CAC1D,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.17.17",
+  "version": "0.17.20",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -27,7 +27,7 @@
     "/src"
   ],
   "scripts": {
-    "create-package-json-pointers-to-esm": "node ../../../utilities/scripts/createPackageJsonsWithESMPointers.js",
+    "create-package-json-pointers-to-esm": "node ../../../scripts/createPackageJsonsWithESMPointers.js",
     "clean": "rimraf cjs esm",
     "build": "yarn run clean && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm",
     "watch": "tsc --watch -p tsconfig.esm.json",
@@ -36,7 +36,7 @@
   "dependencies": {
     "@floating-ui/react-dom": "0.6.0",
     "@material-ui/core": "^4.12.3",
-    "@navikt/ds-icons": "^0.8.6",
+    "@navikt/ds-icons": "^0.8.8",
     "@popperjs/core": "^2.10.1",
     "@radix-ui/react-tabs": "0.1.5",
     "@radix-ui/react-toggle-group": "0.1.5",
@@ -48,26 +48,26 @@
     "uuid": "^8.3.2"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.1.0",
-    "@testing-library/user-event": "^13.2.1",
-    "@types/faker": "^5.5.8",
+    "@testing-library/jest-dom": "^5.16.0",
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/user-event": "^14.0.0",
+    "@types/faker": "5.5.8",
     "@types/jest": "^27.0.1",
     "@types/react-collapse": "^5.0.1",
     "@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": "^6.1.0",
+    "faker": "5.5.3",
+    "jest": "^27.5.0",
+    "react-router-dom": "^6.3.0",
     "rimraf": "3.0.2",
     "styled-components": "^5.3.1",
     "swr": "^1.1.2",
-    "ts-jest": "^27.0.5"
+    "ts-jest": "^27.1.0"
   },
   "peerDependencies": {
     "@types/react": "^17.0.30",
-    "react": "^17.0.0"
+    "react": "^17.0.0 | ^18.0.0"
   },
-  "gitHead": "fcbd614a3444afa7fd07c0c133cc754206e5f106"
+  "gitHead": "3daa36efa72838b104d80bfaf259723773d11655"
 }

package/src/accordion/accordion.stories.tsx

@@ -5,7 +5,7 @@ import AccordionItem from "./AccordionItem";
 import { Accordion } from ".";
 
 export default {
-  title: "ds-react/accordion",
+  title: "ds-react/Accordion",
   component: Accordion,
   subcomponents: {
     AccordionItem,
@@ -14,77 +14,89 @@ export default {
   },
 };
 
-export const All = () => {
+const Content = () => (
+  <Accordion.Content>
+    Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam officia
+    laboris voluptate officia pariatur.Lorem est ex anim velit occaecat nisi qui
+    nostrud sit consectetur consectetur officia nostrud ullamco. Est ex duis
+    proident nostrud elit qui laborum anim minim eu eiusmod. Veniam in nostrud
+    sunt tempor velit incididunt sint ex dolor qui velit id eu. Deserunt magna
+    sunt velit in. Est exercitation id cillum qui do. Minim adipisicing nostrud
+    commodo proident occaecat aliquip nulla anim proident reprehenderit. Magna
+    ipsum officia veniam cupidatat duis veniam dolore reprehenderit mollit
+    velit.Ut consequat commodo minim occaecat id pariatur. Nisi enim tempor
+    laborum commodo. Tempor sit quis nostrud eu cupidatat sunt commodo
+    reprehenderit irure deserunt eiusmod ipsum. Exercitation quis commodo cillum
+    eiusmod eiusmod. Do laborum qui proident commodo adipisicing eiusmod id.
+  </Accordion.Content>
+);
+
+export const Default = (props) => {
+  const [open, setOpen] = useState(false);
+
+  const Item = () =>
+    props.controlled ? (
+      <Accordion.Item
+        open={open}
+        renderContentWhenClosed={props.renderContentWhenClosed}
+      >
+        <Accordion.Header onClick={() => setOpen(!open)}>
+          Accordion header text
+        </Accordion.Header>
+        <Content />
+      </Accordion.Item>
+    ) : (
+      <Accordion.Item renderContentWhenClosed={props.renderContentWhenClosed}>
+        <Accordion.Header>Accordion header text</Accordion.Header>
+        <Content />
+      </Accordion.Item>
+    );
+  return (
+    <Accordion>
+      {[...Array(props.nItems ? props.nItems : 2)].map((_, y) => (
+        <Item key={y} />
+      ))}
+    </Accordion>
+  );
+};
+
+Default.args = {
+  controlled: false,
+  renderContentWhenClosed: false,
+  nItems: 2,
+};
+
+export const Controlled = () => {
   const [open, setOpen] = useState(false);
+  const [open2, setOpen2] = useState(false);
 
   return (
-    <>
-      <h1>Accordion</h1>
-      <h2>Controlled</h2>
-      <Accordion>
-        <Accordion.Item open={open}>
-          <Accordion.Header onClick={() => setOpen(!open)}>
-            Accordion header text
-          </Accordion.Header>
-          <Accordion.Content>
-            Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
-            officia laboris voluptate officia pariatur.Lorem est ex anim velit
-            occaecat nisi qui nostrud sit consectetur consectetur officia
-            nostrud ullamco. Est ex duis proident nostrud elit qui laborum anim
-            minim eu eiusmod. Veniam in nostrud sunt tempor velit incididunt
-            sint ex dolor qui velit id eu. Deserunt magna sunt velit in. Est
-            exercitation id cillum qui do. Minim adipisicing nostrud commodo
-            proident occaecat aliquip nulla anim proident reprehenderit. Magna
-            ipsum officia veniam cupidatat duis veniam dolore reprehenderit
-            mollit velit.Ut consequat commodo minim occaecat id pariatur. Nisi
-            enim tempor laborum commodo. Tempor sit quis nostrud eu cupidatat
-            sunt commodo reprehenderit irure deserunt eiusmod ipsum.
-            Exercitation quis commodo cillum eiusmod eiusmod. Do laborum qui
-            proident commodo adipisicing eiusmod id.
-          </Accordion.Content>
-        </Accordion.Item>
-      </Accordion>
-      <h2>Un-controlled</h2>
-      <Accordion>
-        <Accordion.Item>
-          <Accordion.Header>Accordion header text</Accordion.Header>
-          <Accordion.Content>
-            Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
-            officia laboris voluptate officia pariatur.Lorem est ex anim velit
-            occaecat nisi qui nostrud sit consectetur consectetur officia
-            nostrud ullamco. Est ex duis proident nostrud elit qui laborum anim
-            minim eu eiusmod. Veniam in nostrud sunt tempor velit incididunt
-            sint ex dolor qui velit id eu. Deserunt magna sunt velit in. Est
-            exercitation id cillum qui do. Minim adipisicing nostrud commodo
-            proident occaecat aliquip nulla anim proident reprehenderit. Magna
-            ipsum officia veniam cupidatat duis veniam dolore reprehenderit
-            mollit velit.Ut consequat commodo minim occaecat id pariatur. Nisi
-            enim tempor laborum commodo. Tempor sit quis nostrud eu cupidatat
-            sunt commodo reprehenderit irure deserunt eiusmod ipsum.
-            Exercitation quis commodo cillum eiusmod eiusmod. Do laborum qui
-            proident commodo adipisicing eiusmod id.
-          </Accordion.Content>
-        </Accordion.Item>
-        <Accordion.Item>
-          <Accordion.Header>Accordion header text</Accordion.Header>
-          <Accordion.Content>
-            Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
-            officia laboris voluptate officia pariatur.Lorem est ex anim velit
-            occaecat nisi qui nostrud sit consectetur consectetur officia
-            nostrud ullamco. Est ex duis proident nostrud elit qui laborum anim
-            minim eu eiusmod. Veniam in nostrud sunt tempor velit incididunt
-            sint ex dolor qui velit id eu. Deserunt magna sunt velit in. Est
-            exercitation id cillum qui do. Minim adipisicing nostrud commodo
-            proident occaecat aliquip nulla anim proident reprehenderit. Magna
-            ipsum officia veniam cupidatat duis veniam dolore reprehenderit
-            mollit velit.Ut consequat commodo minim occaecat id pariatur. Nisi
-            enim tempor laborum commodo. Tempor sit quis nostrud eu cupidatat
-            sunt commodo reprehenderit irure deserunt eiusmod ipsum.
-            Exercitation quis commodo cillum eiusmod eiusmod. Do laborum qui
-            proident commodo adipisicing eiusmod id.
-          </Accordion.Content>
-        </Accordion.Item>
-      </Accordion>
-    </>
+    <Accordion>
+      <Accordion.Item open={open}>
+        <Accordion.Header onClick={() => setOpen(!open)}>
+          Accordion header text
+        </Accordion.Header>
+        <Content />
+      </Accordion.Item>
+      <Accordion.Item open={open2}>
+        <Accordion.Header onClick={() => setOpen2(!open2)}>
+          Accordion header text
+        </Accordion.Header>
+        <Content />
+      </Accordion.Item>
+    </Accordion>
   );
 };
+
+export const Uncontrolled = () => (
+  <Accordion>
+    <Accordion.Item>
+      <Accordion.Header>Accordion header text</Accordion.Header>
+      <Content />
+    </Accordion.Item>
+    <Accordion.Item>
+      <Accordion.Header>Accordion header text</Accordion.Header>
+      <Content />
+    </Accordion.Item>
+  </Accordion>
+);