@payloadcms/ui 4.0.0-canary.1 → 4.0.0-canary.10

package/dist/widgets/RecentlyViewed/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["getTranslation","formatAdminURL","PREFERENCE_KEYS","React","formatRelativeDate","getRelativeTimeFormat","getPreferences","WidgetCard","WidgetList","displayLimit","RecentlyViewedWidget","req","widgetData","i18n","user","title","t","enrichedItems","getEnrichedItems","relativeTimeFormat","language","items","map","item","href","key","collectionSlug","id","main","_jsxs","_Fragment","thumbnailURL","_jsx","alt","className","src","typeLabel","meta","dateTime","viewedAt","value","emptyMessage","payload","excludedCollections","Set","preference","RECENTLY_VIEWED","collection","filter","has","Boolean","collections","length","idsByCollection","Map","ids","get","push","set","docsByKey","Promise","all","entries","result","find","depth","limit","overrideAccess","pagination","where","in","doc","docs","err","logger","error","msg","collectionConfig","config","useAsTitle","admin","rawTitle","getValueByPath","object","path","adminRoute","routes","upload","undefined","String","labels","singular","split","reduce","segment"],"sources":["../../../src/widgets/RecentlyViewed/index.tsx"],"sourcesContent":["import type { RecentlyViewedPreferences, WidgetServerProps } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { formatAdminURL, PREFERENCE_KEYS } from 'payload/shared'\nimport React from 'react'\n\nimport type { WidgetListItem } from '../WidgetCard/index.js'\n\nimport { formatRelativeDate, getRelativeTimeFormat } from '../../utilities/formatRelativeDate.js'\nimport { getPreferences } from '../../utilities/upsertPreferences.js'\nimport { WidgetCard, WidgetList } from '../WidgetCard/index.js'\n\ntype RecentlyViewedWidgetData = {\n  excludedCollections?: string[]\n}\n\ntype QueryDoc = {\n  id: number | string\n  thumbnailURL?: unknown\n} & Record<string, unknown>\n\ntype EnrichedItem = {\n  collectionSlug: string\n  href: string\n  id: number | string\n  thumbnailURL?: string\n  title: string\n  typeLabel: string\n  viewedAt: string\n}\n\nconst displayLimit = 10\n\nexport async function RecentlyViewedWidget({\n  req,\n  widgetData,\n}: WidgetServerProps<{ data?: RecentlyViewedWidgetData }>) {\n  const { i18n, user } = req\n  const title = i18n.t('dashboard:widgetRecentlyViewedTitle')\n\n  const enrichedItems = user ? await getEnrichedItems({ req, widgetData }) : []\n  const relativeTimeFormat = getRelativeTimeFormat(i18n.language)\n\n  const items: WidgetListItem[] = enrichedItems.map((item) => ({\n    href: item.href,\n    key: `${item.collectionSlug}:${item.id}`,\n    main: (\n      <>\n        {item.thumbnailURL ? (\n          <img alt=\"\" className=\"widget-card__thumbnail\" src={item.thumbnailURL} />\n        ) : (\n          <span className=\"widget-card__type\">{item.typeLabel}</span>\n        )}\n        <span className=\"widget-card__row-title\">{item.title}</span>\n      </>\n    ),\n    meta: (\n      <time dateTime={item.viewedAt}>\n        {formatRelativeDate({ relativeTimeFormat, value: item.viewedAt })}\n      </time>\n    ),\n  }))\n\n  return (\n    <WidgetCard className=\"recently-viewed-widget\" title={title}>\n      <WidgetList emptyMessage={i18n.t('dashboard:widgetRecentlyViewedEmpty')} items={items} />\n    </WidgetCard>\n  )\n}\n\n/**\n * Loads the stored recently viewed identities and computes display fields from the live documents.\n * Documents are queried with access control, so deleted or now-forbidden docs are dropped.\n */\nasync function getEnrichedItems({\n  req,\n  widgetData,\n}: {\n  req: WidgetServerProps['req']\n  widgetData: RecentlyViewedWidgetData | undefined\n}): Promise<EnrichedItem[]> {\n  const { i18n, payload, user } = req\n  const excludedCollections = new Set(widgetData?.excludedCollections ?? [])\n\n  const preference = await getPreferences<RecentlyViewedPreferences>(\n    PREFERENCE_KEYS.RECENTLY_VIEWED,\n    payload,\n    user.id,\n    user.collection,\n  )\n\n  const items = (preference?.value?.items ?? []).filter(\n    (item) =>\n      !excludedCollections.has(item.collectionSlug) &&\n      Boolean(payload.collections[item.collectionSlug]),\n  )\n\n  if (items.length === 0) {\n    return []\n  }\n\n  const idsByCollection = new Map<string, Array<number | string>>()\n  for (const item of items) {\n    const ids = idsByCollection.get(item.collectionSlug) ?? []\n    ids.push(item.id)\n    idsByCollection.set(item.collectionSlug, ids)\n  }\n\n  const docsByKey = new Map<string, QueryDoc>()\n  await Promise.all(\n    [...idsByCollection.entries()].map(async ([collectionSlug, ids]) => {\n      try {\n        const result = await payload.find({\n          collection: collectionSlug,\n          depth: 0,\n          limit: ids.length,\n          overrideAccess: false,\n          pagination: false,\n          user,\n          where: { id: { in: ids } },\n        })\n\n        for (const doc of result.docs as QueryDoc[]) {\n          docsByKey.set(`${collectionSlug}:${doc.id}`, doc)\n        }\n      } catch (err) {\n        payload.logger.error({\n          err,\n          msg: `RecentlyViewedWidget: failed to load collection \"${collectionSlug}\"`,\n        })\n      }\n    }),\n  )\n\n  const enrichedItems: EnrichedItem[] = []\n\n  for (const item of items) {\n    if (enrichedItems.length >= displayLimit) {\n      break\n    }\n\n    const doc = docsByKey.get(`${item.collectionSlug}:${item.id}`)\n\n    if (!doc) {\n      continue\n    }\n\n    const collectionConfig = payload.collections[item.collectionSlug].config\n    const useAsTitle = collectionConfig.admin?.useAsTitle || 'id'\n    const rawTitle = getValueByPath({ object: doc, path: useAsTitle })\n\n    enrichedItems.push({\n      id: item.id,\n      collectionSlug: item.collectionSlug,\n      href: formatAdminURL({\n        adminRoute: payload.config.routes.admin,\n        path: `/collections/${item.collectionSlug}/${item.id}`,\n      }),\n      thumbnailURL:\n        collectionConfig.upload && typeof doc.thumbnailURL === 'string'\n          ? doc.thumbnailURL\n          : undefined,\n      title: typeof rawTitle === 'string' && rawTitle ? rawTitle : String(item.id),\n      typeLabel: getTranslation(collectionConfig.labels.singular, i18n),\n      viewedAt: item.viewedAt,\n    })\n  }\n\n  return enrichedItems\n}\n\nfunction getValueByPath({ object, path }: { object: Record<string, unknown>; path: string }) {\n  return path.split('.').reduce<unknown>((value, segment) => {\n    if (!value || typeof value !== 'object') {\n      return undefined\n    }\n\n    return (value as Record<string, unknown>)[segment]\n  }, object)\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/widgets/WidgetCard/index.css

@@ -0,0 +1,155 @@
+@layer payload-default {
+  .card.widget-card {
+    --widget-card-visible-rows: 5;
+    --widget-card-row-gap: var(--spacer-1);
+    --widget-card-row-height: 40px;
+    --widget-card-scrollbar-width: 6px;
+    --widget-card-rows-height: calc(
+      (var(--widget-card-row-height) + var(--widget-card-row-gap)) *
+        var(--widget-card-visible-rows) - var(--widget-card-row-gap)
+    );
+
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--spacer-2-5);
+    height: 100%;
+    /* Border + padding + header + header/rows gap + the visible row viewport. */
+    max-height: calc(
+      (var(--stroke-width-small) * 2) + (var(--spacer-2-5) * 3) +
+        var(--text-heading-medium-line-height) + var(--widget-card-rows-height)
+    );
+    overflow: hidden;
+    padding: var(--spacer-2-5);
+  }
+
+  .widget-card__header {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+  }
+
+  .widget-card__title {
+    margin: 0;
+    color: var(--color-text);
+    font-family: var(--text-heading-medium-font-family);
+    font-size: var(--text-heading-medium-font-size);
+    font-weight: var(--text-heading-medium-font-weight);
+    line-height: var(--text-heading-medium-line-height);
+    letter-spacing: var(--text-heading-medium-letter-spacing);
+  }
+
+  .widget-card__rows {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--widget-card-row-gap);
+    min-height: 0;
+    overflow-y: auto;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    scrollbar-color: GrayText transparent;
+    scrollbar-width: thin;
+
+    &::-webkit-scrollbar {
+      width: var(--widget-card-scrollbar-width);
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-corner,
+    &::-webkit-scrollbar-track,
+    &::-webkit-scrollbar-track-piece {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: var(--radius-small, 3px);
+      background: GrayText;
+    }
+  }
+
+  .widget-card__row {
+    margin: 0;
+  }
+
+  .widget-card__row-link {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacer-2);
+    min-height: var(--widget-card-row-height);
+    padding: var(--spacer-1) calc(var(--spacer-1) * 1.5);
+    border: var(--stroke-width-small) solid var(--color-border);
+    border-radius: var(--radius-small, 3px);
+    background: var(--color-bg);
+    color: var(--color-text);
+    text-decoration: none;
+
+    &:hover {
+      background: var(--color-bg-secondary-hover);
+      text-decoration: none;
+    }
+  }
+
+  .widget-card__row-main,
+  .widget-card__row-meta {
+    display: inline-flex;
+    align-items: center;
+    min-width: 0;
+  }
+
+  .widget-card__row-main {
+    flex: 1 1 auto;
+    gap: calc(var(--spacer-1) * 1.5);
+  }
+
+  .widget-card__row-title {
+    overflow: hidden;
+    color: var(--color-text);
+    font-family: var(--text-body-medium-strong-font-family);
+    font-size: var(--text-body-medium-strong-font-size);
+    font-weight: var(--text-body-medium-strong-font-weight);
+    line-height: var(--text-body-medium-strong-line-height);
+    letter-spacing: var(--text-body-medium-strong-letter-spacing);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .widget-card__row-meta {
+    flex: 0 0 auto;
+    gap: var(--spacer-1);
+    padding-left: calc(var(--spacer-1) * 1.5);
+    color: var(--color-text-secondary);
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    line-height: var(--text-body-medium-line-height);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+    white-space: nowrap;
+  }
+
+  .widget-card__type {
+    flex: 0 0 auto;
+    padding: 0 var(--spacer-1);
+    border-radius: var(--radius-small, 3px);
+    background: var(--color-bg-secondary);
+    color: var(--color-text-secondary);
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    line-height: var(--text-body-medium-line-height);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+    white-space: nowrap;
+  }
+
+  .widget-card__thumbnail {
+    width: 24px;
+    height: 24px;
+    flex: 0 0 auto;
+    object-fit: cover;
+    border-radius: var(--radius-small, 3px);
+  }
+
+  .widget-card__empty {
+    margin: 0;
+    color: var(--color-text-secondary);
+  }
+}

