@multiplatform.one/table 7.28.1 → 7.29.1

package/dist/esm/components/DataTable/CellContent.mjs

@@ -0,0 +1,52 @@
+import { Text } from "@multiplatform.one/components";
+import { wrapBareTextChildren } from "@multiplatform.one/table-primitives";
+import { flexRender } from "@tanstack/react-table";
+import { Fragment, jsx } from "react/jsx-runtime";
+function isPlainRenderer(cellDef) {
+  return typeof cellDef === "function" && !cellDef.prototype?.isReactComponent;
+}
+function CellValue({
+  value,
+  fontSize
+}) {
+  return /* @__PURE__ */jsx(Fragment, {
+    children: wrapBareTextChildren(value ?? null, (label, key) => /* @__PURE__ */jsx(Text, {
+      fontSize,
+      children: label
+    }, key))
+  });
+}
+const rendererCells = /* @__PURE__ */new WeakMap();
+function rendererCell(render) {
+  let Cell = rendererCells.get(render);
+  if (!Cell) {
+    Cell = ({
+      ctx,
+      fontSize
+    }) => /* @__PURE__ */jsx(CellValue, {
+      value: render(ctx),
+      fontSize
+    });
+    rendererCells.set(render, Cell);
+  }
+  return Cell;
+}
+function CellContent({
+  cellDef,
+  ctx,
+  fontSize
+}) {
+  if (!isPlainRenderer(cellDef)) {
+    return /* @__PURE__ */jsx(CellValue, {
+      value: flexRender(cellDef, ctx),
+      fontSize
+    });
+  }
+  const Cell = rendererCell(cellDef);
+  return /* @__PURE__ */jsx(Cell, {
+    ctx,
+    fontSize
+  });
+}
+export { CellContent };
+//# sourceMappingURL=CellContent.mjs.map

package/dist/esm/components/DataTable/CellContent.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["Text","wrapBareTextChildren","flexRender","Fragment","jsx","isPlainRenderer","cellDef","prototype","isReactComponent","CellValue","value","fontSize","children","label","key","rendererCells","WeakMap","rendererCell","render","Cell","get","ctx","set","CellContent"],"sources":["../../../../src/components/DataTable/CellContent.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,IAAA,QAAY;AACrB,SAASC,oBAAA,QAA4B;AACrC,SAASC,UAAA,QAAkB;AAgBvB,SAAAC,QAAA,EAEIC,GAAA,QAFJ;AATJ,SAASC,gBAAgBC,OAAA,EAAuC;EAC9D,OACE,OAAOA,OAAA,KAAY,cACnB,CAAEA,OAAA,CAA2DC,SAAA,EAAWC,gBAAA;AAE5E;AAEA,SAASC,UAAU;EAAEC,KAAA;EAAOC;AAAS,GAAmD;EACtF,OACE,eAAAP,GAAA,CAAAD,QAAA;IACGS,QAAA,EAAAX,oBAAA,CAAqBS,KAAA,IAAS,MAAM,CAACG,KAAA,EAAOC,GAAA,KAC3C,eAAAV,GAAA,CAACJ,IAAA;MAAeW,QAAA;MACbC,QAAA,EAAAC;IAAA,GADQC,GAEX,CACD;EAAA,CACH;AAEJ;AAEA,MAAMC,aAAA,GAAgB,mBAAIC,OAAA,CAAoD;AAO9E,SAASC,aAAaC,MAAA,EAAoD;EACxE,IAAIC,IAAA,GAAOJ,aAAA,CAAcK,GAAA,CAAIF,MAAM;EACnC,IAAI,CAACC,IAAA,EAAM;IACTA,IAAA,GAAOA,CAAC;MAAEE,GAAA;MAAKV;IAAS,MACtB,eAAAP,GAAA,CAACK,SAAA;MAAUC,KAAA,EAAOQ,MAAA,CAAOG,GAAG;MAAGV;IAAA,CAAoB;IAErDI,aAAA,CAAcO,GAAA,CAAIJ,MAAA,EAAQC,IAAI;EAChC;EACA,OAAOA,IAAA;AACT;AAcO,SAASI,YAAY;EAC1BjB,OAAA;EACAe,GAAA;EACAV;AACF,GAIG;EACD,IAAI,CAACN,eAAA,CAAgBC,OAAO,GAAG;IAC7B,OAAO,eAAAF,GAAA,CAACK,SAAA;MAAUC,KAAA,EAAOR,UAAA,CAAWI,OAAA,EAAkBe,GAAY;MAAGV;IAAA,CAAoB;EAC3F;EACA,MAAMQ,IAAA,GAAOF,YAAA,CAAaX,OAAO;EACjC,OAAO,eAAAF,GAAA,CAACe,IAAA;IAAKE,GAAA;IAAUV;EAAA,CAAoB;AAC7C","ignoreList":[]}

