@payloadcms/ui 3.68.0-internal-debug.591ab42 → 3.68.0-internal-debug.e9b66ee

package/dist/fields/Collapsible/index.js

@@ -1,7 +1,6 @@
 'use client';
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { getTranslation } from '@payloadcms/translations';
-import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
+import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import { Collapsible as CollapsibleElement } from '../../elements/Collapsible/index.js';
 import { ErrorPill } from '../../elements/ErrorPill/index.js';
 import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
@@ -89,107 +88,26 @@ const CollapsibleFieldComponent = (props)=>{
     if (typeof collapsedOnMount !== 'boolean') {
         return null;
     }
-    return /*#__PURE__*/ _jsxDEV(Fragment, {
-        children: [
-            /*#__PURE__*/ _jsxDEV(WatchChildErrors, {
-                fields: fields,
-                // removes the 'collapsible' path segment, i.e. `_index-0`
-                path: path.split('.').slice(0, -1),
-                setErrorCount: setErrorCount
-            }, void 0, false, {
-                fileName: "src/fields/Collapsible/index.tsx",
-                lineNumber: 111,
-                columnNumber: 7
-            }, this),
-            /*#__PURE__*/ _jsxDEV("div", {
-                className: [
-                    fieldBaseClass,
-                    baseClass,
-                    className,
-                    fieldHasErrors ? `${baseClass}--has-error` : `${baseClass}--has-no-error`
-                ].filter(Boolean).join(' '),
-                id: `field-${fieldPreferencesKey}`,
-                style: styles,
-                children: [
-                    BeforeInput,
-                    /*#__PURE__*/ _jsxDEV(CollapsibleElement, {
-                        className: `${baseClass}__collapsible`,
-                        collapsibleStyle: fieldHasErrors ? 'error' : 'default',
-                        header: /*#__PURE__*/ _jsxDEV("div", {
-                            className: `${baseClass}__row-label-wrap`,
-                            children: [
-                                /*#__PURE__*/ _jsxDEV(RowLabel, {
-                                    CustomComponent: Label,
-                                    label: getTranslation(label, i18n),
-                                    path: path
-                                }, void 0, false, {
-                                    fileName: "src/fields/Collapsible/index.tsx",
-                                    lineNumber: 135,
-                                    columnNumber: 15
-                                }, void 0),
-                                fieldHasErrors && /*#__PURE__*/ _jsxDEV(ErrorPill, {
-                                    count: errorCount,
-                                    i18n: i18n,
-                                    withMessage: true
-                                }, void 0, false, {
-                                    fileName: "src/fields/Collapsible/index.tsx",
-                                    lineNumber: 136,
-                                    columnNumber: 34
-                                }, void 0)
-                            ]
-                        }, void 0, true, {
-                            fileName: "src/fields/Collapsible/index.tsx",
-                            lineNumber: 134,
-                            columnNumber: 13
-                        }, void 0),
-                        initCollapsed: collapsedOnMount,
-                        onToggle: onToggle,
-                        children: /*#__PURE__*/ _jsxDEV(RenderFields, {
-                            fields: fields,
-                            margins: "small",
-                            parentIndexPath: indexPath,
-                            parentPath: parentPath,
-                            parentSchemaPath: parentSchemaPath,
-                            permissions: permissions,
-                            readOnly: readOnly || disabled
-                        }, void 0, false, {
-                            fileName: "src/fields/Collapsible/index.tsx",
-                            lineNumber: 142,
-                            columnNumber: 11
-                        }, this)
-                    }, void 0, false, {
-                        fileName: "src/fields/Collapsible/index.tsx",
-                        lineNumber: 130,
-                        columnNumber: 9
-                    }, this),
-                    AfterInput,
-                    /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
-                        CustomComponent: Description,
-                        Fallback: /*#__PURE__*/ _jsxDEV(FieldDescription, {
-                            description: description,
-                            path: path
-                        }, void 0, false, {
-                            fileName: "src/fields/Collapsible/index.tsx",
-                            lineNumber: 155,
-                            columnNumber: 21
-                        }, void 0)
-                    }, void 0, false, {
-                        fileName: "src/fields/Collapsible/index.tsx",
-                        lineNumber: 153,
-                        columnNumber: 9
-                    }, this)
-                ]
-            }, void 0, true, {
-                fileName: "src/fields/Collapsible/index.tsx",
-                lineNumber: 117,
-                columnNumber: 7
-            }, this)
-        ]
-    }, void 0, true, {
-        fileName: "src/fields/Collapsible/index.tsx",
-        lineNumber: 110,
-        columnNumber: 5
-    }, this);
+    return <Fragment>
+      <WatchChildErrors fields={fields} // removes the 'collapsible' path segment, i.e. `_index-0`
+    path={path.split('.').slice(0, -1)} setErrorCount={setErrorCount}/>
+      <div className={[
+        fieldBaseClass,
+        baseClass,
+        className,
+        fieldHasErrors ? `${baseClass}--has-error` : `${baseClass}--has-no-error`
+    ].filter(Boolean).join(' ')} id={`field-${fieldPreferencesKey}`} style={styles}>
+        {BeforeInput}
+        <CollapsibleElement className={`${baseClass}__collapsible`} collapsibleStyle={fieldHasErrors ? 'error' : 'default'} header={<div className={`${baseClass}__row-label-wrap`}>
+              <RowLabel CustomComponent={Label} label={getTranslation(label, i18n)} path={path}/>
+              {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage/>}
+            </div>} initCollapsed={collapsedOnMount} onToggle={onToggle}>
+          <RenderFields fields={fields} margins="small" parentIndexPath={indexPath} parentPath={parentPath} parentSchemaPath={parentSchemaPath} permissions={permissions} readOnly={readOnly || disabled}/>
+        </CollapsibleElement>
+        {AfterInput}
+        <RenderCustomComponent CustomComponent={Description} Fallback={<FieldDescription description={description} path={path}/>}/>
+      </div>
+    </Fragment>;
 };
 export const CollapsibleField = withCondition(CollapsibleFieldComponent);
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/Collapsible/index.tsx"],"sourcesContent":["'use client'\nimport type { CollapsibleFieldClientComponent, DocumentPreferences } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react'\n\nimport { Collapsible as CollapsibleElement } from '../../elements/Collapsible/index.js'\nimport { ErrorPill } from '../../elements/ErrorPill/index.js'\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { FieldDescription } from '../../fields/FieldDescription/index.js'\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { RowLabel } from '../../forms/RowLabel/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { WatchChildErrors } from '../../forms/WatchChildErrors/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { mergeFieldStyles } from '../mergeFieldStyles.js'\nimport './index.scss'\nimport { fieldBaseClass } from '../shared/index.js'\n\nconst baseClass = 'collapsible-field'\n\nconst CollapsibleFieldComponent: CollapsibleFieldClientComponent = (props) => {\n  const {\n    field,\n    field: { admin: { className, description, initCollapsed = false } = {}, fields, label } = {},\n    indexPath,\n    parentPath,\n    parentSchemaPath,\n    path,\n    permissions,\n    readOnly,\n  } = props\n\n  const { i18n } = useTranslation()\n  const { getPreference, setPreference } = usePreferences()\n  const { preferencesKey } = useDocumentInfo()\n  const [collapsedOnMount, setCollapsedOnMount] = useState<boolean>()\n  const fieldPreferencesKey = `collapsible-${path?.replace(/\\./g, '__')}`\n  const [errorCount, setErrorCount] = useState(0)\n  const fieldHasErrors = errorCount > 0\n\n  const { customComponents: { AfterInput, BeforeInput, Description, Label } = {}, disabled } =\n    useField({\n      path,\n    })\n\n  const onToggle = useCallback(\n    async (newCollapsedState: boolean): Promise<void> => {\n      const existingPreferences: DocumentPreferences = await getPreference(preferencesKey)\n\n      if (preferencesKey) {\n        void setPreference(preferencesKey, {\n          ...existingPreferences,\n          ...(path\n            ? {\n                fields: {\n                  ...(existingPreferences?.fields || {}),\n                  [path]: {\n                    ...existingPreferences?.fields?.[path],\n                    collapsed: newCollapsedState,\n                  },\n                },\n              }\n            : {\n                fields: {\n                  ...(existingPreferences?.fields || {}),\n                  [fieldPreferencesKey]: {\n                    ...existingPreferences?.fields?.[fieldPreferencesKey],\n                    collapsed: newCollapsedState,\n                  },\n                },\n              }),\n        })\n      }\n    },\n    [preferencesKey, fieldPreferencesKey, getPreference, setPreference, path],\n  )\n\n  useEffect(() => {\n    const fetchInitialState = async () => {\n      if (preferencesKey) {\n        const preferences = await getPreference(preferencesKey)\n        const specificPreference = path\n          ? preferences?.fields?.[path]?.collapsed\n          : preferences?.fields?.[fieldPreferencesKey]?.collapsed\n\n        if (specificPreference !== undefined) {\n          setCollapsedOnMount(Boolean(specificPreference))\n        } else {\n          setCollapsedOnMount(typeof initCollapsed === 'boolean' ? initCollapsed : false)\n        }\n      } else {\n        setCollapsedOnMount(typeof initCollapsed === 'boolean' ? initCollapsed : false)\n      }\n    }\n\n    void fetchInitialState()\n  }, [getPreference, preferencesKey, fieldPreferencesKey, initCollapsed, path])\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  if (typeof collapsedOnMount !== 'boolean') {\n    return null\n  }\n\n  return (\n    <Fragment>\n      <WatchChildErrors\n        fields={fields}\n        // removes the 'collapsible' path segment, i.e. `_index-0`\n        path={path.split('.').slice(0, -1)}\n        setErrorCount={setErrorCount}\n      />\n      <div\n        className={[\n          fieldBaseClass,\n          baseClass,\n          className,\n          fieldHasErrors ? `${baseClass}--has-error` : `${baseClass}--has-no-error`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        id={`field-${fieldPreferencesKey}`}\n        style={styles}\n      >\n        {BeforeInput}\n        <CollapsibleElement\n          className={`${baseClass}__collapsible`}\n          collapsibleStyle={fieldHasErrors ? 'error' : 'default'}\n          header={\n            <div className={`${baseClass}__row-label-wrap`}>\n              <RowLabel CustomComponent={Label} label={getTranslation(label, i18n)} path={path} />\n              {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}\n            </div>\n          }\n          initCollapsed={collapsedOnMount}\n          onToggle={onToggle}\n        >\n          <RenderFields\n            fields={fields}\n            margins=\"small\"\n            parentIndexPath={indexPath}\n            parentPath={parentPath}\n            parentSchemaPath={parentSchemaPath}\n            permissions={permissions}\n            readOnly={readOnly || disabled}\n          />\n        </CollapsibleElement>\n        {AfterInput}\n        <RenderCustomComponent\n          CustomComponent={Description}\n          Fallback={<FieldDescription description={description} path={path} />}\n        />\n      </div>\n    </Fragment>\n  )\n}\n\nexport const CollapsibleField = withCondition(CollapsibleFieldComponent)\n"],"names":["getTranslation","React","Fragment","useCallback","useEffect","useMemo","useState","Collapsible","CollapsibleElement","ErrorPill","RenderCustomComponent","FieldDescription","RenderFields","RowLabel","useField","WatchChildErrors","withCondition","useDocumentInfo","usePreferences","useTranslation","mergeFieldStyles","fieldBaseClass","baseClass","CollapsibleFieldComponent","props","field","admin","className","description","initCollapsed","fields","label","indexPath","parentPath","parentSchemaPath","path","permissions","readOnly","i18n","getPreference","setPreference","preferencesKey","collapsedOnMount","setCollapsedOnMount","fieldPreferencesKey","replace","errorCount","setErrorCount","fieldHasErrors","customComponents","AfterInput","BeforeInput","Description","Label","disabled","onToggle","newCollapsedState","existingPreferences","collapsed","fetchInitialState","preferences","specificPreference","undefined","Boolean","styles","split","slice","div","filter","join","id","style","collapsibleStyle","header","CustomComponent","count","withMessage","margins","parentIndexPath","Fallback","CollapsibleField"],"mappings":"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"}
+{"version":3,"sources":["../../../src/fields/Collapsible/index.tsx"],"sourcesContent":["'use client'\nimport type { CollapsibleFieldClientComponent, DocumentPreferences } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react'\n\nimport { Collapsible as CollapsibleElement } from '../../elements/Collapsible/index.js'\nimport { ErrorPill } from '../../elements/ErrorPill/index.js'\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { FieldDescription } from '../../fields/FieldDescription/index.js'\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { RowLabel } from '../../forms/RowLabel/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { WatchChildErrors } from '../../forms/WatchChildErrors/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { mergeFieldStyles } from '../mergeFieldStyles.js'\nimport './index.scss'\nimport { fieldBaseClass } from '../shared/index.js'\n\nconst baseClass = 'collapsible-field'\n\nconst CollapsibleFieldComponent: CollapsibleFieldClientComponent = (props) => {\n  const {\n    field,\n    field: { admin: { className, description, initCollapsed = false } = {}, fields, label } = {},\n    indexPath,\n    parentPath,\n    parentSchemaPath,\n    path,\n    permissions,\n    readOnly,\n  } = props\n\n  const { i18n } = useTranslation()\n  const { getPreference, setPreference } = usePreferences()\n  const { preferencesKey } = useDocumentInfo()\n  const [collapsedOnMount, setCollapsedOnMount] = useState<boolean>()\n  const fieldPreferencesKey = `collapsible-${path?.replace(/\\./g, '__')}`\n  const [errorCount, setErrorCount] = useState(0)\n  const fieldHasErrors = errorCount > 0\n\n  const { customComponents: { AfterInput, BeforeInput, Description, Label } = {}, disabled } =\n    useField({\n      path,\n    })\n\n  const onToggle = useCallback(\n    async (newCollapsedState: boolean): Promise<void> => {\n      const existingPreferences: DocumentPreferences = await getPreference(preferencesKey)\n\n      if (preferencesKey) {\n        void setPreference(preferencesKey, {\n          ...existingPreferences,\n          ...(path\n            ? {\n                fields: {\n                  ...(existingPreferences?.fields || {}),\n                  [path]: {\n                    ...existingPreferences?.fields?.[path],\n                    collapsed: newCollapsedState,\n                  },\n                },\n              }\n            : {\n                fields: {\n                  ...(existingPreferences?.fields || {}),\n                  [fieldPreferencesKey]: {\n                    ...existingPreferences?.fields?.[fieldPreferencesKey],\n                    collapsed: newCollapsedState,\n                  },\n                },\n              }),\n        })\n      }\n    },\n    [preferencesKey, fieldPreferencesKey, getPreference, setPreference, path],\n  )\n\n  useEffect(() => {\n    const fetchInitialState = async () => {\n      if (preferencesKey) {\n        const preferences = await getPreference(preferencesKey)\n        const specificPreference = path\n          ? preferences?.fields?.[path]?.collapsed\n          : preferences?.fields?.[fieldPreferencesKey]?.collapsed\n\n        if (specificPreference !== undefined) {\n          setCollapsedOnMount(Boolean(specificPreference))\n        } else {\n          setCollapsedOnMount(typeof initCollapsed === 'boolean' ? initCollapsed : false)\n        }\n      } else {\n        setCollapsedOnMount(typeof initCollapsed === 'boolean' ? initCollapsed : false)\n      }\n    }\n\n    void fetchInitialState()\n  }, [getPreference, preferencesKey, fieldPreferencesKey, initCollapsed, path])\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  if (typeof collapsedOnMount !== 'boolean') {\n    return null\n  }\n\n  return (\n    <Fragment>\n      <WatchChildErrors\n        fields={fields}\n        // removes the 'collapsible' path segment, i.e. `_index-0`\n        path={path.split('.').slice(0, -1)}\n        setErrorCount={setErrorCount}\n      />\n      <div\n        className={[\n          fieldBaseClass,\n          baseClass,\n          className,\n          fieldHasErrors ? `${baseClass}--has-error` : `${baseClass}--has-no-error`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        id={`field-${fieldPreferencesKey}`}\n        style={styles}\n      >\n        {BeforeInput}\n        <CollapsibleElement\n          className={`${baseClass}__collapsible`}\n          collapsibleStyle={fieldHasErrors ? 'error' : 'default'}\n          header={\n            <div className={`${baseClass}__row-label-wrap`}>\n              <RowLabel CustomComponent={Label} label={getTranslation(label, i18n)} path={path} />\n              {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}\n            </div>\n          }\n          initCollapsed={collapsedOnMount}\n          onToggle={onToggle}\n        >\n          <RenderFields\n            fields={fields}\n            margins=\"small\"\n            parentIndexPath={indexPath}\n            parentPath={parentPath}\n            parentSchemaPath={parentSchemaPath}\n            permissions={permissions}\n            readOnly={readOnly || disabled}\n          />\n        </CollapsibleElement>\n        {AfterInput}\n        <RenderCustomComponent\n          CustomComponent={Description}\n          Fallback={<FieldDescription description={description} path={path} />}\n        />\n      </div>\n    </Fragment>\n  )\n}\n\nexport const CollapsibleField = withCondition(CollapsibleFieldComponent)\n"],"names":["getTranslation","Fragment","useCallback","useEffect","useMemo","useState","Collapsible","CollapsibleElement","ErrorPill","RenderCustomComponent","FieldDescription","RenderFields","RowLabel","useField","WatchChildErrors","withCondition","useDocumentInfo","usePreferences","useTranslation","mergeFieldStyles","fieldBaseClass","baseClass","CollapsibleFieldComponent","props","field","admin","className","description","initCollapsed","fields","label","indexPath","parentPath","parentSchemaPath","path","permissions","readOnly","i18n","getPreference","setPreference","preferencesKey","collapsedOnMount","setCollapsedOnMount","fieldPreferencesKey","replace","errorCount","setErrorCount","fieldHasErrors","customComponents","AfterInput","BeforeInput","Description","Label","disabled","onToggle","newCollapsedState","existingPreferences","collapsed","fetchInitialState","preferences","specificPreference","undefined","Boolean","styles","split","slice","div","filter","join","id","style","collapsibleStyle","header","CustomComponent","count","withMessage","margins","parentIndexPath","Fallback","CollapsibleField"],"mappings":"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"}

