@cccsaurora/howler-ui 2.17.0-dev.600 → 2.17.1

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

@@ -272,17 +272,17 @@ describe('ParameterContext', () => {
                 });
             });
         });
-        describe('resetFilters', () => {
+        describe('clearFilters', () => {
             it('should clear all filters', async () => {
                 mockSearchParams = new URLSearchParams();
                 mockSearchParams.append('filter', 'filter1');
                 mockSearchParams.append('filter', 'filter2');
                 const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
                     filters: ctx.filters,
-                    resetFilters: ctx.resetFilters
+                    clearFilters: ctx.clearFilters
                 })), { wrapper: Wrapper });
                 await act(async () => {
-                    hook.result.current.resetFilters();
+                    hook.result.current.clearFilters();
                 });
                 await waitFor(() => {
                     expect(hook.result.current.filters).toEqual([]);
@@ -291,10 +291,10 @@ describe('ParameterContext', () => {
             it('should be no-op when already empty', async () => {
                 const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
                     filters: ctx.filters,
-                    resetFilters: ctx.resetFilters
+                    clearFilters: ctx.clearFilters
                 })), { wrapper: Wrapper });
                 await act(async () => {
-                    hook.result.current.resetFilters();
+                    hook.result.current.clearFilters();
                 });
                 await waitFor(() => {
                     expect(hook.result.current.filters).toEqual([]);
@@ -441,10 +441,10 @@ describe('ParameterContext', () => {
                 mockSearchParams.append('filter', 'filter1');
                 mockSearchParams.append('filter', 'filter2');
                 const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
-                    resetFilters: ctx.resetFilters
+                    clearFilters: ctx.clearFilters
                 })), { wrapper: Wrapper });
                 await act(async () => {
-                    hook.result.current.resetFilters();
+                    hook.result.current.clearFilters();
                 });
                 await waitFor(() => {
                     expect(mockSetParams).toHaveBeenCalled();
@@ -706,299 +706,6 @@ describe('ParameterContext', () => {
             });
         });
     });
-    describe('indexes (multi-index support)', () => {
-        it('should initialize with default ["hit"] when no index params are present', async () => {
-            const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ctx.indexes), { wrapper: Wrapper });
-            expect(hook.result.current).toEqual(['hit']);
-        });
-        it('should initialize with single index from URL', async () => {
-            mockSearchParams = new URLSearchParams({ index: 'observable' });
-            const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ctx.indexes), { wrapper: Wrapper });
-            expect(hook.result.current).toEqual(['observable']);
-        });
-        it('should initialize with multiple indexes from URL', async () => {
-            mockSearchParams = new URLSearchParams();
-            mockSearchParams.append('index', 'hit');
-            mockSearchParams.append('index', 'observable');
-            const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ctx.indexes), { wrapper: Wrapper });
-            expect(hook.result.current).toEqual(['hit', 'observable']);
-        });
-        it('should deduplicate repeated index values from URL', async () => {
-            mockSearchParams = new URLSearchParams();
-            mockSearchParams.append('index', 'hit');
-            mockSearchParams.append('index', 'hit');
-            const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ctx.indexes), { wrapper: Wrapper });
-            expect(hook.result.current).toEqual(['hit']);
-        });
-        describe('addIndex', () => {
-            it('should add an index to the default array', async () => {
-                const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
-                    indexes: ctx.indexes,
-                    addIndex: ctx.addIndex
-                })), { wrapper: Wrapper });
-                await act(async () => {
-                    hook.result.current.addIndex('observable');
-                });
-                await waitFor(() => {
-                    expect(hook.result.current.indexes).toEqual(['hit', 'observable']);
-                });
-            });
-            it('should not add a duplicate index', async () => {
-                const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
-                    indexes: ctx.indexes,
-                    addIndex: ctx.addIndex
-                })), { wrapper: Wrapper });
-                await act(async () => {
-                    hook.result.current.addIndex('hit');
-                });
-                await waitFor(() => {
-                    expect(hook.result.current.indexes).toEqual(['hit']);
-                });
-            });
-        });
-        describe('removeIndex', () => {
-            it('should remove an index from the list', async () => {
-                mockSearchParams = new URLSearchParams();
-                mockSearchParams.append('index', 'hit');
-                mockSearchParams.append('index', 'observable');
-                const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
-                    indexes: ctx.indexes,
-                    removeIndex: ctx.removeIndex
-                })), { wrapper: Wrapper });
-                await act(async () => {
-                    hook.result.current.removeIndex('hit');
-                });
-                await waitFor(() => {
-                    expect(hook.result.current.indexes).toEqual(['observable']);
-                });
-            });
-            it('should do nothing when removing a nonexistent index', async () => {
-                const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
-                    indexes: ctx.indexes,
-                    removeIndex: ctx.removeIndex
-                })), { wrapper: Wrapper });
-                await act(async () => {
-                    hook.result.current.removeIndex('observable');
-                });
-                await waitFor(() => {
-                    expect(hook.result.current.indexes).toEqual(['hit']);
-                });
-            });
-            it('should handle removing from empty array', async () => {
-                mockSearchParams = new URLSearchParams();
-                mockSearchParams.append('index', 'hit');
-                const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
-                    indexes: ctx.indexes,
-                    removeIndex: ctx.removeIndex
-                })), { wrapper: Wrapper });
-                await act(async () => {
-                    hook.result.current.removeIndex('hit');
-                });
-                await waitFor(() => {
-                    expect(hook.result.current.indexes).toEqual([]);
-                });
-            });
-        });
-        describe('setIndex', () => {
-            it('should update the index at the specified position', async () => {
-                mockSearchParams = new URLSearchParams();
-                mockSearchParams.append('index', 'hit');
-                mockSearchParams.append('index', 'observable');
-                const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
-                    indexes: ctx.indexes,
-                    setIndex: ctx.setIndex
-                })), { wrapper: Wrapper });
-                await act(async () => {
-                    hook.result.current.setIndex(0, 'observable');
-                });
-                await waitFor(() => {
-                    expect(hook.result.current.indexes).toEqual(['observable', 'observable']);
-                });
-            });
-            it('should do nothing when index is out of bounds', async () => {
-                const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
-                    indexes: ctx.indexes,
-                    setIndex: ctx.setIndex
-                })), { wrapper: Wrapper });
-                await act(async () => {
-                    hook.result.current.setIndex(5, 'observable');
-                });
-                await waitFor(() => {
-                    expect(hook.result.current.indexes).toEqual(['hit']);
-                });
-            });
-            it('should do nothing when position is negative', async () => {
-                const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
-                    indexes: ctx.indexes,
-                    setIndex: ctx.setIndex
-                })), { wrapper: Wrapper });
-                await act(async () => {
-                    hook.result.current.setIndex(-1, 'observable');
-                });
-                await waitFor(() => {
-                    expect(hook.result.current.indexes).toEqual(['hit']);
-                });
-            });
-        });
-        describe('setIndexes', () => {
-            it('should replace all indexes with the provided list', async () => {
-                const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
-                    indexes: ctx.indexes,
-                    setIndexes: ctx.setIndexes
-                })), { wrapper: Wrapper });
-                await act(async () => {
-                    hook.result.current.setIndexes(['observable']);
-                });
-                await waitFor(() => {
-                    expect(hook.result.current.indexes).toEqual(['observable']);
-                });
-            });
-            it('should deduplicate values when setting all indexes', async () => {
-                const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
-                    indexes: ctx.indexes,
-                    setIndexes: ctx.setIndexes
-                })), { wrapper: Wrapper });
-                await act(async () => {
-                    hook.result.current.setIndexes(['hit', 'hit', 'observable']);
-                });
-                await waitFor(() => {
-                    expect(hook.result.current.indexes).toEqual(['hit', 'observable']);
-                });
-            });
-            it('should set to empty array', async () => {
-                const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
-                    indexes: ctx.indexes,
-                    setIndexes: ctx.setIndexes
-                })), { wrapper: Wrapper });
-                await act(async () => {
-                    hook.result.current.setIndexes([]);
-                });
-                await waitFor(() => {
-                    expect(hook.result.current.indexes).toEqual([]);
-                });
-            });
-        });
-        describe('resetIndexes', () => {
-            it('should reset indexes to default ["hit"]', async () => {
-                mockSearchParams = new URLSearchParams();
-                mockSearchParams.append('index', 'hit');
-                mockSearchParams.append('index', 'observable');
-                const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
-                    indexes: ctx.indexes,
-                    resetIndexes: ctx.resetIndexes
-                })), { wrapper: Wrapper });
-                await act(async () => {
-                    hook.result.current.resetIndexes();
-                });
-                await waitFor(() => {
-                    expect(hook.result.current.indexes).toEqual(['hit']);
-                });
-            });
-            it('should reset to default even when called on empty array', async () => {
-                mockSearchParams = new URLSearchParams();
-                mockSearchParams.append('index', 'hit');
-                const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
-                    indexes: ctx.indexes,
-                    removeIndex: ctx.removeIndex,
-                    resetIndexes: ctx.resetIndexes
-                })), { wrapper: Wrapper });
-                // First empty it
-                await act(async () => {
-                    hook.result.current.removeIndex('hit');
-                });
-                await waitFor(() => {
-                    expect(hook.result.current.indexes).toEqual([]);
-                });
-                // Resetting always returns to default ['hit']
-                await act(async () => {
-                    hook.result.current.resetIndexes();
-                });
-                await waitFor(() => {
-                    expect(hook.result.current.indexes).toEqual(['hit']);
-                });
-            });
-        });
-        describe('URL synchronization', () => {
-            it('should not write the default ["hit"] index to the URL', async () => {
-                renderHook(() => useContextSelector(ParameterContext, ctx => ctx.indexes), { wrapper: Wrapper });
-                // Allow any effects to flush
-                await waitFor(() => {
-                    // If setParams was called, the URL must not contain ?index=hit
-                    if (mockSetParams.mock.calls.length > 0) {
-                        const call = mockSetParams.mock.calls[mockSetParams.mock.calls.length - 1];
-                        const urlParams = typeof call[0] === 'function' ? call[0](mockSearchParams) : call[0];
-                        expect(urlParams.getAll('index')).toEqual([]);
-                    }
-                    else {
-                        // setParams not called at all is also fine
-                        expect(true).toBe(true);
-                    }
-                });
-            });
-            it('should write a non-default index to the URL', async () => {
-                const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
-                    addIndex: ctx.addIndex,
-                    resetIndexes: ctx.resetIndexes
-                })), { wrapper: Wrapper });
-                await act(async () => {
-                    hook.result.current.resetIndexes();
-                    hook.result.current.addIndex('observable');
-                });
-                await waitFor(() => {
-                    expect(mockSetParams).toHaveBeenCalled();
-                    const call = mockSetParams.mock.calls[mockSetParams.mock.calls.length - 1];
-                    const urlParams = typeof call[0] === 'function' ? call[0](mockSearchParams) : call[0];
-                    expect(urlParams.getAll('index')).toEqual(['hit', 'observable']);
-                });
-            });
-            it('should sync multiple indexes to URL as multiple index params', async () => {
-                const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
-                    addIndex: ctx.addIndex
-                })), { wrapper: Wrapper });
-                await act(async () => {
-                    hook.result.current.addIndex('observable');
-                });
-                await waitFor(() => {
-                    expect(mockSetParams).toHaveBeenCalled();
-                    const call = mockSetParams.mock.calls[mockSetParams.mock.calls.length - 1];
-                    const urlParams = typeof call[0] === 'function' ? call[0](mockSearchParams) : call[0];
-                    expect(urlParams.getAll('index')).toEqual(['hit', 'observable']);
-                });
-            });
-            it('should remove all index params from URL when state resets to default', async () => {
-                mockSearchParams = new URLSearchParams();
-                mockSearchParams.append('index', 'hit');
-                mockSearchParams.append('index', 'observable');
-                const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
-                    resetIndexes: ctx.resetIndexes
-                })), { wrapper: Wrapper });
-                await act(async () => {
-                    hook.result.current.resetIndexes();
-                });
-                await waitFor(() => {
-                    expect(mockSetParams).toHaveBeenCalled();
-                    const call = mockSetParams.mock.calls[mockSetParams.mock.calls.length - 1];
-                    const urlParams = typeof call[0] === 'function' ? call[0](mockSearchParams) : call[0];
-                    expect(urlParams.getAll('index')).toEqual([]);
-                });
-            });
-            it('should remove index param from URL when state returns to default', async () => {
-                mockSearchParams = new URLSearchParams({ index: 'observable' });
-                const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
-                    setIndexes: ctx.setIndexes
-                })), { wrapper: Wrapper });
-                await act(async () => {
-                    hook.result.current.setIndexes(['hit']);
-                });
-                await waitFor(() => {
-                    expect(mockSetParams).toHaveBeenCalled();
-                    const call = mockSetParams.mock.calls[mockSetParams.mock.calls.length - 1];
-                    const urlParams = typeof call[0] === 'function' ? call[0](mockSearchParams) : call[0];
-                    expect(urlParams.getAll('index')).toEqual([]);
-                });
-            });
-        });
-    });
     describe('views (multi-view support)', () => {
         it('should initialize with empty array when no view params present', async () => {
             const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ctx.views), { wrapper: Wrapper });
@@ -1132,17 +839,17 @@ describe('ParameterContext', () => {
                 });
             });
         });
