@object-ui/plugin-view 3.1.0 → 3.1.2

package/src/ObjectView.tsx

@@ -419,7 +419,7 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
       }
       if (navigationConfig.mode === 'new_window' || navigationConfig.openNewTab) {
         const recordId = record._id || record.id;
-        const url = `/${schema.objectName}/${recordId}`;
+        const url = `/${schema.objectName}/${encodeURIComponent(String(recordId))}`;
         window.open(url, '_blank');
         return;
       }
@@ -546,7 +546,7 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
 
     const filterableFieldDefs = fieldEntries.map(([key, f]: [string, any]) => {
       const fieldType = f.type || 'text';
-      let filterType: 'text' | 'number' | 'select' | 'date' | 'boolean' = 'text';
+      let filterType: 'text' | 'number' | 'select' | 'multi-select' | 'date' | 'boolean' = 'text';
       let options: Array<{ label: string; value: any }> | undefined;
 
       if (fieldType === 'number' || fieldType === 'currency' || fieldType === 'percent') {
@@ -555,11 +555,18 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
         filterType = 'boolean';
       } else if (fieldType === 'date' || fieldType === 'datetime') {
         filterType = 'date';
-      } else if (fieldType === 'select' || f.options) {
+      } else if (fieldType === 'select' || fieldType === 'status' || f.options) {
         filterType = 'select';
         options = (f.options || []).map((o: any) =>
           typeof o === 'string' ? { label: o, value: o } : { label: o.label, value: o.value },
         );
+      } else if (fieldType === 'lookup' || fieldType === 'master_detail' || fieldType === 'user' || fieldType === 'owner') {
+        if (f.options && f.options.length > 0) {
+          filterType = 'multi-select';
+          options = (f.options || []).map((o: any) =>
+            typeof o === 'string' ? { label: o, value: o } : { label: o.label, value: o.value },
+          );
+        }
       }
       return {
         field: key,
@@ -875,6 +882,7 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
           addRecord: activeView?.addRecord ?? (schema as any).addRecord,
           conditionalFormatting: activeView?.conditionalFormatting ?? (schema as any).conditionalFormatting,
           quickFilters: activeView?.quickFilters ?? (schema as any).quickFilters,
+          userFilters: activeView?.userFilters ?? (schema as any).userFilters,
           showRecordCount: activeView?.showRecordCount ?? (schema as any).showRecordCount,
           allowPrinting: activeView?.allowPrinting ?? (schema as any).allowPrinting,
           virtualScroll: activeView?.virtualScroll ?? (schema as any).virtualScroll,

package/src/__tests__/FilterUI.test.tsx

@@ -541,4 +541,101 @@ describe('FilterUI', () => {
       window.removeEventListener('filter:changed', spy);
     });
   });
+
+  // -------------------------------------------------------------------------
+  // 9. Multi-select filter type
+  // -------------------------------------------------------------------------
+  describe('multi-select filter type', () => {
+    const multiSelectFilters: FilterUISchema['filters'] = [
+      {
+        field: 'tags',
+        label: 'Tags',
+        type: 'multi-select',
+        options: [
+          { label: 'Frontend', value: 'frontend' },
+          { label: 'Backend', value: 'backend' },
+          { label: 'DevOps', value: 'devops' },
+        ],
+      },
+    ];
+
+    it('renders checkboxes for multi-select type', () => {
+      render(
+        <FilterUI
+          schema={makeSchema({ filters: multiSelectFilters })}
+        />,
+      );
+
+      expect(screen.getByText('Tags')).toBeInTheDocument();
+      const checkboxes = screen.getAllByTestId('checkbox');
+      expect(checkboxes.length).toBe(3);
+      expect(screen.getByText('Frontend')).toBeInTheDocument();
+      expect(screen.getByText('Backend')).toBeInTheDocument();
+      expect(screen.getByText('DevOps')).toBeInTheDocument();
+    });
+
+    it('calls onChange with array when multi-select checkbox is toggled', () => {
+      const onChange = vi.fn();
+      render(
+        <FilterUI
+          schema={makeSchema({ filters: multiSelectFilters })}
+          onChange={onChange}
+        />,
+      );
+
+      const checkboxes = screen.getAllByTestId('checkbox');
+      fireEvent.click(checkboxes[0]); // Frontend
+      expect(onChange).toHaveBeenCalledWith({ tags: ['frontend'] });
+    });
+
+    it('adds to selection when another checkbox is checked', () => {
+      const onChange = vi.fn();
+      render(
+        <FilterUI
+          schema={makeSchema({
+            filters: multiSelectFilters,
+            values: { tags: ['frontend'] },
+          })}
+          onChange={onChange}
+        />,
+      );
+
+      const checkboxes = screen.getAllByTestId('checkbox');
+      fireEvent.click(checkboxes[1]); // Backend
+      expect(onChange).toHaveBeenCalledWith({ tags: ['frontend', 'backend'] });
+    });
+
+    it('removes from selection when checkbox is unchecked', () => {
+      const onChange = vi.fn();
+      render(
+        <FilterUI
+          schema={makeSchema({
+            filters: multiSelectFilters,
+            values: { tags: ['frontend', 'backend'] },
+          })}
+          onChange={onChange}
+        />,
+      );
+
+      // Uncheck Frontend (first checkbox)
+      const checkboxes = screen.getAllByTestId('checkbox');
+      fireEvent.click(checkboxes[0]); // Frontend
+      expect(onChange).toHaveBeenCalledWith({ tags: ['backend'] });
+    });
+
+    it('shows selected count in active badge for popover layout', () => {
+      render(
+        <FilterUI
+          schema={makeSchema({
+            layout: 'popover',
+            filters: multiSelectFilters,
+            values: { tags: ['frontend', 'backend'] },
+          })}
+        />,
+      );
+
+      // Active count should be 1 (tags field has a value)
+      expect(screen.getByText('1')).toBeInTheDocument();
+    });
+  });
 });