package/dist/fields/ConfirmPassword/index.js

@@ -1,7 +1,5 @@
 'use client';
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { confirmPassword } from 'payload/shared';
-import React from 'react';
 import { useField } from '../../forms/useField/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { FieldError } from '../FieldError/index.js';
@@ -22,58 +20,17 @@ export const ConfirmPasswordField = (props)=>{
             });
         }
     });
-    return /*#__PURE__*/ _jsxDEV("div", {
-        className: [
-            fieldBaseClass,
-            'confirm-password',
-            showError && 'error'
-        ].filter(Boolean).join(' '),
-        children: [
-            /*#__PURE__*/ _jsxDEV(FieldLabel, {
-                htmlFor: "field-confirm-password",
-                label: t('authentication:confirmPassword'),
-                required: true
-            }, void 0, false, {
-                fileName: "src/fields/ConfirmPassword/index.tsx",
-                lineNumber: 40,
-                columnNumber: 7
-            }, this),
-            /*#__PURE__*/ _jsxDEV("div", {
-                className: `${fieldBaseClass}__wrap`,
-                children: [
-                    /*#__PURE__*/ _jsxDEV(FieldError, {
-                        path: path
-                    }, void 0, false, {
-                        fileName: "src/fields/ConfirmPassword/index.tsx",
-                        lineNumber: 46,
-                        columnNumber: 9
-                    }, this),
-                    /*#__PURE__*/ _jsxDEV("input", {
-                        "aria-label": t('authentication:confirmPassword'),
-                        autoComplete: "off",
-                        disabled: !!(disabled || disabledFromProps),
-                        id: "field-confirm-password",
-                        name: "confirm-password",
-                        onChange: setValue,
-                        type: "password",
-                        value: value || ''
-                    }, void 0, false, {
-                        fileName: "src/fields/ConfirmPassword/index.tsx",
-                        lineNumber: 47,
-                        columnNumber: 9
-                    }, this)
-                ]
-            }, void 0, true, {
-                fileName: "src/fields/ConfirmPassword/index.tsx",
-                lineNumber: 45,
-                columnNumber: 7
-            }, this)
-        ]
-    }, void 0, true, {
-        fileName: "src/fields/ConfirmPassword/index.tsx",
-        lineNumber: 35,
-        columnNumber: 5
-    }, this);
+    return <div className={[
+        fieldBaseClass,
+        'confirm-password',
+        showError && 'error'
+    ].filter(Boolean).join(' ')}>
+      <FieldLabel htmlFor="field-confirm-password" label={t('authentication:confirmPassword')} required/>
+      <div className={`${fieldBaseClass}__wrap`}>
+        <FieldError path={path}/>
+        <input aria-label={t('authentication:confirmPassword')} autoComplete="off" disabled={!!(disabled || disabledFromProps)} id="field-confirm-password" name="confirm-password" onChange={setValue} type="password" value={value || ''}/>
+      </div>
+    </div>;
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/ConfirmPassword/index.tsx"],"sourcesContent":["'use client'\n\nimport { confirmPassword } from 'payload/shared'\nimport React from 'react'\n\nimport { useField } from '../../forms/useField/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.scss'\n\nexport type ConfirmPasswordFieldProps = {\n  readonly disabled?: boolean\n  readonly path?: string\n}\n\nexport const ConfirmPasswordField: React.FC<ConfirmPasswordFieldProps> = (props) => {\n  const { disabled: disabledFromProps, path = 'confirm-password' } = props\n  const { t } = useTranslation()\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  return (\n    <div\n      className={[fieldBaseClass, 'confirm-password', showError && 'error']\n        .filter(Boolean)\n        .join(' ')}\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        <input\n          aria-label={t('authentication:confirmPassword')}\n          autoComplete=\"off\"\n          disabled={!!(disabled || disabledFromProps)}\n          id=\"field-confirm-password\"\n          name=\"confirm-password\"\n          onChange={setValue}\n          type=\"password\"\n          value={(value as string) || ''}\n        />\n      </div>\n    </div>\n  )\n}\n"],"names":["confirmPassword","React","useField","useTranslation","FieldError","FieldLabel","fieldBaseClass","ConfirmPasswordField","props","disabled","disabledFromProps","path","t","setValue","showError","value","validate","options","name","type","required","div","className","filter","Boolean","join","htmlFor","label","input","aria-label","autoComplete","id","onChange"],"mappings":"AAAA;;AAEA,SAASA,eAAe,QAAQ,iBAAgB;AAChD,OAAOC,WAAW,QAAO;AAEzB,SAASC,QAAQ,QAAQ,gCAA+B;AACxD,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,UAAU,QAAQ,yBAAwB;AACnD,SAASC,UAAU,QAAQ,yBAAwB;AACnD,SAASC,cAAc,QAAQ,qBAAoB;AACnD,OAAO,eAAc;AAOrB,OAAO,MAAMC,uBAA4D,CAACC;IACxE,MAAM,EAAEC,UAAUC,iBAAiB,EAAEC,OAAO,kBAAkB,EAAE,GAAGH;IACnE,MAAM,EAAEI,CAAC,EAAE,GAAGT;IAEd,MAAM,EAAEM,QAAQ,EAAEI,QAAQ,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGb,SAAS;QACxDS;QACAK,UAAU,CAACD,OAAOE;YAChB,OAAOjB,gBAAgBe,OAAO;gBAC5BG,MAAM;gBACNC,MAAM;gBACNC,UAAU;gBACV,GAAGH,OAAO;YACZ;QACF;IACF;IAEA,qBACE,QAACI;QACCC,WAAW;YAAChB;YAAgB;YAAoBQ,aAAa;SAAQ,CAClES,MAAM,CAACC,SACPC,IAAI,CAAC;;0BAER,QAACpB;gBACCqB,SAAQ;gBACRC,OAAOf,EAAE;gBACTQ,QAAQ;;;;;;0BAEV,QAACC;gBAAIC,WAAW,GAAGhB,eAAe,MAAM,CAAC;;kCACvC,QAACF;wBAAWO,MAAMA;;;;;;kCAClB,QAACiB;wBACCC,cAAYjB,EAAE;wBACdkB,cAAa;wBACbrB,UAAU,CAAC,CAAEA,CAAAA,YAAYC,iBAAgB;wBACzCqB,IAAG;wBACHb,MAAK;wBACLc,UAAUnB;wBACVM,MAAK;wBACLJ,OAAO,AAACA,SAAoB;;;;;;;;;;;;;;;;;;AAKtC,EAAC"}
+{"version":3,"sources":["../../../src/fields/ConfirmPassword/index.tsx"],"sourcesContent":["'use client'\n\nimport { confirmPassword } from 'payload/shared'\nimport React from 'react'\n\nimport { useField } from '../../forms/useField/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.scss'\n\nexport type ConfirmPasswordFieldProps = {\n  readonly disabled?: boolean\n  readonly path?: string\n}\n\nexport const ConfirmPasswordField: React.FC<ConfirmPasswordFieldProps> = (props) => {\n  const { disabled: disabledFromProps, path = 'confirm-password' } = props\n  const { t } = useTranslation()\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  return (\n    <div\n      className={[fieldBaseClass, 'confirm-password', showError && 'error']\n        .filter(Boolean)\n        .join(' ')}\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        <input\n          aria-label={t('authentication:confirmPassword')}\n          autoComplete=\"off\"\n          disabled={!!(disabled || disabledFromProps)}\n          id=\"field-confirm-password\"\n          name=\"confirm-password\"\n          onChange={setValue}\n          type=\"password\"\n          value={(value as string) || ''}\n        />\n      </div>\n    </div>\n  )\n}\n"],"names":["confirmPassword","useField","useTranslation","FieldError","FieldLabel","fieldBaseClass","ConfirmPasswordField","props","disabled","disabledFromProps","path","t","setValue","showError","value","validate","options","name","type","required","div","className","filter","Boolean","join","htmlFor","label","input","aria-label","autoComplete","id","onChange"],"mappings":"AAAA;AAEA,SAASA,eAAe,QAAQ,iBAAgB;AAGhD,SAASC,QAAQ,QAAQ,gCAA+B;AACxD,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,UAAU,QAAQ,yBAAwB;AACnD,SAASC,UAAU,QAAQ,yBAAwB;AACnD,SAASC,cAAc,QAAQ,qBAAoB;AACnD,OAAO,eAAc;AAOrB,OAAO,MAAMC,uBAA4D,CAACC;IACxE,MAAM,EAAEC,UAAUC,iBAAiB,EAAEC,OAAO,kBAAkB,EAAE,GAAGH;IACnE,MAAM,EAAEI,CAAC,EAAE,GAAGT;IAEd,MAAM,EAAEM,QAAQ,EAAEI,QAAQ,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGb,SAAS;QACxDS;QACAK,UAAU,CAACD,OAAOE;YAChB,OAAOhB,gBAAgBc,OAAO;gBAC5BG,MAAM;gBACNC,MAAM;gBACNC,UAAU;gBACV,GAAGH,OAAO;YACZ;QACF;IACF;IAEA,QACGI,IACCC,WAAW;QAAChB;QAAgB;QAAoBQ,aAAa;KAAQ,CAClES,MAAM,CAACC,SACPC,IAAI,CAAC,MACT;MACC,CAACpB,WACCqB,QAAQ,yBACRC,OAAOf,EAAE,mCACTQ,UACA;MACF,CAACC,IAAIC,WAAW,GAAGhB,eAAe,MAAM,CAAC,EAAE;QACzC,CAACF,WAAWO,MAAMA,OAAQ;QAC1B,CAACiB,MACCC,YAAYjB,EAAE,mCACdkB,aAAa,MACbrB,UAAU,CAAC,CAAEA,CAAAA,YAAYC,iBAAgB,GACzCqB,GAAG,yBACHb,KAAK,mBACLc,UAAUnB,UACVM,KAAK,WACLJ,OAAO,AAACA,SAAoB,KAC5B;MACJ,EAAEM,IAAI;IACR,EAAEA;AAEN,EAAC"}

