react-restyle-components 0.4.46 → 0.4.47

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)})};

package/lib/src/core-components/src/components/AutoComplete/auto-complete-filter-multi-select-selected-top-display/auto-complete-filter-multi-select-selected-top-display.component.js

@@ -1,174 +1 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/* eslint-disable  */
-import { useState, useEffect, useRef } from 'react';
-import { Icon } from '../../Icon/Icon';
-import { debounce } from '@techabl/core-utils';
-import s from '../../../tc.module.css';
-import { cn } from '../../../utils';
-export const AutoCompleteFilterMultiSelectSelectedTopDisplay = ({ uniqueField = '_id', loader = false, placeholder = 'Search...', data, hasError = false, disable = false, isUpperCase = false, name, showSelectAllSection = true, onFilter, onUpdate, onSelect, onBlur, dynamicCheck = 'panelCode', }) => {
-    const [value, setValue] = useState('');
-    const [options, setOptions] = useState([]);
-    const [originalOptions, setOriginalOptions] = useState([]);
-    const [isListOpen, setIsListOpen] = useState(false);
-    const useOutsideAlerter = (ref) => {
-        useEffect(() => {
-            function handleClickOutside(event) {
-                if (ref.current && !ref.current.contains(event.target) && isListOpen) {
-                    if (originalOptions && options) {
-                        if (isListOpen) {
-                            const newSelectedItems = options.filter((item) => item.selected);
-                            // Merge: combine new selected with existing selected that are not in current options
-                            const existingSelected = data.selected || [];
-                            const mergedMap = new Map();
-                            // Add new selected items from options
-                            newSelectedItems.forEach((item) => {
-                                mergedMap.set(item[uniqueField], item);
-                            });
-                            // Add existing selected items that are NOT in the current options list
-                            // (these are filtered out items that should remain selected)
-                            existingSelected.forEach((item) => {
-                                const existsInOptions = options.some((opt) => opt[uniqueField] === item[uniqueField]);
-                                // Only keep if this item is not in the current options
-                                // (if it's in options, user already decided whether to select/unselect it)
-                                if (!existsInOptions) {
-                                    mergedMap.set(item[uniqueField], item);
-                                }
-                            });
-                            const finalSelectedItems = Array.from(mergedMap.values());
-                            onUpdate && onUpdate(finalSelectedItems);
-                        }
-                    }
-                    setIsListOpen(false);
-                    setValue('');
-                }
-            }
-            document.addEventListener('mousedown', handleClickOutside);
-            return () => {
-                document.removeEventListener('mousedown', handleClickOutside);
-            };
-        }, [ref, isListOpen]);
-    };
-    const wrapperRef = useRef(null);
-    useOutsideAlerter(wrapperRef);
-    let count = 0;
-    const getSelectedItem = (selectedItem, list) => {
-        if (count === 0) {
-            const finalList = list?.filter((item, index) => {
-                item.selected = false;
-                selectedItem && selectedItem.length > 0
-                    ? selectedItem?.find((sItem, index) => {
-                        if (sItem[uniqueField] === item[uniqueField]) {
-                            item.selected = true;
-                        }
-                    })
-                    : (item.selected = false);
-                count++;
-                return item;
-            });
-            list = finalList;
-        }
-        return list;
-    };
-    useEffect(() => {
-        setOriginalOptions(getSelectedItem(data.selected, data.list));
-        setOptions(getSelectedItem(data.selected, data.list));
-    }, [data, data.selected]);
-    const onChange = (e) => {
-        const search = e.target.value;
-        setValue(search);
-        debounce(() => {
-            onFilter && onFilter(search);
-        });
-    };
-    const onKeyUp = (e) => {
-        const charCode = e.which ? e.which : e.keyCode;
-        if (charCode === 8) {
-            const search = e.target.value;
-            debounce(() => {
-                onFilter && onFilter(search);
-            });
-        }
-    };
-    // Handle select all functionality
-    const handleSelect = (selectAll) => {
-        const updatedItems = options.map((item) => ({
-            ...item,
-            selected: selectAll,
-        }));
-        setOptions(updatedItems);
-        onSelect(updatedItems);
-    };
-    // Fix the getAvailableItemsCount function
-    const getAvailableItemsCount = () => {
-        if (!options)
-            return 0;
-        const availableCount = options?.filter((item) => {
-            const isSelected = data.selected?.some((selectedItem) => selectedItem[dynamicCheck] === item[dynamicCheck]);
-            return !isSelected;
-        }).length;
-        return availableCount;
-    };
-    // Get selected items count
-    const getSelectedCount = () => {
-        return data.selected?.length || 0;
-    };
-    // Get total items count
-    const getTotalItemsCount = () => {
-        return options?.length || 0;
-    };
-    return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, className: cn(s['w-full'], s['relative']), 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()} Items Selected`
-                                : 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: ["Total Items: ", getTotalItemsCount()] }), _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 newSelectedItems = options.filter((item) => item.selected);
-                                                        // Merge: combine new selected with existing selected that are not in current options
-                                                        const existingSelected = data.selected || [];
-                                                        const mergedMap = new Map();
-                                                        // Add new selected items from options
-                                                        newSelectedItems.forEach((item) => {
-                                                            mergedMap.set(item[uniqueField], item);
-                                                        });
-                                                        // Add existing selected items that are NOT in the current options list
-                                                        // (these are filtered out items that should remain selected)
-                                                        existingSelected.forEach((item) => {
-                                                            const existsInOptions = options.some((opt) => opt[uniqueField] === item[uniqueField]);
-                                                            // Only keep if this item is not in the current options
-                                                            // (if it's in options, user already decided whether to select/unselect it)
-                                                            if (!existsInOptions) {
-                                                                mergedMap.set(item[uniqueField], item);
-                                                            }
-                                                        });
-                                                        const finalSelectedItems = Array.from(mergedMap.values());
-                                                        onUpdate && onUpdate(finalSelectedItems);
-                                                        setIsListOpen(false);
-                                                        setValue('');
-                                                    }, children: "OK" }) })] })] }) }), showSelectAllSection && (_jsxs("div", { className: cn(s['p-3'], s['border-b'], s['border-gray-200'], s['bg-gray-50'], s['flex'], s['justify-between'], s['items-center']), children: [_jsx("span", { className: cn(s['text-sm'], s['font-medium'], s['text-gray-700']), children: "Quick Actions" }), _jsxs("div", { className: cn(s['flex'], s['gap-2']), children: [_jsx("button", { type: "button", onClick: () => handleSelect(true), className: cn(s['text-xs'], s['px-3'], s['py-1'], s['bg-green-500'], s['text-white'], s['rounded'], s['hover:bg-green-600'], s['transition-colors'], getAvailableItemsCount() === 0 && s['opacity-50'], getAvailableItemsCount() === 0 && s['cursor-not-allowed']), disabled: getAvailableItemsCount() === 0, title: "Select all available items", children: "Select All" }), _jsx("button", { type: "button", onClick: () => handleSelect(false), className: cn(s['text-xs'], s['px-3'], s['py-1'], s['bg-gray-500'], s['text-white'], s['rounded'], s['hover:bg-gray-600'], s['transition-colors'], getSelectedCount() === 0 && s['opacity-50'], getSelectedCount() === 0 && s['cursor-not-allowed']), disabled: getSelectedCount() === 0, title: "Deselect all selected items", children: "Clear All" })] })] })), _jsxs("div", { className: cn(s['max-h-80'], s['overflow-y-auto']), children: [data.selected && data.selected.length > 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 (", data.selected.length, ")"] })] }) }), _jsx("div", { className: cn(s['max-h-48'], s['overflow-y-auto']), children: data?.selected?.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: () => onSelect([{ ...item, selected: !item.selected }]), 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: _jsx("span", { className: cn(s['text-sm'], s['font-medium'], s['text-blue-700']), children: data.displayKey
-                                                                    ?.map((key) => item[key])
-                                                                    .filter(Boolean)
-                                                                    .join(' - ') || 'Unnamed Item' }) })] }) }, `selected-${index}`))) })] })), options && options.length > 0 && (_jsx("div", { children: _jsx("div", { className: cn(s['max-h-60'], s['overflow-y-auto']), children: options
-                                            ?.filter((item) => {
-                                            // Check if this item is NOT in the selected items
-                                            const isSelected = data.selected?.some((selectedItem) => selectedItem[uniqueField] === item[uniqueField]);
-                                            return !isSelected;
-                                        })
-                                            ?.map((item, index) => (_jsx("div", { className: cn(s['flex'], s['items-center'], s['gap-3'], s['p-3'], s['hover:bg-gray-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", { type: "checkbox", checked: item.selected || false, onChange: () => onSelect([{ ...item, selected: !item.selected }]), 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: _jsx("span", { className: cn(s['text-sm'], s['font-medium'], s['text-gray-700']), children: data.displayKey
-                                                                ?.map((key) => item[key])
-                                                                .filter(Boolean)
-                                                                .join(' - ') || 'Unnamed Item' }) })] }) }, `available-${index}`))) }) })), (!options || options.length === 0) && (_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: "No items found" }), _jsx("p", { className: cn(s['text-xs']), children: "Try adjusting your search terms" })] }))] })] }))] }) }));
-};
+"use strict";import{jsx as l,jsxs as o,Fragment as X}from"react/jsx-runtime";import{useState as v,useEffect as M,useRef as Y}from"react";import{Icon as y}from"../../Icon/Icon";import{debounce as T}from"@techabl/core-utils";import e from"../../../tc.module.css";import{cn as t}from"../../../utils";export const AutoCompleteFilterMultiSelectSelectedTopDisplay=({uniqueField:i="_id",loader:_=!1,placeholder:D="Search...",data:n,hasError:S=!1,disable:U=!1,isUpperCase:$=!1,name:B,showSelectAllSection:R=!0,onFilter:b,onUpdate:g,onSelect:N,onBlur:O,dynamicCheck:k="panelCode"})=>{const[j,w]=v(""),[a,A]=v([]),[Q,V]=v([]),[p,I]=v(!1),G=s=>{M(()=>{function r(c){if(s.current&&!s.current.contains(c.target)&&p){if(Q&&a&&p){const d=a.filter(h=>h.selected),m=n.selected||[],u=new Map;d.forEach(h=>{u.set(h[i],h)}),m.forEach(h=>{a.some(W=>W[i]===h[i])||u.set(h[i],h)});const x=Array.from(u.values());g&&g(x)}I(!1),w("")}}return document.addEventListener("mousedown",r),()=>{document.removeEventListener("mousedown",r)}},[s,p])},z=Y(null);G(z);let E=0;const L=(s,r)=>(E===0&&(r=r?.filter((d,m)=>(d.selected=!1,s&&s.length>0?s?.find((u,x)=>{u[i]===d[i]&&(d.selected=!0)}):d.selected=!1,E++,d))),r);M(()=>{V(L(n.selected,n.list)),A(L(n.selected,n.list))},[n,n.selected]);const H=s=>{const r=s.target.value;w(r),T(()=>{b&&b(r)})},J=s=>{if((s.which?s.which:s.keyCode)===8){const c=s.target.value;T(()=>{b&&b(c)})}},K=s=>{const r=a.map(c=>({...c,selected:s}));A(r),N(r)},C=()=>a?a?.filter(r=>!n.selected?.some(d=>d[k]===r[k])).length:0,f=()=>n.selected?.length||0,P=()=>a?.length||0;return l(X,{children:o("div",{ref:z,className:t(e["w-full"],e.relative),children:[o("div",{className:t(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"]]:S,[e["border-gray-300"]]:!S},e["bg-white"]),children:[l("input",{placeholder:D,disabled:U,name:B,value:p?$?j?.toUpperCase():j:`${f()} Items Selected`,className:t(e["w-full"],e["focus:outline-none"],e["bg-transparent"]),onKeyUp:J,onChange:H,onClick:()=>I(!0),onBlur:s=>O&&O(s)}),_?l("div",{className:t(e["animate-spin"],e["w-4"],e["h-4"]),children:l(y,{nameIcon:"FaSpinner",propsIcon:{size:16,color:"#666"}})}):l(y,{nameIcon:p?"FaChevronUp":"FaChevronDown",propsIcon:{size:16,color:"#000000"}})]}),p&&o("div",{className:t(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:[l("div",{className:t(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:o("div",{className:t(e.flex,e["justify-between"],e["items-center"]),children:[o("span",{children:["Total Items: ",P()]}),o("div",{className:"flex items-center gap-2",children:[o("span",{className:t(e["text-blue-600"]),children:[f()," Selected"]}),l("div",{className:t(e.flex,e["gap-2"]),children:l("button",{type:"button",className:t(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 s=a.filter(m=>m.selected),r=n.selected||[],c=new Map;s.forEach(m=>{c.set(m[i],m)}),r.forEach(m=>{a.some(x=>x[i]===m[i])||c.set(m[i],m)});const d=Array.from(c.values());g&&g(d),I(!1),w("")},children:"OK"})})]})]})}),R&&o("div",{className:t(e["p-3"],e["border-b"],e["border-gray-200"],e["bg-gray-50"],e.flex,e["justify-between"],e["items-center"]),children:[l("span",{className:t(e["text-sm"],e["font-medium"],e["text-gray-700"]),children:"Quick Actions"}),o("div",{className:t(e.flex,e["gap-2"]),children:[l("button",{type:"button",onClick:()=>K(!0),className:t(e["text-xs"],e["px-3"],e["py-1"],e["bg-green-500"],e["text-white"],e.rounded,e["hover:bg-green-600"],e["transition-colors"],C()===0&&e["opacity-50"],C()===0&&e["cursor-not-allowed"]),disabled:C()===0,title:"Select all available items",children:"Select All"}),l("button",{type:"button",onClick:()=>K(!1),className:t(e["text-xs"],e["px-3"],e["py-1"],e["bg-gray-500"],e["text-white"],e.rounded,e["hover:bg-gray-600"],e["transition-colors"],f()===0&&e["opacity-50"],f()===0&&e["cursor-not-allowed"]),disabled:f()===0,title:"Deselect all selected items",children:"Clear All"})]})]}),o("div",{className:t(e["max-h-80"],e["overflow-y-auto"]),children:[n.selected&&n.selected.length>0&&o("div",{className:t(e["border-b"],e["border-gray-200"]),children:[l("div",{className:t(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:o("div",{className:t(e.flex,e["items-center"],e["gap-2"]),children:[l(y,{nameIcon:"FaCheck",propsIcon:{size:12,color:"#1976d2"}}),o("span",{children:["Selected Items (",n.selected.length,")"]})]})}),l("div",{className:t(e["max-h-48"],e["overflow-y-auto"]),children:n?.selected?.map((s,r)=>l("div",{className:t(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:o("label",{className:t(e.flex,e["items-center"],e["cursor-pointer"],e["w-full"]),children:[l("input",{type:"checkbox",checked:!0,onChange:()=>N([{...s,selected:!s.selected}]),className:t(e["h-4"],e["w-4"],e["text-blue-600"],e["border-gray-300"],e.rounded,e["focus:ring-blue-500"],e["cursor-pointer"])}),l("div",{className:t(e["ml-3"],e.flex,e["flex-col"]),children:l("span",{className:t(e["text-sm"],e["font-medium"],e["text-blue-700"]),children:n.displayKey?.map(c=>s[c]).filter(Boolean).join(" - ")||"Unnamed Item"})})]})},`selected-${r}`))})]}),a&&a.length>0&&l("div",{children:l("div",{className:t(e["max-h-60"],e["overflow-y-auto"]),children:a?.filter(s=>!n.selected?.some(c=>c[i]===s[i]))?.map((s,r)=>l("div",{className:t(e.flex,e["items-center"],e["gap-3"],e["p-3"],e["hover:bg-gray-50"],e["border-l-4"],e["border-transparent"],e["transition-colors"]),children:o("label",{className:t(e.flex,e["items-center"],e["cursor-pointer"],e["w-full"]),children:[l("input",{type:"checkbox",checked:s.selected||!1,onChange:()=>N([{...s,selected:!s.selected}]),className:t(e["h-4"],e["w-4"],e["text-blue-600"],e["border-gray-300"],e.rounded,e["focus:ring-blue-500"],e["cursor-pointer"])}),l("div",{className:t(e["ml-3"],e.flex,e["flex-col"]),children:l("span",{className:t(e["text-sm"],e["font-medium"],e["text-gray-700"]),children:n.displayKey?.map(c=>s[c]).filter(Boolean).join(" - ")||"Unnamed Item"})})]})},`available-${r}`))})}),(!a||a.length===0)&&o("div",{className:t(e["p-4"],e["text-center"],e["text-gray-500"]),children:[l(y,{nameIcon:"FaSearch",propsIcon:{size:24,color:"#ccc"}}),l("p",{className:t(e["mt-2"],e["text-sm"]),children:"No items found"}),l("p",{className:t(e["text-xs"]),children:"Try adjusting your search terms"})]})]})]})]})})};

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

@@ -1,129 +1,2 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/* eslint-disable  */
-import { 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 AutoCompleteFilterMultipleSelectMultipleFieldsDisplay = ({ uniqueField = '_id', isSelectedStringArray = false, loader = false, placeholder = 'Search...', data, hasError = false, disable = false, isUpperCase = false, name, classNames = {}, styles = {}, maxHeight = '250px', onFilter, onUpdate, onSelect, onBlur, }) => {
-    const [value, setValue] = useState('');
-    const [options, setOptions] = useState();
-    const [originalOptions, setOriginalOptions] = useState();
-    const [isListOpen, setIsListOpen] = useState(false);
-    const useOutsideAlerter = (ref) => {
-        useEffect(() => {
-            function handleClickOutside(event) {
-                if (ref.current && !ref.current.contains(event.target) && isListOpen) {
-                    if (originalOptions && options) {
-                        if (isListOpen) {
-                            const newSelectedItems = options.filter((item) => item.selected);
-                            // Merge: combine new selected with existing selected that are not in current options
-                            const existingSelected = data.selected || [];
-                            const mergedMap = new Map();
-                            // Add new selected items from options
-                            newSelectedItems.forEach((item) => {
-                                mergedMap.set(item[uniqueField], item);
-                            });
-                            // Add existing selected items that are NOT in the current options list
-                            // (these are filtered out items that should remain selected)
-                            existingSelected.forEach((item) => {
-                                const key = isSelectedStringArray ? item : item[uniqueField];
-                                const existsInOptions = options.some((opt) => {
-                                    if (isSelectedStringArray) {
-                                        return opt[uniqueField] === item;
-                                    }
-                                    return opt[uniqueField] === item[uniqueField];
-                                });
-                                // Only keep if this item is not in the current options
-                                // (if it's in options, user already decided whether to select/unselect it)
-                                if (!existsInOptions) {
-                                    mergedMap.set(key, item);
-                                }
-                            });
-                            const finalSelectedItems = Array.from(mergedMap.values());
-                            onUpdate && onUpdate(finalSelectedItems);
-                        }
-                    }
-                    setIsListOpen(false);
-                    setValue('');
-                }
-            }
-            document.addEventListener('mousedown', handleClickOutside);
-            return () => {
-                document.removeEventListener('mousedown', handleClickOutside);
-            };
-        }, [ref, isListOpen]);
-    };
-    const wrapperRef = useRef(null);
-    useOutsideAlerter(wrapperRef);
-    let count = 0;
-    const getSelectedItem = (selectedItem, list) => {
-        if (count === 0) {
-            const finalList = list?.filter((item, index) => {
-                item.selected = false;
-                selectedItem && selectedItem.length > 0
-                    ? selectedItem.find((sItem, index) => {
-                        if (isSelectedStringArray) {
-                            if (sItem === item[uniqueField]) {
-                                item.selected = true;
-                            }
-                        }
-                        else {
-                            if (sItem[uniqueField] === item[uniqueField]) {
-                                item.selected = true;
-                            }
-                        }
-                    })
-                    : (item.selected = false);
-                count++;
-                return item;
-            });
-            list = finalList;
-        }
-        return list;
-    };
-    useEffect(() => {
-        setOriginalOptions(getSelectedItem(data.selected, data.list));
-        setOptions(getSelectedItem(data.selected, data.list));
-    }, [data, data.selected]);
-    const onChange = (e) => {
-        const search = e.target.value;
-        setValue(search);
-        debounce(() => {
-            onFilter && onFilter(search);
-        });
-    };
-    const onKeyUp = (e) => {
-        const charCode = e.which ? e.which : e.keyCode;
-        if (charCode === 8) {
-            const search = e.target.value;
-            debounce(() => {
-                onFilter && onFilter(search);
-            });
-        }
-    };
-    return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, className: cn(s['w-full'], s['relative'], classNames.container), style: styles.container, 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,
-                    }, classNames.inputWrapper), style: styles.inputWrapper, children: [_jsx("input", { placeholder: placeholder, disabled: disable, name: name, value: !isListOpen
-                                ? data?.selected?.length > 0
-                                    ? `${(data.selected && data.selected.length) || 0} Items`
-                                    : value
-                                : isUpperCase
-                                    ? value?.toUpperCase()
-                                    : value, className: cn(s['w-full'], s['focus:outline-none'], s['bg-none'], classNames.input), style: styles.input, onKeyUp: onKeyUp, onChange: onChange, onClick: () => setIsListOpen(true), onBlur: (e) => onBlur && onBlur(e) }), _jsx("span", { className: classNames?.iconWrapper, style: styles?.iconWrapper, children: isListOpen ? (_jsx(Icon, { nameIcon: "FaChevronUp", propsIcon: {
-                                    size: styles?.iconSize || 16,
-                                    color: styles?.iconColor || '#000000',
-                                } })) : (_jsx(Icon, { nameIcon: "FaChevronDown", propsIcon: {
-                                    size: styles?.iconSize || 16,
-                                    color: styles?.iconColor || '#000000',
-                                } })) })] }), options && isListOpen ? (options?.length > 0 ? (_jsx("div", { className: cn(s['flex'], s['mt-1'], s['absolute'], s['rounded-sm'], s['bg-gray-200'], s['z-500'], s['p-2'], s['w-full'], classNames.dropdown), style: {
-                        zIndex: 80,
-                        maxHeight,
-                        overflowY: 'auto',
-                        ...styles.dropdown,
-                    }, children: _jsx("ul", { className: classNames.list, style: styles.list, children: options?.map((item, index) => (_jsx("li", { className: cn(s['flex'], s['gap-2'], s['p-1'], classNames.listItem), style: styles.listItem, children: _jsxs("label", { className: cn(s['flex'], s['items-center'], classNames.label), style: styles.label, children: [_jsx("input", { id: index?.toString(), className: cn(s['flex'], s['h-4'], s['w-4'], classNames.checkbox), style: styles.checkbox, type: "checkbox", checked: item.selected, onChange: () => onSelect(item) }), ' ', _jsx("span", { className: cn(s['flex'], s['ml-2'], classNames.itemText), style: styles.itemText, children: data.displayKey
-                                            .map((key) => `${item[key]}
-                              `)
-                                            .join(' - ') })] }) }, index))) }) })) : (_jsx("div", { className: cn(s['mt-1'], s['absolute'], s['bg-gray-200'], s['p-2'], s['rounded-sm'], classNames.emptyState), style: { zIndex: 80, width: '100%', ...styles.emptyState }, children: _jsx("span", { className: classNames.emptyStateText, style: styles.emptyStateText, children: "Not Found Result!!" }) }))) : null] }) }));
-};
+"use strict";import{jsx as r,jsxs as b,Fragment as J}from"react/jsx-runtime";import{useState as x,useEffect as M,useRef as P}from"react";import{Icon as T}from"../../Icon/Icon";import e from"../../../tc.module.css";import{cn as a}from"../../../utils";import{debounce as W}from"@techabl/core-utils";export const AutoCompleteFilterMultipleSelectMultipleFieldsDisplay=({uniqueField:p="_id",isSelectedStringArray:g=!1,loader:Q=!1,placeholder:_="Search...",data:c,hasError:v=!1,disable:K=!1,isUpperCase:R=!1,name:U,classNames:l={},styles:t={},maxHeight:D="250px",onFilter:m,onUpdate:C,onSelect:N,onBlur:I})=>{const[w,y]=x(""),[d,$]=x(),[A,V]=x(),[f,O]=x(!1),Y=n=>{M(()=>{function o(u){if(n.current&&!n.current.contains(u.target)&&f){if(A&&d&&f){const i=d.filter(s=>s.selected),L=c.selected||[],h=new Map;i.forEach(s=>{h.set(s[p],s)}),L.forEach(s=>{const H=g?s:s[p];d.some(E=>g?E[p]===s:E[p]===s[p])||h.set(H,s)});const j=Array.from(h.values());C&&C(j)}O(!1),y("")}}return document.addEventListener("mousedown",o),()=>{document.removeEventListener("mousedown",o)}},[n,f])},S=P(null);Y(S);let k=0;const z=(n,o)=>(k===0&&(o=o?.filter((i,L)=>(i.selected=!1,n&&n.length>0?n.find((h,j)=>{g?h===i[p]&&(i.selected=!0):h[p]===i[p]&&(i.selected=!0)}):i.selected=!1,k++,i))),o);M(()=>{V(z(c.selected,c.list)),$(z(c.selected,c.list))},[c,c.selected]);const B=n=>{const o=n.target.value;y(o),W(()=>{m&&m(o)})},G=n=>{if((n.which?n.which:n.keyCode)===8){const u=n.target.value;W(()=>{m&&m(u)})}};return r(J,{children:b("div",{ref:S,className:a(e["w-full"],e.relative,l.container),style:t.container,children:[b("div",{className:a(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"]]:v,[e["border-gray-300"]]:!v},l.inputWrapper),style:t.inputWrapper,children:[r("input",{placeholder:_,disabled:K,name:U,value:f?R?w?.toUpperCase():w:c?.selected?.length>0?`${c.selected&&c.selected.length||0} Items`:w,className:a(e["w-full"],e["focus:outline-none"],e["bg-none"],l.input),style:t.input,onKeyUp:G,onChange:B,onClick:()=>O(!0),onBlur:n=>I&&I(n)}),r("span",{className:l?.iconWrapper,style:t?.iconWrapper,children:f?r(T,{nameIcon:"FaChevronUp",propsIcon:{size:t?.iconSize||16,color:t?.iconColor||"#000000"}}):r(T,{nameIcon:"FaChevronDown",propsIcon:{size:t?.iconSize||16,color:t?.iconColor||"#000000"}})})]}),d&&f?d?.length>0?r("div",{className:a(e.flex,e["mt-1"],e.absolute,e["rounded-sm"],e["bg-gray-200"],e["z-500"],e["p-2"],e["w-full"],l.dropdown),style:{zIndex:80,maxHeight:D,overflowY:"auto",...t.dropdown},children:r("ul",{className:l.list,style:t.list,children:d?.map((n,o)=>r("li",{className:a(e.flex,e["gap-2"],e["p-1"],l.listItem),style:t.listItem,children:b("label",{className:a(e.flex,e["items-center"],l.label),style:t.label,children:[r("input",{id:o?.toString(),className:a(e.flex,e["h-4"],e["w-4"],l.checkbox),style:t.checkbox,type:"checkbox",checked:n.selected,onChange:()=>N(n)})," ",r("span",{className:a(e.flex,e["ml-2"],l.itemText),style:t.itemText,children:c.displayKey.map(u=>`${n[u]}
+                              `).join(" - ")})]})},o))})}):r("div",{className:a(e["mt-1"],e.absolute,e["bg-gray-200"],e["p-2"],e["rounded-sm"],l.emptyState),style:{zIndex:80,width:"100%",...t.emptyState},children:r("span",{className:l.emptyStateText,style:t.emptyStateText,children:"Not Found Result!!"})}):null]})})};