@object-ui/fields 3.3.2 → 4.0.1

package/dist/packages/fields/src/index.d.ts

@@ -201,6 +201,8 @@ export * from './widgets/LookupField';
 export * from './widgets/RecordPickerDialog';
 export * from './widgets/FileField';
 export * from './widgets/ImageField';
+export { ImageCropperDialog } from './widgets/ImageCropperDialog';
+export type { ImageCropperDialogProps } from './widgets/ImageCropperDialog';
 export * from './widgets/LocationField';
 export * from './widgets/FormulaField';
 export * from './widgets/SummaryField';

package/dist/packages/fields/src/lookup-depends-on.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/packages/fields/src/widgets/ImageCropperDialog.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+export interface ImageCropperDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Source image URL or data URL */
+    src: string;
+    /** MIME type for the cropped output. Defaults to image/png. */
+    outputType?: string;
+    /** Suggested filename (passed back via onConfirm). Defaults to "cropped.png". */
+    outputName?: string;
+    /** Called when the user confirms the crop. */
+    onConfirm: (blob: Blob, name: string) => void;
+}
+export declare const ImageCropperDialog: React.FC<ImageCropperDialogProps>;

package/dist/packages/fields/src/widgets/TextAreaField.d.ts

@@ -1,6 +1,11 @@
 import { FieldWidgetProps } from './types';
 /**
  * TextAreaField - Multi-line text input widget
- * Supports configurable row count and preserves whitespace in readonly mode
+ * Supports configurable row count and preserves whitespace in readonly mode.
+ *
+ * Mobile UX (round 3): when the host form passes `mobileFullscreen` (or the
+ * field schema sets `mobile_fullscreen: true`), an "expand" affordance opens
+ * a fullscreen edit dialog — much easier on phones than tapping a 4-row
+ * textarea trapped between other fields.
  */
 export declare function TextAreaField({ value, onChange, field, readonly, errorMessage, ...props }: FieldWidgetProps<string>): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/fields",
-  "version": "3.3.2",
+  "version": "4.0.1",
   "description": "Field renderers and registry for Object UI",
   "license": "MIT",
   "type": "module",
