@payloadcms/ui 3.86.0-internal.ac46214 → 4.0.0-internal.1f9ae9a

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

@@ -0,0 +1,30 @@
+@layer payload-default {
+  .list-drawer__header {
+    margin-top: var(--spacer-6);
+    width: 100%;
+  }
+
+  .list-drawer__select-collection-wrap {
+    margin-top: var(--spacer-3);
+  }
+
+  @media (max-width: 768px) {
+    .list-drawer__header {
+      margin-top: var(--spacer-5);
+    }
+
+    .list-drawer .collection-list__header {
+      margin-bottom: var(--spacer-2);
+    }
+
+    .list-drawer__select-collection-wrap {
+      margin-top: var(--spacer-2);
+    }
+  }
+
+  .drawer .list-drawer__header {
+    margin-top: 0;
+    padding: var(--spacer-2-5);
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+  }
+}

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

@@ -1,7 +1,7 @@
 import type { I18nClient, TFunction } from '@payloadcms/translations';
 import type { ClientCollectionConfig, ViewTypes } from 'payload';
 import React from 'react';
-import './index.scss';
+import './index.css';
 export type ListHeaderProps = {
     Actions?: React.ReactNode[];
     className?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/List/ListHeader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AACrE,OAAO,KAAK,EAAE,sBAAsB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAGhE,OAAO,KAAK,MAAM,OAAO,CAAA;AAgBzB,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,EAAE,sBAAsB,CAAA;IACxC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,mBAAmB,EAAE,OAAO,CAAA;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,IAAI,EAAE,UAAU,CAAA;IAChB,mBAAmB,EAAE,OAAO,CAAA;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,cAAc,EAAE,MAAM,CAAA;IACtB,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAA;IAChC;;;;;OAKG;IACH,cAAc,EAAE,MAAM,IAAI,CAAA;IAC1B,UAAU,EAAE,OAAO,CAAA;IACnB,uEAAuE;IACvE,CAAC,CAAC,EAAE,SAAS,CAAA;IACb,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAChC,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA6G1D,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/List/ListHeader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AACrE,OAAO,KAAK,EAAE,sBAAsB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAGhE,OAAO,KAAK,MAAM,OAAO,CAAA;AAezB,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,EAAE,sBAAsB,CAAA;IACxC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,mBAAmB,EAAE,OAAO,CAAA;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,IAAI,EAAE,UAAU,CAAA;IAChB,mBAAmB,EAAE,OAAO,CAAA;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,cAAc,EAAE,MAAM,CAAA;IACtB,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAA;IAChC;;;;;OAKG;IACH,cAAc,EAAE,MAAM,IAAI,CAAA;IAC1B,UAAU,EAAE,OAAO,CAAA;IACnB,uEAAuE;IACvE,CAAC,CAAC,EAAE,SAAS,CAAA;IACb,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAChC,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAkG1D,CAAA"}

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

@@ -7,11 +7,11 @@ import { useListDrawerContext } from '../../../elements/ListDrawer/Provider.js';
 import { DrawerRelationshipSelect } from '../../../elements/ListHeader/DrawerRelationshipSelect/index.js';
 import { ListDrawerCreateNewDocButton } from '../../../elements/ListHeader/DrawerTitleActions/index.js';
 import { ListHeader } from '../../../elements/ListHeader/index.js';
-import { ListBulkUploadButton, ListCreateNewButton, ListEmptyTrashButton } from '../../../elements/ListHeader/TitleActions/index.js';
+import { ListBulkUploadButton, ListEmptyTrashButton } from '../../../elements/ListHeader/TitleActions/index.js';
 import { useConfig } from '../../../providers/Config/index.js';
 import { useListQuery } from '../../../providers/ListQuery/index.js';
 import { ListSelection } from '../ListSelection/index.js';
-import './index.scss';
+import './index.css';
 const drawerBaseClass = 'list-drawer';
 export const CollectionListHeader = ({
   className,
@@ -46,13 +46,14 @@ export const CollectionListHeader = ({
   } = useListQuery();
   if (isInDrawer) {
     return /*#__PURE__*/_jsx(ListHeader, {
-      Actions: [/*#__PURE__*/_jsx(CloseModalButton, {
-        className: `${drawerBaseClass}__header-close`,
-        slug: drawerSlug
-      }, "close-button")],
+      Actions: [],
       AfterListHeaderContent: /*#__PURE__*/_jsxs(_Fragment, {
         children: [Description, /*#__PURE__*/_jsx(DrawerRelationshipSelect, {})]
       }),
+      BeforeTitle: /*#__PURE__*/_jsx(CloseModalButton, {
+        className: `${drawerBaseClass}__header-close`,
+        slug: drawerSlug
+      }),
       className: `${drawerBaseClass}__header`,
       title: getTranslation(getEntityConfig({
         collectionSlug: selectedOption.value
@@ -80,11 +81,7 @@ export const CollectionListHeader = ({
     AfterListHeaderContent: Description,
     className: className,
     title: getTranslation(collectionConfig?.labels?.plural, i18n),
-    TitleActions: [hasCreatePermission && !isTrashRoute && /*#__PURE__*/_jsx(ListCreateNewButton, {
-      collectionConfig: collectionConfig,
-      hasCreatePermission: hasCreatePermission,
-      newDocumentURL: newDocumentURL
-    }, "list-header-create-new-doc"), hasCreatePermission && isBulkUploadEnabled && !isTrashRoute && /*#__PURE__*/_jsx(ListBulkUploadButton, {
+    TitleActions: [hasCreatePermission && isBulkUploadEnabled && !isTrashRoute && /*#__PURE__*/_jsx(ListBulkUploadButton, {
       collectionSlug: collectionConfig.slug,
       hasCreatePermission: hasCreatePermission,
       isBulkUploadEnabled: isBulkUploadEnabled,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["getTranslation","React","CloseModalButton","DefaultListViewTabs","useListDrawerContext","DrawerRelationshipSelect","ListDrawerCreateNewDocButton","ListHeader","ListBulkUploadButton","ListCreateNewButton","ListEmptyTrashButton","useConfig","useListQuery","ListSelection","drawerBaseClass","CollectionListHeader","className","collectionConfig","Description","disableBulkDelete","disableBulkEdit","hasCreatePermission","hasDeletePermission","hasTrashPermission","i18n","isBulkUploadEnabled","isTrashEnabled","newDocumentURL","onBulkUploadSuccess","openBulkUpload","smallBreak","viewType","config","getEntityConfig","drawerSlug","isInDrawer","selectedOption","isTrashRoute","isGroupingBy","_jsx","Actions","slug","AfterListHeaderContent","_jsxs","_Fragment","title","collectionSlug","value","labels","plural","TitleActions","filter","Boolean","label","showSelectAllAcrossPages"],"sources":["../../../../src/views/List/ListHeader/index.tsx"],"sourcesContent":["import type { I18nClient, TFunction } from '@payloadcms/translations'\nimport type { ClientCollectionConfig, ViewTypes } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { CloseModalButton } from '../../../elements/CloseModalButton/index.js'\nimport { DefaultListViewTabs } from '../../../elements/DefaultListViewTabs/index.js'\nimport { useListDrawerContext } from '../../../elements/ListDrawer/Provider.js'\nimport { DrawerRelationshipSelect } from '../../../elements/ListHeader/DrawerRelationshipSelect/index.js'\nimport { ListDrawerCreateNewDocButton } from '../../../elements/ListHeader/DrawerTitleActions/index.js'\nimport { ListHeader } from '../../../elements/ListHeader/index.js'\nimport {\n  ListBulkUploadButton,\n  ListCreateNewButton,\n  ListEmptyTrashButton,\n} from '../../../elements/ListHeader/TitleActions/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useListQuery } from '../../../providers/ListQuery/index.js'\nimport { ListSelection } from '../ListSelection/index.js'\nimport './index.scss'\n\nconst drawerBaseClass = 'list-drawer'\n\nexport type ListHeaderProps = {\n  Actions?: React.ReactNode[]\n  className?: string\n  collectionConfig: ClientCollectionConfig\n  Description?: React.ReactNode\n  disableBulkDelete?: boolean\n  disableBulkEdit?: boolean\n  hasCreatePermission: boolean\n  hasDeletePermission?: boolean\n  hasTrashPermission?: boolean\n  i18n: I18nClient\n  isBulkUploadEnabled: boolean\n  isTrashEnabled?: boolean\n  newDocumentURL: string\n  onBulkUploadSuccess?: () => void\n  /** @deprecated This prop will be removed in the next major version.\n   *\n   * Opening of the bulk upload modal is handled internally.\n   *\n   * Prefer `onBulkUploadSuccess` usage to handle the success of the bulk upload.\n   */\n  openBulkUpload: () => void\n  smallBreak: boolean\n  /** @deprecated This prop will be removed in the next major version. */\n  t?: TFunction\n  TitleActions?: React.ReactNode[]\n  viewType?: ViewTypes\n}\n\nexport const CollectionListHeader: React.FC<ListHeaderProps> = ({\n  className,\n  collectionConfig,\n  Description,\n  disableBulkDelete,\n  disableBulkEdit,\n  hasCreatePermission,\n  hasDeletePermission,\n  hasTrashPermission,\n  i18n,\n  isBulkUploadEnabled,\n  isTrashEnabled,\n  newDocumentURL,\n  onBulkUploadSuccess,\n  openBulkUpload,\n  smallBreak,\n  viewType,\n}) => {\n  const { config, getEntityConfig } = useConfig()\n  const { drawerSlug, isInDrawer, selectedOption } = useListDrawerContext()\n  const isTrashRoute = viewType === 'trash'\n  const { isGroupingBy } = useListQuery()\n\n  if (isInDrawer) {\n    return (\n      <ListHeader\n        Actions={[\n          <CloseModalButton\n            className={`${drawerBaseClass}__header-close`}\n            key=\"close-button\"\n            slug={drawerSlug}\n          />,\n        ]}\n        AfterListHeaderContent={\n          <>\n            {Description}\n            {<DrawerRelationshipSelect />}\n          </>\n        }\n        className={`${drawerBaseClass}__header`}\n        title={getTranslation(\n          getEntityConfig({ collectionSlug: selectedOption.value })?.labels?.plural,\n          i18n,\n        )}\n        TitleActions={[\n          <ListDrawerCreateNewDocButton\n            hasCreatePermission={hasCreatePermission}\n            key=\"list-drawer-create-new-doc\"\n          />,\n        ].filter(Boolean)}\n      />\n    )\n  }\n\n  return (\n    <ListHeader\n      Actions={[\n        !smallBreak && !isGroupingBy && (\n          <ListSelection\n            collectionConfig={collectionConfig}\n            disableBulkDelete={disableBulkDelete}\n            disableBulkEdit={disableBulkEdit}\n            hasDeletePermission={hasDeletePermission}\n            hasTrashPermission={hasTrashPermission}\n            key=\"list-selection\"\n            label={getTranslation(collectionConfig?.labels?.plural, i18n)}\n            showSelectAllAcrossPages={!isGroupingBy}\n            viewType={viewType}\n          />\n        ),\n        <DefaultListViewTabs\n          collectionConfig={collectionConfig}\n          config={config}\n          key=\"default-list-actions\"\n          viewType={viewType}\n        />,\n      ].filter(Boolean)}\n      AfterListHeaderContent={Description}\n      className={className}\n      title={getTranslation(collectionConfig?.labels?.plural, i18n)}\n      TitleActions={[\n        hasCreatePermission && !isTrashRoute && (\n          <ListCreateNewButton\n            collectionConfig={collectionConfig}\n            hasCreatePermission={hasCreatePermission}\n            key=\"list-header-create-new-doc\"\n            newDocumentURL={newDocumentURL}\n          />\n        ),\n        hasCreatePermission && isBulkUploadEnabled && !isTrashRoute && (\n          <ListBulkUploadButton\n            collectionSlug={collectionConfig.slug}\n            hasCreatePermission={hasCreatePermission}\n            isBulkUploadEnabled={isBulkUploadEnabled}\n            key=\"list-header-bulk-upload\"\n            onBulkUploadSuccess={onBulkUploadSuccess}\n            openBulkUpload={openBulkUpload}\n          />\n        ),\n        hasDeletePermission && isTrashEnabled && viewType === 'trash' && (\n          <ListEmptyTrashButton\n            collectionConfig={collectionConfig}\n            hasDeletePermission={hasDeletePermission}\n            key=\"list-header-empty-trash\"\n          />\n        ),\n      ].filter(Boolean)}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["getTranslation","React","CloseModalButton","DefaultListViewTabs","useListDrawerContext","DrawerRelationshipSelect","ListDrawerCreateNewDocButton","ListHeader","ListBulkUploadButton","ListEmptyTrashButton","useConfig","useListQuery","ListSelection","drawerBaseClass","CollectionListHeader","className","collectionConfig","Description","disableBulkDelete","disableBulkEdit","hasCreatePermission","hasDeletePermission","hasTrashPermission","i18n","isBulkUploadEnabled","isTrashEnabled","newDocumentURL","onBulkUploadSuccess","openBulkUpload","smallBreak","viewType","config","getEntityConfig","drawerSlug","isInDrawer","selectedOption","isTrashRoute","isGroupingBy","_jsx","Actions","AfterListHeaderContent","_jsxs","_Fragment","BeforeTitle","slug","title","collectionSlug","value","labels","plural","TitleActions","filter","Boolean","label","showSelectAllAcrossPages"],"sources":["../../../../src/views/List/ListHeader/index.tsx"],"sourcesContent":["import type { I18nClient, TFunction } from '@payloadcms/translations'\nimport type { ClientCollectionConfig, ViewTypes } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { CloseModalButton } from '../../../elements/CloseModalButton/index.js'\nimport { DefaultListViewTabs } from '../../../elements/DefaultListViewTabs/index.js'\nimport { useListDrawerContext } from '../../../elements/ListDrawer/Provider.js'\nimport { DrawerRelationshipSelect } from '../../../elements/ListHeader/DrawerRelationshipSelect/index.js'\nimport { ListDrawerCreateNewDocButton } from '../../../elements/ListHeader/DrawerTitleActions/index.js'\nimport { ListHeader } from '../../../elements/ListHeader/index.js'\nimport {\n  ListBulkUploadButton,\n  ListEmptyTrashButton,\n} from '../../../elements/ListHeader/TitleActions/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useListQuery } from '../../../providers/ListQuery/index.js'\nimport { ListSelection } from '../ListSelection/index.js'\nimport './index.css'\n\nconst drawerBaseClass = 'list-drawer'\n\nexport type ListHeaderProps = {\n  Actions?: React.ReactNode[]\n  className?: string\n  collectionConfig: ClientCollectionConfig\n  Description?: React.ReactNode\n  disableBulkDelete?: boolean\n  disableBulkEdit?: boolean\n  hasCreatePermission: boolean\n  hasDeletePermission?: boolean\n  hasTrashPermission?: boolean\n  i18n: I18nClient\n  isBulkUploadEnabled: boolean\n  isTrashEnabled?: boolean\n  newDocumentURL: string\n  onBulkUploadSuccess?: () => void\n  /** @deprecated This prop will be removed in the next major version.\n   *\n   * Opening of the bulk upload modal is handled internally.\n   *\n   * Prefer `onBulkUploadSuccess` usage to handle the success of the bulk upload.\n   */\n  openBulkUpload: () => void\n  smallBreak: boolean\n  /** @deprecated This prop will be removed in the next major version. */\n  t?: TFunction\n  TitleActions?: React.ReactNode[]\n  viewType?: ViewTypes\n}\n\nexport const CollectionListHeader: React.FC<ListHeaderProps> = ({\n  className,\n  collectionConfig,\n  Description,\n  disableBulkDelete,\n  disableBulkEdit,\n  hasCreatePermission,\n  hasDeletePermission,\n  hasTrashPermission,\n  i18n,\n  isBulkUploadEnabled,\n  isTrashEnabled,\n  newDocumentURL,\n  onBulkUploadSuccess,\n  openBulkUpload,\n  smallBreak,\n  viewType,\n}) => {\n  const { config, getEntityConfig } = useConfig()\n  const { drawerSlug, isInDrawer, selectedOption } = useListDrawerContext()\n  const isTrashRoute = viewType === 'trash'\n  const { isGroupingBy } = useListQuery()\n\n  if (isInDrawer) {\n    return (\n      <ListHeader\n        Actions={[]}\n        AfterListHeaderContent={\n          <>\n            {Description}\n            {<DrawerRelationshipSelect />}\n          </>\n        }\n        BeforeTitle={\n          <CloseModalButton className={`${drawerBaseClass}__header-close`} slug={drawerSlug} />\n        }\n        className={`${drawerBaseClass}__header`}\n        title={getTranslation(\n          getEntityConfig({ collectionSlug: selectedOption.value })?.labels?.plural,\n          i18n,\n        )}\n        TitleActions={[\n          <ListDrawerCreateNewDocButton\n            hasCreatePermission={hasCreatePermission}\n            key=\"list-drawer-create-new-doc\"\n          />,\n        ].filter(Boolean)}\n      />\n    )\n  }\n\n  return (\n    <ListHeader\n      Actions={[\n        !smallBreak && !isGroupingBy && (\n          <ListSelection\n            collectionConfig={collectionConfig}\n            disableBulkDelete={disableBulkDelete}\n            disableBulkEdit={disableBulkEdit}\n            hasDeletePermission={hasDeletePermission}\n            hasTrashPermission={hasTrashPermission}\n            key=\"list-selection\"\n            label={getTranslation(collectionConfig?.labels?.plural, i18n)}\n            showSelectAllAcrossPages={!isGroupingBy}\n            viewType={viewType}\n          />\n        ),\n        <DefaultListViewTabs\n          collectionConfig={collectionConfig}\n          config={config}\n          key=\"default-list-actions\"\n          viewType={viewType}\n        />,\n      ].filter(Boolean)}\n      AfterListHeaderContent={Description}\n      className={className}\n      title={getTranslation(collectionConfig?.labels?.plural, i18n)}\n      TitleActions={[\n        hasCreatePermission && isBulkUploadEnabled && !isTrashRoute && (\n          <ListBulkUploadButton\n            collectionSlug={collectionConfig.slug}\n            hasCreatePermission={hasCreatePermission}\n            isBulkUploadEnabled={isBulkUploadEnabled}\n            key=\"list-header-bulk-upload\"\n            onBulkUploadSuccess={onBulkUploadSuccess}\n            openBulkUpload={openBulkUpload}\n          />\n        ),\n        hasDeletePermission && isTrashEnabled && viewType === 'trash' && (\n          <ListEmptyTrashButton\n            collectionConfig={collectionConfig}\n            hasDeletePermission={hasDeletePermission}\n            key=\"list-header-empty-trash\"\n          />\n        ),\n      ].filter(Boolean)}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/views/List/index.css

@@ -0,0 +1,119 @@
+@layer payload-default {
+  .collection-list {
+    width: 100%;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .collection-list .list-header a {
+    text-decoration: none;
+  }
+
+  .collection-list__sub-header {
+    flex-basis: 100%;
+    padding-top: var(--spacer-3);
+  }
+
+  .collection-list .table table {
+    width: 100%;
+    overflow: auto;
+  }
+
+  .collection-list .table table [class^='cell']:not(.cell--linked) > p,
+  .collection-list .table table [class^='cell']:not(.cell--linked) > span,
+  .collection-list .table table [class^='cell']:not(.cell--linked) > a {
+    line-clamp: 4;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 4;
+    overflow: hidden;
+    display: -webkit-box;
+    max-width: 100vw;
+  }
+
+  .collection-list .table table #heading-_select,
+  .collection-list .table table .cell-_select {
+    min-width: unset;
+  }
+
+  .collection-list .table table #heading-_dragHandle,
+  .collection-list .table table .cell-_dragHandle {
+    width: var(--spacer-4);
+    min-width: 0;
+  }
+
+  .collection-list__list-selection {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 10;
+    box-shadow: var(--elevation-400-menu-panel);
+    border-radius: var(--radius-large);
+    padding: var(--spacer-1) var(--spacer-3);
+    margin: var(--spacer-4) var(--gutter-h);
+  }
+
+  .collection-list__list-selection-actions {
+    display: flex;
+    gap: var(--spacer-2);
+  }
+
+  .collection-list__shimmer {
+    margin-top: var(--spacer-5);
+    width: 100%;
+  }
+
+  .collection-list__shimmer > div {
+    margin-top: var(--spacer-2);
+  }
+
+  @media (max-width: 1024px) {
+    .collection-list {
+      margin-top: var(--spacer-2);
+      padding-bottom: 0;
+    }
+
+    .collection-list__header {
+      gap: var(--spacer-2-5);
+    }
+
+    .collection-list__sub-header {
+      margin-top: 0;
+    }
+
+    .collection-list__search-input {
+      margin: 0;
+    }
+
+    /* on mobile, extend the table all the way to the viewport edges */
+    /* this is to visually indicate overflowing content */
+    .collection-list .table {
+      display: flex;
+      flex-direction: column;
+      max-width: unset;
+      position: relative;
+    }
+
+    .collection-list .table::after {
+      content: '';
+      height: var(--stroke-width-small);
+      padding-right: var(--gutter-h);
+    }
+  }
+
+  @media (max-width: 768px) {
+    .collection-list {
+      margin-bottom: var(--spacing-view-bottom);
+    }
+
+    .collection-list__list-selection {
+      position: static;
+      width: 100%;
+      margin: 0;
+      padding: 0;
+      box-shadow: none;
+      border-radius: 0;
+    }
+  }
+}

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

@@ -1,5 +1,5 @@
 import type { ListViewClientProps } from 'payload';
 import React from 'react';
-import './index.scss';
+import './index.css';
 export declare function DefaultListView(props: ListViewClientProps): React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/List/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAKlD,OAAO,KAA8B,MAAM,OAAO,CAAA;AAyBlD,OAAO,cAAc,CAAA;AAIrB,wBAAgB,eAAe,CAAC,KAAK,EAAE,mBAAmB,qBAyQzD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/List/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAIlD,OAAO,KAA8B,MAAM,OAAO,CAAA;AA2BlD,OAAO,aAAa,CAAA;AAIpB,wBAAgB,eAAe,CAAC,KAAK,EAAE,mBAAmB,qBAwTzD"}

package/dist/views/List/index.js

@@ -1,13 +1,11 @@
 'use client';
 
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
-import { useRouter } from 'next/navigation.js';
 import { formatAdminURL, formatFilesize } from 'payload/shared';
 import React, { Fragment, useEffect } from 'react';
 import { useBulkUpload } from '../../elements/BulkUpload/index.js';
 import { Button } from '../../elements/Button/index.js';
-import { Gutter } from '../../elements/Gutter/index.js';
 import { ListControls } from '../../elements/ListControls/index.js';
 import { useListDrawerContext } from '../../elements/ListDrawer/Provider.js';
 import { useModal } from '../../elements/Modal/index.js';
@@ -16,19 +14,22 @@ import { PageControls } from '../../elements/PageControls/index.js';
 import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
 import { SelectMany } from '../../elements/SelectMany/index.js';
 import { useStepNav } from '../../elements/StepNav/index.js';
-import { StickyToolbar } from '../../elements/StickyToolbar/index.js';
 import { RelationshipProvider } from '../../elements/Table/RelationshipProvider/index.js';
 import { ViewDescription } from '../../elements/ViewDescription/index.js';
 import { useControllableState } from '../../hooks/useControllableState.js';
 import { useConfig } from '../../providers/Config/index.js';
+import { DocumentSelectionProvider } from '../../providers/DocumentSelection/index.js';
 import { useListQuery } from '../../providers/ListQuery/index.js';
+import { useRouter } from '../../providers/RouterAdapter/index.js';
 import { SelectionProvider } from '../../providers/Selection/index.js';
 import { TableColumnsProvider } from '../../providers/TableColumns/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { useWindowInfo } from '../../providers/WindowInfo/index.js';
 import { ListSelection } from '../../views/List/ListSelection/index.js';
+import { DocumentListSelection } from '../HierarchyList/DocumentListSelection/index.js';
+import { HierarchyTable } from '../HierarchyList/HierarchyTable/index.js';
 import { CollectionListHeader } from './ListHeader/index.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'collection-list';
 export function DefaultListView(props) {
   const {
@@ -47,6 +48,7 @@ export function DefaultListView(props) {
     hasCreatePermission: hasCreatePermissionFromProps,
     hasDeletePermission,
     hasTrashPermission,
+    hierarchyData,
     listMenuItems,
     newDocumentURL,
     queryPreset,
@@ -99,6 +101,7 @@ export function DefaultListView(props) {
   const {
     i18n
   } = useTranslation();
+  const collectionLabel = getTranslation(labels?.plural, i18n);
   const {
     setStepNav
   } = useStepNav();
@@ -127,8 +130,8 @@ export function DefaultListView(props) {
   useEffect(() => {
     if (!isInDrawer) {
       const baseLabel = {
-        label: getTranslation(labels?.plural, i18n),
-        url: isTrashEnabled && viewType === 'trash' ? formatAdminURL({
+        label: collectionLabel,
+        url: hierarchyData || isTrashEnabled && viewType === 'trash' ? formatAdminURL({
           adminRoute,
           path: `/collections/${collectionSlug}`
         }) : undefined
@@ -136,10 +139,25 @@ export function DefaultListView(props) {
       const trashLabel = {
         label: i18n.t('general:trash')
       };
-      const navItems = isTrashEnabled && viewType === 'trash' ? [baseLabel, trashLabel] : [baseLabel];
+      let navItems = isTrashEnabled && viewType === 'trash' ? [baseLabel, trashLabel] : [baseLabel];
+      // Add hierarchy breadcrumbs
+      if (hierarchyData?.breadcrumbs) {
+        const queryParam = hierarchyData.parentFieldName || 'parent';
+        const hierarchyBreadcrumbs = hierarchyData.breadcrumbs.map((crumb, index) => {
+          const isLast = index === hierarchyData.breadcrumbs.length - 1;
+          return {
+            label: crumb.title,
+            url: isLast ? undefined : formatAdminURL({
+              adminRoute,
+              path: `/collections/${collectionSlug}?${queryParam}=${crumb.id}`
+            })
+          };
+        });
+        navItems = [...navItems, ...hierarchyBreadcrumbs];
+      }
       setStepNav(navItems);
     }
-  }, [adminRoute, setStepNav, serverURL, labels, isInDrawer, isTrashEnabled, viewType, i18n, collectionSlug]);
+  }, [adminRoute, setStepNav, serverURL, labels, isInDrawer, isTrashEnabled, viewType, i18n, collectionSlug, hierarchyData, collectionLabel]);
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [/*#__PURE__*/_jsx(TableColumnsProvider, {
       collectionSlug: collectionSlug,
@@ -149,103 +167,117 @@ export function DefaultListView(props) {
         children: /*#__PURE__*/_jsxs(SelectionProvider, {
           docs: docs,
           totalDocs: data?.totalDocs,
-          children: [BeforeList, /*#__PURE__*/_jsxs(Gutter, {
-            className: `${baseClass}__wrap`,
-            children: [/*#__PURE__*/_jsx(CollectionListHeader, {
-              collectionConfig: collectionConfig,
-              Description: Description || collectionConfig?.admin?.description ? /*#__PURE__*/_jsx("div", {
-                className: `${baseClass}__sub-header`,
-                children: /*#__PURE__*/_jsx(RenderCustomComponent, {
-                  CustomComponent: Description,
-                  Fallback: /*#__PURE__*/_jsx(ViewDescription, {
-                    collectionSlug: collectionSlug,
-                    description: collectionConfig?.admin?.description
-                  })
+          children: [BeforeList, /*#__PURE__*/_jsx(CollectionListHeader, {
+            collectionConfig: collectionConfig,
+            Description: Description || collectionConfig?.admin?.description ? /*#__PURE__*/_jsx("div", {
+              className: `${baseClass}__sub-header`,
+              children: /*#__PURE__*/_jsx(RenderCustomComponent, {
+                CustomComponent: Description,
+                Fallback: /*#__PURE__*/_jsx(ViewDescription, {
+                  collectionSlug: collectionSlug,
+                  description: collectionConfig?.admin?.description
                 })
-              }) : undefined,
-              disableBulkDelete: disableBulkDelete,
-              disableBulkEdit: disableBulkEdit,
-              hasCreatePermission: hasCreatePermission,
-              hasDeletePermission: hasDeletePermission,
-              hasTrashPermission: hasTrashPermission,
-              i18n: i18n,
-              isBulkUploadEnabled: isBulkUploadEnabled && !upload.hideFileInputOnCreate,
-              isTrashEnabled: isTrashEnabled,
-              newDocumentURL: newDocumentURL,
-              openBulkUpload: openBulkUpload,
-              smallBreak: smallBreak,
-              viewType: viewType
-            }), /*#__PURE__*/_jsx(ListControls, {
-              beforeActions: enableRowSelections && typeof onBulkSelect === 'function' ? beforeActions ? [...beforeActions, /*#__PURE__*/_jsx(SelectMany, {
-                onClick: onBulkSelect
-              }, "select-many")] : [/*#__PURE__*/_jsx(SelectMany, {
-                onClick: onBulkSelect
-              }, "select-many")] : beforeActions,
-              collectionConfig: collectionConfig,
+              })
+            }) : undefined,
+            disableBulkDelete: disableBulkDelete,
+            disableBulkEdit: disableBulkEdit,
+            hasCreatePermission: hasCreatePermission,
+            hasDeletePermission: hasDeletePermission,
+            hasTrashPermission: hasTrashPermission,
+            i18n: i18n,
+            isBulkUploadEnabled: isBulkUploadEnabled && !upload.hideFileInputOnCreate,
+            isTrashEnabled: isTrashEnabled,
+            newDocumentURL: newDocumentURL,
+            openBulkUpload: openBulkUpload,
+            smallBreak: smallBreak,
+            viewType: viewType
+          }), /*#__PURE__*/_jsx(ListControls, {
+            beforeActions: enableRowSelections && typeof onBulkSelect === 'function' ? beforeActions ? [...beforeActions, /*#__PURE__*/_jsx(SelectMany, {
+              onClick: onBulkSelect
+            }, "select-many")] : [/*#__PURE__*/_jsx(SelectMany, {
+              onClick: onBulkSelect
+            }, "select-many")] : beforeActions,
+            collectionConfig: collectionConfig,
+            collectionSlug: collectionSlug,
+            disableQueryPresets: collectionConfig?.enableQueryPresets !== true || disableQueryPresets,
+            hasCreatePermission: hasCreatePermission && viewType !== 'trash',
+            listMenuItems: listMenuItems,
+            newDocumentURL: newDocumentURL,
+            queryPreset: queryPreset,
+            queryPresetPermissions: queryPresetPermissions,
+            renderedFilters: renderedFilters,
+            resolvedFilterOptions: resolvedFilterOptions
+          }), BeforeListTable, hierarchyData ? /*#__PURE__*/_jsxs(DocumentSelectionProvider, {
+            collectionData: {
+              [collectionSlug]: {
+                docs: hierarchyData.childrenData.docs
+              },
+              ...Object.fromEntries(Object.entries(hierarchyData.relatedDocumentsByCollection).map(([slug, related]) => [slug, {
+                docs: related.result.docs
+              }]))
+            },
+            children: [/*#__PURE__*/_jsx(HierarchyTable, {
+              childrenData: hierarchyData.childrenData,
               collectionSlug: collectionSlug,
-              disableQueryPresets: collectionConfig?.enableQueryPresets !== true || disableQueryPresets,
-              listMenuItems: listMenuItems,
-              queryPreset: queryPreset,
-              queryPresetPermissions: queryPresetPermissions,
-              renderedFilters: renderedFilters,
-              resolvedFilterOptions: resolvedFilterOptions
-            }), BeforeListTable, docs?.length > 0 && /*#__PURE__*/_jsx("div", {
-              className: `${baseClass}__tables`,
-              children: /*#__PURE__*/_jsx(RelationshipProvider, {
-                children: Table
+              hierarchyLabel: collectionLabel,
+              parentId: hierarchyData.parentId,
+              relatedGroups: Object.entries(hierarchyData.relatedDocumentsByCollection).map(([slug_0, related_0]) => ({
+                collectionSlug: slug_0,
+                data: related_0.result,
+                fieldName: related_0.fieldName,
+                hasMany: related_0.hasMany,
+                label: related_0.label
+              })),
+              useAsTitle: collectionConfig?.admin?.useAsTitle || 'id'
+            }, hierarchyData.parentId), /*#__PURE__*/_jsx(DocumentListSelection, {
+              disableBulkDelete: disableBulkDelete,
+              disableBulkEdit: disableBulkEdit
+            })]
+          }) : docs?.length > 0 ? /*#__PURE__*/_jsx(RelationshipProvider, {
+            children: Table
+          }) : null, docs?.length === 0 && /*#__PURE__*/_jsx(NoListResults, {
+            Actions: hasCreatePermission && newDocumentURL && viewType !== 'trash' ? [isInDrawer ? /*#__PURE__*/_jsx(Button, {
+              el: "button",
+              onClick: () => openModal(createNewDrawerSlug),
+              children: i18n.t('general:createNewLabel', {
+                label: getTranslation(labels?.singular, i18n)
               })
-            }), docs?.length === 0 && /*#__PURE__*/_jsx(NoListResults, {
-              Actions: hasCreatePermission && newDocumentURL && viewType !== 'trash' ? [isInDrawer ? /*#__PURE__*/_jsx(Button, {
-                el: "button",
-                onClick: () => openModal(createNewDrawerSlug),
-                children: i18n.t('general:createNewLabel', {
-                  label: getTranslation(labels?.singular, i18n)
-                })
-              }, "create") : /*#__PURE__*/_jsx(Button, {
-                el: "link",
-                to: newDocumentURL,
-                children: i18n.t('general:createNewLabel', {
-                  label: getTranslation(labels?.singular, i18n)
-                })
-              }, "create")] : [],
-              Message: viewType === 'trash' ? /*#__PURE__*/_jsx("p", {
-                children: i18n.t('general:noTrashResults', {
-                  label: getTranslation(labels?.plural, i18n)
-                })
-              }) : /*#__PURE__*/_jsxs(_Fragment, {
-                children: [/*#__PURE__*/_jsx("h3", {
-                  children: i18n.t('general:noResultsFound')
-                }), /*#__PURE__*/_jsx("p", {
-                  children: i18n.t('general:noResultsDescription')
-                })]
+            }, "create") : /*#__PURE__*/_jsx(Button, {
+              el: "link",
+              to: newDocumentURL,
+              children: i18n.t('general:createNewLabel', {
+                label: getTranslation(labels?.singular, i18n)
               })
-            }), AfterListTable, docs?.length > 0 && !isGroupingBy && /*#__PURE__*/_jsx(PageControls, {
-              AfterPageControls: smallBreak ? /*#__PURE__*/_jsxs("div", {
-                className: `${baseClass}__list-selection`,
-                children: [/*#__PURE__*/_jsx(ListSelection, {
-                  collectionConfig: collectionConfig,
-                  disableBulkDelete: disableBulkDelete,
-                  disableBulkEdit: disableBulkEdit,
-                  label: getTranslation(collectionConfig.labels.plural, i18n),
-                  showSelectAllAcrossPages: !isGroupingBy
-                }), /*#__PURE__*/_jsx("div", {
-                  className: `${baseClass}__list-selection-actions`,
-                  children: enableRowSelections && typeof onBulkSelect === 'function' ? beforeActions ? [...beforeActions, /*#__PURE__*/_jsx(SelectMany, {
-                    onClick: onBulkSelect
-                  }, "select-many")] : [/*#__PURE__*/_jsx(SelectMany, {
-                    onClick: onBulkSelect
-                  }, "select-many")] : beforeActions
-                })]
-              }) : null,
-              collectionConfig: collectionConfig
-            })]
-          }), AfterList]
+            }, "create")] : [],
+            description: viewType === 'trash' ? i18n.t('general:noTrashResults', {
+              label: getTranslation(labels?.plural, i18n)
+            }) : i18n.t('general:noResultsDescription'),
+            title: viewType !== 'trash' ? i18n.t('general:noResultsFound') : undefined,
+            withMargin: true
+          }), AfterListTable, AfterList, docs?.length > 0 && !isGroupingBy && /*#__PURE__*/_jsx(PageControls, {
+            AfterPageControls: smallBreak ? /*#__PURE__*/_jsxs("div", {
+              className: `${baseClass}__list-selection`,
+              children: [/*#__PURE__*/_jsx(ListSelection, {
+                collectionConfig: collectionConfig,
+                disableBulkDelete: disableBulkDelete,
+                disableBulkEdit: disableBulkEdit,
+                label: collectionLabel,
+                showSelectAllAcrossPages: !isGroupingBy
+              }), /*#__PURE__*/_jsx("div", {
+                className: `${baseClass}__list-selection-actions`,
+                children: enableRowSelections && typeof onBulkSelect === 'function' ? beforeActions ? [...beforeActions, /*#__PURE__*/_jsx(SelectMany, {
+                  onClick: onBulkSelect
+                }, "select-many")] : [/*#__PURE__*/_jsx(SelectMany, {
+                  onClick: onBulkSelect
+                }, "select-many")] : beforeActions
+              })]
+            }) : null,
+            collectionConfig: collectionConfig
+          })]
         })
       })
-    }), docs?.length > 0 && isGroupingBy && data.totalPages > 1 && /*#__PURE__*/_jsx(StickyToolbar, {
-      children: /*#__PURE__*/_jsx(PageControls, {
-        collectionConfig: collectionConfig
-      })
+    }), docs?.length > 0 && isGroupingBy && data.totalPages > 1 && /*#__PURE__*/_jsx(PageControls, {
+      collectionConfig: collectionConfig
     })]
   });
 }