@payloadcms/ui 3.0.0-canary.98cbdb9 → 3.0.0-canary.99cbde3

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/elements/RelationshipTable/Pagination.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,eAAO,MAAM,2BAA2B,EAAE,KAAK,CAAC,EAkB/C,CAAA"}

package/dist/elements/RelationshipTable/Pagination.js

@@ -0,0 +1,54 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { useListQuery } from '../../providers/ListQuery/index.js';
+import { Pagination } from '../Pagination/index.js';
+export const RelationshipTablePagination = () => {
+  const $ = _c(11);
+  const {
+    data,
+    handlePageChange
+  } = useListQuery();
+  const t0 = data.nextPage || 2;
+  let t1;
+  if ($[0] !== handlePageChange) {
+    t1 = e => {
+      handlePageChange(e);
+    };
+    $[0] = handlePageChange;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const t2 = data.page || 1;
+  const t3 = data.prevPage || undefined;
+  let t4;
+  if ($[2] !== data.hasNextPage || $[3] !== data.hasPrevPage || $[4] !== data.limit || $[5] !== data.totalPages || $[6] !== t0 || $[7] !== t1 || $[8] !== t2 || $[9] !== t3) {
+    t4 = _jsx(Pagination, {
+      hasNextPage: data.hasNextPage,
+      hasPrevPage: data.hasPrevPage,
+      limit: data.limit,
+      nextPage: t0,
+      numberOfNeighbors: 1,
+      onChange: t1,
+      page: t2,
+      prevPage: t3,
+      totalPages: data.totalPages
+    });
+    $[2] = data.hasNextPage;
+    $[3] = data.hasPrevPage;
+    $[4] = data.limit;
+    $[5] = data.totalPages;
+    $[6] = t0;
+    $[7] = t1;
+    $[8] = t2;
+    $[9] = t3;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  return t4;
+};
+//# sourceMappingURL=Pagination.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","names":["c","_c","React","useListQuery","Pagination","RelationshipTablePagination","$","data","handlePageChange","t0","nextPage","t1","e","t2","page","t3","prevPage","undefined","t4","hasNextPage","hasPrevPage","limit","totalPages","_jsx","numberOfNeighbors","onChange"],"sources":["../../../src/elements/RelationshipTable/Pagination.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { Pagination } from '../Pagination/index.js'\n\nexport const RelationshipTablePagination: React.FC = () => {\n  const { data, handlePageChange } = useListQuery()\n\n  return (\n    <Pagination\n      hasNextPage={data.hasNextPage}\n      hasPrevPage={data.hasPrevPage}\n      limit={data.limit}\n      nextPage={data.nextPage || 2}\n      numberOfNeighbors={1}\n      onChange={(e) => {\n        void handlePageChange(e)\n      }}\n      page={data.page || 1}\n      prevPage={data.prevPage || undefined}\n      totalPages={data.totalPages}\n    />\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,MAAW;AAElB,SAASC,YAAY,QAAQ;AAC7B,SAASC,UAAU,QAAQ;AAE3B,OAAO,MAAMC,2BAAA,GAAwCA,CAAA;EAAA,MAAAC,CAAA,GAAAL,EAAA;EACnD;IAAAM,IAAA;IAAAC;EAAA,IAAmCL,YAAA;EAOrB,MAAAM,EAAA,GAAAF,IAAA,CAAAG,QAAA,KAAiB;EAAA,IAAAC,EAAA;EAAA,IAAAL,CAAA,QAAAE,gBAAA;IAEjBG,EAAA,GAAAC,CAAA;MACHJ,gBAAA,CAAiBI,CAAA;IAAA;IACxBN,CAAA,MAAAE,gBAAA;IAAAF,CAAA,MAAAK,EAAA;EAAA;IAAAA,EAAA,GAAAL,CAAA;EAAA;EACM,MAAAO,EAAA,GAAAN,IAAA,CAAAO,IAAA,KAAa;EACT,MAAAC,EAAA,GAAAR,IAAA,CAAAS,QAAA,IAAAC,SAAiB;EAAA,IAAAC,EAAA;EAAA,IAAAZ,CAAA,QAAAC,IAAA,CAAAY,WAAA,IAAAb,CAAA,QAAAC,IAAA,CAAAa,WAAA,IAAAd,CAAA,QAAAC,IAAA,CAAAc,KAAA,IAAAf,CAAA,QAAAC,IAAA,CAAAe,UAAA,IAAAhB,CAAA,QAAAG,EAAA,IAAAH,CAAA,QAAAK,EAAA,IAAAL,CAAA,QAAAO,EAAA,IAAAP,CAAA,QAAAS,EAAA;IAV7BG,EAAA,GAAAK,IAAA,CAAAnB,UAAA;MAAAe,WAAA,EACeZ,IAAA,CAAAY,WAAA;MAAAC,WAAA,EACAb,IAAA,CAAAa,WAAA;MAAAC,KAAA,EACNd,IAAA,CAAAc,KAAA;MAAAX,QAAA,EACGD,EAAiB;MAAAe,iBAAA;MAAAC,QAAA,EAEjBd,EAEV;MAAAG,IAAA,EACMD,EAAa;MAAAG,QAAA,EACTD,EAAiB;MAAAO,UAAA,EACff,IAAA,CAAAe;IAAA,C;;;;;;;;;;;;;SAXdJ,E;CAcJ","ignoreList":[]}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { DocumentDrawerProps } from '../../../DocumentDrawer/types.js';
+import './index.scss';
+export declare const DrawerLink: React.FC<{
+    readonly onDrawerSave?: DocumentDrawerProps['onSave'];
+}>;
+//# sourceMappingURL=index.d.ts.map

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":"AAEA,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,CAAC;IAChC,QAAQ,CAAC,YAAY,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAA;CACtD,CA8BA,CAAA"}

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

@@ -0,0 +1,75 @@
+'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 { useCellProps } from '../../../TableColumns/RenderDefaultCell/index.js';
+import './index.scss';
+export const DrawerLink = props => {
+  const $ = _c(11);
+  const {
+    onDrawerSave: onDrawerSaveFromProps
+  } = props;
+  const cellProps = useCellProps();
+  const t0 = cellProps?.rowData.id;
+  const t1 = cellProps?.collectionConfig.slug;
+  let t2;
+  if ($[0] !== t0 || $[1] !== t1) {
+    t2 = {
+      id: t0,
+      collectionSlug: t1
+    };
+    $[0] = t0;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const [DocumentDrawer, DocumentDrawerToggler, t3] = useDocumentDrawer(t2);
+  const {
+    closeDrawer
+  } = t3;
+  let t4;
+  if ($[3] !== closeDrawer || $[4] !== onDrawerSaveFromProps) {
+    t4 = args => {
+      closeDrawer();
+      if (typeof onDrawerSaveFromProps === "function") {
+        onDrawerSaveFromProps(args);
+      }
+    };
+    $[3] = closeDrawer;
+    $[4] = onDrawerSaveFromProps;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  const onDrawerSave = t4;
+  let t5;
+  if ($[6] !== cellProps || $[7] !== DocumentDrawerToggler || $[8] !== onDrawerSave || $[9] !== DocumentDrawer) {
+    t5 = _jsxs("div", {
+      className: "drawer-link",
+      children: [_jsx(DefaultCell, {
+        ...cellProps,
+        className: "drawer-link__cell",
+        link: false,
+        onClick: null
+      }), _jsx(DocumentDrawerToggler, {
+        children: _jsx(EditIcon, {})
+      }), _jsx(DocumentDrawer, {
+        onSave: onDrawerSave
+      })]
+    });
+    $[6] = cellProps;
+    $[7] = DocumentDrawerToggler;
+    $[8] = onDrawerSave;
+    $[9] = DocumentDrawer;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  return t5;
+};
+//# 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","useCellProps","DrawerLink","props","$","onDrawerSave","onDrawerSaveFromProps","cellProps","t0","rowData","id","t1","collectionConfig","slug","t2","collectionSlug","DocumentDrawer","DocumentDrawerToggler","t3","closeDrawer","t4","args","t5","_jsxs","className","children","_jsx","link","onClick","onSave"],"sources":["../../../../../src/elements/RelationshipTable/cells/DrawerLink/index.tsx"],"sourcesContent":["'use client'\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 { useCellProps } from '../../../TableColumns/RenderDefaultCell/index.js'\nimport './index.scss'\n\nexport const DrawerLink: React.FC<{\n  readonly onDrawerSave?: DocumentDrawerProps['onSave']\n}> = (props) => {\n  const { onDrawerSave: onDrawerSaveFromProps } = props\n\n  const cellProps = useCellProps()\n\n  const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer }] = useDocumentDrawer({\n    id: cellProps?.rowData.id,\n    collectionSlug: cellProps?.collectionConfig.slug,\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 {...cellProps} className=\"drawer-link__cell\" link={false} onClick={null} />\n      <DocumentDrawerToggler>\n        <EditIcon />\n      </DocumentDrawerToggler>\n      <DocumentDrawer onSave={onDrawerSave} />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,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,GAERC,KAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EACH;IAAAU,YAAA,EAAAC;EAAA,IAAgDH,KAAA;EAEhD,MAAAI,SAAA,GAAkBN,YAAA;EAGZ,MAAAO,EAAA,GAAAD,SAAA,EAAAE,OAAA,CAAAC,EAAA;EACY,MAAAC,EAAA,GAAAJ,SAAA,EAAAK,gBAAA,CAAAC,IAAA;EAA4B,IAAAC,EAAA;EAAA,IAAAV,CAAA,QAAAI,EAAA,IAAAJ,CAAA,QAAAO,EAAA;IAFqCG,EAAA;MAAAJ,EAAA,EAC7EF,EAAmB;MAAAO,cAAA,EACPJ;IAA4B;IAC9CP,CAAA,MAAAI,EAAA;IAAAJ,CAAA,MAAAO,EAAA;IAAAP,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,QAAAE,qBAAA;IAM3Dc,EAAA,GAAAC,IAAA;MACEF,WAAA;MAAA,IAEI,OAAOb,qBAAA,KAA0B;QAC9BA,qBAAA,CAAsBe,IAAA;MAAA;IAAA;IAE/BjB,CAAA,MAAAe,WAAA;IAAAf,CAAA,MAAAE,qBAAA;IAAAF,CAAA,MAAAgB,EAAA;EAAA;IAAAA,EAAA,GAAAhB,CAAA;EAAA;EAPF,MAAAC,YAAA,GAAqBe,EAQiB;EAAA,IAAAE,EAAA;EAAA,IAAAlB,CAAA,QAAAG,SAAA,IAAAH,CAAA,QAAAa,qBAAA,IAAAb,CAAA,QAAAC,YAAA,IAAAD,CAAA,QAAAY,cAAA;IAIpCM,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EAAc;MAAAC,QAAA,GACbC,IAAA,CAAA1B,WAAA;QAAA,GAAiBO,SAAS;QAAAiB,SAAA,EAAY;QAAAG,IAAA;QAAAC,OAAA;MAAA,C,GACtCF,IAAA,CAACT,qBAAA;QAAAQ,QAAA,EACCC,IAAA,CAAA5B,QAAA,IAAC;MAAA,C,GAEH4B,IAAA,CAACV,cAAA;QAAAa,MAAA,EAAuBxB;MAAA,C;;;;;;;;;;SAL1BiB,E;CAQJ","ignoreList":[]}

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

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

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

@@ -0,0 +1,16 @@
+import type { JoinFieldClient, PaginatedDocs, Where } from 'payload';
+import React from 'react';
+import type { DocumentDrawerProps } from '../DocumentDrawer/types.js';
+import './index.scss';
+type RelationshipTableComponentProps = {
+    readonly allowCreate?: boolean;
+    readonly field: JoinFieldClient;
+    readonly filterOptions?: Where;
+    readonly initialData?: PaginatedDocs;
+    readonly initialDrawerData?: DocumentDrawerProps['initialData'];
+    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,EAEV,eAAe,EAEf,aAAa,EACb,KAAK,EACN,MAAM,SAAS,CAAA;AAEhB,OAAO,KAA0C,MAAM,OAAO,CAAA;AAO9D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AAkBrE,OAAO,cAAc,CAAA;AAKrB,KAAK,+BAA+B,GAAG;IACrC,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,KAAK,EAAE,eAAe,CAAA;IAC/B,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAA;IAC9B,QAAQ,CAAC,WAAW,CAAC,EAAE,aAAa,CAAA;IACpC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAA;IAC/D,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,CAoNvE,CAAA"}

package/dist/elements/RelationshipTable/index.js

@@ -0,0 +1,205 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { 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 { 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 { RelationshipProvider } from '../Table/RelationshipProvider/index.js';
+import { TableColumnsProvider } from '../TableColumns/index.js';
+import { DrawerLink } from './cells/DrawerLink/index.js';
+import './index.scss';
+import { RelationshipTablePagination } from './Pagination.js';
+const baseClass = 'relationship-table';
+export const RelationshipTable = props => {
+  const {
+    allowCreate = true,
+    filterOptions,
+    initialData: initialDataFromProps,
+    initialDrawerData,
+    Label,
+    relationTo
+  } = props;
+  const [Table, setTable] = useState(null);
+  const {
+    getEntityConfig
+  } = useConfig();
+  const {
+    permissions
+  } = useAuth();
+  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 [query, setQuery] = useState();
+  const [openColumnSelector, setOpenColumnSelector] = useState(false);
+  const [collectionConfig] = useState(() => getEntityConfig({
+    collectionSlug: relationTo
+  }));
+  const [isLoadingTable, setIsLoadingTable] = useState(true);
+  const [data, setData] = useState(initialData);
+  const [columnState, setColumnState] = useState();
+  const {
+    getTableState
+  } = useServerFunctions();
+  const renderTable = useCallback(async docs => {
+    const newQuery = {
+      ...(query || {}),
+      where: {
+        ...(query?.where || {})
+      }
+    };
+    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
+  }] = 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 {
+      withNewOrUpdatedDoc = [args.doc, ...data.docs];
+    }
+    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: [/*#__PURE__*/_jsx("p", {
+          children: i18n.t('general:noResults', {
+            label: getTranslation(collectionConfig?.labels?.plural, i18n)
+          })
+        }), canCreate && /*#__PURE__*/_jsx(Button, {
+          onClick: openDrawer,
+          children: i18n.t('general:createNewLabel', {
+            label: getTranslation(collectionConfig?.labels?.singular, i18n)
+          })
+        })]
+      }), data.docs && data.docs.length > 0 && /*#__PURE__*/_jsx(RelationshipProvider, {
+        children: /*#__PURE__*/_jsx(ListQueryProvider, {
+          collectionSlug: relationTo,
+          data: data,
+          defaultLimit: collectionConfig?.admin?.pagination?.defaultLimit,
+          modifySearchParams: false,
+          onQueryChange: setQuery,
+          preferenceKey: preferenceKey,
+          children: /*#__PURE__*/_jsxs(TableColumnsProvider, {
+            collectionSlug: relationTo,
+            columnState: columnState,
+            docs: data.docs,
+            LinkedCellOverride: /*#__PURE__*/_jsx(DrawerLink, {
+              onDrawerSave: onDrawerSave
+            }),
+            preferenceKey: preferenceKey,
+            renderRowTypes: true,
+            setTable: setTable,
+            sortColumnProps: {
+              appearance: 'condensed'
+            },
+            tableAppearance: "condensed",
+            children: [/*#__PURE__*/_jsx(AnimateHeight, {
+              className: `${baseClass}__columns`,
+              height: openColumnSelector ? 'auto' : 0,
+              id: `${baseClass}-columns`,
+              children: /*#__PURE__*/_jsx("div", {
+                className: `${baseClass}__columns-inner`,
+                children: /*#__PURE__*/_jsx(ColumnSelector, {
+                  collectionSlug: collectionConfig.slug
+                })
+              })
+            }), Table, /*#__PURE__*/_jsx(RelationshipTablePagination, {})]
+          })
+        })
+      })]
+    }), /*#__PURE__*/_jsx(DocumentDrawer, {
+      initialData: initialDrawerData,
+      onSave: onDrawerCreate
+    })]
+  });
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","Fragment","useCallback","useState","AnimateHeightImport","AnimateHeight","default","getTranslation","Button","Pill","useIgnoredEffect","ChevronIcon","useAuth","useConfig","ListQueryProvider","useServerFunctions","useTranslation","hoistQueryParamsToAnd","ColumnSelector","useDocumentDrawer","RelationshipProvider","TableColumnsProvider","DrawerLink","RelationshipTablePagination","baseClass","RelationshipTable","props","allowCreate","filterOptions","initialData","initialDataFromProps","initialDrawerData","Label","relationTo","Table","setTable","getEntityConfig","permissions","docs","Array","isArray","reduce","acc","doc","id","i18n","t","query","setQuery","openColumnSelector","setOpenColumnSelector","collectionConfig","collectionSlug","isLoadingTable","setIsLoadingTable","data","setData","columnState","setColumnState","getTableState","renderTable","newQuery","where","newData","state","newColumnState","NewTable","enableRowSelections","renderRowTypes","tableAppearance","DocumentDrawer","DocumentDrawerToggler","closeDrawer","openDrawer","onDrawerSave","args","foundDocIndex","findIndex","withNewOrUpdatedDoc","undefined","newDocs","onDrawerCreate","preferenceKey","canCreate","collections","create","permission","_jsxs","className","_jsx","icon","direction","onClick","pillStyle","length","label","labels","plural","singular","defaultLimit","admin","pagination","modifySearchParams","onQueryChange","LinkedCellOverride","sortColumnProps","appearance","height","slug","onSave"],"sources":["../../../src/elements/RelationshipTable/index.tsx"],"sourcesContent":["'use client'\nimport type {\n  ClientCollectionConfig,\n  JoinFieldClient,\n  ListQuery,\n  PaginatedDocs,\n  Where,\n} from 'payload'\n\nimport React, { Fragment, useCallback, 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'\nimport type { Column } from '../Table/index.js'\n\nimport { Button } from '../../elements/Button/index.js'\nimport { Pill } from '../../elements/Pill/index.js'\nimport { useIgnoredEffect } from '../../hooks/useIgnoredEffect.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { ListQueryProvider } from '../../providers/ListQuery/index.js'\nimport { useServerFunctions } from '../../providers/ServerFunctions/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { hoistQueryParamsToAnd } from '../../utilities/mergeListSearchAndWhere.js'\nimport { ColumnSelector } from '../ColumnSelector/index.js'\nimport { useDocumentDrawer } from '../DocumentDrawer/index.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 { RelationshipTablePagination } from './Pagination.js'\n\nconst baseClass = 'relationship-table'\n\ntype RelationshipTableComponentProps = {\n  readonly allowCreate?: boolean\n  readonly field: JoinFieldClient\n  readonly filterOptions?: Where\n  readonly initialData?: PaginatedDocs\n  readonly initialDrawerData?: DocumentDrawerProps['initialData']\n  readonly Label?: React.ReactNode\n  readonly relationTo: string\n}\n\nexport const RelationshipTable: React.FC<RelationshipTableComponentProps> = (props) => {\n  const {\n    allowCreate = true,\n    filterOptions,\n    initialData: initialDataFromProps,\n    initialDrawerData,\n    Label,\n    relationTo,\n  } = props\n  const [Table, setTable] = useState<React.ReactNode>(null)\n\n  const { getEntityConfig } = useConfig()\n\n  const { permissions } = useAuth()\n\n  const [initialData] = useState<PaginatedDocs>(() => {\n    if (initialDataFromProps) {\n      return {\n        ...initialDataFromProps,\n        docs: Array.isArray(initialDataFromProps.docs)\n          ? initialDataFromProps.docs.reduce((acc, doc) => {\n              if (typeof doc === 'string') {\n                return [\n                  ...acc,\n                  {\n                    id: doc,\n                  },\n                ]\n              }\n              return [...acc, doc]\n            }, [])\n          : [],\n      }\n    }\n  })\n\n  const { i18n, t } = useTranslation()\n\n  const [query, setQuery] = useState<ListQuery>()\n  const [openColumnSelector, setOpenColumnSelector] = useState(false)\n\n  const [collectionConfig] = useState(\n    () => getEntityConfig({ collectionSlug: relationTo }) as ClientCollectionConfig,\n  )\n\n  const [isLoadingTable, setIsLoadingTable] = useState(true)\n  const [data, setData] = useState<PaginatedDocs>(initialData)\n  const [columnState, setColumnState] = useState<Column[]>()\n\n  const { getTableState } = useServerFunctions()\n\n  const renderTable = useCallback(\n    async (docs?: PaginatedDocs['docs']) => {\n      const newQuery: ListQuery = {\n        ...(query || {}),\n        where: { ...(query?.where || {}) },\n      }\n\n      if (filterOptions) {\n        newQuery.where = hoistQueryParamsToAnd(newQuery.where, filterOptions)\n      }\n\n      const {\n        data: newData,\n        state: newColumnState,\n        Table: NewTable,\n      } = await getTableState({\n        collectionSlug: relationTo,\n        docs,\n        enableRowSelections: false,\n        query: newQuery,\n        renderRowTypes: true,\n        tableAppearance: 'condensed',\n      })\n\n      setData(newData)\n      setTable(NewTable)\n      setColumnState(newColumnState)\n      setIsLoadingTable(false)\n    },\n    [getTableState, relationTo, filterOptions, query],\n  )\n\n  useIgnoredEffect(\n    () => {\n      if (!Table || query) {\n        void renderTable()\n      }\n    },\n    [query],\n    [Table, renderTable],\n  )\n\n  const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer, openDrawer }] = 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      let withNewOrUpdatedDoc: PaginatedDocs['docs'] = undefined\n\n      if (foundDocIndex !== -1) {\n        const newDocs = [...data.docs]\n        newDocs[foundDocIndex] = args.doc\n        withNewOrUpdatedDoc = newDocs\n      } else {\n        withNewOrUpdatedDoc = [args.doc, ...data.docs]\n      }\n\n      void renderTable(withNewOrUpdatedDoc)\n    },\n    [data.docs, renderTable],\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  const canCreate =\n    allowCreate !== false && permissions?.collections?.[relationTo]?.create?.permission\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__header`}>\n        {Label}\n        <div className={`${baseClass}__actions`}>\n          {canCreate && <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      {isLoadingTable ? (\n        <p>{t('general:loading')}</p>\n      ) : (\n        <Fragment>\n          {data.docs && data.docs.length === 0 && (\n            <div className={`${baseClass}__no-results`}>\n              <p>\n                {i18n.t('general:noResults', {\n                  label: getTranslation(collectionConfig?.labels?.plural, i18n),\n                })}\n              </p>\n              {canCreate && (\n                <Button onClick={openDrawer}>\n                  {i18n.t('general:createNewLabel', {\n                    label: getTranslation(collectionConfig?.labels?.singular, i18n),\n                  })}\n                </Button>\n              )}\n            </div>\n          )}\n          {data.docs && data.docs.length > 0 && (\n            <RelationshipProvider>\n              <ListQueryProvider\n                collectionSlug={relationTo}\n                data={data}\n                defaultLimit={collectionConfig?.admin?.pagination?.defaultLimit}\n                modifySearchParams={false}\n                onQueryChange={setQuery}\n                preferenceKey={preferenceKey}\n              >\n                <TableColumnsProvider\n                  collectionSlug={relationTo}\n                  columnState={columnState}\n                  docs={data.docs}\n                  LinkedCellOverride={<DrawerLink onDrawerSave={onDrawerSave} />}\n                  preferenceKey={preferenceKey}\n                  renderRowTypes\n                  setTable={setTable}\n                  sortColumnProps={{\n                    appearance: 'condensed',\n                  }}\n                  tableAppearance=\"condensed\"\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                  {Table}\n                  <RelationshipTablePagination />\n                </TableColumnsProvider>\n              </ListQueryProvider>\n            </RelationshipProvider>\n          )}\n        </Fragment>\n      )}\n      <DocumentDrawer initialData={initialDrawerData} onSave={onDrawerCreate} />\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/RelationshipTable/index.scss

@@ -0,0 +1,28 @@
+@layer payload-default {
+  .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/RenderComponent/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const RenderComponent: React.FC<{
+    readonly Component?: React.ComponentType | React.ComponentType[];
+    readonly Fallback?: React.ComponentType;
+    readonly props?: object;
+}>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/RenderComponent/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC;IACrC,QAAQ,CAAC,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,KAAK,CAAC,aAAa,EAAE,CAAA;IAChE,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACvC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CACxB,CAUA,CAAA"}

package/dist/elements/RenderComponent/index.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+export const RenderComponent = ({
+  Component,
+  Fallback,
+  props = {}
+}) => {
+  if (Array.isArray(Component)) {
+    return Component.map((c, index) => /*#__PURE__*/_jsx(RenderComponent, {
+      Component: c,
+      props: props
+    }, index));
+  }
+  if (typeof Component === 'function') {
+    return /*#__PURE__*/_jsx(Component, {
+      ...props
+    });
+  }
+  return Fallback ? /*#__PURE__*/_jsx(Fallback, {
+    ...props
+  }) : null;
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","RenderComponent","Component","Fallback","props","Array","isArray","map","c","index","_jsx"],"sources":["../../../src/elements/RenderComponent/index.tsx"],"sourcesContent":["import React from 'react'\n\nexport const RenderComponent: React.FC<{\n  readonly Component?: React.ComponentType | React.ComponentType[]\n  readonly Fallback?: React.ComponentType\n  readonly props?: object\n}> = ({ Component, Fallback, props = {} }) => {\n  if (Array.isArray(Component)) {\n    return Component.map((c, index) => <RenderComponent Component={c} key={index} props={props} />)\n  }\n\n  if (typeof Component === 'function') {\n    return <Component {...props} />\n  }\n\n  return Fallback ? <Fallback {...props} /> : null\n}\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,OAAO,MAAMC,eAAA,GAIRA,CAAC;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,KAAA,GAAQ,CAAC;AAAC,CAAE;EACvC,IAAIC,KAAA,CAAMC,OAAO,CAACJ,SAAA,GAAY;IAC5B,OAAOA,SAAA,CAAUK,GAAG,CAAC,CAACC,CAAA,EAAGC,KAAA,kBAAUC,IAAA,CAACT,eAAA;MAAgBC,SAAA,EAAWM,CAAA;MAAeJ,KAAA,EAAOA;OAAdK,KAAA;EACzE;EAEA,IAAI,OAAOP,SAAA,KAAc,YAAY;IACnC,oBAAOQ,IAAA,CAACR,SAAA;MAAW,GAAGE;;EACxB;EAEA,OAAOD,QAAA,gBAAWO,IAAA,CAACP,QAAA;IAAU,GAAGC;OAAY;AAC9C","ignoreList":[]}

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

@@ -0,0 +1,18 @@
+type Args = {
+    CustomComponent?: React.ReactNode;
+    Fallback: React.ReactNode;
+};
+/**
+ * Renders a CustomComponent or a Fallback component.
+ * Only fallback if the Custom Component is undefined.
+ *
+ * If the CustomComponent is null, render null.
+ *
+ * @param {Object} args - Arguments object.
+ * @param {React.ReactNode} [args.CustomComponent] - Optional custom component to render.
+ * @param {React.ReactNode} args.Fallback - Fallback component to render if CustomComponent is undefined.
+ * @returns {React.ReactNode} Rendered component.
+ */
+export declare function RenderCustomComponent({ CustomComponent, Fallback }: Args): React.ReactNode;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/RenderCustomComponent/index.tsx"],"names":[],"mappings":"AAAA,KAAK,IAAI,GAAG;IACV,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,eAAe,EAAE,QAAQ,EAAE,EAAE,IAAI,GAAG,KAAK,CAAC,SAAS,CAE1F"}

package/dist/elements/RenderCustomComponent/index.js

@@ -0,0 +1,17 @@
+/**
+ * Renders a CustomComponent or a Fallback component.
+ * Only fallback if the Custom Component is undefined.
+ *
+ * If the CustomComponent is null, render null.
+ *
+ * @param {Object} args - Arguments object.
+ * @param {React.ReactNode} [args.CustomComponent] - Optional custom component to render.
+ * @param {React.ReactNode} args.Fallback - Fallback component to render if CustomComponent is undefined.
+ * @returns {React.ReactNode} Rendered component.
+ */export function RenderCustomComponent({
+  CustomComponent,
+  Fallback
+}) {
+  return CustomComponent !== undefined ? CustomComponent : Fallback;
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["RenderCustomComponent","CustomComponent","Fallback","undefined"],"sources":["../../../src/elements/RenderCustomComponent/index.tsx"],"sourcesContent":["type Args = {\n  CustomComponent?: React.ReactNode\n  Fallback: React.ReactNode\n}\n\n/**\n * Renders a CustomComponent or a Fallback component.\n * Only fallback if the Custom Component is undefined.\n *\n * If the CustomComponent is null, render null.\n *\n * @param {Object} args - Arguments object.\n * @param {React.ReactNode} [args.CustomComponent] - Optional custom component to render.\n * @param {React.ReactNode} args.Fallback - Fallback component to render if CustomComponent is undefined.\n * @returns {React.ReactNode} Rendered component.\n */\nexport function RenderCustomComponent({ CustomComponent, Fallback }: Args): React.ReactNode {\n  return CustomComponent !== undefined ? CustomComponent : Fallback\n}\n"],"mappings":"AAKA;;;;;;;;;;GAWA,OAAO,SAASA,sBAAsB;EAAEC,eAAe;EAAEC;AAAQ,CAAQ;EACvE,OAAOD,eAAA,KAAoBE,SAAA,GAAYF,eAAA,GAAkBC,QAAA;AAC3D","ignoreList":[]}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const RenderIfInViewport: React.FC<{
+    children: React.ReactNode;
+    className?: string;
+    forceRender?: boolean;
+}>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/RenderIfInViewport/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAwBA,CAAA"}

package/dist/elements/RenderIfInViewport/index.js

@@ -0,0 +1,63 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { useIntersect } from '../../hooks/useIntersect.js';
+export const RenderIfInViewport = t0 => {
+  const $ = _c(9);
+  const {
+    children,
+    className,
+    forceRender
+  } = t0;
+  const [hasRendered, setHasRendered] = React.useState(Boolean(forceRender));
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = {
+      rootMargin: "1000px"
+    };
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const [intersectionRef, entry] = useIntersect(t1, Boolean(forceRender));
+  const isIntersecting = Boolean(entry?.isIntersecting);
+  const isAboveViewport = entry?.boundingClientRect?.top < 0;
+  const shouldRender = forceRender || isIntersecting || isAboveViewport;
+  let t2;
+  let t3;
+  if ($[1] !== shouldRender || $[2] !== hasRendered) {
+    t2 = () => {
+      if (shouldRender && !hasRendered) {
+        setHasRendered(true);
+      }
+    };
+    t3 = [shouldRender, hasRendered];
+    $[1] = shouldRender;
+    $[2] = hasRendered;
+    $[3] = t2;
+    $[4] = t3;
+  } else {
+    t2 = $[3];
+    t3 = $[4];
+  }
+  React.useEffect(t2, t3);
+  const t4 = hasRendered ? children : null;
+  let t5;
+  if ($[5] !== className || $[6] !== intersectionRef || $[7] !== t4) {
+    t5 = _jsx("div", {
+      className,
+      ref: intersectionRef,
+      children: t4
+    });
+    $[5] = className;
+    $[6] = intersectionRef;
+    $[7] = t4;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  return t5;
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","useIntersect","RenderIfInViewport","t0","$","children","className","forceRender","hasRendered","setHasRendered","useState","Boolean","t1","Symbol","for","rootMargin","intersectionRef","entry","isIntersecting","isAboveViewport","boundingClientRect","top","shouldRender","t2","t3","useEffect","t4","t5","_jsx","ref"],"sources":["../../../src/elements/RenderIfInViewport/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useIntersect } from '../../hooks/useIntersect.js'\n\nexport const RenderIfInViewport: React.FC<{\n  children: React.ReactNode\n  className?: string\n  forceRender?: boolean\n}> = ({ children, className, forceRender }) => {\n  const [hasRendered, setHasRendered] = React.useState(Boolean(forceRender))\n  const [intersectionRef, entry] = useIntersect(\n    {\n      rootMargin: '1000px',\n    },\n    Boolean(forceRender),\n  )\n\n  const isIntersecting = Boolean(entry?.isIntersecting)\n  const isAboveViewport = entry?.boundingClientRect?.top < 0\n  const shouldRender = forceRender || isIntersecting || isAboveViewport\n\n  React.useEffect(() => {\n    if (shouldRender && !hasRendered) {\n      setHasRendered(true)\n    }\n  }, [shouldRender, hasRendered])\n\n  return (\n    <div className={className} ref={intersectionRef}>\n      {hasRendered ? children : null}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,YAAY,QAAQ;AAE7B,OAAO,MAAMC,kBAAA,GAIRC,EAAA;EAAA,MAAAC,CAAA,GAAAL,EAAA;EAAC;IAAAM,QAAA;IAAAC,SAAA;IAAAC;EAAA,IAAAJ,EAAoC;EACxC,OAAAK,WAAA,EAAAC,cAAA,IAAsCT,KAAA,CAAAU,QAAA,CAAeC,OAAA,CAAQJ,WAAA;EAAA,IAAAK,EAAA;EAAA,IAAAR,CAAA,QAAAS,MAAA,CAAAC,GAAA;IAE3DF,EAAA;MAAAG,UAAA,EACc;IAAA;IACdX,CAAA,MAAAQ,EAAA;EAAA;IAAAA,EAAA,GAAAR,CAAA;EAAA;EAHF,OAAAY,eAAA,EAAAC,KAAA,IAAiChB,YAAA,CAC/BW,EAEA,EACAD,OAAA,CAAQJ,WAAA;EAGV,MAAAW,cAAA,GAAuBP,OAAA,CAAQM,KAAA,EAAAC,cAAO;EACtC,MAAAC,eAAA,GAAwBF,KAAA,EAAAG,kBAAA,EAAAC,GAAA,IAAiC;EACzD,MAAAC,YAAA,GAAqBf,WAAA,IAAeW,cAAA,IAAkBC,eAAA;EAAA,IAAAI,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAApB,CAAA,QAAAkB,YAAA,IAAAlB,CAAA,QAAAI,WAAA;IAEtCe,EAAA,GAAAA,CAAA;MAAA,IACVD,YAAA,KAAiBd,WAAA;QACnBC,cAAA,KAAe;MAAA;IAAA;IAEhBe,EAAA,IAACF,YAAA,EAAcd,WAAA;IAAYJ,CAAA,MAAAkB,YAAA;IAAAlB,CAAA,MAAAI,WAAA;IAAAJ,CAAA,MAAAmB,EAAA;IAAAnB,CAAA,MAAAoB,EAAA;EAAA;IAAAD,EAAA,GAAAnB,CAAA;IAAAoB,EAAA,GAAApB,CAAA;EAAA;EAJ9BJ,KAAA,CAAAyB,SAAA,CAAgBF,EAIhB,EAAGC,EAA2B;EAIzB,MAAAE,EAAA,GAAAlB,WAAA,GAAcH,QAAA,OAAW;EAAA,IAAAsB,EAAA;EAAA,IAAAvB,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAAY,eAAA,IAAAZ,CAAA,QAAAsB,EAAA;IAD5BC,EAAA,GAAAC,IAAA,CAAC;MAAAtB,SAAA;MAAAuB,GAAA,EAA+Bb,eAAA;MAAAX,QAAA,EAC7BqB;IAAyB,C;;;;;;;;SAD5BC,E;CAIJ","ignoreList":[]}