@cccsaurora/howler-ui 2.19.0-dev.989 → 2.19.0

package/components/elements/{hit/HitDetails.js → ObjectDetails.js}

@@ -5,12 +5,12 @@ import { ArrowDropDown, InfoOutlined } from '@mui/icons-material';
 import { Accordion, AccordionDetails, AccordionSummary, Box, Divider, Grid, Stack, TextField, Tooltip, Typography, useTheme } from '@mui/material';
 import { flatten } from 'flat';
 import Fuse from 'fuse.js';
-import { capitalize, groupBy, isArray, isEmpty, isNull, isObject, isPlainObject, isUndefined, max, sortBy, uniq } from 'lodash-es';
+import { capitalize, groupBy, isArray, isBoolean, isEmpty, isNull, isNumber, isObject, isPlainObject, isUndefined, max, sortBy, uniq } from 'lodash-es';
 import { memo, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Throttler from '@cccsaurora/howler-ui/utils/Throttler';
-import PluginTypography from '../PluginTypography';
-const ListRenderer = memo(({ hit, objKey: key, entries, maxKeyLength }) => {
+import PluginTypography from './PluginTypography';
+const ListRenderer = memo(({ obj, objKey: key, entries, maxKeyLength }) => {
     const theme = useTheme();
     const { t } = useTranslation();
     const allPrimitives = useMemo(() => entries.every(entry => !isObject(entry)), [entries]);
@@ -36,15 +36,15 @@ const ListRenderer = memo(({ hit, objKey: key, entries, maxKeyLength }) => {
                         marginBottom: allPrimitives ? 0 : theme.spacing(1)
                     }, children: allPrimitives ? key.padStart(maxKeyLength ?? key.length) : key }) }), _jsxs(Grid, { container: true, spacing: allPrimitives ? 1 : 4, ml: allPrimitives ? -1 : -4, overflow: "hidden", maxWidth: "100%", children: [uniqueEntries.map((entry, index) => {
                         if (Array.isArray(entry)) {
-                            return (_jsx(Grid, { item: true, xs: "auto", maxWidth: "100%", children: _jsx(ListRenderer, { hit: hit, objKey: `${key}.${index}`, entries: entry }) }, index));
+                            return (_jsx(Grid, { item: true, xs: "auto", maxWidth: "100%", children: _jsx(ListRenderer, { obj: obj, objKey: `${key}.${index}`, entries: entry }) }, index));
                         }
                         if (isPlainObject(entry)) {
                             return (_jsx(Grid, { item: true, xs: 'auto', maxWidth: "100%", minWidth: "350px", children: _jsx(ObjectRenderer, { parentKey: `${key}.${index}`, indent: true, data: entry }) }, index));
                         }
-                        return (_jsxs(Grid, { item: true, maxWidth: "100%", className: `${key}_${index}`.replace(/\./g, '_'), component: "code", display: "flex", flexDirection: "row", children: [_jsx(PluginTypography, { context: "details", component: "code", style: { maxWidth: '100%', font: 'inherit' }, value: entry, field: key.replace(/\.[0-9]+/g, ''), hit: hit, children: entry }), allPrimitives && index < uniqueEntries.length - 1 && _jsx("span", { children: "," })] }, entry));
+                        return (_jsxs(Grid, { item: true, maxWidth: "100%", className: `${key}_${index}`.replace(/\./g, '_'), component: "code", display: "flex", flexDirection: "row", children: [_jsx(PluginTypography, { context: "details", component: "code", style: { maxWidth: '100%', font: 'inherit' }, value: entry, field: key.replace(/\.[0-9]+/g, ''), obj: obj, children: entry }), allPrimitives && index < uniqueEntries.length - 1 && _jsx("span", { children: "," })] }, entry));
                     }), omittedDuplicates && (_jsx(Grid, { item: true, display: "flex", alignItems: "center", children: _jsx(Tooltip, { title: t('duplicates.omitted'), children: _jsx(InfoOutlined, { sx: { fontSize: '20px', ml: 1 }, color: "disabled" }) }) }))] })] }));
 });
