react-restyle-components 0.4.47 → 0.4.48

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 +1,466 @@
-"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)]})})};
+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, onClearAll, 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,
+            }));
+        });
+    };
+    // Clear all selected items and notify consumer if provided
+    const handleClearAll = () => {
+        const clearedGroupedOptions = {};
+        Object.keys(groupedOptions).forEach((groupKey) => {
+            const clearedItems = (groupedOptions[groupKey] || []).map((item) => ({
+                ...item,
+                selected: false,
+            }));
+            clearedGroupedOptions[groupKey] = clearedItems;
+        });
+        setGroupedOptions(clearedGroupedOptions);
+        setOriginalGroupedOptions(clearedGroupedOptions);
+        setSelectedItems([]);
+        onClearAll?.();
+    };
+    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"] }), _jsxs("div", { className: cn(s['flex'], s['gap-2'], s['items-center']), children: [_jsx("button", { type: "button", className: cn(s['text-xs'], s['px-3'], s['py-1'], s['bg-gray-200'], s['text-gray-700'], s['rounded'], s['hover:bg-gray-300'], s['transition-colors'], s['disabled:opacity-50'], s['disabled:cursor-not-allowed']), disabled: getSelectedCount() === 0, onClick: handleClearAll, children: "Clear All" }), _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))] }) }));
+};