npm - @dnb/eufemia - Versions diffs - 10.7.0 → 10.8.0 - Mend

@dnb/eufemia 10.7.0 → 10.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (924) hide show

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

	@@ -1 +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","_ref","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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"}
1	+ {"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","_ref","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/extensions/forms/Field/Toggle.js CHANGED Viewed

@@ -23,31 +23,32 @@ function Toggle(props) {
     disabled,
     label,
     labelDescription,
+    labelSecondary,
     textOn,
     textOff,
     value,
     info,
     warning,
     error,
-    onChange
+    handleChange
   } = useField(props);
   const handleCheckboxChange = 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 = 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
@@ -59,7 +60,8 @@ function Toggle(props) {
   const fieldBlockProps = _objectSpread(_objectSpread({}, fieldBlockPropsWithoutLabel), {}, {
     layout,
     label,
-    labelDescription
+    labelDescription,
+    labelSecondary
   });
   const isOn = value === valueOn;
   switch (variant) {

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

	@@ -1 +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","_ref","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":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,WAAW,QAAQ,OAAO;AACtD,SAASC,QAAQ,EAAEC,YAAY,EAAEC,MAAM,EAAEC,KAAK,QAAQ,qBAAqB;AAC3E,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,SAAS,MAAM,qBAAqB;AAC3C,OAAOC,UAAU,MAAM,eAAe;AACtC,SAASC,QAAQ,QAAQ,SAAS;AAGlC,SAASC,iBAAiB,QAAQ,UAAU;AAC5C,OAAOC,aAAa,MAAM,yBAAyB;AAWnD,SAASC,MAAMA,CAACC,KAAY,EAAE;EAC5B,MAAMC,aAAa,GAAGd,UAAU,CAACW,aAAa,CAAC;EAC/C,MAAM;IACJI,EAAE;IACFC,SAAS;IACTC,OAAO;IACPC,QAAQ;IACRC,MAAM;IACNC,OAAO;IACPC,QAAQ;IACRC,KAAK;IACLC,gBAAgB;IAChBC,MAAM;IACNC,OAAO;IACPC,KAAK;IACLC,IAAI;IACJC,OAAO;IACPC,KAAK;IACLC;EACF,CAAC,~~GAAGrB~~,QAAQ,CAACI,KAAK,CAAC;EAEnB,~~MAAMkB~~,oBAAoB,~~GAAG9B~~,WAAW,~~CACtC+B~~,IAAA,IAAiB;IAAA,IAAhB;MAAEC;IAAQ,CAAC,GAAAD,IAAA;IACVF,~~QAAQ~~,~~aAARA~~,~~QAAQ~~,~~uBAARA~~,~~QAAQ~~,CAAGG,OAAO,~~GAAGhB~~,OAAO,GAAGC,QAAQ,CAAC;~~EAC1C~~,CAAC,EACD,~~CAACY~~,~~QAAQ~~,~~EAAEb~~,OAAO,EAAEC,QAAQ,~~CAC9B~~,CAAC;EAED,~~MAAMgB~~,KAAK,~~GAAGjC~~,WAAW,CAAC,MAAM;IAC9B,~~IAAIyB~~,KAAK,~~KAAKT~~,OAAO,EAAE;~~MACrBa~~,~~QAAQ~~,~~aAARA~~,~~QAAQ~~,~~uBAARA~~,~~QAAQ~~,~~CAAGb~~,OAAO,CAAC;~~IACrB~~;EACF,CAAC,EAAE,~~CAACa~~,~~QAAQ~~,EAAEJ,KAAK,~~EAAET~~,OAAO,CAAC,CAAC;~~EAE9B~~,~~MAAMkB~~,MAAM,~~GAAGlC~~,WAAW,CAAC,MAAM;IAC/B,~~IAAIyB~~,KAAK,~~KAAKR~~,QAAQ,EAAE;~~MACtBY~~,~~QAAQ~~,~~aAARA~~,~~QAAQ~~,~~uBAARA~~,~~QAAQ~~,~~CAAGZ~~,QAAQ,CAAC;~~IACtB~~;EACF,CAAC,EAAE,~~CAACY~~,~~QAAQ~~,EAAEJ,KAAK,~~EAAER~~,QAAQ,CAAC,CAAC;~~EAE/B~~,~~MAAMkB~~,EAAE,~~GAAG9B~~,UAAU,CAAC,~~yBAAyB~~,EAAEU,SAAS,CAAC;~~EAE3D~~,~~MAAMqB~~,2BAA2B,GAAAC,aAAA,CAAAA,aAAA;IAC/BC,KAAK,~~EAAExB~~,EAAE;IACTC,SAAS,~~EAAEoB~~;EAAE,~~GACV1B~~,iBAAiB,CAACG,KAAK,CAAC;~~IAC3Bc~~,IAAI;IACJC,OAAO;IACPC;EAAK,EACN;EAED,MAAMW,eAAe,GAAAF,aAAA,CAAAA,aAAA,KAChBD,2BAA2B;~~IAC9BlB~~,MAAM;IACNG,KAAK;IACLC;~~EAAgB~~,~~EACjB~~;EAED,MAAMkB,IAAI,GAAGf,KAAK,~~KAAKT~~,OAAO;EAE9B,QAAQG,OAAO;IACb;IACA,KAAK,UAAU;MACb,OACErB,KAAA,~~CAAA2C~~,aAAA,~~CAAClC~~,UAAU,~~EAAK6B~~,2BAA2B,~~EACzCtC~~,KAAA,~~CAAA2C~~,aAAA,~~CAACxC~~,QAAQ,~~EAAAyC~~,QAAA;~~QACP5B~~,EAAE,EAAEA,EAAG;QACPC,SAAS,~~EAAEoB~~,EAAG;~~QACdd~~,KAAK,EAAEA,KAAM;~~QACbW~~,OAAO,EAAEQ,IAAK;~~QACdpB~~,QAAQ,EAAEA,QAAS;~~QACnBuB~~,SAAS,EAAEb;MAAqB,~~GAC5BrB~~,iBAAiB,CAACG,KAAK,CAAC,CAC7B,CACS,CAAC;IAEjB,KAAK,QAAQ;MACX,OACEd,KAAA,~~CAAA2C~~,aAAA,~~CAAClC~~,UAAU,~~EAAKgC~~,eAAe,~~EAC7BzC~~,KAAA,~~CAAA2C~~,aAAA,~~CAACvC~~,YAAY;QACXY,EAAE,EAAEA,EAAG;~~QACP8B~~,IAAI,EACFJ,IAAI,GACAjB,MAAM,~~KAAIV~~,aAAa,aAAbA,aAAa,uBAAbA,aAAa,~~CAAEgC~~,WAAW,CAACC,KAAK,CAACC,UAAU,IACrDvB,OAAO,~~KAAIX~~,aAAa,aAAbA,aAAa,uBAAbA,aAAa,~~CAAEgC~~,WAAW,CAACC,KAAK,CAACE,SAAS,CAC1D;QACDhB,OAAO,EAAEQ,IAAK;~~QACdpB~~,QAAQ,EAAEA,QAAS;~~QACnBK~~,KAAK,EAAEA,KAAK,GAAG,MAAM,GAAG,OAAQ;QAChCkB,SAAS,EAAEb;MAAqB,CACjC,CACS,CAAC;IAEjB,KAAK,SAAS;MACZ,~~OACEhC~~,KAAA,~~CAAA2C~~,aAAA,~~CAAClC~~,UAAU,~~EAAKgC~~,eAAe,~~EAC7BzC~~,KAAA,~~CAAA2C~~,aAAA,~~CAACnC~~,SAAS,QACRR,KAAA,~~CAAA2C~~,aAAA,~~CAACtC~~,MAAM;QACLW,EAAE,EAAEA,EAAG;~~QACP8B~~,IAAI,EAAErB,MAAM,~~KAAIV~~,aAAa,aAAbA,aAAa,uBAAbA,aAAa,~~CAAEgC~~,WAAW,CAACC,KAAK,CAACC,UAAU,CAAC;QAC5DE,QAAQ,EAAEhB,KAAM;~~QAChBd~~,OAAO,~~EAAEqB~~,IAAI,GAAGU,SAAS,GAAG,WAAY;QACxCC,MAAM,EAAEvB,KAAK,GAAG,OAAO,GAAGsB,SAAU;~~QACpC9B~~,QAAQ,EAAEA;MAAS,CACpB,CAAC,EACFtB,KAAA,~~CAAA2C~~,aAAA,~~CAACtC~~,MAAM;QACLW,EAAE,EAAEA,EAAG;~~QACP8B~~,IAAI,EAAEpB,OAAO,~~KAAIX~~,aAAa,aAAbA,aAAa,uBAAbA,aAAa,~~CAAEgC~~,WAAW,CAACC,KAAK,CAACE,SAAS,CAAC;QAC5DC,QAAQ,EAAEf,MAAO;~~QACjBf~~,OAAO,~~EAAEqB~~,IAAI,GAAG,WAAW,GAAGU,SAAU;QACxCC,MAAM,EAAEvB,KAAK,GAAG,OAAO,GAAGsB,SAAU;~~QACpC9B~~,QAAQ,EAAEA;MAAS,CACpB,CACQ,CAAC,~~EAAAgC~~,MAAA,KAAAA,MAAA,~~GACZtD~~,KAAA,~~CAAA2C~~,aAAA,~~CAACrC~~,KAAK;~~QAACiD~~,MAAM,EAAC;MAAS,CAAE,CAAC,CAChB,CAAC;IAEjB,KAAK,iBAAiB;MACpB,~~OACEvD~~,KAAA,~~CAAA2C~~,aAAA,~~CAAClC~~,UAAU,~~EAAKgC~~,eAAe,~~EAC7BzC~~,KAAA,~~CAAA2C~~,aAAA,~~CAACvC~~,YAAY;QACXY,EAAE,EAAEA,EAAG;QACPK,OAAO,EAAC,UAAU;~~QAClByB~~,IAAI,EACFJ,IAAI,GACAjB,MAAM,~~KAAIV~~,aAAa,aAAbA,aAAa,uBAAbA,aAAa,~~CAAEgC~~,WAAW,CAACC,KAAK,CAACC,UAAU,IACrDvB,OAAO,~~KAAIX~~,aAAa,aAAbA,aAAa,uBAAbA,aAAa,~~CAAEgC~~,WAAW,CAACC,KAAK,CAACE,SAAS,CAC1D;QACDhB,OAAO,EAAEQ,IAAK;~~QACdpB~~,QAAQ,EAAEA,QAAS;~~QACnBK~~,KAAK,EAAEA,KAAK,GAAG,MAAM,GAAG,OAAQ;QAChCkB,SAAS,EAAEb;MAAqB,CACjC,CACS,CAAC;EAEnB;AACF;~~AAEAnB~~,MAAM,~~CAAC2C~~,4BAA4B,GAAG,IAAI;AAC1C,~~eAAe3C~~,MAAM"}
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","labelSecondary","textOn","textOff","value","info","warning","error","handleChange","handleCheckboxChange","_ref","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/extensions/forms/Field/fields.scss CHANGED Viewed

@@ -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/extensions/forms/Field/hooks/useField.d.ts CHANGED Viewed

@@ -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/extensions/forms/Field/hooks/useField.js CHANGED Viewed

@@ -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,38 +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(_ref => {
-    let {
-      onFocusValue
-    } = _ref;
-    onFocusProp === null || onFocusProp === void 0 ? void 0 : onFocusProp(onFocusValue ?? value);
-  }, [value, onFocusProp]);
-  const onBlur = useCallback(_ref2 => {
-    let {
-      onBlurValue
-    } = _ref2;
-    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) {
@@ -144,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/extensions/forms/Field/hooks/useField.js.map CHANGED Viewed

	@@ -1 +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","_ref","onFocusValue","_ref2","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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"}
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","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":";;;AAAA,SACEA,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,WAAW,EACXC,OAAO,EACPC,QAAQ,QACH,OAAO;AACd,OAAOC,OAAO,MAAM,cAAc;AAClC,SAASC,SAAS,QAAQ,aAAa;AACvC,OAAOC,GAAG,IAAIC,uBAAuB,QAAQ,iBAAiB;AAC9D,OAAOC,WAAW,MAAM,mBAAmB;AAE3C,SAASC,iBAAiB,QAAQ,kBAAkB;AACpD,SAASC,YAAY,QAAQ,qCAAqC;AASlE,eAAe,SAASC,QAAQA,CAC9BC,KAAY,EACc;EAC1B,MAAM;IACJC,IAAI;IACJC,UAAU;IACVC,QAAQ;IACRC,KAAK,EAAEC,SAAS;IAChBC,OAAO;IACPC,MAAM;IACNC,QAAQ;IACRC,SAAS;IACTC,eAAe;IACfC,MAAM;IACNC,aAAa;IACbC,iBAAiB;IACjBC,iBAAiB;IACjBC,OAAO,GAAIC,KAAK,IAAKA,KAAK;IAC1BC,SAAS,GAAID,KAAK,IAAKA;EACzB,CAAC,GAAGhB,KAAK;EACT,MAAMkB,EAAE,GAAG5B,OAAO,CAAC,MAAMU,KAAK,CAACkB,EAAE,IAAIpB,YAAY,CAAC,CAAC,EAAE,CAACE,KAAK,CAACkB,EAAE,CAAC,CAAC;EAChE,MAAMC,WAAW,GAAG/B,UAAU,CAACQ,WAAW,CAACwB,OAAO,CAAC;EACnD,MAAMC,iBAAiB,GAAGjC,UAAU,CAACS,iBAAiB,CAAC;EACvD,MAAMyB,YAAY,GAAGC,OAAO,CAACF,iBAAiB,CAAC;EAC/C,MAAM;IACJG,aAAa,EAAEC,kBAAkB;IACjCC,iBAAiB,EAAEC;EACrB,CAAC,GAAGN,iBAAiB,IAAI,CAAC,CAAC;EAC3B,MAAM;IACJO,gBAAgB,EAAEC,2BAA2B;IAC7CC,gBAAgB,EAAEC,2BAA2B;IAC7CC,MAAM,EAAEC;EACV,CAAC,GAAGd,WAAW,IAAI,CAAC,CAAC;EAErB,IAAIlB,IAAI,IAAIA,IAAI,CAACiC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,GAAG,EAAE;IACxC,MAAM,IAAIC,KAAK,CACb,gFACF,CAAC;EACH;EAEA,MAAMC,aAAa,GAAG9C,OAAO,CAAC,MAAM;IAClC,OACEU,KAAK,CAACgB,KAAK,KACVG,WAAW,CAACkB,IAAI,IACjBpC,IAAI,KAAKqC,SAAS,IAClB9C,OAAO,CAAC+C,GAAG,CAACpB,WAAW,CAACkB,IAAI,EAAEpC,IAAI,CAAC,GAC/BT,OAAO,CAACgD,GAAG,CAACrB,WAAW,CAACkB,IAAI,EAAEpC,IAAI,CAAC,GACnCqC,SAAS,CAAC;EAElB,CAAC,EAAE,CAACrC,IAAI,EAAED,KAAK,CAACgB,KAAK,EAAEG,WAAW,CAACkB,IAAI,CAAC,CAAC;EAIzC,MAAM,CAACrB,KAAK,EAAEyB,QAAQ,CAAC,GAAGlD,QAAQ,CAAC6C,aAAa,CAAC;EACjD,MAAMM,UAAU,GAAGxD,MAAM,CAAC,KAAK,CAAC;EAEhCC,SAAS,CAAC,MAAM;IAGdsD,QAAQ,CAACL,aAAa,CAAC;EACzB,CAAC,EAAE,CAACA,aAAa,CAAC,CAAC;EAGnB,MAAM,CAAChC,KAAK,EAAEuC,QAAQ,CAAC,GAAGpD,QAAQ,CAAgC,CAAC;EACnE,MAAM,CAACqD,SAAS,EAAEC,YAAY,CAAC,GAAGtD,QAAQ,CACxCgC,OAAO,CAACV,iBAAiB,IAAIR,SAAS,CACxC,CAAC;EACD,MAAMyC,eAAe,GAAGxD,OAAO,CAC7B,MACEqB,MAAM,IAAIoC,MAAM,CAACC,IAAI,CAACrC,MAAM,CAAC,CAACsC,MAAM,GAAG,CAAC,GACpCvD,GAAG,CAACwD,OAAO,CAACvC,MAAM,CAAC,GACnB2B,SAAS,EACf,CAAC3B,MAAM,CACT,CAAC;EAED,MAAMwC,4BAA4B,GAAG9D,WAAW,CAC7Ce,KAA4B,IAAK;IAChC,MAAMgD,uBAAuB,GAC3BhD,KAAK,YAAYX,SAAS,IAC1B,OAAOW,KAAK,CAACiD,cAAc,KAAK,QAAQ,IACxC,CAAAzC,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAGR,KAAK,CAACiD,cAAc,CAAC,MAAKf,SAAS,GAC/C,IAAI7C,SAAS,CAACmB,aAAa,CAACR,KAAK,CAACiD,cAAc,CAAC,CAAC,GAClDjD,KAAK;IAEXuC,QAAQ,CAACS,uBAAuB,CAAC;IAEjC,IAAInD,IAAI,EAAE;MAER8B,2BAA2B,aAA3BA,2BAA2B,uBAA3BA,2BAA2B,CAAG9B,IAAI,EAAEsB,OAAO,CAACnB,KAAK,CAAC,CAAC;IACrD;IAEAqB,kBAAkB,aAAlBA,kBAAkB,uBAAlBA,kBAAkB,CAAGxB,IAAI,IAAIiB,EAAE,EAAEkC,uBAAuB,CAAC;EAC3D,CAAC,EACD,CACEnD,IAAI,EACJiB,EAAE,EACFN,aAAa,EACbmB,2BAA2B,EAC3BN,kBAAkB,CAEtB,CAAC;EAED,MAAM6B,aAAa,GAAGjE,WAAW,CAC9BkE,eAAe,IAA4B;IAG1C,IAAI,OAAO9C,SAAS,KAAK,UAAU,EAAE;MAEnC+C,OAAO,CAACC,OAAO,CAAChD,SAAS,CAAC8C,eAAe,CAAC,CAAC,CAIxCG,IAAI,CAACP,4BAA4B,CAAC;IACvC;IAEA,IAAII,eAAe,KAAKrD,UAAU,IAAIC,QAAQ,EAAE;MAC9C,MAAMC,KAAK,GAAG,IAAIX,SAAS,CAAC,uBAAuB,EAAE;QACnD4D,cAAc,EAAE;MAClB,CAAC,CAAC;MACFF,4BAA4B,CAAC/C,KAAK,CAAC;MACnC,OAAOA,KAAK;IACd,CAAC,MAAM,IAAI0C,eAAe,EAAE;MAE1B,IAAIS,eAAe,KAAKjB,SAAS,IAAIpC,UAAU,KAAKoC,SAAS,EAAE;QAG7Da,4BAA4B,CAACb,SAAS,CAAC;QACvC,OAAOA,SAAS;MAClB;MACAQ,eAAe,CAACS,eAAe,CAAC;MAChC,MAAMnD,KAAK,GAAGT,uBAAuB,CAACmD,eAAe,CAACd,MAAM,CAAC;MAC7DmB,4BAA4B,CAAC/C,KAAK,CAAC;MACnC,OAAOA,KAAK;IACd,CAAC,MAAM;MAEL+C,4BAA4B,CAACb,SAAS,CAAC;MACvC,OAAOA,SAAS;IAClB;EACF,CAAC,EACD,CACEQ,eAAe,EACf5C,UAAU,EACVC,QAAQ,EACRgD,4BAA4B,EAC5B1C,SAAS,CAEb,CAAC;EAEDtB,SAAS,CAAC,MAAM;IAEd,IAAI,CAACiB,KAAK,IAAIH,IAAI,IAAIgC,iBAAiB,aAAjBA,iBAAiB,eAAjBA,iBAAiB,CAAGhC,IAAI,CAAC,EAAE;MAC/CkD,4BAA4B,CAAClB,iBAAiB,CAAChC,IAAI,CAAC,CAAC;IACvD;EACF,CAAC,EAAE,CAACA,IAAI,EAAEgC,iBAAiB,EAAE7B,KAAK,EAAE+C,4BAA4B,CAAC,CAAC;EAElEhE,SAAS,CAAC,MAAM;IACd,IAAIgC,WAAW,CAACwC,aAAa,EAAE;MAG7Bd,YAAY,CAAC,IAAI,CAAC;MAClBlB,sBAAsB,aAAtBA,sBAAsB,uBAAtBA,sBAAsB,CAAG1B,IAAI,IAAIiB,EAAE,EAAE,IAAI,CAAC;IAC5C;EACF,CAAC,EAAE,CAACA,EAAE,EAAEjB,IAAI,EAAEkB,WAAW,CAACwC,aAAa,EAAEhC,sBAAsB,CAAC,CAAC;EAEjE,MAAMiC,WAAW,GAAGvE,WAAW,CAC7B,CAACwE,QAAiB,EAAEC,aAAuB,KAAK;IAC9C,IAAID,QAAQ,EAAE;MAEZvD,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAGwD,aAAa,IAAI9C,KAAK,CAAC;IACnC,CAAC,MAAM;MAELT,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAGuD,aAAa,IAAI9C,KAAK,CAAC;MAEhC,IAAI,CAAC0B,UAAU,CAACqB,OAAO,IAAI,CAACjD,iBAAiB,EAAE;QAG7C;MACF;MAIA,IAAI,OAAOJ,eAAe,KAAK,UAAU,EAAE;QAEzC8C,OAAO,CAACC,OAAO,CAAC/C,eAAe,CAACoD,aAAa,IAAI9C,KAAK,CAAC,CAAC,CAIrD0C,IAAI,CAACP,4BAA4B,CAAC;MACvC;MAGAN,YAAY,CAAC,IAAI,CAAC;MAClBlB,sBAAsB,aAAtBA,sBAAsB,uBAAtBA,sBAAsB,CAAG1B,IAAI,IAAIiB,EAAE,EAAE,IAAI,CAAC;IAC5C;EACF,CAAC,EACD,CACEA,EAAE,EACFjB,IAAI,EACJe,KAAK,EACLF,iBAAiB,EACjBR,OAAO,EACPC,MAAM,EACNG,eAAe,EACfyC,4BAA4B,EAC5BxB,sBAAsB,CAE1B,CAAC;EAED,MAAMqC,WAAW,GAAG3E,WAAW,CAAC,MAAMuE,WAAW,CAAC,IAAI,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EACvE,MAAMK,UAAU,GAAG5E,WAAW,CAAC,MAAMuE,WAAW,CAAC,KAAK,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAEvE,MAAMM,YAAY,GAAG7E,WAAW,CAC7B8E,YAAY,IAAK;IAChB,MAAMC,QAAQ,GAAGnD,SAAS,CAACkD,YAAY,CAAC;IACxC,IAAIC,QAAQ,KAAKpD,KAAK,EAAE;MAGtB;IACF;IACAyB,QAAQ,CAAC2B,QAAQ,CAAC;IAClB1B,UAAU,CAACqB,OAAO,GAAG,IAAI;IAEzBlB,YAAY,CAAC,KAAK,CAAC;IACnBlB,sBAAsB,aAAtBA,sBAAsB,uBAAtBA,sBAAsB,CAAG1B,IAAI,IAAIiB,EAAE,EAAE,KAAK,CAAC;IAE3CoC,aAAa,CAACc,QAAQ,CAAC;IAGvB5D,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAG4D,QAAQ,CAAC;IACpB,IAAInE,IAAI,EAAE;MACR4B,2BAA2B,aAA3BA,2BAA2B,uBAA3BA,2BAA2B,CAAG5B,IAAI,EAAEmE,QAAQ,CAAC;IAC/C;EACF,CAAC,EACD,CACElD,EAAE,EACFjB,IAAI,EACJe,KAAK,EACLR,QAAQ,EACR8C,aAAa,EACbzB,2BAA2B,EAC3BF,sBAAsB,EACtBV,SAAS,CAEb,CAAC;EAED,MAAMoD,WAAW,GAAG/E,OAAO,CAAC,MAAMe,SAAS,IAAID,KAAK,EAAE,CAACC,SAAS,EAAED,KAAK,CAAC,CAAC;EAEzEjB,SAAS,CAAC,MAAM;IAEd,IAAIc,IAAI,EAAE;MACRkB,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEmD,gBAAgB,CAACrE,IAAI,CAAC;IACrC;IACAqD,aAAa,CAAClB,aAAa,CAAC;IAE5B,OAAO,MAAM;MAEX,IAAInC,IAAI,EAAE;QACRkB,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEoD,kBAAkB,CAACtE,IAAI,CAAC;MACvC;IACF,CAAC;EAEH,CAAC,EAAE,EAAE,CAAC;EAEN,OAAAuE,aAAA,CAAAA,aAAA,KACKxE,KAAK;IACRkB,EAAE;IACFF,KAAK,EAAED,OAAO,CAACC,KAAK,CAAC;IACrBZ,KAAK,EAAEkB,YAAY,GAAGgB,SAAS,GAAGM,SAAS,GAAGyB,WAAW,GAAG/B,SAAS;IACrEsB,WAAW;IACXI,WAAW;IACXC,UAAU;IACVC;EAAY;AAEhB"}

package/extensions/forms/Field/index.d.ts CHANGED Viewed

@@ -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/extensions/forms/Field/index.js CHANGED Viewed

@@ -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

package/extensions/forms/Field/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["StringComponent","NumberComponent","Toggle","BooleanComponent","Currency","DateComponent","Email","FirstName","LastName","NationalIdentityNumber","PhoneNumber","OrganizationNumber","PostalCodeAndCity","Selection","ArraySelection","Option","SelectCountry","BankAccountNumber","Field","String","Number","Boolean","Date"],"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,OAAOA,eAAe,MAAM,UAAU;AACtC,OAAOC,eAAe,MAAM,UAAU;AACtC,OAAOC,MAAM,MAAM,UAAU;AAC7B,OAAOC,gBAAgB,MAAM,WAAW;AACxC,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,aAAa,MAAM,QAAQ;AAClC,OAAOC,KAAK,MAAM,SAAS;AAC3B,OAAOC,SAAS,MAAM,aAAa;AACnC,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,sBAAsB,MAAM,0BAA0B;AAC7D,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,kBAAkB,MAAM,sBAAsB;AACrD,OAAOC,iBAAiB,MAAM,qBAAqB;AACnD,OAAOC,SAAS,MAAM,aAAa;AACnC,OAAOC,cAAc,MAAM,kBAAkB;AAC7C,OAAOC,MAAM,MAAM,UAAU;AAC7B,OAAOC,aAAa,MAAM,iBAAiB;AAC3C,OAAOC,iBAAiB,MAAM,qBAAqB;~~AAEnD~~,MAAMC,KAAK,GAAG;EACZC,MAAM,~~EAAEnB~~,eAAe;~~EACvBoB~~,MAAM,~~EAAEnB~~,eAAe;EACvBC,MAAM;~~EACNmB~~,OAAO,~~EAAElB~~,gBAAgB;EACzBC,QAAQ;~~EACRkB~~,IAAI,~~EAAEjB~~,aAAa;EACnBC,KAAK;EACLC,SAAS;EACTC,QAAQ;EACRC,sBAAsB;EACtBE,kBAAkB;EAClBD,WAAW;EACXE,iBAAiB;EACjBC,SAAS;EACTC,cAAc;EACdC,MAAM;EACNC,aAAa;EACbC;AACF,CAAC;AAED,eAAeC,KAAK"}
1	+ {"version":3,"file":"index.js","names":["StringComponent","NumberComponent","Toggle","BooleanComponent","Currency","DateComponent","Email","FirstName","LastName","NationalIdentityNumber","PhoneNumber","OrganizationNumber","PostalCodeAndCity","Selection","ArraySelection","Option","SelectCountry","BankAccountNumber","CountryCode","Field","String","Number","Boolean","Date"],"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,OAAOA,eAAe,MAAM,UAAU;AACtC,OAAOC,eAAe,MAAM,UAAU;AACtC,OAAOC,MAAM,MAAM,UAAU;AAC7B,OAAOC,gBAAgB,MAAM,WAAW;AACxC,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,aAAa,MAAM,QAAQ;AAClC,OAAOC,KAAK,MAAM,SAAS;AAC3B,OAAOC,SAAS,MAAM,aAAa;AACnC,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,sBAAsB,MAAM,0BAA0B;AAC7D,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,kBAAkB,MAAM,sBAAsB;AACrD,OAAOC,iBAAiB,MAAM,qBAAqB;AACnD,OAAOC,SAAS,MAAM,aAAa;AACnC,OAAOC,cAAc,MAAM,kBAAkB;AAC7C,OAAOC,MAAM,MAAM,UAAU;AAC7B,OAAOC,aAAa,MAAM,iBAAiB;AAC3C,OAAOC,iBAAiB,MAAM,qBAAqB;AACnD,OAAOC,WAAW,MAAM,eAAe;AAEvC,MAAMC,KAAK,GAAG;EACZC,MAAM,EAAEpB,eAAe;EACvBqB,MAAM,EAAEpB,eAAe;EACvBC,MAAM;EACNoB,OAAO,EAAEnB,gBAAgB;EACzBC,QAAQ;EACRmB,IAAI,EAAElB,aAAa;EACnBC,KAAK;EACLC,SAAS;EACTC,QAAQ;EACRC,sBAAsB;EACtBE,kBAAkB;EAClBD,WAAW;EACXE,iBAAiB;EACjBC,SAAS;EACTC,cAAc;EACdC,MAAM;EACNC,aAAa;EACbC,iBAAiB;EACjBC;AACF,CAAC;AAED,eAAeC,KAAK"}

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

@@ -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/extensions/forms/Field/style/dnb-array-selection.min.css ADDED Viewed

@@ -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/extensions/forms/Field/style/dnb-array-selection.scss ADDED Viewed

@@ -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);
+  }
+}

