@navikt/ds-react 0.17.17 → 0.17.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/cjs/form/search/Search.js +11 -17
  2. package/cjs/form/search/SearchButton.js +1 -1
  3. package/esm/form/search/Search.d.ts +4 -4
  4. package/esm/form/search/Search.js +13 -19
  5. package/esm/form/search/Search.js.map +1 -1
  6. package/esm/form/search/SearchButton.js +1 -1
  7. package/esm/form/search/SearchButton.js.map +1 -1
  8. package/package.json +2 -2
  9. package/src/form/search/Search.tsx +22 -24
  10. package/src/form/search/SearchButton.tsx +1 -1
  11. package/src/form/search/search-themes.stories.tsx +52 -0
  12. package/src/form/search/search.stories.tsx +10 -3
package/cjs/form/search/Search.js CHANGED
@@ -48,34 +48,27 @@ const useSearch_1 = require("./useSearch");
48
48
  exports.SearchContext = react_1.default.createContext(null);
49
49
  const Search = (0, react_1.forwardRef)((props, ref) => {
50
50
  const { inputProps, size = "medium", inputDescriptionId } = (0, useSearch_1.useSearch)(props, "searchfield");
51
- 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"]);
51
+ 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"]);
52
52
  const searchRef = (0, react_1.useRef)(null);
53
53
  const mergedRef = (0, react_merge_refs_1.default)([searchRef, ref]);
54
54
  const [wrapperRef, setWrapperRef] = (0, react_1.useState)(null);
55
- const [controlledValue, setControlledValue] = (0, react_1.useState)(value !== null && value !== void 0 ? value : "");
55
+ const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : "");
56
56
  const handleChange = (0, react_1.useCallback)((v) => {
57
- var _a;
58
- searchRef.current && value === undefined && setControlledValue(v);
59
- (_a = props === null || props === void 0 ? void 0 : props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v);
60
- }, [props, value]);
57
+ value === undefined && setInternalValue(v);
58
+ onChange === null || onChange === void 0 ? void 0 : onChange(v);
59
+ }, [onChange, value]);
61
60
  const handleClear = (0, react_1.useCallback)((event) => {
62
61
  var _a, _b;
63
62
  onClear === null || onClear === void 0 ? void 0 : onClear(event);
64
63
  handleChange("");
65
- if (searchRef.current && value === undefined) {
66
- searchRef.current.value = "";
67
- }
68
64
  searchRef.current && ((_b = (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a));
69
- }, [handleChange, onClear, value]);
65
+ }, [handleChange, onClear]);
70
66
  (0, __1.useEventListener)("keydown", (0, react_1.useCallback)((e) => {
71
67
  if (e.key === "Escape") {
72
68
  e.preventDefault();
73
69
  handleClear({ trigger: "Escape", event: e });
74
70
  }
75
71
  }, [handleClear]), wrapperRef);
76
- (0, react_1.useEffect)(() => {
77
- value !== undefined && setControlledValue(value);
78
- }, [value]);
79
72
  return (react_1.default.createElement("div", { ref: setWrapperRef, className: (0, classnames_1.default)(className, "navds-form-field", `navds-form-field--${size}`, "navds-search", {
80
73
  "navds-search--disabled": !!inputProps.disabled,
81
74
  }) },
@@ -87,16 +80,17 @@ const Search = (0, react_1.forwardRef)((props, ref) => {
87
80
  }), id: inputDescriptionId, size: size }, description)),
