@payloadcms/ui 4.0.0-internal.016994f → 4.0.0-internal.0731f09

package/dist/fields/ConfirmPassword/index.js

@@ -4,15 +4,18 @@ import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { confirmPassword } from 'payload/shared';
 import React, { useState } from 'react';
+import { useForm } from '../../forms/Form/context.js';
 import { useField } from '../../forms/useField/index.js';
 import { EyeIcon } from '../../icons/Eye/index.js';
+import { useEditDepth } from '../../providers/EditDepth/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
+import { generateFieldID } from '../../utilities/generateFieldID.js';
 import { FieldError } from '../FieldError/index.js';
 import { FieldLabel } from '../FieldLabel/index.js';
 import { fieldBaseClass } from '../shared/index.js';
 import './index.css';
 export const ConfirmPasswordField = props => {
-  const $ = _c(15);
+  const $ = _c(18);
   const {
     disabled: disabledFromProps,
     path: t0,
@@ -41,32 +44,37 @@ export const ConfirmPasswordField = props => {
     showError,
     value: value_0
   } = useField(t2);
-  const isDisabled = !!(disabled || disabledFromProps);
-  const t3 = showError && "error";
-  const t4 = isDisabled && "read-only";
-  let t5;
-  if ($[2] !== t3 || $[3] !== t4) {
-    t5 = [fieldBaseClass, "confirm-password", t3, t4].filter(Boolean);
-    $[2] = t3;
-    $[3] = t4;
-    $[4] = t5;
-  } else {
-    t5 = $[4];
-  }
-  const t6 = t5.join(" ");
-  let t7;
-  if ($[5] !== isDisabled || $[6] !== path || $[7] !== setValue || $[8] !== showPassword || $[9] !== size || $[10] !== t || $[11] !== t6 || $[12] !== value_0) {
-    let t8;
-    if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
-      t8 = () => setShowPassword(_temp2);
-      $[14] = t8;
+  const {
+    uuid
+  } = useForm();
+  const editDepth = useEditDepth();
+  let t3;
+  if ($[2] !== disabled || $[3] !== disabledFromProps || $[4] !== editDepth || $[5] !== path || $[6] !== setValue || $[7] !== showError || $[8] !== showPassword || $[9] !== size || $[10] !== t || $[11] !== uuid || $[12] !== value_0) {
+    const errorID = showError ? generateFieldID(path, editDepth, uuid, "field-error") : undefined;
+    const isDisabled = !!(disabled || disabledFromProps);
+    const t4 = showError && "error";
+    const t5 = isDisabled && "read-only";
+    let t6;
+    if ($[14] !== t4 || $[15] !== t5) {
+      t6 = [fieldBaseClass, "confirm-password", t4, t5].filter(Boolean);
+      $[14] = t4;
+      $[15] = t5;
+      $[16] = t6;
+    } else {
+      t6 = $[16];
+    }
+    let t7;
+    if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+      t7 = () => setShowPassword(_temp2);
+      $[17] = t7;
     } else {
-      t8 = $[14];
+      t7 = $[17];
     }
-    t7 = _jsxs("div", {
-      className: t6,
+    t3 = _jsxs("div", {
+      className: t6.join(" "),
       "data-size": size,
       children: [_jsx(FieldLabel, {
+        hasRequiredAccessibleState: true,
         htmlFor: "field-confirm-password",
         label: t("authentication:confirmPassword"),
         required: true
@@ -77,7 +85,10 @@ export const ConfirmPasswordField = props => {
         }), _jsxs("div", {
           className: "confirm-password__input-wrap",
           children: [_jsx("input", {
+            "aria-describedby": errorID,
+            "aria-invalid": showError || undefined,
             "aria-label": t("authentication:confirmPassword"),
+            "aria-required": true,
             autoComplete: "off",
             className: "form-input",
             disabled: isDisabled,
@@ -90,7 +101,7 @@ export const ConfirmPasswordField = props => {
             "aria-label": t(showPassword ? "fields:hidePassword" : "fields:showPassword"),
             className: "confirm-password__toggle-button",
             disabled: isDisabled,
-            onClick: t8,
+            onClick: t7,
             type: "button",
             children: _jsx(EyeIcon, {
               active: showPassword,
@@ -100,19 +111,22 @@ export const ConfirmPasswordField = props => {
         })]
       })]
     });
-    $[5] = isDisabled;
-    $[6] = path;
-    $[7] = setValue;
+    $[2] = disabled;
+    $[3] = disabledFromProps;
+    $[4] = editDepth;
+    $[5] = path;
+    $[6] = setValue;
+    $[7] = showError;
     $[8] = showPassword;
     $[9] = size;
     $[10] = t;
-    $[11] = t6;
+    $[11] = uuid;
     $[12] = value_0;
-    $[13] = t7;
+    $[13] = t3;
   } else {
-    t7 = $[13];
+    t3 = $[13];
   }
-  return t7;
+  return t3;
 };
 function _temp(value, options) {
   return confirmPassword(value, {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","confirmPassword","React","useState","useField","EyeIcon","useTranslation","FieldError","FieldLabel","fieldBaseClass","ConfirmPasswordField","props","$","disabled","disabledFromProps","path","t0","size","t1","undefined","t","showPassword","setShowPassword","t2","validate","_temp","setValue","showError","value","value_0","isDisabled","t3","t4","t5","filter","Boolean","t6","join","t7","t8","Symbol","for","_temp2","_jsxs","className","children","_jsx","htmlFor","label","required","autoComplete","id","name","onChange","type","onClick","active","options","prev"],"sources":["../../../src/fields/ConfirmPassword/index.tsx"],"sourcesContent":["'use client'\n\nimport { confirmPassword } from 'payload/shared'\nimport React, { useState } from 'react'\n\nimport { useField } from '../../forms/useField/index.js'\nimport { EyeIcon } from '../../icons/Eye/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { FieldError } from '../FieldError/index.js'\nimport { FieldLabel } from '../FieldLabel/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.css'\n\nexport type ConfirmPasswordFieldProps = {\n  readonly disabled?: boolean\n  readonly path?: string\n  /**\n   * Controls the height of the input. Defaults to `'large'`.\n   */\n  readonly size?: 'large' | 'medium'\n}\n\nexport const ConfirmPasswordField: React.FC<ConfirmPasswordFieldProps> = (props) => {\n  const { disabled: disabledFromProps, path = 'confirm-password', size = 'large' } = props\n  const { t } = useTranslation()\n  const [showPassword, setShowPassword] = useState(false)\n\n  const { disabled, setValue, showError, value } = useField({\n    path,\n    validate: (value, options) => {\n      return confirmPassword(value, {\n        name: 'confirm-password',\n        type: 'text',\n        required: true,\n        ...options,\n      })\n    },\n  })\n\n  const isDisabled = !!(disabled || disabledFromProps)\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        'confirm-password',\n        showError && 'error',\n        isDisabled && 'read-only',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      data-size={size}\n    >\n      <FieldLabel\n        htmlFor=\"field-confirm-password\"\n        label={t('authentication:confirmPassword')}\n        required\n      />\n      <div className={`${fieldBaseClass}__wrap`}>\n        <FieldError path={path} />\n        <div className=\"confirm-password__input-wrap\">\n          <input\n            aria-label={t('authentication:confirmPassword')}\n            autoComplete=\"off\"\n            className=\"form-input\"\n            disabled={isDisabled}\n            id=\"field-confirm-password\"\n            name=\"confirm-password\"\n            onChange={setValue}\n            type={showPassword ? 'text' : 'password'}\n            value={(value as string) || ''}\n          />\n          <button\n            aria-label={t(showPassword ? 'fields:hidePassword' : 'fields:showPassword')}\n            className=\"confirm-password__toggle-button\"\n            disabled={isDisabled}\n            onClick={() => setShowPassword((prev) => !prev)}\n            type=\"button\"\n          >\n            <EyeIcon active={showPassword} size={24} />\n          </button>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","confirmPassword","React","useState","useForm","useField","EyeIcon","useEditDepth","useTranslation","generateFieldID","FieldError","FieldLabel","fieldBaseClass","ConfirmPasswordField","props","$","disabled","disabledFromProps","path","t0","size","t1","undefined","t","showPassword","setShowPassword","t2","validate","_temp","setValue","showError","value","value_0","uuid","editDepth","t3","errorID","isDisabled","t4","t5","t6","filter","Boolean","t7","Symbol","for","_temp2","_jsxs","className","join","children","_jsx","hasRequiredAccessibleState","htmlFor","label","required","autoComplete","id","name","onChange","type","onClick","active","options","prev"],"sources":["../../../src/fields/ConfirmPassword/index.tsx"],"sourcesContent":["'use client'\n\nimport { confirmPassword } from 'payload/shared'\nimport React, { useState } from 'react'\n\nimport { useForm } from '../../forms/Form/context.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { EyeIcon } from '../../icons/Eye/index.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { generateFieldID } from '../../utilities/generateFieldID.js'\nimport { FieldError } from '../FieldError/index.js'\nimport { FieldLabel } from '../FieldLabel/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.css'\n\nexport type ConfirmPasswordFieldProps = {\n  readonly disabled?: boolean\n  readonly path?: string\n  /**\n   * Controls the height of the input. Defaults to `'large'`.\n   */\n  readonly size?: 'large' | 'medium'\n}\n\nexport const ConfirmPasswordField: React.FC<ConfirmPasswordFieldProps> = (props) => {\n  const { disabled: disabledFromProps, path = 'confirm-password', size = 'large' } = props\n  const { t } = useTranslation()\n  const [showPassword, setShowPassword] = useState(false)\n\n  const { disabled, setValue, showError, value } = useField({\n    path,\n    validate: (value, options) => {\n      return confirmPassword(value, {\n        name: 'confirm-password',\n        type: 'text',\n        required: true,\n        ...options,\n      })\n    },\n  })\n\n  const { uuid } = useForm()\n  const editDepth = useEditDepth()\n  const errorID = showError ? generateFieldID(path, editDepth, uuid, 'field-error') : undefined\n\n  const isDisabled = !!(disabled || disabledFromProps)\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        'confirm-password',\n        showError && 'error',\n        isDisabled && 'read-only',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      data-size={size}\n    >\n      <FieldLabel\n        hasRequiredAccessibleState\n        htmlFor=\"field-confirm-password\"\n        label={t('authentication:confirmPassword')}\n        required\n      />\n      <div className={`${fieldBaseClass}__wrap`}>\n        <FieldError path={path} />\n        <div className=\"confirm-password__input-wrap\">\n          <input\n            aria-describedby={errorID}\n            aria-invalid={showError || undefined}\n            aria-label={t('authentication:confirmPassword')}\n            aria-required\n            autoComplete=\"off\"\n            className=\"form-input\"\n            disabled={isDisabled}\n            id=\"field-confirm-password\"\n            name=\"confirm-password\"\n            onChange={setValue}\n            type={showPassword ? 'text' : 'password'}\n            value={(value as string) || ''}\n          />\n          <button\n            aria-label={t(showPassword ? 'fields:hidePassword' : 'fields:showPassword')}\n            className=\"confirm-password__toggle-button\"\n            disabled={isDisabled}\n            onClick={() => setShowPassword((prev) => !prev)}\n            type=\"button\"\n          >\n            <EyeIcon active={showPassword} size={24} />\n          </button>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,SAASC,eAAe,QAAQ;AAChC,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,OAAO,QAAQ;AACxB,SAASC,QAAQ,QAAQ;AACzB,SAASC,OAAO,QAAQ;AACxB,SAASC,YAAY,QAAQ;AAC7B,SAASC,cAAc,QAAQ;AAC/B,SAASC,eAAe,QAAQ;AAChC,SAASC,UAAU,QAAQ;AAC3B,SAASC,UAAU,QAAQ;AAC3B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAWP,OAAO,MAAMC,oBAAA,GAA4DC,KAAA;EAAA,MAAAC,CAAA,GAAAf,EAAA;EACvE;IAAAgB,QAAA,EAAAC,iBAAA;IAAAC,IAAA,EAAAC,EAAA;IAAAC,IAAA,EAAAC;EAAA,IAAmFP,KAAA;EAA9C,MAAAI,IAAA,GAAAC,EAAyB,KAAzBG,SAAyB,GAAzB,kBAAyB,GAAzBH,EAAyB;EAAE,MAAAC,IAAA,GAAAC,EAAc,KAAdC,SAAc,GAAd,OAAc,GAAdD,EAAc;EAC9E;IAAAE;EAAA,IAAcf,cAAA;EACd,OAAAgB,YAAA,EAAAC,eAAA,IAAwCtB,QAAA,CAAS;EAAA,IAAAuB,EAAA;EAAA,IAAAX,CAAA,QAAAG,IAAA;IAESQ,EAAA;MAAAR,IAAA;MAAAS,QAAA,EAE9CC;IAQZ;IAAAb,CAAA,MAAAG,IAAA;IAAAH,CAAA,MAAAW,EAAA;EAAA;IAAAA,EAAA,GAAAX,CAAA;EAAA;EAVA;IAAAC,QAAA;IAAAa,QAAA;IAAAC,SAAA;IAAAC,KAAA,EAAAC;EAAA,IAAiD3B,QAAA,CAASqB,EAU1D;EAEA;IAAAO;EAAA,IAAiB7B,OAAA;EACjB,MAAA8B,SAAA,GAAkB3B,YAAA;EAAA,IAAA4B,EAAA;EAAA,IAAApB,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAE,iBAAA,IAAAF,CAAA,QAAAmB,SAAA,IAAAnB,CAAA,QAAAG,IAAA,IAAAH,CAAA,QAAAc,QAAA,IAAAd,CAAA,QAAAe,SAAA,IAAAf,CAAA,QAAAS,YAAA,IAAAT,CAAA,QAAAK,IAAA,IAAAL,CAAA,SAAAQ,CAAA,IAAAR,CAAA,SAAAkB,IAAA,IAAAlB,CAAA,SAAAiB,OAAA;IAClB,MAAAI,OAAA,GAAgBN,SAAA,GAAYrB,eAAA,CAAgBS,IAAA,EAAMgB,SAAA,EAAWD,IAAA,EAAM,aAAiB,IAApEX,SAAoE;IAEpF,MAAAe,UAAA,GAAmB,CAAC,EAAErB,QAA4B,IAA5BC,iBAA4B;IAO5C,MAAAqB,EAAA,GAAAR,SAAa,IAAb,OAAa;IACb,MAAAS,EAAA,GAAAF,UAAc,IAAd,WAAc;IAAA,IAAAG,EAAA;IAAA,IAAAzB,CAAA,SAAAuB,EAAA,IAAAvB,CAAA,SAAAwB,EAAA;MAJLC,EAAA,IACT5B,cAAA,EACA,oBACA0B,EAAa,EACbC,EAAc,CACf,CAAAE,MACQ,CAACC,OAAA;MAAA3B,CAAA,OAAAuB,EAAA;MAAAvB,CAAA,OAAAwB,EAAA;MAAAxB,CAAA,OAAAyB,EAAA;IAAA;MAAAA,EAAA,GAAAzB,CAAA;IAAA;IAAA,IAAA4B,EAAA;IAAA,IAAA5B,CAAA,SAAA6B,MAAA,CAAAC,GAAA;MA+BKF,EAAA,GAAAA,CAAA,KAAMlB,eAAA,CAAgBqB,MAAW;MAAA/B,CAAA,OAAA4B,EAAA;IAAA;MAAAA,EAAA,GAAA5B,CAAA;IAAA;IAtClDoB,EAAA,GAAAY,KAAA,CAAC;MAAAC,SAAA,EACYR,EAMD,CAAAS,IACH,CAAC;MAAA,aACG7B,IAAA;MAAA8B,QAAA,E,CAEXC,IAAA,CAACxC,UAAA;QAAAyC,0BAAA,EAC2B;QAAAC,OAAA,EAClB;QAAAC,KAAA,EACD/B,CAAA,CAAE;QAAAgC,QAAA,EACD;UAEVR,KAAA,CAAC;QAAAC,SAAA,EAAe,GAAGpC,cAAA,QAAsB;QAAAsC,QAAA,E,CACvCC,IAAA,CAACzC,UAAA;UAAAQ;YACD6B,KAAA,CAAC;UAAAC,SAAA,EAAc;UAAAE,QAAA,E,CACbC,IAAA,CAAC;YAAA,oBACmBf,OAAA;YAAA,gBACJN,SAAa,IAAbR,SAAa;YAAA,cACfC,CAAA,CAAE;YAAA,iBACD;YAAAiC,YAAA,EACA;YAAAR,SAAA,EACH;YAAAhC,QAAA,EACAqB,UAAA;YAAAoB,EAAA,EACP;YAAAC,IAAA,EACE;YAAAC,QAAA,EACK9B,QAAA;YAAA+B,IAAA,EACJpC,YAAA,SAAwB,GAAxB,UAAwB;YAAAO,KAAA,EACvBC,OAAqB,IAArB;cAETmB,IAAA,CAAC;YAAA,cACa5B,CAAA,CAAEC,YAAA,wBAAuC,GAAvC,qBAAuC;YAAAwB,SAAA,EAC3C;YAAAhC,QAAA,EACAqB,UAAA;YAAAwB,OAAA,EACDlB,EAAiC;YAAAiB,IAAA,EACrC;YAAAV,QAAA,EAELC,IAAA,CAAC7C,OAAA;cAAAwD,MAAA,EAAgBtC,YAAA;cAAAJ,IAAA,EAAoB;;;;;;;;;;;;;;;;;;;;;SAzC7Ce,E;CA+CJ;AAvEyE,SAAAP,MAAAG,KAAA,EAAAgC,OAAA;EAAA,OAQ5D9D,eAAA,CAAgB8B,KAAA,EAAO;IAAA2B,IAAA,EACtB;IAAAE,IAAA,EACA;IAAAL,QAAA,EACI;IAAA,GACPQ;EACL;AAAA;AAbmE,SAAAjB,OAAAkB,IAAA;EAAA,OA8DpB,CAACA,IAAA;AAAA","ignoreList":[]}

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
       })
     })]
   });