@dnb/eufemia 10.56.0 → 10.57.1

package/extensions/forms/Field/Option/OptionDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"OptionDocs.js","names":["FieldProperties","OptionProperties","value","doc","type","status","title","text","help","children"],"sources":["../../../../../../src/extensions/forms/Field/Option/OptionDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\nimport { FieldProperties } from '../FieldDocs'\n\nexport const OptionProperties: PropertiesTableProps = {\n  value: {\n    doc: 'Value for this option.',\n    type: ['string', 'number'],\n    status: 'optional',\n  },\n  title: {\n    doc: 'Text title for the option.',\n    type: 'string',\n    status: 'optional',\n  },\n  text: {\n    doc: 'Secondary text.',\n    type: 'string',\n    status: 'optional',\n  },\n  help: FieldProperties.help,\n  children: {\n    doc: 'Optional way to provide `title`.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n}\n"],"mappings":"AACA,SAASA,eAAe,QAAQ,cAAc;AAE9C,OAAO,MAAMC,gBAAsC,GAAG;EACpDC,KAAK,EAAE;IACLC,GAAG,EAAE,wBAAwB;IAC7BC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV,CAAC;EACDC,KAAK,EAAE;IACLH,GAAG,EAAE,4BAA4B;IACjCC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,IAAI,EAAE;IACJJ,GAAG,EAAE,iBAAiB;IACtBC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,IAAI,EAAER,eAAe,CAACQ,IAAI;EAC1BC,QAAQ,EAAE;IACRN,GAAG,EAAE,kCAAkC;IACvCC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV;AACF,CAAC"}
+{"version":3,"file":"OptionDocs.js","names":["FieldProperties","OptionProperties","value","doc","type","status","title","text","disabled","help","children"],"sources":["../../../../../../src/extensions/forms/Field/Option/OptionDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\nimport { FieldProperties } from '../FieldDocs'\n\nexport const OptionProperties: PropertiesTableProps = {\n  value: {\n    doc: 'Value for this option.',\n    type: ['string', 'number'],\n    status: 'optional',\n  },\n  title: {\n    doc: 'Title for the option. Overrides `children`.',\n    type: ['string', 'React.Node'],\n    status: 'optional',\n  },\n  text: {\n    doc: 'Secondary text.',\n    type: ['string', 'React.Node'],\n    status: 'optional',\n  },\n  disabled: {\n    doc: 'Will disable the option.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  help: FieldProperties.help,\n  children: {\n    doc: 'Optional way to provide `title`. Will be ignored if `title` is used.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n}\n"],"mappings":"AACA,SAASA,eAAe,QAAQ,cAAc;AAE9C,OAAO,MAAMC,gBAAsC,GAAG;EACpDC,KAAK,EAAE;IACLC,GAAG,EAAE,wBAAwB;IAC7BC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV,CAAC;EACDC,KAAK,EAAE;IACLH,GAAG,EAAE,6CAA6C;IAClDC,IAAI,EAAE,CAAC,QAAQ,EAAE,YAAY,CAAC;IAC9BC,MAAM,EAAE;EACV,CAAC;EACDE,IAAI,EAAE;IACJJ,GAAG,EAAE,iBAAiB;IACtBC,IAAI,EAAE,CAAC,QAAQ,EAAE,YAAY,CAAC;IAC9BC,MAAM,EAAE;EACV,CAAC;EACDG,QAAQ,EAAE;IACRL,GAAG,EAAE,0BAA0B;IAC/BC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDI,IAAI,EAAET,eAAe,CAACS,IAAI;EAC1BC,QAAQ,EAAE;IACRP,GAAG,EAAE,sEAAsE;IAC3EC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV;AACF,CAAC"}

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

