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

package/dist/views/HierarchyList/HierarchyCards/DocumentCard/index.js

@@ -0,0 +1,182 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import { Link } from '../../../../elements/Link/index.js';
+import { Locked } from '../../../../elements/Locked/index.js';
+import { Thumbnail } from '../../../../elements/Thumbnail/index.js';
+import { useConfig } from '../../../../providers/Config/index.js';
+import { useTranslation } from '../../../../providers/Translation/index.js';
+import { formatRelativeDate } from '../../../../utilities/formatRelativeDate.js';
+import { getThumbnailSrc } from '../getThumbnailSrc.js';
+import './index.css';
+const baseClass = 'hierarchy-document-card';
+/**
+ * Mirrors the labels and modifier classes of the table `StatusCell` so cards and rows read the
+ * same. Unknown statuses fall back to the raw value with the neutral `draft` treatment.
+ */
+const statusLabels = {
+  changed: 'Changed',
+  draft: 'Draft',
+  previouslyPublished: 'Previously Published',
+  published: 'Published'
+};
+const statusModifiers = {
+  changed: 'changed',
+  draft: 'draft',
+  previouslyPublished: 'previously-published',
+  published: 'published'
+};
+export const DocumentCard = ({
+  children,
+  collectionSlug,
+  doc,
+  href,
+  isSelected = false,
+  lockedUser,
+  showType = false,
+  typeLabel,
+  updatedAt
+}) => {
+  const {
+    getEntityConfig
+  } = useConfig();
+  const {
+    i18n
+  } = useTranslation();
+  const collectionConfig = getEntityConfig({
+    collectionSlug
+  });
+  const uploadConfig = collectionConfig?.upload;
+  const isPreviewAllowed = uploadConfig?.displayPreview ?? true;
+  const hasOwnFile = typeof doc.filename === 'string' && doc.filename.length > 0;
+  const isOwnUpload = Boolean(uploadConfig) && isPreviewAllowed && hasOwnFile;
+  // Falls back to the first field of type `upload` on the collection (resolved server-side), so a
+  // card can surface a thumbnail even when the collection itself isn't upload-enabled.
+  const useAsThumbnail = collectionConfig?.admin?.useAsThumbnail;
+  const relatedUploadDoc = !isOwnUpload && useAsThumbnail && typeof doc[useAsThumbnail] === 'object' && doc[useAsThumbnail] ? doc[useAsThumbnail] : undefined;
+  const thumbnailDoc = isOwnUpload ? doc : relatedUploadDoc;
+  const thumbnailSrc = thumbnailDoc ? getThumbnailSrc({
+    doc: thumbnailDoc
+  }) : undefined;
+  const hasThumbnailImage = Boolean(thumbnailSrc);
+  const title = getDocTitle({
+    doc,
+    titleField: collectionConfig?.admin?.useAsTitle || 'id'
+  });
+  const status = getDocStatus({
+    doc
+  });
+  const hasTypePill = showType && Boolean(typeLabel);
+  // Creating the formatter is expensive, so build one per language rather than one per render.
+  const relativeTimeFormat = useMemo(() => getLongRelativeTimeFormat(i18n.language), [i18n.language]);
+  const updatedLabel = useMemo(() => updatedAt ? formatRelativeDate({
+    relativeTimeFormat,
+    value: updatedAt
+  }) : undefined, [relativeTimeFormat, updatedAt]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: [baseClass,
+    // The corner slot holds the lock indicator, and content below it must reserve space for it.
+    lockedUser && `${baseClass}--has-corner-slot`, isSelected && `${baseClass}--selected`].filter(Boolean).join(' '),
+    "data-selected": isSelected ? 'true' : undefined,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__thumbnail-wrap`,
+      children: [hasThumbnailImage && /*#__PURE__*/_jsx(Thumbnail, {
+        className: `${baseClass}__thumbnail`,
+        collectionSlug: isOwnUpload ? collectionConfig?.slug : undefined,
+        doc: thumbnailDoc,
+        fileSrc: thumbnailSrc,
+        imageCacheTag: isOwnUpload && uploadConfig?.cacheTags ? doc.updatedAt : undefined,
+        size: "expand",
+        uploadConfig: isOwnUpload ? uploadConfig : undefined
+      }), hasTypePill && /*#__PURE__*/_jsx("span", {
+        className: `${baseClass}__type`,
+        children: typeLabel
+      })]
+    }), /*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__content`,
+      children: [/*#__PURE__*/_jsx(Link, {
+        className: `${baseClass}__link`,
+        draggable: false,
+        href: href,
+        children: /*#__PURE__*/_jsx("span", {
+          className: `${baseClass}__title`,
+          title: title,
+          children: title
+        })
+      }), /*#__PURE__*/_jsxs("div", {
+        className: `${baseClass}__properties`,
+        children: [updatedLabel && /*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}__property`,
+          children: [/*#__PURE__*/_jsx("span", {
+            className: `${baseClass}__property-label`,
+            children: "Updated"
+          }), /*#__PURE__*/_jsx("time", {
+            className: `${baseClass}__property-value`,
+            dateTime: updatedAt,
+            children: updatedLabel
+          })]
+        }), status && /*#__PURE__*/_jsx("span", {
+          className: `${baseClass}__status ${baseClass}__status--${statusModifiers[status] || 'draft'}`,
+          children: statusLabels[status] || status
+        }), children ? /*#__PURE__*/_jsx("div", {
+          className: `${baseClass}__extra`,
+          children: children
+        }) : null]
+      })]
+    }), lockedUser && /*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__corner-slot`,
+      children: /*#__PURE__*/_jsx(Locked, {
+        user: lockedUser
+      })
+    }), isSelected && !lockedUser && /*#__PURE__*/_jsx("span", {
+      className: "sr-only",
+      children: "Selected"
+    })]
+  });
+};
+/**
+ * Cards spell the unit out ("2 days ago") per the design, whereas the shared
+ * `getRelativeTimeFormat` helper is deliberately `narrow` ("2d ago") for the dense dashboard
+ * widgets. Falls back to English on locales Intl does not recognise.
+ */
+function getLongRelativeTimeFormat(language) {
+  try {
+    return new Intl.RelativeTimeFormat(language, {
+      numeric: 'auto',
+      style: 'long'
+    });
+  } catch {
+    return new Intl.RelativeTimeFormat('en', {
+      numeric: 'auto',
+      style: 'long'
+    });
+  }
+}
+function getDocTitle({
+  doc,
+  titleField
+}) {
+  const rawTitle = doc[titleField];
+  if (typeof rawTitle === 'string' || typeof rawTitle === 'number') {
+    return String(rawTitle);
+  }
+  const {
+    id
+  } = doc;
+  if (typeof id === 'string' || typeof id === 'number') {
+    return String(id);
+  }
+  return '';
+}
+/**
+ * Prefers `_displayStatus` because the list view enriches docs with it to surface `changed`,
+ * falling back to the persisted `_status`.
+ */
+function getDocStatus({
+  doc
+}) {
+  const rawStatus = doc._displayStatus ?? doc._status;
+  return typeof rawStatus === 'string' && rawStatus.length > 0 ? rawStatus : undefined;
+}
+//# sourceMappingURL=index.js.map

