react-restyle-components 0.4.41 → 0.4.43

package/lib/src/core-components/src/components/AutoComplete/auto-complete-filter-group-by-multiple-select-multiple-fields-display/auto-complete-filter-group-by-multiple-select-multiple-fields-display.component.d.ts

@@ -64,6 +64,12 @@ export interface UIConfig {
     emptyStateMessage?: string;
     /** Empty state description */
     emptyStateDescription?: string;
+    /** Enable internal filtering (filters data locally without external callback) */
+    enableInternalFilter?: boolean;
+    /** Show search input for each group separately */
+    showGroupSearch?: boolean;
+    /** Minimum items in group to show group search input */
+    groupSearchMinItems?: number;
 }
 export interface AutoCompleteFilterGroupByMultipleSelectMultipleFieldsDisplayProps {
     /** Unique identifier field name for items */
@@ -106,5 +112,7 @@ export interface AutoCompleteFilterGroupByMultipleSelectMultipleFieldsDisplayPro
     style?: React.CSSProperties;
     /** Debounce delay for filter (ms) */
     filterDebounceDelay?: number;
+    /** Key to re-render options list without remounting whole component */
+    optionsRenderKey?: string | number;
 }
-export declare const AutoCompleteFilterGroupByMultipleSelectMultipleFieldsDisplay: ({ uniqueField, groupByField, selectionConfig, displayConfig, uiConfig, loader, placeholder, data, hasError, disable, isUpperCase, name, groupByDetails, onFilter, onUpdate, onSelect, onBlur, className, style, filterDebounceDelay, }: AutoCompleteFilterGroupByMultipleSelectMultipleFieldsDisplayProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AutoCompleteFilterGroupByMultipleSelectMultipleFieldsDisplay: ({ uniqueField, groupByField, selectionConfig, displayConfig, uiConfig, loader, placeholder, data, hasError, disable, isUpperCase, name, groupByDetails, onFilter, onUpdate, onSelect, onBlur, className, style, filterDebounceDelay, optionsRenderKey, }: AutoCompleteFilterGroupByMultipleSelectMultipleFieldsDisplayProps) => import("react/jsx-runtime").JSX.Element;

package/lib/src/core-components/src/components/AutoComplete/auto-complete-filter-group-by-multiple-select-multiple-fields-display/auto-complete-filter-group-by-multiple-select-multiple-fields-display.component.js

@@ -1,15 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /* eslint-disable  */
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { Icon } from '../../Icon/Icon';
 import s from '../../../tc.module.css';
 import { cn } from '../../../utils';
-import { debounce } from '@techabl/core-utils';
-export const AutoCompleteFilterGroupByMultipleSelectMultipleFieldsDisplay = ({ uniqueField = '_id', groupByField, selectionConfig = {}, displayConfig = {}, uiConfig = {}, loader = false, placeholder = 'Search...', data, hasError = false, disable = false, isUpperCase = false, name, groupByDetails, onFilter, onUpdate, onSelect, onBlur, className, style, filterDebounceDelay = 300, }) => {
+export const AutoCompleteFilterGroupByMultipleSelectMultipleFieldsDisplay = ({ uniqueField = '_id', groupByField, selectionConfig = {}, displayConfig = {}, uiConfig = {}, loader = false, placeholder = 'Search...', data, hasError = false, disable = false, isUpperCase = false, name, groupByDetails, onFilter, onUpdate, onSelect, onBlur, className, style, filterDebounceDelay = 500, optionsRenderKey, }) => {
     // Merge configs with defaults
     const { isSelectedStringArray = false, maxSelection, onSelectionChange, } = selectionConfig;
     const { displayKeys, displaySeparator = ' - ', fallbackKeys = ['name', 'code'], renderItem, renderGroupName, } = displayConfig;
-    const { showGroupHeaders = true, collapsibleGroups = false, showSelectAllButtons = true, showSelectedSection = true, selectedPlaceholder, emptyStateMessage = 'No results found', emptyStateDescription = 'Try adjusting your search terms', } = uiConfig;
+    const { showGroupHeaders = true, collapsibleGroups = false, showSelectAllButtons = true, showSelectedSection = true, selectedPlaceholder, emptyStateMessage = 'No results found', emptyStateDescription = 'Try adjusting your search terms', enableInternalFilter = false, showGroupSearch = false, groupSearchMinItems = 5, } = uiConfig;
     // Get groupByField from props or legacy groupByDetails
     const groupField = groupByField || groupByDetails?.groupByName || 'lab';
     const defaultGroupName = groupByDetails?.defaultGroupName || 'Default';
@@ -41,6 +40,66 @@ export const AutoCompleteFilterGroupByMultipleSelectMultipleFieldsDisplay = ({ u
     const [collapsedGroups, setCollapsedGroups] = useState(new Set());
     const [isListOpen, setIsListOpen] = useState(false);
     const [totalItems, setTotalItems] = useState(0);
+    // Internal filter state
+    const [internalFilterText, setInternalFilterText] = useState('');
+    const [groupFilters, setGroupFilters] = useState({});
+    // Filter items based on display text
+    const filterItems = useCallback((items, searchText) => {
+        if (!searchText || searchText.trim() === '')
+            return items;
+        const lowerSearch = searchText.toLowerCase().trim();
+        const keys = displayKeys || data.displayKey || fallbackKeys;
+        return items.filter((item) => {
+            // Search across all display keys
+            return keys.some((key) => {
+                const value = item[key];
+                if (typeof value === 'string') {
+                    return value.toLowerCase().includes(lowerSearch);
+                }
+                if (typeof value === 'number') {
+                    return value.toString().includes(lowerSearch);
+                }
+                return false;
+            });
+        });
+    }, [displayKeys, data.displayKey, fallbackKeys]);
+    // Get filtered options based on internal filter and group filters
+    const getFilteredGroupedOptions = useCallback(() => {
+        const result = {};
+        const searchText = internalFilterText.trim();
+        Object.keys(groupedOptions).forEach((groupKey) => {
+            const groupItems = groupedOptions[groupKey] || [];
+            // Apply global filter first
+            let filteredItems = searchText
+                ? filterItems(groupItems, searchText)
+                : groupItems;
+            // Apply group-specific filter if exists
+            const groupSearch = groupFilters[groupKey]?.trim();
+            if (groupSearch) {
+                filteredItems = filterItems(filteredItems, groupSearch);
+            }
+            // Only include groups with matching items
+            if (filteredItems.length > 0) {
+                result[groupKey] = filteredItems;
+            }
+        });
+        return result;
+    }, [groupedOptions, internalFilterText, groupFilters, filterItems]);
+    // Handle group-specific search
+    const handleGroupSearch = (groupName, searchValue) => {
+        setGroupFilters((prev) => ({
+            ...prev,
+            [groupName]: searchValue,
+        }));
+    };
+    // Clear group filter
+    const clearGroupFilter = (groupName) => {
+        setGroupFilters((prev) => {
+            const newFilters = { ...prev };
+            delete newFilters[groupName];
+            return newFilters;
+        });
+    };
     // Helper to get selected groups
     const getSelectedGroups = React.useCallback(() => {
         return Object.keys(originalGroupedOptions).reduce((acc, groupKey) => {
@@ -59,6 +118,9 @@ export const AutoCompleteFilterGroupByMultipleSelectMultipleFieldsDisplay = ({ u
                     isListOpen) {
                     const selectedGroups = getSelectedGroups();
                     onSelect && onSelect(selectedGroups);
+                    // Call onUpdate when user clicks outside
+                    const flatList = getFlatListFromGroupedOptions(groupedOptions);
+                    onUpdate && onUpdate(flatList);
                     setIsListOpen(false);
                     setValue('');
                 }
@@ -67,31 +129,22 @@ export const AutoCompleteFilterGroupByMultipleSelectMultipleFieldsDisplay = ({ u
             return () => {
                 document.removeEventListener('mousedown', handleClickOutside);
             };
-        }, [ref, isListOpen, getSelectedGroups, onSelect]);
+        }, [
+            ref,
+            isListOpen,
+            getSelectedGroups,
+            onSelect,
+            groupedOptions,
+            getFlatListFromGroupedOptions,
+            onUpdate,
+        ]);
     };
-    const prevGroupedOptionsRef = useRef(groupedOptions);
-    useEffect(() => {
-        const prevGroupedOptions = prevGroupedOptionsRef.current;
-        if (JSON.stringify(prevGroupedOptions) !== JSON.stringify(groupedOptions)) {
-            // onUpdate &&
-            //   onUpdate(
-            //     Object.keys(groupedOptions).reduce((acc: any, groupKey: string) => {
-            //       const selectedItems = (groupedOptions[groupKey] || []).filter(
-            //         (item) => item.selected
-            //       );
-            //       if (selectedItems.length > 0) {
-            //         acc[groupKey] = selectedItems;
-            //       }
-            //       return acc;
-            //     }, {})
-            //   );
-            const list = Array.isArray(groupedOptions)
-                ? groupedOptions.flat(Number.POSITIVE_INFINITY)
-                : Object.values(groupedOptions).flat(Number.POSITIVE_INFINITY);
-            onUpdate && onUpdate(list);
-            prevGroupedOptionsRef.current = groupedOptions;
-        }
-    }, [groupedOptions, onUpdate]);
+    // Helper to get flat list from grouped options for onUpdate callback
+    const getFlatListFromGroupedOptions = useCallback((grouped) => {
+        return Array.isArray(grouped)
+            ? grouped.flat(Number.POSITIVE_INFINITY)
+            : Object.values(grouped).flat(Number.POSITIVE_INFINITY);
+    }, []);
     const wrapperRef = useRef(null);
     useOutsideAlerter(wrapperRef);
     // Process grouped data and mark selected items
@@ -122,6 +175,19 @@ export const AutoCompleteFilterGroupByMultipleSelectMultipleFieldsDisplay = ({ u
         setTotalItems(totalCount);
         return processedGroups;
     };
+    // Compute a key from data.list to detect changes (helps with MobX observables)
+    const dataListKey = React.useMemo(() => {
+        if (!data.list)
+            return '';
+        if (Array.isArray(data.list)) {
+            return data.list.length.toString();
+        }
+        // For grouped data, create a key from group names and item counts
+        const groups = Object.keys(data.list);
+        return groups
+            .map((g) => `${g}:${data.list[g]?.length || 0}`)
+            .join(',');
+    }, [data.list]);
     useEffect(() => {
         // Handle both grouped data structure and regular list structure
         let processedData = {};
@@ -154,25 +220,57 @@ export const AutoCompleteFilterGroupByMultipleSelectMultipleFieldsDisplay = ({ u
             ? data.selected
             : allSelected);
     }, [
-        data,
+        data.list,
         data.selected,
         isSelectedStringArray,
         uniqueField,
         groupField,
         defaultGroupName,
+        dataListKey, // Computed key to detect data.list changes
     ]);
-    const debouncedFilter = React.useMemo(() => debounce((search) => {
-        onFilter && onFilter(search);
-    }, filterDebounceDelay), [onFilter, filterDebounceDelay]);
+    // Store onFilter in ref to avoid recreating debounce when callback changes
+    const onFilterRef = useRef(onFilter);
+    onFilterRef.current = onFilter;
+    // Store timeout ref for proper cleanup
+    const debounceTimeoutRef = useRef(null);
+    // Cleanup timeout on unmount
+    useEffect(() => {
+        return () => {
+            if (debounceTimeoutRef.current) {
+                clearTimeout(debounceTimeoutRef.current);
+            }
+        };
+    }, []);
+    // Debounced filter using useCallback with stable reference
+    const debouncedFilter = useCallback((search) => {
+        if (!onFilterRef.current)
+            return;
+        // Clear any existing timeout
+        if (debounceTimeoutRef.current) {
+            clearTimeout(debounceTimeoutRef.current);
+        }
+        // Set new timeout
+        debounceTimeoutRef.current = setTimeout(() => {
+            onFilterRef.current?.(search);
+        }, filterDebounceDelay);
+    }, [filterDebounceDelay]);
     const onChange = (e) => {
         const search = e.target.value;
         setValue(search);
+        // Use internal filtering if enabled
+        if (enableInternalFilter) {
+            setInternalFilterText(search);
+        }
+        // Also call external filter if provided
         debouncedFilter(search);
     };
     const onKeyUp = (e) => {
         const charCode = e.which ? e.which : e.keyCode;
         if (charCode === 8) {
             const search = e.currentTarget.value;
+            if (enableInternalFilter) {
+                setInternalFilterText(search);
+            }
             debouncedFilter(search);
         }
     };
@@ -267,29 +365,45 @@ export const AutoCompleteFilterGroupByMultipleSelectMultipleFieldsDisplay = ({ u
         });
     };
     const renderGroupedOptions = () => {
-        const groupNames = Object.keys(groupedOptions).sort();
+        // Use filtered options instead of raw groupedOptions
+        const filteredOptions = getFilteredGroupedOptions();
+        const groupNames = Object.keys(filteredOptions).sort();
         if (groupNames.length === 0) {
             return (_jsxs("div", { className: cn(s['p-4'], s['text-center'], s['text-gray-500']), children: [_jsx(Icon, { nameIcon: "FaSearch", propsIcon: {
                             size: 24,
                             color: '#ccc',
-                        } }), _jsx("p", { className: cn(s['mt-2'], s['text-sm']), children: emptyStateMessage }), _jsx("p", { className: cn(s['text-xs']), children: emptyStateDescription })] }));
+                        } }), _jsx("p", { className: cn(s['mt-2'], s['text-sm']), children: emptyStateMessage }), _jsx("p", { className: cn(s['text-xs']), children: emptyStateDescription }), internalFilterText && (_jsx("button", { type: "button", onClick: () => {
+                            setInternalFilterText('');
+                            setValue('');
+                        }, className: cn(s['mt-3'], s['text-xs'], s['px-3'], s['py-1'], s['bg-blue-500'], s['text-white'], s['rounded'], s['hover:bg-blue-600']), children: "Clear Search" }))] }));
         }
         return groupNames.map((groupName) => {
-            const groupItems = groupedOptions[groupName] || [];
+            const groupItems = filteredOptions[groupName] || [];
+            // Get original group items for accurate counts
+            const originalGroupItems = groupedOptions[groupName] || [];
             const isCollapsed = collapsedGroups.has(groupName);
-            const selectedInGroup = groupItems.filter((item) => item.selected).length;
+            const selectedInGroup = originalGroupItems.filter((item) => item.selected).length;
             const unselectedInGroup = groupItems.filter((item) => !item.selected);
-            return (_jsxs("div", { className: cn(s['border-b'], s['border-gray-200'], s['last:border-b-0']), children: [showGroupHeaders && (_jsxs("div", { className: cn(s['flex'], s['items-center'], s['justify-between'], s['p-3'], s['bg-gray-50'], s['border-b'], s['border-gray-200'], s['font-semibold'], s['text-sm'], s['text-gray-700'], collapsibleGroups && s['cursor-pointer'], s['hover:bg-gray-100']), onClick: () => collapsibleGroups && toggleGroupCollapse(groupName), children: [_jsxs("div", { className: cn(s['flex'], s['items-center'], s['gap-2']), children: [collapsibleGroups && (_jsx(Icon, { nameIcon: isCollapsed ? 'FaChevronRight' : 'FaChevronDown', propsIcon: {
-                                            size: 12,
-                                            color: '#666',
-                                        } })), _jsx("span", { className: cn(s['font-bold'], s['text-blue-700']), children: getGroupNameDisplay(groupName, groupItems.length) }), _jsxs("span", { className: cn(s['text-xs'], s['bg-blue-100'], s['text-blue-800'], s['px-2'], s['py-1'], s['rounded-full']), children: [selectedInGroup, "/", groupItems.length] })] }), showSelectAllButtons && (_jsxs("div", { className: cn(s['flex'], s['gap-1']), children: [_jsx("button", { type: "button", onClick: (e) => {
-                                            e.stopPropagation();
-                                            handleGroupSelectAll(groupName, groupItems, true);
-                                        }, className: cn(s['text-xs'], s['px-2'], s['py-1'], s['bg-green-500'], s['text-white'], s['rounded'], s['hover:bg-green-600'], s['transition-colors'], selectedInGroup === groupItems.length && s['opacity-50'], selectedInGroup === groupItems.length &&
-                                            s['cursor-not-allowed']), title: `Select all in ${groupName}`, disabled: selectedInGroup === groupItems.length, children: "All" }), _jsx("button", { type: "button", onClick: (e) => {
-                                            e.stopPropagation();
-                                            handleGroupSelectAll(groupName, groupItems, false);
-                                        }, className: cn(s['text-xs'], s['px-2'], s['py-1'], s['bg-gray-500'], s['text-white'], s['rounded'], s['hover:bg-gray-600'], s['transition-colors'], selectedInGroup === 0 && s['opacity-50'], selectedInGroup === 0 && s['cursor-not-allowed']), title: `Deselect all in ${groupName}`, disabled: selectedInGroup === 0, children: "None" })] }))] })), (!collapsibleGroups || !isCollapsed) && (_jsxs("div", { className: cn(s['max-h-60'], s['overflow-y-auto']), children: [unselectedInGroup.map((item, index) => (_jsx("div", { className: cn(s['flex'], s['items-center'], s['gap-3'], s['p-3'], s['hover:bg-blue-50'], s['border-l-4'], s['border-transparent'], s['transition-colors']), children: _jsxs("label", { className: cn(s['flex'], s['items-center'], s['cursor-pointer'], s['w-full']), children: [_jsx("input", { id: `${groupName}-${index}`, className: cn(s['h-4'], s['w-4'], s['text-blue-600'], s['border-gray-300'], s['rounded'], s['focus:ring-blue-500'], s['cursor-pointer']), type: "checkbox", checked: false, onChange: () => {
+            const hasGroupFilter = !!groupFilters[groupName];
+            const showGroupSearchInput = showGroupSearch && originalGroupItems.length >= groupSearchMinItems;
+            return (_jsxs("div", { className: cn(s['border-b'], s['border-gray-200'], s['last:border-b-0']), children: [showGroupHeaders && (_jsxs("div", { className: cn(s['flex'], s['flex-col'], s['bg-gradient-to-r'], s['from-blue-50'], s['to-indigo-50'], s['border-b'], s['border-blue-200']), children: [_jsxs("div", { className: cn(s['flex'], s['items-center'], s['justify-between'], s['p-3'], s['font-semibold'], s['text-sm'], s['text-gray-700'], collapsibleGroups && s['cursor-pointer'], s['hover:bg-blue-100'], s['transition-colors']), onClick: () => collapsibleGroups && toggleGroupCollapse(groupName), children: [_jsxs("div", { className: cn(s['flex'], s['items-center'], s['gap-2']), children: [collapsibleGroups && (_jsx(Icon, { nameIcon: isCollapsed ? 'FaChevronRight' : 'FaChevronDown', propsIcon: {
+                                                    size: 12,
+                                                    color: '#4F46E5',
+                                                } })), _jsx("span", { className: cn(s['font-bold'], s['text-indigo-700'], s['text-base']), children: getGroupNameDisplay(groupName, originalGroupItems.length) }), _jsxs("span", { className: cn(s['text-xs'], s['bg-indigo-100'], s['text-indigo-800'], s['px-2'], s['py-1'], s['rounded-full'], s['font-medium']), children: [selectedInGroup, "/", originalGroupItems.length] }), groupItems.length !== originalGroupItems.length && (_jsxs("span", { className: cn(s['text-xs'], s['bg-amber-100'], s['text-amber-800'], s['px-2'], s['py-1'], s['rounded-full']), children: [groupItems.length, " shown"] }))] }), showSelectAllButtons && (_jsxs("div", { className: cn(s['flex'], s['gap-1']), children: [_jsx("button", { type: "button", onClick: (e) => {
+                                                    e.stopPropagation();
+                                                    handleGroupSelectAll(groupName, originalGroupItems, true);
+                                                }, className: cn(s['text-xs'], s['px-2'], s['py-1'], s['bg-emerald-500'], s['text-white'], s['rounded'], s['hover:bg-emerald-600'], s['transition-colors'], s['shadow-sm'], selectedInGroup === originalGroupItems.length &&
+                                                    s['opacity-50'], selectedInGroup === originalGroupItems.length &&
+                                                    s['cursor-not-allowed']), title: `Select all in ${groupName}`, disabled: selectedInGroup === originalGroupItems.length, children: "All" }), _jsx("button", { type: "button", onClick: (e) => {
+                                                    e.stopPropagation();
+                                                    handleGroupSelectAll(groupName, originalGroupItems, false);
+                                                }, className: cn(s['text-xs'], s['px-2'], s['py-1'], s['bg-slate-500'], s['text-white'], s['rounded'], s['hover:bg-slate-600'], s['transition-colors'], s['shadow-sm'], selectedInGroup === 0 && s['opacity-50'], selectedInGroup === 0 && s['cursor-not-allowed']), title: `Deselect all in ${groupName}`, disabled: selectedInGroup === 0, children: "None" })] }))] }), showGroupSearchInput && !isCollapsed && (_jsx("div", { className: cn(s['px-3'], s['pb-2']), children: _jsxs("div", { className: cn(s['relative']), children: [_jsx("input", { type: "text", placeholder: `Search in ${groupName}...`, value: groupFilters[groupName] || '', onChange: (e) => handleGroupSearch(groupName, e.target.value), onClick: (e) => e.stopPropagation(), className: cn(s['w-full'], s['px-3'], s['py-1.5'], s['text-sm'], s['border'], s['border-indigo-200'], s['rounded-md'], s['focus:outline-none'], s['focus:ring-2'], s['focus:ring-indigo-300'], s['focus:border-indigo-400'], s['bg-white'], s['placeholder-gray-400']) }), hasGroupFilter && (_jsx("button", { type: "button", onClick: (e) => {
+                                                e.stopPropagation();
+                                                clearGroupFilter(groupName);
+                                            }, className: cn(s['absolute'], s['right-2'], s['top-1/2'], s['-translate-y-1/2'], s['text-gray-400'], s['hover:text-gray-600']), children: _jsx(Icon, { nameIcon: "FaTimes", propsIcon: {
+                                                    size: 12,
+                                                    color: 'currentColor',
+                                                } }) }))] }) }))] })), (!collapsibleGroups || !isCollapsed) && (_jsxs("div", { className: cn(s['max-h-60'], s['overflow-y-auto']), children: [unselectedInGroup.map((item, index) => (_jsx("div", { className: cn(s['flex'], s['items-center'], s['gap-3'], s['p-3'], s['hover:bg-blue-50'], s['border-l-4'], s['border-transparent'], s['transition-colors']), children: _jsxs("label", { className: cn(s['flex'], s['items-center'], s['cursor-pointer'], s['w-full']), children: [_jsx("input", { id: `${groupName}-${index}`, className: cn(s['h-4'], s['w-4'], s['text-blue-600'], s['border-gray-300'], s['rounded'], s['focus:ring-blue-500'], s['cursor-pointer']), type: "checkbox", checked: false, onChange: () => {
                                                 const itemIndex = groupedOptions[groupName].findIndex((grpItem) => grpItem[uniqueField] === item[uniqueField]);
                                                 handleGroupSelectToggle(groupName, false, itemIndex);
                                             } }), _jsx("div", { className: cn(s['ml-3'], s['flex'], s['flex-col']), children: renderItem ? (renderItem(item)) : (_jsx("span", { className: cn(s['text-sm'], s['font-medium'], s['text-gray-700']), children: getItemDisplayText(item) })) })] }) }, `${groupName}-${item[uniqueField] || index}`))), unselectedInGroup.length === 0 && groupItems.length > 0 && (_jsx("div", { className: cn(s['p-3'], s['text-center'], s['text-gray-500'], s['text-sm']), children: "All items in this group are selected" }))] }))] }, groupName));
@@ -325,10 +439,13 @@ export const AutoCompleteFilterGroupByMultipleSelectMultipleFieldsDisplay = ({ u
                             } }))] }), isListOpen && (_jsxs("div", { className: cn(s['mt-1'], s['absolute'], s['rounded-md'], s['bg-white'], s['border'], s['border-gray-300'], s['shadow-lg'], s['z-50'], s['w-full'], s['max-h-96'], s['overflow-hidden']), style: { zIndex: 1000 }, children: [_jsx("div", { className: cn(s['p-3'], s['border-b'], s['border-gray-200'], s['bg-gray-50'], s['text-sm'], s['font-medium'], s['text-gray-700']), children: _jsxs("div", { className: cn(s['flex'], s['justify-between'], s['items-center']), children: [_jsxs("span", { children: [Object.keys(groupedOptions).length, ' ', groupField?.toUpperCase(), ", ", totalItems, ' ', totalItemName?.toUpperCase()] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: cn(s['text-blue-600']), children: [getSelectedCount(), " Selected"] }), _jsx("div", { className: cn(s['flex'], s['gap-2']), children: _jsx("button", { type: "button", className: cn(s['text-xs'], s['px-3'], s['py-1'], s['bg-blue-600'], s['text-white'], s['rounded'], s['hover:bg-blue-700'], s['transition-colors']), onClick: () => {
                                                         const selectedGroups = getSelectedGroups();
                                                         onSelect(selectedGroups);
+                                                        // Call onUpdate when user clicks OK
+                                                        const flatList = getFlatListFromGroupedOptions(groupedOptions);
+                                                        onUpdate && onUpdate(flatList);
                                                         setIsListOpen(false);
                                                         setValue('');
                                                     }, children: "OK" }) })] })] }) }), _jsxs("div", { className: cn(s['max-h-80'], s['overflow-y-auto']), children: [showSelectedSection && getSelectedCount() > 0 && (_jsxs("div", { className: cn(s['border-b'], s['border-gray-200']), children: [_jsx("div", { className: cn(s['p-3'], s['bg-blue-50'], s['border-b'], s['border-blue-200'], s['font-semibold'], s['text-sm'], s['text-blue-700']), children: _jsxs("div", { className: cn(s['flex'], s['items-center'], s['gap-2']), children: [_jsx(Icon, { nameIcon: "FaCheck", propsIcon: {
                                                             size: 12,
                                                             color: '#1976d2',
-                                                        } }), _jsxs("span", { children: ["Selected Items (", getSelectedCount(), ")"] })] }) }), _jsx("div", { className: cn(s['max-h-48'], s['overflow-y-auto']), children: selectedItems?.map((item, index) => (_jsx("div", { className: cn(s['flex'], s['items-center'], s['gap-3'], s['p-3'], s['hover:bg-blue-50'], s['border-l-4'], s['border-blue-500'], s['bg-blue-25'], s['transition-colors']), children: _jsxs("label", { className: cn(s['flex'], s['items-center'], s['cursor-pointer'], s['w-full']), children: [_jsx("input", { type: "checkbox", checked: true, onChange: () => handleDeselectItem(item), className: cn(s['h-4'], s['w-4'], s['text-blue-600'], s['border-gray-300'], s['rounded'], s['focus:ring-blue-500'], s['cursor-pointer']) }), _jsx("div", { className: cn(s['ml-3'], s['flex'], s['flex-col']), children: renderItem ? (renderItem(item)) : (_jsxs(_Fragment, { children: [_jsx("span", { className: cn(s['text-sm'], s['font-medium'], s['text-blue-700']), children: getItemDisplayText(item) }), _jsx("span", { className: cn(s['text-xs'], s['text-gray-500']), children: item[groupField] || defaultGroupName })] })) })] }) }, `selected-${item[uniqueField] || index}`))) })] })), _jsx("div", { children: renderGroupedOptions() })] })] }))] }) }));
+                                                        } }), _jsxs("span", { children: ["Selected Items (", getSelectedCount(), ")"] })] }) }), _jsx("div", { className: cn(s['max-h-48'], s['overflow-y-auto']), children: selectedItems?.map((item, index) => (_jsx("div", { className: cn(s['flex'], s['items-center'], s['gap-3'], s['p-3'], s['hover:bg-blue-50'], s['border-l-4'], s['border-blue-500'], s['bg-blue-25'], s['transition-colors']), children: _jsxs("label", { className: cn(s['flex'], s['items-center'], s['cursor-pointer'], s['w-full']), children: [_jsx("input", { type: "checkbox", checked: true, onChange: () => handleDeselectItem(item), className: cn(s['h-4'], s['w-4'], s['text-blue-600'], s['border-gray-300'], s['rounded'], s['focus:ring-blue-500'], s['cursor-pointer']) }), _jsx("div", { className: cn(s['ml-3'], s['flex'], s['flex-col']), children: renderItem ? (renderItem(item)) : (_jsxs(_Fragment, { children: [_jsx("span", { className: cn(s['text-sm'], s['font-medium'], s['text-blue-700']), children: getItemDisplayText(item) }), _jsx("span", { className: cn(s['text-xs'], s['text-gray-500']), children: item[groupField] || defaultGroupName })] })) })] }) }, `selected-${item[uniqueField] || index}`))) })] })), _jsx("div", { children: renderGroupedOptions() })] })] }, optionsRenderKey))] }) }));
 };

