@dnb/eufemia 10.57.0 → 10.58.0

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

@@ -86,12 +86,12 @@ function DateComponent(props) {
   } = useMemo(() => {
     if (!range || !valueProp) {
       return {
-        value: valueProp,
+        value: valueProp !== null && valueProp !== void 0 ? valueProp : null,
         startDate: undefined,
         endDate: undefined
       };
     }
-    const [startDate, endDate] = valueProp.split('|').map(value => /(undefined|null)/.test(value) ? undefined : value);
+    const [startDate, endDate] = valueProp.split('|').map(value => /(undefined|null)/.test(value) ? null : value);
     return {
       value: undefined,
       startDate,

package/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","useTranslation","formatDate","DateComponent","props","translations","locale","errorMessages","_objectSpread","Date","errorRequired","schema","_props$schema","type","pattern","validateRequired","value","_ref","required","error","undefined","preparedProps","fromInput","_ref2","date","start_date","end_date","range","_useFieldProps","id","path","className","label","valueProp","hasError","disabled","htmlAttributes","handleFocus","handleBlur","handleChange","setDisplayValue","showCancelButton","showResetButton","showInput","onReset","rest","_objectWithoutProperties","_excluded","datePickerProps","pickDatePickerProps","startDate","endDate","split","map","test","fieldBlockProps","forId","createElement","_extends","status","onChange","event","onFocus","onBlur","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 { FieldProps, AllJSONSchemaVersions } 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 } from 'date-fns'\nimport useTranslation from '../../hooks/useTranslation'\nimport { formatDate } from '../../Value/Date'\nimport {\n  DatePickerEvent,\n  DatePickerProps,\n} from '../../../../components/DatePicker'\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 Props = FieldProps<string, undefined | string> & {\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} & 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    | '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: Props) {\n  const translations = useTranslation()\n  const { locale } = useContext(SharedContext)\n\n  const errorMessages = useMemo(() => {\n    return {\n      'Field.errorRequired': translations.Date.errorRequired,\n      'Field.errorPattern': translations.Date.errorRequired,\n      ...props.errorMessages,\n    }\n  }, [props.errorMessages, translations.Date.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 preparedProps: Props = {\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  }\n\n  const {\n    id,\n    path,\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    ...rest\n  } = useFieldProps(preparedProps)\n\n  const datePickerProps = pickDatePickerProps(rest)\n\n  const { value, startDate, endDate } = useMemo(() => {\n    if (!range || !valueProp) {\n      return { value: valueProp, startDate: undefined, endDate: undefined }\n    }\n\n    const [startDate, endDate] = valueProp\n      .split('|')\n      .map((value) => (/(undefined|null)/.test(value) ? undefined : value))\n\n    return {\n      value: undefined,\n      startDate,\n      endDate,\n    }\n  }, [range, valueProp])\n\n  useMemo(() => {\n    if (path && valueProp) {\n      setDisplayValue(path, formatDate(valueProp, { locale }))\n    }\n  }, [locale, path, setDisplayValue, valueProp])\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    label: label ?? translations.Date.label,\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        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\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  '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: Props) {\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","useTranslation","formatDate","DateComponent","props","translations","locale","errorMessages","_objectSpread","Date","errorRequired","schema","_props$schema","type","pattern","validateRequired","value","_ref","required","error","undefined","preparedProps","fromInput","_ref2","date","start_date","end_date","range","_useFieldProps","id","path","className","label","valueProp","hasError","disabled","htmlAttributes","handleFocus","handleBlur","handleChange","setDisplayValue","showCancelButton","showResetButton","showInput","onReset","rest","_objectWithoutProperties","_excluded","datePickerProps","pickDatePickerProps","startDate","endDate","split","map","test","fieldBlockProps","forId","createElement","_extends","status","onChange","event","onFocus","onBlur","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 { FieldProps, AllJSONSchemaVersions } 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 } from 'date-fns'\nimport useTranslation from '../../hooks/useTranslation'\nimport { formatDate } from '../../Value/Date'\nimport {\n  DatePickerEvent,\n  DatePickerProps,\n} from '../../../../components/DatePicker'\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 Props = FieldProps<string, undefined | string> & {\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} & 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    | '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: Props) {\n  const translations = useTranslation()\n  const { locale } = useContext(SharedContext)\n\n  const errorMessages = useMemo(() => {\n    return {\n      'Field.errorRequired': translations.Date.errorRequired,\n      'Field.errorPattern': translations.Date.errorRequired,\n      ...props.errorMessages,\n    }\n  }, [props.errorMessages, translations.Date.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 preparedProps: Props = {\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  }\n\n  const {\n    id,\n    path,\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    ...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] = valueProp\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    return {\n      value: undefined,\n      startDate,\n      endDate,\n    }\n  }, [range, valueProp])\n\n  useMemo(() => {\n    if (path && valueProp) {\n      setDisplayValue(path, formatDate(valueProp, { locale }))\n    }\n  }, [locale, path, setDisplayValue, valueProp])\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    label: label ?? translations.Date.label,\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        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\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  '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: Props) {\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/extensions/forms/Field/Provider/FieldProvider.d.ts

@@ -3,16 +3,17 @@ import { Props as DataContextProps } from '../../DataContext/Provider';
 import { FormStatusProps } from '../../../../components/FormStatus';
 import { ContextProps } from '../../../../shared/Context';
 import { FieldProps, Path } from '../../types';
+import { JsonObject } from '../../utils';
 export type FieldProviderProps = FieldProps & {
     children: React.ReactNode;
     /**
      * Locale to use for all nested Eufemia components
      */
-    locale?: DataContextProps<unknown>['locale'];
+    locale?: DataContextProps<JsonObject>['locale'];
     /**
      * Provide your own translations. Use the same format as defined in the translation files
      */
-    translations?: DataContextProps<unknown>['translations'];
+    translations?: DataContextProps<JsonObject>['translations'];
     /** For internal use only */
     overwriteProps?: {
         [key: Path]: FieldProps;

package/extensions/forms/Field/Provider/FieldProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldProvider.js","names":["React","FieldProviderContext","SharedProvider","useFieldProvider","FieldProviderProvider","props","children","restProps","_objectWithoutProperties","_excluded","_useFieldProvider","sharedProviderParams","providerValue","_excluded2","createElement","Provider","value","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Provider/FieldProvider.tsx"],"sourcesContent":["import React from 'react'\nimport { Props as DataContextProps } from '../../DataContext/Provider'\nimport { FormStatusProps } from '../../../../components/FormStatus'\nimport FieldProviderContext from './FieldProviderContext'\nimport SharedProvider from '../../../../shared/Provider'\nimport { ContextProps } from '../../../../shared/Context'\nimport useFieldProvider from './useFieldProvider'\nimport { FieldProps, Path } from '../../types'\n\nexport type FieldProviderProps = FieldProps & {\n  children: React.ReactNode\n\n  /**\n   * Locale to use for all nested Eufemia components\n   */\n  locale?: DataContextProps<unknown>['locale']\n\n  /**\n   * Provide your own translations. Use the same format as defined in the translation files\n   */\n  translations?: DataContextProps<unknown>['translations']\n\n  /** For internal use only */\n  overwriteProps?: {\n    [key: Path]: FieldProps\n  }\n\n  /** For internal use only */\n  formElement?: ContextProps['formElement']\n\n  /** For internal use only */\n  FormStatus?: { globalStatus: FormStatusProps }\n}\n\nfunction FieldProviderProvider(props: FieldProviderProps) {\n  const { children, ...restProps } = props\n  const { sharedProviderParams, ...providerValue } =\n    useFieldProvider(restProps)\n\n  return (\n    <FieldProviderContext.Provider value={providerValue}>\n      <SharedProvider {...sharedProviderParams}>{children}</SharedProvider>\n    </FieldProviderContext.Provider>\n  )\n}\n\nFieldProviderProvider._supportsSpacingProps = 'children'\nexport default FieldProviderProvider\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,OAAOC,oBAAoB,MAAM,wBAAwB;AACzD,OAAOC,cAAc,MAAM,6BAA6B;AAExD,OAAOC,gBAAgB,MAAM,oBAAoB;AA4BjD,SAASC,qBAAqBA,CAACC,KAAyB,EAAE;EACxD,MAAM;MAAEC;IAAuB,CAAC,GAAGD,KAAK;IAAnBE,SAAS,GAAAC,wBAAA,CAAKH,KAAK,EAAAI,SAAA;EACxC,MAAAC,iBAAA,GACEP,gBAAgB,CAACI,SAAS,CAAC;IADvB;MAAEI;IAAuC,CAAC,GAAAD,iBAAA;IAAfE,aAAa,GAAAJ,wBAAA,CAAAE,iBAAA,EAAAG,UAAA;EAG9C,OACEb,KAAA,CAAAc,aAAA,CAACb,oBAAoB,CAACc,QAAQ;IAACC,KAAK,EAAEJ;EAAc,GAClDZ,KAAA,CAAAc,aAAA,CAACZ,cAAc,EAAKS,oBAAoB,EAAGL,QAAyB,CACvC,CAAC;AAEpC;AAEAF,qBAAqB,CAACa,qBAAqB,GAAG,UAAU;AACxD,eAAeb,qBAAqB"}
+{"version":3,"file":"FieldProvider.js","names":["React","FieldProviderContext","SharedProvider","useFieldProvider","FieldProviderProvider","props","children","restProps","_objectWithoutProperties","_excluded","_useFieldProvider","sharedProviderParams","providerValue","_excluded2","createElement","Provider","value","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Provider/FieldProvider.tsx"],"sourcesContent":["import React from 'react'\nimport { Props as DataContextProps } from '../../DataContext/Provider'\nimport { FormStatusProps } from '../../../../components/FormStatus'\nimport FieldProviderContext from './FieldProviderContext'\nimport SharedProvider from '../../../../shared/Provider'\nimport { ContextProps } from '../../../../shared/Context'\nimport useFieldProvider from './useFieldProvider'\nimport { FieldProps, Path } from '../../types'\nimport { JsonObject } from '../../utils'\n\nexport type FieldProviderProps = FieldProps & {\n  children: React.ReactNode\n\n  /**\n   * Locale to use for all nested Eufemia components\n   */\n  locale?: DataContextProps<JsonObject>['locale']\n\n  /**\n   * Provide your own translations. Use the same format as defined in the translation files\n   */\n  translations?: DataContextProps<JsonObject>['translations']\n\n  /** For internal use only */\n  overwriteProps?: {\n    [key: Path]: FieldProps\n  }\n\n  /** For internal use only */\n  formElement?: ContextProps['formElement']\n\n  /** For internal use only */\n  FormStatus?: { globalStatus: FormStatusProps }\n}\n\nfunction FieldProviderProvider(props: FieldProviderProps) {\n  const { children, ...restProps } = props\n  const { sharedProviderParams, ...providerValue } =\n    useFieldProvider(restProps)\n\n  return (\n    <FieldProviderContext.Provider value={providerValue}>\n      <SharedProvider {...sharedProviderParams}>{children}</SharedProvider>\n    </FieldProviderContext.Provider>\n  )\n}\n\nFieldProviderProvider._supportsSpacingProps = 'children'\nexport default FieldProviderProvider\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,OAAOC,oBAAoB,MAAM,wBAAwB;AACzD,OAAOC,cAAc,MAAM,6BAA6B;AAExD,OAAOC,gBAAgB,MAAM,oBAAoB;AA6BjD,SAASC,qBAAqBA,CAACC,KAAyB,EAAE;EACxD,MAAM;MAAEC;IAAuB,CAAC,GAAGD,KAAK;IAAnBE,SAAS,GAAAC,wBAAA,CAAKH,KAAK,EAAAI,SAAA;EACxC,MAAAC,iBAAA,GACEP,gBAAgB,CAACI,SAAS,CAAC;IADvB;MAAEI;IAAuC,CAAC,GAAAD,iBAAA;IAAfE,aAAa,GAAAJ,wBAAA,CAAAE,iBAAA,EAAAG,UAAA;EAG9C,OACEb,KAAA,CAAAc,aAAA,CAACb,oBAAoB,CAACc,QAAQ;IAACC,KAAK,EAAEJ;EAAc,GAClDZ,KAAA,CAAAc,aAAA,CAACZ,cAAc,EAAKS,oBAAoB,EAAGL,QAAyB,CACvC,CAAC;AAEpC;AAEAF,qBAAqB,CAACa,qBAAqB,GAAG,UAAU;AACxD,eAAeb,qBAAqB"}

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

@@ -84,7 +84,15 @@ function UploadComponent(props) {
     setFiles
   } = useUpload(id);
   useEffect(() => {
-    setFiles(value);
+    const hasInvalidFiles = value === null || value === void 0 ? void 0 : value.some(_ref2 => {
+      let {
+        file
+      } = _ref2;
+      return !(file !== null && file !== void 0 && file.name);
+    });
+    if (!hasInvalidFiles) {
+      setFiles(value);
+    }
   }, [setFiles, value]);
   const handleChangeAsync = useCallback(async files => {
     const existingFileIds = (fileContext === null || fileContext === void 0 ? void 0 : fileContext.map(file => file.id)) || [];
@@ -101,10 +109,10 @@ function UploadComponent(props) {
       handleChange(files);
     }
   }, [fileContext, setFiles, fileHandler, handleChange]);
-  const changeHandler = useCallback(_ref2 => {
+  const changeHandler = useCallback(_ref3 => {
     let {
       files
-    } = _ref2;
+    } = _ref3;
     handleBlur();
     handleFocus();
     if (fileHandler) {

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

@@ -1 +1 @@
-{"version":3,"file":"Upload.js","names":["React","useCallback","useEffect","useMemo","classnames","FieldBlock","useFieldProps","useTranslation","useFormsTranslation","Upload","useUpload","pickSpacingProps","HelpButtonInline","HelpButtonInlineContent","useSharedTranslation","FormError","validateRequired","value","_ref","required","isChanged","error","hasError","some","file","errorMessage","hasFiles","length","undefined","updateFileLoadingState","files","isLoading","arguments","map","_objectSpread","UploadComponent","props","sharedTr","formsTr","errorMessages","errorRequired","preparedProps","_useFieldProps","executeOnChangeRegardlessOfError","id","className","width","widthProp","label","labelDescription","help","htmlAttributes","handleChange","handleFocus","handleBlur","fileHandler","rest","_objectWithoutProperties","_excluded","title","text","acceptedFileTypes","filesAmountLimit","fileMaxSize","skeleton","onFileDelete","fileContext","setFiles","handleChangeAsync","existingFileIds","newFiles","filter","includes","uploadedFiles","changeHandler","_ref2","fieldBlockProps","forId","labelSrOnly","createElement","_extends","onChange","Fragment","contentId","left","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Upload/Upload.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from 'react'\nimport classnames from 'classnames'\nimport FieldBlock, {\n  Props as FieldBlockProps,\n  FieldBlockWidth,\n} from '../../FieldBlock'\nimport {\n  useFieldProps,\n  useTranslation as useFormsTranslation,\n} from '../../hooks'\nimport { FieldProps } from '../../types'\nimport Upload, {\n  UploadFile,\n  UploadFileNative,\n  UploadProps,\n} from '../../../../components/Upload'\nimport useUpload from '../../../../components/upload/useUpload'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport HelpButtonInline, {\n  HelpButtonInlineContent,\n} from '../../../../components/help-button/HelpButtonInline'\nimport { useTranslation as useSharedTranslation } from '../../../../shared'\nimport { SpacingProps } from '../../../../shared/types'\nimport { FormError } from '../../utils'\n\nexport type UploadValue = Array<UploadFile | UploadFileNative>\nexport type Props = Omit<\n  FieldProps<UploadValue, UploadValue | undefined>,\n  'name'\n> &\n  SpacingProps & {\n    width?: Omit<FieldBlockWidth, 'medium' | 'small'>\n  } & Pick<\n    Partial<UploadProps>,\n    | 'title'\n    | 'text'\n    | 'acceptedFileTypes'\n    | 'filesAmountLimit'\n    | 'fileMaxSize'\n    | 'onFileDelete'\n    | 'skeleton'\n  > & {\n    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 preparedProps = {\n    errorMessages,\n    validateRequired,\n    ...props,\n  }\n\n  const {\n    id,\n    className,\n    width: widthProp = 'stretch',\n    value,\n    label,\n    labelDescription,\n    help,\n    htmlAttributes,\n    handleChange,\n    handleFocus,\n    handleBlur,\n    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  } = rest\n\n  const { files: fileContext, setFiles } = useUpload(id)\n\n  useEffect(() => {\n    setFiles(value)\n  }, [setFiles, value])\n\n  const handleChangeAsync = useCallback(\n    async (files: UploadValue) => {\n      // Filter out existing files\n      const existingFileIds = fileContext?.map((file) => file.id) || []\n      const newFiles = files.filter(\n        (file) => !existingFileIds.includes(file.id)\n      )\n\n      if (newFiles.length > 0) {\n        // Set loading\n        setFiles([\n          ...fileContext,\n          ...updateFileLoadingState(newFiles, { isLoading: true }),\n        ])\n\n        const uploadedFiles = updateFileLoadingState(\n          await fileHandler(newFiles),\n          { isLoading: false }\n        )\n\n        // Set error, if any\n        handleChange([...fileContext, ...uploadedFiles])\n      } else {\n        handleChange(files)\n      }\n    },\n    [fileContext, 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        title={label ?? title}\n        text={\n          help ? (\n            <>\n              {labelDescription ?? text}\n              <HelpButtonInline\n                contentId={`${id}-help`}\n                left={text ? 'x-small' : false}\n                help={help}\n              />\n            </>\n          ) : (\n            labelDescription ?? text\n          )\n        }\n        {...htmlAttributes}\n      >\n        {help && (\n          <HelpButtonInlineContent contentId={`${id}-help`} help={help} />\n        )}\n      </Upload>\n    </FieldBlock>\n  )\n}\n\nexport default UploadComponent\n\nUploadComponent._supportsSpacingProps = true\n"],"mappings":"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"}
+{"version":3,"file":"Upload.js","names":["React","useCallback","useEffect","useMemo","classnames","FieldBlock","useFieldProps","useTranslation","useFormsTranslation","Upload","useUpload","pickSpacingProps","HelpButtonInline","HelpButtonInlineContent","useSharedTranslation","FormError","validateRequired","value","_ref","required","isChanged","error","hasError","some","file","errorMessage","hasFiles","length","undefined","updateFileLoadingState","files","isLoading","arguments","map","_objectSpread","UploadComponent","props","sharedTr","formsTr","errorMessages","errorRequired","preparedProps","_useFieldProps","executeOnChangeRegardlessOfError","id","className","width","widthProp","label","labelDescription","help","htmlAttributes","handleChange","handleFocus","handleBlur","fileHandler","rest","_objectWithoutProperties","_excluded","title","text","acceptedFileTypes","filesAmountLimit","fileMaxSize","skeleton","onFileDelete","fileContext","setFiles","hasInvalidFiles","_ref2","name","handleChangeAsync","existingFileIds","newFiles","filter","includes","uploadedFiles","changeHandler","_ref3","fieldBlockProps","forId","labelSrOnly","createElement","_extends","onChange","Fragment","contentId","left","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Upload/Upload.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from 'react'\nimport classnames from 'classnames'\nimport FieldBlock, {\n  Props as FieldBlockProps,\n  FieldBlockWidth,\n} from '../../FieldBlock'\nimport {\n  useFieldProps,\n  useTranslation as useFormsTranslation,\n} from '../../hooks'\nimport { FieldProps } from '../../types'\nimport Upload, {\n  UploadFile,\n  UploadFileNative,\n  UploadProps,\n} from '../../../../components/Upload'\nimport useUpload from '../../../../components/upload/useUpload'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport HelpButtonInline, {\n  HelpButtonInlineContent,\n} from '../../../../components/help-button/HelpButtonInline'\nimport { useTranslation as useSharedTranslation } from '../../../../shared'\nimport { SpacingProps } from '../../../../shared/types'\nimport { FormError } from '../../utils'\n\nexport type UploadValue = Array<UploadFile | UploadFileNative>\nexport type Props = Omit<\n  FieldProps<UploadValue, UploadValue | undefined>,\n  'name'\n> &\n  SpacingProps & {\n    width?: Omit<FieldBlockWidth, 'medium' | 'small'>\n  } & Pick<\n    Partial<UploadProps>,\n    | 'title'\n    | 'text'\n    | 'acceptedFileTypes'\n    | 'filesAmountLimit'\n    | 'fileMaxSize'\n    | 'onFileDelete'\n    | 'skeleton'\n  > & {\n    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 preparedProps = {\n    errorMessages,\n    validateRequired,\n    ...props,\n  }\n\n  const {\n    id,\n    className,\n    width: widthProp = 'stretch',\n    value,\n    label,\n    labelDescription,\n    help,\n    htmlAttributes,\n    handleChange,\n    handleFocus,\n    handleBlur,\n    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  } = rest\n\n  const { files: fileContext, setFiles } = useUpload(id)\n\n  useEffect(() => {\n    // Files stored in session storage will not have a property (due to serialization).\n    const hasInvalidFiles = value?.some(({ file }) => !file?.name)\n    if (!hasInvalidFiles) {\n      setFiles(value)\n    }\n  }, [setFiles, value])\n\n  const handleChangeAsync = useCallback(\n    async (files: UploadValue) => {\n      // Filter out existing files\n      const existingFileIds = fileContext?.map((file) => file.id) || []\n      const newFiles = files.filter(\n        (file) => !existingFileIds.includes(file.id)\n      )\n\n      if (newFiles.length > 0) {\n        // Set loading\n        setFiles([\n          ...fileContext,\n          ...updateFileLoadingState(newFiles, { isLoading: true }),\n        ])\n\n        const uploadedFiles = updateFileLoadingState(\n          await fileHandler(newFiles),\n          { isLoading: false }\n        )\n\n        // Set error, if any\n        handleChange([...fileContext, ...uploadedFiles])\n      } else {\n        handleChange(files)\n      }\n    },\n    [fileContext, 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        title={label ?? title}\n        text={\n          help ? (\n            <>\n              {labelDescription ?? text}\n              <HelpButtonInline\n                contentId={`${id}-help`}\n                left={text ? 'x-small' : false}\n                help={help}\n              />\n            </>\n          ) : (\n            labelDescription ?? text\n          )\n        }\n        {...htmlAttributes}\n      >\n        {help && (\n          <HelpButtonInlineContent contentId={`${id}-help`} help={help} />\n        )}\n      </Upload>\n    </FieldBlock>\n  )\n}\n\nexport default UploadComponent\n\nUploadComponent._supportsSpacingProps = true\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,OAAO,QAAQ,OAAO;AAC9D,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,UAAU,MAGV,kBAAkB;AACzB,SACEC,aAAa,EACbC,cAAc,IAAIC,mBAAmB,QAChC,aAAa;AAEpB,OAAOC,MAAM,MAIN,+BAA+B;AACtC,OAAOC,SAAS,MAAM,yCAAyC;AAC/D,SAASC,gBAAgB,QAAQ,mCAAmC;AACpE,OAAOC,gBAAgB,IACrBC,uBAAuB,QAClB,qDAAqD;AAC5D,SAASN,cAAc,IAAIO,oBAAoB,QAAQ,oBAAoB;AAE3E,SAASC,SAAS,QAAQ,aAAa;AAwBvC,MAAMC,gBAAgB,GAAGA,CACvBC,KAAkB,EAAAC,IAAA,KAEf;EAAA,IADH;IAAEC,QAAQ;IAAEC,SAAS;IAAEC;EAAM,CAAC,GAAAH,IAAA;EAE9B,MAAMI,QAAQ,GAAGL,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEM,IAAI,CAAEC,IAAI,IAAKA,IAAI,CAACC,YAAY,CAAC;EACzD,IAAIH,QAAQ,EAAE;IACZ,OAAO,IAAIP,SAAS,CAAC,0BAA0B,CAAC;EAClD;EAEA,MAAMW,QAAQ,GAAG,CAAAT,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEU,MAAM,IAAG,CAAC;EAClC,IAAIR,QAAQ,KAAM,CAACC,SAAS,IAAI,CAACM,QAAQ,IAAK,CAACA,QAAQ,CAAC,EAAE;IACxD,OAAOL,KAAK;EACd;EAEA,OAAOO,SAAS;AAClB,CAAC;AAED,MAAMC,sBAAsB,GAAG,SAAAA,CAC7BC,KAAkB,EAEf;EAAA,IADH;IAAEC;EAAU,CAAC,GAAAC,SAAA,CAAAL,MAAA,QAAAK,SAAA,QAAAJ,SAAA,GAAAI,SAAA,MAAG;IAAED,SAAS,EAAE;EAAM,CAAC;EAEpC,OAAOD,KAAK,CAACG,GAAG,CAAET,IAAI,IAAAU,aAAA,CAAAA,aAAA,KAAWV,IAAI;IAAEO;EAAS,EAAG,CAAC;AACtD,CAAC;AAED,SAASI,eAAeA,CAACC,KAAY,EAAE;EACrC,MAAMC,QAAQ,GAAGvB,oBAAoB,CAAC,CAAC,CAACL,MAAM;EAC9C,MAAM6B,OAAO,GAAG9B,mBAAmB,CAAC,CAAC,CAACC,MAAM;EAE5C,MAAM8B,aAAa,GAAGpC,OAAO,CAC3B,OAAO;IACL,qBAAqB,EAAEmC,OAAO,CAACE;EACjC,CAAC,CAAC,EACF,CAACF,OAAO,CAACE,aAAa,CACxB,CAAC;EAED,MAAMC,aAAa,GAAAP,aAAA;IACjBK,aAAa;IACbvB;EAAgB,GACboB,KAAK,CACT;EAED,MAAAM,cAAA,GAcIpC,aAAa,CAACmC,aAAa,EAAE;MAC/BE,gCAAgC,EAAE;IACpC,CAAC,CAAC;IAhBI;MACJC,EAAE;MACFC,SAAS;MACTC,KAAK,EAAEC,SAAS,GAAG,SAAS;MAC5B9B,KAAK;MACL+B,KAAK;MACLC,gBAAgB;MAChBC,IAAI;MACJC,cAAc;MACdC,YAAY;MACZC,WAAW;MACXC,UAAU;MACVC;IAEF,CAAC,GAAAb,cAAA;IADIc,IAAI,GAAAC,wBAAA,CAAAf,cAAA,EAAAgB,SAAA;EAMT,MAAM;IACJC,KAAK,GAAGtB,QAAQ,CAACsB,KAAK;IACtBC,IAAI,GAAGvB,QAAQ,CAACuB,IAAI;IACpBC,iBAAiB,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC;IACjDC,gBAAgB,GAAG,GAAG;IACtBC,WAAW,GAAG,CAAC;IACfC,QAAQ;IACRC;EACF,CAAC,GAAGT,IAAI;EAER,MAAM;IAAE1B,KAAK,EAAEoC,WAAW;IAAEC;EAAS,CAAC,GAAGzD,SAAS,CAACkC,EAAE,CAAC;EAEtD1C,SAAS,CAAC,MAAM;IAEd,MAAMkE,eAAe,GAAGnD,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEM,IAAI,CAAC8C,KAAA;MAAA,IAAC;QAAE7C;MAAK,CAAC,GAAA6C,KAAA;MAAA,OAAK,EAAC7C,IAAI,aAAJA,IAAI,eAAJA,IAAI,CAAE8C,IAAI;IAAA,EAAC;IAC9D,IAAI,CAACF,eAAe,EAAE;MACpBD,QAAQ,CAAClD,KAAK,CAAC;IACjB;EACF,CAAC,EAAE,CAACkD,QAAQ,EAAElD,KAAK,CAAC,CAAC;EAErB,MAAMsD,iBAAiB,GAAGtE,WAAW,CACnC,MAAO6B,KAAkB,IAAK;IAE5B,MAAM0C,eAAe,GAAG,CAAAN,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEjC,GAAG,CAAET,IAAI,IAAKA,IAAI,CAACoB,EAAE,CAAC,KAAI,EAAE;IACjE,MAAM6B,QAAQ,GAAG3C,KAAK,CAAC4C,MAAM,CAC1BlD,IAAI,IAAK,CAACgD,eAAe,CAACG,QAAQ,CAACnD,IAAI,CAACoB,EAAE,CAC7C,CAAC;IAED,IAAI6B,QAAQ,CAAC9C,MAAM,GAAG,CAAC,EAAE;MAEvBwC,QAAQ,CAAC,CACP,GAAGD,WAAW,EACd,GAAGrC,sBAAsB,CAAC4C,QAAQ,EAAE;QAAE1C,SAAS,EAAE;MAAK,CAAC,CAAC,CACzD,CAAC;MAEF,MAAM6C,aAAa,GAAG/C,sBAAsB,CAC1C,MAAM0B,WAAW,CAACkB,QAAQ,CAAC,EAC3B;QAAE1C,SAAS,EAAE;MAAM,CACrB,CAAC;MAGDqB,YAAY,CAAC,CAAC,GAAGc,WAAW,EAAE,GAAGU,aAAa,CAAC,CAAC;IAClD,CAAC,MAAM;MACLxB,YAAY,CAACtB,KAAK,CAAC;IACrB;EACF,CAAC,EACD,CAACoC,WAAW,EAAEC,QAAQ,EAAEZ,WAAW,EAAEH,YAAY,CACnD,CAAC;EAED,MAAMyB,aAAa,GAAG5E,WAAW,CAC/B6E,KAAA,IAAuC;IAAA,IAAtC;MAAEhD;IAA8B,CAAC,GAAAgD,KAAA;IAEhCxB,UAAU,CAAC,CAAC;IACZD,WAAW,CAAC,CAAC;IAEb,IAAIE,WAAW,EAAE;MACfgB,iBAAiB,CAACzC,KAAK,CAAC;IAC1B,CAAC,MAAM;MACLsB,YAAY,CAACtB,KAAK,CAAC;IACrB;EACF,CAAC,EACD,CAACwB,UAAU,EAAED,WAAW,EAAEE,WAAW,EAAEgB,iBAAiB,EAAEnB,YAAY,CACxE,CAAC;EAED,MAAMN,KAAK,GAAGC,SAA4B;EAC1C,MAAMgC,eAAgC,GAAA7C,aAAA;IACpCU,EAAE;IACFoC,KAAK,EAAG,GAAEpC,EAAG,QAAO;IACpBqC,WAAW,EAAE,IAAI;IACjBpC,SAAS,EAAEzC,UAAU,CAAC,wBAAwB,EAAEyC,SAAS,CAAC;IAC1DC,KAAK;IACLI,IAAI,EAAEtB;EAAS,GACZjB,gBAAgB,CAACyB,KAAK,CAAC,CAC3B;EAED,OACEpC,KAAA,CAAAkF,aAAA,CAAC7E,UAAU,EAAK0E,eAAe,EAC7B/E,KAAA,CAAAkF,aAAA,CAACzE,MAAM,EAAA0E,QAAA;IACLvC,EAAE,EAAEA,EAAG;IACPiB,iBAAiB,EAAEA,iBAAkB;IACrCC,gBAAgB,EAAEA,gBAAiB;IACnCC,WAAW,EAAEA,WAAY;IACzBC,QAAQ,EAAEA,QAAS;IACnBoB,QAAQ,EAAEP,aAAc;IACxBZ,YAAY,EAAEA,YAAa;IAC3BN,KAAK,EAAEX,KAAK,aAALA,KAAK,cAALA,KAAK,GAAIW,KAAM;IACtBC,IAAI,EACFV,IAAI,GACFlD,KAAA,CAAAkF,aAAA,CAAAlF,KAAA,CAAAqF,QAAA,QACGpC,gBAAgB,aAAhBA,gBAAgB,cAAhBA,gBAAgB,GAAIW,IAAI,EACzB5D,KAAA,CAAAkF,aAAA,CAACtE,gBAAgB;MACf0E,SAAS,EAAG,GAAE1C,EAAG,OAAO;MACxB2C,IAAI,EAAE3B,IAAI,GAAG,SAAS,GAAG,KAAM;MAC/BV,IAAI,EAAEA;IAAK,CACZ,CACD,CAAC,GAEHD,gBAAgB,aAAhBA,gBAAgB,cAAhBA,gBAAgB,GAAIW;EAEvB,GACGT,cAAc,GAEjBD,IAAI,IACHlD,KAAA,CAAAkF,aAAA,CAACrE,uBAAuB;IAACyE,SAAS,EAAG,GAAE1C,EAAG,OAAO;IAACM,IAAI,EAAEA;EAAK,CAAE,CAE3D,CACE,CAAC;AAEjB;AAEA,eAAef,eAAe;AAE9BA,eAAe,CAACqD,qBAAqB,GAAG,IAAI"}

package/extensions/forms/Form/Card/Card.d.ts

@@ -1,3 +1,6 @@
 import { Props as CardProps } from '../../../../components/card/Card';
 declare function Card(props: CardProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Card {
+    var _supportsSpacingProps: boolean;
+}
 export default Card;

package/extensions/forms/Form/Card/Card.js

@@ -7,5 +7,6 @@ function Card(props) {
     outset: true
   }, props));
 }
+Card._supportsSpacingProps = true;
 export default Card;
 //# sourceMappingURL=Card.js.map

package/extensions/forms/Form/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","names":["React","CardInstance","Card","props","createElement","_extends","stack","outset"],"sources":["../../../../../../src/extensions/forms/Form/Card/Card.tsx"],"sourcesContent":["import React from 'react'\nimport CardInstance, {\n  Props as CardProps,\n} from '../../../../components/card/Card'\n\nfunction Card(props: CardProps) {\n  return <CardInstance stack outset {...props} />\n}\n\nexport default Card\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,YAAY,MAEZ,kCAAkC;AAEzC,SAASC,IAAIA,CAACC,KAAgB,EAAE;EAC9B,OAAOH,KAAA,CAAAI,aAAA,CAACH,YAAY,EAAAI,QAAA;IAACC,KAAK;IAACC,MAAM;EAAA,GAAKJ,KAAK,CAAG,CAAC;AACjD;AAEA,eAAeD,IAAI"}
+{"version":3,"file":"Card.js","names":["React","CardInstance","Card","props","createElement","_extends","stack","outset","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Form/Card/Card.tsx"],"sourcesContent":["import React from 'react'\nimport CardInstance, {\n  Props as CardProps,\n} from '../../../../components/card/Card'\n\nfunction Card(props: CardProps) {\n  return <CardInstance stack outset {...props} />\n}\n\nCard._supportsSpacingProps = true\n\nexport default Card\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,YAAY,MAEZ,kCAAkC;AAEzC,SAASC,IAAIA,CAACC,KAAgB,EAAE;EAC9B,OAAOH,KAAA,CAAAI,aAAA,CAACH,YAAY,EAAAI,QAAA;IAACC,KAAK;IAACC,MAAM;EAAA,GAAKJ,KAAK,CAAG,CAAC;AACjD;AAEAD,IAAI,CAACM,qBAAqB,GAAG,IAAI;AAEjC,eAAeN,IAAI"}

package/extensions/forms/Form/Element/Element.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { SpacingProps } from '../../../../shared/types';
-export type Props = React.HTMLAttributes<HTMLFormElement> & SpacingProps;
-export default function FormElement({ children, className, onSubmit, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export type Props = Omit<React.HTMLProps<HTMLFormElement>, 'ref' | 'autoComplete'> & SpacingProps;
+export default function FormElement(props: Props): import("react/jsx-runtime").JSX.Element;

package/extensions/forms/Form/Element/Element.js

@@ -1,21 +1,41 @@
 "use client";
 
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["children", "className", "onSubmit"];
-import React, { useCallback, useContext } from 'react';
-import Context from '../../DataContext/Context';
-import Space from '../../../../components/space/Space';
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React, { useCallback, useContext, useRef } from 'react';
 import classnames from 'classnames';
-export default function FormElement(_ref) {
-  let {
+import DataContext from '../../DataContext/Context';
+import Space from '../../../../components/space/Space';
+import useId from '../../../../shared/helpers/useId';
+import { FormStatus } from '../../../../components';
+import { combineLabelledBy } from '../../../../shared/component-helper';
+export default function FormElement(props) {
+  const id = useId();
+  const dataContext = useContext(DataContext);
+  const {
+    submitState,
+    restHandlerProps
+  } = dataContext || {};
+  const states = Object.entries(submitState || {}).filter(_ref => {
+    let [, value] = _ref;
+    return value;
+  });
+  const _ref2 = _objectSpread(_objectSpread({}, restHandlerProps), props),
+    {
       children,
-      className = null,
-      onSubmit = null
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  const dataContext = useContext(Context);
-  dataContext.isInsideFormElement = true;
+      className,
+      onSubmit
+    } = _ref2,
+    restProps = _objectWithoutProperties(_ref2, _excluded);
+  const hasElementRef = useRef(false);
+  if (!dataContext.hasElementRef) {
+    dataContext.hasElementRef = hasElementRef;
+  }
+  dataContext.hasElementRef.current = true;
   const onSubmitHandler = useCallback(event => {
     event === null || event === void 0 ? void 0 : event.preventDefault();
     const formElement = event.target;
@@ -30,7 +50,24 @@ export default function FormElement(_ref) {
   return React.createElement(Space, _extends({
     element: "form",
     className: classnames('dnb-forms-form', className),
-    onSubmit: onSubmitHandler
-  }, rest), children);
+    onSubmit: onSubmitHandler,
+    "aria-labelledby": combineLabelledBy(restProps, states.map(_ref3 => {
+      let [key] = _ref3;
+      return `${id}-form-status-${key}`;
+    })) || undefined
+  }, restProps), children, ['error', 'warning', 'info'].map(key => {
+    const value = submitState === null || submitState === void 0 ? void 0 : submitState[key];
+    return React.createElement(FormStatus, {
+      key: key,
+      state: key,
+      id: `${id}-form-status-${key}`,
+      className: "dnb-forms-status",
+      show: Boolean(value),
+      no_animation: false,
+      shellSpace: {
+        top: 'small'
+      }
+    }, String((value === null || value === void 0 ? void 0 : value['message']) || value || ''));
+  }));
 }
 //# sourceMappingURL=Element.js.map

package/extensions/forms/Form/Element/Element.js.map

@@ -1 +1 @@
-{"version":3,"file":"Element.js","names":["React","useCallback","useContext","Context","Space","classnames","FormElement","_ref","children","className","onSubmit","rest","_objectWithoutProperties","_excluded","dataContext","isInsideFormElement","onSubmitHandler","event","preventDefault","formElement","target","hasContext","formElementRef","current","handleSubmit","createElement","_extends","element"],"sources":["../../../../../../src/extensions/forms/Form/Element/Element.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react'\nimport Context from '../../DataContext/Context'\nimport Space from '../../../../components/space/Space'\nimport classnames from 'classnames'\nimport type { SpacingProps } from '../../../../shared/types'\n\nexport type Props = React.HTMLAttributes<HTMLFormElement> & SpacingProps\n\nexport default function FormElement({\n  children,\n  className = null,\n  onSubmit = null,\n  ...rest\n}: Props) {\n  const dataContext = useContext(Context)\n\n  /**\n   * Set to true,\n   * this way we prevent \"handleSubmit\" to be called twice when the SubmitButton is pressed.\n   */\n  dataContext.isInsideFormElement = true\n\n  const onSubmitHandler = useCallback(\n    (event: React.SyntheticEvent<HTMLFormElement>) => {\n      event?.preventDefault()\n\n      const formElement = event.target as HTMLFormElement\n\n      if (dataContext.hasContext) {\n        dataContext.formElementRef.current = formElement\n        dataContext.handleSubmit()\n      }\n\n      if (typeof onSubmit === 'function') {\n        onSubmit(event)\n      }\n    },\n    [dataContext, onSubmit]\n  )\n\n  return (\n    <Space\n      element=\"form\"\n      className={classnames('dnb-forms-form', className)}\n      onSubmit={onSubmitHandler}\n      {...rest}\n    >\n      {children}\n    </Space>\n  )\n}\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AACtD,OAAOC,OAAO,MAAM,2BAA2B;AAC/C,OAAOC,KAAK,MAAM,oCAAoC;AACtD,OAAOC,UAAU,MAAM,YAAY;AAKnC,eAAe,SAASC,WAAWA,CAAAC,IAAA,EAKzB;EAAA,IAL0B;MAClCC,QAAQ;MACRC,SAAS,GAAG,IAAI;MAChBC,QAAQ,GAAG;IAEN,CAAC,GAAAH,IAAA;IADHI,IAAI,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAEP,MAAMC,WAAW,GAAGZ,UAAU,CAACC,OAAO,CAAC;EAMvCW,WAAW,CAACC,mBAAmB,GAAG,IAAI;EAEtC,MAAMC,eAAe,GAAGf,WAAW,CAChCgB,KAA4C,IAAK;IAChDA,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEC,cAAc,CAAC,CAAC;IAEvB,MAAMC,WAAW,GAAGF,KAAK,CAACG,MAAyB;IAEnD,IAAIN,WAAW,CAACO,UAAU,EAAE;MAC1BP,WAAW,CAACQ,cAAc,CAACC,OAAO,GAAGJ,WAAW;MAChDL,WAAW,CAACU,YAAY,CAAC,CAAC;IAC5B;IAEA,IAAI,OAAOd,QAAQ,KAAK,UAAU,EAAE;MAClCA,QAAQ,CAACO,KAAK,CAAC;IACjB;EACF,CAAC,EACD,CAACH,WAAW,EAAEJ,QAAQ,CACxB,CAAC;EAED,OACEV,KAAA,CAAAyB,aAAA,CAACrB,KAAK,EAAAsB,QAAA;IACJC,OAAO,EAAC,MAAM;IACdlB,SAAS,EAAEJ,UAAU,CAAC,gBAAgB,EAAEI,SAAS,CAAE;IACnDC,QAAQ,EAAEM;EAAgB,GACtBL,IAAI,GAEPH,QACI,CAAC;AAEZ"}
+{"version":3,"file":"Element.js","names":["React","useCallback","useContext","useRef","classnames","DataContext","Space","useId","FormStatus","combineLabelledBy","FormElement","props","id","dataContext","submitState","restHandlerProps","states","Object","entries","filter","_ref","value","_ref2","_objectSpread","children","className","onSubmit","restProps","_objectWithoutProperties","_excluded","hasElementRef","current","onSubmitHandler","event","preventDefault","formElement","target","hasContext","formElementRef","handleSubmit","createElement","_extends","element","map","_ref3","key","undefined","state","show","Boolean","no_animation","shellSpace","top","String"],"sources":["../../../../../../src/extensions/forms/Form/Element/Element.tsx"],"sourcesContent":["import React, { useCallback, useContext, useRef } from 'react'\nimport classnames from 'classnames'\nimport DataContext from '../../DataContext/Context'\nimport Space from '../../../../components/space/Space'\nimport useId from '../../../../shared/helpers/useId'\nimport type { SpacingProps } from '../../../../shared/types'\nimport { FormStatus } from '../../../../components'\nimport { combineLabelledBy } from '../../../../shared/component-helper'\n\nexport type Props = Omit<\n  React.HTMLProps<HTMLFormElement>,\n  'ref' | 'autoComplete'\n> &\n  SpacingProps\n\nexport default function FormElement(props: Props) {\n  const id = useId()\n  const dataContext = useContext(DataContext)\n  const { submitState, restHandlerProps } = dataContext || {}\n  const states = Object.entries(submitState || {}).filter(\n    ([, value]) => value\n  )\n\n  const { children, className, onSubmit, ...restProps } = {\n    ...restHandlerProps,\n    ...props,\n  } as Props\n\n  /**\n   * Set to true,\n   * this way we prevent \"handleSubmit\" to be called twice when the SubmitButton is pressed.\n   */\n  const hasElementRef = useRef(false)\n  if (!dataContext.hasElementRef) {\n    dataContext.hasElementRef = hasElementRef\n  }\n  dataContext.hasElementRef.current = true\n\n  const onSubmitHandler = useCallback(\n    (event: React.SyntheticEvent<HTMLFormElement>) => {\n      event?.preventDefault()\n\n      const formElement = event.target as HTMLFormElement\n\n      if (dataContext.hasContext) {\n        dataContext.formElementRef.current = formElement\n        dataContext.handleSubmit()\n      }\n\n      if (typeof onSubmit === 'function') {\n        onSubmit(event)\n      }\n    },\n    [dataContext, onSubmit]\n  )\n\n  return (\n    <Space\n      element=\"form\"\n      className={classnames('dnb-forms-form', className)}\n      onSubmit={onSubmitHandler}\n      aria-labelledby={\n        combineLabelledBy(\n          restProps,\n          states.map(([key]) => {\n            return `${id}-form-status-${key}`\n          })\n        ) || undefined\n      }\n      {...restProps}\n    >\n      {children}\n\n      {['error', 'warning', 'info'].map((key) => {\n        const value = submitState?.[key]\n        return (\n          <FormStatus\n            key={key}\n            state={key}\n            id={`${id}-form-status-${key}`}\n            className=\"dnb-forms-status\"\n            show={Boolean(value)}\n            no_animation={false}\n            shellSpace={{ top: 'small' }}\n          >\n            {String(value?.['message'] || value || '')}\n          </FormStatus>\n        )\n      })}\n    </Space>\n  )\n}\n"],"mappings":"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"}

package/extensions/forms/Form/Handler/Handler.d.ts

@@ -1,10 +1,14 @@
 import { JsonObject } from '../../utils/json-pointer';
 import { Props as ProviderProps } from '../../DataContext/Provider';
-import type { ElementAllProps } from '../../../../elements/Element';
-export type Props = Omit<ElementAllProps, 'data' | 'as' | 'autoComplete'> & {
+import { Props as FormElementProps } from '../Element';
+export type Props = FormElementProps & {
     /**
      * Will enable autoComplete for all nested Field.String fields
      */
     autoComplete?: boolean;
+    /**
+     * Will decouple the form element from rendering
+     */
+    decoupleForm?: boolean;
 };
-export default function FormHandler<Data extends JsonObject>({ children, defaultData, data, schema, ajvInstance, errorMessages, globalStatusId, filterSubmitData, transformIn, transformOut, onChange, onPathChange, onSubmit, onSubmitRequest, onSubmitComplete, onClear, minimumAsyncBehaviorTime, asyncSubmitTimeout, scrollTopOnSubmit, sessionStorageId, autoComplete, locale, translations, disabled, required, ...rest }: ProviderProps<Data> & Omit<Props, keyof ProviderProps<Data>>): import("react/jsx-runtime").JSX.Element;
+export default function FormHandler<Data extends JsonObject>(props: ProviderProps<Data> & Omit<Props, keyof ProviderProps<Data>>): import("react/jsx-runtime").JSX.Element;

package/extensions/forms/Form/Handler/Handler.js

@@ -1,105 +1,32 @@
 "use client";
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["children", "defaultData", "data", "schema", "ajvInstance", "errorMessages", "globalStatusId", "filterSubmitData", "transformIn", "transformOut", "onChange", "onPathChange", "onSubmit", "onSubmitRequest", "onSubmitComplete", "onClear", "minimumAsyncBehaviorTime", "asyncSubmitTimeout", "scrollTopOnSubmit", "sessionStorageId", "autoComplete", "locale", "translations", "disabled", "required"],
-  _excluded2 = ["children"];
-import React, { useContext } from 'react';
+import React, { useEffect, useRef } from 'react';
+import { warn } from '../../../../shared/helpers';
 import DataContextProvider from '../../DataContext/Provider';
-import DataContext from '../../DataContext/Context';
 import FormElement from '../Element';
-import FormStatus from '../../../../components/FormStatus';
-import useId from '../../../../shared/helpers/useId';
-import { combineLabelledBy } from '../../../../shared/component-helper';
-export default function FormHandler(_ref) {
-  let {
-      children,
-      defaultData,
-      data,
-      schema,
-      ajvInstance,
-      errorMessages,
-      globalStatusId,
-      filterSubmitData,
-      transformIn,
-      transformOut,
-      onChange,
-      onPathChange,
-      onSubmit,
-      onSubmitRequest,
-      onSubmitComplete,
-      onClear,
-      minimumAsyncBehaviorTime,
-      asyncSubmitTimeout,
-      scrollTopOnSubmit,
-      sessionStorageId,
-      autoComplete,
-      locale,
-      translations,
-      disabled,
-      required
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
+const allowedProviderContextProps = ['id', 'defaultData', 'data', 'schema', 'ajvInstance', 'errorMessages', 'globalStatusId', 'filterSubmitData', 'transformIn', 'transformOut', 'onChange', 'onPathChange', 'onSubmit', 'onSubmitRequest', 'onSubmitComplete', 'onClear', 'minimumAsyncBehaviorTime', 'asyncSubmitTimeout', 'scrollTopOnSubmit', 'sessionStorageId', 'locale', 'translations', 'autoComplete', 'disabled', 'required', 'decoupleForm', 'restHandlerProps'];
+export default function FormHandler(props) {
+  const {
+    decoupleForm,
+    children
+  } = props;
+  const hasElementRef = useRef(false);
+  useEffect(() => {
+    if (decoupleForm && !hasElementRef.current) {
+      warn('Please include a Form.Element when using decoupleForm!');
+    }
+  }, [decoupleForm]);
   const providerProps = {
-    id: rest.id,
-    defaultData,
-    data,
-    schema,
-    ajvInstance,
-    errorMessages,
-    globalStatusId,
-    filterSubmitData,
-    transformIn,
-    transformOut,
-    onChange,
-    onPathChange,
-    onSubmit,
-    onSubmitRequest,
-    onSubmitComplete,
-    onClear,
-    minimumAsyncBehaviorTime,
-    asyncSubmitTimeout,
-    scrollTopOnSubmit,
-    sessionStorageId,
-    autoComplete,
-    locale,
-    translations,
-    disabled,
-    required
+    hasElementRef,
+    restHandlerProps: {}
   };
-  return React.createElement(DataContextProvider, providerProps, React.createElement(FormElementWithState, rest, children));
-}
-function FormElementWithState(_ref2) {
-  let {
-      children
-    } = _ref2,
-    rest = _objectWithoutProperties(_ref2, _excluded2);
-  const id = useId();
-  const {
-    submitState
-  } = useContext(DataContext) || {};
-  const states = Object.entries(submitState || {}).filter(_ref3 => {
-    let [, value] = _ref3;
-    return value;
-  });
-  return React.createElement(FormElement, _extends({}, rest, {
-    "aria-labelledby": combineLabelledBy(rest, states.map(_ref4 => {
-      let [key] = _ref4;
-      return `${id}-form-status-${key}`;
-    })) || undefined
-  }), children, ['error', 'warning', 'info'].map(key => {
-    const value = submitState === null || submitState === void 0 ? void 0 : submitState[key];
-    return React.createElement(FormStatus, {
-      key: key,
-      state: key,
-      id: `${id}-form-status-${key}`,
-      className: "dnb-forms-status",
-      show: Boolean(value),
-      no_animation: false,
-      shellSpace: {
-        top: 'small'
-      }
-    }, String((value === null || value === void 0 ? void 0 : value['message']) || value || ''));
-  }));
+  for (const key in props) {
+    if (allowedProviderContextProps.includes(key)) {
+      providerProps[key] = props[key];
+    } else if (key !== 'children') {
+      providerProps.restHandlerProps[key] = props[key];
+    }
+  }
+  return React.createElement(DataContextProvider, providerProps, decoupleForm ? children : React.createElement(FormElement, null, children));
 }
 //# sourceMappingURL=Handler.js.map

package/extensions/forms/Form/Handler/Handler.js.map

@@ -1 +1 @@
-{"version":3,"file":"Handler.js","names":["React","useContext","DataContextProvider","DataContext","FormElement","FormStatus","useId","combineLabelledBy","FormHandler","_ref","children","defaultData","data","schema","ajvInstance","errorMessages","globalStatusId","filterSubmitData","transformIn","transformOut","onChange","onPathChange","onSubmit","onSubmitRequest","onSubmitComplete","onClear","minimumAsyncBehaviorTime","asyncSubmitTimeout","scrollTopOnSubmit","sessionStorageId","autoComplete","locale","translations","disabled","required","rest","_objectWithoutProperties","_excluded","providerProps","id","createElement","FormElementWithState","_ref2","_excluded2","submitState","states","Object","entries","filter","_ref3","value","_extends","map","_ref4","key","undefined","state","className","show","Boolean","no_animation","shellSpace","top","String"],"sources":["../../../../../../src/extensions/forms/Form/Handler/Handler.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport { JsonObject } from '../../utils/json-pointer'\nimport DataContextProvider, {\n  Props as ProviderProps,\n} from '../../DataContext/Provider'\nimport DataContext from '../../DataContext/Context'\nimport FormElement from '../Element'\nimport type { ElementAllProps } from '../../../../elements/Element'\nimport FormStatus from '../../../../components/FormStatus'\nimport useId from '../../../../shared/helpers/useId'\nimport { combineLabelledBy } from '../../../../shared/component-helper'\n\nexport type Props = Omit<\n  ElementAllProps,\n  'data' | 'as' | 'autoComplete'\n> & {\n  /**\n   * Will enable autoComplete for all nested Field.String fields\n   */\n  autoComplete?: boolean\n}\n\nexport default function FormHandler<Data extends JsonObject>({\n  children,\n  defaultData,\n  data,\n  schema,\n  ajvInstance,\n  errorMessages,\n  globalStatusId,\n  filterSubmitData,\n  transformIn,\n  transformOut,\n  onChange,\n  onPathChange,\n  onSubmit,\n  onSubmitRequest,\n  onSubmitComplete,\n  onClear,\n  minimumAsyncBehaviorTime,\n  asyncSubmitTimeout,\n  scrollTopOnSubmit,\n  sessionStorageId,\n  autoComplete,\n  locale,\n  translations,\n  disabled,\n  required,\n  ...rest\n}: ProviderProps<Data> & Omit<Props, keyof ProviderProps<Data>>) {\n  const providerProps = {\n    id: rest.id,\n    defaultData,\n    data,\n    schema,\n    ajvInstance,\n    errorMessages,\n    globalStatusId,\n    filterSubmitData,\n    transformIn,\n    transformOut,\n    onChange,\n    onPathChange,\n    onSubmit,\n    onSubmitRequest,\n    onSubmitComplete,\n    onClear,\n    minimumAsyncBehaviorTime,\n    asyncSubmitTimeout,\n    scrollTopOnSubmit,\n    sessionStorageId,\n    autoComplete,\n    locale,\n    translations,\n    disabled,\n    required,\n  }\n\n  return (\n    <DataContextProvider {...providerProps}>\n      <FormElementWithState {...rest}>{children}</FormElementWithState>\n    </DataContextProvider>\n  )\n}\n\nfunction FormElementWithState({ children, ...rest }) {\n  const id = useId()\n  const { submitState } = useContext(DataContext) || {}\n  const states = Object.entries(submitState || {}).filter(\n    ([, value]) => value\n  )\n\n  return (\n    <FormElement\n      {...rest}\n      aria-labelledby={\n        combineLabelledBy(\n          rest,\n          states.map(([key]) => {\n            return `${id}-form-status-${key}`\n          })\n        ) || undefined\n      }\n    >\n      {children}\n\n      {['error', 'warning', 'info'].map((key) => {\n        const value = submitState?.[key]\n        return (\n          <FormStatus\n            key={key}\n            state={key}\n            id={`${id}-form-status-${key}`}\n            className=\"dnb-forms-status\"\n            show={Boolean(value)}\n            no_animation={false}\n            shellSpace={{ top: 'small' }}\n          >\n            {String(value?.['message'] || value || '')}\n          </FormStatus>\n        )\n      })}\n    </FormElement>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Handler.js","names":["React","useEffect","useRef","warn","DataContextProvider","FormElement","allowedProviderContextProps","FormHandler","props","decoupleForm","children","hasElementRef","current","providerProps","restHandlerProps","key","includes","createElement"],"sources":["../../../../../../src/extensions/forms/Form/Handler/Handler.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react'\nimport { JsonObject } from '../../utils/json-pointer'\nimport { warn } from '../../../../shared/helpers'\nimport DataContextProvider, {\n  Props as ProviderProps,\n} from '../../DataContext/Provider'\nimport FormElement, { Props as FormElementProps } from '../Element'\nimport { ContextState } from '../../DataContext'\n\nexport type Props = FormElementProps & {\n  /**\n   * Will enable autoComplete for all nested Field.String fields\n   */\n  autoComplete?: boolean\n\n  /**\n   * Will decouple the form element from rendering\n   */\n  decoupleForm?: boolean\n}\n\ntype AllowedProviderContextProps = ProviderProps<JsonObject> &\n  Pick<Props, 'decoupleForm' | 'autoComplete' | 'disabled'> &\n  Pick<ContextState, 'restHandlerProps' | 'hasElementRef'>\n\nconst allowedProviderContextProps: Array<\n  keyof AllowedProviderContextProps\n> = [\n  'id',\n  'defaultData',\n  'data',\n  'schema',\n  'ajvInstance',\n  'errorMessages',\n  'globalStatusId',\n  'filterSubmitData',\n  'transformIn',\n  'transformOut',\n  'onChange',\n  'onPathChange',\n  'onSubmit',\n  'onSubmitRequest',\n  'onSubmitComplete',\n  'onClear',\n  'minimumAsyncBehaviorTime',\n  'asyncSubmitTimeout',\n  'scrollTopOnSubmit',\n  'sessionStorageId',\n  'locale',\n  'translations',\n  'autoComplete',\n  'disabled',\n  'required',\n  'decoupleForm',\n  'restHandlerProps',\n]\n\nexport default function FormHandler<Data extends JsonObject>(\n  props: ProviderProps<Data> & Omit<Props, keyof ProviderProps<Data>>\n) {\n  const { decoupleForm, children } = props\n\n  const hasElementRef = useRef(false)\n  useEffect(() => {\n    if (decoupleForm && !hasElementRef.current) {\n      warn('Please include a Form.Element when using decoupleForm!')\n    }\n  }, [decoupleForm])\n\n  const providerProps = {\n    hasElementRef,\n    restHandlerProps: {},\n  } as AllowedProviderContextProps\n\n  for (const key in props) {\n    if (\n      allowedProviderContextProps.includes(\n        key as keyof AllowedProviderContextProps\n      )\n    ) {\n      providerProps[key] = props[key]\n    } else if (key !== 'children') {\n      providerProps.restHandlerProps[key] = props[key]\n    }\n  }\n\n  return (\n    <DataContextProvider {...providerProps}>\n      {decoupleForm ? children : <FormElement>{children}</FormElement>}\n    </DataContextProvider>\n  )\n}\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAEhD,SAASC,IAAI,QAAQ,4BAA4B;AACjD,OAAOC,mBAAmB,MAEnB,4BAA4B;AACnC,OAAOC,WAAW,MAAqC,YAAY;AAmBnE,MAAMC,2BAEL,GAAG,CACF,IAAI,EACJ,aAAa,EACb,MAAM,EACN,QAAQ,EACR,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,kBAAkB,EAClB,aAAa,EACb,cAAc,EACd,UAAU,EACV,cAAc,EACd,UAAU,EACV,iBAAiB,EACjB,kBAAkB,EAClB,SAAS,EACT,0BAA0B,EAC1B,oBAAoB,EACpB,mBAAmB,EACnB,kBAAkB,EAClB,QAAQ,EACR,cAAc,EACd,cAAc,EACd,UAAU,EACV,UAAU,EACV,cAAc,EACd,kBAAkB,CACnB;AAED,eAAe,SAASC,WAAWA,CACjCC,KAAmE,EACnE;EACA,MAAM;IAAEC,YAAY;IAAEC;EAAS,CAAC,GAAGF,KAAK;EAExC,MAAMG,aAAa,GAAGT,MAAM,CAAC,KAAK,CAAC;EACnCD,SAAS,CAAC,MAAM;IACd,IAAIQ,YAAY,IAAI,CAACE,aAAa,CAACC,OAAO,EAAE;MAC1CT,IAAI,CAAC,wDAAwD,CAAC;IAChE;EACF,CAAC,EAAE,CAACM,YAAY,CAAC,CAAC;EAElB,MAAMI,aAAa,GAAG;IACpBF,aAAa;IACbG,gBAAgB,EAAE,CAAC;EACrB,CAAgC;EAEhC,KAAK,MAAMC,GAAG,IAAIP,KAAK,EAAE;IACvB,IACEF,2BAA2B,CAACU,QAAQ,CAClCD,GACF,CAAC,EACD;MACAF,aAAa,CAACE,GAAG,CAAC,GAAGP,KAAK,CAACO,GAAG,CAAC;IACjC,CAAC,MAAM,IAAIA,GAAG,KAAK,UAAU,EAAE;MAC7BF,aAAa,CAACC,gBAAgB,CAACC,GAAG,CAAC,GAAGP,KAAK,CAACO,GAAG,CAAC;IAClD;EACF;EAEA,OACEf,KAAA,CAAAiB,aAAA,CAACb,mBAAmB,EAAKS,aAAa,EACnCJ,YAAY,GAAGC,QAAQ,GAAGV,KAAA,CAAAiB,aAAA,CAACZ,WAAW,QAAEK,QAAsB,CAC5C,CAAC;AAE1B"}

package/extensions/forms/Form/Isolation/Isolation.d.ts

@@ -3,7 +3,7 @@ import { JsonObject } from '../../utils/json-pointer';
 import IsolationCommitButton from './IsolationCommitButton';
 import { type Props as ProviderProps } from '../../DataContext/Provider';
 import type { OnCommit, Path } from '../../types';
-export type IsolationProviderProps<Data> = {
+export type IsolationProviderProps<Data extends JsonObject> = {
     /**
      * Form.Isolation: Will be called when the isolated context is committed.
      */
@@ -17,7 +17,7 @@ export type IsolationProviderProps<Data> = {
      * It will receive the data from the isolated context and the data from the outer context.
      * You can use this to transform the data before it is committed.
      */
-    transformOnCommit?: (isolatedData: JsonObject, handlerData: JsonObject) => unknown;
+    transformOnCommit?: (isolatedData: Data, handlerData: Data) => JsonObject;
     /**
      * Prevent the form from being submitted when there are fields with errors inside the Form.Isolation.
      */
@@ -31,7 +31,7 @@ export type IsolationProviderProps<Data> = {
      */
     isolate?: boolean;
 };
-export type IsolationProps<Data> = Omit<ProviderProps<Data>, 'onSubmit' | 'onSubmitRequest' | 'onSubmitComplete' | 'minimumAsyncBehaviorTime' | 'asyncSubmitTimeout' | 'scrollTopOnSubmit' | 'sessionStorageId' | 'globalStatusId'> & {
+export type IsolationProps<Data extends JsonObject> = Omit<ProviderProps<Data>, 'onSubmit' | 'onSubmitRequest' | 'onSubmitComplete' | 'minimumAsyncBehaviorTime' | 'asyncSubmitTimeout' | 'scrollTopOnSubmit' | 'sessionStorageId' | 'globalStatusId'> & {
     /**
      * A ref (function) that you can call in order to commit the data programmatically to the outer context.
      */