@uniflowed/ui 0.0.0-alpha.4 → 0.0.0-alpha.5

package/checkbox.js

@@ -31,6 +31,7 @@
 
 import * as React from "@uniflowed/react";
 
+import type { Rest } from "./internal/merge-props.js";
 import { composeHandlers, withoutComposed } from "./internal/merge-props.js";
 import { useControlled } from "./internal/controlled-state.js";
 
@@ -42,7 +43,7 @@ export component Checkbox(
   onCheckedChange?: (checked: boolean) => void,
   disabled?: boolean = false,
   children?: React.Node,
-  ...rest: { readonly [string]: mixed }
+  ...rest: Rest
 ) {
   const [on, setOn] = useControlled(checked, defaultChecked, onCheckedChange);
   // A mixed checkbox moves to checked, not to "the opposite of the boolean

package/combobox.js

@@ -64,6 +64,7 @@ import {
 } from "@uniflowed/react";
 import { useStableCallback } from "@uniflowed/hooks/lifecycle";
 
+import type { Rest } from "./internal/merge-props.js";
 import { composeHandlers, composeRefs, withoutComposed } from "./internal/merge-props.js";
 import { itemsOf, moveTo } from "./internal/roving-focus.js";
 import { useControlled } from "./internal/controlled-state.js";
@@ -134,7 +135,7 @@ export component ComboboxRoot(
   open?: boolean,
   defaultOpen?: boolean = false,
   onOpenChange?: (open: boolean) => void,
-  ...rest: { readonly [string]: mixed }
+  ...rest: Rest
 ) {
   const base = useId();
   const [chosen, setChosen] = useControlled(value, defaultValue, onValueChange);
@@ -203,7 +204,7 @@ export component ComboboxRoot(
  * because the list names it, and naming a label that is not rendered is worse
  * than leaving the list unnamed.
  */
-export component ComboboxLabel(children: React.Node, ...rest: { readonly [string]: mixed }) {
+export component ComboboxLabel(children: React.Node, ...rest: Rest) {
   const combobox = useCombobox("Combobox.Label");
   const register = combobox.registerLabel;
   useEffect(() => {
@@ -219,7 +220,7 @@ export component ComboboxLabel(children: React.Node, ...rest: { readonly [string
 }
 
 /** The text field, and every key the pattern defines. */
-export component ComboboxInput(...rest: { readonly [string]: mixed }) {
+export component ComboboxInput(...rest: Rest) {
   const combobox = useCombobox("Combobox.Input");
   const passed = withoutComposed(rest, ["onChange", "onKeyDown", "ref"]);
 
@@ -337,10 +338,7 @@ export component ComboboxInput(...rest: { readonly [string]: mixed }) {
  * the count the live region announces, and the invariant that
  * `aria-activedescendant` never names an option that has left the list.
  */
-export component ComboboxList(
-  children: renders* ComboboxOption,
-  ...rest: { readonly [string]: mixed }
-) {
+export component ComboboxList(children: renders* ComboboxOption, ...rest: Rest) {
   const combobox = useCombobox("Combobox.List");
   const { activeId, count, listRef, inputRef, pendingActive, setActiveId, setCount } = combobox;
   const close = useStableCallback(() => {
@@ -444,7 +442,7 @@ export component ComboboxOption(
   children: React.Node,
   label?: string,
   disabled?: boolean = false,
-  ...rest: { readonly [string]: mixed }
+  ...rest: Rest
 ) {
   const combobox = useCombobox("Combobox.Option");
   const id = useId();
@@ -495,7 +493,7 @@ export component ComboboxOption(
  * contain options: an "no matches" row inside one is announced as an option a
  * reader can choose, and choosing it does nothing.
  */
-export component ComboboxEmpty(children: React.Node, ...rest: { readonly [string]: mixed }) {
+export component ComboboxEmpty(children: React.Node, ...rest: Rest) {
   const combobox = useCombobox("Combobox.Empty");
   if (!combobox.open || combobox.count > 0) {
     return null;
@@ -514,7 +512,7 @@ export component ComboboxEmpty(children: React.Node, ...rest: { readonly [string
  * `children` overrides the wording — the default is English and a real
  * application has a translation table.
  */
-export component ComboboxStatus(children?: React.Node, ...rest: { readonly [string]: mixed }) {
+export component ComboboxStatus(children?: React.Node, ...rest: Rest) {
   const combobox = useCombobox("Combobox.Status");
   const message = children ?? defaultAnnouncement(combobox.open, combobox.count);
 

package/dialog.js

@@ -51,6 +51,7 @@ import {
 } from "@uniflowed/react";
 import { useStableCallback } from "@uniflowed/hooks/lifecycle";
 
+import type { Rest } from "./internal/merge-props.js";
 import { composeHandlers, composeRefs, withoutComposed } from "./internal/merge-props.js";
 import { useControlled } from "./internal/controlled-state.js";
 
@@ -114,7 +115,7 @@ export component DialogRoot(
 }
 
 /** What opens the dialog, and what focus comes back to when it closes. */
-export component DialogTrigger(children: React.Node, ...rest: { readonly [string]: mixed }) {
+export component DialogTrigger(children: React.Node, ...rest: Rest) {
   const dialog = useDialog("Dialog.Trigger");
   const passed = withoutComposed(rest, ["onClick", "ref"]);
 
@@ -147,7 +148,7 @@ export component DialogTrigger(children: React.Node, ...rest: { readonly [string
  * their own backdrop or omits one entirely must still get it. That lives on
  * `Dialog.Body`, which is the part that knows where "outside" is.
  */
-export component DialogOverlay(...rest: { readonly [string]: mixed }) {
+export component DialogOverlay(...rest: Rest) {
   const dialog = useDialog("Dialog.Overlay");
   if (!dialog.open) {
     return null;
@@ -162,7 +163,7 @@ export component DialogOverlay(...rest: { readonly [string]: mixed }) {
  * which is the half of "modal" that CSS cannot express; `inert` on everything
  * outside is the half the browser enforces.
  */
-export component DialogBody(children: React.Node, ...rest: { readonly [string]: mixed }) {
+export component DialogBody(children: React.Node, ...rest: Rest) {
   const dialog = useDialog("Dialog.Body");
   const bodyRef = useRef<HTMLElement | null>(null);
   // Stable, so the effect below depends on `open` and on nothing else. Keyed on
@@ -298,7 +299,7 @@ export component DialogBody(children: React.Node, ...rest: { readonly [string]:
  * rendered — a conditional title that is absent used to leave the dialog
  * pointing at an id nothing had.
  */
-export component DialogTitle(children: React.Node, ...rest: { readonly [string]: mixed }) {
+export component DialogTitle(children: React.Node, ...rest: Rest) {
   const dialog = useDialog("Dialog.Title");
   const register = dialog.registerTitle;
   useEffect(() => {
@@ -320,7 +321,7 @@ export component DialogTitle(children: React.Node, ...rest: { readonly [string]:
  * the one moment the reader has to decide whether they care — so this is where
  * "this cannot be undone" belongs, not in body text further down.
  */
-export component DialogDescription(children: React.Node, ...rest: { readonly [string]: mixed }) {
+export component DialogDescription(children: React.Node, ...rest: Rest) {
   const dialog = useDialog("Dialog.Description");
   const register = dialog.registerDescription;
   useEffect(() => {
@@ -344,17 +345,17 @@ export component DialogDescription(children: React.Node, ...rest: { readonly [st
  * styling layer has a name to attach to, and contributes no semantics because
  * it has none to contribute.
  */
-export component DialogHeader(children: React.Node, ...rest: { readonly [string]: mixed }) {
+export component DialogHeader(children: React.Node, ...rest: Rest) {
   return <div {...rest}>{children}</div>;
 }
 
 /** The bottom of the dialog, where the actions go. See `Dialog.Header`. */
-export component DialogFooter(children: React.Node, ...rest: { readonly [string]: mixed }) {
+export component DialogFooter(children: React.Node, ...rest: Rest) {
   return <div {...rest}>{children}</div>;
 }
 
 /** A button that closes the dialog. */
-export component DialogClose(children: React.Node, ...rest: { readonly [string]: mixed }) {
+export component DialogClose(children: React.Node, ...rest: Rest) {
   const dialog = useDialog("Dialog.Close");
   const passed = withoutComposed(rest, ["onClick"]);
 

package/field.js

@@ -31,6 +31,8 @@
 import * as React from "@uniflowed/react";
 import { createContext, useContext, useEffect, useId, useMemo, useState } from "@uniflowed/react";
 
+import type { Rest } from "./internal/merge-props.js";
+
 type FieldState = {|
   readonly controlId: string,
   readonly labelId: string,
@@ -66,11 +68,7 @@ hook useField(part: string): FieldState {
  * message is rendered or not, and the control's `aria-describedby` includes the
  * error's id or not.
  */
-export component FieldRoot(
-  children: React.Node,
-  invalid?: boolean = false,
-  ...rest: { readonly [string]: mixed }
-) {
+export component FieldRoot(children: React.Node, invalid?: boolean = false, ...rest: Rest) {
   const base = useId();
   const [hasDescription, setHasDescription] = useState(false);
   const [hasError, setHasError] = useState(false);
@@ -105,7 +103,7 @@ export component FieldRoot(
 }
 
 /** The label, pointing at the control by id rather than by nesting. */
-export component FieldLabel(children: React.Node, ...rest: { readonly [string]: mixed }) {
+export component FieldLabel(children: React.Node, ...rest: Rest) {
   const field = useField("Field.Label");
   // `rest` first: a caller `id` here would break the relationship the control
   // points at, and it would break it silently.
@@ -121,7 +119,7 @@ export component FieldLabel(children: React.Node, ...rest: { readonly [string]:
  *
  * See the module header for why this takes a render function.
  */
-export component FieldControl(render: (props: { readonly [string]: mixed }) => React.Node) {
+export component FieldControl(render: (props: Rest) => React.Node) {
   const field = useField("Field.Control");
   return render({
     id: field.controlId,
@@ -132,7 +130,7 @@ export component FieldControl(render: (props: { readonly [string]: mixed }) => R
 }
 
 /** Help text, which the control points at while it is rendered. */
-export component FieldDescription(children: React.Node, ...rest: { readonly [string]: mixed }) {
+export component FieldDescription(children: React.Node, ...rest: Rest) {
   const field = useField("Field.Description");
   const register = field.registerDescription;
   useEffect(() => {
@@ -153,7 +151,7 @@ export component FieldDescription(children: React.Node, ...rest: { readonly [str
  * `role="alert"` so it is announced when it appears, which is the point of an
  * error that arrives after a blur or a submit.
  */
-export component FieldError(children: React.Node, ...rest: { readonly [string]: mixed }) {
+export component FieldError(children: React.Node, ...rest: Rest) {
   const field = useField("Field.Error");
   const register = field.registerError;
   useEffect(() => {

package/internal/merge-props.js

@@ -28,8 +28,52 @@
 // consumer to build a part that spreads `rest` last, which is the failure this
 // exists to prevent — so it stays unreachable from outside the package.
 
-/** Anything a caller can spread onto an element. */
-export type Rest = { readonly [string]: mixed };
+/**
+ * Props on their way onto an element: what a caller hands a part, and what
+ * `Field.Control` hands back for a caller to spread.
+ *
+ * `key` is named out of the indexer rather than left to it, and that one
+ * property is the whole subtlety of this type. React takes `key` off the
+ * attributes before a component is called, so a part's props never contain
+ * one — but an indexer does not know that, and `{ readonly [string]: mixed }`
+ * answers `mixed` for every name, `key` included. React's `key` is
+ * `string | number`, so every intrinsic this package rendered was rejected for
+ * a property that cannot be there:
+ *
+ *     error[incompatible-type]: Cannot create button element because in
+ *     property key: Either unknown is incompatible with string. Or unknown is
+ *     incompatible with number.
+ *
+ * thirty-two times, one per element, which was 32 of `@uniflowed/ui`'s 73 type
+ * errors. `key?: empty` states what React already guarantees, and the errors
+ * are the checker agreeing.
+ *
+ * # Two answers that look better than they are
+ *
+ * **`readonly key?: string | number`** — React's own type for the property —
+ * also silences the error, and is a lie in the shape of a fix. It says a
+ * caller may pass a `key` here; a part would then spread it onto its element,
+ * which is the "spreading a key into JSX" mistake React 19 added a warning
+ * for. `empty` is the same repair and a true sentence. It reads oddly for
+ * about a second and then reads as exactly what it is: there is no value you
+ * can pass under this name.
+ *
+ * **`React.PropsOf<"button">`** — the props of the element actually being
+ * rendered, which is what this type would like to say — cannot be written
+ * here. uf does not merge Flow's `jsx.js` environment, deliberately and for
+ * reasons `crates/uf_check/src/upstream/environments.rs` gives, so
+ * `$JSXIntrinsics` is the bare-bones table in `lib/react.js`, every
+ * intrinsic's `props` is `any`, and `React.PropsOf` itself reads as an
+ * any-typed value. Nothing about an element is checked here except its `key`:
+ * `<button className={5} nonsenseAttr={{}} />` is not an error today. A named
+ * type per element would therefore not be React's contract but a hand-written
+ * copy of `jsx.js` living in a UI package, drifting from the DOM on its own
+ * schedule — and it would still need an indexer for `data-*` and `aria-*`,
+ * which is where this started. So it stays one `Rest`, and the day
+ * `$JSXIntrinsics` is real is the day this becomes `React.PropsOf` and the
+ * parts say which element they render.
+ */
+export type Rest = { readonly key?: empty, readonly [string]: mixed };
 
 /**
  * Call the caller's handler and then the component's.
@@ -76,10 +120,16 @@ export function composeRefs<T>(
  * leaving them in would put the caller's copy back on top of the composed one.
  */
 export function withoutComposed(rest: Rest, names: $ReadOnlyArray<string>): Rest {
-  const kept: { [string]: mixed } = {};
-  for (const key of Object.keys(rest)) {
-    if (!names.includes(key)) {
-      kept[key] = rest[key];
+  const kept: { key?: empty, [string]: mixed } = {};
+  for (const name of Object.keys(rest)) {
+    // `key` is dropped whatever the caller asked to compose, because it is the
+    // one name the indexer does not speak for: writing `rest[name]` under it
+    // would put a `mixed` back where `Rest` promises nothing can be, and Flow
+    // says so. Nothing is lost — React removed the `key` long before this ran,
+    // so this is the type-level statement made at runtime rather than a filter
+    // that ever has work to do.
+    if (name !== "key" && !names.includes(name)) {
+      kept[name] = rest[name];
     }
   }
   return kept;

package/menu.js

@@ -58,6 +58,7 @@ import {
 } from "@uniflowed/react";
 import { useStableCallback } from "@uniflowed/hooks/lifecycle";
 
+import type { Rest } from "./internal/merge-props.js";
 import { composeHandlers, composeRefs, withoutComposed } from "./internal/merge-props.js";
 import {
   indexOfActive,
@@ -257,7 +258,7 @@ component MenuLevel(
 }
 
 /** The button that opens the menu. */
-export component MenuTrigger(children: React.Node, ...rest: { readonly [string]: mixed }) {
+export component MenuTrigger(children: React.Node, ...rest: Rest) {
   const menu = useMenu("Menu.Trigger");
   const passed = withoutComposed(rest, ["onClick", "onKeyDown", "ref"]);
   useTriggerRegistration(menu);
@@ -308,7 +309,7 @@ export component MenuTrigger(children: React.Node, ...rest: { readonly [string]:
  */
 export component MenuBody(
   children: renders* (MenuItem | MenuSeparator | MenuGroup | MenuSub),
-  ...rest: { readonly [string]: mixed }
+  ...rest: Rest
 ) {
   const menu = useMenu("Menu.Body");
   const bodyRef = useRef<HTMLElement | null>(null);
@@ -481,7 +482,7 @@ export component MenuItem(
   children: React.Node,
   disabled?: boolean = false,
   onSelect?: () => mixed,
-  ...rest: { readonly [string]: mixed }
+  ...rest: Rest
 ) {
   const menu = useMenu("Menu.Item");
   const list = useContext(MenuListContext);
@@ -521,7 +522,7 @@ export component MenuItem(
  * is why it reads the list context of the menu around it and the menu context
  * of the one below it.
  */
-export component MenuSubTrigger(children: React.Node, ...rest: { readonly [string]: mixed }) {
+export component MenuSubTrigger(children: React.Node, ...rest: Rest) {
   const menu = useMenu("Menu.SubTrigger");
   const list = useContext(MenuListContext);
   const passed = withoutComposed(rest, ["onClick", "onFocus", "onKeyDown", "ref"]);
@@ -574,7 +575,7 @@ export component MenuSubTrigger(children: React.Node, ...rest: { readonly [strin
  * moving through the menu is told the group changed. It is not focusable and
  * the arrow keys pass straight over it.
  */
-export component MenuSeparator(...rest: { readonly [string]: mixed }) {
+export component MenuSeparator(...rest: Rest) {
   return <div {...rest} aria-orientation="horizontal" role="separator" />;
 }
 
@@ -586,7 +587,7 @@ export component MenuSeparator(...rest: { readonly [string]: mixed }) {
  * that is not in the document makes a screen reader announce *nothing*, which
  * is worse than an unnamed group.
  */
-export component MenuGroup(children: React.Node, ...rest: { readonly [string]: mixed }) {
+export component MenuGroup(children: React.Node, ...rest: Rest) {
   const base = useId();
   const [labelled, setLabelled] = useState(false);
 
@@ -608,7 +609,7 @@ export component MenuGroup(children: React.Node, ...rest: { readonly [string]: m
  * as ordinary content would have a reader hear the heading once as the group's
  * name and again as a stray line of text between the items.
  */
-export component MenuLabel(children: React.Node, ...rest: { readonly [string]: mixed }) {
+export component MenuLabel(children: React.Node, ...rest: Rest) {
   const group = useContext(MenuGroupContext);
   const register = group?.registerLabel;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniflowed/ui",
-  "version": "0.0.0-alpha.4",
+  "version": "0.0.0-alpha.5",
   "description": "Headless, accessible React components whose composition Flow checks, part of the Unified Toolchain for Flow.",
   "type": "module",
   "license": "MIT",
@@ -25,8 +25,8 @@
     "internal"
   ],
   "dependencies": {
-    "@uniflowed/hooks": "0.0.0-alpha.4",
-    "@uniflowed/react": "0.0.0-alpha.4"
+    "@uniflowed/hooks": "0.0.0-alpha.5",
+    "@uniflowed/react": "0.0.0-alpha.5"
   },
   "peerDependencies": {
     "react": ">=19"

package/switch.js

@@ -27,6 +27,7 @@
 
 import * as React from "@uniflowed/react";
 
+import type { Rest } from "./internal/merge-props.js";
 import { composeHandlers, withoutComposed } from "./internal/merge-props.js";
 import { useControlled } from "./internal/controlled-state.js";
 
@@ -37,7 +38,7 @@ export component Switch(
   onCheckedChange?: (checked: boolean) => void,
   disabled?: boolean = false,
   children?: React.Node,
-  ...rest: { readonly [string]: mixed }
+  ...rest: Rest
 ) {
   const [on, setOn] = useControlled(checked, defaultChecked, onCheckedChange);
   const passed = withoutComposed(rest, ["onClick", "onKeyDown"]);

package/tabs.js

@@ -50,6 +50,7 @@ import {
   useState,
 } from "@uniflowed/react";
 
+import type { Rest } from "./internal/merge-props.js";
 import { composeHandlers, withoutComposed } from "./internal/merge-props.js";
 import { indexOfActive, itemsOf, movementFor, moveTo } from "./internal/roving-focus.js";
 import { useControlled } from "./internal/controlled-state.js";
@@ -93,7 +94,7 @@ export component TabsRoot(
   onValueChange?: (value: string) => void,
   activationMode?: ActivationMode = "automatic",
   orientation?: Orientation = "horizontal",
-  ...rest: { readonly [string]: mixed }
+  ...rest: Rest
 ) {
   const base = useId();
   const [selected, select] = useControlled(value, defaultValue, onValueChange);
@@ -141,7 +142,7 @@ export component TabsRoot(
  * tabs push themselves into as they mount answers with mount order, which stops
  * being document order the first time a tab is conditional.
  */
-export component TabsList(children: renders* TabsTab, ...rest: { readonly [string]: mixed }) {
+export component TabsList(children: renders* TabsTab, ...rest: Rest) {
   const tabs = useTabs("Tabs.List");
   const passed = withoutComposed(rest, ["onKeyDown"]);
 
@@ -190,7 +191,7 @@ export component TabsTab(
   value: string,
   children: React.Node,
   disabled?: boolean = false,
-  ...rest: { readonly [string]: mixed }
+  ...rest: Rest
 ) {
   const tabs = useTabs("Tabs.Tab");
   const active = tabs.selected === value;
@@ -248,11 +249,7 @@ export component TabsTab(
  * subscription rather than "the selected value equals mine", because a caller
  * may render a subset of panels, or none at all until data arrives.
  */
-export component TabsPanel(
-  value: string,
-  children: React.Node,
-  ...rest: { readonly [string]: mixed }
-) {
+export component TabsPanel(value: string, children: React.Node, ...rest: Rest) {
   const tabs = useTabs("Tabs.Panel");
   const register = tabs.registerPanel;
   const selected = tabs.selected === value;