@payloadcms/ui 4.0.0-internal.fa183d3 → 4.0.0-internal.fec2230

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":"AAAA;;;AAEA,SAASA,cAAc,QAAQ;AAC/B,OAAOC,KAAA,IAASC,QAAQ,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ;AAI7D,SAASC,SAAS,QAAQ;AAC1B,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,GAAGX,cAAA;EAEjB,MAAM;IAAEY;EAAO,CAAE,GAAGP,UAAA;EAEpB,MAAM;IACJQ,MAAA,EAAQ;MACNC,MAAA,EAAQ;QAAEC;MAAK;IAAE;EAClB,CACF,GAAGhB,SAAA;EAEJ,MAAM;IAAEiB;EAAC,CAAE,GAAGhB,cAAA;EAEd,MAAMiB,MAAA,GAASpB,MAAA,CAAoB;EACnC,MAAMqB,WAAA,GAAcrB,MAAA,CAAuB;EAC3C,MAAM,CAACsB,WAAA,EAAaC,cAAA,CAAe,GAAGtB,QAAA,CAAS;EAE/C;EACA;EACA,MAAMuB,SAAA,GAAYT,OAAO,CAAC,EAAE;EAC5B,MAAMU,oBAAA,GACJD,SAAA,IACA,CAACA,SAAA,CAAUE,GAAG,IACd,OAAOF,SAAA,CAAUG,KAAK,KAAK,yBAC3B9B,KAAA,CAAM+B,cAAc,CAACJ,SAAA,CAAUG,KAAK;EAEtC,MAAME,YAAA,GAAeJ,oBAAA,GACjBV,OAAA,GACA,CACE;IACEY,KAAA,EAAOR,CAAA,CAAE;IACTO,GAAA,EAAKR;EACP,G,GACGH,OAAA,CACJ;EAEL,MAAMe,WAAA,GAAc,CAACL,oBAAA,IAAwBI,YAAA,CAAaE,MAAM,IAAIpB,kBAAA;EAEpE;EACA;EACAZ,SAAA,CAAU;IACR,IAAI,CAAC+B,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,EAAaf,OAAA,EAASD,IAAA,EAAMI,KAAA,EAAOC,CAAA,CAAE;EAEzC,MAAMiC,UAAA,GAAaA,CACjBC,IAAA,EACA;IAAEC,OAAO;IAAEC;EAAM,CAAyC;IAE1D,MAAMC,SAAA,GAAY5D,cAAA,CAAeyD,IAAA,CAAK1B,KAAK,EAAEb,IAAA;IAC7C,MAAM2C,aAAA,GAAgB,CACpB,GAAG/C,SAAA,QAAiB,EACpB6C,MAAA,GAAS,GAAG7C,SAAA,QAAiB,GAAGgD,SAAA,EAChCJ,OAAA,GAAU,GAAG5C,SAAA,SAAkB,GAAGgD,SAAA,CACnC,CACEC,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;IAER,IAAIR,IAAA,CAAK3B,GAAG,EAAE;MACZ,oBACEoC,IAAA,CAAC1D,MAAA;QAAO2D,WAAA,EAAY;QAAQlD,SAAA,EAAW4C,aAAA;QAAeO,EAAA,EAAG;QAAOtC,GAAA,EAAK2B,IAAA,CAAK3B,GAAG;kBAC1E8B;;IAGP;IAEA,oBAAOM,IAAA,CAAC;MAAKjD,SAAA,EAAW4C,aAAA;gBAAgBD;;EAC1C;EAEA,MAAMS,SAAA,gBAAYH,IAAA,CAAC;IAAKjD,SAAA,EAAW,GAAGH,SAAA,aAAsB;cAAE;;EAE9D,MAAMwD,cAAA,GAAiBpC,WAAA,IAAeR,WAAA;EACtC,MAAM6C,cAAA,GAAiBD,cAAA,GAAiBrC,YAAA,CAAauC,KAAK,CAAC,GAAG,CAAC,KAAK,EAAE;EACtE,MAAMC,QAAA,GAAWxC,YAAY,CAACA,YAAA,CAAaE,MAAM,GAAG,EAAE;EAEtD,oBACEuC,KAAA,CAACxE,QAAA;4BACCgE,IAAA,CAAC;MAAIjD,SAAA,EAAW,CAACH,SAAA,EAAWG,SAAA,CAAU,CAAC8C,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;MAAMU,GAAA,EAAKnD,MAAA;gBACpE8C,cAAA,gBACCI,KAAA,CAACxE,QAAA;mBACEsD,UAAA,CAAWvB,YAAY,CAAC,EAAE,EAAE;UAAEyB,OAAA,EAAS;UAAMC,MAAA,EAAQ;QAAM,IAC3DU,SAAA,E,aACDH,IAAA,CAACzD,KAAA;UACCmE,MAAA,EAAO;UACPC,eAAA,EAAiBtD,CAAA,CAAE;UACnBuD,eAAA,EAAiB,GAAGhE,SAAA,oBAA6B;UACjDiE,UAAA,EAAW;UACX9D,SAAA,EAAW,GAAGH,SAAA,aAAsB;UACpCkE,eAAA,EAAgB;UAChBC,YAAY;UACZC,MAAA,EAAQA,CAAC;YAAEC;UAAK,CAAE,kBAChBjB,IAAA,CAACxD,SAAA,CAAU0E,WAAW;YAACnE,SAAA,EAAW,GAAGH,SAAA,kBAA2B;sBAC7DyD,cAAA,CAAec,GAAG,CAAC,CAAC5B,MAAA,EAAM6B,CAAA,kBACzBpB,IAAA,CAACxD,SAAA,CAAUF,MAAM;cAAC+E,IAAA,EAAM9B,MAAA,CAAK3B,GAAG;cAAU0D,OAAA,EAASL,KAAA;wBAChDnF,cAAA,CAAeyD,MAAA,CAAK1B,KAAK,EAAEb,IAAA;eADSoE,CAAA;;UAM7CG,IAAA,EAAK;UACLC,aAAA,EAAc;YAEfrB,SAAA,EACAb,UAAA,CAAWiB,QAAA,EAAU;UAAEf,OAAA,EAAS;UAAOC,MAAA,EAAQ;QAAK;WAGvD1B,YAAA,CAAaoD,GAAG,CAAC,CAAC5B,MAAA,EAAM6B,GAAA;QACtB,MAAM3B,QAAA,GAAS1B,YAAA,CAAaE,MAAM,KAAKmD,GAAA,GAAI;QAC3C,MAAM5B,SAAA,GAAU4B,GAAA,KAAM;QAEtB,oBACEZ,KAAA,CAACxE,QAAA;qBACEsD,UAAA,CAAWC,MAAA,EAAM;YAAEC,OAAA,EAAAA,SAAA;YAASC,MAAA,EAAAA;UAAO,IACnC,CAACA,QAAA,IAAUU,SAAA;WAFCiB,GAAA;MAKnB;QAGHpD,WAAA,gBACCgC,IAAA,CAAC;MAAK,eAAY;MAAOjD,SAAA,EAAW,GAAGH,SAAA,iBAA0B;MAAE6E,KAAK;gBACtE,aAAAzB,IAAA,CAAC;QAAIjD,SAAA,EAAW,GAAGH,SAAA,YAAqB;QAAE6D,GAAA,EAAKlD,WAAA;kBAC5CQ,YAAA,CAAaoD,GAAG,CAAC,CAAC5B,MAAA,EAAM6B,GAAA;UACvB,MAAM3B,QAAA,GAAS1B,YAAA,CAAaE,MAAM,KAAKmD,GAAA,GAAI;UAC3C,MAAM5B,SAAA,GAAU4B,GAAA,KAAM;UAEtB,oBACEZ,KAAA,CAACxE,QAAA;uBACEsD,UAAA,CAAWC,MAAA,EAAM;cAAEC,OAAA,EAAAA,SAAA;cAASC,MAAA,EAAAA;YAAO,IACnC,CAACA,QAAA,IAAUU,SAAA;aAFCiB,GAAA;QAKnB;;SAGF;;AAGV;AAEA,SAAStE,OAAO,EAAeL,eAAe,EAAEC,UAAU","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;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","getTranslation","fieldAffectsData","fieldIsID","formatAdminURL","React","useConfig","useTranslation","getDisplayedFieldValue","isValidReactElement","Link","CodeCell","HierarchyCell","cellComponents","StatusCell","DefaultCell","props","$","cellData","className","classNameFromProps","collectionSlug","field","t0","link","linkURL","onClick","onClickFromProps","rowData","viewType","admin","i18n","config","t1","getEntityConfig","routes","t2","adminRoute","t3","t4","Symbol","for","collectionConfig","classNameFromConfigContext","undefined","WrapElement","wrapElementProps","prefetch","href","slug","path","encodeURIComponent","id","type","_jsx","children","nowrap","displayedValue","isHierarchyField","relationTo","relatedCollection","Boolean","hierarchy","name","DefaultCellComponent","CellComponent","upload","FileCellComponent","File","_jsxs","t","label","JSON","stringify","options","length","classes","Array","isArray","map","_temp","join","className_0","filter","value"],"sources":["../../../../src/elements/Table/DefaultCell/index.tsx"],"sourcesContent":["'use client'\nimport type { DefaultCellComponentProps, UploadFieldClient } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { fieldAffectsData, fieldIsID, formatAdminURL } from 'payload/shared'\nimport React from 'react' // TODO: abstract this out to support all routers\n\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { getDisplayedFieldValue } from '../../../utilities/getDisplayedFieldValue.js'\nimport { isValidReactElement } from '../../../utilities/isValidReactElement.js'\nimport { Link } from '../../Link/index.js'\nimport { CodeCell } from './fields/Code/index.js'\nimport { HierarchyCell } from './fields/Hierarchy/index.js'\nimport { cellComponents } from './fields/index.js'\nimport { StatusCell } from './fields/Status/index.js'\n\nexport const DefaultCell: React.FC<DefaultCellComponentProps> = (props) => {\n  const {\n    cellData,\n    className: classNameFromProps,\n    collectionSlug,\n    field,\n    field: { admin },\n    link,\n    linkURL,\n    onClick: onClickFromProps,\n    rowData,\n    viewType,\n  } = props\n\n  const { i18n } = useTranslation()\n\n  const {\n    config: {\n      routes: { admin: adminRoute },\n    },\n    getEntityConfig,\n  } = useConfig()\n\n  const collectionConfig = getEntityConfig({ collectionSlug })\n\n  const classNameFromConfigContext = admin && 'className' in admin ? admin.className : undefined\n\n  const className =\n    classNameFromProps ||\n    (field.admin && 'className' in field.admin ? field.admin.className : null) ||\n    classNameFromConfigContext\n\n  const onClick = onClickFromProps\n\n  let WrapElement: React.ComponentType<any> | string = 'span'\n\n  const wrapElementProps: {\n    className?: string\n    href?: string\n    onClick?: () => void\n    prefetch?: false\n    type?: 'button'\n  } = {\n    className,\n  }\n\n  if (link) {\n    wrapElementProps.prefetch = false\n    WrapElement = Link\n\n    // Use custom linkURL if provided, otherwise use default URL generation\n    if (linkURL) {\n      wrapElementProps.href = linkURL\n    } else {\n      wrapElementProps.href = collectionConfig?.slug\n        ? formatAdminURL({\n            adminRoute,\n            path: `/collections/${collectionConfig?.slug}${viewType === 'trash' ? '/trash' : ''}/${encodeURIComponent(rowData.id)}`,\n          })\n        : ''\n    }\n  }\n\n  if (typeof onClick === 'function') {\n    WrapElement = 'button'\n    wrapElementProps.type = 'button'\n    wrapElementProps.onClick = () => {\n      onClick({\n        cellData,\n        collectionSlug: collectionConfig?.slug,\n        rowData,\n      })\n    }\n  }\n\n  if (fieldIsID(field)) {\n    return (\n      <WrapElement {...wrapElementProps}>\n        <CodeCell\n          cellData={`ID: ${cellData}`}\n          collectionConfig={collectionConfig}\n          collectionSlug={collectionSlug}\n          field={{\n            ...field,\n            type: 'code',\n          }}\n          nowrap\n          rowData={rowData}\n        />\n      </WrapElement>\n    )\n  }\n\n  const displayedValue = getDisplayedFieldValue(cellData, field, i18n)\n\n  // Check if this is a hierarchy relationship field by checking if the related collection has hierarchy config\n  const isHierarchyField =\n    field.type === 'relationship' &&\n    (() => {\n      const relationTo = 'relationTo' in field ? field.relationTo : undefined\n      if (typeof relationTo !== 'string') {\n        return false\n      }\n      const relatedCollection = getEntityConfig({ collectionSlug: relationTo })\n      return Boolean(relatedCollection?.hierarchy)\n    })()\n\n  // For hierarchy fields, render the HierarchyCell directly (no wrapper needed)\n  if (isHierarchyField && field.type === 'relationship') {\n    return <HierarchyCell cellData={cellData} rowData={rowData} {...props} field={field} />\n  }\n\n  // For status fields, render the StatusCell directly\n  if (field.type === 'select' && 'name' in field && field.name === '_status') {\n    return (\n      <WrapElement {...wrapElementProps}>\n        <StatusCell cellData={cellData} rowData={rowData} {...props} field={field} />\n      </WrapElement>\n    )\n  }\n\n  const DefaultCellComponent: React.FC<DefaultCellComponentProps> =\n    typeof cellData !== 'undefined' && cellComponents[field.type]\n\n  let CellComponent: React.ReactNode = null\n\n  // Handle JSX labels before using DefaultCellComponent\n  if (isValidReactElement(displayedValue)) {\n    CellComponent = displayedValue\n  } else if (DefaultCellComponent) {\n    CellComponent = <DefaultCellComponent cellData={cellData} rowData={rowData} {...props} />\n  } else if (!DefaultCellComponent) {\n    // DefaultCellComponent does not exist for certain field types like `text`\n    if (\n      collectionConfig?.upload &&\n      fieldAffectsData(field) &&\n      field.name === 'filename' &&\n      field.type === 'text'\n    ) {\n      const FileCellComponent = cellComponents.File\n\n      CellComponent = (\n        <FileCellComponent\n          cellData={cellData}\n          rowData={rowData}\n          {...(props as DefaultCellComponentProps<UploadFieldClient>)}\n          collectionConfig={collectionConfig}\n          field={field}\n        />\n      )\n    } else {\n      return (\n        <WrapElement {...wrapElementProps}>\n          {(displayedValue === '' ||\n            typeof displayedValue === 'undefined' ||\n            displayedValue === null) &&\n            i18n.t('general:noLabel', {\n              label: getTranslation(('label' in field ? field.label : null) || 'data', i18n),\n            })}\n          {typeof displayedValue === 'string' && displayedValue}\n          {typeof displayedValue === 'number' && displayedValue}\n          {typeof displayedValue === 'object' &&\n            displayedValue !== null &&\n            JSON.stringify(displayedValue)}\n        </WrapElement>\n      )\n    }\n  }\n\n  if ((field.type === 'select' || field.type === 'radio') && field.options.length && cellData) {\n    const classes = Array.isArray(cellData)\n      ? cellData.map((value) => `selected--${value}`).join(' ')\n      : `selected--${cellData}`\n\n    const className = [wrapElementProps.className, classes].filter(Boolean).join(' ')\n\n    return (\n      <WrapElement {...wrapElementProps} className={className}>\n        {CellComponent}\n      </WrapElement>\n    )\n  }\n\n  return <WrapElement {...wrapElementProps}>{CellComponent}</WrapElement>\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","fieldAffectsData","fieldIsID","formatAdminURL","React","useConfig","useTranslation","getDisplayedFieldValue","isValidReactElement","IDLabel","Link","HierarchyCell","cellComponents","StatusCell","DefaultCell","props","$","cellData","className","classNameFromProps","collectionSlug","field","t0","link","linkURL","onClick","onClickFromProps","rowData","viewType","admin","i18n","config","t1","getEntityConfig","routes","t2","adminRoute","t3","t4","Symbol","for","collectionConfig","classNameFromConfigContext","undefined","WrapElement","wrapElementProps","prefetch","href","slug","path","encodeURIComponent","id","type","_jsx","children","displayedValue","isHierarchyField","relationTo","relatedCollection","Boolean","hierarchy","name","DefaultCellComponent","CellComponent","upload","FileCellComponent","File","_jsxs","t","label","JSON","stringify","options","length","classes","Array","isArray","map","_temp","join","className_0","filter","value"],"sources":["../../../../src/elements/Table/DefaultCell/index.tsx"],"sourcesContent":["'use client'\nimport type { DefaultCellComponentProps, UploadFieldClient } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { fieldAffectsData, fieldIsID, formatAdminURL } from 'payload/shared'\nimport React from 'react' // TODO: abstract this out to support all routers\n\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { getDisplayedFieldValue } from '../../../utilities/getDisplayedFieldValue.js'\nimport { isValidReactElement } from '../../../utilities/isValidReactElement.js'\nimport { IDLabel } from '../../IDLabel/index.js'\nimport { Link } from '../../Link/index.js'\nimport { HierarchyCell } from './fields/Hierarchy/index.js'\nimport { cellComponents } from './fields/index.js'\nimport { StatusCell } from './fields/Status/index.js'\n\nexport const DefaultCell: React.FC<DefaultCellComponentProps> = (props) => {\n  const {\n    cellData,\n    className: classNameFromProps,\n    collectionSlug,\n    field,\n    field: { admin },\n    link,\n    linkURL,\n    onClick: onClickFromProps,\n    rowData,\n    viewType,\n  } = props\n\n  const { i18n } = useTranslation()\n\n  const {\n    config: {\n      routes: { admin: adminRoute },\n    },\n    getEntityConfig,\n  } = useConfig()\n\n  const collectionConfig = getEntityConfig({ collectionSlug })\n\n  const classNameFromConfigContext = admin && 'className' in admin ? admin.className : undefined\n\n  const className =\n    classNameFromProps ||\n    (field.admin && 'className' in field.admin ? field.admin.className : null) ||\n    classNameFromConfigContext\n\n  const onClick = onClickFromProps\n\n  let WrapElement: React.ComponentType<any> | string = 'span'\n\n  const wrapElementProps: {\n    className?: string\n    href?: string\n    onClick?: () => void\n    prefetch?: false\n    type?: 'button'\n  } = {\n    className,\n  }\n\n  if (link) {\n    wrapElementProps.prefetch = false\n    WrapElement = Link\n\n    // Use custom linkURL if provided, otherwise use default URL generation\n    if (linkURL) {\n      wrapElementProps.href = linkURL\n    } else {\n      wrapElementProps.href = collectionConfig?.slug\n        ? formatAdminURL({\n            adminRoute,\n            path: `/collections/${collectionConfig?.slug}${viewType === 'trash' ? '/trash' : ''}/${encodeURIComponent(rowData.id)}`,\n          })\n        : ''\n    }\n  }\n\n  if (typeof onClick === 'function') {\n    WrapElement = 'button'\n    wrapElementProps.type = 'button'\n    wrapElementProps.onClick = () => {\n      onClick({\n        cellData,\n        collectionSlug: collectionConfig?.slug,\n        rowData,\n      })\n    }\n  }\n\n  if (fieldIsID(field)) {\n    return (\n      <WrapElement {...wrapElementProps}>\n        <IDLabel id={cellData} />\n      </WrapElement>\n    )\n  }\n\n  const displayedValue = getDisplayedFieldValue(cellData, field, i18n)\n\n  // Check if this is a hierarchy relationship field by checking if the related collection has hierarchy config\n  const isHierarchyField =\n    field.type === 'relationship' &&\n    (() => {\n      const relationTo = 'relationTo' in field ? field.relationTo : undefined\n      if (typeof relationTo !== 'string') {\n        return false\n      }\n      const relatedCollection = getEntityConfig({ collectionSlug: relationTo })\n      return Boolean(relatedCollection?.hierarchy)\n    })()\n\n  // For hierarchy fields, render the HierarchyCell directly (no wrapper needed)\n  if (isHierarchyField && field.type === 'relationship') {\n    return <HierarchyCell cellData={cellData} rowData={rowData} {...props} field={field} />\n  }\n\n  // For status fields, render the StatusCell directly\n  if (field.type === 'select' && 'name' in field && field.name === '_status') {\n    return (\n      <WrapElement {...wrapElementProps}>\n        <StatusCell cellData={cellData} rowData={rowData} {...props} field={field} />\n      </WrapElement>\n    )\n  }\n\n  const DefaultCellComponent: React.FC<DefaultCellComponentProps> =\n    typeof cellData !== 'undefined' && cellComponents[field.type]\n\n  let CellComponent: React.ReactNode = null\n\n  // Handle JSX labels before using DefaultCellComponent\n  if (isValidReactElement(displayedValue)) {\n    CellComponent = displayedValue\n  } else if (DefaultCellComponent) {\n    CellComponent = <DefaultCellComponent cellData={cellData} rowData={rowData} {...props} />\n  } else if (!DefaultCellComponent) {\n    // DefaultCellComponent does not exist for certain field types like `text`\n    if (\n      collectionConfig?.upload &&\n      fieldAffectsData(field) &&\n      field.name === 'filename' &&\n      field.type === 'text'\n    ) {\n      const FileCellComponent = cellComponents.File\n\n      CellComponent = (\n        <FileCellComponent\n          cellData={cellData}\n          rowData={rowData}\n          {...(props as DefaultCellComponentProps<UploadFieldClient>)}\n          collectionConfig={collectionConfig}\n          field={field}\n        />\n      )\n    } else {\n      return (\n        <WrapElement {...wrapElementProps}>\n          {(displayedValue === '' ||\n            typeof displayedValue === 'undefined' ||\n            displayedValue === null) &&\n            i18n.t('general:noLabel', {\n              label: getTranslation(('label' in field ? field.label : null) || 'data', i18n),\n            })}\n          {typeof displayedValue === 'string' && displayedValue}\n          {typeof displayedValue === 'number' && displayedValue}\n          {typeof displayedValue === 'object' &&\n            displayedValue !== null &&\n            JSON.stringify(displayedValue)}\n        </WrapElement>\n      )\n    }\n  }\n\n  if ((field.type === 'select' || field.type === 'radio') && field.options.length && cellData) {\n    const classes = Array.isArray(cellData)\n      ? cellData.map((value) => `selected--${value}`).join(' ')\n      : `selected--${cellData}`\n\n    const className = [wrapElementProps.className, classes].filter(Boolean).join(' ')\n\n    return (\n      <WrapElement {...wrapElementProps} className={className}>\n        {CellComponent}\n      </WrapElement>\n    )\n  }\n\n  return <WrapElement {...wrapElementProps}>{CellComponent}</WrapElement>\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Table/OrderableRow.d.ts

