@object-ui/plugin-grid 3.3.0 → 3.3.2

package/src/useCellClipboard.ts

@@ -1,136 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { useState, useCallback, useEffect } from 'react';
-
-/** A cell range described by start/end row and column indices. */
-export interface CellRange {
-  startRow: number;
-  startCol: number;
-  endRow: number;
-  endCol: number;
-}
-
-export interface UseCellClipboardOptions {
-  /** Full data rows currently displayed in the grid. */
-  data: Record<string, any>[];
-  /** Ordered column keys matching the grid's visible columns. */
-  columns: string[];
-  /** Callback invoked when pasted values should be applied. */
-  onPaste?: (changes: { rowIndex: number; field: string; value: string }[]) => void;
-  /** Whether clipboard interaction is enabled. */
-  enabled?: boolean;
-}
-
-export interface UseCellClipboardResult {
-  /** Currently selected cell range (null when nothing is selected). */
-  selectedRange: CellRange | null;
-  /** Programmatically update the selected range. */
-  setSelectedRange: (range: CellRange | null) => void;
-  /** Copy handler – reads selected range and writes tab-separated text to clipboard. */
-  onCopy: () => void;
-  /** Paste handler – reads tab-separated text from clipboard and emits changes. */
-  onPaste: () => void;
-  /** Keyboard handler to attach to the grid container element. */
-  onKeyDown: (e: React.KeyboardEvent) => void;
-}
-
-/**
- * Normalise a CellRange so that start ≤ end for both axes.
- */
-function normaliseRange(range: CellRange): CellRange {
-  return {
-    startRow: Math.min(range.startRow, range.endRow),
-    startCol: Math.min(range.startCol, range.endCol),
-    endRow: Math.max(range.startRow, range.endRow),
-    endCol: Math.max(range.startCol, range.endCol),
-  };
-}
-
-/**
- * Hook for single-cell and multi-cell copy/paste with Excel-compatible
- * tab-separated format.
- *
- * Attach `onKeyDown` to the grid container to handle Ctrl+C / Ctrl+V.
- */
-export function useCellClipboard({
-  data,
-  columns,
-  onPaste: onPasteCallback,
-  enabled = true,
-}: UseCellClipboardOptions): UseCellClipboardResult {
-  const [selectedRange, setSelectedRange] = useState<CellRange | null>(null);
-
-  const onCopy = useCallback(() => {
-    if (!enabled || !selectedRange) return;
-    const { startRow, startCol, endRow, endCol } = normaliseRange(selectedRange);
-    const lines: string[] = [];
-
-    for (let r = startRow; r <= endRow; r++) {
-      const row = data[r];
-      if (!row) continue;
-      const cells: string[] = [];
-      for (let c = startCol; c <= endCol; c++) {
-        const field = columns[c];
-        cells.push(field ? String(row[field] ?? '') : '');
-      }
-      lines.push(cells.join('\t'));
-    }
-
-    const text = lines.join('\n');
-    void navigator.clipboard.writeText(text);
-  }, [enabled, selectedRange, data, columns]);
-
-  const onPaste = useCallback(() => {
-    if (!enabled || !selectedRange || !onPasteCallback) return;
-    const { startRow, startCol } = normaliseRange(selectedRange);
-
-    void navigator.clipboard.readText().then((text) => {
-      const changes: { rowIndex: number; field: string; value: string }[] = [];
-      const lines = text.split('\n');
-
-      for (let r = 0; r < lines.length; r++) {
-        const cells = lines[r].split('\t');
-        for (let c = 0; c < cells.length; c++) {
-          const rowIndex = startRow + r;
-          const colIndex = startCol + c;
-          const field = columns[colIndex];
-          if (field && rowIndex < data.length) {
-            changes.push({ rowIndex, field, value: cells[c] });
-          }
-        }
-      }
-
-      if (changes.length > 0) {
-        onPasteCallback(changes);
-      }
-    });
-  }, [enabled, selectedRange, columns, data.length, onPasteCallback]);
-
-  const onKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (!enabled) return;
-      const mod = e.metaKey || e.ctrlKey;
-      if (mod && e.key === 'c') {
-        e.preventDefault();
-        onCopy();
-      } else if (mod && e.key === 'v') {
-        e.preventDefault();
-        onPaste();
-      }
-    },
-    [enabled, onCopy, onPaste],
-  );
-
-  // Clear selection when clipboard features are disabled.
-  useEffect(() => {
-    if (!enabled) setSelectedRange(null);
-  }, [enabled]);
-
-  return { selectedRange, setSelectedRange, onCopy, onPaste, onKeyDown };
-}