package/dist/widgets/WidgetCard/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import '../../elements/Card/index.css';
+import './index.css';
+export type WidgetListItem = {
+    href: string;
+    key: string;
+    main: React.ReactNode;
+    meta?: React.ReactNode;
+};
+export declare function WidgetCard({ children, className, title, }: {
+    children: React.ReactNode;
+    className?: string;
+    title: React.ReactNode;
+}): React.JSX.Element;
+export declare function WidgetList({ emptyMessage, items, }: {
+    emptyMessage: string;
+    items: WidgetListItem[];
+}): React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/widgets/WidgetCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/widgets/WidgetCard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,+BAA+B,CAAA;AACtC,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,qBASA;AAED,wBAAgB,UAAU,CAAC,EACzB,YAAY,EACZ,KAAK,GACN,EAAE;IACD,YAAY,EAAE,MAAM,CAAA;IACpB,KAAK,EAAE,cAAc,EAAE,CAAA;CACxB,qBAiBA"}

package/dist/widgets/WidgetCard/index.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import '../../elements/Card/index.css';
+import './index.css';
+export function WidgetCard({
+  children,
+  className,
+  title
+}) {
+  return /*#__PURE__*/_jsxs("div", {
+    className: ['card', 'widget-card', className].filter(Boolean).join(' '),
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "widget-card__header",
+      children: /*#__PURE__*/_jsx("h3", {
+        className: "widget-card__title",
+        children: title
+      })
+    }), children]
+  });
+}
+export function WidgetList({
+  emptyMessage,
+  items
+}) {
+  if (items.length === 0) {
+    return /*#__PURE__*/_jsx("p", {
+      className: "widget-card__empty",
+      children: emptyMessage
+    });
+  }
+  return /*#__PURE__*/_jsx("ul", {
+    className: "widget-card__rows",
+    children: items.map(item => /*#__PURE__*/_jsx("li", {
+      className: "widget-card__row",
+      children: /*#__PURE__*/_jsxs("a", {
+        className: "widget-card__row-link",
+        href: item.href,
+        children: [/*#__PURE__*/_jsx("span", {
+          className: "widget-card__row-main",
+          children: item.main
+        }), item.meta != null ? /*#__PURE__*/_jsx("span", {
+          className: "widget-card__row-meta",
+          children: item.meta
+        }) : null]
+      })
+    }, item.key))
+  });
+}
+//# sourceMappingURL=index.js.map

