npm - @dnb/eufemia - Versions diffs - 10.10.0 → 10.11.0 - Mend

@dnb/eufemia 10.10.0 → 10.11.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 (722) hide show

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

@@ -40,7 +40,9 @@ function StringComponent(props) {
   });
   const {
     id,
+    name,
     className,
+    autoComplete,
     innerRef,
     inputClassName,
     layout,
@@ -70,6 +72,24 @@ function StringComponent(props) {
   } = useDataValue(preparedProps);
   const characterCounterElement = characterCounter ? props.maxLength ? `${(value === null || value === void 0 ? void 0 : value.length) ?? '0'}/${props.maxLength}` : `${(value === null || value === void 0 ? void 0 : value.length) ?? '0'}` : undefined;
   const cn = classnames('dnb-forms-field-string__input', inputClassName);
+  const sharedProps = {
+    id,
+    name,
+    autoComplete,
+    className: cn,
+    placeholder: placeholder,
+    suffix: help ? React.createElement(HelpButton, {
+      title: help.title
+    }, help.contents) : undefined,
+    on_focus: handleFocus,
+    on_blur: handleBlur,
+    on_change: handleChange,
+    disabled: disabled,
+    stretch: width !== undefined,
+    inner_ref: innerRef,
+    status: error ? 'error' : undefined,
+    value: (value === null || value === void 0 ? void 0 : value.toString()) ?? ''
+  };
   return React.createElement(FieldBlock, _extends({
     className: classnames('dnb-forms-field-string', className),
     forId: id,
@@ -81,62 +101,19 @@ function StringComponent(props) {
     warning: warning,
     error: error,
     contentsWidth: width !== false ? width : undefined
-  }, pickSpacingProps(props)), multiline ? React.createElement(Textarea, {
-    id: id,
-    className: cn,
-    placeholder: placeholder,
-    value: value,
-    suffix: help ? React.createElement(HelpButton, {
-      title: help.title,
-      left: "x-small"
-    }, help.contents) : undefined,
-    on_focus: handleFocus,
-    on_blur: handleBlur,
-    on_change: handleChange,
+  }, pickSpacingProps(props)), multiline ? React.createElement(Textarea, _extends({}, sharedProps, {
     autoresize: autoresize,
-    autoresize_max_rows: autoresizeMaxRows,
-    disabled: disabled,
-    stretch: width !== undefined,
-    inner_ref: innerRef,
-    status: error ? 'error' : undefined
-  }) : mask ? React.createElement(InputMasked, {
-    id: id,
-    className: cn,
+    autoresize_max_rows: autoresizeMaxRows
+  })) : mask ? React.createElement(InputMasked, _extends({}, sharedProps, {
     mask: mask,
-    placeholder: placeholder,
-    value: (value === null || value === void 0 ? void 0 : value.toString()) ?? '',
     icon: leftIcon ?? rightIcon,
-    icon_position: rightIcon && !leftIcon ? 'right' : undefined,
-    suffix: help ? React.createElement(HelpButton, {
-      title: help.title
-    }, help.contents) : undefined,
-    on_focus: handleFocus,
-    on_blur: handleBlur,
-    on_change: handleChange,
-    disabled: disabled,
-    stretch: width !== undefined,
-    inner_ref: innerRef,
-    status: error ? 'error' : undefined
-  }) : React.createElement(Input, {
-    id: id,
-    className: cn,
+    icon_position: rightIcon && !leftIcon ? 'right' : undefined
+  })) : React.createElement(Input, _extends({}, sharedProps, {
     type: type,
-    placeholder: placeholder,
-    value: (value === null || value === void 0 ? void 0 : value.toString()) ?? '',
     icon: leftIcon ?? rightIcon,
     icon_position: rightIcon && !leftIcon ? 'right' : undefined,
-    clear: clear,
-    suffix: help ? React.createElement(HelpButton, {
-      title: help.title
-    }, help.contents) : undefined,
-    on_focus: handleFocus,
-    on_blur: handleBlur,
-    on_change: handleChange,
-    disabled: disabled,
-    stretch: width !== undefined,
-    inner_ref: innerRef,
-    status: error ? 'error' : undefined
-  }));
+    clear: clear
+  })));
 }
 StringComponent._supportsSpacingProps = true;
 export default StringComponent;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"String.js","names":["React","useContext","classnames","HelpButton","Input","Textarea","InputMasked","SharedContext","FieldBlock","useDataValue","pickSpacingProps","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","innerRef","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","inner_ref","status","icon","icon_position","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/String/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 SharedContext from '../../../../shared/Context'\nimport FieldBlock from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport { FieldProps, FieldHelpProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\n\ninterface ErrorMessages {\n required?: string\n schema?: string\n minLength?: string\n maxLength?: string\n pattern?: string\n}\nexport type Props = FieldHelpProps &\n FieldProps<string, undefined \| string, ErrorMessages> & {\n type?: InputProps['type']\n multiline?: boolean\n leftIcon?: string\n rightIcon?: string\n inputClassName?: string\n innerRef?: React.RefObject<HTMLInputElement \| HTMLTextAreaElement>\n clear?: boolean\n autoresize?: boolean\n 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 // Cleaned value for masked\n return cleanedValue ?? value\n },\n width: props.width ?? 'large',\n }\n const {\n id,\n className,\n innerRef,\n inputClassName,\n layout,\n type,\n placeholder,\n label,\n labelDescription,\n labelSecondary,\n value,\n info,\n warning,\n error,\n disabled,\n help,\n multiline,\n leftIcon,\n rightIcon,\n clear,\n autoresize = true,\n autoresizeMaxRows = 6,\n characterCounter,\n mask,\n width,\n handleFocus,\n handleBlur,\n handleChange,\n } = useDataValue(preparedProps)\n\n const 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 {...pickSpacingProps(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 inner_ref={innerRef}\n status={error ? 'error' : undefined}\n />\n ) : mask ? (\n <InputMasked\n id={id}\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 inner_ref={innerRef}\n status={error ? 'error' : 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 inner_ref={innerRef}\n status={error ? 'error' : undefined}\n />\n )}\n </FieldBlock>\n )\n}\n\nStringComponent._supportsSpacingProps = true\nexport default StringComponent\n"],"mappings":"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"}
