@furystack/shades-common-components 10.0.35 → 12.0.0

package/esm/components/suggest/suggestion-list.js

@@ -1,36 +1,60 @@
 import { Shade, createComponent } from '@furystack/shades';
-import { ThemeProviderService } from '../../services/theme-provider-service.js';
+import { cssVariableTheme } from '../../services/css-variable-theme.js';
 import { promisifyAnimation } from '../../utils/promisify-animation.js';
 export const SuggestionList = Shade({
     shadowDomName: 'shade-suggest-suggestion-list',
-    render: ({ element, props, injector, useObservable }) => {
+    css: {
+        '& .suggestion-items-container': {
+            borderTop: 'none',
+            position: 'absolute',
+            borderRadius: `0px 0px ${cssVariableTheme.shape.borderRadius.lg} ${cssVariableTheme.shape.borderRadius.lg}`,
+            marginLeft: '14px',
+            marginTop: cssVariableTheme.spacing.xs,
+            overflow: 'hidden',
+            zIndex: '1',
+            left: 'auto',
+            backgroundColor: cssVariableTheme.background.paper,
+            color: cssVariableTheme.text.secondary,
+            boxShadow: cssVariableTheme.shadows.lg,
+            backdropFilter: `blur(${cssVariableTheme.effects.blurXl})`,
+            border: `1px solid ${cssVariableTheme.action.subtleBorder}`,
+        },
+        '& .suggestion-item': {
+            padding: '0.875em 1.25em',
+            cursor: 'pointer',
+            background: 'transparent',
+            fontWeight: '400',
+            borderLeft: '3px solid transparent',
+            transition: `all ${cssVariableTheme.transitions.duration.normal} ${cssVariableTheme.transitions.easing.default}`,
+            fontSize: '0.95em',
+            letterSpacing: '0.01em',
+        },
+        '& .suggestion-item:hover': {
+            background: cssVariableTheme.action.hoverBackground,
+        },
+        '& .suggestion-item.selected': {
+            background: cssVariableTheme.action.activeBackground,
+            fontWeight: '500',
+            borderLeft: `3px solid ${cssVariableTheme.text.primary}`,
+        },
+        '& .suggestion-item.selected:hover': {
+            background: cssVariableTheme.action.activeBackground,
+        },
+    },
+    render: ({ props, useObservable, useRef }) => {
         const { manager } = props;
-        const { theme } = injector.getInstance(ThemeProviderService);
+        const containerRef = useRef('container');
         const [suggestions] = useObservable('suggestions', manager.currentSuggestions);
-        // todo: GetLast is eliminated, do we need it?
-        const [selectedIndex] = useObservable('selectedIndex', manager.selectedIndex, {
-            onChange: (idx) => {
-                ;
-                [...element.querySelectorAll('.suggestion-item')].map((s, i) => {
-                    if (i === idx) {
-                        s.style.background = 'rgba(128,128,128,0.2)';
-                        s.style.fontWeight = '500';
-                        s.style.borderLeft = `3px solid ${theme.text.primary}`;
-                    }
-                    else {
-                        s.style.background = 'transparent';
-                        s.style.fontWeight = '400';
-                        s.style.borderLeft = '3px solid transparent';
-                    }
-                });
-            },
-        });
+        const [selectedIndex] = useObservable('selectedIndex', manager.selectedIndex);
         const [isListOpened] = useObservable('isOpened', manager.isOpened, {
             onChange: (isOpened) => {
-                const container = element.firstElementChild;
+                const container = containerRef.current;
+                if (!container)
+                    return;
+                const hostParentWidth = container.closest('shade-suggest-suggestion-list')?.parentElement?.getBoundingClientRect().width || 200;
                 if (isOpened) {
                     container.style.zIndex = '1';
-                    container.style.width = `calc(${Math.round(element.parentElement?.getBoundingClientRect().width || 200)}px - 3em)`;
+                    container.style.width = `calc(${Math.round(hostParentWidth)}px - 3em)`;
                     void promisifyAnimation(container, [
                         { opacity: 0, transform: 'translate(0, -50px)' },
                         { opacity: 1, transform: 'translate(0, 0)' },
@@ -45,44 +69,14 @@ export const SuggestionList = Shade({
                 }
             },
         });
-        return (createComponent("div", { className: "suggestion-items-container", style: {
-                borderTop: 'none',
-                position: 'absolute',
-                borderRadius: '0px 0px 12px 12px',
-                marginLeft: '14px',
-                marginTop: '4px',
-                overflow: 'hidden',
-                zIndex: '1',
-                left: 'auto',
-                backgroundColor: theme.background.paper,
-                color: theme.text.secondary,
-                boxShadow: '0 8px 24px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.12)',
-                backdropFilter: 'blur(20px)',
-                border: '1px solid rgba(128,128,128,0.2)',
-                width: `calc(${Math.round(element.parentElement?.getBoundingClientRect().width || 200)}px - 3em)`,
-            } }, suggestions.map((s, i) => (createComponent("div", { className: "suggestion-item", onclick: () => {
+        const hostParentWidth = containerRef.current?.closest('shade-suggest-suggestion-list')?.parentElement?.getBoundingClientRect().width ||
+            200;
+        return (createComponent("div", { ref: containerRef, className: "suggestion-items-container", style: {
+                width: `calc(${Math.round(hostParentWidth)}px - 3em)`,
+            } }, suggestions.map((s, i) => (createComponent("div", { className: `suggestion-item${i === selectedIndex ? ' selected' : ''}`, onclick: () => {
                 if (isListOpened) {
                     manager.selectSuggestion(i);
                 }
-            }, onmouseenter: (ev) => {
-                if (i !== selectedIndex) {
-                    ;
-                    ev.target.style.background = 'rgba(128,128,128,0.1)';
-                }
-            }, onmouseleave: (ev) => {
-                if (i !== selectedIndex) {
-                    ;
-                    ev.target.style.background = 'transparent';
-                }
-            }, style: {
-                padding: '0.875em 1.25em',
-                cursor: 'pointer',
-                background: i === selectedIndex ? 'rgba(128,128,128,0.2)' : 'transparent',
-                fontWeight: i === selectedIndex ? '500' : '400',
-                borderLeft: i === selectedIndex ? `3px solid ${theme.text.primary}` : '3px solid transparent',
-                transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
-                fontSize: '0.95em',
-                letterSpacing: '0.01em',
             } }, s.suggestion.element)))));
     },
 });

package/esm/components/suggest/suggestion-list.js.map

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

package/esm/components/suggest/suggestion-list.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=suggestion-list.spec.d.ts.map

package/esm/components/suggest/suggestion-list.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"suggestion-list.spec.d.ts","sourceRoot":"","sources":["../../../src/components/suggest/suggestion-list.spec.tsx"],"names":[],"mappings":""}

package/esm/components/suggest/suggestion-list.spec.js

@@ -0,0 +1,271 @@
+import { Injector } from '@furystack/inject';
+import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades';
+import { usingAsync } from '@furystack/utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { SuggestManager } from './suggest-manager.js';
+import { SuggestionList } from './suggestion-list.js';
+const createTestEntries = () => [
+    { id: 1, name: 'alpha' },
+    { id: 2, name: 'beta' },
+    { id: 3, name: 'gamma' },
+];
+const createSuggestionResult = (entry) => ({
+    element: (createComponent("span", null, entry.name)),
+    score: entry.id,
+});
+describe('SuggestionList', () => {
+    let originalAnimate;
+    beforeEach(() => {
+        document.body.innerHTML = '<div id="root"></div>';
+        vi.useFakeTimers();
+        originalAnimate = Element.prototype.animate;
+        Element.prototype.animate = vi.fn(() => {
+            const mockAnimation = {
+                onfinish: null,
+                oncancel: null,
+                cancel: vi.fn(),
+                play: vi.fn(),
+                pause: vi.fn(),
+                finish: vi.fn(),
+                addEventListener: vi.fn(),
+                removeEventListener: vi.fn(),
+            };
+            return mockAnimation;
+        });
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+        Element.prototype.animate = originalAnimate;
+        vi.useRealTimers();
+        vi.restoreAllMocks();
+    });
+    const createManager = () => {
+        const getEntries = vi.fn().mockResolvedValue(createTestEntries());
+        const getSuggestionEntry = vi.fn().mockImplementation(createSuggestionResult);
+        return new SuggestManager(getEntries, getSuggestionEntry);
+    };
+    it('should render with shadow DOM', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            const manager = createManager();
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(SuggestionList, { manager: manager }),
+            });
+            await flushUpdates();
+            await vi.advanceTimersByTimeAsync(50);
+            const suggestionList = document.querySelector('shade-suggest-suggestion-list');
+            expect(suggestionList).not.toBeNull();
+            manager[Symbol.dispose]();
+        });
+    });
+    it('should render the suggestions container', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            const manager = createManager();
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(SuggestionList, { manager: manager }),
+            });
+            await flushUpdates();
+            await vi.advanceTimersByTimeAsync(50);
+            const container = document.querySelector('.suggestion-items-container');
+            expect(container).not.toBeNull();
+            manager[Symbol.dispose]();
+        });
+    });
+    it('should render suggestion items when suggestions are present', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            const manager = createManager();
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(SuggestionList, { manager: manager }),
+            });
+            await flushUpdates();
+            await vi.advanceTimersByTimeAsync(50);
+            void manager.getSuggestion({ injector, term: 'test' });
+            await vi.advanceTimersByTimeAsync(250);
+            await vi.advanceTimersByTimeAsync(50);
+            const suggestionItems = document.querySelectorAll('.suggestion-item');
+            expect(suggestionItems.length).toBe(3);
+            expect(suggestionItems[0].textContent).toContain('alpha');
+            expect(suggestionItems[1].textContent).toContain('beta');
+            expect(suggestionItems[2].textContent).toContain('gamma');
+            manager[Symbol.dispose]();
+        });
+    });
+    it('should apply selected class to the correct suggestion item', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            const manager = createManager();
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(SuggestionList, { manager: manager }),
+            });
+            await flushUpdates();
+            await vi.advanceTimersByTimeAsync(50);
+            void manager.getSuggestion({ injector, term: 'test' });
+            await vi.advanceTimersByTimeAsync(250);
+            await vi.advanceTimersByTimeAsync(50);
+            const suggestionItems = document.querySelectorAll('.suggestion-item');
+            expect(suggestionItems[0].classList.contains('selected')).toBe(true);
+            expect(suggestionItems[1].classList.contains('selected')).toBe(false);
+            expect(suggestionItems[2].classList.contains('selected')).toBe(false);
+            manager[Symbol.dispose]();
+        });
+    });
+    it('should update selected class when selectedIndex changes', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            const manager = createManager();
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(SuggestionList, { manager: manager }),
+            });
+            await flushUpdates();
+            await vi.advanceTimersByTimeAsync(50);
+            void manager.getSuggestion({ injector, term: 'test' });
+            await vi.advanceTimersByTimeAsync(250);
+            await vi.advanceTimersByTimeAsync(50);
+            manager.selectedIndex.setValue(1);
+            await vi.advanceTimersByTimeAsync(50);
+            const suggestionItems = document.querySelectorAll('.suggestion-item');
+            expect(suggestionItems[0].classList.contains('selected')).toBe(false);
+            expect(suggestionItems[1].classList.contains('selected')).toBe(true);
+            expect(suggestionItems[2].classList.contains('selected')).toBe(false);
+            manager.selectedIndex.setValue(2);
+            await vi.advanceTimersByTimeAsync(50);
+            expect(suggestionItems[0].classList.contains('selected')).toBe(false);
+            expect(suggestionItems[1].classList.contains('selected')).toBe(false);
+            expect(suggestionItems[2].classList.contains('selected')).toBe(true);
+            manager[Symbol.dispose]();
+        });
+    });
+    it('should call selectSuggestion when a suggestion item is clicked', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            const manager = createManager();
+            const selectSpy = vi.spyOn(manager, 'selectSuggestion');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(SuggestionList, { manager: manager }),
+            });
+            await flushUpdates();
+            await vi.advanceTimersByTimeAsync(50);
+            void manager.getSuggestion({ injector, term: 'test' });
+            await vi.advanceTimersByTimeAsync(250);
+            await vi.advanceTimersByTimeAsync(50);
+            manager.isOpened.setValue(true);
+            await vi.advanceTimersByTimeAsync(50);
+            const suggestionItems = document.querySelectorAll('.suggestion-item');
+            suggestionItems[1].click();
+            expect(selectSpy).toHaveBeenCalledWith(1);
+            manager[Symbol.dispose]();
+        });
+    });
+    it('should not call selectSuggestion when list is not opened', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            const manager = createManager();
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(SuggestionList, { manager: manager }),
+            });
+            await flushUpdates();
+            await vi.advanceTimersByTimeAsync(50);
+            manager.currentSuggestions.setValue([
+                { entry: { id: 1, name: 'alpha' }, suggestion: createSuggestionResult({ id: 1, name: 'alpha' }) },
+                { entry: { id: 2, name: 'beta' }, suggestion: createSuggestionResult({ id: 2, name: 'beta' }) },
+            ]);
+            await vi.advanceTimersByTimeAsync(50);
+            const selectSpy = vi.spyOn(manager, 'selectSuggestion');
+            const suggestionItems = document.querySelectorAll('.suggestion-item');
+            suggestionItems[1].click();
+            expect(selectSpy).not.toHaveBeenCalled();
+            manager[Symbol.dispose]();
+        });
+    });
+    it('should render empty container when no suggestions', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            const getEntries = vi.fn().mockResolvedValue([]);
+            const getSuggestionEntry = vi.fn().mockImplementation(createSuggestionResult);
+            const manager = new SuggestManager(getEntries, getSuggestionEntry);
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(SuggestionList, { manager: manager }),
+            });
+            await flushUpdates();
+            await vi.advanceTimersByTimeAsync(50);
+            const suggestionItems = document.querySelectorAll('.suggestion-item');
+            expect(suggestionItems.length).toBe(0);
+            manager[Symbol.dispose]();
+        });
+    });
+    describe('animations', () => {
+        it('should animate container when isOpened changes to true', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const manager = createManager();
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(SuggestionList, { manager: manager }),
+                });
+                await vi.advanceTimersByTimeAsync(50);
+                const container = document.querySelector('.suggestion-items-container');
+                manager.isOpened.setValue(true);
+                await vi.advanceTimersByTimeAsync(50);
+                expect(container.style.zIndex).toBe('1');
+                manager[Symbol.dispose]();
+            });
+        });
+        it('should animate container when isOpened changes to false', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const manager = createManager();
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(SuggestionList, { manager: manager }),
+                });
+                await vi.advanceTimersByTimeAsync(50);
+                manager.isOpened.setValue(true);
+                await vi.advanceTimersByTimeAsync(50);
+                const container = document.querySelector('.suggestion-items-container');
+                manager.isOpened.setValue(false);
+                await vi.advanceTimersByTimeAsync(50);
+                expect(container.style.zIndex).toBe('-1');
+                manager[Symbol.dispose]();
+            });
+        });
+    });
+    describe('container width', () => {
+        it('should set container width based on parent element', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                rootElement.style.width = '400px';
+                const manager = createManager();
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(SuggestionList, { manager: manager }),
+                });
+                await vi.advanceTimersByTimeAsync(50);
+                const container = document.querySelector('.suggestion-items-container');
+                expect(container.style.width).toBeDefined();
+                manager[Symbol.dispose]();
+            });
+        });
+    });
+});
+//# sourceMappingURL=suggestion-list.spec.js.map

