@spectral_labs/ui 1.6.0 → 1.7.0
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/components/command/__tests__/CommandInlineDirectTest.svelte +29 -0
- package/dist/components/command/__tests__/CommandInlineTest.svelte +89 -0
- package/dist/components/command/__tests__/command-inline.test.svelte.js +392 -0
- package/dist/components/command/command.svelte.d.ts +30 -0
- package/dist/components/command/command.svelte.d.ts.map +1 -1
- package/dist/components/command/command.svelte.js +85 -4
- package/dist/components/command/components/command-group.svelte +25 -15
- package/dist/components/command/components/command-group.svelte.d.ts.map +1 -1
- package/dist/components/command/components/command-input.svelte +54 -5
- package/dist/components/command/components/command-input.svelte.d.ts +1 -1
- package/dist/components/command/components/command-input.svelte.d.ts.map +1 -1
- package/dist/components/command/components/command-list.svelte +22 -3
- package/dist/components/command/components/command-list.svelte.d.ts.map +1 -1
- package/dist/components/command/components/command-root.svelte +43 -4
- package/dist/components/command/components/command-root.svelte.d.ts.map +1 -1
- package/dist/components/command/index.d.ts +1 -0
- package/dist/components/command/index.d.ts.map +1 -1
- package/dist/components/command/types.d.ts +59 -4
- package/dist/components/command/types.d.ts.map +1 -1
- package/dist/internal/drag-drop/__tests__/drag-session.test.svelte.js +256 -0
- package/dist/internal/drag-drop/drag-session.svelte.d.ts.map +1 -1
- package/dist/internal/drag-drop/drag-session.svelte.js +114 -14
- package/dist/internal/drag-drop/keyboard-dnd.svelte.d.ts +8 -0
- package/dist/internal/drag-drop/keyboard-dnd.svelte.d.ts.map +1 -1
- package/dist/internal/drag-drop/keyboard-dnd.svelte.js +14 -3
- package/dist/internal/escape-layer/escape-layer.svelte.d.ts +12 -0
- package/dist/internal/escape-layer/escape-layer.svelte.d.ts.map +1 -1
- package/dist/internal/escape-layer/escape-layer.svelte.js +20 -1
- package/package.json +1 -1
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import CommandInput from '../components/command-input.svelte'
|
|
3
|
+
import CommandItem from '../components/command-item.svelte'
|
|
4
|
+
import CommandList from '../components/command-list.svelte'
|
|
5
|
+
import CommandRoot from '../components/command-root.svelte'
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* The same inline composition with NO `Command.Group`.
|
|
9
|
+
*
|
|
10
|
+
* The group and the item each gate rendering on their own predicate, and
|
|
11
|
+
* both read the registry. Reviewing #224 turned up two distinct failures
|
|
12
|
+
* behind one symptom, so the group must be removable from the picture for a
|
|
13
|
+
* test to say which mechanism it is exercising.
|
|
14
|
+
*/
|
|
15
|
+
let open = $state(false)
|
|
16
|
+
let value = $state('')
|
|
17
|
+
|
|
18
|
+
export function setOpen(next: boolean) {
|
|
19
|
+
open = next
|
|
20
|
+
}
|
|
21
|
+
</script>
|
|
22
|
+
|
|
23
|
+
<CommandRoot mode="inline" bind:open bind:value>
|
|
24
|
+
<CommandInput class="probe-input" />
|
|
25
|
+
<CommandList>
|
|
26
|
+
<CommandItem value="copy" keywords={['duplicate']}>Copy</CommandItem>
|
|
27
|
+
<CommandItem value="paste">Paste</CommandItem>
|
|
28
|
+
</CommandList>
|
|
29
|
+
</CommandRoot>
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { CommandMode } from '../command.svelte.js'
|
|
3
|
+
import CommandEmpty from '../components/command-empty.svelte'
|
|
4
|
+
import CommandGroup from '../components/command-group.svelte'
|
|
5
|
+
import CommandInput from '../components/command-input.svelte'
|
|
6
|
+
import CommandItem from '../components/command-item.svelte'
|
|
7
|
+
import CommandList from '../components/command-list.svelte'
|
|
8
|
+
import CommandRoot from '../components/command-root.svelte'
|
|
9
|
+
|
|
10
|
+
type Entry = { value: string; label: string; keywords?: string[] }
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Harness for the `inline` composition: a field that outlives its results.
|
|
14
|
+
*
|
|
15
|
+
* The harness OWNS `open` and `entries` as local state and exposes accessors,
|
|
16
|
+
* rather than taking them as props a test would try to reassign — Svelte 5
|
|
17
|
+
* props are not writable through the object `mount()` returns. Owning them
|
|
18
|
+
* here is also closer to real use: `bind:open` lets the Root push a close
|
|
19
|
+
* back (Escape, outside pointer) and the test observes the same value the
|
|
20
|
+
* consumer would.
|
|
21
|
+
*
|
|
22
|
+
* `entries` is mutable so a test can change the COLLECTION between two
|
|
23
|
+
* openings — the case where a stale selection, a dead ARIA reference or a
|
|
24
|
+
* lost first arrow would actually show up.
|
|
25
|
+
*/
|
|
26
|
+
const {
|
|
27
|
+
initialOpen = false,
|
|
28
|
+
initialEntries = [
|
|
29
|
+
{ value: 'copy', label: 'Copy', keywords: ['duplicate'] },
|
|
30
|
+
{ value: 'paste', label: 'Paste' },
|
|
31
|
+
{ value: 'cut', label: 'Cut' },
|
|
32
|
+
] as Entry[],
|
|
33
|
+
mode = 'inline' as CommandMode,
|
|
34
|
+
portalTo = undefined,
|
|
35
|
+
trapFocus = undefined,
|
|
36
|
+
onOpenChange = undefined,
|
|
37
|
+
onEscapeKeydown = undefined,
|
|
38
|
+
onSelect = undefined,
|
|
39
|
+
inputAttrs = undefined,
|
|
40
|
+
}: {
|
|
41
|
+
initialOpen?: boolean
|
|
42
|
+
initialEntries?: Entry[]
|
|
43
|
+
mode?: CommandMode
|
|
44
|
+
portalTo?: HTMLElement | string
|
|
45
|
+
trapFocus?: boolean
|
|
46
|
+
onOpenChange?: (open: boolean) => void
|
|
47
|
+
onEscapeKeydown?: (event: KeyboardEvent) => void
|
|
48
|
+
onSelect?: (value: string) => void
|
|
49
|
+
inputAttrs?: Record<string, unknown>
|
|
50
|
+
} = $props()
|
|
51
|
+
|
|
52
|
+
let open = $state(initialOpen)
|
|
53
|
+
let entries = $state(initialEntries)
|
|
54
|
+
let value = $state('')
|
|
55
|
+
let element = $state<HTMLInputElement | null>(null)
|
|
56
|
+
|
|
57
|
+
export function setOpen(next: boolean) {
|
|
58
|
+
open = next
|
|
59
|
+
}
|
|
60
|
+
export function getOpen() {
|
|
61
|
+
return open
|
|
62
|
+
}
|
|
63
|
+
export function setEntries(next: Entry[]) {
|
|
64
|
+
entries = next
|
|
65
|
+
}
|
|
66
|
+
export function getElement() {
|
|
67
|
+
return element
|
|
68
|
+
}
|
|
69
|
+
</script>
|
|
70
|
+
|
|
71
|
+
<CommandRoot bind:value bind:open {mode} {portalTo} {trapFocus} {onOpenChange} {onEscapeKeydown}>
|
|
72
|
+
<CommandInput
|
|
73
|
+
placeholder="Search..."
|
|
74
|
+
wrapperClass="probe-wrapper"
|
|
75
|
+
class="probe-input"
|
|
76
|
+
bind:element
|
|
77
|
+
{...inputAttrs ?? {}}
|
|
78
|
+
/>
|
|
79
|
+
<CommandList>
|
|
80
|
+
<CommandEmpty>No results found.</CommandEmpty>
|
|
81
|
+
<CommandGroup heading="Actions">
|
|
82
|
+
{#each entries as entry (entry.value)}
|
|
83
|
+
<CommandItem value={entry.value} keywords={entry.keywords} {onSelect}>
|
|
84
|
+
{entry.label}
|
|
85
|
+
</CommandItem>
|
|
86
|
+
{/each}
|
|
87
|
+
</CommandGroup>
|
|
88
|
+
</CommandList>
|
|
89
|
+
</CommandRoot>
|
|
@@ -0,0 +1,392 @@
|
|
|
1
|
+
import { flushSync, mount, unmount } from 'svelte';
|
|
2
|
+
import { afterEach, describe, expect, it, vi } from 'vitest';
|
|
3
|
+
import { EscapeLayerState, resetEscapeLayerStack } from '../../../internal/escape-layer/index.js';
|
|
4
|
+
import CommandInlineDirectTest from './CommandInlineDirectTest.svelte';
|
|
5
|
+
import CommandInlineTest from './CommandInlineTest.svelte';
|
|
6
|
+
/**
|
|
7
|
+
* `mode: 'inline'` — a persistent field with non-modal results.
|
|
8
|
+
*
|
|
9
|
+
* The contract these pins defend is not "the list is hidden": it is that a
|
|
10
|
+
* CLOSED palette is inert. It executes nothing, it claims no key, it holds no
|
|
11
|
+
* slot in the global layer stacks, and it names no option that is not on
|
|
12
|
+
* screen. `modal` is the default and must come through untouched.
|
|
13
|
+
*/
|
|
14
|
+
if (typeof globalThis.PointerEvent === 'undefined') {
|
|
15
|
+
// @ts-expect-error — minimal polyfill for testing
|
|
16
|
+
globalThis.PointerEvent = class PointerEvent extends MouseEvent {
|
|
17
|
+
constructor(type, init) {
|
|
18
|
+
super(type, init);
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
}
|
|
22
|
+
describe('command — inline mode', () => {
|
|
23
|
+
let target;
|
|
24
|
+
let instance;
|
|
25
|
+
function setup(props = {}) {
|
|
26
|
+
target = document.createElement('div');
|
|
27
|
+
document.body.appendChild(target);
|
|
28
|
+
instance = mount(CommandInlineTest, { target, props });
|
|
29
|
+
flushSync();
|
|
30
|
+
return target;
|
|
31
|
+
}
|
|
32
|
+
afterEach(() => {
|
|
33
|
+
if (instance)
|
|
34
|
+
unmount(instance);
|
|
35
|
+
instance = undefined;
|
|
36
|
+
target?.remove();
|
|
37
|
+
resetEscapeLayerStack();
|
|
38
|
+
document.body.innerHTML = '';
|
|
39
|
+
});
|
|
40
|
+
const input = () => target.querySelector('input.probe-input');
|
|
41
|
+
const options = () => [...target.querySelectorAll('[data-command-item]')];
|
|
42
|
+
const activeId = () => input().getAttribute('aria-activedescendant');
|
|
43
|
+
function press(key, init = {}) {
|
|
44
|
+
const event = new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true, ...init });
|
|
45
|
+
input().dispatchEvent(event);
|
|
46
|
+
flushSync();
|
|
47
|
+
return event;
|
|
48
|
+
}
|
|
49
|
+
function type(text) {
|
|
50
|
+
const el = input();
|
|
51
|
+
el.value = text;
|
|
52
|
+
el.dispatchEvent(new Event('input', { bubbles: true }));
|
|
53
|
+
flushSync();
|
|
54
|
+
}
|
|
55
|
+
// --- The field outlives the results ------------------------------------
|
|
56
|
+
it('closed: the field is rendered and NO option is', () => {
|
|
57
|
+
setup({ initialOpen: false });
|
|
58
|
+
expect(input()).toBeTruthy();
|
|
59
|
+
expect(options()).toHaveLength(0);
|
|
60
|
+
expect(target.querySelector('[role="listbox"]')).toBeNull();
|
|
61
|
+
});
|
|
62
|
+
it('closed: aria-expanded is false, and the relations that would dangle are absent', () => {
|
|
63
|
+
setup({ initialOpen: false });
|
|
64
|
+
expect(input().getAttribute('aria-expanded')).toBe('false');
|
|
65
|
+
expect(input().getAttribute('aria-controls')).toBeNull();
|
|
66
|
+
expect(activeId()).toBeNull();
|
|
67
|
+
});
|
|
68
|
+
it('the SAME input element survives a close and a reopen — never a second field', () => {
|
|
69
|
+
setup({ initialOpen: true });
|
|
70
|
+
const first = input();
|
|
71
|
+
instance.setOpen(false);
|
|
72
|
+
flushSync();
|
|
73
|
+
expect(options()).toHaveLength(0);
|
|
74
|
+
const whileClosed = input();
|
|
75
|
+
instance.setOpen(true);
|
|
76
|
+
flushSync();
|
|
77
|
+
// Node identity, not a lookalike: a remounted field would lose focus,
|
|
78
|
+
// selection and any consumer `bind:element` reference.
|
|
79
|
+
expect(whileClosed).toBe(first);
|
|
80
|
+
expect(input()).toBe(first);
|
|
81
|
+
});
|
|
82
|
+
it('exposes the real input element through `bind:element`, with no internal selector', () => {
|
|
83
|
+
setup({ initialOpen: false });
|
|
84
|
+
expect(instance.getElement()).toBe(input());
|
|
85
|
+
instance.getElement().focus();
|
|
86
|
+
expect(document.activeElement).toBe(input());
|
|
87
|
+
});
|
|
88
|
+
// --- A closed palette claims nothing -----------------------------------
|
|
89
|
+
it('closed: Enter executes nothing and is NOT prevented — it belongs to the page', () => {
|
|
90
|
+
const onSelect = vi.fn();
|
|
91
|
+
setup({ initialOpen: false, onSelect });
|
|
92
|
+
const event = press('Enter');
|
|
93
|
+
expect(onSelect).not.toHaveBeenCalled();
|
|
94
|
+
expect(event.defaultPrevented).toBe(false);
|
|
95
|
+
});
|
|
96
|
+
it('closed: a third-party Escape layer mounted FIRST still receives the key', () => {
|
|
97
|
+
const onEscapeKeydown = vi.fn();
|
|
98
|
+
// Mounted BEFORE the palette, so it sits at the BOTTOM of the stack. The
|
|
99
|
+
// stack offers the keystroke to the topmost 'close' layer and stops there:
|
|
100
|
+
// a palette that illicitly kept its layer while closed would be above this
|
|
101
|
+
// one and would swallow the key. Mounted after, it would win either way
|
|
102
|
+
// and the test would pass on a broken implementation.
|
|
103
|
+
const other = new EscapeLayerState({ enabled: true, onEscapeKeydown });
|
|
104
|
+
other.mount();
|
|
105
|
+
setup({ initialOpen: false });
|
|
106
|
+
const event = press('Escape');
|
|
107
|
+
expect(onEscapeKeydown).toHaveBeenCalledTimes(1);
|
|
108
|
+
expect(event.defaultPrevented).toBe(false);
|
|
109
|
+
other.unmount();
|
|
110
|
+
});
|
|
111
|
+
it('open: the palette DOES take the key from a layer mounted before it — the test above discriminates', () => {
|
|
112
|
+
const onEscapeKeydown = vi.fn();
|
|
113
|
+
const other = new EscapeLayerState({ enabled: true, onEscapeKeydown });
|
|
114
|
+
other.mount();
|
|
115
|
+
setup({ initialOpen: true });
|
|
116
|
+
press('Escape');
|
|
117
|
+
// Same order, results open: the palette is topmost and answers, so the
|
|
118
|
+
// previous test really observes the layer being absent, not the ordering.
|
|
119
|
+
expect(onEscapeKeydown).not.toHaveBeenCalled();
|
|
120
|
+
expect(instance.getOpen()).toBe(false);
|
|
121
|
+
other.unmount();
|
|
122
|
+
});
|
|
123
|
+
it('closed: Home and End stay with the caret — native editing is preserved', () => {
|
|
124
|
+
setup({ initialOpen: false });
|
|
125
|
+
expect(press('Home').defaultPrevented).toBe(false);
|
|
126
|
+
expect(press('End').defaultPrevented).toBe(false);
|
|
127
|
+
});
|
|
128
|
+
it('closed: an arrow OPENS the results instead of moving an unseen selection', () => {
|
|
129
|
+
const onOpenChange = vi.fn();
|
|
130
|
+
setup({ initialOpen: false, onOpenChange });
|
|
131
|
+
const event = press('ArrowDown');
|
|
132
|
+
expect(event.defaultPrevented).toBe(true);
|
|
133
|
+
expect(onOpenChange).toHaveBeenCalledWith(true);
|
|
134
|
+
expect(instance.getOpen()).toBe(true);
|
|
135
|
+
flushSync();
|
|
136
|
+
expect(options().length).toBeGreaterThan(0);
|
|
137
|
+
});
|
|
138
|
+
// --- Open: the engine is the one that shipped ---------------------------
|
|
139
|
+
it('open: keyword filtering still decides — a term absent from the label finds the option', () => {
|
|
140
|
+
setup({ initialOpen: true });
|
|
141
|
+
type('duplicate');
|
|
142
|
+
const values = options().map((el) => el.dataset.value);
|
|
143
|
+
expect(values).toEqual(['copy']);
|
|
144
|
+
});
|
|
145
|
+
it('open: arrow then Enter activates the option exactly ONCE', () => {
|
|
146
|
+
const onSelect = vi.fn();
|
|
147
|
+
setup({ initialOpen: true, onSelect });
|
|
148
|
+
press('ArrowDown');
|
|
149
|
+
const selected = options().find((el) => el.dataset.selected === 'true');
|
|
150
|
+
press('Enter');
|
|
151
|
+
expect(onSelect).toHaveBeenCalledTimes(1);
|
|
152
|
+
expect(onSelect).toHaveBeenCalledWith(selected.dataset.value);
|
|
153
|
+
});
|
|
154
|
+
it('open: aria-activedescendant names the rendered option’s DOM id, never its value', () => {
|
|
155
|
+
setup({ initialOpen: true });
|
|
156
|
+
const selected = options().find((el) => el.dataset.selected === 'true');
|
|
157
|
+
expect(activeId()).toBe(selected.id);
|
|
158
|
+
expect(activeId()).not.toBe(selected.dataset.value);
|
|
159
|
+
// And it resolves to a node that is really in the document.
|
|
160
|
+
expect(document.getElementById(activeId())).toBe(selected);
|
|
161
|
+
expect(input().getAttribute('aria-controls')).toBe(target.querySelector('[role="listbox"]').id);
|
|
162
|
+
});
|
|
163
|
+
// --- The reference cannot outlive what it names -------------------------
|
|
164
|
+
it('after filtering, the reference follows the surviving option', () => {
|
|
165
|
+
setup({ initialOpen: true });
|
|
166
|
+
type('duplicate');
|
|
167
|
+
const selected = options().find((el) => el.dataset.selected === 'true');
|
|
168
|
+
expect(selected.dataset.value).toBe('copy');
|
|
169
|
+
expect(activeId()).toBe(selected.id);
|
|
170
|
+
});
|
|
171
|
+
it('when nothing matches, there is no active option and no reference', () => {
|
|
172
|
+
setup({ initialOpen: true });
|
|
173
|
+
type('zzzzz');
|
|
174
|
+
expect(options()).toHaveLength(0);
|
|
175
|
+
expect(activeId()).toBeNull();
|
|
176
|
+
});
|
|
177
|
+
it('removing the active option leaves no dead reference', () => {
|
|
178
|
+
setup({
|
|
179
|
+
initialOpen: true,
|
|
180
|
+
initialEntries: [
|
|
181
|
+
{ value: 'copy', label: 'Copy' },
|
|
182
|
+
{ value: 'paste', label: 'Paste' },
|
|
183
|
+
],
|
|
184
|
+
});
|
|
185
|
+
expect(options().find((el) => el.dataset.selected === 'true').dataset.value).toBe('copy');
|
|
186
|
+
// The consumer drops the option that is currently active.
|
|
187
|
+
instance.setEntries([{ value: 'paste', label: 'Paste' }]);
|
|
188
|
+
flushSync();
|
|
189
|
+
const id = activeId();
|
|
190
|
+
expect(id).not.toBeNull();
|
|
191
|
+
const named = document.getElementById(id);
|
|
192
|
+
expect(named).not.toBeNull();
|
|
193
|
+
expect(named.dataset.value).toBe('paste');
|
|
194
|
+
});
|
|
195
|
+
it('reopening after the options changed: no stale selection, no dead reference, no lost first arrow', () => {
|
|
196
|
+
const onSelect = vi.fn();
|
|
197
|
+
setup({
|
|
198
|
+
initialOpen: true,
|
|
199
|
+
onSelect,
|
|
200
|
+
initialEntries: [
|
|
201
|
+
{ value: 'copy', label: 'Copy' },
|
|
202
|
+
{ value: 'paste', label: 'Paste' },
|
|
203
|
+
],
|
|
204
|
+
});
|
|
205
|
+
// Move the selection away from the first option, then close.
|
|
206
|
+
press('ArrowDown');
|
|
207
|
+
expect(options().find((el) => el.dataset.selected === 'true').dataset.value).toBe('paste');
|
|
208
|
+
instance.setOpen(false);
|
|
209
|
+
flushSync();
|
|
210
|
+
expect(activeId()).toBeNull();
|
|
211
|
+
// A completely different collection comes back.
|
|
212
|
+
instance.setEntries([
|
|
213
|
+
{ value: 'rename', label: 'Rename' },
|
|
214
|
+
{ value: 'delete', label: 'Delete' },
|
|
215
|
+
]);
|
|
216
|
+
instance.setOpen(true);
|
|
217
|
+
flushSync();
|
|
218
|
+
const selected = options().find((el) => el.dataset.selected === 'true');
|
|
219
|
+
// Not the stale `paste`, which no longer exists.
|
|
220
|
+
expect(selected.dataset.value).toBe('rename');
|
|
221
|
+
expect(activeId()).toBe(selected.id);
|
|
222
|
+
// The first arrow MOVES; it is not spent recovering from a stale value.
|
|
223
|
+
press('ArrowDown');
|
|
224
|
+
expect(options().find((el) => el.dataset.selected === 'true').dataset.value).toBe('delete');
|
|
225
|
+
press('Enter');
|
|
226
|
+
expect(onSelect).toHaveBeenCalledTimes(1);
|
|
227
|
+
expect(onSelect).toHaveBeenCalledWith('delete');
|
|
228
|
+
});
|
|
229
|
+
// --- A retained query must survive a remount (review of #224, [P1]) -----
|
|
230
|
+
/**
|
|
231
|
+
* One symptom — zero options after a close and a reopen with the query still
|
|
232
|
+
* in the field — hiding TWO mechanisms, so each gets its own pin.
|
|
233
|
+
*
|
|
234
|
+
* · `Command.Group` gated its children on `hasVisibleItems()`, a predicate
|
|
235
|
+
* over the very registry those children fill. Empty registry + retained
|
|
236
|
+
* query ⇒ children never mount ⇒ registry stays empty. A deadlock.
|
|
237
|
+
* · An item's `isVisible` reads `getScore()` from a plain Map during
|
|
238
|
+
* RENDER, while `registerItem` writes that score from an `$effect`, i.e.
|
|
239
|
+
* afterwards. Nothing woke the derived, so a matching item stayed hidden.
|
|
240
|
+
*
|
|
241
|
+
* Both make `aria-activedescendant` name a node that is not in the document,
|
|
242
|
+
* which is why every pin here resolves the id rather than trusting it.
|
|
243
|
+
*/
|
|
244
|
+
function activeElement() {
|
|
245
|
+
const id = activeId();
|
|
246
|
+
return id === null ? null : document.getElementById(id);
|
|
247
|
+
}
|
|
248
|
+
it('a query kept across a close and a reopen still renders its match, named and actionable', () => {
|
|
249
|
+
const onSelect = vi.fn();
|
|
250
|
+
setup({ initialOpen: true, onSelect });
|
|
251
|
+
type('duplicate');
|
|
252
|
+
expect(options().map((el) => el.dataset.value)).toEqual(['copy']);
|
|
253
|
+
instance.setOpen(false);
|
|
254
|
+
flushSync();
|
|
255
|
+
expect(options()).toHaveLength(0);
|
|
256
|
+
instance.setOpen(true);
|
|
257
|
+
flushSync();
|
|
258
|
+
expect(options().map((el) => el.dataset.value)).toEqual(['copy']);
|
|
259
|
+
// The reference resolves to a node that is really in the document.
|
|
260
|
+
expect(activeElement()).not.toBeNull();
|
|
261
|
+
expect(activeElement()).toBe(options()[0]);
|
|
262
|
+
press('Enter');
|
|
263
|
+
expect(onSelect).toHaveBeenCalledTimes(1);
|
|
264
|
+
expect(onSelect).toHaveBeenCalledWith('copy');
|
|
265
|
+
});
|
|
266
|
+
it('a query typed while CLOSED renders its match when an arrow opens the list', () => {
|
|
267
|
+
setup({ initialOpen: false });
|
|
268
|
+
type('duplicate');
|
|
269
|
+
expect(options()).toHaveLength(0);
|
|
270
|
+
press('ArrowDown');
|
|
271
|
+
expect(options().map((el) => el.dataset.value)).toEqual(['copy']);
|
|
272
|
+
expect(activeElement()).toBe(options()[0]);
|
|
273
|
+
});
|
|
274
|
+
it('same, with NO Command.Group: the item mechanism alone is enough to break it', () => {
|
|
275
|
+
target = document.createElement('div');
|
|
276
|
+
document.body.appendChild(target);
|
|
277
|
+
instance = mount(CommandInlineDirectTest, { target });
|
|
278
|
+
flushSync();
|
|
279
|
+
type('duplicate');
|
|
280
|
+
press('ArrowDown');
|
|
281
|
+
expect(options().map((el) => el.dataset.value)).toEqual(['copy']);
|
|
282
|
+
expect(activeElement()).not.toBeNull();
|
|
283
|
+
expect(activeElement()).toBe(options()[0]);
|
|
284
|
+
});
|
|
285
|
+
// --- Event composition --------------------------------------------------
|
|
286
|
+
it('a consumer onkeydown runs first and its preventDefault cancels the local handling', () => {
|
|
287
|
+
const onOpenChange = vi.fn();
|
|
288
|
+
setup({
|
|
289
|
+
initialOpen: false,
|
|
290
|
+
onOpenChange,
|
|
291
|
+
inputAttrs: { onkeydown: (e) => e.preventDefault() },
|
|
292
|
+
});
|
|
293
|
+
press('ArrowDown');
|
|
294
|
+
expect(onOpenChange).not.toHaveBeenCalled();
|
|
295
|
+
expect(instance.getOpen()).toBe(false);
|
|
296
|
+
});
|
|
297
|
+
it('a consumer onkeydown cannot retract a close already performed in the capture phase', () => {
|
|
298
|
+
const onEscapeKeydown = vi.fn();
|
|
299
|
+
setup({
|
|
300
|
+
initialOpen: true,
|
|
301
|
+
onEscapeKeydown,
|
|
302
|
+
inputAttrs: { onkeydown: (e) => e.preventDefault() },
|
|
303
|
+
});
|
|
304
|
+
press('Escape');
|
|
305
|
+
// The layer listens on `document` in capture — it read `defaultPrevented`
|
|
306
|
+
// before the input's handler ever ran. `onEscapeKeydown` is the hook.
|
|
307
|
+
expect(onEscapeKeydown).toHaveBeenCalledTimes(1);
|
|
308
|
+
expect(instance.getOpen()).toBe(false);
|
|
309
|
+
});
|
|
310
|
+
// --- Anchorable, and no focus trap --------------------------------------
|
|
311
|
+
it('renders IN PLACE with the inline chrome released, so results can be anchored', () => {
|
|
312
|
+
setup({ initialOpen: true });
|
|
313
|
+
const root = target.querySelector('.sp-command');
|
|
314
|
+
// In place — not portalled to document.body, which would break both the
|
|
315
|
+
// consumer's scoped CSS and any anchoring to the field.
|
|
316
|
+
expect(root.parentElement).not.toBe(document.body);
|
|
317
|
+
expect(target.contains(root)).toBe(true);
|
|
318
|
+
expect(root.dataset.mode).toBe('inline');
|
|
319
|
+
// The field and the results share one owner, which is what lets a consumer
|
|
320
|
+
// anchor the second to the first.
|
|
321
|
+
const field = root.querySelector('.sp-command-input-wrapper');
|
|
322
|
+
const list = root.querySelector('[role="listbox"]');
|
|
323
|
+
expect(field.parentElement).toBe(root);
|
|
324
|
+
expect(list.parentElement).toBe(root);
|
|
325
|
+
// Whether the released `overflow` really keeps the list unclipped is a
|
|
326
|
+
// LAYOUT fact, and this environment has no CSS at all — vite does not load
|
|
327
|
+
// the components' stylesheets into jsdom. It is proven in a real Chromium
|
|
328
|
+
// by `tests/e2e/command-inline.spec.ts`, on the docs page's live demo.
|
|
329
|
+
});
|
|
330
|
+
it('does not trap focus: an outside control keeps it', () => {
|
|
331
|
+
setup({ initialOpen: true });
|
|
332
|
+
const outside = document.createElement('button');
|
|
333
|
+
document.body.appendChild(outside);
|
|
334
|
+
outside.focus();
|
|
335
|
+
flushSync();
|
|
336
|
+
expect(document.activeElement).toBe(outside);
|
|
337
|
+
outside.remove();
|
|
338
|
+
});
|
|
339
|
+
it('the consumer names the field; the component keeps its structure', () => {
|
|
340
|
+
setup({
|
|
341
|
+
initialOpen: true,
|
|
342
|
+
inputAttrs: {
|
|
343
|
+
'aria-label': 'Site search',
|
|
344
|
+
'aria-describedby': 'hint-id',
|
|
345
|
+
title: 'Search',
|
|
346
|
+
'data-testid': 'field',
|
|
347
|
+
// Refused by the type; spread anyway to prove the markup order wins.
|
|
348
|
+
role: 'textbox',
|
|
349
|
+
id: 'consumer-id',
|
|
350
|
+
'aria-expanded': 'false',
|
|
351
|
+
'aria-activedescendant': 'nope',
|
|
352
|
+
},
|
|
353
|
+
});
|
|
354
|
+
const el = input();
|
|
355
|
+
// The consumer's naming and description reach the real combobox…
|
|
356
|
+
expect(el.getAttribute('aria-label')).toBe('Site search');
|
|
357
|
+
expect(el.getAttribute('aria-describedby')).toBe('hint-id');
|
|
358
|
+
expect(el.getAttribute('title')).toBe('Search');
|
|
359
|
+
expect(el.getAttribute('data-testid')).toBe('field');
|
|
360
|
+
// …while the structure stays the component's, whatever is spread.
|
|
361
|
+
expect(el.getAttribute('role')).toBe('combobox');
|
|
362
|
+
expect(el.id).not.toBe('consumer-id');
|
|
363
|
+
expect(el.getAttribute('aria-expanded')).toBe('true');
|
|
364
|
+
expect(el.getAttribute('aria-activedescendant')).not.toBe('nope');
|
|
365
|
+
expect(el.getAttribute('aria-activedescendant')).toBe(options().find((o) => o.dataset.selected === 'true').id);
|
|
366
|
+
});
|
|
367
|
+
it('exposes the wrapper through `wrapperClass` while `class` stays on the input', () => {
|
|
368
|
+
setup({ initialOpen: false });
|
|
369
|
+
const wrapper = target.querySelector('.sp-command-input-wrapper');
|
|
370
|
+
expect(wrapper.classList.contains('probe-wrapper')).toBe(true);
|
|
371
|
+
expect(input().classList.contains('probe-input')).toBe(true);
|
|
372
|
+
expect(input().classList.contains('probe-wrapper')).toBe(false);
|
|
373
|
+
});
|
|
374
|
+
// --- The default mode is untouched --------------------------------------
|
|
375
|
+
it('modal stays the default: closing unmounts the field itself', () => {
|
|
376
|
+
// `portalTo` keeps the modal content inside `target` for querying — the
|
|
377
|
+
// modal default is `document.body`, which is itself part of the contract.
|
|
378
|
+
target = document.createElement('div');
|
|
379
|
+
document.body.appendChild(target);
|
|
380
|
+
instance = mount(CommandInlineTest, {
|
|
381
|
+
target,
|
|
382
|
+
props: { mode: 'modal', initialOpen: true, portalTo: target },
|
|
383
|
+
});
|
|
384
|
+
flushSync();
|
|
385
|
+
expect(input()).toBeTruthy();
|
|
386
|
+
expect(input().getAttribute('aria-expanded')).toBe('true');
|
|
387
|
+
instance.setOpen(false);
|
|
388
|
+
flushSync();
|
|
389
|
+
expect(target.querySelector('input')).toBeNull();
|
|
390
|
+
expect(target.querySelector('.sp-command')).toBeNull();
|
|
391
|
+
});
|
|
392
|
+
});
|
|
@@ -4,6 +4,14 @@
|
|
|
4
4
|
* Manages search filtering, item scoring, keyboard navigation,
|
|
5
5
|
* and selection for a command palette interface.
|
|
6
6
|
*/
|
|
7
|
+
/**
|
|
8
|
+
* `'modal'` — the shipped behaviour: the Root exists only while open, and
|
|
9
|
+
* closing unmounts everything, layers included.
|
|
10
|
+
* `'inline'` — the Root and its field stay mounted; `open` then governs only
|
|
11
|
+
* whether the RESULTS are rendered, and the Escape / outside-pointer layers
|
|
12
|
+
* follow the results, never the field.
|
|
13
|
+
*/
|
|
14
|
+
export type CommandMode = 'modal' | 'inline';
|
|
7
15
|
export interface CommandItem {
|
|
8
16
|
id: string;
|
|
9
17
|
value: string;
|
|
@@ -18,6 +26,25 @@ export interface CommandState {
|
|
|
18
26
|
listId: string;
|
|
19
27
|
shouldFilter: boolean;
|
|
20
28
|
loop: boolean;
|
|
29
|
+
/** Composition mode of the owning Root. */
|
|
30
|
+
mode: CommandMode;
|
|
31
|
+
/** Whether the Root currently considers the palette open. */
|
|
32
|
+
open: boolean;
|
|
33
|
+
/** Whether a `Command.List` is actually rendered right now. */
|
|
34
|
+
listMounted: boolean;
|
|
35
|
+
/** Called by `Command.List` to report its own mount/unmount. */
|
|
36
|
+
setListMounted: (mounted: boolean) => void;
|
|
37
|
+
/**
|
|
38
|
+
* DOM id of the option that is BOTH active and rendered, or `null`.
|
|
39
|
+
*
|
|
40
|
+
* Resolved against the live registry — never from the stored selection
|
|
41
|
+
* alone — so it cannot outlive the option it names: filtering it out,
|
|
42
|
+
* unmounting the list, or removing the option all make it `null` on the
|
|
43
|
+
* spot. This is what `aria-activedescendant` reads.
|
|
44
|
+
*/
|
|
45
|
+
getActiveOptionId: () => string | null;
|
|
46
|
+
/** Asks the Root to open. No-op when it is already open. */
|
|
47
|
+
requestOpen: () => void;
|
|
21
48
|
setSearch: (query: string) => void;
|
|
22
49
|
getScore: (value: string) => number;
|
|
23
50
|
filter: (value: string, search: string, keywords?: string[]) => number;
|
|
@@ -47,7 +74,10 @@ export declare function createCommandState(options: {
|
|
|
47
74
|
filter: (value: string, search: string, keywords?: string[]) => number;
|
|
48
75
|
shouldFilter: boolean;
|
|
49
76
|
loop: boolean;
|
|
77
|
+
mode: CommandMode;
|
|
78
|
+
open: boolean;
|
|
50
79
|
onSearchChange?: (search: string) => void;
|
|
80
|
+
onRequestOpen?: () => void;
|
|
51
81
|
}): CommandState;
|
|
52
82
|
export declare function setCommandContext(state: CommandState): void;
|
|
53
83
|
export declare function getCommandContext(): CommandState;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"command.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/command/command.svelte.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAOH,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAA;IACd,aAAa,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,MAAM,CAAA;IACf,MAAM,EAAE,MAAM,CAAA;IACd,YAAY,EAAE,OAAO,CAAA;IACrB,IAAI,EAAE,OAAO,CAAA;IACb,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACnC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,MAAM,CAAA;IACtE,YAAY,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAA;IACzC,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,gBAAgB,EAAE,MAAM,MAAM,CAAA;IAC9B,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,KAAK,IAAI,CAAA;IACtE,aAAa,EAAE,MAAM,IAAI,CAAA;IACzB,QAAQ,EAAE,MAAM,WAAW,EAAE,CAAA;IAC7B,eAAe,EAAE,MAAM,WAAW,EAAE,CAAA;IACpC,eAAe,EAAE,MAAM,OAAO,CAAA;CAC/B;AAED;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,CAYxF;AA0CD,wBAAgB,kBAAkB,CAAC,OAAO,EAAE;IAC1C,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,MAAM,CAAA;IACtE,YAAY,EAAE,OAAO,CAAA;IACrB,IAAI,EAAE,OAAO,CAAA;IACb,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;
|
|
1
|
+
{"version":3,"file":"command.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/command/command.svelte.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAOH;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAA;AAE5C,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAA;IACd,aAAa,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,MAAM,CAAA;IACf,MAAM,EAAE,MAAM,CAAA;IACd,YAAY,EAAE,OAAO,CAAA;IACrB,IAAI,EAAE,OAAO,CAAA;IACb,2CAA2C;IAC3C,IAAI,EAAE,WAAW,CAAA;IACjB,6DAA6D;IAC7D,IAAI,EAAE,OAAO,CAAA;IACb,+DAA+D;IAC/D,WAAW,EAAE,OAAO,CAAA;IACpB,gEAAgE;IAChE,cAAc,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC1C;;;;;;;OAOG;IACH,iBAAiB,EAAE,MAAM,MAAM,GAAG,IAAI,CAAA;IACtC,4DAA4D;IAC5D,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACnC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,MAAM,CAAA;IACtE,YAAY,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAA;IACzC,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,gBAAgB,EAAE,MAAM,MAAM,CAAA;IAC9B,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,KAAK,IAAI,CAAA;IACtE,aAAa,EAAE,MAAM,IAAI,CAAA;IACzB,QAAQ,EAAE,MAAM,WAAW,EAAE,CAAA;IAC7B,eAAe,EAAE,MAAM,WAAW,EAAE,CAAA;IACpC,eAAe,EAAE,MAAM,OAAO,CAAA;CAC/B;AAED;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,CAYxF;AA0CD,wBAAgB,kBAAkB,CAAC,OAAO,EAAE;IAC1C,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,MAAM,CAAA;IACtE,YAAY,EAAE,OAAO,CAAA;IACrB,IAAI,EAAE,OAAO,CAAA;IACb,IAAI,EAAE,WAAW,CAAA;IACjB,IAAI,EAAE,OAAO,CAAA;IACb,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;CAC3B,GAAG,YAAY,CA6Mf;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAE3D;AAED,wBAAgB,iBAAiB,IAAI,YAAY,CAEhD"}
|