@dnb/eufemia 10.7.0 → 10.8.0

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

@@ -45,6 +45,9 @@ function StringComponent(props) {
       if (value === '') {
         return props.emptyValue;
       }
+      if (value.charAt(0) === '0' && cleanedValue === '') {
+        return '0';
+      }
       return cleanedValue ?? value;
     },
     width: props.width ?? 'large'
@@ -64,6 +67,7 @@ function StringComponent(props) {
     warning,
     error,
     disabled,
+    help,
     multiline,
     leftIcon,
     rightIcon,
@@ -73,9 +77,9 @@ function StringComponent(props) {
     characterCounter,
     mask,
     width,
-    onFocus,
-    onBlur,
-    onChange
+    handleFocus,
+    handleBlur,
+    handleChange
   } = (0, _hooks.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 = (0, _classnames.default)('dnb-forms-field-string__input', inputClassName);
@@ -95,9 +99,13 @@ function StringComponent(props) {
     className: cn,
     placeholder: placeholder,
     value: value,
-    on_focus: onFocus,
-    on_blur: onBlur,
-    on_change: onChange,
+    suffix: help ? _react.default.createElement(_components.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,
@@ -109,9 +117,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.default.createElement(_components.HelpButton, {
+      title: help.title
+    }, help.contents) : undefined,
+    on_focus: handleFocus,
+    on_blur: handleBlur,
+    on_change: handleChange,
     disabled: disabled,
     stretch: width !== undefined
   }) : _react.default.createElement(_components.Input, {
@@ -123,9 +134,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.default.createElement(_components.HelpButton, {
+      title: help.title
+    }, help.contents) : undefined,
+    on_focus: handleFocus,
+    on_blur: handleBlur,
+    on_change: handleChange,
     disabled: disabled,
     stretch: width !== undefined
   }));

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

@@ -1 +1 @@
-{"version":3,"file":"String.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_components","_InputMasked","_utils","_Context","_FieldBlock","_hooks","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","StringComponent","props","_props$minLength","_props$maxLength","sharedContext","useContext","SharedContext","preparedProps","errorMessages","required","translation","Forms","inputErrorRequired","minLength","stringInputErrorMinLength","replace","toString","maxLength","stringInputErrorMaxLength","pattern","inputErrorPattern","schema","type","fromInput","_ref","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","useField","characterCounterElement","cn","classnames","createElement","forId","contentsWidth","forwardSpaceProps","Textarea","on_focus","on_blur","on_change","autoresize_max_rows","stretch","icon","icon_position","Input","_supportsEufemiaSpacingProps","_default","exports"],"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","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_components","_InputMasked","_utils","_Context","_FieldBlock","_hooks","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","StringComponent","props","_props$minLength","_props$maxLength","sharedContext","useContext","SharedContext","preparedProps","errorMessages","required","translation","Forms","inputErrorRequired","minLength","stringInputErrorMinLength","replace","toString","maxLength","stringInputErrorMaxLength","pattern","inputErrorPattern","schema","type","fromInput","_ref","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","useField","characterCounterElement","cn","classnames","createElement","forId","contentsWidth","forwardSpaceProps","Textarea","suffix","HelpButton","title","left","contents","on_focus","on_blur","on_change","autoresize_max_rows","stretch","icon","icon_position","Input","_supportsEufemiaSpacingProps","_default","exports"],"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/cjs/extensions/forms/Field/Toggle.js

