@object-ui/plugin-grid 0.3.1 → 2.0.0

package/src/ObjectGrid.tsx

@@ -23,9 +23,9 @@
 
 import React, { useEffect, useState, useCallback } from 'react';
 import type { ObjectGridSchema, DataSource, ListColumn, ViewData } from '@object-ui/types';
-import { SchemaRenderer } from '@object-ui/react';
+import { SchemaRenderer, useDataScope, useNavigationOverlay, useAction } from '@object-ui/react';
 import { getCellRenderer } from '@object-ui/fields';
-import { Button } from '@object-ui/components';
+import { Button, NavigationOverlay } from '@object-ui/components';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -42,7 +42,9 @@ export interface ObjectGridProps {
   onEdit?: (record: any) => void;
   onDelete?: (record: any) => void;
   onBulkDelete?: (records: any[]) => void;
-  onCellChange?: (rowIndex: number, columnKey: string, newValue: any) => void;
+  onCellChange?: (rowIndex: number, columnKey: string, newValue: any, row: any) => void;
+  onRowSave?: (rowIndex: number, changes: Record<string, any>, row: any) => void | Promise<void>;
+  onBatchSave?: (changes: Array<{ rowIndex: number; changes: Record<string, any>; row: any }>) => void | Promise<void>;
   onRowSelect?: (selectedRows: any[]) => void;
 }
 
