@ultimat3/ui 31.16.0 → 31.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultimat3/ui",
-  "version": "31.16.0",
+  "version": "31.18.0",
   "description": "SolidJS design system: semantic design tokens, dark/RTL-ready SCSS modules, a11y primitives",
   "keywords": [
     "ultimate",
@@ -58,11 +58,11 @@
     "icons": "bun run src/icons/build-icons.ts"
   },
   "dependencies": {
-    "@ultimat3/core": "31.16.0",
-    "@ultimat3/i18n": "31.16.0",
-    "@ultimat3/money": "31.16.0",
-    "@ultimat3/schema": "31.16.0",
-    "@ultimat3/time": "31.16.0"
+    "@ultimat3/core": "31.18.0",
+    "@ultimat3/i18n": "31.18.0",
+    "@ultimat3/money": "31.18.0",
+    "@ultimat3/schema": "31.18.0",
+    "@ultimat3/time": "31.18.0"
   },
   "peerDependencies": {
     "solid-js": "^1.9.0"

package/src/components/Combobox.tsx

@@ -59,8 +59,11 @@ export function Combobox(props: ComboboxProps): JSX.Element {
     rt.onCleanup(() => notify.cancel());
   });
 
-  const matches = (): readonly ComboboxOption[] =>
-    filterOptions(props.options, props.value ?? '', props.limit);
+  // One filter pass per change of query or options: the datalist, the status class and its count
+  // all read it, and a plain function ran the O(n) pass once per read.
+  const matches = rt.createMemo((): readonly ComboboxOption[] =>
+    filterOptions(props.options, props.value ?? '', props.limit),
+  );
 
   const describedBy = (): string =>
     [props['aria-describedby'], statusId].filter((id) => id !== undefined).join(' ');

package/src/components/Drawer.tsx

@@ -64,7 +64,11 @@ export function Drawer(props: DrawerProps): JSX.Element {
   rt.createEffect(() => {
     const dialog = element;
     if (dialog === undefined) return;
-    if (props.open && !dialog.open) dialog.showModal();
+    if (props.open && !dialog.open) {
+      // `snap` is where a sheet OPENS: last time's drag to `full` does not decide this time.
+      setSnap(props.snap ?? 'half');
+      dialog.showModal();
+    }
     if (!props.open && dialog.open) dialog.close();
   });
 

package/src/components/SearchableSelect.tsx

@@ -92,14 +92,16 @@ export function SearchableSelect(props: SearchableSelectProps): JSX.Element {
     finiteOption('SearchableSelect', 'debounceMs', props.debounceMs ?? DEBOUNCE_DEFAULT_MS),
   );
 
-  const view = (): SearchableView => {
+  // One pass per keystroke: the rows, the status text and its class, and every key handler read
+  // the view, and a plain function re-ran the O(n) check and ranking once per read.
+  const view = rt.createMemo((): SearchableView => {
     checkOptions(props.options, chosen());
     const limit = finiteCount('SearchableSelect', 'limit', props.limit ?? COMBOBOX_LIMIT, 0);
     // Under `onSearch` the caller already matched: ranking again could drop what it found.
     return props.onSearch === undefined
       ? searchableView(props.options, query() ?? '', limit)
       : searchableView(props.options, '', limit);
-  };
+  });
   const picked = (): readonly SearchableOption[] => chosenOptions(props.options, chosen());
   const text = (): string => query() ?? (many() ? '' : (picked()[0]?.label ?? ''));
 

package/src/components/Toaster.tsx

@@ -8,11 +8,14 @@
 
 import type { JSX } from 'solid-js';
 import type { Politeness } from '../a11y';
+import { solid } from '../theme/solid-adapter';
 import { type ToastItem, visibleToasts } from '../toast/toast-state';
 import type { ToastStore } from '../toast/toast-store';
 import { useToasts } from '../toast/use-toasts';
 import { Button } from './Button';
+import { keyedRows } from './data-table-rows';
 import { Toast, type ToastPlacement, ToastRegion } from './Toast';
+import { thunk } from './thunk';
 
 export interface ToasterProps {
   /** The queue. One per app — `toastStore()` in the island that mounts this. */
@@ -27,6 +30,7 @@ export interface ToasterProps {
 }
 
 export function Toaster(props: ToasterProps): JSX.Element {
+  const rt = solid();
   const queue = useToasts(props.store);
 
   /**
@@ -34,7 +38,7 @@ export function Toaster(props: ToasterProps): JSX.Element {
    * it disappears on a timer, and a keyboard user who was typing when it arrived never reached it.
    * Taking the undo also dismisses — the offer has been answered.
    */
-  const actionSlot = (item: ToastItem): JSX.Element => {
+  const actionSlot = (item: ToastItem, id: string): JSX.Element => {
     const action = item.action;
     if (action === undefined) return null;
     return (
@@ -44,7 +48,7 @@ export function Toaster(props: ToasterProps): JSX.Element {
         tone={item.tone}
         onClick={() => {
           action.onAction();
-          props.store.dismiss(item.id);
+          props.store.dismiss(id);
         }}
       >
         {action.label}
@@ -52,6 +56,25 @@ export function Toaster(props: ToasterProps): JSX.Element {
     );
   };
 
+  // One node per toast id, built once in the body: a publish that adds toast B leaves toast A's
+  // <li> where it was, so the live region reads only B (`aria-atomic="false"`) and a keyboard user
+  // on A's Undo keeps their focus. A plain `.map` rebuilt every visible <li> on every arrival.
+  const toastNodes = keyedRows<ToastItem, JSX.Element>(
+    rt,
+    (item) => item.id,
+    (item, id) => (
+      <Toast
+        title={item().title}
+        tone={item().tone}
+        dismissLabel={props.dismissLabel}
+        action={actionSlot(item(), id)}
+        onDismiss={() => props.store.dismiss(id)}
+      >
+        {item().message}
+      </Toast>
+    ),
+  );
+
   return (
     <ToastRegion
       label={props.label}
@@ -61,17 +84,7 @@ export function Toaster(props: ToasterProps): JSX.Element {
       onHold={(reason) => props.store.hold(reason)}
       onRelease={(reason) => props.store.release(reason)}
     >
-      {visibleToasts(queue()).map((item) => (
-        <Toast
-          title={item.title}
-          tone={item.tone}
-          dismissLabel={props.dismissLabel}
-          action={actionSlot(item)}
-          onDismiss={() => props.store.dismiss(item.id)}
-        >
-          {item.message}
-        </Toast>
-      ))}
+      {thunk(() => toastNodes(visibleToasts(queue())))}
     </ToastRegion>
   );
 }