@dnb/eufemia 10.65.1 → 10.66.1

package/es/extensions/forms/Field/Date/Date.d.ts

@@ -21,7 +21,7 @@ export type DateProps = Omit<FieldProps<string, undefined | string>, 'onBlurVali
      */
     showResetButton?: DatePickerProps['showResetButton'];
     onBlurValidator?: ValidatorDisableable<string>;
-} & Pick<DatePickerProps, 'month' | 'startMonth' | 'endMonth' | 'minDate' | 'maxDate' | 'correctInvalidDate' | 'maskOrder' | 'maskPlaceholder' | 'dateFormat' | 'returnFormat' | 'hideNavigation' | 'hideDays' | 'onlyMonth' | 'hideLastWeek' | 'disableAutofocus' | 'showSubmitButton' | 'submitButtonText' | 'cancelButtonText' | 'resetButtonText' | 'firstDay' | 'link' | 'size' | 'sync' | 'addonElement' | 'shortcuts' | 'opened' | 'direction' | 'alignPicker' | 'onDaysRender' | 'onType' | 'onShow' | 'onHide' | 'onSubmit' | 'onCancel' | 'onReset'>;
+} & Pick<DatePickerProps, 'month' | 'startMonth' | 'endMonth' | 'minDate' | 'maxDate' | 'correctInvalidDate' | 'maskOrder' | 'maskPlaceholder' | 'dateFormat' | 'returnFormat' | 'hideNavigation' | 'hideDays' | 'onlyMonth' | 'hideLastWeek' | 'disableAutofocus' | 'showSubmitButton' | 'submitButtonText' | 'cancelButtonText' | 'resetButtonText' | 'firstDay' | 'link' | 'size' | 'sync' | 'addonElement' | 'shortcuts' | 'opened' | 'direction' | 'alignPicker' | 'onDaysRender' | 'onType' | 'onShow' | 'onHide' | 'onSubmit' | 'onCancel' | 'onReset' | 'skipPortal'>;
 declare function DateComponent(props: DateProps): import("react/jsx-runtime").JSX.Element;
 declare namespace DateComponent {
     var _supportsSpacingProps: boolean;

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

@@ -241,7 +241,7 @@ function validateDateLimit(_ref) {
   }
   return messages;
 }
