@nxgt/material-vue 0.30.1 → 0.32.0

package/docs/troubleshooting.md

@@ -36,6 +36,9 @@ words in your error.
 - [An end-to-end test no longer finds a required field by a name ending in `*`](#an-end-to-end-test-no-longer-finds-a-required-field-by-a-name-ending-in-)
 - [A test no longer finds `aria-invalid` on an upload field's group or drop zone](#a-test-no-longer-finds-aria-invalid-on-an-upload-fields-group-or-drop-zone)
 - [A test no longer finds `aria-invalid` on a `Switch` row or an `Autocomplete` box](#a-test-no-longer-finds-aria-invalid-on-a-switch-row-or-an-autocomplete-box)
+- [An `Autocomplete` lists more options than before, or "ecole" finds "École"](#an-autocomplete-lists-more-options-than-before-or-ecole-finds-école)
+- [`@query-change` runs more often after upgrading](#query-change-runs-more-often-after-upgrading)
+- [An older search's results replace the newer ones in an `Autocomplete`](#an-older-searchs-results-replace-the-newer-ones-in-an-autocomplete)
 - [A test no longer finds `aria-invalid` on an `OtpField` slot](#a-test-no-longer-finds-aria-invalid-on-an-otpfield-slot)
 - [A test no longer finds the breadcrumb's home button](#a-test-no-longer-finds-the-breadcrumbs-home-button)
 - [A test no longer finds a sidebar entry by the `button` role](#a-test-no-longer-finds-a-sidebar-entry-by-the-button-role)
@@ -47,6 +50,7 @@ words in your error.
 - [A test no longer finds a calendar day by its number](#a-test-no-longer-finds-a-calendar-day-by-its-number)
 - [A `QRCode`'s `aria-label` is no longer on its wrapper](#a-qrcodes-aria-label-is-no-longer-on-its-wrapper)
 - [A `CheckboxGroup` or `RadioGroupField` option selected by `#<id>-<value>` stops matching](#a-checkboxgroup-or-radiogroupfield-option-selected-by-id-value-stops-matching)
+- [One option of a `RadioGroupField` cannot be disabled](#one-option-of-a-radiogroupfield-cannot-be-disabled)
 - [A `Table`'s `id`, `aria-*` or `style` is no longer on its scrolling container](#a-tables-id-aria--or-style-is-no-longer-on-its-scrolling-container)
 
 **Feedback**
@@ -87,6 +91,7 @@ words in your error.
 - [`meta.touched` stays false after leaving a field](#metatouched-stays-false-after-leaving-a-field)
 - [A failed submit does not focus the first invalid field](#a-failed-submit-does-not-focus-the-first-invalid-field)
 - [A test that finds a chip by `aria-selected` or `getByRole('option')` no longer finds it](#a-test-that-finds-a-chip-by-aria-selected-or-getbyroleoption-no-longer-finds-it)
+- [The `ref` of a `SelectChipField` focuses nothing](#the-ref-of-a-selectchipfield-focuses-nothing)
 - [A multi-step form reopens at a later step](#a-multi-step-form-reopens-at-a-later-step)
 - [The form could not be loaded.](#the-form-could-not-be-loaded)
 
@@ -577,6 +582,56 @@ await expect(page.getByRole('switch', { name: 'Notifications' })).toHaveAttribut
 await expect(page.getByLabel('Country')).toHaveAttribute('aria-invalid', 'true');
 ```
 
+### An `Autocomplete` lists more options than before, or "ecole" finds "École"
+
+**When:** after upgrading to 0.31.0, typing in an `Autocomplete` with local
+`options` keeps options it used to drop: `e` keeps "Évry", `orle` keeps
+"Orléans".
+**Why:** local matching is now accent-insensitive by default (`filter`
+defaults to `'accent-insensitive'`): the label or value and the query are
+both lowercased in the provider's language and stripped of their accents
+before they are compared. Before, an accent had to be typed to match.
+**Fix:** nothing, if that is what your users expect. To match as before,
+pass your own `filter`; to show `options` exactly as you give them (they are
+filtered on your server), pass `filter="none"`:
+
+```vue
+<!-- Back to a plain case-insensitive match, accents counted: -->
+<Autocomplete
+  v-model="value"
+  :options="options"
+  :filter="(option, query) => option.label.toLowerCase().includes(query.toLowerCase())"
+/>
+```
+
+### `@query-change` runs more often after upgrading
+
+**When:** after upgrading to 0.31.0, `@query-change` is called sooner after the
+user stops typing, so a server you fetch from there gets more requests.
+**Why:** the pause it waits for is now `debounceMs`, 250 ms by default; it
+was a fixed 300 ms.
+**Fix:** set the pause you had, `:debounce-ms="300"`, or move the fetch to `on-search`, which
+also aborts the previous request and drops a stale response.
+
+### An older search's results replace the newer ones in an `Autocomplete`
+
+**When:** you fetch `options` yourself from `@query-change`, and a slow response
+for an earlier query lands after a faster one for the latest: the list shows
+the results of what the user typed before.
+**Why:** each of your requests resolves whenever the server answers, and
+the last one to resolve wins.
+**Fix:** use `on-search`. It hands each search an `AbortSignal` (pass it to
+`fetch`), aborts the previous search, and drops any response that lands for
+an older query, even from an API that ignores the signal:
+
+```vue
+<Autocomplete
+  v-model="value"
+  :on-search="(query, { signal }) =>
+    fetch(`/api/people?q=${encodeURIComponent(query)}`, { signal }).then((r) => r.json())"
+/>
+```
+
 ### A test no longer finds `aria-invalid` on an `OtpField` slot
 
 **When:** `[data-slot="input-otp-slot"][aria-invalid]` (or
@@ -792,6 +847,30 @@ which a `group` may not carry: assert its description instead,
 hidden hint sits inside the helper element, so match its text with
 `getByText('Pick any.', { exact: false })` or the description with a RegExp.
 
+### One option of a `RadioGroupField` cannot be disabled
+
+**When:** you need one choice greyed out (a person already linked, a plan the
+account cannot take) and `disabled` on the group disables all of them. Before
+this release the options had no `disabled`, so apps listed the unavailable ones
+apart or hand-built the group from `RadioGroupItem`.
+**Why:** an option was only `{ value, label }`; `disabled` was the group's.
+**Fix:** upgrade, and set `disabled` on the option. It is rendered and
+announced as disabled, its label is muted (still 4.5:1) and the arrow keys
+skip it; the group's own `disabled` still disables every option. An option
+that is disabled while it is the current `value` stays checked, as in the
+Radix and Reka primitives:
+
+```vue
+<RadioGroupField
+  v-model="person"
+  label="Person"
+  :options="[
+    { value: 'ada', label: 'Ada' },
+    { value: 'bob', label: 'Bob (already linked)', disabled: true },
+  ]"
+/>
+```
+
 ### A `Table`'s `id`, `aria-*` or `style` is no longer on its scrolling container
 
 **When:** after upgrading to 0.24.0, either:
@@ -1770,6 +1849,22 @@ const design = within(topics).getByRole('button', { name: 'Design' });
 expect(design).toHaveAttribute('aria-pressed', 'true');
 ```
 
+### The `ref` of a `SelectChipField` focuses nothing
+
+**When:** a template ref to a `SelectChipField` (or a `SelectChipFormField`)
+has no `focus()`, so a parent cannot put focus in the field. Before the
+release that lists this fix only.
+**Why:** the ref is the component instance, and its root is a `role="group"`
+element, which a browser cannot focus.
+**Fix:** upgrade: the instance exposes `focus()`, which focuses the chosen
+chip, else the first one that is not disabled, as a radio group does.
+Temporary, until material #502: on an older release, focus the chip
+yourself.
+
+```ts
+field.value?.$el.querySelector<HTMLElement>('[aria-pressed="true"], button')?.focus();
+```
+
 ### A multi-step form reopens at a later step
 
 **When:** a wizard built on `defineStepFormStore` opens at the step (and with

package/package.json

@@ -1,10 +1,15 @@
 {
 	"name": "@nxgt/material-vue",
-	"version": "0.30.1",
+	"version": "0.32.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
 	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/softistx/nxgt-material.git",
+		"directory": "packages/material-vue"
+	},
 	"type": "module",
 	"files": [
 		"dist",
@@ -119,7 +124,7 @@
 		"docs:previews": "vitest run --project previews"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.7.1",
+		"@nxgt/material-core": "^0.8.0",
 		"@floating-ui/dom": "^1.8.0",
 		"@fortawesome/fontawesome-common-types": "7.3.1",
 		"@lucide/vue": "^1.45.0",

package/dist/lib/components/ui/fields/search-field/debounce.d.ts

@@ -1,5 +0,0 @@
-export type Debounced<Args extends unknown[]> = ((...args: Args) => void) & {
-    cancel: () => void;
-    flush: () => void;
-};
-export declare function debounce<Args extends unknown[]>(fn: (...args: Args) => void, ms: number): Debounced<Args>;