wings-plugin-ui 0.1.0 → 0.1.1

package/README.md

@@ -70,11 +70,11 @@ message.
 | `List`, `ListItem`, `ListButton` | `ordered` and `compact` on `List`, `align` on the rows | A list of rows; a `ListButton` in a `ListItem` makes the row a button |
 | `Dot`, `Spinner` | `tone`, `size`, `label`; `Dot` also `color` | A status dot or a spinner, announced only with a `label`. A dot's `color` comes from your data, like a work item type's `#cc293d` |
 | `Pill`, `Tag` | `tone` | A filled pill, or an outlined tag like a branch |
-| `Loading`, `Empty` | `Empty`: `title`, `detail` | Before the first data, and nothing to show |
+| `Loading`, `Empty` | `Empty`: `title`, `description` | Before the first data, and nothing to show |
 | `Button` | `variant` (`primary`, `ghost`, `danger`), `size` (`small`), `busy` | A button, `type="button"`; `busy` shows a spinner and ignores clicks, keeping focus |
 | `Chip`, `Chips` | `pressed`; `Chips`: `label`, `options`, `value`, `onChange` | A small quiet button, and a group of them that picks one, with `aria-pressed`. An option's other props, like `id`, go to its chip |
 | `Tabs` | `label`, `items`, `value`, `onChange`, `children` | Tabs with arrow keys, Home and End, over their panel |
-| `Field` | `label`, `hint`, `error`, `id`, `inline` | A labelled field that names and describes the input in it. `id` becomes the input's, for a page that puts focus back by id; `inline` puts the label beside it |
+| `Field` | `label`, `hint`, `error`, `id`, `inline` | A labelled field that names and describes the one input in it (a second input goes beside it: Base UI gives every input in a Field the first one's id). `id` becomes the input's, for a page that puts focus back by id; `inline` puts the label beside it |
 | `FieldGroup` | `label`, `hint`, `error` | Several controls under one label, like checkboxes: a `fieldset` with its `legend`, described by the hint; an error marks each checkbox invalid |
 | `TextInput`, `SearchField`, `Select` | `label`; `Select`: `options`, `value`, `onChange` | Inputs Wings styles; outside a `Field`, `label` names them |
 | `Checkbox` | `checked`, `onChange`, `children` | A checkbox with its label |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wings-plugin-ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "React components and the stylesheet for Wings plugin pages, on Base UI like the Wings app's shadcn/ui components.",
   "license": "MIT",
   "type": "module",

package/ui.d.ts

@@ -167,7 +167,8 @@ export function Tabs<V extends string>(
 
 /**
  * A labelled field with a `hint` or an `error` under it, for the `TextInput`, `SearchField`, `Select` or `Combobox` in
- * `children`, on Base UI's Field.
+ * `children`, on Base UI's Field. It takes one input: Base UI gives every input in a Field the first one's id, so a
+ * second input goes beside the Field.
  */
 export function Field(
   props: Props<"div"> & {

package/ui.js

@@ -356,7 +356,12 @@ export function Select({ label, options, value, defaultValue, onChange, disabled
       items: options,
       // Like a native select, one without a `value` starts on its first option.
       ...(value === undefined ? { defaultValue: defaultValue ?? options[0]?.value ?? null } : { value }),
-      onValueChange: (next) => onChange?.(next),
+      onValueChange: (next, details) => {
+        // Base UI clears a pick whose option left the list, but checks against the value from before the render, so
+        // a page that picks and drops an option (a "Choose…" row) at once would get null for a value still listed.
+        if (next === null && details.reason === "none" && options.some((o) => o.value === value)) return;
+        onChange?.(next);
+      },
       disabled,
       name,
       required,