@payloadcms/ui 4.0.0-internal.f05c47f → 4.0.0-internal.f715c6e

package/dist/elements/SortHeader/index.js

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

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

@@ -1 +1 @@
-{"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":[]}
+{"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":[]}

package/dist/elements/StepNav/index.css

@@ -2,19 +2,15 @@
   .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;
@@ -25,7 +21,6 @@
     a {
       display: flex;
       align-items: center;
-      min-width: 0;
       text-decoration: none;
       border-radius: var(--button-radius);
 
@@ -33,78 +28,33 @@
         cursor: pointer;
       }
     }
-  }
-
-  .step-nav__item {
-    max-width: calc(var(--spacer-6) * 4);
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-
-  .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;
-  }
+    span {
+      max-width: calc(var(--spacer-6) * 4);
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
 
-  .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;
+      &:has(.dashboard-breadcrumb-dropdown, .dashboard-breadcrumb-dropdown__editing) {
+        max-width: none;
+        overflow: visible;
+        white-space: normal;
+      }
     }
   }
 
   .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,KAAgD,MAAM,OAAO,CAAA;AAEpE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAQ7C,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,CAmLA,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,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"}

package/dist/elements/StepNav/index.js

@@ -1,173 +1,97 @@
 '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, useEffect, useRef, useState } from 'react';
-import { useShowBranchSelector } from '../../providers/Branch/index.js';
+import React, { Fragment } from 'react';
 import { useConfig } from '../../providers/Config/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
