@topconsultnpm/sdkui-react 6.20.0-dev1.14 → 6.20.0-dev1.15

package/lib/components/base/TMList.js

@@ -1,54 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import styled from 'styled-components';
-import { TMColors } from '../../utils/theme';
-const StyledListItem = styled.li `
-  display: flex; 
-  flex-direction: row; 
-  align-items: center; 
-  justify-content: flex-start;
-  gap: 10px;
-  position: relative;
-  color: ${TMColors.text_normal};
-  padding: 4px 5px;
-  height: 40px;
-  width: 100%;
-  font-size: 1rem;
-  letter-spacing: 0px;
-  background-color: ${({ $isSelected }) => ($isSelected ? '#d0e5fb' : 'transparent')};
-
-  &:hover {
-        background-color: ${TMColors.border_normal};
-        cursor: pointer;
-    }
-`;
-const StyledListContainer = styled.div `
-  height: 100%;
-  width: 100%;
-  background-color: ${TMColors.default_background};
-  padding: 3px;
-  border-radius: 2px;
-  box-shadow: 1px 1px 7px rgba(0,0,0,0.15);
-`;
-const StyledIconWrapper = styled.span `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  min-width: 24px;
-  min-height: 24px;
-`;
-;
-const TMList = ({ items }) => {
-    const [selectedIndex, setSelectedIndex] = useState(0);
-    const handleItemClick = (index, onClick) => {
-        setSelectedIndex(index); // Update the selected index
-        if (onClick)
-            onClick(); // Call the item's onClick handler if provided
-    };
-    return (_jsx(StyledListContainer, { children: items?.map((item, index) => {
-            return (_jsxs(StyledListItem, { "$isSelected": selectedIndex === index, onClick: () => handleItemClick(index, item.onClick), children: [_jsx(StyledIconWrapper, { children: item.icon }), _jsx("span", { children: item.text })] }, index));
-        }) }));
-};
-export default TMList;

package/lib/components/base/TMListView.d.ts

@@ -1,42 +0,0 @@
-import React from 'react';
-interface ITMListViewHeader {
-    headerIcon?: React.ReactNode;
-    headerTitle?: string;
-    firstCounter?: React.ReactNode;
-    secondCounter?: React.ReactNode;
-    titleColor?: string;
-}
-interface ListProps<T> {
-    dataSource?: T[];
-    selectedItem?: T;
-    autoScrollToSelectedItem?: boolean;
-    exprKey?: string;
-    searchKeys?: string[];
-    customColor?: string;
-    searchable?: boolean;
-    id?: string;
-    scroll?: {
-        x: number;
-        y: number;
-    };
-    orderBy?: string;
-    grouping?: string;
-    showId?: boolean;
-    showSearch?: boolean;
-    header?: React.ReactNode;
-    headerBackGroundColor?: string;
-    customGroupingHeaders?: Array<React.ReactNode>;
-    setShowId?: React.Dispatch<React.SetStateAction<boolean>>;
-    setShowSearch?: React.Dispatch<React.SetStateAction<boolean>>;
-    onScrollChange?: (e: {
-        x: number;
-        y: number;
-    }) => void;
-    onSelectionChanged?: (item: T) => void;
-    onItemClick?: (item: T) => void;
-    onItemDblClick?: (item: T) => void;
-    itemTemplate?: (item: T) => JSX.Element;
-}
-declare const TMListView: <T>({ customGroupingHeaders, headerBackGroundColor, header, showId, setShowId, showSearch, setShowSearch, grouping, orderBy, id, onScrollChange, scroll, searchKeys, searchable, itemTemplate, customColor, dataSource, exprKey, onSelectionChanged, onItemClick, onItemDblClick, selectedItem, autoScrollToSelectedItem }: ListProps<T>) => import("react/jsx-runtime").JSX.Element;
-export default TMListView;
-export declare const CustomListViewHeader: React.FC<ITMListViewHeader>;

package/lib/components/base/TMListView.js

