@payloadcms/ui 3.0.0-beta.3 → 3.0.0-beta.30

package/dist/providers/ComponentMap/buildComponentMap/fields.js

@@ -1,10 +1,9 @@
 import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription';
 import { fieldAffectsData, fieldIsPresentationalOnly } from 'payload/types';
-import { isPlainFunction, isReactComponent } from 'payload/utilities';
 import React, { Fragment } from 'react';
 import { HiddenInput } from '../../../fields/HiddenInput/index.js';
 export const mapFields = (args)=>{
-    const { config, disableAddingID, fieldSchema, filter, i18n, i18n: { t }, parentPath, readOnly: readOnlyOverride } = args;
+    const { WithServerSideProps, config, disableAddingID, fieldSchema, filter, i18n, i18n: { t }, parentPath, readOnly: readOnlyOverride } = args;
     const result = fieldSchema.reduce((acc, field)=>{
         const fieldIsPresentational = fieldIsPresentationalOnly(field);
         let CustomFieldComponent = field.admin?.components?.Field;
@@ -19,40 +18,77 @@ export const mapFields = (args)=>{
                 }
                 const isFieldAffectingData = fieldAffectsData(field);
                 const path = `${parentPath ? `${parentPath}.` : ''}${field.path || (isFieldAffectingData && 'name' in field ? field.name : '')}`;
-                const AfterInput = 'admin' in field && 'components' in field.admin && 'afterInput' in field.admin.components && Array.isArray(field.admin?.components?.afterInput) && /*#__PURE__*/ React.createElement(Fragment, null, field.admin.components.afterInput.map((Component, i)=>/*#__PURE__*/ React.createElement(Component, {
+                const AfterInput = 'admin' in field && 'components' in field.admin && 'afterInput' in field.admin.components && Array.isArray(field.admin?.components?.afterInput) && /*#__PURE__*/ React.createElement(Fragment, null, field.admin.components.afterInput.map((Component, i)=>/*#__PURE__*/ React.createElement(WithServerSideProps, {
+                        Component: Component,
                         key: i
                     }))) || null;
-                const BeforeInput = 'admin' in field && field.admin?.components && 'beforeInput' in field.admin.components && Array.isArray(field.admin.components.beforeInput) && /*#__PURE__*/ React.createElement(Fragment, null, field.admin.components.beforeInput.map((Component, i)=>/*#__PURE__*/ React.createElement(Component, {
+                const BeforeInput = 'admin' in field && field.admin?.components && 'beforeInput' in field.admin.components && Array.isArray(field.admin.components.beforeInput) && /*#__PURE__*/ React.createElement(Fragment, null, field.admin.components.beforeInput.map((Component, i)=>/*#__PURE__*/ React.createElement(WithServerSideProps, {
+                        Component: Component,
                         key: i
                     }))) || null;
+                let label = undefined;
+                if ('label' in field) {
+                    if (typeof field.label === 'string' || typeof field.label === 'object') {
+                        label = field.label;
+                    } else if (typeof field.label === 'function') {
+                        label = field.label({
+                            t
+                        });
+                    }
+                }
                 const labelProps = {
-                    label: 'label' in field && !isPlainFunction(field.label) && !isReactComponent(field.label) ? field.label : undefined,
+                    label,
                     required: 'required' in field ? field.required : undefined
                 };
-                const CustomLabelComponent = 'admin' in field && field.admin?.components && 'Label' in field.admin.components && field.admin?.components?.Label || undefined;
-                const CustomLabel = CustomLabelComponent !== undefined ? /*#__PURE__*/ React.createElement(CustomLabelComponent, labelProps || {}) : undefined;
+                const CustomLabelComponent = 'admin' in field && field.admin?.components && 'Label' in field.admin.components && field.admin.components?.Label || undefined;
+                // If we return undefined here (so if no CUSTOM label component is set), the field client component is responsible for falling back to the default label
+                const CustomLabel = CustomLabelComponent !== undefined ? /*#__PURE__*/ React.createElement(WithServerSideProps, {
+                    Component: CustomLabelComponent,
+                    ...labelProps || {}
+                }) : undefined;
+                let description = undefined;
+                if (field.admin && 'description' in field.admin) {
+                    if (typeof field.admin?.description === 'string' || typeof field.admin?.description === 'object') {
+                        description = field.admin.description;
+                    } else if (typeof field.admin?.description === 'function') {
+                        description = field.admin?.description({
+                            t
+                        });
+                    }
+                }
                 const descriptionProps = {
-                    description: field.admin && 'description' in field.admin && ((typeof field.admin?.description === 'string' || typeof field.admin?.description === 'object') && field.admin.description || typeof field.admin?.description === 'function' && isPlainFunction(field.admin?.description) && field.admin?.description({
-                        t
-                    })) || undefined
+                    description
                 };
-                const CustomDescriptionComponent = field.admin && 'description' in field.admin && (isReactComponent(field.admin.description) && field.admin.description || field.admin.description && FieldDescription) || undefined;
-                const CustomDescription = CustomDescriptionComponent !== undefined ? /*#__PURE__*/ React.createElement(CustomDescriptionComponent, descriptionProps || {}) : undefined;
+                let CustomDescriptionComponent = undefined;
+                if (field.admin?.components && 'Description' in field.admin.components && field.admin.components?.Description) {
+                    CustomDescriptionComponent = field.admin.components.Description;
+                } else if (description) {
+                    CustomDescriptionComponent = FieldDescription;
+                }
+                const CustomDescription = CustomDescriptionComponent !== undefined ? /*#__PURE__*/ React.createElement(WithServerSideProps, {
+                    Component: CustomDescriptionComponent,
+                    ...descriptionProps || {}
+                }) : undefined;
                 const errorProps = {
                     path
                 };
                 const CustomErrorComponent = 'admin' in field && field.admin?.components && 'Error' in field.admin.components && field.admin?.components?.Error || undefined;
-                const CustomError = CustomErrorComponent !== undefined ? /*#__PURE__*/ React.createElement(CustomErrorComponent, errorProps || {}) : undefined;
+                const CustomError = CustomErrorComponent !== undefined ? /*#__PURE__*/ React.createElement(WithServerSideProps, {
+                    Component: CustomErrorComponent,
+                    ...errorProps || {}
+                }) : undefined;
+                // These fields are shared across all field types even if they are not used in the default field, as the custom field component can use them
                 const baseFieldProps = {
                     AfterInput,
                     BeforeInput,
                     CustomDescription,
                     CustomError,
                     CustomLabel,
+                    custom: 'admin' in field && 'custom' in field.admin ? field.admin?.custom : undefined,
                     descriptionProps,
                     disabled: 'admin' in field && 'disabled' in field.admin ? field.admin?.disabled : false,
                     errorProps,
-                    labelProps,
+                    label: labelProps?.label,
                     path,
                     required: 'required' in field ? field.required : undefined
                 };
@@ -63,7 +99,7 @@ export const mapFields = (args)=>{
                         if (typeof option === 'object' && typeof option.label === 'function') {
                             return {
                                 label: option.label({
-                                    t: i18n.t
+                                    t
                                 }),
                                 value: option.value
                             };
@@ -75,7 +111,7 @@ export const mapFields = (args)=>{
                     name: 'name' in field ? field.name : undefined,
                     fieldType: field.type,
                     isFieldAffectingData,
-                    label: 'label' in field && field.label && typeof field.label !== 'function' ? field.label : undefined,
+                    label: labelProps?.label || undefined,
                     labels: 'labels' in field ? field.labels : undefined,
                     options: 'options' in field ? fieldOptions : undefined,
                     relationTo: 'relationTo' in field ? field.relationTo : undefined
@@ -84,9 +120,12 @@ export const mapFields = (args)=>{
                     case 'array':
                         {
                             let CustomRowLabel;
-                            if ('admin' in field && field.admin.components && 'RowLabel' in field.admin.components && field.admin.components.RowLabel && isReactComponent(field.admin.components.RowLabel)) {
+                            if ('admin' in field && field.admin.components && 'RowLabel' in field.admin.components && field.admin.components.RowLabel) {
                                 const CustomRowLabelComponent = field.admin.components.RowLabel;
-                                CustomRowLabel = /*#__PURE__*/ React.createElement(CustomRowLabelComponent, null);
+                                CustomRowLabel = /*#__PURE__*/ React.createElement(WithServerSideProps, {
+                                    Component: CustomRowLabelComponent,
+                                    ...labelProps || {}
+                                });
                             }
                             const arrayFieldProps = {
                                 ...baseFieldProps,
@@ -95,6 +134,7 @@ export const mapFields = (args)=>{
                                 className: field.admin?.className,
                                 disabled: field.admin?.disabled,
                                 fieldMap: mapFields({
+                                    WithServerSideProps,
                                     config,
                                     fieldSchema: field.fields,
                                     filter,
@@ -102,7 +142,7 @@ export const mapFields = (args)=>{
                                     parentPath: path,
                                     readOnly: readOnlyOverride
                                 }),
-                                label: field?.label,
+                                isSortable: field.admin?.isSortable,
                                 labels: field.labels,
                                 maxRows: field.maxRows,
                                 minRows: field.minRows,
@@ -118,6 +158,7 @@ export const mapFields = (args)=>{
                         {
                             const blocks = field.blocks.map((block)=>{
                                 const blockFieldMap = mapFields({
+                                    WithServerSideProps,
                                     config,
                                     fieldSchema: block.fields,
                                     filter,
@@ -127,6 +168,7 @@ export const mapFields = (args)=>{
                                 });
                                 const reducedBlock = {
                                     slug: block.slug,
+                                    custom: block.admin?.custom,
                                     fieldMap: blockFieldMap,
                                     imageAltText: block.imageAltText,
                                     imageURL: block.imageURL,
@@ -140,7 +182,7 @@ export const mapFields = (args)=>{
                                 blocks,
                                 className: field.admin?.className,
                                 disabled: field.admin?.disabled,
-                                label: field?.label,
+                                isSortable: field.admin?.isSortable,
                                 labels: field.labels,
                                 maxRows: field.maxRows,
                                 minRows: field.minRows,
@@ -163,7 +205,6 @@ export const mapFields = (args)=>{
                                 name: field.name,
                                 className: field.admin?.className,
                                 disabled: field.admin?.disabled,
-                                label: field.label,
                                 readOnly: field.admin?.readOnly,
                                 required: field.required,
                                 style: field.admin?.style,
@@ -180,7 +221,6 @@ export const mapFields = (args)=>{
                                 className: field.admin?.className,
                                 disabled: field.admin?.disabled,
                                 editorOptions: field.admin?.editorOptions,
-                                label: field.label,
                                 language: field.admin?.language,
                                 readOnly: field.admin?.readOnly,
                                 required: field.required,
@@ -193,9 +233,12 @@ export const mapFields = (args)=>{
                     case 'collapsible':
                         {
                             let CustomCollapsibleLabel;
-                            if (isReactComponent(field.label) || isPlainFunction(field.label)) {
-                                const CustomCollapsibleLabelComponent = field.label;
-                                CustomCollapsibleLabel = /*#__PURE__*/ React.createElement(CustomCollapsibleLabelComponent, null);
+                            if (field?.admin?.components && 'RowLabel' in field.admin.components && field?.admin?.components?.RowLabel) {
+                                const CustomCollapsibleLabelComponent = field.admin.components.RowLabel;
+                                CustomCollapsibleLabel = /*#__PURE__*/ React.createElement(WithServerSideProps, {
+                                    Component: CustomCollapsibleLabelComponent,
+                                    ...labelProps || {}
+                                });
                             }
                             const collapsibleField = {
                                 ...baseFieldProps,
@@ -203,6 +246,7 @@ export const mapFields = (args)=>{
                                 className: field.admin?.className,
                                 disabled: field.admin?.disabled,
                                 fieldMap: mapFields({
+                                    WithServerSideProps,
                                     config,
                                     disableAddingID: true,
                                     fieldSchema: field.fields,
@@ -212,7 +256,6 @@ export const mapFields = (args)=>{
                                     readOnly: readOnlyOverride
                                 }),
                                 initCollapsed: field.admin?.initCollapsed,
-                                label: !CustomCollapsibleLabel ? field.label : undefined,
                                 readOnly: field.admin?.readOnly,
                                 required: field.required,
                                 style: field.admin?.style,
@@ -230,7 +273,6 @@ export const mapFields = (args)=>{
                                 className: field.admin?.className,
                                 date: field.admin?.date,
                                 disabled: field.admin?.disabled,
-                                label: field.label,
                                 placeholder: field.admin?.placeholder,
                                 readOnly: field.admin?.readOnly,
                                 required: field.required,
@@ -248,7 +290,6 @@ export const mapFields = (args)=>{
                                 name: field.name,
                                 className: field.admin?.className,
                                 disabled: field.admin?.disabled,
-                                label: field.label,
                                 placeholder: field.admin?.placeholder,
                                 readOnly: field.admin?.readOnly,
                                 required: field.required,
@@ -266,6 +307,7 @@ export const mapFields = (args)=>{
                                 className: field.admin?.className,
                                 disabled: field.admin?.disabled,
                                 fieldMap: mapFields({
+                                    WithServerSideProps,
                                     config,
                                     disableAddingID: true,
                                     fieldSchema: field.fields,
@@ -274,7 +316,6 @@ export const mapFields = (args)=>{
                                     parentPath: path,
                                     readOnly: readOnlyOverride
                                 }),
-                                label: field.label,
                                 readOnly: field.admin?.readOnly,
                                 style: field.admin?.style,
                                 width: field.admin?.width
@@ -290,7 +331,7 @@ export const mapFields = (args)=>{
                                 className: field.admin?.className,
                                 disabled: field.admin?.disabled,
                                 editorOptions: field.admin?.editorOptions,
-                                label: field.label,
+                                jsonSchema: field.jsonSchema,
                                 readOnly: field.admin?.readOnly,
                                 required: field.required,
                                 style: field.admin?.style,
@@ -307,7 +348,6 @@ export const mapFields = (args)=>{
                                 className: field.admin?.className,
                                 disabled: field.admin?.disabled,
                                 hasMany: field.hasMany,
-                                label: field.label,
                                 max: field.max,
                                 maxRows: field.maxRows,
                                 min: field.min,
@@ -327,7 +367,6 @@ export const mapFields = (args)=>{
                                 name: field.name,
                                 className: field.admin?.className,
                                 disabled: field.admin?.disabled,
-                                label: field.label,
                                 readOnly: field.admin?.readOnly,
                                 required: field.required,
                                 style: field.admin?.style,
@@ -345,7 +384,6 @@ export const mapFields = (args)=>{
                                 className: field.admin?.className,
                                 disabled: field.admin?.disabled,
                                 hasMany: field.hasMany,
-                                label: field.label,
                                 readOnly: field.admin?.readOnly,
                                 relationTo: field.relationTo,
                                 required: field.required,
@@ -364,7 +402,6 @@ export const mapFields = (args)=>{
                                 name: field.name,
                                 className: field.admin?.className,
                                 disabled: field.admin?.disabled,
-                                label: field.label,
                                 options: fieldOptions,
                                 readOnly: field.admin?.readOnly,
                                 required: field.required,
@@ -382,16 +419,19 @@ export const mapFields = (args)=>{
                                 name: field.name,
                                 className: field.admin?.className,
                                 disabled: field.admin?.disabled,
-                                label: field.label,
                                 readOnly: field.admin?.readOnly,
                                 required: field.required,
                                 style: field.admin?.style,
                                 width: field.admin?.width
                             };
+                            if (typeof field?.editor === 'function') {
+                                throw new Error('Attempted to access unsanitized rich text editor.');
+                            }
                             const RichTextFieldComponent = field.editor.FieldComponent;
                             const RichTextCellComponent = field.editor.CellComponent;
                             if (typeof field.editor.generateComponentMap === 'function') {
                                 const result = field.editor.generateComponentMap({
+                                    WithServerSideProps,
                                     config,
                                     i18n,
                                     schemaPath: path
@@ -403,7 +443,9 @@ export const mapFields = (args)=>{
                                 CustomFieldComponent = RichTextFieldComponent;
                             }
                             if (RichTextCellComponent) {
-                                cellComponentProps.CellComponentOverride = /*#__PURE__*/ React.createElement(RichTextCellComponent, null);
+                                cellComponentProps.CellComponentOverride = /*#__PURE__*/ React.createElement(WithServerSideProps, {
+                                    Component: RichTextCellComponent
+                                });
                             }
                             fieldComponentProps = richTextField;
                             break;
@@ -415,6 +457,7 @@ export const mapFields = (args)=>{
                                 className: field.admin?.className,
                                 disabled: field.admin?.disabled,
                                 fieldMap: mapFields({
+                                    WithServerSideProps,
                                     config,
                                     disableAddingID: true,
                                     fieldSchema: field.fields,
@@ -436,6 +479,7 @@ export const mapFields = (args)=>{
                             // `tabs` fields require a field map of each of its tab's nested fields
                             const tabs = field.tabs.map((tab)=>{
                                 const tabFieldMap = mapFields({
+                                    WithServerSideProps,
                                     config,
                                     disableAddingID: true,
                                     fieldSchema: tab.fields,
@@ -473,7 +517,6 @@ export const mapFields = (args)=>{
                                 className: field.admin?.className,
                                 disabled: field.admin?.disabled,
                                 hasMany: field.hasMany,
-                                label: field.label,
                                 maxLength: field.maxLength,
                                 minLength: field.minLength,
                                 placeholder: field.admin?.placeholder,
@@ -492,7 +535,6 @@ export const mapFields = (args)=>{
                                 name: field.name,
                                 className: field.admin?.className,
                                 disabled: field.admin?.disabled,
-                                label: field.label,
                                 maxLength: field.maxLength,
                                 minLength: field.minLength,
                                 placeholder: field.admin?.placeholder,
@@ -518,7 +560,6 @@ export const mapFields = (args)=>{
                                 className: field.admin?.className,
                                 disabled: field.admin?.disabled,
                                 filterOptions: field.filterOptions,
-                                label: field.label,
                                 readOnly: field.admin?.readOnly,
                                 relationTo: field.relationTo,
                                 required: field.required,
@@ -538,7 +579,6 @@ export const mapFields = (args)=>{
                                 disabled: field.admin?.disabled,
                                 hasMany: field.hasMany,
                                 isClearable: field.admin?.isClearable,
-                                label: field.label,
                                 options: fieldOptions,
                                 readOnly: field.admin?.readOnly,
                                 required: field.required,
@@ -557,10 +597,19 @@ export const mapFields = (args)=>{
                 const reducedField = {
                     name: 'name' in field ? field.name : undefined,
                     type: field.type,
-                    CustomCell: CustomCellComponent ? /*#__PURE__*/ React.createElement(CustomCellComponent, cellComponentProps) : undefined,
-                    CustomField: CustomFieldComponent ? /*#__PURE__*/ React.createElement(CustomFieldComponent, fieldComponentProps) : undefined,
+                    CustomCell: CustomCellComponent ? /*#__PURE__*/ React.createElement(WithServerSideProps, {
+                        Component: CustomCellComponent,
+                        ...cellComponentProps
+                    }) : undefined,
+                    CustomField: CustomFieldComponent ? /*#__PURE__*/ React.createElement(WithServerSideProps, {
+                        Component: CustomFieldComponent,
+                        ...fieldComponentProps
+                    }) : undefined,
                     cellComponentProps,
+                    custom: field?.admin?.custom,
                     disableBulkEdit: 'admin' in field && 'disableBulkEdit' in field.admin && field.admin.disableBulkEdit,
+                    disableListColumn: 'admin' in field && 'disableListColumn' in field.admin && field.admin.disableListColumn,
+                    disableListFilter: 'admin' in field && 'disableListFilter' in field.admin && field.admin.disableListFilter,
                     fieldComponentProps,
                     fieldIsPresentational,
                     isFieldAffectingData,
@@ -587,10 +636,7 @@ export const mapFields = (args)=>{
             disableBulkEdit: true,
             fieldComponentProps: {
                 name: 'id',
-                label: 'ID',
-                labelProps: {
-                    label: 'ID'
-                }
+                label: 'ID'
             },
             fieldIsPresentational: false,
             isFieldAffectingData: true,