package/esm/components/suggest/suggestion-list.spec.js.map

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

package/esm/components/tabs.d.ts

@@ -1,14 +1,30 @@
-export interface Tab {
+export type Tab = {
     header: JSX.Element;
     component: JSX.Element;
     hash: string;
-}
+    /** Whether this tab shows a close button. Only effective when onClose is provided on Tabs */
+    closable?: boolean;
+};
 export declare const Tabs: (props: {
     tabs: Tab[];
     containerStyle?: Partial<CSSStyleDeclaration>;
     style?: Partial<CSSStyleDeclaration>;
     onChange?: (page: number) => void;
+    /** When provided, tabs operate in controlled mode (URL hash is ignored) */
+    activeKey?: string;
+    /** Called when the active tab changes (receives the tab's hash) */
+    onTabChange?: (key: string) => void;
+    /** Visual style of the tab headers. Defaults to 'line' */
+    type?: "line" | "card";
+    /** Layout orientation. Defaults to 'horizontal' */
+    orientation?: "horizontal" | "vertical";
+    /** Called when a closable tab's close button is clicked */
+    onClose?: (key: string) => void;
+    /** Called when the add button is clicked (only shown when this callback is provided) */
+    onAdd?: () => void;
 } & Omit<Partial<HTMLElement>, "style"> & {
     style?: Partial<CSSStyleDeclaration>;
+} & {
+    ref?: import("@furystack/shades").RefObject<Element>;
 }, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
 //# sourceMappingURL=tabs.d.ts.map

package/esm/components/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,GAAG;IAClB,MAAM,EAAE,GAAG,CAAC,OAAO,CAAA;IACnB,SAAS,EAAE,GAAG,CAAC,OAAO,CAAA;IACtB,IAAI,EAAE,MAAM,CAAA;CACb;AA+BD,eAAO,MAAM,IAAI;UACT,GAAG,EAAE;qBACM,OAAO,CAAC,mBAAmB,CAAC;YACrC,OAAO,CAAC,mBAAmB,CAAC;eACzB,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI;;;sEAyBjC,CAAA"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,GAAG,GAAG;IAChB,MAAM,EAAE,GAAG,CAAC,OAAO,CAAA;IACnB,SAAS,EAAE,GAAG,CAAC,OAAO,CAAA;IACtB,IAAI,EAAE,MAAM,CAAA;IACZ,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AA6CD,eAAO,MAAM,IAAI;UACT,GAAG,EAAE;qBACM,OAAO,CAAC,mBAAmB,CAAC;YACrC,OAAO,CAAC,mBAAmB,CAAC;eACzB,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI;IACjC,2EAA2E;gBAC/D,MAAM;IAClB,mEAAmE;kBACrD,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI;IACnC,0DAA0D;WACnD,MAAM,GAAG,MAAM;IACtB,mDAAmD;kBACrC,YAAY,GAAG,UAAU;IACvC,2DAA2D;cACjD,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI;IAC/B,wFAAwF;YAChF,MAAM,IAAI;;;;;sEAkNlB,CAAA"}