react-restyle-components 0.4.47 → 0.4.48

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

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

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

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