package/dist/esm/components/DataTable/CellContent.native.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Text } from "@multiplatform.one/components";
+import { wrapBareTextChildren } from "@multiplatform.one/table-primitives";
+import { flexRender } from "@tanstack/react-table";
+function isPlainRenderer(cellDef) {
+  var _cellDef_prototype;
+  return typeof cellDef === "function" && !((_cellDef_prototype = cellDef.prototype) === null || _cellDef_prototype === void 0 ? void 0 : _cellDef_prototype.isReactComponent);
+}
+function CellValue(param) {
+  var {
+    value,
+    fontSize
+  } = param;
+  return /* @__PURE__ */_jsx(_Fragment, {
+    children: wrapBareTextChildren(value !== null && value !== void 0 ? value : null, function (label, key) {
+      return /* @__PURE__ */_jsx(Text, {
+        fontSize,
+        children: label
+      }, key);
+    })
+  });
+}
+var rendererCells = /* @__PURE__ */new WeakMap();
+function rendererCell(render) {
+  var Cell = rendererCells.get(render);
+  if (!Cell) {
+    Cell = function Cell2(param) {
+      var {
+        ctx,
+        fontSize
+      } = param;
+      return /* @__PURE__ */_jsx(CellValue, {
+        value: render(ctx),
+        fontSize
+      });
+    };
+    rendererCells.set(render, Cell);
+  }
+  return Cell;
+}
+function CellContent(param) {
+  var {
+    cellDef,
+    ctx,
+    fontSize
+  } = param;
+  if (!isPlainRenderer(cellDef)) {
+    return /* @__PURE__ */_jsx(CellValue, {
+      value: flexRender(cellDef, ctx),
+      fontSize
+    });
+  }
+  var Cell = rendererCell(cellDef);
+  return /* @__PURE__ */_jsx(Cell, {
+    ctx,
+    fontSize
+  });
+}
+export { CellContent };
+//# sourceMappingURL=CellContent.native.js.map

package/dist/esm/components/DataTable/CellContent.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","Fragment","_Fragment","Text","wrapBareTextChildren","flexRender","isPlainRenderer","cellDef","_cellDef_prototype","prototype","isReactComponent","CellValue","param","value","fontSize","children","label","key","rendererCells","WeakMap","rendererCell","render","Cell","get","Cell2","ctx"],"sources":["../../../../src/components/DataTable/CellContent.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,EAAYC,QAAA,IAAAC,SAAA;AACrB,SAASC,IAAA,uCAA4B;AACrC,SAASC,oBAAkB;AAgBvB,SAAAC,UAEI,+BAFJ;AATJ,SAASC,gBAAgBC,OAAA,EAAuC;EAC9D,IAAAC,kBACS;EAGX,cAAAD,OAAA,sBAAAC,kBAAA,GAAAD,OAAA,CAAAE,SAAA,cAAAD,kBAAA,uBAAAA,kBAAA,CAAAE,gBAAA;AAEA;AACE,SACEC,UAAAC,KAAA;EAQJ;IAAAC,KAAA;IAAAC;EAAA,IAAAF,KAAA;EAEA,OAAM,eAAgBZ,IAAA,CAAAE,SAAA;IAOtBa,QAAS,EAAAX,oBAAiE,CAAAS,KAAA,aAAAA,KAAA,cAAAA,KAAA,mBAAAG,KAAA,EAAAC,GAAA;MACpE,OAAO,eAAcjB,IAAI,CAAAG,IAAM;QAC9BW,QAAM;QACTC,QAAU,EAAAC;MAGV,GAAAC,GAAA;IACF;EACA;AACF;AAcO,IAAAC,aAAS,kBAAY,IAAAC,OAAA;AAAA,SAC1BC,aAAAC,MAAA;EACA,IAAAC,IAAA,GAAAJ,aAAA,CAAAK,GAAA,CAAAF,MAAA;EACA,KAAAC,IAAA;IAKCA,IAAA,YAAAE,MAAAZ,KAAA;MACG,IAAC;QAAAa,GAAA;QAAAX;MAAgB,IAAOF,KAAG;MAC7B,OAAO,eAAAZ,IAAC,CAAAW,SAAA,EAAU;QACpBE,KAAA,EAAAQ,MAAA,CAAAI,GAAA;QACMX;MACN;IACF","ignoreList":[]}