-        describe('resetViews', () => {
+        describe('clearViews', () => {
             it('should clear all views', async () => {
                 mockSearchParams = new URLSearchParams();
                 mockSearchParams.append('view', 'view_1');
                 mockSearchParams.append('view', 'view_2');
                 const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
                     views: ctx.views,
-                    resetViews: ctx.resetViews
+                    clearViews: ctx.clearViews
                 })), { wrapper: Wrapper });
                 await act(async () => {
-                    hook.result.current.resetViews();
+                    hook.result.current.clearViews();
                 });
                 await waitFor(() => {
                     expect(hook.result.current.views).toEqual([]);
@@ -1151,10 +858,10 @@ describe('ParameterContext', () => {
             it('should be no-op when already empty', async () => {
                 const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
                     views: ctx.views,
-                    resetViews: ctx.resetViews
+                    clearViews: ctx.clearViews
                 })), { wrapper: Wrapper });
                 await act(async () => {
-                    hook.result.current.resetViews();
+                    hook.result.current.clearViews();
                 });
                 await waitFor(() => {
                     expect(hook.result.current.views).toEqual([]);
@@ -1301,10 +1008,10 @@ describe('ParameterContext', () => {
                 mockSearchParams.append('view', 'view_1');
                 mockSearchParams.append('view', 'view_2');
                 const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
-                    resetViews: ctx.resetViews
+                    clearViews: ctx.clearViews
                 })), { wrapper: Wrapper });
                 await act(async () => {
-                    hook.result.current.resetViews();
+                    hook.result.current.clearViews();
                 });
                 await waitFor(() => {
                     expect(mockSetParams).toHaveBeenCalled();

package/components/elements/EditRow.d.ts

@@ -1,3 +1,4 @@
+import { type SliderProps } from '@mui/material';
 type EditRowTypes<T extends string | number | boolean> = {
     titleKey: string;
     descriptionKey?: string;
@@ -8,7 +9,9 @@ type EditRowTypes<T extends string | number | boolean> = {
     type?: 'password' | 'number' | 'text' | 'checkbox' | 'range';
     min?: number;
     max?: number;
+    step?: number;
     optional?: boolean;
+    valueLabelFormat?: SliderProps['valueLabelFormat'];
 };
-declare const EditRow: <T extends string | number | boolean>({ titleKey, descriptionKey, value, onEdit, validate, failOnValidate, type, min, max, optional }: EditRowTypes<T>) => import("react/jsx-runtime").JSX.Element;
+declare const EditRow: <T extends string | number | boolean>({ titleKey, descriptionKey, value, onEdit, validate, failOnValidate, type, min, max, step, valueLabelFormat, optional }: EditRowTypes<T>) => import("react/jsx-runtime").JSX.Element;
 export default EditRow;

package/components/elements/EditRow.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Check, Close, Delete, Edit } from '@mui/icons-material';
 import { Box, Checkbox, CircularProgress, IconButton, Slider, Stack, TableCell, TableRow, TextField, Typography } from '@mui/material';
 import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
-import { isNull, isUndefined } from 'lodash-es';
+import { isNil, isNull, isUndefined } from 'lodash-es';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-const EditRow = ({ titleKey, descriptionKey, value, onEdit, validate, failOnValidate = false, type = 'text', min, max, optional }) => {
+const EditRow = ({ titleKey, descriptionKey, value, onEdit, validate, failOnValidate = false, type = 'text', min, max, step, valueLabelFormat, optional }) => {
     const { t } = useTranslation();
     const { showErrorMessage } = useMySnackbar();
     const [editing, setEditing] = useState(false);
@@ -102,7 +102,7 @@ const EditRow = ({ titleKey, descriptionKey, value, onEdit, validate, failOnVali
                                         }
                                     }, children: [!['checkbox', 'range'].includes(type) && (_jsx(TextField, { size: "small", value: editValue, onChange: ev => onChange(ev.target.value), onKeyDown: checkForActions, fullWidth: true, label: type === 'password' ? t('password') : null, type: type, error: error, sx: { '& input': { fontSize: '13.5px !important' } }, InputProps: {
                                                 endAdornment: loading && _jsx(CircularProgress, { size: 24 })
-                                            } })), type === 'checkbox' && (_jsx(Checkbox, { sx: { marginRight: 'auto' }, value: editValue, onChange: ev => onChange(ev.target.checked) })), type === 'range' && (_jsx(Slider, { min: min ?? 0, max: max ?? 100, step: Math.pow(10, Math.floor(Math.log10(max ?? 100) - Math.log10(Math.max(min ?? 0, 1)) / 2)), onChange: (__, val) => onChange(val), value: editValue, valueLabelDisplay: "auto", valueLabelFormat: val => `${val}px` })), type === 'password' && (_jsx(TextField, { size: "small", value: confirmPassword, onChange: ev => {
+                                            } })), type === 'checkbox' && (_jsx(Checkbox, { sx: { marginRight: 'auto' }, value: editValue, onChange: ev => onChange(ev.target.checked) })), type === 'range' && (_jsx(Slider, { min: min ?? 0, max: max ?? 100, step: step ?? Math.pow(10, Math.floor(Math.log10(max ?? 100) - Math.log10(Math.max(min ?? 0, 1)) / 2)), onChange: (__, val) => onChange(val), value: editValue, valueLabelDisplay: "auto", valueLabelFormat: valueLabelFormat ?? (val => `${val}px`) })), type === 'password' && (_jsx(TextField, { size: "small", value: confirmPassword, onChange: ev => {
                                                 setConfirmPassword(ev.target.value);
                                                 setError(false);
                                             }, onKeyDown: checkForActions, fullWidth: true, label: t('password.confirm'), type: "password", error: error, sx: { '& input': { fontSize: '13.5px !important' } }, InputProps: {
@@ -110,6 +110,6 @@ const EditRow = ({ titleKey, descriptionKey, value, onEdit, validate, failOnVali
                                             } }))] }), _jsx(IconButton, { onClick: onSubmit, disabled: loading, children: _jsx(Check, { fontSize: "small" }) }), _jsx(IconButton, { onClick: () => setEditing(false), disabled: loading, children: _jsx(Close, { fontSize: "small" }) }), optional && (_jsx(IconButton, { onClick: () => {
                                         setEditing(false);
                                         onEdit(null);
-                                    }, disabled: loading, children: _jsx(Delete, { fontSize: "small" }) }))] }) })) : (_jsxs(TableCell, { sx: cellSx, width: "100%", children: [type === 'checkbox' ? (_jsx(Checkbox, { onChange: ev => onChange(ev.target.checked), checked: value.toString() === 'true' })) : ((value ?? t('none'))), type === 'range' && value && 'px'] })), onEdit && !editing && type !== 'checkbox' && (_jsx(TableCell, { sx: cellSx, align: "right", children: _jsx(IconButton, { onClick: () => setEditing(true), children: _jsx(Edit, { fontSize: "small" }) }) }))] }), descriptionKey && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t(descriptionKey) }) }) }))] }));
+                                    }, disabled: loading, children: _jsx(Delete, { fontSize: "small" }) }))] }) })) : (_jsx(TableCell, { sx: cellSx, width: "100%", children: type === 'checkbox' ? (_jsx(Checkbox, { onChange: ev => onChange(ev.target.checked), checked: value.toString() === 'true' })) : type === 'range' && !isNil(value) ? ((valueLabelFormat ?? (val => `${val}px`))(value)) : ((value ?? t('none'))) })), onEdit && !editing && type !== 'checkbox' && (_jsx(TableCell, { sx: cellSx, align: "right", children: _jsx(IconButton, { onClick: () => setEditing(true), children: _jsx(Edit, { fontSize: "small" }) }) }))] }), descriptionKey && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t(descriptionKey) }) }) }))] }));
 };
 export default EditRow;

