@payloadcms/ui 3.39.0-internal.32c7661 → 3.39.0

package/dist/views/CollectionFolder/index.js

@@ -0,0 +1,306 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useDndMonitor } from '@dnd-kit/core';
+import { getTranslation } from '@payloadcms/translations';
+import React, { Fragment } from 'react';
+import { DroppableBreadcrumb } from '../../elements/FolderView/Breadcrumbs/index.js';
+import { ColoredFolderIcon } from '../../elements/FolderView/ColoredFolderIcon/index.js';
+import { CurrentFolderActions } from '../../elements/FolderView/CurrentFolderActions/index.js';
+import { DragOverlaySelection } from '../../elements/FolderView/DragOverlaySelection/index.js';
+import { FolderFileTable } from '../../elements/FolderView/FolderFileTable/index.js';
+import { ItemCardGrid } from '../../elements/FolderView/ItemCardGrid/index.js';
+import { SortByPill } from '../../elements/FolderView/SortByPill/index.js';
+import { ToggleViewButtons } from '../../elements/FolderView/ToggleViewButtons/index.js';
+import { Gutter } from '../../elements/Gutter/index.js';
+import { ListFolderPills } from '../../elements/ListFolderPills/index.js';
+import { ListHeader } from '../../elements/ListHeader/index.js';
+import { ListBulkUploadButton, ListCreateNewDocInFolderButton } from '../../elements/ListHeader/TitleActions/index.js';
+import { NoListResults } from '../../elements/NoListResults/index.js';
+import { SearchBar } from '../../elements/SearchBar/index.js';
+import { useStepNav } from '../../elements/StepNav/index.js';
+import { useConfig } from '../../providers/Config/index.js';
+import { useEditDepth } from '../../providers/EditDepth/index.js';
+import { useFolder } from '../../providers/Folders/index.js';
+import { usePreferences } from '../../providers/Preferences/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { useWindowInfo } from '../../providers/WindowInfo/index.js';
+import { ListSelection } from './ListSelection/index.js';
+import './index.scss';
+const baseClass = 'collection-folder-list';
+export function DefaultCollectionFolderView(props) {
+  const {
+    AfterFolderList,
+    AfterFolderListTable,
+    BeforeFolderList,
+    BeforeFolderListTable,
+    collectionSlug,
+    Description,
+    disableBulkDelete,
+    disableBulkEdit,
+    hasCreatePermission,
+    viewPreference
+  } = props;
+  const {
+    config,
+    getEntityConfig
+  } = useConfig();
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const drawerDepth = useEditDepth();
+  const {
+    setStepNav
+  } = useStepNav();
+  const {
+    setPreference
+  } = usePreferences();
+  const {
+    addItems,
+    breadcrumbs,
+    documents,
+    filterItems,
+    focusedRowIndex,
+    folderCollectionConfig,
+    getSelectedItems,
+    isDragging,
+    lastSelectedIndex,
+    moveToFolder,
+    onItemClick,
+    onItemKeyPress,
+    search,
+    selectedIndexes,
+    setFolderID,
+    setIsDragging,
+    subfolders
+  } = useFolder();
+  const [activeView, setActiveView] = React.useState(viewPreference || 'grid');
+  const collectionConfig = getEntityConfig({
+    collectionSlug
+  });
+  const {
+    labels,
+    upload
+  } = collectionConfig;
+  const isUploadCollection = Boolean(upload);
+  const isBulkUploadEnabled = isUploadCollection && collectionConfig.upload.bulkUpload;
+  const {
+    breakpoints: {
+      s: smallBreak
+    }
+  } = useWindowInfo();
+  const onDragEnd = React.useCallback(async event => {
+    if (!event.over) {
+      return;
+    }
+    if (event.over.data.current.type === 'folder' && 'id' in event.over.data.current) {
+      await moveToFolder({
+        itemsToMove: getSelectedItems(),
+        toFolderID: event.over.data.current.id || null
+      });
+    }
+  }, [moveToFolder, getSelectedItems]);
+  const onCreateSuccess = React.useCallback(({
+    collectionSlug: collectionSlug_0,
+    doc
+  }) => {
+    const collectionConfig_0 = getEntityConfig({
+      collectionSlug: collectionSlug_0
+    });
+    const itemValue = {
+      id: doc?.id,
+      _folderOrDocumentTitle: doc?.[collectionConfig_0.admin.useAsTitle ?? 'id'],
+      createdAt: doc?.createdAt,
+      folderID: doc?.[config.folders.fieldName],
+      updatedAt: doc?.updatedAt
+    };
+    if (collectionConfig_0.upload) {
+      itemValue.filename = doc?.filename;
+      itemValue.mimeType = doc?.mimeType;
+      itemValue.url = doc?.url;
+    }
+    void addItems([{
+      itemKey: `${collectionSlug_0}-${doc.id}`,
+      relationTo: collectionSlug_0,
+      value: itemValue
+    }]);
+  }, [getEntityConfig, addItems]);
+  const selectedItemKeys = React.useMemo(() => {
+    return new Set(getSelectedItems().reduce((acc, item) => {
+      if (item) {
+        if (item.relationTo && item.value) {
+          acc.push(`${item.relationTo}-${item.value.id}`);
+        }
+      }
+      return acc;
+    }, []));
+  }, [getSelectedItems]);
+  const handleSetViewType = React.useCallback(view => {
+    void setPreference(`${collectionSlug}-collection-folder`, {
+      viewPreference: view
+    });
+    setActiveView(view);
+  }, []);
+  React.useEffect(() => {
+    if (!drawerDepth) {
+      setStepNav([!breadcrumbs.length ? {
+        label: /*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}__step-nav-icon-label`,
+          children: [/*#__PURE__*/_jsx(ColoredFolderIcon, {}), getTranslation(labels?.plural, i18n)]
+        }, "root")
+      } : {
+        label: /*#__PURE__*/_jsxs(DroppableBreadcrumb, {
+          className: [`${baseClass}__step-nav-droppable`, `${baseClass}__step-nav-icon-label`].filter(Boolean).join(' '),
+          id: null,
+          onClick: () => {
+            void setFolderID({
+              folderID: null
+            });
+          },
+          children: [/*#__PURE__*/_jsx(ColoredFolderIcon, {}), getTranslation(labels?.plural, i18n)]
+        }, "root")
+      }, ...breadcrumbs.map((crumb, crumbIndex) => {
+        return {
+          label: crumbIndex === breadcrumbs.length - 1 ? crumb.name : /*#__PURE__*/_jsx(DroppableBreadcrumb, {
+            className: `${baseClass}__step-nav-droppable`,
+            id: crumb.id,
+            onClick: () => {
+              void setFolderID({
+                folderID: crumb.id
+              });
+            },
+            children: crumb.name
+          }, crumb.id)
+        };
+      })]);
+    }
+  }, [setStepNav, labels, drawerDepth, i18n, breadcrumbs, setFolderID]);
+  const totalDocsAndSubfolders = documents.length + subfolders.length;
+  return /*#__PURE__*/_jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx(DndEventListener, {
+      onDragEnd: onDragEnd,
+      setIsDragging: setIsDragging
+    }), /*#__PURE__*/_jsxs("div", {
+      className: `${baseClass} ${baseClass}--${collectionSlug}`,
+      children: [BeforeFolderList, /*#__PURE__*/_jsxs(Gutter, {
+        className: `${baseClass}__wrap`,
+        children: [/*#__PURE__*/_jsx(ListHeader, {
+          Actions: [!smallBreak && /*#__PURE__*/_jsx(ListSelection, {
+            disableBulkDelete: disableBulkDelete,
+            disableBulkEdit: disableBulkEdit
+          }, "list-selection"), /*#__PURE__*/_jsx(ListFolderPills, {
+            collectionConfig: collectionConfig,
+            viewType: "folders"
+          }, "list-header-buttons")].filter(Boolean),
+          AfterListHeaderContent: Description,
+          title: getTranslation(labels?.plural, i18n),
+          TitleActions: [hasCreatePermission && /*#__PURE__*/_jsx(ListCreateNewDocInFolderButton, {
+            buttonLabel: t('general:createNew'),
+            collectionSlugs: [folderCollectionConfig.slug, collectionSlug],
+            onCreateSuccess: onCreateSuccess,
+            slugPrefix: "create-document--header-pill"
+          }, "create-new-button"), /*#__PURE__*/_jsx(ListBulkUploadButton, {
+            collectionSlug: collectionSlug,
+            hasCreatePermission: hasCreatePermission,
+            isBulkUploadEnabled: isBulkUploadEnabled
+          }, "bulk-upload-button")].filter(Boolean)
+        }), /*#__PURE__*/_jsx(SearchBar, {
+          Actions: [/*#__PURE__*/_jsx(SortByPill, {}, "sort-by-pill"), /*#__PURE__*/_jsx(ToggleViewButtons, {
+            activeView: activeView,
+            setActiveView: handleSetViewType
+          }, "toggle-view-buttons"), /*#__PURE__*/_jsx(CurrentFolderActions, {}, "current-folder-actions")].filter(Boolean),
+          label: t('general:searchBy', {
+            label: t('general:name')
+          }),
+          onSearchChange: search_0 => filterItems({
+            search: search_0
+          }),
+          searchQueryParam: search
+        }), BeforeFolderListTable, totalDocsAndSubfolders > 0 && /*#__PURE__*/_jsx(_Fragment, {
+          children: activeView === 'grid' ? /*#__PURE__*/_jsxs("div", {
+            children: [subfolders.length ? /*#__PURE__*/_jsx(_Fragment, {
+              children: /*#__PURE__*/_jsx(ItemCardGrid, {
+                items: subfolders,
+                selectedItemKeys: selectedItemKeys,
+                title: 'Folders',
+                type: "folder"
+              })
+            }) : null, documents.length ? /*#__PURE__*/_jsx(_Fragment, {
+              children: /*#__PURE__*/_jsx(ItemCardGrid, {
+                items: documents,
+                selectedItemKeys: selectedItemKeys,
+                subfolderCount: subfolders.length,
+                title: 'Documents',
+                type: "file"
+              })
+            }) : null]
+          }) : /*#__PURE__*/_jsx(FolderFileTable, {
+            dateFormat: config.admin.dateFormat,
+            documents: documents,
+            focusedRowIndex: focusedRowIndex,
+            i18n: i18n,
+            isMovingItems: isDragging,
+            onRowClick: onItemClick,
+            onRowPress: onItemKeyPress,
+            selectedItems: selectedItemKeys,
+            showRelationCell: false,
+            subfolders: subfolders
+          })
+        }), totalDocsAndSubfolders === 0 && /*#__PURE__*/_jsx(NoListResults, {
+          Actions: [/*#__PURE__*/_jsx(ListCreateNewDocInFolderButton, {
+            buttonLabel: `${t('general:create')} ${getTranslation(folderCollectionConfig.labels?.singular, i18n).toLowerCase()}`,
+            collectionSlugs: [folderCollectionConfig.slug],
+            onCreateSuccess: onCreateSuccess,
+            slugPrefix: "create-folder--no-results"
+          }, "create-folder"), /*#__PURE__*/_jsx(ListCreateNewDocInFolderButton, {
+            buttonLabel: `${t('general:create')} ${t('general:document').toLowerCase()}`,
+            collectionSlugs: [collectionSlug],
+            onCreateSuccess: onCreateSuccess,
+            slugPrefix: "create-document--no-results"
+          }, "create-document")].filter(Boolean),
+          Message: /*#__PURE__*/_jsx("p", {
+            children: i18n.t('general:noResults', {
+              label: `${getTranslation(labels?.plural, i18n)} ${t('general:or').toLowerCase()} ${getTranslation(folderCollectionConfig.labels?.plural, i18n)}`
+            })
+          })
+        }), AfterFolderListTable]
+      }), AfterFolderList]
+    }), /*#__PURE__*/_jsx(DragOverlaySelection, {
+      allItems: [...subfolders, ...documents],
+      lastSelected: lastSelectedIndex,
+      selectedCount: selectedIndexes.size
+    })]
+  });
+}
+function DndEventListener(t0) {
+  const $ = _c(3);
+  const {
+    onDragEnd,
+    setIsDragging
+  } = t0;
+  let t1;
+  if ($[0] !== onDragEnd || $[1] !== setIsDragging) {
+    t1 = {
+      onDragCancel() {
+        setIsDragging(false);
+      },
+      onDragEnd(event) {
+        setIsDragging(false);
+        onDragEnd(event);
+      },
+      onDragStart() {
+        setIsDragging(true);
+      }
+    };
+    $[0] = onDragEnd;
+    $[1] = setIsDragging;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  useDndMonitor(t1);
+  return null;
+}
+//# sourceMappingURL=index.js.map

package/dist/views/CollectionFolder/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","useDndMonitor","getTranslation","React","Fragment","DroppableBreadcrumb","ColoredFolderIcon","CurrentFolderActions","DragOverlaySelection","FolderFileTable","ItemCardGrid","SortByPill","ToggleViewButtons","Gutter","ListFolderPills","ListHeader","ListBulkUploadButton","ListCreateNewDocInFolderButton","NoListResults","SearchBar","useStepNav","useConfig","useEditDepth","useFolder","usePreferences","useTranslation","useWindowInfo","ListSelection","baseClass","DefaultCollectionFolderView","props","AfterFolderList","AfterFolderListTable","BeforeFolderList","BeforeFolderListTable","collectionSlug","Description","disableBulkDelete","disableBulkEdit","hasCreatePermission","viewPreference","config","getEntityConfig","i18n","t","drawerDepth","setStepNav","setPreference","addItems","breadcrumbs","documents","filterItems","focusedRowIndex","folderCollectionConfig","getSelectedItems","isDragging","lastSelectedIndex","moveToFolder","onItemClick","onItemKeyPress","search","selectedIndexes","setFolderID","setIsDragging","subfolders","activeView","setActiveView","useState","collectionConfig","labels","upload","isUploadCollection","Boolean","isBulkUploadEnabled","bulkUpload","breakpoints","s","smallBreak","onDragEnd","useCallback","event","over","data","current","type","itemsToMove","toFolderID","id","onCreateSuccess","doc","itemValue","_folderOrDocumentTitle","admin","useAsTitle","createdAt","folderID","folders","fieldName","updatedAt","filename","mimeType","url","itemKey","relationTo","value","selectedItemKeys","useMemo","Set","reduce","acc","item","push","handleSetViewType","view","useEffect","length","label","_jsxs","className","_jsx","plural","filter","join","onClick","map","crumb","crumbIndex","name","totalDocsAndSubfolders","DndEventListener","Actions","viewType","AfterListHeaderContent","title","TitleActions","buttonLabel","collectionSlugs","slug","slugPrefix","onSearchChange","searchQueryParam","_Fragment","items","subfolderCount","dateFormat","isMovingItems","onRowClick","onRowPress","selectedItems","showRelationCell","singular","toLowerCase","Message","allItems","lastSelected","selectedCount","size","t0","$","t1","onDragCancel","onDragStart"],"sources":["../../../src/views/CollectionFolder/index.tsx"],"sourcesContent":["'use client'\n\nimport type { DragEndEvent } from '@dnd-kit/core'\nimport type { CollectionSlug, Document, FolderListViewClientProps } from 'payload'\nimport type { FolderDocumentItemKey, FolderOrDocument } from 'payload/shared'\n\nimport { useDndMonitor } from '@dnd-kit/core'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { Fragment } from 'react'\n\nimport { DroppableBreadcrumb } from '../../elements/FolderView/Breadcrumbs/index.js'\nimport { ColoredFolderIcon } from '../../elements/FolderView/ColoredFolderIcon/index.js'\nimport { CurrentFolderActions } from '../../elements/FolderView/CurrentFolderActions/index.js'\nimport { DragOverlaySelection } from '../../elements/FolderView/DragOverlaySelection/index.js'\nimport { FolderFileTable } from '../../elements/FolderView/FolderFileTable/index.js'\nimport { ItemCardGrid } from '../../elements/FolderView/ItemCardGrid/index.js'\nimport { SortByPill } from '../../elements/FolderView/SortByPill/index.js'\nimport { ToggleViewButtons } from '../../elements/FolderView/ToggleViewButtons/index.js'\nimport { Gutter } from '../../elements/Gutter/index.js'\nimport { ListFolderPills } from '../../elements/ListFolderPills/index.js'\nimport { ListHeader } from '../../elements/ListHeader/index.js'\nimport {\n  ListBulkUploadButton,\n  ListCreateNewDocInFolderButton,\n} from '../../elements/ListHeader/TitleActions/index.js'\nimport { NoListResults } from '../../elements/NoListResults/index.js'\nimport { SearchBar } from '../../elements/SearchBar/index.js'\nimport { useStepNav } from '../../elements/StepNav/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useFolder } from '../../providers/Folders/index.js'\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { useWindowInfo } from '../../providers/WindowInfo/index.js'\nimport { ListSelection } from './ListSelection/index.js'\nimport './index.scss'\n\nconst baseClass = 'collection-folder-list'\n\nexport function DefaultCollectionFolderView(props: FolderListViewClientProps) {\n  const {\n    AfterFolderList,\n    AfterFolderListTable,\n    BeforeFolderList,\n    BeforeFolderListTable,\n    collectionSlug,\n    Description,\n    disableBulkDelete,\n    disableBulkEdit,\n    hasCreatePermission,\n    viewPreference,\n  } = props\n\n  const { config, getEntityConfig } = useConfig()\n  const { i18n, t } = useTranslation()\n  const drawerDepth = useEditDepth()\n  const { setStepNav } = useStepNav()\n  const { setPreference } = usePreferences()\n  const {\n    addItems,\n    breadcrumbs,\n    documents,\n    filterItems,\n    focusedRowIndex,\n    folderCollectionConfig,\n    getSelectedItems,\n    isDragging,\n    lastSelectedIndex,\n    moveToFolder,\n    onItemClick,\n    onItemKeyPress,\n    search,\n    selectedIndexes,\n    setFolderID,\n    setIsDragging,\n    subfolders,\n  } = useFolder()\n\n  const [activeView, setActiveView] = React.useState<'grid' | 'list'>(viewPreference || 'grid')\n\n  const collectionConfig = getEntityConfig({ collectionSlug })\n\n  const { labels, upload } = collectionConfig\n  const isUploadCollection = Boolean(upload)\n  const isBulkUploadEnabled = isUploadCollection && collectionConfig.upload.bulkUpload\n\n  const {\n    breakpoints: { s: smallBreak },\n  } = useWindowInfo()\n\n  const onDragEnd = React.useCallback(\n    async (event: DragEndEvent) => {\n      if (!event.over) {\n        return\n      }\n\n      if (event.over.data.current.type === 'folder' && 'id' in event.over.data.current) {\n        await moveToFolder({\n          itemsToMove: getSelectedItems(),\n          toFolderID: event.over.data.current.id || null,\n        })\n      }\n    },\n    [moveToFolder, getSelectedItems],\n  )\n\n  const onCreateSuccess = React.useCallback(\n    ({ collectionSlug, doc }: { collectionSlug: CollectionSlug; doc: Document }) => {\n      const collectionConfig = getEntityConfig({ collectionSlug })\n      const itemValue: FolderOrDocument['value'] = {\n        id: doc?.id,\n        _folderOrDocumentTitle: doc?.[collectionConfig.admin.useAsTitle ?? 'id'],\n        createdAt: doc?.createdAt,\n        folderID: doc?.[config.folders.fieldName],\n        updatedAt: doc?.updatedAt,\n      }\n\n      if (collectionConfig.upload) {\n        itemValue.filename = doc?.filename\n        itemValue.mimeType = doc?.mimeType\n        itemValue.url = doc?.url\n      }\n\n      void addItems([\n        {\n          itemKey: `${collectionSlug}-${doc.id}`,\n          relationTo: collectionSlug,\n          value: itemValue,\n        },\n      ])\n    },\n    [getEntityConfig, addItems],\n  )\n\n  const selectedItemKeys = React.useMemo(() => {\n    return new Set(\n      getSelectedItems().reduce<FolderDocumentItemKey[]>((acc, item) => {\n        if (item) {\n          if (item.relationTo && item.value) {\n            acc.push(`${item.relationTo}-${item.value.id}`)\n          }\n        }\n        return acc\n      }, []),\n    )\n  }, [getSelectedItems])\n\n  const handleSetViewType = React.useCallback((view: 'grid' | 'list') => {\n    void setPreference(`${collectionSlug}-collection-folder`, {\n      viewPreference: view,\n    })\n    setActiveView(view)\n  }, [])\n\n  React.useEffect(() => {\n    if (!drawerDepth) {\n      setStepNav([\n        !breadcrumbs.length\n          ? {\n              label: (\n                <div className={`${baseClass}__step-nav-icon-label`} key=\"root\">\n                  <ColoredFolderIcon />\n                  {getTranslation(labels?.plural, i18n)}\n                </div>\n              ),\n            }\n          : {\n              label: (\n                <DroppableBreadcrumb\n                  className={[\n                    `${baseClass}__step-nav-droppable`,\n                    `${baseClass}__step-nav-icon-label`,\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                  id={null}\n                  key=\"root\"\n                  onClick={() => {\n                    void setFolderID({ folderID: null })\n                  }}\n                >\n                  <ColoredFolderIcon />\n                  {getTranslation(labels?.plural, i18n)}\n                </DroppableBreadcrumb>\n              ),\n            },\n        ...breadcrumbs.map((crumb, crumbIndex) => {\n          return {\n            label:\n              crumbIndex === breadcrumbs.length - 1 ? (\n                crumb.name\n              ) : (\n                <DroppableBreadcrumb\n                  className={`${baseClass}__step-nav-droppable`}\n                  id={crumb.id}\n                  key={crumb.id}\n                  onClick={() => {\n                    void setFolderID({ folderID: crumb.id })\n                  }}\n                >\n                  {crumb.name}\n                </DroppableBreadcrumb>\n              ),\n          }\n        }),\n      ])\n    }\n  }, [setStepNav, labels, drawerDepth, i18n, breadcrumbs, setFolderID])\n\n  const totalDocsAndSubfolders = documents.length + subfolders.length\n\n  return (\n    <Fragment>\n      <DndEventListener onDragEnd={onDragEnd} setIsDragging={setIsDragging} />\n      <div className={`${baseClass} ${baseClass}--${collectionSlug}`}>\n        {BeforeFolderList}\n        <Gutter className={`${baseClass}__wrap`}>\n          <ListHeader\n            Actions={[\n              !smallBreak && (\n                <ListSelection\n                  disableBulkDelete={disableBulkDelete}\n                  disableBulkEdit={disableBulkEdit}\n                  key=\"list-selection\"\n                />\n              ),\n              <ListFolderPills\n                collectionConfig={collectionConfig}\n                key=\"list-header-buttons\"\n                viewType=\"folders\"\n              />,\n            ].filter(Boolean)}\n            AfterListHeaderContent={Description}\n            title={getTranslation(labels?.plural, i18n)}\n            TitleActions={[\n              hasCreatePermission && (\n                <ListCreateNewDocInFolderButton\n                  buttonLabel={t('general:createNew')}\n                  collectionSlugs={[folderCollectionConfig.slug, collectionSlug]}\n                  key=\"create-new-button\"\n                  onCreateSuccess={onCreateSuccess}\n                  slugPrefix=\"create-document--header-pill\"\n                />\n              ),\n              <ListBulkUploadButton\n                collectionSlug={collectionSlug}\n                hasCreatePermission={hasCreatePermission}\n                isBulkUploadEnabled={isBulkUploadEnabled}\n                key=\"bulk-upload-button\"\n              />,\n            ].filter(Boolean)}\n          />\n          <SearchBar\n            Actions={[\n              <SortByPill key=\"sort-by-pill\" />,\n              <ToggleViewButtons\n                activeView={activeView}\n                key=\"toggle-view-buttons\"\n                setActiveView={handleSetViewType}\n              />,\n              <CurrentFolderActions key=\"current-folder-actions\" />,\n            ].filter(Boolean)}\n            label={t('general:searchBy', {\n              label: t('general:name'),\n            })}\n            onSearchChange={(search) => filterItems({ search })}\n            searchQueryParam={search}\n          />\n          {BeforeFolderListTable}\n          {totalDocsAndSubfolders > 0 && (\n            <>\n              {activeView === 'grid' ? (\n                <div>\n                  {subfolders.length ? (\n                    <>\n                      <ItemCardGrid\n                        items={subfolders}\n                        selectedItemKeys={selectedItemKeys}\n                        title={'Folders'}\n                        type=\"folder\"\n                      />\n                    </>\n                  ) : null}\n\n                  {documents.length ? (\n                    <>\n                      <ItemCardGrid\n                        items={documents}\n                        selectedItemKeys={selectedItemKeys}\n                        subfolderCount={subfolders.length}\n                        title={'Documents'}\n                        type=\"file\"\n                      />\n                    </>\n                  ) : null}\n                </div>\n              ) : (\n                <FolderFileTable\n                  dateFormat={config.admin.dateFormat}\n                  documents={documents}\n                  focusedRowIndex={focusedRowIndex}\n                  i18n={i18n}\n                  isMovingItems={isDragging}\n                  onRowClick={onItemClick}\n                  onRowPress={onItemKeyPress}\n                  selectedItems={selectedItemKeys}\n                  showRelationCell={false}\n                  subfolders={subfolders}\n                />\n              )}\n            </>\n          )}\n          {totalDocsAndSubfolders === 0 && (\n            <NoListResults\n              Actions={[\n                <ListCreateNewDocInFolderButton\n                  buttonLabel={`${t('general:create')} ${getTranslation(folderCollectionConfig.labels?.singular, i18n).toLowerCase()}`}\n                  collectionSlugs={[folderCollectionConfig.slug]}\n                  key=\"create-folder\"\n                  onCreateSuccess={onCreateSuccess}\n                  slugPrefix=\"create-folder--no-results\"\n                />,\n                <ListCreateNewDocInFolderButton\n                  buttonLabel={`${t('general:create')} ${t('general:document').toLowerCase()}`}\n                  collectionSlugs={[collectionSlug]}\n                  key=\"create-document\"\n                  onCreateSuccess={onCreateSuccess}\n                  slugPrefix=\"create-document--no-results\"\n                />,\n              ].filter(Boolean)}\n              Message={\n                <p>\n                  {i18n.t('general:noResults', {\n                    label: `${getTranslation(labels?.plural, i18n)} ${t('general:or').toLowerCase()} ${getTranslation(\n                      folderCollectionConfig.labels?.plural,\n                      i18n,\n                    )}`,\n                  })}\n                </p>\n              }\n            />\n          )}\n          {AfterFolderListTable}\n        </Gutter>\n        {AfterFolderList}\n      </div>\n      <DragOverlaySelection\n        allItems={[...subfolders, ...documents]}\n        lastSelected={lastSelectedIndex}\n        selectedCount={selectedIndexes.size}\n      />\n    </Fragment>\n  )\n}\nfunction DndEventListener({ onDragEnd, setIsDragging }) {\n  useDndMonitor({\n    onDragCancel() {\n      setIsDragging(false)\n    },\n    onDragEnd(event) {\n      setIsDragging(false)\n      onDragEnd(event)\n    },\n    onDragStart() {\n      setIsDragging(true)\n    },\n  })\n\n  return null\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/views/CollectionFolder/index.scss

@@ -0,0 +1,162 @@
+@import '../../scss/styles.scss';
+
+@layer payload-default {
+  .collection-folder-list {
+    width: 100%;
+
+    &__step-nav-icon-label,
+    &__step-nav-icon-label .btn__label {
+      margin: 0;
+      display: flex;
+      align-items: center;
+      gap: calc(var(--base) * 0.25);
+
+      .icon {
+        height: 18px;
+      }
+    }
+
+    &__step-nav-droppable.droppable-button {
+      &--hover {
+        opacity: 0.3;
+      }
+    }
+
+    &__wrap {
+      padding-bottom: var(--spacing-view-bottom);
+
+      & > *:not(:last-child) {
+        margin-bottom: var(--base);
+      }
+    }
+
+    .cell-with-icon {
+      display: flex;
+      align-items: center;
+      gap: calc(var(--base) * 0.5);
+    }
+
+    .list-header {
+      a {
+        text-decoration: none;
+      }
+    }
+
+    &__sub-header {
+      flex-basis: 100%;
+    }
+
+    .table {
+      table {
+        width: 100%;
+        overflow: auto;
+
+        [class^='cell'] > p,
+        [class^='cell'] > span,
+        [class^='cell'] > a {
+          line-clamp: 4;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 4;
+          overflow: hidden;
+          display: -webkit-box;
+          max-width: 100vw;
+        }
+      }
+    }
+
+    &__no-results {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--base);
+
+      & > * {
+        margin: 0;
+      }
+    }
+
+    &__page-controls {
+      width: 100%;
+      display: flex;
+      align-items: center;
+    }
+
+    .paginator {
+      margin-bottom: 0;
+    }
+
+    &__page-info {
+      [dir='ltr'] & {
+        margin-right: base(1);
+        margin-left: auto;
+      }
+      [dir='rtl'] & {
+        margin-left: base(1);
+        margin-right: auto;
+      }
+    }
+
+    &__shimmer {
+      margin-top: base(1.75);
+      width: 100%;
+      > div {
+        margin-top: 8px;
+      }
+    }
+
+    @include mid-break {
+      margin-top: base(0.25);
+
+      &__wrap {
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+
+      &__header {
+        gap: base(0.5);
+      }
+
+      &__sub-header {
+        margin-top: 0;
+      }
+
+      &__search-input {
+        margin: 0;
+      }
+
+      // on mobile, extend the table all the way to the viewport edges
+      // this is to visually indicate overflowing content
+      .table {
+        display: flex;
+        width: calc(100% + calc(var(--gutter-h) * 2));
+        max-width: unset;
+        left: calc(var(--gutter-h) * -1);
+        position: relative;
+        padding-left: var(--gutter-h);
+
+        &::after {
+          content: '';
+          height: 1px;
+          padding-right: var(--gutter-h);
+        }
+      }
+
+      &__page-controls {
+        flex-wrap: wrap;
+      }
+
+      &__page-info {
+        margin-left: 0;
+      }
+
+      .paginator {
+        width: 100%;
+        margin-bottom: $baseline;
+      }
+    }
+
+    @include small-break {
+      margin-bottom: base(2.4);
+    }
+  }
+}

package/dist/views/Edit/index.js

@@ -242,7 +242,7 @@ export function DefaultEditView({
       abortOnSaveRef.current = null;
       return state;
     }
-  }, [reportUpdate, id, entitySlug, user, collectionSlug, userSlug, incrementVersionCount, updateSavedDocumentData, onSaveFromContext, isEditing, depth, getDocPermissions, globalSlug, autosaveEnabled, refreshCookieAsync, adminRoute, locale, router, resetUploadEdits, getDocPreferences, getFormState, docPermissions, operation, schemaPathSegments, isLockingEnabled, setDocumentIsLocked, startRouteTransition, redirectAfterCreate]);
+  }, [reportUpdate, id, entitySlug, user, collectionSlug, userSlug, incrementVersionCount, updateSavedDocumentData, onSaveFromContext, redirectAfterCreate, isEditing, depth, getDocPermissions, globalSlug, autosaveEnabled, refreshCookieAsync, adminRoute, locale, router, resetUploadEdits, getDocPreferences, getFormState, docPermissions, operation, schemaPathSegments, isLockingEnabled, setDocumentIsLocked, startRouteTransition]);
   const onChange = useCallback(async ({
     formState: prevFormState,
     submitted