@tristan2828/ui-foundation 3.30.0 → 3.30.1

package/conventions/docs/cell-patterns.md

@@ -688,6 +688,12 @@ Save button, no Undo:
 | `choice`: a select, a switch, a single reference | the pick (its list opens with the field, non-modal) | closes the list with nothing picked: gives up |
 | `multi`: a multi reference | leaving it, or Ctrl/Cmd+Enter (Enter picks) | closes the list first; Esc again gives up |
 
+In either multi picker (`MultiChoice`, `MultiReference`), on a form, in
+a toolbar filter or in place, Escape never removes a pick: it closes the
+list when it's open and leaves the value alone when it's closed (Base UI
+would empty it). A pick comes off only by its chip's remove button,
+Backspace in the empty input, or unpicking it in the list.
+
 Leaving means clicking or tabbing anywhere else. Unchanged closes with no
 request; a value the form's schema refuses never leaves the browser and
 shows the schema's message. Opening another value saves the open one

package/dist/components/app/multi-choice.js

@@ -13,5 +13,17 @@ import * as React from 'react';
 import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxContent, ComboboxEmpty, ComboboxItem, ComboboxList, ComboboxValue, useComboboxAnchor, } from '../ui/combobox.js';
 export function MultiChoice({ options, value, onValueChange, getLabel = String, id, placeholder, 'aria-label': ariaLabel, 'aria-invalid': ariaInvalid, className, }) {
     const anchor = useComboboxAnchor();
-    return (_jsxs(Combobox, { multiple: true, autoHighlight: true, items: options, value: value, onValueChange: (next) => onValueChange(next), itemToStringLabel: getLabel, children: [_jsx(ComboboxChips, { ref: anchor, className: className, children: _jsx(ComboboxValue, { children: (selected) => (_jsxs(React.Fragment, { children: [selected.map((option) => (_jsx(ComboboxChip, { children: getLabel(option) }, option))), _jsx(ComboboxChipsInput, { id: id, "aria-label": ariaLabel, "aria-invalid": ariaInvalid, placeholder: selected.length === 0 ? placeholder : undefined })] })) }) }), _jsxs(ComboboxContent, { anchor: anchor, children: [_jsx(ComboboxEmpty, { children: "No options found." }), _jsx(ComboboxList, { children: (option) => (_jsx(ComboboxItem, { value: option, children: getLabel(option) }, option)) })] })] }));
+    return (_jsxs(Combobox, { multiple: true, autoHighlight: true, items: options, value: value, onValueChange: (next, details) => {
+            // Base UI empties the value on Escape while the list is closed, so
+            // a second Escape after a pick wiped every chip (issue #123). Escape
+            // never removes picks here: a chip's remove button, Backspace or
+            // unpicking in the list does. Let the key go on, so a dialog or an
+            // edit in place gets its own Escape.
+            if (details.reason === 'escape-key') {
+                details.cancel();
+                details.allowPropagation();
+                return;
+            }
+            onValueChange(next);
+        }, itemToStringLabel: getLabel, children: [_jsx(ComboboxChips, { ref: anchor, className: className, children: _jsx(ComboboxValue, { children: (selected) => (_jsxs(React.Fragment, { children: [selected.map((option) => (_jsx(ComboboxChip, { children: getLabel(option) }, option))), _jsx(ComboboxChipsInput, { id: id, "aria-label": ariaLabel, "aria-invalid": ariaInvalid, placeholder: selected.length === 0 ? placeholder : undefined })] })) }) }), _jsxs(ComboboxContent, { anchor: anchor, children: [_jsx(ComboboxEmpty, { children: "No options found." }), _jsx(ComboboxList, { children: (option) => (_jsx(ComboboxItem, { value: option, children: getLabel(option) }, option)) })] })] }));
 }

package/dist/components/app/multi-reference.js

@@ -27,7 +27,19 @@ export function MultiReference({ options, value, onValueChange, getLabel, onSear
     return (_jsxs(Combobox, { multiple: true, autoHighlight: true, 
         // Ids, not {id,label} objects: Base UI compares items to the value
         // with Object.is, so the items must have the value's own shape.
-        items: options.map((option) => option.id), value: value, onValueChange: (next) => onValueChange(next), onInputValueChange: onSearchChange, itemToStringLabel: label, filter: null, readOnly: readOnly, children: [_jsx(ComboboxChips, { ref: anchor, className: className, children: _jsx(ComboboxValue, { children: (selected) => (_jsxs(React.Fragment, { children: [selected.map((option) => (_jsx(ComboboxChip, { children: label(option) }, option))), _jsx(ComboboxChipsInput, { id: id, onKeyDown: (event) => {
+        items: options.map((option) => option.id), value: value, onValueChange: (next, details) => {
+            // Base UI empties the value on Escape while the list is closed, so
+            // a second Escape after a pick wiped every chip (issue #123). Escape
+            // never removes picks here: a chip's remove button, Backspace or
+            // unpicking in the list does. Let the key go on, so a dialog or an
+            // edit in place gets its own Escape.
+            if (details.reason === 'escape-key') {
+                details.cancel();
+                details.allowPropagation();
+                return;
+            }
+            onValueChange(next);
+        }, onInputValueChange: onSearchChange, itemToStringLabel: label, filter: null, readOnly: readOnly, children: [_jsx(ComboboxChips, { ref: anchor, className: className, children: _jsx(ComboboxValue, { children: (selected) => (_jsxs(React.Fragment, { children: [selected.map((option) => (_jsx(ComboboxChip, { children: label(option) }, option))), _jsx(ComboboxChipsInput, { id: id, onKeyDown: (event) => {
                                     if (searching && event.key === 'Enter') {
                                         event.preventDefault();
                                         event.preventBaseUIHandler();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tristan2828/ui-foundation",
-  "version": "3.30.0",
+  "version": "3.30.1",
   "description": "Shared UI foundation for contract-first, database-backed React apps: shadcn primitives, DataTable/EntityForm composites, auth, the gateway error seam, design tokens, lint rules and the AI playbook.",
   "license": "MIT",
   "repository": {