@proteos/ui 0.31.0

package/src/components/record-filter/filter-value-input.tsx

@@ -0,0 +1,351 @@
+import { type CalendarDate, parseDate } from '@internationalized/date'
+import { createContext, type ReactNode, useContext } from 'react'
+import { cn } from '../../lib/cn'
+import { Badge } from '../badge/badge'
+import {
+  BadgeMultiSelect,
+  type BadgeMultiSelectOption,
+} from '../badge-multi-select/badge-multi-select'
+import { DatePicker } from '../date-picker/date-picker'
+import { Input } from '../input/input'
+import { SegmentedControl } from '../segmented-control/segmented-control'
+import { Select, type SelectOption } from '../select/select'
+import { TagInput } from '../tag-input/tag-input'
+import { arityOf } from './operators'
+import type { ComparisonOperator, FilterField, FilterValue } from './types'
+
+/* =========================================================================
+   FilterValueInput — type-aware value editor for a single filter element.
+   Routes to the right primitive based on `(field.type, operator.arity)`:
+
+     arity 0  →  null (no input — for empty / not_empty)
+     arity 'n' (in / not_in)
+       enum   →  BadgeMultiSelect
+       other  →  TagInput (free-form list)
+     arity 1
+       enum     →  Select with Badge in renderItem
+       boolean  →  SegmentedControl (true / false)
+       datetime →  DatePicker
+       other    →  Input (text or number)
+   ========================================================================= */
+
+/**
+ * Render-prop signature for overriding the default value editor. Called
+ * with everything `FilterValueInput` knows about the leaf. Return a
+ * `ReactNode` to take over rendering, or `undefined` to fall through to
+ * the built-in branches (the common pattern: override one specific
+ * `field.type`, return `undefined` for the rest).
+ *
+ * Used to plug in product-specific editors the lib can't know about —
+ * e.g. a related-record picker that hits the SDK for typeahead.
+ */
+export type FilterValueInputRenderer = (props: {
+  field: FilterField
+  operator: ComparisonOperator
+  value: FilterValue
+  onChange: (next: FilterValue) => void
+  autoFocus?: boolean
+  isDisabled?: boolean
+}) => ReactNode | undefined
+
+/* =========================================================================
+   Context — the renderer is injected via React context rather than a
+   prop drilled through five levels of intermediates. Top-level entry
+   points (RecordFilterEditor, RecordFilterButton, RecordFilterChips,
+   RecordFilterBuilderPanel) wrap their tree in `RenderValueInputProvider`;
+   `FilterValueInput` reads from `useRenderValueInput()`. Adding future
+   slots (operator picker, attribute picker) follows the same shape
+   without growing the public prop surface of internal components.
+   ========================================================================= */
+
+const RenderValueInputContext = createContext<FilterValueInputRenderer | undefined>(undefined)
+
+export function RenderValueInputProvider({
+  renderer,
+  children,
+}: {
+  renderer: FilterValueInputRenderer | undefined
+  children: ReactNode
+}) {
+  // Skip wrapping when there's no renderer so intermediate components
+  // (e.g. RecordFilterEditor when invoked inside RecordFilterBuilderPanel)
+  // don't shadow the outer provider's value with `undefined`. The closest
+  // provider wins in React's context model, so an undefined-wrapping
+  // intermediate would silently break the chain from outer entry points.
+  if (renderer === undefined) return <>{children}</>
+  return (
+    <RenderValueInputContext.Provider value={renderer}>{children}</RenderValueInputContext.Provider>
+  )
+}
+
+export function useRenderValueInput(): FilterValueInputRenderer | undefined {
+  return useContext(RenderValueInputContext)
+}
+
+export type FilterValueInputProps = {
+  field: FilterField
+  operator: ComparisonOperator
+  value: FilterValue
+  onChange: (next: FilterValue) => void
+  isDisabled?: boolean
+  /** When true, focus the routed leaf on mount. The wrapping `<div>` is
+   *  keyed on `${field.path}-${operator}`, so an operator change remounts
+   *  the leaf and re-fires its `autoFocus` reliably across all six leaf
+   *  branches. Committed values come from props so they survive remount;
+   *  mid-typed drafts (TagInput buffer, DatePicker partial segment,
+   *  Combobox search) are reset — acceptable since the user took the
+   *  deliberate operator-change action. */
+  autoFocus?: boolean
+  className?: string
+}
+
+export function FilterValueInput({
+  field,
+  operator,
+  value,
+  onChange,
+  isDisabled,
+  autoFocus = false,
+  className,
+}: FilterValueInputProps) {
+  const renderValueInput = useRenderValueInput()
+  const arity = arityOf(operator)
+  if (arity === 0) return null
+
+  // Context-provided override (e.g. relation picker). Called first so
+  // it can claim any (field.type, operator) combination; returning
+  // `undefined` falls through to the built-in branches below.
+  if (renderValueInput) {
+    const custom = renderValueInput({
+      field,
+      operator,
+      value,
+      onChange,
+      autoFocus,
+      ...(isDisabled !== undefined ? { isDisabled } : {}),
+    })
+    if (custom !== undefined) {
+      return <div key={`${field.path}-${operator}`}>{custom}</div>
+    }
+  }
+
+  const leaf = (() => {
+    /* ---------- multi-value (in / not_in) ---------- */
+    if (arity === 'n') {
+      if (field.type === 'enum') {
+        return (
+          <EnumMultiValue
+            field={field}
+            value={asStringArray(value)}
+            onChange={(next) => onChange(next)}
+            autoFocus={autoFocus}
+            {...(isDisabled !== undefined ? { isDisabled } : {})}
+            {...(className !== undefined ? { className } : {})}
+          />
+        )
+      }
+      return (
+        <TagInput
+          size="sm"
+          value={asStringArray(value)}
+          onChange={(next) => onChange(next)}
+          inputType={
+            field.type === 'number' || field.type === 'integer' || field.type === 'currency'
+              ? 'number'
+              : 'text'
+          }
+          placeholder="Type, Enter to add"
+          autoFocus={autoFocus}
+          {...(isDisabled !== undefined ? { isDisabled } : {})}
+          {...(className !== undefined ? { className } : {})}
+        />
+      )
+    }
+
+    /* ---------- single value ---------- */
+    if (field.type === 'enum') {
+      return (
+        <EnumSingleValue
+          field={field}
+          value={asString(value)}
+          onChange={(next) => onChange(next)}
+          autoFocus={autoFocus}
+          {...(isDisabled !== undefined ? { isDisabled } : {})}
+          {...(className !== undefined ? { className } : {})}
+        />
+      )
+    }
+
+    if (field.type === 'boolean') {
+      return (
+        <SegmentedControl<'true' | 'false'>
+          size="md"
+          aria-label="Boolean value"
+          options={[
+            { id: 'true', label: 'true' },
+            { id: 'false', label: 'false' },
+          ]}
+          value={asBoolean(value) ? 'true' : 'false'}
+          onChange={(v) => onChange(v === 'true')}
+          autoFocus={autoFocus}
+          {...(isDisabled !== undefined ? { isDisabled } : {})}
+          {...(className !== undefined ? { className } : {})}
+        />
+      )
+    }
+
+    if (field.type === 'datetime') {
+      const stringValue = asString(value)
+      let parsed: CalendarDate | null = null
+      try {
+        parsed = stringValue ? parseDate(stringValue) : null
+      } catch {
+        parsed = null
+      }
+      return (
+        <DatePicker
+          size="sm"
+          aria-label={field.label}
+          value={parsed}
+          onChange={(next) => onChange(next ? next.toString() : '')}
+          autoFocus={autoFocus}
+          {...(isDisabled !== undefined ? { isDisabled } : {})}
+          className={cn('w-full', className)}
+        />
+      )
+    }
+
+    // string / number / integer
+    return (
+      <Input
+        size="sm"
+        aria-label={field.label}
+        value={asString(value)}
+        onChange={(next) => onChange(next)}
+        placeholder={placeholderFor(field, operator)}
+        inputProps={{
+          type:
+            field.type === 'number' || field.type === 'integer' || field.type === 'currency'
+              ? 'number'
+              : (field.inputType ?? 'text'),
+          ...(autoFocus ? { autoFocus: true } : {}),
+        }}
+        {...(isDisabled !== undefined ? { isDisabled } : {})}
+        className={cn('w-full', className)}
+      />
+    )
+  })()
+
+  // Key forces a fresh mount on every operator change so the leaf's
+  // `autoFocus` re-fires reliably even when the leaf component type is
+  // unchanged (e.g. `eq` → `not_eq`, both string-arity-1 → both `Input`).
+  return <div key={`${field.path}-${operator}`}>{leaf}</div>
+}
+
+/* ----- enum single via lib `Select` with Badge in renderItem ----------- */
+function EnumSingleValue({
+  field,
+  value,
+  onChange,
+  isDisabled,
+  autoFocus,
+  className,
+}: {
+  field: FilterField
+  value: string
+  onChange: (next: string) => void
+  isDisabled?: boolean
+  autoFocus?: boolean
+  className?: string
+}) {
+  const options: SelectOption<string>[] = (field.options ?? []).map((o) => ({
+    id: o.value,
+    label: o.label,
+  }))
+  return (
+    <Select<string>
+      size="sm"
+      aria-label={field.label}
+      options={options}
+      selectedKey={value === '' ? null : value}
+      onSelectionChange={(next) => onChange(next == null ? '' : String(next))}
+      renderItem={(o) => {
+        const variant = field.options?.find((x) => x.value === o.id)?.variant
+        return <Badge variant={variant}>{o.label}</Badge>
+      }}
+      {...(isDisabled !== undefined ? { isDisabled } : {})}
+      {...(autoFocus ? { autoFocus: true } : {})}
+      className={cn('w-full', className)}
+    />
+  )
+}
+
+/* ----- enum multi via lib `BadgeMultiSelect` --------------------------- */
+function EnumMultiValue({
+  field,
+  value,
+  onChange,
+  isDisabled,
+  autoFocus,
+  className,
+}: {
+  field: FilterField
+  value: string[]
+  onChange: (next: string[]) => void
+  isDisabled?: boolean
+  autoFocus?: boolean
+  className?: string
+}) {
+  const options: BadgeMultiSelectOption<string>[] = (field.options ?? []).map((o) => ({
+    id: o.value,
+    label: o.label,
+    ...(o.variant ? { variant: o.variant } : {}),
+  }))
+  return (
+    <BadgeMultiSelect<string>
+      size="sm"
+      options={options}
+      selectedKeys={value}
+      onSelectionChange={(keys) => onChange(Array.from(keys))}
+      placeholder="Select values…"
+      {...(isDisabled !== undefined ? { isDisabled } : {})}
+      {...(autoFocus ? { autoFocus: true } : {})}
+      className={cn('w-full', className)}
+    />
+  )
+}
+
+/* ----- value coercers --------------------------------------------------- */
+
+function asString(v: FilterValue): string {
+  if (v == null) return ''
+  if (typeof v === 'string') return v
+  if (typeof v === 'boolean') return v ? 'true' : 'false'
+  if (Array.isArray(v)) return v.join(',')
+  return ''
+}
+
+function asStringArray(v: FilterValue): string[] {
+  if (Array.isArray(v)) return v
+  if (typeof v === 'string' && v.length > 0)
+    return v
+      .split(',')
+      .map((s) => s.trim())
+      .filter(Boolean)
+  return []
+}
+
+function asBoolean(v: FilterValue): boolean {
+  if (typeof v === 'boolean') return v
+  if (typeof v === 'string') return v === 'true'
+  return false
+}
+
+function placeholderFor(field: FilterField, operator: ComparisonOperator): string {
+  if (field.type === 'datetime') return 'yyyy-mm-dd'
+  if (field.type === 'number' || field.type === 'integer' || field.type === 'currency') return '0'
+  if (operator === 'starts_with') return 'starts with…'
+  if (operator === 'ends_with') return 'ends with…'
+  if (operator === 'contains') return 'contains…'
+  return 'value'
+}

