@payloadcms/ui 3.0.0-beta.127 → 3.0.0-beta.129

package/dist/fields/Select/Input.js

@@ -5,36 +5,32 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import React from 'react';
 import { ReactSelect } from '../../elements/ReactSelect/index.js';
-import { RenderComponent } from '../../providers/Config/RenderComponent.js';
+import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
+import { FieldDescription } from '../../fields/FieldDescription/index.js';
+import { FieldError } from '../../fields/FieldError/index.js';
+import { FieldLabel } from '../../fields/FieldLabel/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
-import { FieldDescription } from '../FieldDescription/index.js';
-import { FieldError } from '../FieldError/index.js';
-import { FieldLabel } from '../FieldLabel/index.js';
 import { fieldBaseClass } from '../shared/index.js';
 import './index.scss';
 export const SelectInput = props => {
-  const $ = _c(48);
+  const $ = _c(38);
   const {
-    afterInput,
-    beforeInput,
+    AfterInput,
+    BeforeInput,
     className,
     Description,
     description,
-    descriptionProps,
     Error,
-    errorProps,
-    field,
     hasMany: t0,
     isClearable: t1,
     isSortable: t2,
-    Label,
     label,
-    labelProps,
+    Label,
+    localized,
     onChange,
     options,
     path,
     readOnly,
-    required,
     showError,
     style,
     value,
@@ -47,11 +43,11 @@ export const SelectInput = props => {
     i18n
   } = useTranslation();
   let t3;
-  if ($[0] !== hasMany || $[1] !== value || $[2] !== options || $[3] !== i18n || $[4] !== showError || $[5] !== readOnly || $[6] !== className || $[7] !== path || $[8] !== style || $[9] !== width || $[10] !== labelProps || $[11] !== field || $[12] !== Label || $[13] !== label || $[14] !== required || $[15] !== errorProps || $[16] !== Error || $[17] !== beforeInput || $[18] !== isClearable || $[19] !== isSortable || $[20] !== onChange || $[21] !== afterInput || $[22] !== descriptionProps || $[23] !== Description || $[24] !== description) {
+  if ($[0] !== hasMany || $[1] !== value || $[2] !== options || $[3] !== i18n || $[4] !== showError || $[5] !== readOnly || $[6] !== className || $[7] !== path || $[8] !== style || $[9] !== width || $[10] !== label || $[11] !== localized || $[12] !== Label || $[13] !== Error || $[14] !== isClearable || $[15] !== isSortable || $[16] !== onChange || $[17] !== BeforeInput || $[18] !== AfterInput || $[19] !== description || $[20] !== Description) {
     let valueToRender;
     if (hasMany && Array.isArray(value)) {
       let t4;
-      if ($[26] !== options || $[27] !== i18n) {
+      if ($[22] !== options || $[23] !== i18n) {
         t4 = val => {
           const matchingOption = options.find(option => option.value === val);
           return {
@@ -59,36 +55,36 @@ export const SelectInput = props => {
             value: matchingOption?.value ?? val
           };
         };
-        $[26] = options;
-        $[27] = i18n;
-        $[28] = t4;
+        $[22] = options;
+        $[23] = i18n;
+        $[24] = t4;
       } else {
-        t4 = $[28];
+        t4 = $[24];
       }
       valueToRender = value.map(t4);
     } else {
       if (value) {
         let matchingOption_0;
         let t4;
-        if ($[29] !== value || $[30] !== options || $[31] !== i18n) {
+        if ($[25] !== value || $[26] !== options || $[27] !== i18n) {
           let t5;
-          if ($[34] !== value) {
+          if ($[30] !== value) {
             t5 = option_0 => option_0.value === value;
-            $[34] = value;
-            $[35] = t5;
+            $[30] = value;
+            $[31] = t5;
           } else {
-            t5 = $[35];
+            t5 = $[31];
           }
           matchingOption_0 = options.find(t5);
           t4 = matchingOption_0 ? getTranslation(matchingOption_0.label, i18n) : value;
-          $[29] = value;
-          $[30] = options;
-          $[31] = i18n;
-          $[32] = matchingOption_0;
-          $[33] = t4;
+          $[25] = value;
+          $[26] = options;
+          $[27] = i18n;
+          $[28] = matchingOption_0;
+          $[29] = t4;
         } else {
-          matchingOption_0 = $[32];
-          t4 = $[33];
+          matchingOption_0 = $[28];
+          t4 = $[29];
         }
         valueToRender = {
           label: t4,
@@ -99,49 +95,25 @@ export const SelectInput = props => {
     const t4 = showError && "error";
     const t5 = readOnly && "read-only";
     let t6;
-    if ($[36] !== className || $[37] !== t4 || $[38] !== t5) {
+    if ($[32] !== className || $[33] !== t4 || $[34] !== t5) {
       t6 = [fieldBaseClass, "select", className, t4, t5].filter(Boolean);
-      $[36] = className;
-      $[37] = t4;
-      $[38] = t5;
-      $[39] = t6;
+      $[32] = className;
+      $[33] = t4;
+      $[34] = t5;
+      $[35] = t6;
     } else {
-      t6 = $[39];
+      t6 = $[35];
     }
     let t7;
-    if ($[40] !== labelProps) {
-      t7 = labelProps || {};
-      $[40] = labelProps;
-      $[41] = t7;
-    } else {
-      t7 = $[41];
-    }
-    let t8;
-    if ($[42] !== errorProps) {
-      t8 = errorProps || {};
-      $[42] = errorProps;
-      $[43] = t8;
-    } else {
-      t8 = $[43];
-    }
-    let t9;
-    if ($[44] !== i18n) {
-      t9 = option_1 => ({
+    if ($[36] !== i18n) {
+      t7 = option_1 => ({
         ...option_1,
         label: getTranslation(option_1.label, i18n)
       });
-      $[44] = i18n;
-      $[45] = t9;
-    } else {
-      t9 = $[45];
-    }
-    let t10;
-    if ($[46] !== descriptionProps) {
-      t10 = descriptionProps || {};
-      $[46] = descriptionProps;
-      $[47] = t10;
+      $[36] = i18n;
+      $[37] = t7;
     } else {
-      t10 = $[47];
+      t7 = $[37];
     }
     t3 = _jsxs("div", {
       className: t6.join(" "),
@@ -150,38 +122,38 @@ export const SelectInput = props => {
         ...style,
         width
       },
-      children: [_jsx(FieldLabel, {
-        field,
-        Label,
-        label,
-        required,
-        ...t7
+      children: [_jsx(RenderCustomComponent, {
+        CustomComponent: Label,
+        Fallback: _jsx(FieldLabel, {
+          label,
+          localized,
+          path,
+          required: false
+        })
       }), _jsxs("div", {
         className: `${fieldBaseClass}__wrap`,
-        children: [_jsx(FieldError, {
-          CustomError: Error,
-          field,
-          path,
-          ...t8
-        }), _jsx(RenderComponent, {
-          mappedComponent: beforeInput
-        }), _jsx(ReactSelect, {
+        children: [_jsx(RenderCustomComponent, {
+          CustomComponent: Error,
+          Fallback: _jsx(FieldError, {
+            path,
+            showError
+          })
+        }), BeforeInput, _jsx(ReactSelect, {
           disabled: readOnly,
           isClearable,
           isMulti: hasMany,
           isSortable,
           onChange,
-          options: options.map(t9),
+          options: options.map(t7),
           showError,
           value: valueToRender
-        }), _jsx(RenderComponent, {
-          mappedComponent: afterInput
-        })]
-      }), _jsx(FieldDescription, {
-        Description,
-        description,
-        field,
-        ...t10
+        }), AfterInput]
+      }), _jsx(RenderCustomComponent, {
+        CustomComponent: Description,
+        Fallback: _jsx(FieldDescription, {
+          description,
+          path
+        })
       })]
     });
     $[0] = hasMany;
@@ -194,24 +166,20 @@ export const SelectInput = props => {
     $[7] = path;
     $[8] = style;
     $[9] = width;
-    $[10] = labelProps;
-    $[11] = field;
+    $[10] = label;
+    $[11] = localized;
     $[12] = Label;
-    $[13] = label;
-    $[14] = required;
-    $[15] = errorProps;
-    $[16] = Error;
-    $[17] = beforeInput;
-    $[18] = isClearable;
-    $[19] = isSortable;
-    $[20] = onChange;
-    $[21] = afterInput;
-    $[22] = descriptionProps;
-    $[23] = Description;
-    $[24] = description;
-    $[25] = t3;
+    $[13] = Error;
+    $[14] = isClearable;
+    $[15] = isSortable;
+    $[16] = onChange;
+    $[17] = BeforeInput;
+    $[18] = AfterInput;
+    $[19] = description;
+    $[20] = Description;
+    $[21] = t3;
   } else {
-    t3 = $[25];
+    t3 = $[21];
   }
   return t3;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["c","_c","getTranslation","React","ReactSelect","RenderComponent","useTranslation","FieldDescription","FieldError","FieldLabel","fieldBaseClass","SelectInput","props","$","afterInput","beforeInput","className","Description","description","descriptionProps","Error","errorProps","field","hasMany","t0","isClearable","t1","isSortable","t2","Label","label","labelProps","onChange","options","path","readOnly","required","showError","style","value","width","undefined","i18n","t3","valueToRender","Array","isArray","t4","val","matchingOption","find","option","map","matchingOption_0","t5","option_0","t6","filter","Boolean","t7","t8","t9","option_1","t10","_jsxs","join","id","replace","children","_jsx","CustomError","mappedComponent","disabled","isMulti"],"sources":["../../../src/fields/Select/Input.tsx"],"sourcesContent":["'use client'\nimport type {\n  MappedComponent,\n  OptionObject,\n  SelectFieldClient,\n  StaticDescription,\n  StaticLabel,\n} from 'payload'\nimport type { MarkOptional } from 'ts-essentials'\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 afterInput?: MappedComponent[]\n  readonly beforeInput?: MappedComponent[]\n  readonly className?: string\n  readonly Description?: MappedComponent\n  readonly description?: StaticDescription\n  readonly descriptionProps?: Record<string, unknown>\n  readonly Error?: MappedComponent\n  readonly errorProps?: Record<string, unknown>\n  readonly field?: MarkOptional<SelectFieldClient, 'type'>\n  readonly hasMany?: boolean\n  readonly isClearable?: boolean\n  readonly isSortable?: boolean\n  readonly Label?: MappedComponent\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?: React.CSSProperties['width']\n}\n\nexport const SelectInput: React.FC<SelectInputProps> = (props) => {\n  const {\n    afterInput,\n    beforeInput,\n    className,\n    Description,\n    description,\n    descriptionProps,\n    Error,\n    errorProps,\n    field,\n    hasMany = false,\n    isClearable = true,\n    isSortable = true,\n    Label,\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        field={field}\n        Label={Label}\n        label={label}\n        required={required}\n        {...(labelProps || {})}\n      />\n      <div className={`${fieldBaseClass}__wrap`}>\n        <FieldError CustomError={Error} field={field} path={path} {...(errorProps || {})} />\n        <RenderComponent mappedComponent={beforeInput} />\n        <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        field={field}\n        {...(descriptionProps || {})}\n      />\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Input.js","names":["c","_c","getTranslation","React","ReactSelect","RenderCustomComponent","FieldDescription","FieldError","FieldLabel","useTranslation","fieldBaseClass","SelectInput","props","$","AfterInput","BeforeInput","className","Description","description","Error","hasMany","t0","isClearable","t1","isSortable","t2","label","Label","localized","onChange","options","path","readOnly","showError","style","value","width","undefined","i18n","t3","valueToRender","Array","isArray","t4","val","matchingOption","find","option","map","matchingOption_0","t5","option_0","t6","filter","Boolean","t7","option_1","_jsxs","join","id","replace","children","_jsx","CustomComponent","Fallback","required","disabled","isMulti"],"sources":["../../../src/fields/Select/Input.tsx"],"sourcesContent":["'use client'\nimport type { 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 { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { FieldDescription } from '../../fields/FieldDescription/index.js'\nimport { FieldError } from '../../fields/FieldError/index.js'\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.scss'\n\nexport type SelectInputProps = {\n  readonly AfterInput?: React.ReactNode\n  readonly BeforeInput?: React.ReactNode\n  readonly className?: string\n  readonly Description?: React.ReactNode\n  readonly description?: StaticDescription\n  readonly Error?: React.ReactNode\n  readonly hasMany?: boolean\n  readonly isClearable?: boolean\n  readonly isSortable?: boolean\n  readonly Label?: React.ReactNode\n  readonly label?: StaticLabel\n  readonly localized?: boolean\n  readonly name: string\n  readonly onChange?: ReactSelectAdapterProps['onChange']\n  readonly options?: OptionObject[]\n  readonly path: string\n  readonly readOnly?: boolean\n  readonly showError?: boolean\n  readonly style?: React.CSSProperties\n  readonly value?: string | string[]\n  readonly width?: React.CSSProperties['width']\n}\n\nexport const SelectInput: React.FC<SelectInputProps> = (props) => {\n  const {\n    AfterInput,\n    BeforeInput,\n    className,\n    Description,\n    description,\n    Error,\n    hasMany = false,\n    isClearable = true,\n    isSortable = true,\n    label,\n    Label,\n    localized,\n    onChange,\n    options,\n    path,\n    readOnly,\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      <RenderCustomComponent\n        CustomComponent={Label}\n        Fallback={<FieldLabel label={label} localized={localized} path={path} required={false} />}\n      />\n      <div className={`${fieldBaseClass}__wrap`}>\n        <RenderCustomComponent\n          CustomComponent={Error}\n          Fallback={<FieldError path={path} showError={showError} />}\n        />\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      <RenderCustomComponent\n        CustomComponent={Description}\n        Fallback={<FieldDescription description={description} path={path} />}\n      />\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -3,13 +3,11 @@ import type { SelectInputProps } from './Input.js';
 import { SelectInput } from './Input.js';
 export declare const SelectField: React.FC<{
     readonly onChange?: (e: string | string[]) => void;
+    readonly path?: string;
     readonly validate?: import("payload").SelectFieldValidation;
     readonly value?: string;
 } & {
-    readonly descriptionProps?: import("payload").FieldDescriptionClientProps<Omit<import("payload").SelectFieldClient, "type"> & Partial<Pick<import("payload").SelectFieldClient, "type">>>;
-    readonly errorProps?: import("payload").FieldErrorClientProps<Omit<import("payload").SelectFieldClient, "type"> & Partial<Pick<import("payload").SelectFieldClient, "type">>>;
     readonly field: Omit<import("payload").SelectFieldClient, "type"> & Partial<Pick<import("payload").SelectFieldClient, "type">>;
-    readonly labelProps?: import("payload").FieldLabelClientProps<Omit<import("payload").SelectFieldClient, "type"> & Partial<Pick<import("payload").SelectFieldClient, "type">>>;
-} & import("payload").FormFieldBase>;
+} & Omit<import("payload").ClientComponentProps, "field" | "customComponents">>;
 export { SelectInput, type SelectInputProps };
 //# sourceMappingURL=index.d.ts.map

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":"AAQA,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;;;;;;;;;oCAAsC,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":"AAQA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAG1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAIlD,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AA+GxC,eAAO,MAAM,WAAW;;;;;;;+EAAsC,CAAA;AAE9D,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,CAAA"}

package/dist/fields/Select/index.js

@@ -2,7 +2,6 @@
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useCallback } from 'react';
-import { useFieldProps } from '../../forms/FieldPropsProvider/index.js';
 import { useField } from '../../forms/useField/index.js';
 import { withCondition } from '../../forms/withCondition/index.js';
 import { SelectInput } from './Input.js';
@@ -17,28 +16,28 @@ const formatOptions = options => options.map(option => {
 });
 const SelectFieldComponent = props => {
   const {
-    field,
     field: {
       name,
-      _path: pathFromProps,
       admin: {
         className,
         description,
         isClearable = true,
         isSortable = true,
-        readOnly: readOnlyFromAdmin,
         style,
         width
       } = {},
       hasMany = false,
+      label,
+      localized,
       options: optionsFromProps = [],
       required
     },
     onChange: onChangeFromProps,
-    readOnly: readOnlyFromTopLevelProps,
+    path: pathFromProps,
+    readOnly,
     validate
   } = props;
-  const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin;
+  const path = pathFromProps ?? name;
   const options = React.useMemo(() => formatOptions(optionsFromProps), [optionsFromProps]);
   const memoizedValidate = useCallback((value, validationOptions) => {
     if (typeof validate === 'function') {
@@ -51,23 +50,22 @@ const SelectFieldComponent = props => {
     }
   }, [validate, required, hasMany, options]);
   const {
-    path: pathFromContext,
-    readOnly: readOnlyFromContext
-  } = useFieldProps();
-  const {
-    formInitializing,
-    formProcessing,
-    path,
+    customComponents: {
+      AfterInput,
+      BeforeInput,
+      Description,
+      Error,
+      Label
+    } = {},
     setValue,
     showError,
     value: value_0
   } = useField({
-    path: pathFromContext ?? pathFromProps ?? name,
+    path,
     validate: memoizedValidate
   });
-  const disabled = readOnlyFromProps || readOnlyFromContext || formProcessing || formInitializing;
   const onChange = useCallback(selectedOption => {
-    if (!disabled) {
+    if (!readOnly) {
       let newValue = null;
       if (selectedOption && hasMany) {
         if (Array.isArray(selectedOption)) {
@@ -83,25 +81,25 @@ const SelectFieldComponent = props => {
       }
       setValue(newValue);
     }
-  }, [disabled, hasMany, setValue, onChangeFromProps]);
+  }, [readOnly, hasMany, setValue, onChangeFromProps]);
   return /*#__PURE__*/_jsx(SelectInput, {
-    afterInput: field?.admin?.components?.afterInput,
-    beforeInput: field?.admin?.components?.beforeInput,
+    AfterInput: AfterInput,
+    BeforeInput: BeforeInput,
     className: className,
-    Description: field?.admin?.components?.Description,
+    Description: Description,
     description: description,
-    Error: field?.admin?.components?.Error,
-    field: field,
+    Error: Error,
     hasMany: hasMany,
     isClearable: isClearable,
     isSortable: isSortable,
-    Label: field?.admin?.components?.Label,
+    Label: Label,
+    label: label,
+    localized: localized,
     name: name,
     onChange: onChange,
     options: options,
     path: path,
-    readOnly: disabled,
-    required: required,
+    readOnly: readOnly,
     showError: showError,
     style: style,
     value: value_0,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","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","_jsx","afterInput","components","beforeInput","Description","Error","Label","SelectField"],"sources":["../../../src/fields/Select/index.tsx"],"sourcesContent":["'use client'\nimport type {\n  Option,\n  OptionObject,\n  SelectFieldClientComponent,\n  SelectFieldClientProps,\n} 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: SelectFieldClientComponent = (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 SelectFieldClientProps['field']['admin'],\n      hasMany = false,\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    },\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={field?.admin?.components?.afterInput}\n      beforeInput={field?.admin?.components?.beforeInput}\n      className={className}\n      Description={field?.admin?.components?.Description}\n      description={description}\n      Error={field?.admin?.components?.Error}\n      field={field}\n      hasMany={hasMany}\n      isClearable={isClearable}\n      isSortable={isSortable}\n      Label={field?.admin?.components?.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"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","useField","withCondition","SelectInput","formatOptions","options","map","option","value","label","SelectFieldComponent","props","field","name","admin","className","description","isClearable","isSortable","style","width","hasMany","localized","optionsFromProps","required","onChange","onChangeFromProps","path","pathFromProps","readOnly","validate","useMemo","memoizedValidate","validationOptions","customComponents","AfterInput","BeforeInput","Description","Error","Label","setValue","showError","selectedOption","newValue","Array","isArray","_jsx","SelectField"],"sources":["../../../src/fields/Select/index.tsx"],"sourcesContent":["'use client'\nimport type {\n  Option,\n  OptionObject,\n  SelectFieldClientComponent,\n  SelectFieldClientProps,\n} 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 { 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: SelectFieldClientComponent = (props) => {\n  const {\n    field: {\n      name,\n      admin: {\n        className,\n        description,\n        isClearable = true,\n        isSortable = true,\n        style,\n        width,\n      } = {} as SelectFieldClientProps['field']['admin'],\n      hasMany = false,\n      label,\n      localized,\n      options: optionsFromProps = [],\n      required,\n    },\n    onChange: onChangeFromProps,\n    path: pathFromProps,\n    readOnly,\n    validate,\n  } = props\n  const path = pathFromProps ?? name\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    },\n    [validate, required, hasMany, options],\n  )\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    setValue,\n    showError,\n    value,\n  } = useField({\n    path,\n    validate: memoizedValidate,\n  })\n\n  const onChange: ReactSelectAdapterProps['onChange'] = useCallback(\n    (selectedOption: OptionObject | OptionObject[]) => {\n      if (!readOnly) {\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    [readOnly, hasMany, setValue, onChangeFromProps],\n  )\n\n  return (\n    <SelectInput\n      AfterInput={AfterInput}\n      BeforeInput={BeforeInput}\n      className={className}\n      Description={Description}\n      description={description}\n      Error={Error}\n      hasMany={hasMany}\n      isClearable={isClearable}\n      isSortable={isSortable}\n      Label={Label}\n      label={label}\n      localized={localized}\n      name={name}\n      onChange={onChange}\n      options={options}\n      path={path}\n      readOnly={readOnly}\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"],"mappings":"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","ignoreList":[]}

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":"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"}
+{"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,CA8B3C,CAAA"}

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

@@ -11,7 +11,7 @@ import { useTranslation } from '../../../providers/Translation/index.js';
 import './index.scss';
 const baseClass = 'tabs-field__tab-button';
 export const TabComponent = t0 => {
-  const $ = _c(14);
+  const $ = _c(21);
   const {
     isActive,
     parentPath,
@@ -22,57 +22,82 @@ export const TabComponent = t0 => {
     i18n
   } = useTranslation();
   const [errorCount, setErrorCount] = useState(undefined);
-  const path = `${parentPath ? `${parentPath}.` : ""}${tabHasName(tab) ? tab.name : ""}`;
-  const fieldHasErrors = errorCount > 0;
   let t1;
-  if ($[0] !== tab || $[1] !== path || $[2] !== fieldHasErrors || $[3] !== isActive || $[4] !== i18n || $[5] !== errorCount || $[6] !== setIsActive) {
-    const t2 = _jsx(WatchChildErrors, {
+  if ($[0] !== parentPath) {
+    t1 = parentPath ? parentPath.split(".") : [];
+    $[0] = parentPath;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== tab) {
+    t2 = tabHasName(tab) ? [tab.name] : [];
+    $[2] = tab;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== t1 || $[5] !== t2) {
+    t3 = [...t1, ...t2];
+    $[4] = t1;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  const path = t3.join(".");
+  const fieldHasErrors = errorCount > 0;
+  let t4;
+  if ($[7] !== path || $[8] !== tab || $[9] !== fieldHasErrors || $[10] !== isActive || $[11] !== i18n || $[12] !== errorCount || $[13] !== setIsActive) {
+    const t5 = _jsx(WatchChildErrors, {
       fields: tab.fields,
-      path,
+      path: path.split("."),
       setErrorCount
     });
-    const t3 = fieldHasErrors && `${baseClass}--has-error`;
-    const t4 = isActive && `${baseClass}--active`;
-    let t5;
-    if ($[8] !== t3 || $[9] !== t4) {
-      t5 = [baseClass, t3, t4].filter(Boolean);
-      $[8] = t3;
-      $[9] = t4;
-      $[10] = t5;
+    const t6 = fieldHasErrors && `${baseClass}--has-error`;
+    const t7 = isActive && `${baseClass}--active`;
+    let t8;
+    if ($[15] !== t6 || $[16] !== t7) {
+      t8 = [baseClass, t6, t7].filter(Boolean);
+      $[15] = t6;
+      $[16] = t7;
+      $[17] = t8;
     } else {
-      t5 = $[10];
+      t8 = $[17];
     }
-    let t6;
-    if ($[11] !== tab || $[12] !== i18n) {
-      t6 = tab.label ? getTranslation(tab.label, i18n) : tabHasName(tab) ? tab.name : "";
-      $[11] = tab;
-      $[12] = i18n;
-      $[13] = t6;
+    let t9;
+    if ($[18] !== tab || $[19] !== i18n) {
+      t9 = tab.label ? getTranslation(tab.label, i18n) : tabHasName(tab) ? tab.name : "";
+      $[18] = tab;
+      $[19] = i18n;
+      $[20] = t9;
     } else {
-      t6 = $[13];
+      t9 = $[20];
     }
-    t1 = _jsxs(React.Fragment, {
-      children: [t2, _jsxs("button", {
-        className: t5.join(" "),
+    t4 = _jsxs(React.Fragment, {
+      children: [t5, _jsxs("button", {
+        className: t8.join(" "),
         onClick: setIsActive,
         type: "button",
-        children: [t6, fieldHasErrors && _jsx(ErrorPill, {
+        children: [t9, fieldHasErrors && _jsx(ErrorPill, {
           count: errorCount,
           i18n
         })]
       })]
     });
-    $[0] = tab;
-    $[1] = path;
-    $[2] = fieldHasErrors;
-    $[3] = isActive;
-    $[4] = i18n;
-    $[5] = errorCount;
-    $[6] = setIsActive;
-    $[7] = t1;
+    $[7] = path;
+    $[8] = tab;
+    $[9] = fieldHasErrors;
+    $[10] = isActive;
+    $[11] = i18n;
+    $[12] = errorCount;
+    $[13] = setIsActive;
+    $[14] = t4;
   } else {
-    t1 = $[7];
+    t4 = $[14];
   }
-  return t1;
+  return t4;
 };
 //# sourceMappingURL=index.js.map