package/dist/fields/DateTime/index.js

@@ -1,5 +1,4 @@
 'use client';
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { TZDateMini as TZDate } from '@date-fns/tz/date/mini';
 import { getTranslation } from '@payloadcms/translations';
 import { transpose } from 'date-fns';
@@ -135,107 +134,25 @@ const DateTimeFieldComponent = (props)=>{
         setModified,
         timezonePath
     ]);
-    return /*#__PURE__*/ _jsxDEV("div", {
-        className: [
-            fieldBaseClass,
-            baseClass,
-            className,
-            showError && `${baseClass}--has-error`,
-            (readOnly || disabled) && 'read-only'
-        ].filter(Boolean).join(' '),
-        style: styles,
-        children: [
-            /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
-                CustomComponent: Label,
-                Fallback: /*#__PURE__*/ _jsxDEV(FieldLabel, {
-                    label: label,
-                    localized: localized,
-                    path: path,
-                    required: required
-                }, void 0, false, {
-                    fileName: "src/fields/DateTime/index.tsx",
-                    lineNumber: 181,
-                    columnNumber: 11
-                }, void 0)
-            }, void 0, false, {
-                fileName: "src/fields/DateTime/index.tsx",
-                lineNumber: 178,
-                columnNumber: 7
-            }, this),
-            /*#__PURE__*/ _jsxDEV("div", {
-                className: `${fieldBaseClass}__wrap`,
-                id: `field-${path.replace(/\./g, '__')}`,
-                children: [
-                    /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
-                        CustomComponent: Error,
-                        Fallback: /*#__PURE__*/ _jsxDEV(FieldError, {
-                            path: path,
-                            showError: showError
-                        }, void 0, false, {
-                            fileName: "src/fields/DateTime/index.tsx",
-                            lineNumber: 187,
-                            columnNumber: 21
-                        }, void 0)
-                    }, void 0, false, {
-                        fileName: "src/fields/DateTime/index.tsx",
-                        lineNumber: 185,
-                        columnNumber: 9
-                    }, this),
-                    BeforeInput,
-                    /*#__PURE__*/ _jsxDEV(DatePickerField, {
-                        ...datePickerProps,
-                        onChange: onChange,
-                        overrides: {
-                            ...datePickerProps?.overrides
-                        },
-                        placeholder: getTranslation(placeholder, i18n),
-                        readOnly: readOnly || disabled,
-                        value: displayedValue
-                    }, void 0, false, {
-                        fileName: "src/fields/DateTime/index.tsx",
-                        lineNumber: 190,
-                        columnNumber: 9
-                    }, this),
-                    timezone && supportedTimezones.length > 0 && /*#__PURE__*/ _jsxDEV(TimezonePicker, {
-                        id: `${path}-timezone-picker`,
-                        onChange: onChangeTimezone,
-                        options: supportedTimezones,
-                        readOnly: readOnly || disabled,
-                        required: timezoneRequired,
-                        selectedTimezone: selectedTimezone
-                    }, void 0, false, {
-                        fileName: "src/fields/DateTime/index.tsx",
-                        lineNumber: 201,
-                        columnNumber: 11
-                    }, this),
-                    AfterInput
-                ]
-            }, void 0, true, {
-                fileName: "src/fields/DateTime/index.tsx",
-                lineNumber: 184,
-                columnNumber: 7
-            }, this),
-            /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
-                CustomComponent: Description,
-                Fallback: /*#__PURE__*/ _jsxDEV(FieldDescription, {
-                    description: description,
-                    path: path
-                }, void 0, false, {
-                    fileName: "src/fields/DateTime/index.tsx",
-                    lineNumber: 214,
-                    columnNumber: 19
-                }, void 0)
-            }, void 0, false, {
-                fileName: "src/fields/DateTime/index.tsx",
-                lineNumber: 212,
-                columnNumber: 7
-            }, this)
-        ]
-    }, void 0, true, {
-        fileName: "src/fields/DateTime/index.tsx",
-        lineNumber: 166,
-        columnNumber: 5
-    }, this);
+    return <div className={[
+        fieldBaseClass,
+        baseClass,
+        className,
+        showError && `${baseClass}--has-error`,
+        (readOnly || disabled) && 'read-only'
+    ].filter(Boolean).join(' ')} style={styles}>
+      <RenderCustomComponent CustomComponent={Label} Fallback={<FieldLabel label={label} localized={localized} path={path} required={required}/>}/>
+      <div className={`${fieldBaseClass}__wrap`} id={`field-${path.replace(/\./g, '__')}`}>
+        <RenderCustomComponent CustomComponent={Error} Fallback={<FieldError path={path} showError={showError}/>}/>
+        {BeforeInput}
+        <DatePickerField {...datePickerProps} onChange={onChange} overrides={{
+        ...datePickerProps?.overrides
+    }} placeholder={getTranslation(placeholder, i18n)} readOnly={readOnly || disabled} value={displayedValue}/>
+        {timezone && supportedTimezones.length > 0 && <TimezonePicker id={`${path}-timezone-picker`} onChange={onChangeTimezone} options={supportedTimezones} readOnly={readOnly || disabled} required={timezoneRequired} selectedTimezone={selectedTimezone}/>}
+        {AfterInput}
+      </div>
+      <RenderCustomComponent CustomComponent={Description} Fallback={<FieldDescription description={description} path={path}/>}/>
+    </div>;
 };
 export const DateTimeField = withCondition(DateTimeFieldComponent);
 

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

