@navikt/ds-react 0.17.2 → 0.17.5

package/cjs/form/search/Search.js

@@ -76,12 +76,9 @@ const Search = (0, react_1.forwardRef)((props, ref) => {
     (0, react_1.useEffect)(() => {
         value !== undefined && setControlledValue(value);
     }, [value]);
-    return (react_1.default.createElement("form", { role: "search", ref: setWrapperRef, className: (0, classnames_1.default)(className, "navds-form-field", `navds-form-field--${size}`, "navds-search", {
+    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,
-        }), onSubmit: (e) => {
-            e.preventDefault();
-            onSearch === null || onSearch === void 0 ? void 0 : onSearch(controlledValue);
-        } },
+        }) },
         react_1.default.createElement(__1.Label, { htmlFor: inputProps.id, size: size, as: "label", className: (0, classnames_1.default)("navds-text-field__label", {
                 "navds-sr-only": hideLabel,
             }) }, label),
@@ -98,6 +95,7 @@ const Search = (0, react_1.forwardRef)((props, ref) => {
                     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)))));
 });
 Search.Button = SearchButton_1.default;

package/cjs/form/search/SearchButton.js

@@ -50,8 +50,11 @@ const SearchButton = (0, react_1.forwardRef)((_a, ref) => {
         console.warn("<Search.Button> has to be wrapped in <Search />");
         return null;
     }
-    const { size, variant } = 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) => onClick === null || onClick === void 0 ? void 0 : onClick(e) }),
+    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) => {
+            onSearch === null || onSearch === void 0 ? void 0 : onSearch();
+            onClick === null || onClick === void 0 ? void 0 : onClick(e);
+        } }),
         react_1.default.createElement(ds_icons_1.Search, { "aria-hidden": true }),
         children ? children : react_1.default.createElement("span", { className: "navds-sr-only" }, "S\u00F8k")));
 });

package/cjs/help-text/HelpText.js

@@ -43,25 +43,17 @@ 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", strategy = "absolute", title = "hjelp" } = _a, rest = __rest(_a, ["className", "children", "placement", "strategy", "title"]);
+    var { className, children, placement = "top", strategy = "absolute", title = "hjelp", onClick } = _a, rest = __rest(_a, ["className", "children", "placement", "strategy", "title", "onClick"]);
     const buttonRef = (0, react_1.useRef)(null);
     const mergedRef = (0, react_merge_refs_1.default)([buttonRef, ref]);
-    const [popoverRef, setPopoverRef] = (0, react_1.useState)(null);
-    const wrapperRef = (0, react_1.useRef)(null);
     const [open, setOpen] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        var _a;
-        open && ((_a = popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.focus) === null || _a === void 0 ? void 0 : _a.call(popoverRef));
-    }, [open, popoverRef]);
-    const handleClick = (e) => {
-        setOpen((x) => !x);
-        rest.onClick && rest.onClick(e);
-    };
-    return (react_1.default.createElement("div", { className: "navds-help-text", ref: wrapperRef },
-        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: setPopoverRef, 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))));
+    return (react_1.default.createElement("div", { className: "navds-help-text" },
+        react_1.default.createElement("button", Object.assign({}, rest, { ref: mergedRef, onClick: (e) => {
+                setOpen((x) => !x);
+                onClick === null || onClick === void 0 ? void 0 : onClick(e);
+            }, className: (0, classnames_1.default)(className, "navds-help-text__button"), type: "button", "aria-expanded": open, title: title }),
+            react_1.default.createElement(ds_icons_1.Helptext, { className: "navds-help-text__icon", "aria-hidden": true })),
+        react_1.default.createElement(__1.Popover, { onClose: () => setOpen(false), className: "navds-help-text__popover", open: open, anchorEl: buttonRef.current, placement: placement, strategy: strategy },
+            react_1.default.createElement(__1.Popover.Content, { className: "navds-body-short" }, children))));
 });
 exports.default = HelpText;

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

@@ -55,6 +55,7 @@ export interface SearchContextProps {
     disabled?: boolean;
     size: "medium" | "small";
     variant?: "tertiary" | "primary";
+    onSearch?: () => void;
 }
 export declare const SearchContext: React.Context<SearchContextProps | null>;
 declare const Search: SearchComponent;

package/esm/form/search/Search.js

