@payloadcms/ui 4.0.0-internal.d3909a9 → 4.0.0-internal.d7d662c

package/dist/widgets/Activity/components/Pagination/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useLayoutEffect","useRef","ChevronIcon","useTranslation","getDocumentPage","DOCUMENTS_BATCH_SIZE","PAGE_SIZES","Pagination","consumeFocusRequest","hasPinPlaceholder","isDisabled","labels","listID","offset","onFocusTab","onPageChange","pageSize","totalDocs","t","previousRef","nextRef","sizes","currentPage","totalPages","cache","batches","current","focus","map","size","page","changePage","pageNumber","_jsxs","pagination","className","undefined","role","_jsx","previous","disabled","onClick","ref","type","direction","next"],"sources":["../../../../../src/widgets/Activity/components/Pagination/index.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef } from 'react'\n\nimport type { Labels } from '../../types.js'\n\nimport { ChevronIcon } from '../../../../icons/Chevron/index.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { getDocumentPage } from '../../utils/cache.js'\nimport { DOCUMENTS_BATCH_SIZE, PAGE_SIZES } from '../../utils/constants.js'\nimport './index.css'\n\nexport function Pagination({\n  consumeFocusRequest,\n  hasPinPlaceholder,\n  isDisabled,\n  labels,\n  listID,\n  offset,\n  onFocusTab,\n  onPageChange,\n  pageSize,\n  totalDocs,\n}: {\n  /** Returns whether focus should move after the page changed, and clears the request. */\n  consumeFocusRequest: () => boolean\n  hasPinPlaceholder: boolean\n  isDisabled: boolean\n  labels: Labels\n  listID: string\n  offset: number\n  onFocusTab: () => void\n  onPageChange: (args: { offset: number }) => void\n  /** `null` until the CSS page size is read. */\n  pageSize: null | number\n  totalDocs: number\n}) {\n  const { t } = useTranslation()\n  const previousRef = useRef<HTMLButtonElement>(null)\n  const nextRef = useRef<HTMLButtonElement>(null)\n  // Before the CSS page size is known, render one pagination per page size and let CSS pick one.\n  const sizes: readonly number[] = pageSize ? [pageSize] : PAGE_SIZES\n  const { currentPage, totalPages } = getDocumentPage({\n    cache: { batches: {}, totalDocs },\n    hasPinPlaceholder,\n    offset,\n    pageSize: pageSize ?? DOCUMENTS_BATCH_SIZE,\n  })\n\n  useLayoutEffect(() => {\n    if (isDisabled || !consumeFocusRequest()) {\n      return\n    }\n    // Keep focus on a control that is still enabled once the page changed.\n    if (totalPages === 1) {\n      onFocusTab()\n    } else if (currentPage === 1) {\n      nextRef.current?.focus()\n    } else if (currentPage === totalPages) {\n      previousRef.current?.focus()\n    }\n  }, [consumeFocusRequest, currentPage, isDisabled, onFocusTab, pageSize, totalPages])\n\n  return sizes.map((size) => {\n    const page = getDocumentPage({\n      cache: { batches: {}, totalDocs },\n      hasPinPlaceholder,\n      offset,\n      pageSize: size,\n    })\n\n    if (page.totalPages <= 1) {\n      return null\n    }\n\n    const changePage = ({ pageNumber }: { pageNumber: number }) => {\n      if (!isDisabled) {\n        onPageChange({ offset: (pageNumber - 1) * size })\n      }\n    }\n\n    return (\n      <div\n        aria-label={labels.pagination}\n        className=\"activity-widget__pagination\"\n        data-page-size={pageSize ? undefined : size}\n        key={size}\n        role=\"group\"\n      >\n        <button\n          aria-controls={listID}\n          aria-disabled={isDisabled}\n          aria-label={labels.previous}\n          className=\"activity-widget__previous\"\n          disabled={page.currentPage === 1}\n          onClick={() => changePage({ pageNumber: page.currentPage - 1 })}\n          ref={previousRef}\n          type=\"button\"\n        >\n          <span aria-hidden=\"true\">\n            <ChevronIcon direction=\"left\" />\n          </span>\n        </button>\n        <span aria-atomic=\"true\" aria-live=\"polite\" className=\"activity-widget__page-status\">\n          {t('dashboard:widgetPageCount', {\n            currentPage: page.currentPage,\n            totalPages: page.totalPages,\n          })}\n        </span>\n        <button\n          aria-controls={listID}\n          aria-disabled={isDisabled}\n          aria-label={labels.next}\n          className=\"activity-widget__next\"\n          disabled={page.currentPage === page.totalPages}\n          onClick={() => changePage({ pageNumber: page.currentPage + 1 })}\n          ref={nextRef}\n          type=\"button\"\n        >\n          <span aria-hidden=\"true\">\n            <ChevronIcon direction=\"right\" />\n          </span>\n        </button>\n      </div>\n    )\n  })\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/widgets/Activity/components/StatusPill/index.css

