Add remaining components

Author: jakeboone02

AGENTS.md

@@ -173,6 +173,12 @@ it passes whether or not the `snapshot()` is there:
 - Element order and conditional rendering are specified by React's `Rule.tsx` / `RuleGroup.tsx`.
   Read them as a spec, not as code to translate.
 - `Label` is a plain function component, not a fragment-returning helper with stray whitespace.
+- **`defaultControlElements` is an object of getters, deliberately.** `Rule` → `RuleSubQuery` →
+  `defaultControlElements` → `Rule` is a real import cycle (a subquery builds its own state, which
+  needs the default controls). Eager entries throw a TDZ `ReferenceError` whenever `Rule.tsx` is
+  the module the cycle is entered through. Do not "simplify" them back to plain properties.
+- A subquery renders **bare `<div>`s** for its group header/body, not a `rule-group` element
+  (React's `RuleWithSubQueryGroupComponentsWrapper`), and it is not customizable.
 
 ### Types
 
@@ -197,11 +203,11 @@ it passes whether or not the `snapshot()` is there:
 **Standing rule: every gate must be proven to fail.** When a step adds a gate, deliberately break
 it, record that it went red, then revert. A gate that cannot fail is worse than none.
 
-Current gates (step 3): `check:versions`, `fmt:check`, `build`, `check`, `check:exports`,
-`lint`, `test:coverage` (global 80% lines, plus a per-directory 90% lines on
-`packages/*/src/reactive/**` — both now non-vacuous, and both proved red at step 3 with no
-injected dead code), `test:ssr`. (`conformance` is a stub that exits 0 until step 6; it is not a
-gate yet.)
+Current gates (step 5): `check:versions`, `fmt:check`, `build`, `check`, `check:exports`,
+`lint`, `test:coverage` (global 80% lines, plus a per-directory 90% lines on `packages/*/src/**` —
+widened at step 5 from the step-3 `packages/*/src/reactive/**`, which it subsumes; both
+non-vacuous, both proved red with no injected dead code), `test:ssr`. (`conformance` is a stub
+that exits 0 until step 6; it is not a gate yet.)
 
 All five were proven red at step 1 and reverted: coverage (threshold to 99 + an injected
 uncovered function), export-condition **order** (`import` moved first), export-condition

packages/solid-querybuilder/src/components/InlineCombinator.test.tsx

@@ -0,0 +1,77 @@
+import { defaultCombinators, standardClassnames } from '@react-querybuilder/core';
+import { render } from '@solidjs/testing-library';
+import { describe, expect, it, vi } from 'vitest';
+import type { InlineCombinatorProps } from '../types/props.js';
+import { InlineCombinator } from './InlineCombinator.jsx';
+import { ValueSelector } from './ValueSelector.jsx';
+
+const baseProps = (overrides: Partial<InlineCombinatorProps> = {}): InlineCombinatorProps =>
+  ({
+    component: ValueSelector,
+    options: defaultCombinators,
+    value: 'and',
+    title: 'Combinator',
+    className: 'ruleGroup-combinators',
+    handleOnChange: () => {},
+    testID: 'ignored',
+    rules: [],
+    ruleGroup: { combinator: 'and', rules: [] },
+    path: [1],
+    level: 1,
+    schema: { classNames: {}, suppressStandardClassnames: false },
+    ...overrides,
+  }) as unknown as InlineCombinatorProps;
+
+const Custom = () => <span data-testid="custom-selector" />;
+
+describe('InlineCombinator', () => {
+  it('wraps the selector in a div carrying the between-rules classes', () => {
+    const { getByTestId } = render(() => (
+      <InlineCombinator
+        {...baseProps({
+          schema: {
+            classNames: { betweenRules: 'custom-between' },
+            suppressStandardClassnames: false,
+          },
+        } as never)}
+      />
+    ));
+    const wrapper = getByTestId('inline-combinator');
+    expect(wrapper.tagName).toBe('DIV');
+    expect(wrapper).toHaveClass(standardClassnames.betweenRules);
+    expect(wrapper).toHaveClass('custom-between');
+  });
+
+  it('suppresses the standard class when asked', () => {
+    const { getByTestId } = render(() => (
+      <InlineCombinator
+        {...baseProps({
+          schema: { classNames: {}, suppressStandardClassnames: true },
+        } as never)}
+      />
+    ));
+    expect(getByTestId('inline-combinator')).not.toHaveClass(standardClassnames.betweenRules);
+  });
+
+  it('forwards every prop but `component` to the selector, overriding its testID', () => {
+    const handleOnChange = vi.fn();
+    const { getByTestId } = render(() => <InlineCombinator {...baseProps({ handleOnChange })} />);
+    const select = getByTestId('combinators') as HTMLSelectElement;
+    // `testID` is overridden, so the incoming `'ignored'` never reaches the DOM.
+    expect(getByTestId('inline-combinator').querySelector('[data-testid="ignored"]')).toBeNull();
+    expect(select.tagName).toBe('SELECT');
+    expect(select).toHaveClass('ruleGroup-combinators');
+    expect(select).toHaveAttribute('title', 'Combinator');
+    expect(select.value).toBe('and');
+    select.value = 'or';
+    select.dispatchEvent(new Event('change', { bubbles: true }));
+    expect(handleOnChange).toHaveBeenCalledWith('or');
+  });
+
+  it('renders whatever selector it is handed', () => {
+    const { getByTestId } = render(() => (
+      <InlineCombinator {...baseProps({ component: Custom as never })} />
+    ));
+    expect(getByTestId('custom-selector')).toBeInTheDocument();
+  });
+});

packages/solid-querybuilder/src/components/InlineCombinator.tsx

@@ -0,0 +1,35 @@
+import { TestID, clsx, standardClassnames } from '@react-querybuilder/core';
+import type { JSX } from '@solidjs/web';
+import { Dynamic } from '@solidjs/web';
+import { omit } from 'solid-js';
+import type { InlineCombinatorProps } from '../types/props.js';
+
+/**
+ * Default `inlineCombinator` component: a small `<div>` around the `combinatorSelector`
+ * component, rendered when either `showCombinatorsBetweenRules` or independent combinators are
+ * in play.
+ *
+ * Port of React Query Builder's `InlineCombinator`. The selector to render arrives as the
+ * `component` prop and everything else is forwarded to it, with `testID` overridden to
+ * `TestID.combinators` — which is why callers render this with `createComponent` rather than
+ * `<Dynamic>`: `<Dynamic>` consumes a prop named `component` for itself and can never forward
+ * one.
+ */
+export const InlineCombinator = (props: InlineCombinatorProps): JSX.Element => {
+  const className = () =>
+    clsx(
+      props.schema.suppressStandardClassnames || standardClassnames.betweenRules,
+      props.schema.classNames.betweenRules
+    );
+
+  return (
+    <div class={className()} data-testid={TestID.inlineCombinator}>
+      {/* `omit` returns the rest only; the local half is read straight off `props`. */}
+      <Dynamic
+        component={props.component}
+        {...omit(props, 'component')}
+        testID={TestID.combinators}
+      />
+    </div>
+  );
+};

packages/solid-querybuilder/src/components/MatchModeEditor.test.tsx

@@ -0,0 +1,133 @@
+import { render } from '@solidjs/testing-library';
+import { describe, expect, it, vi } from 'vitest';
+import type { MatchModeEditorProps } from '../types/props.js';
+import { MatchModeEditor } from './MatchModeEditor.jsx';
+import { ValueEditor } from './ValueEditor.jsx';
+import { ValueSelector } from './ValueSelector.jsx';
+
+const options = [
+  { name: 'all', value: 'all', label: 'all' },
+  { name: 'atLeast', value: 'atLeast', label: 'at least' },
+];
+
+const schema = {
+  controls: { valueSelector: ValueSelector, valueEditor: ValueEditor },
+  classNames: {},
+  suppressStandardClassnames: false,
+};
+
+const baseProps = (overrides: Partial<MatchModeEditorProps> = {}): MatchModeEditorProps =>
+  ({
+    testID: 'match-mode-editor',
+    className: 'rule-matchMode',
+    title: 'Match mode',
+    match: { mode: 'all' },
+    options,
+    field: 'sub',
+    fieldData: { name: 'sub', value: 'sub', label: 'Sub' },
+    classNames: { matchMode: 'rule-matchMode', matchThreshold: 'rule-matchThreshold' },
+    handleOnChange: () => {},
+    path: [0],
+    level: 1,
+    schema,
+    ...overrides,
+  }) as unknown as MatchModeEditorProps;
+
+/** Both controls share one `testID`, as upstream does. */
+const controls = (getAllByTestId: (id: string) => HTMLElement[]): HTMLElement[] =>
+  getAllByTestId('match-mode-editor');
+
+describe('MatchModeEditor', () => {
+  it('renders only the mode selector for a mode with no threshold', () => {
+    const { getAllByTestId } = render(() => <MatchModeEditor {...baseProps()} />);
+    const rendered = controls(getAllByTestId);
+    expect(rendered).toHaveLength(1);
+    expect(rendered[0].tagName).toBe('SELECT');
+    expect((rendered[0] as HTMLSelectElement).value).toBe('all');
+    expect(rendered[0]).toHaveClass('rule-matchMode');
+    expect(rendered[0]).toHaveAttribute('title', 'Match mode');
+  });
+
+  it('adds a numeric threshold editor for a mode that takes one', () => {
+    const { getAllByTestId } = render(() => (
+      <MatchModeEditor {...baseProps({ match: { mode: 'atLeast', threshold: 3 } })} />
+    ));
+    const rendered = controls(getAllByTestId);
+    expect(rendered).toHaveLength(2);
+    expect(rendered[1].tagName).toBe('INPUT');
+    expect(rendered[1]).toHaveAttribute('type', 'number');
+    expect((rendered[1] as HTMLInputElement).value).toBe('3');
+  });
+
+  it('defaults the threshold to 1 when switching to a mode that requires one', () => {
+    const handleOnChange = vi.fn();
+    const { getAllByTestId } = render(() => <MatchModeEditor {...baseProps({ handleOnChange })} />);
+    const select = controls(getAllByTestId)[0] as HTMLSelectElement;
+    select.value = 'atLeast';
+    select.dispatchEvent(new Event('change', { bubbles: true }));
+    expect(handleOnChange).toHaveBeenCalledWith({ mode: 'atLeast', threshold: 1 });
+  });
+
+  it('keeps an existing threshold when switching modes', () => {
+    const handleOnChange = vi.fn();
+    const { getAllByTestId } = render(() => (
+      <MatchModeEditor
+        {...baseProps({ match: { mode: 'atLeast', threshold: 4 }, handleOnChange })}
+      />
+    ));
+    const select = controls(getAllByTestId)[0] as HTMLSelectElement;
+    select.value = 'all';
+    select.dispatchEvent(new Event('change', { bubbles: true }));
+    expect(handleOnChange).toHaveBeenCalledWith({ mode: 'all', threshold: 4 });
+  });
+
+  it('reports a parsed number when the threshold changes', () => {
+    const handleOnChange = vi.fn();
+    const { getAllByTestId } = render(() => (
+      <MatchModeEditor
+        {...baseProps({ match: { mode: 'exactly', threshold: 2 }, handleOnChange })}
+      />
+    ));
+    const input = controls(getAllByTestId)[1] as HTMLInputElement;
+    input.value = '7';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    expect(handleOnChange).toHaveBeenCalledWith({ mode: 'exactly', threshold: 7 });
+  });
+
+  it('clamps a negative threshold and defaults a missing one', () => {
+    const { getAllByTestId, unmount } = render(() => (
+      <MatchModeEditor {...baseProps({ match: { mode: 'atMost', threshold: -5 } })} />
+    ));
+    expect((controls(getAllByTestId)[1] as HTMLInputElement).value).toBe('0');
+    unmount();
+
+    const second = render(() => <MatchModeEditor {...baseProps({ match: { mode: 'atMost' } })} />);
+    expect((second.getAllByTestId('match-mode-editor')[1] as HTMLInputElement).value).toBe('1');
+  });
+
+  it('passes the threshold placeholder through as field data', () => {
+    const { getAllByTestId } = render(() => (
+      <MatchModeEditor
+        {...baseProps({
+          match: { mode: 'atLeast', threshold: 1 },
+          thresholdPlaceholder: 'How many',
+        })}
+      />
+    ));
+    expect(controls(getAllByTestId)[1]).toHaveAttribute('placeholder', 'How many');
+  });
+
+  it('accepts replacement selector and editor components', () => {
+    const { getByTestId } = render(() => (
+      <MatchModeEditor
+        {...baseProps({
+          match: { mode: 'atLeast', threshold: 1 },
+          selectorComponent: (() => <span data-testid="custom-selector" />) as never,
+          numericEditorComponent: (() => <span data-testid="custom-editor" />) as never,
+        })}
+      />
+    ));
+    expect(getByTestId('custom-selector')).toBeInTheDocument();
+    expect(getByTestId('custom-editor')).toBeInTheDocument();
+  });
+});

packages/solid-querybuilder/src/components/MatchModeEditor.tsx

@@ -0,0 +1,102 @@
+import type { FullField, MatchMode } from '@react-querybuilder/core';
+import { lc, parseNumber } from '@react-querybuilder/core';
+import type { JSX } from '@solidjs/web';
+import { Dynamic } from '@solidjs/web';
+import { Show, createMemo, merge } from 'solid-js';
+import type { MatchModeEditorProps } from '../types/props.js';
+
+const dummyFieldData: FullField = { name: '', value: '', label: '' };
+const dummyPath: never[] = [];
+
+/** Whether a match mode carries a numeric threshold. */
+const requiresThreshold = (mm?: string | null): boolean =>
+  ['atleast', 'atmost', 'exactly'].includes(lc(mm) ?? '');
+
+/**
+ * Default `matchModeEditor` component: a mode selector, plus a numeric threshold editor for the
+ * modes that take one.
+ *
+ * Port of React Query Builder's `MatchModeEditor`. Both controls carry the *same* `testID`, as
+ * upstream does — tests reach the threshold editor with `getAllByTestId(...)[1]`.
+ *
+ * React's `useMatchModeEditor` hook is not reproduced as a composable: it is four memos and two
+ * callbacks, all of which are one-liners here.
+ */
+export const MatchModeEditor = (props: MatchModeEditorProps): JSX.Element => {
+  const selectorComponent = () => props.selectorComponent ?? props.schema.controls.valueSelector;
+  const numericEditorComponent = () =>
+    props.numericEditorComponent ?? props.schema.controls.valueEditor;
+
+  const thresholdNum = createMemo(() =>
+    typeof props.match.threshold === 'number' ? Math.max(0, props.match.threshold) : 1
+  );
+  const thresholdRule = createMemo(() => ({ field: '', operator: '=', value: thresholdNum() }));
+  const thresholdFieldData = createMemo(() =>
+    props.thresholdPlaceholder
+      ? { ...dummyFieldData, placeholder: props.thresholdPlaceholder }
+      : dummyFieldData
+  );
+
+  // `merge`, not a spread: `schema` is a getter object, and spreading it would snapshot every
+  // getter into a value and sever reactivity. `merge` is lazy.
+  const thresholdSchema = merge(
+    () => props.schema,
+    () => ({ parseNumbers: true }) as const
+  );
+
+  const handleChangeMode = (mode: MatchMode): void => {
+    props.handleOnChange(
+      requiresThreshold(mode) && typeof props.match.threshold !== 'number'
+        ? { ...props.match, mode, threshold: 1 }
+        : { ...props.match, mode }
+    );
+  };
+
+  const handleChangeThreshold = (threshold: number): void => {
+    props.handleOnChange({
+      ...props.match,
+      threshold: parseNumber(threshold, { parseNumbers: true }),
+    });
+  };
+
+  return (
+    <>
+      <Dynamic
+        component={selectorComponent()}
+        schema={props.schema}
+        testID={props.testID}
+        className={props.className}
+        title={props.title}
+        handleOnChange={handleChangeMode}
+        disabled={props.disabled}
+        value={props.match.mode}
+        options={props.options}
+        multiple={false}
+        listsAsArrays={false}
+        path={dummyPath}
+        level={0}
+      />
+      <Show when={requiresThreshold(props.match.mode)}>
+        <Dynamic
+          component={numericEditorComponent()}
+          skipHook
+          testID={props.testID}
+          inputType="number"
+          title={props.title}
+          className={props.className}
+          disabled={props.disabled}
+          handleOnChange={handleChangeThreshold}
+          field=""
+          operator=""
+          value={thresholdNum()}
+          valueSource="value"
+          fieldData={thresholdFieldData()}
+          schema={thresholdSchema}
+          path={dummyPath}
+          level={0}
+          rule={thresholdRule()}
+        />
+      </Show>
+    </>
+  );
+};