-const ObjectRenderer = memo(({ hit, data, parentKey, indent = false }) => {
+const ObjectRenderer = memo(({ obj, data, parentKey, indent = false }) => {
     const theme = useTheme();
     const entries = useMemo(() => {
         const unsorted = Object.entries(flatten(data, { safe: true })).map(([key, val]) => [key, val]);
@@ -56,10 +56,10 @@ const ObjectRenderer = memo(({ hit, data, parentKey, indent = false }) => {
     }, [data]);
     const longestKey = useMemo(() => max(entries.map(([key]) => key.length)), [entries]);
     return (_jsxs(Stack, { direction: "row", overflow: "hidden", maxWidth: "100%", children: [indent && _jsx(Divider, { orientation: "vertical", flexItem: true, sx: { borderColor: 'primary.main', borderWidth: '2px' } }), _jsx(Stack, { flex: 1, ml: 1, maxWidth: "100%", children: entries
-                    .filter(([__, val]) => !isNull(val) && !isUndefined(val) && !isEmpty(val))
+                    .filter(([__, val]) => !isNull(val) && !isUndefined(val) && !isEmpty(val) && !isBoolean(val) && !isNumber(val))
                     .map(([key, val]) => {
                     if (Array.isArray(val)) {
-                        return _jsx(ListRenderer, { hit: hit, maxKeyLength: longestKey, objKey: key, entries: val }, key);
+                        return _jsx(ListRenderer, { obj: obj, maxKeyLength: longestKey, objKey: key, entries: val }, key);
                     }
                     return (_jsxs("code", { className: (parentKey ? `${parentKey}.${key}` : key).replace(/\./g, '_'), style: {
                             display: 'grid',
@@ -75,14 +75,14 @@ const ObjectRenderer = memo(({ hit, data, parentKey, indent = false }) => {
                                     paddingRight: theme.spacing(1),
                                     height: '100%',
                                     wordWrap: 'break-word'
-                                }, children: _jsx("code", { style: { maxWidth: '100%' }, children: key }) }), _jsx(Box, { display: "flex", alignItems: "start", children: _jsx(PluginTypography, { context: "details", component: "code", style: { maxWidth: '100%', font: 'inherit' }, value: val, field: (parentKey ? parentKey.concat('.', key) : key).replace(/\.[0-9]+/g, ''), hit: hit, children: val }) })] }, key));
+                                }, children: _jsx("code", { style: { maxWidth: '100%' }, children: key }) }), _jsx(Box, { display: "flex", alignItems: "start", children: _jsx(PluginTypography, { context: "details", component: "code", style: { maxWidth: '100%', font: 'inherit' }, value: val, field: (parentKey ? parentKey.concat('.', key) : key).replace(/\.[0-9]+/g, ''), obj: obj, children: val }) })] }, key));
                 }) })] }));
 });
-const Collapsible = memo(({ hit, title, data, query }) => {
+const Collapsible = memo(({ obj, title, data, query }) => {
     const throttler = useMemo(() => new Throttler(400), []);
     const [scores, setScores] = useState([]);
     const [results, setResults] = useState({});
-    const options = useMemo(() => Object.entries(data).map(([key, value]) => ({ key, value })), [data]);
+    const options = useMemo(() => Object.entries(data).map(([key, value]) => ({ key, value: value.toString() })), [data]);
     const keys = useMemo(() => options
         .flatMap(option => (isArray(option.value) ? Object.keys(flatten(option.value)) : []))
         .map(key => key.replace(/\d+/g, 'value'))
@@ -109,20 +109,20 @@ const Collapsible = memo(({ hit, title, data, query }) => {
     if (isEmpty(results)) {
         return null;
     }
-    return (_jsxs(Accordion, { defaultExpanded: true, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ArrowDropDown, {}), children: _jsx(Typography, { children: title }) }), _jsx(AccordionDetails, { children: _jsx(Stack, { spacing: 1, justifyContent: "stretch", sx: styles, children: _jsx(ObjectRenderer, { hit: hit, showParentKey: true, data: results }) }) })] }));
+    return (_jsxs(Accordion, { defaultExpanded: true, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ArrowDropDown, {}), sx: { my: 0 }, children: _jsx(Typography, { children: title }) }), _jsx(AccordionDetails, { children: _jsx(Stack, { spacing: 0.5, justifyContent: "stretch", sx: styles, children: _jsx(ObjectRenderer, { obj: obj, showParentKey: true, data: results }) }) })] }));
 });
