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

package/dist/elements/SortHeader/index.js

@@ -2,10 +2,11 @@
 
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
+import React, { useRef } from 'react';
 import { SortDownIcon, SortUpIcon } from '../../icons/Sort/index.js';
 import { useListQuery } from '../../providers/ListQuery/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
+import { useAriaSort } from '../Table/useAriaSort.js';
 import './index.css';
 const baseClass = 'sort-header';
 function useSort() {
@@ -49,7 +50,6 @@ function useSort() {
   return t1;
 }
 export const SortHeader = props => {
-  const $ = _c(9);
   const {
     appearance
   } = props;
@@ -61,39 +61,21 @@ export const SortHeader = props => {
   const {
     t
   } = useTranslation();
-  let t0;
-  if ($[0] !== appearance || $[1] !== handleSortPress || $[2] !== isActive || $[3] !== isAscending || $[4] !== t) {
-    const t1 = t("general:sortByLabelDirection", {
-      direction: isAscending ? t("general:descending") : t("general:ascending"),
-      label: "Order"
-    });
-    const t2 = appearance && `${baseClass}--appearance-${appearance}`;
-    const t3 = isActive && `${baseClass}--active`;
-    let t4;
-    if ($[6] !== t2 || $[7] !== t3) {
-      t4 = [baseClass, t2, t3].filter(Boolean);
-      $[6] = t2;
-      $[7] = t3;
-      $[8] = t4;
-    } else {
-      t4 = $[8];
-    }
-    t0 = _jsx("button", {
-      "aria-label": t1,
-      className: t4.join(" "),
-      onClick: handleSortPress,
-      type: "button",
-      children: isAscending ? _jsx(SortUpIcon, {}) : _jsx(SortDownIcon, {})
-    });
-    $[0] = appearance;
-    $[1] = handleSortPress;
-    $[2] = isActive;
-    $[3] = isAscending;
-    $[4] = t;
-    $[5] = t0;
-  } else {
-    t0 = $[5];
-  }
-  return t0;
+  const buttonRef = useRef(null);
+  useAriaSort({
+    ref: buttonRef,
+    value: isActive ? isAscending ? 'ascending' : 'descending' : undefined
+  });
+  return /*#__PURE__*/_jsx("button", {
+    "aria-label": t('general:sortByLabelDirection', {
+      direction: isAscending ? t('general:descending') : t('general:ascending'),
+      label: 'Order'
+    }),
+    className: [baseClass, appearance && `${baseClass}--appearance-${appearance}`, isActive && `${baseClass}--active`].filter(Boolean).join(' '),
+    onClick: handleSortPress,
+    ref: buttonRef,
+    type: "button",
+    children: isAscending ? /*#__PURE__*/_jsx(SortUpIcon, {}) : /*#__PURE__*/_jsx(SortDownIcon, {})
+  });
 };
 //# sourceMappingURL=index.js.map

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","useRef","SortDownIcon","SortUpIcon","useListQuery","useTranslation","useAriaSort","baseClass","useSort","$","handleSortChange","orderableFieldName","query","querySort","Array","isArray","sort","isAscending","isDescending","isActive","t0","handleSortPress","t1","SortHeader","props","appearance","t","buttonRef","ref","value","undefined","_jsx","direction","label","className","filter","Boolean","join","onClick","type"],"sources":["../../../src/elements/SortHeader/index.tsx"],"sourcesContent":["'use client'\n\nimport React, { useRef } 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 { useAriaSort } from '../Table/useAriaSort.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  const buttonRef = useRef<HTMLButtonElement>(null)\n\n  useAriaSort({\n    ref: buttonRef,\n    value: isActive ? (isAscending ? 'ascending' : 'descending') : undefined,\n  })\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      ref={buttonRef}\n      type=\"button\"\n    >\n      {isAscending ? <SortUpIcon /> : <SortDownIcon />}\n    </button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,IAASC,MAAM,QAAQ;AAE9B,SAASC,YAAY,EAAEC,UAAU,QAAQ;AACzC,SAASC,YAAY,QAAQ;AAC7B,SAASC,cAAc,QAAQ;AAC/B,SAASC,WAAW,QAAQ;AAC5B,OAAO;AAOP,MAAMC,SAAA,GAAY;AAElB,SAAAC,QAAA;EAAA,MAAAC,CAAA,GAAAV,EAAA;EACE;IAAAW,gBAAA;IAAAC,kBAAA;IAAAC;EAAA,IAAwDR,YAAA;EACxD,MAAAS,SAAA,GAAkBC,KAAA,CAAAC,OAAA,CAAcH,KAAA,CAAAI,IAAU,IAAIJ,KAAA,CAAAI,IAAA,MAAgBJ,KAAA,CAAAI,IAAU;EACxE,MAAAC,WAAA,GAAoBJ,SAAA,KAAcF,kBAAA;EAClC,MAAAO,YAAA,GAAqBL,SAAA,KAAc,IAAIF,kBAAA,EAAoB;EAC3D,MAAAQ,QAAA,GAAiBF,WAAA,IAAeC,YAAA;EAAA,IAAAE,EAAA;EAAA,IAAAX,CAAA,QAAAC,gBAAA,IAAAD,CAAA,QAAAQ,WAAA,IAAAR,CAAA,QAAAE,kBAAA;IAERS,EAAA,GAAAA,CAAA;MACjBV,gBAAA,CAAiBO,WAAA,GAAc,IAAIN,kBAAA,EAAoB,GAAGA,kBAAA;IAAA;IACjEF,CAAA,MAAAC,gBAAA;IAAAD,CAAA,MAAAQ,WAAA;IAAAR,CAAA,MAAAE,kBAAA;IAAAF,CAAA,MAAAW,EAAA;EAAA;IAAAA,EAAA,GAAAX,CAAA;EAAA;EAFA,MAAAY,eAAA,GAAwBD,EAExB;EAAA,IAAAE,EAAA;EAAA,IAAAb,CAAA,QAAAY,eAAA,IAAAZ,CAAA,QAAAU,QAAA,IAAAV,CAAA,QAAAQ,WAAA;IAEOK,EAAA;MAAAD,eAAA;MAAAF,QAAA;MAAAF;IAAA;IAAyCR,CAAA,MAAAY,eAAA;IAAAZ,CAAA,MAAAU,QAAA;IAAAV,CAAA,MAAAQ,WAAA;IAAAR,CAAA,MAAAa,EAAA;EAAA;IAAAA,EAAA,GAAAb,CAAA;EAAA;EAAA,OAAzCa,EAAyC;AAAA;AAGlD,OAAO,MAAMC,UAAA,GAAyCC,KAAA;EACpD,MAAM;IAAEC;EAAU,CAAE,GAAGD,KAAA;EACvB,MAAM;IAAEH,eAAe;IAAEF,QAAQ;IAAEF;EAAW,CAAE,GAAGT,OAAA;EACnD,MAAM;IAAEkB;EAAC,CAAE,GAAGrB,cAAA;EACd,MAAMsB,SAAA,GAAY1B,MAAA,CAA0B;EAE5CK,WAAA,CAAY;IACVsB,GAAA,EAAKD,SAAA;IACLE,KAAA,EAAOV,QAAA,GAAYF,WAAA,GAAc,cAAc,eAAgBa;EACjE;EAEA,oBACEC,IAAA,CAAC;IACC,cAAYL,CAAA,CAAE,gCAAgC;MAC5CM,SAAA,EAAWf,WAAA,GAAcS,CAAA,CAAE,wBAAwBA,CAAA,CAAE;MACrDO,KAAA,EAAO;IACT;IACAC,SAAA,EAAW,CACT3B,SAAA,EACAkB,UAAA,IAAc,GAAGlB,SAAA,gBAAyBkB,UAAA,EAAY,EACtDN,QAAA,IAAY,GAAGZ,SAAA,UAAmB,CACnC,CACE4B,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;IACRC,OAAA,EAASjB,eAAA;IACTO,GAAA,EAAKD,SAAA;IACLY,IAAA,EAAK;cAEJtB,WAAA,gBAAcc,IAAA,CAAC5B,UAAA,qBAAgB4B,IAAA,CAAC7B,YAAA;;AAGvC","ignoreList":[]}

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;AAM7C,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAC1D,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAM5C,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC;IACtB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B,CA6KA,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,UAAU,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/StepNav/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAgD,MAAM,OAAO,CAAA;AAEpE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAM7C,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAC1D,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAM5C,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC;IACtB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B,CA8KA,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,UAAU,EAAE,CAAA"}

package/dist/elements/StepNav/index.js

@@ -120,6 +120,7 @@ const StepNav = ({
           className: `${baseClass}__collapsed`,
           horizontalAlign: "left",
           noBackground: true,
+          popupType: "menu",
           render: ({
             close
           }) => /*#__PURE__*/_jsx(PopupList.ButtonGroup, {

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

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

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

@@ -8,6 +8,7 @@ export type Props = {
     readonly columns?: Column[];
     readonly data: Record<string, unknown>[];
     readonly heading?: React.ReactNode;
+    readonly id?: string;
 };
 export declare const OrderableTable: React.FC<Props>;
 //# sourceMappingURL=OrderableTable.d.ts.map

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;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"}
+{"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;AAkBlD,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;IAClC,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAmN1C,CAAA"}

package/dist/elements/Table/OrderableTable.js

@@ -14,16 +14,19 @@ import { DraggableSortableItem } from '../DraggableSortable/DraggableSortableIte
 import { DraggableSortable } from '../DraggableSortable/index.js';
 import { OrderableRow } from './OrderableRow.js';
 import { OrderableRowDragPreview } from './OrderableRowDragPreview.js';
+import { useTableID } from './TableIdentity.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 = ({
+  id,
   appearance = 'default',
   BeforeTable,
   collection,
   columns,
   data: initialData
 }) => {
+  const tableID = useTableID(id);
   const {
     config
   } = useConfig();
@@ -131,9 +134,9 @@ export const OrderableTable = ({
     }
   };
   const handleDragStart = ({
-    id
+    id: id_0
   }) => {
-    setDragActiveRowId(id);
+    setDragActiveRowId(id_0);
   };
   const handleDisabledDragAttempt = () => {
     toast.warning(t('general:sortByOrderToReorder'), {
@@ -150,6 +153,7 @@ export const OrderableTable = ({
       children: [/*#__PURE__*/_jsxs("table", {
         cellPadding: "0",
         cellSpacing: "0",
+        id: tableID,
         children: [/*#__PURE__*/_jsx("thead", {
           children: /*#__PURE__*/_jsx("tr", {
             children: activeColumns.map((col_1, i) => /*#__PURE__*/_jsx("th", {

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

@@ -1 +1 @@
-{"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":[]}
+{"version":3,"file":"OrderableTable.js","names":["DragOverlay","formatAdminURL","React","useEffect","useState","toast","useConfig","useListQuery","useLocale","useTranslation","DraggableSortableItem","DraggableSortable","OrderableRow","OrderableRowDragPreview","useTableID","baseClass","mustSortByOrderToastId","OrderableTable","id","appearance","BeforeTable","collection","columns","data","initialData","tableID","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","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'\nimport { useTableID } from './TableIdentity.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  readonly id?: string\n}\n\nexport const OrderableTable: React.FC<Props> = ({\n  id,\n  appearance = 'default',\n  BeforeTable,\n  collection,\n  columns,\n  data: initialData,\n}) => {\n  const tableID = useTableID(id)\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\" id={tableID}>\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":[]}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const TableIdentityProvider: React.FC<{
+    children: React.ReactNode;
+    collectionSlug: string;
+}>;
+export declare const useTableID: (id?: string) => string | undefined;
+//# sourceMappingURL=TableIdentity.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableIdentity.d.ts","sourceRoot":"","sources":["../../../src/elements/Table/TableIdentity.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoC,MAAM,OAAO,CAAA;AASxD,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC;IAC3C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,cAAc,EAAE,MAAM,CAAA;CACvB,CAaA,CAAA;AAED,eAAO,MAAM,UAAU,QAAS,MAAM,KAAG,MAAM,GAAG,SAgBjD,CAAA"}

package/dist/elements/Table/TableIdentity.js

@@ -0,0 +1,47 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { createContext, use, useId } from 'react';
+const TableIdentityContext = /*#__PURE__*/createContext(null);
+export const TableIdentityProvider = t0 => {
+  const $ = _c(4);
+  const {
+    children,
+    collectionSlug
+  } = t0;
+  const instanceID = useId().replace(/:/g, "");
+  const t1 = `payload-table-${collectionSlug}-${instanceID}`;
+  const t2 = `payload-table-${collectionSlug}`;
+  let t3;
+  if ($[0] !== children || $[1] !== t1 || $[2] !== t2) {
+    t3 = _jsx(TableIdentityContext, {
+      value: {
+        baseID: t1,
+        legacyBaseID: t2
+      },
+      children
+    });
+    $[0] = children;
+    $[1] = t1;
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  return t3;
+};
+export const useTableID = id => {
+  const identity = use(TableIdentityContext);
+  if (!identity || !id) {
+    return id;
+  }
+  if (id === identity.legacyBaseID) {
+    return identity.baseID;
+  }
+  if (id.startsWith(`${identity.legacyBaseID}-`)) {
+    return `${identity.baseID}${id.slice(identity.legacyBaseID.length)}`;
+  }
+  return id;
+};
+//# sourceMappingURL=TableIdentity.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableIdentity.js","names":["c","_c","React","createContext","use","useId","TableIdentityContext","TableIdentityProvider","t0","$","children","collectionSlug","instanceID","replace","t1","t2","t3","_jsx","value","baseID","legacyBaseID","useTableID","id","identity","startsWith","slice","length"],"sources":["../../../src/elements/Table/TableIdentity.tsx"],"sourcesContent":["'use client'\n\nimport React, { createContext, use, useId } from 'react'\n\ntype TableIdentity = {\n  baseID: string\n  legacyBaseID: string\n}\n\nconst TableIdentityContext = createContext<null | TableIdentity>(null)\n\nexport const TableIdentityProvider: React.FC<{\n  children: React.ReactNode\n  collectionSlug: string\n}> = ({ children, collectionSlug }) => {\n  const instanceID = useId().replace(/:/g, '')\n\n  return (\n    <TableIdentityContext\n      value={{\n        baseID: `payload-table-${collectionSlug}-${instanceID}`,\n        legacyBaseID: `payload-table-${collectionSlug}`,\n      }}\n    >\n      {children}\n    </TableIdentityContext>\n  )\n}\n\nexport const useTableID = (id?: string): string | undefined => {\n  const identity = use(TableIdentityContext)\n\n  if (!identity || !id) {\n    return id\n  }\n\n  if (id === identity.legacyBaseID) {\n    return identity.baseID\n  }\n\n  if (id.startsWith(`${identity.legacyBaseID}-`)) {\n    return `${identity.baseID}${id.slice(identity.legacyBaseID.length)}`\n  }\n\n  return id\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,IAASC,aAAa,EAAEC,GAAG,EAAEC,KAAK,QAAQ;AAOjD,MAAMC,oBAAA,gBAAuBH,aAAA,CAAoC;AAEjE,OAAO,MAAMI,qBAAA,GAGRC,EAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EAAC;IAAAS,QAAA;IAAAC;EAAA,IAAAH,EAA4B;EAChC,MAAAI,UAAA,GAAmBP,KAAA,GAAAQ,OAAA,OAAsB;EAK3B,MAAAC,EAAA,oBAAiBH,cAAA,IAAkBC,UAAA,EAAY;EACzC,MAAAG,EAAA,oBAAiBJ,cAAA,EAAgB;EAAA,IAAAK,EAAA;EAAA,IAAAP,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAK,EAAA,IAAAL,CAAA,QAAAM,EAAA;IAHnDC,EAAA,GAAAC,IAAA,CAAAX,oBAAA;MAAAY,KAAA;QAAAC,MAAA,EAEYL,EAA+C;QAAAM,YAAA,EACzCL;MAAiC;MAAAL;IAAA,C;;;;;;;;SAHnDM,E;CASJ;AAEA,OAAO,MAAMK,UAAA,GAAcC,EAAA;EACzB,MAAMC,QAAA,GAAWnB,GAAA,CAAIE,oBAAA;EAErB,IAAI,CAACiB,QAAA,IAAY,CAACD,EAAA,EAAI;IACpB,OAAOA,EAAA;EACT;EAEA,IAAIA,EAAA,KAAOC,QAAA,CAASH,YAAY,EAAE;IAChC,OAAOG,QAAA,CAASJ,MAAM;EACxB;EAEA,IAAIG,EAAA,CAAGE,UAAU,CAAC,GAAGD,QAAA,CAASH,YAAY,GAAG,GAAG;IAC9C,OAAO,GAAGG,QAAA,CAASJ,MAAM,GAAGG,EAAA,CAAGG,KAAK,CAACF,QAAA,CAASH,YAAY,CAACM,MAAM,GAAG;EACtE;EAEA,OAAOJ,EAAA;AACT","ignoreList":[]}

package/dist/elements/Table/index.css

@@ -253,6 +253,7 @@
     z-index: var(--z-popup);
   }
 
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
   @media (max-width: 1024px) {
     .table {
       th,

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

@@ -6,6 +6,7 @@ export type Props = {
     readonly BeforeTable?: React.ReactNode;
     readonly columns?: Column[];
     readonly data: Record<string, unknown>[];
+    readonly id?: string;
 };
 export declare const Table: React.FC<Props>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Table/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAErC,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,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,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAC3B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAA;CACzC,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA6DjC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Table/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAErC,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,aAAa,CAAA;AAIpB,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,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAC3B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAA;IACxC,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA8DjC,CAAA"}

package/dist/elements/Table/index.js

@@ -1,51 +1,100 @@
 'use client';
 
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import { useTableID } from './TableIdentity.js';
 import './index.css';
 const baseClass = 'table';
-export const Table = ({
-  appearance,
-  BeforeTable,
-  columns,
-  data
-}) => {
-  const activeColumns = columns?.filter(col => col?.active);
-  if (!activeColumns || activeColumns.length === 0) {
-    return /*#__PURE__*/_jsx("div", {
-      children: "No columns selected"
-    });
-  }
-  return /*#__PURE__*/_jsxs("div", {
-    className: [baseClass, appearance && `${baseClass}--appearance-${appearance}`].filter(Boolean).join(' '),
-    children: [BeforeTable, /*#__PURE__*/_jsxs("table", {
-      cellPadding: "0",
-      cellSpacing: "0",
-      children: [/*#__PURE__*/_jsx("thead", {
-        children: /*#__PURE__*/_jsx("tr", {
-          children: activeColumns.map((col, i) => /*#__PURE__*/_jsx("th", {
-            id: `heading-${col.accessor.replace(/\./g, '__')}`,
-            children: col.Heading
-          }, i))
-        })
-      }), /*#__PURE__*/_jsx("tbody", {
-        children: data && data?.map((row, rowIndex) => {
-          return /*#__PURE__*/_jsx("tr", {
-            className: `row-${rowIndex + 1}`,
-            "data-id": row.id,
-            children: activeColumns.map((col, colIndex) => {
-              const {
-                accessor
-              } = col;
-              return /*#__PURE__*/_jsx("td", {
-                className: [`cell-${accessor.replace(/\./g, '__')}`, col.isLinkedColumn && 'cell--linked'].filter(Boolean).join(' '),
-                children: col.renderedCells[rowIndex]
-              }, colIndex);
+export const Table = t0 => {
+  const $ = _c(10);
+  const {
+    id,
+    appearance,
+    BeforeTable,
+    columns,
+    data
+  } = t0;
+  const tableID = useTableID(id);
+  let t1;
+  let t2;
+  if ($[0] !== BeforeTable || $[1] !== appearance || $[2] !== columns || $[3] !== data || $[4] !== tableID) {
+    t2 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const activeColumns = columns?.filter(_temp);
+      if (!activeColumns || activeColumns.length === 0) {
+        let t3;
+        if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+          t3 = _jsx("div", {
+            children: "No columns selected"
+          });
+          $[7] = t3;
+        } else {
+          t3 = $[7];
+        }
+        t2 = t3;
+        break bb0;
+      }
+      const t3 = appearance && `${baseClass}--appearance-${appearance}`;
+      let t4;
+      if ($[8] !== t3) {
+        t4 = [baseClass, t3].filter(Boolean);
+        $[8] = t3;
+        $[9] = t4;
+      } else {
+        t4 = $[9];
+      }
+      t1 = _jsxs("div", {
+        className: t4.join(" "),
+        children: [BeforeTable, _jsxs("table", {
+          cellPadding: "0",
+          cellSpacing: "0",
+          id: tableID,
+          children: [_jsx("thead", {
+            children: _jsx("tr", {
+              children: activeColumns.map(_temp2)
             })
-          }, typeof row.id === 'string' || typeof row.id === 'number' ? String(row.id) : rowIndex);
-        })
-      })]
-    })]
-  });
+          }), _jsx("tbody", {
+            children: data && data?.map((row, rowIndex) => _jsx("tr", {
+              className: `row-${rowIndex + 1}`,
+              "data-id": row.id,
+              children: activeColumns.map((col_1, colIndex) => {
+                const {
+                  accessor
+                } = col_1;
+                return _jsx("td", {
+                  className: [`cell-${accessor.replace(/\./g, "__")}`, col_1.isLinkedColumn && "cell--linked"].filter(Boolean).join(" "),
+                  children: col_1.renderedCells[rowIndex]
+                }, colIndex);
+              })
+            }, typeof row.id === "string" || typeof row.id === "number" ? String(row.id) : rowIndex))
+          })]
+        })]
+      });
+    }
+    $[0] = BeforeTable;
+    $[1] = appearance;
+    $[2] = columns;
+    $[3] = data;
+    $[4] = tableID;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t1 = $[5];
+    t2 = $[6];
+  }
+  if (t2 !== Symbol.for("react.early_return_sentinel")) {
+    return t2;
+  }
+  return t1;
 };
+function _temp(col) {
+  return col?.active;
+}
+function _temp2(col_0, i) {
+  return _jsx("th", {
+    id: `heading-${col_0.accessor.replace(/\./g, "__")}`,
+    children: col_0.Heading
+  }, i);
+}
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","baseClass","Table","appearance","BeforeTable","columns","data","activeColumns","filter","col","active","length","_jsx","_jsxs","className","Boolean","join","cellPadding","cellSpacing","map","i","id","accessor","replace","Heading","row","rowIndex","colIndex","isLinkedColumn","renderedCells","String"],"sources":["../../../src/elements/Table/index.tsx"],"sourcesContent":["'use client'\n\nimport type { Column } from 'payload'\n\nimport React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'table'\n\nexport type Props = {\n  readonly appearance?: 'condensed' | 'default'\n  readonly BeforeTable?: React.ReactNode\n  readonly columns?: Column[]\n  readonly data: Record<string, unknown>[]\n}\n\nexport const Table: React.FC<Props> = ({ appearance, BeforeTable, columns, data }) => {\n  const activeColumns = columns?.filter((col) => col?.active)\n\n  if (!activeColumns || activeColumns.length === 0) {\n    return <div>No columns selected</div>\n  }\n\n  return (\n    <div\n      className={[baseClass, appearance && `${baseClass}--appearance-${appearance}`]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {BeforeTable}\n      <table cellPadding=\"0\" cellSpacing=\"0\">\n        <thead>\n          <tr>\n            {activeColumns.map((col, i) => (\n              <th id={`heading-${col.accessor.replace(/\\./g, '__')}`} key={i}>\n                {col.Heading}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {data &&\n            data?.map((row, rowIndex) => {\n              return (\n                <tr\n                  className={`row-${rowIndex + 1}`}\n                  data-id={row.id}\n                  key={\n                    typeof row.id === 'string' || typeof row.id === 'number'\n                      ? String(row.id)\n                      : rowIndex\n                  }\n                >\n                  {activeColumns.map((col, colIndex) => {\n                    const { accessor } = col\n\n                    return (\n                      <td\n                        className={[\n                          `cell-${accessor.replace(/\\./g, '__')}`,\n                          col.isLinkedColumn && 'cell--linked',\n                        ]\n                          .filter(Boolean)\n                          .join(' ')}\n                        key={colIndex}\n                      >\n                        {col.renderedCells[rowIndex]}\n                      </td>\n                    )\n                  })}\n                </tr>\n              )\n            })}\n        </tbody>\n      </table>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAIA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AASlB,OAAO,MAAMC,KAAA,GAAyBA,CAAC;EAAEC,UAAU;EAAEC,WAAW;EAAEC,OAAO;EAAEC;AAAI,CAAE;EAC/E,MAAMC,aAAA,GAAgBF,OAAA,EAASG,MAAA,CAAQC,GAAA,IAAQA,GAAA,EAAKC,MAAA;EAEpD,IAAI,CAACH,aAAA,IAAiBA,aAAA,CAAcI,MAAM,KAAK,GAAG;IAChD,oBAAOC,IAAA,CAAC;gBAAI;;EACd;EAEA,oBACEC,KAAA,CAAC;IACCC,SAAA,EAAW,CAACb,SAAA,EAAWE,UAAA,IAAc,GAAGF,SAAA,gBAAyBE,UAAA,EAAY,CAAC,CAC3EK,MAAM,CAACO,OAAA,EACPC,IAAI,CAAC;eAEPZ,WAAA,E,aACDS,KAAA,CAAC;MAAMI,WAAA,EAAY;MAAIC,WAAA,EAAY;8BACjCN,IAAA,CAAC;kBACC,aAAAA,IAAA,CAAC;oBACEL,aAAA,CAAcY,GAAG,CAAC,CAACV,GAAA,EAAKW,CAAA,kBACvBR,IAAA,CAAC;YAAGS,EAAA,EAAI,WAAWZ,GAAA,CAAIa,QAAQ,CAACC,OAAO,CAAC,OAAO,OAAO;sBACnDd,GAAA,CAAIe;aADsDJ,CAAA;;uBAMnER,IAAA,CAAC;kBACEN,IAAA,IACCA,IAAA,EAAMa,GAAA,CAAI,CAACM,GAAA,EAAKC,QAAA;UACd,oBACEd,IAAA,CAAC;YACCE,SAAA,EAAW,OAAOY,QAAA,GAAW,GAAG;YAChC,WAASD,GAAA,CAAIJ,EAAE;sBAOdd,aAAA,CAAcY,GAAG,CAAC,CAACV,GAAA,EAAKkB,QAAA;cACvB,MAAM;gBAAEL;cAAQ,CAAE,GAAGb,GAAA;cAErB,oBACEG,IAAA,CAAC;gBACCE,SAAA,EAAW,CACT,QAAQQ,QAAA,CAASC,OAAO,CAAC,OAAO,OAAO,EACvCd,GAAA,CAAImB,cAAc,IAAI,eACvB,CACEpB,MAAM,CAACO,OAAA,EACPC,IAAI,CAAC;0BAGPP,GAAA,CAAIoB,aAAa,CAACH,QAAA;iBAFdC,QAAA;YAKX;aArBE,OAAOF,GAAA,CAAIJ,EAAE,KAAK,YAAY,OAAOI,GAAA,CAAIJ,EAAE,KAAK,WAC5CS,MAAA,CAAOL,GAAA,CAAIJ,EAAE,IACbK,QAAA;QAsBZ;;;;AAKZ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useTableID","baseClass","Table","t0","$","id","appearance","BeforeTable","columns","data","tableID","t1","t2","Symbol","for","activeColumns","filter","_temp","length","t3","_jsx","children","t4","Boolean","_jsxs","className","join","cellPadding","cellSpacing","map","_temp2","row","rowIndex","col_1","colIndex","accessor","col","replace","isLinkedColumn","renderedCells","String","active","col_0","i","Heading"],"sources":["../../../src/elements/Table/index.tsx"],"sourcesContent":["'use client'\n\nimport type { Column } from 'payload'\n\nimport React from 'react'\n\nimport { useTableID } from './TableIdentity.js'\nimport './index.css'\n\nconst baseClass = 'table'\n\nexport type Props = {\n  readonly appearance?: 'condensed' | 'default'\n  readonly BeforeTable?: React.ReactNode\n  readonly columns?: Column[]\n  readonly data: Record<string, unknown>[]\n  readonly id?: string\n}\n\nexport const Table: React.FC<Props> = ({ id, appearance, BeforeTable, columns, data }) => {\n  const tableID = useTableID(id)\n  const activeColumns = columns?.filter((col) => col?.active)\n\n  if (!activeColumns || activeColumns.length === 0) {\n    return <div>No columns selected</div>\n  }\n\n  return (\n    <div\n      className={[baseClass, appearance && `${baseClass}--appearance-${appearance}`]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {BeforeTable}\n      <table cellPadding=\"0\" cellSpacing=\"0\" id={tableID}>\n        <thead>\n          <tr>\n            {activeColumns.map((col, i) => (\n              <th id={`heading-${col.accessor.replace(/\\./g, '__')}`} key={i}>\n                {col.Heading}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {data &&\n            data?.map((row, rowIndex) => {\n              return (\n                <tr\n                  className={`row-${rowIndex + 1}`}\n                  data-id={row.id}\n                  key={\n                    typeof row.id === 'string' || typeof row.id === 'number'\n                      ? String(row.id)\n                      : rowIndex\n                  }\n                >\n                  {activeColumns.map((col, colIndex) => {\n                    const { accessor } = col\n\n                    return (\n                      <td\n                        className={[\n                          `cell-${accessor.replace(/\\./g, '__')}`,\n                          col.isLinkedColumn && 'cell--linked',\n                        ]\n                          .filter(Boolean)\n                          .join(' ')}\n                        key={colIndex}\n                      >\n                        {col.renderedCells[rowIndex]}\n                      </td>\n                    )\n                  })}\n                </tr>\n              )\n            })}\n        </tbody>\n      </table>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,7 @@
+import type { AriaAttributes, RefObject } from 'react';
+export declare const useAriaSort: <TElement extends HTMLElement>({ labelledBy, ref, value, }: {
+    labelledBy?: string;
+    ref: RefObject<null | TElement>;
+    value?: AriaAttributes['aria-sort'];
+}) => void;
+//# sourceMappingURL=useAriaSort.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAriaSort.d.ts","sourceRoot":"","sources":["../../../src/elements/Table/useAriaSort.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItD,eAAO,MAAM,WAAW,GAAI,QAAQ,SAAS,WAAW,+BAIrD;IACD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,GAAG,EAAE,SAAS,CAAC,IAAI,GAAG,QAAQ,CAAC,CAAA;IAC/B,KAAK,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAA;CACpC,SA8BA,CAAA"}