@milktop/react-ui 0.2.3 → 0.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/command/Command.d.ts +4 -2
- package/dist/command/Command.js +12 -5
- package/package.json +1 -1
|
@@ -11,8 +11,10 @@
|
|
|
11
11
|
* the item is listed under), `icon`, `description`, `shortcut` text,
|
|
12
12
|
* `keywords` (extra words to match) and `disabled`. An item with `href`
|
|
13
13
|
* goes there when picked
|
|
14
|
-
* - `load`: optional async function(query) returning items, for server
|
|
15
|
-
* search (debounced by `debounce` ms, `loadingText` meanwhile)
|
|
14
|
+
* - `load`: optional async function(query) returning more items, for server
|
|
15
|
+
* search (debounced by `debounce` ms, `loadingText` meanwhile). They're
|
|
16
|
+
* listed after the matching `items`, which filter as you type while the
|
|
17
|
+
* search runs
|
|
16
18
|
* - `onSelect`: called with the item's `value` (or the item, if it has none)
|
|
17
19
|
* - `trigger`: the element that opens it (it gets the trigger's props)
|
|
18
20
|
* - `open`, `defaultOpen`; `onOpenChange`: called with the new open state
|
package/dist/command/Command.js
CHANGED
|
@@ -12,8 +12,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
12
12
|
* the item is listed under), `icon`, `description`, `shortcut` text,
|
|
13
13
|
* `keywords` (extra words to match) and `disabled`. An item with `href`
|
|
14
14
|
* goes there when picked
|
|
15
|
-
* - `load`: optional async function(query) returning items, for server
|
|
16
|
-
* search (debounced by `debounce` ms, `loadingText` meanwhile)
|
|
15
|
+
* - `load`: optional async function(query) returning more items, for server
|
|
16
|
+
* search (debounced by `debounce` ms, `loadingText` meanwhile). They're
|
|
17
|
+
* listed after the matching `items`, which filter as you type while the
|
|
18
|
+
* search runs
|
|
17
19
|
* - `onSelect`: called with the item's `value` (or the item, if it has none)
|
|
18
20
|
* - `trigger`: the element that opens it (it gets the trigger's props)
|
|
19
21
|
* - `open`, `defaultOpen`; `onOpenChange`: called with the new open state
|
|
@@ -41,9 +43,11 @@ export function formatHotkey(key = 'k') {
|
|
|
41
43
|
return mac ? `⌘${key.toUpperCase()}` : `Ctrl ${key.toUpperCase()}`;
|
|
42
44
|
}
|
|
43
45
|
const keyOf = (item) => String(item.value ?? item.href ?? item.label);
|
|
46
|
+
// Lowercase without accents, so "tache" finds "Tâches"
|
|
47
|
+
const fold = (text) => text.normalize('NFD').replace(/\p{M}/gu, '').toLowerCase();
|
|
44
48
|
// Every word typed must appear in the label, description, group or keywords.
|
|
45
49
|
function matches(item, words) {
|
|
46
|
-
const text = [item.label, item.description, item.group, ...(item.keywords ?? [])].join(' ')
|
|
50
|
+
const text = fold([item.label, item.description, item.group, ...(item.keywords ?? [])].join(' '));
|
|
47
51
|
return words.every((word) => text.includes(word));
|
|
48
52
|
}
|
|
49
53
|
function go(href) {
|
|
@@ -68,8 +72,11 @@ export function Command({ items = [], load = null, debounce = 200, onSelect, tri
|
|
|
68
72
|
const listEl = useRef(null);
|
|
69
73
|
const ticket = useRef(0);
|
|
70
74
|
const timer = useRef(undefined);
|
|
71
|
-
|
|
72
|
-
|
|
75
|
+
// The items filter at once; loaded results from the last search stay
|
|
76
|
+
// below them until the new ones arrive.
|
|
77
|
+
const words = fold(query).split(/\s+/).filter(Boolean);
|
|
78
|
+
const local = words.length ? items.filter((item) => matches(item, words)) : items;
|
|
79
|
+
const found = load ? [...local, ...loaded] : local;
|
|
73
80
|
// Results in group order (by first appearance), so the list reads and the
|
|
74
81
|
// arrow keys move the same way.
|
|
75
82
|
const groups = [...new Set(found.map((item) => item.group ?? ''))]
|