@dnb/eufemia 10.55.0 → 10.56.0

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

@@ -35,11 +35,9 @@ function Toggle(props) {
     variant,
     disabled,
     label,
-    labelDescription,
     textOn,
     textOff,
     value,
-    help,
     hasError,
     htmlAttributes,
     handleChange,
@@ -63,9 +61,6 @@ function Toggle(props) {
     className: cn,
     disabled
   }, (0, _utils.pickSpacingProps)(props));
-  const suffix = help ? _react.default.createElement(_components.HelpButton, {
-    title: help.title
-  }, help.content) : undefined;
   const isOn = value === valueOn;
   const isOff = value === valueOff;
   (0, _react.useMemo)(() => {
@@ -86,7 +81,6 @@ function Toggle(props) {
         checked: isOn,
         disabled: disabled,
         status: hasError ? 'error' : undefined,
-        suffix: suffix,
         onChange: handleCheckboxChange
       }, htmlAttributes)));
     case 'button':
@@ -96,18 +90,12 @@ function Toggle(props) {
         checked: isOn,
         disabled: disabled,
         status: hasError ? 'error' : undefined,
-        suffix: suffix,
         value: value ? 'true' : 'false',
         on_change: handleCheckboxChange
       }, htmlAttributes)));
     case 'buttons':
       return _react.default.createElement(_FieldBlock.default, _extends({}, fieldBlockProps, {
-        asFieldset: true,
-        labelDescription: _react.default.createElement(_react.default.Fragment, null, labelDescription, help ? _react.default.createElement(_components.HelpButton, {
-          size: "small",
-          left: labelDescription ? 'x-small' : false,
-          title: help.title
-        }, help.content) : undefined)
+        asFieldset: true
       }), _react.default.createElement(_ButtonRow.default, {
         bottom: "x-small"
       }, _react.default.createElement(_ToggleButtonGroupContext.default.Provider, {
@@ -132,7 +120,6 @@ function Toggle(props) {
         checked: isOn,
         disabled: disabled,
         status: hasError ? 'error' : undefined,
-        suffix: suffix,
         value: value ? 'true' : 'false',
         on_change: handleCheckboxChange
       }, htmlAttributes)));

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_components","_ButtonRow","_FieldBlock","_hooks","_utils","_ToggleButtonGroupContext","_useTranslation","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","Toggle","props","translations","useTranslation","ToggleField","preparedProps","errorMessages","id","className","valueOn","valueOff","variant","disabled","label","labelDescription","textOn","textOff","help","hasError","htmlAttributes","handleChange","setDisplayValue","useFieldProps","handleCheckboxChange","useCallback","_ref","checked","handleToggleChange","_ref2","cn","classnames","fieldBlockProps","forId","pickSpacingProps","suffix","createElement","HelpButton","title","content","isOn","isOff","useMemo","text","path","Checkbox","yes","no","status","onChange","ToggleButton","on_change","asFieldset","Fragment","size","left","bottom","Provider","_supportsSpacingProps","_default","exports"],"sources":["../../../../../../src/extensions/forms/Field/Toggle/Toggle.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react'\nimport classnames from 'classnames'\nimport { Checkbox, HelpButton, ToggleButton } from '../../../../components'\nimport ButtonRow from '../../Form/ButtonRow'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { FieldHelpProps, FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\nimport useTranslation from '../../hooks/useTranslation'\n\nexport type ToggleProps = {\n  valueOn: unknown\n  valueOff: unknown\n  variant?: 'checkbox' | 'checkbox-button' | 'button' | 'buttons'\n  textOn?: string\n  textOff?: string\n}\n\nexport type Props = FieldHelpProps &\n  Omit<FieldProps<unknown>, 'layout' | 'layoutOptions'> &\n  ToggleProps\n\nfunction Toggle(props: Props) {\n  const translations = useTranslation().ToggleField\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages: props.errorMessages,\n  }\n\n  const {\n    id,\n    className,\n    valueOn,\n    valueOff,\n    variant,\n    disabled,\n    label,\n    labelDescription,\n    textOn,\n    textOff,\n    value,\n    help,\n    hasError,\n    htmlAttributes,\n    handleChange,\n    setDisplayValue,\n  } = useFieldProps(preparedProps)\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 fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    className: cn,\n    disabled,\n    ...pickSpacingProps(props),\n  }\n\n  const suffix = help ? (\n    <HelpButton title={help.title}>{help.content}</HelpButton>\n  ) : undefined\n\n  const isOn = value === valueOn\n  const isOff = value === valueOff\n\n  useMemo(() => {\n    const text = isOn ? textOn : textOff\n    if (text) {\n      setDisplayValue(props.path, text)\n    }\n  }, [isOn, props.path, setDisplayValue, textOff, textOn])\n\n  switch (variant) {\n    default:\n    case 'checkbox':\n      return (\n        <FieldBlock {...fieldBlockProps} label={undefined}>\n          <Checkbox\n            id={id}\n            className={cn}\n            label={\n              label ??\n              (isOn\n                ? textOn ?? translations.yes\n                : textOff ?? translations.no)\n            }\n            checked={isOn}\n            disabled={disabled}\n            status={hasError ? 'error' : undefined}\n            suffix={suffix}\n            onChange={handleCheckboxChange}\n            {...htmlAttributes}\n          />\n        </FieldBlock>\n      )\n    case 'button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ToggleButton\n            id={id}\n            text={\n              isOn\n                ? textOn ?? translations.yes\n                : textOff ?? translations.no\n            }\n            checked={isOn}\n            disabled={disabled}\n            status={hasError ? 'error' : undefined}\n            suffix={suffix}\n            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n            {...htmlAttributes}\n          />\n        </FieldBlock>\n      )\n    case 'buttons':\n      return (\n        <FieldBlock\n          {...fieldBlockProps}\n          asFieldset\n          labelDescription={\n            <>\n              {labelDescription}\n              {help ? (\n                <HelpButton\n                  size=\"small\"\n                  left={labelDescription ? 'x-small' : false}\n                  title={help.title}\n                >\n                  {help.content}\n                </HelpButton>\n              ) : undefined}\n            </>\n          }\n        >\n          <ButtonRow bottom=\"x-small\">\n            <ToggleButtonGroupContext.Provider\n              value={{\n                value: isOn ? 'on' : isOff ? 'off' : null, // use \"null\" to reset the value\n                onChange: handleToggleChange,\n                status: hasError ? 'error' : undefined,\n                disabled,\n              }}\n            >\n              <ToggleButton\n                text={textOn ?? translations.yes}\n                value=\"on\"\n                {...htmlAttributes}\n              />\n              <ToggleButton\n                text={textOff ?? translations.no}\n                value=\"off\"\n                {...htmlAttributes}\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 ?? translations.yes\n                : textOff ?? translations.no\n            }\n            checked={isOn}\n            disabled={disabled}\n            status={hasError ? 'error' : undefined}\n            suffix={suffix}\n            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n            {...htmlAttributes}\n          />\n        </FieldBlock>\n      )\n  }\n}\n\nToggle._supportsSpacingProps = true\nexport default Toggle\n"],"mappings":"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"}
+{"version":3,"file":"Toggle.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_components","_ButtonRow","_FieldBlock","_hooks","_utils","_ToggleButtonGroupContext","_useTranslation","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","Toggle","props","translations","useTranslation","ToggleField","preparedProps","errorMessages","id","className","valueOn","valueOff","variant","disabled","label","textOn","textOff","hasError","htmlAttributes","handleChange","setDisplayValue","useFieldProps","handleCheckboxChange","useCallback","_ref","checked","handleToggleChange","_ref2","cn","classnames","fieldBlockProps","forId","pickSpacingProps","isOn","isOff","useMemo","text","path","createElement","Checkbox","yes","no","status","onChange","ToggleButton","on_change","asFieldset","bottom","Provider","_supportsSpacingProps","_default","exports"],"sources":["../../../../../../src/extensions/forms/Field/Toggle/Toggle.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react'\nimport classnames from 'classnames'\nimport { Checkbox, ToggleButton } from '../../../../components'\nimport ButtonRow from '../../Form/ButtonRow'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\nimport useTranslation from '../../hooks/useTranslation'\n\nexport type ToggleProps = {\n  valueOn: unknown\n  valueOff: unknown\n  variant?: 'checkbox' | 'checkbox-button' | 'button' | 'buttons'\n  textOn?: string\n  textOff?: string\n}\n\nexport type Props = Omit<FieldProps<unknown>, 'layout' | 'layoutOptions'> &\n  ToggleProps\n\nfunction Toggle(props: Props) {\n  const translations = useTranslation().ToggleField\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages: props.errorMessages,\n  }\n\n  const {\n    id,\n    className,\n    valueOn,\n    valueOff,\n    variant,\n    disabled,\n    label,\n    textOn,\n    textOff,\n    value,\n    hasError,\n    htmlAttributes,\n    handleChange,\n    setDisplayValue,\n  } = useFieldProps(preparedProps)\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 fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    className: cn,\n    disabled,\n    ...pickSpacingProps(props),\n  }\n\n  const isOn = value === valueOn\n  const isOff = value === valueOff\n\n  useMemo(() => {\n    const text = isOn ? textOn : textOff\n    if (text) {\n      setDisplayValue(props.path, text)\n    }\n  }, [isOn, props.path, setDisplayValue, textOff, textOn])\n\n  switch (variant) {\n    default:\n    case 'checkbox':\n      return (\n        <FieldBlock {...fieldBlockProps} label={undefined}>\n          <Checkbox\n            id={id}\n            className={cn}\n            label={\n              label ??\n              (isOn\n                ? textOn ?? translations.yes\n                : textOff ?? translations.no)\n            }\n            checked={isOn}\n            disabled={disabled}\n            status={hasError ? 'error' : undefined}\n            onChange={handleCheckboxChange}\n            {...htmlAttributes}\n          />\n        </FieldBlock>\n      )\n    case 'button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ToggleButton\n            id={id}\n            text={\n              isOn\n                ? textOn ?? translations.yes\n                : textOff ?? translations.no\n            }\n            checked={isOn}\n            disabled={disabled}\n            status={hasError ? 'error' : undefined}\n            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n            {...htmlAttributes}\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' : null, // use \"null\" to reset the value\n                onChange: handleToggleChange,\n                status: hasError ? 'error' : undefined,\n                disabled,\n              }}\n            >\n              <ToggleButton\n                text={textOn ?? translations.yes}\n                value=\"on\"\n                {...htmlAttributes}\n              />\n              <ToggleButton\n                text={textOff ?? translations.no}\n                value=\"off\"\n                {...htmlAttributes}\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 ?? translations.yes\n                : textOff ?? translations.no\n            }\n            checked={isOn}\n            disabled={disabled}\n            status={hasError ? 'error' : undefined}\n            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n            {...htmlAttributes}\n          />\n        </FieldBlock>\n      )\n  }\n}\n\nToggle._supportsSpacingProps = true\nexport default Toggle\n"],"mappings":"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"}

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

@@ -29,11 +29,6 @@ const ToggleProperties = {
     doc: 'Choice of input feature. Can be: `checkbox`, `button`, `checkbox-button` or `buttons`.',
     type: 'string',
     status: 'optional'
-  },
-  help: {
-    doc: 'Provide a help button. Object consisting of `title` and `content`.',
-    type: 'object',
-    status: 'optional'
   }
 };
 exports.ToggleProperties = ToggleProperties;

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

