@instantdb/components 1.0.4 → 1.0.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@instantdb/components",
   "private": false,
-  "version": "1.0.4",
+  "version": "1.0.5",
   "type": "module",
   "description": "Instant's UI components",
   "homepage": "https://github.com/instantdb/instant/tree/main/client/packages/components",
@@ -93,11 +93,11 @@
     "swr": "^2.2.4",
     "tailwind-merge": "^2.2.1",
     "uuid": "^11.1.0",
-    "@instantdb/admin": "1.0.4",
-    "@instantdb/platform": "1.0.4",
-    "@instantdb/react": "1.0.4",
-    "@instantdb/version": "1.0.4",
-    "@instantdb/core": "1.0.4"
+    "@instantdb/core": "1.0.5",
+    "@instantdb/react": "1.0.5",
+    "@instantdb/platform": "1.0.5",
+    "@instantdb/admin": "1.0.5",
+    "@instantdb/version": "1.0.5"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/components/explorer/inner-explorer.tsx

@@ -68,7 +68,11 @@ import {
   IconButton,
   Select,
 } from '@lib/components/ui';
-import { SearchFilter, useNamespacesQuery } from '@lib/hooks/explorer';
+import {
+  SearchFilter,
+  resolveFilters,
+  useNamespacesQuery,
+} from '@lib/hooks/explorer';
 import { useColumnVisibility } from '@lib/hooks/useColumnVisibility';
 import { useLocalStorage } from '@lib/hooks/useLocalStorage';
 import { SchemaAttr, SchemaNamespace } from '@lib/types';
@@ -298,7 +302,7 @@ export const InnerExplorer: React.FC<{
     db,
     selectedNamespace,
     currentNav?.where,
-    currentNav?.filters || searchFilters,
+    resolveFilters(currentNav?.where, currentNav?.filters, searchFilters),
     limit,
     offset,
     sortAttr,
@@ -1008,7 +1012,16 @@ export const InnerExplorer: React.FC<{
               </Button>
               <SearchInput
                 key={selectedNamespaceId}
-                onSearchChange={(filters) => setSearchFilters(filters)}
+                onSearchChange={(filters) => {
+                  setSearchFilters(filters);
+                  history.push(
+                    (prev) => ({
+                      ...prev!,
+                      filters: filters.length ? filters : undefined,
+                    }),
+                    true,
+                  );
+                }}
                 attrs={selectedNamespace?.attrs}
                 initialFilters={currentNav?.filters || []}
               />

package/src/hooks/__tests__/explorer.test.ts

@@ -0,0 +1,109 @@
+import { test, expect, describe } from 'vitest';
+import { makeWhere, resolveFilters, SearchFilter } from '../explorer';
+import { ExplorerNav } from '../../components/explorer';
+
+describe('makeWhere', () => {
+  test('returns empty object when no navWhere and no filters', () => {
+    expect(makeWhere(null, null)).toEqual({});
+    expect(makeWhere(undefined, undefined)).toEqual({});
+    expect(makeWhere(null, [])).toEqual({});
+  });
+
+  test('builds where clause from navWhere only', () => {
+    const result = makeWhere(['user.id', 'abc-123'], null);
+    expect(result).toEqual({ 'user.id': 'abc-123' });
+  });
+
+  test('builds where clause from search filters only', () => {
+    const filters: SearchFilter[] = [['email', '$ilike', '%test%']];
+    const result = makeWhere(null, filters);
+    expect(result).toEqual({
+      or: [{ email: { $ilike: '%test%' } }],
+    });
+  });
+
+  test('handles = filter op', () => {
+    const filters: SearchFilter[] = [['handle', '=', 'joe']];
+    const result = makeWhere(null, filters);
+    expect(result).toEqual({
+      or: [{ handle: 'joe' }],
+    });
+  });
+
+  test('handles $isNull filter op', () => {
+    const filters: SearchFilter[] = [['name', '$isNull', null]];
+    const result = makeWhere(null, filters);
+    expect(result).toEqual({
+      or: [{ name: { $isNull: true } }],
+    });
+  });
+});
+
+describe('resolveFilters', () => {
+  test('uses navFilters when present', () => {
+    const navFilters: SearchFilter[] = [['name', '=', 'test']];
+    const localFilters: SearchFilter[] = [['email', '$ilike', '%foo%']];
+    expect(resolveFilters(undefined, navFilters, localFilters)).toEqual(
+      navFilters,
+    );
+  });
+
+  test('uses local search filters when no navWhere and no navFilters', () => {
+    const localFilters: SearchFilter[] = [['email', '$ilike', '%foo%']];
+    expect(resolveFilters(undefined, undefined, localFilters)).toEqual(
+      localFilters,
+    );
+  });
+
+  test('does not apply stale local filters when navigating via relationship link', () => {
+    const navWhere: [string, any] = ['user.id', 'abc-123'];
+    const staleFilters: SearchFilter[] = [['email', '$ilike', '%test%']];
+
+    const result = resolveFilters(navWhere, undefined, staleFilters);
+    expect(result).toEqual([]);
+  });
+
+  test('navFilters take precedence even when navWhere is set', () => {
+    const navWhere: [string, any] = ['user.id', 'abc-123'];
+    const navFilters: SearchFilter[] = [['status', '=', 'active']];
+    const localFilters: SearchFilter[] = [['email', '$ilike', '%foo%']];
+
+    expect(resolveFilters(navWhere, navFilters, localFilters)).toEqual(
+      navFilters,
+    );
+  });
+});
+
+describe('explorer history preserves filters', () => {
+  test('filters survive link navigation and back', () => {
+    // Simulates the explorer state history stack (mirrors pushExplorerState/popExplorerState)
+    let explorerState: ExplorerNav = { namespace: 'users' };
+    const history: ExplorerNav[] = [];
+
+    // Step 1: User types a search, onSearchChange syncs filters to explorer state
+    const searchFilters: SearchFilter[] = [['email', '$ilike', '%test%']];
+    explorerState = { ...explorerState, filters: searchFilters };
+
+    expect(
+      resolveFilters(explorerState.where, explorerState.filters, searchFilters),
+    ).toEqual(searchFilters);
+
+    // Step 2: User clicks relationship link — current state saved to history
+    history.push(explorerState);
+    explorerState = { namespace: 'user_info', where: ['user.id', 'abc-123'] };
+
+    // Stale filters should not leak to the new table
+    expect(
+      resolveFilters(explorerState.where, explorerState.filters, searchFilters),
+    ).toEqual([]);
+
+    // Step 3: User hits back — old state restored from history
+    explorerState = history.pop()!;
+
+    // Filters are restored from the saved state
+    expect(explorerState.filters).toEqual(searchFilters);
+    expect(
+      resolveFilters(explorerState.where, explorerState.filters, []),
+    ).toEqual(searchFilters);
+  });
+});

package/src/hooks/explorer.tsx

@@ -12,7 +12,19 @@ export type SearchFilterOp =
   | '$isNull';
 export type SearchFilter = [string, SearchFilterOp, any];
 
-function makeWhere(
+// When navWhere is set (relationship link navigation), ignore stale local
+// search filters from the previous table.
+export function resolveFilters(
+  navWhere: [string, any] | undefined,
+  navFilters: SearchFilter[] | undefined,
+  localSearchFilters: SearchFilter[],
+): SearchFilter[] {
+  if (navFilters) return navFilters;
+  if (navWhere) return [];
+  return localSearchFilters;
+}
+
+export function makeWhere(
   navWhere: null | undefined | [string, any],
   searchFilters: null | undefined | SearchFilter[],
 ) {