@payloadcms/ui 4.0.0-internal.4804abd → 4.0.0-internal.4c2ee12

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

@@ -0,0 +1,102 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
+import React, { useCallback, useId, useMemo } from 'react';
+import { RenderCustomComponent } from '../../../elements/RenderCustomComponent/index.js';
+import { CheckboxInput } from '../../../fields/Checkbox/Input.js';
+import { FieldDescription } from '../../../fields/FieldDescription/index.js';
+import { FieldLabel } from '../../../fields/FieldLabel/index.js';
+import { useField } from '../../../forms/useField/index.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
+import './index.css';
+const baseClass = 'recently-viewed-collections-field';
+const normalizeOption = option => typeof option === 'string' ? {
+  label: option,
+  value: option
+} : option;
+/**
+ * Widget config field shared by collection checklists. The value is stored as an exclusion list
+ * (`excludedCollections`), but the user sees an inclusion filter: every collection is checked by
+ * default and unchecking one adds it to the stored exclusions. Storing exclusions means collections
+ * added later are visible by default.
+ */
+export const RecentlyViewedCollectionsField = ({
+  field,
+  path: pathFromProps,
+  readOnly
+}) => {
+  const {
+    admin: {
+      description
+    } = {},
+    label
+  } = field;
+  const {
+    customComponents: {
+      Description
+    } = {},
+    path,
+    setValue,
+    value
+  } = useField({
+    potentiallyStalePath: pathFromProps
+  });
+  const hasDescription = Boolean(Description || description);
+  const {
+    i18n
+  } = useTranslation();
+  const labelID = useId();
+  const descriptionID = useId();
+  const excludedSlugs = useMemo(() => new Set(Array.isArray(value) ? value : []), [value]);
+  const options = useMemo(() => (field.options ?? []).map(normalizeOption), [field.options]);
+  const toggleCollection = useCallback((slug, isIncluded) => {
+    const nextExcluded = new Set(excludedSlugs);
+    if (isIncluded) {
+      nextExcluded.delete(slug);
+    } else {
+      nextExcluded.add(slug);
+    }
+    setValue(Array.from(nextExcluded));
+  }, [excludedSlugs, setValue]);
+  return /*#__PURE__*/_jsxs("div", {
+    "aria-describedby": hasDescription ? descriptionID : undefined,
+    "aria-labelledby": labelID,
+    className: baseClass,
+    role: "group",
+    children: [/*#__PURE__*/_jsx("span", {
+      id: labelID,
+      children: /*#__PURE__*/_jsx(FieldLabel, {
+        as: "span",
+        label: label,
+        path: path
+      })
+    }), /*#__PURE__*/_jsx("ul", {
+      className: `${baseClass}__list`,
+      children: options.map(option => {
+        const isIncluded_0 = !excludedSlugs.has(option.value);
+        const resolvedLabel = getTranslation(option.label, i18n);
+        return /*#__PURE__*/_jsx("li", {
+          className: `${baseClass}__option`,
+          children: /*#__PURE__*/_jsx(CheckboxInput, {
+            checked: isIncluded_0,
+            label: typeof resolvedLabel === 'string' ? resolvedLabel : option.value,
+            name: `${path}__${option.value}`,
+            onToggle: event => toggleCollection(option.value, event.target.checked),
+            readOnly: readOnly
+          })
+        }, option.value);
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      id: descriptionID,
+      children: /*#__PURE__*/_jsx(RenderCustomComponent, {
+        CustomComponent: Description,
+        Fallback: /*#__PURE__*/_jsx(FieldDescription, {
+          description: description,
+          path: path
+        })
+      })
+    })]
+  });
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["getTranslation","React","useCallback","useId","useMemo","RenderCustomComponent","CheckboxInput","FieldDescription","FieldLabel","useField","useTranslation","baseClass","normalizeOption","option","label","value","RecentlyViewedCollectionsField","field","path","pathFromProps","readOnly","admin","description","customComponents","Description","setValue","potentiallyStalePath","hasDescription","Boolean","i18n","labelID","descriptionID","excludedSlugs","Set","Array","isArray","options","map","toggleCollection","slug","isIncluded","nextExcluded","delete","add","from","_jsxs","undefined","className","role","_jsx","id","as","has","resolvedLabel","checked","name","onToggle","event","target","CustomComponent","Fallback"],"sources":["../../../../src/widgets/RecentlyViewed/CollectionsField/index.tsx"],"sourcesContent":["'use client'\nimport type { Option, OptionObject, SelectFieldClientProps } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useCallback, useId, useMemo } from 'react'\n\nimport { RenderCustomComponent } from '../../../elements/RenderCustomComponent/index.js'\nimport { CheckboxInput } from '../../../fields/Checkbox/Input.js'\nimport { FieldDescription } from '../../../fields/FieldDescription/index.js'\nimport { FieldLabel } from '../../../fields/FieldLabel/index.js'\nimport { useField } from '../../../forms/useField/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'recently-viewed-collections-field'\n\nconst normalizeOption = (option: Option): OptionObject =>\n  typeof option === 'string' ? { label: option, value: option } : option\n\n/**\n * Widget config field shared by collection checklists. The value is stored as an exclusion list\n * (`excludedCollections`), but the user sees an inclusion filter: every collection is checked by\n * default and unchecking one adds it to the stored exclusions. Storing exclusions means collections\n * added later are visible by default.\n */\nexport const RecentlyViewedCollectionsField: React.FC<SelectFieldClientProps> = ({\n  field,\n  path: pathFromProps,\n  readOnly,\n}) => {\n  const { admin: { description } = {}, label } = field\n  const {\n    customComponents: { Description } = {},\n    path,\n    setValue,\n    value,\n  } = useField<string[]>({ potentiallyStalePath: pathFromProps })\n  const hasDescription = Boolean(Description || description)\n  const { i18n } = useTranslation()\n  const labelID = useId()\n  const descriptionID = useId()\n\n  const excludedSlugs = useMemo(() => new Set<string>(Array.isArray(value) ? value : []), [value])\n\n  const options = useMemo(() => (field.options ?? []).map(normalizeOption), [field.options])\n\n  const toggleCollection = useCallback(\n    (slug: string, isIncluded: boolean) => {\n      const nextExcluded = new Set(excludedSlugs)\n\n      if (isIncluded) {\n        nextExcluded.delete(slug)\n      } else {\n        nextExcluded.add(slug)\n      }\n\n      setValue(Array.from(nextExcluded))\n    },\n    [excludedSlugs, setValue],\n  )\n\n  return (\n    <div\n      aria-describedby={hasDescription ? descriptionID : undefined}\n      aria-labelledby={labelID}\n      className={baseClass}\n      role=\"group\"\n    >\n      <span id={labelID}>\n        <FieldLabel as=\"span\" label={label} path={path} />\n      </span>\n      <ul className={`${baseClass}__list`}>\n        {options.map((option) => {\n          const isIncluded = !excludedSlugs.has(option.value)\n          const resolvedLabel = getTranslation(option.label, i18n)\n\n          return (\n            <li className={`${baseClass}__option`} key={option.value}>\n              <CheckboxInput\n                checked={isIncluded}\n                label={typeof resolvedLabel === 'string' ? resolvedLabel : option.value}\n                name={`${path}__${option.value}`}\n                onToggle={(event) => toggleCollection(option.value, event.target.checked)}\n                readOnly={readOnly}\n              />\n            </li>\n          )\n        })}\n      </ul>\n      <div id={descriptionID}>\n        <RenderCustomComponent\n          CustomComponent={Description}\n          Fallback={<FieldDescription description={description} path={path} />}\n        />\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,73 @@
+@layer payload-default {
+  .recents-widget__add-pin {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacer-2);
+    width: 100%;
+    height: 100%;
+    min-height: calc(var(--spacer-6) * 5);
+    padding: var(--spacer-3);
+    border: var(--stroke-width-small) dashed var(--color-border);
+    border-radius: var(--radius-large);
+    background: var(--color-bg);
+    color: var(--color-text);
+    font-family: var(--text-body-medium-strong-font-family);
+    font-size: var(--text-body-medium-strong-font-size);
+    font-weight: var(--text-body-medium-strong-font-weight);
+    line-height: var(--text-body-medium-strong-line-height);
+    text-align: center;
+    cursor: pointer;
+  }
+
+  .recents-widget__add-pin:hover {
+    background: var(--color-bg-secondary);
+  }
+
+  .recents-widget__add-pin:focus-visible {
+    outline: var(--accessibility-outline);
+    outline-offset: var(--accessibility-outline-offset);
+  }
+
+  .recents-widget__add-pin[aria-disabled='true'] {
+    cursor: progress;
+  }
+
+  .recents-widget__add-pin--empty {
+    display: inline-flex;
+    width: auto;
+    height: auto;
+    min-height: var(--spacer-4);
+    padding: var(--spacer-1) var(--spacer-2);
+    border: 0;
+    border-radius: var(--radius-medium);
+    background: transparent;
+  }
+
+  .recents-widget__add-pin--empty:hover {
+    background: var(--color-bg-transparent-hover);
+  }
+
+  .recents-widget__add-pin-label {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-1);
+  }
+
+  .recents-widget__add-pin-icon {
+    display: flex;
+  }
+
+  .recents-widget__pin-picker .sort-column__label,
+  .recents-widget__pin-picker .page-controls__page-info,
+  .recents-widget__pin-picker .per-page__label {
+    color: var(--recents-text-secondary);
+  }
+
+  .recents-widget__pin-picker .sort-column__button {
+    min-width: var(--spacer-4);
+    min-height: var(--spacer-4);
+    color: var(--color-icon-secondary);
+  }
+}

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { PinnedItem } from '../recents.js';
+import './index.css';
+export declare function PinDocumentPicker({ collectionSlugs, isDisabled, isEmpty, labels, onError, onSelect, pinsURL, }: {
+    collectionSlugs: string[];
+    isDisabled: boolean;
+    isEmpty?: boolean;
+    labels: {
+        addPin: string;
+        pinnedEmpty: string;
+        pinnedEmptyDescription: string;
+    };
+    onError: () => void;
+    onSelect: (args: {
+        document: PinnedItem;
+    }) => void;
+    pinsURL: string;
+}): React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/widgets/RecentlyViewed/PinDocumentPicker/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmC,MAAM,OAAO,CAAA;AAGvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAM/C,OAAO,aAAa,CAAA;AAEpB,wBAAgB,iBAAiB,CAAC,EAChC,eAAe,EACf,UAAU,EACV,OAAe,EACf,MAAM,EACN,OAAO,EACP,QAAQ,EACR,OAAO,GACR,EAAE;IACD,eAAe,EAAE,MAAM,EAAE,CAAA;IACzB,UAAU,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,MAAM,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAC;QAAC,sBAAsB,EAAE,MAAM,CAAA;KAAE,CAAA;IAC/E,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE;QAAE,QAAQ,EAAE,UAAU,CAAA;KAAE,KAAK,IAAI,CAAA;IAClD,OAAO,EAAE,MAAM,CAAA;CAChB,qBAmGA"}

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

@@ -0,0 +1,122 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useId, useMemo, useState } from 'react';
+import { useListDrawer } from '../../../elements/ListDrawer/index.js';
+import { PinIcon } from '../../../icons/Pin/index.js';
+import { PlusIcon } from '../../../icons/Plus/index.js';
+import { readPinnedPreferences } from '../pinnedPreferences.js';
+import './index.css';
+export function PinDocumentPicker({
+  collectionSlugs,
+  isDisabled,
+  isEmpty = false,
+  labels,
+  onError,
+  onSelect,
+  pinsURL
+}) {
+  const emptyStateID = useId();
+  const [filterOptions, setFilterOptions] = useState({});
+  const [isPreparing, setIsPreparing] = useState(false);
+  const drawerOptions = useMemo(() => ({
+    collectionSlugs,
+    filterOptions
+  }), [collectionSlugs, filterOptions]);
+  const [ListDrawer,, {
+    closeDrawer,
+    isDrawerOpen,
+    openDrawer
+  }] = useListDrawer(drawerOptions);
+  const handleSelect = ({
+    collectionSlug,
+    doc
+  }) => {
+    closeDrawer();
+    onSelect({
+      document: {
+        id: doc.id,
+        collectionSlug
+      }
+    });
+  };
+  const prepareDrawer = async () => {
+    if (isDisabled || isPreparing) {
+      return;
+    }
+    setIsPreparing(true);
+    try {
+      const pins = await readPinnedPreferences({
+        url: pinsURL
+      });
+      const idsByCollection = new Map();
+      for (const document of pins) {
+        const ids = idsByCollection.get(document.collectionSlug) ?? [];
+        ids.push(document.id);
+        idsByCollection.set(document.collectionSlug, ids);
+      }
+      setFilterOptions(Object.fromEntries(collectionSlugs.map(slug => {
+        const ids_0 = idsByCollection.get(slug);
+        return [slug, ids_0?.length ? {
+          id: {
+            not_in: ids_0
+          }
+        } : true];
+      })));
+      openDrawer();
+    } catch {
+      onError();
+    } finally {
+      setIsPreparing(false);
+    }
+  };
+  const addPinButton = /*#__PURE__*/_jsx("button", {
+    "aria-busy": isPreparing,
+    "aria-describedby": isEmpty ? emptyStateID : undefined,
+    "aria-disabled": isDisabled || isPreparing,
+    "aria-expanded": isDrawerOpen,
+    "aria-haspopup": "dialog",
+    "aria-label": labels.addPin,
+    className: `recents-widget__add-pin${isEmpty ? ' recents-widget__add-pin--empty' : ''}`,
+    onClick: () => void prepareDrawer(),
+    type: "button",
+    children: /*#__PURE__*/_jsxs("span", {
+      className: "recents-widget__add-pin-label",
+      children: [/*#__PURE__*/_jsx("span", {
+        "aria-hidden": "true",
+        className: "recents-widget__add-pin-icon",
+        children: /*#__PURE__*/_jsx(PlusIcon, {})
+      }), /*#__PURE__*/_jsx("span", {
+        children: labels.addPin
+      })]
+    })
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [isEmpty ? /*#__PURE__*/_jsxs("div", {
+      className: "recents-widget__empty",
+      children: [/*#__PURE__*/_jsx("span", {
+        "aria-hidden": "true",
+        className: "recents-widget__empty-icon recents-widget__empty-icon--pinned",
+        children: /*#__PURE__*/_jsx(PinIcon, {})
+      }), /*#__PURE__*/_jsxs("span", {
+        className: "recents-widget__empty-text",
+        id: emptyStateID,
+        children: [/*#__PURE__*/_jsx("span", {
+          className: "recents-widget__empty-title",
+          children: labels.pinnedEmpty
+        }), /*#__PURE__*/_jsx("span", {
+          className: "recents-widget__empty-description",
+          children: labels.pinnedEmptyDescription
+        })]
+      }), addPinButton]
+    }) : addPinButton, /*#__PURE__*/_jsx(ListDrawer, {
+      allowCreate: false,
+      className: "recents-widget__pin-picker",
+      disableQueryPresets: true,
+      enableRowSelections: false,
+      onSelect: handleSelect,
+      overrideEntityVisibility: false
+    })]
+  });
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useId","useMemo","useState","useListDrawer","PinIcon","PlusIcon","readPinnedPreferences","PinDocumentPicker","collectionSlugs","isDisabled","isEmpty","labels","onError","onSelect","pinsURL","emptyStateID","filterOptions","setFilterOptions","isPreparing","setIsPreparing","drawerOptions","ListDrawer","closeDrawer","isDrawerOpen","openDrawer","handleSelect","collectionSlug","doc","document","id","prepareDrawer","pins","url","idsByCollection","Map","ids","get","push","set","Object","fromEntries","map","slug","length","not_in","addPinButton","_jsx","undefined","addPin","className","onClick","type","_jsxs","_Fragment","pinnedEmpty","pinnedEmptyDescription","allowCreate","disableQueryPresets","enableRowSelections","overrideEntityVisibility"],"sources":["../../../../src/widgets/RecentlyViewed/PinDocumentPicker/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FilterOptionsResult } from 'payload'\n\nimport React, { useId, useMemo, useState } from 'react'\n\nimport type { ListDrawerProps } from '../../../elements/ListDrawer/types.js'\nimport type { PinnedItem } from '../recents.js'\n\nimport { useListDrawer } from '../../../elements/ListDrawer/index.js'\nimport { PinIcon } from '../../../icons/Pin/index.js'\nimport { PlusIcon } from '../../../icons/Plus/index.js'\nimport { readPinnedPreferences } from '../pinnedPreferences.js'\nimport './index.css'\n\nexport function PinDocumentPicker({\n  collectionSlugs,\n  isDisabled,\n  isEmpty = false,\n  labels,\n  onError,\n  onSelect,\n  pinsURL,\n}: {\n  collectionSlugs: string[]\n  isDisabled: boolean\n  isEmpty?: boolean\n  labels: { addPin: string; pinnedEmpty: string; pinnedEmptyDescription: string }\n  onError: () => void\n  onSelect: (args: { document: PinnedItem }) => void\n  pinsURL: string\n}) {\n  const emptyStateID = useId()\n  const [filterOptions, setFilterOptions] = useState<FilterOptionsResult>({})\n  const [isPreparing, setIsPreparing] = useState(false)\n  const drawerOptions = useMemo(\n    () => ({ collectionSlugs, filterOptions }),\n    [collectionSlugs, filterOptions],\n  )\n  const [ListDrawer, , { closeDrawer, isDrawerOpen, openDrawer }] = useListDrawer(drawerOptions)\n  const handleSelect: ListDrawerProps['onSelect'] = ({ collectionSlug, doc }) => {\n    closeDrawer()\n    onSelect({ document: { id: doc.id, collectionSlug } })\n  }\n\n  const prepareDrawer = async () => {\n    if (isDisabled || isPreparing) {\n      return\n    }\n    setIsPreparing(true)\n\n    try {\n      const pins = await readPinnedPreferences({ url: pinsURL })\n      const idsByCollection = new Map<string, (number | string)[]>()\n\n      for (const document of pins) {\n        const ids = idsByCollection.get(document.collectionSlug) ?? []\n\n        ids.push(document.id)\n        idsByCollection.set(document.collectionSlug, ids)\n      }\n      setFilterOptions(\n        Object.fromEntries(\n          collectionSlugs.map((slug) => {\n            const ids = idsByCollection.get(slug)\n\n            return [slug, ids?.length ? { id: { not_in: ids } } : true]\n          }),\n        ),\n      )\n      openDrawer()\n    } catch {\n      onError()\n    } finally {\n      setIsPreparing(false)\n    }\n  }\n\n  const addPinButton = (\n    <button\n      aria-busy={isPreparing}\n      aria-describedby={isEmpty ? emptyStateID : undefined}\n      aria-disabled={isDisabled || isPreparing}\n      aria-expanded={isDrawerOpen}\n      aria-haspopup=\"dialog\"\n      aria-label={labels.addPin}\n      className={`recents-widget__add-pin${isEmpty ? ' recents-widget__add-pin--empty' : ''}`}\n      onClick={() => void prepareDrawer()}\n      type=\"button\"\n    >\n      <span className=\"recents-widget__add-pin-label\">\n        <span aria-hidden=\"true\" className=\"recents-widget__add-pin-icon\">\n          <PlusIcon />\n        </span>\n        <span>{labels.addPin}</span>\n      </span>\n    </button>\n  )\n\n  return (\n    <>\n      {isEmpty ? (\n        <div className=\"recents-widget__empty\">\n          <span\n            aria-hidden=\"true\"\n            className=\"recents-widget__empty-icon recents-widget__empty-icon--pinned\"\n          >\n            <PinIcon />\n          </span>\n          <span className=\"recents-widget__empty-text\" id={emptyStateID}>\n            <span className=\"recents-widget__empty-title\">{labels.pinnedEmpty}</span>\n            <span className=\"recents-widget__empty-description\">\n              {labels.pinnedEmptyDescription}\n            </span>\n          </span>\n          {addPinButton}\n        </div>\n      ) : (\n        addPinButton\n      )}\n      <ListDrawer\n        allowCreate={false}\n        className=\"recents-widget__pin-picker\"\n        disableQueryPresets\n        enableRowSelections={false}\n        onSelect={handleSelect}\n        overrideEntityVisibility={false}\n      />\n    </>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,20 @@
+import type { PayloadRequest, ServerFunction } from 'payload';
+import type { RecentDocument } from './index.client.js';
+export type DocumentsTab = 'pinned' | 'recents';
+export type DocumentsPageArgs = {
+    excludedCollections?: string[];
+    limit: number;
+    page: number;
+    shouldIncludePinPlaceholder?: boolean;
+    tab: DocumentsTab;
+};
+export type DocumentsPage = {
+    items: RecentDocument[];
+    page: number;
+    totalDocs: number;
+};
+export declare const getDashboardDocumentsHandler: ServerFunction<DocumentsPageArgs, Promise<DocumentsPage>>;
+export declare function getDashboardDocuments({ excludedCollections, limit, page, req, shouldIncludePinPlaceholder, tab, }: {
+    req: PayloadRequest;
+} & DocumentsPageArgs): Promise<DocumentsPage>;
+//# sourceMappingURL=getDocuments.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"getDocuments.d.ts","sourceRoot":"","sources":["../../../src/widgets/RecentlyViewed/getDocuments.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAS,MAAM,SAAS,CAAA;AAMpE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAWvD,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,CAAA;AAC/C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,2BAA2B,CAAC,EAAE,OAAO,CAAA;IACrC,GAAG,EAAE,YAAY,CAAA;CAClB,CAAA;AACD,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,cAAc,EAAE,CAAA;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAKD,eAAO,MAAM,4BAA4B,EAAE,cAAc,CACvD,iBAAiB,EACjB,OAAO,CAAC,aAAa,CAAC,CACC,CAAA;AAEzB,wBAAsB,qBAAqB,CAAC,EAC1C,mBAAwB,EACxB,KAAK,EACL,IAAI,EACJ,GAAG,EACH,2BAAmC,EACnC,GAAG,GACJ,EAAE;IAAE,GAAG,EAAE,cAAc,CAAA;CAAE,GAAG,iBAAiB,GAAG,OAAO,CAAC,aAAa,CAAC,CA6DtE"}

package/dist/widgets/RecentlyViewed/getDocuments.js

@@ -0,0 +1,250 @@
+import { getTranslation } from '@payloadcms/translations';
+import { UnauthorizedError } from 'payload';
+import { formatAdminURL, PREFERENCE_KEYS } from 'payload/shared';
+import { formatRelativeDate, getRelativeTimeFormat } from '../../utilities/formatRelativeDate.js';
+import { getDocumentThumbnail } from '../../utilities/getDocumentThumbnail.js';
+import { getDocumentThumbnailPopulate } from '../../utilities/getDocumentThumbnailPopulate.js';
+import { getDocumentThumbnailSelect } from '../../utilities/getDocumentThumbnailSelect.js';
+import { enrichDocsWithVersionStatus } from '../../views/List/enrichDocsWithVersionStatus.js';
+import { getPinnedItems } from './pinnedPreferences.js';
+import { documentKey, getValueByPath } from './recents.js';
+export const getDashboardDocumentsHandler = getDashboardDocuments;
+export async function getDashboardDocuments({
+  excludedCollections = [],
+  limit,
+  page,
+  req,
+  shouldIncludePinPlaceholder = false,
+  tab
+}) {
+  if (!req.user) {
+    throw new UnauthorizedError(req.t);
+  }
+  if (![1, 2, 4].includes(limit) || !Number.isSafeInteger(page) || page < 1) {
+    throw new Error('Invalid dashboard page');
+  }
+  if (tab !== 'pinned' && tab !== 'recents') {
+    throw new Error('Invalid dashboard tab');
+  }
+  const key = tab === 'pinned' ? PREFERENCE_KEYS.PINNED_DOCUMENTS : PREFERENCE_KEYS.RECENTLY_VIEWED;
+  const preference = await req.payload.find({
+    collection: 'payload-preferences',
+    depth: 0,
+    limit: 1,
+    overrideAccess: false,
+    req,
+    user: req.user,
+    where: {
+      and: [ownerWhere({
+        req
+      }), {
+        key: {
+          equals: key
+        }
+      }]
+    }
+  });
+  const excluded = new Set(tab === 'recents' ? excludedCollections : []);
+  const storedReferences = getPinnedItems({
+    value: preference.docs[0]?.value
+  }).filter(({
+    collectionSlug
+  }) => !excluded.has(collectionSlug) && req.payload.collections[collectionSlug]);
+  const availableReferences = await getAvailableReferences({
+    references: storedReferences,
+    req
+  });
+  const totalDocs = availableReferences.length;
+  const lastPage = Math.max(1, Math.ceil((totalDocs + Number(tab === 'pinned' && shouldIncludePinPlaceholder)) / limit));
+  page = Math.min(page, lastPage);
+  const references = availableReferences.slice((page - 1) * limit, page * limit);
+  const documents = await loadDocuments({
+    references,
+    req
+  });
+  const items = references.map(reference => {
+    const document = documents.get(documentKey(reference));
+    if (!document || tab !== 'recents') {
+      return document;
+    }
+    const viewedAt = reference.viewedAt;
+    return {
+      ...document,
+      dateLabel: viewedAt ? formatRelativeDate({
+        relativeTimeFormat: getRelativeTimeFormat(req.i18n.language),
+        value: viewedAt
+      }) : undefined,
+      dateTime: viewedAt,
+      viewedAt
+    };
+  }).filter(item => Boolean(item));
+  return {
+    items,
+    page,
+    totalDocs
+  };
+}
+/** Check identities without populating documents, so deleted or forbidden references do not create empty pages. */
+async function getAvailableReferences({
+  references,
+  req
+}) {
+  const available = new Set();
+  await Promise.all([...groupReferenceIDs({
+    references
+  }).entries()].map(async ([collectionSlug, ids]) => {
+    const result = await req.payload.find({
+      collection: collectionSlug,
+      depth: 0,
+      disableErrors: true,
+      draft: true,
+      limit: ids.length,
+      overrideAccess: false,
+      pagination: false,
+      req,
+      select: {
+        id: true
+      },
+      sort: 'id',
+      user: req.user,
+      where: {
+        id: {
+          in: ids
+        }
+      }
+    });
+    for (const doc of result.docs) {
+      available.add(documentKey({
+        id: doc.id,
+        collectionSlug
+      }));
+    }
+  }));
+  return references.filter(reference => available.has(documentKey(reference)));
+}
+function groupReferenceIDs({
+  references
+}) {
+  const idsByCollection = new Map();
+  for (const reference of references) {
+    const ids = idsByCollection.get(reference.collectionSlug) ?? [];
+    ids.push(reference.id);
+    idsByCollection.set(reference.collectionSlug, ids);
+  }
+  return idsByCollection;
+}
+async function loadDocuments({
+  references,
+  req
+}) {
+  const documents = new Map();
+  await Promise.all([...groupReferenceIDs({
+    references
+  }).entries()].map(async ([collectionSlug, ids]) => {
+    const config = req.payload.collections[collectionSlug].config;
+    const select = getDocumentThumbnailSelect({
+      collectionConfig: config,
+      select: {
+        id: true,
+        [(config.admin.useAsTitle || 'id').split('.')[0]]: true,
+        _status: true,
+        updatedAt: true,
+        ...(config.admin.useAsThumbnail ? {
+          [config.admin.useAsThumbnail]: true
+        } : {}),
+        ...(config.upload ? {
+          width: true
+        } : {})
+      }
+    });
+    const result = await req.payload.find({
+      collection: collectionSlug,
+      depth: 1,
+      disableErrors: true,
+      draft: true,
+      limit: ids.length,
+      overrideAccess: false,
+      populate: getDocumentThumbnailPopulate({
+        collectionConfig: config,
+        collections: req.payload.config.collections
+      }),
+      req,
+      select,
+      sort: 'id',
+      user: req.user,
+      where: {
+        id: {
+          in: ids
+        }
+      }
+    });
+    const enriched = await enrichDocsWithVersionStatus({
+      collectionConfig: config,
+      data: result,
+      req
+    });
+    for (const doc of enriched.docs) {
+      const item = enrichDocument({
+        collectionSlug,
+        doc,
+        req
+      });
+      documents.set(documentKey(item), item);
+    }
+  }));
+  return documents;
+}
+function ownerWhere({
+  req
+}) {
+  return {
+    and: [{
+      'user.relationTo': {
+        equals: req.user.collection
+      }
+    }, {
+      'user.value': {
+        equals: req.user.id
+      }
+    }]
+  };
+}
+function enrichDocument({
+  collectionSlug,
+  doc,
+  req
+}) {
+  const {
+    i18n,
+    payload
+  } = req;
+  const config = payload.collections[collectionSlug].config;
+  const rawTitle = getValueByPath({
+    object: doc,
+    path: config.admin?.useAsTitle || 'id'
+  });
+  const status = doc._displayStatus || doc._status;
+  return {
+    id: doc.id,
+    collectionSlug,
+    dateLabel: doc.updatedAt ? formatRelativeDate({
+      relativeTimeFormat: getRelativeTimeFormat(i18n.language),
+      value: doc.updatedAt
+    }) : undefined,
+    dateTime: doc.updatedAt,
+    href: formatAdminURL({
+      adminRoute: payload.config.routes.admin,
+      path: `/collections/${collectionSlug}/${encodeURIComponent(String(doc.id))}`
+    }),
+    isDraft: status === 'draft',
+    statusLabel: status === 'draft' ? i18n.t('version:draft') : status === 'changed' ? i18n.t('version:changed') : status === 'published' ? i18n.t('version:published') : undefined,
+    thumbnailURL: getDocumentThumbnail({
+      doc,
+      useAsThumbnail: config.admin?.useAsThumbnail
+    }),
+    title: typeof rawTitle === 'string' && rawTitle ? rawTitle : String(doc.id),
+    typeLabel: getTranslation(config.labels.plural, i18n),
+    updatedAt: doc.updatedAt
+  };
+}
+//# sourceMappingURL=getDocuments.js.map