@payloadcms/ui 4.0.0-internal.af6aad0 → 4.0.0-internal.b8a92d2

package/dist/widgets/RecentlyViewed/DocumentActivity/index.css

@@ -0,0 +1,193 @@
+@layer payload-default {
+  .document-activity {
+    --document-activity-thumbnail-height: calc(var(--spacer-6) * 3.5);
+    --document-activity-card-height: calc(
+      var(--document-activity-thumbnail-height) + var(--spacer-2) + var(--spacer-1) * 2 +
+        var(--text-body-medium-line-height) * 2 + var(--spacer-2-5) + var(--stroke-width-small) * 2
+    );
+    container-type: inline-size;
+    container-name: activity;
+    min-inline-size: 0;
+    color: var(--color-text);
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    line-height: var(--text-body-medium-line-height);
+  }
+  .document-activity__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--spacer-2);
+    margin-block-end: var(--spacer-3);
+  }
+  .document-activity__header .tabs {
+    max-inline-size: 100%;
+    min-inline-size: 0;
+    padding: 0;
+    border: 0;
+  }
+  .document-activity__header .tabs__tabs-wrap {
+    margin-block-end: 0;
+    padding-block-end: 0;
+  }
+  .document-activity__header .tabs__tabs {
+    box-shadow: none;
+    gap: var(--spacer-1);
+  }
+  .document-activity__header .tabs__tab-button {
+    margin: 0;
+    min-block-size: var(--spacer-4);
+    padding: var(--spacer-1) var(--spacer-2);
+    font-size: var(--text-body-medium-font-size);
+    border-radius: var(--radius-medium);
+  }
+  .document-activity__header .tabs__tab-button::after {
+    display: none;
+  }
+  .document-activity__header .tabs__tab-button--active {
+    background: var(--color-bg-secondary);
+  }
+  .document-activity__views {
+    display: flex;
+    gap: var(--spacer-0);
+  }
+  .document-activity__views button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius-medium);
+    color: var(--color-text-secondary);
+    background: transparent;
+    cursor: pointer;
+  }
+  .document-activity__views button[aria-pressed='true'] {
+    background: var(--color-bg-secondary);
+    color: var(--color-text);
+  }
+  .document-activity button:focus-visible {
+    outline: var(--stroke-width-medium) solid var(--color-border-brand);
+    outline-offset: var(--spacer-1);
+  }
+  .document-activity__items {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+  .document-activity__items:not([data-tab='pinned']) > :nth-child(n + 3) {
+    display: none;
+  }
+  .document-activity__items--grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--spacer-2-5);
+  }
+  .document-activity__placeholder {
+    display: none;
+    min-block-size: var(--document-activity-card-height);
+    border: var(--stroke-width-small) dashed var(--color-border);
+    border-radius: var(--radius-large);
+    background: var(--color-bg);
+  }
+  .document-activity__items--grid > .document-activity__placeholder:nth-child(-n + 2) {
+    display: list-item;
+  }
+  .document-activity__items--list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-1);
+  }
+  .document-activity__columns {
+    display: none;
+  }
+  .document-activity__empty {
+    border: var(--stroke-width-small) dashed var(--color-border);
+    border-radius: var(--radius-large);
+    padding: var(--spacer-5) var(--spacer-3);
+    background: var(--color-bg);
+    min-block-size: var(--document-activity-card-height);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: var(--spacer-2);
+    text-align: center;
+  }
+  .document-activity__empty-copy {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-1);
+  }
+  .document-activity__empty p {
+    margin: 0;
+    color: var(--color-text-secondary);
+  }
+  .document-activity__empty strong {
+    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);
+  }
+  .document-activity__empty-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--spacer-6);
+    block-size: var(--spacer-6);
+    border-radius: var(--radius-full);
+    background: var(--color-bg-selected);
+    color: var(--color-text-brand);
+  }
+  @container activity (min-width: 400px) {
+    .document-activity__items--list:not([data-tab='pinned']) > :nth-child(-n + 4) {
+      display: list-item;
+    }
+  }
+  @container activity (min-width: 768px) {
+    .document-activity__items--grid > .document-activity__placeholder:nth-child(-n + 4),
+    .document-activity__items--grid:not([data-tab='pinned']) > :nth-child(-n + 4),
+    .document-activity__items--list:not([data-tab='pinned']) > :nth-child(-n + 8) {
+      display: list-item;
+    }
+    .document-activity__items--grid {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+    .document-activity__columns {
+      display: grid;
+      grid-template-columns: 3fr 1fr 1fr 1fr;
+      gap: var(--spacer-3);
+      padding-inline: var(--spacer-2) var(--spacer-3);
+      padding-block: var(--spacer-1);
+      color: var(--color-text-secondary);
+    }
+    .document-activity__columns button {
+      border: 0;
+      padding: 0;
+      text-align: start;
+      color: inherit;
+      background: transparent;
+      font: inherit;
+      cursor: pointer;
+    }
+  }
+  @container activity (min-width: 1024px) {
+    .document-activity__items--grid > .document-activity__placeholder:nth-child(-n + 6),
+    .document-activity__items--grid:not([data-tab='pinned']) > :nth-child(-n + 6) {
+      display: list-item;
+    }
+    .document-activity__items--grid {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+  }
+  @container activity (min-width: 1440px) {
+    .document-activity__items--grid > .document-activity__placeholder:nth-child(-n + 8),
+    .document-activity__items--grid:not([data-tab='pinned']) > :nth-child(-n + 8) {
+      display: list-item;
+    }
+    .document-activity__items--grid {
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { DocumentWidgetData } from '../shared.js';
+import './index.css';
+export declare const DocumentActivityWidget: ({ documents, draftKeys, hasError, preferences: initialPreferences, recentKeys, }: DocumentWidgetData) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/widgets/RecentlyViewed/DocumentActivity/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAE/D,OAAO,KAAK,EAAE,kBAAkB,EAA6B,MAAM,cAAc,CAAA;AASjF,OAAO,aAAa,CAAA;AAEpB,eAAO,MAAM,sBAAsB,qFAMhC,kBAAkB,sBA6MpB,CAAA"}

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

@@ -0,0 +1,225 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { formatAdminURL, PREFERENCE_KEYS } from 'payload/shared';
+import React, { useId, useMemo, useRef, useState } from 'react';
+import { TabsList } from '../../../elements/Tabs/index.js';
+import { GridViewIcon } from '../../../icons/GridView/index.js';
+import { useConfig } from '../../../providers/Config/index.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
+import { WidgetIcon } from '../../WidgetIcon/index.js';
+import { DocumentItem } from '../DocumentItem/index.js';
+import { documentKey, getActivityDocuments, toggleDocumentPin } from '../shared.js';
+import './index.css';
+export const DocumentActivityWidget = ({
+  documents,
+  draftKeys,
+  hasError,
+  preferences: initialPreferences,
+  recentKeys
+}) => {
+  const [preferences, setPreferences] = useState(initialPreferences);
+  const saveInProgress = useRef(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [hasSaveError, setHasSaveError] = useState(false);
+  const [isAscending, setIsAscending] = useState(false);
+  const {
+    config
+  } = useConfig();
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const panelID = useId();
+  const {
+    pins,
+    tab,
+    view
+  } = preferences;
+  const tabs = useMemo(() => [{
+    label: t('dashboard:pinned'),
+    value: 'pinned'
+  }, {
+    label: t('dashboard:recentlyViewed'),
+    value: 'recent'
+  }, {
+    label: t('dashboard:recentDrafts'),
+    value: 'drafts'
+  }], [t]);
+  const pinnedKeys = new Set(pins.map(documentKey));
+  const items = getActivityDocuments({
+    documents,
+    draftKeys,
+    hasError,
+    isAscending,
+    preferences,
+    recentKeys
+  });
+  const save = async ({
+    next
+  }) => {
+    if (saveInProgress.current) {
+      return;
+    }
+    saveInProgress.current = true;
+    setIsSaving(true);
+    setHasSaveError(false);
+    try {
+      const response = await fetch(formatAdminURL({
+        apiRoute: config.routes.api,
+        path: `/payload-preferences/${PREFERENCE_KEYS.DASHBOARD_DOCUMENTS}`,
+        serverURL: config.serverURL
+      }), {
+        body: JSON.stringify({
+          value: next
+        }),
+        credentials: 'include',
+        headers: {
+          'Accept-Language': i18n.language,
+          'Content-Type': 'application/json'
+        },
+        method: 'POST'
+      });
+      if (!response.ok) {
+        throw new Error('Failed to save dashboard preferences');
+      }
+      setPreferences(next);
+    } catch {
+      setHasSaveError(true);
+    } finally {
+      saveInProgress.current = false;
+      setIsSaving(false);
+    }
+  };
+  return /*#__PURE__*/_jsxs("section", {
+    "aria-busy": isSaving,
+    "aria-label": t('dashboard:documents'),
+    className: "document-activity",
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "document-activity__header",
+      children: [/*#__PURE__*/_jsx(TabsList, {
+        children: tabs.map((item, index) => /*#__PURE__*/_jsx("button", {
+          "aria-controls": panelID,
+          "aria-selected": item.value === tab,
+          className: `tabs__tab-button${item.value === tab ? ' tabs__tab-button--active' : ''}`,
+          disabled: isSaving,
+          id: `${panelID}-${item.value}`,
+          onClick: () => void save({
+            next: {
+              ...preferences,
+              tab: item.value
+            }
+          }),
+          onKeyDown: event => {
+            const direction = event.currentTarget.closest('[dir]')?.getAttribute('dir') === 'rtl' ? -1 : 1;
+            const offset = event.key === 'ArrowRight' ? direction : event.key === 'ArrowLeft' ? -direction : 0;
+            const nextIndex = event.key === 'Home' ? 0 : event.key === 'End' ? tabs.length - 1 : (index + offset + tabs.length) % tabs.length;
+            if (offset || event.key === 'Home' || event.key === 'End') {
+              event.preventDefault();
+              const buttons = event.currentTarget.parentElement?.querySelectorAll('[role="tab"]');
+              buttons?.[nextIndex]?.focus();
+            }
+          },
+          role: "tab",
+          tabIndex: item.value === tab ? 0 : -1,
+          type: "button",
+          children: item.label
+        }, item.value))
+      }), /*#__PURE__*/_jsxs("div", {
+        "aria-label": t('dashboard:viewMode'),
+        className: "document-activity__views",
+        role: "group",
+        children: [/*#__PURE__*/_jsx("button", {
+          "aria-label": t('dashboard:gridView'),
+          "aria-pressed": view === 'grid',
+          disabled: isSaving,
+          onClick: () => void save({
+            next: {
+              ...preferences,
+              view: 'grid'
+            }
+          }),
+          type: "button",
+          children: /*#__PURE__*/_jsx(GridViewIcon, {})
+        }), /*#__PURE__*/_jsx("button", {
+          "aria-label": t('dashboard:listView'),
+          "aria-pressed": view === 'list',
+          disabled: isSaving,
+          onClick: () => void save({
+            next: {
+              ...preferences,
+              view: 'list'
+            }
+          }),
+          type: "button",
+          children: /*#__PURE__*/_jsx(WidgetIcon, {
+            name: "table"
+          })
+        })]
+      })]
+    }), (hasSaveError || hasError) && /*#__PURE__*/_jsx("p", {
+      role: "alert",
+      children: t(hasSaveError ? 'dashboard:saveError' : 'dashboard:loadError')
+    }), /*#__PURE__*/_jsx("div", {
+      "aria-labelledby": `${panelID}-${tab}`,
+      id: panelID,
+      role: "tabpanel",
+      tabIndex: 0,
+      children: !items.length ? /*#__PURE__*/_jsxs("div", {
+        className: "document-activity__empty",
+        children: [/*#__PURE__*/_jsx("span", {
+          className: "document-activity__empty-icon",
+          children: /*#__PURE__*/_jsx(WidgetIcon, {
+            name: tab === 'pinned' ? 'pin' : 'table'
+          })
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "document-activity__empty-copy",
+          children: [/*#__PURE__*/_jsx("strong", {
+            children: t(tab === 'pinned' ? 'dashboard:noPinned' : tab === 'drafts' ? 'dashboard:noDrafts' : 'dashboard:noRecents')
+          }), /*#__PURE__*/_jsx("p", {
+            children: t(tab === 'pinned' ? 'dashboard:pinnedHint' : tab === 'drafts' ? 'dashboard:draftsHint' : 'dashboard:recentsHint')
+          })]
+        })]
+      }) : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [view === 'list' && /*#__PURE__*/_jsxs("div", {
+          className: "document-activity__columns",
+          children: [/*#__PURE__*/_jsx("span", {
+            children: t('general:name')
+          }), /*#__PURE__*/_jsx("span", {
+            children: t('general:collection')
+          }), /*#__PURE__*/_jsxs("button", {
+            onClick: () => setIsAscending(!isAscending),
+            type: "button",
+            children: [t('general:updatedAt'), " ", isAscending ? '↑' : '↓']
+          }), /*#__PURE__*/_jsx("span", {
+            children: t('dashboard:updatedBy')
+          })]
+        }), /*#__PURE__*/_jsxs("ul", {
+          className: `document-activity__items document-activity__items--${view}`,
+          "data-tab": tab,
+          children: [items.map(doc => /*#__PURE__*/_jsx(DocumentItem, {
+            doc: doc,
+            isPinned: pinnedKeys.has(documentKey(doc)),
+            isSaving: isSaving,
+            onTogglePin: () => void save({
+              next: {
+                ...preferences,
+                pins: toggleDocumentPin({
+                  document: doc,
+                  pins
+                })
+              }
+            }),
+            view: view
+          }, documentKey(doc))), view === 'grid' && Array.from({
+            length: Math.max(0, 8 - items.length)
+          }, (_, index_0) => /*#__PURE__*/_jsx("li", {
+            "aria-hidden": "true",
+            className: "document-activity__placeholder"
+          }, `placeholder-${index_0}`))]
+        })]
+      })
+    })]
+  });
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["formatAdminURL","PREFERENCE_KEYS","React","useId","useMemo","useRef","useState","TabsList","GridViewIcon","useConfig","useTranslation","WidgetIcon","DocumentItem","documentKey","getActivityDocuments","toggleDocumentPin","DocumentActivityWidget","documents","draftKeys","hasError","preferences","initialPreferences","recentKeys","setPreferences","saveInProgress","isSaving","setIsSaving","hasSaveError","setHasSaveError","isAscending","setIsAscending","config","i18n","t","panelID","pins","tab","view","tabs","label","value","pinnedKeys","Set","map","items","save","next","current","response","fetch","apiRoute","routes","api","path","DASHBOARD_DOCUMENTS","serverURL","body","JSON","stringify","credentials","headers","language","method","ok","Error","_jsxs","className","_jsx","item","index","disabled","id","onClick","onKeyDown","event","direction","currentTarget","closest","getAttribute","offset","key","nextIndex","length","preventDefault","buttons","parentElement","querySelectorAll","focus","role","tabIndex","type","name","_Fragment","doc","isPinned","has","onTogglePin","document","Array","from","Math","max","_"],"sources":["../../../../src/widgets/RecentlyViewed/DocumentActivity/index.tsx"],"sourcesContent":["'use client'\nimport { formatAdminURL, PREFERENCE_KEYS } from 'payload/shared'\nimport React, { useId, useMemo, useRef, useState } from 'react'\n\nimport type { DocumentWidgetData, DocumentWidgetPreferences } from '../shared.js'\n\nimport { TabsList } from '../../../elements/Tabs/index.js'\nimport { GridViewIcon } from '../../../icons/GridView/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { WidgetIcon } from '../../WidgetIcon/index.js'\nimport { DocumentItem } from '../DocumentItem/index.js'\nimport { documentKey, getActivityDocuments, toggleDocumentPin } from '../shared.js'\nimport './index.css'\n\nexport const DocumentActivityWidget = ({\n  documents,\n  draftKeys,\n  hasError,\n  preferences: initialPreferences,\n  recentKeys,\n}: DocumentWidgetData) => {\n  const [preferences, setPreferences] = useState(initialPreferences)\n  const saveInProgress = useRef(false)\n  const [isSaving, setIsSaving] = useState(false)\n  const [hasSaveError, setHasSaveError] = useState(false)\n  const [isAscending, setIsAscending] = useState(false)\n  const { config } = useConfig()\n  const { i18n, t } = useTranslation()\n  const panelID = useId()\n  const { pins, tab, view } = preferences\n  const tabs = useMemo(\n    () => [\n      { label: t('dashboard:pinned'), value: 'pinned' as const },\n      { label: t('dashboard:recentlyViewed'), value: 'recent' as const },\n      { label: t('dashboard:recentDrafts'), value: 'drafts' as const },\n    ],\n    [t],\n  )\n  const pinnedKeys = new Set(pins.map(documentKey))\n  const items = getActivityDocuments({\n    documents,\n    draftKeys,\n    hasError,\n    isAscending,\n    preferences,\n    recentKeys,\n  })\n\n  const save = async ({ next }: { next: DocumentWidgetPreferences }) => {\n    if (saveInProgress.current) {\n      return\n    }\n    saveInProgress.current = true\n    setIsSaving(true)\n    setHasSaveError(false)\n    try {\n      const response = await fetch(\n        formatAdminURL({\n          apiRoute: config.routes.api,\n          path: `/payload-preferences/${PREFERENCE_KEYS.DASHBOARD_DOCUMENTS}`,\n          serverURL: config.serverURL,\n        }),\n        {\n          body: JSON.stringify({ value: next }),\n          credentials: 'include',\n          headers: { 'Accept-Language': i18n.language, 'Content-Type': 'application/json' },\n          method: 'POST',\n        },\n      )\n      if (!response.ok) {\n        throw new Error('Failed to save dashboard preferences')\n      }\n      setPreferences(next)\n    } catch {\n      setHasSaveError(true)\n    } finally {\n      saveInProgress.current = false\n      setIsSaving(false)\n    }\n  }\n\n  return (\n    <section\n      aria-busy={isSaving}\n      aria-label={t('dashboard:documents')}\n      className=\"document-activity\"\n    >\n      <div className=\"document-activity__header\">\n        <TabsList>\n          {tabs.map((item, index) => (\n            <button\n              aria-controls={panelID}\n              aria-selected={item.value === tab}\n              className={`tabs__tab-button${item.value === tab ? ' tabs__tab-button--active' : ''}`}\n              disabled={isSaving}\n              id={`${panelID}-${item.value}`}\n              key={item.value}\n              onClick={() => void save({ next: { ...preferences, tab: item.value } })}\n              onKeyDown={(event) => {\n                const direction =\n                  event.currentTarget.closest('[dir]')?.getAttribute('dir') === 'rtl' ? -1 : 1\n                const offset =\n                  event.key === 'ArrowRight'\n                    ? direction\n                    : event.key === 'ArrowLeft'\n                      ? -direction\n                      : 0\n                const nextIndex =\n                  event.key === 'Home'\n                    ? 0\n                    : event.key === 'End'\n                      ? tabs.length - 1\n                      : (index + offset + tabs.length) % tabs.length\n                if (offset || event.key === 'Home' || event.key === 'End') {\n                  event.preventDefault()\n                  const buttons =\n                    event.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>(\n                      '[role=\"tab\"]',\n                    )\n                  buttons?.[nextIndex]?.focus()\n                }\n              }}\n              role=\"tab\"\n              tabIndex={item.value === tab ? 0 : -1}\n              type=\"button\"\n            >\n              {item.label}\n            </button>\n          ))}\n        </TabsList>\n        <div aria-label={t('dashboard:viewMode')} className=\"document-activity__views\" role=\"group\">\n          <button\n            aria-label={t('dashboard:gridView')}\n            aria-pressed={view === 'grid'}\n            disabled={isSaving}\n            onClick={() => void save({ next: { ...preferences, view: 'grid' } })}\n            type=\"button\"\n          >\n            <GridViewIcon />\n          </button>\n          <button\n            aria-label={t('dashboard:listView')}\n            aria-pressed={view === 'list'}\n            disabled={isSaving}\n            onClick={() => void save({ next: { ...preferences, view: 'list' } })}\n            type=\"button\"\n          >\n            <WidgetIcon name=\"table\" />\n          </button>\n        </div>\n      </div>\n      {(hasSaveError || hasError) && (\n        <p role=\"alert\">{t(hasSaveError ? 'dashboard:saveError' : 'dashboard:loadError')}</p>\n      )}\n      <div aria-labelledby={`${panelID}-${tab}`} id={panelID} role=\"tabpanel\" tabIndex={0}>\n        {!items.length ? (\n          <div className=\"document-activity__empty\">\n            <span className=\"document-activity__empty-icon\">\n              <WidgetIcon name={tab === 'pinned' ? 'pin' : 'table'} />\n            </span>\n            <div className=\"document-activity__empty-copy\">\n              <strong>\n                {t(\n                  tab === 'pinned'\n                    ? 'dashboard:noPinned'\n                    : tab === 'drafts'\n                      ? 'dashboard:noDrafts'\n                      : 'dashboard:noRecents',\n                )}\n              </strong>\n              <p>\n                {t(\n                  tab === 'pinned'\n                    ? 'dashboard:pinnedHint'\n                    : tab === 'drafts'\n                      ? 'dashboard:draftsHint'\n                      : 'dashboard:recentsHint',\n                )}\n              </p>\n            </div>\n          </div>\n        ) : (\n          <>\n            {view === 'list' && (\n              <div className=\"document-activity__columns\">\n                <span>{t('general:name')}</span>\n                <span>{t('general:collection')}</span>\n                <button onClick={() => setIsAscending(!isAscending)} type=\"button\">\n                  {t('general:updatedAt')} {isAscending ? '↑' : '↓'}\n                </button>\n                <span>{t('dashboard:updatedBy')}</span>\n              </div>\n            )}\n            <ul\n              className={`document-activity__items document-activity__items--${view}`}\n              data-tab={tab}\n            >\n              {items.map((doc) => (\n                <DocumentItem\n                  doc={doc}\n                  isPinned={pinnedKeys.has(documentKey(doc))}\n                  isSaving={isSaving}\n                  key={documentKey(doc)}\n                  onTogglePin={() =>\n                    void save({\n                      next: { ...preferences, pins: toggleDocumentPin({ document: doc, pins }) },\n                    })\n                  }\n                  view={view}\n                />\n              ))}\n              {view === 'grid' &&\n                Array.from({ length: Math.max(0, 8 - items.length) }, (_, index) => (\n                  <li\n                    aria-hidden=\"true\"\n                    className=\"document-activity__placeholder\"\n                    key={`placeholder-${index}`}\n                  />\n                ))}\n            </ul>\n          </>\n        )}\n      </div>\n    </section>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/widgets/RecentlyViewed/DocumentItem/index.css

@@ -0,0 +1,181 @@
+@layer payload-default {
+  .dashboard-document {
+    position: relative;
+    min-inline-size: 0;
+  }
+  .dashboard-document__link {
+    color: var(--color-text);
+    text-decoration: none;
+    min-inline-size: 0;
+  }
+  .dashboard-document__name {
+    display: contents;
+  }
+  .dashboard-document__title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: var(--text-body-medium-strong-font-weight);
+  }
+  .dashboard-document__collection,
+  .dashboard-document__date,
+  .dashboard-document__author {
+    color: var(--color-text-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .dashboard-document__status {
+    border-radius: var(--radius-medium);
+    padding-inline: var(--spacer-1);
+    font-size: var(--text-body-medium-font-size);
+    line-height: var(--text-body-medium-line-height);
+    background: var(--color-bg-tertiary);
+    color: var(--color-text);
+    inline-size: fit-content;
+  }
+  .dashboard-document__status--published {
+    background: var(--color-bg-brand);
+    color: var(--color-text-onbrand);
+  }
+  .dashboard-document__status--changed {
+    background: var(--color-bg-warning);
+    color: var(--color-text-onwarning);
+  }
+  .dashboard-document__thumbnail {
+    overflow: hidden;
+    background: var(--color-bg-secondary);
+  }
+  .dashboard-document__thumbnail .thumbnail {
+    inline-size: 100%;
+    block-size: 100%;
+    border-radius: inherit;
+  }
+  .dashboard-document__thumbnail .thumbnail img {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+  }
+  .dashboard-document__pin {
+    position: absolute;
+    inset-block-start: var(--spacer-3);
+    inset-inline-end: var(--spacer-3);
+    padding: 0;
+    display: flex;
+    background: var(--color-bg);
+    color: var(--color-text-secondary);
+    border: var(--stroke-width-small) solid var(--color-border);
+    border-radius: var(--radius-medium);
+    cursor: pointer;
+  }
+  .dashboard-document__pin[aria-pressed='true'] {
+    color: var(--color-icon-favorite);
+    transform: translate(var(--spacer-1), calc(var(--spacer-1) * -1));
+  }
+  .dashboard-document__link:focus-visible {
+    outline: var(--stroke-width-medium) solid var(--color-border-brand);
+    outline-offset: calc(var(--spacer-1) * -1);
+  }
+  .dashboard-document--grid {
+    min-block-size: var(--document-activity-card-height);
+    border: var(--stroke-width-small) solid var(--color-border);
+    border-radius: var(--radius-large);
+    overflow: hidden;
+  }
+  .dashboard-document--grid .dashboard-document__link {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    gap: var(--spacer-1);
+    padding-block-end: var(--spacer-2-5);
+  }
+  .dashboard-document--grid .dashboard-document__thumbnail {
+    grid-column: 1 / -1;
+    block-size: var(--document-activity-thumbnail-height);
+    border-block-end: var(--stroke-width-small) solid var(--color-border);
+    margin-block-end: var(--spacer-2);
+  }
+  .dashboard-document--grid .dashboard-document__title {
+    grid-column: 1 / -1;
+    margin-inline: var(--spacer-3);
+  }
+  .dashboard-document--grid .dashboard-document__collection {
+    margin-inline-start: var(--spacer-3);
+  }
+  .dashboard-document--grid .dashboard-document__date {
+    margin-inline-end: var(--spacer-3);
+  }
+  .dashboard-document--grid .dashboard-document__date::before {
+    content: '·';
+    margin-inline-end: var(--spacer-1);
+  }
+  .dashboard-document--grid .dashboard-document__status {
+    position: absolute;
+    inset-block-start: var(--spacer-3);
+    inset-inline-start: var(--spacer-3);
+  }
+  .dashboard-document--list .dashboard-document__link {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    align-items: center;
+    gap: var(--spacer-2);
+    padding: var(--spacer-2);
+    padding-inline-end: var(--spacer-6);
+    border-radius: var(--radius-medium);
+  }
+  .dashboard-document--list .dashboard-document__thumbnail {
+    inline-size: var(--spacer-4);
+    block-size: var(--spacer-4);
+    flex-shrink: 0;
+    border-radius: var(--radius-medium);
+  }
+  .dashboard-document--list .dashboard-document__name {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2-5);
+    min-inline-size: 0;
+  }
+  .dashboard-document--list .dashboard-document__status {
+    flex-shrink: 0;
+  }
+  .dashboard-document--list .dashboard-document__title {
+    flex-shrink: 1;
+  }
+  .dashboard-document--list .dashboard-document__collection,
+  .dashboard-document--list .dashboard-document__date,
+  .dashboard-document--list .dashboard-document__author {
+    display: none;
+  }
+  .dashboard-document--list .dashboard-document__pin {
+    inset-block-start: var(--spacer-2);
+    inset-inline-end: var(--spacer-2);
+  }
+  .dashboard-document:hover .dashboard-document__link {
+    background: var(--color-bg-hover);
+  }
+  @media (hover: hover) {
+    .dashboard-document__pin {
+      opacity: 0;
+    }
+    .dashboard-document:hover .dashboard-document__pin,
+    .dashboard-document:focus-within .dashboard-document__pin,
+    .dashboard-document__pin[aria-pressed='true'] {
+      opacity: 1;
+    }
+  }
+  @container activity (min-width: 768px) {
+    .dashboard-document--list .dashboard-document__link {
+      grid-template-columns: 3fr 1fr 1fr 1fr;
+      gap: var(--spacer-3);
+      padding-inline: var(--spacer-2) var(--spacer-3);
+      min-block-size: var(--spacer-6);
+    }
+    .dashboard-document--list .dashboard-document__collection,
+    .dashboard-document--list .dashboard-document__date,
+    .dashboard-document--list .dashboard-document__author {
+      display: block;
+    }
+    .dashboard-document--list .dashboard-document__author {
+      padding-inline-end: var(--spacer-4);
+    }
+  }
+}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { DashboardDocument } from '../shared.js';
+import './index.css';
+export declare const DocumentItem: ({ doc, isPinned, isSaving, onTogglePin, view, }: {
+    doc: DashboardDocument;
+    isPinned: boolean;
+    isSaving: boolean;
+    onTogglePin: () => void;
+    view: 'grid' | 'list';
+}) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/widgets/RecentlyViewed/DocumentItem/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAOrD,OAAO,aAAa,CAAA;AAEpB,eAAO,MAAM,YAAY,oDAMtB;IACD,GAAG,EAAE,iBAAiB,CAAA;IACtB,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,IAAI,EAAE,MAAM,GAAG,MAAM,CAAA;CACtB,sBAqDA,CAAA"}