@payloadcms/ui 3.68.0-internal-debug.e9b66ee → 3.68.0-internal-debug.654e4ad

package/dist/fields/JSON/index.js

@@ -1,4 +1,5 @@
 'use client';
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { defaultOptions } from '../../elements/CodeEditor/constants.js';
@@ -106,24 +107,98 @@ const JSONFieldComponent = (props)=>{
     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>;
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: [
+            fieldBaseClass,
+            baseClass,
+            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/JSON/index.tsx",
+                    lineNumber: 158,
+                    columnNumber: 11
+                }, void 0)
+            }, void 0, false, {
+                fileName: "src/fields/JSON/index.tsx",
+                lineNumber: 155,
+                columnNumber: 7
+            }, this),
+            /*#__PURE__*/ _jsxDEV("div", {
+                className: `${fieldBaseClass}__wrap`,
+                children: [
+                    /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
+                        CustomComponent: Error,
+                        Fallback: /*#__PURE__*/ _jsxDEV(FieldError, {
+                            message: jsonError,
+                            path: path,
+                            showError: showError
+                        }, void 0, false, {
+                            fileName: "src/fields/JSON/index.tsx",
+                            lineNumber: 164,
+                            columnNumber: 21
+                        }, void 0)
+                    }, void 0, false, {
+                        fileName: "src/fields/JSON/index.tsx",
+                        lineNumber: 162,
+                        columnNumber: 9
+                    }, this),
+                    BeforeInput,
+                    /*#__PURE__*/ _jsxDEV(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, '__')}`
+                        }
+                    }, void 0, false, {
+                        fileName: "src/fields/JSON/index.tsx",
+                        lineNumber: 167,
+                        columnNumber: 9
+                    }, this),
+                    AfterInput
+                ]
+            }, void 0, true, {
+                fileName: "src/fields/JSON/index.tsx",
+                lineNumber: 161,
+                columnNumber: 7
+            }, this),
+            /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
+                CustomComponent: Description,
+                Fallback: /*#__PURE__*/ _jsxDEV(FieldDescription, {
+                    description: description,
+                    path: path
+                }, void 0, false, {
+                    fileName: "src/fields/JSON/index.tsx",
+                    lineNumber: 184,
+                    columnNumber: 19
+                }, void 0)
+            }, void 0, false, {
+                fileName: "src/fields/JSON/index.tsx",
+                lineNumber: 182,
+                columnNumber: 7
+            }, this)
+        ]
+    }, void 0, true, {
+        fileName: "src/fields/JSON/index.tsx",
+        lineNumber: 143,
+        columnNumber: 5
+    }, this);
 };
 export const JSONField = withCondition(JSONFieldComponent);
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/JSON/index.tsx"],"sourcesContent":["'use client'\nimport type { JSONFieldClientComponent, JsonObject } from 'payload'\n\nimport { type OnMount } from '@monaco-editor/react'\nimport React, { useCallback, useEffect, useMemo, useState } from 'react'\nimport { v4 as uuidv4 } from 'uuid'\n\nimport { defaultOptions } from '../../elements/CodeEditor/constants.js'\nimport { CodeEditor } from '../../elements/CodeEditor/index.js'\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { FieldDescription } from '../FieldDescription/index.js'\nimport { FieldError } from '../FieldError/index.js'\nimport { FieldLabel } from '../FieldLabel/index.js'\nimport { mergeFieldStyles } from '../mergeFieldStyles.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.scss'\n\nconst baseClass = 'json-field'\n\nconst JSONFieldComponent: JSONFieldClientComponent = (props) => {\n  const {\n    field,\n    field: {\n      admin: { className, description, editorOptions, maxHeight } = {},\n      jsonSchema,\n      label,\n      localized,\n      required,\n    },\n    path: pathFromProps,\n    readOnly,\n    validate,\n  } = props\n\n  const { insertSpaces = defaultOptions.insertSpaces, tabSize = defaultOptions.tabSize } =\n    editorOptions || {}\n\n  const formatJSON = useCallback(\n    (value: JsonObject | undefined): string | undefined => {\n      if (value === undefined) {\n        return undefined\n      }\n      if (value === null) {\n        return ''\n      }\n      return insertSpaces ? JSON.stringify(value, null, tabSize) : JSON.stringify(value, null, '\\t')\n    },\n    [tabSize, insertSpaces],\n  )\n\n  const [jsonError, setJsonError] = useState<string>()\n  const inputChangeFromRef = React.useRef<'formState' | 'internalEditor'>('formState')\n  const [recalculatedHeightAt, setRecalculatedHeightAt] = useState<number | undefined>(Date.now())\n\n  const memoizedValidate = useCallback(\n    (value, options) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...options, jsonError, required })\n      }\n    },\n    [validate, required, jsonError],\n  )\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    disabled,\n    initialValue,\n    path,\n    setValue,\n    showError,\n    value,\n  } = useField<JsonObject>({\n    potentiallyStalePath: pathFromProps,\n    validate: memoizedValidate,\n  })\n\n  const stringValueRef = React.useRef<string>(formatJSON(value ?? initialValue))\n\n  const handleMount = useCallback<OnMount>(\n    (editor, monaco) => {\n      if (!jsonSchema) {\n        return\n      }\n\n      monaco.languages.json.jsonDefaults.setDiagnosticsOptions({\n        enableSchemaRequest: true,\n        schemas: [\n          ...(monaco.languages.json.jsonDefaults.diagnosticsOptions.schemas || []),\n          jsonSchema,\n        ],\n        validate: true,\n      })\n\n      const uri = jsonSchema.uri\n      const newUri = uri.includes('?')\n        ? `${uri}&${crypto.randomUUID ? crypto.randomUUID() : uuidv4()}`\n        : `${uri}?${crypto.randomUUID ? crypto.randomUUID() : uuidv4()}`\n\n      editor.setModel(\n        monaco.editor.createModel(formatJSON(value) || '', 'json', monaco.Uri.parse(newUri)),\n      )\n    },\n    [jsonSchema, formatJSON, value],\n  )\n\n  const handleChange = useCallback(\n    (val: string) => {\n      if (readOnly || disabled) {\n        return\n      }\n      inputChangeFromRef.current = 'internalEditor'\n\n      try {\n        setValue(val ? JSON.parse(val) : null)\n        stringValueRef.current = val\n        setJsonError(undefined)\n      } catch (e) {\n        setValue(val ? val : null)\n        stringValueRef.current = val\n        setJsonError(e)\n      }\n    },\n    [readOnly, disabled, setValue],\n  )\n\n  useEffect(() => {\n    if (inputChangeFromRef.current === 'formState') {\n      const newStringValue = formatJSON(value ?? initialValue)\n      if (newStringValue !== stringValueRef.current) {\n        stringValueRef.current = newStringValue\n        setRecalculatedHeightAt(Date.now())\n      }\n    }\n\n    inputChangeFromRef.current = 'formState'\n  }, [initialValue, path, formatJSON, value])\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        baseClass,\n        className,\n        showError && 'error',\n        (readOnly || disabled) && 'read-only',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={styles}\n    >\n      <RenderCustomComponent\n        CustomComponent={Label}\n        Fallback={\n          <FieldLabel label={label} localized={localized} path={path} required={required} />\n        }\n      />\n      <div className={`${fieldBaseClass}__wrap`}>\n        <RenderCustomComponent\n          CustomComponent={Error}\n          Fallback={<FieldError message={jsonError} path={path} showError={showError} />}\n        />\n        {BeforeInput}\n        <CodeEditor\n          defaultLanguage=\"json\"\n          maxHeight={maxHeight}\n          onChange={handleChange}\n          onMount={handleMount}\n          options={editorOptions}\n          readOnly={readOnly || disabled}\n          recalculatedHeightAt={recalculatedHeightAt}\n          value={stringValueRef.current}\n          wrapperProps={{\n            id: `field-${path?.replace(/\\./g, '__')}`,\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 JSONField = withCondition(JSONFieldComponent)\n"],"names":["React","useCallback","useEffect","useMemo","useState","v4","uuidv4","defaultOptions","CodeEditor","RenderCustomComponent","useField","withCondition","FieldDescription","FieldError","FieldLabel","mergeFieldStyles","fieldBaseClass","baseClass","JSONFieldComponent","props","field","admin","className","description","editorOptions","maxHeight","jsonSchema","label","localized","required","path","pathFromProps","readOnly","validate","insertSpaces","tabSize","formatJSON","value","undefined","JSON","stringify","jsonError","setJsonError","inputChangeFromRef","useRef","recalculatedHeightAt","setRecalculatedHeightAt","Date","now","memoizedValidate","options","customComponents","AfterInput","BeforeInput","Description","Error","Label","disabled","initialValue","setValue","showError","potentiallyStalePath","stringValueRef","handleMount","editor","monaco","languages","json","jsonDefaults","setDiagnosticsOptions","enableSchemaRequest","schemas","diagnosticsOptions","uri","newUri","includes","crypto","randomUUID","setModel","createModel","Uri","parse","handleChange","val","current","e","newStringValue","styles","div","filter","Boolean","join","style","CustomComponent","Fallback","message","defaultLanguage","onChange","onMount","wrapperProps","id","replace","JSONField"],"mappings":"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"}
+{"version":3,"sources":["../../../src/fields/JSON/index.tsx"],"sourcesContent":["'use client'\nimport type { JSONFieldClientComponent, JsonObject } from 'payload'\n\nimport { type OnMount } from '@monaco-editor/react'\nimport React, { useCallback, useEffect, useMemo, useState } from 'react'\nimport { v4 as uuidv4 } from 'uuid'\n\nimport { defaultOptions } from '../../elements/CodeEditor/constants.js'\nimport { CodeEditor } from '../../elements/CodeEditor/index.js'\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { FieldDescription } from '../FieldDescription/index.js'\nimport { FieldError } from '../FieldError/index.js'\nimport { FieldLabel } from '../FieldLabel/index.js'\nimport { mergeFieldStyles } from '../mergeFieldStyles.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.scss'\n\nconst baseClass = 'json-field'\n\nconst JSONFieldComponent: JSONFieldClientComponent = (props) => {\n  const {\n    field,\n    field: {\n      admin: { className, description, editorOptions, maxHeight } = {},\n      jsonSchema,\n      label,\n      localized,\n      required,\n    },\n    path: pathFromProps,\n    readOnly,\n    validate,\n  } = props\n\n  const { insertSpaces = defaultOptions.insertSpaces, tabSize = defaultOptions.tabSize } =\n    editorOptions || {}\n\n  const formatJSON = useCallback(\n    (value: JsonObject | undefined): string | undefined => {\n      if (value === undefined) {\n        return undefined\n      }\n      if (value === null) {\n        return ''\n      }\n      return insertSpaces ? JSON.stringify(value, null, tabSize) : JSON.stringify(value, null, '\\t')\n    },\n    [tabSize, insertSpaces],\n  )\n\n  const [jsonError, setJsonError] = useState<string>()\n  const inputChangeFromRef = React.useRef<'formState' | 'internalEditor'>('formState')\n  const [recalculatedHeightAt, setRecalculatedHeightAt] = useState<number | undefined>(Date.now())\n\n  const memoizedValidate = useCallback(\n    (value, options) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...options, jsonError, required })\n      }\n    },\n    [validate, required, jsonError],\n  )\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    disabled,\n    initialValue,\n    path,\n    setValue,\n    showError,\n    value,\n  } = useField<JsonObject>({\n    potentiallyStalePath: pathFromProps,\n    validate: memoizedValidate,\n  })\n\n  const stringValueRef = React.useRef<string>(formatJSON(value ?? initialValue))\n\n  const handleMount = useCallback<OnMount>(\n    (editor, monaco) => {\n      if (!jsonSchema) {\n        return\n      }\n\n      monaco.languages.json.jsonDefaults.setDiagnosticsOptions({\n        enableSchemaRequest: true,\n        schemas: [\n          ...(monaco.languages.json.jsonDefaults.diagnosticsOptions.schemas || []),\n          jsonSchema,\n        ],\n        validate: true,\n      })\n\n      const uri = jsonSchema.uri\n      const newUri = uri.includes('?')\n        ? `${uri}&${crypto.randomUUID ? crypto.randomUUID() : uuidv4()}`\n        : `${uri}?${crypto.randomUUID ? crypto.randomUUID() : uuidv4()}`\n\n      editor.setModel(\n        monaco.editor.createModel(formatJSON(value) || '', 'json', monaco.Uri.parse(newUri)),\n      )\n    },\n    [jsonSchema, formatJSON, value],\n  )\n\n  const handleChange = useCallback(\n    (val: string) => {\n      if (readOnly || disabled) {\n        return\n      }\n      inputChangeFromRef.current = 'internalEditor'\n\n      try {\n        setValue(val ? JSON.parse(val) : null)\n        stringValueRef.current = val\n        setJsonError(undefined)\n      } catch (e) {\n        setValue(val ? val : null)\n        stringValueRef.current = val\n        setJsonError(e)\n      }\n    },\n    [readOnly, disabled, setValue],\n  )\n\n  useEffect(() => {\n    if (inputChangeFromRef.current === 'formState') {\n      const newStringValue = formatJSON(value ?? initialValue)\n      if (newStringValue !== stringValueRef.current) {\n        stringValueRef.current = newStringValue\n        setRecalculatedHeightAt(Date.now())\n      }\n    }\n\n    inputChangeFromRef.current = 'formState'\n  }, [initialValue, path, formatJSON, value])\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        baseClass,\n        className,\n        showError && 'error',\n        (readOnly || disabled) && 'read-only',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={styles}\n    >\n      <RenderCustomComponent\n        CustomComponent={Label}\n        Fallback={\n          <FieldLabel label={label} localized={localized} path={path} required={required} />\n        }\n      />\n      <div className={`${fieldBaseClass}__wrap`}>\n        <RenderCustomComponent\n          CustomComponent={Error}\n          Fallback={<FieldError message={jsonError} path={path} showError={showError} />}\n        />\n        {BeforeInput}\n        <CodeEditor\n          defaultLanguage=\"json\"\n          maxHeight={maxHeight}\n          onChange={handleChange}\n          onMount={handleMount}\n          options={editorOptions}\n          readOnly={readOnly || disabled}\n          recalculatedHeightAt={recalculatedHeightAt}\n          value={stringValueRef.current}\n          wrapperProps={{\n            id: `field-${path?.replace(/\\./g, '__')}`,\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 JSONField = withCondition(JSONFieldComponent)\n"],"names":["React","useCallback","useEffect","useMemo","useState","v4","uuidv4","defaultOptions","CodeEditor","RenderCustomComponent","useField","withCondition","FieldDescription","FieldError","FieldLabel","mergeFieldStyles","fieldBaseClass","baseClass","JSONFieldComponent","props","field","admin","className","description","editorOptions","maxHeight","jsonSchema","label","localized","required","path","pathFromProps","readOnly","validate","insertSpaces","tabSize","formatJSON","value","undefined","JSON","stringify","jsonError","setJsonError","inputChangeFromRef","useRef","recalculatedHeightAt","setRecalculatedHeightAt","Date","now","memoizedValidate","options","customComponents","AfterInput","BeforeInput","Description","Error","Label","disabled","initialValue","setValue","showError","potentiallyStalePath","stringValueRef","handleMount","editor","monaco","languages","json","jsonDefaults","setDiagnosticsOptions","enableSchemaRequest","schemas","diagnosticsOptions","uri","newUri","includes","crypto","randomUUID","setModel","createModel","Uri","parse","handleChange","val","current","e","newStringValue","styles","div","filter","Boolean","join","style","CustomComponent","Fallback","message","defaultLanguage","onChange","onMount","wrapperProps","id","replace","JSONField"],"mappings":"AAAA;;AAIA,OAAOA,SAASC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAO;AACxE,SAASC,MAAMC,MAAM,QAAQ,OAAM;AAEnC,SAASC,cAAc,QAAQ,yCAAwC;AACvE,SAASC,UAAU,QAAQ,qCAAoC;AAC/D,SAASC,qBAAqB,QAAQ,gDAA+C;AACrF,SAASC,QAAQ,QAAQ,gCAA+B;AACxD,SAASC,aAAa,QAAQ,qCAAoC;AAClE,SAASC,gBAAgB,QAAQ,+BAA8B;AAC/D,SAASC,UAAU,QAAQ,yBAAwB;AACnD,SAASC,UAAU,QAAQ,yBAAwB;AACnD,SAASC,gBAAgB,QAAQ,yBAAwB;AACzD,SAASC,cAAc,QAAQ,qBAAoB;AACnD,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,MAAMC,qBAA+C,CAACC;IACpD,MAAM,EACJC,KAAK,EACLA,OAAO,EACLC,OAAO,EAAEC,SAAS,EAAEC,WAAW,EAAEC,aAAa,EAAEC,SAAS,EAAE,GAAG,CAAC,CAAC,EAChEC,UAAU,EACVC,KAAK,EACLC,SAAS,EACTC,QAAQ,EACT,EACDC,MAAMC,aAAa,EACnBC,QAAQ,EACRC,QAAQ,EACT,GAAGd;IAEJ,MAAM,EAAEe,eAAe3B,eAAe2B,YAAY,EAAEC,UAAU5B,eAAe4B,OAAO,EAAE,GACpFX,iBAAiB,CAAC;IAEpB,MAAMY,aAAanC,YACjB,CAACoC;QACC,IAAIA,UAAUC,WAAW;YACvB,OAAOA;QACT;QACA,IAAID,UAAU,MAAM;YAClB,OAAO;QACT;QACA,OAAOH,eAAeK,KAAKC,SAAS,CAACH,OAAO,MAAMF,WAAWI,KAAKC,SAAS,CAACH,OAAO,MAAM;IAC3F,GACA;QAACF;QAASD;KAAa;IAGzB,MAAM,CAACO,WAAWC,aAAa,GAAGtC;IAClC,MAAMuC,qBAAqB3C,MAAM4C,MAAM,CAAiC;IACxE,MAAM,CAACC,sBAAsBC,wBAAwB,GAAG1C,SAA6B2C,KAAKC,GAAG;IAE7F,MAAMC,mBAAmBhD,YACvB,CAACoC,OAAOa;QACN,IAAI,OAAOjB,aAAa,YAAY;YAClC,OAAOA,SAASI,OAAO;gBAAE,GAAGa,OAAO;gBAAET;gBAAWZ;YAAS;QAC3D;IACF,GACA;QAACI;QAAUJ;QAAUY;KAAU;IAGjC,MAAM,EACJU,kBAAkB,EAAEC,UAAU,EAAEC,WAAW,EAAEC,WAAW,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAG,CAAC,CAAC,EAC7EC,QAAQ,EACRC,YAAY,EACZ5B,IAAI,EACJ6B,QAAQ,EACRC,SAAS,EACTvB,KAAK,EACN,GAAG3B,SAAqB;QACvBmD,sBAAsB9B;QACtBE,UAAUgB;IACZ;IAEA,MAAMa,iBAAiB9D,MAAM4C,MAAM,CAASR,WAAWC,SAASqB;IAEhE,MAAMK,cAAc9D,YAClB,CAAC+D,QAAQC;QACP,IAAI,CAACvC,YAAY;YACf;QACF;QAEAuC,OAAOC,SAAS,CAACC,IAAI,CAACC,YAAY,CAACC,qBAAqB,CAAC;YACvDC,qBAAqB;YACrBC,SAAS;mBACHN,OAAOC,SAAS,CAACC,IAAI,CAACC,YAAY,CAACI,kBAAkB,CAACD,OAAO,IAAI,EAAE;gBACvE7C;aACD;YACDO,UAAU;QACZ;QAEA,MAAMwC,MAAM/C,WAAW+C,GAAG;QAC1B,MAAMC,SAASD,IAAIE,QAAQ,CAAC,OACxB,GAAGF,IAAI,CAAC,EAAEG,OAAOC,UAAU,GAAGD,OAAOC,UAAU,KAAKvE,UAAU,GAC9D,GAAGmE,IAAI,CAAC,EAAEG,OAAOC,UAAU,GAAGD,OAAOC,UAAU,KAAKvE,UAAU;QAElE0D,OAAOc,QAAQ,CACbb,OAAOD,MAAM,CAACe,WAAW,CAAC3C,WAAWC,UAAU,IAAI,QAAQ4B,OAAOe,GAAG,CAACC,KAAK,CAACP;IAEhF,GACA;QAAChD;QAAYU;QAAYC;KAAM;IAGjC,MAAM6C,eAAejF,YACnB,CAACkF;QACC,IAAInD,YAAYyB,UAAU;YACxB;QACF;QACAd,mBAAmByC,OAAO,GAAG;QAE7B,IAAI;YACFzB,SAASwB,MAAM5C,KAAK0C,KAAK,CAACE,OAAO;YACjCrB,eAAesB,OAAO,GAAGD;YACzBzC,aAAaJ;QACf,EAAE,OAAO+C,GAAG;YACV1B,SAASwB,MAAMA,MAAM;YACrBrB,eAAesB,OAAO,GAAGD;YACzBzC,aAAa2C;QACf;IACF,GACA;QAACrD;QAAUyB;QAAUE;KAAS;IAGhCzD,UAAU;QACR,IAAIyC,mBAAmByC,OAAO,KAAK,aAAa;YAC9C,MAAME,iBAAiBlD,WAAWC,SAASqB;YAC3C,IAAI4B,mBAAmBxB,eAAesB,OAAO,EAAE;gBAC7CtB,eAAesB,OAAO,GAAGE;gBACzBxC,wBAAwBC,KAAKC,GAAG;YAClC;QACF;QAEAL,mBAAmByC,OAAO,GAAG;IAC/B,GAAG;QAAC1B;QAAc5B;QAAMM;QAAYC;KAAM;IAE1C,MAAMkD,SAASpF,QAAQ,IAAMY,iBAAiBK,QAAQ;QAACA;KAAM;IAE7D,qBACE,QAACoE;QACClE,WAAW;YACTN;YACAC;YACAK;YACAsC,aAAa;YACZ5B,CAAAA,YAAYyB,QAAO,KAAM;SAC3B,CACEgC,MAAM,CAACC,SACPC,IAAI,CAAC;QACRC,OAAOL;;0BAEP,QAAC9E;gBACCoF,iBAAiBrC;gBACjBsC,wBACE,QAAChF;oBAAWa,OAAOA;oBAAOC,WAAWA;oBAAWE,MAAMA;oBAAMD,UAAUA;;;;;;;;;;;0BAG1E,QAAC2D;gBAAIlE,WAAW,GAAGN,eAAe,MAAM,CAAC;;kCACvC,QAACP;wBACCoF,iBAAiBtC;wBACjBuC,wBAAU,QAACjF;4BAAWkF,SAAStD;4BAAWX,MAAMA;4BAAM8B,WAAWA;;;;;;;;;;;oBAElEP;kCACD,QAAC7C;wBACCwF,iBAAgB;wBAChBvE,WAAWA;wBACXwE,UAAUf;wBACVgB,SAASnC;wBACTb,SAAS1B;wBACTQ,UAAUA,YAAYyB;wBACtBZ,sBAAsBA;wBACtBR,OAAOyB,eAAesB,OAAO;wBAC7Be,cAAc;4BACZC,IAAI,CAAC,MAAM,EAAEtE,MAAMuE,QAAQ,OAAO,OAAO;wBAC3C;;;;;;oBAEDjD;;;;;;;0BAEH,QAAC3C;gBACCoF,iBAAiBvC;gBACjBwC,wBAAU,QAAClF;oBAAiBW,aAAaA;oBAAaO,MAAMA;;;;;;;;;;;;;;;;;AAIpE;AAEA,OAAO,MAAMwE,YAAY3F,cAAcO,oBAAmB"}

package/dist/fields/Join/index.js

@@ -1,7 +1,8 @@
 'use client';
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import ObjectIdImport from 'bson-objectid';
 import { fieldAffectsData, flattenTopLevelFields } from 'payload/shared';
-import { useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { RelationshipTable } from '../../elements/RelationshipTable/index.js';
 import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
 import { useField } from '../../forms/useField/index.js';
@@ -149,25 +150,92 @@ const JoinFieldComponent = (props)=>{
     if (!docConfig) {
         return null;
     }
-    return <div className={[
-        fieldBaseClass,
-        showError && 'error',
-        'join'
-    ].filter(Boolean).join(' ')} id={`field-${path?.replace(/\./g, '__')}`}>
-      <RenderCustomComponent CustomComponent={Error} Fallback={<FieldError path={path} showError={showError}/>}/>
-      <RelationshipTable AfterInput={AfterInput} allowCreate={typeof docID !== 'undefined' && allowCreate} BeforeInput={BeforeInput} disableTable={filterOptions === null} field={field} fieldPath={path} filterOptions={filterOptions} initialData={docID && value ? value : {
-        docs: []
-    }} initialDrawerData={initialDrawerData} Label={<h4 style={{
-        margin: 0
-    }}>
-            {Label || <FieldLabel label={label} localized={localized} path={path} required={required}/>}
-          </h4>} parent={Array.isArray(collection) ? {
-        id: docID,
-        collectionSlug: docConfig.slug,
-        joinPath: path
-    } : undefined} relationTo={collection}/>
-      <RenderCustomComponent CustomComponent={Description} Fallback={<FieldDescription description={description} path={path}/>}/>
-    </div>;
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: [
+            fieldBaseClass,
+            showError && 'error',
+            'join'
+        ].filter(Boolean).join(' '),
+        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/Join/index.tsx",
+                    lineNumber: 207,
+                    columnNumber: 19
+                }, void 0)
+            }, void 0, false, {
+                fileName: "src/fields/Join/index.tsx",
+                lineNumber: 205,
+                columnNumber: 7
+            }, this),
+            /*#__PURE__*/ _jsxDEV(RelationshipTable, {
+                AfterInput: AfterInput,
+                allowCreate: typeof docID !== 'undefined' && allowCreate,
+                BeforeInput: BeforeInput,
+                disableTable: filterOptions === null,
+                field: field,
+                fieldPath: path,
+                filterOptions: filterOptions,
+                initialData: docID && value ? value : {
+                    docs: []
+                },
+                initialDrawerData: initialDrawerData,
+                Label: /*#__PURE__*/ _jsxDEV("h4", {
+                    style: {
+                        margin: 0
+                    },
+                    children: Label || /*#__PURE__*/ _jsxDEV(FieldLabel, {
+                        label: label,
+                        localized: localized,
+                        path: path,
+                        required: required
+                    }, void 0, false, {
+                        fileName: "src/fields/Join/index.tsx",
+                        lineNumber: 222,
+                        columnNumber: 15
+                    }, void 0)
+                }, void 0, false, {
+                    fileName: "src/fields/Join/index.tsx",
+                    lineNumber: 220,
+                    columnNumber: 11
+                }, void 0),
+                parent: Array.isArray(collection) ? {
+                    id: docID,
+                    collectionSlug: docConfig.slug,
+                    joinPath: path
+                } : undefined,
+                relationTo: collection
+            }, void 0, false, {
+                fileName: "src/fields/Join/index.tsx",
+                lineNumber: 209,
+                columnNumber: 7
+            }, this),
+            /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
+                CustomComponent: Description,
+                Fallback: /*#__PURE__*/ _jsxDEV(FieldDescription, {
+                    description: description,
+                    path: path
+                }, void 0, false, {
+                    fileName: "src/fields/Join/index.tsx",
+                    lineNumber: 239,
+                    columnNumber: 19
+                }, void 0)
+            }, void 0, false, {
+                fileName: "src/fields/Join/index.tsx",
+                lineNumber: 237,
+                columnNumber: 7
+            }, this)
+        ]
+    }, void 0, true, {
+        fileName: "src/fields/Join/index.tsx",
+        lineNumber: 201,
+        columnNumber: 5
+    }, this);
 };
 export const JoinField = withCondition(JoinFieldComponent);
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/Join/index.tsx"],"sourcesContent":["'use client'\n\nimport type {\n  ClientConfig,\n  ClientField,\n  JoinFieldClient,\n  JoinFieldClientComponent,\n  PaginatedDocs,\n  Where,\n} from 'payload'\n\nimport ObjectIdImport from 'bson-objectid'\nimport { fieldAffectsData, flattenTopLevelFields } from 'payload/shared'\nimport React, { useMemo } from 'react'\n\nimport { RelationshipTable } from '../../elements/RelationshipTable/index.js'\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { FieldDescription } from '../FieldDescription/index.js'\nimport { FieldError } from '../FieldError/index.js'\nimport { FieldLabel } from '../FieldLabel/index.js'\nimport { fieldBaseClass } from '../index.js'\n\nconst ObjectId = 'default' in ObjectIdImport ? ObjectIdImport.default : ObjectIdImport\n\n/**\n * Recursively builds the default data for joined collection\n */\nconst getInitialDrawerData = ({\n  collectionSlug,\n  config,\n  docID,\n  fields,\n  segments,\n}: {\n  collectionSlug: string\n  config: ClientConfig\n  docID: number | string\n  fields: ClientField[]\n  segments: string[]\n}) => {\n  const flattenedFields = flattenTopLevelFields(fields, {\n    keepPresentationalFields: true,\n  })\n\n  const path = segments[0]\n\n  const field = flattenedFields.find((field) => field.name === path)\n\n  if (!field) {\n    return null\n  }\n\n  if (field.type === 'relationship' || field.type === 'upload') {\n    let value: { relationTo: string; value: number | string } | number | string = docID\n    if (Array.isArray(field.relationTo)) {\n      value = {\n        relationTo: collectionSlug,\n        value: docID,\n      }\n    }\n    return {\n      [field.name]: field.hasMany ? [value] : value,\n    }\n  }\n\n  const nextSegments = segments.slice(1, segments.length)\n\n  if (field.type === 'tab' || (field.type === 'group' && fieldAffectsData(field))) {\n    return {\n      [field.name]: getInitialDrawerData({\n        collectionSlug,\n        config,\n        docID,\n        fields: field.fields,\n        segments: nextSegments,\n      }),\n    }\n  }\n\n  if (field.type === 'array') {\n    const initialData = getInitialDrawerData({\n      collectionSlug,\n      config,\n      docID,\n      fields: field.fields,\n      segments: nextSegments,\n    })\n\n    initialData.id = ObjectId().toHexString()\n\n    return {\n      [field.name]: [initialData],\n    }\n  }\n\n  if (field.type === 'blocks') {\n    for (const _block of field.blockReferences ?? field.blocks) {\n      const block = typeof _block === 'string' ? config.blocksMap[_block] : _block\n\n      const blockInitialData = getInitialDrawerData({\n        collectionSlug,\n        config,\n        docID,\n        fields: block.fields,\n        segments: nextSegments,\n      })\n\n      if (blockInitialData) {\n        blockInitialData.id = ObjectId().toHexString()\n        blockInitialData.blockType = block.slug\n\n        return {\n          [field.name]: [blockInitialData],\n        }\n      }\n    }\n  }\n}\n\nconst JoinFieldComponent: JoinFieldClientComponent = (props) => {\n  const {\n    field,\n    field: {\n      admin: { allowCreate, description },\n      collection,\n      label,\n      localized,\n      on,\n      required,\n    },\n    path: pathFromProps,\n  } = props\n\n  const { id: docID, docConfig } = useDocumentInfo()\n\n  const { config, getEntityConfig } = useConfig()\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    path,\n    showError,\n    value,\n  } = useField<PaginatedDocs>({\n    potentiallyStalePath: pathFromProps,\n  })\n\n  const filterOptions: null | Where = useMemo(() => {\n    if (!docID) {\n      return null\n    }\n\n    let value: { relationTo: string; value: number | string } | number | string = docID\n\n    if (Array.isArray(field.targetField.relationTo)) {\n      value = {\n        relationTo: docConfig.slug,\n        value,\n      }\n    }\n\n    const where = Array.isArray(collection)\n      ? {}\n      : {\n          [on]: {\n            equals: value,\n          },\n        }\n\n    if (field.where) {\n      return {\n        and: [where, field.where],\n      }\n    }\n\n    return where\n  }, [docID, collection, field.targetField.relationTo, field.where, on, docConfig?.slug])\n\n  const initialDrawerData = useMemo(() => {\n    const relatedCollection = getEntityConfig({\n      collectionSlug: Array.isArray(field.collection) ? field.collection[0] : field.collection,\n    })\n\n    return getInitialDrawerData({\n      collectionSlug: docConfig?.slug,\n      config,\n      docID,\n      fields: relatedCollection?.fields,\n      segments: field.on.split('.'),\n    })\n  }, [getEntityConfig, field.collection, field.on, docConfig?.slug, docID, config])\n\n  if (!docConfig) {\n    return null\n  }\n\n  return (\n    <div\n      className={[fieldBaseClass, showError && 'error', 'join'].filter(Boolean).join(' ')}\n      id={`field-${path?.replace(/\\./g, '__')}`}\n    >\n      <RenderCustomComponent\n        CustomComponent={Error}\n        Fallback={<FieldError path={path} showError={showError} />}\n      />\n      <RelationshipTable\n        AfterInput={AfterInput}\n        allowCreate={typeof docID !== 'undefined' && allowCreate}\n        BeforeInput={BeforeInput}\n        disableTable={filterOptions === null}\n        field={field as JoinFieldClient}\n        fieldPath={path}\n        filterOptions={filterOptions}\n        initialData={docID && value ? value : ({ docs: [] } as PaginatedDocs)}\n        initialDrawerData={initialDrawerData}\n        Label={\n          <h4 style={{ margin: 0 }}>\n            {Label || (\n              <FieldLabel label={label} localized={localized} path={path} required={required} />\n            )}\n          </h4>\n        }\n        parent={\n          Array.isArray(collection)\n            ? {\n                id: docID,\n                collectionSlug: docConfig.slug,\n                joinPath: path,\n              }\n            : undefined\n        }\n        relationTo={collection}\n      />\n      <RenderCustomComponent\n        CustomComponent={Description}\n        Fallback={<FieldDescription description={description} path={path} />}\n      />\n    </div>\n  )\n}\n\nexport const JoinField = withCondition(JoinFieldComponent)\n"],"names":["ObjectIdImport","fieldAffectsData","flattenTopLevelFields","useMemo","RelationshipTable","RenderCustomComponent","useField","withCondition","useConfig","useDocumentInfo","FieldDescription","FieldError","FieldLabel","fieldBaseClass","ObjectId","default","getInitialDrawerData","collectionSlug","config","docID","fields","segments","flattenedFields","keepPresentationalFields","path","field","find","name","type","value","Array","isArray","relationTo","hasMany","nextSegments","slice","length","initialData","id","toHexString","_block","blockReferences","blocks","block","blocksMap","blockInitialData","blockType","slug","JoinFieldComponent","props","admin","allowCreate","description","collection","label","localized","on","required","pathFromProps","docConfig","getEntityConfig","customComponents","AfterInput","BeforeInput","Description","Error","Label","showError","potentiallyStalePath","filterOptions","targetField","where","equals","and","initialDrawerData","relatedCollection","split","div","className","filter","Boolean","join","replace","CustomComponent","Fallback","disableTable","fieldPath","docs","h4","style","margin","parent","joinPath","undefined","JoinField"],"mappings":"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"}
+{"version":3,"sources":["../../../src/fields/Join/index.tsx"],"sourcesContent":["'use client'\n\nimport type {\n  ClientConfig,\n  ClientField,\n  JoinFieldClient,\n  JoinFieldClientComponent,\n  PaginatedDocs,\n  Where,\n} from 'payload'\n\nimport ObjectIdImport from 'bson-objectid'\nimport { fieldAffectsData, flattenTopLevelFields } from 'payload/shared'\nimport React, { useMemo } from 'react'\n\nimport { RelationshipTable } from '../../elements/RelationshipTable/index.js'\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { FieldDescription } from '../FieldDescription/index.js'\nimport { FieldError } from '../FieldError/index.js'\nimport { FieldLabel } from '../FieldLabel/index.js'\nimport { fieldBaseClass } from '../index.js'\n\nconst ObjectId = 'default' in ObjectIdImport ? ObjectIdImport.default : ObjectIdImport\n\n/**\n * Recursively builds the default data for joined collection\n */\nconst getInitialDrawerData = ({\n  collectionSlug,\n  config,\n  docID,\n  fields,\n  segments,\n}: {\n  collectionSlug: string\n  config: ClientConfig\n  docID: number | string\n  fields: ClientField[]\n  segments: string[]\n}) => {\n  const flattenedFields = flattenTopLevelFields(fields, {\n    keepPresentationalFields: true,\n  })\n\n  const path = segments[0]\n\n  const field = flattenedFields.find((field) => field.name === path)\n\n  if (!field) {\n    return null\n  }\n\n  if (field.type === 'relationship' || field.type === 'upload') {\n    let value: { relationTo: string; value: number | string } | number | string = docID\n    if (Array.isArray(field.relationTo)) {\n      value = {\n        relationTo: collectionSlug,\n        value: docID,\n      }\n    }\n    return {\n      [field.name]: field.hasMany ? [value] : value,\n    }\n  }\n\n  const nextSegments = segments.slice(1, segments.length)\n\n  if (field.type === 'tab' || (field.type === 'group' && fieldAffectsData(field))) {\n    return {\n      [field.name]: getInitialDrawerData({\n        collectionSlug,\n        config,\n        docID,\n        fields: field.fields,\n        segments: nextSegments,\n      }),\n    }\n  }\n\n  if (field.type === 'array') {\n    const initialData = getInitialDrawerData({\n      collectionSlug,\n      config,\n      docID,\n      fields: field.fields,\n      segments: nextSegments,\n    })\n\n    initialData.id = ObjectId().toHexString()\n\n    return {\n      [field.name]: [initialData],\n    }\n  }\n\n  if (field.type === 'blocks') {\n    for (const _block of field.blockReferences ?? field.blocks) {\n      const block = typeof _block === 'string' ? config.blocksMap[_block] : _block\n\n      const blockInitialData = getInitialDrawerData({\n        collectionSlug,\n        config,\n        docID,\n        fields: block.fields,\n        segments: nextSegments,\n      })\n\n      if (blockInitialData) {\n        blockInitialData.id = ObjectId().toHexString()\n        blockInitialData.blockType = block.slug\n\n        return {\n          [field.name]: [blockInitialData],\n        }\n      }\n    }\n  }\n}\n\nconst JoinFieldComponent: JoinFieldClientComponent = (props) => {\n  const {\n    field,\n    field: {\n      admin: { allowCreate, description },\n      collection,\n      label,\n      localized,\n      on,\n      required,\n    },\n    path: pathFromProps,\n  } = props\n\n  const { id: docID, docConfig } = useDocumentInfo()\n\n  const { config, getEntityConfig } = useConfig()\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    path,\n    showError,\n    value,\n  } = useField<PaginatedDocs>({\n    potentiallyStalePath: pathFromProps,\n  })\n\n  const filterOptions: null | Where = useMemo(() => {\n    if (!docID) {\n      return null\n    }\n\n    let value: { relationTo: string; value: number | string } | number | string = docID\n\n    if (Array.isArray(field.targetField.relationTo)) {\n      value = {\n        relationTo: docConfig.slug,\n        value,\n      }\n    }\n\n    const where = Array.isArray(collection)\n      ? {}\n      : {\n          [on]: {\n            equals: value,\n          },\n        }\n\n    if (field.where) {\n      return {\n        and: [where, field.where],\n      }\n    }\n\n    return where\n  }, [docID, collection, field.targetField.relationTo, field.where, on, docConfig?.slug])\n\n  const initialDrawerData = useMemo(() => {\n    const relatedCollection = getEntityConfig({\n      collectionSlug: Array.isArray(field.collection) ? field.collection[0] : field.collection,\n    })\n\n    return getInitialDrawerData({\n      collectionSlug: docConfig?.slug,\n      config,\n      docID,\n      fields: relatedCollection?.fields,\n      segments: field.on.split('.'),\n    })\n  }, [getEntityConfig, field.collection, field.on, docConfig?.slug, docID, config])\n\n  if (!docConfig) {\n    return null\n  }\n\n  return (\n    <div\n      className={[fieldBaseClass, showError && 'error', 'join'].filter(Boolean).join(' ')}\n      id={`field-${path?.replace(/\\./g, '__')}`}\n    >\n      <RenderCustomComponent\n        CustomComponent={Error}\n        Fallback={<FieldError path={path} showError={showError} />}\n      />\n      <RelationshipTable\n        AfterInput={AfterInput}\n        allowCreate={typeof docID !== 'undefined' && allowCreate}\n        BeforeInput={BeforeInput}\n        disableTable={filterOptions === null}\n        field={field as JoinFieldClient}\n        fieldPath={path}\n        filterOptions={filterOptions}\n        initialData={docID && value ? value : ({ docs: [] } as PaginatedDocs)}\n        initialDrawerData={initialDrawerData}\n        Label={\n          <h4 style={{ margin: 0 }}>\n            {Label || (\n              <FieldLabel label={label} localized={localized} path={path} required={required} />\n            )}\n          </h4>\n        }\n        parent={\n          Array.isArray(collection)\n            ? {\n                id: docID,\n                collectionSlug: docConfig.slug,\n                joinPath: path,\n              }\n            : undefined\n        }\n        relationTo={collection}\n      />\n      <RenderCustomComponent\n        CustomComponent={Description}\n        Fallback={<FieldDescription description={description} path={path} />}\n      />\n    </div>\n  )\n}\n\nexport const JoinField = withCondition(JoinFieldComponent)\n"],"names":["ObjectIdImport","fieldAffectsData","flattenTopLevelFields","React","useMemo","RelationshipTable","RenderCustomComponent","useField","withCondition","useConfig","useDocumentInfo","FieldDescription","FieldError","FieldLabel","fieldBaseClass","ObjectId","default","getInitialDrawerData","collectionSlug","config","docID","fields","segments","flattenedFields","keepPresentationalFields","path","field","find","name","type","value","Array","isArray","relationTo","hasMany","nextSegments","slice","length","initialData","id","toHexString","_block","blockReferences","blocks","block","blocksMap","blockInitialData","blockType","slug","JoinFieldComponent","props","admin","allowCreate","description","collection","label","localized","on","required","pathFromProps","docConfig","getEntityConfig","customComponents","AfterInput","BeforeInput","Description","Error","Label","showError","potentiallyStalePath","filterOptions","targetField","where","equals","and","initialDrawerData","relatedCollection","split","div","className","filter","Boolean","join","replace","CustomComponent","Fallback","disableTable","fieldPath","docs","h4","style","margin","parent","joinPath","undefined","JoinField"],"mappings":"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"}

package/dist/fields/Number/index.js

@@ -1,7 +1,8 @@
 'use client';
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import { isNumber } from 'payload/shared';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { ReactSelect } from '../../elements/ReactSelect/index.js';
 import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
 import { useField } from '../../forms/useField/index.js';
@@ -94,41 +95,138 @@ const NumberFieldComponent = (props)=>{
         field
     ]);
     const placeholder = getTranslation(placeholderFromProps, i18n);
-    return <div className={[
-        fieldBaseClass,
-        'number',
-        className,
-        showError && 'error',
-        (readOnly || disabled) && 'read-only',
-        hasMany && 'has-many'
-    ].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}
-        {hasMany ? <ReactSelect className={`field-${path.replace(/\./g, '__')}`} disabled={readOnly || disabled} filterOption={(_, rawInput)=>{
-        const isOverHasMany = Array.isArray(value) && value.length >= maxRows;
-        return isNumber(rawInput) && !isOverHasMany;
-    }} isClearable isCreatable isMulti isSortable noOptionsMessage={()=>{
-        const isOverHasMany = Array.isArray(value) && value.length >= maxRows;
-        if (isOverHasMany) {
-            return t('validation:limitReached', {
-                max: maxRows,
-                value: value.length + 1
-            });
-        }
-        return null;
-    }} // numberOnly
-    onChange={handleHasManyChange} options={[]} placeholder={placeholder} showError={showError} value={valueToRender}/> : <div>
-            <input disabled={readOnly || disabled} id={`field-${path.replace(/\./g, '__')}`} max={max} min={min} name={path} onChange={handleChange} onWheel={(e)=>{
-        // @ts-expect-error
-        e.target.blur();
-    }} placeholder={placeholder} step={step} type="number" value={typeof value === 'number' ? value : ''}/>
-          </div>}
-        {AfterInput}
-        <RenderCustomComponent CustomComponent={Description} Fallback={<FieldDescription description={description} path={path}/>}/>
-      </div>
-    </div>;
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: [
+            fieldBaseClass,
+            'number',
+            className,
+            showError && 'error',
+            (readOnly || disabled) && 'read-only',
+            hasMany && 'has-many'
+        ].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/Number/index.tsx",
+                    lineNumber: 148,
+                    columnNumber: 11
+                }, void 0)
+            }, void 0, false, {
+                fileName: "src/fields/Number/index.tsx",
+                lineNumber: 145,
+                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/Number/index.tsx",
+                            lineNumber: 154,
+                            columnNumber: 21
+                        }, void 0)
+                    }, void 0, false, {
+                        fileName: "src/fields/Number/index.tsx",
+                        lineNumber: 152,
+                        columnNumber: 9
+                    }, this),
+                    BeforeInput,
+                    hasMany ? /*#__PURE__*/ _jsxDEV(ReactSelect, {
+                        className: `field-${path.replace(/\./g, '__')}`,
+                        disabled: readOnly || disabled,
+                        filterOption: (_, rawInput)=>{
+                            const isOverHasMany = Array.isArray(value) && value.length >= maxRows;
+                            return isNumber(rawInput) && !isOverHasMany;
+                        },
+                        isClearable: true,
+                        isCreatable: true,
+                        isMulti: true,
+                        isSortable: true,
+                        noOptionsMessage: ()=>{
+                            const isOverHasMany = Array.isArray(value) && value.length >= maxRows;
+                            if (isOverHasMany) {
+                                return t('validation:limitReached', {
+                                    max: maxRows,
+                                    value: value.length + 1
+                                });
+                            }
+                            return null;
+                        },
+                        // numberOnly
+                        onChange: handleHasManyChange,
+                        options: [],
+                        placeholder: placeholder,
+                        showError: showError,
+                        value: valueToRender
+                    }, void 0, false, {
+                        fileName: "src/fields/Number/index.tsx",
+                        lineNumber: 158,
+                        columnNumber: 11
+                    }, this) : /*#__PURE__*/ _jsxDEV("div", {
+                        children: /*#__PURE__*/ _jsxDEV("input", {
+                            disabled: readOnly || disabled,
+                            id: `field-${path.replace(/\./g, '__')}`,
+                            max: max,
+                            min: min,
+                            name: path,
+                            onChange: handleChange,
+                            onWheel: (e)=>{
+                                // @ts-expect-error
+                                e.target.blur();
+                            },
+                            placeholder: placeholder,
+                            step: step,
+                            type: "number",
+                            value: typeof value === 'number' ? value : ''
+                        }, void 0, false, {
+                            fileName: "src/fields/Number/index.tsx",
+                            lineNumber: 185,
+                            columnNumber: 13
+                        }, this)
+                    }, void 0, false, {
+                        fileName: "src/fields/Number/index.tsx",
+                        lineNumber: 184,
+                        columnNumber: 11
+                    }, this),
+                    AfterInput,
+                    /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
+                        CustomComponent: Description,
+                        Fallback: /*#__PURE__*/ _jsxDEV(FieldDescription, {
+                            description: description,
+                            path: path
+                        }, void 0, false, {
+                            fileName: "src/fields/Number/index.tsx",
+                            lineNumber: 206,
+                            columnNumber: 21
+                        }, void 0)
+                    }, void 0, false, {
+                        fileName: "src/fields/Number/index.tsx",
+                        lineNumber: 204,
+                        columnNumber: 9
+                    }, this)
+                ]
+            }, void 0, true, {
+                fileName: "src/fields/Number/index.tsx",
+                lineNumber: 151,
+                columnNumber: 7
+            }, this)
+        ]
+    }, void 0, true, {
+        fileName: "src/fields/Number/index.tsx",
+        lineNumber: 132,
+        columnNumber: 5
+    }, this);
 };
 export const NumberField = withCondition(NumberFieldComponent);
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/Number/index.tsx"],"sourcesContent":["'use client'\nimport type { NumberFieldClientComponent, NumberFieldClientProps } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { isNumber } from 'payload/shared'\nimport React, { useCallback, useEffect, useMemo, useState } from 'react'\n\nimport type { Option } from '../../elements/ReactSelect/types.js'\n\nimport { ReactSelect } from '../../elements/ReactSelect/index.js'\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { FieldDescription } from '../FieldDescription/index.js'\nimport { FieldError } from '../FieldError/index.js'\nimport { FieldLabel } from '../FieldLabel/index.js'\nimport { mergeFieldStyles } from '../mergeFieldStyles.js'\nimport './index.scss'\nimport { fieldBaseClass } from '../shared/index.js'\n\nconst NumberFieldComponent: NumberFieldClientComponent = (props) => {\n  const {\n    field,\n    field: {\n      admin: {\n        className,\n        description,\n        placeholder: placeholderFromProps,\n        step = 1,\n      } = {} as NumberFieldClientProps['field']['admin'],\n      hasMany = false,\n      label,\n      localized,\n      max = Infinity,\n      maxRows = Infinity,\n      min = -Infinity,\n      required,\n    },\n    onChange: onChangeFromProps,\n    path: pathFromProps,\n    readOnly,\n    validate,\n  } = props\n\n  const { i18n, t } = useTranslation()\n\n  const memoizedValidate = useCallback(\n    (value, options) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...options, max, min, required })\n      }\n    },\n    [validate, min, max, required],\n  )\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    disabled,\n    path,\n    setValue,\n    showError,\n    value,\n  } = useField<number | number[]>({\n    potentiallyStalePath: pathFromProps,\n    validate: memoizedValidate,\n  })\n\n  const handleChange = useCallback(\n    (e) => {\n      const val = parseFloat(e.target.value)\n      let newVal = val\n\n      if (Number.isNaN(val)) {\n        newVal = null\n      }\n\n      if (typeof onChangeFromProps === 'function') {\n        onChangeFromProps(newVal)\n      }\n\n      setValue(newVal)\n    },\n    [onChangeFromProps, setValue],\n  )\n\n  const [valueToRender, setValueToRender] = useState<\n    { id: string; label: string; value: { value: number } }[]\n  >([]) // Only for hasMany\n\n  const handleHasManyChange = useCallback(\n    (selectedOption) => {\n      if (!(readOnly || disabled)) {\n        let newValue\n        if (!selectedOption) {\n          newValue = []\n        } else if (Array.isArray(selectedOption)) {\n          newValue = selectedOption.map((option) => Number(option.value?.value || option.value))\n        } else {\n          newValue = [Number(selectedOption.value?.value || selectedOption.value)]\n        }\n\n        setValue(newValue)\n      }\n    },\n    [readOnly, disabled, setValue],\n  )\n\n  // useEffect update valueToRender:\n  useEffect(() => {\n    if (hasMany && Array.isArray(value)) {\n      setValueToRender(\n        value.map((val, index) => {\n          return {\n            id: `${val}${index}`, // append index to avoid duplicate keys but allow duplicate numbers\n            label: `${val}`,\n            value: {\n              toString: () => `${val}${index}`,\n              value: (val as unknown as Record<string, number>)?.value || val,\n            }, // You're probably wondering, why the hell is this done that way? Well, React-select automatically uses \"label-value\" as a key, so we will get that react duplicate key warning if we just pass in the value as multiple values can be the same. So we need to append the index to the toString() of the value to avoid that warning, as it uses that as the key.\n          }\n        }),\n      )\n    }\n  }, [value, hasMany])\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  const placeholder = getTranslation(placeholderFromProps, i18n)\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        'number',\n        className,\n        showError && 'error',\n        (readOnly || disabled) && 'read-only',\n        hasMany && 'has-many',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={styles}\n    >\n      <RenderCustomComponent\n        CustomComponent={Label}\n        Fallback={\n          <FieldLabel label={label} localized={localized} path={path} required={required} />\n        }\n      />\n      <div className={`${fieldBaseClass}__wrap`}>\n        <RenderCustomComponent\n          CustomComponent={Error}\n          Fallback={<FieldError path={path} showError={showError} />}\n        />\n        {BeforeInput}\n        {hasMany ? (\n          <ReactSelect\n            className={`field-${path.replace(/\\./g, '__')}`}\n            disabled={readOnly || disabled}\n            filterOption={(_, rawInput) => {\n              const isOverHasMany = Array.isArray(value) && value.length >= maxRows\n              return isNumber(rawInput) && !isOverHasMany\n            }}\n            isClearable\n            isCreatable\n            isMulti\n            isSortable\n            noOptionsMessage={() => {\n              const isOverHasMany = Array.isArray(value) && value.length >= maxRows\n              if (isOverHasMany) {\n                return t('validation:limitReached', { max: maxRows, value: value.length + 1 })\n              }\n              return null\n            }}\n            // numberOnly\n            onChange={handleHasManyChange}\n            options={[]}\n            placeholder={placeholder}\n            showError={showError}\n            value={valueToRender as Option[]}\n          />\n        ) : (\n          <div>\n            <input\n              disabled={readOnly || disabled}\n              id={`field-${path.replace(/\\./g, '__')}`}\n              max={max}\n              min={min}\n              name={path}\n              onChange={handleChange}\n              onWheel={(e) => {\n                // @ts-expect-error\n                e.target.blur()\n              }}\n              placeholder={placeholder}\n              step={step}\n              type=\"number\"\n              value={typeof value === 'number' ? value : ''}\n            />\n          </div>\n        )}\n        {AfterInput}\n        <RenderCustomComponent\n          CustomComponent={Description}\n          Fallback={<FieldDescription description={description} path={path} />}\n        />\n      </div>\n    </div>\n  )\n}\n\nexport const NumberField = withCondition(NumberFieldComponent)\n"],"names":["getTranslation","isNumber","useCallback","useEffect","useMemo","useState","ReactSelect","RenderCustomComponent","useField","withCondition","useTranslation","FieldDescription","FieldError","FieldLabel","mergeFieldStyles","fieldBaseClass","NumberFieldComponent","props","field","admin","className","description","placeholder","placeholderFromProps","step","hasMany","label","localized","max","Infinity","maxRows","min","required","onChange","onChangeFromProps","path","pathFromProps","readOnly","validate","i18n","t","memoizedValidate","value","options","customComponents","AfterInput","BeforeInput","Description","Error","Label","disabled","setValue","showError","potentiallyStalePath","handleChange","e","val","parseFloat","target","newVal","Number","isNaN","valueToRender","setValueToRender","handleHasManyChange","selectedOption","newValue","Array","isArray","map","option","index","id","toString","styles","div","filter","Boolean","join","style","CustomComponent","Fallback","replace","filterOption","_","rawInput","isOverHasMany","length","isClearable","isCreatable","isMulti","isSortable","noOptionsMessage","input","name","onWheel","blur","type","NumberField"],"mappings":"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"}
+{"version":3,"sources":["../../../src/fields/Number/index.tsx"],"sourcesContent":["'use client'\nimport type { NumberFieldClientComponent, NumberFieldClientProps } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { isNumber } from 'payload/shared'\nimport React, { useCallback, useEffect, useMemo, useState } from 'react'\n\nimport type { Option } from '../../elements/ReactSelect/types.js'\n\nimport { ReactSelect } from '../../elements/ReactSelect/index.js'\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { FieldDescription } from '../FieldDescription/index.js'\nimport { FieldError } from '../FieldError/index.js'\nimport { FieldLabel } from '../FieldLabel/index.js'\nimport { mergeFieldStyles } from '../mergeFieldStyles.js'\nimport './index.scss'\nimport { fieldBaseClass } from '../shared/index.js'\n\nconst NumberFieldComponent: NumberFieldClientComponent = (props) => {\n  const {\n    field,\n    field: {\n      admin: {\n        className,\n        description,\n        placeholder: placeholderFromProps,\n        step = 1,\n      } = {} as NumberFieldClientProps['field']['admin'],\n      hasMany = false,\n      label,\n      localized,\n      max = Infinity,\n      maxRows = Infinity,\n      min = -Infinity,\n      required,\n    },\n    onChange: onChangeFromProps,\n    path: pathFromProps,\n    readOnly,\n    validate,\n  } = props\n\n  const { i18n, t } = useTranslation()\n\n  const memoizedValidate = useCallback(\n    (value, options) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...options, max, min, required })\n      }\n    },\n    [validate, min, max, required],\n  )\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    disabled,\n    path,\n    setValue,\n    showError,\n    value,\n  } = useField<number | number[]>({\n    potentiallyStalePath: pathFromProps,\n    validate: memoizedValidate,\n  })\n\n  const handleChange = useCallback(\n    (e) => {\n      const val = parseFloat(e.target.value)\n      let newVal = val\n\n      if (Number.isNaN(val)) {\n        newVal = null\n      }\n\n      if (typeof onChangeFromProps === 'function') {\n        onChangeFromProps(newVal)\n      }\n\n      setValue(newVal)\n    },\n    [onChangeFromProps, setValue],\n  )\n\n  const [valueToRender, setValueToRender] = useState<\n    { id: string; label: string; value: { value: number } }[]\n  >([]) // Only for hasMany\n\n  const handleHasManyChange = useCallback(\n    (selectedOption) => {\n      if (!(readOnly || disabled)) {\n        let newValue\n        if (!selectedOption) {\n          newValue = []\n        } else if (Array.isArray(selectedOption)) {\n          newValue = selectedOption.map((option) => Number(option.value?.value || option.value))\n        } else {\n          newValue = [Number(selectedOption.value?.value || selectedOption.value)]\n        }\n\n        setValue(newValue)\n      }\n    },\n    [readOnly, disabled, setValue],\n  )\n\n  // useEffect update valueToRender:\n  useEffect(() => {\n    if (hasMany && Array.isArray(value)) {\n      setValueToRender(\n        value.map((val, index) => {\n          return {\n            id: `${val}${index}`, // append index to avoid duplicate keys but allow duplicate numbers\n            label: `${val}`,\n            value: {\n              toString: () => `${val}${index}`,\n              value: (val as unknown as Record<string, number>)?.value || val,\n            }, // You're probably wondering, why the hell is this done that way? Well, React-select automatically uses \"label-value\" as a key, so we will get that react duplicate key warning if we just pass in the value as multiple values can be the same. So we need to append the index to the toString() of the value to avoid that warning, as it uses that as the key.\n          }\n        }),\n      )\n    }\n  }, [value, hasMany])\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  const placeholder = getTranslation(placeholderFromProps, i18n)\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        'number',\n        className,\n        showError && 'error',\n        (readOnly || disabled) && 'read-only',\n        hasMany && 'has-many',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={styles}\n    >\n      <RenderCustomComponent\n        CustomComponent={Label}\n        Fallback={\n          <FieldLabel label={label} localized={localized} path={path} required={required} />\n        }\n      />\n      <div className={`${fieldBaseClass}__wrap`}>\n        <RenderCustomComponent\n          CustomComponent={Error}\n          Fallback={<FieldError path={path} showError={showError} />}\n        />\n        {BeforeInput}\n        {hasMany ? (\n          <ReactSelect\n            className={`field-${path.replace(/\\./g, '__')}`}\n            disabled={readOnly || disabled}\n            filterOption={(_, rawInput) => {\n              const isOverHasMany = Array.isArray(value) && value.length >= maxRows\n              return isNumber(rawInput) && !isOverHasMany\n            }}\n            isClearable\n            isCreatable\n            isMulti\n            isSortable\n            noOptionsMessage={() => {\n              const isOverHasMany = Array.isArray(value) && value.length >= maxRows\n              if (isOverHasMany) {\n                return t('validation:limitReached', { max: maxRows, value: value.length + 1 })\n              }\n              return null\n            }}\n            // numberOnly\n            onChange={handleHasManyChange}\n            options={[]}\n            placeholder={placeholder}\n            showError={showError}\n            value={valueToRender as Option[]}\n          />\n        ) : (\n          <div>\n            <input\n              disabled={readOnly || disabled}\n              id={`field-${path.replace(/\\./g, '__')}`}\n              max={max}\n              min={min}\n              name={path}\n              onChange={handleChange}\n              onWheel={(e) => {\n                // @ts-expect-error\n                e.target.blur()\n              }}\n              placeholder={placeholder}\n              step={step}\n              type=\"number\"\n              value={typeof value === 'number' ? value : ''}\n            />\n          </div>\n        )}\n        {AfterInput}\n        <RenderCustomComponent\n          CustomComponent={Description}\n          Fallback={<FieldDescription description={description} path={path} />}\n        />\n      </div>\n    </div>\n  )\n}\n\nexport const NumberField = withCondition(NumberFieldComponent)\n"],"names":["getTranslation","isNumber","React","useCallback","useEffect","useMemo","useState","ReactSelect","RenderCustomComponent","useField","withCondition","useTranslation","FieldDescription","FieldError","FieldLabel","mergeFieldStyles","fieldBaseClass","NumberFieldComponent","props","field","admin","className","description","placeholder","placeholderFromProps","step","hasMany","label","localized","max","Infinity","maxRows","min","required","onChange","onChangeFromProps","path","pathFromProps","readOnly","validate","i18n","t","memoizedValidate","value","options","customComponents","AfterInput","BeforeInput","Description","Error","Label","disabled","setValue","showError","potentiallyStalePath","handleChange","e","val","parseFloat","target","newVal","Number","isNaN","valueToRender","setValueToRender","handleHasManyChange","selectedOption","newValue","Array","isArray","map","option","index","id","toString","styles","div","filter","Boolean","join","style","CustomComponent","Fallback","replace","filterOption","_","rawInput","isOverHasMany","length","isClearable","isCreatable","isMulti","isSortable","noOptionsMessage","input","name","onWheel","blur","type","NumberField"],"mappings":"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"}