@payloadcms/ui 3.0.0-canary.291e44c → 3.0.0-canary.2d0dd26

package/dist/fields/Text/Input.js

@@ -5,30 +5,27 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import React from 'react';
 import { ReactSelect } from '../../elements/ReactSelect/index.js';
-import { RenderComponent } from '../../providers/Config/RenderComponent.js';
+import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
+import { FieldDescription } from '../../fields/FieldDescription/index.js';
+import { FieldError } from '../../fields/FieldError/index.js';
+import { FieldLabel } from '../../fields/FieldLabel/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
-import { FieldDescription } from '../FieldDescription/index.js';
-import { FieldError } from '../FieldError/index.js';
-import { FieldLabel } from '../FieldLabel/index.js';
 import { fieldBaseClass } from '../shared/index.js';
 import './index.scss';
 export const TextInput = props => {
-  const $ = _c(41);
+  const $ = _c(31);
   const {
-    afterInput,
-    beforeInput,
+    AfterInput,
+    BeforeInput,
     className,
     Description,
     description,
-    descriptionProps,
     Error,
-    errorProps,
-    field,
     hasMany,
     inputRef,
     Label,
     label,
-    labelProps,
+    localized,
     maxRows,
     onChange,
     onKeyDown,
@@ -40,8 +37,7 @@ export const TextInput = props => {
     showError,
     style,
     value,
-    valueToRender,
-    width
+    valueToRender
   } = props;
   const {
     i18n,
@@ -63,53 +59,27 @@ export const TextInput = props => {
   }
   const t4 = t3.join(" ");
   let t5;
-  if ($[5] !== style || $[6] !== width || $[7] !== labelProps || $[8] !== field || $[9] !== Label || $[10] !== label || $[11] !== required || $[12] !== errorProps || $[13] !== Error || $[14] !== path || $[15] !== beforeInput || $[16] !== hasMany || $[17] !== maxRows || $[18] !== value || $[19] !== t || $[20] !== readOnly || $[21] !== onChange || $[22] !== showError || $[23] !== valueToRender || $[24] !== placeholder || $[25] !== i18n || $[26] !== rtl || $[27] !== onKeyDown || $[28] !== inputRef || $[29] !== afterInput || $[30] !== descriptionProps || $[31] !== Description || $[32] !== description || $[33] !== t4) {
-    let t6;
-    if ($[35] !== labelProps) {
-      t6 = labelProps || {};
-      $[35] = labelProps;
-      $[36] = t6;
-    } else {
-      t6 = $[36];
-    }
-    let t7;
-    if ($[37] !== errorProps) {
-      t7 = errorProps || {};
-      $[37] = errorProps;
-      $[38] = t7;
-    } else {
-      t7 = $[38];
-    }
-    let t8;
-    if ($[39] !== descriptionProps) {
-      t8 = descriptionProps || {};
-      $[39] = descriptionProps;
-      $[40] = t8;
-    } else {
-      t8 = $[40];
-    }
+  if ($[5] !== label || $[6] !== localized || $[7] !== path || $[8] !== required || $[9] !== Label || $[10] !== showError || $[11] !== Error || $[12] !== hasMany || $[13] !== maxRows || $[14] !== value || $[15] !== t || $[16] !== readOnly || $[17] !== onChange || $[18] !== valueToRender || $[19] !== placeholder || $[20] !== i18n || $[21] !== rtl || $[22] !== onKeyDown || $[23] !== inputRef || $[24] !== description || $[25] !== Description || $[26] !== BeforeInput || $[27] !== AfterInput || $[28] !== t4 || $[29] !== style) {
     t5 = _jsxs("div", {
       className: t4,
-      style: {
-        ...style,
-        width
-      },
-      children: [_jsx(FieldLabel, {
-        field,
-        Label,
-        label,
-        required,
-        ...t6
+      style,
+      children: [_jsx(RenderCustomComponent, {
+        CustomComponent: Label,
+        Fallback: _jsx(FieldLabel, {
+          label,
+          localized,
+          path,
+          required
+        })
       }), _jsxs("div", {
         className: `${fieldBaseClass}__wrap`,
-        children: [_jsx(FieldError, {
-          CustomError: Error,
-          field,
-          path,
-          ...t7
-        }), _jsx(RenderComponent, {
-          mappedComponent: beforeInput
-        }), hasMany ? _jsx(ReactSelect, {
+        children: [_jsx(RenderCustomComponent, {
+          CustomComponent: Error,
+          Fallback: _jsx(FieldError, {
+            path,
+            showError
+          })
+        }), BeforeInput, hasMany ? _jsx(ReactSelect, {
           className: `field-${path.replace(/\./g, "__")}`,
           disabled: readOnly,
           filterOption: () => !maxRows ? true : !(Array.isArray(value) && maxRows && value.length >= maxRows),
@@ -143,48 +113,43 @@ export const TextInput = props => {
           ref: inputRef,
           type: "text",
           value: value || ""
-        }), _jsx(RenderComponent, {
-          mappedComponent: afterInput
-        }), _jsx(FieldDescription, {
-          Description,
-          description,
-          field,
-          ...t8
+        }), AfterInput, _jsx(RenderCustomComponent, {
+          CustomComponent: Description,
+          Fallback: _jsx(FieldDescription, {
+            description,
+            path
+          })
         })]
       })]
     });
-    $[5] = style;
-    $[6] = width;
-    $[7] = labelProps;
-    $[8] = field;
+    $[5] = label;
+    $[6] = localized;
+    $[7] = path;
+    $[8] = required;
     $[9] = Label;
-    $[10] = label;
-    $[11] = required;
-    $[12] = errorProps;
-    $[13] = Error;
-    $[14] = path;
-    $[15] = beforeInput;
-    $[16] = hasMany;
-    $[17] = maxRows;
-    $[18] = value;
-    $[19] = t;
-    $[20] = readOnly;
-    $[21] = onChange;
-    $[22] = showError;
-    $[23] = valueToRender;
-    $[24] = placeholder;
-    $[25] = i18n;
-    $[26] = rtl;
-    $[27] = onKeyDown;
-    $[28] = inputRef;
-    $[29] = afterInput;
-    $[30] = descriptionProps;
-    $[31] = Description;
-    $[32] = description;
-    $[33] = t4;
-    $[34] = t5;
+    $[10] = showError;
+    $[11] = Error;
+    $[12] = hasMany;
+    $[13] = maxRows;
+    $[14] = value;
+    $[15] = t;
+    $[16] = readOnly;
+    $[17] = onChange;
+    $[18] = valueToRender;
+    $[19] = placeholder;
+    $[20] = i18n;
+    $[21] = rtl;
+    $[22] = onKeyDown;
+    $[23] = inputRef;
+    $[24] = description;
+    $[25] = Description;
+    $[26] = BeforeInput;
+    $[27] = AfterInput;
+    $[28] = t4;
+    $[29] = style;
+    $[30] = t5;
   } else {
-    t5 = $[34];
+    t5 = $[30];
   }
   return t5;
 };

package/dist/fields/Text/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["c","_c","getTranslation","React","ReactSelect","RenderComponent","useTranslation","FieldDescription","FieldError","FieldLabel","fieldBaseClass","TextInput","props","$","afterInput","beforeInput","className","Description","description","descriptionProps","Error","errorProps","field","hasMany","inputRef","Label","label","labelProps","maxRows","onChange","onKeyDown","path","placeholder","readOnly","required","rtl","showError","style","value","valueToRender","width","i18n","t","t0","t1","t2","t3","filter","Boolean","t4","join","t5","t6","t7","t8","_jsxs","children","_jsx","CustomError","mappedComponent","replace","disabled","filterOption","Array","isArray","length","isClearable","isCreatable","isMulti","isSortable","noOptionsMessage","isOverHasMany","max","options","id","name","ref","type"],"sources":["../../../src/fields/Text/Input.tsx"],"sourcesContent":["'use client'\nimport type { ChangeEvent } from 'react'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { TextInputProps } from './types.js'\n\nimport { ReactSelect } from '../../elements/ReactSelect/index.js'\nimport { RenderComponent } from '../../providers/Config/RenderComponent.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 { fieldBaseClass } from '../shared/index.js'\nimport './index.scss'\n\nexport const TextInput: React.FC<TextInputProps> = (props) => {\n  const {\n    afterInput,\n    beforeInput,\n    className,\n    Description,\n    description,\n    descriptionProps,\n    Error,\n    errorProps,\n    field,\n    hasMany,\n    inputRef,\n    Label,\n    label,\n    labelProps,\n    maxRows,\n    onChange,\n    onKeyDown,\n    path,\n    placeholder,\n    readOnly,\n    required,\n    rtl,\n    showError,\n    style,\n    value,\n    valueToRender,\n    width,\n  } = props\n\n  const { i18n, t } = useTranslation()\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        'text',\n        className,\n        showError && 'error',\n        readOnly && 'read-only',\n        hasMany && 'has-many',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={{\n        ...style,\n        width,\n      }}\n    >\n      <FieldLabel\n        field={field}\n        Label={Label}\n        label={label}\n        required={required}\n        {...(labelProps || {})}\n      />\n      <div className={`${fieldBaseClass}__wrap`}>\n        <FieldError CustomError={Error} field={field} path={path} {...(errorProps || {})} />\n        <RenderComponent mappedComponent={beforeInput} />\n        {hasMany ? (\n          <ReactSelect\n            className={`field-${path.replace(/\\./g, '__')}`}\n            disabled={readOnly}\n            // prevent adding additional options if maxRows is reached\n            filterOption={() =>\n              !maxRows ? true : !(Array.isArray(value) && maxRows && value.length >= maxRows)\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            onChange={onChange}\n            options={[]}\n            placeholder={t('general:enterAValue')}\n            showError={showError}\n            value={valueToRender}\n          />\n        ) : (\n          <input\n            data-rtl={rtl}\n            disabled={readOnly}\n            id={`field-${path?.replace(/\\./g, '__')}`}\n            name={path}\n            onChange={onChange as (e: ChangeEvent<HTMLInputElement>) => void}\n            onKeyDown={onKeyDown}\n            placeholder={getTranslation(placeholder, i18n)}\n            ref={inputRef}\n            type=\"text\"\n            value={value || ''}\n          />\n        )}\n        <RenderComponent mappedComponent={afterInput} />\n        <FieldDescription\n          Description={Description}\n          description={description}\n          field={field}\n          {...(descriptionProps || {})}\n        />\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Input.js","names":["c","_c","getTranslation","React","ReactSelect","RenderCustomComponent","FieldDescription","FieldError","FieldLabel","useTranslation","fieldBaseClass","TextInput","props","$","AfterInput","BeforeInput","className","Description","description","Error","hasMany","inputRef","Label","label","localized","maxRows","onChange","onKeyDown","path","placeholder","readOnly","required","rtl","showError","style","value","valueToRender","i18n","t","t0","t1","t2","t3","filter","Boolean","t4","join","t5","_jsxs","children","_jsx","CustomComponent","Fallback","replace","disabled","filterOption","Array","isArray","length","isClearable","isCreatable","isMulti","isSortable","noOptionsMessage","isOverHasMany","max","options","id","name","ref","type"],"sources":["../../../src/fields/Text/Input.tsx"],"sourcesContent":["'use client'\nimport type { ChangeEvent } from 'react'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { TextInputProps } from './types.js'\n\nimport { ReactSelect } from '../../elements/ReactSelect/index.js'\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { FieldDescription } from '../../fields/FieldDescription/index.js'\nimport { FieldError } from '../../fields/FieldError/index.js'\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.scss'\n\nexport const TextInput: React.FC<TextInputProps> = (props) => {\n  const {\n    AfterInput,\n    BeforeInput,\n    className,\n    Description,\n    description,\n    Error,\n    hasMany,\n    inputRef,\n    Label,\n    label,\n    localized,\n    maxRows,\n    onChange,\n    onKeyDown,\n    path,\n    placeholder,\n    readOnly,\n    required,\n    rtl,\n    showError,\n    style,\n    value,\n    valueToRender,\n  } = props\n\n  const { i18n, t } = useTranslation()\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        'text',\n        className,\n        showError && 'error',\n        readOnly && 'read-only',\n        hasMany && 'has-many',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={style}\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}\n            // prevent adding additional options if maxRows is reached\n            filterOption={() =>\n              !maxRows ? true : !(Array.isArray(value) && maxRows && value.length >= maxRows)\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            onChange={onChange}\n            options={[]}\n            placeholder={t('general:enterAValue')}\n            showError={showError}\n            value={valueToRender}\n          />\n        ) : (\n          <input\n            data-rtl={rtl}\n            disabled={readOnly}\n            id={`field-${path?.replace(/\\./g, '__')}`}\n            name={path}\n            onChange={onChange as (e: ChangeEvent<HTMLInputElement>) => void}\n            onKeyDown={onKeyDown}\n            placeholder={getTranslation(placeholder, i18n)}\n            ref={inputRef}\n            type=\"text\"\n            value={value || ''}\n          />\n        )}\n        {AfterInput}\n        <RenderCustomComponent\n          CustomComponent={Description}\n          Fallback={<FieldDescription description={description} path={path} />}\n        />\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -6,11 +6,9 @@ export { TextInput, TextInputProps };
 export declare const TextField: React.FC<{
     readonly inputRef?: React.RefObject<HTMLInputElement>;
     readonly onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+    readonly path: string;
     readonly validate?: import("payload").TextFieldValidation;
 } & {
-    readonly descriptionProps?: import("payload").FieldDescriptionClientProps<Omit<import("payload").TextFieldClient, "type"> & Partial<Pick<import("payload").TextFieldClient, "type">>>;
-    readonly errorProps?: import("payload").FieldErrorClientProps<Omit<import("payload").TextFieldClient, "type"> & Partial<Pick<import("payload").TextFieldClient, "type">>>;
     readonly field: Omit<import("payload").TextFieldClient, "type"> & Partial<Pick<import("payload").TextFieldClient, "type">>;
-    readonly labelProps?: import("payload").FieldLabelClientProps<Omit<import("payload").TextFieldClient, "type"> & Partial<Pick<import("payload").TextFieldClient, "type">>>;
-} & import("payload").FormFieldBase>;
+} & Omit<import("payload").ClientComponentProps, "field" | "customComponents">>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Text/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAG/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAQhD,OAAO,cAAc,CAAA;AACrB,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAEtC,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,CAAA;AA0IpC,eAAO,MAAM,SAAS;wBAxIH,MAAO,SAAS;yBAE/B,MACA,oBACE;;;;;;;oCAoIoD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Text/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAoD,MAAM,OAAO,CAAA;AAGxE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAQhD,OAAO,cAAc,CAAA;AACrB,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAEtC,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,CAAA;AAoIpC,eAAO,MAAM,SAAS;wBAlIE,MAAO,SAAS;yBAEhC,MACJ,oBACO;;;;;+EA8H+C,CAAA"}

package/dist/fields/Text/index.js

@@ -1,209 +1,135 @@
 'use client';
 
-import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useState } from 'react';
-import { useFieldProps } from '../../forms/FieldPropsProvider/index.js';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useField } from '../../forms/useField/index.js';
 import { withCondition } from '../../forms/withCondition/index.js';
 import { useConfig } from '../../providers/Config/index.js';
 import { useLocale } from '../../providers/Locale/index.js';
+import { mergeFieldStyles } from '../mergeFieldStyles.js';
 import { isFieldRTL } from '../shared/index.js';
 import './index.scss';
 import { TextInput } from './Input.js';
 export { TextInput };
 const TextFieldComponent = props => {
-  const $ = _c(22);
   const {
     field,
-    field: t0,
+    field: {
+      admin: {
+        className,
+        description,
+        placeholder,
+        rtl
+      } = {},
+      hasMany,
+      label,
+      localized,
+      maxLength,
+      maxRows,
+      minLength,
+      minRows,
+      required
+    },
     inputRef,
-    readOnly: readOnlyFromTopLevelProps,
+    path,
+    readOnly,
     validate
   } = props;
-  const {
-    name,
-    _path: pathFromProps,
-    admin: t1,
-    hasMany,
-    localized,
-    maxLength,
-    maxRows,
-    minLength,
-    minRows,
-    required
-  } = t0;
-  let t2;
-  if ($[0] !== t1) {
-    t2 = t1 === undefined ? {} : t1;
-    $[0] = t1;
-    $[1] = t2;
-  } else {
-    t2 = $[1];
-  }
-  const {
-    className,
-    description,
-    placeholder,
-    readOnly: readOnlyFromAdmin,
-    rtl,
-    style,
-    width
-  } = t2;
-  const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin;
   const locale = useLocale();
   const {
-    config: t3
+    config: {
+      localization: localizationConfig
+    }
   } = useConfig();
+  const memoizedValidate = useCallback((value, options) => {
+    if (typeof validate === 'function') {
+      return validate(value, {
+        ...options,
+        maxLength,
+        minLength,
+        required
+      });
+    }
+  }, [validate, minLength, maxLength, required]);
   const {
-    localization: localizationConfig
-  } = t3;
-  let t4;
-  if ($[2] !== validate || $[3] !== maxLength || $[4] !== minLength || $[5] !== required) {
-    t4 = (value, options) => {
-      if (typeof validate === "function") {
-        return validate(value, {
-          ...options,
-          maxLength,
-          minLength,
-          required
-        });
-      }
-    };
-    $[2] = validate;
-    $[3] = maxLength;
-    $[4] = minLength;
-    $[5] = required;
-    $[6] = t4;
-  } else {
-    t4 = $[6];
-  }
-  const memoizedValidate = t4;
-  const {
-    path: pathFromContext,
-    readOnly: readOnlyFromContext
-  } = useFieldProps();
-  const t5 = pathFromContext ?? pathFromProps ?? name;
-  let t6;
-  if ($[7] !== t5 || $[8] !== memoizedValidate) {
-    t6 = {
-      path: t5,
-      validate: memoizedValidate
-    };
-    $[7] = t5;
-    $[8] = memoizedValidate;
-    $[9] = t6;
-  } else {
-    t6 = $[9];
-  }
-  const {
-    formInitializing,
-    formProcessing,
-    path,
+    customComponents: {
+      AfterInput,
+      BeforeInput,
+      Description,
+      Error,
+      Label
+    } = {},
     setValue,
     showError,
     value: value_0
-  } = useField(t6);
-  const disabled = readOnlyFromProps || readOnlyFromContext || formProcessing || formInitializing;
+  } = useField({
+    path,
+    validate: memoizedValidate
+  });
   const renderRTL = isFieldRTL({
     fieldLocalized: localized,
     fieldRTL: rtl,
     locale,
     localizationConfig: localizationConfig || undefined
   });
-  let t7;
-  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-    t7 = [];
-    $[10] = t7;
-  } else {
-    t7 = $[10];
-  }
-  const [valueToRender, setValueToRender] = useState(t7);
-  let t8;
-  if ($[11] !== disabled || $[12] !== setValue) {
-    t8 = selectedOption => {
-      if (!disabled) {
-        let newValue;
-        if (!selectedOption) {
-          newValue = [];
-        } else {
-          if (Array.isArray(selectedOption)) {
-            newValue = selectedOption.map(option => option.value?.value || option.value);
-          } else {
-            newValue = [selectedOption.value?.value || selectedOption.value];
-          }
-        }
-        setValue(newValue);
+  const [valueToRender, setValueToRender] = useState([]) // Only for hasMany
+  ;
+  const handleHasManyChange = useCallback(selectedOption => {
+    if (!readOnly) {
+      let newValue;
+      if (!selectedOption) {
+        newValue = [];
+      } else if (Array.isArray(selectedOption)) {
+        newValue = selectedOption.map(option => option.value?.value || option.value);
+      } else {
+        newValue = [selectedOption.value?.value || selectedOption.value];
       }
-    };
-    $[11] = disabled;
-    $[12] = setValue;
-    $[13] = t8;
-  } else {
-    t8 = $[13];
-  }
-  const handleHasManyChange = t8;
-  let t9;
-  let t10;
-  if ($[14] !== hasMany || $[15] !== value_0) {
-    t9 = () => {
-      if (hasMany && Array.isArray(value_0)) {
-        setValueToRender(value_0.map((val, index) => ({
+      setValue(newValue);
+    }
+  }, [readOnly, setValue]);
+  // useEffect update valueToRender:
+  useEffect(() => {
+    if (hasMany && Array.isArray(value_0)) {
+      setValueToRender(value_0.map((val, index) => {
+        return {
           id: `${val}${index}`,
           label: `${val}`,
           value: {
+            // 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.
             toString: () => `${val}${index}`,
             value: val?.value || val
           }
-        })));
-      }
-    };
-    t10 = [value_0, hasMany];
-    $[14] = hasMany;
-    $[15] = value_0;
-    $[16] = t9;
-    $[17] = t10;
-  } else {
-    t9 = $[16];
-    t10 = $[17];
-  }
-  useEffect(t9, t10);
-  let t11;
-  if ($[18] !== hasMany || $[19] !== handleHasManyChange || $[20] !== setValue) {
-    t11 = hasMany ? handleHasManyChange : e => {
+        };
+      }));
+    }
+  }, [value_0, hasMany]);
+  const styles = useMemo(() => mergeFieldStyles(field), [field]);
+  return /*#__PURE__*/_jsx(TextInput, {
+    AfterInput: AfterInput,
+    BeforeInput: BeforeInput,
+    className: className,
+    Description: Description,
+    description: description,
+    Error: Error,
+    hasMany: hasMany,
+    inputRef: inputRef,
+    Label: Label,
+    label: label,
+    localized: localized,
+    maxRows: maxRows,
+    minRows: minRows,
+    onChange: hasMany ? handleHasManyChange : e => {
       setValue(e.target.value);
-    };
-    $[18] = hasMany;
-    $[19] = handleHasManyChange;
-    $[20] = setValue;
-    $[21] = t11;
-  } else {
-    t11 = $[21];
-  }
-  return _jsx(TextInput, {
-    afterInput: field?.admin?.components?.afterInput,
-    beforeInput: field?.admin?.components?.beforeInput,
-    className,
-    Description: field?.admin?.components?.Description,
-    description,
-    Error: field?.admin?.components?.Error,
-    field,
-    hasMany,
-    inputRef,
-    Label: field?.admin?.components?.Label,
-    maxRows,
-    minRows,
-    onChange: t11,
-    path,
-    placeholder,
-    readOnly: disabled,
-    required,
+    },
+    path: path,
+    placeholder: placeholder,
+    readOnly: readOnly,
+    required: required,
     rtl: renderRTL,
-    showError,
-    style,
-    value: value_0 || "",
-    valueToRender,
-    width
+    showError: showError,
+    style: styles,
+    value: value_0 || '',
+    valueToRender: valueToRender
   });
 };
 export const TextField = withCondition(TextFieldComponent);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useCallback","useEffect","useState","useFieldProps","useField","withCondition","useConfig","useLocale","isFieldRTL","TextInput","TextFieldComponent","props","$","field","t0","inputRef","readOnly","readOnlyFromTopLevelProps","validate","name","_path","pathFromProps","admin","t1","hasMany","localized","maxLength","maxRows","minLength","minRows","required","t2","undefined","className","description","placeholder","readOnlyFromAdmin","rtl","style","width","readOnlyFromProps","locale","config","t3","localization","localizationConfig","t4","value","options","memoizedValidate","path","pathFromContext","readOnlyFromContext","t5","t6","formInitializing","formProcessing","setValue","showError","value_0","disabled","renderRTL","fieldLocalized","fieldRTL","t7","Symbol","for","valueToRender","setValueToRender","t8","selectedOption","newValue","Array","isArray","map","option","handleHasManyChange","t9","t10","val","index","id","label","toString","t11","e","target","_jsx","afterInput","components","beforeInput","Description","Error","Label","onChange","TextField"],"sources":["../../../src/fields/Text/index.tsx"],"sourcesContent":["'use client'\nimport type { TextFieldClientComponent } from 'payload'\n\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { Option } from '../../elements/ReactSelect/types.js'\nimport type { TextInputProps } from './types.js'\n\nimport { useFieldProps } from '../../forms/FieldPropsProvider/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { isFieldRTL } from '../shared/index.js'\nimport './index.scss'\nimport { TextInput } from './Input.js'\n\nexport { TextInput, TextInputProps }\n\nconst TextFieldComponent: TextFieldClientComponent = (props) => {\n  const {\n    field,\n    field: {\n      name,\n      _path: pathFromProps,\n      admin: {\n        className,\n        description,\n        placeholder,\n        readOnly: readOnlyFromAdmin,\n        rtl,\n        style,\n        width,\n      } = {},\n      hasMany,\n      localized,\n      maxLength,\n      maxRows,\n      minLength,\n      minRows,\n      required,\n    },\n    inputRef,\n    readOnly: readOnlyFromTopLevelProps,\n    validate,\n  } = props\n  const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin\n\n  const locale = useLocale()\n\n  const {\n    config: { localization: localizationConfig },\n  } = useConfig()\n\n  const memoizedValidate = useCallback(\n    (value, options) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...options, maxLength, minLength, required })\n      }\n    },\n    [validate, minLength, maxLength, required],\n  )\n\n  const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps()\n\n  const { formInitializing, formProcessing, path, setValue, showError, value } = useField({\n    path: pathFromContext ?? pathFromProps ?? name,\n    validate: memoizedValidate,\n  })\n\n  const disabled = readOnlyFromProps || readOnlyFromContext || formProcessing || formInitializing\n\n  const renderRTL = isFieldRTL({\n    fieldLocalized: localized,\n    fieldRTL: rtl,\n    locale,\n    localizationConfig: localizationConfig || undefined,\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 (!disabled) {\n        let newValue\n        if (!selectedOption) {\n          newValue = []\n        } else if (Array.isArray(selectedOption)) {\n          newValue = selectedOption.map((option) => option.value?.value || option.value)\n        } else {\n          newValue = [selectedOption.value?.value || selectedOption.value]\n        }\n\n        setValue(newValue)\n      }\n    },\n    [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              // 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              toString: () => `${val}${index}`,\n              value: val?.value || val,\n            },\n          }\n        }),\n      )\n    }\n  }, [value, hasMany])\n\n  return (\n    <TextInput\n      afterInput={field?.admin?.components?.afterInput}\n      beforeInput={field?.admin?.components?.beforeInput}\n      className={className}\n      Description={field?.admin?.components?.Description}\n      description={description}\n      Error={field?.admin?.components?.Error}\n      field={field}\n      hasMany={hasMany}\n      inputRef={inputRef}\n      Label={field?.admin?.components?.Label}\n      maxRows={maxRows}\n      minRows={minRows}\n      onChange={\n        hasMany\n          ? handleHasManyChange\n          : (e) => {\n              setValue(e.target.value)\n            }\n      }\n      path={path}\n      placeholder={placeholder}\n      readOnly={disabled}\n      required={required}\n      rtl={renderRTL}\n      showError={showError}\n      style={style}\n      value={(value as string) || ''}\n      valueToRender={valueToRender as Option[]}\n      width={width}\n    />\n  )\n}\n\nexport const TextField = withCondition(TextFieldComponent)\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useMemo","useState","useField","withCondition","useConfig","useLocale","mergeFieldStyles","isFieldRTL","TextInput","TextFieldComponent","props","field","admin","className","description","placeholder","rtl","hasMany","label","localized","maxLength","maxRows","minLength","minRows","required","inputRef","path","readOnly","validate","locale","config","localization","localizationConfig","memoizedValidate","value","options","customComponents","AfterInput","BeforeInput","Description","Error","Label","setValue","showError","renderRTL","fieldLocalized","fieldRTL","undefined","valueToRender","setValueToRender","handleHasManyChange","selectedOption","newValue","Array","isArray","map","option","val","index","id","toString","styles","_jsx","onChange","e","target","style","TextField"],"sources":["../../../src/fields/Text/index.tsx"],"sourcesContent":["'use client'\nimport type { TextFieldClientComponent } from 'payload'\n\nimport React, { useCallback, useEffect, useMemo, useState } from 'react'\n\nimport type { Option } from '../../elements/ReactSelect/types.js'\nimport type { TextInputProps } from './types.js'\n\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { mergeFieldStyles } from '../mergeFieldStyles.js'\nimport { isFieldRTL } from '../shared/index.js'\nimport './index.scss'\nimport { TextInput } from './Input.js'\n\nexport { TextInput, TextInputProps }\n\nconst TextFieldComponent: TextFieldClientComponent = (props) => {\n  const {\n    field,\n    field: {\n      admin: { className, description, placeholder, rtl } = {},\n      hasMany,\n      label,\n      localized,\n      maxLength,\n      maxRows,\n      minLength,\n      minRows,\n      required,\n    },\n    inputRef,\n    path,\n    readOnly,\n    validate,\n  } = props\n\n  const locale = useLocale()\n\n  const {\n    config: { localization: localizationConfig },\n  } = useConfig()\n\n  const memoizedValidate = useCallback(\n    (value, options) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...options, maxLength, minLength, required })\n      }\n    },\n    [validate, minLength, maxLength, required],\n  )\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    setValue,\n    showError,\n    value,\n  } = useField({\n    path,\n    validate: memoizedValidate,\n  })\n\n  const renderRTL = isFieldRTL({\n    fieldLocalized: localized,\n    fieldRTL: rtl,\n    locale,\n    localizationConfig: localizationConfig || undefined,\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) {\n        let newValue\n        if (!selectedOption) {\n          newValue = []\n        } else if (Array.isArray(selectedOption)) {\n          newValue = selectedOption.map((option) => option.value?.value || option.value)\n        } else {\n          newValue = [selectedOption.value?.value || selectedOption.value]\n        }\n\n        setValue(newValue)\n      }\n    },\n    [readOnly, 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              // 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              toString: () => `${val}${index}`,\n              value: val?.value || val,\n            },\n          }\n        }),\n      )\n    }\n  }, [value, hasMany])\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  return (\n    <TextInput\n      AfterInput={AfterInput}\n      BeforeInput={BeforeInput}\n      className={className}\n      Description={Description}\n      description={description}\n      Error={Error}\n      hasMany={hasMany}\n      inputRef={inputRef}\n      Label={Label}\n      label={label}\n      localized={localized}\n      maxRows={maxRows}\n      minRows={minRows}\n      onChange={\n        hasMany\n          ? handleHasManyChange\n          : (e) => {\n              setValue(e.target.value)\n            }\n      }\n      path={path}\n      placeholder={placeholder}\n      readOnly={readOnly}\n      required={required}\n      rtl={renderRTL}\n      showError={showError}\n      style={styles}\n      value={(value as string) || ''}\n      valueToRender={valueToRender as Option[]}\n    />\n  )\n}\n\nexport const TextField = withCondition(TextFieldComponent)\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,IAASC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ;AAKjE,SAASC,QAAQ,QAAQ;AACzB,SAASC,aAAa,QAAQ;AAC9B,SAASC,SAAS,QAAQ;AAC1B,SAASC,SAAS,QAAQ;AAC1B,SAASC,gBAAgB,QAAQ;AACjC,SAASC,UAAU,QAAQ;AAC3B,OAAO;AACP,SAASC,SAAS,QAAQ;AAE1B,SAASA,SAAS;AAElB,MAAMC,kBAAA,GAAgDC,KAAA;EACpD,MAAM;IACJC,KAAK;IACLA,KAAA,EAAO;MACLC,KAAA,EAAO;QAAEC,SAAS;QAAEC,WAAW;QAAEC,WAAW;QAAEC;MAAG,CAAE,GAAG,CAAC,CAAC;MACxDC,OAAO;MACPC,KAAK;MACLC,SAAS;MACTC,SAAS;MACTC,OAAO;MACPC,SAAS;MACTC,OAAO;MACPC;IAAQ,CACT;IACDC,QAAQ;IACRC,IAAI;IACJC,QAAQ;IACRC;EAAQ,CACT,GAAGlB,KAAA;EAEJ,MAAMmB,MAAA,GAASxB,SAAA;EAEf,MAAM;IACJyB,MAAA,EAAQ;MAAEC,YAAA,EAAcC;IAAkB;EAAE,CAC7C,GAAG5B,SAAA;EAEJ,MAAM6B,gBAAA,GAAmBnC,WAAA,CACvB,CAACoC,KAAA,EAAOC,OAAA;IACN,IAAI,OAAOP,QAAA,KAAa,YAAY;MAClC,OAAOA,QAAA,CAASM,KAAA,EAAO;QAAE,GAAGC,OAAO;QAAEf,SAAA;QAAWE,SAAA;QAAWE;MAAS;IACtE;EACF,GACA,CAACI,QAAA,EAAUN,SAAA,EAAWF,SAAA,EAAWI,QAAA,CAAS;EAG5C,MAAM;IACJY,gBAAA,EAAkB;MAAEC,UAAU;MAAEC,WAAW;MAAEC,WAAW;MAAEC,KAAK;MAAEC;IAAK,CAAE,GAAG,CAAC,CAAC;IAC7EC,QAAQ;IACRC,SAAS;IACTT,KAAK,EAALA;EAAK,CACN,GAAGhC,QAAA,CAAS;IACXwB,IAAA;IACAE,QAAA,EAAUK;EACZ;EAEA,MAAMW,SAAA,GAAYrC,UAAA,CAAW;IAC3BsC,cAAA,EAAgB1B,SAAA;IAChB2B,QAAA,EAAU9B,GAAA;IACVa,MAAA;IACAG,kBAAA,EAAoBA,kBAAA,IAAsBe;EAC5C;EAEA,MAAM,CAACC,aAAA,EAAeC,gBAAA,CAAiB,GAAGhD,QAAA,CAExC,EAAE,EAAE;EAAA;EAEN,MAAMiD,mBAAA,GAAsBpD,WAAA,CACzBqD,cAAA;IACC,IAAI,CAACxB,QAAA,EAAU;MACb,IAAIyB,QAAA;MACJ,IAAI,CAACD,cAAA,EAAgB;QACnBC,QAAA,GAAW,EAAE;MACf,OAAO,IAAIC,KAAA,CAAMC,OAAO,CAACH,cAAA,GAAiB;QACxCC,QAAA,GAAWD,cAAA,CAAeI,GAAG,CAAEC,MAAA,IAAWA,MAAA,CAAOtB,KAAK,EAAEA,KAAA,IAASsB,MAAA,CAAOtB,KAAK;MAC/E,OAAO;QACLkB,QAAA,GAAW,CAACD,cAAA,CAAejB,KAAK,EAAEA,KAAA,IAASiB,cAAA,CAAejB,KAAK,CAAC;MAClE;MAEAQ,QAAA,CAASU,QAAA;IACX;EACF,GACA,CAACzB,QAAA,EAAUe,QAAA,CAAS;EAGtB;EACA3C,SAAA,CAAU;IACR,IAAIkB,OAAA,IAAWoC,KAAA,CAAMC,OAAO,CAACpB,OAAA,GAAQ;MACnCe,gBAAA,CACEf,OAAA,CAAMqB,GAAG,CAAC,CAACE,GAAA,EAAKC,KAAA;QACd,OAAO;UACLC,EAAA,EAAI,GAAGF,GAAA,GAAMC,KAAA,EAAO;UACpBxC,KAAA,EAAO,GAAGuC,GAAA,EAAK;UACfvB,KAAA,EAAO;YACL;YACA0B,QAAA,EAAUA,CAAA,KAAM,GAAGH,GAAA,GAAMC,KAAA,EAAO;YAChCxB,KAAA,EAAOuB,GAAA,EAAKvB,KAAA,IAASuB;UACvB;QACF;MACF;IAEJ;EACF,GAAG,CAACvB,OAAA,EAAOjB,OAAA,CAAQ;EAEnB,MAAM4C,MAAA,GAAS7D,OAAA,CAAQ,MAAMM,gBAAA,CAAiBK,KAAA,GAAQ,CAACA,KAAA,CAAM;EAE7D,oBACEmD,IAAA,CAACtD,SAAA;IACC6B,UAAA,EAAYA,UAAA;IACZC,WAAA,EAAaA,WAAA;IACbzB,SAAA,EAAWA,SAAA;IACX0B,WAAA,EAAaA,WAAA;IACbzB,WAAA,EAAaA,WAAA;IACb0B,KAAA,EAAOA,KAAA;IACPvB,OAAA,EAASA,OAAA;IACTQ,QAAA,EAAUA,QAAA;IACVgB,KAAA,EAAOA,KAAA;IACPvB,KAAA,EAAOA,KAAA;IACPC,SAAA,EAAWA,SAAA;IACXE,OAAA,EAASA,OAAA;IACTE,OAAA,EAASA,OAAA;IACTwC,QAAA,EACE9C,OAAA,GACIiC,mBAAA,GACCc,CAAA;MACCtB,QAAA,CAASsB,CAAA,CAAEC,MAAM,CAAC/B,KAAK;IACzB;IAENR,IAAA,EAAMA,IAAA;IACNX,WAAA,EAAaA,WAAA;IACbY,QAAA,EAAUA,QAAA;IACVH,QAAA,EAAUA,QAAA;IACVR,GAAA,EAAK4B,SAAA;IACLD,SAAA,EAAWA,SAAA;IACXuB,KAAA,EAAOL,MAAA;IACP3B,KAAA,EAAOA,OAAC,IAAoB;IAC5Bc,aAAA,EAAeA;;AAGrB;AAEA,OAAO,MAAMmB,SAAA,GAAYhE,aAAA,CAAcM,kBAAA","ignoreList":[]}