@payloadcms/ui 4.0.0-internal.21664f3 → 4.0.0-internal.2f0d313

package/dist/elements/SortHeader/index.js

@@ -3,30 +3,29 @@
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { SortDownIcon } from '../../icons/Sort/index.js';
+import { SortDownIcon, SortUpIcon } from '../../icons/Sort/index.js';
 import { useListQuery } from '../../providers/ListQuery/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import './index.css';
 const baseClass = 'sort-header';
 function useSort() {
-  const $ = _c(7);
+  const $ = _c(8);
   const {
     handleSortChange,
     orderableFieldName,
     query
   } = useListQuery();
   const querySort = Array.isArray(query.sort) ? query.sort[0] : query.sort;
-  const isActive = querySort === orderableFieldName;
+  const isAscending = querySort === orderableFieldName;
+  const isDescending = querySort === `-${orderableFieldName}`;
+  const isActive = isAscending || isDescending;
   let t0;
-  if ($[0] !== handleSortChange || $[1] !== isActive || $[2] !== orderableFieldName) {
+  if ($[0] !== handleSortChange || $[1] !== isAscending || $[2] !== orderableFieldName) {
     t0 = () => {
-      if (isActive) {
-        return;
-      }
-      handleSortChange(orderableFieldName);
+      handleSortChange(isAscending ? `-${orderableFieldName}` : orderableFieldName);
     };
     $[0] = handleSortChange;
-    $[1] = isActive;
+    $[1] = isAscending;
     $[2] = orderableFieldName;
     $[3] = t0;
   } else {
@@ -34,62 +33,66 @@ function useSort() {
   }
   const handleSortPress = t0;
   let t1;
-  if ($[4] !== handleSortPress || $[5] !== isActive) {
+  if ($[4] !== handleSortPress || $[5] !== isActive || $[6] !== isAscending) {
     t1 = {
       handleSortPress,
-      isActive
+      isActive,
+      isAscending
     };
     $[4] = handleSortPress;
     $[5] = isActive;
-    $[6] = t1;
+    $[6] = isAscending;
+    $[7] = t1;
   } else {
-    t1 = $[6];
+    t1 = $[7];
   }
   return t1;
 }
 export const SortHeader = props => {
-  const $ = _c(8);
+  const $ = _c(9);
   const {
     appearance
   } = props;
   const {
     handleSortPress,
-    isActive
+    isActive,
+    isAscending
   } = useSort();
   const {
     t
   } = useTranslation();
   let t0;
-  if ($[0] !== appearance || $[1] !== handleSortPress || $[2] !== isActive || $[3] !== t) {
+  if ($[0] !== appearance || $[1] !== handleSortPress || $[2] !== isActive || $[3] !== isAscending || $[4] !== t) {
     const t1 = t("general:sortByLabelDirection", {
-      direction: t("general:ascending"),
+      direction: isAscending ? t("general:descending") : t("general:ascending"),
       label: "Order"
     });
     const t2 = appearance && `${baseClass}--appearance-${appearance}`;
     const t3 = isActive && `${baseClass}--active`;
     let t4;
-    if ($[5] !== t2 || $[6] !== t3) {
+    if ($[6] !== t2 || $[7] !== t3) {
       t4 = [baseClass, t2, t3].filter(Boolean);
-      $[5] = t2;
-      $[6] = t3;
-      $[7] = t4;
+      $[6] = t2;
+      $[7] = t3;
+      $[8] = t4;
     } else {
-      t4 = $[7];
+      t4 = $[8];
     }
     t0 = _jsx("button", {
       "aria-label": t1,
       className: t4.join(" "),
       onClick: handleSortPress,
       type: "button",
-      children: _jsx(SortDownIcon, {})
+      children: isAscending ? _jsx(SortUpIcon, {}) : _jsx(SortDownIcon, {})
     });
     $[0] = appearance;
     $[1] = handleSortPress;
     $[2] = isActive;
-    $[3] = t;
-    $[4] = t0;
+    $[3] = isAscending;
+    $[4] = t;
+    $[5] = t0;
   } else {
-    t0 = $[4];
+    t0 = $[5];
   }
   return t0;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","SortDownIcon","useListQuery","useTranslation","baseClass","useSort","$","handleSortChange","orderableFieldName","query","querySort","Array","isArray","sort","isActive","t0","handleSortPress","t1","SortHeader","props","appearance","t","direction","label","t2","t3","t4","filter","Boolean","_jsx","className","join","onClick","type","children"],"sources":["../../../src/elements/SortHeader/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { SortDownIcon } from '../../icons/Sort/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.css'\n\nexport type SortHeaderProps = {\n  readonly appearance?: 'condensed' | 'default'\n  readonly disable?: boolean\n}\n\nconst baseClass = 'sort-header'\n\nfunction useSort() {\n  const { handleSortChange, orderableFieldName, query } = useListQuery()\n  const querySort = Array.isArray(query.sort) ? query.sort[0] : query.sort\n  const isActive = querySort === orderableFieldName\n\n  const handleSortPress = () => {\n    // If it's already sorted by the \"_order\" field, do nothing\n    if (isActive) {\n      return\n    }\n    // If NOT sorted by the \"_order\" field, sort by that field.\n    void handleSortChange(orderableFieldName)\n  }\n\n  return { handleSortPress, isActive }\n}\n\nexport const SortHeader: React.FC<SortHeaderProps> = (props) => {\n  const { appearance } = props\n  const { handleSortPress, isActive } = useSort()\n  const { t } = useTranslation()\n\n  return (\n    <button\n      aria-label={t('general:sortByLabelDirection', {\n        direction: t('general:ascending'),\n        label: 'Order',\n      })}\n      className={[\n        baseClass,\n        appearance && `${baseClass}--appearance-${appearance}`,\n        isActive && `${baseClass}--active`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onClick={handleSortPress}\n      type=\"button\"\n    >\n      <SortDownIcon />\n    </button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,MAAW;AAElB,SAASC,YAAY,QAAQ;AAC7B,SAASC,YAAY,QAAQ;AAC7B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAOP,MAAMC,SAAA,GAAY;AAElB,SAAAC,QAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EACE;IAAAQ,gBAAA;IAAAC,kBAAA;IAAAC;EAAA,IAAwDP,YAAA;EACxD,MAAAQ,SAAA,GAAkBC,KAAA,CAAAC,OAAA,CAAcH,KAAA,CAAAI,IAAU,IAAIJ,KAAA,CAAAI,IAAA,MAAgBJ,KAAA,CAAAI,IAAU;EACxE,MAAAC,QAAA,GAAiBJ,SAAA,KAAcF,kBAAA;EAAA,IAAAO,EAAA;EAAA,IAAAT,CAAA,QAAAC,gBAAA,IAAAD,CAAA,QAAAQ,QAAA,IAAAR,CAAA,QAAAE,kBAAA;IAEPO,EAAA,GAAAA,CAAA;MAAA,IAElBD,QAAA;QAAA;MAAA;MAICP,gBAAA,CAAiBC,kBAAA;IAAA;IACxBF,CAAA,MAAAC,gBAAA;IAAAD,CAAA,MAAAQ,QAAA;IAAAR,CAAA,MAAAE,kBAAA;IAAAF,CAAA,MAAAS,EAAA;EAAA;IAAAA,EAAA,GAAAT,CAAA;EAAA;EAPA,MAAAU,eAAA,GAAwBD,EAOxB;EAAA,IAAAE,EAAA;EAAA,IAAAX,CAAA,QAAAU,eAAA,IAAAV,CAAA,QAAAQ,QAAA;IAEOG,EAAA;MAAAD,eAAA;MAAAF;IAAA;IAA4BR,CAAA,MAAAU,eAAA;IAAAV,CAAA,MAAAQ,QAAA;IAAAR,CAAA,MAAAW,EAAA;EAAA;IAAAA,EAAA,GAAAX,CAAA;EAAA;EAAA,OAA5BW,EAA4B;AAAA;AAGrC,OAAO,MAAMC,UAAA,GAAwCC,KAAA;EAAA,MAAAb,CAAA,GAAAP,EAAA;EACnD;IAAAqB;EAAA,IAAuBD,KAAA;EACvB;IAAAH,eAAA;IAAAF;EAAA,IAAsCT,OAAA;EACtC;IAAAgB;EAAA,IAAclB,cAAA;EAAA,IAAAY,EAAA;EAAA,IAAAT,CAAA,QAAAc,UAAA,IAAAd,CAAA,QAAAU,eAAA,IAAAV,CAAA,QAAAQ,QAAA,IAAAR,CAAA,QAAAe,CAAA;IAIE,MAAAJ,EAAA,GAAAI,CAAA,CAAE;MAAAC,SAAA,EACDD,CAAA,CAAE;MAAAE,KAAA,EACN;IAAA,CACT;IAGE,MAAAC,EAAA,GAAAJ,UAAA,IAAc,GAAAhB,SAAA,gBAA4BgB,UAAA,EAAY;IACtD,MAAAK,EAAA,GAAAX,QAAA,IAAY,GAAAV,SAAA,UAAsB;IAAA,IAAAsB,EAAA;IAAA,IAAApB,CAAA,QAAAkB,EAAA,IAAAlB,CAAA,QAAAmB,EAAA;MAHzBC,EAAA,IAAAtB,SAAA,EAEToB,EAAsD,EACtDC,EAAkC,EAAAE,MAAA,CAAAC,OAE1B;MAAAtB,CAAA,MAAAkB,EAAA;MAAAlB,CAAA,MAAAmB,EAAA;MAAAnB,CAAA,MAAAoB,EAAA;IAAA;MAAAA,EAAA,GAAApB,CAAA;IAAA;IAVZS,EAAA,GAAAc,IAAA,CAAC;MAAA,cACaZ,EAGZ;MAAAa,SAAA,EACWJ,EAKD,CAAAK,IAAA,CACF;MAAAC,OAAA,EACChB,eAAA;MAAAiB,IAAA,EACJ;MAAAC,QAAA,EAELL,IAAA,CAAA5B,YAAA,IAAC;IAAA,C;;;;;;;;;SAfHc,E;CAkBJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","SortDownIcon","SortUpIcon","useListQuery","useTranslation","baseClass","useSort","$","handleSortChange","orderableFieldName","query","querySort","Array","isArray","sort","isAscending","isDescending","isActive","t0","handleSortPress","t1","SortHeader","props","appearance","t","direction","label","t2","t3","t4","filter","Boolean","_jsx","className","join","onClick","type","children"],"sources":["../../../src/elements/SortHeader/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { SortDownIcon, SortUpIcon } from '../../icons/Sort/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.css'\n\nexport type SortHeaderProps = {\n  readonly appearance?: 'condensed' | 'default'\n  readonly disable?: boolean\n}\n\nconst baseClass = 'sort-header'\n\nfunction useSort() {\n  const { handleSortChange, orderableFieldName, query } = useListQuery()\n  const querySort = Array.isArray(query.sort) ? query.sort[0] : query.sort\n  const isAscending = querySort === orderableFieldName\n  const isDescending = querySort === `-${orderableFieldName}`\n  const isActive = isAscending || isDescending\n\n  const handleSortPress = () => {\n    void handleSortChange(isAscending ? `-${orderableFieldName}` : orderableFieldName)\n  }\n\n  return { handleSortPress, isActive, isAscending }\n}\n\nexport const SortHeader: React.FC<SortHeaderProps> = (props) => {\n  const { appearance } = props\n  const { handleSortPress, isActive, isAscending } = useSort()\n  const { t } = useTranslation()\n\n  return (\n    <button\n      aria-label={t('general:sortByLabelDirection', {\n        direction: isAscending ? t('general:descending') : t('general:ascending'),\n        label: 'Order',\n      })}\n      className={[\n        baseClass,\n        appearance && `${baseClass}--appearance-${appearance}`,\n        isActive && `${baseClass}--active`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onClick={handleSortPress}\n      type=\"button\"\n    >\n      {isAscending ? <SortUpIcon /> : <SortDownIcon />}\n    </button>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/StepNav/index.css

@@ -2,15 +2,19 @@
   .step-nav {
     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);
     letter-spacing: var(--text-body-medium-letter-spacing);
     color: var(--color-text);
+    -webkit-user-select: none;
+    user-select: none;
 
     &::after {
       content: ' ';
+      flex-shrink: 0;
       position: sticky;
       top: 0;
       right: 0;
@@ -21,6 +25,7 @@
     a {
       display: flex;
       align-items: center;
+      min-width: 0;
       text-decoration: none;
       border-radius: var(--button-radius);
 
@@ -28,33 +33,78 @@
         cursor: pointer;
       }
     }
+  }
 
-    span {
-      max-width: calc(var(--spacer-6) * 4);
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
+  .step-nav__item {
+    max-width: calc(var(--spacer-6) * 4);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
 
-      &:has(.dashboard-breadcrumb-dropdown, .dashboard-breadcrumb-dropdown__editing) {
-        max-width: none;
-        overflow: visible;
-        white-space: normal;
-      }
+  .step-nav__item .btn__content {
+    min-width: 0;
+  }
+
+  .step-nav__item .btn__label {
+    min-width: 0;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .step-nav__item:not(.step-nav__last) {
+    flex-shrink: 0;
+  }
+
+  .step-nav__last {
+    min-width: var(--spacer-5);
+    max-width: none;
+    color: var(--color-text-secondary);
+  }
+
+  .step-nav__item:has(.dashboard-breadcrumb-dropdown, .dashboard-breadcrumb-dropdown__editing) {
+    max-width: none;
+    overflow: visible;
+    white-space: normal;
+  }
+
+  .step-nav__collapsed {
+    flex-shrink: 0;
+  }
+
+  .step-nav__collapsed-toggle {
+    padding: 0 var(--spacer-1);
+    color: var(--color-text);
+  }
+
+  .step-nav__measurer-clip {
+    position: absolute;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+  }
+
+  .step-nav__measurer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: inline-flex;
+    padding-right: var(--spacer-3);
+
+    .step-nav__item {
+      max-width: none;
     }
   }
 
   .step-nav__separator {
     color: var(--color-text-tertiary);
     width: var(--spacer-2);
+    flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
   }
 
-  .step-nav__last {
-    color: var(--color-text-secondary);
-  }
-
   .step-nav__item:not(.btn),
   .step-nav__item:has(.btn) {
     margin-left: var(--spacer-2);

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/StepNav/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAK7C,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAC1D,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAI5C,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC;IACtB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B,CA2EA,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,UAAU,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/StepNav/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAgD,MAAM,OAAO,CAAA;AAEpE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAM7C,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAC1D,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAM5C,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC;IACtB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B,CA6KA,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,UAAU,EAAE,CAAA"}

package/dist/elements/StepNav/index.js

@@ -1,21 +1,20 @@
 'use client';
 
-import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
-import React, { Fragment } from 'react';
+import React, { Fragment, useEffect, useRef, useState } from 'react';
 import { useConfig } from '../../providers/Config/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { Button } from '../Button/index.js';
+import { Popup, PopupList } from '../Popup/index.js';
 import { StepNavProvider, useStepNav } from './context.js';
 import './index.css';
 export { SetStepNav } from './SetStepNav.js';
 const baseClass = 'step-nav';
-const StepNav = t0 => {
-  const $ = _c(11);
-  const {
-    className
-  } = t0;
+const minItemsToCollapse = 4;
+const StepNav = ({
+  className
+}) => {
   const {
     i18n
   } = useTranslation();
@@ -23,75 +22,150 @@ const StepNav = t0 => {
     stepNav
   } = useStepNav();
   const {
-    config: t1
+    config: {
+      routes: {
+        admin
+      }
+    }
   } = useConfig();
-  const {
-    routes: t2
-  } = t1;
-  const {
-    admin
-  } = t2;
   const {
     t
   } = useTranslation();
+  const navRef = useRef(null);
+  const measurerRef = useRef(null);
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  // Check if first item is a dashboard dropdown (React element with no URL)
+  // In that case, it replaces the home element entirely
   const firstItem = stepNav[0];
-  let t3;
-  if ($[0] !== firstItem) {
-    t3 = firstItem && !firstItem.url && typeof firstItem.label !== "string" && React.isValidElement(firstItem.label);
-    $[0] = firstItem;
-    $[1] = t3;
-  } else {
-    t3 = $[1];
-  }
-  const hasDashboardDropdown = t3;
-  let t4;
-  if ($[2] !== admin || $[3] !== className || $[4] !== hasDashboardDropdown || $[5] !== i18n || $[6] !== stepNav || $[7] !== t) {
-    const stepNavItems = hasDashboardDropdown ? stepNav : [{
-      label: t("general:dashboard"),
-      url: admin
-    }, ...stepNav];
-    let t5;
-    if ($[9] !== className) {
-      t5 = [baseClass, className].filter(Boolean);
-      $[9] = className;
-      $[10] = t5;
-    } else {
-      t5 = $[10];
+  const hasDashboardDropdown = firstItem && !firstItem.url && typeof firstItem.label !== 'string' && /*#__PURE__*/React.isValidElement(firstItem.label);
+  const stepNavItems = hasDashboardDropdown ? stepNav : [{
+    label: t('general:dashboard'),
+    url: admin
+  }, ...stepNav];
+  const canCollapse = !hasDashboardDropdown && stepNavItems.length >= minItemsToCollapse;
+  // Collapse only when the expanded breadcrumbs (measured via the hidden
+  // measurer) can't fit the available width.
+  useEffect(() => {
+    if (!canCollapse) {
+      setIsCollapsed(false);
+      return;
     }
-    t4 = _jsx("nav", {
-      className: t5.join(" "),
-      children: stepNavItems.map((item, i) => {
-        const StepLabel = getTranslation(item.label, i18n);
-        const isLast = stepNavItems.length === i + 1;
-        const isFirst = i === 0;
-        return _jsxs(Fragment, {
-          children: [item.url ? _jsx(Button, {
-            buttonStyle: "ghost",
-            className: [`${baseClass}__item`, isLast ? `${baseClass}__last` : undefined, isFirst ? `${baseClass}__first` : undefined].filter(Boolean).join(" "),
-            el: "link",
-            url: item.url,
-            children: StepLabel
-          }) : _jsx("span", {
-            className: [`${baseClass}__item`, isLast ? `${baseClass}__last` : undefined, isFirst ? `${baseClass}__first` : undefined].filter(Boolean).join(" "),
-            children: StepLabel
-          }), !isLast && _jsx("span", {
-            className: `${baseClass}__separator`,
-            children: "/"
-          })]
-        }, i);
-      })
+    const nav = navRef.current;
+    const measurer = measurerRef.current;
+    const container = nav?.parentElement;
+    if (!nav || !measurer || !container) {
+      return;
+    }
+    const measure = () => {
+      const available = container.clientWidth;
+      const needed = measurer.getBoundingClientRect().width;
+      setIsCollapsed(needed - available > 1);
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(container);
+    // A web font finishing loading can change the measured width without the
+    // container resizing, so the ResizeObserver alone won't catch it.
+    let isEffectActive = true;
+    void document.fonts?.ready.then(() => {
+      if (isEffectActive) {
+        measure();
+      }
+    });
+    return () => {
+      isEffectActive = false;
+      observer.disconnect();
+    };
+  }, [canCollapse, stepNav, i18n, admin, t]);
+  const renderItem = (item, {
+    isFirst,
+    isLast
+  }) => {
+    const StepLabel = getTranslation(item.label, i18n);
+    const itemClassName = [`${baseClass}__item`, isLast ? `${baseClass}__last` : undefined, isFirst ? `${baseClass}__first` : undefined].filter(Boolean).join(' ');
+    if (item.url) {
+      return /*#__PURE__*/_jsx(Button, {
+        buttonStyle: "ghost",
+        className: itemClassName,
+        el: "link",
+        url: item.url,
+        children: StepLabel
+      });
+    }
+    return /*#__PURE__*/_jsx("span", {
+      className: itemClassName,
+      children: StepLabel
     });
-    $[2] = admin;
-    $[3] = className;
-    $[4] = hasDashboardDropdown;
-    $[5] = i18n;
-    $[6] = stepNav;
-    $[7] = t;
-    $[8] = t4;
-  } else {
-    t4 = $[8];
-  }
-  return t4;
+  };
+  const separator = /*#__PURE__*/_jsx("span", {
+    className: `${baseClass}__separator`,
+    children: "/"
+  });
+  const shouldCollapse = canCollapse && isCollapsed;
+  const collapsedItems = shouldCollapse ? stepNavItems.slice(1, -1) : [];
+  const lastItem = stepNavItems[stepNavItems.length - 1];
+  return /*#__PURE__*/_jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx("nav", {
+      className: [baseClass, className].filter(Boolean).join(' '),
+      ref: navRef,
+      children: shouldCollapse ? /*#__PURE__*/_jsxs(Fragment, {
+        children: [renderItem(stepNavItems[0], {
+          isFirst: true,
+          isLast: false
+        }), separator, /*#__PURE__*/_jsx(Popup, {
+          button: "…",
+          buttonAriaLabel: t('general:moreOptions'),
+          buttonClassName: `${baseClass}__collapsed-toggle`,
+          buttonType: "custom",
+          className: `${baseClass}__collapsed`,
+          horizontalAlign: "left",
+          noBackground: true,
+          render: ({
+            close
+          }) => /*#__PURE__*/_jsx(PopupList.ButtonGroup, {
+            className: `${baseClass}__collapsed-list`,
+            children: collapsedItems.map((item_0, i) => /*#__PURE__*/_jsx(PopupList.Button, {
+              href: item_0.url,
+              onClick: close,
+              children: getTranslation(item_0.label, i18n)
+            }, i))
+          }),
+          size: "fit-content",
+          verticalAlign: "bottom"
+        }), separator, renderItem(lastItem, {
+          isFirst: false,
+          isLast: true
+        })]
+      }) : stepNavItems.map((item_1, i_0) => {
+        const isLast_0 = stepNavItems.length === i_0 + 1;
+        const isFirst_0 = i_0 === 0;
+        return /*#__PURE__*/_jsxs(Fragment, {
+          children: [renderItem(item_1, {
+            isFirst: isFirst_0,
+            isLast: isLast_0
+          }), !isLast_0 && separator]
+        }, i_0);
+      })
+    }), canCollapse ? /*#__PURE__*/_jsx("span", {
+      "aria-hidden": "true",
+      className: `${baseClass}__measurer-clip`,
+      inert: true,
+      children: /*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__measurer`,
+        ref: measurerRef,
+        children: stepNavItems.map((item_2, i_1) => {
+          const isLast_1 = stepNavItems.length === i_1 + 1;
+          const isFirst_1 = i_1 === 0;
+          return /*#__PURE__*/_jsxs(Fragment, {
+            children: [renderItem(item_2, {
+              isFirst: isFirst_1,
+              isLast: isLast_1
+            }), !isLast_1 && separator]
+          }, i_1);
+        })
+      })
+    }) : null]
+  });
 };
 export { StepNav, StepNavProvider, useStepNav };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","Fragment","useConfig","useTranslation","Button","StepNavProvider","useStepNav","SetStepNav","baseClass","StepNav","t0","$","className","i18n","stepNav","config","t1","routes","t2","admin","t","firstItem","t3","url","label","isValidElement","hasDashboardDropdown","t4","stepNavItems","t5","filter","Boolean","_jsx","join","children","map","item","i","StepLabel","isLast","length","isFirst","_jsxs","buttonStyle","undefined","el"],"sources":["../../../src/elements/StepNav/index.tsx"],"sourcesContent":["'use client'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { Fragment } from 'react'\n\nimport type { StepNavItem } from './types.js'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { StepNavProvider, useStepNav } from './context.js'\nimport './index.css'\n\nexport { SetStepNav } from './SetStepNav.js'\n\nconst baseClass = 'step-nav'\n\nconst StepNav: React.FC<{\n  readonly className?: string\n}> = ({ className }) => {\n  const { i18n } = useTranslation()\n\n  const { stepNav } = useStepNav()\n\n  const {\n    config: {\n      routes: { admin },\n    },\n  } = useConfig()\n\n  const { t } = useTranslation()\n\n  // Check if first item is a dashboard dropdown (React element with no URL)\n  // In that case, it replaces the home element entirely\n  const firstItem = stepNav[0]\n  const hasDashboardDropdown =\n    firstItem &&\n    !firstItem.url &&\n    typeof firstItem.label !== 'string' &&\n    React.isValidElement(firstItem.label)\n\n  const stepNavItems = hasDashboardDropdown\n    ? stepNav\n    : [\n        {\n          label: t('general:dashboard'),\n          url: admin,\n        },\n        ...stepNav,\n      ]\n\n  return (\n    <nav className={[baseClass, className].filter(Boolean).join(' ')}>\n      {stepNavItems.map((item, i) => {\n        const StepLabel = getTranslation(item.label, i18n)\n        const isLast = stepNavItems.length === i + 1\n        const isFirst = i === 0\n\n        return (\n          <Fragment key={i}>\n            {item.url ? (\n              <Button\n                buttonStyle=\"ghost\"\n                className={[\n                  `${baseClass}__item`,\n                  isLast ? `${baseClass}__last` : undefined,\n                  isFirst ? `${baseClass}__first` : undefined,\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n                el=\"link\"\n                url={item.url}\n              >\n                {StepLabel}\n              </Button>\n            ) : (\n              <span\n                className={[\n                  `${baseClass}__item`,\n                  isLast ? `${baseClass}__last` : undefined,\n                  isFirst ? `${baseClass}__first` : undefined,\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n              >\n                {StepLabel}\n              </span>\n            )}\n            {!isLast && <span className={`${baseClass}__separator`}>/</span>}\n          </Fragment>\n        )\n      })}\n    </nav>\n  )\n}\n\nexport { StepNav, StepNavItem, StepNavProvider, useStepNav }\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["getTranslation","React","Fragment","useEffect","useRef","useState","useConfig","useTranslation","Button","Popup","PopupList","StepNavProvider","useStepNav","SetStepNav","baseClass","minItemsToCollapse","StepNav","className","i18n","stepNav","config","routes","admin","t","navRef","measurerRef","isCollapsed","setIsCollapsed","firstItem","hasDashboardDropdown","url","label","isValidElement","stepNavItems","canCollapse","length","nav","current","measurer","container","parentElement","measure","available","clientWidth","needed","getBoundingClientRect","width","observer","ResizeObserver","observe","isEffectActive","document","fonts","ready","then","disconnect","renderItem","item","isFirst","isLast","StepLabel","itemClassName","undefined","filter","Boolean","join","_jsx","buttonStyle","el","separator","shouldCollapse","collapsedItems","slice","lastItem","_jsxs","ref","button","buttonAriaLabel","buttonClassName","buttonType","horizontalAlign","noBackground","render","close","ButtonGroup","map","i","href","onClick","size","verticalAlign","inert"],"sources":["../../../src/elements/StepNav/index.tsx"],"sourcesContent":["'use client'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { Fragment, useEffect, useRef, useState } from 'react'\n\nimport type { StepNavItem } from './types.js'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport { StepNavProvider, useStepNav } from './context.js'\nimport './index.css'\n\nexport { SetStepNav } from './SetStepNav.js'\n\nconst baseClass = 'step-nav'\n\nconst minItemsToCollapse = 4\n\nconst StepNav: React.FC<{\n  readonly className?: string\n}> = ({ className }) => {\n  const { i18n } = useTranslation()\n\n  const { stepNav } = useStepNav()\n\n  const {\n    config: {\n      routes: { admin },\n    },\n  } = useConfig()\n\n  const { t } = useTranslation()\n\n  const navRef = useRef<HTMLElement>(null)\n  const measurerRef = useRef<HTMLDivElement>(null)\n  const [isCollapsed, setIsCollapsed] = useState(false)\n\n  // Check if first item is a dashboard dropdown (React element with no URL)\n  // In that case, it replaces the home element entirely\n  const firstItem = stepNav[0]\n  const hasDashboardDropdown =\n    firstItem &&\n    !firstItem.url &&\n    typeof firstItem.label !== 'string' &&\n    React.isValidElement(firstItem.label)\n\n  const stepNavItems = hasDashboardDropdown\n    ? stepNav\n    : [\n        {\n          label: t('general:dashboard'),\n          url: admin,\n        },\n        ...stepNav,\n      ]\n\n  const canCollapse = !hasDashboardDropdown && stepNavItems.length >= minItemsToCollapse\n\n  // Collapse only when the expanded breadcrumbs (measured via the hidden\n  // measurer) can't fit the available width.\n  useEffect(() => {\n    if (!canCollapse) {\n      setIsCollapsed(false)\n      return\n    }\n\n    const nav = navRef.current\n    const measurer = measurerRef.current\n    const container = nav?.parentElement\n\n    if (!nav || !measurer || !container) {\n      return\n    }\n\n    const measure = () => {\n      const available = container.clientWidth\n      const needed = measurer.getBoundingClientRect().width\n      setIsCollapsed(needed - available > 1)\n    }\n\n    measure()\n\n    const observer = new ResizeObserver(measure)\n    observer.observe(container)\n\n    // A web font finishing loading can change the measured width without the\n    // container resizing, so the ResizeObserver alone won't catch it.\n    let isEffectActive = true\n    void document.fonts?.ready.then(() => {\n      if (isEffectActive) {\n        measure()\n      }\n    })\n\n    return () => {\n      isEffectActive = false\n      observer.disconnect()\n    }\n  }, [canCollapse, stepNav, i18n, admin, t])\n\n  const renderItem = (\n    item: StepNavItem,\n    { isFirst, isLast }: { isFirst: boolean; isLast: boolean },\n  ) => {\n    const StepLabel = getTranslation(item.label, i18n)\n    const itemClassName = [\n      `${baseClass}__item`,\n      isLast ? `${baseClass}__last` : undefined,\n      isFirst ? `${baseClass}__first` : undefined,\n    ]\n      .filter(Boolean)\n      .join(' ')\n\n    if (item.url) {\n      return (\n        <Button buttonStyle=\"ghost\" className={itemClassName} el=\"link\" url={item.url}>\n          {StepLabel}\n        </Button>\n      )\n    }\n\n    return <span className={itemClassName}>{StepLabel}</span>\n  }\n\n  const separator = <span className={`${baseClass}__separator`}>/</span>\n\n  const shouldCollapse = canCollapse && isCollapsed\n  const collapsedItems = shouldCollapse ? stepNavItems.slice(1, -1) : []\n  const lastItem = stepNavItems[stepNavItems.length - 1]\n\n  return (\n    <Fragment>\n      <nav className={[baseClass, className].filter(Boolean).join(' ')} ref={navRef}>\n        {shouldCollapse ? (\n          <Fragment>\n            {renderItem(stepNavItems[0], { isFirst: true, isLast: false })}\n            {separator}\n            <Popup\n              button=\"…\"\n              buttonAriaLabel={t('general:moreOptions')}\n              buttonClassName={`${baseClass}__collapsed-toggle`}\n              buttonType=\"custom\"\n              className={`${baseClass}__collapsed`}\n              horizontalAlign=\"left\"\n              noBackground\n              render={({ close }) => (\n                <PopupList.ButtonGroup className={`${baseClass}__collapsed-list`}>\n                  {collapsedItems.map((item, i) => (\n                    <PopupList.Button href={item.url} key={i} onClick={close}>\n                      {getTranslation(item.label, i18n)}\n                    </PopupList.Button>\n                  ))}\n                </PopupList.ButtonGroup>\n              )}\n              size=\"fit-content\"\n              verticalAlign=\"bottom\"\n            />\n            {separator}\n            {renderItem(lastItem, { isFirst: false, isLast: true })}\n          </Fragment>\n        ) : (\n          stepNavItems.map((item, i) => {\n            const isLast = stepNavItems.length === i + 1\n            const isFirst = i === 0\n\n            return (\n              <Fragment key={i}>\n                {renderItem(item, { isFirst, isLast })}\n                {!isLast && separator}\n              </Fragment>\n            )\n          })\n        )}\n      </nav>\n      {canCollapse ? (\n        <span aria-hidden=\"true\" className={`${baseClass}__measurer-clip`} inert>\n          <div className={`${baseClass}__measurer`} ref={measurerRef}>\n            {stepNavItems.map((item, i) => {\n              const isLast = stepNavItems.length === i + 1\n              const isFirst = i === 0\n\n              return (\n                <Fragment key={i}>\n                  {renderItem(item, { isFirst, isLast })}\n                  {!isLast && separator}\n                </Fragment>\n              )\n            })}\n          </div>\n        </span>\n      ) : null}\n    </Fragment>\n  )\n}\n\nexport { StepNav, StepNavItem, StepNavProvider, useStepNav }\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Table/DefaultCell/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAqB,MAAM,SAAS,CAAA;AAI3E,OAAO,KAAK,MAAM,OAAO,CAAA;AAYzB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAwL3D,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Table/DefaultCell/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAqB,MAAM,SAAS,CAAA;AAI3E,OAAO,KAAK,MAAM,OAAO,CAAA;AAYzB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA8K3D,CAAA"}

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

@@ -9,8 +9,8 @@ import { useConfig } from '../../../providers/Config/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
 import { getDisplayedFieldValue } from '../../../utilities/getDisplayedFieldValue.js';
 import { isValidReactElement } from '../../../utilities/isValidReactElement.js';
+import { IDLabel } from '../../IDLabel/index.js';
 import { Link } from '../../Link/index.js';
-import { CodeCell } from './fields/Code/index.js';
 import { HierarchyCell } from './fields/Hierarchy/index.js';
 import { cellComponents } from './fields/index.js';
 import { StatusCell } from './fields/Status/index.js';
@@ -85,16 +85,8 @@ export const DefaultCell = props => {
       if (fieldIsID(field)) {
         t4 = _jsx(WrapElement, {
           ...wrapElementProps,
-          children: _jsx(CodeCell, {
-            cellData: `ID: ${cellData}`,
-            collectionConfig,
-            collectionSlug,
-            field: {
-              ...field,
-              type: "code"
-            },
-            nowrap: true,
-            rowData
+          children: _jsx(IDLabel, {
+            id: cellData
           })
         });
         break bb0;