@object-ui/plugin-grid 3.0.3 → 3.1.0

package/src/__tests__/useGroupedData.test.ts

@@ -0,0 +1,165 @@
+/**
+ * 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 { describe, it, expect } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useGroupedData } from '../useGroupedData';
+
+const sampleData = [
+  { category: 'A', priority: 'High', amount: 10 },
+  { category: 'A', priority: 'Low', amount: 20 },
+  { category: 'B', priority: 'High', amount: 30 },
+  { category: 'B', priority: 'Medium', amount: 40 },
+  { category: 'C', priority: 'Low', amount: 50 },
+];
+
+describe('useGroupedData – collapsed state management', () => {
+  it('returns isGrouped=false when config is undefined', () => {
+    const { result } = renderHook(() => useGroupedData(undefined, sampleData));
+    expect(result.current.isGrouped).toBe(false);
+    expect(result.current.groups).toEqual([]);
+  });
+
+  it('returns isGrouped=false when config has empty fields', () => {
+    const { result } = renderHook(() => useGroupedData({ fields: [] }, sampleData));
+    expect(result.current.isGrouped).toBe(false);
+    expect(result.current.groups).toEqual([]);
+  });
+
+  it('groups data correctly with single field', () => {
+    const config = { fields: [{ field: 'category', order: 'asc' as const, collapsed: false }] };
+    const { result } = renderHook(() => useGroupedData(config, sampleData));
+
+    expect(result.current.isGrouped).toBe(true);
+    expect(result.current.groups).toHaveLength(3);
+    expect(result.current.groups[0].key).toBe('A');
+    expect(result.current.groups[0].rows).toHaveLength(2);
+    expect(result.current.groups[1].key).toBe('B');
+    expect(result.current.groups[1].rows).toHaveLength(2);
+    expect(result.current.groups[2].key).toBe('C');
+    expect(result.current.groups[2].rows).toHaveLength(1);
+  });
+
+  it('all groups default to expanded when collapsed=false', () => {
+    const config = { fields: [{ field: 'category', order: 'asc' as const, collapsed: false }] };
+    const { result } = renderHook(() => useGroupedData(config, sampleData));
+
+    result.current.groups.forEach((group) => {
+      expect(group.collapsed).toBe(false);
+    });
+  });
+
+  it('all groups default to collapsed when collapsed=true', () => {
+    const config = { fields: [{ field: 'category', order: 'asc' as const, collapsed: true }] };
+    const { result } = renderHook(() => useGroupedData(config, sampleData));
+
+    result.current.groups.forEach((group) => {
+      expect(group.collapsed).toBe(true);
+    });
+  });
+
+  it('toggleGroup toggles a group from expanded to collapsed', () => {
+    const config = { fields: [{ field: 'category', order: 'asc' as const, collapsed: false }] };
+    const { result } = renderHook(() => useGroupedData(config, sampleData));
+
+    // Initially all expanded
+    expect(result.current.groups[0].collapsed).toBe(false);
+
+    // Toggle group A
+    act(() => {
+      result.current.toggleGroup('A');
+    });
+
+    expect(result.current.groups[0].collapsed).toBe(true);
+    // Other groups remain expanded
+    expect(result.current.groups[1].collapsed).toBe(false);
+    expect(result.current.groups[2].collapsed).toBe(false);
+  });
+
+  it('toggleGroup toggles a group from collapsed back to expanded', () => {
+    const config = { fields: [{ field: 'category', order: 'asc' as const, collapsed: false }] };
+    const { result } = renderHook(() => useGroupedData(config, sampleData));
+
+    // Toggle twice: expand -> collapse -> expand
+    act(() => {
+      result.current.toggleGroup('A');
+    });
+    expect(result.current.groups[0].collapsed).toBe(true);
+
+    act(() => {
+      result.current.toggleGroup('A');
+    });
+    expect(result.current.groups[0].collapsed).toBe(false);
+  });
+
+  it('toggleGroup expands a group that defaults to collapsed', () => {
+    const config = { fields: [{ field: 'category', order: 'asc' as const, collapsed: true }] };
+    const { result } = renderHook(() => useGroupedData(config, sampleData));
+
+    // Initially all collapsed
+    expect(result.current.groups[0].collapsed).toBe(true);
+
+    // Toggle group A to expand
+    act(() => {
+      result.current.toggleGroup('A');
+    });
+
+    expect(result.current.groups[0].collapsed).toBe(false);
+    // Other groups remain collapsed
+    expect(result.current.groups[1].collapsed).toBe(true);
+  });
+
+  it('sorts groups in descending order when configured', () => {
+    const config = { fields: [{ field: 'category', order: 'desc' as const, collapsed: false }] };
+    const { result } = renderHook(() => useGroupedData(config, sampleData));
+
+    expect(result.current.groups[0].key).toBe('C');
+    expect(result.current.groups[1].key).toBe('B');
+    expect(result.current.groups[2].key).toBe('A');
+  });
+
+  it('builds correct labels for groups', () => {
+    const config = { fields: [{ field: 'category', order: 'asc' as const, collapsed: false }] };
+    const { result } = renderHook(() => useGroupedData(config, sampleData));
+
+    expect(result.current.groups[0].label).toBe('A');
+    expect(result.current.groups[1].label).toBe('B');
+    expect(result.current.groups[2].label).toBe('C');
+  });
+
+  it('shows (empty) label for rows with missing grouping field', () => {
+    const data = [
+      { category: 'A', amount: 10 },
+      { amount: 20 }, // no category
+      { category: '', amount: 30 }, // empty category
+    ];
+    const config = { fields: [{ field: 'category', order: 'asc' as const, collapsed: false }] };
+    const { result } = renderHook(() => useGroupedData(config, data));
+
+    const emptyGroup = result.current.groups.find((g) => g.label === '(empty)');
+    expect(emptyGroup).toBeDefined();
+    expect(emptyGroup!.rows).toHaveLength(2);
+  });
+
+  it('supports multi-field grouping', () => {
+    const config = {
+      fields: [
+        { field: 'category', order: 'asc' as const, collapsed: false },
+        { field: 'priority', order: 'asc' as const, collapsed: false },
+      ],
+    };
+    const { result } = renderHook(() => useGroupedData(config, sampleData));
+
+    expect(result.current.isGrouped).toBe(true);
+    // Each unique combination of category + priority should be a group
+    expect(result.current.groups.length).toBeGreaterThanOrEqual(4);
+    // Check label format is "A / High"
+    const firstGroup = result.current.groups[0];
+    expect(firstGroup.label).toContain(' / ');
+  });
+});

package/src/components/BulkActionBar.tsx

@@ -0,0 +1,66 @@
+/**
+ * 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 React from 'react';
+import { Button } from '@object-ui/components';
+import { formatActionLabel } from './RowActionMenu';
+
+export interface BulkActionBarProps {
+  /** Array of selected row records */
+  selectedRows: any[];
+  /** Bulk/batch action identifiers */
+  actions: string[];
+  /** Callback when a bulk action button is clicked */
+  onAction?: (action: string, selectedRows: any[]) => void;
+  /** Callback to clear selection */
+  onClearSelection?: () => void;
+}
+
+export const BulkActionBar: React.FC<BulkActionBarProps> = ({
+  selectedRows,
+  actions,
+  onAction,
+  onClearSelection,
+}) => {
+  if (!actions || actions.length === 0 || selectedRows.length === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      className="border-t px-4 py-1.5 flex items-center gap-2 text-xs bg-primary/5 shrink-0"
+      data-testid="bulk-actions-bar"
+    >
+      <span className="text-muted-foreground font-medium">
+        {selectedRows.length} selected
+      </span>
+      <div className="flex items-center gap-1 ml-2">
+        {actions.map(action => (
+          <Button
+            key={action}
+            variant="outline"
+            size="sm"
+            className="h-6 px-2 text-xs"
+            onClick={() => onAction?.(action, selectedRows)}
+            data-testid={`bulk-action-${action}`}
+          >
+            {formatActionLabel(action)}
+          </Button>
+        ))}
+      </div>
+      <Button
+        variant="ghost"
+        size="sm"
+        className="h-6 px-2 text-xs ml-auto"
+        onClick={onClearSelection}
+      >
+        Clear
+      </Button>
+    </div>
+  );
+};