@@ -47,12 +47,9 @@ const Search = forwardRef((props, ref) => {
     useEffect(() => {
         value !== undefined && setControlledValue(value);
     }, [value]);
-    return (React.createElement("form", { role: "search", ref: setWrapperRef, className: cl(className, "navds-form-field", `navds-form-field--${size}`, "navds-search", {
+    return (React.createElement("div", { ref: setWrapperRef, className: cl(className, "navds-form-field", `navds-form-field--${size}`, "navds-search", {
             "navds-search--disabled": !!inputProps.disabled,
-        }), onSubmit: (e) => {
-            e.preventDefault();
-            onSearch === null || onSearch === void 0 ? void 0 : onSearch(controlledValue);
-        } },
+        }) },
         React.createElement(Label, { htmlFor: inputProps.id, size: size, as: "label", className: cl("navds-text-field__label", {
                 "navds-sr-only": hideLabel,
             }) }, label),
@@ -69,6 +66,7 @@ const Search = forwardRef((props, ref) => {
                     size,
                     disabled: inputProps.disabled,
                     variant,
+                    onSearch: () => onSearch === null || onSearch === void 0 ? void 0 : onSearch(controlledValue),
                 } }, children ? children : React.createElement(SearchButton, null)))));
 });
 Search.Button = SearchButton;

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":"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"}

package/esm/form/search/SearchButton.js

@@ -22,8 +22,11 @@ const SearchButton = forwardRef((_a, ref) => {
         console.warn("<Search.Button> has to be wrapped in <Search />");
         return null;
     }
-    const { size, variant } = 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) => onClick === null || onClick === void 0 ? void 0 : onClick(e) }),
+    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) => {
+            onSearch === null || onSearch === void 0 ? void 0 : onSearch();
+            onClick === null || onClick === void 0 ? void 0 : onClick(e);
+        } }),
         React.createElement(Search, { "aria-hidden": true }),
         children ? children : React.createElement("span", { className: "navds-sr-only" }, "S\u00F8k")));
 });

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,GAAG,OAAO,CAAC;IAElC,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,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC;QAE5B,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,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"}

package/esm/help-text/HelpText.js

@@ -11,30 +11,22 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { Helptext as HelpTextIcon } from "@navikt/ds-icons";
 import cl from "classnames";
-import React, { forwardRef, useEffect, useRef, useState } from "react";
+import React, { forwardRef, useRef, useState } from "react";
 import mergeRefs from "react-merge-refs";
 import { Popover } from "..";
 const HelpText = forwardRef((_a, ref) => {
-    var { className, children, placement = "top", strategy = "absolute", title = "hjelp" } = _a, rest = __rest(_a, ["className", "children", "placement", "strategy", "title"]);
+    var { className, children, placement = "top", strategy = "absolute", title = "hjelp", onClick } = _a, rest = __rest(_a, ["className", "children", "placement", "strategy", "title", "onClick"]);
     const buttonRef = useRef(null);
     const mergedRef = mergeRefs([buttonRef, ref]);
-    const [popoverRef, setPopoverRef] = useState(null);
-    const wrapperRef = useRef(null);
     const [open, setOpen] = useState(false);
-    useEffect(() => {
-        var _a;
-        open && ((_a = popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.focus) === null || _a === void 0 ? void 0 : _a.call(popoverRef));
-    }, [open, popoverRef]);
-    const handleClick = (e) => {
-        setOpen((x) => !x);
-        rest.onClick && rest.onClick(e);
-    };
-    return (React.createElement("div", { className: "navds-help-text", ref: wrapperRef },
-        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: setPopoverRef, 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))));
+    return (React.createElement("div", { className: "navds-help-text" },
+        React.createElement("button", Object.assign({}, rest, { ref: mergedRef, onClick: (e) => {
+                setOpen((x) => !x);
+                onClick === null || onClick === void 0 ? void 0 : onClick(e);
+            }, className: cl(className, "navds-help-text__button"), type: "button", "aria-expanded": open, title: title }),
+            React.createElement(HelpTextIcon, { className: "navds-help-text__icon", "aria-hidden": true })),
+        React.createElement(Popover, { onClose: () => setOpen(false), className: "navds-help-text__popover", open: open, anchorEl: buttonRef.current, placement: placement, strategy: strategy },
+            React.createElement(Popover.Content, { className: "navds-body-short" }, children))));
 });
 export default HelpText;
 //# sourceMappingURL=HelpText.js.map

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;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,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC,CAAC;IAC1E,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,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK,0DAAI,CAAA,CAAC;IAChC,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC;IAEvB,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;IACF,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,aAAa,EAClB,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"}
+{"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,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAgB,MAAM,IAAI,CAAC;AAW3C,MAAM,QAAQ,GAAG,UAAU,CACzB,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,SAAS,EACT,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,UAAU,EACrB,KAAK,GAAG,OAAO,EACf,OAAO,OAER,EADI,IAAI,cAPT,sEAQC,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,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,OAAO,CACL,6BAAK,SAAS,EAAC,iBAAiB;QAC9B,gDACM,IAAI,IACR,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACb,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;gBACnB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAC;YACf,CAAC,EACD,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,yBAAyB,CAAC,EACnD,IAAI,EAAC,QAAQ,mBACE,IAAI,EACnB,KAAK,EAAE,KAAK;YAEZ,oBAAC,YAAY,IAAC,SAAS,EAAC,uBAAuB,wBAAc,CACtD;QACT,oBAAC,OAAO,IACN,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAC,0BAA0B,EACpC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,SAAS,CAAC,OAAO,EAC3B,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ;YAElB,oBAAC,OAAO,CAAC,OAAO,IAAC,SAAS,EAAC,kBAAkB,IAC1C,QAAQ,CACO,CACV,CACN,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.17.2",
+  "version": "0.17.5",
   "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.8.4",
+    "@navikt/ds-icons": "^0.8.5",
     "@popperjs/core": "^2.10.1",
     "@radix-ui/react-toggle-group": "0.1.5",
     "classnames": "^2.2.6",
@@ -66,5 +66,5 @@
     "@types/react": "^17.0.30",
     "react": "^17.0.0"
   },
