@nxgt/material 2.11.1 → 2.13.0

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @nxgt/material
 
+## 2.13.0
+
+### Minor Changes
+
+- [#521](https://github.com/softistx/nxgt-material/pull/521) [`b76cd9a`](https://github.com/softistx/nxgt-material/commit/b76cd9ae3cc4f4d0f1b20cec31c9471819ffcd3c) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `Autocomplete` can search a server (softistx/nxgt-material#514). Fixes [#514](https://github.com/softistx/nxgt-material/issues/514).
+  
+  - **Server search.** `onSearch(query, { signal })` (Vue: the function prop `on-search`, so `@search="fn"` binds it too) is called once typing pauses and its results become the list. Each search aborts the previous one (pass `signal` to `fetch`), and a response that lands after a newer one is dropped, even from an API that ignores the signal. `minQueryLength` (Vue: `min-query-length`, default 1) is how many characters it waits for; below it the list says "Type at least N characters to search." A rejected search is shown and announced ("The search failed. Try again.") and reported to `onSearchError` (Vue: `@search-error`). `options` is now optional: with `onSearch` it is the list before a search and the selected options' labels, and a picked option keeps its chip once a new search no longer returns it.
+  - **Controlled mode.** `loading` and `searchError` (Vue: `search-error`), beside `onQueryChange` (Vue: `@query-change`), for an app that fetches `options` itself.
+  - **A configurable debounce.** `debounceMs` (Vue: `debounce-ms`), 250 ms by default, sets the pause before `onSearch` and `onQueryChange`.
+  - **Accent-insensitive matching.** `filter`: `'accent-insensitive'` (the default without `onSearch`), `'none'` (the default with `onSearch`) or `(option, query) => boolean`. The default compares the label or value with the query lowercased in the provider's language and stripped of accents, so "e" finds "École" and "orle" finds "Orléans". Vue's exported `filterAutocompleteOptions` matches the same way and takes an optional `locale`.
+  - **Accessibility.** A polite live region announces "Loading…", then "N results" / "No results" (or the failure) once the search answers or typing pauses, not on every keystroke; the list is `aria-busy` while loading. New strings: `material.autocomplete.loading`, `.results`, `.search-error`, `.min-query` (en, fr). The keyboard works as before.
+  - React: clearing a single `Autocomplete`'s input no longer throws (`Cannot read properties of null (reading 'value')`).
+  - `@nxgt/material-core` adds `/debounce` (the `debounce` both libraries' `SearchField` kept a copy of, still exported by both, Vue now with its `Debounced` type), `/text-match` (`foldText`, `matchesText`) and `/async-search` (`createAsyncSearch`, `searchAnnouncement`).
+  
+  Apps that built their own search field and result list while waiting for this (marked `Temporary, until material [#514](https://github.com/softistx/nxgt-material/issues/514)`) can replace it with `onSearch` and remove the workaround.
+  
+  **Behaviour changes, no API removed.**
+  
+  - Local matching ignores accents by default, so a query can keep more options than before. To match as before, pass your own `filter`, for example `filter={(option, query) => option.label.toLowerCase().includes(query.toLowerCase())}`; to show `options` exactly as given (filtered on your server), pass `filter="none"`.
+  - `onQueryChange` (`@query-change`) now runs 250 ms after typing pauses; it was a fixed 1 s in `@nxgt/material` and 300 ms in `@nxgt/material-vue`. Search for `onQueryChange` / `@query-change`, and add `debounceMs={1000}` (`:debounce-ms="300"`) where the old pause mattered — or move the fetch to `onSearch`.
+  - React: the list's empty text is no longer a live region of its own (Base UI's `ComboboxEmpty` had `role="status"`); the field's one status region (`[data-slot="autocomplete-status"]`) says "No results" instead. A test that found the empty text by `role="status"` finds it by its text.
+
+- [#518](https://github.com/softistx/nxgt-material/pull/518) [`102f3b8`](https://github.com/softistx/nxgt-material/commit/102f3b822ea8d1e83aaffec8b6739ce4fdb5a599) Thanks [@SteveGT96](https://github.com/SteveGT96)! - A `RadioGroup` option can be disabled on its own (softistx/nxgt-material#513): `options` take `disabled?: boolean`, in `RadioGroup` and `RadioGroupFormField` of `@nxgt/material` and in `RadioGroupField` and `RadioGroupFormField` of `@nxgt/material-vue`. A disabled option is announced as disabled, skipped by the arrow keys (as the Radix and Reka UI primitives do), and drawn with a muted label (4.5:1 in both themes) and a faded radio; the group's own `disabled` still disables every option. `@nxgt/material` also exports the `RadioGroupOption` type, as `@nxgt/material-vue` does. Apps can drop the list of unavailable choices they kept apart (`Temporary, until material [#513](https://github.com/softistx/nxgt-material/issues/513)`). Fixes [#513](https://github.com/softistx/nxgt-material/issues/513).
+
+### Patch Changes
+
+- [#519](https://github.com/softistx/nxgt-material/pull/519) [`18f30c1`](https://github.com/softistx/nxgt-material/commit/18f30c1cc6cc41c2b73a43fad2501b7db2bbc016) Thanks [@SteveGT96](https://github.com/SteveGT96)! - package.json names its repository, so issue reports route to it. Each package now has a `repository` field (`git+https://github.com/softistx/nxgt-material.git`, with its `directory` under `packages/`).
+- Updated dependencies [[`b76cd9a`](https://github.com/softistx/nxgt-material/commit/b76cd9ae3cc4f4d0f1b20cec31c9471819ffcd3c), [`18f30c1`](https://github.com/softistx/nxgt-material/commit/18f30c1cc6cc41c2b73a43fad2501b7db2bbc016)]:
+  - @nxgt/material-core@0.8.0
+
+## 2.12.0
+
+### Minor Changes
+
+- [#507](https://github.com/softistx/nxgt-material/pull/507) [`d4383ff`](https://github.com/softistx/nxgt-material/commit/d4383ff3c0915deafe1bd664c4c6d2eb7b247455) Thanks [@SteveGT96](https://github.com/SteveGT96)! - A `SelectChipField` can be focused (softistx/nxgt-material#502). Its `ref` was the `role="group"` element, which a browser cannot focus, so `ref.current.focus()` and React Hook Form's `setFocus(name)` did nothing, or landed on the first chip even when one was chosen. In `@nxgt/material`, the `ref` now reaches the chosen chip, else the first, as a radio group puts focus on its checked radio (its type is `Ref<HTMLButtonElement>`, no longer the group's `HTMLDivElement`); `SelectChipFormField` hands React Hook Form's `field.ref` to that chip, so `shouldFocusError` and `setFocus` focus it. In `@nxgt/material-vue`, `SelectChipField` and `SelectChipFormField` expose `focus()` on a template ref. Apps can remove a lookup of the first chip made to focus the field (`Temporary, until material [#502](https://github.com/softistx/nxgt-material/issues/502)`). Fixes [#502](https://github.com/softistx/nxgt-material/issues/502).
+  
+  **Migration (`@nxgt/material`).** The `ref` type changed. An app that passes React Hook Form's `field.ref`, or that does not type the ref, has nothing to change. An app that typed its own ref for the group, `useRef<HTMLDivElement>(null)`, gets a TypeScript error: change it to `useRef<HTMLButtonElement>(null)`. The ref now holds the chosen chip (else the first one), not the group.
+
 ## 2.11.1
 
 ### Patch Changes

package/README.md

@@ -361,7 +361,7 @@ React-only today: `Combobox` (not planned in Vue) and `StepperIndicator`.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/selection-choice-selectfield.webp" width="120" alt="SelectField"> | [`SelectField`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/selection-and-choice.md#selectfield) · `SelectFormField` | Labelled select built from `options`, with `renderOption`. | `SelectField`, `SelectFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/selection-choice-combobox.webp" width="120" alt="Combobox"> | [`Combobox`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/selection-and-choice.md#combobox), `ComboboxInput`, `ComboboxContent`, `ComboboxList`, `ComboboxItem`, `ComboboxChips`… | Base UI combobox primitives: input, popup list, groups and chips. | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/selection-choice-comboboxfield.webp" width="120" alt="ComboboxField"> | [`ComboboxField`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/selection-and-choice.md#comboboxfield) · `ComboboxFormField` | Labelled, searchable single select over `{ value, label }` options. | `ComboboxField`, `ComboboxFormField` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/selection-choice-autocomplete.webp" width="120" alt="Autocomplete"> | [`Autocomplete`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/selection-and-choice.md#autocomplete), `AutocompleteChips` · `AutocompleteFormField` | Single or multiple (chips) autocomplete with free-solo values and a query callback. | `Autocomplete`, `AutocompleteFormField` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/selection-choice-autocomplete.webp" width="120" alt="Autocomplete"> | [`Autocomplete`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/selection-and-choice.md#autocomplete), `AutocompleteChips` · `AutocompleteFormField` | Single or multiple (chips) autocomplete with free-solo values, accent-insensitive matching and a debounced server search. | `Autocomplete`, `AutocompleteFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/selection-choice-checkbox.webp" width="120" alt="Checkbox"> | [`Checkbox`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/selection-and-choice.md#checkbox) · `CheckboxFormField` | Checkbox with label, helper text and an indeterminate state. | `Checkbox`, `CheckboxFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/selection-choice-checkboxgroup.webp" width="120" alt="CheckboxGroup"> | [`CheckboxGroup`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/selection-and-choice.md#checkboxgroup) · `CheckboxGroupFormField` | Checkbox list built from `options`, valued as `string[]`. | `CheckboxGroup`, `CheckboxGroupFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/selection-choice-radiogroup.webp" width="120" alt="RadioGroup"> | [`RadioGroup`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/selection-and-choice.md#radiogroup), `RadioGroupField`, `RadioGroupItem` · `RadioGroupFormField` | Labelled radio group built from `options`, horizontal or vertical. `RadioGroupField` is an alias, Vue's name. | `RadioGroupField`, `RadioGroup`, `RadioGroupFormField` |

package/dist/{_Uint8Array-azThpjEP.js → _Uint8Array-QCcRMhXd.js}

@@ -1,4 +1,4 @@
-import { S as e, T as t, d as n, g as r, l as i, u as a, v as o, w as s, x as c } from "./translator-BfqVlNGW.js";
+import { S as e, T as t, d as n, g as r, l as i, u as a, v as o, w as s, x as c } from "./translator-BMFC0lBV.js";
 //#region ../../node_modules/lodash-es/_isIndex.js
 var l = 9007199254740991, u = /^(?:0|[1-9]\d*)$/;
 function d(e, t) {

package/dist/{_overRest-DMn4Dt71.js → _overRest-C21ZmKyH.js}

@@ -1,4 +1,4 @@
-import { m as e, p as t } from "./translator-BfqVlNGW.js";
+import { m as e, p as t } from "./translator-BMFC0lBV.js";
 //#region ../../node_modules/lodash-es/identity.js
 function n(e) {
 	return e;

package/dist/{async-slice-DhZDjEtw.js → async-slice-TBZ6Taw2.js}

@@ -1,5 +1,5 @@
-import { C as e, S as t, h as n, l as r, m as i, p as a, u as o, v as s, w as c, x as l } from "./translator-BfqVlNGW.js";
-import { a as u, c as d, d as f, i as p, n as m, r as h, t as g, u as _ } from "./_Uint8Array-azThpjEP.js";
+import { C as e, S as t, h as n, l as r, m as i, p as a, u as o, v as s, w as c, x as l } from "./translator-BMFC0lBV.js";
+import { a as u, c as d, d as f, i as p, n as m, r as h, t as g, u as _ } from "./_Uint8Array-QCcRMhXd.js";
 import { L as v } from "./number.utils-BiBN2hWJ.js";
 import { Suspense as y, createContext as b, createElement as x, useContext as ee, useEffect as te, useMemo as S, useReducer as ne, useState as re, useSyncExternalStore as ie } from "react";
 import { asyncThunkCreator as ae, buildCreateSlice as oe } from "@reduxjs/toolkit";

package/dist/{blockDiagram-BEXU5L5S-CDfO7C_5.js → blockDiagram-BEXU5L5S-CQaNV8rX.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./graphlib-DLjE3QPd.js";
+import { t as e } from "./graphlib-CbcZi5bx.js";
 import { n as t, t as n } from "./src-CsLQInsN.js";
 import { A as r, B as i, C as a, D as o, E as s, F as c, G as l, H as u, I as d, L as f, M as p, N as m, O as h, P as g, R as _, T as v, U as ee, V as y, W as b, b as x, j as S, k as C, l as w, v as T, w as E, z as D } from "./chunk-ZIGJFQKS-9VXArDKF.js";
 import { n as O } from "./chunk-Y2CYZVJY-BAad7w_K.js";
@@ -12,7 +12,7 @@ import "./chunk-7PRAP22T-0C6_H8Li.js";
 import { i as se, n as ce, o as le, r as ue, s as de } from "./chunk-J5ZVWO5B-DmRRmhon.js";
 import "./chunk-7INBJB4K-k-I67NSP.js";
 import { i as fe, r as pe } from "./chunk-5DYCD2WN-Cd1zazNp.js";
-import { a as me, c as he, i as ge, l as _e } from "./chunk-Z7XXMR3K-B7iHRZcb.js";
+import { a as me, c as he, i as ge, l as _e } from "./chunk-Z7XXMR3K-D4uKosJW.js";
 //#region ../../node_modules/es-toolkit/dist/compat/predicate/isArray.mjs
 function ve(e) {
 	return Array.isArray(e);

package/dist/{chunk-3FUC2YCW-DX6GTgi6.js → chunk-3FUC2YCW-DmtO_Y9L.js}

@@ -1,11 +1,11 @@
-import { t as e } from "./graphlib-DLjE3QPd.js";
+import { t as e } from "./graphlib-CbcZi5bx.js";
 import { n as t } from "./src-CsLQInsN.js";
 import { g as n } from "./chunk-ZIGJFQKS-9VXArDKF.js";
 import { n as r } from "./chunk-Y2CYZVJY-BAad7w_K.js";
 import { b as i, x as a } from "./chunk-O7XYJQB3-BChweQ_V.js";
 import { o } from "./chunk-7INBJB4K-k-I67NSP.js";
 import { i as s, n as c, r as l, t as u } from "./chunk-5DYCD2WN-Cd1zazNp.js";
-import { a as d, c as f, i as p, n as m, r as h, t as g, u as _ } from "./chunk-Z7XXMR3K-B7iHRZcb.js";
+import { a as d, c as f, i as p, n as m, r as h, t as g, u as _ } from "./chunk-Z7XXMR3K-D4uKosJW.js";
 import { r as v, t as y } from "./chunk-UA2S7LBM-ChuksCDg.js";
 //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/chunk-3FUC2YCW.mjs
 function b(e, { edgePathsClass: t = "edges edgePaths" } = {}) {

package/dist/{chunk-7M6MHVWA-DTELAJpl.js → chunk-7M6MHVWA-BQ0cJz5u.js}

@@ -9,7 +9,7 @@ import { a as b } from "./chunk-7INBJB4K-k-I67NSP.js";
 import { t as x } from "./chunk-GWA4HPMP-B8jXI0Tl.js";
 import { t as S } from "./chunk-XXDRQBXY-dKXxu_aj.js";
 import { t as C } from "./chunk-WEXAMYUT-CbFOhEve.js";
-import { r as w, t as T } from "./chunk-GNY47TPC-DHf7k1Oo.js";
+import { r as w, t as T } from "./chunk-GNY47TPC-DiVMvIit.js";
 import { n as E, t as D } from "./chunk-LNGE3PJU-DJjGTS7O.js";
 //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/chunk-7M6MHVWA.mjs
 var ie = "flowchart-", ae = class {

package/dist/{chunk-GNY47TPC-DHf7k1Oo.js → chunk-GNY47TPC-DiVMvIit.js}

@@ -5,7 +5,7 @@ import { b as r, s as i } from "./chunk-O7XYJQB3-BChweQ_V.js";
 import { t as a } from "./chunk-DUW6YSOI-9R-v-IIp.js";
 import { o } from "./chunk-7INBJB4K-k-I67NSP.js";
 import { r as s } from "./chunk-5DYCD2WN-Cd1zazNp.js";
-import { a as c, c as l, i as u, l as d } from "./chunk-Z7XXMR3K-B7iHRZcb.js";
+import { a as c, c as l, i as u, l as d } from "./chunk-Z7XXMR3K-D4uKosJW.js";
 import { r as f } from "./chunk-UA2S7LBM-ChuksCDg.js";
 //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/chunk-GNY47TPC.mjs
 var p = {
@@ -30,7 +30,7 @@ var p = {
 ], h = /* @__PURE__ */ Object.create(null), g = /* @__PURE__ */ n((e) => {
 	for (let t of e) h[t.name] = t;
 }, "registerLayoutLoaders"), _ = /* @__PURE__ */ n(() => {
-	let e = /* @__PURE__ */ n(async () => await import("./elk-276RUBZZ-DB8zFfHZ.js"), "loader");
+	let e = /* @__PURE__ */ n(async () => await import("./elk-276RUBZZ-BxXn1nvc.js"), "loader");
 	return [{
 		name: "elk",
 		loader: e,
@@ -45,11 +45,11 @@ var p = {
 	g([
 		{
 			name: "dagre",
-			loader: /* @__PURE__ */ n(async () => await import("./dagre-6A5THRUB-Bk4P7elf.js"), "loader")
+			loader: /* @__PURE__ */ n(async () => await import("./dagre-6A5THRUB-BvQAvoOX.js"), "loader")
 		},
 		{
 			name: "swimlane",
-			loader: /* @__PURE__ */ n(async () => await import("./swimlanes-2SLR337P-CtayEq5L.js"), "loader")
+			loader: /* @__PURE__ */ n(async () => await import("./swimlanes-2SLR337P-BwEtm09G.js"), "loader")
 		},
 		{
 			name: "cose-bilkent",

package/dist/{chunk-NETBCI7D-CxCnFTsw.js → chunk-NETBCI7D-B5Av2fJk.js}

@@ -1,5 +1,5 @@
 import { n as e } from "./chunk-Y2CYZVJY-BAad7w_K.js";
-import { o as t } from "./chunk-Z7XXMR3K-B7iHRZcb.js";
+import { o as t } from "./chunk-Z7XXMR3K-D4uKosJW.js";
 //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/chunk-NETBCI7D.mjs
 var n = 5, r = 1e-5, i = 2, a = .6, o = 1e-6;
 function s(e) {

package/dist/{chunk-Z7XXMR3K-B7iHRZcb.js → chunk-Z7XXMR3K-D4uKosJW.js}

@@ -1,4 +1,4 @@
-import { st as e } from "./components-Z9FC6CY-.js";
+import { st as e } from "./components-C-y3kTRm.js";
 import { n as t, t as n } from "./src-CsLQInsN.js";
 import { _ as r, a as i, i as a, n as o, o as s, p as c, r as l, t as u, u as d, v as f } from "./step-Dt43c9X4.js";
 import { K as p, g as m, q as h, u as g } from "./chunk-ZIGJFQKS-9VXArDKF.js";

package/dist/{classDiagram-v2-NBCMYWYE-CSaKhTA1.js → classDiagram-v2-NBCMYWYE-BYktffst.js}

@@ -9,12 +9,12 @@ import "./chunk-7PRAP22T-0C6_H8Li.js";
 import { i as v, n as y, o as b, r as x } from "./chunk-J5ZVWO5B-DmRRmhon.js";
 import "./chunk-7INBJB4K-k-I67NSP.js";
 import "./chunk-5DYCD2WN-Cd1zazNp.js";
-import "./chunk-Z7XXMR3K-B7iHRZcb.js";
+import "./chunk-Z7XXMR3K-D4uKosJW.js";
 import { t as S } from "./chunk-GWA4HPMP-B8jXI0Tl.js";
 import { t as C } from "./chunk-XXDRQBXY-dKXxu_aj.js";
 import { t as w } from "./chunk-WEXAMYUT-CbFOhEve.js";
 import "./chunk-UA2S7LBM-ChuksCDg.js";
-import { r as T, t as E } from "./chunk-GNY47TPC-DHf7k1Oo.js";
+import { r as T, t as E } from "./chunk-GNY47TPC-DiVMvIit.js";
 //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/classDiagram-v2-NBCMYWYE.mjs
 var D = (function() {
 	var e = /* @__PURE__ */ i(function(e, t, n, r) {