@requence/table 0.0.0 → 1.0.1

package/dist/index.js

@@ -1,14 +1,694 @@
+// src/VirtualTable.tsx
+import {
+  Children,
+  isValidElement,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { flushSync } from "react-dom";
+import { twMerge } from "tailwind-merge";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+function asSlot(slot, defaults) {
+  const Component = () => null;
+  Component.slot = slot;
+  Component.slotDefaults = defaults ?? {};
+  return Component;
+}
+function createTableHeader(defaults) {
+  return asSlot("header", defaults);
+}
+function createTableColumn(defaults) {
+  return asSlot("column", defaults);
+}
+function createTableBody(defaults) {
+  return asSlot("body", defaults);
+}
+function createTableSkeletonRow(defaults) {
+  return asSlot("skeletonRow", defaults);
+}
+function createTableEmpty(defaults) {
+  return asSlot("empty", defaults);
+}
+function createTableFooter(defaults) {
+  return asSlot("footer", defaults);
+}
+function createTableRow(defaults) {
+  return asSlot("row", defaults);
+}
+var GRID_VAR = "--vtable-grid-cols";
+var GRID_VAR_REF = `var(${GRID_VAR})`;
+function buildGridTemplate(columns) {
+  return columns.map((col) => {
+    if (typeof col.width === "number") {
+      return `${col.width}px`;
+    }
+    const min = col.minWidth ? `${col.minWidth}px` : "0";
+    if (typeof col.width === "string") {
+      return `minmax(${min}, ${col.width})`;
+    }
+    return `minmax(${min}, 1fr)`;
+  }).join(" ");
+}
+var VirtualTableHeader = asSlot("header");
+var VirtualTableColumn = asSlot("column");
+var VirtualTableBody = asSlot("body");
+var VirtualTableRow = asSlot("row");
+var VirtualTableSkeletonRow = asSlot("skeletonRow");
+var VirtualTableEmpty = asSlot("empty");
+var VirtualTableFooter = asSlot("footer");
+function slotIs(child, slot) {
+  return child.type?.slot === slot;
+}
+function extractSlots(children) {
+  let header = null;
+  let body = null;
+  let skeletonRow = null;
+  let empty = null;
+  let footer = null;
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) {
+      return;
+    }
+    if (slotIs(child, "header")) {
+      const defaults = child.type.slotDefaults ?? {};
+      const props = child.props;
+      const columns = [];
+      Children.forEach(props.children, (col) => {
+        if (isValidElement(col) && slotIs(col, "column")) {
+          const d = col.type.slotDefaults ?? {};
+          const p = col.props;
+          columns.push({
+            width: p.width ?? d.width,
+            header: p.children,
+            className: twMerge(d.className, p.className),
+            resizable: p.resizable ?? d.resizable,
+            minWidth: p.minWidth ?? d.minWidth,
+            maxWidth: p.maxWidth ?? d.maxWidth,
+            transparent: p.transparent ?? d.transparent,
+            onResizeStart: p.onResizeStart ?? d.onResizeStart,
+            onResizeEnd: p.onResizeEnd ?? d.onResizeEnd
+          });
+        }
+      });
+      header = {
+        className: twMerge(defaults.className, props.className),
+        columns
+      };
+    } else if (slotIs(child, "body")) {
+      body = child.props;
+    } else if (slotIs(child, "skeletonRow")) {
+      const defaults = child.type.slotDefaults ?? {};
+      const props = child.props;
+      skeletonRow = {
+        ...defaults,
+        ...props,
+        className: twMerge(defaults.className, props.className)
+      };
+    } else if (slotIs(child, "empty")) {
+      const defaults = child.type.slotDefaults ?? {};
+      const props = child.props;
+      empty = {
+        ...defaults,
+        ...props,
+        className: twMerge(defaults.className, props.className)
+      };
+    } else if (slotIs(child, "footer")) {
+      const defaults = child.type.slotDefaults ?? {};
+      const props = child.props;
+      footer = {
+        ...defaults,
+        ...props,
+        className: twMerge(defaults.className, props.className)
+      };
+    }
+  });
+  return { header, body, skeletonRow, empty, footer };
+}
+function ResizeHandle({ onMouseDown }) {
+  return /* @__PURE__ */ jsx("div", {
+    role: "separator",
+    "aria-orientation": "vertical",
+    className: "resizer absolute right-0 top-0 z-10 h-full w-1.5 cursor-col-resize",
+    onMouseDown
+  });
+}
+function VirtualTableCell({
+  className,
+  style,
+  showOnHover,
+  colSpan,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx("div", {
+    role: "cell",
+    className: twMerge("overflow-hidden text-ellipsis whitespace-nowrap", showOnHover && "not-group-hover/row:*:delay-200 *:opacity-10 *:transition-opacity *:duration-300 *:ease-in-out group-hover/row:*:opacity-100", className),
+    style: colSpan ? { gridColumn: `span ${colSpan}`, ...style } : style,
+    ...rest
+  });
+}
+function DataRow({ index, rowHeight, rowProps, children }) {
+  const { className, style, ...restProps } = rowProps;
+  return /* @__PURE__ */ jsx("div", {
+    role: "row",
+    "aria-rowindex": index + 1,
+    className: twMerge("group/row absolute w-full", className),
+    style: {
+      height: rowHeight,
+      transform: `translateY(${index * rowHeight}px)`,
+      display: "grid",
+      gridTemplateColumns: GRID_VAR_REF,
+      alignItems: "center",
+      willChange: "transform",
+      contain: "layout style paint",
+      ...style
+    },
+    ...restProps,
+    children
+  });
+}
+function VirtualTableRoot({
+  totalCount,
+  rowHeight,
+  overscan = 5,
+  onRangeChange,
+  className,
+  style: styleProp,
+  "aria-label": ariaLabel,
+  children
+}) {
+  const scrollRef = useRef(null);
+  const [visibleRange, setVisibleRange] = useState({ start: 0, end: 0 });
+  const prevRangeRef = useRef({ start: 0, end: 0 });
+  const { header, body, skeletonRow, empty, footer } = extractSlots(children);
+  const columns = header?.columns ?? [];
+  const gridTemplate = buildGridTemplate(columns);
+  const renderRow = body?.children ?? (() => null);
+  const calculateRange = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el || totalCount === 0) {
+      return;
+    }
+    const scrollTop = el.scrollTop;
+    const viewportHeight = el.clientHeight;
+    const rawStart = Math.floor(scrollTop / rowHeight);
+    const rawEnd = Math.ceil((scrollTop + viewportHeight) / rowHeight);
+    const start = Math.max(0, rawStart - overscan);
+    const end = Math.min(totalCount, rawEnd + overscan);
+    const prev = prevRangeRef.current;
+    if (prev.start !== start || prev.end !== end) {
+      prevRangeRef.current = { start, end };
+      flushSync(() => setVisibleRange({ start, end }));
+    }
+  }, [totalCount, rowHeight, overscan]);
+  const handleScroll = useCallback(() => {
+    calculateRange();
+  }, [calculateRange]);
+  useEffect(() => {
+    calculateRange();
+  }, [calculateRange]);
+  useEffect(() => {
+    onRangeChange?.(visibleRange);
+  }, [visibleRange, onRangeChange]);
+  const handleResizeMouseDown = useCallback((columnIndex, e) => {
+    e.preventDefault();
+    const container = scrollRef.current;
+    if (!container) {
+      return;
+    }
+    const col = columns[columnIndex];
+    const headerCells = container.querySelectorAll('[role="columnheader"]');
+    const startWidth = headerCells[columnIndex]?.getBoundingClientRect().width ?? (typeof col.width === "number" ? col.width : 100);
+    const startX = e.clientX;
+    const minW = col.minWidth ?? 50;
+    const maxW = col.maxWidth ?? Infinity;
+    const otherColumnsMinWidth = columns.reduce((sum, c, i) => {
+      if (i === columnIndex) {
+        return sum;
+      }
+      if (typeof c.width === "number") {
+        return sum + c.width;
+      }
+      return sum + (c.minWidth ?? 0);
+    }, 0);
+    const maxAllowedWidth = container.clientWidth - otherColumnsMinWidth;
+    let currentWidth = startWidth;
+    col.onResizeStart?.();
+    const prevCursor = document.body.style.cursor;
+    document.body.style.cursor = "col-resize";
+    const handleMouseMove = (moveEvent) => {
+      const delta = moveEvent.clientX - startX;
+      currentWidth = Math.min(maxW, maxAllowedWidth, Math.max(minW, startWidth + delta));
+      const template = columns.map((c, i) => {
+        if (i === columnIndex) {
+          return `${currentWidth}px`;
+        }
+        return buildGridTemplate([c]);
+      }).join(" ");
+      container.style.setProperty(GRID_VAR, template);
+    };
+    const handleMouseUp = () => {
+      document.body.style.cursor = prevCursor;
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      const allCells = container.querySelectorAll('[role="columnheader"]');
+      let otherFrPx = 0;
+      let otherFrUnits = 0;
+      columns.forEach((c, i) => {
+        if (i === columnIndex) {
+          return;
+        }
+        if (typeof c.width !== "number") {
+          otherFrPx += allCells[i]?.getBoundingClientRect().width ?? 0;
+          otherFrUnits += typeof c.width === "string" ? parseFloat(c.width) || 1 : 1;
+        }
+      });
+      const frValue = otherFrPx > 0 ? currentWidth / otherFrPx * otherFrUnits : 1;
+      col.onResizeEnd?.(currentWidth, startWidth, frValue);
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+  }, [columns]);
+  if (totalCount === 0 && empty) {
+    return /* @__PURE__ */ jsxs("div", {
+      role: "table",
+      "aria-label": ariaLabel,
+      className: twMerge("flex flex-col overflow-hidden", className),
+      style: { [GRID_VAR]: gridTemplate, ...styleProp },
+      children: [
+        /* @__PURE__ */ jsx("div", {
+          role: "rowgroup",
+          className: twMerge("sticky top-0 z-10", header?.className),
+          children: /* @__PURE__ */ jsx("div", {
+            role: "row",
+            style: {
+              display: "grid",
+              gridTemplateColumns: GRID_VAR_REF,
+              alignItems: "center",
+              height: rowHeight
+            },
+            children: columns.map((col, i) => /* @__PURE__ */ jsxs("div", {
+              role: "columnheader",
+              className: twMerge("whitespace-nowrap", col.resizable && "relative", col.className),
+              children: [
+                col.header,
+                col.resizable && /* @__PURE__ */ jsx(ResizeHandle, {
+                  onMouseDown: (e) => handleResizeMouseDown(i, e)
+                })
+              ]
+            }, i))
+          })
+        }),
+        /* @__PURE__ */ jsx("div", {
+          className: twMerge("flex items-center justify-center", empty.className),
+          children: empty.children
+        })
+      ]
+    });
+  }
+  const rows = [];
+  for (let i = visibleRange.start;i < visibleRange.end; i++) {
+    const content = renderRow(i);
+    if (content === null) {
+      if (skeletonRow) {
+        const { children: skeletonContent, ...skeletonProps } = skeletonRow;
+        rows.push(/* @__PURE__ */ jsx(DataRow, {
+          index: i,
+          rowHeight,
+          rowProps: skeletonProps,
+          children: skeletonContent
+        }, `row-${i}`));
+      }
+    } else {
+      const rowElement = content;
+      const rowDefaults = rowElement.type?.slotDefaults ?? {};
+      const rawProps = rowElement.props;
+      const { children: cellContent, ...userRowProps } = rawProps;
+      const rowProps = {
+        ...rowDefaults,
+        ...userRowProps,
+        className: twMerge(rowDefaults.className, userRowProps.className)
+      };
+      rows.push(/* @__PURE__ */ jsx(DataRow, {
+        index: i,
+        rowHeight,
+        rowProps,
+        children: cellContent
+      }, `row-${i}`));
+    }
+  }
+  const totalHeight = totalCount * rowHeight;
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        role: "table",
+        "aria-label": ariaLabel,
+        "aria-rowcount": totalCount,
+        ref: scrollRef,
+        onScroll: handleScroll,
+        className: twMerge("relative overflow-auto", className),
+        style: { [GRID_VAR]: gridTemplate, ...styleProp },
+        children: [
+          /* @__PURE__ */ jsx("div", {
+            role: "rowgroup",
+            className: twMerge("sticky top-0 z-10", header?.className),
+            children: /* @__PURE__ */ jsx("div", {
+              role: "row",
+              style: {
+                display: "grid",
+                gridTemplateColumns: GRID_VAR_REF,
+                alignItems: "center"
+              },
+              children: columns.map((col, i) => /* @__PURE__ */ jsxs("div", {
+                role: "columnheader",
+                className: twMerge("whitespace-nowrap", col.resizable && "relative", col.className),
+                children: [
+                  col.header,
+                  col.resizable && /* @__PURE__ */ jsx(ResizeHandle, {
+                    onMouseDown: (e) => handleResizeMouseDown(i, e)
+                  })
+                ]
+              }, i))
+            })
+          }),
+          /* @__PURE__ */ jsx("div", {
+            role: "rowgroup",
+            className: "relative",
+            style: { height: totalHeight },
+            children: rows
+          })
+        ]
+      }),
+      footer && totalCount > 0 && /* @__PURE__ */ jsx("div", {
+        className: footer.className,
+        children: footer.children(visibleRange)
+      })
+    ]
+  });
+}
+var VirtualTable = Object.assign(VirtualTableRoot, {
+  Header: VirtualTableHeader,
+  Column: VirtualTableColumn,
+  Body: VirtualTableBody,
+  SkeletonRow: VirtualTableSkeletonRow,
+  Row: VirtualTableRow,
+  Cell: VirtualTableCell,
+  Empty: VirtualTableEmpty,
+  Footer: VirtualTableFooter
+});
+
+// src/useTableCache.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+var cacheMap = new Map;
+function resolveCache(id, options, pageSize) {
+  let state = cacheMap.get(id);
+  if (!state) {
+    state = {
+      pages: new Map,
+      totalCount: 0,
+      inflight: new Set,
+      compare: options.compare,
+      fetchItems: options.fetchItems,
+      fetchCount: options.fetchCount,
+      getItemId: options.getItemId,
+      promise: null,
+      knownIds: new Set,
+      fetchCountTimer: null
+    };
+    cacheMap.set(id, state);
+    const s = state;
+    s.promise = options.fetchItems(0, pageSize).then((result) => {
+      if (cacheMap.get(id) === s) {
+        s.pages.set(0, result.items);
+        s.totalCount = result.total;
+        for (const item of result.items) {
+          s.knownIds.add(s.getItemId(item));
+        }
+      }
+    }).then(() => {
+      s.promise = null;
+    }).catch((error) => {
+      console.error(error);
+      throw error;
+    });
+  }
+  state.fetchItems = options.fetchItems;
+  state.fetchCount = options.fetchCount;
+  state.compare = options.compare;
+  state.getItemId = options.getItemId;
+  return state;
+}
+function useTableCache(key, options) {
+  const { pageSize, getItemId, compare, fetchItems, fetchCount } = options;
+  const [, forceRender] = useState2(0);
+  const [iteration, setIteration] = useState2(0);
+  const rerender = useCallback2(() => {
+    forceRender((c) => c + 1);
+  }, []);
+  const activeKey = [key, iteration].join("-");
+  const currentCache = resolveCache(activeKey, { fetchItems, fetchCount, compare, getItemId }, pageSize);
+  const cacheRef = useRef2(currentCache);
+  cacheRef.current = currentCache;
+  if (currentCache.promise) {
+    throw currentCache.promise;
+  }
+  useEffect2(() => () => {
+    for (const k of cacheMap.keys()) {
+      if (k.startsWith(key)) {
+        cacheMap.delete(k);
+      }
+    }
+  }, [key]);
+  const fetchPage = useCallback2((pageIndex) => {
+    const c = cacheRef.current;
+    if (c.pages.has(pageIndex) || c.inflight.has(pageIndex)) {
+      return;
+    }
+    const offset = pageIndex * pageSize;
+    c.inflight.add(pageIndex);
+    c.fetchItems(offset, pageSize).then((result) => {
+      if (cacheRef.current === c) {
+        c.pages.set(pageIndex, result.items);
+        c.totalCount = result.total;
+        c.inflight.delete(pageIndex);
+        for (const item of result.items) {
+          c.knownIds.add(c.getItemId(item));
+        }
+        rerender();
+      }
+    });
+  }, [pageSize, rerender]);
+  const getItem = useCallback2((index) => {
+    const c = cacheRef.current;
+    const pageIndex = Math.floor(index / pageSize);
+    const page = c.pages.get(pageIndex);
+    if (!page) {
+      return;
+    }
+    const offsetInPage = index - pageIndex * pageSize;
+    return page[offsetInPage];
+  }, [pageSize]);
+  const handleRangeChange = useCallback2((range) => {
+    const c = cacheRef.current;
+    if (c.totalCount === 0) {
+      return;
+    }
+    const startPage = Math.floor(range.start / pageSize);
+    const endPage = Math.floor(Math.min(range.end, c.totalCount - 1) / pageSize);
+    for (let p = startPage;p <= endPage; p++) {
+      fetchPage(p);
+    }
+  }, [pageSize, fetchPage]);
+  const debouncedFetchCount = useCallback2(() => {
+    const c = cacheRef.current;
+    if (!c.fetchCount) {
+      return;
+    }
+    if (c.fetchCountTimer) {
+      clearTimeout(c.fetchCountTimer);
+    }
+    c.fetchCountTimer = setTimeout(() => {
+      const current = cacheRef.current;
+      current.fetchCountTimer = null;
+      current.fetchCount?.().then((total) => {
+        if (cacheRef.current === current) {
+          current.totalCount = total;
+          rerender();
+        }
+      });
+    }, 150);
+  }, [rerender]);
+  const upsert = useCallback2((item) => {
+    const c = cacheRef.current;
+    const id = getItemId(item);
+    for (const [, page] of c.pages) {
+      const idx = page.findIndex((p) => getItemId(p) === id);
+      if (idx !== -1) {
+        page[idx] = item;
+        rerender();
+        return;
+      }
+    }
+    if (c.knownIds.has(id)) {
+      return;
+    }
+    c.knownIds.add(id);
+    let inserted = false;
+    const sortedPageIndices = [...c.pages.keys()].sort((a, b) => a - b);
+    for (const pageIndex of sortedPageIndices) {
+      const page = c.pages.get(pageIndex);
+      if (page.length > 0 && c.compare(item, page[0]) <= 0) {
+        page.unshift(item);
+        inserted = true;
+        invalidateAfter(c, pageIndex);
+        break;
+      }
+      if (page.length > 0) {
+        const lastItem = page[page.length - 1];
+        if (c.compare(item, lastItem) <= 0) {
+          let lo = 0;
+          let hi = page.length;
+          while (lo < hi) {
+            const mid = lo + hi >>> 1;
+            if (c.compare(item, page[mid]) <= 0) {
+              hi = mid;
+            } else {
+              lo = mid + 1;
+            }
+          }
+          page.splice(lo, 0, item);
+          inserted = true;
+          invalidateAfter(c, pageIndex);
+          break;
+        }
+      }
+    }
+    if (!inserted) {
+      if (sortedPageIndices.length > 0) {
+        const firstPageIndex = sortedPageIndices[0];
+        const firstPage = c.pages.get(firstPageIndex);
+        if (firstPage.length > 0 && c.compare(item, firstPage[0]) <= 0) {
+          firstPage.unshift(item);
+          invalidateAfter(c, firstPageIndex);
+        }
+      }
+    }
+    if (c.fetchCount) {
+      debouncedFetchCount();
+    } else {
+      c.totalCount += 1;
+    }
+    rerender();
+  }, [getItemId, rerender, debouncedFetchCount]);
+  const remove = useCallback2((id) => {
+    const c = cacheRef.current;
+    let removedFromPage = null;
+    c.knownIds.delete(id);
+    for (const [pageIndex, page] of c.pages) {
+      const idx = page.findIndex((item) => getItemId(item) === id);
+      if (idx !== -1) {
+        page.splice(idx, 1);
+        removedFromPage = pageIndex;
+        break;
+      }
+    }
+    c.totalCount = Math.max(0, c.totalCount - 1);
+    if (removedFromPage !== null) {
+      invalidateAfter(c, removedFromPage);
+    }
+    rerender();
+  }, [getItemId, rerender]);
+  const reset = useCallback2(() => {
+    const c = cacheRef.current;
+    if (c.fetchCountTimer) {
+      clearTimeout(c.fetchCountTimer);
+      c.fetchCountTimer = null;
+    }
+    setIteration((iteration2) => iteration2 + 1);
+    rerender();
+  }, [rerender]);
+  return {
+    totalCount: currentCache.totalCount,
+    getItem,
+    handleRangeChange,
+    upsert,
+    remove,
+    reset,
+    loading: currentCache.inflight.size > 0
+  };
+}
+function invalidateAfter(cache, afterPageIndex) {
+  for (const key of cache.pages.keys()) {
+    if (key > afterPageIndex) {
+      cache.pages.delete(key);
+    }
+  }
+}
+
+// src/useTableColumnWidths.ts
+import { useCallback as useCallback3, useEffect as useEffect3, useState as useState3 } from "react";
+function loadPersisted(key) {
+  try {
+    const raw = localStorage.getItem(`columnWidths:${key}`);
+    return raw ? JSON.parse(raw) : null;
+  } catch {
+    return null;
+  }
+}
+function useTableColumnWidths(options) {
+  const persistKey = options?.persist;
+  const [widths, setWidths] = useState3(() => (persistKey ? loadPersisted(persistKey) : null) ?? {});
+  useEffect3(() => {
+    if (persistKey) {
+      localStorage.setItem(`columnWidths:${persistKey}`, JSON.stringify(widths));
+    }
+  }, [widths, persistKey]);
+  const register = useCallback3((key, registerOptions) => ({
+    width: widths[key] ?? registerOptions?.defaultValue,
+    resizable: true,
+    onResizeEnd: (width, _startWidth, frValue) => {
+      if (registerOptions?.relative) {
+        setWidths((prev) => ({
+          ...prev,
+          [key]: `${parseFloat(frValue.toFixed(2))}fr`
+        }));
+      } else {
+        setWidths((prev) => ({ ...prev, [key]: width }));
+      }
+    }
+  }), [widths]);
+  const reset = useCallback3(() => {
+    setWidths({});
+    if (persistKey) {
+      localStorage.removeItem(`columnWidths:${persistKey}`);
+    }
+  }, [persistKey]);
+  return { register, reset };
+}
+
+// src/index.ts
+var VirtualTable2 = VirtualTable;
+var createTableHeader2 = createTableHeader;
+var createTableColumn2 = createTableColumn;
+var createTableBody2 = createTableBody;
+var createTableSkeletonRow2 = createTableSkeletonRow;
+var createTableEmpty2 = createTableEmpty;
+var createTableFooter2 = createTableFooter;
+var createTableRow2 = createTableRow;
+var useTableCache2 = useTableCache;
+var useTableColumnWidths2 = useTableColumnWidths;
 export {
-  useTableColumnWidths,
-  useTableCache,
-  createTableSkeletonRow,
-  createTableRow,
-  createTableHeader,
-  createTableFooter,
-  createTableEmpty,
-  createTableColumn,
-  createTableBody,
-  VirtualTable
+  useTableColumnWidths2 as useTableColumnWidths,
+  useTableCache2 as useTableCache,
+  createTableSkeletonRow2 as createTableSkeletonRow,
+  createTableRow2 as createTableRow,
+  createTableHeader2 as createTableHeader,
+  createTableFooter2 as createTableFooter,
+  createTableEmpty2 as createTableEmpty,
+  createTableColumn2 as createTableColumn,
+  createTableBody2 as createTableBody,
+  VirtualTable2 as VirtualTable
 };
 
-//# debugId=1E46849E0CE9A88764756E2164756E21
+//# debugId=35F50DE454A2B11E64756E2164756E21