package/extensions/forms/Field/style/dnb-country-code.css ADDED Viewed

@@ -0,0 +1,12 @@
+.dnb-forms-field-country-code .dnb-autocomplete__inner {
+  --autocomplete-width: 9rem;
+}
+.dnb-forms-field-country-code--width-small .dnb-autocomplete__inner {
+  --autocomplete-width: 5rem;
+}
+.dnb-forms-field-country-code--width-medium .dnb-autocomplete__inner {
+  --autocomplete-width: 11rem;
+}
+.dnb-forms-field-country-code--width-large .dnb-autocomplete__inner {
+  --autocomplete-width: 21rem;
+}

package/extensions/forms/Field/style/dnb-country-code.min.css ADDED Viewed

	@@ -0,0 +1 @@
1	+ .dnb-forms-field-country-code .dnb-autocomplete__inner{--autocomplete-width:9rem}.dnb-forms-field-country-code--width-small .dnb-autocomplete__inner{--autocomplete-width:5rem}.dnb-forms-field-country-code--width-medium .dnb-autocomplete__inner{--autocomplete-width:11rem}.dnb-forms-field-country-code--width-large .dnb-autocomplete__inner{--autocomplete-width:21rem}

package/extensions/forms/Field/style/dnb-country-code.scss ADDED Viewed

