@payloadcms/ui 4.0.0-internal.cd47d20 → 4.0.0-internal.ce66a41

package/dist/elements/StepNav/index.css

@@ -3,7 +3,6 @@
     display: flex;
     align-items: center;
     min-width: 0;
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     line-height: var(--text-body-medium-line-height);
@@ -35,6 +34,11 @@
     }
   }
 
+  .step-nav .step-nav__item {
+    font: inherit;
+    letter-spacing: inherit;
+  }
+
   .step-nav__item {
     max-width: calc(var(--spacer-6) * 4);
     text-overflow: ellipsis;
@@ -54,12 +58,17 @@
 
   .step-nav__item:not(.step-nav__last) {
     flex-shrink: 0;
+    color: var(--color-text-secondary);
   }
 
-  .step-nav__last {
+  .step-nav__item.step-nav__last {
     min-width: var(--spacer-5);
     max-width: none;
-    color: var(--color-text-secondary);
+    color: var(--color-text);
+  }
+
+  .step-nav .step-nav__item.step-nav__last:hover {
+    background-color: transparent;
   }
 
   .step-nav__item:has(.dashboard-breadcrumb-dropdown, .dashboard-breadcrumb-dropdown__editing) {
@@ -105,11 +114,8 @@
     justify-content: center;
   }
 
-  .step-nav__item:not(.btn),
-  .step-nav__item:has(.btn) {
-    margin-left: var(--spacer-2);
-  }
-  .step-nav__item:has(.btn) {
-    margin-left: 0;
+  .step-nav__item:not(.btn):not(:has(.btn)) {
+    padding-inline: var(--spacer-2);
+    border: var(--stroke-width-small) solid transparent;
   }
 }

package/dist/elements/Switch/index.css

@@ -58,7 +58,6 @@
   }
 
   .switch__label {
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     line-height: var(--text-body-medium-line-height);

package/dist/elements/Switch/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import './index.css';
 export type SwitchProps = {
+    readonly ariaLabel?: string;
     readonly checked?: boolean;
     readonly className?: string;
     readonly disabled?: boolean;

package/dist/elements/Switch/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Switch/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgB,MAAM,OAAO,CAAA;AAGpC,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;CAC/C,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA6CxC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Switch/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgB,MAAM,OAAO,CAAA;AAGpC,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;CAC/C,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA8CxC,CAAA"}

package/dist/elements/Switch/index.js

@@ -7,9 +7,10 @@ import { useTranslation } from '../../providers/Translation/index.js';
 import './index.css';
 const baseClass = 'switch';
 export const Switch = t0 => {
-  const $ = _c(16);
+  const $ = _c(17);
   const {
     id: idFromProps,
+    ariaLabel,
     checked: t1,
     className,
     disabled: t2,
@@ -49,9 +50,9 @@ export const Switch = t0 => {
   }
   const t6 = t5.join(" ");
   let t7;
-  if ($[6] !== checked || $[7] !== disabled || $[8] !== handleChange || $[9] !== id || $[10] !== label || $[11] !== t || $[12] !== t6) {
+  if ($[6] !== ariaLabel || $[7] !== checked || $[8] !== disabled || $[9] !== handleChange || $[10] !== id || $[11] !== label || $[12] !== t || $[13] !== t6) {
     const t8 = _jsx("input", {
-      "aria-label": typeof label === "string" ? label : t("general:toggle"),
+      "aria-label": ariaLabel ?? (typeof label === "string" ? label : t("general:toggle")),
       checked,
       className: `${baseClass}__input`,
       disabled,
@@ -61,12 +62,12 @@ export const Switch = t0 => {
     });
     const t9 = checked && `${baseClass}__track--checked`;
     let t10;
-    if ($[14] !== t9) {
+    if ($[15] !== t9) {
       t10 = [`${baseClass}__track`, t9].filter(Boolean);
-      $[14] = t9;
-      $[15] = t10;
+      $[15] = t9;
+      $[16] = t10;
     } else {
-      t10 = $[15];
+      t10 = $[16];
     }
     t7 = _jsxs("label", {
       className: t6,
@@ -82,16 +83,17 @@ export const Switch = t0 => {
         children: label
       }) : null]
     });
-    $[6] = checked;
-    $[7] = disabled;
-    $[8] = handleChange;
-    $[9] = id;
-    $[10] = label;
-    $[11] = t;
-    $[12] = t6;
-    $[13] = t7;
+    $[6] = ariaLabel;
+    $[7] = checked;
+    $[8] = disabled;
+    $[9] = handleChange;
+    $[10] = id;
+    $[11] = label;
+    $[12] = t;
+    $[13] = t6;
+    $[14] = t7;
   } else {
-    t7 = $[13];
+    t7 = $[14];
   }
   return t7;
 };

package/dist/elements/Switch/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useId","useTranslation","baseClass","Switch","t0","$","id","idFromProps","checked","t1","className","disabled","t2","label","onChange","undefined","t","generatedId","t3","e","target","handleChange","t4","t5","filter","Boolean","t6","join","t7","t8","_jsx","type","t9","t10","_jsxs","htmlFor","children"],"sources":["../../../src/elements/Switch/index.tsx"],"sourcesContent":["'use client'\n\nimport React, { useId } from 'react'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'switch'\n\nexport type SwitchProps = {\n  readonly checked?: boolean\n  readonly className?: string\n  readonly disabled?: boolean\n  readonly id?: string\n  readonly label?: React.ReactNode\n  readonly onChange?: (checked: boolean) => void\n}\n\nexport const Switch: React.FC<SwitchProps> = ({\n  id: idFromProps,\n  checked = false,\n  className,\n  disabled = false,\n  label,\n  onChange,\n}) => {\n  const { t } = useTranslation()\n  const generatedId = useId()\n  const id = idFromProps || generatedId\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (!disabled && onChange) {\n      onChange(e.target.checked)\n    }\n  }\n\n  return (\n    <label\n      className={[baseClass, disabled && `${baseClass}--disabled`, className]\n        .filter(Boolean)\n        .join(' ')}\n      htmlFor={id}\n    >\n      <input\n        aria-label={typeof label === 'string' ? label : t('general:toggle')}\n        checked={checked}\n        className={`${baseClass}__input`}\n        disabled={disabled}\n        id={id}\n        onChange={handleChange}\n        type=\"checkbox\"\n      />\n      <span\n        aria-hidden=\"true\"\n        className={[`${baseClass}__track`, checked && `${baseClass}__track--checked`]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        <span className={`${baseClass}__knob`} />\n      </span>\n      {label ? <span className={`${baseClass}__label`}>{label}</span> : null}\n    </label>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useId","useTranslation","baseClass","Switch","t0","$","id","idFromProps","ariaLabel","checked","t1","className","disabled","t2","label","onChange","undefined","t","generatedId","t3","e","target","handleChange","t4","t5","filter","Boolean","t6","join","t7","t8","_jsx","type","t9","t10","_jsxs","htmlFor","children"],"sources":["../../../src/elements/Switch/index.tsx"],"sourcesContent":["'use client'\n\nimport React, { useId } from 'react'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'switch'\n\nexport type SwitchProps = {\n  readonly ariaLabel?: string\n  readonly checked?: boolean\n  readonly className?: string\n  readonly disabled?: boolean\n  readonly id?: string\n  readonly label?: React.ReactNode\n  readonly onChange?: (checked: boolean) => void\n}\n\nexport const Switch: React.FC<SwitchProps> = ({\n  id: idFromProps,\n  ariaLabel,\n  checked = false,\n  className,\n  disabled = false,\n  label,\n  onChange,\n}) => {\n  const { t } = useTranslation()\n  const generatedId = useId()\n  const id = idFromProps || generatedId\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (!disabled && onChange) {\n      onChange(e.target.checked)\n    }\n  }\n\n  return (\n    <label\n      className={[baseClass, disabled && `${baseClass}--disabled`, className]\n        .filter(Boolean)\n        .join(' ')}\n      htmlFor={id}\n    >\n      <input\n        aria-label={ariaLabel ?? (typeof label === 'string' ? label : t('general:toggle'))}\n        checked={checked}\n        className={`${baseClass}__input`}\n        disabled={disabled}\n        id={id}\n        onChange={handleChange}\n        type=\"checkbox\"\n      />\n      <span\n        aria-hidden=\"true\"\n        className={[`${baseClass}__track`, checked && `${baseClass}__track--checked`]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        <span className={`${baseClass}__knob`} />\n      </span>\n      {label ? <span className={`${baseClass}__label`}>{label}</span> : null}\n    </label>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Table/DefaultCell/fields/Checkbox/index.css

@@ -5,7 +5,6 @@
     justify-content: center;
     padding: 0 var(--spacer-1);
     border-radius: var(--radius-medium);
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     line-height: var(--text-body-medium-line-height);

package/dist/elements/Table/DefaultCell/fields/Code/index.css

@@ -5,7 +5,6 @@
     justify-content: center;
     padding: 0 var(--spacer-1);
     border-radius: var(--radius-medium);
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     line-height: var(--text-body-medium-line-height);

package/dist/elements/Table/DefaultCell/fields/File/index.css

@@ -2,24 +2,29 @@
   .file {
     display: flex;
     flex-wrap: nowrap;
+    align-items: center;
+    gap: var(--spacer-2-5);
+    flex: 1;
+    min-width: 0;
   }
 
   .file__thumbnail {
-    display: inline-block;
-    max-width: var(--spacer-6);
-    height: var(--spacer-6);
-    border-radius: var(--radius-small);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--spacer-5);
+    max-width: var(--spacer-5);
+    height: var(--spacer-5);
+    background-color: var(--color-bg-secondary);
+    border-radius: var(--radius-medium);
+    overflow: hidden;
+    flex-shrink: 0;
   }
 
   .file__filename {
-    align-self: center;
-
-    [dir='ltr'] & {
-      margin-left: calc(var(--spacer-4) - var(--spacer-1));
-    }
-
-    [dir='rtl'] & {
-      margin-right: calc(var(--spacer-4) - var(--spacer-1));
-    }
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    line-height: var(--text-body-large-line-height);
   }
 }

package/dist/elements/Table/DefaultCell/fields/File/index.js

@@ -19,7 +19,7 @@ export const FileCell = ({
     let fileSrc = isFileImage ? rowData?.thumbnailURL || rowData?.url : rowData?.thumbnailURL;
     if (isFileImage) {
       fileSrc = getBestFitFromSizes({
-        sizes: rowData?.sizes,
+        sizes: rowData?.variants,
         thumbnailURL: rowData?.thumbnailURL,
         url: rowData?.url,
         width: rowData?.width

package/dist/elements/Table/DefaultCell/fields/File/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["getBestFitFromSizes","isImage","React","Thumbnail","baseClass","FileCell","cellData","filename","collectionConfig","field","rowData","fieldPreviewAllowed","displayPreview","undefined","previewAllowed","upload","isFileImage","mimeType","fileSrc","thumbnailURL","url","sizes","width","uploadConfig","imageCacheTag","cacheTags","updatedAt","_jsxs","className","_jsx","collectionSlug","slug","doc","size","String","_Fragment"],"sources":["../../../../../../src/elements/Table/DefaultCell/fields/File/index.tsx"],"sourcesContent":["'use client'\nimport type {\n  ClientCollectionConfig,\n  DefaultCellComponentProps,\n  TextFieldClient,\n  UploadFieldClient,\n} from 'payload'\n\nimport { getBestFitFromSizes, isImage } from 'payload/shared'\nimport React from 'react'\n\nimport './index.css'\nimport { Thumbnail } from '../../../../Thumbnail/index.js'\n\nconst baseClass = 'file'\n\nexport interface FileCellProps\n  extends DefaultCellComponentProps<TextFieldClient | UploadFieldClient> {\n  readonly collectionConfig: ClientCollectionConfig\n}\n\nexport const FileCell: React.FC<FileCellProps> = ({\n  cellData: filename,\n  collectionConfig,\n  field,\n  rowData,\n}) => {\n  const fieldPreviewAllowed = 'displayPreview' in field ? field.displayPreview : undefined\n  const previewAllowed = fieldPreviewAllowed ?? collectionConfig.upload?.displayPreview ?? true\n\n  if (previewAllowed) {\n    const isFileImage = isImage(rowData?.mimeType)\n    let fileSrc: string | undefined = isFileImage\n      ? rowData?.thumbnailURL || rowData?.url\n      : rowData?.thumbnailURL\n\n    if (isFileImage) {\n      fileSrc = getBestFitFromSizes({\n        sizes: rowData?.sizes,\n        thumbnailURL: rowData?.thumbnailURL,\n        url: rowData?.url,\n        width: rowData?.width,\n      })\n    }\n\n    const uploadConfig = collectionConfig?.upload\n    const imageCacheTag = uploadConfig?.cacheTags && rowData?.updatedAt\n\n    return (\n      <div className={baseClass}>\n        <Thumbnail\n          className={`${baseClass}__thumbnail`}\n          collectionSlug={collectionConfig?.slug}\n          doc={{\n            ...rowData,\n            filename,\n          }}\n          fileSrc={fileSrc}\n          imageCacheTag={imageCacheTag}\n          size=\"small\"\n          uploadConfig={uploadConfig}\n        />\n        <span className={`${baseClass}__filename`}>{String(filename)}</span>\n      </div>\n    )\n  } else {\n    return <>{String(filename)}</>\n  }\n}\n"],"mappings":"AAAA;;;AAQA,SAASA,mBAAmB,EAAEC,OAAO,QAAQ;AAC7C,OAAOC,KAAA,MAAW;AAElB,OAAO;AACP,SAASC,SAAS,QAAQ;AAE1B,MAAMC,SAAA,GAAY;AAOlB,OAAO,MAAMC,QAAA,GAAoCA,CAAC;EAChDC,QAAA,EAAUC,QAAQ;EAClBC,gBAAgB;EAChBC,KAAK;EACLC;AAAO,CACR;EACC,MAAMC,mBAAA,GAAsB,oBAAoBF,KAAA,GAAQA,KAAA,CAAMG,cAAc,GAAGC,SAAA;EAC/E,MAAMC,cAAA,GAAiBH,mBAAA,IAAuBH,gBAAA,CAAiBO,MAAM,EAAEH,cAAA,IAAkB;EAEzF,IAAIE,cAAA,EAAgB;IAClB,MAAME,WAAA,GAAcf,OAAA,CAAQS,OAAA,EAASO,QAAA;IACrC,IAAIC,OAAA,GAA8BF,WAAA,GAC9BN,OAAA,EAASS,YAAA,IAAgBT,OAAA,EAASU,GAAA,GAClCV,OAAA,EAASS,YAAA;IAEb,IAAIH,WAAA,EAAa;MACfE,OAAA,GAAUlB,mBAAA,CAAoB;QAC5BqB,KAAA,EAAOX,OAAA,EAASW,KAAA;QAChBF,YAAA,EAAcT,OAAA,EAASS,YAAA;QACvBC,GAAA,EAAKV,OAAA,EAASU,GAAA;QACdE,KAAA,EAAOZ,OAAA,EAASY;MAClB;IACF;IAEA,MAAMC,YAAA,GAAef,gBAAA,EAAkBO,MAAA;IACvC,MAAMS,aAAA,GAAgBD,YAAA,EAAcE,SAAA,IAAaf,OAAA,EAASgB,SAAA;IAE1D,oBACEC,KAAA,CAAC;MAAIC,SAAA,EAAWxB,SAAA;8BACdyB,IAAA,CAAC1B,SAAA;QACCyB,SAAA,EAAW,GAAGxB,SAAA,aAAsB;QACpC0B,cAAA,EAAgBtB,gBAAA,EAAkBuB,IAAA;QAClCC,GAAA,EAAK;UACH,GAAGtB,OAAO;UACVH;QACF;QACAW,OAAA,EAASA,OAAA;QACTM,aAAA,EAAeA,aAAA;QACfS,IAAA,EAAK;QACLV,YAAA,EAAcA;uBAEhBM,IAAA,CAAC;QAAKD,SAAA,EAAW,GAAGxB,SAAA,YAAqB;kBAAG8B,MAAA,CAAO3B,QAAA;;;EAGzD,OAAO;IACL,oBAAOsB,IAAA,CAAAM,SAAA;gBAAGD,MAAA,CAAO3B,QAAA;;EACnB;AACF","ignoreList":[]}
+{"version":3,"file":"index.js","names":["getBestFitFromSizes","isImage","React","Thumbnail","baseClass","FileCell","cellData","filename","collectionConfig","field","rowData","fieldPreviewAllowed","displayPreview","undefined","previewAllowed","upload","isFileImage","mimeType","fileSrc","thumbnailURL","url","sizes","variants","width","uploadConfig","imageCacheTag","cacheTags","updatedAt","_jsxs","className","_jsx","collectionSlug","slug","doc","size","String","_Fragment"],"sources":["../../../../../../src/elements/Table/DefaultCell/fields/File/index.tsx"],"sourcesContent":["'use client'\nimport type {\n  ClientCollectionConfig,\n  DefaultCellComponentProps,\n  TextFieldClient,\n  UploadFieldClient,\n} from 'payload'\n\nimport { getBestFitFromSizes, isImage } from 'payload/shared'\nimport React from 'react'\n\nimport './index.css'\nimport { Thumbnail } from '../../../../Thumbnail/index.js'\n\nconst baseClass = 'file'\n\nexport interface FileCellProps\n  extends DefaultCellComponentProps<TextFieldClient | UploadFieldClient> {\n  readonly collectionConfig: ClientCollectionConfig\n}\n\nexport const FileCell: React.FC<FileCellProps> = ({\n  cellData: filename,\n  collectionConfig,\n  field,\n  rowData,\n}) => {\n  const fieldPreviewAllowed = 'displayPreview' in field ? field.displayPreview : undefined\n  const previewAllowed = fieldPreviewAllowed ?? collectionConfig.upload?.displayPreview ?? true\n\n  if (previewAllowed) {\n    const isFileImage = isImage(rowData?.mimeType)\n    let fileSrc: string | undefined = isFileImage\n      ? rowData?.thumbnailURL || rowData?.url\n      : rowData?.thumbnailURL\n\n    if (isFileImage) {\n      fileSrc = getBestFitFromSizes({\n        sizes: rowData?.variants,\n        thumbnailURL: rowData?.thumbnailURL,\n        url: rowData?.url,\n        width: rowData?.width,\n      })\n    }\n\n    const uploadConfig = collectionConfig?.upload\n    const imageCacheTag = uploadConfig?.cacheTags && rowData?.updatedAt\n\n    return (\n      <div className={baseClass}>\n        <Thumbnail\n          className={`${baseClass}__thumbnail`}\n          collectionSlug={collectionConfig?.slug}\n          doc={{\n            ...rowData,\n            filename,\n          }}\n          fileSrc={fileSrc}\n          imageCacheTag={imageCacheTag}\n          size=\"small\"\n          uploadConfig={uploadConfig}\n        />\n        <span className={`${baseClass}__filename`}>{String(filename)}</span>\n      </div>\n    )\n  } else {\n    return <>{String(filename)}</>\n  }\n}\n"],"mappings":"AAAA;;;AAQA,SAASA,mBAAmB,EAAEC,OAAO,QAAQ;AAC7C,OAAOC,KAAA,MAAW;AAElB,OAAO;AACP,SAASC,SAAS,QAAQ;AAE1B,MAAMC,SAAA,GAAY;AAOlB,OAAO,MAAMC,QAAA,GAAoCA,CAAC;EAChDC,QAAA,EAAUC,QAAQ;EAClBC,gBAAgB;EAChBC,KAAK;EACLC;AAAO,CACR;EACC,MAAMC,mBAAA,GAAsB,oBAAoBF,KAAA,GAAQA,KAAA,CAAMG,cAAc,GAAGC,SAAA;EAC/E,MAAMC,cAAA,GAAiBH,mBAAA,IAAuBH,gBAAA,CAAiBO,MAAM,EAAEH,cAAA,IAAkB;EAEzF,IAAIE,cAAA,EAAgB;IAClB,MAAME,WAAA,GAAcf,OAAA,CAAQS,OAAA,EAASO,QAAA;IACrC,IAAIC,OAAA,GAA8BF,WAAA,GAC9BN,OAAA,EAASS,YAAA,IAAgBT,OAAA,EAASU,GAAA,GAClCV,OAAA,EAASS,YAAA;IAEb,IAAIH,WAAA,EAAa;MACfE,OAAA,GAAUlB,mBAAA,CAAoB;QAC5BqB,KAAA,EAAOX,OAAA,EAASY,QAAA;QAChBH,YAAA,EAAcT,OAAA,EAASS,YAAA;QACvBC,GAAA,EAAKV,OAAA,EAASU,GAAA;QACdG,KAAA,EAAOb,OAAA,EAASa;MAClB;IACF;IAEA,MAAMC,YAAA,GAAehB,gBAAA,EAAkBO,MAAA;IACvC,MAAMU,aAAA,GAAgBD,YAAA,EAAcE,SAAA,IAAahB,OAAA,EAASiB,SAAA;IAE1D,oBACEC,KAAA,CAAC;MAAIC,SAAA,EAAWzB,SAAA;8BACd0B,IAAA,CAAC3B,SAAA;QACC0B,SAAA,EAAW,GAAGzB,SAAA,aAAsB;QACpC2B,cAAA,EAAgBvB,gBAAA,EAAkBwB,IAAA;QAClCC,GAAA,EAAK;UACH,GAAGvB,OAAO;UACVH;QACF;QACAW,OAAA,EAASA,OAAA;QACTO,aAAA,EAAeA,aAAA;QACfS,IAAA,EAAK;QACLV,YAAA,EAAcA;uBAEhBM,IAAA,CAAC;QAAKD,SAAA,EAAW,GAAGzB,SAAA,YAAqB;kBAAG+B,MAAA,CAAO5B,QAAA;;;EAGzD,OAAO;IACL,oBAAOuB,IAAA,CAAAM,SAAA;gBAAGD,MAAA,CAAO5B,QAAA;;EACnB;AACF","ignoreList":[]}

package/dist/elements/Table/DefaultCell/fields/Hierarchy/index.css

@@ -4,14 +4,33 @@
     align-items: center;
   }
 
-  .hierarchy-cell__pill {
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    gap: var(--spacer-2);
+  .hierarchy-cell__button {
+    margin: 0;
+    font-weight: normal;
+
+    .btn__content {
+      gap: 0;
+    }
 
-    &:hover {
-      background-color: var(--color-bg-hover);
+    .btn__label {
+      min-inline-size: 0;
     }
   }
+
+  .hierarchy-cell__truncate {
+    display: block;
+    max-inline-size: calc(var(--spacer-6) * 4);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Dividers span the full menu width rather than sitting inside the list's inline padding. */
+  .hierarchy-cell__popup-content .popup-divider {
+    margin-inline: calc(var(--spacer-2) * -1);
+  }
+
+  .hierarchy-cell__control {
+    display: contents;
+  }
 }

package/dist/elements/Table/DefaultCell/fields/Hierarchy/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/Hierarchy/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAEjF,OAAO,KAA4D,MAAM,OAAO,CAAA;AAchF,OAAO,aAAa,CAAA;AAKpB,MAAM,MAAM,kBAAkB,GAAG,yBAAyB,CAAC,uBAAuB,CAAC,CAAA;AAEnF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAgOtD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/Hierarchy/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAEjF,OAAO,KAA4D,MAAM,OAAO,CAAA;AAmBhF,OAAO,aAAa,CAAA;AAKpB,MAAM,MAAM,kBAAkB,GAAG,yBAAyB,CAAC,uBAAuB,CAAC,CAAA;AAEnF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA2QtD,CAAA"}

package/dist/elements/Table/DefaultCell/fields/Hierarchy/index.js

@@ -2,6 +2,7 @@
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { toast } from 'sonner';
 import { useIntersect } from '../../../../../hooks/useIntersect.js';
 import { FolderIcon } from '../../../../../icons/Folder/index.js';
 import { TagIcon } from '../../../../../icons/Tag/index.js';
@@ -9,6 +10,7 @@ import { useConfig } from '../../../../../providers/Config/index.js';
 import { useTranslation } from '../../../../../providers/Translation/index.js';
 import { canUseDOM } from '../../../../../utilities/canUseDOM.js';
 import { formatDocTitle } from '../../../../../utilities/formatDocTitle/index.js';
+import { getEffectiveHierarchyCollections, getHierarchyCollectionRestrictions } from '../../../../../utilities/hierarchyCollectionRestrictions.js';
 import { Button } from '../../../../Button/index.js';
 import { useHierarchyModal } from '../../../../Hierarchy/Modal/useHierarchyModal.js';
 import { useListRelationships } from '../../../RelationshipProvider/index.js';
@@ -46,7 +48,30 @@ export const HierarchyCell = ({
     collectionSlug: hierarchyCollectionSlug
   }) : undefined;
   // Use pre-rendered icon from server if available, otherwise determine on client
-  const hierarchyConfig = hierarchyCollectionConfig?.hierarchy && typeof hierarchyCollectionConfig.hierarchy === 'object' ? hierarchyCollectionConfig.hierarchy : undefined;
+  const {
+    hierarchyConfig,
+    relatedCollectionSlugs,
+    typeFieldName
+  } = useMemo(() => getHierarchyCollectionRestrictions({
+    collectionConfig: hierarchyCollectionConfig
+  }), [hierarchyCollectionConfig]);
+  const filterByCollection = useMemo(() => {
+    if (!hierarchyCollectionSlug) {
+      return undefined;
+    }
+    if (collectionSlug !== hierarchyCollectionSlug) {
+      return [collectionSlug];
+    }
+    if (!typeFieldName) {
+      return undefined;
+    }
+    const allowedCollections = rowData[typeFieldName];
+    return getEffectiveHierarchyCollections({
+      allowedCollections: Array.isArray(allowedCollections) ? allowedCollections : undefined,
+      relatedCollectionSlugs
+    });
+  }, [collectionSlug, hierarchyCollectionSlug, relatedCollectionSlugs, rowData, typeFieldName]);
+  const disabledIds = useMemo(() => collectionSlug === hierarchyCollectionSlug && rowData.id !== undefined ? new Set([rowData.id]) : undefined, [collectionSlug, hierarchyCollectionSlug, rowData.id]);
   // Pre-rendered icons from server (supports custom icons)
   const preRenderedIcon = customCellProps?.hierarchyIcon;
   const preRenderedSmallIcon = customCellProps?.hierarchySmallIcon;
@@ -62,12 +87,14 @@ export const HierarchyCell = ({
   }, [hierarchyConfig, preRenderedIcon]);
   // Full icon for modal subheader
   const drawerIcon = preRenderedIcon || fallbackIcon;
-  // Small icon for compact display (pill button)
+  // Small icon for compact display
   const displayIcon = preRenderedSmallIcon ?? drawerIcon;
   // Set up the hierarchy modal
   const [HierarchyModal,, {
     openModal
   }] = useHierarchyModal({
+    disabledIds,
+    filterByCollection,
     hierarchyCollectionSlug: hierarchyCollectionSlug || '',
     Icon: drawerIcon
   });
@@ -149,7 +176,13 @@ export const HierarchyCell = ({
         },
         method: 'PATCH'
       });
-      if (response.ok && typeof relationTo === 'string') {
+      if (!response.ok) {
+        const responseData = await response.json().catch(() => null);
+        const errorMessage = responseData?.errors?.[0]?.message || responseData?.error || responseData?.message || t('error:unknown');
+        toast.error(errorMessage);
+        return;
+      }
+      if (typeof relationTo === 'string') {
         // Update local state with new selection to avoid page reload
         const newValues = selectedIds.map(id => ({
           relationTo,
@@ -161,11 +194,12 @@ export const HierarchyCell = ({
           getRelationships(newValues);
         }
       }
-    } catch (_error) {
-      // swallow error and close modal anyway, user can try again
+    } catch {
+      toast.error(t('error:unknown'));
+      return;
     }
     closeModal();
-  }, [collectionSlug, config, field.name, hasMany, rowData, relationTo, getRelationships]);
+  }, [collectionSlug, config, field.name, hasMany, rowData, relationTo, getRelationships, t]);
   // Build display labels
   const labels = useMemo(() => {
     return values.map(({
@@ -194,8 +228,8 @@ export const HierarchyCell = ({
     className: baseClass,
     ref: intersectionRef,
     children: [/*#__PURE__*/_jsx(Button, {
-      buttonStyle: "pill",
-      className: `${baseClass}__pill`,
+      buttonStyle: "secondary",
+      className: `${baseClass}__button`,
       icon: displayIcon,
       iconPosition: "left",
       margin: false,

package/dist/elements/Table/DefaultCell/fields/Hierarchy/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","useIntersect","FolderIcon","TagIcon","useConfig","useTranslation","canUseDOM","formatDocTitle","Button","useHierarchyModal","useListRelationships","baseClass","HierarchyCell","cellData","cellDataFromProps","collectionSlug","customCellProps","field","rowData","relationTo","undefined","hasMany","config","getEntityConfig","intersectionRef","entry","values","setValues","documents","getRelationships","hasRequestedRef","prevCellDataRef","i18n","t","isAboveViewport","boundingClientRect","top","window","innerHeight","hierarchyCollectionSlug","hierarchyCollectionConfig","hierarchyConfig","hierarchy","preRenderedIcon","hierarchyIcon","preRenderedSmallIcon","hierarchySmallIcon","fallbackIcon","IconComponent","allowHasMany","_jsx","drawerIcon","displayIcon","HierarchyModal","openModal","Icon","hasMountedModal","setHasMountedModal","shouldOpenAfterMountRef","handleOpenModal","current","formattedValues","arrayCellData","Array","isArray","forEach","cell","push","value","initialSelections","data","map","item","handleSave","closeModal","selections","selectedIds","from","keys","newValue","response","fetch","serverURL","routes","api","id","body","JSON","stringify","name","credentials","headers","method","ok","newValues","length","_error","labels","rel","document","relatedCollection","collectionConfig","dateFormat","admin","fallback","displayText","join","isLoading","some","_jsxs","className","ref","buttonStyle","icon","iconPosition","margin","onClick","size","onSave"],"sources":["../../../../../../src/elements/Table/DefaultCell/fields/Hierarchy/index.tsx"],"sourcesContent":["'use client'\nimport type { DefaultCellComponentProps, RelationshipFieldClient } from 'payload'\n\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\nimport type { SelectionWithPath } from '../../../../Hierarchy/Modal/types.js'\n\nimport { useIntersect } from '../../../../../hooks/useIntersect.js'\nimport { FolderIcon } from '../../../../../icons/Folder/index.js'\nimport { TagIcon } from '../../../../../icons/Tag/index.js'\nimport { useConfig } from '../../../../../providers/Config/index.js'\nimport { useTranslation } from '../../../../../providers/Translation/index.js'\nimport { canUseDOM } from '../../../../../utilities/canUseDOM.js'\nimport { formatDocTitle } from '../../../../../utilities/formatDocTitle/index.js'\nimport { Button } from '../../../../Button/index.js'\nimport { useHierarchyModal } from '../../../../Hierarchy/Modal/useHierarchyModal.js'\nimport { useListRelationships } from '../../../RelationshipProvider/index.js'\nimport './index.css'\n\ntype Value = { relationTo: string; value: number | string }\nconst baseClass = 'hierarchy-cell'\n\nexport type HierarchyCellProps = DefaultCellComponentProps<RelationshipFieldClient>\n\nexport const HierarchyCell: React.FC<HierarchyCellProps> = ({\n  cellData: cellDataFromProps,\n  collectionSlug,\n  customCellProps,\n  field,\n  rowData,\n}) => {\n  const relationTo = 'relationTo' in field ? field.relationTo : undefined\n  const hasMany = field.hasMany ?? false\n\n  const { config, getEntityConfig } = useConfig()\n  const [intersectionRef, entry] = useIntersect()\n  const [values, setValues] = useState<Value[]>([])\n  const { documents, getRelationships } = useListRelationships()\n  const hasRequestedRef = useRef(false)\n  const prevCellDataRef = useRef<typeof cellDataFromProps>(undefined)\n  const { i18n, t } = useTranslation()\n\n  const isAboveViewport = canUseDOM ? entry?.boundingClientRect?.top < window.innerHeight : false\n\n  // Get the hierarchy collection config\n  const hierarchyCollectionSlug = typeof relationTo === 'string' ? relationTo : undefined\n  const hierarchyCollectionConfig = hierarchyCollectionSlug\n    ? getEntityConfig({ collectionSlug: hierarchyCollectionSlug })\n    : undefined\n\n  // Use pre-rendered icon from server if available, otherwise determine on client\n  const hierarchyConfig =\n    hierarchyCollectionConfig?.hierarchy && typeof hierarchyCollectionConfig.hierarchy === 'object'\n      ? hierarchyCollectionConfig.hierarchy\n      : undefined\n\n  // Pre-rendered icons from server (supports custom icons)\n  const preRenderedIcon = customCellProps?.hierarchyIcon as React.ReactNode | undefined\n  const preRenderedSmallIcon = customCellProps?.hierarchySmallIcon as React.ReactNode | undefined\n\n  // Fallback icon for client-side rendering\n  const fallbackIcon = useMemo(() => {\n    if (preRenderedIcon) {\n      return null // Don't need fallback if we have pre-rendered icon\n    }\n    // Default based on allowHasMany: false = folder-like, true = tag-like\n    const IconComponent = hierarchyConfig?.allowHasMany === false ? FolderIcon : TagIcon\n    return <IconComponent />\n  }, [hierarchyConfig, preRenderedIcon])\n\n  // Full icon for modal subheader\n  const drawerIcon = preRenderedIcon || fallbackIcon\n  // Small icon for compact display (pill button)\n  const displayIcon = preRenderedSmallIcon ?? drawerIcon\n\n  // Set up the hierarchy modal\n  const [HierarchyModal, , { openModal }] = useHierarchyModal({\n    hierarchyCollectionSlug: hierarchyCollectionSlug || '',\n    Icon: drawerIcon,\n  })\n\n  // Lazy-mount the modal so its column browser doesn't eagerly fetch root items\n  // for every cell in the list view. Only mount once the user opens it.\n  const [hasMountedModal, setHasMountedModal] = useState(false)\n  const shouldOpenAfterMountRef = useRef(false)\n\n  const handleOpenModal = useCallback(() => {\n    if (hasMountedModal) {\n      openModal()\n      return\n    }\n    shouldOpenAfterMountRef.current = true\n    setHasMountedModal(true)\n  }, [hasMountedModal, openModal])\n\n  // Open the modal once it has mounted (state update from handleOpenModal).\n  useEffect(() => {\n    if (hasMountedModal && shouldOpenAfterMountRef.current) {\n      shouldOpenAfterMountRef.current = false\n      openModal()\n    }\n  }, [hasMountedModal, openModal])\n\n  // Fetch relationship data when visible\n  useEffect(() => {\n    // Reset tracking if data changed\n    if (prevCellDataRef.current !== cellDataFromProps) {\n      prevCellDataRef.current = cellDataFromProps\n      hasRequestedRef.current = false\n    }\n\n    if (\n      (cellDataFromProps || typeof cellDataFromProps === 'number') &&\n      isAboveViewport &&\n      !hasRequestedRef.current &&\n      typeof relationTo === 'string'\n    ) {\n      const formattedValues: Value[] = []\n      const arrayCellData = Array.isArray(cellDataFromProps)\n        ? cellDataFromProps\n        : [cellDataFromProps]\n\n      arrayCellData.forEach((cell) => {\n        if (typeof cell === 'object' && 'relationTo' in cell && 'value' in cell) {\n          formattedValues.push(cell)\n        }\n        if (typeof cell === 'number' || typeof cell === 'string') {\n          formattedValues.push({\n            relationTo,\n            value: cell,\n          })\n        }\n      })\n\n      getRelationships(formattedValues)\n      hasRequestedRef.current = true\n      setValues(formattedValues)\n    }\n  }, [cellDataFromProps, relationTo, isAboveViewport, getRelationships])\n\n  // Get current selection IDs for the modal\n  const initialSelections = useMemo(() => {\n    if (!cellDataFromProps) {\n      return []\n    }\n    const data = Array.isArray(cellDataFromProps) ? cellDataFromProps : [cellDataFromProps]\n    return data.map((item) => {\n      if (typeof item === 'object' && 'value' in item) {\n        return item.value\n      }\n      return item\n    }) as (number | string)[]\n  }, [cellDataFromProps])\n\n  // Handle save from modal\n  const handleSave = useCallback(\n    async ({\n      closeModal,\n      selections,\n    }: {\n      closeModal: () => void\n      selections: Map<number | string, SelectionWithPath>\n    }) => {\n      // Get selected IDs\n      const selectedIds = Array.from(selections.keys())\n      const newValue = hasMany ? selectedIds : (selectedIds[0] ?? null)\n\n      // Update the document via API\n      try {\n        const response = await fetch(\n          `${config.serverURL}${config.routes.api}/${collectionSlug}/${rowData.id}`,\n          {\n            body: JSON.stringify({\n              [field.name]: newValue,\n            }),\n            credentials: 'include',\n            headers: {\n              'Content-Type': 'application/json',\n            },\n            method: 'PATCH',\n          },\n        )\n\n        if (response.ok && typeof relationTo === 'string') {\n          // Update local state with new selection to avoid page reload\n          const newValues: Value[] = selectedIds.map((id) => ({\n            relationTo,\n            value: id,\n          }))\n          setValues(newValues)\n\n          // Request the new relationship docs to update the display\n          if (newValues.length > 0) {\n            getRelationships(newValues)\n          }\n        }\n      } catch (_error) {\n        // swallow error and close modal anyway, user can try again\n      }\n\n      closeModal()\n    },\n    [collectionSlug, config, field.name, hasMany, rowData, relationTo, getRelationships],\n  )\n\n  // Build display labels\n  const labels = useMemo(() => {\n    return values.map(({ relationTo: rel, value }) => {\n      const document = documents[rel]?.[value]\n      const relatedCollection = getEntityConfig({ collectionSlug: rel })\n\n      return formatDocTitle({\n        collectionConfig: relatedCollection,\n        data: document || null,\n        dateFormat: config.admin.dateFormat,\n        fallback: `${t('general:untitled')} - ID: ${value}`,\n        i18n,\n      })\n    })\n  }, [values, documents, getEntityConfig, config.admin.dateFormat, t, i18n])\n\n  const displayText = labels.length > 0 ? labels.join(', ') : t('general:none')\n  const isLoading =\n    values.length > 0 &&\n    values.some(({ relationTo: rel, value }) => documents[rel]?.[value] === null)\n\n  return (\n    <div className={baseClass} ref={intersectionRef}>\n      <Button\n        buttonStyle=\"pill\"\n        className={`${baseClass}__pill`}\n        icon={displayIcon}\n        iconPosition=\"left\"\n        margin={false}\n        onClick={handleOpenModal}\n        size=\"medium\"\n      >\n        {isLoading ? `${t('general:loading')}...` : displayText}\n      </Button>\n      {hierarchyCollectionSlug && hasMountedModal && (\n        <HierarchyModal\n          hasMany={hasMany}\n          initialSelections={initialSelections}\n          onSave={handleSave}\n        />\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","toast","useIntersect","FolderIcon","TagIcon","useConfig","useTranslation","canUseDOM","formatDocTitle","getEffectiveHierarchyCollections","getHierarchyCollectionRestrictions","Button","useHierarchyModal","useListRelationships","baseClass","HierarchyCell","cellData","cellDataFromProps","collectionSlug","customCellProps","field","rowData","relationTo","undefined","hasMany","config","getEntityConfig","intersectionRef","entry","values","setValues","documents","getRelationships","hasRequestedRef","prevCellDataRef","i18n","t","isAboveViewport","boundingClientRect","top","window","innerHeight","hierarchyCollectionSlug","hierarchyCollectionConfig","hierarchyConfig","relatedCollectionSlugs","typeFieldName","collectionConfig","filterByCollection","allowedCollections","Array","isArray","disabledIds","id","Set","preRenderedIcon","hierarchyIcon","preRenderedSmallIcon","hierarchySmallIcon","fallbackIcon","IconComponent","allowHasMany","_jsx","drawerIcon","displayIcon","HierarchyModal","openModal","Icon","hasMountedModal","setHasMountedModal","shouldOpenAfterMountRef","handleOpenModal","current","formattedValues","arrayCellData","forEach","cell","push","value","initialSelections","data","map","item","handleSave","closeModal","selections","selectedIds","from","keys","newValue","response","fetch","serverURL","routes","api","body","JSON","stringify","name","credentials","headers","method","ok","responseData","json","catch","errorMessage","errors","message","error","newValues","length","labels","rel","document","relatedCollection","dateFormat","admin","fallback","displayText","join","isLoading","some","_jsxs","className","ref","buttonStyle","icon","iconPosition","margin","onClick","size","onSave"],"sources":["../../../../../../src/elements/Table/DefaultCell/fields/Hierarchy/index.tsx"],"sourcesContent":["'use client'\nimport type { DefaultCellComponentProps, RelationshipFieldClient } from 'payload'\n\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport type { SelectionWithPath } from '../../../../Hierarchy/Modal/types.js'\n\nimport { useIntersect } from '../../../../../hooks/useIntersect.js'\nimport { FolderIcon } from '../../../../../icons/Folder/index.js'\nimport { TagIcon } from '../../../../../icons/Tag/index.js'\nimport { useConfig } from '../../../../../providers/Config/index.js'\nimport { useTranslation } from '../../../../../providers/Translation/index.js'\nimport { canUseDOM } from '../../../../../utilities/canUseDOM.js'\nimport { formatDocTitle } from '../../../../../utilities/formatDocTitle/index.js'\nimport {\n  getEffectiveHierarchyCollections,\n  getHierarchyCollectionRestrictions,\n} from '../../../../../utilities/hierarchyCollectionRestrictions.js'\nimport { Button } from '../../../../Button/index.js'\nimport { useHierarchyModal } from '../../../../Hierarchy/Modal/useHierarchyModal.js'\nimport { useListRelationships } from '../../../RelationshipProvider/index.js'\nimport './index.css'\n\ntype Value = { relationTo: string; value: number | string }\nconst baseClass = 'hierarchy-cell'\n\nexport type HierarchyCellProps = DefaultCellComponentProps<RelationshipFieldClient>\n\nexport const HierarchyCell: React.FC<HierarchyCellProps> = ({\n  cellData: cellDataFromProps,\n  collectionSlug,\n  customCellProps,\n  field,\n  rowData,\n}) => {\n  const relationTo = 'relationTo' in field ? field.relationTo : undefined\n  const hasMany = field.hasMany ?? false\n\n  const { config, getEntityConfig } = useConfig()\n  const [intersectionRef, entry] = useIntersect()\n  const [values, setValues] = useState<Value[]>([])\n  const { documents, getRelationships } = useListRelationships()\n  const hasRequestedRef = useRef(false)\n  const prevCellDataRef = useRef<typeof cellDataFromProps>(undefined)\n  const { i18n, t } = useTranslation()\n\n  const isAboveViewport = canUseDOM ? entry?.boundingClientRect?.top < window.innerHeight : false\n\n  // Get the hierarchy collection config\n  const hierarchyCollectionSlug = typeof relationTo === 'string' ? relationTo : undefined\n  const hierarchyCollectionConfig = hierarchyCollectionSlug\n    ? getEntityConfig({ collectionSlug: hierarchyCollectionSlug })\n    : undefined\n\n  // Use pre-rendered icon from server if available, otherwise determine on client\n  const { hierarchyConfig, relatedCollectionSlugs, typeFieldName } = useMemo(\n    () => getHierarchyCollectionRestrictions({ collectionConfig: hierarchyCollectionConfig }),\n    [hierarchyCollectionConfig],\n  )\n\n  const filterByCollection = useMemo(() => {\n    if (!hierarchyCollectionSlug) {\n      return undefined\n    }\n    if (collectionSlug !== hierarchyCollectionSlug) {\n      return [collectionSlug]\n    }\n    if (!typeFieldName) {\n      return undefined\n    }\n    const allowedCollections = rowData[typeFieldName]\n\n    return getEffectiveHierarchyCollections({\n      allowedCollections: Array.isArray(allowedCollections)\n        ? (allowedCollections as string[])\n        : undefined,\n      relatedCollectionSlugs,\n    })\n  }, [collectionSlug, hierarchyCollectionSlug, relatedCollectionSlugs, rowData, typeFieldName])\n\n  const disabledIds = useMemo(\n    () =>\n      collectionSlug === hierarchyCollectionSlug && rowData.id !== undefined\n        ? new Set([rowData.id])\n        : undefined,\n    [collectionSlug, hierarchyCollectionSlug, rowData.id],\n  )\n\n  // Pre-rendered icons from server (supports custom icons)\n  const preRenderedIcon = customCellProps?.hierarchyIcon as React.ReactNode | undefined\n  const preRenderedSmallIcon = customCellProps?.hierarchySmallIcon as React.ReactNode | undefined\n\n  // Fallback icon for client-side rendering\n  const fallbackIcon = useMemo(() => {\n    if (preRenderedIcon) {\n      return null // Don't need fallback if we have pre-rendered icon\n    }\n    // Default based on allowHasMany: false = folder-like, true = tag-like\n    const IconComponent = hierarchyConfig?.allowHasMany === false ? FolderIcon : TagIcon\n    return <IconComponent />\n  }, [hierarchyConfig, preRenderedIcon])\n\n  // Full icon for modal subheader\n  const drawerIcon = preRenderedIcon || fallbackIcon\n  // Small icon for compact display\n  const displayIcon = preRenderedSmallIcon ?? drawerIcon\n\n  // Set up the hierarchy modal\n  const [HierarchyModal, , { openModal }] = useHierarchyModal({\n    disabledIds,\n    filterByCollection,\n    hierarchyCollectionSlug: hierarchyCollectionSlug || '',\n    Icon: drawerIcon,\n  })\n\n  // Lazy-mount the modal so its column browser doesn't eagerly fetch root items\n  // for every cell in the list view. Only mount once the user opens it.\n  const [hasMountedModal, setHasMountedModal] = useState(false)\n  const shouldOpenAfterMountRef = useRef(false)\n\n  const handleOpenModal = useCallback(() => {\n    if (hasMountedModal) {\n      openModal()\n      return\n    }\n    shouldOpenAfterMountRef.current = true\n    setHasMountedModal(true)\n  }, [hasMountedModal, openModal])\n\n  // Open the modal once it has mounted (state update from handleOpenModal).\n  useEffect(() => {\n    if (hasMountedModal && shouldOpenAfterMountRef.current) {\n      shouldOpenAfterMountRef.current = false\n      openModal()\n    }\n  }, [hasMountedModal, openModal])\n\n  // Fetch relationship data when visible\n  useEffect(() => {\n    // Reset tracking if data changed\n    if (prevCellDataRef.current !== cellDataFromProps) {\n      prevCellDataRef.current = cellDataFromProps\n      hasRequestedRef.current = false\n    }\n\n    if (\n      (cellDataFromProps || typeof cellDataFromProps === 'number') &&\n      isAboveViewport &&\n      !hasRequestedRef.current &&\n      typeof relationTo === 'string'\n    ) {\n      const formattedValues: Value[] = []\n      const arrayCellData = Array.isArray(cellDataFromProps)\n        ? cellDataFromProps\n        : [cellDataFromProps]\n\n      arrayCellData.forEach((cell) => {\n        if (typeof cell === 'object' && 'relationTo' in cell && 'value' in cell) {\n          formattedValues.push(cell)\n        }\n        if (typeof cell === 'number' || typeof cell === 'string') {\n          formattedValues.push({\n            relationTo,\n            value: cell,\n          })\n        }\n      })\n\n      getRelationships(formattedValues)\n      hasRequestedRef.current = true\n      setValues(formattedValues)\n    }\n  }, [cellDataFromProps, relationTo, isAboveViewport, getRelationships])\n\n  // Get current selection IDs for the modal\n  const initialSelections = useMemo(() => {\n    if (!cellDataFromProps) {\n      return []\n    }\n    const data = Array.isArray(cellDataFromProps) ? cellDataFromProps : [cellDataFromProps]\n    return data.map((item) => {\n      if (typeof item === 'object' && 'value' in item) {\n        return item.value\n      }\n      return item\n    }) as (number | string)[]\n  }, [cellDataFromProps])\n\n  // Handle save from modal\n  const handleSave = useCallback(\n    async ({\n      closeModal,\n      selections,\n    }: {\n      closeModal: () => void\n      selections: Map<number | string, SelectionWithPath>\n    }) => {\n      // Get selected IDs\n      const selectedIds = Array.from(selections.keys())\n      const newValue = hasMany ? selectedIds : (selectedIds[0] ?? null)\n\n      // Update the document via API\n      try {\n        const response = await fetch(\n          `${config.serverURL}${config.routes.api}/${collectionSlug}/${rowData.id}`,\n          {\n            body: JSON.stringify({\n              [field.name]: newValue,\n            }),\n            credentials: 'include',\n            headers: {\n              'Content-Type': 'application/json',\n            },\n            method: 'PATCH',\n          },\n        )\n\n        if (!response.ok) {\n          const responseData = await response.json().catch(() => null)\n          const errorMessage =\n            responseData?.errors?.[0]?.message ||\n            responseData?.error ||\n            responseData?.message ||\n            t('error:unknown')\n\n          toast.error(errorMessage)\n          return\n        }\n\n        if (typeof relationTo === 'string') {\n          // Update local state with new selection to avoid page reload\n          const newValues: Value[] = selectedIds.map((id) => ({\n            relationTo,\n            value: id,\n          }))\n          setValues(newValues)\n\n          // Request the new relationship docs to update the display\n          if (newValues.length > 0) {\n            getRelationships(newValues)\n          }\n        }\n      } catch {\n        toast.error(t('error:unknown'))\n        return\n      }\n\n      closeModal()\n    },\n    [collectionSlug, config, field.name, hasMany, rowData, relationTo, getRelationships, t],\n  )\n\n  // Build display labels\n  const labels = useMemo(() => {\n    return values.map(({ relationTo: rel, value }) => {\n      const document = documents[rel]?.[value]\n      const relatedCollection = getEntityConfig({ collectionSlug: rel })\n\n      return formatDocTitle({\n        collectionConfig: relatedCollection,\n        data: document || null,\n        dateFormat: config.admin.dateFormat,\n        fallback: `${t('general:untitled')} - ID: ${value}`,\n        i18n,\n      })\n    })\n  }, [values, documents, getEntityConfig, config.admin.dateFormat, t, i18n])\n\n  const displayText = labels.length > 0 ? labels.join(', ') : t('general:none')\n  const isLoading =\n    values.length > 0 &&\n    values.some(({ relationTo: rel, value }) => documents[rel]?.[value] === null)\n\n  return (\n    <div className={baseClass} ref={intersectionRef}>\n      <Button\n        buttonStyle=\"secondary\"\n        className={`${baseClass}__button`}\n        icon={displayIcon}\n        iconPosition=\"left\"\n        margin={false}\n        onClick={handleOpenModal}\n        size=\"medium\"\n      >\n        {isLoading ? `${t('general:loading')}...` : displayText}\n      </Button>\n      {hierarchyCollectionSlug && hasMountedModal && (\n        <HierarchyModal\n          hasMany={hasMany}\n          initialSelections={initialSelections}\n          onSave={handleSave}\n        />\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Table/DefaultCell/fields/JSON/index.css

@@ -1,6 +1,5 @@
 @layer payload-default {
   .json-cell {
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     line-height: var(--text-body-medium-line-height);

package/dist/elements/Table/DefaultCell/fields/Status/index.css

@@ -5,7 +5,6 @@
     justify-content: center;
     padding: 0 var(--spacer-1);
     border-radius: var(--radius-medium);
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     line-height: var(--text-body-medium-line-height);

package/dist/elements/Table/GridNavigation/useGridNavigation.d.ts

@@ -0,0 +1,8 @@
+import type { RefObject } from 'react';
+/** Rove over rendered cells, including opaque server-rendered/custom cell contents. */
+export declare function useGridNavigation({ id, isEnabled, ref, }: {
+    id?: string;
+    isEnabled: boolean;
+    ref: RefObject<HTMLTableElement | null>;
+}): void;
+//# sourceMappingURL=useGridNavigation.d.ts.map

package/dist/elements/Table/GridNavigation/useGridNavigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGridNavigation.d.ts","sourceRoot":"","sources":["../../../../src/elements/Table/GridNavigation/useGridNavigation.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAatC,uFAAuF;AACvF,wBAAgB,iBAAiB,CAAC,EAChC,EAAE,EACF,SAAS,EACT,GAAG,GACJ,EAAE;IACD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,EAAE,OAAO,CAAA;IAClB,GAAG,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAA;CACxC,QAmYA"}