@payloadcms/next 3.0.0-canary.6de2b29 → 3.0.0-canary.6f0a417

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

@@ -1,195 +1,179 @@
 @import '../../../scss/styles.scss';
 
-.collection-list {
-  width: 100%;
-  margin-top: base(0.5);
+@layer payload-default {
+  .collection-list {
+    width: 100%;
 
-  &__wrap {
-    padding-bottom: var(--spacing-view-bottom);
+    &__wrap {
+      padding-bottom: var(--spacing-view-bottom);
 
-    & > *:not(:last-child) {
-      margin-bottom: var(--base);
+      & > *:not(:last-child) {
+        margin-bottom: var(--base);
+      }
     }
-  }
 
-  &__header {
-    display: flex;
-    align-items: flex-end;
-    flex-wrap: wrap;
-    gap: base(0.75);
+    .list-header {
+      a {
+        text-decoration: none;
+      }
 
-    h1 {
-      margin: 0;
+      .btn--withoutPopup,
+      .btn--withPopup {
+        position: relative;
+        margin: 0 0 base(0.2);
+      }
     }
 
-    a {
-      text-decoration: none;
+    &__sub-header {
+      flex-basis: 100%;
     }
 
-    .pill {
-      position: relative;
-      top: -14px;
-      margin: 0;
+    .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;
+        }
+
+        #heading-_select,
+        .cell-_select {
+          display: flex;
+          min-width: unset;
+        }
+      }
     }
-  }
-
-  &__sub-header {
-    flex-basis: 100%;
-    margin-top: base(0.25);
-  }
-
-  .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);
 
-      #heading-_select,
-      .cell-_select {
-        min-width: unset;
-        width: auto;
+      & > * {
+        margin: 0;
       }
     }
-  }
-
-  &__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;
     }
-  }
-
-  &__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;
+    .paginator {
+      margin-bottom: 0;
     }