-const datePickerPropKeys = ['month', 'startMonth', 'endMonth', 'minDate', 'maxDate', 'correctInvalidDate', 'maskOrder', 'maskPlaceholder', 'dateFormat', 'returnFormat', 'hideNavigation', 'hideDays', 'onlyMonth', 'hideLastWeek', 'disableAutofocus', 'showSubmitButton', 'submitButtonText', 'cancelButtonText', 'resetButtonText', 'firstDay', 'link', 'size', 'sync', 'addonElement', 'shortcuts', 'opened', 'direction', 'alignPicker', 'onDaysRender', 'showInput', 'onDaysRender', 'onType', 'onShow', 'onHide', 'onSubmit', 'onCancel', 'onReset'];
+const datePickerPropKeys = ['month', 'startMonth', 'endMonth', 'minDate', 'maxDate', 'correctInvalidDate', 'maskOrder', 'maskPlaceholder', 'dateFormat', 'returnFormat', 'hideNavigation', 'hideDays', 'onlyMonth', 'hideLastWeek', 'disableAutofocus', 'showSubmitButton', 'submitButtonText', 'cancelButtonText', 'resetButtonText', 'firstDay', 'link', 'size', 'sync', 'addonElement', 'shortcuts', 'opened', 'direction', 'alignPicker', 'onDaysRender', 'showInput', 'onDaysRender', 'onType', 'onShow', 'onHide', 'onSubmit', 'onCancel', 'onReset', 'skipPortal'];
 function pickDatePickerProps(props) {
   const datePickerProps = Object.keys(props).reduce((datePickerProps, key) => {
     if (datePickerPropKeys.includes(key)) {

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

@@ -1 +1 @@
-{"version":3,"file":"Date.js","names":["React","useCallback","useContext","useMemo","DatePicker","useFieldProps","pickSpacingProps","classnames","FieldBlock","SharedContext","parseISO","isValid","isBefore","isAfter","useTranslation","formatDate","convertStringToDate","FormError","DateComponent","props","_props$validateInitia","errorRequired","label","defaultLabel","Date","locale","errorMessages","_objectSpread","schema","_props$schema","type","pattern","validateRequired","value","required","error","undefined","dateLimitValidator","res","validateDateLimit","minDate","maxDate","isRange","range","onBlurValidator","hasDateLimitAndValue","Boolean","preparedProps","fromInput","date","start_date","end_date","validateInitially","exportValidators","_useFieldProps","id","path","itemPath","className","valueProp","hasError","disabled","htmlAttributes","handleFocus","handleBlur","handleChange","setDisplayValue","showCancelButton","showResetButton","showInput","onReset","rest","_objectWithoutProperties","_excluded","datePickerProps","pickDatePickerProps","startDate","endDate","parseRangeValue","fieldBlockProps","forId","createElement","_extends","status","onChange","event","onFocus","onBlur","split","map","test","_ref","dates","_excluded2","startDateParsed","endDateParsed","isoDates","toISOString","options","variant","messageValues","messages","push","datePickerPropKeys","Object","keys","reduce","key","includes","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Date/Date.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo } from 'react'\nimport { DatePicker } from '../../../../components'\nimport { useFieldProps } from '../../hooks'\nimport type {\n  FieldProps,\n  AllJSONSchemaVersions,\n  ValidatorDisableable,\n} from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport classnames from 'classnames'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport SharedContext from '../../../../shared/Context'\nimport { parseISO, isValid, isBefore, isAfter } from 'date-fns'\nimport useTranslation from '../../hooks/useTranslation'\nimport { FormatDateOptions, formatDate } from '../../Value/Date'\nimport {\n  DatePickerEvent,\n  DatePickerProps,\n} from '../../../../components/DatePicker'\nimport { convertStringToDate } from '../../../../components/date-picker/DatePickerCalc'\nimport { ProviderProps } from '../../../../shared/Provider'\nimport { FormError } from '../../utils'\n\n// `range`, `showInput`, `showCancelButton` and `showResetButton` are not picked from the `DatePickerProps`\n// Since they require `Field.Date` specific comments, due to them having different default values\nexport type DateProps = Omit<\n  FieldProps<string, undefined | string>,\n  'onBlurValidator'\n> & {\n  // Validation\n  pattern?: string\n  /**\n   * Defines if the Date field should support a value of two dates (starting and ending date).\n   * The value needs to be a string containing two dates, separated by a pipe character (`|`) i.e. (`01-09-2024|30-09-2024`) when this is set to `true`.\n   * Defaults to `false`.\n   */\n  range?: DatePickerProps['range']\n  /**\n   * If the input fields with the mask should be visible. Defaults to `true`.\n   */\n  showInput?: DatePickerProps['showInput']\n\n  /**\n   * If set to `true`, a cancel button will be shown. You can change the default text by using `cancel_button_text=\"Avbryt\"` Defaults to `true`. If the `range` prop is `true`, then the cancel button is shown.\n   */\n  showCancelButton?: DatePickerProps['showCancelButton']\n  /**\n   * If set to `true`, a reset button will be shown. You can change the default text by using `reset_button_text=\"Tilbakestill\"` Defaults to `true`.\n   */\n  showResetButton?: DatePickerProps['showResetButton']\n  onBlurValidator?: ValidatorDisableable<string>\n} & Pick<\n    DatePickerProps,\n    | 'month'\n    | 'startMonth'\n    | 'endMonth'\n    | 'minDate'\n    | 'maxDate'\n    | 'correctInvalidDate'\n    | 'maskOrder'\n    | 'maskPlaceholder'\n    | 'dateFormat'\n    | 'returnFormat'\n    | 'hideNavigation'\n    | 'hideDays'\n    | 'onlyMonth'\n    | 'hideLastWeek'\n    | 'disableAutofocus'\n    | 'showSubmitButton'\n    | 'submitButtonText'\n    | 'cancelButtonText'\n    | 'resetButtonText'\n    | 'firstDay'\n    | 'link'\n    | 'size'\n    | 'sync'\n    | 'addonElement'\n    | 'shortcuts'\n    | 'opened'\n    | 'direction'\n    | 'alignPicker'\n    | 'onDaysRender'\n    | 'onType'\n    | 'onShow'\n    | 'onHide'\n    | 'onSubmit'\n    | 'onCancel'\n    | 'onReset'\n  >\n\nfunction DateComponent(props: DateProps) {\n  const { errorRequired, label: defaultLabel } = useTranslation().Date\n  const { locale } = useContext(SharedContext)\n\n  const errorMessages = useMemo(() => {\n    return {\n      'Field.errorRequired': errorRequired,\n      'Field.errorPattern': errorRequired,\n      ...props.errorMessages,\n    }\n  }, [props.errorMessages, errorRequired])\n\n  const schema = useMemo<AllJSONSchemaVersions>(\n    () =>\n      props.schema ?? {\n        type: 'string',\n        pattern: props.pattern,\n      },\n    [props.schema, props.pattern]\n  )\n\n  const validateRequired = useCallback(\n    (value: string, { required, error }) => {\n      if (required && (!value || !isValid(parseISO(value)))) {\n        return error\n      }\n\n      return undefined\n    },\n    []\n  )\n\n  const dateLimitValidator = useCallback(\n    (value: string) => {\n      const res = validateDateLimit({\n        value,\n        locale,\n        minDate: props.minDate,\n        maxDate: props.maxDate,\n        isRange: props.range,\n      })\n\n      return res\n    },\n    [props.maxDate, props.minDate, props.range, locale]\n  )\n\n  const onBlurValidator = useMemo(() => {\n    if (props.onBlurValidator === false) {\n      return undefined\n    }\n\n    if (props.onBlurValidator) {\n      return props.onBlurValidator\n    }\n\n    return dateLimitValidator\n  }, [props.onBlurValidator, dateLimitValidator])\n\n  const hasDateLimitAndValue = useMemo(() => {\n    return (props.minDate || props.maxDate) && Boolean(props.value)\n  }, [props.minDate, props.maxDate, props.value])\n\n  const preparedProps = {\n    ...props,\n    errorMessages,\n    schema,\n    fromInput: ({\n      date,\n      start_date,\n      end_date,\n    }: DatePickerEvent<React.ChangeEvent<HTMLInputElement>>) => {\n      return range ? `${start_date}|${end_date}` : date\n    },\n    validateRequired,\n    validateInitially: props.validateInitially ?? hasDateLimitAndValue,\n    onBlurValidator,\n    exportValidators: { dateLimitValidator },\n  }\n\n  const {\n    id,\n    path,\n    itemPath,\n    className,\n    label,\n    value: valueProp,\n    hasError,\n    disabled,\n    htmlAttributes,\n    handleFocus,\n    handleBlur,\n    handleChange,\n    setDisplayValue,\n    range,\n    showCancelButton = true,\n    showResetButton = true,\n    showInput = true,\n    onReset,\n    minDate,\n    maxDate,\n    ...rest\n  } = useFieldProps(preparedProps)\n\n  const datePickerProps = pickDatePickerProps(rest)\n\n  const { value, startDate, endDate } = useMemo(() => {\n    if (!range || !valueProp) {\n      return {\n        // Assign to null if falsy value, to properly clear input values\n        value: valueProp ?? null,\n        startDate: undefined,\n        endDate: undefined,\n      }\n    }\n\n    const [startDate, endDate] = parseRangeValue(valueProp)\n\n    return {\n      value: undefined,\n      startDate,\n      endDate,\n    }\n  }, [range, valueProp])\n\n  useMemo(() => {\n    if ((path || itemPath) && valueProp) {\n      setDisplayValue(formatDate(valueProp, { locale }), undefined)\n    }\n  }, [itemPath, locale, path, setDisplayValue, valueProp])\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    label: label ?? defaultLabel,\n    className: classnames('dnb-forms-field-string', className),\n    ...pickSpacingProps(props),\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps}>\n      <DatePicker\n        id={id}\n        date={value}\n        disabled={disabled}\n        showInput={showInput}\n        showCancelButton={showCancelButton}\n        showResetButton={showResetButton}\n        startDate={startDate}\n        endDate={endDate}\n        minDate={minDate}\n        maxDate={maxDate}\n        status={hasError ? 'error' : undefined}\n        range={range}\n        onChange={handleChange}\n        onReset={(event) => {\n          handleChange(event)\n          onReset?.(event)\n        }}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        {...datePickerProps}\n        {...htmlAttributes}\n      />\n    </FieldBlock>\n  )\n}\n\nfunction parseRangeValue(value: DateProps['value']) {\n  return (\n    value\n      .split('|')\n      // Assign to null if falsy value, to properly clear input values\n      .map((value) => (/(undefined|null)/.test(value) ? null : value))\n  )\n}\n\nfunction validateDateLimit({\n  value,\n  isRange,\n  locale,\n  ...dates\n}: {\n  value: DateProps['value']\n  minDate: DateProps['minDate']\n  maxDate: DateProps['maxDate']\n  isRange: DateProps['range']\n  locale: ProviderProps['locale']\n}) {\n  if ((!dates.minDate && !dates.maxDate) || !value) {\n    return\n  }\n\n  const [startDateParsed, endDateParsed] = parseRangeValue(value)\n\n  const minDate = convertStringToDate(dates.minDate)\n  const maxDate = convertStringToDate(dates.maxDate)\n\n  const startDate = convertStringToDate(startDateParsed)\n  const endDate = convertStringToDate(endDateParsed)\n\n  const isoDates = {\n    minDate:\n      dates.minDate instanceof Date\n        ? dates.minDate.toISOString()\n        : dates.minDate,\n    maxDate:\n      dates.maxDate instanceof Date\n        ? dates.maxDate.toISOString()\n        : dates.maxDate,\n  }\n\n  const options: FormatDateOptions = {\n    locale,\n    variant: 'long',\n  }\n\n  // Handle non range validation\n  if (!isRange) {\n    if (isBefore(startDate, minDate)) {\n      return new FormError('Date.errorMinDate', {\n        messageValues: { date: formatDate(isoDates.minDate, options) },\n      })\n    }\n\n    if (isAfter(startDate, maxDate)) {\n      return new FormError('Date.errorMaxDate', {\n        messageValues: { date: formatDate(isoDates.maxDate, options) },\n      })\n    }\n\n    return\n  }\n\n  const messages: Array<FormError> = []\n\n  // Start date validation\n  if (isBefore(startDate, minDate)) {\n    messages.push(\n      new FormError('Date.errorStartDateMinDate', {\n        messageValues: { date: formatDate(isoDates.minDate, options) },\n      })\n    )\n  }\n\n  if (isAfter(startDate, maxDate)) {\n    messages.push(\n      new FormError('Date.errorStartDateMaxDate', {\n        messageValues: { date: formatDate(isoDates.maxDate, options) },\n      })\n    )\n  }\n\n  // End date validation\n  if (isBefore(endDate, minDate)) {\n    messages.push(\n      new FormError('Date.errorEndDateMinDate', {\n        messageValues: { date: formatDate(isoDates.minDate, options) },\n      })\n    )\n  }\n\n  if (isAfter(endDate, maxDate)) {\n    messages.push(\n      new FormError('Date.errorEndDateMaxDate', {\n        messageValues: { date: formatDate(isoDates.maxDate, options) },\n      })\n    )\n  }\n\n  return messages\n}\n\n// Used to filter out DatePickerProps from the FieldProps.\n// Includes DatePickerProps that are not destructured in useFieldProps\nconst datePickerPropKeys = [\n  'month',\n  'startMonth',\n  'endMonth',\n  'minDate',\n  'maxDate',\n  'correctInvalidDate',\n  'maskOrder',\n  'maskPlaceholder',\n  'dateFormat',\n  'returnFormat',\n  'hideNavigation',\n  'hideDays',\n  'onlyMonth',\n  'hideLastWeek',\n  'disableAutofocus',\n  'showSubmitButton',\n  'submitButtonText',\n  'cancelButtonText',\n  'resetButtonText',\n  'firstDay',\n  'link',\n  'size',\n  'sync',\n  'addonElement',\n  'shortcuts',\n  'opened',\n  'direction',\n  'alignPicker',\n  'onDaysRender',\n  'showInput',\n  'onDaysRender',\n  'onType',\n  'onShow',\n  'onHide',\n  'onSubmit',\n  'onCancel',\n  'onReset',\n]\n\nfunction pickDatePickerProps(props: DateProps) {\n  const datePickerProps = Object.keys(props).reduce(\n    (datePickerProps, key) => {\n      if (datePickerPropKeys.includes(key)) {\n        datePickerProps[key] = props[key]\n      }\n\n      return datePickerProps\n    },\n    {}\n  )\n\n  return datePickerProps\n}\n\nDateComponent._supportsSpacingProps = true\nexport default DateComponent\n"],"mappings":"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"}
+{"version":3,"file":"Date.js","names":["React","useCallback","useContext","useMemo","DatePicker","useFieldProps","pickSpacingProps","classnames","FieldBlock","SharedContext","parseISO","isValid","isBefore","isAfter","useTranslation","formatDate","convertStringToDate","FormError","DateComponent","props","_props$validateInitia","errorRequired","label","defaultLabel","Date","locale","errorMessages","_objectSpread","schema","_props$schema","type","pattern","validateRequired","value","required","error","undefined","dateLimitValidator","res","validateDateLimit","minDate","maxDate","isRange","range","onBlurValidator","hasDateLimitAndValue","Boolean","preparedProps","fromInput","date","start_date","end_date","validateInitially","exportValidators","_useFieldProps","id","path","itemPath","className","valueProp","hasError","disabled","htmlAttributes","handleFocus","handleBlur","handleChange","setDisplayValue","showCancelButton","showResetButton","showInput","onReset","rest","_objectWithoutProperties","_excluded","datePickerProps","pickDatePickerProps","startDate","endDate","parseRangeValue","fieldBlockProps","forId","createElement","_extends","status","onChange","event","onFocus","onBlur","split","map","test","_ref","dates","_excluded2","startDateParsed","endDateParsed","isoDates","toISOString","options","variant","messageValues","messages","push","datePickerPropKeys","Object","keys","reduce","key","includes","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Date/Date.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo } from 'react'\nimport { DatePicker } from '../../../../components'\nimport { useFieldProps } from '../../hooks'\nimport type {\n  FieldProps,\n  AllJSONSchemaVersions,\n  ValidatorDisableable,\n} from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport classnames from 'classnames'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport SharedContext from '../../../../shared/Context'\nimport { parseISO, isValid, isBefore, isAfter } from 'date-fns'\nimport useTranslation from '../../hooks/useTranslation'\nimport { FormatDateOptions, formatDate } from '../../Value/Date'\nimport {\n  DatePickerEvent,\n  DatePickerProps,\n} from '../../../../components/DatePicker'\nimport { convertStringToDate } from '../../../../components/date-picker/DatePickerCalc'\nimport { ProviderProps } from '../../../../shared/Provider'\nimport { FormError } from '../../utils'\n\n// `range`, `showInput`, `showCancelButton` and `showResetButton` are not picked from the `DatePickerProps`\n// Since they require `Field.Date` specific comments, due to them having different default values\nexport type DateProps = Omit<\n  FieldProps<string, undefined | string>,\n  'onBlurValidator'\n> & {\n  // Validation\n  pattern?: string\n  /**\n   * Defines if the Date field should support a value of two dates (starting and ending date).\n   * The value needs to be a string containing two dates, separated by a pipe character (`|`) i.e. (`01-09-2024|30-09-2024`) when this is set to `true`.\n   * Defaults to `false`.\n   */\n  range?: DatePickerProps['range']\n  /**\n   * If the input fields with the mask should be visible. Defaults to `true`.\n   */\n  showInput?: DatePickerProps['showInput']\n\n  /**\n   * If set to `true`, a cancel button will be shown. You can change the default text by using `cancel_button_text=\"Avbryt\"` Defaults to `true`. If the `range` prop is `true`, then the cancel button is shown.\n   */\n  showCancelButton?: DatePickerProps['showCancelButton']\n  /**\n   * If set to `true`, a reset button will be shown. You can change the default text by using `reset_button_text=\"Tilbakestill\"` Defaults to `true`.\n   */\n  showResetButton?: DatePickerProps['showResetButton']\n  onBlurValidator?: ValidatorDisableable<string>\n} & Pick<\n    DatePickerProps,\n    | 'month'\n    | 'startMonth'\n    | 'endMonth'\n    | 'minDate'\n    | 'maxDate'\n    | 'correctInvalidDate'\n    | 'maskOrder'\n    | 'maskPlaceholder'\n    | 'dateFormat'\n    | 'returnFormat'\n    | 'hideNavigation'\n    | 'hideDays'\n    | 'onlyMonth'\n    | 'hideLastWeek'\n    | 'disableAutofocus'\n    | 'showSubmitButton'\n    | 'submitButtonText'\n    | 'cancelButtonText'\n    | 'resetButtonText'\n    | 'firstDay'\n    | 'link'\n    | 'size'\n    | 'sync'\n    | 'addonElement'\n    | 'shortcuts'\n    | 'opened'\n    | 'direction'\n    | 'alignPicker'\n    | 'onDaysRender'\n    | 'onType'\n    | 'onShow'\n    | 'onHide'\n    | 'onSubmit'\n    | 'onCancel'\n    | 'onReset'\n    | 'skipPortal'\n  >\n\nfunction DateComponent(props: DateProps) {\n  const { errorRequired, label: defaultLabel } = useTranslation().Date\n  const { locale } = useContext(SharedContext)\n\n  const errorMessages = useMemo(() => {\n    return {\n      'Field.errorRequired': errorRequired,\n      'Field.errorPattern': errorRequired,\n      ...props.errorMessages,\n    }\n  }, [props.errorMessages, errorRequired])\n\n  const schema = useMemo<AllJSONSchemaVersions>(\n    () =>\n      props.schema ?? {\n        type: 'string',\n        pattern: props.pattern,\n      },\n    [props.schema, props.pattern]\n  )\n\n  const validateRequired = useCallback(\n    (value: string, { required, error }) => {\n      if (required && (!value || !isValid(parseISO(value)))) {\n        return error\n      }\n\n      return undefined\n    },\n    []\n  )\n\n  const dateLimitValidator = useCallback(\n    (value: string) => {\n      const res = validateDateLimit({\n        value,\n        locale,\n        minDate: props.minDate,\n        maxDate: props.maxDate,\n        isRange: props.range,\n      })\n\n      return res\n    },\n    [props.maxDate, props.minDate, props.range, locale]\n  )\n\n  const onBlurValidator = useMemo(() => {\n    if (props.onBlurValidator === false) {\n      return undefined\n    }\n\n    if (props.onBlurValidator) {\n      return props.onBlurValidator\n    }\n\n    return dateLimitValidator\n  }, [props.onBlurValidator, dateLimitValidator])\n\n  const hasDateLimitAndValue = useMemo(() => {\n    return (props.minDate || props.maxDate) && Boolean(props.value)\n  }, [props.minDate, props.maxDate, props.value])\n\n  const preparedProps = {\n    ...props,\n    errorMessages,\n    schema,\n    fromInput: ({\n      date,\n      start_date,\n      end_date,\n    }: DatePickerEvent<React.ChangeEvent<HTMLInputElement>>) => {\n      return range ? `${start_date}|${end_date}` : date\n    },\n    validateRequired,\n    validateInitially: props.validateInitially ?? hasDateLimitAndValue,\n    onBlurValidator,\n    exportValidators: { dateLimitValidator },\n  }\n\n  const {\n    id,\n    path,\n    itemPath,\n    className,\n    label,\n    value: valueProp,\n    hasError,\n    disabled,\n    htmlAttributes,\n    handleFocus,\n    handleBlur,\n    handleChange,\n    setDisplayValue,\n    range,\n    showCancelButton = true,\n    showResetButton = true,\n    showInput = true,\n    onReset,\n    minDate,\n    maxDate,\n    ...rest\n  } = useFieldProps(preparedProps)\n\n  const datePickerProps = pickDatePickerProps(rest)\n\n  const { value, startDate, endDate } = useMemo(() => {\n    if (!range || !valueProp) {\n      return {\n        // Assign to null if falsy value, to properly clear input values\n        value: valueProp ?? null,\n        startDate: undefined,\n        endDate: undefined,\n      }\n    }\n\n    const [startDate, endDate] = parseRangeValue(valueProp)\n\n    return {\n      value: undefined,\n      startDate,\n      endDate,\n    }\n  }, [range, valueProp])\n\n  useMemo(() => {\n    if ((path || itemPath) && valueProp) {\n      setDisplayValue(formatDate(valueProp, { locale }), undefined)\n    }\n  }, [itemPath, locale, path, setDisplayValue, valueProp])\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    label: label ?? defaultLabel,\n    className: classnames('dnb-forms-field-string', className),\n    ...pickSpacingProps(props),\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps}>\n      <DatePicker\n        id={id}\n        date={value}\n        disabled={disabled}\n        showInput={showInput}\n        showCancelButton={showCancelButton}\n        showResetButton={showResetButton}\n        startDate={startDate}\n        endDate={endDate}\n        minDate={minDate}\n        maxDate={maxDate}\n        status={hasError ? 'error' : undefined}\n        range={range}\n        onChange={handleChange}\n        onReset={(event) => {\n          handleChange(event)\n          onReset?.(event)\n        }}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        {...datePickerProps}\n        {...htmlAttributes}\n      />\n    </FieldBlock>\n  )\n}\n\nfunction parseRangeValue(value: DateProps['value']) {\n  return (\n    value\n      .split('|')\n      // Assign to null if falsy value, to properly clear input values\n      .map((value) => (/(undefined|null)/.test(value) ? null : value))\n  )\n}\n\nfunction validateDateLimit({\n  value,\n  isRange,\n  locale,\n  ...dates\n}: {\n  value: DateProps['value']\n  minDate: DateProps['minDate']\n  maxDate: DateProps['maxDate']\n  isRange: DateProps['range']\n  locale: ProviderProps['locale']\n}) {\n  if ((!dates.minDate && !dates.maxDate) || !value) {\n    return\n  }\n\n  const [startDateParsed, endDateParsed] = parseRangeValue(value)\n\n  const minDate = convertStringToDate(dates.minDate)\n  const maxDate = convertStringToDate(dates.maxDate)\n\n  const startDate = convertStringToDate(startDateParsed)\n  const endDate = convertStringToDate(endDateParsed)\n\n  const isoDates = {\n    minDate:\n      dates.minDate instanceof Date\n        ? dates.minDate.toISOString()\n        : dates.minDate,\n    maxDate:\n      dates.maxDate instanceof Date\n        ? dates.maxDate.toISOString()\n        : dates.maxDate,\n  }\n\n  const options: FormatDateOptions = {\n    locale,\n    variant: 'long',\n  }\n\n  // Handle non range validation\n  if (!isRange) {\n    if (isBefore(startDate, minDate)) {\n      return new FormError('Date.errorMinDate', {\n        messageValues: { date: formatDate(isoDates.minDate, options) },\n      })\n    }\n\n    if (isAfter(startDate, maxDate)) {\n      return new FormError('Date.errorMaxDate', {\n        messageValues: { date: formatDate(isoDates.maxDate, options) },\n      })\n    }\n\n    return\n  }\n\n  const messages: Array<FormError> = []\n\n  // Start date validation\n  if (isBefore(startDate, minDate)) {\n    messages.push(\n      new FormError('Date.errorStartDateMinDate', {\n        messageValues: { date: formatDate(isoDates.minDate, options) },\n      })\n    )\n  }\n\n  if (isAfter(startDate, maxDate)) {\n    messages.push(\n      new FormError('Date.errorStartDateMaxDate', {\n        messageValues: { date: formatDate(isoDates.maxDate, options) },\n      })\n    )\n  }\n\n  // End date validation\n  if (isBefore(endDate, minDate)) {\n    messages.push(\n      new FormError('Date.errorEndDateMinDate', {\n        messageValues: { date: formatDate(isoDates.minDate, options) },\n      })\n    )\n  }\n\n  if (isAfter(endDate, maxDate)) {\n    messages.push(\n      new FormError('Date.errorEndDateMaxDate', {\n        messageValues: { date: formatDate(isoDates.maxDate, options) },\n      })\n    )\n  }\n\n  return messages\n}\n\n// Used to filter out DatePickerProps from the FieldProps.\n// Includes DatePickerProps that are not destructured in useFieldProps\nconst datePickerPropKeys = [\n  'month',\n  'startMonth',\n  'endMonth',\n  'minDate',\n  'maxDate',\n  'correctInvalidDate',\n  'maskOrder',\n  'maskPlaceholder',\n  'dateFormat',\n  'returnFormat',\n  'hideNavigation',\n  'hideDays',\n  'onlyMonth',\n  'hideLastWeek',\n  'disableAutofocus',\n  'showSubmitButton',\n  'submitButtonText',\n  'cancelButtonText',\n  'resetButtonText',\n  'firstDay',\n  'link',\n  'size',\n  'sync',\n  'addonElement',\n  'shortcuts',\n  'opened',\n  'direction',\n  'alignPicker',\n  'onDaysRender',\n  'showInput',\n  'onDaysRender',\n  'onType',\n  'onShow',\n  'onHide',\n  'onSubmit',\n  'onCancel',\n  'onReset',\n  'skipPortal',\n]\n\nfunction pickDatePickerProps(props: DateProps) {\n  const datePickerProps = Object.keys(props).reduce(\n    (datePickerProps, key) => {\n      if (datePickerPropKeys.includes(key)) {\n        datePickerProps[key] = props[key]\n      }\n\n      return datePickerProps\n    },\n    {}\n  )\n\n  return datePickerProps\n}\n\nDateComponent._supportsSpacingProps = true\nexport default DateComponent\n"],"mappings":"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"}

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

@@ -11,10 +11,17 @@ import Slider from '../../../../components/Slider';
 import { pickSpacingProps } from '../../../../components/flex/utils';
 import DataContext from '../../DataContext/Context';
 import useDataValue from '../../hooks/useDataValue';
+import { useTranslation as useSharedTranslation } from '../../../../shared';
 function SliderComponent(props) {
   var _ref, _ref2, _props$paths;
   const dataContextRef = useRef();
   dataContextRef.current = useContext(DataContext);
+  const {
+    Slider: {
+      addTitle: addTitleLabel,
+      subtractTitle: subtractTitleLabel
+    }
+  } = useSharedTranslation();
   const {
     getSourceValue
   } = useDataValue();
@@ -43,10 +50,10 @@ function SliderComponent(props) {
     vertical,
     reverse,
     hideButtons,
-    multiThumbBehavior,
+    multiThumbBehavior = 'swap',
     thumbTitle,
-    subtractTitle,
-    addTitle,
+    subtractTitle = subtractTitleLabel,
+    addTitle = addTitleLabel,
     numberFormat,
     tooltip,
     alwaysShowTooltip,
@@ -77,10 +84,12 @@ function SliderComponent(props) {
     handleChange === null || handleChange === void 0 ? void 0 : handleChange(value);
   }, [handleChange, props.paths]);
   const fieldBlockProps = _objectSpread({
-    forId: id,
+    id: id,
+    forId: `${id}-slider-thumb-0`,
     width
   }, pickSpacingProps(props));
   const sliderProps = {
+    id: `${id}-slider`,
     value,
     step,
     min,

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","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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"}
+{"version":3,"file":"Slider.js","names":["React","useCallback","useContext","useMemo","useRef","FieldBlock","useFieldProps","getFormattedNumber","Slider","pickSpacingProps","DataContext","useDataValue","useTranslation","useSharedTranslation","SliderComponent","props","_ref","_ref2","_props$paths","dataContextRef","current","addTitle","addTitleLabel","subtractTitle","subtractTitleLabel","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","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'\nimport { useTranslation as useSharedTranslation } from '../../../../shared'\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  const {\n    Slider: { addTitle: addTitleLabel, subtractTitle: subtractTitleLabel },\n  } = useSharedTranslation()\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 = 'swap',\n    thumbTitle,\n    subtractTitle = subtractTitleLabel,\n    addTitle = addTitleLabel,\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    id: id,\n    forId: `${id}-slider-thumb-0`,\n    width,\n    ...pickSpacingProps(props),\n  }\n\n  const sliderProps: SliderProps = {\n    id: `${id}-slider`,\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/Upload/Upload.js

@@ -158,7 +158,8 @@ function UploadComponent(props) {
     })) : labelDescription !== null && labelDescription !== void 0 ? labelDescription : text
   }, htmlAttributes), help && React.createElement(HelpButtonInlineContent, {
     contentId: `${id}-help`,
-    help: help
+    help: help,
+    roundedCorner: false
   })));
 }
 export default UploadComponent;

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","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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"}
+{"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","roundedCorner","_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\n            contentId={`${id}-help`}\n            help={help}\n            roundedCorner={false}\n          />\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/Field/Upload/style/dnb-upload.css

@@ -1,4 +1,9 @@
 .dnb-forms-field-upload .dnb-help-button__content .dnb-section {
+  --outset-left: calc(var(--spacing-medium));
+  --outset-right: calc(var(--spacing-medium));
   margin-left: var(--upload-border-width);
   margin-right: var(--upload-border-width);
+}
+.dnb-forms-field-upload .dnb-help-button__content .dnb-section::before {
+  z-index: 0;
 }

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

@@ -1 +1 @@
-.dnb-forms-field-upload .dnb-help-button__content .dnb-section{margin-left:var(--upload-border-width);margin-right:var(--upload-border-width)}
+.dnb-forms-field-upload .dnb-help-button__content .dnb-section{--outset-left:calc(var(--spacing-medium));--outset-right:calc(var(--spacing-medium));margin-left:var(--upload-border-width);margin-right:var(--upload-border-width)}.dnb-forms-field-upload .dnb-help-button__content .dnb-section:before{z-index:0}

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

@@ -1,8 +1,14 @@
 .dnb-forms-field-upload {
   .dnb-help-button__content {
     .dnb-section {
+      --outset-left: calc(var(--spacing-medium));
+      --outset-right: calc(var(--spacing-medium));
+
       margin-left: var(--upload-border-width);
       margin-right: var(--upload-border-width);
+      &::before {
+        z-index: 0;
+      }
     }
   }
 }

package/es/extensions/forms/FieldBlock/FieldBlock.js

@@ -44,7 +44,7 @@ function FieldBlock(props) {
       required,
       info,
       warning,
-      error: errorProp,
+      error,
       disableStatusSummary,
       fieldState,
       disabled,
@@ -59,6 +59,9 @@ function FieldBlock(props) {
     rest = _objectWithoutProperties(_Object$assign, _excluded);
   const hasCustomWidth = /\d(rem)$/.test(String(width));
   const hasCustomContentWidth = /\d(rem)$/.test(String(contentWidth));
+  const infoRef = useRef();
+  const warningRef = useRef();
+  const errorRef = useRef();
   const blockId = useId(props.id);
   const [salt, forceUpdate] = useReducer(() => ({}), {});
   const mountedFieldsRef = useRef({});
@@ -66,9 +69,7 @@ function FieldBlock(props) {
   const stateRecordRef = useRef({});
   const fieldStateIdsRef = useRef(null);
   const contentsRef = useRef(null);
-  const hasInitiallyErrorProp = useMemo(() => {
-    return Boolean(errorProp);
-  }, []);
+  const hasInitiallyErrorPropRef = useRef(Boolean(error));
   const label = useIterateItemNo({
     label: labelProp,
     labelSuffix,
@@ -130,15 +131,17 @@ function FieldBlock(props) {
     }
   }, [nestedFieldBlockContext]);
   const statusContent = useMemo(() => {
-    if (typeof errorProp !== 'undefined') {
+    if (typeof error !== 'undefined' || errorRef.current && !error) {
+      errorRef.current = error;
       setInternalRecord({
         identifier: blockId,
-        showInitially: hasInitiallyErrorProp,
+        showInitially: hasInitiallyErrorPropRef.current,
         type: 'error',
-        content: errorProp
+        content: error
       });
     }
-    if (typeof warning !== 'undefined') {
+    if (typeof warning !== 'undefined' || warningRef.current !== warning) {
+      warningRef.current = warning;
       setInternalRecord({
         identifier: blockId,
         showInitially: true,
@@ -146,7 +149,8 @@ function FieldBlock(props) {
         content: warning
       });
     }
-    if (typeof info !== 'undefined') {
+    if (typeof info !== 'undefined' || infoRef.current !== info) {
+      infoRef.current = info;
       setInternalRecord({
         identifier: blockId,
         showInitially: true,
@@ -222,12 +226,12 @@ function FieldBlock(props) {
       }
       return acc;
     }, salt);
-  }, [errorProp, warning, info, salt, setInternalRecord, blockId, hasInitiallyErrorProp, props.id, forId, label]);
+  }, [error, warning, info, salt, setInternalRecord, blockId, props.id, forId, label]);
   useEffect(() => {
     if (!nestedFieldBlockContext) {
-      showFieldError(blockId, Boolean(errorProp));
+      showFieldError(blockId, Boolean(error));
     }
-  }, [errorProp, blockId, showFieldError, nestedFieldBlockContext]);
+  }, [error, blockId, showFieldError, nestedFieldBlockContext]);
   useEffect(() => () => {
     mountedFieldsRef.current = {};
     stateRecordRef.current = {};
@@ -280,7 +284,7 @@ function FieldBlock(props) {
       setBlockRecord,
       setFieldState,
       showFieldError,
-      hasErrorProp: Boolean(errorProp),
+      hasErrorProp: Boolean(error),
       fieldStateIdsRef,
       mountedFieldsRef,
       composition,