@dnb/eufemia 10.62.4 → 10.63.0

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

@@ -1 +1 @@
-{"version":3,"file":"String.js","names":["React","useContext","useMemo","useCallback","useEffect","useRef","classnames","Input","Textarea","InputMasked","DataContext","FieldBlockContext","FieldBlock","useFieldProps","pickSpacingProps","toCapitalized","StringComponent","props","_props$width","_props$innerRef","_dataContext$props2","_value$toString","dataContext","fieldBlockContext","schema","_props$schema","type","minLength","maxLength","pattern","fromInput","event","_event","_event$cleanedValue","_event2","_event3","value","emptyValue","cleanedValue","toEvent","trim","spaces","RegExp","test","replace","handleChange","transform","transformValue","capitalize","String","ref","preparedProps","_objectSpread","width","composition","innerRef","id","name","className","inputClassName","placeholder","hasError","disabled","multiline","mask","leftIcon","rightIcon","htmlAttributes","submitElement","clear","align","size","selectall","keepPlaceholder","rows","autoresizeMaxRows","autoresize","characterCounter","autoComplete","inputMode","autoCorrect","spellCheck","autoFocus","autoCapitalize","handleFocus","handleBlur","setDisplayValue","onKeyDown","_innerRef$current","path","current","transformInstantly","handleSubmit","handleKeyDown","_ref","_dataContext$props","isolate","key","_event$preventDefault","preventDefault","call","cn","sharedProps","on_focus","on_blur","on_change","on_key_down","stretch","Boolean","inner_ref","status","undefined","toString","textareaProps","autoresize_max_rows","inputProps","icon","icon_position","submit_element","keep_placeholder","fieldBlockProps","forId","contentWidth","createElement","_extends","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/String/String.tsx"],"sourcesContent":["import React, {\n  useContext,\n  useMemo,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react'\nimport classnames from 'classnames'\nimport { Input, Textarea } from '../../../../components'\nimport { InputProps } from '../../../../components/input/Input'\nimport InputMasked, {\n  InputMaskedProps,\n} from '../../../../components/InputMasked'\nimport { TextareaProps } from '../../../../components/Textarea'\nimport DataContext from '../../DataContext/Context'\nimport FieldBlockContext from '../../FieldBlock/FieldBlockContext'\nimport FieldBlock, {\n  Props as FieldBlockProps,\n  FieldBlockWidth,\n} from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { toCapitalized } from '../../../../shared/component-helper'\nimport type { TextCounterProps } from '../../../../fragments/TextCounter'\nimport type { FieldProps, AllJSONSchemaVersions } from '../../types'\n\nexport type Props = FieldProps<string, undefined | string> & {\n  // - Shared props\n  multiline?: boolean\n  inputClassName?: string\n  innerRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement>\n  width?: FieldBlockWidth\n  size?: InputProps['size'] | TextareaProps['size']\n  keepPlaceholder?: InputProps['keep_placeholder']\n\n  // - Validation\n  minLength?: number\n  maxLength?: number\n  pattern?: string\n\n  // - Input props\n  type?: InputProps['type']\n  align?: InputProps['align']\n  selectall?: InputProps['selectall']\n  clear?: boolean\n  mask?: InputMaskedProps['mask']\n  leftIcon?: string\n  rightIcon?: string\n  submitElement?: InputProps['submit_element']\n  capitalize?: boolean\n  trim?: boolean\n\n  // - Textarea props\n  rows?: TextareaProps['rows']\n  autoresizeMaxRows?: TextareaProps['autoresize_max_rows']\n  autoresize?: TextareaProps['autoresize']\n  characterCounter?: Omit<TextCounterProps, 'text'> | number\n\n  // - Html props\n  autoComplete?: HTMLInputElement['autocomplete']\n  inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode']\n  autoCorrect?: React.HTMLAttributes<HTMLInputElement>['autoCorrect']\n  spellCheck?: React.HTMLAttributes<HTMLInputElement>['spellCheck']\n  autoFocus?: React.HTMLAttributes<HTMLInputElement>['autoFocus']\n  autoCapitalize?: React.HTMLAttributes<HTMLInputElement>['autoCapitalize']\n\n  // - Events\n  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>\n}\n\nfunction StringComponent(props: Props) {\n  const dataContext = useContext(DataContext)\n  const fieldBlockContext = useContext(FieldBlockContext)\n\n  const schema = useMemo<AllJSONSchemaVersions>(\n    () =>\n      props.schema ?? {\n        type: 'string',\n        minLength: props.minLength,\n        maxLength: props.maxLength,\n        pattern: props.pattern,\n      },\n    [props.schema, props.minLength, props.maxLength, props.pattern]\n  )\n  const fromInput = useCallback(\n    (event: { value: string; cleanedValue?: string }) => {\n      if (typeof event === 'string') {\n        event = { value: event }\n      }\n      if (event?.value === '') {\n        return props.emptyValue\n      }\n      // Cleaned value for masked\n      return event?.cleanedValue ?? event?.value\n    },\n    [props.emptyValue]\n  )\n  const toEvent = useCallback(\n    (value: string, type: string) => {\n      if (props.trim && type === 'onBlur') {\n        const spaces = '[\\\\s ]'\n        if (new RegExp(`^${spaces}|${spaces}$`).test(value)) {\n          value = value.replace(\n            new RegExp(`^${spaces}+|${spaces}+$`, 'g'),\n            ''\n          )\n          handleChange(value)\n        }\n      }\n      return value\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [props.trim]\n  )\n  const transform = props.transformValue\n  const transformValue = useCallback(\n    (value: string) => {\n      if (props.capitalize) {\n        value = toCapitalized(String(value || ''))\n      }\n      return transform?.(value) || value\n    },\n    [props.capitalize, transform]\n  )\n\n  const ref = useRef<HTMLInputElement>()\n  const preparedProps: Props = {\n    ...props,\n    schema,\n    fromInput,\n    toEvent,\n    transformValue,\n    width:\n      props.width ??\n      (fieldBlockContext?.composition ? 'stretch' : 'large'),\n    innerRef: props.innerRef ?? ref,\n  }\n\n  const {\n    id,\n    name,\n    className,\n    innerRef,\n    inputClassName,\n    placeholder,\n    value,\n    hasError,\n    disabled,\n    multiline,\n    mask,\n    leftIcon,\n    rightIcon,\n    width,\n    htmlAttributes,\n    submitElement,\n\n    // - Input props\n    type,\n    clear,\n    align,\n    size,\n    selectall,\n    keepPlaceholder,\n\n    // - Textarea props\n    rows,\n    autoresizeMaxRows = 6,\n    autoresize = true,\n    characterCounter,\n\n    // - Html props\n    autoComplete,\n    inputMode,\n    autoCorrect,\n    spellCheck,\n    autoFocus,\n    autoCapitalize,\n\n    // - Events\n    handleFocus,\n    handleBlur,\n    handleChange,\n    setDisplayValue,\n    onKeyDown,\n  } = useFieldProps(preparedProps)\n\n  useEffect(() => {\n    setDisplayValue(props.path, innerRef.current?.value)\n  }, [innerRef, props.path, setDisplayValue, value])\n\n  const transformInstantly = useCallback(\n    (value: string) => (props.capitalize ? toCapitalized(value) : value),\n    [props.capitalize]\n  )\n\n  const { handleSubmit } = dataContext ?? {}\n  const handleKeyDown = useCallback(\n    ({ event }: { event: React.KeyboardEvent<HTMLInputElement> }) => {\n      if (\n        !multiline &&\n        dataContext?.props?.isolate &&\n        event.key === 'Enter'\n      ) {\n        handleSubmit() // So we commit the data to the outer context\n        event.preventDefault?.() // And prevent the default form submit\n      }\n\n      onKeyDown?.(event)\n    },\n    [handleSubmit, dataContext?.props?.isolate, multiline, onKeyDown]\n  )\n\n  const cn = classnames('dnb-forms-field-string__input', inputClassName)\n\n  const sharedProps: InputProps & TextareaProps = {\n    id,\n    name,\n    autoComplete,\n    autoCorrect,\n    spellCheck,\n    autoFocus,\n    autoCapitalize,\n    inputMode,\n    className: cn,\n    placeholder,\n    on_focus: handleFocus,\n    on_blur: handleBlur,\n    on_change: handleChange,\n    on_key_down: handleKeyDown,\n    disabled,\n    ...htmlAttributes,\n    stretch: Boolean(width),\n    inner_ref: innerRef,\n    status: hasError ? 'error' : undefined,\n    value: transformInstantly(value?.toString() ?? ''),\n  }\n\n  const textareaProps: TextareaProps = {\n    keepPlaceholder,\n    rows,\n    autoresize_max_rows: autoresizeMaxRows,\n    autoresize,\n    characterCounter,\n  }\n\n  const inputProps: InputProps = {\n    type,\n    clear,\n    size,\n    align,\n    selectall,\n    icon: leftIcon ?? rightIcon,\n    icon_position: rightIcon && !leftIcon ? 'right' : undefined,\n    submit_element: submitElement,\n    keep_placeholder: keepPlaceholder,\n  }\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    className: classnames('dnb-forms-field-string', className),\n    width:\n      width === 'stretch' || fieldBlockContext?.composition\n        ? width\n        : undefined,\n    contentWidth: width !== false ? width : undefined,\n    ...pickSpacingProps(props),\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps}>\n      {multiline ? (\n        <Textarea {...sharedProps} {...textareaProps} />\n      ) : mask ? (\n        <InputMasked {...sharedProps} {...inputProps} mask={mask} />\n      ) : (\n        <Input {...sharedProps} {...inputProps} />\n      )}\n    </FieldBlock>\n  )\n}\n\nStringComponent._supportsSpacingProps = true\nexport default StringComponent\n"],"mappings":"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"}
+{"version":3,"file":"String.js","names":["React","useContext","useMemo","useCallback","useEffect","useRef","classnames","Input","Textarea","InputMasked","DataContext","FieldBlockContext","FieldBlock","useFieldProps","pickSpacingProps","toCapitalized","StringComponent","props","_props$width","_props$innerRef","_dataContext$props2","_value$toString","dataContext","fieldBlockContext","schema","_props$schema","type","minLength","maxLength","pattern","fromInput","event","_event","_event$cleanedValue","_event2","_event3","value","emptyValue","cleanedValue","toEvent","trim","spaces","RegExp","test","replace","handleChange","transform","transformValue","capitalize","String","ref","preparedProps","_objectSpread","width","composition","innerRef","id","name","className","inputClassName","placeholder","hasError","disabled","multiline","mask","leftIcon","rightIcon","htmlAttributes","submitElement","clear","align","size","selectall","keepPlaceholder","rows","autoresizeMaxRows","autoresize","characterCounter","autoComplete","inputMode","autoCorrect","spellCheck","autoFocus","autoCapitalize","handleFocus","handleBlur","setDisplayValue","onKeyDown","_innerRef$current","current","transformInstantly","handleSubmit","handleKeyDown","_ref","_dataContext$props","isolate","key","_event$preventDefault","preventDefault","call","cn","sharedProps","on_focus","on_blur","on_change","on_key_down","stretch","Boolean","inner_ref","status","undefined","toString","textareaProps","autoresize_max_rows","inputProps","icon","icon_position","submit_element","keep_placeholder","fieldBlockProps","forId","contentWidth","createElement","_extends","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/String/String.tsx"],"sourcesContent":["import React, {\n  useContext,\n  useMemo,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react'\nimport classnames from 'classnames'\nimport { Input, Textarea } from '../../../../components'\nimport { InputProps } from '../../../../components/input/Input'\nimport InputMasked, {\n  InputMaskedProps,\n} from '../../../../components/InputMasked'\nimport { TextareaProps } from '../../../../components/Textarea'\nimport DataContext from '../../DataContext/Context'\nimport FieldBlockContext from '../../FieldBlock/FieldBlockContext'\nimport FieldBlock, {\n  Props as FieldBlockProps,\n  FieldBlockWidth,\n} from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { toCapitalized } from '../../../../shared/component-helper'\nimport type { TextCounterProps } from '../../../../fragments/TextCounter'\nimport type { FieldProps, AllJSONSchemaVersions } from '../../types'\n\nexport type Props = FieldProps<string, undefined | string> & {\n  // - Shared props\n  multiline?: boolean\n  inputClassName?: string\n  innerRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement>\n  width?: FieldBlockWidth\n  size?: InputProps['size'] | TextareaProps['size']\n  keepPlaceholder?: InputProps['keep_placeholder']\n\n  // - Validation\n  minLength?: number\n  maxLength?: number\n  pattern?: string\n\n  // - Input props\n  type?: InputProps['type']\n  align?: InputProps['align']\n  selectall?: InputProps['selectall']\n  clear?: boolean\n  mask?: InputMaskedProps['mask']\n  leftIcon?: string\n  rightIcon?: string\n  submitElement?: InputProps['submit_element']\n  capitalize?: boolean\n  trim?: boolean\n\n  // - Textarea props\n  rows?: TextareaProps['rows']\n  autoresizeMaxRows?: TextareaProps['autoresize_max_rows']\n  autoresize?: TextareaProps['autoresize']\n  characterCounter?: Omit<TextCounterProps, 'text'> | number\n\n  // - Html props\n  autoComplete?: HTMLInputElement['autocomplete']\n  inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode']\n  autoCorrect?: React.HTMLAttributes<HTMLInputElement>['autoCorrect']\n  spellCheck?: React.HTMLAttributes<HTMLInputElement>['spellCheck']\n  autoFocus?: React.HTMLAttributes<HTMLInputElement>['autoFocus']\n  autoCapitalize?: React.HTMLAttributes<HTMLInputElement>['autoCapitalize']\n\n  // - Events\n  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>\n}\n\nfunction StringComponent(props: Props) {\n  const dataContext = useContext(DataContext)\n  const fieldBlockContext = useContext(FieldBlockContext)\n\n  const schema = useMemo<AllJSONSchemaVersions>(\n    () =>\n      props.schema ?? {\n        type: 'string',\n        minLength: props.minLength,\n        maxLength: props.maxLength,\n        pattern: props.pattern,\n      },\n    [props.schema, props.minLength, props.maxLength, props.pattern]\n  )\n  const fromInput = useCallback(\n    (event: { value: string; cleanedValue?: string }) => {\n      if (typeof event === 'string') {\n        event = { value: event }\n      }\n      if (event?.value === '') {\n        return props.emptyValue\n      }\n      // Cleaned value for masked\n      return event?.cleanedValue ?? event?.value\n    },\n    [props.emptyValue]\n  )\n  const toEvent = useCallback(\n    (value: string, type: string) => {\n      if (props.trim && type === 'onBlur') {\n        const spaces = '[\\\\s ]'\n        if (new RegExp(`^${spaces}|${spaces}$`).test(value)) {\n          value = value.replace(\n            new RegExp(`^${spaces}+|${spaces}+$`, 'g'),\n            ''\n          )\n          handleChange(value)\n        }\n      }\n      return value\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [props.trim]\n  )\n  const transform = props.transformValue\n  const transformValue = useCallback(\n    (value: string) => {\n      if (props.capitalize) {\n        value = toCapitalized(String(value || ''))\n      }\n      return transform?.(value) || value\n    },\n    [props.capitalize, transform]\n  )\n\n  const ref = useRef<HTMLInputElement>()\n  const preparedProps: Props = {\n    ...props,\n    schema,\n    fromInput,\n    toEvent,\n    transformValue,\n    width:\n      props.width ??\n      (fieldBlockContext?.composition ? 'stretch' : 'large'),\n    innerRef: props.innerRef ?? ref,\n  }\n\n  const {\n    id,\n    name,\n    className,\n    innerRef,\n    inputClassName,\n    placeholder,\n    value,\n    hasError,\n    disabled,\n    multiline,\n    mask,\n    leftIcon,\n    rightIcon,\n    width,\n    htmlAttributes,\n    submitElement,\n\n    // - Input props\n    type,\n    clear,\n    align,\n    size,\n    selectall,\n    keepPlaceholder,\n\n    // - Textarea props\n    rows,\n    autoresizeMaxRows = 6,\n    autoresize = true,\n    characterCounter,\n\n    // - Html props\n    autoComplete,\n    inputMode,\n    autoCorrect,\n    spellCheck,\n    autoFocus,\n    autoCapitalize,\n\n    // - Events\n    handleFocus,\n    handleBlur,\n    handleChange,\n    setDisplayValue,\n    onKeyDown,\n  } = useFieldProps(preparedProps)\n\n  useEffect(() => {\n    setDisplayValue(innerRef.current?.value)\n  }, [innerRef, setDisplayValue, value])\n\n  const transformInstantly = useCallback(\n    (value: string) => (props.capitalize ? toCapitalized(value) : value),\n    [props.capitalize]\n  )\n\n  const { handleSubmit } = dataContext ?? {}\n  const handleKeyDown = useCallback(\n    ({ event }: { event: React.KeyboardEvent<HTMLInputElement> }) => {\n      if (\n        !multiline &&\n        dataContext?.props?.isolate &&\n        event.key === 'Enter'\n      ) {\n        handleSubmit() // So we commit the data to the outer context\n        event.preventDefault?.() // And prevent the default form submit\n      }\n\n      onKeyDown?.(event)\n    },\n    [handleSubmit, dataContext?.props?.isolate, multiline, onKeyDown]\n  )\n\n  const cn = classnames('dnb-forms-field-string__input', inputClassName)\n\n  const sharedProps: InputProps & TextareaProps = {\n    id,\n    name,\n    autoComplete,\n    autoCorrect,\n    spellCheck,\n    autoFocus,\n    autoCapitalize,\n    inputMode,\n    className: cn,\n    placeholder,\n    on_focus: handleFocus,\n    on_blur: handleBlur,\n    on_change: handleChange,\n    on_key_down: handleKeyDown,\n    disabled,\n    ...htmlAttributes,\n    stretch: Boolean(width),\n    inner_ref: innerRef,\n    status: hasError ? 'error' : undefined,\n    value: transformInstantly(value?.toString() ?? ''),\n  }\n\n  const textareaProps: TextareaProps = {\n    keepPlaceholder,\n    rows,\n    autoresize_max_rows: autoresizeMaxRows,\n    autoresize,\n    characterCounter,\n  }\n\n  const inputProps: InputProps = {\n    type,\n    clear,\n    size,\n    align,\n    selectall,\n    icon: leftIcon ?? rightIcon,\n    icon_position: rightIcon && !leftIcon ? 'right' : undefined,\n    submit_element: submitElement,\n    keep_placeholder: keepPlaceholder,\n  }\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    className: classnames('dnb-forms-field-string', className),\n    width:\n      width === 'stretch' || fieldBlockContext?.composition\n        ? width\n        : undefined,\n    contentWidth: width !== false ? width : undefined,\n    ...pickSpacingProps(props),\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps}>\n      {multiline ? (\n        <Textarea {...sharedProps} {...textareaProps} />\n      ) : mask ? (\n        <InputMasked {...sharedProps} {...inputProps} mask={mask} />\n      ) : (\n        <Input {...sharedProps} {...inputProps} />\n      )}\n    </FieldBlock>\n  )\n}\n\nStringComponent._supportsSpacingProps = true\nexport default StringComponent\n"],"mappings":"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"}

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