-  }
-
-  &__list-selection {
-    position: fixed;
-    bottom: 0;
-    z-index: 10;
-    padding: base(0.75) 0;
-    width: 100%;
-    background-color: var(--theme-bg);
 
-    .btn {
-      margin: 0 0 0 base(0.5);
+    &__page-info {
+      [dir='ltr'] & {
+        margin-right: base(1);
+        margin-left: auto;
+      }
+      [dir='rtl'] & {
+        margin-left: base(1);
+        margin-right: auto;
+      }
     }
 
-    .btn {
-      background-color: var(--theme-elevation-100);
-      cursor: pointer;
-      padding: 0 base(0.25);
-      border-radius: $style-radius-s;
+    &__list-selection {
+      position: fixed;
+      bottom: 0;
+      z-index: 10;
+      padding: base(0.8) 0;
+      width: 100%;
+      background-color: var(--theme-bg);
 
-      &:hover {
-        background-color: var(--theme-elevation-200);
+      .btn {
+        margin: 0 0 0 base(0.4);
       }
-    }
-  }
 
-  &__list-selection-actions {
-    display: flex;
-    gap: base(0.25);
-  }
+      .btn {
+        background-color: var(--theme-elevation-100);
+        cursor: pointer;
+        padding: 0 base(0.4);
+        border-radius: $style-radius-s;
 
-  &__shimmer {
-    margin-top: base(1.75);
-    width: 100%;
-    > div {
-      margin-top: 8px;
+        &:hover {
+          background-color: var(--theme-elevation-200);
+        }
+      }
     }
-  }
 
-  @include mid-break {
-    margin-top: base(0.25);
-
-    &__wrap {
-      padding-top: 0;
-      padding-bottom: 0;
+    &__list-selection-actions {
+      display: flex;
+      gap: base(0.25);
     }
 
-    &__header {
-      gap: base(0.5);
+    &__shimmer {
+      margin-top: base(1.75);
+      width: 100%;
+      > div {
+        margin-top: 8px;
+      }
     }
 
-    &__sub-header {
-      margin-top: 0;
-    }
+    @include mid-break {
+      margin-top: base(0.25);
 
-    &__search-input {
-      margin: 0;
-    }
+      &__wrap {
+        padding-top: 0;
+        padding-bottom: 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);
+      &__header {
+        gap: base(0.5);
+      }
 
-      &::after {
-        content: '';
-        height: 1px;
-        padding-right: var(--gutter-h);
+      &__sub-header {
+        margin-top: 0;
       }
-    }
 
-    &__page-controls {
-      flex-wrap: wrap;
-    }
+      &__search-input {
+        margin: 0;
+      }
 
-    &__page-info {
-      margin-left: 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);
+        }
+      }
 
-    .paginator {
-      width: 100%;
-      margin-bottom: $baseline;
-    }
-  }
+      &__page-controls {
+        flex-wrap: wrap;
+      }
 
-  @include small-break {
-    margin-top: 0;
-    margin-bottom: base(3);
+      &__page-info {
+        margin-left: 0;
+      }
 
-    &__header {
-      .pill {
-        top: -6px;
+      .paginator {
+        width: 100%;
+        margin-bottom: $baseline;
       }
     }
+
+    @include small-break {
+      margin-bottom: base(2.4);
+    }
   }
 }

package/dist/views/List/Default/types.js

@@ -1,3 +1,2 @@
-export { };
-
+export {};
 //# sourceMappingURL=types.js.map

package/dist/views/List/Default/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/views/List/Default/types.ts"],"sourcesContent":["import type { ColumnPreferences } from '@payloadcms/ui'\nimport type { SanitizedCollectionConfig } from 'payload'\n\nexport type DefaultListViewProps = {\n  collectionSlug: SanitizedCollectionConfig['slug']\n  listSearchableFields: SanitizedCollectionConfig['admin']['listSearchableFields']\n}\n\nexport type ListIndexProps = {\n  collection: SanitizedCollectionConfig\n}\n\nexport type ListPreferences = {\n  columns: ColumnPreferences\n  limit: number\n  sort: string\n}\n"],"names":[],"mappings":"AAYA,WAIC"}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/views/List/Default/types.ts"],"sourcesContent":["import type { ColumnPreferences } from '@payloadcms/ui'\nimport type { SanitizedCollectionConfig } from 'payload'\n\nexport type DefaultListViewProps = {\n  collectionSlug: SanitizedCollectionConfig['slug']\n  listSearchableFields: SanitizedCollectionConfig['admin']['listSearchableFields']\n}\n\nexport type ListIndexProps = {\n  collection: SanitizedCollectionConfig\n}\n\nexport type ListPreferences = {\n  columns: ColumnPreferences\n  limit: number\n  sort: string\n}\n"],"mappings":"AAYA","ignoreList":[]}

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":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAS,MAAM,SAAS,CAAA;AAYpD,OAAO,KAAmB,MAAM,OAAO,CAAA;AAMvC,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AAEhD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA8J7C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/List/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAiC,MAAM,SAAS,CAAA;AAa5E,OAAO,KAAmB,MAAM,OAAO,CAAA;AAOvC,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AAEhD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA2L7C,CAAA"}

package/dist/views/List/index.js

@@ -1,126 +1,169 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { HydrateClientUser, ListInfoProvider, ListQueryProvider, TableColumnsProvider } from '@payloadcms/ui';
-import { RenderCustomComponent } from '@payloadcms/ui/shared';
+import { HydrateAuthProvider, ListInfoProvider, ListQueryProvider, TableColumnsProvider } from '@payloadcms/ui';
+import { formatAdminURL, getCreateMappedComponent, RenderComponent } from '@payloadcms/ui/shared';
+import { createClientCollectionConfig } from '@payloadcms/ui/utilities/createClientConfig';
 import { notFound } from 'next/navigation.js';
-import { createClientCollectionConfig, mergeListSearchAndWhere } from 'payload';
-import { isNumber, isReactComponentOrFunction } from 'payload/shared';
+import { deepCopyObjectSimple, mergeListSearchAndWhere } from 'payload';
+import { isNumber } from 'payload/shared';
 import React, { Fragment } from 'react';
+import { DefaultEditView } from '../Edit/Default/index.js';
 import { DefaultListView } from './Default/index.js';
 export { generateListMetadata } from './meta.js';
-export const ListView = async ({ initPageResult, params, searchParams })=>{
-    const { collectionConfig, locale: fullLocale, permissions, req, req: { i18n, locale, payload, payload: { config }, query, user }, visibleEntities } = initPageResult;
-    const collectionSlug = collectionConfig?.slug;
-    if (!permissions?.collections?.[collectionSlug]?.read?.permission) {
-        notFound();
+export const ListView = async ({
+  initPageResult,
+  params,
+  searchParams
+}) => {
+  const {
+    collectionConfig,
+    locale: fullLocale,
+    permissions,
+    req,
+    req: {
+      i18n,
+      locale,
+      payload,
+      payload: {
+        config
+      },
+      query,
+      user
+    },
+    visibleEntities
+  } = initPageResult;
+  const collectionSlug = collectionConfig?.slug;
+  if (!permissions?.collections?.[collectionSlug]?.read?.permission) {
+    notFound();
+  }
+  let listPreferences;
+  const preferenceKey = `${collectionSlug}-list`;
+  try {
+    listPreferences = await payload.find({
+      collection: 'payload-preferences',
+      depth: 0,
+      limit: 1,
+      req,
+      user,
+      where: {
+        and: [{
+          key: {
+            equals: preferenceKey
+          }
+        }, {
+          'user.relationTo': {
+            equals: user.collection
+          }
+        }, {
+          'user.value': {
+            equals: user?.id
+          }
+        }]
+      }
+    })?.then(res => res?.docs?.[0]?.value);
+  } catch (error) {} // eslint-disable-line no-empty
+  const {
+    routes: {
+      admin: adminRoute
     }
-    let listPreferences;
-    const preferenceKey = `${collectionSlug}-list`;
-    try {
-        listPreferences = await payload.find({
-            collection: 'payload-preferences',
-            depth: 0,
-            limit: 1,
-            req,
-            user,
-            where: {
-                key: {
-                    equals: preferenceKey
-                }
-            }
-        })?.then((res)=>res?.docs?.[0]?.value);
-    } catch (error) {} // eslint-disable-line no-empty
-    const { routes: { admin } } = config;
-    if (collectionConfig) {
-        const { admin: { components: { views: { List: CustomList } = {} } = {} } } = collectionConfig;
-        if (!visibleEntities.collections.includes(collectionSlug)) {
-            return notFound();
-        }
-        let CustomListView = null;
-        if (CustomList && typeof CustomList === 'function') {
-            CustomListView = CustomList;
-        } else if (typeof CustomList === 'object' && isReactComponentOrFunction(CustomList.Component)) {
-            CustomListView = CustomList.Component;
-        }
-        const page = isNumber(query?.page) ? Number(query.page) : 0;
-        const whereQuery = mergeListSearchAndWhere({
-            collectionConfig,
-            query: {
-                search: typeof query?.search === 'string' ? query.search : undefined,
-                where: query?.where || undefined
-            }
-        });
-        const limit = isNumber(query?.limit) ? Number(query.limit) : listPreferences?.limit || collectionConfig.admin.pagination.defaultLimit;
-        const sort = query?.sort && typeof query.sort === 'string' ? query.sort : listPreferences?.sort || collectionConfig.defaultSort || undefined;
-        const data = await payload.find({
-            collection: collectionSlug,
-            depth: 0,
-            draft: true,
-            fallbackLocale: null,
-            limit,
-            locale,
-            overrideAccess: false,
-            page,
-            req,
-            sort,
-            user,
-            where: whereQuery || {}
-        });
-        const viewComponentProps = {
-            collectionSlug,
-            listSearchableFields: collectionConfig.admin.listSearchableFields
-        };
-        return /*#__PURE__*/ _jsxs(Fragment, {
-            children: [
-                /*#__PURE__*/ _jsx(HydrateClientUser, {
-                    permissions: permissions,
-                    user: user
-                }),
-                /*#__PURE__*/ _jsx(ListInfoProvider, {
-                    collectionConfig: createClientCollectionConfig({
-                        collection: collectionConfig,
-                        t: initPageResult.req.i18n.t
-                    }),
-                    collectionSlug: collectionSlug,
-                    hasCreatePermission: permissions?.collections?.[collectionSlug]?.create?.permission,
-                    newDocumentURL: `${admin}/collections/${collectionSlug}/create`,
-                    children: /*#__PURE__*/ _jsx(ListQueryProvider, {
-                        data: data,
-                        defaultLimit: limit || collectionConfig?.admin?.pagination?.defaultLimit,
-                        defaultSort: sort,
-                        modifySearchParams: true,
-                        preferenceKey: preferenceKey,
-                        children: /*#__PURE__*/ _jsx(TableColumnsProvider, {
-                            collectionSlug: collectionSlug,
-                            enableRowSelections: true,
-                            listPreferences: listPreferences,
-                            preferenceKey: preferenceKey,
-                            children: /*#__PURE__*/ _jsx(RenderCustomComponent, {
-                                CustomComponent: CustomListView,
-                                DefaultComponent: DefaultListView,
-                                componentProps: viewComponentProps,
-                                serverOnlyProps: {
-                                    collectionConfig,
-                                    data,
-                                    hasCreatePermission: permissions?.collections?.[collectionSlug]?.create?.permission,
-                                    i18n,
-                                    limit,
-                                    listPreferences,
-                                    locale: fullLocale,
-                                    newDocumentURL: `${admin}/collections/${collectionSlug}/create`,
-                                    params,
-                                    payload,
-                                    permissions,
-                                    searchParams,
-                                    user
-                                }
-                            })
-                        })
-                    })
-                })
-            ]
-        });
+  } = config;
+  if (collectionConfig) {
+    if (!visibleEntities.collections.includes(collectionSlug)) {
+      return notFound();
     }
-    return notFound();
+    const page = isNumber(query?.page) ? Number(query.page) : 0;
+    const whereQuery = mergeListSearchAndWhere({
+      collectionConfig,
+      query: {
+        search: typeof query?.search === 'string' ? query.search : undefined,
+        where: query?.where || undefined
+      }
+    });
+    const limit = isNumber(query?.limit) ? Number(query.limit) : listPreferences?.limit || collectionConfig.admin.pagination.defaultLimit;
+    const sort = query?.sort && typeof query.sort === 'string' ? query.sort : listPreferences?.sort || collectionConfig.defaultSort || undefined;
+    const data = await payload.find({
+      collection: collectionSlug,
+      depth: 0,
+      draft: true,
+      fallbackLocale: null,
+      includeLockStatus: true,
+      limit,
+      locale,
+      overrideAccess: false,
+      page,
+      req,
+      sort,
+      user,
+      where: whereQuery || {}
+    });
+    const createMappedComponent = getCreateMappedComponent({
+      importMap: payload.importMap,
+      serverProps: {
+        collectionConfig,
+        collectionSlug,
+        data,
+        hasCreatePermission: permissions?.collections?.[collectionSlug]?.create?.permission,
+        i18n,
+        limit,
+        listPreferences,
+        listSearchableFields: collectionConfig.admin.listSearchableFields,
+        locale: fullLocale,
+        newDocumentURL: formatAdminURL({
+          adminRoute,
+          path: `/collections/${collectionSlug}/create`
+        }),
+        params,
+        payload,
+        permissions,
+        searchParams,
+        user
+      }
+    });
+    const ListComponent = createMappedComponent(collectionConfig?.admin?.components?.views?.list?.Component, undefined, DefaultListView, 'collectionConfig?.admin?.components?.views?.list?.Component');
+    let clientCollectionConfig = deepCopyObjectSimple(collectionConfig);
+    clientCollectionConfig = createClientCollectionConfig({
+      clientCollection: clientCollectionConfig,
+      collection: collectionConfig,
+      createMappedComponent,
+      DefaultEditView,
+      DefaultListView,
+      i18n,
+      importMap: payload.importMap,
+      payload
+    });
+    return /*#__PURE__*/_jsxs(Fragment, {
+      children: [/*#__PURE__*/_jsx(HydrateAuthProvider, {
+        permissions: permissions
+      }), /*#__PURE__*/_jsx(ListInfoProvider, {
+        collectionConfig: clientCollectionConfig,
+        collectionSlug: collectionSlug,
+        hasCreatePermission: permissions?.collections?.[collectionSlug]?.create?.permission,
+        newDocumentURL: formatAdminURL({
+          adminRoute,
+          path: `/collections/${collectionSlug}/create`
+        }),
+        children: /*#__PURE__*/_jsx(ListQueryProvider, {
+          data: data,
+          defaultLimit: limit || collectionConfig?.admin?.pagination?.defaultLimit,
+          defaultSort: sort,
+          modifySearchParams: true,
+          preferenceKey: preferenceKey,
+          children: /*#__PURE__*/_jsx(TableColumnsProvider, {
+            collectionSlug: collectionSlug,
+            enableRowSelections: true,
+            listPreferences: listPreferences,
+            preferenceKey: preferenceKey,
+            children: /*#__PURE__*/_jsx(RenderComponent, {
+              clientProps: {
+                collectionSlug,
+                listSearchableFields: collectionConfig?.admin?.listSearchableFields
+              },
+              mappedComponent: ListComponent
+            })
+          })
+        })
+      })]
+    });
+  }
+  return notFound();
 };
-
 //# sourceMappingURL=index.js.map