-const HitDetails = ({ hit }) => {
+const ObjectDetails = ({ obj }) => {
     const { t } = useTranslation();
     const [query, setQuery] = useState('');
-    const groups = useMemo(() => groupBy(Object.entries(flatten(hit ?? {}, { safe: true })).filter(([key, value]) => !key.startsWith('__') &&
+    const groups = useMemo(() => groupBy(Object.entries(flatten(obj ?? {}, { safe: true })).filter(([key, value]) => !key.startsWith('__') &&
         key.includes('.') &&
         ['howler', 'labels'].every(prefix => !key.startsWith(prefix)) &&
-        !isEmpty(value)), ([key]) => key.split('.')[0]), [hit]);
+        (!isEmpty(value) || isNumber(value) || isBoolean(value))), ([key]) => key.split('.')[0]), [obj]);
     return (_jsxs(Stack, { spacing: 1, children: [_jsx(TextField, { value: query, onChange: event => setQuery(event.target.value), label: t('overview.search') }), Object.entries(groups).map(([section, entries]) => {
-                return (_jsx(Collapsible, { hit: hit, query: query, title: section
+                return (_jsx(Collapsible, { obj: obj, query: query, title: section
                         .split('_')
                         .map(word => capitalize(word))
                         .join(' '), data: Object.fromEntries(entries) }, section));
             })] }));
 };
-export default memo(HitDetails);
+export default memo(ObjectDetails);

package/components/elements/PluginChip.d.ts

@@ -1,6 +1,6 @@
 import { type ChipProps } from '@mui/material';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-import { type FC } from 'react';
+import type { FC } from 'react';
 export type PluginChipProps = ChipProps & {
     value: string;
     context: string;

package/components/elements/PluginChip.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Chip } from '@mui/material';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
-import {} from 'react';
 import { usePluginStore } from 'react-pluggable';
 const PluginChip = ({ children, value, context, field, hit, ...props }) => {
     const pluginStore = usePluginStore();

package/components/elements/PluginTypography.d.ts

@@ -1,10 +1,11 @@
 import { type TypographyProps } from '@mui/material';
+import type { Event } from '@cccsaurora/howler-ui/models/entities/generated/Event';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
 export type PluginTypographyProps = TypographyProps & {
     value: string;
     context: string;
     field?: string;
-    hit?: Hit;
+    obj?: Hit | Event;
 };
 declare const _default: import("react").NamedExoticComponent<PluginTypographyProps>;
 export default _default;

package/components/elements/PluginTypography.js

@@ -3,7 +3,7 @@ import { Typography } from '@mui/material';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
 import { memo } from 'react';
 import { usePluginStore } from 'react-pluggable';
-const PluginTypography = ({ children, value, context, field, hit, ...props }) => {
+const PluginTypography = ({ children, value, context, field, obj, ...props }) => {
     const pluginStore = usePluginStore();
     for (const plugin of howlerPluginStore.plugins) {
         const component = pluginStore.executeFunction(`${plugin}.typography`, {
@@ -11,7 +11,8 @@ const PluginTypography = ({ children, value, context, field, hit, ...props }) =>
             value,
             context,
             field,
-            hit,
+            hit: obj,
+            obj,
             ...props
         });
         if (component) {

package/components/elements/UserList.d.ts

@@ -2,8 +2,11 @@ import type { SxProps, Theme } from '@mui/material';
 import type { FC } from 'react';
 declare const UserList: FC<{
     buttonSx?: SxProps<Theme>;
-    userId: string;
-    onChange: (userId: string) => void;
+    userIds: string[];
+    onChange: (userIds: string[]) => void;
     i18nLabel: string;
+    avatarHeight?: number;
+    disabled?: boolean;
+    multiple?: boolean;
 }>;
 export default UserList;

package/components/elements/UserList.js

@@ -1,26 +1,43 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Autocomplete, Box, IconButton, Popover, TextField, Typography } from '@mui/material';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Add } from '@mui/icons-material';
+import { Autocomplete, AvatarGroup, Box, IconButton, Popover, Stack, TextField, Typography } from '@mui/material';
 import { UserListContext } from '@cccsaurora/howler-ui/components/app/providers/UserListProvider';
+import { uniq } from 'lodash-es';
 import { useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import HowlerAvatar from './display/HowlerAvatar';
-const UserList = ({ buttonSx = {}, userId, onChange, i18nLabel }) => {
+const UserList = ({ buttonSx = {}, userIds, onChange, i18nLabel, avatarHeight = 32, multiple = false, disabled = false }) => {
     const { t } = useTranslation();
     const [anchorEl, setAnchorEl] = useState(null);
-    const { users, searchUsers } = useContext(UserListContext);
-    const userIds = useMemo(() => Object.keys(users), [users]);
+    const { users, fetchUsers } = useContext(UserListContext);
+    const allUserIds = useMemo(() => Object.keys(users), [users]);
     useEffect(() => {
-        searchUsers('uname:*');
-    }, [searchUsers]);
-    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { sx: buttonSx, onClick: e => setAnchorEl(e.currentTarget), children: _jsx(HowlerAvatar, { userId: userId }) }), _jsx(Popover, { open: !!anchorEl, onClose: () => setAnchorEl(null), anchorEl: anchorEl, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, children: _jsx(Box, { sx: { p: 2 }, children: _jsx(Autocomplete, { sx: { minWidth: '300px' }, options: userIds, renderInput: params => _jsx(TextField, { ...params, label: t(i18nLabel), size: "small" }), renderOption: (props, _userId) => {
-                            const user = users[_userId];
-                            return (_jsx("li", { ...props, children: _jsxs(Box, { sx: {
-                                        display: 'grid',
-                                        gridTemplateColumns: 'auto 1fr',
-                                        gridTemplateRows: 'auto auto',
-                                        gridTemplateAreas: `"profile name"\n"profile email"`,
-                                        columnGap: 1.5
-                                    }, children: [_jsx(HowlerAvatar, { sx: { gridArea: 'profile', alignSelf: 'center', height: '32px', width: '32px' }, userId: user.username }), _jsx(Typography, { sx: { gridArea: 'name' }, variant: "body1", children: user.name }), _jsx(Typography, { sx: { gridArea: 'email' }, variant: "caption", children: user.email })] }) }));
-                        }, value: userId, onChange: (__, option) => onChange(option) }) }) })] }));
+        fetchUsers(new Set(userIds));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [userIds]);
+    const renderInput = params => _jsx(TextField, { ...params, label: t(i18nLabel), size: "small" });
+    const renderOption = (props, optionUserId) => {
+        const { key, ...optionProps } = props;
+        const user = users[optionUserId];
+        return (_jsx("li", { ...optionProps, children: _jsxs(Box, { sx: {
+                    display: 'grid',
+                    gridTemplateColumns: 'auto 1fr',
+                    gridTemplateRows: 'auto auto',
+                    gridTemplateAreas: `"profile name"\n"profile email"`,
+                    columnGap: 1.5
+                }, children: [_jsx(HowlerAvatar, { sx: { gridArea: 'profile', alignSelf: 'center', height: '32px', width: '32px' }, userId: user?.username }), _jsx(Typography, { sx: { gridArea: 'name' }, variant: "body1", children: user?.name ?? optionUserId }), _jsx(Typography, { sx: { gridArea: 'email' }, variant: "caption", children: user?.email ?? '' })] }) }, key));
+    };
+    const sharedAutocompleteProps = {
+        disabled,
+        sx: { minWidth: '300px' },
+        options: allUserIds,
+        renderInput,
+        renderOption
+    };
+    return (_jsxs(_Fragment, { children: [multiple ? (_jsxs(Stack, { direction: "row", spacing: 0.25, alignItems: "center", children: [_jsx(AvatarGroup, { children: uniq(userIds ?? [null]).map(userId => (_jsx(HowlerAvatar, { userId: userId, sx: { height: avatarHeight, width: avatarHeight } }, userId))) }), _jsx(IconButton, { size: "small", sx: buttonSx, disabled: disabled, onClick: e => setAnchorEl(e.currentTarget), children: _jsx(Add, {}) })] })) : (_jsx(IconButton, { sx: buttonSx, disabled: disabled, onClick: e => setAnchorEl(e.currentTarget), children: _jsx(HowlerAvatar, { userId: userIds[0], sx: { height: avatarHeight, width: avatarHeight } }) })), _jsx(Popover, { open: !!anchorEl, onClose: () => setAnchorEl(null), anchorEl: anchorEl, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, children: _jsx(Box, { sx: { p: 2 }, children: multiple ? (_jsx(Autocomplete, { ...sharedAutocompleteProps, multiple: true, value: userIds, onChange: (__, options) => {
+                            onChange(options);
+                        } })) : (_jsx(Autocomplete, { ...sharedAutocompleteProps, value: userIds?.[0] ?? null, onChange: (__, option) => {
+                            onChange(option ? [option] : []);
+                        } })) }) })] }));
 };
 export default UserList;

package/components/elements/UserList.test.d.ts

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

package/components/elements/UserList.test.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { UserListContext } from '@cccsaurora/howler-ui/components/app/providers/UserListProvider';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        t: (key) => key
+    })
+}));
+vi.mock('components/elements/display/HowlerAvatar', () => ({
+    default: ({ userId }) => _jsx("div", { id: `avatar-${userId ?? 'none'}`, children: userId ?? 'none' })
+}));
+import UserList from './UserList';
+const mockFetchUsers = vi.fn();
+const defaultUsers = {
+    analystA: {
+        username: 'analystA',
+        name: 'Alice Analyst',
+        email: 'alice@example.com'
+    },
+    analystB: {
+        username: 'analystB',
+        name: 'Bob Analyst',
+        email: 'bob@example.com'
+    },
+    analystC: {
+        username: 'analystC',
+        name: 'Chris Analyst',
+        email: 'chris@example.com'
+    }
+};
+const createWrapper = (users) => {
+    const Wrapper = ({ children }) => (_jsx(UserListContext.Provider, { value: {
+            users,
+            fetchUsers: mockFetchUsers,
+            searchUsers: vi.fn()
+        }, children: children }));
+    return Wrapper;
+};
+describe('UserList', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+    it('fetches users on mount and whenever userIds change', async () => {
+        const onChange = vi.fn();
+        const { rerender } = render(_jsx(UserList, { i18nLabel: "user.list.label", userIds: ['analystA'], onChange: onChange }), {
+            wrapper: createWrapper(defaultUsers)
+        });
+        await waitFor(() => {
+            expect(mockFetchUsers).toHaveBeenCalledWith(new Set(['analystA']));
+        });
+        rerender(_jsx(UserList, { i18nLabel: "user.list.label", userIds: ['analystA', 'analystB'], onChange: onChange }));
+        await waitFor(() => {
+            expect(mockFetchUsers).toHaveBeenCalledWith(new Set(['analystA', 'analystB']));
+        });
+    });
+    it('opens the popover and selects a user in single mode', async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        render(_jsx(UserList, { i18nLabel: "user.list.label", userIds: ['analystA'], onChange: onChange }), {
+            wrapper: createWrapper(defaultUsers)
+        });
+        const avatarButton = screen.getByRole('button');
+        await user.click(avatarButton);
+        const combo = await screen.findByRole('combobox', { name: 'user.list.label' });
+        await user.click(combo);
+        const listbox = await screen.findByRole('listbox');
+        await user.click(within(listbox).getByText('Bob Analyst'));
+        expect(onChange).toHaveBeenCalledWith(['analystB']);
+    });
+    it('renders deduplicated avatars and appends selection in multiple mode', async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        render(_jsx(UserList, { i18nLabel: "user.list.label", userIds: ['analystA', 'analystA'], onChange: onChange, multiple: true }), {
+            wrapper: createWrapper(defaultUsers)
+        });
+        expect(screen.getAllByText('analystA')).toHaveLength(1);
+        const addButton = screen.getByRole('button');
+        await user.click(addButton);
+        const combo = await screen.findByRole('combobox', { name: 'user.list.label' });
+        await user.click(combo);
+        const listbox = await screen.findByRole('listbox');
+        await user.click(within(listbox).getByText('Bob Analyst'));
+        expect(onChange).toHaveBeenCalledWith(expect.arrayContaining(['analystA', 'analystB']));
+    });
+    it('does not open popover when disabled', async () => {
+        const onChange = vi.fn();
+        render(_jsx(UserList, { i18nLabel: "user.list.label", userIds: ['analystA'], onChange: onChange, disabled: true }), {
+            wrapper: createWrapper(defaultUsers)
+        });
+        const button = screen.getByRole('button');
+        expect(button).toBeDisabled();
+        expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
+    });
+    it('emits an empty list when single-select value is cleared', async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        render(_jsx(UserList, { i18nLabel: "user.list.label", userIds: ['analystA'], onChange: onChange }), {
+            wrapper: createWrapper(defaultUsers)
+        });
+        const avatarButton = screen.getByRole('button');
+        await user.click(avatarButton);
+        await screen.findByRole('combobox', { name: 'user.list.label' });
+        const clearButton = await screen.findByLabelText(/clear/i);
+        await user.click(clearButton);
+        expect(onChange).toHaveBeenCalledWith([]);
+    });
+    it('renders and opens with empty users context without crashing', async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        render(_jsx(UserList, { i18nLabel: "user.list.label", userIds: ['analystA'], onChange: onChange }), {
+            wrapper: createWrapper({})
+        });
+        expect(screen.getByText('analystA')).toBeInTheDocument();
+        const avatarButton = screen.getByRole('button');
+        await user.click(avatarButton);
+        const combo = await screen.findByRole('combobox', { name: 'user.list.label' });
+        await user.click(combo);
+        expect(screen.queryAllByRole('option')).toHaveLength(0);
+    });
+});

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

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

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

