@payloadcms/ui 3.81.0-internal-debug.1a0f4d0 → 3.81.0

package/dist/elements/RelationshipTable/index.js

@@ -1,5 +1,6 @@
 'use client';
-import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "react/jsx-dev-runtime";
+
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import { hoistQueryParamsToAnd, transformColumnsToPreferences } from 'payload/shared';
 import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react';
@@ -22,396 +23,273 @@ import { DrawerLink } from './cells/DrawerLink/index.js';
 import { RelationshipTablePagination } from './Pagination.js';
 import './index.scss';
 const baseClass = 'relationship-table';
-export const RelationshipTable = (props)=>{
-    const { AfterInput, allowCreate = true, BeforeInput, disableTable = false, field, fieldPath, filterOptions, initialData: initialDataFromProps, initialDrawerData, Label, parent, relationTo } = props;
-    const [Table, setTable] = useState(null);
-    const { config, getEntityConfig } = useConfig();
-    const { i18n, t } = useTranslation();
-    const [query, setQuery] = useState();
-    const [openColumnSelector, setOpenColumnSelector] = useState(false);
-    const [collectionConfig] = useState(()=>getEntityConfig({
-            collectionSlug: relationTo
-        }));
-    const isPolymorphic = Array.isArray(relationTo);
-    const [selectedCollection, setSelectedCollection] = useState(isPolymorphic ? undefined : relationTo);
-    const { permissions } = useAuth();
-    const openDrawerWhenRelationChanges = useRef(false);
-    const [currentDrawerID, setCurrentDrawerID] = useState(undefined);
-    const [DocumentDrawer, , { closeDrawer, isDrawerOpen, openDrawer }] = useDocumentDrawer({
-        id: currentDrawerID,
-        collectionSlug: selectedCollection
+export const RelationshipTable = props => {
+  const {
+    AfterInput,
+    allowCreate = true,
+    BeforeInput,
+    disableTable = false,
+    field,
+    fieldPath,
+    filterOptions,
+    initialData: initialDataFromProps,
+    initialDrawerData,
+    Label,
+    parent,
+    relationTo
+  } = props;
+  const [Table, setTable] = useState(null);
+  const {
+    config,
+    getEntityConfig
+  } = useConfig();
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const [query, setQuery] = useState();
+  const [openColumnSelector, setOpenColumnSelector] = useState(false);
+  const [collectionConfig] = useState(() => getEntityConfig({
+    collectionSlug: relationTo
+  }));
+  const isPolymorphic = Array.isArray(relationTo);
+  const [selectedCollection, setSelectedCollection] = useState(isPolymorphic ? undefined : relationTo);
+  const {
+    permissions
+  } = useAuth();
+  const openDrawerWhenRelationChanges = useRef(false);
+  const [currentDrawerID, setCurrentDrawerID] = useState(undefined);
+  const [DocumentDrawer,, {
+    closeDrawer,
+    isDrawerOpen,
+    openDrawer
+  }] = useDocumentDrawer({
+    id: currentDrawerID,
+    collectionSlug: selectedCollection
+  });
+  const [isLoadingTable, setIsLoadingTable] = useState(!disableTable);
+  const [data, setData] = useState(() => initialDataFromProps ? {
+    ...initialDataFromProps,
+    docs: Array.isArray(initialDataFromProps.docs) ? initialDataFromProps.docs.reduce((acc, doc) => {
+      if (typeof doc === 'string' || typeof doc === 'number') {
+        return [...acc, {
+          id: doc
+        }];
+      }
+      return [...acc, doc];
+    }, []) : []
+  } : undefined);
+  const [columnState, setColumnState] = useState();
+  const {
+    getTableState
+  } = useServerFunctions();
+  const renderTable = useCallback(async data => {
+    const newQuery = {
+      limit: field?.defaultLimit || collectionConfig?.admin?.pagination?.defaultLimit,
+      sort: field.defaultSort || collectionConfig?.defaultSort,
+      ...(query || {}),
+      where: {
+        ...(query?.where || {})
+      }
+    };
+    if (filterOptions) {
+      newQuery.where = hoistQueryParamsToAnd(newQuery.where, filterOptions);
+    }
+    // map columns from string[] to CollectionPreferences['columns']
+    const defaultColumns = field.admin.defaultColumns ? field.admin.defaultColumns.map(accessor => ({
+      accessor,
+      active: true
+    })) : undefined;
+    const renderRowTypes = typeof field.admin.disableRowTypes === 'boolean' ? !field.admin.disableRowTypes : Array.isArray(relationTo);
+    const {
+      data: newData,
+      state: newColumnState,
+      Table: NewTable
+    } = await getTableState({
+      collectionSlug: relationTo,
+      columns: transformColumnsToPreferences(query?.columns) || defaultColumns,
+      data,
+      enableRowSelections: false,
+      orderableFieldName: !field.orderable || Array.isArray(field.collection) ? undefined : `_${field.collection}_${field.name}_order`,
+      parent,
+      query: newQuery,
+      renderRowTypes,
+      tableAppearance: 'condensed'
     });
-    const [isLoadingTable, setIsLoadingTable] = useState(!disableTable);
-    const [data, setData] = useState(()=>initialDataFromProps ? {
-            ...initialDataFromProps,
-            docs: Array.isArray(initialDataFromProps.docs) ? initialDataFromProps.docs.reduce((acc, doc)=>{
-                if (typeof doc === 'string' || typeof doc === 'number') {
-                    return [
-                        ...acc,
-                        {
-                            id: doc
-                        }
-                    ];
-                }
-                return [
-                    ...acc,
-                    doc
-                ];
-            }, []) : []
-        } : undefined);
-    const [columnState, setColumnState] = useState();
-    const { getTableState } = useServerFunctions();
-    const renderTable = useCallback(async (data)=>{
-        const newQuery = {
-            limit: field?.defaultLimit || collectionConfig?.admin?.pagination?.defaultLimit,
-            sort: field.defaultSort || collectionConfig?.defaultSort,
-            ...query || {},
-            where: {
-                ...query?.where || {}
-            }
-        };
-        if (filterOptions) {
-            newQuery.where = hoistQueryParamsToAnd(newQuery.where, filterOptions);
-        }
-        // map columns from string[] to CollectionPreferences['columns']
-        const defaultColumns = field.admin.defaultColumns ? field.admin.defaultColumns.map((accessor)=>({
-                accessor,
-                active: true
-            })) : undefined;
-        const renderRowTypes = typeof field.admin.disableRowTypes === 'boolean' ? !field.admin.disableRowTypes : Array.isArray(relationTo);
-        const { data: newData, state: newColumnState, Table: NewTable } = await getTableState({
-            collectionSlug: relationTo,
-            columns: transformColumnsToPreferences(query?.columns) || defaultColumns,
-            data,
-            enableRowSelections: false,
-            orderableFieldName: !field.orderable || Array.isArray(field.collection) ? undefined : `_${field.collection}_${field.name}_order`,
-            parent,
-            query: newQuery,
-            renderRowTypes,
-            tableAppearance: 'condensed'
-        });
-        setData(newData);
-        setTable(NewTable);
-        setColumnState(newColumnState);
-        setIsLoadingTable(false);
-    }, [
-        field.defaultLimit,
-        field.defaultSort,
-        field.admin.defaultColumns,
-        field.admin.disableRowTypes,
-        field.collection,
-        field.name,
-        field.orderable,
-        collectionConfig?.admin?.pagination?.defaultLimit,
-        collectionConfig?.defaultSort,
-        query,
-        filterOptions,
-        getTableState,
-        relationTo,
-        parent
-    ]);
-    const handleTableRender = useEffectEvent((query, disableTable)=>{
-        if (!disableTable && (!Table || query)) {
-            void renderTable();
-        }
+    setData(newData);
+    setTable(NewTable);
+    setColumnState(newColumnState);
+    setIsLoadingTable(false);
+  }, [field.defaultLimit, field.defaultSort, field.admin.defaultColumns, field.admin.disableRowTypes, field.collection, field.name, field.orderable, collectionConfig?.admin?.pagination?.defaultLimit, collectionConfig?.defaultSort, query, filterOptions, getTableState, relationTo, parent]);
+  const handleTableRender = useEffectEvent((query, disableTable) => {
+    if (!disableTable && (!Table || query)) {
+      void renderTable();
+    }
+  });
+  useEffect(() => {
+    handleTableRender(query, disableTable);
+  }, [query, disableTable]);
+  const onDrawerSave = useCallback(({
+    doc,
+    operation
+  }) => {
+    if (operation === 'create') {
+      closeDrawer();
+    }
+    const foundDocIndex = data?.docs?.findIndex(d => d.id === doc.id);
+    const withNewOrUpdatedData = {
+      docs: []
+    };
+    if (foundDocIndex !== -1) {
+      const newDocs = [...data.docs];
+      newDocs[foundDocIndex] = doc;
+      withNewOrUpdatedData.docs = newDocs;
+    } else {
+      withNewOrUpdatedData.docs = [doc, ...data.docs];
+    }
+    void renderTable(withNewOrUpdatedData);
+  }, [data?.docs, renderTable, closeDrawer]);
+  const onDrawerDelete = useCallback(args => {
+    const newDocs = data.docs.filter(doc => doc.id !== args.id);
+    void renderTable({
+      ...data,
+      docs: newDocs
     });
-    useEffect(()=>{
-        handleTableRender(query, disableTable);
-    }, [
-        query,
-        disableTable
-    ]);
-    const onDrawerSave = useCallback(({ doc, operation })=>{
-        if (operation === 'create') {
-            closeDrawer();
-        }
-        const foundDocIndex = data?.docs?.findIndex((d)=>d.id === doc.id);
-        const withNewOrUpdatedData = {
-            docs: []
-        };
-        if (foundDocIndex !== -1) {
-            const newDocs = [
-                ...data.docs
-            ];
-            newDocs[foundDocIndex] = doc;
-            withNewOrUpdatedData.docs = newDocs;
-        } else {
-            withNewOrUpdatedData.docs = [
-                doc,
-                ...data.docs
-            ];
-        }
-        void renderTable(withNewOrUpdatedData);
-    }, [
-        data?.docs,
-        renderTable,
-        closeDrawer
-    ]);
-    const onDrawerDelete = useCallback((args)=>{
-        const newDocs = data.docs.filter((doc)=>doc.id !== args.id);
-        void renderTable({
-            ...data,
-            docs: newDocs
-        });
-        setCurrentDrawerID(undefined);
-    }, [
-        data,
-        renderTable
-    ]);
-    const onDrawerOpen = useCallback((id, collectionSlug)=>{
-        openDrawerWhenRelationChanges.current = true;
-        if (id) {
-            setCurrentDrawerID(id);
-        } else {
-            setCurrentDrawerID(undefined);
-        }
-        if (collectionSlug) {
-            setSelectedCollection(collectionSlug);
-        } else {
-            setSelectedCollection(undefined);
-        }
-    }, []);
-    useEffect(()=>{
-        if (openDrawerWhenRelationChanges.current) {
-            openDrawerWhenRelationChanges.current = false;
-            openDrawer();
-        }
-    }, [
-        openDrawer
-    ]);
-    useEffect(()=>{
-        if (!isDrawerOpen) {
-            setCurrentDrawerID(undefined);
-        }
-    }, [
-        isDrawerOpen
-    ]);
-    const canCreate = allowCreate !== false && permissions?.collections?.[isPolymorphic ? relationTo[0] : relationTo]?.create;
-    useEffect(()=>{
-        if (isPolymorphic && selectedCollection) {
-            openDrawer();
-        }
-    }, [
-        selectedCollection,
-        openDrawer,
-        isPolymorphic
-    ]);
-    useEffect(()=>{
-        if (isPolymorphic && !isDrawerOpen && selectedCollection) {
-            setSelectedCollection(undefined);
-        }
-    }, // eslint-disable-next-line react-compiler/react-compiler -- TODO: fix
+    setCurrentDrawerID(undefined);
+  }, [data, renderTable]);
+  const onDrawerOpen = useCallback((id, collectionSlug) => {
+    openDrawerWhenRelationChanges.current = true;
+    if (id) {
+      setCurrentDrawerID(id);
+    } else {
+      setCurrentDrawerID(undefined);
+    }
+    if (collectionSlug) {
+      setSelectedCollection(collectionSlug);
+    } else {
+      setSelectedCollection(undefined);
+    }
+  }, []);
+  useEffect(() => {
+    if (openDrawerWhenRelationChanges.current) {
+      openDrawerWhenRelationChanges.current = false;
+      openDrawer();
+    }
+  }, [openDrawer]);
+  useEffect(() => {
+    if (!isDrawerOpen) {
+      setCurrentDrawerID(undefined);
+    }
+  }, [isDrawerOpen]);
+  const canCreate = allowCreate !== false && permissions?.collections?.[isPolymorphic ? relationTo[0] : relationTo]?.create;
+  useEffect(() => {
+    if (isPolymorphic && selectedCollection) {
+      openDrawer();
+    }
+  }, [selectedCollection, openDrawer, isPolymorphic]);
+  useEffect(() => {
+    if (isPolymorphic && !isDrawerOpen && selectedCollection) {
+      setSelectedCollection(undefined);
+    }
+    // eslint-disable-next-line react-compiler/react-compiler -- TODO: fix
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-        isDrawerOpen
-    ]);
-    const memoizedListQuery = React.useMemo(()=>({
-            columns: transformColumnsToPreferences(columnState)?.map(({ accessor })=>accessor),
-            limit: field.defaultLimit ?? collectionConfig?.admin?.pagination?.defaultLimit,
-            sort: field.defaultSort ?? collectionConfig?.defaultSort
-        }), [
-        columnState,
-        field,
-        collectionConfig
-    ]);
-    return /*#__PURE__*/ _jsxDEV("div", {
-        className: baseClass,
-        children: [
-            /*#__PURE__*/ _jsxDEV("div", {
-                className: `${baseClass}__header`,
-                children: [
-                    Label,
-                    /*#__PURE__*/ _jsxDEV("div", {
-                        className: `${baseClass}__actions`,
-                        children: [
-                            /*#__PURE__*/ _jsxDEV(AddNewButton, {
-                                allowCreate: allowCreate !== false,
-                                baseClass: baseClass,
-                                buttonStyle: "none",
-                                className: `${baseClass}__add-new${isPolymorphic ? '-polymorphic' : ' doc-drawer__toggler'}`,
-                                collections: config.collections,
-                                i18n: i18n,
-                                icon: isPolymorphic ? 'plus' : undefined,
-                                label: i18n.t('fields:addNew'),
-                                onClick: isPolymorphic ? setSelectedCollection : openDrawer,
-                                permissions: permissions,
-                                relationTo: relationTo
-                            }, void 0, false, {
-                                fileName: "src/elements/RelationshipTable/index.tsx",
-                                lineNumber: 302,
-                                columnNumber: 11
-                            }, this),
-                            /*#__PURE__*/ _jsxDEV(Pill, {
-                                "aria-controls": `${baseClass}-columns`,
-                                "aria-expanded": openColumnSelector,
-                                className: `${baseClass}__toggle-columns ${openColumnSelector ? `${baseClass}__buttons-active` : ''}`,
-                                icon: /*#__PURE__*/ _jsxDEV(ChevronIcon, {
-                                    direction: openColumnSelector ? 'up' : 'down'
-                                }, void 0, false, {
-                                    fileName: "src/elements/RelationshipTable/index.tsx",
-                                    lineNumber: 321,
-                                    columnNumber: 19
-                                }, void 0),
-                                onClick: ()=>setOpenColumnSelector(!openColumnSelector),
-                                pillStyle: "light",
-                                size: "small",
-                                children: t('general:columns')
-                            }, void 0, false, {
-                                fileName: "src/elements/RelationshipTable/index.tsx",
-                                lineNumber: 315,
-                                columnNumber: 11
-                            }, this)
-                        ]
-                    }, void 0, true, {
-                        fileName: "src/elements/RelationshipTable/index.tsx",
-                        lineNumber: 301,
-                        columnNumber: 9
-                    }, this)
-                ]
-            }, void 0, true, {
-                fileName: "src/elements/RelationshipTable/index.tsx",
-                lineNumber: 299,
-                columnNumber: 7
-            }, this),
-            BeforeInput,
-            isLoadingTable ? /*#__PURE__*/ _jsxDEV("p", {
-                children: t('general:loading')
-            }, void 0, false, {
-                fileName: "src/elements/RelationshipTable/index.tsx",
-                lineNumber: 332,
-                columnNumber: 9
-            }, this) : /*#__PURE__*/ _jsxDEV(Fragment, {
-                children: [
-                    data?.docs && data.docs.length === 0 && /*#__PURE__*/ _jsxDEV(NoListResults, {
-                        Actions: canCreate ? [
-                            /*#__PURE__*/ _jsxDEV(AddNewButton, {
-                                allowCreate: canCreate,
-                                baseClass: baseClass,
-                                collections: config.collections,
-                                i18n: i18n,
-                                label: i18n.t('general:createNewLabel', {
-                                    label: isPolymorphic ? i18n.t('general:document') : getTranslation(collectionConfig?.labels?.singular, i18n)
-                                }),
-                                onClick: isPolymorphic ? setSelectedCollection : openDrawer,
-                                permissions: permissions,
-                                relationTo: relationTo
-                            }, "create", false, {
-                                fileName: "src/elements/RelationshipTable/index.tsx",
-                                lineNumber: 340,
-                                columnNumber: 23
-                            }, void 0)
-                        ] : [],
-                        Message: /*#__PURE__*/ _jsxDEV(_Fragment, {
-                            children: [
-                                /*#__PURE__*/ _jsxDEV("h3", {
-                                    children: i18n.t('general:noResultsFound')
-                                }, void 0, false, {
-                                    fileName: "src/elements/RelationshipTable/index.tsx",
-                                    lineNumber: 360,
-                                    columnNumber: 19
-                                }, void 0),
-                                /*#__PURE__*/ _jsxDEV("p", {
-                                    children: i18n.t('general:noResults', {
-                                        label: isPolymorphic ? i18n.t('general:documents') : getTranslation(collectionConfig?.labels?.plural, i18n)
-                                    })
-                                }, void 0, false, {
-                                    fileName: "src/elements/RelationshipTable/index.tsx",
-                                    lineNumber: 361,
-                                    columnNumber: 19
-                                }, void 0)
-                            ]
-                        }, void 0, true)
-                    }, void 0, false, {
-                        fileName: "src/elements/RelationshipTable/index.tsx",
-                        lineNumber: 336,
-                        columnNumber: 13
-                    }, this),
-                    data?.docs && data.docs.length > 0 && /*#__PURE__*/ _jsxDEV(RelationshipProvider, {
-                        children: /*#__PURE__*/ _jsxDEV(ListQueryProvider, {
-                            data: data,
-                            modifySearchParams: false,
-                            onQueryChange: setQuery,
-                            orderableFieldName: !field.orderable || Array.isArray(field.collection) ? undefined : `_${field.collection}_${fieldPath.replaceAll('.', '_')}_order`,
-                            query: memoizedListQuery,
-                            children: /*#__PURE__*/ _jsxDEV(TableColumnsProvider, {
-                                collectionSlug: isPolymorphic ? relationTo[0] : relationTo,
-                                columnState: columnState,
-                                LinkedCellOverride: /*#__PURE__*/ _jsxDEV(DrawerLink, {
-                                    currentDrawerID: currentDrawerID,
-                                    onDrawerOpen: onDrawerOpen
-                                }, void 0, false, {
-                                    fileName: "src/elements/RelationshipTable/index.tsx",
-                                    lineNumber: 389,
-                                    columnNumber: 21
-                                }, void 0),
-                                children: [
-                                    /*#__PURE__*/ _jsxDEV(AnimateHeight, {
-                                        className: `${baseClass}__columns`,
-                                        height: openColumnSelector ? 'auto' : 0,
-                                        id: `${baseClass}-columns`,
-                                        children: /*#__PURE__*/ _jsxDEV("div", {
-                                            className: `${baseClass}__columns-inner`,
-                                            children: collectionConfig && /*#__PURE__*/ _jsxDEV(ColumnSelector, {
-                                                collectionSlug: collectionConfig.slug
-                                            }, void 0, false, {
-                                                fileName: "src/elements/RelationshipTable/index.tsx",
-                                                lineNumber: 399,
-                                                columnNumber: 25
-                                            }, this)
-                                        }, void 0, false, {
-                                            fileName: "src/elements/RelationshipTable/index.tsx",
-                                            lineNumber: 397,
-                                            columnNumber: 21
-                                        }, this)
-                                    }, void 0, false, {
-                                        fileName: "src/elements/RelationshipTable/index.tsx",
-                                        lineNumber: 392,
-                                        columnNumber: 19
-                                    }, this),
-                                    Table,
-                                    /*#__PURE__*/ _jsxDEV(RelationshipTablePagination, {}, void 0, false, {
-                                        fileName: "src/elements/RelationshipTable/index.tsx",
-                                        lineNumber: 404,
-                                        columnNumber: 19
-                                    }, this)
-                                ]
-                            }, void 0, true, {
-                                fileName: "src/elements/RelationshipTable/index.tsx",
-                                lineNumber: 385,
-                                columnNumber: 17
-                            }, this)
-                        }, void 0, false, {
-                            fileName: "src/elements/RelationshipTable/index.tsx",
-                            lineNumber: 374,
-                            columnNumber: 15
-                        }, this)
-                    }, void 0, false, {
-                        fileName: "src/elements/RelationshipTable/index.tsx",
-                        lineNumber: 373,
-                        columnNumber: 13
-                    }, this)
-                ]
-            }, void 0, true, {
-                fileName: "src/elements/RelationshipTable/index.tsx",
-                lineNumber: 334,
-                columnNumber: 9
-            }, this),
-            AfterInput,
-            /*#__PURE__*/ _jsxDEV(DocumentDrawer, {
-                initialData: initialDrawerData,
-                onDelete: onDrawerDelete,
-                onSave: onDrawerSave
-            }, void 0, false, {
-                fileName: "src/elements/RelationshipTable/index.tsx",
-                lineNumber: 412,
-                columnNumber: 7
-            }, this)
-        ]
-    }, void 0, true, {
-        fileName: "src/elements/RelationshipTable/index.tsx",
-        lineNumber: 298,
-        columnNumber: 5
-    }, this);
+  }, [isDrawerOpen]);
+  const memoizedListQuery = React.useMemo(() => ({
+    columns: transformColumnsToPreferences(columnState)?.map(({
+      accessor
+    }) => accessor),
+    limit: field.defaultLimit ?? collectionConfig?.admin?.pagination?.defaultLimit,
+    sort: field.defaultSort ?? collectionConfig?.defaultSort
+  }), [columnState, field, collectionConfig]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: baseClass,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__header`,
+      children: [Label, /*#__PURE__*/_jsxs("div", {
+        className: `${baseClass}__actions`,
+        children: [/*#__PURE__*/_jsx(AddNewButton, {
+          allowCreate: allowCreate !== false,
+          baseClass: baseClass,
+          buttonStyle: "none",
+          className: `${baseClass}__add-new${isPolymorphic ? '-polymorphic' : ' doc-drawer__toggler'}`,
+          collections: config.collections,
+          i18n: i18n,
+          icon: isPolymorphic ? 'plus' : undefined,
+          label: i18n.t('fields:addNew'),
+          onClick: isPolymorphic ? setSelectedCollection : openDrawer,
+          permissions: permissions,
+          relationTo: relationTo
+        }), /*#__PURE__*/_jsx(Pill, {
+          "aria-controls": `${baseClass}-columns`,
+          "aria-expanded": openColumnSelector,
+          className: `${baseClass}__toggle-columns ${openColumnSelector ? `${baseClass}__buttons-active` : ''}`,
+          icon: /*#__PURE__*/_jsx(ChevronIcon, {
+            direction: openColumnSelector ? 'up' : 'down'
+          }),
+          onClick: () => setOpenColumnSelector(!openColumnSelector),
+          pillStyle: "light",
+          size: "small",
+          children: t('general:columns')
+        })]
+      })]
+    }), BeforeInput, isLoadingTable ? /*#__PURE__*/_jsx("p", {
+      children: t('general:loading')
+    }) : /*#__PURE__*/_jsxs(Fragment, {
+      children: [data?.docs && data.docs.length === 0 && /*#__PURE__*/_jsx(NoListResults, {
+        Actions: canCreate ? [/*#__PURE__*/_jsx(AddNewButton, {
+          allowCreate: canCreate,
+          baseClass: baseClass,
+          collections: config.collections,
+          i18n: i18n,
+          label: i18n.t('general:createNewLabel', {
+            label: isPolymorphic ? i18n.t('general:document') : getTranslation(collectionConfig?.labels?.singular, i18n)
+          }),
+          onClick: isPolymorphic ? setSelectedCollection : openDrawer,
+          permissions: permissions,
+          relationTo: relationTo
+        }, "create")] : [],
+        Message: /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx("h3", {
+            children: i18n.t('general:noResultsFound')
+          }), /*#__PURE__*/_jsx("p", {
+            children: i18n.t('general:noResults', {
+              label: isPolymorphic ? i18n.t('general:documents') : getTranslation(collectionConfig?.labels?.plural, i18n)
+            })
+          })]
+        })
+      }), data?.docs && data.docs.length > 0 && /*#__PURE__*/_jsx(RelationshipProvider, {
+        children: /*#__PURE__*/_jsx(ListQueryProvider, {
+          data: data,
+          modifySearchParams: false,
+          onQueryChange: setQuery,
+          orderableFieldName: !field.orderable || Array.isArray(field.collection) ? undefined : `_${field.collection}_${fieldPath.replaceAll('.', '_')}_order`,
+          query: memoizedListQuery,
+          children: /*#__PURE__*/_jsxs(TableColumnsProvider, {
+            collectionSlug: isPolymorphic ? relationTo[0] : relationTo,
+            columnState: columnState,
+            LinkedCellOverride: /*#__PURE__*/_jsx(DrawerLink, {
+              currentDrawerID: currentDrawerID,
+              onDrawerOpen: onDrawerOpen
+            }),
+            children: [/*#__PURE__*/_jsx(AnimateHeight, {
+              className: `${baseClass}__columns`,
+              height: openColumnSelector ? 'auto' : 0,
+              id: `${baseClass}-columns`,
+              children: /*#__PURE__*/_jsx("div", {
+                className: `${baseClass}__columns-inner`,
+                children: collectionConfig && /*#__PURE__*/_jsx(ColumnSelector, {
+                  collectionSlug: collectionConfig.slug
+                })
+              })
+            }), Table, /*#__PURE__*/_jsx(RelationshipTablePagination, {})]
+          })
+        })
+      })]
+    }), AfterInput, /*#__PURE__*/_jsx(DocumentDrawer, {
+      initialData: initialDrawerData,
+      onDelete: onDrawerDelete,
+      onSave: onDrawerSave
+    })]
+  });
 };
-
 //# sourceMappingURL=index.js.map