@cccsaurora/howler-ui 2.18.0-dev.841 → 2.19.0-cases.1040

package/components/app/providers/SearchResponseProvider.d.ts

@@ -0,0 +1,21 @@
+import type { HowlerSearchRequest, HowlerSearchResponse } from '@cccsaurora/howler-ui/api/search';
+import type { DispatchApiConfig } from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { type PropsWithChildren } from 'react';
+export type SearchResponseState<T> = HowlerSearchResponse<T> & {
+    removeCount: number;
+};
+export type SearchResponseContextType<T> = {
+    push: (item: T) => void;
+    remove: (id: string) => void;
+    replace: (id: string, item: T) => void;
+    request: (endpoint: (request: HowlerSearchRequest) => Promise<HowlerSearchResponse<T>>, requestData: HowlerSearchRequest, config?: DispatchApiConfig) => Promise<HowlerSearchResponse<T>>;
+    getSearchRequestData: (requestData: Partial<HowlerSearchRequest>) => Partial<HowlerSearchRequest>;
+    response: SearchResponseState<T> | null;
+};
+export declare const SearchResponseContext: import("react").Context<SearchResponseContextType<any>>;
+type SearchResponseProviderProps<T> = PropsWithChildren<{
+    idField: string;
+    initialResponse?: SearchResponseState<T>;
+}>;
+declare const SearchResponseProvider: <T>({ children, idField: idField, initialResponse }: SearchResponseProviderProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default SearchResponseProvider;

package/components/app/providers/SearchResponseProvider.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { createContext, useCallback, useState } from 'react';
+export const SearchResponseContext = createContext(null);
+const SearchResponseProvider = ({ children, idField: idField, initialResponse = null }) => {
+    const { dispatchApi } = useMyApi();
+    const [response, setResponse] = useState(initialResponse);
+    const request = useCallback(async (endpoint, requestData, config) => {
+        const _response = await dispatchApi(endpoint(requestData), config);
+        setResponse(_prevResponse => ({
+            ..._response,
+            removeCount: _response.offset <= _prevResponse?.offset ? 0 : (_prevResponse?.removeCount ?? 0)
+        }));
+        return _response;
+    }, [dispatchApi]);
+    const getSearchRequestData = useCallback((requestData) => {
+        const modifiedRequest = { ...requestData };
+        if (response?.removeCount) {
+            if (response.offset < modifiedRequest.offset) {
+                modifiedRequest.offset = Math.max(0, modifiedRequest.offset - response.removeCount);
+            }
+        }
+        return modifiedRequest;
+    }, [response]);
+    const push = useCallback((item) => {
+        setResponse(_response => {
+            if (_response === null) {
+                return _response;
+            }
+            const filteredItems = _response.items.filter(v => v[idField] !== item[idField]);
+            const itemExists = filteredItems.length < _response.items.length;
+            filteredItems.push(item);
+            return {
+                items: filteredItems.length <= _response.rows ? filteredItems : _response.items,
+                offset: _response.offset,
+                rows: _response.rows,
+                total: itemExists ? _response.total : _response.total + 1,
+                removeCount: itemExists ? _response.removeCount : Math.max(_response.removeCount - 1, 0)
+            };
+        });
+    }, [idField]);
+    const replace = useCallback((id, item) => {
+        if (item[idField] !== undefined && id !== item[idField]) {
+            throw new Error('Item id is defined but id does not match the id provided to replace function');
+        }
+        const newItem = {
+            ...item,
+            [idField]: item[idField] !== undefined ? item[idField] : id
+        };
+        setResponse(_response => {
+            if (_response === null) {
+                return _response;
+            }
+            return {
+                items: _response.items.map(v => (v[idField] === id ? newItem : v)),
+                offset: _response.offset,
+                rows: _response.rows,
+                total: _response.total,
+                removeCount: _response.removeCount
+            };
+        });
+    }, [idField]);
+    const remove = useCallback((id) => {
+        setResponse(_response => {
+            if (_response === null) {
+                return _response;
+            }
+            const filteredItems = _response.items.filter(v => v[idField] !== id);
+            const itemExists = filteredItems.length < _response.items.length;
+            return {
+                items: filteredItems,
+                offset: _response.offset,
+                rows: _response.rows,
+                total: itemExists ? _response.total - 1 : _response.total,
+                removeCount: itemExists ? _response.removeCount + 1 : _response.removeCount
+            };
+        });
+    }, [idField]);
+    return (_jsx(SearchResponseContext.Provider, { value: { push, remove, replace, request, getSearchRequestData, response }, children: children }));
+};
+export default SearchResponseProvider;

package/components/app/providers/SearchResponseProvider.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/app/providers/SearchResponseProvider.test.js

@@ -0,0 +1,406 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { act, renderHook } from '@testing-library/react';
+import { useContext } from 'react';
+import SearchResponseProvider, { SearchResponseContext } from './SearchResponseProvider';
+const TEST_PAGE_SIZE = 25;
+const TEST_TOTAL_COUNT = 100;
+const makeWrapper = (initialResponse) => {
+    const Wrapper = ({ children }) => (_jsx(SearchResponseProvider, { idField: "id", initialResponse: initialResponse, children: children }));
+    return Wrapper;
+};
+const renderProvider = (initialResponse) => {
+    return renderHook(() => useContext(SearchResponseContext), {
+        wrapper: makeWrapper(initialResponse)
+    });
+};
+describe('push', () => {
+    it("should add an item to the response if it doesn't exist", () => {
+        const hook = renderProvider({
+            items: [{ id: '0', name: 'existing' }],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 0
+        });
+        act(() => {
+            hook.result.current.push({ id: '1', name: 'test' });
+        });
+        expect(hook.result.current.response).toEqual({
+            items: [
+                { id: '0', name: 'existing' },
+                { id: '1', name: 'test' }
+            ],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT + 1,
+            removeCount: 0
+        });
+    });
+    it('should replace an item in the response if it already exists', () => {
+        const hook = renderProvider({
+            items: [{ id: '0', name: 'old' }],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 0
+        });
+        act(() => {
+            hook.result.current.push({ id: '0', name: 'new' });
+        });
+        expect(hook.result.current.response).toEqual({
+            items: [{ id: '0', name: 'new' }],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 0
+        });
+    });
+    it('should update total but not add item if the response has the maximum number of items', () => {
+        const items = Array.from({ length: TEST_PAGE_SIZE }, (_, i) => ({ id: i.toString(), name: `item${i}` }));
+        const newItem = { id: TEST_PAGE_SIZE.toString(), name: 'test' };
+        const hook = renderProvider({
+            items,
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 0
+        });
+        act(() => {
+            hook.result.current.push(newItem);
+        });
+        expect(hook.result.current.response?.items).not.toContainEqual(newItem);
+        expect(hook.result.current.response).toEqual({
+            items,
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT + 1,
+            removeCount: 0
+        });
+    });
+    it('should decrement removeCount if the item does not exist already', () => {
+        const hook = renderProvider({
+            items: [{ id: '0', name: 'existing' }],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 1
+        });
+        act(() => {
+            hook.result.current.push({ id: '1', name: 'test' });
+        });
+        expect(hook.result.current.response).not.toBeNull();
+        expect(hook.result.current.response.removeCount).toBe(0);
+    });
+    it('should not decrement removeCount if the item already exists', () => {
+        const hook = renderProvider({
+            items: [{ id: '0', name: 'existing' }],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 1
+        });
+        act(() => {
+            hook.result.current.push({ id: '0', name: 'new' });
+        });
+        expect(hook.result.current.response).not.toBeNull();
+        expect(hook.result.current.response.removeCount).toBe(1);
+    });
+    it('should keep response null if it is uninitiated', () => {
+        const hook = renderProvider();
+        act(() => {
+            hook.result.current.push({ id: '0', name: 'test' });
+        });
+        expect(hook.result.current.response).toBeNull();
+    });
+});
+describe('remove', () => {
+    it('should remove an item from the response if it exists', () => {
+        const hook = renderProvider({
+            items: [
+                { id: '0', name: 'item0' },
+                { id: '1', name: 'item1' }
+            ],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 0
+        });
+        act(() => {
+            hook.result.current.remove('0');
+        });
+        expect(hook.result.current.response).toEqual({
+            items: [{ id: '1', name: 'item1' }],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT - 1,
+            removeCount: 1
+        });
+    });
+    it('should ignore the remove if the item does not exist', () => {
+        const hook = renderProvider({
+            items: [{ id: '0', name: 'item' }],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 0
+        });
+        act(() => {
+            hook.result.current.remove('1');
+        });
+        expect(hook.result.current.response).toEqual({
+            items: [{ id: '0', name: 'item' }],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 0
+        });
+    });
+    it('should keep response null if it is uninitiated', () => {
+        const hook = renderProvider();
+        act(() => {
+            hook.result.current.remove('0');
+        });
+        expect(hook.result.current.response).toBeNull();
+    });
+});
+describe('replace', () => {
+    it('should replace an item in the response if it exists', () => {
+        const hook = renderProvider({
+            items: [{ id: '0', name: 'old' }],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 0
+        });
+        act(() => {
+            hook.result.current.replace('0', { id: undefined, name: 'new' });
+        });
+        expect(hook.result.current.response).toEqual({
+            items: [{ id: '0', name: 'new' }],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 0
+        });
+    });
+    it('should ignore the replace if the item does not exist', () => {
+        const hook = renderProvider({
+            items: [{ id: '0', name: 'item' }],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 0
+        });
+        act(() => {
+            hook.result.current.replace('1', { id: undefined, name: 'new' });
+        });
+        expect(hook.result.current.response).not.toContainEqual({ id: '1', name: 'new' });
+        expect(hook.result.current.response).toEqual({
+            items: [{ id: '0', name: 'item' }],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 0
+        });
+    });
+    it('should keep response null if it is uninitiated', () => {
+        const hook = renderProvider();
+        act(() => {
+            hook.result.current.replace('0', { id: '0', name: 'new' });
+        });
+        expect(hook.result.current.response).toBeNull();
+    });
+    it('should throw error if item id does not match the id provided', () => {
+        const hook = renderProvider({
+            items: [{ id: '0', name: 'old' }],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 0
+        });
+        expect(() => act(() => {
+            hook.result.current.replace('0', { id: '1', name: 'new' });
+        })).toThrow(/id does not match/);
+    });
+});
+describe('request', () => {
+    const apiSearchMock = vi.fn();
+    beforeEach(() => {
+        apiSearchMock.mockReset();
+    });
+    it('should update the response with the result of the request', async () => {
+        const hook = renderProvider({
+            items: [{ id: '0', name: 'item' }],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 0
+        });
+        const request = {
+            query: 'test',
+            rows: TEST_PAGE_SIZE,
+            offset: 0
+        };
+        apiSearchMock.mockResolvedValue({
+            items: [{ id: '1', name: 'new' }],
+            offset: request.offset,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT
+        });
+        await act(async () => {
+            await hook.result.current.request(apiSearchMock, request);
+        });
+        expect(apiSearchMock).toHaveBeenCalledWith(request);
+        expect(hook.result.current.response).toEqual({
+            items: [{ id: '1', name: 'new' }],
+            offset: request.offset,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 0
+        });
+    });
+    it.for([
+        { description: 'before', offset: 0 },
+        { description: 'the same as', offset: TEST_PAGE_SIZE }
+    ])('should reset removeCount if the offset is $description the current offset', async ({ offset }) => {
+        const hook = renderProvider({
+            items: [{ id: '0', name: 'item' }],
+            offset: TEST_PAGE_SIZE,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 5
+        });
+        const request = {
+            query: 'test',
+            rows: TEST_PAGE_SIZE,
+            offset: offset
+        };
+        apiSearchMock.mockResolvedValue({
+            items: [{ id: '1', name: 'new' }],
+            offset: request.offset,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT
+        });
+        await act(async () => {
+            await hook.result.current.request(apiSearchMock, request);
+        });
+        expect(apiSearchMock).toHaveBeenCalledWith(request);
+        expect(hook.result.current.response).toEqual({
+            items: [{ id: '1', name: 'new' }],
+            offset: request.offset,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 0
+        });
+    });
+    it('should not reset removeCount if the offset is after the current offset', async () => {
+        const hook = renderProvider({
+            items: [{ id: '0', name: 'item' }],
+            offset: TEST_PAGE_SIZE,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 5
+        });
+        const request = {
+            query: 'test',
+            rows: TEST_PAGE_SIZE,
+            offset: TEST_PAGE_SIZE * 2
+        };
+        apiSearchMock.mockResolvedValue({
+            items: [{ id: '1', name: 'new' }],
+            offset: request.offset,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT
+        });
+        await act(async () => {
+            await hook.result.current.request(apiSearchMock, request);
+        });
+        expect(apiSearchMock).toHaveBeenCalledWith(request);
+        expect(hook.result.current.response).toEqual({
+            items: [{ id: '1', name: 'new' }],
+            offset: request.offset,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 5
+        });
+    });
+    it('should keep response undefined if the request fails', async () => {
+        const hook = renderProvider();
+        const request = {
+            query: 'test',
+            rows: TEST_PAGE_SIZE,
+            offset: 0
+        };
+        apiSearchMock.mockRejectedValue(new Error('Request failed'));
+        await act(async () => {
+            await hook.result.current.request(apiSearchMock, request).catch(() => { });
+        });
+        expect(apiSearchMock).toHaveBeenCalledWith(request);
+        expect(hook.result.current.response).toBeNull();
+    });
+    it('should keep response unchanged if the request fails', async () => {
+        const initialResponse = {
+            items: [{ id: '0', name: 'item' }],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 5
+        };
+        const hook = renderProvider(initialResponse);
+        const request = {
+            query: 'test',
+            rows: TEST_PAGE_SIZE,
+            offset: 0
+        };
+        apiSearchMock.mockRejectedValue(new Error('Request failed'));
+        await act(async () => {
+            await hook.result.current.request(apiSearchMock, request).catch(() => { });
+        });
+        expect(apiSearchMock).toHaveBeenCalledWith(request);
+        expect(hook.result.current.response).toEqual(initialResponse);
+    });
+    it('should throw an error if the request throws an error', async () => {
+        const hook = renderProvider();
+        const request = {
+            query: 'test',
+            rows: TEST_PAGE_SIZE,
+            offset: 0
+        };
+        apiSearchMock.mockRejectedValue(new Error('Request failed'));
+        await expect(act(async () => {
+            await hook.result.current.request(apiSearchMock, request);
+        })).rejects.toThrow('Request failed');
+    });
+});
+describe('getSearchRequestData', () => {
+    it.for([
+        { description: 'no remove count', removeCount: 0 },
+        { description: 'with remove count', removeCount: 5 }
+    ])('should modify offset if it is provided - $description', ({ removeCount }) => {
+        const hook = renderProvider({
+            items: [],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: removeCount
+        });
+        const modifiedRequest = hook.result.current.getSearchRequestData({ offset: TEST_PAGE_SIZE });
+        expect(modifiedRequest.offset).toBe(TEST_PAGE_SIZE - removeCount);
+    });
+    it('should not modify offset if it is not provided', () => {
+        const hook = renderProvider({
+            items: [],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 5
+        });
+        const modifiedRequest = hook.result.current.getSearchRequestData({ query: 'value' });
+        expect(modifiedRequest.offset).not.toBeDefined();
+    });
+    it('should not modify offset if response is uninitialised', () => {
+        const hook = renderProvider();
+        const modifiedRequest = hook.result.current.getSearchRequestData({ offset: TEST_PAGE_SIZE });
+        expect(modifiedRequest.offset).toBe(TEST_PAGE_SIZE);
+    });
+});

package/components/app/providers/ViewProvider.test.js

@@ -151,7 +151,10 @@ describe('ViewContext', () => {
         it('should allow users to edit views', async () => {
             const result = await act(async () => hook.result.current('example_view_id', { query: DEFAULT_QUERY }));
             expect(hput).toHaveBeenCalledOnce();
-            expect(hput).toBeCalledWith('/api/v1/view/example_view_id', { query: DEFAULT_QUERY });
+            const [url, body, ...rest] = vi.mocked(hput).mock.calls[0];
+            expect(url).toBe('/api/v1/view/example_view_id');
+            expect(body).toEqual({ query: DEFAULT_QUERY });
+            expect(rest.every(v => v === undefined)).toBe(true);
             expect(result).toEqual(MOCK_RESPONSES['/api/v1/view/example_view_id']);
         });
     });

package/components/elements/addons/buttons/CustomButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/elements/addons/buttons/CustomButton.test.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import { setupReactRouterMock } from '@cccsaurora/howler-ui/tests/mocks';
+import { vi } from 'vitest';
+setupReactRouterMock();
+import CustomButton from './CustomButton';
+describe('CustomButton', () => {
+    afterAll(() => vi.resetModules());
+    describe('rendering', () => {
+        it('renders a button element', () => {
+            render(_jsx(CustomButton, { children: "Click me" }));
+            expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
+        });
+        it('renders with MUI Button classes', () => {
+            render(_jsx(CustomButton, { children: "Test" }));
+            expect(screen.getByRole('button')).toHaveClass('MuiButton-root');
+        });
+        it('renders children text', () => {
+            render(_jsx(CustomButton, { children: "My Button" }));
+            expect(screen.getByText('My Button')).toBeInTheDocument();
+        });
+    });
+    describe('variants', () => {
+        it('renders contained variant', () => {
+            render(_jsx(CustomButton, { variant: "contained", children: "Contained" }));
+            expect(screen.getByRole('button')).toHaveClass('MuiButton-contained');
+        });
+        it('renders outlined variant', () => {
+            render(_jsx(CustomButton, { variant: "outlined", children: "Outlined" }));
+            expect(screen.getByRole('button')).toHaveClass('MuiButton-outlined');
+        });
+        it('renders text variant', () => {
+            render(_jsx(CustomButton, { variant: "text", children: "Text" }));
+            expect(screen.getByRole('button')).toHaveClass('MuiButton-text');
+        });
+    });
+    describe('MUI color prop', () => {
+        it('renders with primary color by default', () => {
+            render(_jsx(CustomButton, { children: "Primary" }));
+            expect(screen.getByRole('button')).toHaveClass('MuiButton-colorPrimary');
+        });
+        it('renders with secondary color', () => {
+            render(_jsx(CustomButton, { color: "secondary", children: "Secondary" }));
+            expect(screen.getByRole('button')).toHaveClass('MuiButton-colorSecondary');
+        });
+        it('renders with error color', () => {
+            render(_jsx(CustomButton, { color: "error", children: "Error" }));
+            expect(screen.getByRole('button')).toHaveClass('MuiButton-colorError');
+        });
+        it('renders with inherit color for custom hex colors', () => {
+            render(_jsx(CustomButton, { color: "#ff0000", children: "Custom" }));
+            expect(screen.getByRole('button')).toHaveClass('MuiButton-colorInherit');
+        });
+    });
+    describe('progress', () => {
+        it('shows a progress indicator when progress is true', () => {
+            render(_jsx(CustomButton, { progress: true, children: "Loading" }));
+            expect(screen.getByRole('progressbar')).toBeInTheDocument();
+        });
+        it('does not show a progress indicator when progress is false', () => {
+            render(_jsx(CustomButton, { progress: false, children: "Not Loading" }));
+            expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
+        });
+    });
+    describe('tooltip', () => {
+        it('wraps button in a tooltip when tooltip prop is provided', () => {
+            render(_jsx(CustomButton, { tooltip: "Help text", children: "Hover me" }));
+            // Tooltip wraps in a span
+            const button = screen.getByRole('button');
+            expect(button.closest('span')).toBeInTheDocument();
+        });
+    });
+    describe('routing', () => {
+        it('wraps button in a Link when route prop is provided', () => {
+            render(_jsx(CustomButton, { route: "/test-route", children: "Navigate" }));
+            const link = screen.getByRole('link');
+            expect(link).toHaveAttribute('href', '/test-route');
+        });
+        it('wraps button in an anchor tag when href prop is provided', () => {
+            render(_jsx(CustomButton, { href: "https://example.com", children: "External" }));
+            const link = screen.getByRole('link');
+            expect(link).toHaveAttribute('href', 'https://example.com');
+        });
+        it('does not wrap button in link when neither route nor href is provided', () => {
+            render(_jsx(CustomButton, { children: "Plain" }));
+            expect(screen.queryByRole('link')).not.toBeInTheDocument();
+        });
+    });
+    describe('disabled state', () => {
+        it('renders disabled button when disabled prop is true', () => {
+            render(_jsx(CustomButton, { disabled: true, children: "Disabled" }));
+            expect(screen.getByRole('button')).toBeDisabled();
+        });
+    });
+    describe('sizes', () => {
+        it('renders small size', () => {
+            render(_jsx(CustomButton, { size: "small", children: "Small" }));
+            expect(screen.getByRole('button')).toHaveClass('MuiButton-sizeSmall');
+        });
+        it('renders large size', () => {
+            render(_jsx(CustomButton, { size: "large", children: "Large" }));
+            expect(screen.getByRole('button')).toHaveClass('MuiButton-sizeLarge');
+        });
+    });
+});

package/components/elements/addons/layout/FlexOne.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/elements/addons/layout/FlexOne.test.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import FlexOne from './FlexOne';
+describe('FlexOne', () => {
+    describe('rendering', () => {
+        it('renders a div element', () => {
+            const { container } = render(_jsx(FlexOne, {}));
+            expect(container.querySelector('div')).toBeInTheDocument();
+        });
+        it('applies flex: 1 style', () => {
+            const { container } = render(_jsx(FlexOne, {}));
+            expect(container.firstChild).toHaveStyle({ flex: '1' });
+        });
+        it('renders children inside the div', () => {
+            render(_jsx(FlexOne, { children: _jsx("span", { id: "inner", children: "hello" }) }));
+            expect(screen.getByTestId('inner')).toBeInTheDocument();
+        });
+        it('renders without children without error', () => {
+            const { container } = render(_jsx(FlexOne, {}));
+            expect(container.firstChild).toBeInTheDocument();
+            expect(container.firstChild).toBeEmptyDOMElement();
+        });
+        it('renders multiple children', () => {
+            render(_jsxs(FlexOne, { children: [_jsx("span", { id: "a", children: "A" }), _jsx("span", { id: "b", children: "B" })] }));
+            expect(screen.getByTestId('a')).toBeInTheDocument();
+            expect(screen.getByTestId('b')).toBeInTheDocument();
+        });
+    });
+});

package/components/elements/addons/lists/TuiListBase.js

@@ -30,6 +30,10 @@ const TuiListBaseRoot = styled('div')(({ theme }) => ({
             display: 'flex',
             backgroundColor: emphasize(theme.palette.background.default, 0.04)
         }
+    },
+    '.elementDisabled': {
+        color: theme.palette.text.disabled,
+        cursor: 'default'
     }
 }));
 const TuiListBase = ({ keyboard = false, onSelect, children }) => {