@payloadcms/ui 4.0.0-internal.b8e7c89 → 4.0.0-internal.bf4bcce

package/dist/widgets/RecentlyViewed/index.css

@@ -0,0 +1,352 @@
+@layer payload-default {
+  .recents-widget,
+  .recents-widget__pin-picker {
+    --recents-text-secondary: color-mix(
+      in srgb,
+      var(--color-text-secondary) 75%,
+      var(--color-text)
+    );
+  }
+
+  .card.widget-card.recents-widget {
+    container-type: inline-size;
+    gap: var(--spacer-3);
+    height: auto;
+    max-height: none;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: var(--color-bg);
+  }
+
+  .recents-widget .widget-card__header {
+    position: absolute;
+    width: calc(var(--spacer-1) / 4);
+    height: calc(var(--spacer-1) / 4);
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .recents-widget__toolbar,
+  .recents-widget__tabs {
+    display: flex;
+    align-items: center;
+  }
+
+  .recents-widget__toolbar {
+    justify-content: space-between;
+    gap: var(--spacer-2);
+    flex-wrap: wrap;
+    align-content: flex-start;
+    /* Reserve the second toolbar row when pagination wraps on narrow widgets. */
+    min-block-size: calc(var(--spacer-4) * 2 + var(--spacer-2));
+  }
+
+  .recents-widget__tabs {
+    gap: var(--spacer-1);
+    flex-wrap: wrap;
+  }
+
+  .recents-widget__tab,
+  .recents-widget__pin {
+    border: 0;
+    background: transparent;
+    color: var(--recents-text-secondary);
+    cursor: pointer;
+  }
+
+  .recents-widget__tab {
+    min-height: var(--spacer-4);
+    padding-inline: var(--spacer-2);
+    border-radius: var(--radius-medium);
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    line-height: var(--text-body-medium-line-height);
+    white-space: nowrap;
+  }
+
+  .recents-widget__tab[aria-pressed='true'] {
+    background: var(--color-bg-secondary);
+    color: var(--color-text);
+    font-weight: var(--text-body-medium-strong-font-weight);
+  }
+
+  .card-grid.recents-widget__items {
+    display: grid;
+    gap: var(--spacer-3);
+    min-height: 0;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  .card-grid.recents-widget__items--grid {
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+  }
+
+  .recents-widget__viewport {
+    --recents-columns: 2;
+    --recents-rows: 2;
+    --recents-card-width: calc(
+      (100cqw - var(--spacer-3) * (var(--recents-columns) - 1)) / var(--recents-columns)
+    );
+
+    /* Match the thumbnail, two text lines, padding, metadata gap, and card border. */
+    --recents-row-height: max(
+      calc(var(--spacer-6) * 5),
+      calc(
+        var(--recents-thumbnail-height) +
+          (var(--text-body-medium-line-height) + var(--spacer-2-5)) * 2 + var(--spacer-1) +
+          var(--stroke-width-small) * 2
+      )
+    );
+    --recents-thumbnail-height: calc(var(--spacer-6) * 3.5 - var(--stroke-width-small) * 2);
+    --recents-content-height: calc(
+      var(--recents-row-height) * var(--recents-rows) + var(--spacer-3) * (var(--recents-rows) - 1)
+    );
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--spacer-3);
+    min-block-size: var(--recents-content-height);
+    position: relative;
+  }
+
+  .recents-widget__content {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+    align-content: start;
+  }
+
+  .recents-widget__empty {
+    grid-column: 1 / -1;
+  }
+
+  .recents-widget .document-card {
+    min-block-size: var(--recents-row-height);
+  }
+
+  .recents-widget .document-card__thumbnail {
+    height: var(--recents-thumbnail-height);
+    min-height: 0;
+    aspect-ratio: auto;
+  }
+
+  .recents-widget__error {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacer-3);
+    padding: var(--spacer-3);
+    text-align: center;
+  }
+
+  .recents-widget__save-error {
+    position: absolute;
+    inset-block-start: var(--spacer-3);
+    inset-inline: var(--spacer-3);
+    padding: var(--spacer-2);
+    border-radius: var(--radius-medium);
+    background: var(--color-bg);
+  }
+
+  .recents-widget__loading {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+  }
+
+  .recents-widget__loading > span {
+    padding: var(--spacer-2);
+    background: var(--color-bg);
+  }
+
+  .recents-widget__loading:empty {
+    display: none;
+  }
+
+  .recents-widget__item--empty {
+    grid-column: 1 / -1;
+  }
+
+  .recents-widget__status-pill {
+    position: absolute;
+    inset-block-start: var(--spacer-3);
+    inset-inline-start: var(--spacer-3);
+    padding-inline: var(--spacer-1);
+    border-radius: var(--radius-medium);
+    background: var(--color-bg-brand-secondary);
+    color: var(--color-text-onbrand);
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    line-height: var(--text-body-medium-line-height);
+  }
+
+  .recents-widget__status-pill--draft {
+    background: var(--color-bg-tertiary);
+    color: var(--color-text);
+  }
+
+  .recents-widget__status-pill--changed {
+    background: var(--color-bg-warning);
+    color: var(--color-text-onwarning);
+  }
+
+  .recents-widget__meta,
+  .recents-widget__empty-description {
+    color: var(--recents-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);
+  }
+
+  .recents-widget__meta {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .recents-widget__pin {
+    position: absolute;
+    inset-block-start: var(--spacer-2-5);
+    inset-inline-end: var(--spacer-2-5);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--spacer-4);
+    height: var(--spacer-4);
+    padding: 0;
+    border-radius: var(--radius-medium);
+    background: var(--color-bg);
+    opacity: 0;
+  }
+
+  .recents-widget .document-card .document-card__metadata .recents-widget__pin {
+    position: absolute;
+  }
+
+  .recents-widget__item:hover .recents-widget__pin,
+  .recents-widget__item:focus-within .recents-widget__pin {
+    opacity: 1;
+  }
+
+  .recents-widget__pin-icon {
+    display: flex;
+    color: var(--color-icon-warning);
+  }
+
+  .recents-widget__pin:disabled {
+    cursor: progress;
+  }
+
+  .recents-widget__empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacer-2);
+    min-block-size: var(--recents-content-height);
+    padding: var(--spacer-5) var(--spacer-3);
+    border: var(--stroke-width-small) dashed var(--color-border);
+    border-radius: var(--radius-large);
+    text-align: center;
+  }
+
+  .recents-widget__empty-icon {
+    width: var(--spacer-6);
+    height: var(--spacer-6);
+    border-radius: var(--radius-full);
+    background-color: var(--color-bg-brand-tertiary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-icon-brand);
+  }
+
+  .recents-widget__empty-text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-1);
+  }
+
+  .recents-widget__empty-title {
+    color: var(--color-text);
+    font-family: var(--text-body-large-strong-font-family);
+    font-size: var(--text-body-large-strong-font-size);
+    font-weight: var(--text-body-large-strong-font-weight);
+    line-height: var(--text-body-large-strong-line-height);
+  }
+
+  .recents-widget__tab:focus-visible,
+  .recents-widget__pagination button:focus-visible,
+  .recents-widget__pin:focus-visible {
+    outline: var(--accessibility-outline);
+    outline-offset: var(--accessibility-outline-offset);
+  }
+
+  .recents-widget__pagination {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-1);
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    line-height: var(--text-body-medium-line-height);
+  }
+
+  .recents-widget__pagination button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--spacer-4);
+    height: var(--spacer-4);
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius-medium);
+    background: transparent;
+    color: var(--color-text);
+    cursor: pointer;
+  }
+
+  .recents-widget__pagination button:hover:not(:disabled) {
+    background: var(--color-bg-secondary);
+  }
+
+  [dir='rtl'] .recents-widget__pagination button > span {
+    transform: scaleX(-1);
+  }
+
+  .recents-widget__pagination button:disabled {
+    color: var(--color-text-disabled);
+    cursor: default;
+  }
+
+  @container (min-width: 400px) {
+    .recents-widget__toolbar {
+      min-block-size: var(--spacer-4);
+    }
+  }
+
+  @container (min-width: 600px) {
+    .recents-widget__viewport {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+
+  @container (min-width: 800px) {
+    .recents-widget__viewport {
+      --recents-rows: 1;
+      --recents-thumbnail-height: calc(
+        (var(--recents-card-width) - var(--stroke-width-small) * 2) * 3 / 4
+      );
+      grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--spacer-6) * 4.5)), 1fr));
+    }
+  }
+}

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