@@ -0,0 +1,81 @@
+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 CustomIconButton from './CustomIconButton';
+describe('CustomIconButton', () => {
+    afterAll(() => vi.resetModules());
+    describe('rendering', () => {
+        it('renders a button element', () => {
+            render(_jsx(CustomIconButton, { "aria-label": "test", children: "icon" }));
+            expect(screen.getByRole('button', { name: 'test' })).toBeInTheDocument();
+        });
+        it('renders children inside the button', () => {
+            render(_jsx(CustomIconButton, { children: "\u2605" }));
+            expect(screen.getByText('★')).toBeInTheDocument();
+        });
+        it('renders with MUI IconButton classes', () => {
+            render(_jsx(CustomIconButton, { children: "i" }));
+            expect(screen.getByRole('button')).toHaveClass('MuiIconButton-root');
+        });
+    });
+    describe('disabled state', () => {
+        it('is disabled when disabled prop is true', () => {
+            render(_jsx(CustomIconButton, { disabled: true, children: "icon" }));
+            expect(screen.getByRole('button')).toBeDisabled();
+        });
+        it('is disabled when progress is truthy', () => {
+            render(_jsx(CustomIconButton, { progress: true, children: "icon" }));
+            expect(screen.getByRole('button')).toBeDisabled();
+        });
+        it('is NOT disabled when progress is set but clickableWithProgress=true', () => {
+            render(_jsx(CustomIconButton, { progress: true, clickableWithProgress: true, children: "icon" }));
+            expect(screen.getByRole('button')).not.toBeDisabled();
+        });
+    });
+    describe('progress indicator', () => {
+        it('renders a CircularProgress when progress is truthy', () => {
+            render(_jsx(CustomIconButton, { progress: true, children: "icon" }));
+            // CircularProgress renders an svg with role="progressbar"
+            expect(document.querySelector('circle')).toBeInTheDocument();
+        });
+        it('does not render CircularProgress when progress is falsy', () => {
+            render(_jsx(CustomIconButton, { children: "icon" }));
+            expect(document.querySelector('[role="progressbar"]')).not.toBeInTheDocument();
+        });
+    });
+    describe('tooltip', () => {
+        it('wraps the button in a Tooltip when tooltip prop is provided', () => {
+            render(_jsx(CustomIconButton, { tooltip: "Save", children: "icon" }));
+            // The button is wrapped in a <span> when a Tooltip is used
+            const span = screen.getByRole('button').closest('span');
+            expect(span).toBeInTheDocument();
+        });
+        it('does not add a surrounding span when no tooltip is given', () => {
+            render(_jsx(CustomIconButton, { children: "icon" }));
+            const button = screen.getByRole('button');
+            // Without tooltip the immediate parent should NOT be a span wrapper
+            expect(button.parentElement?.tagName).not.toBe('SPAN');
+        });
+    });
+    describe('route link', () => {
+        it('wraps the button in a Link when route prop is provided', () => {
+            render(_jsx(CustomIconButton, { route: "/hits", children: "icon" }));
+            expect(screen.getByRole('link')).toBeInTheDocument();
+        });
+        it('does not render a link when no route is given', () => {
+            render(_jsx(CustomIconButton, { children: "icon" }));
+            expect(screen.queryByRole('link')).not.toBeInTheDocument();
+        });
+    });
+    describe('href link', () => {
+        it('wraps the button in an anchor tag when href is provided', () => {
+            render(_jsx(CustomIconButton, { href: "https://example.com", children: "icon" }));
+            const anchor = screen.getByRole('link');
+            expect(anchor).toBeInTheDocument();
+            expect(anchor).toHaveAttribute('href', 'https://example.com');
+        });
+    });
+});