@@ -1,387 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from 'react';
-import styled from 'styled-components';
-import { ObjectClasses } from '@topconsultnpm/sdk-ts';
-import TMContextMenu, { useTMContextMenu } from './TMContextMenu';
-import { IconApply, IconCloseCircle, IconColumns, IconDown, IconHide, IconShow, IconUp, IconVisible } from '../../helper/TMIcons';
-import { TMSearchBar } from '../sidebar/TMHeader';
-import TMTooltip from './TMTooltip';
-import { getContrastColor, SDKUI_Localizator } from '../../helper';
-import { TMColors } from '../../utils/theme';
-const StyledListItem = styled.div ` width: 100%; height: max-content; border-bottom: 1px solid #e5e5e5; background-color: ${props => props.$isSelected ? props.$color ? `${props.$color}99` : '#00000030' : 'transparent'} ; color: ${props => props.$isSelected ? props.$textColor : '#000000'} ; &:hover{ background-color: ${props => props.$color ? props.$isSelected ? `${props.$color}99` : `${props.$color}40` : props.$isSelected ? '#00000030' : '#00000010'};} `;
-const StyledListViewContainer = styled.div ` position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 100%; height: 100%; `;
-const StyledSearchContainer = styled.div ` width: 100%; height: max-content; padding: 5px; border-bottom: 1px solid #e5e5e5; display: flex; align-items: center; gap: 10px; `;
-const StyledListViewFooter = styled.div ` background-color: ${props => props.$bgColor}; width: 100%; height: 25px; padding: 5px 15px; border-top: 1px solid #e5e5e5; display: flex; align-items: center; gap: 10px; `;
-const TMListView = ({ customGroupingHeaders, headerBackGroundColor, header, showId, setShowId, showSearch, setShowSearch, grouping = '', orderBy, id, onScrollChange, scroll, searchKeys = [], searchable = false, itemTemplate, customColor, dataSource = [], exprKey = 'id', onSelectionChanged, onItemClick, onItemDblClick, selectedItem, autoScrollToSelectedItem = false }) => {
-    const listRef = useRef(null);
-    const contRef = useRef(null);
-    const orderRef = useRef(null);
-    const [localShowId, setLocalShowId] = useState(false);
-    const [localShowSearch, setLocalShowSearch] = useState(searchable);
-    const [searchValue, setSearchValue] = useState('');
-    const [currentDataSource, setCurrentDataSource] = useState(dataSource);
-    const [keys, setKeys] = useState(searchKeys);
-    const [orderedBy, setOrderedBy] = useState(orderBy ?? '');
-    const [orderDir, setOrderDir] = useState(true);
-    const [isFocused, setIsFocused] = useState(false);
-    const [showOrderMenu, setShowOrderMenu] = useState(false);
-    const [showOrderOptions, setShowOrderOptions] = useState(false);
-    useEffect(() => { setCurrentDataSource(dataSource); }, [dataSource]);
-    const openContextMenu = (e) => { setIsFocused(true); };
-    let [coords, show] = useTMContextMenu(contRef);
-    useEffect(() => { if (orderBy) {
-        setOrderedBy(orderBy);
-    } }, [orderBy]);
-    // is list item selected
-    const isSelected = (item) => {
-        if (selectedItem) {
-            if (item[exprKey] === selectedItem[exprKey]) {
-                return true;
-            }
-            else
-                return false;
-        }
-        else
-            return false;
-    };
-    // order by key
-    const orderByKey = (array) => {
-        let arr = [...array];
-        if (arr.length > 0 && arr[0][orderedBy]) {
-            if (typeof arr[0][orderedBy] === 'string') {
-                arr.sort((a, b) => { if (a[orderedBy].toLowerCase() < b[orderedBy].toLowerCase()) {
-                    return -1;
-                } if (a[orderedBy].toLowerCase() > b[orderedBy].toLowerCase()) {
-                    return 1;
-                } return 0; });
-            }
-            else {
-                arr.sort((a, b) => { if (a[orderedBy] < b[orderedBy]) {
-                    return -1;
-                } if (a[orderedBy] > b[orderedBy]) {
-                    return 1;
-                } return 0; });
-            }
-        }
-        return orderDir ? arr : arr.reverse();
-    };
-    // search keys
-    useEffect(() => {
-        if (currentDataSource && currentDataSource.length > 0) {
-            if (searchKeys.length === 0) {
-                setKeys(Object.keys(currentDataSource[0]));
-            }
-            else {
-                setKeys(searchKeys);
-            }
-        }
-    }, []);
-    // search logic
-    useEffect(() => {
-        let arr = [];
-        if (searchValue.length > 0) {
-            for (let data of dataSource) {
-                for (let key of keys) {
-                    if (typeof data[key] === 'string' || typeof data[key] === 'number') {
-                        if (data[key].toString().toLowerCase().includes(searchValue.toLowerCase())) {
-                            if (!arr.includes(data)) {
-                                arr.push(data);
-                            }
-                        }
-                    }
-                }
-            }
-            if (orderedBy.length === 0) {
-                setCurrentDataSource(arr);
-            }
-            else {
-                setCurrentDataSource(orderByKey(arr));
-            }
-        }
-        else {
-            if (orderedBy.length === 0) {
-                setCurrentDataSource(dataSource);
-            }
-            else {
-                setCurrentDataSource(orderByKey(dataSource));
-            }
-        }
-    }, [searchValue, keys, orderedBy, dataSource]);
-    useEffect(() => { if (!localShowSearch) {
-        setSearchValue('');
-    } }, [localShowSearch]);
-    // order logic
-    useEffect(() => { if (orderedBy.length > 0) {
-        setCurrentDataSource(orderByKey(currentDataSource));
-    } }, [orderedBy, orderDir]);
-    // change items by arrow keys logic
-    useEffect(() => {
-        let selectedItemIndex = currentDataSource.indexOf(selectedItem);
-        const canNext = selectedItem !== currentDataSource[currentDataSource.length - 1];
-        const canPrev = selectedItem !== currentDataSource[0];
-        let cont = listRef.current;
-        let next = currentDataSource.indexOf(selectedItem) + 1;
-        let before = currentDataSource.indexOf(selectedItem) - 1;
-        const changeIndex = (e) => {
-            if (isFocused) {
-                if (e.key === 'ArrowDown') {
-                    e.preventDefault();
-                    if (canNext) {
-                        onSelectionChanged && onSelectionChanged(currentDataSource[selectedItemIndex + 1]);
-                        if (selectedItem && cont) {
-                            let diff = cont.scrollTop;
-                            let xNext = cont.children.item(next);
-                            if (xNext) {
-                                if (xNext.getBoundingClientRect().bottom > (cont.getBoundingClientRect().height + cont.getBoundingClientRect().top)) {
-                                    diff += xNext.getBoundingClientRect().bottom - (cont.getBoundingClientRect().height + cont.getBoundingClientRect().top);
-                                }
-                            }
-                            cont.scrollTo(0, diff);
-                        }
-                    }
-                }
-                if (e.key === 'ArrowUp') {
-                    e.preventDefault();
-                    if (canPrev) {
-                        onSelectionChanged && onSelectionChanged(currentDataSource[selectedItemIndex - 1]);
-                        if (selectedItem && cont) {
-                            let diff = cont.scrollTop;
-                            let xBefore = cont.children.item(before);
-                            if (xBefore) {
-                                if (xBefore.getBoundingClientRect().top < (cont.getBoundingClientRect().top)) {
-                                    diff -= cont.getBoundingClientRect().top - xBefore.getBoundingClientRect().top;
-                                }
-                            }
-                            cont.scrollTo(0, diff);
-                        }
-                    }
-                }
-                if (e.key === 'ArrowLeft') {
-                    e.preventDefault();
-                    if (cont) {
-                        cont.scrollBy(-20, 0);
-                    }
-                }
-                if (e.key === 'ArrowRight') {
-                    e.preventDefault();
-                    if (cont) {
-                        cont.scrollBy(20, 0);
-                    }
-                }
-            }
-        };
-        if (selectedItem) {
-            document.addEventListener('keydown', changeIndex);
-        }
-        return () => { document?.removeEventListener('keydown', changeIndex); };
-    }, [selectedItem, isFocused]);
-    // deselect an onBlur listview logic
-    useEffect(() => {
-        const list = listRef.current;
-        const deSelectAll = (e) => { if (list && !list.contains(e.target)) {
-            setIsFocused(false);
-        } };
-        window.addEventListener('click', deSelectAll);
-        window.addEventListener('contextmenu', deSelectAll);
-        return () => { window.removeEventListener('click', deSelectAll); window.removeEventListener('contextmenu', deSelectAll); };
-    }, []);
-    // scroll logic
-    useEffect(() => {
-        let cont = listRef.current;
-        if (cont && scroll) {
-            cont.addEventListener('scroll', () => onScrollChange && onScrollChange({ x: cont?.scrollLeft, y: cont?.scrollTop }));
-        }
-        return () => cont?.removeEventListener('scroll', () => onScrollChange && onScrollChange({ x: cont?.scrollLeft, y: cont?.scrollTop }));
-    }, [listRef.current]);
-    useEffect(() => { let cont = listRef.current; if (cont && scroll) {
-        cont.scrollTo(scroll.x, scroll.y);
-    } ; }, [scroll, listRef.current]);
-    // This effect runs when either selectedItem or dataSource changes
-    useEffect(() => {
-        // Check if the selected item, list reference, dataSource, and autoScrollToSelectedItem are properly set
-        if (selectedItem && listRef.current && dataSource.length > 0 && autoScrollToSelectedItem) {
-            // Extract the unique key of the selected item using exprKey
-            const selectedItemKey = selectedItem[exprKey];
-            // Find the index of the selected item in the dataSource using the key
-            const selectedItemIndex = dataSource.findIndex(item => item[exprKey] === selectedItemKey);
-            // If the item is found in the dataSource (index is not -1)
-            if (selectedItemIndex !== -1 && listRef.current) {
-                // Access the list container (the parent element holding the list)
-                const listContainer = listRef.current;
-                // Get all child elements of the list container (individual items)
-                const listItems = listContainer.children;
-                // Get the actual DOM element of the selected item
-                const selectedItemElement = listItems[selectedItemIndex];
-                // If the selected item element exists in the DOM
-                if (selectedItemElement) {
-                    // Use setTimeout to delay the scroll action for 500ms to ensure DOM elements are fully rendered
-                    setTimeout(() => {
-                        // Calculate the offsetTop of the selected item (its position relative to the container)
-                        const offset = selectedItemElement.offsetTop;
-                        // Scroll the list container smoothly to position the selected item in the center of the container
-                        listContainer.scrollTo({
-                            top: offset - listContainer.clientHeight / 2, // Subtract half the container height to center the item
-                            behavior: 'smooth', // Smooth scrolling
-                        });
-                    }, 500); // Delay to allow for DOM rendering before scrolling
-                }
-            }
-        }
-    }, [selectedItem, dataSource]);
-    //order options
-    const orderMenuItems = () => {
-        let arr = [];
-        if (searchKeys.length > 0) {
-            for (let key of searchKeys) {
-                arr.push({
-                    disabled: !localShowId && key === exprKey,
-                    isSelected: key === orderedBy,
-                    onItemClick: () => { setOrderedBy(key); setShowOrderOptions(false); },
-                    icon: _jsx(IconColumns, { fontSize: 16 }),
-                    text: _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 10 }, children: [key, " ", key === orderedBy && _jsx(IconApply, { fontSize: 14, color: 'gray' })] })
-                });
-            }
-        }
-        return arr;
-    };
-    // grouping loginc
-    const groupKeys = Object.keys(groupByKey(currentDataSource, grouping));
-    const [openList, setOpenList] = useState([true, false, false]);
-    function groupByKey(array, key) {
-        return array
-            .reduce((hash, obj) => {
-            if (obj[key] === undefined)
-                return hash;
-            return Object.assign(hash, { [obj[key]]: (hash[obj[key]] || []).concat(obj) });
-        }, {});
-    }
-    // map memo
-    const memoList = useMemo(() => currentDataSource.map((data, index) => {
-        return (_jsx(StyledListItem, { "$isSelected": isSelected(data), "$color": getContrastColor(customColor).bgColor, "$textColor": getContrastColor(customColor).textColor, onClick: () => { onSelectionChanged && onSelectionChanged(data); onItemClick && onItemClick(data); }, onDoubleClick: () => onItemDblClick && onItemDblClick(data), children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'flex-start', gap: 5, padding: '5px 5px' }, children: [localShowId && _jsxs("p", { style: { color: isSelected(data) ? 'red' : 'black', backgroundColor: `${customColor}20`, width: '100%', padding: '2px 5px', borderRadius: '5px', height: 'max-content', textAlign: 'left' }, children: [" ", exprKey + ' : ' + data[exprKey], " "] }), _jsxs("div", { style: { width: '100%', height: '100%' }, children: [" ", itemTemplate ? itemTemplate(data) : _jsx("div", {})] })] }) }, index));
-    }), [currentDataSource, selectedItem, localShowId, customColor]);
-    const groupedMemoList = useMemo(() => groupKeys.map((key, index) => {
-        const groupingText = () => {
-            if (grouping === 'objectClass') {
-                if (key === ObjectClasses.Dossier) {
-                    return 'Pratiche';
-                }
-                else if (key === ObjectClasses.WorkingGroup) {
-                    return 'Gruppi di lavoro';
-                }
-                else if (key === ObjectClasses.SavedQuery) {
-                    return 'Ricerche rapide';
-                }
-                else
-                    return '';
-            }
-            else {
-                return key;
-            }
-        };
-        return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', width: '100%', height: 'max-content' }, children: [_jsx("div", { style: { borderBottom: `1px solid ${customColor}20`, display: 'flex', alignItems: 'center', height: '40px', justifyContent: 'space-between', padding: '5px', width: '100%', backgroundColor: headerBackGroundColor ?? `${customColor}30` }, children: _jsxs("div", { style: { width: '100%', height: 'max-content', display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }, children: [customGroupingHeaders && customGroupingHeaders.length > 0 ?
-                                customGroupingHeaders[index] ?
-                                    _jsx("div", { style: { width: '100%', height: '100%', display: 'flex', alignItems: 'center' }, children: customGroupingHeaders[index] })
-                                    :
-                                        _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 10 }, children: [_jsx("p", { children: groupingText() }), _jsx("div", { style: { width: '16px', height: '16px', display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: getContrastColor(customColor).textColor, color: getContrastColor(customColor).bgColor, boxShadow: '1px 1px 2px #00000020', borderRadius: '30px', fontWeight: 'bold' }, children: groupByKey(currentDataSource, grouping)[key].length })] })
-                                :
-                                    _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 10 }, children: [_jsx("p", { children: groupingText() }), _jsx("div", { style: { width: '16px', height: '16px', display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: getContrastColor(customColor).textColor, color: getContrastColor(customColor).bgColor, boxShadow: '1px 1px 2px #00000020', borderRadius: '30px', fontWeight: 'bold' }, children: groupByKey(currentDataSource, grouping)[key].length })] }), _jsxs("div", { style: { cursor: 'pointer' }, onClick: () => { let arr = [...openList]; arr[index] = !arr[index]; setOpenList(arr); }, children: [" ", openList[index] ? _jsx(IconUp, { fontSize: 12 }) : _jsx(IconDown, { fontSize: 12 }), " "] })] }) }), openList[index] && _jsx("div", { style: { width: '100%', height: '100%' }, children: groupByKey(currentDataSource, grouping)[key].map((data, index2) => (_jsx(StyledListItem, { "$isSelected": data === selectedItem, "$color": getContrastColor(customColor).bgColor, "$textColor": getContrastColor(customColor).textColor, onClick: () => { onSelectionChanged && onSelectionChanged(data); onItemClick && onItemClick(data); }, onDoubleClick: () => { onItemDblClick && onItemDblClick(data); }, children: _jsxs("div", { style: { width: '100%', height: 'max-content', display: 'flex', flexDirection: 'column', padding: '5px 5px' }, children: [localShowId && _jsxs("p", { style: { color: data === selectedItem ? 'red' : 'black', backgroundColor: `${customColor}20`, width: '100%', padding: '2px 5px', borderRadius: '5px', height: 'max-content', textAlign: 'left' }, children: [" ", 'ID: ' + data.id, " "] }), _jsxs("div", { style: { width: '100%', height: '100%' }, children: [" ", itemTemplate ? itemTemplate(data) : _jsx("div", {})] })] }) }, index2))) })] }, index));
-    }), [currentDataSource, selectedItem, localShowId, customColor, openList, grouping, customGroupingHeaders]);
-    // List height
-    const listHeight = () => {
-        if (localShowSearch) {
-            if (showOrderMenu || searchValue.length > 0) {
-                return 'calc(100% - 55px)';
-            }
-            else {
-                return 'calc(100% - 30px)';
-            }
-        }
-        else if (showOrderMenu || searchValue.length > 0) {
-            return 'calc(100% - 25px)';
-        }
-        else
-            return '100%';
-    };
-    useEffect(() => {
-        if (showId === undefined || showId === localShowId)
-            return;
-        setLocalShowId(showId);
-    }, [showId]);
-    useEffect(() => {
-        if (showSearch === undefined || showSearch === localShowSearch)
-            return;
-        setLocalShowSearch(showSearch);
-    }, [showSearch]);
-    useEffect(() => {
-        if (showId === undefined || setShowId === undefined || showId === localShowId)
-            return;
-        setShowId(localShowId);
-    }, [localShowId]);
-    useEffect(() => {
-        if (showSearch === undefined || setShowSearch === undefined || showSearch === localShowSearch)
-            return;
-        setShowSearch(localShowSearch);
-    }, [localShowSearch]);
-    const generateContextMenuItems = (localShowSearch, localShowId, showOrderMenu, grouping, searchKeys) => {
-        const items = [];
-        // Add search menu item only if showSearch prop is undefined
-        if (showSearch === undefined) {
-            items.push({
-                icon: localShowSearch ? _jsx(IconHide, { fontSize: 16 }) : _jsx(IconShow, { fontSize: 16 }),
-                onItemClick: () => setLocalShowSearch(!localShowSearch),
-                text: localShowSearch ? SDKUI_Localizator.HideSearch : SDKUI_Localizator.ShowSearch
-            });
-        }
-        // Add ID menu item only if showId prop is undefined
-        if (showId === undefined) {
-            items.push({
-                icon: localShowId ? _jsx(IconHide, { fontSize: 16 }) : _jsx(IconShow, { fontSize: 16 }),
-                onItemClick: () => setLocalShowId(!localShowId),
-                text: localShowId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show,
-            });
-        }
-        // Add order menu item only if grouping length is zero
-        if (grouping.length === 0) {
-            items.push({
-                icon: showOrderMenu ? _jsx(IconHide, { fontSize: 16 }) : _jsx(IconShow, { fontSize: 16 }),
-                disabled: searchKeys.length === 0,
-                onItemClick: () => setShowOrderMenu(!showOrderMenu),
-                text: showOrderMenu ? 'Nascondi menu di ordinamento' : 'Mostra menu di ordinamento'
-            });
-        }
-        return items;
-    };
-    const contextMenuItems = generateContextMenuItems(localShowSearch, localShowId, showOrderMenu, grouping, searchKeys);
-    return (_jsxs(StyledListViewContainer, { ref: contRef, onContextMenu: openContextMenu, children: [(show && contextMenuItems.length > 0) && _jsx(TMContextMenu, { coords: coords, items: contextMenuItems }), showOrderOptions &&
-                _jsx(TMContextMenu, { items: orderMenuItems(), coords: { x: orderRef.current?.getBoundingClientRect().left, y: orderRef.current?.getBoundingClientRect().top - (searchKeys.length * 30) - 10 } }), header && _jsx("div", { style: { width: '100%', height: '40px', backgroundColor: headerBackGroundColor ?? `${customColor}30`, marginBottom: '3px', display: 'flex', alignItems: 'center' }, children: header }), localShowSearch &&
-                _jsx(StyledSearchContainer, { children: _jsxs(StyledSearchContainer, { children: [_jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '300px', searchValue: searchValue, onSearchValueChanged: (e) => setSearchValue(e) }), _jsx(TMTooltip, { content: 'Nascondi ricerca', children: _jsx(IconCloseCircle, { style: { cursor: 'pointer' }, color: 'red', fontSize: 14, onClick: () => { setSearchValue(''); setLocalShowSearch(false); } }) })] }) }), _jsx("div", { ref: listRef, onClick: () => setIsFocused(true), style: { width: '100%', overflow: 'auto', height: listHeight() }, children: currentDataSource.length > 0 ?
-                    grouping.length === 0 ? memoList : groupedMemoList :
-                    searchValue.length > 0 ? _jsx("div", { style: { width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: "No data found" }) :
-                        _jsx("div", { style: { width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: "No data" }) }), (searchValue.length > 0 || showOrderMenu) &&
-                _jsxs(StyledListViewFooter, { "$bgColor": `${customColor}20`, children: [showOrderMenu &&
-                            _jsxs("div", { style: { width: 'max-content', display: 'flex', alignItems: 'center', gap: 5 }, children: [_jsx("div", { style: { width: 'max-content' }, children: "Ordinato per" }), _jsx("div", { ref: orderRef, onClick: () => { setShowOrderOptions(!showOrderOptions); }, style: { cursor: 'pointer', fontWeight: 'bold' }, children: orderedBy.length > 0 ? orderedBy : 'Nulla' }), orderedBy.length > 0 && _jsxs(TMTooltip, { content: orderDir ? 'ASC' : 'DESC', children: [" ", orderDir ? _jsx(IconUp, { style: { cursor: 'pointer' }, onClick: () => setOrderDir(false), fontSize: 14 }) : _jsx(IconDown, { style: { cursor: 'pointer' }, onClick: () => setOrderDir(true), fontSize: 14 }), " "] }), _jsx(TMTooltip, { content: 'Annulla ordinamento', children: _jsx(IconCloseCircle, { style: { cursor: 'pointer' }, color: 'red', fontSize: 14, onClick: () => { setOrderedBy(''); setShowOrderMenu(false); setShowOrderOptions(false); } }) })] }), searchValue.length > 0 && _jsxs("div", { style: { display: 'flex', alignItems: 'center', width: '100%', justifyContent: 'flex-end', gap: 5 }, children: [_jsx(TMTooltip, { content: 'Visibili', children: _jsx(IconVisible, { fontSize: 14 }) }), currentDataSource.length] })] })] }));
-};
-export default TMListView;
-export const CustomListViewHeader = (props) => {
-    return (_jsxs("div", { style: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            padding: '0 5px',
-            gap: 5,
-            width: '100%'
-        }, children: [_jsxs("div", { style: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '5px',
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis'
-                }, children: [props.headerIcon, _jsx("p", { title: props.headerTitle, style: {
-                            fontWeight: 'bold',
-                            color: props.titleColor ? props.titleColor : TMColors.text_normal,
-                            whiteSpace: 'nowrap',
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis'
-                        }, children: props.headerTitle })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '5px' }, children: [props.firstCounter, props.secondCounter] })] }));
-};

