@payloadcms/ui 4.0.0-internal.d28e9fb → 4.0.0-internal.d7d662c

package/dist/fields/DateTime/index.d.ts

@@ -1,9 +1,5 @@
-import type { DateFieldValidation } from 'payload';
+import type { DateFieldClientProps } from 'payload';
+import React from 'react';
 import './index.css';
-export declare const DateTimeField: import("react").FC<{
-    readonly path: string;
-    readonly validate?: DateFieldValidation;
-} & {
-    readonly field: Omit<import("payload").DateFieldClient, "type"> & Partial<Pick<import("payload").DateFieldClient, "type">>;
-} & Omit<import("payload").ClientComponentProps, "customComponents" | "field">>;
+export declare const DateTimeField: React.FC<DateFieldClientProps>;
 //# sourceMappingURL=index.d.ts.map

package/dist/fields/DateTime/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/DateTime/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAA4B,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAe5E,OAAO,aAAa,CAAA;AA2MpB,eAAO,MAAM,aAAa;;;;;+EAAwC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/DateTime/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAuB,MAAM,SAAS,CAAA;AAKxE,OAAO,KAA+B,MAAM,OAAO,CAAA;AAUnD,OAAO,aAAa,CAAA;AAwNpB,eAAO,MAAM,aAAa,gCAAwC,CAAA"}

package/dist/fields/DateTime/index.js

@@ -1,10 +1,11 @@
 'use client';
 
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TZDateMini as TZDate } from '@date-fns/tz/date/mini';
 import { getTranslation } from '@payloadcms/translations';
 import { transpose } from 'date-fns';