package/dist/widgets/WidgetCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","WidgetCard","children","className","title","_jsxs","filter","Boolean","join","_jsx","WidgetList","emptyMessage","items","length","map","item","href","main","meta","key"],"sources":["../../../src/widgets/WidgetCard/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport '../../elements/Card/index.css'\nimport './index.css'\n\nexport type WidgetListItem = {\n  href: string\n  key: string\n  main: React.ReactNode\n  meta?: React.ReactNode\n}\n\nexport function WidgetCard({\n  children,\n  className,\n  title,\n}: {\n  children: React.ReactNode\n  className?: string\n  title: React.ReactNode\n}) {\n  return (\n    <div className={['card', 'widget-card', className].filter(Boolean).join(' ')}>\n      <div className=\"widget-card__header\">\n        <h3 className=\"widget-card__title\">{title}</h3>\n      </div>\n      {children}\n    </div>\n  )\n}\n\nexport function WidgetList({\n  emptyMessage,\n  items,\n}: {\n  emptyMessage: string\n  items: WidgetListItem[]\n}) {\n  if (items.length === 0) {\n    return <p className=\"widget-card__empty\">{emptyMessage}</p>\n  }\n\n  return (\n    <ul className=\"widget-card__rows\">\n      {items.map((item) => (\n        <li className=\"widget-card__row\" key={item.key}>\n          <a className=\"widget-card__row-link\" href={item.href}>\n            <span className=\"widget-card__row-main\">{item.main}</span>\n            {item.meta != null ? <span className=\"widget-card__row-meta\">{item.meta}</span> : null}\n          </a>\n        </li>\n      ))}\n    </ul>\n  )\n}\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,OAAO;AACP,OAAO;AASP,OAAO,SAASC,WAAW;EACzBC,QAAQ;EACRC,SAAS;EACTC;AAAK,CAKN;EACC,oBACEC,KAAA,CAAC;IAAIF,SAAA,EAAW,CAAC,QAAQ,eAAeA,SAAA,CAAU,CAACG,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;4BACtEC,IAAA,CAAC;MAAIN,SAAA,EAAU;gBACb,aAAAM,IAAA,CAAC;QAAGN,SAAA,EAAU;kBAAsBC;;QAErCF,QAAA;;AAGP;AAEA,OAAO,SAASQ,WAAW;EACzBC,YAAY;EACZC;AAAK,CAIN;EACC,IAAIA,KAAA,CAAMC,MAAM,KAAK,GAAG;IACtB,oBAAOJ,IAAA,CAAC;MAAEN,SAAA,EAAU;gBAAsBQ;;EAC5C;EAEA,oBACEF,IAAA,CAAC;IAAGN,SAAA,EAAU;cACXS,KAAA,CAAME,GAAG,CAAEC,IAAA,iBACVN,IAAA,CAAC;MAAGN,SAAA,EAAU;gBACZ,aAAAE,KAAA,CAAC;QAAEF,SAAA,EAAU;QAAwBa,IAAA,EAAMD,IAAA,CAAKC,IAAI;gCAClDP,IAAA,CAAC;UAAKN,SAAA,EAAU;oBAAyBY,IAAA,CAAKE;YAC7CF,IAAA,CAAKG,IAAI,IAAI,oBAAOT,IAAA,CAAC;UAAKN,SAAA,EAAU;oBAAyBY,IAAA,CAAKG;aAAe;;OAHhDH,IAAA,CAAKI,GAAG;;AAStD","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/ui",
-  "version": "4.0.0-canary.1",
+  "version": "4.0.0-canary.10",
   "homepage": "https://payloadcms.com",
   "repository": {
     "type": "git",
@@ -211,6 +211,56 @@
       "import": "./dist/utilities/*.js",
       "types": "./dist/utilities/*.d.ts",
       "default": "./dist/utilities/*.js"
+    },
+    "./server": {
+      "import": "./dist/exports/server.js",
+      "types": "./dist/exports/server.d.ts",
+      "default": "./dist/exports/server.js"
+    },
+    "./views/Dashboard/Default/ModularDashboard/renderWidget/renderWidgetServerFn": {
+      "import": "./dist/views/Dashboard/Default/ModularDashboard/renderWidget/renderWidgetServerFn.js",
+      "types": "./dist/views/Dashboard/Default/ModularDashboard/renderWidget/renderWidgetServerFn.d.ts",
+      "default": "./dist/views/Dashboard/Default/ModularDashboard/renderWidget/renderWidgetServerFn.js"
+    },
+    "./views/Dashboard/Default/ModularDashboard/renderWidget/getDefaultLayoutServerFn": {
+      "import": "./dist/views/Dashboard/Default/ModularDashboard/renderWidget/getDefaultLayoutServerFn.js",
+      "types": "./dist/views/Dashboard/Default/ModularDashboard/renderWidget/getDefaultLayoutServerFn.d.ts",
+      "default": "./dist/views/Dashboard/Default/ModularDashboard/renderWidget/getDefaultLayoutServerFn.js"
+    },
+    "./elements/Nav/SidebarTabs/renderTabServerFn": {
+      "import": "./dist/elements/Nav/SidebarTabs/renderTabServerFn.js",
+      "types": "./dist/elements/Nav/SidebarTabs/renderTabServerFn.d.ts",
+      "default": "./dist/elements/Nav/SidebarTabs/renderTabServerFn.js"
+    },
+    "./elements/RenderServerComponent/clientOnly": {
+      "import": "./dist/elements/RenderServerComponent/clientOnly.js",
+      "types": "./dist/elements/RenderServerComponent/clientOnly.d.ts",
+      "default": "./dist/elements/RenderServerComponent/clientOnly.js"
+    },
+    "./elements/Nav/getNavPrefs": {
+      "import": "./dist/elements/Nav/getNavPrefs.js",
+      "types": "./dist/elements/Nav/getNavPrefs.d.ts",
+      "default": "./dist/elements/Nav/getNavPrefs.js"
+    },
+    "./elements/DocumentHeader/Tabs/Tab/TabLink": {
+      "import": "./dist/elements/DocumentHeader/Tabs/Tab/TabLink.js",
+      "types": "./dist/elements/DocumentHeader/Tabs/Tab/TabLink.d.ts",
+      "default": "./dist/elements/DocumentHeader/Tabs/Tab/TabLink.js"
+    },
+    "./elements/DocumentHeader/Tabs/ShouldRenderTabs": {
+      "import": "./dist/elements/DocumentHeader/Tabs/ShouldRenderTabs.js",
+      "types": "./dist/elements/DocumentHeader/Tabs/ShouldRenderTabs.d.ts",
+      "default": "./dist/elements/DocumentHeader/Tabs/ShouldRenderTabs.js"
+    },
+    "./widgets/CollectionCards/index.client": {
+      "import": "./dist/widgets/CollectionCards/index.client.js",
+      "types": "./dist/widgets/CollectionCards/index.client.d.ts",
+      "default": "./dist/widgets/CollectionCards/index.client.js"
+    },
+    "./utilities/serverFunctionRegistry": {
+      "import": "./dist/utilities/serverFunctionRegistry.js",
+      "types": "./dist/utilities/serverFunctionRegistry.d.ts",
+      "default": "./dist/utilities/serverFunctionRegistry.js"
     }
   },
   "main": "./dist/exports/client/index.js",
@@ -224,9 +274,10 @@
     "@dnd-kit/modifiers": "9.0.0",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
-    "@faceless-ui/modal": "3.0.0",
+    "@faceless-ui/modal": "3.0.1",
     "@faceless-ui/scroll-info": "2.0.0",
     "@faceless-ui/window-info": "3.0.1",
+    "@floating-ui/dom": "1.7.6",
     "@monaco-editor/react": "4.7.0",
     "bson-objectid": "2.0.4",
     "date-fns": "4.1.0",
@@ -243,7 +294,7 @@
     "ts-essentials": "10.0.3",
     "use-context-selector": "2.0.0",
     "uuid": "14.0.0",
-    "@payloadcms/translations": "4.0.0-canary.1"
+    "@payloadcms/translations": "4.0.0-canary.10"
   },
   "devDependencies": {
     "@babel/cli": "7.27.2",
@@ -258,12 +309,12 @@
     "esbuild": "0.27.1",
     "esbuild-sass-plugin": "3.3.1",
     "@payloadcms/eslint-config": "3.28.0",
-    "payload": "4.0.0-canary.1"
+    "payload": "4.0.0-canary.10"
   },
   "peerDependencies": {
     "react": "^19.0.1 || ^19.1.2 || ^19.2.1",
     "react-dom": "^19.0.1 || ^19.1.2 || ^19.2.1",
-    "payload": "4.0.0-canary.1"
+    "payload": "4.0.0-canary.10"
   },
   "engines": {
     "node": ">=24.15.0"
@@ -279,11 +330,11 @@
     "build:remove-artifact": "rm dist/prod/index.js",
     "build:swc": "swc ./src -d dist --config-file .swcrc --strip-leading-paths",
     "build:swc:debug": "swc ./src -d ./dist --config-file .swcrc-debug --strip-leading-paths",
-    "build:types": "tsc --emitDeclarationOnly --outDir dist",
+    "build:types": "cross-env NODE_OPTIONS=\"--max-old-space-size=8192\" tsc --emitDeclarationOnly --outDir dist",
     "build:without_reactcompiler": "rm -rf dist && rm -rf tsconfig.tsbuildinfo && pnpm copyfiles && pnpm build:types && pnpm build:swc",
     "clean": "rimraf -g {dist,*.tsbuildinfo,esbuild}",
     "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,json}\" dist/",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix"
+    "lint": "cross-env NODE_OPTIONS=\"--max-old-space-size=8192\" eslint .",
+    "lint:fix": "cross-env NODE_OPTIONS=\"--max-old-space-size=8192\" eslint . --fix"
   }
 }