package/lib/components/base/TMModal.d.ts

@@ -1,18 +0,0 @@
-import React from 'react';
-interface ITMModal {
-    children?: React.ReactNode;
-    width?: string;
-    height?: string;
-    toolbar?: any;
-    title?: string;
-    fontSize?: string;
-    isModal?: boolean;
-    resizable?: boolean;
-    expandable?: boolean;
-    onClose?: () => void;
-    hidePopup?: boolean;
-    askClosingConfirm?: boolean;
-    showCloseButton?: boolean;
-}
-declare const TMModal: React.FC<ITMModal>;
-export default TMModal;

package/lib/components/base/TMModal.js

@@ -1,115 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect, useRef } from 'react';
-import { Popup } from 'devextreme-react';
-import styled from 'styled-components';
-import TMLayoutContainer, { TMCard, TMLayoutItem } from './TMLayout';
-import { FontSize, TMColors } from '../../utils/theme';
-import { IconWindowMaximize, IconWindowMinimize, svgToString } from '../../helper';
-const StyledModal = styled.div `
-    width: ${props => props.$width};
-    height: ${props => props.$height};
-    position: ${props => (props.$isModal ? 'relative' : 'fixed')};
-    background-color: white;
-    box-shadow: 2px 2px 10px #939393;
-    border-radius: 5px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-    font-size: ${props => props.$fontSize};
-    overflow: hidden;
-    min-height: 33px;
-    min-width: 250px;
-    max-width: 95%;
-    max-height: 95%;
-    z-index: 2000000000;
-`;
-const StyledModalToolbar = styled.div `
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    padding: 5px;
-    flex-direction: row;
-    background-color: ${TMColors.toolbar_background};
-    border-bottom: 1px solid gray;
-`;
-const StyledModalContext = styled.div `
-    width: 100%;
-    overflow: auto;
-    height: 100%;
-`;
-const TMModal = ({ resizable = true, expandable = false, isModal = true, title = '', toolbar, onClose, children, width = '100%', height = '100%', fontSize = FontSize.defaultFontSize, hidePopup = true, askClosingConfirm = false, showCloseButton = true }) => {
-    const popupRef = useRef(null);
-    const [initialWidth, setInitialWidth] = useState(width);
-    const [initialHeight, setInitialHeight] = useState(height);
-    const [showPopup, setShowPopup] = useState(false);
-    const [isResizing, setIsResizing] = useState(false);
-    const [isFullScreen, setIsFullScreen] = useState(false);
-    // Dimensioni minime di default per il popup
-    const DEFAULT_MIN_WIDTH = 500;
-    const DEFAULT_MIN_HEIGHT = 400;
-    const [minWidth, setMinWidth] = useState(0);
-    const [minHeight, setMinHeight] = useState(0);
-    /**
-     * Gestore chiamato quando il popup viene mostrato.
-     * Calcola e imposta le dimensioni minime del popup in base allo spazio disponibile.
-     * Le dimensioni minime sono il valore più piccolo tra le dimensioni effettive del parent e le dimensioni minime di default
-     */
-    const handleShown = () => {
-        // Usa requestAnimationFrame per attendere il completamento del rendering
-        requestAnimationFrame(() => {
-            if (popupRef.current && popupRef.current.instance) {
-                const instance = popupRef.current.instance();
-                if (instance) {
-                    // Ottiene l'elemento content del popup
-                    const element = instance.content();
-                    if (element) {
-                        const parentElement = element.parentElement;
-                        if (parentElement) {
-                            // Legge le dimensioni effettive del contenitore parent
-                            const widthPx = parentElement.offsetWidth;
-                            const heightPx = parentElement.offsetHeight;
-                            // Imposta le dimensioni minime usando il valore più piccolo tra le dimensioni disponibili e quelle di default
-                            setMinWidth(widthPx < DEFAULT_MIN_WIDTH ? widthPx : DEFAULT_MIN_WIDTH);
-                            setMinHeight(heightPx < DEFAULT_MIN_HEIGHT ? heightPx : DEFAULT_MIN_HEIGHT);
-                        }
-                    }
-                }
-            }
-        });
-    };
-    useEffect(() => {
-        setShowPopup(isModal);
-    }, [isModal]);
-    useEffect(() => {
-        setInitialWidth(width);
-        setInitialHeight(height);
-    }, [width, height]);
-    const handleResizeStart = () => {
-        setIsResizing(true);
-    };
-    const handleResizeEnd = (e) => {
-        setIsResizing(false);
-        setInitialWidth(e.width.toString());
-        setInitialHeight(e.height.toString());
-    };
-    const onHiding = (e) => {
-        if (askClosingConfirm)
-            e.cancel = true;
-        if (hidePopup)
-            setShowPopup(false);
-        onClose && onClose();
-    };
-    return (_jsx(_Fragment, { children: isModal ? (_jsx(Popup, { ref: popupRef, showCloseButton: showCloseButton, animation: undefined, minWidth: minWidth, minHeight: minHeight, maxHeight: '95%', maxWidth: '95%', dragEnabled: !isResizing, resizeEnabled: resizable, width: expandable && isFullScreen ? '95%' : initialWidth, height: expandable && isFullScreen ? '95%' : initialHeight, title: title, visible: showPopup, onShown: handleShown, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd, onHiding: onHiding, toolbarItems: expandable ? [
-                {
-                    widget: 'dxButton',
-                    location: 'after',
-                    options: {
-                        icon: isFullScreen ? svgToString(_jsx(IconWindowMinimize, {})) : svgToString(_jsx(IconWindowMaximize, {})),
-                        onClick: () => setIsFullScreen(!isFullScreen)
-                    }
-                }
-            ] : undefined, children: _jsxs(TMLayoutContainer, { children: [toolbar && (_jsx(TMLayoutItem, { height: "40px", children: _jsx(StyledModalToolbar, { children: toolbar }) })), _jsx(TMLayoutItem, { height: toolbar ? 'calc(100% - 40px)' : '100%', children: _jsx(TMCard, { showBorder: false, padding: false, scrollY: true, children: children }) })] }) })) : (_jsxs(StyledModal, { "$isModal": isModal, className: "temp-modal", "$fontSize": fontSize, "$width": initialWidth, "$height": initialHeight, children: [toolbar ? _jsx(StyledModalToolbar, { children: toolbar }) : _jsx(_Fragment, {}), _jsx(StyledModalContext, { children: children })] })) }));
-};
-export default TMModal;

