@dnb/eufemia 10.55.0 → 10.56.0

package/extensions/forms/Field/Toggle/Toggle.d.ts

@@ -1,4 +1,4 @@
-import { FieldHelpProps, FieldProps } from '../../types';
+import { FieldProps } from '../../types';
 export type ToggleProps = {
     valueOn: unknown;
     valueOff: unknown;
@@ -6,7 +6,7 @@ export type ToggleProps = {
     textOn?: string;
     textOff?: string;
 };
-export type Props = FieldHelpProps & Omit<FieldProps<unknown>, 'layout' | 'layoutOptions'> & ToggleProps;
+export type Props = Omit<FieldProps<unknown>, 'layout' | 'layoutOptions'> & ToggleProps;
 declare function Toggle(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace Toggle {
     var _supportsSpacingProps: boolean;

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

@@ -4,7 +4,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useCallback, useMemo } from 'react';
 import classnames from 'classnames';
-import { Checkbox, HelpButton, ToggleButton } from '../../../../components';
+import { Checkbox, ToggleButton } from '../../../../components';
 import ButtonRow from '../../Form/ButtonRow';
 import FieldBlock from '../../FieldBlock';
 import { useFieldProps } from '../../hooks';
@@ -24,11 +24,9 @@ function Toggle(props) {
     variant,
     disabled,
     label,
-    labelDescription,
     textOn,
     textOff,
     value,
-    help,
     hasError,
     htmlAttributes,
     handleChange,
@@ -52,9 +50,6 @@ function Toggle(props) {
     className: cn,
     disabled
   }, pickSpacingProps(props));
-  const suffix = help ? React.createElement(HelpButton, {
-    title: help.title
-  }, help.content) : undefined;
   const isOn = value === valueOn;
   const isOff = value === valueOff;
   useMemo(() => {
@@ -75,7 +70,6 @@ function Toggle(props) {
         checked: isOn,
         disabled: disabled,
         status: hasError ? 'error' : undefined,
-        suffix: suffix,
         onChange: handleCheckboxChange
       }, htmlAttributes)));
     case 'button':
@@ -85,18 +79,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.createElement(FieldBlock, _extends({}, fieldBlockProps, {
-        asFieldset: true,
-        labelDescription: React.createElement(React.Fragment, null, labelDescription, help ? React.createElement(HelpButton, {
-          size: "small",
-          left: labelDescription ? 'x-small' : false,
-          title: help.title
-        }, help.content) : undefined)
+        asFieldset: true
       }), React.createElement(ButtonRow, {
         bottom: "x-small"
       }, React.createElement(ToggleButtonGroupContext.Provider, {
@@ -121,7 +109,6 @@ function Toggle(props) {
         checked: isOn,
         disabled: disabled,
         status: hasError ? 'error' : undefined,
-        suffix: suffix,
         value: value ? 'true' : 'false',
         on_change: handleCheckboxChange
       }, htmlAttributes)));

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","names":["React","useCallback","useMemo","classnames","Checkbox","HelpButton","ToggleButton","ButtonRow","FieldBlock","useFieldProps","pickSpacingProps","ToggleButtonGroupContext","useTranslation","Toggle","props","translations","ToggleField","preparedProps","_objectSpread","errorMessages","id","className","valueOn","valueOff","variant","disabled","label","labelDescription","textOn","textOff","value","help","hasError","htmlAttributes","handleChange","setDisplayValue","handleCheckboxChange","_ref","checked","handleToggleChange","_ref2","cn","fieldBlockProps","forId","suffix","createElement","title","content","undefined","isOn","isOff","text","path","_extends","yes","no","status","onChange","on_change","asFieldset","Fragment","size","left","bottom","Provider","_supportsSpacingProps"],"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","useCallback","useMemo","classnames","Checkbox","ToggleButton","ButtonRow","FieldBlock","useFieldProps","pickSpacingProps","ToggleButtonGroupContext","useTranslation","Toggle","props","translations","ToggleField","preparedProps","_objectSpread","errorMessages","id","className","valueOn","valueOff","variant","disabled","label","textOn","textOff","value","hasError","htmlAttributes","handleChange","setDisplayValue","handleCheckboxChange","_ref","checked","handleToggleChange","_ref2","cn","fieldBlockProps","forId","isOn","isOff","text","path","createElement","_extends","undefined","yes","no","status","onChange","on_change","asFieldset","bottom","Provider","_supportsSpacingProps"],"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/extensions/forms/Field/Toggle/ToggleDocs.js

@@ -23,11 +23,6 @@ export 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'
   }
 };
 //# sourceMappingURL=ToggleDocs.js.map

