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

package/dist/elements/RelationshipTable/index.js

@@ -1,447 +1,205 @@
 'use client';
 
-import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { Fragment, useCallback, useState } from 'react';
 import AnimateHeightImport from 'react-animate-height';
 const AnimateHeight = AnimateHeightImport.default || AnimateHeightImport;
 import { getTranslation } from '@payloadcms/translations';
 import { Button } from '../../elements/Button/index.js';
 import { Pill } from '../../elements/Pill/index.js';
-import { usePayloadAPI } from '../../hooks/usePayloadAPI.js';
+import { useIgnoredEffect } from '../../hooks/useIgnoredEffect.js';
 import { ChevronIcon } from '../../icons/Chevron/index.js';
 import { useAuth } from '../../providers/Auth/index.js';
 import { useConfig } from '../../providers/Config/index.js';
-import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
 import { ListQueryProvider } from '../../providers/ListQuery/index.js';
+import { useServerFunctions } from '../../providers/ServerFunctions/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
+import { hoistQueryParamsToAnd } from '../../utilities/mergeListSearchAndWhere.js';
 import { ColumnSelector } from '../ColumnSelector/index.js';
 import { useDocumentDrawer } from '../DocumentDrawer/index.js';
-import { hoistQueryParamsToAnd } from '../ListDrawer/DrawerContent.js';
 import { RelationshipProvider } from '../Table/RelationshipProvider/index.js';
 import { TableColumnsProvider } from '../TableColumns/index.js';
 import { DrawerLink } from './cells/DrawerLink/index.js';
 import './index.scss';