@@ -0,0 +1,19 @@
+@import '../../variables.scss';
+.dnb-forms-field-country-code {
+  .dnb-autocomplete__inner {
+    --autocomplete-width: 9rem;
+  }
+  &--width-small .dnb-autocomplete__inner {
+    --autocomplete-width: #{$forms-field-width-small};
+  }
+  &--width-medium .dnb-autocomplete__inner {
+    --autocomplete-width: #{$forms-field-width-medium};
+  }
+  &--width-large .dnb-autocomplete__inner {
+    --autocomplete-width: #{$forms-field-width-large};
+  }
+}

package/extensions/forms/Field/style/dnb-phone-number.css CHANGED Viewed

@@ -9,17 +9,13 @@
   width: 100%;
 }
 .dnb-forms-field-phone-number--width-large {
-  width: 336px;
-}
-.dnb-forms-field-phone-number--width-medium {
-  width: 176px;
+  width: 21rem;
 }
 .dnb-forms-field-phone-number__country-code {
-  --autocomplete-width: 145px;
-  flex: 0 144px;
+  flex: 0 9rem;
 }
 .dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell {
-  width: 144px;
+  width: 9rem;
 }
 .dnb-forms-field-phone-number__number {
   flex: 1;

package/extensions/forms/Field/style/dnb-phone-number.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- .dnb-forms-field-phone-number{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-phone-number--width-stretch{width:100%}.dnb-forms-field-phone-number--width-large{width:~~336px~~}.dnb-forms-field-phone-~~number--width-medium{width:176px}.dnb-forms-field-phone-~~number__country-code{~~--autocomplete-width:145px;~~flex:0 ~~144px~~}.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:~~144px~~}.dnb-forms-field-phone-number__number{flex:1}
1	+ .dnb-forms-field-phone-number{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-phone-number--width-stretch{width:100%}.dnb-forms-field-phone-number--width-large{width:21rem}.dnb-forms-field-phone-number__country-code{flex:0 9rem}.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:9rem}.dnb-forms-field-phone-number__number{flex:1}

package/extensions/forms/Field/style/dnb-phone-number.scss CHANGED Viewed

@@ -1,4 +1,4 @@
-@import '../fields.scss';
+@import '../../variables.scss';
 .dnb-forms-field-phone-number {
   display: flex;
@@ -13,16 +13,11 @@
     width: $forms-field-width-large;
   }
-  &--width-medium {
-    width: $forms-field-width-medium;
-  }
   &__country-code {
-    --autocomplete-width: 145px;
-    flex: 0 144px;
+    flex: 0 9rem;
     .dnb-autocomplete__shell {
-      width: 144px;
+      width: 9rem;
     }
   }

package/extensions/forms/Field/style/dnb-postal-code-and-city.css CHANGED Viewed

@@ -5,11 +5,14 @@
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
 }
