react-restyle-components 0.4.39 → 0.4.40

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

package/lib/src/core-components/src/components/AutoComplete/auto-complete-filter-single-select/auto-complete-filter-single-select.component.js

@@ -1 +1,55 @@
-"use strict";import{jsx as n,jsxs as x,Fragment as j}from"react/jsx-runtime";import{useState as f,useEffect as h,useRef as k}from"react";import{Icon as y}from"../../Icon/Icon";import{debounce as K}from"@techabl/core-utils";import e from"../../../tc.module.css";import{cn as i}from"../../../utils";export const AutoCompleteFilterSingleSelect=({disable:I=!1,loader:R=!1,displayValue:d="",placeholder:C="Search...",data:s,hasError:g=!1,classNames:t={},styles:o={},onFilter:L,onSelect:F})=>{const[b,a]=f(d),[u,w]=f(),[c,p]=f(!1),O=r=>{h(()=>{function l(m){r.current&&!r.current.contains(m.target)&&c&&(p(!1),a(""))}return document.addEventListener("mousedown",l),()=>{document.removeEventListener("mousedown",l)}},[r,c])},v=k(null);O(v),h(()=>{w(s.list)},[s]),h(()=>{a(d)},[d]);const S=r=>{const l=r.target.value;a(l);const m=s.list.filter(z=>z[s.displayKey].toLowerCase().includes(l.toLowerCase()));w(m),K(()=>{L(l)})};return n(j,{children:x("div",{ref:v,className:i(e["w-full"],e.relative,t.container),style:o.container,children:[x("div",{className:i(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"]]:g,[e["border-gray-300"]]:!g},t.inputWrapper),style:o.inputWrapper,children:[n("input",{placeholder:C,value:b,className:i(e["w-full"],e["focus:outline-none"],e["bg-none"],t.input),style:o.input,onChange:S,onClick:()=>p(!0),disabled:I}),n("span",{className:t.icon,style:o.icon,children:c?n(y,{nameIcon:"FaChevronUp",propsIcon:{size:16}}):n(y,{nameIcon:"FaChevronDown",propsIcon:{size:16}})})]}),u&&c?u.length>0?n("div",{className:i(e["mt-1"],e.absolute,e["bg-gray-100"],e["p-2"],e["rounded-sm"],e["z-50"],t.dropdown),style:{zIndex:80,width:"100%",...o.dropdown},children:n("ul",{className:t.list,style:o.list,children:u?.map((r,l)=>n("li",{className:i(e["text-gray-400"],e.flex,e["items-center"],t.listItem),style:o.listItem,onClick:()=>{a(r[s.displayKey]),p(!1),F(r)},children:n("label",{className:i(e["ml-2"],e["mt-1"],e["text-black"],t.itemLabel),style:o.itemLabel,children:r[s.displayKey]})},l))})}):n("div",{className:i(e["mt-1"],e.absolute,e["bg-gray-100"],e["p-2"],e["rounded-sm"],t.emptyState),style:{zIndex:80,width:"100%",...o.emptyState},children:n("span",{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 { debounce } from '@techabl/core-utils';
+import s from '../../../tc.module.css';
+import { cn } from '../../../utils';
+export const AutoCompleteFilterSingleSelect = ({ disable = false, loader = false, displayValue = '', placeholder = 'Search...', data, hasError = false, classNames = {}, styles = {}, onFilter, onSelect, }) => {
+    const [value, setValue] = useState(displayValue);
+    const [options, setOptions] = useState();
+    const [isListOpen, setIsListOpen] = useState(false);
+    const useOutsideAlerter = (ref) => {
+        useEffect(() => {
+            function handleClickOutside(event) {
+                if (ref.current && !ref.current.contains(event.target) && isListOpen) {
+                    setIsListOpen(false);
+                    setValue('');
+                }
+            }
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => {
+                document.removeEventListener('mousedown', handleClickOutside);
+            };
+        }, [ref, isListOpen]);
+    };
+    const wrapperRef = useRef(null);
+    useOutsideAlerter(wrapperRef);
+    useEffect(() => {
+        setOptions(data.list);
+    }, [data]);
+    useEffect(() => {
+        setValue(displayValue);
+    }, [displayValue]);
+    const handleInputChange = (e) => {
+        const search = e.target.value;
+        setValue(search);
+        const filteredOptions = data.list.filter((item) => item[data.displayKey].toLowerCase().includes(search.toLowerCase()));
+        setOptions(filteredOptions);
+        debounce(() => {
+            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, value: !isListOpen ? value : value, className: cn(s['w-full'], s['focus:outline-none'], s['bg-none'], classNames.input), style: styles.input, onChange: handleInputChange, onClick: () => setIsListOpen(true), disabled: disable }), _jsx("span", { className: classNames.icon, style: styles.icon, children: isListOpen ? (_jsx(Icon, { nameIcon: "FaChevronUp", propsIcon: {
+                                    size: 16,
+                                } })) : (_jsx(Icon, { nameIcon: "FaChevronDown", propsIcon: {
+                                    size: 16,
+                                } })) })] }), options && isListOpen ? (options.length > 0 ? (_jsx("div", { className: cn(s['mt-1'], s['absolute'], s['bg-gray-100'], s['p-2'], s['rounded-sm'], s['z-50'], classNames.dropdown), style: { zIndex: 80, width: '100%', ...styles.dropdown }, children: _jsx("ul", { className: classNames.list, style: styles.list, children: options?.map((item, index) => (_jsx("li", { className: cn(s['text-gray-400'], s['flex'], s['items-center'], classNames.listItem), style: styles.listItem, onClick: () => {
+                                setValue(item[data.displayKey]);
+                                setIsListOpen(false);
+                                onSelect(item);
+                            }, children: _jsx("label", { className: cn(s['ml-2'], s['mt-1'], s['text-black'], classNames.itemLabel), style: styles.itemLabel, children: item[data.displayKey] }) }, index))) }) })) : (_jsx("div", { className: cn(s['mt-1'], s['absolute'], s['bg-gray-100'], s['p-2'], s['rounded-sm'], classNames.emptyState), style: { zIndex: 80, width: '100%', ...styles.emptyState }, children: _jsx("span", { children: "Not Found Result!!" }) }))) : null] }) }));
+};