@dnb/eufemia 10.22.0 → 10.23.0

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

@@ -1 +1 @@
-{"version":3,"file":"Number.js","names":["React","useContext","useMemo","useCallback","InputMasked","HelpButton","Button","SharedContext","FieldBlockContext","classnames","FieldBlock","useDataValue","pickSpacingProps","clamp","useErrorMessage","NumberComponent","props","_props$width","_sharedContext$transl","_sharedContext$transl2","fieldBlockContext","sharedContext","tr","translation","Forms","currency","currencyDisplay","percent","mask","step","decimalLimit","prefix","suffix","showStepControls","errorMessages","path","required","inputErrorRequired","minimum","numberFieldErrorMinimum","maximum","numberFieldErrorMaximum","exclusiveMinimum","numberFieldErrorExclusiveMinimum","exclusiveMaximum","numberFieldErrorExclusiveMaximum","multipleOf","numberFieldErrorMultipleOf","schema","_props$schema","type","toInput","external","undefined","fromInput","_ref","value","numberValue","emptyValue","transformValue","currentValue","Number","MAX_SAFE_INTEGER","MIN_SAFE_INTEGER","maskProps","mask_options","as_currency","currency_mask","as_percent","as_number","number_mask","_objectSpread","preparedProps","width","composition","id","name","className","inputClassName","autoComplete","layout","placeholder","label","labelDescription","disabled","ariaAttributes","info","warning","error","hasError","help","size","align","handleFocus","handleBlur","handleChange","onKeyDownHandler","_ref2","key","event","persist","preventDefault","fieldBlockProps","contentClassName","forId","contentWidth","increaseProps","variant","icon","tabIndex","onClick","title","Slider","addTitle","replace","String","decreaseProps","subtractTitle","ariaParams","role","inputProps","onKeyDown","onFocus","onBlur","onChange","status","stretch","Boolean","createElement","content","_extends","asFieldset","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Number/Number.tsx"],"sourcesContent":["import React, { useContext, useMemo, useCallback } from 'react'\nimport { InputMasked, HelpButton, Button } from '../../../../components'\nimport { InputMaskedProps } from '../../../../components/InputMasked'\nimport type { InputAlign, InputSize } from '../../../../components/Input'\nimport SharedContext from '../../../../shared/Context'\nimport FieldBlockContext from '../../FieldBlock/FieldBlockContext'\nimport classnames from 'classnames'\nimport FieldBlock from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport {\n  FieldProps,\n  FieldHelpProps,\n  AllJSONSchemaVersions,\n  CustomErrorMessages,\n} from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { ButtonProps, ButtonSize } from '../../../../components/Button'\nimport { clamp } from '../../../../components/slider/SliderHelpers'\nimport useErrorMessage from '../../hooks/useErrorMessage'\n\ninterface ErrorMessages extends CustomErrorMessages {\n  required?: string\n  schema?: string\n  minimum?: string\n  maximum?: string\n  exclusiveMinimum?: string\n  exclusiveMaximum?: string\n  multipleOf?: string\n}\n\nexport type Props = FieldHelpProps &\n  FieldProps<number, undefined, ErrorMessages> & {\n    inputClassName?: string\n    currency?: InputMaskedProps['as_currency']\n    currencyDisplay?: 'code' | 'symbol' | 'narrowSymbol' | 'name'\n    percent?: InputMaskedProps['as_percent']\n    mask?: InputMaskedProps['mask']\n    step?: number\n    // Formatting\n    decimalLimit?: number\n    prefix?: string\n    suffix?: string\n    // Validation\n    minimum?: number // aka greater than or equal to\n    maximum?: number // aka less than or equal to\n    exclusiveMinimum?: number // aka greater than\n    exclusiveMaximum?: number // aka less than\n    multipleOf?: number\n    // Styling\n    size?: InputSize\n    width?: false | 'small' | 'medium' | 'large' | 'stretch'\n    align?: InputAlign\n    showStepControls?: boolean\n  }\n\nfunction NumberComponent(props: Props) {\n  const fieldBlockContext = useContext(FieldBlockContext)\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  const {\n    currency,\n    currencyDisplay,\n    percent,\n    mask,\n    step = 1,\n    decimalLimit = 12,\n    prefix,\n    suffix,\n    showStepControls,\n  } = props\n\n  const errorMessages = useErrorMessage(props.path, props.errorMessages, {\n    required: tr.inputErrorRequired,\n    minimum: tr.numberFieldErrorMinimum,\n    maximum: tr.numberFieldErrorMaximum,\n    exclusiveMinimum: tr.numberFieldErrorExclusiveMinimum,\n    exclusiveMaximum: tr.numberFieldErrorExclusiveMaximum,\n    multipleOf: tr.numberFieldErrorMultipleOf,\n  })\n\n  const schema = useMemo<AllJSONSchemaVersions>(\n    () =>\n      props.schema ?? {\n        type: 'number',\n        minimum: props.minimum,\n        maximum: props.maximum,\n        exclusiveMinimum: props.exclusiveMinimum,\n        exclusiveMaximum: props.exclusiveMaximum,\n        multipleOf: props.multipleOf,\n      },\n    [\n      props.schema,\n      props.minimum,\n      props.maximum,\n      props.exclusiveMinimum,\n      props.exclusiveMaximum,\n      props.multipleOf,\n    ]\n  )\n\n  const toInput = useCallback((external: number | undefined) => {\n    if (external === undefined) {\n      return ''\n    }\n    return external\n  }, [])\n  const fromInput = useCallback(\n    ({ value, numberValue }: { value: string; numberValue: number }) => {\n      if (value === '') {\n        return props.emptyValue\n      }\n      return numberValue\n    },\n    [props.emptyValue]\n  )\n  const transformValue = useCallback(\n    (value: number, currentValue: number) => {\n      if (\n        value > Number.MAX_SAFE_INTEGER ||\n        value < Number.MIN_SAFE_INTEGER\n      ) {\n        return currentValue\n      }\n\n      return value\n    },\n    []\n  )\n\n  const maskProps: Partial<InputMaskedProps> = useMemo(() => {\n    const mask_options = { prefix, suffix, decimalLimit }\n\n    if (currency) {\n      return {\n        as_currency: currency,\n        mask_options,\n        currency_mask: {\n          currencyDisplay,\n        },\n      }\n    }\n\n    if (percent) {\n      return {\n        as_percent: percent,\n        mask_options,\n      }\n    }\n\n    // Custom mask based on props\n    return {\n      as_number: true,\n      mask,\n      number_mask: {\n        ...mask_options,\n      },\n    }\n  }, [\n    currency,\n    currencyDisplay,\n    decimalLimit,\n    mask,\n    percent,\n    prefix,\n    suffix,\n  ])\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages,\n    schema,\n    toInput,\n    fromInput,\n    transformValue,\n    width:\n      props.width ??\n      (fieldBlockContext?.composition ? 'stretch' : 'medium'),\n  }\n\n  const {\n    id,\n    name,\n    className,\n    inputClassName,\n    autoComplete,\n    layout,\n    placeholder,\n    label,\n    labelDescription,\n    value,\n    minimum = Number.MIN_SAFE_INTEGER,\n    maximum = Number.MAX_SAFE_INTEGER,\n    disabled,\n    ariaAttributes,\n    info,\n    warning,\n    error,\n    hasError,\n    help,\n    size,\n    width,\n    align,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useDataValue(preparedProps)\n\n  const onKeyDownHandler = useCallback(\n    ({ key, event }) => {\n      if (!showStepControls) {\n        return\n      }\n\n      let numberValue = null\n\n      switch (key) {\n        case 'ArrowUp':\n          numberValue = clamp((value as number) + step, minimum, maximum)\n          break\n        case 'ArrowDown':\n          numberValue = clamp((value as number) - step, minimum, maximum)\n          break\n      }\n\n      if (numberValue !== null) {\n        event.persist()\n        event.preventDefault()\n        handleChange({ numberValue })\n      }\n    },\n    [handleChange, maximum, minimum, showStepControls, step, value]\n  )\n\n  const fieldBlockProps = {\n    className: classnames('dnb-forms-field-number', className),\n    contentClassName: classnames(\n      'dnb-forms-field-number__contents',\n      showStepControls && 'dnb-forms-field-number__contents--has-controls',\n      disabled && 'dnb-forms-field-number__contents--is-disabled',\n      hasError && 'dnb-forms-field-number__contents--has-error'\n    ),\n    forId: id,\n    layout,\n    label,\n    labelDescription,\n    info,\n    warning,\n    error,\n    disabled,\n    width:\n      width === 'stretch' || fieldBlockContext?.composition\n        ? width\n        : undefined,\n    contentWidth: width !== false ? width : undefined,\n    ...pickSpacingProps(props),\n  }\n\n  const increaseProps: ButtonProps = showStepControls && {\n    'aria-hidden': true,\n    className: 'dnb-button--control-after',\n    variant: 'secondary',\n    icon: 'add',\n    size: (size || 'small') as ButtonSize,\n    tabIndex: -1,\n    disabled: disabled || value >= maximum,\n    onClick: () => {\n      handleChange({\n        numberValue: clamp((value as number) + step, minimum, maximum),\n      })\n    },\n    title: sharedContext?.translation.Slider.addTitle?.replace(\n      '%s',\n      String(value + step)\n    ),\n  }\n\n  const decreaseProps: ButtonProps = showStepControls && {\n    ...increaseProps,\n    className: 'dnb-button--control-before',\n    icon: 'subtract',\n    size: (size || 'small') as ButtonSize,\n    disabled: disabled || value <= minimum,\n    onClick: () => {\n      handleChange({\n        numberValue: clamp((value as number) - step, minimum, maximum),\n      })\n    },\n    title: sharedContext?.translation.Slider.subtractTitle?.replace(\n      '%s',\n      String(value - step)\n    ),\n  }\n\n  const ariaParams = showStepControls && {\n    role: 'spinbutton',\n    'aria-valuemin': String(minimum),\n    'aria-valuemax': String(maximum),\n    'aria-valuenow': String(value), // without it, VO will read an invlaid value\n    'aria-valuetext': String(value), // without it, VO will read %\n  }\n\n  const inputProps = {\n    id,\n    name,\n    autoComplete,\n    className: classnames(\n      'dnb-forms-field-number__input',\n      `dnb-input--${size}`,\n      inputClassName\n    ),\n    step: showStepControls ? step : undefined,\n    placeholder,\n    value,\n    align: showStepControls ? 'center' : align,\n    ...maskProps,\n    onKeyDown: onKeyDownHandler,\n    onFocus: handleFocus,\n    onBlur: handleBlur,\n    onChange: handleChange,\n    disabled,\n    ...ariaAttributes,\n    status: hasError ? 'error' : undefined,\n    stretch: Boolean(\n      width !== undefined || fieldBlockContext?.composition\n    ),\n    suffix:\n      help && !showStepControls ? (\n        <HelpButton title={help.title}>{help.content}</HelpButton>\n      ) : undefined,\n    ...ariaParams,\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps} asFieldset={false}>\n      {showStepControls && <Button {...decreaseProps} />}\n      <InputMasked {...inputProps} />\n      {showStepControls && <Button {...increaseProps} />}\n      {help && showStepControls && (\n        <HelpButton title={help.title}>{help.content}</HelpButton>\n      )}\n    </FieldBlock>\n  )\n}\n\nNumberComponent._supportsSpacingProps = true\nexport default NumberComponent\n"],"mappings":"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"}
+{"version":3,"file":"Number.js","names":["React","useContext","useMemo","useCallback","InputMasked","HelpButton","Button","SharedContext","FieldBlockContext","classnames","FieldBlock","useFieldProps","pickSpacingProps","clamp","useErrorMessage","NumberComponent","props","_props$width","_sharedContext$transl","_sharedContext$transl2","fieldBlockContext","sharedContext","tr","translation","Forms","currency","currencyDisplay","percent","mask","step","decimalLimit","prefix","suffix","showStepControls","errorMessages","path","required","inputErrorRequired","minimum","numberFieldErrorMinimum","maximum","numberFieldErrorMaximum","exclusiveMinimum","numberFieldErrorExclusiveMinimum","exclusiveMaximum","numberFieldErrorExclusiveMaximum","multipleOf","numberFieldErrorMultipleOf","schema","_props$schema","type","toInput","external","undefined","fromInput","_ref","value","numberValue","emptyValue","transformValue","currentValue","Number","MAX_SAFE_INTEGER","MIN_SAFE_INTEGER","maskProps","mask_options","as_currency","currency_mask","as_percent","as_number","number_mask","_objectSpread","preparedProps","width","composition","id","name","className","inputClassName","autoComplete","layout","placeholder","label","labelDescription","disabled","htmlAttributes","info","warning","error","hasError","help","size","align","handleFocus","handleBlur","handleChange","onKeyDownHandler","_ref2","key","event","persist","preventDefault","fieldBlockProps","contentClassName","forId","contentWidth","increaseProps","variant","icon","tabIndex","onClick","title","Slider","addTitle","replace","String","decreaseProps","subtractTitle","ariaParams","role","inputProps","onKeyDown","onFocus","onBlur","onChange","status","stretch","Boolean","createElement","content","_extends","asFieldset","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Number/Number.tsx"],"sourcesContent":["import React, { useContext, useMemo, useCallback } from 'react'\nimport { InputMasked, HelpButton, Button } from '../../../../components'\nimport { InputMaskedProps } from '../../../../components/InputMasked'\nimport type { InputAlign, InputSize } from '../../../../components/Input'\nimport SharedContext from '../../../../shared/Context'\nimport FieldBlockContext from '../../FieldBlock/FieldBlockContext'\nimport classnames from 'classnames'\nimport FieldBlock from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport {\n  FieldProps,\n  FieldHelpProps,\n  AllJSONSchemaVersions,\n  CustomErrorMessages,\n} from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { ButtonProps, ButtonSize } from '../../../../components/Button'\nimport { clamp } from '../../../../components/slider/SliderHelpers'\nimport useErrorMessage from '../../hooks/useErrorMessage'\n\ninterface ErrorMessages extends CustomErrorMessages {\n  required?: string\n  schema?: string\n  minimum?: string\n  maximum?: string\n  exclusiveMinimum?: string\n  exclusiveMaximum?: string\n  multipleOf?: string\n}\n\nexport type Props = FieldHelpProps &\n  FieldProps<number, undefined, ErrorMessages> & {\n    inputClassName?: string\n    currency?: InputMaskedProps['as_currency']\n    currencyDisplay?: 'code' | 'symbol' | 'narrowSymbol' | 'name'\n    percent?: InputMaskedProps['as_percent']\n    mask?: InputMaskedProps['mask']\n    step?: number\n    // Formatting\n    decimalLimit?: number\n    prefix?: string\n    suffix?: string\n    // Validation\n    minimum?: number // aka greater than or equal to\n    maximum?: number // aka less than or equal to\n    exclusiveMinimum?: number // aka greater than\n    exclusiveMaximum?: number // aka less than\n    multipleOf?: number\n    // Styling\n    size?: InputSize\n    width?: false | 'small' | 'medium' | 'large' | 'stretch'\n    align?: InputAlign\n    showStepControls?: boolean\n  }\n\nfunction NumberComponent(props: Props) {\n  const fieldBlockContext = useContext(FieldBlockContext)\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  const {\n    currency,\n    currencyDisplay,\n    percent,\n    mask,\n    step = 1,\n    decimalLimit = 12,\n    prefix,\n    suffix,\n    showStepControls,\n  } = props\n\n  const errorMessages = useErrorMessage(props.path, props.errorMessages, {\n    required: tr.inputErrorRequired,\n    minimum: tr.numberFieldErrorMinimum,\n    maximum: tr.numberFieldErrorMaximum,\n    exclusiveMinimum: tr.numberFieldErrorExclusiveMinimum,\n    exclusiveMaximum: tr.numberFieldErrorExclusiveMaximum,\n    multipleOf: tr.numberFieldErrorMultipleOf,\n  })\n\n  const schema = useMemo<AllJSONSchemaVersions>(\n    () =>\n      props.schema ?? {\n        type: 'number',\n        minimum: props.minimum,\n        maximum: props.maximum,\n        exclusiveMinimum: props.exclusiveMinimum,\n        exclusiveMaximum: props.exclusiveMaximum,\n        multipleOf: props.multipleOf,\n      },\n    [\n      props.schema,\n      props.minimum,\n      props.maximum,\n      props.exclusiveMinimum,\n      props.exclusiveMaximum,\n      props.multipleOf,\n    ]\n  )\n\n  const toInput = useCallback((external: number | undefined) => {\n    if (external === undefined) {\n      return ''\n    }\n    return external\n  }, [])\n  const fromInput = useCallback(\n    ({ value, numberValue }: { value: string; numberValue: number }) => {\n      if (value === '') {\n        return props.emptyValue\n      }\n      return numberValue\n    },\n    [props.emptyValue]\n  )\n  const transformValue = useCallback(\n    (value: number, currentValue: number) => {\n      if (\n        value > Number.MAX_SAFE_INTEGER ||\n        value < Number.MIN_SAFE_INTEGER\n      ) {\n        return currentValue\n      }\n\n      return value\n    },\n    []\n  )\n\n  const maskProps: Partial<InputMaskedProps> = useMemo(() => {\n    const mask_options = { prefix, suffix, decimalLimit }\n\n    if (currency) {\n      return {\n        as_currency: currency,\n        mask_options,\n        currency_mask: {\n          currencyDisplay,\n        },\n      }\n    }\n\n    if (percent) {\n      return {\n        as_percent: percent,\n        mask_options,\n      }\n    }\n\n    // Custom mask based on props\n    return {\n      as_number: true,\n      mask,\n      number_mask: {\n        ...mask_options,\n      },\n    }\n  }, [\n    currency,\n    currencyDisplay,\n    decimalLimit,\n    mask,\n    percent,\n    prefix,\n    suffix,\n  ])\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages,\n    schema,\n    toInput,\n    fromInput,\n    transformValue,\n    width:\n      props.width ??\n      (fieldBlockContext?.composition ? 'stretch' : 'medium'),\n  }\n\n  const {\n    id,\n    name,\n    className,\n    inputClassName,\n    autoComplete,\n    layout,\n    placeholder,\n    label,\n    labelDescription,\n    value,\n    minimum = Number.MIN_SAFE_INTEGER,\n    maximum = Number.MAX_SAFE_INTEGER,\n    disabled,\n    htmlAttributes,\n    info,\n    warning,\n    error,\n    hasError,\n    help,\n    size,\n    width,\n    align,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useFieldProps(preparedProps)\n\n  const onKeyDownHandler = useCallback(\n    ({ key, event }) => {\n      if (!showStepControls) {\n        return\n      }\n\n      let numberValue = null\n\n      switch (key) {\n        case 'ArrowUp':\n          numberValue = clamp((value as number) + step, minimum, maximum)\n          break\n        case 'ArrowDown':\n          numberValue = clamp((value as number) - step, minimum, maximum)\n          break\n      }\n\n      if (numberValue !== null) {\n        event.persist()\n        event.preventDefault()\n        handleChange({ numberValue })\n      }\n    },\n    [handleChange, maximum, minimum, showStepControls, step, value]\n  )\n\n  const fieldBlockProps = {\n    className: classnames('dnb-forms-field-number', className),\n    contentClassName: classnames(\n      'dnb-forms-field-number__contents',\n      showStepControls && 'dnb-forms-field-number__contents--has-controls',\n      disabled && 'dnb-forms-field-number__contents--is-disabled',\n      hasError && 'dnb-forms-field-number__contents--has-error'\n    ),\n    forId: id,\n    layout,\n    label,\n    labelDescription,\n    info,\n    warning,\n    error,\n    disabled,\n    width:\n      width === 'stretch' || fieldBlockContext?.composition\n        ? width\n        : undefined,\n    contentWidth: width !== false ? width : undefined,\n    ...pickSpacingProps(props),\n  }\n\n  const increaseProps: ButtonProps = showStepControls && {\n    'aria-hidden': true,\n    className: 'dnb-button--control-after',\n    variant: 'secondary',\n    icon: 'add',\n    size: (size || 'small') as ButtonSize,\n    tabIndex: -1,\n    disabled: disabled || value >= maximum,\n    onClick: () => {\n      handleChange({\n        numberValue: clamp((value as number) + step, minimum, maximum),\n      })\n    },\n    title: sharedContext?.translation.Slider.addTitle?.replace(\n      '%s',\n      String(value + step)\n    ),\n  }\n\n  const decreaseProps: ButtonProps = showStepControls && {\n    ...increaseProps,\n    className: 'dnb-button--control-before',\n    icon: 'subtract',\n    size: (size || 'small') as ButtonSize,\n    disabled: disabled || value <= minimum,\n    onClick: () => {\n      handleChange({\n        numberValue: clamp((value as number) - step, minimum, maximum),\n      })\n    },\n    title: sharedContext?.translation.Slider.subtractTitle?.replace(\n      '%s',\n      String(value - step)\n    ),\n  }\n\n  const ariaParams = showStepControls && {\n    role: 'spinbutton',\n    'aria-valuemin': String(minimum),\n    'aria-valuemax': String(maximum),\n    'aria-valuenow': String(value), // without it, VO will read an invalid value\n    'aria-valuetext': String(value), // without it, VO will read %\n  }\n\n  const inputProps = {\n    id,\n    name,\n    autoComplete,\n    className: classnames(\n      'dnb-forms-field-number__input',\n      `dnb-input--${size}`,\n      inputClassName\n    ),\n    step: showStepControls ? step : undefined,\n    placeholder,\n    value,\n    align: showStepControls ? 'center' : align,\n    ...maskProps,\n    onKeyDown: onKeyDownHandler,\n    onFocus: handleFocus,\n    onBlur: handleBlur,\n    onChange: handleChange,\n    disabled,\n    ...htmlAttributes,\n    status: hasError ? 'error' : undefined,\n    stretch: Boolean(\n      width !== undefined || fieldBlockContext?.composition\n    ),\n    suffix:\n      help && !showStepControls ? (\n        <HelpButton title={help.title}>{help.content}</HelpButton>\n      ) : undefined,\n    ...ariaParams,\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps} asFieldset={false}>\n      {showStepControls && <Button {...decreaseProps} />}\n      <InputMasked {...inputProps} />\n      {showStepControls && <Button {...increaseProps} />}\n      {help && showStepControls && (\n        <HelpButton title={help.title}>{help.content}</HelpButton>\n      )}\n    </FieldBlock>\n  )\n}\n\nNumberComponent._supportsSpacingProps = true\nexport default NumberComponent\n"],"mappings":"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"}

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

