@nocobase/client-v2 2.2.0-beta.9 → 2.2.0

package/src/components/form/__tests__/TypedVariableInput.test.tsx

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { FlowContext, FlowContextProvider } from '@nocobase/flow-engine';
+import { FlowContext, FlowContextProvider, type MetaTreeNode } from '@nocobase/flow-engine';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
@@ -64,6 +64,7 @@ describe('TypedVariableInput - constant rendering', () => {
       const item = screen.getByText('True');
       expect(item).toBeInTheDocument();
     });
+    expect(screen.getByRole('button', { name: 'variable-switcher' }).className).not.toContain('ant-btn-primary');
   });
 
   it('renders the Null placeholder when value=null and nullable=true', async () => {
@@ -77,6 +78,110 @@ describe('TypedVariableInput - constant rendering', () => {
     const nullInput = await screen.findByPlaceholderText('<Null>');
     expect(nullInput).toBeInTheDocument();
     expect(nullInput.getAttribute('readonly')).not.toBeNull();
+    expect(screen.getByRole('button', { name: 'variable-switcher' }).className).not.toContain('ant-btn-primary');
+  });
+
+  it('keeps the number editor usable when value=null and nullable=false', async () => {
+    const ctx = createContextWithEnv();
+    const handleChange = vi.fn();
+    renderWithCtx(
+      ctx,
+      <TypedVariableInput
+        value={null}
+        types={[['number', { min: 1 }]]}
+        namespaces={['$env']}
+        nullable={false}
+        onChange={handleChange}
+      />,
+    );
+
+    const numberInput = await screen.findByRole('spinbutton');
+    expect(screen.queryByPlaceholderText('<Null>')).toBeNull();
+    fireEvent.change(numberInput, { target: { value: '2' } });
+    fireEvent.blur(numberInput);
+    expect(handleChange).toHaveBeenCalledWith(2);
+  });
+
+  it('defaults undefined to the first constant type', async () => {
+    const ctx = createContextWithEnv();
+    const handleChange = vi.fn();
+    renderWithCtx(
+      ctx,
+      <TypedVariableInput
+        value={undefined}
+        types={['string', 'number']}
+        namespaces={['$env']}
+        nullable
+        onChange={handleChange}
+      />,
+    );
+
+    expect(screen.queryByPlaceholderText('<Null>')).toBeNull();
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+    await waitFor(() => {
+      expect(handleChange).toHaveBeenCalledWith('');
+    });
+  });
+
+  it('uses a positive numeric minimum as the default value', async () => {
+    const ctx = createContextWithEnv();
+    const handleChange = vi.fn();
+    renderWithCtx(
+      ctx,
+      <TypedVariableInput
+        value={undefined}
+        types={[['number', { min: 1 }]]}
+        namespaces={['$env']}
+        nullable={false}
+        onChange={handleChange}
+      />,
+    );
+
+    expect(await screen.findByDisplayValue('1')).toBeInTheDocument();
+    await waitFor(() => {
+      expect(handleChange).toHaveBeenCalledWith(1);
+    });
+  });
+
+  it('can still opt out to keep the null placeholder for undefined', async () => {
+    const ctx = createContextWithEnv();
+    renderWithCtx(
+      ctx,
+      <TypedVariableInput
+        value={undefined}
+        types={['string', 'number']}
+        namespaces={['$env']}
+        nullable
+        defaultToFirstConstantTypeWhenUndefined={false}
+        onChange={() => undefined}
+      />,
+    );
+
+    const nullInput = await screen.findByPlaceholderText('<Null>');
+    expect(nullInput).toBeInTheDocument();
+  });
+
+  it('highlights the defaulted first constant type when the switcher opens', async () => {
+    const ctx = createContextWithEnv();
+    renderWithCtx(
+      ctx,
+      <TypedVariableInput
+        value={undefined}
+        types={['string', 'number']}
+        namespaces={['$env']}
+        nullable
+        onChange={() => undefined}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'variable-switcher' }));
+
+    await waitFor(() => {
+      const constant = screen.getAllByText('Constant')[0];
+      const string = screen.getAllByText('String')[0];
+      expect(constant.closest('.ant-cascader-menu-item-active')).not.toBeNull();
+      expect(string.closest('.ant-cascader-menu-item-active')).not.toBeNull();
+    });
   });
 });
 
