@navikt/ds-react 0.19.16 → 0.19.17

package/_docs.json

@@ -9019,6 +9019,44 @@
           "name": "\"primary\" | \"secondary\" | \"simple\""
         }
       },
+      "error": {
+        "defaultValue": null,
+        "description": "Error message for element",
+        "name": "error",
+        "parent": {
+          "fileName": "react/src/form/useFormField.ts",
+          "name": "FormFieldProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/form/useFormField.ts",
+            "name": "FormFieldProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "ReactNode"
+        }
+      },
+      "errorId": {
+        "defaultValue": null,
+        "description": "Override internal errorId",
+        "name": "errorId",
+        "parent": {
+          "fileName": "react/src/form/useFormField.ts",
+          "name": "FormFieldProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/form/useFormField.ts",
+            "name": "FormFieldProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
       "size": {
         "defaultValue": null,
         "description": "Changes font-size, padding and gaps",

package/cjs/form/search/Search.js

@@ -43,11 +43,11 @@ const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importStar(require("react"));
 const react_merge_refs_1 = __importDefault(require("react-merge-refs"));
 const __1 = require("../..");
+const useFormField_1 = require("../useFormField");
 const SearchButton_1 = __importDefault(require("./SearchButton"));
-const useSearch_1 = require("./useSearch");
 exports.SearchContext = react_1.default.createContext(null);
 exports.Search = (0, react_1.forwardRef)((props, ref) => {
-    const { inputProps, size = "medium", inputDescriptionId, } = (0, useSearch_1.useSearch)(props, "searchfield");
+    const { inputProps, size = "medium", inputDescriptionId, errorId, showErrorMsg, hasError, } = (0, useFormField_1.useFormField)(props, "searchfield");
     const { className, hideLabel = true, label, description, value, clearButtonLabel, onClear, clearButton = true, children, variant = "primary", defaultValue, onChange } = props, rest = __rest(props, ["className", "hideLabel", "label", "description", "value", "clearButtonLabel", "onClear", "clearButton", "children", "variant", "defaultValue", "onChange"]);
     const searchRef = (0, react_1.useRef)(null);
     const mergedRef = (0, react_merge_refs_1.default)([searchRef, ref]);
@@ -70,6 +70,7 @@ exports.Search = (0, react_1.forwardRef)((props, ref) => {
         }
     }, [handleClear]), wrapperRef);
     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--error": hasError,
             "navds-search--disabled": !!inputProps.disabled,
         }) },
         react_1.default.createElement(__1.Label, { htmlFor: inputProps.id, size: size, as: "label", className: (0, classnames_1.default)("navds-form-field__label", {
@@ -81,7 +82,7 @@ exports.Search = (0, react_1.forwardRef)((props, ref) => {
         react_1.default.createElement("div", { className: "navds-search__wrapper" },
             react_1.default.createElement("div", { className: "navds-search__wrapper-inner" },
                 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}`) })),
+                react_1.default.createElement("input", Object.assign({ ref: mergedRef }, (0, __1.omit)(rest, ["error", "errorId", "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 })))),
@@ -89,7 +90,8 @@ exports.Search = (0, react_1.forwardRef)((props, ref) => {
                     size,
                     disabled: inputProps.disabled,
                     variant,
-                } }, children ? children : variant !== "simple" && react_1.default.createElement(SearchButton_1.default, null)))));
+                } }, children ? children : variant !== "simple" && react_1.default.createElement(SearchButton_1.default, null))),
+        react_1.default.createElement("div", { className: "navds-form-field__error", id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && (react_1.default.createElement(__1.ErrorMessage, { size: size }, props.error)))));
 });
 exports.Search.Button = SearchButton_1.default;
 exports.default = exports.Search;

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

@@ -8,7 +8,7 @@ export declare type SearchClearEvent = {
     trigger: "Escape";
     event: React.KeyboardEvent<HTMLDivElement>;
 };
-export interface SearchProps extends Omit<FormFieldProps, "error" | "errorId">, Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> {
+export interface SearchProps extends FormFieldProps, Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> {
     children?: React.ReactNode;
     /**
      * Search label

package/esm/form/search/Search.js

@@ -13,12 +13,12 @@ import { Close, Search as SearchIcon } from "@navikt/ds-icons";
 import cl from "classnames";
 import React, { forwardRef, useCallback, useRef, useState, } from "react";
 import mergeRefs from "react-merge-refs";
-import { BodyShort, Label, omit, useEventListener } from "../..";
+import { BodyShort, ErrorMessage, Label, omit, useEventListener } from "../..";
+import { useFormField } from "../useFormField";
 import SearchButton from "./SearchButton";
-import { useSearch } from "./useSearch";
 export const SearchContext = React.createContext(null);
 export const Search = forwardRef((props, ref) => {
-    const { inputProps, size = "medium", inputDescriptionId, } = useSearch(props, "searchfield");
+    const { inputProps, size = "medium", inputDescriptionId, errorId, showErrorMsg, hasError, } = useFormField(props, "searchfield");
     const { className, hideLabel = true, label, description, value, clearButtonLabel, onClear, clearButton = true, children, variant = "primary", defaultValue, onChange } = props, rest = __rest(props, ["className", "hideLabel", "label", "description", "value", "clearButtonLabel", "onClear", "clearButton", "children", "variant", "defaultValue", "onChange"]);
     const searchRef = useRef(null);
     const mergedRef = mergeRefs([searchRef, ref]);
@@ -41,6 +41,7 @@ export const Search = forwardRef((props, ref) => {
         }
     }, [handleClear]), wrapperRef);
     return (React.createElement("div", { ref: setWrapperRef, className: cl(className, "navds-form-field", `navds-form-field--${size}`, "navds-search", {
+            "navds-search--error": hasError,
             "navds-search--disabled": !!inputProps.disabled,
         }) },
         React.createElement(Label, { htmlFor: inputProps.id, size: size, as: "label", className: cl("navds-form-field__label", {
@@ -52,7 +53,7 @@ export const Search = forwardRef((props, ref) => {
         React.createElement("div", { className: "navds-search__wrapper" },
             React.createElement("div", { className: "navds-search__wrapper-inner" },
                 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}`) })),
+                React.createElement("input", Object.assign({ ref: mergedRef }, omit(rest, ["error", "errorId", "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 })))),
@@ -60,7 +61,8 @@ export const Search = forwardRef((props, ref) => {
                     size,
                     disabled: inputProps.disabled,
                     variant,
-                } }, children ? children : variant !== "simple" && React.createElement(SearchButton, null)))));
+                } }, children ? children : variant !== "simple" && React.createElement(SearchButton, null))),
+        React.createElement("div", { className: "navds-form-field__error", id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && (React.createElement(ErrorMessage, { size: size }, props.error)))));
 });
 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":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.19.16",
