@cccsaurora/howler-ui 3.1.0-dev.1493 → 3.1.0-dev.1602

package/components/elements/UserList.js

@@ -1,43 +1,51 @@
 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 { Autocomplete, AvatarGroup, Box, Divider, 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 Throttler from '@cccsaurora/howler-ui/utils/Throttler';
 import HowlerAvatar from './display/HowlerAvatar';
-const UserList = ({ buttonSx = {}, userIds, onChange, i18nLabel, avatarHeight = 32, multiple = false, disabled = false }) => {
+const UserEntry = ({ user }) => {
+    return (_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 ?? '' })] }));
+};
+const UserList = ({ buttonSx = {}, userIds, onChange, i18nLabel, avatarHeight = 32, multiple = false, disabled = false, variant = 'compact', except = [] }) => {
     const { t } = useTranslation();
     const [anchorEl, setAnchorEl] = useState(null);
-    const { users, fetchUsers } = useContext(UserListContext);
+    const { users, fetchUsers, searchUsers } = useContext(UserListContext);
     const allUserIds = useMemo(() => Object.keys(users), [users]);
     useEffect(() => {
         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 throttler = useMemo(() => new Throttler(300), []);
+    const search = (value) => throttler.debounce(() => searchUsers(value));
+    const renderInput = (params) => (_jsx(TextField, { ...params, autoComplete: "off", 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));
+        return (_jsx("li", { ...optionProps, children: _jsx(UserEntry, { user: users[optionUserId] }) }, key));
     };
     const sharedAutocompleteProps = {
         disabled,
         sx: { minWidth: '300px' },
         options: allUserIds,
         renderInput,
-        renderOption
+        renderOption,
+        onInputChange: (_e, value) => search(value),
+        getOptionDisabled: (optionUserId) => userIds.includes(optionUserId) || except.includes(optionUserId)
     };
-    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] : []);
-                        } })) }) })] }));
+    const autocomplete = multiple ? (_jsx(Autocomplete, { ...sharedAutocompleteProps, multiple: true, value: userIds, onChange: (__, options) => {
+            onChange(options);
+        } })) : (_jsx(Autocomplete, { ...sharedAutocompleteProps, value: userIds?.[0] ?? null, onChange: (__, option) => {
+            onChange(option ? [option] : []);
+        } }));
+    return (_jsxs(_Fragment, { children: [variant === 'compact' ? (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 } }) }))) : multiple ? (_jsxs(Stack, { width: "100%", spacing: 1, alignItems: "stretch", divider: _jsx(Divider, { flexItem: true }), children: [uniq(userIds ?? [null]).map(userId => (_jsx(UserEntry, { user: users[userId] }, userId))), autocomplete] })) : (_jsxs(Stack, { direction: "row", children: [_jsx(HowlerAvatar, { userId: userIds[0], sx: { height: avatarHeight, width: avatarHeight } }), _jsx(Typography, { children: userIds[0] })] })), variant === 'compact' && (_jsx(Popover, { open: !!anchorEl, onClose: () => setAnchorEl(null), anchorEl: anchorEl, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, children: _jsx(Box, { sx: { p: 2 }, children: autocomplete }) }))] }));
 };
 export default UserList;

package/components/elements/UserList.test.js

@@ -84,9 +84,32 @@ describe('UserList', () => {
         await user.click(within(listbox).getByText('Bob Analyst'));
         expect(onChange).toHaveBeenCalledWith(expect.arrayContaining(['analystA', 'analystB']));
     });