package/src/useColumnSummary.ts

@@ -1,128 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { useMemo } from 'react';
-import type { ListColumn } from '@object-ui/types';
-
-/**
- * Summary configuration for a column.
- * Can be a string shorthand (e.g. 'sum') or a full config object.
- */
-export type ColumnSummaryConfig = string | { type: 'count' | 'sum' | 'avg' | 'min' | 'max'; field?: string };
-
-export interface ColumnSummaryResult {
-  field: string;
-  value: number | null;
-  label: string;
-}
-
-/**
- * Normalize summary config from string or object to a standard shape.
- */
-function normalizeSummary(summary: ColumnSummaryConfig): { type: string; field?: string } {
-  if (typeof summary === 'string') {
-    return { type: summary };
-  }
-  return summary;
-}
-
-/**
- * Compute a single aggregation over data values.
- */
-function computeAggregation(type: string, values: number[]): number | null {
-  if (values.length === 0) return null;
-
-  switch (type) {
-    case 'count':
-      return values.length;
-    case 'sum':
-      return values.reduce((a, b) => a + b, 0);
-    case 'avg':
-      return values.reduce((a, b) => a + b, 0) / values.length;
-    case 'min':
-      return Math.min(...values);
-    case 'max':
-      return Math.max(...values);
-    default:
-      return null;
-  }
-}
-
-/**
- * Format a summary value for display.
- */
-function formatSummaryLabel(type: string, value: number | null): string {
-  if (value === null) return '';
-  const typeLabels: Record<string, string> = {
-    count: 'Count',
-    sum: 'Sum',
-    avg: 'Avg',
-    min: 'Min',
-    max: 'Max',
-  };
-  const label = typeLabels[type] || type;
-  const formatted = type === 'avg'
-    ? value.toLocaleString(undefined, { maximumFractionDigits: 2 })
-    : value.toLocaleString();
-  return `${label}: ${formatted}`;
-}
-
-/**
- * Hook to compute column summary/aggregation values.
- *
- * @param columns - Column definitions (may include `summary` config)
- * @param data - Row data array
- * @returns Map of field name to summary result, and a flag if any summaries exist
- */
-export function useColumnSummary(
-  columns: ListColumn[] | undefined,
-  data: any[]
-): { summaries: Map<string, ColumnSummaryResult>; hasSummary: boolean } {
-  return useMemo(() => {
-    const summaries = new Map<string, ColumnSummaryResult>();
-
-    if (!columns || columns.length === 0 || data.length === 0) {
-      return { summaries, hasSummary: false };
-    }
-
-    for (const col of columns) {
-      if (!col.summary) continue;
-
-      const config = normalizeSummary(col.summary as ColumnSummaryConfig);
-      const targetField = config.field || col.field;
-
-      // Extract numeric values from data
-      const values: number[] = [];
-      for (const row of data) {
-        const v = row[targetField];
-        if (v != null && typeof v === 'number' && !isNaN(v)) {
-          values.push(v);
-        } else if (v != null && typeof v === 'string') {
-          const parsed = parseFloat(v);
-          if (!isNaN(parsed)) values.push(parsed);
-        }
-      }
-
-      // For 'count', count all non-null values (not just numeric)
-      let result: number | null;
-      if (config.type === 'count') {
-        const count = data.filter(row => row[targetField] != null && row[targetField] !== '').length;
-        result = count > 0 ? count : null;
-      } else {
-        result = computeAggregation(config.type, values);
-      }
-      summaries.set(col.field, {
-        field: col.field,
-        value: result,
-        label: formatSummaryLabel(config.type, result),
-      });
-    }
-
-    return { summaries, hasSummary: summaries.size > 0 };
-  }, [columns, data]);
-}

package/src/useGradientColor.ts