-import { RelationshipTableWrapper } from './TableWrapper.js';
+import { RelationshipTablePagination } from './Pagination.js';
 const baseClass = 'relationship-table';
 export const RelationshipTable = props => {
-  const $ = _c(79);
   const {
-    allowCreate: t0,
-    field,
+    allowCreate = true,
     filterOptions,
     initialData: initialDataFromProps,
-    initialDrawerState,
+    initialDrawerData,
     Label,
     relationTo
   } = props;
-  const allowCreate = t0 === undefined ? true : t0;
+  const [Table, setTable] = useState(null);
   const {
-    config: t1,
     getEntityConfig
   } = useConfig();
-  const {
-    routes: t2,
-    serverURL
-  } = t1;
-  const {
-    api
-  } = t2;
-  const {
-    id: docID
-  } = useDocumentInfo();
   const {
     permissions
   } = useAuth();
-  let t3;
-  if ($[0] !== initialDataFromProps) {
-    t3 = () => {
-      if (initialDataFromProps) {
-        return {
-          ...initialDataFromProps,
-          docs: Array.isArray(initialDataFromProps.docs) ? initialDataFromProps.docs.reduce((acc, doc) => {
-            if (typeof doc === "string") {
-              return acc;
-            }
-            return [...acc, doc];
-          }, []) : []
-        };
-      }
-    };
-    $[0] = initialDataFromProps;
-    $[1] = t3;
-  } else {
-    t3 = $[1];
-  }
-  const [initialData, setInitialData] = useState(t3);
+  const [initialData] = useState(() => {
+    if (initialDataFromProps) {
+      return {
+        ...initialDataFromProps,
+        docs: Array.isArray(initialDataFromProps.docs) ? initialDataFromProps.docs.reduce((acc, doc) => {
+          if (typeof doc === 'string') {
+            return [...acc, {
+              id: doc
+            }];
+          }
+          return [...acc, doc];
+        }, []) : []
+      };
+    }
+  });
   const {
     i18n,
     t
   } = useTranslation();
-  const [limit, setLimit] = useState();
-  const [sort, setSort] = useState(undefined);
-  const [page, setPage] = useState(1);
-  const [where, setWhere] = useState(null);
-  const [search, setSearch] = useState("");
+  const [query, setQuery] = useState();
   const [openColumnSelector, setOpenColumnSelector] = useState(false);
-  let t4;
-  if ($[2] !== getEntityConfig || $[3] !== relationTo) {
-    t4 = () => getEntityConfig({
-      collectionSlug: relationTo
-    });
-    $[2] = getEntityConfig;
-    $[3] = relationTo;
-    $[4] = t4;
-  } else {
-    t4 = $[4];
-  }
-  const [collectionConfig] = useState(t4);
-  const apiURL = `${serverURL}${api}/${collectionConfig.slug}`;
-  let t5;
-  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-    t5 = {
-      depth: 0
-    };
-    $[5] = t5;
-  } else {
-    t5 = $[5];
-  }
-  let t6;
-  if ($[6] !== initialData) {
-    t6 = {
-      initialData,
-      initialParams: t5
-    };
-    $[6] = initialData;
-    $[7] = t6;
-  } else {
-    t6 = $[7];
-  }
-  const [t7, t8] = usePayloadAPI(apiURL, t6);
+  const [collectionConfig] = useState(() => getEntityConfig({
+    collectionSlug: relationTo
+  }));
+  const [isLoadingTable, setIsLoadingTable] = useState(true);
+  const [data, setData] = useState(initialData);
+  const [columnState, setColumnState] = useState();
   const {
-    data
-  } = t7;
-  const {
-    setParams
-  } = t8;
-  let t9;
-  if ($[8] !== collectionConfig || $[9] !== where || $[10] !== filterOptions || $[11] !== search || $[12] !== limit || $[13] !== page || $[14] !== sort || $[15] !== setParams) {
-    t9 = () => {
-      const {
-        admin: t10,
-        versions
-      } = collectionConfig;
-      const {
-        listSearchableFields,
-        useAsTitle
-      } = t10 === undefined ? {} : t10;
-      const params = {
-        depth: 0
-      };
-      let copyOfWhere = {
-        ...(where || {})
-      };
-      if (filterOptions && typeof filterOptions !== "boolean") {
-        copyOfWhere = hoistQueryParamsToAnd(copyOfWhere, filterOptions);
-      }
-      if (search) {
-        const searchAsConditions = (listSearchableFields || [useAsTitle]).map(fieldName => ({
-          [fieldName]: {
-            like: search
-          }
-        }), []);
-        if (searchAsConditions.length > 0) {
-          const searchFilter = {
-            or: [...searchAsConditions]
-          };
-          copyOfWhere = hoistQueryParamsToAnd(copyOfWhere, searchFilter);
-        }
-      }
-      if (limit) {
-        params.limit = limit;
+    getTableState
+  } = useServerFunctions();
+  const renderTable = useCallback(async docs => {
+    const newQuery = {
+      ...(query || {}),
+      where: {
+        ...(query?.where || {})
       }
-      if (page) {
-        params.page = page;
-      }
-      if (sort) {
-        params.sort = sort;
-      }
-      if (copyOfWhere) {
-        params.where = copyOfWhere;
-      }
-      if (versions?.drafts) {
-        params.draft = "true";
-      }
-      setParams(params);
-    };
-    $[8] = collectionConfig;
-    $[9] = where;
-    $[10] = filterOptions;
-    $[11] = search;
-    $[12] = limit;
-    $[13] = page;
-    $[14] = sort;
-    $[15] = setParams;
-    $[16] = t9;
-  } else {
-    t9 = $[16];
-  }
-  let t10;
-  if ($[17] !== page || $[18] !== sort || $[19] !== where || $[20] !== search || $[21] !== collectionConfig || $[22] !== filterOptions || $[23] !== initialData || $[24] !== limit || $[25] !== setParams) {
-    t10 = [page, sort, where, search, collectionConfig, filterOptions, initialData, limit, setParams];
-    $[17] = page;
-    $[18] = sort;
-    $[19] = where;
-    $[20] = search;
-    $[21] = collectionConfig;
-    $[22] = filterOptions;
-    $[23] = initialData;
-    $[24] = limit;
-    $[25] = setParams;
-    $[26] = t10;
-  } else {
-    t10 = $[26];
-  }
-  useEffect(t9, t10);
-  let t11;
-  if ($[27] !== relationTo) {
-    t11 = {
-      collectionSlug: relationTo
     };
-    $[27] = relationTo;
-    $[28] = t11;
-  } else {
-    t11 = $[28];
-  }
-  const [DocumentDrawer, DocumentDrawerToggler, t12] = useDocumentDrawer(t11);
-  const {
+    if (filterOptions) {
+      newQuery.where = hoistQueryParamsToAnd(newQuery.where, filterOptions);
+    }
+    const {
+      data: newData,
+      state: newColumnState,
+      Table: NewTable
+    } = await getTableState({
+      collectionSlug: relationTo,
+      docs,
+      enableRowSelections: false,
+      query: newQuery,
+      renderRowTypes: true,
+      tableAppearance: 'condensed'
+    });
+    setData(newData);
+    setTable(NewTable);
+    setColumnState(newColumnState);
+    setIsLoadingTable(false);
+  }, [getTableState, relationTo, filterOptions, query]);
+  useIgnoredEffect(() => {
+    if (!Table || query) {
+      void renderTable();
+    }
+  }, [query], [Table, renderTable]);
+  const [DocumentDrawer, DocumentDrawerToggler, {
     closeDrawer,
     openDrawer
-  } = t12;
-  let t13;
-  if ($[29] !== data) {
-    t13 = args => {
-      const foundDocIndex = data?.docs?.findIndex(doc_0 => doc_0.id === args.doc.id);
-      if (foundDocIndex !== -1) {
-        const newDocs = [...data.docs];
-        newDocs[foundDocIndex] = args.doc;
-        setInitialData({
-          ...data,
-          docs: newDocs
-        });
-      } else {
-        setInitialData({
-          ...data,
-          docs: [args.doc, ...data.docs]
-        });
-      }
-    };
-    $[29] = data;
-    $[30] = t13;
-  } else {
-    t13 = $[30];
-  }
-  const onDrawerSave = t13;
-  let t14;
-  if ($[31] !== closeDrawer || $[32] !== onDrawerSave) {
-    t14 = args_0 => {
-      closeDrawer();
-      onDrawerSave(args_0);
-    };
-    $[31] = closeDrawer;
-    $[32] = onDrawerSave;
-    $[33] = t14;
-  } else {
-    t14 = $[33];
-  }
-  const onDrawerCreate = t14;
-  const preferenceKey = `${relationTo}-list`;
-  const canCreate = allowCreate !== false && permissions?.collections?.[relationTo]?.create?.permission;
-  let t15;
-  if ($[34] !== canCreate || $[35] !== i18n || $[36] !== DocumentDrawerToggler) {
-    t15 = canCreate && _jsx(DocumentDrawerToggler, {
-      children: i18n.t("fields:addNew")
-    });
-    $[34] = canCreate;
-    $[35] = i18n;
-    $[36] = DocumentDrawerToggler;
-    $[37] = t15;
-  } else {
-    t15 = $[37];
-  }
-  const t16 = `${baseClass}__toggle-columns ${openColumnSelector ? `${baseClass}__buttons-active` : ""}`;
-  const t17 = openColumnSelector ? "up" : "down";
-  let t18;
-  if ($[38] !== t17 || $[39] !== openColumnSelector || $[40] !== t || $[41] !== t16 || $[42] !== t15 || $[43] !== Label || $[44] !== data || $[45] !== collectionConfig || $[46] !== i18n || $[47] !== canCreate || $[48] !== openDrawer || $[49] !== limit || $[50] !== field || $[51] !== onDrawerSave || $[52] !== relationTo || $[53] !== preferenceKey || $[54] !== sort || $[55] !== docID || $[56] !== initialDrawerState || $[57] !== onDrawerCreate || $[58] !== DocumentDrawer) {
-    let t19;
-    if ($[60] !== openColumnSelector) {
-      t19 = () => setOpenColumnSelector(!openColumnSelector);
-      $[60] = openColumnSelector;
-      $[61] = t19;
+  }] = useDocumentDrawer({
+    collectionSlug: relationTo
+  });
+  const onDrawerSave = useCallback(args => {
+    const foundDocIndex = data?.docs?.findIndex(doc_0 => doc_0.id === args.doc.id);
+    let withNewOrUpdatedDoc = undefined;
+    if (foundDocIndex !== -1) {
+      const newDocs = [...data.docs];
+      newDocs[foundDocIndex] = args.doc;
+      withNewOrUpdatedDoc = newDocs;
     } else {
-      t19 = $[61];
+      withNewOrUpdatedDoc = [args.doc, ...data.docs];
     }
-    let t20;
-    if ($[62] !== data.docs || $[63] !== collectionConfig || $[64] !== i18n || $[65] !== canCreate || $[66] !== openDrawer) {
-      t20 = data.docs && data.docs.length === 0 && _jsxs("div", {
+    void renderTable(withNewOrUpdatedDoc);
+  }, [data.docs, renderTable]);
+  const onDrawerCreate = useCallback(args_0 => {
+    closeDrawer();
+    void onDrawerSave(args_0);
+  }, [closeDrawer, onDrawerSave]);
+  const preferenceKey = `${relationTo}-list`;
+  const canCreate = allowCreate !== false && permissions?.collections?.[relationTo]?.create?.permission;
+  return /*#__PURE__*/_jsxs("div", {
+    className: baseClass,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__header`,
+      children: [Label, /*#__PURE__*/_jsxs("div", {
+        className: `${baseClass}__actions`,
+        children: [canCreate && /*#__PURE__*/_jsx(DocumentDrawerToggler, {
+          children: i18n.t('fields:addNew')
+        }), /*#__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",
+          children: t('general:columns')
+        })]
+      })]
+    }), 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: [_jsx("p", {
-          children: i18n.t("general:noResults", {
+        children: [/*#__PURE__*/_jsx("p", {
+          children: i18n.t('general:noResults', {
             label: getTranslation(collectionConfig?.labels?.plural, i18n)
           })
-        }), canCreate && _jsx(Button, {
+        }), canCreate && /*#__PURE__*/_jsx(Button, {
           onClick: openDrawer,
-          children: i18n.t("general:createNewLabel", {
+          children: i18n.t('general:createNewLabel', {
             label: getTranslation(collectionConfig?.labels?.singular, i18n)
           })
         })]
-      });
-      $[62] = data.docs;
-      $[63] = collectionConfig;
-      $[64] = i18n;
-      $[65] = canCreate;
-      $[66] = openDrawer;
-      $[67] = t20;
-    } else {
-      t20 = $[67];
-    }
-    let t21;
-    if ($[68] !== data || $[69] !== limit || $[70] !== collectionConfig || $[71] !== i18n || $[72] !== field || $[73] !== onDrawerSave || $[74] !== openColumnSelector || $[75] !== relationTo || $[76] !== preferenceKey || $[77] !== sort) {
-      t21 = data.docs && data.docs.length > 0 && _jsx(RelationshipProvider, {
-        children: _jsx(ListQueryProvider, {
-          data,
-          defaultLimit: limit || collectionConfig?.admin?.pagination?.defaultLimit,
-          defaultSort: sort,
-          handlePageChange: setPage,
-          handlePerPageChange: setLimit,
-          handleSearchChange: setSearch,
-          handleSortChange: setSort,
-          handleWhereChange: setWhere,
+      }), data.docs && data.docs.length > 0 && /*#__PURE__*/_jsx(RelationshipProvider, {
+        children: /*#__PURE__*/_jsx(ListQueryProvider, {
+          collectionSlug: relationTo,
+          data: data,
+          defaultLimit: collectionConfig?.admin?.pagination?.defaultLimit,
           modifySearchParams: false,
-          preferenceKey,
-          children: _jsxs(TableColumnsProvider, {
-            beforeRows: [{
-              accessor: "collection",
-              active: true,
-              cellProps: {
-                field: {
-                  admin: {
-                    components: {
-                      Cell: {
-                        type: "client",
-                        RenderedComponent: _jsx(Pill, {
-                          children: getTranslation(collectionConfig.labels.singular, i18n)
-                        })
-                      },
-                      Label: null
-                    }
-                  }
-                }
-              },
-              Heading: i18n.t("version:type")
-            }],
-            cellProps: [{}, {
-              field: {
-                admin: {
-                  components: {
-                    Cell: {
-                      type: "client",
-                      RenderedComponent: _jsx(DrawerLink, {
-                        field,
-                        onDrawerSave
-                      })
-                    }
-                  }
-                }
-              },
-              link: false
-            }],
+          onQueryChange: setQuery,
+          preferenceKey: preferenceKey,
+          children: /*#__PURE__*/_jsxs(TableColumnsProvider, {
             collectionSlug: relationTo,
-            preferenceKey,
+            columnState: columnState,
+            docs: data.docs,
+            LinkedCellOverride: /*#__PURE__*/_jsx(DrawerLink, {
+              onDrawerSave: onDrawerSave
+            }),
+            preferenceKey: preferenceKey,
+            renderRowTypes: true,
+            setTable: setTable,
             sortColumnProps: {
-              appearance: "condensed"
+              appearance: 'condensed'
             },
-            children: [_jsx(AnimateHeight, {
+            tableAppearance: "condensed",
+            children: [/*#__PURE__*/_jsx(AnimateHeight, {
               className: `${baseClass}__columns`,
-              height: openColumnSelector ? "auto" : 0,
+              height: openColumnSelector ? 'auto' : 0,
               id: `${baseClass}-columns`,
-              children: _jsx("div", {
+              children: /*#__PURE__*/_jsx("div", {
                 className: `${baseClass}__columns-inner`,
-                children: _jsx(ColumnSelector, {
+                children: /*#__PURE__*/_jsx(ColumnSelector, {
                   collectionSlug: collectionConfig.slug
                 })
               })
-            }), _jsx(RelationshipTableWrapper, {
-              collectionConfig
-            })]
+            }), Table, /*#__PURE__*/_jsx(RelationshipTablePagination, {})]
           })
         })
-      });
-      $[68] = data;
-      $[69] = limit;
-      $[70] = collectionConfig;
-      $[71] = i18n;
-      $[72] = field;
-      $[73] = onDrawerSave;
-      $[74] = openColumnSelector;
-      $[75] = relationTo;
-      $[76] = preferenceKey;
-      $[77] = sort;
-      $[78] = t21;
-    } else {
-      t21 = $[78];
-    }
-    t18 = _jsxs("div", {
-      className: baseClass,
-      children: [_jsxs("div", {
-        className: `${baseClass}__header`,
-        children: [Label, _jsxs("div", {
-          className: `${baseClass}__actions`,
-          children: [t15, _jsx(Pill, {
-            "aria-controls": `${baseClass}-columns`,
-            "aria-expanded": openColumnSelector,
-            className: t16,
-            icon: _jsx(ChevronIcon, {
-              direction: t17
-            }),
-            onClick: t19,
-            pillStyle: "light",
-            children: t("general:columns")
-          })]
-        })]
-      }), t20, t21, _jsx(DocumentDrawer, {
-        initialData: {
-          category: docID
-        },
-        initialState: initialDrawerState,
-        onSave: onDrawerCreate
       })]
-    });
-    $[38] = t17;
-    $[39] = openColumnSelector;
-    $[40] = t;
-    $[41] = t16;
-    $[42] = t15;
-    $[43] = Label;
-    $[44] = data;
-    $[45] = collectionConfig;
-    $[46] = i18n;
-    $[47] = canCreate;
-    $[48] = openDrawer;
-    $[49] = limit;
-    $[50] = field;
-    $[51] = onDrawerSave;
-    $[52] = relationTo;
-    $[53] = preferenceKey;
-    $[54] = sort;
-    $[55] = docID;
-    $[56] = initialDrawerState;
-    $[57] = onDrawerCreate;
-    $[58] = DocumentDrawer;
-    $[59] = t18;
-  } else {
-    t18 = $[59];
-  }
-  return t18;
+    }), /*#__PURE__*/_jsx(DocumentDrawer, {
+      initialData: initialDrawerData,
+      onSave: onDrawerCreate
+    })]
+  });
 };
 //# sourceMappingURL=index.js.map