@reykjavik/hanna-react 0.10.119 → 0.10.120

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 (8) hide show
  1. package/AutosuggestSearch.d.ts +2 -0
  2. package/AutosuggestSearch.js +12 -7
  3. package/CHANGELOG.md +6 -0
  4. package/SearchInput.d.ts +2 -1
  5. package/esm/AutosuggestSearch.d.ts +2 -0
  6. package/esm/AutosuggestSearch.js +13 -8
  7. package/esm/SearchInput.d.ts +2 -1
  8. package/package.json +1 -1
package/AutosuggestSearch.d.ts CHANGED
@@ -37,6 +37,8 @@ export type AutosuggestSearchProps<T extends string | object> = {
37
37
  isHighlighted: boolean;
38
38
  }) => JSX.Element | string;
39
39
  itemActionIcon?: 'search' | 'go';
40
+ inputValue?: string;
41
+ defaultInputValue?: string;
40
42
  InputComponent?: (props: SiteSearchInputProps & SearchInputProps) => JSX.Element;
41
43
  renderInputField?: (inputProps: RenderInputComponentProps, texts: AutosuggestSearchI18n) => JSX.Element;
42
44
  texts?: AutosuggestSearchI18n;
package/AutosuggestSearch.js CHANGED
@@ -7,6 +7,7 @@ const react_autosuggest_1 = tslib_1.__importDefault(require("react-autosuggest")
7
7
  const classUtils_1 = require("@hugsmidjan/qj/classUtils");
8
8
  const i18n_1 = require("@reykjavik/hanna-utils/i18n");
9
9
  const SearchInput_js_1 = tslib_1.__importDefault(require("./SearchInput.js"));
10
+ const utils_js_1 = require("./utils.js");
10
11
  exports.defaultAutosuggestSearchTexts = {
11
12
  is: {
12
13
  label: 'Leit á vefnum',
@@ -38,7 +39,7 @@ const AutosuggestSearch = (props) => {
38
39
  : '', renderSuggestion = (opt) => typeof opt === 'object' && 'label' in opt && opt.label != null
39
40
  ? opt.label.toString()
40
41
  : getOptionValue(opt), InputComponent = SearchInput_js_1.default, renderInputField, wrapperProps, } = props;
41
- const [value, setValue] = (0, react_1.useState)('');
42
+ const [inputValue, setInputValue] = (0, utils_js_1.useMixedControlState)(props, 'inputValue', '');
42
43
  const inputRef = (0, react_1.useRef)(null);
43
44
  const txt = (0, i18n_1.getTexts)(props, exports.defaultAutosuggestSearchTexts);
44
45
  const showEmptyMessage = !options.length && emptyMessage;
@@ -50,8 +51,11 @@ const AutosuggestSearch = (props) => {
50
51
  suggestionsList: (0, classUtils_1.modifiedClass)('AutosuggestSearch__list', itemActionIcon && `action--${itemActionIcon}`),
51
52
  suggestion: 'AutosuggestSearch__item',
52
53
  suggestionHighlighted: 'AutosuggestSearch__item--highlighted',
53
- }, focusInputOnSuggestionClick: true, suggestions: showEmptyMessage ? [true] : options, onSuggestionsClearRequested: onClearOptions, onSuggestionsFetchRequested: ({ value }) => onInput(value), getSuggestionValue: showEmptyMessage
54
- ? () => value // Return the input value in case the user uses the up/down keys to select the hidden empty message
54
+ }, focusInputOnSuggestionClick: true, suggestions: showEmptyMessage ? [true] : options, onSuggestionsClearRequested: onClearOptions, onSuggestionsFetchRequested: ( /* { value } */) => {
55
+ // weirdly required prop, but we don't need to do anything here
56
+ // as we run onInput on input change below.
57
+ }, getSuggestionValue: showEmptyMessage
58
+ ? () => inputValue // Return the input value in case the user uses the up/down keys to select the hidden empty message
55
59
  : getOptionValue, onSuggestionSelected: (event, data) => {
56
60
  if (showEmptyMessage) {
57
61
  event.preventDefault();
@@ -71,16 +75,17 @@ const AutosuggestSearch = (props) => {
71
75
  return (react_1.default.createElement("div", Object.assign({}, containerProps, { "aria-label": options.length ? txt.suggestionsLabel : undefined }), contents));
72
76
  }, inputProps: {
73
77
  ref: inputRef,
74
- value: value,
78
+ value: inputValue,
75
79
  onChange: (_, { newValue }) => {
76
- setValue(newValue);
80
+ onInput(newValue);
81
+ setInputValue(newValue);
77
82
  },
78
83
  }, renderInputComponent: renderInputField
79
84
  ? (inputProps) => renderInputField(inputProps, txt)
80
85
  : (inputProps) => {
81
86
  /* prettier-ignore */
82
- const { className, type, disabled, readOnly, required, children, ref } = inputProps, siteSearchProps = tslib_1.__rest(inputProps, ["className", "type", "disabled", "readOnly", "required", "children", "ref"]);
83
- return (react_1.default.createElement(InputComponent, Object.assign({ lang: props.lang }, siteSearchProps, { inputRef: ref, button: button, label: txt.inputLabel, placeholder: txt.placeholder, buttonText: txt.buttonText, onSubmit: onSubmit && (() => onSubmit(value)), onButtonClick: onButtonClick && (() => onButtonClick(value)) })));
87
+ const { className, type, disabled, readOnly, required, children, ref, defaultValue } = inputProps, siteSearchProps = tslib_1.__rest(inputProps, ["className", "type", "disabled", "readOnly", "required", "children", "ref", "defaultValue"]);
88
+ return (react_1.default.createElement(InputComponent, Object.assign({ lang: props.lang, defaultValue: defaultValue }, siteSearchProps, { inputRef: ref, button: button, label: txt.inputLabel, placeholder: txt.placeholder, buttonText: txt.buttonText, onSubmit: onSubmit && (() => onSubmit(inputValue)), onButtonClick: onButtonClick && (() => onButtonClick(inputValue)) })));
84
89
  } }));
85
90
  };