@@ -18,7 +18,7 @@ export type PasswordProps = Omit<StringFieldProps, 'innerRef'> & {
      */
     size?: InputProps['size'];
     /**
-     * ElememntRef passed on to the password input element.
+     * ElementRef passed on to the password input element.
      */
     innerRef?: MutableRefObject<HTMLInputElement>;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"Password.js","names":["React","useContext","useRef","useState","useCallback","classnames","SharedContext","StringField","SubmitButton","IconView","IconViewOff","IconViewMedium","IconViewOffMedium","convertSnakeCaseProps","Password","_ref","_innerRef$current","id","className","innerRef","value","label","disabled","size","externalProps","_objectWithoutProperties","_excluded","props","Object","freeze","hidden","setHidden","sharedContext","translations","translation","Forms","ref","current","toggleVisibility","event","onShowPassword","onHidePassword","_objectSpread","focus","getAriaLabel","passwordShowLabel","passwordHideLabel","ariaLabels","showPassword","hidePassword","show_password","hide_password","ToggleVisibilityButton","createElement","type","variant","icon","skeleton","onClick","_extends","passwordLabel","submitElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Password/Password.tsx"],"sourcesContent":["import React, {\n  useContext,\n  useRef,\n  useState,\n  ElementRef,\n  MutableRefObject,\n  useCallback,\n} from 'react'\nimport classnames from 'classnames'\nimport SharedContext from '../../../../shared/Context'\nimport StringField, { Props as StringFieldProps } from '../String'\n\nimport { InputProps, SubmitButton } from '../../../../components/Input'\nimport IconView from '../../../../icons/view'\nimport IconViewOff from '../../../../icons/hide'\nimport IconViewMedium from '../../../../icons/view_medium'\nimport IconViewOffMedium from '../../../../icons/hide_medium'\nimport { convertSnakeCaseProps } from '../../../../shared/helpers/withSnakeCaseProps'\n\nexport type PasswordVisibilityEvent =\n  React.MouseEvent<HTMLButtonElement> & {\n    value: string\n  }\n\nexport type PasswordProps = Omit<StringFieldProps, 'innerRef'> & {\n  /**\n   * Fires when the input toggles to show the password.\n   */\n  onShowPassword?: (event: PasswordVisibilityEvent) => void\n  /**\n   * Fires when the input toggles to hide the password.\n   */\n  onHidePassword?: (event: PasswordVisibilityEvent) => void\n  /**\n   * The sizes you can choose is small (1.5rem), default (2rem), medium (2.5rem) and large (3rem) are supported component sizes. Defaults to default / null. Also, if you define a number like size=\"2\" then it will be forwarded as the input element attribute.\n   */\n  size?: InputProps['size']\n  /**\n   * ElememntRef passed on to the password input element.\n   */\n  innerRef?: MutableRefObject<HTMLInputElement>\n  /**\n   * @deprecated in v11, use use `locales`prop on `Provider` and override `passwordShowLabel` instead.\n   */\n  show_password?: string\n  /**\n   * @deprecated in v11, use use `locales`prop on `Provider` and override `passwordHideLabel` instead.\n   */\n  hide_password?: string\n  /**\n   * @deprecated in v11, use `onShowPassword` instead.\n   */\n  on_show_password?: (event: PasswordVisibilityEvent) => void\n  /**\n   * @deprecated in v11, use `onHidePassword` instead.\n   */\n  on_hide_password?: (event: PasswordVisibilityEvent) => void\n}\n\nfunction Password({\n  id,\n  className,\n  innerRef,\n  value,\n  label,\n  disabled,\n  size,\n  ...externalProps\n}: PasswordProps) {\n  // Object freeze used to prevent mutation of show_password and hide_password props. Freeze and convertToSnakeCase can be removed in v11.\n  const props = convertSnakeCaseProps(Object.freeze(externalProps))\n\n  const [hidden, setHidden] = useState<boolean>(true)\n\n  const sharedContext = useContext(SharedContext)\n  const translations = sharedContext.translation.Forms\n\n  const ref = useRef<ElementRef<'input'>>(innerRef?.current ?? null)\n\n  const toggleVisibility = useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      const { onShowPassword, onHidePassword } =\n        convertSnakeCaseProps(props)\n\n      const value = ref.current.value\n\n      setHidden((hidden) => {\n        hidden\n          ? onShowPassword?.({ ...event, value })\n          : onHidePassword?.({ ...event, value })\n\n        return !hidden\n      })\n\n      if (ref.current) {\n        ref.current.focus()\n      }\n    },\n    [props]\n  )\n\n  // Can be removed with v11, just used to make sure that the old show_password and hide_password are still backward compatible.\n  const getAriaLabel = useCallback(() => {\n    const { passwordShowLabel, passwordHideLabel } = translations\n\n    const ariaLabels = {\n      showPassword: passwordShowLabel,\n      hidePassword: passwordHideLabel,\n    }\n\n    if (externalProps.show_password) {\n      ariaLabels['showPassword'] = externalProps.show_password\n    }\n\n    if (externalProps.hide_password) {\n      ariaLabels['hidePassword'] = externalProps.hide_password\n    }\n\n    return ariaLabels\n  }, [\n    externalProps.show_password,\n    externalProps.hide_password,\n    translations,\n  ])\n\n  const ariaLabels = getAriaLabel()\n\n  const ToggleVisibilityButton = useCallback(() => {\n    return (\n      <SubmitButton\n        id={id + '-submit-button'}\n        type=\"button\"\n        variant=\"secondary\"\n        aria-controls={id}\n        aria-label={\n          hidden ? ariaLabels.showPassword : ariaLabels.hidePassword\n        }\n        icon={\n          size === 'large'\n            ? hidden\n              ? IconViewMedium\n              : IconViewOffMedium\n            : hidden\n            ? IconView\n            : IconViewOff\n        }\n        // status={hasError ? 'error' : undefined}\n        disabled={disabled}\n        skeleton={sharedContext.skeleton}\n        onClick={toggleVisibility}\n      />\n    )\n  }, [\n    id,\n    hidden,\n    sharedContext.skeleton,\n    disabled,\n    size,\n    toggleVisibility,\n    ariaLabels,\n  ])\n\n  return (\n    <StringField\n      id={id}\n      className={classnames('dnb-forms-field-password', className)}\n      label={label ?? sharedContext?.translation.Forms.passwordLabel}\n      type={hidden ? 'password' : 'text'}\n      value={value}\n      innerRef={ref}\n      aria-describedby={id + '-submit-button'}\n      submitElement={<ToggleVisibilityButton />}\n      disabled={disabled}\n      {...props}\n    />\n  )\n}\n\nexport default Password\n\nPassword._supportsSpacingProps = true\n"],"mappings":"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"}
