@payloadcms/ui 3.68.0-internal-debug.e9b66ee → 3.68.0-internal.10bf491

package/dist/fields/Group/index.js

@@ -1,7 +1,9 @@
 'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import { groupHasName } from 'payload/shared';
-import { useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { useCollapsible } from '../../elements/Collapsible/provider.js';
 import { ErrorPill } from '../../elements/ErrorPill/index.js';
 import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
@@ -19,56 +21,107 @@ import { fieldBaseClass } from '../shared/index.js';
 import { useTabs } from '../Tabs/provider.js';
 import { GroupProvider, useGroup } from './provider.js';
 const baseClass = 'group-field';
-export const GroupFieldComponent = (props)=>{
-    const { field, field: { admin: { className, description, hideGutter } = {}, fields, label }, indexPath, parentPath, parentSchemaPath, path, permissions, readOnly, schemaPath: schemaPathFromProps } = props;
-    const schemaPath = schemaPathFromProps ?? (field.type === 'group' && groupHasName(field) ? field.name : path);
-    const { i18n } = useTranslation();
-    const { isWithinCollapsible } = useCollapsible();
-    const isWithinGroup = useGroup();
-    const isWithinRow = useRow();
-    const isWithinTab = useTabs();
-    const { customComponents: { AfterInput, BeforeInput, Description, Label } = {}, errorPaths } = useField({
-        path
-    });
-    const submitted = useFormSubmitted();
-    const errorCount = errorPaths.length;
-    const fieldHasErrors = submitted && errorCount > 0;
-    const isTopLevel = !(isWithinCollapsible || isWithinGroup || isWithinRow);
-    const styles = useMemo(()=>mergeFieldStyles(field), [
-        field
-    ]);
-    return <div className={[
-        fieldBaseClass,
-        baseClass,
-        isTopLevel && `${baseClass}--top-level`,
-        isWithinCollapsible && `${baseClass}--within-collapsible`,
-        isWithinGroup && `${baseClass}--within-group`,
-        isWithinRow && `${baseClass}--within-row`,
-        isWithinTab && `${baseClass}--within-tab`,
-        !hideGutter && isWithinGroup && `${baseClass}--gutter`,
-        fieldHasErrors && `${baseClass}--has-error`,
-        className
-    ].filter(Boolean).join(' ')} id={`field-${path?.replace(/\./g, '__')}`} style={styles}>
-      <GroupProvider>
-        <div className={`${baseClass}__wrap`}>
-          {Boolean(Label || Description || label || fieldHasErrors) && <div className={`${baseClass}__header`}>
-              {Boolean(Label || Description || label) && <header>
-                  <RenderCustomComponent CustomComponent={Label} Fallback={<h3 className={`${baseClass}__title`}>
-                        <FieldLabel as="span" label={getTranslation(label, i18n)} localized={false} path={path} required={false}/>
-                      </h3>}/>
-                  <RenderCustomComponent CustomComponent={Description} Fallback={<FieldDescription description={description} path={path}/>}/>
-                </header>}
-              {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage/>}
-            </div>}
-          {BeforeInput}
-          {}
-          {groupHasName(field) ? <RenderFields fields={fields} margins="small" parentIndexPath="" parentPath={path} parentSchemaPath={schemaPath} permissions={permissions === true ? permissions : permissions?.fields} readOnly={readOnly}/> : <RenderFields fields={fields} margins="small" parentIndexPath={indexPath} parentPath={parentPath} parentSchemaPath={parentSchemaPath} permissions={permissions} readOnly={readOnly}/>}
-        </div>
-      </GroupProvider>
-      {AfterInput}
-    </div>;
+export const GroupFieldComponent = props => {
+  const {
+    field,
+    field: {
+      admin: {
+        className,
+        description,
+        hideGutter
+      } = {},
+      fields,
+      label
+    },
+    indexPath,
+    parentPath,
+    parentSchemaPath,
+    path,
+    permissions,
+    readOnly,
+    schemaPath: schemaPathFromProps
+  } = props;
+  const schemaPath = schemaPathFromProps ?? (field.type === 'group' && groupHasName(field) ? field.name : path);
+  const {
+    i18n
+  } = useTranslation();
+  const {
+    isWithinCollapsible
+  } = useCollapsible();
+  const isWithinGroup = useGroup();
+  const isWithinRow = useRow();
+  const isWithinTab = useTabs();
+  const {
+    customComponents: {
+      AfterInput,
+      BeforeInput,
+      Description,
+      Label
+    } = {},
+    errorPaths
+  } = useField({
+    path
+  });
+  const submitted = useFormSubmitted();
+  const errorCount = errorPaths.length;
+  const fieldHasErrors = submitted && errorCount > 0;
+  const isTopLevel = !(isWithinCollapsible || isWithinGroup || isWithinRow);
+  const styles = useMemo(() => mergeFieldStyles(field), [field]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: [fieldBaseClass, baseClass, isTopLevel && `${baseClass}--top-level`, isWithinCollapsible && `${baseClass}--within-collapsible`, isWithinGroup && `${baseClass}--within-group`, isWithinRow && `${baseClass}--within-row`, isWithinTab && `${baseClass}--within-tab`, !hideGutter && isWithinGroup && `${baseClass}--gutter`, fieldHasErrors && `${baseClass}--has-error`, className].filter(Boolean).join(' '),
+    id: `field-${path?.replace(/\./g, '__')}`,
+    style: styles,
+    children: [/*#__PURE__*/_jsx(GroupProvider, {
+      children: /*#__PURE__*/_jsxs("div", {
+        className: `${baseClass}__wrap`,
+        children: [Boolean(Label || Description || label || fieldHasErrors) && /*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}__header`,
+          children: [Boolean(Label || Description || label) && /*#__PURE__*/_jsxs("header", {
+            children: [/*#__PURE__*/_jsx(RenderCustomComponent, {
+              CustomComponent: Label,
+              Fallback: /*#__PURE__*/_jsx("h3", {
+                className: `${baseClass}__title`,
+                children: /*#__PURE__*/_jsx(FieldLabel, {
+                  as: "span",
+                  label: getTranslation(label, i18n),
+                  localized: false,
+                  path: path,
+                  required: false
+                })
+              })
+            }), /*#__PURE__*/_jsx(RenderCustomComponent, {
+              CustomComponent: Description,
+              Fallback: /*#__PURE__*/_jsx(FieldDescription, {
+                description: description,
+                path: path
+              })
+            })]
+          }), fieldHasErrors && /*#__PURE__*/_jsx(ErrorPill, {
+            count: errorCount,
+            i18n: i18n,
+            withMessage: true
+          })]
+        }), BeforeInput, groupHasName(field) ? /*#__PURE__*/_jsx(RenderFields, {
+          fields: fields,
+          margins: "small",
+          parentIndexPath: "",
+          parentPath: path,
+          parentSchemaPath: schemaPath,
+          permissions: permissions === true ? permissions : permissions?.fields,
+          readOnly: readOnly
+        }) : /*#__PURE__*/_jsx(RenderFields, {
+          fields: fields,
+          margins: "small",
+          parentIndexPath: indexPath,
+          parentPath: parentPath,
+          parentSchemaPath: parentSchemaPath,
+          permissions: permissions,
+          readOnly: readOnly
+        })]
+      })
+    }), AfterInput]
+  });
 };
 export { GroupProvider, useGroup };
 export const GroupField = withCondition(GroupFieldComponent);
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/Group/index.tsx"],"sourcesContent":["'use client'\n\nimport type { GroupFieldClientComponent } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { groupHasName } from 'payload/shared'\nimport React, { useMemo } from 'react'\n\nimport { useCollapsible } from '../../elements/Collapsible/provider.js'\nimport { ErrorPill } from '../../elements/ErrorPill/index.js'\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { FieldDescription } from '../../fields/FieldDescription/index.js'\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useFormSubmitted } from '../../forms/Form/context.js'\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { mergeFieldStyles } from '../mergeFieldStyles.js'\nimport './index.scss'\nimport { useRow } from '../Row/provider.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport { useTabs } from '../Tabs/provider.js'\nimport { GroupProvider, useGroup } from './provider.js'\n\nconst baseClass = 'group-field'\n\nexport const GroupFieldComponent: GroupFieldClientComponent = (props) => {\n  const {\n    field,\n    field: { admin: { className, description, hideGutter } = {}, fields, label },\n    indexPath,\n    parentPath,\n    parentSchemaPath,\n    path,\n    permissions,\n    readOnly,\n    schemaPath: schemaPathFromProps,\n  } = props\n\n  const schemaPath =\n    schemaPathFromProps ?? (field.type === 'group' && groupHasName(field) ? field.name : path)\n\n  const { i18n } = useTranslation()\n  const { isWithinCollapsible } = useCollapsible()\n  const isWithinGroup = useGroup()\n  const isWithinRow = useRow()\n  const isWithinTab = useTabs()\n\n  const { customComponents: { AfterInput, BeforeInput, Description, Label } = {}, errorPaths } =\n    useField({ path })\n\n  const submitted = useFormSubmitted()\n  const errorCount = errorPaths.length\n  const fieldHasErrors = submitted && errorCount > 0\n\n  const isTopLevel = !(isWithinCollapsible || isWithinGroup || isWithinRow)\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        baseClass,\n        isTopLevel && `${baseClass}--top-level`,\n        isWithinCollapsible && `${baseClass}--within-collapsible`,\n        isWithinGroup && `${baseClass}--within-group`,\n        isWithinRow && `${baseClass}--within-row`,\n        isWithinTab && `${baseClass}--within-tab`,\n        !hideGutter && isWithinGroup && `${baseClass}--gutter`,\n        fieldHasErrors && `${baseClass}--has-error`,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      id={`field-${path?.replace(/\\./g, '__')}`}\n      style={styles}\n    >\n      <GroupProvider>\n        <div className={`${baseClass}__wrap`}>\n          {Boolean(Label || Description || label || fieldHasErrors) && (\n            <div className={`${baseClass}__header`}>\n              {Boolean(Label || Description || label) && (\n                <header>\n                  <RenderCustomComponent\n                    CustomComponent={Label}\n                    Fallback={\n                      <h3 className={`${baseClass}__title`}>\n                        <FieldLabel\n                          as=\"span\"\n                          label={getTranslation(label, i18n)}\n                          localized={false}\n                          path={path}\n                          required={false}\n                        />\n                      </h3>\n                    }\n                  />\n                  <RenderCustomComponent\n                    CustomComponent={Description}\n                    Fallback={<FieldDescription description={description} path={path} />}\n                  />\n                </header>\n              )}\n              {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}\n            </div>\n          )}\n          {BeforeInput}\n          {/* Render an unnamed group differently */}\n          {groupHasName(field) ? (\n            <RenderFields\n              fields={fields}\n              margins=\"small\"\n              parentIndexPath=\"\"\n              parentPath={path}\n              parentSchemaPath={schemaPath}\n              permissions={permissions === true ? permissions : permissions?.fields}\n              readOnly={readOnly}\n            />\n          ) : (\n            <RenderFields\n              fields={fields}\n              margins=\"small\"\n              parentIndexPath={indexPath}\n              parentPath={parentPath}\n              parentSchemaPath={parentSchemaPath}\n              permissions={permissions}\n              readOnly={readOnly}\n            />\n          )}\n        </div>\n      </GroupProvider>\n      {AfterInput}\n    </div>\n  )\n}\n\nexport { GroupProvider, useGroup }\n\nexport const GroupField = withCondition(GroupFieldComponent)\n"],"names":["getTranslation","groupHasName","useMemo","useCollapsible","ErrorPill","RenderCustomComponent","FieldDescription","FieldLabel","useFormSubmitted","RenderFields","useField","withCondition","useTranslation","mergeFieldStyles","useRow","fieldBaseClass","useTabs","GroupProvider","useGroup","baseClass","GroupFieldComponent","props","field","admin","className","description","hideGutter","fields","label","indexPath","parentPath","parentSchemaPath","path","permissions","readOnly","schemaPath","schemaPathFromProps","type","name","i18n","isWithinCollapsible","isWithinGroup","isWithinRow","isWithinTab","customComponents","AfterInput","BeforeInput","Description","Label","errorPaths","submitted","errorCount","length","fieldHasErrors","isTopLevel","styles","div","filter","Boolean","join","id","replace","style","header","CustomComponent","Fallback","h3","as","localized","required","count","withMessage","margins","parentIndexPath","GroupField"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["getTranslation","groupHasName","React","useMemo","useCollapsible","ErrorPill","RenderCustomComponent","FieldDescription","FieldLabel","useFormSubmitted","RenderFields","useField","withCondition","useTranslation","mergeFieldStyles","useRow","fieldBaseClass","useTabs","GroupProvider","useGroup","baseClass","GroupFieldComponent","props","field","admin","className","description","hideGutter","fields","label","indexPath","parentPath","parentSchemaPath","path","permissions","readOnly","schemaPath","schemaPathFromProps","type","name","i18n","isWithinCollapsible","isWithinGroup","isWithinRow","isWithinTab","customComponents","AfterInput","BeforeInput","Description","Label","errorPaths","submitted","errorCount","length","fieldHasErrors","isTopLevel","styles","_jsxs","filter","Boolean","join","id","replace","style","_jsx","CustomComponent","Fallback","as","localized","required","count","withMessage","margins","parentIndexPath","GroupField"],"sources":["../../../src/fields/Group/index.tsx"],"sourcesContent":["'use client'\n\nimport type { GroupFieldClientComponent } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { groupHasName } from 'payload/shared'\nimport React, { useMemo } from 'react'\n\nimport { useCollapsible } from '../../elements/Collapsible/provider.js'\nimport { ErrorPill } from '../../elements/ErrorPill/index.js'\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { FieldDescription } from '../../fields/FieldDescription/index.js'\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useFormSubmitted } from '../../forms/Form/context.js'\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { mergeFieldStyles } from '../mergeFieldStyles.js'\nimport './index.scss'\nimport { useRow } from '../Row/provider.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport { useTabs } from '../Tabs/provider.js'\nimport { GroupProvider, useGroup } from './provider.js'\n\nconst baseClass = 'group-field'\n\nexport const GroupFieldComponent: GroupFieldClientComponent = (props) => {\n  const {\n    field,\n    field: { admin: { className, description, hideGutter } = {}, fields, label },\n    indexPath,\n    parentPath,\n    parentSchemaPath,\n    path,\n    permissions,\n    readOnly,\n    schemaPath: schemaPathFromProps,\n  } = props\n\n  const schemaPath =\n    schemaPathFromProps ?? (field.type === 'group' && groupHasName(field) ? field.name : path)\n\n  const { i18n } = useTranslation()\n  const { isWithinCollapsible } = useCollapsible()\n  const isWithinGroup = useGroup()\n  const isWithinRow = useRow()\n  const isWithinTab = useTabs()\n\n  const { customComponents: { AfterInput, BeforeInput, Description, Label } = {}, errorPaths } =\n    useField({ path })\n\n  const submitted = useFormSubmitted()\n  const errorCount = errorPaths.length\n  const fieldHasErrors = submitted && errorCount > 0\n\n  const isTopLevel = !(isWithinCollapsible || isWithinGroup || isWithinRow)\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        baseClass,\n        isTopLevel && `${baseClass}--top-level`,\n        isWithinCollapsible && `${baseClass}--within-collapsible`,\n        isWithinGroup && `${baseClass}--within-group`,\n        isWithinRow && `${baseClass}--within-row`,\n        isWithinTab && `${baseClass}--within-tab`,\n        !hideGutter && isWithinGroup && `${baseClass}--gutter`,\n        fieldHasErrors && `${baseClass}--has-error`,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      id={`field-${path?.replace(/\\./g, '__')}`}\n      style={styles}\n    >\n      <GroupProvider>\n        <div className={`${baseClass}__wrap`}>\n          {Boolean(Label || Description || label || fieldHasErrors) && (\n            <div className={`${baseClass}__header`}>\n              {Boolean(Label || Description || label) && (\n                <header>\n                  <RenderCustomComponent\n                    CustomComponent={Label}\n                    Fallback={\n                      <h3 className={`${baseClass}__title`}>\n                        <FieldLabel\n                          as=\"span\"\n                          label={getTranslation(label, i18n)}\n                          localized={false}\n                          path={path}\n                          required={false}\n                        />\n                      </h3>\n                    }\n                  />\n                  <RenderCustomComponent\n                    CustomComponent={Description}\n                    Fallback={<FieldDescription description={description} path={path} />}\n                  />\n                </header>\n              )}\n              {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}\n            </div>\n          )}\n          {BeforeInput}\n          {/* Render an unnamed group differently */}\n          {groupHasName(field) ? (\n            <RenderFields\n              fields={fields}\n              margins=\"small\"\n              parentIndexPath=\"\"\n              parentPath={path}\n              parentSchemaPath={schemaPath}\n              permissions={permissions === true ? permissions : permissions?.fields}\n              readOnly={readOnly}\n            />\n          ) : (\n            <RenderFields\n              fields={fields}\n              margins=\"small\"\n              parentIndexPath={indexPath}\n              parentPath={parentPath}\n              parentSchemaPath={parentSchemaPath}\n              permissions={permissions}\n              readOnly={readOnly}\n            />\n          )}\n        </div>\n      </GroupProvider>\n      {AfterInput}\n    </div>\n  )\n}\n\nexport { GroupProvider, useGroup }\n\nexport const GroupField = withCondition(GroupFieldComponent)\n"],"mappings":"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","ignoreList":[]}

package/dist/fields/Group/provider.js

@@ -1,9 +1,16 @@
 'use client';
-import { createContext, use } from 'react';
-export const GroupContext = createContext(false);
-export const GroupProvider = ({ children, withinGroup = true })=>{
-    return <GroupContext value={withinGroup}>{children}</GroupContext>;
-};
-export const useGroup = ()=>use(GroupContext);
 
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { createContext, use } from 'react';
+export const GroupContext = /*#__PURE__*/createContext(false);
+export const GroupProvider = ({
+  children,
+  withinGroup = true
+}) => {
+  return /*#__PURE__*/_jsx(GroupContext, {
+    value: withinGroup,
+    children: children
+  });
+};
+export const useGroup = () => use(GroupContext);
 //# sourceMappingURL=provider.js.map

package/dist/fields/Group/provider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/Group/provider.tsx"],"sourcesContent":["'use client'\nimport React, { createContext, use } from 'react'\n\nexport const GroupContext = createContext(false)\n\nexport const GroupProvider: React.FC<{ children?: React.ReactNode; withinGroup?: boolean }> = ({\n  children,\n  withinGroup = true,\n}) => {\n  return <GroupContext value={withinGroup}>{children}</GroupContext>\n}\n\nexport const useGroup = (): boolean => use(GroupContext)\n"],"names":["createContext","use","GroupContext","GroupProvider","children","withinGroup","value","useGroup"],"mappings":"AAAA;AACA,SAAgBA,aAAa,EAAEC,GAAG,QAAQ,QAAO;AAEjD,OAAO,MAAMC,eAAeF,cAAc,OAAM;AAEhD,OAAO,MAAMG,gBAAiF,CAAC,EAC7FC,QAAQ,EACRC,cAAc,IAAI,EACnB;IACC,QAAQH,aAAaI,OAAOD,cAAcD,WAAWF;AACvD,EAAC;AAED,OAAO,MAAMK,WAAW,IAAeN,IAAIC,cAAa"}
+{"version":3,"file":"provider.js","names":["React","createContext","use","GroupContext","GroupProvider","children","withinGroup","_jsx","value","useGroup"],"sources":["../../../src/fields/Group/provider.tsx"],"sourcesContent":["'use client'\nimport React, { createContext, use } from 'react'\n\nexport const GroupContext = createContext(false)\n\nexport const GroupProvider: React.FC<{ children?: React.ReactNode; withinGroup?: boolean }> = ({\n  children,\n  withinGroup = true,\n}) => {\n  return <GroupContext value={withinGroup}>{children}</GroupContext>\n}\n\nexport const useGroup = (): boolean => use(GroupContext)\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,IAASC,aAAa,EAAEC,GAAG,QAAQ;AAE1C,OAAO,MAAMC,YAAA,gBAAeF,aAAA,CAAc;AAE1C,OAAO,MAAMG,aAAA,GAAiFA,CAAC;EAC7FC,QAAQ;EACRC,WAAA,GAAc;AAAI,CACnB;EACC,oBAAOC,IAAA,CAACJ,YAAA;IAAaK,KAAA,EAAOF,WAAA;cAAcD;;AAC5C;AAEA,OAAO,MAAMI,QAAA,GAAWA,CAAA,KAAeP,GAAA,CAAIC,YAAA","ignoreList":[]}

package/dist/fields/Hidden/index.js

@@ -1,28 +1,79 @@
 'use client';
-import { useEffect } from 'react';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect } from 'react';
 import { useField } from '../../forms/useField/index.js';
 import { withCondition } from '../../forms/withCondition/index.js';
 /**
  * Renders an input with `type="hidden"`.
  * This is mainly used to save a value on the form that is not visible to the user.
  * For example, this sets the `ìd` property of a block in the Blocks field.
- */ const HiddenFieldComponent = (props)=>{
-    const { disableModifyingForm = true, path: pathFromProps, value: valueFromProps } = props;
-    const { formInitializing, path, setValue, value } = useField({
-        potentiallyStalePath: pathFromProps
+ */
+const HiddenFieldComponent = props => {
+  const $ = _c(13);
+  const {
+    disableModifyingForm: t0,
+    path: pathFromProps,
+    value: valueFromProps
+  } = props;
+  const disableModifyingForm = t0 === undefined ? true : t0;
+  let t1;
+  if ($[0] !== pathFromProps) {
+    t1 = {
+      potentiallyStalePath: pathFromProps
+    };
+    $[0] = pathFromProps;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const {
+    formInitializing,
+    path,
+    setValue,
+    value
+  } = useField(t1);
+  let t2;
+  let t3;
+  if ($[2] !== disableModifyingForm || $[3] !== formInitializing || $[4] !== setValue || $[5] !== valueFromProps) {
+    t2 = () => {
+      if (valueFromProps !== undefined && !formInitializing) {
+        setValue(valueFromProps, disableModifyingForm);
+      }
+    };
+    t3 = [valueFromProps, setValue, disableModifyingForm, formInitializing];
+    $[2] = disableModifyingForm;
+    $[3] = formInitializing;
+    $[4] = setValue;
+    $[5] = valueFromProps;
+    $[6] = t2;
+    $[7] = t3;
+  } else {
+    t2 = $[6];
+    t3 = $[7];
+  }
+  useEffect(t2, t3);
+  const t4 = `field-${path?.replace(/\./g, "__")}`;
+  const t5 = value || "";
+  let t6;
+  if ($[8] !== path || $[9] !== setValue || $[10] !== t4 || $[11] !== t5) {
+    t6 = _jsx("input", {
+      id: t4,
+      name: path,
+      onChange: setValue,
+      type: "hidden",
+      value: t5
     });
-    useEffect(()=>{
-        if (valueFromProps !== undefined && !formInitializing) {
-            setValue(valueFromProps, disableModifyingForm);
-        }
-    }, [
-        valueFromProps,
-        setValue,
-        disableModifyingForm,
-        formInitializing
-    ]);
-    return <input id={`field-${path?.replace(/\./g, '__')}`} name={path} onChange={setValue} type="hidden" value={value || ''}/>;
+    $[8] = path;
+    $[9] = setValue;
+    $[10] = t4;
+    $[11] = t5;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  return t6;
 };
 export const HiddenField = withCondition(HiddenFieldComponent);
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/Hidden/index.tsx"],"sourcesContent":["'use client'\n\nimport type { HiddenFieldProps } from 'payload'\n\nimport React, { useEffect } from 'react'\n\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\n\n/**\n * Renders an input with `type=\"hidden\"`.\n * This is mainly used to save a value on the form that is not visible to the user.\n * For example, this sets the `ìd` property of a block in the Blocks field.\n */\nconst HiddenFieldComponent: React.FC<HiddenFieldProps> = (props) => {\n  const { disableModifyingForm = true, path: pathFromProps, value: valueFromProps } = props\n\n  const { formInitializing, path, setValue, value } = useField({\n    potentiallyStalePath: pathFromProps,\n  })\n\n  useEffect(() => {\n    if (valueFromProps !== undefined && !formInitializing) {\n      setValue(valueFromProps, disableModifyingForm)\n    }\n  }, [valueFromProps, setValue, disableModifyingForm, formInitializing])\n\n  return (\n    <input\n      id={`field-${path?.replace(/\\./g, '__')}`}\n      name={path}\n      onChange={setValue}\n      type=\"hidden\"\n      value={(value as string) || ''}\n    />\n  )\n}\n\nexport const HiddenField = withCondition(HiddenFieldComponent)\n"],"names":["useEffect","useField","withCondition","HiddenFieldComponent","props","disableModifyingForm","path","pathFromProps","value","valueFromProps","formInitializing","setValue","potentiallyStalePath","undefined","input","id","replace","name","onChange","type","HiddenField"],"mappings":"AAAA;AAIA,SAAgBA,SAAS,QAAQ,QAAO;AAExC,SAASC,QAAQ,QAAQ,gCAA+B;AACxD,SAASC,aAAa,QAAQ,qCAAoC;AAElE;;;;CAIC,GACD,MAAMC,uBAAmD,CAACC;IACxD,MAAM,EAAEC,uBAAuB,IAAI,EAAEC,MAAMC,aAAa,EAAEC,OAAOC,cAAc,EAAE,GAAGL;IAEpF,MAAM,EAAEM,gBAAgB,EAAEJ,IAAI,EAAEK,QAAQ,EAAEH,KAAK,EAAE,GAAGP,SAAS;QAC3DW,sBAAsBL;IACxB;IAEAP,UAAU;QACR,IAAIS,mBAAmBI,aAAa,CAACH,kBAAkB;YACrDC,SAASF,gBAAgBJ;QAC3B;IACF,GAAG;QAACI;QAAgBE;QAAUN;QAAsBK;KAAiB;IAErE,QACGI,MACCC,IAAI,CAAC,MAAM,EAAET,MAAMU,QAAQ,OAAO,OAAO,EACzCC,MAAMX,MACNY,UAAUP,UACVQ,KAAK,SACLX,OAAO,AAACA,SAAoB;AAGlC;AAEA,OAAO,MAAMY,cAAclB,cAAcC,sBAAqB"}
+{"version":3,"file":"index.js","names":["c","_c","React","useEffect","useField","withCondition","HiddenFieldComponent","props","$","disableModifyingForm","t0","path","pathFromProps","value","valueFromProps","undefined","t1","potentiallyStalePath","formInitializing","setValue","t2","t3","t4","replace","t5","t6","_jsx","id","name","onChange","type","HiddenField"],"sources":["../../../src/fields/Hidden/index.tsx"],"sourcesContent":["'use client'\n\nimport type { HiddenFieldProps } from 'payload'\n\nimport React, { useEffect } from 'react'\n\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\n\n/**\n * Renders an input with `type=\"hidden\"`.\n * This is mainly used to save a value on the form that is not visible to the user.\n * For example, this sets the `ìd` property of a block in the Blocks field.\n */\nconst HiddenFieldComponent: React.FC<HiddenFieldProps> = (props) => {\n  const { disableModifyingForm = true, path: pathFromProps, value: valueFromProps } = props\n\n  const { formInitializing, path, setValue, value } = useField({\n    potentiallyStalePath: pathFromProps,\n  })\n\n  useEffect(() => {\n    if (valueFromProps !== undefined && !formInitializing) {\n      setValue(valueFromProps, disableModifyingForm)\n    }\n  }, [valueFromProps, setValue, disableModifyingForm, formInitializing])\n\n  return (\n    <input\n      id={`field-${path?.replace(/\\./g, '__')}`}\n      name={path}\n      onChange={setValue}\n      type=\"hidden\"\n      value={(value as string) || ''}\n    />\n  )\n}\n\nexport const HiddenField = withCondition(HiddenFieldComponent)\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,OAAOC,KAAA,IAASC,SAAS,QAAQ;AAEjC,SAASC,QAAQ,QAAQ;AACzB,SAASC,aAAa,QAAQ;AAE9B;;;;;AAKA,MAAMC,oBAAA,GAAmDC,KAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EACvD;IAAAQ,oBAAA,EAAAC,EAAA;IAAAC,IAAA,EAAAC,aAAA;IAAAC,KAAA,EAAAC;EAAA,IAAoFP,KAAA;EAA5E,MAAAE,oBAAA,GAAAC,EAA2B,KAAAK,SAAA,UAA3BL,EAA2B;EAAA,IAAAM,EAAA;EAAA,IAAAR,CAAA,QAAAI,aAAA;IAE0BI,EAAA;MAAAC,oBAAA,EACrCL;IAAA;IACxBJ,CAAA,MAAAI,aAAA;IAAAJ,CAAA,MAAAQ,EAAA;EAAA;IAAAA,EAAA,GAAAR,CAAA;EAAA;EAFA;IAAAU,gBAAA;IAAAP,IAAA;IAAAQ,QAAA;IAAAN;EAAA,IAAoDT,QAAA,CAASY,EAE7D;EAAA,IAAAI,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAb,CAAA,QAAAC,oBAAA,IAAAD,CAAA,QAAAU,gBAAA,IAAAV,CAAA,QAAAW,QAAA,IAAAX,CAAA,QAAAM,cAAA;IAEUM,EAAA,GAAAA,CAAA;MAAA,IACJN,cAAA,KAAAC,SAAmB,KAAcG,gBAAA;QACnCC,QAAA,CAASL,cAAA,EAAgBL,oBAAA;MAAA;IAAA;IAE1BY,EAAA,IAACP,cAAA,EAAgBK,QAAA,EAAUV,oBAAA,EAAsBS,gBAAA;IAAiBV,CAAA,MAAAC,oBAAA;IAAAD,CAAA,MAAAU,gBAAA;IAAAV,CAAA,MAAAW,QAAA;IAAAX,CAAA,MAAAM,cAAA;IAAAN,CAAA,MAAAY,EAAA;IAAAZ,CAAA,MAAAa,EAAA;EAAA;IAAAD,EAAA,GAAAZ,CAAA;IAAAa,EAAA,GAAAb,CAAA;EAAA;EAJrEL,SAAA,CAAUiB,EAIV,EAAGC,EAAkE;EAI7D,MAAAC,EAAA,YAASX,IAAA,EAAAY,OAAA,QAAqB,OAAO;EAIlC,MAAAC,EAAA,GAAAX,KAAC,IAAoB;EAAA,IAAAY,EAAA;EAAA,IAAAjB,CAAA,QAAAG,IAAA,IAAAH,CAAA,QAAAW,QAAA,IAAAX,CAAA,SAAAc,EAAA,IAAAd,CAAA,SAAAgB,EAAA;IAL9BC,EAAA,GAAAC,IAAA,CAAC;MAAAC,EAAA,EACKL,EAAqC;MAAAM,IAAA,EACnCjB,IAAA;MAAAkB,QAAA,EACIV,QAAA;MAAAW,IAAA,EACL;MAAAjB,KAAA,EACEW;IAAqB,C;;;;;;;;;SAL9BC,E;CAQJ;AAEA,OAAO,MAAMM,WAAA,GAAc1B,aAAA,CAAcC,oBAAA","ignoreList":[]}

package/dist/fields/JSON/index.js

@@ -1,4 +1,6 @@
 'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { defaultOptions } from '../../elements/CodeEditor/constants.js';
@@ -13,118 +15,149 @@ import { mergeFieldStyles } from '../mergeFieldStyles.js';
 import { fieldBaseClass } from '../shared/index.js';
 import './index.scss';
 const baseClass = 'json-field';
-const JSONFieldComponent = (props)=>{
-    const { field, field: { admin: { className, description, editorOptions, maxHeight } = {}, jsonSchema, label, localized, required }, path: pathFromProps, readOnly, validate } = props;
-    const { insertSpaces = defaultOptions.insertSpaces, tabSize = defaultOptions.tabSize } = editorOptions || {};
-    const formatJSON = useCallback((value)=>{
-        if (value === undefined) {
-            return undefined;
-        }
-        if (value === null) {
-            return '';
-        }
-        return insertSpaces ? JSON.stringify(value, null, tabSize) : JSON.stringify(value, null, '\t');
-    }, [
-        tabSize,
-        insertSpaces
-    ]);
-    const [jsonError, setJsonError] = useState();
-    const inputChangeFromRef = React.useRef('formState');
-    const [recalculatedHeightAt, setRecalculatedHeightAt] = useState(Date.now());
-    const memoizedValidate = useCallback((value, options)=>{
-        if (typeof validate === 'function') {
-            return validate(value, {
-                ...options,
-                jsonError,
-                required
-            });
-        }
-    }, [
-        validate,
-        required,
-        jsonError
-    ]);
-    const { customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {}, disabled, initialValue, path, setValue, showError, value } = useField({
-        potentiallyStalePath: pathFromProps,
-        validate: memoizedValidate
+const JSONFieldComponent = props => {
+  const {
+    field,
+    field: {
+      admin: {
+        className,
+        description,
+        editorOptions,
+        maxHeight
+      } = {},
+      jsonSchema,
+      label,
+      localized,
+      required
+    },
+    path: pathFromProps,
+    readOnly,
+    validate
+  } = props;
+  const {
+    insertSpaces = defaultOptions.insertSpaces,
+    tabSize = defaultOptions.tabSize
+  } = editorOptions || {};
+  const formatJSON = useCallback(value => {
+    if (value === undefined) {
+      return undefined;
+    }
+    if (value === null) {
+      return '';
+    }
+    return insertSpaces ? JSON.stringify(value, null, tabSize) : JSON.stringify(value, null, '\t');
+  }, [tabSize, insertSpaces]);
+  const [jsonError, setJsonError] = useState();
+  const inputChangeFromRef = React.useRef('formState');
+  const [recalculatedHeightAt, setRecalculatedHeightAt] = useState(Date.now());
+  const memoizedValidate = useCallback((value_0, options) => {
+    if (typeof validate === 'function') {
+      return validate(value_0, {
+        ...options,
+        jsonError,
+        required
+      });
+    }
+  }, [validate, required, jsonError]);
+  const {
+    customComponents: {
+      AfterInput,
+      BeforeInput,
+      Description,
+      Error,
+      Label
+    } = {},
+    disabled,
+    initialValue,
+    path,
+    setValue,
+    showError,
+    value: value_1
+  } = useField({
+    potentiallyStalePath: pathFromProps,
+    validate: memoizedValidate
+  });
+  const stringValueRef = React.useRef(formatJSON(value_1 ?? initialValue));
+  const handleMount = useCallback((editor, monaco) => {
+    if (!jsonSchema) {
+      return;
+    }
+    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+      enableSchemaRequest: true,
+      schemas: [...(monaco.languages.json.jsonDefaults.diagnosticsOptions.schemas || []), jsonSchema],
+      validate: true
     });
-    const stringValueRef = React.useRef(formatJSON(value ?? initialValue));
-    const handleMount = useCallback((editor, monaco)=>{
-        if (!jsonSchema) {
-            return;
+    const uri = jsonSchema.uri;
+    const newUri = uri.includes('?') ? `${uri}&${crypto.randomUUID ? crypto.randomUUID() : uuidv4()}` : `${uri}?${crypto.randomUUID ? crypto.randomUUID() : uuidv4()}`;
+    editor.setModel(monaco.editor.createModel(formatJSON(value_1) || '', 'json', monaco.Uri.parse(newUri)));
+  }, [jsonSchema, formatJSON, value_1]);
+  const handleChange = useCallback(val => {
+    if (readOnly || disabled) {
+      return;
+    }
+    inputChangeFromRef.current = 'internalEditor';
+    try {
+      setValue(val ? JSON.parse(val) : null);
+      stringValueRef.current = val;
+      setJsonError(undefined);
+    } catch (e) {
+      setValue(val ? val : null);
+      stringValueRef.current = val;
+      setJsonError(e);
+    }
+  }, [readOnly, disabled, setValue]);
+  useEffect(() => {
+    if (inputChangeFromRef.current === 'formState') {
+      const newStringValue = formatJSON(value_1 ?? initialValue);
+      if (newStringValue !== stringValueRef.current) {
+        stringValueRef.current = newStringValue;
+        setRecalculatedHeightAt(Date.now());
+      }
+    }
+    inputChangeFromRef.current = 'formState';
+  }, [initialValue, path, formatJSON, value_1]);
+  const styles = useMemo(() => mergeFieldStyles(field), [field]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: [fieldBaseClass, baseClass, className, showError && 'error', (readOnly || disabled) && 'read-only'].filter(Boolean).join(' '),
+    style: styles,
+    children: [/*#__PURE__*/_jsx(RenderCustomComponent, {
+      CustomComponent: Label,
+      Fallback: /*#__PURE__*/_jsx(FieldLabel, {
+        label: label,
+        localized: localized,
+        path: path,
+        required: required
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: `${fieldBaseClass}__wrap`,
+      children: [/*#__PURE__*/_jsx(RenderCustomComponent, {
+        CustomComponent: Error,
+        Fallback: /*#__PURE__*/_jsx(FieldError, {
+          message: jsonError,
+          path: path,
+          showError: showError
+        })
+      }), BeforeInput, /*#__PURE__*/_jsx(CodeEditor, {
+        defaultLanguage: "json",
+        maxHeight: maxHeight,
+        onChange: handleChange,
+        onMount: handleMount,
+        options: editorOptions,
+        readOnly: readOnly || disabled,
+        recalculatedHeightAt: recalculatedHeightAt,
+        value: stringValueRef.current,
+        wrapperProps: {
+          id: `field-${path?.replace(/\./g, '__')}`
         }
-        monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
-            enableSchemaRequest: true,
-            schemas: [
-                ...monaco.languages.json.jsonDefaults.diagnosticsOptions.schemas || [],
-                jsonSchema
-            ],
-            validate: true
-        });
-        const uri = jsonSchema.uri;
-        const newUri = uri.includes('?') ? `${uri}&${crypto.randomUUID ? crypto.randomUUID() : uuidv4()}` : `${uri}?${crypto.randomUUID ? crypto.randomUUID() : uuidv4()}`;
-        editor.setModel(monaco.editor.createModel(formatJSON(value) || '', 'json', monaco.Uri.parse(newUri)));
-    }, [
-        jsonSchema,
-        formatJSON,
-        value
-    ]);
-    const handleChange = useCallback((val)=>{
-        if (readOnly || disabled) {
-            return;
-        }
-        inputChangeFromRef.current = 'internalEditor';
-        try {
-            setValue(val ? JSON.parse(val) : null);
-            stringValueRef.current = val;
-            setJsonError(undefined);
-        } catch (e) {
-            setValue(val ? val : null);
-            stringValueRef.current = val;
-            setJsonError(e);
-        }
-    }, [
-        readOnly,
-        disabled,
-        setValue
-    ]);
-    useEffect(()=>{
-        if (inputChangeFromRef.current === 'formState') {
-            const newStringValue = formatJSON(value ?? initialValue);
-            if (newStringValue !== stringValueRef.current) {
-                stringValueRef.current = newStringValue;
-                setRecalculatedHeightAt(Date.now());
-            }
-        }
-        inputChangeFromRef.current = 'formState';
-    }, [
-        initialValue,
-        path,
-        formatJSON,
-        value
-    ]);
-    const styles = useMemo(()=>mergeFieldStyles(field), [
-        field
-    ]);
-    return <div className={[
-        fieldBaseClass,
-        baseClass,
-        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 message={jsonError} path={path} showError={showError}/>}/>
-        {BeforeInput}
-        <CodeEditor defaultLanguage="json" maxHeight={maxHeight} onChange={handleChange} onMount={handleMount} options={editorOptions} readOnly={readOnly || disabled} recalculatedHeightAt={recalculatedHeightAt} value={stringValueRef.current} wrapperProps={{
-        id: `field-${path?.replace(/\./g, '__')}`
-    }}/>
-        {AfterInput}
-      </div>
-      <RenderCustomComponent CustomComponent={Description} Fallback={<FieldDescription description={description} path={path}/>}/>
-    </div>;
+      }), AfterInput]
+    }), /*#__PURE__*/_jsx(RenderCustomComponent, {
+      CustomComponent: Description,
+      Fallback: /*#__PURE__*/_jsx(FieldDescription, {
+        description: description,
+        path: path
+      })
+    })]
+  });
 };
 export const JSONField = withCondition(JSONFieldComponent);
-
 //# sourceMappingURL=index.js.map