@object-ui/plugin-gantt 3.0.3 → 3.1.0

package/dist/src/GanttView.d.ts

@@ -22,9 +22,12 @@ export interface GanttViewProps {
     startDate?: Date;
     endDate?: Date;
     onTaskClick?: (task: GanttTask) => void;
+    onTaskUpdate?: (task: GanttTask, changes: Partial<Pick<GanttTask, 'title' | 'start' | 'end' | 'progress'>>) => void;
     onViewChange?: (view: GanttViewMode) => void;
     onAddClick?: () => void;
     className?: string;
+    /** Enable inline editing of task fields */
+    inlineEdit?: boolean;
 }
-export declare function GanttView({ tasks, viewMode, startDate, endDate, onTaskClick, onViewChange, onAddClick, className }: GanttViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function GanttView({ tasks, viewMode, startDate, endDate, onTaskClick, onTaskUpdate, onViewChange, onAddClick, className, inlineEdit, }: GanttViewProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=GanttView.d.ts.map

package/dist/src/GanttView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GanttView.d.ts","sourceRoot":"","sources":["../../src/GanttView.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAmCH,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,IAAI,CAAA;IACX,GAAG,EAAE,IAAI,CAAA;IACT,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,GAAG,CAAA;IACV,YAAY,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;CACnC;AAED,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;AAEjE,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,SAAS,EAAE,CAAA;IAClB,QAAQ,CAAC,EAAE,aAAa,CAAA;IACxB,SAAS,CAAC,EAAE,IAAI,CAAA;IAChB,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAA;IAC5C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAkB,EAClB,SAAS,EACT,OAAO,EACP,WAAW,EACX,YAAY,EACZ,UAAU,EACV,SAAS,EACV,EAAE,cAAc,2CAqRhB"}
+{"version":3,"file":"GanttView.d.ts","sourceRoot":"","sources":["../../src/GanttView.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AA0CH,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,IAAI,CAAA;IACX,GAAG,EAAE,IAAI,CAAA;IACT,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,GAAG,CAAA;IACV,YAAY,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;CACnC;AAED,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;AAEjE,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,SAAS,EAAE,CAAA;IAClB,QAAQ,CAAC,EAAE,aAAa,CAAA;IACxB,SAAS,CAAC,EAAE,IAAI,CAAA;IAChB,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,GAAG,OAAO,GAAG,KAAK,GAAG,UAAU,CAAC,CAAC,KAAK,IAAI,CAAA;IACnH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAA;IAC5C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAkB,EAClB,SAAS,EACT,OAAO,EACP,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,SAAS,EACT,UAAkB,GACnB,EAAE,cAAc,2CAqVhB"}

package/dist/src/ObjectGantt.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ObjectGantt.d.ts","sourceRoot":"","sources":["../../src/ObjectGantt.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAyB,MAAM,kBAAkB,CAAC;AAM5F,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,gBAAgB,CAAC;IACzB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;CAClC;AAyFD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAyMlD,CAAC"}
+{"version":3,"file":"ObjectGantt.d.ts","sourceRoot":"","sources":["../../src/ObjectGantt.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAyB,MAAM,kBAAkB,CAAC;AAO5F,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,gBAAgB,CAAC;IACzB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;CAClC;AAyFD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAkMlD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/plugin-gantt",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "type": "module",
   "license": "MIT",
   "description": "Gantt chart plugin for Object UI",
@@ -24,20 +24,20 @@
     }
   },
   "dependencies": {
-    "@objectstack/spec": "^3.0.4",
-    "lucide-react": "^0.563.0",
-    "@object-ui/components": "3.0.3",
-    "@object-ui/core": "3.0.3",
-    "@object-ui/fields": "3.0.3",
-    "@object-ui/react": "3.0.3",
-    "@object-ui/types": "3.0.3"
+    "@objectstack/spec": "^3.2.0",
+    "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/react": "3.1.0",
+    "@object-ui/types": "3.1.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "19.2.13",
+    "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react": "^5.1.4",
     "typescript": "^5.9.3",

package/src/GanttView.tsx

@@ -39,6 +39,13 @@ function getResponsiveColumnWidth() {
   return 60;
 }
 
+function getResponsiveTaskListWidth() {
+  const w = typeof window !== 'undefined' ? window.innerWidth : 1024;
+  if (w < 640) return 120;
+  if (w < 1024) return 200;
+  return 300;
+}
+
 export interface GanttTask {
   id: string | number
   title: string
@@ -58,9 +65,12 @@ export interface GanttViewProps {
   startDate?: Date
   endDate?: Date
   onTaskClick?: (task: GanttTask) => void
+  onTaskUpdate?: (task: GanttTask, changes: Partial<Pick<GanttTask, 'title' | 'start' | 'end' | 'progress'>>) => void
   onViewChange?: (view: GanttViewMode) => void
   onAddClick?: () => void
   className?: string
+  /** Enable inline editing of task fields */
+  inlineEdit?: boolean
 }
 
 export function GanttView({
@@ -69,15 +79,19 @@ export function GanttView({
   startDate,
   endDate,
   onTaskClick,
+  onTaskUpdate,
   onViewChange,
   onAddClick,
-  className
+  className,
+  inlineEdit = false,
 }: GanttViewProps) {
   const [currentDate, setCurrentDate] = React.useState(new Date());
   const [rowHeight, setRowHeight] = React.useState(
     typeof window !== 'undefined' && window.innerWidth < 640 ? 32 : 40
   );
   const [columnWidth, setColumnWidth] = React.useState(getResponsiveColumnWidth());
+  const [editingTask, setEditingTask] = React.useState<string | number | null>(null);
+  const [editValues, setEditValues] = React.useState<Record<string, string>>({});
 
   React.useEffect(() => {
     const handleResize = () => {
@@ -131,7 +145,7 @@ export function GanttView({
     return cols;
   }, [timelineRange]);
 
-  const taskListWidth = 300;
+  const taskListWidth = getResponsiveTaskListWidth();
   
   const headerRef = React.useRef<HTMLDivElement>(null);
   const listRef = React.useRef<HTMLDivElement>(null);
@@ -163,7 +177,7 @@ export function GanttView({
   };
 
   return (
-    <div className={cn("flex flex-col h-full bg-background border rounded-lg overflow-hidden", className)}>
+    <div className={cn("flex flex-col h-full bg-background border rounded-lg overflow-hidden min-w-0", className)}>
       {/* Toolbar */}
       <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 p-2 border-b bg-card">
         <div className="flex items-center gap-2">
@@ -173,10 +187,10 @@ export function GanttView({
             <span className="sm:hidden">New</span>
           </Button>
           <div className="h-4 w-px bg-border mx-1 sm:mx-2" />
-          <Button variant="ghost" size="icon" className="h-8 w-8">
+          <Button variant="ghost" size="icon" className="h-8 w-8" aria-label="Previous period">
             <ChevronLeft className="h-4 w-4" />
           </Button>
-          <Button variant="ghost" size="icon" className="h-8 w-8">
+          <Button variant="ghost" size="icon" className="h-8 w-8" aria-label="Next period">
             <ChevronRight className="h-4 w-4" />
           </Button>
           <span className="font-semibold text-xs sm:text-sm">
@@ -197,10 +211,10 @@ export function GanttView({
             </SelectContent>
           </Select>
           <div className="flex bg-muted rounded-md p-1">
-            <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => setColumnWidth(prev => Math.max(15, prev - 10))}>
+            <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => setColumnWidth(prev => Math.max(15, prev - 10))} aria-label="Zoom out">
               <ZoomOut className="h-3 w-3" />
             </Button>
-            <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => setColumnWidth(prev => Math.min(120, prev + 10))}>
+            <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => setColumnWidth(prev => Math.min(120, prev + 10))} aria-label="Zoom in">
               <ZoomIn className="h-3 w-3" />
             </Button>
           </div>
@@ -251,28 +265,90 @@ export function GanttView({
             ref={listRef}
             style={{ width: taskListWidth, minWidth: taskListWidth }}
           >
-            {tasks.map((task) => (
+            {tasks.map((task) => {
+              const isEditing = inlineEdit && editingTask === task.id;
+              return (
               <div 
                 key={task.id}
                 className="flex items-center border-b px-2 sm:px-4 hover:bg-accent/50 cursor-pointer transition-colors touch-manipulation"
                 style={{ height: rowHeight }}
-                onClick={() => onTaskClick?.(task)}
+                onClick={() => !isEditing && onTaskClick?.(task)}
+                onDoubleClick={() => {
+                  if (inlineEdit && onTaskUpdate) {
+                    setEditingTask(task.id);
+                    setEditValues({
+                      title: task.title,
+                      start: task.start.toLocaleDateString('en-CA'),
+                      end: task.end.toLocaleDateString('en-CA'),
+                      progress: String(task.progress),
+                    });
+                  }
+                }}
               >
                 <div className="flex-1 truncate font-medium text-xs sm:text-sm flex items-center gap-2">
                   <div 
                     className="w-2 h-2 rounded-full shrink-0"
                     style={{ backgroundColor: task.color || '#3b82f6' }} 
                   />
-                  {task.title}
+                  {isEditing ? (
+                    <input
+                      className="border rounded px-1 py-0.5 text-xs w-full bg-background"
+                      value={editValues.title || ''}
+                      onChange={(e) => setEditValues(prev => ({ ...prev, title: e.target.value }))}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter') {
+                          onTaskUpdate?.(task, {
+                            title: editValues.title,
+                            start: new Date(editValues.start),
+                            end: new Date(editValues.end),
+                            progress: Number(editValues.progress) || 0,
+                          });
+                          setEditingTask(null);
+                        } else if (e.key === 'Escape') {
+                          setEditingTask(null);
+                        }
+                      }}
+                      onClick={(e) => e.stopPropagation()}
+                      autoFocus
+                    />
+                  ) : (
+                    <span className="flex flex-col min-w-0">
+                      <span className="truncate">{task.title}</span>
+                      <span className="text-[10px] text-muted-foreground sm:hidden">
+                        {task.start.toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' })} → {task.end.toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' })}
+                      </span>
+                    </span>
+                  )}
                 </div>
                 <div className="w-16 sm:w-20 text-right text-xs text-muted-foreground hidden sm:block">
-                  {task.start.toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' })}
+                  {isEditing ? (
+                    <input
+                      type="date"
+                      className="border rounded px-1 py-0.5 text-xs w-full bg-background"
+                      value={editValues.start || ''}
+                      onChange={(e) => setEditValues(prev => ({ ...prev, start: e.target.value }))}
+                      onClick={(e) => e.stopPropagation()}
+                    />
+                  ) : (
+                    task.start.toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' })
+                  )}
                 </div>
                 <div className="w-16 sm:w-20 text-right text-xs text-muted-foreground hidden sm:block">
-                  {task.end.toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' })}
+                  {isEditing ? (
+                    <input
+                      type="date"
+                      className="border rounded px-1 py-0.5 text-xs w-full bg-background"
+                      value={editValues.end || ''}
+                      onChange={(e) => setEditValues(prev => ({ ...prev, end: e.target.value }))}
+                      onClick={(e) => e.stopPropagation()}
+                    />
+                  ) : (
+                    task.end.toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' })
+                  )}
                 </div>
               </div>
-            ))}
+              );
+            })}
           </div>
 
           {/* Right Side: Timeline */}

package/src/ObjectGantt.tsx

@@ -27,6 +27,7 @@ import type { ObjectGridSchema, DataSource, ViewData, GanttConfig } from '@objec
 import { GanttConfigSchema } from '@objectstack/spec/ui';
 import { useNavigationOverlay } from '@object-ui/react';
 import { NavigationOverlay } from '@object-ui/components';
+import { extractRecords, buildExpandFields } from '@object-ui/core';
 import { GanttView, type GanttTask } from './GanttView';
 
 export interface ObjectGanttProps {
@@ -167,27 +168,20 @@ export const ObjectGantt: React.FC<ObjectGanttProps> = ({
           return;
         }
 
-        if (!dataSource) {
+        if (!dataSource || typeof dataSource.find !== 'function') {
           throw new Error('DataSource required for object/api providers');
         }
 
         if (dataConfig?.provider === 'object') {
           const objectName = dataConfig.object;
+          // Auto-inject $expand for lookup/master_detail fields
+          const expand = buildExpandFields(objectSchema?.fields);
           const result = await dataSource.find(objectName, {
             $filter: schema.filter,
             $orderby: convertSortToQueryParams(schema.sort),
+            ...(expand.length > 0 ? { $expand: expand } : {}),
           });
-          
-          let items: any[] = [];
-          if (Array.isArray(result)) {
-            items = result;
-          } else if (result && typeof result === 'object') {
-             if (Array.isArray((result as any).data)) {
-                items = (result as any).data; 
-             } else if (Array.isArray((result as any).records)) {
-                items = (result as any).records;
-             }
-          }
+          let items: any[] = extractRecords(result);
           setData(items);
         } else if (dataConfig?.provider === 'api') {
           console.warn('API provider not yet implemented for ObjectGantt');
@@ -202,7 +196,7 @@ export const ObjectGantt: React.FC<ObjectGanttProps> = ({
     };
 
     fetchData();
-  }, [dataConfig, dataSource, hasInlineData, schema.filter, schema.sort]);
+  }, [dataConfig, dataSource, hasInlineData, schema.filter, schema.sort, objectSchema]);
 
   // Fetch object schema for field metadata
   useEffect(() => {

package/src/__tests__/GanttView.test.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 { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { GanttView, type GanttTask } from '../GanttView';
+
+const mockTasks: GanttTask[] = [
+  {
+    id: '1',
+    title: 'Design Phase',
+    start: new Date('2024-01-15'),
+    end: new Date('2024-02-15'),
+    progress: 75,
+  },
+  {
+    id: '2',
+    title: 'Development',
+    start: new Date('2024-02-01'),
+    end: new Date('2024-03-15'),
+    progress: 30,
+  },
+];
+
+describe('GanttView accessibility', () => {
+  it('renders aria-label on navigation buttons', () => {
+    render(<GanttView tasks={mockTasks} />);
+    expect(screen.getByLabelText('Previous period')).toBeInTheDocument();
+    expect(screen.getByLabelText('Next period')).toBeInTheDocument();
+  });
+
+  it('renders aria-label on zoom buttons', () => {
+    render(<GanttView tasks={mockTasks} />);
+    expect(screen.getByLabelText('Zoom out')).toBeInTheDocument();
+    expect(screen.getByLabelText('Zoom in')).toBeInTheDocument();
+  });
+
+  it('renders aria-label on create button', () => {
+    render(<GanttView tasks={mockTasks} />);
+    expect(screen.getByLabelText('Create new task')).toBeInTheDocument();
+  });
+});
+
+describe('GanttView mobile date badge', () => {
+  it('renders date range text below task title', () => {
+    render(<GanttView tasks={mockTasks} />);
+    // The mobile date badge shows start → end dates
+    const startDate = mockTasks[0].start.toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' });
+    const endDate = mockTasks[0].end.toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' });
+    const dateText = `${startDate} → ${endDate}`;
+    expect(screen.getByText(dateText)).toBeInTheDocument();
+  });
+
+  it('renders mobile date badge with sm:hidden class', () => {
+    render(<GanttView tasks={mockTasks} />);
+    const startDate = mockTasks[0].start.toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' });
+    const endDate = mockTasks[0].end.toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' });
+    const dateText = `${startDate} → ${endDate}`;
+    const badge = screen.getByText(dateText);
+    expect(badge.className).toContain('sm:hidden');
+  });
+});

package/src/index.tsx

@@ -20,7 +20,7 @@ export type { GanttViewProps, GanttTask, GanttViewMode } from './GanttView';
 
 // Register component
 export const ObjectGanttRenderer: React.FC<{ schema: any }> = ({ schema }) => {
-  const { dataSource } = useSchemaContext();
+  const { dataSource } = useSchemaContext() || {};
   return <ObjectGantt schema={schema} dataSource={dataSource} />;
 };