@dnb/eufemia 10.7.0 → 10.8.0

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

@@ -1 +1 @@
-{"version":3,"file":"Selection.js","names":["React","useCallback","Div","Dropdown","Radio","Checkbox","classnames","forwardSpaceProps","Option","useField","Selection","props","className","variant","label","layout","placeholder","value","error","disabled","emptyValue","width","onBlur","onFocus","onChange","children","handleDropdownChange","data","selected_key","handleRadioChange","undefined","handleHide","onBlurValue","createElement","_extends","Children","toArray","filter","child","isValidElement","type","map","i","key","title","String","Group","layout_direction","on_change","vertical","text","content","_em","list_class","portal_class","default_value","label_direction","status","message","on_show","on_hide","stretch","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/Selection.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport { Div } from '../../../elements'\nimport { Dropdown, Radio, Checkbox } from '../../../components'\nimport classnames from 'classnames'\nimport { forwardSpaceProps } from '../utils'\nimport Option from './Option'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps } from '../field-types'\n\nexport type Props = ComponentProps &\n  FieldProps<string | number> & {\n    children?: React.ReactNode\n    variant?: 'dropdown' | 'radio' | 'checkbox'\n    // Styling\n    width?: 'medium' | 'large' | 'stretch'\n  }\n\nfunction Selection(props: Props) {\n  const {\n    className,\n    variant,\n    label,\n    layout = 'vertical',\n    placeholder,\n    value,\n    error,\n    disabled,\n    emptyValue,\n    width = 'large',\n    onBlur,\n    onFocus,\n    onChange,\n    children,\n  } = useField(props)\n\n  const handleDropdownChange = useCallback(\n    ({ data: { selected_key } }) => {\n      onChange?.(!selected_key ? emptyValue : selected_key)\n    },\n    [onChange, emptyValue]\n  )\n\n  const handleRadioChange = useCallback(\n    ({ value }) => {\n      onChange?.(value === undefined ? emptyValue : value)\n    },\n    [onChange, emptyValue]\n  )\n\n  const handleHide = useCallback(\n    ({ data }) => {\n      // Provide a value because selecting an option will lead to onChange and onBlur called in parallel, so onBlur might receive the old value\n      onBlur?.({ onBlurValue: data?.selected_key })\n    },\n    [onBlur]\n  )\n\n  switch (variant) {\n    case 'checkbox':\n      return (\n        <Div\n          className={classnames('dnb-forms-field-selection', className)}\n          {...forwardSpaceProps(props)}\n        >\n          {React.Children.toArray(children)\n            .filter(\n              (child) =>\n                React.isValidElement(child) && child.type === Option\n            )\n            .map((child: React.ReactElement, i) => (\n              <Checkbox\n                key={child.props.value ?? `option-${i}`}\n                label={child.props.title ?? child.props.children}\n                value={String(child.props.value ?? '')}\n              />\n            ))}\n        </Div>\n      )\n    case 'radio':\n      return (\n        <Radio.Group\n          className={classnames('dnb-forms-field-selection', className)}\n          label={label}\n          layout_direction=\"column\"\n          on_change={handleRadioChange}\n          {...forwardSpaceProps(props)}\n          vertical\n        >\n          {React.Children.toArray(children)\n            .filter(\n              (child) =>\n                React.isValidElement(child) && child.type === Option\n            )\n            .map((child: React.ReactElement, i) => (\n              <Radio\n                key={child.props.value ?? `option-${i}`}\n                label={child.props.title ?? child.props.children}\n                value={String(child.props.value ?? '')}\n              />\n            ))}\n        </Radio.Group>\n      )\n    default:\n    case 'dropdown': {\n      const data = React.Children.map(children, (child) => {\n        if (React.isValidElement(child) && child.type === Option) {\n          // Option components\n          return child.props.text\n            ? {\n                selected_key: String(child.props.value ?? ''),\n                content: [\n                  child.props.title ?? child.props.children ?? (\n                    <em>Untitled</em>\n                  ),\n                  child.props.text,\n                ],\n              }\n            : {\n                selected_key: child.props.value,\n                content: child.props.title ?? child.props.children,\n              }\n        }\n\n        // For other children, just show them as content\n        return {\n          content: child,\n        }\n      })\n\n      return (\n        <Dropdown\n          className={classnames(\n            'dnb-forms-field-selection',\n            width !== 'stretch' &&\n              `dnb-forms-field-selection--width-${width}`,\n            className\n          )}\n          list_class=\"dnb-forms-field-selection__list\"\n          portal_class=\"dnb-forms-field-selection__portal\"\n          title={placeholder}\n          default_value={String(value ?? '')}\n          label={label}\n          label_direction={layout}\n          status={error?.message}\n          disabled={disabled}\n          data={data}\n          on_change={handleDropdownChange}\n          on_show={onFocus}\n          on_hide={handleHide}\n          {...forwardSpaceProps(props)}\n          stretch={width === 'stretch'}\n        />\n      )\n    }\n  }\n}\n\nSelection._supportsEufemiaSpacingProps = true\nexport default Selection\n"],"mappings":"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"}
+{"version":3,"file":"Selection.js","names":["React","useMemo","useContext","useCallback","Button","Dropdown","Radio","HelpButton","ButtonRow","FieldBlock","classnames","forwardSpaceProps","makeUniqueId","SharedContext","Option","useField","FormError","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","data","selected_key","handleRadioChange","undefined","handleShow","handleHide","cn","fieldBlockProps","_objectSpread","forId","options","Children","toArray","filter","child","isValidElement","type","map","option","title","handleSelect","selected","createElement","Group","_extends","layout_direction","vertical","on_change","String","i","key","text","on_click","status","optionsData","content","_em","translation","Forms","selectionClearSelected","Boolean","list_class","portal_class","label_direction","message","Error","toString","suffix","contents","on_show","on_hide","stretch","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/Selection.tsx"],"sourcesContent":["import React, { useMemo, useContext, useCallback } from 'react'\nimport { Button, Dropdown, Radio, HelpButton } from '../../../components'\nimport ButtonRow from '../Layout/ButtonRow'\nimport FieldBlock from '../FieldBlock'\nimport classnames from 'classnames'\nimport { forwardSpaceProps } from '../utils'\nimport { makeUniqueId } from '../../../shared/component-helper'\nimport SharedContext from '../../../shared/Context'\nimport Option from './Option'\nimport { useField } from './hooks'\nimport { FormError } from '../types'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps, FieldHelpProps } from '../field-types'\n\ninterface IOption {\n  title: string | React.ReactNode\n  value: number | string\n  handleSelect: () => void\n}\n\nexport type Props = ComponentProps &\n  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  } = useField(props)\n\n  const handleDropdownChange = useCallback(\n    ({ data: { selected_key } }) => {\n      handleChange?.(\n        !selected_key || selected_key === clearValue\n          ? emptyValue\n          : selected_key\n      )\n    },\n    [handleChange, emptyValue, clearValue]\n  )\n\n  const handleRadioChange = 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 useFields handleFocus and handleBlur sending out old\n  // copies of value as arguments.\n  const handleShow = useCallback(\n    ({ data }) => {\n      setHasFocus(true, data?.selected_key)\n    },\n    [setHasFocus]\n  )\n\n  const handleHide = useCallback(\n    ({ data }) => {\n      setHasFocus(false, data?.selected_key)\n    },\n    [setHasFocus]\n  )\n\n  const cn = classnames('dnb-forms-field-selection', className)\n\n  const fieldBlockProps = {\n    forId: id,\n    className: cn,\n    ...forwardSpaceProps(props),\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription,\n    labelSecondary,\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          title: option.props.title ?? option.props.children,\n          value: option.props.value,\n          handleSelect: () => {\n            const selected = option.props.value\n\n            handleChange?.(selected === value ? emptyValue : selected)\n          },\n        })),\n    [children, value, emptyValue, handleChange]\n  )\n\n  switch (variant) {\n    case 'radio':\n      return (\n        <Radio.Group\n          className={cn}\n          label={label}\n          layout_direction={\n            optionsLayout === 'horizontal' ? 'row' : 'column'\n          }\n          vertical={layout === 'vertical'}\n          on_change={handleRadioChange}\n          value={String(value ?? '')}\n          {...forwardSpaceProps(props)}\n        >\n          {options.map((option, i) => (\n            <Radio\n              key={`option-${i}-${option.value}`}\n              label={option.title}\n              value={String(option.value ?? '')}\n            />\n          ))}\n        </Radio.Group>\n      )\n    case 'button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ButtonRow>\n            {options.map((option, i) => (\n              <Button\n                key={`option-${i}-${option.value}`}\n                id={id}\n                text={option.title}\n                on_click={option.handleSelect}\n                variant={option.value === value ? undefined : 'secondary'}\n                status={error ? 'error' : undefined}\n                disabled={disabled}\n              />\n            ))}\n          </ButtonRow>\n        </FieldBlock>\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                selected_key: String(child.props.value ?? ''),\n                content: [\n                  child.props.title ?? child.props.children ?? (\n                    <em>Untitled</em>\n                  ),\n                  child.props.text,\n                ],\n              }\n            : {\n                selected_key: child.props.value,\n                content: child.props.title ?? child.props.children,\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              selected_key: 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        <Dropdown\n          className={classnames(\n            'dnb-forms-field-selection',\n            width !== 'stretch' &&\n              `dnb-forms-field-selection--width-${width}`,\n            className\n          )}\n          list_class=\"dnb-forms-field-selection__list\"\n          portal_class=\"dnb-forms-field-selection__portal\"\n          title={placeholder}\n          value={String(value ?? '')}\n          label={label}\n          label_direction={layout}\n          status={\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          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          {...forwardSpaceProps(props)}\n          stretch={width === 'stretch'}\n        />\n      )\n    }\n  }\n}\n\nSelection._supportsEufemiaSpacingProps = true\nexport default Selection\n"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import { InputProps } from '../../../components/input/Input';
 import { InputMaskedProps } from '../../../components/InputMasked';
 import type { ComponentProps } from '../component-types';
-import type { FieldProps } from '../field-types';
+import type { FieldProps, FieldHelpProps } from '../field-types';
 interface ErrorMessages {
     required?: string;
     schema?: string;
@@ -9,7 +9,7 @@ interface ErrorMessages {
     maxLength?: string;
     pattern?: string;
 }
-export type Props = ComponentProps & FieldProps<string, undefined, ErrorMessages> & {
+export type Props = ComponentProps & FieldHelpProps & FieldProps<string, undefined | string, ErrorMessages> & {
     inputClassName?: string;
     type?: InputProps['type'];
     multiline?: boolean;
@@ -23,7 +23,7 @@ export type Props = ComponentProps & FieldProps<string, undefined, ErrorMessages
     minLength?: number;
     maxLength?: number;
     pattern?: string;
-    width?: false | 'medium' | 'large' | 'stretch';
+    width?: false | 'small' | 'medium' | 'large' | 'stretch';
 };
 declare function StringComponent(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace StringComponent {

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

@@ -4,7 +4,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useContext } from 'react';
 import classnames from 'classnames';
-import { Input, Textarea } from '../../../components';
+import { HelpButton, Input, Textarea } from '../../../components';
 import InputMasked from '../../../components/InputMasked';
 import { forwardSpaceProps } from '../utils';
 import SharedContext from '../../../shared/Context';
@@ -33,6 +33,9 @@ function StringComponent(props) {
       if (value === '') {
         return props.emptyValue;
       }
+      if (value.charAt(0) === '0' && cleanedValue === '') {
+        return '0';
+      }
       return cleanedValue ?? value;
     },
     width: props.width ?? 'large'
@@ -52,6 +55,7 @@ function StringComponent(props) {
     warning,
     error,
     disabled,
+    help,
     multiline,
     leftIcon,
     rightIcon,
@@ -61,9 +65,9 @@ function StringComponent(props) {
     characterCounter,
     mask,
     width,
-    onFocus,
-    onBlur,
-    onChange
+    handleFocus,
+    handleBlur,
+    handleChange
   } = useField(preparedProps);
   const characterCounterElement = characterCounter ? props.maxLength ? `${(value === null || value === void 0 ? void 0 : value.length) ?? '0'}/${props.maxLength}` : `${(value === null || value === void 0 ? void 0 : value.length) ?? '0'}` : undefined;
   const cn = classnames('dnb-forms-field-string__input', inputClassName);
@@ -83,9 +87,13 @@ function StringComponent(props) {
     className: cn,
     placeholder: placeholder,
     value: value,
-    on_focus: onFocus,
-    on_blur: onBlur,
-    on_change: onChange,
+    suffix: help ? React.createElement(HelpButton, {
+      title: help.title,
+      left: "x-small"
+    }, help.contents) : undefined,
+    on_focus: handleFocus,
+    on_blur: handleBlur,
+    on_change: handleChange,
     autoresize: autoresize,
     autoresize_max_rows: autoresizeMaxRows,
     disabled: disabled,
@@ -97,9 +105,12 @@ function StringComponent(props) {
     value: (value === null || value === void 0 ? void 0 : value.toString()) ?? '',
     icon: leftIcon ?? rightIcon,
     icon_position: rightIcon && !leftIcon ? 'right' : undefined,
-    on_focus: onFocus,
-    on_blur: onBlur,
-    on_change: onChange,
+    suffix: help ? React.createElement(HelpButton, {
+      title: help.title
+    }, help.contents) : undefined,
+    on_focus: handleFocus,
+    on_blur: handleBlur,
+    on_change: handleChange,
     disabled: disabled,
     stretch: width !== undefined
   }) : React.createElement(Input, {
@@ -111,9 +122,12 @@ function StringComponent(props) {
     icon: leftIcon ?? rightIcon,
     icon_position: rightIcon && !leftIcon ? 'right' : undefined,
     clear: clear,
-    on_focus: onFocus,
-    on_blur: onBlur,
-    on_change: onChange,
+    suffix: help ? React.createElement(HelpButton, {
+      title: help.title
+    }, help.contents) : undefined,
+    on_focus: handleFocus,
+    on_blur: handleBlur,
+    on_change: handleChange,
     disabled: disabled,
     stretch: width !== undefined
   }));

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

@@ -1 +1 @@
-{"version":3,"file":"String.js","names":["React","useContext","classnames","Input","Textarea","InputMasked","forwardSpaceProps","SharedContext","FieldBlock","useField","StringComponent","props","_props$minLength","_props$maxLength","sharedContext","preparedProps","_objectSpread","errorMessages","required","translation","Forms","inputErrorRequired","minLength","stringInputErrorMinLength","replace","toString","maxLength","stringInputErrorMaxLength","pattern","inputErrorPattern","schema","type","fromInput","value","cleanedValue","emptyValue","width","id","className","inputClassName","layout","placeholder","label","labelDescription","labelSecondary","info","warning","error","disabled","multiline","leftIcon","rightIcon","clear","autoresize","autoresizeMaxRows","characterCounter","mask","onFocus","onBlur","onChange","characterCounterElement","length","undefined","cn","createElement","_extends","forId","contentsWidth","on_focus","on_blur","on_change","autoresize_max_rows","stretch","icon","icon_position","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/String.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport { Input, Textarea } from '../../../components'\nimport { InputProps } from '../../../components/input/Input'\nimport InputMasked, {\n  InputMaskedProps,\n} from '../../../components/InputMasked'\nimport { forwardSpaceProps } from '../utils'\nimport SharedContext from '../../../shared/Context'\nimport FieldBlock from '../FieldBlock'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps } from '../field-types'\n\ninterface ErrorMessages {\n  required?: string\n  schema?: string\n  minLength?: string\n  maxLength?: string\n  pattern?: string\n}\nexport type Props = ComponentProps &\n  FieldProps<string, undefined, ErrorMessages> & {\n    inputClassName?: string\n    type?: InputProps['type']\n    multiline?: boolean\n    leftIcon?: string\n    rightIcon?: string\n    clear?: boolean\n    autoresize?: boolean\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 | 'medium' | 'large' | 'stretch'\n  }\n\nfunction StringComponent(props: Props) {\n  const sharedContext = useContext(SharedContext)\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages: {\n      required: sharedContext?.translation.Forms.inputErrorRequired,\n      minLength:\n        sharedContext?.translation.Forms.stringInputErrorMinLength.replace(\n          '{minLength}',\n          props.minLength?.toString()\n        ),\n      maxLength:\n        sharedContext?.translation.Forms.stringInputErrorMaxLength.replace(\n          '{maxLength}',\n          props.maxLength?.toString()\n        ),\n      pattern: sharedContext?.translation.Forms.inputErrorPattern,\n      ...props.errorMessages,\n    },\n    schema: props.schema ?? {\n      type: 'string',\n      minLength: props.minLength,\n      maxLength: props.maxLength,\n      pattern: props.pattern,\n    },\n    fromInput: ({\n      value,\n      cleanedValue,\n    }: {\n      value: string\n      cleanedValue: string\n    }) => {\n      if (value === '') {\n        return props.emptyValue\n      }\n      // Cleaned value for masked\n      return cleanedValue ?? value\n    },\n    width: props.width ?? 'large',\n  }\n  const {\n    id,\n    className,\n    inputClassName,\n    layout,\n    type,\n    placeholder,\n    label,\n    labelDescription,\n    labelSecondary,\n    value,\n    info,\n    warning,\n    error,\n    disabled,\n    multiline,\n    leftIcon,\n    rightIcon,\n    clear,\n    autoresize = true,\n    autoresizeMaxRows = 6,\n    characterCounter,\n    mask,\n    width,\n    onFocus,\n    onBlur,\n    onChange,\n  } = useField(preparedProps)\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  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      error={error}\n      contentsWidth={width !== false ? width : undefined}\n      {...forwardSpaceProps(props)}\n    >\n      {multiline ? (\n        <Textarea\n          id={id}\n          className={cn}\n          placeholder={placeholder}\n          value={value}\n          on_focus={onFocus}\n          on_blur={onBlur}\n          on_change={onChange}\n          autoresize={autoresize}\n          autoresize_max_rows={autoresizeMaxRows}\n          disabled={disabled}\n          stretch={width !== undefined}\n        />\n      ) : mask ? (\n        <InputMasked\n          className={cn}\n          mask={mask}\n          placeholder={placeholder}\n          value={value?.toString() ?? ''}\n          icon={leftIcon ?? rightIcon}\n          icon_position={rightIcon && !leftIcon ? 'right' : undefined}\n          on_focus={onFocus}\n          on_blur={onBlur}\n          on_change={onChange}\n          disabled={disabled}\n          stretch={width !== undefined}\n        />\n      ) : (\n        <Input\n          id={id}\n          className={cn}\n          type={type}\n          placeholder={placeholder}\n          value={value?.toString() ?? ''}\n          icon={leftIcon ?? rightIcon}\n          icon_position={rightIcon && !leftIcon ? 'right' : undefined}\n          clear={clear}\n          on_focus={onFocus}\n          on_blur={onBlur}\n          on_change={onChange}\n          disabled={disabled}\n          stretch={width !== undefined}\n        />\n      )}\n    </FieldBlock>\n  )\n}\n\nStringComponent._supportsEufemiaSpacingProps = true\nexport default StringComponent\n"],"mappings":"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"}
+{"version":3,"file":"String.js","names":["React","useContext","classnames","HelpButton","Input","Textarea","InputMasked","forwardSpaceProps","SharedContext","FieldBlock","useField","StringComponent","props","_props$minLength","_props$maxLength","sharedContext","preparedProps","_objectSpread","errorMessages","required","translation","Forms","inputErrorRequired","minLength","stringInputErrorMinLength","replace","toString","maxLength","stringInputErrorMaxLength","pattern","inputErrorPattern","schema","type","fromInput","value","cleanedValue","emptyValue","charAt","width","id","className","inputClassName","layout","placeholder","label","labelDescription","labelSecondary","info","warning","error","disabled","help","multiline","leftIcon","rightIcon","clear","autoresize","autoresizeMaxRows","characterCounter","mask","handleFocus","handleBlur","handleChange","characterCounterElement","length","undefined","cn","createElement","_extends","forId","contentsWidth","suffix","title","left","contents","on_focus","on_blur","on_change","autoresize_max_rows","stretch","icon","icon_position","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/String.tsx"],"sourcesContent":["import React, { useContext } 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 { forwardSpaceProps } from '../utils'\nimport SharedContext from '../../../shared/Context'\nimport FieldBlock from '../FieldBlock'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps, FieldHelpProps } from '../field-types'\n\ninterface ErrorMessages {\n  required?: string\n  schema?: string\n  minLength?: string\n  maxLength?: string\n  pattern?: string\n}\nexport type Props = ComponentProps &\n  FieldHelpProps &\n  FieldProps<string, undefined | string, ErrorMessages> & {\n    inputClassName?: string\n    type?: InputProps['type']\n    multiline?: boolean\n    leftIcon?: string\n    rightIcon?: string\n    clear?: boolean\n    autoresize?: boolean\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\n  const preparedProps: Props = {\n    ...props,\n    errorMessages: {\n      required: sharedContext?.translation.Forms.inputErrorRequired,\n      minLength:\n        sharedContext?.translation.Forms.stringInputErrorMinLength.replace(\n          '{minLength}',\n          props.minLength?.toString()\n        ),\n      maxLength:\n        sharedContext?.translation.Forms.stringInputErrorMaxLength.replace(\n          '{maxLength}',\n          props.maxLength?.toString()\n        ),\n      pattern: sharedContext?.translation.Forms.inputErrorPattern,\n      ...props.errorMessages,\n    },\n    schema: props.schema ?? {\n      type: 'string',\n      minLength: props.minLength,\n      maxLength: props.maxLength,\n      pattern: props.pattern,\n    },\n    fromInput: ({\n      value,\n      cleanedValue,\n    }: {\n      value: string\n      cleanedValue: string\n    }) => {\n      if (value === '') {\n        return props.emptyValue\n      }\n      if (value.charAt(0) === '0' && cleanedValue === '') {\n        // Special case - Since InputMasked sends out empty string when entering the digit 0 as first character (possibly changing in the future)\n        return '0'\n      }\n\n      return cleanedValue ?? value\n    },\n    width: props.width ?? 'large',\n  }\n  const {\n    id,\n    className,\n    inputClassName,\n    layout,\n    type,\n    placeholder,\n    label,\n    labelDescription,\n    labelSecondary,\n    value,\n    info,\n    warning,\n    error,\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  } = useField(preparedProps)\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  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      error={error}\n      contentsWidth={width !== false ? width : undefined}\n      {...forwardSpaceProps(props)}\n    >\n      {multiline ? (\n        <Textarea\n          id={id}\n          className={cn}\n          placeholder={placeholder}\n          value={value}\n          suffix={\n            help ? (\n              <HelpButton title={help.title} left=\"x-small\">\n                {help.contents}\n              </HelpButton>\n            ) : undefined\n          }\n          on_focus={handleFocus}\n          on_blur={handleBlur}\n          on_change={handleChange}\n          autoresize={autoresize}\n          autoresize_max_rows={autoresizeMaxRows}\n          disabled={disabled}\n          stretch={width !== undefined}\n        />\n      ) : mask ? (\n        <InputMasked\n          className={cn}\n          mask={mask}\n          placeholder={placeholder}\n          value={value?.toString() ?? ''}\n          icon={leftIcon ?? rightIcon}\n          icon_position={rightIcon && !leftIcon ? 'right' : undefined}\n          suffix={\n            help ? (\n              <HelpButton title={help.title}>{help.contents}</HelpButton>\n            ) : undefined\n          }\n          on_focus={handleFocus}\n          on_blur={handleBlur}\n          on_change={handleChange}\n          disabled={disabled}\n          stretch={width !== undefined}\n        />\n      ) : (\n        <Input\n          id={id}\n          className={cn}\n          type={type}\n          placeholder={placeholder}\n          value={value?.toString() ?? ''}\n          icon={leftIcon ?? rightIcon}\n          icon_position={rightIcon && !leftIcon ? 'right' : undefined}\n          clear={clear}\n          suffix={\n            help ? (\n              <HelpButton title={help.title}>{help.contents}</HelpButton>\n            ) : undefined\n          }\n          on_focus={handleFocus}\n          on_blur={handleBlur}\n          on_change={handleChange}\n          disabled={disabled}\n          stretch={width !== undefined}\n        />\n      )}\n    </FieldBlock>\n  )\n}\n\nStringComponent._supportsEufemiaSpacingProps = true\nexport default StringComponent\n"],"mappings":"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"}

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

@@ -23,30 +23,31 @@ function Toggle(props) {
     disabled,
     label,
     labelDescription,
+    labelSecondary,
     textOn,
     textOff,
     value,
     info,
     warning,
     error,
-    onChange
+    handleChange
   } = useField(props);
   const handleCheckboxChange = useCallback(({
     checked
   }) => {
-    onChange === null || onChange === void 0 ? void 0 : onChange(checked ? valueOn : valueOff);
-  }, [onChange, valueOn, valueOff]);
+    handleChange === null || handleChange === void 0 ? void 0 : handleChange(checked ? valueOn : valueOff);
+  }, [handleChange, valueOn, valueOff]);
   const setOn = useCallback(() => {
     if (value !== valueOn) {
-      onChange === null || onChange === void 0 ? void 0 : onChange(valueOn);
+      handleChange === null || handleChange === void 0 ? void 0 : handleChange(valueOn);
     }
-  }, [onChange, value, valueOn]);
+  }, [handleChange, value, valueOn]);
   const setOff = useCallback(() => {
     if (value !== valueOff) {
-      onChange === null || onChange === void 0 ? void 0 : onChange(valueOff);
+      handleChange === null || handleChange === void 0 ? void 0 : handleChange(valueOff);
     }
-  }, [onChange, value, valueOff]);
-  const cn = classnames('dnb-forms-field-boolean', className);
+  }, [handleChange, value, valueOff]);
+  const cn = classnames('dnb-forms-field-toggle', className);
   const fieldBlockPropsWithoutLabel = _objectSpread(_objectSpread({
     forId: id,
     className: cn
@@ -58,7 +59,8 @@ function Toggle(props) {
   const fieldBlockProps = _objectSpread(_objectSpread({}, fieldBlockPropsWithoutLabel), {}, {
     layout,
     label,
-    labelDescription
+    labelDescription,
+    labelSecondary
   });
   const isOn = value === valueOn;
   switch (variant) {

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","names":["React","useContext","useCallback","Checkbox","ToggleButton","Button","Space","classnames","ButtonRow","FieldBlock","useField","forwardSpaceProps","SharedContext","Toggle","props","sharedContext","id","className","valueOn","valueOff","layout","variant","disabled","label","labelDescription","textOn","textOff","value","info","warning","error","onChange","handleCheckboxChange","checked","setOn","setOff","cn","fieldBlockPropsWithoutLabel","_objectSpread","forId","fieldBlockProps","isOn","createElement","_extends","on_change","text","translation","Forms","booleanYes","booleanNo","on_click","undefined","status","_Space","bottom","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/Toggle.tsx"],"sourcesContent":["import React, { useContext, useCallback } from 'react'\nimport { Checkbox, ToggleButton, Button, Space } from '../../../components'\nimport classnames from 'classnames'\nimport ButtonRow from '../Layout/ButtonRow'\nimport FieldBlock from '../FieldBlock'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps } from '../field-types'\nimport { forwardSpaceProps } from '../utils'\nimport SharedContext from '../../../shared/Context'\n\nexport type Props = ComponentProps &\n  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    textOn,\n    textOff,\n    value,\n    info,\n    warning,\n    error,\n    onChange,\n  } = useField(props)\n\n  const handleCheckboxChange = useCallback(\n    ({ checked }) => {\n      onChange?.(checked ? valueOn : valueOff)\n    },\n    [onChange, valueOn, valueOff]\n  )\n\n  const setOn = useCallback(() => {\n    if (value !== valueOn) {\n      onChange?.(valueOn)\n    }\n  }, [onChange, value, valueOn])\n\n  const setOff = useCallback(() => {\n    if (value !== valueOff) {\n      onChange?.(valueOff)\n    }\n  }, [onChange, value, valueOff])\n\n  const cn = classnames('dnb-forms-field-boolean', className)\n\n  const fieldBlockPropsWithoutLabel = {\n    forId: id,\n    className: cn,\n    ...forwardSpaceProps(props),\n    info,\n    warning,\n    error,\n  }\n\n  const fieldBlockProps = {\n    ...fieldBlockPropsWithoutLabel,\n    layout,\n    label,\n    labelDescription,\n  }\n\n  const isOn = value === valueOn\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            on_change={handleCheckboxChange}\n            {...forwardSpaceProps(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            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n          />\n        </FieldBlock>\n      )\n    case 'buttons':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ButtonRow>\n            <Button\n              id={id}\n              text={textOn ?? sharedContext?.translation.Forms.booleanYes}\n              on_click={setOn}\n              variant={isOn ? undefined : 'secondary'}\n              status={error ? 'error' : undefined}\n              disabled={disabled}\n            />\n            <Button\n              id={id}\n              text={textOff ?? sharedContext?.translation.Forms.booleanNo}\n              on_click={setOff}\n              variant={isOn ? 'secondary' : undefined}\n              status={error ? 'error' : undefined}\n              disabled={disabled}\n            />\n          </ButtonRow>\n          <Space bottom=\"x-small\" />\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            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n          />\n        </FieldBlock>\n      )\n  }\n}\n\nToggle._supportsEufemiaSpacingProps = true\nexport default Toggle\n"],"mappings":"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"}
+{"version":3,"file":"Toggle.js","names":["React","useContext","useCallback","Checkbox","ToggleButton","Button","Space","classnames","ButtonRow","FieldBlock","useField","forwardSpaceProps","SharedContext","Toggle","props","sharedContext","id","className","valueOn","valueOff","layout","variant","disabled","label","labelDescription","labelSecondary","textOn","textOff","value","info","warning","error","handleChange","handleCheckboxChange","checked","setOn","setOff","cn","fieldBlockPropsWithoutLabel","_objectSpread","forId","fieldBlockProps","isOn","createElement","_extends","on_change","text","translation","Forms","booleanYes","booleanNo","on_click","undefined","status","_Space","bottom","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/Toggle.tsx"],"sourcesContent":["import React, { useContext, useCallback } from 'react'\nimport { Checkbox, ToggleButton, Button, Space } from '../../../components'\nimport classnames from 'classnames'\nimport ButtonRow from '../Layout/ButtonRow'\nimport FieldBlock from '../FieldBlock'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps } from '../field-types'\nimport { forwardSpaceProps } from '../utils'\nimport SharedContext from '../../../shared/Context'\n\nexport type Props = ComponentProps &\n  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  } = useField(props)\n\n  const handleCheckboxChange = useCallback(\n    ({ checked }) => {\n      handleChange?.(checked ? valueOn : valueOff)\n    },\n    [handleChange, valueOn, valueOff]\n  )\n\n  const setOn = useCallback(() => {\n    if (value !== valueOn) {\n      handleChange?.(valueOn)\n    }\n  }, [handleChange, value, valueOn])\n\n  const setOff = useCallback(() => {\n    if (value !== valueOff) {\n      handleChange?.(valueOff)\n    }\n  }, [handleChange, value, valueOff])\n\n  const cn = classnames('dnb-forms-field-toggle', className)\n\n  const fieldBlockPropsWithoutLabel = {\n    forId: id,\n    className: cn,\n    ...forwardSpaceProps(props),\n    info,\n    warning,\n    error,\n  }\n\n  const fieldBlockProps = {\n    ...fieldBlockPropsWithoutLabel,\n    layout,\n    label,\n    labelDescription,\n    labelSecondary,\n  }\n\n  const isOn = value === valueOn\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            on_change={handleCheckboxChange}\n            {...forwardSpaceProps(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            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n          />\n        </FieldBlock>\n      )\n    case 'buttons':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ButtonRow>\n            <Button\n              id={id}\n              text={textOn ?? sharedContext?.translation.Forms.booleanYes}\n              on_click={setOn}\n              variant={isOn ? undefined : 'secondary'}\n              status={error ? 'error' : undefined}\n              disabled={disabled}\n            />\n            <Button\n              id={id}\n              text={textOff ?? sharedContext?.translation.Forms.booleanNo}\n              on_click={setOff}\n              variant={isOn ? 'secondary' : undefined}\n              status={error ? 'error' : undefined}\n              disabled={disabled}\n            />\n          </ButtonRow>\n          <Space bottom=\"x-small\" />\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            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n          />\n        </FieldBlock>\n      )\n  }\n}\n\nToggle._supportsEufemiaSpacingProps = true\nexport default Toggle\n"],"mappings":"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"}

package/es/extensions/forms/Field/fields.scss

@@ -1,2 +1,2 @@
-$forms-field-width-medium: 176px;
-$forms-field-width-large: 336px;
+$forms-field-width-medium: 11rem;
+$forms-field-width-large: 21rem;

package/es/extensions/forms/Field/hooks/useField.d.ts

@@ -1,11 +1,9 @@
 import type { FieldProps } from '../../field-types';
-interface ReturnPropOverrides {
-    onFocus: (options?: {
-        onFocusValue: unknown;
-    }) => void;
-    onBlur: (options?: {
-        onBlurValue: unknown;
-    }) => void;
+interface ReturnAdditional {
+    setHasFocus: (hasFocus: boolean, valueOverride?: unknown) => void;
+    handleFocus: FieldProps<unknown>['onFocus'];
+    handleBlur: FieldProps<unknown>['onBlur'];
+    handleChange: FieldProps<unknown>['onChange'];
 }
-export default function useField<Props extends FieldProps<any>>(props: Props): Omit<Props, keyof ReturnPropOverrides> & ReturnPropOverrides;
+export default function useField<Props extends FieldProps<unknown>>(props: Props): Props & ReturnAdditional;
 export {};

package/es/extensions/forms/Field/hooks/useField.js

@@ -14,11 +14,11 @@ export default function useField(props) {
     emptyValue,
     required,
     error: errorProp,
-    onFocus: onFocusProp,
-    onBlur: onBlurProp,
-    onChange: onChangeProp,
-    validator: validatorProp,
-    onBlurValidator: onBlurValidatorProp,
+    onFocus,
+    onBlur,
+    onChange,
+    validator,
+    onBlurValidator,
     schema,
     errorMessages,
     validateInitially,
@@ -62,8 +62,8 @@ export default function useField(props) {
     setFieldGroupError === null || setFieldGroupError === void 0 ? void 0 : setFieldGroupError(path ?? id, errorWithCorrectMessage);
   }, [path, id, errorMessages, dataContextSetPathWithError, setFieldGroupError]);
   const validateValue = useCallback(valueToValidate => {
-    if (typeof validatorProp === 'function') {
-      Promise.resolve(validatorProp(valueToValidate)).then(setErrorAndUpdateDataContext);
+    if (typeof validator === 'function') {
+      Promise.resolve(validator(valueToValidate)).then(setErrorAndUpdateDataContext);
     }
     if (valueToValidate === emptyValue && required) {
       const error = new FormError('The value is required', {
@@ -84,7 +84,7 @@ export default function useField(props) {
       setErrorAndUpdateDataContext(undefined);
       return undefined;
     }
-  }, [schemaValidator, emptyValue, required, setErrorAndUpdateDataContext, validatorProp]);
+  }, [schemaValidator, emptyValue, required, setErrorAndUpdateDataContext, validator]);
   useEffect(() => {
     if (!error && path && dataContextErrors !== null && dataContextErrors !== void 0 && dataContextErrors[path]) {
       setErrorAndUpdateDataContext(dataContextErrors[path]);
@@ -96,36 +96,38 @@ export default function useField(props) {
       setShowFieldGroupError === null || setShowFieldGroupError === void 0 ? void 0 : setShowFieldGroupError(path ?? id, true);
     }
   }, [id, path, dataContext.showAllErrors, setShowFieldGroupError]);
-  const onFocus = useCallback(({
-    onFocusValue
-  }) => {
-    onFocusProp === null || onFocusProp === void 0 ? void 0 : onFocusProp(onFocusValue ?? value);
-  }, [value, onFocusProp]);
-  const onBlur = useCallback(({
-    onBlurValue
-  }) => {
-    onBlurProp === null || onBlurProp === void 0 ? void 0 : onBlurProp(onBlurValue ?? value);
-    if (!changedRef.current && !validateUnchanged) {
-      return;
+  const setHasFocus = useCallback((hasFocus, valueOverride) => {
+    if (hasFocus) {
+      onFocus === null || onFocus === void 0 ? void 0 : onFocus(valueOverride ?? value);
+    } else {
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur(valueOverride ?? value);
+      if (!changedRef.current && !validateUnchanged) {
+        return;
+      }
+      if (typeof onBlurValidator === 'function') {
+        Promise.resolve(onBlurValidator(valueOverride ?? value)).then(setErrorAndUpdateDataContext);
+      }
+      setShowError(true);
+      setShowFieldGroupError === null || setShowFieldGroupError === void 0 ? void 0 : setShowFieldGroupError(path ?? id, true);
     }
-    if (typeof onBlurValidatorProp === 'function') {
-      Promise.resolve(onBlurValidatorProp(onBlurValue ?? value)).then(setErrorAndUpdateDataContext);
+  }, [id, path, value, validateUnchanged, onFocus, onBlur, onBlurValidator, setErrorAndUpdateDataContext, setShowFieldGroupError]);
+  const handleFocus = useCallback(() => setHasFocus(true), [setHasFocus]);
+  const handleBlur = useCallback(() => setHasFocus(false), [setHasFocus]);
+  const handleChange = useCallback(argFromInput => {
+    const newValue = fromInput(argFromInput);
+    if (newValue === value) {
+      return;
     }
-    setShowError(true);
-    setShowFieldGroupError === null || setShowFieldGroupError === void 0 ? void 0 : setShowFieldGroupError(path ?? id, true);
-  }, [id, path, value, onBlurProp, validateUnchanged, onBlurValidatorProp, setErrorAndUpdateDataContext, setShowFieldGroupError]);
-  const onChange = useCallback(valueFromInput => {
-    const newValue = fromInput(valueFromInput);
     setValue(newValue);
     changedRef.current = true;
     setShowError(false);
     setShowFieldGroupError === null || setShowFieldGroupError === void 0 ? void 0 : setShowFieldGroupError(path ?? id, false);
     validateValue(newValue);
-    onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(newValue);
+    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
     if (path) {
       dataContextHandlePathChange === null || dataContextHandlePathChange === void 0 ? void 0 : dataContextHandlePathChange(path, newValue);
     }
-  }, [id, path, onChangeProp, validateValue, dataContextHandlePathChange, setShowFieldGroupError, fromInput]);
+  }, [id, path, value, onChange, validateValue, dataContextHandlePathChange, setShowFieldGroupError, fromInput]);
   const exportError = useMemo(() => errorProp ?? error, [errorProp, error]);
   useEffect(() => {
     if (path) {
@@ -142,9 +144,10 @@ export default function useField(props) {
     id,
     value: toInput(value),
     error: inFieldGroup ? undefined : showError ? exportError : undefined,
-    onFocus,
-    onBlur,
-    onChange
+    setHasFocus,
+    handleFocus,
+    handleBlur,
+    handleChange
   });
 }
 //# sourceMappingURL=useField.js.map

package/es/extensions/forms/Field/hooks/useField.js.map

@@ -1 +1 @@
-{"version":3,"file":"useField.js","names":["useRef","useEffect","useContext","useCallback","useMemo","useState","pointer","FormError","ajv","ajvErrorsToOneFormError","DataContext","FieldGroupContext","makeUniqueId","useField","props","path","emptyValue","required","error","errorProp","onFocus","onFocusProp","onBlur","onBlurProp","onChange","onChangeProp","validator","validatorProp","onBlurValidator","onBlurValidatorProp","schema","errorMessages","validateInitially","validateUnchanged","toInput","value","fromInput","id","dataContext","Context","fieldGroupContext","inFieldGroup","Boolean","setFieldError","setFieldGroupError","setShowFieldError","setShowFieldGroupError","handlePathChange","dataContextHandlePathChange","setPathWithError","dataContextSetPathWithError","errors","dataContextErrors","substring","Error","externalValue","data","undefined","has","get","setValue","changedRef","setError","showError","setShowError","schemaValidator","Object","keys","length","compile","setErrorAndUpdateDataContext","errorWithCorrectMessage","validationRule","validateValue","valueToValidate","Promise","resolve","then","showAllErrors","onFocusValue","onBlurValue","current","valueFromInput","newValue","exportError","handleMountField","handleUnMountField","_objectSpread"],"sources":["../../../../../../src/extensions/forms/Field/hooks/useField.ts"],"sourcesContent":["import {\n  useRef,\n  useEffect,\n  useContext,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react'\nimport pointer from 'json-pointer'\nimport { FormError } from '../../types'\nimport ajv, { ajvErrorsToOneFormError } from '../../utils/ajv'\nimport DataContext from '../../DataContext'\nimport type { FieldProps } from '../../field-types'\nimport { FieldGroupContext } from '../../FieldGroup';\nimport { makeUniqueId } from '../../../../shared/component-helper'\n\ninterface ReturnPropOverrides {\n  onFocus: (options?: { onFocusValue: unknown }) => void\n  onBlur: (options?: { onBlurValue: unknown }) => void\n}\n\nexport default function useField<Props extends FieldProps<any>>(\n  props: Props\n): Omit<Props, keyof ReturnPropOverrides> & ReturnPropOverrides {\n  const {\n    path,\n    emptyValue,\n    required,\n    error: errorProp,\n    onFocus: onFocusProp,\n    onBlur: onBlurProp,\n    onChange: onChangeProp,\n    validator: validatorProp,\n    onBlurValidator: onBlurValidatorProp,\n    schema,\n    errorMessages,\n    validateInitially,\n    validateUnchanged,\n    toInput = (value) => value,\n    fromInput = (value) => value,\n  } = props\n  const id = useMemo(() => props.id ?? makeUniqueId(), [props.id]);\n  const dataContext = useContext(DataContext.Context)\n  const fieldGroupContext = useContext(FieldGroupContext);\n  const inFieldGroup = Boolean(fieldGroupContext);\n  const { setFieldError: setFieldGroupError, setShowFieldError: setShowFieldGroupError } = fieldGroupContext ?? {};\n  const {\n    handlePathChange: dataContextHandlePathChange,\n    setPathWithError: dataContextSetPathWithError,\n    errors: dataContextErrors,\n  } = dataContext ?? {}\n\n  if (path && path.substring(0, 1) !== '/') {\n    throw new Error(\n      'Invalid path. Input path JSON Pointers  must be from root (starting with a /).'\n    )\n  }\n\n  const externalValue = useMemo(() => {\n    return (\n      props.value ??\n      (dataContext.data &&\n      path !== undefined &&\n      pointer.has(dataContext.data, path)\n        ? pointer.get(dataContext.data, path)\n        : undefined)\n    )\n  }, [path, props.value, dataContext.data])\n\n  // Hold an internal copy of the input value in case the input component is used uncontrolled,\n  // and to handle errors in Eufemia on components that does not take updated callback functions into account.\n  const [value, setValue] = useState(externalValue)\n  const changedRef = useRef(false)\n\n  useEffect(() => {\n    // When receiving the initial value, or receiving an updated value by props, update the internal value\n    // so the component can be used \"controlled\".\n    setValue(externalValue)\n  }, [externalValue])\n\n  // Error handling\n  const [error, setError] = useState<Error | FormError | undefined>()\n  const [showError, setShowError] = useState<boolean>(\n    Boolean(validateInitially || errorProp)\n  )\n  const schemaValidator = useMemo(\n    () =>\n      schema && Object.keys(schema).length > 0\n        ? ajv.compile(schema)\n        : undefined,\n    [schema]\n  )\n\n  const setErrorAndUpdateDataContext = useCallback(\n    (error: FormError | undefined) => {\n      const errorWithCorrectMessage = \n        (error instanceof FormError &&\n          typeof error.validationRule === 'string' &&\n          errorMessages?.[error.validationRule] !== undefined\n            ? new FormError(errorMessages[error.validationRule])\n            : error);\n      \n      setError(errorWithCorrectMessage);\n\n      if (path) {\n        // Tell the data context about the error, so it can stop the user from submitting the form until the error has been fixed\n        dataContextSetPathWithError?.(path, Boolean(error))\n      }\n\n      setFieldGroupError?.(path ?? id, errorWithCorrectMessage);\n    },\n    [path, id, errorMessages, dataContextSetPathWithError, setFieldGroupError]\n  )\n\n  const validateValue = useCallback(\n    (valueToValidate): FormError | undefined => {\n      // Prioritize received validator functions first\n      // Possible future change: Merge errors if multiple, like one message with each message concatinated.\n      if (typeof validatorProp === 'function') {\n        // Since the validator can return either a synchronous result or an asynchronous\n        Promise.resolve(validatorProp(valueToValidate))\n          // This is a validator, so it is expected to resolve with an error when the value is invalid. If it\n          // throws an error, it is not caught here as that will cause programmatic errors to show inside the form\n          // as if they where operational errors.\n          .then(setErrorAndUpdateDataContext)\n      }\n\n      if (valueToValidate === emptyValue && required) {\n        const error = new FormError('The value is required', {\n          validationRule: 'required',\n        }) // TO DO: Lib-specific translations\n        setErrorAndUpdateDataContext(error)\n        return error\n      } else if (schemaValidator) {\n        // This input has a direct schema (through props)\n        if (valueToValidate === undefined && emptyValue === undefined) {\n          // Avoid validating undefined-values if they are expected (set with emptyValue) as they will\n          // usually fail against json-schema type\n          setErrorAndUpdateDataContext(undefined)\n          return undefined\n        }\n        schemaValidator(valueToValidate)\n        const error = ajvErrorsToOneFormError(schemaValidator.errors)\n        setErrorAndUpdateDataContext(error)\n        return error\n      } else {\n        // Removing any previous error from required\n        setErrorAndUpdateDataContext(undefined)\n        return undefined\n      }\n    },\n    [\n      schemaValidator,\n      emptyValue,\n      required,\n      setErrorAndUpdateDataContext,\n      validatorProp,\n    ]\n  )\n\n  useEffect(() => {\n    // If a surrounding data context has an error for this field (by path) and no error has been set by local component validation, use the data context error\n    if (!error && path && dataContextErrors?.[path]) {\n      setErrorAndUpdateDataContext(dataContextErrors[path])\n    }\n  }, [path, dataContextErrors, error, setErrorAndUpdateDataContext])\n\n  useEffect(() => {\n    if (dataContext.showAllErrors) {\n      // If showError on a surrounding data context was changed and set to true, it is because the user clicked next, submit or\n      // something else that should lead to showing the user all errors.\n      setShowError(true)\n      setShowFieldGroupError?.(path ?? id, true);\n    }\n  }, [id, path, dataContext.showAllErrors, setShowFieldGroupError])\n\n  const onFocus = useCallback(\n    ({ onFocusValue }) => {\n      onFocusProp?.(onFocusValue ?? value)\n    },\n    [value, onFocusProp]\n  )\n\n  const onBlur = useCallback(\n    ({ onBlurValue }) => {\n      onBlurProp?.(onBlurValue ?? value)\n\n      if (!changedRef.current && !validateUnchanged) {\n        // Avoid showing errors when blurring without havinc hanged the value, so tabbing through several\n        // fields does not make errors pop up all over the place\n        return\n      }\n\n      // External blur validators makes it possible to validate values but not on every character change in case of\n      // expensive validation calling external services etc.\n      if (typeof onBlurValidatorProp === 'function') {\n        // Since the validator can return either a synchronous result or an asynchronous\n        Promise.resolve(onBlurValidatorProp(onBlurValue ?? value))\n          // This is a validator, so it is expected to resolve with an error when the value is invalid. If it\n          // throws an error, it is not caught here as that will cause programmatic errors to show inside the form\n          // as if they where operational errors.\n          .then(setErrorAndUpdateDataContext)\n      }\n\n      // Since the user left the field, show error (if any)\n      setShowError(true)\n      setShowFieldGroupError?.(path ?? id, true);\n    },\n    [\n      id,\n      path,\n      value,\n      onBlurProp,\n      validateUnchanged,\n      onBlurValidatorProp,\n      setErrorAndUpdateDataContext,\n      setShowFieldGroupError,\n    ]\n  )\n\n  const onChange = useCallback(\n    (valueFromInput) => {\n      const newValue = fromInput(valueFromInput)\n      setValue(newValue)\n      changedRef.current = true\n      // When changing the value, hide errors to avoid annoying the user before they are finished filling in that value\n      setShowError(false)\n      setShowFieldGroupError?.(path ?? id, false);\n      // Always validate the value immediately when it is changed\n      validateValue(newValue)\n\n      // Tell any parent data context about the error, so they can take it into consideration when a submit button is clicked for instance\n      onChangeProp?.(newValue)\n      if (path) {\n        dataContextHandlePathChange?.(path, newValue)\n      }\n    },\n    [\n      id,\n      path,\n      onChangeProp,\n      validateValue,\n      dataContextHandlePathChange,\n      setShowFieldGroupError,\n      fromInput,\n    ]\n  )\n\n  const exportError = useMemo(() =>\n    errorProp ??\n    error\n  , [errorProp, error]);\n\n  useEffect(() => {\n    // Mount procedure\n    if (path) {\n      dataContext?.handleMountField(path)\n    }\n    validateValue(externalValue)\n\n    return () => {\n      // Unmount procedure\n      if (path) {\n        dataContext?.handleUnMountField(path)\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- Only run for mount and unmount\n  }, [])\n\n  return {\n    ...props,\n    id,\n    value: toInput(value),\n    error: inFieldGroup ? undefined : (showError ? exportError : undefined),\n    onFocus,\n    onBlur,\n    onChange,\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"useField.js","names":["useRef","useEffect","useContext","useCallback","useMemo","useState","pointer","FormError","ajv","ajvErrorsToOneFormError","DataContext","FieldGroupContext","makeUniqueId","useField","props","path","emptyValue","required","error","errorProp","onFocus","onBlur","onChange","validator","onBlurValidator","schema","errorMessages","validateInitially","validateUnchanged","toInput","value","fromInput","id","dataContext","Context","fieldGroupContext","inFieldGroup","Boolean","setFieldError","setFieldGroupError","setShowFieldError","setShowFieldGroupError","handlePathChange","dataContextHandlePathChange","setPathWithError","dataContextSetPathWithError","errors","dataContextErrors","substring","Error","externalValue","data","undefined","has","get","setValue","changedRef","setError","showError","setShowError","schemaValidator","Object","keys","length","compile","setErrorAndUpdateDataContext","errorWithCorrectMessage","validationRule","validateValue","valueToValidate","Promise","resolve","then","showAllErrors","setHasFocus","hasFocus","valueOverride","current","handleFocus","handleBlur","handleChange","argFromInput","newValue","exportError","handleMountField","handleUnMountField","_objectSpread"],"sources":["../../../../../../src/extensions/forms/Field/hooks/useField.ts"],"sourcesContent":["import {\n  useRef,\n  useEffect,\n  useContext,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react'\nimport pointer from 'json-pointer'\nimport { FormError } from '../../types'\nimport ajv, { ajvErrorsToOneFormError } from '../../utils/ajv'\nimport DataContext from '../../DataContext'\nimport type { FieldProps } from '../../field-types'\nimport { FieldGroupContext } from '../../FieldGroup'\nimport { makeUniqueId } from '../../../../shared/component-helper'\n\ninterface ReturnAdditional {\n  setHasFocus: (hasFocus: boolean, valueOverride?: unknown) => void\n  handleFocus: FieldProps<unknown>['onFocus']\n  handleBlur: FieldProps<unknown>['onBlur']\n  handleChange: FieldProps<unknown>['onChange']\n}\n\nexport default function useField<Props extends FieldProps<unknown>>(\n  props: Props\n): Props & ReturnAdditional {\n  const {\n    path,\n    emptyValue,\n    required,\n    error: errorProp,\n    onFocus,\n    onBlur,\n    onChange,\n    validator,\n    onBlurValidator,\n    schema,\n    errorMessages,\n    validateInitially,\n    validateUnchanged,\n    toInput = (value) => value,\n    fromInput = (value) => value,\n  } = props\n  const id = useMemo(() => props.id ?? makeUniqueId(), [props.id])\n  const dataContext = useContext(DataContext.Context)\n  const fieldGroupContext = useContext(FieldGroupContext)\n  const inFieldGroup = Boolean(fieldGroupContext)\n  const {\n    setFieldError: setFieldGroupError,\n    setShowFieldError: setShowFieldGroupError,\n  } = fieldGroupContext ?? {}\n  const {\n    handlePathChange: dataContextHandlePathChange,\n    setPathWithError: dataContextSetPathWithError,\n    errors: dataContextErrors,\n  } = dataContext ?? {}\n\n  if (path && path.substring(0, 1) !== '/') {\n    throw new Error(\n      'Invalid path. Input path JSON Pointers  must be from root (starting with a /).'\n    )\n  }\n\n  const externalValue = useMemo(() => {\n    return (\n      props.value ??\n      (dataContext.data &&\n      path !== undefined &&\n      pointer.has(dataContext.data, path)\n        ? pointer.get(dataContext.data, path)\n        : undefined)\n    )\n  }, [path, props.value, dataContext.data])\n\n  // Hold an internal copy of the input value in case the input component is used uncontrolled,\n  // and to handle errors in Eufemia on components that does not take updated callback functions into account.\n  const [value, setValue] = useState(externalValue)\n  const changedRef = useRef(false)\n\n  useEffect(() => {\n    // When receiving the initial value, or receiving an updated value by props, update the internal value\n    // so the component can be used \"controlled\".\n    setValue(externalValue)\n  }, [externalValue])\n\n  // Error handling\n  const [error, setError] = useState<Error | FormError | undefined>()\n  const [showError, setShowError] = useState<boolean>(\n    Boolean(validateInitially || errorProp)\n  )\n  const schemaValidator = useMemo(\n    () =>\n      schema && Object.keys(schema).length > 0\n        ? ajv.compile(schema)\n        : undefined,\n    [schema]\n  )\n\n  const setErrorAndUpdateDataContext = useCallback(\n    (error: FormError | undefined) => {\n      const errorWithCorrectMessage =\n        error instanceof FormError &&\n        typeof error.validationRule === 'string' &&\n        errorMessages?.[error.validationRule] !== undefined\n          ? new FormError(errorMessages[error.validationRule])\n          : error\n\n      setError(errorWithCorrectMessage)\n\n      if (path) {\n        // Tell the data context about the error, so it can stop the user from submitting the form until the error has been fixed\n        dataContextSetPathWithError?.(path, Boolean(error))\n      }\n\n      setFieldGroupError?.(path ?? id, errorWithCorrectMessage)\n    },\n    [\n      path,\n      id,\n      errorMessages,\n      dataContextSetPathWithError,\n      setFieldGroupError,\n    ]\n  )\n\n  const validateValue = useCallback(\n    (valueToValidate): FormError | undefined => {\n      // Prioritize received validator functions first\n      // Possible future change: Merge errors if multiple, like one message with each message concatinated.\n      if (typeof validator === 'function') {\n        // Since the validator can return either a synchronous result or an asynchronous\n        Promise.resolve(validator(valueToValidate))\n          // This is a validator, so it is expected to resolve with an error when the value is invalid. If it\n          // throws an error, it is not caught here as that will cause programmatic errors to show inside the form\n          // as if they where operational errors.\n          .then(setErrorAndUpdateDataContext)\n      }\n\n      if (valueToValidate === emptyValue && required) {\n        const error = new FormError('The value is required', {\n          validationRule: 'required',\n        }) // TO DO: Lib-specific translations\n        setErrorAndUpdateDataContext(error)\n        return error\n      } else if (schemaValidator) {\n        // This input has a direct schema (through props)\n        if (valueToValidate === undefined && emptyValue === undefined) {\n          // Avoid validating undefined-values if they are expected (set with emptyValue) as they will\n          // usually fail against json-schema type\n          setErrorAndUpdateDataContext(undefined)\n          return undefined\n        }\n        schemaValidator(valueToValidate)\n        const error = ajvErrorsToOneFormError(schemaValidator.errors)\n        setErrorAndUpdateDataContext(error)\n        return error\n      } else {\n        // Removing any previous error from required\n        setErrorAndUpdateDataContext(undefined)\n        return undefined\n      }\n    },\n    [\n      schemaValidator,\n      emptyValue,\n      required,\n      setErrorAndUpdateDataContext,\n      validator,\n    ]\n  )\n\n  useEffect(() => {\n    // If a surrounding data context has an error for this field (by path) and no error has been set by local component validation, use the data context error\n    if (!error && path && dataContextErrors?.[path]) {\n      setErrorAndUpdateDataContext(dataContextErrors[path])\n    }\n  }, [path, dataContextErrors, error, setErrorAndUpdateDataContext])\n\n  useEffect(() => {\n    if (dataContext.showAllErrors) {\n      // If showError on a surrounding data context was changed and set to true, it is because the user clicked next, submit or\n      // something else that should lead to showing the user all errors.\n      setShowError(true)\n      setShowFieldGroupError?.(path ?? id, true)\n    }\n  }, [id, path, dataContext.showAllErrors, setShowFieldGroupError])\n\n  const setHasFocus = useCallback(\n    (hasFocus: boolean, valueOverride?: unknown) => {\n      if (hasFocus) {\n        // Field was put in focus (like when clicking in a text field or opening a dropdown menu)\n        onFocus?.(valueOverride ?? value)\n      } else {\n        // Field was removed from focus (like when tabbing out of a text field or closing a dropdown menu)\n        onBlur?.(valueOverride ?? value)\n\n        if (!changedRef.current && !validateUnchanged) {\n          // Avoid showing errors when blurring without havinc hanged the value, so tabbing through several\n          // fields does not make errors pop up all over the place\n          return\n        }\n\n        // External blur validators makes it possible to validate values but not on every character change in case of\n        // expensive validation calling external services etc.\n        if (typeof onBlurValidator === 'function') {\n          // Since the validator can return either a synchronous result or an asynchronous\n          Promise.resolve(onBlurValidator(valueOverride ?? value))\n            // This is a validator, so it is expected to resolve with an error when the value is invalid. If it\n            // throws an error, it is not caught here as that will cause programmatic errors to show inside the form\n            // as if they where operational errors.\n            .then(setErrorAndUpdateDataContext)\n        }\n\n        // Since the user left the field, show error (if any)\n        setShowError(true)\n        setShowFieldGroupError?.(path ?? id, true)\n      }\n    },\n    [\n      id,\n      path,\n      value,\n      validateUnchanged,\n      onFocus,\n      onBlur,\n      onBlurValidator,\n      setErrorAndUpdateDataContext,\n      setShowFieldGroupError,\n    ]\n  )\n\n  const handleFocus = useCallback(() => setHasFocus(true), [setHasFocus])\n  const handleBlur = useCallback(() => setHasFocus(false), [setHasFocus])\n\n  const handleChange = useCallback(\n    (argFromInput) => {\n      const newValue = fromInput(argFromInput)\n      if (newValue === value) {\n        // Avoid triggering a change if the value was not actually changed. This may be caused by rendering components\n        // calling onChange even if the actual value did not change.\n        return\n      }\n      setValue(newValue)\n      changedRef.current = true\n      // When changing the value, hide errors to avoid annoying the user before they are finished filling in that value\n      setShowError(false)\n      setShowFieldGroupError?.(path ?? id, false)\n      // Always validate the value immediately when it is changed\n      validateValue(newValue)\n\n      // Tell any parent data context about the error, so they can take it into consideration when a submit button is clicked for instance\n      onChange?.(newValue)\n      if (path) {\n        dataContextHandlePathChange?.(path, newValue)\n      }\n    },\n    [\n      id,\n      path,\n      value,\n      onChange,\n      validateValue,\n      dataContextHandlePathChange,\n      setShowFieldGroupError,\n      fromInput,\n    ]\n  )\n\n  const exportError = useMemo(() => errorProp ?? error, [errorProp, error])\n\n  useEffect(() => {\n    // Mount procedure\n    if (path) {\n      dataContext?.handleMountField(path)\n    }\n    validateValue(externalValue)\n\n    return () => {\n      // Unmount procedure\n      if (path) {\n        dataContext?.handleUnMountField(path)\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- Only run for mount and unmount\n  }, [])\n\n  return {\n    ...props,\n    id,\n    value: toInput(value),\n    error: inFieldGroup ? undefined : showError ? exportError : undefined,\n    setHasFocus,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  }\n}\n"],"mappings":"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"}

package/es/extensions/forms/Field/index.d.ts

@@ -16,6 +16,7 @@ import ArraySelection from './ArraySelection';
 import Option from './Option';
 import SelectCountry from './SelectCountry';
 import BankAccountNumber from './BankAccountNumber';
+import CountryCode from './CountryCode';
 declare const Field: {
     String: typeof StringComponent;
     Number: typeof NumberComponent;
@@ -35,5 +36,6 @@ declare const Field: {
     Option: typeof Option;
     SelectCountry: typeof SelectCountry;
     BankAccountNumber: typeof BankAccountNumber;
+    CountryCode: typeof CountryCode;
 };
 export default Field;

package/es/extensions/forms/Field/index.js

@@ -16,6 +16,7 @@ import ArraySelection from './ArraySelection';
 import Option from './Option';
 import SelectCountry from './SelectCountry';
 import BankAccountNumber from './BankAccountNumber';
+import CountryCode from './CountryCode';
 const Field = {
   String: StringComponent,
   Number: NumberComponent,
@@ -34,7 +35,8 @@ const Field = {
   ArraySelection,
   Option,
   SelectCountry,
-  BankAccountNumber
+  BankAccountNumber,
+  CountryCode
 };
 export default Field;
 //# sourceMappingURL=index.js.map