@eifi1/ui-kit 0.39.1 → 0.40.1

package/dist/components/data-table.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createElement } from "react";
-import { Fragment, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Card } from "./card.js";
 import { Spinner } from "./spinner.js";
 import { ROW_ACTIONS_KEY, useRowActionColumn } from "./data-table-row-actions.js";
@@ -16,7 +16,7 @@ import {
   resolveDataTableLabels,
   splitCellProps
 } from "./data-table-shared.js";
-import { MobileFilters, MobileRow, MobileSort, StackedFields } from "./data-table-mobile.js";
+import { MobileFilters, MobileRow, MobileSelectBar, MobileSort, StackedFields } from "./data-table-mobile.js";
 import { DataTableHead } from "./data-table-head.js";
 import { ColumnSettingsPanel } from "./data-table-column-settings.js";
 import { useLargeText } from "../hooks/use-large-text.js";
@@ -343,6 +343,22 @@ function DataTable({
     const d = dirOf(el);
     if (d !== mobileDir) setMobileDir(d);
   };
+  const phoneFill = fillHeight && !isMdUp;
+  const phoneListRef = useRef(null);
+  const [phoneListScrolls, setPhoneListScrolls] = useState(false);
+  useLayoutEffect(() => {
+    const el = phoneListRef.current;
+    if (!phoneFill || !el) return;
+    setPhoneListScrolls(el.scrollHeight > el.clientHeight + 1);
+  });
+  useEffect(() => {
+    const el = phoneListRef.current;
+    if (!phoneFill || !el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => setPhoneListScrolls(el.scrollHeight > el.clientHeight + 1));
+    ro.observe(el);
+    if (el.parentElement) ro.observe(el.parentElement);
+    return () => ro.disconnect();
+  }, [phoneFill]);
   const { mobileSlice, canRevealMoreMobile, loadMoreRef } = useMobileReveal({
     rows: sorted,
     slice,
@@ -351,6 +367,14 @@ function DataTable({
     unpaged,
     defaultPageSize
   });
+  const anySelected = !!selection && (selection.someSelected || selection.allSelected && slice.length > 0);
+  const [phoneSelectMode, setPhoneSelectMode] = useState(false);
+  const [hadSelection, setHadSelection] = useState(anySelected);
+  if (anySelected !== hadSelection) {
+    setHadSelection(anySelected);
+    if (!anySelected) setPhoneSelectMode(false);
+  }
+  const phoneSelecting = !!selection && !isMdUp && (phoneSelectMode || anySelected);
   const { selectionAnchor, rangeClick, canSelect, selectRange } = useRangeSelection({
     selection,
     slice,
@@ -384,7 +408,21 @@ function DataTable({
       mobileSecondaryColumns,
       mobileExpandAsDialog,
       compact,
-      large
+      large,
+      select: selection ? {
+        active: phoneSelecting,
+        selectable: canSelect(row),
+        selected: selection.isSelected(row),
+        onToggle: (checked) => {
+          selectionAnchor.current = rowKey(row);
+          selection.onToggle(row, checked);
+        },
+        onLongPress: () => {
+          setPhoneSelectMode(true);
+          selectionAnchor.current = rowKey(row);
+          if (!selection.isSelected(row)) selection.onToggle(row, true);
+        }
+      } : null
     },
     rowKey(row)
   );
@@ -402,13 +440,16 @@ function DataTable({
       "data-density": density,
       "data-frame": frame ? void 0 : "none",
       "data-clips": frame ? "" : void 0,
+      "data-fill-height": fillHeight ? "" : void 0,
       className: cn(
         "group/table",
         frame ? "overflow-clip" : "min-w-0",
         // Both layouts, not just the table: the phone card list overflowing a bounded
         // pane drew itself over whatever followed it, and in a viewport-locked shell
-        // the rows below the fold could not be reached at all.
-        fillHeight && "flex flex-1 flex-col min-h-0",
+        // the rows below the fold could not be reached at all. From `md` the minimum is
+        // the content's again (`md:min-h-auto`): the body's floor below then holds the
+        // whole chain up to `<main>`, which scrolls instead of leaving a slit.
+        fillHeight && "flex flex-1 flex-col min-h-0 md:min-h-auto",
         className
       ),
       children: [
@@ -466,16 +507,36 @@ function DataTable({
               }
             }
           ),
+          selection && /* @__PURE__ */ jsx(
+            MobileSelectBar,
+            {
+              active: phoneSelecting,
+              allSelected: selection.allSelected,
+              someSelected: selection.someSelected,
+              compact,
+              labels,
+              onEnter: () => setPhoneSelectMode(true),
+              onToggleAll: selection.onToggleAll,
+              onCancel: () => {
+                setPhoneSelectMode(false);
+                if (anySelected) selection.onToggleAll(false);
+              }
+            }
+          ),
           /* @__PURE__ */ jsxs(
             "ul",
             {
+              ref: phoneListRef,
               className: cn(
                 "divide-y divide-subtle",
-                // Under `fillHeight` the list is the scroller, as the table body is on a
-                // wide screen: the filter button stays above it and a server pager below.
-                // The endless-scroll sentinel still fires in here — an
-                // IntersectionObserver on the viewport sees through the clipping ancestor.
-                fillHeight && "min-h-0 flex-1 overflow-y-auto overscroll-contain",
+                // Under `fillHeight` the list takes the room its parent gives it, and in a
+                // BOUNDED parent it is the scroller, as the table body is on a wide screen:
+                // the filter button stays above it and a server pager below. Only then —
+                // see `phoneListScrolls` (live #420). The endless-scroll sentinel still
+                // fires in here — an IntersectionObserver on the viewport sees through the
+                // clipping ancestor.
+                fillHeight && "min-h-0 flex-1",
+                fillHeight && phoneListScrolls && "overflow-y-auto overscroll-contain",
                 // Same busy treatment as the desktop body; see `isLoading` below.
                 isLoading && mobileSlice.length > 0 && "opacity-60 transition-opacity"
               ),
@@ -560,14 +621,14 @@ function DataTable({
             }
           )
         ] }),
-        isMdUp && /* @__PURE__ */ jsxs("div", { className: cn("flex", fillHeight && "min-h-0 flex-1"), children: [
-          /* @__PURE__ */ jsxs("div", { className: cn("relative min-w-0 flex-1", fillHeight && "flex flex-col min-h-0"), children: [
+        isMdUp && /* @__PURE__ */ jsxs("div", { className: cn("flex", fillHeight && "flex-1"), children: [
+          /* @__PURE__ */ jsxs("div", { className: cn("relative min-w-0 flex-1", fillHeight && "flex flex-col"), children: [
             /* @__PURE__ */ jsx(
               "div",
               {
                 ref: desktopScroller,
                 "data-clips": "",
-                className: cn("overflow-auto [scrollbar-gutter:stable]", fillHeight && "flex-1 min-h-0"),
+                className: cn("overflow-auto [scrollbar-gutter:stable]", fillHeight && "min-h-0 grow basis-48"),
                 ...edgeFadeProps,
                 style: fillHeight ? edgeFadeProps.style : { ...edgeFadeProps.style, maxHeight: maxBodyHeight },
                 children: /* @__PURE__ */ jsxs(