+    it('renders an inline picker and selects a user in list variant multiple mode', async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        render(_jsx(UserList, { i18nLabel: "user.list.label", userIds: ['analystA'], onChange: onChange, multiple: true, variant: "list" }), {
+            wrapper: createWrapper(defaultUsers)
+        });
+        expect(screen.getByText('Alice Analyst')).toBeInTheDocument();
+        const combo = screen.getByRole('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('renders the selected user without a picker in list variant single mode', () => {
+        const onChange = vi.fn();
+        render(_jsx(UserList, { i18nLabel: "user.list.label", userIds: ['analystA'], onChange: onChange, variant: "list" }), {
+            wrapper: createWrapper(defaultUsers)
+        });
+        expect(screen.getByText('analystA', { selector: 'p' })).toBeInTheDocument();
+        expect(document.querySelector('#avatar-analystA')).toBeInTheDocument();
+        expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
+        expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    });
     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 }), {
+        render(_jsx(UserList, { i18nLabel: "user.list.label", userIds: ['analystA'], onChange: onChange, disabled: true, multiple: true }), {
             wrapper: createWrapper(defaultUsers)
         });
         const button = screen.getByRole('button');

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

@@ -8,5 +8,5 @@ export type TuiButtonProps = Omit<ButtonProps, 'color'> & {
     progress?: boolean;
     tooltip?: string | ReactNode;
 };
-declare const CustomButton: ({ solid, color, route, href, progress, tooltip, variant, ...props }: TuiButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const CustomButton: ({ solid, color, route, href, progress, tooltip, variant, ...props }: TuiButtonProps) => import("react").JSX.Element;
 export default CustomButton;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { alpha, Button, CircularProgress, darken, emphasize, Link as MuiLink, Tooltip, useTheme } from '@mui/material';
 import { useMemo } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { isMuiButtonColor } from '.';
 const CustomButton = ({ solid, color, route, href, progress, tooltip, variant, ...props }) => {
     const theme = useTheme();
@@ -25,7 +25,7 @@ const CustomButton = ({ solid, color, route, href, progress, tooltip, variant, .
         };
     }, [_solid, requestedColor, variant, props.sx, isMuiColor, theme]);
     const progressColor = useMemo(() => {
-        const _color = isMuiColor ? theme.palette[requestedColor].main : requestedColor;
+        const _color = isMuiColor && requestedColor !== 'inherit' ? theme.palette[requestedColor].main : requestedColor;
         return _solid ? emphasize(_color, 0.5) : _color;
     }, [_solid, requestedColor, isMuiColor, theme]);
     let ColorButton = (_jsx(Button, { ...props, variant: variant, color: isMuiColor ? color : 'inherit', sx: sx, startIcon: progress ? (_jsx(CircularProgress, { size: props.size === 'large' ? 22 : props.size === 'small' ? 18 : 20, sx: { color: progressColor } })) : (props.startIcon) }));

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

@@ -11,5 +11,5 @@ export type CustomIconButtonProps = Omit<IconButtonProps, 'color'> & {
     target?: HTMLAttributeAnchorTarget;
     clickableWithProgress?: boolean;
 };
-declare const CustomIconButton: ({ progress, transparent, solid, color, route, href, target, tooltip, disabled, children, clickableWithProgress, ...props }: CustomIconButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const CustomIconButton: ({ progress, transparent, solid, color, route, href, target, tooltip, disabled, children, clickableWithProgress, ...props }: CustomIconButtonProps) => import("react").JSX.Element;
 export default CustomIconButton;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { alpha, CircularProgress, darken, emphasize, IconButton, lighten, Link as MuiLink, Tooltip, useTheme } from '@mui/material';
 import { useMemo } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { isMuiButtonColor } from '.';
 const CustomIconButton = ({ progress, transparent, solid, color, route, href, target, tooltip, disabled, children, clickableWithProgress = false, ...props }) => {
     const theme = useTheme();
@@ -26,13 +26,13 @@ const CustomIconButton = ({ progress, transparent, solid, color, route, href, ta
         };
     }, [requestedColor, solid, transparent, props.sx, isMuiColor, theme]);
     const progressColor = useMemo(() => {
-        const _color = isMuiColor ? theme.palette[requestedColor].main : requestedColor;
+        const _color = isMuiColor && requestedColor !== 'inherit' ? theme.palette[requestedColor].main : requestedColor;
         return solid ? emphasize(_color, 0.5) : _color;
     }, [solid, requestedColor, isMuiColor, theme]);
     let _IconButton = (_jsx(IconButton, { ...props, disabled: (!clickableWithProgress && !!progress) || disabled, color: isMuiColor ? color : 'inherit', sx: sx, children: progress ? (_jsxs("div", { style: { position: 'relative', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }, children: [children, _jsx(CircularProgress, { disableShrink: true, size: props.size === 'large' ? 52 : props.size === 'small' ? 28 : 40, style: {
                         position: 'absolute',
                         color: progressColor,
-                        animationDuration: typeof progress === 'number' ? `${progress}s` : null
+                        animationDuration: typeof progress === 'number' ? `${progress}s` : undefined
                     } })] })) : (children) }));
     if (tooltip) {
         _IconButton = (_jsx(Tooltip, { title: tooltip, children: _jsx("span", { children: _IconButton }) }));

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 type MuiButtonColorType = (typeof MuiButtonColors)[number];
-export declare const isMuiButtonColor: (color: string) => boolean;
+export declare const isMuiButtonColor: (color: string) => color is MuiButtonColorType;

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

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

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /// <reference types="vitest" />
+// @ts-nocheck
 import { render, screen } from '@testing-library/react';
 import FlexOne from './FlexOne';
 describe('FlexOne', () => {

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

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

package/components/elements/addons/layout/FlexPort.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import usePageProps from '@cccsaurora/howler-ui/commons/components/pages/hooks/usePageProps';
+import { usePageProps } from '@tui/core';
 import { memo } from 'react';
 const FlexPort = ({ children, disableOverflow = false, id = '', ...props }) => {
     const pageProps = usePageProps({ props, defaultOverrides: { height: '100%', mb: 0, ml: 0, mr: 0, mt: 0 } });
@@ -10,6 +10,13 @@ const FlexPort = ({ children, disableOverflow = false, id = '', ...props }) => {
             marginLeft: pageProps.style.marginLeft,
             marginRight: pageProps.style.marginRight,
             marginTop: pageProps.style.marginTop
-        }, children: _jsx("div", { style: { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, overflow: !disableOverflow && 'auto' }, id: id, children: children }) }));
+        }, children: _jsx("div", { style: {
+                position: 'absolute',
+                top: 0,
+                right: 0,
+                bottom: 0,
+                left: 0,
+                overflow: disableOverflow ? undefined : 'auto'
+            }, id: id, children: children }) }));
 };
 export default memo(FlexPort);

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

