@nxgt/material 2.11.1 → 2.13.0

package/docs/troubleshooting.md

@@ -120,6 +120,7 @@ words in your error.
 - [A `TimeFormField` shows its error on a desktop but not on a phone](#a-timeformfield-shows-its-error-on-a-desktop-but-not-on-a-phone)
 - [`setError(…, { shouldFocus: true })` or a failed submit does not focus the field](#seterror--shouldfocus-true--or-a-failed-submit-does-not-focus-the-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)
 - [`touchedFields` stays empty after leaving a field, or `mode: 'onBlur'` never validates](#touchedfields-stays-empty-after-leaving-a-field-or-mode-onblur-never-validates)
 - [`TypeError: values.map is not a function` (a `SliderFormField`)](#typeerror-valuesmap-is-not-a-function)
 - [An end-to-end test no longer finds `aria-expanded` on a `ResponsiveButton`](#an-end-to-end-test-no-longer-finds-aria-expanded-on-a-responsivebutton)
@@ -139,6 +140,9 @@ words in your error.
 - [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 `CheckboxGroup`](#a-test-no-longer-finds-aria-invalid-on-a-checkboxgroup)
 - [A test no longer finds `aria-invalid` on a `Switch` row or an `Autocomplete`'s chips](#a-test-no-longer-finds-aria-invalid-on-a-switch-row-or-an-autocompletes-chips)
+- [An `Autocomplete` lists more options than before, or "ecole" finds "École"](#an-autocomplete-lists-more-options-than-before-or-ecole-finds-école)
+- [`onQueryChange` runs more often after upgrading](#onquerychange-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)
@@ -150,6 +154,7 @@ words in your error.
 - [A test no longer finds a calendar day by its number, or by "Today" or "selected"](#a-test-no-longer-finds-a-calendar-day-by-its-number-or-by-today-or-selected)
 - [`#<name>` no longer finds a `SwitchFormField` or `CheckboxFormField`](#name-no-longer-finds-a-switchformfield-or-checkboxformfield)
 - [`#<name>` or `#<option value>` no longer finds a radio or checkbox group or one of its options](#name-or-option-value-no-longer-finds-a-radio-or-checkbox-group-or-one-of-its-options)
+- [One option of a `RadioGroup` cannot be disabled](#one-option-of-a-radiogroup-cannot-be-disabled)
 - [`#<name>` no longer finds a text, OTP, number, date or picker form field, or a second form's field has no name](#name-no-longer-finds-a-text-otp-number-date-or-picker-form-field-or-a-second-forms-field-has-no-name)
 - [A double click or Enter submits a form twice, or a test finds `aria-busy` in an idle `Button`](#a-double-click-or-enter-submits-a-form-twice-or-a-test-finds-aria-busy-in-an-idle-button)
 - [An empty `UploadField` or `TimeField` is no longer tinted](#an-empty-uploadfield-or-timefield-is-no-longer-tinted)
@@ -2152,6 +2157,22 @@ const design = within(topics).getByRole('button', { name: 'Design' });
 expect(design).toHaveAttribute('aria-pressed', 'true');
 ```
 
+### The `ref` of a `SelectChipField` focuses nothing
+
+**When:** `ref.current?.focus()` on a `SelectChipField`, or React Hook Form's
+`setFocus(name)` on a `SelectChipFormField`, leaves focus where it was, or
+lands on the first chip when one is chosen. Before the release that lists
+this fix only.
+**Why:** the `ref` is the `role="group"` element, which a browser cannot
+focus; the chips are the focusable controls.
+**Fix:** upgrade: the `ref` now reaches the chosen chip, else the first, as a
+radio group does (type `Ref<HTMLButtonElement>`). Temporary, until
+material #502: on an older release, focus the chip yourself.
+
+```tsx
+group.current?.querySelector<HTMLElement>('[aria-pressed="true"], button')?.focus();
+```
+
 ### `touchedFields` stays empty after leaving a field, or `mode: 'onBlur'` never validates
 
 **When:** a `*FormField` keeps `formState.touchedFields` (and
@@ -2657,6 +2678,60 @@ await expect(page.getByRole('switch', { name: 'Notifications' })).toHaveAttribut
 await expect(page.getByRole('combobox', { name: 'Country' })).toHaveAttribute('aria-invalid', 'true');
 ```
 
+### An `Autocomplete` lists more options than before, or "ecole" finds "École"
+
+**When:** after upgrading to 2.12.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"`:
+
+```tsx
+// Back to a plain case-insensitive match, accents counted:
+<Autocomplete
+	mode="single"
+	options={options}
+	value={value}
+	filter={(option, query) => option.label.toLowerCase().includes(query.toLowerCase())}
+/>
+```
+
+### `onQueryChange` runs more often after upgrading
+
+**When:** after upgrading to 2.12.0, `onQueryChange` 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 1 s.
+**Fix:** set the pause you had, `debounceMs={1000}`, or move the fetch to `onSearch`, 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 `onQueryChange`, 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 `onSearch`. 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:
+
+```tsx
+<Autocomplete
+	mode="single"
+	value={value}
+	onValueChange={(next) => setValue(next ?? '')}
+	onSearch={(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
@@ -2867,6 +2942,29 @@ await page.locator('#married').getByRole('radio', { name: 'Yes' }).check();
 await page.locator('#married-0').check(); // the first option
 ```
 
+### One option of a `RadioGroup` 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:
+
+```tsx
+<RadioGroup
+  label="Person"
+  options={[
+    { value: 'ada', label: 'Ada' },
+    { value: 'bob', label: 'Bob (already linked)', disabled: true },
+  ]}
+/>
+```
+
 ### `#<name>` no longer finds a text, OTP, number, date or picker form field, or a second form's field has no name
 
 **When:** two forms on one page have a field with the same `name` (a sign-in

package/package.json

@@ -1,10 +1,15 @@
 {
 	"name": "@nxgt/material",
-	"version": "2.11.1",
+	"version": "2.13.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
 	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/softistx/nxgt-material.git",
+		"directory": "packages/material"
+	},
 	"type": "module",
 	"files": [
 		"dist",
@@ -114,7 +119,7 @@
 		"docs:previews": "vitest run --project previews"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.7.1",
+		"@nxgt/material-core": "^0.8.0",
 		"@base-ui/react": "^1.6.0",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.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>;