@cube-dev/ui-kit 0.0.0-canary-c745805 → 0.0.0-canary-32b8046

package/docs/components/fields/TagInput.md

@@ -33,7 +33,7 @@ A multi-value field. The user types a value into a single-line input and commits
 - **`normalizeTag`** `(value: string) => string` — Rewrites a typed value before it is checked and added. Return an empty string to drop it
 - **`maxTags`** `number` — The most values the field holds. Values past it are refused and stay in the input
 - **`shouldCommitOnBlur`** `boolean` (default: `true`) — Whether leaving the field commits the typed text
-- **`isClearable`** `boolean` (default: `false`) — Whether a button clears every value and the typed text. Locked chips stay
+- **`isClearable`** `boolean` (default: `false`) — Whether a button in the input clears the typed text. It shows while there is text
 - **`filter`** `((textValue: string, inputValue: string) => boolean) | false` — Custom filter for the options, or `false` to show every option
 - **`popoverTrigger`** `'focus' | 'input' | 'manual'` (default: `input`) — When the suggestions popover opens
 - **`hideTrigger`** `boolean` (default: `false`) — Whether to hide the button that toggles the popover
@@ -44,6 +44,8 @@ A multi-value field. The user types a value into a single-line input and commits
 - **`overlayOffset`** `number` (default: `8`) — Distance between the input and the popover, in pixels
 - **`containerPadding`** `number` (default: `8`) — Minimum space between the popover and the viewport edge, in pixels
 - **`autoComplete`** `string` (default: `off`) — HTML `autocomplete` attribute for the input
+- **`inputMode`** `'text' | 'email' | 'url' | 'tel' | 'numeric' | 'decimal' | 'search' | 'none'` — Which virtual keyboard the input asks for. The input stays a text input, so the browser does not validate what is typed
+- **`enterKeyHint`** `'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'` — The label of the virtual keyboard's Enter key
 - **`onChange`** `(value: string[]) => void` — Called with the whole new list of values
 - **`onInputChange`** `(value: string) => void` — Called when the text being typed changes
 - **`onClear`** `() => void` — Called when the clear button is pressed
@@ -64,9 +66,9 @@ A multi-value field. The user types a value into a single-line input and commits
 
 **maxTags** - A hard limit on the number of values. Past it, typed, pasted and picked values are refused with a message and stay in the input, while values up to the limit are still added. For a limit that only flags the field, use a `rules` entry instead.
 
-**tagProps** - Called per value. Return a theme, an icon or `qa` for the chip. A string `children` replaces the chip's text and also names the value in the input's description and in the "Added"/"Removed" announcements, for values whose label does not come from the options. `isDisabled: true` locks the chip: it has no remove button, the keyboard skips it, its option cannot be unpicked, and Clear all keeps it. An invalid chip stays in the danger theme whatever theme it asks for.
+**tagProps** - Called per value. Return a theme, an icon or `qa` for the chip. A string `children` replaces the chip's text and also names the value in the input's description and in the "Added"/"Removed" announcements, for values whose label does not come from the options. `isDisabled: true` locks the chip: it has no remove button, the keyboard skips it, and its option cannot be unpicked. An invalid chip stays in the danger theme whatever theme it asks for.
 
-**children / items** - Options turn the input into a combobox. Typing filters them and focuses the option whose label is exactly the typed text, or else the first match. Enter or a click toggles the focused option, and the popover stays open so the user can pick several in a row. Typed text means "add": pressing Enter on an option that is already a chip refuses it as a duplicate, and unpicking it takes the arrow keys, a click, or an empty input. A picked option shows a checked box. Without `allowsCustomValue`, typed text must match an option by key or label, and on blur a query that matches nothing is dropped. With it, the typed text is offered as its own option after the matches, the same way [FilterListBox](./FilterListBox.md) does. An option in `disabledKeys` is refused however it is entered. A chip for an option shows the option's label, while the value holds its key. The label is remembered, so it survives server-side filtering (`filter={false}` with changing `items`).
+**children / items** - Options turn the input into a combobox. Typing filters them and focuses the option whose label is exactly the typed text, or else the first match. Enter or a click toggles the focused option, and the popover stays open so the user can pick several in a row. Typed text means "add": pressing Enter on an option that is already a chip refuses it as a duplicate, and unpicking it takes the arrow keys, a click, or an empty input. A picked option shows a checked box. Without `allowsCustomValue`, typed text must match an option by key or label, and on blur a query that matches nothing is dropped. With it, the typed text is offered as its own option after the matches, the same way [FilterListBox](./FilterListBox.md) does, and custom values already added are listed there too, checked and sorted, so they can be unpicked from the list as well as from their chips. One unpicked in the list stays there, unchecked, until focus leaves the field, so it can be picked back. An option in `disabledKeys` is refused however it is entered. A chip for an option shows the option's label, while the value holds its key. The label is remembered, so it survives server-side filtering (`filter={false}` with changing `items`).
 
 ### Base Properties
 