package/lib/components/base/TMPanel.d.ts

@@ -1,32 +0,0 @@
-/** Gestione TMPanel "attivo / non attivo" secondo una pattern ibrido (Controlled/Uncontrolled Component):
-1) Modalità Non Controllata (Uncontrolled): Se non gli viene passata la prop "isActive", il pannello gestisce lo stato "attivo" internamente. Per l'uso singolo ("plug-and-play").
-2) Modalità Controllata (Controlled): Se il genitore passa la prop "isActive", il pannello cede il controllo e si affida completamente al genitore. Ideale per layout con più pannelli che necessitano di coordinamento.
-*/
-import React from 'react';
-export interface ITMPanelRef {
-    focusPanel: () => void;
-}
-export interface ITMPanelProps {
-    allowMaximize?: boolean;
-    color?: string;
-    backgroundColor?: string;
-    backgroundColorContainer?: string;
-    children?: React.ReactNode;
-    showHeader?: boolean;
-    title?: string;
-    displayedItemsCount?: number;
-    totalItems?: number;
-    toolbar?: any;
-    padding?: string;
-    isVisible?: boolean;
-    panelID?: string;
-    isActive?: boolean;
-    onActivate?: (panelID: string) => void;
-    onActiveChanged?: (isActive: boolean) => void;
-    onBack?: () => void;
-    onClose?: () => void;
-    onHeaderDoubleClick?: () => void;
-    onMaximize?: (isMaximized: boolean) => void;
-}
-declare const TMPanel: React.ForwardRefExoticComponent<ITMPanelProps & React.RefAttributes<ITMPanelRef>>;
-export default TMPanel;