@@ -11,6 +11,7 @@ import { useFieldProps } from '../../hooks';
 import { pickSpacingProps } from '../../../../components/flex/utils';
 import ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext';
 import useTranslation from '../../hooks/useTranslation';
+import { useIterateItemNo } from '../../Iterate/ItemNo/useIItemNo';
 function Toggle(props) {
   const translations = useTranslation().ToggleField;
   const preparedProps = _objectSpread(_objectSpread({}, props), {}, {
@@ -23,7 +24,6 @@ function Toggle(props) {
     valueOff,
     variant,
     disabled,
-    label,
     textOn,
     textOff,
     value,
@@ -55,9 +55,19 @@ function Toggle(props) {
   useMemo(() => {
     const text = isOn ? textOn : textOff;
     if (text) {
-      setDisplayValue(props.path, text);
+      setDisplayValue(text);
     }
-  }, [isOn, props.path, setDisplayValue, textOff, textOn]);
+  }, [isOn, setDisplayValue, textOff, textOn]);
+  const {
+    label,
+    labelSuffix,
+    required
+  } = props;
+  const labelWithItemNo = useIterateItemNo({
+    label,
+    labelSuffix,
+    required
+  });
   switch (variant) {
     default:
     case 'checkbox':
@@ -66,7 +76,7 @@ function Toggle(props) {
       }), React.createElement(Checkbox, _extends({
         id: id,
         className: cn,
-        label: label !== null && label !== void 0 ? label : isOn ? textOn !== null && textOn !== void 0 ? textOn : translations.yes : textOff !== null && textOff !== void 0 ? textOff : translations.no,
+        label: labelWithItemNo !== null && labelWithItemNo !== void 0 ? labelWithItemNo : isOn ? textOn !== null && textOn !== void 0 ? textOn : translations.yes : textOff !== null && textOff !== void 0 ? textOff : translations.no,
         checked: isOn,
         disabled: disabled,
         status: hasError ? 'error' : undefined,

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

@@ -1 +1 @@
-{"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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"}
+{"version":3,"file":"Toggle.js","names":["React","useCallback","useMemo","classnames","Checkbox","ToggleButton","ButtonRow","FieldBlock","useFieldProps","pickSpacingProps","ToggleButtonGroupContext","useTranslation","useIterateItemNo","Toggle","props","translations","ToggleField","preparedProps","_objectSpread","errorMessages","id","className","valueOn","valueOff","variant","disabled","textOn","textOff","value","hasError","htmlAttributes","handleChange","setDisplayValue","handleCheckboxChange","_ref","checked","handleToggleChange","_ref2","cn","fieldBlockProps","forId","isOn","isOff","text","label","labelSuffix","required","labelWithItemNo","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'\nimport { useIterateItemNo } from '../../Iterate/ItemNo/useIItemNo'\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    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(text)\n    }\n  }, [isOn, setDisplayValue, textOff, textOn])\n\n  const { label, labelSuffix, required } = props\n  const labelWithItemNo = useIterateItemNo({\n    label,\n    labelSuffix,\n    required,\n  })\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              labelWithItemNo ??\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/Upload/Upload.js

@@ -32,16 +32,6 @@ const validateRequired = (value, _ref) => {
   }
   return undefined;
 };
-const updateFileLoadingState = function (files) {
-  let {
-    isLoading
-  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
-    isLoading: false
-  };
-  return files.map(file => _objectSpread(_objectSpread({}, file), {}, {
-    isLoading
-  }));
-};
 function UploadComponent(props) {
   const sharedTr = useSharedTranslation().Upload;
   const formsTr = useFormsTranslation().Upload;
@@ -101,17 +91,27 @@ function UploadComponent(props) {
   useEffect(() => {
     setFiles(value);
   }, [setFiles, value]);
-  const handleChangeAsync = useCallback(async existingFiles => {
+  const handleChangeAsync = useCallback(async files => {
     var _filesRef$current;
     const existingFileIds = ((_filesRef$current = filesRef.current) === null || _filesRef$current === void 0 ? void 0 : _filesRef$current.map(file => file.id)) || [];
-    const newFiles = existingFiles.filter(file => !existingFileIds.includes(file.id));
-    if (newFiles.length > 0) {
-      setFiles([...filesRef.current, ...updateFileLoadingState(newFiles, {
-        isLoading: true
-      })]);
-      const incomingFiles = await fileHandler(newFiles);
-      const uploadedFiles = updateFileLoadingState(incomingFiles, {
-        isLoading: false
+    const newFiles = files.filter(file => !existingFileIds.includes(file.id));
+    const newValidFiles = newFiles.filter(file => !file.errorMessage);
+    if (newValidFiles.length > 0) {
+      const newFilesLoading = newFiles.map(file => _objectSpread(_objectSpread({}, file), {}, {
+        isLoading: !file.errorMessage
+      }));
+      setFiles([...filesRef.current, ...newFilesLoading]);
+      const incomingFiles = await fileHandler(newValidFiles);
+      incomingFiles.forEach(file => {
+        const incomingFileObj = _objectSpread(_objectSpread({}, file), {}, {
+          isLoading: false
+        });
+        const foundIndex = newFilesLoading.findIndex(newFile => newFile.isLoading);
+        if (foundIndex >= 0) {
+          newFilesLoading[foundIndex] = incomingFileObj;
+        } else {
+          newFilesLoading.push(incomingFileObj);
+        }
       });
       const indexOfFirstNewFile = filesRef.current.findIndex(_ref2 => {
         let {
@@ -119,10 +119,10 @@ function UploadComponent(props) {
         } = _ref2;
         return id === newFiles[0].id;
       });
-      const updatedFiles = [...filesRef.current.slice(0, indexOfFirstNewFile), ...uploadedFiles, ...filesRef.current.slice(indexOfFirstNewFile + newFiles.length)];
+      const updatedFiles = [...filesRef.current.slice(0, indexOfFirstNewFile), ...newFilesLoading, ...filesRef.current.slice(indexOfFirstNewFile + newFilesLoading.length)];
       handleChange(updatedFiles);
     } else {
-      handleChange(existingFiles);
+      handleChange(files);
     }
   }, [setFiles, fileHandler, handleChange]);
   const changeHandler = useCallback(_ref3 => {

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

@@ -1 +1 @@
-{"version":3,"file":"Upload.js","names":["React","useCallback","useEffect","useMemo","useRef","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","arguments","map","_objectSpread","UploadComponent","props","sharedTr","formsTr","errorMessages","errorRequired","fromInput","forEach","item","index","_item$file","name","preparedProps","toInput","transformFiles","_useFieldProps","executeOnChangeRegardlessOfError","id","className","width","widthProp","label","labelDescription","help","htmlAttributes","handleChange","handleFocus","handleBlur","fileHandler","rest","_objectWithoutProperties","_excluded","title","text","acceptedFileTypes","filesAmountLimit","fileMaxSize","skeleton","onFileDelete","onFileClick","setFiles","filesRef","current","handleChangeAsync","existingFiles","_filesRef$current","existingFileIds","newFiles","filter","includes","incomingFiles","uploadedFiles","indexOfFirstNewFile","findIndex","_ref2","updatedFiles","slice","changeHandler","_ref3","fieldBlockProps","forId","labelSrOnly","createElement","_extends","onChange","Fragment","contentId","left","_supportsSpacingProps","Array","isArray","File"],"sources":["../../../../../../src/extensions/forms/Field/Upload/Upload.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef } 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 { UploadFile, UploadFileNative }\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    | 'onFileClick'\n    | 'skeleton'\n    | 'download'\n  > & {\n    fileHandler?: (\n      newFiles: UploadValue\n    ) => 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 } = { isLoading: false }\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 fromInput = useCallback((value: UploadValue) => {\n    value.forEach((item, index) => {\n      value[index] = item\n\n      // Store the name in the value, to support session storage (serialization)\n      value[index]['name'] = item['name'] || item.file?.name\n    })\n\n    return value\n  }, [])\n\n  const preparedProps = {\n    errorMessages,\n    validateRequired,\n    fromInput,\n    toInput: transformFiles,\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    fileHandler,\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    onFileClick,\n  } = rest\n\n  const { files, setFiles } = useUpload(id)\n\n  const filesRef = useRef<Array<UploadFile>>()\n\n  useEffect(() => {\n    filesRef.current = files\n  }, [files])\n\n  useEffect(() => {\n    setFiles(value)\n  }, [setFiles, value])\n\n  const handleChangeAsync = useCallback(\n    async (existingFiles: UploadValue) => {\n      // Filter out existing files\n      const existingFileIds =\n        filesRef.current?.map((file) => file.id) || []\n      const newFiles = existingFiles.filter(\n        (file) => !existingFileIds.includes(file.id)\n      )\n\n      if (newFiles.length > 0) {\n        // Set loading\n        setFiles([\n          ...filesRef.current,\n          ...updateFileLoadingState(newFiles, { isLoading: true }),\n        ])\n\n        const incomingFiles = await fileHandler(newFiles)\n\n        const uploadedFiles = updateFileLoadingState(incomingFiles, {\n          isLoading: false,\n        })\n\n        const indexOfFirstNewFile = filesRef.current.findIndex(\n          ({ id }) => id === newFiles[0].id\n        )\n\n        const updatedFiles = [\n          ...filesRef.current.slice(0, indexOfFirstNewFile),\n          ...uploadedFiles,\n          ...filesRef.current.slice(indexOfFirstNewFile + newFiles.length),\n        ]\n\n        // Set error, if any\n        handleChange(updatedFiles)\n      } else {\n        handleChange(existingFiles)\n      }\n    },\n    [setFiles, fileHandler, handleChange]\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 (fileHandler) {\n        handleChangeAsync(files)\n      } else {\n        handleChange(files)\n      }\n    },\n    [handleBlur, handleFocus, fileHandler, handleChangeAsync, handleChange]\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        onFileClick={onFileClick}\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\nexport function transformFiles(value: UploadValue) {\n  if (Array.isArray(value)) {\n    if (value.length === 0) {\n      return undefined\n    }\n\n    value.map((item) => {\n      if (item?.file && !(item.file instanceof File)) {\n        // To support session storage, we recreated the file blob.\n        item['file'] = new File([], item['name'])\n      }\n      return item\n    })\n  }\n\n  return value\n}\n"],"mappings":"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"}
+{"version":3,"file":"Upload.js","names":["React","useCallback","useEffect","useMemo","useRef","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","UploadComponent","props","sharedTr","formsTr","errorMessages","errorRequired","fromInput","forEach","item","index","_item$file","name","preparedProps","_objectSpread","toInput","transformFiles","_useFieldProps","executeOnChangeRegardlessOfError","id","className","width","widthProp","label","labelDescription","help","htmlAttributes","handleChange","handleFocus","handleBlur","fileHandler","rest","_objectWithoutProperties","_excluded","title","text","acceptedFileTypes","filesAmountLimit","fileMaxSize","skeleton","onFileDelete","onFileClick","files","setFiles","filesRef","current","handleChangeAsync","_filesRef$current","existingFileIds","map","newFiles","filter","includes","newValidFiles","newFilesLoading","isLoading","incomingFiles","incomingFileObj","foundIndex","findIndex","newFile","push","indexOfFirstNewFile","_ref2","updatedFiles","slice","changeHandler","_ref3","fieldBlockProps","forId","labelSrOnly","createElement","_extends","onChange","Fragment","contentId","left","_supportsSpacingProps","Array","isArray","File"],"sources":["../../../../../../src/extensions/forms/Field/Upload/Upload.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef } 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 { UploadFile, UploadFileNative }\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    | 'onFileClick'\n    | 'skeleton'\n    | 'download'\n  > & {\n    fileHandler?: (\n      newFiles: UploadValue\n    ) => 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\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 fromInput = useCallback((value: UploadValue) => {\n    value.forEach((item, index) => {\n      value[index] = item\n\n      // Store the name in the value, to support session storage (serialization)\n      value[index]['name'] = item['name'] || item.file?.name\n    })\n\n    return value\n  }, [])\n\n  const preparedProps = {\n    errorMessages,\n    validateRequired,\n    fromInput,\n    toInput: transformFiles,\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    fileHandler,\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    onFileClick,\n  } = rest\n\n  const { files, setFiles } = useUpload(id)\n\n  const filesRef = useRef<Array<UploadFile>>()\n\n  useEffect(() => {\n    filesRef.current = files\n  }, [files])\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 =\n        filesRef.current?.map((file) => file.id) || []\n      const newFiles = files.filter(\n        (file) => !existingFileIds.includes(file.id)\n      )\n      const newValidFiles = newFiles.filter((file) => !file.errorMessage)\n\n      if (newValidFiles.length > 0) {\n        // Set loading\n        const newFilesLoading = newFiles.map((file) => ({\n          ...file,\n          isLoading: !file.errorMessage,\n        }))\n        setFiles([...filesRef.current, ...newFilesLoading])\n\n        const incomingFiles = await fileHandler(newValidFiles)\n        // merge incoming files into existing order of newFiles.\n        incomingFiles.forEach((file) => {\n          const incomingFileObj = {\n            ...file,\n            isLoading: false,\n          }\n          const foundIndex = newFilesLoading.findIndex(\n            (newFile) => newFile.isLoading\n          )\n          if (foundIndex >= 0) {\n            newFilesLoading[foundIndex] = incomingFileObj\n          } else {\n            // if there's more files incoming than there's files loading (edge case), add them to end of array.\n            newFilesLoading.push(incomingFileObj)\n          }\n        })\n\n        const indexOfFirstNewFile = filesRef.current.findIndex(\n          ({ id }) => id === newFiles[0].id\n        )\n\n        const updatedFiles = [\n          ...filesRef.current.slice(0, indexOfFirstNewFile),\n          ...newFilesLoading,\n          ...filesRef.current.slice(\n            indexOfFirstNewFile + newFilesLoading.length\n          ),\n        ]\n\n        // Set error, if any\n        handleChange(updatedFiles)\n      } else {\n        handleChange(files)\n      }\n    },\n    [setFiles, fileHandler, handleChange]\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 (fileHandler) {\n        handleChangeAsync(files)\n      } else {\n        handleChange(files)\n      }\n    },\n    [handleBlur, handleFocus, fileHandler, handleChangeAsync, handleChange]\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        onFileClick={onFileClick}\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\nexport function transformFiles(value: UploadValue) {\n  if (Array.isArray(value)) {\n    if (value.length === 0) {\n      return undefined\n    }\n\n    value.map((item) => {\n      if (item?.file && !(item.file instanceof File)) {\n        // To support session storage, we recreated the file blob.\n        item['file'] = new File([], item['name'])\n      }\n      return item\n    })\n  }\n\n  return value\n}\n"],"mappings":"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"}

package/extensions/forms/FieldBlock/FieldBlock.js

@@ -10,7 +10,6 @@ import React, { useMemo, useContext, useCallback, useRef, useReducer, useEffect
 import classnames from 'classnames';
 import FieldBlockContext from './FieldBlockContext';
 import DataContext from '../DataContext/Context';
-import IterateElementContext from '../Iterate/IterateItemContext';
 import { Space, FormLabel, FormStatus } from '../../../components';
 import { Ul, Li } from '../../../elements';
 import { convertJsxToString, findElementInChildren } from '../../../shared/component-helper';
@@ -20,6 +19,7 @@ import SubmitIndicator from '../Form/SubmitIndicator/SubmitIndicator';
 import { createSharedState } from '../../../shared/helpers/useSharedState';
 import useTranslation from '../hooks/useTranslation';
 import { FormError } from '../utils';
+import { useIterateItemNo } from '../Iterate/ItemNo/useIItemNo';
 export const states = ['error', 'info', 'warning'];
 function FieldBlock(props) {
   var _props$id;
@@ -59,12 +59,8 @@ function FieldBlock(props) {
     rest = _objectWithoutProperties(_Object$assign, _excluded);
   const hasCustomWidth = /\d(rem)$/.test(String(width));
   const hasCustomContentWidth = /\d(rem)$/.test(String(contentWidth));
-  const iterateItemContext = useContext(IterateElementContext);
-  const {
-    index: iterateIndex
-  } = iterateItemContext !== null && iterateItemContext !== void 0 ? iterateItemContext : {};
   const blockId = useId(props.id);
-  const [wasUpdated, forceUpdate] = useReducer(() => ({}), {});
+  const [salt, forceUpdate] = useReducer(() => ({}), {});
   const mountedFieldsRef = useRef({});
   const fieldStateRef = useRef(null);
   const stateRecordRef = useRef({});
@@ -73,33 +69,11 @@ function FieldBlock(props) {
   const hasInitiallyErrorProp = useMemo(() => {
     return Boolean(errorProp);
   }, []);
-  const {
-    optionalLabelSuffix
-  } = useTranslation().Field;
-  const labelSuffixText = useMemo(() => {
-    if (required === false || typeof labelSuffix !== 'undefined') {
-      return labelSuffix !== null && labelSuffix !== void 0 ? labelSuffix : optionalLabelSuffix;
-    }
-    return '';
-  }, [required, labelSuffix, optionalLabelSuffix]);
-  const label = useMemo(() => {
-    let content = labelProp;
-    if (iterateIndex !== undefined) {
-      content = convertJsxToString(labelProp).replace('{itemNo}', String(iterateIndex + 1));
-    }
-    if (labelSuffixText) {
-      if (convertJsxToString(content).includes(optionalLabelSuffix)) {
-        return content;
-      }
-      if (typeof content === 'string') {
-        return content + ' ' + labelSuffixText;
-      }
-      if (React.isValidElement(content)) {
-        return React.createElement(React.Fragment, null, content, ' ', labelSuffixText);
-      }
-    }
-    return content;
-  }, [iterateIndex, labelProp, labelSuffixText, optionalLabelSuffix]);
+  const label = useIterateItemNo({
+    label: labelProp,
+    labelSuffix,
+    required
+  });
   const setInternalRecord = useCallback(props => {
     const {
       stateId,
@@ -123,14 +97,15 @@ function FieldBlock(props) {
       stateRecordRef.current[identifier].push(props);
     }
   }, []);
+  const setBlockRecordNested = nestedFieldBlockContext === null || nestedFieldBlockContext === void 0 ? void 0 : nestedFieldBlockContext.setBlockRecord;
   const setBlockRecord = useCallback(props => {
-    if (nestedFieldBlockContext) {
-      nestedFieldBlockContext.setBlockRecord(props);
+    if (setBlockRecordNested) {
+      setBlockRecordNested(props);
       return;
     }
     setInternalRecord(props);
     forceUpdate();
-  }, [nestedFieldBlockContext, setInternalRecord]);
+  }, [setBlockRecordNested, setInternalRecord]);
   const setFieldState = useCallback((identifier, fieldState) => {
     if (fieldState !== fieldStateRef.current) {
       fieldStateRef.current = fieldState;
@@ -252,8 +227,8 @@ function FieldBlock(props) {
         }
       }
       return acc;
-    }, {});
-  }, [info, warning, errorProp, nestedFieldBlockContext, setInternalRecord, blockId, wasUpdated]);
+    }, salt);
+  }, [errorProp, warning, info, salt, setInternalRecord, blockId, hasInitiallyErrorProp, props.id, forId, label]);
   useEffect(() => {
     if (!nestedFieldBlockContext) {
       showFieldError(blockId, Boolean(errorProp));
@@ -272,6 +247,7 @@ function FieldBlock(props) {
     nestedFieldBlockContext
   });
   const labelProps = {
+    id: `${id}-label`,
     className: 'dnb-forms-field-block__label',
     element: enableFieldset ? 'legend' : 'label',
     forId: enableFieldset ? undefined : forId,