@dnb/eufemia 10.62.3 → 10.63.0

package/es/extensions/forms/Field/Slider/Slider.js

@@ -33,6 +33,7 @@ function SliderComponent(props) {
   const {
     id,
     path,
+    itemPath,
     step = 1,
     min = 0,
     max = 100,
@@ -58,13 +59,13 @@ function SliderComponent(props) {
     omitMultiplePathWarning: true
   });
   useMemo(() => {
-    if (path && numberFormat) {
+    if ((path || itemPath) && numberFormat) {
       const {
         number
       } = getFormattedNumber(value, numberFormat);
-      setDisplayValue(path, number);
+      setDisplayValue(number);
     }
-  }, [numberFormat, path, setDisplayValue, value]);
+  }, [itemPath, numberFormat, path, setDisplayValue, value]);
   const handleLocalChange = useCallback(({
     value
   }) => {

package/es/extensions/forms/Field/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","names":["React","useCallback","useContext","useMemo","useRef","FieldBlock","useFieldProps","getFormattedNumber","Slider","pickSpacingProps","DataContext","useDataValue","SliderComponent","props","_ref","_ref2","_props$paths","dataContextRef","current","getSourceValue","getValues","source","Array","isArray","map","s","value","paths","path","defaultValue","preparedProps","_objectSpread","step","min","max","id","width","hasError","disabled","vertical","reverse","hideButtons","multiThumbBehavior","thumbTitle","subtractTitle","addTitle","numberFormat","tooltip","alwaysShowTooltip","extensions","handleChange","handleFocus","handleBlur","setDisplayValue","omitMultiplePathWarning","number","handleLocalChange","forEach","i","updateDataValue","fieldBlockProps","forId","sliderProps","status","undefined","on_change","on_drag_start","on_drag_end","stretch","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Slider/Slider.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo, useRef } from 'react'\nimport FieldBlock, {\n  Props as FieldBlockProps,\n  FieldBlockWidth,\n} from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { FieldProps, Path } from '../../types'\nimport { getFormattedNumber } from '../../../../components/slider/SliderHelpers'\nimport Slider, { SliderProps } from '../../../../components/Slider'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport DataContext, { ContextState } from '../../DataContext/Context'\nimport useDataValue from '../../hooks/useDataValue'\n\nexport type SliderVisibilityEvent = React.MouseEvent<HTMLButtonElement> & {\n  value: string\n}\n\nexport type SliderValue = number | Array<number>\nexport type Props = FieldProps<SliderValue> & {\n  /**\n   * Define an array with JSON Pointers for multiple thumb buttons.\n   */\n  paths?: Array<Path>\n  step?: SliderProps['step'] | Path\n  min?: SliderProps['min'] | Path\n  max?: SliderProps['max'] | Path\n  vertical?: SliderProps['vertical']\n  reverse?: SliderProps['reverse']\n  hideButtons?: SliderProps['hideButtons']\n  multiThumbBehavior?: SliderProps['multiThumbBehavior']\n  thumbTitle?: SliderProps['thumbTitle']\n  subtractTitle?: SliderProps['subtractTitle']\n  addTitle?: SliderProps['addTitle']\n  numberFormat?: SliderProps['numberFormat']\n  tooltip?: SliderProps['tooltip']\n  alwaysShowTooltip?: SliderProps['alwaysShowTooltip']\n  extensions?: SliderProps['extensions']\n\n  /** Styling */\n  width?: FieldBlockWidth\n}\n\nfunction SliderComponent(props: Props) {\n  const dataContextRef = useRef<ContextState>()\n  dataContextRef.current = useContext<ContextState>(DataContext)\n\n  const { getSourceValue } = useDataValue()\n  const getValues = useCallback(\n    (source: SliderValue | Path | Array<Path>) => {\n      if (Array.isArray(source)) {\n        return source.map((s) => getSourceValue(s) || 0)\n      }\n\n      return getSourceValue(source) || 0\n    },\n    [getSourceValue]\n  )\n\n  const value = getValues(\n    props.paths ?? props.path ?? props.value ?? props.defaultValue\n  )\n  const preparedProps = {\n    ...props,\n    step: getSourceValue(props.step),\n    min: getSourceValue(props.min),\n    max: getSourceValue(props.max),\n  }\n\n  const {\n    id,\n    path,\n    step = 1,\n    min = 0,\n    max = 100,\n    width = 'stretch',\n    hasError,\n    disabled,\n    vertical,\n    reverse,\n    hideButtons,\n    multiThumbBehavior,\n    thumbTitle,\n    subtractTitle,\n    addTitle,\n    numberFormat,\n    tooltip,\n    alwaysShowTooltip,\n    extensions,\n    handleChange,\n    handleFocus,\n    handleBlur,\n    setDisplayValue,\n  } = useFieldProps(preparedProps, {\n    omitMultiplePathWarning: true,\n  })\n\n  useMemo(() => {\n    if (path && numberFormat) {\n      const { number } = getFormattedNumber(value, numberFormat)\n      setDisplayValue(path, number)\n    }\n  }, [numberFormat, path, setDisplayValue, value])\n\n  const handleLocalChange = useCallback(\n    ({ value }: { value: number | number[] }) => {\n      if (Array.isArray(props.paths) && Array.isArray(value)) {\n        value.forEach((value, i) => {\n          dataContextRef.current.updateDataValue(props.paths[i], value)\n        })\n      }\n\n      handleChange?.(value)\n    },\n    [handleChange, props.paths]\n  )\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    width,\n    ...pickSpacingProps(props),\n  }\n\n  const sliderProps: SliderProps = {\n    value,\n    step,\n    min,\n    max,\n    disabled,\n    status: hasError ? 'error' : undefined,\n    on_change: handleLocalChange,\n    on_drag_start: handleFocus,\n    on_drag_end: handleBlur,\n    vertical,\n    reverse,\n    hideButtons,\n    multiThumbBehavior,\n    thumbTitle,\n    subtractTitle,\n    addTitle,\n    numberFormat,\n    tooltip,\n    alwaysShowTooltip,\n    extensions,\n    stretch: true,\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps}>\n      <Slider {...sliderProps} />\n    </FieldBlock>\n  )\n}\n\nexport default SliderComponent\n\nSliderComponent._supportsSpacingProps = true\n"],"mappings":"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"}
+{"version":3,"file":"Slider.js","names":["React","useCallback","useContext","useMemo","useRef","FieldBlock","useFieldProps","getFormattedNumber","Slider","pickSpacingProps","DataContext","useDataValue","SliderComponent","props","_ref","_ref2","_props$paths","dataContextRef","current","getSourceValue","getValues","source","Array","isArray","map","s","value","paths","path","defaultValue","preparedProps","_objectSpread","step","min","max","id","itemPath","width","hasError","disabled","vertical","reverse","hideButtons","multiThumbBehavior","thumbTitle","subtractTitle","addTitle","numberFormat","tooltip","alwaysShowTooltip","extensions","handleChange","handleFocus","handleBlur","setDisplayValue","omitMultiplePathWarning","number","handleLocalChange","forEach","i","updateDataValue","fieldBlockProps","forId","sliderProps","status","undefined","on_change","on_drag_start","on_drag_end","stretch","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Slider/Slider.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo, useRef } from 'react'\nimport FieldBlock, {\n  Props as FieldBlockProps,\n  FieldBlockWidth,\n} from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { FieldProps, Path } from '../../types'\nimport { getFormattedNumber } from '../../../../components/slider/SliderHelpers'\nimport Slider, { SliderProps } from '../../../../components/Slider'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport DataContext, { ContextState } from '../../DataContext/Context'\nimport useDataValue from '../../hooks/useDataValue'\n\nexport type SliderVisibilityEvent = React.MouseEvent<HTMLButtonElement> & {\n  value: string\n}\n\nexport type SliderValue = number | Array<number>\nexport type Props = FieldProps<SliderValue> & {\n  /**\n   * Define an array with JSON Pointers for multiple thumb buttons.\n   */\n  paths?: Array<Path>\n  step?: SliderProps['step'] | Path\n  min?: SliderProps['min'] | Path\n  max?: SliderProps['max'] | Path\n  vertical?: SliderProps['vertical']\n  reverse?: SliderProps['reverse']\n  hideButtons?: SliderProps['hideButtons']\n  multiThumbBehavior?: SliderProps['multiThumbBehavior']\n  thumbTitle?: SliderProps['thumbTitle']\n  subtractTitle?: SliderProps['subtractTitle']\n  addTitle?: SliderProps['addTitle']\n  numberFormat?: SliderProps['numberFormat']\n  tooltip?: SliderProps['tooltip']\n  alwaysShowTooltip?: SliderProps['alwaysShowTooltip']\n  extensions?: SliderProps['extensions']\n\n  /** Styling */\n  width?: FieldBlockWidth\n}\n\nfunction SliderComponent(props: Props) {\n  const dataContextRef = useRef<ContextState>()\n  dataContextRef.current = useContext<ContextState>(DataContext)\n\n  const { getSourceValue } = useDataValue()\n  const getValues = useCallback(\n    (source: SliderValue | Path | Array<Path>) => {\n      if (Array.isArray(source)) {\n        return source.map((s) => getSourceValue(s) || 0)\n      }\n\n      return getSourceValue(source) || 0\n    },\n    [getSourceValue]\n  )\n\n  const value = getValues(\n    props.paths ?? props.path ?? props.value ?? props.defaultValue\n  )\n  const preparedProps = {\n    ...props,\n    step: getSourceValue(props.step),\n    min: getSourceValue(props.min),\n    max: getSourceValue(props.max),\n  }\n\n  const {\n    id,\n    path,\n    itemPath,\n    step = 1,\n    min = 0,\n    max = 100,\n    width = 'stretch',\n    hasError,\n    disabled,\n    vertical,\n    reverse,\n    hideButtons,\n    multiThumbBehavior,\n    thumbTitle,\n    subtractTitle,\n    addTitle,\n    numberFormat,\n    tooltip,\n    alwaysShowTooltip,\n    extensions,\n    handleChange,\n    handleFocus,\n    handleBlur,\n    setDisplayValue,\n  } = useFieldProps(preparedProps, {\n    omitMultiplePathWarning: true,\n  })\n\n  useMemo(() => {\n    if ((path || itemPath) && numberFormat) {\n      const { number } = getFormattedNumber(value, numberFormat)\n      setDisplayValue(number)\n    }\n  }, [itemPath, numberFormat, path, setDisplayValue, value])\n\n  const handleLocalChange = useCallback(\n    ({ value }: { value: number | number[] }) => {\n      if (Array.isArray(props.paths) && Array.isArray(value)) {\n        value.forEach((value, i) => {\n          dataContextRef.current.updateDataValue(props.paths[i], value)\n        })\n      }\n\n      handleChange?.(value)\n    },\n    [handleChange, props.paths]\n  )\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    width,\n    ...pickSpacingProps(props),\n  }\n\n  const sliderProps: SliderProps = {\n    value,\n    step,\n    min,\n    max,\n    disabled,\n    status: hasError ? 'error' : undefined,\n    on_change: handleLocalChange,\n    on_drag_start: handleFocus,\n    on_drag_end: handleBlur,\n    vertical,\n    reverse,\n    hideButtons,\n    multiThumbBehavior,\n    thumbTitle,\n    subtractTitle,\n    addTitle,\n    numberFormat,\n    tooltip,\n    alwaysShowTooltip,\n    extensions,\n    stretch: true,\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps}>\n      <Slider {...sliderProps} />\n    </FieldBlock>\n  )\n}\n\nexport default SliderComponent\n\nSliderComponent._supportsSpacingProps = true\n"],"mappings":"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"}

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

