react-restyle-components 0.4.39 → 0.4.40

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,334 @@
-"use strict";import{jsx as c,jsxs as i,Fragment as ee}from"react/jsx-runtime";import te,{useState as f,useEffect as j,useRef as se}from"react";import{Icon as I}from"../../Icon/Icon";import e from"../../../tc.module.css";import{cn as l}from"../../../utils";import{debounce as $e}from"@techabl/core-utils";export const AutoCompleteFilterGroupByMultipleSelectMultipleFieldsDisplay=({uniqueField:p="_id",groupByField:re,selectionConfig:le={},displayConfig:ne={},uiConfig:oe={},loader:ce=!1,placeholder:M="Search...",data:h,hasError:K=!1,disable:ae=!1,isUpperCase:de=!1,name:ie,groupByDetails:A,onFilter:E,onUpdate:T,onSelect:w,onBlur:V,className:pe,style:ue,filterDebounceDelay:B=300})=>{const{isSelectedStringArray:$=!1,maxSelection:ze,onSelectionChange:z}=le,{displayKeys:he,displaySeparator:me=" - ",fallbackKeys:fe=["name","code"],renderItem:b,renderGroupName:J}=ne,{showGroupHeaders:be=!0,collapsibleGroups:N=!1,showSelectAllButtons:xe=!0,showSelectedSection:ge=!0,selectedPlaceholder:_,emptyStateMessage:ye="No results found",emptyStateDescription:ve="Try adjusting your search terms"}=oe,C=re||A?.groupByName||"lab",D=A?.defaultGroupName||"Default",Ie=A?.totalItemName||"department",Y=t=>{if(b){const r=b(t);if(typeof r=="string")return r}return(he||h.displayKey||fe).map(r=>t[r]).filter(Boolean).join(me)||"Unnamed Item"},we=(t,s)=>J?J(t,s):t,[H,P]=f(""),[u,G]=f({}),[R,S]=f({}),[O,x]=f([]),[Q,Ne]=f(new Set),[y,U]=f(!1),[Ce,Ge]=f(0),v=te.useCallback(()=>Object.keys(R).reduce((t,s)=>{const r=(R[s]||[]).filter(n=>n.selected);return r.length>0&&(t[s]=r),t},{}),[R]),Se=t=>{j(()=>{function s(r){if(t.current&&!t.current.contains(r.target)&&y){const n=v();w&&w(n),U(!1),P("")}}return document.addEventListener("mousedown",s),()=>{document.removeEventListener("mousedown",s)}},[t,y,v,w])},W=se(u);j(()=>{const t=W.current;if(JSON.stringify(t)!==JSON.stringify(u)){const s=Array.isArray(u)?u.flat(Number.POSITIVE_INFINITY):Object.values(u).flat(Number.POSITIVE_INFINITY);T&&T(s),W.current=u}},[u,T]);const X=se(null);Se(X);const Z=(t,s)=>{const r={};let n=0;return Object.keys(t).forEach(o=>{const d=(t[o]||[]).map(m=>{n++;const L=s&&s.length>0?s.some(k=>$?k===m[p]:k[p]===m[p]):!1;return{...m,selected:L}});r[o]=d}),Ge(n),r};j(()=>{let t={};if(h.list&&Array.isArray(h.list)){const r=h.list.reduce((n,o)=>{const a=o?.[C]||D;return n[a]||(n[a]=[]),n[a].push(o),n},{});t=Z(r,h.selected||[])}else typeof h.list=="object"&&h.list!==null&&(t=Z(h.list,h.selected||[]));S(t),G(t);const s=[];Object.keys(t).forEach(r=>{const n=(t[r]||[]).filter(o=>o.selected);s.push(...n)}),x(Array.isArray(h?.selected)&&!$?h.selected:s)},[h,h.selected,$,p,C,D]);const F=te.useMemo(()=>$e(t=>{E&&E(t)},B),[E,B]),Oe=t=>{const s=t.target.value;P(s),F(s)},ke=t=>{if((t.which?t.which:t.keyCode)===8){const r=t.currentTarget.value;F(r)}},je=t=>{const s=new Set(Q);s.has(t)?s.delete(t):s.add(t),Ne(s)},q=(t,s,r)=>{const n=s.map(o=>({...o,selected:r}));if(G(o=>({...o,[t]:n})),S(o=>({...o,[t]:n})),r){const o=[...O];s.forEach(a=>{o.findIndex(m=>m[p]===a[p])===-1&&o.push({...a,selected:!0})}),x(o)}else{const o=O.filter(a=>!s.some(d=>d[p]===a[p]));x(o)}},Ae=(t,s,r)=>{const n=u[t][r],o=u[t].map((a,d)=>d===r?{...a,selected:!s}:a);G(a=>({...a,[t]:o})),S(a=>({...a,[t]:o})),x(s?a=>a.filter(d=>d[p]!==n[p]):a=>[...a,{...n,selected:!0}])},Ee=t=>{x(s=>s.filter(r=>r[p]!==t[p])),Object.keys(u).forEach(s=>{const r=u[s].map(n=>n[p]===t[p]?{...n,selected:!1}:n);G(n=>({...n,[s]:r})),S(n=>({...n,[s]:r}))})},Te=()=>{const t=Object.keys(u).sort();return t.length===0?i("div",{className:l(e["p-4"],e["text-center"],e["text-gray-500"]),children:[c(I,{nameIcon:"FaSearch",propsIcon:{size:24,color:"#ccc"}}),c("p",{className:l(e["mt-2"],e["text-sm"]),children:ye}),c("p",{className:l(e["text-xs"]),children:ve})]}):t.map(s=>{const r=u[s]||[],n=Q.has(s),o=r.filter(d=>d.selected).length,a=r.filter(d=>!d.selected);return i("div",{className:l(e["border-b"],e["border-gray-200"],e["last:border-b-0"]),children:[be&&i("div",{className:l(e.flex,e["items-center"],e["justify-between"],e["p-3"],e["bg-gray-50"],e["border-b"],e["border-gray-200"],e["font-semibold"],e["text-sm"],e["text-gray-700"],N&&e["cursor-pointer"],e["hover:bg-gray-100"]),onClick:()=>N&&je(s),children:[i("div",{className:l(e.flex,e["items-center"],e["gap-2"]),children:[N&&c(I,{nameIcon:n?"FaChevronRight":"FaChevronDown",propsIcon:{size:12,color:"#666"}}),c("span",{className:l(e["font-bold"],e["text-blue-700"]),children:we(s,r.length)}),i("span",{className:l(e["text-xs"],e["bg-blue-100"],e["text-blue-800"],e["px-2"],e["py-1"],e["rounded-full"]),children:[o,"/",r.length]})]}),xe&&i("div",{className:l(e.flex,e["gap-1"]),children:[c("button",{type:"button",onClick:d=>{d.stopPropagation(),q(s,r,!0)},className:l(e["text-xs"],e["px-2"],e["py-1"],e["bg-green-500"],e["text-white"],e.rounded,e["hover:bg-green-600"],e["transition-colors"],o===r.length&&e["opacity-50"],o===r.length&&e["cursor-not-allowed"]),title:`Select all in ${s}`,disabled:o===r.length,children:"All"}),c("button",{type:"button",onClick:d=>{d.stopPropagation(),q(s,r,!1)},className:l(e["text-xs"],e["px-2"],e["py-1"],e["bg-gray-500"],e["text-white"],e.rounded,e["hover:bg-gray-600"],e["transition-colors"],o===0&&e["opacity-50"],o===0&&e["cursor-not-allowed"]),title:`Deselect all in ${s}`,disabled:o===0,children:"None"})]})]}),(!N||!n)&&i("div",{className:l(e["max-h-60"],e["overflow-y-auto"]),children:[a.map((d,m)=>c("div",{className:l(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:l(e.flex,e["items-center"],e["cursor-pointer"],e["w-full"]),children:[c("input",{id:`${s}-${m}`,className:l(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 L=u[s].findIndex(k=>k[p]===d[p]);Ae(s,!1,L)}}),c("div",{className:l(e["ml-3"],e.flex,e["flex-col"]),children:b?b(d):c("span",{className:l(e["text-sm"],e["font-medium"],e["text-gray-700"]),children:Y(d)})})]})},`${s}-${d[p]||m}`)),a.length===0&&r.length>0&&c("div",{className:l(e["p-3"],e["text-center"],e["text-gray-500"],e["text-sm"]),children:"All items in this group are selected"})]})]},s)})},g=()=>O?.length;return j(()=>{z&&z(v())},[u,z,v]),c(ee,{children:i("div",{ref:X,className:l(e["w-full"],e.relative,pe),style:ue,children:[i("div",{className:l(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"]]:K,[e["border-gray-300"]]:!K},e["bg-white"]),children:[c("input",{placeholder:M,disabled:ae,name:ie,value:y?de?H?.toUpperCase():H:g()>0?typeof _=="function"?_(g()):_||`${g()} Items Selected`:M,className:l(e["w-full"],e["focus:outline-none"],e["bg-transparent"]),onKeyUp:ke,onChange:Oe,onClick:()=>U(!0),onBlur:t=>V&&V(t)}),ce?c("div",{className:l(e["animate-spin"],e["w-4"],e["h-4"]),children:c(I,{nameIcon:"FaSpinner",propsIcon:{size:16,color:"#666"}})}):c(I,{nameIcon:y?"FaChevronUp":"FaChevronDown",propsIcon:{size:16,color:"#000000"}})]}),y&&i("div",{className:l(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:l(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:l(e.flex,e["justify-between"],e["items-center"]),children:[i("span",{children:[Object.keys(u).length," ",C?.toUpperCase(),", ",Ce," ",Ie?.toUpperCase()]}),i("div",{className:"flex items-center gap-2",children:[i("span",{className:l(e["text-blue-600"]),children:[g()," Selected"]}),c("div",{className:l(e.flex,e["gap-2"]),children:c("button",{type:"button",className:l(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=v();w(t),U(!1),P("")},children:"OK"})})]})]})}),i("div",{className:l(e["max-h-80"],e["overflow-y-auto"]),children:[ge&&g()>0&&i("div",{className:l(e["border-b"],e["border-gray-200"]),children:[c("div",{className:l(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:l(e.flex,e["items-center"],e["gap-2"]),children:[c(I,{nameIcon:"FaCheck",propsIcon:{size:12,color:"#1976d2"}}),i("span",{children:["Selected Items (",g(),")"]})]})}),c("div",{className:l(e["max-h-48"],e["overflow-y-auto"]),children:O?.map((t,s)=>c("div",{className:l(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:l(e.flex,e["items-center"],e["cursor-pointer"],e["w-full"]),children:[c("input",{type:"checkbox",checked:!0,onChange:()=>Ee(t),className:l(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:l(e["ml-3"],e.flex,e["flex-col"]),children:b?b(t):i(ee,{children:[c("span",{className:l(e["text-sm"],e["font-medium"],e["text-blue-700"]),children:Y(t)}),c("span",{className:l(e["text-xs"],e["text-gray-500"]),children:t[C]||D})]})})]})},`selected-${t[p]||s}`))})]}),c("div",{children:Te()})]})]})]})})};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable  */
+import React, { useState, useEffect, useRef } 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, }) => {
+    // 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;
+    // 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);
+    // 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);
+                    setIsListOpen(false);
+                    setValue('');
+                }
+            }
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => {
+                document.removeEventListener('mousedown', handleClickOutside);
+            };
+        }, [ref, isListOpen, getSelectedGroups, onSelect]);
+    };
+    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]);
+    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;
+    };
+    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,
+        data.selected,
+        isSelectedStringArray,
+        uniqueField,
+        groupField,
+        defaultGroupName,
+    ]);
+    const debouncedFilter = React.useMemo(() => debounce((search) => {
+        onFilter && onFilter(search);
+    }, filterDebounceDelay), [onFilter, filterDebounceDelay]);
+    const onChange = (e) => {
+        const search = e.target.value;
+        setValue(search);
+        debouncedFilter(search);
+    };
+    const onKeyUp = (e) => {
+        const charCode = e.which ? e.which : e.keyCode;
+        if (charCode === 8) {
+            const search = e.currentTarget.value;
+            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 = () => {
+        const groupNames = Object.keys(groupedOptions).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 })] }));
+        }
+        return groupNames.map((groupName) => {
+            const groupItems = groupedOptions[groupName] || [];
+            const isCollapsed = collapsedGroups.has(groupName);
+            const selectedInGroup = groupItems.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 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);
+                                                        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() })] })] }))] }) }));
+};

