@object-ui/fields 17.2.0 → 17.5.0

package/src/widgets/PasswordField.tsx

@@ -3,6 +3,7 @@ import { Input } from '@object-ui/components';
 import { Button } from '@object-ui/components';
 import { Eye, EyeOff } from 'lucide-react';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 
 /**
  * PasswordField - Secure password input with visibility toggle
@@ -10,14 +11,13 @@ import { FieldWidgetComponentProps } from './types';
  */
 export function PasswordField({ value, onChange, field, readonly, className, ...props }: FieldWidgetComponentProps<string>) {
   const [showPassword, setShowPassword] = useState(false);
-  const config = field || (props as any).schema;
+  const config = field;
 
   if (readonly) {
     return <span className="text-sm">••••••••</span>;
   }
 
-  // Filter out non-DOM props
-  const { inputType, ...domProps } = props as any;
+  const domProps = toDomProps(props);
 
   return (
     <div className="relative">

package/src/widgets/PeoplePicker.tsx

@@ -316,8 +316,14 @@ export function PeoplePicker({
   // returns the same records (StrictMode double-effect, refetch-on-focus)
   // re-emits a new array; resetting on identity alone yanked the cursor to -1
   // mid-navigation (flaky ArrowDown→Enter, and a real UX nit).
+  //
+  // The id separator is the escaped U+0000 spelling, not the byte itself
+  // (objectstack#5450): one raw NUL made this whole file binary to grep and
+  // ripgrep — a content search printed `binary file matches` and no line. The
+  // runtime value is unchanged, and it is the same separator the `cursorEpoch`
+  // key below already spelled this way.
   const recordsSignature = useMemo(
-    () => query.records.map(r => String(getPersonId(r, idField))).join(''),
+    () => query.records.map(r => String(getPersonId(r, idField))).join('\u0000'),
     [query.records, idField],
   );
   // The reset runs in the RENDER PHASE (the "adjusting state during render"

package/src/widgets/PercentField.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
 import { Input, Slider, EmptyValue } from '@object-ui/components';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 
 /**
  * PercentField - Percentage input with configurable decimal precision
  * Stores values as decimals (0-1) and displays as percentages (0-100%)
  * Includes a slider for interactive control.
  */
-export function PercentField({ value, onChange, field, readonly, errorMessage, className, ...props }: FieldWidgetComponentProps<number>) {
-  const percentField = (field || (props as any).schema) as any;
+export function PercentField({ value, onChange, field, readonly, error, className, ...props }: FieldWidgetComponentProps<number>) {
+  const percentField = field as any;
   const precision = percentField?.precision ?? 2;
 
   // Convention detection. A field declaring `max > 1` (e.g. `max: 100`) stores
@@ -64,7 +65,7 @@ export function PercentField({ value, onChange, field, readonly, errorMessage, c
     <div className="space-y-2">
       <div className="relative">
         <Input
-          {...props}
+          {...toDomProps(props)}
           type="number"
           value={displayValue}
           onChange={handleChange}
@@ -72,7 +73,7 @@ export function PercentField({ value, onChange, field, readonly, errorMessage, c
           disabled={readonly || props.disabled}
           className={`pr-8 ${className || ''}`}
           step={Math.pow(10, -precision).toFixed(precision)}
-          aria-invalid={!!errorMessage}
+          aria-invalid={!!error}
         />
         <span className="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-gray-500">
           %

package/src/widgets/PhoneField.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { Input, EmptyValue } from '@object-ui/components';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 
 /**
  * PhoneField - Telephone number input with tel link in readonly mode
  * Renders as a clickable tel link when readonly, standard phone input otherwise
  */
-export function PhoneField({ value, onChange, field, readonly, errorMessage, ...props }: FieldWidgetComponentProps<string>) {
-  const config = field || (props as any).schema;
+export function PhoneField({ value, onChange, field, readonly, error, ...props }: FieldWidgetComponentProps<string>) {
+  const config = field;
   if (readonly) {
     if (!value) return <EmptyValue />;
     return (
@@ -20,8 +21,7 @@ export function PhoneField({ value, onChange, field, readonly, errorMessage, ...
     );
   }
 
-  // Filter out non-DOM props
-  const { inputType, ...domProps } = props as any;
+  const domProps = toDomProps(props);
 
   return (
     <Input
@@ -31,7 +31,7 @@ export function PhoneField({ value, onChange, field, readonly, errorMessage, ...
       onChange={(e) => onChange(e.target.value)}
       placeholder={config?.placeholder || '(555) 123-4567'}
       disabled={readonly || domProps.disabled}
-      aria-invalid={!!errorMessage}
+      aria-invalid={!!error}
     />
   );
 }

package/src/widgets/QRCodeField.tsx

@@ -2,14 +2,15 @@ import React from 'react';
 import { Input, Button, EmptyValue } from '@object-ui/components';
 import { QrCode, Copy } from 'lucide-react';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 
 /**
  * QR Code field widget - generates QR codes from text
  * Uses a simple SVG-based QR code generator
  */
-export function QRCodeField({ value, onChange, field, readonly, ...props }: FieldWidgetComponentProps<string>) {
+export function QRCodeField({ value, onChange, field, readonly, error, ...props }: FieldWidgetComponentProps<string>) {
   const [showQR, setShowQR] = React.useState(false);
-  const config = field || (props as any).schema;
+  const config = field;
 
   // Simple QR code generation using an external library would be ideal
   // For now, we'll use a service API approach or placeholder
@@ -47,12 +48,18 @@ export function QRCodeField({ value, onChange, field, readonly, ...props }: Fiel
     <div className="space-y-3">
       <div className="flex items-center gap-2">
         <Input
+          // DOM pass-through onto the real focusable control (objectui#3318).
+          {...toDomProps(props)}
           type="text"
           value={value || ''}
           onChange={(e) => onChange(e.target.value)}
           placeholder={config?.placeholder || 'Enter text for QR code'}
           disabled={readonly || props.disabled}
           className={props.className}
+          // AFTER the spread so this widget's own computation wins: `error`
+          // is the published validation slot (#3222), `!!undefined` →
+          // explicit "false".
+          aria-invalid={!!error}
         />
         {value && (
           <>

package/src/widgets/RadioField.tsx

@@ -2,6 +2,9 @@ import React, { useId, useEffect } from 'react';
 import { RadioGroup, RadioGroupItem, Label, EmptyValue } from '@object-ui/components';
 import { isValueStillOffered, type OptionLike } from '@object-ui/core';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
+import { toHostGroupProps } from './toHostGroupProps';
+import { OptionsEmptyState } from './OptionsEmptyState';
 import { useCascadingOptions } from './useCascadingOptions';
 
 type Option = OptionLike;
@@ -24,14 +27,14 @@ export function RadioField({
   field,
   readonly,
   className,
-  schema,
   dependentValues,
   dependsOn: dependsOnProp,
-  emptyHint: _emptyHint,
+  emptyHint,
   dataSource: _dataSource,
+  error,
   ...props
 }: FieldWidgetComponentProps<string>) {
-  const config = (field || schema) as any;
+  const config = field as any;
   const rawOptions: Option[] = config?.options || [];
   const groupId = useId();
   const fieldName = props.name || config?.name || props.id || '';
@@ -47,42 +50,81 @@ export function RadioField({
   // (parent changed / predicate flipped), drop it so no stale pair persists.
   useEffect(() => {
     if (readonly) return;
+    // Never configured → nothing to prune against; see `MultiSelectField`'s
+    // copy of this guard for the measured failure (objectui#4220).
+    if (rawOptions.length === 0) return;
+    // Gated → the authored list is withheld until the `dependsOn` parent is
+    // chosen, so the empty offered set is missing information, not a verdict on
+    // the stored value; clearing here fired on mount (objectui#4247). Same
+    // reasoning, at length, in `MultiSelectField`.
+    if (gated) return;
     if (value === undefined || value === null || (value as unknown) === '') return;
     if (!isValueStillOffered(value, options)) onChange?.(undefined as unknown as string);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [options, gated]);
 
+  // The host's group label has to be consumed on EVERY surface this widget can
+  // render, not only the `RadioGroup` (objectui#3990): both branches below return
+  // before that spread, which is how a field-level `readonly: true` and a
+  // zero-option list ended up with a published label id and no consumer at all.
+  // See `toHostGroupProps` — note the role it emits is `group`, not the
+  // `radiogroup` the editable branch keeps: there is not one radio left in
+  // either of these surfaces.
+  const hostGroupProps = toHostGroupProps(props);
+
   if (readonly) {
-    if (value == null || value === '') return <EmptyValue />;
+    // `EmptyValue`'s own `aria-label` ("No value") is outranked by
+    // `aria-labelledby` per accname, and on the `generic` role that placeholder
+    // span carries it was never exposed as a name anyway.
+    if (value == null || value === '') return <EmptyValue {...hostGroupProps} />;
     // Label from the raw set so a stored value hidden by `visibleWhen` still
     // renders its label rather than a bare id.
     const opt = rawOptions.find((o) => o.value === value);
-    return <span className="text-sm">{opt?.label || String(value)}</span>;
+    return <span {...hostGroupProps} className="text-sm">{opt?.label || String(value)}</span>;
   }
 
   // No offered options is unfillable — surface a legible state instead of an
-  // empty radio group: a dependency-gated list prompts for its controlling
-  // field; an unconfigured / fully-filtered list says so. Mirrors the select.
+  // empty radio group: the host's `emptyHint` when it computed one, else this
+  // widget's own translated copy. Shared with the select / multiselect /
+  // checkboxes so the four cannot drift again (objectui#3231).
   if (options.length === 0) {
-    const hint = gated
-      ? `Select ${dependsOnFields.join(' / ')} first`
-      : 'No options available';
     return (
-      <div
-        data-testid={fieldName ? `radio-empty-${fieldName}` : undefined}
-        className="flex min-h-9 w-full items-center rounded-md border border-input bg-muted/30 px-3 py-2 text-sm text-muted-foreground"
-      >
-        {hint}
-      </div>
+      <OptionsEmptyState
+        emptyHint={emptyHint}
+        gated={gated}
+        dependsOnFields={dependsOnFields}
+        testId={fieldName ? `radio-empty-${fieldName}` : undefined}
+        className="min-h-9"
+        // This box IS the field in this state, so it is what the host label
+        // names (objectui#3990).
+        hostGroupProps={hostGroupProps}
+      />
     );
   }
 
   return (
+    // DOM pass-through onto the radiogroup (objectui#3318). It also carries the
+    // host's group label: when the form renderer associates its `<FormLabel>` by
+    // IDREF (`aria-labelledby`, objectui#3961) that key rides in this same
+    // whitelist spread — `toDomProps` forwards the whole `aria-` family — so this
+    // widget needs no branch of its own. `radiogroup` is already a member of the
+    // group role family, so nothing here overrides it with `role="group"`: it is
+    // the more specific role AND the correct carrier of `aria-invalid` below.
+    //
+    // Unlike Radix
+    // `Select.Root` (#3306) this Root IS a real DOM element — a
+    // `<div role="radiogroup">` — and `radiogroup` is exactly the role
+    // WAI-ARIA designates to carry `aria-invalid` for a set of radios
+    // (`radio` itself does not support it): the group's state is announced
+    // when focus lands on any radio inside it.
     <RadioGroup
+      {...toDomProps(props)}
       value={value ?? ''}
       onValueChange={onChange}
       disabled={props.disabled}
       className={className}
+      // AFTER the spread so this widget's own computation wins (#3222).
+      aria-invalid={!!error}
     >
       {options.map((opt) => {
         // Radix speaks strings — stringify the (possibly numeric,

package/src/widgets/RatingField.tsx

@@ -2,14 +2,16 @@ import React from 'react';
 import { Star } from 'lucide-react';
 import { cn } from '@object-ui/components';
 import { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
+import { toHostGroupProps } from './toHostGroupProps';
 
 /**
  * Rating field widget - provides a star rating input
  * Supports numeric values from 0 to max (default 5)
  */
-export function RatingField({ value, onChange, field, readonly, className, ...props }: FieldWidgetComponentProps<number>) {
+export function RatingField({ value, onChange, field, readonly, className, error, ...props }: FieldWidgetComponentProps<number>) {
   // Get rating-specific configuration from field metadata
-  const ratingField = (field || (props as any).schema) as any;
+  const ratingField = field as any;
   const max = ratingField?.max ?? 5;
   const currentValue = value ?? 0;
 
@@ -18,8 +20,11 @@ export function RatingField({ value, onChange, field, readonly, className, ...pr
   const displayValue = hoverValue !== null ? hoverValue : currentValue;
 
   if (readonly) {
+    // The readonly star row is the field's whole rendered surface, so it — not
+    // only the editable row below — consumes the host's group label
+    // (objectui#3990). See `toHostGroupProps`.
     return (
-      <div className={cn("flex items-center gap-1", className)}>
+      <div {...toHostGroupProps(props)} className={cn("flex items-center gap-1", className)}>
         {Array.from({ length: max }, (_, i) => (
           <Star
             key={i}
@@ -37,8 +42,30 @@ export function RatingField({ value, onChange, field, readonly, className, ...pr
     );
   }
 
+  // DOM pass-through (objectui#3318): the container carries the form
+  // renderer's id / aria-describedby, but NOT its `aria-invalid` — a plain
+  // wrapper div is not where assistive tech reads the invalid state. That
+  // state goes onto every focusable star button below, computed from the
+  // published `error` slot (#3222). `name` is withheld too: it is only
+  // DOM-legal on form controls, and on this div it is exactly the leak
+  // #3291 sweeps for.
+  const {
+    'aria-invalid': _hostAriaInvalid,
+    name: _domName,
+    ...groupDomProps
+  } = toDomProps(props);
+  // When the host named this container by IDREF (`aria-labelledby`,
+  // objectui#3961) it IS the labelled group of stars, so it answers with the
+  // matching role; a `label for` pointing at this `div` was inert. Standalone
+  // (no host label) the markup is unchanged.
+  const isLabelledGroup = groupDomProps['aria-labelledby'] != null;
+
   return (
-    <div className={cn("flex items-center gap-1", className)}>
+    <div
+      {...groupDomProps}
+      role={isLabelledGroup ? 'group' : undefined}
+      className={cn("flex items-center gap-1", className)}
+    >
       {Array.from({ length: max }, (_, i) => (
         <button
           key={i}
@@ -48,6 +75,7 @@ export function RatingField({ value, onChange, field, readonly, className, ...pr
           onMouseLeave={() => setHoverValue(null)}
           className="focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 rounded"
           disabled={readonly || props.disabled}
+          aria-invalid={!!error}
         >
           <Star
             className={`w-5 h-5 transition-colors ${

package/src/widgets/RecipientPickerField.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Combobox, EmptyValue, cn } from '@object-ui/components';
 import { SchemaRendererContext } from '@object-ui/react';
 import type { FieldWidgetComponentProps } from './types';
+import { toDomProps } from './toDomProps';
 import { useFieldTranslation } from './useFieldTranslation';
 
 /**
@@ -53,6 +54,7 @@ export function RecipientPickerField({
   onChange,
   readonly,
   className,
+  error,
   ...props
 }: FieldWidgetComponentProps<string>) {
   const ctx = React.useContext(SchemaRendererContext);
@@ -133,6 +135,8 @@ export function RecipientPickerField({
     // field is never un-editable.
     return (
       <input
+        // DOM pass-through onto the real focusable control (objectui#3318).
+        {...toDomProps(props)}
         className={cn(
           'w-full rounded border bg-background px-2 py-1 text-sm',
           className,
@@ -140,6 +144,7 @@ export function RecipientPickerField({
         value={value ?? ''}
         disabled={disabled || readonly}
         onChange={(e) => onChange(e.target.value as any)}
+        aria-invalid={!!error}
       />
     );
   }
@@ -149,8 +154,19 @@ export function RecipientPickerField({
     return <span className={className}>{options.find((o) => o.value === value)?.label ?? value}</span>;
   }
 
+  // DOM pass-through onto the combobox trigger — the widget's real focusable
+  // control (objectui#3318). `name` is withheld: the trigger is a button, not
+  // a submission control (same reasoning as #3306's SelectTrigger).
+  //
+  // NOTE this widget stays on the #3318 ledger regardless: its dependency-
+  // gated state (no `recipient_type` chosen yet — the state a fresh form and
+  // the registry sweep render) is a plain hint paragraph with no focusable
+  // control, so there is nothing there to carry the attribute.
+  const { name: _domName, ...triggerDomProps } = toDomProps(props);
+
   return (
     <Combobox
+      {...triggerDomProps}
       options={options}
       value={value ?? ''}
       onValueChange={(v) => onChange(v as any)}
@@ -163,6 +179,8 @@ export function RecipientPickerField({
       emptyText={records === null ? t('fields.recipient.loading') : t('fields.recipient.empty')}
       disabled={disabled}
       className={cn('w-full', className)}
+      // AFTER the spread so this widget's own computation wins (#3222).
+      aria-invalid={!!error}
     />
   );
 }

package/src/widgets/RecordPickerDialog.baseFilterShapes.test.tsx

@@ -0,0 +1,191 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * `RecordPickerDialog.baseFilter` accepts TWO shapes — objectui#3831.
+ *
+ * The slot was declared `Record< string, any >` and merged by object spread,
+ * which serves the dependent-lookup chain (#2215) exactly right and cannot
+ * carry a spec `ViewFilterRule[]` at all: TypeScript accepts an array there
+ * (an array satisfies a string index of `any`), the spread flattens it to
+ * `{"0": rule, "1": rule}`, and the query then filters on columns literally
+ * named `0`/`1` — green types, wrong query, no diagnostic. That is the slot
+ * `record:related_list.add.picker.filter` has to reach.
+ *
+ * So the merge now discriminates on shape, and both directions are pinned here:
+ *
+ *  - **record form** keeps KEY-OVERWRITE precedence, byte for byte. A cascaded
+ *    parent value must REPLACE a stale same-field `lookupFilters` entry, not
+ *    intersect with it — `account = 'stale' AND account = 'a1'` returns nothing.
+ *    (`LookupField.dependsOn.test.tsx` owns the #2215 behaviour end-to-end and
+ *    is deliberately left untouched; this file pins the same precedence at the
+ *    dialog's own boundary, so a future merge change cannot pass by only
+ *    satisfying the array path.)
+ *  - **rule array** lowers through `mergeFilterNodes`, the repo's single filter
+ *    sink, so all 19 `VIEW_FILTER_OPERATORS` survive — including the four
+ *    (`before`, `after`, `is_empty`, `is_not_empty`) the MongoDB-style record
+ *    form has no `$op` for and which a hand-rolled second lowering would have
+ *    had to drop or throw on.
+ */
+
+import { render, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { RecordPickerDialog } from './RecordPickerDialog';
+
+const records = [{ id: 'r1', name: 'One' }];
+
+function makeDataSource() {
+  const find = vi.fn(async () => ({ data: records, total: records.length }));
+  return { find } as any;
+}
+
+/** The `$filter` of the most recent query. */
+function lastFilter(ds: any) {
+  const calls = ds.find.mock.calls;
+  return calls[calls.length - 1][1]?.$filter;
+}
+
+describe('RecordPickerDialog baseFilter — record form (#2215 precedence)', () => {
+  it('spreads a record baseFilter last, overwriting lookupFilters on the same field', async () => {
+    const ds = makeDataSource();
+    render(
+      <RecordPickerDialog
+        open
+        onOpenChange={vi.fn()}
+        dataSource={ds}
+        objectName="contacts"
+        onSelect={vi.fn()}
+        lookupFilters={[{ field: 'account', operator: 'eq', value: 'stale' }]}
+        baseFilter={{ account: 'a1' }}
+      />,
+    );
+
+    await waitFor(() => expect(ds.find).toHaveBeenCalled());
+    // Still the plain record form — NOT lowered to an AST, and emphatically not
+    // an `and` of the stale value with the cascaded one.
+    expect(lastFilter(ds)).toEqual({ account: 'a1' });
+    expect(Array.isArray(lastFilter(ds))).toBe(false);
+  });
+
+  it('sends no $filter at all when nothing is constrained', async () => {
+    const ds = makeDataSource();
+    render(
+      <RecordPickerDialog
+        open
+        onOpenChange={vi.fn()}
+        dataSource={ds}
+        objectName="contacts"
+        onSelect={vi.fn()}
+      />,
+    );
+
+    await waitFor(() => expect(ds.find).toHaveBeenCalled());
+    expect(lastFilter(ds)).toBeUndefined();
+  });
+});
+
+describe('RecordPickerDialog baseFilter — spec ViewFilterRule[] (#3831)', () => {
+  it('lowers a rule array to AST nodes instead of spreading it into index keys', async () => {
+    const ds = makeDataSource();
+    render(
+      <RecordPickerDialog
+        open
+        onOpenChange={vi.fn()}
+        dataSource={ds}
+        objectName="sys_position"
+        onSelect={vi.fn()}
+        baseFilter={[{ field: 'is_active', operator: 'equals', value: true }]}
+      />,
+    );
+
+    await waitFor(() => expect(ds.find).toHaveBeenCalled());
+    expect(lastFilter(ds)).toEqual([['is_active', 'equals', true]]);
+    // The old object-spread failure mode, pinned by structure rather than by
+    // key: the spread produced a PLAIN OBJECT whose values were still rule
+    // objects (`{"0": {field, operator, value}}`), so the query asked for a
+    // column named `0`. Asserting on `Object.keys` cannot tell the two apart —
+    // an array's keys are its indices too — so what is pinned is that each
+    // element is an AST TRIPLE and no longer carries a `field` member.
+    const filter = lastFilter(ds) as unknown[];
+    expect(Array.isArray(filter)).toBe(true);
+    expect(Array.isArray(filter[0])).toBe(true);
+    expect(filter[0]).not.toHaveProperty('field');
+  });
+
+  it('preserves the four operators the record form cannot spell', async () => {
+    const ds = makeDataSource();
+    render(
+      <RecordPickerDialog
+        open
+        onOpenChange={vi.fn()}
+        dataSource={ds}
+        objectName="sys_license"
+        onSelect={vi.fn()}
+        baseFilter={[
+          { field: 'starts_at', operator: 'before', value: '2026-01-01' },
+          { field: 'expires_at', operator: 'after', value: '2026-01-01' },
+          { field: 'revoked_at', operator: 'is_empty' },
+          { field: 'assigned_to', operator: 'is_not_empty' },
+        ]}
+      />,
+    );
+
+    await waitFor(() => expect(ds.find).toHaveBeenCalled());
+    expect(lastFilter(ds)).toEqual([
+      ['starts_at', 'before', '2026-01-01'],
+      ['expires_at', 'after', '2026-01-01'],
+      // A rule with no `value` stays two-element: inventing `null` here would be
+      // a real `{revoked_at: null}` predicate, i.e. a different question.
+      ['revoked_at', 'is_empty'],
+      ['assigned_to', 'is_not_empty'],
+    ]);
+  });
+
+  it('keeps a record baseFilter and a rule array as separate `and` children', async () => {
+    const ds = makeDataSource();
+    render(
+      <RecordPickerDialog
+        open
+        onOpenChange={vi.fn()}
+        dataSource={ds}
+        objectName="sys_position"
+        onSelect={vi.fn()}
+        // A rule array is the author's restriction; the record-form base still
+        // arrives via `lookupFilters` here, and the two must BOTH apply.
+        lookupFilters={[{ field: 'company', operator: 'eq', value: 'c1' }]}
+        baseFilter={[{ field: 'is_active', operator: 'equals', value: true }]}
+      />,
+    );
+
+    await waitFor(() => expect(ds.find).toHaveBeenCalled());
+    expect(lastFilter(ds)).toEqual([
+      'and',
+      ['company', '=', 'c1'],
+      [['is_active', 'equals', true]],
+    ]);
+  });
+
+  it('sends no $filter for an empty rule array', async () => {
+    const ds = makeDataSource();
+    render(
+      <RecordPickerDialog
+        open
+        onOpenChange={vi.fn()}
+        dataSource={ds}
+        objectName="sys_position"
+        onSelect={vi.fn()}
+        baseFilter={[]}
+      />,
+    );
+
+    await waitFor(() => expect(ds.find).toHaveBeenCalled());
+    // An empty restriction is no restriction — not an empty `$filter` the wire
+    // has to interpret.
+    expect(lastFilter(ds)).toBeUndefined();
+  });
+});