@payloadcms/ui 3.0.0-canary.b8dd0db → 3.0.0-canary.bb00d64

package/dist/views/List/ListHeader/index.js

@@ -0,0 +1,141 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
+import LinkImport from 'next/link.js';
+const Link = LinkImport.default || LinkImport;
+import { useModal } from '@faceless-ui/modal';
+import React from 'react';
+import { Button } from '../../../elements/Button/index.js';
+import { useListDrawerContext } from '../../../elements/ListDrawer/Provider.js';
+import { ListSelection } from '../../../elements/ListSelection/index.js';
+import { Pill } from '../../../elements/Pill/index.js';
+import { ReactSelect } from '../../../elements/ReactSelect/index.js';
+import { FieldLabel } from '../../../fields/FieldLabel/index.js';
+import { XIcon } from '../../../icons/X/index.js';
+import { useConfig } from '../../../providers/Config/index.js';
+import './index.scss';
+const baseClass = 'list-header';
+const drawerBaseClass = 'list-drawer';
+const DefaultListHeader = ({
+  className,
+  collectionConfig,
+  Description,
+  hasCreatePermission,
+  i18n,
+  isBulkUploadEnabled,
+  newDocumentURL,
+  openBulkUpload,
+  smallBreak,
+  t
+}) => {
+  return /*#__PURE__*/_jsxs("header", {
+    className: [baseClass, className].filter(Boolean).join(' '),
+    children: [/*#__PURE__*/_jsx("h1", {
+      children: getTranslation(collectionConfig?.labels?.plural, i18n)
+    }), hasCreatePermission && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        "aria-label": i18n.t('general:createNewLabel', {
+          label: getTranslation(collectionConfig?.labels?.singular, i18n)
+        }),
+        buttonStyle: "pill",
+        el: 'link',
+        Link: Link,
+        size: "small",
+        to: newDocumentURL,
+        children: i18n.t('general:createNew')
+      }), isBulkUploadEnabled && /*#__PURE__*/_jsx(Button, {
+        "aria-label": t('upload:bulkUpload'),
+        buttonStyle: "pill",
+        onClick: openBulkUpload,
+        size: "small",
+        children: t('upload:bulkUpload')
+      })]
+    }), !smallBreak && /*#__PURE__*/_jsx(ListSelection, {
+      label: getTranslation(collectionConfig?.labels?.plural, i18n)
+    }), Description]
+  });
+};
+const ListDrawerHeader = ({
+  Description,
+  hasCreatePermission,
+  i18n,
+  t
+}) => {
+  const {
+    config: {
+      collections
+    }
+  } = useConfig();
+  const {
+    closeModal
+  } = useModal();
+  const {
+    DocumentDrawerToggler,
+    drawerSlug,
+    enabledCollections,
+    selectedOption,
+    setSelectedOption
+  } = useListDrawerContext();
+  const collectionConfig = collections.find(({
+    slug
+  }) => slug === selectedOption.value);
+  const enabledCollectionConfigs = collections.filter(({
+    slug
+  }) => enabledCollections.includes(slug));
+  const moreThanOneAvailableCollection = enabledCollections.length > 1;
+  return /*#__PURE__*/_jsxs("header", {
+    className: `${drawerBaseClass}__header`,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: `${drawerBaseClass}__header-wrap`,
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: `${drawerBaseClass}__header-content`,
+        children: [/*#__PURE__*/_jsx("h2", {
+          className: `${drawerBaseClass}__header-text`,
+          children: getTranslation(collectionConfig?.labels?.plural, i18n)
+        }), hasCreatePermission && /*#__PURE__*/_jsx(DocumentDrawerToggler, {
+          className: `${drawerBaseClass}__create-new-button`,
+          children: /*#__PURE__*/_jsx(Pill, {
+            children: t('general:createNew')
+          })
+        })]
+      }), /*#__PURE__*/_jsx("button", {
+        "aria-label": t('general:close'),
+        className: `${drawerBaseClass}__header-close`,
+        onClick: () => {
+          closeModal(drawerSlug);
+        },
+        type: "button",
+        children: /*#__PURE__*/_jsx(XIcon, {})
+      })]
+    }), Description, moreThanOneAvailableCollection && /*#__PURE__*/_jsxs("div", {
+      className: `${drawerBaseClass}__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: {
+          label: getTranslation(collectionConfig?.labels.singular, i18n),
+          value: collectionConfig?.slug
+        }
+      })]
+    })]
+  });
+};
+export const ListHeader = props => {
+  const {
+    isInDrawer
+  } = useListDrawerContext();
+  if (isInDrawer) {
+    return /*#__PURE__*/_jsx(ListDrawerHeader, {
+      ...props
+    });
+  }
+  return /*#__PURE__*/_jsx(DefaultListHeader, {
+    ...props
+  });
+};
+//# sourceMappingURL=index.js.map

package/dist/views/List/ListHeader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["getTranslation","LinkImport","Link","default","useModal","React","Button","useListDrawerContext","ListSelection","Pill","ReactSelect","FieldLabel","XIcon","useConfig","baseClass","drawerBaseClass","DefaultListHeader","className","collectionConfig","Description","hasCreatePermission","i18n","isBulkUploadEnabled","newDocumentURL","openBulkUpload","smallBreak","t","_jsxs","filter","Boolean","join","_jsx","labels","plural","_Fragment","label","singular","buttonStyle","el","size","to","onClick","ListDrawerHeader","config","collections","closeModal","DocumentDrawerToggler","drawerSlug","enabledCollections","selectedOption","setSelectedOption","find","slug","value","enabledCollectionConfigs","includes","moreThanOneAvailableCollection","length","type","onChange","options","map","coll","ListHeader","props","isInDrawer"],"sources":["../../../../src/views/List/ListHeader/index.tsx"],"sourcesContent":["import type { I18nClient, TFunction } from '@payloadcms/translations'\nimport type { ClientCollectionConfig } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport LinkImport from 'next/link.js'\nconst Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default\nimport { useModal } from '@faceless-ui/modal'\nimport React from 'react'\n\nimport { Button } from '../../../elements/Button/index.js'\nimport { useListDrawerContext } from '../../../elements/ListDrawer/Provider.js'\nimport { ListSelection } from '../../../elements/ListSelection/index.js'\nimport { Pill } from '../../../elements/Pill/index.js'\nimport { ReactSelect } from '../../../elements/ReactSelect/index.js'\nimport { FieldLabel } from '../../../fields/FieldLabel/index.js'\nimport { XIcon } from '../../../icons/X/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport './index.scss'\n\nconst baseClass = 'list-header'\nconst drawerBaseClass = 'list-drawer'\n\ntype Props = {\n  className?: string\n  collectionConfig: ClientCollectionConfig\n  Description?: React.ReactNode\n  hasCreatePermission: boolean\n  i18n: I18nClient\n  isBulkUploadEnabled: boolean\n  newDocumentURL: string\n  openBulkUpload: () => void\n  smallBreak: boolean\n  t: TFunction\n}\n\nconst DefaultListHeader: React.FC<Props> = ({\n  className,\n  collectionConfig,\n  Description,\n  hasCreatePermission,\n  i18n,\n  isBulkUploadEnabled,\n  newDocumentURL,\n  openBulkUpload,\n  smallBreak,\n  t,\n}) => {\n  return (\n    <header className={[baseClass, className].filter(Boolean).join(' ')}>\n      <h1>{getTranslation(collectionConfig?.labels?.plural, i18n)}</h1>\n      {hasCreatePermission && (\n        <>\n          <Button\n            aria-label={i18n.t('general:createNewLabel', {\n              label: getTranslation(collectionConfig?.labels?.singular, i18n),\n            })}\n            buttonStyle=\"pill\"\n            el={'link'}\n            Link={Link}\n            size=\"small\"\n            to={newDocumentURL}\n          >\n            {i18n.t('general:createNew')}\n          </Button>\n          {isBulkUploadEnabled && (\n            <Button\n              aria-label={t('upload:bulkUpload')}\n              buttonStyle=\"pill\"\n              onClick={openBulkUpload}\n              size=\"small\"\n            >\n              {t('upload:bulkUpload')}\n            </Button>\n          )}\n        </>\n      )}\n      {!smallBreak && (\n        <ListSelection label={getTranslation(collectionConfig?.labels?.plural, i18n)} />\n      )}\n      {Description}\n    </header>\n  )\n}\n\nconst ListDrawerHeader: React.FC<Props> = ({ Description, hasCreatePermission, i18n, t }) => {\n  const {\n    config: { collections },\n  } = useConfig()\n\n  const { closeModal } = useModal()\n\n  const {\n    DocumentDrawerToggler,\n    drawerSlug,\n    enabledCollections,\n    selectedOption,\n    setSelectedOption,\n  } = useListDrawerContext()\n\n  const collectionConfig = collections.find(({ slug }) => slug === selectedOption.value)\n\n  const enabledCollectionConfigs = collections.filter(({ slug }) =>\n    enabledCollections.includes(slug),\n  )\n\n  const moreThanOneAvailableCollection = enabledCollections.length > 1\n\n  return (\n    <header className={`${drawerBaseClass}__header`}>\n      <div className={`${drawerBaseClass}__header-wrap`}>\n        <div className={`${drawerBaseClass}__header-content`}>\n          <h2 className={`${drawerBaseClass}__header-text`}>\n            {getTranslation(collectionConfig?.labels?.plural, i18n)}\n          </h2>\n          {hasCreatePermission && (\n            <DocumentDrawerToggler className={`${drawerBaseClass}__create-new-button`}>\n              <Pill>{t('general:createNew')}</Pill>\n            </DocumentDrawerToggler>\n          )}\n        </div>\n        <button\n          aria-label={t('general:close')}\n          className={`${drawerBaseClass}__header-close`}\n          onClick={() => {\n            closeModal(drawerSlug)\n          }}\n          type=\"button\"\n        >\n          <XIcon />\n        </button>\n      </div>\n      {Description}\n      {moreThanOneAvailableCollection && (\n        <div className={`${drawerBaseClass}__select-collection-wrap`}>\n          <FieldLabel label={t('upload:selectCollectionToBrowse')} />\n          <ReactSelect\n            className={`${baseClass}__select-collection`}\n            onChange={setSelectedOption}\n            options={enabledCollectionConfigs.map((coll) => ({\n              label: getTranslation(coll.labels.singular, i18n),\n              value: coll.slug,\n            }))}\n            value={{\n              label: getTranslation(collectionConfig?.labels.singular, i18n),\n              value: collectionConfig?.slug,\n            }}\n          />\n        </div>\n      )}\n    </header>\n  )\n}\n\nexport const ListHeader: React.FC<Props> = (props) => {\n  const { isInDrawer } = useListDrawerContext()\n\n  if (isInDrawer) {\n    return <ListDrawerHeader {...props} />\n  }\n\n  return <DefaultListHeader {...props} />\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/views/List/ListHeader/index.scss

@@ -0,0 +1,130 @@
+@import '../../../scss/styles.scss';
+
+@layer payload-default {
+  .list-header {
+    display: flex;
+    align-items: flex-end;
+    flex-wrap: wrap;
+    gap: calc(var(--base) * 0.8);
+
+    h1 {
+      margin: 0;
+    }
+  }
+
+  .list-drawer {
+    &__header {
+      margin-top: base(2.5);
+      width: 100%;
+
+      @include mid-break {
+        margin-top: base(1.5);
+      }
+    }
+
+    &__header-wrap {
+      display: flex;
+      gap: base(1);
+    }
+
+    &__header-content {
+      display: flex;
+      flex-wrap: wrap;
+      flex-grow: 1;
+      align-items: flex-start;
+      align-items: center;
+
+      button .pill {
+        pointer-events: none;
+        margin: 0;
+        top: 4px;
+        margin-left: base(0.5);
+      }
+    }
+
+    &__header-text {
+      margin: 0;
+    }
+
+    &__header-close {
+      flex-shrink: 0;
+    }
+
+    &__toggler {
+      background: transparent;
+      border: 0;
+      padding: 0;
+      cursor: pointer;
+      color: inherit;
+      border-radius: var(--style-radius-s);
+
+      &:focus:not(:focus-visible),
+      &:focus-within:not(:focus-visible) {
+        outline: none;
+      }
+
+      &:focus-visible {
+        outline: var(--accessibility-outline);
+        outline-offset: var(--accessibility-outline-offset);
+      }
+
+      &:disabled {
+        pointer-events: none;
+      }
+    }
+
+    &__header-close {
+      border: 0;
+      background-color: transparent;
+      padding: 0;
+      margin: 0;
+      cursor: pointer;
+      overflow: hidden;
+      width: base(1);
+      height: base(1);
+
+      svg {
+        width: base(2);
+        height: base(2);
+        position: relative;
+        inset-inline-start: base(-0.5);
+        top: base(-0.5);
+
+        .stroke {
+          stroke-width: 2px;
+          vector-effect: non-scaling-stroke;
+        }
+      }
+    }
+
+    &__select-collection-wrap {
+      margin-top: base(1);
+    }
+
+    &__first-cell {
+      border: 0;
+      background-color: transparent;
+      padding: 0;
+      cursor: pointer;
+      text-decoration: underline;
+      text-align: left;
+      white-space: nowrap;
+    }
+
+    @include mid-break {
+      .collection-list__header {
+        margin-bottom: base(0.5);
+      }
+
+      &__select-collection-wrap {
+        margin-top: calc(var(--base) / 2);
+      }
+
+      &__header-content {
+        button .pill {
+          top: 2px;
+        }
+      }
+    }
+  }
+}

package/dist/views/List/index.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { Column } from '../../elements/Table/index.js';
+import type { ListPreferences } from './types.js';
+import './index.scss';
+export type ListViewSlots = {
+    AfterList?: React.ReactNode;
+    AfterListTable?: React.ReactNode;
+    BeforeList?: React.ReactNode;
+    BeforeListTable?: React.ReactNode;
+    Description?: React.ReactNode;
+    Table: React.ReactNode;
+};
+export type ListViewClientProps = {
+    beforeActions?: React.ReactNode[];
+    collectionSlug: string;
+    columnState: Column[];
+    disableBulkDelete?: boolean;
+    disableBulkEdit?: boolean;
+    enableRowSelections?: boolean;
+    hasCreatePermission: boolean;
+    listPreferences?: ListPreferences;
+    newDocumentURL: string;
+    preferenceKey?: string;
+    renderedFilters?: Map<string, React.ReactNode>;
+} & ListViewSlots;
+export declare const DefaultListView: React.FC<ListViewClientProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/views/List/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/List/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAwC,MAAM,OAAO,CAAA;AAE5D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAA;AAC3D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AA6BjD,OAAO,cAAc,CAAA;AAMrB,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACjC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IACjC,cAAc,EAAE,MAAM,CAAA;IACtB,WAAW,EAAE,MAAM,EAAE,CAAA;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,mBAAmB,EAAE,OAAO,CAAA;IAC5B,eAAe,CAAC,EAAE,eAAe,CAAA;IACjC,cAAc,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;CAC/C,GAAG,aAAa,CAAA;AAEjB,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAqPzD,CAAA"}

package/dist/views/List/index.js

@@ -0,0 +1,305 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
+import LinkImport from 'next/link.js';
+import { useRouter } from 'next/navigation.js';
+import { formatFilesize, isNumber } from 'payload/shared';
+import React, { Fragment, useEffect, useState } from 'react';
+import { useBulkUpload } from '../../elements/BulkUpload/index.js';
+import { Button } from '../../elements/Button/index.js';
+import { DeleteMany } from '../../elements/DeleteMany/index.js';
+import { EditMany } from '../../elements/EditMany/index.js';
+import { Gutter } from '../../elements/Gutter/index.js';
+import { ListControls } from '../../elements/ListControls/index.js';
+import { useListDrawerContext } from '../../elements/ListDrawer/Provider.js';
+import { ListSelection } from '../../elements/ListSelection/index.js';
+import { useModal } from '../../elements/Modal/index.js';
+import { Pagination } from '../../elements/Pagination/index.js';
+import { PerPage } from '../../elements/PerPage/index.js';
+import { PublishMany } from '../../elements/PublishMany/index.js';
+import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
+import { StaggeredShimmers } from '../../elements/ShimmerEffect/index.js';
+import { useStepNav } from '../../elements/StepNav/index.js';
+import { RelationshipProvider } from '../../elements/Table/RelationshipProvider/index.js';
+import { TableColumnsProvider } from '../../elements/TableColumns/index.js';
+import { UnpublishMany } from '../../elements/UnpublishMany/index.js';
+import { ViewDescription } from '../../elements/ViewDescription/index.js';
+import { useAuth } from '../../providers/Auth/index.js';
+import { useConfig } from '../../providers/Config/index.js';
+import { useEditDepth } from '../../providers/EditDepth/index.js';
+import { useListQuery } from '../../providers/ListQuery/index.js';
+import { SelectionProvider } from '../../providers/Selection/index.js';
+import { useServerFunctions } from '../../providers/ServerFunctions/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { useWindowInfo } from '../../providers/WindowInfo/index.js';
+import './index.scss';
+import { ListHeader } from './ListHeader/index.js';
+const baseClass = 'collection-list';
+const Link = LinkImport.default || LinkImport;
+export const DefaultListView = props => {
+  const $ = _c(13);
+  const {
+    AfterList,
+    AfterListTable,
+    beforeActions,
+    BeforeList,
+    BeforeListTable,
+    collectionSlug,
+    columnState,
+    Description,
+    disableBulkDelete,
+    disableBulkEdit,
+    enableRowSelections,
+    hasCreatePermission,
+    listPreferences,
+    newDocumentURL,
+    preferenceKey,
+    renderedFilters,
+    Table: InitialTable
+  } = props;
+  const [Table, setTable] = useState(InitialTable);
+  const {
+    createNewDrawerSlug,
+    drawerSlug: listDrawerSlug
+  } = useListDrawerContext();
+  let t0;
+  let t1;
+  if ($[0] !== InitialTable) {
+    t0 = () => {
+      if (InitialTable) {
+        setTable(InitialTable);
+      }
+    };
+    t1 = [InitialTable];
+    $[0] = InitialTable;
+    $[1] = t0;
+    $[2] = t1;
+  } else {
+    t0 = $[1];
+    t1 = $[2];
+  }
+  useEffect(t0, t1);
+  const payloadServerAction = useServerFunctions();
+  const {
+    user
+  } = useAuth();
+  const {
+    getEntityConfig
+  } = useConfig();
+  const router = useRouter();
+  const {
+    data,
+    defaultLimit: initialLimit,
+    handlePageChange,
+    handlePerPageChange,
+    query
+  } = useListQuery();
+  const {
+    openModal
+  } = useModal();
+  const {
+    setCollectionSlug,
+    setOnSuccess
+  } = useBulkUpload();
+  const {
+    drawerSlug: bulkUploadDrawerSlug
+  } = useBulkUpload();
+  const collectionConfig = getEntityConfig({
+    collectionSlug
+  });
+  const {
+    labels,
+    upload
+  } = collectionConfig;
+  const isUploadCollection = Boolean(upload);
+  const isBulkUploadEnabled = isUploadCollection && collectionConfig.upload.bulkUpload;
+  const isInDrawer = Boolean(listDrawerSlug);
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const drawerDepth = useEditDepth();
+  const {
+    setStepNav
+  } = useStepNav();
+  const {
+    breakpoints: t2
+  } = useWindowInfo();
+  const {
+    s: smallBreak
+  } = t2;
+  useEffect(() => {
+    if (!collectionConfig) {
+      const getNewConfig = async () => {
+        await payloadServerAction("render-config", {
+          collectionSlug,
+          languageCode: i18n.language
+        });
+      };
+      getNewConfig();
+    }
+  }, [payloadServerAction, collectionConfig, collectionSlug, data, i18n]);
+  const docs = data.docs || [];
+  if (isUploadCollection) {
+    docs?.map(_temp);
+  }
+  let t3;
+  if ($[3] !== setCollectionSlug || $[4] !== collectionSlug || $[5] !== openModal || $[6] !== bulkUploadDrawerSlug || $[7] !== setOnSuccess || $[8] !== router) {
+    t3 = () => {
+      setCollectionSlug(collectionSlug);
+      openModal(bulkUploadDrawerSlug);
+      setOnSuccess(() => router.refresh());
+    };
+    $[3] = setCollectionSlug;
+    $[4] = collectionSlug;
+    $[5] = openModal;
+    $[6] = bulkUploadDrawerSlug;
+    $[7] = setOnSuccess;
+    $[8] = router;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  const openBulkUpload = t3;
+  useEffect(() => {
+    if (drawerDepth <= 1) {
+      setStepNav([{
+        label: labels?.plural
+      }]);
+    }
+  }, [setStepNav, labels, drawerDepth]);
+  let t4;
+  if ($[10] !== data.docs || $[11] !== Table) {
+    t4 = data.docs && data.docs.length > 0 && _jsx(RelationshipProvider, {
+      children: Table
+    });
+    $[10] = data.docs;
+    $[11] = Table;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  return _jsx(Fragment, {
+    children: _jsx(TableColumnsProvider, {
+      collectionSlug,
+      columnState,
+      docs: data.docs,
+      enableRowSelections,
+      listPreferences,
+      preferenceKey,
+      setTable,
+      children: _jsx("div", {
+        className: `${baseClass} ${baseClass}--${collectionSlug}`,
+        children: _jsxs(SelectionProvider, {
+          docs: data.docs,
+          totalDocs: data.totalDocs,
+          user,
+          children: [BeforeList, _jsxs(Gutter, {
+            className: `${baseClass}__wrap`,
+            children: [_jsx(ListHeader, {
+              collectionConfig,
+              Description: _jsx("div", {
+                className: `${baseClass}__sub-header`,
+                children: _jsx(RenderCustomComponent, {
+                  CustomComponent: Description,
+                  Fallback: _jsx(ViewDescription, {
+                    description: collectionConfig?.admin?.description
+                  })
+                })
+              }),
+              hasCreatePermission,
+              i18n,
+              isBulkUploadEnabled,
+              newDocumentURL,
+              openBulkUpload,
+              smallBreak,
+              t
+            }), _jsx(ListControls, {
+              beforeActions,
+              collectionConfig,
+              collectionSlug,
+              disableBulkDelete,
+              disableBulkEdit,
+              renderedFilters
+            }), BeforeListTable, !data.docs && _jsx(StaggeredShimmers, {
+              className: [`${baseClass}__shimmer`, `${baseClass}__shimmer--rows`].join(" "),
+              count: 6
+            }), t4, data.docs && data.docs.length === 0 && _jsxs("div", {
+              className: `${baseClass}__no-results`,
+              children: [_jsx("p", {
+                children: i18n.t("general:noResults", {
+                  label: getTranslation(labels?.plural, i18n)
+                })
+              }), hasCreatePermission && newDocumentURL && _jsx(Fragment, {
+                children: isInDrawer ? _jsx(Button, {
+                  el: "button",
+                  onClick: () => openModal(createNewDrawerSlug),
+                  children: i18n.t("general:createNewLabel", {
+                    label: getTranslation(labels?.singular, i18n)
+                  })
+                }) : _jsx(Button, {
+                  el: "link",
+                  Link,
+                  to: newDocumentURL,
+                  children: i18n.t("general:createNewLabel", {
+                    label: getTranslation(labels?.singular, i18n)
+                  })
+                })
+              })]
+            }), AfterListTable, data.docs && data.docs.length > 0 && _jsxs("div", {
+              className: `${baseClass}__page-controls`,
+              children: [_jsx(Pagination, {
+                hasNextPage: data.hasNextPage,
+                hasPrevPage: data.hasPrevPage,
+                limit: data.limit,
+                nextPage: data.nextPage,
+                numberOfNeighbors: 1,
+                onChange: page => void handlePageChange(page),
+                page: data.page,
+                prevPage: data.prevPage,
+                totalPages: data.totalPages
+              }), data?.totalDocs > 0 && _jsxs(Fragment, {
+                children: [_jsxs("div", {
+                  className: `${baseClass}__page-info`,
+                  children: [data.page * data.limit - (data.limit - 1), "-", data.totalPages > 1 && data.totalPages !== data.page ? data.limit * data.page : data.totalDocs, " ", i18n.t("general:of"), " ", data.totalDocs]
+                }), _jsx(PerPage, {
+                  handleChange: limit => void handlePerPageChange(limit),
+                  limit: isNumber(query?.limit) ? Number(query.limit) : initialLimit,
+                  limits: collectionConfig?.admin?.pagination?.limits,
+                  resetPage: data.totalDocs <= data.pagingCounter
+                }), smallBreak && _jsxs("div", {
+                  className: `${baseClass}__list-selection`,
+                  children: [_jsx(ListSelection, {
+                    label: getTranslation(collectionConfig.labels.plural, i18n)
+                  }), _jsxs("div", {
+                    className: `${baseClass}__list-selection-actions`,
+                    children: [beforeActions && beforeActions, !disableBulkEdit && _jsxs(Fragment, {
+                      children: [_jsx(EditMany, {
+                        collection: collectionConfig
+                      }), _jsx(PublishMany, {
+                        collection: collectionConfig
+                      }), _jsx(UnpublishMany, {
+                        collection: collectionConfig
+                      })]
+                    }), !disableBulkDelete && _jsx(DeleteMany, {
+                      collection: collectionConfig
+                    })]
+                  })]
+                })]
+              })]
+            })]
+          }), AfterList]
+        })
+      })
+    })
+  });
+};
+function _temp(doc) {
+  return {
+    ...doc,
+    filesize: formatFilesize(doc.filesize)
+  };
+}
+//# sourceMappingURL=index.js.map