package/components/elements/addons/buttons/index.d.ts

@@ -1,3 +1,3 @@
-export declare const MuiButtonColors: readonly ["inherit", "primary", "secondary", "success", "error", "info", "warning"];
+export declare const MuiButtonColors: readonly ['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning'];
 export type MuiButtonColorType = (typeof MuiButtonColors)[number];
 export declare const isMuiButtonColor: (color: string) => boolean;

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

@@ -1,4 +1,5 @@
-declare const _default: import("react").MemoExoticComponent<({ children }: {
+declare const FlexOne: ({ children }: {
     children?: any;
-}) => import("react/jsx-runtime").JSX.Element>;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof FlexOne>;
 export default _default;

package/components/elements/addons/layout/FlexPort.d.ts

@@ -8,5 +8,6 @@ type FlexPortProps = {
     id?: string;
     children: React.ReactNode;
 };
-declare const _default: import("react").MemoExoticComponent<({ children, disableOverflow, id, ...props }: FlexPortProps) => import("react/jsx-runtime").JSX.Element>;
+declare const FlexPort: ({ children, disableOverflow, id, ...props }: FlexPortProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof FlexPort>;
 export default _default;

package/components/elements/addons/layout/FlexVertical.d.ts

@@ -4,5 +4,6 @@ type FlexVerticalProps = PageProps & {
     flex?: number;
     children: ReactNode;
 };
-declare const _default: import("react").MemoExoticComponent<({ flex, children, ...props }: FlexVerticalProps) => import("react/jsx-runtime").JSX.Element>;
+declare const FlexVertical: ({ flex, children, ...props }: FlexVerticalProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof FlexVertical>;
 export default _default;

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

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

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import FlexVertical from './FlexVertical';
+describe('FlexVertical', () => {
+    it('renders a div with display:flex and flex-direction:column', () => {
+        const { container } = render(_jsx(FlexVertical, { children: _jsx("span", { children: "child" }) }));
+        const div = container.firstChild;
+        expect(div).toBeInTheDocument();
+        expect(div).toHaveStyle({ display: 'flex', flexDirection: 'column' });
+    });
+    it('renders children inside the flex container', () => {
+        render(_jsx(FlexVertical, { children: _jsx("span", { id: "inner", children: "hello" }) }));
+        expect(screen.getByTestId('inner')).toBeInTheDocument();
+    });
+    it('renders multiple children', () => {
+        render(_jsxs(FlexVertical, { children: [_jsx("span", { id: "a", children: "A" }), _jsx("span", { id: "b", children: "B" })] }));
+        expect(screen.getByTestId('a')).toBeInTheDocument();
+        expect(screen.getByTestId('b')).toBeInTheDocument();
+    });
+    it('applies the default flex value of 1', () => {
+        const { container } = render(_jsx(FlexVertical, { children: _jsx("span", { children: "child" }) }));
+        const div = container.firstChild;
+        expect(div).toHaveStyle({ flex: 1 });
+    });
+    it('applies a custom flex value when provided', () => {
+        const { container } = render(_jsx(FlexVertical, { flex: 2, children: _jsx("span", { children: "child" }) }));
+        const div = container.firstChild;
+        expect(div).toHaveStyle({ flex: 2 });
+    });
+});

package/components/elements/addons/layout/vsbox/VSBoxContent.test.d.ts

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

package/components/elements/addons/layout/vsbox/VSBoxContent.test.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import VSBoxContent from './VSBoxContent';
+describe('VSBoxContent', () => {
+    it('renders children inside a div with data-vsbox-content attribute', () => {
+        render(_jsx(VSBoxContent, { children: _jsx("span", { children: "hello" }) }));
+        const el = document.querySelector('[data-vsbox-content]');
+        expect(el).toBeInTheDocument();
+        expect(el).toHaveAttribute('data-vsbox-content', 'true');
+    });
+    it('renders children correctly', () => {
+        render(_jsx(VSBoxContent, { children: _jsx("span", { id: "child", children: "content" }) }));
+        expect(screen.getByTestId('child')).toBeInTheDocument();
+    });
+    it('passes additional MUI Box props through', () => {
+        const { container } = render(_jsx(VSBoxContent, { sx: { display: 'flex' }, children: _jsx("span", { children: "content" }) }));
+        expect(container.firstChild).toBeInTheDocument();
+    });
+    it('renders multiple children', () => {
+        render(_jsxs(VSBoxContent, { 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/layout/vsbox/VSBoxElement.d.ts

@@ -4,5 +4,6 @@ type VSBoxElementProps = Omit<BoxProps, 'children'> & {
     focus: boolean;
     children: ReactElement;
 };
-declare const _default: import("react").MemoExoticComponent<({ focus, children }: VSBoxElementProps) => import("react/jsx-runtime").JSX.Element>;
+declare const VSBoxElement: ({ focus, children }: VSBoxElementProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof VSBoxElement>;
 export default _default;

package/components/elements/addons/lists/TuiList.d.ts

@@ -4,5 +4,6 @@ type TuiListProps<T> = {
     children: TuiListItemRenderer<T>;
     onSelection?: TuiListItemOnSelect<T>;
 };
-declare const _default: import("react").MemoExoticComponent<(<T>({ keyboard, children, onSelection }: TuiListProps<T>) => import("react/jsx-runtime").JSX.Element)>;
+declare const TuiList: <T>({ keyboard, children, onSelection }: TuiListProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof TuiList>;
 export default _default;

package/components/elements/addons/lists/TuiListBase.d.ts

@@ -6,5 +6,6 @@ type TuiListBaseProps<T> = {
     onSelect: TuiListItemOnSelect<T>;
     children: TuiListItemsRenderer<T>;
 };
-declare const _default: import("react").MemoExoticComponent<(<T>({ keyboard, onSelect, children }: TuiListBaseProps<T>) => import("react/jsx-runtime").JSX.Element)>;
+declare const TuiListBase: <T>({ keyboard, onSelect, children }: TuiListBaseProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof TuiListBase>;
 export default _default;

package/components/elements/addons/lists/TuiListElement.d.ts

@@ -1,9 +1,10 @@
-import { type TuiListItem, type TuiListItemOnSelect, type TuiListItemRenderer } from '.';
+import type { TuiListItem, TuiListItemOnSelect, TuiListItemRenderer } from '.';
 type TuiListElementProps<T> = {
     position: number;
     item: TuiListItem<T>;
     onSelect?: TuiListItemOnSelect<T>;
     children: TuiListItemRenderer<T>;
 };
-declare const _default: import("react").MemoExoticComponent<(<T>({ position, item, onSelect: onClick, children }: TuiListElementProps<T>) => import("react/jsx-runtime").JSX.Element)>;
+declare const TuiListElement: <T>({ position, item, onSelect: onClick, children }: TuiListElementProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof TuiListElement>;
 export default _default;

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

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, useCallback, useRef } from 'react';
-import {} from '.';
 import VSBoxElement from '../layout/vsbox/VSBoxElement';
 const TuiListElement = ({ position, item, onSelect: onClick, children }) => {
     const elementEl = useRef();

package/components/elements/addons/lists/TuiListMenu.d.ts

@@ -45,5 +45,6 @@ type TuiListMenuProps = {
     children: ReactElement | ReactElement[];
 };
 export type TuiListMenuPlacement = keyof typeof PLACEMENTS;
-declare const _default: import("react").MemoExoticComponent<({ style, className, permanent, placement, children }: TuiListMenuProps) => import("react/jsx-runtime").JSX.Element>;
+declare const TuiListMenu: ({ style, className, permanent, placement, children }: TuiListMenuProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof TuiListMenu>;
 export default _default;

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

@@ -13,7 +13,7 @@ const PLACEMENTS = {
 const TuiListMenuRoot = styled('div', { shouldForwardProp: prop => !MY_PROPS.includes(prop) })(({ theme, permanent, placement }) => {
     const position = PLACEMENTS[placement];
     return {
-        ...(position || {}),
+        ...position,
         zIndex: position ? 100 : null,
         display: permanent ? 'flex' : 'none',
         position: position ? 'absolute' : 'inherit',

package/components/elements/addons/lists/table/TuiTableHeader.d.ts

@@ -1,6 +1,7 @@
 import type { TuiTableColumn } from '.';
-declare const _default: import("react").MemoExoticComponent<({ width, column }: {
+declare const TuiTableHeader: ({ width, column }: {
     width: number;
     column: TuiTableColumn;
-}) => import("react/jsx-runtime").JSX.Element>;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof TuiTableHeader>;
 export default _default;