package/dist/views/HierarchyList/HierarchyCards/DocumentCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useMemo","Link","Locked","Thumbnail","useConfig","useTranslation","formatRelativeDate","getThumbnailSrc","baseClass","statusLabels","changed","draft","previouslyPublished","published","statusModifiers","DocumentCard","children","collectionSlug","doc","href","isSelected","lockedUser","showType","typeLabel","updatedAt","getEntityConfig","i18n","collectionConfig","uploadConfig","upload","isPreviewAllowed","displayPreview","hasOwnFile","filename","length","isOwnUpload","Boolean","useAsThumbnail","admin","relatedUploadDoc","undefined","thumbnailDoc","thumbnailSrc","hasThumbnailImage","title","getDocTitle","titleField","useAsTitle","status","getDocStatus","hasTypePill","relativeTimeFormat","getLongRelativeTimeFormat","language","updatedLabel","value","_jsxs","className","filter","join","_jsx","slug","fileSrc","imageCacheTag","cacheTags","size","draggable","dateTime","user","Intl","RelativeTimeFormat","numeric","style","rawTitle","String","id","rawStatus","_displayStatus","_status"],"sources":["../../../../../src/views/HierarchyList/HierarchyCards/DocumentCard/index.tsx"],"sourcesContent":["'use client'\n\nimport type { User } from 'payload'\n\nimport React, { useMemo } from 'react'\n\nimport { Link } from '../../../../elements/Link/index.js'\nimport { Locked } from '../../../../elements/Locked/index.js'\nimport { Thumbnail } from '../../../../elements/Thumbnail/index.js'\nimport { useConfig } from '../../../../providers/Config/index.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { formatRelativeDate } from '../../../../utilities/formatRelativeDate.js'\nimport { getThumbnailSrc } from '../getThumbnailSrc.js'\nimport './index.css'\n\nconst baseClass = 'hierarchy-document-card'\n\n/**\n * Mirrors the labels and modifier classes of the table `StatusCell` so cards and rows read the\n * same. Unknown statuses fall back to the raw value with the neutral `draft` treatment.\n */\nconst statusLabels: Record<string, string> = {\n  changed: 'Changed',\n  draft: 'Draft',\n  previouslyPublished: 'Previously Published',\n  published: 'Published',\n}\n\nconst statusModifiers: Record<string, string> = {\n  changed: 'changed',\n  draft: 'draft',\n  previouslyPublished: 'previously-published',\n  published: 'published',\n}\n\nexport type DocumentCardProps = {\n  children?: React.ReactNode\n  collectionSlug: string\n  doc: Record<string, unknown>\n  href: string\n  isSelected?: boolean\n  /**\n   * The user currently editing this document. When set, a lock indicator is shown and the card\n   * cannot be selected.\n   */\n  lockedUser?: User\n  showType?: boolean\n  typeLabel?: string\n  updatedAt?: string\n}\n\nexport const DocumentCard: React.FC<DocumentCardProps> = ({\n  children,\n  collectionSlug,\n  doc,\n  href,\n  isSelected = false,\n  lockedUser,\n  showType = false,\n  typeLabel,\n  updatedAt,\n}) => {\n  const { getEntityConfig } = useConfig()\n  const { i18n } = useTranslation()\n\n  const collectionConfig = getEntityConfig({ collectionSlug })\n  const uploadConfig = collectionConfig?.upload\n  const isPreviewAllowed = uploadConfig?.displayPreview ?? true\n  const hasOwnFile = typeof doc.filename === 'string' && doc.filename.length > 0\n  const isOwnUpload = Boolean(uploadConfig) && isPreviewAllowed && hasOwnFile\n\n  // Falls back to the first field of type `upload` on the collection (resolved server-side), so a\n  // card can surface a thumbnail even when the collection itself isn't upload-enabled.\n  const useAsThumbnail = collectionConfig?.admin?.useAsThumbnail\n  const relatedUploadDoc =\n    !isOwnUpload && useAsThumbnail && typeof doc[useAsThumbnail] === 'object' && doc[useAsThumbnail]\n      ? (doc[useAsThumbnail] as Record<string, unknown>)\n      : undefined\n  const thumbnailDoc = isOwnUpload ? doc : relatedUploadDoc\n\n  const thumbnailSrc = thumbnailDoc ? getThumbnailSrc({ doc: thumbnailDoc }) : undefined\n  const hasThumbnailImage = Boolean(thumbnailSrc)\n\n  const title = getDocTitle({ doc, titleField: collectionConfig?.admin?.useAsTitle || 'id' })\n  const status = getDocStatus({ doc })\n  const hasTypePill = showType && Boolean(typeLabel)\n\n  // Creating the formatter is expensive, so build one per language rather than one per render.\n  const relativeTimeFormat = useMemo(\n    () => getLongRelativeTimeFormat(i18n.language),\n    [i18n.language],\n  )\n\n  const updatedLabel = useMemo(\n    () => (updatedAt ? formatRelativeDate({ relativeTimeFormat, value: updatedAt }) : undefined),\n    [relativeTimeFormat, updatedAt],\n  )\n\n  return (\n    <div\n      className={[\n        baseClass,\n        // The corner slot holds the lock indicator, and content below it must reserve space for it.\n        lockedUser && `${baseClass}--has-corner-slot`,\n        isSelected && `${baseClass}--selected`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      data-selected={isSelected ? 'true' : undefined}\n    >\n      <div className={`${baseClass}__thumbnail-wrap`}>\n        {hasThumbnailImage && (\n          <Thumbnail\n            className={`${baseClass}__thumbnail`}\n            collectionSlug={isOwnUpload ? collectionConfig?.slug : undefined}\n            doc={thumbnailDoc}\n            fileSrc={thumbnailSrc}\n            imageCacheTag={\n              isOwnUpload && uploadConfig?.cacheTags ? (doc.updatedAt as string) : undefined\n            }\n            size=\"expand\"\n            uploadConfig={isOwnUpload ? uploadConfig : undefined}\n          />\n        )}\n        {hasTypePill && <span className={`${baseClass}__type`}>{typeLabel}</span>}\n      </div>\n\n      <div className={`${baseClass}__content`}>\n        {/* The link is a sibling of the checkbox and stretches over the whole card via ::after */}\n        {/* The card itself is the drag handle; a link's native drag would fight the pointer sensor. */}\n        <Link className={`${baseClass}__link`} draggable={false} href={href}>\n          <span className={`${baseClass}__title`} title={title}>\n            {title}\n          </span>\n        </Link>\n\n        <div className={`${baseClass}__properties`}>\n          {updatedLabel && (\n            <div className={`${baseClass}__property`}>\n              <span className={`${baseClass}__property-label`}>Updated</span>\n              <time className={`${baseClass}__property-value`} dateTime={updatedAt}>\n                {updatedLabel}\n              </time>\n            </div>\n          )}\n\n          {status && (\n            <span\n              className={`${baseClass}__status ${baseClass}__status--${statusModifiers[status] || 'draft'}`}\n            >\n              {statusLabels[status] || status}\n            </span>\n          )}\n\n          {children ? <div className={`${baseClass}__extra`}>{children}</div> : null}\n        </div>\n      </div>\n\n      {lockedUser && (\n        <div className={`${baseClass}__corner-slot`}>\n          <Locked user={lockedUser} />\n        </div>\n      )}\n\n      {/*\n        The accent border is the only visual signal that the card is selected. Suppressed when\n        locked, so this never contradicts the lock indicator's own announcement.\n      */}\n      {isSelected && !lockedUser && <span className=\"sr-only\">Selected</span>}\n    </div>\n  )\n}\n\n/**\n * Cards spell the unit out (\"2 days ago\") per the design, whereas the shared\n * `getRelativeTimeFormat` helper is deliberately `narrow` (\"2d ago\") for the dense dashboard\n * widgets. Falls back to English on locales Intl does not recognise.\n */\nfunction getLongRelativeTimeFormat(language: string): Intl.RelativeTimeFormat {\n  try {\n    return new Intl.RelativeTimeFormat(language, { numeric: 'auto', style: 'long' })\n  } catch {\n    return new Intl.RelativeTimeFormat('en', { numeric: 'auto', style: 'long' })\n  }\n}\n\nfunction getDocTitle({\n  doc,\n  titleField,\n}: {\n  doc: Record<string, unknown>\n  titleField: string\n}): string {\n  const rawTitle = doc[titleField]\n\n  if (typeof rawTitle === 'string' || typeof rawTitle === 'number') {\n    return String(rawTitle)\n  }\n\n  const { id } = doc\n\n  if (typeof id === 'string' || typeof id === 'number') {\n    return String(id)\n  }\n\n  return ''\n}\n\n/**\n * Prefers `_displayStatus` because the list view enriches docs with it to surface `changed`,\n * falling back to the persisted `_status`.\n */\nfunction getDocStatus({ doc }: { doc: Record<string, unknown> }): string | undefined {\n  const rawStatus = doc._displayStatus ?? doc._status\n\n  return typeof rawStatus === 'string' && rawStatus.length > 0 ? rawStatus : undefined\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/views/HierarchyList/HierarchyCards/DragPreviewItem/index.css