1	+ {"version":3,"file":"String.js","names":["React","useContext","classnames","HelpButton","Input","Textarea","InputMasked","SharedContext","FieldBlock","useDataValue","pickSpacingProps","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","name","className","autoComplete","innerRef","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","sharedProps","suffix","createElement","title","contents","on_focus","on_blur","on_change","stretch","inner_ref","status","_extends","forId","contentsWidth","autoresize_max_rows","icon","icon_position","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/String/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 SharedContext from '../../../../shared/Context'\nimport FieldBlock from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport { FieldProps, FieldHelpProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\n\ninterface ErrorMessages {\n required?: string\n schema?: string\n minLength?: string\n maxLength?: string\n pattern?: string\n}\nexport type Props = FieldHelpProps &\n FieldProps<string, undefined \| string, ErrorMessages> & {\n type?: InputProps['type']\n multiline?: boolean\n leftIcon?: string\n rightIcon?: string\n inputClassName?: string\n innerRef?: React.RefObject<HTMLInputElement \| HTMLTextAreaElement>\n clear?: boolean\n autoresize?: boolean\n autoComplete?: HTMLInputElement['autocomplete']\n 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 // Cleaned value for masked\n return cleanedValue ?? value\n },\n width: props.width ?? 'large',\n }\n\n const {\n id,\n name,\n className,\n autoComplete,\n innerRef,\n inputClassName,\n layout,\n type,\n placeholder,\n label,\n labelDescription,\n labelSecondary,\n value,\n info,\n warning,\n error,\n disabled,\n help,\n multiline,\n leftIcon,\n rightIcon,\n clear,\n autoresize = true,\n autoresizeMaxRows = 6,\n characterCounter,\n mask,\n width,\n handleFocus,\n handleBlur,\n handleChange,\n } = useDataValue(preparedProps)\n\n const characterCounterElement = characterCounter\n ? props.maxLength\n ? `${value?.length ?? '0'}/${props.maxLength}`\n : `${value?.length ?? '0'}`\n : undefined\n const cn = classnames('dnb-forms-field-string__input', inputClassName)\n\n const sharedProps = {\n id,\n name,\n autoComplete,\n className: cn,\n placeholder: placeholder,\n suffix: help ? (\n <HelpButton title={help.title}>{help.contents}</HelpButton>\n ) : undefined,\n on_focus: handleFocus,\n on_blur: handleBlur,\n on_change: handleChange,\n disabled: disabled,\n stretch: width !== undefined,\n inner_ref: innerRef,\n status: error ? 'error' : undefined,\n value: value?.toString() ?? '',\n }\n\n return (\n <FieldBlock\n className={classnames('dnb-forms-field-string', className)}\n forId={id}\n layout={layout}\n label={label}\n labelDescription={labelDescription}\n labelSecondary={labelSecondary ?? characterCounterElement}\n info={info}\n warning={warning}\n error={error}\n contentsWidth={width !== false ? width : undefined}\n {...pickSpacingProps(props)}\n >\n {multiline ? (\n <Textarea\n {...sharedProps}\n autoresize={autoresize}\n autoresize_max_rows={autoresizeMaxRows}\n />\n ) : mask ? (\n <InputMasked\n {...sharedProps}\n mask={mask}\n icon={leftIcon ?? rightIcon}\n icon_position={rightIcon && !leftIcon ? 'right' : undefined}\n />\n ) : (\n <Input\n {...sharedProps}\n type={type}\n icon={leftIcon ?? rightIcon}\n icon_position={rightIcon && !leftIcon ? 'right' : undefined}\n clear={clear}\n />\n )}\n </FieldBlock>\n )\n}\n\nStringComponent._supportsSpacingProps = true\nexport default StringComponent\n"],"mappings":"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"}

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

@@ -1,16 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _Space;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useContext, useCallback } from 'react';
-import { Checkbox, ToggleButton, Button, Space } from '../../../../components';
+import { Checkbox, ToggleButton } from '../../../../components';
 import classnames from 'classnames';
 import ButtonRow from '../../Form/ButtonRow';
 import FieldBlock from '../../FieldBlock';
 import { useDataValue } from '../../hooks';
 import { pickSpacingProps } from '../../../../components/flex/utils';
 import SharedContext from '../../../../shared/Context';
+import ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext';
 function Toggle(props) {
   const sharedContext = useContext(SharedContext);
   const {
@@ -38,16 +38,12 @@ function Toggle(props) {
     } = _ref;
     handleChange === null || handleChange === void 0 ? void 0 : handleChange(checked ? valueOn : valueOff);
   }, [handleChange, valueOn, valueOff]);
