@object-ui/components 3.1.0 → 3.1.1

package/dist/src/custom/filter-builder.d.ts

@@ -9,7 +9,7 @@ export interface FilterCondition {
     id: string;
     field: string;
     operator: string;
-    value: string | number | boolean;
+    value: string | number | boolean | (string | number | boolean)[];
 }
 export interface FilterGroup {
     id: string;

package/dist/src/renderers/action/action-bar.d.ts

@@ -7,6 +7,8 @@ export interface ActionBarSchema {
     location?: ActionLocation;
     /** Maximum visible inline actions before overflow into "More" menu (default: 3) */
     maxVisible?: number;
+    /** Maximum visible inline actions on mobile devices (default: 1). Desktop uses maxVisible instead. */
+    mobileMaxVisible?: number;
     /** Visibility condition expression */
     visible?: string;
     /** Layout direction */

package/dist/src/renderers/action/action-button.d.ts

@@ -3,6 +3,7 @@ export interface ActionButtonProps {
     schema: ActionSchema & {
         type: string;
         className?: string;
+        actionType?: string;
     };
     className?: string;
     /** Override context for this specific action */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/components",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "type": "module",
   "license": "MIT",
   "description": "Standard UI component library for Object UI, built with Shadcn UI + Tailwind CSS",
@@ -69,9 +69,9 @@
     "tailwind-merge": "^3.5.0",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^1.1.2",
-    "@object-ui/core": "3.1.0",
-    "@object-ui/react": "3.1.0",
-    "@object-ui/types": "3.1.0"
+    "@object-ui/core": "3.1.1",
+    "@object-ui/react": "3.1.1",
+    "@object-ui/types": "3.1.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/__tests__/action-bar.test.tsx

@@ -94,6 +94,40 @@ describe('ActionBar (action:bar)', () => {
       expect(container.textContent).toContain('Action 1');
       expect(container.textContent).toContain('Action 2');
     });
+
+    it('deduplicates actions by name', () => {
+      const { container } = renderComponent({
+        type: 'action:bar',
+        actions: [
+          { name: 'change_status', label: 'Change Status', type: 'script', component: 'action:button' },
+          { name: 'assign_user', label: 'Assign User', type: 'script', component: 'action:button' },
+          { name: 'change_status', label: 'Change Status', type: 'script', component: 'action:button' },
+        ],
+      });
+      const toolbar = container.querySelector('[role="toolbar"]');
+      expect(toolbar).toBeTruthy();
+      // Should only render 2 actions (duplicates removed)
+      expect(toolbar!.children.length).toBe(2);
+      expect(container.textContent).toContain('Change Status');
+      expect(container.textContent).toContain('Assign User');
+    });
+
+    it('deduplicates actions after location filtering', () => {
+      const { container } = renderComponent({
+        type: 'action:bar',
+        location: 'record_header',
+        actions: [
+          { name: 'change_status', label: 'Change Status', type: 'script', locations: ['record_header'] },
+          { name: 'assign_user', label: 'Assign User', type: 'script', locations: ['record_header'] },
+          { name: 'change_status', label: 'Change Status', type: 'script', locations: ['record_header', 'record_more'] },
+          { name: 'assign_user', label: 'Assign User', type: 'script', locations: ['record_header'] },
+        ],
+      });
+      const toolbar = container.querySelector('[role="toolbar"]');
+      expect(toolbar).toBeTruthy();
+      // Should only render 2 unique actions
+      expect(toolbar!.children.length).toBe(2);
+    });
   });
 
   describe('overflow', () => {

package/src/__tests__/filter-builder.test.tsx

@@ -0,0 +1,409 @@
+/**
+ * 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, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { FilterBuilder } from '../custom/filter-builder';
+
+// Mock crypto.randomUUID for deterministic test IDs
+let uuidCounter = 0;
+beforeEach(() => {
+  uuidCounter = 0;
+  vi.spyOn(crypto, 'randomUUID').mockImplementation(
+    () => `test-uuid-${++uuidCounter}` as `${string}-${string}-${string}-${string}-${string}`,
+  );
+});
+
+const selectFields = [
+  {
+    value: 'status',
+    label: 'Status',
+    type: 'select',
+    options: [
+      { value: 'active', label: 'Active' },
+      { value: 'inactive', label: 'Inactive' },
+      { value: 'pending', label: 'Pending' },
+    ],
+  },
+  {
+    value: 'name',
+    label: 'Name',
+    type: 'text',
+  },
+];
+
+const lookupFields = [
+  {
+    value: 'account',
+    label: 'Account',
+    type: 'lookup',
+    options: [
+      { value: 'acme', label: 'Acme Corp' },
+      { value: 'globex', label: 'Globex' },
+      { value: 'soylent', label: 'Soylent Corp' },
+    ],
+  },
+];
+
+describe('FilterBuilder', () => {
+  describe('lookup field type', () => {
+    it('renders without error for lookup fields', () => {
+      const onChange = vi.fn();
+      const { container } = render(
+        <FilterBuilder
+          fields={lookupFields}
+          value={{
+            id: 'root',
+            logic: 'and',
+            conditions: [
+              { id: 'c1', field: 'account', operator: 'equals', value: '' },
+            ],
+          }}
+          onChange={onChange}
+        />,
+      );
+
+      // Should render the filter condition row
+      expect(container.querySelector('.space-y-3')).toBeInTheDocument();
+    });
+
+    it('renders multi-select checkboxes for lookup field with "in" operator', () => {
+      const onChange = vi.fn();
+      render(
+        <FilterBuilder
+          fields={lookupFields}
+          value={{
+            id: 'root',
+            logic: 'and',
+            conditions: [
+              { id: 'c1', field: 'account', operator: 'in', value: [] },
+            ],
+          }}
+          onChange={onChange}
+        />,
+      );
+
+      // Should render checkboxes for lookup options
+      const checkboxes = screen.getAllByRole('checkbox');
+      expect(checkboxes.length).toBe(3);
+      expect(screen.getByText('Acme Corp')).toBeInTheDocument();
+      expect(screen.getByText('Globex')).toBeInTheDocument();
+      expect(screen.getByText('Soylent Corp')).toBeInTheDocument();
+    });
+  });
+
+  describe('multi-select with in/notIn operator', () => {
+    it('renders checkbox list for select field with "in" operator', () => {
+      const onChange = vi.fn();
+      render(
+        <FilterBuilder
+          fields={selectFields}
+          value={{
+            id: 'root',
+            logic: 'and',
+            conditions: [
+              { id: 'c1', field: 'status', operator: 'in', value: [] },
+            ],
+          }}
+          onChange={onChange}
+        />,
+      );
+
+      // Should render checkboxes for all options
+      const checkboxes = screen.getAllByRole('checkbox');
+      expect(checkboxes.length).toBe(3);
+      expect(screen.getByText('Active')).toBeInTheDocument();
+      expect(screen.getByText('Inactive')).toBeInTheDocument();
+      expect(screen.getByText('Pending')).toBeInTheDocument();
+    });
+
+    it('checks selected items in multi-select', () => {
+      const onChange = vi.fn();
+      render(
+        <FilterBuilder
+          fields={selectFields}
+          value={{
+            id: 'root',
+            logic: 'and',
+            conditions: [
+              { id: 'c1', field: 'status', operator: 'in', value: ['active', 'pending'] },
+            ],
+          }}
+          onChange={onChange}
+        />,
+      );
+
+      const checkboxes = screen.getAllByRole('checkbox') as HTMLInputElement[];
+      // Active and Pending should be checked
+      expect(checkboxes[0]).toBeChecked(); // Active
+      expect(checkboxes[1]).not.toBeChecked(); // Inactive
+      expect(checkboxes[2]).toBeChecked(); // Pending
+    });
+
+    it('adds value when checkbox is checked', () => {
+      const onChange = vi.fn();
+      render(
+        <FilterBuilder
+          fields={selectFields}
+          value={{
+            id: 'root',
+            logic: 'and',
+            conditions: [
+              { id: 'c1', field: 'status', operator: 'in', value: ['active'] },
+            ],
+          }}
+          onChange={onChange}
+        />,
+      );
+
+      // Click the unchecked Inactive checkbox
+      const checkboxes = screen.getAllByRole('checkbox');
+      fireEvent.click(checkboxes[1]); // Inactive
+
+      expect(onChange).toHaveBeenCalled();
+      const lastCall = onChange.mock.calls[onChange.mock.calls.length - 1][0];
+      const condition = lastCall.conditions[0];
+      expect(condition.value).toEqual(['active', 'inactive']);
+    });
+
+    it('removes value when checkbox is unchecked', () => {
+      const onChange = vi.fn();
+      render(
+        <FilterBuilder
+          fields={selectFields}
+          value={{
+            id: 'root',
+            logic: 'and',
+            conditions: [
+              { id: 'c1', field: 'status', operator: 'in', value: ['active', 'inactive'] },
+            ],
+          }}
+          onChange={onChange}
+        />,
+      );
+
+      // Click the checked Active checkbox
+      const checkboxes = screen.getAllByRole('checkbox');
+      fireEvent.click(checkboxes[0]); // Active
+
+      expect(onChange).toHaveBeenCalled();
+      const lastCall = onChange.mock.calls[onChange.mock.calls.length - 1][0];
+      const condition = lastCall.conditions[0];
+      expect(condition.value).toEqual(['inactive']);
+    });
+
+    it('renders checkbox list for notIn operator', () => {
+      const onChange = vi.fn();
+      render(
+        <FilterBuilder
+          fields={selectFields}
+          value={{
+            id: 'root',
+            logic: 'and',
+            conditions: [
+              { id: 'c1', field: 'status', operator: 'notIn', value: [] },
+            ],
+          }}
+          onChange={onChange}
+        />,
+      );
+
+      const checkboxes = screen.getAllByRole('checkbox');
+      expect(checkboxes.length).toBe(3);
+    });
+
+    it('does not render checkboxes for equals operator (single select)', () => {
+      const onChange = vi.fn();
+      render(
+        <FilterBuilder
+          fields={selectFields}
+          value={{
+            id: 'root',
+            logic: 'and',
+            conditions: [
+              { id: 'c1', field: 'status', operator: 'equals', value: '' },
+            ],
+          }}
+          onChange={onChange}
+        />,
+      );
+
+      // Should NOT render checkboxes (single select via Select component)
+      expect(screen.queryAllByRole('checkbox').length).toBe(0);
+    });
+  });
+
+  describe('currency/percent/rating fields use number input', () => {
+    const numericFields = [
+      { value: 'amount', label: 'Amount', type: 'currency' },
+      { value: 'rate', label: 'Rate', type: 'percent' },
+      { value: 'score', label: 'Score', type: 'rating' },
+    ];
+
+    it('renders number input for currency field', () => {
+      const onChange = vi.fn();
+      render(
+        <FilterBuilder
+          fields={numericFields}
+          value={{
+            id: 'root',
+            logic: 'and',
+            conditions: [
+              { id: 'c1', field: 'amount', operator: 'equals', value: '' },
+            ],
+          }}
+          onChange={onChange}
+        />,
+      );
+
+      const input = screen.getByPlaceholderText('Value') as HTMLInputElement;
+      expect(input.type).toBe('number');
+    });
+
+    it('renders number input for percent field', () => {
+      const onChange = vi.fn();
+      render(
+        <FilterBuilder
+          fields={numericFields}
+          value={{
+            id: 'root',
+            logic: 'and',
+            conditions: [
+              { id: 'c1', field: 'rate', operator: 'equals', value: '' },
+            ],
+          }}
+          onChange={onChange}
+        />,
+      );
+
+      const input = screen.getByPlaceholderText('Value') as HTMLInputElement;
+      expect(input.type).toBe('number');
+    });
+  });
+
+  describe('datetime/time fields use appropriate input types', () => {
+    const dateTimeFields = [
+      { value: 'created_at', label: 'Created At', type: 'datetime' },
+      { value: 'start_time', label: 'Start Time', type: 'time' },
+    ];
+
+    it('renders datetime-local input for datetime field', () => {
+      const onChange = vi.fn();
+      render(
+        <FilterBuilder
+          fields={dateTimeFields}
+          value={{
+            id: 'root',
+            logic: 'and',
+            conditions: [
+              { id: 'c1', field: 'created_at', operator: 'equals', value: '' },
+            ],
+          }}
+          onChange={onChange}
+        />,
+      );
+
+      const input = screen.getByPlaceholderText('Value') as HTMLInputElement;
+      expect(input.type).toBe('datetime-local');
+    });
+
+    it('renders time input for time field', () => {
+      const onChange = vi.fn();
+      render(
+        <FilterBuilder
+          fields={dateTimeFields}
+          value={{
+            id: 'root',
+            logic: 'and',
+            conditions: [
+              { id: 'c1', field: 'start_time', operator: 'equals', value: '' },
+            ],
+          }}
+          onChange={onChange}
+        />,
+      );
+
+      const input = screen.getByPlaceholderText('Value') as HTMLInputElement;
+      expect(input.type).toBe('time');
+    });
+  });
+
+  describe('status field uses select operators and dropdown', () => {
+    const statusFields = [
+      {
+        value: 'pipeline',
+        label: 'Pipeline Stage',
+        type: 'status',
+        options: [
+          { value: 'lead', label: 'Lead' },
+          { value: 'qualified', label: 'Qualified' },
+          { value: 'won', label: 'Won' },
+        ],
+      },
+    ];
+
+    it('renders multi-select checkboxes for status field with "in" operator', () => {
+      const onChange = vi.fn();
+      render(
+        <FilterBuilder
+          fields={statusFields}
+          value={{
+            id: 'root',
+            logic: 'and',
+            conditions: [
+              { id: 'c1', field: 'pipeline', operator: 'in', value: [] },
+            ],
+          }}
+          onChange={onChange}
+        />,
+      );
+
+      const checkboxes = screen.getAllByRole('checkbox');
+      expect(checkboxes.length).toBe(3);
+      expect(screen.getByText('Lead')).toBeInTheDocument();
+      expect(screen.getByText('Qualified')).toBeInTheDocument();
+      expect(screen.getByText('Won')).toBeInTheDocument();
+    });
+  });
+
+  describe('user/owner field uses lookup operators and dropdown', () => {
+    const userFields = [
+      {
+        value: 'assigned_to',
+        label: 'Assigned To',
+        type: 'user',
+        options: [
+          { value: 'user1', label: 'Alice' },
+          { value: 'user2', label: 'Bob' },
+        ],
+      },
+    ];
+
+    it('renders multi-select checkboxes for user field with "in" operator', () => {
+      const onChange = vi.fn();
+      render(
+        <FilterBuilder
+          fields={userFields}
+          value={{
+            id: 'root',
+            logic: 'and',
+            conditions: [
+              { id: 'c1', field: 'assigned_to', operator: 'in', value: [] },
+            ],
+          }}
+          onChange={onChange}
+        />,
+      );
+
+      const checkboxes = screen.getAllByRole('checkbox');
+      expect(checkboxes.length).toBe(2);
+      expect(screen.getByText('Alice')).toBeInTheDocument();
+      expect(screen.getByText('Bob')).toBeInTheDocument();
+    });
+  });
+});

package/src/custom/filter-builder.tsx

@@ -13,6 +13,7 @@ import { X, Plus, Trash2 } from "lucide-react"
 
 import { cn } from "../lib/utils"
 import { Button } from "../ui/button"
+import { Checkbox } from "../ui/checkbox"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select"
 import { Input } from "../ui/input"
 
@@ -20,7 +21,7 @@ export interface FilterCondition {
   id: string
   field: string
   operator: string
-  value: string | number | boolean
+  value: string | number | boolean | (string | number | boolean)[]
 }
 
 export interface FilterGroup {
@@ -65,6 +66,23 @@ const numberOperators = ["equals", "notEquals", "greaterThan", "lessThan", "grea
 const booleanOperators = ["equals", "notEquals"]
 const dateOperators = ["equals", "notEquals", "before", "after", "between", "isEmpty", "isNotEmpty"]
 const selectOperators = ["equals", "notEquals", "in", "notIn", "isEmpty", "isNotEmpty"]
+const lookupOperators = ["equals", "notEquals", "in", "notIn", "isEmpty", "isNotEmpty"]
+
+/** Field types that share the same operator/input behavior as number (numeric comparison operators, number input) */
+const numberLikeTypes = ["number", "currency", "percent", "rating"]
+/** Field types that share the same operator/input behavior as date (before/after operators, date/datetime/time input) */
+const dateLikeTypes = ["date", "datetime", "time"]
+/** Field types that use select operators (equals/in/notIn) and render dropdown or checkbox list when options provided */
+const selectLikeTypes = ["select", "status"]
+/** Relational/reference field types that use lookup operators (equals/in/notIn) and render dropdown or checkbox list when options provided */
+const lookupLikeTypes = ["lookup", "master_detail", "user", "owner"]
+
+/** Normalize a filter value into an array for multi-select scenarios */
+function normalizeToArray(value: FilterCondition["value"]): (string | number | boolean)[] {
+  if (Array.isArray(value)) return value
+  if (value !== undefined && value !== null && value !== "") return [value as string | number | boolean]
+  return []
+}
 
 function FilterBuilder({
   fields = [],
@@ -139,19 +157,22 @@ function FilterBuilder({
     const field = fields.find((f) => f.value === fieldValue)
     const fieldType = field?.type || "text"
 
-    switch (fieldType) {
-      case "number":
-        return defaultOperators.filter((op) => numberOperators.includes(op.value))
-      case "boolean":
-        return defaultOperators.filter((op) => booleanOperators.includes(op.value))
-      case "date":
-        return defaultOperators.filter((op) => dateOperators.includes(op.value))
-      case "select":
-        return defaultOperators.filter((op) => selectOperators.includes(op.value))
-      case "text":
-      default:
-        return defaultOperators.filter((op) => textOperators.includes(op.value))
+    if (numberLikeTypes.includes(fieldType)) {
+      return defaultOperators.filter((op) => numberOperators.includes(op.value))
+    }
+    if (fieldType === "boolean") {
+      return defaultOperators.filter((op) => booleanOperators.includes(op.value))
+    }
+    if (dateLikeTypes.includes(fieldType)) {
+      return defaultOperators.filter((op) => dateOperators.includes(op.value))
+    }
+    if (selectLikeTypes.includes(fieldType)) {
+      return defaultOperators.filter((op) => selectOperators.includes(op.value))
+    }
+    if (lookupLikeTypes.includes(fieldType)) {
+      return defaultOperators.filter((op) => lookupOperators.includes(op.value))
     }
+    return defaultOperators.filter((op) => textOperators.includes(op.value))
   }
 
   const needsValueInput = (operator: string) => {
@@ -162,21 +183,51 @@ function FilterBuilder({
     const field = fields.find((f) => f.value === fieldValue)
     const fieldType = field?.type || "text"
     
-    switch (fieldType) {
-      case "number":
-        return "number"
-      case "date":
-        return "date"
-      default:
-        return "text"
-    }
+    if (numberLikeTypes.includes(fieldType)) return "number"
+    if (fieldType === "date") return "date"
+    if (fieldType === "datetime") return "datetime-local"
+    if (fieldType === "time") return "time"
+    return "text"
   }
 
   const renderValueInput = (condition: FilterCondition) => {
     const field = fields.find((f) => f.value === condition.field)
+    const isMultiOperator = ["in", "notIn"].includes(condition.operator)
     
-    // For select fields with options
-    if (field?.type === "select" && field.options) {
+    // For select/lookup fields with options and multi-select operator (in/notIn)
+    if (field?.options && isMultiOperator) {
+      const selectedValues = normalizeToArray(condition.value)
+      return (
+        <div className="max-h-40 overflow-y-auto space-y-0.5 border rounded-md p-2">
+          {field.options.map((opt) => {
+            const isChecked = selectedValues.map(String).includes(String(opt.value))
+            return (
+              <label
+                key={opt.value}
+                className={cn(
+                  "flex items-center gap-2 text-sm py-1 px-1.5 rounded cursor-pointer",
+                  isChecked ? "bg-primary/5 text-primary" : "hover:bg-muted",
+                )}
+              >
+                <Checkbox
+                  checked={isChecked}
+                  onCheckedChange={(checked) => {
+                    const next = checked
+                      ? [...selectedValues, opt.value]
+                      : selectedValues.filter((v) => String(v) !== String(opt.value))
+                    updateCondition(condition.id, { value: next })
+                  }}
+                />
+                <span className="truncate">{opt.label}</span>
+              </label>
+            )
+          })}
+        </div>
+      )
+    }
+
+    // For select/lookup fields with options (single select)
+    if (field?.options && (selectLikeTypes.includes(field.type || "") || lookupLikeTypes.includes(field.type || ""))) {
       return (
         <Select
           value={String(condition.value || "")}
@@ -235,9 +286,9 @@ function FilterBuilder({
     const handleValueChange = (newValue: string) => {
       let convertedValue: string | number | boolean = newValue
       
-      if (field?.type === "number" && newValue !== "") {
+      if (numberLikeTypes.includes(field?.type || "") && newValue !== "") {
         convertedValue = parseFloat(newValue) || 0
-      } else if (field?.type === "date") {
+      } else if (dateLikeTypes.includes(field?.type || "")) {
         convertedValue = newValue // Keep as ISO string
       }