@@ -0,0 +1,38 @@
+@layer payload-default {
+  /*
+   * A fixed 40px square, so a stack of these has a predictable footprint regardless of the aspect
+   * ratio of whatever was picked up.
+   */
+  .hierarchy-drag-preview-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--spacer-6);
+    height: var(--spacer-6);
+    overflow: hidden;
+    border-radius: var(--radius-medium);
+    background: var(--color-bg);
+  }
+
+  /* Fills the square and crops, rather than letter-boxing a wide image inside it. */
+  .hierarchy-drag-preview-item__thumbnail {
+    width: 100%;
+    height: 100%;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  .hierarchy-drag-preview-item__icon {
+    display: flex;
+    color: var(--color-icon);
+
+    svg {
+      width: var(--spacer-4);
+      height: var(--spacer-4);
+    }
+  }
+}

package/dist/views/HierarchyList/HierarchyCards/DragPreviewItem/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { TableRow } from '../../HierarchyTable/types.js';
+import './index.css';
+/**
+ * One tile in the drag stack: a small square thumbnail rather than a full card, so a multi-item drag
+ * stays legible under the cursor instead of covering the folders it is aiming for.
+ *
+ * `Thumbnail` already falls back to the generic file graphic when a document has no image, so
+ * non-upload collections need no special case here - only folders, which have an icon instead.
+ */
+export declare const DragPreviewItem: React.FC<{
+    isHierarchyGroup: boolean;
+    row: TableRow;
+}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/views/HierarchyList/HierarchyCards/DragPreviewItem/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/views/HierarchyList/HierarchyCards/DragPreviewItem/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAM7D,OAAO,aAAa,CAAA;AAIpB;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC;IACrC,gBAAgB,EAAE,OAAO,CAAA;IACzB,GAAG,EAAE,QAAQ,CAAA;CACd,CA2BA,CAAA"}