@@ -53,6 +55,15 @@ export interface ObjectGridProps {
 function getDataConfig(schema: ObjectGridSchema): ViewData | null {
   // New format: explicit data configuration
   if (schema.data) {
+    // Check if data is an array (shorthand format) or already a ViewData object
+    if (Array.isArray(schema.data)) {
+      // Convert array shorthand to proper ViewData format
+      return {
+        provider: 'value',
+        items: schema.data,
+      };
+    }
+    // Already in ViewData format
     return schema.data;
   }
   
@@ -99,88 +110,308 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
   onEdit,
   onDelete,
   onRowSelect,
+  onRowClick,
+  onCellChange,
+  onRowSave,
+  onBatchSave,
+  ...rest
 }) => {
   const [data, setData] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
   const [objectSchema, setObjectSchema] = useState<any>(null);
 
+  // Check if data is passed directly (from ListView)
+  const passedData = (rest as any).data;
+
+  // Resolve bound data if 'bind' property exists
+  const boundData = useDataScope(schema.bind);
+
   // Get data configuration (supports both new and legacy formats)
-  const dataConfig = getDataConfig(schema);
+  const rawDataConfig = getDataConfig(schema);
+  // Memoize dataConfig using deep comparison to prevent infinite loops
+  const dataConfig = React.useMemo(() => {
+    // If we have passed data (highest priority), treat it as value provider
+    if (passedData && Array.isArray(passedData)) {
+        return {
+            provider: 'value',
+            items: passedData
+        };
+    }
+
+    // If we have bound data, it takes precedence as inline value
+    if (boundData && Array.isArray(boundData)) {
+        return {
+            provider: 'value',
+            items: boundData
+        };
+    }
+    return rawDataConfig;
+  }, [JSON.stringify(rawDataConfig), boundData, passedData]);
+  
   const hasInlineData = dataConfig?.provider === 'value';
 
+  // Extract stable primitive/reference-stable values from schema for dependency arrays.
+  // This prevents infinite re-render loops when schema is a new object on each render
+  // (e.g. when rendered through SchemaRenderer which creates a fresh evaluatedSchema).
+  const objectName = dataConfig?.provider === 'object' && dataConfig && 'object' in dataConfig
+    ? (dataConfig as any).object
+    : schema.objectName;
+  const schemaFields = schema.fields;
+  const schemaColumns = schema.columns;
+  const schemaFilter = schema.filter;
+  const schemaSort = schema.sort;
+  const schemaPagination = schema.pagination;
+  const schemaPageSize = schema.pageSize;
+
+  // --- Inline data effect (synchronous, no fetch needed) ---
   useEffect(() => {
     if (hasInlineData && dataConfig?.provider === 'value') {
-      setData(dataConfig.items as any[]);
-      setLoading(false);
+       // Only update if data is different to avoid infinite loop
+       setData(prev => {
+         const newItems = dataConfig.items as any[];
+         if (JSON.stringify(prev) !== JSON.stringify(newItems)) {
+            return newItems;
+         }
+         return prev;
+       });
+       setLoading(false);
     }
   }, [hasInlineData, dataConfig]);
 
+  // --- Unified async data loading effect ---
+  // Combines schema fetch + data fetch into a single async flow with AbortController.
+  // This avoids the fragile "chained effects" pattern where Effect 1 sets objectSchema,
+  // triggering Effect 2 to call fetchData — a pattern prone to infinite loops when
+  // fetchData's reference is unstable.
   useEffect(() => {
-    const fetchObjectSchema = async () => {
+    if (hasInlineData) return;
+
+    let cancelled = false;
+
+    const loadSchemaAndData = async () => {
+      setLoading(true);
+      setError(null);
       try {
-        if (!dataSource) {
+        // --- Step 1: Resolve object schema ---
+        let resolvedSchema: any = null;
+        const cols = normalizeColumns(schemaColumns) || schemaFields;
+
+        if (cols && objectName) {
+          // We have explicit columns — use a minimal schema stub
+          resolvedSchema = { name: objectName, fields: {} };
+        } else if (objectName && dataSource) {
+          // Fetch full schema from DataSource
+          const schemaData = await dataSource.getObjectSchema(objectName);
+          if (cancelled) return;
+          resolvedSchema = schemaData;
+        } else if (!objectName) {
+          throw new Error('Object name required for data fetching');
+        } else {
           throw new Error('DataSource required');
         }
-        
-        // For object provider, get the object name
-        const objectName = dataConfig?.provider === 'object' 
-          ? dataConfig.object 
-          : schema.objectName;
-          
-        if (!objectName) {
-          throw new Error('Object name required for object provider');
+
+        if (!cancelled) {
+          setObjectSchema(resolvedSchema);
+        }
+
+        // --- Step 2: Fetch data ---
+        if (dataSource && objectName) {
+          const getSelectFields = () => {
+            if (schemaFields) return schemaFields;
+            if (schemaColumns && Array.isArray(schemaColumns)) {
+              return schemaColumns.map((c: any) => typeof c === 'string' ? c : c.field);
+            }
+            return undefined;
+          };
+
+          const params: any = {
+            $select: getSelectFields(),
+            $top: (schemaPagination as any)?.pageSize || schemaPageSize || 50,
+          };
+
+          // Support new filter format
+          if (schemaFilter && Array.isArray(schemaFilter)) {
+            params.$filter = schemaFilter;
+          } else if (schema.defaultFilters) {
+            // Legacy support
+            params.$filter = schema.defaultFilters;
+          }
+
+          // Support new sort format
+          if (schemaSort) {
+            if (typeof schemaSort === 'string') {
+              params.$orderby = schemaSort;
+            } else if (Array.isArray(schemaSort)) {
+              params.$orderby = schemaSort
+                .map((s: any) => `${s.field} ${s.order}`)
+                .join(', ');
+            }
+          } else if (schema.defaultSort) {
+            // Legacy support
+            params.$orderby = `${(schema.defaultSort as any).field} ${(schema.defaultSort as any).order}`;
+          }
+
+          const result = await dataSource.find(objectName, params);
+          if (cancelled) return;
+          setData(result.data || []);
         }
-        
-        const schemaData = await dataSource.getObjectSchema(objectName);
-        setObjectSchema(schemaData);
       } catch (err) {
-        setError(err as Error);
+        if (!cancelled) {
+          setError(err as Error);
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
       }
     };
 
-    // Normalize columns (support both legacy 'fields' and new 'columns')
-    const cols = normalizeColumns(schema.columns) || schema.fields;
-    
-    if (hasInlineData && cols) {
-      setObjectSchema({ name: schema.objectName, fields: {} });
-    } else if (schema.objectName && !hasInlineData && dataSource) {
-      fetchObjectSchema();
-    }
-  }, [schema.objectName, schema.columns, schema.fields, dataSource, hasInlineData, dataConfig]);
+    loadSchemaAndData();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [objectName, schemaFields, schemaColumns, schemaFilter, schemaSort, schemaPagination, schemaPageSize, dataSource, hasInlineData, dataConfig]);
+
+  // --- NavigationConfig support ---
+  // Must be called before any early returns to satisfy React hooks rules
+  const navigation = useNavigationOverlay({
+    navigation: schema.navigation,
+    objectName: schema.objectName,
+    onNavigate: schema.onNavigate,
+    onRowClick,
+  });
+
+  // --- Action support for action columns ---
+  const { execute: executeAction } = useAction();
 
   const generateColumns = useCallback(() => {
     // Use normalized columns (support both new and legacy)
-    const cols = normalizeColumns(schema.columns);
+    const cols = normalizeColumns(schemaColumns);
     
     if (cols) {
-      // If columns are already ListColumn objects, convert them to data-table format
+      // Check if columns are already in data-table format (have 'accessorKey')
+      // vs ListColumn format (have 'field')
       if (cols.length > 0 && typeof cols[0] === 'object' && cols[0] !== null) {
-        return (cols as ListColumn[])
-          .filter((col) => col?.field && typeof col.field === 'string') // Filter out invalid column objects
-          .map((col) => ({
-            header: col.label || col.field.charAt(0).toUpperCase() + col.field.slice(1).replace(/_/g, ' '),
-            accessorKey: col.field,
-            ...(col.width && { width: col.width }),
-            ...(col.align && { align: col.align }),
-            sortable: col.sortable !== false,
-          }));
+        const firstCol = cols[0] as any;
+        
+        // Already in data-table format - use as-is
+        if ('accessorKey' in firstCol) {
+          return cols;
+        }
+        
+        // ListColumn format - convert to data-table format with full feature support
+        if ('field' in firstCol) {
+          return (cols as ListColumn[])
+            .filter((col) => col?.field && typeof col.field === 'string' && !col.hidden)
+            .map((col) => {
+              const header = col.label || col.field.charAt(0).toUpperCase() + col.field.slice(1).replace(/_/g, ' ');
+
+              // Build custom cell renderer based on column configuration
+              let cellRenderer: ((value: any, row: any) => React.ReactNode) | undefined;
+
+              // Type-based cell renderer (e.g., "currency", "date", "boolean")
+              const CellRenderer = col.type ? getCellRenderer(col.type) : null;
+
+              if (col.link && col.action) {
+                // Both link and action: link takes priority for navigation, action executes on secondary interaction
+                cellRenderer = (value: any, row: any) => {
+                  const displayContent = CellRenderer
+                    ? <CellRenderer value={value} field={{ name: col.field, type: col.type || 'text' } as any} />
+                    : String(value ?? '');
+                  return (
+                    <button
+                      type="button"
+                      className="text-primary underline-offset-4 hover:underline cursor-pointer bg-transparent border-none p-0 text-left font-inherit"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        navigation.handleClick(row);
+                      }}
+                    >
+                      {displayContent}
+                    </button>
+                  );
+                };
+              } else if (col.link) {
+                // Link column: clicking navigates to the record detail
+                cellRenderer = (value: any, row: any) => {
+                  const displayContent = CellRenderer
+                    ? <CellRenderer value={value} field={{ name: col.field, type: col.type || 'text' } as any} />
+                    : String(value ?? '');
+                  return (
+                    <button
+                      type="button"
+                      className="text-primary underline-offset-4 hover:underline cursor-pointer bg-transparent border-none p-0 text-left font-inherit"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        navigation.handleClick(row);
+                      }}
+                    >
+                      {displayContent}
+                    </button>
+                  );
+                };
+              } else if (col.action) {
+                // Action column: clicking executes the registered action
+                cellRenderer = (value: any, row: any) => {
+                  const displayContent = CellRenderer
+                    ? <CellRenderer value={value} field={{ name: col.field, type: col.type || 'text' } as any} />
+                    : String(value ?? '');
+                  return (
+                    <button
+                      type="button"
+                      className="text-primary underline-offset-4 hover:underline cursor-pointer bg-transparent border-none p-0 text-left font-inherit"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        executeAction({
+                          type: col.action!,
+                          params: { record: row, field: col.field, value },
+                        });
+                      }}
+                    >
+                      {displayContent}
+                    </button>
+                  );
+                };
+              } else if (CellRenderer) {
+                // Type-only cell renderer (no link/action)
+                cellRenderer = (value: any) => (
+                  <CellRenderer value={value} field={{ name: col.field, type: col.type || 'text' } as any} />
+                );
+              }
+
+              return {
+                header,
+                accessorKey: col.field,
+                ...(col.width && { width: col.width }),
+                ...(col.align && { align: col.align }),
+                sortable: col.sortable !== false,
+                ...(col.resizable !== undefined && { resizable: col.resizable }),
+                ...(col.wrap !== undefined && { wrap: col.wrap }),
+                ...(cellRenderer && { cell: cellRenderer }),
+              };
+            });
+        }
       }
       
       // String array format - filter out invalid entries
       return (cols as string[])
         .filter((fieldName) => typeof fieldName === 'string' && fieldName.trim().length > 0)
-        .map((fieldName) => ({
-          header: fieldName.charAt(0).toUpperCase() + fieldName.slice(1).replace(/_/g, ' '),
-          accessorKey: fieldName,
-        }));
+        .map((fieldName) => {
+          const fieldLabel = objectSchema?.fields?.[fieldName]?.label;
+          return {
+            header: fieldLabel || fieldName.charAt(0).toUpperCase() + fieldName.slice(1).replace(/_/g, ' '),
+            accessorKey: fieldName,
+          };
+        });
     }
 
     // Legacy support: use 'fields' if columns not provided
     if (hasInlineData) {
       const inlineData = dataConfig?.provider === 'value' ? dataConfig.items as any[] : [];
       if (inlineData.length > 0) {
-        const fieldsToShow = schema.fields || Object.keys(inlineData[0]);
+        const fieldsToShow = schemaFields || Object.keys(inlineData[0]);
         return fieldsToShow.map((fieldName) => ({
           header: fieldName.charAt(0).toUpperCase() + fieldName.slice(1).replace(/_/g, ' '),
           accessorKey: fieldName,
@@ -191,7 +422,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     if (!objectSchema) return [];
 
     const generatedColumns: any[] = [];
-    const fieldsToShow = schema.fields || Object.keys(objectSchema.fields || {});
+    const fieldsToShow = schemaFields || Object.keys(objectSchema.fields || {});
     
     fieldsToShow.forEach((fieldName) => {
       const field = objectSchema.fields?.[fieldName];
@@ -209,74 +440,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     });
 
     return generatedColumns;
-  }, [objectSchema, schema.fields, schema.columns, dataConfig, hasInlineData]);
-
-  const fetchData = useCallback(async () => {
-    if (hasInlineData || !dataSource) return;
-
-    setLoading(true);
-    try {
-      // Get object name from data config or schema
-      const objectName = dataConfig?.provider === 'object' 
-        ? dataConfig.object 
-        : schema.objectName;
-        
-      if (!objectName) {
-        throw new Error('Object name required for data fetching');
-      }
-      
-      // Helper to get select fields
-      const getSelectFields = () => {
-        if (schema.fields) return schema.fields;
-        if (schema.columns && Array.isArray(schema.columns)) {
-          return schema.columns.map(c => typeof c === 'string' ? c : c.field);
-        }
-        return undefined;
-      };
-      
-      const params: any = {
-        $select: getSelectFields(),
-        $top: schema.pagination?.pageSize || schema.pageSize || 50,
-      };
-
-      // Support new filter format
-      if (schema.filter && Array.isArray(schema.filter)) {
-        params.$filter = schema.filter;
-      } else if ('defaultFilters' in schema && schema.defaultFilters) {
-        // Legacy support
-        params.$filter = schema.defaultFilters;
-      }
-
-      // Support new sort format
-      if (schema.sort) {
-        if (typeof schema.sort === 'string') {
-          // Legacy string format
-          params.$orderby = schema.sort;
-        } else if (Array.isArray(schema.sort)) {
-          // New array format
-          params.$orderby = schema.sort
-            .map(s => `${s.field} ${s.order}`)
-            .join(', ');
-        }
-      } else if ('defaultSort' in schema && schema.defaultSort) {
-        // Legacy support
-        params.$orderby = `${schema.defaultSort.field} ${schema.defaultSort.order}`;
-      }
-
-      const result = await dataSource.find(objectName, params);
-      setData(result.data || []);
-    } catch (err) {
-      setError(err as Error);
-    } finally {
-      setLoading(false);
-    }
-  }, [schema, dataSource, hasInlineData, dataConfig]);
-
-  useEffect(() => {
-    if (objectSchema || hasInlineData) {
-      fetchData();
-    }
-  }, [objectSchema, hasInlineData, fetchData]);
+  }, [objectSchema, schemaFields, schemaColumns, dataConfig, hasInlineData, navigation.handleClick, executeAction]);
 
   if (error) {
     return (
@@ -299,7 +463,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
   const columns = generateColumns();
   const operations = 'operations' in schema ? schema.operations : undefined;
   const hasActions = operations && (operations.update || operations.delete);
-  
+
   const columnsWithActions = hasActions ? [
     ...columns,
     {
@@ -321,7 +485,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
               </DropdownMenuItem>
             )}
             {operations?.delete && onDelete && (
-              <DropdownMenuItem variant="destructive" onClick={() => onDelete(row)}>
+              <DropdownMenuItem onClick={() => onDelete(row)}>
                 <Trash2 className="mr-2 h-4 w-4" />
                 Delete
               </DropdownMenuItem>
@@ -369,9 +533,69 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     exportable: operations?.export,
     rowActions: hasActions,
     resizableColumns: schema.resizable ?? schema.resizableColumns ?? true,
+    reorderableColumns: schema.reorderableColumns ?? false,
+    editable: schema.editable ?? false,
     className: schema.className,
     onSelectionChange: onRowSelect,
+    onRowClick: navigation.handleClick,
+    onCellChange: onCellChange,
+    onRowSave: onRowSave,
+    onBatchSave: onBatchSave,
   };
 
-  return <SchemaRenderer schema={dataTableSchema} />;
+  // Build record detail title
+  const detailTitle = schema.label
+    ? `${schema.label} Detail`
+    : schema.objectName
+      ? `${schema.objectName.charAt(0).toUpperCase() + schema.objectName.slice(1)} Detail`
+      : 'Record Detail';
+
+  // For split mode, wrap the grid in the ResizablePanelGroup
+  if (navigation.isOverlay && navigation.mode === 'split') {
+    return (
+      <NavigationOverlay
+        {...navigation}
+        title={detailTitle}
+        mainContent={<SchemaRenderer schema={dataTableSchema} />}
+      >
+        {(record) => (
+          <div className="space-y-3">
+            {Object.entries(record).map(([key, value]) => (
+              <div key={key} className="flex flex-col">
+                <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                  {key.replace(/_/g, ' ')}
+                </span>
+                <span className="text-sm">{String(value ?? '—')}</span>
+              </div>
+            ))}
+          </div>
+        )}
+      </NavigationOverlay>
+    );
+  }
+
+  return (
+    <>
+      <SchemaRenderer schema={dataTableSchema} />
+      {navigation.isOverlay && (
+        <NavigationOverlay
+          {...navigation}
+          title={detailTitle}
+        >
+          {(record) => (
+            <div className="space-y-3">
+              {Object.entries(record).map(([key, value]) => (
+                <div key={key} className="flex flex-col">
+                  <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                    {key.replace(/_/g, ' ')}
+                  </span>
+                  <span className="text-sm">{String(value ?? '—')}</span>
+                </div>
+              ))}
+            </div>
+          )}
+        </NavigationOverlay>
+      )}
+    </>
+  );
 };

package/src/VirtualGrid.test.tsx

@@ -0,0 +1,23 @@
+/**
+ * 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 { VirtualGrid } from './VirtualGrid';
+
+describe('VirtualGrid', () => {
+  it('should be exported', () => {
+    expect(VirtualGrid).toBeDefined();
+    expect(typeof VirtualGrid).toBe('function');
+  });
+  
+  it('should have the correct display name', () => {
+    // Verify it's a React component
+    expect(VirtualGrid.name).toBe('VirtualGrid');
+  });
+});
+