package/lib/src/core-components/src/components/AutoComplete/auto-complete-filter-multi-select-multi-fields-display-drag-drop/auto-complete-filter-multi-select-multi-fields-display-drag-drop.component.js

@@ -1 +1,229 @@
-"use strict";import{jsx as n,jsxs as b,Fragment as he}from"react/jsx-runtime";import Se,{useState as _,useEffect as P,useRef as q}from"react";import{Icon as V}from"../../Icon/Icon";import{LoadingAnimateSpin as xe}from"../../Loader/loader.component";import{DndContext as ve,closestCenter as Ie,useSensor as we,useSensors as be,PointerSensor as _e}from"@dnd-kit/core";import{arrayMove as ye,SortableContext as Ne,useSortable as De,horizontalListSortingStrategy as $e}from"@dnd-kit/sortable";import{CSS as ke}from"@dnd-kit/utilities";import e from"../../../tc.module.css";import{cn as l}from"../../../utils";export const DraggableSelectedItem=({item:r,index:c,onRemove:y,displayKey:N,uniqueField:i="sort",displayConfig:h={},className:O,style:L})=>{const{attributes:D,listeners:S,setNodeRef:d,transform:T,transition:E,isDragging:R}=De({id:r[i]||r.sort||c.toString()}),x={transform:ke.Transform.toString(T),transition:E,opacity:R?.5:1,...L},$=()=>{const v=h.displayKeys||N||["name","code"],z=h.displaySeparator||" - ";return v.map(A=>r[A]).filter(Boolean).join(z)||"Unnamed Item"},j=v=>{v.stopPropagation(),y(c)};return h.renderSelectedBadge?n("div",{ref:d,style:x,...D,...S,children:h.renderSelectedBadge(r,c,()=>y(c))}):b("div",{ref:d,style:x,...D,...S,className:l(e.flex,e["text-white"],e["gap-1"],e["bg-blue-500"],e["p-1"],e.rounded,e["cursor-move"],O),children:[n("div",{className:l(e.flex,e["w-fit"],e["cursor-pointer"],e["items-center"]),onClick:j,children:n(V,{nameIcon:"BsTrashFill",propsIcon:{size:16,color:"white"}})}),n("span",{children:$()})]})},AutoCompleteFilterMultiSelectMultiFieldsDisplayDragDrop=({componentKey:r,uniqueField:c="_id",loader:y=!1,placeholder:N="Search...",data:i,hasError:h=!1,disable:O=!1,isUpperCase:L=!1,name:D,defaultValue:S="",displayConfig:d={},dragDropConfig:T={},selectionConfig:E={},uiConfig:R={},onFilter:x,onUpdate:$,onSelect:j,onBlur:v,className:z,style:A,filterDebounceDelay:H=300})=>{const{enabled:W=!0,strategy:K=$e,onDragEnd:F,animationDuration:Ce=200}=T,{maxSelection:k,onSelectionChange:f}=E,{showSelectedSection:ee=!0,selectedPlaceholder:B,emptyStateMessage:te="No items available",maxHeight:se="calc(100vh - 20vh)",zIndex:re=80}=R,ne=t=>{if(d.renderItem){const a=d.renderItem(t);if(typeof a=="string")return a}const s=d.displayKeys||i.displayKey||d.fallbackKeys||["name","code"],o=d.displaySeparator||" - ";return s.map(a=>t[a]).filter(Boolean).join(o)||"Unnamed Item"},[G,M]=_(""),[U,oe]=_([]),[Oe,le]=_([]),[w,J]=_(!1),u=q(i?.selected||[]),[p,C]=_(i?.selected||[]),ce=be(we(_e));P(()=>{S&&M(S)},[S]);const ae=t=>{P(()=>{function s(o){t.current&&!t.current.contains(o.target)&&w&&($(u.current),J(!1),M(""))}return document.addEventListener("mousedown",s),()=>{document.removeEventListener("mousedown",s)}},[t,w,$])},Q=q(null);ae(Q);const X=(t,s)=>s.map(o=>{const a=t&&t.length>0?t.some(m=>m[c]===o[c]):!1;return{...o,selected:a}});P(()=>{const t=i?.selected||[],s=i?.list||[];le(X(t,s)),oe(X(t,s));const o=t.map((a,m)=>({...a,sort:m.toString()}));u.current=o,C(o),f&&f(o)},[i,i?.selected,c,f]);const Y=Se.useMemo(()=>{if(!x)return()=>{};let t;return s=>{clearTimeout(t),t=setTimeout(()=>{x(s)},H)}},[x,H]),ie=t=>{const s=t.target.value;M(s),Y(s)},de=t=>{if((t.which?t.which:t.keyCode)===8){const o=t.currentTarget.value;Y(o)}},ue=t=>{if(!W)return;const{active:s,over:o}=t;if(!o||s.id===o.id)return;const a=u.current.findIndex(g=>g.sort===s.id||g[c]===s.id),m=u.current.findIndex(g=>g.sort===o.id||g[c]===o.id);if(a!==-1&&m!==-1){const I=ye(u.current,a,m).map((pe,ge)=>({...pe,sort:ge.toString()}));u.current=I,C([...I]),F&&F(I),f&&f(I)}},Z=t=>{const s=u.current?.slice(0,t)||[],o=u.current?.slice(t+1)||[],m=[...s,...o].map((g,I)=>({...g,sort:I.toString()}));u.current=m,C([...m]),f&&f(m)},me=t=>{k&&p.length>=k&&!t.selected||(j(t),setTimeout(()=>{const s=(i?.selected||[]).map((o,a)=>({...o,sort:a.toString()}));u.current=s,C(s),f&&f(s)},0))},fe=()=>{const t=p.length;return typeof B=="function"?B(t):B||`${t} Items`};return n(he,{children:b("div",{ref:Q,className:l(e["w-full"],e.relative,z),style:A,children:[b("div",{className:l(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"]]:h,[e["border-gray-300"]]:!h}),children:[n("input",{placeholder:N,disabled:O,name:D,value:w?L?G?.toUpperCase():G:p.length>0?fe():N,className:l(e["w-full"],e["focus:outline-none"],e["bg-none"]),onKeyUp:de,onChange:ie,onClick:()=>J(!0),onBlur:t=>v&&v(t),id:r?`${r}_input_text`:void 0},r?`${r}_input`:void 0),y&&n(xe,{}),w?n(V,{nameIcon:"FaChevronUp",propsIcon:{size:16}}):n(V,{nameIcon:"FaChevronDown",propsIcon:{size:16}})]}),U&&w&&b("div",{className:l(e.flex,e["flex-col"],e.absolute,e["rounded-sm"],e["z-500"],e["w-full"]),style:{zIndex:re},children:[ee&&p.length>0&&n("div",{className:l(e.flex,e["w-full"],e["bg-gray-400"]),children:W?n(ve,{sensors:ce,collisionDetection:Ie,onDragEnd:ue,children:n(Ne,{items:p.map((t,s)=>t.sort||t[c]||s.toString()),strategy:K,children:n("div",{className:l(e.flex,e["flex-wrap"],e["gap-1"],e["bg-gray-400"],e["p-1"]),children:p.map((t,s)=>n(DraggableSelectedItem,{item:t,index:s,onRemove:Z,displayKey:i.displayKey,uniqueField:"sort",displayConfig:d},t.sort||t[c]||s))})})}):n("div",{className:l(e.flex,e["flex-wrap"],e["gap-1"],e["bg-gray-400"],e["p-1"]),children:p.map((t,s)=>n(DraggableSelectedItem,{item:t,index:s,onRemove:Z,displayKey:i.displayKey,uniqueField:c,displayConfig:d},t[c]||s))})}),U.length>0?n("ul",{className:l(e.flex,e["flex-col"],e["gap-1"],e["bg-gray-200"],e["p-2"],e["overflow-y-scroll"],e["w-full"]),id:r?`${r}_listView`:void 0,style:{maxHeight:se},children:U.map((t,s)=>n("li",{className:l(e.flex,e["gap-4"],e["p-1"]),children:b("label",{className:l(e.flex,e["items-center"]),children:[n("input",{className:l(e.flex,e["h-4"],e["w-4"]),type:"checkbox",checked:t.selected||!1,onChange:()=>me(t),disabled:k?p.length>=k&&!t.selected:!1,id:r?`${r}_${s}_check_box_view`:void 0},r?`${r}_${s}_check_box_view`:void 0),n("span",{className:l(e.flex,e["ml-2"]),children:d.renderItem?d.renderItem(t):ne(t)})]})},`${r||"item"}_${s}_list`))},r?`${r}_listView`:void 0):n("div",{className:l(e["p-4"],e["text-center"],e["text-gray-500"]),children:n("p",{className:l(e["text-sm"]),children:te})})]},r?`${r}_list_wrapper_view`:void 0)]},r?`${r}_wrapperView`:void 0)})};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable  */
+import React, { useState, useEffect, useRef } from 'react';
+import { Icon } from '../../Icon/Icon';
+import { LoadingAnimateSpin } from '../../Loader/loader.component';
+import { DndContext, closestCenter, useSensor, useSensors, PointerSensor, } from '@dnd-kit/core';
+import { arrayMove, SortableContext, useSortable, horizontalListSortingStrategy, } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import s from '../../../tc.module.css';
+import { cn } from '../../../utils';
+export const DraggableSelectedItem = ({ item, index, onRemove, displayKey, uniqueField = 'sort', displayConfig = {}, className, style: customStyle, }) => {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: item[uniqueField] || item.sort || index.toString() });
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+        opacity: isDragging ? 0.5 : 1,
+        ...customStyle,
+    };
+    const getItemDisplayText = () => {
+        const keys = displayConfig.displayKeys || displayKey || ['name', 'code'];
+        const separator = displayConfig.displaySeparator || ' - ';
+        return (keys
+            .map((key) => item[key])
+            .filter(Boolean)
+            .join(separator) || 'Unnamed Item');
+    };
+    const handleRemove = (e) => {
+        e.stopPropagation();
+        onRemove(index);
+    };
+    if (displayConfig.renderSelectedBadge) {
+        return (_jsx("div", { ref: setNodeRef, style: style, ...attributes, ...listeners, children: displayConfig.renderSelectedBadge(item, index, () => onRemove(index)) }));
+    }
+    return (_jsxs("div", { ref: setNodeRef, style: style, ...attributes, ...listeners, className: cn(s['flex'], s['text-white'], s['gap-1'], s['bg-blue-500'], s['p-1'], s['rounded'], s['cursor-move'], className), children: [_jsx("div", { className: cn(s['flex'], s['w-fit'], s['cursor-pointer'], s['items-center']), onClick: handleRemove, children: _jsx(Icon, { nameIcon: "BsTrashFill", propsIcon: { size: 16, color: 'white' } }) }), _jsx("span", { children: getItemDisplayText() })] }));
+};
+export const AutoCompleteFilterMultiSelectMultiFieldsDisplayDragDrop = ({ componentKey, uniqueField = '_id', loader = false, placeholder = 'Search...', data, hasError = false, disable = false, isUpperCase = false, name, defaultValue = '', displayConfig = {}, dragDropConfig = {}, selectionConfig = {}, uiConfig = {}, onFilter, onUpdate, onSelect, onBlur, className, style, filterDebounceDelay = 300, }) => {
+    // Merge configs with defaults
+    const { enabled: dragDropEnabled = true, strategy = horizontalListSortingStrategy, onDragEnd: customOnDragEnd, animationDuration = 200, } = dragDropConfig;
+    const { maxSelection, onSelectionChange } = selectionConfig;
+    const { showSelectedSection = true, selectedPlaceholder, emptyStateMessage = 'No items available', maxHeight = 'calc(100vh - 20vh)', zIndex = 80, } = uiConfig;
+    // Helper to get display text for item
+    const getItemDisplayText = (item) => {
+        if (displayConfig.renderItem) {
+            const rendered = displayConfig.renderItem(item);
+            if (typeof rendered === 'string')
+                return rendered;
+        }
+        const keys = displayConfig.displayKeys ||
+            data.displayKey ||
+            displayConfig.fallbackKeys || ['name', 'code'];
+        const separator = displayConfig.displaySeparator || ' - ';
+        return (keys
+            .map((key) => item[key])
+            .filter(Boolean)
+            .join(separator) || 'Unnamed Item');
+    };
+    const [value, setValue] = useState('');
+    const [options, setOptions] = useState([]);
+    const [originalOptions, setOriginalOptions] = useState([]);
+    const [isListOpen, setIsListOpen] = useState(false);
+    const refSelectedItems = useRef(data?.selected || []);
+    const [selectedItems, setSelectedItems] = useState(data?.selected || []);
+    const sensors = useSensors(useSensor(PointerSensor));
+    useEffect(() => {
+        if (defaultValue)
+            setValue(defaultValue);
+    }, [defaultValue]);
+    const useOutsideAlerter = (ref) => {
+        useEffect(() => {
+            function handleClickOutside(event) {
+                if (ref.current &&
+                    !ref.current.contains(event.target) &&
+                    isListOpen) {
+                    onUpdate(refSelectedItems.current);
+                    setIsListOpen(false);
+                    setValue('');
+                }
+            }
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => {
+                document.removeEventListener('mousedown', handleClickOutside);
+            };
+        }, [ref, isListOpen, onUpdate]);
+    };
+    const wrapperRef = useRef(null);
+    useOutsideAlerter(wrapperRef);
+    const getSelectedItem = (selectedItem, list) => {
+        return list.map((item) => {
+            const isSelected = selectedItem && selectedItem.length > 0
+                ? selectedItem.some((sItem) => sItem[uniqueField] === item[uniqueField])
+                : false;
+            return {
+                ...item,
+                selected: isSelected,
+            };
+        });
+    };
+    useEffect(() => {
+        const selected = data?.selected || [];
+        const list = data?.list || [];
+        setOriginalOptions(getSelectedItem(selected, list));
+        setOptions(getSelectedItem(selected, list));
+        // Update both ref and state with sort field for drag-drop
+        const itemsWithSort = selected.map((sItem, index) => ({
+            ...sItem,
+            sort: index.toString(),
+        }));
+        refSelectedItems.current = itemsWithSort;
+        setSelectedItems(itemsWithSort);
+        // Call selection change callback
+        if (onSelectionChange) {
+            onSelectionChange(itemsWithSort);
+        }
+    }, [data, data?.selected, uniqueField, onSelectionChange]);
+    const debouncedFilter = React.useMemo(() => {
+        if (!onFilter)
+            return () => { };
+        let timeout;
+        return (search) => {
+            clearTimeout(timeout);
+            timeout = setTimeout(() => {
+                onFilter(search);
+            }, filterDebounceDelay);
+        };
+    }, [onFilter, filterDebounceDelay]);
+    const onChange = (e) => {
+        const search = e.target.value;
+        setValue(search);
+        debouncedFilter(search);
+    };
+    const onKeyUp = (e) => {
+        const charCode = e.which ? e.which : e.keyCode;
+        if (charCode === 8) {
+            const search = e.currentTarget.value;
+            debouncedFilter(search);
+        }
+    };
+    const onDragEnd = (event) => {
+        if (!dragDropEnabled)
+            return;
+        const { active, over } = event;
+        if (!over || active.id === over.id)
+            return;
+        const oldIndex = refSelectedItems.current.findIndex((item) => item.sort === active.id || item[uniqueField] === active.id);
+        const newIndex = refSelectedItems.current.findIndex((item) => item.sort === over.id || item[uniqueField] === over.id);
+        if (oldIndex !== -1 && newIndex !== -1) {
+            const reorderedItems = arrayMove(refSelectedItems.current, oldIndex, newIndex);
+            // Update sort values to maintain proper order
+            const updatedItems = reorderedItems.map((item, index) => ({
+                ...item,
+                sort: index.toString(),
+            }));
+            // Update both ref and state to trigger re-render
+            refSelectedItems.current = updatedItems;
+            setSelectedItems([...updatedItems]);
+            // Call custom onDragEnd callback
+            if (customOnDragEnd) {
+                customOnDragEnd(updatedItems);
+            }
+            // Call selection change callback
+            if (onSelectionChange) {
+                onSelectionChange(updatedItems);
+            }
+        }
+    };
+    const handleRemoveItem = (index) => {
+        const firstArr = refSelectedItems.current?.slice(0, index) || [];
+        const secondArr = refSelectedItems.current?.slice(index + 1) || [];
+        const fieldsList = [...firstArr, ...secondArr];
+        // Update sort values after removal
+        const updatedItems = fieldsList.map((item, idx) => ({
+            ...item,
+            sort: idx.toString(),
+        }));
+        refSelectedItems.current = updatedItems;
+        setSelectedItems([...updatedItems]);
+        // Call selection change callback
+        if (onSelectionChange) {
+            onSelectionChange(updatedItems);
+        }
+    };
+    const handleSelectItem = (item) => {
+        // Check max selection limit
+        if (maxSelection &&
+            selectedItems.length >= maxSelection &&
+            !item.selected) {
+            return;
+        }
+        onSelect(item);
+        // Update selected items after selection change
+        setTimeout(() => {
+            const updatedItems = (data?.selected || []).map((sItem, index) => ({
+                ...sItem,
+                sort: index.toString(),
+            }));
+            refSelectedItems.current = updatedItems;
+            setSelectedItems(updatedItems);
+            if (onSelectionChange) {
+                onSelectionChange(updatedItems);
+            }
+        }, 0);
+    };
+    const getSelectedPlaceholder = () => {
+        const count = selectedItems.length;
+        if (typeof selectedPlaceholder === 'function') {
+            return selectedPlaceholder(count);
+        }
+        return selectedPlaceholder || `${count} Items`;
+    };
+    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,
+                    }), children: [_jsx("input", { placeholder: placeholder, disabled: disable, name: name, value: !isListOpen
+                                ? selectedItems.length > 0
+                                    ? getSelectedPlaceholder()
+                                    : placeholder
+                                : isUpperCase
+                                    ? value?.toUpperCase()
+                                    : value, className: cn(s['w-full'], s['focus:outline-none'], s['bg-none']), onKeyUp: onKeyUp, onChange: onChange, onClick: () => setIsListOpen(true), onBlur: (e) => onBlur && onBlur(e), id: componentKey ? `${componentKey}_input_text` : undefined }, componentKey ? `${componentKey}_input` : undefined), loader && _jsx(LoadingAnimateSpin, {}), isListOpen ? (_jsx(Icon, { nameIcon: "FaChevronUp", propsIcon: { size: 16 } })) : (_jsx(Icon, { nameIcon: "FaChevronDown", propsIcon: { size: 16 } }))] }), options && isListOpen && (_jsxs("div", { className: cn(s['flex'], s['flex-col'], s['absolute'], s['rounded-sm'], s['z-500'], s['w-full']), style: { zIndex }, children: [showSelectedSection && selectedItems.length > 0 && (_jsx("div", { className: cn(s['flex'], s['w-full'], s['bg-gray-400']), children: dragDropEnabled ? (_jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: onDragEnd, children: _jsx(SortableContext, { items: selectedItems.map((item, idx) => item.sort || item[uniqueField] || idx.toString()), strategy: strategy, children: _jsx("div", { className: cn(s['flex'], s['flex-wrap'], s['gap-1'], s['bg-gray-400'], s['p-1']), children: selectedItems.map((item, index) => (_jsx(DraggableSelectedItem, { item: item, index: index, onRemove: handleRemoveItem, displayKey: data.displayKey, uniqueField: "sort", displayConfig: displayConfig }, item.sort || item[uniqueField] || index))) }) }) })) : (_jsx("div", { className: cn(s['flex'], s['flex-wrap'], s['gap-1'], s['bg-gray-400'], s['p-1']), children: selectedItems.map((item, index) => (_jsx(DraggableSelectedItem, { item: item, index: index, onRemove: handleRemoveItem, displayKey: data.displayKey, uniqueField: uniqueField, displayConfig: displayConfig }, item[uniqueField] || index))) })) })), options.length > 0 ? (_jsx("ul", { className: cn(s['flex'], s['flex-col'], s['gap-1'], s['bg-gray-200'], s['p-2'], s['overflow-y-scroll'], s['w-full']), id: componentKey ? `${componentKey}_listView` : undefined, style: { maxHeight }, children: options.map((item, index) => (_jsx("li", { className: cn(s['flex'], s['gap-4'], s['p-1']), children: _jsxs("label", { className: cn(s['flex'], s['items-center']), children: [_jsx("input", { className: cn(s['flex'], s['h-4'], s['w-4']), type: "checkbox", checked: item.selected || false, onChange: () => handleSelectItem(item), disabled: maxSelection
+                                                ? selectedItems.length >= maxSelection &&
+                                                    !item.selected
+                                                : false, id: componentKey
+                                                ? `${componentKey}_${index}_check_box_view`
+                                                : undefined }, componentKey
+                                            ? `${componentKey}_${index}_check_box_view`
+                                            : undefined), _jsx("span", { className: cn(s['flex'], s['ml-2']), children: displayConfig.renderItem
+                                                ? displayConfig.renderItem(item)
+                                                : getItemDisplayText(item) })] }) }, `${componentKey || 'item'}_${index}_list`))) }, componentKey ? `${componentKey}_listView` : undefined)) : (_jsx("div", { className: cn(s['p-4'], s['text-center'], s['text-gray-500']), children: _jsx("p", { className: cn(s['text-sm']), children: emptyStateMessage }) }))] }, componentKey ? `${componentKey}_list_wrapper_view` : undefined))] }, componentKey ? `${componentKey}_wrapperView` : undefined) }));
+};