package/lib/src/core-components/src/components/Icon/Icon.d.ts

@@ -30,6 +30,14 @@ export interface IconProps {
     /** Custom styles for internal elements */
     styles?: IconStyles;
 }
+export interface IconContextProps {
+    isDisable?: boolean;
+    color?: string;
+    size?: string;
+    onClick?: () => void;
+    children?: React.ReactNode;
+    style?: CSSProperties;
+}
 export interface CompatIconProps {
     src: string | React.ReactNode;
     className?: string;
@@ -41,3 +49,4 @@ export declare const Icon: {
     SSR: ({ nameIcon, classNames, styles, ...props }: IconProps) => React.JSX.Element;
     Compat: ({ src, className, style, ...props }: CompatIconProps) => React.JSX.Element;
 };
+export declare const IconContext: React.FunctionComponent<IconContextProps>;

package/lib/src/core-components/src/components/Icon/Icon.js

@@ -3,8 +3,30 @@ import { Suspense } from 'react';
 import _ from 'lodash';
 import { Tooltip } from '../Tooltip';
 import loadable from '@loadable/component';
+import { IconContext as Context } from 'react-icons';
 import s from '../../tc.module.css';
 import { cn } from '../../utils';
+// Static imports for better reliability
+import * as IconRi from 'react-icons/ri';
+import * as IconIm from 'react-icons/im';
+import * as IconFa from 'react-icons/fa';
+import * as IconFc from 'react-icons/fc';
+import * as IconGi from 'react-icons/gi';
+import * as IconCg from 'react-icons/cg';
+import * as IconGr from 'react-icons/gr';
+import * as IconBs from 'react-icons/bs';
+import * as IconFi from 'react-icons/fi';
+import * as Iconmd from 'react-icons/md';
+import * as Iconio from 'react-icons/io';
+import * as Iconio5 from 'react-icons/io5';
+import * as Iconsi from 'react-icons/si';
+import * as Iconai from 'react-icons/ai';
+import * as Iconvsc from 'react-icons/vsc';
+import * as Iconhi from 'react-icons/hi';
+import * as IconBi from 'react-icons/bi';
+import * as IconTb from 'react-icons/tb';
+import * as IconsCi from 'react-icons/ci';
+import * as IconAi from 'react-icons/ai';
 const CompatIcon = ({ src, className, style, ...props }) => {
     if (typeof src === 'string') {
         return (_jsx("img", { src: src, className: cn(s.icon, className), style: style, ...props, alt: "" }));
@@ -20,6 +42,54 @@ export const Icon = ({ nameIcon, propsIcon, className, tooltip = '', isDisable =
             ...propsIcon,
             color: isDisable ? '#808080' : propsIcon?.color || 'rgb(36 48 63)',
         };
+        // Try to use static imports first for better reliability
+        const getStaticIcon = () => {
+            const lib = nameIcon.startsWith('IoIo')
+                ? 'io'
+                : nameIcon.startsWith('Io')
+                    ? 'io5'
+                    : nameIcon
+                        .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+                        .split(' ')[0]
+                        .toLowerCase();
+            // Map to static imports
+            const iconMap = {
+                ai: IconAi || Iconai,
+                ri: IconRi,
+                im: IconIm,
+                fa: IconFa,
+                fc: IconFc,
+                gi: IconGi,
+                cg: IconCg,
+                gr: IconGr,
+                bs: IconBs,
+                fi: IconFi,
+                md: Iconmd,
+                io: Iconio,
+                io5: Iconio5,
+                si: Iconsi,
+                vsc: Iconvsc,
+                hi: Iconhi,
+                bi: IconBi,
+                tb: IconTb,
+                ci: IconsCi,
+            };
+            const iconLib = iconMap[lib];
+            if (iconLib && iconLib[nameIcon]) {
+                return iconLib[nameIcon];
+            }
+            return null;
+        };
+        const StaticIcon = getStaticIcon();
+        if (StaticIcon) {
+            // Use static import
+            const IconComponent = StaticIcon;
+            return (_jsx("div", { className: cn(s.iconContainer, className, classNames.container), style: styles.container, onClick: () => {
+                    if (!isDisable)
+                        onClick && onClick();
+                }, children: !_.isEmpty(tooltip) ? (_jsx(Tooltip, { content: tooltip, children: _jsx(IconComponent, { ...iconProps, className: cn(s.icon, classNames.icon), style: styles.icon }) })) : (_jsx(IconComponent, { ...iconProps, className: cn(s.icon, classNames.icon), style: styles.icon })) }));
+        }
+        // Fallback to dynamic import
         const lib = nameIcon.startsWith('IoIo')
             ? 'io'
             : nameIcon.startsWith('Io')
@@ -74,6 +144,16 @@ export const Icon = ({ nameIcon, propsIcon, className, tooltip = '', isDisable =
         return _jsx(_Fragment, {});
     }
 };
+export const IconContext = (props) => {
+    return (_jsx(Context.Provider, { value: {
+            color: props?.isDisable ? '#808080' : props?.color || '#ffffff',
+            size: props?.size || '20',
+        }, children: _jsx("div", { onClick: () => {
+                if (props?.isDisable)
+                    return;
+                props.onClick && props.onClick();
+            }, style: props?.style, children: props?.children }) }));
+};
 // Attach sub-components
 Icon.SSR = SSRIcon;
 Icon.Compat = CompatIcon;