@@ -6,8 +6,10 @@ export type Props = {
     readonly columns: Column[];
     readonly dragAttributes?: HTMLAttributes<unknown>;
     readonly dragListeners?: DraggableSyntheticListeners;
+    readonly isOrderable?: boolean;
+    readonly onDisabledDragAttempt?: () => void;
     readonly ref?: Ref<HTMLTableRowElement>;
     readonly rowId: number | string;
 } & HTMLAttributes<HTMLTableRowElement>;
-export declare const OrderableRow: ({ cellMap, columns, dragAttributes, dragListeners, rowId, ...rest }: Props) => import("react").JSX.Element;
+export declare const OrderableRow: ({ cellMap, columns, dragAttributes, dragListeners, isOrderable, onDisabledDragAttempt, rowId, ...rest }: Props) => import("react").JSX.Element;
 //# sourceMappingURL=OrderableRow.d.ts.map

package/dist/elements/Table/OrderableRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OrderableRow.d.ts","sourceRoot":"","sources":["../../../src/elements/Table/OrderableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAEhD,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACxC,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,CAAA;IAC1B,QAAQ,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;IACjD,QAAQ,CAAC,aAAa,CAAC,EAAE,2BAA2B,CAAA;IACpD,QAAQ,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAA;IACvC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CAChC,GAAG,cAAc,CAAC,mBAAmB,CAAC,CAAA;AAEvC,eAAO,MAAM,YAAY,wEAOtB,KAAK,gCA+BP,CAAA"}
+{"version":3,"file":"OrderableRow.d.ts","sourceRoot":"","sources":["../../../src/elements/Table/OrderableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAiB,GAAG,EAAE,MAAM,OAAO,CAAA;AAE/D,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACxC,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,CAAA;IAC1B,QAAQ,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;IACjD,QAAQ,CAAC,aAAa,CAAC,EAAE,2BAA2B,CAAA;IACpD,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC3C,QAAQ,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAA;IACvC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CAChC,GAAG,cAAc,CAAC,mBAAmB,CAAC,CAAA;AAEvC,eAAO,MAAM,YAAY,4GAStB,KAAK,gCA+CP,CAAA"}

package/dist/elements/Table/OrderableRow.js

@@ -4,6 +4,8 @@ export const OrderableRow = ({
   columns,
   dragAttributes = {},
   dragListeners = {},
+  isOrderable = true,
+  onDisabledDragAttempt,
   rowId,
   ...rest
 }) => /*#__PURE__*/_jsx("tr", {
@@ -16,11 +18,25 @@ export const OrderableRow = ({
     const cell = col.renderedCells[cellMap[rowId]];
     // For drag handles, wrap in div with drag attributes
     if (accessor === '_dragHandle') {
+      // When not orderable, dnd-kit's own drag listeners are disabled, so pressing the keys
+      // it would normally use to start a drag does nothing silently. Intercept them here to
+      // tell the user why instead.
+      const dragHandleListeners = {
+        ...dragListeners,
+        onKeyDown: event => {
+          if (!isOrderable && (event.code === 'Space' || event.code === 'Enter')) {
+            event.preventDefault();
+            onDisabledDragAttempt?.();
+            return;
+          }
+          dragListeners?.onKeyDown?.(event);
+        }
+      };
       return /*#__PURE__*/_jsx("td", {
         className: `cell-${accessor}`,
         children: /*#__PURE__*/_jsx("div", {
           ...dragAttributes,
-          ...dragListeners,
+          ...dragHandleListeners,
           children: cell
         })
       }, colIndex);

package/dist/elements/Table/OrderableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrderableRow.js","names":["OrderableRow","cellMap","columns","dragAttributes","dragListeners","rowId","rest","_jsx","map","col","colIndex","accessor","cell","renderedCells","className","isLinkedColumn","filter","Boolean","join"],"sources":["../../../src/elements/Table/OrderableRow.tsx"],"sourcesContent":["import type { DraggableSyntheticListeners } from '@dnd-kit/core'\nimport type { Column } from 'payload'\nimport type { HTMLAttributes, Ref } from 'react'\n\nexport type Props = {\n  readonly cellMap: Record<string, number>\n  readonly columns: Column[]\n  readonly dragAttributes?: HTMLAttributes<unknown>\n  readonly dragListeners?: DraggableSyntheticListeners\n  readonly ref?: Ref<HTMLTableRowElement>\n  readonly rowId: number | string\n} & HTMLAttributes<HTMLTableRowElement>\n\nexport const OrderableRow = ({\n  cellMap,\n  columns,\n  dragAttributes = {},\n  dragListeners = {},\n  rowId,\n  ...rest\n}: Props) => (\n  <tr {...rest}>\n    {columns.map((col, colIndex) => {\n      const { accessor } = col\n\n      // Use the cellMap to find which index in the renderedCells to use\n      const cell = col.renderedCells[cellMap[rowId]]\n\n      // For drag handles, wrap in div with drag attributes\n      if (accessor === '_dragHandle') {\n        return (\n          <td className={`cell-${accessor}`} key={colIndex}>\n            <div {...dragAttributes} {...dragListeners}>\n              {cell}\n            </div>\n          </td>\n        )\n      }\n\n      return (\n        <td\n          className={[`cell-${accessor}`, col.isLinkedColumn && 'cell--linked']\n            .filter(Boolean)\n            .join(' ')}\n          key={colIndex}\n        >\n          {cell}\n        </td>\n      )\n    })}\n  </tr>\n)\n"],"mappings":";AAaA,OAAO,MAAMA,YAAA,GAAeA,CAAC;EAC3BC,OAAO;EACPC,OAAO;EACPC,cAAA,GAAiB,CAAC,CAAC;EACnBC,aAAA,GAAgB,CAAC,CAAC;EAClBC,KAAK;EACL,GAAGC;AAAA,CACG,kBACNC,IAAA,CAAC;EAAI,GAAGD,IAAI;YACTJ,OAAA,CAAQM,GAAG,CAAC,CAACC,GAAA,EAAKC,QAAA;IACjB,MAAM;MAAEC;IAAQ,CAAE,GAAGF,GAAA;IAErB;IACA,MAAMG,IAAA,GAAOH,GAAA,CAAII,aAAa,CAACZ,OAAO,CAACI,KAAA,CAAM,CAAC;IAE9C;IACA,IAAIM,QAAA,KAAa,eAAe;MAC9B,oBACEJ,IAAA,CAAC;QAAGO,SAAA,EAAW,QAAQH,QAAA,EAAU;kBAC/B,aAAAJ,IAAA,CAAC;UAAK,GAAGJ,cAAc;UAAG,GAAGC,aAAa;oBACvCQ;;SAFmCF,QAAA;IAM5C;IAEA,oBACEH,IAAA,CAAC;MACCO,SAAA,EAAW,CAAC,QAAQH,QAAA,EAAU,EAAEF,GAAA,CAAIM,cAAc,IAAI,eAAe,CAClEC,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;gBAGPN;OAFIF,QAAA;EAKX","ignoreList":[]}
+{"version":3,"file":"OrderableRow.js","names":["OrderableRow","cellMap","columns","dragAttributes","dragListeners","isOrderable","onDisabledDragAttempt","rowId","rest","_jsx","map","col","colIndex","accessor","cell","renderedCells","dragHandleListeners","onKeyDown","event","code","preventDefault","className","isLinkedColumn","filter","Boolean","join"],"sources":["../../../src/elements/Table/OrderableRow.tsx"],"sourcesContent":["import type { DraggableSyntheticListeners } from '@dnd-kit/core'\nimport type { Column } from 'payload'\nimport type { HTMLAttributes, KeyboardEvent, Ref } from 'react'\n\nexport type Props = {\n  readonly cellMap: Record<string, number>\n  readonly columns: Column[]\n  readonly dragAttributes?: HTMLAttributes<unknown>\n  readonly dragListeners?: DraggableSyntheticListeners\n  readonly isOrderable?: boolean\n  readonly onDisabledDragAttempt?: () => void\n  readonly ref?: Ref<HTMLTableRowElement>\n  readonly rowId: number | string\n} & HTMLAttributes<HTMLTableRowElement>\n\nexport const OrderableRow = ({\n  cellMap,\n  columns,\n  dragAttributes = {},\n  dragListeners = {},\n  isOrderable = true,\n  onDisabledDragAttempt,\n  rowId,\n  ...rest\n}: Props) => (\n  <tr {...rest}>\n    {columns.map((col, colIndex) => {\n      const { accessor } = col\n\n      // Use the cellMap to find which index in the renderedCells to use\n      const cell = col.renderedCells[cellMap[rowId]]\n\n      // For drag handles, wrap in div with drag attributes\n      if (accessor === '_dragHandle') {\n        // When not orderable, dnd-kit's own drag listeners are disabled, so pressing the keys\n        // it would normally use to start a drag does nothing silently. Intercept them here to\n        // tell the user why instead.\n        const dragHandleListeners = {\n          ...dragListeners,\n          onKeyDown: (event: KeyboardEvent) => {\n            if (!isOrderable && (event.code === 'Space' || event.code === 'Enter')) {\n              event.preventDefault()\n              onDisabledDragAttempt?.()\n              return\n            }\n\n            dragListeners?.onKeyDown?.(event)\n          },\n        }\n\n        return (\n          <td className={`cell-${accessor}`} key={colIndex}>\n            <div {...dragAttributes} {...dragHandleListeners}>\n              {cell}\n            </div>\n          </td>\n        )\n      }\n\n      return (\n        <td\n          className={[`cell-${accessor}`, col.isLinkedColumn && 'cell--linked']\n            .filter(Boolean)\n            .join(' ')}\n          key={colIndex}\n        >\n          {cell}\n        </td>\n      )\n    })}\n  </tr>\n)\n"],"mappings":";AAeA,OAAO,MAAMA,YAAA,GAAeA,CAAC;EAC3BC,OAAO;EACPC,OAAO;EACPC,cAAA,GAAiB,CAAC,CAAC;EACnBC,aAAA,GAAgB,CAAC,CAAC;EAClBC,WAAA,GAAc,IAAI;EAClBC,qBAAqB;EACrBC,KAAK;EACL,GAAGC;AAAA,CACG,kBACNC,IAAA,CAAC;EAAI,GAAGD,IAAI;YACTN,OAAA,CAAQQ,GAAG,CAAC,CAACC,GAAA,EAAKC,QAAA;IACjB,MAAM;MAAEC;IAAQ,CAAE,GAAGF,GAAA;IAErB;IACA,MAAMG,IAAA,GAAOH,GAAA,CAAII,aAAa,CAACd,OAAO,CAACM,KAAA,CAAM,CAAC;IAE9C;IACA,IAAIM,QAAA,KAAa,eAAe;MAC9B;MACA;MACA;MACA,MAAMG,mBAAA,GAAsB;QAC1B,GAAGZ,aAAa;QAChBa,SAAA,EAAYC,KAAA;UACV,IAAI,CAACb,WAAA,KAAgBa,KAAA,CAAMC,IAAI,KAAK,WAAWD,KAAA,CAAMC,IAAI,KAAK,OAAM,GAAI;YACtED,KAAA,CAAME,cAAc;YACpBd,qBAAA;YACA;UACF;UAEAF,aAAA,EAAea,SAAA,GAAYC,KAAA;QAC7B;MACF;MAEA,oBACET,IAAA,CAAC;QAAGY,SAAA,EAAW,QAAQR,QAAA,EAAU;kBAC/B,aAAAJ,IAAA,CAAC;UAAK,GAAGN,cAAc;UAAG,GAAGa,mBAAmB;oBAC7CF;;SAFmCF,QAAA;IAM5C;IAEA,oBACEH,IAAA,CAAC;MACCY,SAAA,EAAW,CAAC,QAAQR,QAAA,EAAU,EAAEF,GAAA,CAAIW,cAAc,IAAI,eAAe,CAClEC,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;gBAGPX;OAFIF,QAAA;EAKX","ignoreList":[]}

package/dist/elements/Table/OrderableTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OrderableTable.d.ts","sourceRoot":"","sources":["../../../src/elements/Table/OrderableTable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,EAAyB,MAAM,SAAS,CAAA;AAEpF,OAAO,aAAa,CAAA;AAIpB,OAAO,KAA8B,MAAM,OAAO,CAAA;AAalD,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,UAAU,CAAC,EAAE,WAAW,GAAG,SAAS,CAAA;IAC7C,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,UAAU,EAAE,sBAAsB,CAAA;IAC3C,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAC3B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAA;IACxC,QAAQ,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACnC,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAmM1C,CAAA"}
+{"version":3,"file":"OrderableTable.d.ts","sourceRoot":"","sources":["../../../src/elements/Table/OrderableTable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,EAAyB,MAAM,SAAS,CAAA;AAEpF,OAAO,aAAa,CAAA;AAIpB,OAAO,KAA8B,MAAM,OAAO,CAAA;AAiBlD,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,UAAU,CAAC,EAAE,WAAW,GAAG,SAAS,CAAA;IAC7C,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,UAAU,EAAE,sBAAsB,CAAA;IAC3C,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAC3B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAA;IACxC,QAAQ,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACnC,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiN1C,CAAA"}

package/dist/elements/Table/OrderableTable.js

@@ -9,11 +9,14 @@ import { toast } from 'sonner';
 import { useConfig } from '../../providers/Config/index.js';
 import { useListQuery } from '../../providers/ListQuery/index.js';
 import { useLocale } from '../../providers/Locale/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
 import { DraggableSortableItem } from '../DraggableSortable/DraggableSortableItem/index.js';
 import { DraggableSortable } from '../DraggableSortable/index.js';
 import { OrderableRow } from './OrderableRow.js';
 import { OrderableRowDragPreview } from './OrderableRowDragPreview.js';
 const baseClass = 'table';
+// A stable id so repeated attempts (e.g. holding Space) update the same toast instead of stacking new ones
+const mustSortByOrderToastId = 'orderable-table-must-sort-by-order';
 export const OrderableTable = ({
   appearance = 'default',
   BeforeTable,
@@ -29,11 +32,14 @@ export const OrderableTable = ({
     orderableFieldName,
     query
   } = useListQuery();
+  const locale = useLocale();
+  const localeCode = locale?.code;
   const {
-    code: localeCode
-  } = useLocale();
+    t
+  } = useTranslation();
   // Use the data from ListQueryProvider if available, otherwise use the props
   const serverData = listQueryData?.docs || initialData;
+  const isOrderable = query.sort === orderableFieldName || query.sort === `-${orderableFieldName}`;
   // Local state to track the current order of rows
   const [localData, setLocalData] = useState(serverData);
   // id -> index for each column
@@ -54,8 +60,10 @@ export const OrderableTable = ({
     moveFromIndex,
     moveToIndex
   }) => {
-    if (query.sort !== orderableFieldName && query.sort !== `-${orderableFieldName}`) {
-      toast.warning('To reorder the rows you must first sort them by the "Order" column');
+    if (!isOrderable) {
+      toast.warning(t('general:sortByOrderToReorder'), {
+        id: mustSortByOrderToastId
+      });
       setDragActiveRowId(undefined);
       return;
     }
@@ -127,6 +135,11 @@ export const OrderableTable = ({
   }) => {
     setDragActiveRowId(id);
   };
+  const handleDisabledDragAttempt = () => {
+    toast.warning(t('general:sortByOrderToReorder'), {
+      id: mustSortByOrderToastId
+    });
+  };
   const rowIds = localData.map(row => row.id ?? row._id);
   return /*#__PURE__*/_jsxs("div", {
     className: [baseClass, appearance && `${baseClass}--appearance-${appearance}`].filter(Boolean).join(' '),
@@ -146,6 +159,7 @@ export const OrderableTable = ({
           })
         }), /*#__PURE__*/_jsx("tbody", {
           children: localData.map((row_0, rowIndex) => /*#__PURE__*/_jsx(DraggableSortableItem, {
+            disabled: !isOrderable,
             id: rowIds[rowIndex],
             children: ({
               attributes,
@@ -160,6 +174,8 @@ export const OrderableTable = ({
               columns: activeColumns,
               dragAttributes: attributes,
               dragListeners: listeners,
+              isOrderable: isOrderable,
+              onDisabledDragAttempt: handleDisabledDragAttempt,
               ref: setNodeRef,
               rowId: row_0.id ?? row_0._id,
               style: {

package/dist/elements/Table/OrderableTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrderableTable.js","names":["DragOverlay","formatAdminURL","React","useEffect","useState","toast","useConfig","useListQuery","useLocale","DraggableSortableItem","DraggableSortable","OrderableRow","OrderableRowDragPreview","baseClass","OrderableTable","appearance","BeforeTable","collection","columns","data","initialData","config","listQueryData","orderableFieldName","query","code","localeCode","serverData","docs","localData","setLocalData","cellMap","setCellMap","dragActiveRowId","setDragActiveRowId","Object","fromEntries","map","item","index","String","id","_id","activeColumns","filter","col","active","includes","accessor","length","_jsx","handleDragEnd","moveFromIndex","moveToIndex","sort","warning","undefined","movedId","newBeforeRow","newAfterRow","previousData","currentData","newData","splice","target","key","newKeyWillBe","jsonBody","collectionSlug","slug","docsToMove","response","fetch","apiRoute","routes","api","path","body","JSON","stringify","credentials","headers","method","status","Error","ok","json","err","error","message","handleDragStart","rowIds","row","_jsxs","className","Boolean","join","ids","onDragEnd","onDragStart","cellPadding","cellSpacing","i","Heading","rowIndex","children","attributes","isDragging","listeners","setNodeRef","transform","transition","dragAttributes","dragListeners","ref","rowId","style","opacity"],"sources":["../../../src/elements/Table/OrderableTable.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientCollectionConfig, Column, OrderableEndpointBody } from 'payload'\n\nimport './index.css'\n\nimport { DragOverlay } from '@dnd-kit/core'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useEffect, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { DraggableSortableItem } from '../DraggableSortable/DraggableSortableItem/index.js'\nimport { DraggableSortable } from '../DraggableSortable/index.js'\nimport { OrderableRow } from './OrderableRow.js'\nimport { OrderableRowDragPreview } from './OrderableRowDragPreview.js'\n\nconst baseClass = 'table'\n\nexport type Props = {\n  readonly appearance?: 'condensed' | 'default'\n  readonly BeforeTable?: React.ReactNode\n  readonly collection: ClientCollectionConfig\n  readonly columns?: Column[]\n  readonly data: Record<string, unknown>[]\n  readonly heading?: React.ReactNode\n}\n\nexport const OrderableTable: React.FC<Props> = ({\n  appearance = 'default',\n  BeforeTable,\n  collection,\n  columns,\n  data: initialData,\n}) => {\n  const { config } = useConfig()\n  const { data: listQueryData, orderableFieldName, query } = useListQuery()\n  const { code: localeCode } = useLocale()\n  // Use the data from ListQueryProvider if available, otherwise use the props\n  const serverData = listQueryData?.docs || initialData\n\n  // Local state to track the current order of rows\n  const [localData, setLocalData] = useState(serverData)\n\n  // id -> index for each column\n  const [cellMap, setCellMap] = useState<Record<string, number>>({})\n\n  const [dragActiveRowId, setDragActiveRowId] = useState<number | string | undefined>()\n\n  // Update local data when server data changes\n  useEffect(() => {\n    setLocalData(serverData)\n    setCellMap(\n      Object.fromEntries(serverData.map((item, index) => [String(item.id ?? item._id), index])),\n    )\n  }, [serverData])\n\n  const activeColumns = columns?.filter((col) => col?.active)\n\n  if (\n    !activeColumns ||\n    activeColumns.filter((col) => !['_dragHandle', '_select'].includes(col.accessor)).length === 0\n  ) {\n    return <div>No columns selected</div>\n  }\n\n  const handleDragEnd = async ({ moveFromIndex, moveToIndex }) => {\n    if (query.sort !== orderableFieldName && query.sort !== `-${orderableFieldName}`) {\n      toast.warning('To reorder the rows you must first sort them by the \"Order\" column')\n      setDragActiveRowId(undefined)\n      return\n    }\n\n    if (moveFromIndex === moveToIndex) {\n      setDragActiveRowId(undefined)\n      return\n    }\n\n    const movedId = localData[moveFromIndex].id ?? localData[moveFromIndex]._id\n    const newBeforeRow =\n      moveToIndex > moveFromIndex ? localData[moveToIndex] : localData[moveToIndex - 1]\n    const newAfterRow =\n      moveToIndex > moveFromIndex ? localData[moveToIndex + 1] : localData[moveToIndex]\n\n    // Store the original data for rollback\n    const previousData = [...localData]\n\n    // Optimisitc update of local state to reorder the rows\n    setLocalData((currentData) => {\n      const newData = [...currentData]\n      // Update the rendered cell for the moved row to show \"pending\"\n      newData[moveFromIndex][orderableFieldName] = `pending`\n      // Move the item in the array\n      newData.splice(moveToIndex, 0, newData.splice(moveFromIndex, 1)[0])\n      return newData\n    })\n\n    try {\n      const target: OrderableEndpointBody['target'] = newBeforeRow\n        ? {\n            id: newBeforeRow.id ?? newBeforeRow._id,\n            key: newBeforeRow[orderableFieldName],\n          }\n        : {\n            id: newAfterRow.id ?? newAfterRow._id,\n            key: newAfterRow[orderableFieldName],\n          }\n\n      const newKeyWillBe =\n        (newBeforeRow && query.sort === orderableFieldName) ||\n        (!newBeforeRow && query.sort === `-${orderableFieldName}`)\n          ? 'greater'\n          : 'less'\n\n      const jsonBody: OrderableEndpointBody = {\n        collectionSlug: collection.slug,\n        docsToMove: [movedId],\n        newKeyWillBe,\n        orderableFieldName,\n        target,\n      }\n\n      const response = await fetch(\n        formatAdminURL({\n          apiRoute: config.routes.api,\n          path: `/reorder?locale=${localeCode}`,\n        }),\n        {\n          body: JSON.stringify(jsonBody),\n          credentials: 'include',\n          headers: {\n            'Content-Type': 'application/json',\n          },\n          method: 'POST',\n        },\n      )\n\n      if (response.status === 403) {\n        throw new Error('You do not have permission to reorder these rows')\n      }\n\n      if (!response.ok) {\n        throw new Error(\n          'Failed to reorder. This can happen if you reorder several rows too quickly. Please try again.',\n        )\n      }\n\n      if (response.status === 200 && (await response.json())['message'] === 'initial migration') {\n        throw new Error(\n          'You have enabled \"orderable\" on a collection with existing documents' +\n            'and this is the first time you have sorted documents. We have run an automatic migration ' +\n            'to add an initial order to the documents. Please refresh the page and try again.',\n        )\n      }\n    } catch (err) {\n      const error = err instanceof Error ? err.message : String(err)\n      // Rollback to previous state if the request fails\n      setLocalData(previousData)\n      toast.error(error)\n    } finally {\n      setDragActiveRowId(undefined)\n    }\n  }\n\n  const handleDragStart = ({ id }) => {\n    setDragActiveRowId(id)\n  }\n\n  const rowIds = localData.map((row) => row.id ?? row._id)\n\n  return (\n    <div\n      className={[baseClass, appearance && `${baseClass}--appearance-${appearance}`]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {BeforeTable}\n      <DraggableSortable ids={rowIds} onDragEnd={handleDragEnd} onDragStart={handleDragStart}>\n        <table cellPadding=\"0\" cellSpacing=\"0\">\n          <thead>\n            <tr>\n              {activeColumns.map((col, i) => (\n                <th id={`heading-${col.accessor}`} key={i}>\n                  {col.Heading}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {localData.map((row, rowIndex) => (\n              <DraggableSortableItem id={rowIds[rowIndex]} key={rowIds[rowIndex]}>\n                {({ attributes, isDragging, listeners, setNodeRef, transform, transition }) => (\n                  <OrderableRow\n                    cellMap={cellMap}\n                    className={`row-${rowIndex + 1}`}\n                    columns={activeColumns}\n                    dragAttributes={attributes}\n                    dragListeners={listeners}\n                    ref={setNodeRef}\n                    rowId={row.id ?? row._id}\n                    style={{\n                      opacity: isDragging ? 0 : 1,\n                      transform,\n                      transition,\n                    }}\n                  />\n                )}\n              </DraggableSortableItem>\n            ))}\n          </tbody>\n        </table>\n\n        <DragOverlay>\n          <OrderableRowDragPreview\n            className={[baseClass, `${baseClass}--drag-preview`].join(' ')}\n            rowId={dragActiveRowId}\n          >\n            <OrderableRow cellMap={cellMap} columns={activeColumns} rowId={dragActiveRowId} />\n          </OrderableRowDragPreview>\n        </DragOverlay>\n      </DraggableSortable>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"OrderableTable.js","names":["DragOverlay","formatAdminURL","React","useEffect","useState","toast","useConfig","useListQuery","useLocale","useTranslation","DraggableSortableItem","DraggableSortable","OrderableRow","OrderableRowDragPreview","baseClass","mustSortByOrderToastId","OrderableTable","appearance","BeforeTable","collection","columns","data","initialData","config","listQueryData","orderableFieldName","query","locale","localeCode","code","t","serverData","docs","isOrderable","sort","localData","setLocalData","cellMap","setCellMap","dragActiveRowId","setDragActiveRowId","Object","fromEntries","map","item","index","String","id","_id","activeColumns","filter","col","active","includes","accessor","length","_jsx","handleDragEnd","moveFromIndex","moveToIndex","warning","undefined","movedId","newBeforeRow","newAfterRow","previousData","currentData","newData","splice","target","key","newKeyWillBe","jsonBody","collectionSlug","slug","docsToMove","response","fetch","apiRoute","routes","api","path","body","JSON","stringify","credentials","headers","method","status","Error","ok","json","err","error","message","handleDragStart","handleDisabledDragAttempt","rowIds","row","_jsxs","className","Boolean","join","ids","onDragEnd","onDragStart","cellPadding","cellSpacing","i","Heading","rowIndex","disabled","children","attributes","isDragging","listeners","setNodeRef","transform","transition","dragAttributes","dragListeners","onDisabledDragAttempt","ref","rowId","style","opacity"],"sources":["../../../src/elements/Table/OrderableTable.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientCollectionConfig, Column, OrderableEndpointBody } from 'payload'\n\nimport './index.css'\n\nimport { DragOverlay } from '@dnd-kit/core'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useEffect, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { DraggableSortableItem } from '../DraggableSortable/DraggableSortableItem/index.js'\nimport { DraggableSortable } from '../DraggableSortable/index.js'\nimport { OrderableRow } from './OrderableRow.js'\nimport { OrderableRowDragPreview } from './OrderableRowDragPreview.js'\n\nconst baseClass = 'table'\n\n// A stable id so repeated attempts (e.g. holding Space) update the same toast instead of stacking new ones\nconst mustSortByOrderToastId = 'orderable-table-must-sort-by-order'\n\nexport type Props = {\n  readonly appearance?: 'condensed' | 'default'\n  readonly BeforeTable?: React.ReactNode\n  readonly collection: ClientCollectionConfig\n  readonly columns?: Column[]\n  readonly data: Record<string, unknown>[]\n  readonly heading?: React.ReactNode\n}\n\nexport const OrderableTable: React.FC<Props> = ({\n  appearance = 'default',\n  BeforeTable,\n  collection,\n  columns,\n  data: initialData,\n}) => {\n  const { config } = useConfig()\n  const { data: listQueryData, orderableFieldName, query } = useListQuery()\n  const locale = useLocale()\n  const localeCode = locale?.code\n  const { t } = useTranslation()\n  // Use the data from ListQueryProvider if available, otherwise use the props\n  const serverData = listQueryData?.docs || initialData\n\n  const isOrderable = query.sort === orderableFieldName || query.sort === `-${orderableFieldName}`\n\n  // Local state to track the current order of rows\n  const [localData, setLocalData] = useState(serverData)\n\n  // id -> index for each column\n  const [cellMap, setCellMap] = useState<Record<string, number>>({})\n\n  const [dragActiveRowId, setDragActiveRowId] = useState<number | string | undefined>()\n\n  // Update local data when server data changes\n  useEffect(() => {\n    setLocalData(serverData)\n    setCellMap(\n      Object.fromEntries(serverData.map((item, index) => [String(item.id ?? item._id), index])),\n    )\n  }, [serverData])\n\n  const activeColumns = columns?.filter((col) => col?.active)\n\n  if (\n    !activeColumns ||\n    activeColumns.filter((col) => !['_dragHandle', '_select'].includes(col.accessor)).length === 0\n  ) {\n    return <div>No columns selected</div>\n  }\n\n  const handleDragEnd = async ({ moveFromIndex, moveToIndex }) => {\n    if (!isOrderable) {\n      toast.warning(t('general:sortByOrderToReorder'), { id: mustSortByOrderToastId })\n      setDragActiveRowId(undefined)\n      return\n    }\n\n    if (moveFromIndex === moveToIndex) {\n      setDragActiveRowId(undefined)\n      return\n    }\n\n    const movedId = localData[moveFromIndex].id ?? localData[moveFromIndex]._id\n    const newBeforeRow =\n      moveToIndex > moveFromIndex ? localData[moveToIndex] : localData[moveToIndex - 1]\n    const newAfterRow =\n      moveToIndex > moveFromIndex ? localData[moveToIndex + 1] : localData[moveToIndex]\n\n    // Store the original data for rollback\n    const previousData = [...localData]\n\n    // Optimisitc update of local state to reorder the rows\n    setLocalData((currentData) => {\n      const newData = [...currentData]\n      // Update the rendered cell for the moved row to show \"pending\"\n      newData[moveFromIndex][orderableFieldName] = `pending`\n      // Move the item in the array\n      newData.splice(moveToIndex, 0, newData.splice(moveFromIndex, 1)[0])\n      return newData\n    })\n\n    try {\n      const target: OrderableEndpointBody['target'] = newBeforeRow\n        ? {\n            id: newBeforeRow.id ?? newBeforeRow._id,\n            key: newBeforeRow[orderableFieldName],\n          }\n        : {\n            id: newAfterRow.id ?? newAfterRow._id,\n            key: newAfterRow[orderableFieldName],\n          }\n\n      const newKeyWillBe =\n        (newBeforeRow && query.sort === orderableFieldName) ||\n        (!newBeforeRow && query.sort === `-${orderableFieldName}`)\n          ? 'greater'\n          : 'less'\n\n      const jsonBody: OrderableEndpointBody = {\n        collectionSlug: collection.slug,\n        docsToMove: [movedId],\n        newKeyWillBe,\n        orderableFieldName,\n        target,\n      }\n\n      const response = await fetch(\n        formatAdminURL({\n          apiRoute: config.routes.api,\n          path: `/reorder?locale=${localeCode}`,\n        }),\n        {\n          body: JSON.stringify(jsonBody),\n          credentials: 'include',\n          headers: {\n            'Content-Type': 'application/json',\n          },\n          method: 'POST',\n        },\n      )\n\n      if (response.status === 403) {\n        throw new Error('You do not have permission to reorder these rows')\n      }\n\n      if (!response.ok) {\n        throw new Error(\n          'Failed to reorder. This can happen if you reorder several rows too quickly. Please try again.',\n        )\n      }\n\n      if (response.status === 200 && (await response.json())['message'] === 'initial migration') {\n        throw new Error(\n          'You have enabled \"orderable\" on a collection with existing documents' +\n            'and this is the first time you have sorted documents. We have run an automatic migration ' +\n            'to add an initial order to the documents. Please refresh the page and try again.',\n        )\n      }\n    } catch (err) {\n      const error = err instanceof Error ? err.message : String(err)\n      // Rollback to previous state if the request fails\n      setLocalData(previousData)\n      toast.error(error)\n    } finally {\n      setDragActiveRowId(undefined)\n    }\n  }\n\n  const handleDragStart = ({ id }) => {\n    setDragActiveRowId(id)\n  }\n\n  const handleDisabledDragAttempt = () => {\n    toast.warning(t('general:sortByOrderToReorder'), { id: mustSortByOrderToastId })\n  }\n\n  const rowIds = localData.map((row) => row.id ?? row._id)\n\n  return (\n    <div\n      className={[baseClass, appearance && `${baseClass}--appearance-${appearance}`]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {BeforeTable}\n      <DraggableSortable ids={rowIds} onDragEnd={handleDragEnd} onDragStart={handleDragStart}>\n        <table cellPadding=\"0\" cellSpacing=\"0\">\n          <thead>\n            <tr>\n              {activeColumns.map((col, i) => (\n                <th id={`heading-${col.accessor}`} key={i}>\n                  {col.Heading}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {localData.map((row, rowIndex) => (\n              <DraggableSortableItem\n                disabled={!isOrderable}\n                id={rowIds[rowIndex]}\n                key={rowIds[rowIndex]}\n              >\n                {({ attributes, isDragging, listeners, setNodeRef, transform, transition }) => (\n                  <OrderableRow\n                    cellMap={cellMap}\n                    className={`row-${rowIndex + 1}`}\n                    columns={activeColumns}\n                    dragAttributes={attributes}\n                    dragListeners={listeners}\n                    isOrderable={isOrderable}\n                    onDisabledDragAttempt={handleDisabledDragAttempt}\n                    ref={setNodeRef}\n                    rowId={row.id ?? row._id}\n                    style={{\n                      opacity: isDragging ? 0 : 1,\n                      transform,\n                      transition,\n                    }}\n                  />\n                )}\n              </DraggableSortableItem>\n            ))}\n          </tbody>\n        </table>\n\n        <DragOverlay>\n          <OrderableRowDragPreview\n            className={[baseClass, `${baseClass}--drag-preview`].join(' ')}\n            rowId={dragActiveRowId}\n          >\n            <OrderableRow cellMap={cellMap} columns={activeColumns} rowId={dragActiveRowId} />\n          </OrderableRowDragPreview>\n        </DragOverlay>\n      </DraggableSortable>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}