@@ -1 +1 @@
-{"version":3,"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.scss'\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"],"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","div","filter","Boolean","join","style","CustomComponent","Fallback","id","replace","overrides","length","DateTimeField"],"mappings":"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"}
+{"version":3,"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.scss'\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"],"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","div","filter","Boolean","join","style","CustomComponent","Fallback","id","replace","overrides","length","DateTimeField"],"mappings":"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"}

package/dist/fields/Email/index.js

@@ -1,7 +1,6 @@
 'use client';
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { getTranslation } from '@payloadcms/translations';
-import React, { useCallback, useMemo } from 'react';
+import { 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';
@@ -33,95 +32,24 @@ const EmailFieldComponent = (props)=>{
     const styles = useMemo(()=>mergeFieldStyles(field), [
         field
     ]);
-    return /*#__PURE__*/ _jsxDEV("div", {
-        className: [
-            fieldBaseClass,
-            'email',
-            className,
-            showError && 'error',
-            (readOnly || disabled) && 'read-only'
-        ].filter(Boolean).join(' '),
-        style: styles,
-        children: [
-            /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
-                CustomComponent: Label,
-                Fallback: /*#__PURE__*/ _jsxDEV(FieldLabel, {
-                    label: label,
-                    localized: localized,
-                    path: path,
-                    required: required
-                }, void 0, false, {
-                    fileName: "src/fields/Email/index.tsx",
-                    lineNumber: 82,
-                    columnNumber: 11
-                }, void 0)
-            }, void 0, false, {
-                fileName: "src/fields/Email/index.tsx",
-                lineNumber: 79,
-                columnNumber: 7
-            }, this),
-            /*#__PURE__*/ _jsxDEV("div", {
-                className: `${fieldBaseClass}__wrap`,
-                children: [
-                    /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
-                        CustomComponent: Error,
-                        Fallback: /*#__PURE__*/ _jsxDEV(FieldError, {
-                            path: path,
-                            showError: showError
-                        }, void 0, false, {
-                            fileName: "src/fields/Email/index.tsx",
-                            lineNumber: 88,
-                            columnNumber: 21
-                        }, void 0)
-                    }, void 0, false, {
-                        fileName: "src/fields/Email/index.tsx",
-                        lineNumber: 86,
-                        columnNumber: 9
-                    }, this),
-                    BeforeInput,
-                    /* disable eslint here because the label is dynamic */ /* eslint-disable-next-line jsx-a11y/control-has-associated-label */ /*#__PURE__*/ _jsxDEV("input", {
-                        autoComplete: autoComplete,
-                        disabled: readOnly || disabled,
-                        id: `field-${path.replace(/\./g, '__')}`,
-                        name: path,
-                        onChange: setValue,
-                        placeholder: getTranslation(placeholder, i18n),
-                        required: required,
-                        type: "email",
-                        value: value || ''
-                    }, void 0, false, {
-                        fileName: "src/fields/Email/index.tsx",
-                        lineNumber: 93,
-                        columnNumber: 9
-                    }, this),
-                    AfterInput
-                ]
-            }, void 0, true, {
-                fileName: "src/fields/Email/index.tsx",
-                lineNumber: 85,
-                columnNumber: 7
-            }, this),
-            /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
-                CustomComponent: Description,
-                Fallback: /*#__PURE__*/ _jsxDEV(FieldDescription, {
-                    description: description,
-                    path: path
-                }, void 0, false, {
-                    fileName: "src/fields/Email/index.tsx",
-                    lineNumber: 108,
-                    columnNumber: 19
-                }, void 0)
-            }, void 0, false, {
-                fileName: "src/fields/Email/index.tsx",
-                lineNumber: 106,
-                columnNumber: 7
-            }, this)
-        ]
-    }, void 0, true, {
-        fileName: "src/fields/Email/index.tsx",
-        lineNumber: 67,
-        columnNumber: 5
-    }, this);
+    return <div className={[
+        fieldBaseClass,
+        'email',
+        className,
+        showError && 'error',
+        (readOnly || disabled) && 'read-only'
+    ].filter(Boolean).join(' ')} style={styles}>
+      <RenderCustomComponent CustomComponent={Label} Fallback={<FieldLabel label={label} localized={localized} path={path} required={required}/>}/>
+      <div className={`${fieldBaseClass}__wrap`}>
+        <RenderCustomComponent CustomComponent={Error} Fallback={<FieldError path={path} showError={showError}/>}/>
+        {BeforeInput}
+        {}
+        {}
+        <input autoComplete={autoComplete} disabled={readOnly || disabled} id={`field-${path.replace(/\./g, '__')}`} name={path} onChange={setValue} placeholder={getTranslation(placeholder, i18n)} required={required} type="email" value={value || ''}/>
+        {AfterInput}
+      </div>
+      <RenderCustomComponent CustomComponent={Description} Fallback={<FieldDescription description={description} path={path}/>}/>
+    </div>;
 };
 export const EmailField = withCondition(EmailFieldComponent);