package/dist/esm/components/DataTable/DataTableInfiniteTail.mjs

@@ -0,0 +1,65 @@
+import { Skeleton } from "@multiplatform.one/components";
+import { useTranslation } from "react-i18next";
+import { Text, View } from "tamagui";
+import { bidiIsolate, withInterp } from "../../utils/withInterp.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DataTableInfiniteTail({
+  infinite,
+  visibleCount,
+  showAppendSkeleton,
+  rowHeightPx,
+  fontSize,
+  gapProps,
+  sentinel
+}) {
+  const {
+    t
+  } = useTranslation();
+  return /* @__PURE__ */jsxs(View, {
+    flexDirection: "column",
+    width: "100%",
+    children: [sentinel, showAppendSkeleton && infinite.isAppending ? /* @__PURE__ */jsx(View, {
+      flexDirection: "column",
+      width: "100%",
+      ...gapProps,
+      paddingVertical: "$2",
+      "aria-hidden": true,
+      ...{
+        "data-testid": "infinite-append-skeleton"
+      },
+      children: Array.from({
+        length: 3
+      }).map((_, i) => /* @__PURE__ */jsx(Skeleton, {
+        width: "100%",
+        height: rowHeightPx - 8
+      }, i))
+    }) : null, /* @__PURE__ */jsx(Text, {
+      role: "status",
+      "aria-live": "polite",
+      textAlign: "center",
+      paddingVertical: "$2",
+      fontSize,
+      color: "$color10",
+      ...{
+        "data-testid": "infinite-status"
+      },
+      children: infinite.isAppending ? t("Loading more rows\u2026") : infinite.exhausted ? typeof infinite.totalCount === "number" && infinite.totalCount > 0 ? bidiIsolate(withInterp(t("All {{count}} rows loaded", {
+        count: infinite.totalCount
+      }), {
+        count: infinite.totalCount
+      })) : t("End of results") : typeof infinite.totalCount === "number" ? bidiIsolate(withInterp(t("Showing {{visible}} of {{total}} rows", {
+        visible: visibleCount,
+        total: infinite.totalCount
+      }), {
+        visible: visibleCount,
+        total: infinite.totalCount
+      })) : bidiIsolate(withInterp(t("Showing {{visible}} rows", {
+        visible: visibleCount
+      }), {
+        visible: visibleCount
+      }))
+    })]
+  });
+}
+export { DataTableInfiniteTail };
+//# sourceMappingURL=DataTableInfiniteTail.mjs.map

