@dnb/eufemia 10.17.0 → 10.18.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","classnames","FieldBlock","useDataValue","pickSpacingProps","clamp","NumberComponent","props","_props$width","_sharedContext$transl","_sharedContext$transl2","sharedContext","tr","translation","Forms","currency","percent","mask","step","thousandSeparator","decimalSymbol","decimalLimit","prefix","suffix","showStepControls","errorMessages","_objectSpread","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","as_currency","as_percent","as_number","number_mask","includeThousandsSeparator","thousandsSeparatorSymbol","preparedProps","size","width","id","name","className","autoComplete","inputClassName","layout","placeholder","label","labelDescription","labelSecondary","disabled","info","warning","error","help","align","handleFocus","handleBlur","handleChange","onKeyDownHandler","_ref2","key","event","persist","preventDefault","fieldBlockProps","contentClassName","forId","contentsWidth","increaseProps","variant","icon","convertInputSizeToButtonSize","tabIndex","onClick","title","Slider","addTitle","replace","String","decreaseProps","subtractTitle","ariaParams","role","inputProps","onKeyDown","onFocus","onBlur","onChange","status","stretch","createElement","contents","_extends","asFieldset","inputSize","buttonSize","indexOf","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Number/Number.tsx"],"sourcesContent":["import React, { useContext, useMemo, useCallback } from 'react'\nimport { JSONSchema7 } from 'json-schema'\nimport { InputMasked, HelpButton, Button } from '../../../../components'\nimport { InputMaskedProps } from '../../../../components/InputMasked'\nimport type { InputAlign, InputSize } from '../../../../components/Input'\nimport SharedContext from '../../../../shared/Context'\nimport classnames from 'classnames'\nimport FieldBlock from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport { FieldProps, FieldHelpProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { ButtonProps, ButtonSize } from '../../../../components/Button'\nimport { clamp } from '../../../../components/slider/SliderHelpers'\n\ninterface ErrorMessages {\n  required?: string\n  schema?: string\n  minimum?: string\n  maximum?: string\n  exclusiveMinimum?: string\n  exclusiveMaximum?: string\n  multipleOf?: string\n}\n\nexport type Props = FieldHelpProps &\n  FieldProps<number, undefined, ErrorMessages> & {\n    inputClassName?: string\n    currency?: InputMaskedProps['as_currency']\n    percent?: InputMaskedProps['as_percent']\n    mask?: InputMaskedProps['mask']\n    step?: number\n    // Formatting\n    thousandSeparator?: string | true\n    decimalSymbol?: string\n    decimalLimit?: number\n    prefix?: string\n    suffix?: string\n    // Validation\n    minimum?: number // aka greater than or equal to\n    maximum?: number // aka less than or equal to\n    exclusiveMinimum?: number // aka greater than\n    exclusiveMaximum?: number // aka less than\n    multipleOf?: number\n    // Styling\n    size?: InputSize\n    width?: false | 'small' | 'medium' | 'large' | 'stretch'\n    align?: InputAlign\n    showStepControls?: boolean\n  }\n\nfunction NumberComponent(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  const {\n    currency,\n    percent,\n    mask,\n    step = 1,\n    thousandSeparator,\n    decimalSymbol,\n    decimalLimit = 12,\n    prefix,\n    suffix,\n    showStepControls,\n  } = props\n\n  const errorMessages = useMemo(\n    () => ({\n      required: tr.inputErrorRequired,\n      minimum: tr.numberFieldErrorMinimum,\n      maximum: tr.numberFieldErrorMaximum,\n      exclusiveMinimum: tr.numberFieldErrorExclusiveMinimum,\n      exclusiveMaximum: tr.numberFieldErrorExclusiveMaximum,\n      multipleOf: tr.numberFieldErrorMultipleOf,\n      ...props.errorMessages,\n    }),\n    [tr, props.errorMessages]\n  )\n  const schema = useMemo<JSONSchema7>(\n    () =>\n      props.schema ?? {\n        type: 'number',\n        minimum: props.minimum,\n        maximum: props.maximum,\n        exclusiveMinimum: props.exclusiveMinimum,\n        exclusiveMaximum: props.exclusiveMaximum,\n        multipleOf: props.multipleOf,\n      },\n    [\n      props.schema,\n      props.minimum,\n      props.maximum,\n      props.exclusiveMinimum,\n      props.exclusiveMaximum,\n      props.multipleOf,\n    ]\n  )\n\n  const toInput = useCallback((external: number | undefined) => {\n    if (external === undefined) {\n      return ''\n    }\n    return external\n  }, [])\n  const fromInput = useCallback(\n    ({ value, numberValue }: { value: string; numberValue: number }) => {\n      if (value === '') {\n        return 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    if (currency) {\n      return {\n        as_currency: currency,\n      }\n    }\n    if (percent) {\n      return {\n        as_percent: percent,\n      }\n    }\n    // Custom mask based on props\n    return {\n      as_number: true,\n      mask,\n      number_mask: {\n        decimalLimit,\n        decimalSymbol,\n        includeThousandsSeparator: thousandSeparator !== undefined,\n        thousandsSeparatorSymbol:\n          thousandSeparator === true ? ' ' : thousandSeparator,\n        prefix,\n        suffix,\n      },\n    }\n  }, [\n    currency,\n    percent,\n    mask,\n    decimalLimit,\n    decimalSymbol,\n    thousandSeparator,\n    prefix,\n    suffix,\n  ])\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages,\n    schema,\n    toInput,\n    fromInput,\n    transformValue,\n    size:\n      props.size !== 'small' && props.size !== 'large'\n        ? 'medium'\n        : props.size,\n    width: props.width ?? 'medium',\n  }\n\n  const {\n    id,\n    name,\n    className,\n    autoComplete,\n    inputClassName,\n    layout,\n    placeholder,\n    label,\n    labelDescription,\n    labelSecondary,\n    value,\n    minimum = Number.MIN_SAFE_INTEGER,\n    maximum = Number.MAX_SAFE_INTEGER,\n    disabled,\n    info,\n    warning,\n    error,\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      error && 'dnb-forms-field-number__contents--has-error'\n    ),\n    forId: id,\n    layout,\n    label,\n    labelDescription,\n    labelSecondary,\n    info,\n    warning,\n    error,\n    disabled,\n    width: width === 'stretch' ? width : undefined,\n    contentsWidth: 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: convertInputSizeToButtonSize(size),\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    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,\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    status: error ? 'error' : undefined,\n    stretch: width !== undefined,\n    suffix:\n      help && !showStepControls ? (\n        <HelpButton title={help.title}>{help.contents}</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.contents}</HelpButton>\n      )}\n    </FieldBlock>\n  )\n}\n\nconst convertInputSizeToButtonSize = (\n  inputSize: InputSize\n): ButtonSize => {\n  const buttonSize =\n    ['small', 'medium', 'large'].indexOf(inputSize as string) > -1\n      ? inputSize\n      : 'medium'\n  return buttonSize as ButtonSize\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","classnames","FieldBlock","useDataValue","pickSpacingProps","clamp","NumberComponent","props","_props$width","_sharedContext$transl","_sharedContext$transl2","sharedContext","tr","translation","Forms","currency","percent","mask","step","thousandSeparator","decimalSymbol","decimalLimit","prefix","suffix","showStepControls","errorMessages","_objectSpread","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","as_currency","as_percent","as_number","number_mask","includeThousandsSeparator","thousandsSeparatorSymbol","preparedProps","width","id","name","className","autoComplete","inputClassName","layout","placeholder","label","disabled","info","warning","error","help","size","align","handleFocus","handleBlur","handleChange","onKeyDownHandler","_ref2","key","event","persist","preventDefault","fieldBlockProps","contentClassName","forId","contentsWidth","increaseProps","variant","icon","convertInputSizeToButtonSize","tabIndex","onClick","title","Slider","addTitle","replace","String","decreaseProps","subtractTitle","ariaParams","role","inputProps","onKeyDown","onFocus","onBlur","onChange","status","stretch","createElement","contents","_extends","asFieldset","inputSize","buttonSize","indexOf","_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 classnames from 'classnames'\nimport FieldBlock from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport { FieldProps, FieldHelpProps, JSONSchema } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { ButtonProps, ButtonSize } from '../../../../components/Button'\nimport { clamp } from '../../../../components/slider/SliderHelpers'\n\ninterface ErrorMessages {\n  required?: string\n  schema?: string\n  minimum?: string\n  maximum?: string\n  exclusiveMinimum?: string\n  exclusiveMaximum?: string\n  multipleOf?: string\n}\n\nexport type Props = FieldHelpProps &\n  FieldProps<number, undefined, ErrorMessages> & {\n    inputClassName?: string\n    currency?: InputMaskedProps['as_currency']\n    percent?: InputMaskedProps['as_percent']\n    mask?: InputMaskedProps['mask']\n    step?: number\n    // Formatting\n    thousandSeparator?: string | true\n    decimalSymbol?: string\n    decimalLimit?: number\n    prefix?: string\n    suffix?: string\n    // Validation\n    minimum?: number // aka greater than or equal to\n    maximum?: number // aka less than or equal to\n    exclusiveMinimum?: number // aka greater than\n    exclusiveMaximum?: number // aka less than\n    multipleOf?: number\n    // Styling\n    size?: InputSize\n    width?: false | 'small' | 'medium' | 'large' | 'stretch'\n    align?: InputAlign\n    showStepControls?: boolean\n  }\n\nfunction NumberComponent(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  const {\n    currency,\n    percent,\n    mask,\n    step = 1,\n    thousandSeparator,\n    decimalSymbol,\n    decimalLimit = 12,\n    prefix,\n    suffix,\n    showStepControls,\n  } = props\n\n  const errorMessages = useMemo(\n    () => ({\n      required: tr.inputErrorRequired,\n      minimum: tr.numberFieldErrorMinimum,\n      maximum: tr.numberFieldErrorMaximum,\n      exclusiveMinimum: tr.numberFieldErrorExclusiveMinimum,\n      exclusiveMaximum: tr.numberFieldErrorExclusiveMaximum,\n      multipleOf: tr.numberFieldErrorMultipleOf,\n      ...props.errorMessages,\n    }),\n    [tr, props.errorMessages]\n  )\n  const schema = useMemo<JSONSchema>(\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    if (currency) {\n      return {\n        as_currency: currency,\n      }\n    }\n    if (percent) {\n      return {\n        as_percent: percent,\n      }\n    }\n    // Custom mask based on props\n    return {\n      as_number: true,\n      mask,\n      number_mask: {\n        decimalLimit,\n        decimalSymbol,\n        includeThousandsSeparator: thousandSeparator !== undefined,\n        thousandsSeparatorSymbol:\n          thousandSeparator === true ? ' ' : thousandSeparator,\n        prefix,\n        suffix,\n      },\n    }\n  }, [\n    currency,\n    percent,\n    mask,\n    decimalLimit,\n    decimalSymbol,\n    thousandSeparator,\n    prefix,\n    suffix,\n  ])\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages,\n    schema,\n    toInput,\n    fromInput,\n    transformValue,\n    width: props.width ?? 'medium',\n  }\n\n  const {\n    id,\n    name,\n    className,\n    autoComplete,\n    inputClassName,\n    layout,\n    placeholder,\n    label,\n    value,\n    minimum = Number.MIN_SAFE_INTEGER,\n    maximum = Number.MAX_SAFE_INTEGER,\n    disabled,\n    info,\n    warning,\n    error,\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      error && 'dnb-forms-field-number__contents--has-error'\n    ),\n    forId: id,\n    layout,\n    label,\n    info,\n    warning,\n    error,\n    disabled,\n    width: width === 'stretch' ? width : undefined,\n    contentsWidth: 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: convertInputSizeToButtonSize(size),\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    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,\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    status: error ? 'error' : undefined,\n    stretch: width !== undefined,\n    suffix:\n      help && !showStepControls ? (\n        <HelpButton title={help.title}>{help.contents}</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.contents}</HelpButton>\n      )}\n    </FieldBlock>\n  )\n}\n\nconst convertInputSizeToButtonSize = (\n  inputSize: InputSize\n): ButtonSize => {\n  const buttonSize =\n    ['small', 'medium', 'large'].indexOf(inputSize as string) > -1\n      ? inputSize\n      : 'medium'\n  return buttonSize as ButtonSize\n}\n\nNumberComponent._supportsSpacingProps = true\nexport default NumberComponent\n"],"mappings":"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"}

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

@@ -60,6 +60,7 @@ function PhoneNumber(props) {
     toEvent
   });
   const {
+    value,
     className,
     countryCodeFieldClassName,
     numberFieldClassName,
@@ -85,7 +86,6 @@ function PhoneNumber(props) {
     handleFocus,
     handleBlur,
     handleChange,
-    updateValue,
     onCountryCodeChange,
     onNumberChange,
     filterCountries = ccFilter !== 'Prioritized' ? makeCountryFilterSet(ccFilter) : undefined
@@ -117,16 +117,15 @@ function PhoneNumber(props) {
       countryCode = omitCountryCodeField ? emptyValue : countryCodeRef.current || emptyValue,
       phoneNumber = numberRef.current || emptyValue
     } = _ref2;
-    updateValue('invalidate');
     handleChange(joinValue([countryCode, phoneNumber]), omitCountryCodeField ? {
       phoneNumber
     } : {
       countryCode,
       phoneNumber
     });
-  }, [omitCountryCodeField, emptyValue, updateValue, handleChange]);
+  }, [omitCountryCodeField, emptyValue, handleChange]);
   useMemo(() => {
-    const [countryCode, phoneNumber] = splitValue(props.value);
+    const [countryCode, phoneNumber] = splitValue(props.value || value);
     numberRef.current = phoneNumber;
     if (lang !== langRef.current || !wasFilled.current) {
       if (!countryCodeRef.current || countryCode) {
@@ -135,7 +134,7 @@ function PhoneNumber(props) {
       langRef.current = lang;
       updateCurrentDataSet();
     }
-  }, [props.value, lang, updateCurrentDataSet]);
+  }, [value, props.value, lang, updateCurrentDataSet]);
   const prevCountryCodeRef = React.useRef(countryCodeRef.current);
   const handleCountryCodeChange = useCallback(_ref3 => {
     var _data$selectedKey;

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

@@ -1 +1 @@
-{"version":3,"file":"PhoneNumber.js","names":["React","useMemo","useContext","useCallback","Autocomplete","Flex","classnames","countries","StringComponent","useDataValue","FieldBlock","pickSpacingProps","SharedContext","getCountryData","makeCountryFilterSet","defaultCountryCode","defaultPlaceholder","defaultMask","PhoneNumber","props","_sharedContext$locale","_countryCodeRef$curre","sharedContext","tr","translation","Forms","lang","locale","split","countryCodeRef","useRef","numberRef","dataRef","langRef","wasFilled","errorMessages","_objectSpread","required","phoneNumberErrorRequired","pattern","validateRequired","value","_ref","isChanged","error","countryCode","phoneNumber","splitValue","prevCountryCodeRef","current","undefined","defaultProps","preparedProps","fromExternal","toEvent","className","countryCodeFieldClassName","numberFieldClassName","countryCodePlaceholder","placeholder","countryCodeLabel","label","phoneNumberLabel","numberMask","ccFilter","emptyValue","info","warning","disabled","width","help","validateInitially","continuousValidation","validateUnchanged","omitCountryCodeField","handleFocus","handleBlur","handleChange","updateValue","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","type","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 StringComponent, { Props as InputProps } from '../String'\nimport { useDataValue } from '../../hooks'\nimport FieldBlock from '../../FieldBlock'\nimport { FieldHelpProps, FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport SharedContext from '../../../../shared/Context'\nimport {\n  CountryFilterSet,\n  getCountryData,\n  makeCountryFilterSet,\n} from '../SelectCountry'\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?: InputProps['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 = useMemo(\n    () => ({\n      required: tr.phoneNumberErrorRequired,\n      pattern: tr.phoneNumberErrorRequired,\n      ...props?.errorMessages,\n    }),\n    [tr, props.errorMessages]\n  )\n\n  const validateRequired = useCallback(\n    (value: string, { required, isChanged, error }) => {\n      if (required) {\n        const [countryCode, phoneNumber] = splitValue(value)\n\n        if (countryCode !== prevCountryCodeRef.current) {\n          if (countryCode) {\n            prevCountryCodeRef.current = countryCode\n          }\n          return undefined\n        }\n\n        if (isChanged && !phoneNumber) {\n          return error\n        }\n      }\n\n      return undefined\n    },\n    []\n  )\n\n  const defaultProps: Partial<Props> = {\n    errorMessages,\n  }\n  const preparedProps: Props = {\n    ...defaultProps,\n    ...props,\n    validateRequired,\n    fromExternal,\n    toEvent,\n  }\n\n  const {\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    disabled,\n    width = 'large',\n    help,\n    pattern,\n    required,\n    validateInitially,\n    continuousValidation,\n    validateUnchanged,\n    omitCountryCodeField,\n    handleFocus,\n    handleBlur,\n    handleChange,\n    updateValue,\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      /**\n       * To ensure, we actually call onChange every time the cc value changes,\n       * even if the value is undefined\n       */\n      updateValue('invalidate')\n\n      handleChange(\n        joinValue([countryCode, phoneNumber]),\n        omitCountryCodeField\n          ? { phoneNumber }\n          : { countryCode, phoneNumber }\n      )\n    },\n    [omitCountryCodeField, emptyValue, updateValue, 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)\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  }, [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={error ? '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        <StringComponent\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          pattern={pattern}\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","StringComponent","useDataValue","FieldBlock","pickSpacingProps","SharedContext","getCountryData","makeCountryFilterSet","defaultCountryCode","defaultPlaceholder","defaultMask","PhoneNumber","props","_sharedContext$locale","_countryCodeRef$curre","sharedContext","tr","translation","Forms","lang","locale","split","countryCodeRef","useRef","numberRef","dataRef","langRef","wasFilled","errorMessages","_objectSpread","required","phoneNumberErrorRequired","pattern","validateRequired","value","_ref","isChanged","error","countryCode","phoneNumber","splitValue","prevCountryCodeRef","current","undefined","defaultProps","preparedProps","fromExternal","toEvent","className","countryCodeFieldClassName","numberFieldClassName","countryCodePlaceholder","placeholder","countryCodeLabel","label","phoneNumberLabel","numberMask","ccFilter","emptyValue","info","warning","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","type","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 StringComponent, { Props as InputProps } from '../String'\nimport { useDataValue } from '../../hooks'\nimport FieldBlock from '../../FieldBlock'\nimport { FieldHelpProps, FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport SharedContext from '../../../../shared/Context'\nimport {\n  CountryFilterSet,\n  getCountryData,\n  makeCountryFilterSet,\n} from '../SelectCountry'\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?: InputProps['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 = useMemo(\n    () => ({\n      required: tr.phoneNumberErrorRequired,\n      pattern: tr.phoneNumberErrorRequired,\n      ...props?.errorMessages,\n    }),\n    [tr, props.errorMessages]\n  )\n\n  const validateRequired = useCallback(\n    (value: string, { required, isChanged, error }) => {\n      if (required) {\n        const [countryCode, phoneNumber] = splitValue(value)\n\n        if (countryCode !== prevCountryCodeRef.current) {\n          if (countryCode) {\n            prevCountryCodeRef.current = countryCode\n          }\n          return undefined\n        }\n\n        if (isChanged && !phoneNumber) {\n          return error\n        }\n      }\n\n      return undefined\n    },\n    []\n  )\n\n  const defaultProps: Partial<Props> = {\n    errorMessages,\n  }\n  const preparedProps: Props = {\n    ...defaultProps,\n    ...props,\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    disabled,\n    width = 'large',\n    help,\n    pattern,\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={error ? '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        <StringComponent\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          pattern={pattern}\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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"}

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

@@ -1,6 +1,12 @@
 import React from 'react';
 import { FieldProps, FieldHelpProps } from '../../types';
-export type Props = FieldHelpProps & FieldProps<string | number> & {
+import type { FormStatusText } from '../../../../components/FormStatus';
+interface IOption {
+    title: string | React.ReactNode;
+    value: number | string;
+    status: FormStatusText;
+}
+export type Props = FieldHelpProps & FieldProps<IOption['value']> & {
     children?: React.ReactNode;
     variant?: 'dropdown' | 'radio' | 'button';
     clear?: boolean;

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

@@ -27,8 +27,6 @@ function Selection(props) {
     variant = 'dropdown',
     clear,
     label,
-    labelDescription,
-    labelSecondary,
     layout = 'vertical',
     optionsLayout = 'vertical',
     placeholder,
@@ -79,9 +77,7 @@ function Selection(props) {
     warning,
     error,
     layout,
-    label,
-    labelDescription,
-    labelSecondary
+    label
   });
   const getStatus = useCallback(error => {
     var _error$message;
@@ -155,7 +151,7 @@ function Selection(props) {
         } : undefined, ...(optionsData !== null && optionsData !== void 0 ? optionsData : [])].filter(Boolean);
         return React.createElement(FieldBlock, _extends({}, fieldBlockProps, {
           width: width
-        }), React.createElement(Dropdown, _extends({
+        }), React.createElement(Dropdown, {
           id: id,
           list_class: "dnb-forms-field-selection__list",
           portal_class: "dnb-forms-field-selection__portal",
@@ -169,10 +165,9 @@ function Selection(props) {
           }, help.contents) : undefined,
           on_change: handleDropdownChange,
           on_show: handleShow,
-          on_hide: handleHide
-        }, pickSpacingProps(props), {
+          on_hide: handleHide,
           stretch: true
-        })));
+        }));
       }
   }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Selection.js","names":["React","useMemo","useContext","useCallback","ToggleButton","Dropdown","Radio","HelpButton","classnames","makeUniqueId","SharedContext","Option","useDataValue","FormError","pickSpacingProps","FieldBlock","Selection","props","sharedContext","clearValue","id","className","variant","clear","label","labelDescription","labelSecondary","layout","optionsLayout","placeholder","value","info","warning","error","disabled","help","emptyValue","width","setHasFocus","handleChange","children","handleDropdownChange","_ref","data","selectedKey","onChangeHandler","_ref2","undefined","handleShow","_ref3","handleHide","_ref4","cn","fieldBlockProps","_objectSpread","forId","getStatus","_error$message","message","Error","toString","options","Children","toArray","filter","child","isValidElement","type","map","option","_option$props","v","title","rest","_objectWithoutProperties","_excluded","status","Component","createElement","Group","layout_direction","on_change","String","i","_excluded2","_extends","length","key","text","optionsData","_child$props$value","_ref5","_child$props$children","_child$props$children2","content","_em","translation","Forms","selectionClearSelected","Boolean","list_class","portal_class","suffix","contents","on_show","on_hide","stretch","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Selection/Selection.tsx"],"sourcesContent":["import React, { useMemo, useContext, useCallback } from 'react'\nimport {\n  ToggleButton,\n  Dropdown,\n  Radio,\n  HelpButton,\n} from '../../../../components'\nimport classnames from 'classnames'\nimport { makeUniqueId } from '../../../../shared/component-helper'\nimport SharedContext from '../../../../shared/Context'\nimport Option from '../Option'\nimport { useDataValue } from '../../hooks'\nimport { FormError, FieldProps, FieldHelpProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport type { FormStatusText } from '../../../../components/FormStatus'\nimport FieldBlock from '../../FieldBlock'\n\ninterface IOption {\n  title: string | React.ReactNode\n  value: number | string\n  status: FormStatusText\n}\n\nexport type Props = FieldHelpProps &\n  FieldProps<string | number> & {\n    children?: React.ReactNode\n    variant?: 'dropdown' | 'radio' | 'button'\n    clear?: boolean\n    optionsLayout?: 'horizontal' | 'vertical'\n    width?: 'small' | 'medium' | 'large' | 'stretch'\n  }\n\nfunction Selection(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, [])\n\n  const {\n    id,\n    className,\n    variant = 'dropdown',\n    clear,\n    label,\n    labelDescription,\n    labelSecondary,\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    placeholder,\n    value,\n    info,\n    warning,\n    error,\n    disabled,\n    help,\n    emptyValue,\n    width = 'large',\n    setHasFocus,\n    handleChange,\n    children,\n  } = useDataValue(props)\n\n  const handleDropdownChange = useCallback(\n    ({ data: { selectedKey } }) => {\n      handleChange?.(\n        !selectedKey || selectedKey === clearValue\n          ? emptyValue\n          : selectedKey\n      )\n    },\n    [handleChange, emptyValue, clearValue]\n  )\n\n  const onChangeHandler = useCallback(\n    ({ value }) => {\n      handleChange?.(value === undefined ? emptyValue : value)\n    },\n    [handleChange, emptyValue]\n  )\n\n  // Specific handleShow and handleHide because Dropdown preserve the initially received callbacks, so changes\n  // due to `useCallback` usage will have no effect, leading to useDataValues handleFocus and handleBlur sending out old\n  // copies of value as arguments.\n  const handleShow = useCallback(\n    ({ data }) => {\n      setHasFocus(true, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const handleHide = useCallback(\n    ({ data }) => {\n      setHasFocus(false, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const cn = classnames(\n    'dnb-forms-field-selection',\n    `dnb-forms-field-selection__variant--${variant}`,\n    `dnb-forms-field-selection__options-layout--${optionsLayout}`,\n    className\n  )\n\n  const fieldBlockProps = {\n    forId: id,\n    className: cn,\n    ...pickSpacingProps(props),\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription,\n    labelSecondary,\n  }\n\n  const getStatus = useCallback(\n    (error: Error | FormError | undefined) => {\n      return (\n        error?.message ??\n        ((warning instanceof Error && warning.message) ||\n          (warning instanceof FormError && warning.message) ||\n          warning?.toString() ||\n          (info instanceof Error && info.message) ||\n          (info instanceof FormError && info.message) ||\n          info?.toString())\n      )\n    },\n    [info, warning]\n  )\n\n  const options: IOption[] = useMemo(\n    () =>\n      React.Children.toArray(children)\n        .filter(\n          (child) => React.isValidElement(child) && child.type === Option\n        )\n        .map((option: React.ReactElement) => {\n          const {\n            value: v,\n            error,\n            title,\n            children,\n            ...rest\n          } = option.props\n\n          const status = getStatus(error)\n\n          return {\n            title: title ?? children,\n            value: v,\n            status,\n            ...rest,\n          }\n        }),\n    [children, getStatus]\n  )\n\n  const status = getStatus(error)\n\n  switch (variant) {\n    case 'radio':\n    case 'button': {\n      const Component = (\n        variant === 'radio' ? Radio : ToggleButton\n      ) as typeof Radio & typeof ToggleButton\n\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <Component.Group\n            className={cn}\n            layout_direction={\n              optionsLayout === 'horizontal' ? 'row' : 'column'\n            }\n            disabled={disabled}\n            on_change={onChangeHandler}\n            value={String(value ?? '')}\n          >\n            {options.map((option, i) => {\n              const { value, title, status, ...rest } = option\n              return (\n                <Component\n                  id={options.length === 1 ? id : undefined}\n                  key={`option-${i}-${value}`}\n                  label={variant === 'radio' ? title : undefined}\n                  text={variant === 'button' ? title : undefined}\n                  value={String(value ?? '')}\n                  status={status}\n                  {...rest}\n                />\n              )\n            })}\n          </Component.Group>\n        </FieldBlock>\n      )\n    }\n\n    case 'dropdown': {\n      const optionsData = React.Children.map(children, (child) => {\n        if (React.isValidElement(child) && child.type === Option) {\n          // Option components\n          return child.props.text\n            ? {\n                selectedKey: String(child.props.value ?? ''),\n                content: [\n                  child.props.children ?? child.props.title ?? (\n                    <em>Untitled</em>\n                  ),\n                  child.props.text,\n                ],\n              }\n            : {\n                selectedKey: child.props.value,\n                content: child.props.children ?? child.props.title,\n              }\n        }\n\n        // For other children, just show them as content\n        return {\n          content: child,\n        }\n      })\n      const data = [\n        clear\n          ? {\n              selectedKey: clearValue,\n              content: (\n                <em>\n                  {sharedContext?.translation.Forms.selectionClearSelected}\n                </em>\n              ),\n            }\n          : undefined,\n        ...(optionsData ?? []),\n      ].filter(Boolean)\n\n      return (\n        <FieldBlock {...fieldBlockProps} width={width}>\n          <Dropdown\n            id={id}\n            list_class=\"dnb-forms-field-selection__list\"\n            portal_class=\"dnb-forms-field-selection__portal\"\n            title={placeholder}\n            value={String(value ?? '')}\n            status={status && 'error'}\n            disabled={disabled}\n            data={data}\n            suffix={\n              help ? (\n                <HelpButton title={help.title}>{help.contents}</HelpButton>\n              ) : undefined\n            }\n            on_change={handleDropdownChange}\n            on_show={handleShow}\n            on_hide={handleHide}\n            {...pickSpacingProps(props)}\n            stretch\n          />\n        </FieldBlock>\n      )\n    }\n  }\n}\n\nSelection._supportsSpacingProps = true\nexport default Selection\n"],"mappings":"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"}
+{"version":3,"file":"Selection.js","names":["React","useMemo","useContext","useCallback","ToggleButton","Dropdown","Radio","HelpButton","classnames","makeUniqueId","SharedContext","Option","useDataValue","FormError","pickSpacingProps","FieldBlock","Selection","props","sharedContext","clearValue","id","className","variant","clear","label","layout","optionsLayout","placeholder","value","info","warning","error","disabled","help","emptyValue","width","setHasFocus","handleChange","children","handleDropdownChange","_ref","data","selectedKey","onChangeHandler","_ref2","undefined","handleShow","_ref3","handleHide","_ref4","cn","fieldBlockProps","_objectSpread","forId","getStatus","_error$message","message","Error","toString","options","Children","toArray","filter","child","isValidElement","type","map","option","_option$props","v","title","rest","_objectWithoutProperties","_excluded","status","Component","createElement","Group","layout_direction","on_change","String","i","_excluded2","_extends","length","key","text","optionsData","_child$props$value","_ref5","_child$props$children","_child$props$children2","content","_em","translation","Forms","selectionClearSelected","Boolean","list_class","portal_class","suffix","contents","on_show","on_hide","stretch","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Selection/Selection.tsx"],"sourcesContent":["import React, { useMemo, useContext, useCallback } from 'react'\nimport {\n  ToggleButton,\n  Dropdown,\n  Radio,\n  HelpButton,\n} from '../../../../components'\nimport classnames from 'classnames'\nimport { makeUniqueId } from '../../../../shared/component-helper'\nimport SharedContext from '../../../../shared/Context'\nimport Option from '../Option'\nimport { useDataValue } from '../../hooks'\nimport { FormError, FieldProps, FieldHelpProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport type { FormStatusText } from '../../../../components/FormStatus'\nimport FieldBlock from '../../FieldBlock'\n\ninterface IOption {\n  title: string | React.ReactNode\n  value: number | string\n  status: FormStatusText\n}\n\nexport type Props = FieldHelpProps &\n  FieldProps<IOption['value']> & {\n    children?: React.ReactNode\n    variant?: 'dropdown' | 'radio' | 'button'\n    clear?: boolean\n    optionsLayout?: 'horizontal' | 'vertical'\n    width?: 'small' | 'medium' | 'large' | 'stretch'\n  }\n\nfunction Selection(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, [])\n\n  const {\n    id,\n    className,\n    variant = 'dropdown',\n    clear,\n    label,\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    placeholder,\n    value,\n    info,\n    warning,\n    error,\n    disabled,\n    help,\n    emptyValue,\n    width = 'large',\n    setHasFocus,\n    handleChange,\n    children,\n  } = useDataValue(props)\n\n  const handleDropdownChange = useCallback(\n    ({ data: { selectedKey } }) => {\n      handleChange?.(\n        !selectedKey || selectedKey === clearValue\n          ? emptyValue\n          : selectedKey\n      )\n    },\n    [handleChange, emptyValue, clearValue]\n  )\n\n  const onChangeHandler = useCallback(\n    ({ value }) => {\n      handleChange?.(value === undefined ? emptyValue : value)\n    },\n    [handleChange, emptyValue]\n  )\n\n  // Specific handleShow and handleHide because Dropdown preserve the initially received callbacks, so changes\n  // due to `useCallback` usage will have no effect, leading to useDataValues handleFocus and handleBlur sending out old\n  // copies of value as arguments.\n  const handleShow = useCallback(\n    ({ data }) => {\n      setHasFocus(true, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const handleHide = useCallback(\n    ({ data }) => {\n      setHasFocus(false, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const cn = classnames(\n    'dnb-forms-field-selection',\n    `dnb-forms-field-selection__variant--${variant}`,\n    `dnb-forms-field-selection__options-layout--${optionsLayout}`,\n    className\n  )\n\n  const fieldBlockProps = {\n    forId: id,\n    className: cn,\n    ...pickSpacingProps(props),\n    info,\n    warning,\n    error,\n    layout,\n    label,\n  }\n\n  const getStatus = useCallback(\n    (error: Error | FormError | undefined) => {\n      return (\n        error?.message ??\n        ((warning instanceof Error && warning.message) ||\n          (warning instanceof FormError && warning.message) ||\n          warning?.toString() ||\n          (info instanceof Error && info.message) ||\n          (info instanceof FormError && info.message) ||\n          info?.toString())\n      )\n    },\n    [info, warning]\n  )\n\n  const options: IOption[] = useMemo(\n    () =>\n      React.Children.toArray(children)\n        .filter(\n          (child) => React.isValidElement(child) && child.type === Option\n        )\n        .map((option: React.ReactElement) => {\n          const {\n            value: v,\n            error,\n            title,\n            children,\n            ...rest\n          } = option.props\n\n          const status = getStatus(error)\n\n          return {\n            title: title ?? children,\n            value: v,\n            status,\n            ...rest,\n          }\n        }),\n    [children, getStatus]\n  )\n\n  const status = getStatus(error)\n\n  switch (variant) {\n    case 'radio':\n    case 'button': {\n      const Component = (\n        variant === 'radio' ? Radio : ToggleButton\n      ) as typeof Radio & typeof ToggleButton\n\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <Component.Group\n            className={cn}\n            layout_direction={\n              optionsLayout === 'horizontal' ? 'row' : 'column'\n            }\n            disabled={disabled}\n            on_change={onChangeHandler}\n            value={String(value ?? '')}\n          >\n            {options.map((option, i) => {\n              const { value, title, status, ...rest } = option\n              return (\n                <Component\n                  id={options.length === 1 ? id : undefined}\n                  key={`option-${i}-${value}`}\n                  label={variant === 'radio' ? title : undefined}\n                  text={variant === 'button' ? title : undefined}\n                  value={String(value ?? '')}\n                  status={status}\n                  {...rest}\n                />\n              )\n            })}\n          </Component.Group>\n        </FieldBlock>\n      )\n    }\n\n    case 'dropdown': {\n      const optionsData = React.Children.map(children, (child) => {\n        if (React.isValidElement(child) && child.type === Option) {\n          // Option components\n          return child.props.text\n            ? {\n                selectedKey: String(child.props.value ?? ''),\n                content: [\n                  child.props.children ?? child.props.title ?? (\n                    <em>Untitled</em>\n                  ),\n                  child.props.text,\n                ],\n              }\n            : {\n                selectedKey: child.props.value,\n                content: child.props.children ?? child.props.title,\n              }\n        }\n\n        // For other children, just show them as content\n        return {\n          content: child,\n        }\n      })\n      const data = [\n        clear\n          ? {\n              selectedKey: clearValue,\n              content: (\n                <em>\n                  {sharedContext?.translation.Forms.selectionClearSelected}\n                </em>\n              ),\n            }\n          : undefined,\n        ...(optionsData ?? []),\n      ].filter(Boolean)\n\n      return (\n        <FieldBlock {...fieldBlockProps} width={width}>\n          <Dropdown\n            id={id}\n            list_class=\"dnb-forms-field-selection__list\"\n            portal_class=\"dnb-forms-field-selection__portal\"\n            title={placeholder}\n            value={String(value ?? '')}\n            status={status && 'error'}\n            disabled={disabled}\n            data={data}\n            suffix={\n              help ? (\n                <HelpButton title={help.title}>{help.contents}</HelpButton>\n              ) : undefined\n            }\n            on_change={handleDropdownChange}\n            on_show={handleShow}\n            on_hide={handleHide}\n            stretch\n          />\n        </FieldBlock>\n      )\n    }\n  }\n}\n\nSelection._supportsSpacingProps = true\nexport default Selection\n"],"mappings":"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"}

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

@@ -21,7 +21,6 @@ export type Props = FieldHelpProps & FieldProps<string, undefined | string, Erro
     autoComplete?: HTMLInputElement['autocomplete'];
     inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];
     autoresizeMaxRows?: number;