-  "gitHead": "dd1c128aac6126bddc7e9965ddd4cc4155fd93c2"
+  "gitHead": "b2a71fd227ccbe3709094c0c85d1174694dda450"
 }

package/src/form/search/Search.tsx

@@ -75,6 +75,7 @@ export interface SearchContextProps {
   disabled?: boolean;
   size: "medium" | "small";
   variant?: "tertiary" | "primary";
+  onSearch?: () => void;
 }
 
 export const SearchContext = React.createContext<SearchContextProps | null>(
@@ -104,7 +105,7 @@ const Search = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {
 
   const searchRef = useRef<HTMLInputElement | null>(null);
   const mergedRef = mergeRefs([searchRef, ref]);
-  const [wrapperRef, setWrapperRef] = useState<HTMLFormElement | null>(null);
+  const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);
 
   const [controlledValue, setControlledValue] = useState(value ?? "");
 
@@ -147,8 +148,7 @@ const Search = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {
   }, [value]);
 
   return (
-    <form
-      role="search"
+    <div
       ref={setWrapperRef}
       className={cl(
         className,
@@ -159,10 +159,6 @@ const Search = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {
           "navds-search--disabled": !!inputProps.disabled,
         }
       )}
-      onSubmit={(e) => {
-        e.preventDefault();
-        onSearch?.(controlledValue);
-      }}
     >
       <Label
         htmlFor={inputProps.id}
@@ -222,12 +218,13 @@ const Search = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {
             size,
             disabled: inputProps.disabled,
             variant,
+            onSearch: () => onSearch?.(controlledValue),
           }}
         >
           {children ? children : <SearchButton />}
         </SearchContext.Provider>
       </div>
-    </form>
+    </div>
   );
 }) as SearchComponent;
 

package/src/form/search/SearchButton.tsx

@@ -25,7 +25,7 @@ const SearchButton: SearchButtonType = forwardRef(
       return null;
     }
 