@@ -0,0 +1,24 @@
+@layer payload-default {
+  .activity-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);
+  }
+
+  .activity-status-pill--draft {
+    background: var(--color-bg-tertiary);
+    color: var(--color-text);
+  }
+
+  .activity-status-pill--changed {
+    background: var(--color-bg-warning);
+    color: var(--color-text-onwarning);
+  }
+}

package/dist/widgets/Activity/components/StatusPill/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './index.css';
+export declare function StatusPill({ isChanged, isDraft, label, }: {
+    isChanged?: boolean;
+    isDraft?: boolean;
+    label?: string;
+}): React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/widgets/Activity/components/StatusPill/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/widgets/Activity/components/StatusPill/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,wBAAgB,UAAU,CAAC,EACzB,SAAiB,EACjB,OAAe,EACf,KAAK,GACN,EAAE;IACD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,qBAcA"}

package/dist/widgets/Activity/components/StatusPill/index.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import './index.css';
+const baseClass = 'activity-status-pill';
+export function StatusPill({
+  isChanged = false,
+  isDraft = false,
+  label
+}) {
+  if (!label) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx("span", {
+    className: [baseClass, isDraft ? `${baseClass}--draft` : isChanged && `${baseClass}--changed`].filter(Boolean).join(' '),
+    children: label
+  });
+}
+//# sourceMappingURL=index.js.map