package/dist/views/HierarchyList/HierarchyCards/DragPreviewItem/index.js

@@ -0,0 +1,85 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Thumbnail } from '../../../../elements/Thumbnail/index.js';
+import { FolderIcon } from '../../../../icons/Folder/index.js';
+import { useConfig } from '../../../../providers/Config/index.js';
+import { getThumbnailSrc } from '../getThumbnailSrc.js';
+import './index.css';
+const baseClass = 'hierarchy-drag-preview-item';
+/**
+ * One tile in the drag stack: a small square thumbnail rather than a full card, so a multi-item drag
+ * stays legible under the cursor instead of covering the folders it is aiming for.
+ *
+ * `Thumbnail` already falls back to the generic file graphic when a document has no image, so
+ * non-upload collections need no special case here - only folders, which have an icon instead.
+ */
+export const DragPreviewItem = t0 => {
+  const $ = _c(7);
+  const {
+    isHierarchyGroup,
+    row
+  } = t0;
+  const {
+    getEntityConfig
+  } = useConfig();
+  const t1 = row._collectionSlug;
+  let t2;
+  let t3;
+  if ($[0] !== getEntityConfig || $[1] !== isHierarchyGroup || $[2] !== row) {
+    t3 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const collectionConfig = getEntityConfig({
+        collectionSlug: t1
+      });
+      const uploadConfig = collectionConfig?.upload;
+      if (isHierarchyGroup) {
+        let t4;
+        if ($[5] !== row._hierarchyIcon) {
+          t4 = _jsx("div", {
+            className: baseClass,
+            children: _jsx("span", {
+              className: `${baseClass}__icon`,
+              children: row._hierarchyIcon || _jsx(FolderIcon, {})
+            })
+          });
+          $[5] = row._hierarchyIcon;
+          $[6] = t4;
+        } else {
+          t4 = $[6];
+        }
+        t3 = t4;
+        break bb0;
+      }
+      t2 = _jsx("div", {
+        className: baseClass,
+        children: _jsx(Thumbnail, {
+          className: `${baseClass}__thumbnail`,
+          collectionSlug: collectionConfig?.slug,
+          doc: row,
+          fileSrc: getThumbnailSrc({
+            doc: row
+          }),
+          imageCacheTag: uploadConfig?.cacheTags ? row.updatedAt : undefined,
+          size: "expand",
+          uploadConfig
+        })
+      });
+    }
+    $[0] = getEntityConfig;
+    $[1] = isHierarchyGroup;
+    $[2] = row;
+    $[3] = t2;
+    $[4] = t3;
+  } else {
+    t2 = $[3];
+    t3 = $[4];
+  }
+  if (t3 !== Symbol.for("react.early_return_sentinel")) {
+    return t3;
+  }
+  return t2;
+};
+//# sourceMappingURL=index.js.map

