@object-ui/plugin-grid 3.0.2 → 3.1.0

package/dist/plugin-grid/src/useGradientColor.d.ts

@@ -0,0 +1,37 @@
+/**
+ * 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.
+ */
+/** 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[];
+}
+/**
+ * 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 declare function useGradientColor(options: UseGradientColorOptions): (row: Record<string, any>) => string | undefined;

package/dist/plugin-grid/src/useGroupReorder.d.ts

@@ -0,0 +1,34 @@
+/**
+ * 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.
+ */
+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;
+}
+/**
+ * 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 declare function useGroupReorder({ groupKeys }: UseGroupReorderOptions): UseGroupReorderResult;

package/dist/{packages/plugin-grid → plugin-grid}/src/useGroupedData.d.ts

@@ -1,4 +1,22 @@
 import { GroupingConfig } from '../../types/src';
+/** 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;
@@ -8,6 +26,8 @@ export interface GroupEntry {
     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) */
@@ -24,7 +44,8 @@ export interface UseGroupedDataResult {
  * 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 config        - GroupingConfig from the grid schema (optional)
+ * @param data          - flat data rows
+ * @param aggregations  - optional aggregation definitions to compute per group
  */
-export declare function useGroupedData(config: GroupingConfig | undefined, data: any[]): UseGroupedDataResult;
+export declare function useGroupedData(config: GroupingConfig | undefined, data: any[], aggregations?: AggregationConfig[]): UseGroupedDataResult;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/plugin-grid",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "type": "module",
   "license": "MIT",
   "description": "Grid plugin for Object UI",
@@ -15,14 +15,14 @@
     }
   },
   "dependencies": {
-    "@tanstack/react-virtual": "^3.13.18",
-    "lucide-react": "^0.563.0",
-    "@object-ui/components": "3.0.2",
-    "@object-ui/core": "3.0.2",
-    "@object-ui/fields": "3.0.2",
-    "@object-ui/mobile": "3.0.2",
-    "@object-ui/react": "3.0.2",
-    "@object-ui/types": "3.0.2"
+    "@tanstack/react-virtual": "^3.13.19",
+    "lucide-react": "^0.576.0",
+    "@object-ui/components": "3.1.0",
+    "@object-ui/core": "3.1.0",
+    "@object-ui/fields": "3.1.0",
+    "@object-ui/mobile": "3.1.0",
+    "@object-ui/react": "3.1.0",
+    "@object-ui/types": "3.1.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -34,7 +34,7 @@
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4",
-    "@object-ui/data-objectstack": "3.0.2"
+    "@object-ui/data-objectstack": "3.1.0"
   },
   "scripts": {
     "build": "vite build",

package/src/FormulaBar.tsx

@@ -0,0 +1,151 @@
+/**
+ * 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, { useState, useRef, useEffect, useCallback } from 'react';
+import { cn } from '@object-ui/components';
+import { FunctionSquare, Check, X } from 'lucide-react';
+
+export interface FormulaBarProps {
+  /** Current cell value displayed in the bar. */
+  value: string;
+  /** Called when the user edits the value (controlled input). */
+  onChange?: (value: string) => void;
+  /** Called when the user confirms the edit (Enter or check button). */
+  onConfirm?: (value: string) => void;
+  /** Called when the user cancels the edit (Escape or X button). */
+  onCancel?: () => void;
+  /** Label describing the active cell, e.g. "A1" or "name". */
+  activeCell?: string;
+  /** Whether editing is disabled. */
+  disabled?: boolean;
+  /** Additional class names. */
+  className?: string;
+}
+
+/**
+ * Excel-like formula bar that displays and allows editing of the active cell's
+ * value.  Press Enter (or the ✓ button) to confirm, Escape (or the ✗ button)
+ * to cancel.
+ */
+export function FormulaBar({
+  value,
+  onChange,
+  onConfirm,
+  onCancel,
+  activeCell,
+  disabled = false,
+  className,
+}: FormulaBarProps) {
+  const [editing, setEditing] = useState(false);
+  const [editValue, setEditValue] = useState(value);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Sync external value when not editing.
+  useEffect(() => {
+    if (!editing) {
+      setEditValue(value);
+    }
+  }, [value, editing]);
+
+  // Auto-focus on edit start.
+  useEffect(() => {
+    if (editing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [editing]);
+
+  const startEditing = useCallback(() => {
+    if (disabled) return;
+    setEditing(true);
+    setEditValue(value);
+  }, [disabled, value]);
+
+  const confirm = useCallback(() => {
+    setEditing(false);
+    onChange?.(editValue);
+    onConfirm?.(editValue);
+  }, [editValue, onChange, onConfirm]);
+
+  const cancel = useCallback(() => {
+    setEditing(false);
+    setEditValue(value);
+    onCancel?.();
+  }, [value, onCancel]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        confirm();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        cancel();
+      }
+    },
+    [confirm, cancel],
+  );
+
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-2 border-b border-border bg-muted/30 px-3 py-1.5',
+        className,
+      )}
+    >
+      {/* f(x) indicator */}
+      <FunctionSquare className="h-4 w-4 shrink-0 text-muted-foreground" />
+
+      {/* Active cell label */}
+      {activeCell && (
+        <span className="min-w-[4rem] shrink-0 rounded bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground">
+          {activeCell}
+        </span>
+      )}
+
+      {/* Value input */}
+      <input
+        ref={inputRef}
+        type="text"
+        value={editing ? editValue : value}
+        readOnly={!editing}
+        disabled={disabled}
+        onClick={startEditing}
+        onChange={(e) => setEditValue(e.target.value)}
+        onKeyDown={handleKeyDown}
+        className={cn(
+          'flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground',
+          editing && 'rounded ring-1 ring-ring px-1',
+          disabled && 'cursor-not-allowed opacity-50',
+        )}
+      />
+
+      {/* Confirm / Cancel buttons (visible only while editing) */}
+      {editing && (
+        <div className="flex items-center gap-1">
+          <button
+            type="button"
+            onClick={confirm}
+            className="rounded p-0.5 text-green-600 hover:bg-green-100"
+            aria-label="Confirm"
+          >
+            <Check className="h-4 w-4" />
+          </button>
+          <button
+            type="button"
+            onClick={cancel}
+            className="rounded p-0.5 text-red-600 hover:bg-red-100"
+            aria-label="Cancel"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/GroupRow.tsx

@@ -0,0 +1,69 @@
+/**
+ * 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 { ChevronRight, ChevronDown } from 'lucide-react';
+import type { AggregationResult } from './useGroupedData';
+
+export interface GroupRowProps {
+  /** Unique key identifying this group */
+  groupKey: string;
+  /** Display label for the group (field value or "(empty)") */
+  label: string;
+  /** Number of rows in this group */
+  count: number;
+  /** Whether the group is collapsed */
+  collapsed: boolean;
+  /** Computed aggregation results for this group */
+  aggregations?: AggregationResult[];
+  /** Callback when the group header is clicked to toggle collapse */
+  onToggle: (key: string) => void;
+  /** Children to render when not collapsed (the group content) */
+  children: React.ReactNode;
+}
+
+/**
+ * GroupRow renders a collapsible group header with field value, record count,
+ * and optional aggregation summary. Used by ObjectGrid for grouped rendering.
+ */
+export const GroupRow: React.FC<GroupRowProps> = ({
+  groupKey,
+  label,
+  count,
+  collapsed,
+  aggregations,
+  onToggle,
+  children,
+}) => {
+  return (
+    <div className="border rounded-md" data-testid={`group-row-${groupKey}`}>
+      <button
+        type="button"
+        className="flex w-full items-center gap-2 px-3 py-2 text-sm font-medium text-left bg-muted/50 hover:bg-muted transition-colors"
+        onClick={() => onToggle(groupKey)}
+        aria-expanded={!collapsed}
+      >
+        {collapsed
+          ? <ChevronRight className="h-4 w-4 shrink-0" />
+          : <ChevronDown className="h-4 w-4 shrink-0" />}
+        <span className="group-label">{label}</span>
+        {aggregations && aggregations.length > 0 && (
+          <span className="ml-2 text-xs text-muted-foreground group-aggregations">
+            {aggregations.map((agg) => (
+              <span key={`${agg.field}-${agg.type}`} className="mr-2">
+                {agg.type}: {Number.isInteger(agg.value) ? agg.value : agg.value.toFixed(2)}
+              </span>
+            ))}
+          </span>
+        )}
+        <span className="ml-auto text-xs text-muted-foreground group-count">({count})</span>
+      </button>
+      {!collapsed && children}
+    </div>
+  );
+};