@payloadcms/ui 4.0.0-internal.7b031c8 → 4.0.0-internal.7b53b6d

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

@@ -0,0 +1,125 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useLayoutEffect, useRef } from 'react';
+import { ChevronIcon } from '../../../../icons/Chevron/index.js';
+import { useTranslation } from '../../../../providers/Translation/index.js';
+import { getDocumentPage } from '../../utils/cache.js';
+import { DOCUMENTS_BATCH_SIZE, PAGE_SIZES } from '../../utils/constants.js';
+import './index.css';
+export function Pagination({
+  consumeFocusRequest,
+  hasPinPlaceholder,
+  isDisabled,
+  labels,
+  listID,
+  offset,
+  onFocusTab,
+  onPageChange,
+  pageSize,
+  totalDocs
+}) {
+  const {
+    t
+  } = useTranslation();
+  const previousRef = useRef(null);
+  const nextRef = useRef(null);
+  // Before the CSS page size is known, render one pagination per page size and let CSS pick one.
+  const sizes = pageSize ? [pageSize] : PAGE_SIZES;
+  const {
+    currentPage,
+    totalPages
+  } = getDocumentPage({
+    cache: {
+      batches: {},
+      totalDocs
+    },
+    hasPinPlaceholder,
+    offset,
+    pageSize: pageSize ?? DOCUMENTS_BATCH_SIZE
+  });
+  useLayoutEffect(() => {
+    if (isDisabled || !consumeFocusRequest()) {
+      return;
+    }
+    // Keep focus on a control that is still enabled once the page changed.
+    if (totalPages === 1) {
+      onFocusTab();
+    } else if (currentPage === 1) {
+      nextRef.current?.focus();
+    } else if (currentPage === totalPages) {
+      previousRef.current?.focus();
+    }
+  }, [consumeFocusRequest, currentPage, isDisabled, onFocusTab, pageSize, totalPages]);
+  return sizes.map(size => {
+    const page = getDocumentPage({
+      cache: {
+        batches: {},
+        totalDocs
+      },
+      hasPinPlaceholder,
+      offset,
+      pageSize: size
+    });
+    if (page.totalPages <= 1) {
+      return null;
+    }
+    const changePage = ({
+      pageNumber
+    }) => {
+      if (!isDisabled) {
+        onPageChange({
+          offset: (pageNumber - 1) * size
+        });
+      }
+    };
+    return /*#__PURE__*/_jsxs("div", {
+      "aria-label": labels.pagination,
+      className: "activity-widget__pagination",
+      "data-page-size": pageSize ? undefined : size,
+      role: "group",
+      children: [/*#__PURE__*/_jsx("button", {
+        "aria-controls": listID,
+        "aria-disabled": isDisabled,
+        "aria-label": labels.previous,
+        className: "activity-widget__previous",
+        disabled: page.currentPage === 1,
+        onClick: () => changePage({
+          pageNumber: page.currentPage - 1
+        }),
+        ref: previousRef,
+        type: "button",
+        children: /*#__PURE__*/_jsx("span", {
+          "aria-hidden": "true",
+          children: /*#__PURE__*/_jsx(ChevronIcon, {
+            direction: "left"
+          })
+        })
+      }), /*#__PURE__*/_jsx("span", {
+        "aria-atomic": "true",
+        "aria-live": "polite",
+        className: "activity-widget__page-status",
+        children: t('dashboard:widgetPageCount', {
+          currentPage: page.currentPage,
+          totalPages: page.totalPages
+        })
+      }), /*#__PURE__*/_jsx("button", {
+        "aria-controls": listID,
+        "aria-disabled": isDisabled,
+        "aria-label": labels.next,
+        className: "activity-widget__next",
+        disabled: page.currentPage === page.totalPages,
+        onClick: () => changePage({
+          pageNumber: page.currentPage + 1
+        }),
+        ref: nextRef,
+        type: "button",
+        children: /*#__PURE__*/_jsx("span", {
+          "aria-hidden": "true",
+          children: /*#__PURE__*/_jsx(ChevronIcon, {
+            direction: "right"
+          })
+        })
+      })]
+    }, size);
+  });
+}
+//# sourceMappingURL=index.js.map

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,qBAmJA"}

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: initialPages?.pinned?.totalDocs ? 'pinned' : 'recents'
+  }));
+  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","pinned","totalDocs","previousInitialPages","setPreviousInitialPages","pageSize","windowSize","canAddPin","length","focusPinnedTab","current","focus","focusActiveTab","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","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>(() => ({\n    offset: 0,\n    tab: initialPages?.pinned?.totalDocs ? 'pinned' : 'recents',\n  }))\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":[]}