package/src/components/record-filter/group-add-controls.tsx

@@ -0,0 +1,77 @@
+import { cn } from '../../lib/cn'
+
+/* =========================================================================
+   GroupAddControls — "+ Add filter" / "+ Add group" footer rendered at the
+   bottom of any group body. The "+ Add group" affordance is gated behind
+   `isComplexEnabled`; in flat mode (the back-compat default) only "+ Add
+   filter" appears, exactly matching the pre-nesting builder panel.
+
+   "+ Add filter" follows the existing pattern: it adds a *pending* row
+   (field === '') whose AttributePicker auto-focuses on mount, rather than
+   opening a separate popover. Keeps consistency with `RecordFilterChips`
+   and avoids a second popover layer inside the builder.
+   ========================================================================= */
+
+export type GroupAddControlsProps = {
+  onAddFilter: () => void
+  onAddGroup?: () => void
+  isComplexEnabled: boolean
+}
+
+export function GroupAddControls({
+  onAddFilter,
+  onAddGroup,
+  isComplexEnabled,
+}: GroupAddControlsProps) {
+  return (
+    <div className="flex items-center gap-1 pl-12 pt-1">
+      <button
+        type="button"
+        onClick={onAddFilter}
+        className={cn(
+          'inline-flex items-center gap-1.5 px-2 py-1 rounded-sm',
+          'text-ink-2 hover:bg-surface-2 hover:text-ink cursor-pointer outline-none',
+        )}
+      >
+        <svg
+          aria-hidden
+          viewBox="0 0 12 12"
+          className="size-3"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+        >
+          <path d="M6 2v8M2 6h8" />
+        </svg>
+        <span className="font-sans text-[12.5px]">Add filter</span>
+      </button>
+      {isComplexEnabled && onAddGroup ? (
+        <button
+          type="button"
+          onClick={onAddGroup}
+          title="Add a nested group with its own logical operator"
+          className={cn(
+            'inline-flex items-center gap-1.5 px-2 py-1 rounded-sm',
+            'text-ink-2 hover:bg-surface-2 hover:text-ink cursor-pointer outline-none',
+          )}
+        >
+          <svg
+            aria-hidden
+            viewBox="0 0 14 14"
+            className="size-3"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M5 3a3 3 0 0 0-3 3v2a3 3 0 0 0 3 3M9 3a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3" />
+            <path d="M7 5v4M5 7h4" />
+          </svg>
+          <span className="font-sans text-[12.5px]">Add group</span>
+        </button>
+      ) : null}
+    </div>
+  )
+}

