@spectral_labs/ui 1.7.0 → 1.8.0-next.0

package/dist/internal/dismissible-layer/__tests__/dismissible-layer.test.js

@@ -1,196 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { DismissibleLayerState, resetDismissibleLayerStack } from '../dismissible-layer.svelte.js';
-// jsdom does not define PointerEvent — polyfill it for tests
-if (typeof globalThis.PointerEvent === 'undefined') {
-    // @ts-expect-error — minimal polyfill for testing
-    globalThis.PointerEvent = class PointerEvent extends MouseEvent {
-        constructor(type, init) {
-            super(type, init);
-        }
-    };
-}
-function createElement(rect) {
-    const el = document.createElement('div');
-    document.body.appendChild(el);
-    // Override getBoundingClientRect for rect-based inside checks
-    if (rect) {
-        el.getBoundingClientRect = () => ({
-            x: rect.x ?? 0,
-            y: rect.y ?? 0,
-            width: rect.width ?? 100,
-            height: rect.height ?? 100,
-            top: rect.top ?? 0,
-            right: rect.right ?? 100,
-            bottom: rect.bottom ?? 100,
-            left: rect.left ?? 0,
-            toJSON: () => ({}),
-        });
-    }
-    return el;
-}
-function pointerDownOutside(x = 500, y = 500) {
-    const event = new PointerEvent('pointerdown', {
-        bubbles: true,
-        clientX: x,
-        clientY: y,
-    });
-    document.dispatchEvent(event);
-}
-function pointerDownOn(element) {
-    const event = new PointerEvent('pointerdown', {
-        bubbles: true,
-        clientX: 0,
-        clientY: 0,
-    });
-    element.dispatchEvent(event);
-}
-describe('dismissibleLayerState', () => {
-    beforeEach(() => {
-        resetDismissibleLayerStack();
-    });
-    afterEach(() => {
-        resetDismissibleLayerStack();
-        // Clean up any DOM elements
-        document.body.innerHTML = '';
-    });
-    it('calls onInteractOutside when clicking outside the element', () => {
-        const el = createElement({ top: 0, left: 0, right: 100, bottom: 100 });
-        const onInteractOutside = vi.fn();
-        const props = {
-            enabled: true,
-            element: el,
-            onInteractOutside,
-            behavior: 'close',
-        };
-        const layer = new DismissibleLayerState(props);
-        layer.mount();
-        // Click outside the element's bounds
-        pointerDownOutside(500, 500);
-        expect(onInteractOutside).toHaveBeenCalledOnce();
-        expect(onInteractOutside).toHaveBeenCalledWith(expect.objectContaining({ type: 'pointerdown' }));
-        layer.unmount();
-    });
-    it('does NOT call onInteractOutside when clicking inside the element', () => {
-        const el = createElement();
-        const onInteractOutside = vi.fn();
-        const props = {
-            enabled: true,
-            element: el,
-            onInteractOutside,
-            behavior: 'close',
-        };
-        const layer = new DismissibleLayerState(props);
-        layer.mount();
-        // Click on the element itself (DOM containment check)
-        pointerDownOn(el);
-        expect(onInteractOutside).not.toHaveBeenCalled();
-        layer.unmount();
-    });
-    describe('stack behavior', () => {
-        it('only topmost layer handles the event', () => {
-            const el1 = createElement({ top: 0, left: 0, right: 100, bottom: 100 });
-            const el2 = createElement({ top: 200, left: 200, right: 300, bottom: 300 });
-            const onInteractOutside1 = vi.fn();
-            const onInteractOutside2 = vi.fn();
-            const layer1 = new DismissibleLayerState({
-                enabled: true,
-                element: el1,
-                onInteractOutside: onInteractOutside1,
-                behavior: 'close',
-            });
-            const layer2 = new DismissibleLayerState({
-                enabled: true,
-                element: el2,
-                onInteractOutside: onInteractOutside2,
-                behavior: 'close',
-            });
-            layer1.mount();
-            layer2.mount();
-            // Click outside both elements
-            pointerDownOutside(500, 500);
-            // Only topmost (layer2) should have been called
-            expect(onInteractOutside2).toHaveBeenCalledOnce();
-            expect(onInteractOutside1).not.toHaveBeenCalled();
-            layer2.unmount();
-            layer1.unmount();
-        });
-    });
-    describe('ignore behavior', () => {
-        it('respects ignore behavior — does not fire callback', () => {
-            const el = createElement({ top: 0, left: 0, right: 100, bottom: 100 });
-            const onInteractOutside = vi.fn();
-            const layer = new DismissibleLayerState({
-                enabled: true,
-                element: el,
-                onInteractOutside,
-                behavior: 'ignore',
-            });
-            layer.mount();
-            pointerDownOutside(500, 500);
-            expect(onInteractOutside).not.toHaveBeenCalled();
-            layer.unmount();
-        });
-    });
-    describe('defer-otherwise-close behavior', () => {
-        it('falls through to bottom layer', () => {
-            const el1 = createElement({ top: 0, left: 0, right: 100, bottom: 100 });
-            const el2 = createElement({ top: 200, left: 200, right: 300, bottom: 300 });
-            const onInteractOutside1 = vi.fn();
-            const onInteractOutside2 = vi.fn();
-            const layer1 = new DismissibleLayerState({
-                enabled: true,
-                element: el1,
-                onInteractOutside: onInteractOutside1,
-                behavior: 'defer-otherwise-close',
-            });
-            const layer2 = new DismissibleLayerState({
-                enabled: true,
-                element: el2,
-                onInteractOutside: onInteractOutside2,
-                behavior: 'defer-otherwise-close',
-            });
-            layer1.mount();
-            layer2.mount();
-            // Click outside both elements
-            pointerDownOutside(500, 500);
-            // Top layer defers, bottom layer handles it
-            expect(onInteractOutside2).not.toHaveBeenCalled();
-            expect(onInteractOutside1).toHaveBeenCalledOnce();
-            layer2.unmount();
-            layer1.unmount();
-        });
-    });
-    describe('cleanup', () => {
-        it('cleans up when all layers unmount', () => {
-            const el = createElement({ top: 0, left: 0, right: 100, bottom: 100 });
-            const onInteractOutside = vi.fn();
-            const layer = new DismissibleLayerState({
-                enabled: true,
-                element: el,
-                onInteractOutside,
-                behavior: 'close',
-            });
-            layer.mount();
-            layer.unmount();
-            // After unmount, clicking should NOT trigger anything
-            pointerDownOutside(500, 500);
-            expect(onInteractOutside).not.toHaveBeenCalled();
-        });
-    });
-    describe('enabled prop', () => {
-        it('respects enabled=false — does not register in stack', () => {
-            const el = createElement({ top: 0, left: 0, right: 100, bottom: 100 });
-            const onInteractOutside = vi.fn();
-            const layer = new DismissibleLayerState({
-                enabled: false,
-                element: el,
-                onInteractOutside,
-                behavior: 'close',
-            });
-            layer.mount();
-            pointerDownOutside(500, 500);
-            expect(onInteractOutside).not.toHaveBeenCalled();
-            layer.unmount();
-        });
-    });
-});

