@furystack/shades-common-components 10.0.35 → 12.0.0

package/esm/components/wizard/index.spec.js

@@ -0,0 +1,185 @@
+import { Injector } from '@furystack/inject';
+import { createComponent, initializeShadeRoot, Shade } from '@furystack/shades';
+import { sleepAsync, usingAsync } from '@furystack/utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { Wizard } from './index.js';
+const Step1 = Shade({
+    shadowDomName: 'wizard-test-step-1',
+    render: ({ props }) => (createComponent("div", { className: "wizard-step", "data-step-name": "step1" },
+        createComponent("span", { className: "step-info" },
+            "Page ",
+            props.currentPage + 1,
+            " of ",
+            props.maxPages),
+        createComponent("span", { className: "step-name" }, "step1"),
+        createComponent("button", { className: "prev-btn", onclick: () => props.onPrev?.() }, "Previous"),
+        createComponent("button", { className: "next-btn", onclick: () => props.onNext?.() }, "Next"))),
+});
+const Step2 = Shade({
+    shadowDomName: 'wizard-test-step-2',
+    render: ({ props }) => (createComponent("div", { className: "wizard-step", "data-step-name": "step2" },
+        createComponent("span", { className: "step-info" },
+            "Page ",
+            props.currentPage + 1,
+            " of ",
+            props.maxPages),
+        createComponent("span", { className: "step-name" }, "step2"),
+        createComponent("button", { className: "prev-btn", onclick: () => props.onPrev?.() }, "Previous"),
+        createComponent("button", { className: "next-btn", onclick: () => props.onNext?.() }, "Next"))),
+});
+const Step3 = Shade({
+    shadowDomName: 'wizard-test-step-3',
+    render: ({ props }) => (createComponent("div", { className: "wizard-step", "data-step-name": "step3" },
+        createComponent("span", { className: "step-info" },
+            "Page ",
+            props.currentPage + 1,
+            " of ",
+            props.maxPages),
+        createComponent("span", { className: "step-name" }, "step3"),
+        createComponent("button", { className: "prev-btn", onclick: () => props.onPrev?.() }, "Previous"),
+        createComponent("button", { className: "next-btn", onclick: () => props.onNext?.() }, "Next"))),
+});
+describe('Wizard', () => {
+    beforeEach(() => {
+        document.body.innerHTML = '<div id="root"></div>';
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    const renderWizard = async (steps, onFinish) => {
+        const injector = new Injector();
+        const root = document.getElementById('root');
+        initializeShadeRoot({
+            injector,
+            rootElement: root,
+            jsxElement: createComponent(Wizard, { steps: steps, onFinish: onFinish }),
+        });
+        await sleepAsync(50);
+        const wizard = root.querySelector('shades-wizard');
+        const getStepElement = () => {
+            return wizard.querySelector('wizard-test-step-1, wizard-test-step-2, wizard-test-step-3');
+        };
+        return {
+            injector,
+            wizard,
+            getStepName: () => getStepElement()?.querySelector('.step-name')?.textContent,
+            getStepInfo: () => getStepElement()?.querySelector('.step-info')?.textContent,
+            clickNext: async () => {
+                const btn = getStepElement()?.querySelector('.next-btn');
+                btn?.click();
+                await sleepAsync(50);
+            },
+            clickPrev: async () => {
+                const btn = getStepElement()?.querySelector('.prev-btn');
+                btn?.click();
+                await sleepAsync(50);
+            },
+            [Symbol.asyncDispose]: () => injector[Symbol.asyncDispose](),
+        };
+    };
+    describe('rendering', () => {
+        it('should render the wizard container', async () => {
+            await usingAsync(await renderWizard([Step1]), async ({ wizard }) => {
+                expect(wizard).toBeTruthy();
+                expect(wizard.tagName.toLowerCase()).toBe('shades-wizard');
+            });
+        });
+        it('should render the first step initially', async () => {
+            await usingAsync(await renderWizard([Step1, Step2]), async ({ getStepName }) => {
+                expect(getStepName()).toBe('step1');
+            });
+        });
+        it('should pass correct props to the first step', async () => {
+            await usingAsync(await renderWizard([Step1, Step2, Step3]), async ({ getStepInfo }) => {
+                expect(getStepInfo()).toBe('Page 1 of 3');
+            });
+        });
+    });
+    describe('navigation', () => {
+        it('should navigate to next step when onNext is called', async () => {
+            await usingAsync(await renderWizard([Step1, Step2]), async ({ getStepName, clickNext }) => {
+                expect(getStepName()).toBe('step1');
+                await clickNext();
+                expect(getStepName()).toBe('step2');
+            });
+        });
+        it('should navigate to previous step when onPrev is called', async () => {
+            await usingAsync(await renderWizard([Step1, Step2]), async ({ getStepName, clickNext, clickPrev }) => {
+                await clickNext();
+                expect(getStepName()).toBe('step2');
+                await clickPrev();
+                expect(getStepName()).toBe('step1');
+            });
+        });
+        it('should not navigate before first step', async () => {
+            await usingAsync(await renderWizard([Step1, Step2]), async ({ getStepName, clickPrev }) => {
+                expect(getStepName()).toBe('step1');
+                await clickPrev();
+                expect(getStepName()).toBe('step1');
+            });
+        });
+        it('should update step info when navigating', async () => {
+            await usingAsync(await renderWizard([Step1, Step2]), async ({ getStepInfo, clickNext }) => {
+                expect(getStepInfo()).toBe('Page 1 of 2');
+                await clickNext();
+                expect(getStepInfo()).toBe('Page 2 of 2');
+            });
+        });
+        it('should navigate through multiple steps', async () => {
+            await usingAsync(await renderWizard([Step1, Step2, Step3]), async ({ getStepName, getStepInfo, clickNext, clickPrev }) => {
+                expect(getStepName()).toBe('step1');
+                expect(getStepInfo()).toBe('Page 1 of 3');
+                await clickNext();
+                expect(getStepName()).toBe('step2');
+                expect(getStepInfo()).toBe('Page 2 of 3');
+                await clickNext();
+                expect(getStepName()).toBe('step3');
+                expect(getStepInfo()).toBe('Page 3 of 3');
+                await clickPrev();
+                expect(getStepName()).toBe('step2');
+                expect(getStepInfo()).toBe('Page 2 of 3');
+            });
+        });
+    });
+    describe('onFinish', () => {
+        it('should call onFinish when clicking next on the last step', async () => {
+            const onFinish = vi.fn();
+            await usingAsync(await renderWizard([Step1], onFinish), async ({ clickNext }) => {
+                expect(onFinish).not.toHaveBeenCalled();
+                await clickNext();
+                expect(onFinish).toHaveBeenCalledOnce();
+            });
+        });
+        it('should call onFinish after navigating to the last step', async () => {
+            const onFinish = vi.fn();
+            await usingAsync(await renderWizard([Step1, Step2], onFinish), async ({ clickNext }) => {
+                await clickNext();
+                expect(onFinish).not.toHaveBeenCalled();
+                await clickNext();
+                expect(onFinish).toHaveBeenCalledOnce();
+            });
+        });
+        it('should work without onFinish callback', async () => {
+            await usingAsync(await renderWizard([Step1]), async ({ getStepName, clickNext }) => {
+                expect(getStepName()).toBe('step1');
+                await clickNext();
+                expect(getStepName()).toBe('step1');
+            });
+        });
+    });
+    describe('Paper container', () => {
+        it('should render step inside a Paper component', async () => {
+            await usingAsync(await renderWizard([Step1]), async ({ wizard }) => {
+                const paper = wizard.querySelector('div[is="shade-paper"]');
+                expect(paper).toBeTruthy();
+            });
+        });
+        it('should have elevation 3 on the Paper', async () => {
+            await usingAsync(await renderWizard([Step1]), async ({ wizard }) => {
+                const paper = wizard.querySelector('div[is="shade-paper"]');
+                expect(paper?.getAttribute('data-elevation')).toBe('3');
+            });
+        });
+    });
+});
+//# sourceMappingURL=index.spec.js.map

package/esm/components/wizard/index.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../src/components/wizard/index.spec.tsx"],"names":[],"mappings":"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"}

package/esm/services/click-away-service.d.ts

@@ -1,8 +1,11 @@
-export declare class ClickAwayService<T extends HTMLElement> {
+export declare class ClickAwayService {
     private readonly element;
     private readonly onClickAway;
     [Symbol.dispose](): void;
+    private getElement;
     clickOutsideListener: (ev: MouseEvent) => void;
-    constructor(element: T, onClickAway: () => void);
+    constructor(element: HTMLElement | {
+        readonly current: HTMLElement | null;
+    }, onClickAway: () => void);
 }
 //# sourceMappingURL=click-away-service.d.ts.map

package/esm/services/click-away-service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"click-away-service.d.ts","sourceRoot":"","sources":["../../src/services/click-away-service.ts"],"names":[],"mappings":"AAAA,qBAAa,gBAAgB,CAAC,CAAC,SAAS,WAAW;IAY/C,OAAO,CAAC,QAAQ,CAAC,OAAO;IACxB,OAAO,CAAC,QAAQ,CAAC,WAAW;IAZvB,CAAC,MAAM,CAAC,OAAO,CAAC;IAIhB,oBAAoB,OAAS,UAAU,UAIjC;gBAGM,OAAO,EAAE,CAAC,EACV,WAAW,EAAE,MAAM,IAAI;CAI3C"}
+{"version":3,"file":"click-away-service.d.ts","sourceRoot":"","sources":["../../src/services/click-away-service.ts"],"names":[],"mappings":"AAAA,qBAAa,gBAAgB;IAkBzB,OAAO,CAAC,QAAQ,CAAC,OAAO;IACxB,OAAO,CAAC,QAAQ,CAAC,WAAW;IAlBvB,CAAC,MAAM,CAAC,OAAO,CAAC;IAIvB,OAAO,CAAC,UAAU;IAKX,oBAAoB,OAAS,UAAU,UAKjC;gBAGM,OAAO,EAAE,WAAW,GAAG;QAAE,QAAQ,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;KAAE,EAC/D,WAAW,EAAE,MAAM,IAAI;CAI3C"}

package/esm/services/click-away-service.js

@@ -4,8 +4,14 @@ export class ClickAwayService {
     [Symbol.dispose]() {
         window.removeEventListener('click', this.clickOutsideListener, true);
     }
+    getElement() {
+        if (this.element instanceof HTMLElement)
+            return this.element;
+        return this.element.current;
+    }
     clickOutsideListener = ((ev) => {
-        if (ev.target && !this.element.contains(ev.target)) {
+        const el = this.getElement();
+        if (ev.target && el && !el.contains(ev.target)) {
             this.onClickAway();
         }
     }).bind(this);

package/esm/services/click-away-service.js.map

@@ -1 +1 @@
-{"version":3,"file":"click-away-service.js","sourceRoot":"","sources":["../../src/services/click-away-service.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,gBAAgB;IAYR;IACA;IAZZ,CAAC,MAAM,CAAC,OAAO,CAAC;QACrB,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAAE,IAAI,CAAC,CAAA;IACtE,CAAC;IAEM,oBAAoB,GAAG,CAAC,CAAC,EAAc,EAAE,EAAE;QAChD,IAAI,EAAE,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAqB,CAAC,EAAE,CAAC;YAClE,IAAI,CAAC,WAAW,EAAE,CAAA;QACpB,CAAC;IACH,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAEb,YACmB,OAAU,EACV,WAAuB;QADvB,YAAO,GAAP,OAAO,CAAG;QACV,gBAAW,GAAX,WAAW,CAAY;QAExC,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAAE,IAAI,CAAC,CAAA;IACnE,CAAC;CACF"}
+{"version":3,"file":"click-away-service.js","sourceRoot":"","sources":["../../src/services/click-away-service.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,gBAAgB;IAkBR;IACA;IAlBZ,CAAC,MAAM,CAAC,OAAO,CAAC;QACrB,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAAE,IAAI,CAAC,CAAA;IACtE,CAAC;IAEO,UAAU;QAChB,IAAI,IAAI,CAAC,OAAO,YAAY,WAAW;YAAE,OAAO,IAAI,CAAC,OAAO,CAAA;QAC5D,OAAO,IAAI,CAAC,OAAO,CAAC,OAAO,CAAA;IAC7B,CAAC;IAEM,oBAAoB,GAAG,CAAC,CAAC,EAAc,EAAE,EAAE;QAChD,MAAM,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE,CAAA;QAC5B,IAAI,EAAE,CAAC,MAAM,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAqB,CAAC,EAAE,CAAC;YAC9D,IAAI,CAAC,WAAW,EAAE,CAAA;QACpB,CAAC;IACH,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAEb,YACmB,OAA+D,EAC/D,WAAuB;QADvB,YAAO,GAAP,OAAO,CAAwD;QAC/D,gBAAW,GAAX,WAAW,CAAY;QAExC,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAAE,IAAI,CAAC,CAAA;IACnE,CAAC;CACF"}

package/esm/services/collection-service.spec.js

@@ -1,10 +1,29 @@
 import { using } from '@furystack/utils';
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 import { CollectionService } from './collection-service.js';
-const testEntries = [{ foo: 1 }, { foo: 2 }, { foo: 3 }];
+const createTestEntries = () => [
+    { foo: 1, name: 'alpha' },
+    { foo: 2, name: 'beta' },
+    { foo: 3, name: 'gamma' },
+];
+const createKeyboardEvent = (key, options = {}) => {
+    return {
+        key,
+        preventDefault: vi.fn(),
+        ...options,
+    };
+};
+const createMouseEvent = (options = {}) => {
+    return {
+        ctrlKey: false,
+        shiftKey: false,
+        ...options,
+    };
+};
 describe('CollectionService', () => {
     describe('Selection', () => {
         it('Should add and remove selection', () => {
+            const testEntries = createTestEntries();
             using(new CollectionService({}), (collectionService) => {
                 collectionService.data.setValue({ count: 3, entries: testEntries });
                 testEntries.forEach((entry) => {
@@ -21,5 +40,375 @@ describe('CollectionService', () => {
             });
         });
     });
+    describe('Disposal', () => {
+        it('Should dispose all observables', () => {
+            const service = new CollectionService({});
+            const dataSpy = vi.spyOn(service.data, Symbol.dispose);
+            const selectionSpy = vi.spyOn(service.selection, Symbol.dispose);
+            const searchTermSpy = vi.spyOn(service.searchTerm, Symbol.dispose);
+            const hasFocusSpy = vi.spyOn(service.hasFocus, Symbol.dispose);
+            const focusedEntrySpy = vi.spyOn(service.focusedEntry, Symbol.dispose);
+            service[Symbol.dispose]();
+            expect(dataSpy).toHaveBeenCalled();
+            expect(selectionSpy).toHaveBeenCalled();
+            expect(searchTermSpy).toHaveBeenCalled();
+            expect(hasFocusSpy).toHaveBeenCalled();
+            expect(focusedEntrySpy).toHaveBeenCalled();
+        });
+    });
+    describe('handleKeyDown', () => {
+        it('Should do nothing when hasFocus is false', () => {
+            const testEntries = createTestEntries();
+            using(new CollectionService({}), (service) => {
+                service.data.setValue({ count: 3, entries: testEntries });
+                service.hasFocus.setValue(false);
+                service.focusedEntry.setValue(testEntries[0]);
+                service.handleKeyDown(createKeyboardEvent(' '));
+                expect(service.selection.getValue()).toEqual([]);
+            });
+        });
+        describe('Space key', () => {
+            it('Should toggle selection on focused entry', () => {
+                const testEntries = createTestEntries();
+                using(new CollectionService({}), (service) => {
+                    service.data.setValue({ count: 3, entries: testEntries });
+                    service.hasFocus.setValue(true);
+                    service.focusedEntry.setValue(testEntries[1]);
+                    const ev = createKeyboardEvent(' ');
+                    service.handleKeyDown(ev);
+                    expect(ev.preventDefault).toHaveBeenCalled();
+                    expect(service.selection.getValue()).toEqual([testEntries[1]]);
+                    service.handleKeyDown(createKeyboardEvent(' '));
+                    expect(service.selection.getValue()).toEqual([]);
+                });
+            });
+            it('Should do nothing when no entry is focused', () => {
+                const testEntries = createTestEntries();
+                using(new CollectionService({}), (service) => {
+                    service.data.setValue({ count: 3, entries: testEntries });
+                    service.hasFocus.setValue(true);
+                    service.focusedEntry.setValue(undefined);
+                    service.handleKeyDown(createKeyboardEvent(' '));
+                    expect(service.selection.getValue()).toEqual([]);
+                });
+            });
+        });
+        describe('* key (invert selection)', () => {
+            it('Should invert selection', () => {
+                const testEntries = createTestEntries();
+                using(new CollectionService({}), (service) => {
+                    service.data.setValue({ count: 3, entries: testEntries });
+                    service.hasFocus.setValue(true);
+                    service.selection.setValue([testEntries[0], testEntries[2]]);
+                    service.handleKeyDown(createKeyboardEvent('*'));
+                    expect(service.selection.getValue()).toEqual([testEntries[1]]);
+                });
+            });
+        });
+        describe('+ key (select all)', () => {
+            it('Should select all entries', () => {
+                const testEntries = createTestEntries();
+                using(new CollectionService({}), (service) => {
+                    service.data.setValue({ count: 3, entries: testEntries });
+                    service.hasFocus.setValue(true);
+                    service.handleKeyDown(createKeyboardEvent('+'));
+                    expect(service.selection.getValue()).toEqual(testEntries);
+                });
+            });
+        });
+        describe('- key (deselect all)', () => {
+            it('Should deselect all entries', () => {
+                const testEntries = createTestEntries();
+                using(new CollectionService({}), (service) => {
+                    service.data.setValue({ count: 3, entries: testEntries });
+                    service.hasFocus.setValue(true);
+                    service.selection.setValue([testEntries[0], testEntries[1]]);
+                    service.handleKeyDown(createKeyboardEvent('-'));
+                    expect(service.selection.getValue()).toEqual([]);
+                });
+            });
+        });
+        describe('Insert key', () => {
+            it('Should toggle selection and move focus to next entry', () => {
+                const testEntries = createTestEntries();
+                using(new CollectionService({}), (service) => {
+                    service.data.setValue({ count: 3, entries: testEntries });
+                    service.hasFocus.setValue(true);
+                    service.focusedEntry.setValue(testEntries[0]);
+                    service.handleKeyDown(createKeyboardEvent('Insert'));
+                    expect(service.selection.getValue()).toEqual([testEntries[0]]);
+                    expect(service.focusedEntry.getValue()).toBe(testEntries[1]);
+                });
+            });
+            it('Should deselect if already selected and move focus', () => {
+                const testEntries = createTestEntries();
+                using(new CollectionService({}), (service) => {
+                    service.data.setValue({ count: 3, entries: testEntries });
+                    service.hasFocus.setValue(true);
+                    service.focusedEntry.setValue(testEntries[1]);
+                    service.selection.setValue([testEntries[1]]);
+                    service.handleKeyDown(createKeyboardEvent('Insert'));
+                    expect(service.selection.getValue()).toEqual([]);
+                    expect(service.focusedEntry.getValue()).toBe(testEntries[2]);
+                });
+            });
+            it('Should do nothing when no entry is focused', () => {
+                const testEntries = createTestEntries();
+                using(new CollectionService({}), (service) => {
+                    service.data.setValue({ count: 3, entries: testEntries });
+                    service.hasFocus.setValue(true);
+                    service.focusedEntry.setValue(undefined);
+                    service.handleKeyDown(createKeyboardEvent('Insert'));
+                    expect(service.selection.getValue()).toEqual([]);
+                });
+            });
+        });
+        describe('ArrowUp key', () => {
+            it('Should move focus to previous entry', () => {
+                const testEntries = createTestEntries();
+                using(new CollectionService({}), (service) => {
+                    service.data.setValue({ count: 3, entries: testEntries });
+                    service.hasFocus.setValue(true);
+                    service.focusedEntry.setValue(testEntries[2]);
+                    const ev = createKeyboardEvent('ArrowUp');
+                    service.handleKeyDown(ev);
+                    expect(ev.preventDefault).toHaveBeenCalled();
+                    expect(service.focusedEntry.getValue()).toBe(testEntries[1]);
+                });
+            });
+            it('Should not go below index 0', () => {
+                const testEntries = createTestEntries();
+                using(new CollectionService({}), (service) => {
+                    service.data.setValue({ count: 3, entries: testEntries });
+                    service.hasFocus.setValue(true);
+                    service.focusedEntry.setValue(testEntries[0]);
+                    service.handleKeyDown(createKeyboardEvent('ArrowUp'));
+                    expect(service.focusedEntry.getValue()).toBe(testEntries[0]);
+                });
+            });
+        });
+        describe('ArrowDown key', () => {
+            it('Should move focus to next entry', () => {
+                const testEntries = createTestEntries();
+                using(new CollectionService({}), (service) => {
+                    service.data.setValue({ count: 3, entries: testEntries });
+                    service.hasFocus.setValue(true);
+                    service.focusedEntry.setValue(testEntries[0]);
+                    const ev = createKeyboardEvent('ArrowDown');
+                    service.handleKeyDown(ev);
+                    expect(ev.preventDefault).toHaveBeenCalled();
+                    expect(service.focusedEntry.getValue()).toBe(testEntries[1]);
+                });
+            });
+            it('Should not exceed the last entry', () => {
+                const testEntries = createTestEntries();
+                using(new CollectionService({}), (service) => {
+                    service.data.setValue({ count: 3, entries: testEntries });
+                    service.hasFocus.setValue(true);
+                    service.focusedEntry.setValue(testEntries[2]);
+                    service.handleKeyDown(createKeyboardEvent('ArrowDown'));
+                    expect(service.focusedEntry.getValue()).toBe(testEntries[2]);
+                });
+            });
+        });
+        describe('Home key', () => {
+            it('Should focus the first entry', () => {
+                const testEntries = createTestEntries();
+                using(new CollectionService({}), (service) => {
+                    service.data.setValue({ count: 3, entries: testEntries });
+                    service.hasFocus.setValue(true);
+                    service.focusedEntry.setValue(testEntries[2]);
+                    service.handleKeyDown(createKeyboardEvent('Home'));
+                    expect(service.focusedEntry.getValue()).toBe(testEntries[0]);
+                });
+            });
+        });
+        describe('End key', () => {
+            it('Should focus the last entry', () => {
+                const testEntries = createTestEntries();
+                using(new CollectionService({}), (service) => {
+                    service.data.setValue({ count: 3, entries: testEntries });
+                    service.hasFocus.setValue(true);
+                    service.focusedEntry.setValue(testEntries[0]);
+                    service.handleKeyDown(createKeyboardEvent('End'));
+                    expect(service.focusedEntry.getValue()).toBe(testEntries[2]);
+                });
+            });
+        });
+        describe('Tab key', () => {
+            it('Should toggle hasFocus', () => {
+                const testEntries = createTestEntries();
+                using(new CollectionService({}), (service) => {
+                    service.data.setValue({ count: 3, entries: testEntries });
+                    service.hasFocus.setValue(true);
+                    service.handleKeyDown(createKeyboardEvent('Tab'));
+                    expect(service.hasFocus.getValue()).toBe(false);
+                });
+            });
+        });
+        describe('Escape key', () => {
+            it('Should clear search term and selection', () => {
+                const testEntries = createTestEntries();
+                using(new CollectionService({}), (service) => {
+                    service.data.setValue({ count: 3, entries: testEntries });
+                    service.hasFocus.setValue(true);
+                    service.selection.setValue([testEntries[0], testEntries[1]]);
+                    service.searchTerm.setValue('test');
+                    service.handleKeyDown(createKeyboardEvent('Escape'));
+                    expect(service.searchTerm.getValue()).toBe('');
+                    expect(service.selection.getValue()).toEqual([]);
+                });
+            });
+        });
+        describe('Character search', () => {
+            it('Should search by character when searchField is configured', () => {
+                const testEntries = createTestEntries();
+                using(new CollectionService({ searchField: 'name' }), (service) => {
+                    service.data.setValue({ count: 3, entries: testEntries });
+                    service.hasFocus.setValue(true);
+                    service.handleKeyDown(createKeyboardEvent('b'));
+                    expect(service.searchTerm.getValue()).toBe('b');
+                    expect(service.focusedEntry.getValue()).toBe(testEntries[1]); // 'beta'
+                });
+            });
+            it('Should accumulate search characters', () => {
+                const testEntries = createTestEntries();
+                using(new CollectionService({ searchField: 'name' }), (service) => {
+                    service.data.setValue({ count: 3, entries: testEntries });
+                    service.hasFocus.setValue(true);
+                    service.handleKeyDown(createKeyboardEvent('a'));
+                    expect(service.focusedEntry.getValue()).toBe(testEntries[0]); // 'alpha'
+                    service.handleKeyDown(createKeyboardEvent('l'));
+                    expect(service.searchTerm.getValue()).toBe('al');
+                    expect(service.focusedEntry.getValue()).toBe(testEntries[0]); // still 'alpha'
+                });
+            });
+            it('Should not search when searchField is not configured', () => {
+                const testEntries = createTestEntries();
+                using(new CollectionService({}), (service) => {
+                    service.data.setValue({ count: 3, entries: testEntries });
+                    service.hasFocus.setValue(true);
+                    service.handleKeyDown(createKeyboardEvent('b'));
+                    expect(service.searchTerm.getValue()).toBe('');
+                    expect(service.focusedEntry.getValue()).toBeUndefined();
+                });
+            });
+            it('Should set focusedEntry to undefined when no match found', () => {
+                const testEntries = createTestEntries();
+                using(new CollectionService({ searchField: 'name' }), (service) => {
+                    service.data.setValue({ count: 3, entries: testEntries });
+                    service.hasFocus.setValue(true);
+                    service.focusedEntry.setValue(testEntries[0]);
+                    service.handleKeyDown(createKeyboardEvent('z'));
+                    expect(service.searchTerm.getValue()).toBe('z');
+                    expect(service.focusedEntry.getValue()).toBeUndefined();
+                });
+            });
+            it('Should ignore multi-character keys', () => {
+                const testEntries = createTestEntries();
+                using(new CollectionService({ searchField: 'name' }), (service) => {
+                    service.data.setValue({ count: 3, entries: testEntries });
+                    service.hasFocus.setValue(true);
+                    service.handleKeyDown(createKeyboardEvent('Shift'));
+                    expect(service.searchTerm.getValue()).toBe('');
+                });
+            });
+        });
+    });
+    describe('handleRowClick', () => {
+        it('Should call onRowClick callback', () => {
+            const testEntries = createTestEntries();
+            const onRowClick = vi.fn();
+            using(new CollectionService({ onRowClick }), (service) => {
+                service.data.setValue({ count: 3, entries: testEntries });
+                service.handleRowClick(testEntries[0], createMouseEvent());
+                expect(onRowClick).toHaveBeenCalledWith(testEntries[0]);
+            });
+        });
+        it('Should update focusedEntry on click', () => {
+            const testEntries = createTestEntries();
+            using(new CollectionService({}), (service) => {
+                service.data.setValue({ count: 3, entries: testEntries });
+                service.handleRowClick(testEntries[1], createMouseEvent());
+                expect(service.focusedEntry.getValue()).toBe(testEntries[1]);
+            });
+        });
+        describe('Ctrl+click', () => {
+            it('Should add entry to selection with Ctrl+click', () => {
+                const testEntries = createTestEntries();
+                using(new CollectionService({}), (service) => {
+                    service.data.setValue({ count: 3, entries: testEntries });
+                    service.selection.setValue([testEntries[0]]);
+                    service.handleRowClick(testEntries[1], createMouseEvent({ ctrlKey: true }));
+                    expect(service.selection.getValue()).toEqual([testEntries[0], testEntries[1]]);
+                });
+            });
+            it('Should remove entry from selection with Ctrl+click if already selected', () => {
+                const testEntries = createTestEntries();
+                using(new CollectionService({}), (service) => {
+                    service.data.setValue({ count: 3, entries: testEntries });
+                    service.selection.setValue([testEntries[0], testEntries[1]]);
+                    service.handleRowClick(testEntries[0], createMouseEvent({ ctrlKey: true }));
+                    expect(service.selection.getValue()).toEqual([testEntries[1]]);
+                });
+            });
+        });
+        describe('Shift+click', () => {
+            it('Should select range from last focused to clicked entry (forward)', () => {
+                const testEntries = createTestEntries();
+                using(new CollectionService({}), (service) => {
+                    service.data.setValue({ count: 3, entries: testEntries });
+                    service.focusedEntry.setValue(testEntries[0]);
+                    service.handleRowClick(testEntries[2], createMouseEvent({ shiftKey: true }));
+                    expect(service.selection.getValue()).toContain(testEntries[0]);
+                    expect(service.selection.getValue()).toContain(testEntries[1]);
+                    expect(service.selection.getValue()).toContain(testEntries[2]);
+                });
+            });
+            it('Should select range from last focused to clicked entry (backward)', () => {
+                const testEntries = createTestEntries();
+                using(new CollectionService({}), (service) => {
+                    service.data.setValue({ count: 3, entries: testEntries });
+                    service.focusedEntry.setValue(testEntries[2]);
+                    service.handleRowClick(testEntries[0], createMouseEvent({ shiftKey: true }));
+                    expect(service.selection.getValue()).toContain(testEntries[0]);
+                    expect(service.selection.getValue()).toContain(testEntries[1]);
+                    expect(service.selection.getValue()).toContain(testEntries[2]);
+                });
+            });
+            it('Should append to existing selection with Shift+click', () => {
+                const testEntries = createTestEntries();
+                const extraEntry = { foo: 4, name: 'delta' };
+                const allEntries = [...testEntries, extraEntry];
+                using(new CollectionService({}), (service) => {
+                    service.data.setValue({ count: 4, entries: allEntries });
+                    service.selection.setValue([extraEntry]);
+                    service.focusedEntry.setValue(testEntries[0]);
+                    service.handleRowClick(testEntries[1], createMouseEvent({ shiftKey: true }));
+                    expect(service.selection.getValue()).toContain(extraEntry);
+                    expect(service.selection.getValue()).toContain(testEntries[0]);
+                    expect(service.selection.getValue()).toContain(testEntries[1]);
+                });
+            });
+        });
+    });
+    describe('handleRowDoubleClick', () => {
+        it('Should call onRowDoubleClick callback', () => {
+            const testEntries = createTestEntries();
+            const onRowDoubleClick = vi.fn();
+            using(new CollectionService({ onRowDoubleClick }), (service) => {
+                service.data.setValue({ count: 3, entries: testEntries });
+                service.handleRowDoubleClick(testEntries[0]);
+                expect(onRowDoubleClick).toHaveBeenCalledWith(testEntries[0]);
+            });
+        });
+        it('Should not throw when onRowDoubleClick is not configured', () => {
+            const testEntries = createTestEntries();
+            using(new CollectionService({}), (service) => {
+                service.data.setValue({ count: 3, entries: testEntries });
+                expect(() => service.handleRowDoubleClick(testEntries[0])).not.toThrow();
+            });
+        });
+    });
 });
 //# sourceMappingURL=collection-service.spec.js.map