+.dnb-forms-field-postal-code-and-city--width-small {
+  width: 5rem;
+}
 .dnb-forms-field-postal-code-and-city--width-medium {
-  width: 176px;
+  width: 11rem;
 }
 .dnb-forms-field-postal-code-and-city--width-large {
-  width: 336px;
+  width: 21rem;
 }
 .dnb-forms-field-postal-code-and-city__postal-code {
   flex: 0 5rem;

package/extensions/forms/Field/style/dnb-postal-code-and-city.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- .dnb-forms-field-postal-code-and-city__fields{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-postal-code-and-city--width-medium{width:~~176px~~}.dnb-forms-field-postal-code-and-city--width-large{width:~~336px~~}.dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.dnb-forms-field-postal-code-and-city__city{flex:1}
1	+ .dnb-forms-field-postal-code-and-city__fields{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-postal-code-and-city--width-small{width:5rem}.dnb-forms-field-postal-code-and-city--width-medium{width:11rem}.dnb-forms-field-postal-code-and-city--width-large{width:21rem}.dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.dnb-forms-field-postal-code-and-city__city{flex:1}

package/extensions/forms/Field/style/dnb-postal-code-and-city.scss CHANGED Viewed

@@ -1,4 +1,4 @@
-@import '../fields.scss';
+@import '../../variables.scss';
 .dnb-forms-field-postal-code-and-city {
   &__fields {
@@ -7,6 +7,10 @@
     column-gap: var(--spacing-small);
   }
+  &--width-small {
+    width: $forms-field-width-small;
+  }
   &--width-medium {
     width: $forms-field-width-medium;
   }

package/extensions/forms/Field/style/dnb-selection.css CHANGED Viewed

@@ -1,6 +1,9 @@
 .dnb-forms-field-selection--width-large .dnb-dropdown__shell {
-  width: 336px;
+  width: 21rem;
 }
 .dnb-forms-field-selection--width-medium .dnb-dropdown__shell {
-  width: 176px;
+  width: 11rem;
+}
+.dnb-forms-field-selection--width-small .dnb-dropdown__shell {
+  width: 5rem;
 }