@object-ui/fields 17.3.0 → 17.5.0

package/src/widgets/nativeDateValue.ts

@@ -0,0 +1,112 @@
+/**
+ * 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.
+ */
+
+/**
+ * Value adapters for the native date/time controls (objectui#3127).
+ *
+ * ## The defect these close
+ *
+ * `<input type="date">` accepts exactly `YYYY-MM-DD` and
+ * `<input type="datetime-local">` exactly `YYYY-MM-DDTHH:mm[:ss]` — a **local
+ * wall clock with no zone suffix**. Anything else is not "coerced" or
+ * "warned about": the browser SILENTLY rejects it. The attribute still lands
+ * in the DOM, so the value looks present to anyone inspecting markup, while
+ * `input.value` reads back `""` and the control paints its empty placeholder:
+ *
+ * ```js
+ * el.getAttribute('value')  // "2026-08-16T00:33:00.000Z"  ← the record's value
+ * el.value                  // ""                          ← what the user sees
+ * ```
+ *
+ * Records come back from the API as full ISO-8601 (`…T00:33:00.000Z`) — which
+ * is precisely one of those rejected shapes. So EVERY datetime field in an
+ * edit dialog rendered blank while holding a real value, and users read that
+ * as "the date was lost" and retyped it (which is the only way the display bug
+ * could turn into a data change).
+ *
+ * ## Why a round trip, and not just a formatter
+ *
+ * Formatting on the way IN without converting on the way OUT would be the
+ * worse bug: the control would then be read as UTC but written back as a naive
+ * local string, so a user in UTC+8 who picked "08:33" would store 08:33Z and
+ * see 16:33 on the detail page. Read basis and write basis must be the same
+ * one, so `toDateTimeInputValue` / `fromDateTimeInputValue` are a pair and are
+ * used as a pair.
+ *
+ * ## Shape kept in form state
+ *
+ * `datetime` round-trips through ISO — the shape the API hands us and the one
+ * display/format code already assumes. `date` stays a plain `YYYY-MM-DD`
+ * string, matching what the inline cell editor in `@object-ui/components`
+ * (`data-table.tsx`) and `@object-ui/plugin-detail`'s `InlineFieldInput`
+ * already do. Untouched fields are never re-emitted, so a form that opens and
+ * closes without an edit still submits nothing for them.
+ */
+
+function pad2(n: number): string {
+  return String(n).padStart(2, '0');
+}
+
+/**
+ * Stored value → `<input type="date">` value (`YYYY-MM-DD`).
+ *
+ * A leading `YYYY-MM-DD` is passed through VERBATIM rather than re-parsed: a
+ * date-only string is parsed as UTC midnight by `new Date()`, so reading local
+ * calendar components back out of it shifts the day by one everywhere west of
+ * Greenwich. `2026-06-17` must stay June 17th in every zone.
+ */
+export function toDateInputValue(value: unknown): string {
+  if (value == null || value === '') return '';
+  if (typeof value === 'string') {
+    const m = value.match(/^(\d{4}-\d{2}-\d{2})/);
+    if (m) return m[1];
+  }
+  const d = value instanceof Date ? value : new Date(String(value));
+  if (Number.isNaN(d.getTime())) return '';
+  return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
+}
+
+/**
+ * Stored value → `<input type="datetime-local">` value (`YYYY-MM-DDTHH:mm`),
+ * expressed in the viewer's local wall clock — the same instant the detail
+ * page shows, so opening the editor never appears to move the time.
+ *
+ * A value that is ALREADY a zone-less local datetime is truncated to minutes
+ * in place instead of being round-tripped through `Date`, which would
+ * reinterpret it and then re-render it, twice risking an off-by-a-zone shift.
+ */
+export function toDateTimeInputValue(value: unknown): string {
+  if (value == null || value === '') return '';
+  if (typeof value === 'string') {
+    const local = value.match(/^(\d{4}-\d{2}-\d{2})T(\d{2}:\d{2})(?::\d{2}(?:\.\d+)?)?$/);
+    if (local) return `${local[1]}T${local[2]}`;
+  }
+  const d = value instanceof Date ? value : new Date(String(value));
+  if (Number.isNaN(d.getTime())) return '';
+  return (
+    `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}` +
+    `T${pad2(d.getHours())}:${pad2(d.getMinutes())}`
+  );
+}
+
+/**
+ * `<input type="datetime-local">` value → stored value (ISO-8601, UTC).
+ *
+ * The control hands us a zone-less local wall clock; `new Date()` reads that
+ * form as local time, which is the inverse of what `toDateTimeInputValue`
+ * wrote — the pair is what keeps read and write on one basis.
+ *
+ * An unparseable string is returned untouched rather than blanked: dropping a
+ * value the user can see in the box would be a data loss dressed up as a fix.
+ */
+export function fromDateTimeInputValue(value: string): string {
+  if (!value) return '';
+  const d = new Date(value);
+  if (Number.isNaN(d.getTime())) return value;
+  return d.toISOString();
+}