88
81
  react_1.default.createElement("div", { className: "navds-search__wrapper" },
89
82
  react_1.default.createElement("div", { className: "navds-search__wrapper-inner" },
90
- 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"}`) })),
91
- controlledValue && clearButton && (react_1.default.createElement("button", { type: "button", onClick: (e) => handleClear({ trigger: "Click", event: e }), className: "navds-search__button-clear" },
83
+ variant === "simple" && (react_1.default.createElement(ds_icons_1.Search, { "aria-hidden": true, className: "navds-search__search-icon" })),
84
+ 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}`) })),
85
+ (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" },
92
86
  react_1.default.createElement("span", { className: "navds-sr-only" }, clearButtonLabel ? clearButtonLabel : "Tøm"),
93
87
  react_1.default.createElement(ds_icons_1.Close, { "aria-hidden": true })))),
94
88
  react_1.default.createElement(exports.SearchContext.Provider, { value: {
95
89
  size,
96
90
  disabled: inputProps.disabled,
97
91
  variant,
98
- onSearch: () => onSearch === null || onSearch === void 0 ? void 0 : onSearch(controlledValue),
99
- } }, children ? children : react_1.default.createElement(SearchButton_1.default, null)))));
92
+ onSearch: () => onSearch === null || onSearch === void 0 ? void 0 : onSearch(value !== null && value !== void 0 ? value : internalValue),
93
+ } }, children ? children : variant !== "simple" && react_1.default.createElement(SearchButton_1.default, null)))));
100
94
  });
101
95
  Search.Button = SearchButton_1.default;
102
96
  exports.default = Search;
package/cjs/form/search/SearchButton.js CHANGED
@@ -51,7 +51,7 @@ const SearchButton = (0, react_1.forwardRef)((_a, ref) => {
51
51
  return null;
52
52
  }
53
53
  const { size, variant, onSearch } = context;
54
- 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) => {
54
+ 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) => {
55
55
  onSearch === null || onSearch === void 0 ? void 0 : onSearch();
56
56
  onClick === null || onClick === void 0 ? void 0 : onClick(e);
57
57
  } }),
package/esm/form/search/Search.d.ts CHANGED
@@ -44,9 +44,9 @@ export interface SearchProps extends Omit<FormFieldProps, "error" | "errorId">,
44
44
  clearButton?: boolean;
45
45
  /**
46
46
  * Changes button-variant
47
- * @default "tertiary"
47
+ * @default "primary"
48
48
  */
49
- variant?: "tertiary" | "primary";
49
+ variant?: "primary" | "secondary" | "simple";
50
50
  }
51
51
  interface SearchComponent extends React.ForwardRefExoticComponent<SearchProps & React.RefAttributes<HTMLDivElement>> {
52
52
  Button: SearchButtonType;
@@ -54,8 +54,8 @@ interface SearchComponent extends React.ForwardRefExoticComponent<SearchProps &
54
54
  export interface SearchContextProps {
55
55
  disabled?: boolean;
56
56
  size: "medium" | "small";
57
- variant?: "tertiary" | "primary";
58
- onSearch?: () => void;
57
+ variant: "primary" | "secondary" | "simple";
58
+ onSearch: () => void;
59
59
  }
60
60
  export declare const SearchContext: React.Context<SearchContextProps | null>;
61
61
  declare const Search: SearchComponent;
package/esm/form/search/Search.js CHANGED
@@ -9,9 +9,9 @@ var __rest = (this && this.__rest) || function (s, e) {
9
9
  }
10
10
  return t;
11
11
  };
12
- import { Close } from "@navikt/ds-icons";
12
+ import { Close, Search as SearchIcon } from "@navikt/ds-icons";
13
13
  import cl from "classnames";
14
- import React, { forwardRef, useCallback, useEffect, useRef, useState, } from "react";
14
+ import React, { forwardRef, useCallback, useRef, useState, } from "react";
15
15
  import mergeRefs from "react-merge-refs";
16
16
  import { BodyShort, Label, omit, useEventListener } from "../..";
17
17
  import SearchButton from "./SearchButton";
@@ -19,34 +19,27 @@ import { useSearch } from "./useSearch";
19
19
  export const SearchContext = React.createContext(null);
20
20
  const Search = forwardRef((props, ref) => {
21
21
  const { inputProps, size = "medium", inputDescriptionId } = useSearch(props, "searchfield");
22
- 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"]);
22
+ 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"]);
23
23
  const searchRef = useRef(null);
24
24
  const mergedRef = mergeRefs([searchRef, ref]);
25
25
  const [wrapperRef, setWrapperRef] = useState(null);
26
- const [controlledValue, setControlledValue] = useState(value !== null && value !== void 0 ? value : "");
26
+ const [internalValue, setInternalValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : "");
27
27
  const handleChange = useCallback((v) => {
28
- var _a;
29
- searchRef.current && value === undefined && setControlledValue(v);
30
- (_a = props === null || props === void 0 ? void 0 : props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v);
31
- }, [props, value]);
28
+ value === undefined && setInternalValue(v);
29
+ onChange === null || onChange === void 0 ? void 0 : onChange(v);
30
+ }, [onChange, value]);
32
31
  const handleClear = useCallback((event) => {
33
32
  var _a, _b;
34
33
  onClear === null || onClear === void 0 ? void 0 : onClear(event);
35
34
  handleChange("");
36
- if (searchRef.current && value === undefined) {
37
- searchRef.current.value = "";
38
- }
39
35
  searchRef.current && ((_b = (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a));
40
- }, [handleChange, onClear, value]);
36
+ }, [handleChange, onClear]);
41
37
  useEventListener("keydown", useCallback((e) => {
42
38
  if (e.key === "Escape") {
43
39
  e.preventDefault();
44
40
  handleClear({ trigger: "Escape", event: e });
45
41
  }
46
42
  }, [handleClear]), wrapperRef);
47
- useEffect(() => {
48
- value !== undefined && setControlledValue(value);
49
- }, [value]);
50
43
  return (React.createElement("div", { ref: setWrapperRef, className: cl(className, "navds-form-field", `navds-form-field--${size}`, "navds-search", {
51
44
  "navds-search--disabled": !!inputProps.disabled,
52
45
  }) },
@@ -58,16 +51,17 @@ const Search = forwardRef((props, ref) => {
58
51
  }), id: inputDescriptionId, size: size }, description)),
59
52
  React.createElement("div", { className: "navds-search__wrapper" },
60
53
  React.createElement("div", { className: "navds-search__wrapper-inner" },
61
- 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"}`) })),
62
- controlledValue && clearButton && (React.createElement("button", { type: "button", onClick: (e) => handleClear({ trigger: "Click", event: e }), className: "navds-search__button-clear" },
54
+ variant === "simple" && (React.createElement(SearchIcon, { "aria-hidden": true, className: "navds-search__search-icon" })),
55
+ 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}`) })),
56
+ (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" },
63
57
  React.createElement("span", { className: "navds-sr-only" }, clearButtonLabel ? clearButtonLabel : "Tøm"),
64
58
  React.createElement(Close, { "aria-hidden": true })))),
65
59
  React.createElement(SearchContext.Provider, { value: {
66
60
  size,
67
61
  disabled: inputProps.disabled,
68
62
  variant,
69
- onSearch: () => onSearch === null || onSearch === void 0 ? void 0 : onSearch(controlledValue),
70
- } }, children ? children : React.createElement(SearchButton, null)))));
63
+ onSearch: () => onSearch === null || onSearch === void 0 ? void 0 : onSearch(value !== null && value !== void 0 ? value : internalValue),
64
+ } }, children ? children : variant !== "simple" && React.createElement(SearchButton, null)))));
71
65
  });
72
66
  Search.Button = SearchButton;
73
67
  export default Search;
package/esm/form/search/Search.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Search.js","sourceRoot":"","sources":["../../../src/form/search/Search.tsx"],"names":[],"mappings":"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"}
1
+ {"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 CHANGED
@@ -23,7 +23,7 @@ const SearchButton = forwardRef((_a, ref) => {
23
23
  return null;
24
24
  }
25
25
  const { size, variant, onSearch } = context;
26
- 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) => {
26
+ 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) => {
27
27
  onSearch === null || onSearch === void 0 ? void 0 : onSearch();
28
28
  onClick === null || onClick === void 0 ? void 0 : onClick(e);
29
29
  } }),
package/esm/form/search/SearchButton.js.map CHANGED
@@ -1 +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"}
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,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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-react",
3
- "version": "0.17.17",
3
+ "version": "0.17.18",
4
4
  "private": false,
5
5
  "description": "NAV designsystem react components",
6
6
  "author": "NAV Designsystem team",
@@ -69,5 +69,5 @@
69
69
  "@types/react": "^17.0.30",
70
70
  "react": "^17.0.0"
71
71
  },
72
- "gitHead": "fcbd614a3444afa7fd07c0c133cc754206e5f106"
72
+ "gitHead": "dd14eb272e1bb17a38f3d185ee87cb70a23e7ef0"
73
73
  }
package/src/form/search/Search.tsx CHANGED
@@ -1,10 +1,9 @@
1
- import { Close } from "@navikt/ds-icons";
1
+ import { Close, Search as SearchIcon } from "@navikt/ds-icons";
2
2
  import cl from "classnames";
3
3
  import React, {
4
4
  forwardRef,
5
5
  InputHTMLAttributes,
6
6
  useCallback,
7
- useEffect,
8
7
  useRef,
9
8
  useState,
10
9
  } from "react";
@@ -59,9 +58,9 @@ export interface SearchProps
59
58
  clearButton?: boolean;
60
59
  /**
61
60
  * Changes button-variant
62
- * @default "tertiary"
61
+ * @default "primary"
63
62
  */
64
- variant?: "tertiary" | "primary";
63
+ variant?: "primary" | "secondary" | "simple";
65
64
  }
66
65
 
67
66
  interface SearchComponent
@@ -74,8 +73,8 @@ interface SearchComponent
74
73
  export interface SearchContextProps {
75
74
  disabled?: boolean;
76
75
  size: "medium" | "small";
77
- variant?: "tertiary" | "primary";
78
- onSearch?: () => void;
76
+ variant: "primary" | "secondary" | "simple";
77
+ onSearch: () => void;
79
78
  }
80
79
 
81
80
  export const SearchContext = React.createContext<SearchContextProps | null>(
@@ -99,7 +98,9 @@ const Search = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {
99
98
  clearButton = true,
100
99
  children,
101
100
  onSearch,
102
- variant = "tertiary",
101
+ variant = "primary",
102
+ defaultValue,
103
+ onChange,
103
104
  ...rest
104
105
  } = props;
105
106
 
@@ -107,26 +108,23 @@ const Search = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {
107
108
  const mergedRef = mergeRefs([searchRef, ref]);
108
109
  const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);
109
110
 
110
- const [controlledValue, setControlledValue] = useState(value ?? "");
111
+ const [internalValue, setInternalValue] = useState(defaultValue ?? "");
111
112
 
112
113
  const handleChange = useCallback(
113
114
  (v: string) => {
114
- searchRef.current && value === undefined && setControlledValue(v);
115
- props?.onChange?.(v);
115
+ value === undefined && setInternalValue(v);
116
+ onChange?.(v);
116
117
  },
117
- [props, value]
118
+ [onChange, value]
118
119
  );
119
120
 
120
121
  const handleClear = useCallback(
121
122
  (event: SearchClearEvent) => {
122
123
  onClear?.(event);
123
124
  handleChange("");
124
- if (searchRef.current && value === undefined) {
125
- searchRef.current.value = "";
126
- }
127
125
  searchRef.current && searchRef.current?.focus?.();
128
126
  },
129
- [handleChange, onClear, value]
127
+ [handleChange, onClear]
130
128
  );
131
129
 
132
130
  useEventListener(
@@ -143,10 +141,6 @@ const Search = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {
143
141
  wrapperRef
144
142
  );
145
143
 
146
- useEffect(() => {
147
- value !== undefined && setControlledValue(value);
148
- }, [value]);
149
-
150
144
  return (
151
145
  <div
152
146
  ref={setWrapperRef}
@@ -184,23 +178,27 @@ const Search = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {
184
178
  )}
185
179
  <div className="navds-search__wrapper">
186
180
  <div className="navds-search__wrapper-inner">
181
+ {variant === "simple" && (
182
+ <SearchIcon aria-hidden className="navds-search__search-icon" />
183
+ )}
187
184
  <input
188
185
  ref={mergedRef}
189
186
  {...omit(rest, ["size"])}
190
187
  {...inputProps}
191
- {...(props.value !== undefined && { value: props.value })}
188
+ value={value ?? internalValue}
192
189
  onChange={(e) => handleChange(e.target.value)}
193
190
  type="search"
194
191
  role="searchbox"
195
192
  className={cl(
196
193
  className,
197
194
  "navds-search__input",
195
+ `navds-search__input--${variant}`,
198
196
  "navds-text-field__input",
199
197
  "navds-body-short",
200
- `navds-body-${size ?? "medium"}`
198
+ `navds-body-${size}`
201
199
  )}
202
200
  />
203
- {controlledValue && clearButton && (
201
+ {(value ?? internalValue) && clearButton && (
204
202
  <button
205
203
  type="button"
206
204
  onClick={(e) => handleClear({ trigger: "Click", event: e })}
@@ -218,10 +216,10 @@ const Search = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {
218
216
  size,
219
217
  disabled: inputProps.disabled,
220
218
  variant,
221
- onSearch: () => onSearch?.(controlledValue),
219
+ onSearch: () => onSearch?.(value ?? internalValue),
222
220
  }}
223
221
  >
224
- {children ? children : <SearchButton />}
222
+ {children ? children : variant !== "simple" && <SearchButton />}
225
223
  </SearchContext.Provider>
226
224
  </div>
227
225
  </div>
package/src/form/search/SearchButton.tsx CHANGED
@@ -33,7 +33,7 @@ const SearchButton: SearchButtonType = forwardRef(
33
33
  {...rest}
34
34
  ref={ref}
35
35
  size={size}
36
- variant={variant}
36
+ variant={variant === "secondary" ? "secondary" : "primary"}
37
37
  className={cl("navds-search__button-search", className)}
38
38
  disabled={context?.disabled ?? disabled}
39
39
  onClick={(e) => {
package/src/form/search/search-themes.stories.tsx ADDED
@@ -0,0 +1,52 @@
1
+ import { Meta } from "@storybook/react/types-6-0";
2
+ import React from "react";
3
+ import { Heading } from "../..";
4
+ import { Search } from "..";
5
+
6
+ export default {
7
+ title: "ds-react/form/search",
8
+ component: Search,
9
+ } as Meta;
10
+
11
+ export const LightTheme = () => (
12
+ <div
13
+ style={{ maxWidth: 400, display: "flex", flexDirection: "column", gap: 16 }}
14
+ >
15
+ <Heading size="xlarge">Search</Heading>
16
+ <Heading level="2" size="large">
17
+ size medium
18
+ </Heading>
19
+ <Search label="hidden label" placeholder="Søk" />
20
+ <Search label="hidden label" variant="secondary" defaultValue="dagpenger" />
21
+ <Search label="hidden label" variant="simple" placeholder="Søk" />
22
+ <Search label="with label" hideLabel={false} />
23
+
24
+ <Heading level="2" size="large">
25
+ size small
26
+ </Heading>
27
+ <Search label="hidden label" size="small" placeholder="Søk" />
28
+ <Search
29
+ label="hidden label"
30
+ variant="secondary"
31
+ size="small"
32
+ defaultValue="dagpenger"
33
+ />
34
+ <Search
35
+ label="hidden label"
36
+ variant="simple"
37
+ size="small"
38
+ placeholder="Søk"
39
+ />
40
+ <Search label="with label" hideLabel={false} size="small" />
41
+ </div>
42
+ );
43
+
44
+ export const DarkTheme = () => (
45
+ <div data-theme="dark">
46
+ <LightTheme />
47
+ </div>
48
+ );
49
+
50
+ DarkTheme.parameters = {
51
+ backgrounds: { default: "dark" },
52
+ };
package/src/form/search/search.stories.tsx CHANGED
@@ -21,11 +21,18 @@ export const All = () => {
21
21
  <h1>Search</h1>
22
22
 
23
23
  <Search label="Søk alle sider om X og Y" onSearch={console.log}></Search>
24
- <h2>Primary search</h2>
24
+ <h2>Secondary</h2>
25
25
  <Search
26
26
  label="Søk alle sider om X og Y"
27
27
  onSearch={console.log}
28
- variant="primary"
28
+ variant="secondary"
29
+ ></Search>
30
+
31
+ <h2>No button</h2>
32
+ <Search
33
+ label="Søk alle sider om X og Y"
34
+ onSearch={console.log}
35
+ variant="simple"
29
36
  ></Search>
30
37
 
31
38
  <h2>Search small</h2>
@@ -42,7 +49,7 @@ export const All = () => {
42
49
  description="Beskrivelse av søket"
43
50
  size="small"
44
51
  hideLabel
45
- variant="primary"
52
+ variant="secondary"
46
53
  >
47
54
  <Search.Button />
48
55
  </Search>