@reykjavik/hanna-react 0.10.119 → 0.10.121

package/AutosuggestSearch.d.ts

@@ -37,6 +37,8 @@ export type AutosuggestSearchProps<T extends string | object> = {
         isHighlighted: boolean;
     }) => JSX.Element | string;
     itemActionIcon?: 'search' | 'go';
+    inputValue?: string;
+    defaultInputValue?: string;
     InputComponent?: (props: SiteSearchInputProps & SearchInputProps) => JSX.Element;
     renderInputField?: (inputProps: RenderInputComponentProps, texts: AutosuggestSearchI18n) => JSX.Element;
     texts?: AutosuggestSearchI18n;

package/AutosuggestSearch.js

@@ -7,6 +7,7 @@ const react_autosuggest_1 = tslib_1.__importDefault(require("react-autosuggest")
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const SearchInput_js_1 = tslib_1.__importDefault(require("./SearchInput.js"));
+const utils_js_1 = require("./utils.js");
 exports.defaultAutosuggestSearchTexts = {
     is: {
         label: 'Leit á vefnum',
@@ -38,7 +39,7 @@ const AutosuggestSearch = (props) => {
             : '', renderSuggestion = (opt) => typeof opt === 'object' && 'label' in opt && opt.label != null
         ? opt.label.toString()
         : getOptionValue(opt), InputComponent = SearchInput_js_1.default, renderInputField, wrapperProps, } = props;
-    const [value, setValue] = (0, react_1.useState)('');
+    const [inputValue, setInputValue] = (0, utils_js_1.useMixedControlState)(props, 'inputValue', '');
     const inputRef = (0, react_1.useRef)(null);
     const txt = (0, i18n_1.getTexts)(props, exports.defaultAutosuggestSearchTexts);
     const showEmptyMessage = !options.length && emptyMessage;
@@ -50,8 +51,11 @@ const AutosuggestSearch = (props) => {
             suggestionsList: (0, classUtils_1.modifiedClass)('AutosuggestSearch__list', itemActionIcon && `action--${itemActionIcon}`),
             suggestion: 'AutosuggestSearch__item',
             suggestionHighlighted: 'AutosuggestSearch__item--highlighted',
-        }, focusInputOnSuggestionClick: true, suggestions: showEmptyMessage ? [true] : options, onSuggestionsClearRequested: onClearOptions, onSuggestionsFetchRequested: ({ value }) => onInput(value), getSuggestionValue: showEmptyMessage
-            ? () => value // Return the input value in case the user uses the up/down keys to select the hidden empty message
+        }, focusInputOnSuggestionClick: true, suggestions: showEmptyMessage ? [true] : options, onSuggestionsClearRequested: onClearOptions, onSuggestionsFetchRequested: ( /* { value } */) => {
+            // weirdly required prop, but we don't need to do anything here
+            // as we run onInput on input change below.
+        }, getSuggestionValue: showEmptyMessage
+            ? () => inputValue // Return the input value in case the user uses the up/down keys to select the hidden empty message
             : getOptionValue, onSuggestionSelected: (event, data) => {
             if (showEmptyMessage) {
                 event.preventDefault();
@@ -71,16 +75,17 @@ const AutosuggestSearch = (props) => {
             return (react_1.default.createElement("div", Object.assign({}, containerProps, { "aria-label": options.length ? txt.suggestionsLabel : undefined }), contents));
         }, inputProps: {
             ref: inputRef,
-            value: value,
+            value: inputValue,
             onChange: (_, { newValue }) => {
-                setValue(newValue);
+                onInput(newValue);
+                setInputValue(newValue);
             },
         }, renderInputComponent: renderInputField
             ? (inputProps) => renderInputField(inputProps, txt)
             : (inputProps) => {
                 /* prettier-ignore */
-                const { className, type, disabled, readOnly, required, children, ref } = inputProps, siteSearchProps = tslib_1.__rest(inputProps, ["className", "type", "disabled", "readOnly", "required", "children", "ref"]);
-                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)) })));
+                const { className, type, disabled, readOnly, required, children, ref, defaultValue } = inputProps, siteSearchProps = tslib_1.__rest(inputProps, ["className", "type", "disabled", "readOnly", "required", "children", "ref", "defaultValue"]);
+                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)) })));
             } }));
 };
 exports.AutosuggestSearch = AutosuggestSearch;