@@ -1,103 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { useMemo, useCallback } from 'react';
-
-/** A single stop in a colour gradient. */
-export interface GradientStop {
-  /** Position between 0 and 1. */
-  position: number;
-  /** Tailwind background class applied at this stop (e.g. "bg-green-100"). */
-  className: string;
-}
-
-export interface UseGradientColorOptions {
-  /** The numeric field to evaluate on each row. */
-  field: string;
-  /** Flat data array used to derive min/max when not provided. */
-  data: Record<string, any>[];
-  /** Optional explicit minimum value. */
-  min?: number;
-  /** Optional explicit maximum value. */
-  max?: number;
-  /**
-   * Ordered gradient stops (position 0 → 1).
-   * When omitted a default green→yellow→red palette is used.
-   */
-  stops?: GradientStop[];
-}
-
-/** Default three-stop gradient: green → yellow → red. */
-const DEFAULT_STOPS: GradientStop[] = [
-  { position: 0, className: 'bg-green-100' },
-  { position: 0.5, className: 'bg-yellow-100' },
-  { position: 1, className: 'bg-red-100' },
-];
-
-/**
- * Derive min and max numeric values for `field` across `data`.
- */
-function deriveRange(data: Record<string, any>[], field: string): [number, number] {
-  let lo = Infinity;
-  let hi = -Infinity;
-  for (const row of data) {
-    const v = Number(row[field]);
-    if (!Number.isFinite(v)) continue;
-    if (v < lo) lo = v;
-    if (v > hi) hi = v;
-  }
-  if (!Number.isFinite(lo)) return [0, 0];
-  return [lo, hi];
-}
-
-/**
- * Pick the closest gradient stop class for a normalised position (0‑1).
- */
-function pickStopClass(t: number, stops: GradientStop[]): string {
-  if (stops.length === 0) return '';
-  if (stops.length === 1) return stops[0].className;
-
-  let best = stops[0];
-  let bestDist = Math.abs(t - best.position);
-
-  for (let i = 1; i < stops.length; i++) {
-    const dist = Math.abs(t - stops[i].position);
-    if (dist < bestDist) {
-      best = stops[i];
-      bestDist = dist;
-    }
-  }
-  return best.className;
-}
-
-/**
- * Hook that returns a row → Tailwind class resolver based on a numeric
- * field's value mapped onto a configurable colour gradient.
- *
- * @param options - gradient configuration
- * @returns `(row) => className | undefined`
- */
-export function useGradientColor(options: UseGradientColorOptions) {
-  const { field, data, min: minProp, max: maxProp, stops = DEFAULT_STOPS } = options;
-
-  const [derivedMin, derivedMax] = useMemo(() => deriveRange(data, field), [data, field]);
-  const min = minProp ?? derivedMin;
-  const max = maxProp ?? derivedMax;
-
-  return useCallback(
-    (row: Record<string, any>): string | undefined => {
-      const v = Number(row[field]);
-      if (!Number.isFinite(v)) return undefined;
-      if (max === min) return stops.length > 0 ? stops[0].className : undefined;
-
-      const t = Math.max(0, Math.min(1, (v - min) / (max - min)));
-      return pickStopClass(t, stops);
-    },
-    [field, min, max, stops],
-  );
-}

package/src/useGroupReorder.ts