86
91
  exports.AutosuggestSearch = AutosuggestSearch;
package/CHANGELOG.md CHANGED
@@ -4,6 +4,12 @@
4
4
 
5
5
  - ... <!-- Add new lines here. -->
6
6
 
7
+ ## 0.10.120
8
+
9
+ _2024-03-06_
10
+
11
+ - feat: Add props `inputValue`, `defaultInputValue` to `AutosuggestSearch`
12
+
7
13
  ## 0.10.119
8
14
 
9
15
  _2024-02-29_
package/SearchInput.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  import { RefObject } from 'react';
2
2
  import { FormFieldWrappingProps } from './FormField.js';
3
- type InputElmProps = Omit<JSX.IntrinsicElements['input'], 'className' | 'type' | 'disabled' | 'readOnly' | 'required' | 'onSubmit' | 'ref' | 'value'> & {
3
+ type InputElmProps = Omit<JSX.IntrinsicElements['input'], 'className' | 'type' | 'disabled' | 'readOnly' | 'required' | 'onSubmit' | 'ref' | 'value' | 'defaultValue'> & {
4
4
  value?: string;
5
+ defaultValue?: string;
5
6
  };
6
7
  export type SearchInputProps = FormFieldWrappingProps & {
7
8
  small?: boolean;
package/esm/AutosuggestSearch.d.ts CHANGED
@@ -37,6 +37,8 @@ export type AutosuggestSearchProps<T extends string | object> = {
37
37
  isHighlighted: boolean;
38
38
  }) => JSX.Element | string;
39
39
  itemActionIcon?: 'search' | 'go';
40
+ inputValue?: string;
41
+ defaultInputValue?: string;
40
42
  InputComponent?: (props: SiteSearchInputProps & SearchInputProps) => JSX.Element;
41
43
  renderInputField?: (inputProps: RenderInputComponentProps, texts: AutosuggestSearchI18n) => JSX.Element;
42
44
  texts?: AutosuggestSearchI18n;
package/esm/AutosuggestSearch.js CHANGED
@@ -1,9 +1,10 @@
1
1
  import { __rest } from "tslib";
2
- import React, { useRef, useState } from 'react';
2
+ import React, { useRef } from 'react';
3
3
  import Autosuggest from 'react-autosuggest';
4
4
  import { modifiedClass } from '@hugsmidjan/qj/classUtils';
5
5
  import { getTexts } from '@reykjavik/hanna-utils/i18n';
6
6
  import SearchInput from './SearchInput.js';
7
+ import { useMixedControlState } from './utils.js';
7
8
  export const defaultAutosuggestSearchTexts = {
8
9
  is: {
9
10
  label: 'Leit á vefnum',
@@ -35,7 +36,7 @@ export const AutosuggestSearch = (props) => {
35
36
  : '', renderSuggestion = (opt) => typeof opt === 'object' && 'label' in opt && opt.label != null
36
37
  ? opt.label.toString()
37
38
  : getOptionValue(opt), InputComponent = SearchInput, renderInputField, wrapperProps, } = props;
38
- const [value, setValue] = useState('');
39
+ const [inputValue, setInputValue] = useMixedControlState(props, 'inputValue', '');
39
40
  const inputRef = useRef(null);
40
41
  const txt = getTexts(props, defaultAutosuggestSearchTexts);
41
42
  const showEmptyMessage = !options.length && emptyMessage;
@@ -47,8 +48,11 @@ export const AutosuggestSearch = (props) => {
47
48
  suggestionsList: modifiedClass('AutosuggestSearch__list', itemActionIcon && `action--${itemActionIcon}`),
48
49
  suggestion: 'AutosuggestSearch__item',
49
50
  suggestionHighlighted: 'AutosuggestSearch__item--highlighted',
50
- }, focusInputOnSuggestionClick: true, suggestions: showEmptyMessage ? [true] : options, onSuggestionsClearRequested: onClearOptions, onSuggestionsFetchRequested: ({ value }) => onInput(value), getSuggestionValue: showEmptyMessage
51
- ? () => value // Return the input value in case the user uses the up/down keys to select the hidden empty message
51
+ }, focusInputOnSuggestionClick: true, suggestions: showEmptyMessage ? [true] : options, onSuggestionsClearRequested: onClearOptions, onSuggestionsFetchRequested: ( /* { value } */) => {
52
+ // weirdly required prop, but we don't need to do anything here
53
+ // as we run onInput on input change below.
54
+ }, getSuggestionValue: showEmptyMessage
55
+ ? () => inputValue // Return the input value in case the user uses the up/down keys to select the hidden empty message
52
56
  : getOptionValue, onSuggestionSelected: (event, data) => {
53
57
  if (showEmptyMessage) {
54
58
  event.preventDefault();
@@ -68,15 +72,16 @@ export const AutosuggestSearch = (props) => {
68
72
  return (React.createElement("div", Object.assign({}, containerProps, { "aria-label": options.length ? txt.suggestionsLabel : undefined }), contents));
69
73
  }, inputProps: {
70
74
  ref: inputRef,
71
- value: value,
75
+ value: inputValue,
72
76
  onChange: (_, { newValue }) => {
73
- setValue(newValue);
77
+ onInput(newValue);
78
+ setInputValue(newValue);
74
79
  },
75
80
  }, renderInputComponent: renderInputField
76
81
  ? (inputProps) => renderInputField(inputProps, txt)
77
82
  : (inputProps) => {
78
83
  /* prettier-ignore */
79
- const { className, type, disabled, readOnly, required, children, ref } = inputProps, siteSearchProps = __rest(inputProps, ["className", "type", "disabled", "readOnly", "required", "children", "ref"]);
80
- return (React.createElement(InputComponent, Object.assign({ lang: props.lang }, siteSearchProps, { inputRef: ref, button: button, label: txt.inputLabel, placeholder: txt.placeholder, buttonText: txt.buttonText, onSubmit: onSubmit && (() => onSubmit(value)), onButtonClick: onButtonClick && (() => onButtonClick(value)) })));
84
+ const { className, type, disabled, readOnly, required, children, ref, defaultValue } = inputProps, siteSearchProps = __rest(inputProps, ["className", "type", "disabled", "readOnly", "required", "children", "ref", "defaultValue"]);
85
+ return (React.createElement(InputComponent, Object.assign({ lang: props.lang, defaultValue: defaultValue }, siteSearchProps, { inputRef: ref, button: button, label: txt.inputLabel, placeholder: txt.placeholder, buttonText: txt.buttonText, onSubmit: onSubmit && (() => onSubmit(inputValue)), onButtonClick: onButtonClick && (() => onButtonClick(inputValue)) })));
81
86
  } }));
82
87
  };
package/esm/SearchInput.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  import { RefObject } from 'react';
2
2
  import { FormFieldWrappingProps } from './FormField.js';
3
- type InputElmProps = Omit<JSX.IntrinsicElements['input'], 'className' | 'type' | 'disabled' | 'readOnly' | 'required' | 'onSubmit' | 'ref' | 'value'> & {
3
+ type InputElmProps = Omit<JSX.IntrinsicElements['input'], 'className' | 'type' | 'disabled' | 'readOnly' | 'required' | 'onSubmit' | 'ref' | 'value' | 'defaultValue'> & {
4
4
  value?: string;
5
+ defaultValue?: string;
5
6
  };
6
7
  export type SearchInputProps = FormFieldWrappingProps & {
7
8
  small?: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@reykjavik/hanna-react",
3
- "version": "0.10.119",
3
+ "version": "0.10.120",
4
4
  "author": "Reykjavík (http://www.reykjavik.is)",
5
5
  "contributors": [
6
6
  "Hugsmiðjan ehf (http://www.hugsmidjan.is)",