@payloadcms/ui 3.0.0-beta.78 → 3.0.0-beta.79

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/Select/Input.tsx"],"sourcesContent":["'use client'\nimport type { OptionObject, SelectFieldProps } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { ReactSelectAdapterProps } from '../../elements/ReactSelect/types.js'\n\nimport { ReactSelect } from '../../elements/ReactSelect/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 { fieldBaseClass } from '../shared/index.js'\nimport './index.scss'\n\nexport type SelectInputProps = {\n  onChange?: ReactSelectAdapterProps['onChange']\n  options?: OptionObject[]\n  showError?: boolean\n  value?: string | string[]\n} & Omit<\n  SelectFieldProps,\n  | 'custom'\n  | 'disabled'\n  | 'docPreferences'\n  | 'locale'\n  | 'localized'\n  | 'onChange'\n  | 'options'\n  | 'rtl'\n  | 'type'\n  | 'user'\n  | 'validate'\n  | 'value'\n>\n\nexport const SelectInput: React.FC<SelectInputProps> = (props) => {\n  const {\n    AfterInput,\n    BeforeInput,\n    CustomDescription,\n    CustomError,\n    CustomLabel,\n    className,\n    descriptionProps,\n    errorProps,\n    hasMany = false,\n    isClearable = true,\n    isSortable = true,\n    label,\n    labelProps,\n    onChange,\n    options,\n    path,\n    readOnly,\n    required,\n    showError,\n    style,\n    value,\n    width,\n  } = props\n\n  const { i18n } = useTranslation()\n\n  let valueToRender\n\n  if (hasMany && Array.isArray(value)) {\n    valueToRender = value.map((val) => {\n      const matchingOption = options.find((option) => option.value === val)\n      return {\n        label: matchingOption ? getTranslation(matchingOption.label, i18n) : val,\n        value: matchingOption?.value ?? val,\n      }\n    })\n  } else if (value) {\n    const matchingOption = options.find((option) => option.value === value)\n    valueToRender = {\n      label: matchingOption ? getTranslation(matchingOption.label, i18n) : value,\n      value: matchingOption?.value ?? value,\n    }\n  }\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        'select',\n        className,\n        showError && 'error',\n        readOnly && 'read-only',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      id={`field-${path.replace(/\\./g, '__')}`}\n      style={{\n        ...style,\n        width,\n      }}\n    >\n      <FieldLabel\n        CustomLabel={CustomLabel}\n        label={label}\n        required={required}\n        {...(labelProps || {})}\n      />\n      <div className={`${fieldBaseClass}__wrap`}>\n        <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />\n        {BeforeInput}\n        <ReactSelect\n          disabled={readOnly}\n          isClearable={isClearable}\n          isMulti={hasMany}\n          isSortable={isSortable}\n          onChange={onChange}\n          options={options.map((option) => ({\n            ...option,\n            label: getTranslation(option.label, i18n),\n          }))}\n          showError={showError}\n          value={valueToRender as OptionObject}\n        />\n        {AfterInput}\n      </div>\n      {CustomDescription !== undefined ? (\n        CustomDescription\n      ) : (\n        <FieldDescription {...(descriptionProps || {})} />\n      )}\n    </div>\n  )\n}\n"],"names":["getTranslation","React","ReactSelect","useTranslation","FieldDescription","FieldError","FieldLabel","fieldBaseClass","SelectInput","props","AfterInput","BeforeInput","CustomDescription","CustomError","CustomLabel","className","descriptionProps","errorProps","hasMany","isClearable","isSortable","label","labelProps","onChange","options","path","readOnly","required","showError","style","value","width","i18n","valueToRender","Array","isArray","map","val","matchingOption","find","option","div","filter","Boolean","join","id","replace","disabled","isMulti","undefined"],"mappings":"AAAA;;AAGA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,WAAW,QAAO;AAIzB,SAASC,WAAW,QAAQ,sCAAqC;AACjE,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,gBAAgB,QAAQ,+BAA8B;AAC/D,SAASC,UAAU,QAAQ,yBAAwB;AACnD,SAASC,UAAU,QAAQ,yBAAwB;AACnD,SAASC,cAAc,QAAQ,qBAAoB;AACnD,OAAO,eAAc;AAuBrB,OAAO,MAAMC,cAA0C,CAACC;IACtD,MAAM,EACJC,UAAU,EACVC,WAAW,EACXC,iBAAiB,EACjBC,WAAW,EACXC,WAAW,EACXC,SAAS,EACTC,gBAAgB,EAChBC,UAAU,EACVC,UAAU,KAAK,EACfC,cAAc,IAAI,EAClBC,aAAa,IAAI,EACjBC,KAAK,EACLC,UAAU,EACVC,QAAQ,EACRC,OAAO,EACPC,IAAI,EACJC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,KAAK,EACLC,KAAK,EACN,GAAGtB;IAEJ,MAAM,EAAEuB,IAAI,EAAE,GAAG7B;IAEjB,IAAI8B;IAEJ,IAAIf,WAAWgB,MAAMC,OAAO,CAACL,QAAQ;QACnCG,gBAAgBH,MAAMM,GAAG,CAAC,CAACC;YACzB,MAAMC,iBAAiBd,QAAQe,IAAI,CAAC,CAACC,SAAWA,OAAOV,KAAK,KAAKO;YACjE,OAAO;gBACLhB,OAAOiB,iBAAiBtC,eAAesC,eAAejB,KAAK,EAAEW,QAAQK;gBACrEP,OAAOQ,gBAAgBR,SAASO;YAClC;QACF;IACF,OAAO,IAAIP,OAAO;QAChB,MAAMQ,iBAAiBd,QAAQe,IAAI,CAAC,CAACC,SAAWA,OAAOV,KAAK,KAAKA;QACjEG,gBAAgB;YACdZ,OAAOiB,iBAAiBtC,eAAesC,eAAejB,KAAK,EAAEW,QAAQF;YACrEA,OAAOQ,gBAAgBR,SAASA;QAClC;IACF;IAEA,qBACE,MAACW;QACC1B,WAAW;YACTR;YACA;YACAQ;YACAa,aAAa;YACbF,YAAY;SACb,CACEgB,MAAM,CAACC,SACPC,IAAI,CAAC;QACRC,IAAI,CAAC,MAAM,EAAEpB,KAAKqB,OAAO,CAAC,OAAO,MAAM,CAAC;QACxCjB,OAAO;YACL,GAAGA,KAAK;YACRE;QACF;;0BAEA,KAACzB;gBACCQ,aAAaA;gBACbO,OAAOA;gBACPM,UAAUA;gBACT,GAAIL,cAAc,CAAC,CAAC;;0BAEvB,MAACmB;gBAAI1B,WAAW,CAAC,EAAER,eAAe,MAAM,CAAC;;kCACvC,KAACF;wBAAWQ,aAAaA;wBAAaY,MAAMA;wBAAO,GAAIR,cAAc,CAAC,CAAC;;oBACtEN;kCACD,KAACT;wBACC6C,UAAUrB;wBACVP,aAAaA;wBACb6B,SAAS9B;wBACTE,YAAYA;wBACZG,UAAUA;wBACVC,SAASA,QAAQY,GAAG,CAAC,CAACI,SAAY,CAAA;gCAChC,GAAGA,MAAM;gCACTnB,OAAOrB,eAAewC,OAAOnB,KAAK,EAAEW;4BACtC,CAAA;wBACAJ,WAAWA;wBACXE,OAAOG;;oBAERvB;;;YAEFE,sBAAsBqC,YACrBrC,kCAEA,KAACR;gBAAkB,GAAIY,oBAAoB,CAAC,CAAC;;;;AAIrD,EAAC"}
+{"version":3,"sources":["../../../src/fields/Select/Input.tsx"],"sourcesContent":["'use client'\nimport type { MappedComponent, OptionObject, StaticDescription, StaticLabel } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { ReactSelectAdapterProps } from '../../elements/ReactSelect/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 type SelectInputProps = {\n  readonly Description?: MappedComponent\n  readonly Error?: MappedComponent\n  readonly Label?: MappedComponent\n  readonly afterInput?: MappedComponent[]\n  readonly beforeInput?: MappedComponent[]\n  readonly className?: string\n  readonly description?: StaticDescription\n  readonly descriptionProps?: Record<string, unknown>\n  readonly errorProps?: Record<string, unknown>\n  readonly hasMany?: boolean\n  readonly isClearable?: boolean\n  readonly isSortable?: boolean\n  readonly label: StaticLabel\n  readonly labelProps?: Record<string, unknown>\n  readonly name: string\n  readonly onChange?: ReactSelectAdapterProps['onChange']\n  readonly options?: OptionObject[]\n  readonly path: string\n  readonly readOnly?: boolean\n  readonly required?: boolean\n  readonly showError?: boolean\n  readonly style?: React.CSSProperties\n  readonly value?: string | string[]\n  readonly width?: string\n}\n\nexport const SelectInput: React.FC<SelectInputProps> = (props) => {\n  const {\n    Description,\n    Error,\n    Label,\n    afterInput,\n    beforeInput,\n    className,\n    description,\n    descriptionProps,\n    errorProps,\n    hasMany = false,\n    isClearable = true,\n    isSortable = true,\n    label,\n    labelProps,\n    onChange,\n    options,\n    path,\n    readOnly,\n    required,\n    showError,\n    style,\n    value,\n    width,\n  } = props\n\n  const { i18n } = useTranslation()\n\n  let valueToRender\n\n  if (hasMany && Array.isArray(value)) {\n    valueToRender = value.map((val) => {\n      const matchingOption = options.find((option) => option.value === val)\n      return {\n        label: matchingOption ? getTranslation(matchingOption.label, i18n) : val,\n        value: matchingOption?.value ?? val,\n      }\n    })\n  } else if (value) {\n    const matchingOption = options.find((option) => option.value === value)\n    valueToRender = {\n      label: matchingOption ? getTranslation(matchingOption.label, i18n) : value,\n      value: matchingOption?.value ?? value,\n    }\n  }\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        'select',\n        className,\n        showError && 'error',\n        readOnly && 'read-only',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      id={`field-${path.replace(/\\./g, '__')}`}\n      style={{\n        ...style,\n        width,\n      }}\n    >\n      <FieldLabel Label={Label} label={label} required={required} {...(labelProps || {})} />\n      <div className={`${fieldBaseClass}__wrap`}>\n        <FieldError CustomError={Error} path={path} {...(errorProps || {})} />\n        <RenderComponent mappedComponent={beforeInput} />\n        <ReactSelect\n          disabled={readOnly}\n          isClearable={isClearable}\n          isMulti={hasMany}\n          isSortable={isSortable}\n          onChange={onChange}\n          options={options.map((option) => ({\n            ...option,\n            label: getTranslation(option.label, i18n),\n          }))}\n          showError={showError}\n          value={valueToRender as OptionObject}\n        />\n        <RenderComponent mappedComponent={afterInput} />\n      </div>\n      <FieldDescription\n        Description={Description}\n        description={description}\n        {...(descriptionProps || {})}\n      />\n    </div>\n  )\n}\n"],"names":["getTranslation","React","ReactSelect","RenderComponent","useTranslation","FieldDescription","FieldError","FieldLabel","fieldBaseClass","SelectInput","props","Description","Error","Label","afterInput","beforeInput","className","description","descriptionProps","errorProps","hasMany","isClearable","isSortable","label","labelProps","onChange","options","path","readOnly","required","showError","style","value","width","i18n","valueToRender","Array","isArray","map","val","matchingOption","find","option","div","filter","Boolean","join","id","replace","CustomError","mappedComponent","disabled","isMulti"],"mappings":"AAAA;;AAGA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,WAAW,QAAO;AAIzB,SAASC,WAAW,QAAQ,sCAAqC;AACjE,SAASC,eAAe,QAAQ,4CAA2C;AAC3E,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,gBAAgB,QAAQ,+BAA8B;AAC/D,SAASC,UAAU,QAAQ,yBAAwB;AACnD,SAASC,UAAU,QAAQ,yBAAwB;AACnD,SAASC,cAAc,QAAQ,qBAAoB;AACnD,OAAO,eAAc;AA6BrB,OAAO,MAAMC,cAA0C,CAACC;IACtD,MAAM,EACJC,WAAW,EACXC,KAAK,EACLC,KAAK,EACLC,UAAU,EACVC,WAAW,EACXC,SAAS,EACTC,WAAW,EACXC,gBAAgB,EAChBC,UAAU,EACVC,UAAU,KAAK,EACfC,cAAc,IAAI,EAClBC,aAAa,IAAI,EACjBC,KAAK,EACLC,UAAU,EACVC,QAAQ,EACRC,OAAO,EACPC,IAAI,EACJC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,KAAK,EACLC,KAAK,EACN,GAAGvB;IAEJ,MAAM,EAAEwB,IAAI,EAAE,GAAG9B;IAEjB,IAAI+B;IAEJ,IAAIf,WAAWgB,MAAMC,OAAO,CAACL,QAAQ;QACnCG,gBAAgBH,MAAMM,GAAG,CAAC,CAACC;YACzB,MAAMC,iBAAiBd,QAAQe,IAAI,CAAC,CAACC,SAAWA,OAAOV,KAAK,KAAKO;YACjE,OAAO;gBACLhB,OAAOiB,iBAAiBxC,eAAewC,eAAejB,KAAK,EAAEW,QAAQK;gBACrEP,OAAOQ,gBAAgBR,SAASO;YAClC;QACF;IACF,OAAO,IAAIP,OAAO;QAChB,MAAMQ,iBAAiBd,QAAQe,IAAI,CAAC,CAACC,SAAWA,OAAOV,KAAK,KAAKA;QACjEG,gBAAgB;YACdZ,OAAOiB,iBAAiBxC,eAAewC,eAAejB,KAAK,EAAEW,QAAQF;YACrEA,OAAOQ,gBAAgBR,SAASA;QAClC;IACF;IAEA,qBACE,MAACW;QACC3B,WAAW;YACTR;YACA;YACAQ;YACAc,aAAa;YACbF,YAAY;SACb,CACEgB,MAAM,CAACC,SACPC,IAAI,CAAC;QACRC,IAAI,CAAC,MAAM,EAAEpB,KAAKqB,OAAO,CAAC,OAAO,MAAM,CAAC;QACxCjB,OAAO;YACL,GAAGA,KAAK;YACRE;QACF;;0BAEA,KAAC1B;gBAAWM,OAAOA;gBAAOU,OAAOA;gBAAOM,UAAUA;gBAAW,GAAIL,cAAc,CAAC,CAAC;;0BACjF,MAACmB;gBAAI3B,WAAW,CAAC,EAAER,eAAe,MAAM,CAAC;;kCACvC,KAACF;wBAAW2C,aAAarC;wBAAOe,MAAMA;wBAAO,GAAIR,cAAc,CAAC,CAAC;;kCACjE,KAAChB;wBAAgB+C,iBAAiBnC;;kCAClC,KAACb;wBACCiD,UAAUvB;wBACVP,aAAaA;wBACb+B,SAAShC;wBACTE,YAAYA;wBACZG,UAAUA;wBACVC,SAASA,QAAQY,GAAG,CAAC,CAACI,SAAY,CAAA;gCAChC,GAAGA,MAAM;gCACTnB,OAAOvB,eAAe0C,OAAOnB,KAAK,EAAEW;4BACtC,CAAA;wBACAJ,WAAWA;wBACXE,OAAOG;;kCAET,KAAChC;wBAAgB+C,iBAAiBpC;;;;0BAEpC,KAACT;gBACCM,aAAaA;gBACbM,aAAaA;gBACZ,GAAIC,oBAAoB,CAAC,CAAC;;;;AAInC,EAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Select/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAwB,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAErE,OAAO,KAAsB,MAAM,OAAO,CAAA;AAG1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAKlD,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAgHxC,eAAO,MAAM,WAAW,4BAAsC,CAAA;AAE9D,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Select/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAwB,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAErE,OAAO,KAAsB,MAAM,OAAO,CAAA;AAG1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAKlD,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AA8GxC,eAAO,MAAM,WAAW,4BAAsC,CAAA;AAE9D,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,CAAA"}