package/src/components/record-filter/group-body.tsx

@@ -0,0 +1,173 @@
+import { FilterRow, rebaseRowOnFieldChange, rebaseRowOnOperatorChange } from './filter-row'
+import { GroupAddControls } from './group-add-controls'
+import {
+  addPendingLeaf,
+  addSubgroup,
+  removeLeaf,
+  removeSubgroup,
+  replaceLeaf,
+  updateLeaf,
+  updateSubgroup,
+  wrapLeafInGroup,
+} from './group-mutations'
+import { NestedGroup } from './nested-group'
+import { arityOf } from './operators'
+import type { FilterField, FilterGroup } from './types'
+
+/* =========================================================================
+   GroupBody — body of a single FilterGroup, used at the root of the popover
+   panel and recursively inside `NestedGroup`. Renders:
+
+     1. one `FilterRow` per leaf (`group.elements`)
+     2. one `NestedGroup` per sub-group (`group.groups`) — only when
+        `isComplexEnabled`; otherwise sub-groups are silently skipped (the
+        chip row still surfaces them as a read-only pill)
+     3. a `GroupAddControls` footer with "+ Add filter" (always) and
+        "+ Add group" (only when `isComplexEnabled`)
+
+   Auto-focus signals are only wired at the root — nested groups don't get
+   the field→operator→value focus chain. This is a deliberate scope cut:
+   adding to a nested group is a click action, and tracking root-vs-nested
+   focus paths through arbitrary depth wasn't worth the v1 complexity.
+   ========================================================================= */
+
+export type GroupBodyProps = {
+  group: FilterGroup
+  fields: ReadonlyArray<FilterField>
+  fieldsByPath: Record<string, FilterField>
+  onChange: (next: FilterGroup) => void
+  isRoot: boolean
+  isComplexEnabled: boolean
+  showFieldIcons: boolean
+  showJoinerToggle: boolean
+  /** Root-only auto-focus index for the AttributePicker. */
+  autoFocusIndex?: number | null
+  setAutoFocusIndex?: (next: number | null) => void
+  /** Root-only auto-focus index for the OperatorPicker. */
+  autoFocusOperatorIndex?: number | null
+  setAutoFocusOperatorIndex?: (next: number | null) => void
+  /** Root-only auto-focus index for the value cell. */
+  autoFocusValueIndex?: number | null
+  setAutoFocusValueIndex?: (next: number | null) => void
+  /** Optional submit chain — Enter on a text/number value adds a new pending
+   *  row at the end of *this* group. Forwarded by the panel for the root. */
+  onSubmitLeaf?: () => void
+  /** Empty-state copy override. Defaults vary per `isRoot`. */
+  emptyText?: string
+}
+
+export function GroupBody({
+  group,
+  fields,
+  fieldsByPath,
+  onChange,
+  isRoot,
+  isComplexEnabled,
+  showFieldIcons,
+  showJoinerToggle,
+  autoFocusIndex = null,
+  setAutoFocusIndex,
+  autoFocusOperatorIndex = null,
+  setAutoFocusOperatorIndex,
+  autoFocusValueIndex = null,
+  setAutoFocusValueIndex,
+  onSubmitLeaf,
+  emptyText,
+}: GroupBodyProps) {
+  const elements = group.elements ?? []
+  const subgroups = group.groups ?? []
+
+  const handleAddFilter = () => {
+    const nextIndex = elements.length
+    onChange(addPendingLeaf(group))
+    setAutoFocusIndex?.(nextIndex)
+  }
+  const handleAddGroup = () => onChange(addSubgroup(group))
+
+  const handleRemoveLeaf = (i: number) => {
+    if (autoFocusIndex === i) setAutoFocusIndex?.(null)
+    if (autoFocusOperatorIndex === i) setAutoFocusOperatorIndex?.(null)
+    if (autoFocusValueIndex === i) setAutoFocusValueIndex?.(null)
+    onChange(removeLeaf(group, i))
+  }
+
+  const isEmpty = elements.length === 0 && (!isComplexEnabled || subgroups.length === 0)
+
+  return (
+    <div className="flex flex-col gap-1">
+      {isEmpty ? (
+        <div
+          className={
+            (isRoot ? 'px-3 py-6' : 'px-2 py-3') +
+            ' text-center font-mono text-[11.5px] text-ink-4'
+          }
+        >
+          {emptyText ?? (isRoot
+            ? 'No filters. Add one to narrow the list.'
+            : 'Empty group. Add a filter or another group.')}
+        </div>
+      ) : null}
+
+      {elements.map((el, i) => {
+        const field = fieldsByPath[el.field]
+        return (
+          <FilterRow
+            // biome-ignore lint/suspicious/noArrayIndexKey: filter elements have no stable id; index disambiguates duplicate-field rows
+            key={`${el.field}-${i}`}
+            index={i}
+            joiner={group.logicalOperator}
+            {...(field ? { field } : {})}
+            element={el}
+            fields={fields}
+            autoFocus={autoFocusIndex === i}
+            autoFocusOperator={autoFocusOperatorIndex === i}
+            onAutoFocusOperatorConsumed={() => setAutoFocusOperatorIndex?.(null)}
+            autoFocusValue={autoFocusValueIndex === i}
+            onAutoFocusValueConsumed={() => setAutoFocusValueIndex?.(null)}
+            {...(onSubmitLeaf ? { onSubmit: onSubmitLeaf } : {})}
+            onChangeField={(picked) => {
+              if (autoFocusIndex === i) setAutoFocusIndex?.(null)
+              setAutoFocusOperatorIndex?.(i)
+              onChange(replaceLeaf(group, i, rebaseRowOnFieldChange(el, picked)))
+            }}
+            onChangeOperator={(opId) => {
+              if (!field) return
+              if (arityOf(opId) !== 0) setAutoFocusValueIndex?.(i)
+              onChange(replaceLeaf(group, i, rebaseRowOnOperatorChange(el, field, opId)))
+            }}
+            onChangeValue={(v) => onChange(updateLeaf(group, i, { value: v }))}
+            onRemove={() => handleRemoveLeaf(i)}
+            {...(isComplexEnabled && field
+              ? { onWrap: () => onChange(wrapLeafInGroup(group, i)) }
+              : {})}
+          />
+        )
+      })}
+
+      {isComplexEnabled
+        ? subgroups.map((sub, i) => (
+            <NestedGroup
+              // biome-ignore lint/suspicious/noArrayIndexKey: sub-groups have no stable id
+              key={`group-${i}`}
+              index={elements.length + i}
+              joiner={group.logicalOperator}
+              group={sub}
+              fields={fields}
+              fieldsByPath={fieldsByPath}
+              onChange={(next) => onChange(updateSubgroup(group, i, next))}
+              onRemove={() => onChange(removeSubgroup(group, i))}
+              showFieldIcons={showFieldIcons}
+              showJoinerToggle={showJoinerToggle}
+              isComplexEnabled={isComplexEnabled}
+            />
+          ))
+        : null}
+
+      <GroupAddControls
+        onAddFilter={handleAddFilter}
+        onAddGroup={handleAddGroup}
+        isComplexEnabled={isComplexEnabled}
+      />
+    </div>
+  )
+}

