@cosmicdrift/kumiko-renderer-web 0.171.0 → 0.171.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.171.0",
+  "version": "0.171.2",
   "description": "Web-platform bindings for @cosmicdrift/kumiko-renderer. HTML default-primitives, browser history-based navigation, EventSource-backed live events, and a one-call createKumikoApp that mounts the whole stack via react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -16,9 +16,9 @@
     "./styles.css": "./src/styles.css"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.171.0",
-    "@cosmicdrift/kumiko-headless": "0.171.0",
-    "@cosmicdrift/kumiko-renderer": "0.171.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.171.2",
+    "@cosmicdrift/kumiko-headless": "0.171.2",
+    "@cosmicdrift/kumiko-renderer": "0.171.2",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",

package/src/__tests__/primitives.test.tsx

@@ -472,12 +472,17 @@ describe("DataTable", () => {
 
   // Infinite-Scroll Sentinel: rendert sentinel-div, zeigt Spinner wenn
   // loadingMore, den i18n End-of-list-Marker (kumiko.list.end-of-list)
-  // wenn !hasMore. IntersectionObserver
+  // wenn !hasMore und genug Zeilen geladen sind (kurze Listen brauchen
+  // keinen Marker — sie zeigen ihr Ende selbst). IntersectionObserver
   // selbst ist in jsdom unmocked — wir testen nur die Marker, der
   // Observer-Fire-Pfad ist im KumikoScreen.EntityListBody.
   describe("InfiniteSentinel", () => {
     const cols = [{ field: "name", label: "Name", type: "string", sortable: false }] as const;
     const oneRow = [{ id: "r1", values: { name: "A" } }];
+    const manyRows = Array.from({ length: 25 }, (_, i) => ({
+      id: `r${i}`,
+      values: { name: `A${i}` },
+    }));
 
     test("ohne onReachEnd: kein Sentinel im DOM", () => {
       render(<DataTable columns={cols} rows={oneRow} testId="dt" />);
@@ -516,11 +521,11 @@ describe("DataTable", () => {
       expect(screen.getByTestId("dt-sentinel").querySelector("svg")).not.toBeNull();
     });
 
-    test("hasMore=false: 'End of list' Marker statt Sentinel-Wirkung", () => {
+    test("hasMore=false + viele Zeilen: 'End of list' Marker statt Sentinel-Wirkung", () => {
       render(
         <DataTable
           columns={cols}
-          rows={oneRow}
+          rows={manyRows}
           testId="dt"
           onReachEnd={mock()}
           loadingMore={false}
@@ -531,6 +536,21 @@ describe("DataTable", () => {
       expect(screen.getByTestId("dt-sentinel-end").textContent).toContain("End of list");
     });
 
+    test("hasMore=false + kurze Liste: kein End-Marker (#1699)", () => {
+      render(
+        <DataTable
+          columns={cols}
+          rows={oneRow}
+          testId="dt"
+          onReachEnd={mock()}
+          loadingMore={false}
+          hasMore={false}
+        />,
+      );
+      expect(screen.queryByTestId("dt-sentinel-end")).toBeNull();
+      expect(screen.getByTestId("dt-sentinel").textContent).toBe("");
+    });
+
     test("hasMore=false + de-Locale: Marker kommt aus i18n statt hartcodiert", async () => {
       const { LocaleProvider, createStaticLocaleResolver, kumikoDefaultTranslations } =
         await import("@cosmicdrift/kumiko-renderer");
@@ -541,7 +561,7 @@ describe("DataTable", () => {
         >
           <DataTable
             columns={cols}
-            rows={oneRow}
+            rows={manyRows}
             testId="dt"
             onReachEnd={mock()}
             loadingMore={false}

package/src/primitives/index.tsx

@@ -654,6 +654,7 @@ function DefaultDataTable({
           onReachEnd={onReachEnd}
           loadingMore={loadingMore === true}
           hasMore={hasMore !== false}
+          rowsCount={rows.length}
           testId={testId !== undefined ? `${testId}-sentinel` : "render-list-sentinel"}
         />
       </>
@@ -1018,15 +1019,23 @@ function RowActionsKebab({
 // lädt, ignorieren wir weitere Sichtbar-Events). Kein observer in
 // Server-Side-Render, kein observer wenn hasMore=false — dann zeigt
 // der Sentinel nur den End-of-list-Hinweis.
+// ponytail: End-Marker nur ab END_LABEL_MIN_ROWS Zeilen — eine kurze
+// Liste (eine einzige Page) zeigt ihr Ende selbst, da wäre der Marker
+// nur Lärm. Schwellwert = eine Page; per Prop übersteuerbar falls Apps
+// andere Page-Größen fahren.
+const END_LABEL_MIN_ROWS = 20;
+
 function InfiniteSentinel({
   onReachEnd,
   loadingMore,
   hasMore,
+  rowsCount,
   testId,
 }: {
   readonly onReachEnd: () => void;
   readonly loadingMore: boolean;
   readonly hasMore: boolean;
+  readonly rowsCount: number;
   readonly testId?: string;
 }): ReactNode {
   const t = useTranslation();
@@ -1057,23 +1066,28 @@ function InfiniteSentinel({
     return () => observer.disconnect();
   }, [onReachEnd, loadingMore, hasMore]);
 
+  const showEndLabel = !hasMore && rowsCount >= END_LABEL_MIN_ROWS;
+
   return (
     <div
       ref={ref}
       data-testid={testId}
-      className="flex items-center justify-center py-4 text-sm text-muted-foreground"
+      className={cn(
+        "flex items-center justify-center text-sm text-muted-foreground",
+        showEndLabel || loadingMore ? "py-4" : "",
+      )}
     >
-      {!hasMore ? (
+      {showEndLabel ? (
         <span data-testid={testId !== undefined ? `${testId}-end` : undefined}>
           {t("kumiko.list.end-of-list")}
         </span>
       ) : loadingMore ? (
         <Loader2 className="size-4 animate-spin" aria-hidden="true" />
-      ) : (
-        // Unsichtbar-Spacer wenn weder loading noch end — der Observer
-        // braucht ein DOM-Node, der User soll aber nichts sehen.
+      ) : hasMore ? (
+        // Unsichtbar-Spacer solange noch geladen werden kann — der
+        // Observer braucht ein DOM-Node, der User soll aber nichts sehen.
         <span aria-hidden="true">&nbsp;</span>
-      )}
+      ) : null}
     </div>
   );
 }