package/dist/views/HierarchyList/HierarchyCards/DragPreviewItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","Thumbnail","FolderIcon","useConfig","getThumbnailSrc","baseClass","DragPreviewItem","t0","$","isHierarchyGroup","row","getEntityConfig","t1","_collectionSlug","t2","t3","Symbol","for","collectionConfig","collectionSlug","uploadConfig","upload","t4","_hierarchyIcon","_jsx","className","children","slug","doc","fileSrc","imageCacheTag","cacheTags","updatedAt","undefined","size"],"sources":["../../../../../src/views/HierarchyList/HierarchyCards/DragPreviewItem/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport type { TableRow } from '../../HierarchyTable/types.js'\n\nimport { Thumbnail } from '../../../../elements/Thumbnail/index.js'\nimport { FolderIcon } from '../../../../icons/Folder/index.js'\nimport { useConfig } from '../../../../providers/Config/index.js'\nimport { getThumbnailSrc } from '../getThumbnailSrc.js'\nimport './index.css'\n\nconst baseClass = 'hierarchy-drag-preview-item'\n\n/**\n * One tile in the drag stack: a small square thumbnail rather than a full card, so a multi-item drag\n * stays legible under the cursor instead of covering the folders it is aiming for.\n *\n * `Thumbnail` already falls back to the generic file graphic when a document has no image, so\n * non-upload collections need no special case here - only folders, which have an icon instead.\n */\nexport const DragPreviewItem: React.FC<{\n  isHierarchyGroup: boolean\n  row: TableRow\n}> = ({ isHierarchyGroup, row }) => {\n  const { getEntityConfig } = useConfig()\n\n  const collectionConfig = getEntityConfig({ collectionSlug: row._collectionSlug })\n  const uploadConfig = collectionConfig?.upload\n\n  if (isHierarchyGroup) {\n    return (\n      <div className={baseClass}>\n        <span className={`${baseClass}__icon`}>{row._hierarchyIcon || <FolderIcon />}</span>\n      </div>\n    )\n  }\n\n  return (\n    <div className={baseClass}>\n      <Thumbnail\n        className={`${baseClass}__thumbnail`}\n        collectionSlug={collectionConfig?.slug}\n        doc={row}\n        fileSrc={getThumbnailSrc({ doc: row })}\n        imageCacheTag={uploadConfig?.cacheTags ? (row.updatedAt as string) : undefined}\n        size=\"expand\"\n        uploadConfig={uploadConfig}\n      />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,MAAW;AAIlB,SAASC,SAAS,QAAQ;AAC1B,SAASC,UAAU,QAAQ;AAC3B,SAASC,SAAS,QAAQ;AAC1B,SAASC,eAAe,QAAQ;AAChC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB;;;;;;;AAOA,OAAO,MAAMC,eAAA,GAGRC,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAC;IAAAU,gBAAA;IAAAC;EAAA,IAAAH,EAAyB;EAC7B;IAAAI;EAAA,IAA4BR,SAAA;EAE+B,MAAAS,EAAA,GAAAF,GAAA,CAAAG,eAAA;EAAmB,IAAAC,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAP,CAAA,QAAAG,eAAA,IAAAH,CAAA,QAAAC,gBAAA,IAAAD,CAAA,QAAAE,GAAA;IAK1EK,EAAA,GAAAC,MAAA,CAAAC,GAAA,8B;;MALJ,MAAAC,gBAAA,GAAyBP,eAAA;QAAAQ,cAAA,EAAkCP;MAAmB,CAAC;MAC/E,MAAAQ,YAAA,GAAqBF,gBAAA,EAAAG,MAAA;MAAkB,IAEnCZ,gBAAA;QAAA,IAAAa,EAAA;QAAA,IAAAd,CAAA,QAAAE,GAAA,CAAAa,cAAA;UAEAD,EAAA,GAAAE,IAAA,CAAC;YAAAC,SAAA,EAAApB,SAAA;YAAAqB,QAAA,EACCF,IAAA,CAAC;cAAAC,SAAA,EAAgB,GAAApB,SAAA,QAAoB;cAAAqB,QAAA,EAAGhB,GAAA,CAAAa,cAAA,IAAsBC,IAAA,CAAAtB,UAAA,IAAC;YAAA,C;;;;;;;QADjEa,EAAA,GAAAO,E;;;MAOFR,EAAA,GAAAU,IAAA,CAAC;QAAAC,SAAA,EAAApB,SAAA;QAAAqB,QAAA,EACCF,IAAA,CAAAvB,SAAA;UAAAwB,SAAA,EACa,GAAApB,SAAA,aAAyB;UAAAc,cAAA,EACpBD,gBAAA,EAAAS,IAAA;UAAAC,GAAA,EACXlB,GAAA;UAAAmB,OAAA,EACIzB,eAAA;YAAAwB,GAAA,EAAuBlB;UAAA,CAAI;UAAAoB,aAAA,EACrBV,YAAA,EAAAW,SAAA,GAA2BrB,GAAA,CAAAsB,SAAA,GAAAC,SAA2B;UAAAC,IAAA,EAChE;UAAAd;QAAA,C;;;;;;;;;;;;;;;SAPTN,E;CAYJ","ignoreList":[]}

package/dist/views/HierarchyList/HierarchyCards/FolderCard/index.css

@@ -0,0 +1,98 @@
+@layer payload-default {
+  /*
+   * Single-row card: the folder icon leads, the title fills the remaining width and truncates.
+   *
+   * State rings are spread-only box-shadows rather than borders, matching DocumentCard. Widening a
+   * border on selection would grow the card's auto height by 2px (border-box sizing does not absorb
+   * a border when no explicit height is set), which would grow the whole grid row and shift
+   * everything below it. Focus is left to the inner link's standard app-wide :focus-visible ring, so
+   * it stays distinguishable from the selected state.
+   */
+  .hierarchy-folder-card {
+    display: flex;
+    align-items: stretch;
+    min-width: 0;
+    background: var(--color-bg);
+    border-radius: var(--radius-large);
+    box-shadow: 0 0 0 var(--stroke-width-small) var(--color-border);
+  }
+
+  .hierarchy-folder-card:not(.hierarchy-folder-card--selected):hover {
+    box-shadow: 0 0 0 var(--stroke-width-small) var(--special-border-translucent-strong);
+  }
+
+  .hierarchy-folder-card--selected {
+    box-shadow: 0 0 0 var(--stroke-width-medium) var(--color-border-selected);
+  }
+
+  .hierarchy-folder-card--selected:hover {
+    box-shadow: 0 0 0 var(--stroke-width-medium) var(--color-border-selected-strong);
+  }
+
+  /*
+   * Drop invitation. Reuses the selected ring's token and width so hovering a drag over a card never
+   * changes its geometry, and wins over the selected/hover rings above by being declared later.
+   */
+  .hierarchy-folder-card--drop-over {
+    background: color-mix(in srgb, var(--color-border-selected) 8%, var(--color-bg));
+    box-shadow: 0 0 0 var(--stroke-width-medium) var(--color-border-selected);
+  }
+
+  .hierarchy-folder-card--drop-invalid {
+    cursor: not-allowed;
+  }
+
+  .hierarchy-folder-card__link {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    gap: var(--spacer-1);
+    min-width: 0;
+    padding: var(--spacer-2-5);
+    border-radius: var(--radius-large);
+    color: var(--color-text);
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover {
+      color: var(--color-text);
+      text-decoration: none;
+    }
+  }
+
+  /* Trailing slot (lock indicator) supplies its own end padding. */
+  .hierarchy-folder-card--has-corner-slot .hierarchy-folder-card__link {
+    padding-inline-end: var(--spacer-2);
+  }
+
+  .hierarchy-folder-card__icon {
+    display: flex;
+    flex-shrink: 0;
+    color: var(--color-icon);
+
+    svg {
+      width: var(--spacer-4);
+      height: var(--spacer-4);
+    }
+  }
+
+  .hierarchy-folder-card__title {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    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);
+    letter-spacing: var(--text-body-large-strong-letter-spacing);
+  }
+
+  .hierarchy-folder-card__corner-slot {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    padding-inline-end: var(--spacer-2-5);
+  }
+}