+{"version":3,"file":"Password.js","names":["React","useContext","useRef","useState","useCallback","classnames","SharedContext","StringField","SubmitButton","IconView","IconViewOff","IconViewMedium","IconViewOffMedium","convertSnakeCaseProps","Password","_ref","_innerRef$current","id","className","innerRef","value","label","disabled","size","externalProps","_objectWithoutProperties","_excluded","props","Object","freeze","hidden","setHidden","sharedContext","translations","translation","Forms","ref","current","toggleVisibility","event","onShowPassword","onHidePassword","_objectSpread","focus","getAriaLabel","passwordShowLabel","passwordHideLabel","ariaLabels","showPassword","hidePassword","show_password","hide_password","ToggleVisibilityButton","createElement","type","variant","icon","skeleton","onClick","_extends","passwordLabel","submitElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Password/Password.tsx"],"sourcesContent":["import React, {\n  useContext,\n  useRef,\n  useState,\n  ElementRef,\n  MutableRefObject,\n  useCallback,\n} from 'react'\nimport classnames from 'classnames'\nimport SharedContext from '../../../../shared/Context'\nimport StringField, { Props as StringFieldProps } from '../String'\n\nimport { InputProps, SubmitButton } from '../../../../components/Input'\nimport IconView from '../../../../icons/view'\nimport IconViewOff from '../../../../icons/hide'\nimport IconViewMedium from '../../../../icons/view_medium'\nimport IconViewOffMedium from '../../../../icons/hide_medium'\nimport { convertSnakeCaseProps } from '../../../../shared/helpers/withSnakeCaseProps'\n\nexport type PasswordVisibilityEvent =\n  React.MouseEvent<HTMLButtonElement> & {\n    value: string\n  }\n\nexport type PasswordProps = Omit<StringFieldProps, 'innerRef'> & {\n  /**\n   * Fires when the input toggles to show the password.\n   */\n  onShowPassword?: (event: PasswordVisibilityEvent) => void\n  /**\n   * Fires when the input toggles to hide the password.\n   */\n  onHidePassword?: (event: PasswordVisibilityEvent) => void\n  /**\n   * The sizes you can choose is small (1.5rem), default (2rem), medium (2.5rem) and large (3rem) are supported component sizes. Defaults to default / null. Also, if you define a number like size=\"2\" then it will be forwarded as the input element attribute.\n   */\n  size?: InputProps['size']\n  /**\n   * ElementRef passed on to the password input element.\n   */\n  innerRef?: MutableRefObject<HTMLInputElement>\n  /**\n   * @deprecated in v11, use use `locales`prop on `Provider` and override `passwordShowLabel` instead.\n   */\n  show_password?: string\n  /**\n   * @deprecated in v11, use use `locales`prop on `Provider` and override `passwordHideLabel` instead.\n   */\n  hide_password?: string\n  /**\n   * @deprecated in v11, use `onShowPassword` instead.\n   */\n  on_show_password?: (event: PasswordVisibilityEvent) => void\n  /**\n   * @deprecated in v11, use `onHidePassword` instead.\n   */\n  on_hide_password?: (event: PasswordVisibilityEvent) => void\n}\n\nfunction Password({\n  id,\n  className,\n  innerRef,\n  value,\n  label,\n  disabled,\n  size,\n  ...externalProps\n}: PasswordProps) {\n  // Object freeze used to prevent mutation of show_password and hide_password props. Freeze and convertToSnakeCase can be removed in v11.\n  const props = convertSnakeCaseProps(Object.freeze(externalProps))\n\n  const [hidden, setHidden] = useState<boolean>(true)\n\n  const sharedContext = useContext(SharedContext)\n  const translations = sharedContext.translation.Forms\n\n  const ref = useRef<ElementRef<'input'>>(innerRef?.current ?? null)\n\n  const toggleVisibility = useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      const { onShowPassword, onHidePassword } =\n        convertSnakeCaseProps(props)\n\n      const value = ref.current.value\n\n      setHidden((hidden) => {\n        hidden\n          ? onShowPassword?.({ ...event, value })\n          : onHidePassword?.({ ...event, value })\n\n        return !hidden\n      })\n\n      if (ref.current) {\n        ref.current.focus()\n      }\n    },\n    [props]\n  )\n\n  // Can be removed with v11, just used to make sure that the old show_password and hide_password are still backward compatible.\n  const getAriaLabel = useCallback(() => {\n    const { passwordShowLabel, passwordHideLabel } = translations\n\n    const ariaLabels = {\n      showPassword: passwordShowLabel,\n      hidePassword: passwordHideLabel,\n    }\n\n    if (externalProps.show_password) {\n      ariaLabels['showPassword'] = externalProps.show_password\n    }\n\n    if (externalProps.hide_password) {\n      ariaLabels['hidePassword'] = externalProps.hide_password\n    }\n\n    return ariaLabels\n  }, [\n    externalProps.show_password,\n    externalProps.hide_password,\n    translations,\n  ])\n\n  const ariaLabels = getAriaLabel()\n\n  const ToggleVisibilityButton = useCallback(() => {\n    return (\n      <SubmitButton\n        id={id + '-submit-button'}\n        type=\"button\"\n        variant=\"secondary\"\n        aria-controls={id}\n        aria-label={\n          hidden ? ariaLabels.showPassword : ariaLabels.hidePassword\n        }\n        icon={\n          size === 'large'\n            ? hidden\n              ? IconViewMedium\n              : IconViewOffMedium\n            : hidden\n            ? IconView\n            : IconViewOff\n        }\n        // status={hasError ? 'error' : undefined}\n        disabled={disabled}\n        skeleton={sharedContext.skeleton}\n        onClick={toggleVisibility}\n      />\n    )\n  }, [\n    id,\n    hidden,\n    sharedContext.skeleton,\n    disabled,\n    size,\n    toggleVisibility,\n    ariaLabels,\n  ])\n\n  return (\n    <StringField\n      id={id}\n      className={classnames('dnb-forms-field-password', className)}\n      label={label ?? sharedContext?.translation.Forms.passwordLabel}\n      type={hidden ? 'password' : 'text'}\n      value={value}\n      innerRef={ref}\n      aria-describedby={id + '-submit-button'}\n      submitElement={<ToggleVisibilityButton />}\n      disabled={disabled}\n      {...props}\n    />\n  )\n}\n\nexport default Password\n\nPassword._supportsSpacingProps = true\n"],"mappings":"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"}

package/extensions/forms/Field/Password/style/dnb-password.scss

