react-restyle-components 0.4.37 → 0.4.39

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,334 +1 @@
-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() })] })] }))] }) }));
-};
+"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()})]})]})]})})};

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,229 +1 @@
-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) }));
-};
+"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)})};