-import { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { DatePickerField } from '../../elements/DatePicker/index.js';
 import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
 import { TimezonePicker } from '../../elements/TimezonePicker/index.js';
@@ -16,32 +17,43 @@ import { useField } from '../../forms/useField/index.js';
 import './index.css';
 import { withCondition } from '../../forms/withCondition/index.js';
 import { useConfig } from '../../providers/Config/index.js';
+import { useEditDepth } from '../../providers/EditDepth/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
+import { generateFieldID } from '../../utilities/generateFieldID.js';
 import { mergeFieldStyles } from '../mergeFieldStyles.js';
 import { fieldBaseClass } from '../shared/index.js';
 const baseClass = 'date-time-field';
 const DateTimeFieldComponent = props => {
+  const $ = _c(29);
   const {
     field,
-    field: {
-      admin: {
-        className,
-        date: datePickerProps,
-        description,
-        placeholder
-      } = {},
-      label,
-      localized,
-      required,
-      timezone
-    },
+    field: t0,
     path: pathFromProps,
     readOnly,
     validate
   } = props;
-  const pickerAppearance = datePickerProps?.pickerAppearance || 'default';
-  // Get the user timezone so we can adjust the displayed value against it
-  const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const {
+    admin: t1,
+    label,
+    localized,
+    required,
+    timezone
+  } = t0;
+  const {
+    className,
+    date: datePickerProps,
+    description,
+    placeholder
+  } = t1 === undefined ? {} : t1;
+  const pickerAppearance = datePickerProps?.pickerAppearance || "default";
+  let t2;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = Intl.DateTimeFormat().resolvedOptions();
+    $[0] = t2;
+  } else {
+    t2 = $[0];
+  }
+  const userTimezone = t2.timeZone;
   const {
     config
   } = useConfig();
@@ -50,144 +62,233 @@ const DateTimeFieldComponent = props => {
   } = useTranslation();
   const {
     dispatchFields,
-    setModified
+    setModified,
+    uuid
   } = useForm();
-  const memoizedValidate = useCallback((value, options) => {
-    if (typeof validate === 'function') {
-      return validate(value, {
-        ...options,
-        required
-      });
-    }
-  }, [validate, required]);
+  const editDepth = useEditDepth();
+  let t3;
+  if ($[1] !== required || $[2] !== validate) {
+    t3 = (value, options) => {
+      if (typeof validate === "function") {
+        return validate(value, {
+          ...options,
+          required
+        });
+      }
+    };
+    $[1] = required;
+    $[2] = validate;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  const memoizedValidate = t3;
+  let t4;
+  if ($[4] !== memoizedValidate || $[5] !== pathFromProps) {
+    t4 = {
+      potentiallyStalePath: pathFromProps,
+      validate: memoizedValidate
+    };
+    $[4] = memoizedValidate;
+    $[5] = pathFromProps;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
   const {
-    customComponents: {
-      AfterInput,
-      BeforeInput,
-      Description,
-      Error,
-      Label
-    } = {},
+    customComponents: t5,
     disabled,
     path,
     setValue,
     showError,
     value: value_0
-  } = useField({
-    potentiallyStalePath: pathFromProps,
-    validate: memoizedValidate
-  });
-  const timezonePath = path + '_tz';
-  const timezoneField = useFormFields(([fields, _]) => fields?.[timezonePath]);
-  const supportedTimezones = useMemo(() => {
-    if (timezone && typeof timezone === 'object' && timezone.supportedTimezones) {
-      return timezone.supportedTimezones;
+  } = useField(t4);
+  const {
+    AfterInput,
+    BeforeInput,
+    Description,
+    Error,
+    Label
+  } = t5 === undefined ? {} : t5;
+  const inputId = datePickerProps?.overrides?.id || generateFieldID(path ?? "", editDepth, uuid ?? "", "date-input");
+  const timezonePath = path + "_tz";
+  let t6;
+  if ($[7] !== timezonePath) {
+    t6 = t7 => {
+      const [fields] = t7;
+      return fields?.[timezonePath];
+    };
+    $[7] = timezonePath;
+    $[8] = t6;
+  } else {
+    t6 = $[8];
+  }
+  const timezoneField = useFormFields(t6);
+  let t7;
+  bb0: {
+    if (timezone && typeof timezone === "object" && timezone.supportedTimezones) {
+      t7 = timezone.supportedTimezones;
+      break bb0;
     }
-    return config.admin.timezones.supportedTimezones;
-  }, [config.admin.timezones.supportedTimezones, timezone]);
-  /**
-  * Date appearance doesn't include timestamps,
-  * which means we need to pin the time to always 12:00 for the selected date
-  */
-  const isDateOnly = ['dayOnly', 'default', 'monthOnly'].includes(pickerAppearance);
+    t7 = config.admin.timezones.supportedTimezones;
+  }
+  const supportedTimezones = t7;
+  let t8;
+  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+    t8 = ["dayOnly", "default", "monthOnly"];
+    $[9] = t8;
+  } else {
+    t8 = $[9];
+  }
+  const isDateOnly = t8.includes(pickerAppearance);
   const selectedTimezone = timezoneField?.value;
-  const timezoneRequired = required || timezone && typeof timezone === 'object' && timezone.required;
-  // The displayed value should be the original value, adjusted to the user's timezone
-  const displayedValue = useMemo(() => {
+  const timezoneRequired = required || timezone && typeof timezone === "object" && timezone.required;
+  let t9;
+  bb1: {
     if (timezone && selectedTimezone && userTimezone && value_0) {
-      // Create TZDate instances for the selected timezone and the user's timezone
-      // These instances allow us to transpose the date between timezones while keeping the same time value
-      const DateWithOriginalTz = TZDate.tz(selectedTimezone);
-      const DateWithUserTz = TZDate.tz(userTimezone);
-      const modifiedDate = new TZDate(value_0).withTimeZone(selectedTimezone);
-      // Transpose the date to the selected timezone
-      const dateWithTimezone = transpose(modifiedDate, DateWithOriginalTz);
-      // Transpose the date to the user's timezone - this is necessary because the react-datepicker component insists on displaying the date in the user's timezone
-      const dateWithUserTimezone = transpose(dateWithTimezone, DateWithUserTz);
-      return dateWithUserTimezone.toISOString();
+      let t10;
+      if ($[10] !== selectedTimezone || $[11] !== value_0) {
+        const DateWithOriginalTz = TZDate.tz(selectedTimezone);
+        const DateWithUserTz = TZDate.tz(userTimezone);
+        const modifiedDate = new TZDate(value_0).withTimeZone(selectedTimezone);
+        const dateWithTimezone = transpose(modifiedDate, DateWithOriginalTz);
+        const dateWithUserTimezone = transpose(dateWithTimezone, DateWithUserTz);
+        t10 = dateWithUserTimezone.toISOString();
+        $[10] = selectedTimezone;
+        $[11] = value_0;
+        $[12] = t10;
+      } else {
+        t10 = $[12];
+      }
+      t9 = t10;
+      break bb1;
     }
-    return value_0;
-  }, [timezone, selectedTimezone, value_0, userTimezone]);
-  const styles = useMemo(() => mergeFieldStyles(field), [field]);
-  const onChange = useCallback(incomingDate => {
-    if (!(readOnly || disabled)) {
-      if (timezone && selectedTimezone && incomingDate) {
-        // Create TZDate instances for the selected timezone
-        const TZDateWithSelectedTz = TZDate.tz(selectedTimezone);
-        if (isDateOnly) {
-          // We need to offset this hardcoded hour offset from the DatePicker elemenent
-          // this can be removed in 4.0 when we remove the hardcoded offset as it is a breaking change
-          // const tzOffset = incomingDate.getTimezoneOffset() / 60
-          const incomingOffset = incomingDate.getTimezoneOffset() / 60;
-          const originalHour = incomingDate.getHours() + incomingOffset;
-          incomingDate.setHours(originalHour);
-          // Convert the original date as picked into the desired timezone.
-          const dateToSelectedTz = transpose(incomingDate, TZDateWithSelectedTz);
-          setValue(dateToSelectedTz.toISOString() || null);
+    t9 = value_0;
+  }
+  const displayedValue = t9;
+  let t10;
+  if ($[13] !== field) {
+    t10 = mergeFieldStyles(field);
+    $[13] = field;
+    $[14] = t10;
+  } else {
+    t10 = $[14];
+  }
+  const styles = t10;
+  let t11;
+  if ($[15] !== disabled || $[16] !== isDateOnly || $[17] !== readOnly || $[18] !== selectedTimezone || $[19] !== setValue || $[20] !== timezone) {
+    t11 = incomingDate => {
+      if (!(readOnly || disabled)) {
+        if (timezone && selectedTimezone && incomingDate) {
+          const TZDateWithSelectedTz = TZDate.tz(selectedTimezone);
+          if (isDateOnly) {
+            const incomingOffset = incomingDate.getTimezoneOffset() / 60;
+            const originalHour = incomingDate.getHours() + incomingOffset;
+            incomingDate.setHours(originalHour);
+            const dateToSelectedTz = transpose(incomingDate, TZDateWithSelectedTz);
+            setValue(dateToSelectedTz.toISOString() || null);
+          } else {
+            const dateToUserTz = new TZDate(incomingDate);
+            const dateWithTimezone_0 = transpose(dateToUserTz, TZDateWithSelectedTz);
+            setValue(dateWithTimezone_0.toISOString() || null);
+          }
         } else {
-          // Creates a TZDate instance for the user's timezone  — this is default behaviour of TZDate as it wraps the Date constructor
-          const dateToUserTz = new TZDate(incomingDate);
-          // Transpose the date to the selected timezone
-          const dateWithTimezone_0 = transpose(dateToUserTz, TZDateWithSelectedTz);
-          setValue(dateWithTimezone_0.toISOString() || null);
+          setValue(incomingDate?.toISOString() || null);
         }
-      } else {
-        setValue(incomingDate?.toISOString() || null);
       }
+    };
+    $[15] = disabled;
+    $[16] = isDateOnly;
+    $[17] = readOnly;
+    $[18] = selectedTimezone;
+    $[19] = setValue;
+    $[20] = timezone;
+    $[21] = t11;
+  } else {
+    t11 = $[21];
+  }
+  const onChange = t11;
+  let t12;
+  if ($[22] !== dispatchFields || $[23] !== setModified || $[24] !== timezonePath) {
+    t12 = timezone_0 => {
+      if (timezonePath) {
+        dispatchFields({
+          type: "UPDATE",
+          path: timezonePath,
+          value: timezone_0
+        });
+        setModified(true);
+      }
+    };
+    $[22] = dispatchFields;
+    $[23] = setModified;
+    $[24] = timezonePath;
+    $[25] = t12;
+  } else {
+    t12 = $[25];
+  }
+  const onChangeTimezone = t12;
+  const t13 = [fieldBaseClass, baseClass, className, showError && `${baseClass}--has-error`, (readOnly || disabled) && "read-only"].filter(Boolean).join(" ");
+  const t14 = _jsx(RenderCustomComponent, {
+    CustomComponent: Label,
+    Fallback: _jsx(FieldLabel, {
+      htmlFor: inputId,
+      label,
+      localized,
+      path,
+      required
+    })
+  });
+  let t15;
+  if ($[26] !== path) {
+    let t16;
+    if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+      t16 = /\./g;
+      $[28] = t16;
+    } else {
+      t16 = $[28];
     }
-  }, [readOnly, disabled, timezone, selectedTimezone, isDateOnly, setValue]);
-  const onChangeTimezone = useCallback(timezone_0 => {
-    if (timezonePath) {
-      dispatchFields({
-        type: 'UPDATE',
-        path: timezonePath,
-        value: timezone_0
-      });
-      setModified(true);
-    }
-  }, [dispatchFields, setModified, timezonePath]);
-  return /*#__PURE__*/_jsxs("div", {
-    className: [fieldBaseClass, baseClass, className, showError && `${baseClass}--has-error`, (readOnly || disabled) && 'read-only'].filter(Boolean).join(' '),
+    t15 = path.replace(t16, "__");
+    $[26] = path;
+    $[27] = t15;
+  } else {
+    t15 = $[27];
+  }
+  return _jsxs("div", {
+    className: t13,
     style: styles,
-    children: [/*#__PURE__*/_jsx(RenderCustomComponent, {
-      CustomComponent: Label,
-      Fallback: /*#__PURE__*/_jsx(FieldLabel, {
-        label: label,
-        localized: localized,
-        path: path,
-        required: required
-      })
-    }), /*#__PURE__*/_jsxs("div", {
+    children: [t14, _jsxs("div", {
       className: `${fieldBaseClass}__wrap`,
-      id: `field-${path.replace(/\./g, '__')}`,
-      children: [/*#__PURE__*/_jsx(RenderCustomComponent, {
+      id: `field-${t15}`,
+      children: [_jsx(RenderCustomComponent, {
         CustomComponent: Error,
-        Fallback: /*#__PURE__*/_jsx(FieldError, {
-          path: path,
-          showError: showError
+        Fallback: _jsx(FieldError, {
+          path,
+          showError
         })
-      }), BeforeInput, /*#__PURE__*/_jsx(DatePickerField, {
+      }), BeforeInput, _jsx(DatePickerField, {
         ...datePickerProps,
-        onChange: onChange,
+        onChange,
         overrides: {
-          ...datePickerProps?.overrides
+          ...datePickerProps?.overrides,
+          id: inputId
         },
         placeholder: getTranslation(placeholder, i18n),
         readOnly: readOnly || disabled,
         value: displayedValue
-      }), timezone && supportedTimezones.length > 0 && /*#__PURE__*/_jsx(TimezonePicker, {
+      }), timezone && supportedTimezones.length > 0 && _jsx(TimezonePicker, {
         id: `${path}-timezone-picker`,
         onChange: onChangeTimezone,
         options: supportedTimezones,
         readOnly: readOnly || disabled,
         required: timezoneRequired,
-        selectedTimezone: selectedTimezone
+        selectedTimezone
       }), AfterInput]
-    }), /*#__PURE__*/_jsx(RenderCustomComponent, {
+    }), _jsx(RenderCustomComponent, {
       CustomComponent: Description,
-      Fallback: /*#__PURE__*/_jsx(FieldDescription, {
-        description: description,
-        path: path
+      Fallback: _jsx(FieldDescription, {
+        description,
+        path
       })
     })]
   });

package/dist/fields/DateTime/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["TZDateMini","TZDate","getTranslation","transpose","useCallback","useMemo","DatePickerField","RenderCustomComponent","TimezonePicker","FieldDescription","FieldError","FieldLabel","useForm","useFormFields","useField","withCondition","useConfig","useTranslation","mergeFieldStyles","fieldBaseClass","baseClass","DateTimeFieldComponent","props","field","admin","className","date","datePickerProps","description","placeholder","label","localized","required","timezone","path","pathFromProps","readOnly","validate","pickerAppearance","userTimezone","Intl","DateTimeFormat","resolvedOptions","timeZone","config","i18n","dispatchFields","setModified","memoizedValidate","value","options","customComponents","AfterInput","BeforeInput","Description","Error","Label","disabled","setValue","showError","potentiallyStalePath","timezonePath","timezoneField","fields","_","supportedTimezones","timezones","isDateOnly","includes","selectedTimezone","timezoneRequired","displayedValue","DateWithOriginalTz","tz","DateWithUserTz","modifiedDate","withTimeZone","dateWithTimezone","dateWithUserTimezone","toISOString","styles","onChange","incomingDate","TZDateWithSelectedTz","incomingOffset","getTimezoneOffset","originalHour","getHours","setHours","dateToSelectedTz","dateToUserTz","onChangeTimezone","type","_jsxs","filter","Boolean","join","style","_jsx","CustomComponent","Fallback","id","replace","overrides","length","DateTimeField"],"sources":["../../../src/fields/DateTime/index.tsx"],"sourcesContent":["'use client'\nimport type { DateFieldClientComponent, DateFieldValidation } from 'payload'\n\nimport { TZDateMini as TZDate } from '@date-fns/tz/date/mini'\nimport { getTranslation } from '@payloadcms/translations'\nimport { transpose } from 'date-fns'\nimport { useCallback, useMemo } from 'react'\n\nimport { DatePickerField } from '../../elements/DatePicker/index.js'\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { TimezonePicker } from '../../elements/TimezonePicker/index.js'\nimport { FieldDescription } from '../../fields/FieldDescription/index.js'\nimport { FieldError } from '../../fields/FieldError/index.js'\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useForm, useFormFields } from '../../forms/Form/context.js'\nimport { useField } from '../../forms/useField/index.js'\nimport './index.css'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { mergeFieldStyles } from '../mergeFieldStyles.js'\nimport { fieldBaseClass } from '../shared/index.js'\n\nconst baseClass = 'date-time-field'\n\nconst DateTimeFieldComponent: DateFieldClientComponent = (props) => {\n  const {\n    field,\n    field: {\n      admin: { className, date: datePickerProps, description, placeholder } = {},\n      label,\n      localized,\n      required,\n      timezone,\n    },\n    path: pathFromProps,\n    readOnly,\n    validate,\n  } = props\n\n  const pickerAppearance = datePickerProps?.pickerAppearance || 'default'\n\n  // Get the user timezone so we can adjust the displayed value against it\n  const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone\n\n  const { config } = useConfig()\n  const { i18n } = useTranslation()\n  const { dispatchFields, setModified } = useForm()\n\n  const memoizedValidate: DateFieldValidation = useCallback(\n    (value, options) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...options, required })\n      }\n    },\n    [validate, required],\n  )\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    disabled,\n    path,\n    setValue,\n    showError,\n    value,\n  } = useField<string>({\n    potentiallyStalePath: pathFromProps,\n    validate: memoizedValidate,\n  })\n\n  const timezonePath = path + '_tz'\n  const timezoneField = useFormFields(([fields, _]) => fields?.[timezonePath])\n\n  const supportedTimezones = useMemo(() => {\n    if (timezone && typeof timezone === 'object' && timezone.supportedTimezones) {\n      return timezone.supportedTimezones\n    }\n\n    return config.admin.timezones.supportedTimezones\n  }, [config.admin.timezones.supportedTimezones, timezone])\n\n  /**\n   * Date appearance doesn't include timestamps,\n   * which means we need to pin the time to always 12:00 for the selected date\n   */\n  const isDateOnly = ['dayOnly', 'default', 'monthOnly'].includes(pickerAppearance)\n  const selectedTimezone = timezoneField?.value as string\n  const timezoneRequired =\n    required || (timezone && typeof timezone === 'object' && timezone.required)\n\n  // The displayed value should be the original value, adjusted to the user's timezone\n  const displayedValue = useMemo(() => {\n    if (timezone && selectedTimezone && userTimezone && value) {\n      // Create TZDate instances for the selected timezone and the user's timezone\n      // These instances allow us to transpose the date between timezones while keeping the same time value\n      const DateWithOriginalTz = TZDate.tz(selectedTimezone)\n      const DateWithUserTz = TZDate.tz(userTimezone)\n\n      const modifiedDate = new TZDate(value).withTimeZone(selectedTimezone)\n\n      // Transpose the date to the selected timezone\n      const dateWithTimezone = transpose(modifiedDate, DateWithOriginalTz)\n\n      // Transpose the date to the user's timezone - this is necessary because the react-datepicker component insists on displaying the date in the user's timezone\n      const dateWithUserTimezone = transpose(dateWithTimezone, DateWithUserTz)\n\n      return dateWithUserTimezone.toISOString()\n    }\n\n    return value\n  }, [timezone, selectedTimezone, value, userTimezone])\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  const onChange = useCallback(\n    (incomingDate: Date) => {\n      if (!(readOnly || disabled)) {\n        if (timezone && selectedTimezone && incomingDate) {\n          // Create TZDate instances for the selected timezone\n          const TZDateWithSelectedTz = TZDate.tz(selectedTimezone)\n\n          if (isDateOnly) {\n            // We need to offset this hardcoded hour offset from the DatePicker elemenent\n            // this can be removed in 4.0 when we remove the hardcoded offset as it is a breaking change\n            // const tzOffset = incomingDate.getTimezoneOffset() / 60\n            const incomingOffset = incomingDate.getTimezoneOffset() / 60\n            const originalHour = incomingDate.getHours() + incomingOffset\n            incomingDate.setHours(originalHour)\n\n            // Convert the original date as picked into the desired timezone.\n            const dateToSelectedTz = transpose(incomingDate, TZDateWithSelectedTz)\n\n            setValue(dateToSelectedTz.toISOString() || null)\n          } else {\n            // Creates a TZDate instance for the user's timezone  — this is default behaviour of TZDate as it wraps the Date constructor\n            const dateToUserTz = new TZDate(incomingDate)\n            // Transpose the date to the selected timezone\n            const dateWithTimezone = transpose(dateToUserTz, TZDateWithSelectedTz)\n\n            setValue(dateWithTimezone.toISOString() || null)\n          }\n        } else {\n          setValue(incomingDate?.toISOString() || null)\n        }\n      }\n    },\n    [readOnly, disabled, timezone, selectedTimezone, isDateOnly, setValue],\n  )\n\n  const onChangeTimezone = useCallback(\n    (timezone: string) => {\n      if (timezonePath) {\n        dispatchFields({\n          type: 'UPDATE',\n          path: timezonePath,\n          value: timezone,\n        })\n\n        setModified(true)\n      }\n    },\n    [dispatchFields, setModified, timezonePath],\n  )\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        baseClass,\n        className,\n        showError && `${baseClass}--has-error`,\n        (readOnly || disabled) && 'read-only',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={styles}\n    >\n      <RenderCustomComponent\n        CustomComponent={Label}\n        Fallback={\n          <FieldLabel label={label} localized={localized} path={path} required={required} />\n        }\n      />\n      <div className={`${fieldBaseClass}__wrap`} id={`field-${path.replace(/\\./g, '__')}`}>\n        <RenderCustomComponent\n          CustomComponent={Error}\n          Fallback={<FieldError path={path} showError={showError} />}\n        />\n        {BeforeInput}\n        <DatePickerField\n          {...datePickerProps}\n          onChange={onChange}\n          overrides={{\n            ...datePickerProps?.overrides,\n          }}\n          placeholder={getTranslation(placeholder, i18n)}\n          readOnly={readOnly || disabled}\n          value={displayedValue}\n        />\n        {timezone && supportedTimezones.length > 0 && (\n          <TimezonePicker\n            id={`${path}-timezone-picker`}\n            onChange={onChangeTimezone}\n            options={supportedTimezones}\n            readOnly={readOnly || disabled}\n            required={timezoneRequired}\n            selectedTimezone={selectedTimezone}\n          />\n        )}\n        {AfterInput}\n      </div>\n      <RenderCustomComponent\n        CustomComponent={Description}\n        Fallback={<FieldDescription description={description} path={path} />}\n      />\n    </div>\n  )\n}\n\nexport const DateTimeField = withCondition(DateTimeFieldComponent)\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","TZDateMini","TZDate","getTranslation","transpose","React","useCallback","useMemo","DatePickerField","RenderCustomComponent","TimezonePicker","FieldDescription","FieldError","FieldLabel","useForm","useFormFields","useField","withCondition","useConfig","useEditDepth","useTranslation","generateFieldID","mergeFieldStyles","fieldBaseClass","baseClass","DateTimeFieldComponent","props","$","field","t0","path","pathFromProps","readOnly","validate","admin","t1","label","localized","required","timezone","className","date","datePickerProps","description","placeholder","undefined","pickerAppearance","t2","Symbol","for","Intl","DateTimeFormat","resolvedOptions","userTimezone","timeZone","config","i18n","dispatchFields","setModified","uuid","editDepth","t3","value","options","memoizedValidate","t4","potentiallyStalePath","customComponents","t5","disabled","setValue","showError","value_0","AfterInput","BeforeInput","Description","Error","Label","inputId","overrides","id","timezonePath","t6","t7","fields","timezoneField","bb0","supportedTimezones","timezones","t8","isDateOnly","includes","selectedTimezone","timezoneRequired","t9","bb1","t10","DateWithOriginalTz","tz","DateWithUserTz","modifiedDate","withTimeZone","dateWithTimezone","dateWithUserTimezone","toISOString","displayedValue","styles","t11","incomingDate","TZDateWithSelectedTz","incomingOffset","getTimezoneOffset","originalHour","getHours","setHours","dateToSelectedTz","dateToUserTz","dateWithTimezone_0","onChange","t12","timezone_0","type","onChangeTimezone","t13","filter","Boolean","join","t14","_jsx","CustomComponent","Fallback","htmlFor","t16","t15","replace","_jsxs","style","children","length","DateTimeField"],"sources":["../../../src/fields/DateTime/index.tsx"],"sourcesContent":["'use client'\nimport type { DateFieldClientProps, DateFieldValidation } from 'payload'\n\nimport { TZDateMini as TZDate } from '@date-fns/tz/date/mini'\nimport { getTranslation } from '@payloadcms/translations'\nimport { transpose } from 'date-fns'\nimport React, { useCallback, useMemo } from 'react'\n\nimport { DatePickerField } from '../../elements/DatePicker/index.js'\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { TimezonePicker } from '../../elements/TimezonePicker/index.js'\nimport { FieldDescription } from '../../fields/FieldDescription/index.js'\nimport { FieldError } from '../../fields/FieldError/index.js'\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useForm, useFormFields } from '../../forms/Form/context.js'\nimport { useField } from '../../forms/useField/index.js'\nimport './index.css'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { generateFieldID } from '../../utilities/generateFieldID.js'\nimport { mergeFieldStyles } from '../mergeFieldStyles.js'\nimport { fieldBaseClass } from '../shared/index.js'\n\nconst baseClass = 'date-time-field'\n\nconst DateTimeFieldComponent: React.FC<DateFieldClientProps> = (props) => {\n  const {\n    field,\n    field: {\n      admin: { className, date: datePickerProps, description, placeholder } = {},\n      label,\n      localized,\n      required,\n      timezone,\n    },\n    path: pathFromProps,\n    readOnly,\n    validate,\n  } = props\n\n  const pickerAppearance = datePickerProps?.pickerAppearance || 'default'\n\n  // Get the user timezone so we can adjust the displayed value against it\n  const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone\n\n  const { config } = useConfig()\n  const { i18n } = useTranslation()\n  const { dispatchFields, setModified, uuid } = useForm()\n  const editDepth = useEditDepth()\n\n  const memoizedValidate: DateFieldValidation = useCallback(\n    (value, options) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...options, required })\n      }\n    },\n    [validate, required],\n  )\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    disabled,\n    path,\n    setValue,\n    showError,\n    value,\n  } = useField<string>({\n    potentiallyStalePath: pathFromProps,\n    validate: memoizedValidate,\n  })\n\n  const inputId =\n    datePickerProps?.overrides?.id ||\n    generateFieldID(path ?? '', editDepth, uuid ?? '', 'date-input')\n  const timezonePath = path + '_tz'\n  const timezoneField = useFormFields(([fields, _]) => fields?.[timezonePath])\n\n  const supportedTimezones = useMemo(() => {\n    if (timezone && typeof timezone === 'object' && timezone.supportedTimezones) {\n      return timezone.supportedTimezones\n    }\n\n    return config.admin.timezones.supportedTimezones\n  }, [config.admin.timezones.supportedTimezones, timezone])\n\n  /**\n   * Date appearance doesn't include timestamps,\n   * which means we need to pin the time to always 12:00 for the selected date\n   */\n  const isDateOnly = ['dayOnly', 'default', 'monthOnly'].includes(pickerAppearance)\n  const selectedTimezone = timezoneField?.value as string\n  const timezoneRequired =\n    required || (timezone && typeof timezone === 'object' && timezone.required)\n\n  // The displayed value should be the original value, adjusted to the user's timezone\n  const displayedValue = useMemo(() => {\n    if (timezone && selectedTimezone && userTimezone && value) {\n      // Create TZDate instances for the selected timezone and the user's timezone\n      // These instances allow us to transpose the date between timezones while keeping the same time value\n      const DateWithOriginalTz = TZDate.tz(selectedTimezone)\n      const DateWithUserTz = TZDate.tz(userTimezone)\n\n      const modifiedDate = new TZDate(value).withTimeZone(selectedTimezone)\n\n      // Transpose the date to the selected timezone\n      const dateWithTimezone = transpose(modifiedDate, DateWithOriginalTz)\n\n      // Transpose the date to the user's timezone - this is necessary because the react-datepicker component insists on displaying the date in the user's timezone\n      const dateWithUserTimezone = transpose(dateWithTimezone, DateWithUserTz)\n\n      return dateWithUserTimezone.toISOString()\n    }\n\n    return value\n  }, [timezone, selectedTimezone, value, userTimezone])\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  const onChange = useCallback(\n    (incomingDate: Date) => {\n      if (!(readOnly || disabled)) {\n        if (timezone && selectedTimezone && incomingDate) {\n          // Create TZDate instances for the selected timezone\n          const TZDateWithSelectedTz = TZDate.tz(selectedTimezone)\n\n          if (isDateOnly) {\n            // We need to offset this hardcoded hour offset from the DatePicker elemenent\n            // this can be removed in 4.0 when we remove the hardcoded offset as it is a breaking change\n            // const tzOffset = incomingDate.getTimezoneOffset() / 60\n            const incomingOffset = incomingDate.getTimezoneOffset() / 60\n            const originalHour = incomingDate.getHours() + incomingOffset\n            incomingDate.setHours(originalHour)\n\n            // Convert the original date as picked into the desired timezone.\n            const dateToSelectedTz = transpose(incomingDate, TZDateWithSelectedTz)\n\n            setValue(dateToSelectedTz.toISOString() || null)\n          } else {\n            // Creates a TZDate instance for the user's timezone  — this is default behaviour of TZDate as it wraps the Date constructor\n            const dateToUserTz = new TZDate(incomingDate)\n            // Transpose the date to the selected timezone\n            const dateWithTimezone = transpose(dateToUserTz, TZDateWithSelectedTz)\n\n            setValue(dateWithTimezone.toISOString() || null)\n          }\n        } else {\n          setValue(incomingDate?.toISOString() || null)\n        }\n      }\n    },\n    [readOnly, disabled, timezone, selectedTimezone, isDateOnly, setValue],\n  )\n\n  const onChangeTimezone = useCallback(\n    (timezone: string) => {\n      if (timezonePath) {\n        dispatchFields({\n          type: 'UPDATE',\n          path: timezonePath,\n          value: timezone,\n        })\n\n        setModified(true)\n      }\n    },\n    [dispatchFields, setModified, timezonePath],\n  )\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        baseClass,\n        className,\n        showError && `${baseClass}--has-error`,\n        (readOnly || disabled) && 'read-only',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={styles}\n    >\n      <RenderCustomComponent\n        CustomComponent={Label}\n        Fallback={\n          <FieldLabel\n            htmlFor={inputId}\n            label={label}\n            localized={localized}\n            path={path}\n            required={required}\n          />\n        }\n      />\n      <div className={`${fieldBaseClass}__wrap`} id={`field-${path.replace(/\\./g, '__')}`}>\n        <RenderCustomComponent\n          CustomComponent={Error}\n          Fallback={<FieldError path={path} showError={showError} />}\n        />\n        {BeforeInput}\n        <DatePickerField\n          {...datePickerProps}\n          onChange={onChange}\n          overrides={{\n            ...datePickerProps?.overrides,\n            id: inputId,\n          }}\n          placeholder={getTranslation(placeholder, i18n)}\n          readOnly={readOnly || disabled}\n          value={displayedValue}\n        />\n        {timezone && supportedTimezones.length > 0 && (\n          <TimezonePicker\n            id={`${path}-timezone-picker`}\n            onChange={onChangeTimezone}\n            options={supportedTimezones}\n            readOnly={readOnly || disabled}\n            required={timezoneRequired}\n            selectedTimezone={selectedTimezone}\n          />\n        )}\n        {AfterInput}\n      </div>\n      <RenderCustomComponent\n        CustomComponent={Description}\n        Fallback={<FieldDescription description={description} path={path} />}\n      />\n    </div>\n  )\n}\n\nexport const DateTimeField = withCondition(DateTimeFieldComponent)\n"],"mappings":"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","ignoreList":[]}

package/dist/fields/Email/index.css

@@ -5,11 +5,11 @@
     flex-direction: column;
     gap: var(--spacer-2);
 
-    &.error input {
-      border-color: var(--border-danger-strong);
+    &.error input:not(:focus) {
+      border-color: var(--field-color-border-error);
 
       &:hover {
-        border-color: var(--border-danger-strong);
+        border-color: var(--field-color-border-error);
       }
     }
   }

package/dist/fields/Email/index.d.ts

@@ -1,10 +1,5 @@
-import type { EmailFieldValidation } from 'payload';
+import type { EmailFieldClientProps } from 'payload';
 import React from 'react';
 import './index.css';
-export declare const EmailField: React.FC<{
-    readonly path: string;
-    readonly validate?: EmailFieldValidation;
-} & {
-    readonly field: Omit<import("payload").EmailFieldClient, "type"> & Partial<Pick<import("payload").EmailFieldClient, "type">>;
-} & Omit<import("payload").ClientComponentProps, "customComponents" | "field">>;
+export declare const EmailField: React.FC<EmailFieldClientProps>;
 //# sourceMappingURL=index.d.ts.map

package/dist/fields/Email/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Email/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAGV,oBAAoB,EACrB,MAAM,SAAS,CAAA;AAGhB,OAAO,KAA+B,MAAM,OAAO,CAAA;AAWnD,OAAO,aAAa,CAAA;AA+FpB,eAAO,MAAM,UAAU;;;;;+EAAqC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Email/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAwB,MAAM,SAAS,CAAA;AAG1E,OAAO,KAA+B,MAAM,OAAO,CAAA;AAcnD,OAAO,aAAa,CAAA;AAqGpB,eAAO,MAAM,UAAU,iCAAqC,CAAA"}

package/dist/fields/Email/index.js

@@ -6,9 +6,12 @@ import React, { useCallback, useMemo } from 'react';
 import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
 import { FieldDescription } from '../../fields/FieldDescription/index.js';
 import { FieldError } from '../../fields/FieldError/index.js';
+import { useForm } from '../../forms/Form/context.js';
 import { useField } from '../../forms/useField/index.js';
 import { withCondition } from '../../forms/withCondition/index.js';
+import { useEditDepth } from '../../providers/EditDepth/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
+import { generateFieldID } from '../../utilities/generateFieldID.js';
 import { FieldLabel } from '../FieldLabel/index.js';
 import { mergeFieldStyles } from '../mergeFieldStyles.js';
 import { fieldBaseClass } from '../shared/index.js';
@@ -59,6 +62,11 @@ const EmailFieldComponent = props => {
     potentiallyStalePath: pathFromProps,
     validate: memoizedValidate
   });
+  const {
+    uuid
+  } = useForm();
+  const editDepth = useEditDepth();
+  const errorID = showError ? generateFieldID(path, editDepth, uuid, 'field-error') : undefined;
   const styles = useMemo(() => mergeFieldStyles(field), [field]);
   return /*#__PURE__*/_jsxs("div", {
     className: [fieldBaseClass, 'email', className, showError && 'error', (readOnly || disabled) && 'read-only'].filter(Boolean).join(' '),
@@ -66,6 +74,7 @@ const EmailFieldComponent = props => {
     children: [/*#__PURE__*/_jsx(RenderCustomComponent, {
       CustomComponent: Label,
       Fallback: /*#__PURE__*/_jsx(FieldLabel, {
+        hasRequiredAccessibleState: true,
         label: label,
         localized: localized,
         path: path,
@@ -80,6 +89,8 @@ const EmailFieldComponent = props => {
           showError: showError
         })
       }), BeforeInput, /*#__PURE__*/_jsx("input", {
+        "aria-describedby": errorID,
+        "aria-invalid": showError || undefined,
         autoComplete: autoComplete,
         className: "form-input",
         disabled: readOnly || disabled,

package/dist/fields/Email/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["getTranslation","React","useCallback","useMemo","RenderCustomComponent","FieldDescription","FieldError","useField","withCondition","useTranslation","FieldLabel","mergeFieldStyles","fieldBaseClass","EmailFieldComponent","props","field","admin","autoComplete","className","description","placeholder","label","localized","required","path","pathFromProps","readOnly","validate","i18n","memoizedValidate","value","options","customComponents","AfterInput","BeforeInput","Description","Error","Label","disabled","setValue","showError","potentiallyStalePath","styles","_jsxs","filter","Boolean","join","style","_jsx","CustomComponent","Fallback","id","replace","name","onChange","type","EmailField"],"sources":["../../../src/fields/Email/index.tsx"],"sourcesContent":["'use client'\nimport type {\n  EmailFieldClientComponent,\n  EmailFieldClientProps,\n  EmailFieldValidation,\n} from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useCallback, useMemo } from 'react'\n\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { FieldDescription } from '../../fields/FieldDescription/index.js'\nimport { FieldError } from '../../fields/FieldError/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { FieldLabel } from '../FieldLabel/index.js'\nimport { mergeFieldStyles } from '../mergeFieldStyles.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.css'\n\nconst EmailFieldComponent: EmailFieldClientComponent = (props) => {\n  const {\n    field,\n    field: {\n      admin: {\n        autoComplete,\n        className,\n        description,\n        placeholder,\n      } = {} as EmailFieldClientProps['field']['admin'],\n      label,\n      localized,\n      required,\n    } = {} as EmailFieldClientProps['field'],\n    path: pathFromProps,\n    readOnly,\n    validate,\n  } = props\n\n  const { i18n } = useTranslation()\n\n  const memoizedValidate: EmailFieldValidation = useCallback(\n    (value, options) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...options, required })\n      }\n    },\n    [validate, required],\n  )\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    disabled,\n    path,\n    setValue,\n    showError,\n    value,\n  } = useField({\n    potentiallyStalePath: pathFromProps,\n    validate: memoizedValidate,\n  })\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        'email',\n        className,\n        showError && 'error',\n        (readOnly || disabled) && 'read-only',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={styles}\n    >\n      <RenderCustomComponent\n        CustomComponent={Label}\n        Fallback={\n          <FieldLabel label={label} localized={localized} path={path} required={required} />\n        }\n      />\n      <div className={`${fieldBaseClass}__wrap`}>\n        <RenderCustomComponent\n          CustomComponent={Error}\n          Fallback={<FieldError path={path} showError={showError} />}\n        />\n        {BeforeInput}\n        {/* disable eslint here because the label is dynamic */}\n        {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}\n        <input\n          autoComplete={autoComplete}\n          className=\"form-input\"\n          disabled={readOnly || disabled}\n          id={`field-${path.replace(/\\./g, '__')}`}\n          name={path}\n          onChange={setValue}\n          placeholder={getTranslation(placeholder, i18n)}\n          required={required}\n          type=\"email\"\n          value={(value as string) || ''}\n        />\n        {AfterInput}\n      </div>\n      <RenderCustomComponent\n        CustomComponent={Description}\n        Fallback={<FieldDescription description={description} path={path} />}\n      />\n    </div>\n  )\n}\n\nexport const EmailField = withCondition(EmailFieldComponent)\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["getTranslation","React","useCallback","useMemo","RenderCustomComponent","FieldDescription","FieldError","useForm","useField","withCondition","useEditDepth","useTranslation","generateFieldID","FieldLabel","mergeFieldStyles","fieldBaseClass","EmailFieldComponent","props","field","admin","autoComplete","className","description","placeholder","label","localized","required","path","pathFromProps","readOnly","validate","i18n","memoizedValidate","value","options","customComponents","AfterInput","BeforeInput","Description","Error","Label","disabled","setValue","showError","potentiallyStalePath","uuid","editDepth","errorID","undefined","styles","_jsxs","filter","Boolean","join","style","_jsx","CustomComponent","Fallback","hasRequiredAccessibleState","id","replace","name","onChange","type","EmailField"],"sources":["../../../src/fields/Email/index.tsx"],"sourcesContent":["'use client'\nimport type { EmailFieldClientProps, EmailFieldValidation } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useCallback, useMemo } from 'react'\n\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { FieldDescription } from '../../fields/FieldDescription/index.js'\nimport { FieldError } from '../../fields/FieldError/index.js'\nimport { useForm } from '../../forms/Form/context.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { generateFieldID } from '../../utilities/generateFieldID.js'\nimport { FieldLabel } from '../FieldLabel/index.js'\nimport { mergeFieldStyles } from '../mergeFieldStyles.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.css'\n\nconst EmailFieldComponent: React.FC<EmailFieldClientProps> = (props) => {\n  const {\n    field,\n    field: {\n      admin: { autoComplete, className, description, placeholder } = {},\n      label,\n      localized,\n      required,\n    } = {} as EmailFieldClientProps['field'],\n    path: pathFromProps,\n    readOnly,\n    validate,\n  } = props\n\n  const { i18n } = useTranslation()\n\n  const memoizedValidate: EmailFieldValidation = useCallback(\n    (value, options) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...options, required })\n      }\n    },\n    [validate, required],\n  )\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    disabled,\n    path,\n    setValue,\n    showError,\n    value,\n  } = useField({\n    potentiallyStalePath: pathFromProps,\n    validate: memoizedValidate,\n  })\n\n  const { uuid } = useForm()\n  const editDepth = useEditDepth()\n  const errorID = showError ? generateFieldID(path, editDepth, uuid, 'field-error') : undefined\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        'email',\n        className,\n        showError && 'error',\n        (readOnly || disabled) && 'read-only',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={styles}\n    >\n      <RenderCustomComponent\n        CustomComponent={Label}\n        Fallback={\n          <FieldLabel\n            hasRequiredAccessibleState\n            label={label}\n            localized={localized}\n            path={path}\n            required={required}\n          />\n        }\n      />\n      <div className={`${fieldBaseClass}__wrap`}>\n        <RenderCustomComponent\n          CustomComponent={Error}\n          Fallback={<FieldError path={path} showError={showError} />}\n        />\n        {BeforeInput}\n        {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}\n        <input\n          aria-describedby={errorID}\n          aria-invalid={showError || undefined}\n          autoComplete={autoComplete}\n          className=\"form-input\"\n          disabled={readOnly || disabled}\n          id={`field-${path.replace(/\\./g, '__')}`}\n          name={path}\n          onChange={setValue}\n          placeholder={getTranslation(placeholder, i18n)}\n          required={required}\n          type=\"email\"\n          value={(value as string) || ''}\n        />\n        {AfterInput}\n      </div>\n      <RenderCustomComponent\n        CustomComponent={Description}\n        Fallback={<FieldDescription description={description} path={path} />}\n      />\n    </div>\n  )\n}\n\nexport const EmailField = withCondition(EmailFieldComponent)\n"],"mappings":"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","ignoreList":[]}