package/src/__tests__/ObjectView.test.tsx

@@ -661,5 +661,45 @@ describe('ObjectView', () => {
       expect(callSchema?.showFilters).toBe(false);
       expect(callSchema?.showSort).toBe(false);
     });
+
+    it('should propagate userFilters from activeView in renderListView', async () => {
+      const schema: ObjectViewSchema = {
+        type: 'object-view',
+        objectName: 'contacts',
+      };
+
+      const renderListViewSpy = vi.fn(({ schema: listSchema }: any) => (
+        <div data-testid="custom-list">Custom ListView</div>
+      ));
+
+      const views = [
+        {
+          id: 'v1',
+          label: 'View 1',
+          type: 'grid' as const,
+          userFilters: {
+            element: 'dropdown' as const,
+            fields: [{ field: 'status' }],
+          },
+        },
+      ];
+
+      render(
+        <ObjectView
+          schema={schema}
+          dataSource={mockDataSource}
+          views={views}
+          activeViewId="v1"
+          renderListView={renderListViewSpy}
+        />,
+      );
+
+      expect(renderListViewSpy).toHaveBeenCalled();
+      const callSchema = renderListViewSpy.mock.calls[0]?.[0]?.schema;
+      expect(callSchema?.userFilters).toEqual({
+        element: 'dropdown',
+        fields: [{ field: 'status' }],
+      });
+    });
   });
 });

package/src/__tests__/registration.test.tsx

@@ -1,32 +0,0 @@
-/**
- * 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 } from 'vitest';
-import { ObjectView, ViewSwitcher, FilterUI, SortUI } from '../index';
-
-describe('Plugin View Registration', () => {
-  it('exports ObjectView component', () => {
-    expect(ObjectView).toBeDefined();
-    expect(typeof ObjectView).toBe('function');
-  });
-
-  it('exports ViewSwitcher component', () => {
-    expect(ViewSwitcher).toBeDefined();
-    expect(typeof ViewSwitcher).toBe('function');
-  });
-
-  it('exports FilterUI component', () => {
-    expect(FilterUI).toBeDefined();
-    expect(typeof FilterUI).toBe('function');
-  });
-
-  it('exports SortUI component', () => {
-    expect(SortUI).toBeDefined();
-    expect(typeof SortUI).toBe('function');
-  });
-});