package/dist/esm/components/DataTable/DataTableInfiniteTail.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["Skeleton","useTranslation","Text","View","bidiIsolate","withInterp","jsx","jsxs","DataTableInfiniteTail","infinite","visibleCount","showAppendSkeleton","rowHeightPx","fontSize","gapProps","sentinel","t","flexDirection","width","children","isAppending","paddingVertical","Array","from","length","map","_","i","height","role","textAlign","color","exhausted","totalCount","count","visible","total"],"sources":["../../../../src/components/DataTable/DataTableInfiniteTail.tsx"],"sourcesContent":[null],"mappings":"AAOA,SAASA,QAAA,QAAgB;AAEzB,SAASC,cAAA,QAAsB;AAC/B,SAASC,IAAA,EAAMC,IAAA,QAAY;AAE3B,SAASC,WAAA,EAAaC,UAAA,QAAkB;AA0BpC,SAYQC,GAAA,EAZRC,IAAA;AAXG,SAASC,sBAAsB;EACpCC,QAAA;EACAC,YAAA;EACAC,kBAAA;EACAC,WAAA;EACAC,QAAA;EACAC,QAAA;EACAC;AACF,GAA+B;EAC7B,MAAM;IAAEC;EAAE,IAAIf,cAAA,CAAe;EAC7B,OACE,eAAAM,IAAA,CAACJ,IAAA;IAAKc,aAAA,EAAc;IAASC,KAAA,EAAM;IAChCC,QAAA,GAAAJ,QAAA,EACAJ,kBAAA,IAAsBF,QAAA,CAASW,WAAA,GAC9B,eAAAd,GAAA,CAACH,IAAA;MACCc,aAAA,EAAc;MACdC,KAAA,EAAM;MACL,GAAGJ,QAAA;MACJO,eAAA,EAAgB;MAChB,eAAW;MACV,GAAI;QAAE,eAAe;MAA2B;MAEhDF,QAAA,EAAAG,KAAA,CAAMC,IAAA,CAAK;QAAEC,MAAA,EAAQ;MAAE,CAAC,EAAEC,GAAA,CAAI,CAACC,CAAA,EAAGC,CAAA,KACjC,eAAArB,GAAA,CAACN,QAAA;QAAiBkB,KAAA,EAAM;QAAOU,MAAA,EAAQhB,WAAA,GAAc;MAAA,GAAtCe,CAAyC,CACzD;IAAA,CACH,IACE,MACJ,eAAArB,GAAA,CAACJ,IAAA;MACC2B,IAAA,EAAK;MACL,aAAU;MACVC,SAAA,EAAU;MACVT,eAAA,EAAgB;MAChBR,QAAA;MACAkB,KAAA,EAAM;MACL,GAAI;QAAE,eAAe;MAAkB;MAIvCZ,QAAA,EAAAV,QAAA,CAASW,WAAA,GACNJ,CAAA,CAAE,yBAAoB,IACtBP,QAAA,CAASuB,SAAA,GACP,OAAOvB,QAAA,CAASwB,UAAA,KAAe,YAAYxB,QAAA,CAASwB,UAAA,GAAa,IAC/D7B,WAAA,CACEC,UAAA,CAAWW,CAAA,CAAE,6BAA6B;QAAEkB,KAAA,EAAOzB,QAAA,CAASwB;MAAW,CAAC,GAAG;QACzEC,KAAA,EAAOzB,QAAA,CAASwB;MAClB,CAAC,CACH,IACAjB,CAAA,CAAE,gBAAgB,IACpB,OAAOP,QAAA,CAASwB,UAAA,KAAe,WAC7B7B,WAAA,CACEC,UAAA,CACEW,CAAA,CAAE,yCAAyC;QACzCmB,OAAA,EAASzB,YAAA;QACT0B,KAAA,EAAO3B,QAAA,CAASwB;MAClB,CAAC,GACD;QAAEE,OAAA,EAASzB,YAAA;QAAc0B,KAAA,EAAO3B,QAAA,CAASwB;MAAW,CACtD,CACF,IACA7B,WAAA,CACEC,UAAA,CAAWW,CAAA,CAAE,4BAA4B;QAAEmB,OAAA,EAASzB;MAAa,CAAC,GAAG;QACnEyB,OAAA,EAASzB;MACX,CAAC,CACH;IAAA,CACV;EAAA,CACF;AAEJ","ignoreList":[]}