-  const setOn = useCallback(() => {
-    if (value !== valueOn) {
-      handleChange === null || handleChange === void 0 ? void 0 : handleChange(valueOn);
-    }
-  }, [handleChange, value, valueOn]);
-  const setOff = useCallback(() => {
-    if (value !== valueOff) {
-      handleChange === null || handleChange === void 0 ? void 0 : handleChange(valueOff);
-    }
-  }, [handleChange, value, valueOff]);
+  const handleToggleChange = useCallback(_ref2 => {
+    let {
+      value
+    } = _ref2;
+    handleChange === null || handleChange === void 0 ? void 0 : handleChange(value === 'on' ? valueOn : valueOff);
+  }, [handleChange, valueOn, valueOff]);
   const cn = classnames('dnb-forms-field-toggle', className);
   const fieldBlockPropsWithoutLabel = _objectSpread(_objectSpread({
     forId: id,
@@ -64,6 +60,7 @@ function Toggle(props) {
     labelSecondary
   });
   const isOn = value === valueOn;
+  const isOff = value === valueOff;
   switch (variant) {
     default:
     case 'checkbox':
@@ -87,23 +84,24 @@ function Toggle(props) {
         on_change: handleCheckboxChange
       }));
     case 'buttons':
-      return React.createElement(FieldBlock, fieldBlockProps, React.createElement(ButtonRow, null, React.createElement(Button, {
-        id: id,
+      return React.createElement(FieldBlock, _extends({}, fieldBlockProps, {
+        asFieldset: true
+      }), React.createElement(ButtonRow, {
+        bottom: "x-small"
+      }, React.createElement(ToggleButtonGroupContext.Provider, {
+        value: {
+          value: isOn ? 'on' : isOff ? 'off' : undefined,
+          onChange: handleToggleChange,
+          status: error ? 'error' : undefined,
+          disabled
+        }
+      }, React.createElement(ToggleButton, {
         text: textOn ?? (sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.booleanYes),
-        on_click: setOn,
-        variant: isOn ? undefined : 'secondary',
-        status: error ? 'error' : undefined,
-        disabled: disabled
-      }), React.createElement(Button, {
-        id: id,
+        value: "on"
+      }), React.createElement(ToggleButton, {
         text: textOff ?? (sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.booleanNo),
-        on_click: setOff,
-        variant: isOn ? 'secondary' : undefined,
-        disabled: disabled,
-        status: error ? 'error' : undefined
-      })), _Space || (_Space = React.createElement(Space, {
-        bottom: "x-small"
-      })));
+        value: "off"
+      }))));
     case 'checkbox-button':
       return React.createElement(FieldBlock, fieldBlockProps, React.createElement(ToggleButton, {
         id: id,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Toggle.js","names":["React","useContext","useCallback","Checkbox","ToggleButton","~~Button","Space","~~classnames","ButtonRow","FieldBlock","useDataValue","pickSpacingProps","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","status","undefined","on_change","text","translation","Forms","booleanYes","booleanNo","~~on_click~~","~~_Space~~","~~bottom~~","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Toggle/Toggle.tsx"],"sourcesContent":["import React, { useContext, useCallback } from 'react'\nimport {\n Checkbox~~,\n~~ ToggleButton~~,\n Button,\n Space,\n~~} from '../../../../components'\nimport classnames from 'classnames'\nimport ButtonRow from '../../Form/ButtonRow'\nimport FieldBlock from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport { FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = FieldProps<unknown> & {\n valueOn: unknown\n valueOff: unknown\n variant?: 'checkbox' \| 'checkbox-button' \| 'button' \| 'buttons'\n textOn?: string\n textOff?: string\n}\n\nfunction Toggle(props: Props) {\n const sharedContext = useContext(SharedContext)\n const {\n id,\n className,\n valueOn,\n valueOff,\n layout,\n variant,\n disabled,\n label,\n labelDescription,\n labelSecondary,\n textOn,\n textOff,\n value,\n info,\n warning,\n error,\n handleChange,\n } = useDataValue(props)\n\n const handleCheckboxChange = useCallback(\n ({ checked }) => {\n handleChange?.(checked ? valueOn : valueOff)\n },\n [handleChange, valueOn, valueOff]\n )\n\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 ...pickSpacingProps(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 status={error ? 'error' : undefined}\n on_change={handleCheckboxChange}\n {...pickSpacingProps(props)}\n />\n </FieldBlock>\n )\n case 'button':\n return (\n <FieldBlock {...fieldBlockProps}>\n <ToggleButton\n id={id}\n text={\n isOn\n ? textOn ?? sharedContext?.translation.Forms.booleanYes\n : textOff ?? sharedContext?.translation.Forms.booleanNo\n }\n checked={isOn}\n disabled={disabled}\n status={error ? 'error' : undefined}\n value={value ? 'true' : 'false'}\n on_change={handleCheckboxChange}\n />\n </FieldBlock>\n )\n case 'buttons':\n return (\n <FieldBlock {...fieldBlockProps}>\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 ~~disabled~~={~~disabled}~~\n ~~status={error~~ ? ~~'error' : undefined~~}\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 status={error ? 'error' : undefined}\n value={value ? 'true' : 'false'}\n on_change={handleCheckboxChange}\n />\n </FieldBlock>\n )\n }\n}\n\nToggle._supportsSpacingProps = true\nexport default Toggle\n"],"mappings":"~~;;;;;~~AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,WAAW,QAAQ,OAAO;AACtD,~~SACEC~~,QAAQ,~~EACRC~~,YAAY,~~EACZC~~,~~MAAM,EACNC,KAAK,QACA,~~wBAAwB;AAC/B,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,SAAS,MAAM,sBAAsB;AAC5C,OAAOC,UAAU,MAAM,kBAAkB;AACzC,SAASC,YAAY,QAAQ,aAAa;AAE1C,SAASC,gBAAgB,QAAQ,mCAAmC;AACpE,OAAOC,aAAa,MAAM,4BAA4B;~~AAUtD~~,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,cAAc;IACdC,MAAM;IACNC,OAAO;IACPC,KAAK;IACLC,IAAI;IACJC,OAAO;IACPC,KAAK;IACLC;EACF,CAAC,~~GAAGtB~~,YAAY,~~CAACI~~,KAAK,CAAC;EAEvB,MAAMmB,oBAAoB,~~GAAG/B~~,WAAW,~~CACtCgC~~,IAAA,IAAiB;IAAA,IAAhB;MAAEC;IAAQ,CAAC,GAAAD,IAAA;IACVF,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAGG,OAAO,GAAGjB,OAAO,GAAGC,QAAQ,CAAC;EAC9C,CAAC,EACD,CAACa,YAAY,EAAEd,OAAO,EAAEC,QAAQ,CAClC,CAAC;~~EAED~~,MAAMiB,~~KAAK~~,~~GAAGlC~~,WAAW,~~CAAC~~,~~MAAM~~;~~IAC9B~~,~~IAAI0B~~,~~KAAK~~,~~KAAKV~~,~~OAAO,EAAE~~;~~MACrBc~~,YAAY,aAAZA,YAAY,uBAAZA,YAAY,~~CAAGd~~,~~OAAO,CAAC;IACzB;EACF,CAAC,EAAE,CAACc,YAAY,EAAEJ,~~KAAK,~~EAAEV,OAAO,CAAC,CAAC;EAElC,MAAMmB,MAAM,GAAGnC,WAAW,CAAC,MAAM;IAC/B,IAAI0B,~~KAAK,~~KAAKT~~,~~QAAQ~~,~~EAAE;MACtBa~~,~~YAAY~~,~~aAAZA,YAAY,uBAAZA,YAAY,CAAGb,~~QAAQ,CAAC;~~IAC1B;EACF~~,CAAC,~~EAAE~~,CAACa,YAAY,~~EAAEJ~~,~~KAAK~~,~~EAAET~~,QAAQ,~~CAAC~~,CAAC;~~EAEnC~~,MAAMmB,EAAE,~~GAAG/B~~,UAAU,CAAC,wBAAwB,~~EAAEU~~,SAAS,CAAC;EAE1D,MAAMsB,2BAA2B,GAAAC,aAAA,CAAAA,aAAA;IAC/BC,KAAK,EAAEzB,EAAE;IACTC,SAAS,EAAEqB;EAAE,~~GACV3B~~,gBAAgB,~~CAACG~~,KAAK,CAAC;IAC1Be,IAAI;IACJC,OAAO;IACPC;EAAK,EACN;EAED,MAAMW,eAAe,GAAAF,aAAA,CAAAA,aAAA,KAChBD,2BAA2B;IAC9BnB,MAAM;IACNG,KAAK;IACLC,gBAAgB;IAChBC;EAAc,EACf;EAED,MAAMkB,IAAI,GAAGf,KAAK,KAAKV,OAAO;~~EAE9B~~,~~QAAQG~~,OAAO;IACb;IACA,KAAK,UAAU;MACb,~~OACErB~~,KAAA,CAAA4C,aAAA,~~CAACnC~~,UAAU,~~EAAK8B~~,2BAA2B,~~EACzCvC~~,KAAA,CAAA4C,aAAA,CAACzC,QAAQ,EAAA0C,QAAA;~~QACP7B~~,EAAE,EAAEA,EAAG;QACPC,SAAS,EAAEqB,EAAG;QACdf,KAAK,EAAEA,KAAM;QACbY,OAAO,EAAEQ,IAAK;QACdrB,QAAQ,EAAEA,QAAS;~~QACnBwB~~,MAAM,~~EAAEf~~,KAAK,GAAG,OAAO,~~GAAGgB~~,SAAU;QACpCC,SAAS,~~EAAEf~~;MAAqB,~~GAC5BtB~~,gBAAgB,~~CAACG~~,KAAK,CAAC,CAC5B,CACS,CAAC;IAEjB,KAAK,QAAQ;MACX,~~OACEd~~,KAAA,CAAA4C,aAAA,~~CAACnC~~,UAAU,~~EAAKiC~~,eAAe,~~EAC7B1C~~,KAAA,CAAA4C,aAAA,CAACxC,YAAY;~~QACXY~~,EAAE,EAAEA,EAAG;~~QACPiC~~,IAAI,~~EACFN~~,IAAI,GACAjB,MAAM,KAAIX,aAAa,aAAbA,aAAa,uBAAbA,aAAa,~~CAAEmC~~,WAAW,CAACC,KAAK,CAACC,UAAU,~~IACrDzB~~,OAAO,KAAIZ,aAAa,aAAbA,aAAa,uBAAbA,aAAa,~~CAAEmC~~,WAAW,CAACC,KAAK,CAACE,SAAS,CAC1D;~~QACDlB~~,OAAO,EAAEQ,IAAK;QACdrB,QAAQ,EAAEA,QAAS;~~QACnBwB~~,MAAM,~~EAAEf~~,KAAK,GAAG,OAAO,~~GAAGgB~~,SAAU;~~QACpCnB~~,KAAK,EAAEA,KAAK,GAAG,MAAM,GAAG,OAAQ;~~QAChCoB~~,SAAS,~~EAAEf~~;MAAqB,CACjC,CACS,CAAC;IAEjB,KAAK,SAAS;MACZ,~~OACEjC~~,KAAA,CAAA4C,aAAA,~~CAACnC~~,UAAU,~~EAAKiC~~,eAAe,~~EAC7B1C~~,KAAA,CAAA4C,aAAA,~~CAACpC~~,SAAS,~~QACRR~~,KAAA,CAAA4C,aAAA,~~CAACvC~~,~~MAAM;QACLW~~,~~EAAE~~,~~EAAEA,EAAG~~;~~QACPiC~~,~~IAAI~~,~~EAAEvB~~,~~MAAM~~,~~KAAIX~~,~~aAAa~~,~~aAAbA~~,~~aAAa~~,~~uBAAbA~~,~~aAAa~~,~~CAAEmC~~,~~WAAW,CAACC,~~KAAK,~~CAACC~~,~~UAAU,CAAC~~;~~QAC5DE~~,QAAQ,~~EAAElB~~,~~KAAM~~;~~QAChBf~~,~~OAAO,EAAEsB,IAAI,GAAGI,SAAS,GAAG,WAAY;QACxCD,~~MAAM,~~EAAEf~~,KAAK,GAAG,OAAO,~~GAAGgB~~,~~SAAU~~;~~QACpCzB,QAAQ,EAAEA~~;~~MAAS~~,~~CACpB~~,~~CAAC,EACFtB,~~KAAA,CAAA4C,aAAA,~~CAACvC~~,~~MAAM~~;~~QACLW~~,~~EAAE,EAAEA,EAAG;QACPiC,~~IAAI,~~EAAEtB~~,~~OAAO~~,~~KAAIZ~~,aAAa,aAAbA,aAAa,uBAAbA,aAAa,~~CAAEmC~~,WAAW,CAACC,KAAK,~~CAACE~~,~~SAAS~~,~~CAAC~~;~~QAC5DC~~,~~QAAQ~~,~~EAAEjB,MAAO~~;~~QACjBhB~~,~~OAAO~~,~~EAAEsB~~,~~IAAI~~,~~GAAG~~,~~WAAW~~,~~GAAGI~~,~~SAAU;QACxCzB~~,~~QAAQ,EAAEA,QAAS~~;~~QACnBwB~~,~~MAAM~~,~~EAAEf~~,~~KAAK,GAAG,~~OAAO,~~GAAGgB;MAAU~~,~~CACrC~~,~~CACQ~~,~~CAAC~~,~~EAAAQ~~,~~MAAA~~,~~KAAAA~~,~~MAAA~~,~~GACZvD~~,~~KAAA~~,~~CAAA4C~~,~~aAAA~~,~~CAACtC~~,KAAK~~;QAACkD~~,~~MAAM,~~EAAC;~~MAAS~~,~~CAAE~~,~~CAAC~~,~~CAChB~~,CAAC;IAEjB,KAAK,iBAAiB;MACpB,~~OACExD~~,KAAA,CAAA4C,aAAA,~~CAACnC~~,UAAU,~~EAAKiC~~,eAAe,~~EAC7B1C~~,KAAA,CAAA4C,aAAA,CAACxC,YAAY;~~QACXY~~,EAAE,EAAEA,EAAG;QACPK,OAAO,EAAC,UAAU;~~QAClB4B~~,IAAI,~~EACFN~~,IAAI,GACAjB,MAAM,KAAIX,aAAa,aAAbA,aAAa,uBAAbA,aAAa,~~CAAEmC~~,WAAW,CAACC,KAAK,CAACC,UAAU,~~IACrDzB~~,OAAO,KAAIZ,aAAa,aAAbA,aAAa,uBAAbA,aAAa,~~CAAEmC~~,WAAW,CAACC,KAAK,CAACE,SAAS,CAC1D;~~QACDlB~~,OAAO,EAAEQ,IAAK;QACdrB,QAAQ,EAAEA,QAAS;~~QACnBwB~~,MAAM,~~EAAEf~~,KAAK,GAAG,OAAO,~~GAAGgB~~,SAAU;~~QACpCnB~~,KAAK,EAAEA,KAAK,GAAG,MAAM,GAAG,OAAQ;~~QAChCoB~~,SAAS,~~EAAEf~~;MAAqB,CACjC,CACS,CAAC;EAEnB;AACF;AAEApB,MAAM,~~CAAC4C~~,qBAAqB,GAAG,IAAI;AACnC,~~eAAe5C~~,MAAM"}
1	+ {"version":3,"file":"Toggle.js","names":["React","useContext","useCallback","Checkbox","ToggleButton","classnames","ButtonRow","FieldBlock","useDataValue","pickSpacingProps","SharedContext","ToggleButtonGroupContext","Toggle","props","sharedContext","id","className","valueOn","valueOff","layout","variant","disabled","label","labelDescription","labelSecondary","textOn","textOff","value","info","warning","error","handleChange","handleCheckboxChange","_ref","checked","handleToggleChange","_ref2","cn","fieldBlockPropsWithoutLabel","_objectSpread","forId","fieldBlockProps","isOn","isOff","createElement","_extends","status","undefined","on_change","text","translation","Forms","booleanYes","booleanNo","asFieldset","bottom","Provider","onChange","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Toggle/Toggle.tsx"],"sourcesContent":["import React, { useContext, useCallback } from 'react'\nimport { Checkbox, ToggleButton } from '../../../../components'\nimport classnames from 'classnames'\nimport ButtonRow from '../../Form/ButtonRow'\nimport FieldBlock from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport { FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport SharedContext from '../../../../shared/Context'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\n\nexport type Props = FieldProps<unknown> & {\n valueOn: unknown\n valueOff: unknown\n variant?: 'checkbox' \| 'checkbox-button' \| 'button' \| 'buttons'\n textOn?: string\n textOff?: string\n}\n\nfunction Toggle(props: Props) {\n const sharedContext = useContext(SharedContext)\n const {\n id,\n className,\n valueOn,\n valueOff,\n layout,\n variant,\n disabled,\n label,\n labelDescription,\n labelSecondary,\n textOn,\n textOff,\n value,\n info,\n warning,\n error,\n handleChange,\n } = useDataValue(props)\n\n const handleCheckboxChange = useCallback(\n ({ checked }) => {\n handleChange?.(checked ? valueOn : valueOff)\n },\n [handleChange, valueOn, valueOff]\n )\n const handleToggleChange = useCallback(\n ({ value }) => {\n handleChange?.(value === 'on' ? valueOn : valueOff)\n },\n [handleChange, valueOn, valueOff]\n )\n\n const cn = classnames('dnb-forms-field-toggle', className)\n\n const fieldBlockPropsWithoutLabel = {\n forId: id,\n className: cn,\n ...pickSpacingProps(props),\n info,\n warning,\n error,\n }\n\n const fieldBlockProps = {\n ...fieldBlockPropsWithoutLabel,\n layout,\n label,\n labelDescription,\n labelSecondary,\n }\n\n const isOn = value === valueOn\n const isOff = value === valueOff\n\n switch (variant) {\n default:\n case 'checkbox':\n return (\n <FieldBlock {...fieldBlockPropsWithoutLabel}>\n <Checkbox\n id={id}\n className={cn}\n label={label}\n checked={isOn}\n disabled={disabled}\n status={error ? 'error' : undefined}\n on_change={handleCheckboxChange}\n {...pickSpacingProps(props)}\n />\n </FieldBlock>\n )\n case 'button':\n return (\n <FieldBlock {...fieldBlockProps}>\n <ToggleButton\n id={id}\n text={\n isOn\n ? textOn ?? sharedContext?.translation.Forms.booleanYes\n : textOff ?? sharedContext?.translation.Forms.booleanNo\n }\n checked={isOn}\n disabled={disabled}\n status={error ? 'error' : undefined}\n value={value ? 'true' : 'false'}\n on_change={handleCheckboxChange}\n />\n </FieldBlock>\n )\n case 'buttons':\n return (\n <FieldBlock {...fieldBlockProps} asFieldset>\n <ButtonRow bottom=\"x-small\">\n <ToggleButtonGroupContext.Provider\n value={{\n value: isOn ? 'on' : isOff ? 'off' : undefined,\n onChange: handleToggleChange,\n status: error ? 'error' : undefined,\n disabled,\n }}\n >\n <ToggleButton\n text={\n textOn ?? sharedContext?.translation.Forms.booleanYes\n }\n value=\"on\"\n />\n <ToggleButton\n text={\n textOff ?? sharedContext?.translation.Forms.booleanNo\n }\n value=\"off\"\n />\n </ToggleButtonGroupContext.Provider>\n </ButtonRow>\n </FieldBlock>\n )\n case 'checkbox-button':\n return (\n <FieldBlock {...fieldBlockProps}>\n <ToggleButton\n id={id}\n variant=\"checkbox\"\n text={\n isOn\n ? textOn ?? sharedContext?.translation.Forms.booleanYes\n : textOff ?? sharedContext?.translation.Forms.booleanNo\n }\n checked={isOn}\n disabled={disabled}\n status={error ? 'error' : undefined}\n value={value ? 'true' : 'false'}\n on_change={handleCheckboxChange}\n />\n </FieldBlock>\n )\n }\n}\n\nToggle._supportsSpacingProps = true\nexport default Toggle\n"],"mappings":"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"}

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

@@ -4,6 +4,8 @@ export type Props = Pick<FieldProps, keyof ComponentProps | 'layout' | 'label' |
     forId?: string;
     contentClassName?: string;
     children: React.ReactNode;
+    /** Use true if you have more than one form element */
+    asFieldset?: boolean;
     /** Width of outer block element */
     width?: false | 'small' | 'medium' | 'large';
     /** Width of contents block, while label etc can be wider if space is available */

package/extensions/forms/FieldBlock/FieldBlock.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["className", "forId", "layout", "label", "labelDescription", "labelSecondary", "info", "warning", "error", "width", "contentsWidth", "size", "contentClassName", "children"];
+const _excluded = ["className", "forId", "layout", "label", "labelDescription", "labelSecondary", "asFieldset", "info", "warning", "error", "width", "contentsWidth", "size", "contentClassName", "children"];
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -21,6 +21,7 @@ function FieldBlock(props) {
       label,
       labelDescription,
       labelSecondary,
+      asFieldset,
       info,
       warning,
       error: errorProp,
@@ -86,7 +87,7 @@ function FieldBlock(props) {
   }, [errorProp, fieldErrorRecord, showFieldErrorRecord]);
   const mainClasses = classnames('dnb-forms-field-block', className, width !== undefined && `dnb-forms-field-block--width-${width}`);
   const gridClasses = `dnb-forms-field-block__grid dnb-forms-field-block--layout-${layout}`;
-  const enableFieldset = useMemo(() => !nestedFieldBlockContext && findElementInChildren(children, child => child.props.label), []);
+  const enableFieldset = useMemo(() => label && (asFieldset || !nestedFieldBlockContext && findElementInChildren(children, child => child.props.label)), []);
   const state = error || warning || info;
   const stateStatus = error ? 'error' : warning ? 'warn' : info ? 'info' : null;
   const Label = _ref3 => {
@@ -95,7 +96,7 @@ function FieldBlock(props) {
     } = _ref3;
     return React.createElement(FormLabel, {
       element: enableFieldset ? 'legend' : 'label',
-      for_id: forId,
+      for_id: enableFieldset ? undefined : forId,
       space: {
         top: 0,
         bottom: 'x-small'

package/extensions/forms/FieldBlock/FieldBlock.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldBlock.js","names":["React","useMemo","useContext","useState","useCallback","classnames","Space","FormLabel","FormStatus","FormError","FieldBlockContext","findElementInChildren","FieldBlock","props","nestedFieldBlockContext","className","forId","layout","label","labelDescription","labelSecondary","info","warning","error","errorProp","width","contentsWidth","size","contentClassName","children","rest","_objectWithoutProperties","_excluded","fieldErrorRecord","setFieldErrorRecord","showFieldErrorRecord","setShowFieldErrorRecord","setError","id","existing","_objectSpread","removed","newRecord","map","_toPropertyKey","setShowError","show","errors","Object","entries","filter","_ref","_ref2","length","Error","message","join","undefined","mainClasses","gridClasses","enableFieldset","child","state","stateStatus","Label","_ref3","createElement","element","for_id","space","top","bottom","Provider","value","_extends","Fragment","text","toString","_supportsSpacingProps"],"sources":["../../../../../src/extensions/forms/FieldBlock/FieldBlock.tsx"],"sourcesContent":["import React, { useMemo, useContext, useState, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { Space, FormLabel, FormStatus } from '../../../components'\nimport { FormError, ComponentProps, FieldProps } from '../types'\nimport FieldBlockContext from './FieldBlockContext'\nimport { findElementInChildren } from '../../../shared/component-helper'\n\nexport type Props = Pick<\n FieldProps,\n \| keyof ComponentProps\n \| 'layout'\n \| 'label'\n \| 'labelDescription'\n \| 'labelSecondary'\n \| 'info'\n \| 'warning'\n \| 'error'\n> & {\n forId?: string\n contentClassName?: string\n children: React.ReactNode\n /** Width of outer block element /\n width?: false \| 'small' \| 'medium' \| 'large'\n /* Width of contents block, while label etc can be wider if space is available /\n contentsWidth?: 'small' \| 'medium' \| 'large' \| 'stretch'\n /* Typography size */\n size?: 'medium' \| 'large'\n} & React.HTMLAttributes<HTMLDivElement>\n\nfunction FieldBlock(props: Props) {\n const nestedFieldBlockContext = useContext(FieldBlockContext)\n\n const {\n className,\n forId,\n layout = 'vertical',\n label,\n labelDescription,\n labelSecondary,\n info,\n warning,\n error: errorProp,\n width,\n contentsWidth,\n size,\n contentClassName,\n children,\n ...rest\n } = props\n\n const [fieldErrorRecord, setFieldErrorRecord] = useState<\n Record<string, FormError>\n >({})\n const [showFieldErrorRecord, setShowFieldErrorRecord] = useState<\n Record<string, boolean>\n >({})\n\n const setError = useCallback(\n (id, error) => {\n if (nestedFieldBlockContext) {\n // If this FieldBlock is inside another one, forward the call to the outer one\n nestedFieldBlockContext.setError(id, error)\n return\n }\n\n setFieldErrorRecord((existing) => {\n if (error) {\n return {\n ...existing,\n [id]: error,\n }\n } else {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { [id]: removed, ...newRecord } = existing\n return newRecord\n }\n })\n },\n [nestedFieldBlockContext]\n )\n\n const setShowError = useCallback(\n (id, show) => {\n if (nestedFieldBlockContext) {\n // If this FieldBlock is inside another one, forward the call to the outer one\n nestedFieldBlockContext.setShowError(id, show)\n return\n }\n\n setShowFieldErrorRecord((existing) => {\n if (show) {\n return {\n ...existing,\n [id]: true,\n }\n } else {\n const { [id]: removed, ...newRecord } = existing\n return newRecord\n }\n })\n },\n [nestedFieldBlockContext]\n )\n\n const error = useMemo(() => {\n if (errorProp) {\n return errorProp\n }\n const errors = Object.entries(fieldErrorRecord)\n .filter(([id]) => showFieldErrorRecord[id] === true)\n .map(([, error]) => error)\n return errors.length > 0\n ? new Error(errors.map((error) => error.message).join(' \| '))\n : undefined\n }, [errorProp, fieldErrorRecord, showFieldErrorRecord])\n\n const mainClasses = classnames(\n 'dnb-forms-field-block',\n width !== undefined && `dnb-forms-field-block--width-${width}`,\n className\n )\n const gridClasses = classnames(\n 'dnb-forms-field-block__grid',\n `dnb-forms-field-block--layout-${layout}`\n )\n\n // A child component with a label was found, use fieldset/legend instead of div/label\n const enableFieldset = useMemo(\n () =>\n !nestedFieldBlockContext &&\n findElementInChildren(\n children,\n (child: React.ReactElement) => child.props.label\n ),\n []\n )\n\n const state = error \|\| warning \|\| info\n const stateStatus = error\n ? 'error'\n : warning\n ? 'warn'\n : info\n ? 'info'\n : null\n\n const Label = ({ children }) => {\n return (\n <FormLabel\n element={enableFieldset ? 'legend' : 'label'}\n for_id={forId}\n space={{ top: 0, bottom: 'x-small' }}\n size={size}\n >\n {children}\n </FormLabel>\n )\n }\n\n return (\n <FieldBlockContext.Provider\n value={{\n setError,\n setShowError,\n }}\n >\n <Space\n element={enableFieldset ? 'fieldset' : 'div'} // use fieldset and legend to enhance a11y\n className={mainClasses}\n {...rest}\n >\n <div className={gridClasses}>\n {labelDescription \|\| labelSecondary ? (\n <div className=\"dnb-forms-field-block__label\">\n {label \|\| labelDescription ? (\n <Label>\n {label}\n {labelDescription && (\n <span className=\"dnb-forms-field-block__label-description\">\n {labelDescription}\n </span>\n )}\n </Label>\n ) : (\n <> </>\n )}\n {labelSecondary && (\n <span className=\"dnb-forms-field-block__label-secondary\">\n {labelSecondary}\n </span>\n )}\n </div>\n ) : (\n label && <Label>{label}</Label>\n )}\n\n <div\n className={classnames(\n 'dnb-forms-field-block__contents',\n contentsWidth !== undefined &&\n `dnb-forms-field-block__contents--width-${contentsWidth}`,\n contentClassName\n )}\n >\n {children}\n </div>\n\n {stateStatus && (\n <div className=\"dnb-forms-field-block__status\">\n <FormStatus\n state={stateStatus}\n id={forId ? `${forId}-form-status` : undefined}\n text={\n error?.message \|\|\n (state instanceof Error && state.message) \|\|\n (state instanceof FormError && state.message) \|\|\n state?.toString()\n }\n label={label as string}\n space={{ top: 'x-small' }}\n />\n </div>\n )}\n </div>\n </Space>\n </FieldBlockContext.Provider>\n )\n}\n\nFieldBlock._supportsSpacingProps = true\nexport default FieldBlock\n"],"mappings":"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"}
1	+ {"version":3,"file":"FieldBlock.js","names":["React","useMemo","useContext","useState","useCallback","classnames","Space","FormLabel","FormStatus","FormError","FieldBlockContext","findElementInChildren","FieldBlock","props","nestedFieldBlockContext","className","forId","layout","label","labelDescription","labelSecondary","asFieldset","info","warning","error","errorProp","width","contentsWidth","size","contentClassName","children","rest","_objectWithoutProperties","_excluded","fieldErrorRecord","setFieldErrorRecord","showFieldErrorRecord","setShowFieldErrorRecord","setError","id","existing","_objectSpread","removed","newRecord","map","_toPropertyKey","setShowError","show","errors","Object","entries","filter","_ref","_ref2","length","Error","message","join","undefined","mainClasses","gridClasses","enableFieldset","child","state","stateStatus","Label","_ref3","createElement","element","for_id","space","top","bottom","Provider","value","_extends","Fragment","text","toString","_supportsSpacingProps"],"sources":["../../../../../src/extensions/forms/FieldBlock/FieldBlock.tsx"],"sourcesContent":["import React, { useMemo, useContext, useState, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { Space, FormLabel, FormStatus } from '../../../components'\nimport { FormError, ComponentProps, FieldProps } from '../types'\nimport FieldBlockContext from './FieldBlockContext'\nimport { findElementInChildren } from '../../../shared/component-helper'\n\nexport type Props = Pick<\n FieldProps,\n \| keyof ComponentProps\n \| 'layout'\n \| 'label'\n \| 'labelDescription'\n \| 'labelSecondary'\n \| 'info'\n \| 'warning'\n \| 'error'\n> & {\n forId?: string\n contentClassName?: string\n children: React.ReactNode\n /** Use true if you have more than one form element /\n asFieldset?: boolean\n /* Width of outer block element /\n width?: false \| 'small' \| 'medium' \| 'large'\n /* Width of contents block, while label etc can be wider if space is available /\n contentsWidth?: 'small' \| 'medium' \| 'large' \| 'stretch'\n /* Typography size */\n size?: 'medium' \| 'large'\n} & React.HTMLAttributes<HTMLDivElement>\n\nfunction FieldBlock(props: Props) {\n const nestedFieldBlockContext = useContext(FieldBlockContext)\n\n const {\n className,\n forId,\n layout = 'vertical',\n label,\n labelDescription,\n labelSecondary,\n asFieldset,\n info,\n warning,\n error: errorProp,\n width,\n contentsWidth,\n size,\n contentClassName,\n children,\n ...rest\n } = props\n\n const [fieldErrorRecord, setFieldErrorRecord] = useState<\n Record<string, FormError>\n >({})\n const [showFieldErrorRecord, setShowFieldErrorRecord] = useState<\n Record<string, boolean>\n >({})\n\n const setError = useCallback(\n (id, error) => {\n if (nestedFieldBlockContext) {\n // If this FieldBlock is inside another one, forward the call to the outer one\n nestedFieldBlockContext.setError(id, error)\n return\n }\n\n setFieldErrorRecord((existing) => {\n if (error) {\n return {\n ...existing,\n [id]: error,\n }\n } else {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { [id]: removed, ...newRecord } = existing\n return newRecord\n }\n })\n },\n [nestedFieldBlockContext]\n )\n\n const setShowError = useCallback(\n (id, show) => {\n if (nestedFieldBlockContext) {\n // If this FieldBlock is inside another one, forward the call to the outer one\n nestedFieldBlockContext.setShowError(id, show)\n return\n }\n\n setShowFieldErrorRecord((existing) => {\n if (show) {\n return {\n ...existing,\n [id]: true,\n }\n } else {\n const { [id]: removed, ...newRecord } = existing\n return newRecord\n }\n })\n },\n [nestedFieldBlockContext]\n )\n\n const error = useMemo(() => {\n if (errorProp) {\n return errorProp\n }\n const errors = Object.entries(fieldErrorRecord)\n .filter(([id]) => showFieldErrorRecord[id] === true)\n .map(([, error]) => error)\n return errors.length > 0\n ? new Error(errors.map((error) => error.message).join(' \| '))\n : undefined\n }, [errorProp, fieldErrorRecord, showFieldErrorRecord])\n\n const mainClasses = classnames(\n 'dnb-forms-field-block',\n width !== undefined && `dnb-forms-field-block--width-${width}`,\n className\n )\n const gridClasses = classnames(\n 'dnb-forms-field-block__grid',\n `dnb-forms-field-block--layout-${layout}`\n )\n\n // A child component with a label was found, use fieldset/legend instead of div/label\n const enableFieldset = useMemo(\n () =>\n label &&\n (asFieldset \|\|\n (!nestedFieldBlockContext &&\n findElementInChildren(\n children,\n (child: React.ReactElement) => child.props.label\n ))),\n []\n )\n\n const state = error \|\| warning \|\| info\n const stateStatus = error\n ? 'error'\n : warning\n ? 'warn'\n : info\n ? 'info'\n : null\n\n const Label = ({ children }) => {\n return (\n <FormLabel\n element={enableFieldset ? 'legend' : 'label'}\n for_id={enableFieldset ? undefined : forId}\n space={{ top: 0, bottom: 'x-small' }}\n size={size}\n >\n {children}\n </FormLabel>\n )\n }\n\n return (\n <FieldBlockContext.Provider\n value={{\n setError,\n setShowError,\n }}\n >\n <Space\n element={enableFieldset ? 'fieldset' : 'div'} // use fieldset and legend to enhance a11y\n className={mainClasses}\n {...rest}\n >\n <div className={gridClasses}>\n {labelDescription \|\| labelSecondary ? (\n <div className=\"dnb-forms-field-block__label\">\n {label \|\| labelDescription ? (\n <Label>\n {label}\n {labelDescription && (\n <span className=\"dnb-forms-field-block__label-description\">\n {labelDescription}\n </span>\n )}\n </Label>\n ) : (\n <> </>\n )}\n {labelSecondary && (\n <span className=\"dnb-forms-field-block__label-secondary\">\n {labelSecondary}\n </span>\n )}\n </div>\n ) : (\n label && <Label>{label}</Label>\n )}\n\n <div\n className={classnames(\n 'dnb-forms-field-block__contents',\n contentsWidth !== undefined &&\n `dnb-forms-field-block__contents--width-${contentsWidth}`,\n contentClassName\n )}\n >\n {children}\n </div>\n\n {stateStatus && (\n <div className=\"dnb-forms-field-block__status\">\n <FormStatus\n state={stateStatus}\n id={forId ? `${forId}-form-status` : undefined}\n text={\n error?.message \|\|\n (state instanceof Error && state.message) \|\|\n (state instanceof FormError && state.message) \|\|\n state?.toString()\n }\n label={label as string}\n space={{ top: 'x-small' }}\n />\n </div>\n )}\n </div>\n </Space>\n </FieldBlockContext.Provider>\n )\n}\n\nFieldBlock._supportsSpacingProps = true\nexport default FieldBlock\n"],"mappings":"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"}

package/extensions/forms/FieldBlock/style/dnb-field-block.css CHANGED Viewed

@@ -10,7 +10,6 @@
 fieldset.dnb-forms-field-block {
   padding: 0;
   border: none;
-  line-height: var(--font-size-basis--em);
 }
 fieldset.dnb-forms-field-block:not([class*=space__top]) {
   margin-top: 0;

package/extensions/forms/FieldBlock/style/dnb-field-block.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- :root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}fieldset.dnb-forms-field-block{border:none;~~line-height:var(--font-size-basis--em);~~padding:0}fieldset.dnb-forms-field-block:not([class=space__top]){margin-top:0}fieldset.dnb-forms-field-block:not([class=space__right]){margin-right:0}fieldset.dnb-forms-field-block:not([class=space__bottom]){margin-bottom:0}fieldset.dnb-forms-field-block:not([class=space__left]){margin-left:0}.dnb-forms-field-block__grid{display:grid}.dnb-forms-field-block--layout-vertical{grid-template-areas:"label" "contents" "status";grid-template-columns:auto}.dnb-forms-field-block--layout-horizontal{grid-template-areas:"label contents" "status status";grid-template-columns:var(--forms-field-width--medium) auto}@media screen and (min-width:30em){.dnb-forms-field-block--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__label{align-items:center;display:flex;flex-flow:row;grid-area:label;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__label-description,.dnb-forms-field-block__label-secondary{color:var(--color-black-55);font-size:var(--font-size-small)}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__contents{grid-area:contents}.dnb-forms-field-block__contents--width-stretch{width:100%}@media screen and (min-width:30em){.dnb-forms-field-block__contents--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block__contents--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block__contents--width-large{width:var(--forms-field-width--large)}}
1	+ :root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}fieldset.dnb-forms-field-block{border:none;padding:0}fieldset.dnb-forms-field-block:not([class=space__top]){margin-top:0}fieldset.dnb-forms-field-block:not([class=space__right]){margin-right:0}fieldset.dnb-forms-field-block:not([class=space__bottom]){margin-bottom:0}fieldset.dnb-forms-field-block:not([class=space__left]){margin-left:0}.dnb-forms-field-block__grid{display:grid}.dnb-forms-field-block--layout-vertical{grid-template-areas:"label" "contents" "status";grid-template-columns:auto}.dnb-forms-field-block--layout-horizontal{grid-template-areas:"label contents" "status status";grid-template-columns:var(--forms-field-width--medium) auto}@media screen and (min-width:30em){.dnb-forms-field-block--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__label{align-items:center;display:flex;flex-flow:row;grid-area:label;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__label-description,.dnb-forms-field-block__label-secondary{color:var(--color-black-55);font-size:var(--font-size-small)}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__contents{grid-area:contents}.dnb-forms-field-block__contents--width-stretch{width:100%}@media screen and (min-width:30em){.dnb-forms-field-block__contents--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block__contents--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block__contents--width-large{width:var(--forms-field-width--large)}}

package/extensions/forms/Form/Handler/Handler.d.ts CHANGED Viewed

@@ -1,5 +1,10 @@
 import { JsonObject } from 'json-pointer';
 import { Props as ProviderProps } from '../../DataContext/Provider';
 import type { ElementAllProps } from '../../../../elements/Element';
-export type Props = Omit<ElementAllProps, 'data' | 'as'>;
-export default function FormHandler<Data extends JsonObject>({ children, defaultData, data, schema, onChange, onPathChange, onSubmit, onSubmitRequest, scrollTopOnSubmit, sessionStorageId, ...rest }: ProviderProps<Data> & Props): import("react/jsx-runtime").JSX.Element;
+export type Props = Omit<ElementAllProps, 'data' | 'as' | 'autoComplete'> & {
+    /**
+     * Will enable autoComplete for all nested Field.String fields
+     */
+    autoComplete?: boolean;
+};
+export default function FormHandler<Data extends JsonObject>({ children, defaultData, data, schema, onChange, onPathChange, onSubmit, onSubmitRequest, scrollTopOnSubmit, sessionStorageId, autoComplete, ...rest }: ProviderProps<Data> & Omit<Props, keyof ProviderProps<Data>>): import("react/jsx-runtime").JSX.Element;

package/extensions/forms/Form/Handler/Handler.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["children", "defaultData", "data", "schema", "onChange", "onPathChange", "onSubmit", "onSubmitRequest", "scrollTopOnSubmit", "sessionStorageId"];
+const _excluded = ["children", "defaultData", "data", "schema", "onChange", "onPathChange", "onSubmit", "onSubmitRequest", "scrollTopOnSubmit", "sessionStorageId", "autoComplete"];
 import React from 'react';
 import Provider from '../../DataContext/Provider';
 import FormElement from '../Element';
@@ -14,7 +14,8 @@ export default function FormHandler(_ref) {
       onSubmit,
       onSubmitRequest,
       scrollTopOnSubmit,
-      sessionStorageId
+      sessionStorageId,
+      autoComplete
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   const providerProps = {
@@ -30,7 +31,8 @@ export default function FormHandler(_ref) {
     },
     onSubmitRequest,
     scrollTopOnSubmit,
-    sessionStorageId
+    sessionStorageId,
+    autoComplete
   };
   return React.createElement(Provider, providerProps, React.createElement(FormElement, rest, children));
 }

package/extensions/forms/Form/Handler/Handler.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Handler.js","names":["React","Provider","FormElement","FormHandler","_ref","children","defaultData","data","schema","onChange","onPathChange","onSubmit","onSubmitRequest","scrollTopOnSubmit","sessionStorageId","rest","_objectWithoutProperties","_excluded","providerProps","createElement"],"sources":["../../../../../../src/extensions/forms/Form/Handler/Handler.tsx"],"sourcesContent":["import React from 'react'\nimport { JsonObject } from 'json-pointer'\nimport Provider, {\n Props as ProviderProps,\n} from '../../DataContext/Provider'\nimport FormElement from '../Element'\nimport type { ElementAllProps } from '../../../../elements/Element'\n\nexport type Props = Omit<ElementAllProps, 'data' \| 'as'>\n\nexport default function FormHandler<Data extends JsonObject>({\n children,\n defaultData,\n data,\n schema,\n onChange,\n onPathChange,\n onSubmit,\n onSubmitRequest,\n scrollTopOnSubmit,\n sessionStorageId,\n ...rest\n}: ProviderProps<Data> & Props) {\n const providerProps = {\n defaultData,\n data,\n schema,\n onChange,\n onPathChange,\n onSubmit: (data: Data) => {\n if (typeof onSubmit === 'function') {\n onSubmit(data)\n }\n },\n onSubmitRequest,\n scrollTopOnSubmit,\n sessionStorageId,\n } as Omit<ProviderProps<Data>, 'children'>\n\n return (\n <Provider {...providerProps}>\n <FormElement {...rest}>{children}</FormElement>\n </Provider>\n )\n}\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,QAAQ,MAER,4BAA4B;AACnC,OAAOC,WAAW,MAAM,YAAY;~~AAKpC~~,eAAe,SAASC,WAAWA,CAAAC,IAAA,~~EAYH~~;EAAA,~~IAZ6B~~;MAC3DC,QAAQ;MACRC,WAAW;MACXC,IAAI;MACJC,MAAM;MACNC,QAAQ;MACRC,YAAY;MACZC,QAAQ;MACRC,eAAe;MACfC,iBAAiB;MACjBC;~~IAE2B~~,CAAC,~~GAAAV~~,IAAA;~~IADzBW~~,IAAI,GAAAC,wBAAA,~~CAAAZ~~,IAAA,~~EAAAa~~,SAAA;EAEP,MAAMC,aAAa,GAAG;~~IACpBZ~~,WAAW;IACXC,IAAI;IACJC,MAAM;IACNC,QAAQ;IACRC,YAAY;IACZC,QAAQ,EAAGJ,IAAU,IAAK;MACxB,IAAI,OAAOI,QAAQ,KAAK,UAAU,EAAE;QAClCA,QAAQ,CAACJ,IAAI,CAAC;MAChB;IACF,CAAC;IACDK,eAAe;IACfC,iBAAiB;IACjBC;EACF,CAA0C;EAE1C,~~OACEd~~,KAAA,~~CAAAmB~~,aAAA,~~CAAClB~~,QAAQ,~~EAAKiB~~,aAAa,~~EACzBlB~~,KAAA,~~CAAAmB~~,aAAA,~~CAACjB~~,WAAW,~~EAAKa~~,IAAI,~~EAAGV~~,QAAsB,CACtC,CAAC;AAEf"}
1	+ {"version":3,"file":"Handler.js","names":["React","Provider","FormElement","FormHandler","_ref","children","defaultData","data","schema","onChange","onPathChange","onSubmit","onSubmitRequest","scrollTopOnSubmit","sessionStorageId","autoComplete","rest","_objectWithoutProperties","_excluded","providerProps","createElement"],"sources":["../../../../../../src/extensions/forms/Form/Handler/Handler.tsx"],"sourcesContent":["import React from 'react'\nimport { JsonObject } from 'json-pointer'\nimport Provider, {\n Props as ProviderProps,\n} from '../../DataContext/Provider'\nimport FormElement from '../Element'\nimport type { ElementAllProps } from '../../../../elements/Element'\n\nexport type Props = Omit<\n ElementAllProps,\n 'data' \| 'as' \| 'autoComplete'\n> & {\n /*\n Will enable autoComplete for all nested Field.String fields\n */\n autoComplete?: boolean\n}\n\nexport default function FormHandler<Data extends JsonObject>({\n children,\n defaultData,\n data,\n schema,\n onChange,\n onPathChange,\n onSubmit,\n onSubmitRequest,\n scrollTopOnSubmit,\n sessionStorageId,\n autoComplete,\n ...rest\n}: ProviderProps<Data> & Omit<Props, keyof ProviderProps<Data>>) {\n const providerProps = {\n defaultData,\n data,\n schema,\n onChange,\n onPathChange,\n onSubmit: (data: Data) => {\n if (typeof onSubmit === 'function') {\n onSubmit(data)\n }\n },\n onSubmitRequest,\n scrollTopOnSubmit,\n sessionStorageId,\n autoComplete,\n } as Omit<ProviderProps<Data>, 'children'>\n\n return (\n <Provider {...providerProps}>\n <FormElement {...rest}>{children}</FormElement>\n </Provider>\n )\n}\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,QAAQ,MAER,4BAA4B;AACnC,OAAOC,WAAW,MAAM,YAAY;AAapC,eAAe,SAASC,WAAWA,CAAAC,IAAA,EAa8B;EAAA,IAbJ;MAC3DC,QAAQ;MACRC,WAAW;MACXC,IAAI;MACJC,MAAM;MACNC,QAAQ;MACRC,YAAY;MACZC,QAAQ;MACRC,eAAe;MACfC,iBAAiB;MACjBC,gBAAgB;MAChBC;IAE4D,CAAC,GAAAX,IAAA;IAD1DY,IAAI,GAAAC,wBAAA,CAAAb,IAAA,EAAAc,SAAA;EAEP,MAAMC,aAAa,GAAG;IACpBb,WAAW;IACXC,IAAI;IACJC,MAAM;IACNC,QAAQ;IACRC,YAAY;IACZC,QAAQ,EAAGJ,IAAU,IAAK;MACxB,IAAI,OAAOI,QAAQ,KAAK,UAAU,EAAE;QAClCA,QAAQ,CAACJ,IAAI,CAAC;MAChB;IACF,CAAC;IACDK,eAAe;IACfC,iBAAiB;IACjBC,gBAAgB;IAChBC;EACF,CAA0C;EAE1C,OACEf,KAAA,CAAAoB,aAAA,CAACnB,QAAQ,EAAKkB,aAAa,EACzBnB,KAAA,CAAAoB,aAAA,CAAClB,WAAW,EAAKc,IAAI,EAAGX,QAAsB,CACtC,CAAC;AAEf"}

package/extensions/forms/constants/countries.d.ts CHANGED Viewed

@@ -1,6 +1,15 @@
+/**
+ * Source: Wikipedia's official list of phone number country codes
+ *
+ * cdc: Country Dialing Code
+ */
 declare const _default: {
-    name: string;
-    code: string;
+    i18n: {
+        en: string;
+        nb: string;
+    };
+    cdc: string;
     iso: string;
+    continent: string;
 }[];
 export default _default;