@@ -25,13 +25,14 @@
   ],
   "dependencies": {
     "clsx": "^2.1.1",
-    "lucide-react": "^1.8.0",
+    "lucide-react": "^1.14.0",
     "tailwind-merge": "^3.5.0",
-    "@object-ui/components": "3.3.2",
-    "@object-ui/core": "3.3.2",
-    "@object-ui/i18n": "3.3.2",
-    "@object-ui/react": "3.3.2",
-    "@object-ui/types": "3.3.2"
+    "@object-ui/components": "4.0.1",
+    "@object-ui/core": "4.0.1",
+    "@object-ui/i18n": "4.0.1",
+    "@object-ui/providers": "4.0.1",
+    "@object-ui/react": "4.0.1",
+    "@object-ui/types": "4.0.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -43,7 +44,7 @@
     "@vitejs/plugin-react": "^6.0.1",
     "typescript": "^6.0.3",
     "vite": "^8.0.10",
-    "vite-plugin-dts": "^4.5.4"
+    "vite-plugin-dts": "^5.0.0"
   },
   "publishConfig": {
     "access": "public"

package/src/__tests__/cell-renderers.test.tsx

@@ -146,7 +146,7 @@ describe('SelectCellRenderer', () => {
       />
     );
     expect(screen.getByText('In Progress')).toBeInTheDocument();
-    expect(container.querySelector('[class*="bg-blue-100"]')).toBeInTheDocument();
+    expect(container.querySelector('[class*="bg-blue-50"]')).toBeInTheDocument();
   });
 
   it('should fall back to a deterministic palette color when no color configured and no semantic match', () => {
@@ -166,11 +166,11 @@ describe('SelectCellRenderer', () => {
     );
     expect(screen.getByText('Unknown')).toBeInTheDocument();
     const palette = ['blue', 'green', 'purple', 'orange', 'pink', 'indigo', 'yellow', 'red'];
-    const matched = palette.some((c) => container.querySelector(`[class*="bg-${c}-100"]`));
+    const matched = palette.some((c) => container.querySelector(`[class*="bg-${c}-50"]`));
     expect(matched).toBe(true);
 
     // Same value → same color across renders (deterministic).
-    const firstClass = container.querySelector('[data-slot="badge"], [class*="bg-"][class*="-100"]')?.className;
+    const firstClass = container.querySelector('[data-slot="badge"], [class*="bg-"][class*="-50"]')?.className;
     rerender(
       <SelectCellRenderer
         value="Unknown"
@@ -181,7 +181,7 @@ describe('SelectCellRenderer', () => {
         } as any}
       />
     );
-    const secondClass = container.querySelector('[data-slot="badge"], [class*="bg-"][class*="-100"]')?.className;
+    const secondClass = container.querySelector('[data-slot="badge"], [class*="bg-"][class*="-50"]')?.className;
     expect(secondClass).toBe(firstClass);
   });
 
@@ -193,7 +193,7 @@ describe('SelectCellRenderer', () => {
       />
     );
     expect(screen.getByText('Critical')).toBeInTheDocument();
-    expect(container.querySelector('[class*="bg-red-100"]')).toBeInTheDocument();
+    expect(container.querySelector('[class*="bg-red-50"]')).toBeInTheDocument();
   });
 
   it('should auto-detect priority semantic colors (High → orange)', () => {
@@ -203,7 +203,7 @@ describe('SelectCellRenderer', () => {
         field={{ name: 'priority', type: 'select', options: [] } as any}
       />
     );
-    expect(container.querySelector('[class*="bg-orange-100"]')).toBeInTheDocument();
+    expect(container.querySelector('[class*="bg-orange-50"]')).toBeInTheDocument();
   });
 
   it('should auto-detect priority semantic colors (Medium → yellow)', () => {
@@ -213,7 +213,7 @@ describe('SelectCellRenderer', () => {
         field={{ name: 'priority', type: 'select', options: [] } as any}
       />
     );
-    expect(container.querySelector('[class*="bg-yellow-100"]')).toBeInTheDocument();
+    expect(container.querySelector('[class*="bg-yellow-50"]')).toBeInTheDocument();
   });
 
   it('should auto-detect priority semantic colors (Low → gray)', () => {
@@ -223,7 +223,7 @@ describe('SelectCellRenderer', () => {
         field={{ name: 'priority', type: 'select', options: [] } as any}
       />
     );
-    expect(container.querySelector('[class*="bg-gray-100"]')).toBeInTheDocument();
+    expect(container.querySelector('[class*="bg-gray-50"]')).toBeInTheDocument();
   });
 
   it('should auto-detect status semantic colors (Paid → green)', () => {
@@ -233,7 +233,7 @@ describe('SelectCellRenderer', () => {
         field={{ name: 'status', type: 'select', options: [] } as any}
       />
     );
-    expect(container.querySelector('[class*="bg-green-100"]')).toBeInTheDocument();
+    expect(container.querySelector('[class*="bg-green-50"]')).toBeInTheDocument();
   });
 
   it('should auto-detect status semantic colors (Pending → yellow)', () => {
@@ -243,7 +243,7 @@ describe('SelectCellRenderer', () => {
         field={{ name: 'status', type: 'select', options: [] } as any}
       />
     );
-    expect(container.querySelector('[class*="bg-yellow-100"]')).toBeInTheDocument();
+    expect(container.querySelector('[class*="bg-yellow-50"]')).toBeInTheDocument();
   });
 
   it('should auto-detect status semantic colors (Shipped → blue)', () => {
@@ -253,7 +253,7 @@ describe('SelectCellRenderer', () => {
         field={{ name: 'status', type: 'select', options: [] } as any}
       />
     );
-    expect(container.querySelector('[class*="bg-blue-100"]')).toBeInTheDocument();
+    expect(container.querySelector('[class*="bg-blue-50"]')).toBeInTheDocument();
   });
 
   it('should auto-detect status semantic colors (Draft → gray)', () => {
@@ -263,7 +263,7 @@ describe('SelectCellRenderer', () => {
         field={{ name: 'status', type: 'select', options: [] } as any}
       />
     );
-    expect(container.querySelector('[class*="bg-gray-100"]')).toBeInTheDocument();
+    expect(container.querySelector('[class*="bg-gray-50"]')).toBeInTheDocument();
   });
 
   it('should auto-detect status semantic colors (Cancelled → red)', () => {
@@ -273,7 +273,7 @@ describe('SelectCellRenderer', () => {
         field={{ name: 'status', type: 'select', options: [] } as any}
       />
     );
-    expect(container.querySelector('[class*="bg-red-100"]')).toBeInTheDocument();
+    expect(container.querySelector('[class*="bg-red-50"]')).toBeInTheDocument();
   });
 
   it('should auto-detect status semantic colors (Delivered → purple)', () => {
@@ -283,7 +283,7 @@ describe('SelectCellRenderer', () => {
         field={{ name: 'status', type: 'select', options: [] } as any}
       />
     );
-    expect(container.querySelector('[class*="bg-purple-100"]')).toBeInTheDocument();
+    expect(container.querySelector('[class*="bg-purple-50"]')).toBeInTheDocument();
   });
 
   it('should auto-detect status semantic colors with snake_case (in_progress → blue)', () => {
@@ -293,7 +293,7 @@ describe('SelectCellRenderer', () => {
         field={{ name: 'status', type: 'select', options: [] } as any}
       />
     );
-    expect(container.querySelector('[class*="bg-blue-100"]')).toBeInTheDocument();
+    expect(container.querySelector('[class*="bg-blue-50"]')).toBeInTheDocument();
   });
 
   it('should auto-detect status semantic colors with hyphen (in-progress → blue)', () => {
@@ -303,7 +303,7 @@ describe('SelectCellRenderer', () => {
         field={{ name: 'status', type: 'select', options: [] } as any}
       />
     );
-    expect(container.querySelector('[class*="bg-blue-100"]')).toBeInTheDocument();
+    expect(container.querySelector('[class*="bg-blue-50"]')).toBeInTheDocument();
   });
 
   it('should auto-detect status semantic colors with spaces (in progress → blue)', () => {
@@ -313,7 +313,7 @@ describe('SelectCellRenderer', () => {
         field={{ name: 'status', type: 'select', options: [] } as any}
       />
     );
-    expect(container.querySelector('[class*="bg-blue-100"]')).toBeInTheDocument();
+    expect(container.querySelector('[class*="bg-blue-50"]')).toBeInTheDocument();
   });
 
   it('should render dash for null/empty value', () => {
@@ -356,7 +356,7 @@ describe('SelectCellRenderer', () => {
       />
     );
     // Explicit purple should override auto-detected orange
-    expect(container.querySelector('[class*="bg-purple-100"]')).toBeInTheDocument();
+    expect(container.querySelector('[class*="bg-purple-50"]')).toBeInTheDocument();
   });
 });
 

package/src/complex-widgets.test.tsx

@@ -566,5 +566,51 @@ describe('Complex & Relationship Widgets', () => {
              // Check for remove button existence implies it rendered correctly
              // Typically icon X or Trash.
         });
+
+        it('renders the camera button when capture is explicitly enabled', () => {
+            render(
+                <FileField
+                    {...baseProps}
+                    field={{ ...baseProps.field, capture: 'environment' } as any}
+                    value={null}
+                />,
+            );
+            expect(screen.getByTestId('file-field-camera-button')).toBeInTheDocument();
+            expect(screen.getByText(/Take photo/i)).toBeInTheDocument();
+            const cameraInput = screen.getByTestId('file-field-camera-input') as HTMLInputElement;
+            expect(cameraInput).toHaveAttribute('capture', 'environment');
+            expect(cameraInput).toHaveAttribute('accept', 'image/*');
+        });
+
+        it('uses "Take selfie" label when capture is "user"', () => {
+            render(
+                <FileField
+                    {...baseProps}
+                    field={{ ...baseProps.field, capture: 'user' } as any}
+                    value={null}
+                />,
+            );
+            expect(screen.getByText(/Take selfie/i)).toBeInTheDocument();
+            const cameraInput = screen.getByTestId('file-field-camera-input') as HTMLInputElement;
+            expect(cameraInput).toHaveAttribute('capture', 'user');
+        });
+
+        it('does not render the camera button when capture is explicitly false', () => {
+            render(
+                <FileField
+                    {...baseProps}
+                    field={{ ...baseProps.field, capture: false } as any}
+                    value={null}
+                />,
+            );
+            expect(screen.queryByTestId('file-field-camera-button')).not.toBeInTheDocument();
+            expect(screen.queryByTestId('file-field-camera-input')).not.toBeInTheDocument();
+        });
+
+        it('does not render the camera button on a non-touch device by default', () => {
+            // jsdom defaults to maxTouchPoints=0 and a non-mobile UA, so capture is auto-disabled.
+            render(<FileField {...baseProps} value={null} />);
+            expect(screen.queryByTestId('file-field-camera-button')).not.toBeInTheDocument();
+        });
     });
 });

package/src/index.tsx

@@ -366,15 +366,21 @@ export function DateCellRenderer({ value, field }: CellRendererProps): React.Rea
   const dateField = field as any;
   const style = dateField.format || 'relative';
   const formatted = formatDate(safe as string | Date, style);
-  
-  // Determine if date is overdue (in the past)
+
+  // Determine if date is overdue (in the past) — but only color it red when the
+  // field is *semantically* a due/deadline. A plain "start_date" or "created_at"
+  // in the past should not render in red.
   const date = typeof safe === 'string' ? new Date(safe) : safe;
   const isValidDate = date instanceof Date && !isNaN(date.getTime());
   const startOfToday = new Date();
   startOfToday.setHours(0, 0, 0, 0);
-  const isOverdue = isValidDate && date < startOfToday;
+  const fieldName = String(dateField?.name || dateField?.accessorKey || dateField?.key || '').toLowerCase();
+  const dueLike =
+    dateField?.dueLike === true ||
+    /(^|_)(due|deadline|expires?|expiry|expiration|expected_close|target_close|sla|return_by|renewal|next_action)(_|$)/.test(fieldName);
+  const isOverdue = dueLike && isValidDate && date < startOfToday;
   const isoString = isValidDate ? date.toISOString() : String(safe);
-  
+
   return (
     <span
       className={`tabular-nums${isOverdue ? ' text-red-600' : ''}`}
@@ -452,16 +458,21 @@ const SEMANTIC_COLOR_MAP: Record<string, string> = {
 };
 
 // Color to Tailwind class mapping for custom Badge styling
+// Color → Tailwind class mapping for status-style badges.
+// Uses the modern "soft pill" pattern (Tailwind UI style): -50 background,
+// -700 text, hairline -200 border. Dark mode mirrors with -950/40 surface
+// and -300 text. This keeps status fields readable without the heavy,
+// candy-colored look of the older -100/-300/-800 combination.
 const BADGE_COLOR_MAP: Record<string, string> = {
-  gray: 'bg-gray-100 text-gray-800 border-gray-300',
-  red: 'bg-red-100 text-red-800 border-red-300',
-  orange: 'bg-orange-100 text-orange-800 border-orange-300',
-  yellow: 'bg-yellow-100 text-yellow-800 border-yellow-300',
-  green: 'bg-green-100 text-green-800 border-green-300',
-  blue: 'bg-blue-100 text-blue-800 border-blue-300',
-  indigo: 'bg-indigo-100 text-indigo-800 border-indigo-300',
-  purple: 'bg-purple-100 text-purple-800 border-purple-300',
-  pink: 'bg-pink-100 text-pink-800 border-pink-300',
+  gray: 'bg-gray-50 text-gray-700 border-gray-200 dark:bg-gray-800/50 dark:text-gray-200 dark:border-gray-700/60',
+  red: 'bg-red-50 text-red-700 border-red-200 dark:bg-red-950/40 dark:text-red-300 dark:border-red-900/60',
+  orange: 'bg-orange-50 text-orange-700 border-orange-200 dark:bg-orange-950/40 dark:text-orange-300 dark:border-orange-900/60',
+  yellow: 'bg-yellow-50 text-yellow-800 border-yellow-200 dark:bg-yellow-950/40 dark:text-yellow-300 dark:border-yellow-900/60',
+  green: 'bg-green-50 text-green-700 border-green-200 dark:bg-green-950/40 dark:text-green-300 dark:border-green-900/60',
+  blue: 'bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-950/40 dark:text-blue-300 dark:border-blue-900/60',
+  indigo: 'bg-indigo-50 text-indigo-700 border-indigo-200 dark:bg-indigo-950/40 dark:text-indigo-300 dark:border-indigo-900/60',
+  purple: 'bg-purple-50 text-purple-700 border-purple-200 dark:bg-purple-950/40 dark:text-purple-300 dark:border-purple-900/60',
+  pink: 'bg-pink-50 text-pink-700 border-pink-200 dark:bg-pink-950/40 dark:text-pink-300 dark:border-pink-900/60',
 };
 
 // Color palette used by the deterministic fallback when no schema/semantic
@@ -746,7 +757,7 @@ export function LookupCellRenderer({ value, field }: CellRendererProps): React.R
           return (
             <span
               key={idx}
-              className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800"
+              className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-50 text-gray-700 dark:bg-gray-800/50 dark:text-gray-200"
             >
               {label}
             </span>
@@ -1361,6 +1372,8 @@ export * from './widgets/LookupField';
 export * from './widgets/RecordPickerDialog';
 export * from './widgets/FileField';
 export * from './widgets/ImageField';
+export { ImageCropperDialog } from './widgets/ImageCropperDialog';
+export type { ImageCropperDialogProps } from './widgets/ImageCropperDialog';
 export * from './widgets/LocationField';
 export * from './widgets/FormulaField';
 export * from './widgets/SummaryField';

package/src/lookup-depends-on.test.tsx

@@ -0,0 +1,130 @@
+/**
+ * Tests for the dependent-lookups feature: `field.depends_on` should add
+ * an `$filter` chain when querying, gate the trigger when dependencies are
+ * empty, and re-fetch when the dependency value changes.
+ */
+import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import React, { useState } from 'react';
+import { LookupField } from './widgets/LookupField';
+
+const mockDataSource = {
+  find: vi.fn(),
+  findOne: vi.fn(),
+  create: vi.fn(),
+  update: vi.fn(),
+  delete: vi.fn(),
+};
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  mockDataSource.find.mockResolvedValue({ data: [], total: 0 });
+});
+
+describe('LookupField — depends_on', () => {
+  const baseField: any = {
+    name: 'city',
+    type: 'lookup',
+    reference: 'cities',
+    display_field: 'name',
+    id_field: 'id',
+    depends_on: ['country'],
+  };
+
+  it('disables the trigger when a dependency value is missing', () => {
+    render(
+      <LookupField
+        field={baseField}
+        value={null}
+        onChange={vi.fn()}
+        readonly={false}
+        dataSource={mockDataSource as any}
+        dependentValues={{}}
+      />,
+    );
+    const trigger = screen.getByTestId('lookup-trigger-gated');
+    expect(trigger).toBeDisabled();
+    expect(trigger).toHaveTextContent(/Select country first/i);
+  });
+
+  it('enables the trigger and includes a filter chain once the dependency is set', async () => {
+    render(
+      <LookupField
+        field={baseField}
+        value={null}
+        onChange={vi.fn()}
+        readonly={false}
+        dataSource={mockDataSource as any}
+        dependentValues={{ country: 'US' }}
+      />,
+    );
+    // Trigger is enabled (no gated test id).
+    expect(screen.queryByTestId('lookup-trigger-gated')).not.toBeInTheDocument();
+
+    // Open the popover to fire fetch.
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: /select|search/i }));
+    });
+
+    await waitFor(() => expect(mockDataSource.find).toHaveBeenCalled());
+    const [, params] = mockDataSource.find.mock.calls[0];
+    expect(params.$filter).toEqual({ country: 'US' });
+  });
+
+  it('supports the explicit { field, param } shape', async () => {
+    const explicitField: any = {
+      ...baseField,
+      depends_on: [{ field: 'country', param: 'country_id' }],
+    };
+    render(
+      <LookupField
+        field={explicitField}
+        value={null}
+        onChange={vi.fn()}
+        readonly={false}
+        dataSource={mockDataSource as any}
+        dependentValues={{ country: 42 }}
+      />,
+    );
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: /select|search/i }));
+    });
+    await waitFor(() => expect(mockDataSource.find).toHaveBeenCalled());
+    const [, params] = mockDataSource.find.mock.calls[0];
+    // numeric value, no quoting
+    expect(params.$filter).toEqual({ country_id: 42 });
+  });
+
+  it('re-fetches when the dependency value changes while the picker is open', async () => {
+    function Harness() {
+      const [country, setCountry] = useState('US');
+      return (
+        <div>
+          <button data-testid="set-uk" onClick={() => setCountry('UK')}>UK</button>
+          <LookupField
+            field={baseField}
+            value={null}
+            onChange={vi.fn()}
+            readonly={false}
+            dataSource={mockDataSource as any}
+            dependentValues={{ country }}
+          />
+        </div>
+      );
+    }
+    render(<Harness />);
+    // Open the popover.
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: /select|search/i }));
+    });
+    await waitFor(() => expect(mockDataSource.find).toHaveBeenCalledTimes(1));
+
+    // Change the dependency — should re-fetch.
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('set-uk'));
+    });
+    await waitFor(() => expect(mockDataSource.find).toHaveBeenCalledTimes(2));
+    const [, paramsAfter] = mockDataSource.find.mock.calls[1];
+    expect(paramsAfter.$filter).toEqual({ country: 'UK' });
+  });
+});

package/src/remaining-widgets.test.tsx

@@ -133,7 +133,20 @@ describe('Remaining Field Widgets', () => {
       expect(imgs).toHaveLength(2);
       expect(imgs[0]).toHaveAttribute('src', 'http://example.com/1.jpg');
     });
-    
+
+    it('renders a Crop button per image when crop is enabled (default)', () => {
+      render(<ImageField {...baseProps} value={images} field={{ ...baseProps.field, multiple: true } as any} />);
+      // Two crop buttons (one per image) with stable test ids — opacity is hover-controlled
+      // but the buttons are still present in the DOM for a11y/keyboard users.
+      expect(screen.getByTestId('image-field-crop-0')).toBeInTheDocument();
+      expect(screen.getByTestId('image-field-crop-1')).toBeInTheDocument();
+    });
+
+    it('hides the Crop button when field.crop = false', () => {
+      render(<ImageField {...baseProps} value={images} field={{ ...baseProps.field, multiple: true, crop: false } as any} />);
+      expect(screen.queryByTestId('image-field-crop-0')).not.toBeInTheDocument();
+    });
+
     // Complex interaction omitted for brevity, focusing on render contracts
   });