package/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"],"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":"AAEA,OAAO,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"}
+{"version":3,"file":"ToggleDocs.js","names":["ToggleProperties","valueOn","doc","type","status","valueOff","textOn","textOff","variant"],"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":"AAEA,OAAO,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"}

package/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/extensions/forms/Field/Upload/Upload.js

@@ -3,34 +3,41 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-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 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, { useCallback, useEffect, useMemo } from 'react';
+import classnames from 'classnames';
 import FieldBlock from '../../FieldBlock';
 import { useFieldProps, useTranslation as useFormsTranslation } from '../../hooks';
 import Upload from '../../../../components/Upload';
 import useUpload from '../../../../components/upload/useUpload';
 import { pickSpacingProps } from '../../../../components/flex/utils';
-import { HelpButton } from '../../../../components';
+import HelpButtonInline, { HelpButtonInlineContent } from '../../../../components/help-button/HelpButtonInline';
 import { useTranslation as useSharedTranslation } from '../../../../shared';
 import { FormError } from '../../utils';
+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 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 = 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 FormError('Upload.errorInvalidFiles');
-    }
-    if (required && (!isChanged || !(value.length > 0))) {
-      return error;
-    }
-    return undefined;
-  }, []);
   const sharedTr = useSharedTranslation().Upload;
   const formsTr = useFormsTranslation().Upload;
   const errorMessages = useMemo(() => ({
@@ -54,7 +61,8 @@ function UploadComponent(props) {
       htmlAttributes,
       handleChange,
       handleFocus,
-      handleBlur
+      handleBlur,
+      asyncFileHandler
     } = _useFieldProps,
     rest = _objectWithoutProperties(_useFieldProps, _excluded);
   const {
@@ -67,26 +75,43 @@ function UploadComponent(props) {
     onFileDelete
   } = rest;
   const {
+    files: fileContext,
     setFiles
   } = useUpload(id);
   useEffect(() => {
     setFiles(value);
-  }, [handleBlur, setFiles, value]);
+  }, [setFiles, value]);
+  const handleChangeAsync = 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 = 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: classnames('dnb-forms-field-upload', className),
+    width,
+    help: undefined
   }, pickSpacingProps(props));
   return React.createElement(FieldBlock, fieldBlockProps, React.createElement(Upload, _extends({
     id: id,
@@ -97,11 +122,15 @@ function UploadComponent(props) {
     onChange: changeHandler,
     onFileDelete: onFileDelete,
     title: label !== null && label !== void 0 ? label : title,
-    text: help ? React.createElement(React.Fragment, null, labelDescription !== null && labelDescription !== void 0 ? labelDescription : text, React.createElement(HelpButton, {
+    text: help ? React.createElement(React.Fragment, null, labelDescription !== null && labelDescription !== void 0 ? labelDescription : text, React.createElement(HelpButtonInline, {
+      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.createElement(HelpButtonInlineContent, {
+    contentId: `${id}-help`,
+    help: help
+  })));
 }
 export default UploadComponent;
 UploadComponent._supportsSpacingProps = true;

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

@@ -1 +1 @@
-{"version":3,"file":"Upload.js","names":["React","useCallback","useEffect","useMemo","FieldBlock","useFieldProps","useTranslation","useFormsTranslation","Upload","useUpload","pickSpacingProps","HelpButton","useSharedTranslation","FormError","UploadComponent","props","validateRequired","value","_ref","required","isChanged","error","hasError","some","file","errorMessage","length","undefined","sharedTr","formsTr","errorMessages","errorRequired","preparedProps","_objectSpread","_useFieldProps","executeOnChangeRegardlessOfError","id","className","width","widthProp","label","labelDescription","help","htmlAttributes","handleChange","handleFocus","handleBlur","rest","_objectWithoutProperties","_excluded","title","text","acceptedFileTypes","filesAmountLimit","fileMaxSize","skeleton","onFileDelete","setFiles","changeHandler","_ref2","files","fieldBlockProps","forId","labelSrOnly","createElement","_extends","onChange","Fragment","left","content","_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":";;;;;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,OAAO,QAAQ,OAAO;AAC9D,OAAOC,UAAU,MAGV,kBAAkB;AACzB,SACEC,aAAa,EACbC,cAAc,IAAIC,mBAAmB,QAChC,aAAa;AAEpB,OAAOC,MAAM,MAIN,+BAA+B;AACtC,OAAOC,SAAS,MAAM,yCAAyC;AAC/D,SAASC,gBAAgB,QAAQ,mCAAmC;AACpE,SAASC,UAAU,QAAQ,wBAAwB;AACnD,SAASL,cAAc,IAAIM,oBAAoB,QAAQ,oBAAoB;AAE3E,SAASC,SAAS,QAAQ,aAAa;AAkBvC,SAASC,eAAeA,CAACC,KAAY,EAAE;EACrC,MAAMC,gBAAgB,GAAGf,WAAW,CAClC,CAACgB,KAAkB,EAAAC,IAAA,KAAqC;IAAA,IAAnC;MAAEC,QAAQ;MAAEC,SAAS;MAAEC;IAAM,CAAC,GAAAH,IAAA;IACjD,MAAMI,QAAQ,GAAGL,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEM,IAAI,CAAEC,IAAI,IAAKA,IAAI,CAACC,YAAY,CAAC;IACzD,IAAIH,QAAQ,EAAE;MACZ,OAAO,IAAIT,SAAS,CAAC,0BAA0B,CAAC;IAClD;IAEA,IAAIM,QAAQ,KAAK,CAACC,SAAS,IAAI,EAAEH,KAAK,CAACS,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE;MACnD,OAAOL,KAAK;IACd;IAEA,OAAOM,SAAS;EAClB,CAAC,EACD,EACF,CAAC;EAED,MAAMC,QAAQ,GAAGhB,oBAAoB,CAAC,CAAC,CAACJ,MAAM;EAC9C,MAAMqB,OAAO,GAAGtB,mBAAmB,CAAC,CAAC,CAACC,MAAM;EAE5C,MAAMsB,aAAa,GAAG3B,OAAO,CAC3B,OAAO;IACL,qBAAqB,EAAE0B,OAAO,CAACE;EACjC,CAAC,CAAC,EACF,CAACF,OAAO,CAACE,aAAa,CACxB,CAAC;EAED,MAAMC,aAAa,GAAAC,aAAA;IACjBH,aAAa;IACbd;EAAgB,GACbD,KAAK,CACT;EAED,MAAAmB,cAAA,GAaI7B,aAAa,CAAC2B,aAAa,EAAE;MAC/BG,gCAAgC,EAAE;IACpC,CAAC,CAAC;IAfI;MACJC,EAAE;MACFC,SAAS;MACTC,KAAK,EAAEC,SAAS,GAAG,SAAS;MAC5BtB,KAAK;MACLuB,KAAK;MACLC,gBAAgB;MAChBC,IAAI;MACJC,cAAc;MACdC,YAAY;MACZC,WAAW;MACXC;IAEF,CAAC,GAAAZ,cAAA;IADIa,IAAI,GAAAC,wBAAA,CAAAd,cAAA,EAAAe,SAAA;EAMT,MAAM;IACJC,KAAK,GAAGtB,QAAQ,CAACsB,KAAK;IACtBC,IAAI,GAAGvB,QAAQ,CAACuB,IAAI;IACpBC,iBAAiB,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC;IACjDC,gBAAgB,GAAG,GAAG;IACtBC,WAAW,GAAG,CAAC;IACfC,QAAQ;IACRC;EACF,CAAC,GAAGT,IAAI;EAER,MAAM;IAAEU;EAAS,CAAC,GAAGhD,SAAS,CAAC2B,EAAE,CAAC;EAElClC,SAAS,CAAC,MAAM;IACduD,QAAQ,CAACxC,KAAK,CAAC;EACjB,CAAC,EAAE,CAAC6B,UAAU,EAAEW,QAAQ,EAAExC,KAAK,CAAC,CAAC;EAEjC,MAAMyC,aAAa,GAAGzD,WAAW,CAC/B0D,KAAA,IAAuC;IAAA,IAAtC;MAAEC;IAA8B,CAAC,GAAAD,KAAA;IAEhCb,UAAU,CAAC,CAAC;IACZD,WAAW,CAAC,CAAC;IACbD,YAAY,CAACgB,KAAK,CAAC;EACrB,CAAC,EACD,CAACd,UAAU,EAAEF,YAAY,EAAEC,WAAW,CACxC,CAAC;EAED,MAAMP,KAAK,GAAGC,SAA4B;EAC1C,MAAMsB,eAAgC,GAAA5B,aAAA;IACpCG,EAAE;IACF0B,KAAK,EAAE1B,EAAE;IACT2B,WAAW,EAAE,IAAI;IACjB1B,SAAS;IACTC;EAAK,GACF5B,gBAAgB,CAACK,KAAK,CAAC,CAC3B;EAED,OACEf,KAAA,CAAAgE,aAAA,CAAC5D,UAAU,EAAKyD,eAAe,EAC7B7D,KAAA,CAAAgE,aAAA,CAACxD,MAAM,EAAAyD,QAAA;IACL7B,EAAE,EAAEA,EAAG;IACPgB,iBAAiB,EAAEA,iBAAkB;IACrCC,gBAAgB,EAAEA,gBAAiB;IACnCC,WAAW,EAAEA,WAAY;IACzBC,QAAQ,EAAEA,QAAS;IACnBW,QAAQ,EAAER,aAAc;IACxBF,YAAY,EAAEA,YAAa;IAC3BN,KAAK,EAAEV,KAAK,aAALA,KAAK,cAALA,KAAK,GAAIU,KAAM;IACtBC,IAAI,EACFT,IAAI,GACF1C,KAAA,CAAAgE,aAAA,CAAAhE,KAAA,CAAAmE,QAAA,QACG1B,gBAAgB,aAAhBA,gBAAgB,cAAhBA,gBAAgB,GAAIU,IAAI,EACzBnD,KAAA,CAAAgE,aAAA,CAACrD,UAAU;MACTyD,IAAI,EAAEjB,IAAI,GAAG,SAAS,GAAG,KAAM;MAC/BD,KAAK,EAAER,IAAI,CAACQ;IAAM,GAEjBR,IAAI,CAAC2B,OACI,CACZ,CAAC,GAEH5B,gBAAgB,aAAhBA,gBAAgB,cAAhBA,gBAAgB,GAAIU;EAEvB,GACGR,cAAc,CACnB,CACS,CAAC;AAEjB;AAEA,eAAe7B,eAAe;AAE9BA,eAAe,CAACwD,qBAAqB,GAAG,IAAI"}
+{"version":3,"file":"Upload.js","names":["React","useCallback","useEffect","useMemo","classnames","FieldBlock","useFieldProps","useTranslation","useFormsTranslation","Upload","useUpload","pickSpacingProps","HelpButtonInline","HelpButtonInlineContent","useSharedTranslation","FormError","validateRequired","value","_ref","required","isChanged","error","hasError","some","file","errorMessage","hasFiles","length","undefined","updateFileLoadingState","files","isLoading","map","_objectSpread","UploadComponent","props","sharedTr","formsTr","errorMessages","errorRequired","preparedProps","_useFieldProps","executeOnChangeRegardlessOfError","id","className","width","widthProp","label","labelDescription","help","htmlAttributes","handleChange","handleFocus","handleBlur","asyncFileHandler","rest","_objectWithoutProperties","_excluded","title","text","acceptedFileTypes","filesAmountLimit","fileMaxSize","skeleton","onFileDelete","fileContext","setFiles","handleChangeAsync","existingFileIds","newFiles","filter","includes","uploadedFiles","changeHandler","_ref2","fieldBlockProps","forId","labelSrOnly","createElement","_extends","onChange","Fragment","contentId","left","_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/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/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/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/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/extensions/forms/FieldBlock/FieldBlock.js

@@ -3,7 +3,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", "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 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, { useMemo, useContext, useCallback, useRef, useReducer, useEffect } from 'react';
@@ -13,8 +13,9 @@ import DataContext from '../DataContext/Context';
 import IterateElementContext from '../Iterate/IterateItemContext';
 import { Space, FormLabel, FormStatus } from '../../../components';
 import { Ul, Li } from '../../../elements';
-import { convertJsxToString, findElementInChildren, warn } from '../../../shared/component-helper';
+import { convertJsxToString, findElementInChildren } from '../../../shared/component-helper';
 import useId from '../../../shared/helpers/useId';
+import HelpButtonInline, { HelpButtonInlineContent } from '../../../components/help-button/HelpButtonInline';
 import SubmitIndicator from '../Form/SubmitIndicator/SubmitIndicator';
 import { createSharedState } from '../../../shared/helpers/useSharedState';
 import useTranslation from '../hooks/useTranslation';
@@ -25,7 +26,8 @@ function FieldBlock(props) {
   const dataContext = useContext(DataContext);
   const fieldBlockContext = useContext(FieldBlockContext);
   const nestedFieldBlockContext = !(fieldBlockContext !== null && fieldBlockContext !== void 0 && fieldBlockContext.disableStatusSummary) ? fieldBlockContext : null;
-  const sharedData = createSharedState('field-block-props-' + ((_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : props.forId));
+  const id = useId((_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : props.forId);
+  const sharedData = createSharedState('field-block-props-' + id);
   const _Object$assign = Object.assign({}, sharedData.data, props),
     {
       className,
@@ -37,6 +39,7 @@ function FieldBlock(props) {
       labelDescription,
       labelSuffix,
       labelSrOnly,
+      help,
       asFieldset,
       required,
       info,
@@ -231,7 +234,7 @@ function FieldBlock(props) {
         }, []);
         if (messages.length > 0) {
           acc[type] = _objectSpread(_objectSpread({}, acc[type]), {}, {
-            text: React.createElement(CombineMessages, {
+            children: React.createElement(CombineMessages, {
               type: type,
               messages: messages
             })
@@ -253,7 +256,7 @@ function FieldBlock(props) {
     mountedFieldsRef.current = {};
     stateRecordRef.current = {};
   }, []);
-  const mainClasses = classnames('dnb-forms-field-block', className, width && `dnb-forms-field-block--width-${hasCustomWidth ? 'custom' : width}`, labelHeight && `dnb-forms-field-block--label-height-${labelHeight}`);
+  const mainClasses = classnames('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,
@@ -262,6 +265,7 @@ function FieldBlock(props) {
     nestedFieldBlockContext
   });
   const labelProps = {
+    className: 'dnb-forms-field-block__label',
     element: enableFieldset ? 'legend' : 'label',
     forId: enableFieldset ? undefined : forId,
     srOnly: labelSrOnly,
@@ -292,10 +296,8 @@ function FieldBlock(props) {
   if (dataContext !== null && dataContext !== void 0 && dataContext.prerenderFieldProps) {
     return null;
   }
-  if (fieldState && typeof label === 'undefined') {
-    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.createElement(FieldBlockContext.Provider, {
     value: {
       setFieldState,
@@ -312,18 +314,27 @@ function FieldBlock(props) {
     className: mainClasses
   }, rest), React.createElement("div", {
     className: gridClasses
-  }, React.createElement(LabelDescription, {
-    labelDescription: labelDescription
-  }, (label || labelDescription) && React.createElement(FormLabel, labelProps, React.createElement(SubmitIndicator, {
-    state: fieldState
-  }, label, hasLabelDescription && React.createElement("span", {
-    className: "dnb-forms-field-block__label-description"
-  }, labelDescription)))), React.createElement("div", {
+  }, (label || labelDescription || hasHelp) && React.createElement(FormLabel, labelProps, React.createElement("span", null, label && React.createElement("span", {
+    className: "dnb-forms-field-block__label__content"
+  }, label), hasLabelDescription && React.createElement("span", {
+    className: "dnb-forms-field-block__label__description"
+  }, labelDescription), hasHelp && React.createElement(HelpButtonInline, {
+    contentId: `${id}-help`,
+    help: help
+  }))), hasHelp && React.createElement(HelpButtonInlineContent, {
+    contentId: `${id}-help`,
+    className: "dnb-forms-field-block__help",
+    help: help,
+    breakout: layout === 'vertical' && !(nestedFieldBlockContext !== null && nestedFieldBlockContext !== void 0 && nestedFieldBlockContext.composition)
+  }), React.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.createElement(FormStatus, statusContent === null || statusContent === void 0 ? void 0 : statusContent.error), React.createElement(FormStatus, statusContent === null || statusContent === void 0 ? void 0 : statusContent.warning), React.createElement(FormStatus, statusContent === null || statusContent === void 0 ? void 0 : statusContent.info)), React.createElement("div", {
     className: classnames('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.createElement(SubmitIndicator, {
+    state: fieldState,
+    className: "dnb-forms-field-block__indicator dnb-forms-submit-indicator--inline-wrap"
+  }))));
 }
 function useEnableFieldset(_ref3) {
   let {
@@ -370,18 +381,6 @@ function CombineMessages(_ref4) {
     }, message);
   })));
 }
-function LabelDescription(_ref6) {
-  let {
-    labelDescription,
-    children
-  } = _ref6;
-  if (!labelDescription) {
-    return children !== null && children !== void 0 ? children : null;
-  }
-  return React.createElement("div", {
-    className: "dnb-forms-field-block__label"
-  }, children);
-}
 export function getMessagesFromError(item) {
   const {
     content
@@ -391,7 +390,15 @@ export function getMessagesFromError(item) {
       return error.message;
     });
   }
-  return [content instanceof Error && content.message || content instanceof FormError && content.message || (content === null || content === void 0 ? void 0 : content.toString()) || content];
+  if (Array.isArray(content)) {
+    return content.map(content => {
+      return content instanceof FormError || content instanceof Error ? content.message : content;
+    });
+  }
+  if (content instanceof FormError || content instanceof Error) {
+    return [content.message];
+  }
+  return [(React.isValidElement(content) ? content : content === null || content === void 0 ? void 0 : content.toString()) || content];
 }
 function isFragment(fragment) {
   return React.isValidElement(fragment) && fragment.type === React.Fragment;