@@ -34,31 +34,32 @@ function Toggle(props) {
     disabled,
     label,
     labelDescription,
+    labelSecondary,
     textOn,
     textOff,
     value,
     info,
     warning,
     error,
-    onChange
+    handleChange
   } = (0, _hooks.useField)(props);
   const handleCheckboxChange = (0, _react.useCallback)(_ref => {
     let {
       checked
     } = _ref;
-    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 = (0, _react.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 = (0, _react.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 = (0, _classnames.default)('dnb-forms-field-boolean', className);
+  }, [handleChange, value, valueOff]);
+  const cn = (0, _classnames.default)('dnb-forms-field-toggle', className);
   const fieldBlockPropsWithoutLabel = _objectSpread(_objectSpread({
     forId: id,
     className: cn
@@ -70,7 +71,8 @@ function Toggle(props) {
   const fieldBlockProps = _objectSpread(_objectSpread({}, fieldBlockPropsWithoutLabel), {}, {
     layout,
     label,
-    labelDescription
+    labelDescription,
+    labelSecondary
   });
   const isOn = value === valueOn;
   switch (variant) {

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","names":["_react","_interopRequireWildcard","require","_components","_classnames","_interopRequireDefault","_ButtonRow","_FieldBlock","_hooks","_utils","_Context","_Space","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","Toggle","props","sharedContext","useContext","SharedContext","id","className","valueOn","valueOff","layout","variant","disabled","label","labelDescription","textOn","textOff","info","warning","error","onChange","useField","handleCheckboxChange","useCallback","_ref","checked","setOn","setOff","cn","classnames","fieldBlockPropsWithoutLabel","forId","forwardSpaceProps","fieldBlockProps","isOn","createElement","Checkbox","on_change","ToggleButton","text","translation","Forms","booleanYes","booleanNo","Button","on_click","status","Space","bottom","_supportsEufemiaSpacingProps","_default","exports"],"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","_interopRequireWildcard","require","_components","_classnames","_interopRequireDefault","_ButtonRow","_FieldBlock","_hooks","_utils","_Context","_Space","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","Toggle","props","sharedContext","useContext","SharedContext","id","className","valueOn","valueOff","layout","variant","disabled","label","labelDescription","labelSecondary","textOn","textOff","info","warning","error","handleChange","useField","handleCheckboxChange","useCallback","_ref","checked","setOn","setOff","cn","classnames","fieldBlockPropsWithoutLabel","forId","forwardSpaceProps","fieldBlockProps","isOn","createElement","Checkbox","on_change","ToggleButton","text","translation","Forms","booleanYes","booleanNo","Button","on_click","status","Space","bottom","_supportsEufemiaSpacingProps","_default","exports"],"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/cjs/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/cjs/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/cjs/extensions/forms/Field/hooks/useField.js

@@ -25,11 +25,11 @@ 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,
@@ -73,8 +73,8 @@ function useField(props) {
     setFieldGroupError === null || setFieldGroupError === void 0 ? void 0 : setFieldGroupError(path ?? id, errorWithCorrectMessage);
   }, [path, id, errorMessages, dataContextSetPathWithError, setFieldGroupError]);
   const validateValue = (0, _react.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 _types.FormError('The value is required', {
@@ -95,7 +95,7 @@ function useField(props) {
       setErrorAndUpdateDataContext(undefined);
       return undefined;
     }
-  }, [schemaValidator, emptyValue, required, setErrorAndUpdateDataContext, validatorProp]);
+  }, [schemaValidator, emptyValue, required, setErrorAndUpdateDataContext, validator]);
   (0, _react.useEffect)(() => {
     if (!error && path && dataContextErrors !== null && dataContextErrors !== void 0 && dataContextErrors[path]) {
       setErrorAndUpdateDataContext(dataContextErrors[path]);
@@ -107,38 +107,38 @@ function useField(props) {
       setShowFieldGroupError === null || setShowFieldGroupError === void 0 ? void 0 : setShowFieldGroupError(path ?? id, true);
     }
   }, [id, path, dataContext.showAllErrors, setShowFieldGroupError]);
-  const onFocus = (0, _react.useCallback)(_ref => {
-    let {
-      onFocusValue
-    } = _ref;
-    onFocusProp === null || onFocusProp === void 0 ? void 0 : onFocusProp(onFocusValue ?? value);
-  }, [value, onFocusProp]);
-  const onBlur = (0, _react.useCallback)(_ref2 => {
-    let {
-      onBlurValue
-    } = _ref2;
-    onBlurProp === null || onBlurProp === void 0 ? void 0 : onBlurProp(onBlurValue ?? value);
-    if (!changedRef.current && !validateUnchanged) {
-      return;
+  const setHasFocus = (0, _react.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 = (0, _react.useCallback)(() => setHasFocus(true), [setHasFocus]);
+  const handleBlur = (0, _react.useCallback)(() => setHasFocus(false), [setHasFocus]);
+  const handleChange = (0, _react.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 = (0, _react.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 = (0, _react.useMemo)(() => errorProp ?? error, [errorProp, error]);
   (0, _react.useEffect)(() => {
     if (path) {
@@ -155,9 +155,10 @@ 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/cjs/extensions/forms/Field/hooks/useField.js.map

@@ -1 +1 @@
-{"version":3,"file":"useField.js","names":["_react","require","_jsonPointer","_interopRequireDefault","_types","_ajv","_interopRequireWildcard","_DataContext","_FieldGroup","_componentHelper","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","useField","props","path","emptyValue","required","error","errorProp","onFocus","onFocusProp","onBlur","onBlurProp","onChange","onChangeProp","validator","validatorProp","onBlurValidator","onBlurValidatorProp","schema","errorMessages","validateInitially","validateUnchanged","toInput","fromInput","id","useMemo","makeUniqueId","dataContext","useContext","DataContext","Context","fieldGroupContext","FieldGroupContext","inFieldGroup","Boolean","setFieldError","setFieldGroupError","setShowFieldError","setShowFieldGroupError","handlePathChange","dataContextHandlePathChange","setPathWithError","dataContextSetPathWithError","errors","dataContextErrors","substring","Error","externalValue","data","pointer","setValue","useState","changedRef","useRef","useEffect","setError","showError","setShowError","schemaValidator","ajv","compile","setErrorAndUpdateDataContext","useCallback","errorWithCorrectMessage","FormError","validationRule","validateValue","valueToValidate","Promise","resolve","then","ajvErrorsToOneFormError","showAllErrors","_ref","onFocusValue","_ref2","onBlurValue","current","valueFromInput","newValue","exportError","handleMountField","handleUnMountField"],"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":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAQA,IAAAC,YAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,IAAA,GAAAC,uBAAA,CAAAL,OAAA;AACA,IAAAM,YAAA,GAAAJ,sBAAA,CAAAF,OAAA;AAEA,IAAAO,WAAA,GAAAP,OAAA;AACA,IAAAQ,gBAAA,GAAAR,OAAA;AAAkE,SAAAS,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAL,wBAAAS,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAAA,SAAAlB,uBAAAY,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAiB,QAAAC,MAAA,EAAAC,cAAA,QAAAC,IAAA,GAAAZ,MAAA,CAAAY,IAAA,CAAAF,MAAA,OAAAV,MAAA,CAAAa,qBAAA,QAAAC,OAAA,GAAAd,MAAA,CAAAa,qBAAA,CAAAH,MAAA,GAAAC,cAAA,KAAAG,OAAA,GAAAA,OAAA,CAAAC,MAAA,WAAAC,GAAA,WAAAhB,MAAA,CAAAE,wBAAA,CAAAQ,MAAA,EAAAM,GAAA,EAAAC,UAAA,OAAAL,IAAA,CAAAM,IAAA,CAAAC,KAAA,CAAAP,IAAA,EAAAE,OAAA,YAAAF,IAAA;AAAA,SAAAQ,cAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,WAAAF,SAAA,CAAAD,CAAA,IAAAC,SAAA,CAAAD,CAAA,QAAAA,CAAA,OAAAb,OAAA,CAAAT,MAAA,CAAAyB,MAAA,OAAAC,OAAA,WAAAvB,GAAA,IAAAwB,eAAA,CAAAN,MAAA,EAAAlB,GAAA,EAAAsB,MAAA,CAAAtB,GAAA,SAAAH,MAAA,CAAA4B,yBAAA,GAAA5B,MAAA,CAAA6B,gBAAA,CAAAR,MAAA,EAAArB,MAAA,CAAA4B,yBAAA,CAAAH,MAAA,KAAAhB,OAAA,CAAAT,MAAA,CAAAyB,MAAA,GAAAC,OAAA,WAAAvB,GAAA,IAAAH,MAAA,CAAAC,cAAA,CAAAoB,MAAA,EAAAlB,GAAA,EAAAH,MAAA,CAAAE,wBAAA,CAAAuB,MAAA,EAAAtB,GAAA,iBAAAkB,MAAA;AAAA,SAAAM,gBAAAnC,GAAA,EAAAW,GAAA,EAAA2B,KAAA,IAAA3B,GAAA,GAAA4B,cAAA,CAAA5B,GAAA,OAAAA,GAAA,IAAAX,GAAA,IAAAQ,MAAA,CAAAC,cAAA,CAAAT,GAAA,EAAAW,GAAA,IAAA2B,KAAA,EAAAA,KAAA,EAAAb,UAAA,QAAAe,YAAA,QAAAC,QAAA,oBAAAzC,GAAA,CAAAW,GAAA,IAAA2B,KAAA,WAAAtC,GAAA;AAAA,SAAAuC,eAAAG,GAAA,QAAA/B,GAAA,GAAAgC,YAAA,CAAAD,GAAA,2BAAA/B,GAAA,gBAAAA,GAAA,GAAAiC,MAAA,CAAAjC,GAAA;AAAA,SAAAgC,aAAAE,KAAA,EAAAC,IAAA,eAAAD,KAAA,iBAAAA,KAAA,kBAAAA,KAAA,MAAAE,IAAA,GAAAF,KAAA,CAAAG,MAAA,CAAAC,WAAA,OAAAF,IAAA,KAAAG,SAAA,QAAAC,GAAA,GAAAJ,IAAA,CAAAjC,IAAA,CAAA+B,KAAA,EAAAC,IAAA,2BAAAK,GAAA,sBAAAA,GAAA,YAAAC,SAAA,4DAAAN,IAAA,gBAAAF,MAAA,GAAAS,MAAA,EAAAR,KAAA;AAOnD,SAASS,QAAQA,CAC9BC,KAAY,EACkD;EAC9D,MAAM;IACJC,IAAI;IACJC,UAAU;IACVC,QAAQ;IACRC,KAAK,EAAEC,SAAS;IAChBC,OAAO,EAAEC,WAAW;IACpBC,MAAM,EAAEC,UAAU;IAClBC,QAAQ,EAAEC,YAAY;IACtBC,SAAS,EAAEC,aAAa;IACxBC,eAAe,EAAEC,mBAAmB;IACpCC,MAAM;IACNC,aAAa;IACbC,iBAAiB;IACjBC,iBAAiB;IACjBC,OAAO,GAAIrC,KAAK,IAAKA,KAAK;IAC1BsC,SAAS,GAAItC,KAAK,IAAKA;EACzB,CAAC,GAAGiB,KAAK;EACT,MAAMsB,EAAE,GAAG,IAAAC,cAAO,EAAC,MAAMvB,KAAK,CAACsB,EAAE,IAAI,IAAAE,6BAAY,EAAC,CAAC,EAAE,CAACxB,KAAK,CAACsB,EAAE,CAAC,CAAC;EAChE,MAAMG,WAAW,GAAG,IAAAC,iBAAU,EAACC,oBAAW,CAACC,OAAO,CAAC;EACnD,MAAMC,iBAAiB,GAAG,IAAAH,iBAAU,EAACI,6BAAiB,CAAC;EACvD,MAAMC,YAAY,GAAGC,OAAO,CAACH,iBAAiB,CAAC;EAC/C,MAAM;IAAEI,aAAa,EAAEC,kBAAkB;IAAEC,iBAAiB,EAAEC;EAAuB,CAAC,GAAGP,iBAAiB,IAAI,CAAC,CAAC;EAChH,MAAM;IACJQ,gBAAgB,EAAEC,2BAA2B;IAC7CC,gBAAgB,EAAEC,2BAA2B;IAC7CC,MAAM,EAAEC;EACV,CAAC,GAAGjB,WAAW,IAAI,CAAC,CAAC;EAErB,IAAIxB,IAAI,IAAIA,IAAI,CAAC0C,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,GAAG,EAAE;IACxC,MAAM,IAAIC,KAAK,CACb,gFACF,CAAC;EACH;EAEA,MAAMC,aAAa,GAAG,IAAAtB,cAAO,EAAC,MAAM;IAClC,OACEvB,KAAK,CAACjB,KAAK,KACV0C,WAAW,CAACqB,IAAI,IACjB7C,IAAI,KAAKN,SAAS,IAClBoD,oBAAO,CAAClG,GAAG,CAAC4E,WAAW,CAACqB,IAAI,EAAE7C,IAAI,CAAC,GAC/B8C,oBAAO,CAACjG,GAAG,CAAC2E,WAAW,CAACqB,IAAI,EAAE7C,IAAI,CAAC,GACnCN,SAAS,CAAC;EAElB,CAAC,EAAE,CAACM,IAAI,EAAED,KAAK,CAACjB,KAAK,EAAE0C,WAAW,CAACqB,IAAI,CAAC,CAAC;EAIzC,MAAM,CAAC/D,KAAK,EAAEiE,QAAQ,CAAC,GAAG,IAAAC,eAAQ,EAACJ,aAAa,CAAC;EACjD,MAAMK,UAAU,GAAG,IAAAC,aAAM,EAAC,KAAK,CAAC;EAEhC,IAAAC,gBAAS,EAAC,MAAM;IAGdJ,QAAQ,CAACH,aAAa,CAAC;EACzB,CAAC,EAAE,CAACA,aAAa,CAAC,CAAC;EAGnB,MAAM,CAACzC,KAAK,EAAEiD,QAAQ,CAAC,GAAG,IAAAJ,eAAQ,EAAgC,CAAC;EACnE,MAAM,CAACK,SAAS,EAAEC,YAAY,CAAC,GAAG,IAAAN,eAAQ,EACxCjB,OAAO,CAACd,iBAAiB,IAAIb,SAAS,CACxC,CAAC;EACD,MAAMmD,eAAe,GAAG,IAAAjC,cAAO,EAC7B,MACEP,MAAM,IAAI/D,MAAM,CAACY,IAAI,CAACmD,MAAM,CAAC,CAACvC,MAAM,GAAG,CAAC,GACpCgF,YAAG,CAACC,OAAO,CAAC1C,MAAM,CAAC,GACnBrB,SAAS,EACf,CAACqB,MAAM,CACT,CAAC;EAED,MAAM2C,4BAA4B,GAAG,IAAAC,kBAAW,EAC7CxD,KAA4B,IAAK;IAChC,MAAMyD,uBAAuB,GAC1BzD,KAAK,YAAY0D,gBAAS,IACzB,OAAO1D,KAAK,CAAC2D,cAAc,KAAK,QAAQ,IACxC,CAAA9C,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAGb,KAAK,CAAC2D,cAAc,CAAC,MAAKpE,SAAS,GAC/C,IAAImE,gBAAS,CAAC7C,aAAa,CAACb,KAAK,CAAC2D,cAAc,CAAC,CAAC,GAClD3D,KAAM;IAEdiD,QAAQ,CAACQ,uBAAuB,CAAC;IAEjC,IAAI5D,IAAI,EAAE;MAERuC,2BAA2B,aAA3BA,2BAA2B,uBAA3BA,2BAA2B,CAAGvC,IAAI,EAAE+B,OAAO,CAAC5B,KAAK,CAAC,CAAC;IACrD;IAEA8B,kBAAkB,aAAlBA,kBAAkB,uBAAlBA,kBAAkB,CAAGjC,IAAI,IAAIqB,EAAE,EAAEuC,uBAAuB,CAAC;EAC3D,CAAC,EACD,CAAC5D,IAAI,EAAEqB,EAAE,EAAEL,aAAa,EAAEuB,2BAA2B,EAAEN,kBAAkB,CAC3E,CAAC;EAED,MAAM8B,aAAa,GAAG,IAAAJ,kBAAW,EAC9BK,eAAe,IAA4B;IAG1C,IAAI,OAAOpD,aAAa,KAAK,UAAU,EAAE;MAEvCqD,OAAO,CAACC,OAAO,CAACtD,aAAa,CAACoD,eAAe,CAAC,CAAC,CAI5CG,IAAI,CAACT,4BAA4B,CAAC;IACvC;IAEA,IAAIM,eAAe,KAAK/D,UAAU,IAAIC,QAAQ,EAAE;MAC9C,MAAMC,KAAK,GAAG,IAAI0D,gBAAS,CAAC,uBAAuB,EAAE;QACnDC,cAAc,EAAE;MAClB,CAAC,CAAC;MACFJ,4BAA4B,CAACvD,KAAK,CAAC;MACnC,OAAOA,KAAK;IACd,CAAC,MAAM,IAAIoD,eAAe,EAAE;MAE1B,IAAIS,eAAe,KAAKtE,SAAS,IAAIO,UAAU,KAAKP,SAAS,EAAE;QAG7DgE,4BAA4B,CAAChE,SAAS,CAAC;QACvC,OAAOA,SAAS;MAClB;MACA6D,eAAe,CAACS,eAAe,CAAC;MAChC,MAAM7D,KAAK,GAAG,IAAAiE,4BAAuB,EAACb,eAAe,CAACf,MAAM,CAAC;MAC7DkB,4BAA4B,CAACvD,KAAK,CAAC;MACnC,OAAOA,KAAK;IACd,CAAC,MAAM;MAELuD,4BAA4B,CAAChE,SAAS,CAAC;MACvC,OAAOA,SAAS;IAClB;EACF,CAAC,EACD,CACE6D,eAAe,EACftD,UAAU,EACVC,QAAQ,EACRwD,4BAA4B,EAC5B9C,aAAa,CAEjB,CAAC;EAED,IAAAuC,gBAAS,EAAC,MAAM;IAEd,IAAI,CAAChD,KAAK,IAAIH,IAAI,IAAIyC,iBAAiB,aAAjBA,iBAAiB,eAAjBA,iBAAiB,CAAGzC,IAAI,CAAC,EAAE;MAC/C0D,4BAA4B,CAACjB,iBAAiB,CAACzC,IAAI,CAAC,CAAC;IACvD;EACF,CAAC,EAAE,CAACA,IAAI,EAAEyC,iBAAiB,EAAEtC,KAAK,EAAEuD,4BAA4B,CAAC,CAAC;EAElE,IAAAP,gBAAS,EAAC,MAAM;IACd,IAAI3B,WAAW,CAAC6C,aAAa,EAAE;MAG7Bf,YAAY,CAAC,IAAI,CAAC;MAClBnB,sBAAsB,aAAtBA,sBAAsB,uBAAtBA,sBAAsB,CAAGnC,IAAI,IAAIqB,EAAE,EAAE,IAAI,CAAC;IAC5C;EACF,CAAC,EAAE,CAACA,EAAE,EAAErB,IAAI,EAAEwB,WAAW,CAAC6C,aAAa,EAAElC,sBAAsB,CAAC,CAAC;EAEjE,MAAM9B,OAAO,GAAG,IAAAsD,kBAAW,EACzBW,IAAA,IAAsB;IAAA,IAArB;MAAEC;IAAa,CAAC,GAAAD,IAAA;IACfhE,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAGiE,YAAY,IAAIzF,KAAK,CAAC;EACtC,CAAC,EACD,CAACA,KAAK,EAAEwB,WAAW,CACrB,CAAC;EAED,MAAMC,MAAM,GAAG,IAAAoD,kBAAW,EACxBa,KAAA,IAAqB;IAAA,IAApB;MAAEC;IAAY,CAAC,GAAAD,KAAA;IACdhE,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAGiE,WAAW,IAAI3F,KAAK,CAAC;IAElC,IAAI,CAACmE,UAAU,CAACyB,OAAO,IAAI,CAACxD,iBAAiB,EAAE;MAG7C;IACF;IAIA,IAAI,OAAOJ,mBAAmB,KAAK,UAAU,EAAE;MAE7CmD,OAAO,CAACC,OAAO,CAACpD,mBAAmB,CAAC2D,WAAW,IAAI3F,KAAK,CAAC,CAAC,CAIvDqF,IAAI,CAACT,4BAA4B,CAAC;IACvC;IAGAJ,YAAY,CAAC,IAAI,CAAC;IAClBnB,sBAAsB,aAAtBA,sBAAsB,uBAAtBA,sBAAsB,CAAGnC,IAAI,IAAIqB,EAAE,EAAE,IAAI,CAAC;EAC5C,CAAC,EACD,CACEA,EAAE,EACFrB,IAAI,EACJlB,KAAK,EACL0B,UAAU,EACVU,iBAAiB,EACjBJ,mBAAmB,EACnB4C,4BAA4B,EAC5BvB,sBAAsB,CAE1B,CAAC;EAED,MAAM1B,QAAQ,GAAG,IAAAkD,kBAAW,EACzBgB,cAAc,IAAK;IAClB,MAAMC,QAAQ,GAAGxD,SAAS,CAACuD,cAAc,CAAC;IAC1C5B,QAAQ,CAAC6B,QAAQ,CAAC;IAClB3B,UAAU,CAACyB,OAAO,GAAG,IAAI;IAEzBpB,YAAY,CAAC,KAAK,CAAC;IACnBnB,sBAAsB,aAAtBA,sBAAsB,uBAAtBA,sBAAsB,CAAGnC,IAAI,IAAIqB,EAAE,EAAE,KAAK,CAAC;IAE3C0C,aAAa,CAACa,QAAQ,CAAC;IAGvBlE,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAGkE,QAAQ,CAAC;IACxB,IAAI5E,IAAI,EAAE;MACRqC,2BAA2B,aAA3BA,2BAA2B,uBAA3BA,2BAA2B,CAAGrC,IAAI,EAAE4E,QAAQ,CAAC;IAC/C;EACF,CAAC,EACD,CACEvD,EAAE,EACFrB,IAAI,EACJU,YAAY,EACZqD,aAAa,EACb1B,2BAA2B,EAC3BF,sBAAsB,EACtBf,SAAS,CAEb,CAAC;EAED,MAAMyD,WAAW,GAAG,IAAAvD,cAAO,EAAC,MAC1BlB,SAAS,IACTD,KAAK,EACL,CAACC,SAAS,EAAED,KAAK,CAAC,CAAC;EAErB,IAAAgD,gBAAS,EAAC,MAAM;IAEd,IAAInD,IAAI,EAAE;MACRwB,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEsD,gBAAgB,CAAC9E,IAAI,CAAC;IACrC;IACA+D,aAAa,CAACnB,aAAa,CAAC;IAE5B,OAAO,MAAM;MAEX,IAAI5C,IAAI,EAAE;QACRwB,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEuD,kBAAkB,CAAC/E,IAAI,CAAC;MACvC;IACF,CAAC;EAEH,CAAC,EAAE,EAAE,CAAC;EAEN,OAAA5B,aAAA,CAAAA,aAAA,KACK2B,KAAK;IACRsB,EAAE;IACFvC,KAAK,EAAEqC,OAAO,CAACrC,KAAK,CAAC;IACrBqB,KAAK,EAAE2B,YAAY,GAAGpC,SAAS,GAAI2D,SAAS,GAAGwB,WAAW,GAAGnF,SAAU;IACvEW,OAAO;IACPE,MAAM;IACNE;EAAQ;AAEZ"}
+{"version":3,"file":"useField.js","names":["_react","require","_jsonPointer","_interopRequireDefault","_types","_ajv","_interopRequireWildcard","_DataContext","_FieldGroup","_componentHelper","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","useField","props","path","emptyValue","required","error","errorProp","onFocus","onBlur","onChange","validator","onBlurValidator","schema","errorMessages","validateInitially","validateUnchanged","toInput","fromInput","id","useMemo","makeUniqueId","dataContext","useContext","DataContext","Context","fieldGroupContext","FieldGroupContext","inFieldGroup","Boolean","setFieldError","setFieldGroupError","setShowFieldError","setShowFieldGroupError","handlePathChange","dataContextHandlePathChange","setPathWithError","dataContextSetPathWithError","errors","dataContextErrors","substring","Error","externalValue","data","pointer","setValue","useState","changedRef","useRef","useEffect","setError","showError","setShowError","schemaValidator","ajv","compile","setErrorAndUpdateDataContext","useCallback","errorWithCorrectMessage","FormError","validationRule","validateValue","valueToValidate","Promise","resolve","then","ajvErrorsToOneFormError","showAllErrors","setHasFocus","hasFocus","valueOverride","current","handleFocus","handleBlur","handleChange","argFromInput","newValue","exportError","handleMountField","handleUnMountField"],"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/cjs/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/cjs/extensions/forms/Field/index.js

@@ -22,6 +22,7 @@ var _ArraySelection = _interopRequireDefault(require("./ArraySelection"));
 var _Option = _interopRequireDefault(require("./Option"));
 var _SelectCountry = _interopRequireDefault(require("./SelectCountry"));
 var _BankAccountNumber = _interopRequireDefault(require("./BankAccountNumber"));
+var _CountryCode = _interopRequireDefault(require("./CountryCode"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const Field = {
   String: _String.default,
@@ -41,7 +42,8 @@ const Field = {
   ArraySelection: _ArraySelection.default,
   Option: _Option.default,
   SelectCountry: _SelectCountry.default,
-  BankAccountNumber: _BankAccountNumber.default
+  BankAccountNumber: _BankAccountNumber.default,
+  CountryCode: _CountryCode.default
 };
 var _default = Field;
 exports.default = _default;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_String","_interopRequireDefault","require","_Number","_Toggle","_Boolean","_Currency","_Date","_Email","_FirstName","_LastName","_NationalIdentityNumber","_PhoneNumber","_OrganizationNumber","_PostalCodeAndCity","_Selection","_ArraySelection","_Option","_SelectCountry","_BankAccountNumber","obj","__esModule","default","Field","String","StringComponent","Number","NumberComponent","Toggle","Boolean","BooleanComponent","Currency","Date","DateComponent","Email","FirstName","LastName","NationalIdentityNumber","OrganizationNumber","PhoneNumber","PostalCodeAndCity","Selection","ArraySelection","Option","SelectCountry","BankAccountNumber","_default","exports"],"sources":["../../../../../src/extensions/forms/Field/index.ts"],"sourcesContent":["import StringComponent from './String'\nimport NumberComponent from './Number'\nimport Toggle from './Toggle'\nimport BooleanComponent from './Boolean'\nimport Currency from './Currency'\nimport DateComponent from './Date'\nimport Email from './Email'\nimport FirstName from './FirstName'\nimport LastName from './LastName'\nimport NationalIdentityNumber from './NationalIdentityNumber'\nimport PhoneNumber from './PhoneNumber'\nimport OrganizationNumber from './OrganizationNumber'\nimport PostalCodeAndCity from './PostalCodeAndCity'\nimport Selection from './Selection'\nimport ArraySelection from './ArraySelection';\nimport Option from './Option'\nimport SelectCountry from './SelectCountry'\nimport BankAccountNumber from './BankAccountNumber'\n\nconst Field = {\n  String: StringComponent,\n  Number: NumberComponent,\n  Toggle,\n  Boolean: BooleanComponent,\n  Currency,\n  Date: DateComponent,\n  Email,\n  FirstName,\n  LastName,\n  NationalIdentityNumber,\n  OrganizationNumber,\n  PhoneNumber,\n  PostalCodeAndCity,\n  Selection,\n  ArraySelection,\n  Option,\n  SelectCountry,\n  BankAccountNumber,\n}\n\nexport default Field\n"],"mappings":";;;;;;AAAA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,QAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,SAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,KAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,MAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,UAAA,GAAAR,sBAAA,CAAAC,OAAA;AACA,IAAAQ,SAAA,GAAAT,sBAAA,CAAAC,OAAA;AACA,IAAAS,uBAAA,GAAAV,sBAAA,CAAAC,OAAA;AACA,IAAAU,YAAA,GAAAX,sBAAA,CAAAC,OAAA;AACA,IAAAW,mBAAA,GAAAZ,sBAAA,CAAAC,OAAA;AACA,IAAAY,kBAAA,GAAAb,sBAAA,CAAAC,OAAA;AACA,IAAAa,UAAA,GAAAd,sBAAA,CAAAC,OAAA;AACA,IAAAc,eAAA,GAAAf,sBAAA,CAAAC,OAAA;AACA,IAAAe,OAAA,GAAAhB,sBAAA,CAAAC,OAAA;AACA,IAAAgB,cAAA,GAAAjB,sBAAA,CAAAC,OAAA;AACA,IAAAiB,kBAAA,GAAAlB,sBAAA,CAAAC,OAAA;AAAmD,SAAAD,uBAAAmB,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEnD,MAAMG,KAAK,GAAG;EACZC,MAAM,EAAEC,eAAe;EACvBC,MAAM,EAAEC,eAAe;EACvBC,MAAM,EAANA,eAAM;EACNC,OAAO,EAAEC,gBAAgB;EACzBC,QAAQ,EAARA,iBAAQ;EACRC,IAAI,EAAEC,aAAa;EACnBC,KAAK,EAALA,cAAK;EACLC,SAAS,EAATA,kBAAS;EACTC,QAAQ,EAARA,iBAAQ;EACRC,sBAAsB,EAAtBA,+BAAsB;EACtBC,kBAAkB,EAAlBA,2BAAkB;EAClBC,WAAW,EAAXA,oBAAW;EACXC,iBAAiB,EAAjBA,0BAAiB;EACjBC,SAAS,EAATA,kBAAS;EACTC,cAAc,EAAdA,uBAAc;EACdC,MAAM,EAANA,eAAM;EACNC,aAAa,EAAbA,sBAAa;EACbC,iBAAiB,EAAjBA;AACF,CAAC;AAAA,IAAAC,QAAA,GAEcvB,KAAK;AAAAwB,OAAA,CAAAzB,OAAA,GAAAwB,QAAA"}
+{"version":3,"file":"index.js","names":["_String","_interopRequireDefault","require","_Number","_Toggle","_Boolean","_Currency","_Date","_Email","_FirstName","_LastName","_NationalIdentityNumber","_PhoneNumber","_OrganizationNumber","_PostalCodeAndCity","_Selection","_ArraySelection","_Option","_SelectCountry","_BankAccountNumber","_CountryCode","obj","__esModule","default","Field","String","StringComponent","Number","NumberComponent","Toggle","Boolean","BooleanComponent","Currency","Date","DateComponent","Email","FirstName","LastName","NationalIdentityNumber","OrganizationNumber","PhoneNumber","PostalCodeAndCity","Selection","ArraySelection","Option","SelectCountry","BankAccountNumber","CountryCode","_default","exports"],"sources":["../../../../../src/extensions/forms/Field/index.ts"],"sourcesContent":["import StringComponent from './String'\nimport NumberComponent from './Number'\nimport Toggle from './Toggle'\nimport BooleanComponent from './Boolean'\nimport Currency from './Currency'\nimport DateComponent from './Date'\nimport Email from './Email'\nimport FirstName from './FirstName'\nimport LastName from './LastName'\nimport NationalIdentityNumber from './NationalIdentityNumber'\nimport PhoneNumber from './PhoneNumber'\nimport OrganizationNumber from './OrganizationNumber'\nimport PostalCodeAndCity from './PostalCodeAndCity'\nimport Selection from './Selection'\nimport ArraySelection from './ArraySelection'\nimport Option from './Option'\nimport SelectCountry from './SelectCountry'\nimport BankAccountNumber from './BankAccountNumber'\nimport CountryCode from './CountryCode'\n\nconst Field = {\n  String: StringComponent,\n  Number: NumberComponent,\n  Toggle,\n  Boolean: BooleanComponent,\n  Currency,\n  Date: DateComponent,\n  Email,\n  FirstName,\n  LastName,\n  NationalIdentityNumber,\n  OrganizationNumber,\n  PhoneNumber,\n  PostalCodeAndCity,\n  Selection,\n  ArraySelection,\n  Option,\n  SelectCountry,\n  BankAccountNumber,\n  CountryCode,\n}\n\nexport default Field\n"],"mappings":";;;;;;AAAA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,QAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,SAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,KAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,MAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,UAAA,GAAAR,sBAAA,CAAAC,OAAA;AACA,IAAAQ,SAAA,GAAAT,sBAAA,CAAAC,OAAA;AACA,IAAAS,uBAAA,GAAAV,sBAAA,CAAAC,OAAA;AACA,IAAAU,YAAA,GAAAX,sBAAA,CAAAC,OAAA;AACA,IAAAW,mBAAA,GAAAZ,sBAAA,CAAAC,OAAA;AACA,IAAAY,kBAAA,GAAAb,sBAAA,CAAAC,OAAA;AACA,IAAAa,UAAA,GAAAd,sBAAA,CAAAC,OAAA;AACA,IAAAc,eAAA,GAAAf,sBAAA,CAAAC,OAAA;AACA,IAAAe,OAAA,GAAAhB,sBAAA,CAAAC,OAAA;AACA,IAAAgB,cAAA,GAAAjB,sBAAA,CAAAC,OAAA;AACA,IAAAiB,kBAAA,GAAAlB,sBAAA,CAAAC,OAAA;AACA,IAAAkB,YAAA,GAAAnB,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAoB,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEvC,MAAMG,KAAK,GAAG;EACZC,MAAM,EAAEC,eAAe;EACvBC,MAAM,EAAEC,eAAe;EACvBC,MAAM,EAANA,eAAM;EACNC,OAAO,EAAEC,gBAAgB;EACzBC,QAAQ,EAARA,iBAAQ;EACRC,IAAI,EAAEC,aAAa;EACnBC,KAAK,EAALA,cAAK;EACLC,SAAS,EAATA,kBAAS;EACTC,QAAQ,EAARA,iBAAQ;EACRC,sBAAsB,EAAtBA,+BAAsB;EACtBC,kBAAkB,EAAlBA,2BAAkB;EAClBC,WAAW,EAAXA,oBAAW;EACXC,iBAAiB,EAAjBA,0BAAiB;EACjBC,SAAS,EAATA,kBAAS;EACTC,cAAc,EAAdA,uBAAc;EACdC,MAAM,EAANA,eAAM;EACNC,aAAa,EAAbA,sBAAa;EACbC,iBAAiB,EAAjBA,0BAAiB;EACjBC,WAAW,EAAXA;AACF,CAAC;AAAA,IAAAC,QAAA,GAEcxB,KAAK;AAAAyB,OAAA,CAAA1B,OAAA,GAAAyB,QAAA"}

package/cjs/extensions/forms/Field/style/dnb-array-selection.css

@@ -0,0 +1,13 @@
+.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options {
+  display: flex;
+  flex-flow: column;
+  grid-row-gap: var(--spacing-x-small);
+  row-gap: var(--spacing-x-small);
+}
+.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options {
+  display: flex;
+  flex-flow: row wrap;
+  grid-column-gap: var(--spacing-small);
+  -moz-column-gap: var(--spacing-small);
+       column-gap: var(--spacing-small);
+}

package/cjs/extensions/forms/Field/style/dnb-array-selection.min.css

@@ -0,0 +1 @@
+.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options{grid-row-gap:var(--spacing-x-small);display:flex;flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row wrap}

package/cjs/extensions/forms/Field/style/dnb-array-selection.scss

@@ -0,0 +1,15 @@
+@import '../../variables.scss';
+
+.dnb-forms-field-array-selection {
+  &--options-layout-vertical &__options {
+    display: flex;
+    flex-flow: column;
+    row-gap: var(--spacing-x-small);
+  }
+
+  &--options-layout-horizontal &__options {
+    display: flex;
+    flex-flow: row wrap;
+    column-gap: var(--spacing-small);
+  }
+}