package/src/widgets/optionWidgets.gatedOptions.test.tsx

@@ -0,0 +1,267 @@
+/**
+ * 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.
+ */
+
+/**
+ * A GATED option list never deletes the stored value (objectui#4247).
+ *
+ * The four fixed-option widgets end their cascade resolution with a "drop what
+ * is no longer offered" effect (ADR-0058 / #2715). `resolveCascadingOptions`
+ * returns an EMPTY offered set whenever the list is gated — a declared
+ * `dependsOn` parent is still empty — so on mount the effect found nothing
+ * "still offered" and wrote the field empty, while the widget was rendering
+ * `OptionsEmptyState` ("select Country first") right next to it: the control
+ * tells the user it cannot offer anything, and deletes what they had.
+ *
+ * Ruling (#4247): **gated means UNKNOWN, not invalid.** The cascade clear exists
+ * so a USER-DRIVEN parent change prunes a now-invalid child; a gated set on
+ * MOUNT is missing information — the record simply arrived with the parent
+ * empty (a later-cleared parent, an import, a partially-migrated row) — and
+ * destroying stored data on missing information is silent data loss. Convergence
+ * stays where it belongs: once the parent IS chosen and the resolved set
+ * genuinely excludes the stored value, the existing prune applies.
+ *
+ * Three states, kept apart here so a future edit cannot collapse them:
+ *
+ *  1. never-configured — no authored `options` at all. Guarded since #4220;
+ *     control only, pinned in `optionWidgets.unconfiguredOptions.test.tsx`.
+ *  2. gated — an authored list withheld behind an unmet `dependsOn`. NEW: the
+ *     value survives.
+ *  3. resolved-and-excludes — the parent IS chosen and the resolved set does not
+ *     offer the stored value. Clears; that is the ADR-0058 contract.
+ *
+ * The gate is read from the resolver's own `gated` flag, never re-derived from
+ * `options.length === 0` — that would collide with state 1, which is a
+ * different case with a different guard.
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { SelectField } from './SelectField';
+import { MultiSelectField } from './MultiSelectField';
+import { CheckboxesField } from './CheckboxesField';
+import { RadioField } from './RadioField';
+
+/** Options that exist for exactly one country — the cascade the gate withholds. */
+const PROVINCE_OPTIONS = [
+  { label: 'Zhejiang', value: 'zj', visibleWhen: "record.country == 'cn'" },
+  { label: 'California', value: 'ca', visibleWhen: "record.country == 'us'" },
+];
+
+const provinceField = (type: string) =>
+  ({ name: 'province', type, dependsOn: 'country', options: PROVINCE_OPTIONS }) as any;
+
+describe('option widgets — a GATED list never deletes the stored value (#4247)', () => {
+  it('MultiSelectField keeps its array and shows the parent-first hint', () => {
+    const onChange = vi.fn();
+    render(
+      <MultiSelectField
+        value={['zj']}
+        onChange={onChange}
+        field={provinceField('multiselect')}
+        {...({ name: 'province', dependentValues: {} } as any)}
+      />,
+    );
+    expect(screen.getByTestId('multiselect-empty-province')).toHaveTextContent(
+      /select country first/i,
+    );
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('CheckboxesField keeps its array and shows the parent-first hint', () => {
+    const onChange = vi.fn();
+    render(
+      <CheckboxesField
+        value={['zj']}
+        onChange={onChange}
+        field={provinceField('checkboxes')}
+        {...({ name: 'province', dependentValues: {} } as any)}
+      />,
+    );
+    expect(screen.getByTestId('checkboxes-empty-province')).toHaveTextContent(
+      /select country first/i,
+    );
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('RadioField keeps its value and shows the parent-first hint', () => {
+    const onChange = vi.fn();
+    render(
+      <RadioField
+        value="zj"
+        onChange={onChange}
+        field={provinceField('radio')}
+        {...({ name: 'province', dependentValues: {} } as any)}
+      />,
+    );
+    expect(screen.getByTestId('radio-empty-province')).toHaveTextContent(/select country first/i);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('SelectField keeps its value and shows the parent-first hint', () => {
+    const onChange = vi.fn();
+    render(
+      <SelectField
+        value="zj"
+        onChange={onChange}
+        field={provinceField('select')}
+        {...({ name: 'province', dependentValues: {} } as any)}
+      />,
+    );
+    expect(screen.getByTestId('select-empty-province')).toHaveTextContent(/select country first/i);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});
+
+describe('controls — a RESOLVED list still prunes what it does not offer (ADR-0058)', () => {
+  it('MultiSelectField drops the element the chosen parent excludes', () => {
+    const onChange = vi.fn();
+    render(
+      <MultiSelectField
+        value={['zj', 'ca']}
+        onChange={onChange}
+        field={provinceField('multiselect')}
+        {...({ name: 'province', dependentValues: { country: 'cn' } } as any)}
+      />,
+    );
+    expect(onChange).toHaveBeenCalledWith(['zj']);
+  });
+
+  it('CheckboxesField drops the element the chosen parent excludes', () => {
+    const onChange = vi.fn();
+    render(
+      <CheckboxesField
+        value={['zj', 'ca']}
+        onChange={onChange}
+        field={provinceField('checkboxes')}
+        {...({ name: 'province', dependentValues: { country: 'cn' } } as any)}
+      />,
+    );
+    expect(onChange).toHaveBeenCalledWith(['zj']);
+  });
+
+  it('RadioField clears a value the chosen parent excludes', () => {
+    const onChange = vi.fn();
+    render(
+      <RadioField
+        value="ca"
+        onChange={onChange}
+        field={provinceField('radio')}
+        {...({ name: 'province', dependentValues: { country: 'cn' } } as any)}
+      />,
+    );
+    expect(onChange).toHaveBeenCalledWith(undefined);
+  });
+
+  it('SelectField clears a value the chosen parent excludes', () => {
+    const onChange = vi.fn();
+    render(
+      <SelectField
+        value="ca"
+        onChange={onChange}
+        field={provinceField('select')}
+        {...({ name: 'province', dependentValues: { country: 'cn' } } as any)}
+      />,
+    );
+    expect(onChange).toHaveBeenCalledWith(undefined);
+  });
+});
+
+describe('transition — a gated field converges the moment its parent is chosen (#4247)', () => {
+  it('MultiSelectField: gated keeps, then prunes once the resolved set excludes', () => {
+    const onChange = vi.fn();
+    const { rerender } = render(
+      <MultiSelectField
+        value={['zj']}
+        onChange={onChange}
+        field={provinceField('multiselect')}
+        {...({ name: 'province', dependentValues: {} } as any)}
+      />,
+    );
+    // Gated: the value survives, nothing is staged.
+    expect(onChange).not.toHaveBeenCalled();
+
+    // The user picks the parent — the set resolves and genuinely excludes 'zj'.
+    rerender(
+      <MultiSelectField
+        value={['zj']}
+        onChange={onChange}
+        field={provinceField('multiselect')}
+        {...({ name: 'province', dependentValues: { country: 'us' } } as any)}
+      />,
+    );
+    expect(onChange).toHaveBeenCalledWith([]);
+  });
+
+  it('MultiSelectField: a resolved set that INCLUDES the stored value keeps it', () => {
+    const onChange = vi.fn();
+    const { rerender } = render(
+      <MultiSelectField
+        value={['zj']}
+        onChange={onChange}
+        field={provinceField('multiselect')}
+        {...({ name: 'province', dependentValues: {} } as any)}
+      />,
+    );
+    rerender(
+      <MultiSelectField
+        value={['zj']}
+        onChange={onChange}
+        field={provinceField('multiselect')}
+        {...({ name: 'province', dependentValues: { country: 'cn' } } as any)}
+      />,
+    );
+    expect(onChange).not.toHaveBeenCalled();
+    expect(screen.getByTestId('multiselect-option-zj')).toBeInTheDocument();
+  });
+
+  it('SelectField: gated keeps, then clears once the resolved set excludes', () => {
+    const onChange = vi.fn();
+    const { rerender } = render(
+      <SelectField
+        value="zj"
+        onChange={onChange}
+        field={provinceField('select')}
+        {...({ name: 'province', dependentValues: {} } as any)}
+      />,
+    );
+    expect(onChange).not.toHaveBeenCalled();
+
+    rerender(
+      <SelectField
+        value="zj"
+        onChange={onChange}
+        field={provinceField('select')}
+        {...({ name: 'province', dependentValues: { country: 'us' } } as any)}
+      />,
+    );
+    expect(onChange).toHaveBeenCalledWith(undefined);
+  });
+
+  it('SelectField: a resolved set that INCLUDES the stored value keeps it', () => {
+    const onChange = vi.fn();
+    const { rerender } = render(
+      <SelectField
+        value="zj"
+        onChange={onChange}
+        field={provinceField('select')}
+        {...({ name: 'province', dependentValues: {} } as any)}
+      />,
+    );
+    rerender(
+      <SelectField
+        value="zj"
+        onChange={onChange}
+        field={provinceField('select')}
+        {...({ name: 'province', dependentValues: { country: 'cn' } } as any)}
+      />,
+    );
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});

package/src/widgets/optionWidgets.unconfiguredOptions.test.tsx

@@ -0,0 +1,150 @@
+/**
+ * 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.
+ */
+
+/**
+ * An option widget with NO authored `options` keeps the value it was given
+ * (objectui#4220).
+ *
+ * The four fixed-option widgets each end their cascade resolution with a
+ * "clear what is no longer offered" effect (ADR-0058 / #2715). It ran against
+ * the RESOLVED set without asking why that set was empty, and the two causes
+ * are opposites:
+ *
+ *  - the list cascaded down to zero — a real decision, and clearing is the
+ *    documented behaviour;
+ *  - the field declares no `options` at all — no decision was made anywhere,
+ *    and the widget's own next branch renders `OptionsEmptyState`, i.e. it
+ *    tells the user there is nothing to pick. Clearing here deletes the stored
+ *    value of a field the user was shown nothing but a hint for, on MOUNT,
+ *    without a single interaction.
+ *
+ * Measured on two live hosts, both of which mount these widgets outside a form:
+ * the grid's inline cell editor (`FieldEditWidget`, since #2942) and — since
+ * #4220 — the detail page's inline editor, which stages every `onChange` into
+ * the record draft the moment a section enters edit mode. An options-less
+ * `checkboxes` there wiped its array as soon as the user started editing any
+ * OTHER field in the same section, and the save bar wrote the empty array back.
+ *
+ * The prune now requires an authored list to prune against. The cascade itself
+ * is untouched — the controls below still clear a value the configured list no
+ * longer offers.
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { SelectField } from './SelectField';
+import { MultiSelectField } from './MultiSelectField';
+import { CheckboxesField } from './CheckboxesField';
+import { RadioField } from './RadioField';
+
+const OPTIONS = [{ label: 'Alpha', value: 'alpha' }];
+
+describe('option widgets — an unconfigured list never deletes the stored value (#4220)', () => {
+  it('MultiSelectField keeps its array and shows the unfillable state', () => {
+    const onChange = vi.fn();
+    render(
+      <MultiSelectField
+        value={['alpha', 'beta']}
+        onChange={onChange}
+        field={{ name: 'topics', type: 'multiselect' } as any}
+      />,
+    );
+    expect(screen.getByTestId('multiselect-empty-topics')).toBeInTheDocument();
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('CheckboxesField keeps its array and shows the unfillable state', () => {
+    const onChange = vi.fn();
+    render(
+      <CheckboxesField
+        value={['alpha', 'beta']}
+        onChange={onChange}
+        field={{ name: 'perks', type: 'checkboxes' } as any}
+      />,
+    );
+    expect(screen.getByTestId('checkboxes-empty-perks')).toBeInTheDocument();
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('RadioField keeps its value and shows the unfillable state', () => {
+    const onChange = vi.fn();
+    render(
+      <RadioField
+        value="alpha"
+        onChange={onChange}
+        field={{ name: 'tier', type: 'radio' } as any}
+      />,
+    );
+    expect(screen.getByTestId('radio-empty-tier')).toBeInTheDocument();
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('SelectField keeps its value and shows the unfillable state', () => {
+    const onChange = vi.fn();
+    render(
+      <SelectField
+        value="alpha"
+        onChange={onChange}
+        field={{ name: 'stage', type: 'select' } as any}
+      />,
+    );
+    expect(screen.getByTestId('select-empty-stage')).toBeInTheDocument();
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});
+
+describe('controls — a CONFIGURED list still cascade-clears what it no longer offers', () => {
+  it('MultiSelectField drops the unoffered element, keeps the offered one', () => {
+    const onChange = vi.fn();
+    render(
+      <MultiSelectField
+        value={['alpha', 'zeta']}
+        onChange={onChange}
+        field={{ name: 'topics', type: 'multiselect', options: OPTIONS } as any}
+      />,
+    );
+    expect(onChange).toHaveBeenCalledWith(['alpha']);
+  });
+
+  it('CheckboxesField drops the unoffered element, keeps the offered one', () => {
+    const onChange = vi.fn();
+    render(
+      <CheckboxesField
+        value={['alpha', 'zeta']}
+        onChange={onChange}
+        field={{ name: 'perks', type: 'checkboxes', options: OPTIONS } as any}
+      />,
+    );
+    expect(onChange).toHaveBeenCalledWith(['alpha']);
+  });
+
+  it('RadioField clears a value the configured list does not offer', () => {
+    const onChange = vi.fn();
+    render(
+      <RadioField
+        value="zeta"
+        onChange={onChange}
+        field={{ name: 'tier', type: 'radio', options: OPTIONS } as any}
+      />,
+    );
+    expect(onChange).toHaveBeenCalledWith(undefined);
+  });
+
+  it('SelectField clears a value the configured list does not offer', () => {
+    const onChange = vi.fn();
+    render(
+      <SelectField
+        value="zeta"
+        onChange={onChange}
+        field={{ name: 'stage', type: 'select', options: OPTIONS } as any}
+      />,
+    );
+    expect(onChange).toHaveBeenCalledWith(undefined);
+  });
+});

package/src/widgets/toDomProps.ts

@@ -6,6 +6,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import {
+  pickDomProps,
+  type SduiDomPassThroughKey,
+  type DomProps as CoreDomProps,
+} from '@object-ui/core';
 import type { FieldWidgetComponentProps, FieldWidgetDomProps } from './types';
 
 /**
@@ -62,6 +67,34 @@ import type { FieldWidgetComponentProps, FieldWidgetDomProps } from './types';
  * open spread. If a field node should be able to author one, DECLARE it on
  * `FieldWidgetComponentProps` first and add it here — do not reopen the spread
  * (AGENTS.md #0.1: fix the contract, never widen the consumer).
+ *
+ * ## Where the mechanism lives now, and why the key list stayed here
+ *
+ * objectui#4425 phase 2 promoted this whitelist to the SDUI widget contract
+ * generally, so the MECHANISM — filter by a declared key list plus the `aria-*`
+ * / `data-*` open families — moved to `@object-ui/core`
+ * (`utils/dom-props.ts`, `pickDomProps`), where every plugin package can reach
+ * it without depending on `@object-ui/fields` (the objectui#4409
+ * dependency-direction method: `plugin-chatbot` declares `@object-ui/core` and
+ * does not declare this package).
+ *
+ * The KEY LIST did not move, because it is not the same list. Measured on
+ * objectui#4431:
+ *
+ *  - `name` and `disabled` are here and NOT in the SDUI set: both are legal
+ *    only on form controls, which is what every widget in this package renders
+ *    and what `FieldWidgetComponentProps` declares. `name` on the `<div>` an
+ *    SDUI container widget renders is a leak — one of the 14 attributes #4431
+ *    closed — and two widgets here already hand-strip it when they spread onto
+ *    something that is not a control (`ObjectRefField`'s trigger,
+ *    `FileField`'s dropzone).
+ *  - `role` is in the SDUI set and NOT here: `SchemaRenderer` resolves it for
+ *    every node from `@objectstack/spec`'s `AriaPropsSchema`, while this
+ *    contract deliberately does not declare it (see "Deliberately NOT
+ *    forwarded" above).
+ *
+ * So: one mechanism, two declarations, each bound by the assertions below to
+ * the contract it executes. Not two judges.
  */
 const DOM_PASS_THROUGH_KEYS = [
   /* ── The contract's own "DOM pass-through" block, verbatim ─────────────── */
@@ -126,22 +159,24 @@ type EveryDeclaredDomKeyIsForwarded =
 const _everyDeclaredDomKeyIsForwarded: EveryDeclaredDomKeyIsForwarded = true;
 void _everyDeclaredDomKeyIsForwarded;
 
-const DOM_PASS_THROUGH: ReadonlySet<string> = new Set<string>(DOM_PASS_THROUGH_KEYS);
-
 /**
- * `aria-*` is declared on the contract as React's `AriaAttributes`; `data-*`
- * is declared as an open template-literal family (open in HTML too, and the
- * only open family the contract has). Both are matched by prefix so the helper
- * needs no per-attribute list.
+ * Direction 3, added with the core lift (objectui#4431): every key of the SDUI
+ * contract's own whitelist that this contract also declares must be forwarded
+ * here too, so the two lists cannot silently drift apart. `role` is the ONE
+ * measured exception — the SDUI contract declares it, this one does not — and
+ * naming it in the `Exclude` is what makes the divergence a deliberate,
+ * reviewable act rather than an omission.
+ *
+ * Catches: a key added to the shared SDUI set that field widgets quietly stop
+ * delivering.
  */
-function isOpenDomFamily(key: string): boolean {
-  return key.startsWith('data-') || key.startsWith('aria-');
-}
+type SharedSduiKey = Exclude<SduiDomPassThroughKey, 'role'>;
+type EverySharedSduiKeyIsForwarded = SharedSduiKey extends DomPassThroughKey ? true : never;
+const _everySharedSduiKeyIsForwarded: EverySharedSduiKeyIsForwarded = true;
+void _everySharedSduiKeyIsForwarded;
 
 /** The subset of `P` this helper forwards, with each key's declared type. */
-export type DomProps<P> = Pick<P, Extract<keyof P, DomPassThroughKey>> & {
-  [K in Extract<keyof P, `data-${string}` | `aria-${string}`>]: P[K];
-};
+export type DomProps<P> = CoreDomProps<P, DomPassThroughKey>;
 
 /**
  * Keep only what may legitimately become a DOM attribute, and drop everything
@@ -165,11 +200,5 @@ export type DomProps<P> = Pick<P, Extract<keyof P, DomPassThroughKey>> & {
  * governs what gets spread.
  */
 export function toDomProps<P extends object>(props: P): DomProps<P> {
-  const domProps: Record<string, unknown> = {};
-  for (const key of Object.keys(props)) {
-    if (DOM_PASS_THROUGH.has(key) || isOpenDomFamily(key)) {
-      domProps[key] = (props as Record<string, unknown>)[key];
-    }
-  }
-  return domProps as DomProps<P>;
+  return pickDomProps(props, DOM_PASS_THROUGH_KEYS);
 }