package/dist/esm/components/DataTable/DataTableInfiniteTail.native.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton } from "@multiplatform.one/components";
+import { useTranslation } from "react-i18next";
+import { Text, View } from "tamagui";
+import { bidiIsolate, withInterp } from "../../utils/withInterp.native.js";
+function DataTableInfiniteTail(param) {
+  var {
+    infinite,
+    visibleCount,
+    showAppendSkeleton,
+    rowHeightPx,
+    fontSize,
+    gapProps,
+    sentinel
+  } = param;
+  var {
+    t
+  } = useTranslation();
+  return /* @__PURE__ */_jsxs(View, {
+    flexDirection: "column",
+    width: "100%",
+    children: [sentinel, showAppendSkeleton && infinite.isAppending ? /* @__PURE__ */_jsx(View, {
+      flexDirection: "column",
+      width: "100%",
+      ...gapProps,
+      paddingVertical: "$2",
+      "aria-hidden": true,
+      ...{
+        "data-testid": "infinite-append-skeleton"
+      },
+      children: Array.from({
+        length: 3
+      }).map(function (_, i) {
+        return /* @__PURE__ */_jsx(Skeleton, {
+          width: "100%",
+          height: rowHeightPx - 8
+        }, i);
+      })
+    }) : null, /* @__PURE__ */_jsx(Text, {
+      role: "status",
+      "aria-live": "polite",
+      textAlign: "center",
+      paddingVertical: "$2",
+      fontSize,
+      color: "$color10",
+      ...{
+        "data-testid": "infinite-status"
+      },
+      children: (
+      /* Numeric labels are bidi-isolated so RTL contexts keep
+      the interpolated runs in order (FSI…PDI). */
+      infinite.isAppending ? t("Loading more rows\u2026") : infinite.exhausted ? typeof infinite.totalCount === "number" && infinite.totalCount > 0 ? bidiIsolate(withInterp(t("All {{count}} rows loaded", {
+        count: infinite.totalCount
+      }), {
+        count: infinite.totalCount
+      })) : t("End of results") : typeof infinite.totalCount === "number" ? bidiIsolate(withInterp(t("Showing {{visible}} of {{total}} rows", {
+        visible: visibleCount,
+        total: infinite.totalCount
+      }), {
+        visible: visibleCount,
+        total: infinite.totalCount
+      })) : bidiIsolate(withInterp(t("Showing {{visible}} rows", {
+        visible: visibleCount
+      }), {
+        visible: visibleCount
+      })))
+    })]
+  });
+}
+export { DataTableInfiniteTail };
+//# sourceMappingURL=DataTableInfiniteTail.native.js.map