@@ -99,10 +204,10 @@ describe('TypedVariableInput - variable rendering', () => {
     });
   });
 
-  it('clears back to null when the close button is clicked (nullable=true)', async () => {
+  it('clears back to default-of-first-type when the close button is clicked (nullable=true)', async () => {
     const ctx = createContextWithEnv();
     const handleChange = vi.fn();
-    renderWithCtx(
+    const { container } = renderWithCtx(
       ctx,
       <TypedVariableInput
         value="{{$env.SMTP_PORT}}"
@@ -112,27 +217,274 @@ describe('TypedVariableInput - variable rendering', () => {
         onChange={handleChange}
       />,
     );
-    const clear = await screen.findByRole('button', { name: 'icon-close' });
-    fireEvent.click(clear);
-    expect(handleChange).toHaveBeenCalledWith(null);
+    const clear = container.querySelector('button.clear-button') as HTMLButtonElement | null;
+    expect(clear).not.toBeNull();
+    expect(clear).toHaveClass('clear-button');
+    fireEvent.click(clear as HTMLButtonElement);
+    expect(handleChange).toHaveBeenCalledWith(0);
   });
 
-  it('clears back to default-of-first-type when nullable=false', async () => {
+  it('clears back to the valid minimum of the first type when nullable=false', async () => {
     const ctx = createContextWithEnv();
     const handleChange = vi.fn();
-    renderWithCtx(
+    const { container } = renderWithCtx(
       ctx,
       <TypedVariableInput
         value="{{$env.SMTP_PORT}}"
-        types={['number']}
+        types={[['number', { min: 1 }]]}
         namespaces={['$env']}
         nullable={false}
         onChange={handleChange}
       />,
     );
-    const clear = await screen.findByRole('button', { name: 'icon-close' });
-    fireEvent.click(clear);
-    expect(handleChange).toHaveBeenCalledWith(0);
+    const clear = container.querySelector('button.clear-button') as HTMLButtonElement | null;
+    expect(clear).not.toBeNull();
+    fireEvent.click(clear as HTMLButtonElement);
+    expect(handleChange).toHaveBeenCalledWith(1);
+  });
+
+  it('treats types=[] as variable-only mode with a readonly placeholder before selection', async () => {
+    const ctx = createContextWithEnv();
+    renderWithCtx(
+      ctx,
+      <TypedVariableInput
+        value={undefined}
+        types={[]}
+        namespaces={['$env']}
+        placeholder="Select variable"
+        onChange={() => undefined}
+      />,
+    );
+
+    const input = await screen.findByPlaceholderText('Select variable');
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveAttribute('readonly');
+    expect(screen.queryByRole('button', { name: 'variable-switcher' })).toBeInTheDocument();
+  });
+
+  it('clears a variable-only selection back to null', async () => {
+    const ctx = createContextWithEnv();
+    const handleChange = vi.fn();
+    const { container } = renderWithCtx(
+      ctx,
+      <TypedVariableInput value="{{$env.SMTP_PORT}}" types={[]} namespaces={['$env']} onChange={handleChange} />,
+    );
+
+    const clear = container.querySelector('button.clear-button') as HTMLButtonElement | null;
+    expect(clear).not.toBeNull();
+    fireEvent.click(clear as HTMLButtonElement);
+    expect(handleChange).toHaveBeenCalledWith(null);
+  });
+
+  it('hides the variable switcher when hideVariable=true in variable-only mode', async () => {
+    const ctx = createContextWithEnv();
+    renderWithCtx(
+      ctx,
+      <TypedVariableInput
+        value="{{$env.SMTP_PORT}}"
+        types={[]}
+        namespaces={['$env']}
+        hideVariable
+        onChange={() => undefined}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'variable-tag' })).toBeInTheDocument();
+    });
+    expect(screen.queryByRole('button', { name: 'variable-switcher' })).toBeNull();
+  });
+});
+
+describe('TypedVariableInput - object / JSON constant', () => {
+  it('renders a JSON textarea for an object value when types include object', async () => {
+    const ctx = createContextWithEnv();
+    renderWithCtx(
+      ctx,
+      <TypedVariableInput value={{ a: 1 }} types={['object']} namespaces={['$env']} onChange={() => undefined} />,
+    );
+    // The object is stringified into a textarea.
+    const textarea = await screen.findByDisplayValue(/"a": 1/);
+    expect(textarea.tagName.toLowerCase()).toBe('textarea');
+  });
+
+  it('parses valid JSON on blur and emits the parsed object', async () => {
+    const ctx = createContextWithEnv();
+    const handleChange = vi.fn();
+    renderWithCtx(
+      ctx,
+      <TypedVariableInput value={{}} types={['object']} namespaces={['$env']} onChange={handleChange} />,
+    );
+    const textarea = await screen.findByDisplayValue('{}');
+    fireEvent.change(textarea, { target: { value: '{"x": 42}' } });
+    fireEvent.blur(textarea);
+    expect(handleChange).toHaveBeenLastCalledWith({ x: 42 });
+  });
+
+  it('shows an error live on change (before blur) and does not emit on invalid JSON', async () => {
+    const ctx = createContextWithEnv();
+    const handleChange = vi.fn();
+    renderWithCtx(
+      ctx,
+      <TypedVariableInput value={{}} types={['object']} namespaces={['$env']} onChange={handleChange} />,
+    );
+    const textarea = await screen.findByDisplayValue('{}');
+    // Typing an invalid value surfaces the error immediately — no blur needed (mirrors v1's `Json`, which validates on
+    // every change).
+    fireEvent.change(textarea, { target: { value: '{ not json' } });
+    await waitFor(() => {
+      // The raw `JSON.parse` error message is shown (matching v1), e.g. "Expected property name or '}' in JSON at
+      // position …".
+      expect(screen.getByText(/Expected property name/i)).toBeInTheDocument();
+    });
+    // The value is only emitted on blur, and never for an invalid value.
+    fireEvent.blur(textarea);
+    expect(handleChange).not.toHaveBeenCalled();
+  });
+
+  it('defaults to {} when the Constant > JSON type is picked', async () => {
+    const ctx = createContextWithEnv();
+    const handleChange = vi.fn();
+    renderWithCtx(
+      ctx,
+      <TypedVariableInput value={null} types={['object']} namespaces={['$env']} onChange={handleChange} />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'variable-switcher' }));
+    // Constant submenu → JSON leaf.
+    fireEvent.click(await screen.findByText('Constant'));
+    fireEvent.click(await screen.findByText('JSON'));
+    expect(handleChange).toHaveBeenCalledWith({});
+  });
+});
+
+describe('TypedVariableInput - injected metaTree', () => {
+  // A bare context with no global `$env` — the injected tree is the only source.
+  function createBareContext() {
+    const ctx = new FlowContext();
+    (ctx as any).t = (key: string) => key;
+    return ctx;
+  }
+
+  // Mirrors a workflow node-result tree: a root whose children load lazily.
+  function makeLazyTree(loadChildren: () => Promise<MetaTreeNode[]>): MetaTreeNode[] {
+    return [
+      {
+        name: '$jobsMapByNodeKey',
+        title: 'Node result',
+        type: 'object',
+        paths: ['$jobsMapByNodeKey'],
+        children: loadChildren,
+      },
+    ];
+  }
+
+  it('renders the injected tree in the switcher, not the global one', async () => {
+    const ctx = createBareContext();
+    const metaTree: MetaTreeNode[] = [
+      { name: 'n1', title: 'Approval node', type: 'object', paths: ['$jobsMapByNodeKey', 'n1'] },
+    ];
+    renderWithCtx(ctx, <TypedVariableInput value={null} metaTree={metaTree} onChange={() => undefined} />);
+    fireEvent.click(screen.getByRole('button', { name: 'variable-switcher' }));
+    await waitFor(() => {
+      expect(screen.getByText('Approval node')).toBeInTheDocument();
+    });
+  });
+
+  it('lazily resolves function children when a node is expanded', async () => {
+    const ctx = createBareContext();
+    const loadChildren = vi.fn(async () => [
+      { name: 'status', title: 'Status', type: 'string', paths: ['$jobsMapByNodeKey', 'n1', 'status'] },
+    ]);
+    const metaTree = makeLazyTree(loadChildren);
+    renderWithCtx(ctx, <TypedVariableInput value={null} metaTree={metaTree} onChange={() => undefined} />);
+
+    fireEvent.click(screen.getByRole('button', { name: 'variable-switcher' }));
+    const root = await screen.findByText('Node result');
+    // Expanding the lazy node triggers loadData → loadMetaTreeChildren.
+    fireEvent.click(root);
+    await waitFor(() => {
+      expect(loadChildren).toHaveBeenCalled();
+      expect(screen.getByText('Status')).toBeInTheDocument();
+    });
+  });
+
+  it('surfaces lazy children on the FIRST expansion (no stuck-loading regression)', async () => {
+    const ctx = createBareContext();
+    // A deferred promise so loading→resolved is a real two-phase transition, reproducing the rc-cascader
+    // reference-cache bug where the first expand stayed stuck on the spinner until the column was reopened.
+    let resolveChildren: (nodes: MetaTreeNode[]) => void = () => undefined;
+    const childrenPromise = new Promise<MetaTreeNode[]>((resolve) => {
+      resolveChildren = resolve;
+    });
+    const loadChildren = vi.fn(() => childrenPromise);
+    const metaTree = makeLazyTree(loadChildren);
+    renderWithCtx(ctx, <TypedVariableInput value={null} metaTree={metaTree} onChange={() => undefined} />);
+
+    fireEvent.click(screen.getByRole('button', { name: 'variable-switcher' }));
+    const root = await screen.findByText('Node result');
+    fireEvent.click(root);
+    expect(loadChildren).toHaveBeenCalledTimes(1);
+    // Resolve after the click — the child must appear without reopening.
+    resolveChildren([
+      { name: 'secret', title: 'SMTP_HOST', type: 'string', paths: ['$jobsMapByNodeKey', 'n1', 'secret'] },
+    ]);
+    await waitFor(() => {
+      expect(screen.getByText('SMTP_HOST')).toBeInTheDocument();
+    });
+  });
+
+  it('emits the selected variable as a {{ ... }} expression with no inner spaces', async () => {
+    const ctx = createBareContext();
+    const handleChange = vi.fn();
+    const metaTree: MetaTreeNode[] = [
+      { name: 'n1', title: 'Approval node', type: 'string', paths: ['$jobsMapByNodeKey', 'n1'] },
+    ];
+    renderWithCtx(ctx, <TypedVariableInput value={null} metaTree={metaTree} onChange={handleChange} />);
+    fireEvent.click(screen.getByRole('button', { name: 'variable-switcher' }));
+    const leaf = await screen.findByText('Approval node');
+    fireEvent.click(leaf);
+    await waitFor(() => {
+      expect(handleChange).toHaveBeenCalledWith('{{$jobsMapByNodeKey.n1}}');
+    });
+  });
+
+  it('preloads a saved variable label across a lazy level (deep label not dropped on mount)', async () => {
+    const ctx = createBareContext();
+    // The query-node case: a saved reference `$jobsMapByNodeKey.n1.role` points below `n1`, whose children are a lazy
+    // thunk (relation not yet expanded). On mount the tag must show the full path "Query / Role", not stop at "Query" —
+    // the component walks the saved path resolving each lazy level. (Regression: reopening a saved condition showed
+    // only "节点数据 / 查询数据" and dropped "角色标识".)
+    const loadRoleFields = vi.fn(async () => [
+      { name: 'role', title: 'Role', type: 'string', paths: ['$jobsMapByNodeKey', 'n1', 'role'] },
+    ]);
+    const metaTree: MetaTreeNode[] = [
+      {
+        name: '$jobsMapByNodeKey',
+        title: 'Node result',
+        type: 'object',
+        paths: ['$jobsMapByNodeKey'],
+        children: [
+          {
+            name: 'n1',
+            title: 'Query',
+            type: 'object',
+            paths: ['$jobsMapByNodeKey', 'n1'],
+            children: loadRoleFields,
+          },
+        ],
+      },
+    ];
+    renderWithCtx(
+      ctx,
+      <TypedVariableInput value="{{$jobsMapByNodeKey.n1.role}}" metaTree={metaTree} onChange={() => undefined} />,
+    );
+    const tag = screen.getByRole('button', { name: 'variable-tag' });
+    // Preload resolves the lazy level so the deep label appears without expanding.
+    await waitFor(() => {
+      expect(loadRoleFields).toHaveBeenCalled();
+      expect(tag.textContent).toContain('Role');
+    });
+    expect(tag.textContent).toContain('Query');
   });
 });
 

