@nxgt/material 3.16.0 → 3.18.0

package/docs/troubleshooting.md

@@ -111,6 +111,7 @@ words in your error.
 
 - [A `ListTile` link shows two chevrons](#a-listtile-link-shows-two-chevrons)
 - [A `ListTile` link reloads the whole page](#a-listtile-link-reloads-the-whole-page)
+- [A `Switcher` in link mode reloads the page](#a-switcher-in-link-mode-reloads-the-page)
 - [After a link in the phone menu, the focus goes to `<main>`, not to the page's title](#after-a-link-in-the-phone-menu-the-focus-goes-to-main-not-to-the-pages-title)
 - [The phone menu needs two Escapes to close, or a tooltip shows over it](#the-phone-menu-needs-two-escapes-to-close-or-a-tooltip-shows-over-it)
 - [The phone menu stays open after a navigation, or an app clicks its button to close it](#the-phone-menu-stays-open-after-a-navigation-or-an-app-clicks-its-button-to-close-it)
@@ -1115,7 +1116,7 @@ expect(screen.getByRole('checkbox', { name: 'Email me receipts' })).toHaveAttrib
 
 ### A test looked for `lucide-check` in a menu item
 
-**When:** a test or a style looks for the `lucide-check` or `lucide-circle` svg in a checked item of `DropdownMenu`, `ContextMenu`, `Menubar`, `Select`, `Combobox`, `Command`, the `PhoneField` country menu, the `Switcher` or the filter presets.
+**When:** a test or a style looks for the `lucide-check` or `lucide-circle` svg in a checked item of `DropdownMenu`, `ContextMenu`, `Menubar`, `Select`, `Combobox`, `Command`, the `PhoneField` country menu or the filter presets.
 **Why:** those items draw an animated mark, an `aria-hidden` element with `data-slot="option-mark"`. In `Select` and `Combobox` it is present only on the chosen option; the menu items keep it mounted while unchecked.
 **Fix:** read `aria-checked` (or `aria-selected`) on the item:
 
@@ -2057,6 +2058,22 @@ const RouterLink: AppShellLinkComponent = ({ href, ...props }) => (
 <ListTile title="Notifications" href="/settings/notifications" linkComponent={RouterLink} />
 ```
 
+### A `Switcher` in link mode reloads the page
+
+**When:** a `Switcher` with `getHref` is used in a router app and choosing an option loads the document again (the page flashes, client state is lost).
+**Why:** link mode renders plain `<a href>` links, which need no router and so cannot navigate on the client. Without `getHref` the options are not links and `href` on an item does nothing.
+**Fix:** pass `linkComponent`, with the contract of the app shell's: it takes `href`, spreads every other prop (`aria-current`, `className`, handlers) and forwards `ref`. React Router's `Link` takes `to`, so wrap it:
+
+```tsx
+import { Link } from 'react-router';
+import { Switcher, type AppShellLinkComponent } from '@nxgt/material/components';
+
+// Hoisted, outside the render: not a new component on every render.
+const RouterLink: AppShellLinkComponent = ({ href, ...props }) => <Link to={href} {...props} />;
+
+<Switcher label="Class" value={classId} options={classes} getHref={(item) => `/classes/${item.id}`} linkComponent={RouterLink} />
+```
+
 ### After a link in the phone menu, the focus goes to `<main>`, not to the page's title
 
 **When:** on a phone, a link followed in the menu sheet of `ActivityLayout` or

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.16.0",
+	"version": "3.18.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -357,7 +357,7 @@
 		"docs:previews": "rm -rf node_modules/.cache/nxgt-preview-free/missing && NXGT_PREVIEW_FREE=1 vitest run --project previews && bun .storybook/preview-free-report.ts"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.31.0",
+		"@nxgt/material-core": "^0.32.1",
 		"@base-ui/react": "^1.6.0",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",