@@ -31,6 +31,7 @@ function OrganizationNumber(props) {
     validate = true,
     omitMask,
     validator,
+    onChangeValidator = validator,
     onBlurValidator = organizationNumberValidator,
     label: labelProp,
     width
@@ -44,7 +45,7 @@ function OrganizationNumber(props) {
     mask,
     width: width !== null && width !== void 0 ? width : 'medium',
     inputMode: 'numeric',
-    validator: validate ? validator : undefined,
+    onChangeValidator: validate ? onChangeValidator : undefined,
     onBlurValidator: validate ? onBlurValidatorToUse : undefined,
     exportValidators: {
       organizationNumberValidator

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

@@ -1 +1 @@
-{"version":3,"file":"OrganizationNumber.js","names":["React","useCallback","useMemo","StringField","useTranslation","OrganizationNumber","props","translations","errorOrgNo","errorOrgNoLength","errorRequired","label","errorMessages","_objectSpread","organizationNumberValidator","value","undefined","orgNoIs9Digits","length","Error","isValidOrgNumber","validate","omitMask","validator","onBlurValidator","labelProp","width","mask","onBlurValidatorToUse","StringFieldProps","className","inputMode","exportValidators","createElement","digits","checkDigit","sum","i","parseInt","charAt","result","finalCheckDigit","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/OrganizationNumber/OrganizationNumber.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react'\nimport StringField, { Props as StringFieldProps } from '../String'\nimport useTranslation from '../../hooks/useTranslation'\nimport { Validator } from '../../types'\n\nexport type Props = Omit<StringFieldProps, 'onBlurValidator'> & {\n  validate?: boolean\n  omitMask?: boolean\n  onBlurValidator?: Validator<string> | false\n}\n\nfunction OrganizationNumber(props: Props) {\n  const translations = useTranslation().OrganizationNumber\n  const { errorOrgNo, errorOrgNoLength, errorRequired, label } =\n    translations\n\n  const errorMessages = useMemo(\n    () => ({\n      'Field.errorRequired': errorRequired,\n      'Field.errorPattern': errorOrgNo,\n      ...props.errorMessages,\n    }),\n    [errorRequired, errorOrgNo, props.errorMessages]\n  )\n\n  const organizationNumberValidator = useCallback(\n    (value: string) => {\n      if (value !== undefined) {\n        const orgNoIs9Digits = value?.length === 9\n\n        if (!orgNoIs9Digits) {\n          return Error(errorOrgNoLength)\n        }\n        if (orgNoIs9Digits && !isValidOrgNumber(value)) {\n          return Error(errorOrgNo)\n        }\n      }\n    },\n    [errorOrgNo, errorOrgNoLength]\n  )\n\n  const {\n    validate = true,\n    omitMask,\n    validator,\n    onBlurValidator = organizationNumberValidator,\n    label: labelProp,\n    width,\n  } = props\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 onBlurValidatorToUse =\n    onBlurValidator === false ? undefined : onBlurValidator\n\n  const StringFieldProps: StringFieldProps = {\n    ...props,\n    className: 'dnb-forms-field-organization-number',\n    label: labelProp ?? label,\n    errorMessages,\n    mask,\n    width: width ?? 'medium',\n    inputMode: 'numeric',\n    validator: validate ? validator : undefined,\n    onBlurValidator: validate ? onBlurValidatorToUse : undefined,\n    exportValidators: { organizationNumberValidator },\n  }\n\n  return <StringField {...StringFieldProps} />\n}\n\n/**\n * Source:\n * www.brreg.no/om-oss/registrene-vare/om-enhetsregisteret/organisasjonsnummeret/\n */\nfunction isValidOrgNumber(digits: string) {\n  let checkDigit = 2\n  let sum = 0\n\n  for (let i = digits.length - 2; i >= 0; --i) {\n    sum += parseInt(digits.charAt(i)) * checkDigit\n\n    checkDigit += 1\n\n    if (checkDigit > 7) {\n      checkDigit = 2\n    }\n  }\n\n  const result = 11 - (sum % 11)\n  const finalCheckDigit = result === 11 ? 0 : result\n\n  return parseInt(digits.charAt(digits.length - 1), 10) === finalCheckDigit\n}\n\nOrganizationNumber._supportsSpacingProps = true\nexport default OrganizationNumber\n"],"mappings":"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"}
+{"version":3,"file":"OrganizationNumber.js","names":["React","useCallback","useMemo","StringField","useTranslation","OrganizationNumber","props","translations","errorOrgNo","errorOrgNoLength","errorRequired","label","errorMessages","_objectSpread","organizationNumberValidator","value","undefined","orgNoIs9Digits","length","Error","isValidOrgNumber","validate","omitMask","validator","onChangeValidator","onBlurValidator","labelProp","width","mask","onBlurValidatorToUse","StringFieldProps","className","inputMode","exportValidators","createElement","digits","checkDigit","sum","i","parseInt","charAt","result","finalCheckDigit","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/OrganizationNumber/OrganizationNumber.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react'\nimport StringField, { Props as StringFieldProps } from '../String'\nimport useTranslation from '../../hooks/useTranslation'\nimport { Validator } from '../../types'\n\nexport type Props = Omit<StringFieldProps, 'onBlurValidator'> & {\n  validate?: boolean\n  omitMask?: boolean\n  onBlurValidator?: Validator<string> | false\n}\n\nfunction OrganizationNumber(props: Props) {\n  const translations = useTranslation().OrganizationNumber\n  const { errorOrgNo, errorOrgNoLength, errorRequired, label } =\n    translations\n\n  const errorMessages = useMemo(\n    () => ({\n      'Field.errorRequired': errorRequired,\n      'Field.errorPattern': errorOrgNo,\n      ...props.errorMessages,\n    }),\n    [errorRequired, errorOrgNo, props.errorMessages]\n  )\n\n  const organizationNumberValidator = useCallback(\n    (value: string) => {\n      if (value !== undefined) {\n        const orgNoIs9Digits = value?.length === 9\n\n        if (!orgNoIs9Digits) {\n          return Error(errorOrgNoLength)\n        }\n        if (orgNoIs9Digits && !isValidOrgNumber(value)) {\n          return Error(errorOrgNo)\n        }\n      }\n    },\n    [errorOrgNo, errorOrgNoLength]\n  )\n\n  const {\n    validate = true,\n    omitMask,\n    // Deprecated – can be removed in v11\n    validator,\n    onChangeValidator = validator,\n    onBlurValidator = organizationNumberValidator,\n    label: labelProp,\n    width,\n  } = props\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 onBlurValidatorToUse =\n    onBlurValidator === false ? undefined : onBlurValidator\n\n  const StringFieldProps: StringFieldProps = {\n    ...props,\n    className: 'dnb-forms-field-organization-number',\n    label: labelProp ?? label,\n    errorMessages,\n    mask,\n    width: width ?? 'medium',\n    inputMode: 'numeric',\n    onChangeValidator: validate ? onChangeValidator : undefined,\n    onBlurValidator: validate ? onBlurValidatorToUse : undefined,\n    exportValidators: { organizationNumberValidator },\n  }\n\n  return <StringField {...StringFieldProps} />\n}\n\n/**\n * Source:\n * www.brreg.no/om-oss/registrene-vare/om-enhetsregisteret/organisasjonsnummeret/\n */\nfunction isValidOrgNumber(digits: string) {\n  let checkDigit = 2\n  let sum = 0\n\n  for (let i = digits.length - 2; i >= 0; --i) {\n    sum += parseInt(digits.charAt(i)) * checkDigit\n\n    checkDigit += 1\n\n    if (checkDigit > 7) {\n      checkDigit = 2\n    }\n  }\n\n  const result = 11 - (sum % 11)\n  const finalCheckDigit = result === 11 ? 0 : result\n\n  return parseInt(digits.charAt(digits.length - 1), 10) === finalCheckDigit\n}\n\nOrganizationNumber._supportsSpacingProps = true\nexport default OrganizationNumber\n"],"mappings":"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"}

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

@@ -287,7 +287,8 @@ function PhoneNumber(props) {
     disabled: disabled,
     width: omitCountryCodeField ? 'medium' : (_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : 'stretch',
     help: _objectSpread(_objectSpread({}, help), {}, {
-      breakout: false
+      breakout: false,
+      outset: false
     }),
     required: required,
     errorMessages: errorMessages,

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

@@ -1 +1 @@
-{"version":3,"file":"PhoneNumber.js","names":["React","useMemo","useContext","useCallback","useEffect","useRef","Autocomplete","Flex","classnames","countries","StringField","FieldBlock","useFieldProps","pickSpacingProps","SharedContext","countryFilter","getCountryData","useTranslation","defaultCountryCode","defaultPlaceholder","defaultMask","PhoneNumber","props","_sharedContext$locale","_props$inputRef","_countryCodeRef$curre","_props$width","sharedContext","label","defaultLabel","countryCodeLabel","defaultCountryCodeLabel","errorRequired","lang","locale","split","countryCodeRef","emptyValue","numberRef","dataRef","langRef","wasFilled","errorMessages","_objectSpread","validateRequired","value","_ref","required","isChanged","error","countryCode","phoneNumber","splitValue","prevCountryCodeRef","current","undefined","fromExternal","external","omitCountryCodeField","toEvent","schema","_props$schema","type","pattern","defaultProps","ref","preparedProps","inputRef","id","className","countryCodeFieldClassName","numberFieldClassName","countryCodePlaceholder","placeholder","numberMask","ccFilter","info","warning","hasError","disabled","width","help","validateInitially","continuousValidation","validateUnchanged","setHasFocus","handleChange","setDisplayValue","onCountryCodeChange","onNumberChange","filterCountries","_inputRef$current","number","path","length","joinValue","filter","country","updateCurrentDataSet","formatCountryCode","cdc","sort","makeObject","getEventValues","arguments","callOnChange","_ref2","eventValues","callOnBlurOrFocus","hasFocus","handleCountryCodeChange","_ref3","_data$selectedKey","data","selectedKey","trim","handleNumberChange","handleOnBlur","handleOnFocus","handleCountryCodeFocus","_ref4","updateData","onTypeHandler","_ref5","_event$nativeEvent","revalidateInputValue","event","nativeEvent","cdcVal","test","find","_ref6","window","requestAnimationFrame","isDefault","includes","fieldBlockProps","createElement","Horizontal","align","mode","label_direction","status","on_focus","on_blur","on_change","on_type","independent_width","search_numbers","keep_selection","autoComplete","no_animation","noAnimation","stretch","layout","mask","Array","fill","onFocus","onBlur","onChange","innerRef","breakout","inputMode","_country$i18n$lang","selected_value","iso","content","i18n","en","match","slice","array","Boolean","join","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx"],"sourcesContent":["import React, {\n  useMemo,\n  useContext,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react'\nimport { Autocomplete, Flex } from '../../../../components'\nimport { InputMaskedProps } from '../../../../components/InputMasked'\nimport classnames from 'classnames'\nimport countries, {\n  type CountryLang,\n  type CountryType,\n} from '../../constants/countries'\nimport StringField, { Props as StringFieldProps } from '../String'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport {\n  FieldPropsWithExtraValue,\n  AllJSONSchemaVersions,\n} from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport SharedContext from '../../../../shared/Context'\nimport {\n  countryFilter,\n  CountryFilterSet,\n  getCountryData,\n} from '../SelectCountry'\nimport useTranslation from '../../hooks/useTranslation'\nimport { DrawerListDataObject } from '../../../../fragments/DrawerList'\n\nexport type Props = Omit<\n  FieldPropsWithExtraValue<\n    string,\n    { country: string; phone: string },\n    undefined | string\n  >,\n  'layout' | 'layoutOptions'\n> & {\n  countryCodeFieldClassName?: string\n  numberFieldClassName?: string\n  countryCodePlaceholder?: string\n  countryCodeLabel?: string\n  numberMask?: InputMaskedProps['mask']\n  pattern?: StringFieldProps['pattern']\n  width?: 'large' | 'stretch'\n  inputRef?: React.RefObject<HTMLInputElement>\n  omitCountryCodeField?: boolean\n  onCountryCodeChange?: (value: string | undefined) => void\n  onNumberChange?: (value: string | undefined) => void\n\n  /**\n   * Defines the countries to filter. Can be `Scandinavia`, `Nordic`, `Europe` or `Prioritized`.\n   * Defaults to `Prioritized`.\n   */\n  countries?: CountryFilterSet\n\n  /**\n   * Use this prop to filter out certain countries. The function receives the country object and should return a boolean. Returning `false` will omit the country.\n   */\n  filterCountries?: (country: CountryType) => boolean\n\n  /**\n   * For internal testing purposes\n   */\n  noAnimation?: boolean\n}\n\n// Important for the default value to be defined here, and not after the useFieldProps call, to avoid the UI jumping\n// back to +47 once the user empty the field so handleChange send out undefined.\nconst defaultCountryCode = '+47'\nconst defaultPlaceholder = '00 00 00 00'\nconst defaultMask = [\n  /\\d/,\n  /\\d/,\n  ' ',\n  /\\d/,\n  /\\d/,\n  ' ',\n  /\\d/,\n  /\\d/,\n  ' ',\n  /\\d/,\n  /\\d/,\n]\n\nfunction PhoneNumber(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const {\n    label: defaultLabel,\n    countryCodeLabel: defaultCountryCodeLabel,\n    errorRequired,\n  } = useTranslation().PhoneNumber\n  const lang = sharedContext.locale?.split('-')[0] as CountryLang\n\n  const countryCodeRef = useRef<Props['value']>(props?.emptyValue)\n  const numberRef = useRef<Props['value']>(props?.emptyValue)\n  const dataRef = useRef<Array<DrawerListDataObject>>(null)\n  const langRef = useRef<string>(lang)\n  const wasFilled = useRef<boolean>(false)\n\n  const errorMessages = useMemo(\n    () => ({\n      'Field.errorRequired': errorRequired,\n      'Field.errorPattern': errorRequired,\n      ...props.errorMessages,\n    }),\n    [errorRequired, props.errorMessages]\n  )\n\n  const validateRequired = useCallback(\n    (value: string, { required, isChanged, error }) => {\n      if (required) {\n        const [countryCode, phoneNumber] = splitValue(value)\n\n        if (countryCode !== prevCountryCodeRef.current) {\n          if (countryCode) {\n            prevCountryCodeRef.current = countryCode\n          }\n          return undefined\n        }\n\n        if (isChanged && !phoneNumber) {\n          return error\n        }\n      }\n\n      return undefined\n    },\n    []\n  )\n\n  const fromExternal = useCallback(\n    (external: string) => {\n      const [, phoneNumber] = splitValue(external)\n      if (!phoneNumber && !props.omitCountryCodeField) {\n        return countryCodeRef.current\n      }\n      return external\n    },\n    [props.omitCountryCodeField]\n  )\n\n  const toEvent = useCallback(\n    (value: string) => {\n      const [, phoneNumber] = splitValue(value)\n      if (!phoneNumber) {\n        return props.emptyValue\n      }\n      return value\n    },\n    [props.emptyValue]\n  )\n\n  const schema = useMemo<AllJSONSchemaVersions>(\n    () =>\n      props.schema ?? {\n        type: 'string',\n        pattern: props.pattern,\n      },\n    [props.schema, props.pattern]\n  )\n  const defaultProps: Partial<Props> = {\n    schema,\n    errorMessages,\n  }\n  const ref = useRef<HTMLInputElement>()\n  const preparedProps: Props = {\n    ...props,\n    ...defaultProps,\n    validateRequired,\n    fromExternal,\n    toEvent,\n    inputRef: props.inputRef ?? ref,\n  }\n\n  const {\n    id,\n    value,\n    className,\n    inputRef,\n    countryCodeFieldClassName,\n    numberFieldClassName,\n    countryCodePlaceholder,\n    placeholder,\n    countryCodeLabel,\n    label = defaultLabel,\n    numberMask,\n    countries: ccFilter = 'Prioritized',\n    emptyValue,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    width = 'large',\n    help,\n    required,\n    validateInitially,\n    continuousValidation,\n    validateUnchanged,\n    omitCountryCodeField,\n    setHasFocus,\n    handleChange,\n    setDisplayValue,\n    onCountryCodeChange,\n    onNumberChange,\n    filterCountries,\n  } = useFieldProps(preparedProps)\n\n  useEffect(() => {\n    const number = inputRef.current?.value\n    setDisplayValue(\n      props.path,\n      number?.length > 0\n        ? joinValue([countryCodeRef.current, number])\n        : undefined\n    )\n  }, [inputRef, props.path, setDisplayValue, value])\n\n  const filter = useCallback(\n    (country: CountryType) => {\n      return countryFilter(country, filterCountries, ccFilter)\n    },\n    [ccFilter, filterCountries]\n  )\n\n  const updateCurrentDataSet = useCallback(() => {\n    dataRef.current = getCountryData({\n      lang,\n      filter:\n        // Make sure the whole cc list is displayed when cc filter is set to specific region\n        ccFilter === 'Prioritized' && !wasFilled.current\n          ? (country) =>\n              `${formatCountryCode(country.cdc)}` ===\n              countryCodeRef.current\n          : filter,\n      sort: ccFilter as Extract<CountryFilterSet, 'Prioritized'>,\n      makeObject,\n    })\n  }, [lang, filter, ccFilter])\n\n  const getEventValues = useCallback(\n    ({\n      countryCode = countryCodeRef.current || emptyValue,\n      phoneNumber = numberRef.current || emptyValue,\n    } = {}) => {\n      return {\n        ...(!omitCountryCodeField ? { countryCode } : {}),\n        phoneNumber,\n      }\n    },\n    [omitCountryCodeField, emptyValue]\n  )\n\n  const callOnChange = useCallback(\n    ({ countryCode = undefined, phoneNumber = undefined }) => {\n      const eventValues = getEventValues({ countryCode, phoneNumber })\n      handleChange(\n        joinValue([eventValues.countryCode, eventValues.phoneNumber]),\n        eventValues\n      )\n    },\n    [getEventValues, handleChange]\n  )\n\n  const callOnBlurOrFocus = useCallback(\n    (hasFocus: boolean) => {\n      setHasFocus(hasFocus, undefined, getEventValues())\n    },\n    [setHasFocus, getEventValues]\n  )\n\n  /**\n   * We do not process the whole country list at the first render.\n   * Only when the Autocomplete opens (focus).\n   * To achieve this, we use memo instead of effect to update refs in sync.\n   *\n   * We set or update the data list depending on if the countrycode changes or lang changes.\n   * We then update countryCode and phoneNumber when value changes.\n   */\n  useMemo(() => {\n    const [countryCode, phoneNumber] = splitValue(props.value || value)\n    numberRef.current = phoneNumber\n\n    if (lang !== langRef.current || !wasFilled.current) {\n      if (!countryCodeRef.current || countryCode) {\n        countryCodeRef.current = countryCode || defaultCountryCode\n      }\n      langRef.current = lang\n\n      updateCurrentDataSet()\n    }\n  }, [value, props.value, lang, updateCurrentDataSet])\n\n  const prevCountryCodeRef = useRef(countryCodeRef.current)\n\n  const handleCountryCodeChange = useCallback(\n    ({ data }: { data: { selectedKey: string } }) => {\n      const countryCode = (countryCodeRef.current =\n        data?.selectedKey?.trim() || emptyValue)\n\n      callOnChange({ countryCode })\n      onCountryCodeChange?.(countryCode)\n    },\n    [emptyValue, callOnChange, onCountryCodeChange]\n  )\n\n  const handleNumberChange = useCallback(\n    (value: string) => {\n      const phoneNumber = (numberRef.current = value || emptyValue)\n\n      callOnChange({ phoneNumber })\n      onNumberChange?.(phoneNumber)\n    },\n    [emptyValue, callOnChange, onNumberChange]\n  )\n\n  const handleOnBlur = useCallback(() => {\n    callOnBlurOrFocus(false)\n  }, [callOnBlurOrFocus])\n\n  const handleOnFocus = useCallback(() => {\n    callOnBlurOrFocus(true)\n  }, [callOnBlurOrFocus])\n\n  const handleCountryCodeFocus = useCallback(\n    ({ updateData }) => {\n      if (!wasFilled.current) {\n        wasFilled.current = true\n        updateCurrentDataSet()\n        updateData(dataRef.current)\n      }\n      handleOnFocus()\n    },\n    [handleOnFocus, updateCurrentDataSet]\n  )\n\n  const onTypeHandler = useCallback(\n    ({ value, updateData, revalidateInputValue, event }) => {\n      // Handle browser autofill/autocomplete\n      if (typeof event?.nativeEvent?.data === 'undefined') {\n        const cdcVal = /\\+\\d{1,3}\\s{1}\\d+/.test(value)\n          ? splitValue(value)[0]\n          : value\n        const country = countries.find(({ cdc }) => cdc === cdcVal)\n        if (country?.cdc) {\n          const countryCode = (countryCodeRef.current = formatCountryCode(\n            country.cdc\n          ))\n\n          updateCurrentDataSet()\n          updateData(dataRef.current)\n          callOnChange({ countryCode })\n\n          // To ensure correct input value,\n          // regardless if there is changed data before or not.\n          window.requestAnimationFrame(() => {\n            revalidateInputValue()\n          })\n        }\n      }\n    },\n    [callOnChange, updateCurrentDataSet]\n  )\n\n  const isDefault = countryCodeRef.current?.includes(defaultCountryCode)\n\n  const fieldBlockProps: FieldBlockProps = {\n    id,\n    className: classnames('dnb-forms-field-phone-number', className),\n    width: omitCountryCodeField || props.width ? undefined : width,\n    label: undefined,\n    help: undefined,\n    ...pickSpacingProps(props),\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps}>\n      <Flex.Horizontal align=\"flex-end\">\n        {!omitCountryCodeField && (\n          <Autocomplete\n            className={classnames(\n              'dnb-forms-field-phone-number__country-code',\n              countryCodeFieldClassName\n            )}\n            mode=\"async\"\n            placeholder={countryCodePlaceholder}\n            label_direction=\"vertical\"\n            label={countryCodeLabel ?? defaultCountryCodeLabel}\n            data={dataRef.current}\n            value={countryCodeRef.current}\n            status={hasError ? 'error' : undefined}\n            disabled={disabled}\n            on_focus={handleCountryCodeFocus}\n            on_blur={handleOnBlur}\n            on_change={handleCountryCodeChange}\n            on_type={onTypeHandler}\n            independent_width\n            search_numbers\n            keep_selection\n            autoComplete=\"tel-country-code\"\n            no_animation={props.noAnimation}\n            stretch={width === 'stretch'}\n          />\n        )}\n\n        <StringField\n          className={classnames(\n            'dnb-forms-field-phone-number__number',\n            numberFieldClassName\n          )}\n          type=\"tel\"\n          autoComplete=\"tel-national\"\n          emptyValue={emptyValue}\n          layout=\"vertical\"\n          label={label}\n          placeholder={\n            placeholder ?? (isDefault ? defaultPlaceholder : undefined)\n          }\n          mask={\n            numberMask ?? (isDefault ? defaultMask : Array(12).fill(/\\d/))\n          }\n          onFocus={handleOnFocus}\n          onBlur={handleOnBlur}\n          onChange={handleNumberChange}\n          value={numberRef.current}\n          innerRef={inputRef}\n          info={info}\n          warning={warning}\n          error={error}\n          disabled={disabled}\n          width={\n            omitCountryCodeField ? 'medium' : props.width ?? 'stretch'\n          }\n          help={{ ...help, breakout: false }}\n          required={required}\n          errorMessages={errorMessages}\n          validateInitially={validateInitially}\n          continuousValidation={continuousValidation}\n          validateUnchanged={validateUnchanged}\n          inputMode=\"tel\"\n        />\n      </Flex.Horizontal>\n    </FieldBlock>\n  )\n}\n\nfunction makeObject(country: CountryType, lang: string) {\n  return {\n    selectedKey: formatCountryCode(country.cdc),\n    selected_value: `${country.iso} (${formatCountryCode(country.cdc)})`,\n    content: `${formatCountryCode(country.cdc)} ${\n      country.i18n[lang] ?? country.i18n.en\n    }`,\n  }\n}\n\nfunction formatCountryCode(value: string) {\n  return `+${value}`\n}\n\nfunction splitValue(value: string) {\n  return (\n    typeof value === 'string'\n      ? value.match(/^(\\+[^ ]+)? ?(.*)$/)\n      : [undefined, '', '']\n  ).slice(1)\n}\n\nfunction joinValue(array: Array<string>) {\n  return array.filter(Boolean).join(' ')\n}\n\nPhoneNumber._supportsSpacingProps = true\nexport default PhoneNumber\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IACVC,OAAO,EACPC,UAAU,EACVC,WAAW,EACXC,SAAS,EACTC,MAAM,QACD,OAAO;AACd,SAASC,YAAY,EAAEC,IAAI,QAAQ,wBAAwB;AAE3D,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,SAAS,MAGT,2BAA2B;AAClC,OAAOC,WAAW,MAAqC,WAAW;AAClE,OAAOC,UAAU,MAAoC,kBAAkB;AACvE,SAASC,aAAa,QAAQ,aAAa;AAK3C,SAASC,gBAAgB,QAAQ,mCAAmC;AACpE,OAAOC,aAAa,MAAM,4BAA4B;AACtD,SACEC,aAAa,EAEbC,cAAc,QACT,kBAAkB;AACzB,OAAOC,cAAc,MAAM,4BAA4B;AA0CvD,MAAMC,kBAAkB,GAAG,KAAK;AAChC,MAAMC,kBAAkB,GAAG,aAAa;AACxC,MAAMC,WAAW,GAAG,CAClB,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,IAAI,CACL;AAED,SAASC,WAAWA,CAACC,KAAY,EAAE;EAAA,IAAAC,qBAAA,EAAAC,eAAA,EAAAC,qBAAA,EAAAC,YAAA;EACjC,MAAMC,aAAa,GAAGzB,UAAU,CAACY,aAAa,CAAC;EAC/C,MAAM;IACJc,KAAK,EAAEC,YAAY;IACnBC,gBAAgB,EAAEC,uBAAuB;IACzCC;EACF,CAAC,GAAGf,cAAc,CAAC,CAAC,CAACI,WAAW;EAChC,MAAMY,IAAI,IAAAV,qBAAA,GAAGI,aAAa,CAACO,MAAM,cAAAX,qBAAA,uBAApBA,qBAAA,CAAsBY,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAgB;EAE/D,MAAMC,cAAc,GAAG/B,MAAM,CAAiBiB,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEe,UAAU,CAAC;EAChE,MAAMC,SAAS,GAAGjC,MAAM,CAAiBiB,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEe,UAAU,CAAC;EAC3D,MAAME,OAAO,GAAGlC,MAAM,CAA8B,IAAI,CAAC;EACzD,MAAMmC,OAAO,GAAGnC,MAAM,CAAS4B,IAAI,CAAC;EACpC,MAAMQ,SAAS,GAAGpC,MAAM,CAAU,KAAK,CAAC;EAExC,MAAMqC,aAAa,GAAGzC,OAAO,CAC3B,MAAA0C,aAAA;IACE,qBAAqB,EAAEX,aAAa;IACpC,oBAAoB,EAAEA;EAAa,GAChCV,KAAK,CAACoB,aAAa,CACtB,EACF,CAACV,aAAa,EAAEV,KAAK,CAACoB,aAAa,CACrC,CAAC;EAED,MAAME,gBAAgB,GAAGzC,WAAW,CAClC,CAAC0C,KAAa,EAAAC,IAAA,KAAqC;IAAA,IAAnC;MAAEC,QAAQ;MAAEC,SAAS;MAAEC;IAAM,CAAC,GAAAH,IAAA;IAC5C,IAAIC,QAAQ,EAAE;MACZ,MAAM,CAACG,WAAW,EAAEC,WAAW,CAAC,GAAGC,UAAU,CAACP,KAAK,CAAC;MAEpD,IAAIK,WAAW,KAAKG,kBAAkB,CAACC,OAAO,EAAE;QAC9C,IAAIJ,WAAW,EAAE;UACfG,kBAAkB,CAACC,OAAO,GAAGJ,WAAW;QAC1C;QACA,OAAOK,SAAS;MAClB;MAEA,IAAIP,SAAS,IAAI,CAACG,WAAW,EAAE;QAC7B,OAAOF,KAAK;MACd;IACF;IAEA,OAAOM,SAAS;EAClB,CAAC,EACD,EACF,CAAC;EAED,MAAMC,YAAY,GAAGrD,WAAW,CAC7BsD,QAAgB,IAAK;IACpB,MAAM,GAAGN,WAAW,CAAC,GAAGC,UAAU,CAACK,QAAQ,CAAC;IAC5C,IAAI,CAACN,WAAW,IAAI,CAAC7B,KAAK,CAACoC,oBAAoB,EAAE;MAC/C,OAAOtB,cAAc,CAACkB,OAAO;IAC/B;IACA,OAAOG,QAAQ;EACjB,CAAC,EACD,CAACnC,KAAK,CAACoC,oBAAoB,CAC7B,CAAC;EAED,MAAMC,OAAO,GAAGxD,WAAW,CACxB0C,KAAa,IAAK;IACjB,MAAM,GAAGM,WAAW,CAAC,GAAGC,UAAU,CAACP,KAAK,CAAC;IACzC,IAAI,CAACM,WAAW,EAAE;MAChB,OAAO7B,KAAK,CAACe,UAAU;IACzB;IACA,OAAOQ,KAAK;EACd,CAAC,EACD,CAACvB,KAAK,CAACe,UAAU,CACnB,CAAC;EAED,MAAMuB,MAAM,GAAG3D,OAAO,CACpB;IAAA,IAAA4D,aAAA;IAAA,QAAAA,aAAA,GACEvC,KAAK,CAACsC,MAAM,cAAAC,aAAA,cAAAA,aAAA,GAAI;MACdC,IAAI,EAAE,QAAQ;MACdC,OAAO,EAAEzC,KAAK,CAACyC;IACjB,CAAC;EAAA,GACH,CAACzC,KAAK,CAACsC,MAAM,EAAEtC,KAAK,CAACyC,OAAO,CAC9B,CAAC;EACD,MAAMC,YAA4B,GAAG;IACnCJ,MAAM;IACNlB;EACF,CAAC;EACD,MAAMuB,GAAG,GAAG5D,MAAM,CAAmB,CAAC;EACtC,MAAM6D,aAAoB,GAAAvB,aAAA,CAAAA,aAAA,CAAAA,aAAA,KACrBrB,KAAK,GACL0C,YAAY;IACfpB,gBAAgB;IAChBY,YAAY;IACZG,OAAO;IACPQ,QAAQ,GAAA3C,eAAA,GAAEF,KAAK,CAAC6C,QAAQ,cAAA3C,eAAA,cAAAA,eAAA,GAAIyC;EAAG,EAChC;EAED,MAAM;IACJG,EAAE;IACFvB,KAAK;IACLwB,SAAS;IACTF,QAAQ;IACRG,yBAAyB;IACzBC,oBAAoB;IACpBC,sBAAsB;IACtBC,WAAW;IACX3C,gBAAgB;IAChBF,KAAK,GAAGC,YAAY;IACpB6C,UAAU;IACVjE,SAAS,EAAEkE,QAAQ,GAAG,aAAa;IACnCtC,UAAU;IACVuC,IAAI;IACJC,OAAO;IACP5B,KAAK;IACL6B,QAAQ;IACRC,QAAQ;IACRC,KAAK,GAAG,OAAO;IACfC,IAAI;IACJlC,QAAQ;IACRmC,iBAAiB;IACjBC,oBAAoB;IACpBC,iBAAiB;IACjB1B,oBAAoB;IACpB2B,WAAW;IACXC,YAAY;IACZC,eAAe;IACfC,mBAAmB;IACnBC,cAAc;IACdC;EACF,CAAC,GAAG9E,aAAa,CAACsD,aAAa,CAAC;EAEhC9D,SAAS,CAAC,MAAM;IAAA,IAAAuF,iBAAA;IACd,MAAMC,MAAM,IAAAD,iBAAA,GAAGxB,QAAQ,CAACb,OAAO,cAAAqC,iBAAA,uBAAhBA,iBAAA,CAAkB9C,KAAK;IACtC0C,eAAe,CACbjE,KAAK,CAACuE,IAAI,EACV,CAAAD,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEE,MAAM,IAAG,CAAC,GACdC,SAAS,CAAC,CAAC3D,cAAc,CAACkB,OAAO,EAAEsC,MAAM,CAAC,CAAC,GAC3CrC,SACN,CAAC;EACH,CAAC,EAAE,CAACY,QAAQ,EAAE7C,KAAK,CAACuE,IAAI,EAAEN,eAAe,EAAE1C,KAAK,CAAC,CAAC;EAElD,MAAMmD,MAAM,GAAG7F,WAAW,CACvB8F,OAAoB,IAAK;IACxB,OAAOlF,aAAa,CAACkF,OAAO,EAAEP,eAAe,EAAEf,QAAQ,CAAC;EAC1D,CAAC,EACD,CAACA,QAAQ,EAAEe,eAAe,CAC5B,CAAC;EAED,MAAMQ,oBAAoB,GAAG/F,WAAW,CAAC,MAAM;IAC7CoC,OAAO,CAACe,OAAO,GAAGtC,cAAc,CAAC;MAC/BiB,IAAI;MACJ+D,MAAM,EAEJrB,QAAQ,KAAK,aAAa,IAAI,CAAClC,SAAS,CAACa,OAAO,GAC3C2C,OAAO,IACL,GAAEE,iBAAiB,CAACF,OAAO,CAACG,GAAG,CAAE,EAAC,KACnChE,cAAc,CAACkB,OAAO,GACxB0C,MAAM;MACZK,IAAI,EAAE1B,QAAoD;MAC1D2B;IACF,CAAC,CAAC;EACJ,CAAC,EAAE,CAACrE,IAAI,EAAE+D,MAAM,EAAErB,QAAQ,CAAC,CAAC;EAE5B,MAAM4B,cAAc,GAAGpG,WAAW,CAChC,YAGW;IAAA,IAHV;MACC+C,WAAW,GAAGd,cAAc,CAACkB,OAAO,IAAIjB,UAAU;MAClDc,WAAW,GAAGb,SAAS,CAACgB,OAAO,IAAIjB;IACrC,CAAC,GAAAmE,SAAA,CAAAV,MAAA,QAAAU,SAAA,QAAAjD,SAAA,GAAAiD,SAAA,MAAG,CAAC,CAAC;IACJ,OAAA7D,aAAA,CAAAA,aAAA,KACM,CAACe,oBAAoB,GAAG;MAAER;IAAY,CAAC,GAAG,CAAC,CAAC;MAChDC;IAAW;EAEf,CAAC,EACD,CAACO,oBAAoB,EAAErB,UAAU,CACnC,CAAC;EAED,MAAMoE,YAAY,GAAGtG,WAAW,CAC9BuG,KAAA,IAA0D;IAAA,IAAzD;MAAExD,WAAW,GAAGK,SAAS;MAAEJ,WAAW,GAAGI;IAAU,CAAC,GAAAmD,KAAA;IACnD,MAAMC,WAAW,GAAGJ,cAAc,CAAC;MAAErD,WAAW;MAAEC;IAAY,CAAC,CAAC;IAChEmC,YAAY,CACVS,SAAS,CAAC,CAACY,WAAW,CAACzD,WAAW,EAAEyD,WAAW,CAACxD,WAAW,CAAC,CAAC,EAC7DwD,WACF,CAAC;EACH,CAAC,EACD,CAACJ,cAAc,EAAEjB,YAAY,CAC/B,CAAC;EAED,MAAMsB,iBAAiB,GAAGzG,WAAW,CAClC0G,QAAiB,IAAK;IACrBxB,WAAW,CAACwB,QAAQ,EAAEtD,SAAS,EAAEgD,cAAc,CAAC,CAAC,CAAC;EACpD,CAAC,EACD,CAAClB,WAAW,EAAEkB,cAAc,CAC9B,CAAC;EAUDtG,OAAO,CAAC,MAAM;IACZ,MAAM,CAACiD,WAAW,EAAEC,WAAW,CAAC,GAAGC,UAAU,CAAC9B,KAAK,CAACuB,KAAK,IAAIA,KAAK,CAAC;IACnEP,SAAS,CAACgB,OAAO,GAAGH,WAAW;IAE/B,IAAIlB,IAAI,KAAKO,OAAO,CAACc,OAAO,IAAI,CAACb,SAAS,CAACa,OAAO,EAAE;MAClD,IAAI,CAAClB,cAAc,CAACkB,OAAO,IAAIJ,WAAW,EAAE;QAC1Cd,cAAc,CAACkB,OAAO,GAAGJ,WAAW,IAAIhC,kBAAkB;MAC5D;MACAsB,OAAO,CAACc,OAAO,GAAGrB,IAAI;MAEtBiE,oBAAoB,CAAC,CAAC;IACxB;EACF,CAAC,EAAE,CAACrD,KAAK,EAAEvB,KAAK,CAACuB,KAAK,EAAEZ,IAAI,EAAEiE,oBAAoB,CAAC,CAAC;EAEpD,MAAM7C,kBAAkB,GAAGhD,MAAM,CAAC+B,cAAc,CAACkB,OAAO,CAAC;EAEzD,MAAMwD,uBAAuB,GAAG3G,WAAW,CACzC4G,KAAA,IAAiD;IAAA,IAAAC,iBAAA;IAAA,IAAhD;MAAEC;IAAwC,CAAC,GAAAF,KAAA;IAC1C,MAAM7D,WAAW,GAAId,cAAc,CAACkB,OAAO,GACzC,CAAA2D,IAAI,aAAJA,IAAI,wBAAAD,iBAAA,GAAJC,IAAI,CAAEC,WAAW,cAAAF,iBAAA,uBAAjBA,iBAAA,CAAmBG,IAAI,CAAC,CAAC,KAAI9E,UAAW;IAE1CoE,YAAY,CAAC;MAAEvD;IAAY,CAAC,CAAC;IAC7BsC,mBAAmB,aAAnBA,mBAAmB,uBAAnBA,mBAAmB,CAAGtC,WAAW,CAAC;EACpC,CAAC,EACD,CAACb,UAAU,EAAEoE,YAAY,EAAEjB,mBAAmB,CAChD,CAAC;EAED,MAAM4B,kBAAkB,GAAGjH,WAAW,CACnC0C,KAAa,IAAK;IACjB,MAAMM,WAAW,GAAIb,SAAS,CAACgB,OAAO,GAAGT,KAAK,IAAIR,UAAW;IAE7DoE,YAAY,CAAC;MAAEtD;IAAY,CAAC,CAAC;IAC7BsC,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAGtC,WAAW,CAAC;EAC/B,CAAC,EACD,CAACd,UAAU,EAAEoE,YAAY,EAAEhB,cAAc,CAC3C,CAAC;EAED,MAAM4B,YAAY,GAAGlH,WAAW,CAAC,MAAM;IACrCyG,iBAAiB,CAAC,KAAK,CAAC;EAC1B,CAAC,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAEvB,MAAMU,aAAa,GAAGnH,WAAW,CAAC,MAAM;IACtCyG,iBAAiB,CAAC,IAAI,CAAC;EACzB,CAAC,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAEvB,MAAMW,sBAAsB,GAAGpH,WAAW,CACxCqH,KAAA,IAAoB;IAAA,IAAnB;MAAEC;IAAW,CAAC,GAAAD,KAAA;IACb,IAAI,CAAC/E,SAAS,CAACa,OAAO,EAAE;MACtBb,SAAS,CAACa,OAAO,GAAG,IAAI;MACxB4C,oBAAoB,CAAC,CAAC;MACtBuB,UAAU,CAAClF,OAAO,CAACe,OAAO,CAAC;IAC7B;IACAgE,aAAa,CAAC,CAAC;EACjB,CAAC,EACD,CAACA,aAAa,EAAEpB,oBAAoB,CACtC,CAAC;EAED,MAAMwB,aAAa,GAAGvH,WAAW,CAC/BwH,KAAA,IAAwD;IAAA,IAAAC,kBAAA;IAAA,IAAvD;MAAE/E,KAAK;MAAE4E,UAAU;MAAEI,oBAAoB;MAAEC;IAAM,CAAC,GAAAH,KAAA;IAEjD,IAAI,QAAOG,KAAK,aAALA,KAAK,wBAAAF,kBAAA,GAALE,KAAK,CAAEC,WAAW,cAAAH,kBAAA,uBAAlBA,kBAAA,CAAoBX,IAAI,MAAK,WAAW,EAAE;MACnD,MAAMe,MAAM,GAAG,mBAAmB,CAACC,IAAI,CAACpF,KAAK,CAAC,GAC1CO,UAAU,CAACP,KAAK,CAAC,CAAC,CAAC,CAAC,GACpBA,KAAK;MACT,MAAMoD,OAAO,GAAGxF,SAAS,CAACyH,IAAI,CAACC,KAAA;QAAA,IAAC;UAAE/B;QAAI,CAAC,GAAA+B,KAAA;QAAA,OAAK/B,GAAG,KAAK4B,MAAM;MAAA,EAAC;MAC3D,IAAI/B,OAAO,aAAPA,OAAO,eAAPA,OAAO,CAAEG,GAAG,EAAE;QAChB,MAAMlD,WAAW,GAAId,cAAc,CAACkB,OAAO,GAAG6C,iBAAiB,CAC7DF,OAAO,CAACG,GACV,CAAE;QAEFF,oBAAoB,CAAC,CAAC;QACtBuB,UAAU,CAAClF,OAAO,CAACe,OAAO,CAAC;QAC3BmD,YAAY,CAAC;UAAEvD;QAAY,CAAC,CAAC;QAI7BkF,MAAM,CAACC,qBAAqB,CAAC,MAAM;UACjCR,oBAAoB,CAAC,CAAC;QACxB,CAAC,CAAC;MACJ;IACF;EACF,CAAC,EACD,CAACpB,YAAY,EAAEP,oBAAoB,CACrC,CAAC;EAED,MAAMoC,SAAS,IAAA7G,qBAAA,GAAGW,cAAc,CAACkB,OAAO,cAAA7B,qBAAA,uBAAtBA,qBAAA,CAAwB8G,QAAQ,CAACrH,kBAAkB,CAAC;EAEtE,MAAMsH,eAAgC,GAAA7F,aAAA;IACpCyB,EAAE;IACFC,SAAS,EAAE7D,UAAU,CAAC,8BAA8B,EAAE6D,SAAS,CAAC;IAChEW,KAAK,EAAEtB,oBAAoB,IAAIpC,KAAK,CAAC0D,KAAK,GAAGzB,SAAS,GAAGyB,KAAK;IAC9DpD,KAAK,EAAE2B,SAAS;IAChB0B,IAAI,EAAE1B;EAAS,GACZ1C,gBAAgB,CAACS,KAAK,CAAC,CAC3B;EAED,OACEtB,KAAA,CAAAyI,aAAA,CAAC9H,UAAU,EAAK6H,eAAe,EAC7BxI,KAAA,CAAAyI,aAAA,CAAClI,IAAI,CAACmI,UAAU;IAACC,KAAK,EAAC;EAAU,GAC9B,CAACjF,oBAAoB,IACpB1D,KAAA,CAAAyI,aAAA,CAACnI,YAAY;IACX+D,SAAS,EAAE7D,UAAU,CACnB,4CAA4C,EAC5C8D,yBACF,CAAE;IACFsE,IAAI,EAAC,OAAO;IACZnE,WAAW,EAAED,sBAAuB;IACpCqE,eAAe,EAAC,UAAU;IAC1BjH,KAAK,EAAEE,gBAAgB,aAAhBA,gBAAgB,cAAhBA,gBAAgB,GAAIC,uBAAwB;IACnDkF,IAAI,EAAE1E,OAAO,CAACe,OAAQ;IACtBT,KAAK,EAAET,cAAc,CAACkB,OAAQ;IAC9BwF,MAAM,EAAEhE,QAAQ,GAAG,OAAO,GAAGvB,SAAU;IACvCwB,QAAQ,EAAEA,QAAS;IACnBgE,QAAQ,EAAExB,sBAAuB;IACjCyB,OAAO,EAAE3B,YAAa;IACtB4B,SAAS,EAAEnC,uBAAwB;IACnCoC,OAAO,EAAExB,aAAc;IACvByB,iBAAiB;IACjBC,cAAc;IACdC,cAAc;IACdC,YAAY,EAAC,kBAAkB;IAC/BC,YAAY,EAAEjI,KAAK,CAACkI,WAAY;IAChCC,OAAO,EAAEzE,KAAK,KAAK;EAAU,CAC9B,CACF,EAEDhF,KAAA,CAAAyI,aAAA,CAAC/H,WAAW;IACV2D,SAAS,EAAE7D,UAAU,CACnB,sCAAsC,EACtC+D,oBACF,CAAE;IACFT,IAAI,EAAC,KAAK;IACVwF,YAAY,EAAC,cAAc;IAC3BjH,UAAU,EAAEA,UAAW;IACvBqH,MAAM,EAAC,UAAU;IACjB9H,KAAK,EAAEA,KAAM;IACb6C,WAAW,EACTA,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAK6D,SAAS,GAAGnH,kBAAkB,GAAGoC,SAClD;IACDoG,IAAI,EACFjF,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAK4D,SAAS,GAAGlH,WAAW,GAAGwI,KAAK,CAAC,EAAE,CAAC,CAACC,IAAI,CAAC,IAAI,CAC7D;IACDC,OAAO,EAAExC,aAAc;IACvByC,MAAM,EAAE1C,YAAa;IACrB2C,QAAQ,EAAE5C,kBAAmB;IAC7BvE,KAAK,EAAEP,SAAS,CAACgB,OAAQ;IACzB2G,QAAQ,EAAE9F,QAAS;IACnBS,IAAI,EAAEA,IAAK;IACXC,OAAO,EAAEA,OAAQ;IACjB5B,KAAK,EAAEA,KAAM;IACb8B,QAAQ,EAAEA,QAAS;IACnBC,KAAK,EACHtB,oBAAoB,GAAG,QAAQ,IAAAhC,YAAA,GAAGJ,KAAK,CAAC0D,KAAK,cAAAtD,YAAA,cAAAA,YAAA,GAAI,SAClD;IACDuD,IAAI,EAAAtC,aAAA,CAAAA,aAAA,KAAOsC,IAAI;MAAEiF,QAAQ,EAAE;IAAK,EAAG;IACnCnH,QAAQ,EAAEA,QAAS;IACnBL,aAAa,EAAEA,aAAc;IAC7BwC,iBAAiB,EAAEA,iBAAkB;IACrCC,oBAAoB,EAAEA,oBAAqB;IAC3CC,iBAAiB,EAAEA,iBAAkB;IACrC+E,SAAS,EAAC;EAAK,CAChB,CACc,CACP,CAAC;AAEjB;AAEA,SAAS7D,UAAUA,CAACL,OAAoB,EAAEhE,IAAY,EAAE;EAAA,IAAAmI,kBAAA;EACtD,OAAO;IACLlD,WAAW,EAAEf,iBAAiB,CAACF,OAAO,CAACG,GAAG,CAAC;IAC3CiE,cAAc,EAAG,GAAEpE,OAAO,CAACqE,GAAI,KAAInE,iBAAiB,CAACF,OAAO,CAACG,GAAG,CAAE,GAAE;IACpEmE,OAAO,EAAG,GAAEpE,iBAAiB,CAACF,OAAO,CAACG,GAAG,CAAE,IAAC,CAAAgE,kBAAA,GAC1CnE,OAAO,CAACuE,IAAI,CAACvI,IAAI,CAAC,cAAAmI,kBAAA,cAAAA,kBAAA,GAAInE,OAAO,CAACuE,IAAI,CAACC,EACpC;EACH,CAAC;AACH;AAEA,SAAStE,iBAAiBA,CAACtD,KAAa,EAAE;EACxC,OAAQ,IAAGA,KAAM,EAAC;AACpB;AAEA,SAASO,UAAUA,CAACP,KAAa,EAAE;EACjC,OAAO,CACL,OAAOA,KAAK,KAAK,QAAQ,GACrBA,KAAK,CAAC6H,KAAK,CAAC,oBAAoB,CAAC,GACjC,CAACnH,SAAS,EAAE,EAAE,EAAE,EAAE,CAAC,EACvBoH,KAAK,CAAC,CAAC,CAAC;AACZ;AAEA,SAAS5E,SAASA,CAAC6E,KAAoB,EAAE;EACvC,OAAOA,KAAK,CAAC5E,MAAM,CAAC6E,OAAO,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC;AACxC;AAEAzJ,WAAW,CAAC0J,qBAAqB,GAAG,IAAI;AACxC,eAAe1J,WAAW"}
+{"version":3,"file":"PhoneNumber.js","names":["React","useMemo","useContext","useCallback","useEffect","useRef","Autocomplete","Flex","classnames","countries","StringField","FieldBlock","useFieldProps","pickSpacingProps","SharedContext","countryFilter","getCountryData","useTranslation","defaultCountryCode","defaultPlaceholder","defaultMask","PhoneNumber","props","_sharedContext$locale","_props$inputRef","_countryCodeRef$curre","_props$width","sharedContext","label","defaultLabel","countryCodeLabel","defaultCountryCodeLabel","errorRequired","lang","locale","split","countryCodeRef","emptyValue","numberRef","dataRef","langRef","wasFilled","errorMessages","_objectSpread","validateRequired","value","_ref","required","isChanged","error","countryCode","phoneNumber","splitValue","prevCountryCodeRef","current","undefined","fromExternal","external","omitCountryCodeField","toEvent","schema","_props$schema","type","pattern","defaultProps","ref","preparedProps","inputRef","id","className","countryCodeFieldClassName","numberFieldClassName","countryCodePlaceholder","placeholder","numberMask","ccFilter","info","warning","hasError","disabled","width","help","validateInitially","continuousValidation","validateUnchanged","setHasFocus","handleChange","setDisplayValue","onCountryCodeChange","onNumberChange","filterCountries","_inputRef$current","number","path","length","joinValue","filter","country","updateCurrentDataSet","formatCountryCode","cdc","sort","makeObject","getEventValues","arguments","callOnChange","_ref2","eventValues","callOnBlurOrFocus","hasFocus","handleCountryCodeChange","_ref3","_data$selectedKey","data","selectedKey","trim","handleNumberChange","handleOnBlur","handleOnFocus","handleCountryCodeFocus","_ref4","updateData","onTypeHandler","_ref5","_event$nativeEvent","revalidateInputValue","event","nativeEvent","cdcVal","test","find","_ref6","window","requestAnimationFrame","isDefault","includes","fieldBlockProps","createElement","Horizontal","align","mode","label_direction","status","on_focus","on_blur","on_change","on_type","independent_width","search_numbers","keep_selection","autoComplete","no_animation","noAnimation","stretch","layout","mask","Array","fill","onFocus","onBlur","onChange","innerRef","breakout","outset","inputMode","_country$i18n$lang","selected_value","iso","content","i18n","en","match","slice","array","Boolean","join","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx"],"sourcesContent":["import React, {\n  useMemo,\n  useContext,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react'\nimport { Autocomplete, Flex } from '../../../../components'\nimport { InputMaskedProps } from '../../../../components/InputMasked'\nimport classnames from 'classnames'\nimport countries, {\n  type CountryLang,\n  type CountryType,\n} from '../../constants/countries'\nimport StringField, { Props as StringFieldProps } from '../String'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport {\n  FieldPropsWithExtraValue,\n  AllJSONSchemaVersions,\n} from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport SharedContext from '../../../../shared/Context'\nimport {\n  countryFilter,\n  CountryFilterSet,\n  getCountryData,\n} from '../SelectCountry'\nimport useTranslation from '../../hooks/useTranslation'\nimport { DrawerListDataArrayItem } from '../../../../fragments/DrawerList'\n\nexport type Props = Omit<\n  FieldPropsWithExtraValue<\n    string,\n    { country: string; phone: string },\n    undefined | string\n  >,\n  'layout' | 'layoutOptions'\n> & {\n  countryCodeFieldClassName?: string\n  numberFieldClassName?: string\n  countryCodePlaceholder?: string\n  countryCodeLabel?: string\n  numberMask?: InputMaskedProps['mask']\n  pattern?: StringFieldProps['pattern']\n  width?: 'large' | 'stretch'\n  inputRef?: React.RefObject<HTMLInputElement>\n  omitCountryCodeField?: boolean\n  onCountryCodeChange?: (value: string | undefined) => void\n  onNumberChange?: (value: string | undefined) => void\n\n  /**\n   * Defines the countries to filter. Can be `Scandinavia`, `Nordic`, `Europe` or `Prioritized`.\n   * Defaults to `Prioritized`.\n   */\n  countries?: CountryFilterSet\n\n  /**\n   * Use this prop to filter out certain countries. The function receives the country object and should return a boolean. Returning `false` will omit the country.\n   */\n  filterCountries?: (country: CountryType) => boolean\n\n  /**\n   * For internal testing purposes\n   */\n  noAnimation?: boolean\n}\n\n// Important for the default value to be defined here, and not after the useFieldProps call, to avoid the UI jumping\n// back to +47 once the user empty the field so handleChange send out undefined.\nconst defaultCountryCode = '+47'\nconst defaultPlaceholder = '00 00 00 00'\nconst defaultMask = [\n  /\\d/,\n  /\\d/,\n  ' ',\n  /\\d/,\n  /\\d/,\n  ' ',\n  /\\d/,\n  /\\d/,\n  ' ',\n  /\\d/,\n  /\\d/,\n]\n\nfunction PhoneNumber(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const {\n    label: defaultLabel,\n    countryCodeLabel: defaultCountryCodeLabel,\n    errorRequired,\n  } = useTranslation().PhoneNumber\n  const lang = sharedContext.locale?.split('-')[0] as CountryLang\n\n  const countryCodeRef = useRef<Props['value']>(props?.emptyValue)\n  const numberRef = useRef<Props['value']>(props?.emptyValue)\n  const dataRef = useRef<Array<DrawerListDataArrayItem>>(null)\n  const langRef = useRef<string>(lang)\n  const wasFilled = useRef<boolean>(false)\n\n  const errorMessages = useMemo(\n    () => ({\n      'Field.errorRequired': errorRequired,\n      'Field.errorPattern': errorRequired,\n      ...props.errorMessages,\n    }),\n    [errorRequired, props.errorMessages]\n  )\n\n  const validateRequired = useCallback(\n    (value: string, { required, isChanged, error }) => {\n      if (required) {\n        const [countryCode, phoneNumber] = splitValue(value)\n\n        if (countryCode !== prevCountryCodeRef.current) {\n          if (countryCode) {\n            prevCountryCodeRef.current = countryCode\n          }\n          return undefined\n        }\n\n        if (isChanged && !phoneNumber) {\n          return error\n        }\n      }\n\n      return undefined\n    },\n    []\n  )\n\n  const fromExternal = useCallback(\n    (external: string) => {\n      const [, phoneNumber] = splitValue(external)\n      if (!phoneNumber && !props.omitCountryCodeField) {\n        return countryCodeRef.current\n      }\n      return external\n    },\n    [props.omitCountryCodeField]\n  )\n\n  const toEvent = useCallback(\n    (value: string) => {\n      const [, phoneNumber] = splitValue(value)\n      if (!phoneNumber) {\n        return props.emptyValue\n      }\n      return value\n    },\n    [props.emptyValue]\n  )\n\n  const schema = useMemo<AllJSONSchemaVersions>(\n    () =>\n      props.schema ?? {\n        type: 'string',\n        pattern: props.pattern,\n      },\n    [props.schema, props.pattern]\n  )\n  const defaultProps: Partial<Props> = {\n    schema,\n    errorMessages,\n  }\n  const ref = useRef<HTMLInputElement>()\n  const preparedProps: Props = {\n    ...props,\n    ...defaultProps,\n    validateRequired,\n    fromExternal,\n    toEvent,\n    inputRef: props.inputRef ?? ref,\n  }\n\n  const {\n    id,\n    value,\n    className,\n    inputRef,\n    countryCodeFieldClassName,\n    numberFieldClassName,\n    countryCodePlaceholder,\n    placeholder,\n    countryCodeLabel,\n    label = defaultLabel,\n    numberMask,\n    countries: ccFilter = 'Prioritized',\n    emptyValue,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    width = 'large',\n    help,\n    required,\n    validateInitially,\n    continuousValidation,\n    validateUnchanged,\n    omitCountryCodeField,\n    setHasFocus,\n    handleChange,\n    setDisplayValue,\n    onCountryCodeChange,\n    onNumberChange,\n    filterCountries,\n  } = useFieldProps(preparedProps)\n\n  useEffect(() => {\n    const number = inputRef.current?.value\n    setDisplayValue(\n      props.path,\n      number?.length > 0\n        ? joinValue([countryCodeRef.current, number])\n        : undefined\n    )\n  }, [inputRef, props.path, setDisplayValue, value])\n\n  const filter = useCallback(\n    (country: CountryType) => {\n      return countryFilter(country, filterCountries, ccFilter)\n    },\n    [ccFilter, filterCountries]\n  )\n\n  const updateCurrentDataSet = useCallback(() => {\n    dataRef.current = getCountryData({\n      lang,\n      filter:\n        // Make sure the whole cc list is displayed when cc filter is set to specific region\n        ccFilter === 'Prioritized' && !wasFilled.current\n          ? (country) =>\n              `${formatCountryCode(country.cdc)}` ===\n              countryCodeRef.current\n          : filter,\n      sort: ccFilter as Extract<CountryFilterSet, 'Prioritized'>,\n      makeObject,\n    })\n  }, [lang, filter, ccFilter])\n\n  const getEventValues = useCallback(\n    ({\n      countryCode = countryCodeRef.current || emptyValue,\n      phoneNumber = numberRef.current || emptyValue,\n    } = {}) => {\n      return {\n        ...(!omitCountryCodeField ? { countryCode } : {}),\n        phoneNumber,\n      }\n    },\n    [omitCountryCodeField, emptyValue]\n  )\n\n  const callOnChange = useCallback(\n    ({ countryCode = undefined, phoneNumber = undefined }) => {\n      const eventValues = getEventValues({ countryCode, phoneNumber })\n      handleChange(\n        joinValue([eventValues.countryCode, eventValues.phoneNumber]),\n        eventValues\n      )\n    },\n    [getEventValues, handleChange]\n  )\n\n  const callOnBlurOrFocus = useCallback(\n    (hasFocus: boolean) => {\n      setHasFocus(hasFocus, undefined, getEventValues())\n    },\n    [setHasFocus, getEventValues]\n  )\n\n  /**\n   * We do not process the whole country list at the first render.\n   * Only when the Autocomplete opens (focus).\n   * To achieve this, we use memo instead of effect to update refs in sync.\n   *\n   * We set or update the data list depending on if the countrycode changes or lang changes.\n   * We then update countryCode and phoneNumber when value changes.\n   */\n  useMemo(() => {\n    const [countryCode, phoneNumber] = splitValue(props.value || value)\n    numberRef.current = phoneNumber\n\n    if (lang !== langRef.current || !wasFilled.current) {\n      if (!countryCodeRef.current || countryCode) {\n        countryCodeRef.current = countryCode || defaultCountryCode\n      }\n      langRef.current = lang\n\n      updateCurrentDataSet()\n    }\n  }, [value, props.value, lang, updateCurrentDataSet])\n\n  const prevCountryCodeRef = useRef(countryCodeRef.current)\n\n  const handleCountryCodeChange = useCallback(\n    ({ data }: { data: { selectedKey: string } }) => {\n      const countryCode = (countryCodeRef.current =\n        data?.selectedKey?.trim() || emptyValue)\n\n      callOnChange({ countryCode })\n      onCountryCodeChange?.(countryCode)\n    },\n    [emptyValue, callOnChange, onCountryCodeChange]\n  )\n\n  const handleNumberChange = useCallback(\n    (value: string) => {\n      const phoneNumber = (numberRef.current = value || emptyValue)\n\n      callOnChange({ phoneNumber })\n      onNumberChange?.(phoneNumber)\n    },\n    [emptyValue, callOnChange, onNumberChange]\n  )\n\n  const handleOnBlur = useCallback(() => {\n    callOnBlurOrFocus(false)\n  }, [callOnBlurOrFocus])\n\n  const handleOnFocus = useCallback(() => {\n    callOnBlurOrFocus(true)\n  }, [callOnBlurOrFocus])\n\n  const handleCountryCodeFocus = useCallback(\n    ({ updateData }) => {\n      if (!wasFilled.current) {\n        wasFilled.current = true\n        updateCurrentDataSet()\n        updateData(dataRef.current)\n      }\n      handleOnFocus()\n    },\n    [handleOnFocus, updateCurrentDataSet]\n  )\n\n  const onTypeHandler = useCallback(\n    ({ value, updateData, revalidateInputValue, event }) => {\n      // Handle browser autofill/autocomplete\n      if (typeof event?.nativeEvent?.data === 'undefined') {\n        const cdcVal = /\\+\\d{1,3}\\s{1}\\d+/.test(value)\n          ? splitValue(value)[0]\n          : value\n        const country = countries.find(({ cdc }) => cdc === cdcVal)\n        if (country?.cdc) {\n          const countryCode = (countryCodeRef.current = formatCountryCode(\n            country.cdc\n          ))\n\n          updateCurrentDataSet()\n          updateData(dataRef.current)\n          callOnChange({ countryCode })\n\n          // To ensure correct input value,\n          // regardless if there is changed data before or not.\n          window.requestAnimationFrame(() => {\n            revalidateInputValue()\n          })\n        }\n      }\n    },\n    [callOnChange, updateCurrentDataSet]\n  )\n\n  const isDefault = countryCodeRef.current?.includes(defaultCountryCode)\n\n  const fieldBlockProps: FieldBlockProps = {\n    id,\n    className: classnames('dnb-forms-field-phone-number', className),\n    width: omitCountryCodeField || props.width ? undefined : width,\n    label: undefined,\n    help: undefined,\n    ...pickSpacingProps(props),\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps}>\n      <Flex.Horizontal align=\"flex-end\">\n        {!omitCountryCodeField && (\n          <Autocomplete\n            className={classnames(\n              'dnb-forms-field-phone-number__country-code',\n              countryCodeFieldClassName\n            )}\n            mode=\"async\"\n            placeholder={countryCodePlaceholder}\n            label_direction=\"vertical\"\n            label={countryCodeLabel ?? defaultCountryCodeLabel}\n            data={dataRef.current}\n            value={countryCodeRef.current}\n            status={hasError ? 'error' : undefined}\n            disabled={disabled}\n            on_focus={handleCountryCodeFocus}\n            on_blur={handleOnBlur}\n            on_change={handleCountryCodeChange}\n            on_type={onTypeHandler}\n            independent_width\n            search_numbers\n            keep_selection\n            autoComplete=\"tel-country-code\"\n            no_animation={props.noAnimation}\n            stretch={width === 'stretch'}\n          />\n        )}\n\n        <StringField\n          className={classnames(\n            'dnb-forms-field-phone-number__number',\n            numberFieldClassName\n          )}\n          type=\"tel\"\n          autoComplete=\"tel-national\"\n          emptyValue={emptyValue}\n          layout=\"vertical\"\n          label={label}\n          placeholder={\n            placeholder ?? (isDefault ? defaultPlaceholder : undefined)\n          }\n          mask={\n            numberMask ?? (isDefault ? defaultMask : Array(12).fill(/\\d/))\n          }\n          onFocus={handleOnFocus}\n          onBlur={handleOnBlur}\n          onChange={handleNumberChange}\n          value={numberRef.current}\n          innerRef={inputRef}\n          info={info}\n          warning={warning}\n          error={error}\n          disabled={disabled}\n          width={\n            omitCountryCodeField ? 'medium' : props.width ?? 'stretch'\n          }\n          help={{ ...help, breakout: false, outset: false }}\n          required={required}\n          errorMessages={errorMessages}\n          validateInitially={validateInitially}\n          continuousValidation={continuousValidation}\n          validateUnchanged={validateUnchanged}\n          inputMode=\"tel\"\n        />\n      </Flex.Horizontal>\n    </FieldBlock>\n  )\n}\n\nfunction makeObject(country: CountryType, lang: string) {\n  return {\n    selectedKey: formatCountryCode(country.cdc),\n    selected_value: `${country.iso} (${formatCountryCode(country.cdc)})`,\n    content: `${formatCountryCode(country.cdc)} ${\n      country.i18n[lang] ?? country.i18n.en\n    }`,\n  }\n}\n\nfunction formatCountryCode(value: string) {\n  return `+${value}`\n}\n\nfunction splitValue(value: string) {\n  return (\n    typeof value === 'string'\n      ? value.match(/^(\\+[^ ]+)? ?(.*)$/)\n      : [undefined, '', '']\n  ).slice(1)\n}\n\nfunction joinValue(array: Array<string>) {\n  return array.filter(Boolean).join(' ')\n}\n\nPhoneNumber._supportsSpacingProps = true\nexport default PhoneNumber\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IACVC,OAAO,EACPC,UAAU,EACVC,WAAW,EACXC,SAAS,EACTC,MAAM,QACD,OAAO;AACd,SAASC,YAAY,EAAEC,IAAI,QAAQ,wBAAwB;AAE3D,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,SAAS,MAGT,2BAA2B;AAClC,OAAOC,WAAW,MAAqC,WAAW;AAClE,OAAOC,UAAU,MAAoC,kBAAkB;AACvE,SAASC,aAAa,QAAQ,aAAa;AAK3C,SAASC,gBAAgB,QAAQ,mCAAmC;AACpE,OAAOC,aAAa,MAAM,4BAA4B;AACtD,SACEC,aAAa,EAEbC,cAAc,QACT,kBAAkB;AACzB,OAAOC,cAAc,MAAM,4BAA4B;AA0CvD,MAAMC,kBAAkB,GAAG,KAAK;AAChC,MAAMC,kBAAkB,GAAG,aAAa;AACxC,MAAMC,WAAW,GAAG,CAClB,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,IAAI,CACL;AAED,SAASC,WAAWA,CAACC,KAAY,EAAE;EAAA,IAAAC,qBAAA,EAAAC,eAAA,EAAAC,qBAAA,EAAAC,YAAA;EACjC,MAAMC,aAAa,GAAGzB,UAAU,CAACY,aAAa,CAAC;EAC/C,MAAM;IACJc,KAAK,EAAEC,YAAY;IACnBC,gBAAgB,EAAEC,uBAAuB;IACzCC;EACF,CAAC,GAAGf,cAAc,CAAC,CAAC,CAACI,WAAW;EAChC,MAAMY,IAAI,IAAAV,qBAAA,GAAGI,aAAa,CAACO,MAAM,cAAAX,qBAAA,uBAApBA,qBAAA,CAAsBY,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAgB;EAE/D,MAAMC,cAAc,GAAG/B,MAAM,CAAiBiB,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEe,UAAU,CAAC;EAChE,MAAMC,SAAS,GAAGjC,MAAM,CAAiBiB,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEe,UAAU,CAAC;EAC3D,MAAME,OAAO,GAAGlC,MAAM,CAAiC,IAAI,CAAC;EAC5D,MAAMmC,OAAO,GAAGnC,MAAM,CAAS4B,IAAI,CAAC;EACpC,MAAMQ,SAAS,GAAGpC,MAAM,CAAU,KAAK,CAAC;EAExC,MAAMqC,aAAa,GAAGzC,OAAO,CAC3B,MAAA0C,aAAA;IACE,qBAAqB,EAAEX,aAAa;IACpC,oBAAoB,EAAEA;EAAa,GAChCV,KAAK,CAACoB,aAAa,CACtB,EACF,CAACV,aAAa,EAAEV,KAAK,CAACoB,aAAa,CACrC,CAAC;EAED,MAAME,gBAAgB,GAAGzC,WAAW,CAClC,CAAC0C,KAAa,EAAAC,IAAA,KAAqC;IAAA,IAAnC;MAAEC,QAAQ;MAAEC,SAAS;MAAEC;IAAM,CAAC,GAAAH,IAAA;IAC5C,IAAIC,QAAQ,EAAE;MACZ,MAAM,CAACG,WAAW,EAAEC,WAAW,CAAC,GAAGC,UAAU,CAACP,KAAK,CAAC;MAEpD,IAAIK,WAAW,KAAKG,kBAAkB,CAACC,OAAO,EAAE;QAC9C,IAAIJ,WAAW,EAAE;UACfG,kBAAkB,CAACC,OAAO,GAAGJ,WAAW;QAC1C;QACA,OAAOK,SAAS;MAClB;MAEA,IAAIP,SAAS,IAAI,CAACG,WAAW,EAAE;QAC7B,OAAOF,KAAK;MACd;IACF;IAEA,OAAOM,SAAS;EAClB,CAAC,EACD,EACF,CAAC;EAED,MAAMC,YAAY,GAAGrD,WAAW,CAC7BsD,QAAgB,IAAK;IACpB,MAAM,GAAGN,WAAW,CAAC,GAAGC,UAAU,CAACK,QAAQ,CAAC;IAC5C,IAAI,CAACN,WAAW,IAAI,CAAC7B,KAAK,CAACoC,oBAAoB,EAAE;MAC/C,OAAOtB,cAAc,CAACkB,OAAO;IAC/B;IACA,OAAOG,QAAQ;EACjB,CAAC,EACD,CAACnC,KAAK,CAACoC,oBAAoB,CAC7B,CAAC;EAED,MAAMC,OAAO,GAAGxD,WAAW,CACxB0C,KAAa,IAAK;IACjB,MAAM,GAAGM,WAAW,CAAC,GAAGC,UAAU,CAACP,KAAK,CAAC;IACzC,IAAI,CAACM,WAAW,EAAE;MAChB,OAAO7B,KAAK,CAACe,UAAU;IACzB;IACA,OAAOQ,KAAK;EACd,CAAC,EACD,CAACvB,KAAK,CAACe,UAAU,CACnB,CAAC;EAED,MAAMuB,MAAM,GAAG3D,OAAO,CACpB;IAAA,IAAA4D,aAAA;IAAA,QAAAA,aAAA,GACEvC,KAAK,CAACsC,MAAM,cAAAC,aAAA,cAAAA,aAAA,GAAI;MACdC,IAAI,EAAE,QAAQ;MACdC,OAAO,EAAEzC,KAAK,CAACyC;IACjB,CAAC;EAAA,GACH,CAACzC,KAAK,CAACsC,MAAM,EAAEtC,KAAK,CAACyC,OAAO,CAC9B,CAAC;EACD,MAAMC,YAA4B,GAAG;IACnCJ,MAAM;IACNlB;EACF,CAAC;EACD,MAAMuB,GAAG,GAAG5D,MAAM,CAAmB,CAAC;EACtC,MAAM6D,aAAoB,GAAAvB,aAAA,CAAAA,aAAA,CAAAA,aAAA,KACrBrB,KAAK,GACL0C,YAAY;IACfpB,gBAAgB;IAChBY,YAAY;IACZG,OAAO;IACPQ,QAAQ,GAAA3C,eAAA,GAAEF,KAAK,CAAC6C,QAAQ,cAAA3C,eAAA,cAAAA,eAAA,GAAIyC;EAAG,EAChC;EAED,MAAM;IACJG,EAAE;IACFvB,KAAK;IACLwB,SAAS;IACTF,QAAQ;IACRG,yBAAyB;IACzBC,oBAAoB;IACpBC,sBAAsB;IACtBC,WAAW;IACX3C,gBAAgB;IAChBF,KAAK,GAAGC,YAAY;IACpB6C,UAAU;IACVjE,SAAS,EAAEkE,QAAQ,GAAG,aAAa;IACnCtC,UAAU;IACVuC,IAAI;IACJC,OAAO;IACP5B,KAAK;IACL6B,QAAQ;IACRC,QAAQ;IACRC,KAAK,GAAG,OAAO;IACfC,IAAI;IACJlC,QAAQ;IACRmC,iBAAiB;IACjBC,oBAAoB;IACpBC,iBAAiB;IACjB1B,oBAAoB;IACpB2B,WAAW;IACXC,YAAY;IACZC,eAAe;IACfC,mBAAmB;IACnBC,cAAc;IACdC;EACF,CAAC,GAAG9E,aAAa,CAACsD,aAAa,CAAC;EAEhC9D,SAAS,CAAC,MAAM;IAAA,IAAAuF,iBAAA;IACd,MAAMC,MAAM,IAAAD,iBAAA,GAAGxB,QAAQ,CAACb,OAAO,cAAAqC,iBAAA,uBAAhBA,iBAAA,CAAkB9C,KAAK;IACtC0C,eAAe,CACbjE,KAAK,CAACuE,IAAI,EACV,CAAAD,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEE,MAAM,IAAG,CAAC,GACdC,SAAS,CAAC,CAAC3D,cAAc,CAACkB,OAAO,EAAEsC,MAAM,CAAC,CAAC,GAC3CrC,SACN,CAAC;EACH,CAAC,EAAE,CAACY,QAAQ,EAAE7C,KAAK,CAACuE,IAAI,EAAEN,eAAe,EAAE1C,KAAK,CAAC,CAAC;EAElD,MAAMmD,MAAM,GAAG7F,WAAW,CACvB8F,OAAoB,IAAK;IACxB,OAAOlF,aAAa,CAACkF,OAAO,EAAEP,eAAe,EAAEf,QAAQ,CAAC;EAC1D,CAAC,EACD,CAACA,QAAQ,EAAEe,eAAe,CAC5B,CAAC;EAED,MAAMQ,oBAAoB,GAAG/F,WAAW,CAAC,MAAM;IAC7CoC,OAAO,CAACe,OAAO,GAAGtC,cAAc,CAAC;MAC/BiB,IAAI;MACJ+D,MAAM,EAEJrB,QAAQ,KAAK,aAAa,IAAI,CAAClC,SAAS,CAACa,OAAO,GAC3C2C,OAAO,IACL,GAAEE,iBAAiB,CAACF,OAAO,CAACG,GAAG,CAAE,EAAC,KACnChE,cAAc,CAACkB,OAAO,GACxB0C,MAAM;MACZK,IAAI,EAAE1B,QAAoD;MAC1D2B;IACF,CAAC,CAAC;EACJ,CAAC,EAAE,CAACrE,IAAI,EAAE+D,MAAM,EAAErB,QAAQ,CAAC,CAAC;EAE5B,MAAM4B,cAAc,GAAGpG,WAAW,CAChC,YAGW;IAAA,IAHV;MACC+C,WAAW,GAAGd,cAAc,CAACkB,OAAO,IAAIjB,UAAU;MAClDc,WAAW,GAAGb,SAAS,CAACgB,OAAO,IAAIjB;IACrC,CAAC,GAAAmE,SAAA,CAAAV,MAAA,QAAAU,SAAA,QAAAjD,SAAA,GAAAiD,SAAA,MAAG,CAAC,CAAC;IACJ,OAAA7D,aAAA,CAAAA,aAAA,KACM,CAACe,oBAAoB,GAAG;MAAER;IAAY,CAAC,GAAG,CAAC,CAAC;MAChDC;IAAW;EAEf,CAAC,EACD,CAACO,oBAAoB,EAAErB,UAAU,CACnC,CAAC;EAED,MAAMoE,YAAY,GAAGtG,WAAW,CAC9BuG,KAAA,IAA0D;IAAA,IAAzD;MAAExD,WAAW,GAAGK,SAAS;MAAEJ,WAAW,GAAGI;IAAU,CAAC,GAAAmD,KAAA;IACnD,MAAMC,WAAW,GAAGJ,cAAc,CAAC;MAAErD,WAAW;MAAEC;IAAY,CAAC,CAAC;IAChEmC,YAAY,CACVS,SAAS,CAAC,CAACY,WAAW,CAACzD,WAAW,EAAEyD,WAAW,CAACxD,WAAW,CAAC,CAAC,EAC7DwD,WACF,CAAC;EACH,CAAC,EACD,CAACJ,cAAc,EAAEjB,YAAY,CAC/B,CAAC;EAED,MAAMsB,iBAAiB,GAAGzG,WAAW,CAClC0G,QAAiB,IAAK;IACrBxB,WAAW,CAACwB,QAAQ,EAAEtD,SAAS,EAAEgD,cAAc,CAAC,CAAC,CAAC;EACpD,CAAC,EACD,CAAClB,WAAW,EAAEkB,cAAc,CAC9B,CAAC;EAUDtG,OAAO,CAAC,MAAM;IACZ,MAAM,CAACiD,WAAW,EAAEC,WAAW,CAAC,GAAGC,UAAU,CAAC9B,KAAK,CAACuB,KAAK,IAAIA,KAAK,CAAC;IACnEP,SAAS,CAACgB,OAAO,GAAGH,WAAW;IAE/B,IAAIlB,IAAI,KAAKO,OAAO,CAACc,OAAO,IAAI,CAACb,SAAS,CAACa,OAAO,EAAE;MAClD,IAAI,CAAClB,cAAc,CAACkB,OAAO,IAAIJ,WAAW,EAAE;QAC1Cd,cAAc,CAACkB,OAAO,GAAGJ,WAAW,IAAIhC,kBAAkB;MAC5D;MACAsB,OAAO,CAACc,OAAO,GAAGrB,IAAI;MAEtBiE,oBAAoB,CAAC,CAAC;IACxB;EACF,CAAC,EAAE,CAACrD,KAAK,EAAEvB,KAAK,CAACuB,KAAK,EAAEZ,IAAI,EAAEiE,oBAAoB,CAAC,CAAC;EAEpD,MAAM7C,kBAAkB,GAAGhD,MAAM,CAAC+B,cAAc,CAACkB,OAAO,CAAC;EAEzD,MAAMwD,uBAAuB,GAAG3G,WAAW,CACzC4G,KAAA,IAAiD;IAAA,IAAAC,iBAAA;IAAA,IAAhD;MAAEC;IAAwC,CAAC,GAAAF,KAAA;IAC1C,MAAM7D,WAAW,GAAId,cAAc,CAACkB,OAAO,GACzC,CAAA2D,IAAI,aAAJA,IAAI,wBAAAD,iBAAA,GAAJC,IAAI,CAAEC,WAAW,cAAAF,iBAAA,uBAAjBA,iBAAA,CAAmBG,IAAI,CAAC,CAAC,KAAI9E,UAAW;IAE1CoE,YAAY,CAAC;MAAEvD;IAAY,CAAC,CAAC;IAC7BsC,mBAAmB,aAAnBA,mBAAmB,uBAAnBA,mBAAmB,CAAGtC,WAAW,CAAC;EACpC,CAAC,EACD,CAACb,UAAU,EAAEoE,YAAY,EAAEjB,mBAAmB,CAChD,CAAC;EAED,MAAM4B,kBAAkB,GAAGjH,WAAW,CACnC0C,KAAa,IAAK;IACjB,MAAMM,WAAW,GAAIb,SAAS,CAACgB,OAAO,GAAGT,KAAK,IAAIR,UAAW;IAE7DoE,YAAY,CAAC;MAAEtD;IAAY,CAAC,CAAC;IAC7BsC,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAGtC,WAAW,CAAC;EAC/B,CAAC,EACD,CAACd,UAAU,EAAEoE,YAAY,EAAEhB,cAAc,CAC3C,CAAC;EAED,MAAM4B,YAAY,GAAGlH,WAAW,CAAC,MAAM;IACrCyG,iBAAiB,CAAC,KAAK,CAAC;EAC1B,CAAC,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAEvB,MAAMU,aAAa,GAAGnH,WAAW,CAAC,MAAM;IACtCyG,iBAAiB,CAAC,IAAI,CAAC;EACzB,CAAC,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAEvB,MAAMW,sBAAsB,GAAGpH,WAAW,CACxCqH,KAAA,IAAoB;IAAA,IAAnB;MAAEC;IAAW,CAAC,GAAAD,KAAA;IACb,IAAI,CAAC/E,SAAS,CAACa,OAAO,EAAE;MACtBb,SAAS,CAACa,OAAO,GAAG,IAAI;MACxB4C,oBAAoB,CAAC,CAAC;MACtBuB,UAAU,CAAClF,OAAO,CAACe,OAAO,CAAC;IAC7B;IACAgE,aAAa,CAAC,CAAC;EACjB,CAAC,EACD,CAACA,aAAa,EAAEpB,oBAAoB,CACtC,CAAC;EAED,MAAMwB,aAAa,GAAGvH,WAAW,CAC/BwH,KAAA,IAAwD;IAAA,IAAAC,kBAAA;IAAA,IAAvD;MAAE/E,KAAK;MAAE4E,UAAU;MAAEI,oBAAoB;MAAEC;IAAM,CAAC,GAAAH,KAAA;IAEjD,IAAI,QAAOG,KAAK,aAALA,KAAK,wBAAAF,kBAAA,GAALE,KAAK,CAAEC,WAAW,cAAAH,kBAAA,uBAAlBA,kBAAA,CAAoBX,IAAI,MAAK,WAAW,EAAE;MACnD,MAAMe,MAAM,GAAG,mBAAmB,CAACC,IAAI,CAACpF,KAAK,CAAC,GAC1CO,UAAU,CAACP,KAAK,CAAC,CAAC,CAAC,CAAC,GACpBA,KAAK;MACT,MAAMoD,OAAO,GAAGxF,SAAS,CAACyH,IAAI,CAACC,KAAA;QAAA,IAAC;UAAE/B;QAAI,CAAC,GAAA+B,KAAA;QAAA,OAAK/B,GAAG,KAAK4B,MAAM;MAAA,EAAC;MAC3D,IAAI/B,OAAO,aAAPA,OAAO,eAAPA,OAAO,CAAEG,GAAG,EAAE;QAChB,MAAMlD,WAAW,GAAId,cAAc,CAACkB,OAAO,GAAG6C,iBAAiB,CAC7DF,OAAO,CAACG,GACV,CAAE;QAEFF,oBAAoB,CAAC,CAAC;QACtBuB,UAAU,CAAClF,OAAO,CAACe,OAAO,CAAC;QAC3BmD,YAAY,CAAC;UAAEvD;QAAY,CAAC,CAAC;QAI7BkF,MAAM,CAACC,qBAAqB,CAAC,MAAM;UACjCR,oBAAoB,CAAC,CAAC;QACxB,CAAC,CAAC;MACJ;IACF;EACF,CAAC,EACD,CAACpB,YAAY,EAAEP,oBAAoB,CACrC,CAAC;EAED,MAAMoC,SAAS,IAAA7G,qBAAA,GAAGW,cAAc,CAACkB,OAAO,cAAA7B,qBAAA,uBAAtBA,qBAAA,CAAwB8G,QAAQ,CAACrH,kBAAkB,CAAC;EAEtE,MAAMsH,eAAgC,GAAA7F,aAAA;IACpCyB,EAAE;IACFC,SAAS,EAAE7D,UAAU,CAAC,8BAA8B,EAAE6D,SAAS,CAAC;IAChEW,KAAK,EAAEtB,oBAAoB,IAAIpC,KAAK,CAAC0D,KAAK,GAAGzB,SAAS,GAAGyB,KAAK;IAC9DpD,KAAK,EAAE2B,SAAS;IAChB0B,IAAI,EAAE1B;EAAS,GACZ1C,gBAAgB,CAACS,KAAK,CAAC,CAC3B;EAED,OACEtB,KAAA,CAAAyI,aAAA,CAAC9H,UAAU,EAAK6H,eAAe,EAC7BxI,KAAA,CAAAyI,aAAA,CAAClI,IAAI,CAACmI,UAAU;IAACC,KAAK,EAAC;EAAU,GAC9B,CAACjF,oBAAoB,IACpB1D,KAAA,CAAAyI,aAAA,CAACnI,YAAY;IACX+D,SAAS,EAAE7D,UAAU,CACnB,4CAA4C,EAC5C8D,yBACF,CAAE;IACFsE,IAAI,EAAC,OAAO;IACZnE,WAAW,EAAED,sBAAuB;IACpCqE,eAAe,EAAC,UAAU;IAC1BjH,KAAK,EAAEE,gBAAgB,aAAhBA,gBAAgB,cAAhBA,gBAAgB,GAAIC,uBAAwB;IACnDkF,IAAI,EAAE1E,OAAO,CAACe,OAAQ;IACtBT,KAAK,EAAET,cAAc,CAACkB,OAAQ;IAC9BwF,MAAM,EAAEhE,QAAQ,GAAG,OAAO,GAAGvB,SAAU;IACvCwB,QAAQ,EAAEA,QAAS;IACnBgE,QAAQ,EAAExB,sBAAuB;IACjCyB,OAAO,EAAE3B,YAAa;IACtB4B,SAAS,EAAEnC,uBAAwB;IACnCoC,OAAO,EAAExB,aAAc;IACvByB,iBAAiB;IACjBC,cAAc;IACdC,cAAc;IACdC,YAAY,EAAC,kBAAkB;IAC/BC,YAAY,EAAEjI,KAAK,CAACkI,WAAY;IAChCC,OAAO,EAAEzE,KAAK,KAAK;EAAU,CAC9B,CACF,EAEDhF,KAAA,CAAAyI,aAAA,CAAC/H,WAAW;IACV2D,SAAS,EAAE7D,UAAU,CACnB,sCAAsC,EACtC+D,oBACF,CAAE;IACFT,IAAI,EAAC,KAAK;IACVwF,YAAY,EAAC,cAAc;IAC3BjH,UAAU,EAAEA,UAAW;IACvBqH,MAAM,EAAC,UAAU;IACjB9H,KAAK,EAAEA,KAAM;IACb6C,WAAW,EACTA,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAK6D,SAAS,GAAGnH,kBAAkB,GAAGoC,SAClD;IACDoG,IAAI,EACFjF,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAK4D,SAAS,GAAGlH,WAAW,GAAGwI,KAAK,CAAC,EAAE,CAAC,CAACC,IAAI,CAAC,IAAI,CAC7D;IACDC,OAAO,EAAExC,aAAc;IACvByC,MAAM,EAAE1C,YAAa;IACrB2C,QAAQ,EAAE5C,kBAAmB;IAC7BvE,KAAK,EAAEP,SAAS,CAACgB,OAAQ;IACzB2G,QAAQ,EAAE9F,QAAS;IACnBS,IAAI,EAAEA,IAAK;IACXC,OAAO,EAAEA,OAAQ;IACjB5B,KAAK,EAAEA,KAAM;IACb8B,QAAQ,EAAEA,QAAS;IACnBC,KAAK,EACHtB,oBAAoB,GAAG,QAAQ,IAAAhC,YAAA,GAAGJ,KAAK,CAAC0D,KAAK,cAAAtD,YAAA,cAAAA,YAAA,GAAI,SAClD;IACDuD,IAAI,EAAAtC,aAAA,CAAAA,aAAA,KAAOsC,IAAI;MAAEiF,QAAQ,EAAE,KAAK;MAAEC,MAAM,EAAE;IAAK,EAAG;IAClDpH,QAAQ,EAAEA,QAAS;IACnBL,aAAa,EAAEA,aAAc;IAC7BwC,iBAAiB,EAAEA,iBAAkB;IACrCC,oBAAoB,EAAEA,oBAAqB;IAC3CC,iBAAiB,EAAEA,iBAAkB;IACrCgF,SAAS,EAAC;EAAK,CAChB,CACc,CACP,CAAC;AAEjB;AAEA,SAAS9D,UAAUA,CAACL,OAAoB,EAAEhE,IAAY,EAAE;EAAA,IAAAoI,kBAAA;EACtD,OAAO;IACLnD,WAAW,EAAEf,iBAAiB,CAACF,OAAO,CAACG,GAAG,CAAC;IAC3CkE,cAAc,EAAG,GAAErE,OAAO,CAACsE,GAAI,KAAIpE,iBAAiB,CAACF,OAAO,CAACG,GAAG,CAAE,GAAE;IACpEoE,OAAO,EAAG,GAAErE,iBAAiB,CAACF,OAAO,CAACG,GAAG,CAAE,IAAC,CAAAiE,kBAAA,GAC1CpE,OAAO,CAACwE,IAAI,CAACxI,IAAI,CAAC,cAAAoI,kBAAA,cAAAA,kBAAA,GAAIpE,OAAO,CAACwE,IAAI,CAACC,EACpC;EACH,CAAC;AACH;AAEA,SAASvE,iBAAiBA,CAACtD,KAAa,EAAE;EACxC,OAAQ,IAAGA,KAAM,EAAC;AACpB;AAEA,SAASO,UAAUA,CAACP,KAAa,EAAE;EACjC,OAAO,CACL,OAAOA,KAAK,KAAK,QAAQ,GACrBA,KAAK,CAAC8H,KAAK,CAAC,oBAAoB,CAAC,GACjC,CAACpH,SAAS,EAAE,EAAE,EAAE,EAAE,CAAC,EACvBqH,KAAK,CAAC,CAAC,CAAC;AACZ;AAEA,SAAS7E,SAASA,CAAC8E,KAAoB,EAAE;EACvC,OAAOA,KAAK,CAAC7E,MAAM,CAAC8E,OAAO,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC;AACxC;AAEA1J,WAAW,CAAC2J,qBAAqB,GAAG,IAAI;AACxC,eAAe3J,WAAW"}

package/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.js

@@ -4,7 +4,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 const _excluded = ["postalCode", "city", "help", "width", "country"];
 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, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import classnames from 'classnames';
 import StringField from '../String';
 import CompositionField from '../Composition';
@@ -59,22 +59,20 @@ function PostalCodeAndCity(props) {
     width: postalCodeWidth,
     errorMessages: postalCodeErrorMessages
   } = handleDefaults(postalCode);
-  const postalCodeValidationProps = {
-    mask: postalCodeMask,
-    pattern: postalCodePattern,
-    placeholder: postalCodePlaceHolder
-  };
   return React.createElement(CompositionField, _extends({
     className: classnames('dnb-forms-field-postal-code-and-city', props.className)
   }, fieldBlockProps, {
     width: width
-  }), React.createElement(StringField, _extends({}, postalCode, postalCodeValidationProps, {
+  }), React.createElement(StringField, _extends({}, postalCode, {
     className: classnames('dnb-forms-field-postal-code-and-city__postal-code', postalCodeClassName),
     label: postalCodeLabel !== null && postalCodeLabel !== void 0 ? postalCodeLabel : translations.PostalCode.label,
-    errorMessages: _objectSpread({
+    mask: postalCodeMask,
+    pattern: postalCodePattern,
+    placeholder: postalCodePlaceHolder,
+    errorMessages: useMemo(() => _objectSpread({
       'Field.errorRequired': translations.PostalCode.errorRequired,
       'Field.errorPattern': translations.PostalCode.errorPattern
-    }, postalCodeErrorMessages),
+    }, postalCodeErrorMessages), [postalCodeErrorMessages, translations.PostalCode.errorPattern, translations.PostalCode.errorRequired]),
     width: postalCodeWidth !== null && postalCodeWidth !== void 0 ? postalCodeWidth : false,
     inputClassName: "dnb-forms-field-postal-code-and-city__postal-code-input",
     inputMode: "numeric",
@@ -84,10 +82,10 @@ function PostalCodeAndCity(props) {
   }, city, {
     className: classnames('dnb-forms-field-postal-code-and-city__city', cityClassName),
     label: cityLabel !== null && cityLabel !== void 0 ? cityLabel : translations.City.label,
-    errorMessages: _objectSpread({
+    errorMessages: useMemo(() => _objectSpread({
       'Field.errorRequired': translations.City.errorRequired,
       'Field.errorPattern': translations.City.errorPattern
-    }, cityErrorMessages),
+    }, cityErrorMessages), [cityErrorMessages, translations.City.errorPattern, translations.City.errorRequired]),
     pattern: cityPattern !== null && cityPattern !== void 0 ? cityPattern : '^[A-Za-zÆØÅæøå -]+$',
     trim: true,
     width: cityWidth !== null && cityWidth !== void 0 ? cityWidth : 'stretch',

package/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.js.map

@@ -1 +1 @@
-{"version":3,"file":"PostalCodeAndCity.js","names":["React","useCallback","classnames","StringField","CompositionField","useTranslation","useDataValue","COUNTRY","defaultCountry","PostalCodeAndCity","props","translations","getSourceValue","postalCode","city","help","width","country","fieldBlockProps","_objectWithoutProperties","_excluded","pattern","cityPattern","className","cityClassName","label","cityLabel","cityWidth","errorMessages","cityErrorMessages","countryValue","handleDefaults","mask","placeholder","_objectSpread","postalCodeMask","postalCodePattern","postalCodePlaceHolder","postalCodeClassName","postalCodeLabel","postalCodeWidth","postalCodeErrorMessages","postalCodeValidationProps","createElement","_extends","PostalCode","errorRequired","errorPattern","inputClassName","inputMode","autoComplete","City","trim","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport classnames from 'classnames'\nimport { Props as FieldBlockProps } from '../../FieldBlock'\nimport StringField, { Props as StringFieldProps } from '../String'\nimport CompositionField from '../Composition'\nimport { Path } from '../../types'\nimport useTranslation from '../../hooks/useTranslation'\nimport useDataValue from '../../hooks/useDataValue'\nimport { COUNTRY as defaultCountry } from '../../../../shared/defaults'\nimport { HelpProps } from '../../../../components/help-button/HelpButtonInline'\n\nexport type Props = Pick<\n  FieldBlockProps,\n  'error' | 'warning' | 'info' | 'width' | 'className'\n> &\n  Partial<Record<'postalCode' | 'city', StringFieldProps>> & {\n    /**\n     * Defines which country the postal code and city is for.\n     * Setting it to anything other than `no` will remove the default norwegian postal code pattern.\n     * You can also use the value of another field to define the country, by using a path value i.e. `/myCountryPath`.\n     * Default: `NO`\n     */\n    country?: Path | string\n    help?: HelpProps\n  }\n\nfunction PostalCodeAndCity(props: Props) {\n  const translations = useTranslation()\n  const { getSourceValue } = useDataValue()\n\n  const {\n    postalCode = {},\n    city = {},\n    help,\n    width = 'large',\n    country = defaultCountry,\n    ...fieldBlockProps\n  } = props\n\n  const {\n    pattern: cityPattern,\n    className: cityClassName,\n    label: cityLabel,\n    width: cityWidth,\n    errorMessages: cityErrorMessages,\n  } = city\n\n  const countryValue = getSourceValue(country)\n  const handleDefaults = useCallback(\n    (postalCode: StringFieldProps) => {\n      const props: StringFieldProps = {}\n\n      switch (countryValue) {\n        case defaultCountry:\n        case 'DK':\n        case 'CH': {\n          props.mask = [/\\d/, /\\d/, /\\d/, /\\d/]\n          props.pattern = '^[0-9]{4}$'\n          props.placeholder = '0000'\n          break\n        }\n        default:\n          props.width = '8rem'\n          break\n      }\n\n      return { ...props, ...postalCode }\n    },\n    [countryValue]\n  )\n\n  const {\n    mask: postalCodeMask,\n    pattern: postalCodePattern,\n    placeholder: postalCodePlaceHolder,\n    className: postalCodeClassName,\n    label: postalCodeLabel,\n    width: postalCodeWidth,\n    errorMessages: postalCodeErrorMessages,\n  } = handleDefaults(postalCode)\n\n  const postalCodeValidationProps = {\n    mask: postalCodeMask,\n    pattern: postalCodePattern,\n    placeholder: postalCodePlaceHolder,\n  }\n\n  return (\n    <CompositionField\n      className={classnames(\n        'dnb-forms-field-postal-code-and-city',\n        props.className\n      )}\n      {...fieldBlockProps}\n      width={width}\n    >\n      <StringField\n        {...postalCode}\n        {...postalCodeValidationProps}\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__postal-code',\n          postalCodeClassName\n        )}\n        label={postalCodeLabel ?? translations.PostalCode.label}\n        errorMessages={{\n          'Field.errorRequired': translations.PostalCode.errorRequired,\n          'Field.errorPattern': translations.PostalCode.errorPattern,\n          ...postalCodeErrorMessages,\n        }}\n        width={postalCodeWidth ?? false}\n        inputClassName=\"dnb-forms-field-postal-code-and-city__postal-code-input\"\n        inputMode=\"numeric\"\n        autoComplete=\"postal-code\"\n      />\n\n      <StringField\n        help={help}\n        {...city}\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__city',\n          cityClassName\n        )}\n        label={cityLabel ?? translations.City.label}\n        errorMessages={{\n          'Field.errorRequired': translations.City.errorRequired,\n          'Field.errorPattern': translations.City.errorPattern,\n          ...cityErrorMessages,\n        }}\n        pattern={cityPattern ?? '^[A-Za-zÆØÅæøå -]+$'}\n        trim\n        width={cityWidth ?? 'stretch'}\n        autoComplete=\"address-level2\"\n      />\n    </CompositionField>\n  )\n}\n\nPostalCodeAndCity._supportsSpacingProps = true\nexport default PostalCodeAndCity\n"],"mappings":"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"}
+{"version":3,"file":"PostalCodeAndCity.js","names":["React","useCallback","useMemo","classnames","StringField","CompositionField","useTranslation","useDataValue","COUNTRY","defaultCountry","PostalCodeAndCity","props","translations","getSourceValue","postalCode","city","help","width","country","fieldBlockProps","_objectWithoutProperties","_excluded","pattern","cityPattern","className","cityClassName","label","cityLabel","cityWidth","errorMessages","cityErrorMessages","countryValue","handleDefaults","mask","placeholder","_objectSpread","postalCodeMask","postalCodePattern","postalCodePlaceHolder","postalCodeClassName","postalCodeLabel","postalCodeWidth","postalCodeErrorMessages","createElement","_extends","PostalCode","errorRequired","errorPattern","inputClassName","inputMode","autoComplete","City","trim","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react'\nimport classnames from 'classnames'\nimport { Props as FieldBlockProps } from '../../FieldBlock'\nimport StringField, { Props as StringFieldProps } from '../String'\nimport CompositionField from '../Composition'\nimport { Path } from '../../types'\nimport useTranslation from '../../hooks/useTranslation'\nimport useDataValue from '../../hooks/useDataValue'\nimport { COUNTRY as defaultCountry } from '../../../../shared/defaults'\nimport { HelpProps } from '../../../../components/help-button/HelpButtonInline'\n\nexport type Props = Pick<\n  FieldBlockProps,\n  'error' | 'warning' | 'info' | 'width' | 'className'\n> &\n  Partial<Record<'postalCode' | 'city', StringFieldProps>> & {\n    /**\n     * Defines which country the postal code and city is for.\n     * Setting it to anything other than `no` will remove the default norwegian postal code pattern.\n     * You can also use the value of another field to define the country, by using a path value i.e. `/myCountryPath`.\n     * Default: `NO`\n     */\n    country?: Path | string\n    help?: HelpProps\n  }\n\nfunction PostalCodeAndCity(props: Props) {\n  const translations = useTranslation()\n  const { getSourceValue } = useDataValue()\n\n  const {\n    postalCode = {},\n    city = {},\n    help,\n    width = 'large',\n    country = defaultCountry,\n    ...fieldBlockProps\n  } = props\n\n  const {\n    pattern: cityPattern,\n    className: cityClassName,\n    label: cityLabel,\n    width: cityWidth,\n    errorMessages: cityErrorMessages,\n  } = city\n\n  const countryValue = getSourceValue(country)\n  const handleDefaults = useCallback(\n    (postalCode: StringFieldProps) => {\n      const props: StringFieldProps = {}\n\n      switch (countryValue) {\n        case defaultCountry:\n        case 'DK':\n        case 'CH': {\n          props.mask = [/\\d/, /\\d/, /\\d/, /\\d/]\n          props.pattern = '^[0-9]{4}$'\n          props.placeholder = '0000'\n          break\n        }\n        default:\n          props.width = '8rem'\n          break\n      }\n\n      return { ...props, ...postalCode }\n    },\n    [countryValue]\n  )\n\n  const {\n    mask: postalCodeMask,\n    pattern: postalCodePattern,\n    placeholder: postalCodePlaceHolder,\n    className: postalCodeClassName,\n    label: postalCodeLabel,\n    width: postalCodeWidth,\n    errorMessages: postalCodeErrorMessages,\n  } = handleDefaults(postalCode)\n\n  return (\n    <CompositionField\n      className={classnames(\n        'dnb-forms-field-postal-code-and-city',\n        props.className\n      )}\n      {...fieldBlockProps}\n      width={width}\n    >\n      <StringField\n        {...postalCode}\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__postal-code',\n          postalCodeClassName\n        )}\n        label={postalCodeLabel ?? translations.PostalCode.label}\n        mask={postalCodeMask}\n        pattern={postalCodePattern}\n        placeholder={postalCodePlaceHolder}\n        errorMessages={useMemo(\n          () => ({\n            'Field.errorRequired': translations.PostalCode.errorRequired,\n            'Field.errorPattern': translations.PostalCode.errorPattern,\n            ...postalCodeErrorMessages,\n          }),\n          [\n            postalCodeErrorMessages,\n            translations.PostalCode.errorPattern,\n            translations.PostalCode.errorRequired,\n          ]\n        )}\n        width={postalCodeWidth ?? false}\n        inputClassName=\"dnb-forms-field-postal-code-and-city__postal-code-input\"\n        inputMode=\"numeric\"\n        autoComplete=\"postal-code\"\n      />\n\n      <StringField\n        help={help}\n        {...city}\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__city',\n          cityClassName\n        )}\n        label={cityLabel ?? translations.City.label}\n        errorMessages={useMemo(\n          () => ({\n            'Field.errorRequired': translations.City.errorRequired,\n            'Field.errorPattern': translations.City.errorPattern,\n            ...cityErrorMessages,\n          }),\n          [\n            cityErrorMessages,\n            translations.City.errorPattern,\n            translations.City.errorRequired,\n          ]\n        )}\n        pattern={cityPattern ?? '^[A-Za-zÆØÅæøå -]+$'}\n        trim\n        width={cityWidth ?? 'stretch'}\n        autoComplete=\"address-level2\"\n      />\n    </CompositionField>\n  )\n}\n\nPostalCodeAndCity._supportsSpacingProps = true\nexport default PostalCodeAndCity\n"],"mappings":"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"}

package/extensions/forms/Field/Provider/useFieldProvider.d.ts

@@ -95,6 +95,7 @@ declare function useFieldProvider(props?: Omit<FieldProviderProps, 'children'>):
         htmlAttributes?: Record<string, unknown>;
         schema?: import("../../types").AllJSONSchemaVersions<unknown>;
         validator?: import("../../types").Validator<unknown, import("../../types").DefaultErrorMessages>;
+        onChangeValidator?: import("../../types").Validator<unknown, import("../../types").DefaultErrorMessages>;
         onBlurValidator?: import("../../types").Validator<unknown, import("../../types").DefaultErrorMessages>;
         exportValidators?: Record<string, import("../../types").Validator<unknown, import("../../types").DefaultErrorMessages>>;
         validateRequired?: (internal: unknown, { emptyValue, required, isChanged, error, }: {

package/extensions/forms/Field/Selection/Selection.d.ts

@@ -4,8 +4,10 @@ import { FieldProps, Path } from '../../types';
 import type { FormStatusText } from '../../../../components/FormStatus';
 import type { AutocompleteAllProps } from '../../../../components/Autocomplete';
 import type { DropdownAllProps } from '../../../../components/Dropdown';
+import { HelpProps } from '../../../../components/help-button/HelpButtonInline';
 import { DrawerListProps } from '../../../../fragments/DrawerList';
 import { ToCamelCase } from '../../../../shared/helpers/withCamelCaseProps';
+import { FormError } from '../../utils';
 type IOption = {
     title: string | React.ReactNode;
     value: number | string;
@@ -15,6 +17,7 @@ export type Data = Array<{
     value: string;
     title: React.ReactNode;
     text?: React.ReactNode;
+    disabled?: boolean;
 }>;
 export type Props = FieldProps<IOption['value']> & {
     /**
@@ -58,8 +61,15 @@ declare function Selection(props: Props): import("react/jsx-runtime").JSX.Elemen
 declare namespace Selection {
     var _supportsSpacingProps: boolean;
 }
-export declare function mapOptions(children: React.ReactNode, { createOption }: {
-    createOption: any;
+type OptionProps = React.ComponentProps<React.FC<{
+    value: Props['value'];
+    error: Error | FormError | undefined;
+    help: HelpProps;
+    title: React.ReactNode;
+    children: React.ReactNode;
+}>>;
+export declare function mapOptions(children: React.ReactNode, { createOption, }: {
+    createOption: (props: OptionProps, i: number) => React.ReactNode;
 }): any;
 export declare function makeOptions<T = DrawerListProps['data']>(children: React.ReactNode): T;
 export default Selection;

package/extensions/forms/Field/Selection/Selection.js

@@ -227,14 +227,16 @@ export function makeOptions(children) {
       child = child['props'].children;
     }
     if (React.isValidElement(child) && child.type === OptionField) {
-      var _ref9, _props$children, _props$value;
+      var _ref9, _props$title, _props$value;
       const props = child.props;
-      const title = (_ref9 = (_props$children = props.children) !== null && _props$children !== void 0 ? _props$children : props.title) !== null && _ref9 !== void 0 ? _ref9 : _em || (_em = React.createElement("em", null, "Untitled"));
+      const title = (_ref9 = (_props$title = props.title) !== null && _props$title !== void 0 ? _props$title : props.children) !== null && _ref9 !== void 0 ? _ref9 : _em || (_em = React.createElement("em", null, "Untitled"));
       const content = props.text ? [title, props.text] : title;
       const selectedKey = String((_props$value = props.value) !== null && _props$value !== void 0 ? _props$value : '');
+      const disabled = props.disabled;
       return {
         selectedKey,
-        content
+        content,
+        disabled
       };
     }
     if (child) {
@@ -249,11 +251,13 @@ function renderDropdownItems(data) {
     let {
       value,
       title,
-      text
+      text,
+      disabled
     } = _ref10;
     return {
       selectedKey: value,
-      content: (text ? [title, text] : title) || _em2 || (_em2 = React.createElement("em", null, "Untitled"))
+      content: (text ? [title, text] : title) || _em2 || (_em2 = React.createElement("em", null, "Untitled")),
+      disabled
     };
   })) || [];
 }

package/extensions/forms/Field/Selection/Selection.js.map

@@ -1 +1 @@
-{"version":3,"file":"Selection.js","names":["React","useMemo","useCallback","classnames","convertJsxToString","makeUniqueId","ToggleButton","Dropdown","Radio","Autocomplete","HelpButton","OptionField","useFieldProps","checkForError","pickSpacingProps","FieldBlock","convertCamelCaseProps","useDataValue","Selection","props","clearValue","id","className","variant","layout","optionsLayout","placeholder","path","value","info","warning","error","hasError","disabled","emptyValue","width","htmlAttributes","setHasFocus","handleChange","setDisplayValue","data","dataPath","children","autocompleteProps","dropdownProps","getValueByPath","dataList","handleDropdownChange","_ref","selectedKey","onChangeHandler","_ref2","undefined","handleShow","_ref3","handleHide","_ref4","cn","fieldBlockProps","_objectSpread","forId","disableStatusSummary","Component","items","renderRadioItems","iterateOverItems","_ref5","v","label","createElement","_extends","labelHeight","asFieldset","Children","count","Group","layout_direction","on_change","String","_data$find","renderDropdownItems","concat","makeOptions","filter","Boolean","displayValue","find","item","content","sharedProps","list_class","portal_class","title","status","on_show","on_hide","stretch","specificFieldBlockProps","contentWidth","_ref6","valueProp","optionsCount","length","createOption","i","_ref7","help","rest","_objectWithoutProperties","_excluded","suffix","size","key","text","map","mapOptions","_ref8","child","isValidElement","type","nestedChildren","cloneElement","_child","_child$props","_child$props$children","_ref9","_props$children","_props$value","_em","_ref10","_em2","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Selection/Selection.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from 'react'\nimport classnames from 'classnames'\nimport {\n  convertJsxToString,\n  makeUniqueId,\n} from '../../../../shared/component-helper'\nimport {\n  ToggleButton,\n  Dropdown,\n  Radio,\n  Autocomplete,\n  HelpButton,\n} from '../../../../components'\nimport OptionField, { Props as OptionFieldProps } from '../Option'\nimport { useFieldProps } from '../../hooks'\nimport { checkForError, ReturnAdditional } from '../../hooks/useFieldProps'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport FieldBlock, {\n  Props as FieldBlockProps,\n  FieldBlockWidth,\n} from '../../FieldBlock'\nimport { FieldProps, Path } from '../../types'\nimport type { FormStatusText } from '../../../../components/FormStatus'\nimport type { AutocompleteAllProps } from '../../../../components/Autocomplete'\nimport type { DropdownAllProps } from '../../../../components/Dropdown'\nimport { HelpProps } from '../../../../components/help-button/HelpButtonInline'\nimport { DrawerListProps } from '../../../../fragments/DrawerList'\nimport {\n  convertCamelCaseProps,\n  ToCamelCase,\n} from '../../../../shared/helpers/withCamelCaseProps'\nimport useDataValue from '../../hooks/useDataValue'\nimport { FormError } from '../../utils'\n\ntype IOption = {\n  title: string | React.ReactNode\n  value: number | string\n  status: FormStatusText\n}\nexport type Data = Array<{\n  value: string\n  title: React.ReactNode\n  text?: React.ReactNode\n}>\n\nexport type Props = FieldProps<IOption['value']> & {\n  /**\n   * Defines the variant of the component.\n   * Default: dropdown\n   */\n  variant?: 'dropdown' | 'autocomplete' | 'radio' | 'button'\n\n  /**\n   * The width of the component.\n   * Default: large\n   */\n  width?: FieldBlockWidth\n\n  /**\n   * Defines the layout of the options for radio and button variants.\n   */\n  optionsLayout?: 'horizontal' | 'vertical'\n\n  /**\n   * The path to the context data (Form.Handler).\n   * The context data object needs to have a `value` and a `title` property.\n   */\n  dataPath?: Path\n\n  /**\n   * Data to be used for the component. The object needs to have a `value` and a `title` property.\n   * The generated options will be placed above given JSX based children.\n   */\n  data?: Data\n\n  /**\n   * Autocomplete specific props\n   */\n  autocompleteProps?: ToCamelCase<AutocompleteAllProps>\n\n  /**\n   * Dropdown specific props\n   */\n  dropdownProps?: ToCamelCase<DropdownAllProps>\n\n  /**\n   * The content of the component.\n   */\n  children?: React.ReactNode\n}\n\nfunction Selection(props: Props) {\n  const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, [])\n\n  const {\n    id,\n    className,\n    variant = 'dropdown',\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    placeholder,\n    path,\n    value,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    emptyValue,\n    width = 'large',\n    htmlAttributes,\n    setHasFocus,\n    handleChange,\n    setDisplayValue,\n    data,\n    dataPath,\n    children,\n\n    // - Autocomplete and Dropdown specific props\n    autocompleteProps,\n    dropdownProps,\n  } = useFieldProps(props)\n\n  const { getValueByPath } = useDataValue()\n  let dataList = data\n  if (dataPath) {\n    dataList = getValueByPath(dataPath)\n  }\n\n  const handleDropdownChange = useCallback(\n    ({ data }) => {\n      const selectedKey = data?.selectedKey\n      handleChange?.(\n        !selectedKey || selectedKey === clearValue\n          ? emptyValue\n          : selectedKey\n      )\n    },\n    [handleChange, emptyValue, clearValue]\n  )\n\n  const onChangeHandler = useCallback(\n    ({ value }) => {\n      handleChange?.(value === undefined ? emptyValue : value)\n    },\n    [handleChange, emptyValue]\n  )\n\n  // Specific handleShow and handleHide because Dropdown preserve the initially received callbacks, so changes\n  // due to `useCallback` usage will have no effect, leading to useFieldPropss handleFocus and handleBlur sending out old\n  // copies of value as arguments.\n  const handleShow = useCallback(\n    ({ data }) => {\n      setHasFocus(true, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const handleHide = useCallback(\n    ({ data }) => {\n      setHasFocus(false, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const cn = classnames(\n    'dnb-forms-field-selection',\n    `dnb-forms-field-selection__variant--${variant}`,\n    `dnb-forms-field-selection--layout-${layout}`,\n    `dnb-forms-field-selection--options-layout--${optionsLayout}`,\n    className\n  )\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    className: cn,\n    disableStatusSummary: true,\n    ...pickSpacingProps(props),\n  }\n\n  switch (variant) {\n    case 'radio':\n    case 'button': {\n      const Component = (\n        variant === 'radio' ? Radio : ToggleButton\n      ) as typeof Radio & typeof ToggleButton\n\n      const items = renderRadioItems({\n        id,\n        value,\n        variant,\n        info,\n        warning,\n        htmlAttributes,\n        children,\n        dataList,\n        hasError,\n        iterateOverItems: ({ value: v, label }) => {\n          if (v === value) {\n            setDisplayValue(path, label)\n          }\n        },\n      })\n\n      return (\n        <FieldBlock\n          {...fieldBlockProps}\n          labelHeight=\"small\"\n          asFieldset={React.Children.count(items) > 1}\n        >\n          <Component.Group\n            className={cn}\n            layout_direction={\n              optionsLayout === 'horizontal' ? 'row' : 'column'\n            }\n            disabled={disabled}\n            on_change={onChangeHandler}\n            value={String(value ?? '')}\n          >\n            {items}\n          </Component.Group>\n        </FieldBlock>\n      )\n    }\n\n    case 'autocomplete':\n    case 'dropdown': {\n      const data = renderDropdownItems(dataList)\n        .concat(makeOptions(children))\n        .filter(Boolean)\n      const displayValue = data.find((item) => item.selectedKey === value)\n        ?.content\n      setDisplayValue(path, displayValue)\n\n      const sharedProps: AutocompleteAllProps & DropdownAllProps = {\n        id,\n        list_class: 'dnb-forms-field-selection__list',\n        portal_class: 'dnb-forms-field-selection__portal',\n        title: placeholder,\n        value: String(value ?? ''),\n        status:\n          (hasError || checkForError([error, info, warning])) && 'error',\n        disabled,\n        ...htmlAttributes,\n        data,\n        on_change: handleDropdownChange,\n        on_show: handleShow,\n        on_hide: handleHide,\n        stretch: true,\n      }\n\n      const specificFieldBlockProps: FieldBlockProps = {\n        width,\n      }\n      if (layout === 'horizontal') {\n        specificFieldBlockProps.width = undefined\n        specificFieldBlockProps.contentWidth = width\n      }\n\n      return (\n        <FieldBlock {...fieldBlockProps} {...specificFieldBlockProps}>\n          {variant === 'autocomplete' ? (\n            <Autocomplete\n              {...sharedProps}\n              {...(autocompleteProps\n                ? (convertCamelCaseProps(\n                    autocompleteProps\n                  ) as AutocompleteAllProps)\n                : null)}\n            />\n          ) : (\n            <Dropdown\n              {...sharedProps}\n              {...(dropdownProps\n                ? (convertCamelCaseProps(\n                    dropdownProps\n                  ) as DropdownAllProps)\n                : null)}\n            />\n          )}\n        </FieldBlock>\n      )\n    }\n  }\n}\n\ntype OptionProps = React.ComponentProps<\n  React.FC<{\n    value: Props['value']\n    error: Error | FormError | undefined\n    help: HelpProps\n    title: React.ReactNode\n    children: React.ReactNode\n  }>\n>\n\nfunction renderRadioItems({\n  id,\n  value: valueProp,\n  variant,\n  info,\n  warning,\n  htmlAttributes,\n  children,\n  dataList,\n  hasError,\n  iterateOverItems,\n}: {\n  id: string\n  value: Props['value']\n  variant: Props['variant']\n  info: Props['info']\n  warning: Props['warning']\n  htmlAttributes: Props['htmlAttributes']\n  children: Props['children']\n  dataList: Data\n  hasError: ReturnAdditional<Props['value']>['hasError']\n  iterateOverItems?: (item: {\n    value: Props['value']\n    label: Props['children']\n  }) => void\n}) {\n  const optionsCount =\n    React.Children.count(children) + (dataList?.length || 0)\n\n  const createOption = (props: OptionProps, i: number) => {\n    const { value, title, children, error, help, ...rest } = props\n\n    const label = title ?? children\n    const suffix = help ? (\n      <HelpButton size=\"small\" title={convertJsxToString(help.title)}>\n        {help.content}\n      </HelpButton>\n    ) : undefined\n\n    iterateOverItems?.({ value, label })\n\n    const Component = (\n      variant === 'radio' ? Radio : ToggleButton\n    ) as typeof Radio & typeof ToggleButton\n\n    return (\n      <Component\n        id={optionsCount === 1 ? id : undefined}\n        key={`option-${i}-${id}`}\n        label={variant === 'radio' ? label : undefined}\n        text={variant === 'button' ? label : undefined}\n        value={String(value ?? valueProp ?? '')}\n        status={\n          (hasError || checkForError([error, info, warning])) && 'error'\n        }\n        suffix={suffix}\n        {...htmlAttributes}\n        {...rest}\n      />\n    )\n  }\n\n  return [\n    ...(dataList || []).map((props, i) => {\n      return createOption(props as OptionProps, i)\n    }),\n    ...(mapOptions(children, { createOption }) || []),\n  ].filter(Boolean)\n}\n\nexport function mapOptions(children: React.ReactNode, { createOption }) {\n  return React.Children.map(\n    children,\n    (child: React.ReactElement<OptionProps>, i) => {\n      if (React.isValidElement(child)) {\n        if (child.type === OptionField) {\n          return createOption(child.props, i)\n        }\n\n        if (child.props.children) {\n          const nestedChildren = mapOptions(child.props.children, {\n            createOption,\n          })\n          return React.cloneElement(child, child.props, nestedChildren)\n        }\n      }\n\n      return child\n    }\n  )\n}\n\nexport function makeOptions<T = DrawerListProps['data']>(\n  children: React.ReactNode\n): T {\n  return React.Children.map(children, (child) => {\n    if (child?.['props']?.children?.type === OptionField) {\n      child = child['props'].children\n    }\n\n    if (React.isValidElement(child) && child.type === OptionField) {\n      const props = child.props as OptionFieldProps\n      const title = props.children ?? props.title ?? <em>Untitled</em>\n      const content = props.text ? [title, props.text] : title\n      const selectedKey = String(props.value ?? '')\n\n      return { selectedKey, content }\n    }\n\n    // For other children, just show them as content\n    if (child) {\n      return {\n        content: child,\n      }\n    }\n  }) as T\n}\n\nfunction renderDropdownItems(data: Data) {\n  return (\n    data?.map(({ value, title, text }) => {\n      return {\n        selectedKey: value,\n        content: (text ? [title, text] : title) || <em>Untitled</em>,\n      }\n    }) || []\n  )\n}\n\nSelection._supportsSpacingProps = true\nexport default Selection\n"],"mappings":"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"}
+{"version":3,"file":"Selection.js","names":["React","useMemo","useCallback","classnames","convertJsxToString","makeUniqueId","ToggleButton","Dropdown","Radio","Autocomplete","HelpButton","OptionField","useFieldProps","checkForError","pickSpacingProps","FieldBlock","convertCamelCaseProps","useDataValue","Selection","props","clearValue","id","className","variant","layout","optionsLayout","placeholder","path","value","info","warning","error","hasError","disabled","emptyValue","width","htmlAttributes","setHasFocus","handleChange","setDisplayValue","data","dataPath","children","autocompleteProps","dropdownProps","getValueByPath","dataList","handleDropdownChange","_ref","selectedKey","onChangeHandler","_ref2","undefined","handleShow","_ref3","handleHide","_ref4","cn","fieldBlockProps","_objectSpread","forId","disableStatusSummary","Component","items","renderRadioItems","iterateOverItems","_ref5","v","label","createElement","_extends","labelHeight","asFieldset","Children","count","Group","layout_direction","on_change","String","_data$find","renderDropdownItems","concat","makeOptions","filter","Boolean","displayValue","find","item","content","sharedProps","list_class","portal_class","title","status","on_show","on_hide","stretch","specificFieldBlockProps","contentWidth","_ref6","valueProp","optionsCount","length","createOption","i","_ref7","help","rest","_objectWithoutProperties","_excluded","suffix","size","key","text","map","mapOptions","_ref8","child","isValidElement","type","nestedChildren","cloneElement","_child","_child$props","_child$props$children","_ref9","_props$title","_props$value","_em","_ref10","_em2","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Selection/Selection.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from 'react'\nimport classnames from 'classnames'\nimport {\n  convertJsxToString,\n  makeUniqueId,\n} from '../../../../shared/component-helper'\nimport {\n  ToggleButton,\n  Dropdown,\n  Radio,\n  Autocomplete,\n  HelpButton,\n} from '../../../../components'\nimport OptionField, { Props as OptionFieldProps } from '../Option'\nimport { useFieldProps } from '../../hooks'\nimport { checkForError, ReturnAdditional } from '../../hooks/useFieldProps'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport FieldBlock, {\n  Props as FieldBlockProps,\n  FieldBlockWidth,\n} from '../../FieldBlock'\nimport { FieldProps, Path } from '../../types'\nimport type { FormStatusText } from '../../../../components/FormStatus'\nimport type { AutocompleteAllProps } from '../../../../components/Autocomplete'\nimport type { DropdownAllProps } from '../../../../components/Dropdown'\nimport { HelpProps } from '../../../../components/help-button/HelpButtonInline'\nimport { DrawerListProps } from '../../../../fragments/DrawerList'\nimport {\n  convertCamelCaseProps,\n  ToCamelCase,\n} from '../../../../shared/helpers/withCamelCaseProps'\nimport useDataValue from '../../hooks/useDataValue'\nimport { FormError } from '../../utils'\n\ntype IOption = {\n  title: string | React.ReactNode\n  value: number | string\n  status: FormStatusText\n}\nexport type Data = Array<{\n  value: string\n  title: React.ReactNode\n  text?: React.ReactNode\n  disabled?: boolean\n}>\n\nexport type Props = FieldProps<IOption['value']> & {\n  /**\n   * Defines the variant of the component.\n   * Default: dropdown\n   */\n  variant?: 'dropdown' | 'autocomplete' | 'radio' | 'button'\n\n  /**\n   * The width of the component.\n   * Default: large\n   */\n  width?: FieldBlockWidth\n\n  /**\n   * Defines the layout of the options for radio and button variants.\n   */\n  optionsLayout?: 'horizontal' | 'vertical'\n\n  /**\n   * The path to the context data (Form.Handler).\n   * The context data object needs to have a `value` and a `title` property.\n   */\n  dataPath?: Path\n\n  /**\n   * Data to be used for the component. The object needs to have a `value` and a `title` property.\n   * The generated options will be placed above given JSX based children.\n   */\n  data?: Data\n\n  /**\n   * Autocomplete specific props\n   */\n  autocompleteProps?: ToCamelCase<AutocompleteAllProps>\n\n  /**\n   * Dropdown specific props\n   */\n  dropdownProps?: ToCamelCase<DropdownAllProps>\n\n  /**\n   * The content of the component.\n   */\n  children?: React.ReactNode\n}\n\nfunction Selection(props: Props) {\n  const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, [])\n\n  const {\n    id,\n    className,\n    variant = 'dropdown',\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    placeholder,\n    path,\n    value,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    emptyValue,\n    width = 'large',\n    htmlAttributes,\n    setHasFocus,\n    handleChange,\n    setDisplayValue,\n    data,\n    dataPath,\n    children,\n\n    // - Autocomplete and Dropdown specific props\n    autocompleteProps,\n    dropdownProps,\n  } = useFieldProps(props)\n\n  const { getValueByPath } = useDataValue()\n  let dataList = data\n  if (dataPath) {\n    dataList = getValueByPath(dataPath)\n  }\n\n  const handleDropdownChange = useCallback(\n    ({ data }) => {\n      const selectedKey = data?.selectedKey\n      handleChange?.(\n        !selectedKey || selectedKey === clearValue\n          ? emptyValue\n          : selectedKey\n      )\n    },\n    [handleChange, emptyValue, clearValue]\n  )\n\n  const onChangeHandler = useCallback(\n    ({ value }) => {\n      handleChange?.(value === undefined ? emptyValue : value)\n    },\n    [handleChange, emptyValue]\n  )\n\n  // Specific handleShow and handleHide because Dropdown preserve the initially received callbacks, so changes\n  // due to `useCallback` usage will have no effect, leading to useFieldPropss handleFocus and handleBlur sending out old\n  // copies of value as arguments.\n  const handleShow = useCallback(\n    ({ data }) => {\n      setHasFocus(true, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const handleHide = useCallback(\n    ({ data }) => {\n      setHasFocus(false, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const cn = classnames(\n    'dnb-forms-field-selection',\n    `dnb-forms-field-selection__variant--${variant}`,\n    `dnb-forms-field-selection--layout-${layout}`,\n    `dnb-forms-field-selection--options-layout--${optionsLayout}`,\n    className\n  )\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    className: cn,\n    disableStatusSummary: true,\n    ...pickSpacingProps(props),\n  }\n\n  switch (variant) {\n    case 'radio':\n    case 'button': {\n      const Component = (\n        variant === 'radio' ? Radio : ToggleButton\n      ) as typeof Radio & typeof ToggleButton\n\n      const items = renderRadioItems({\n        id,\n        value,\n        variant,\n        info,\n        warning,\n        htmlAttributes,\n        children,\n        dataList,\n        hasError,\n        iterateOverItems: ({ value: v, label }) => {\n          if (v === value) {\n            setDisplayValue(path, label)\n          }\n        },\n      })\n\n      return (\n        <FieldBlock\n          {...fieldBlockProps}\n          labelHeight=\"small\"\n          asFieldset={React.Children.count(items) > 1}\n        >\n          <Component.Group\n            className={cn}\n            layout_direction={\n              optionsLayout === 'horizontal' ? 'row' : 'column'\n            }\n            disabled={disabled}\n            on_change={onChangeHandler}\n            value={String(value ?? '')}\n          >\n            {items}\n          </Component.Group>\n        </FieldBlock>\n      )\n    }\n\n    case 'autocomplete':\n    case 'dropdown': {\n      const data = renderDropdownItems(dataList)\n        .concat(makeOptions(children))\n        .filter(Boolean)\n      const displayValue = data.find((item) => item.selectedKey === value)\n        ?.content\n      setDisplayValue(path, displayValue)\n\n      const sharedProps: AutocompleteAllProps & DropdownAllProps = {\n        id,\n        list_class: 'dnb-forms-field-selection__list',\n        portal_class: 'dnb-forms-field-selection__portal',\n        title: placeholder,\n        value: String(value ?? ''),\n        status:\n          (hasError || checkForError([error, info, warning])) && 'error',\n        disabled,\n        ...htmlAttributes,\n        data,\n        on_change: handleDropdownChange,\n        on_show: handleShow,\n        on_hide: handleHide,\n        stretch: true,\n      }\n\n      const specificFieldBlockProps: FieldBlockProps = {\n        width,\n      }\n      if (layout === 'horizontal') {\n        specificFieldBlockProps.width = undefined\n        specificFieldBlockProps.contentWidth = width\n      }\n\n      return (\n        <FieldBlock {...fieldBlockProps} {...specificFieldBlockProps}>\n          {variant === 'autocomplete' ? (\n            <Autocomplete\n              {...sharedProps}\n              {...(autocompleteProps\n                ? (convertCamelCaseProps(\n                    autocompleteProps\n                  ) as AutocompleteAllProps)\n                : null)}\n            />\n          ) : (\n            <Dropdown\n              {...sharedProps}\n              {...(dropdownProps\n                ? (convertCamelCaseProps(\n                    dropdownProps\n                  ) as DropdownAllProps)\n                : null)}\n            />\n          )}\n        </FieldBlock>\n      )\n    }\n  }\n}\n\ntype OptionProps = React.ComponentProps<\n  React.FC<{\n    value: Props['value']\n    error: Error | FormError | undefined\n    help: HelpProps\n    title: React.ReactNode\n    children: React.ReactNode\n  }>\n>\n\nfunction renderRadioItems({\n  id,\n  value: valueProp,\n  variant,\n  info,\n  warning,\n  htmlAttributes,\n  children,\n  dataList,\n  hasError,\n  iterateOverItems,\n}: {\n  id: string\n  value: Props['value']\n  variant: Props['variant']\n  info: Props['info']\n  warning: Props['warning']\n  htmlAttributes: Props['htmlAttributes']\n  children: Props['children']\n  dataList: Data\n  hasError: ReturnAdditional<Props['value']>['hasError']\n  iterateOverItems?: (item: {\n    value: Props['value']\n    label: Props['children']\n  }) => void\n}) {\n  const optionsCount =\n    React.Children.count(children) + (dataList?.length || 0)\n\n  const createOption = (props: OptionProps, i: number) => {\n    const { value, title, children, error, help, ...rest } = props\n\n    const label = title ?? children\n    const suffix = help ? (\n      <HelpButton size=\"small\" title={convertJsxToString(help.title)}>\n        {help.content}\n      </HelpButton>\n    ) : undefined\n\n    iterateOverItems?.({ value, label })\n\n    const Component = (\n      variant === 'radio' ? Radio : ToggleButton\n    ) as typeof Radio & typeof ToggleButton\n\n    return (\n      <Component\n        id={optionsCount === 1 ? id : undefined}\n        key={`option-${i}-${id}`}\n        label={variant === 'radio' ? label : undefined}\n        text={variant === 'button' ? label : undefined}\n        value={String(value ?? valueProp ?? '')}\n        status={\n          (hasError || checkForError([error, info, warning])) && 'error'\n        }\n        suffix={suffix}\n        {...htmlAttributes}\n        {...rest}\n      />\n    )\n  }\n\n  return [\n    ...(dataList || []).map((props, i) => {\n      return createOption(props as OptionProps, i)\n    }),\n    ...(mapOptions(children, { createOption }) || []),\n  ].filter(Boolean)\n}\n\nexport function mapOptions(\n  children: React.ReactNode,\n  {\n    createOption,\n  }: { createOption: (props: OptionProps, i: number) => React.ReactNode }\n) {\n  return React.Children.map(\n    children,\n    (child: React.ReactElement<OptionProps>, i) => {\n      if (React.isValidElement(child)) {\n        if (child.type === OptionField) {\n          return createOption(child.props, i)\n        }\n\n        if (child.props.children) {\n          const nestedChildren = mapOptions(child.props.children, {\n            createOption,\n          })\n          return React.cloneElement(child, child.props, nestedChildren)\n        }\n      }\n\n      return child\n    }\n  )\n}\n\nexport function makeOptions<T = DrawerListProps['data']>(\n  children: React.ReactNode\n): T {\n  return React.Children.map(children, (child) => {\n    if (child?.['props']?.children?.type === OptionField) {\n      child = child['props'].children\n    }\n\n    if (React.isValidElement(child) && child.type === OptionField) {\n      const props = child.props as OptionFieldProps\n      const title = props.title ?? props.children ?? <em>Untitled</em>\n      const content = props.text ? [title, props.text] : title\n      const selectedKey = String(props.value ?? '')\n      const disabled = props.disabled\n\n      return { selectedKey, content, disabled }\n    }\n\n    // For other children, just show them as content\n    if (child) {\n      return {\n        content: child,\n      }\n    }\n  }) as T\n}\n\nfunction renderDropdownItems(data: Data) {\n  return (\n    data?.map(({ value, title, text, disabled }) => {\n      return {\n        selectedKey: value,\n        content: (text ? [title, text] : title) || <em>Untitled</em>,\n        disabled,\n      }\n    }) || []\n  )\n}\n\nSelection._supportsSpacingProps = true\nexport default Selection\n"],"mappings":"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"}

package/extensions/forms/Field/Upload/Upload.d.ts

@@ -6,7 +6,7 @@ export type UploadValue = Array<UploadFile | UploadFileNative>;
 export type Props = Omit<FieldProps<UploadValue, UploadValue | undefined>, 'name'> & SpacingProps & {
     width?: Omit<FieldBlockWidth, 'medium' | 'small'>;
 } & Pick<Partial<UploadProps>, 'title' | 'text' | 'acceptedFileTypes' | 'filesAmountLimit' | 'fileMaxSize' | 'onFileDelete' | 'skeleton'> & {
-    asyncFileHandler?: (newFiles: UploadValue) => Promise<UploadValue>;
+    fileHandler?: (newFiles: UploadValue) => UploadValue | Promise<UploadValue>;
 };
 declare function UploadComponent(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace UploadComponent {

package/extensions/forms/Field/Upload/Upload.js

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-const _excluded = ["id", "className", "width", "value", "label", "labelDescription", "help", "htmlAttributes", "handleChange", "handleFocus", "handleBlur", "asyncFileHandler"];
+const _excluded = ["id", "className", "width", "value", "label", "labelDescription", "help", "htmlAttributes", "handleChange", "handleFocus", "handleBlur", "fileHandler"];
 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, { useCallback, useEffect, useMemo } from 'react';
@@ -32,7 +32,12 @@ const validateRequired = (value, _ref) => {
   }
   return undefined;
 };
-const updateFileLoadingState = (files, isLoading) => {
+const updateFileLoadingState = function (files) {
+  let {
+    isLoading
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    isLoading: false
+  };
   return files.map(file => _objectSpread(_objectSpread({}, file), {}, {
     isLoading
   }));
@@ -62,7 +67,7 @@ function UploadComponent(props) {
       handleChange,
       handleFocus,
       handleBlur,
-      asyncFileHandler
+      fileHandler
     } = _useFieldProps,
     rest = _objectWithoutProperties(_useFieldProps, _excluded);
   const {
@@ -85,25 +90,29 @@ function UploadComponent(props) {
     const existingFileIds = (fileContext === null || fileContext === void 0 ? void 0 : fileContext.map(file => file.id)) || [];
     const newFiles = files.filter(file => !existingFileIds.includes(file.id));
     if (newFiles.length > 0) {
-      setFiles([...fileContext, ...updateFileLoadingState(newFiles, true)]);
-      const uploadedFiles = updateFileLoadingState(await asyncFileHandler(newFiles), false);
+      setFiles([...fileContext, ...updateFileLoadingState(newFiles, {
+        isLoading: true
+      })]);
+      const uploadedFiles = updateFileLoadingState(await fileHandler(newFiles), {
+        isLoading: false
+      });
       handleChange([...fileContext, ...uploadedFiles]);
     } else {
       handleChange(files);
     }
-  }, [fileContext, asyncFileHandler, setFiles, updateFileLoadingState]);
+  }, [fileContext, setFiles, fileHandler, handleChange]);
   const changeHandler = useCallback(_ref2 => {
     let {
       files
     } = _ref2;
     handleBlur();
     handleFocus();
-    if (asyncFileHandler) {
+    if (fileHandler) {
       handleChangeAsync(files);
     } else {
       handleChange(files);
     }
-  }, [handleBlur, handleChange, handleFocus, asyncFileHandler, fileContext]);
+  }, [handleBlur, handleFocus, fileHandler, handleChangeAsync, handleChange]);
   const width = widthProp;
   const fieldBlockProps = _objectSpread({
     id,