@@ -5,6 +5,6 @@ type RecentlyViewedWidgetData = {
 };
 export declare function RecentlyViewedWidget({ req, widgetData, }: WidgetServerProps<{
     data?: RecentlyViewedWidgetData;
-}>): Promise<React.JSX.Element>;
+}>): React.JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/widgets/RecentlyViewed/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAA6B,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAI3E,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,KAAK,wBAAwB,GAAG;IAC9B,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAA;CAC/B,CAAA;AAmBD,wBAAsB,oBAAoB,CAAC,EACzC,GAAG,EACH,UAAU,GACX,EAAE,iBAAiB,CAAC;IAAE,IAAI,CAAC,EAAE,wBAAwB,CAAA;CAAE,CAAC,8BAgCxD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/widgets/RecentlyViewed/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAGhD,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,KAAK,wBAAwB,GAAG;IAC9B,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAA;CAC/B,CAAA;AAED,wBAAgB,oBAAoB,CAAC,EACnC,GAAG,EACH,UAAU,GACX,EAAE,iBAAiB,CAAC;IAAE,IAAI,CAAC,EAAE,wBAAwB,CAAA;CAAE,CAAC,qBAiCxD"}

package/dist/widgets/RecentlyViewed/index.js

@@ -1,63 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { getTranslation } from '@payloadcms/translations';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { formatAdminURL, PREFERENCE_KEYS } from 'payload/shared';
 import React from 'react';
