@reykjavik/hanna-react 0.10.120 → 0.10.121

package/CHANGELOG.md

@@ -4,11 +4,19 @@
 
 - ... <!-- 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
 

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/_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/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/_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.120",
+	"version": "0.10.121",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",