@@ -106,8 +106,8 @@ function StringComponent(props) {
   } = useFieldProps(preparedProps);
   useEffect(() => {
     var _innerRef$current;
-    setDisplayValue(props.path, (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.value);
-  }, [innerRef, props.path, setDisplayValue, value]);
+    setDisplayValue((_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.value);
+  }, [innerRef, setDisplayValue, value]);
   const transformInstantly = useCallback(value => props.capitalize ? toCapitalized(value) : value, [props.capitalize]);
   const {
     handleSubmit

package/es/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","_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","_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/es/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,
@@ -53,9 +53,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':
@@ -64,7 +74,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/es/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","checked","handleToggleChange","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":";;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACnD,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,QAAQ,EAAEC,YAAY,QAAQ,wBAAwB;AAC/D,OAAOC,SAAS,MAAM,sBAAsB;AAC5C,OAAOC,UAAU,MAAoC,kBAAkB;AACvE,SAASC,aAAa,QAAQ,aAAa;AAE3C,SAASC,gBAAgB,QAAQ,mCAAmC;AACpE,OAAOC,wBAAwB,MAAM,+DAA+D;AACpG,OAAOC,cAAc,MAAM,4BAA4B;AAavD,SAASC,MAAMA,CAACC,KAAY,EAAE;EAC5B,MAAMC,YAAY,GAAGH,cAAc,CAAC,CAAC,CAACI,WAAW;EAEjD,MAAMC,aAAoB,GAAAC,aAAA,CAAAA,aAAA,KACrBJ,KAAK;IACRK,aAAa,EAAEL,KAAK,CAACK;EAAa,EACnC;EAED,MAAM;IACJC,EAAE;IACFC,SAAS;IACTC,OAAO;IACPC,QAAQ;IACRC,OAAO;IACPC,QAAQ;IACRC,KAAK;IACLC,MAAM;IACNC,OAAO;IACPC,KAAK;IACLC,QAAQ;IACRC,cAAc;IACdC,YAAY;IACZC;EACF,CAAC,GAAGxB,aAAa,CAACQ,aAAa,CAAC;EAEhC,MAAMiB,oBAAoB,GAAGhC,WAAW,CACtC,CAAC;IAAEiC;EAAQ,CAAC,KAAK;IACfH,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAGG,OAAO,GAAGb,OAAO,GAAGC,QAAQ,CAAC;EAC9C,CAAC,EACD,CAACS,YAAY,EAAEV,OAAO,EAAEC,QAAQ,CAClC,CAAC;EACD,MAAMa,kBAAkB,GAAGlC,WAAW,CACpC,CAAC;IAAE2B;EAAM,CAAC,KAAK;IACbG,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAGH,KAAK,KAAK,IAAI,GAAGP,OAAO,GAAGC,QAAQ,CAAC;EACrD,CAAC,EACD,CAACS,YAAY,EAAEV,OAAO,EAAEC,QAAQ,CAClC,CAAC;EAED,MAAMc,EAAE,GAAGjC,UAAU,CAAC,wBAAwB,EAAEiB,SAAS,CAAC;EAE1D,MAAMiB,eAAgC,GAAApB,aAAA;IACpCqB,KAAK,EAAEnB,EAAE;IACTC,SAAS,EAAEgB,EAAE;IACbZ;EAAQ,GACLf,gBAAgB,CAACI,KAAK,CAAC,CAC3B;EAED,MAAM0B,IAAI,GAAGX,KAAK,KAAKP,OAAO;EAC9B,MAAMmB,KAAK,GAAGZ,KAAK,KAAKN,QAAQ;EAEhCpB,OAAO,CAAC,MAAM;IACZ,MAAMuC,IAAI,GAAGF,IAAI,GAAGb,MAAM,GAAGC,OAAO;IACpC,IAAIc,IAAI,EAAE;MACRT,eAAe,CAACnB,KAAK,CAAC6B,IAAI,EAAED,IAAI,CAAC;IACnC;EACF,CAAC,EAAE,CAACF,IAAI,EAAE1B,KAAK,CAAC6B,IAAI,EAAEV,eAAe,EAAEL,OAAO,EAAED,MAAM,CAAC,CAAC;EAExD,QAAQH,OAAO;IACb;IACA,KAAK,UAAU;MACb,OACEvB,KAAA,CAAA2C,aAAA,CAACpC,UAAU,EAAAqC,QAAA,KAAKP,eAAe;QAAEZ,KAAK,EAAEoB;MAAU,IAChD7C,KAAA,CAAA2C,aAAA,CAACvC,QAAQ,EAAAwC,QAAA;QACPzB,EAAE,EAAEA,EAAG;QACPC,SAAS,EAAEgB,EAAG;QACdX,KAAK,EACHA,KAAK,aAALA,KAAK,cAALA,KAAK,GACJc,IAAI,GACDb,MAAM,aAANA,MAAM,cAANA,MAAM,GAAIZ,YAAY,CAACgC,GAAG,GAC1BnB,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIb,YAAY,CAACiC,EAC7B;QACDb,OAAO,EAAEK,IAAK;QACdf,QAAQ,EAAEA,QAAS;QACnBwB,MAAM,EAAEnB,QAAQ,GAAG,OAAO,GAAGgB,SAAU;QACvCI,QAAQ,EAAEhB;MAAqB,GAC3BH,cAAc,CACnB,CACS,CAAC;IAEjB,KAAK,QAAQ;MACX,OACE9B,KAAA,CAAA2C,aAAA,CAACpC,UAAU,EAAK8B,eAAe,EAC7BrC,KAAA,CAAA2C,aAAA,CAACtC,YAAY,EAAAuC,QAAA;QACXzB,EAAE,EAAEA,EAAG;QACPsB,IAAI,EACFF,IAAI,GACAb,MAAM,aAANA,MAAM,cAANA,MAAM,GAAIZ,YAAY,CAACgC,GAAG,GAC1BnB,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIb,YAAY,CAACiC,EAC7B;QACDb,OAAO,EAAEK,IAAK;QACdf,QAAQ,EAAEA,QAAS;QACnBwB,MAAM,EAAEnB,QAAQ,GAAG,OAAO,GAAGgB,SAAU;QACvCjB,KAAK,EAAEA,KAAK,GAAG,MAAM,GAAG,OAAQ;QAChCsB,SAAS,EAAEjB;MAAqB,GAC5BH,cAAc,CACnB,CACS,CAAC;IAEjB,KAAK,SAAS;MACZ,OACE9B,KAAA,CAAA2C,aAAA,CAACpC,UAAU,EAAAqC,QAAA,KAAKP,eAAe;QAAEc,UAAU;MAAA,IACzCnD,KAAA,CAAA2C,aAAA,CAACrC,SAAS;QAAC8C,MAAM,EAAC;MAAS,GACzBpD,KAAA,CAAA2C,aAAA,CAACjC,wBAAwB,CAAC2C,QAAQ;QAChCzB,KAAK,EAAE;UACLA,KAAK,EAAEW,IAAI,GAAG,IAAI,GAAGC,KAAK,GAAG,KAAK,GAAG,IAAI;UACzCS,QAAQ,EAAEd,kBAAkB;UAC5Ba,MAAM,EAAEnB,QAAQ,GAAG,OAAO,GAAGgB,SAAS;UACtCrB;QACF;MAAE,GAEFxB,KAAA,CAAA2C,aAAA,CAACtC,YAAY,EAAAuC,QAAA;QACXH,IAAI,EAAEf,MAAM,aAANA,MAAM,cAANA,MAAM,GAAIZ,YAAY,CAACgC,GAAI;QACjClB,KAAK,EAAC;MAAI,GACNE,cAAc,CACnB,CAAC,EACF9B,KAAA,CAAA2C,aAAA,CAACtC,YAAY,EAAAuC,QAAA;QACXH,IAAI,EAAEd,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIb,YAAY,CAACiC,EAAG;QACjCnB,KAAK,EAAC;MAAK,GACPE,cAAc,CACnB,CACgC,CAC1B,CACD,CAAC;IAEjB,KAAK,iBAAiB;MACpB,OACE9B,KAAA,CAAA2C,aAAA,CAACpC,UAAU,EAAK8B,eAAe,EAC7BrC,KAAA,CAAA2C,aAAA,CAACtC,YAAY,EAAAuC,QAAA;QACXzB,EAAE,EAAEA,EAAG;QACPI,OAAO,EAAC,UAAU;QAClBkB,IAAI,EACFF,IAAI,GACAb,MAAM,aAANA,MAAM,cAANA,MAAM,GAAIZ,YAAY,CAACgC,GAAG,GAC1BnB,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIb,YAAY,CAACiC,EAC7B;QACDb,OAAO,EAAEK,IAAK;QACdf,QAAQ,EAAEA,QAAS;QACnBwB,MAAM,EAAEnB,QAAQ,GAAG,OAAO,GAAGgB,SAAU;QACvCjB,KAAK,EAAEA,KAAK,GAAG,MAAM,GAAG,OAAQ;QAChCsB,SAAS,EAAEjB;MAAqB,GAC5BH,cAAc,CACnB,CACS,CAAC;EAEnB;AACF;AAEAlB,MAAM,CAAC0C,qBAAqB,GAAG,IAAI;AACnC,eAAe1C,MAAM"}
+{"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","checked","handleToggleChange","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/es/extensions/forms/Field/Upload/Upload.js

@@ -31,15 +31,6 @@ const validateRequired = (value, {
   }
   return undefined;
 };
-const updateFileLoadingState = (files, {
-  isLoading
-} = {
-  isLoading: false
-}) => {
-  return files.map(file => _objectSpread(_objectSpread({}, file), {}, {
-    isLoading
-  }));
-};
 function UploadComponent(props) {
   const sharedTr = useSharedTranslation().Upload;
   const formsTr = useFormsTranslation().Upload;
@@ -99,25 +90,35 @@ 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(({
         id
       }) => 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(({

package/es/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","required","isChanged","error","hasError","some","file","errorMessage","hasFiles","length","undefined","updateFileLoadingState","files","isLoading","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","updatedFiles","slice","changeHandler","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","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","updatedFiles","slice","changeHandler","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/es/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;
@@ -246,8 +221,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));
@@ -266,6 +241,7 @@ function FieldBlock(props) {
     nestedFieldBlockContext
   });
   const labelProps = {
+    id: `${id}-label`,
     className: 'dnb-forms-field-block__label',
     element: enableFieldset ? 'legend' : 'label',
     forId: enableFieldset ? undefined : forId,