@payloadcms/ui 3.0.0-canary.03427d3 → 3.0.0-canary.0374de4

package/dist/elements/RelationshipTable/cells/DrawerLink/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/RelationshipTable/cells/DrawerLink/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAElE,OAAO,KAAsB,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAA;AAM3E,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAC/B;IACE,QAAQ,CAAC,YAAY,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAA;CACtD,GAAG,kBAAkB,CAAC,eAAe,CAAC,CAoCxC,CAAA"}

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

@@ -0,0 +1,82 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback } from 'react';
+import { EditIcon } from '../../../../icons/Edit/index.js';
+import { useDocumentDrawer } from '../../../DocumentDrawer/index.js';
+import { DefaultCell } from '../../../Table/DefaultCell/index.js';
+import { useTableCell } from '../../../Table/index.js';
+import './index.scss';
+export const DrawerLink = props => {
+  const $ = _c(12);
+  const context = useTableCell();
+  const {
+    field,
+    onDrawerSave: onDrawerSaveFromProps
+  } = props;
+  const {
+    cellProps,
+    customCellContext: t0,
+    rowData
+  } = context;
+  const {
+    collectionSlug
+  } = t0;
+  let t1;
+  if ($[0] !== rowData.id || $[1] !== collectionSlug) {
+    t1 = {
+      id: rowData.id,
+      collectionSlug
+    };
+    $[0] = rowData.id;
+    $[1] = collectionSlug;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const [DocumentDrawer, DocumentDrawerToggler, t2] = useDocumentDrawer(t1);
+  const {
+    closeDrawer
+  } = t2;
+  let t3;
+  if ($[3] !== closeDrawer || $[4] !== onDrawerSaveFromProps) {
+    t3 = args => {
+      closeDrawer();
+      if (typeof onDrawerSaveFromProps === "function") {
+        onDrawerSaveFromProps(args);
+      }
+    };
+    $[3] = closeDrawer;
+    $[4] = onDrawerSaveFromProps;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  const onDrawerSave = t3;
+  let t4;
+  if ($[6] !== field || $[7] !== cellProps || $[8] !== DocumentDrawerToggler || $[9] !== onDrawerSave || $[10] !== DocumentDrawer) {
+    t4 = _jsxs("div", {
+      className: "drawer-link",
+      children: [_jsx(DefaultCell, {
+        field,
+        ...cellProps,
+        className: "drawer-link__cell"
+      }), _jsx(DocumentDrawerToggler, {
+        children: _jsx(EditIcon, {})
+      }), _jsx(DocumentDrawer, {
+        onSave: onDrawerSave
+      })]
+    });
+    $[6] = field;
+    $[7] = cellProps;
+    $[8] = DocumentDrawerToggler;
+    $[9] = onDrawerSave;
+    $[10] = DocumentDrawer;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  return t4;
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","useCallback","EditIcon","useDocumentDrawer","DefaultCell","useTableCell","DrawerLink","props","$","context","field","onDrawerSave","onDrawerSaveFromProps","cellProps","customCellContext","t0","rowData","collectionSlug","t1","id","DocumentDrawer","DocumentDrawerToggler","t2","closeDrawer","t3","args","t4","_jsxs","className","children","_jsx","onSave"],"sources":["../../../../../src/elements/RelationshipTable/cells/DrawerLink/index.tsx"],"sourcesContent":["'use client'\nimport type { CellComponentProps, JoinFieldClient } from 'payload'\n\nimport React, { useCallback } from 'react'\n\nimport type { DocumentDrawerProps } from '../../../DocumentDrawer/types.js'\n\nimport { EditIcon } from '../../../../icons/Edit/index.js'\nimport { useDocumentDrawer } from '../../../DocumentDrawer/index.js'\nimport { DefaultCell } from '../../../Table/DefaultCell/index.js'\nimport { useTableCell } from '../../../Table/index.js'\nimport './index.scss'\n\nexport const DrawerLink: React.FC<\n  {\n    readonly onDrawerSave?: DocumentDrawerProps['onSave']\n  } & CellComponentProps<JoinFieldClient>\n> = (props) => {\n  const context = useTableCell()\n  const { field, onDrawerSave: onDrawerSaveFromProps } = props\n\n  const {\n    cellProps,\n    customCellContext: { collectionSlug },\n    rowData,\n  } = context\n\n  const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer }] = useDocumentDrawer({\n    id: rowData.id,\n    collectionSlug,\n  })\n\n  const onDrawerSave = useCallback<DocumentDrawerProps['onSave']>(\n    (args) => {\n      closeDrawer()\n\n      if (typeof onDrawerSaveFromProps === 'function') {\n        void onDrawerSaveFromProps(args)\n      }\n    },\n    [closeDrawer, onDrawerSaveFromProps],\n  )\n\n  return (\n    <div className=\"drawer-link\">\n      <DefaultCell field={field} {...cellProps} className=\"drawer-link__cell\" />\n      <DocumentDrawerToggler>\n        <EditIcon />\n      </DocumentDrawerToggler>\n      <DocumentDrawer onSave={onDrawerSave} />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,IAASC,WAAW,QAAQ;AAInC,SAASC,QAAQ,QAAQ;AACzB,SAASC,iBAAiB,QAAQ;AAClC,SAASC,WAAW,QAAQ;AAC5B,SAASC,YAAY,QAAQ;AAC7B,OAAO;AAEP,OAAO,MAAMC,UAAA,GAITC,KAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EACF,MAAAU,OAAA,GAAgBJ,YAAA;EAChB;IAAAK,KAAA;IAAAC,YAAA,EAAAC;EAAA,IAAuDL,KAAA;EAEvD;IAAAM,SAAA;IAAAC,iBAAA,EAAAC,EAAA;IAAAC;EAAA,IAIIP,OAAA;EAFiB;IAAAQ;EAAA,IAAAF,EAAkB;EAAA,IAAAG,EAAA;EAAA,IAAAV,CAAA,QAAAQ,OAAA,CAAAG,EAAA,IAAAX,CAAA,QAAAS,cAAA;IAI4CC,EAAA;MAAAC,EAAA,EAC7EH,OAAA,CAAAG,EAAA;MAAAF;IAAA;IAENT,CAAA,MAAAQ,OAAA,CAAAG,EAAA;IAAAX,CAAA,MAAAS,cAAA;IAAAT,CAAA,MAAAU,EAAA;EAAA;IAAAA,EAAA,GAAAV,CAAA;EAAA;EAHA,OAAAY,cAAA,EAAAC,qBAAA,EAAAC,EAAA,IAAiEnB,iBAAA,CAAkBe,EAGnF;EAH8C;IAAAK;EAAA,IAAAD,EAAe;EAAA,IAAAE,EAAA;EAAA,IAAAhB,CAAA,QAAAe,WAAA,IAAAf,CAAA,QAAAI,qBAAA;IAM3DY,EAAA,GAAAC,IAAA;MACEF,WAAA;MAAA,IAEI,OAAOX,qBAAA,KAA0B;QAC9BA,qBAAA,CAAsBa,IAAA;MAAA;IAAA;IAE/BjB,CAAA,MAAAe,WAAA;IAAAf,CAAA,MAAAI,qBAAA;IAAAJ,CAAA,MAAAgB,EAAA;EAAA;IAAAA,EAAA,GAAAhB,CAAA;EAAA;EAPF,MAAAG,YAAA,GAAqBa,EAQiB;EAAA,IAAAE,EAAA;EAAA,IAAAlB,CAAA,QAAAE,KAAA,IAAAF,CAAA,QAAAK,SAAA,IAAAL,CAAA,QAAAa,qBAAA,IAAAb,CAAA,QAAAG,YAAA,IAAAH,CAAA,SAAAY,cAAA;IAIpCM,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EAAc;MAAAC,QAAA,GACbC,IAAA,CAAA1B,WAAA;QAAAM,KAAA;QAAA,GAA+BG,SAAS;QAAAe,SAAA,EAAY;MAAA,C,GACpDE,IAAA,CAACT,qBAAA;QAAAQ,QAAA,EACCC,IAAA,CAAA5B,QAAA,IAAC;MAAA,C,GAEH4B,IAAA,CAACV,cAAA;QAAAW,MAAA,EAAuBpB;MAAA,C;;;;;;;;;;;SAL1Be,E;CAQJ","ignoreList":[]}

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

@@ -0,0 +1,4 @@
+.drawer-link {
+  display: flex;
+  gap: calc(var(--base) / 2);
+}

package/dist/elements/RelationshipTable/index.d.ts

@@ -0,0 +1,13 @@
+import type { JoinFieldClient, PaginatedDocs, Where } from 'payload';
+import React from 'react';
+import './index.scss';
+type RelationshipTableComponentProps = {
+    readonly field: JoinFieldClient;
+    readonly filterOptions?: boolean | Where;
+    readonly initialData?: PaginatedDocs;
+    readonly Label?: React.ReactNode;
+    readonly relationTo: string;
+};
+export declare const RelationshipTable: React.FC<RelationshipTableComponentProps>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/RelationshipTable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/RelationshipTable/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAGV,eAAe,EACf,aAAa,EACb,KAAK,EACN,MAAM,SAAS,CAAA;AAEhB,OAAO,KAA2C,MAAM,OAAO,CAAA;AAsB/D,OAAO,cAAc,CAAA;AAKrB,KAAK,+BAA+B,GAAG;IACrC,QAAQ,CAAC,KAAK,EAAE,eAAe,CAAA;IAC/B,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IACxC,QAAQ,CAAC,WAAW,CAAC,EAAE,aAAa,CAAA;IACpC,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;CAC5B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,+BAA+B,CAiPvE,CAAA"}

package/dist/elements/RelationshipTable/index.js

@@ -0,0 +1,365 @@
+'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 AnimateHeightImport from 'react-animate-height';
+const AnimateHeight = AnimateHeightImport.default || AnimateHeightImport;
+import { getTranslation } from '@payloadcms/translations';
+import { Pill } from '../../elements/Pill/index.js';
+import { usePayloadAPI } from '../../hooks/usePayloadAPI.js';
+import { ChevronIcon } from '../../icons/Chevron/index.js';
+import { useConfig } from '../../providers/Config/index.js';
+import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
+import { ListQueryProvider } from '../../providers/ListQuery/index.js';
+import { useTranslation } from '../../providers/Translation/index.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';
+const baseClass = 'relationship-table';
+export const RelationshipTable = props => {
+  const $ = _c(51);
+  const {
+    field,
+    filterOptions,
+    initialData: initialDataFromProps,
+    Label,
+    relationTo
+  } = props;
+  const {
+    config: t0,
+    getEntityConfig
+  } = useConfig();
+  const {
+    routes: t1,
+    serverURL
+  } = t0;
+  const {
+    api
+  } = t1;
+  const {
+    id: docID
+  } = useDocumentInfo();
+  const [initialData, setInitialData] = useState(initialDataFromProps);
+  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 [openColumnSelector, setOpenColumnSelector] = useState(false);
+  let t2;
+  if ($[0] !== getEntityConfig || $[1] !== relationTo) {
+    t2 = () => getEntityConfig({
+      collectionSlug: relationTo
+    });
+    $[0] = getEntityConfig;
+    $[1] = relationTo;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const [collectionConfig] = useState(t2);
+  const apiURL = `${serverURL}${api}/${collectionConfig.slug}`;
+  let t3;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = {
+      depth: 0
+    };
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== initialData) {
+    t4 = {
+      initialData,
+      initialParams: t3
+    };
+    $[4] = initialData;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  const [t5, t6] = usePayloadAPI(apiURL, t4);
+  const {
+    data
+  } = t5;
+  const {
+    setParams
+  } = t6;
+  let t7;
+  if ($[6] !== collectionConfig || $[7] !== where || $[8] !== filterOptions || $[9] !== search || $[10] !== limit || $[11] !== page || $[12] !== sort || $[13] !== setParams) {
+    t7 = () => {
+      const {
+        admin: t8,
+        versions
+      } = collectionConfig;
+      const {
+        listSearchableFields,
+        useAsTitle
+      } = t8 === undefined ? {} : t8;
+      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;
+      }
+      if (page) {
+        params.page = page;
+      }
+      if (sort) {
+        params.sort = sort;
+      }
+      if (copyOfWhere) {
+        params.where = copyOfWhere;
+      }
+      if (versions?.drafts) {
+        params.draft = "true";
+      }
+      setParams(params);
+    };
+    $[6] = collectionConfig;
+    $[7] = where;
+    $[8] = filterOptions;
+    $[9] = search;
+    $[10] = limit;
+    $[11] = page;
+    $[12] = sort;
+    $[13] = setParams;
+    $[14] = t7;
+  } else {
+    t7 = $[14];
+  }
+  let t8;
+  if ($[15] !== page || $[16] !== sort || $[17] !== where || $[18] !== search || $[19] !== collectionConfig || $[20] !== filterOptions || $[21] !== initialData || $[22] !== limit || $[23] !== setParams) {
+    t8 = [page, sort, where, search, collectionConfig, filterOptions, initialData, limit, setParams];
+    $[15] = page;
+    $[16] = sort;
+    $[17] = where;
+    $[18] = search;
+    $[19] = collectionConfig;
+    $[20] = filterOptions;
+    $[21] = initialData;
+    $[22] = limit;
+    $[23] = setParams;
+    $[24] = t8;
+  } else {
+    t8 = $[24];
+  }
+  useEffect(t7, t8);
+  let t9;
+  if ($[25] !== relationTo) {
+    t9 = {
+      collectionSlug: relationTo
+    };
+    $[25] = relationTo;
+    $[26] = t9;
+  } else {
+    t9 = $[26];
+  }
+  const [DocumentDrawer, DocumentDrawerToggler, t10] = useDocumentDrawer(t9);
+  const {
+    closeDrawer
+  } = t10;
+  let t11;
+  if ($[27] !== data) {
+    t11 = args => {
+      const foundDocIndex = data?.docs?.findIndex(doc => doc.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]
+        });
+      }
+    };
+    $[27] = data;
+    $[28] = t11;
+  } else {
+    t11 = $[28];
+  }
+  const onDrawerSave = t11;
+  let t12;
+  if ($[29] !== closeDrawer || $[30] !== onDrawerSave) {
+    t12 = args_0 => {
+      closeDrawer();
+      onDrawerSave(args_0);
+    };
+    $[29] = closeDrawer;
+    $[30] = onDrawerSave;
+    $[31] = t12;
+  } else {
+    t12 = $[31];
+  }
+  const onDrawerCreate = t12;
+  const preferenceKey = `${relationTo}-list`;
+  let t13;
+  if ($[32] !== i18n || $[33] !== DocumentDrawerToggler || $[34] !== openColumnSelector || $[35] !== t || $[36] !== Label || $[37] !== limit || $[38] !== collectionConfig || $[39] !== field || $[40] !== onDrawerSave || $[41] !== relationTo || $[42] !== preferenceKey || $[43] !== data || $[44] !== sort || $[45] !== docID || $[46] !== onDrawerCreate || $[47] !== DocumentDrawer) {
+    let t14;
+    if ($[49] !== openColumnSelector) {
+      t14 = () => setOpenColumnSelector(!openColumnSelector);
+      $[49] = openColumnSelector;
+      $[50] = t14;
+    } else {
+      t14 = $[50];
+    }
+    t13 = _jsxs("div", {
+      className: baseClass,
+      children: [_jsxs("div", {
+        className: `${baseClass}__header`,
+        children: [Label, _jsxs("div", {
+          className: `${baseClass}__actions`,
+          children: [_jsx(DocumentDrawerToggler, {
+            children: i18n.t("fields:addNew")
+          }), _jsx(Pill, {
+            "aria-controls": `${baseClass}-columns`,
+            "aria-expanded": openColumnSelector,
+            className: `${baseClass}__toggle-columns ${openColumnSelector ? `${baseClass}__buttons-active` : ""}`,
+            icon: _jsx(ChevronIcon, {
+              direction: openColumnSelector ? "up" : "down"
+            }),
+            onClick: t14,
+            pillStyle: "light",
+            children: t("general:columns")
+          })]
+        })]
+      }), _jsx(RelationshipProvider, {
+        children: _jsx(ListQueryProvider, {
+          data,
+          defaultLimit: limit || collectionConfig?.admin?.pagination?.defaultLimit,
+          defaultSort: sort,
+          handlePageChange: setPage,
+          handlePerPageChange: setLimit,
+          handleSearchChange: setSearch,
+          handleSortChange: setSort,
+          handleWhereChange: setWhere,
+          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
+            }],
+            collectionSlug: relationTo,
+            preferenceKey,
+            sortColumnProps: {
+              appearance: "condensed"
+            },
+            children: [_jsx(AnimateHeight, {
+              className: `${baseClass}__columns`,
+              height: openColumnSelector ? "auto" : 0,
+              id: `${baseClass}-columns`,
+              children: _jsx("div", {
+                className: `${baseClass}__columns-inner`,
+                children: _jsx(ColumnSelector, {
+                  collectionSlug: collectionConfig.slug
+                })
+              })
+            }), _jsx(RelationshipTableWrapper, {
+              collectionConfig
+            })]
+          })
+        })
+      }), _jsx(DocumentDrawer, {
+        initialData: {
+          category: docID
+        },
+        initialState: {
+          category: {
+            initialValue: docID,
+            valid: true,
+            value: docID
+          }
+        },
+        onSave: onDrawerCreate
+      })]
+    });
+    $[32] = i18n;
+    $[33] = DocumentDrawerToggler;
+    $[34] = openColumnSelector;
+    $[35] = t;
+    $[36] = Label;
+    $[37] = limit;
+    $[38] = collectionConfig;
+    $[39] = field;
+    $[40] = onDrawerSave;
+    $[41] = relationTo;
+    $[42] = preferenceKey;
+    $[43] = data;
+    $[44] = sort;
+    $[45] = docID;
+    $[46] = onDrawerCreate;
+    $[47] = DocumentDrawer;
+    $[48] = t13;
+  } else {
+    t13 = $[48];
+  }
+  return t13;
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","useCallback","useEffect","useState","AnimateHeightImport","AnimateHeight","default","getTranslation","Pill","usePayloadAPI","ChevronIcon","useConfig","useDocumentInfo","ListQueryProvider","useTranslation","ColumnSelector","useDocumentDrawer","hoistQueryParamsToAnd","RelationshipProvider","TableColumnsProvider","DrawerLink","RelationshipTableWrapper","baseClass","RelationshipTable","props","$","field","filterOptions","initialData","initialDataFromProps","Label","relationTo","config","t0","getEntityConfig","routes","t1","serverURL","api","id","docID","setInitialData","i18n","t","limit","setLimit","sort","setSort","undefined","page","setPage","where","setWhere","search","setSearch","openColumnSelector","setOpenColumnSelector","t2","collectionSlug","collectionConfig","apiURL","slug","t3","Symbol","for","depth","t4","initialParams","t5","t6","data","setParams","t7","admin","t8","versions","listSearchableFields","useAsTitle","params","copyOfWhere","searchAsConditions","map","fieldName","like","length","searchFilter","or","drafts","draft","t9","DocumentDrawer","DocumentDrawerToggler","t10","closeDrawer","t11","args","foundDocIndex","docs","findIndex","doc","newDocs","onDrawerSave","t12","args_0","onDrawerCreate","preferenceKey","t13","t14","_jsxs","className","children","_jsx","icon","direction","pillStyle","defaultLimit","pagination","defaultSort","handlePageChange","handlePerPageChange","handleSearchChange","handleSortChange","handleWhereChange","modifySearchParams","beforeRows","accessor","active","cellProps","components","Cell","type","RenderedComponent","labels","singular","sortColumnProps","appearance","height","category","initialState","initialValue","valid","value","onSave"],"sources":["../../../src/elements/RelationshipTable/index.tsx"],"sourcesContent":["'use client'\nimport type {\n  ClientCollectionConfig,\n  ClientField,\n  JoinFieldClient,\n  PaginatedDocs,\n  Where,\n} from 'payload'\n\nimport React, { useCallback, useEffect, useState } from 'react'\nimport AnimateHeightImport from 'react-animate-height'\n\nconst AnimateHeight = AnimateHeightImport.default || AnimateHeightImport\n\nimport { getTranslation } from '@payloadcms/translations'\n\nimport type { DocumentDrawerProps } from '../DocumentDrawer/types.js'\n\nimport { Pill } from '../../elements/Pill/index.js'\nimport { usePayloadAPI } from '../../hooks/usePayloadAPI.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { ListQueryProvider } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ColumnSelector } from '../ColumnSelector/index.js'\nimport { useDocumentDrawer } from '../DocumentDrawer/index.js'\nimport { hoistQueryParamsToAnd } from '../ListDrawer/DrawerContent.js'\nimport { RelationshipProvider } from '../Table/RelationshipProvider/index.js'\nimport { TableColumnsProvider } from '../TableColumns/index.js'\nimport { DrawerLink } from './cells/DrawerLink/index.js'\nimport './index.scss'\nimport { RelationshipTableWrapper } from './TableWrapper.js'\n\nconst baseClass = 'relationship-table'\n\ntype RelationshipTableComponentProps = {\n  readonly field: JoinFieldClient\n  readonly filterOptions?: boolean | Where\n  readonly initialData?: PaginatedDocs\n  readonly Label?: React.ReactNode\n  readonly relationTo: string\n}\n\nexport const RelationshipTable: React.FC<RelationshipTableComponentProps> = (props) => {\n  const { field, filterOptions, initialData: initialDataFromProps, Label, relationTo } = props\n\n  const {\n    config: {\n      routes: { api },\n      serverURL,\n    },\n    getEntityConfig,\n  } = useConfig()\n\n  const { id: docID } = useDocumentInfo()\n\n  const [initialData, setInitialData] = useState<PaginatedDocs>(initialDataFromProps)\n\n  const { i18n, t } = useTranslation()\n\n  const [limit, setLimit] = useState<number>()\n  const [sort, setSort] = useState<string | undefined>(undefined)\n  const [page, setPage] = useState<number>(1)\n  const [where, setWhere] = useState<null | Where>(null)\n  const [search, setSearch] = useState<string>('')\n  const [openColumnSelector, setOpenColumnSelector] = useState(false)\n\n  const [collectionConfig] = useState(\n    () => getEntityConfig({ collectionSlug: relationTo }) as ClientCollectionConfig,\n  )\n\n  const apiURL = `${serverURL}${api}/${collectionConfig.slug}`\n\n  const [{ data }, { setParams }] = usePayloadAPI(apiURL, {\n    initialData,\n    initialParams: {\n      depth: 0,\n    },\n  })\n\n  useEffect(() => {\n    const {\n      admin: { listSearchableFields, useAsTitle } = {} as ClientCollectionConfig['admin'],\n      versions,\n    } = collectionConfig\n\n    const params: {\n      cacheBust?: number\n      depth?: number\n      draft?: string\n      limit?: number\n      page?: number\n      search?: string\n      sort?: string\n      where?: unknown\n    } = {\n      depth: 0,\n    }\n\n    let copyOfWhere = { ...(where || {}) }\n\n    if (filterOptions && typeof filterOptions !== 'boolean') {\n      copyOfWhere = hoistQueryParamsToAnd(copyOfWhere, filterOptions)\n    }\n\n    if (search) {\n      const searchAsConditions = (listSearchableFields || [useAsTitle]).map((fieldName) => {\n        return {\n          [fieldName]: {\n            like: search,\n          },\n        }\n      }, [])\n\n      if (searchAsConditions.length > 0) {\n        const searchFilter: Where = {\n          or: [...searchAsConditions],\n        }\n\n        copyOfWhere = hoistQueryParamsToAnd(copyOfWhere, searchFilter)\n      }\n    }\n\n    if (limit) {\n      params.limit = limit\n    }\n    if (page) {\n      params.page = page\n    }\n    if (sort) {\n      params.sort = sort\n    }\n    if (copyOfWhere) {\n      params.where = copyOfWhere\n    }\n    if (versions?.drafts) {\n      params.draft = 'true'\n    }\n\n    setParams(params)\n  }, [page, sort, where, search, collectionConfig, filterOptions, initialData, limit, setParams])\n\n  const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer }] = useDocumentDrawer({\n    collectionSlug: relationTo,\n  })\n\n  const onDrawerSave = useCallback<DocumentDrawerProps['onSave']>(\n    (args) => {\n      const foundDocIndex = data?.docs?.findIndex((doc) => doc.id === args.doc.id)\n\n      if (foundDocIndex !== -1) {\n        const newDocs = [...data.docs]\n        newDocs[foundDocIndex] = args.doc\n        setInitialData({\n          ...data,\n          docs: newDocs,\n        })\n      } else {\n        setInitialData({\n          ...data,\n          docs: [args.doc, ...data.docs],\n        })\n      }\n    },\n    [data],\n  )\n\n  const onDrawerCreate = useCallback<DocumentDrawerProps['onSave']>(\n    (args) => {\n      closeDrawer()\n      void onDrawerSave(args)\n    },\n    [closeDrawer, onDrawerSave],\n  )\n\n  const preferenceKey = `${relationTo}-list`\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__header`}>\n        {Label}\n        <div className={`${baseClass}__actions`}>\n          <DocumentDrawerToggler>{i18n.t('fields:addNew')}</DocumentDrawerToggler>\n          <Pill\n            aria-controls={`${baseClass}-columns`}\n            aria-expanded={openColumnSelector}\n            className={`${baseClass}__toggle-columns ${\n              openColumnSelector ? `${baseClass}__buttons-active` : ''\n            }`}\n            icon={<ChevronIcon direction={openColumnSelector ? 'up' : 'down'} />}\n            onClick={() => setOpenColumnSelector(!openColumnSelector)}\n            pillStyle=\"light\"\n          >\n            {t('general:columns')}\n          </Pill>\n        </div>\n      </div>\n      <RelationshipProvider>\n        <ListQueryProvider\n          data={data}\n          defaultLimit={limit || collectionConfig?.admin?.pagination?.defaultLimit}\n          defaultSort={sort}\n          handlePageChange={setPage}\n          handlePerPageChange={setLimit}\n          handleSearchChange={setSearch}\n          handleSortChange={setSort}\n          handleWhereChange={setWhere}\n          modifySearchParams={false}\n          preferenceKey={preferenceKey}\n        >\n          <TableColumnsProvider\n            beforeRows={[\n              {\n                accessor: 'collection',\n                active: true,\n                cellProps: {\n                  field: {\n                    admin: {\n                      components: {\n                        Cell: {\n                          type: 'client',\n                          RenderedComponent: (\n                            <Pill>{getTranslation(collectionConfig.labels.singular, i18n)}</Pill>\n                          ),\n                        },\n                        Label: null,\n                      },\n                    },\n                  } as ClientField,\n                },\n                Heading: i18n.t('version:type'),\n              },\n            ]}\n            cellProps={[\n              {},\n              {\n                field: {\n                  admin: {\n                    components: {\n                      Cell: {\n                        type: 'client',\n                        RenderedComponent: <DrawerLink field={field} onDrawerSave={onDrawerSave} />,\n                      },\n                    },\n                  },\n                } as ClientField,\n                link: false,\n              },\n            ]}\n            collectionSlug={relationTo}\n            preferenceKey={preferenceKey}\n            sortColumnProps={{\n              appearance: 'condensed',\n            }}\n          >\n            {/* @ts-expect-error TODO: get this CJS import to work, eslint keeps removing the type assertion */}\n            <AnimateHeight\n              className={`${baseClass}__columns`}\n              height={openColumnSelector ? 'auto' : 0}\n              id={`${baseClass}-columns`}\n            >\n              <div className={`${baseClass}__columns-inner`}>\n                <ColumnSelector collectionSlug={collectionConfig.slug} />\n              </div>\n            </AnimateHeight>\n            <RelationshipTableWrapper collectionConfig={collectionConfig} />\n          </TableColumnsProvider>\n        </ListQueryProvider>\n      </RelationshipProvider>\n      <DocumentDrawer\n        initialData={{\n          category: docID,\n        }}\n        initialState={{\n          category: {\n            initialValue: docID,\n            valid: true,\n            value: docID,\n          },\n        }}\n        onSave={onDrawerCreate}\n      />\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/RelationshipTable/index.scss