@@ -1,123 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { useState, useCallback, useEffect } from 'react';
-
-export interface UseGroupReorderOptions {
-  /** Initial ordered list of group keys. */
-  groupKeys: string[];
-}
-
-export interface UseGroupReorderResult {
-  /** Current ordered list of group keys. */
-  groupOrder: string[];
-  /** Move a group from one index to another. */
-  moveGroup: (fromIndex: number, toIndex: number) => void;
-  /** Drag-start handler – stores the dragged group key. */
-  onDragStart: (e: React.DragEvent, key: string) => void;
-  /** Drag-over handler – must be attached to allow drop. */
-  onDragOver: (e: React.DragEvent) => void;
-  /** Drop handler – reorders the group under the cursor. */
-  onDrop: (e: React.DragEvent, targetKey: string) => void;
-  /** Drag-end handler – cleans up drag state. */
-  onDragEnd: () => void;
-  /** The key currently being dragged (null when idle). */
-  draggingKey: string | null;
-}
-
-const DRAG_DATA_TYPE = 'text/x-group-key';
-
-/**
- * Hook for drag-and-drop reordering of grouped sections.
- *
- * Attach the returned handlers to the group header elements to enable
- * reordering via native HTML drag-and-drop.
- */
-export function useGroupReorder({ groupKeys }: UseGroupReorderOptions): UseGroupReorderResult {
-  const [order, setOrder] = useState<string[]>(groupKeys);
-  const [draggingKey, setDraggingKey] = useState<string | null>(null);
-
-  // Keep internal order in sync when the source list changes (new groups added/removed).
-  useEffect(() => {
-    setOrder((prev) => {
-      const prevSet = new Set(prev);
-      const nextSet = new Set(groupKeys);
-
-      // Fast-path: identical sets in same order.
-      if (
-        prev.length === groupKeys.length &&
-        prev.every((k, i) => k === groupKeys[i])
-      ) {
-        return prev;
-      }
-
-      // Preserve existing order for keys that still exist, append new keys.
-      const kept = prev.filter((k) => nextSet.has(k));
-      const added = groupKeys.filter((k) => !prevSet.has(k));
-      return [...kept, ...added];
-    });
-  }, [groupKeys]);
-
-  const moveGroup = useCallback((fromIndex: number, toIndex: number) => {
-    setOrder((prev) => {
-      if (fromIndex < 0 || fromIndex >= prev.length) return prev;
-      if (toIndex < 0 || toIndex >= prev.length) return prev;
-      if (fromIndex === toIndex) return prev;
-
-      const next = [...prev];
-      const [moved] = next.splice(fromIndex, 1);
-      next.splice(toIndex, 0, moved);
-      return next;
-    });
-  }, []);
-
-  const onDragStart = useCallback((e: React.DragEvent, key: string) => {
-    e.dataTransfer.effectAllowed = 'move';
-    e.dataTransfer.setData(DRAG_DATA_TYPE, key);
-    setDraggingKey(key);
-  }, []);
-
-  const onDragOver = useCallback((e: React.DragEvent) => {
-    e.preventDefault();
-    e.dataTransfer.dropEffect = 'move';
-  }, []);
-
-  const onDrop = useCallback(
-    (e: React.DragEvent, targetKey: string) => {
-      e.preventDefault();
-      const sourceKey = e.dataTransfer.getData(DRAG_DATA_TYPE);
-      if (!sourceKey || sourceKey === targetKey) return;
-
-      setOrder((prev) => {
-        const fromIndex = prev.indexOf(sourceKey);
-        const toIndex = prev.indexOf(targetKey);
-        if (fromIndex === -1 || toIndex === -1) return prev;
-
-        const next = [...prev];
-        const [moved] = next.splice(fromIndex, 1);
-        next.splice(toIndex, 0, moved);
-        return next;
-      });
-    },
-    [],
-  );
-
-  const onDragEnd = useCallback(() => {
-    setDraggingKey(null);
-  }, []);
-
-  return {
-    groupOrder: order,
-    moveGroup,
-    onDragStart,
-    onDragOver,
-    onDrop,
-    onDragEnd,
-    draggingKey,
-  };
-}

package/src/useGroupedData.ts