package/components/elements/PluginTypography.d.ts

@@ -1,11 +1,10 @@
 import { type TypographyProps } from '@mui/material';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-import type { Observable } from '@cccsaurora/howler-ui/models/entities/generated/Observable';
 export type PluginTypographyProps = TypographyProps & {
     value: string;
     context: string;
     field?: string;
-    obj?: Hit | Observable;
+    hit?: Hit;
 };
 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, obj, ...props }) => {
+const PluginTypography = ({ children, value, context, field, hit, ...props }) => {
     const pluginStore = usePluginStore();
     for (const plugin of howlerPluginStore.plugins) {
         const component = pluginStore.executeFunction(`${plugin}.typography`, {
@@ -11,8 +11,7 @@ const PluginTypography = ({ children, value, context, field, obj, ...props }) =>
             value,
             context,
             field,
-            hit: obj,
-            obj,
+            hit,
             ...props
         });
         if (component) {

package/components/elements/UserList.d.ts

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

package/components/elements/UserList.js

@@ -1,20 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Add } from '@mui/icons-material';
-import { Autocomplete, AvatarGroup, Box, IconButton, Popover, Stack, TextField, Typography } from '@mui/material';
+import { Autocomplete, Box, IconButton, Popover, 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 = {}, userIds, onChange, i18nLabel, avatarHeight = 32, multiple = false, disabled = false }) => {
+const UserList = ({ buttonSx = {}, userId, onChange, i18nLabel }) => {
     const { t } = useTranslation();
     const [anchorEl, setAnchorEl] = useState(null);
     const { users, searchUsers } = useContext(UserListContext);
-    const allUserIds = useMemo(() => Object.keys(users), [users]);
+    const userIds = useMemo(() => Object.keys(users), [users]);
     useEffect(() => {
         searchUsers('uname:*');
     }, [searchUsers]);
-    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: _jsx(Autocomplete, { disabled: disabled, multiple: multiple, sx: { minWidth: '300px' }, options: allUserIds, renderInput: params => _jsx(TextField, { ...params, label: t(i18nLabel), size: "small" }), renderOption: (props, _userId) => {
+    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',
@@ -23,13 +21,6 @@ const UserList = ({ buttonSx = {}, userIds, onChange, i18nLabel, avatarHeight =
                                         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: userIds, onChange: (__, options) => {
-                            if (multiple) {
-                                onChange(Array.isArray(options) ? options : [options]);
-                            }
-                            else {
-                                onChange([Array.isArray(options) ? (options[0] ?? null) : options]);
-                            }
-                        } }) }) })] }));
+                        }, value: userId, onChange: (__, option) => onChange(option) }) }) })] }));
 };
 export default UserList;