@@ -0,0 +1,26 @@
+.relationship-table {
+  position: relative;
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: var(--base);
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--base);
+  }
+
+  &__columns-inner {
+    padding-bottom: var(--base);
+  }
+
+  .table {
+    th,
+    td:first-child {
+      min-width: 0;
+    }
+  }
+}

package/dist/elements/RenderTitle/index.js

@@ -1,34 +1,64 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { Fragment } from 'react';
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
 import { IDLabel } from '../IDLabel/index.js';
 import './index.scss';
 const baseClass = 'render-title';
-export const RenderTitle = (props)=>{
-    const { className, element = 'h1', fallback, title: titleFromProps } = props;
-    const { id, isInitializing, title: titleFromContext } = useDocumentInfo();
-    const title = titleFromProps || titleFromContext || fallback;
-    const idAsTitle = title === id;
-    const Tag = element;
-    // Render and invisible character to prevent layout shift when the title populates from context
-    const EmptySpace = /*#__PURE__*/ _jsx(Fragment, {
-        children: " "
+export const RenderTitle = props => {
+  const $ = _c(10);
+  const {
+    className,
+    element: t0,
+    fallback,
+    title: titleFromProps
+  } = props;
+  const element = t0 === undefined ? "h1" : t0;
+  const {
+    id,
+    isInitializing,
+    title: titleFromContext
+  } = useDocumentInfo();
+  const title = titleFromProps || titleFromContext || fallback;
+  const idAsTitle = title === id;
+  const Tag = element;
+  let t1;
+  if ($[0] !== idAsTitle || $[1] !== className || $[2] !== isInitializing || $[3] !== id || $[4] !== title || $[5] !== Tag) {
+    const EmptySpace = _jsx(Fragment, {
+      children: "\xA0"
     });
-    return /*#__PURE__*/ _jsx(Tag, {
-        className: [
-            className,
-            baseClass,
-            idAsTitle && `${baseClass}--has-id`
-        ].filter(Boolean).join(' '),
-        title: title,
-        children: isInitializing ? EmptySpace : /*#__PURE__*/ _jsx(Fragment, {
-            children: idAsTitle ? /*#__PURE__*/ _jsx(IDLabel, {
-                className: `${baseClass}__id`,
-                id: id
-            }) : title || EmptySpace
-        })
+    const t2 = idAsTitle && `${baseClass}--has-id`;
+    let t3;
+    if ($[7] !== className || $[8] !== t2) {
+      t3 = [className, baseClass, t2].filter(Boolean);
+      $[7] = className;
+      $[8] = t2;
+      $[9] = t3;
+    } else {
+      t3 = $[9];
+    }
+    t1 = _jsx(Tag, {
+      className: t3.join(" "),
+      title,
+      children: isInitializing ? EmptySpace : _jsx(Fragment, {
+        children: idAsTitle ? _jsx(IDLabel, {
+          className: `${baseClass}__id`,
+          id
+        }) : title || EmptySpace
+      })
     });
+    $[0] = idAsTitle;
+    $[1] = className;
+    $[2] = isInitializing;
+    $[3] = id;
+    $[4] = title;
+    $[5] = Tag;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  return t1;
 };
-
 //# sourceMappingURL=index.js.map

package/dist/elements/RenderTitle/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/RenderTitle/index.tsx"],"sourcesContent":["'use client'\nimport React, { Fragment } from 'react'\n\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { IDLabel } from '../IDLabel/index.js'\nimport './index.scss'\n\nconst baseClass = 'render-title'\n\nexport type RenderTitleProps = {\n  className?: string\n  element?: React.ElementType\n  fallback?: string\n  fallbackToID?: boolean\n  title?: string\n}\n\nexport const RenderTitle: React.FC<RenderTitleProps> = (props) => {\n  const { className, element = 'h1', fallback, title: titleFromProps } = props\n\n  const { id, isInitializing, title: titleFromContext } = useDocumentInfo()\n\n  const title = titleFromProps || titleFromContext || fallback\n\n  const idAsTitle = title === id\n\n  const Tag = element\n\n  // Render and invisible character to prevent layout shift when the title populates from context\n  const EmptySpace = <Fragment>&nbsp;</Fragment>\n\n  return (\n    <Tag\n      className={[className, baseClass, idAsTitle && `${baseClass}--has-id`]\n        .filter(Boolean)\n        .join(' ')}\n      title={title}\n    >\n      {isInitializing ? (\n        EmptySpace\n      ) : (\n        <Fragment>\n          {idAsTitle ? <IDLabel className={`${baseClass}__id`} id={id} /> : title || EmptySpace}\n        </Fragment>\n      )}\n    </Tag>\n  )\n}\n"],"names":["React","Fragment","useDocumentInfo","IDLabel","baseClass","RenderTitle","props","className","element","fallback","title","titleFromProps","id","isInitializing","titleFromContext","idAsTitle","Tag","EmptySpace","filter","Boolean","join"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,OAAOA,SAASC,QAAQ,QAAQ,QAAO;AAEvC,SAASC,eAAe,QAAQ,wCAAuC;AACvE,SAASC,OAAO,QAAQ,sBAAqB;AAC7C,OAAO,eAAc;AAErB,MAAMC,YAAY;AAUlB,OAAO,MAAMC,cAA0C,CAACC;IACtD,MAAM,EAAEC,SAAS,EAAEC,UAAU,IAAI,EAAEC,QAAQ,EAAEC,OAAOC,cAAc,EAAE,GAAGL;IAEvE,MAAM,EAAEM,EAAE,EAAEC,cAAc,EAAEH,OAAOI,gBAAgB,EAAE,GAAGZ;IAExD,MAAMQ,QAAQC,kBAAkBG,oBAAoBL;IAEpD,MAAMM,YAAYL,UAAUE;IAE5B,MAAMI,MAAMR;IAEZ,+FAA+F;IAC/F,MAAMS,2BAAa,KAAChB;kBAAS;;IAE7B,qBACE,KAACe;QACCT,WAAW;YAACA;YAAWH;YAAWW,aAAa,CAAC,EAAEX,UAAU,QAAQ,CAAC;SAAC,CACnEc,MAAM,CAACC,SACPC,IAAI,CAAC;QACRV,OAAOA;kBAENG,iBACCI,2BAEA,KAAChB;sBACEc,0BAAY,KAACZ;gBAAQI,WAAW,CAAC,EAAEH,UAAU,IAAI,CAAC;gBAAEQ,IAAIA;iBAASF,SAASO;;;AAKrF,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","React","Fragment","useDocumentInfo","IDLabel","baseClass","RenderTitle","props","$","className","element","t0","fallback","title","titleFromProps","undefined","id","isInitializing","titleFromContext","idAsTitle","Tag","t1","EmptySpace","_jsx","children","t2","t3","filter","Boolean","join"],"sources":["../../../src/elements/RenderTitle/index.tsx"],"sourcesContent":["'use client'\nimport React, { Fragment } from 'react'\n\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { IDLabel } from '../IDLabel/index.js'\nimport './index.scss'\n\nconst baseClass = 'render-title'\n\nexport type RenderTitleProps = {\n  className?: string\n  element?: React.ElementType\n  fallback?: string\n  fallbackToID?: boolean\n  title?: string\n}\n\nexport const RenderTitle: React.FC<RenderTitleProps> = (props) => {\n  const { className, element = 'h1', fallback, title: titleFromProps } = props\n\n  const { id, isInitializing, title: titleFromContext } = useDocumentInfo()\n\n  const title = titleFromProps || titleFromContext || fallback\n\n  const idAsTitle = title === id\n\n  const Tag = element\n\n  // Render and invisible character to prevent layout shift when the title populates from context\n  const EmptySpace = <Fragment>&nbsp;</Fragment>\n\n  return (\n    <Tag\n      className={[className, baseClass, idAsTitle && `${baseClass}--has-id`]\n        .filter(Boolean)\n        .join(' ')}\n      title={title}\n    >\n      {isInitializing ? (\n        EmptySpace\n      ) : (\n        <Fragment>\n          {idAsTitle ? <IDLabel className={`${baseClass}__id`} id={id} /> : title || EmptySpace}\n        </Fragment>\n      )}\n    </Tag>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,eAAe,QAAQ;AAChC,SAASC,OAAO,QAAQ;AACxB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAUlB,OAAO,MAAMC,WAAA,GAA0CC,KAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EACrD;IAAAS,SAAA;IAAAC,OAAA,EAAAC,EAAA;IAAAC,QAAA;IAAAC,KAAA,EAAAC;EAAA,IAAuEP,KAAA;EAApD,MAAAG,OAAA,GAAAC,EAAc,KAAAI,SAAA,GAAJ,IAAI,GAAdJ,EAAc;EAEjC;IAAAK,EAAA;IAAAC,cAAA;IAAAJ,KAAA,EAAAK;EAAA,IAAwDf,eAAA;EAExD,MAAAU,KAAA,GAAcC,cAAA,IAAkBI,gBAAA,IAAoBN,QAAA;EAEpD,MAAAO,SAAA,GAAkBN,KAAA,KAAUG,EAAA;EAE5B,MAAAI,GAAA,GAAYV,OAAA;EAAA,IAAAW,EAAA;EAAA,IAAAb,CAAA,QAAAW,SAAA,IAAAX,CAAA,QAAAC,SAAA,IAAAD,CAAA,QAAAS,cAAA,IAAAT,CAAA,QAAAQ,EAAA,IAAAR,CAAA,QAAAK,KAAA,IAAAL,CAAA,QAAAY,GAAA;IAGZ,MAAAE,UAAA,GAAmBC,IAAA,CAAArB,QAAA;MAAAsB,QAAA,EAAU;IAAA,C;IAIS,MAAAC,EAAA,GAAAN,SAAA,IAAa,GAAAd,SAAA,UAAsB;IAAA,IAAAqB,EAAA;IAAA,IAAAlB,CAAA,QAAAC,SAAA,IAAAD,CAAA,QAAAiB,EAAA;MAA1DC,EAAA,IAACjB,SAAA,EAAAJ,SAAA,EAAsBoB,EAAmC,EAAAE,MAAA,CAAAC,OAC3D;MAAApB,CAAA,MAAAC,SAAA;MAAAD,CAAA,MAAAiB,EAAA;MAAAjB,CAAA,MAAAkB,EAAA;IAAA;MAAAA,EAAA,GAAAlB,CAAA;IAAA;IAFZa,EAAA,GAAAE,IAAA,CAACH,GAAA;MAAAX,SAAA,EACYiB,EACD,CAAAG,IAAA,CACF;MAAAhB,KAAA;MAAAW,QAAA,EAGPP,cAAA,GACCK,UAAA,GAEAC,IAAA,CAAArB,QAAA;QAAAsB,QAAA,EACGL,SAAA,GAAYI,IAAA,CAAAnB,OAAA;UAAAK,SAAA,EAAoB,GAAAJ,SAAA,MAAkB;UAAAW;QAAA,C,IAAeH,KAAA,IAASS;MAAA,C;;;;;;;;;;;;SAVjFD,E;CAeJ","ignoreList":[]}