package/dist/views/HierarchyList/HierarchyCards/FolderCard/index.d.ts

@@ -0,0 +1,27 @@
+import type { User } from 'payload';
+import React from 'react';
+import './index.css';
+export type FolderCardProps = {
+    /**
+     * Hover state while a hierarchy drag is over this card: `over` invites the drop, `invalid` marks a
+     * destination that would reject it (wrong collection type, or the folder's own subtree).
+     */
+    dropState?: 'invalid' | 'over';
+    /**
+     * Admin URL the card navigates to when clicked.
+     */
+    href: string;
+    /**
+     * Overrides the default folder icon rendered on the leading side.
+     */
+    icon?: React.ReactNode;
+    isSelected?: boolean;
+    /**
+     * The user currently editing this document. When set, a lock indicator is shown and the card
+     * cannot be selected.
+     */
+    lockedUser?: User;
+    title: string;
+};
+export declare const FolderCard: React.FC<FolderCardProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/views/HierarchyList/HierarchyCards/FolderCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/views/HierarchyList/HierarchyCards/FolderCard/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAEnC,OAAO,KAAgB,MAAM,OAAO,CAAA;AAKpC,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IAC9B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAmDhD,CAAA"}

package/dist/views/HierarchyList/HierarchyCards/FolderCard/index.js

