@object-ui/plugin-list 3.1.0 → 3.1.1

package/src/ListView.tsx

@@ -557,7 +557,16 @@ export const ListView: React.FC<ListViewProps> = ({
     if (schema.data && typeof schema.data === 'object' && !Array.isArray(schema.data)) {
       const dataConfig = schema.data as any;
       if (dataConfig.provider === 'value' && Array.isArray(dataConfig.items)) {
-        setData(dataConfig.items);
+        let items = dataConfig.items;
+        if (searchTerm) {
+          const q = searchTerm.toLowerCase();
+          items = items.filter((row: any) =>
+            Object.values(row).some(
+              (v) => v != null && String(v).toLowerCase().includes(q),
+            ),
+          );
+        }
+        setData(items);
         setLoading(false);
         setDataLimitReached(false);
         return;
@@ -565,7 +574,16 @@ export const ListView: React.FC<ListViewProps> = ({
     }
     // Also support schema.data as a plain array (shorthand for value provider)
     if (Array.isArray(schema.data)) {
-      setData(schema.data as any[]);
+      let items = schema.data as any[];
+      if (searchTerm) {
+        const q = searchTerm.toLowerCase();
+        items = items.filter((row: any) =>
+          Object.values(row).some(
+            (v) => v != null && String(v).toLowerCase().includes(q),
+          ),
+        );
+      }
+      setData(items);
       setLoading(false);
       setDataLimitReached(false);
       return;
@@ -1071,12 +1089,11 @@ export const ListView: React.FC<ListViewProps> = ({
         </div>
       )}
 
-      {/* Airtable-style Toolbar — Merged: UserFilter badges (left) + Tool buttons (right) */}
+      {/* Airtable-style Toolbar — UserFilter badges (left) + Tool buttons (right) */}
       <div className="border-b px-2 sm:px-4 py-1 flex items-center justify-between gap-1 sm:gap-2 bg-background">
-        <div className="flex items-center gap-0.5 overflow-x-auto flex-1 min-w-0">
+        <div className="flex items-center gap-0.5 overflow-x-auto min-w-0">
           {/* User Filters — inline in toolbar (Airtable Interfaces-style) */}
           {resolvedUserFilters && (
-            <>
               <div className="shrink-0 min-w-0" data-testid="user-filters">
                 <UserFilters
                   config={resolvedUserFilters}
@@ -1086,10 +1103,10 @@ export const ListView: React.FC<ListViewProps> = ({
                   maxVisible={3}
                 />
               </div>
-              <div className="h-4 w-px bg-border/60 mx-0.5 shrink-0" />
-            </>
           )}
+        </div>
 
+        <div className="flex items-center gap-0.5 shrink-0">
           {/* Hide Fields */}
           {toolbarFlags.showHideFields && (
           <Popover open={showHideFields} onOpenChange={setShowHideFields}>
@@ -1456,7 +1473,7 @@ export const ListView: React.FC<ListViewProps> = ({
                   <Search className="h-3.5 w-3.5" />
                 </Button>
               </PopoverTrigger>
-              <PopoverContent align="end" className="w-64 p-2" data-testid="search-popover">
+              <PopoverContent align="end" className="w-[calc(100vw-2rem)] sm:w-64 p-2" data-testid="search-popover">
                 <div className="relative">
                   <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
                   <Input
@@ -1480,10 +1497,7 @@ export const ListView: React.FC<ListViewProps> = ({
               </PopoverContent>
             </Popover>
           )}
-        </div>
 
-        {/* Right: Add Record */}
-        <div className="flex items-center gap-1">
           {/* Add Record (top position) */}
           {toolbarFlags.showAddRecord && toolbarFlags.addRecordPosition === 'top' && (
             <Button

package/src/UserFilters.tsx

@@ -303,14 +303,6 @@ function DropdownFilters({ fields, objectDef, data, onFilterChange, maxVisible,
           )}
         </>
       )}
-      <button
-        className="inline-flex items-center gap-1 h-7 px-2 text-xs text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors shrink-0"
-        data-testid="user-filters-add"
-        title="Add filter"
-      >
-        <Plus className="h-3.5 w-3.5" />
-        <span className="hidden sm:inline">Add filter</span>
-      </button>
     </div>
   );
 }

package/src/__tests__/ListView.test.tsx

@@ -540,7 +540,7 @@ describe('ListView', () => {
       expect(screen.getByTestId('filter-badge-is_active')).toBeInTheDocument();
     });
 
-    it('should show Add filter button in userFilters', () => {
+    it('should not show Add filter button in userFilters (removed from UI)', () => {
       const schema: ListViewSchema = {
         type: 'list-view',
         objectName: 'contacts',
@@ -555,7 +555,7 @@ describe('ListView', () => {
       };
 
       renderWithProvider(<ListView schema={schema} />);
-      expect(screen.getByTestId('user-filters-add')).toBeInTheDocument();
+      expect(screen.queryByTestId('user-filters-add')).not.toBeInTheDocument();
     });
 
     it('should not render userFilters when objectDef has no filterable fields', async () => {
@@ -1577,6 +1577,68 @@ describe('ListView', () => {
       expect(mockDataSource.find).not.toHaveBeenCalled();
     });
 
+    it('should filter inline array data by searchTerm', async () => {
+      const schema: ListViewSchema = {
+        type: 'list-view',
+        objectName: 'contacts',
+        viewType: 'grid',
+        fields: ['name', 'email'],
+        data: [
+          { _id: '1', name: 'Alice', email: 'alice@test.com' },
+          { _id: '2', name: 'Bob', email: 'bob@test.com' },
+          { _id: '3', name: 'Charlie', email: 'charlie@test.com' },
+        ] as any,
+      };
+
+      mockDataSource.find.mockClear();
+      renderWithProvider(<ListView schema={schema} dataSource={mockDataSource} />);
+
+      await vi.waitFor(() => {
+        expect(screen.getByText('3 records')).toBeInTheDocument();
+      });
+
+      // Open search popover and type search query
+      fireEvent.click(screen.getByTestId('search-icon-button'));
+      fireEvent.change(screen.getByPlaceholderText(/search/i), { target: { value: 'alice' } });
+
+      await vi.waitFor(() => {
+        expect(screen.getByText('1 record')).toBeInTheDocument();
+      });
+      expect(mockDataSource.find).not.toHaveBeenCalled();
+    });
+
+    it('should filter value provider data by searchTerm', async () => {
+      const schema: ListViewSchema = {
+        type: 'list-view',
+        objectName: 'contacts',
+        viewType: 'grid',
+        fields: ['name', 'email'],
+        data: {
+          provider: 'value',
+          items: [
+            { _id: '1', name: 'Alice', email: 'alice@test.com' },
+            { _id: '2', name: 'Bob', email: 'bob@test.com' },
+          ],
+        } as any,
+      };
+
+      mockDataSource.find.mockClear();
+      renderWithProvider(<ListView schema={schema} dataSource={mockDataSource} />);
+
+      await vi.waitFor(() => {
+        expect(screen.getByText('2 records')).toBeInTheDocument();
+      });
+
+      // Open search popover and type search query
+      fireEvent.click(screen.getByTestId('search-icon-button'));
+      fireEvent.change(screen.getByPlaceholderText(/search/i), { target: { value: 'bob' } });
+
+      await vi.waitFor(() => {
+        expect(screen.getByText('1 record')).toBeInTheDocument();
+      });
+      expect(mockDataSource.find).not.toHaveBeenCalled();
+    });
+
     it('should fall back to dataSource.find when schema.data is not set', async () => {
       const mockItems = [
         { _id: '1', name: 'Alice', email: 'alice@test.com' },

package/src/__tests__/UserFilters.test.tsx

@@ -369,10 +369,10 @@ describe('UserFilters', () => {
   });
 
   // ============================================
-  // Add Filter Entry Point
+  // Add Filter Entry Point (removed)
   // ============================================
   describe('Add filter entry', () => {
-    it('renders "Add filter" button in dropdown mode', () => {
+    it('does not render "Add filter" button (removed from UI)', () => {
       const config = {
         element: 'dropdown' as const,
         fields: [
@@ -387,15 +387,7 @@ describe('UserFilters', () => {
       };
       const onChange = vi.fn();
       render(<UserFilters config={config} onFilterChange={onChange} />);
-      expect(screen.getByTestId('user-filters-add')).toBeInTheDocument();
-      expect(screen.getByText('Add filter')).toBeInTheDocument();
-    });
-
-    it('renders "Add filter" button even when no fields are provided', () => {
-      const config = { element: 'dropdown' as const };
-      const onChange = vi.fn();
-      render(<UserFilters config={config} onFilterChange={onChange} />);
-      expect(screen.getByTestId('user-filters-add')).toBeInTheDocument();
+      expect(screen.queryByTestId('user-filters-add')).not.toBeInTheDocument();
     });
   });