npm - @dnb/eufemia - Versions diffs - 10.13.0 → 10.14.0 - Mend

@dnb/eufemia 10.13.0 → 10.14.0

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 (885) hide show

package/extensions/forms/Field/Number/Number.js CHANGED Viewed

@@ -1,15 +1,20 @@
+"use client";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React, { useMemo } from 'react';
+import React, { useContext, useMemo, useCallback } from 'react';
 import { InputMasked, HelpButton } from '../../../../components';
+import SharedContext from '../../../../shared/Context';
 import classnames from 'classnames';
 import FieldBlock from '../../FieldBlock';
 import { useDataValue } from '../../hooks';
 import { pickSpacingProps } from '../../../../components/flex/utils';
 function NumberComponent(props) {
-  var _props$schema, _props$width;
+  var _props$width;
+  const sharedContext = useContext(SharedContext);
+  const tr = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms;
   const {
     currency,
     percent,
@@ -21,6 +26,44 @@ function NumberComponent(props) {
     suffix,
     rightAligned
   } = props;
+  const errorMessages = useMemo(() => {
+    var _props$minimum, _props$maximum, _props$exclusiveMinim, _props$exclusiveMaxim, _props$multipleOf;
+    return _objectSpread({
+      required: tr.inputErrorRequired,
+      minimum: tr.numberFieldErrorMinimum.replace('{minimum}', (_props$minimum = props.minimum) === null || _props$minimum === void 0 ? void 0 : _props$minimum.toString()),
+      maximum: tr.numberFieldErrorMaximum.replace('{maximum}', (_props$maximum = props.maximum) === null || _props$maximum === void 0 ? void 0 : _props$maximum.toString()),
+      exclusiveMinimum: tr.numberFieldErrorExclusiveMinimum.replace('{exclusiveMinimum}', (_props$exclusiveMinim = props.exclusiveMinimum) === null || _props$exclusiveMinim === void 0 ? void 0 : _props$exclusiveMinim.toString()),
+      exclusiveMaximum: tr.numberFieldErrorExclusiveMaximum.replace('{exclusiveMaximum}', (_props$exclusiveMaxim = props.exclusiveMaximum) === null || _props$exclusiveMaxim === void 0 ? void 0 : _props$exclusiveMaxim.toString()),
+      multipleOf: tr.numberFieldErrorMultipleOf.replace('{multipleOf}', (_props$multipleOf = props.multipleOf) === null || _props$multipleOf === void 0 ? void 0 : _props$multipleOf.toString())
+    }, props.errorMessages);
+  }, [tr, props.errorMessages, props.minimum, props.maximum, props.exclusiveMinimum, props.exclusiveMaximum, props.multipleOf]);
+  const schema = useMemo(() => {
+    var _props$schema;
+    return (_props$schema = props.schema) !== null && _props$schema !== void 0 ? _props$schema : {
+      type: 'number',
+      minimum: props.minimum,
+      maximum: props.maximum,
+      exclusiveMinimum: props.exclusiveMinimum,
+      exclusiveMaximum: props.exclusiveMaximum,
+      multipleOf: props.multipleOf
+    };
+  }, [props.schema, props.minimum, props.maximum, props.exclusiveMinimum, props.exclusiveMaximum, props.multipleOf]);
+  const toInput = useCallback(external => {
+    if (external === undefined) {
+      return '';
+    }
+    return external;
+  }, []);
+  const fromInput = useCallback(_ref => {
+    let {
+      value,
+      numberValue
+    } = _ref;
+    if (value === '') {
+      return emptyValue;
+    }
+    return numberValue;
+  }, []);
   const maskProps = useMemo(() => {
     if (currency) {
       return {
@@ -46,30 +89,10 @@ function NumberComponent(props) {
     };
   }, [currency, percent, mask, decimalLimit, decimalSymbol, thousandSeparator, prefix, suffix]);
   const preparedProps = _objectSpread(_objectSpread({}, props), {}, {
-    schema: (_props$schema = props.schema) !== null && _props$schema !== void 0 ? _props$schema : {
-      type: 'number',
-      minimum: props.minimum,
-      maximum: props.maximum,
-      exclusiveMinimum: props.exclusiveMinimum,
-      exclusiveMaximum: props.exclusiveMaximum,
-      multipleOf: props.multipleOf
-    },
-    toInput: external => {
-      if (external === undefined) {
-        return '';
-      }
-      return external;
-    },
-    fromInput: _ref => {
-      let {
-        value,
-        numberValue
-      } = _ref;
-      if (value === '') {
-        return emptyValue;
-      }
-      return numberValue;
-    },
+    errorMessages,
+    schema,
+    toInput,
+    fromInput,
     width: (_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : 'medium'
   });
   const {

package/extensions/forms/Field/Number/Number.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Number.js","names":["React","useMemo","InputMasked","HelpButton","classnames","FieldBlock","useDataValue","pickSpacingProps","NumberComponent","props","_props$schema","_props$width","currency","percent","mask","thousandSeparator","decimalSymbol","decimalLimit","prefix","suffix","rightAligned","maskProps","as_currency","as_percent","as_number","number_mask","includeThousandsSeparator","undefined","thousandsSeparatorSymbol","preparedProps","_objectSpread","schema","type","minimum","maximum","exclusiveMinimum","exclusiveMaximum","multipleOf","toInput","external","fromInput","_ref","value","numberValue","emptyValue","width","id","name","className","autoComplete","inputClassName","layout","placeholder","label","labelDescription","labelSecondary","disabled","info","warning","error","help","handleFocus","handleBlur","handleChange","createElement","_extends","forId","contentsWidth","right","on_focus","on_blur","on_change","status","stretch","title","contents","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Number/Number.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport { InputMasked, HelpButton } from '../../../../components'\nimport { InputMaskedProps } from '../../../../components/InputMasked'\nimport classnames from 'classnames'\nimport FieldBlock from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport { FieldProps, FieldHelpProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\n\ninterface ErrorMessages {\n required?: string\n schema?: string\n minimum?: string\n maximum?: string\n exclusiveMinimum?: string\n exclusiveMaximum?: string\n multipleOf?: string\n}\n\nexport type Props = FieldHelpProps &\n FieldProps<number, undefined, ErrorMessages> & {\n inputClassName?: string\n currency?: InputMaskedProps['as_currency']\n percent?: InputMaskedProps['as_percent']\n mask?: InputMaskedProps['mask']\n // Formatting\n thousandSeparator?: string \| true\n decimalSymbol?: string\n decimalLimit?: number\n prefix?: string\n suffix?: string\n // Validation\n minimum?: number // aka greater than or equal to\n maximum?: number // aka less than or equal to\n exclusiveMinimum?: number // aka greater than\n exclusiveMaximum?: number // aka less than\n multipleOf?: number\n // Styling\n width?: false \| 'small' \| 'medium' \| 'large' \| 'stretch'\n rightAligned?: boolean\n }\n\nfunction NumberComponent(props: Props) {\n const {\n currency,\n percent,\n mask,\n thousandSeparator,\n decimalSymbol,\n decimalLimit = 12,\n prefix,\n suffix,\n rightAligned,\n } = props\n\n const maskProps: Partial<InputMaskedProps> = useMemo(() => {\n if (currency) {\n return {\n as_currency: currency,\n }\n }\n if (percent) {\n return {\n as_percent: percent,\n }\n }\n // Custom mask based on props\n return {\n as_number: true,\n mask,\n number_mask: {\n decimalLimit,\n decimalSymbol,\n includeThousandsSeparator: thousandSeparator !== undefined,\n thousandsSeparatorSymbol:\n thousandSeparator === true ? ' ' : thousandSeparator,\n prefix,\n suffix,\n },\n }\n }, [\n currency,\n percent,\n mask,\n decimalLimit,\n decimalSymbol,\n thousandSeparator,\n prefix,\n suffix,\n ])\n\n const preparedProps: Props = {\n ...props,\n schema: props.schema ?? {\n type: 'number',\n minimum: props.minimum,\n maximum: props.maximum,\n exclusiveMinimum: props.exclusiveMinimum,\n exclusiveMaximum: props.exclusiveMaximum,\n multipleOf: props.multipleOf,\n },\n toInput: (external: number \| undefined) => {\n if (external === undefined) {\n return ''\n }\n return external\n },\n fromInput: ({\n value,\n numberValue,\n }: {\n value: string\n numberValue: number\n }) => {\n if (value === '') {\n return emptyValue\n }\n return numberValue\n },\n width: props.width ?? 'medium',\n }\n\n const {\n id,\n name,\n className,\n autoComplete,\n inputClassName,\n layout,\n placeholder,\n label,\n labelDescription,\n labelSecondary,\n value,\n disabled,\n info,\n warning,\n error,\n help,\n emptyValue,\n width,\n handleFocus,\n handleBlur,\n handleChange,\n } = useDataValue(preparedProps)\n\n return (\n <FieldBlock\n className={classnames('dnb-forms-field-number', className)}\n forId={id}\n layout={layout}\n label={label}\n labelDescription={labelDescription}\n labelSecondary={labelSecondary}\n info={info}\n warning={warning}\n error={error}\n contentsWidth={width !== false ? width : undefined}\n {...pickSpacingProps(props)}\n >\n <InputMasked\n id={id}\n name={name}\n autoComplete={autoComplete}\n className={classnames(\n 'dnb-forms-field-number__input',\n inputClassName\n )}\n placeholder={placeholder}\n value={value}\n {...maskProps}\n right={rightAligned}\n on_focus={handleFocus}\n on_blur={handleBlur}\n on_change={handleChange}\n disabled={disabled}\n status={error ? 'error' : undefined}\n stretch={width !== undefined}\n suffix={\n help ? (\n <HelpButton title={help.title}>{help.contents}</HelpButton>\n ) : undefined\n }\n />\n </FieldBlock>\n )\n}\n\nNumberComponent._supportsSpacingProps = true\nexport default NumberComponent\n"],"mappings":"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"}
1	+ {"version":3,"file":"Number.js","names":["React","useContext","useMemo","useCallback","InputMasked","HelpButton","SharedContext","classnames","FieldBlock","useDataValue","pickSpacingProps","NumberComponent","props","_props$width","sharedContext","tr","translation","Forms","currency","percent","mask","thousandSeparator","decimalSymbol","decimalLimit","prefix","suffix","rightAligned","errorMessages","_props$minimum","_props$maximum","_props$exclusiveMinim","_props$exclusiveMaxim","_props$multipleOf","_objectSpread","required","inputErrorRequired","minimum","numberFieldErrorMinimum","replace","toString","maximum","numberFieldErrorMaximum","exclusiveMinimum","numberFieldErrorExclusiveMinimum","exclusiveMaximum","numberFieldErrorExclusiveMaximum","multipleOf","numberFieldErrorMultipleOf","schema","_props$schema","type","toInput","external","undefined","fromInput","_ref","value","numberValue","emptyValue","maskProps","as_currency","as_percent","as_number","number_mask","includeThousandsSeparator","thousandsSeparatorSymbol","preparedProps","width","id","name","className","autoComplete","inputClassName","layout","placeholder","label","labelDescription","labelSecondary","disabled","info","warning","error","help","handleFocus","handleBlur","handleChange","createElement","_extends","forId","contentsWidth","right","on_focus","on_blur","on_change","status","stretch","title","contents","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Number/Number.tsx"],"sourcesContent":["import React, { useContext, useMemo, useCallback } from 'react'\nimport { JSONSchema7 } from 'json-schema'\nimport { InputMasked, HelpButton } from '../../../../components'\nimport { InputMaskedProps } from '../../../../components/InputMasked'\nimport SharedContext from '../../../../shared/Context'\nimport classnames from 'classnames'\nimport FieldBlock from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport { FieldProps, FieldHelpProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\n\ninterface ErrorMessages {\n required?: string\n schema?: string\n minimum?: string\n maximum?: string\n exclusiveMinimum?: string\n exclusiveMaximum?: string\n multipleOf?: string\n}\n\nexport type Props = FieldHelpProps &\n FieldProps<number, undefined, ErrorMessages> & {\n inputClassName?: string\n currency?: InputMaskedProps['as_currency']\n percent?: InputMaskedProps['as_percent']\n mask?: InputMaskedProps['mask']\n // Formatting\n thousandSeparator?: string \| true\n decimalSymbol?: string\n decimalLimit?: number\n prefix?: string\n suffix?: string\n // Validation\n minimum?: number // aka greater than or equal to\n maximum?: number // aka less than or equal to\n exclusiveMinimum?: number // aka greater than\n exclusiveMaximum?: number // aka less than\n multipleOf?: number\n // Styling\n width?: false \| 'small' \| 'medium' \| 'large' \| 'stretch'\n rightAligned?: boolean\n }\n\nfunction NumberComponent(props: Props) {\n const sharedContext = useContext(SharedContext)\n const tr = sharedContext?.translation.Forms\n\n const {\n currency,\n percent,\n mask,\n thousandSeparator,\n decimalSymbol,\n decimalLimit = 12,\n prefix,\n suffix,\n rightAligned,\n } = props\n\n const errorMessages = useMemo(\n () => ({\n required: tr.inputErrorRequired,\n minimum: tr.numberFieldErrorMinimum.replace(\n '{minimum}',\n props.minimum?.toString()\n ),\n maximum: tr.numberFieldErrorMaximum.replace(\n '{maximum}',\n props.maximum?.toString()\n ),\n exclusiveMinimum: tr.numberFieldErrorExclusiveMinimum.replace(\n '{exclusiveMinimum}',\n props.exclusiveMinimum?.toString()\n ),\n exclusiveMaximum: tr.numberFieldErrorExclusiveMaximum.replace(\n '{exclusiveMaximum}',\n props.exclusiveMaximum?.toString()\n ),\n multipleOf: tr.numberFieldErrorMultipleOf.replace(\n '{multipleOf}',\n props.multipleOf?.toString()\n ),\n ...props.errorMessages,\n }),\n [\n tr,\n props.errorMessages,\n props.minimum,\n props.maximum,\n props.exclusiveMinimum,\n props.exclusiveMaximum,\n props.multipleOf,\n ]\n )\n const schema = useMemo<JSONSchema7>(\n () =>\n props.schema ?? {\n type: 'number',\n minimum: props.minimum,\n maximum: props.maximum,\n exclusiveMinimum: props.exclusiveMinimum,\n exclusiveMaximum: props.exclusiveMaximum,\n multipleOf: props.multipleOf,\n },\n [\n props.schema,\n props.minimum,\n props.maximum,\n props.exclusiveMinimum,\n props.exclusiveMaximum,\n props.multipleOf,\n ]\n )\n\n const toInput = useCallback((external: number \| undefined) => {\n if (external === undefined) {\n return ''\n }\n return external\n }, [])\n const fromInput = useCallback(\n ({ value, numberValue }: { value: string; numberValue: number }) => {\n if (value === '') {\n return emptyValue\n }\n return numberValue\n },\n []\n )\n\n const maskProps: Partial<InputMaskedProps> = useMemo(() => {\n if (currency) {\n return {\n as_currency: currency,\n }\n }\n if (percent) {\n return {\n as_percent: percent,\n }\n }\n // Custom mask based on props\n return {\n as_number: true,\n mask,\n number_mask: {\n decimalLimit,\n decimalSymbol,\n includeThousandsSeparator: thousandSeparator !== undefined,\n thousandsSeparatorSymbol:\n thousandSeparator === true ? ' ' : thousandSeparator,\n prefix,\n suffix,\n },\n }\n }, [\n currency,\n percent,\n mask,\n decimalLimit,\n decimalSymbol,\n thousandSeparator,\n prefix,\n suffix,\n ])\n\n const preparedProps: Props = {\n ...props,\n errorMessages,\n schema,\n toInput,\n fromInput,\n width: props.width ?? 'medium',\n }\n\n const {\n id,\n name,\n className,\n autoComplete,\n inputClassName,\n layout,\n placeholder,\n label,\n labelDescription,\n labelSecondary,\n value,\n disabled,\n info,\n warning,\n error,\n help,\n emptyValue,\n width,\n handleFocus,\n handleBlur,\n handleChange,\n } = useDataValue(preparedProps)\n\n return (\n <FieldBlock\n className={classnames('dnb-forms-field-number', className)}\n forId={id}\n layout={layout}\n label={label}\n labelDescription={labelDescription}\n labelSecondary={labelSecondary}\n info={info}\n warning={warning}\n error={error}\n contentsWidth={width !== false ? width : undefined}\n {...pickSpacingProps(props)}\n >\n <InputMasked\n id={id}\n name={name}\n autoComplete={autoComplete}\n className={classnames(\n 'dnb-forms-field-number__input',\n inputClassName\n )}\n placeholder={placeholder}\n value={value}\n {...maskProps}\n right={rightAligned}\n on_focus={handleFocus}\n on_blur={handleBlur}\n on_change={handleChange}\n disabled={disabled}\n status={error ? 'error' : undefined}\n stretch={width !== undefined}\n suffix={\n help ? (\n <HelpButton title={help.title}>{help.contents}</HelpButton>\n ) : undefined\n }\n />\n </FieldBlock>\n )\n}\n\nNumberComponent._supportsSpacingProps = true\nexport default NumberComponent\n"],"mappings":"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"}

package/extensions/forms/Field/OrganizationNumber/OrganizationNumber.js CHANGED Viewed

@@ -3,25 +3,28 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React, { useContext } from 'react';
+import React, { useContext, useMemo } from 'react';
 import StringComponent from '../String';
 import SharedContext from '../../../../shared/Context';
 function OrganizationNumber(props) {
   var _props$pattern, _props$label, _props$width;
   const sharedContext = useContext(SharedContext);
+  const tr = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms;
   const {
     validate = true,
     omitMask
   } = props;
+  const errorMessages = useMemo(() => _objectSpread({
+    required: tr.organizationNumberErrorRequired,
+    pattern: tr.organizationNumberErrorPattern
+  }, props.errorMessages), [tr, props.errorMessages]);
+  const mask = useMemo(() => omitMask ? [/\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/] : [/\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/], [omitMask]);
   const stringComponentProps = _objectSpread(_objectSpread({}, props), {}, {
     className: 'dnb-forms-field-organization-number',
     pattern: (_props$pattern = props.pattern) !== null && _props$pattern !== void 0 ? _props$pattern : validate ? '^[0-9]{9}$' : undefined,
     label: (_props$label = props.label) !== null && _props$label !== void 0 ? _props$label : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.organizationNumberLabel,
-    errorMessages: _objectSpread({
-      required: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.organizationNumberErrorRequired,
-      pattern: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.organizationNumberErrorPattern
-    }, props.errorMessages),
-    mask: omitMask ? [/\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/] : [/\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/],
+    errorMessages,
+    mask,
     width: (_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : 'medium'
   });
   return React.createElement(StringComponent, stringComponentProps);

package/extensions/forms/Field/OrganizationNumber/OrganizationNumber.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OrganizationNumber.js","names":["React","useContext","StringComponent","SharedContext","OrganizationNumber","props","_props$pattern","_props$label","_props$width","sharedContext","~~validate~~","~~omitMask~~","~~stringComponentProps~~","~~_objectSpread~~","~~className~~","~~pattern~~","~~undefined~~","~~label~~","~~translation~~","~~Forms~~","~~organizationNumberLabel~~","~~errorMessages~~","~~required~~","~~organizationNumberErrorRequired~~","~~organizationNumberErrorPattern~~","~~mask~~","width","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/OrganizationNumber/OrganizationNumber.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport StringComponent, { Props as StringComponentProps } from '../String'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = StringComponentProps & {\n validate?: boolean\n omitMask?: boolean\n}\n\nfunction OrganizationNumber(props: Props) {\n const sharedContext = useContext(SharedContext)\n const { validate = true, omitMask } = props\n\n const ~~stringComponentProps:~~ ~~Props~~ = {\n ~~...props,\n className: 'dnb-forms-field-organization-number',\n pattern: props.pattern ??~~ (~~validate ? '^[0-9]{9}$' : undefined~~)~~,\n label:\n props.label~~ ~~??\n sharedContext?.translation.Forms.organizationNumberLabel,\n errorMessages:~~ {\n required~~:\n sharedContext?.translation~~.~~Forms.~~organizationNumberErrorRequired,\n pattern~~:\n sharedContext?.translation~~.~~Forms.~~organizationNumberErrorPattern,\n ...props.errorMessages,\n },\n mask: omitMask\n ? [/\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/]\n : [/\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/],\n width: props.width ?? 'medium',\n }\n\n return <StringComponent {...stringComponentProps} />\n}\n\nOrganizationNumber._supportsSpacingProps = true\nexport default OrganizationNumber\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;~~AACzC~~,OAAOC,eAAe,MAAyC,WAAW;AAC1E,OAAOC,aAAa,MAAM,4BAA4B;AAOtD,SAASC,kBAAkBA,CAACC,KAAY,EAAE;EAAA,IAAAC,cAAA,EAAAC,YAAA,EAAAC,YAAA;EACxC,MAAMC,aAAa,~~GAAGR~~,UAAU,~~CAACE~~,aAAa,CAAC;EAC/C,~~MAAM;IAAEO~~,~~QAAQ~~,~~GAAG~~,~~IAAI;IAAEC;EAAS~~,~~CAAC~~,~~GAAGN~~,~~KAAK;EAE3C~~,~~MAAMO~~,~~oBAA2B~~,~~GAAAC~~,~~aAAA~~,~~CAAAA,aAAA,KAC5BR,~~KAAK;~~IACRS~~,~~SAAS,EAAE,qCAAqC~~;~~IAChDC~~,~~OAAO,GAAAT,cAAA,GAAED,KAAK,CAACU,OAAO,cAAAT,cAAA,cAAAA,cAAA,GAAKI,~~QAAQ,GAAG,~~YAAY,GAAGM,SAAU~~;~~IAC/DC~~,~~KAAK~~,~~GAAAV~~,~~YAAA,GACHF,~~KAAK,~~CAACY~~,~~KAAK,cAAAV,YAAA,cAAAA,YAAA,GACXE,~~aAAa,~~aAAbA~~,~~aAAa~~,~~uBAAbA~~,~~aAAa~~,~~CAAES,WAAW,CAACC,KAAK,CAACC,uBAAuB;IAC1DC,aAAa,EAAAR,~~aAAA;~~MACXS~~,QAAQ,~~EACNb~~,~~aAAa~~,~~aAAbA,aAAa,uBAAbA,aAAa,CAAES,WAAW,CAACC,KAAK,CAACI~~,+BAA+B;~~MAClER~~,OAAO,~~EACLN~~,~~aAAa~~,~~aAAbA~~,~~aAAa~~,~~uBAAbA~~,aAAa,~~CAAES~~,~~WAAW~~,~~CAACC~~,~~KAAK~~,~~CAACK;IAA8B~~,~~GAC9DnB,~~KAAK,~~CAACgB~~,aAAa,~~CACvB~~;~~IACDI~~,IAAI,~~EAAEd~~,QAAQ,~~GACV~~,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,GACtD,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;~~IACpEe~~,KAAK,GAAAlB,YAAA,~~GAAEH~~,KAAK,~~CAACqB~~,KAAK,cAAAlB,YAAA,cAAAA,YAAA,GAAI;EAAQ,EAC/B;EAED,~~OAAOR~~,KAAA,~~CAAA2B~~,aAAA,~~CAACzB~~,eAAe,~~EAAKU~~,oBAAuB,CAAC;AACtD;~~AAEAR~~,kBAAkB,~~CAACwB~~,qBAAqB,GAAG,IAAI;AAC/C,~~eAAexB~~,kBAAkB"}
1	+ {"version":3,"file":"OrganizationNumber.js","names":["React","useContext","useMemo","StringComponent","SharedContext","OrganizationNumber","props","_props$pattern","_props$label","_props$width","sharedContext","tr","translation","Forms","validate","omitMask","errorMessages","_objectSpread","required","organizationNumberErrorRequired","pattern","organizationNumberErrorPattern","mask","stringComponentProps","className","undefined","label","organizationNumberLabel","width","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/OrganizationNumber/OrganizationNumber.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport StringComponent, { Props as StringComponentProps } from '../String'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = StringComponentProps & {\n validate?: boolean\n omitMask?: boolean\n}\n\nfunction OrganizationNumber(props: Props) {\n const sharedContext = useContext(SharedContext)\n const tr = sharedContext?.translation.Forms\n\n const { validate = true, omitMask } = props\n\n const errorMessages = useMemo(\n () => ({\n required: tr.organizationNumberErrorRequired,\n pattern: tr.organizationNumberErrorPattern,\n ...props.errorMessages,\n }),\n [tr, props.errorMessages]\n )\n const mask = useMemo(\n () =>\n omitMask\n ? [/\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/]\n : [/\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/],\n [omitMask]\n )\n\n const stringComponentProps: Props = {\n ...props,\n className: 'dnb-forms-field-organization-number',\n pattern: props.pattern ?? (validate ? '^[0-9]{9}$' : undefined),\n label:\n props.label ??\n sharedContext?.translation.Forms.organizationNumberLabel,\n errorMessages,\n mask,\n width: props.width ?? 'medium',\n }\n\n return <StringComponent {...stringComponentProps} />\n}\n\nOrganizationNumber._supportsSpacingProps = true\nexport default OrganizationNumber\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,eAAe,MAAyC,WAAW;AAC1E,OAAOC,aAAa,MAAM,4BAA4B;AAOtD,SAASC,kBAAkBA,CAACC,KAAY,EAAE;EAAA,IAAAC,cAAA,EAAAC,YAAA,EAAAC,YAAA;EACxC,MAAMC,aAAa,GAAGT,UAAU,CAACG,aAAa,CAAC;EAC/C,MAAMO,EAAE,GAAGD,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK;EAE3C,MAAM;IAAEC,QAAQ,GAAG,IAAI;IAAEC;EAAS,CAAC,GAAGT,KAAK;EAE3C,MAAMU,aAAa,GAAGd,OAAO,CAC3B,MAAAe,aAAA;IACEC,QAAQ,EAAEP,EAAE,CAACQ,+BAA+B;IAC5CC,OAAO,EAAET,EAAE,CAACU;EAA8B,GACvCf,KAAK,CAACU,aAAa,CACtB,EACF,CAACL,EAAE,EAAEL,KAAK,CAACU,aAAa,CAC1B,CAAC;EACD,MAAMM,IAAI,GAAGpB,OAAO,CAClB,MACEa,QAAQ,GACJ,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,GACtD,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EACtE,CAACA,QAAQ,CACX,CAAC;EAED,MAAMQ,oBAA2B,GAAAN,aAAA,CAAAA,aAAA,KAC5BX,KAAK;IACRkB,SAAS,EAAE,qCAAqC;IAChDJ,OAAO,GAAAb,cAAA,GAAED,KAAK,CAACc,OAAO,cAAAb,cAAA,cAAAA,cAAA,GAAKO,QAAQ,GAAG,YAAY,GAAGW,SAAU;IAC/DC,KAAK,GAAAlB,YAAA,GACHF,KAAK,CAACoB,KAAK,cAAAlB,YAAA,cAAAA,YAAA,GACXE,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK,CAACc,uBAAuB;IAC1DX,aAAa;IACbM,IAAI;IACJM,KAAK,GAAAnB,YAAA,GAAEH,KAAK,CAACsB,KAAK,cAAAnB,YAAA,cAAAA,YAAA,GAAI;EAAQ,EAC/B;EAED,OAAOT,KAAA,CAAA6B,aAAA,CAAC1B,eAAe,EAAKoB,oBAAuB,CAAC;AACtD;AAEAlB,kBAAkB,CAACyB,qBAAqB,GAAG,IAAI;AAC/C,eAAezB,kBAAkB"}

package/extensions/forms/Field/PhoneNumber/PhoneNumber.js CHANGED Viewed

@@ -15,18 +15,19 @@ import { pickSpacingProps } from '../../../../components/flex/utils';
 import SharedContext from '../../../../shared/Context';
 function PhoneNumber(props) {
   const sharedContext = useContext(SharedContext);
+  const tr = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms;
+  const errorMessages = useMemo(() => _objectSpread({
+    required: tr.phoneNumberErrorRequired
+  }, props === null || props === void 0 ? void 0 : props.errorMessages), [tr, props.errorMessages]);
   const defaultProps = {
     value: '+47',
-    errorMessages: _objectSpread({
-      required: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.phoneNumberErrorRequired
-    }, props === null || props === void 0 ? void 0 : props.errorMessages)
+    errorMessages
   };
   const preparedProps = _objectSpread(_objectSpread({}, defaultProps), props);
   const {
     className,
     countryCodeFieldClassName,
     numberFieldClassName,
-    layout = 'vertical',
     countryCodePlaceholder,
     placeholder,
     countryCodeLabel,
@@ -40,6 +41,10 @@ function PhoneNumber(props) {
     disabled,
     width = 'large',
     help,
+    required,
+    validateInitially,
+    continuousValidation,
+    validateUnchanged,
     handleFocus,
     handleBlur,
     handleChange,
@@ -47,37 +52,18 @@ function PhoneNumber(props) {
     onNumberChange
   } = useDataValue(preparedProps);
   const [, countryCode, phoneNumber] = value !== undefined ? value.match(/^(\+[^ ]+)? ?(.*)$/) : [undefined, '', ''];
-  const getCountryData = function () {
-    var _sharedContext$locale;
-    let {
-      filter = null
-    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    const lang = (_sharedContext$locale = sharedContext.locale) === null || _sharedContext$locale === void 0 ? void 0 : _sharedContext$locale.split('-')[0];
-    return countries.filter(_ref => {
-      let {
-        cdc
-      } = _ref;
-      return !filter || `+${cdc}` === filter;
-    }).sort((_ref2, _ref3) => {
-      let {
-        i18n: a
-      } = _ref2;
-      let {
-        i18n: b
-      } = _ref3;
-      return a[lang] > b[lang] ? 1 : -1;
-    }).map(country => makeObject(country, lang));
-  };
   const singleCountryCodeData = useMemo(() => {
+    var _sharedContext$locale;
     return getCountryData({
+      lang: (_sharedContext$locale = sharedContext.locale) === null || _sharedContext$locale === void 0 ? void 0 : _sharedContext$locale.split('-')[0],
       filter: countryCode
     });
   }, []);
-  const handleCountryCodeChange = useCallback(_ref4 => {
+  const handleCountryCodeChange = useCallback(_ref => {
     var _data$selectedKey$tri, _data$selectedKey;
     let {
       data
-    } = _ref4;
+    } = _ref;
     const countryCode = (_data$selectedKey$tri = data === null || data === void 0 ? void 0 : (_data$selectedKey = data.selectedKey) === null || _data$selectedKey === void 0 ? void 0 : _data$selectedKey.trim()) !== null && _data$selectedKey$tri !== void 0 ? _data$selectedKey$tri : emptyValue;
     if (!countryCode && !phoneNumber) {
       handleChange === null || handleChange === void 0 ? void 0 : handleChange(emptyValue);
@@ -96,13 +82,16 @@ function PhoneNumber(props) {
     handleChange === null || handleChange === void 0 ? void 0 : handleChange([countryCode, phoneNumber].filter(Boolean).join(' '));
     onNumberChange === null || onNumberChange === void 0 ? void 0 : onNumberChange(phoneNumber);
   }, [countryCode, emptyValue, handleChange, onNumberChange]);
-  const onFocusHandler = _ref5 => {
+  const onFocusHandler = _ref2 => {
     let {
       dataList,
       updateData
-    } = _ref5;
+    } = _ref2;
     if (dataList.length < 10) {
-      updateData(getCountryData());
+      var _sharedContext$locale2;
+      updateData(getCountryData({
+        lang: (_sharedContext$locale2 = sharedContext.locale) === null || _sharedContext$locale2 === void 0 ? void 0 : _sharedContext$locale2.split('-')[0]
+      }));
     }
     handleFocus();
   };
@@ -115,9 +104,8 @@ function PhoneNumber(props) {
   }, pickSpacingProps(props)), React.createElement(Flex.Horizontal, null, React.createElement(Autocomplete, {
     className: classnames('dnb-forms-field-phone-number__country-code', countryCodeFieldClassName),
     placeholder: countryCodePlaceholder !== null && countryCodePlaceholder !== void 0 ? countryCodePlaceholder : ' ',
-    label_direction: layout,
+    label_direction: "vertical",
     label: countryCodeLabel !== null && countryCodeLabel !== void 0 ? countryCodeLabel : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.countryCodeLabel,
-    mode: "async",
     data: singleCountryCodeData,
     value: countryCode,
     disabled: disabled,
@@ -126,6 +114,7 @@ function PhoneNumber(props) {
     on_change: handleCountryCodeChange,
     independent_width: true,
     search_numbers: true,
+    keep_value_and_selection: true,
     no_animation: props.noAnimation,
     stretch: width === 'stretch'
   }), React.createElement(StringComponent, {
@@ -145,7 +134,11 @@ function PhoneNumber(props) {
     error: error,
     disabled: disabled,
     width: "stretch",
-    help: help
+    help: help,
+    required: required,
+    validateInitially: validateInitially,
+    continuousValidation: continuousValidation,
+    validateUnchanged: validateUnchanged
   })));
 }
 function makeObject(country, lang) {
@@ -156,6 +149,26 @@ function makeObject(country, lang) {
     content: `+${country.cdc} ${(_country$i18n$lang = country.i18n[lang]) !== null && _country$i18n$lang !== void 0 ? _country$i18n$lang : country.i18n.en}`
   };
 }
+function getCountryData() {
+  let {
+    lang = 'en',
+    filter = null
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return countries.filter(_ref3 => {
+    let {
+      cdc
+    } = _ref3;
+    return !filter || `+${cdc}` === filter;
+  }).sort((_ref4, _ref5) => {
+    let {
+      i18n: a
+    } = _ref4;
+    let {
+      i18n: b
+    } = _ref5;
+    return a[lang] > b[lang] ? 1 : -1;
+  }).map(country => makeObject(country, lang));
+}
 PhoneNumber._supportsSpacingProps = true;
 export default PhoneNumber;
 //# sourceMappingURL=PhoneNumber.js.map

package/extensions/forms/Field/PhoneNumber/PhoneNumber.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PhoneNumber.js","names":["React","useMemo","useContext","useCallback","Autocomplete","Flex","classnames","countries","StringComponent","useDataValue","FieldBlock","pickSpacingProps","SharedContext","PhoneNumber","props","sharedContext","defaultProps","value","errorMessages","_objectSpread","required","translation","Forms","phoneNumberErrorRequired","preparedProps","className","countryCodeFieldClassName","numberFieldClassName","layout","countryCodePlaceholder","placeholder","countryCodeLabel","label","phoneNumberLabel","numberMask","emptyValue","info","warning","error","disabled","width","help","handleFocus","handleBlur","handleChange","onCountryCodeChange","onNumberChange","countryCode","phoneNumber","undefined","match","getCountryData","_sharedContext$locale","filter","arguments","length","lang","locale","split","_ref","cdc","sort","_ref2","_ref3","i18n","a","b","map","country","makeObject","singleCountryCodeData","handleCountryCodeChange","_ref4","_data$selectedKey$tri","_data$selectedKey","data","selectedKey","trim","Boolean","join","handleNumberChange","onFocusHandler","_ref5","dataList","updateData","createElement","_extends","Horizontal","label_direction","mode","on_focus","on_blur","on_change","independent_width","search_numbers","no_animation","noAnimation","stretch","type","mask","onFocus","onBlur","onChange","_country$i18n$lang","selected_value","iso","content","en","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx"],"sourcesContent":["import React, { useMemo, useContext, useCallback } from 'react'\nimport { Autocomplete, Flex } from '../../../../components'\nimport { InputMaskedProps } from '../../../../components/InputMasked'\nimport classnames from 'classnames'\nimport countries from '../../constants/countries'\nimport StringComponent from '../String'\nimport { useDataValue } from '../../hooks'\nimport FieldBlock from '../../FieldBlock'\nimport { FieldHelpProps, FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = FieldHelpProps &\n FieldProps<string, undefined> & {\n countryCodeFieldClassName?: string\n numberFieldClassName?: string\n countryCodePlaceholder?: string\n countryCodeLabel?: string\n numberMask?: InputMaskedProps['mask']\n width?: 'large' \| 'stretch'\n onCountryCodeChange?: (value: string \| undefined) => void\n onNumberChange?: (value: string \| undefined) => void\n } & {\n /*\n For internal testing purposes\n /\n noAnimation?: boolean\n }\n\nfunction PhoneNumber(props: Props) {\n const sharedContext = useContext(SharedContext)\n const defaultProps: Partial<Props> = {\n // Important for the default value to be defined here, and not after the useDataValue call, to avoid the UI jumping\n // back to +47 once the user empty the field so handleChange send out undefined.\n value: '+47',\n errorMessages: {\n required: sharedContext?.translation.Forms.phoneNumberErrorRequired,\n ...props?.errorMessages,\n },\n }\n const preparedProps: Props = {\n ...defaultProps,\n ...props,\n }\n\n const {\n className,\n countryCodeFieldClassName,\n numberFieldClassName,\n layout = 'vertical',\n countryCodePlaceholder,\n placeholder,\n countryCodeLabel,\n label = sharedContext?.translation.Forms.phoneNumberLabel,\n value,\n numberMask,\n emptyValue,\n info,\n warning,\n error,\n disabled,\n width = 'large',\n help,\n handleFocus,\n handleBlur,\n handleChange,\n onCountryCodeChange,\n onNumberChange,\n } = useDataValue(preparedProps)\n\n const [, countryCode, phoneNumber] =\n value !== undefined\n ? value.match(/^(\\+[^ ]+)? ?(.)$/)\n : [undefined, '', '']\n\n const getCountryData = ({ filter = null } = {}) => {\n const lang = sharedContext.locale?.split('-')[0]\n return countries\n .filter(({ cdc }) => !filter \|\| `+${cdc}` === filter)\n .sort(({ i18n: a }, { i18n: b }) => (a[lang] > b[lang] ? 1 : -1))\n .map((country) => makeObject(country, lang))\n }\n\n const singleCountryCodeData = useMemo(() => {\n return getCountryData({ filter: countryCode })\n }, [])\n\n const handleCountryCodeChange = useCallback(\n ({ data }: { data: { selectedKey: string } }) => {\n const countryCode = data?.selectedKey?.trim() ?? emptyValue\n\n if (!countryCode && !phoneNumber) {\n handleChange?.(emptyValue)\n onCountryCodeChange?.(emptyValue)\n return\n }\n\n handleChange?.([countryCode, phoneNumber].filter(Boolean).join(' '))\n onCountryCodeChange?.(countryCode)\n },\n [phoneNumber, emptyValue, handleChange, onCountryCodeChange]\n )\n\n const handleNumberChange = useCallback(\n (phoneNumber: string) => {\n if (!countryCode && !phoneNumber) {\n handleChange?.(emptyValue)\n onNumberChange?.(emptyValue)\n return\n }\n\n handleChange?.([countryCode, phoneNumber].filter(Boolean).join(' '))\n onNumberChange?.(phoneNumber)\n },\n [countryCode, emptyValue, handleChange, onNumberChange]\n )\n\n const onFocusHandler = ({ dataList, updateData }) => {\n // because there can be more than one country with same cdc\n if (dataList.length < 10) {\n updateData(getCountryData())\n }\n handleFocus()\n }\n\n return (\n <FieldBlock\n className={classnames('dnb-forms-field-phone-number', className)}\n width={width !== 'stretch' ? width : undefined}\n info={info}\n warning={warning}\n error={error}\n {...pickSpacingProps(props)}\n >\n <Flex.Horizontal>\n <Autocomplete\n className={classnames(\n 'dnb-forms-field-phone-number__country-code',\n countryCodeFieldClassName\n )}\n placeholder={countryCodePlaceholder ?? ' '}\n label_direction={layout}\n label={\n countryCodeLabel ??\n sharedContext?.translation.Forms.countryCodeLabel\n }\n mode=\"async\"\n data={singleCountryCodeData}\n value={countryCode}\n disabled={disabled}\n on_focus={onFocusHandler}\n on_blur={handleBlur}\n on_change={handleCountryCodeChange}\n independent_width\n search_numbers\n no_animation={props.noAnimation}\n stretch={width === 'stretch'}\n />\n\n <StringComponent\n className={classnames(\n 'dnb-forms-field-phone-number__number',\n numberFieldClassName\n )}\n type=\"tel\"\n emptyValue=\"\"\n layout=\"vertical\"\n label={label ?? ' '}\n placeholder={placeholder ?? '00 00 00 00'}\n mask={\n numberMask ?? [\n /\\d/,\n /\\d/,\n ' ',\n /\\d/,\n /\\d/,\n ' ',\n /\\d/,\n /\\d/,\n ' ',\n /\\d/,\n /\\d/,\n ]\n }\n onFocus={handleFocus}\n onBlur={handleBlur}\n onChange={handleNumberChange}\n value={phoneNumber}\n info={info}\n warning={warning}\n error={error}\n disabled={disabled}\n width=\"stretch\"\n help={help}\n />\n </Flex.Horizontal>\n </FieldBlock>\n )\n}\n\ntype CountryType = {\n cdc: string\n iso: string\n i18n: {\n en: string\n }\n}\n\nfunction makeObject(country: CountryType, lang: string) {\n return {\n selectedKey: `+${country.cdc}`,\n selected_value: `${country.iso} (+${country.cdc})`,\n content: `+${country.cdc} ${country.i18n[lang] ?? country.i18n.en}`,\n }\n}\n\nPhoneNumber._supportsSpacingProps = true\nexport default PhoneNumber\n"],"mappings":"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"}
1	+ {"version":3,"file":"PhoneNumber.js","names":["React","useMemo","useContext","useCallback","Autocomplete","Flex","classnames","countries","StringComponent","useDataValue","FieldBlock","pickSpacingProps","SharedContext","PhoneNumber","props","sharedContext","tr","translation","Forms","errorMessages","_objectSpread","required","phoneNumberErrorRequired","defaultProps","value","preparedProps","className","countryCodeFieldClassName","numberFieldClassName","countryCodePlaceholder","placeholder","countryCodeLabel","label","phoneNumberLabel","numberMask","emptyValue","info","warning","error","disabled","width","help","validateInitially","continuousValidation","validateUnchanged","handleFocus","handleBlur","handleChange","onCountryCodeChange","onNumberChange","countryCode","phoneNumber","undefined","match","singleCountryCodeData","_sharedContext$locale","getCountryData","lang","locale","split","filter","handleCountryCodeChange","_ref","_data$selectedKey$tri","_data$selectedKey","data","selectedKey","trim","Boolean","join","handleNumberChange","onFocusHandler","_ref2","dataList","updateData","length","_sharedContext$locale2","createElement","_extends","Horizontal","label_direction","on_focus","on_blur","on_change","independent_width","search_numbers","keep_value_and_selection","no_animation","noAnimation","stretch","type","layout","mask","onFocus","onBlur","onChange","makeObject","country","_country$i18n$lang","cdc","selected_value","iso","content","i18n","en","arguments","_ref3","sort","_ref4","_ref5","a","b","map","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx"],"sourcesContent":["import React, { useMemo, useContext, useCallback } from 'react'\nimport { Autocomplete, Flex } from '../../../../components'\nimport { InputMaskedProps } from '../../../../components/InputMasked'\nimport classnames from 'classnames'\nimport countries from '../../constants/countries'\nimport StringComponent from '../String'\nimport { useDataValue } from '../../hooks'\nimport FieldBlock from '../../FieldBlock'\nimport { FieldHelpProps, FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = FieldHelpProps &\n FieldProps<string, undefined> & {\n countryCodeFieldClassName?: string\n numberFieldClassName?: string\n countryCodePlaceholder?: string\n countryCodeLabel?: string\n numberMask?: InputMaskedProps['mask']\n width?: 'large' \| 'stretch'\n onCountryCodeChange?: (value: string \| undefined) => void\n onNumberChange?: (value: string \| undefined) => void\n } & {\n /*\n For internal testing purposes\n /\n noAnimation?: boolean\n }\n\nfunction PhoneNumber(props: Props) {\n const sharedContext = useContext(SharedContext)\n const tr = sharedContext?.translation.Forms\n\n const errorMessages = useMemo(\n () => ({\n required: tr.phoneNumberErrorRequired,\n ...props?.errorMessages,\n }),\n [tr, props.errorMessages]\n )\n\n const defaultProps: Partial<Props> = {\n // Important for the default value to be defined here, and not after the useDataValue call, to avoid the UI jumping\n // back to +47 once the user empty the field so handleChange send out undefined.\n value: '+47',\n errorMessages,\n }\n const preparedProps: Props = {\n ...defaultProps,\n ...props,\n }\n\n const {\n className,\n countryCodeFieldClassName,\n numberFieldClassName,\n countryCodePlaceholder,\n placeholder,\n countryCodeLabel,\n label = sharedContext?.translation.Forms.phoneNumberLabel,\n value,\n numberMask,\n emptyValue,\n info,\n warning,\n error,\n disabled,\n width = 'large',\n help,\n required,\n validateInitially,\n continuousValidation,\n validateUnchanged,\n handleFocus,\n handleBlur,\n handleChange,\n onCountryCodeChange,\n onNumberChange,\n } = useDataValue(preparedProps)\n\n const [, countryCode, phoneNumber] =\n value !== undefined\n ? value.match(/^(\\+[^ ]+)? ?(.)$/)\n : [undefined, '', '']\n\n const singleCountryCodeData = useMemo(() => {\n return getCountryData({\n lang: sharedContext.locale?.split('-')[0],\n filter: countryCode,\n })\n }, [])\n\n const handleCountryCodeChange = useCallback(\n ({ data }: { data: { selectedKey: string } }) => {\n const countryCode = data?.selectedKey?.trim() ?? emptyValue\n\n if (!countryCode && !phoneNumber) {\n handleChange?.(emptyValue)\n onCountryCodeChange?.(emptyValue)\n return\n }\n\n handleChange?.([countryCode, phoneNumber].filter(Boolean).join(' '))\n onCountryCodeChange?.(countryCode)\n },\n [phoneNumber, emptyValue, handleChange, onCountryCodeChange]\n )\n\n const handleNumberChange = useCallback(\n (phoneNumber: string) => {\n if (!countryCode && !phoneNumber) {\n handleChange?.(emptyValue)\n onNumberChange?.(emptyValue)\n return\n }\n\n handleChange?.([countryCode, phoneNumber].filter(Boolean).join(' '))\n onNumberChange?.(phoneNumber)\n },\n [countryCode, emptyValue, handleChange, onNumberChange]\n )\n\n const onFocusHandler = ({ dataList, updateData }) => {\n // because there can be more than one country with same cdc\n if (dataList.length < 10) {\n updateData(\n getCountryData({ lang: sharedContext.locale?.split('-')[0] })\n )\n }\n handleFocus()\n }\n\n return (\n <FieldBlock\n className={classnames('dnb-forms-field-phone-number', className)}\n width={width !== 'stretch' ? width : undefined}\n info={info}\n warning={warning}\n error={error}\n {...pickSpacingProps(props)}\n >\n <Flex.Horizontal>\n <Autocomplete\n className={classnames(\n 'dnb-forms-field-phone-number__country-code',\n countryCodeFieldClassName\n )}\n placeholder={countryCodePlaceholder ?? ' '}\n label_direction=\"vertical\"\n label={\n countryCodeLabel ??\n sharedContext?.translation.Forms.countryCodeLabel\n }\n data={singleCountryCodeData}\n value={countryCode}\n disabled={disabled}\n on_focus={onFocusHandler}\n on_blur={handleBlur}\n on_change={handleCountryCodeChange}\n independent_width\n search_numbers\n keep_value_and_selection\n no_animation={props.noAnimation}\n stretch={width === 'stretch'}\n />\n\n <StringComponent\n className={classnames(\n 'dnb-forms-field-phone-number__number',\n numberFieldClassName\n )}\n type=\"tel\"\n emptyValue=\"\"\n layout=\"vertical\"\n label={label ?? ' '}\n placeholder={placeholder ?? '00 00 00 00'}\n mask={\n numberMask ?? [\n /\\d/,\n /\\d/,\n ' ',\n /\\d/,\n /\\d/,\n ' ',\n /\\d/,\n /\\d/,\n ' ',\n /\\d/,\n /\\d/,\n ]\n }\n onFocus={handleFocus}\n onBlur={handleBlur}\n onChange={handleNumberChange}\n value={phoneNumber}\n info={info}\n warning={warning}\n error={error}\n disabled={disabled}\n width=\"stretch\"\n help={help}\n required={required}\n validateInitially={validateInitially}\n continuousValidation={continuousValidation}\n validateUnchanged={validateUnchanged}\n />\n </Flex.Horizontal>\n </FieldBlock>\n )\n}\n\ntype CountryType = {\n cdc: string\n iso: string\n i18n: {\n en: string\n }\n}\n\nfunction makeObject(country: CountryType, lang: string) {\n return {\n selectedKey: `+${country.cdc}`,\n selected_value: `${country.iso} (+${country.cdc})`,\n content: `+${country.cdc} ${country.i18n[lang] ?? country.i18n.en}`,\n }\n}\n\nfunction getCountryData({ lang = 'en', filter = null } = {}) {\n return countries\n .filter(({ cdc }) => !filter \|\| `+${cdc}` === filter)\n .sort(({ i18n: a }, { i18n: b }) => (a[lang] > b[lang] ? 1 : -1))\n .map((country) => makeObject(country, lang))\n}\n\nPhoneNumber._supportsSpacingProps = true\nexport default PhoneNumber\n"],"mappings":"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"}

package/extensions/forms/Field/SelectCountry/SelectCountry.js CHANGED Viewed

@@ -11,12 +11,14 @@ import SharedContext from '../../../../shared/Context';
 function SelectCountry(props) {
   var _props$placeholder, _props$label, _sharedContext$locale;
   const sharedContext = useContext(SharedContext);
+  const tr = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms;
+  const errorMessages = useMemo(() => _objectSpread({
+    required: tr.selectCountryErrorRequired
+  }, props.errorMessages), [tr, props.errorMessages]);
   const selectComponentProps = _objectSpread(_objectSpread({}, props), {}, {
     placeholder: (_props$placeholder = props.placeholder) !== null && _props$placeholder !== void 0 ? _props$placeholder : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.selectCountryPlaceholder,
     label: (_props$label = props.label) !== null && _props$label !== void 0 ? _props$label : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.selectCountryLabel,
-    errorMessages: _objectSpread({
-      required: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.selectCountryErrorRequired
-    }, props.errorMessages)
+    errorMessages
   });
   const lang = (_sharedContext$locale = sharedContext.locale) === null || _sharedContext$locale === void 0 ? void 0 : _sharedContext$locale.split('-')[0];
   const countryOptions = useMemo(() => countries.map(country => {
@@ -26,7 +28,7 @@ function SelectCountry(props) {
       value: country.iso,
       title: (_country$i18n$lang = country.i18n[lang]) !== null && _country$i18n$lang !== void 0 ? _country$i18n$lang : country.i18n.en
     });
-  }), [sharedContext.locale]);
+  }), [lang]);
   return React.createElement(Selection, selectComponentProps, countryOptions);
 }
 SelectCountry._supportsSpacingProps = true;

package/extensions/forms/Field/SelectCountry/SelectCountry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectCountry.js","names":["React","useContext","useMemo","Selection","Option","countries","SharedContext","SelectCountry","props","_props$placeholder","_props$label","_sharedContext$locale","sharedContext","~~selectComponentProps~~","~~_objectSpread~~","~~placeholder~~","~~translation~~","~~Forms~~","~~selectCountryPlaceholder~~","~~label~~","~~selectCountryLabel~~","~~errorMessages~~","~~required~~","~~selectCountryErrorRequired~~","lang","locale","split","countryOptions","map","country","_country$i18n$lang","createElement","key","iso","value","title","i18n","en","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/SelectCountry/SelectCountry.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport Selection, { Props as SelectionProps } from '../Selection'\nimport Option from '../Option'\nimport countries from '../../constants/countries'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = SelectionProps\n\nfunction SelectCountry(props: Props) {\n const sharedContext = useContext(SharedContext)\n\n const selectComponentProps: Props = {\n ...props,\n placeholder:\n props.placeholder ??\n sharedContext?.translation.Forms.selectCountryPlaceholder,\n label:\n props.label ?? sharedContext?.translation.Forms.selectCountryLabel,\n errorMessages~~: {\n required:\n sharedContext?.translation.Forms.selectCountryErrorRequired~~,\n ~~...props.errorMessages,\n },\n~~ }\n\n const lang = sharedContext.locale?.split('-')[0]\n const countryOptions = useMemo(\n () =>\n countries.map((country) => (\n <Option\n key={country.iso}\n value={country.iso}\n title={country.i18n[lang] ?? country.i18n.en}\n />\n )),\n [~~sharedContext.locale~~]\n )\n\n return <Selection {...selectComponentProps}>{countryOptions}</Selection>\n}\n\nSelectCountry._supportsSpacingProps = true\nexport default SelectCountry\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,SAAS,MAAmC,cAAc;AACjE,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,SAAS,MAAM,2BAA2B;AACjD,OAAOC,aAAa,MAAM,4BAA4B;AAItD,SAASC,aAAaA,CAACC,KAAY,EAAE;EAAA,IAAAC,kBAAA,EAAAC,YAAA,EAAAC,qBAAA;EACnC,MAAMC,aAAa,GAAGX,UAAU,CAACK,aAAa,CAAC;~~EAE~~/C,MAAMO,oBAA2B,~~GAAAC~~,aAAA,CAAAA,aAAA,~~KAC5BN~~,KAAK;~~IACRO~~,WAAW,~~GAAAN~~,kBAAA,GACTD,KAAK,~~CAACO~~,WAAW,~~cAAAN~~,kBAAA,cAAAA,kBAAA,GACjBG,aAAa,aAAbA,aAAa,uBAAbA,aAAa,~~CAAEI~~,WAAW,CAACC,KAAK,~~CAACC~~,wBAAwB;IAC3DC,KAAK,~~GAAAT~~,YAAA,GACHF,KAAK,~~CAACW~~,KAAK,~~cAAAT~~,YAAA,cAAAA,YAAA,GAAIE,aAAa,aAAbA,aAAa,uBAAbA,aAAa,~~CAAEI~~,WAAW,CAACC,KAAK,~~CAACG~~,kBAAkB;~~IACpEC,aAAa,EAAAP,aAAA~~;~~MACXQ~~,~~QAAQ,EACNV,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEI,WAAW,CAACC,KAAK,CAACM~~;~~IAA0B,GAC1Df,KAAK,CAACa,aAAa;EACvB,EACF;~~EAED,~~MAAMG~~,IAAI,~~IAAAb~~,qBAAA,GAAGC,aAAa,~~CAACa~~,MAAM,~~cAAAd~~,qBAAA,uBAApBA,qBAAA,~~CAAsBe~~,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;EAChD,MAAMC,cAAc,~~GAAGzB~~,OAAO,CAC5B,MACEG,SAAS,~~CAACuB~~,GAAG,CAAEC,OAAO;IAAA,IAAAC,kBAAA;IAAA,~~OACpB9B~~,KAAA,~~CAAA+B~~,aAAA,~~CAAC3B~~,MAAM;~~MACL4B~~,GAAG,EAAEH,OAAO,CAACI,GAAI;MACjBC,KAAK,EAAEL,OAAO,CAACI,GAAI;MACnBE,KAAK,GAAAL,kBAAA,GAAED,OAAO,CAACO,IAAI,CAACZ,IAAI,CAAC,cAAAM,kBAAA,cAAAA,kBAAA,GAAID,OAAO,CAACO,IAAI,CAACC;IAAG,CAC9C,CAAC;EAAA,CACH,CAAC,EACJ,~~CAACzB~~,~~aAAa~~,~~CAACa~~,~~MAAM,CACvB,~~CAAC;EAED,OAAOzB,KAAA,~~CAAA+B~~,aAAA,~~CAAC5B~~,SAAS,~~EAAKU~~,oBAAoB,~~EAAGc~~,cAA0B,CAAC;AAC1E;~~AAEApB~~,aAAa,~~CAAC+B~~,qBAAqB,GAAG,IAAI;AAC1C,~~eAAe/B~~,aAAa"}
1	+ {"version":3,"file":"SelectCountry.js","names":["React","useContext","useMemo","Selection","Option","countries","SharedContext","SelectCountry","props","_props$placeholder","_props$label","_sharedContext$locale","sharedContext","tr","translation","Forms","errorMessages","_objectSpread","required","selectCountryErrorRequired","selectComponentProps","placeholder","selectCountryPlaceholder","label","selectCountryLabel","lang","locale","split","countryOptions","map","country","_country$i18n$lang","createElement","key","iso","value","title","i18n","en","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/SelectCountry/SelectCountry.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport Selection, { Props as SelectionProps } from '../Selection'\nimport Option from '../Option'\nimport countries from '../../constants/countries'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = SelectionProps\n\nfunction SelectCountry(props: Props) {\n const sharedContext = useContext(SharedContext)\n const tr = sharedContext?.translation.Forms\n\n const errorMessages = useMemo(\n () => ({\n required: tr.selectCountryErrorRequired,\n ...props.errorMessages,\n }),\n [tr, props.errorMessages]\n )\n\n const selectComponentProps: Props = {\n ...props,\n placeholder:\n props.placeholder ??\n sharedContext?.translation.Forms.selectCountryPlaceholder,\n label:\n props.label ?? sharedContext?.translation.Forms.selectCountryLabel,\n errorMessages,\n }\n\n const lang = sharedContext.locale?.split('-')[0]\n const countryOptions = useMemo(\n () =>\n countries.map((country) => (\n <Option\n key={country.iso}\n value={country.iso}\n title={country.i18n[lang] ?? country.i18n.en}\n />\n )),\n [lang]\n )\n\n return <Selection {...selectComponentProps}>{countryOptions}</Selection>\n}\n\nSelectCountry._supportsSpacingProps = true\nexport default SelectCountry\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,SAAS,MAAmC,cAAc;AACjE,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,SAAS,MAAM,2BAA2B;AACjD,OAAOC,aAAa,MAAM,4BAA4B;AAItD,SAASC,aAAaA,CAACC,KAAY,EAAE;EAAA,IAAAC,kBAAA,EAAAC,YAAA,EAAAC,qBAAA;EACnC,MAAMC,aAAa,GAAGX,UAAU,CAACK,aAAa,CAAC;EAC/C,MAAMO,EAAE,GAAGD,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK;EAE3C,MAAMC,aAAa,GAAGd,OAAO,CAC3B,MAAAe,aAAA;IACEC,QAAQ,EAAEL,EAAE,CAACM;EAA0B,GACpCX,KAAK,CAACQ,aAAa,CACtB,EACF,CAACH,EAAE,EAAEL,KAAK,CAACQ,aAAa,CAC1B,CAAC;EAED,MAAMI,oBAA2B,GAAAH,aAAA,CAAAA,aAAA,KAC5BT,KAAK;IACRa,WAAW,GAAAZ,kBAAA,GACTD,KAAK,CAACa,WAAW,cAAAZ,kBAAA,cAAAA,kBAAA,GACjBG,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK,CAACO,wBAAwB;IAC3DC,KAAK,GAAAb,YAAA,GACHF,KAAK,CAACe,KAAK,cAAAb,YAAA,cAAAA,YAAA,GAAIE,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK,CAACS,kBAAkB;IACpER;EAAa,EACd;EAED,MAAMS,IAAI,IAAAd,qBAAA,GAAGC,aAAa,CAACc,MAAM,cAAAf,qBAAA,uBAApBA,qBAAA,CAAsBgB,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;EAChD,MAAMC,cAAc,GAAG1B,OAAO,CAC5B,MACEG,SAAS,CAACwB,GAAG,CAAEC,OAAO;IAAA,IAAAC,kBAAA;IAAA,OACpB/B,KAAA,CAAAgC,aAAA,CAAC5B,MAAM;MACL6B,GAAG,EAAEH,OAAO,CAACI,GAAI;MACjBC,KAAK,EAAEL,OAAO,CAACI,GAAI;MACnBE,KAAK,GAAAL,kBAAA,GAAED,OAAO,CAACO,IAAI,CAACZ,IAAI,CAAC,cAAAM,kBAAA,cAAAA,kBAAA,GAAID,OAAO,CAACO,IAAI,CAACC;IAAG,CAC9C,CAAC;EAAA,CACH,CAAC,EACJ,CAACb,IAAI,CACP,CAAC;EAED,OAAOzB,KAAA,CAAAgC,aAAA,CAAC7B,SAAS,EAAKiB,oBAAoB,EAAGQ,cAA0B,CAAC;AAC1E;AAEArB,aAAa,CAACgC,qBAAqB,GAAG,IAAI;AAC1C,eAAehC,aAAa"}

package/extensions/forms/Field/String/String.js CHANGED Viewed

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React, { useContext } from 'react';
+import React, { useContext, useMemo, useCallback } from 'react';
 import classnames from 'classnames';
 import { HelpButton, Input, Textarea } from '../../../../components';
 import InputMasked from '../../../../components/InputMasked';
@@ -13,31 +13,41 @@ import FieldBlock from '../../FieldBlock';
 import { useDataValue } from '../../hooks';
 import { pickSpacingProps } from '../../../../components/flex/utils';
 function StringComponent(props) {
-  var _props$minLength, _props$maxLength, _props$schema, _props$width, _value$length, _value$length2, _value$toString;
+  var _props$width, _value$length, _value$length2, _value$toString;
   const sharedContext = useContext(SharedContext);
-  const preparedProps = _objectSpread(_objectSpread({}, props), {}, {
-    errorMessages: _objectSpread({
-      required: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.inputErrorRequired,
-      minLength: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.stringInputErrorMinLength.replace('{minLength}', (_props$minLength = props.minLength) === null || _props$minLength === void 0 ? void 0 : _props$minLength.toString()),
-      maxLength: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.stringInputErrorMaxLength.replace('{maxLength}', (_props$maxLength = props.maxLength) === null || _props$maxLength === void 0 ? void 0 : _props$maxLength.toString()),
-      pattern: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.inputErrorPattern
-    }, props.errorMessages),
-    schema: (_props$schema = props.schema) !== null && _props$schema !== void 0 ? _props$schema : {
+  const tr = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms;
+  const errorMessages = useMemo(() => {
+    var _props$minLength, _props$maxLength;
+    return _objectSpread({
+      required: tr.inputErrorRequired,
+      minLength: tr.stringInputErrorMinLength.replace('{minLength}', (_props$minLength = props.minLength) === null || _props$minLength === void 0 ? void 0 : _props$minLength.toString()),
+      maxLength: tr.stringInputErrorMaxLength.replace('{maxLength}', (_props$maxLength = props.maxLength) === null || _props$maxLength === void 0 ? void 0 : _props$maxLength.toString()),
+      pattern: tr.inputErrorPattern
+    }, props.errorMessages);
+  }, [tr, props.errorMessages, props.minLength, props.maxLength]);
+  const schema = useMemo(() => {
+    var _props$schema;
+    return (_props$schema = props.schema) !== null && _props$schema !== void 0 ? _props$schema : {
       type: 'string',
       minLength: props.minLength,
       maxLength: props.maxLength,
       pattern: props.pattern
-    },
-    fromInput: _ref => {
-      let {
-        value,
-        cleanedValue
-      } = _ref;
-      if (value === '') {
-        return props.emptyValue;
-      }
-      return cleanedValue !== null && cleanedValue !== void 0 ? cleanedValue : value;
-    },
+    };
+  }, [props.schema, props.minLength, props.maxLength, props.pattern]);
+  const fromInput = useCallback(_ref => {
+    let {
+      value,
+      cleanedValue
+    } = _ref;
+    if (value === '') {
+      return props.emptyValue;
+    }
+    return cleanedValue !== null && cleanedValue !== void 0 ? cleanedValue : value;
+  }, [props.emptyValue]);
+  const preparedProps = _objectSpread(_objectSpread({}, props), {}, {
+    errorMessages,
+    schema,
+    fromInput,
     width: (_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : 'large'
   });
   const {