-import { formatRelativeDate, getRelativeTimeFormat } from '../../utilities/formatRelativeDate.js';
-import { getPreferences } from '../../utilities/upsertPreferences.js';
-import { WidgetCard, WidgetList } from '../WidgetCard/index.js';
-const displayLimit = 10;
-export async function RecentlyViewedWidget({
-  req,
-  widgetData
-}) {
-  const {
-    i18n,
-    user
-  } = req;
-  const title = i18n.t('dashboard:widgetRecentlyViewedTitle');
-  const enrichedItems = user ? await getEnrichedItems({
-    req,
-    widgetData
-  }) : [];
-  const relativeTimeFormat = getRelativeTimeFormat(i18n.language);
-  const items = enrichedItems.map(item => ({
-    href: item.href,
-    key: `${item.collectionSlug}:${item.id}`,
-    main: /*#__PURE__*/_jsxs(_Fragment, {
-      children: [item.thumbnailURL ? /*#__PURE__*/_jsx("img", {
-        alt: "",
-        className: "widget-card__thumbnail",
-        src: item.thumbnailURL
-      }) : /*#__PURE__*/_jsx("span", {
-        className: "widget-card__type",
-        children: item.typeLabel
-      }), /*#__PURE__*/_jsx("span", {
-        className: "widget-card__row-title",
-        children: item.title
-      })]
-    }),
-    meta: /*#__PURE__*/_jsx("time", {
-      dateTime: item.viewedAt,
-      children: formatRelativeDate({
-        relativeTimeFormat,
-        value: item.viewedAt
-      })
-    })
-  }));
-  return /*#__PURE__*/_jsx(WidgetCard, {
-    className: "recently-viewed-widget",
-    title: title,
-    children: /*#__PURE__*/_jsx(WidgetList, {
-      emptyMessage: i18n.t('dashboard:widgetRecentlyViewedEmpty'),
-      items: items
-    })
-  });
-}
-/**
- * Loads the stored recently viewed identities and computes display fields from the live documents.
- * Documents are queried with access control, so deleted or now-forbidden docs are dropped.
- */
-async function getEnrichedItems({
+// eslint-disable-next-line payload/no-imports-from-exports-dir -- Server component must reference exports dir for proper client boundary
+import { RecentsAndPinnedClient } from '../../exports/client/index.js';
+export function RecentlyViewedWidget({
   req,
   widgetData
 }) {
@@ -66,83 +12,36 @@ async function getEnrichedItems({
     payload,
     user
   } = req;
-  const excludedCollections = new Set(widgetData?.excludedCollections ?? []);
-  const preference = await getPreferences(PREFERENCE_KEYS.RECENTLY_VIEWED, payload, user.id, user.collection);
-  const items = (preference?.value?.items ?? []).filter(item => !excludedCollections.has(item.collectionSlug) && Boolean(payload.collections[item.collectionSlug]));
-  if (items.length === 0) {
-    return [];
+  if (!user) {
+    return null;
   }
-  const idsByCollection = new Map();
-  for (const item of items) {
-    const ids = idsByCollection.get(item.collectionSlug) ?? [];
-    ids.push(item.id);
-    idsByCollection.set(item.collectionSlug, ids);
-  }
-  const docsByKey = new Map();
-  await Promise.all([...idsByCollection.entries()].map(async ([collectionSlug, ids]) => {
-    try {
-      const result = await payload.find({
-        collection: collectionSlug,
-        depth: 0,
-        limit: ids.length,
-        overrideAccess: false,
-        pagination: false,
-        user,
-        where: {
-          id: {
-            in: ids
-          }
-        }
-      });
-      for (const doc of result.docs) {
-        docsByKey.set(`${collectionSlug}:${doc.id}`, doc);
-      }
-    } catch (err) {
-      payload.logger.error({
-        err,
-        msg: `RecentlyViewedWidget: failed to load collection "${collectionSlug}"`
-      });
-    }
-  }));
-  const enrichedItems = [];
-  for (const item of items) {
-    if (enrichedItems.length >= displayLimit) {
-      break;
-    }
-    const doc = docsByKey.get(`${item.collectionSlug}:${item.id}`);
-    if (!doc) {
-      continue;
-    }
-    const collectionConfig = payload.collections[item.collectionSlug].config;
-    const useAsTitle = collectionConfig.admin?.useAsTitle || 'id';
-    const rawTitle = getValueByPath({
-      object: doc,
-      path: useAsTitle
-    });
-    enrichedItems.push({
-      id: item.id,
-      collectionSlug: item.collectionSlug,
-      href: formatAdminURL({
-        adminRoute: payload.config.routes.admin,
-        path: `/collections/${item.collectionSlug}/${item.id}`
+  return /*#__PURE__*/_jsx(RecentsAndPinnedClient, {
+    excludedCollections: widgetData?.excludedCollections,
+    labels: {
+      addPin: i18n.t('general:selectLabel', {
+        label: i18n.t('general:documents')
       }),
-      thumbnailURL: collectionConfig.upload && typeof doc.thumbnailURL === 'string' ? doc.thumbnailURL : undefined,
-      title: typeof rawTitle === 'string' && rawTitle ? rawTitle : String(item.id),
-      typeLabel: getTranslation(collectionConfig.labels.singular, i18n),
-      viewedAt: item.viewedAt
-    });
-  }
-  return enrichedItems;
-}
-function getValueByPath({
-  object,
-  path
-}) {
-  return path.split('.').reduce((value, segment) => {
-    if (!value || typeof value !== 'object') {
-      return undefined;
-    }
-    return value[segment];
-  }, object);
+      loadError: i18n.t('error:unknown'),
+      loading: i18n.t('general:loading'),
+      next: i18n.t('general:next'),
+      pagination: i18n.t('dashboard:widgetPagination'),
+      pinned: i18n.t('dashboard:widgetPinned'),
+      pinnedEmpty: i18n.t('dashboard:widgetPinnedEmpty'),
+      pinnedEmptyDescription: i18n.t('dashboard:widgetPinnedEmptyDescription'),
+      pinnedSaveError: i18n.t('dashboard:widgetPinnedSaveError'),
+      previous: i18n.t('general:previous'),
+      recents: i18n.t('dashboard:widgetRecentlyViewedTitle'),
+      recentsEmpty: i18n.t('dashboard:widgetRecentlyViewedEmpty'),
+      recentsEmptyDescription: i18n.t('dashboard:widgetRecentlyViewedEmptyDescription'),
+      removePin: i18n.t('dashboard:widgetRemovePin'),
+      retry: i18n.t('general:retry'),
+      title: i18n.t('dashboard:widgetRecentsAndPinned')
+    },
+    pinsURL: formatAdminURL({
+      apiRoute: payload.config.routes.api,
+      path: `/payload-preferences/${PREFERENCE_KEYS.PINNED_DOCUMENTS}`,
+      serverURL: payload.config.serverURL
+    })
+  });
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +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":[]}
+{"version":3,"file":"index.js","names":["formatAdminURL","PREFERENCE_KEYS","React","RecentsAndPinnedClient","RecentlyViewedWidget","req","widgetData","i18n","payload","user","_jsx","excludedCollections","labels","addPin","t","label","loadError","loading","next","pagination","pinned","pinnedEmpty","pinnedEmptyDescription","pinnedSaveError","previous","recents","recentsEmpty","recentsEmptyDescription","removePin","retry","title","pinsURL","apiRoute","config","routes","api","path","PINNED_DOCUMENTS","serverURL"],"sources":["../../../src/widgets/RecentlyViewed/index.tsx"],"sourcesContent":["import type { WidgetServerProps } from 'payload'\n\nimport { formatAdminURL, PREFERENCE_KEYS } from 'payload/shared'\nimport React from 'react'\n\n// eslint-disable-next-line payload/no-imports-from-exports-dir -- Server component must reference exports dir for proper client boundary\nimport { RecentsAndPinnedClient } from '../../exports/client/index.js'\n\ntype RecentlyViewedWidgetData = {\n  excludedCollections?: string[]\n}\n\nexport function RecentlyViewedWidget({\n  req,\n  widgetData,\n}: WidgetServerProps<{ data?: RecentlyViewedWidgetData }>) {\n  const { i18n, payload, user } = req\n  if (!user) {\n    return null\n  }\n  return (\n    <RecentsAndPinnedClient\n      excludedCollections={widgetData?.excludedCollections}\n      labels={{\n        addPin: i18n.t('general:selectLabel', { label: i18n.t('general:documents') }),\n        loadError: i18n.t('error:unknown'),\n        loading: i18n.t('general:loading'),\n        next: i18n.t('general:next'),\n        pagination: i18n.t('dashboard:widgetPagination'),\n        pinned: i18n.t('dashboard:widgetPinned'),\n        pinnedEmpty: i18n.t('dashboard:widgetPinnedEmpty'),\n        pinnedEmptyDescription: i18n.t('dashboard:widgetPinnedEmptyDescription'),\n        pinnedSaveError: i18n.t('dashboard:widgetPinnedSaveError'),\n        previous: i18n.t('general:previous'),\n        recents: i18n.t('dashboard:widgetRecentlyViewedTitle'),\n        recentsEmpty: i18n.t('dashboard:widgetRecentlyViewedEmpty'),\n        recentsEmptyDescription: i18n.t('dashboard:widgetRecentlyViewedEmptyDescription'),\n        removePin: i18n.t('dashboard:widgetRemovePin'),\n        retry: i18n.t('general:retry'),\n        title: i18n.t('dashboard:widgetRecentsAndPinned'),\n      }}\n      pinsURL={formatAdminURL({\n        apiRoute: payload.config.routes.api,\n        path: `/payload-preferences/${PREFERENCE_KEYS.PINNED_DOCUMENTS}`,\n        serverURL: payload.config.serverURL,\n      })}\n    />\n  )\n}\n"],"mappings":";AAEA,SAASA,cAAc,EAAEC,eAAe,QAAQ;AAChD,OAAOC,KAAA,MAAW;AAElB;AACA,SAASC,sBAAsB,QAAQ;AAMvC,OAAO,SAASC,qBAAqB;EACnCC,GAAG;EACHC;AAAU,CAC6C;EACvD,MAAM;IAAEC,IAAI;IAAEC,OAAO;IAAEC;EAAI,CAAE,GAAGJ,GAAA;EAChC,IAAI,CAACI,IAAA,EAAM;IACT,OAAO;EACT;EACA,oBACEC,IAAA,CAACP,sBAAA;IACCQ,mBAAA,EAAqBL,UAAA,EAAYK,mBAAA;IACjCC,MAAA,EAAQ;MACNC,MAAA,EAAQN,IAAA,CAAKO,CAAC,CAAC,uBAAuB;QAAEC,KAAA,EAAOR,IAAA,CAAKO,CAAC,CAAC;MAAqB;MAC3EE,SAAA,EAAWT,IAAA,CAAKO,CAAC,CAAC;MAClBG,OAAA,EAASV,IAAA,CAAKO,CAAC,CAAC;MAChBI,IAAA,EAAMX,IAAA,CAAKO,CAAC,CAAC;MACbK,UAAA,EAAYZ,IAAA,CAAKO,CAAC,CAAC;MACnBM,MAAA,EAAQb,IAAA,CAAKO,CAAC,CAAC;MACfO,WAAA,EAAad,IAAA,CAAKO,CAAC,CAAC;MACpBQ,sBAAA,EAAwBf,IAAA,CAAKO,CAAC,CAAC;MAC/BS,eAAA,EAAiBhB,IAAA,CAAKO,CAAC,CAAC;MACxBU,QAAA,EAAUjB,IAAA,CAAKO,CAAC,CAAC;MACjBW,OAAA,EAASlB,IAAA,CAAKO,CAAC,CAAC;MAChBY,YAAA,EAAcnB,IAAA,CAAKO,CAAC,CAAC;MACrBa,uBAAA,EAAyBpB,IAAA,CAAKO,CAAC,CAAC;MAChCc,SAAA,EAAWrB,IAAA,CAAKO,CAAC,CAAC;MAClBe,KAAA,EAAOtB,IAAA,CAAKO,CAAC,CAAC;MACdgB,KAAA,EAAOvB,IAAA,CAAKO,CAAC,CAAC;IAChB;IACAiB,OAAA,EAAS/B,cAAA,CAAe;MACtBgC,QAAA,EAAUxB,OAAA,CAAQyB,MAAM,CAACC,MAAM,CAACC,GAAG;MACnCC,IAAA,EAAM,wBAAwBnC,eAAA,CAAgBoC,gBAAgB,EAAE;MAChEC,SAAA,EAAW9B,OAAA,CAAQyB,MAAM,CAACK;IAC5B;;AAGN","ignoreList":[]}

package/dist/widgets/RecentlyViewed/pinnedPreferences.d.ts

@@ -0,0 +1,18 @@
+import type { PinnedItem } from './recents.js';
+export declare function getPinnedItems({ value }: {
+    value: unknown;
+}): PinnedItem[];
+export declare function readPinnedPreferences({ url }: {
+    url: string;
+}): Promise<PinnedItem[]>;
+/** Serialize the read/modify/write operation across same-origin admin tabs. */
+export declare function updatePinnedPreferences({ document, shouldPin, url, }: {
+    document: PinnedItem;
+    shouldPin: boolean;
+    url: string;
+}): Promise<void>;
+export declare function savePinnedPreferences({ items, url, }: {
+    items: PinnedItem[];
+    url: string;
+}): Promise<void>;
+//# sourceMappingURL=pinnedPreferences.d.ts.map

package/dist/widgets/RecentlyViewed/pinnedPreferences.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pinnedPreferences.d.ts","sourceRoot":"","sources":["../../../src/widgets/RecentlyViewed/pinnedPreferences.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAI9C,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,OAAO,CAAA;CAAE,GAAG,UAAU,EAAE,CAuB1E;AAED,wBAAsB,qBAAqB,CAAC,EAAE,GAAG,EAAE,EAAE;IAAE,GAAG,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,CAAC,UAAU,EAAE,CAAC,CAS3F;AAED,+EAA+E;AAC/E,wBAAsB,uBAAuB,CAAC,EAC5C,QAAQ,EACR,SAAS,EACT,GAAG,GACJ,EAAE;IACD,QAAQ,EAAE,UAAU,CAAA;IACpB,SAAS,EAAE,OAAO,CAAA;IAClB,GAAG,EAAE,MAAM,CAAA;CACZ,GAAG,OAAO,CAAC,IAAI,CAAC,CAkBhB;AAED,wBAAsB,qBAAqB,CAAC,EAC1C,KAAK,EACL,GAAG,GACJ,EAAE;IACD,KAAK,EAAE,UAAU,EAAE,CAAA;IACnB,GAAG,EAAE,MAAM,CAAA;CACZ,GAAG,OAAO,CAAC,IAAI,CAAC,CAWhB"}

package/dist/widgets/RecentlyViewed/pinnedPreferences.js

@@ -0,0 +1,81 @@
+import { documentKey } from './recents.js';
+export function getPinnedItems({
+  value
+}) {
+  if (!value || typeof value !== 'object' || !('items' in value) || !Array.isArray(value.items)) {
+    return [];
+  }
+  const keys = new Set();
+  return value.items.filter(item => {
+    if (!item || typeof item !== 'object' || typeof item.collectionSlug !== 'string' || typeof item.id !== 'string' && typeof item.id !== 'number') {
+      return false;
+    }
+    const key = documentKey(item);
+    if (keys.has(key)) {
+      return false;
+    }
+    keys.add(key);
+    return true;
+  });
+}
+export async function readPinnedPreferences({
+  url
+}) {
+  const response = await fetch(url, {
+    credentials: 'include'
+  });
+  if (!response.ok) {
+    throw new Error('Unable to read pins');
+  }
+  const preference = await response.json();
+  return getPinnedItems({
+    value: preference.value
+  });
+}
+/** Serialize the read/modify/write operation across same-origin admin tabs. */
+export async function updatePinnedPreferences({
+  document,
+  shouldPin,
+  url
+}) {
+  const update = async () => {
+    const existing = await readPinnedPreferences({
+      url
+    });
+    if (shouldPin && existing.some(item => documentKey(item) === documentKey(document))) {
+      return;
+    }
+    const remaining = existing.filter(item => documentKey(item) !== documentKey(document));
+    const items = shouldPin ? [document, ...remaining] : remaining;
+    await savePinnedPreferences({
+      items,
+      url
+    });
+  };
+  if (typeof navigator !== 'undefined' && navigator.locks) {
+    await navigator.locks.request(`payload:pinned-documents:${url}`, update);
+  } else {
+    await update();
+  }
+}
+export async function savePinnedPreferences({
+  items,
+  url
+}) {
+  const response = await fetch(url, {
+    body: JSON.stringify({
+      value: {
+        items
+      }
+    }),
+    credentials: 'include',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    method: 'POST'
+  });
+  if (!response.ok) {
+    throw new Error('Unable to save pins');
+  }
+}
+//# sourceMappingURL=pinnedPreferences.js.map