package/src/components/form/filter/CollectionFilter.tsx

@@ -21,6 +21,8 @@ export interface CollectionFilterProps {
   collection: Collection | undefined;
   /** Previously compiled filter param used to seed the editable filter group. */
   initialValue?: CompiledFilter;
+  /** Default compiled filter used both for initial empty state and Reset. */
+  defaultValue?: CompiledFilter;
   /** Called on Submit or Reset with the compiled NocoBase filter param (`undefined` when cleared). */
   onChange: (filter: CompiledFilter) => void;
   /** Translator. Defaults to identity. */
@@ -58,6 +60,7 @@ export const CollectionFilter: FC<CollectionFilterProps> = (props) => {
   const {
     collection,
     initialValue,
+    defaultValue,
     onChange,
     t = identity,
     filterableFieldNames,
@@ -75,6 +78,7 @@ export const CollectionFilter: FC<CollectionFilterProps> = (props) => {
   const filterAction = useFilterActionProps({
     collection,
     initialValue,
+    defaultValue,
     filterableFieldNames,
     nonfilterableFieldNames,
     noIgnore,

package/src/components/form/filter/CollectionFilterItem.tsx

@@ -58,6 +58,16 @@ export interface CollectionFilterItemProps {
   t?: (key: string) => string;
   /** Optional v2 app registry used to resolve plugin-provided operator components. */
   app?: { getComponent?: (name: string) => React.ComponentType<any> | undefined };
+  /** Optional override for the left field picker placeholder. */
+  fieldPlaceholder?: string;
+  /** Optional override for the operator picker placeholder. */
+  operatorPlaceholder?: string;
+  /** Optional override for the value input placeholder. Pass `null` to suppress it. */
+  valuePlaceholder?: string | null;
+  /** Optional override for the left field picker width. Defaults to v2's original 200px. */
+  fieldWidth?: number;
+  /** Optional override for the operator picker min-width. Defaults to v2's original 120px. */
+  operatorMinWidth?: number;
 }
 
 const identity = (s: string) => s;
@@ -98,6 +108,12 @@ export const CollectionFilterItem: FC<CollectionFilterItemProps> = observer(
     const { path: leftValue, operator, value: rightValue } = props.value;
     const flowEngine = useFlowEngine({ throwError: false }) as any;
     const app = props.app || flowEngine?.context?.app;
+    const fieldPlaceholder = props.fieldPlaceholder ?? t('Select field');
+    const operatorPlaceholder = props.operatorPlaceholder ?? t('Comparision');
+    const valuePlaceholder =
+      props.valuePlaceholder === undefined ? t('Enter value') : props.valuePlaceholder || undefined;
+    const fieldWidth = props.fieldWidth ?? 200;
+    const operatorMinWidth = props.operatorMinWidth ?? 120;
 
     const options = useFilterOptions(collection, { filterableFieldNames, nonfilterableFieldNames, noIgnore, t });
 
@@ -114,8 +130,10 @@ export const CollectionFilterItem: FC<CollectionFilterItemProps> = observer(
       [operatorOptions, operator],
     );
 
-    const handleFieldChange = (next: (string | number)[]) => {
-      const path = next.map(String);
+    const handleFieldChange = (next?: (string | number)[]) => {
+      // rc-cascader emits `undefined` when its clear icon is clicked in single-select mode, despite its public type
+      // declaring an array. Treat that runtime value as an empty path so clearing the field also resets the row.
+      const path = (next ?? []).map(String);
       props.value.path = path.join('.');
       const leaf = findOptionByPath(options, path);
       props.value.operator = leaf?.operators?.[0]?.value || '';
@@ -135,8 +153,8 @@ export const CollectionFilterItem: FC<CollectionFilterItemProps> = observer(
     return (
       <Space wrap>
         <Cascader
-          style={{ width: 200 }}
-          placeholder={t('Select field')}
+          style={{ width: fieldWidth }}
+          placeholder={fieldPlaceholder}
           options={cascaderOptions}
           value={fieldPath}
           onChange={handleFieldChange}
@@ -145,15 +163,15 @@ export const CollectionFilterItem: FC<CollectionFilterItemProps> = observer(
           popupClassName={cascaderPopupClass}
         />
         <Select
-          style={{ width: 120 }}
-          placeholder={t('Comparision')}
+          style={{ minWidth: operatorMinWidth }}
+          placeholder={operatorPlaceholder}
           value={operator || undefined}
           onChange={handleOperatorChange}
           disabled={!leftValue || operatorOptions.length === 0}
         >
           {operatorOptions.map((op) => (
             <Select.Option key={op.value} value={op.value}>
-              {op.label}
+              {typeof op.label === 'string' ? t(op.label) : op.label}
             </Select.Option>
           ))}
         </Select>
@@ -162,7 +180,7 @@ export const CollectionFilterItem: FC<CollectionFilterItemProps> = observer(
           operator={selectedOperator}
           value={rightValue}
           onChange={handleValueChange}
-          placeholder={t('Enter value')}
+          placeholder={valuePlaceholder}
           t={t}
           app={app}
         />
@@ -179,7 +197,16 @@ export function createCollectionFilterItem(
   collection: Collection,
   bound?: Pick<
     CollectionFilterItemProps,
-    'filterableFieldNames' | 'nonfilterableFieldNames' | 'noIgnore' | 't' | 'app'
+    | 'filterableFieldNames'
+    | 'nonfilterableFieldNames'
+    | 'noIgnore'
+    | 't'
+    | 'app'
+    | 'fieldPlaceholder'
+    | 'operatorPlaceholder'
+    | 'valuePlaceholder'
+    | 'fieldWidth'
+    | 'operatorMinWidth'
   >,
 ) {
   const Component: FC<{ value: CollectionFilterItemValue }> = (props) => (

package/src/components/form/filter/CollectionFilterPanel.tsx

@@ -30,6 +30,8 @@ export interface CollectionFilterPanelProps {
   collection: Collection | undefined;
   /** Previously compiled filter param used to seed the editable filter group. */
   initialValue?: CompiledFilter;
+  /** Default compiled filter used both for initial empty state and Reset. */
+  defaultValue?: CompiledFilter;
   /** Called when the condition group structure changes or `reset()` is invoked. */
   onChange?: (filter: CompiledFilter) => void;
   /** Translator. Defaults to identity. */
@@ -51,6 +53,7 @@ export const CollectionFilterPanel = forwardRef<CollectionFilterPanelRef, Collec
   const {
     collection,
     initialValue,
+    defaultValue,
     onChange,
     t = identity,
     filterableFieldNames,
@@ -61,6 +64,7 @@ export const CollectionFilterPanel = forwardRef<CollectionFilterPanelRef, Collec
   const filterAction = useFilterActionProps({
     collection,
     initialValue,
+    defaultValue,
     filterableFieldNames,
     nonfilterableFieldNames,
     noIgnore,

package/src/components/form/filter/__tests__/CollectionFilterItem.test.tsx

@@ -104,6 +104,23 @@ describe('CollectionFilterItem', () => {
     });
   });
 
+  it('clears the filter row when the selected field is cleared', async () => {
+    const value = observable({ path: 'username', operator: '$eq', value: 'alice' });
+    const collection = buildStubCollection([{ name: 'username', title: 'Username' }]);
+
+    const { container } = render(<CollectionFilterItem value={value} collection={collection} />);
+
+    const clear = container.querySelector('.ant-select-clear');
+    if (!clear) throw new Error('expected Cascader clear control to be rendered');
+    fireEvent.mouseDown(clear);
+
+    await waitFor(() => {
+      expect(value.path).toBe('');
+      expect(value.operator).toBe('');
+      expect(value.value).toBeUndefined();
+    });
+  });
+
   it('clears value when the operator changes', async () => {
     const value = observable({ path: 'username', operator: '$eq', value: 'alice' });
     const collection = buildStubCollection([{ name: 'username', title: 'Username' }]);
@@ -244,4 +261,42 @@ describe('CollectionFilterItem', () => {
       expect(value.path).toBe('username');
     });
   });
+
+  it('keeps default widths at 200/120 and honours explicit width/placeholder overrides', () => {
+    const value = observable({ path: 'username', operator: '$eq', value: '' });
+    const collection = buildStubCollection([{ name: 'username', title: 'Username' }]);
+
+    const { container, rerender } = render(<CollectionFilterItem value={value} collection={collection} />);
+
+    let selects = container.querySelectorAll('.ant-select');
+    expect(selects[0]).toHaveStyle({ width: '200px' });
+    expect(selects[1]).toHaveStyle({ minWidth: '120px' });
+
+    rerender(
+      <CollectionFilterItem
+        value={observable({ path: '', operator: '', value: '' })}
+        collection={collection}
+        fieldWidth={160}
+        operatorMinWidth={110}
+        fieldPlaceholder="Choose field"
+        operatorPlaceholder="Choose operator"
+      />,
+    );
+
+    selects = container.querySelectorAll('.ant-select');
+    expect(selects[0]).toHaveStyle({ width: '160px' });
+    expect(selects[1]).toHaveStyle({ minWidth: '110px' });
+    expect(screen.getByText('Choose field')).toBeInTheDocument();
+  });
+
+  it('lets callers suppress the fallback value placeholder', () => {
+    const value = observable({ path: 'username', operator: '$eq', value: '' });
+    const collection = buildStubCollection([{ name: 'username', title: 'Username' }]);
+
+    const { rerender } = render(<CollectionFilterItem value={value} collection={collection} />);
+    expect(screen.getByPlaceholderText('Enter value')).toBeInTheDocument();
+
+    rerender(<CollectionFilterItem value={value} collection={collection} valuePlaceholder={null} />);
+    expect(screen.queryByPlaceholderText('Enter value')).not.toBeInTheDocument();
+  });
 });