package/CHANGELOG.md

@@ -4,6 +4,20 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.121
+
+_2024-03-14_
+
+- fix: Translate `FormField` and `Checkbox` required label to 'en' and 'pl'
+- fix: `DatePicker` only partially reflected the current `DEFAULT_LANG`
+
+## 0.10.120
+
+_2024-03-06_
+
+- feat: Add props `inputValue`, `defaultInputValue` to `AutosuggestSearch`
+- fix: `AutosuggestSearch` not calling `onInput` when input is emptied
+
 ## 0.10.119
 
 _2024-02-29_

package/Datepicker.js

@@ -153,7 +153,7 @@ const Datepicker = (props) => {
                         return elm;
                     }) }, addFocusProps()),
                 isoMode && (react_1.default.createElement("input", { type: "hidden", name: name, value: value === null || value === void 0 ? void 0 : value.toISOString().slice(0, 10) })),
-                react_1.default.createElement(ReactDatepicker_js_1.ReactDatePicker, Object.assign({ id: domid, required: inputProps.required, disabled: inputProps.disabled, readOnly: inputProps.readOnly, selected: value, name: isoMode ? undefined : name, locale: lang, dateFormat: normalizedDateFormats, onChange: (date) => {
+                react_1.default.createElement(ReactDatepicker_js_1.ReactDatePicker, Object.assign({ id: domid, required: inputProps.required, disabled: inputProps.disabled, readOnly: inputProps.readOnly, selected: value, name: isoMode ? undefined : name, locale: lang || i18n_1.DEFAULT_LANG, dateFormat: normalizedDateFormats, onChange: (date) => {
                         date = date || undefined;
                         setValue(date);
                         onChange && onChange(date);

package/FormField.js

@@ -4,6 +4,7 @@ exports.groupFormFieldWrapperProps = exports.getFormFieldWrapperProps = exports.
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const env_js_1 = require("./utils/env.js");
 const useDomid_js_1 = require("./utils/useDomid.js");
 const utils_js_1 = require("./utils.js");
@@ -14,6 +15,12 @@ const inputClassNames = {
     control: 'FormField__control',
 };
 // ---------------------------------------------------------------------------
+const defaultReqText = {
+    is: 'Þarf að fylla út',
+    en: 'Required',
+    pl: 'Wymagane',
+};
+// ---------------------------------------------------------------------------
 // eslint-disable-next-line complexity
 const FormField = (props) => {
     const { extraClassName, className, small, group, LabelTag = group ? 'h4' : undefined, label, assistText, hideLabel, empty, filled, readOnly, disabled, invalid, errorMessage, required, reqText, // TODO: i18n
@@ -57,7 +64,7 @@ const FormField = (props) => {
     const labelId = LabelTag ? `label:${domid}` : undefined;
     const reqStar = required && reqText !== false && (react_1.default.createElement("abbr", { className: "FormField__label__reqstar", 
         // FIXME: add mo-better i18n thinking
-        title: `${reqText || 'Þarf að fylla út'}: ` }, "*"));
+        title: `${reqText || defaultReqText[i18n_1.DEFAULT_LANG]}: ` }, "*"));
     const inputProps = {
         id: domid,
         disabled: disabled,

package/SearchInput.d.ts

@@ -1,7 +1,8 @@
 import { RefObject } from 'react';
 import { FormFieldWrappingProps } from './FormField.js';
-type InputElmProps = Omit<JSX.IntrinsicElements['input'], 'className' | 'type' | 'disabled' | 'readOnly' | 'required' | 'onSubmit' | 'ref' | 'value'> & {
+type InputElmProps = Omit<JSX.IntrinsicElements['input'], 'className' | 'type' | 'disabled' | 'readOnly' | 'required' | 'onSubmit' | 'ref' | 'value' | 'defaultValue'> & {
     value?: string;
+    defaultValue?: string;
 };
 export type SearchInputProps = FormFieldWrappingProps & {
     small?: boolean;

package/_abstract/_TogglerInput.d.ts

@@ -4,12 +4,13 @@ export type TogglerInputProps = {
     label: string | JSX.Element;
     children?: never;
     invalid?: boolean;
-    /** Hidden label prefix text to indicate that the field is required.
+    /**
+     * Hidden label prefix text to indicate that the field is required.
      *
      * If your field is required but should not say so in its label
      * then set this prop to `false`
      *
-     * Default: `"Þarf að fylla út"`
+     * Default: `"Þarf að haka í" / "Must be checked" / "Należy sprawdzić"`.
      * */
     reqText?: string | false;
     hideLabel?: boolean;

package/_abstract/_TogglerInput.js

@@ -4,7 +4,13 @@ exports.TogglerInput = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const i18n_js_1 = require("@reykjavik/hanna-utils/i18n.js");
 const useDomid_js_1 = require("../utils/useDomid.js");
+const defaultReqText = {
+    is: 'Þarf að haka í',
+    en: 'Must be checked',
+    pl: 'Należy sprawdzić',
+};
 // eslint-disable-next-line complexity
 const TogglerInput = (props) => {
     const { bem, modifier, className, label, hideLabel, invalid, errorMessage, Wrapper = 'div', required, reqText, type, id, innerWrap, wrapperProps, inputProps } = props, restInputProps = tslib_1.__rest(props, ["bem", "modifier", "className", "label", "hideLabel", "invalid", "errorMessage", "Wrapper", "required", "reqText", "type", "id", "innerWrap", "wrapperProps", "inputProps"]);
@@ -12,7 +18,7 @@ const TogglerInput = (props) => {
     const errorId = errorMessage && `error${domid}`;
     const reqStar = required && reqText !== false && (react_1.default.createElement("abbr", { className: `${bem}__label__reqstar`, 
         // FIXME: add mo-better i18n thinking
-        title: `${reqText || 'Þarf að haka í'}: ` }, "*"));
+        title: `${reqText || defaultReqText[i18n_js_1.DEFAULT_LANG]}: ` }, "*"));
     const readOnly = restInputProps.readOnly || (inputProps || {}).readOnly;
     const labelContent = (react_1.default.createElement(react_1.default.Fragment, null,
         ' ',

package/esm/AutosuggestSearch.d.ts

@@ -37,6 +37,8 @@ export type AutosuggestSearchProps<T extends string | object> = {
         isHighlighted: boolean;
     }) => JSX.Element | string;
     itemActionIcon?: 'search' | 'go';
+    inputValue?: string;
+    defaultInputValue?: string;
     InputComponent?: (props: SiteSearchInputProps & SearchInputProps) => JSX.Element;
     renderInputField?: (inputProps: RenderInputComponentProps, texts: AutosuggestSearchI18n) => JSX.Element;
     texts?: AutosuggestSearchI18n;

package/esm/AutosuggestSearch.js

@@ -1,9 +1,10 @@
 import { __rest } from "tslib";
-import React, { useRef, useState } from 'react';
+import React, { useRef } from 'react';
 import Autosuggest from 'react-autosuggest';
 import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { getTexts } from '@reykjavik/hanna-utils/i18n';
 import SearchInput from './SearchInput.js';
+import { useMixedControlState } from './utils.js';
 export const defaultAutosuggestSearchTexts = {
     is: {
         label: 'Leit á vefnum',
@@ -35,7 +36,7 @@ export const AutosuggestSearch = (props) => {
             : '', renderSuggestion = (opt) => typeof opt === 'object' && 'label' in opt && opt.label != null
         ? opt.label.toString()
         : getOptionValue(opt), InputComponent = SearchInput, renderInputField, wrapperProps, } = props;
-    const [value, setValue] = useState('');
+    const [inputValue, setInputValue] = useMixedControlState(props, 'inputValue', '');
     const inputRef = useRef(null);
     const txt = getTexts(props, defaultAutosuggestSearchTexts);
     const showEmptyMessage = !options.length && emptyMessage;
@@ -47,8 +48,11 @@ export const AutosuggestSearch = (props) => {
             suggestionsList: modifiedClass('AutosuggestSearch__list', itemActionIcon && `action--${itemActionIcon}`),
             suggestion: 'AutosuggestSearch__item',
             suggestionHighlighted: 'AutosuggestSearch__item--highlighted',
-        }, focusInputOnSuggestionClick: true, suggestions: showEmptyMessage ? [true] : options, onSuggestionsClearRequested: onClearOptions, onSuggestionsFetchRequested: ({ value }) => onInput(value), getSuggestionValue: showEmptyMessage
-            ? () => value // Return the input value in case the user uses the up/down keys to select the hidden empty message
+        }, focusInputOnSuggestionClick: true, suggestions: showEmptyMessage ? [true] : options, onSuggestionsClearRequested: onClearOptions, onSuggestionsFetchRequested: ( /* { value } */) => {
+            // weirdly required prop, but we don't need to do anything here
+            // as we run onInput on input change below.
+        }, getSuggestionValue: showEmptyMessage
+            ? () => inputValue // Return the input value in case the user uses the up/down keys to select the hidden empty message
             : getOptionValue, onSuggestionSelected: (event, data) => {
             if (showEmptyMessage) {
                 event.preventDefault();
@@ -68,15 +72,16 @@ export const AutosuggestSearch = (props) => {
             return (React.createElement("div", Object.assign({}, containerProps, { "aria-label": options.length ? txt.suggestionsLabel : undefined }), contents));
         }, inputProps: {
             ref: inputRef,
-            value: value,
+            value: inputValue,
             onChange: (_, { newValue }) => {
-                setValue(newValue);
+                onInput(newValue);
+                setInputValue(newValue);
             },
         }, renderInputComponent: renderInputField
             ? (inputProps) => renderInputField(inputProps, txt)
             : (inputProps) => {
                 /* prettier-ignore */
-                const { className, type, disabled, readOnly, required, children, ref } = inputProps, siteSearchProps = __rest(inputProps, ["className", "type", "disabled", "readOnly", "required", "children", "ref"]);
-                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)) })));
+                const { className, type, disabled, readOnly, required, children, ref, defaultValue } = inputProps, siteSearchProps = __rest(inputProps, ["className", "type", "disabled", "readOnly", "required", "children", "ref", "defaultValue"]);
+                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)) })));
             } }));
 };