package/src/components/record-filter/group-mutations.test.ts

@@ -0,0 +1,104 @@
+import { describe, expect, it } from 'vitest'
+import {
+  addLeaf,
+  addSubgroup,
+  countLeaves,
+  removeLeaf,
+  removeSubgroup,
+  wrapLeafInGroup,
+} from './group-mutations'
+import type { FilterField, FilterGroup } from './types'
+
+const stringField: FilterField = {
+  path: 'name',
+  label: 'Name',
+  shortLabel: 'Name',
+  type: 'string',
+}
+
+const root = (): FilterGroup => ({
+  logicalOperator: 'and',
+  elements: [
+    { field: 'name', operator: 'contains', value: 'a' },
+    { field: 'mrr', operator: 'gt', value: '1000' },
+  ],
+  groups: [],
+})
+
+describe('group-mutations', () => {
+  it('addLeaf appends a new element with the first valid operator and default value', () => {
+    const before: FilterGroup = { logicalOperator: 'and', elements: [], groups: [] }
+    const after = addLeaf(before, stringField)
+    expect(after.elements).toHaveLength(1)
+    expect(after.elements?.[0]?.field).toBe('name')
+    expect(after.elements?.[0]?.operator).toBe('eq')
+    // Inputs are not mutated.
+    expect(before.elements).toHaveLength(0)
+  })
+
+  it('addSubgroup uses the opposite joiner of its parent by default', () => {
+    const before: FilterGroup = { logicalOperator: 'and', elements: [], groups: [] }
+    const after = addSubgroup(before)
+    expect(after.groups).toHaveLength(1)
+    expect(after.groups?.[0]?.logicalOperator).toBe('or')
+  })
+
+  it('removeLeaf deletes by index and is idempotent on an out-of-range index', () => {
+    const before = root()
+    const after = removeLeaf(before, 0)
+    expect(after.elements).toHaveLength(1)
+    expect(after.elements?.[0]?.field).toBe('mrr')
+
+    const noop = removeLeaf(after, 99)
+    expect(noop.elements).toHaveLength(1)
+  })
+
+  it('removeSubgroup deletes by index without touching elements', () => {
+    const before: FilterGroup = {
+      logicalOperator: 'and',
+      elements: [{ field: 'name', operator: 'eq', value: 'a' }],
+      groups: [
+        { logicalOperator: 'or', elements: [], groups: [] },
+        { logicalOperator: 'or', elements: [], groups: [] },
+      ],
+    }
+    const after = removeSubgroup(before, 0)
+    expect(after.groups).toHaveLength(1)
+    expect(after.elements).toHaveLength(1)
+  })
+
+  it('wrapLeafInGroup moves the leaf into a new sub-group with the opposite joiner', () => {
+    const before = root()
+    const after = wrapLeafInGroup(before, 0)
+    expect(after.elements).toHaveLength(1)
+    expect(after.elements?.[0]?.field).toBe('mrr')
+    expect(after.groups).toHaveLength(1)
+    expect(after.groups?.[0]?.logicalOperator).toBe('or')
+    expect(after.groups?.[0]?.elements).toHaveLength(1)
+    expect(after.groups?.[0]?.elements?.[0]?.field).toBe('name')
+  })
+
+  it('countLeaves recurses through nested groups', () => {
+    const tree: FilterGroup = {
+      logicalOperator: 'and',
+      elements: [{ field: 'a', operator: 'eq', value: '' }],
+      groups: [
+        {
+          logicalOperator: 'or',
+          elements: [
+            { field: 'b', operator: 'eq', value: '' },
+            { field: 'c', operator: 'eq', value: '' },
+          ],
+          groups: [
+            {
+              logicalOperator: 'and',
+              elements: [{ field: 'd', operator: 'eq', value: '' }],
+              groups: [],
+            },
+          ],
+        },
+      ],
+    }
+    expect(countLeaves(tree)).toBe(4)
+  })
+})