ebta-workflow-prod 1.1.3 → 4.0.2

package/src/elements/ItemSearcher_v2.tsx

@@ -0,0 +1,1071 @@
+/* eslint-disable prefer-const */
+import * as React from "react";
+import { FormElementProps, FormElementRegistration } from "@vertigis/workflow";
+import { styled } from '@mui/material/styles';
+import List from '@vertigis/web/ui/List';
+import ListItemButton from '@vertigis/web/ui/ListItemButton';
+import ListItemIcon from '@vertigis/web/ui/ListItemIcon';
+import ListItemText from '@vertigis/web/ui/ListItemText';
+import Collapse from '@vertigis/web/ui/Collapse';
+import FolderCopyIcon from '@mui/icons-material/FolderCopy';
+import ExpandLess from '@mui/icons-material/ExpandLess';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+import SearchIcon from '@vertigis/web/ui/icons/Search';
+import InputBase from '@mui/material/InputBase';
+import Box from "@vertigis/web/ui/Box"
+import Typography from  '@vertigis/web/ui/Typography';
+import { createTheme } from "@mui/material/styles";
+import { ThemeProvider } from "@emotion/react";
+import Checkbox from '@vertigis/web/ui/Checkbox';
+import  IconButton  from '@vertigis/web/ui/IconButton';
+import { Category, Clear as ClearIcon } from '@mui/icons-material';
+import Chip from '@mui/material/Chip';
+import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
+
+
+/**
+ * The generic type argument provided to `FormElementProps<T>` controls the type
+ * of `props.value` and `props.setValue(value)`. If your element doesn't need a
+ * `value`, you can omit the type argument.
+ *
+ * You can also declare additional public properties of your element by adding
+ * properties to this interface. The properties will be managed by the Workflow
+ * runtime, and passed in as `props`. You can update the properties by using
+ * `props.setProperty(key, value)`.
+ */
+interface ItemSearcher_V2Props extends FormElementProps<string> { 
+
+    itemData: Category[]; // Structured data passed as prop
+    setting?: settingConfig;
+    request?: { type: string, timestamp: number, data?: any };
+    openCategories: Set<string>;//Status storage property only
+    searchQuery:string;//Status storage property only
+    selection:{ [key: string]: { [key: string]: Item[] } }//Status storage property only
+    loadDataTime:number;//provide cabability of loading a totally different data
+}
+
+
+/**
+ * Provide strictly structured item data to display them and search.
+ * @displayName ItemSearcher_V2
+ * @description Display list of items and allow user to search based on name, description & tag. 
+ * @param props     collapseIcon?: string;
+    expandIcon?: string;//replacing the drop down icon on right
+    checkbox?: boolean;//If true, make items selectable checkbox rather than click 
+    checkboxGroup?:boolean;//If true, make category itself selectable
+    triggerChange?:boolean;//If true, trigger changed event when being checkbox mode
+    simpleSearch?: boolean; // decide two mode in search result: clear Search show items only and rank them by relativity. If false, use filter on original Hierarchy, show items has keyword or group whose name has keyword and all its children.
+    initialCollapse?: boolean // decide whether collapse all group at beginning, default is collapse all
+ */
+
+const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
+    <Tooltip {...props} classes={{ popper: className }} />
+))(({ theme }) => ({
+    [`& .${tooltipClasses.tooltip}`]: {
+        boxShadow: theme.shadows[1],
+        fontSize: 10,
+    },
+}));
+
+const Search = styled('div')(({ theme }) => ({
+    position: 'relative',
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: 'var(--alertGrayForeground)',
+    marginRight: theme.spacing(2),
+    marginLeft: 0,
+    width: '100%',
+    [theme.breakpoints.up('sm')]: {
+        marginLeft: theme.spacing(3),
+        width: 'auto',
+    },
+}));
+
+const SearchIconWrapper = styled('div')(({ theme }) => ({
+    padding: theme.spacing(0, 2),
+    height: '100%',
+    position: 'absolute',
+    pointerEvents: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+
+}));
+
+interface Item {
+    name: string;
+    description?: string;
+    tag?: string[];
+    value?: any;
+    img?: string;
+    score?: number;
+    parentValue?: any;
+    action?: "displayLayer" | "tick";
+}
+
+interface Category {
+    name: string;
+    items?: Item[];
+    childCategory?: Category[];
+    collapsed?: boolean; //true to hide children. It's above setting Config initial collapse.
+    img?: string;
+    checkbox?: boolean;   //If true, show checkbox that makes all child items selected/unselected 
+    index?: number; //as a child Category, indicate the position of this child category compared to other sibling items/categories
+    parentCate?: string;
+    description?:string;
+}
+
+interface settingConfig {
+    checkbox?: boolean;   //If true, show checkbox rather than raise click event
+    collapseIcon?: string;//replace the fold up icon on right
+    expandIcon?: string;//replacing the drop down icon on right
+    triggerChange?: boolean;//If true, trigger changed event when under checkbox mode
+    triggerClick?: boolean;//If true, trigger click event when under checkbox mode
+    simpleSearch?: boolean; // decide two mode in search result: clear Search show items only and rank them by relativity. If false, use filter on original Hierarchy, show items has keyword or group whose name has keyword and all its children.
+    initialCollapse?: boolean;// decide whether collapse all group at beginning, default is collapse all
+    tooltip?: "tag" | "description" | "value" | Array<"tag" | "description" | "value">;//tooltip of item content. Can be any combination of description, value (link etc), tag (property unvisible but used for searching)
+    searchHolder?: string; //Text placeholder used in search bar 
+    requestLayer?: boolean;//true if the item is a layer group url and need further process
+    reset?: number; //If loading another totally different content, give timestamp number for reset parameter to reload itemData
+    showCount?: boolean;  // display item count after category name
+    flatResut?: boolean;//decide the output to be result/layer or result/group/layer
+    matchAnyKeyword?:boolean;//When search keywords (detected seperation by many spliters), fulfil all keywords or any of keyword.
+    maxSelectableItems?:number;//maximum number of items that can be selected at the same time. If 0, no limit.
+    forceSort?:boolean;//if true, sort the items in the same order as the original data. If false, sort by name.
+}
+
+
+
+const StyledInputBase = styled(InputBase)(({ theme }) => ({
+    color: 'inherit',
+    '& .MuiInputBase-input': {
+        padding: theme.spacing(1, 1, 1, 0),
+        paddingLeft: `calc(1em + ${theme.spacing(4)})`,
+        transition: theme.transitions.create('width'),
+        width: '100%',
+        [theme.breakpoints.up('md')]: {
+            width: '100%',
+        },
+    },
+
+}));
+
+const defaultTheme = createTheme({
+    components: {
+        MuiListItemText: {
+            styleOverrides: {
+                secondary: {
+                    color: 'inherit',
+                },
+            },
+        },
+    },
+
+    typography: {
+        fontSize: 18
+    },
+});
+
+
+
+
+
+// Function to get all items from category and its subcategories
+function ItemSearcher_V2(props: ItemSearcher_V2Props): React.ReactElement {
+    const { raiseEvent ,openCategories,searchQuery,selection,loadDataTime, setValue, setProperty} = props;
+    if (openCategories ==undefined){setProperty("openCategories" as any,new Set())}
+    if (searchQuery ==undefined){setProperty("searchQuery" as any,'')}
+    if (selection ==undefined){setProperty("selection" as any,{})}
+    if (loadDataTime ==undefined){setProperty("loadDataTime" as any,0)}
+    const [data, setData] = React.useState<Category[]>(props.itemData);
+    const preSearchOpenCategories = React.useRef<Set<string>>(new Set());
+    const currentOpenCategories = React.useRef<Set<string> >(new Set());
+    const prevSearchValue = React.useRef<string>('')
+    const [filteredData, setFilteredData] = React.useState<Category[]>([]); // New state for filtered data
+    const requestTime = React.useRef<number | null>(null);
+    // Handle search input changes
+    const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setProperty("searchQuery" as any,event.target.value); // Update search query
+    };
+
+
+    function getTotalSelectedItems() {
+        let total = 0;
+        for (let catKey in selection) {
+            for (let subcatKey in selection[catKey]) {
+                total += selection[catKey][subcatKey].length;
+            }
+        }
+        return total;
+    }
+
+    function expandIcon(collapseIcon: string, expandIcon: string, openCats, catName: string) {
+
+        openCategories.has(catName) ? <ExpandLess /> : <ExpandMore />
+        if (Boolean(expandIcon) && openCats.has(catName)) return (<Box
+            component="img"
+            sx={{
+                height: 18,
+                width: 18,
+                marginLeft: '8px',
+    
+            }}
+            alt="The category icon"
+            src={expandIcon} // Use the item's img property
+        />)
+        else if (Boolean(collapseIcon) && !openCats.has(catName)) return (<Box
+            component="img"
+            sx={{
+                height: 18,
+                width: 18,
+                marginLeft: '8px',
+            }}
+            alt="The category icon"
+            src={collapseIcon} // Use the item's img property
+        />)
+        else if (!expandIcon && openCats.has(catName)) return (<ExpandLess />)
+        else if (!expandIcon && !openCats.has(catName)) return (<ExpandMore />)
+    }
+    
+
+    function findCategory(item: Item) {
+        return props.itemData.find(category =>
+            category.items?.some(existingItem => existingItem.value == item.value)
+        ) || data[0];
+    }
+
+    function tickItem(item: Item, category: Category) {
+        let selectCopy = structuredClone(selection)
+        
+        if (isSelected(item, category.name)) {
+            //uncheck item
+            for (let key in selectCopy) {
+                let element = selectCopy[key]
+                // Check if the element is an object containing nested arrays of Items
+                for (let subKey in element) {
+                    if (element[subKey]) {
+                        let index = element[subKey].findIndex(a => a.name === item.name && (a.value === item.value || a.description === item.description));
+                        if (index !== -1) {
+                            element[subKey].splice(index, 1);
+                            // If the subcategory is empty after removal, delete the subcategory
+                            if (element[subKey].length === 0) {
+                                delete element[subKey];
+                            }
+                        }
+                    }
+                }
+                if (Object.values(selectCopy[key]).length == 0) {
+                    delete selectCopy[key];
+                }// If the category is empty after removal, delete the category
+            }
+        }
+        else {
+            // Check if we've reached maximum selectable items limit
+            const totalSelectedItems = getTotalSelectedItems();
+            if (props.setting?.maxSelectableItems && totalSelectedItems >= props.setting.maxSelectableItems) {
+                // Prevent adding more items if limit is reached
+                raiseEvent("error" as any, JSON.stringify({ type: "maxItemsReached", message: `You can only select up to ${props.setting.maxSelectableItems} items` }));
+                return;
+            }
+            
+            // Add the item to the specified category
+            if (category) {
+                if (category.parentCate) {
+                    if (!selectCopy[category.parentCate]) {
+                        selectCopy[category.parentCate] = {};
+                    }
+                    if (!selectCopy[category.parentCate][category.name]) {
+                        selectCopy[category.parentCate][category.name] = [];
+                    }
+                    selectCopy[category.parentCate][category.name].push((delete item.score, item));
+                }
+                else {
+                    if (!selectCopy[category.name]) {
+                        selectCopy[category.name] = {};
+                    }
+                    if (!selectCopy[category.name]["directItem"]) {
+                        selectCopy[category.name]["directItem"] = [];
+                    }
+                    selectCopy[category.name]["directItem"].push((delete item.score, item));
+                }
+            }
+        }
+        setProperty("selection" as any, selectCopy)
+    }
+
+    // Handle click on items to raise an event
+    const handleItemClick = (item: Item, category: Category) => {
+        if (props.setting?.checkbox) {
+            if (props.setting?.triggerChange) {
+                raiseEvent("changed", JSON.stringify(item)); // Pass the entire item data structure
+            }
+            if (props.setting?.triggerClick) {
+                raiseEvent("clicked", JSON.stringify(item)); // Pass the entire item data structure
+            }
+            if (props.setting?.requestLayer && item.action == "displayLayer") {
+                raiseEvent("clicked", JSON.stringify({ action: "openLayer", data: item })); // Pass the entire item data structure
+            }
+            if (!props.setting?.requestLayer || !(item.action == "displayLayer")) {
+                tickItem(item, category)
+            }
+        }
+        else {
+            raiseEvent("clicked", JSON.stringify(item)); // Pass the entire item data structure
+        }
+    };
+
+    const handleCategoryCheck = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, category: Category) => {
+        event.stopPropagation();
+        let selectCopy = structuredClone(selection);
+        
+        // For "allSelected" case, just remove all items (no limit check needed)
+        if (isChildSelected(category) === "allSelected") {
+            if (!category.parentCate) {
+                delete selectCopy[category.name];
+            } else {
+                delete selectCopy[category.parentCate][category.name];
+            }
+        } 
+        // For adding items, check limit
+        else {
+            const currentTotal = getTotalSelectedItems();
+            let itemsToAdd = 0;
+            
+            // Calculate how many items would be added
+            if (!category.parentCate) {
+                if (category.items) {
+                    for (let item of category.items) {
+                        if (!isSelected(item, category.name)) {
+                            itemsToAdd++;
+                        }
+                    }
+                }
+            } else {
+                if (category.items) {
+                    for (let item of category.items) {
+                        if (!isSelected(item, category.name)) {
+                            itemsToAdd++;
+                        }
+                    }
+                }
+            }
+            
+            // Check if adding these items would exceed the limit
+            if (props.setting?.maxSelectableItems && (currentTotal + itemsToAdd > props.setting.maxSelectableItems)) {
+                raiseEvent("error" as any, JSON.stringify({ type: "maxItemsReached", message: `You can only select up to ${props.setting.maxSelectableItems} items` }));
+                return;
+            }
+            
+            // Proceed with adding items if within limit
+            if (!category.parentCate) {
+                //only one level
+                if (category.items) {
+                    for (let item of category.items) {
+                        if (!isSelected(item, category.name)) {
+                            // If item is not selected, check it
+                            if (!selectCopy[category.name]) {
+                                selectCopy[category.name] = {}
+                                selectCopy[category.name]["directItem"] = [];
+                            }
+                            selectCopy[category.name]["directItem"].push((delete item.score, item));
+                        }
+                    }
+                }
+            } else {
+                //two levels
+                if (category.items) {
+                    for (let item of category.items) {
+                        if (!isSelected(item, category.name)) {
+                            if (!selectCopy[category.parentCate]) {
+                                selectCopy[category.parentCate] = {};
+                            }
+                            // If item is not selected, check it
+                            if (!selectCopy[category.parentCate][category.name]) {
+                                selectCopy[category.parentCate][category.name] = [];
+                            }
+                            selectCopy[category.parentCate][category.name].push((delete item.score, item));
+                        }
+                    }
+                }
+            }
+        }
+        
+        // Update selection state
+        setProperty("selection" as any, selectCopy);
+    };
+
+
+    // Handle category toggle open/close manually
+    const handleCategoryToggle = (categoryName: string) => {
+        const updatedOpenCategories = new Set(openCategories); // Clone current state
+
+        if (updatedOpenCategories.has(categoryName)) {
+            updatedOpenCategories.delete(categoryName); // Close category
+        } else {
+            updatedOpenCategories.add(categoryName); // Open category
+        }
+        
+        setProperty("openCategories" as any, updatedOpenCategories); // Update with new value
+    };
+
+
+    function countAllItems(category: Category): number {
+        let itemCount = 0;
+
+        // Add items of the current category (if any)
+        if (category.items) {
+            itemCount += category.items.length;
+        }
+
+        // Recursively count items in child categories (if any)
+        if (category.childCategory) {
+            category.childCategory.forEach(childCategory => {
+                itemCount += countAllItems(childCategory);  // Recursive call for each child category
+            });
+        }
+
+        return itemCount;
+    }
+
+    function isSelected(item: Item, cateName?: string) {
+        // Type guard to check if an element is an Item
+        if (!cateName) {
+            for (let key in selection) {
+                for (let subkey in selection[key]) {
+                    let index = selection[key][subkey].findIndex(a => a.name === item.name && a.value === item.value);
+                    if (index !== -1) {
+                        return true;
+                    }
+                }
+            }
+        }
+        else {
+            if (selection[cateName]?.["directItem"]) {
+                let index = selection[cateName]["directItem"].findIndex(a => a.name === item.name && a.value === item.value);
+                if (index !== -1) {
+                    return true;
+                }
+            }
+            
+                for (let key in selection) {
+                    if (selection[key][cateName]) {
+                        let index = selection[key][cateName].findIndex(a => a.name === item.name && a.value === item.value);
+                        if (index !== -1) {
+                            return true;
+                        }
+                    }
+                }
+        }
+        return false;
+    }
+
+
+    const isChildSelected = (category: Category) => {
+        let allSelected = true;
+        let partSelected = false;
+        let noneSelected = true;
+
+        // Check items of the current category
+        if (category.items) {
+            for (let item of category.items) {
+                const selected = isSelected(item, category.name);
+                if (selected) {
+                    partSelected = true;
+                    noneSelected = false;
+                } else {
+                    allSelected = false;
+                }
+            }
+        }
+
+        // Recursively check child categories
+        if (category.childCategory) {
+            for (let child of category.childCategory) {
+                const childStatus = isChildSelected(child);
+                if (childStatus === 'notSelected') {
+                    noneSelected = true;
+                } else if (childStatus === 'partSelected') {
+                    partSelected = true;
+                } else if (childStatus === 'allSelected') {
+                    allSelected = true;
+                }
+            }
+        }
+
+        // Determine the category selection state
+        if (allSelected) return 'allSelected';
+        if (partSelected) return 'partSelected';
+        if (noneSelected) return 'notSelected';
+        return "error"
+    }
+
+
+
+
+    // Get search rank for an item based on search query
+    const getSearchRank = (item: Item, query: string) => {
+        const keywords = query.split(/[\s,+;]+/).map((word) => word.trim().toLowerCase()).filter(Boolean);
+        let score = 0;
+
+        keywords.forEach((keyword) => {
+            if (item.name.toLowerCase().includes(keyword)) score += 2.5;
+            else if (item.description && item.description.toLowerCase().includes(keyword)) score += 2;
+            else if (item.tag && item.tag.some((tag) => tag.toLowerCase().includes(keyword))) score += 1.5;
+        });
+
+        return score;
+    };
+
+
+
+
+    // Recursively get all items from category and its child categories
+    function getAllItemsFromCategory(category: Category): Item[] {
+        let flattenItems: Item[] = [];
+
+        if (category.items) {
+            flattenItems = category.items.map((item) => ({
+                ...item,
+                score: getSearchRank(item, searchQuery),
+            }));
+        }
+
+        if (category.childCategory && Array.isArray(category.childCategory)) {
+            for (const child of category.childCategory) {
+                flattenItems = flattenItems.concat(getAllItemsFromCategory(child));
+            }
+        }
+
+        return flattenItems;
+    }
+
+    const sumSelection = (category: Category): Item[] => {
+        let result: Item[] = []
+        if (!category.parentCate) {
+            //category is first level, get all direct item and child cate items
+            for (let key in selection[category.name]) {
+                result = result.concat(selection[category.name][key])
+            }
+        }
+        else {
+            result = selection[category.parentCate]?.[category.name] || []
+        }
+
+        return result.length > 0 ? result : [];
+    };
+
+
+    function cleanSelection(selection: { [key1: string]: { [key2: string]: Item[] } }) {
+        for (const key1 in selection) {
+          if (Object.keys(selection[key1]).length>0) {
+            const key2Object = selection[key1];
+      
+            // Iterate over key2 within key1
+            for (const key2 in key2Object) {
+              if (key2Object.key2) {
+                // If key2 has an empty array, delete the key2
+                if (key2Object[key2].length === 0) {
+                  delete key2Object[key2];
+                }
+              }
+            }
+      
+            // If key1 has no more key2s left, delete key1
+            if (Object.keys(key2Object).length === 0) {
+              delete selection[key1];
+            }
+          }
+          else{
+            delete selection[key1]
+          }
+        }
+        return selection;
+      }
+      
+          // Render categories with items and nested child categories
+    const renderCategory = (category: Category, level: number): React.ReactNode => {
+
+        function truncateString(str) {
+            if (str.length > 10) {
+                return str.substring(0, 8) + '...';
+            }
+            return str;
+        }
+        const chipLabel = () => {
+            return sumSelection(category)?.length > 0 ?
+                sumSelection(category)?.length > 1 ?
+                    sumSelection(category).length + " selected" :
+                    truncateString(sumSelection(category)[0].name)
+                : ""
+        }
+
+        const handleDeleteSelection = (category: Category) => {
+            if (category.parentCate) {
+                const updatedSelection = { ...selection };
+                updatedSelection[category.parentCate][category.name] = [];
+                 setProperty("selection" as any,updatedSelection);
+            } else {
+                const updatedSelection = { ...selection };
+                updatedSelection[category.name] = {};
+                 setProperty("selection" as any,updatedSelection);
+            }
+
+        };
+
+        const chipElement = (
+            <Chip
+                label={chipLabel()}
+                sx={{
+                    fontSize: '1.1rem',
+                    color: 'var(--accentIconBackground)',
+                    backgroundColor: 'var(--alertAmberBackground)',
+                    '& .MuiChip-deleteIcon': { color: 'var(--accentIconBackground)' }
+
+                }}
+                onDelete={() => handleDeleteSelection(category)}
+            />
+        );
+
+        const itemContent = (item: Item, cateName?: string) => (<div style={{ display: 'flex', alignItems: 'center' }}>
+
+            {item.img && typeof item.img === 'string' && item.img.trim() !== '' && (
+                <Box
+                    component="img"
+                    sx={{
+                        height: 18,
+                        width: 18,
+                        marginLeft: '8px',
+                    }}
+                    alt="The item icon"
+                    src={item.img} // Use the item's img property
+                />
+            )}
+            {props.setting?.checkbox ? <ListItemIcon sx={{ minWidth: '35px' }}>
+                <Checkbox sx={{ color: 'var(--accentIconBorder) !important' }} checked={isSelected(item, cateName)} />
+            </ListItemIcon> : null}
+
+            <ListItemText primary={item.name} secondary={item.description} sx={{ pl: item.img ? 2 : 0 }} primaryTypographyProps={{ style: { fontWeight: (900 - 200 * (level + 1)).toString()} }}   secondaryTypographyProps={{ style: { fontWeight: "300" } }}/>
+        </div>)
+        return (
+            <React.Fragment key={category.name}>
+                <ListItemButton onClick={() => handleCategoryToggle(category.name)} sx={{ pl: level * 2, py:0  , minHeight:'35px'}}> 
+                    {props.setting?.checkbox && category.checkbox ?
+                        <ListItemIcon sx={{ minHeight:'35px' }}>
+                            <Checkbox sx={{ color: 'var(--accentIconBorder) !important' }}
+                                checked={['allSelected', 'partSelected'].includes(isChildSelected(category))}
+                                onClick={(event) => handleCategoryCheck(event, category)}
+                            />
+                        </ListItemIcon> : null
+                    }
+                    {category.img && typeof category.img === 'string' && category.img.trim() !== '' ? (
+                        <Box
+                            component="img"
+                            sx={{
+                                height: 18,
+                                width: 18,
+                                marginLeft: '8px',
+                            }}
+                            alt="The category icon"
+                            src={category.img} // Use the item's img property
+                        />
+                    ) : (<ListItemIcon sx={{ minWidth: '20px' }}>
+                        <FolderCopyIcon  sx={{ color: "var(--accentIconForeground)" }} />
+                    </ListItemIcon>)
+                    }
+                    <ListItemText primary={props.setting?.showCount ? category.name + ` (${countAllItems(category)})` : category.name} secondary={category.description}   sx={{ pl: 1 }} primaryTypographyProps={{ style: {fontWeight: (900 - level * 200).toString() ,fontSize:level==0?'1.2rem':undefined} }}  secondaryTypographyProps={{ style: { fontWeight: "300" } }}/>
+                    {//selection chip
+                        props.setting?.checkbox && sumSelection(category).length > 0 ?
+                            <LightTooltip
+                                title={sumSelection(category).map(a => a.name).join(',')}
+                                arrow>
+                                {chipElement}
+                            </LightTooltip>
+                            : <></>
+                    }
+                    {expandIcon(props.setting?.collapseIcon ?? '', props.setting?.expandIcon ?? '', openCategories, category.name)}
+                </ListItemButton>
+                <Collapse in={openCategories && openCategories.has(category.name)} timeout="auto" unmountOnExit>
+                    <List component="div" disablePadding>
+                        {getMergedChildren(category).map((child, idx) => {
+                            if (child.type === 'item') {
+                                const item:Item = child.content;
+                                return (
+                                    <ListItemButton
+                                        sx={{ pl: (level + 1) * 2, py:0 , minHeight:'35px'}}
+                                        key={`item-${idx}`}
+                                        onClick={() => handleItemClick(item, category)}
+                                    >
+                                        {props.setting?.tooltip ? (
+                                            typeof props.setting?.tooltip == "string" ? (
+                                                <LightTooltip title={item[props.setting?.tooltip]}  arrow>
+                                                    {itemContent(item,category.name)}
+                                                </LightTooltip>
+                                            ) : (
+                                                <LightTooltip
+                                                    title={props.setting?.tooltip.map(key => item[key]).join(" ; ")}
+                                                    arrow
+                                                >
+                                                    {itemContent(item,category.name)}
+                                                </LightTooltip>
+                                            )
+                                        ) : (
+                                            itemContent(item,category.name)
+                                        )}
+                                    </ListItemButton>
+                                );
+                            } else {
+                                // Render child category
+                                const childCategory = child.content;
+                                return renderCategory(childCategory, level + 1);
+                            }
+                        })}
+                    </List>
+                </Collapse>
+            </React.Fragment>
+        );
+    };
+
+    const getMergedChildren = (category: Category) => {
+        const items = category.items || [];
+        const childCategories = category.childCategory || [];
+    
+        // Convert items to an array with type marker
+        const itemsWithType = items.map(item => ({
+            type: 'item',
+            content: item
+        }));
+    
+        // Convert child categories to an array with type marker
+        const categoriesWithType = childCategories.map(category => ({
+            type: 'category',
+            content: category
+        }));
+    
+        // Sort based on forceSort setting
+        if (props.setting?.forceSort !== false) {
+            // Default behavior: sort alphabetically
+            categoriesWithType.sort((a, b) => 
+                a.content.name.localeCompare(b.content.name)
+            );
+            
+            itemsWithType.sort((a, b) => 
+                a.content.name.localeCompare(b.content.name)
+            );
+        } else {
+            // When forceSort is false: respect original order
+            // For child categories, sort by index if available
+            categoriesWithType.sort((a, b) => {
+                if (a.content.index !== undefined && b.content.index !== undefined) {
+                    return a.content.index - b.content.index;
+                }
+                return 0; // Keep original order if no index
+            });
+            
+            // For items, we keep the original order by not sorting
+        }
+    
+        // Return categories first, then items
+        return [...categoriesWithType, ...itemsWithType];
+    };
+
+
+    // Filter items based on the search query
+    const filteredItems = data
+        .flatMap((category) => getAllItemsFromCategory(category))
+        .map((item) => ({
+            ...item,
+            score: getSearchRank(item, searchQuery),
+        }))
+        .filter((item) => item.score > 0)
+        .sort((a, b) => b.score - a.score); // Sort by total score in descending order
+
+
+    React.useEffect(() => {
+        function filterData(data: Category[], query: string): Category[] {
+            const keywords = query.split(/[\s,+;]+/).map((word) => word.trim().toLowerCase()).filter(Boolean);
+    
+            function searchCategory(category: Category): Category | null {
+            // Different matching logic based on the matchAnyKeyword setting
+            let categoryMatches: boolean;
+            
+            if (props.setting?.matchAnyKeyword) {
+                // ANY keyword matching (original logic) - using regex
+                const keywordRegex = new RegExp(keywords.join("|"), "i");
+                categoryMatches = keywordRegex.test(category.name);
+                
+                // Filter items based on name, description, or tags
+                const matchedItems = category.items?.filter(item =>
+                    keywordRegex.test(item.name) ||
+                    (item.description && keywordRegex.test(item.description)) ||
+                    (item.tag && item.tag.some(tag => keywordRegex.test(tag)))
+                );
+                
+                // Recursively filter child categories
+                const matchedChildCategories = category.childCategory
+                    ?.map(childCat => searchCategory(childCat))
+                    .filter((childCat): childCat is Category => childCat !== null);
+                
+                if (categoryMatches) {
+                    return {
+                        ...category,
+                        items: category.items || [],
+                        childCategory: category.childCategory || []
+                    };
+                }
+                
+                // If no match in the category name, check if items or child categories match
+                if ((matchedItems && matchedItems.length > 0) || (matchedChildCategories && matchedChildCategories.length > 0)) {
+                    return {
+                        ...category,
+                        items: matchedItems || [],
+                        childCategory: matchedChildCategories || []
+                    };
+                }
+            } else {
+                // ALL keywords matching logic
+                categoryMatches = keywords.every(keyword => 
+                    category.name.toLowerCase().includes(keyword)
+                );
+                
+                // Filter items that match ALL keywords
+                const matchedItems = category.items?.filter(item =>
+                    keywords.every(keyword => 
+                        item.name.toLowerCase().includes(keyword) ||
+                        (item.description && item.description.toLowerCase().includes(keyword)) ||
+                        (item.tag && item.tag.some(tag => tag.toLowerCase().includes(keyword)))
+                    )
+                );
+                
+                // Recursively filter child categories
+                const matchedChildCategories = category.childCategory
+                    ?.map(childCat => searchCategory(childCat))
+                    .filter((childCat): childCat is Category => childCat !== null);
+                
+                if (categoryMatches) {
+                    return {
+                        ...category,
+                        items: category.items || [],
+                        childCategory: category.childCategory || []
+                    };
+                }
+                
+                // If no match in the category name, check if items or child categories match
+                if ((matchedItems && matchedItems.length > 0) || (matchedChildCategories && matchedChildCategories.length > 0)) {
+                    return {
+                        ...category,
+                        items: matchedItems || [],
+                        childCategory: matchedChildCategories || []
+                    };
+                }
+            }
+    
+            // Exclude this category if no matches found in items or child categories
+            return null;
+        }
+    
+    
+            // Apply the search to each root category and filter out null results
+            const result = data.map(category => searchCategory(category)).filter((cat): cat is Category => cat !== null);
+            return result
+    
+        }
+    
+
+        if (searchQuery) {
+            
+            // Store the current state when search begins
+            if (searchQuery.length === 1) {
+                preSearchOpenCategories.current = new Set(currentOpenCategories.current);
+            }
+
+            const searchResults = filterData(data, searchQuery);
+            setFilteredData(searchResults);
+
+            // Expand categories with search results
+            const searchOpenCategories = new Set<string>();
+            const addToOpenCategories = (category: Category) => {
+                searchOpenCategories.add(category.name);
+                category.childCategory?.forEach(addToOpenCategories);
+            };
+
+            searchResults.forEach(addToOpenCategories);
+             setProperty("openCategories" as any,searchOpenCategories);
+        }
+        if (!searchQuery) {
+            // Restore pre-search state if exists
+            if (prevSearchValue.current==''){
+                currentOpenCategories.current = openCategories;
+            }
+            else {
+            if (preSearchOpenCategories.current.size > 0) {
+                setProperty("openCategories" as any,preSearchOpenCategories.current);
+                setFilteredData([]);
+                preSearchOpenCategories.current = new Set()
+            }
+            return;
+        }
+    }
+        prevSearchValue.current=searchQuery
+
+    }, [searchQuery, data, props.setting?.matchAnyKeyword, openCategories, setValue, setProperty]);
+
+
+
+    React.useEffect(() => {
+
+        function removeDirectItems() {
+            let selectCopy = structuredClone(selection)
+            let result = {}
+            for (let key in selection) {
+                result[key] = selectCopy[key].directItem;
+            }
+            return result;
+        }
+
+        if (props.setting?.checkbox && props.request && props.request.type == "submit" && (requestTime.current) !== (props.request.timestamp)) {
+            raiseEvent("clicked", JSON.stringify({ action: "submit", selectionResult: props.setting.flatResut ? removeDirectItems() : cleanSelection(selection) })); // Pass the entire item data structure
+            requestTime.current = props.request.timestamp;
+        }
+        if (props.setting?.checkbox && props.request && props.request.type == "clearSelection" && (requestTime.current) !== (props.request.timestamp)) {
+            setProperty("selection" as any,{})
+            requestTime.current = props.request.timestamp;
+        }
+        if (props.setting?.checkbox){
+            setValue( JSON.stringify( {selectionResult:props.setting.flatResut ? removeDirectItems() : cleanSelection(selection)}))
+            setProperty("selectionResult" as any,props.setting.flatResut ? removeDirectItems() : cleanSelection(selection))
+        }
+
+    }, [props.request, props.setting, raiseEvent, selection, setProperty, setValue])
+
+
+    React.useEffect(() => {
+        if (props.request && props.request.type == "displayLayer" && (requestTime.current) !== (props.request.timestamp)) {
+            let dataCopy = structuredClone(data)
+
+            dataCopy.forEach((category: Category) => {
+                if (category.items) {
+                    const item = category.items.find(item => item.name === props.request?.data.title);
+                    const foundindex = category.items.findIndex(item => item.name === props.request?.data.title) - 1;
+                    if (item !== undefined) {
+                        if (!category.childCategory) {
+                            category.childCategory = [];
+                        }
+                        category.childCategory.push({
+                            name: props.request?.data.title,
+                            index: foundindex,
+                            checkbox: true,
+                            items: props.request?.data.layers.map(sublayer => ({
+                                "name": sublayer.title,
+                                "value": sublayer.id,
+                                "parentName": item.name,
+                                "parentValue": item.value,
+                            }))
+                        })
+                        category.items = category.items.filter(item => item.name !== props.request?.data.title);
+                        
+                            const newState = new Set(openCategories);
+                            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+                            newState.add(props.request?.data.title || ''); // Open category if it's closed
+                            setProperty("openCategories" as any, newState);
+                       
+                    }
+                }
+            })
+            setData(dataCopy)
+            requestTime.current = props.request.timestamp
+        }
+    }, [data, openCategories, props.request, setProperty])
+
+    React.useEffect(() => {
+        if (props.setting?.reset && (loadDataTime) !== (props.setting.reset)) {
+            setData(props.itemData)
+            setProperty("selection" as any,{})
+            setProperty("openCategories" as any,new Set())
+            setProperty("searchQuery" as any,'')
+            setProperty("loadDataTime" as any,props.setting.reset)
+        }
+    }, [loadDataTime, props.itemData, props.setting?.reset, setProperty])
+
+
+
+
+    return (
+        <>
+            <Search sx={{ border: 2, borderColor: 'var(--alertGrayForegroundHover)', marginLeft: '0px !important', marginRight: '0px' }} >
+                <SearchIconWrapper>
+                    <SearchIcon />
+                </SearchIconWrapper>
+                <StyledInputBase
+                    placeholder={props.setting?.searchHolder || "Search…"}
+                    inputProps={{ 'aria-label': 'search' }}
+                    value={searchQuery}
+                    onChange={handleSearchChange}
+                    sx={{ padding: '1px', fontSize: '1.4rem', color: 'var(--accentIconBorder) !important', width: '100%' }}
+                />
+                {searchQuery && (
+                    <IconButton
+                        onClick={() => {  setProperty("searchQuery" as any,'') }}
+                        size="large"
+                        sx={{ position: 'absolute', right: '8px', color: 'var(--alertGrayBackground) !important' }}
+                    >
+                        <ClearIcon />
+                    </IconButton>
+                )}
+            </Search>
+
+            <ThemeProvider theme={defaultTheme}>
+
+                <List sx={{ width: '100%' }} component="nav">
+                    {props.setting?.simpleSearch && searchQuery && filteredItems.length > 0 ? (
+                        filteredItems.map((item, index) => (
+                            <ListItemButton key={index} sx={{minHeight:'35px'}}>
+                                {item.img && typeof item.img === 'string' && item.img.trim() !== '' && (
+                                    <Box
+                                        component="img"
+                                        sx={{
+                                            height: 18,
+                                            width: 18,
+                                            marginLeft: '8px',
+                                        }}
+                                        alt="The item icon"
+                                        src={item.img} // Use the item's img property
+                                    />
+                                )}
+                                {props.setting?.checkbox ? <ListItemIcon sx={{ minWidth: '35px' }}>
+                                    <Checkbox sx={{ color: 'var(--accentIconBorder) !important' }} checked={isSelected(item)} />
+                                </ListItemIcon> : null}
+                                <ListItemText
+                                    primary={item.name}
+                                    secondary={item.description}
+                                    onClick={() => handleItemClick(item, findCategory(item))}
+                                    primaryTypographyProps={{ style: { fontWeight: '600' } }}
+                                />
+
+                            </ListItemButton>
+                        ))
+                    ) : searchQuery && filteredData.length > 0 ?
+                        (
+                            filteredData.map((category) => renderCategory(category, 0))
+                        ) :
+                        searchQuery && filteredData.length === 0 ? (
+                            <Typography variant="body1" sx={{ padding: '10px', fontSize: '1.5rem' }}>No result found</Typography>
+                        ) : (
+                            data.map((category) => renderCategory(category, 0))
+                        )}
+                </List>
+
+
+            </ThemeProvider>
+        </>
+    );
+}
+
+const ItemSearcher_V2ElementRegistration: FormElementRegistration<ItemSearcher_V2Props> = {
+    component: ItemSearcher_V2,
+    id: "ItemSearcher_V2",
+    getInitialProperties: () => ({
+        itemData: [{name:"Cate1",items:[{name:"ItemA"}]},{name:"Cate2",checkbox:true,items:[{name:"ItemB"}]}],
+        setting: {initialCollapse:true,checkbox:true,showCount:true},
+    }),
+};
+
+export default ItemSearcher_V2ElementRegistration;