@payloadcms/ui 3.0.0-beta.34 → 3.0.0-beta.36

package/dist/elements/Hamburger/index.js

@@ -1,4 +1,5 @@
 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Chevron } from '../../icons/Chevron/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
@@ -6,33 +7,53 @@ const baseClass = 'hamburger';
 export const Hamburger = (props)=>{
     const { t } = useTranslation();
     const { closeIcon = 'x', isActive = false } = props;
-    return /*#__PURE__*/ React.createElement("div", {
-        className: baseClass
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__wrapper`
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__icon`
-    }, !isActive && /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__lines`,
-        title: t('general:open')
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__line ${baseClass}__top`
-    }), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__line ${baseClass}__middle`
-    }), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__line ${baseClass}__bottom`
-    })), isActive && /*#__PURE__*/ React.createElement("div", {
-        "aria-label": closeIcon === 'collapse' ? t('general:collapse') : t('general:close'),
-        className: `${baseClass}__close-icon`,
-        title: closeIcon === 'collapse' ? t('general:collapse') : t('general:close')
-    }, closeIcon === 'x' && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__line ${baseClass}__x-left`
-    }), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__line ${baseClass}__x-right`
-    })), closeIcon === 'collapse' && /*#__PURE__*/ React.createElement(Chevron, {
-        className: `${baseClass}__collapse-chevron`,
-        direction: "left"
-    })))));
+    return /*#__PURE__*/ _jsx("div", {
+        className: baseClass,
+        children: /*#__PURE__*/ _jsx("div", {
+            className: `${baseClass}__wrapper`,
+            children: /*#__PURE__*/ _jsxs("div", {
+                className: `${baseClass}__icon`,
+                children: [
+                    !isActive && /*#__PURE__*/ _jsxs("div", {
+                        className: `${baseClass}__lines`,
+                        title: t('general:open'),
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: `${baseClass}__line ${baseClass}__top`
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                className: `${baseClass}__line ${baseClass}__middle`
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                className: `${baseClass}__line ${baseClass}__bottom`
+                            })
+                        ]
+                    }),
+                    isActive && /*#__PURE__*/ _jsxs("div", {
+                        "aria-label": closeIcon === 'collapse' ? t('general:collapse') : t('general:close'),
+                        className: `${baseClass}__close-icon`,
+                        title: closeIcon === 'collapse' ? t('general:collapse') : t('general:close'),
+                        children: [
+                            closeIcon === 'x' && /*#__PURE__*/ _jsxs(React.Fragment, {
+                                children: [
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: `${baseClass}__line ${baseClass}__x-left`
+                                    }),
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: `${baseClass}__line ${baseClass}__x-right`
+                                    })
+                                ]
+                            }),
+                            closeIcon === 'collapse' && /*#__PURE__*/ _jsx(Chevron, {
+                                className: `${baseClass}__collapse-chevron`,
+                                direction: "left"
+                            })
+                        ]
+                    })
+                ]
+            })
+        })
+    });
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Hamburger/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { Chevron } from '../../icons/Chevron/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'hamburger'\n\nexport const Hamburger: React.FC<{\n  closeIcon?: 'collapse' | 'x'\n  isActive?: boolean\n}> = (props) => {\n  const { t } = useTranslation()\n  const { closeIcon = 'x', isActive = false } = props\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__wrapper`}>\n        <div className={`${baseClass}__icon`}>\n          {!isActive && (\n            <div className={`${baseClass}__lines`} title={t('general:open')}>\n              <div className={`${baseClass}__line ${baseClass}__top`} />\n              <div className={`${baseClass}__line ${baseClass}__middle`} />\n              <div className={`${baseClass}__line ${baseClass}__bottom`} />\n            </div>\n          )}\n          {isActive && (\n            <div\n              aria-label={closeIcon === 'collapse' ? t('general:collapse') : t('general:close')}\n              className={`${baseClass}__close-icon`}\n              title={closeIcon === 'collapse' ? t('general:collapse') : t('general:close')}\n            >\n              {closeIcon === 'x' && (\n                <React.Fragment>\n                  <div className={`${baseClass}__line ${baseClass}__x-left`} />\n                  <div className={`${baseClass}__line ${baseClass}__x-right`} />\n                </React.Fragment>\n              )}\n              {closeIcon === 'collapse' && (\n                <Chevron className={`${baseClass}__collapse-chevron`} direction=\"left\" />\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":["React","Chevron","useTranslation","baseClass","Hamburger","props","t","closeIcon","isActive","div","className","title","aria-label","Fragment","direction"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,OAAOA,WAAW,QAAO;AAEzB,SAASC,OAAO,QAAQ,+BAA8B;AACtD,SAASC,cAAc,QAAQ,uCAAsC;AAGrE,MAAMC,YAAY;AAElB,OAAO,MAAMC,YAGR,CAACC;IACJ,MAAM,EAAEC,CAAC,EAAE,GAAGJ;IACd,MAAM,EAAEK,YAAY,GAAG,EAAEC,WAAW,KAAK,EAAE,GAAGH;IAE9C,qBACE,oBAACI;QAAIC,WAAWP;qBACd,oBAACM;QAAIC,WAAW,CAAC,EAAEP,UAAU,SAAS,CAAC;qBACrC,oBAACM;QAAIC,WAAW,CAAC,EAAEP,UAAU,MAAM,CAAC;OACjC,CAACK,0BACA,oBAACC;QAAIC,WAAW,CAAC,EAAEP,UAAU,OAAO,CAAC;QAAEQ,OAAOL,EAAE;qBAC9C,oBAACG;QAAIC,WAAW,CAAC,EAAEP,UAAU,OAAO,EAAEA,UAAU,KAAK,CAAC;sBACtD,oBAACM;QAAIC,WAAW,CAAC,EAAEP,UAAU,OAAO,EAAEA,UAAU,QAAQ,CAAC;sBACzD,oBAACM;QAAIC,WAAW,CAAC,EAAEP,UAAU,OAAO,EAAEA,UAAU,QAAQ,CAAC;SAG5DK,0BACC,oBAACC;QACCG,cAAYL,cAAc,aAAaD,EAAE,sBAAsBA,EAAE;QACjEI,WAAW,CAAC,EAAEP,UAAU,YAAY,CAAC;QACrCQ,OAAOJ,cAAc,aAAaD,EAAE,sBAAsBA,EAAE;OAE3DC,cAAc,qBACb,oBAACP,MAAMa,QAAQ,sBACb,oBAACJ;QAAIC,WAAW,CAAC,EAAEP,UAAU,OAAO,EAAEA,UAAU,QAAQ,CAAC;sBACzD,oBAACM;QAAIC,WAAW,CAAC,EAAEP,UAAU,OAAO,EAAEA,UAAU,SAAS,CAAC;SAG7DI,cAAc,4BACb,oBAACN;QAAQS,WAAW,CAAC,EAAEP,UAAU,kBAAkB,CAAC;QAAEW,WAAU;;AAQhF,EAAC"}
+{"version":3,"sources":["../../../src/elements/Hamburger/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { Chevron } from '../../icons/Chevron/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'hamburger'\n\nexport const Hamburger: React.FC<{\n  closeIcon?: 'collapse' | 'x'\n  isActive?: boolean\n}> = (props) => {\n  const { t } = useTranslation()\n  const { closeIcon = 'x', isActive = false } = props\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__wrapper`}>\n        <div className={`${baseClass}__icon`}>\n          {!isActive && (\n            <div className={`${baseClass}__lines`} title={t('general:open')}>\n              <div className={`${baseClass}__line ${baseClass}__top`} />\n              <div className={`${baseClass}__line ${baseClass}__middle`} />\n              <div className={`${baseClass}__line ${baseClass}__bottom`} />\n            </div>\n          )}\n          {isActive && (\n            <div\n              aria-label={closeIcon === 'collapse' ? t('general:collapse') : t('general:close')}\n              className={`${baseClass}__close-icon`}\n              title={closeIcon === 'collapse' ? t('general:collapse') : t('general:close')}\n            >\n              {closeIcon === 'x' && (\n                <React.Fragment>\n                  <div className={`${baseClass}__line ${baseClass}__x-left`} />\n                  <div className={`${baseClass}__line ${baseClass}__x-right`} />\n                </React.Fragment>\n              )}\n              {closeIcon === 'collapse' && (\n                <Chevron className={`${baseClass}__collapse-chevron`} direction=\"left\" />\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":["React","Chevron","useTranslation","baseClass","Hamburger","props","t","closeIcon","isActive","div","className","title","aria-label","Fragment","direction"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAEzB,SAASC,OAAO,QAAQ,+BAA8B;AACtD,SAASC,cAAc,QAAQ,uCAAsC;AAGrE,MAAMC,YAAY;AAElB,OAAO,MAAMC,YAGR,CAACC;IACJ,MAAM,EAAEC,CAAC,EAAE,GAAGJ;IACd,MAAM,EAAEK,YAAY,GAAG,EAAEC,WAAW,KAAK,EAAE,GAAGH;IAE9C,qBACE,KAACI;QAAIC,WAAWP;kBACd,cAAA,KAACM;YAAIC,WAAW,CAAC,EAAEP,UAAU,SAAS,CAAC;sBACrC,cAAA,MAACM;gBAAIC,WAAW,CAAC,EAAEP,UAAU,MAAM,CAAC;;oBACjC,CAACK,0BACA,MAACC;wBAAIC,WAAW,CAAC,EAAEP,UAAU,OAAO,CAAC;wBAAEQ,OAAOL,EAAE;;0CAC9C,KAACG;gCAAIC,WAAW,CAAC,EAAEP,UAAU,OAAO,EAAEA,UAAU,KAAK,CAAC;;0CACtD,KAACM;gCAAIC,WAAW,CAAC,EAAEP,UAAU,OAAO,EAAEA,UAAU,QAAQ,CAAC;;0CACzD,KAACM;gCAAIC,WAAW,CAAC,EAAEP,UAAU,OAAO,EAAEA,UAAU,QAAQ,CAAC;;;;oBAG5DK,0BACC,MAACC;wBACCG,cAAYL,cAAc,aAAaD,EAAE,sBAAsBA,EAAE;wBACjEI,WAAW,CAAC,EAAEP,UAAU,YAAY,CAAC;wBACrCQ,OAAOJ,cAAc,aAAaD,EAAE,sBAAsBA,EAAE;;4BAE3DC,cAAc,qBACb,MAACP,MAAMa,QAAQ;;kDACb,KAACJ;wCAAIC,WAAW,CAAC,EAAEP,UAAU,OAAO,EAAEA,UAAU,QAAQ,CAAC;;kDACzD,KAACM;wCAAIC,WAAW,CAAC,EAAEP,UAAU,OAAO,EAAEA,UAAU,SAAS,CAAC;;;;4BAG7DI,cAAc,4BACb,KAACN;gCAAQS,WAAW,CAAC,EAAEP,UAAU,kBAAkB,CAAC;gCAAEW,WAAU;;;;;;;;AAQhF,EAAC"}

package/dist/elements/IDLabel/index.js

@@ -1,11 +1,17 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 const baseClass = 'id-label';
-export const IDLabel = ({ id, className, prefix = 'ID:' })=>/*#__PURE__*/ React.createElement("div", {
+export const IDLabel = ({ id, className, prefix = 'ID:' })=>/*#__PURE__*/ _jsxs("div", {
         className: [
             baseClass,
             className
         ].filter(Boolean).join(' '),
-        title: id
-    }, prefix, "  ", id);
+        title: id,
+        children: [
+            prefix,
+            "  ",
+            id
+        ]
+    });
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/IDLabel/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'id-label'\n\nexport const IDLabel: React.FC<{ className?: string; id: string; prefix?: string }> = ({\n  id,\n  className,\n  prefix = 'ID:',\n}) => (\n  <div className={[baseClass, className].filter(Boolean).join(' ')} title={id}>\n    {prefix}\n    &nbsp;&nbsp;\n    {id}\n  </div>\n)\n"],"names":["React","baseClass","IDLabel","id","className","prefix","div","filter","Boolean","join","title"],"rangeMappings":";;;;;;;;","mappings":"AAAA,OAAOA,WAAW,QAAO;AAIzB,MAAMC,YAAY;AAElB,OAAO,MAAMC,UAAyE,CAAC,EACrFC,EAAE,EACFC,SAAS,EACTC,SAAS,KAAK,EACf,iBACC,oBAACC;QAAIF,WAAW;YAACH;YAAWG;SAAU,CAACG,MAAM,CAACC,SAASC,IAAI,CAAC;QAAMC,OAAOP;OACtEE,QAAO,MAEPF,IAEJ"}
+{"version":3,"sources":["../../../src/elements/IDLabel/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'id-label'\n\nexport const IDLabel: React.FC<{ className?: string; id: string; prefix?: string }> = ({\n  id,\n  className,\n  prefix = 'ID:',\n}) => (\n  <div className={[baseClass, className].filter(Boolean).join(' ')} title={id}>\n    {prefix}\n    &nbsp;&nbsp;\n    {id}\n  </div>\n)\n"],"names":["React","baseClass","IDLabel","id","className","prefix","div","filter","Boolean","join","title"],"rangeMappings":";;;;;;;;;;;;;;","mappings":";AAAA,OAAOA,WAAW,QAAO;AAIzB,MAAMC,YAAY;AAElB,OAAO,MAAMC,UAAyE,CAAC,EACrFC,EAAE,EACFC,SAAS,EACTC,SAAS,KAAK,EACf,iBACC,MAACC;QAAIF,WAAW;YAACH;YAAWG;SAAU,CAACG,MAAM,CAACC,SAASC,IAAI,CAAC;QAAMC,OAAOP;;YACtEE;YAAO;YAEPF;;OAEJ"}

package/dist/elements/ListControls/index.js

@@ -1,4 +1,5 @@
 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as facelessUIImport from '@faceless-ui/window-info';
 import { getTranslation } from '@payloadcms/translations';
 import React, { useEffect, useRef, useState } from 'react';
@@ -46,68 +47,99 @@ const baseClass = 'list-controls';
         setVisibleDrawer,
         searchParams?.where
     ]);
-    return /*#__PURE__*/ React.createElement("div", {
-        className: baseClass
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__wrap`
-    }, /*#__PURE__*/ React.createElement(SearchFilter, {
-        fieldLabel: (titleField && getTranslation('label' in titleField.fieldComponentProps && typeof titleField.fieldComponentProps.label === 'string' ? titleField.fieldComponentProps.label : titleField.name, i18n)) ?? undefined,
-        fieldName: titleField?.name,
-        handleChange: handleSearchChange,
-        listSearchableFields: getTextFieldsToBeSearched(collectionConfig.admin.listSearchableFields, fieldMap)
-    }), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__buttons`
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__buttons-wrap`
-    }, !smallBreak && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(EditMany, {
-        collection: collectionConfig,
-        fieldMap: fieldMap
-    }), /*#__PURE__*/ React.createElement(PublishMany, {
-        collection: collectionConfig
-    }), /*#__PURE__*/ React.createElement(UnpublishMany, {
-        collection: collectionConfig
-    }), /*#__PURE__*/ React.createElement(DeleteMany, {
-        collection: collectionConfig
-    })), enableColumns && /*#__PURE__*/ React.createElement(Pill, {
-        "aria-controls": `${baseClass}-columns`,
-        "aria-expanded": visibleDrawer === 'columns',
-        className: `${baseClass}__toggle-columns ${visibleDrawer === 'columns' ? `${baseClass}__buttons-active` : ''}`,
-        icon: /*#__PURE__*/ React.createElement(Chevron, null),
-        onClick: ()=>setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined),
-        pillStyle: "light"
-    }, t('general:columns')), /*#__PURE__*/ React.createElement(Pill, {
-        "aria-controls": `${baseClass}-where`,
-        "aria-expanded": visibleDrawer === 'where',
-        className: `${baseClass}__toggle-where ${visibleDrawer === 'where' ? `${baseClass}__buttons-active` : ''}`,
-        icon: /*#__PURE__*/ React.createElement(Chevron, null),
-        onClick: ()=>setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined),
-        pillStyle: "light"
-    }, t('general:filters')), enableSort && /*#__PURE__*/ React.createElement(Pill, {
-        "aria-controls": `${baseClass}-sort`,
-        "aria-expanded": visibleDrawer === 'sort',
-        className: `${baseClass}__toggle-sort`,
-        icon: /*#__PURE__*/ React.createElement(Chevron, null),
-        onClick: ()=>setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined),
-        pillStyle: "light"
-    }, t('general:sort'))))), enableColumns && /*#__PURE__*/ React.createElement(AnimateHeight, {
-        className: `${baseClass}__columns`,
-        height: visibleDrawer === 'columns' ? 'auto' : 0,
-        id: `${baseClass}-columns`
-    }, /*#__PURE__*/ React.createElement(ColumnSelector, {
-        collectionSlug: collectionConfig.slug
-    })), /*#__PURE__*/ React.createElement(AnimateHeight, {
-        className: `${baseClass}__where`,
-        height: visibleDrawer === 'where' ? 'auto' : 0,
-        id: `${baseClass}-where`
-    }, /*#__PURE__*/ React.createElement(WhereBuilder, {
-        collectionPluralLabel: collectionConfig?.labels?.plural,
-        collectionSlug: collectionConfig.slug,
-        key: String(hasWhereParam.current && !searchParams?.where)
-    })), enableSort && /*#__PURE__*/ React.createElement(AnimateHeight, {
-        className: `${baseClass}__sort`,
-        height: visibleDrawer === 'sort' ? 'auto' : 0,
-        id: `${baseClass}-sort`
-    }, /*#__PURE__*/ React.createElement("p", null, "Sort Complex")));
+    return /*#__PURE__*/ _jsxs("div", {
+        className: baseClass,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: `${baseClass}__wrap`,
+                children: [
+                    /*#__PURE__*/ _jsx(SearchFilter, {
+                        fieldLabel: (titleField && getTranslation('label' in titleField.fieldComponentProps && typeof titleField.fieldComponentProps.label === 'string' ? titleField.fieldComponentProps.label : titleField.name, i18n)) ?? undefined,
+                        fieldName: titleField?.name,
+                        handleChange: handleSearchChange,
+                        listSearchableFields: getTextFieldsToBeSearched(collectionConfig.admin.listSearchableFields, fieldMap)
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: `${baseClass}__buttons`,
+                        children: /*#__PURE__*/ _jsxs("div", {
+                            className: `${baseClass}__buttons-wrap`,
+                            children: [
+                                !smallBreak && /*#__PURE__*/ _jsxs(React.Fragment, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(EditMany, {
+                                            collection: collectionConfig,
+                                            fieldMap: fieldMap
+                                        }),
+                                        /*#__PURE__*/ _jsx(PublishMany, {
+                                            collection: collectionConfig
+                                        }),
+                                        /*#__PURE__*/ _jsx(UnpublishMany, {
+                                            collection: collectionConfig
+                                        }),
+                                        /*#__PURE__*/ _jsx(DeleteMany, {
+                                            collection: collectionConfig
+                                        })
+                                    ]
+                                }),
+                                enableColumns && /*#__PURE__*/ _jsx(Pill, {
+                                    "aria-controls": `${baseClass}-columns`,
+                                    "aria-expanded": visibleDrawer === 'columns',
+                                    className: `${baseClass}__toggle-columns ${visibleDrawer === 'columns' ? `${baseClass}__buttons-active` : ''}`,
+                                    icon: /*#__PURE__*/ _jsx(Chevron, {}),
+                                    onClick: ()=>setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined),
+                                    pillStyle: "light",
+                                    children: t('general:columns')
+                                }),
+                                /*#__PURE__*/ _jsx(Pill, {
+                                    "aria-controls": `${baseClass}-where`,
+                                    "aria-expanded": visibleDrawer === 'where',
+                                    className: `${baseClass}__toggle-where ${visibleDrawer === 'where' ? `${baseClass}__buttons-active` : ''}`,
+                                    icon: /*#__PURE__*/ _jsx(Chevron, {}),
+                                    onClick: ()=>setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined),
+                                    pillStyle: "light",
+                                    children: t('general:filters')
+                                }),
+                                enableSort && /*#__PURE__*/ _jsx(Pill, {
+                                    "aria-controls": `${baseClass}-sort`,
+                                    "aria-expanded": visibleDrawer === 'sort',
+                                    className: `${baseClass}__toggle-sort`,
+                                    icon: /*#__PURE__*/ _jsx(Chevron, {}),
+                                    onClick: ()=>setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined),
+                                    pillStyle: "light",
+                                    children: t('general:sort')
+                                })
+                            ]
+                        })
+                    })
+                ]
+            }),
+            enableColumns && /*#__PURE__*/ _jsx(AnimateHeight, {
+                className: `${baseClass}__columns`,
+                height: visibleDrawer === 'columns' ? 'auto' : 0,
+                id: `${baseClass}-columns`,
+                children: /*#__PURE__*/ _jsx(ColumnSelector, {
+                    collectionSlug: collectionConfig.slug
+                })
+            }),
+            /*#__PURE__*/ _jsx(AnimateHeight, {
+                className: `${baseClass}__where`,
+                height: visibleDrawer === 'where' ? 'auto' : 0,
+                id: `${baseClass}-where`,
+                children: /*#__PURE__*/ _jsx(WhereBuilder, {
+                    collectionPluralLabel: collectionConfig?.labels?.plural,
+                    collectionSlug: collectionConfig.slug
+                }, String(hasWhereParam.current && !searchParams?.where))
+            }),
+            enableSort && /*#__PURE__*/ _jsx(AnimateHeight, {
+                className: `${baseClass}__sort`,
+                height: visibleDrawer === 'sort' ? 'auto' : 0,
+                id: `${baseClass}-sort`,
+                children: /*#__PURE__*/ _jsx("p", {
+                    children: "Sort Complex"
+                })
+            })
+        ]
+    });
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ListControls/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, Where } from 'payload/types'\n\nimport * as facelessUIImport from '@faceless-ui/window-info'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useEffect, useRef, useState } from 'react'\nimport AnimateHeightImport from 'react-animate-height'\n\nconst AnimateHeight = (AnimateHeightImport.default ||\n  AnimateHeightImport) as typeof AnimateHeightImport.default\n\nimport type { FieldMap } from '../../utilities/buildComponentMap.js'\n\nimport { useUseTitleField } from '../../hooks/useUseAsTitle.js'\nimport { Chevron } from '../../icons/Chevron/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useSearchParams } from '../../providers/SearchParams/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ColumnSelector } from '../ColumnSelector/index.js'\nimport { DeleteMany } from '../DeleteMany/index.js'\nimport { EditMany } from '../EditMany/index.js'\nimport { Pill } from '../Pill/index.js'\nimport { PublishMany } from '../PublishMany/index.js'\nimport { SearchFilter } from '../SearchFilter/index.js'\nimport { UnpublishMany } from '../UnpublishMany/index.js'\nimport { WhereBuilder } from '../WhereBuilder/index.js'\nimport validateWhereQuery from '../WhereBuilder/validateWhereQuery.js'\nimport { getTextFieldsToBeSearched } from './getTextFieldsToBeSearched.js'\nimport './index.scss'\n\nconst baseClass = 'list-controls'\n\nexport type ListControlsProps = {\n  collectionConfig: ClientCollectionConfig\n  enableColumns?: boolean\n  enableSort?: boolean\n  fieldMap: FieldMap\n  handleSearchChange?: (search: string) => void\n  handleSortChange?: (sort: string) => void\n  handleWhereChange?: (where: Where) => void\n}\n\n/**\n * The ListControls component is used to render the controls (search, filter, where)\n * for a collection's list view. You can find those directly above the table which lists\n * the collection's documents.\n */\nexport const ListControls: React.FC<ListControlsProps> = (props) => {\n  const { collectionConfig, enableColumns = true, enableSort = false, fieldMap } = props\n\n  const { useWindowInfo } = facelessUIImport\n\n  const { handleSearchChange } = useListQuery()\n  const { searchParams } = useSearchParams()\n  const titleField = useUseTitleField(collectionConfig, fieldMap)\n  const { i18n, t } = useTranslation()\n  const {\n    breakpoints: { s: smallBreak },\n  } = useWindowInfo()\n\n  const hasWhereParam = useRef(Boolean(searchParams?.where))\n\n  const shouldInitializeWhereOpened = validateWhereQuery(searchParams?.where)\n  const [visibleDrawer, setVisibleDrawer] = useState<'columns' | 'sort' | 'where'>(\n    shouldInitializeWhereOpened ? 'where' : undefined,\n  )\n\n  useEffect(() => {\n    if (hasWhereParam.current && !searchParams?.where) {\n      setVisibleDrawer(undefined)\n      hasWhereParam.current = false\n    } else if (searchParams?.where) {\n      hasWhereParam.current = true\n    }\n  }, [setVisibleDrawer, searchParams?.where])\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__wrap`}>\n        <SearchFilter\n          fieldLabel={\n            (titleField &&\n              getTranslation(\n                'label' in titleField.fieldComponentProps &&\n                  typeof titleField.fieldComponentProps.label === 'string'\n                  ? titleField.fieldComponentProps.label\n                  : titleField.name,\n                i18n,\n              )) ??\n            undefined\n          }\n          fieldName={titleField?.name}\n          handleChange={handleSearchChange}\n          listSearchableFields={getTextFieldsToBeSearched(\n            collectionConfig.admin.listSearchableFields,\n            fieldMap,\n          )}\n        />\n        <div className={`${baseClass}__buttons`}>\n          <div className={`${baseClass}__buttons-wrap`}>\n            {!smallBreak && (\n              <React.Fragment>\n                <EditMany collection={collectionConfig} fieldMap={fieldMap} />\n                <PublishMany collection={collectionConfig} />\n                <UnpublishMany collection={collectionConfig} />\n                <DeleteMany collection={collectionConfig} />\n              </React.Fragment>\n            )}\n            {enableColumns && (\n              <Pill\n                aria-controls={`${baseClass}-columns`}\n                aria-expanded={visibleDrawer === 'columns'}\n                className={`${baseClass}__toggle-columns ${\n                  visibleDrawer === 'columns' ? `${baseClass}__buttons-active` : ''\n                }`}\n                icon={<Chevron />}\n                onClick={() =>\n                  setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined)\n                }\n                pillStyle=\"light\"\n              >\n                {t('general:columns')}\n              </Pill>\n            )}\n            <Pill\n              aria-controls={`${baseClass}-where`}\n              aria-expanded={visibleDrawer === 'where'}\n              className={`${baseClass}__toggle-where ${\n                visibleDrawer === 'where' ? `${baseClass}__buttons-active` : ''\n              }`}\n              icon={<Chevron />}\n              onClick={() => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined)}\n              pillStyle=\"light\"\n            >\n              {t('general:filters')}\n            </Pill>\n            {enableSort && (\n              <Pill\n                aria-controls={`${baseClass}-sort`}\n                aria-expanded={visibleDrawer === 'sort'}\n                className={`${baseClass}__toggle-sort`}\n                icon={<Chevron />}\n                onClick={() => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined)}\n                pillStyle=\"light\"\n              >\n                {t('general:sort')}\n              </Pill>\n            )}\n          </div>\n        </div>\n      </div>\n      {enableColumns && (\n        <AnimateHeight\n          className={`${baseClass}__columns`}\n          height={visibleDrawer === 'columns' ? 'auto' : 0}\n          id={`${baseClass}-columns`}\n        >\n          <ColumnSelector collectionSlug={collectionConfig.slug} />\n        </AnimateHeight>\n      )}\n      <AnimateHeight\n        className={`${baseClass}__where`}\n        height={visibleDrawer === 'where' ? 'auto' : 0}\n        id={`${baseClass}-where`}\n      >\n        <WhereBuilder\n          collectionPluralLabel={collectionConfig?.labels?.plural}\n          collectionSlug={collectionConfig.slug}\n          key={String(hasWhereParam.current && !searchParams?.where)}\n        />\n      </AnimateHeight>\n      {enableSort && (\n        <AnimateHeight\n          className={`${baseClass}__sort`}\n          height={visibleDrawer === 'sort' ? 'auto' : 0}\n          id={`${baseClass}-sort`}\n        >\n          <p>Sort Complex</p>\n          {/* <SortComplex\n            collection={collection}\n            handleChange={handleSortChange}\n            modifySearchQuery={modifySearchQuery}\n          /> */}\n        </AnimateHeight>\n      )}\n    </div>\n  )\n}\n"],"names":["facelessUIImport","getTranslation","React","useEffect","useRef","useState","AnimateHeightImport","AnimateHeight","default","useUseTitleField","Chevron","useListQuery","useSearchParams","useTranslation","ColumnSelector","DeleteMany","EditMany","Pill","PublishMany","SearchFilter","UnpublishMany","WhereBuilder","validateWhereQuery","getTextFieldsToBeSearched","baseClass","ListControls","props","collectionConfig","enableColumns","enableSort","fieldMap","useWindowInfo","handleSearchChange","searchParams","titleField","i18n","t","breakpoints","s","smallBreak","hasWhereParam","Boolean","where","shouldInitializeWhereOpened","visibleDrawer","setVisibleDrawer","undefined","current","div","className","fieldLabel","fieldComponentProps","label","name","fieldName","handleChange","listSearchableFields","admin","Fragment","collection","aria-controls","aria-expanded","icon","onClick","pillStyle","height","id","collectionSlug","slug","collectionPluralLabel","labels","plural","key","String","p"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../src/elements/ListControls/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, Where } from 'payload/types'\n\nimport * as facelessUIImport from '@faceless-ui/window-info'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useEffect, useRef, useState } from 'react'\nimport AnimateHeightImport from 'react-animate-height'\n\nconst AnimateHeight = (AnimateHeightImport.default ||\n  AnimateHeightImport) as typeof AnimateHeightImport.default\n\nimport type { FieldMap } from '../../utilities/buildComponentMap.js'\n\nimport { useUseTitleField } from '../../hooks/useUseAsTitle.js'\nimport { Chevron } from '../../icons/Chevron/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useSearchParams } from '../../providers/SearchParams/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ColumnSelector } from '../ColumnSelector/index.js'\nimport { DeleteMany } from '../DeleteMany/index.js'\nimport { EditMany } from '../EditMany/index.js'\nimport { Pill } from '../Pill/index.js'\nimport { PublishMany } from '../PublishMany/index.js'\nimport { SearchFilter } from '../SearchFilter/index.js'\nimport { UnpublishMany } from '../UnpublishMany/index.js'\nimport { WhereBuilder } from '../WhereBuilder/index.js'\nimport validateWhereQuery from '../WhereBuilder/validateWhereQuery.js'\nimport { getTextFieldsToBeSearched } from './getTextFieldsToBeSearched.js'\nimport './index.scss'\n\nconst baseClass = 'list-controls'\n\nexport type ListControlsProps = {\n  collectionConfig: ClientCollectionConfig\n  enableColumns?: boolean\n  enableSort?: boolean\n  fieldMap: FieldMap\n  handleSearchChange?: (search: string) => void\n  handleSortChange?: (sort: string) => void\n  handleWhereChange?: (where: Where) => void\n}\n\n/**\n * The ListControls component is used to render the controls (search, filter, where)\n * for a collection's list view. You can find those directly above the table which lists\n * the collection's documents.\n */\nexport const ListControls: React.FC<ListControlsProps> = (props) => {\n  const { collectionConfig, enableColumns = true, enableSort = false, fieldMap } = props\n\n  const { useWindowInfo } = facelessUIImport\n\n  const { handleSearchChange } = useListQuery()\n  const { searchParams } = useSearchParams()\n  const titleField = useUseTitleField(collectionConfig, fieldMap)\n  const { i18n, t } = useTranslation()\n  const {\n    breakpoints: { s: smallBreak },\n  } = useWindowInfo()\n\n  const hasWhereParam = useRef(Boolean(searchParams?.where))\n\n  const shouldInitializeWhereOpened = validateWhereQuery(searchParams?.where)\n  const [visibleDrawer, setVisibleDrawer] = useState<'columns' | 'sort' | 'where'>(\n    shouldInitializeWhereOpened ? 'where' : undefined,\n  )\n\n  useEffect(() => {\n    if (hasWhereParam.current && !searchParams?.where) {\n      setVisibleDrawer(undefined)\n      hasWhereParam.current = false\n    } else if (searchParams?.where) {\n      hasWhereParam.current = true\n    }\n  }, [setVisibleDrawer, searchParams?.where])\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__wrap`}>\n        <SearchFilter\n          fieldLabel={\n            (titleField &&\n              getTranslation(\n                'label' in titleField.fieldComponentProps &&\n                  typeof titleField.fieldComponentProps.label === 'string'\n                  ? titleField.fieldComponentProps.label\n                  : titleField.name,\n                i18n,\n              )) ??\n            undefined\n          }\n          fieldName={titleField?.name}\n          handleChange={handleSearchChange}\n          listSearchableFields={getTextFieldsToBeSearched(\n            collectionConfig.admin.listSearchableFields,\n            fieldMap,\n          )}\n        />\n        <div className={`${baseClass}__buttons`}>\n          <div className={`${baseClass}__buttons-wrap`}>\n            {!smallBreak && (\n              <React.Fragment>\n                <EditMany collection={collectionConfig} fieldMap={fieldMap} />\n                <PublishMany collection={collectionConfig} />\n                <UnpublishMany collection={collectionConfig} />\n                <DeleteMany collection={collectionConfig} />\n              </React.Fragment>\n            )}\n            {enableColumns && (\n              <Pill\n                aria-controls={`${baseClass}-columns`}\n                aria-expanded={visibleDrawer === 'columns'}\n                className={`${baseClass}__toggle-columns ${\n                  visibleDrawer === 'columns' ? `${baseClass}__buttons-active` : ''\n                }`}\n                icon={<Chevron />}\n                onClick={() =>\n                  setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined)\n                }\n                pillStyle=\"light\"\n              >\n                {t('general:columns')}\n              </Pill>\n            )}\n            <Pill\n              aria-controls={`${baseClass}-where`}\n              aria-expanded={visibleDrawer === 'where'}\n              className={`${baseClass}__toggle-where ${\n                visibleDrawer === 'where' ? `${baseClass}__buttons-active` : ''\n              }`}\n              icon={<Chevron />}\n              onClick={() => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined)}\n              pillStyle=\"light\"\n            >\n              {t('general:filters')}\n            </Pill>\n            {enableSort && (\n              <Pill\n                aria-controls={`${baseClass}-sort`}\n                aria-expanded={visibleDrawer === 'sort'}\n                className={`${baseClass}__toggle-sort`}\n                icon={<Chevron />}\n                onClick={() => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined)}\n                pillStyle=\"light\"\n              >\n                {t('general:sort')}\n              </Pill>\n            )}\n          </div>\n        </div>\n      </div>\n      {enableColumns && (\n        <AnimateHeight\n          className={`${baseClass}__columns`}\n          height={visibleDrawer === 'columns' ? 'auto' : 0}\n          id={`${baseClass}-columns`}\n        >\n          <ColumnSelector collectionSlug={collectionConfig.slug} />\n        </AnimateHeight>\n      )}\n      <AnimateHeight\n        className={`${baseClass}__where`}\n        height={visibleDrawer === 'where' ? 'auto' : 0}\n        id={`${baseClass}-where`}\n      >\n        <WhereBuilder\n          collectionPluralLabel={collectionConfig?.labels?.plural}\n          collectionSlug={collectionConfig.slug}\n          key={String(hasWhereParam.current && !searchParams?.where)}\n        />\n      </AnimateHeight>\n      {enableSort && (\n        <AnimateHeight\n          className={`${baseClass}__sort`}\n          height={visibleDrawer === 'sort' ? 'auto' : 0}\n          id={`${baseClass}-sort`}\n        >\n          <p>Sort Complex</p>\n          {/* <SortComplex\n            collection={collection}\n            handleChange={handleSortChange}\n            modifySearchQuery={modifySearchQuery}\n          /> */}\n        </AnimateHeight>\n      )}\n    </div>\n  )\n}\n"],"names":["facelessUIImport","getTranslation","React","useEffect","useRef","useState","AnimateHeightImport","AnimateHeight","default","useUseTitleField","Chevron","useListQuery","useSearchParams","useTranslation","ColumnSelector","DeleteMany","EditMany","Pill","PublishMany","SearchFilter","UnpublishMany","WhereBuilder","validateWhereQuery","getTextFieldsToBeSearched","baseClass","ListControls","props","collectionConfig","enableColumns","enableSort","fieldMap","useWindowInfo","handleSearchChange","searchParams","titleField","i18n","t","breakpoints","s","smallBreak","hasWhereParam","Boolean","where","shouldInitializeWhereOpened","visibleDrawer","setVisibleDrawer","undefined","current","div","className","fieldLabel","fieldComponentProps","label","name","fieldName","handleChange","listSearchableFields","admin","Fragment","collection","aria-controls","aria-expanded","icon","onClick","pillStyle","height","id","collectionSlug","slug","collectionPluralLabel","labels","plural","String","p"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/elements/ListDrawer/DrawerContent.js

@@ -1,4 +1,5 @@
 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as facelessUIImport from '@faceless-ui/modal';
 import { getTranslation } from '@payloadcms/translations';
 import React, { useCallback, useEffect, useReducer, useState } from 'react';
@@ -183,78 +184,107 @@ export const ListDrawerContent = ({ collectionSlugs, customHeader, drawerSlug, f
         return null;
     }
     if (isLoadingList) {
-        return /*#__PURE__*/ React.createElement(LoadingOverlay, null);
+        return /*#__PURE__*/ _jsx(LoadingOverlay, {});
     }
-    return /*#__PURE__*/ React.createElement(ListInfoProvider, {
-        Header: /*#__PURE__*/ React.createElement("header", {
-            className: `${baseClass}__header`
-        }, /*#__PURE__*/ React.createElement("div", {
-            className: `${baseClass}__header-wrap`
-        }, /*#__PURE__*/ React.createElement("div", {
-            className: `${baseClass}__header-content`
-        }, /*#__PURE__*/ React.createElement("h2", {
-            className: `${baseClass}__header-text`
-        }, !customHeader ? getTranslation(selectedCollectionConfig?.labels?.plural, i18n) : customHeader), hasCreatePermission && /*#__PURE__*/ React.createElement(DocumentDrawerToggler, {
-            className: `${baseClass}__create-new-button`
-        }, /*#__PURE__*/ React.createElement(Pill, null, t('general:createNew')))), /*#__PURE__*/ React.createElement("button", {
-            "aria-label": t('general:close'),
-            className: `${baseClass}__header-close`,
-            onClick: ()=>{
-                closeModal(drawerSlug);
-            },
-            type: "button"
-        }, /*#__PURE__*/ React.createElement(X, null))), selectedCollectionConfig?.admin?.description && /*#__PURE__*/ React.createElement("div", {
-            className: `${baseClass}__sub-header`
-        }, /*#__PURE__*/ React.createElement(ViewDescription, {
-            description: selectedCollectionConfig.admin.description
-        })), moreThanOneAvailableCollection && /*#__PURE__*/ React.createElement("div", {
-            className: `${baseClass}__select-collection-wrap`
-        }, /*#__PURE__*/ React.createElement(FieldLabel, {
-            label: t('upload:selectCollectionToBrowse')
-        }), /*#__PURE__*/ React.createElement(ReactSelect, {
-            className: `${baseClass}__select-collection`,
-            onChange: setSelectedOption,
-            options: enabledCollectionConfigs.map((coll)=>({
-                    label: getTranslation(coll.labels.singular, i18n),
-                    value: coll.slug
-                })),
-            value: selectedOption
-        }))),
+    return /*#__PURE__*/ _jsx(ListInfoProvider, {
+        Header: /*#__PURE__*/ _jsxs("header", {
+            className: `${baseClass}__header`,
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: `${baseClass}__header-wrap`,
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: `${baseClass}__header-content`,
+                            children: [
+                                /*#__PURE__*/ _jsx("h2", {
+                                    className: `${baseClass}__header-text`,
+                                    children: !customHeader ? getTranslation(selectedCollectionConfig?.labels?.plural, i18n) : customHeader
+                                }),
+                                hasCreatePermission && /*#__PURE__*/ _jsx(DocumentDrawerToggler, {
+                                    className: `${baseClass}__create-new-button`,
+                                    children: /*#__PURE__*/ _jsx(Pill, {
+                                        children: t('general:createNew')
+                                    })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx("button", {
+                            "aria-label": t('general:close'),
+                            className: `${baseClass}__header-close`,
+                            onClick: ()=>{
+                                closeModal(drawerSlug);
+                            },
+                            type: "button",
+                            children: /*#__PURE__*/ _jsx(X, {})
+                        })
+                    ]
+                }),
+                selectedCollectionConfig?.admin?.description && /*#__PURE__*/ _jsx("div", {
+                    className: `${baseClass}__sub-header`,
+                    children: /*#__PURE__*/ _jsx(ViewDescription, {
+                        description: selectedCollectionConfig.admin.description
+                    })
+                }),
+                moreThanOneAvailableCollection && /*#__PURE__*/ _jsxs("div", {
+                    className: `${baseClass}__select-collection-wrap`,
+                    children: [
+                        /*#__PURE__*/ _jsx(FieldLabel, {
+                            label: t('upload:selectCollectionToBrowse')
+                        }),
+                        /*#__PURE__*/ _jsx(ReactSelect, {
+                            className: `${baseClass}__select-collection`,
+                            onChange: setSelectedOption,
+                            options: enabledCollectionConfigs.map((coll)=>({
+                                    label: getTranslation(coll.labels.singular, i18n),
+                                    value: coll.slug
+                                })),
+                            value: selectedOption
+                        })
+                    ]
+                })
+            ]
+        }),
         collectionConfig: selectedCollectionConfig,
         collectionSlug: selectedCollectionConfig.slug,
         hasCreatePermission: hasCreatePermission,
-        newDocumentURL: null
-    }, /*#__PURE__*/ React.createElement(ListQueryProvider, {
-        data: data,
-        defaultLimit: limit || selectedCollectionConfig?.admin?.pagination?.defaultLimit,
-        defaultSort: sort,
-        handlePageChange: setPage,
-        handlePerPageChange: setLimit,
-        handleSearchChange: setSearch,
-        handleSortChange: setSort,
-        handleWhereChange: setWhere,
-        modifySearchParams: false,
-        preferenceKey: preferenceKey
-    }, /*#__PURE__*/ React.createElement(TableColumnsProvider, {
-        cellProps: [
-            {
-                className: `${baseClass}__first-cell`,
-                link: false,
-                onClick: ({ collectionSlug: rowColl, rowData })=>{
-                    if (typeof onSelect === 'function') {
-                        onSelect({
-                            collectionSlug: rowColl,
-                            docID: rowData.id
-                        });
+        newDocumentURL: null,
+        children: /*#__PURE__*/ _jsx(ListQueryProvider, {
+            data: data,
+            defaultLimit: limit || selectedCollectionConfig?.admin?.pagination?.defaultLimit,
+            defaultSort: sort,
+            handlePageChange: setPage,
+            handlePerPageChange: setLimit,
+            handleSearchChange: setSearch,
+            handleSortChange: setSort,
+            handleWhereChange: setWhere,
+            modifySearchParams: false,
+            preferenceKey: preferenceKey,
+            children: /*#__PURE__*/ _jsxs(TableColumnsProvider, {
+                cellProps: [
+                    {
+                        className: `${baseClass}__first-cell`,
+                        link: false,
+                        onClick: ({ collectionSlug: rowColl, rowData })=>{
+                            if (typeof onSelect === 'function') {
+                                onSelect({
+                                    collectionSlug: rowColl,
+                                    docID: rowData.id
+                                });
+                            }
+                        }
                     }
-                }
-            }
-        ],
-        collectionSlug: selectedCollectionConfig.slug,
-        preferenceKey: preferenceKey
-    }, List, /*#__PURE__*/ React.createElement(DocumentDrawer, {
-        onSave: onCreateNew
-    }))));
+                ],
+                collectionSlug: selectedCollectionConfig.slug,
+                preferenceKey: preferenceKey,
+                children: [
+                    List,
+                    /*#__PURE__*/ _jsx(DocumentDrawer, {
+                        onSave: onCreateNew
+                    })
+                ]
+            })
+        })
+    });
 };
 
 //# sourceMappingURL=DrawerContent.js.map