package/components/elements/addons/search/phrase/Phrase.js

@@ -80,7 +80,7 @@ const Phrase = ({ value = '', variant = 'outlined', suggestions = [], lexer, sug
                         onSelectCapture: _onSelectCapture,
                         startAdornment: startAdornment && _jsx(InputAdornment, { position: "start", children: startAdornment }),
                         endAdornment: endAdornment && _jsx(InputAdornment, { position: "end", children: endAdornment })
-                    } }), _jsx(Popper, { anchorEl: containerRef.current, style: { width: '100%', zIndex: 100 }, open: optionsOpen && (options.length > 0 || (debug && analysisRef.current?.tokens.length > 0)), disablePortal: true, children: _jsx(Paper, { elevation: 1, sx: { maxHeight: 200, overflow: 'auto', borderTopRightRadius: 0, borderTopLeftRadius: 0 }, children: _jsx(MenuList, { ref: menuRef, onKeyDown: _onMenuKeyDown, sx: {
+                    } }), _jsx(Popper, { anchorEl: containerRef.current, style: { width: '100%', zIndex: 100 }, open: optionsOpen && (options.length > 0 || (debug && analysisRef.current?.tokens.length > 0)), disablePortal: true, children: _jsx(Paper, { elevation: 2, sx: { maxHeight: 200, overflow: 'auto', borderTopRightRadius: 0, borderTopLeftRadius: 0 }, children: _jsx(MenuList, { ref: menuRef, onKeyDown: _onMenuKeyDown, sx: {
                                 '&:focus': {
                                     outline: 'none'
                                 }

package/components/elements/display/ChipPopper.d.ts

@@ -15,8 +15,8 @@ interface ChipPopperProps {
     onToggle?: (show: boolean) => void;
     onDelete?: (event?: any) => void;
     toggleOnDelete?: boolean;
-    disablePortal?: boolean;
     closeOnClick?: boolean;
+    disablePortal?: boolean;
 }
 declare const _default: import("react").NamedExoticComponent<ChipPopperProps>;
 export default _default;

package/components/elements/display/ChipPopper.js

@@ -21,7 +21,7 @@ const ChipPopper = ({ icon, deleteIcon, label, children, minWidth, placement = '
                     ...(Array.isArray(slotProps.chip?.sx) ? slotProps.chip.sx : [slotProps.chip?.sx])
                 ], ...(slotProps.chip ?? {}) }), _jsx(Popper, { placement: placement, anchorEl: anchorEl.current, disablePortal: disablePortal, open: true, sx: {
                     minWidth: Math.max(typeof minWidth === 'number' ? minWidth : parseInt(minWidth?.replace('px', '')) || 0, anchorEl.current?.clientWidth || 0),
-                    zIndex: 1
+                    zIndex: 1000
                 }, children: _jsx(Collapse, { in: show, unmountOnExit: true, onClick: () => {
                         if (closeOnClick) {
                             handleToggle(false);

package/components/elements/display/HowlerCard.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Card } from '@mui/material';
 import { memo } from 'react';
-const HowlerCard = props => _jsx(Card, { elevation: props.variant !== 'outlined' ? 1 : 0, ...props });
+const HowlerCard = props => (_jsx(Card, { style: { outline: 'none' }, elevation: props.variant !== 'outlined' ? 4 : 0, ...props }));
 export default memo(HowlerCard);

package/components/elements/display/Modal.js

@@ -15,7 +15,6 @@ const Modal = () => {
                 left: '50%',
                 maxWidth: options.maxWidth || '1200px',
                 maxHeight: options.maxHeight || '400px',
-                height: '100%',
                 transform: 'translate(-50%, -50%)',
                 backgroundColor: 'background.paper',
                 borderRadius: theme.shape.borderRadius,

package/components/elements/display/icons/BundleButton.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+declare const BundleButton: FC<{
+    ids: string[];
+    disabled?: boolean;
+}>;
+export default BundleButton;

package/components/elements/display/icons/BundleButton.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { AccountTree } from '@mui/icons-material';
+import { ListItemText, Menu, MenuItem, Typography } from '@mui/material';
+import TuiIconButton from '@cccsaurora/howler-ui/components/elements/addons/buttons/CustomIconButton';
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+const BundleButton = ({ ids, disabled = false }) => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const [anchorEl, setAnchorEl] = useState(null);
+    const onClick = useCallback((event) => {
+        if (ids.length === 1) {
+            navigate(`/bundles/${ids[0]}`);
+        }
+        else {
+            setAnchorEl(event.currentTarget);
+        }
+    }, [ids, navigate]);
+    const handleClose = useCallback(() => setAnchorEl(null), []);
+    return (_jsxs(_Fragment, { children: [_jsx(TuiIconButton, { size: "small", tooltip: t(`hit.panel.bundles.open${ids.length > 1 ? '' : '.prompt'}`), onClick: onClick, disabled: disabled, "aria-disabled": disabled, "aria-haspopup": "true", "aria-controls": anchorEl ? 'bundle-action-menu' : undefined, "aria-expanded": anchorEl ? 'true' : undefined, children: _jsx(AccountTree, {}) }), _jsx(Menu, { id: "bundle-action-menu", anchorEl: anchorEl, open: !!anchorEl, onClose: handleClose, MenuListProps: {
+                    dense: true,
+                    'aria-labelledby': `bundle-button`
+                }, anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'right'
+                }, transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'right'
+                }, children: ids.map(id => (_jsx(MenuItem, { onClick: () => navigate(`/bundles/${id}`), children: _jsx(ListItemText, { primary: t('hit.panel.bundles.open.prompt'), secondary: _jsx(Typography, { variant: "caption", color: "text.secondary", children: id }) }) }, id))) })] }));
+};
+export default BundleButton;