package/dist/esm/components/DataTable/DataTableInfiniteTail.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Skeleton","useTranslation","Text","View","bidiIsolate","withInterp","DataTableInfiniteTail","param","infinite","visibleCount","showAppendSkeleton","rowHeightPx","fontSize","gapProps","sentinel","t","flexDirection","width","children","isAppending","paddingVertical","Array","from","length","map","_","i","height","role","textAlign","color","exhausted","totalCount","count","visible","total"],"sources":["../../../../src/components/DataTable/DataTableInfiniteTail.tsx"],"sourcesContent":[null],"mappings":"AAOA,SAASA,GAAA,IAAAC,IAAA,EAAAC,IAAgB,IAAAC,KAAA;AAEzB,SAASC,QAAA,uCAAsB;AAC/B,SAASC,cAAM,QAAY;AAE3B,SAASC,IAAA,EAAAC,IAAA,QAAa;AA0BlB,SAYQC,WAZR,EAAAC,UAAA;AAXG,SAASC,sBAAsBC,KAAA;EACpC;IAAAC,QAAA;IAAAC,YAAA;IAAAC,kBAAA;IAAAC,WAAA;IAAAC,QAAA;IAAAC,QAAA;IAAAC;EAAA,IAAAP,KAAA;EACA;IAAAQ;EAAA,IAAAd,cAAA;EACA,sBAAAF,KAAA,CAAAI,IAAA;IACAa,aAAA;IACAC,KAAA;IACAC,QAAA,GACAJ,QAAA,EAC6BJ,kBAAA,IAAAF,QAAA,CAAAW,WAAA,kBAAAtB,IAAA,CAAAM,IAAA;MACvBa,aAAQ,UAAe;MAC7BC,KACE;MACG,GAAAJ,QAAA;MACAO,eAAA,MAAsB;MACpB;MAAA;QACC,aAAc;MACd;MACCF,QAAG,EAAAG,KAAA,CAAAC,IAAA;QACJC,MAAA;MACA,GAAAC,GAAA,WAAWC,CAAA,EAAAC,CAAA;QACV,OAAM,eAAe7B,IAAA,CAAAG,QAAA;UAErBiB,KAAA,QAAM;UAENU,MAAA,EAAAhB,WAAA;QAED,GAAAe,CAAA;MACJ;IAAC,0BAAA7B,IAAA,CAAAK,IAAA;MACC0B,IAAA,EAAK;MACL,aAAU;MACVC,SAAA,EAAU;MACVT,eAAA,EAAgB;MAChBR,QAAA;MACAkB,KAAA,EAAM;MACL,GAAI;QAIJ;MAIO;MAC6EZ,QACzE;MACF;AAAC;MAKDV,QAAA,CAAAW,WAAA,GAAAJ,CAAA,8BAAAP,QAAA,CAAAuB,SAAA,UAAAvB,QAAA,CAAAwB,UAAA,iBAAAxB,QAAA,CAAAwB,UAAA,OAAA5B,WAAA,CAAAC,UAAA,CAAAU,CAAA;QACEkB,KAAE,EAAAzB,QAAA,CAAAwB;MAAyC,IACzC;QAASC,KACT,EAAAzB,QAAO,CAAAwB;MAAS,EAClB,CAAC,GAAAjB,CAAA,4BAAAP,QAAA,CAAAwB,UAAA,gBAAA5B,WAAA,CAAAC,UAAA,CAAAU,CAAA;QACDmB,OAAE,EAAAzB,YAAS;QACb0B,KAAA,EAAA3B,QAAA,CAAAwB;MACF,EACA;QACEE,OAAA,EAAWzB,YAAE;QACX0B,KAAA,EAAA3B,QAAS,CAAAwB;MACX,CAAC,KAAA5B,WAAA,CAAAC,UAAA,CAAAU,CAAA;QACHmB,OAAA,EAAAzB;MAAA;QACVyB,OAAA,EAAAzB;MACF","ignoreList":[]}

package/dist/esm/components/DataTable/DataTableRoot.mjs

@@ -4,7 +4,7 @@ import { flexRender } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { ensureFocusVisibleRing, useResolvedKnobs } from "@multiplatform.one/theme";
 import React, { useEffect, useRef, useMemo, useCallback, useState } from "react";
-import { AsyncBoundary, EmptyState, Skeleton, Tooltip, useDirection } from "@multiplatform.one/components";
+import { AsyncBoundary, EmptyState, Tooltip, useDirection } from "@multiplatform.one/components";
 import { Text, View, isWeb, useMedia } from "tamagui";
 import { useTranslation } from "react-i18next";
 import { useDataTable } from "../../hooks/useDataTable.mjs";
@@ -23,6 +23,8 @@ import { DataTableStateContext } from "./DataTableStateContext.mjs";
 import { DataTableCardControls, DataTableCardSortControl } from "./DataTableCardControls.mjs";
 import { DataTableMobileCards } from "./DataTableMobileCards.mjs";
 import { DataTableDocumentList } from "./DataTableDocumentList.mjs";
+import { DataTableInfiniteTail } from "./DataTableInfiniteTail.mjs";
+import { CellContent } from "./CellContent.mjs";
 import { DataTableVirtualized } from "./DataTableVirtualized.mjs";
 import { dataTableChrome, resolveDataTableIntent, rowIntentProps } from "./dataTableChrome.mjs";
 import { tableCellKeyboardProps, tableRowStateProps } from "./rowStateChrome.mjs";