package/src/components/RowActionMenu.tsx

@@ -0,0 +1,91 @@
+/**
+ * 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 React from 'react';
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@object-ui/components';
+import { Edit, Trash2, MoreVertical } from 'lucide-react';
+
+/**
+ * Format an action identifier string into a human-readable label.
+ * e.g., 'send_email' → 'Send Email'
+ */
+export function formatActionLabel(action: string): string {
+  return action.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+}
+
+export interface RowActionMenuProps {
+  /** The row data record */
+  row: any;
+  /** Custom row action identifiers */
+  rowActions?: string[];
+  /** Whether edit operation is available */
+  canEdit?: boolean;
+  /** Whether delete operation is available */
+  canDelete?: boolean;
+  /** Callback when edit is clicked */
+  onEdit?: (row: any) => void;
+  /** Callback when delete is clicked */
+  onDelete?: (row: any) => void;
+  /** Callback when a custom row action is clicked */
+  onAction?: (action: string, row: any) => void;
+}
+
+export const RowActionMenu: React.FC<RowActionMenuProps> = ({
+  row,
+  rowActions,
+  canEdit,
+  canDelete,
+  onEdit,
+  onDelete,
+  onAction,
+}) => {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 min-h-[44px] min-w-[44px] sm:min-h-0 sm:min-w-0"
+          data-testid="row-action-trigger"
+        >
+          <MoreVertical className="h-4 w-4" />
+          <span className="sr-only">Open menu</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {canEdit && onEdit && (
+          <DropdownMenuItem onClick={() => onEdit(row)}>
+            <Edit className="mr-2 h-4 w-4" />
+            Edit
+          </DropdownMenuItem>
+        )}
+        {canDelete && onDelete && (
+          <DropdownMenuItem onClick={() => onDelete(row)}>
+            <Trash2 className="mr-2 h-4 w-4" />
+            Delete
+          </DropdownMenuItem>
+        )}
+        {rowActions?.map(action => (
+          <DropdownMenuItem
+            key={action}
+            onClick={() => onAction?.(action, row)}
+            data-testid={`row-action-${action}`}
+          >
+            {formatActionLabel(action)}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};

package/src/index.tsx

@@ -11,15 +11,35 @@ import { ComponentRegistry } from '@object-ui/core';
 import { useSchemaContext } from '@object-ui/react';
 import { ObjectGrid } from './ObjectGrid';
 import { VirtualGrid } from './VirtualGrid';
+import { ImportWizard } from './ImportWizard';
 
-export { ObjectGrid, VirtualGrid };
+export { ObjectGrid, VirtualGrid, ImportWizard };
 export { InlineEditing } from './InlineEditing';
 export { useRowColor } from './useRowColor';
 export { useGroupedData } from './useGroupedData';
+export { GroupRow } from './GroupRow';
+export { RowActionMenu, formatActionLabel } from './components/RowActionMenu';
+export { BulkActionBar } from './components/BulkActionBar';
+export { useCellClipboard } from './useCellClipboard';
+export { useGradientColor } from './useGradientColor';
+export { useGroupReorder } from './useGroupReorder';
+export { useColumnSummary } from './useColumnSummary';
+export { FormulaBar } from './FormulaBar';
+export { SplitPaneGrid } from './SplitPaneGrid';
 export type { ObjectGridProps } from './ObjectGrid';
 export type { VirtualGridProps, VirtualGridColumn } from './VirtualGrid';
 export type { InlineEditingProps } from './InlineEditing';
-export type { GroupEntry, UseGroupedDataResult } from './useGroupedData';
+export type { ImportWizardProps, ImportResult } from './ImportWizard';
+export type { GroupEntry, UseGroupedDataResult, AggregationType, AggregationConfig, AggregationResult } from './useGroupedData';
+export type { GroupRowProps } from './GroupRow';
+export type { RowActionMenuProps } from './components/RowActionMenu';
+export type { BulkActionBarProps } from './components/BulkActionBar';
+export type { CellRange, UseCellClipboardOptions, UseCellClipboardResult } from './useCellClipboard';
+export type { GradientStop, UseGradientColorOptions } from './useGradientColor';
+export type { UseGroupReorderOptions, UseGroupReorderResult } from './useGroupReorder';
+export type { ColumnSummaryConfig, ColumnSummaryResult } from './useColumnSummary';
+export type { FormulaBarProps } from './FormulaBar';
+export type { SplitPaneGridProps } from './SplitPaneGrid';
 
 // Register object-grid component
 export const ObjectGridRenderer: React.FC<{ schema: any; [key: string]: any }> = ({ schema, ...props }) => {
@@ -51,5 +71,29 @@ ComponentRegistry.register('grid', ObjectGridRenderer, {
   ]
 });
 
+// Register import-wizard component
+const ImportWizardRenderer: React.FC<{ schema: any; [key: string]: any }> = ({ schema, ...props }) => {
+  const { dataSource } = useSchemaContext() || {};
+  return (
+    <ImportWizard
+      objectName={schema.objectName}
+      objectLabel={schema.objectLabel}
+      fields={schema.fields ?? []}
+      dataSource={dataSource}
+      {...props}
+    />
+  );
+};
+
+ComponentRegistry.register('import-wizard', ImportWizardRenderer, {
+  namespace: 'plugin-grid',
+  label: 'Import Wizard',
+  category: 'plugin',
+  inputs: [
+    { name: 'objectName', type: 'string', label: 'Object Name', required: true },
+    { name: 'fields', type: 'array', label: 'Fields', required: true },
+  ]
+});
+
 // Note: 'grid' type is handled by @object-ui/components Grid layout component
 // This plugin only handles 'object-grid' which integrates with ObjectQL/ObjectStack

package/src/useCellClipboard.ts

@@ -0,0 +1,136 @@
+/**
+ * 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

@@ -0,0 +1,128 @@
+/**
+ * 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]);
+}