@ahrowe/ui 0.46.0 → 0.47.1

package/dist/types/common/input/input.types.d.ts

@@ -54,8 +54,10 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     disabled?: boolean;
     upperRightLabel?: string | React.ReactNode;
     labelInBorder?: boolean;
-    showCancel?: boolean;
-    onClearClicked?: (() => void) | null;
+    /** Show a button that clears the field, whenever it has a value it can change. */
+    clearable?: boolean;
+    /** Called after a clear button empties the field, by click or key. */
+    onClear?: (() => void) | null;
     min?: string | number | null;
     max?: string | number | null;
     placeholder?: string;
@@ -66,7 +68,6 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     readOnly?: boolean;
     customInput?: React.ReactElement | null;
     autoFocus?: boolean;
-    alwaysShowCancel?: boolean;
     formValidator?: FormValidator | null;
     multiline?: boolean;
     rows?: number;

package/docs/Input.md

@@ -20,7 +20,7 @@ const emailValidator = new FormValidator('', [Validators.required(), Validators.
 <Input label="Password" type={InputType.Password} value={pw} onChange={setPw} />
 
 // Search — clear button appears automatically once there's a value, and clears itself;
-// onClearClicked is optional, only needed to react to the clear beyond the value itself
+// onClear is optional, only needed to react to the clear beyond the value itself
 <Input
   type={InputType.Search}
   label="Search"
@@ -40,6 +40,9 @@ const emailValidator = new FormValidator('', [Validators.required(), Validators.
 // With suffix
 <Input label="Amount" suffix="€" value={amount} onChange={setAmount} />
 
+// Clear button, shown whenever there is a value to clear
+<Input label="City" clearable value={city} onChange={setCity} />
+
 // Row layout
 <Input label="Name" isRow value={name} onChange={setName} />
 
@@ -66,9 +69,9 @@ const emailValidator = new FormValidator('', [Validators.required(), Validators.
 
 **Custom icon vs. built-in type icon:** passing `icon` alongside a decorative type (`Edit`, `Phone`, `Email`) replaces that type's built-in icon outright, since there's nothing functional attached to it to lose. `Search` and `Password` ignore `icon` — their icon is functional (clear button, show/hide toggle), not decorative, so it always renders regardless of whether `icon` is set.
 
-**Search clear icon:** `InputType.Search` shows a magnifying glass that animates into a clear (×) button once the field has a value, rather than the browser's own native search-cancel decoration, which is suppressed so it doesn't clash with the theme.
+**Search clear icon:** `InputType.Search` shows a magnifying glass that animates into a clear (×) button once the field has a value it can change, rather than the browser's own native search-cancel decoration, which is suppressed so it doesn't clash with the theme.
 
-**Icon accessibility:** any icon with an active click handler (`onIconClick`, the search clear button, the password show/hide toggle, the cancel/clear button) is keyboard-focusable (`Tab`) and activates on Enter or Space, with a visible focus outline. The ones with a fixed meaning (search clear, password toggle, cancel) also carry an `aria-label`. A purely decorative icon (no click handler) stays out of the tab order.
+**Icon accessibility:** any icon with an active click handler (`onIconClick`, the search clear button, the password show/hide toggle, the `clearable` button) is keyboard-focusable (`Tab`) and activates on Enter or Space, with a visible focus outline. The ones with a fixed meaning (search clear, password toggle, clear) also carry an `aria-label`. A purely decorative icon (no click handler) stays out of the tab order. Either clear button puts the cursor back in the field, so a keyboard user does not lose their place.
 
 **Mobile keyboard layout:** `Email`, `Phone`, and `Search` each set the matching `inputMode` (`email` / `tel` / `search`), so mobile browsers show the right on-screen keyboard — an `@`-and-`.com` layout for email, a numeric dial pad for phone, a "Go"/search action key for search. `Email`'s native `type` is deliberately left as `text` rather than `email`, to avoid the browser's own "please match the requested format" validation UI fighting the `formValidator`-driven error tooltip this component already shows — `inputMode="email"` alone is enough to get the correct keyboard. Pass `inputMode` directly to override the computed default for any other case.
 
@@ -102,17 +105,16 @@ The stored value is the formatted one, spaces included, so strip them before a l
 | `isRequired` | `boolean` | |
 | `errorMessage` | `string` | Manual error (overrides formValidator) |
 | `isValid` | `boolean` | Manual valid state |
-| `multiline` | `boolean` | Renders as textarea |
+| `multiline` | `boolean` | Renders as textarea, resizable from the field's corner; `styles={{ container: { resize: 'none' } }}` turns that off |
 | `rows` | `number` | Textarea row count |
 | `autoResize` | `boolean` | Textarea grows with content |
 | `suffix` | `string \| ReactNode` | Right-side suffix |
-| `icon` | `ReactElement` | Custom icon, positioned absolute on the side set by `iconPosition`; clickable via `onIconClick`. Replaces the built-in icon for `Edit`/`Phone`/`Email`; ignored for `Search`/`Password` (see below) |
+| `icon` | `ReactElement` | Custom icon, on the side set by `iconPosition`; clickable via `onIconClick`. On the right it follows the `suffix` and the clear button, each in its own space. Replaces the built-in icon for `Edit`/`Phone`/`Email`; ignored for `Search`/`Password` (see below) |
 | `iconPosition` | `InputIconPosition` | Side the input's icon renders on — built-in or custom, whichever is showing (see enum above for the default). On the left, the material label (resting and floated) and the fieldset notch shift right to clear it too |
 | `onIconClick` | `() => void` | Click handler for the custom `icon` |
 | `upperRightLabel` | `string \| ReactNode` | Small label above right |
-| `showCancel` | `boolean` | Show clear icon when focused (ignored for `InputType.Search`, which always shows it once there's a value — see below) |
-| `alwaysShowCancel` | `boolean` | Always show clear icon |
-| `onClearClicked` | `() => void` | Called after the clear button clears the value. Optional — clicking clear always empties the field itself, whether or not this is set |
+| `clearable` | `boolean` | Show a clear button whenever the field has a value it can change (not while `disabled` or `readOnly`). While the field is empty it takes no space, so a `suffix` sits at the edge; the first character grows it in. `InputType.Search` has its own, see below |
+| `onClear` | `() => void` | Called after a clear button empties the field. Optional: clearing always empties the field itself |
 | `isRow` | `boolean` | Horizontal layout |
 | `labelInBorder` | `boolean` | Label inside fieldset border |
 | `alwaysFloatLabel` | `boolean` | Keep the material label floated in the border notch even when empty and unfocused, so an empty field reads as blank instead of showing the label as if it were a value. Only applies with `useMatLabelStyle` (default) |
@@ -138,4 +140,20 @@ The combobox components — `InputDropdown`, `SearchInput`, `MultiSelect`, `Date
 
 **Autofilled fields stay on the theme.** Chrome paints `:-webkit-autofill` with its own background and text colour, overriding `background` and `color` outright, which turned a filled field pale blue with near-black text on a dark theme. Input clips that background to the text instead of covering it: the page cannot win on colour, but it can say where a background paints, and `-webkit-text-fill-color` then beats the text colour. The field itself is transparent, so what shows through is whatever is genuinely behind it — inside a Modal, a Card, or a surface of your own — and nothing has to be told what that is.
 
-A custom `--input-background` is covered by the same mechanism, because the container paints it and the transparent field reveals it. Setting a background on the field itself with the `background` shorthand — `styles={{ input: { background: '…' } }}` — resets `background-clip` along with it, and an autofilled field there falls back to Chrome's own colours; `background-color` does not.
+A custom `--input-background` is covered by the same mechanism, because the container paints it and the transparent field reveals it. Setting a background on the field itself with the `background` shorthand — `styles={{ input: { background: '…' } }}` — resets `background-clip` along with it, and an autofilled field there falls back to Chrome's own colours; `background-color` does not. Either way it covers only the text: a background meant for the whole field, under the icons and the suffix too, goes on `styles.container`.
+
+## Migration from `showCancel`
+
+Before 0.47 the clear button came from two props, and its callback had a name that missed key
+presses. TypeScript points at every use:
+
+| Before | After |
+|--------|-------|
+| `showCancel` | `clearable` |
+| `alwaysShowCancel` | `clearable` |
+| `onClearClicked={…}` | `onClear={…}` |
+
+What changes on screen: `showCancel` showed the button only on hover or focus, and
+`alwaysShowCancel` showed it even on an empty field, where it did nothing. `clearable` shows it
+whenever the field has a value, and never while it is `disabled` or `readOnly`, where both old
+props would still clear it.

package/docs/Textarea.md

@@ -36,7 +36,7 @@ const descValidator = new FormValidator('', [Validators.required(), Validators.m
 | `value` | `string` | Controlled value |
 | `onChange` | `(value: string) => void` | Change handler |
 | `rows` | `number` | Initial visible row count |
-| `autoResize` | `boolean` | Grows with content |
+| `autoResize` | `boolean` | Grows with content, in place of the resize grip. To drop the grip without it: `styles={{ container: { resize: 'none' } }}` |
 | `formValidator` | `FormValidator` | Connects to validation |
 | `placeholder` | `string` | |
 | `readOnly` | `boolean` | |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ahrowe/ui",
-  "version": "0.46.0",
+  "version": "0.47.1",
   "description": "A React UI component library with theming, CSS Modules, and TypeScript support",
   "keywords": [
     "agent",