@@ -1,5 +1,5 @@
 .dnb-forms-field-password {
-  // Make sure submit element recieves red text color on error.
+  // Make sure submit element receives red text color on error.
   .dnb-input__status--error .dnb-input__submit-button__button {
     color: var(--color-fire-red);
 

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

@@ -10,7 +10,7 @@ import classnames from 'classnames';
 import countries from '../../constants/countries';
 import StringField from '../String';
 import FieldBlock from '../../FieldBlock';
-import { useDataValue } from '../../hooks';
+import { useFieldProps } from '../../hooks';
 import { pickSpacingProps } from '../../../../components/flex/utils';
 import SharedContext from '../../../../shared/Context';
 import { getCountryData, makeCountryFilterSet } from '../SelectCountry';
@@ -23,8 +23,8 @@ function PhoneNumber(props) {
   const sharedContext = useContext(SharedContext);
   const tr = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms;
   const lang = (_sharedContext$locale = sharedContext.locale) === null || _sharedContext$locale === void 0 ? void 0 : _sharedContext$locale.split('-')[0];
-  const countryCodeRef = React.useRef(null);
-  const numberRef = React.useRef(null);
+  const countryCodeRef = React.useRef(props === null || props === void 0 ? void 0 : props.emptyValue);
+  const numberRef = React.useRef(props === null || props === void 0 ? void 0 : props.emptyValue);
   const dataRef = React.useRef(null);
   const langRef = React.useRef(lang);
   const wasFilled = React.useRef(false);
@@ -98,7 +98,7 @@ function PhoneNumber(props) {
     onCountryCodeChange,
     onNumberChange,
     filterCountries = ccFilter !== 'Prioritized' ? makeCountryFilterSet(ccFilter) : undefined
-  } = useDataValue(preparedProps);
+  } = useFieldProps(preparedProps);
   function fromExternal(external) {
     const [, phoneNumber] = splitValue(external);
     if (!phoneNumber && !props.omitCountryCodeField) {
@@ -237,7 +237,7 @@ function PhoneNumber(props) {
     className: classnames('dnb-forms-field-phone-number__number', numberFieldClassName),
     type: "tel",
     autoComplete: "tel-national",
-    emptyValue: "",
+    emptyValue: emptyValue,
     layout: "vertical",
     label: label,
     placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : isDefault ? defaultPlaceholder : undefined,

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

@@ -1 +1 @@
-{"version":3,"file":"PhoneNumber.js","names":["React","useMemo","useContext","useCallback","Autocomplete","Flex","classnames","countries","StringField","FieldBlock","useDataValue","pickSpacingProps","SharedContext","getCountryData","makeCountryFilterSet","useErrorMessage","defaultCountryCode","defaultPlaceholder","defaultMask","PhoneNumber","props","_sharedContext$locale","_countryCodeRef$curre","sharedContext","tr","translation","Forms","lang","locale","split","countryCodeRef","useRef","numberRef","dataRef","langRef","wasFilled","errorMessages","path","required","phoneNumberErrorRequired","pattern","validateRequired","value","_ref","isChanged","error","countryCode","phoneNumber","splitValue","prevCountryCodeRef","current","undefined","schema","_props$schema","type","defaultProps","preparedProps","_objectSpread","fromExternal","toEvent","className","countryCodeFieldClassName","numberFieldClassName","countryCodePlaceholder","placeholder","countryCodeLabel","label","phoneNumberLabel","numberMask","ccFilter","emptyValue","info","warning","hasError","disabled","width","help","validateInitially","continuousValidation","validateUnchanged","omitCountryCodeField","handleFocus","handleBlur","handleChange","onCountryCodeChange","onNumberChange","filterCountries","external","updateCurrentDataSet","filter","country","formattCountryCode","cdc","sort","makeObject","callOnChange","_ref2","joinValue","handleCountryCodeChange","_ref3","_data$selectedKey","data","selectedKey","trim","handleNumberChange","onFocusHandler","_ref4","updateData","onTypeHandler","_ref5","_event$nativeEvent","revalidateInputValue","event","nativeEvent","cdcVal","test","find","_ref6","window","requestAnimationFrame","isDefault","includes","createElement","_extends","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","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, { useMemo, useContext, useCallback } from 'react'\nimport { Autocomplete, Flex } from '../../../../components'\nimport { InputMaskedProps } from '../../../../components/InputMasked'\nimport classnames from 'classnames'\nimport countries, { CountryType } from '../../constants/countries'\nimport StringField, { Props as StringFieldProps } from '../String'\nimport FieldBlock from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport {\n  FieldHelpProps,\n  FieldProps,\n  AllJSONSchemaVersions,\n} from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport SharedContext from '../../../../shared/Context'\nimport {\n  CountryFilterSet,\n  getCountryData,\n  makeCountryFilterSet,\n} from '../SelectCountry'\nimport useErrorMessage from '../../hooks/useErrorMessage'\n\nexport type Props = FieldHelpProps &\n  FieldProps<string, undefined | string> & {\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    omitCountryCodeField?: boolean\n    onCountryCodeChange?: (value: string | undefined) => void\n    onNumberChange?: (value: string | undefined) => void\n    countries?: CountryFilterSet\n\n    /**\n     * For internal use only.\n     *\n     * @param country\n     * @returns boolean\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 useDataValue 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 tr = sharedContext?.translation.Forms\n  const lang = sharedContext.locale?.split('-')[0]\n\n  const countryCodeRef = React.useRef(null)\n  const numberRef = React.useRef(null)\n  const dataRef = React.useRef(null)\n  const langRef = React.useRef(lang)\n  const wasFilled = React.useRef(false)\n\n  const errorMessages = useErrorMessage(props.path, props.errorMessages, {\n    required: tr.phoneNumberErrorRequired,\n    pattern: tr.phoneNumberErrorRequired,\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 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 preparedProps: Props = {\n    ...props,\n    ...defaultProps,\n    validateRequired,\n    fromExternal,\n    toEvent,\n  }\n\n  const {\n    value,\n    className,\n    countryCodeFieldClassName,\n    numberFieldClassName,\n    countryCodePlaceholder,\n    placeholder,\n    countryCodeLabel,\n    label = sharedContext?.translation.Forms.phoneNumberLabel,\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    handleFocus,\n    handleBlur,\n    handleChange,\n    onCountryCodeChange,\n    onNumberChange,\n    filterCountries = ccFilter !== 'Prioritized'\n      ? makeCountryFilterSet(ccFilter)\n      : undefined,\n  } = useDataValue(preparedProps)\n\n  function fromExternal(external: string) {\n    const [, phoneNumber] = splitValue(external)\n    if (!phoneNumber && !props.omitCountryCodeField) {\n      return countryCodeRef.current\n    }\n    return external\n  }\n\n  function toEvent(value: string) {\n    const [, phoneNumber] = splitValue(value)\n    if (!phoneNumber) {\n      return emptyValue\n    }\n    return value\n  }\n\n  const updateCurrentDataSet = useCallback(() => {\n    dataRef.current = getCountryData({\n      lang,\n      filter: !wasFilled.current\n        ? (country) =>\n            `${formattCountryCode(country.cdc)}` === countryCodeRef.current\n        : filterCountries,\n      sort: ccFilter as Extract<CountryFilterSet, 'Prioritized'>,\n      makeObject,\n    })\n  }, [lang, filterCountries, ccFilter])\n\n  const callOnChange = useCallback(\n    ({\n      countryCode = omitCountryCodeField\n        ? emptyValue\n        : countryCodeRef.current || emptyValue,\n      phoneNumber = numberRef.current || emptyValue,\n    }) => {\n      handleChange(\n        joinValue([countryCode, phoneNumber]),\n        omitCountryCodeField\n          ? { phoneNumber }\n          : { countryCode, phoneNumber }\n      )\n    },\n    [omitCountryCodeField, emptyValue, handleChange]\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 = React.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 onFocusHandler = useCallback(\n    ({ updateData }) => {\n      if (!wasFilled.current) {\n        wasFilled.current = true\n        updateCurrentDataSet()\n        updateData(dataRef.current)\n      }\n      handleFocus()\n    },\n    [handleFocus, 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 = formattCountryCode(\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  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-phone-number', className)}\n      width={omitCountryCodeField ? undefined : width}\n      info={info}\n      warning={warning}\n      error={error}\n      disabled={disabled}\n      {...pickSpacingProps(props)}\n    >\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={\n              countryCodeLabel ??\n              sharedContext?.translation.Forms.countryCodeLabel\n            }\n            data={dataRef.current}\n            value={countryCodeRef.current}\n            status={hasError ? 'error' : undefined}\n            disabled={disabled}\n            on_focus={onFocusHandler}\n            on_blur={handleBlur}\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=\"\"\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={handleFocus}\n          onBlur={handleBlur}\n          onChange={handleNumberChange}\n          value={numberRef.current}\n          info={info}\n          warning={warning}\n          error={error}\n          disabled={disabled}\n          width={omitCountryCodeField ? 'medium' : 'stretch'}\n          help={help}\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: formattCountryCode(country.cdc),\n    selected_value: `${country.iso} (${formattCountryCode(country.cdc)})`,\n    content: `${formattCountryCode(country.cdc)} ${\n      country.i18n[lang] ?? country.i18n.en\n    }`,\n  }\n}\n\nfunction formattCountryCode(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":"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"}
+{"version":3,"file":"PhoneNumber.js","names":["React","useMemo","useContext","useCallback","Autocomplete","Flex","classnames","countries","StringField","FieldBlock","useFieldProps","pickSpacingProps","SharedContext","getCountryData","makeCountryFilterSet","useErrorMessage","defaultCountryCode","defaultPlaceholder","defaultMask","PhoneNumber","props","_sharedContext$locale","_countryCodeRef$curre","sharedContext","tr","translation","Forms","lang","locale","split","countryCodeRef","useRef","emptyValue","numberRef","dataRef","langRef","wasFilled","errorMessages","path","required","phoneNumberErrorRequired","pattern","validateRequired","value","_ref","isChanged","error","countryCode","phoneNumber","splitValue","prevCountryCodeRef","current","undefined","schema","_props$schema","type","defaultProps","preparedProps","_objectSpread","fromExternal","toEvent","className","countryCodeFieldClassName","numberFieldClassName","countryCodePlaceholder","placeholder","countryCodeLabel","label","phoneNumberLabel","numberMask","ccFilter","info","warning","hasError","disabled","width","help","validateInitially","continuousValidation","validateUnchanged","omitCountryCodeField","handleFocus","handleBlur","handleChange","onCountryCodeChange","onNumberChange","filterCountries","external","updateCurrentDataSet","filter","country","formattCountryCode","cdc","sort","makeObject","callOnChange","_ref2","joinValue","handleCountryCodeChange","_ref3","_data$selectedKey","data","selectedKey","trim","handleNumberChange","onFocusHandler","_ref4","updateData","onTypeHandler","_ref5","_event$nativeEvent","revalidateInputValue","event","nativeEvent","cdcVal","test","find","_ref6","window","requestAnimationFrame","isDefault","includes","createElement","_extends","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","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, { useMemo, useContext, useCallback } from 'react'\nimport { Autocomplete, Flex } from '../../../../components'\nimport { InputMaskedProps } from '../../../../components/InputMasked'\nimport classnames from 'classnames'\nimport countries, { CountryType } from '../../constants/countries'\nimport StringField, { Props as StringFieldProps } from '../String'\nimport FieldBlock from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport {\n  FieldHelpProps,\n  FieldProps,\n  AllJSONSchemaVersions,\n} from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport SharedContext from '../../../../shared/Context'\nimport {\n  CountryFilterSet,\n  getCountryData,\n  makeCountryFilterSet,\n} from '../SelectCountry'\nimport useErrorMessage from '../../hooks/useErrorMessage'\n\nexport type Props = FieldHelpProps &\n  FieldProps<string, undefined | string> & {\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    omitCountryCodeField?: boolean\n    onCountryCodeChange?: (value: string | undefined) => void\n    onNumberChange?: (value: string | undefined) => void\n    countries?: CountryFilterSet\n\n    /**\n     * For internal use only.\n     *\n     * @param country\n     * @returns boolean\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 tr = sharedContext?.translation.Forms\n  const lang = sharedContext.locale?.split('-')[0]\n\n  const countryCodeRef = React.useRef(props?.emptyValue)\n  const numberRef = React.useRef(props?.emptyValue)\n  const dataRef = React.useRef(null)\n  const langRef = React.useRef(lang)\n  const wasFilled = React.useRef(false)\n\n  const errorMessages = useErrorMessage(props.path, props.errorMessages, {\n    required: tr.phoneNumberErrorRequired,\n    pattern: tr.phoneNumberErrorRequired,\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 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 preparedProps: Props = {\n    ...props,\n    ...defaultProps,\n    validateRequired,\n    fromExternal,\n    toEvent,\n  }\n\n  const {\n    value,\n    className,\n    countryCodeFieldClassName,\n    numberFieldClassName,\n    countryCodePlaceholder,\n    placeholder,\n    countryCodeLabel,\n    label = sharedContext?.translation.Forms.phoneNumberLabel,\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    handleFocus,\n    handleBlur,\n    handleChange,\n    onCountryCodeChange,\n    onNumberChange,\n    filterCountries = ccFilter !== 'Prioritized'\n      ? makeCountryFilterSet(ccFilter)\n      : undefined,\n  } = useFieldProps(preparedProps)\n\n  function fromExternal(external: string) {\n    const [, phoneNumber] = splitValue(external)\n    if (!phoneNumber && !props.omitCountryCodeField) {\n      return countryCodeRef.current\n    }\n    return external\n  }\n\n  function toEvent(value: string) {\n    const [, phoneNumber] = splitValue(value)\n    if (!phoneNumber) {\n      return emptyValue\n    }\n    return value\n  }\n\n  const updateCurrentDataSet = useCallback(() => {\n    dataRef.current = getCountryData({\n      lang,\n      filter: !wasFilled.current\n        ? (country) =>\n            `${formattCountryCode(country.cdc)}` === countryCodeRef.current\n        : filterCountries,\n      sort: ccFilter as Extract<CountryFilterSet, 'Prioritized'>,\n      makeObject,\n    })\n  }, [lang, filterCountries, ccFilter])\n\n  const callOnChange = useCallback(\n    ({\n      countryCode = omitCountryCodeField\n        ? emptyValue\n        : countryCodeRef.current || emptyValue,\n      phoneNumber = numberRef.current || emptyValue,\n    }) => {\n      handleChange(\n        joinValue([countryCode, phoneNumber]),\n        omitCountryCodeField\n          ? { phoneNumber }\n          : { countryCode, phoneNumber }\n      )\n    },\n    [omitCountryCodeField, emptyValue, handleChange]\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 = React.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 onFocusHandler = useCallback(\n    ({ updateData }) => {\n      if (!wasFilled.current) {\n        wasFilled.current = true\n        updateCurrentDataSet()\n        updateData(dataRef.current)\n      }\n      handleFocus()\n    },\n    [handleFocus, 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 = formattCountryCode(\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  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-phone-number', className)}\n      width={omitCountryCodeField ? undefined : width}\n      info={info}\n      warning={warning}\n      error={error}\n      disabled={disabled}\n      {...pickSpacingProps(props)}\n    >\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={\n              countryCodeLabel ??\n              sharedContext?.translation.Forms.countryCodeLabel\n            }\n            data={dataRef.current}\n            value={countryCodeRef.current}\n            status={hasError ? 'error' : undefined}\n            disabled={disabled}\n            on_focus={onFocusHandler}\n            on_blur={handleBlur}\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={handleFocus}\n          onBlur={handleBlur}\n          onChange={handleNumberChange}\n          value={numberRef.current}\n          info={info}\n          warning={warning}\n          error={error}\n          disabled={disabled}\n          width={omitCountryCodeField ? 'medium' : 'stretch'}\n          help={help}\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: formattCountryCode(country.cdc),\n    selected_value: `${country.iso} (${formattCountryCode(country.cdc)})`,\n    content: `${formattCountryCode(country.cdc)} ${\n      country.i18n[lang] ?? country.i18n.en\n    }`,\n  }\n}\n\nfunction formattCountryCode(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,IAAIC,OAAO,EAAEC,UAAU,EAAEC,WAAW,QAAQ,OAAO;AAC/D,SAASC,YAAY,EAAEC,IAAI,QAAQ,wBAAwB;AAE3D,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,SAAS,MAAuB,2BAA2B;AAClE,OAAOC,WAAW,MAAqC,WAAW;AAClE,OAAOC,UAAU,MAAM,kBAAkB;AACzC,SAASC,aAAa,QAAQ,aAAa;AAM3C,SAASC,gBAAgB,QAAQ,mCAAmC;AACpE,OAAOC,aAAa,MAAM,4BAA4B;AACtD,SAEEC,cAAc,EACdC,oBAAoB,QACf,kBAAkB;AACzB,OAAOC,eAAe,MAAM,6BAA6B;AAgCzD,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,qBAAA;EACjC,MAAMC,aAAa,GAAGrB,UAAU,CAACU,aAAa,CAAC;EAC/C,MAAMY,EAAE,GAAGD,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK;EAC3C,MAAMC,IAAI,IAAAN,qBAAA,GAAGE,aAAa,CAACK,MAAM,cAAAP,qBAAA,uBAApBA,qBAAA,CAAsBQ,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;EAEhD,MAAMC,cAAc,GAAG9B,KAAK,CAAC+B,MAAM,CAACX,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEY,UAAU,CAAC;EACtD,MAAMC,SAAS,GAAGjC,KAAK,CAAC+B,MAAM,CAACX,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEY,UAAU,CAAC;EACjD,MAAME,OAAO,GAAGlC,KAAK,CAAC+B,MAAM,CAAC,IAAI,CAAC;EAClC,MAAMI,OAAO,GAAGnC,KAAK,CAAC+B,MAAM,CAACJ,IAAI,CAAC;EAClC,MAAMS,SAAS,GAAGpC,KAAK,CAAC+B,MAAM,CAAC,KAAK,CAAC;EAErC,MAAMM,aAAa,GAAGtB,eAAe,CAACK,KAAK,CAACkB,IAAI,EAAElB,KAAK,CAACiB,aAAa,EAAE;IACrEE,QAAQ,EAAEf,EAAE,CAACgB,wBAAwB;IACrCC,OAAO,EAAEjB,EAAE,CAACgB;EACd,CAAC,CAAC;EAEF,MAAME,gBAAgB,GAAGvC,WAAW,CAClC,CAACwC,KAAa,EAAAC,IAAA,KAAqC;IAAA,IAAnC;MAAEL,QAAQ;MAAEM,SAAS;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAC5C,IAAIL,QAAQ,EAAE;MACZ,MAAM,CAACQ,WAAW,EAAEC,WAAW,CAAC,GAAGC,UAAU,CAACN,KAAK,CAAC;MAEpD,IAAII,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,MAAM,GAAGpD,OAAO,CACpB;IAAA,IAAAqD,aAAA;IAAA,QAAAA,aAAA,GACElC,KAAK,CAACiC,MAAM,cAAAC,aAAA,cAAAA,aAAA,GAAI;MACdC,IAAI,EAAE,QAAQ;MACdd,OAAO,EAAErB,KAAK,CAACqB;IACjB,CAAC;EAAA,GACH,CAACrB,KAAK,CAACiC,MAAM,EAAEjC,KAAK,CAACqB,OAAO,CAC9B,CAAC;EACD,MAAMe,YAA4B,GAAG;IACnCH,MAAM;IACNhB;EACF,CAAC;EACD,MAAMoB,aAAoB,GAAAC,aAAA,CAAAA,aAAA,CAAAA,aAAA,KACrBtC,KAAK,GACLoC,YAAY;IACfd,gBAAgB;IAChBiB,YAAY;IACZC;EAAO,EACR;EAED,MAAM;IACJjB,KAAK;IACLkB,SAAS;IACTC,yBAAyB;IACzBC,oBAAoB;IACpBC,sBAAsB;IACtBC,WAAW;IACXC,gBAAgB;IAChBC,KAAK,GAAG5C,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK,CAAC0C,gBAAgB;IACzDC,UAAU;IACV9D,SAAS,EAAE+D,QAAQ,GAAG,aAAa;IACnCtC,UAAU;IACVuC,IAAI;IACJC,OAAO;IACP1B,KAAK;IACL2B,QAAQ;IACRC,QAAQ;IACRC,KAAK,GAAG,OAAO;IACfC,IAAI;IACJrC,QAAQ;IACRsC,iBAAiB;IACjBC,oBAAoB;IACpBC,iBAAiB;IACjBC,oBAAoB;IACpBC,WAAW;IACXC,UAAU;IACVC,YAAY;IACZC,mBAAmB;IACnBC,cAAc;IACdC,eAAe,GAAGhB,QAAQ,KAAK,aAAa,GACxCxD,oBAAoB,CAACwD,QAAQ,CAAC,GAC9BlB;EACN,CAAC,GAAG1C,aAAa,CAAC+C,aAAa,CAAC;EAEhC,SAASE,YAAYA,CAAC4B,QAAgB,EAAE;IACtC,MAAM,GAAGvC,WAAW,CAAC,GAAGC,UAAU,CAACsC,QAAQ,CAAC;IAC5C,IAAI,CAACvC,WAAW,IAAI,CAAC5B,KAAK,CAAC4D,oBAAoB,EAAE;MAC/C,OAAOlD,cAAc,CAACqB,OAAO;IAC/B;IACA,OAAOoC,QAAQ;EACjB;EAEA,SAAS3B,OAAOA,CAACjB,KAAa,EAAE;IAC9B,MAAM,GAAGK,WAAW,CAAC,GAAGC,UAAU,CAACN,KAAK,CAAC;IACzC,IAAI,CAACK,WAAW,EAAE;MAChB,OAAOhB,UAAU;IACnB;IACA,OAAOW,KAAK;EACd;EAEA,MAAM6C,oBAAoB,GAAGrF,WAAW,CAAC,MAAM;IAC7C+B,OAAO,CAACiB,OAAO,GAAGtC,cAAc,CAAC;MAC/Bc,IAAI;MACJ8D,MAAM,EAAE,CAACrD,SAAS,CAACe,OAAO,GACrBuC,OAAO,IACL,GAAEC,kBAAkB,CAACD,OAAO,CAACE,GAAG,CAAE,EAAC,KAAK9D,cAAc,CAACqB,OAAO,GACjEmC,eAAe;MACnBO,IAAI,EAAEvB,QAAoD;MAC1DwB;IACF,CAAC,CAAC;EACJ,CAAC,EAAE,CAACnE,IAAI,EAAE2D,eAAe,EAAEhB,QAAQ,CAAC,CAAC;EAErC,MAAMyB,YAAY,GAAG5F,WAAW,CAC9B6F,KAAA,IAKM;IAAA,IALL;MACCjD,WAAW,GAAGiC,oBAAoB,GAC9BhD,UAAU,GACVF,cAAc,CAACqB,OAAO,IAAInB,UAAU;MACxCgB,WAAW,GAAGf,SAAS,CAACkB,OAAO,IAAInB;IACrC,CAAC,GAAAgE,KAAA;IACCb,YAAY,CACVc,SAAS,CAAC,CAAClD,WAAW,EAAEC,WAAW,CAAC,CAAC,EACrCgC,oBAAoB,GAChB;MAAEhC;IAAY,CAAC,GACf;MAAED,WAAW;MAAEC;IAAY,CACjC,CAAC;EACH,CAAC,EACD,CAACgC,oBAAoB,EAAEhD,UAAU,EAAEmD,YAAY,CACjD,CAAC;EAUDlF,OAAO,CAAC,MAAM;IACZ,MAAM,CAAC8C,WAAW,EAAEC,WAAW,CAAC,GAAGC,UAAU,CAAC7B,KAAK,CAACuB,KAAK,IAAIA,KAAK,CAAC;IACnEV,SAAS,CAACkB,OAAO,GAAGH,WAAW;IAE/B,IAAIrB,IAAI,KAAKQ,OAAO,CAACgB,OAAO,IAAI,CAACf,SAAS,CAACe,OAAO,EAAE;MAClD,IAAI,CAACrB,cAAc,CAACqB,OAAO,IAAIJ,WAAW,EAAE;QAC1CjB,cAAc,CAACqB,OAAO,GAAGJ,WAAW,IAAI/B,kBAAkB;MAC5D;MACAmB,OAAO,CAACgB,OAAO,GAAGxB,IAAI;MAEtB6D,oBAAoB,CAAC,CAAC;IACxB;EACF,CAAC,EAAE,CAAC7C,KAAK,EAAEvB,KAAK,CAACuB,KAAK,EAAEhB,IAAI,EAAE6D,oBAAoB,CAAC,CAAC;EAEpD,MAAMtC,kBAAkB,GAAGlD,KAAK,CAAC+B,MAAM,CAACD,cAAc,CAACqB,OAAO,CAAC;EAE/D,MAAM+C,uBAAuB,GAAG/F,WAAW,CACzCgG,KAAA,IAAiD;IAAA,IAAAC,iBAAA;IAAA,IAAhD;MAAEC;IAAwC,CAAC,GAAAF,KAAA;IAC1C,MAAMpD,WAAW,GAAIjB,cAAc,CAACqB,OAAO,GACzC,CAAAkD,IAAI,aAAJA,IAAI,wBAAAD,iBAAA,GAAJC,IAAI,CAAEC,WAAW,cAAAF,iBAAA,uBAAjBA,iBAAA,CAAmBG,IAAI,CAAC,CAAC,KAAIvE,UAAW;IAE1C+D,YAAY,CAAC;MAAEhD;IAAY,CAAC,CAAC;IAC7BqC,mBAAmB,aAAnBA,mBAAmB,uBAAnBA,mBAAmB,CAAGrC,WAAW,CAAC;EACpC,CAAC,EACD,CAACf,UAAU,EAAE+D,YAAY,EAAEX,mBAAmB,CAChD,CAAC;EAED,MAAMoB,kBAAkB,GAAGrG,WAAW,CACnCwC,KAAa,IAAK;IACjB,MAAMK,WAAW,GAAIf,SAAS,CAACkB,OAAO,GAAGR,KAAK,IAAIX,UAAW;IAE7D+D,YAAY,CAAC;MAAE/C;IAAY,CAAC,CAAC;IAC7BqC,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAGrC,WAAW,CAAC;EAC/B,CAAC,EACD,CAAChB,UAAU,EAAE+D,YAAY,EAAEV,cAAc,CAC3C,CAAC;EAED,MAAMoB,cAAc,GAAGtG,WAAW,CAChCuG,KAAA,IAAoB;IAAA,IAAnB;MAAEC;IAAW,CAAC,GAAAD,KAAA;IACb,IAAI,CAACtE,SAAS,CAACe,OAAO,EAAE;MACtBf,SAAS,CAACe,OAAO,GAAG,IAAI;MACxBqC,oBAAoB,CAAC,CAAC;MACtBmB,UAAU,CAACzE,OAAO,CAACiB,OAAO,CAAC;IAC7B;IACA8B,WAAW,CAAC,CAAC;EACf,CAAC,EACD,CAACA,WAAW,EAAEO,oBAAoB,CACpC,CAAC;EAED,MAAMoB,aAAa,GAAGzG,WAAW,CAC/B0G,KAAA,IAAwD;IAAA,IAAAC,kBAAA;IAAA,IAAvD;MAAEnE,KAAK;MAAEgE,UAAU;MAAEI,oBAAoB;MAAEC;IAAM,CAAC,GAAAH,KAAA;IAEjD,IAAI,QAAOG,KAAK,aAALA,KAAK,wBAAAF,kBAAA,GAALE,KAAK,CAAEC,WAAW,cAAAH,kBAAA,uBAAlBA,kBAAA,CAAoBT,IAAI,MAAK,WAAW,EAAE;MACnD,MAAMa,MAAM,GAAG,mBAAmB,CAACC,IAAI,CAACxE,KAAK,CAAC,GAC1CM,UAAU,CAACN,KAAK,CAAC,CAAC,CAAC,CAAC,GACpBA,KAAK;MACT,MAAM+C,OAAO,GAAGnF,SAAS,CAAC6G,IAAI,CAACC,KAAA;QAAA,IAAC;UAAEzB;QAAI,CAAC,GAAAyB,KAAA;QAAA,OAAKzB,GAAG,KAAKsB,MAAM;MAAA,EAAC;MAC3D,IAAIxB,OAAO,aAAPA,OAAO,eAAPA,OAAO,CAAEE,GAAG,EAAE;QAChB,MAAM7C,WAAW,GAAIjB,cAAc,CAACqB,OAAO,GAAGwC,kBAAkB,CAC9DD,OAAO,CAACE,GACV,CAAE;QAEFJ,oBAAoB,CAAC,CAAC;QACtBmB,UAAU,CAACzE,OAAO,CAACiB,OAAO,CAAC;QAC3B4C,YAAY,CAAC;UAAEhD;QAAY,CAAC,CAAC;QAI7BuE,MAAM,CAACC,qBAAqB,CAAC,MAAM;UACjCR,oBAAoB,CAAC,CAAC;QACxB,CAAC,CAAC;MACJ;IACF;EACF,CAAC,EACD,CAAChB,YAAY,EAAEP,oBAAoB,CACrC,CAAC;EAED,MAAMgC,SAAS,IAAAlG,qBAAA,GAAGQ,cAAc,CAACqB,OAAO,cAAA7B,qBAAA,uBAAtBA,qBAAA,CAAwBmG,QAAQ,CAACzG,kBAAkB,CAAC;EAEtE,OACEhB,KAAA,CAAA0H,aAAA,CAACjH,UAAU,EAAAkH,QAAA;IACT9D,SAAS,EAAEvD,UAAU,CAAC,8BAA8B,EAAEuD,SAAS,CAAE;IACjEc,KAAK,EAAEK,oBAAoB,GAAG5B,SAAS,GAAGuB,KAAM;IAChDJ,IAAI,EAAEA,IAAK;IACXC,OAAO,EAAEA,OAAQ;IACjB1B,KAAK,EAAEA,KAAM;IACb4B,QAAQ,EAAEA;EAAS,GACf/D,gBAAgB,CAACS,KAAK,CAAC,GAE3BpB,KAAA,CAAA0H,aAAA,CAACrH,IAAI,CAACuH,UAAU;IAACC,KAAK,EAAC;EAAU,GAC9B,CAAC7C,oBAAoB,IACpBhF,KAAA,CAAA0H,aAAA,CAACtH,YAAY;IACXyD,SAAS,EAAEvD,UAAU,CACnB,4CAA4C,EAC5CwD,yBACF,CAAE;IACFgE,IAAI,EAAC,OAAO;IACZ7D,WAAW,EAAED,sBAAuB;IACpC+D,eAAe,EAAC,UAAU;IAC1B5D,KAAK,EACHD,gBAAgB,aAAhBA,gBAAgB,cAAhBA,gBAAgB,GAChB3C,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK,CAACwC,gBAClC;IACDmC,IAAI,EAAEnE,OAAO,CAACiB,OAAQ;IACtBR,KAAK,EAAEb,cAAc,CAACqB,OAAQ;IAC9B6E,MAAM,EAAEvD,QAAQ,GAAG,OAAO,GAAGrB,SAAU;IACvCsB,QAAQ,EAAEA,QAAS;IACnBuD,QAAQ,EAAExB,cAAe;IACzByB,OAAO,EAAEhD,UAAW;IACpBiD,SAAS,EAAEjC,uBAAwB;IACnCkC,OAAO,EAAExB,aAAc;IACvByB,iBAAiB;IACjBC,cAAc;IACdC,cAAc;IACdC,YAAY,EAAC,kBAAkB;IAC/BC,YAAY,EAAErH,KAAK,CAACsH,WAAY;IAChCC,OAAO,EAAEhE,KAAK,KAAK;EAAU,CAC9B,CACF,EAED3E,KAAA,CAAA0H,aAAA,CAAClH,WAAW;IACVqD,SAAS,EAAEvD,UAAU,CACnB,sCAAsC,EACtCyD,oBACF,CAAE;IACFR,IAAI,EAAC,KAAK;IACViF,YAAY,EAAC,cAAc;IAC3BxG,UAAU,EAAEA,UAAW;IACvB4G,MAAM,EAAC,UAAU;IACjBzE,KAAK,EAAEA,KAAM;IACbF,WAAW,EACTA,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAKuD,SAAS,GAAGvG,kBAAkB,GAAGmC,SAClD;IACDyF,IAAI,EACFxE,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAKmD,SAAS,GAAGtG,WAAW,GAAG4H,KAAK,CAAC,EAAE,CAAC,CAACC,IAAI,CAAC,IAAI,CAC7D;IACDC,OAAO,EAAE/D,WAAY;IACrBgE,MAAM,EAAE/D,UAAW;IACnBgE,QAAQ,EAAE1C,kBAAmB;IAC7B7D,KAAK,EAAEV,SAAS,CAACkB,OAAQ;IACzBoB,IAAI,EAAEA,IAAK;IACXC,OAAO,EAAEA,OAAQ;IACjB1B,KAAK,EAAEA,KAAM;IACb4B,QAAQ,EAAEA,QAAS;IACnBC,KAAK,EAAEK,oBAAoB,GAAG,QAAQ,GAAG,SAAU;IACnDJ,IAAI,EAAEA,IAAK;IACXrC,QAAQ,EAAEA,QAAS;IACnBF,aAAa,EAAEA,aAAc;IAC7BwC,iBAAiB,EAAEA,iBAAkB;IACrCC,oBAAoB,EAAEA,oBAAqB;IAC3CC,iBAAiB,EAAEA,iBAAkB;IACrCoE,SAAS,EAAC;EAAK,CAChB,CACc,CACP,CAAC;AAEjB;AAEA,SAASrD,UAAUA,CAACJ,OAAoB,EAAE/D,IAAY,EAAE;EAAA,IAAAyH,kBAAA;EACtD,OAAO;IACL9C,WAAW,EAAEX,kBAAkB,CAACD,OAAO,CAACE,GAAG,CAAC;IAC5CyD,cAAc,EAAG,GAAE3D,OAAO,CAAC4D,GAAI,KAAI3D,kBAAkB,CAACD,OAAO,CAACE,GAAG,CAAE,GAAE;IACrE2D,OAAO,EAAG,GAAE5D,kBAAkB,CAACD,OAAO,CAACE,GAAG,CAAE,IAAC,CAAAwD,kBAAA,GAC3C1D,OAAO,CAAC8D,IAAI,CAAC7H,IAAI,CAAC,cAAAyH,kBAAA,cAAAA,kBAAA,GAAI1D,OAAO,CAAC8D,IAAI,CAACC,EACpC;EACH,CAAC;AACH;AAEA,SAAS9D,kBAAkBA,CAAChD,KAAa,EAAE;EACzC,OAAQ,IAAGA,KAAM,EAAC;AACpB;AAEA,SAASM,UAAUA,CAACN,KAAa,EAAE;EACjC,OAAO,CACL,OAAOA,KAAK,KAAK,QAAQ,GACrBA,KAAK,CAAC+G,KAAK,CAAC,oBAAoB,CAAC,GACjC,CAACtG,SAAS,EAAE,EAAE,EAAE,EAAE,CAAC,EACvBuG,KAAK,CAAC,CAAC,CAAC;AACZ;AAEA,SAAS1D,SAASA,CAAC2D,KAAoB,EAAE;EACvC,OAAOA,KAAK,CAACnE,MAAM,CAACoE,OAAO,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC;AACxC;AAEA3I,WAAW,CAAC4I,qBAAqB,GAAG,IAAI;AACxC,eAAe5I,WAAW"}

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

@@ -38,7 +38,8 @@ function PostalCodeAndCity(props) {
     placeholder: (_postalCode$placehold = postalCode.placeholder) !== null && _postalCode$placehold !== void 0 ? _postalCode$placehold : '0000',
     width: false,
     inputClassName: "dnb-forms-field-postal-code-and-city__postal-code-input",
-    inputMode: "numeric"
+    inputMode: "numeric",
+    autoComplete: "postal-code"
   })), React.createElement(StringField, _extends({}, city, {
     className: classnames('dnb-forms-field-postal-code-and-city__city', city.className),
     label: (_city$label = city.label) !== null && _city$label !== void 0 ? _city$label : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.cityLabel,
@@ -46,6 +47,7 @@ function PostalCodeAndCity(props) {
       required: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.cityErrorRequired
     }, city.errorMessages),
     width: "stretch",
+    autoComplete: "address-level2",
     help: help
   })));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"PostalCodeAndCity.js","names":["React","useContext","classnames","SharedContext","FieldBlock","StringField","PostalCodeAndCity","props","_postalCode$pattern","_postalCode$label","_postalCode$placehold","_city$label","sharedContext","postalCode","city","help","width","fieldBlockProps","_objectWithoutProperties","_excluded","createElement","_extends","className","composition","pattern","mask","label","translation","Forms","postalCodeLabel","errorMessages","_objectSpread","required","postalCodeErrorRequired","postalCodeErrorPattern","placeholder","inputClassName","inputMode","cityLabel","cityErrorRequired","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport SharedContext from '../../../../shared/Context'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport StringField, { Props as StringFieldProps } from '../String'\nimport { FieldHelpProps } from '../../types'\n\nexport type Props = FieldHelpProps &\n  Omit<FieldBlockProps, 'children'> &\n  Record<'postalCode' | 'city', StringFieldProps>\n\nfunction PostalCodeAndCity(props: Props) {\n  const sharedContext = useContext(SharedContext)\n\n  const {\n    postalCode = {},\n    city = {},\n    help,\n    width = 'large',\n    ...fieldBlockProps\n  } = props\n\n  return (\n    <FieldBlock\n      className={classnames(\n        'dnb-forms-field-postal-code-and-city',\n        props.className\n      )}\n      {...fieldBlockProps}\n      width={width}\n      composition\n    >\n      <StringField\n        {...postalCode}\n        pattern={postalCode.pattern ?? '^[0-9]{4}$'}\n        mask={[/\\d/, /\\d/, /\\d/, /\\d/]}\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__postal-code',\n          postalCode.className\n        )}\n        label={\n          postalCode.label ??\n          sharedContext?.translation.Forms.postalCodeLabel\n        }\n        errorMessages={{\n          required:\n            sharedContext?.translation.Forms.postalCodeErrorRequired,\n          pattern: sharedContext?.translation.Forms.postalCodeErrorPattern,\n          ...postalCode.errorMessages,\n        }}\n        placeholder={postalCode.placeholder ?? '0000'}\n        width={false}\n        inputClassName=\"dnb-forms-field-postal-code-and-city__postal-code-input\"\n        inputMode=\"numeric\"\n      />\n      <StringField\n        {...city}\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__city',\n          city.className\n        )}\n        label={city.label ?? sharedContext?.translation.Forms.cityLabel}\n        errorMessages={{\n          required: sharedContext?.translation.Forms.cityErrorRequired,\n          ...city.errorMessages,\n        }}\n        width=\"stretch\"\n        help={help}\n      />\n    </FieldBlock>\n  )\n}\n\nPostalCodeAndCity._supportsSpacingProps = true\nexport default PostalCodeAndCity\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,aAAa,MAAM,4BAA4B;AACtD,OAAOC,UAAU,MAAoC,kBAAkB;AACvE,OAAOC,WAAW,MAAqC,WAAW;AAOlE,SAASC,iBAAiBA,CAACC,KAAY,EAAE;EAAA,IAAAC,mBAAA,EAAAC,iBAAA,EAAAC,qBAAA,EAAAC,WAAA;EACvC,MAAMC,aAAa,GAAGX,UAAU,CAACE,aAAa,CAAC;EAE/C,MAAM;MACJU,UAAU,GAAG,CAAC,CAAC;MACfC,IAAI,GAAG,CAAC,CAAC;MACTC,IAAI;MACJC,KAAK,GAAG;IAEV,CAAC,GAAGT,KAAK;IADJU,eAAe,GAAAC,wBAAA,CAChBX,KAAK,EAAAY,SAAA;EAET,OACEnB,KAAA,CAAAoB,aAAA,CAAChB,UAAU,EAAAiB,QAAA;IACTC,SAAS,EAAEpB,UAAU,CACnB,sCAAsC,EACtCK,KAAK,CAACe,SACR;EAAE,GACEL,eAAe;IACnBD,KAAK,EAAEA,KAAM;IACbO,WAAW;EAAA,IAEXvB,KAAA,CAAAoB,aAAA,CAACf,WAAW,EAAAgB,QAAA,KACNR,UAAU;IACdW,OAAO,GAAAhB,mBAAA,GAAEK,UAAU,CAACW,OAAO,cAAAhB,mBAAA,cAAAA,mBAAA,GAAI,YAAa;IAC5CiB,IAAI,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAE;IAC/BH,SAAS,EAAEpB,UAAU,CACnB,mDAAmD,EACnDW,UAAU,CAACS,SACb,CAAE;IACFI,KAAK,GAAAjB,iBAAA,GACHI,UAAU,CAACa,KAAK,cAAAjB,iBAAA,cAAAA,iBAAA,GAChBG,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEe,WAAW,CAACC,KAAK,CAACC,eAClC;IACDC,aAAa,EAAAC,aAAA;MACXC,QAAQ,EACNpB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEe,WAAW,CAACC,KAAK,CAACK,uBAAuB;MAC1DT,OAAO,EAAEZ,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEe,WAAW,CAACC,KAAK,CAACM;IAAsB,GAC7DrB,UAAU,CAACiB,aAAa,CAC3B;IACFK,WAAW,GAAAzB,qBAAA,GAAEG,UAAU,CAACsB,WAAW,cAAAzB,qBAAA,cAAAA,qBAAA,GAAI,MAAO;IAC9CM,KAAK,EAAE,KAAM;IACboB,cAAc,EAAC,yDAAyD;IACxEC,SAAS,EAAC;EAAS,EACpB,CAAC,EACFrC,KAAA,CAAAoB,aAAA,CAACf,WAAW,EAAAgB,QAAA,KACNP,IAAI;IACRQ,SAAS,EAAEpB,UAAU,CACnB,4CAA4C,EAC5CY,IAAI,CAACQ,SACP,CAAE;IACFI,KAAK,GAAAf,WAAA,GAAEG,IAAI,CAACY,KAAK,cAAAf,WAAA,cAAAA,WAAA,GAAIC,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEe,WAAW,CAACC,KAAK,CAACU,SAAU;IAChER,aAAa,EAAAC,aAAA;MACXC,QAAQ,EAAEpB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEe,WAAW,CAACC,KAAK,CAACW;IAAiB,GACzDzB,IAAI,CAACgB,aAAa,CACrB;IACFd,KAAK,EAAC,SAAS;IACfD,IAAI,EAAEA;EAAK,EACZ,CACS,CAAC;AAEjB;AAEAT,iBAAiB,CAACkC,qBAAqB,GAAG,IAAI;AAC9C,eAAelC,iBAAiB"}
+{"version":3,"file":"PostalCodeAndCity.js","names":["React","useContext","classnames","SharedContext","FieldBlock","StringField","PostalCodeAndCity","props","_postalCode$pattern","_postalCode$label","_postalCode$placehold","_city$label","sharedContext","postalCode","city","help","width","fieldBlockProps","_objectWithoutProperties","_excluded","createElement","_extends","className","composition","pattern","mask","label","translation","Forms","postalCodeLabel","errorMessages","_objectSpread","required","postalCodeErrorRequired","postalCodeErrorPattern","placeholder","inputClassName","inputMode","autoComplete","cityLabel","cityErrorRequired","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport SharedContext from '../../../../shared/Context'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport StringField, { Props as StringFieldProps } from '../String'\nimport { FieldHelpProps } from '../../types'\n\nexport type Props = FieldHelpProps &\n  Omit<FieldBlockProps, 'children'> &\n  Record<'postalCode' | 'city', StringFieldProps>\n\nfunction PostalCodeAndCity(props: Props) {\n  const sharedContext = useContext(SharedContext)\n\n  const {\n    postalCode = {},\n    city = {},\n    help,\n    width = 'large',\n    ...fieldBlockProps\n  } = props\n\n  return (\n    <FieldBlock\n      className={classnames(\n        'dnb-forms-field-postal-code-and-city',\n        props.className\n      )}\n      {...fieldBlockProps}\n      width={width}\n      composition\n    >\n      <StringField\n        {...postalCode}\n        pattern={postalCode.pattern ?? '^[0-9]{4}$'}\n        mask={[/\\d/, /\\d/, /\\d/, /\\d/]}\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__postal-code',\n          postalCode.className\n        )}\n        label={\n          postalCode.label ??\n          sharedContext?.translation.Forms.postalCodeLabel\n        }\n        errorMessages={{\n          required:\n            sharedContext?.translation.Forms.postalCodeErrorRequired,\n          pattern: sharedContext?.translation.Forms.postalCodeErrorPattern,\n          ...postalCode.errorMessages,\n        }}\n        placeholder={postalCode.placeholder ?? '0000'}\n        width={false}\n        inputClassName=\"dnb-forms-field-postal-code-and-city__postal-code-input\"\n        inputMode=\"numeric\"\n        autoComplete=\"postal-code\"\n      />\n      <StringField\n        {...city}\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__city',\n          city.className\n        )}\n        label={city.label ?? sharedContext?.translation.Forms.cityLabel}\n        errorMessages={{\n          required: sharedContext?.translation.Forms.cityErrorRequired,\n          ...city.errorMessages,\n        }}\n        width=\"stretch\"\n        autoComplete=\"address-level2\"\n        help={help}\n      />\n    </FieldBlock>\n  )\n}\n\nPostalCodeAndCity._supportsSpacingProps = true\nexport default PostalCodeAndCity\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,aAAa,MAAM,4BAA4B;AACtD,OAAOC,UAAU,MAAoC,kBAAkB;AACvE,OAAOC,WAAW,MAAqC,WAAW;AAOlE,SAASC,iBAAiBA,CAACC,KAAY,EAAE;EAAA,IAAAC,mBAAA,EAAAC,iBAAA,EAAAC,qBAAA,EAAAC,WAAA;EACvC,MAAMC,aAAa,GAAGX,UAAU,CAACE,aAAa,CAAC;EAE/C,MAAM;MACJU,UAAU,GAAG,CAAC,CAAC;MACfC,IAAI,GAAG,CAAC,CAAC;MACTC,IAAI;MACJC,KAAK,GAAG;IAEV,CAAC,GAAGT,KAAK;IADJU,eAAe,GAAAC,wBAAA,CAChBX,KAAK,EAAAY,SAAA;EAET,OACEnB,KAAA,CAAAoB,aAAA,CAAChB,UAAU,EAAAiB,QAAA;IACTC,SAAS,EAAEpB,UAAU,CACnB,sCAAsC,EACtCK,KAAK,CAACe,SACR;EAAE,GACEL,eAAe;IACnBD,KAAK,EAAEA,KAAM;IACbO,WAAW;EAAA,IAEXvB,KAAA,CAAAoB,aAAA,CAACf,WAAW,EAAAgB,QAAA,KACNR,UAAU;IACdW,OAAO,GAAAhB,mBAAA,GAAEK,UAAU,CAACW,OAAO,cAAAhB,mBAAA,cAAAA,mBAAA,GAAI,YAAa;IAC5CiB,IAAI,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAE;IAC/BH,SAAS,EAAEpB,UAAU,CACnB,mDAAmD,EACnDW,UAAU,CAACS,SACb,CAAE;IACFI,KAAK,GAAAjB,iBAAA,GACHI,UAAU,CAACa,KAAK,cAAAjB,iBAAA,cAAAA,iBAAA,GAChBG,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEe,WAAW,CAACC,KAAK,CAACC,eAClC;IACDC,aAAa,EAAAC,aAAA;MACXC,QAAQ,EACNpB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEe,WAAW,CAACC,KAAK,CAACK,uBAAuB;MAC1DT,OAAO,EAAEZ,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEe,WAAW,CAACC,KAAK,CAACM;IAAsB,GAC7DrB,UAAU,CAACiB,aAAa,CAC3B;IACFK,WAAW,GAAAzB,qBAAA,GAAEG,UAAU,CAACsB,WAAW,cAAAzB,qBAAA,cAAAA,qBAAA,GAAI,MAAO;IAC9CM,KAAK,EAAE,KAAM;IACboB,cAAc,EAAC,yDAAyD;IACxEC,SAAS,EAAC,SAAS;IACnBC,YAAY,EAAC;EAAa,EAC3B,CAAC,EACFtC,KAAA,CAAAoB,aAAA,CAACf,WAAW,EAAAgB,QAAA,KACNP,IAAI;IACRQ,SAAS,EAAEpB,UAAU,CACnB,4CAA4C,EAC5CY,IAAI,CAACQ,SACP,CAAE;IACFI,KAAK,GAAAf,WAAA,GAAEG,IAAI,CAACY,KAAK,cAAAf,WAAA,cAAAA,WAAA,GAAIC,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEe,WAAW,CAACC,KAAK,CAACW,SAAU;IAChET,aAAa,EAAAC,aAAA;MACXC,QAAQ,EAAEpB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEe,WAAW,CAACC,KAAK,CAACY;IAAiB,GACzD1B,IAAI,CAACgB,aAAa,CACrB;IACFd,KAAK,EAAC,SAAS;IACfsB,YAAY,EAAC,gBAAgB;IAC7BvB,IAAI,EAAEA;EAAK,EACZ,CACS,CAAC;AAEjB;AAEAT,iBAAiB,CAACmC,qBAAqB,GAAG,IAAI;AAC9C,eAAenC,iBAAiB"}

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

@@ -10,7 +10,7 @@ import SharedContext from '../../../../shared/Context';
 import { Autocomplete, HelpButton } from '../../../../components';
 import { pickSpacingProps } from '../../../../components/flex/utils';
 import countries, { prioritizedCountries } from '../../constants/countries';
-import { useDataValue } from '../../hooks';
+import { useFieldProps } from '../../hooks';
 import FieldBlock from '../../FieldBlock';
 import useErrorMessage from '../../hooks/useErrorMessage';
 function SelectCountry(props) {
@@ -38,14 +38,14 @@ function SelectCountry(props) {
     value,
     width = 'large',
     help,
-    ariaAttributes,
+    htmlAttributes,
     handleFocus,
     handleBlur,
     handleChange,
     updateValue,
     forceUpdate,
     filterCountries = ccFilter !== 'Prioritized' ? makeCountryFilterSet(ccFilter) : undefined
-  } = useDataValue(preparedProps);
+  } = useFieldProps(preparedProps);
   const dataRef = React.useRef(null);
   const langRef = React.useRef(lang);
   const wasFilled = React.useRef(false);
@@ -148,7 +148,7 @@ function SelectCountry(props) {
     }, help.content) : undefined,
     autoComplete: "country-name",
     no_animation: props.noAnimation
-  }, ariaAttributes)));
+  }, htmlAttributes)));
 }
 export function getCountryData() {
   let {

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

@@ -1 +1 @@
-{"version":3,"file":"SelectCountry.js","names":["React","useCallback","useContext","useMemo","classnames","SharedContext","Autocomplete","HelpButton","pickSpacingProps","countries","prioritizedCountries","useDataValue","FieldBlock","useErrorMessage","SelectCountry","props","_sharedContext$locale","sharedContext","tr","translation","Forms","lang","locale","split","errorMessages","path","required","selectCountryErrorRequired","defaultProps","preparedProps","_objectSpread","className","placeholder","selectCountryPlaceholder","label","selectCountryLabel","ccFilter","info","warning","error","hasError","disabled","value","width","help","ariaAttributes","handleFocus","handleBlur","handleChange","updateValue","forceUpdate","filterCountries","makeCountryFilterSet","undefined","dataRef","useRef","langRef","wasFilled","isLangChange","current","getCountryData","filter","country","iso","sort","window","requestAnimationFrame","handleCountryChange","_ref","data","newValue","selectedKey","find","_ref2","fillData","onFocusHandler","_ref3","updateData","onTypeHandler","_ref4","_event$nativeEvent","currentValue","setHidden","event","nativeEvent","search","toLowerCase","_ref5","i18n","Object","values","some","s","includes","createElement","_extends","label_direction","input_icon","on_show","on_focus","on_blur","on_change","on_type","stretch","status","show_submit_button","suffix","title","content","autoComplete","no_animation","noAnimation","makeObject","_country$i18n$lang","en","arguments","length","_ref6","_ref7","a","b","indexA","indexOf","indexB","priorityA","priorityB","localeCompare","map","_country$regions","regions","continent","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/SelectCountry/SelectCountry.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo } from 'react'\nimport classnames from 'classnames'\nimport SharedContext from '../../../../shared/Context'\nimport { Autocomplete, HelpButton } from '../../../../components'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport countries, {\n  prioritizedCountries,\n  CountryType,\n} from '../../constants/countries'\nimport { useDataValue } from '../../hooks'\nimport { FieldHelpProps, FieldProps } from '../../types'\nimport FieldBlock from '../../FieldBlock'\nimport useErrorMessage from '../../hooks/useErrorMessage'\n\nexport type CountryFilterSet =\n  | 'Scandinavia'\n  | 'Nordic'\n  | 'Europe'\n  | 'Prioritized'\n\nexport type Props = FieldHelpProps &\n  FieldProps<string, undefined | string> & {\n    countries?: CountryFilterSet\n\n    // Styling\n    width?: false | 'small' | 'medium' | 'large' | 'stretch'\n\n    /**\n     * For internal use only.\n     *\n     * @param country\n     * @returns boolean\n     */\n    filterCountries?: (country: CountryType) => boolean\n\n    /**\n     * For internal testing purposes\n     */\n    noAnimation?: boolean\n  }\n\nfunction SelectCountry(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n  const lang = sharedContext.locale?.split('-')[0]\n\n  const errorMessages = useErrorMessage(props.path, props.errorMessages, {\n    required: tr.selectCountryErrorRequired,\n  })\n\n  const defaultProps: Partial<Props> = {\n    errorMessages,\n  }\n  const preparedProps: Props = {\n    ...defaultProps,\n    ...props,\n  }\n\n  const {\n    className,\n    placeholder = sharedContext?.translation.Forms\n      .selectCountryPlaceholder,\n    label = sharedContext?.translation.Forms.selectCountryLabel,\n    countries: ccFilter = 'Prioritized',\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    value,\n    width = 'large',\n    help,\n    ariaAttributes,\n    handleFocus,\n    handleBlur,\n    handleChange,\n    updateValue,\n    forceUpdate,\n    filterCountries = ccFilter !== 'Prioritized'\n      ? makeCountryFilterSet(ccFilter)\n      : undefined,\n  } = useDataValue(preparedProps)\n\n  const dataRef = React.useRef(null)\n  const langRef = React.useRef(lang)\n  const wasFilled = React.useRef(false)\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 data set when value changes.\n   */\n  useMemo(() => {\n    const isLangChange = lang !== langRef.current\n\n    if (isLangChange || !wasFilled.current) {\n      langRef.current = lang\n      dataRef.current = getCountryData({\n        lang,\n        filter: !wasFilled.current\n          ? (country) => country.iso === props.value\n          : filterCountries,\n        sort: ccFilter as Extract<CountryFilterSet, 'Prioritized'>,\n      })\n\n      // To force Autocomplete to re-evaluate the internal data\n      if (isLangChange && props.value && typeof window !== 'undefined') {\n        updateValue(null)\n        window.requestAnimationFrame(() => {\n          updateValue(props.value)\n        })\n      }\n    }\n  }, [lang, filterCountries, ccFilter, updateValue, props.value])\n\n  const handleCountryChange = useCallback(\n    ({ data }: { data: { selectedKey: string } }) => {\n      const newValue = data?.selectedKey\n      const country = countries.find(({ iso }) => newValue === iso)\n      if (country?.iso) {\n        handleChange(country.iso, country)\n      }\n    },\n    [handleChange]\n  )\n\n  const fillData = useCallback(() => {\n    if (!wasFilled.current) {\n      wasFilled.current = true\n      dataRef.current = getCountryData({\n        lang: langRef.current,\n        filter: filterCountries,\n        sort: ccFilter as Extract<CountryFilterSet, 'Prioritized'>,\n      })\n      forceUpdate()\n    }\n  }, [ccFilter, filterCountries, forceUpdate])\n\n  const onFocusHandler = useCallback(\n    ({ updateData }) => {\n      fillData()\n      updateData(dataRef.current)\n      handleFocus()\n    },\n    [fillData, handleFocus]\n  )\n\n  const onTypeHandler = useCallback(\n    ({ value: currentValue, setHidden, event }) => {\n      // Handle browser autofill/autocomplete\n      if (typeof event?.nativeEvent?.data === 'undefined') {\n        const search = currentValue.toLowerCase()\n        const country = countries.find(({ i18n }) =>\n          Object.values(i18n).some((s) => s.toLowerCase().includes(search))\n        )\n        if (country?.iso) {\n          setHidden()\n          handleChange(country.iso, country)\n        }\n      }\n    },\n    [handleChange]\n  )\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-select-country', className)}\n      width={width}\n      info={info}\n      warning={warning}\n      error={error}\n      {...pickSpacingProps(props)}\n    >\n      <Autocomplete\n        placeholder={placeholder}\n        label_direction=\"vertical\"\n        label={label}\n        input_icon={false}\n        data={dataRef.current}\n        value={value}\n        disabled={disabled}\n        on_show={fillData}\n        on_focus={onFocusHandler}\n        on_blur={handleBlur}\n        on_change={handleCountryChange}\n        on_type={onTypeHandler}\n        stretch\n        status={hasError ? 'error' : undefined}\n        show_submit_button\n        suffix={\n          help ? (\n            <HelpButton title={help.title}>{help.content}</HelpButton>\n          ) : undefined\n        }\n        autoComplete=\"country-name\"\n        no_animation={props.noAnimation}\n        {...ariaAttributes}\n      />\n    </FieldBlock>\n  )\n}\n\ntype GetCountryData = {\n  lang?: string\n  filter?: Props['filterCountries']\n  sort?: Extract<CountryFilterSet, 'Prioritized'>\n  makeObject?: (\n    country: CountryType,\n    lang: string\n  ) => {\n    selectedKey: string\n    selected_value?: string\n    content: string\n  }\n}\n\nexport function getCountryData({\n  lang = 'no',\n  filter = null,\n  sort = null,\n  makeObject = (country: CountryType, lang: string) => {\n    const content = country.i18n[lang] ?? country.i18n.en\n    return {\n      selectedKey: country.iso,\n      content,\n    }\n  },\n}: GetCountryData = {}) {\n  return countries\n    .filter((country) => {\n      if (typeof filter === 'function') {\n        return filter(country)\n      }\n\n      return !filter\n    })\n    .sort(({ i18n: a }, { i18n: b }) => {\n      if (sort === 'Prioritized') {\n        const indexA = prioritizedCountries.indexOf(a['en'])\n        const indexB = prioritizedCountries.indexOf(b['en'])\n\n        const priorityA = indexA !== -1\n        const priorityB = indexB !== -1\n\n        if (priorityA && priorityB) {\n          return indexA - indexB\n        } else if (priorityA) {\n          return -1\n        } else if (priorityB) {\n          return 1\n        }\n      }\n\n      return a[lang].localeCompare(b[lang])\n    })\n    .map((country) => makeObject(country, lang))\n}\n\nexport function makeCountryFilterSet(ccFilter: CountryFilterSet) {\n  return (country: CountryType) => {\n    switch (ccFilter) {\n      case 'Scandinavia':\n      case 'Nordic':\n        return country.regions?.includes(ccFilter)\n      case 'Europe':\n        return country.continent.includes(ccFilter)\n    }\n    return true\n  }\n}\n\nSelectCountry._supportsSpacingProps = true\nexport default SelectCountry\n"],"mappings":"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"}
+{"version":3,"file":"SelectCountry.js","names":["React","useCallback","useContext","useMemo","classnames","SharedContext","Autocomplete","HelpButton","pickSpacingProps","countries","prioritizedCountries","useFieldProps","FieldBlock","useErrorMessage","SelectCountry","props","_sharedContext$locale","sharedContext","tr","translation","Forms","lang","locale","split","errorMessages","path","required","selectCountryErrorRequired","defaultProps","preparedProps","_objectSpread","className","placeholder","selectCountryPlaceholder","label","selectCountryLabel","ccFilter","info","warning","error","hasError","disabled","value","width","help","htmlAttributes","handleFocus","handleBlur","handleChange","updateValue","forceUpdate","filterCountries","makeCountryFilterSet","undefined","dataRef","useRef","langRef","wasFilled","isLangChange","current","getCountryData","filter","country","iso","sort","window","requestAnimationFrame","handleCountryChange","_ref","data","newValue","selectedKey","find","_ref2","fillData","onFocusHandler","_ref3","updateData","onTypeHandler","_ref4","_event$nativeEvent","currentValue","setHidden","event","nativeEvent","search","toLowerCase","_ref5","i18n","Object","values","some","s","includes","createElement","_extends","label_direction","input_icon","on_show","on_focus","on_blur","on_change","on_type","stretch","status","show_submit_button","suffix","title","content","autoComplete","no_animation","noAnimation","makeObject","_country$i18n$lang","en","arguments","length","_ref6","_ref7","a","b","indexA","indexOf","indexB","priorityA","priorityB","localeCompare","map","_country$regions","regions","continent","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/SelectCountry/SelectCountry.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo } from 'react'\nimport classnames from 'classnames'\nimport SharedContext from '../../../../shared/Context'\nimport { Autocomplete, HelpButton } from '../../../../components'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport countries, {\n  prioritizedCountries,\n  CountryType,\n} from '../../constants/countries'\nimport { useFieldProps } from '../../hooks'\nimport { FieldHelpProps, FieldProps } from '../../types'\nimport FieldBlock from '../../FieldBlock'\nimport useErrorMessage from '../../hooks/useErrorMessage'\n\nexport type CountryFilterSet =\n  | 'Scandinavia'\n  | 'Nordic'\n  | 'Europe'\n  | 'Prioritized'\n\nexport type Props = FieldHelpProps &\n  FieldProps<string, undefined | string> & {\n    countries?: CountryFilterSet\n\n    // Styling\n    width?: false | 'small' | 'medium' | 'large' | 'stretch'\n\n    /**\n     * For internal use only.\n     *\n     * @param country\n     * @returns boolean\n     */\n    filterCountries?: (country: CountryType) => boolean\n\n    /**\n     * For internal testing purposes\n     */\n    noAnimation?: boolean\n  }\n\nfunction SelectCountry(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n  const lang = sharedContext.locale?.split('-')[0]\n\n  const errorMessages = useErrorMessage(props.path, props.errorMessages, {\n    required: tr.selectCountryErrorRequired,\n  })\n\n  const defaultProps: Partial<Props> = {\n    errorMessages,\n  }\n  const preparedProps: Props = {\n    ...defaultProps,\n    ...props,\n  }\n\n  const {\n    className,\n    placeholder = sharedContext?.translation.Forms\n      .selectCountryPlaceholder,\n    label = sharedContext?.translation.Forms.selectCountryLabel,\n    countries: ccFilter = 'Prioritized',\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    value,\n    width = 'large',\n    help,\n    htmlAttributes,\n    handleFocus,\n    handleBlur,\n    handleChange,\n    updateValue,\n    forceUpdate,\n    filterCountries = ccFilter !== 'Prioritized'\n      ? makeCountryFilterSet(ccFilter)\n      : undefined,\n  } = useFieldProps(preparedProps)\n\n  const dataRef = React.useRef(null)\n  const langRef = React.useRef(lang)\n  const wasFilled = React.useRef(false)\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 data set when value changes.\n   */\n  useMemo(() => {\n    const isLangChange = lang !== langRef.current\n\n    if (isLangChange || !wasFilled.current) {\n      langRef.current = lang\n      dataRef.current = getCountryData({\n        lang,\n        filter: !wasFilled.current\n          ? (country) => country.iso === props.value\n          : filterCountries,\n        sort: ccFilter as Extract<CountryFilterSet, 'Prioritized'>,\n      })\n\n      // To force Autocomplete to re-evaluate the internal data\n      if (isLangChange && props.value && typeof window !== 'undefined') {\n        updateValue(null)\n        window.requestAnimationFrame(() => {\n          updateValue(props.value)\n        })\n      }\n    }\n  }, [lang, filterCountries, ccFilter, updateValue, props.value])\n\n  const handleCountryChange = useCallback(\n    ({ data }: { data: { selectedKey: string } }) => {\n      const newValue = data?.selectedKey\n      const country = countries.find(({ iso }) => newValue === iso)\n      if (country?.iso) {\n        handleChange(country.iso, country)\n      }\n    },\n    [handleChange]\n  )\n\n  const fillData = useCallback(() => {\n    if (!wasFilled.current) {\n      wasFilled.current = true\n      dataRef.current = getCountryData({\n        lang: langRef.current,\n        filter: filterCountries,\n        sort: ccFilter as Extract<CountryFilterSet, 'Prioritized'>,\n      })\n      forceUpdate()\n    }\n  }, [ccFilter, filterCountries, forceUpdate])\n\n  const onFocusHandler = useCallback(\n    ({ updateData }) => {\n      fillData()\n      updateData(dataRef.current)\n      handleFocus()\n    },\n    [fillData, handleFocus]\n  )\n\n  const onTypeHandler = useCallback(\n    ({ value: currentValue, setHidden, event }) => {\n      // Handle browser autofill/autocomplete\n      if (typeof event?.nativeEvent?.data === 'undefined') {\n        const search = currentValue.toLowerCase()\n        const country = countries.find(({ i18n }) =>\n          Object.values(i18n).some((s) => s.toLowerCase().includes(search))\n        )\n        if (country?.iso) {\n          setHidden()\n          handleChange(country.iso, country)\n        }\n      }\n    },\n    [handleChange]\n  )\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-select-country', className)}\n      width={width}\n      info={info}\n      warning={warning}\n      error={error}\n      {...pickSpacingProps(props)}\n    >\n      <Autocomplete\n        placeholder={placeholder}\n        label_direction=\"vertical\"\n        label={label}\n        input_icon={false}\n        data={dataRef.current}\n        value={value}\n        disabled={disabled}\n        on_show={fillData}\n        on_focus={onFocusHandler}\n        on_blur={handleBlur}\n        on_change={handleCountryChange}\n        on_type={onTypeHandler}\n        stretch\n        status={hasError ? 'error' : undefined}\n        show_submit_button\n        suffix={\n          help ? (\n            <HelpButton title={help.title}>{help.content}</HelpButton>\n          ) : undefined\n        }\n        autoComplete=\"country-name\"\n        no_animation={props.noAnimation}\n        {...htmlAttributes}\n      />\n    </FieldBlock>\n  )\n}\n\ntype GetCountryData = {\n  lang?: string\n  filter?: Props['filterCountries']\n  sort?: Extract<CountryFilterSet, 'Prioritized'>\n  makeObject?: (\n    country: CountryType,\n    lang: string\n  ) => {\n    selectedKey: string\n    selected_value?: string\n    content: string\n  }\n}\n\nexport function getCountryData({\n  lang = 'no',\n  filter = null,\n  sort = null,\n  makeObject = (country: CountryType, lang: string) => {\n    const content = country.i18n[lang] ?? country.i18n.en\n    return {\n      selectedKey: country.iso,\n      content,\n    }\n  },\n}: GetCountryData = {}) {\n  return countries\n    .filter((country) => {\n      if (typeof filter === 'function') {\n        return filter(country)\n      }\n\n      return !filter\n    })\n    .sort(({ i18n: a }, { i18n: b }) => {\n      if (sort === 'Prioritized') {\n        const indexA = prioritizedCountries.indexOf(a['en'])\n        const indexB = prioritizedCountries.indexOf(b['en'])\n\n        const priorityA = indexA !== -1\n        const priorityB = indexB !== -1\n\n        if (priorityA && priorityB) {\n          return indexA - indexB\n        } else if (priorityA) {\n          return -1\n        } else if (priorityB) {\n          return 1\n        }\n      }\n\n      return a[lang].localeCompare(b[lang])\n    })\n    .map((country) => makeObject(country, lang))\n}\n\nexport function makeCountryFilterSet(ccFilter: CountryFilterSet) {\n  return (country: CountryType) => {\n    switch (ccFilter) {\n      case 'Scandinavia':\n      case 'Nordic':\n        return country.regions?.includes(ccFilter)\n      case 'Europe':\n        return country.continent.includes(ccFilter)\n    }\n    return true\n  }\n}\n\nSelectCountry._supportsSpacingProps = true\nexport default SelectCountry\n"],"mappings":"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"}

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

@@ -11,7 +11,7 @@ import { ToggleButton, Dropdown, Radio, HelpButton } from '../../../../component
 import classnames from 'classnames';
 import { makeUniqueId } from '../../../../shared/component-helper';
 import OptionField from '../Option';
-import { useDataValue } from '../../hooks';
+import { useFieldProps } from '../../hooks';
 import { FormError } from '../../types';
 import { pickSpacingProps } from '../../../../components/flex/utils';
 import FieldBlock from '../../FieldBlock';
@@ -35,11 +35,11 @@ function Selection(props) {
     help,
     emptyValue,
     width = 'large',
-    ariaAttributes,
+    htmlAttributes,
     setHasFocus,
     handleChange,
     children
-  } = useDataValue(props);
+  } = useFieldProps(props);
   const handleDropdownChange = useCallback(_ref => {
     let {
       data: {
@@ -123,8 +123,8 @@ function Selection(props) {
             label: variant === 'radio' ? title : undefined,
             text: variant === 'button' ? title : undefined,
             value: String(value !== null && value !== void 0 ? value : ''),
-            status: status
-          }, ariaAttributes, rest));
+            status: (hasError || status) && 'error'
+          }, htmlAttributes, rest));
         })));
       }
     case 'dropdown':
@@ -154,7 +154,7 @@ function Selection(props) {
           value: String(value !== null && value !== void 0 ? value : ''),
           status: (hasError || status) && 'error',
           disabled: disabled
-        }, ariaAttributes, {
+        }, htmlAttributes, {
           data: optionsData,
           suffix: help ? React.createElement(HelpButton, {
             title: help.title