package/dist/elements/BulkUpload/AddingFilesView/index.scss

@@ -1,25 +0,0 @@
-@import '../../../scss/styles.scss';
-
-@layer payload-default {
-  .bulk-upload--file-manager {
-    display: flex;
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-
-    &__editView {
-      flex-grow: 1;
-      height: 100%;
-      max-height: 100%;
-      overflow: auto;
-    }
-
-    @include mid-break {
-      flex-direction: column-reverse;
-
-      &__editView {
-        flex-grow: 1;
-      }
-    }
-  }
-}

package/dist/elements/BulkUpload/EditForm/index.scss

@@ -1,11 +0,0 @@
-@import '../../../scss/styles.scss';
-
-@layer payload-default {
-  .collection-edit {
-    width: 100%;
-
-    &__form {
-      height: auto;
-    }
-  }
-}

package/dist/elements/BulkUpload/EditMany/index.scss

@@ -1,171 +0,0 @@
-@import '../../../scss/styles.scss';
-
-@layer payload-default {
-  .edit-many-bulk-uploads {
-    &__form {
-      height: 100%;
-    }
-
-    &__main {
-      width: calc(100% - #{base(15)});
-      display: flex;
-      flex-direction: column;
-      min-height: 100%;
-    }
-
-    &__header {
-      display: flex;
-      margin-top: base(2.5);
-      margin-bottom: base(1);
-      width: 100%;
-
-      &__title {
-        margin: 0;
-        flex-grow: 1;
-      }
-
-      &__close {
-        border: 0;
-        background-color: transparent;
-        padding: 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;
-          }
-        }
-      }
-    }
-
-    &__edit {
-      padding-top: base(1);
-      padding-bottom: base(2);
-      flex-grow: 1;
-    }
-    [dir='rtl'] &__sidebar-wrap {
-      left: 0;
-      border-right: 1px solid var(--theme-elevation-100);
-      right: auto;
-    }
-
-    &__sidebar-wrap {
-      position: fixed;
-      width: base(15);
-      height: 100%;
-      top: 0;
-      right: 0;
-      overflow: visible;
-      border-left: 1px solid var(--theme-elevation-100);
-    }
-
-    &__sidebar {
-      width: 100%;
-      height: 100%;
-      overflow-y: auto;
-    }
-
-    &__sidebar-sticky-wrap {
-      display: flex;
-      flex-direction: column;
-      min-height: 100%;
-    }
-
-    &__collection-actions,
-    &__meta,
-    &__sidebar-fields {
-      [dir='ltr'] & {
-        padding-left: base(1.5);
-      }
-      [dir='rtl'] & {
-        padding-right: base(1.5);
-      }
-    }
-
-    &__document-actions {
-      padding-right: $baseline;
-      position: sticky;
-      top: 0;
-      z-index: var(--z-nav);
-
-      > * {
-        position: relative;
-        z-index: 1;
-      }
-
-      @include mid-break {
-        @include blur-bg;
-      }
-    }
-
-    &__document-actions {
-      display: flex;
-      flex-wrap: wrap;
-      padding: base(1);
-      gap: base(0.5);
-
-      .form-submit {
-        width: calc(50% - #{base(1)});
-
-        @include mid-break {
-          width: auto;
-          flex-grow: 1;
-        }
-
-        .btn {
-          width: 100%;
-          padding-left: base(0.5);
-          padding-right: base(0.5);
-          margin-bottom: 0;
-        }
-      }
-    }
-
-    @include mid-break {
-      &__main {
-        width: 100%;
-        min-height: initial;
-      }
-
-      &__sidebar-wrap {
-        position: static;
-        width: 100%;
-        height: initial;
-      }
-
-      &__form {
-        display: block;
-      }
-
-      &__edit {
-        padding-top: 0;
-        padding-bottom: 0;
-      }
-
-      &__document-actions {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        top: auto;
-        z-index: var(--z-nav);
-      }
-
-      &__document-actions,
-      &__sidebar-fields {
-        padding-left: var(--gutter-h);
-        padding-right: var(--gutter-h);
-      }
-    }
-  }
-}