@@ -264,7 +266,9 @@ const members = [
 
 Tab goes from the input to the chips. Backspace in the empty input does too, landing on the last chip without removing it; the next Backspace removes it and moves to the one before. From a chip, Escape goes back to the input, and so does typing, which carries on in the input.
 
-### Locked Values and Clear All
+### Locked Values and Clearing the Text
+
+A locked chip has no remove button and the keyboard skips it. The clear button inside the input clears only the typed text, never the chips, and shows while there is text to clear.
 
 ```jsx
 <TagInput
@@ -295,6 +299,28 @@ Tab goes from the input to the chips. Backspace in the empty input does too, lan
 
 With the rewrite, `Ana@Acme.com` is a duplicate of `ana@acme.com` rather than a second chip.
 
+### Numbers
+
+The value is always a `string[]`. Map a numeric model at the boundary, and let `normalizeTag` write each number one way, so `10.0` is a duplicate of `10`:
+
+```jsx
+const [bounds, setBounds] = useState([0, 10, 25]);
+
+<TagInput
+  label="Bin boundaries"
+  inputMode="decimal"
+  delimiters={[',', ';', ' ']}
+  value={bounds.map(String)}
+  onChange={(next) => setBounds(next.map(Number).sort((a, b) => a - b))}
+  normalizeTag={(value) =>
+    Number.isFinite(Number(value)) ? String(Number(value)) : value
+  }
+  validateTag={(value) => Number.isFinite(Number(value)) || 'Enter a number'}
+/>;
+```
+
+For numbers written with thousands separators, turn the comma delimiter off and strip them in `normalizeTag`: `delimiters={[]}` with `normalizeTag={(value) => value.replaceAll(',', '')}`.
+
 ### Labels for Values Outside the Options
 
 When a value's label is not in the options, for example because the options are loaded on demand or leave out what is already picked, give the chip its label in `tagProps`:
@@ -331,9 +357,9 @@ const [recipients, setRecipients] = useState(['ana@acme.com']);
 
 ### Keyboard Navigation
 
-- `Tab` - Moves focus from the input to the clear button, when there is one, then to the chips, then out of the field. The chips are one Tab stop, and the popover trigger is not a Tab stop. Tabbing away closes the popover and commits the typed text
+- `Tab` - Moves focus from the input to the chips, then out of the field. The chips are one Tab stop; the popover trigger and the clear button are not Tab stops. Tabbing away closes the popover and commits the typed text
 - `Shift+Tab` - Moves back from the chips to the input
-- `Enter` - Commits the typed text. With the popover open, toggles the focused option, the one `aria-activedescendant` announces; with text typed, an option that is already a chip is refused as a duplicate rather than removed. With nothing typed and the popover closed, submits the form
+- `Enter` - Commits the typed text. With the popover open, toggles the focused option, the one `aria-activedescendant` announces; with text typed, an option that is already a chip is refused as a duplicate rather than removed. Never submits a surrounding form, even with nothing typed, so one Enter too many after the last value does not send a half-filled dialog
 - `,` (or another delimiter) - Commits the text before the caret and keeps the rest typed
 - `Escape` - Closes the popover, or clears the typed text when it is closed
 - `Backspace` in the empty input - Moves focus to the last chip without removing it, and closes the popover. A Backspace held down to clear the text stops at the empty input
@@ -349,11 +375,11 @@ const [recipients, setRecipients] = useState(['ana@acme.com']);
 - Without options the input is a text field. With options it is a combobox with a multi-select listbox of checkable options
 - The input's description reads the current values ("Selected: …") and says that Backspace moves to them, so the user hears what is already added and how to reach it
 - Focus on a chip reads its label, its position and React Aria's hint to press Delete or Backspace to remove it
-- A polite live region announces "Added …", "Removed …" and "Removed all values" when the user adds, removes or clears values. Changes made from outside the field are not announced
+- A polite live region announces "Added …" and "Removed …" when the user adds or removes a value. Changes made from outside the field are not announced
 - The chips are a grid named "Selected values" followed by the field's label. Each chip is a row, and its remove button reads "Remove" followed by the chip's label. An invalid chip is described by its validation message, not only by its color
 - A rejected value marks the input invalid. With a visible label its message is shown under the field and announced as an alert, again for each new attempt. Without one, the message is announced through the live region
 - A disabled field's chips are out of the Tab order, and so are locked chips. A read-only field's chips stay focusable, without remove buttons
-- The clear button is named "Clear all" followed by the field's label
+- The clear button is named "Clear text" followed by the field's label. Escape does the same from the keyboard
 
 ### ARIA Properties
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.0.0-canary-c745805",
+  "version": "0.0.0-canary-32b8046",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {