react-restyle-components 0.4.46 → 0.4.47

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,451 +1 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/* eslint-disable  */
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { Icon } from '../../Icon/Icon';
-import s from '../../../tc.module.css';
-import { cn } from '../../../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 = 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', 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';
-    const totalItemName = groupByDetails?.totalItemName || 'department';
-    // Helper to get display text for item
-    const getItemDisplayText = (item) => {
-        if (renderItem) {
-            const rendered = renderItem(item);
-            if (typeof rendered === 'string')
-                return rendered;
-        }
-        const keys = displayKeys || data.displayKey || fallbackKeys;
-        return (keys
-            .map((key) => item[key])
-            .filter(Boolean)
-            .join(displaySeparator) || 'Unnamed Item');
-    };
-    // Helper to get group name display
-    const getGroupNameDisplay = (groupName, count) => {
-        if (renderGroupName) {
-            return renderGroupName(groupName, count);
-        }
-        return groupName;
-    };
-    const [value, setValue] = useState('');
-    const [groupedOptions, setGroupedOptions] = useState({});
-    const [originalGroupedOptions, setOriginalGroupedOptions] = useState({});
-    const [selectedItems, setSelectedItems] = useState([]);
-    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) => {
-            const selectedItems = (originalGroupedOptions[groupKey] || []).filter((item) => item.selected);
-            if (selectedItems.length > 0) {
-                acc[groupKey] = selectedItems;
-            }
-            return acc;
-        }, {});
-    }, [originalGroupedOptions]);
-    const useOutsideAlerter = (ref) => {
-        useEffect(() => {
-            function handleClickOutside(event) {
-                if (ref.current &&
-                    !ref.current.contains(event.target) &&
-                    isListOpen) {
-                    const selectedGroups = getSelectedGroups();
-                    onSelect && onSelect(selectedGroups);
-                    // Call onUpdate when user clicks outside
-                    const flatList = getFlatListFromGroupedOptions(groupedOptions);
-                    onUpdate && onUpdate(flatList);
-                    setIsListOpen(false);
-                    setValue('');
-                }
-            }
-            document.addEventListener('mousedown', handleClickOutside);
-            return () => {
-                document.removeEventListener('mousedown', handleClickOutside);
-            };
-        }, [
-            ref,
-            isListOpen,
-            getSelectedGroups,
-            onSelect,
-            groupedOptions,
-            getFlatListFromGroupedOptions,
-            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
-    const processGroupedData = (groupedData, selectedItems) => {
-        const processedGroups = {};
-        let totalCount = 0;
-        Object.keys(groupedData).forEach((groupKey) => {
-            const groupItems = groupedData[groupKey] || [];
-            const processedItems = groupItems.map((item) => {
-                totalCount++;
-                const isSelected = selectedItems && selectedItems.length > 0
-                    ? selectedItems.some((sItem) => {
-                        if (isSelectedStringArray) {
-                            return sItem === item[uniqueField];
-                        }
-                        else {
-                            return sItem[uniqueField] === item[uniqueField];
-                        }
-                    })
-                    : false;
-                return {
-                    ...item,
-                    selected: isSelected,
-                };
-            });
-            processedGroups[groupKey] = processedItems;
-        });
-        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 = {};
-        if (data.list && Array.isArray(data.list)) {
-            // If data.list is an array, group by the specified field
-            const grouped = data.list.reduce((groups, item) => {
-                const groupKey = item?.[groupField] || defaultGroupName;
-                if (!groups[groupKey]) {
-                    groups[groupKey] = [];
-                }
-                groups[groupKey].push(item);
-                return groups;
-            }, {});
-            processedData = processGroupedData(grouped, data.selected || []);
-        }
-        else if (typeof data.list === 'object' && data.list !== null) {
-            // If data.list is an object, it's already grouped
-            processedData = processGroupedData(data.list, data.selected || []);
-        }
-        // Store both original and current grouped options
-        setOriginalGroupedOptions(processedData);
-        setGroupedOptions(processedData);
-        // Extract and maintain selected items separately
-        const allSelected = [];
-        Object.keys(processedData).forEach((groupKey) => {
-            const selectedInGroup = (processedData[groupKey] || []).filter((item) => item.selected);
-            allSelected.push(...selectedInGroup);
-        });
-        setSelectedItems(Array.isArray(data?.selected) && !isSelectedStringArray
-            ? data.selected
-            : allSelected);
-    }, [
-        data.list,
-        data.selected,
-        isSelectedStringArray,
-        uniqueField,
-        groupField,
-        defaultGroupName,
-        dataListKey, // Computed key to detect data.list changes
-    ]);
-    // 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);
-        }
-    };
-    const toggleGroupCollapse = (groupName) => {
-        const newCollapsedGroups = new Set(collapsedGroups);
-        if (newCollapsedGroups.has(groupName)) {
-            newCollapsedGroups.delete(groupName);
-        }
-        else {
-            newCollapsedGroups.add(groupName);
-        }
-        setCollapsedGroups(newCollapsedGroups);
-    };
-    // Simple and effective group select all function
-    const handleGroupSelectAll = (groupName, groupItems, selectAll) => {
-        const updatedGroupItems = groupItems.map((item) => ({
-            ...item,
-            selected: selectAll,
-        }));
-        // Update groupedOptions state
-        setGroupedOptions((prev) => ({
-            ...prev,
-            [groupName]: updatedGroupItems,
-        }));
-        // Update originalGroupedOptions to maintain consistency
-        setOriginalGroupedOptions((prev) => ({
-            ...prev,
-            [groupName]: updatedGroupItems,
-        }));
-        // Update selected items list
-        if (selectAll) {
-            // Add all items from this group to selected items
-            const newSelectedItems = [...selectedItems];
-            groupItems.forEach((item) => {
-                const existingIndex = newSelectedItems.findIndex((selected) => selected[uniqueField] === item[uniqueField]);
-                if (existingIndex === -1) {
-                    newSelectedItems.push({ ...item, selected: true });
-                }
-            });
-            setSelectedItems(newSelectedItems);
-        }
-        else {
-            // Remove all items from this group from selected items
-            const newSelectedItems = selectedItems.filter((selectedItem) => {
-                return !groupItems.some((groupItem) => groupItem[uniqueField] === selectedItem[uniqueField]);
-            });
-            setSelectedItems(newSelectedItems);
-        }
-    };
-    const handleGroupSelectToggle = (groupName, isSelected, itemIndex) => {
-        const item = groupedOptions[groupName][itemIndex];
-        const updatedGroupItems = groupedOptions[groupName].map((grpItem, index) => index === itemIndex ? { ...grpItem, selected: !isSelected } : grpItem);
-        setGroupedOptions((prev) => ({
-            ...prev,
-            [groupName]: updatedGroupItems,
-        }));
-        // Update originalGroupedOptions to maintain consistency
-        setOriginalGroupedOptions((prev) => ({
-            ...prev,
-            [groupName]: updatedGroupItems,
-        }));
-        // Update selected items list
-        if (!isSelected) {
-            // Add item to selected items
-            setSelectedItems((prev) => [...prev, { ...item, selected: true }]);
-        }
-        else {
-            // Remove item from selected items
-            setSelectedItems((prev) => prev.filter((selectedItem) => selectedItem[uniqueField] !== item[uniqueField]));
-        }
-    };
-    // Handle individual item deselection from selected section
-    const handleDeselectItem = (itemToDeselect) => {
-        // Remove from selected items
-        setSelectedItems((prev) => prev.filter((item) => item[uniqueField] !== itemToDeselect[uniqueField]));
-        // Update both grouped options
-        Object.keys(groupedOptions).forEach((groupKey) => {
-            const updatedGroupItems = groupedOptions[groupKey].map((item) => {
-                if (item[uniqueField] === itemToDeselect[uniqueField]) {
-                    return { ...item, selected: false };
-                }
-                return item;
-            });
-            setGroupedOptions((prev) => ({
-                ...prev,
-                [groupKey]: updatedGroupItems,
-            }));
-            setOriginalGroupedOptions((prev) => ({
-                ...prev,
-                [groupKey]: updatedGroupItems,
-            }));
-        });
-    };
-    const renderGroupedOptions = () => {
-        // 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 }), 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 = filteredOptions[groupName] || [];
-            // Get original group items for accurate counts
-            const originalGroupItems = groupedOptions[groupName] || [];
-            const isCollapsed = collapsedGroups.has(groupName);
-            const selectedInGroup = originalGroupItems.filter((item) => item.selected).length;
-            const unselectedInGroup = groupItems.filter((item) => !item.selected);
-            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));
-        });
-    };
-    const getSelectedCount = () => {
-        return selectedItems?.length;
-    };
-    // Call selection change callback when selection updates
-    useEffect(() => {
-        if (onSelectionChange) {
-            onSelectionChange(getSelectedGroups());
-        }
-    }, [groupedOptions, onSelectionChange, getSelectedGroups]);
-    return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, className: cn(s['w-full'], s['relative'], className), style: style, children: [_jsxs("div", { className: cn(s['flex'], s['items-center'], s['leading-4'], s['p-2'], s['focus:outline-none'], s['focus:ring'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], s['rounded-md'], {
-                        [s['border-red']]: hasError,
-                        [s['border-gray-300']]: !hasError,
-                    }, s['bg-white']), children: [_jsx("input", { placeholder: placeholder, disabled: disable, name: name, value: !isListOpen
-                                ? getSelectedCount() > 0
-                                    ? typeof selectedPlaceholder === 'function'
-                                        ? selectedPlaceholder(getSelectedCount())
-                                        : selectedPlaceholder ||
-                                            `${getSelectedCount()} Items Selected`
-                                    : placeholder
-                                : isUpperCase
-                                    ? value?.toUpperCase()
-                                    : value, className: cn(s['w-full'], s['focus:outline-none'], s['bg-transparent']), onKeyUp: onKeyUp, onChange: onChange, onClick: () => setIsListOpen(true), onBlur: (e) => onBlur && onBlur(e) }), loader ? (_jsx("div", { className: cn(s['animate-spin'], s['w-4'], s['h-4']), children: _jsx(Icon, { nameIcon: "FaSpinner", propsIcon: {
-                                    size: 16,
-                                    color: '#666',
-                                } }) })) : (_jsx(Icon, { nameIcon: isListOpen ? 'FaChevronUp' : 'FaChevronDown', propsIcon: {
-                                size: 16,
-                                color: '#000000',
-                            } }))] }), 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() })] })] }, optionsRenderKey))] }) }));
-};
+"use strict";import{jsx as c,jsxs as i,Fragment as me}from"react/jsx-runtime";import fe,{useState as f,useEffect as E,useRef as X,useCallback as L}from"react";import{Icon as v}from"../../Icon/Icon";import e from"../../../tc.module.css";import{cn as n}from"../../../utils";export const AutoCompleteFilterGroupByMultipleSelectMultipleFieldsDisplay=({uniqueField:p="_id",groupByField:be,selectionConfig:xe={},displayConfig:ge={},uiConfig:ye={},loader:ve=!1,placeholder:Z="Search...",data:d,hasError:q=!1,disable:Ie=!1,isUpperCase:we=!1,name:Ce,groupByDetails:z,onFilter:ee,onUpdate:I,onSelect:S,onBlur:te,className:Ne,style:Se,filterDebounceDelay:se=500,optionsRenderKey:Ge})=>{const{isSelectedStringArray:P=!1,maxSelection:qe,onSelectionChange:R}=xe,{displayKeys:_,displaySeparator:ke=" - ",fallbackKeys:D=["name","code"],renderItem:x,renderGroupName:re}=ge,{showGroupHeaders:Oe=!0,collapsibleGroups:G=!1,showSelectAllButtons:je=!0,showSelectedSection:Ae=!0,selectedPlaceholder:M,emptyStateMessage:Te="No results found",emptyStateDescription:Fe="Try adjusting your search terms",enableInternalFilter:ne=!1,showGroupSearch:$e=!1,groupSearchMinItems:Ee=5}=ye,k=be||z?.groupByName||"lab",K=z?.defaultGroupName||"Default",Le=z?.totalItemName||"department",le=t=>{if(x){const s=x(t);if(typeof s=="string")return s}return(_||d.displayKey||D).map(s=>t[s]).filter(Boolean).join(ke)||"Unnamed Item"},ze=(t,r)=>re?re(t,r):t,[oe,O]=f(""),[m,j]=f({}),[U,A]=f({}),[T,g]=f([]),[ce,Pe]=f(new Set),[w,V]=f(!1),[Re,_e]=f(0),[B,Y]=f(""),[F,ae]=f({}),H=L((t,r)=>{if(!r||r.trim()==="")return t;const s=r.toLowerCase().trim(),o=_||d.displayKey||D;return t.filter(l=>o.some(a=>{const u=l[a];return typeof u=="string"?u.toLowerCase().includes(s):typeof u=="number"?u.toString().includes(s):!1}))},[_,d.displayKey,D]),De=L(()=>{const t={},r=B.trim();return Object.keys(m).forEach(s=>{const o=m[s]||[];let l=r?H(o,r):o;const a=F[s]?.trim();a&&(l=H(l,a)),l.length>0&&(t[s]=l)}),t},[m,B,F,H]),Me=(t,r)=>{ae(s=>({...s,[t]:r}))},Ke=t=>{ae(r=>{const s={...r};return delete s[t],s})},C=fe.useCallback(()=>Object.keys(U).reduce((t,r)=>{const s=(U[r]||[]).filter(o=>o.selected);return s.length>0&&(t[r]=s),t},{}),[U]),Ue=t=>{E(()=>{function r(s){if(t.current&&!t.current.contains(s.target)&&w){const o=C();S&&S(o);const l=J(m);I&&I(l),V(!1),O("")}}return document.addEventListener("mousedown",r),()=>{document.removeEventListener("mousedown",r)}},[t,w,C,S,m,J,I])},J=L(t=>Array.isArray(t)?t.flat(Number.POSITIVE_INFINITY):Object.values(t).flat(Number.POSITIVE_INFINITY),[]),ie=X(null);Ue(ie);const de=(t,r)=>{const s={};let o=0;return Object.keys(t).forEach(l=>{const u=(t[l]||[]).map(b=>{o++;const W=r&&r.length>0?r.some($=>P?$===b[p]:$[p]===b[p]):!1;return{...b,selected:W}});s[l]=u}),_e(o),s},Ve=fe.useMemo(()=>d.list?Array.isArray(d.list)?d.list.length.toString():Object.keys(d.list).map(r=>`${r}:${d.list[r]?.length||0}`).join(","):"",[d.list]);E(()=>{let t={};if(d.list&&Array.isArray(d.list)){const s=d.list.reduce((o,l)=>{const a=l?.[k]||K;return o[a]||(o[a]=[]),o[a].push(l),o},{});t=de(s,d.selected||[])}else typeof d.list=="object"&&d.list!==null&&(t=de(d.list,d.selected||[]));A(t),j(t);const r=[];Object.keys(t).forEach(s=>{const o=(t[s]||[]).filter(l=>l.selected);r.push(...o)}),g(Array.isArray(d?.selected)&&!P?d.selected:r)},[d.list,d.selected,P,p,k,K,Ve]);const Q=X(ee);Q.current=ee;const N=X(null);E(()=>()=>{N.current&&clearTimeout(N.current)},[]);const ue=L(t=>{Q.current&&(N.current&&clearTimeout(N.current),N.current=setTimeout(()=>{Q.current?.(t)},se))},[se]),Be=t=>{const r=t.target.value;O(r),ne&&Y(r),ue(r)},Ye=t=>{if((t.which?t.which:t.keyCode)===8){const s=t.currentTarget.value;ne&&Y(s),ue(s)}},He=t=>{const r=new Set(ce);r.has(t)?r.delete(t):r.add(t),Pe(r)},pe=(t,r,s)=>{const o=r.map(l=>({...l,selected:s}));if(j(l=>({...l,[t]:o})),A(l=>({...l,[t]:o})),s){const l=[...T];r.forEach(a=>{l.findIndex(b=>b[p]===a[p])===-1&&l.push({...a,selected:!0})}),g(l)}else{const l=T.filter(a=>!r.some(u=>u[p]===a[p]));g(l)}},Je=(t,r,s)=>{const o=m[t][s],l=m[t].map((a,u)=>u===s?{...a,selected:!r}:a);j(a=>({...a,[t]:l})),A(a=>({...a,[t]:l})),g(r?a=>a.filter(u=>u[p]!==o[p]):a=>[...a,{...o,selected:!0}])},Qe=t=>{g(r=>r.filter(s=>s[p]!==t[p])),Object.keys(m).forEach(r=>{const s=m[r].map(o=>o[p]===t[p]?{...o,selected:!1}:o);j(o=>({...o,[r]:s})),A(o=>({...o,[r]:s}))})},We=()=>{const t=De(),r=Object.keys(t).sort();return r.length===0?i("div",{className:n(e["p-4"],e["text-center"],e["text-gray-500"]),children:[c(v,{nameIcon:"FaSearch",propsIcon:{size:24,color:"#ccc"}}),c("p",{className:n(e["mt-2"],e["text-sm"]),children:Te}),c("p",{className:n(e["text-xs"]),children:Fe}),B&&c("button",{type:"button",onClick:()=>{Y(""),O("")},className:n(e["mt-3"],e["text-xs"],e["px-3"],e["py-1"],e["bg-blue-500"],e["text-white"],e.rounded,e["hover:bg-blue-600"]),children:"Clear Search"})]}):r.map(s=>{const o=t[s]||[],l=m[s]||[],a=ce.has(s),u=l.filter(h=>h.selected).length,b=o.filter(h=>!h.selected),W=!!F[s],$=$e&&l.length>=Ee;return i("div",{className:n(e["border-b"],e["border-gray-200"],e["last:border-b-0"]),children:[Oe&&i("div",{className:n(e.flex,e["flex-col"],e["bg-gradient-to-r"],e["from-blue-50"],e["to-indigo-50"],e["border-b"],e["border-blue-200"]),children:[i("div",{className:n(e.flex,e["items-center"],e["justify-between"],e["p-3"],e["font-semibold"],e["text-sm"],e["text-gray-700"],G&&e["cursor-pointer"],e["hover:bg-blue-100"],e["transition-colors"]),onClick:()=>G&&He(s),children:[i("div",{className:n(e.flex,e["items-center"],e["gap-2"]),children:[G&&c(v,{nameIcon:a?"FaChevronRight":"FaChevronDown",propsIcon:{size:12,color:"#4F46E5"}}),c("span",{className:n(e["font-bold"],e["text-indigo-700"],e["text-base"]),children:ze(s,l.length)}),i("span",{className:n(e["text-xs"],e["bg-indigo-100"],e["text-indigo-800"],e["px-2"],e["py-1"],e["rounded-full"],e["font-medium"]),children:[u,"/",l.length]}),o.length!==l.length&&i("span",{className:n(e["text-xs"],e["bg-amber-100"],e["text-amber-800"],e["px-2"],e["py-1"],e["rounded-full"]),children:[o.length," shown"]})]}),je&&i("div",{className:n(e.flex,e["gap-1"]),children:[c("button",{type:"button",onClick:h=>{h.stopPropagation(),pe(s,l,!0)},className:n(e["text-xs"],e["px-2"],e["py-1"],e["bg-emerald-500"],e["text-white"],e.rounded,e["hover:bg-emerald-600"],e["transition-colors"],e["shadow-sm"],u===l.length&&e["opacity-50"],u===l.length&&e["cursor-not-allowed"]),title:`Select all in ${s}`,disabled:u===l.length,children:"All"}),c("button",{type:"button",onClick:h=>{h.stopPropagation(),pe(s,l,!1)},className:n(e["text-xs"],e["px-2"],e["py-1"],e["bg-slate-500"],e["text-white"],e.rounded,e["hover:bg-slate-600"],e["transition-colors"],e["shadow-sm"],u===0&&e["opacity-50"],u===0&&e["cursor-not-allowed"]),title:`Deselect all in ${s}`,disabled:u===0,children:"None"})]})]}),$&&!a&&c("div",{className:n(e["px-3"],e["pb-2"]),children:i("div",{className:n(e.relative),children:[c("input",{type:"text",placeholder:`Search in ${s}...`,value:F[s]||"",onChange:h=>Me(s,h.target.value),onClick:h=>h.stopPropagation(),className:n(e["w-full"],e["px-3"],e["py-1.5"],e["text-sm"],e.border,e["border-indigo-200"],e["rounded-md"],e["focus:outline-none"],e["focus:ring-2"],e["focus:ring-indigo-300"],e["focus:border-indigo-400"],e["bg-white"],e["placeholder-gray-400"])}),W&&c("button",{type:"button",onClick:h=>{h.stopPropagation(),Ke(s)},className:n(e.absolute,e["right-2"],e["top-1/2"],e["-translate-y-1/2"],e["text-gray-400"],e["hover:text-gray-600"]),children:c(v,{nameIcon:"FaTimes",propsIcon:{size:12,color:"currentColor"}})})]})})]}),(!G||!a)&&i("div",{className:n(e["max-h-60"],e["overflow-y-auto"]),children:[b.map((h,he)=>c("div",{className:n(e.flex,e["items-center"],e["gap-3"],e["p-3"],e["hover:bg-blue-50"],e["border-l-4"],e["border-transparent"],e["transition-colors"]),children:i("label",{className:n(e.flex,e["items-center"],e["cursor-pointer"],e["w-full"]),children:[c("input",{id:`${s}-${he}`,className:n(e["h-4"],e["w-4"],e["text-blue-600"],e["border-gray-300"],e.rounded,e["focus:ring-blue-500"],e["cursor-pointer"]),type:"checkbox",checked:!1,onChange:()=>{const Xe=m[s].findIndex(Ze=>Ze[p]===h[p]);Je(s,!1,Xe)}}),c("div",{className:n(e["ml-3"],e.flex,e["flex-col"]),children:x?x(h):c("span",{className:n(e["text-sm"],e["font-medium"],e["text-gray-700"]),children:le(h)})})]})},`${s}-${h[p]||he}`)),b.length===0&&o.length>0&&c("div",{className:n(e["p-3"],e["text-center"],e["text-gray-500"],e["text-sm"]),children:"All items in this group are selected"})]})]},s)})},y=()=>T?.length;return E(()=>{R&&R(C())},[m,R,C]),c(me,{children:i("div",{ref:ie,className:n(e["w-full"],e.relative,Ne),style:Se,children:[i("div",{className:n(e.flex,e["items-center"],e["leading-4"],e["p-2"],e["focus:outline-none"],e["focus:ring"],e["w-full"],e["shadow-sm"],e["sm:text-base"],e.border,e["rounded-md"],{[e["border-red"]]:q,[e["border-gray-300"]]:!q},e["bg-white"]),children:[c("input",{placeholder:Z,disabled:Ie,name:Ce,value:w?we?oe?.toUpperCase():oe:y()>0?typeof M=="function"?M(y()):M||`${y()} Items Selected`:Z,className:n(e["w-full"],e["focus:outline-none"],e["bg-transparent"]),onKeyUp:Ye,onChange:Be,onClick:()=>V(!0),onBlur:t=>te&&te(t)}),ve?c("div",{className:n(e["animate-spin"],e["w-4"],e["h-4"]),children:c(v,{nameIcon:"FaSpinner",propsIcon:{size:16,color:"#666"}})}):c(v,{nameIcon:w?"FaChevronUp":"FaChevronDown",propsIcon:{size:16,color:"#000000"}})]}),w&&i("div",{className:n(e["mt-1"],e.absolute,e["rounded-md"],e["bg-white"],e.border,e["border-gray-300"],e["shadow-lg"],e["z-50"],e["w-full"],e["max-h-96"],e["overflow-hidden"]),style:{zIndex:1e3},children:[c("div",{className:n(e["p-3"],e["border-b"],e["border-gray-200"],e["bg-gray-50"],e["text-sm"],e["font-medium"],e["text-gray-700"]),children:i("div",{className:n(e.flex,e["justify-between"],e["items-center"]),children:[i("span",{children:[Object.keys(m).length," ",k?.toUpperCase(),", ",Re," ",Le?.toUpperCase()]}),i("div",{className:"flex items-center gap-2",children:[i("span",{className:n(e["text-blue-600"]),children:[y()," Selected"]}),c("div",{className:n(e.flex,e["gap-2"]),children:c("button",{type:"button",className:n(e["text-xs"],e["px-3"],e["py-1"],e["bg-blue-600"],e["text-white"],e.rounded,e["hover:bg-blue-700"],e["transition-colors"]),onClick:()=>{const t=C();S(t);const r=J(m);I&&I(r),V(!1),O("")},children:"OK"})})]})]})}),i("div",{className:n(e["max-h-80"],e["overflow-y-auto"]),children:[Ae&&y()>0&&i("div",{className:n(e["border-b"],e["border-gray-200"]),children:[c("div",{className:n(e["p-3"],e["bg-blue-50"],e["border-b"],e["border-blue-200"],e["font-semibold"],e["text-sm"],e["text-blue-700"]),children:i("div",{className:n(e.flex,e["items-center"],e["gap-2"]),children:[c(v,{nameIcon:"FaCheck",propsIcon:{size:12,color:"#1976d2"}}),i("span",{children:["Selected Items (",y(),")"]})]})}),c("div",{className:n(e["max-h-48"],e["overflow-y-auto"]),children:T?.map((t,r)=>c("div",{className:n(e.flex,e["items-center"],e["gap-3"],e["p-3"],e["hover:bg-blue-50"],e["border-l-4"],e["border-blue-500"],e["bg-blue-25"],e["transition-colors"]),children:i("label",{className:n(e.flex,e["items-center"],e["cursor-pointer"],e["w-full"]),children:[c("input",{type:"checkbox",checked:!0,onChange:()=>Qe(t),className:n(e["h-4"],e["w-4"],e["text-blue-600"],e["border-gray-300"],e.rounded,e["focus:ring-blue-500"],e["cursor-pointer"])}),c("div",{className:n(e["ml-3"],e.flex,e["flex-col"]),children:x?x(t):i(me,{children:[c("span",{className:n(e["text-sm"],e["font-medium"],e["text-blue-700"]),children:le(t)}),c("span",{className:n(e["text-xs"],e["text-gray-500"]),children:t[k]||K})]})})]})},`selected-${t[p]||r}`))})]}),c("div",{children:We()})]})]},Ge)]})})};