package/dist/widgets/Activity/components/StatusPill/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","baseClass","StatusPill","isChanged","isDraft","label","_jsx","className","filter","Boolean","join"],"sources":["../../../../../src/widgets/Activity/components/StatusPill/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'activity-status-pill'\n\nexport function StatusPill({\n  isChanged = false,\n  isDraft = false,\n  label,\n}: {\n  isChanged?: boolean\n  isDraft?: boolean\n  label?: string\n}) {\n  if (!label) {\n    return null\n  }\n\n  return (\n    <span\n      className={[baseClass, isDraft ? `${baseClass}--draft` : isChanged && `${baseClass}--changed`]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {label}\n    </span>\n  )\n}\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,SAASC,WAAW;EACzBC,SAAA,GAAY,KAAK;EACjBC,OAAA,GAAU,KAAK;EACfC;AAAK,CAKN;EACC,IAAI,CAACA,KAAA,EAAO;IACV,OAAO;EACT;EAEA,oBACEC,IAAA,CAAC;IACCC,SAAA,EAAW,CAACN,SAAA,EAAWG,OAAA,GAAU,GAAGH,SAAA,SAAkB,GAAGE,SAAA,IAAa,GAAGF,SAAA,WAAoB,CAAC,CAC3FO,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;cAEPL;;AAGP","ignoreList":[]}

package/dist/widgets/Activity/index.client.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { Labels } from './types.js';
+import type { ActivityDocumentsPage, ActivityDocumentType } from './utils/getActivityWidgetDocs.js';
+import './index.css';
+/**
+ * @internal - may change or be removed without a major version bump
+ */
+export declare function ActivityWidgetClient({ excludedCollections, initialPages, labels, pinnableCollections, pinsURL, }: {
+    excludedCollections?: string[];
+    initialPages?: Partial<Record<ActivityDocumentType, ActivityDocumentsPage>>;
+    labels: Labels;
+    pinnableCollections: string[];
+    pinsURL: string;
+}): React.JSX.Element;
+//# sourceMappingURL=index.client.d.ts.map

package/dist/widgets/Activity/index.client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../../../src/widgets/Activity/index.client.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkC,MAAM,OAAO,CAAA;AAEtD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACxC,OAAO,KAAK,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAA;AAWnG,OAAO,aAAa,CAAA;AAQpB;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,mBAAmB,EACnB,YAAY,EACZ,MAAM,EACN,mBAAmB,EACnB,OAAO,GACR,EAAE;IACD,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,oBAAoB,EAAE,qBAAqB,CAAC,CAAC,CAAA;IAC3E,MAAM,EAAE,MAAM,CAAA;IACd,mBAAmB,EAAE,MAAM,EAAE,CAAA;IAC7B,OAAO,EAAE,MAAM,CAAA;CAChB,qBAgJA"}

package/dist/widgets/Activity/index.client.js

@@ -0,0 +1,186 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useId, useRef, useState } from 'react';
+import { Button } from '../../elements/Button/index.js';
+import { WidgetCard } from '../WidgetCard/index.js';
+import { Pagination } from './components/Pagination/index.js';
+import { PinnedDocuments } from './Tabs/PinnedDocuments/index.js';
+import { usePinnedDocuments } from './Tabs/PinnedDocuments/usePinnedDocuments.js';
+import { RecentDocuments } from './Tabs/RecentDocuments/index.js';
+import { DOCUMENTS_BATCH_SIZE } from './utils/constants.js';
+import { useActivityDocuments } from './utils/useActivityDocuments.js';
+import { usePageSize } from './utils/usePageSize.js';
+import './index.css';
+/**
+ * @internal - may change or be removed without a major version bump
+ */
+export function ActivityWidgetClient({
+  excludedCollections,
+  initialPages,
+  labels,
+  pinnableCollections,
+  pinsURL
+}) {
+  const listID = useId();
+  const viewportRef = useRef(null);
+  const pinnedTabRef = useRef(null);
+  const recentsTabRef = useRef(null);
+  const paginationFocusRef = useRef(false);
+  const [view, setView] = useState({
+    offset: 0,
+    tab: 'pinned'
+  });
+  const [previousInitialPages, setPreviousInitialPages] = useState(initialPages);
+  const pageSize = usePageSize({
+    paginationFocusRef,
+    viewportRef
+  });
+  // Until the CSS page size is read, render a full batch and let the CSS tiers hide the overflow.
+  const windowSize = pageSize ?? DOCUMENTS_BATCH_SIZE;
+  const canAddPin = pinnableCollections.length > 0;
+  if (previousInitialPages !== initialPages) {
+    setPreviousInitialPages(initialPages);
+    setView({
+      offset: 0,
+      tab: view.tab
+    });
+  }
+  const focusPinnedTab = () => pinnedTabRef.current?.focus();
+  const focusActiveTab = () => (view.tab === 'pinned' ? pinnedTabRef : recentsTabRef).current?.focus();
+  const pinned = usePinnedDocuments({
+    canAddPin,
+    initialPage: initialPages?.pinned,
+    isActive: view.tab === 'pinned',
+    offset: view.tab === 'pinned' ? view.offset : 0,
+    onFocusTab: focusPinnedTab,
+    onPinAdded: () => setView({
+      offset: 0,
+      tab: 'pinned'
+    }),
+    pageSize: windowSize,
+    pinsURL
+  });
+  const recents = useActivityDocuments({
+    type: 'recents',
+    excludedCollections,
+    initialPage: initialPages?.recents,
+    isActive: view.tab === 'recents',
+    offset: view.tab === 'recents' ? view.offset : 0,
+    pageSize: windowSize
+  });
+  const documents = view.tab === 'pinned' ? pinned : recents;
+  const hasPinPlaceholder = view.tab === 'pinned' && canAddPin;
+  const loadError = documents.hasLoadError ? labels.loadError : '';
+  const saveError = view.tab === 'pinned' && pinned.hasSaveError ? labels.pinnedSaveError : '';
+  const selectTab = ({
+    tab
+  }) => {
+    if (pinned.isSaving) {
+      return;
+    }
+    paginationFocusRef.current = false;
+    if (view.tab === tab && documents.currentPage === 1) {
+      if (documents.hasLoadError) {
+        documents.retry();
+      }
+      return;
+    }
+    setView({
+      offset: 0,
+      tab
+    });
+  };
+  return /*#__PURE__*/_jsxs(WidgetCard, {
+    className: "activity-widget",
+    title: labels.title,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "activity-widget__toolbar",
+      children: [/*#__PURE__*/_jsx("div", {
+        "aria-label": labels.title,
+        className: "activity-widget__tabs",
+        role: "group",
+        children: ['pinned', 'recents'].map(tab_0 => /*#__PURE__*/_jsx("button", {
+          "aria-pressed": view.tab === tab_0,
+          className: "activity-widget__tab",
+          onClick: () => selectTab({
+            tab: tab_0
+          }),
+          ref: tab_0 === 'pinned' ? pinnedTabRef : recentsTabRef,
+          type: "button",
+          children: tab_0 === 'recents' ? labels.recents : labels.pinned
+        }, tab_0))
+      }), /*#__PURE__*/_jsx(Pagination, {
+        consumeFocusRequest: () => {
+          const shouldRestoreFocus = paginationFocusRef.current;
+          paginationFocusRef.current = false;
+          return shouldRestoreFocus;
+        },
+        hasPinPlaceholder: hasPinPlaceholder,
+        isDisabled: documents.isBusy || pinned.isSaving,
+        labels: labels,
+        listID: listID,
+        offset: documents.start,
+        onFocusTab: focusActiveTab,
+        onPageChange: ({
+          offset
+        }) => {
+          paginationFocusRef.current = true;
+          setView({
+            offset,
+            tab: view.tab
+          });
+        },
+        pageSize: pageSize,
+        totalDocs: documents.totalDocs
+      })]
+    }), /*#__PURE__*/_jsxs("div", {
+      "aria-busy": documents.isBusy,
+      className: "activity-widget__viewport",
+      "data-item-count": documents.totalDocs + Number(hasPinPlaceholder),
+      ref: viewportRef,
+      children: [loadError ? /*#__PURE__*/_jsxs("div", {
+        className: "activity-widget__error",
+        children: [/*#__PURE__*/_jsx("span", {
+          children: loadError
+        }), /*#__PURE__*/_jsx(Button, {
+          buttonStyle: "secondary",
+          margin: false,
+          onClick: () => {
+            focusActiveTab();
+            documents.retry();
+          },
+          size: "medium",
+          type: "button",
+          children: labels.retry
+        })]
+      }) : view.tab === 'pinned' ? /*#__PURE__*/_jsx(PinnedDocuments, {
+        canAddPin: canAddPin,
+        documents: pinned,
+        labels: labels,
+        listID: listID,
+        pinnableCollections: pinnableCollections,
+        pinsURL: pinsURL
+      }) : /*#__PURE__*/_jsx(RecentDocuments, {
+        documents: recents,
+        labels: labels,
+        listID: listID
+      }), saveError && !loadError ? /*#__PURE__*/_jsx("span", {
+        "aria-hidden": "true",
+        className: "activity-widget__save-error",
+        children: saveError
+      }) : null, /*#__PURE__*/_jsx("span", {
+        "aria-hidden": "true",
+        className: "activity-widget__loading",
+        children: documents.shouldShowLoading ? /*#__PURE__*/_jsx("span", {
+          children: labels.loading
+        }) : null
+      })]
+    }), /*#__PURE__*/_jsx("span", {
+      "aria-live": "polite",
+      className: "activity-widget__status sr-only",
+      children: saveError || loadError || (documents.shouldShowLoading ? labels.loading : '')
+    })]
+  });
+}
+//# sourceMappingURL=index.client.js.map

