@payloadcms/ui 3.0.0-canary.96477cf → 3.0.0-canary.98e0119

package/dist/fields/JSON/index.scss

@@ -1,16 +1,18 @@
 @import '../../scss/styles.scss';
 
-.json-field {
-  position: relative;
+@layer payload-default {
+  .json-field {
+    position: relative;
 
-  &.error {
-    .code-editor {
-      border-color: var(--theme-error-500);
-    }
+    &.error {
+      .code-editor {
+        border-color: var(--theme-error-500);
+      }
 
-    .monaco-editor-background,
-    .margin {
-      background-color: var(--theme-error-50);
+      .monaco-editor-background,
+      .margin {
+        background-color: var(--theme-error-50);
+      }
     }
   }
 }

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

@@ -1,9 +1,8 @@
 import type { JoinFieldClient } from 'payload';
 import React from 'react';
-export declare const JoinField: React.FC<Record<string, unknown> & {
-    readonly descriptionProps?: import("payload").FieldDescriptionClientProps<Omit<JoinFieldClient, "type"> & Partial<Pick<JoinFieldClient, "type">>>;
-    readonly errorProps?: import("payload").FieldErrorClientProps<Omit<JoinFieldClient, "type"> & Partial<Pick<JoinFieldClient, "type">>>;
+export declare const JoinField: React.FC<{
+    readonly path: string;
+} & {
     readonly field: Omit<JoinFieldClient, "type"> & Partial<Pick<JoinFieldClient, "type">>;
-    readonly labelProps?: import("payload").FieldLabelClientProps<Omit<JoinFieldClient, "type"> & Partial<Pick<JoinFieldClient, "type">>>;
-} & import("payload").FormFieldBase>;
+} & Omit<import("payload").ClientComponentProps, "field" | "customComponents">>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Join/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAkD,MAAM,SAAS,CAAA;AAE9F,OAAO,KAAkB,MAAM,OAAO,CAAA;AAkEtC,eAAO,MAAM,SAAS;;;;;oCAAoC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Join/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAkD,MAAM,SAAS,CAAA;AAE9F,OAAO,KAAkB,MAAM,OAAO,CAAA;AAwEtC,eAAO,MAAM,SAAS;;;;+EAAoC,CAAA"}

package/dist/fields/Join/index.js

@@ -1,74 +1,80 @@
 'use client';
 
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useMemo } from 'react';
 import { RelationshipTable } from '../../elements/RelationshipTable/index.js';
-import { FieldLabel } from '../../fields/FieldLabel/index.js';
-import { useFieldProps } from '../../forms/FieldPropsProvider/index.js';
 import { useField } from '../../forms/useField/index.js';
 import { withCondition } from '../../forms/withCondition/index.js';
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
+import { FieldLabel } from '../FieldLabel/index.js';
 import { fieldBaseClass } from '../index.js';
 const JoinFieldComponent = props => {
   const {
     field,
     field: {
       name,
-      _path: pathFromProps,
       admin: {
-        components: {
-          Label
-        }
+        allowCreate
       },
       collection,
       label,
-      on
-    }
+      localized,
+      on,
+      required
+    },
+    path
   } = props;
   const {
     id: docID
   } = useDocumentInfo();
   const {
-    path: pathFromContext
-  } = useFieldProps();
-  const {
+    customComponents: {
+      AfterInput,
+      BeforeInput,
+      Label
+    } = {},
     value
   } = useField({
-    path: pathFromContext ?? pathFromProps ?? name
+    path
   });
-  const filterOptions = useMemo(() => ({
-    [on]: {
-      in: [docID || null]
+  const filterOptions = useMemo(() => {
+    const where = {
+      [on]: {
+        in: [docID || '']
+      }
+    };
+    if (field.where) {
+      return {
+        and: [where, field.where]
+      };
     }
-  }), [docID, on]);
-  return /*#__PURE__*/_jsx("div", {
+    return where;
+  }, [docID, on, field.where]);
+  return /*#__PURE__*/_jsxs("div", {
     className: [fieldBaseClass, 'join'].filter(Boolean).join(' '),
-    children: /*#__PURE__*/_jsx(RelationshipTable, {
+    children: [BeforeInput, /*#__PURE__*/_jsx(RelationshipTable, {
+      allowCreate: typeof docID !== 'undefined' && allowCreate,
       field: field,
       filterOptions: filterOptions,
       initialData: docID && value ? value : {
         docs: []
       },
-      initialDrawerState: {
-        [on]: {
-          initialValue: docID,
-          valid: true,
-          value: docID
-        }
+      initialDrawerData: {
+        [on]: docID
       },
       Label: /*#__PURE__*/_jsx("h4", {
         style: {
           margin: 0
         },
-        children: /*#__PURE__*/_jsx(FieldLabel, {
-          as: "span",
-          field: field,
-          Label: Label,
-          label: label
+        children: Label || /*#__PURE__*/_jsx(FieldLabel, {
+          label: label,
+          localized: localized,
+          path: path,
+          required: required
         })
       }),
       relationTo: collection
-    })
+    }), AfterInput]
   });
 };
 export const JoinField = withCondition(JoinFieldComponent);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","RelationshipTable","FieldLabel","useFieldProps","useField","withCondition","useDocumentInfo","fieldBaseClass","JoinFieldComponent","props","field","name","_path","pathFromProps","admin","components","Label","collection","label","on","id","docID","path","pathFromContext","value","filterOptions","in","_jsx","className","filter","Boolean","join","initialData","docs","initialDrawerState","initialValue","valid","style","margin","as","relationTo","JoinField"],"sources":["../../../src/fields/Join/index.tsx"],"sourcesContent":["'use client'\n\nimport type { JoinFieldClient, JoinFieldClientComponent, PaginatedDocs, Where } from 'payload'\n\nimport React, { useMemo } from 'react'\n\nimport { RelationshipTable } from '../../elements/RelationshipTable/index.js'\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useFieldProps } from '../../forms/FieldPropsProvider/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { fieldBaseClass } from '../index.js'\n\nconst JoinFieldComponent: JoinFieldClientComponent = (props) => {\n  const {\n    field,\n    field: {\n      name,\n      _path: pathFromProps,\n      admin: {\n        components: { Label },\n      },\n      collection,\n      label,\n      on,\n    },\n  } = props\n\n  const { id: docID } = useDocumentInfo()\n\n  const { path: pathFromContext } = useFieldProps()\n\n  const { value } = useField<PaginatedDocs>({\n    path: pathFromContext ?? pathFromProps ?? name,\n  })\n\n  const filterOptions: Where = useMemo(\n    () => ({\n      [on]: {\n        in: [docID || null],\n      },\n    }),\n    [docID, on],\n  )\n\n  return (\n    <div className={[fieldBaseClass, 'join'].filter(Boolean).join(' ')}>\n      <RelationshipTable\n        field={field as JoinFieldClient}\n        filterOptions={filterOptions}\n        initialData={docID && value ? value : ({ docs: [] } as PaginatedDocs)}\n        initialDrawerState={{\n          [on]: {\n            initialValue: docID,\n            valid: true,\n            value: docID,\n          },\n        }}\n        Label={\n          <h4 style={{ margin: 0 }}>\n            <FieldLabel as=\"span\" field={field} Label={Label} label={label} />\n          </h4>\n        }\n        relationTo={collection}\n      />\n    </div>\n  )\n}\n\nexport const JoinField = withCondition(JoinFieldComponent)\n"],"mappings":"AAAA;;;AAIA,OAAOA,KAAA,IAASC,OAAO,QAAQ;AAE/B,SAASC,iBAAiB,QAAQ;AAClC,SAASC,UAAU,QAAQ;AAC3B,SAASC,aAAa,QAAQ;AAC9B,SAASC,QAAQ,QAAQ;AACzB,SAASC,aAAa,QAAQ;AAC9B,SAASC,eAAe,QAAQ;AAChC,SAASC,cAAc,QAAQ;AAE/B,MAAMC,kBAAA,GAAgDC,KAAA;EACpD,MAAM;IACJC,KAAK;IACLA,KAAA,EAAO;MACLC,IAAI;MACJC,KAAA,EAAOC,aAAa;MACpBC,KAAA,EAAO;QACLC,UAAA,EAAY;UAAEC;QAAK;MAAE,CACtB;MACDC,UAAU;MACVC,KAAK;MACLC;IAAE;EACH,CACF,GAAGV,KAAA;EAEJ,MAAM;IAAEW,EAAA,EAAIC;EAAK,CAAE,GAAGf,eAAA;EAEtB,MAAM;IAAEgB,IAAA,EAAMC;EAAe,CAAE,GAAGpB,aAAA;EAElC,MAAM;IAAEqB;EAAK,CAAE,GAAGpB,QAAA,CAAwB;IACxCkB,IAAA,EAAMC,eAAA,IAAmBV,aAAA,IAAiBF;EAC5C;EAEA,MAAMc,aAAA,GAAuBzB,OAAA,CAC3B,OAAO;IACL,CAACmB,EAAA,GAAK;MACJO,EAAA,EAAI,CAACL,KAAA,IAAS;IAChB;EACF,IACA,CAACA,KAAA,EAAOF,EAAA,CAAG;EAGb,oBACEQ,IAAA,CAAC;IAAIC,SAAA,EAAW,CAACrB,cAAA,EAAgB,OAAO,CAACsB,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;cAC5D,aAAAJ,IAAA,CAAC1B,iBAAA;MACCS,KAAA,EAAOA,KAAA;MACPe,aAAA,EAAeA,aAAA;MACfO,WAAA,EAAaX,KAAA,IAASG,KAAA,GAAQA,KAAA,GAAS;QAAES,IAAA,EAAM;MAAG;MAClDC,kBAAA,EAAoB;QAClB,CAACf,EAAA,GAAK;UACJgB,YAAA,EAAcd,KAAA;UACde,KAAA,EAAO;UACPZ,KAAA,EAAOH;QACT;MACF;MACAL,KAAA,eACEW,IAAA,CAAC;QAAGU,KAAA,EAAO;UAAEC,MAAA,EAAQ;QAAE;kBACrB,aAAAX,IAAA,CAACzB,UAAA;UAAWqC,EAAA,EAAG;UAAO7B,KAAA,EAAOA,KAAA;UAAOM,KAAA,EAAOA,KAAA;UAAOE,KAAA,EAAOA;;;MAG7DsB,UAAA,EAAYvB;;;AAIpB;AAEA,OAAO,MAAMwB,SAAA,GAAYpC,aAAA,CAAcG,kBAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useMemo","RelationshipTable","useField","withCondition","useDocumentInfo","FieldLabel","fieldBaseClass","JoinFieldComponent","props","field","name","admin","allowCreate","collection","label","localized","on","required","path","id","docID","customComponents","AfterInput","BeforeInput","Label","value","filterOptions","where","in","and","_jsxs","className","filter","Boolean","join","_jsx","initialData","docs","initialDrawerData","style","margin","relationTo","JoinField"],"sources":["../../../src/fields/Join/index.tsx"],"sourcesContent":["'use client'\n\nimport type { JoinFieldClient, JoinFieldClientComponent, PaginatedDocs, Where } from 'payload'\n\nimport React, { useMemo } from 'react'\n\nimport { RelationshipTable } from '../../elements/RelationshipTable/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { FieldLabel } from '../FieldLabel/index.js'\nimport { fieldBaseClass } from '../index.js'\n\nconst JoinFieldComponent: JoinFieldClientComponent = (props) => {\n  const {\n    field,\n    field: {\n      name,\n      admin: { allowCreate },\n      collection,\n      label,\n      localized,\n      on,\n      required,\n    },\n    path,\n  } = props\n\n  const { id: docID } = useDocumentInfo()\n\n  const { customComponents: { AfterInput, BeforeInput, Label } = {}, value } =\n    useField<PaginatedDocs>({\n      path,\n    })\n\n  const filterOptions: Where = useMemo(() => {\n    const where = {\n      [on]: {\n        in: [docID || ''],\n      },\n    }\n\n    if (field.where) {\n      return {\n        and: [where, field.where],\n      }\n    }\n\n    return where\n  }, [docID, on, field.where])\n\n  return (\n    <div className={[fieldBaseClass, 'join'].filter(Boolean).join(' ')}>\n      {BeforeInput}\n      <RelationshipTable\n        allowCreate={typeof docID !== 'undefined' && allowCreate}\n        field={field as JoinFieldClient}\n        filterOptions={filterOptions}\n        initialData={docID && value ? value : ({ docs: [] } as PaginatedDocs)}\n        initialDrawerData={{\n          [on]: docID,\n        }}\n        Label={\n          <h4 style={{ margin: 0 }}>\n            {Label || (\n              <FieldLabel label={label} localized={localized} path={path} required={required} />\n            )}\n          </h4>\n        }\n        relationTo={collection}\n      />\n      {AfterInput}\n    </div>\n  )\n}\n\nexport const JoinField = withCondition(JoinFieldComponent)\n"],"mappings":"AAAA;;;AAIA,OAAOA,KAAA,IAASC,OAAO,QAAQ;AAE/B,SAASC,iBAAiB,QAAQ;AAClC,SAASC,QAAQ,QAAQ;AACzB,SAASC,aAAa,QAAQ;AAC9B,SAASC,eAAe,QAAQ;AAChC,SAASC,UAAU,QAAQ;AAC3B,SAASC,cAAc,QAAQ;AAE/B,MAAMC,kBAAA,GAAgDC,KAAA;EACpD,MAAM;IACJC,KAAK;IACLA,KAAA,EAAO;MACLC,IAAI;MACJC,KAAA,EAAO;QAAEC;MAAW,CAAE;MACtBC,UAAU;MACVC,KAAK;MACLC,SAAS;MACTC,EAAE;MACFC;IAAQ,CACT;IACDC;EAAI,CACL,GAAGV,KAAA;EAEJ,MAAM;IAAEW,EAAA,EAAIC;EAAK,CAAE,GAAGhB,eAAA;EAEtB,MAAM;IAAEiB,gBAAA,EAAkB;MAAEC,UAAU;MAAEC,WAAW;MAAEC;IAAK,CAAE,GAAG,CAAC,CAAC;IAAEC;EAAK,CAAE,GACxEvB,QAAA,CAAwB;IACtBgB;EACF;EAEF,MAAMQ,aAAA,GAAuB1B,OAAA,CAAQ;IACnC,MAAM2B,KAAA,GAAQ;MACZ,CAACX,EAAA,GAAK;QACJY,EAAA,EAAI,CAACR,KAAA,IAAS;MAChB;IACF;IAEA,IAAIX,KAAA,CAAMkB,KAAK,EAAE;MACf,OAAO;QACLE,GAAA,EAAK,CAACF,KAAA,EAAOlB,KAAA,CAAMkB,KAAK;MAC1B;IACF;IAEA,OAAOA,KAAA;EACT,GAAG,CAACP,KAAA,EAAOJ,EAAA,EAAIP,KAAA,CAAMkB,KAAK,CAAC;EAE3B,oBACEG,KAAA,CAAC;IAAIC,SAAA,EAAW,CAACzB,cAAA,EAAgB,OAAO,CAAC0B,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;eAC3DX,WAAA,E,aACDY,IAAA,CAAClC,iBAAA;MACCW,WAAA,EAAa,OAAOQ,KAAA,KAAU,eAAeR,WAAA;MAC7CH,KAAA,EAAOA,KAAA;MACPiB,aAAA,EAAeA,aAAA;MACfU,WAAA,EAAahB,KAAA,IAASK,KAAA,GAAQA,KAAA,GAAS;QAAEY,IAAA,EAAM;MAAG;MAClDC,iBAAA,EAAmB;QACjB,CAACtB,EAAA,GAAKI;MACR;MACAI,KAAA,eACEW,IAAA,CAAC;QAAGI,KAAA,EAAO;UAAEC,MAAA,EAAQ;QAAE;kBACpBhB,KAAA,iBACCW,IAAA,CAAC9B,UAAA;UAAWS,KAAA,EAAOA,KAAA;UAAOC,SAAA,EAAWA,SAAA;UAAWG,IAAA,EAAMA,IAAA;UAAMD,QAAA,EAAUA;;;MAI5EwB,UAAA,EAAY5B;QAEbS,UAAA;;AAGP;AAEA,OAAO,MAAMoB,SAAA,GAAYvC,aAAA,CAAcI,kBAAA","ignoreList":[]}

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

@@ -2,11 +2,9 @@ import React from 'react';
 import './index.scss';
 export declare const NumberField: React.FC<{
     readonly onChange?: (e: number) => void;
+    readonly path: string;
     readonly validate?: import("payload").NumberFieldValidation;
 } & {
-    readonly descriptionProps?: import("payload").FieldDescriptionClientProps<Omit<import("payload").NumberFieldClient, "type"> & Partial<Pick<import("payload").NumberFieldClient, "type">>>;
-    readonly errorProps?: import("payload").FieldErrorClientProps<Omit<import("payload").NumberFieldClient, "type"> & Partial<Pick<import("payload").NumberFieldClient, "type">>>;
     readonly field: Omit<import("payload").NumberFieldClient, "type"> & Partial<Pick<import("payload").NumberFieldClient, "type">>;
-    readonly labelProps?: import("payload").FieldLabelClientProps<Omit<import("payload").NumberFieldClient, "type"> & Partial<Pick<import("payload").NumberFieldClient, "type">>>;
-} & import("payload").FormFieldBase>;
+} & Omit<import("payload").ClientComponentProps, "field" | "customComponents">>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Number/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAc/D,OAAO,cAAc,CAAA;AAqMrB,eAAO,MAAM,WAAW;;;;;;;;oCAAsC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Number/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAa/D,OAAO,cAAc,CAAA;AAgMrB,eAAO,MAAM,WAAW;;;;;;+EAAsC,CAAA"}

package/dist/fields/Number/index.js

@@ -6,10 +6,9 @@ import { getTranslation } from '@payloadcms/translations';
 import { isNumber } from 'payload/shared';
 import React, { useCallback, useEffect, useState } from 'react';
 import { ReactSelect } from '../../elements/ReactSelect/index.js';
-import { useFieldProps } from '../../forms/FieldPropsProvider/index.js';
+import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
 import { useField } from '../../forms/useField/index.js';
 import { withCondition } from '../../forms/withCondition/index.js';
-import { RenderComponent } from '../../providers/Config/RenderComponent.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { FieldDescription } from '../FieldDescription/index.js';
 import { FieldError } from '../FieldError/index.js';
@@ -19,20 +18,17 @@ import './index.scss';
 const NumberFieldComponent = props => {
   const $ = _c(56);
   const {
-    descriptionProps,
-    errorProps,
-    field,
     field: t0,
-    labelProps,
     onChange: onChangeFromProps,
-    readOnly: readOnlyFromTopLevelProps,
+    path,
+    readOnly,
     validate
   } = props;
   const {
-    name,
-    _path: pathFromProps,
     admin: t1,
     hasMany: t2,
+    label,
+    localized,
     max: t3,
     maxRows: t4,
     min: t5,
@@ -50,7 +46,6 @@ const NumberFieldComponent = props => {
     className,
     description,
     placeholder,
-    readOnly: readOnlyFromAdmin,
     step: t7,
     style,
     width
@@ -60,7 +55,6 @@ const NumberFieldComponent = props => {
   const max = t3 === undefined ? Infinity : t3;
   const maxRows = t4 === undefined ? Infinity : t4;
   const min = t5 === undefined ? -Infinity : t5;
-  const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin;
   const {
     i18n,
     t
@@ -86,35 +80,42 @@ const NumberFieldComponent = props => {
     t8 = $[6];
   }
   const memoizedValidate = t8;
-  const {
-    path: pathFromContext,
-    readOnly: readOnlyFromContext
-  } = useFieldProps();
-  const t9 = pathFromContext ?? pathFromProps ?? name;
-  let t10;
-  if ($[7] !== t9 || $[8] !== memoizedValidate) {
-    t10 = {
-      path: t9,
+  let t9;
+  if ($[7] !== path || $[8] !== memoizedValidate) {
+    t9 = {
+      path,
       validate: memoizedValidate
     };
-    $[7] = t9;
+    $[7] = path;
     $[8] = memoizedValidate;
-    $[9] = t10;
+    $[9] = t9;
   } else {
-    t10 = $[9];
+    t9 = $[9];
   }
   const {
-    formInitializing,
-    formProcessing,
-    path,
+    customComponents: t10,
     setValue,
     showError,
     value: value_0
-  } = useField(t10);
-  const disabled = readOnlyFromProps || readOnlyFromContext || formProcessing || formInitializing;
+  } = useField(t9);
   let t11;
-  if ($[10] !== onChangeFromProps || $[11] !== setValue) {
-    t11 = e => {
+  if ($[10] !== t10) {
+    t11 = t10 === undefined ? {} : t10;
+    $[10] = t10;
+    $[11] = t11;
+  } else {
+    t11 = $[11];
+  }
+  const {
+    AfterInput,
+    BeforeInput,
+    Description,
+    Error,
+    Label
+  } = t11;
+  let t12;
+  if ($[12] !== onChangeFromProps || $[13] !== setValue) {
+    t12 = e => {
       const val = parseFloat(e.target.value);
       let newVal = val;
       if (Number.isNaN(val)) {
@@ -125,25 +126,25 @@ const NumberFieldComponent = props => {
       }
       setValue(newVal);
     };
-    $[10] = onChangeFromProps;
-    $[11] = setValue;
-    $[12] = t11;
+    $[12] = onChangeFromProps;
+    $[13] = setValue;
+    $[14] = t12;
   } else {
-    t11 = $[12];
+    t12 = $[14];
   }
-  const handleChange = t11;
-  let t12;
-  if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
-    t12 = [];
-    $[13] = t12;
+  const handleChange = t12;
+  let t13;
+  if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+    t13 = [];
+    $[15] = t13;
   } else {
-    t12 = $[13];
+    t13 = $[15];
   }
-  const [valueToRender, setValueToRender] = useState(t12);
-  let t13;
-  if ($[14] !== disabled || $[15] !== setValue) {
-    t13 = selectedOption => {
-      if (!disabled) {
+  const [valueToRender, setValueToRender] = useState(t13);
+  let t14;
+  if ($[16] !== readOnly || $[17] !== setValue) {
+    t14 = selectedOption => {
+      if (!readOnly) {
         let newValue;
         if (!selectedOption) {
           newValue = [];
@@ -157,17 +158,17 @@ const NumberFieldComponent = props => {
         setValue(newValue);
       }
     };
-    $[14] = disabled;
-    $[15] = setValue;
-    $[16] = t13;
+    $[16] = readOnly;
+    $[17] = setValue;
+    $[18] = t14;
   } else {
-    t13 = $[16];
+    t14 = $[18];
   }
-  const handleHasManyChange = t13;
-  let t14;
+  const handleHasManyChange = t14;
   let t15;
-  if ($[17] !== hasMany || $[18] !== value_0) {
-    t14 = () => {
+  let t16;
+  if ($[19] !== hasMany || $[20] !== value_0) {
+    t15 = () => {
       if (hasMany && Array.isArray(value_0)) {
         setValueToRender(value_0.map((val_0, index) => ({
           id: `${val_0}${index}`,
@@ -179,77 +180,58 @@ const NumberFieldComponent = props => {
         })));
       }
     };
-    t15 = [value_0, hasMany];
-    $[17] = hasMany;
-    $[18] = value_0;
-    $[19] = t14;
-    $[20] = t15;
+    t16 = [value_0, hasMany];
+    $[19] = hasMany;
+    $[20] = value_0;
+    $[21] = t15;
+    $[22] = t16;
   } else {
-    t14 = $[19];
-    t15 = $[20];
+    t15 = $[21];
+    t16 = $[22];
   }
-  useEffect(t14, t15);
-  const t16 = showError && "error";
-  const t17 = disabled && "read-only";
-  const t18 = hasMany && "has-many";
-  let t19;
-  if ($[21] !== className || $[22] !== t16 || $[23] !== t17 || $[24] !== t18) {
-    t19 = [fieldBaseClass, "number", className, t16, t17, t18].filter(Boolean);
-    $[21] = className;
-    $[22] = t16;
-    $[23] = t17;
-    $[24] = t18;
-    $[25] = t19;
+  useEffect(t15, t16);
+  const t17 = showError && "error";
+  const t18 = readOnly && "read-only";
+  const t19 = hasMany && "has-many";
+  let t20;
+  if ($[23] !== className || $[24] !== t17 || $[25] !== t18 || $[26] !== t19) {
+    t20 = [fieldBaseClass, "number", className, t17, t18, t19].filter(Boolean);
+    $[23] = className;
+    $[24] = t17;
+    $[25] = t18;
+    $[26] = t19;
+    $[27] = t20;
   } else {
-    t19 = $[25];
+    t20 = $[27];
   }
-  const t20 = t19.join(" ");
-  let t21;
-  if ($[26] !== style || $[27] !== width || $[28] !== field || $[29] !== labelProps || $[30] !== errorProps || $[31] !== path || $[32] !== hasMany || $[33] !== value_0 || $[34] !== maxRows || $[35] !== t || $[36] !== disabled || $[37] !== handleHasManyChange || $[38] !== showError || $[39] !== valueToRender || $[40] !== placeholder || $[41] !== i18n || $[42] !== max || $[43] !== min || $[44] !== handleChange || $[45] !== step || $[46] !== descriptionProps || $[47] !== description || $[48] !== t20) {
-    let t22;
-    if ($[50] !== labelProps) {
-      t22 = labelProps || {};
-      $[50] = labelProps;
-      $[51] = t22;
-    } else {
-      t22 = $[51];
-    }
-    let t23;
-    if ($[52] !== errorProps) {
-      t23 = errorProps || {};
-      $[52] = errorProps;
-      $[53] = t23;
-    } else {
-      t23 = $[53];
-    }
-    let t24;
-    if ($[54] !== descriptionProps) {
-      t24 = descriptionProps || {};
-      $[54] = descriptionProps;
-      $[55] = t24;
-    } else {
-      t24 = $[55];
-    }
-    t21 = _jsxs("div", {
-      className: t20,
+  const t21 = t20.join(" ");
+  let t22;
+  if ($[28] !== style || $[29] !== width || $[30] !== label || $[31] !== localized || $[32] !== path || $[33] !== required || $[34] !== Label || $[35] !== showError || $[36] !== Error || $[37] !== hasMany || $[38] !== value_0 || $[39] !== maxRows || $[40] !== t || $[41] !== readOnly || $[42] !== handleHasManyChange || $[43] !== valueToRender || $[44] !== placeholder || $[45] !== i18n || $[46] !== max || $[47] !== min || $[48] !== handleChange || $[49] !== step || $[50] !== BeforeInput || $[51] !== AfterInput || $[52] !== description || $[53] !== Description || $[54] !== t21) {
+    t22 = _jsxs("div", {
+      className: t21,
       style: {
         ...style,
         width
       },
-      children: [_jsx(FieldLabel, {
-        field,
-        Label: field?.admin?.components?.Label,
-        ...t22
+      children: [_jsx(RenderCustomComponent, {
+        CustomComponent: Label,
+        Fallback: _jsx(FieldLabel, {
+          label,
+          localized,
+          path,
+          required
+        })
       }), _jsxs("div", {
         className: `${fieldBaseClass}__wrap`,
-        children: [_jsx(FieldError, {
-          CustomError: field?.admin?.components?.Error,
-          field,
-          path,
-          ...t23
+        children: [_jsx(RenderCustomComponent, {
+          CustomComponent: Error,
+          Fallback: _jsx(FieldError, {
+            path,
+            showError
+          })
         }), hasMany ? _jsx(ReactSelect, {
           className: `field-${path.replace(/\./g, "__")}`,
-          disabled,
+          disabled: readOnly,
           filterOption: (_, rawInput) => {
             const isOverHasMany = Array.isArray(value_0) && value_0.length >= maxRows;
             return isNumber(rawInput) && !isOverHasMany;
@@ -274,10 +256,8 @@ const NumberFieldComponent = props => {
           showError,
           value: valueToRender
         }) : _jsxs("div", {
-          children: [_jsx(RenderComponent, {
-            mappedComponent: field?.admin?.components?.beforeInput
-          }), _jsx("input", {
-            disabled,
+          children: [BeforeInput, _jsx("input", {
+            disabled: readOnly,
             id: `field-${path.replace(/\./g, "__")}`,
             max,
             min,
@@ -288,45 +268,48 @@ const NumberFieldComponent = props => {
             step,
             type: "number",
             value: typeof value_0 === "number" ? value_0 : ""
-          }), _jsx(RenderComponent, {
-            mappedComponent: field?.admin?.components?.afterInput
-          })]
-        }), _jsx(FieldDescription, {
-          Description: field?.admin?.components?.Description,
-          description,
-          field,
-          ...t24
+          }), AfterInput]
+        }), _jsx(RenderCustomComponent, {
+          CustomComponent: Description,
+          Fallback: _jsx(FieldDescription, {
+            description,
+            path
+          })
         })]
       })]
     });
-    $[26] = style;
-    $[27] = width;
-    $[28] = field;
-    $[29] = labelProps;
-    $[30] = errorProps;
-    $[31] = path;
-    $[32] = hasMany;
-    $[33] = value_0;
-    $[34] = maxRows;
-    $[35] = t;
-    $[36] = disabled;
-    $[37] = handleHasManyChange;
-    $[38] = showError;
-    $[39] = valueToRender;
-    $[40] = placeholder;
-    $[41] = i18n;
-    $[42] = max;
-    $[43] = min;
-    $[44] = handleChange;
-    $[45] = step;
-    $[46] = descriptionProps;
-    $[47] = description;
-    $[48] = t20;
-    $[49] = t21;
+    $[28] = style;
+    $[29] = width;
+    $[30] = label;
+    $[31] = localized;
+    $[32] = path;
+    $[33] = required;
+    $[34] = Label;
+    $[35] = showError;
+    $[36] = Error;
+    $[37] = hasMany;
+    $[38] = value_0;
+    $[39] = maxRows;
+    $[40] = t;
+    $[41] = readOnly;
+    $[42] = handleHasManyChange;
+    $[43] = valueToRender;
+    $[44] = placeholder;
+    $[45] = i18n;
+    $[46] = max;
+    $[47] = min;
+    $[48] = handleChange;
+    $[49] = step;
+    $[50] = BeforeInput;
+    $[51] = AfterInput;
+    $[52] = description;
+    $[53] = Description;
+    $[54] = t21;
+    $[55] = t22;
   } else {
-    t21 = $[49];
+    t22 = $[55];
   }
-  return t21;
+  return t22;
 };
 export const NumberField = withCondition(NumberFieldComponent);
 function _temp(e_0) {