-import { BranchSelector } from '../BranchSelector/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 minItemsToCollapse = 4;
-const StepNav = ({
-  className
-}) => {
+const StepNav = t0 => {
+  const $ = _c(11);
+  const {
+    className
+  } = t0;
   const {
     i18n
   } = useTranslation();
   const {
     stepNav
   } = useStepNav();
-  const showBranchSelector = useShowBranchSelector();
   const {
-    config: {
-      routes: {
-        admin
-      }
-    }
+    config: t1
   } = 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];
-  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;
-    }
-    const nav = navRef.current;
-    const measurer = measurerRef.current;
-    const container = nav?.parentElement;
-    if (!nav || !measurer || !container) {
-      return;
+  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 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
-    });
-  };
-  const separator = /*#__PURE__*/_jsx("span", {
-    className: `${baseClass}__separator`,
-    children: "/"
-  });
-  // The branch switcher opens the trail: everything after it — the dashboard
-  // crumb included — is scoped to the branch it names.
-  const branchSelector = showBranchSelector ? /*#__PURE__*/_jsxs(Fragment, {
-    children: [/*#__PURE__*/_jsx(BranchSelector, {
-      className: `${baseClass}__branch-selector`
-    }), separator]
-  }) : null;
-  const renderTrail = () => stepNavItems.map((item_0, i) => {
-    const isLast_0 = stepNavItems.length === i + 1;
-    const isFirst_0 = i === 0;
-    return /*#__PURE__*/_jsxs(Fragment, {
-      children: [isFirst_0 ? branchSelector : null, renderItem(item_0, {
-        isFirst: isFirst_0,
-        isLast: isLast_0
-      }), !isLast_0 && separator]
-    }, i);
-  });
-  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: [branchSelector, 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_1, i_0) => /*#__PURE__*/_jsx(PopupList.Button, {
-              href: item_1.url,
-              onClick: close,
-              children: getTranslation(item_1.label, i18n)
-            }, i_0))
-          }),
-          size: "fit-content",
-          verticalAlign: "bottom"
-        }), separator, renderItem(lastItem, {
-          isFirst: false,
-          isLast: true
-        })]
-      }) : renderTrail()
-    }), canCollapse ? /*#__PURE__*/_jsx("span", {
-      "aria-hidden": "true",
-      className: `${baseClass}__measurer-clip`,
-      inert: true,
-      children: /*#__PURE__*/_jsx("div", {
-        className: `${baseClass}__measurer`,
-        ref: measurerRef,
-        children: renderTrail()
+    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);
       })
-    }) : null]
-  });
+    });
+    $[2] = admin;
+    $[3] = className;
+    $[4] = hasDashboardDropdown;
+    $[5] = i18n;
+    $[6] = stepNav;
+    $[7] = t;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  return t4;
 };
 export { StepNav, StepNavProvider, useStepNav };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["getTranslation","React","Fragment","useEffect","useRef","useState","useShowBranchSelector","useConfig","useTranslation","BranchSelector","Button","Popup","PopupList","StepNavProvider","useStepNav","SetStepNav","baseClass","minItemsToCollapse","StepNav","className","i18n","stepNav","showBranchSelector","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","branchSelector","_jsxs","renderTrail","map","i","shouldCollapse","collapsedItems","slice","lastItem","ref","button","buttonAriaLabel","buttonClassName","buttonType","horizontalAlign","noBackground","render","close","ButtonGroup","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 { useShowBranchSelector } from '../../providers/Branch/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { BranchSelector } from '../BranchSelector/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 showBranchSelector = useShowBranchSelector()\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  // The branch switcher opens the trail: everything after it — the dashboard\n  // crumb included — is scoped to the branch it names.\n  const branchSelector = showBranchSelector ? (\n    <Fragment>\n      <BranchSelector className={`${baseClass}__branch-selector`} />\n      {separator}\n    </Fragment>\n  ) : null\n\n  const renderTrail = () =>\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          {isFirst ? branchSelector : null}\n          {renderItem(item, { isFirst, isLast })}\n          {!isLast && separator}\n        </Fragment>\n      )\n    })\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            {branchSelector}\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          renderTrail()\n        )}\n      </nav>\n      {canCollapse ? (\n        <span aria-hidden=\"true\" className={`${baseClass}__measurer-clip`} inert>\n          <div className={`${baseClass}__measurer`} ref={measurerRef}>\n            {renderTrail()}\n          </div>\n        </span>\n      ) : null}\n    </Fragment>\n  )\n}\n\nexport { StepNav, StepNavItem, StepNavProvider, useStepNav }\n"],"mappings":"AAAA;;;AAEA,SAASA,cAAc,QAAQ;AAC/B,OAAOC,KAAA,IAASC,QAAQ,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ;AAI7D,SAASC,qBAAqB,QAAQ;AACtC,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,KAAK,EAAEC,SAAS,QAAQ;AACjC,SAASC,eAAe,EAAEC,UAAU,QAAQ;AAC5C,OAAO;AAEP,SAASC,UAAU,QAAQ;AAE3B,MAAMC,SAAA,GAAY;AAElB,MAAMC,kBAAA,GAAqB;AAE3B,MAAMC,OAAA,GAEDA,CAAC;EAAEC;AAAS,CAAE;EACjB,MAAM;IAAEC;EAAI,CAAE,GAAGZ,cAAA;EAEjB,MAAM;IAAEa;EAAO,CAAE,GAAGP,UAAA;EAEpB,MAAMQ,kBAAA,GAAqBhB,qBAAA;EAE3B,MAAM;IACJiB,MAAA,EAAQ;MACNC,MAAA,EAAQ;QAAEC;MAAK;IAAE;EAClB,CACF,GAAGlB,SAAA;EAEJ,MAAM;IAAEmB;EAAC,CAAE,GAAGlB,cAAA;EAEd,MAAMmB,MAAA,GAASvB,MAAA,CAAoB;EACnC,MAAMwB,WAAA,GAAcxB,MAAA,CAAuB;EAC3C,MAAM,CAACyB,WAAA,EAAaC,cAAA,CAAe,GAAGzB,QAAA,CAAS;EAE/C;EACA;EACA,MAAM0B,SAAA,GAAYV,OAAO,CAAC,EAAE;EAC5B,MAAMW,oBAAA,GACJD,SAAA,IACA,CAACA,SAAA,CAAUE,GAAG,IACd,OAAOF,SAAA,CAAUG,KAAK,KAAK,yBAC3BjC,KAAA,CAAMkC,cAAc,CAACJ,SAAA,CAAUG,KAAK;EAEtC,MAAME,YAAA,GAAeJ,oBAAA,GACjBX,OAAA,GACA,CACE;IACEa,KAAA,EAAOR,CAAA,CAAE;IACTO,GAAA,EAAKR;EACP,G,GACGJ,OAAA,CACJ;EAEL,MAAMgB,WAAA,GAAc,CAACL,oBAAA,IAAwBI,YAAA,CAAaE,MAAM,IAAIrB,kBAAA;EAEpE;EACA;EACAd,SAAA,CAAU;IACR,IAAI,CAACkC,WAAA,EAAa;MAChBP,cAAA,CAAe;MACf;IACF;IAEA,MAAMS,GAAA,GAAMZ,MAAA,CAAOa,OAAO;IAC1B,MAAMC,QAAA,GAAWb,WAAA,CAAYY,OAAO;IACpC,MAAME,SAAA,GAAYH,GAAA,EAAKI,aAAA;IAEvB,IAAI,CAACJ,GAAA,IAAO,CAACE,QAAA,IAAY,CAACC,SAAA,EAAW;MACnC;IACF;IAEA,MAAME,OAAA,GAAUA,CAAA;MACd,MAAMC,SAAA,GAAYH,SAAA,CAAUI,WAAW;MACvC,MAAMC,MAAA,GAASN,QAAA,CAASO,qBAAqB,GAAGC,KAAK;MACrDnB,cAAA,CAAeiB,MAAA,GAASF,SAAA,GAAY;IACtC;IAEAD,OAAA;IAEA,MAAMM,QAAA,GAAW,IAAIC,cAAA,CAAeP,OAAA;IACpCM,QAAA,CAASE,OAAO,CAACV,SAAA;IAEjB;IACA;IACA,IAAIW,cAAA,GAAiB;IACrB,KAAKC,QAAA,CAASC,KAAK,EAAEC,KAAA,CAAMC,IAAA,CAAK;MAC9B,IAAIJ,cAAA,EAAgB;QAClBT,OAAA;MACF;IACF;IAEA,OAAO;MACLS,cAAA,GAAiB;MACjBH,QAAA,CAASQ,UAAU;IACrB;EACF,GAAG,CAACrB,WAAA,EAAahB,OAAA,EAASD,IAAA,EAAMK,KAAA,EAAOC,CAAA,CAAE;EAEzC,MAAMiC,UAAA,GAAaA,CACjBC,IAAA,EACA;IAAEC,OAAO;IAAEC;EAAM,CAAyC;IAE1D,MAAMC,SAAA,GAAY/D,cAAA,CAAe4D,IAAA,CAAK1B,KAAK,EAAEd,IAAA;IAC7C,MAAM4C,aAAA,GAAgB,CACpB,GAAGhD,SAAA,QAAiB,EACpB8C,MAAA,GAAS,GAAG9C,SAAA,QAAiB,GAAGiD,SAAA,EAChCJ,OAAA,GAAU,GAAG7C,SAAA,SAAkB,GAAGiD,SAAA,CACnC,CACEC,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;IAER,IAAIR,IAAA,CAAK3B,GAAG,EAAE;MACZ,oBACEoC,IAAA,CAAC3D,MAAA;QAAO4D,WAAA,EAAY;QAAQnD,SAAA,EAAW6C,aAAA;QAAeO,EAAA,EAAG;QAAOtC,GAAA,EAAK2B,IAAA,CAAK3B,GAAG;kBAC1E8B;;IAGP;IAEA,oBAAOM,IAAA,CAAC;MAAKlD,SAAA,EAAW6C,aAAA;gBAAgBD;;EAC1C;EAEA,MAAMS,SAAA,gBAAYH,IAAA,CAAC;IAAKlD,SAAA,EAAW,GAAGH,SAAA,aAAsB;cAAE;;EAE9D;EACA;EACA,MAAMyD,cAAA,GAAiBnD,kBAAA,gBACrBoD,KAAA,CAACxE,QAAA;4BACCmE,IAAA,CAAC5D,cAAA;MAAeU,SAAA,EAAW,GAAGH,SAAA;QAC7BwD,SAAA;OAED;EAEJ,MAAMG,WAAA,GAAcA,CAAA,KAClBvC,YAAA,CAAawC,GAAG,CAAC,CAAChB,MAAA,EAAMiB,CAAA;IACtB,MAAMf,QAAA,GAAS1B,YAAA,CAAaE,MAAM,KAAKuC,CAAA,GAAI;IAC3C,MAAMhB,SAAA,GAAUgB,CAAA,KAAM;IAEtB,oBACEH,KAAA,CAACxE,QAAA;iBACE2D,SAAA,GAAUY,cAAA,GAAiB,MAC3Bd,UAAA,CAAWC,MAAA,EAAM;QAAEC,OAAA,EAAAA,SAAA;QAASC,MAAA,EAAAA;MAAO,IACnC,CAACA,QAAA,IAAUU,SAAA;OAHCK,CAAA;EAMnB;EAEF,MAAMC,cAAA,GAAiBzC,WAAA,IAAeR,WAAA;EACtC,MAAMkD,cAAA,GAAiBD,cAAA,GAAiB1C,YAAA,CAAa4C,KAAK,CAAC,GAAG,CAAC,KAAK,EAAE;EACtE,MAAMC,QAAA,GAAW7C,YAAY,CAACA,YAAA,CAAaE,MAAM,GAAG,EAAE;EAEtD,oBACEoC,KAAA,CAACxE,QAAA;4BACCmE,IAAA,CAAC;MAAIlD,SAAA,EAAW,CAACH,SAAA,EAAWG,SAAA,CAAU,CAAC+C,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;MAAMc,GAAA,EAAKvD,MAAA;gBACpEmD,cAAA,gBACCJ,KAAA,CAACxE,QAAA;mBACEuE,cAAA,EACAd,UAAA,CAAWvB,YAAY,CAAC,EAAE,EAAE;UAAEyB,OAAA,EAAS;UAAMC,MAAA,EAAQ;QAAM,IAC3DU,SAAA,E,aACDH,IAAA,CAAC1D,KAAA;UACCwE,MAAA,EAAO;UACPC,eAAA,EAAiB1D,CAAA,CAAE;UACnB2D,eAAA,EAAiB,GAAGrE,SAAA,oBAA6B;UACjDsE,UAAA,EAAW;UACXnE,SAAA,EAAW,GAAGH,SAAA,aAAsB;UACpCuE,eAAA,EAAgB;UAChBC,YAAY;UACZC,MAAA,EAAQA,CAAC;YAAEC;UAAK,CAAE,kBAChBrB,IAAA,CAACzD,SAAA,CAAU+E,WAAW;YAACxE,SAAA,EAAW,GAAGH,SAAA,kBAA2B;sBAC7D+D,cAAA,CAAeH,GAAG,CAAC,CAAChB,MAAA,EAAMiB,GAAA,kBACzBR,IAAA,CAACzD,SAAA,CAAUF,MAAM;cAACkF,IAAA,EAAMhC,MAAA,CAAK3B,GAAG;cAAU4D,OAAA,EAASH,KAAA;wBAChD1F,cAAA,CAAe4D,MAAA,CAAK1B,KAAK,EAAEd,IAAA;eADSyD,GAAA;;UAM7CiB,IAAA,EAAK;UACLC,aAAA,EAAc;YAEfvB,SAAA,EACAb,UAAA,CAAWsB,QAAA,EAAU;UAAEpB,OAAA,EAAS;UAAOC,MAAA,EAAQ;QAAK;WAGvDa,WAAA;QAGHtC,WAAA,gBACCgC,IAAA,CAAC;MAAK,eAAY;MAAOlD,SAAA,EAAW,GAAGH,SAAA,iBAA0B;MAAEgF,KAAK;gBACtE,aAAA3B,IAAA,CAAC;QAAIlD,SAAA,EAAW,GAAGH,SAAA,YAAqB;QAAEkE,GAAA,EAAKtD,WAAA;kBAC5C+C,WAAA;;SAGH;;AAGV;AAEA,SAASzD,OAAO,EAAeL,eAAe,EAAEC,UAAU","ignoreList":[]}
+{"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":[]}

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,CA8K3D,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,CAwL3D,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,8 +85,16 @@ export const DefaultCell = props => {
       if (fieldIsID(field)) {
         t4 = _jsx(WrapElement, {
           ...wrapElementProps,
-          children: _jsx(IDLabel, {
-            id: cellData
+          children: _jsx(CodeCell, {
+            cellData: `ID: ${cellData}`,
+            collectionConfig,
+            collectionSlug,
+            field: {
+              ...field,
+              type: "code"
+            },
+            nowrap: true,
+            rowData
           })
         });
         break bb0;