+  "version": "0.19.17",
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
   "license": "MIT",
@@ -76,5 +76,5 @@
     "@types/react": "^17.0.30 || ^18.0.0",
     "react": "^17.0.0 || ^18.0.0"
   },
-  "gitHead": "4f437d4e15befce3aef21440141ad7d36138219d"
+  "gitHead": "c47048cc2d6af3c5f04a22420790c38ac2884040"
 }

package/src/form/search/Search.tsx

@@ -8,10 +8,9 @@ import React, {
   useState,
 } from "react";
 import mergeRefs from "react-merge-refs";
-import { BodyShort, Label, omit, useEventListener } from "../..";
-import { FormFieldProps } from "../useFormField";
+import { BodyShort, ErrorMessage, Label, omit, useEventListener } from "../..";
+import { FormFieldProps, useFormField } from "../useFormField";
 import SearchButton, { SearchButtonType } from "./SearchButton";
-import { useSearch } from "./useSearch";
 
 export type SearchClearEvent =
   | {
@@ -21,7 +20,7 @@ export type SearchClearEvent =
   | { trigger: "Escape"; event: React.KeyboardEvent<HTMLDivElement> };
 
 export interface SearchProps
-  extends Omit<FormFieldProps, "error" | "errorId">,
+  extends FormFieldProps,
     Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> {
   children?: React.ReactNode;
   /**
@@ -82,7 +81,10 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       inputProps,
       size = "medium",
       inputDescriptionId,
-    } = useSearch(props, "searchfield");
+      errorId,
+      showErrorMsg,
+      hasError,
+    } = useFormField(props, "searchfield");
 
     const {
       className,
@@ -146,6 +148,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
           `navds-form-field--${size}`,
           "navds-search",
           {
+            "navds-search--error": hasError,
             "navds-search--disabled": !!inputProps.disabled,
           }
         )}
@@ -179,7 +182,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
             )}
             <input
               ref={mergedRef}
-              {...omit(rest, ["size"])}
+              {...omit(rest, ["error", "errorId", "size"])}
               {...inputProps}
               value={value ?? internalValue}
               onChange={(e) => handleChange(e.target.value)}
@@ -217,6 +220,16 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
             {children ? children : variant !== "simple" && <SearchButton />}
           </SearchContext.Provider>
         </div>
+        <div
+          className="navds-form-field__error"
+          id={errorId}
+          aria-relevant="additions removals"
+          aria-live="polite"
+        >
+          {showErrorMsg && (
+            <ErrorMessage size={size}>{props.error}</ErrorMessage>
+          )}
+        </div>
       </div>
     );
   }

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

@@ -23,6 +23,11 @@ export default {
         options: ["primary", "secondary", "simple"],
       },
     },
+    error: {
+      control: {
+        type: "text",
+      },
+    },
   },
 } as Meta;
 
@@ -38,6 +43,7 @@ export const Default = (props) => {
         clearButton={props.clearButton}
         variant={props.variant}
         hideLabel={props.hideLabel}
+        error={props.error}
       />
     </div>
   );
@@ -79,6 +85,21 @@ export const Variants = () => (
   </div>
 );
 
+export const ErrorVariants = () => (
+  <div className="rowgap">
+    <div className="colgap">
+      <Search error="errormsg" label="Søk" />
+      <Search error="errormsg" label="Søk" variant="secondary" />
+      <Search error="errormsg" label="Søk" variant="simple" />
+    </div>
+    <div className="colgap" data-theme="dark">
+      <Search error="errormsg" label="Søk" />
+      <Search error="errormsg" label="Søk" variant="secondary" />
+      <Search error="errormsg" label="Søk" variant="simple" />
+    </div>
+  </div>
+);
+
 export const Placeholder = () => (
   <div className="rowgap">
     <div className="colgap">

package/cjs/form/search/useSearch.js

@@ -1,31 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSearch = void 0;
-const classnames_1 = __importDefault(require("classnames"));
-const react_1 = require("react");
-const index_1 = require("../../index");
-const index_2 = require("../index");
-const useSearch = (props, prefix) => {
-    var _a, _b;
-    const { size } = props;
-    const fieldset = (0, react_1.useContext)(index_2.FieldsetContext);
-    const genId = (0, index_1.useId)();
-    const id = (_a = props.id) !== null && _a !== void 0 ? _a : `${prefix}-${genId}`;
-    const inputDescriptionId = `${prefix}-description-${genId}`;
-    const disabled = (fieldset === null || fieldset === void 0 ? void 0 : fieldset.disabled) || props.disabled;
-    return {
-        inputDescriptionId,
-        size: (_b = size !== null && size !== void 0 ? size : fieldset === null || fieldset === void 0 ? void 0 : fieldset.size) !== null && _b !== void 0 ? _b : "medium",
-        inputProps: {
-            id,
-            "aria-describedby": (0, classnames_1.default)(props["aria-describedby"], {
-                [inputDescriptionId]: !!(props === null || props === void 0 ? void 0 : props.description),
-            }) || undefined,
-            disabled,
-        },
-    };
-};
-exports.useSearch = useSearch;

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

@@ -1,10 +0,0 @@
-import { FormFieldProps } from "../useFormField";
-export declare const useSearch: (props: FormFieldProps, prefix: string) => {
-    inputDescriptionId: string;
-    size: "small" | "medium";
-    inputProps: {
-        id: string;
-        "aria-describedby": string | undefined;
-        disabled: boolean | undefined;
-    };
-};

package/esm/form/search/useSearch.js

@@ -1,25 +0,0 @@
-import cl from "classnames";
-import { useContext } from "react";
-import { useId } from "../../index";
-import { FieldsetContext } from "../index";
-export const useSearch = (props, prefix) => {
-    var _a, _b;
-    const { size } = props;
-    const fieldset = useContext(FieldsetContext);
-    const genId = useId();
-    const id = (_a = props.id) !== null && _a !== void 0 ? _a : `${prefix}-${genId}`;
-    const inputDescriptionId = `${prefix}-description-${genId}`;
-    const disabled = (fieldset === null || fieldset === void 0 ? void 0 : fieldset.disabled) || props.disabled;
-    return {
-        inputDescriptionId,
-        size: (_b = size !== null && size !== void 0 ? size : fieldset === null || fieldset === void 0 ? void 0 : fieldset.size) !== null && _b !== void 0 ? _b : "medium",
-        inputProps: {
-            id,
-            "aria-describedby": cl(props["aria-describedby"], {
-                [inputDescriptionId]: !!(props === null || props === void 0 ? void 0 : props.description),
-            }) || undefined,
-            disabled,
-        },
-    };
-};
-//# sourceMappingURL=useSearch.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useSearch.js","sourceRoot":"","sources":["../../../src/form/search/useSearch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAG3C,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,MAAc,EAAE,EAAE;;IACjE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAEvB,MAAM,QAAQ,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAE7C,MAAM,KAAK,GAAG,KAAK,EAAE,CAAC;IAEtB,MAAM,EAAE,GAAG,MAAA,KAAK,CAAC,EAAE,mCAAI,GAAG,MAAM,IAAI,KAAK,EAAE,CAAC;IAC5C,MAAM,kBAAkB,GAAG,GAAG,MAAM,gBAAgB,KAAK,EAAE,CAAC;IAE5D,MAAM,QAAQ,GAAG,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,KAAI,KAAK,CAAC,QAAQ,CAAC;IAEtD,OAAO;QACL,kBAAkB;QAClB,IAAI,EAAE,MAAA,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,mCAAI,QAAQ;QACxC,UAAU,EAAE;YACV,EAAE;YACF,kBAAkB,EAChB,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,EAAE;gBAC5B,CAAC,kBAAkB,CAAC,EAAE,CAAC,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,CAAA;aAC3C,CAAC,IAAI,SAAS;YACjB,QAAQ;SACT;KACF,CAAC;AACJ,CAAC,CAAC"}

package/src/form/search/useSearch.ts

@@ -1,31 +0,0 @@
-import cl from "classnames";
-import { useContext } from "react";
-import { useId } from "../../index";
-import { FieldsetContext } from "../index";
-import { FormFieldProps } from "../useFormField";
-
-export const useSearch = (props: FormFieldProps, prefix: string) => {
-  const { size } = props;
-
-  const fieldset = useContext(FieldsetContext);
-
-  const genId = useId();
-
-  const id = props.id ?? `${prefix}-${genId}`;
-  const inputDescriptionId = `${prefix}-description-${genId}`;
-
-  const disabled = fieldset?.disabled || props.disabled;
-
-  return {
-    inputDescriptionId,
-    size: size ?? fieldset?.size ?? "medium",
-    inputProps: {
-      id,
-      "aria-describedby":
-        cl(props["aria-describedby"], {
-          [inputDescriptionId]: !!props?.description,
-        }) || undefined,
-      disabled,
-    },
-  };
-};