@milktop/react-ui 0.2.3 → 0.2.5

package/dist/command/Command.d.ts

@@ -11,8 +11,10 @@
  *   the item is listed under), `icon`, `description`, `shortcut` text,
  *   `keywords` (extra words to match) and `disabled`. An item with `href`
  *   goes there when picked
- * - `load`: optional async function(query) returning items, for server
- *   search (debounced by `debounce` ms, `loadingText` meanwhile)
+ * - `load`: optional async function(query) returning more items, for server
+ *   search (debounced by `debounce` ms, `loadingText` meanwhile). They're
+ *   listed after the matching `items`, which filter as you type while the
+ *   search runs
  * - `onSelect`: called with the item's `value` (or the item, if it has none)
  * - `trigger`: the element that opens it (it gets the trigger's props)
  * - `open`, `defaultOpen`; `onOpenChange`: called with the new open state

package/dist/command/Command.js

@@ -12,8 +12,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *   the item is listed under), `icon`, `description`, `shortcut` text,
  *   `keywords` (extra words to match) and `disabled`. An item with `href`
  *   goes there when picked
- * - `load`: optional async function(query) returning items, for server
- *   search (debounced by `debounce` ms, `loadingText` meanwhile)
+ * - `load`: optional async function(query) returning more items, for server
+ *   search (debounced by `debounce` ms, `loadingText` meanwhile). They're
+ *   listed after the matching `items`, which filter as you type while the
+ *   search runs
  * - `onSelect`: called with the item's `value` (or the item, if it has none)
  * - `trigger`: the element that opens it (it gets the trigger's props)
  * - `open`, `defaultOpen`; `onOpenChange`: called with the new open state
@@ -41,9 +43,11 @@ export function formatHotkey(key = 'k') {
     return mac ? `⌘${key.toUpperCase()}` : `Ctrl ${key.toUpperCase()}`;
 }
 const keyOf = (item) => String(item.value ?? item.href ?? item.label);
+// Lowercase without accents, so "tache" finds "Tâches"
+const fold = (text) => text.normalize('NFD').replace(/\p{M}/gu, '').toLowerCase();
 // Every word typed must appear in the label, description, group or keywords.
 function matches(item, words) {
-    const text = [item.label, item.description, item.group, ...(item.keywords ?? [])].join(' ').toLowerCase();
+    const text = fold([item.label, item.description, item.group, ...(item.keywords ?? [])].join(' '));
     return words.every((word) => text.includes(word));
 }
 function go(href) {
@@ -68,8 +72,11 @@ export function Command({ items = [], load = null, debounce = 200, onSelect, tri
     const listEl = useRef(null);
     const ticket = useRef(0);
     const timer = useRef(undefined);
-    const words = query.trim().toLowerCase().split(/\s+/).filter(Boolean);
-    const found = load ? loaded : words.length ? items.filter((item) => matches(item, words)) : items;
+    // The items filter at once; loaded results from the last search stay
+    // below them until the new ones arrive.
+    const words = fold(query).split(/\s+/).filter(Boolean);
+    const local = words.length ? items.filter((item) => matches(item, words)) : items;
+    const found = load ? [...local, ...loaded] : local;
     // Results in group order (by first appearance), so the list reads and the
     // arrow keys move the same way.
     const groups = [...new Set(found.map((item) => item.group ?? ''))]

package/dist/table/Table.d.ts

@@ -23,7 +23,8 @@
  * - `selectable`: a checkbox per row and a select-all; `selected`,
  *   `defaultSelected`: the selected rows' keys; `onSelectedChange`. Shift-click
  *   a row's checkbox to tick (or clear) the rows between it and the last one
- *   clicked
+ *   clicked. Once a row is ticked, clicking a row ticks (or clears) it too,
+ *   Shift a run, rather than calling `onRowClick`
  * - `loading`: skeleton rows while there are none yet (`loadingRows`, 5),
  *   else dims the rows
  * - `emptyText`, or `empty` (markup), for no rows
@@ -31,7 +32,8 @@
  * - `label`: a caption for assistive tech
  * - `size`: 'sm', 'md' (default) or 'lg' (roomier rows)
  * - `flush`: no border or rounding, to sit edge to edge in a card
- * - `onRowClick`: called with the row when a row is clicked (outside its controls)
+ * - `onRowClick`: called with the row when a row is clicked (outside its
+ *   controls), unless rows are ticked
  *
  * Or write the <table> yourself as its content, for the look alone (no
  * sorting, selection or loading states); `data-align` on cells works too.

package/dist/table/Table.js

@@ -24,7 +24,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * - `selectable`: a checkbox per row and a select-all; `selected`,
  *   `defaultSelected`: the selected rows' keys; `onSelectedChange`. Shift-click
  *   a row's checkbox to tick (or clear) the rows between it and the last one
- *   clicked
+ *   clicked. Once a row is ticked, clicking a row ticks (or clears) it too,
+ *   Shift a run, rather than calling `onRowClick`
  * - `loading`: skeleton rows while there are none yet (`loadingRows`, 5),
  *   else dims the rows
  * - `emptyText`, or `empty` (markup), for no rows
@@ -32,7 +33,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * - `label`: a caption for assistive tech
  * - `size`: 'sm', 'md' (default) or 'lg' (roomier rows)
  * - `flush`: no border or rounding, to sit edge to edge in a card
- * - `onRowClick`: called with the row when a row is clicked (outside its controls)
+ * - `onRowClick`: called with the row when a row is clicked (outside its
+ *   controls), unless rows are ticked
  *
  * Or write the <table> yourself as its content, for the look alone (no
  * sorting, selection or loading states); `data-align` on cells works too.
@@ -97,6 +99,8 @@ export function Table({ columns = [], rows = [], rowKey = 'id', selectable = fal
     const isSelected = (row) => selected.includes(keyOf(row));
     const selectedCount = rows.filter(isSelected).length;
     const allState = selectedCount === 0 ? false : selectedCount === rows.length ? true : 'indeterminate';
+    // Once a row is ticked, a click on a row ticks it rather than opening it.
+    const selecting = selectable && selected.length > 0;
     // Change events don't carry the Shift key, so it's noted on the way in;
     // Shift+mousedown would also select the text between.
     const shift = useRef(false);
@@ -104,7 +108,7 @@ export function Table({ columns = [], rows = [], rowKey = 'id', selectable = fal
     function noteShift(e) {
         const event = e.nativeEvent;
         shift.current = event.shiftKey;
-        if (event.shiftKey && e.type === 'mousedown' && e.target.closest('[data-part=select-cell]'))
+        if (event.shiftKey && e.type === 'mousedown' && (selecting || e.target.closest('[data-part=select-cell]')))
             e.preventDefault();
     }
     function toggleRow(row, on) {
@@ -131,10 +135,13 @@ export function Table({ columns = [], rows = [], rowKey = 'id', selectable = fal
         const control = e.target.closest('a, button, input, label, select, textarea, [data-scope]:not([data-scope=table])');
         if (control && e.currentTarget.contains(control))
             return;
-        onRowClick?.(row);
+        if (selecting)
+            toggleRow(row, !isSelected(row));
+        else
+            onRowClick?.(row);
     }
     const columnCount = columns.length + (selectable ? 1 : 0);
-    return (_jsx("div", { ...rest, ...part('root'), className: cx(className, classes?.root), "data-size": size, "data-flush": flush || undefined, "data-loading": (loading && rows.length > 0) || undefined, children: _jsx("div", { ...part('scroll'), "data-sticky": maxHeight ? '' : undefined, style: maxHeight ? { maxHeight } : undefined, children: !columns.length ? children : (_jsxs("table", { ...part('table'), "aria-busy": loading, children: [label && _jsx("caption", { ...part('caption'), children: label }), _jsx("thead", { children: _jsxs("tr", { children: [selectable && (_jsx("th", { ...part('select-cell'), scope: "col", children: _jsx(Checkbox, { label: t.table.selectAll, labelHidden: true, disabled: !rows.length, checked: allState, onCheckedChange: (on) => toggleAll(on) }) })), columns.map((column) => (_jsx("th", { scope: "col", "data-align": column.align ?? 'start', "aria-sort": ariaSort(column), style: column.width ? { width: column.width } : undefined, children: column.sortable
+    return (_jsx("div", { ...rest, ...part('root'), className: cx(className, classes?.root), "data-size": size, "data-flush": flush || undefined, "data-selecting": selecting || undefined, "data-loading": (loading && rows.length > 0) || undefined, children: _jsx("div", { ...part('scroll'), "data-sticky": maxHeight ? '' : undefined, style: maxHeight ? { maxHeight } : undefined, children: !columns.length ? children : (_jsxs("table", { ...part('table'), "aria-busy": loading, children: [label && _jsx("caption", { ...part('caption'), children: label }), _jsx("thead", { children: _jsxs("tr", { children: [selectable && (_jsx("th", { ...part('select-cell'), scope: "col", children: _jsx(Checkbox, { label: t.table.selectAll, labelHidden: true, disabled: !rows.length, checked: allState, onCheckedChange: (on) => toggleAll(on) }) })), columns.map((column) => (_jsx("th", { scope: "col", "data-align": column.align ?? 'start', "aria-sort": ariaSort(column), style: column.width ? { width: column.width } : undefined, children: column.sortable
                                         ? _jsxs("button", { ...part('sort'), type: "button", "data-dir": sortDir(column) ?? undefined, onClick: () => toggleSort(column), children: [_jsx("span", { children: column.label }), _jsx("span", { ...part('sort-icon'), children: _jsx("iconify-icon", { icon: sortDir(column) === 'asc' ? 'lucide:chevron-up'
                                                             : sortDir(column) === 'desc' ? 'lucide:chevron-down' : 'lucide:chevrons-up-down' }) })] })
                                         : column.label }, column.key)))] }) }), _jsx("tbody", { onPointerDownCapture: noteShift, onMouseDownCapture: noteShift, onKeyDownCapture: noteShift, children: loading && !rows.length

package/dist/table/table.css

@@ -23,6 +23,8 @@
     & tbody tr:last-child td { border-bottom: none; }
     & tbody tr:hover { background: color-mix(in srgb, var(--ui-hover) 60%, transparent); }
     & tbody tr[data-selected] { background: color-mix(in srgb, var(--ui-accent-soft) 45%, transparent); }
+    /* While rows are ticked, a click on a row ticks it. */
+    [data-selecting] > & tbody tr { cursor: pointer; }
     /* Outer cells line up with a card's padding. */
     [data-flush] > & :is(th, td):first-child { padding-left: 1.25rem; }
     [data-flush] > & :is(th, td):last-child { padding-right: 1.25rem; } }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milktop/react-ui",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "React components on Ark UI (Zag state machines), with imba-ui's API and design",
   "license": "MIT",
   "author": "André Goldstein",