@@ -0,0 +1,84 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useId } from 'react';
+import { Link } from '../../../../elements/Link/index.js';
+import { Locked } from '../../../../elements/Locked/index.js';
+import { FolderIcon } from '../../../../icons/Folder/index.js';
+import './index.css';
+const baseClass = 'hierarchy-folder-card';
+export const FolderCard = t0 => {
+  const $ = _c(14);
+  const {
+    dropState,
+    href,
+    icon,
+    isSelected: t1,
+    lockedUser,
+    title
+  } = t0;
+  const isSelected = t1 === undefined ? false : t1;
+  const selectedStatusID = useId();
+  const shouldAnnounceSelection = isSelected && !lockedUser;
+  const t2 = isSelected && `${baseClass}--selected`;
+  const t3 = dropState && `${baseClass}--drop-${dropState}`;
+  const t4 = lockedUser && `${baseClass}--has-corner-slot`;
+  let t5;
+  if ($[0] !== t2 || $[1] !== t3 || $[2] !== t4) {
+    t5 = [baseClass, t2, t3, t4].filter(Boolean);
+    $[0] = t2;
+    $[1] = t3;
+    $[2] = t4;
+    $[3] = t5;
+  } else {
+    t5 = $[3];
+  }
+  const t6 = t5.join(" ");
+  const t7 = isSelected ? "true" : undefined;
+  const t8 = shouldAnnounceSelection ? selectedStatusID : undefined;
+  let t9;
+  if ($[4] !== href || $[5] !== icon || $[6] !== lockedUser || $[7] !== selectedStatusID || $[8] !== shouldAnnounceSelection || $[9] !== t6 || $[10] !== t7 || $[11] !== t8 || $[12] !== title) {
+    t9 = _jsxs("div", {
+      className: t6,
+      "data-selected": t7,
+      children: [_jsxs(Link, {
+        "aria-describedby": t8,
+        className: `${baseClass}__link`,
+        draggable: false,
+        href,
+        children: [_jsx("span", {
+          className: `${baseClass}__icon`,
+          children: icon || _jsx(FolderIcon, {})
+        }), _jsx("span", {
+          className: `${baseClass}__title`,
+          title,
+          children: title
+        })]
+      }), shouldAnnounceSelection && _jsx("span", {
+        className: "sr-only",
+        id: selectedStatusID,
+        children: "Selected"
+      }), lockedUser && _jsx("div", {
+        className: `${baseClass}__corner-slot`,
+        children: _jsx(Locked, {
+          user: lockedUser
+        })
+      })]
+    });
+    $[4] = href;
+    $[5] = icon;
+    $[6] = lockedUser;
+    $[7] = selectedStatusID;
+    $[8] = shouldAnnounceSelection;
+    $[9] = t6;
+    $[10] = t7;
+    $[11] = t8;
+    $[12] = title;
+    $[13] = t9;
+  } else {
+    t9 = $[13];
+  }
+  return t9;
+};
+//# sourceMappingURL=index.js.map