@@ -1,9 +1,9 @@
-import type { PageProps } from '@cccsaurora/howler-ui/commons/components/pages/hooks/usePageProps';
+import type { PageProps } from '@tui/core';
 import type { ReactNode } from 'react';
 type FlexVerticalProps = PageProps & {
     flex?: number;
     children: ReactNode;
 };
-declare const FlexVertical: ({ flex, children, ...props }: FlexVerticalProps) => import("react/jsx-runtime").JSX.Element;
+declare const FlexVertical: ({ flex, children, ...props }: FlexVerticalProps) => import("react").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof FlexVertical>;
 export default _default;

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import usePageProps from '@cccsaurora/howler-ui/commons/components/pages/hooks/usePageProps';
+import { usePageProps } from '@tui/core';
 import { memo } from 'react';
 const FlexVertical = ({ flex = 1, children, ...props }) => {
     const pageProps = usePageProps({ props, defaultOverrides: { mb: 0, ml: 0, mr: 0, mt: 0 } });

package/components/elements/addons/layout/vsbox/VSBox.d.ts

@@ -1,5 +1,5 @@
 import { type StackProps } from '@mui/material';
-type VSBoxProps = StackProps & {
+type VSBoxProps = Omit<StackProps, 'top'> & {
     top?: number;
 };
 type VSBoxState = {
@@ -12,5 +12,5 @@ export declare const VSBoxContext: import("react").Context<{
     state: VSBoxState;
     setState?: (state: VSBoxState) => void;
 }>;
-declare const VSBox: ({ top, children, ...stackProps }: VSBoxProps) => import("react/jsx-runtime").JSX.Element;
+declare const VSBox: ({ top, children, ...stackProps }: VSBoxProps) => import("react").JSX.Element;
 export default VSBox;

package/components/elements/addons/layout/vsbox/VSBox.js

@@ -1,21 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Stack } from '@mui/material';
-import { useAppBar, useAppBarHeight } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import { useAppBar, useAppBarHeight } from '@tui/core';
 import { createContext, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { notNil } from '@cccsaurora/howler-ui/utils/utils';
 export const VSBoxContext = createContext({
     state: { top: 0, scrollTop: 0 }
 });
 const VSBox = ({ top, children, ...stackProps }) => {
-    const ref = useRef();
+    const ref = useRef(null);
     const appbarHeight = useAppBarHeight();
     const { autoHide } = useAppBar();
-    const [state, setState] = useState({ top, scrollTop: top });
+    const [state, setState] = useState({ top: top ?? 0, scrollTop: top ?? 0 });
     useLayoutEffect(() => {
         // const tableHeader = content?.querySelector(':first-child[data-tuitable]') as HTMLDivElement;
         const header = ref.current?.querySelector('[data-vsbox-header]');
         const content = ref.current?.querySelector('[data-vsbox-content]');
         // Explicit top or appbar height.
-        const _top = top !== undefined && top !== null ? top : autoHide ? 0 : appbarHeight;
+        const _top = notNil(top) ? top : autoHide ? 0 : appbarHeight;
         // We compute scroll top value on demand in order to ensure the
         //  header element is fully rendered.
         const _scrollTop = _top + (header?.offsetHeight || 0);

package/components/elements/addons/layout/vsbox/VSBoxElement.d.ts

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

package/components/elements/addons/layout/vsbox/VSBoxHeader.js

@@ -2,15 +2,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, useTheme } from '@mui/material';
 import { useContext, useEffect, useRef } from 'react';
 import { useResizeDetector } from 'react-resize-detector';
+import { notNil } from '@cccsaurora/howler-ui/utils/utils';
 import { VSBoxContext } from './VSBox';
 const VSBoxHeader = ({ children, ...boxProps }) => {
     const theme = useTheme();
-    const heightRef = useRef();
+    const heightRef = useRef(undefined);
     const { height, ref } = useResizeDetector({ handleWidth: false });
     const { state, setState } = useContext(VSBoxContext);
     useEffect(() => {
-        if (height !== heightRef.current) {
-            setState({ ...state, scrollTop: state.top + height });
+        if (notNil(height) && height !== heightRef.current) {
+            setState?.({ ...state, scrollTop: state.top + height });
             heightRef.current = height;
         }
     }, [height, state, setState]);

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

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

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
+import { AppListEmpty } from '@tui/core';
 import { memo } from 'react';
 import TuiListBase from './TuiListBase';
 import TuiListElement from './TuiListElement';

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

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

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { emphasize, styled } from '@mui/material';
-import { useAppBar, useAppBarHeight, useAppLayout } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import { useAppBar, useAppBarHeight, useAppLayout } from '@tui/core';
 import useTuiListKeyboard from '@cccsaurora/howler-ui/components/elements/addons/lists/hooks/useTuiListKeyboard';
 import { memo, useCallback, useContext, useEffect, useLayoutEffect, useRef } from 'react';
 import { TuiListItemsContext, TuiListMethodContext } from './TuiListProvider';
@@ -37,7 +37,7 @@ const TuiListBaseRoot = styled('div')(({ theme }) => ({
     }
 }));
 const TuiListBase = ({ keyboard = false, onSelect, children }) => {
-    const listEl = useRef();
+    const listEl = useRef(null);
     const appbar = useAppBar();
     const appbarHeight = useAppBarHeight();
     const layout = useAppLayout();
@@ -45,7 +45,7 @@ const TuiListBase = ({ keyboard = false, onSelect, children }) => {
     const { select } = useContext(TuiListMethodContext);
     const onItemSelect = useCallback((selection, index) => {
         const newItem = select(selection, index);
-        if (onSelect) {
+        if (newItem && onSelect) {
             onSelect(newItem, index);
         }
     }, [select, onSelect]);
@@ -57,7 +57,7 @@ const TuiListBase = ({ keyboard = false, onSelect, children }) => {
     }, [keyboard, register]);
     useLayoutEffect(() => {
         if (keyboard) {
-            listEl.current.focus({ preventScroll: true });
+            listEl.current?.focus({ preventScroll: true });
         }
     }, [keyboard]);
     return (_jsx(TuiListBaseRoot, { ref: listEl, tabIndex: -1, "data-tuiappbar-height": appbarHeight, "data-tuilayout": layout.current, "data-tuiappbar-autohide": appbar.autoHide, children: children(items, onItemSelect) }));

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

@@ -5,6 +5,6 @@ type TuiListElementProps<T> = {
     onSelect?: TuiListItemOnSelect<T>;
     children: TuiListItemRenderer<T>;
 };
-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>;
+declare const TuiListElement: <T>({ position, item, onSelect: onClick, children }: TuiListElementProps<T>) => import("react").JSX.Element;
+declare const _default: typeof TuiListElement;
 export default _default;

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

@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, useCallback, useRef } from 'react';
 import VSBoxElement from '../layout/vsbox/VSBoxElement';
 const TuiListElement = ({ position, item, onSelect: onClick, children }) => {
-    const elementEl = useRef();
-    const onItemClick = useCallback(_event => {
+    const elementEl = useRef(null);
+    const onItemClick = useCallback((_event) => {
         if (onClick && !item.disabled) {
             onClick(item, position);
         }

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

@@ -1,41 +1,17 @@
 import type { CSSProperties, ReactElement } from 'react';
+type PlacementBox = {
+    top: number | undefined;
+    right: number | undefined;
+    bottom: number | undefined;
+    left: number | undefined;
+};
 declare const PLACEMENTS: {
-    right: {
-        top: number;
-        right: number;
-        bottom: number;
-        left: any;
-    };
-    left: {
-        top: number;
-        right: any;
-        bottom: number;
-        left: number;
-    };
-    'top-left': {
-        top: number;
-        right: any;
-        bottom: any;
-        left: number;
-    };
-    'top-right': {
-        top: number;
-        right: number;
-        bottom: any;
-        left: any;
-    };
-    'bottom-left': {
-        top: any;
-        right: any;
-        bottom: number;
-        left: number;
-    };
-    'bottom-right': {
-        top: any;
-        right: number;
-        bottom: number;
-        left: any;
-    };
+    right: PlacementBox;
+    left: PlacementBox;
+    'top-left': PlacementBox;
+    'top-right': PlacementBox;
+    'bottom-left': PlacementBox;
+    'bottom-right': PlacementBox;
 };
 type TuiListMenuProps = {
     permanent?: boolean;
@@ -45,6 +21,6 @@ type TuiListMenuProps = {
     children: ReactElement | ReactElement[];
 };
 export type TuiListMenuPlacement = keyof typeof PLACEMENTS;
-declare const TuiListMenu: ({ style, className, permanent, placement, children }: TuiListMenuProps) => import("react/jsx-runtime").JSX.Element;
+declare const TuiListMenu: ({ style, className, permanent, placement, children }: TuiListMenuProps) => import("react").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof TuiListMenu>;
 export default _default;

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

@@ -3,18 +3,18 @@ import { styled } from '@mui/material';
 import { memo } from 'react';
 const MY_PROPS = ['permanent', 'placement'];
 const PLACEMENTS = {
-    right: { top: 0, right: 0, bottom: 0, left: null },
-    left: { top: 0, right: null, bottom: 0, left: 0 },
-    'top-left': { top: 0, right: null, bottom: null, left: 0 },
-    'top-right': { top: 0, right: 0, bottom: null, left: null },
-    'bottom-left': { top: null, right: null, bottom: 0, left: 0 },
-    'bottom-right': { top: null, right: 0, bottom: 0, left: null }
+    right: { top: 0, right: 0, bottom: 0, left: undefined },
+    left: { top: 0, right: undefined, bottom: 0, left: 0 },
+    'top-left': { top: 0, right: undefined, bottom: undefined, left: 0 },
+    'top-right': { top: 0, right: 0, bottom: undefined, left: undefined },
+    'bottom-left': { top: undefined, right: undefined, bottom: 0, left: 0 },
+    'bottom-right': { top: undefined, right: 0, bottom: 0, left: undefined }
 };
 const TuiListMenuRoot = styled('div', { shouldForwardProp: prop => !MY_PROPS.includes(prop) })(({ theme, permanent, placement }) => {
     const position = PLACEMENTS[placement];
     return {
         ...position,
-        zIndex: position ? 100 : null,
+        zIndex: position ? 100 : undefined,
         display: permanent ? 'flex' : 'none',
         position: position ? 'absolute' : 'inherit',
         alignItems: 'center',
@@ -28,6 +28,6 @@ const TuiListMenuRoot = styled('div', { shouldForwardProp: prop => !MY_PROPS.inc
 });
 // TODO: placement property (top-left, top-right, bottom-left, bottom-right)
 const TuiListMenu = ({ style, className, permanent, placement, children }) => {
-    return (_jsx(TuiListMenuRoot, { permanent: permanent, placement: placement, style: style, className: `actions ${className || ''}`, onClick: event => event.stopPropagation(), children: children }));
+    return (_jsx(TuiListMenuRoot, { permanent: !!permanent, placement: placement ?? 'right', style: style, className: `actions ${className || ''}`, onClick: event => event.stopPropagation(), children: children }));
 };
 export default memo(TuiListMenu);

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

@@ -3,7 +3,7 @@ import type { TuiListItem } from '.';
 export type TuiListMethodsState<T> = {
     load: (items: TuiListItem<T>[]) => void;
     move: (index: number) => void;
-    select: (item: TuiListItem<T>, index: number) => TuiListItem<T>;
+    select: (item: TuiListItem<T>, index: number) => TuiListItem<T> | null;
     replace: (item: TuiListItem<T>, newItem: TuiListItem<T>) => void;
     replaceById: (item: TuiListItem<T>, newItem: TuiListItem<T>) => void;
     remove: (id: string) => void;
@@ -18,5 +18,5 @@ export declare const TuiListItemsContext: import("react").Context<TuiListItemsSt
 type TuiListProviderProps = {
     children: ReactNode;
 };
-declare const TuiListProvider: <T>({ children }: TuiListProviderProps) => import("react/jsx-runtime").JSX.Element;
+declare const TuiListProvider: <T>({ children }: TuiListProviderProps) => import("react").JSX.Element;
 export default TuiListProvider;

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { isNil } from 'lodash-es';
 import { createContext, useCallback, useMemo, useState } from 'react';
 const DEFAULT_METHODS_STATE = {
     load: () => null,
@@ -9,7 +10,6 @@ const DEFAULT_METHODS_STATE = {
     remove: () => null
 };
 const DEFAULT_ITEMS_STATE = {
-    size: 0,
     items: [],
     movePrevious: () => null,
     moveNext: () => null
@@ -25,9 +25,9 @@ const TuiListProvider = ({ children }) => {
                 if (previous) {
                     return {
                         ...i,
-                        cursor: i.cursor === undefined ? previous.cursor : i.cursor,
-                        selected: i.selected === undefined ? previous.selected : i.selected,
-                        details: i.details === undefined ? previous.details : i.details
+                        cursor: isNil(i.cursor) ? previous.cursor : i.cursor,
+                        selected: isNil(i.selected) ? previous.selected : i.selected,
+                        details: isNil(i.details) ? previous.details : i.details
                     };
                 }
                 return i;

package/components/elements/addons/lists/hooks/useTuiListKeyboard.js

@@ -1,4 +1,4 @@
-import { isArrowDown, isArrowUp, isEnter } from '@cccsaurora/howler-ui/commons/components/utils/keyboard';
+import { isArrowDown, isArrowUp, isEnter } from '@tui/core';
 import { useCallback, useContext, useMemo } from 'react';
 import Throttler from '@cccsaurora/howler-ui/utils/Throttler';
 import { TuiListItemsContext } from '../TuiListProvider';

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

@@ -10,5 +10,5 @@ type TuiTableProps<T> = {
     detailRenderer?: TuiTableRowDetailRenderer<T>;
     children?: TuiTableCellRenderer<T>;
 };
-declare const TuiTable: <T>({ keyboard, flexPort, headless, columns, onRowSelect, menuRenderer, detailRenderer, children }: TuiTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const TuiTable: <T>({ keyboard, flexPort, headless, columns, onRowSelect, menuRenderer, detailRenderer, children }: TuiTableProps<T>) => import("react").JSX.Element;
 export default TuiTable;

package/components/elements/addons/lists/table/TuiTable.js

@@ -69,7 +69,7 @@ const TuiTable = ({ keyboard, flexPort, headless, columns, onRowSelect, menuRend
     }, [flexPort, layout, width, columns]);
     useEffect(() => {
         if (flexPort && layout) {
-            if (bodyWidth && bodyWidth !== widthRef.current) {
+            if (width && bodyWidth && bodyWidth !== widthRef.current) {
                 setLayout(new TuiTableLayout(width, bodyWidth, columns));
             }
             widthRef.current = bodyWidth;

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

@@ -10,5 +10,5 @@ type TuiTableBodyProps<T> = {
     detailRenderer?: TuiTableRowDetailRenderer<T>;
     children?: TuiTableCellRenderer<T>;
 };
-declare const TuiTableBody: <T>({ keyboard, layout, columns, onRowSelect, menuRenderer, detailRenderer, children }: TuiTableBodyProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const TuiTableBody: <T>({ keyboard, layout, columns, onRowSelect, menuRenderer, detailRenderer, children }: TuiTableBodyProps<T>) => import("react").JSX.Element;
 export default TuiTableBody;

package/components/elements/addons/lists/table/TuiTableBody.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AppListEmpty } from '@tui/core';
 import { Collapse } from '@mui/material';
-import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
 import { get } from 'lodash-es';
 import { useCallback } from 'react';
 import { TuiListElement } from '..';

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

@@ -4,5 +4,5 @@ type TuiTableHeaderProps = {
     layout: TuiTableLayout;
     columns: TuiTableColumn[];
 };
-declare const TuiTableHead: ({ layout, columns }: TuiTableHeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const TuiTableHead: ({ layout, columns }: TuiTableHeaderProps) => import("react").JSX.Element;
 export default TuiTableHead;

package/components/elements/addons/lists/table/TuiTableHead.js

@@ -4,6 +4,6 @@ import { useContext } from 'react';
 import TuiTableHeader from './TuiTableHeader';
 const TuiTableHead = ({ layout, columns }) => {
     const { state: { scrollTop } } = useContext(VSBoxContext);
-    return (_jsx("div", { "data-tuitable-header": "true", className: "tui-table-head tui-table-divider", style: { position: scrollTop ? 'sticky' : null, top: scrollTop || null }, children: columns.map(column => (_jsx(TuiTableHeader, { width: layout.getWidth(column.column, true), column: column }, column.column))) }));
+    return (_jsx("div", { "data-tuitable-header": "true", className: "tui-table-head tui-table-divider", style: { position: scrollTop ? 'sticky' : undefined, top: scrollTop || undefined }, children: columns.map(column => (_jsx(TuiTableHeader, { width: layout.getWidth(column.column, true), column: column }, column.column))) }));
 };
 export default TuiTableHead;

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

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