@@ -527,7 +529,11 @@ function DataTableRoot({
         ...{
           "data-cell-align": customAlign
         },
-        children: flexRender(columnDef.cell, cell.getContext())
+        children: /* @__PURE__ */jsx(CellContent, {
+          cellDef: columnDef.cell,
+          ctx: cell.getContext(),
+          fontSize: knobProps.label.fontSize
+        })
       });
     }
     const columnField = getColumnField(columnDef);
@@ -556,7 +562,7 @@ function DataTableRoot({
       linkedValue,
       onLinkedChange
     });
-  }, [handleCellChange, readOnly, disabled, knobProps.sizeToken, isCompact]);
+  }, [handleCellChange, readOnly, disabled, knobProps.sizeToken, knobProps.label.fontSize, isCompact]);
   const extraColumnsBefore = (enableRowSelection ? 1 : 0) + (showRowNumbers ? 1 : 0) + (enableRowExpansion ? 1 : 0);
   const extraColumnsAfter = showDeleteRow && !readOnly ? 1 : 0;
   const excelCellNav = enableKeyboardNavigation && !rowPressActive && !disabled;
@@ -1552,10 +1558,14 @@ function DataTableRoot({
                 }, footerGroup.id))
               })]
             })
-          })), infinite ? /* @__PURE__ */jsxs(View, {
-            flexDirection: "column",
-            width: "100%",
-            children: [!isVirtualized && !infinite.exhausted && isWeb ? /* @__PURE__ */jsx(View, {
+          })), infinite ? /* @__PURE__ */jsx(DataTableInfiniteTail, {
+            infinite,
+            visibleCount: tableRows.length,
+            showAppendSkeleton: !isVirtualized,
+            rowHeightPx,
+            fontSize: knobProps.sizeToken,
+            gapProps: knobProps.gap,
+            sentinel: !isVirtualized && !infinite.exhausted && isWeb ? /* @__PURE__ */jsx(View, {
               ref: sentinelRef,
               height: 1,
               width: "100%",
@@ -1563,47 +1573,7 @@ function DataTableRoot({
               ...{
                 "data-testid": "infinite-sentinel"
               }
-            }) : null, !isVirtualized && infinite.isAppending ? /* @__PURE__ */jsx(View, {
-              flexDirection: "column",
-              width: "100%",
-              ...knobProps.gap,
-              paddingVertical: "$2",
-              "aria-hidden": true,
-              ...{
-                "data-testid": "infinite-append-skeleton"
-              },
-              children: Array.from({
-                length: 3
-              }).map((_, i) => /* @__PURE__ */jsx(Skeleton, {
-                width: "100%",
-                height: rowHeightPx - 8
-              }, i))
-            }) : null, /* @__PURE__ */jsx(Text, {
-              role: "status",
-              "aria-live": "polite",
-              textAlign: "center",
-              paddingVertical: "$2",
-              fontSize: knobProps.sizeToken,
-              color: "$color10",
-              ...{
-                "data-testid": "infinite-status"
-              },
-              children: infinite.isAppending ? t("Loading more rows\u2026") : infinite.exhausted ? typeof infinite.totalCount === "number" && infinite.totalCount > 0 ? bidiIsolate(withInterp(t("All {{count}} rows loaded", {
-                count: infinite.totalCount
-              }), {
-                count: infinite.totalCount
-              })) : t("End of results") : typeof infinite.totalCount === "number" ? bidiIsolate(withInterp(t("Showing {{visible}} of {{total}} rows", {
-                visible: tableRows.length,
-                total: infinite.totalCount
-              }), {
-                visible: tableRows.length,
-                total: infinite.totalCount
-              })) : bidiIsolate(withInterp(t("Showing {{visible}} rows", {
-                visible: tableRows.length
-              }), {
-                visible: tableRows.length
-              }))
-            })]
+            }) : null
           }) : null, enableRowSelection && bulkBarPlacement === "bottom" ? /* @__PURE__ */jsx(View, {
             width: "100%",
             ...(disabled ? disabledState.chromeKnobProps : {}),