@dnb/eufemia 10.13.0 → 10.15.0

package/cjs/extensions/forms/Field/Number/Number.js

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -6,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _components = require("../../../../components");
+var _Context = _interopRequireDefault(require("../../../../shared/Context"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _FieldBlock = _interopRequireDefault(require("../../FieldBlock"));
 var _hooks = require("../../hooks");
@@ -20,7 +22,9 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function NumberComponent(props) {
-  var _props$schema, _props$width;
+  var _props$width;
+  const sharedContext = (0, _react.useContext)(_Context.default);
+  const tr = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms;
   const {
     currency,
     percent,
@@ -32,6 +36,41 @@ function NumberComponent(props) {
     suffix,
     rightAligned
   } = props;
+  const errorMessages = (0, _react.useMemo)(() => _objectSpread({
+    required: tr.inputErrorRequired,
+    minimum: tr.numberFieldErrorMinimum,
+    maximum: tr.numberFieldErrorMaximum,
+    exclusiveMinimum: tr.numberFieldErrorExclusiveMinimum,
+    exclusiveMaximum: tr.numberFieldErrorExclusiveMaximum,
+    multipleOf: tr.numberFieldErrorMultipleOf
+  }, props.errorMessages), [tr, props.errorMessages]);
+  const schema = (0, _react.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 = (0, _react.useCallback)(external => {
+    if (external === undefined) {
+      return '';
+    }
+    return external;
+  }, []);
+  const fromInput = (0, _react.useCallback)(_ref => {
+    let {
+      value,
+      numberValue
+    } = _ref;
+    if (value === '') {
+      return emptyValue;
+    }
+    return numberValue;
+  }, []);
   const maskProps = (0, _react.useMemo)(() => {
     if (currency) {
       return {
@@ -57,30 +96,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 {
@@ -116,6 +135,8 @@ function NumberComponent(props) {
     info: info,
     warning: warning,
     error: error,
+    disabled: disabled,
+    width: width === 'stretch' ? width : undefined,
     contentsWidth: width !== false ? width : undefined
   }, (0, _utils.pickSpacingProps)(props)), _react.default.createElement(_components.InputMasked, _extends({
     id: id,
@@ -125,7 +146,7 @@ function NumberComponent(props) {
     placeholder: placeholder,
     value: value
   }, maskProps, {
-    right: rightAligned,
+    align: rightAligned && 'right',
     on_focus: handleFocus,
     on_blur: handleBlur,
     on_change: handleChange,

package/cjs/extensions/forms/Field/Number/Number.js.map

@@ -1 +1 @@
-{"version":3,"file":"Number.js","names":["_react","_interopRequireWildcard","require","_components","_classnames","_interopRequireDefault","_FieldBlock","_hooks","_utils","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","NumberComponent","props","_props$schema","_props$width","currency","percent","mask","thousandSeparator","decimalSymbol","decimalLimit","prefix","suffix","rightAligned","maskProps","useMemo","as_currency","as_percent","as_number","number_mask","includeThousandsSeparator","thousandsSeparatorSymbol","preparedProps","schema","type","minimum","maximum","exclusiveMinimum","exclusiveMaximum","multipleOf","toInput","external","fromInput","_ref","numberValue","emptyValue","width","id","name","className","autoComplete","inputClassName","layout","placeholder","label","labelDescription","labelSecondary","disabled","info","warning","error","help","handleFocus","handleBlur","handleChange","useDataValue","createElement","classnames","forId","contentsWidth","pickSpacingProps","InputMasked","right","on_focus","on_blur","on_change","status","stretch","HelpButton","title","contents","_supportsSpacingProps","_default","exports"],"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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"}
+{"version":3,"file":"Number.js","names":["_react","_interopRequireWildcard","require","_components","_Context","_interopRequireDefault","_classnames","_FieldBlock","_hooks","_utils","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","NumberComponent","props","_props$width","sharedContext","useContext","SharedContext","tr","translation","Forms","currency","percent","mask","thousandSeparator","decimalSymbol","decimalLimit","prefix","suffix","rightAligned","errorMessages","useMemo","required","inputErrorRequired","minimum","numberFieldErrorMinimum","maximum","numberFieldErrorMaximum","exclusiveMinimum","numberFieldErrorExclusiveMinimum","exclusiveMaximum","numberFieldErrorExclusiveMaximum","multipleOf","numberFieldErrorMultipleOf","schema","_props$schema","type","toInput","useCallback","external","fromInput","_ref","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","useDataValue","createElement","classnames","forId","contentsWidth","pickSpacingProps","InputMasked","align","on_focus","on_blur","on_change","status","stretch","HelpButton","title","contents","_supportsSpacingProps","_default","exports"],"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,\n      maximum: tr.numberFieldErrorMaximum,\n      exclusiveMinimum: tr.numberFieldErrorExclusiveMinimum,\n      exclusiveMaximum: tr.numberFieldErrorExclusiveMaximum,\n      multipleOf: tr.numberFieldErrorMultipleOf,\n      ...props.errorMessages,\n    }),\n    [tr, props.errorMessages]\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      disabled={disabled}\n      width={width === 'stretch' ? width : undefined}\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        align={rightAligned && 'right'}\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/cjs/extensions/forms/Field/OrganizationNumber/OrganizationNumber.js

@@ -19,19 +19,22 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
 function OrganizationNumber(props) {
   var _props$pattern, _props$label, _props$width;
   const sharedContext = (0, _react.useContext)(_Context.default);
+  const tr = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms;
   const {
     validate = true,
     omitMask
   } = props;
+  const errorMessages = (0, _react.useMemo)(() => _objectSpread({
+    required: tr.organizationNumberErrorRequired,
+    pattern: tr.organizationNumberErrorPattern
+  }, props.errorMessages), [tr, props.errorMessages]);
+  const mask = (0, _react.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.default.createElement(_String.default, stringComponentProps);

package/cjs/extensions/forms/Field/OrganizationNumber/OrganizationNumber.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrganizationNumber.js","names":["_react","_interopRequireWildcard","require","_String","_interopRequireDefault","_Context","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","OrganizationNumber","props","_props$pattern","_props$label","_props$width","sharedContext","useContext","SharedContext","validate","omitMask","stringComponentProps","className","pattern","label","translation","Forms","organizationNumberLabel","errorMessages","required","organizationNumberErrorRequired","organizationNumberErrorPattern","mask","width","createElement","_supportsSpacingProps","_default","exports"],"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":"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"}
+{"version":3,"file":"OrganizationNumber.js","names":["_react","_interopRequireWildcard","require","_String","_interopRequireDefault","_Context","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","OrganizationNumber","props","_props$pattern","_props$label","_props$width","sharedContext","useContext","SharedContext","tr","translation","Forms","validate","omitMask","errorMessages","useMemo","required","organizationNumberErrorRequired","pattern","organizationNumberErrorPattern","mask","stringComponentProps","className","label","organizationNumberLabel","width","createElement","_supportsSpacingProps","_default","exports"],"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":"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"}

package/cjs/extensions/forms/Field/PhoneNumber/PhoneNumber.d.ts

@@ -1,15 +1,27 @@
 import { InputMaskedProps } from '../../../../components/InputMasked';
+import { CountryType } from '../../constants/countries';
+import { Props as InputProps } from '../String';
 import { FieldHelpProps, FieldProps } from '../../types';
-export type Props = FieldHelpProps & FieldProps<string, undefined> & {
+import { CountryFilterSet } from '../SelectCountry';
+export type Props = FieldHelpProps & FieldProps<string, undefined | string> & {
     countryCodeFieldClassName?: string;
     numberFieldClassName?: string;
     countryCodePlaceholder?: string;
     countryCodeLabel?: string;
     numberMask?: InputMaskedProps['mask'];
+    pattern?: InputProps['pattern'];
     width?: 'large' | 'stretch';
+    omitCountryCodeField?: boolean;
     onCountryCodeChange?: (value: string | undefined) => void;
     onNumberChange?: (value: string | undefined) => void;
-} & {
+    countries?: CountryFilterSet;
+    /**
+     * For internal use only.
+     *
+     * @param country
+     * @returns boolean
+     */
+    filterCountries?: (country: CountryType) => boolean;
     /**
      * For internal testing purposes
      */

package/cjs/extensions/forms/Field/PhoneNumber/PhoneNumber.js

@@ -14,6 +14,7 @@ var _hooks = require("../../hooks");
 var _FieldBlock = _interopRequireDefault(require("../../FieldBlock"));
 var _utils = require("../../../../components/flex/utils");
 var _Context = _interopRequireDefault(require("../../../../shared/Context"));
+var _SelectCountry = require("../SelectCountry");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -23,26 +24,32 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+const defaultCountryCode = '+47';
+const defaultPlaceholder = '00 00 00 00';
+const defaultMask = [/\d/, /\d/, ' ', /\d/, /\d/, ' ', /\d/, /\d/, ' ', /\d/, /\d/];
 function PhoneNumber(props) {
+  var _sharedContext$locale;
   const sharedContext = (0, _react.useContext)(_Context.default);
+  const tr = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms;
+  const lang = (_sharedContext$locale = sharedContext.locale) === null || _sharedContext$locale === void 0 ? void 0 : _sharedContext$locale.split('-')[0];
+  const errorMessages = (0, _react.useMemo)(() => _objectSpread({
+    required: tr.phoneNumberErrorRequired,
+    pattern: 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,
     label = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.phoneNumberLabel,
-    value,
     numberMask,
+    countries: ccFilter = 'Prioritized',
     emptyValue,
     info,
     warning,
@@ -50,122 +57,192 @@ function PhoneNumber(props) {
     disabled,
     width = 'large',
     help,
+    pattern,
+    required,
+    validateInitially,
+    continuousValidation,
+    validateUnchanged,
+    omitCountryCodeField,
     handleFocus,
     handleBlur,
     handleChange,
+    updateValue,
     onCountryCodeChange,
-    onNumberChange
+    onNumberChange,
+    filterCountries = ccFilter !== 'Prioritized' ? (0, _SelectCountry.makeCountryFilterSet)(ccFilter) : undefined
   } = (0, _hooks.useDataValue)(preparedProps);
-  const [, countryCode, phoneNumber] = value !== undefined ? value.match(/^(\+[^ ]+)? ?(.*)$/) : [undefined, '', ''];
-  const getCountryData = function () {
-    var _sharedContext$locale;
+  const countryCodeRef = _react.default.useRef(null);
+  const numberRef = _react.default.useRef(null);
+  const dataRef = _react.default.useRef(null);
+  const langRef = _react.default.useRef(lang);
+  const wasFilled = _react.default.useRef(false);
+  const updateCurrentDataSet = (0, _react.useCallback)(() => {
+    dataRef.current = (0, _SelectCountry.getCountryData)({
+      lang,
+      filter: !wasFilled.current ? country => `${formattCountryCode(country.cdc)}` === countryCodeRef.current : filterCountries,
+      sort: ccFilter,
+      makeObject
+    });
+  }, [lang, filterCountries, ccFilter]);
+  const callOnChange = (0, _react.useCallback)(_ref => {
     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.default.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 = (0, _react.useMemo)(() => {
-    return getCountryData({
-      filter: countryCode
+      countryCode = omitCountryCodeField ? emptyValue : countryCodeRef.current || emptyValue,
+      phoneNumber = numberRef.current || emptyValue
+    } = _ref;
+    updateValue('invalidate');
+    handleChange(phoneNumber ? joinValue([countryCode, phoneNumber]) : emptyValue, omitCountryCodeField ? {
+      phoneNumber
+    } : {
+      countryCode,
+      phoneNumber
     });
-  }, []);
-  const handleCountryCodeChange = (0, _react.useCallback)(_ref4 => {
-    var _data$selectedKey$tri, _data$selectedKey;
+  }, [omitCountryCodeField, emptyValue, updateValue, handleChange]);
+  (0, _react.useMemo)(() => {
+    const [countryCode, phoneNumber] = splitValue(props.value);
+    numberRef.current = phoneNumber;
+    if (lang !== langRef.current || !wasFilled.current) {
+      countryCodeRef.current = countryCode || defaultCountryCode;
+      langRef.current = lang;
+      updateCurrentDataSet();
+    }
+  }, [props.value, lang, updateCurrentDataSet]);
+  (0, _react.useEffect)(() => {
+    const [countryCode, phoneNumber] = splitValue(props.value);
+    const newValue = phoneNumber ? joinValue([countryCode, phoneNumber]) : emptyValue;
+    updateValue(newValue);
+  }, [props.value, emptyValue, updateValue]);
+  const handleCountryCodeChange = (0, _react.useCallback)(_ref2 => {
+    var _data$selectedKey;
     let {
       data
-    } = _ref4;
-    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);
-      onCountryCodeChange === null || onCountryCodeChange === void 0 ? void 0 : onCountryCodeChange(emptyValue);
-      return;
-    }
-    handleChange === null || handleChange === void 0 ? void 0 : handleChange([countryCode, phoneNumber].filter(Boolean).join(' '));
+    } = _ref2;
+    const countryCode = countryCodeRef.current = (data === null || data === void 0 ? void 0 : (_data$selectedKey = data.selectedKey) === null || _data$selectedKey === void 0 ? void 0 : _data$selectedKey.trim()) || emptyValue;
+    callOnChange({
+      countryCode
+    });
     onCountryCodeChange === null || onCountryCodeChange === void 0 ? void 0 : onCountryCodeChange(countryCode);
-  }, [phoneNumber, emptyValue, handleChange, onCountryCodeChange]);
-  const handleNumberChange = (0, _react.useCallback)(phoneNumber => {
-    if (!countryCode && !phoneNumber) {
-      handleChange === null || handleChange === void 0 ? void 0 : handleChange(emptyValue);
-      onNumberChange === null || onNumberChange === void 0 ? void 0 : onNumberChange(emptyValue);
-      return;
-    }
-    handleChange === null || handleChange === void 0 ? void 0 : handleChange([countryCode, phoneNumber].filter(Boolean).join(' '));
+  }, [emptyValue, callOnChange, onCountryCodeChange]);
+  const handleNumberChange = (0, _react.useCallback)(value => {
+    const phoneNumber = numberRef.current = value || emptyValue;
+    callOnChange({
+      phoneNumber
+    });
     onNumberChange === null || onNumberChange === void 0 ? void 0 : onNumberChange(phoneNumber);
-  }, [countryCode, emptyValue, handleChange, onNumberChange]);
-  const onFocusHandler = _ref5 => {
+  }, [emptyValue, callOnChange, onNumberChange]);
+  const onFocusHandler = (0, _react.useCallback)(_ref3 => {
     let {
-      dataList,
       updateData
-    } = _ref5;
-    if (dataList.length < 10) {
-      updateData(getCountryData());
+    } = _ref3;
+    if (!wasFilled.current) {
+      wasFilled.current = true;
+      updateCurrentDataSet();
+      updateData(dataRef.current);
     }
     handleFocus();
-  };
+  }, [handleFocus, updateCurrentDataSet]);
+  const onTypeHandler = (0, _react.useCallback)(_ref4 => {
+    var _event$nativeEvent;
+    let {
+      value,
+      updateData,
+      revalidateInputValue,
+      event
+    } = _ref4;
+    if (typeof (event === null || event === void 0 ? void 0 : (_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : _event$nativeEvent.data) === 'undefined') {
+      const cdcVal = /\+\d{1,3}\s{1}\d+/.test(value) ? splitValue(value)[0] : value;
+      const country = _countries.default.find(_ref5 => {
+        let {
+          cdc
+        } = _ref5;
+        return cdc === cdcVal;
+      });
+      if (country !== null && country !== void 0 && country.cdc) {
+        const countryCode = countryCodeRef.current = formattCountryCode(country.cdc);
+        updateCurrentDataSet();
+        updateData(dataRef.current);
+        callOnChange({
+          countryCode
+        });
+        window.requestAnimationFrame(() => {
+          revalidateInputValue();
+        });
+      }
+    }
+  }, [callOnChange, updateCurrentDataSet]);
+  const isDefault = countryCodeRef.current.includes(defaultCountryCode);
   return _react.default.createElement(_FieldBlock.default, _extends({
     className: (0, _classnames.default)('dnb-forms-field-phone-number', className),
-    width: width !== 'stretch' ? width : undefined,
+    width: omitCountryCodeField ? undefined : width,
     info: info,
     warning: warning,
-    error: error
-  }, (0, _utils.pickSpacingProps)(props)), _react.default.createElement(_components.Flex.Horizontal, null, _react.default.createElement(_components.Autocomplete, {
+    error: error,
+    disabled: disabled
+  }, (0, _utils.pickSpacingProps)(props)), _react.default.createElement(_components.Flex.Horizontal, {
+    align: "baseline"
+  }, !omitCountryCodeField && _react.default.createElement(_components.Autocomplete, {
     className: (0, _classnames.default)('dnb-forms-field-phone-number__country-code', countryCodeFieldClassName),
+    mode: "async",
     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,
+    data: dataRef.current,
+    value: countryCodeRef.current,
     disabled: disabled,
     on_focus: onFocusHandler,
     on_blur: handleBlur,
     on_change: handleCountryCodeChange,
+    on_type: onTypeHandler,
     independent_width: true,
     search_numbers: true,
+    keep_selection: true,
+    autoComplete: "tel-country-code",
     no_animation: props.noAnimation,
     stretch: width === 'stretch'
   }), _react.default.createElement(_String.default, {
     className: (0, _classnames.default)('dnb-forms-field-phone-number__number', numberFieldClassName),
     type: "tel",
+    autoComplete: "tel-national",
     emptyValue: "",
     layout: "vertical",
     label: label !== null && label !== void 0 ? label : ' ',
-    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : '00 00 00 00',
-    mask: numberMask !== null && numberMask !== void 0 ? numberMask : [/\d/, /\d/, ' ', /\d/, /\d/, ' ', /\d/, /\d/, ' ', /\d/, /\d/],
+    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : isDefault ? defaultPlaceholder : undefined,
+    mask: numberMask !== null && numberMask !== void 0 ? numberMask : isDefault ? defaultMask : Array(12).fill(/\d/),
     onFocus: handleFocus,
     onBlur: handleBlur,
     onChange: handleNumberChange,
-    value: phoneNumber,
+    value: numberRef.current,
     info: info,
     warning: warning,
     error: error,
     disabled: disabled,
-    width: "stretch",
-    help: help
+    width: omitCountryCodeField ? 'medium' : 'stretch',
+    help: help,
+    required: required,
+    pattern: pattern,
+    errorMessages: errorMessages,
+    validateInitially: validateInitially,
+    continuousValidation: continuousValidation,
+    validateUnchanged: validateUnchanged
   })));
 }
 function makeObject(country, lang) {
   var _country$i18n$lang;
   return {
-    selectedKey: `+${country.cdc}`,
-    selected_value: `${country.iso} (+${country.cdc})`,
-    content: `+${country.cdc} ${(_country$i18n$lang = country.i18n[lang]) !== null && _country$i18n$lang !== void 0 ? _country$i18n$lang : country.i18n.en}`
+    selectedKey: formattCountryCode(country.cdc),
+    selected_value: `${country.iso} (${formattCountryCode(country.cdc)})`,
+    search_content: Object.values(country.i18n).map(v => `${formattCountryCode(country.cdc)} ${v}`),
+    content: `${formattCountryCode(country.cdc)} ${(_country$i18n$lang = country.i18n[lang]) !== null && _country$i18n$lang !== void 0 ? _country$i18n$lang : country.i18n.en}`
   };
 }
+function formattCountryCode(value) {
+  return `+${value}`;
+}
+function splitValue(value) {
+  return (typeof value === 'string' ? value.match(/^(\+[^ ]+)? ?(.*)$/) : [undefined, '', '']).slice(1);
+}
+function joinValue(array) {
+  return array.filter(Boolean).join(' ');
+}
 PhoneNumber._supportsSpacingProps = true;
 var _default = PhoneNumber;
 exports.default = _default;