@@ -1 +1 @@
-{"version":3,"file":"ToggleDocs.js","names":["ToggleProperties","valueOn","doc","type","status","valueOff","textOn","textOff","variant","help","exports"],"sources":["../../../../../../src/extensions/forms/Field/Toggle/ToggleDocs.tsx"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const ToggleProperties: PropertiesTableProps = {\n  valueOn: {\n    doc: 'Source data value when the toggle is in the \"on-state\" (varies based on UI variant).',\n    type: ['string', 'number', 'boolean'],\n    status: 'required',\n  },\n  valueOff: {\n    doc: 'Source data value when the toggle is in the \"off-state\".',\n    type: ['string', 'number', 'boolean'],\n    status: 'required',\n  },\n  textOn: {\n    doc: 'Text to show in the UI when in the \"on-state\".',\n    type: 'string',\n    status: 'optional',\n  },\n  textOff: {\n    doc: 'Text to show in the UI when in the \"off-state\".',\n    type: 'string',\n    status: 'optional',\n  },\n  variant: {\n    doc: 'Choice of input feature. Can be: `checkbox`, `button`, `checkbox-button` or `buttons`.',\n    type: 'string',\n    status: 'optional',\n  },\n  help: {\n    doc: 'Provide a help button. Object consisting of `title` and `content`.',\n    type: 'object',\n    status: 'optional',\n  },\n}\n"],"mappings":";;;;;;AAEO,MAAMA,gBAAsC,GAAG;EACpDC,OAAO,EAAE;IACPC,GAAG,EAAE,sFAAsF;IAC3FC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC;IACrCC,MAAM,EAAE;EACV,CAAC;EACDC,QAAQ,EAAE;IACRH,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC;IACrCC,MAAM,EAAE;EACV,CAAC;EACDE,MAAM,EAAE;IACNJ,GAAG,EAAE,gDAAgD;IACrDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,OAAO,EAAE;IACPL,GAAG,EAAE,iDAAiD;IACtDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,OAAO,EAAE;IACPN,GAAG,EAAE,wFAAwF;IAC7FC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,IAAI,EAAE;IACJP,GAAG,EAAE,oEAAoE;IACzEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV;AACF,CAAC;AAAAM,OAAA,CAAAV,gBAAA,GAAAA,gBAAA"}
+{"version":3,"file":"ToggleDocs.js","names":["ToggleProperties","valueOn","doc","type","status","valueOff","textOn","textOff","variant","exports"],"sources":["../../../../../../src/extensions/forms/Field/Toggle/ToggleDocs.tsx"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const ToggleProperties: PropertiesTableProps = {\n  valueOn: {\n    doc: 'Source data value when the toggle is in the \"on-state\" (varies based on UI variant).',\n    type: ['string', 'number', 'boolean'],\n    status: 'required',\n  },\n  valueOff: {\n    doc: 'Source data value when the toggle is in the \"off-state\".',\n    type: ['string', 'number', 'boolean'],\n    status: 'required',\n  },\n  textOn: {\n    doc: 'Text to show in the UI when in the \"on-state\".',\n    type: 'string',\n    status: 'optional',\n  },\n  textOff: {\n    doc: 'Text to show in the UI when in the \"off-state\".',\n    type: 'string',\n    status: 'optional',\n  },\n  variant: {\n    doc: 'Choice of input feature. Can be: `checkbox`, `button`, `checkbox-button` or `buttons`.',\n    type: 'string',\n    status: 'optional',\n  },\n}\n"],"mappings":";;;;;;AAEO,MAAMA,gBAAsC,GAAG;EACpDC,OAAO,EAAE;IACPC,GAAG,EAAE,sFAAsF;IAC3FC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC;IACrCC,MAAM,EAAE;EACV,CAAC;EACDC,QAAQ,EAAE;IACRH,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC;IACrCC,MAAM,EAAE;EACV,CAAC;EACDE,MAAM,EAAE;IACNJ,GAAG,EAAE,gDAAgD;IACrDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,OAAO,EAAE;IACPL,GAAG,EAAE,iDAAiD;IACtDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,OAAO,EAAE;IACPN,GAAG,EAAE,wFAAwF;IAC7FC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV;AACF,CAAC;AAAAK,OAAA,CAAAT,gBAAA,GAAAA,gBAAA"}

package/cjs/extensions/forms/Field/Upload/Upload.d.ts

@@ -1,11 +1,13 @@
 import { FieldBlockWidth } from '../../FieldBlock';
-import { FieldHelpProps, FieldProps } from '../../types';
+import { FieldProps } from '../../types';
 import { UploadFile, UploadFileNative, UploadProps } from '../../../../components/Upload';
 import { SpacingProps } from '../../../../shared/types';
 export type UploadValue = Array<UploadFile | UploadFileNative>;
-export type Props = FieldHelpProps & Omit<FieldProps<UploadValue, UploadValue | undefined>, 'name'> & SpacingProps & {
+export type Props = Omit<FieldProps<UploadValue, UploadValue | undefined>, 'name'> & SpacingProps & {
     width?: Omit<FieldBlockWidth, 'medium' | 'small'>;
-} & Pick<Partial<UploadProps>, 'title' | 'text' | 'acceptedFileTypes' | 'filesAmountLimit' | 'fileMaxSize' | 'onFileDelete' | 'skeleton'>;
+} & Pick<Partial<UploadProps>, 'title' | 'text' | 'acceptedFileTypes' | 'filesAmountLimit' | 'fileMaxSize' | 'onFileDelete' | 'skeleton'> & {
+    asyncFileHandler?: (newFiles: UploadValue) => Promise<UploadValue>;
+};
 declare function UploadComponent(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace UploadComponent {
     var _supportsSpacingProps: boolean;

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

@@ -6,15 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _FieldBlock = _interopRequireDefault(require("../../FieldBlock"));
 var _hooks = require("../../hooks");
 var _Upload = _interopRequireDefault(require("../../../../components/Upload"));
 var _useUpload = _interopRequireDefault(require("../../../../components/upload/useUpload"));
 var _utils = require("../../../../components/flex/utils");
-var _components = require("../../../../components");
+var _HelpButtonInline = _interopRequireWildcard(require("../../../../components/help-button/HelpButtonInline"));
 var _shared = require("../../../../shared");
 var _utils2 = require("../../utils");
-const _excluded = ["id", "className", "width", "value", "label", "labelDescription", "help", "htmlAttributes", "handleChange", "handleFocus", "handleBlur"];
+const _excluded = ["id", "className", "width", "value", "label", "labelDescription", "help", "htmlAttributes", "handleChange", "handleFocus", "handleBlur", "asyncFileHandler"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -26,22 +27,28 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 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); }
+const validateRequired = (value, _ref) => {
+  let {
+    required,
+    isChanged,
+    error
+  } = _ref;
+  const hasError = value === null || value === void 0 ? void 0 : value.some(file => file.errorMessage);
+  if (hasError) {
+    return new _utils2.FormError('Upload.errorInvalidFiles');
+  }
+  const hasFiles = (value === null || value === void 0 ? void 0 : value.length) > 0;
+  if (required && (!isChanged && !hasFiles || !hasFiles)) {
+    return error;
+  }
+  return undefined;
+};
+const updateFileLoadingState = (files, isLoading) => {
+  return files.map(file => _objectSpread(_objectSpread({}, file), {}, {
+    isLoading
+  }));
+};
 function UploadComponent(props) {
-  const validateRequired = (0, _react.useCallback)((value, _ref) => {
-    let {
-      required,
-      isChanged,
-      error
-    } = _ref;
-    const hasError = value === null || value === void 0 ? void 0 : value.some(file => file.errorMessage);
-    if (hasError) {
-      return new _utils2.FormError('Upload.errorInvalidFiles');
-    }
-    if (required && (!isChanged || !(value.length > 0))) {
-      return error;
-    }
-    return undefined;
-  }, []);
   const sharedTr = (0, _shared.useTranslation)().Upload;
   const formsTr = (0, _hooks.useTranslation)().Upload;
   const errorMessages = (0, _react.useMemo)(() => ({
@@ -65,7 +72,8 @@ function UploadComponent(props) {
       htmlAttributes,
       handleChange,
       handleFocus,
-      handleBlur
+      handleBlur,
+      asyncFileHandler
     } = _useFieldProps,
     rest = _objectWithoutProperties(_useFieldProps, _excluded);
   const {
@@ -78,26 +86,43 @@ function UploadComponent(props) {
     onFileDelete
   } = rest;
   const {
+    files: fileContext,
     setFiles
   } = (0, _useUpload.default)(id);
   (0, _react.useEffect)(() => {
     setFiles(value);
-  }, [handleBlur, setFiles, value]);
+  }, [setFiles, value]);
+  const handleChangeAsync = (0, _react.useCallback)(async files => {
+    const existingFileIds = (fileContext === null || fileContext === void 0 ? void 0 : fileContext.map(file => file.id)) || [];
+    const newFiles = files.filter(file => !existingFileIds.includes(file.id));
+    if (newFiles.length > 0) {
+      setFiles([...fileContext, ...updateFileLoadingState(newFiles, true)]);
+      const uploadedFiles = updateFileLoadingState(await asyncFileHandler(newFiles), false);
+      handleChange([...fileContext, ...uploadedFiles]);
+    } else {
+      handleChange(files);
+    }
+  }, [fileContext, asyncFileHandler, setFiles, updateFileLoadingState]);
   const changeHandler = (0, _react.useCallback)(_ref2 => {
     let {
       files
     } = _ref2;
     handleBlur();
     handleFocus();
-    handleChange(files);
-  }, [handleBlur, handleChange, handleFocus]);
+    if (asyncFileHandler) {
+      handleChangeAsync(files);
+    } else {
+      handleChange(files);
+    }
+  }, [handleBlur, handleChange, handleFocus, asyncFileHandler, fileContext]);
   const width = widthProp;
   const fieldBlockProps = _objectSpread({
     id,
-    forId: id,
+    forId: `${id}-input`,
     labelSrOnly: true,
-    className,
-    width
+    className: (0, _classnames.default)('dnb-forms-field-upload', className),
+    width,
+    help: undefined
   }, (0, _utils.pickSpacingProps)(props));
   return _react.default.createElement(_FieldBlock.default, fieldBlockProps, _react.default.createElement(_Upload.default, _extends({
     id: id,
@@ -108,11 +133,15 @@ function UploadComponent(props) {
     onChange: changeHandler,
     onFileDelete: onFileDelete,
     title: label !== null && label !== void 0 ? label : title,
-    text: help ? _react.default.createElement(_react.default.Fragment, null, labelDescription !== null && labelDescription !== void 0 ? labelDescription : text, _react.default.createElement(_components.HelpButton, {
+    text: help ? _react.default.createElement(_react.default.Fragment, null, labelDescription !== null && labelDescription !== void 0 ? labelDescription : text, _react.default.createElement(_HelpButtonInline.default, {
+      contentId: `${id}-help`,
       left: text ? 'x-small' : false,
-      title: help.title
-    }, help.content)) : labelDescription !== null && labelDescription !== void 0 ? labelDescription : text
-  }, htmlAttributes)));
+      help: help
+    })) : labelDescription !== null && labelDescription !== void 0 ? labelDescription : text
+  }, htmlAttributes), help && _react.default.createElement(_HelpButtonInline.HelpButtonInlineContent, {
+    contentId: `${id}-help`,
+    help: help
+  })));
 }
 var _default = UploadComponent;
 exports.default = _default;

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

@@ -1 +1 @@
-{"version":3,"file":"Upload.js","names":["_react","_interopRequireWildcard","require","_FieldBlock","_interopRequireDefault","_hooks","_Upload","_useUpload","_utils","_components","_shared","_utils2","_excluded","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","ownKeys","object","enumerableOnly","symbols","filter","sym","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","UploadComponent","props","validateRequired","useCallback","_ref","required","isChanged","error","hasError","some","file","errorMessage","FormError","sharedTr","useSharedTranslation","Upload","formsTr","useFormsTranslation","errorMessages","useMemo","errorRequired","preparedProps","_useFieldProps","useFieldProps","executeOnChangeRegardlessOfError","id","className","width","widthProp","label","labelDescription","help","htmlAttributes","handleChange","handleFocus","handleBlur","rest","title","text","acceptedFileTypes","filesAmountLimit","fileMaxSize","skeleton","onFileDelete","setFiles","useUpload","useEffect","changeHandler","_ref2","files","fieldBlockProps","forId","labelSrOnly","pickSpacingProps","createElement","onChange","Fragment","HelpButton","left","content","_default","exports","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Upload/Upload.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from 'react'\nimport FieldBlock, {\n  Props as FieldBlockProps,\n  FieldBlockWidth,\n} from '../../FieldBlock'\nimport {\n  useFieldProps,\n  useTranslation as useFormsTranslation,\n} from '../../hooks'\nimport { FieldHelpProps, FieldProps } from '../../types'\nimport Upload, {\n  UploadFile,\n  UploadFileNative,\n  UploadProps,\n} from '../../../../components/Upload'\nimport useUpload from '../../../../components/upload/useUpload'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { HelpButton } from '../../../../components'\nimport { useTranslation as useSharedTranslation } from '../../../../shared'\nimport { SpacingProps } from '../../../../shared/types'\nimport { FormError } from '../../utils'\n\nexport type UploadValue = Array<UploadFile | UploadFileNative>\nexport type Props = FieldHelpProps &\n  Omit<FieldProps<UploadValue, UploadValue | undefined>, 'name'> &\n  SpacingProps & {\n    width?: Omit<FieldBlockWidth, 'medium' | 'small'>\n  } & Pick<\n    Partial<UploadProps>,\n    | 'title'\n    | 'text'\n    | 'acceptedFileTypes'\n    | 'filesAmountLimit'\n    | 'fileMaxSize'\n    | 'onFileDelete'\n    | 'skeleton'\n  >\n\nfunction UploadComponent(props: Props) {\n  const validateRequired = useCallback(\n    (value: UploadValue, { required, isChanged, error }) => {\n      const hasError = value?.some((file) => file.errorMessage)\n      if (hasError) {\n        return new FormError('Upload.errorInvalidFiles')\n      }\n\n      if (required && (!isChanged || !(value.length > 0))) {\n        return error\n      }\n\n      return undefined\n    },\n    []\n  )\n\n  const sharedTr = useSharedTranslation().Upload\n  const formsTr = useFormsTranslation().Upload\n\n  const errorMessages = useMemo(\n    () => ({\n      'Field.errorRequired': formsTr.errorRequired,\n    }),\n    [formsTr.errorRequired]\n  )\n\n  const preparedProps = {\n    errorMessages,\n    validateRequired,\n    ...props,\n  }\n\n  const {\n    id,\n    className,\n    width: widthProp = 'stretch',\n    value,\n    label,\n    labelDescription,\n    help,\n    htmlAttributes,\n    handleChange,\n    handleFocus,\n    handleBlur,\n    ...rest\n  } = useFieldProps(preparedProps, {\n    executeOnChangeRegardlessOfError: true,\n  })\n\n  // Upload props\n  const {\n    title = sharedTr.title,\n    text = sharedTr.text,\n    acceptedFileTypes = ['pdf', 'png', 'jpg', 'jpeg'],\n    filesAmountLimit = 100,\n    fileMaxSize = 5,\n    skeleton,\n    onFileDelete,\n  } = rest\n\n  const { setFiles } = useUpload(id)\n\n  useEffect(() => {\n    setFiles(value)\n  }, [handleBlur, setFiles, value])\n\n  const changeHandler = useCallback(\n    ({ files }: { files: UploadValue }) => {\n      // Prevents the form-status from showing up\n      handleBlur()\n      handleFocus()\n      handleChange(files)\n    },\n    [handleBlur, handleChange, handleFocus]\n  )\n\n  const width = widthProp as FieldBlockWidth\n  const fieldBlockProps: FieldBlockProps = {\n    id,\n    forId: id,\n    labelSrOnly: true,\n    className,\n    width,\n    ...pickSpacingProps(props),\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps}>\n      <Upload\n        id={id}\n        acceptedFileTypes={acceptedFileTypes}\n        filesAmountLimit={filesAmountLimit}\n        fileMaxSize={fileMaxSize}\n        skeleton={skeleton}\n        onChange={changeHandler}\n        onFileDelete={onFileDelete}\n        title={label ?? title}\n        text={\n          help ? (\n            <>\n              {labelDescription ?? text}\n              <HelpButton\n                left={text ? 'x-small' : false}\n                title={help.title}\n              >\n                {help.content}\n              </HelpButton>\n            </>\n          ) : (\n            labelDescription ?? text\n          )\n        }\n        {...htmlAttributes}\n      />\n    </FieldBlock>\n  )\n}\n\nexport default UploadComponent\n\nUploadComponent._supportsSpacingProps = true\n"],"mappings":"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"}
+{"version":3,"file":"Upload.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_FieldBlock","_hooks","_Upload","_useUpload","_utils","_HelpButtonInline","_shared","_utils2","_excluded","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","ownKeys","object","enumerableOnly","symbols","filter","sym","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","validateRequired","_ref","required","isChanged","error","hasError","some","file","errorMessage","FormError","hasFiles","updateFileLoadingState","files","isLoading","map","UploadComponent","props","sharedTr","useSharedTranslation","Upload","formsTr","useFormsTranslation","errorMessages","useMemo","errorRequired","preparedProps","_useFieldProps","useFieldProps","executeOnChangeRegardlessOfError","id","className","width","widthProp","label","labelDescription","help","htmlAttributes","handleChange","handleFocus","handleBlur","asyncFileHandler","rest","title","text","acceptedFileTypes","filesAmountLimit","fileMaxSize","skeleton","onFileDelete","fileContext","setFiles","useUpload","useEffect","handleChangeAsync","useCallback","existingFileIds","newFiles","includes","uploadedFiles","changeHandler","_ref2","fieldBlockProps","forId","labelSrOnly","classnames","pickSpacingProps","createElement","onChange","Fragment","contentId","left","HelpButtonInlineContent","_default","exports","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Upload/Upload.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from 'react'\nimport classnames from 'classnames'\nimport FieldBlock, {\n  Props as FieldBlockProps,\n  FieldBlockWidth,\n} from '../../FieldBlock'\nimport {\n  useFieldProps,\n  useTranslation as useFormsTranslation,\n} from '../../hooks'\nimport { FieldProps } from '../../types'\nimport Upload, {\n  UploadFile,\n  UploadFileNative,\n  UploadProps,\n} from '../../../../components/Upload'\nimport useUpload from '../../../../components/upload/useUpload'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport HelpButtonInline, {\n  HelpButtonInlineContent,\n} from '../../../../components/help-button/HelpButtonInline'\nimport { useTranslation as useSharedTranslation } from '../../../../shared'\nimport { SpacingProps } from '../../../../shared/types'\nimport { FormError } from '../../utils'\n\nexport type UploadValue = Array<UploadFile | UploadFileNative>\nexport type Props = Omit<\n  FieldProps<UploadValue, UploadValue | undefined>,\n  'name'\n> &\n  SpacingProps & {\n    width?: Omit<FieldBlockWidth, 'medium' | 'small'>\n  } & Pick<\n    Partial<UploadProps>,\n    | 'title'\n    | 'text'\n    | 'acceptedFileTypes'\n    | 'filesAmountLimit'\n    | 'fileMaxSize'\n    | 'onFileDelete'\n    | 'skeleton'\n  > & {\n    asyncFileHandler?: (newFiles: UploadValue) => Promise<UploadValue>\n  }\n\nconst validateRequired = (\n  value: UploadValue,\n  { required, isChanged, error }\n) => {\n  const hasError = value?.some((file) => file.errorMessage)\n  if (hasError) {\n    return new FormError('Upload.errorInvalidFiles')\n  }\n\n  const hasFiles = value?.length > 0\n  if (required && ((!isChanged && !hasFiles) || !hasFiles)) {\n    return error\n  }\n\n  return undefined\n}\n\nconst updateFileLoadingState = (\n  files: UploadValue,\n  isLoading: boolean\n) => {\n  return files.map((file) => ({ ...file, isLoading }))\n}\n\nfunction UploadComponent(props: Props) {\n  const sharedTr = useSharedTranslation().Upload\n  const formsTr = useFormsTranslation().Upload\n\n  const errorMessages = useMemo(\n    () => ({\n      'Field.errorRequired': formsTr.errorRequired,\n    }),\n    [formsTr.errorRequired]\n  )\n\n  const preparedProps = {\n    errorMessages,\n    validateRequired,\n    ...props,\n  }\n\n  const {\n    id,\n    className,\n    width: widthProp = 'stretch',\n    value,\n    label,\n    labelDescription,\n    help,\n    htmlAttributes,\n    handleChange,\n    handleFocus,\n    handleBlur,\n    asyncFileHandler,\n    ...rest\n  } = useFieldProps(preparedProps, {\n    executeOnChangeRegardlessOfError: true,\n  })\n\n  // Upload props\n  const {\n    title = sharedTr.title,\n    text = sharedTr.text,\n    acceptedFileTypes = ['pdf', 'png', 'jpg', 'jpeg'],\n    filesAmountLimit = 100,\n    fileMaxSize = 5,\n    skeleton,\n    onFileDelete,\n  } = rest\n\n  const { files: fileContext, setFiles } = useUpload(id)\n\n  useEffect(() => {\n    setFiles(value)\n  }, [setFiles, value])\n\n  const handleChangeAsync = useCallback(\n    async (files: UploadValue) => {\n      // Filter out existing files\n      const existingFileIds = fileContext?.map((file) => file.id) || []\n      const newFiles = files.filter(\n        (file) => !existingFileIds.includes(file.id)\n      )\n\n      if (newFiles.length > 0) {\n        // Set loading\n        setFiles([\n          ...fileContext,\n          ...updateFileLoadingState(newFiles, true),\n        ])\n\n        const uploadedFiles = updateFileLoadingState(\n          await asyncFileHandler(newFiles),\n          false\n        )\n\n        handleChange([...fileContext, ...uploadedFiles])\n      } else {\n        handleChange(files)\n      }\n    },\n    [fileContext, asyncFileHandler, setFiles, updateFileLoadingState]\n  )\n\n  const changeHandler = useCallback(\n    ({ files }: { files: UploadValue }) => {\n      // Prevents the form-status from showing up\n      handleBlur()\n      handleFocus()\n\n      if (asyncFileHandler) {\n        handleChangeAsync(files)\n      } else {\n        handleChange(files)\n      }\n    },\n    [handleBlur, handleChange, handleFocus, asyncFileHandler, fileContext]\n  )\n\n  const width = widthProp as FieldBlockWidth\n  const fieldBlockProps: FieldBlockProps = {\n    id,\n    forId: `${id}-input`,\n    labelSrOnly: true,\n    className: classnames('dnb-forms-field-upload', className),\n    width,\n    help: undefined,\n    ...pickSpacingProps(props),\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps}>\n      <Upload\n        id={id}\n        acceptedFileTypes={acceptedFileTypes}\n        filesAmountLimit={filesAmountLimit}\n        fileMaxSize={fileMaxSize}\n        skeleton={skeleton}\n        onChange={changeHandler}\n        onFileDelete={onFileDelete}\n        title={label ?? title}\n        text={\n          help ? (\n            <>\n              {labelDescription ?? text}\n              <HelpButtonInline\n                contentId={`${id}-help`}\n                left={text ? 'x-small' : false}\n                help={help}\n              />\n            </>\n          ) : (\n            labelDescription ?? text\n          )\n        }\n        {...htmlAttributes}\n      >\n        {help && (\n          <HelpButtonInlineContent contentId={`${id}-help`} help={help} />\n        )}\n      </Upload>\n    </FieldBlock>\n  )\n}\n\nexport default UploadComponent\n\nUploadComponent._supportsSpacingProps = true\n"],"mappings":"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"}

package/cjs/extensions/forms/Field/Upload/style/dnb-upload.css

@@ -0,0 +1,4 @@
+.dnb-forms-field-upload .dnb-help-button__content .dnb-section {
+  margin-left: var(--upload-border-width);
+  margin-right: var(--upload-border-width);
+}

package/cjs/extensions/forms/Field/Upload/style/dnb-upload.min.css

@@ -0,0 +1 @@
+.dnb-forms-field-upload .dnb-help-button__content .dnb-section{margin-left:var(--upload-border-width);margin-right:var(--upload-border-width)}

package/cjs/extensions/forms/Field/Upload/style/dnb-upload.scss

@@ -0,0 +1,8 @@
+.dnb-forms-field-upload {
+  .dnb-help-button__content {
+    .dnb-section {
+      margin-left: var(--upload-border-width);
+      margin-right: var(--upload-border-width);
+    }
+  }
+}

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { StateWithMessage, StateMessage, StateTypes, FieldBlockContextProps } from './FieldBlockContext';
 import { ComponentProps, FieldProps, SubmitState } from '../types';
+import { HelpProps } from '../../../components/help-button/HelpButtonInline';
 export declare const states: Array<StateTypes>;
 /**
  * The width of a field block
@@ -40,6 +41,10 @@ export type SharedFieldBlockProps = {
      * Width of contents block, while label etc can be wider if space is available
      */
     contentWidth?: FieldBlockWidth;
+    /**
+     * Provide help content for the field.
+     */
+    help?: HelpProps;
 };
 export type Props = SharedFieldBlockProps & Pick<FieldProps, keyof ComponentProps | 'info' | 'warning' | 'error' | 'disabled'> & {
     /** The id to link a element with */

package/cjs/extensions/forms/FieldBlock/FieldBlock.js

@@ -16,11 +16,12 @@ var _components = require("../../../components");
 var _elements = require("../../../elements");
 var _componentHelper = require("../../../shared/component-helper");
 var _useId = _interopRequireDefault(require("../../../shared/helpers/useId"));
+var _HelpButtonInline = _interopRequireWildcard(require("../../../components/help-button/HelpButtonInline"));
 var _SubmitIndicator = _interopRequireDefault(require("../Form/SubmitIndicator/SubmitIndicator"));
 var _useSharedState = require("../../../shared/helpers/useSharedState");
 var _useTranslation = _interopRequireDefault(require("../hooks/useTranslation"));
 var _utils = require("../utils");
-const _excluded = ["className", "forId", "layout", "layoutOptions", "composition", "label", "labelDescription", "labelSuffix", "labelSrOnly", "asFieldset", "required", "info", "warning", "error", "disableStatusSummary", "fieldState", "disabled", "width", "contentWidth", "labelHeight", "align", "labelSize", "contentClassName", "children"];
+const _excluded = ["className", "forId", "layout", "layoutOptions", "composition", "label", "labelDescription", "labelSuffix", "labelSrOnly", "help", "asFieldset", "required", "info", "warning", "error", "disableStatusSummary", "fieldState", "disabled", "width", "contentWidth", "labelHeight", "align", "labelSize", "contentClassName", "children"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -39,7 +40,8 @@ function FieldBlock(props) {
   const dataContext = (0, _react.useContext)(_Context.default);
   const fieldBlockContext = (0, _react.useContext)(_FieldBlockContext.default);
   const nestedFieldBlockContext = !(fieldBlockContext !== null && fieldBlockContext !== void 0 && fieldBlockContext.disableStatusSummary) ? fieldBlockContext : null;
-  const sharedData = (0, _useSharedState.createSharedState)('field-block-props-' + ((_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : props.forId));
+  const id = (0, _useId.default)((_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : props.forId);
+  const sharedData = (0, _useSharedState.createSharedState)('field-block-props-' + id);
   const _Object$assign = Object.assign({}, sharedData.data, props),
     {
       className,
@@ -51,6 +53,7 @@ function FieldBlock(props) {
       labelDescription,
       labelSuffix,
       labelSrOnly,
+      help,
       asFieldset,
       required,
       info,
@@ -245,7 +248,7 @@ function FieldBlock(props) {
         }, []);
         if (messages.length > 0) {
           acc[type] = _objectSpread(_objectSpread({}, acc[type]), {}, {
-            text: _react.default.createElement(CombineMessages, {
+            children: _react.default.createElement(CombineMessages, {
               type: type,
               messages: messages
             })
@@ -267,7 +270,7 @@ function FieldBlock(props) {
     mountedFieldsRef.current = {};
     stateRecordRef.current = {};
   }, []);
-  const mainClasses = (0, _classnames.default)('dnb-forms-field-block', className, width && `dnb-forms-field-block--width-${hasCustomWidth ? 'custom' : width}`, labelHeight && `dnb-forms-field-block--label-height-${labelHeight}`);
+  const mainClasses = (0, _classnames.default)('dnb-forms-field-block', className, width && `dnb-forms-field-block--width-${hasCustomWidth ? 'custom' : width}`, contentWidth && `dnb-forms-field-block--content-width-${hasCustomContentWidth ? 'custom' : contentWidth}`, labelHeight && `dnb-forms-field-block--label-height-${labelHeight}`);
   const gridClasses = `dnb-forms-field-block__grid dnb-forms-field-block--layout-${layout}`;
   const enableFieldset = useEnableFieldset({
     label,
@@ -276,6 +279,7 @@ function FieldBlock(props) {
     nestedFieldBlockContext
   });
   const labelProps = {
+    className: 'dnb-forms-field-block__label',
     element: enableFieldset ? 'legend' : 'label',
     forId: enableFieldset ? undefined : forId,
     srOnly: labelSrOnly,
@@ -306,10 +310,8 @@ function FieldBlock(props) {
   if (dataContext !== null && dataContext !== void 0 && dataContext.prerenderFieldProps) {
     return null;
   }
-  if (fieldState && typeof label === 'undefined') {
-    (0, _componentHelper.warn)('Provide a label when using an async validator or onChange event.');
-  }
   const hasLabelDescription = isFragment(labelDescription) ? fragmentHasChildren(labelDescription) && !fragmentHasOnlyUndefinedChildren(labelDescription) : labelDescription;
+  const hasHelp = (help === null || help === void 0 ? void 0 : help.title) || (help === null || help === void 0 ? void 0 : help.content);
   return _react.default.createElement(_FieldBlockContext.default.Provider, {
     value: {
       setFieldState,
@@ -326,18 +328,27 @@ function FieldBlock(props) {
     className: mainClasses
   }, rest), _react.default.createElement("div", {
     className: gridClasses
-  }, _react.default.createElement(LabelDescription, {
-    labelDescription: labelDescription
-  }, (label || labelDescription) && _react.default.createElement(_components.FormLabel, labelProps, _react.default.createElement(_SubmitIndicator.default, {
-    state: fieldState
-  }, label, hasLabelDescription && _react.default.createElement("span", {
-    className: "dnb-forms-field-block__label-description"
-  }, labelDescription)))), _react.default.createElement("div", {
+  }, (label || labelDescription || hasHelp) && _react.default.createElement(_components.FormLabel, labelProps, _react.default.createElement("span", null, label && _react.default.createElement("span", {
+    className: "dnb-forms-field-block__label__content"
+  }, label), hasLabelDescription && _react.default.createElement("span", {
+    className: "dnb-forms-field-block__label__description"
+  }, labelDescription), hasHelp && _react.default.createElement(_HelpButtonInline.default, {
+    contentId: `${id}-help`,
+    help: help
+  }))), hasHelp && _react.default.createElement(_HelpButtonInline.HelpButtonInlineContent, {
+    contentId: `${id}-help`,
+    className: "dnb-forms-field-block__help",
+    help: help,
+    breakout: layout === 'vertical' && !(nestedFieldBlockContext !== null && nestedFieldBlockContext !== void 0 && nestedFieldBlockContext.composition)
+  }), _react.default.createElement("div", {
     className: 'dnb-forms-field-block__status' + (contentWidth && contentWidth !== 'small' && contentWidth !== 'medium' && !(parseFloat(contentWidth) <= 11) ? ` dnb-forms-field-block__contents--width-${hasCustomContentWidth ? 'custom' : contentWidth}` : "")
   }, _react.default.createElement(_components.FormStatus, statusContent === null || statusContent === void 0 ? void 0 : statusContent.error), _react.default.createElement(_components.FormStatus, statusContent === null || statusContent === void 0 ? void 0 : statusContent.warning), _react.default.createElement(_components.FormStatus, statusContent === null || statusContent === void 0 ? void 0 : statusContent.info)), _react.default.createElement("div", {
     className: (0, _classnames.default)('dnb-forms-field-block__contents', contentClassName, contentWidth && `dnb-forms-field-block__contents--width-${hasCustomContentWidth ? 'custom' : contentWidth}`, align && `dnb-forms-field-block__contents--align-${align}`, composition && `dnb-forms-field-block__contents__composition--${composition === true ? 'horizontal' : composition}`),
     ref: contentsRef
-  }, children))));
+  }, children), _react.default.createElement(_SubmitIndicator.default, {
+    state: fieldState,
+    className: "dnb-forms-field-block__indicator dnb-forms-submit-indicator--inline-wrap"
+  }))));
 }
 function useEnableFieldset(_ref3) {
   let {
@@ -384,18 +395,6 @@ function CombineMessages(_ref4) {
     }, message);
   })));
 }
-function LabelDescription(_ref6) {
-  let {
-    labelDescription,
-    children
-  } = _ref6;
-  if (!labelDescription) {
-    return children !== null && children !== void 0 ? children : null;
-  }
-  return _react.default.createElement("div", {
-    className: "dnb-forms-field-block__label"
-  }, children);
-}
 function getMessagesFromError(item) {
   const {
     content
@@ -405,7 +404,15 @@ function getMessagesFromError(item) {
       return error.message;
     });
   }
-  return [content instanceof Error && content.message || content instanceof _utils.FormError && content.message || (content === null || content === void 0 ? void 0 : content.toString()) || content];
+  if (Array.isArray(content)) {
+    return content.map(content => {
+      return content instanceof _utils.FormError || content instanceof Error ? content.message : content;
+    });
+  }
+  if (content instanceof _utils.FormError || content instanceof Error) {
+    return [content.message];
+  }
+  return [(_react.default.isValidElement(content) ? content : content === null || content === void 0 ? void 0 : content.toString()) || content];
 }
 function isFragment(fragment) {
   return _react.default.isValidElement(fragment) && fragment.type === _react.default.Fragment;