package/dist/fields/Select/index.js

@@ -15,7 +15,8 @@ const formatOptions = (options)=>options.map((option)=>{
         };
     });
 const SelectFieldComponent = (props)=>{
-    const { name, AfterInput, BeforeInput, CustomDescription, CustomError, CustomLabel, className, descriptionProps, errorProps, hasMany = false, isClearable = true, isSortable = true, label, labelProps, onChange: onChangeFromProps, options: optionsFromProps = [], path: pathFromProps, readOnly: readOnlyFromProps, required, style, validate, width } = props;
+    const { field, field: { name, _path: pathFromProps, admin: { className, description, isClearable = true, isSortable = true, readOnly: readOnlyFromAdmin, style, width } = {}, hasMany = false, label, options: optionsFromProps = [], required }, onChange: onChangeFromProps, readOnly: readOnlyFromTopLevelProps, validate } = props;
+    const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin;
     const options = React.useMemo(()=>formatOptions(optionsFromProps), [
         optionsFromProps
     ]);
@@ -62,19 +63,17 @@ const SelectFieldComponent = (props)=>{
         onChangeFromProps
     ]);
     return /*#__PURE__*/ _jsx(SelectInput, {
-        AfterInput: AfterInput,
-        BeforeInput: BeforeInput,
-        CustomDescription: CustomDescription,
-        CustomError: CustomError,
-        CustomLabel: CustomLabel,
+        Description: field?.admin?.components?.Description,
+        Error: field?.admin?.components?.Error,
+        Label: field?.admin?.components?.Label,
+        afterInput: field?.admin?.components?.afterInput,
+        beforeInput: field?.admin?.components?.beforeInput,
         className: className,
-        descriptionProps: descriptionProps,
-        errorProps: errorProps,
+        description: description,
         hasMany: hasMany,
         isClearable: isClearable,
         isSortable: isSortable,
         label: label,
-        labelProps: labelProps,
         name: name,
         onChange: onChange,
         options: options,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/Select/index.tsx"],"sourcesContent":["'use client'\nimport type { Option, OptionObject, SelectFieldProps } from 'payload'\n\nimport React, { useCallback } from 'react'\n\nimport type { ReactSelectAdapterProps } from '../../elements/ReactSelect/types.js'\nimport type { SelectInputProps } from './Input.js'\n\nimport { useFieldProps } from '../../forms/FieldPropsProvider/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { SelectInput } from './Input.js'\n\nconst formatOptions = (options: Option[]): OptionObject[] =>\n  options.map((option) => {\n    if (typeof option === 'object' && (option.value || option.value === '')) {\n      return option\n    }\n\n    return {\n      label: option,\n      value: option,\n    } as OptionObject\n  })\n\nconst SelectFieldComponent: React.FC<SelectFieldProps> = (props) => {\n  const {\n    name,\n    AfterInput,\n    BeforeInput,\n    CustomDescription,\n    CustomError,\n    CustomLabel,\n    className,\n    descriptionProps,\n    errorProps,\n    hasMany = false,\n    isClearable = true,\n    isSortable = true,\n    label,\n    labelProps,\n    onChange: onChangeFromProps,\n    options: optionsFromProps = [],\n    path: pathFromProps,\n    readOnly: readOnlyFromProps,\n    required,\n    style,\n    validate,\n    width,\n  } = props\n\n  const options = React.useMemo(() => formatOptions(optionsFromProps), [optionsFromProps])\n\n  const memoizedValidate = useCallback(\n    (value, validationOptions) => {\n      if (typeof validate === 'function')\n        return validate(value, { ...validationOptions, hasMany, options, required })\n    },\n    [validate, required, hasMany, options],\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 onChange: ReactSelectAdapterProps['onChange'] = useCallback(\n    (selectedOption: OptionObject | OptionObject[]) => {\n      if (!disabled) {\n        let newValue: string | string[] = null\n        if (selectedOption && hasMany) {\n          if (Array.isArray(selectedOption)) {\n            newValue = selectedOption.map((option) => option.value)\n          } else {\n            newValue = []\n          }\n        } else if (selectedOption && !Array.isArray(selectedOption)) {\n          newValue = selectedOption.value\n        }\n\n        if (typeof onChangeFromProps === 'function') {\n          onChangeFromProps(newValue)\n        }\n\n        setValue(newValue)\n      }\n    },\n    [disabled, hasMany, setValue, onChangeFromProps],\n  )\n\n  return (\n    <SelectInput\n      AfterInput={AfterInput}\n      BeforeInput={BeforeInput}\n      CustomDescription={CustomDescription}\n      CustomError={CustomError}\n      CustomLabel={CustomLabel}\n      className={className}\n      descriptionProps={descriptionProps}\n      errorProps={errorProps}\n      hasMany={hasMany}\n      isClearable={isClearable}\n      isSortable={isSortable}\n      label={label}\n      labelProps={labelProps}\n      name={name}\n      onChange={onChange}\n      options={options}\n      path={path}\n      readOnly={disabled}\n      required={required}\n      showError={showError}\n      style={style}\n      value={value as string | string[]}\n      width={width}\n    />\n  )\n}\n\nexport const SelectField = withCondition(SelectFieldComponent)\n\nexport { SelectInput, type SelectInputProps }\n"],"names":["React","useCallback","useFieldProps","useField","withCondition","SelectInput","formatOptions","options","map","option","value","label","SelectFieldComponent","props","name","AfterInput","BeforeInput","CustomDescription","CustomError","CustomLabel","className","descriptionProps","errorProps","hasMany","isClearable","isSortable","labelProps","onChange","onChangeFromProps","optionsFromProps","path","pathFromProps","readOnly","readOnlyFromProps","required","style","validate","width","useMemo","memoizedValidate","validationOptions","pathFromContext","readOnlyFromContext","formInitializing","formProcessing","setValue","showError","disabled","selectedOption","newValue","Array","isArray","SelectField"],"mappings":"AAAA;;AAGA,OAAOA,SAASC,WAAW,QAAQ,QAAO;AAK1C,SAASC,aAAa,QAAQ,0CAAyC;AACvE,SAASC,QAAQ,QAAQ,gCAA+B;AACxD,SAASC,aAAa,QAAQ,qCAAoC;AAClE,SAASC,WAAW,QAAQ,aAAY;AAExC,MAAMC,gBAAgB,CAACC,UACrBA,QAAQC,GAAG,CAAC,CAACC;QACX,IAAI,OAAOA,WAAW,YAAaA,CAAAA,OAAOC,KAAK,IAAID,OAAOC,KAAK,KAAK,EAAC,GAAI;YACvE,OAAOD;QACT;QAEA,OAAO;YACLE,OAAOF;YACPC,OAAOD;QACT;IACF;AAEF,MAAMG,uBAAmD,CAACC;IACxD,MAAM,EACJC,IAAI,EACJC,UAAU,EACVC,WAAW,EACXC,iBAAiB,EACjBC,WAAW,EACXC,WAAW,EACXC,SAAS,EACTC,gBAAgB,EAChBC,UAAU,EACVC,UAAU,KAAK,EACfC,cAAc,IAAI,EAClBC,aAAa,IAAI,EACjBd,KAAK,EACLe,UAAU,EACVC,UAAUC,iBAAiB,EAC3BrB,SAASsB,mBAAmB,EAAE,EAC9BC,MAAMC,aAAa,EACnBC,UAAUC,iBAAiB,EAC3BC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,KAAK,EACN,GAAGxB;IAEJ,MAAMN,UAAUP,MAAMsC,OAAO,CAAC,IAAMhC,cAAcuB,mBAAmB;QAACA;KAAiB;IAEvF,MAAMU,mBAAmBtC,YACvB,CAACS,OAAO8B;QACN,IAAI,OAAOJ,aAAa,YACtB,OAAOA,SAAS1B,OAAO;YAAE,GAAG8B,iBAAiB;YAAEjB;YAAShB;YAAS2B;QAAS;IAC9E,GACA;QAACE;QAAUF;QAAUX;QAAShB;KAAQ;IAGxC,MAAM,EAAEuB,MAAMW,eAAe,EAAET,UAAUU,mBAAmB,EAAE,GAAGxC;IAEjE,MAAM,EAAEyC,gBAAgB,EAAEC,cAAc,EAAEd,IAAI,EAAEe,QAAQ,EAAEC,SAAS,EAAEpC,KAAK,EAAE,GAAGP,SAAS;QACtF2B,MAAMW,mBAAmBV,iBAAiBjB;QAC1CsB,UAAUG;IACZ;IAEA,MAAMQ,WAAWd,qBAAqBS,uBAAuBE,kBAAkBD;IAE/E,MAAMhB,WAAgD1B,YACpD,CAAC+C;QACC,IAAI,CAACD,UAAU;YACb,IAAIE,WAA8B;YAClC,IAAID,kBAAkBzB,SAAS;gBAC7B,IAAI2B,MAAMC,OAAO,CAACH,iBAAiB;oBACjCC,WAAWD,eAAexC,GAAG,CAAC,CAACC,SAAWA,OAAOC,KAAK;gBACxD,OAAO;oBACLuC,WAAW,EAAE;gBACf;YACF,OAAO,IAAID,kBAAkB,CAACE,MAAMC,OAAO,CAACH,iBAAiB;gBAC3DC,WAAWD,eAAetC,KAAK;YACjC;YAEA,IAAI,OAAOkB,sBAAsB,YAAY;gBAC3CA,kBAAkBqB;YACpB;YAEAJ,SAASI;QACX;IACF,GACA;QAACF;QAAUxB;QAASsB;QAAUjB;KAAkB;IAGlD,qBACE,KAACvB;QACCU,YAAYA;QACZC,aAAaA;QACbC,mBAAmBA;QACnBC,aAAaA;QACbC,aAAaA;QACbC,WAAWA;QACXC,kBAAkBA;QAClBC,YAAYA;QACZC,SAASA;QACTC,aAAaA;QACbC,YAAYA;QACZd,OAAOA;QACPe,YAAYA;QACZZ,MAAMA;QACNa,UAAUA;QACVpB,SAASA;QACTuB,MAAMA;QACNE,UAAUe;QACVb,UAAUA;QACVY,WAAWA;QACXX,OAAOA;QACPzB,OAAOA;QACP2B,OAAOA;;AAGb;AAEA,OAAO,MAAMe,cAAchD,cAAcQ,sBAAqB;AAE9D,SAASP,WAAW,GAAyB"}
+{"version":3,"sources":["../../../src/fields/Select/index.tsx"],"sourcesContent":["'use client'\nimport type { Option, OptionObject, SelectFieldProps } from 'payload'\n\nimport React, { useCallback } from 'react'\n\nimport type { ReactSelectAdapterProps } from '../../elements/ReactSelect/types.js'\nimport type { SelectInputProps } from './Input.js'\n\nimport { useFieldProps } from '../../forms/FieldPropsProvider/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { SelectInput } from './Input.js'\n\nconst formatOptions = (options: Option[]): OptionObject[] =>\n  options.map((option) => {\n    if (typeof option === 'object' && (option.value || option.value === '')) {\n      return option\n    }\n\n    return {\n      label: option,\n      value: option,\n    } as OptionObject\n  })\n\nconst SelectFieldComponent: React.FC<SelectFieldProps> = (props) => {\n  const {\n    field,\n    field: {\n      name,\n      _path: pathFromProps,\n      admin: {\n        className,\n        description,\n        isClearable = true,\n        isSortable = true,\n        readOnly: readOnlyFromAdmin,\n        style,\n        width,\n      } = {} as SelectFieldProps['field']['admin'],\n      hasMany = false,\n      label,\n      options: optionsFromProps = [],\n      required,\n    },\n    onChange: onChangeFromProps,\n    readOnly: readOnlyFromTopLevelProps,\n    validate,\n  } = props\n  const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin\n\n  const options = React.useMemo(() => formatOptions(optionsFromProps), [optionsFromProps])\n\n  const memoizedValidate = useCallback(\n    (value, validationOptions) => {\n      if (typeof validate === 'function')\n        return validate(value, { ...validationOptions, hasMany, options, required })\n    },\n    [validate, required, hasMany, options],\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 onChange: ReactSelectAdapterProps['onChange'] = useCallback(\n    (selectedOption: OptionObject | OptionObject[]) => {\n      if (!disabled) {\n        let newValue: string | string[] = null\n        if (selectedOption && hasMany) {\n          if (Array.isArray(selectedOption)) {\n            newValue = selectedOption.map((option) => option.value)\n          } else {\n            newValue = []\n          }\n        } else if (selectedOption && !Array.isArray(selectedOption)) {\n          newValue = selectedOption.value\n        }\n\n        if (typeof onChangeFromProps === 'function') {\n          onChangeFromProps(newValue)\n        }\n\n        setValue(newValue)\n      }\n    },\n    [disabled, hasMany, setValue, onChangeFromProps],\n  )\n\n  return (\n    <SelectInput\n      Description={field?.admin?.components?.Description}\n      Error={field?.admin?.components?.Error}\n      Label={field?.admin?.components?.Label}\n      afterInput={field?.admin?.components?.afterInput}\n      beforeInput={field?.admin?.components?.beforeInput}\n      className={className}\n      description={description}\n      hasMany={hasMany}\n      isClearable={isClearable}\n      isSortable={isSortable}\n      label={label}\n      name={name}\n      onChange={onChange}\n      options={options}\n      path={path}\n      readOnly={disabled}\n      required={required}\n      showError={showError}\n      style={style}\n      value={value as string | string[]}\n      width={width}\n    />\n  )\n}\n\nexport const SelectField = withCondition(SelectFieldComponent)\n\nexport { SelectInput, type SelectInputProps }\n"],"names":["React","useCallback","useFieldProps","useField","withCondition","SelectInput","formatOptions","options","map","option","value","label","SelectFieldComponent","props","field","name","_path","pathFromProps","admin","className","description","isClearable","isSortable","readOnly","readOnlyFromAdmin","style","width","hasMany","optionsFromProps","required","onChange","onChangeFromProps","readOnlyFromTopLevelProps","validate","readOnlyFromProps","useMemo","memoizedValidate","validationOptions","path","pathFromContext","readOnlyFromContext","formInitializing","formProcessing","setValue","showError","disabled","selectedOption","newValue","Array","isArray","Description","components","Error","Label","afterInput","beforeInput","SelectField"],"mappings":"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"}

package/dist/fields/Tabs/Tab/index.d.ts

@@ -1,11 +1,11 @@
-import type { MappedTab } from 'payload';
+import type { ClientTab } from 'payload';
 import React from 'react';
 import './index.scss';
 type TabProps = {
-    isActive?: boolean;
-    parentPath: string;
-    setIsActive: () => void;
-    tab: MappedTab;
+    readonly isActive?: boolean;
+    readonly parentPath: string;
+    readonly setIsActive: () => void;
+    readonly tab: ClientTab;
 };
 export declare const TabComponent: React.FC<TabProps>;
 export {};

package/dist/fields/Tabs/Tab/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/fields/Tabs/Tab/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAGxC,OAAO,KAAmB,MAAM,OAAO,CAAA;AAKvC,OAAO,cAAc,CAAA;AAIrB,KAAK,QAAQ,GAAG;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,GAAG,EAAE,SAAS,CAAA;CACf,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CA6B3C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/fields/Tabs/Tab/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAIxC,OAAO,KAAmB,MAAM,OAAO,CAAA;AAKvC,OAAO,cAAc,CAAA;AAIrB,KAAK,QAAQ,GAAG;IACd,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,WAAW,EAAE,MAAM,IAAI,CAAA;IAChC,QAAQ,CAAC,GAAG,EAAE,SAAS,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CA0B3C,CAAA"}

package/dist/fields/Tabs/Tab/index.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
+import { tabHasName } from 'payload/shared';
 import React, { useState } from 'react';
 import { ErrorPill } from '../../../elements/ErrorPill/index.js';
 import { WatchChildErrors } from '../../../forms/WatchChildErrors/index.js';
@@ -8,16 +9,14 @@ import { useTranslation } from '../../../providers/Translation/index.js';
 import './index.scss';
 const baseClass = 'tabs-field__tab-button';
 export const TabComponent = ({ isActive, parentPath, setIsActive, tab })=>{
-    const { name, label } = tab;
     const { i18n } = useTranslation();
     const [errorCount, setErrorCount] = useState(undefined);
-    const hasName = 'name' in tab;
-    const path = `${parentPath ? `${parentPath}.` : ''}${'name' in tab ? name : ''}`;
+    const path = `${parentPath ? `${parentPath}.` : ''}${tabHasName(tab) ? tab.name : ''}`;
     const fieldHasErrors = errorCount > 0;
     return /*#__PURE__*/ _jsxs(React.Fragment, {
         children: [
             /*#__PURE__*/ _jsx(WatchChildErrors, {
-                fieldMap: tab.fieldMap,
+                fields: tab.fields,
                 path: path,
                 setErrorCount: setErrorCount
             }),
@@ -30,7 +29,7 @@ export const TabComponent = ({ isActive, parentPath, setIsActive, tab })=>{
                 onClick: setIsActive,
                 type: "button",
                 children: [
-                    label ? getTranslation(label, i18n) : hasName && name,
+                    tab.label ? getTranslation(tab.label, i18n) : tabHasName(tab) ? tab.name : '',
                     fieldHasErrors && /*#__PURE__*/ _jsx(ErrorPill, {
                         count: errorCount,
                         i18n: i18n

package/dist/fields/Tabs/Tab/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/fields/Tabs/Tab/index.tsx"],"sourcesContent":["'use client'\nimport type { MappedTab } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useState } from 'react'\n\nimport { ErrorPill } from '../../../elements/ErrorPill/index.js'\nimport { WatchChildErrors } from '../../../forms/WatchChildErrors/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'tabs-field__tab-button'\n\ntype TabProps = {\n  isActive?: boolean\n  parentPath: string\n  setIsActive: () => void\n  tab: MappedTab\n}\n\nexport const TabComponent: React.FC<TabProps> = ({ isActive, parentPath, setIsActive, tab }) => {\n  const { name, label } = tab\n\n  const { i18n } = useTranslation()\n  const [errorCount, setErrorCount] = useState(undefined)\n  const hasName = 'name' in tab\n\n  const path = `${parentPath ? `${parentPath}.` : ''}${'name' in tab ? name : ''}`\n  const fieldHasErrors = errorCount > 0\n\n  return (\n    <React.Fragment>\n      <WatchChildErrors fieldMap={tab.fieldMap} path={path} setErrorCount={setErrorCount} />\n      <button\n        className={[\n          baseClass,\n          fieldHasErrors && `${baseClass}--has-error`,\n          isActive && `${baseClass}--active`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        onClick={setIsActive}\n        type=\"button\"\n      >\n        {label ? getTranslation(label, i18n) : hasName && name}\n        {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} />}\n      </button>\n    </React.Fragment>\n  )\n}\n"],"names":["getTranslation","React","useState","ErrorPill","WatchChildErrors","useTranslation","baseClass","TabComponent","isActive","parentPath","setIsActive","tab","name","label","i18n","errorCount","setErrorCount","undefined","hasName","path","fieldHasErrors","Fragment","fieldMap","button","className","filter","Boolean","join","onClick","type","count"],"mappings":"AAAA;;AAGA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,SAASC,QAAQ,QAAQ,QAAO;AAEvC,SAASC,SAAS,QAAQ,uCAAsC;AAChE,SAASC,gBAAgB,QAAQ,2CAA0C;AAC3E,SAASC,cAAc,QAAQ,0CAAyC;AACxE,OAAO,eAAc;AAErB,MAAMC,YAAY;AASlB,OAAO,MAAMC,eAAmC,CAAC,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,WAAW,EAAEC,GAAG,EAAE;IACzF,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGF;IAExB,MAAM,EAAEG,IAAI,EAAE,GAAGT;IACjB,MAAM,CAACU,YAAYC,cAAc,GAAGd,SAASe;IAC7C,MAAMC,UAAU,UAAUP;IAE1B,MAAMQ,OAAO,CAAC,EAAEV,aAAa,CAAC,EAAEA,WAAW,CAAC,CAAC,GAAG,GAAG,EAAE,UAAUE,MAAMC,OAAO,GAAG,CAAC;IAChF,MAAMQ,iBAAiBL,aAAa;IAEpC,qBACE,MAACd,MAAMoB,QAAQ;;0BACb,KAACjB;gBAAiBkB,UAAUX,IAAIW,QAAQ;gBAAEH,MAAMA;gBAAMH,eAAeA;;0BACrE,MAACO;gBACCC,WAAW;oBACTlB;oBACAc,kBAAkB,CAAC,EAAEd,UAAU,WAAW,CAAC;oBAC3CE,YAAY,CAAC,EAAEF,UAAU,QAAQ,CAAC;iBACnC,CACEmB,MAAM,CAACC,SACPC,IAAI,CAAC;gBACRC,SAASlB;gBACTmB,MAAK;;oBAEJhB,QAAQb,eAAea,OAAOC,QAAQI,WAAWN;oBACjDQ,gCAAkB,KAACjB;wBAAU2B,OAAOf;wBAAYD,MAAMA;;;;;;AAI/D,EAAC"}
+{"version":3,"sources":["../../../../src/fields/Tabs/Tab/index.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientTab } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { tabHasName } from 'payload/shared'\nimport React, { useState } from 'react'\n\nimport { ErrorPill } from '../../../elements/ErrorPill/index.js'\nimport { WatchChildErrors } from '../../../forms/WatchChildErrors/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'tabs-field__tab-button'\n\ntype TabProps = {\n  readonly isActive?: boolean\n  readonly parentPath: string\n  readonly setIsActive: () => void\n  readonly tab: ClientTab\n}\n\nexport const TabComponent: React.FC<TabProps> = ({ isActive, parentPath, setIsActive, tab }) => {\n  const { i18n } = useTranslation()\n  const [errorCount, setErrorCount] = useState(undefined)\n\n  const path = `${parentPath ? `${parentPath}.` : ''}${tabHasName(tab) ? tab.name : ''}`\n  const fieldHasErrors = errorCount > 0\n\n  return (\n    <React.Fragment>\n      <WatchChildErrors fields={tab.fields} path={path} setErrorCount={setErrorCount} />\n      <button\n        className={[\n          baseClass,\n          fieldHasErrors && `${baseClass}--has-error`,\n          isActive && `${baseClass}--active`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        onClick={setIsActive}\n        type=\"button\"\n      >\n        {tab.label ? getTranslation(tab.label, i18n) : tabHasName(tab) ? tab.name : ''}\n        {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} />}\n      </button>\n    </React.Fragment>\n  )\n}\n"],"names":["getTranslation","tabHasName","React","useState","ErrorPill","WatchChildErrors","useTranslation","baseClass","TabComponent","isActive","parentPath","setIsActive","tab","i18n","errorCount","setErrorCount","undefined","path","name","fieldHasErrors","Fragment","fields","button","className","filter","Boolean","join","onClick","type","label","count"],"mappings":"AAAA;;AAIA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,SAASC,UAAU,QAAQ,iBAAgB;AAC3C,OAAOC,SAASC,QAAQ,QAAQ,QAAO;AAEvC,SAASC,SAAS,QAAQ,uCAAsC;AAChE,SAASC,gBAAgB,QAAQ,2CAA0C;AAC3E,SAASC,cAAc,QAAQ,0CAAyC;AACxE,OAAO,eAAc;AAErB,MAAMC,YAAY;AASlB,OAAO,MAAMC,eAAmC,CAAC,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,WAAW,EAAEC,GAAG,EAAE;IACzF,MAAM,EAAEC,IAAI,EAAE,GAAGP;IACjB,MAAM,CAACQ,YAAYC,cAAc,GAAGZ,SAASa;IAE7C,MAAMC,OAAO,CAAC,EAAEP,aAAa,CAAC,EAAEA,WAAW,CAAC,CAAC,GAAG,GAAG,EAAET,WAAWW,OAAOA,IAAIM,IAAI,GAAG,GAAG,CAAC;IACtF,MAAMC,iBAAiBL,aAAa;IAEpC,qBACE,MAACZ,MAAMkB,QAAQ;;0BACb,KAACf;gBAAiBgB,QAAQT,IAAIS,MAAM;gBAAEJ,MAAMA;gBAAMF,eAAeA;;0BACjE,MAACO;gBACCC,WAAW;oBACThB;oBACAY,kBAAkB,CAAC,EAAEZ,UAAU,WAAW,CAAC;oBAC3CE,YAAY,CAAC,EAAEF,UAAU,QAAQ,CAAC;iBACnC,CACEiB,MAAM,CAACC,SACPC,IAAI,CAAC;gBACRC,SAAShB;gBACTiB,MAAK;;oBAEJhB,IAAIiB,KAAK,GAAG7B,eAAeY,IAAIiB,KAAK,EAAEhB,QAAQZ,WAAWW,OAAOA,IAAIM,IAAI,GAAG;oBAC3EC,gCAAkB,KAACf;wBAAU0B,OAAOhB;wBAAYD,MAAMA;;;;;;AAI/D,EAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Tabs/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAuB,cAAc,EAAE,MAAM,SAAS,CAAA;AAIlE,OAAO,KAA2C,MAAM,OAAO,CAAA;AAY/D,OAAO,cAAc,CAAA;AACrB,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAI5C,OAAO,EAAE,YAAY,EAAE,CAAA;AAoKvB,eAAO,MAAM,SAAS,0BAAoC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Tabs/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAuB,cAAc,EAAE,MAAM,SAAS,CAAA;AAIlE,OAAO,KAA2C,MAAM,OAAO,CAAA;AAY/D,OAAO,cAAc,CAAA;AACrB,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAI5C,OAAO,EAAE,YAAY,EAAE,CAAA;AAiKvB,eAAO,MAAM,SAAS,0BAAoC,CAAA"}

package/dist/fields/Tabs/index.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
-import { toKebabCase } from 'payload/shared';
+import { tabHasName, toKebabCase } from 'payload/shared';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useCollapsible } from '../../elements/Collapsible/provider.js';
 import { useFieldProps } from '../../forms/FieldPropsProvider/index.js';
@@ -18,10 +18,11 @@ import { TabsProvider } from './provider.js';
 const baseClass = 'tabs-field';
 export { TabsProvider };
 const TabsFieldComponent = (props)=>{
-    const { name, CustomDescription, className, descriptionProps, forceRender = false, path: pathFromProps, readOnly: readOnlyFromProps, tabs = [] } = props;
+    const { field, field: { _path: pathFromProps, admin: { className, readOnly: readOnlyFromAdmin }, tabs = [] }, forceRender = false, readOnly: readOnlyFromTopLevelProps } = props;
     const { indexPath, path: pathFromContext, readOnly: readOnlyFromContext, schemaPath, siblingPermissions } = useFieldProps();
+    const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin;
     const readOnly = readOnlyFromProps || readOnlyFromContext;
-    const path = pathFromContext ?? pathFromProps ?? name;
+    const path = pathFromContext ?? pathFromProps;
     const { getPreference, setPreference } = usePreferences();
     const { preferencesKey } = useDocumentInfo();
     const { i18n } = useTranslation();
@@ -78,9 +79,9 @@ const TabsFieldComponent = (props)=>{
     const activeTabConfig = tabs[activeTabIndex];
     function generateTabPath() {
         let tabPath = path;
-        if (path && activeTabConfig.name) {
+        if (path && tabHasName(activeTabConfig) && activeTabConfig.name) {
             tabPath = `${path}.${activeTabConfig.name}`;
-        } else if (!path && activeTabConfig.name) {
+        } else if (!path && tabHasName(activeTabConfig) && activeTabConfig.name) {
             tabPath = activeTabConfig.name;
         }
         return tabPath;
@@ -118,17 +119,17 @@ const TabsFieldComponent = (props)=>{
                             activeTabConfig.label && `${baseClass}__tabConfigLabel-${toKebabCase(getTranslation(activeTabConfig.label, i18n))}`
                         ].filter(Boolean).join(' '),
                         children: [
-                            CustomDescription ? CustomDescription : /*#__PURE__*/ _jsx(FieldDescription, {
-                                ...descriptionProps || {}
+                            /*#__PURE__*/ _jsx(FieldDescription, {
+                                Description: field?.admin?.components?.Description
                             }),
                             /*#__PURE__*/ _jsx(RenderFields, {
-                                fieldMap: activeTabConfig.fieldMap,
+                                fields: activeTabConfig.fields,
                                 forceRender: forceRender,
                                 margins: "small",
                                 path: generateTabPath(),
                                 permissions: 'name' in activeTabConfig && siblingPermissions?.[activeTabConfig.name]?.fields ? siblingPermissions[activeTabConfig.name]?.fields : siblingPermissions,
                                 readOnly: readOnly,
-                                schemaPath: `${schemaPath ? `${schemaPath}` : ''}${activeTabConfig.name ? `.${activeTabConfig.name}` : ''}`
+                                schemaPath: `${schemaPath ? `${schemaPath}` : ''}${tabHasName(activeTabConfig) && activeTabConfig.name ? `.${activeTabConfig.name}` : ''}`
                             }, activeTabConfig.label ? getTranslation(activeTabConfig.label, i18n) : activeTabConfig['name'])
                         ]
                     })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/Tabs/index.tsx"],"sourcesContent":["'use client'\nimport type { DocumentPreferences, TabsFieldProps } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { toKebabCase } from 'payload/shared'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport { useCollapsible } from '../../elements/Collapsible/provider.js'\nimport { useFieldProps } from '../../forms/FieldPropsProvider/index.js'\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { FieldDescription } from '../FieldDescription/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport { TabComponent } from './Tab/index.js'\nimport './index.scss'\nimport { TabsProvider } from './provider.js'\n\nconst baseClass = 'tabs-field'\n\nexport { TabsProvider }\n\nconst TabsFieldComponent: React.FC<TabsFieldProps> = (props) => {\n  const {\n    name,\n    CustomDescription,\n    className,\n    descriptionProps,\n    forceRender = false,\n    path: pathFromProps,\n    readOnly: readOnlyFromProps,\n    tabs = [],\n  } = props\n\n  const {\n    indexPath,\n    path: pathFromContext,\n    readOnly: readOnlyFromContext,\n    schemaPath,\n    siblingPermissions,\n  } = useFieldProps()\n\n  const readOnly = readOnlyFromProps || readOnlyFromContext\n  const path = pathFromContext ?? pathFromProps ?? name\n  const { getPreference, setPreference } = usePreferences()\n  const { preferencesKey } = useDocumentInfo()\n  const { i18n } = useTranslation()\n  const { isWithinCollapsible } = useCollapsible()\n  const [activeTabIndex, setActiveTabIndex] = useState<number>(0)\n  const tabsPrefKey = `tabs-${indexPath}`\n\n  useEffect(() => {\n    if (preferencesKey) {\n      const getInitialPref = async () => {\n        const existingPreferences: DocumentPreferences = await getPreference(preferencesKey)\n        const initialIndex = path\n          ? existingPreferences?.fields?.[path]?.tabIndex\n          : existingPreferences?.fields?.[tabsPrefKey]?.tabIndex\n        setActiveTabIndex(initialIndex || 0)\n      }\n      void getInitialPref()\n    }\n  }, [path, getPreference, preferencesKey, tabsPrefKey])\n\n  const handleTabChange = useCallback(\n    async (incomingTabIndex: number): Promise<void> => {\n      setActiveTabIndex(incomingTabIndex)\n\n      const existingPreferences: DocumentPreferences = await getPreference(preferencesKey)\n\n      if (preferencesKey) {\n        void setPreference(preferencesKey, {\n          ...existingPreferences,\n          ...(path\n            ? {\n                fields: {\n                  ...(existingPreferences?.fields || {}),\n                  [path]: {\n                    ...existingPreferences?.fields?.[path],\n                    tabIndex: incomingTabIndex,\n                  },\n                },\n              }\n            : {\n                fields: {\n                  ...existingPreferences?.fields,\n                  [tabsPrefKey]: {\n                    ...existingPreferences?.fields?.[tabsPrefKey],\n                    tabIndex: incomingTabIndex,\n                  },\n                },\n              }),\n        })\n      }\n    },\n    [preferencesKey, getPreference, setPreference, path, tabsPrefKey],\n  )\n\n  const activeTabConfig = tabs[activeTabIndex]\n\n  function generateTabPath() {\n    let tabPath = path\n    if (path && activeTabConfig.name) {\n      tabPath = `${path}.${activeTabConfig.name}`\n    } else if (!path && activeTabConfig.name) {\n      tabPath = activeTabConfig.name\n    }\n\n    return tabPath\n  }\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        className,\n        baseClass,\n        isWithinCollapsible && `${baseClass}--within-collapsible`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <TabsProvider>\n        <div className={`${baseClass}__tabs-wrap`}>\n          <div className={`${baseClass}__tabs`}>\n            {tabs.map((tab, tabIndex) => {\n              return (\n                <TabComponent\n                  isActive={activeTabIndex === tabIndex}\n                  key={tabIndex}\n                  parentPath={path}\n                  setIsActive={() => {\n                    void handleTabChange(tabIndex)\n                  }}\n                  tab={tab}\n                />\n              )\n            })}\n          </div>\n        </div>\n        <div className={`${baseClass}__content-wrap`}>\n          {activeTabConfig && (\n            <div\n              className={[\n                `${baseClass}__tab`,\n                activeTabConfig.label &&\n                  `${baseClass}__tabConfigLabel-${toKebabCase(\n                    getTranslation(activeTabConfig.label, i18n),\n                  )}`,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n            >\n              {CustomDescription ? (\n                CustomDescription\n              ) : (\n                <FieldDescription {...(descriptionProps || {})} />\n              )}\n              <RenderFields\n                fieldMap={activeTabConfig.fieldMap}\n                forceRender={forceRender}\n                key={\n                  activeTabConfig.label\n                    ? getTranslation(activeTabConfig.label, i18n)\n                    : activeTabConfig['name']\n                }\n                margins=\"small\"\n                path={generateTabPath()}\n                permissions={\n                  'name' in activeTabConfig && siblingPermissions?.[activeTabConfig.name]?.fields\n                    ? siblingPermissions[activeTabConfig.name]?.fields\n                    : siblingPermissions\n                }\n                readOnly={readOnly}\n                schemaPath={`${schemaPath ? `${schemaPath}` : ''}${activeTabConfig.name ? `.${activeTabConfig.name}` : ''}`}\n              />\n            </div>\n          )}\n        </div>\n      </TabsProvider>\n    </div>\n  )\n}\n\nexport const TabsField = withCondition(TabsFieldComponent)\n"],"names":["getTranslation","toKebabCase","React","useCallback","useEffect","useState","useCollapsible","useFieldProps","RenderFields","withCondition","useDocumentInfo","usePreferences","useTranslation","FieldDescription","fieldBaseClass","TabComponent","TabsProvider","baseClass","TabsFieldComponent","props","name","CustomDescription","className","descriptionProps","forceRender","path","pathFromProps","readOnly","readOnlyFromProps","tabs","indexPath","pathFromContext","readOnlyFromContext","schemaPath","siblingPermissions","getPreference","setPreference","preferencesKey","i18n","isWithinCollapsible","activeTabIndex","setActiveTabIndex","tabsPrefKey","getInitialPref","existingPreferences","initialIndex","fields","tabIndex","handleTabChange","incomingTabIndex","activeTabConfig","generateTabPath","tabPath","div","filter","Boolean","join","map","tab","isActive","parentPath","setIsActive","label","fieldMap","margins","permissions","TabsField"],"mappings":"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"}
+{"version":3,"sources":["../../../src/fields/Tabs/index.tsx"],"sourcesContent":["'use client'\nimport type { DocumentPreferences, TabsFieldProps } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { tabHasName, toKebabCase } from 'payload/shared'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport { useCollapsible } from '../../elements/Collapsible/provider.js'\nimport { useFieldProps } from '../../forms/FieldPropsProvider/index.js'\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { FieldDescription } from '../FieldDescription/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport { TabComponent } from './Tab/index.js'\nimport './index.scss'\nimport { TabsProvider } from './provider.js'\n\nconst baseClass = 'tabs-field'\n\nexport { TabsProvider }\n\nconst TabsFieldComponent: React.FC<TabsFieldProps> = (props) => {\n  const {\n    field,\n    field: {\n      _path: pathFromProps,\n      admin: { className, readOnly: readOnlyFromAdmin },\n      tabs = [],\n    },\n    forceRender = false,\n    readOnly: readOnlyFromTopLevelProps,\n  } = props\n\n  const {\n    indexPath,\n    path: pathFromContext,\n    readOnly: readOnlyFromContext,\n    schemaPath,\n    siblingPermissions,\n  } = useFieldProps()\n  const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin\n\n  const readOnly = readOnlyFromProps || readOnlyFromContext\n  const path = pathFromContext ?? pathFromProps\n  const { getPreference, setPreference } = usePreferences()\n  const { preferencesKey } = useDocumentInfo()\n  const { i18n } = useTranslation()\n  const { isWithinCollapsible } = useCollapsible()\n  const [activeTabIndex, setActiveTabIndex] = useState<number>(0)\n  const tabsPrefKey = `tabs-${indexPath}`\n\n  useEffect(() => {\n    if (preferencesKey) {\n      const getInitialPref = async () => {\n        const existingPreferences: DocumentPreferences = await getPreference(preferencesKey)\n        const initialIndex = path\n          ? existingPreferences?.fields?.[path]?.tabIndex\n          : existingPreferences?.fields?.[tabsPrefKey]?.tabIndex\n        setActiveTabIndex(initialIndex || 0)\n      }\n      void getInitialPref()\n    }\n  }, [path, getPreference, preferencesKey, tabsPrefKey])\n\n  const handleTabChange = useCallback(\n    async (incomingTabIndex: number): Promise<void> => {\n      setActiveTabIndex(incomingTabIndex)\n\n      const existingPreferences: DocumentPreferences = await getPreference(preferencesKey)\n\n      if (preferencesKey) {\n        void setPreference(preferencesKey, {\n          ...existingPreferences,\n          ...(path\n            ? {\n                fields: {\n                  ...(existingPreferences?.fields || {}),\n                  [path]: {\n                    ...existingPreferences?.fields?.[path],\n                    tabIndex: incomingTabIndex,\n                  },\n                },\n              }\n            : {\n                fields: {\n                  ...existingPreferences?.fields,\n                  [tabsPrefKey]: {\n                    ...existingPreferences?.fields?.[tabsPrefKey],\n                    tabIndex: incomingTabIndex,\n                  },\n                },\n              }),\n        })\n      }\n    },\n    [preferencesKey, getPreference, setPreference, path, tabsPrefKey],\n  )\n\n  const activeTabConfig = tabs[activeTabIndex]\n\n  function generateTabPath() {\n    let tabPath = path\n    if (path && tabHasName(activeTabConfig) && activeTabConfig.name) {\n      tabPath = `${path}.${activeTabConfig.name}`\n    } else if (!path && tabHasName(activeTabConfig) && activeTabConfig.name) {\n      tabPath = activeTabConfig.name\n    }\n\n    return tabPath\n  }\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        className,\n        baseClass,\n        isWithinCollapsible && `${baseClass}--within-collapsible`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <TabsProvider>\n        <div className={`${baseClass}__tabs-wrap`}>\n          <div className={`${baseClass}__tabs`}>\n            {tabs.map((tab, tabIndex) => {\n              return (\n                <TabComponent\n                  isActive={activeTabIndex === tabIndex}\n                  key={tabIndex}\n                  parentPath={path}\n                  setIsActive={() => {\n                    void handleTabChange(tabIndex)\n                  }}\n                  tab={tab}\n                />\n              )\n            })}\n          </div>\n        </div>\n        <div className={`${baseClass}__content-wrap`}>\n          {activeTabConfig && (\n            <div\n              className={[\n                `${baseClass}__tab`,\n                activeTabConfig.label &&\n                  `${baseClass}__tabConfigLabel-${toKebabCase(\n                    getTranslation(activeTabConfig.label, i18n),\n                  )}`,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n            >\n              <FieldDescription Description={field?.admin?.components?.Description} />\n              <RenderFields\n                fields={activeTabConfig.fields}\n                forceRender={forceRender}\n                key={\n                  activeTabConfig.label\n                    ? getTranslation(activeTabConfig.label, i18n)\n                    : activeTabConfig['name']\n                }\n                margins=\"small\"\n                path={generateTabPath()}\n                permissions={\n                  'name' in activeTabConfig && siblingPermissions?.[activeTabConfig.name]?.fields\n                    ? siblingPermissions[activeTabConfig.name]?.fields\n                    : siblingPermissions\n                }\n                readOnly={readOnly}\n                schemaPath={`${schemaPath ? `${schemaPath}` : ''}${tabHasName(activeTabConfig) && activeTabConfig.name ? `.${activeTabConfig.name}` : ''}`}\n              />\n            </div>\n          )}\n        </div>\n      </TabsProvider>\n    </div>\n  )\n}\n\nexport const TabsField = withCondition(TabsFieldComponent)\n"],"names":["getTranslation","tabHasName","toKebabCase","React","useCallback","useEffect","useState","useCollapsible","useFieldProps","RenderFields","withCondition","useDocumentInfo","usePreferences","useTranslation","FieldDescription","fieldBaseClass","TabComponent","TabsProvider","baseClass","TabsFieldComponent","props","field","_path","pathFromProps","admin","className","readOnly","readOnlyFromAdmin","tabs","forceRender","readOnlyFromTopLevelProps","indexPath","path","pathFromContext","readOnlyFromContext","schemaPath","siblingPermissions","readOnlyFromProps","getPreference","setPreference","preferencesKey","i18n","isWithinCollapsible","activeTabIndex","setActiveTabIndex","tabsPrefKey","getInitialPref","existingPreferences","initialIndex","fields","tabIndex","handleTabChange","incomingTabIndex","activeTabConfig","generateTabPath","tabPath","name","div","filter","Boolean","join","map","tab","isActive","parentPath","setIsActive","label","Description","components","margins","permissions","TabsField"],"mappings":"AAAA;;AAGA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,SAASC,UAAU,EAAEC,WAAW,QAAQ,iBAAgB;AACxD,OAAOC,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAE/D,SAASC,cAAc,QAAQ,yCAAwC;AACvE,SAASC,aAAa,QAAQ,0CAAyC;AACvE,SAASC,YAAY,QAAQ,oCAAmC;AAChE,SAASC,aAAa,QAAQ,qCAAoC;AAClE,SAASC,eAAe,QAAQ,wCAAuC;AACvE,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,gBAAgB,QAAQ,+BAA8B;AAC/D,SAASC,cAAc,QAAQ,qBAAoB;AACnD,SAASC,YAAY,QAAQ,iBAAgB;AAC7C,OAAO,eAAc;AACrB,SAASC,YAAY,QAAQ,gBAAe;AAE5C,MAAMC,YAAY;AAElB,SAASD,YAAY,GAAE;AAEvB,MAAME,qBAA+C,CAACC;IACpD,MAAM,EACJC,KAAK,EACLA,OAAO,EACLC,OAAOC,aAAa,EACpBC,OAAO,EAAEC,SAAS,EAAEC,UAAUC,iBAAiB,EAAE,EACjDC,OAAO,EAAE,EACV,EACDC,cAAc,KAAK,EACnBH,UAAUI,yBAAyB,EACpC,GAAGV;IAEJ,MAAM,EACJW,SAAS,EACTC,MAAMC,eAAe,EACrBP,UAAUQ,mBAAmB,EAC7BC,UAAU,EACVC,kBAAkB,EACnB,GAAG5B;IACJ,MAAM6B,oBAAoBP,6BAA6BH;IAEvD,MAAMD,WAAWW,qBAAqBH;IACtC,MAAMF,OAAOC,mBAAmBV;IAChC,MAAM,EAAEe,aAAa,EAAEC,aAAa,EAAE,GAAG3B;IACzC,MAAM,EAAE4B,cAAc,EAAE,GAAG7B;IAC3B,MAAM,EAAE8B,IAAI,EAAE,GAAG5B;IACjB,MAAM,EAAE6B,mBAAmB,EAAE,GAAGnC;IAChC,MAAM,CAACoC,gBAAgBC,kBAAkB,GAAGtC,SAAiB;IAC7D,MAAMuC,cAAc,CAAC,KAAK,EAAEd,UAAU,CAAC;IAEvC1B,UAAU;QACR,IAAImC,gBAAgB;YAClB,MAAMM,iBAAiB;gBACrB,MAAMC,sBAA2C,MAAMT,cAAcE;gBACrE,MAAMQ,eAAehB,OACjBe,qBAAqBE,QAAQ,CAACjB,KAAK,EAAEkB,WACrCH,qBAAqBE,QAAQ,CAACJ,YAAY,EAAEK;gBAChDN,kBAAkBI,gBAAgB;YACpC;YACA,KAAKF;QACP;IACF,GAAG;QAACd;QAAMM;QAAeE;QAAgBK;KAAY;IAErD,MAAMM,kBAAkB/C,YACtB,OAAOgD;QACLR,kBAAkBQ;QAElB,MAAML,sBAA2C,MAAMT,cAAcE;QAErE,IAAIA,gBAAgB;YAClB,KAAKD,cAAcC,gBAAgB;gBACjC,GAAGO,mBAAmB;gBACtB,GAAIf,OACA;oBACEiB,QAAQ;wBACN,GAAIF,qBAAqBE,UAAU,CAAC,CAAC;wBACrC,CAACjB,KAAK,EAAE;4BACN,GAAGe,qBAAqBE,QAAQ,CAACjB,KAAK;4BACtCkB,UAAUE;wBACZ;oBACF;gBACF,IACA;oBACEH,QAAQ;wBACN,GAAGF,qBAAqBE,MAAM;wBAC9B,CAACJ,YAAY,EAAE;4BACb,GAAGE,qBAAqBE,QAAQ,CAACJ,YAAY;4BAC7CK,UAAUE;wBACZ;oBACF;gBACF,CAAC;YACP;QACF;IACF,GACA;QAACZ;QAAgBF;QAAeC;QAAeP;QAAMa;KAAY;IAGnE,MAAMQ,kBAAkBzB,IAAI,CAACe,eAAe;IAE5C,SAASW;QACP,IAAIC,UAAUvB;QACd,IAAIA,QAAQ/B,WAAWoD,oBAAoBA,gBAAgBG,IAAI,EAAE;YAC/DD,UAAU,CAAC,EAAEvB,KAAK,CAAC,EAAEqB,gBAAgBG,IAAI,CAAC,CAAC;QAC7C,OAAO,IAAI,CAACxB,QAAQ/B,WAAWoD,oBAAoBA,gBAAgBG,IAAI,EAAE;YACvED,UAAUF,gBAAgBG,IAAI;QAChC;QAEA,OAAOD;IACT;IAEA,qBACE,KAACE;QACChC,WAAW;YACTV;YACAU;YACAP;YACAwB,uBAAuB,CAAC,EAAExB,UAAU,oBAAoB,CAAC;SAC1D,CACEwC,MAAM,CAACC,SACPC,IAAI,CAAC;kBAER,cAAA,MAAC3C;;8BACC,KAACwC;oBAAIhC,WAAW,CAAC,EAAEP,UAAU,WAAW,CAAC;8BACvC,cAAA,KAACuC;wBAAIhC,WAAW,CAAC,EAAEP,UAAU,MAAM,CAAC;kCACjCU,KAAKiC,GAAG,CAAC,CAACC,KAAKZ;4BACd,qBACE,KAAClC;gCACC+C,UAAUpB,mBAAmBO;gCAE7Bc,YAAYhC;gCACZiC,aAAa;oCACX,KAAKd,gBAAgBD;gCACvB;gCACAY,KAAKA;+BALAZ;wBAQX;;;8BAGJ,KAACO;oBAAIhC,WAAW,CAAC,EAAEP,UAAU,cAAc,CAAC;8BACzCmC,iCACC,MAACI;wBACChC,WAAW;4BACT,CAAC,EAAEP,UAAU,KAAK,CAAC;4BACnBmC,gBAAgBa,KAAK,IACnB,CAAC,EAAEhD,UAAU,iBAAiB,EAAEhB,YAC9BF,eAAeqD,gBAAgBa,KAAK,EAAEzB,OACtC,CAAC;yBACN,CACEiB,MAAM,CAACC,SACPC,IAAI,CAAC;;0CAER,KAAC9C;gCAAiBqD,aAAa9C,OAAOG,OAAO4C,YAAYD;;0CACzD,KAAC1D;gCACCwC,QAAQI,gBAAgBJ,MAAM;gCAC9BpB,aAAaA;gCAMbwC,SAAQ;gCACRrC,MAAMsB;gCACNgB,aACE,UAAUjB,mBAAmBjB,oBAAoB,CAACiB,gBAAgBG,IAAI,CAAC,EAAEP,SACrEb,kBAAkB,CAACiB,gBAAgBG,IAAI,CAAC,EAAEP,SAC1Cb;gCAENV,UAAUA;gCACVS,YAAY,CAAC,EAAEA,aAAa,CAAC,EAAEA,WAAW,CAAC,GAAG,GAAG,EAAElC,WAAWoD,oBAAoBA,gBAAgBG,IAAI,GAAG,CAAC,CAAC,EAAEH,gBAAgBG,IAAI,CAAC,CAAC,GAAG,GAAG,CAAC;+BAZxIH,gBAAgBa,KAAK,GACjBlE,eAAeqD,gBAAgBa,KAAK,EAAEzB,QACtCY,eAAe,CAAC,OAAO;;;;;;;AAkB7C;AAEA,OAAO,MAAMkB,YAAY7D,cAAcS,oBAAmB"}

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

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/fields/Text/Input.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAQhD,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAyG9C,CAAA"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/fields/Text/Input.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAShD,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAqG9C,CAAA"}

package/dist/fields/Text/Input.js

@@ -3,6 +3,7 @@ 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 { useTranslation } from '../../providers/Translation/index.js';
 import { FieldDescription } from '../FieldDescription/index.js';
 import { FieldError } from '../FieldError/index.js';
@@ -10,7 +11,7 @@ import { FieldLabel } from '../FieldLabel/index.js';
 import { fieldBaseClass } from '../shared/index.js';
 import './index.scss';
 export const TextInput = (props)=>{
-    const { AfterInput, BeforeInput, CustomDescription, CustomError, CustomLabel, className, descriptionProps, errorProps, hasMany, inputRef, label, labelProps, maxRows, onChange, onKeyDown, path, placeholder, readOnly, required, rtl, showError, style, value, valueToRender, width } = props;
+    const { Description, Error, Label, afterInput, beforeInput, className, description, descriptionProps, errorProps, hasMany, inputRef, label, labelProps, maxRows, onChange, onKeyDown, path, placeholder, readOnly, required, rtl, showError, style, value, valueToRender, width } = props;
     const { i18n, t } = useTranslation();
     return /*#__PURE__*/ _jsxs("div", {
         className: [
@@ -27,7 +28,7 @@ export const TextInput = (props)=>{
         },
         children: [
             /*#__PURE__*/ _jsx(FieldLabel, {
-                CustomLabel: CustomLabel,
+                Label: Label,
                 label: label,
                 required: required,
                 ...labelProps || {}
@@ -36,11 +37,13 @@ export const TextInput = (props)=>{
                 className: `${fieldBaseClass}__wrap`,
                 children: [
                     /*#__PURE__*/ _jsx(FieldError, {
-                        CustomError: CustomError,
+                        CustomError: Error,
                         path: path,
                         ...errorProps || {}
                     }),
-                    BeforeInput,
+                    /*#__PURE__*/ _jsx(RenderComponent, {
+                        mappedComponent: beforeInput
+                    }),
                     hasMany ? /*#__PURE__*/ _jsx(ReactSelect, {
                         className: `field-${path.replace(/\./g, '__')}`,
                         disabled: readOnly,
@@ -77,8 +80,12 @@ export const TextInput = (props)=>{
                         type: "text",
                         value: value || ''
                     }),
-                    AfterInput,
-                    CustomDescription !== undefined ? CustomDescription : /*#__PURE__*/ _jsx(FieldDescription, {
+                    /*#__PURE__*/ _jsx(RenderComponent, {
+                        mappedComponent: afterInput
+                    }),
+                    /*#__PURE__*/ _jsx(FieldDescription, {
+                        Description: Description,
+                        description: description,
                         ...descriptionProps || {}
                     })
                 ]

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

@@ -1 +1 @@
-{"version":3,"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 { 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    CustomDescription,\n    CustomError,\n    CustomLabel,\n    className,\n    descriptionProps,\n    errorProps,\n    hasMany,\n    inputRef,\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        CustomLabel={CustomLabel}\n        label={label}\n        required={required}\n        {...(labelProps || {})}\n      />\n      <div className={`${fieldBaseClass}__wrap`}>\n        <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />\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        {CustomDescription !== undefined ? (\n          CustomDescription\n        ) : (\n          <FieldDescription {...(descriptionProps || {})} />\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":["getTranslation","React","ReactSelect","useTranslation","FieldDescription","FieldError","FieldLabel","fieldBaseClass","TextInput","props","AfterInput","BeforeInput","CustomDescription","CustomError","CustomLabel","className","descriptionProps","errorProps","hasMany","inputRef","label","labelProps","maxRows","onChange","onKeyDown","path","placeholder","readOnly","required","rtl","showError","style","value","valueToRender","width","i18n","t","div","filter","Boolean","join","replace","disabled","filterOption","Array","isArray","length","isClearable","isCreatable","isMulti","isSortable","noOptionsMessage","isOverHasMany","max","options","input","data-rtl","id","name","ref","type","undefined"],"mappings":"AAAA;;AAGA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,WAAW,QAAO;AAIzB,SAASC,WAAW,QAAQ,sCAAqC;AACjE,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,gBAAgB,QAAQ,+BAA8B;AAC/D,SAASC,UAAU,QAAQ,yBAAwB;AACnD,SAASC,UAAU,QAAQ,yBAAwB;AACnD,SAASC,cAAc,QAAQ,qBAAoB;AACnD,OAAO,eAAc;AAErB,OAAO,MAAMC,YAAsC,CAACC;IAClD,MAAM,EACJC,UAAU,EACVC,WAAW,EACXC,iBAAiB,EACjBC,WAAW,EACXC,WAAW,EACXC,SAAS,EACTC,gBAAgB,EAChBC,UAAU,EACVC,OAAO,EACPC,QAAQ,EACRC,KAAK,EACLC,UAAU,EACVC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACTC,IAAI,EACJC,WAAW,EACXC,QAAQ,EACRC,QAAQ,EACRC,GAAG,EACHC,SAAS,EACTC,KAAK,EACLC,KAAK,EACLC,aAAa,EACbC,KAAK,EACN,GAAGzB;IAEJ,MAAM,EAAE0B,IAAI,EAAEC,CAAC,EAAE,GAAGjC;IAEpB,qBACE,MAACkC;QACCtB,WAAW;YACTR;YACA;YACAQ;YACAe,aAAa;YACbH,YAAY;YACZT,WAAW;SACZ,CACEoB,MAAM,CAACC,SACPC,IAAI,CAAC;QACRT,OAAO;YACL,GAAGA,KAAK;YACRG;QACF;;0BAEA,KAAC5B;gBACCQ,aAAaA;gBACbM,OAAOA;gBACPQ,UAAUA;gBACT,GAAIP,cAAc,CAAC,CAAC;;0BAEvB,MAACgB;gBAAItB,WAAW,CAAC,EAAER,eAAe,MAAM,CAAC;;kCACvC,KAACF;wBAAWQ,aAAaA;wBAAaY,MAAMA;wBAAO,GAAIR,cAAc,CAAC,CAAC;;oBACtEN;oBACAO,wBACC,KAAChB;wBACCa,WAAW,CAAC,MAAM,EAAEU,KAAKgB,OAAO,CAAC,OAAO,MAAM,CAAC;wBAC/CC,UAAUf;wBACV,0DAA0D;wBAC1DgB,cAAc,IACZ,CAACrB,UAAU,OAAO,CAAEsB,CAAAA,MAAMC,OAAO,CAACb,UAAUV,WAAWU,MAAMc,MAAM,IAAIxB,OAAM;wBAE/EyB,WAAW;wBACXC,WAAW;wBACXC,OAAO;wBACPC,UAAU;wBACVC,kBAAkB;4BAChB,MAAMC,gBAAgBR,MAAMC,OAAO,CAACb,UAAUA,MAAMc,MAAM,IAAIxB;4BAC9D,IAAI8B,eAAe;gCACjB,OAAOhB,EAAE,2BAA2B;oCAAEiB,KAAK/B;oCAASU,OAAOA,MAAMc,MAAM,GAAG;gCAAE;4BAC9E;4BACA,OAAO;wBACT;wBACAvB,UAAUA;wBACV+B,SAAS,EAAE;wBACX5B,aAAaU,EAAE;wBACfN,WAAWA;wBACXE,OAAOC;uCAGT,KAACsB;wBACCC,YAAU3B;wBACVa,UAAUf;wBACV8B,IAAI,CAAC,MAAM,EAAEhC,MAAMgB,QAAQ,OAAO,MAAM,CAAC;wBACzCiB,MAAMjC;wBACNF,UAAUA;wBACVC,WAAWA;wBACXE,aAAa1B,eAAe0B,aAAaS;wBACzCwB,KAAKxC;wBACLyC,MAAK;wBACL5B,OAAOA,SAAS;;oBAGnBtB;oBACAE,sBAAsBiD,YACrBjD,kCAEA,KAACR;wBAAkB,GAAIY,oBAAoB,CAAC,CAAC;;;;;;AAKvD,EAAC"}
+{"version":3,"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    Description,\n    Error,\n    Label,\n    afterInput,\n    beforeInput,\n    className,\n    description,\n    descriptionProps,\n    errorProps,\n    hasMany,\n    inputRef,\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 Label={Label} label={label} required={required} {...(labelProps || {})} />\n      <div className={`${fieldBaseClass}__wrap`}>\n        <FieldError CustomError={Error} 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          {...(descriptionProps || {})}\n        />\n      </div>\n    </div>\n  )\n}\n"],"names":["getTranslation","React","ReactSelect","RenderComponent","useTranslation","FieldDescription","FieldError","FieldLabel","fieldBaseClass","TextInput","props","Description","Error","Label","afterInput","beforeInput","className","description","descriptionProps","errorProps","hasMany","inputRef","label","labelProps","maxRows","onChange","onKeyDown","path","placeholder","readOnly","required","rtl","showError","style","value","valueToRender","width","i18n","t","div","filter","Boolean","join","CustomError","mappedComponent","replace","disabled","filterOption","Array","isArray","length","isClearable","isCreatable","isMulti","isSortable","noOptionsMessage","isOverHasMany","max","options","input","data-rtl","id","name","ref","type"],"mappings":"AAAA;;AAGA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,WAAW,QAAO;AAIzB,SAASC,WAAW,QAAQ,sCAAqC;AACjE,SAASC,eAAe,QAAQ,4CAA2C;AAC3E,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,gBAAgB,QAAQ,+BAA8B;AAC/D,SAASC,UAAU,QAAQ,yBAAwB;AACnD,SAASC,UAAU,QAAQ,yBAAwB;AACnD,SAASC,cAAc,QAAQ,qBAAoB;AACnD,OAAO,eAAc;AAErB,OAAO,MAAMC,YAAsC,CAACC;IAClD,MAAM,EACJC,WAAW,EACXC,KAAK,EACLC,KAAK,EACLC,UAAU,EACVC,WAAW,EACXC,SAAS,EACTC,WAAW,EACXC,gBAAgB,EAChBC,UAAU,EACVC,OAAO,EACPC,QAAQ,EACRC,KAAK,EACLC,UAAU,EACVC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACTC,IAAI,EACJC,WAAW,EACXC,QAAQ,EACRC,QAAQ,EACRC,GAAG,EACHC,SAAS,EACTC,KAAK,EACLC,KAAK,EACLC,aAAa,EACbC,KAAK,EACN,GAAG1B;IAEJ,MAAM,EAAE2B,IAAI,EAAEC,CAAC,EAAE,GAAGlC;IAEpB,qBACE,MAACmC;QACCvB,WAAW;YACTR;YACA;YACAQ;YACAgB,aAAa;YACbH,YAAY;YACZT,WAAW;SACZ,CACEoB,MAAM,CAACC,SACPC,IAAI,CAAC;QACRT,OAAO;YACL,GAAGA,KAAK;YACRG;QACF;;0BAEA,KAAC7B;gBAAWM,OAAOA;gBAAOS,OAAOA;gBAAOQ,UAAUA;gBAAW,GAAIP,cAAc,CAAC,CAAC;;0BACjF,MAACgB;gBAAIvB,WAAW,CAAC,EAAER,eAAe,MAAM,CAAC;;kCACvC,KAACF;wBAAWqC,aAAa/B;wBAAOe,MAAMA;wBAAO,GAAIR,cAAc,CAAC,CAAC;;kCACjE,KAAChB;wBAAgByC,iBAAiB7B;;oBACjCK,wBACC,KAAClB;wBACCc,WAAW,CAAC,MAAM,EAAEW,KAAKkB,OAAO,CAAC,OAAO,MAAM,CAAC;wBAC/CC,UAAUjB;wBACV,0DAA0D;wBAC1DkB,cAAc,IACZ,CAACvB,UAAU,OAAO,CAAEwB,CAAAA,MAAMC,OAAO,CAACf,UAAUV,WAAWU,MAAMgB,MAAM,IAAI1B,OAAM;wBAE/E2B,WAAW;wBACXC,WAAW;wBACXC,OAAO;wBACPC,UAAU;wBACVC,kBAAkB;4BAChB,MAAMC,gBAAgBR,MAAMC,OAAO,CAACf,UAAUA,MAAMgB,MAAM,IAAI1B;4BAC9D,IAAIgC,eAAe;gCACjB,OAAOlB,EAAE,2BAA2B;oCAAEmB,KAAKjC;oCAASU,OAAOA,MAAMgB,MAAM,GAAG;gCAAE;4BAC9E;4BACA,OAAO;wBACT;wBACAzB,UAAUA;wBACViC,SAAS,EAAE;wBACX9B,aAAaU,EAAE;wBACfN,WAAWA;wBACXE,OAAOC;uCAGT,KAACwB;wBACCC,YAAU7B;wBACVe,UAAUjB;wBACVgC,IAAI,CAAC,MAAM,EAAElC,MAAMkB,QAAQ,OAAO,MAAM,CAAC;wBACzCiB,MAAMnC;wBACNF,UAAUA;wBACVC,WAAWA;wBACXE,aAAa5B,eAAe4B,aAAaS;wBACzC0B,KAAK1C;wBACL2C,MAAK;wBACL9B,OAAOA,SAAS;;kCAGpB,KAAC/B;wBAAgByC,iBAAiB9B;;kCAClC,KAACT;wBACCM,aAAaA;wBACbM,aAAaA;wBACZ,GAAIC,oBAAoB,CAAC,CAAC;;;;;;AAKrC,EAAC"}

package/dist/fields/Text/index.js

@@ -11,9 +11,10 @@ import { TextInput } from './Input.js';
 import './index.scss';
 export { TextInput };
 const TextFieldComponent = (props)=>{
-    const { name, AfterInput, BeforeInput, CustomDescription, CustomError, CustomLabel, className, descriptionProps, errorProps, hasMany, inputRef, label, labelProps, localized, maxLength, maxRows, minLength, minRows, path: pathFromProps, placeholder, readOnly: readOnlyFromProps, required, rtl, style, validate, width } = props;
+    const { field, field: { name, _path: pathFromProps, admin: { className, description, placeholder, readOnly: readOnlyFromAdmin, rtl, style, width }, hasMany, label, localized, maxLength, maxRows, minLength, minRows, required }, inputRef, readOnly: readOnlyFromTopLevelProps, validate } = props;
+    const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin;
     const locale = useLocale();
-    const { localization: localizationConfig } = useConfig();
+    const { config: { localization: localizationConfig } } = useConfig();
     const memoizedValidate = useCallback((value, options)=>{
         if (typeof validate === 'function') return validate(value, {
             ...options,
@@ -79,18 +80,16 @@ const TextFieldComponent = (props)=>{
         hasMany
     ]);
     return /*#__PURE__*/ _jsx(TextInput, {
-        AfterInput: AfterInput,
-        BeforeInput: BeforeInput,
-        CustomDescription: CustomDescription,
-        CustomError: CustomError,
-        CustomLabel: CustomLabel,
+        Description: field?.admin?.components?.Description,
+        Error: field?.admin?.components?.Error,
+        Label: field?.admin?.components?.Label,
+        afterInput: field?.admin?.components?.afterInput,
+        beforeInput: field?.admin?.components?.beforeInput,
         className: className,
-        descriptionProps: descriptionProps,
-        errorProps: errorProps,
+        description: description,
         hasMany: hasMany,
         inputRef: inputRef,
         label: label,
-        labelProps: labelProps,
         maxRows: maxRows,
         minRows: minRows,
         onChange: hasMany ? handleHasManyChange : (e)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/Text/index.tsx"],"sourcesContent":["'use client'\nimport type { TextFieldProps } 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 { TextInput } from './Input.js'\nimport './index.scss'\n\nexport { TextInput, TextInputProps }\n\nconst TextFieldComponent: React.FC<TextFieldProps> = (props) => {\n  const {\n    name,\n    AfterInput,\n    BeforeInput,\n    CustomDescription,\n    CustomError,\n    CustomLabel,\n    className,\n    descriptionProps,\n    errorProps,\n    hasMany,\n    inputRef,\n    label,\n    labelProps,\n    localized,\n    maxLength,\n    maxRows,\n    minLength,\n    minRows,\n    path: pathFromProps,\n    placeholder,\n    readOnly: readOnlyFromProps,\n    required,\n    rtl,\n    style,\n    validate,\n    width,\n  } = props\n\n  const locale = useLocale()\n\n  const { localization: localizationConfig } = useConfig()\n\n  const memoizedValidate = useCallback(\n    (value, options) => {\n      if (typeof validate === 'function')\n        return validate(value, { ...options, maxLength, minLength, required })\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={AfterInput}\n      BeforeInput={BeforeInput}\n      CustomDescription={CustomDescription}\n      CustomError={CustomError}\n      CustomLabel={CustomLabel}\n      className={className}\n      descriptionProps={descriptionProps}\n      errorProps={errorProps}\n      hasMany={hasMany}\n      inputRef={inputRef}\n      label={label}\n      labelProps={labelProps}\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"],"names":["React","useCallback","useEffect","useState","useFieldProps","useField","withCondition","useConfig","useLocale","isFieldRTL","TextInput","TextFieldComponent","props","name","AfterInput","BeforeInput","CustomDescription","CustomError","CustomLabel","className","descriptionProps","errorProps","hasMany","inputRef","label","labelProps","localized","maxLength","maxRows","minLength","minRows","path","pathFromProps","placeholder","readOnly","readOnlyFromProps","required","rtl","style","validate","width","locale","localization","localizationConfig","memoizedValidate","value","options","pathFromContext","readOnlyFromContext","formInitializing","formProcessing","setValue","showError","disabled","renderRTL","fieldLocalized","fieldRTL","undefined","valueToRender","setValueToRender","handleHasManyChange","selectedOption","newValue","Array","isArray","map","option","val","index","id","toString","onChange","e","target","TextField"],"mappings":"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"}
+{"version":3,"sources":["../../../src/fields/Text/index.tsx"],"sourcesContent":["'use client'\nimport type { TextFieldProps } 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 { TextInput } from './Input.js'\nimport './index.scss'\n\nexport { TextInput, TextInputProps }\n\nconst TextFieldComponent: React.FC<TextFieldProps> = (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      label,\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    [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      Description={field?.admin?.components?.Description}\n      Error={field?.admin?.components?.Error}\n      Label={field?.admin?.components?.Label}\n      afterInput={field?.admin?.components?.afterInput}\n      beforeInput={field?.admin?.components?.beforeInput}\n      className={className}\n      description={description}\n      hasMany={hasMany}\n      inputRef={inputRef}\n      label={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"],"names":["React","useCallback","useEffect","useState","useFieldProps","useField","withCondition","useConfig","useLocale","isFieldRTL","TextInput","TextFieldComponent","props","field","name","_path","pathFromProps","admin","className","description","placeholder","readOnly","readOnlyFromAdmin","rtl","style","width","hasMany","label","localized","maxLength","maxRows","minLength","minRows","required","inputRef","readOnlyFromTopLevelProps","validate","readOnlyFromProps","locale","config","localization","localizationConfig","memoizedValidate","value","options","path","pathFromContext","readOnlyFromContext","formInitializing","formProcessing","setValue","showError","disabled","renderRTL","fieldLocalized","fieldRTL","undefined","valueToRender","setValueToRender","handleHasManyChange","selectedOption","newValue","Array","isArray","map","option","val","index","id","toString","Description","components","Error","Label","afterInput","beforeInput","onChange","e","target","TextField"],"mappings":"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"}

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

@@ -1,20 +1,39 @@
-import type { TextFieldProps } from 'payload';
+import type { MappedComponent, StaticDescription, StaticLabel } from 'payload';
 import type { ChangeEvent } from 'react';
+import type React from 'react';
 import type { Option, ReactSelectAdapterProps } from '../../elements/ReactSelect/types.js';
 export type SharedTextFieldProps = {
-    hasMany?: false;
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    readonly hasMany?: false;
+    readonly onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 } | {
-    hasMany?: true;
-    onChange?: ReactSelectAdapterProps['onChange'];
+    readonly hasMany?: true;
+    readonly onChange?: ReactSelectAdapterProps['onChange'];
 };
 export type TextInputProps = {
-    inputRef?: React.MutableRefObject<HTMLInputElement>;
-    maxRows?: number;
-    minRows?: number;
-    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
-    showError?: boolean;
-    value?: string;
-    valueToRender?: Option[];
-} & Omit<TextFieldProps, 'type'> & SharedTextFieldProps;
+    readonly Description?: MappedComponent;
+    readonly Error?: MappedComponent;
+    readonly Label?: MappedComponent;
+    readonly afterInput?: MappedComponent[];
+    readonly beforeInput?: MappedComponent[];
+    readonly className?: string;
+    readonly description?: StaticDescription;
+    readonly descriptionProps?: Record<string, unknown>;
+    readonly errorProps?: Record<string, unknown>;
+    readonly inputRef?: React.RefObject<HTMLInputElement>;
+    readonly label: StaticLabel;
+    readonly labelProps?: Record<string, unknown>;
+    readonly maxRows?: number;
+    readonly minRows?: number;
+    readonly onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+    readonly path: string;
+    readonly placeholder?: Record<string, string> | string;
+    readonly readOnly?: boolean;
+    readonly required?: boolean;
+    readonly rtl?: boolean;
+    readonly showError?: boolean;
+    readonly style?: React.CSSProperties;
+    readonly value?: string;
+    readonly valueToRender?: Option[];
+    readonly width?: string;
+} & SharedTextFieldProps;
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/fields/Text/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAC7C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAExC,OAAO,KAAK,EAAE,MAAM,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAA;AAE1F,MAAM,MAAM,oBAAoB,GAC5B;IACE,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;CACtD,GACD;IACE,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,QAAQ,CAAC,EAAE,uBAAuB,CAAC,UAAU,CAAC,CAAA;CAC/C,CAAA;AAEL,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAA;IACnD,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAA;IACxD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;CACzB,GAAG,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,GAC9B,oBAAoB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/fields/Text/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAC9E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,MAAM,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAA;AAE1F,MAAM,MAAM,oBAAoB,GAC5B;IACE,QAAQ,CAAC,OAAO,CAAC,EAAE,KAAK,CAAA;IACxB,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;CAC/D,GACD;IACE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAA;IACvB,QAAQ,CAAC,QAAQ,CAAC,EAAE,uBAAuB,CAAC,UAAU,CAAC,CAAA;CACxD,CAAA;AAEL,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,WAAW,CAAC,EAAE,eAAe,CAAA;IACtC,QAAQ,CAAC,KAAK,CAAC,EAAE,eAAe,CAAA;IAChC,QAAQ,CAAC,KAAK,CAAC,EAAE,eAAe,CAAA;IAChC,QAAQ,CAAC,UAAU,CAAC,EAAE,eAAe,EAAE,CAAA;IACvC,QAAQ,CAAC,WAAW,CAAC,EAAE,eAAe,EAAE,CAAA;IACxC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,WAAW,CAAC,EAAE,iBAAiB,CAAA;IACxC,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACnD,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC7C,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;IACrD,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAA;IAC3B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC7C,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAA;IACjE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IACtD,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,GAAG,CAAC,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACpC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACjC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CACxB,GAAG,oBAAoB,CAAA"}