@@ -1,187 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { useState, useMemo, useCallback } from 'react';
-import type { GroupingConfig } from '@object-ui/types';
-
-/** Supported aggregation function types. */
-export type AggregationType = 'sum' | 'count' | 'avg' | 'min' | 'max';
-
-/** Describes a single aggregation to compute per group. */
-export interface AggregationConfig {
-  /** The field to aggregate. */
-  field: string;
-  /** The aggregation function. */
-  type: AggregationType;
-}
-
-/** Result of a computed aggregation for a group. */
-export interface AggregationResult {
-  /** The field that was aggregated. */
-  field: string;
-  /** The aggregation function used. */
-  type: AggregationType;
-  /** The computed value. */
-  value: number;
-}
-
-export interface GroupEntry {
-  /** Composite key identifying this group (field values joined by ' / ') */
-  key: string;
-  /** Display label for the group header */
-  label: string;
-  /** Rows belonging to this group */
-  rows: any[];
-  /** Whether the group section is collapsed */
-  collapsed: boolean;
-  /** Computed aggregations for this group (empty when no aggregations configured). */
-  aggregations: AggregationResult[];
-}
-
-export interface UseGroupedDataResult {
-  /** Grouped entries (empty when grouping is not configured) */
-  groups: GroupEntry[];
-  /** Whether grouping is active */
-  isGrouped: boolean;
-  /** Toggle the collapsed state of a group by its key */
-  toggleGroup: (key: string) => void;
-}
-
-/**
- * Build a composite group key from a row based on the grouping fields.
- */
-function buildGroupKey(row: Record<string, any>, fields: GroupingConfig['fields']): string {
-  return fields.map((f) => String(row[f.field] ?? '')).join(' / ');
-}
-
-/**
- * Build a human-readable label from a row based on the grouping fields.
- */
-function buildGroupLabel(row: Record<string, any>, fields: GroupingConfig['fields']): string {
-  return fields
-    .map((f) => {
-      const val = row[f.field];
-      return val !== undefined && val !== null && val !== '' ? String(val) : '(empty)';
-    })
-    .join(' / ');
-}
-
-/**
- * Compute aggregation results for a set of rows.
- */
-function computeAggregations(
-  rows: any[],
-  configs: AggregationConfig[],
-): AggregationResult[] {
-  return configs.map(({ field, type }) => {
-    const nums = rows
-      .map((r) => Number(r[field]))
-      .filter((n) => Number.isFinite(n));
-
-    let value: number;
-    switch (type) {
-      case 'count':
-        value = nums.length;
-        break;
-      case 'sum':
-        value = nums.reduce((a, b) => a + b, 0);
-        break;
-      case 'avg':
-        value = nums.length > 0 ? nums.reduce((a, b) => a + b, 0) / nums.length : 0;
-        break;
-      case 'min':
-        value = nums.length > 0 ? Math.min(...nums) : 0;
-        break;
-      case 'max':
-        value = nums.length > 0 ? Math.max(...nums) : 0;
-        break;
-      default:
-        value = 0;
-    }
-
-    return { field, type, value };
-  });
-}
-
-/**
- * Compare function that respects per-field sort order.
- */
-function compareGroups(a: string, b: string, order: 'asc' | 'desc'): number {
-  const cmp = a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' });
-  return order === 'desc' ? -cmp : cmp;
-}
-
-/**
- * Hook that groups a flat data array by the fields specified in GroupingConfig.
- *
- * Supports multi-level grouping, per-field sort order, and per-field default
- * collapsed state.  Collapse state is managed internally so the consumer only
- * needs to wire `toggleGroup` to the UI.
- *
- * @param config        - GroupingConfig from the grid schema (optional)
- * @param data          - flat data rows
- * @param aggregations  - optional aggregation definitions to compute per group
- */
-export function useGroupedData(
-  config: GroupingConfig | undefined,
-  data: any[],
-  aggregations?: AggregationConfig[],
-): UseGroupedDataResult {
-  const fields = config?.fields;
-  const isGrouped = !!(fields && fields.length > 0);
-
-  // Track which group keys have been explicitly toggled by the user.
-  const [toggledKeys, setToggledKeys] = useState<Record<string, boolean>>({});
-
-  // Determine whether a field set defaults to collapsed.
-  const fieldsDefaultCollapsed = useMemo(() => {
-    if (!fields) return false;
-    // If any grouping field has collapsed: true, default all groups to collapsed.
-    return fields.some((f) => f.collapsed);
-  }, [fields]);
-
-  const groups: GroupEntry[] = useMemo(() => {
-    if (!isGrouped || !fields) return [];
-
-    // Group rows by composite key
-    const map = new Map<string, { label: string; rows: any[] }>();
-    const keyOrder: string[] = [];
-
-    for (const row of data) {
-      const key = buildGroupKey(row, fields);
-      if (!map.has(key)) {
-        map.set(key, { label: buildGroupLabel(row, fields), rows: [] });
-        keyOrder.push(key);
-      }
-      map.get(key)!.rows.push(row);
-    }
-
-    // Sort groups using the first grouping field's order
-    const primaryOrder = fields[0]?.order ?? 'asc';
-    keyOrder.sort((a, b) => compareGroups(a, b, primaryOrder));
-
-    return keyOrder.map((key) => {
-      const entry = map.get(key)!;
-      const collapsed =
-        key in toggledKeys ? toggledKeys[key] : fieldsDefaultCollapsed;
-      const agg = aggregations && aggregations.length > 0
-        ? computeAggregations(entry.rows, aggregations)
-        : [];
-      return { key, label: entry.label, rows: entry.rows, collapsed, aggregations: agg };
-    });
-  }, [data, fields, isGrouped, toggledKeys, fieldsDefaultCollapsed, aggregations]);
-
-  const toggleGroup = useCallback((key: string) => {
-    setToggledKeys((prev) => ({
-      ...prev,
-      [key]: prev[key] !== undefined ? !prev[key] : !fieldsDefaultCollapsed,
-    }));
-  }, [fieldsDefaultCollapsed]);
-
-  return { groups, isGrouped, toggleGroup };
-}