@object-ui/plugin-calendar 3.0.3 → 3.1.1

package/src/ObjectCalendar.tsx

@@ -22,12 +22,13 @@
  * - Works with object/api/value data providers
  */
 
-import React, { useEffect, useState, useCallback, useMemo } from 'react';
+import React, { useEffect, useState, useCallback, useMemo, useRef } from 'react';
 import type { ObjectGridSchema, DataSource, ViewData, CalendarConfig } from '@object-ui/types';
 import { CalendarView, type CalendarEvent } from './CalendarView';
 import { usePullToRefresh } from '@object-ui/mobile';
 import { useNavigationOverlay } from '@object-ui/react';
 import { NavigationOverlay } from '@object-ui/components';
+import { extractRecords, buildExpandFields } from '@object-ui/core';
 
 export interface CalendarSchema {
   type: 'calendar';
@@ -53,6 +54,8 @@ export interface ObjectCalendarProps {
   onDelete?: (record: any) => void;
   onNavigate?: (date: Date) => void;
   onViewChange?: (view: 'month' | 'week' | 'day') => void;
+  onEventDrop?: (record: any, newStart: Date, newEnd?: Date) => void;
+  locale?: string;
 }
 
 /**
@@ -144,6 +147,8 @@ export const ObjectCalendar: React.FC<ObjectCalendarProps> = ({
   onDateClick,
   onNavigate,
   onViewChange,
+  onEventDrop,
+  locale,
   ...rest
 }) => {
   const [data, setData] = useState<any[]>([]);
@@ -178,6 +183,10 @@ export const ObjectCalendar: React.FC<ObjectCalendarProps> = ({
   ]);
   const hasInlineData = dataConfig?.provider === 'value';
 
+  // Use ref for objectSchema to avoid double-fetch on mount
+  const objectSchemaRef = useRef<any>(null);
+  objectSchemaRef.current = objectSchema;
+
   // Fetch data based on provider
   useEffect(() => {
     let isMounted = true;
@@ -204,28 +213,21 @@ export const ObjectCalendar: React.FC<ObjectCalendarProps> = ({
             }
         }
 
-        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(objectSchemaRef.current?.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).value)) {
-              items = (result as any).value;
-            }
-          }
+          let items: any[] = extractRecords(result);
           
           if (isMounted) {
             setData(items);
@@ -362,6 +364,7 @@ export const ObjectCalendar: React.FC<ObjectCalendarProps> = ({
           events={events}
           currentDate={currentDate}
           view={(schema as any).defaultView || 'month'}
+          locale={locale}
           onEventClick={(event) => {
             navigation.handleClick(event.data);
             onEventClick?.(event.data);
@@ -375,7 +378,10 @@ export const ObjectCalendar: React.FC<ObjectCalendarProps> = ({
             setView(v);
             onViewChange?.(v);
           }}
-          onAddClick={handleCreate}
+          onAddClick={undefined}
+          onEventDrop={onEventDrop ? (event, newStart, newEnd) => {
+            onEventDrop(event.data, newStart, newEnd);
+          } : undefined}
         />
       </div>
       {navigation.isOverlay && (

package/src/__tests__/accessibility.test.tsx

@@ -276,7 +276,7 @@ describe('CalendarView: Screen Reader & Accessibility', () => {
         />
       );
 
-      const newButton = screen.getByText('New');
+      const newButton = screen.getByText('New event');
       expect(newButton).toBeInTheDocument();
       expect(newButton.closest('button')).toBeInTheDocument();
     });
@@ -284,7 +284,7 @@ describe('CalendarView: Screen Reader & Accessibility', () => {
     it('add button is not shown when onAddClick is absent', () => {
       render(<CalendarView currentDate={defaultDate} locale="en-US" />);
 
-      expect(screen.queryByText('New')).not.toBeInTheDocument();
+      expect(screen.queryByText('New event')).not.toBeInTheDocument();
     });
   });
 });

package/src/__tests__/calendar-bugfixes.test.tsx

@@ -0,0 +1,230 @@
+/**
+ * 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.
+ */
+
+/**
+ * Tests for calendar bug fixes:
+ * - Event click always dispatches action (no schema.onEventClick guard)
+ * - i18n integration with useObjectTranslation
+ * - Tooltip (title attribute) on truncated event titles
+ * - Cross-month date visual distinction (opacity)
+ * - Today highlight spacing improvement
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import React from 'react';
+import { CalendarView, type CalendarEvent } from '../CalendarView';
+import { I18nProvider } from '@object-ui/i18n';
+
+// Mock ResizeObserver
+class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+global.ResizeObserver = ResizeObserver;
+
+// Mock PointerEvents for Radix
+if (!global.PointerEvent) {
+  class PointerEvent extends Event {
+    button: number;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+    constructor(type: string, props: any = {}) {
+      super(type, props);
+      this.button = props.button || 0;
+      this.ctrlKey = props.ctrlKey || false;
+      this.metaKey = props.metaKey || false;
+      this.shiftKey = props.shiftKey || false;
+    }
+  }
+  // @ts-expect-error Mocking global PointerEvent
+  global.PointerEvent = PointerEvent as any;
+}
+
+// Mock HTMLElement.offsetParent for Radix Popper
+Object.defineProperty(HTMLElement.prototype, 'offsetParent', {
+  get() {
+    return this.parentElement;
+  },
+});
+
+const defaultDate = new Date(2024, 0, 15); // Jan 15, 2024
+
+const sampleEvents: CalendarEvent[] = [
+  {
+    id: '1',
+    title: 'Design dashboard widget layout and structure',
+    start: new Date(2024, 0, 15, 10, 0),
+    end: new Date(2024, 0, 15, 11, 0),
+    color: '#3b82f6',
+  },
+  {
+    id: '2',
+    title: 'Short Event',
+    start: new Date(2024, 0, 15, 14, 0),
+  },
+];
+
+function renderWithI18n(ui: React.ReactElement, lang = 'en') {
+  return render(
+    <I18nProvider config={{ defaultLanguage: lang, detectBrowserLanguage: false }}>
+      {ui}
+    </I18nProvider>
+  );
+}
+
+describe('Calendar Bug Fixes', () => {
+  describe('event click dispatches action', () => {
+    it('fires onEventClick when event is clicked in month view', () => {
+      const onClick = vi.fn();
+      renderWithI18n(
+        <CalendarView
+          currentDate={defaultDate}
+          events={sampleEvents}
+          view="month"
+          onEventClick={onClick}
+        />
+      );
+      fireEvent.click(screen.getByText('Short Event'));
+      expect(onClick).toHaveBeenCalledTimes(1);
+      expect(onClick).toHaveBeenCalledWith(sampleEvents[1]);
+    });
+  });
+
+  describe('tooltip on truncated event titles', () => {
+    it('renders title attribute on event cards in month view', () => {
+      renderWithI18n(
+        <CalendarView
+          currentDate={defaultDate}
+          events={sampleEvents}
+          view="month"
+        />
+      );
+      const eventEl = screen.getByText('Short Event');
+      expect(eventEl.closest('[title]')).toHaveAttribute('title', 'Short Event');
+    });
+
+    it('renders title attribute with long title in month view', () => {
+      renderWithI18n(
+        <CalendarView
+          currentDate={defaultDate}
+          events={sampleEvents}
+          view="month"
+        />
+      );
+      const eventEl = screen.getByText('Design dashboard widget layout and structure');
+      expect(eventEl.closest('[title]')).toHaveAttribute(
+        'title',
+        'Design dashboard widget layout and structure'
+      );
+    });
+
+    it('renders title attribute on event cards in day view', () => {
+      renderWithI18n(
+        <CalendarView
+          currentDate={defaultDate}
+          events={sampleEvents}
+          view="day"
+        />
+      );
+      const eventEl = screen.getByText('Short Event');
+      expect(eventEl.closest('[title]')).toHaveAttribute('title', 'Short Event');
+    });
+  });
+
+  describe('i18n integration', () => {
+    it('renders labels from i18n when language is en', () => {
+      const onAdd = vi.fn();
+      renderWithI18n(
+        <CalendarView
+          currentDate={defaultDate}
+          events={[]}
+          onAddClick={onAdd}
+        />,
+        'en'
+      );
+      expect(screen.getByText('Today')).toBeInTheDocument();
+      expect(screen.getByText('New event')).toBeInTheDocument();
+    });
+
+    it('renders labels from i18n when language is zh', () => {
+      const onAdd = vi.fn();
+      renderWithI18n(
+        <CalendarView
+          currentDate={defaultDate}
+          events={[]}
+          onAddClick={onAdd}
+        />,
+        'zh'
+      );
+      expect(screen.getByText('今天')).toBeInTheDocument();
+      expect(screen.getByText('新建事件')).toBeInTheDocument();
+    });
+
+    it('renders locale-aware weekday headers for zh', () => {
+      renderWithI18n(
+        <CalendarView
+          currentDate={defaultDate}
+          events={[]}
+          view="month"
+        />,
+        'zh'
+      );
+      expect(screen.getByText('周日')).toBeInTheDocument();
+      expect(screen.getByText('周一')).toBeInTheDocument();
+    });
+  });
+
+  describe('cross-month date styling', () => {
+    it('applies opacity to non-current-month dates', () => {
+      const { container } = renderWithI18n(
+        <CalendarView
+          currentDate={new Date(2024, 1, 15)} // Feb 15, 2024
+          events={[]}
+          view="month"
+        />
+      );
+      const gridCells = container.querySelectorAll('[role="gridcell"]');
+      const firstCell = gridCells[0];
+      expect(firstCell.className).toContain('opacity-50');
+    });
+
+    it('does not apply opacity to current-month dates', () => {
+      const { container } = renderWithI18n(
+        <CalendarView
+          currentDate={new Date(2024, 1, 15)} // Feb 15, 2024
+          events={[]}
+          view="month"
+        />
+      );
+      const gridCells = container.querySelectorAll('[role="gridcell"]');
+      // Feb 2024 starts on Thursday, so index 4 (0-based) is Feb 1
+      const feb1Cell = gridCells[4];
+      expect(feb1Cell.className).not.toContain('opacity-50');
+    });
+  });
+
+  describe('today highlight spacing', () => {
+    it('renders today date with mb-2 spacing for better separation', () => {
+      const today = new Date();
+      const { container } = renderWithI18n(
+        <CalendarView
+          currentDate={today}
+          events={[]}
+          view="month"
+        />
+      );
+      const todayEl = container.querySelector('[aria-current="date"]');
+      expect(todayEl).toBeInTheDocument();
+      expect(todayEl?.className).toContain('mb-2');
+    });
+  });
+});

package/src/__tests__/calendar-optimizations.test.tsx

@@ -0,0 +1,178 @@
+/**
+ * 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.
+ *
+ * Tests for CalendarView optimizations:
+ * - Event index (Map-based lookup instead of O(N) per cell)
+ * - Stable default date reference
+ * - HEX color text-white fix
+ * - onEventDrop / locale passthrough from ObjectCalendar
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import React from 'react';
+import { CalendarView, type CalendarEvent } from '../CalendarView';
+
+// Mock @object-ui/components
+vi.mock('@object-ui/components', () => ({
+  cn: (...classes: (string | undefined | boolean)[]) => classes.filter(Boolean).join(' '),
+  Button: ({ children, ...props }: any) => <button {...props}>{children}</button>,
+  Select: ({ children, value, onValueChange }: any) => <div data-testid="select">{children}</div>,
+  SelectContent: ({ children }: any) => <div>{children}</div>,
+  SelectItem: ({ children, value }: any) => <div data-value={value}>{children}</div>,
+  SelectTrigger: ({ children }: any) => <div>{children}</div>,
+  SelectValue: () => <span>Month</span>,
+  Calendar: (props: any) => <div data-testid="calendar-picker">Calendar Picker</div>,
+  Popover: ({ children }: any) => <div>{children}</div>,
+  PopoverContent: ({ children }: any) => <div>{children}</div>,
+  PopoverTrigger: ({ children }: any) => <div>{children}</div>,
+}));
+
+// Mock lucide-react icons
+vi.mock('lucide-react', () => ({
+  ChevronLeftIcon: (props: any) => <svg data-testid="chevron-left" {...props} />,
+  ChevronRightIcon: (props: any) => <svg data-testid="chevron-right" {...props} />,
+  CalendarIcon: (props: any) => <svg data-testid="calendar-icon" {...props} />,
+  PlusIcon: (props: any) => <svg data-testid="plus-icon" {...props} />,
+}));
+
+// Mock ResizeObserver
+class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+global.ResizeObserver = ResizeObserver;
+
+const baseDate = new Date(2024, 0, 15); // Jan 15, 2024
+
+describe('CalendarView optimizations', () => {
+  describe('event index (Map-based lookup)', () => {
+    it('renders single-day events correctly with the new index', () => {
+      const events: CalendarEvent[] = [
+        { id: '1', title: 'Morning Meeting', start: new Date(2024, 0, 15, 9, 0), end: new Date(2024, 0, 15, 10, 0) },
+        { id: '2', title: 'Lunch', start: new Date(2024, 0, 15, 12, 0), end: new Date(2024, 0, 15, 13, 0) },
+      ];
+      render(<CalendarView currentDate={baseDate} events={events} view="month" locale="en-US" />);
+      expect(screen.getByText('Morning Meeting')).toBeInTheDocument();
+      expect(screen.getByText('Lunch')).toBeInTheDocument();
+    });
+
+    it('renders multi-day events on all spanned days', () => {
+      const events: CalendarEvent[] = [
+        {
+          id: 'multi-1',
+          title: 'Conference',
+          start: new Date(2024, 0, 15, 9, 0),
+          end: new Date(2024, 0, 17, 17, 0),
+          allDay: true,
+        },
+      ];
+      const { container } = render(
+        <CalendarView currentDate={baseDate} events={events} view="month" locale="en-US" />
+      );
+      // The multi-day event should appear on Jan 15, 16, and 17 — 3 cells
+      const eventElements = container.querySelectorAll('[role="button"][aria-label="Conference"]');
+      expect(eventElements.length).toBe(3);
+    });
+
+    it('renders events with no end date on their start day only', () => {
+      const events: CalendarEvent[] = [
+        { id: 'no-end', title: 'No End Event', start: new Date(2024, 0, 20, 14, 0) },
+      ];
+      const { container } = render(
+        <CalendarView currentDate={baseDate} events={events} view="month" locale="en-US" />
+      );
+      const eventElements = container.querySelectorAll('[role="button"][aria-label="No End Event"]');
+      expect(eventElements.length).toBe(1);
+    });
+  });
+
+  describe('HEX color text-white fix', () => {
+    it('applies text-white class when event color is a HEX value in month view', () => {
+      const events: CalendarEvent[] = [
+        { id: 'hex-1', title: 'HEX Event', start: new Date(2024, 0, 15), color: '#3b82f6' },
+      ];
+      const { container } = render(
+        <CalendarView currentDate={baseDate} events={events} view="month" locale="en-US" />
+      );
+      const eventEl = container.querySelector('[aria-label="HEX Event"]');
+      expect(eventEl).toBeInTheDocument();
+      expect(eventEl!.className).toContain('text-white');
+      expect((eventEl as HTMLElement).style.backgroundColor).toBe('#3b82f6');
+    });
+
+    it('uses default color class when event color is a Tailwind class', () => {
+      const events: CalendarEvent[] = [
+        { id: 'tw-1', title: 'Tailwind Event', start: new Date(2024, 0, 15), color: 'bg-red-500 text-white' },
+      ];
+      const { container } = render(
+        <CalendarView currentDate={baseDate} events={events} view="month" locale="en-US" />
+      );
+      const eventEl = container.querySelector('[aria-label="Tailwind Event"]');
+      expect(eventEl).toBeInTheDocument();
+      expect(eventEl!.className).toContain('bg-red-500');
+      expect(eventEl!.className).toContain('text-white');
+    });
+
+    it('falls back to DEFAULT_EVENT_COLOR when no color is specified', () => {
+      const events: CalendarEvent[] = [
+        { id: 'no-color', title: 'No Color', start: new Date(2024, 0, 15) },
+      ];
+      const { container } = render(
+        <CalendarView currentDate={baseDate} events={events} view="month" locale="en-US" />
+      );
+      const eventEl = container.querySelector('[aria-label="No Color"]');
+      expect(eventEl).toBeInTheDocument();
+      expect(eventEl!.className).toContain('bg-blue-500');
+      expect(eventEl!.className).toContain('text-white');
+    });
+  });
+
+  describe('stable default date', () => {
+    it('renders without currentDate prop without errors', () => {
+      const { container } = render(<CalendarView events={[]} locale="en-US" />);
+      expect(container).toBeTruthy();
+    });
+
+    it('does not trigger re-render loop when currentDate is not provided', () => {
+      const onNavigate = vi.fn();
+      const { rerender } = render(<CalendarView events={[]} locale="en-US" onNavigate={onNavigate} />);
+      // Re-render the same component — should NOT trigger onNavigate from the effect
+      rerender(<CalendarView events={[]} locale="en-US" onNavigate={onNavigate} />);
+      expect(onNavigate).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('drag-and-drop enablement', () => {
+    it('events are draggable when onEventDrop is provided', () => {
+      const events: CalendarEvent[] = [
+        { id: 'd-1', title: 'Drag Event', start: new Date(2024, 0, 15) },
+      ];
+      const onEventDrop = vi.fn();
+      const { container } = render(
+        <CalendarView currentDate={baseDate} events={events} view="month" onEventDrop={onEventDrop} locale="en-US" />
+      );
+      const eventEl = container.querySelector('[aria-label="Drag Event"]');
+      expect(eventEl).toBeInTheDocument();
+      expect(eventEl!.getAttribute('draggable')).toBe('true');
+    });
+
+    it('events are not draggable when onEventDrop is not provided', () => {
+      const events: CalendarEvent[] = [
+        { id: 'nd-1', title: 'No Drag Event', start: new Date(2024, 0, 15) },
+      ];
+      const { container } = render(
+        <CalendarView currentDate={baseDate} events={events} view="month" locale="en-US" />
+      );
+      const eventEl = container.querySelector('[aria-label="No Drag Event"]');
+      expect(eventEl).toBeInTheDocument();
+      expect(eventEl!.getAttribute('draggable')).toBe('false');
+    });
+  });
+});

package/src/__tests__/view-states.test.tsx

@@ -265,8 +265,8 @@ describe('P3.3 Calendar View States', () => {
           onAddClick={onAdd}
         />
       );
-      // The "New" button should be visible
-      const newButton = screen.getByText('New');
+      // The "New event" button should be visible
+      const newButton = screen.getByText('New event');
       expect(newButton).toBeInTheDocument();
       fireEvent.click(newButton);
       expect(onAdd).toHaveBeenCalledTimes(1);
@@ -280,7 +280,7 @@ describe('P3.3 Calendar View States', () => {
           locale="en-US"
         />
       );
-      expect(screen.queryByText('New')).not.toBeInTheDocument();
+      expect(screen.queryByText('New event')).not.toBeInTheDocument();
     });
 
     it('accepts className prop', () => {

package/src/calendar-view-renderer.tsx

@@ -43,15 +43,10 @@ ComponentRegistry.register('calendar-view',
     }, [schema.data, schema.titleField, schema.startDateField, schema.endDateField, schema.colorField, schema.allDayField]);
 
     const handleEventClick = (event: CalendarEvent) => {
-      if (schema.onEventClick) {
-        // Dispatch configured action
-        // This would use the action runner in a real implementation
-        // For now we just call onAction if provided
-        onAction?.({ 
-          type: 'event-click',
-          payload: event 
-        });
-      }
+      onAction?.({ 
+        type: 'event-click',
+        payload: event 
+      });
     };
     
     const handleAddClick = () => {
@@ -67,7 +62,6 @@ ComponentRegistry.register('calendar-view',
         className={className}
         events={events}
         onEventClick={handleEventClick}
-        onAddClick={handleAddClick}
         // Pass validation or other props
         {...props}
       />

package/src/index.tsx

@@ -24,9 +24,9 @@ export type { CalendarViewProps, CalendarEvent } from './CalendarView';
 import './calendar-view-renderer';
 
 // Register object-calendar component
-export const ObjectCalendarRenderer: React.FC<{ schema: any }> = ({ schema }) => {
-  const { dataSource } = useSchemaContext();
-  return <ObjectCalendar schema={schema} dataSource={dataSource} />;
+export const ObjectCalendarRenderer: React.FC<{ schema: any; [key: string]: any }> = ({ schema, data: _data, loading: _loading, ...props }) => {
+  const { dataSource } = useSchemaContext() || {};
+  return <ObjectCalendar schema={schema} dataSource={dataSource} {...props} />;
 };
 
 ComponentRegistry.register('object-calendar', ObjectCalendarRenderer, {