@undevy-org/tablewright 0.2.1 → 0.3.0

package/dist/es/hooks/useTableOrchestration.js

@@ -1,11 +1,13 @@
-import { useState, useEffect, useMemo, useRef, useCallback, useLayoutEffect } from "react";
+import { useState, useRef, useMemo, useCallback, useLayoutEffect, useEffect } from "react";
 import { useStore } from "zustand";
 import { useColumnResize } from "../components/data-table/hooks/use-column-resize.js";
 import { getVisiblePageNumbers } from "../components/data-table/hooks/use-table-pagination.js";
-import { computeColumnGaps } from "../lib/column-gaps.js";
-import { computeColumnStats } from "../lib/filter-stats.js";
-import { createTableOrchestrationStore, defaultValueForFilter } from "./table-orchestration-store.js";
-const EMPTY_ID_SET = /* @__PURE__ */ new Set();
+import { createTableOrchestrationStore } from "./table-orchestration-store.js";
+import { useColumnFilterStats } from "./table-orchestration/use-column-filter-stats.js";
+import { useColumnGaps } from "./table-orchestration/use-column-gaps.js";
+import { useFilteredRows } from "./table-orchestration/use-filtered-rows.js";
+import { useOrchestrationActions } from "./table-orchestration/use-orchestration-actions.js";
+import { useResponsiveColumns } from "./table-orchestration/use-responsive-columns.js";
 const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 function useTableOrchestration(config) {
   const {
@@ -46,33 +48,11 @@ function useTableOrchestration(config) {
   const activeView = useStore(store, (s) => s.activeView);
   const columnsMenuOpen = useStore(store, (s) => s.columnsMenuOpen);
   const storedSelectedRowId = useStore(store, (s) => s.selectedRowId);
-  const hasPriorities = Boolean(columnPriorities && Object.keys(columnPriorities).length > 0);
-  const [isWide, setIsWide] = useState(true);
-  const [isCompact, setIsCompact] = useState(false);
-  useEffect(() => {
-    if (!hasPriorities || typeof window === "undefined") return;
-    const mql = window.matchMedia(`(min-width: ${wideBreakpoint}px)`);
-    const onChange = (e) => setIsWide(e.matches);
-    setIsWide(mql.matches);
-    mql.addEventListener("change", onChange);
-    return () => mql.removeEventListener("change", onChange);
-  }, [hasPriorities, wideBreakpoint]);
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-    const mql = window.matchMedia(`(max-width: ${compactBreakpoint - 1}px)`);
-    const onChange = (e) => setIsCompact(e.matches);
-    setIsCompact(mql.matches);
-    mql.addEventListener("change", onChange);
-    return () => mql.removeEventListener("change", onChange);
-  }, [compactBreakpoint]);
-  const responsiveHiddenColumnIds = useMemo(() => {
-    if (isWide || !columnPriorities) return EMPTY_ID_SET;
-    const hidden = /* @__PURE__ */ new Set();
-    for (const [id, priority] of Object.entries(columnPriorities)) {
-      if (priority === 3) hidden.add(id);
-    }
-    return hidden;
-  }, [isWide, columnPriorities]);
+  const { responsiveHiddenColumnIds, isCompact } = useResponsiveColumns(
+    columnPriorities,
+    wideBreakpoint,
+    compactBreakpoint
+  );
   const selectedIdsRef = useRef(storedSelectedIds);
   const headerCheckStateRef = useRef(false);
   const sortState = useMemo(() => {
@@ -92,89 +72,22 @@ function useTableOrchestration(config) {
     }
     return viewPresets.find((v) => v.key === activeView) ?? viewPresets[0];
   }, [activeView, viewPresets]);
-  const allColumnFilterStats = useMemo(() => {
-    const result = {};
-    for (const [columnId, cfg] of Object.entries(filterConfigs)) {
-      if (cfg.type === "compound" && cfg.subFilters) {
-        for (const sub of cfg.subFilters) {
-          const s = computeColumnStats(rows, sub.field, {
-            type: sub.type,
-            label: sub.label,
-            options: sub.options
-          });
-          if (s) result[`${columnId}:${sub.key}`] = s;
-        }
-      } else {
-        const s = computeColumnStats(rows, cfg.fieldName ?? columnId, cfg);
-        if (s) result[columnId] = s;
-      }
-    }
-    return result;
-  }, [rows, filterConfigs]);
-  const filteredRows = useMemo(() => {
-    const search = searchQuery.trim().toLowerCase();
-    const filtered = rows.filter((row) => {
-      if (activePreset.customFilter && !activePreset.customFilter(row)) return false;
-      if (search.length > 0 && !getSearchText(row).includes(search)) return false;
-      return columnFilters.every((filter) => filterRow(row, filter));
-    });
-    if (!currentSort) return filtered;
-    const { columnId, direction } = currentSort;
-    return [...filtered].sort((a, b) => {
-      const aVal = getSortValue(a, columnId);
-      const bVal = getSortValue(b, columnId);
-      if (aVal < bVal) return direction === "asc" ? -1 : 1;
-      if (aVal > bVal) return direction === "asc" ? 1 : -1;
-      return 0;
-    });
-  }, [
+  const filteredRows = useFilteredRows({
     rows,
+    activePreset,
     searchQuery,
     columnFilters,
     currentSort,
-    activePreset,
-    getSearchText,
     filterRow,
+    getSearchText,
     getSortValue
-  ]);
-  const filteredColumnFilterStats = useMemo(() => {
-    if (columnFilters.length === 0 && searchQuery.trim().length === 0) return null;
-    const result = {};
-    for (const [columnId, cfg] of Object.entries(filterConfigs)) {
-      if (cfg.type === "compound" && cfg.subFilters) {
-        for (const sub of cfg.subFilters) {
-          const s = computeColumnStats(filteredRows, sub.field, {
-            type: sub.type,
-            label: sub.label,
-            options: sub.options
-          });
-          if (s) result[`${columnId}:${sub.key}`] = s;
-        }
-      } else {
-        const s = computeColumnStats(filteredRows, cfg.fieldName ?? columnId, cfg);
-        if (s) result[columnId] = s;
-      }
-    }
-    return result;
-  }, [filteredRows, filterConfigs, columnFilters, searchQuery]);
-  const columnFilterStats = useMemo(() => {
-    const result = {};
-    for (const [columnId, cfg] of Object.entries(filterConfigs)) {
-      if (cfg.type === "compound" && cfg.subFilters) {
-        for (const sub of cfg.subFilters) {
-          const key = `${columnId}:${sub.key}`;
-          const all = allColumnFilterStats[key];
-          if (!all) continue;
-          result[key] = { all, filtered: filteredColumnFilterStats?.[key] ?? null };
-        }
-      } else {
-        const all = allColumnFilterStats[columnId];
-        if (!all) continue;
-        result[columnId] = { all, filtered: filteredColumnFilterStats?.[columnId] ?? null };
-      }
-    }
-    return result;
-  }, [allColumnFilterStats, filteredColumnFilterStats, filterConfigs]);
+  });
+  const columnFilterStats = useColumnFilterStats(
+    rows,
+    filteredRows,
+    filterConfigs,
+    columnFilters.length > 0 || searchQuery.trim().length > 0
+  );
   const totalPages = Math.max(1, Math.ceil(filteredRows.length / rowsPerPage));
   const safePage = Math.min(storedPage, totalPages);
   const page = safePage;
@@ -208,167 +121,59 @@ function useTableOrchestration(config) {
   );
   const allOnPageSelected = pageIds.size > 0 && selectedOnPage === pageIds.size;
   const headerCheckState = allOnPageSelected ? true : selectedOnPage > 0 ? "indeterminate" : false;
-  const columnGaps = useMemo(
-    () => columnGroups ? computeColumnGaps(toggleableColumnIds, columnVisibility) : [],
-    [columnGroups, toggleableColumnIds, columnVisibility]
-  );
-  const extendedColumnMeta = useMemo(() => {
-    if (columnGaps.length === 0) return columnMeta;
-    const meta = { ...columnMeta };
-    for (const gap of columnGaps) {
-      meta[`__gap_after_${gap.afterColumnId ?? "start"}`] = { minW: 32 };
-    }
-    return meta;
-  }, [columnGaps, columnMeta]);
-  const extendedWidths = useMemo(() => {
-    if (columnGaps.length === 0) return widths;
-    const merged = { ...widths };
-    for (const gap of columnGaps) {
-      merged[`__gap_after_${gap.afterColumnId ?? "start"}`] = 32;
-    }
-    return merged;
-  }, [widths, columnGaps]);
+  const { columnGaps, extendedColumnMeta, extendedWidths } = useColumnGaps({
+    columnGroups,
+    toggleableColumnIds,
+    columnVisibility,
+    columnMeta,
+    widths
+  });
   const hiddenColumnsCount = useMemo(() => {
     return toggleableColumnIds.filter((id) => columnVisibility[id] === false).length;
   }, [toggleableColumnIds, columnVisibility]);
   const activeCustomFilterChip = activePreset.customFilterChip ?? null;
   selectedIdsRef.current = selectedIds;
   headerCheckStateRef.current = headerCheckState;
-  const handleSearchSubmit = useCallback(
-    (e) => {
-      e.preventDefault();
-      store.getState().submitSearch();
-    },
-    [store]
-  );
-  const handleHeaderSort = useCallback(
-    (columnId, direction) => {
-      store.getState().toggleSort(columnId, direction);
-    },
-    [store]
-  );
-  const handleViewChange = useCallback(
-    (key) => {
-      if (key === "custom") return;
-      const preset = viewPresets.find((v) => v.key === key);
-      if (!preset) return;
-      store.getState().applyPreset({
-        key,
-        filters: preset.filters,
-        sort: preset.sort,
-        columnVisibility: preset.columnVisibility
-      });
-    },
-    [viewPresets, store]
-  );
-  const handleAddColumnFilter = useCallback(
-    (columnId) => {
-      const cfg = filterConfigs[columnId];
-      if (!cfg) return;
-      store.getState().addColumnFilter(columnId, defaultValueForFilter(cfg));
-    },
-    [filterConfigs, store]
-  );
-  const handleOpenExistingFilter = useCallback(
-    (columnId) => store.getState().setRequestOpenFilterId(columnId),
-    [store]
-  );
-  const handleRequestOpenHandled = useCallback(
-    () => store.getState().setRequestOpenFilterId(null),
-    [store]
-  );
-  const handleRemoveColumnFilter = useCallback(
-    (columnId) => store.getState().removeColumnFilter(columnId),
-    [store]
-  );
-  const handleChangeColumnFilter = useCallback(
-    (columnId, value) => store.getState().changeColumnFilter(columnId, value),
-    [store]
-  );
-  const handleSetColumnFilter = useCallback(
-    (columnId, value) => store.getState().setColumnFilter(columnId, value),
-    [store]
-  );
-  const handleHeaderFilterClick = useCallback(
-    (columnId) => {
-      const state = store.getState();
-      const isActive = state.columnFilters.some((f) => f.columnId === columnId);
-      if (!isActive) {
-        const cfg = filterConfigs[columnId];
-        if (cfg) state.addColumnFilter(columnId, defaultValueForFilter(cfg));
-      }
-      state.setRequestOpenFilterId(columnId);
-    },
-    [filterConfigs, store]
-  );
-  const handleHideColumn = useCallback(
-    (columnId) => store.getState().hideColumn(columnId),
-    [store]
-  );
-  const handleResetColumns = useCallback(() => {
-    store.getState().resetColumns();
-    setWidths(() => {
-      const w = {};
-      for (const [id, m] of Object.entries(columnMeta)) w[id] = m.minW;
-      return w;
-    });
-  }, [store, setWidths, columnMeta]);
-  const handleRemoveSort = useCallback(() => store.getState().removeSort(), [store]);
-  const handleRemoveCustomFilter = useCallback(() => {
-    store.getState().goCustom();
-    store.getState().setPage(1);
-  }, [store]);
-  const handleClearAll = useCallback(
-    () => store.getState().clearAll(defaultViewKey),
-    [defaultViewKey, store]
-  );
-  const handleRefresh = useCallback(() => store.getState().startRefresh(), [store]);
-  const handleToggleRowSelection = useCallback(
-    (id) => store.getState().toggleRowSelection(id),
-    [store]
-  );
-  const handleToggleHeaderCheck = useCallback(() => {
-    const ids = paginatedRows.map(getRowId);
-    store.getState().toggleHeaderCheck(ids, allOnPageSelected);
-  }, [paginatedRows, allOnPageSelected, getRowId, store]);
-  const handleExpandRow = useCallback(
-    (row, e) => {
-      e.stopPropagation();
-      const id = getRowId(row);
-      store.getState().toggleSelectedRowId(id);
-    },
-    [getRowId, store]
-  );
-  const handleExpandGap = useCallback(
-    (hiddenIds) => store.getState().showColumns(hiddenIds),
-    [store]
-  );
-  const handlePageChange = useCallback((p) => store.getState().setPage(p), [store]);
-  const handleRowsPerPageChange = useCallback(
-    (value) => store.getState().setRowsPerPage(value),
-    [store]
-  );
-  const setSearchInput = useCallback((v) => store.getState().setSearchInput(v), [store]);
-  const setColumnVisibility = useCallback(
-    (next) => store.getState().setColumnVisibility(next),
-    [store]
-  );
-  const setDensity = useCallback(
-    (v) => store.getState().setDensity(v),
-    [store]
-  );
-  const setSelectedIds = useCallback(
-    (next) => store.getState().setSelectedIds(next),
-    [store]
-  );
-  const setColumnsMenuOpen = useCallback(
-    (v) => store.getState().setColumnsMenuOpen(v),
-    [store]
-  );
-  const setSelectedRowId = useCallback(
-    (v) => store.getState().setSelectedRowId(v),
-    [store]
-  );
+  const {
+    handleSearchSubmit,
+    handleHeaderSort,
+    handleViewChange,
+    handleAddColumnFilter,
+    handleOpenExistingFilter,
+    handleRequestOpenHandled,
+    handleRemoveColumnFilter,
+    handleChangeColumnFilter,
+    handleSetColumnFilter,
+    handleHeaderFilterClick,
+    handleHideColumn,
+    handleResetColumns,
+    handleRemoveSort,
+    handleRemoveCustomFilter,
+    handleClearAll,
+    handleRefresh,
+    handleToggleRowSelection,
+    handleToggleHeaderCheck,
+    handleExpandRow,
+    handleExpandGap,
+    handlePageChange,
+    handleRowsPerPageChange,
+    setSearchInput,
+    setColumnVisibility,
+    setDensity,
+    setSelectedIds,
+    setColumnsMenuOpen,
+    setSelectedRowId
+  } = useOrchestrationActions({
+    store,
+    viewPresets,
+    filterConfigs,
+    columnMeta,
+    setWidths,
+    defaultViewKey,
+    paginatedRows,
+    allOnPageSelected,
+    getRowId
+  });
   const getSelectedIds = useCallback(() => selectedIdsRef.current, []);
   const getHeaderCheckState = useCallback(() => headerCheckStateRef.current, []);
   return {

package/dist/es/index.js

@@ -65,7 +65,7 @@ import { getCompoundValue, getDateRange, getNumberRange, getStringArray, isFilte
 import { useTableOrchestration } from "./hooks/useTableOrchestration.js";
 import { createTableOrchestrationStore, defaultValueForFilter } from "./hooks/table-orchestration-store.js";
 import { useRowDragOverride } from "./hooks/useRowDragOverride.js";
-import { computeColumnGaps } from "./lib/column-gaps.js";
+import { computeColumnGaps, gapColumnId } from "./lib/column-gaps.js";
 import { computeColumnStats } from "./lib/filter-stats.js";
 import { formatEnumLabel } from "./lib/format-enum.js";
 import { displayTimeZone, formatDateParts, formatLiveTimestamp, parsePossibleTimestamp } from "./lib/format-timestamp.js";
@@ -184,6 +184,7 @@ export {
   formatDateParts,
   formatEnumLabel,
   formatLiveTimestamp,
+  gapColumnId,
   getCompoundValue,
   getDateRange,
   getNumberRange,

package/dist/es/lib/column-gaps.js

@@ -1,3 +1,6 @@
+function gapColumnId(afterColumnId) {
+  return `__gap_after_${afterColumnId ?? "start"}`;
+}
 function computeColumnGaps(orderedColumnIds, columnVisibility) {
   const gaps = [];
   let lastVisibleId = null;
@@ -19,5 +22,6 @@ function computeColumnGaps(orderedColumnIds, columnVisibility) {
   return gaps;
 }
 export {
-  computeColumnGaps
+  computeColumnGaps,
+  gapColumnId
 };