@undevy-org/tablewright 0.2.0 → 0.2.2

package/dist/es/hooks/table-orchestration/use-column-filter-stats.js

@@ -0,0 +1,38 @@
+import { useMemo } from "react";
+import { computeColumnStats } from "../../lib/filter-stats.js";
+function computeFilterStats(rows, filterConfigs) {
+  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;
+}
+function useColumnFilterStats(rows, filteredRows, filterConfigs, isFiltered) {
+  const allStats = useMemo(() => computeFilterStats(rows, filterConfigs), [rows, filterConfigs]);
+  const filteredStats = useMemo(
+    () => isFiltered ? computeFilterStats(filteredRows, filterConfigs) : null,
+    [filteredRows, filterConfigs, isFiltered]
+  );
+  return useMemo(() => {
+    const result = {};
+    for (const [key, all] of Object.entries(allStats)) {
+      result[key] = { all, filtered: filteredStats?.[key] ?? null };
+    }
+    return result;
+  }, [allStats, filteredStats]);
+}
+export {
+  useColumnFilterStats
+};

package/dist/es/hooks/table-orchestration/use-column-gaps.js

@@ -0,0 +1,35 @@
+import { useMemo } from "react";
+import { computeColumnGaps } from "../../lib/column-gaps.js";
+const GAP_WIDTH = 32;
+function gapColumnId(afterColumnId) {
+  return `__gap_after_${afterColumnId ?? "start"}`;
+}
+function useColumnGaps({
+  columnGroups,
+  toggleableColumnIds,
+  columnVisibility,
+  columnMeta,
+  widths
+}) {
+  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[gapColumnId(gap.afterColumnId)] = { minW: GAP_WIDTH };
+    return meta;
+  }, [columnGaps, columnMeta]);
+  const extendedWidths = useMemo(() => {
+    if (columnGaps.length === 0) return widths;
+    const merged = { ...widths };
+    for (const gap of columnGaps) merged[gapColumnId(gap.afterColumnId)] = GAP_WIDTH;
+    return merged;
+  }, [widths, columnGaps]);
+  return { columnGaps, extendedColumnMeta, extendedWidths };
+}
+export {
+  gapColumnId,
+  useColumnGaps
+};

package/dist/es/hooks/table-orchestration/use-filtered-rows.js

@@ -0,0 +1,32 @@
+import { useMemo } from "react";
+function useFilteredRows({
+  rows,
+  activePreset,
+  searchQuery,
+  columnFilters,
+  currentSort,
+  filterRow,
+  getSearchText,
+  getSortValue
+}) {
+  return 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;
+    });
+  }, [rows, searchQuery, columnFilters, currentSort, activePreset, getSearchText, filterRow, getSortValue]);
+}
+export {
+  useFilteredRows
+};

package/dist/es/hooks/table-orchestration/use-orchestration-actions.js

@@ -0,0 +1,182 @@
+import { useCallback } from "react";
+import { defaultValueForFilter } from "../table-orchestration-store.js";
+function useOrchestrationActions({
+  store,
+  viewPresets,
+  filterConfigs,
+  columnMeta,
+  setWidths,
+  defaultViewKey,
+  paginatedRows,
+  allOnPageSelected,
+  getRowId
+}) {
+  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]
+  );
+  return {
+    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
+  };
+}
+export {
+  useOrchestrationActions
+};

package/dist/es/hooks/table-orchestration/use-responsive-columns.js

@@ -0,0 +1,35 @@
+import { useState, useEffect, useMemo } from "react";
+const EMPTY_ID_SET = /* @__PURE__ */ new Set();
+function useResponsiveColumns(columnPriorities, wideBreakpoint, compactBreakpoint) {
+  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]);
+  return { responsiveHiddenColumnIds, isCompact };
+}
+export {
+  useResponsiveColumns
+};