@payloadcms/ui 3.68.0-internal-debug.e9b66ee → 3.68.0-internal.10bf491

package/dist/elements/RelationshipTable/cells/DrawerLink/index.js

@@ -1,18 +1,42 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { EditIcon } from '../../../../icons/Edit/index.js';
 import { useCellProps } from '../../../../providers/TableColumns/RenderDefaultCell/index.js';
 import { DefaultCell } from '../../../Table/DefaultCell/index.js';
 import './index.scss';
-export const DrawerLink = ({ onDrawerOpen })=>{
-    const cellProps = useCellProps();
-    return <div className="drawer-link">
-      <DefaultCell {...cellProps} className="drawer-link__cell" link={false} onClick={null}/>
-      <button className="drawer-link__doc-drawer-toggler" onClick={()=>{
-        onDrawerOpen(cellProps.rowData.id);
-    }} type="button">
-        <EditIcon/>
-      </button>
-    </div>;
+export const DrawerLink = t0 => {
+  const $ = _c(3);
+  const {
+    onDrawerOpen
+  } = t0;
+  const cellProps = useCellProps();
+  let t1;
+  if ($[0] !== cellProps || $[1] !== onDrawerOpen) {
+    t1 = _jsxs("div", {
+      className: "drawer-link",
+      children: [_jsx(DefaultCell, {
+        ...cellProps,
+        className: "drawer-link__cell",
+        link: false,
+        onClick: null
+      }), _jsx("button", {
+        className: "drawer-link__doc-drawer-toggler",
+        onClick: () => {
+          onDrawerOpen(cellProps.rowData.id);
+        },
+        type: "button",
+        children: _jsx(EditIcon, {})
+      })]
+    });
+    $[0] = cellProps;
+    $[1] = onDrawerOpen;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
 };
-
 //# sourceMappingURL=index.js.map

package/dist/elements/RelationshipTable/cells/DrawerLink/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/elements/RelationshipTable/cells/DrawerLink/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport type { OnDrawerOpen } from '../../index.js'\n\nimport { EditIcon } from '../../../../icons/Edit/index.js'\nimport { useCellProps } from '../../../../providers/TableColumns/RenderDefaultCell/index.js'\nimport { DefaultCell } from '../../../Table/DefaultCell/index.js'\nimport './index.scss'\n\nexport const DrawerLink: React.FC<{\n  currentDrawerID?: string\n  onDrawerOpen: OnDrawerOpen\n}> = ({ onDrawerOpen }) => {\n  const cellProps = useCellProps()\n\n  return (\n    <div className=\"drawer-link\">\n      <DefaultCell {...cellProps} className=\"drawer-link__cell\" link={false} onClick={null} />\n      <button\n        className=\"drawer-link__doc-drawer-toggler\"\n        onClick={() => {\n          onDrawerOpen(cellProps.rowData.id)\n        }}\n        type=\"button\"\n      >\n        <EditIcon />\n      </button>\n    </div>\n  )\n}\n"],"names":["EditIcon","useCellProps","DefaultCell","DrawerLink","onDrawerOpen","cellProps","div","className","link","onClick","button","rowData","id","type"],"mappings":"AAAA;AAMA,SAASA,QAAQ,QAAQ,kCAAiC;AAC1D,SAASC,YAAY,QAAQ,gEAA+D;AAC5F,SAASC,WAAW,QAAQ,sCAAqC;AACjE,OAAO,eAAc;AAErB,OAAO,MAAMC,aAGR,CAAC,EAAEC,YAAY,EAAE;IACpB,MAAMC,YAAYJ;IAElB,QACGK,IAAIC,UAAU,cAAc;MAC3B,CAACL,aAAa,GAAGG,SAAS,EAAEE,UAAU,oBAAoBC,MAAM,OAAOC,SAAS,OAAQ;MACxF,CAACC,OACCH,UAAU,kCACVE,SAAS;QACPL,aAAaC,UAAUM,OAAO,CAACC,EAAE;IACnC,GACAC,KAAK,SACN;QACC,CAACb,UAAW;MACd,EAAEU,OAAO;IACX,EAAEJ;AAEN,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","React","EditIcon","useCellProps","DefaultCell","DrawerLink","t0","$","onDrawerOpen","cellProps","t1","_jsxs","className","children","_jsx","link","onClick","rowData","id","type"],"sources":["../../../../../src/elements/RelationshipTable/cells/DrawerLink/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport type { OnDrawerOpen } from '../../index.js'\n\nimport { EditIcon } from '../../../../icons/Edit/index.js'\nimport { useCellProps } from '../../../../providers/TableColumns/RenderDefaultCell/index.js'\nimport { DefaultCell } from '../../../Table/DefaultCell/index.js'\nimport './index.scss'\n\nexport const DrawerLink: React.FC<{\n  currentDrawerID?: string\n  onDrawerOpen: OnDrawerOpen\n}> = ({ onDrawerOpen }) => {\n  const cellProps = useCellProps()\n\n  return (\n    <div className=\"drawer-link\">\n      <DefaultCell {...cellProps} className=\"drawer-link__cell\" link={false} onClick={null} />\n      <button\n        className=\"drawer-link__doc-drawer-toggler\"\n        onClick={() => {\n          onDrawerOpen(cellProps.rowData.id)\n        }}\n        type=\"button\"\n      >\n        <EditIcon />\n      </button>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,MAAW;AAIlB,SAASC,QAAQ,QAAQ;AACzB,SAASC,YAAY,QAAQ;AAC7B,SAASC,WAAW,QAAQ;AAC5B,OAAO;AAEP,OAAO,MAAMC,UAAA,GAGRC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAAC;IAAAQ;EAAA,IAAAF,EAAgB;EACpB,MAAAG,SAAA,GAAkBN,YAAA;EAAA,IAAAO,EAAA;EAAA,IAAAH,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAAC,YAAA;IAGhBE,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EAAc;MAAAC,QAAA,GACbC,IAAA,CAAAV,WAAA;QAAA,GAAiBK,SAAS;QAAAG,SAAA,EAAY;QAAAG,IAAA;QAAAC,OAAA;MAAA,C,GACtCF,IAAA,CAAC;QAAAF,SAAA,EACW;QAAAI,OAAA,EAAAA,CAAA;UAERR,YAAA,CAAaC,SAAA,CAAAQ,OAAA,CAAAC,EAAoB;QAAA;QAAAC,IAAA,EAE9B;QAAAN,QAAA,EAELC,IAAA,CAAAZ,QAAA,IAAC;MAAA,C;;;;;;;;SATLQ,E;CAaJ","ignoreList":[]}

package/dist/elements/RelationshipTable/index.js

@@ -1,4 +1,6 @@
 'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import { hoistQueryParamsToAnd, transformColumnsToPreferences } from 'payload/shared';
 import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react';
@@ -20,232 +22,264 @@ 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)=>{
-        openDrawerWhenRelationChanges.current = true;
-        if (id) {
-            setCurrentDrawerID(id);
-        } else {
-            setCurrentDrawerID(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 => {
+    openDrawerWhenRelationChanges.current = true;
+    if (id) {
+      setCurrentDrawerID(id);
+    } else {
+      setCurrentDrawerID(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 <div className={baseClass}>
-      <div className={`${baseClass}__header`}>
-        {Label}
-        <div className={`${baseClass}__actions`}>
-          <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}/>
-          <Pill aria-controls={`${baseClass}-columns`} aria-expanded={openColumnSelector} className={`${baseClass}__toggle-columns ${openColumnSelector ? `${baseClass}__buttons-active` : ''}`} icon={<ChevronIcon direction={openColumnSelector ? 'up' : 'down'}/>} onClick={()=>setOpenColumnSelector(!openColumnSelector)} pillStyle="light" size="small">
-            {t('general:columns')}
-          </Pill>
-        </div>
-      </div>
-      {BeforeInput}
-      {isLoadingTable ? <p>{t('general:loading')}</p> : <Fragment>
-          {data?.docs && data.docs.length === 0 && <div className={`${baseClass}__no-results`}>
-              <p>
-                {i18n.t('general:noResults', {
-        label: isPolymorphic ? i18n.t('general:documents') : getTranslation(collectionConfig?.labels?.plural, i18n)
-    })}
-              </p>
-              <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}/>
-            </div>}
-          {data?.docs && data.docs.length > 0 && <RelationshipProvider>
-              <ListQueryProvider data={data} modifySearchParams={false} onQueryChange={setQuery} orderableFieldName={!field.orderable || Array.isArray(field.collection) ? undefined : `_${field.collection}_${fieldPath.replaceAll('.', '_')}_order`} query={memoizedListQuery}>
-                <TableColumnsProvider collectionSlug={isPolymorphic ? relationTo[0] : relationTo} columnState={columnState} LinkedCellOverride={<DrawerLink currentDrawerID={currentDrawerID} onDrawerOpen={onDrawerOpen}/>}>
-                  <AnimateHeight className={`${baseClass}__columns`} height={openColumnSelector ? 'auto' : 0} id={`${baseClass}-columns`}>
-                    <div className={`${baseClass}__columns-inner`}>
-                      {collectionConfig && <ColumnSelector collectionSlug={collectionConfig.slug}/>}
-                    </div>
-                  </AnimateHeight>
-                  {Table}
-                  <RelationshipTablePagination/>
-                </TableColumnsProvider>
-              </ListQueryProvider>
-            </RelationshipProvider>}
-        </Fragment>}
-      {AfterInput}
-      <DocumentDrawer initialData={initialDrawerData} onDelete={onDrawerDelete} onSave={onDrawerSave}/>
-    </div>;
+  }, [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__*/_jsxs("div", {
+        className: `${baseClass}__no-results`,
+        children: [/*#__PURE__*/_jsx("p", {
+          children: i18n.t('general:noResults', {
+            label: isPolymorphic ? i18n.t('general:documents') : getTranslation(collectionConfig?.labels?.plural, i18n)
+          })
+        }), /*#__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
+        })]
+      }), 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