@topconsultnpm/sdkui-react 6.17.0-test10

package/lib/components/base/TMList.js

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,387 @@
+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

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

package/lib/components/base/TMModal.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Popup } from 'devextreme-react';
+import styled from 'styled-components';
+import TMLayoutContainer, { TMCard, TMLayoutItem } from './TMLayout';
+import { FontSize, TMColors } from '../../utils/theme';
+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, isModal = true, title = '', toolbar, onClose, children, width = '100%', height = '100%', fontSize = FontSize.defaultFontSize, hidePopup = true, askClosingConfirm = false }) => {
+    const [initialWidth, setInitialWidth] = useState(width);
+    const [initialHeight, setInitialHeight] = useState(height);
+    const [showPopup, setShowPopup] = useState(false);
+    const [isResizing, setIsResizing] = useState(false);
+    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, { showCloseButton: true, animation: undefined, maxHeight: '95%', maxWidth: '95%', dragEnabled: !isResizing, resizeEnabled: resizable, width: initialWidth, height: initialHeight, title: title, visible: showPopup, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd, onHiding: onHiding, children: _jsxs(TMLayoutContainer, { children: [toolbar && (_jsx(TMLayoutItem, { height: "40px", children: _jsx(StyledModalToolbar, { children: toolbar }) })), _jsx(TMLayoutItem, { height: toolbar ? 'calc(100% - 50px)' : 'calc(100% - 10px)', 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

@@ -0,0 +1,32 @@
+/** 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;