@payloadcms/ui 4.0.0-internal.011fd46 → 4.0.0-internal.016994f

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

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

@@ -0,0 +1,100 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
+import React from 'react';
+import { useConfig } from '../../../../providers/Config/index.js';
+import { useTranslation } from '../../../../providers/Translation/index.js';
+import { DocumentCard } from '../DocumentCard/index.js';
+import { FolderCard } from '../FolderCard/index.js';
+/**
+ * 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 const HierarchyCard = t0 => {
+  const $ = _c(19);
+  const {
+    dropState,
+    href,
+    isHierarchyGroup,
+    isSelected: t1,
+    lockedUser,
+    row,
+    showTypePill: t2,
+    title
+  } = t0;
+  const isSelected = t1 === undefined ? false : t1;
+  const showTypePill = t2 === undefined ? false : t2;
+  const {
+    getEntityConfig
+  } = useConfig();
+  const {
+    i18n
+  } = useTranslation();
+  const t3 = row._collectionSlug;
+  let t4;
+  let t5;
+  if ($[0] !== dropState || $[1] !== getEntityConfig || $[2] !== href || $[3] !== i18n || $[4] !== isHierarchyGroup || $[5] !== isSelected || $[6] !== lockedUser || $[7] !== row || $[8] !== showTypePill || $[9] !== title) {
+    t5 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const collectionConfig = getEntityConfig({
+        collectionSlug: t3
+      });
+      if (isHierarchyGroup) {
+        let t6;
+        if ($[12] !== dropState || $[13] !== href || $[14] !== isSelected || $[15] !== lockedUser || $[16] !== row._hierarchyIcon || $[17] !== title) {
+          t6 = _jsx(FolderCard, {
+            dropState,
+            href,
+            icon: row._hierarchyIcon,
+            isSelected,
+            lockedUser,
+            title
+          });
+          $[12] = dropState;
+          $[13] = href;
+          $[14] = isSelected;
+          $[15] = lockedUser;
+          $[16] = row._hierarchyIcon;
+          $[17] = title;
+          $[18] = t6;
+        } else {
+          t6 = $[18];
+        }
+        t5 = t6;
+        break bb0;
+      }
+      t4 = _jsx(DocumentCard, {
+        collectionSlug: row._collectionSlug,
+        doc: row,
+        href,
+        isSelected,
+        lockedUser,
+        showType: showTypePill,
+        typeLabel: getTranslation(collectionConfig?.labels?.singular, i18n) || row._collectionLabel,
+        updatedAt: typeof row.updatedAt === "string" ? row.updatedAt : undefined
+      });
+    }
+    $[0] = dropState;
+    $[1] = getEntityConfig;
+    $[2] = href;
+    $[3] = i18n;
+    $[4] = isHierarchyGroup;
+    $[5] = isSelected;
+    $[6] = lockedUser;
+    $[7] = row;
+    $[8] = showTypePill;
+    $[9] = title;
+    $[10] = t4;
+    $[11] = t5;
+  } else {
+    t4 = $[10];
+    t5 = $[11];
+  }
+  if (t5 !== Symbol.for("react.early_return_sentinel")) {
+    return t5;
+  }
+  return t4;
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useConfig","useTranslation","DocumentCard","FolderCard","HierarchyCard","t0","$","dropState","href","isHierarchyGroup","isSelected","t1","lockedUser","row","showTypePill","t2","title","undefined","getEntityConfig","i18n","t3","_collectionSlug","t4","t5","Symbol","for","collectionConfig","collectionSlug","t6","_hierarchyIcon","_jsx","icon","doc","showType","typeLabel","labels","singular","_collectionLabel","updatedAt"],"sources":["../../../../../src/views/HierarchyList/HierarchyCards/HierarchyCard/index.tsx"],"sourcesContent":["'use client'\n\nimport type { User } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { TableRow } from '../../HierarchyTable/types.js'\n\nimport { useConfig } from '../../../../providers/Config/index.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { DocumentCard } from '../DocumentCard/index.js'\nimport { FolderCard } from '../FolderCard/index.js'\n\nexport type HierarchyCardProps = {\n  dropState?: 'invalid' | 'over'\n  href: string\n  isHierarchyGroup: boolean\n  isSelected?: boolean\n  lockedUser?: User\n  row: TableRow\n  showTypePill?: boolean\n  title: string\n}\n\n/**\n * Picks the card that suits a row and supplies its labels. Extracted so the drag overlay can render\n * the very cards being dragged rather than an approximation of them.\n */\nexport const HierarchyCard: React.FC<HierarchyCardProps> = ({\n  dropState,\n  href,\n  isHierarchyGroup,\n  isSelected = false,\n  lockedUser,\n  row,\n  showTypePill = false,\n  title,\n}) => {\n  const { getEntityConfig } = useConfig()\n  const { i18n } = useTranslation()\n\n  const collectionConfig = getEntityConfig({ collectionSlug: row._collectionSlug })\n\n  if (isHierarchyGroup) {\n    return (\n      <FolderCard\n        dropState={dropState}\n        href={href}\n        icon={row._hierarchyIcon}\n        isSelected={isSelected}\n        lockedUser={lockedUser}\n        title={title}\n      />\n    )\n  }\n\n  return (\n    <DocumentCard\n      collectionSlug={row._collectionSlug}\n      doc={row}\n      href={href}\n      isSelected={isSelected}\n      lockedUser={lockedUser}\n      showType={showTypePill}\n      // The pill labels a single document, so the singular label reads correctly (\"Media\");\n      // _collectionLabel is the plural used for the table column heading.\n      typeLabel={getTranslation(collectionConfig?.labels?.singular, i18n) || row._collectionLabel}\n      updatedAt={typeof row.updatedAt === 'string' ? row.updatedAt : undefined}\n    />\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAIlB,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,YAAY,QAAQ;AAC7B,SAASC,UAAU,QAAQ;AAa3B;;;;AAIA,OAAO,MAAMC,aAAA,GAA8CC,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAC;IAAAU,SAAA;IAAAC,IAAA;IAAAC,gBAAA;IAAAC,UAAA,EAAAC,EAAA;IAAAC,UAAA;IAAAC,GAAA;IAAAC,YAAA,EAAAC,EAAA;IAAAC;EAAA,IAAAX,EAS3D;EALC,MAAAK,UAAA,GAAAC,EAAkB,KAAAM,SAAA,WAAlBN,EAAkB;EAGlB,MAAAG,YAAA,GAAAC,EAAoB,KAAAE,SAAA,WAApBF,EAAoB;EAGpB;IAAAG;EAAA,IAA4BlB,SAAA;EAC5B;IAAAmB;EAAA,IAAiBlB,cAAA;EAE0C,MAAAmB,EAAA,GAAAP,GAAA,CAAAQ,eAAA;EAAmB,IAAAC,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAjB,CAAA,QAAAC,SAAA,IAAAD,CAAA,QAAAY,eAAA,IAAAZ,CAAA,QAAAE,IAAA,IAAAF,CAAA,QAAAa,IAAA,IAAAb,CAAA,QAAAG,gBAAA,IAAAH,CAAA,QAAAI,UAAA,IAAAJ,CAAA,QAAAM,UAAA,IAAAN,CAAA,QAAAO,GAAA,IAAAP,CAAA,QAAAQ,YAAA,IAAAR,CAAA,QAAAU,KAAA;IAI1EO,EAAA,GAAAC,MAAA,CAAAC,GAAA,8B;;MAJJ,MAAAC,gBAAA,GAAyBR,eAAA;QAAAS,cAAA,EAAkCP;MAAmB,CAAC;MAAA,IAE3EX,gBAAA;QAAA,IAAAmB,EAAA;QAAA,IAAAtB,CAAA,SAAAC,SAAA,IAAAD,CAAA,SAAAE,IAAA,IAAAF,CAAA,SAAAI,UAAA,IAAAJ,CAAA,SAAAM,UAAA,IAAAN,CAAA,SAAAO,GAAA,CAAAgB,cAAA,IAAAvB,CAAA,SAAAU,KAAA;UAEAY,EAAA,GAAAE,IAAA,CAAA3B,UAAA;YAAAI,SAAA;YAAAC,IAAA;YAAAuB,IAAA,EAGQlB,GAAA,CAAAgB,cAAA;YAAAnB,UAAA;YAAAE,UAAA;YAAAI;UAAA,C;;;;;;;;;;;QAHRO,EAAA,GAAAK,E;;;MAYFN,EAAA,GAAAQ,IAAA,CAAA5B,YAAA;QAAAyB,cAAA,EACkBd,GAAA,CAAAQ,eAAA;QAAAW,GAAA,EACXnB,GAAA;QAAAL,IAAA;QAAAE,UAAA;QAAAE,UAAA;QAAAqB,QAAA,EAIKnB,YAAA;QAAAoB,SAAA,EAGCpC,cAAA,CAAe4B,gBAAA,EAAAS,MAAA,EAAAC,QAAA,EAAoCjB,IAAA,KAASN,GAAA,CAAAwB,gBAAoB;QAAAC,SAAA,EAChF,OAAOzB,GAAA,CAAAyB,SAAA,KAAkB,WAAWzB,GAAA,CAAAyB,SAAA,GAAArB;MAAgB,C;;;;;;;;;;;;;;;;;;;;;SAVjEK,E;CAaJ","ignoreList":[]}

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

@@ -0,0 +1,53 @@
+import type { User } from 'payload';
+import React from 'react';
+import type { HierarchyDragData } from '../../../../providers/HierarchyDnd/types.js';
+import type { TableRow } from '../../HierarchyTable/types.js';
+export type PlaneItemProps = {
+    /**
+     * Ids of the folders between the root and the folder currently open, so a folder can't be dropped
+     * into its own subtree.
+     */
+    ancestorIds: (number | string)[];
+    baseClass: string;
+    /** Flat index across every band, which is the space selection gestures operate in. */
+    flatIndex: number;
+    hierarchySlug: string;
+    href: string;
+    /**
+     * Turns the card into a plain selectable tile: no drag activation and no dragging treatment. Set
+     * by planes that have nowhere to drop, such as the flat collection grid.
+     */
+    isDragDisabled: boolean;
+    isHierarchyGroup: boolean;
+    isSelected: boolean;
+    lockedUser?: User;
+    onClickCapture: (event: React.MouseEvent, flatIndex: number) => void;
+    onDoubleClick: (event: React.MouseEvent, href: string) => void;
+    onKeyDown: (event: React.KeyboardEvent, flatIndex: number) => void;
+    /**
+     * Called on pointer-down over an unselected card, so dragging one collapses the selection onto it
+     * before the drag payload is read - the way a file browser behaves.
+     */
+    onPointerDownUnselected: (flatIndex: number) => void;
+    parentFieldName: string;
+    /**
+     * Hands the card element to the plane, which hit-tests it during marquee selection.
+     */
+    registerNode: (flatIndex: number, node: HTMLElement | null) => void;
+    row: TableRow;
+    /**
+     * Payload for dragging the whole current selection. Shared by every selected card, so it is built
+     * once per render rather than per card.
+     */
+    selectionDragData: HierarchyDragData;
+    showTypePill: boolean;
+    title: string;
+};
+/**
+ * One card in the plane: a drag source always, and a drop target when it is a folder.
+ *
+ * Exists as its own component because `useDraggable`/`useDroppable` are hooks and so cannot be
+ * called inside the plane's row loop.
+ */
+export declare const PlaneItem: React.FC<PlaneItemProps>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/views/HierarchyList/HierarchyCards/PlaneItem/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAGnC,OAAO,KAAkB,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EACV,iBAAiB,EAElB,MAAM,6CAA6C,CAAA;AACpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAM7D,MAAM,MAAM,cAAc,GAAG;IAC3B;;;OAGG;IACH,WAAW,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;IAChC,SAAS,EAAE,MAAM,CAAA;IACjB,sFAAsF;IACtF,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,MAAM,CAAA;IACrB,IAAI,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,cAAc,EAAE,OAAO,CAAA;IACvB,gBAAgB,EAAE,OAAO,CAAA;IACzB,UAAU,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,IAAI,CAAA;IACjB,cAAc,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IACpE,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9D,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IAClE;;;OAGG;IACH,uBAAuB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IACpD,eAAe,EAAE,MAAM,CAAA;IACvB;;OAEG;IACH,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IACnE,GAAG,EAAE,QAAQ,CAAA;IACb;;;OAGG;IACH,iBAAiB,EAAE,iBAAiB,CAAA;IACpC,YAAY,EAAE,OAAO,CAAA;IACrB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAmJ9C,CAAA"}

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

@@ -0,0 +1,145 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useDraggable, useDroppable } from '@dnd-kit/core';
+import React, { useMemo } from 'react';
+import { useHierarchyDnd } from '../../../../providers/HierarchyDnd/index.js';
+import { DragPreviewItem } from '../DragPreviewItem/index.js';
+import { HierarchyCard } from '../HierarchyCard/index.js';
+/**
+ * One card in the plane: a drag source always, and a drop target when it is a folder.
+ *
+ * Exists as its own component because `useDraggable`/`useDroppable` are hooks and so cannot be
+ * called inside the plane's row loop.
+ */
+export const PlaneItem = ({
+  ancestorIds,
+  baseClass,
+  flatIndex,
+  hierarchySlug,
+  href,
+  isDragDisabled,
+  isHierarchyGroup,
+  isSelected,
+  lockedUser,
+  onClickCapture,
+  onDoubleClick,
+  onKeyDown,
+  onPointerDownUnselected,
+  parentFieldName,
+  registerNode,
+  row,
+  selectionDragData,
+  showTypePill,
+  title
+}) => {
+  const {
+    activeDrag,
+    canDrop
+  } = useHierarchyDnd();
+  const rowDragData = useMemo(() => ({
+    type: 'hierarchy-items',
+    items: [{
+      id: row.id,
+      collectionSlug: row._collectionSlug,
+      title
+    }],
+    onMoveSuccess: selectionDragData.onMoveSuccess,
+    preview: [/*#__PURE__*/_jsx(DragPreviewItem, {
+      isHierarchyGroup: isHierarchyGroup,
+      row: row
+    }, "preview")]
+  }), [isHierarchyGroup, row, selectionDragData.onMoveSuccess, title]);
+  // Dragging a card that is part of the selection moves the whole selection; dragging an unselected
+  // one moves just it.
+  const dragData = isSelected ? selectionDragData : rowDragData;
+  const dropData = useMemo(() => isHierarchyGroup ? {
+    type: 'hierarchy-folder',
+    allowedCollections: row._allowedCollections,
+    ancestorIds,
+    folderId: row.id,
+    hierarchySlug,
+    parentFieldName,
+    title
+  } : undefined, [ancestorIds, hierarchySlug, isHierarchyGroup, parentFieldName, row, title]);
+  const rowKey = `${row._collectionSlug}-${row.id}`;
+  const {
+    attributes,
+    isDragging,
+    listeners,
+    setNodeRef: setDragRef
+  } = useDraggable({
+    id: `hierarchy-card-${rowKey}`,
+    data: dragData,
+    disabled: isDragDisabled || Boolean(lockedUser)
+  });
+  const {
+    isOver,
+    setNodeRef: setDropRef
+  } = useDroppable({
+    id: `hierarchy-card-drop-${rowKey}`,
+    data: dropData,
+    disabled: isDragDisabled || !dropData
+  });
+  const dropState = isOver && dropData ? canDrop(dropData) ? 'over' : 'invalid' : undefined;
+  // A folder is both a drag source and a drop target, and the plane needs the same node for marquee
+  // hit-testing, so one callback fans it out to all three.
+  const setNodeRef = node => {
+    setDragRef(node);
+    setDropRef(node);
+    registerNode(flatIndex, node);
+  };
+  /*
+  * Every card in the active drag fades, not just the one under the pointer, so a multi-card move
+  * shows what is travelling. Membership is tested against the drag's own items rather than by
+  * comparing payload identity, which would silently stop matching the moment the plane re-rendered
+  * and rebuilt the shared selection payload mid-drag.
+  */
+  const isBeingDragged = !isDragDisabled && (isDragging || Boolean(activeDrag?.items.some(item => item.collectionSlug === row._collectionSlug && String(item.id) === String(row.id))));
+  /*
+  * dnd-kit's sensors activate through listeners named exactly `onPointerDown` and `onKeyDown`, which
+  * are also the events this card needs for selection. Spreading `listeners` and then declaring
+  * either prop would silently overwrite the activator and no drag would ever start, so the two are
+  * composed by hand and the rest of the listeners spread as-is.
+  */
+  const {
+    onKeyDown: onDragKeyDown,
+    onPointerDown: onDragPointerDown,
+    ...remainingListeners
+  } = listeners ?? {};
+  return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the card's own link remains the keyboard-operable control; these handlers only layer pointer selection and drag gestures on top of it
+    /*#__PURE__*/
+    _jsx("li", {
+      ...attributes,
+      ...remainingListeners,
+      className: [`${baseClass}__item`, isBeingDragged && `${baseClass}__item--dragging`].filter(Boolean).join(' '),
+      onClickCapture: event => onClickCapture(event, flatIndex),
+      onDoubleClick: event_0 => onDoubleClick(event_0, href),
+      onKeyDown: event_1 => {
+        onDragKeyDown?.(event_1);
+        onKeyDown(event_1, flatIndex);
+      },
+      onPointerDown: event_2 => {
+        // The sensor goes first so it sees the untouched event; the selection collapse that follows
+        // only schedules React state, which the sensor never reads.
+        onDragPointerDown?.(event_2);
+        if (!isSelected) {
+          onPointerDownUnselected(flatIndex);
+        }
+      },
+      ref: setNodeRef,
+      children: /*#__PURE__*/_jsx(HierarchyCard, {
+        dropState: dropState,
+        href: href,
+        isHierarchyGroup: isHierarchyGroup,
+        isSelected: isSelected,
+        lockedUser: lockedUser,
+        row: row,
+        showTypePill: showTypePill,
+        title: title
+      })
+    })
+  );
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["useDraggable","useDroppable","React","useMemo","useHierarchyDnd","DragPreviewItem","HierarchyCard","PlaneItem","ancestorIds","baseClass","flatIndex","hierarchySlug","href","isDragDisabled","isHierarchyGroup","isSelected","lockedUser","onClickCapture","onDoubleClick","onKeyDown","onPointerDownUnselected","parentFieldName","registerNode","row","selectionDragData","showTypePill","title","activeDrag","canDrop","rowDragData","type","items","id","collectionSlug","_collectionSlug","onMoveSuccess","preview","_jsx","dragData","dropData","allowedCollections","_allowedCollections","folderId","undefined","rowKey","attributes","isDragging","listeners","setNodeRef","setDragRef","data","disabled","Boolean","isOver","setDropRef","dropState","node","isBeingDragged","some","item","String","onDragKeyDown","onPointerDown","onDragPointerDown","remainingListeners","className","filter","join","event","ref"],"sources":["../../../../../src/views/HierarchyList/HierarchyCards/PlaneItem/index.tsx"],"sourcesContent":["'use client'\n\nimport type { User } from 'payload'\n\nimport { useDraggable, useDroppable } from '@dnd-kit/core'\nimport React, { useMemo } from 'react'\n\nimport type {\n  HierarchyDragData,\n  HierarchyDropData,\n} from '../../../../providers/HierarchyDnd/types.js'\nimport type { TableRow } from '../../HierarchyTable/types.js'\n\nimport { useHierarchyDnd } from '../../../../providers/HierarchyDnd/index.js'\nimport { DragPreviewItem } from '../DragPreviewItem/index.js'\nimport { HierarchyCard } from '../HierarchyCard/index.js'\n\nexport type PlaneItemProps = {\n  /**\n   * Ids of the folders between the root and the folder currently open, so a folder can't be dropped\n   * into its own subtree.\n   */\n  ancestorIds: (number | string)[]\n  baseClass: string\n  /** Flat index across every band, which is the space selection gestures operate in. */\n  flatIndex: number\n  hierarchySlug: string\n  href: string\n  /**\n   * Turns the card into a plain selectable tile: no drag activation and no dragging treatment. Set\n   * by planes that have nowhere to drop, such as the flat collection grid.\n   */\n  isDragDisabled: boolean\n  isHierarchyGroup: boolean\n  isSelected: boolean\n  lockedUser?: User\n  onClickCapture: (event: React.MouseEvent, flatIndex: number) => void\n  onDoubleClick: (event: React.MouseEvent, href: string) => void\n  onKeyDown: (event: React.KeyboardEvent, flatIndex: number) => void\n  /**\n   * Called on pointer-down over an unselected card, so dragging one collapses the selection onto it\n   * before the drag payload is read - the way a file browser behaves.\n   */\n  onPointerDownUnselected: (flatIndex: number) => void\n  parentFieldName: string\n  /**\n   * Hands the card element to the plane, which hit-tests it during marquee selection.\n   */\n  registerNode: (flatIndex: number, node: HTMLElement | null) => void\n  row: TableRow\n  /**\n   * Payload for dragging the whole current selection. Shared by every selected card, so it is built\n   * once per render rather than per card.\n   */\n  selectionDragData: HierarchyDragData\n  showTypePill: boolean\n  title: string\n}\n\n/**\n * One card in the plane: a drag source always, and a drop target when it is a folder.\n *\n * Exists as its own component because `useDraggable`/`useDroppable` are hooks and so cannot be\n * called inside the plane's row loop.\n */\nexport const PlaneItem: React.FC<PlaneItemProps> = ({\n  ancestorIds,\n  baseClass,\n  flatIndex,\n  hierarchySlug,\n  href,\n  isDragDisabled,\n  isHierarchyGroup,\n  isSelected,\n  lockedUser,\n  onClickCapture,\n  onDoubleClick,\n  onKeyDown,\n  onPointerDownUnselected,\n  parentFieldName,\n  registerNode,\n  row,\n  selectionDragData,\n  showTypePill,\n  title,\n}) => {\n  const { activeDrag, canDrop } = useHierarchyDnd()\n\n  const rowDragData = useMemo<HierarchyDragData>(\n    () => ({\n      type: 'hierarchy-items',\n      items: [{ id: row.id, collectionSlug: row._collectionSlug, title }],\n      onMoveSuccess: selectionDragData.onMoveSuccess,\n      preview: [<DragPreviewItem isHierarchyGroup={isHierarchyGroup} key=\"preview\" row={row} />],\n    }),\n    [isHierarchyGroup, row, selectionDragData.onMoveSuccess, title],\n  )\n\n  // Dragging a card that is part of the selection moves the whole selection; dragging an unselected\n  // one moves just it.\n  const dragData = isSelected ? selectionDragData : rowDragData\n\n  const dropData = useMemo<HierarchyDropData | undefined>(\n    () =>\n      isHierarchyGroup\n        ? {\n            type: 'hierarchy-folder',\n            allowedCollections: row._allowedCollections as string[] | undefined,\n            ancestorIds,\n            folderId: row.id,\n            hierarchySlug,\n            parentFieldName,\n            title,\n          }\n        : undefined,\n    [ancestorIds, hierarchySlug, isHierarchyGroup, parentFieldName, row, title],\n  )\n\n  const rowKey = `${row._collectionSlug}-${row.id}`\n\n  const {\n    attributes,\n    isDragging,\n    listeners,\n    setNodeRef: setDragRef,\n  } = useDraggable({\n    id: `hierarchy-card-${rowKey}`,\n    data: dragData,\n    disabled: isDragDisabled || Boolean(lockedUser),\n  })\n\n  const { isOver, setNodeRef: setDropRef } = useDroppable({\n    id: `hierarchy-card-drop-${rowKey}`,\n    data: dropData,\n    disabled: isDragDisabled || !dropData,\n  })\n\n  const dropState = isOver && dropData ? (canDrop(dropData) ? 'over' : 'invalid') : undefined\n\n  // A folder is both a drag source and a drop target, and the plane needs the same node for marquee\n  // hit-testing, so one callback fans it out to all three.\n  const setNodeRef = (node: HTMLElement | null) => {\n    setDragRef(node)\n    setDropRef(node)\n    registerNode(flatIndex, node)\n  }\n\n  /*\n   * Every card in the active drag fades, not just the one under the pointer, so a multi-card move\n   * shows what is travelling. Membership is tested against the drag's own items rather than by\n   * comparing payload identity, which would silently stop matching the moment the plane re-rendered\n   * and rebuilt the shared selection payload mid-drag.\n   */\n  const isBeingDragged =\n    !isDragDisabled &&\n    (isDragging ||\n      Boolean(\n        activeDrag?.items.some(\n          (item) =>\n            item.collectionSlug === row._collectionSlug && String(item.id) === String(row.id),\n        ),\n      ))\n\n  /*\n   * dnd-kit's sensors activate through listeners named exactly `onPointerDown` and `onKeyDown`, which\n   * are also the events this card needs for selection. Spreading `listeners` and then declaring\n   * either prop would silently overwrite the activator and no drag would ever start, so the two are\n   * composed by hand and the rest of the listeners spread as-is.\n   */\n  const {\n    onKeyDown: onDragKeyDown,\n    onPointerDown: onDragPointerDown,\n    ...remainingListeners\n  } = listeners ?? {}\n\n  return (\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the card's own link remains the keyboard-operable control; these handlers only layer pointer selection and drag gestures on top of it\n    <li\n      {...attributes}\n      {...remainingListeners}\n      className={[`${baseClass}__item`, isBeingDragged && `${baseClass}__item--dragging`]\n        .filter(Boolean)\n        .join(' ')}\n      onClickCapture={(event) => onClickCapture(event, flatIndex)}\n      onDoubleClick={(event) => onDoubleClick(event, href)}\n      onKeyDown={(event) => {\n        onDragKeyDown?.(event)\n        onKeyDown(event, flatIndex)\n      }}\n      onPointerDown={(event) => {\n        // The sensor goes first so it sees the untouched event; the selection collapse that follows\n        // only schedules React state, which the sensor never reads.\n        onDragPointerDown?.(event)\n\n        if (!isSelected) {\n          onPointerDownUnselected(flatIndex)\n        }\n      }}\n      ref={setNodeRef}\n    >\n      <HierarchyCard\n        dropState={dropState}\n        href={href}\n        isHierarchyGroup={isHierarchyGroup}\n        isSelected={isSelected}\n        lockedUser={lockedUser}\n        row={row}\n        showTypePill={showTypePill}\n        title={title}\n      />\n    </li>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/views/HierarchyList/HierarchyCards/getThumbnailSrc.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Matches the upload thumbnail derivation used by the hierarchy table cells: images resolve to the
+ * best fit from the generated sizes, everything else falls back to the configured thumbnail URL.
+ */
+export declare function getThumbnailSrc({ doc }: {
+    doc: Record<string, unknown>;
+}): string | undefined;
+//# sourceMappingURL=getThumbnailSrc.d.ts.map

package/dist/views/HierarchyList/HierarchyCards/getThumbnailSrc.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getThumbnailSrc.d.ts","sourceRoot":"","sources":["../../../../src/views/HierarchyList/HierarchyCards/getThumbnailSrc.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAAE,GAAG,EAAE,EAAE;IAAE,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CAAE,GAAG,MAAM,GAAG,SAAS,CAc7F"}

package/dist/views/HierarchyList/HierarchyCards/getThumbnailSrc.js

@@ -0,0 +1,21 @@
+import { getBestFitFromSizes, isImage } from 'payload/shared';
+/**
+ * Matches the upload thumbnail derivation used by the hierarchy table cells: images resolve to the
+ * best fit from the generated sizes, everything else falls back to the configured thumbnail URL.
+ */
+export function getThumbnailSrc({
+  doc
+}) {
+  const mimeType = doc.mimeType;
+  const isFileImage = mimeType ? isImage(mimeType) : false;
+  if (!isFileImage) {
+    return doc.thumbnailURL;
+  }
+  return getBestFitFromSizes({
+    sizes: doc.sizes,
+    thumbnailURL: doc.thumbnailURL,
+    url: doc.url,
+    width: doc.width
+  });
+}
+//# sourceMappingURL=getThumbnailSrc.js.map

package/dist/views/HierarchyList/HierarchyCards/getThumbnailSrc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getThumbnailSrc.js","names":["getBestFitFromSizes","isImage","getThumbnailSrc","doc","mimeType","isFileImage","thumbnailURL","sizes","url","width"],"sources":["../../../../src/views/HierarchyList/HierarchyCards/getThumbnailSrc.ts"],"sourcesContent":["import { getBestFitFromSizes, isImage } from 'payload/shared'\n\n/**\n * Matches the upload thumbnail derivation used by the hierarchy table cells: images resolve to the\n * best fit from the generated sizes, everything else falls back to the configured thumbnail URL.\n */\nexport function getThumbnailSrc({ doc }: { doc: Record<string, unknown> }): string | undefined {\n  const mimeType = doc.mimeType as string | undefined\n  const isFileImage = mimeType ? isImage(mimeType) : false\n\n  if (!isFileImage) {\n    return doc.thumbnailURL as string\n  }\n\n  return getBestFitFromSizes({\n    sizes: doc.sizes as Record<string, { url?: string; width?: number }>,\n    thumbnailURL: doc.thumbnailURL as string,\n    url: doc.url as string,\n    width: doc.width as number,\n  })\n}\n"],"mappings":"AAAA,SAASA,mBAAmB,EAAEC,OAAO,QAAQ;AAE7C;;;;AAIA,OAAO,SAASC,gBAAgB;EAAEC;AAAG,CAAoC;EACvE,MAAMC,QAAA,GAAWD,GAAA,CAAIC,QAAQ;EAC7B,MAAMC,WAAA,GAAcD,QAAA,GAAWH,OAAA,CAAQG,QAAA,IAAY;EAEnD,IAAI,CAACC,WAAA,EAAa;IAChB,OAAOF,GAAA,CAAIG,YAAY;EACzB;EAEA,OAAON,mBAAA,CAAoB;IACzBO,KAAA,EAAOJ,GAAA,CAAII,KAAK;IAChBD,YAAA,EAAcH,GAAA,CAAIG,YAAY;IAC9BE,GAAA,EAAKL,GAAA,CAAIK,GAAG;IACZC,KAAA,EAAON,GAAA,CAAIM;EACb;AACF","ignoreList":[]}