-    const { size, variant } = context;
+    const { size, variant, onSearch } = context;
 
     return (
       <Button
@@ -36,7 +36,10 @@ const SearchButton: SearchButtonType = forwardRef(
         variant={variant}
         className={cl("navds-search__button-search", className)}
         disabled={context?.disabled ?? disabled}
-        onClick={(e) => onClick?.(e)}
+        onClick={(e) => {
+          onSearch?.();
+          onClick?.(e);
+        }}
       >
         <Search aria-hidden />
         {children ? children : <span className="navds-sr-only">Søk</span>}

package/src/form/search/search.stories.tsx

@@ -10,20 +10,23 @@ export default {
 export const All = () => {
   const [value, setValue] = useState("");
   return (
-    <div style={{ maxWidth: 300 }}>
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        flexDirection: "column",
+        maxWidth: 400,
+      }}
+    >
       <h1>Search</h1>
-      <div>
-        <Search
-          label="Søk alle sider om X og Y"
-          onSearch={console.log}
-        ></Search>
-        <br />
-        <Search
-          label="Søk alle sider om X og Y"
-          onSearch={console.log}
-          variant="primary"
-        ></Search>
-      </div>
+
+      <Search label="Søk alle sider om X og Y" onSearch={console.log}></Search>
+      <h2>Primary search</h2>
+      <Search
+        label="Søk alle sider om X og Y"
+        onSearch={console.log}
+        variant="primary"
+      ></Search>
 
       <h2>Search small</h2>
       <Search

package/src/help-text/HelpText.tsx

@@ -1,6 +1,6 @@
 import { Helptext as HelpTextIcon } from "@navikt/ds-icons";
 import cl from "classnames";
-import React, { forwardRef, useEffect, useRef, useState } from "react";
+import React, { forwardRef, useRef, useState } from "react";
 import mergeRefs from "react-merge-refs";
 import { Popover, PopoverProps } from "..";
 
@@ -21,53 +21,42 @@ const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
       placement = "top",
       strategy = "absolute",
       title = "hjelp",
+      onClick,
       ...rest
     },
     ref
   ) => {
     const buttonRef = useRef<HTMLButtonElement | null>(null);
     const mergedRef = mergeRefs([buttonRef, ref]);
-    const [popoverRef, setPopoverRef] = useState<HTMLDivElement | null>(null);
-    const wrapperRef = useRef<HTMLDivElement | null>(null);
-
     const [open, setOpen] = useState(false);
 
-    useEffect(() => {
-      open && popoverRef?.focus?.();
-    }, [open, popoverRef]);
-
-    const handleClick = (
-      e: React.MouseEvent<HTMLButtonElement, MouseEvent>
-    ) => {
-      setOpen((x) => !x);
-      rest.onClick && rest.onClick(e);
-    };
     return (
-      <div className="navds-help-text" ref={wrapperRef}>
+      <div className="navds-help-text">
         <button
           {...rest}
           ref={mergedRef}
-          onClick={(e) => handleClick(e)}
+          onClick={(e) => {
+            setOpen((x) => !x);
+            onClick?.(e);
+          }}
           className={cl(className, "navds-help-text__button")}
           type="button"
           aria-expanded={open}
-          aria-haspopup="dialog"
           title={title}
         >
-          <HelpTextIcon className="navds-help-text__icon" />
-          <span className="navds-sr-only">{title}</span>
+          <HelpTextIcon className="navds-help-text__icon" aria-hidden/>
         </button>
         <Popover
-          ref={setPopoverRef}
           onClose={() => setOpen(false)}
           className="navds-help-text__popover"
           open={open}
-          role="tooltip"
           anchorEl={buttonRef.current}
           placement={placement}
           strategy={strategy}
         >
-          <Popover.Content>{children}</Popover.Content>
+          <Popover.Content className="navds-body-short">
+            {children}
+          </Popover.Content>
         </Popover>
       </div>
     );

package/src/help-text/help-text.stories.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { TextField, HelpText } from "..";
+
+export default {
+  title: "ds-react/help-text",
+  component: HelpText,
+};
+
+export const All = () => {
+  return (
+    <>
+      <h1>HelpText</h1>
+      <HelpText title="show tooltip">
+        Id ullamco excepteur elit fugiat labore.
+      </HelpText>
+      <TextField
+        label={
+          <div style={{ display: "flex", gap: 8 }}>
+            Text field label
+            <HelpText title="show tooltip">
+              Id ullamco excepteur elit fugiat labore.
+            </HelpText>
+          </div>
+        }
+      ></TextField>
+    </>
+  );
+};

package/src/help-text/stories/help-text.stories.mdx

@@ -1,35 +0,0 @@
-import { Meta, Canvas } from "@storybook/addon-docs";
-import { HelpText } from "../../index";
-import { Success } from "@navikt/ds-react";
-
-<Meta title="ds-react/help-text/intro" />
-
-# Hvordan ta i bruk HelpText
-
-```jsx
-<HelpText>Exercitation esse minim esse mollit ex magna.</HelpText>
-```
-
-<Canvas>
-  <div style={{ padding: "5rem" }}>
-    <HelpText>Exercitation esse minim esse mollit ex magna.</HelpText>
-  </div>
-</Canvas>
-
-# Egen title
-
-Husk å endre på "title" slik at skjermlesere får tydeligere informasjon
-
-```jsx
-<HelpText title="vis hjelpetekst angående søknad">
-  Exercitation esse minim esse mollit ex magna.
-</HelpText>
-```
-
-<Canvas>
-  <div style={{ padding: "5rem" }}>
-    <HelpText title="vis hjelpetekst angående søknad">
-      Exercitation esse minim esse mollit ex magna.
-    </HelpText>
-  </div>
-</Canvas>

package/src/help-text/stories/help-text.stories.tsx

@@ -1,32 +0,0 @@
-import React from "react";
-import { BodyLong } from "../../typography";
-import { HelpText } from "../index";
-
-export default {
-  title: "ds-react/help-text",
-  component: HelpText,
-};
-
-export const All = () => {
-  return (
-    <>
-      <h1>HelpText</h1>
-      <BodyLong style={{ display: "flex" }}>
-        Quis tempor incididunt sint sit veniam ad dolore cillum ut.
-        <HelpText title="show tooltip">
-          Id ullamco excepteur elit fugiat labore.
-        </HelpText>
-      </BodyLong>
-
-      <BodyLong>
-        Incididunt pariatur laborum dolor sint qui eiusmod exercitation non
-        cupidatat amet.
-      </BodyLong>
-
-      <h2>HelpText defaultOpen</h2>
-      <HelpText title="show tooltip">
-        Id ullamco excepteur elit fugiat labore.
-      </HelpText>
-    </>
-  );
-};