package/dist/widgets/Activity/index.client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.client.js","names":["React","useId","useRef","useState","Button","WidgetCard","Pagination","PinnedDocuments","usePinnedDocuments","RecentDocuments","DOCUMENTS_BATCH_SIZE","useActivityDocuments","usePageSize","ActivityWidgetClient","excludedCollections","initialPages","labels","pinnableCollections","pinsURL","listID","viewportRef","pinnedTabRef","recentsTabRef","paginationFocusRef","view","setView","offset","tab","previousInitialPages","setPreviousInitialPages","pageSize","windowSize","canAddPin","length","focusPinnedTab","current","focus","focusActiveTab","pinned","initialPage","isActive","onFocusTab","onPinAdded","recents","type","documents","hasPinPlaceholder","loadError","hasLoadError","saveError","hasSaveError","pinnedSaveError","selectTab","isSaving","currentPage","retry","_jsxs","className","title","_jsx","role","map","onClick","ref","consumeFocusRequest","shouldRestoreFocus","isDisabled","isBusy","start","onPageChange","totalDocs","Number","buttonStyle","margin","size","shouldShowLoading","loading"],"sources":["../../../src/widgets/Activity/index.client.tsx"],"sourcesContent":["'use client'\n\nimport React, { useId, useRef, useState } from 'react'\n\nimport type { Labels } from './types.js'\nimport type { ActivityDocumentsPage, ActivityDocumentType } from './utils/getActivityWidgetDocs.js'\n\nimport { Button } from '../../elements/Button/index.js'\nimport { WidgetCard } from '../WidgetCard/index.js'\nimport { Pagination } from './components/Pagination/index.js'\nimport { PinnedDocuments } from './Tabs/PinnedDocuments/index.js'\nimport { usePinnedDocuments } from './Tabs/PinnedDocuments/usePinnedDocuments.js'\nimport { RecentDocuments } from './Tabs/RecentDocuments/index.js'\nimport { DOCUMENTS_BATCH_SIZE } from './utils/constants.js'\nimport { useActivityDocuments } from './utils/useActivityDocuments.js'\nimport { usePageSize } from './utils/usePageSize.js'\nimport './index.css'\n\ntype View = {\n  /** Index of a document on the current page. Pages are derived from it for the current page size. */\n  offset: number\n  tab: ActivityDocumentType\n}\n\n/**\n * @internal - may change or be removed without a major version bump\n */\nexport function ActivityWidgetClient({\n  excludedCollections,\n  initialPages,\n  labels,\n  pinnableCollections,\n  pinsURL,\n}: {\n  excludedCollections?: string[]\n  initialPages?: Partial<Record<ActivityDocumentType, ActivityDocumentsPage>>\n  labels: Labels\n  pinnableCollections: string[]\n  pinsURL: string\n}) {\n  const listID = useId()\n  const viewportRef = useRef<HTMLDivElement>(null)\n  const pinnedTabRef = useRef<HTMLButtonElement>(null)\n  const recentsTabRef = useRef<HTMLButtonElement>(null)\n  const paginationFocusRef = useRef(false)\n  const [view, setView] = useState<View>({ offset: 0, tab: 'pinned' })\n  const [previousInitialPages, setPreviousInitialPages] = useState(initialPages)\n  const pageSize = usePageSize({ paginationFocusRef, viewportRef })\n  // Until the CSS page size is read, render a full batch and let the CSS tiers hide the overflow.\n  const windowSize = pageSize ?? DOCUMENTS_BATCH_SIZE\n  const canAddPin = pinnableCollections.length > 0\n\n  if (previousInitialPages !== initialPages) {\n    setPreviousInitialPages(initialPages)\n    setView({ offset: 0, tab: view.tab })\n  }\n\n  const focusPinnedTab = () => pinnedTabRef.current?.focus()\n  const focusActiveTab = () =>\n    (view.tab === 'pinned' ? pinnedTabRef : recentsTabRef).current?.focus()\n  const pinned = usePinnedDocuments({\n    canAddPin,\n    initialPage: initialPages?.pinned,\n    isActive: view.tab === 'pinned',\n    offset: view.tab === 'pinned' ? view.offset : 0,\n    onFocusTab: focusPinnedTab,\n    onPinAdded: () => setView({ offset: 0, tab: 'pinned' }),\n    pageSize: windowSize,\n    pinsURL,\n  })\n  const recents = useActivityDocuments({\n    type: 'recents',\n    excludedCollections,\n    initialPage: initialPages?.recents,\n    isActive: view.tab === 'recents',\n    offset: view.tab === 'recents' ? view.offset : 0,\n    pageSize: windowSize,\n  })\n  const documents = view.tab === 'pinned' ? pinned : recents\n  const hasPinPlaceholder = view.tab === 'pinned' && canAddPin\n  const loadError = documents.hasLoadError ? labels.loadError : ''\n  const saveError = view.tab === 'pinned' && pinned.hasSaveError ? labels.pinnedSaveError : ''\n\n  const selectTab = ({ tab }: { tab: ActivityDocumentType }) => {\n    if (pinned.isSaving) {\n      return\n    }\n    paginationFocusRef.current = false\n    if (view.tab === tab && documents.currentPage === 1) {\n      if (documents.hasLoadError) {\n        documents.retry()\n      }\n      return\n    }\n    setView({ offset: 0, tab })\n  }\n\n  return (\n    <WidgetCard className=\"activity-widget\" title={labels.title}>\n      <div className=\"activity-widget__toolbar\">\n        <div aria-label={labels.title} className=\"activity-widget__tabs\" role=\"group\">\n          {(['pinned', 'recents'] as const).map((tab) => (\n            <button\n              aria-pressed={view.tab === tab}\n              className=\"activity-widget__tab\"\n              key={tab}\n              onClick={() => selectTab({ tab })}\n              ref={tab === 'pinned' ? pinnedTabRef : recentsTabRef}\n              type=\"button\"\n            >\n              {tab === 'recents' ? labels.recents : labels.pinned}\n            </button>\n          ))}\n        </div>\n        <Pagination\n          consumeFocusRequest={() => {\n            const shouldRestoreFocus = paginationFocusRef.current\n\n            paginationFocusRef.current = false\n            return shouldRestoreFocus\n          }}\n          hasPinPlaceholder={hasPinPlaceholder}\n          isDisabled={documents.isBusy || pinned.isSaving}\n          labels={labels}\n          listID={listID}\n          offset={documents.start}\n          onFocusTab={focusActiveTab}\n          onPageChange={({ offset }) => {\n            paginationFocusRef.current = true\n            setView({ offset, tab: view.tab })\n          }}\n          pageSize={pageSize}\n          totalDocs={documents.totalDocs}\n        />\n      </div>\n      <div\n        aria-busy={documents.isBusy}\n        className=\"activity-widget__viewport\"\n        data-item-count={documents.totalDocs + Number(hasPinPlaceholder)}\n        ref={viewportRef}\n      >\n        {loadError ? (\n          <div className=\"activity-widget__error\">\n            <span>{loadError}</span>\n            <Button\n              buttonStyle=\"secondary\"\n              margin={false}\n              onClick={() => {\n                focusActiveTab()\n                documents.retry()\n              }}\n              size=\"medium\"\n              type=\"button\"\n            >\n              {labels.retry}\n            </Button>\n          </div>\n        ) : view.tab === 'pinned' ? (\n          <PinnedDocuments\n            canAddPin={canAddPin}\n            documents={pinned}\n            labels={labels}\n            listID={listID}\n            pinnableCollections={pinnableCollections}\n            pinsURL={pinsURL}\n          />\n        ) : (\n          <RecentDocuments documents={recents} labels={labels} listID={listID} />\n        )}\n        {saveError && !loadError ? (\n          <span aria-hidden=\"true\" className=\"activity-widget__save-error\">\n            {saveError}\n          </span>\n        ) : null}\n        <span aria-hidden=\"true\" className=\"activity-widget__loading\">\n          {documents.shouldShowLoading ? <span>{labels.loading}</span> : null}\n        </span>\n      </div>\n      <span aria-live=\"polite\" className=\"activity-widget__status sr-only\">\n        {saveError || loadError || (documents.shouldShowLoading ? labels.loading : '')}\n      </span>\n    </WidgetCard>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/widgets/Activity/index.css

@@ -0,0 +1,320 @@
+@layer payload-default {
+  .activity-widget,
+  .activity-widget__pin-picker {
+    --activity-text-secondary: color-mix(
+      in srgb,
+      var(--color-text-secondary) 75%,
+      var(--color-text)
+    );
+  }
+
+  .card.widget-card.activity-widget {
+    container-type: inline-size;
+    gap: var(--spacer-3);
+    height: auto;
+    max-height: none;
+    overflow: visible;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: var(--color-bg);
+  }
+
+  .activity-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;
+  }
+
+  .activity-widget__toolbar,
+  .activity-widget__tabs {
+    display: flex;
+    align-items: center;
+  }
+
+  .activity-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));
+  }
+
+  .activity-widget__tabs {
+    gap: var(--spacer-1);
+    flex-wrap: wrap;
+  }
+
+  .activity-widget__tab {
+    min-height: var(--spacer-4);
+    padding-inline: var(--spacer-2);
+    border: 0;
+    border-radius: var(--radius-medium);
+    background: transparent;
+    color: var(--activity-text-secondary);
+    cursor: pointer;
+    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;
+  }
+
+  .activity-widget__tab[aria-pressed='true'] {
+    background: var(--color-bg-secondary);
+    color: var(--color-text);
+    font-weight: var(--text-body-medium-strong-font-weight);
+  }
+
+  .activity-widget__viewport {
+    /* Read by the client for pagination. Must equal columns * rows in every tier, except for single-row tabs below. */
+    --activity-page-size: 4;
+    --activity-columns: 2;
+    --activity-rows: 2;
+    /* Match the thumbnail, two text lines, padding, metadata gap, borders, and divider. */
+    --activity-row-height: max(
+      calc(var(--spacer-6) * 5),
+      calc(
+        var(--activity-thumbnail-height) +
+          (var(--text-body-medium-line-height) + var(--spacer-2-5)) * 2 + var(--spacer-1) +
+          var(--stroke-width-small) * 3
+      )
+    );
+    --activity-thumbnail-height: calc(var(--spacer-6) * 3.5 - var(--stroke-width-small) * 2);
+    --activity-content-height: calc(
+      var(--activity-row-height) * var(--activity-rows) + var(--spacer-3) *
+        (var(--activity-rows) - 1)
+    );
+    display: grid;
+    grid-template-columns: repeat(var(--activity-columns), minmax(0, 1fr));
+    gap: var(--spacer-3);
+    min-block-size: var(--activity-content-height);
+    position: relative;
+  }
+
+  /*
+   * A tab whose items all fit in one row only reserves one row. `data-item-count` is the tab total,
+   * not the current page, so paging never changes the height. The page size stays columns * 2,
+   * which still fits every item on one page.
+   */
+  .activity-widget__viewport:is(
+    [data-item-count='0'],
+    [data-item-count='1'],
+    [data-item-count='2']
+  ) {
+    --activity-rows: 1;
+  }
+
+  /*
+   * The server renders a full batch before the page size is known, so each tier hides the cards
+   * past its page size. Items 1-4 are visible in every tier.
+   */
+  .activity-widget__item:nth-child(n + 5) {
+    display: none;
+  }
+
+  .activity-widget__pagination[data-page-size] {
+    display: none;
+  }
+
+  .activity-widget__pagination[data-page-size='4'] {
+    display: flex;
+  }
+
+  .activity-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;
+  }
+
+  .activity-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);
+  }
+
+  .activity-widget__loading {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+  }
+
+  .activity-widget__loading > span {
+    padding: var(--spacer-2);
+    background: var(--color-bg);
+  }
+
+  .activity-widget__loading:empty {
+    display: none;
+  }
+
+  .activity-widget__tab:focus-visible {
+    outline: var(--accessibility-outline);
+    outline-offset: var(--accessibility-outline-offset);
+  }
+
+  @container (min-width: 400px) {
+    .activity-widget__toolbar {
+      min-block-size: var(--spacer-4);
+    }
+  }
+
+  @container (min-width: 600px) {
+    .activity-widget__viewport {
+      --activity-page-size: 6;
+      --activity-columns: 3;
+    }
+
+    .activity-widget__viewport[data-item-count='3'] {
+      --activity-rows: 1;
+    }
+
+    .activity-widget__item:nth-child(n + 5) {
+      display: block;
+    }
+
+    .activity-widget__item:nth-child(n + 7) {
+      display: none;
+    }
+
+    .activity-widget__pagination[data-page-size] {
+      display: none;
+    }
+
+    .activity-widget__pagination[data-page-size='6'] {
+      display: flex;
+    }
+  }
+
+  /*
+   * From 800px the grid is a single row of columns at least 180px wide with 16px gaps, so N columns
+   * fit from a container width of 196N - 16px. Explicit tiers keep the column count known to CSS.
+   */
+  @container (min-width: 800px) {
+    .activity-widget__viewport {
+      --activity-page-size: 4;
+      --activity-columns: 4;
+      --activity-rows: 1;
+      --activity-row-height: calc(var(--spacer-6) * 5 + var(--spacer-4));
+    }
+
+    .activity-widget__item:nth-child(n + 5) {
+      display: none;
+    }
+
+    .activity-widget__pagination[data-page-size] {
+      display: none;
+    }
+
+    .activity-widget__pagination[data-page-size='4'] {
+      display: flex;
+    }
+  }
+
+  @container (min-width: 964px) {
+    .activity-widget__viewport {
+      --activity-page-size: 5;
+      --activity-columns: 5;
+    }
+
+    .activity-widget__item:nth-child(n + 5) {
+      display: block;
+    }
+
+    .activity-widget__item:nth-child(n + 6) {
+      display: none;
+    }
+
+    .activity-widget__pagination[data-page-size] {
+      display: none;
+    }
+
+    .activity-widget__pagination[data-page-size='5'] {
+      display: flex;
+    }
+  }
+
+  @container (min-width: 1160px) {
+    .activity-widget__viewport {
+      --activity-page-size: 6;
+      --activity-columns: 6;
+    }
+
+    .activity-widget__item:nth-child(n + 5) {
+      display: block;
+    }
+
+    .activity-widget__item:nth-child(n + 7) {
+      display: none;
+    }
+
+    .activity-widget__pagination[data-page-size] {
+      display: none;
+    }
+
+    .activity-widget__pagination[data-page-size='6'] {
+      display: flex;
+    }
+  }
+
+  @container (min-width: 1356px) {
+    .activity-widget__viewport {
+      --activity-page-size: 7;
+      --activity-columns: 7;
+    }
+
+    .activity-widget__item:nth-child(n + 5) {
+      display: block;
+    }
+
+    .activity-widget__item:nth-child(n + 8) {
+      display: none;
+    }
+
+    .activity-widget__pagination[data-page-size] {
+      display: none;
+    }
+
+    .activity-widget__pagination[data-page-size='7'] {
+      display: flex;
+    }
+  }
+
+  @container (min-width: 1552px) {
+    .activity-widget__viewport {
+      --activity-page-size: 8;
+      --activity-columns: 8;
+    }
+
+    .activity-widget__item:nth-child(n + 5) {
+      display: block;
+    }
+
+    .activity-widget__item:nth-child(n + 9) {
+      display: none;
+    }
+
+    .activity-widget__pagination[data-page-size] {
+      display: none;
+    }
+
+    .activity-widget__pagination[data-page-size='8'] {
+      display: flex;
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+import type { WidgetServerProps } from 'payload';
+import React from 'react';
+type ActivityWidgetData = {
+    excludedCollections?: string[];
+};
+/**
+ * @internal - may change or be removed without a major version bump
+ */
+export declare function ActivityWidget({ permissions, req, widgetData, }: WidgetServerProps<{
+    data?: ActivityWidgetData;
+}>): Promise<React.JSX.Element>;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/widgets/Activity/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAkB,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAGhE,OAAO,KAAK,MAAM,OAAO,CAAA;AAWzB,KAAK,kBAAkB,GAAG;IACxB,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAA;CAC/B,CAAA;AAED;;GAEG;AACH,wBAAsB,cAAc,CAAC,EACnC,WAAW,EACX,GAAG,EACH,UAAU,GACX,EAAE,iBAAiB,CAAC;IAAE,IAAI,CAAC,EAAE,kBAAkB,CAAA;CAAE,CAAC,8BAqDlD"}