package/dist/internal/drag-drop/__tests__/auto-scroll.test.js

@@ -1,104 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { AutoScroll } from '../auto-scroll.svelte.js';
-function createScrollableElement(opts = {}) {
-    const el = document.createElement('div');
-    Object.defineProperty(el, 'getBoundingClientRect', {
-        value: () => ({
-            top: 0,
-            left: 0,
-            bottom: opts.height ?? 400,
-            right: opts.width ?? 400,
-            width: opts.width ?? 400,
-            height: opts.height ?? 400,
-            x: 0,
-            y: 0,
-            toJSON() { },
-        }),
-    });
-    // Make it scrollable
-    let _scrollTop = opts.scrollTop ?? 0;
-    let _scrollLeft = opts.scrollLeft ?? 0;
-    Object.defineProperty(el, 'scrollHeight', { value: opts.scrollHeight ?? 800 });
-    Object.defineProperty(el, 'scrollWidth', { value: opts.scrollWidth ?? 800 });
-    Object.defineProperty(el, 'clientHeight', { value: opts.height ?? 400 });
-    Object.defineProperty(el, 'clientWidth', { value: opts.width ?? 400 });
-    Object.defineProperty(el, 'scrollTop', {
-        get: () => _scrollTop,
-        set: (v) => {
-            _scrollTop = v;
-        },
-    });
-    Object.defineProperty(el, 'scrollLeft', {
-        get: () => _scrollLeft,
-        set: (v) => {
-            _scrollLeft = v;
-        },
-    });
-    // Mock getComputedStyle
-    vi.spyOn(window, 'getComputedStyle').mockReturnValue({
-        overflowY: opts.overflowY ?? 'auto',
-        overflowX: opts.overflowX ?? 'auto',
-    });
-    return el;
-}
-describe('autoScroll', () => {
-    let autoScroll;
-    beforeEach(() => {
-        autoScroll = new AutoScroll();
-        vi.useFakeTimers();
-    });
-    afterEach(() => {
-        autoScroll.teardown();
-        vi.restoreAllMocks();
-        vi.useRealTimers();
-    });
-    it('creates without error', () => {
-        expect(autoScroll).toBeDefined();
-    });
-    it('does not throw when moving without setup', () => {
-        expect(() => autoScroll.move(100, 100)).not.toThrow();
-    });
-    it('does not throw when tearing down without setup', () => {
-        expect(() => autoScroll.teardown()).not.toThrow();
-    });
-    it('sets up with a scrollable element', () => {
-        const el = createScrollableElement();
-        expect(() => autoScroll.setup(el)).not.toThrow();
-    });
-    it('detects top edge and would scroll up', () => {
-        const el = createScrollableElement({ scrollTop: 100 });
-        autoScroll.setup(el);
-        // Point near top edge (within 30px)
-        autoScroll.move(200, 10);
-        // Run one animation frame
-        vi.advanceTimersByTime(16);
-        // scrollTop should have decreased
-        expect(el.scrollTop).toBeLessThan(100);
-    });
-    it('detects bottom edge and would scroll down', () => {
-        const el = createScrollableElement({ height: 400, scrollHeight: 800, scrollTop: 0 });
-        autoScroll.setup(el);
-        // Point near bottom edge
-        autoScroll.move(200, 390);
-        vi.advanceTimersByTime(16);
-        expect(el.scrollTop).toBeGreaterThan(0);
-    });
-    it('does not scroll when pointer is in center', () => {
-        const el = createScrollableElement({ scrollTop: 100 });
-        autoScroll.setup(el);
-        // Point in center
-        autoScroll.move(200, 200);
-        vi.advanceTimersByTime(16);
-        expect(el.scrollTop).toBe(100); // unchanged
-    });
-    it('stops scrolling on teardown', () => {
-        const el = createScrollableElement({ scrollTop: 100 });
-        autoScroll.setup(el);
-        autoScroll.move(200, 10); // trigger scroll
-        autoScroll.teardown();
-        const scrollBefore = el.scrollTop;
-        vi.advanceTimersByTime(100);
-        // Should not have changed after teardown (or only 1 frame)
-        expect(Math.abs(el.scrollTop - scrollBefore)).toBeLessThanOrEqual(8); // max 1 frame of scroll
-    });
-});