package/dist/views/HierarchyList/HierarchyCards/FolderCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","useId","Link","Locked","FolderIcon","baseClass","FolderCard","t0","$","dropState","href","icon","isSelected","t1","lockedUser","title","undefined","selectedStatusID","shouldAnnounceSelection","t2","t3","t4","t5","filter","Boolean","t6","join","t7","t8","t9","_jsxs","className","children","draggable","_jsx","id","user"],"sources":["../../../../../src/views/HierarchyList/HierarchyCards/FolderCard/index.tsx"],"sourcesContent":["'use client'\n\nimport type { User } from 'payload'\n\nimport React, { useId } from 'react'\n\nimport { Link } from '../../../../elements/Link/index.js'\nimport { Locked } from '../../../../elements/Locked/index.js'\nimport { FolderIcon } from '../../../../icons/Folder/index.js'\nimport './index.css'\n\nconst baseClass = 'hierarchy-folder-card'\n\nexport type FolderCardProps = {\n  /**\n   * Hover state while a hierarchy drag is over this card: `over` invites the drop, `invalid` marks a\n   * destination that would reject it (wrong collection type, or the folder's own subtree).\n   */\n  dropState?: 'invalid' | 'over'\n  /**\n   * Admin URL the card navigates to when clicked.\n   */\n  href: string\n  /**\n   * Overrides the default folder icon rendered on the leading side.\n   */\n  icon?: React.ReactNode\n  isSelected?: boolean\n  /**\n   * The user currently editing this document. When set, a lock indicator is shown and the card\n   * cannot be selected.\n   */\n  lockedUser?: User\n  title: string\n}\n\nexport const FolderCard: React.FC<FolderCardProps> = ({\n  dropState,\n  href,\n  icon,\n  isSelected = false,\n  lockedUser,\n  title,\n}) => {\n  const selectedStatusID = useId()\n\n  // The selected state is otherwise only conveyed by the accent border. Suppressed when locked, so\n  // this never contradicts the lock indicator's own announcement.\n  const shouldAnnounceSelection = isSelected && !lockedUser\n\n  return (\n    <div\n      className={[\n        baseClass,\n        isSelected && `${baseClass}--selected`,\n        dropState && `${baseClass}--drop-${dropState}`,\n        // The trailing slot holds the lock indicator.\n        lockedUser && `${baseClass}--has-corner-slot`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      data-selected={isSelected ? 'true' : undefined}\n    >\n      <Link\n        aria-describedby={shouldAnnounceSelection ? selectedStatusID : undefined}\n        className={`${baseClass}__link`}\n        // The card itself is the drag handle; a link's native drag would fight the pointer sensor.\n        draggable={false}\n        href={href}\n      >\n        <span className={`${baseClass}__icon`}>{icon || <FolderIcon />}</span>\n        <span className={`${baseClass}__title`} title={title}>\n          {title}\n        </span>\n      </Link>\n      {shouldAnnounceSelection && (\n        <span className=\"sr-only\" id={selectedStatusID}>\n          Selected\n        </span>\n      )}\n      {lockedUser && (\n        <div className={`${baseClass}__corner-slot`}>\n          <Locked user={lockedUser} />\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,OAAOC,KAAA,IAASC,KAAK,QAAQ;AAE7B,SAASC,IAAI,QAAQ;AACrB,SAASC,MAAM,QAAQ;AACvB,SAASC,UAAU,QAAQ;AAC3B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAyBlB,OAAO,MAAMC,UAAA,GAAwCC,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAC;IAAAU,SAAA;IAAAC,IAAA;IAAAC,IAAA;IAAAC,UAAA,EAAAC,EAAA;IAAAC,UAAA;IAAAC;EAAA,IAAAR,EAOrD;EAHC,MAAAK,UAAA,GAAAC,EAAkB,KAAAG,SAAA,WAAlBH,EAAkB;EAIlB,MAAAI,gBAAA,GAAyBhB,KAAA;EAIzB,MAAAiB,uBAAA,GAAgCN,UAAA,KAAeE,UAAA;EAMzC,MAAAK,EAAA,GAAAP,UAAA,IAAc,GAAAP,SAAA,YAAwB;EACtC,MAAAe,EAAA,GAAAX,SAAA,IAAa,GAAAJ,SAAA,UAAsBI,SAAA,EAAW;EAE9C,MAAAY,EAAA,GAAAP,UAAA,IAAc,GAAAT,SAAA,mBAA+B;EAAA,IAAAiB,EAAA;EAAA,IAAAd,CAAA,QAAAW,EAAA,IAAAX,CAAA,QAAAY,EAAA,IAAAZ,CAAA,QAAAa,EAAA;IALpCC,EAAA,IAAAjB,SAAA,EAETc,EAAsC,EACtCC,EAA8C,EAE9CC,EAA6C,EAAAE,MAAA,CAAAC,OAErC;IAAAhB,CAAA,MAAAW,EAAA;IAAAX,CAAA,MAAAY,EAAA;IAAAZ,CAAA,MAAAa,EAAA;IAAAb,CAAA,MAAAc,EAAA;EAAA;IAAAA,EAAA,GAAAd,CAAA;EAAA;EAPC,MAAAiB,EAAA,GAAAH,EAOD,CAAAI,IAAA,CACF;EACO,MAAAC,EAAA,GAAAf,UAAA,GAAa,SAAAI,SAAS;EAGjB,MAAAY,EAAA,GAAAV,uBAAA,GAA0BD,gBAAA,GAAAD,SAAmB;EAAA,IAAAa,EAAA;EAAA,IAAArB,CAAA,QAAAE,IAAA,IAAAF,CAAA,QAAAG,IAAA,IAAAH,CAAA,QAAAM,UAAA,IAAAN,CAAA,QAAAS,gBAAA,IAAAT,CAAA,QAAAU,uBAAA,IAAAV,CAAA,QAAAiB,EAAA,IAAAjB,CAAA,SAAAmB,EAAA,IAAAnB,CAAA,SAAAoB,EAAA,IAAApB,CAAA,SAAAO,KAAA;IAbnEc,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EACYN,EAQH;MAAA,iBACOE,EAAsB;MAAAK,QAAA,GAErCF,KAAA,CAAA5B,IAAA;QAAA,oBACoB0B,EAA6C;QAAAG,SAAA,EACpD,GAAA1B,SAAA,QAAoB;QAAA4B,SAAA;QAAAvB,IAAA;QAAAsB,QAAA,GAK/BE,IAAA,CAAC;UAAAH,SAAA,EAAgB,GAAA1B,SAAA,QAAoB;UAAA2B,QAAA,EAAGrB,IAAA,IAAQuB,IAAA,CAAA9B,UAAA,IAAC;QAAA,C,GACjD8B,IAAA,CAAC;UAAAH,SAAA,EAAgB,GAAA1B,SAAA,SAAqB;UAAAU,KAAA;UAAAiB,QAAA,EACnCjB;QAAA,C;UAGJG,uBAAA,IACCgB,IAAA,CAAC;QAAAH,SAAA,EAAe;QAAAI,EAAA,EAAclB,gBAAA;QAAAe,QAAA,EAAkB;MAAA,C,GAIjDlB,UAAA,IACCoB,IAAA,CAAC;QAAAH,SAAA,EAAe,GAAA1B,SAAA,eAA2B;QAAA2B,QAAA,EACzCE,IAAA,CAAA/B,MAAA;UAAAiC,IAAA,EAActB;QAAA,C;;;;;;;;;;;;;;;;SA/BpBe,E;CAoCJ","ignoreList":[]}

package/dist/views/HierarchyList/HierarchyCards/HierarchyCard/index.d.ts

@@ -0,0 +1,19 @@
+import type { User } from 'payload';
+import React from 'react';
+import type { TableRow } from '../../HierarchyTable/types.js';
+export type HierarchyCardProps = {
+    dropState?: 'invalid' | 'over';
+    href: string;
+    isHierarchyGroup: boolean;
+    isSelected?: boolean;
+    lockedUser?: User;
+    row: TableRow;
+    showTypePill?: boolean;
+    title: string;
+};
+/**
+ * Picks the card that suits a row and supplies its labels. Extracted so the drag overlay can render
+ * the very cards being dragged rather than an approximation of them.
+ */
+export declare const HierarchyCard: React.FC<HierarchyCardProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/views/HierarchyList/HierarchyCards/HierarchyCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/views/HierarchyList/HierarchyCards/HierarchyCard/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAGnC,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAO7D,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IAC9B,IAAI,EAAE,MAAM,CAAA;IACZ,gBAAgB,EAAE,OAAO,CAAA;IACzB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,IAAI,CAAA;IACjB,GAAG,EAAE,QAAQ,CAAA;IACb,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA0CtD,CAAA"}