-    characterCounter?: boolean;
     mask?: InputMaskedProps['mask'];
     minLength?: number;
     maxLength?: number;

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

@@ -14,7 +14,7 @@ import { useDataValue } from '../../hooks';
 import { pickSpacingProps } from '../../../../components/flex/utils';
 import { toCapitalized } from '../../../../shared/component-helper';
 function StringComponent(props) {
-  var _props$width, _value$length, _value$length2, _value$toString;
+  var _props$width, _value$toString;
   const sharedContext = useContext(SharedContext);
   const tr = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms;
   const errorMessages = useMemo(() => _objectSpread({
@@ -80,8 +80,6 @@ function StringComponent(props) {
     type,
     placeholder,
     label,
-    labelDescription,
-    labelSecondary,
     value,
     info,
     warning,
@@ -95,7 +93,6 @@ function StringComponent(props) {
     clear,
     autoresize = true,
     autoresizeMaxRows = 6,
-    characterCounter,
     mask,
     width,
     handleFocus,
@@ -103,7 +100,6 @@ function StringComponent(props) {
     handleChange
   } = useDataValue(preparedProps);
   const transformInstantly = useCallback(value => props.capitalize ? toCapitalized(value) : value, [props.capitalize]);
-  const characterCounterElement = characterCounter ? props.maxLength ? `${(_value$length = value === null || value === void 0 ? void 0 : value.length) !== null && _value$length !== void 0 ? _value$length : '0'}/${props.maxLength}` : `${(_value$length2 = value === null || value === void 0 ? void 0 : value.length) !== null && _value$length2 !== void 0 ? _value$length2 : '0'}` : undefined;
   const cn = classnames('dnb-forms-field-string__input', inputClassName);
   const sharedProps = {
     id,
@@ -121,7 +117,7 @@ function StringComponent(props) {
     disabled: disabled,
     stretch: width !== undefined,
     inner_ref: innerRef,
-    status: error || hasError ? 'error' : undefined,
+    status: hasError ? 'error' : undefined,
     value: transformInstantly((_value$toString = value === null || value === void 0 ? void 0 : value.toString()) !== null && _value$toString !== void 0 ? _value$toString : '')
   };
   return React.createElement(FieldBlock, _extends({
@@ -129,8 +125,6 @@ function StringComponent(props) {
     forId: id,
     layout: layout,
     label: label,
-    labelDescription: labelDescription,
-    labelSecondary: labelSecondary !== null && labelSecondary !== void 0 ? labelSecondary : characterCounterElement,
     info: info,
     warning: warning,
     disabled: disabled,

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

@@ -1 +1 @@
-{"version":3,"file":"String.js","names":["React","useContext","useMemo","useCallback","classnames","HelpButton","Input","Textarea","InputMasked","SharedContext","FieldBlock","useDataValue","pickSpacingProps","toCapitalized","StringComponent","props","_props$width","_value$length","_value$length2","_value$toString","sharedContext","tr","translation","Forms","errorMessages","_objectSpread","required","inputErrorRequired","minLength","stringInputErrorMinLength","maxLength","stringInputErrorMaxLength","pattern","inputErrorPattern","schema","_props$schema","type","fromInput","event","_event","_event$cleanedValue","_event2","_event3","value","emptyValue","cleanedValue","toEvent","trim","spaces","RegExp","test","replace","handleChange","transformValue","capitalize","String","preparedProps","width","id","name","className","autoComplete","inputMode","innerRef","inputClassName","layout","placeholder","label","labelDescription","labelSecondary","info","warning","error","hasError","disabled","help","multiline","leftIcon","rightIcon","clear","autoresize","autoresizeMaxRows","characterCounter","mask","handleFocus","handleBlur","transformInstantly","characterCounterElement","length","undefined","cn","sharedProps","suffix","createElement","title","contents","on_focus","on_blur","on_change","stretch","inner_ref","status","toString","_extends","forId","contentsWidth","autoresize_max_rows","icon","icon_position","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/String/String.tsx"],"sourcesContent":["import React, { useContext, useMemo, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { JSONSchema7 } from 'json-schema'\nimport { HelpButton, Input, Textarea } from '../../../../components'\nimport { InputProps } from '../../../../components/input/Input'\nimport InputMasked, {\n  InputMaskedProps,\n} from '../../../../components/InputMasked'\nimport SharedContext from '../../../../shared/Context'\nimport FieldBlock from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport { FieldProps, FieldHelpProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { toCapitalized } from '../../../../shared/component-helper'\n\ninterface ErrorMessages {\n  required?: string\n  schema?: string\n  minLength?: string\n  maxLength?: string\n  pattern?: string\n}\nexport type Props = FieldHelpProps &\n  FieldProps<string, undefined | string, ErrorMessages> & {\n    type?: InputProps['type']\n    multiline?: boolean\n    leftIcon?: string\n    rightIcon?: string\n    inputClassName?: string\n    innerRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement>\n    clear?: boolean\n    autoresize?: boolean\n    autoComplete?: HTMLInputElement['autocomplete']\n    inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode']\n    autoresizeMaxRows?: number\n    characterCounter?: boolean\n    mask?: InputMaskedProps['mask']\n    // Validation\n    minLength?: number\n    maxLength?: number\n    pattern?: string\n    // Styling\n    width?: false | 'small' | 'medium' | 'large' | 'stretch'\n  }\n\nfunction StringComponent(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  const errorMessages = useMemo(\n    () => ({\n      required: tr.inputErrorRequired,\n      minLength: tr.stringInputErrorMinLength,\n      maxLength: tr.stringInputErrorMaxLength,\n      pattern: tr.inputErrorPattern,\n      ...props.errorMessages,\n    }),\n    [tr, props.errorMessages]\n  )\n  const schema = useMemo<JSONSchema7>(\n    () =>\n      props.schema ?? {\n        type: 'string',\n        minLength: props.minLength,\n        maxLength: props.maxLength,\n        pattern: props.pattern,\n      },\n    [props.schema, props.minLength, props.maxLength, props.pattern]\n  )\n  const fromInput = useCallback(\n    (event: { value: string; cleanedValue?: string }) => {\n      if (typeof event === 'string') {\n        event = { value: event }\n      }\n      if (event?.value === '') {\n        return props.emptyValue\n      }\n      // Cleaned value for masked\n      return event?.cleanedValue ?? event?.value\n    },\n    [props.emptyValue]\n  )\n  const toEvent = useCallback(\n    (value: string, type: string) => {\n      if (props.trim && type === 'onBlur') {\n        const spaces = '[\\\\s ]'\n        if (new RegExp(`^${spaces}|${spaces}$`).test(value)) {\n          value = value.replace(\n            new RegExp(`^${spaces}+|${spaces}+$`, 'g'),\n            ''\n          )\n          handleChange(value)\n        }\n      }\n      return value\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [props.trim]\n  )\n  const transformValue = useCallback(\n    (value: string) => {\n      if (props.capitalize) {\n        value = toCapitalized(String(value || ''))\n      }\n      return value\n    },\n    [props.capitalize]\n  )\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages,\n    schema,\n    fromInput,\n    toEvent,\n    transformValue,\n    width: props.width ?? 'large',\n  }\n\n  const {\n    id,\n    name,\n    className,\n    autoComplete,\n    inputMode,\n    innerRef,\n    inputClassName,\n    layout,\n    type,\n    placeholder,\n    label,\n    labelDescription,\n    labelSecondary,\n    value,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    help,\n    multiline,\n    leftIcon,\n    rightIcon,\n    clear,\n    autoresize = true,\n    autoresizeMaxRows = 6,\n    characterCounter,\n    mask,\n    width,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useDataValue(preparedProps)\n\n  const transformInstantly = useCallback(\n    (value: string) => (props.capitalize ? toCapitalized(value) : value),\n    [props.capitalize]\n  )\n\n  const characterCounterElement = characterCounter\n    ? props.maxLength\n      ? `${value?.length ?? '0'}/${props.maxLength}`\n      : `${value?.length ?? '0'}`\n    : undefined\n  const cn = classnames('dnb-forms-field-string__input', inputClassName)\n\n  const sharedProps = {\n    id,\n    name,\n    autoComplete,\n    inputMode,\n    className: cn,\n    placeholder: placeholder,\n    suffix: help ? (\n      <HelpButton title={help.title}>{help.contents}</HelpButton>\n    ) : undefined,\n    on_focus: handleFocus,\n    on_blur: handleBlur,\n    on_change: handleChange,\n    disabled: disabled,\n    stretch: width !== undefined,\n    inner_ref: innerRef,\n    status: error || hasError ? 'error' : undefined,\n    value: transformInstantly(value?.toString() ?? ''),\n  }\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-string', className)}\n      forId={id}\n      layout={layout}\n      label={label}\n      labelDescription={labelDescription}\n      labelSecondary={labelSecondary ?? characterCounterElement}\n      info={info}\n      warning={warning}\n      disabled={disabled}\n      error={error}\n      width={width === 'stretch' ? width : undefined}\n      contentsWidth={width !== false ? width : undefined}\n      {...pickSpacingProps(props)}\n    >\n      {multiline ? (\n        <Textarea\n          {...sharedProps}\n          autoresize={autoresize}\n          autoresize_max_rows={autoresizeMaxRows}\n        />\n      ) : mask ? (\n        <InputMasked\n          {...sharedProps}\n          mask={mask}\n          icon={leftIcon ?? rightIcon}\n          icon_position={rightIcon && !leftIcon ? 'right' : undefined}\n        />\n      ) : (\n        <Input\n          {...sharedProps}\n          type={type}\n          icon={leftIcon ?? rightIcon}\n          icon_position={rightIcon && !leftIcon ? 'right' : undefined}\n          clear={clear}\n        />\n      )}\n    </FieldBlock>\n  )\n}\n\nStringComponent._supportsSpacingProps = true\nexport default StringComponent\n"],"mappings":"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"}
+{"version":3,"file":"String.js","names":["React","useContext","useMemo","useCallback","classnames","HelpButton","Input","Textarea","InputMasked","SharedContext","FieldBlock","useDataValue","pickSpacingProps","toCapitalized","StringComponent","props","_props$width","_value$toString","sharedContext","tr","translation","Forms","errorMessages","_objectSpread","required","inputErrorRequired","minLength","stringInputErrorMinLength","maxLength","stringInputErrorMaxLength","pattern","inputErrorPattern","schema","_props$schema","type","fromInput","event","_event","_event$cleanedValue","_event2","_event3","value","emptyValue","cleanedValue","toEvent","trim","spaces","RegExp","test","replace","handleChange","transformValue","capitalize","String","preparedProps","width","id","name","className","autoComplete","inputMode","innerRef","inputClassName","layout","placeholder","label","info","warning","error","hasError","disabled","help","multiline","leftIcon","rightIcon","clear","autoresize","autoresizeMaxRows","mask","handleFocus","handleBlur","transformInstantly","cn","sharedProps","suffix","createElement","title","contents","undefined","on_focus","on_blur","on_change","stretch","inner_ref","status","toString","_extends","forId","contentsWidth","autoresize_max_rows","icon","icon_position","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/String/String.tsx"],"sourcesContent":["import React, { useContext, useMemo, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { HelpButton, Input, Textarea } from '../../../../components'\nimport { InputProps } from '../../../../components/input/Input'\nimport InputMasked, {\n  InputMaskedProps,\n} from '../../../../components/InputMasked'\nimport SharedContext from '../../../../shared/Context'\nimport FieldBlock from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport { FieldProps, FieldHelpProps, JSONSchema } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { toCapitalized } from '../../../../shared/component-helper'\n\ninterface ErrorMessages {\n  required?: string\n  schema?: string\n  minLength?: string\n  maxLength?: string\n  pattern?: string\n}\nexport type Props = FieldHelpProps &\n  FieldProps<string, undefined | string, ErrorMessages> & {\n    type?: InputProps['type']\n    multiline?: boolean\n    leftIcon?: string\n    rightIcon?: string\n    inputClassName?: string\n    innerRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement>\n    clear?: boolean\n    autoresize?: boolean\n    autoComplete?: HTMLInputElement['autocomplete']\n    inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode']\n    autoresizeMaxRows?: number\n    mask?: InputMaskedProps['mask']\n    // Validation\n    minLength?: number\n    maxLength?: number\n    pattern?: string\n    // Styling\n    width?: false | 'small' | 'medium' | 'large' | 'stretch'\n  }\n\nfunction StringComponent(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  const errorMessages = useMemo(\n    () => ({\n      required: tr.inputErrorRequired,\n      minLength: tr.stringInputErrorMinLength,\n      maxLength: tr.stringInputErrorMaxLength,\n      pattern: tr.inputErrorPattern,\n      ...props.errorMessages,\n    }),\n    [tr, props.errorMessages]\n  )\n  const schema = useMemo<JSONSchema>(\n    () =>\n      props.schema ?? {\n        type: 'string',\n        minLength: props.minLength,\n        maxLength: props.maxLength,\n        pattern: props.pattern,\n      },\n    [props.schema, props.minLength, props.maxLength, props.pattern]\n  )\n  const fromInput = useCallback(\n    (event: { value: string; cleanedValue?: string }) => {\n      if (typeof event === 'string') {\n        event = { value: event }\n      }\n      if (event?.value === '') {\n        return props.emptyValue\n      }\n      // Cleaned value for masked\n      return event?.cleanedValue ?? event?.value\n    },\n    [props.emptyValue]\n  )\n  const toEvent = useCallback(\n    (value: string, type: string) => {\n      if (props.trim && type === 'onBlur') {\n        const spaces = '[\\\\s ]'\n        if (new RegExp(`^${spaces}|${spaces}$`).test(value)) {\n          value = value.replace(\n            new RegExp(`^${spaces}+|${spaces}+$`, 'g'),\n            ''\n          )\n          handleChange(value)\n        }\n      }\n      return value\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [props.trim]\n  )\n  const transformValue = useCallback(\n    (value: string) => {\n      if (props.capitalize) {\n        value = toCapitalized(String(value || ''))\n      }\n      return value\n    },\n    [props.capitalize]\n  )\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages,\n    schema,\n    fromInput,\n    toEvent,\n    transformValue,\n    width: props.width ?? 'large',\n  }\n\n  const {\n    id,\n    name,\n    className,\n    autoComplete,\n    inputMode,\n    innerRef,\n    inputClassName,\n    layout,\n    type,\n    placeholder,\n    label,\n    value,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    help,\n    multiline,\n    leftIcon,\n    rightIcon,\n    clear,\n    autoresize = true,\n    autoresizeMaxRows = 6,\n    mask,\n    width,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useDataValue(preparedProps)\n\n  const transformInstantly = useCallback(\n    (value: string) => (props.capitalize ? toCapitalized(value) : value),\n    [props.capitalize]\n  )\n\n  const cn = classnames('dnb-forms-field-string__input', inputClassName)\n\n  const sharedProps = {\n    id,\n    name,\n    autoComplete,\n    inputMode,\n    className: cn,\n    placeholder: placeholder,\n    suffix: help ? (\n      <HelpButton title={help.title}>{help.contents}</HelpButton>\n    ) : undefined,\n    on_focus: handleFocus,\n    on_blur: handleBlur,\n    on_change: handleChange,\n    disabled: disabled,\n    stretch: width !== undefined,\n    inner_ref: innerRef,\n    status: hasError ? 'error' : undefined,\n    value: transformInstantly(value?.toString() ?? ''),\n  }\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-string', className)}\n      forId={id}\n      layout={layout}\n      label={label}\n      info={info}\n      warning={warning}\n      disabled={disabled}\n      error={error}\n      width={width === 'stretch' ? width : undefined}\n      contentsWidth={width !== false ? width : undefined}\n      {...pickSpacingProps(props)}\n    >\n      {multiline ? (\n        <Textarea\n          {...sharedProps}\n          autoresize={autoresize}\n          autoresize_max_rows={autoresizeMaxRows}\n        />\n      ) : mask ? (\n        <InputMasked\n          {...sharedProps}\n          mask={mask}\n          icon={leftIcon ?? rightIcon}\n          icon_position={rightIcon && !leftIcon ? 'right' : undefined}\n        />\n      ) : (\n        <Input\n          {...sharedProps}\n          type={type}\n          icon={leftIcon ?? rightIcon}\n          icon_position={rightIcon && !leftIcon ? 'right' : undefined}\n          clear={clear}\n        />\n      )}\n    </FieldBlock>\n  )\n}\n\nStringComponent._supportsSpacingProps = true\nexport default StringComponent\n"],"mappings":"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"}

package/extensions/forms/Field/Toggle/Toggle.js

@@ -24,8 +24,6 @@ function Toggle(props) {
     variant,
     disabled,
     label,
-    labelDescription,
-    labelSecondary,
     textOn,
     textOff,
     value,
@@ -59,8 +57,6 @@ function Toggle(props) {
   const fieldBlockProps = _objectSpread(_objectSpread({}, fieldBlockPropsWithoutLabel), {}, {
     layout,
     label,
-    labelDescription,
-    labelSecondary,
     disabled
   });
   const isOn = value === valueOn;

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","names":["React","useContext","useCallback","Checkbox","ToggleButton","classnames","ButtonRow","FieldBlock","useDataValue","pickSpacingProps","SharedContext","ToggleButtonGroupContext","Toggle","props","sharedContext","id","className","valueOn","valueOff","layout","variant","disabled","label","labelDescription","labelSecondary","textOn","textOff","value","info","warning","error","handleChange","handleCheckboxChange","_ref","checked","handleToggleChange","_ref2","cn","fieldBlockPropsWithoutLabel","_objectSpread","forId","fieldBlockProps","isOn","isOff","createElement","_extends","status","undefined","on_change","text","translation","Forms","booleanYes","booleanNo","asFieldset","bottom","Provider","onChange","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Toggle/Toggle.tsx"],"sourcesContent":["import React, { useContext, useCallback } from 'react'\nimport { Checkbox, ToggleButton } from '../../../../components'\nimport classnames from 'classnames'\nimport ButtonRow from '../../Form/ButtonRow'\nimport FieldBlock from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport { FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport SharedContext from '../../../../shared/Context'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\n\nexport type Props = FieldProps<unknown> & {\n  valueOn: unknown\n  valueOff: unknown\n  variant?: 'checkbox' | 'checkbox-button' | 'button' | 'buttons'\n  textOn?: string\n  textOff?: string\n}\n\nfunction Toggle(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const {\n    id,\n    className,\n    valueOn,\n    valueOff,\n    layout,\n    variant,\n    disabled,\n    label,\n    labelDescription,\n    labelSecondary,\n    textOn,\n    textOff,\n    value,\n    info,\n    warning,\n    error,\n    handleChange,\n  } = useDataValue(props)\n\n  const handleCheckboxChange = useCallback(\n    ({ checked }) => {\n      handleChange?.(checked ? valueOn : valueOff)\n    },\n    [handleChange, valueOn, valueOff]\n  )\n  const handleToggleChange = useCallback(\n    ({ value }) => {\n      handleChange?.(value === 'on' ? valueOn : valueOff)\n    },\n    [handleChange, valueOn, valueOff]\n  )\n\n  const cn = classnames('dnb-forms-field-toggle', className)\n\n  const fieldBlockPropsWithoutLabel = {\n    forId: id,\n    className: cn,\n    ...pickSpacingProps(props),\n    info,\n    warning,\n    error,\n    disabled,\n  }\n\n  const fieldBlockProps = {\n    ...fieldBlockPropsWithoutLabel,\n    layout,\n    label,\n    labelDescription,\n    labelSecondary,\n    disabled,\n  }\n\n  const isOn = value === valueOn\n  const isOff = value === valueOff\n\n  switch (variant) {\n    default:\n    case 'checkbox':\n      return (\n        <FieldBlock {...fieldBlockPropsWithoutLabel}>\n          <Checkbox\n            id={id}\n            className={cn}\n            label={label}\n            checked={isOn}\n            disabled={disabled}\n            status={error ? 'error' : undefined}\n            on_change={handleCheckboxChange}\n            {...pickSpacingProps(props)}\n          />\n        </FieldBlock>\n      )\n    case 'button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ToggleButton\n            id={id}\n            text={\n              isOn\n                ? textOn ?? sharedContext?.translation.Forms.booleanYes\n                : textOff ?? sharedContext?.translation.Forms.booleanNo\n            }\n            checked={isOn}\n            disabled={disabled}\n            status={error ? 'error' : undefined}\n            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n          />\n        </FieldBlock>\n      )\n    case 'buttons':\n      return (\n        <FieldBlock {...fieldBlockProps} asFieldset>\n          <ButtonRow bottom=\"x-small\">\n            <ToggleButtonGroupContext.Provider\n              value={{\n                value: isOn ? 'on' : isOff ? 'off' : undefined,\n                onChange: handleToggleChange,\n                status: error ? 'error' : undefined,\n                disabled,\n              }}\n            >\n              <ToggleButton\n                text={\n                  textOn ?? sharedContext?.translation.Forms.booleanYes\n                }\n                value=\"on\"\n              />\n              <ToggleButton\n                text={\n                  textOff ?? sharedContext?.translation.Forms.booleanNo\n                }\n                value=\"off\"\n              />\n            </ToggleButtonGroupContext.Provider>\n          </ButtonRow>\n        </FieldBlock>\n      )\n    case 'checkbox-button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ToggleButton\n            id={id}\n            variant=\"checkbox\"\n            text={\n              isOn\n                ? textOn ?? sharedContext?.translation.Forms.booleanYes\n                : textOff ?? sharedContext?.translation.Forms.booleanNo\n            }\n            checked={isOn}\n            disabled={disabled}\n            status={error ? 'error' : undefined}\n            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n          />\n        </FieldBlock>\n      )\n  }\n}\n\nToggle._supportsSpacingProps = true\nexport default Toggle\n"],"mappings":"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"}
+{"version":3,"file":"Toggle.js","names":["React","useContext","useCallback","Checkbox","ToggleButton","classnames","ButtonRow","FieldBlock","useDataValue","pickSpacingProps","SharedContext","ToggleButtonGroupContext","Toggle","props","sharedContext","id","className","valueOn","valueOff","layout","variant","disabled","label","textOn","textOff","value","info","warning","error","handleChange","handleCheckboxChange","_ref","checked","handleToggleChange","_ref2","cn","fieldBlockPropsWithoutLabel","_objectSpread","forId","fieldBlockProps","isOn","isOff","createElement","_extends","status","undefined","on_change","text","translation","Forms","booleanYes","booleanNo","asFieldset","bottom","Provider","onChange","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Toggle/Toggle.tsx"],"sourcesContent":["import React, { useContext, useCallback } from 'react'\nimport { Checkbox, ToggleButton } from '../../../../components'\nimport classnames from 'classnames'\nimport ButtonRow from '../../Form/ButtonRow'\nimport FieldBlock from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport { FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport SharedContext from '../../../../shared/Context'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\n\nexport type Props = FieldProps<unknown> & {\n  valueOn: unknown\n  valueOff: unknown\n  variant?: 'checkbox' | 'checkbox-button' | 'button' | 'buttons'\n  textOn?: string\n  textOff?: string\n}\n\nfunction Toggle(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const {\n    id,\n    className,\n    valueOn,\n    valueOff,\n    layout,\n    variant,\n    disabled,\n    label,\n    textOn,\n    textOff,\n    value,\n    info,\n    warning,\n    error,\n    handleChange,\n  } = useDataValue(props)\n\n  const handleCheckboxChange = useCallback(\n    ({ checked }) => {\n      handleChange?.(checked ? valueOn : valueOff)\n    },\n    [handleChange, valueOn, valueOff]\n  )\n  const handleToggleChange = useCallback(\n    ({ value }) => {\n      handleChange?.(value === 'on' ? valueOn : valueOff)\n    },\n    [handleChange, valueOn, valueOff]\n  )\n\n  const cn = classnames('dnb-forms-field-toggle', className)\n\n  const fieldBlockPropsWithoutLabel = {\n    forId: id,\n    className: cn,\n    ...pickSpacingProps(props),\n    info,\n    warning,\n    error,\n    disabled,\n  }\n\n  const fieldBlockProps = {\n    ...fieldBlockPropsWithoutLabel,\n    layout,\n    label,\n    disabled,\n  }\n\n  const isOn = value === valueOn\n  const isOff = value === valueOff\n\n  switch (variant) {\n    default:\n    case 'checkbox':\n      return (\n        <FieldBlock {...fieldBlockPropsWithoutLabel}>\n          <Checkbox\n            id={id}\n            className={cn}\n            label={label}\n            checked={isOn}\n            disabled={disabled}\n            status={error ? 'error' : undefined}\n            on_change={handleCheckboxChange}\n            {...pickSpacingProps(props)}\n          />\n        </FieldBlock>\n      )\n    case 'button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ToggleButton\n            id={id}\n            text={\n              isOn\n                ? textOn ?? sharedContext?.translation.Forms.booleanYes\n                : textOff ?? sharedContext?.translation.Forms.booleanNo\n            }\n            checked={isOn}\n            disabled={disabled}\n            status={error ? 'error' : undefined}\n            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n          />\n        </FieldBlock>\n      )\n    case 'buttons':\n      return (\n        <FieldBlock {...fieldBlockProps} asFieldset>\n          <ButtonRow bottom=\"x-small\">\n            <ToggleButtonGroupContext.Provider\n              value={{\n                value: isOn ? 'on' : isOff ? 'off' : undefined,\n                onChange: handleToggleChange,\n                status: error ? 'error' : undefined,\n                disabled,\n              }}\n            >\n              <ToggleButton\n                text={\n                  textOn ?? sharedContext?.translation.Forms.booleanYes\n                }\n                value=\"on\"\n              />\n              <ToggleButton\n                text={\n                  textOff ?? sharedContext?.translation.Forms.booleanNo\n                }\n                value=\"off\"\n              />\n            </ToggleButtonGroupContext.Provider>\n          </ButtonRow>\n        </FieldBlock>\n      )\n    case 'checkbox-button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ToggleButton\n            id={id}\n            variant=\"checkbox\"\n            text={\n              isOn\n                ? textOn ?? sharedContext?.translation.Forms.booleanYes\n                : textOff ?? sharedContext?.translation.Forms.booleanNo\n            }\n            checked={isOn}\n            disabled={disabled}\n            status={error ? 'error' : undefined}\n            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n          />\n        </FieldBlock>\n      )\n  }\n}\n\nToggle._supportsSpacingProps = true\nexport default Toggle\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,WAAW,QAAQ,OAAO;AACtD,SAASC,QAAQ,EAAEC,YAAY,QAAQ,wBAAwB;AAC/D,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,SAAS,MAAM,sBAAsB;AAC5C,OAAOC,UAAU,MAAM,kBAAkB;AACzC,SAASC,YAAY,QAAQ,aAAa;AAE1C,SAASC,gBAAgB,QAAQ,mCAAmC;AACpE,OAAOC,aAAa,MAAM,4BAA4B;AACtD,OAAOC,wBAAwB,MAAM,+DAA+D;AAUpG,SAASC,MAAMA,CAACC,KAAY,EAAE;EAC5B,MAAMC,aAAa,GAAGb,UAAU,CAACS,aAAa,CAAC;EAC/C,MAAM;IACJK,EAAE;IACFC,SAAS;IACTC,OAAO;IACPC,QAAQ;IACRC,MAAM;IACNC,OAAO;IACPC,QAAQ;IACRC,KAAK;IACLC,MAAM;IACNC,OAAO;IACPC,KAAK;IACLC,IAAI;IACJC,OAAO;IACPC,KAAK;IACLC;EACF,CAAC,GAAGrB,YAAY,CAACK,KAAK,CAAC;EAEvB,MAAMiB,oBAAoB,GAAG5B,WAAW,CACtC6B,IAAA,IAAiB;IAAA,IAAhB;MAAEC;IAAQ,CAAC,GAAAD,IAAA;IACVF,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAGG,OAAO,GAAGf,OAAO,GAAGC,QAAQ,CAAC;EAC9C,CAAC,EACD,CAACW,YAAY,EAAEZ,OAAO,EAAEC,QAAQ,CAClC,CAAC;EACD,MAAMe,kBAAkB,GAAG/B,WAAW,CACpCgC,KAAA,IAAe;IAAA,IAAd;MAAET;IAAM,CAAC,GAAAS,KAAA;IACRL,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAGJ,KAAK,KAAK,IAAI,GAAGR,OAAO,GAAGC,QAAQ,CAAC;EACrD,CAAC,EACD,CAACW,YAAY,EAAEZ,OAAO,EAAEC,QAAQ,CAClC,CAAC;EAED,MAAMiB,EAAE,GAAG9B,UAAU,CAAC,wBAAwB,EAAEW,SAAS,CAAC;EAE1D,MAAMoB,2BAA2B,GAAAC,aAAA,CAAAA,aAAA;IAC/BC,KAAK,EAAEvB,EAAE;IACTC,SAAS,EAAEmB;EAAE,GACV1B,gBAAgB,CAACI,KAAK,CAAC;IAC1Ba,IAAI;IACJC,OAAO;IACPC,KAAK;IACLP;EAAQ,EACT;EAED,MAAMkB,eAAe,GAAAF,aAAA,CAAAA,aAAA,KAChBD,2BAA2B;IAC9BjB,MAAM;IACNG,KAAK;IACLD;EAAQ,EACT;EAED,MAAMmB,IAAI,GAAGf,KAAK,KAAKR,OAAO;EAC9B,MAAMwB,KAAK,GAAGhB,KAAK,KAAKP,QAAQ;EAEhC,QAAQE,OAAO;IACb;IACA,KAAK,UAAU;MACb,OACEpB,KAAA,CAAA0C,aAAA,CAACnC,UAAU,EAAK6B,2BAA2B,EACzCpC,KAAA,CAAA0C,aAAA,CAACvC,QAAQ,EAAAwC,QAAA;QACP5B,EAAE,EAAEA,EAAG;QACPC,SAAS,EAAEmB,EAAG;QACdb,KAAK,EAAEA,KAAM;QACbU,OAAO,EAAEQ,IAAK;QACdnB,QAAQ,EAAEA,QAAS;QACnBuB,MAAM,EAAEhB,KAAK,GAAG,OAAO,GAAGiB,SAAU;QACpCC,SAAS,EAAEhB;MAAqB,GAC5BrB,gBAAgB,CAACI,KAAK,CAAC,CAC5B,CACS,CAAC;IAEjB,KAAK,QAAQ;MACX,OACEb,KAAA,CAAA0C,aAAA,CAACnC,UAAU,EAAKgC,eAAe,EAC7BvC,KAAA,CAAA0C,aAAA,CAACtC,YAAY;QACXW,EAAE,EAAEA,EAAG;QACPgC,IAAI,EACFP,IAAI,GACAjB,MAAM,aAANA,MAAM,cAANA,MAAM,GAAIT,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEkC,WAAW,CAACC,KAAK,CAACC,UAAU,GACrD1B,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIV,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEkC,WAAW,CAACC,KAAK,CAACE,SACjD;QACDnB,OAAO,EAAEQ,IAAK;QACdnB,QAAQ,EAAEA,QAAS;QACnBuB,MAAM,EAAEhB,KAAK,GAAG,OAAO,GAAGiB,SAAU;QACpCpB,KAAK,EAAEA,KAAK,GAAG,MAAM,GAAG,OAAQ;QAChCqB,SAAS,EAAEhB;MAAqB,CACjC,CACS,CAAC;IAEjB,KAAK,SAAS;MACZ,OACE9B,KAAA,CAAA0C,aAAA,CAACnC,UAAU,EAAAoC,QAAA,KAAKJ,eAAe;QAAEa,UAAU;MAAA,IACzCpD,KAAA,CAAA0C,aAAA,CAACpC,SAAS;QAAC+C,MAAM,EAAC;MAAS,GACzBrD,KAAA,CAAA0C,aAAA,CAAC/B,wBAAwB,CAAC2C,QAAQ;QAChC7B,KAAK,EAAE;UACLA,KAAK,EAAEe,IAAI,GAAG,IAAI,GAAGC,KAAK,GAAG,KAAK,GAAGI,SAAS;UAC9CU,QAAQ,EAAEtB,kBAAkB;UAC5BW,MAAM,EAAEhB,KAAK,GAAG,OAAO,GAAGiB,SAAS;UACnCxB;QACF;MAAE,GAEFrB,KAAA,CAAA0C,aAAA,CAACtC,YAAY;QACX2C,IAAI,EACFxB,MAAM,aAANA,MAAM,cAANA,MAAM,GAAIT,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEkC,WAAW,CAACC,KAAK,CAACC,UAC5C;QACDzB,KAAK,EAAC;MAAI,CACX,CAAC,EACFzB,KAAA,CAAA0C,aAAA,CAACtC,YAAY;QACX2C,IAAI,EACFvB,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIV,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEkC,WAAW,CAACC,KAAK,CAACE,SAC7C;QACD1B,KAAK,EAAC;MAAK,CACZ,CACgC,CAC1B,CACD,CAAC;IAEjB,KAAK,iBAAiB;MACpB,OACEzB,KAAA,CAAA0C,aAAA,CAACnC,UAAU,EAAKgC,eAAe,EAC7BvC,KAAA,CAAA0C,aAAA,CAACtC,YAAY;QACXW,EAAE,EAAEA,EAAG;QACPK,OAAO,EAAC,UAAU;QAClB2B,IAAI,EACFP,IAAI,GACAjB,MAAM,aAANA,MAAM,cAANA,MAAM,GAAIT,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEkC,WAAW,CAACC,KAAK,CAACC,UAAU,GACrD1B,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIV,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEkC,WAAW,CAACC,KAAK,CAACE,SACjD;QACDnB,OAAO,EAAEQ,IAAK;QACdnB,QAAQ,EAAEA,QAAS;QACnBuB,MAAM,EAAEhB,KAAK,GAAG,OAAO,GAAGiB,SAAU;QACpCpB,KAAK,EAAEA,KAAK,GAAG,MAAM,GAAG,OAAQ;QAChCqB,SAAS,EAAEhB;MAAqB,CACjC,CACS,CAAC;EAEnB;AACF;AAEAlB,MAAM,CAAC4C,qBAAqB,GAAG,IAAI;AACnC,eAAe5C,MAAM"}

package/extensions/forms/FieldBlock/FieldBlock.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ComponentProps, FieldProps } from '../types';
-export type Props = Pick<FieldProps, keyof ComponentProps | 'layout' | 'label' | 'labelDescription' | 'labelSecondary' | 'info' | 'warning' | 'error' | 'disabled'> & {
+export type Props = Pick<FieldProps, keyof ComponentProps | 'layout' | 'label' | 'info' | 'warning' | 'error' | 'disabled'> & {
     forId?: string;
     contentClassName?: string;
     children: React.ReactNode;