package/dist/elements/BulkUpload/Header/index.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import './index.css';
-type Props = {
-    readonly onClose: () => void;
-    readonly title: string;
-};
-export declare function DrawerHeader({ onClose, title }: Props): React.JSX.Element;
-export {};
-//# sourceMappingURL=index.d.ts.map

package/dist/elements/BulkUpload/Header/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/Header/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,aAAa,CAAA;AAIpB,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAA;IAC5B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;CACvB,CAAA;AACD,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,qBAcrD"}

package/dist/elements/BulkUpload/Header/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["c","_c","React","ChevronIcon","useTranslation","Button","baseClass","DrawerHeader","t0","$","onClose","title","t","t1","_jsxs","className","children","_jsx","buttonStyle","icon","direction","size"],"sources":["../../../../src/elements/BulkUpload/Header/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport './index.css'\n\nconst baseClass = 'bulk-upload--drawer-header'\n\ntype Props = {\n  readonly onClose: () => void\n  readonly title: string\n}\nexport function DrawerHeader({ onClose, title }: Props) {\n  const { t } = useTranslation()\n\n  return (\n    <div className={baseClass}>\n      <Button\n        aria-label={t('general:close')}\n        buttonStyle=\"ghost\"\n        icon={<ChevronIcon direction=\"left\" size={24} />}\n        onClick={onClose}\n      />\n      <h2 title={title}>{title}</h2>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,MAAW;AAElB,SAASC,WAAW,QAAQ;AAC5B,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAMlB,OAAO,SAAAC,aAAAC,EAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EAAsB;IAAAS,OAAA;IAAAC;EAAA,IAAAH,EAAyB;EACpD;IAAAI;EAAA,IAAcR,cAAA;EAAA,IAAAS,EAAA;EAAA,IAAAJ,CAAA,QAAAC,OAAA,IAAAD,CAAA,QAAAG,CAAA,IAAAH,CAAA,QAAAE,KAAA;IAGZE,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EAAAT,SAAA;MAAAU,QAAA,GACCC,IAAA,CAAAZ,MAAA;QAAA,cACcO,CAAA,CAAE;QAAAM,WAAA,EACF;QAAAC,IAAA,EACNF,IAAA,CAAAd,WAAA;UAAAiB,SAAA,EAAuB;UAAAC,IAAA;QAAA,C;iBACpBX;MAAA,C,GAEXO,IAAA,CAAC;QAAAN,KAAA;QAAAK,QAAA,EAAkBL;MAAA,C;;;;;;;;;SAPrBE,E","ignoreList":[]}

package/dist/elements/ColumnSelector/index.d.ts

@@ -1,9 +0,0 @@
-import type { SanitizedCollectionConfig } from 'payload';
-import React from 'react';
-import './index.css';
-export type Props = {
-    readonly collectionSlug: SanitizedCollectionConfig['slug'];
-    readonly onClose?: () => void;
-};
-export declare const ColumnSelector: React.FC<Props>;
-//# sourceMappingURL=index.d.ts.map

package/dist/elements/ColumnSelector/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ColumnSelector/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,yBAAyB,EAAe,MAAM,SAAS,CAAA;AAIrE,OAAO,KAAyE,MAAM,OAAO,CAAA;AAY7F,OAAO,aAAa,CAAA;AA8CpB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;IAC1D,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAC9B,CAAA;AAkDD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAsM1C,CAAA"}