package/esm/Datepicker.js

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { getTexts } from '@reykjavik/hanna-utils/i18n';
+import { DEFAULT_LANG, getTexts, } from '@reykjavik/hanna-utils/i18n';
 // For more info on localization see: https://stackoverflow.com/questions/54399084/change-locale-in-react-datepicker/58306958#58306958
 import is from 'date-fns/locale/is/index.js';
 import pl from 'date-fns/locale/pl/index.js';
@@ -148,7 +148,7 @@ export const Datepicker = (props) => {
                         return elm;
                     }) }, addFocusProps()),
                 isoMode && (React.createElement("input", { type: "hidden", name: name, value: value === null || value === void 0 ? void 0 : value.toISOString().slice(0, 10) })),
-                React.createElement(ReactDatePicker, Object.assign({ id: domid, required: inputProps.required, disabled: inputProps.disabled, readOnly: inputProps.readOnly, selected: value, name: isoMode ? undefined : name, locale: lang, dateFormat: normalizedDateFormats, onChange: (date) => {
+                React.createElement(ReactDatePicker, Object.assign({ id: domid, required: inputProps.required, disabled: inputProps.disabled, readOnly: inputProps.readOnly, selected: value, name: isoMode ? undefined : name, locale: lang || DEFAULT_LANG, dateFormat: normalizedDateFormats, onChange: (date) => {
                         date = date || undefined;
                         setValue(date);
                         onChange && onChange(date);

package/esm/FormField.js

@@ -1,6 +1,7 @@
 import { __rest } from "tslib";
 import React, { useCallback, useState } from 'react';
 import { modifiedClass } from '@hugsmidjan/qj/classUtils';
+import { DEFAULT_LANG } from '@reykjavik/hanna-utils/i18n';
 import { isPreact } from './utils/env.js';
 import { useDomid } from './utils/useDomid.js';
 import { useIsBrowserSide } from './utils.js';
@@ -11,6 +12,12 @@ const inputClassNames = {
     control: 'FormField__control',
 };
 // ---------------------------------------------------------------------------
+const defaultReqText = {
+    is: 'Þarf að fylla út',
+    en: 'Required',
+    pl: 'Wymagane',
+};
+// ---------------------------------------------------------------------------
 // eslint-disable-next-line complexity
 export const FormField = (props) => {
     const { extraClassName, className, small, group, LabelTag = group ? 'h4' : undefined, label, assistText, hideLabel, empty, filled, readOnly, disabled, invalid, errorMessage, required, reqText, // TODO: i18n
@@ -54,7 +61,7 @@ export const FormField = (props) => {
     const labelId = LabelTag ? `label:${domid}` : undefined;
     const reqStar = required && reqText !== false && (React.createElement("abbr", { className: "FormField__label__reqstar", 
         // FIXME: add mo-better i18n thinking
-        title: `${reqText || 'Þarf að fylla út'}: ` }, "*"));
+        title: `${reqText || defaultReqText[DEFAULT_LANG]}: ` }, "*"));
     const inputProps = {
         id: domid,
         disabled: disabled,

package/esm/SearchInput.d.ts

@@ -1,7 +1,8 @@
 import { RefObject } from 'react';
 import { FormFieldWrappingProps } from './FormField.js';
-type InputElmProps = Omit<JSX.IntrinsicElements['input'], 'className' | 'type' | 'disabled' | 'readOnly' | 'required' | 'onSubmit' | 'ref' | 'value'> & {
+type InputElmProps = Omit<JSX.IntrinsicElements['input'], 'className' | 'type' | 'disabled' | 'readOnly' | 'required' | 'onSubmit' | 'ref' | 'value' | 'defaultValue'> & {
     value?: string;
+    defaultValue?: string;
 };
 export type SearchInputProps = FormFieldWrappingProps & {
     small?: boolean;

package/esm/_abstract/_TogglerInput.d.ts

@@ -4,12 +4,13 @@ export type TogglerInputProps = {
     label: string | JSX.Element;
     children?: never;
     invalid?: boolean;
-    /** Hidden label prefix text to indicate that the field is required.
+    /**
+     * Hidden label prefix text to indicate that the field is required.
      *
      * If your field is required but should not say so in its label
      * then set this prop to `false`
      *
-     * Default: `"Þarf að fylla út"`
+     * Default: `"Þarf að haka í" / "Must be checked" / "Należy sprawdzić"`.
      * */
     reqText?: string | false;
     hideLabel?: boolean;

package/esm/_abstract/_TogglerInput.js

@@ -1,7 +1,13 @@
 import { __rest } from "tslib";
 import React from 'react';
 import { modifiedClass } from '@hugsmidjan/qj/classUtils';
+import { DEFAULT_LANG } from '@reykjavik/hanna-utils/i18n.js';
 import { useDomid } from '../utils/useDomid.js';
+const defaultReqText = {
+    is: 'Þarf að haka í',
+    en: 'Must be checked',
+    pl: 'Należy sprawdzić',
+};
 // eslint-disable-next-line complexity
 export const TogglerInput = (props) => {
     const { bem, modifier, className, label, hideLabel, invalid, errorMessage, Wrapper = 'div', required, reqText, type, id, innerWrap, wrapperProps, inputProps } = props, restInputProps = __rest(props, ["bem", "modifier", "className", "label", "hideLabel", "invalid", "errorMessage", "Wrapper", "required", "reqText", "type", "id", "innerWrap", "wrapperProps", "inputProps"]);
@@ -9,7 +15,7 @@ export const TogglerInput = (props) => {
     const errorId = errorMessage && `error${domid}`;
     const reqStar = required && reqText !== false && (React.createElement("abbr", { className: `${bem}__label__reqstar`, 
         // FIXME: add mo-better i18n thinking
-        title: `${reqText || 'Þarf að haka í'}: ` }, "*"));
+        title: `${reqText || defaultReqText[DEFAULT_LANG]}: ` }, "*"));
     const readOnly = restInputProps.readOnly || (inputProps || {}).readOnly;
     const labelContent = (React.createElement(React.Fragment, null,
         ' ',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.119",
+	"version": "0.10.121",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",