react-restyle-components 0.3.66 → 0.3.68

package/lib/src/core-components/src/components/AutoComplete/auto-complete-filter-group-by-multiple-select-multiple-fields-display/auto-complete-filter-group-by-multiple-select-multiple-fields-display.component.d.ts

@@ -1,23 +1,111 @@
+import React from 'react';
+/** Item data structure */
+export interface AutoCompleteItem {
+    [key: string]: any;
+    selected?: boolean;
+}
+/** Grouped data structure */
+export interface GroupedData {
+    [groupKey: string]: AutoCompleteItem[];
+}
+/** Component data prop structure */
+export interface AutoCompleteData {
+    /** List of items (array) or grouped items (object) */
+    list: AutoCompleteItem[] | GroupedData;
+    /** Selected items */
+    selected?: AutoCompleteItem[] | string[];
+    /** Display keys for rendering item text */
+    displayKey?: string[];
+}
+/** Group by configuration */
+export interface GroupByDetails {
+    /** Field name to group by */
+    groupByName: string;
+    /** Field name for total items label */
+    totalItemName: string;
+    /** Default group name if item doesn't have group field */
+    defaultGroupName?: string;
+}
+/** Display configuration */
+export interface DisplayConfig {
+    /** Keys to use for displaying item text (joined with separator) */
+    displayKeys?: string[];
+    /** Separator for joining display keys */
+    displaySeparator?: string;
+    /** Fallback keys if displayKeys not provided */
+    fallbackKeys?: string[];
+    /** Custom render function for item display */
+    renderItem?: (item: AutoCompleteItem) => React.ReactNode;
+    /** Custom render function for group name */
+    renderGroupName?: (groupName: string, count: number) => React.ReactNode;
+}
+/** Selection configuration */
+export interface SelectionConfig {
+    /** Whether selected items are string arrays (IDs only) */
+    isSelectedStringArray?: boolean;
+    /** Callback when selection changes */
+    onSelectionChange?: (selectedItems: GroupedData) => void;
+    /** Maximum number of items that can be selected */
+    maxSelection?: number;
+}
+/** UI Configuration */
+export interface UIConfig {
+    /** Show group headers */
+    showGroupHeaders?: boolean;
+    /** Enable collapsible groups */
+    collapsibleGroups?: boolean;
+    /** Show "Select All" buttons in group headers */
+    showSelectAllButtons?: boolean;
+    /** Show selected items section */
+    showSelectedSection?: boolean;
+    /** Custom placeholder text when items are selected */
+    selectedPlaceholder?: string | ((count: number) => string);
+    /** Empty state message */
+    emptyStateMessage?: string;
+    /** Empty state description */
+    emptyStateDescription?: string;
+}
 export interface AutoCompleteFilterGroupByMultipleSelectMultipleFieldsDisplayProps {
+    /** Unique identifier field name for items */
     uniqueField?: string;
-    isSelectedStringArray?: boolean;
+    /** Field name to group items by */
+    groupByField?: string;
+    /** Selection configuration */
+    selectionConfig?: SelectionConfig;
+    /** Display configuration */
+    displayConfig?: DisplayConfig;
+    /** UI configuration */
+    uiConfig?: UIConfig;
+    /** Loading state */
     loader?: boolean;
+    /** Input placeholder */
     placeholder?: string;
-    data: any;
+    /** Component data */
+    data: AutoCompleteData;
+    /** Error state */
     hasError?: boolean;
+    /** Disabled state */
     disable?: boolean;
+    /** Convert input to uppercase */
     isUpperCase?: boolean;
+    /** Input name attribute */
     name?: string;
-    showGroupHeaders?: boolean;
-    collapsibleGroups?: boolean;
-    groupByDetails?: {
-        groupByName: string;
-        totalItemName: string;
-    };
+    /** Group by details (legacy, use groupByField instead) */
+    groupByDetails?: GroupByDetails;
+    /** Filter callback */
     onFilter?: (value: string) => void;
-    onUpdate?: (item: any) => void;
-    onSelect: (item: any) => any;
-    onBlur?: (e: any) => void;
+    /** Update callback (fires on every selection change) */
+    onUpdate?: (items: AutoCompleteItem[]) => void;
+    /** Select callback (fires when OK is clicked or dropdown closes) */
+    onSelect: (selectedGroups: GroupedData) => void;
+    /** Blur callback */
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    /** Additional className */
+    className?: string;
+    /** Custom styles */
+    style?: React.CSSProperties;
+    /** Debounce delay for filter (ms) */
+    filterDebounceDelay?: number;
 }
-export declare const AutoCompleteFilterGroupByMultipleSelectMultipleFieldsDisplay: ({ uniqueField, isSelectedStringArray, loader, placeholder, data, hasError, disable, isUpperCase, name, showGroupHeaders, collapsibleGroups, groupByDetails, onFilter, onUpdate, onSelect, onBlur, }: AutoCompleteFilterGroupByMultipleSelectMultipleFieldsDisplayProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AutoCompleteFilterGroupByMultipleSelectMultipleFieldsDisplay: ({ uniqueField, groupByField, selectionConfig, displayConfig, uiConfig, loader, placeholder, data, hasError, disable, isUpperCase, name, groupByDetails, onFilter, onUpdate, onSelect, onBlur, className, style, filterDebounceDelay, }: AutoCompleteFilterGroupByMultipleSelectMultipleFieldsDisplayProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=auto-complete-filter-group-by-multiple-select-multiple-fields-display.component.d.ts.map

package/lib/src/core-components/src/components/AutoComplete/auto-complete-filter-group-by-multiple-select-multiple-fields-display/auto-complete-filter-group-by-multiple-select-multiple-fields-display.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auto-complete-filter-group-by-multiple-select-multiple-fields-display.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/AutoComplete/auto-complete-filter-group-by-multiple-select-multiple-fields-display/auto-complete-filter-group-by-multiple-select-multiple-fields-display.component.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,iEAAiE;IAChF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,GAAG,CAAC;IACV,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,cAAc,CAAC,EAAE;QAAC,WAAW,EAAE,MAAM,CAAC;QAAC,aAAa,EAAE,MAAM,CAAA;KAAC,CAAC;IAC9D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;IAC7B,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,4DAA4D,wMAiBtE,iEAAiE,4CAuvBnE,CAAC"}
+{"version":3,"file":"auto-complete-filter-group-by-multiple-select-multiple-fields-display.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/AutoComplete/auto-complete-filter-group-by-multiple-select-multiple-fields-display/auto-complete-filter-group-by-multiple-select-multiple-fields-display.component.tsx"],"names":[],"mappings":"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"}

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

@@ -1,11 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /* eslint-disable  */
-import { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Icon } from '../../';
 import s from '../../../tc.module.css';
 import { cn } from '../../../utils';
 import { debounce } from '@techabl/core-utils';
-export const AutoCompleteFilterGroupByMultipleSelectMultipleFieldsDisplay = ({ uniqueField = '_id', isSelectedStringArray = false, loader = false, placeholder = 'Search...', data, hasError = false, disable = false, isUpperCase = false, name, showGroupHeaders = true, collapsibleGroups = false, groupByDetails = { groupByName: 'lab', totalItemName: 'department' }, onFilter, onUpdate, onSelect, onBlur, }) => {
+export const AutoCompleteFilterGroupByMultipleSelectMultipleFieldsDisplay = ({ uniqueField = '_id', groupByField, selectionConfig = {}, displayConfig = {}, uiConfig = {}, loader = false, placeholder = 'Search...', data, hasError = false, disable = false, isUpperCase = false, name, groupByDetails, onFilter, onUpdate, onSelect, onBlur, className, style, filterDebounceDelay = 300, }) => {
+    // Merge configs with defaults
+    const { isSelectedStringArray = false, maxSelection, onSelectionChange, } = selectionConfig;
+    const { displayKeys, displaySeparator = ' - ', fallbackKeys = ['name', 'code'], renderItem, renderGroupName, } = displayConfig;
+    const { showGroupHeaders = true, collapsibleGroups = false, showSelectAllButtons = true, showSelectedSection = true, selectedPlaceholder, emptyStateMessage = 'No results found', emptyStateDescription = 'Try adjusting your search terms', } = uiConfig;
+    // Get groupByField from props or legacy groupByDetails
+    const groupField = groupByField || groupByDetails?.groupByName || 'lab';
+    const defaultGroupName = groupByDetails?.defaultGroupName || 'Default';
+    const totalItemName = groupByDetails?.totalItemName || 'department';
+    // Helper to get display text for item
+    const getItemDisplayText = (item) => {
+        if (renderItem) {
+            const rendered = renderItem(item);
+            if (typeof rendered === 'string')
+                return rendered;
+        }
+        const keys = displayKeys || data.displayKey || fallbackKeys;
+        return (keys
+            .map((key) => item[key])
+            .filter(Boolean)
+            .join(displaySeparator) || 'Unnamed Item');
+    };
+    // Helper to get group name display
+    const getGroupNameDisplay = (groupName, count) => {
+        if (renderGroupName) {
+            return renderGroupName(groupName, count);
+        }
+        return groupName;
+    };
     const [value, setValue] = useState('');
     const [groupedOptions, setGroupedOptions] = useState({});
     const [originalGroupedOptions, setOriginalGroupedOptions] = useState({});
@@ -13,18 +41,24 @@ export const AutoCompleteFilterGroupByMultipleSelectMultipleFieldsDisplay = ({ u
     const [collapsedGroups, setCollapsedGroups] = useState(new Set());
     const [isListOpen, setIsListOpen] = useState(false);
     const [totalItems, setTotalItems] = useState(0);
+    // Helper to get selected groups
+    const getSelectedGroups = React.useCallback(() => {
+        return Object.keys(originalGroupedOptions).reduce((acc, groupKey) => {
+            const selectedItems = (originalGroupedOptions[groupKey] || []).filter((item) => item.selected);
+            if (selectedItems.length > 0) {
+                acc[groupKey] = selectedItems;
+            }
+            return acc;
+        }, {});
+    }, [originalGroupedOptions]);
     const useOutsideAlerter = (ref) => {
         useEffect(() => {
             function handleClickOutside(event) {
-                if (ref.current && !ref.current.contains(event.target) && isListOpen) {
-                    onSelect &&
-                        onSelect(Object.keys(groupedOptions).reduce((acc, groupKey) => {
-                            const selectedItems = (groupedOptions[groupKey] || []).filter((item) => item.selected);
-                            if (selectedItems.length > 0) {
-                                acc[groupKey] = selectedItems;
-                            }
-                            return acc;
-                        }, {}));
+                if (ref.current &&
+                    !ref.current.contains(event.target) &&
+                    isListOpen) {
+                    const selectedGroups = getSelectedGroups();
+                    onSelect && onSelect(selectedGroups);
                     setIsListOpen(false);
                     setValue('');
                 }
@@ -33,7 +67,7 @@ export const AutoCompleteFilterGroupByMultipleSelectMultipleFieldsDisplay = ({ u
             return () => {
                 document.removeEventListener('mousedown', handleClickOutside);
             };
-        }, [ref, isListOpen, groupedOptions]);
+        }, [ref, isListOpen, getSelectedGroups, onSelect]);
     };
     const prevGroupedOptionsRef = useRef(groupedOptions);
     useEffect(() => {
@@ -92,10 +126,9 @@ export const AutoCompleteFilterGroupByMultipleSelectMultipleFieldsDisplay = ({ u
         // Handle both grouped data structure and regular list structure
         let processedData = {};
         if (data.list && Array.isArray(data.list)) {
-            // If data.list is an array, it's the regular structure
-            // Group by 'lab' field or create a single group
+            // If data.list is an array, group by the specified field
             const grouped = data.list.reduce((groups, item) => {
-                const groupKey = item?.lab || 'Default';
+                const groupKey = item?.[groupField] || defaultGroupName;
                 if (!groups[groupKey]) {
                     groups[groupKey] = [];
                 }
@@ -117,22 +150,30 @@ export const AutoCompleteFilterGroupByMultipleSelectMultipleFieldsDisplay = ({ u
             const selectedInGroup = (processedData[groupKey] || []).filter((item) => item.selected);
             allSelected.push(...selectedInGroup);
         });
-        setSelectedItems(Array.isArray(data?.selected) ? data?.selected : allSelected);
-    }, [data, data.selected, isSelectedStringArray, uniqueField]);
+        setSelectedItems(Array.isArray(data?.selected) && !isSelectedStringArray
+            ? data.selected
+            : allSelected);
+    }, [
+        data,
+        data.selected,
+        isSelectedStringArray,
+        uniqueField,
+        groupField,
+        defaultGroupName,
+    ]);
+    const debouncedFilter = React.useMemo(() => debounce((search) => {
+        onFilter && onFilter(search);
+    }, filterDebounceDelay), [onFilter, filterDebounceDelay]);
     const onChange = (e) => {
         const search = e.target.value;
         setValue(search);
-        debounce(() => {
-            onFilter && onFilter(search);
-        });
+        debouncedFilter(search);
     };
     const onKeyUp = (e) => {
         const charCode = e.which ? e.which : e.keyCode;
         if (charCode === 8) {
-            const search = e.target.value;
-            debounce(() => {
-                onFilter && onFilter(search);
-            });
+            const search = e.currentTarget.value;
+            debouncedFilter(search);
         }
     };
     const toggleGroupCollapse = (groupName) => {
@@ -231,7 +272,7 @@ export const AutoCompleteFilterGroupByMultipleSelectMultipleFieldsDisplay = ({ u
             return (_jsxs("div", { className: cn(s['p-4'], s['text-center'], s['text-gray-500']), children: [_jsx(Icon, { nameIcon: "FaSearch", propsIcon: {
                             size: 24,
                             color: '#ccc',
-                        } }), _jsx("p", { className: cn(s['mt-2'], s['text-sm']), children: "No results found" }), _jsx("p", { className: cn(s['text-xs']), children: "Try adjusting your search terms" })] }));
+                        } }), _jsx("p", { className: cn(s['mt-2'], s['text-sm']), children: emptyStateMessage }), _jsx("p", { className: cn(s['text-xs']), children: emptyStateDescription })] }));
         }
         return groupNames.map((groupName) => {
             const groupItems = groupedOptions[groupName] || [];
@@ -241,33 +282,37 @@ export const AutoCompleteFilterGroupByMultipleSelectMultipleFieldsDisplay = ({ u
             return (_jsxs("div", { className: cn(s['border-b'], s['border-gray-200'], s['last:border-b-0']), children: [showGroupHeaders && (_jsxs("div", { className: cn(s['flex'], s['items-center'], s['justify-between'], s['p-3'], s['bg-gray-50'], s['border-b'], s['border-gray-200'], s['font-semibold'], s['text-sm'], s['text-gray-700'], collapsibleGroups && s['cursor-pointer'], s['hover:bg-gray-100']), onClick: () => collapsibleGroups && toggleGroupCollapse(groupName), children: [_jsxs("div", { className: cn(s['flex'], s['items-center'], s['gap-2']), children: [collapsibleGroups && (_jsx(Icon, { nameIcon: isCollapsed ? 'FaChevronRight' : 'FaChevronDown', propsIcon: {
                                             size: 12,
                                             color: '#666',
-                                        } })), _jsx("span", { className: cn(s['font-bold'], s['text-blue-700']), children: groupName }), _jsxs("span", { className: cn(s['text-xs'], s['bg-blue-100'], s['text-blue-800'], s['px-2'], s['py-1'], s['rounded-full']), children: [selectedInGroup, "/", groupItems.length] })] }), _jsxs("div", { className: cn(s['flex'], s['gap-1']), children: [_jsx("button", { type: "button", onClick: (e) => {
+                                        } })), _jsx("span", { className: cn(s['font-bold'], s['text-blue-700']), children: getGroupNameDisplay(groupName, groupItems.length) }), _jsxs("span", { className: cn(s['text-xs'], s['bg-blue-100'], s['text-blue-800'], s['px-2'], s['py-1'], s['rounded-full']), children: [selectedInGroup, "/", groupItems.length] })] }), showSelectAllButtons && (_jsxs("div", { className: cn(s['flex'], s['gap-1']), children: [_jsx("button", { type: "button", onClick: (e) => {
                                             e.stopPropagation();
                                             handleGroupSelectAll(groupName, groupItems, true);
                                         }, className: cn(s['text-xs'], s['px-2'], s['py-1'], s['bg-green-500'], s['text-white'], s['rounded'], s['hover:bg-green-600'], s['transition-colors'], selectedInGroup === groupItems.length && s['opacity-50'], selectedInGroup === groupItems.length &&
                                             s['cursor-not-allowed']), title: `Select all in ${groupName}`, disabled: selectedInGroup === groupItems.length, children: "All" }), _jsx("button", { type: "button", onClick: (e) => {
                                             e.stopPropagation();
                                             handleGroupSelectAll(groupName, groupItems, false);
-                                        }, className: cn(s['text-xs'], s['px-2'], s['py-1'], s['bg-gray-500'], s['text-white'], s['rounded'], s['hover:bg-gray-600'], s['transition-colors'], selectedInGroup === 0 && s['opacity-50'], selectedInGroup === 0 && s['cursor-not-allowed']), title: `Deselect all in ${groupName}`, disabled: selectedInGroup === 0, children: "None" })] })] })), (!collapsibleGroups || !isCollapsed) && (_jsxs("div", { className: cn(s['max-h-60'], s['overflow-y-auto']), children: [unselectedInGroup.map((item, index) => (_jsx("div", { className: cn(s['flex'], s['items-center'], s['gap-3'], s['p-3'], s['hover:bg-blue-50'], s['border-l-4'], s['border-transparent'], s['transition-colors']), children: _jsxs("label", { className: cn(s['flex'], s['items-center'], s['cursor-pointer'], s['w-full']), children: [_jsx("input", { id: `${groupName}-${index}`, className: cn(s['h-4'], s['w-4'], s['text-blue-600'], s['border-gray-300'], s['rounded'], s['focus:ring-blue-500'], s['cursor-pointer']), type: "checkbox", checked: false, onChange: () => {
+                                        }, className: cn(s['text-xs'], s['px-2'], s['py-1'], s['bg-gray-500'], s['text-white'], s['rounded'], s['hover:bg-gray-600'], s['transition-colors'], selectedInGroup === 0 && s['opacity-50'], selectedInGroup === 0 && s['cursor-not-allowed']), title: `Deselect all in ${groupName}`, disabled: selectedInGroup === 0, children: "None" })] }))] })), (!collapsibleGroups || !isCollapsed) && (_jsxs("div", { className: cn(s['max-h-60'], s['overflow-y-auto']), children: [unselectedInGroup.map((item, index) => (_jsx("div", { className: cn(s['flex'], s['items-center'], s['gap-3'], s['p-3'], s['hover:bg-blue-50'], s['border-l-4'], s['border-transparent'], s['transition-colors']), children: _jsxs("label", { className: cn(s['flex'], s['items-center'], s['cursor-pointer'], s['w-full']), children: [_jsx("input", { id: `${groupName}-${index}`, className: cn(s['h-4'], s['w-4'], s['text-blue-600'], s['border-gray-300'], s['rounded'], s['focus:ring-blue-500'], s['cursor-pointer']), type: "checkbox", checked: false, onChange: () => {
                                                 const itemIndex = groupedOptions[groupName].findIndex((grpItem) => grpItem[uniqueField] === item[uniqueField]);
                                                 handleGroupSelectToggle(groupName, false, itemIndex);
-                                            } }), _jsx("div", { className: cn(s['ml-3'], s['flex'], s['flex-col']), children: _jsx("span", { className: cn(s['text-sm'], s['font-medium'], s['text-gray-700']), children: data.displayKey
-                                                    ? data.displayKey
-                                                        .map((key) => item[key])
-                                                        .filter(Boolean)
-                                                        .join(' - ')
-                                                    : item.name || item.code || 'Unnamed Item' }) })] }) }, `${groupName}-${item[uniqueField] || index}`))), unselectedInGroup.length === 0 && groupItems.length > 0 && (_jsx("div", { className: cn(s['p-3'], s['text-center'], s['text-gray-500'], s['text-sm']), children: "All items in this group are selected" }))] }))] }, groupName));
+                                            } }), _jsx("div", { className: cn(s['ml-3'], s['flex'], s['flex-col']), children: renderItem ? (renderItem(item)) : (_jsx("span", { className: cn(s['text-sm'], s['font-medium'], s['text-gray-700']), children: getItemDisplayText(item) })) })] }) }, `${groupName}-${item[uniqueField] || index}`))), unselectedInGroup.length === 0 && groupItems.length > 0 && (_jsx("div", { className: cn(s['p-3'], s['text-center'], s['text-gray-500'], s['text-sm']), children: "All items in this group are selected" }))] }))] }, groupName));
         });
     };
     const getSelectedCount = () => {
         return selectedItems?.length;
     };
-    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'], {
+    // Call selection change callback when selection updates
+    useEffect(() => {
+        if (onSelectionChange) {
+            onSelectionChange(getSelectedGroups());
+        }
+    }, [groupedOptions, onSelectionChange, getSelectedGroups]);
+    return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, className: cn(s['w-full'], s['relative'], className), style: style, children: [_jsxs("div", { className: cn(s['flex'], s['items-center'], s['leading-4'], s['p-2'], s['focus:outline-none'], s['focus:ring'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], s['rounded-md'], {
                         [s['border-red']]: hasError,
                         [s['border-gray-300']]: !hasError,
                     }, s['bg-white']), children: [_jsx("input", { placeholder: placeholder, disabled: disable, name: name, value: !isListOpen
                                 ? getSelectedCount() > 0
-                                    ? `${getSelectedCount()} Items Selected`
+                                    ? typeof selectedPlaceholder === 'function'
+                                        ? selectedPlaceholder(getSelectedCount())
+                                        : selectedPlaceholder ||
+                                            `${getSelectedCount()} Items Selected`
                                     : placeholder
                                 : isUpperCase
                                     ? value?.toUpperCase()
@@ -277,24 +322,13 @@ export const AutoCompleteFilterGroupByMultipleSelectMultipleFieldsDisplay = ({ u
                                 } }) })) : (_jsx(Icon, { nameIcon: isListOpen ? 'FaChevronUp' : 'FaChevronDown', propsIcon: {
                                 size: 16,
                                 color: '#000000',
-                            } }))] }), isListOpen && (_jsxs("div", { className: cn(s['mt-1'], s['absolute'], s['rounded-md'], s['bg-white'], s['border'], s['border-gray-300'], s['shadow-lg'], s['z-50'], s['w-full'], s['max-h-96'], s['overflow-hidden']), style: { zIndex: 1000 }, children: [_jsx("div", { className: cn(s['p-3'], s['border-b'], s['border-gray-200'], s['bg-gray-50'], s['text-sm'], s['font-medium'], s['text-gray-700']), children: _jsxs("div", { className: cn(s['flex'], s['justify-between'], s['items-center']), children: [_jsxs("span", { children: [Object.keys(groupedOptions).length, ' ', groupByDetails.groupByName?.toUpperCase(), ", ", totalItems, ' ', groupByDetails.totalItemName?.toUpperCase()] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: cn(s['text-blue-600']), children: [getSelectedCount(), " Selected"] }), _jsx("div", { className: cn(s['flex'], s['gap-2']), children: _jsx("button", { type: "button", className: cn(s['text-xs'], s['px-3'], s['py-1'], s['bg-blue-600'], s['text-white'], s['rounded'], s['hover:bg-blue-700'], s['transition-colors']), onClick: () => {
-                                                        onSelect(Object.keys(originalGroupedOptions).reduce((acc, groupKey) => {
-                                                            const selectedItems = (originalGroupedOptions[groupKey] || []).filter((item) => item.selected);
-                                                            if (selectedItems.length > 0) {
-                                                                acc[groupKey] = selectedItems;
-                                                            }
-                                                            return acc;
-                                                        }, {}));
+                            } }))] }), isListOpen && (_jsxs("div", { className: cn(s['mt-1'], s['absolute'], s['rounded-md'], s['bg-white'], s['border'], s['border-gray-300'], s['shadow-lg'], s['z-50'], s['w-full'], s['max-h-96'], s['overflow-hidden']), style: { zIndex: 1000 }, children: [_jsx("div", { className: cn(s['p-3'], s['border-b'], s['border-gray-200'], s['bg-gray-50'], s['text-sm'], s['font-medium'], s['text-gray-700']), children: _jsxs("div", { className: cn(s['flex'], s['justify-between'], s['items-center']), children: [_jsxs("span", { children: [Object.keys(groupedOptions).length, ' ', groupField?.toUpperCase(), ", ", totalItems, ' ', totalItemName?.toUpperCase()] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: cn(s['text-blue-600']), children: [getSelectedCount(), " Selected"] }), _jsx("div", { className: cn(s['flex'], s['gap-2']), children: _jsx("button", { type: "button", className: cn(s['text-xs'], s['px-3'], s['py-1'], s['bg-blue-600'], s['text-white'], s['rounded'], s['hover:bg-blue-700'], s['transition-colors']), onClick: () => {
+                                                        const selectedGroups = getSelectedGroups();
+                                                        onSelect(selectedGroups);
                                                         setIsListOpen(false);
                                                         setValue('');
-                                                    }, children: "OK" }) })] })] }) }), _jsxs("div", { className: cn(s['max-h-80'], s['overflow-y-auto']), children: [getSelectedCount() > 0 && (_jsxs("div", { className: cn(s['border-b'], s['border-gray-200']), children: [_jsx("div", { className: cn(s['p-3'], s['bg-blue-50'], s['border-b'], s['border-blue-200'], s['font-semibold'], s['text-sm'], s['text-blue-700']), children: _jsxs("div", { className: cn(s['flex'], s['items-center'], s['gap-2']), children: [_jsx(Icon, { nameIcon: "FaCheck", propsIcon: {
+                                                    }, children: "OK" }) })] })] }) }), _jsxs("div", { className: cn(s['max-h-80'], s['overflow-y-auto']), children: [showSelectedSection && getSelectedCount() > 0 && (_jsxs("div", { className: cn(s['border-b'], s['border-gray-200']), children: [_jsx("div", { className: cn(s['p-3'], s['bg-blue-50'], s['border-b'], s['border-blue-200'], s['font-semibold'], s['text-sm'], s['text-blue-700']), children: _jsxs("div", { className: cn(s['flex'], s['items-center'], s['gap-2']), children: [_jsx(Icon, { nameIcon: "FaCheck", propsIcon: {
                                                             size: 12,
                                                             color: '#1976d2',
-                                                        } }), _jsxs("span", { children: ["Selected Items (", getSelectedCount(), ")"] })] }) }), _jsx("div", { className: cn(s['max-h-48'], s['overflow-y-auto']), children: selectedItems?.map((item, index) => (_jsx("div", { className: cn(s['flex'], s['items-center'], s['gap-3'], s['p-3'], s['hover:bg-blue-50'], s['border-l-4'], s['border-blue-500'], s['bg-blue-25'], s['transition-colors']), children: _jsxs("label", { className: cn(s['flex'], s['items-center'], s['cursor-pointer'], s['w-full']), children: [_jsx("input", { type: "checkbox", checked: true, onChange: () => handleDeselectItem(item), className: cn(s['h-4'], s['w-4'], s['text-blue-600'], s['border-gray-300'], s['rounded'], s['focus:ring-blue-500'], s['cursor-pointer']) }), _jsxs("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(' - ') ||
-                                                                        item.name ||
-                                                                        item.code ||
-                                                                        'Unnamed Item' }), _jsx("span", { className: cn(s['text-xs'], s['text-gray-500']), children: item.lab || 'Default Group' })] })] }) }, `selected-${item[uniqueField] || index}`))) })] })), _jsx("div", { children: renderGroupedOptions() })] })] }))] }) }));
+                                                        } }), _jsxs("span", { children: ["Selected Items (", getSelectedCount(), ")"] })] }) }), _jsx("div", { className: cn(s['max-h-48'], s['overflow-y-auto']), children: selectedItems?.map((item, index) => (_jsx("div", { className: cn(s['flex'], s['items-center'], s['gap-3'], s['p-3'], s['hover:bg-blue-50'], s['border-l-4'], s['border-blue-500'], s['bg-blue-25'], s['transition-colors']), children: _jsxs("label", { className: cn(s['flex'], s['items-center'], s['cursor-pointer'], s['w-full']), children: [_jsx("input", { type: "checkbox", checked: true, onChange: () => handleDeselectItem(item), className: cn(s['h-4'], s['w-4'], s['text-blue-600'], s['border-gray-300'], s['rounded'], s['focus:ring-blue-500'], s['cursor-pointer']) }), _jsx("div", { className: cn(s['ml-3'], s['flex'], s['flex-col']), children: renderItem ? (renderItem(item)) : (_jsxs(_Fragment, { children: [_jsx("span", { className: cn(s['text-sm'], s['font-medium'], s['text-blue-700']), children: getItemDisplayText(item) }), _jsx("span", { className: cn(s['text-xs'], s['text-gray-500']), children: item[groupField] || defaultGroupName })] })) })] }) }, `selected-${item[uniqueField] || index}`))) })] })), _jsx("div", { children: renderGroupedOptions() })] })] }))] }) }));
 };

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

@@ -1,19 +1,120 @@
-interface AutoCompleteFilterMutiSelectMultiFieldsDisplayDragDropProps {
-    key?: string;
+import React from 'react';
+import { SortingStrategy } from '@dnd-kit/sortable';
+/** Item data structure with optional sort field for drag-drop */
+export interface DragDropItem {
+    [key: string]: any;
+    selected?: boolean;
+    sort?: string;
+}
+/** Component data prop structure */
+export interface DragDropAutoCompleteData {
+    /** List of available items */
+    list: DragDropItem[];
+    /** Selected items */
+    selected?: DragDropItem[];
+    /** Display keys for rendering item text */
+    displayKey?: string[];
+}
+/** Display configuration */
+export interface DragDropDisplayConfig {
+    /** Keys to use for displaying item text */
+    displayKeys?: string[];
+    /** Separator for joining display keys */
+    displaySeparator?: string;
+    /** Fallback keys if displayKeys not provided */
+    fallbackKeys?: string[];
+    /** Custom render function for item display */
+    renderItem?: (item: DragDropItem) => React.ReactNode;
+    /** Custom render function for selected item badge */
+    renderSelectedBadge?: (item: DragDropItem, index: number, onRemove: () => void) => React.ReactNode;
+}
+/** Drag and Drop configuration */
+export interface DragDropConfig {
+    /** Enable drag and drop */
+    enabled?: boolean;
+    /** Sorting strategy */
+    strategy?: SortingStrategy;
+    /** Callback when drag ends */
+    onDragEnd?: (reorderedItems: DragDropItem[]) => void;
+    /** Animation duration (ms) */
+    animationDuration?: number;
+}
+/** Selection configuration */
+export interface DragDropSelectionConfig {
+    /** Maximum number of items that can be selected */
+    maxSelection?: number;
+    /** Callback when selection changes */
+    onSelectionChange?: (selectedItems: DragDropItem[]) => void;
+}
+/** UI Configuration */
+export interface DragDropUIConfig {
+    /** Show selected items section */
+    showSelectedSection?: boolean;
+    /** Custom placeholder text when items are selected */
+    selectedPlaceholder?: string | ((count: number) => string);
+    /** Empty state message */
+    emptyStateMessage?: string;
+    /** Maximum height for dropdown */
+    maxHeight?: string;
+    /** Z-index for dropdown */
+    zIndex?: number;
+}
+/** Draggable selected item props */
+export interface DraggableSelectedItemProps {
+    item: DragDropItem;
+    index: number;
+    onRemove: (index: number) => void;
+    displayKey?: string[];
+    uniqueField?: string;
+    displayConfig?: DragDropDisplayConfig;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const DraggableSelectedItem: ({ item, index, onRemove, displayKey, uniqueField, displayConfig, className, style: customStyle, }: DraggableSelectedItemProps) => import("react/jsx-runtime").JSX.Element;
+interface AutoCompleteFilterMultiSelectMultiFieldsDisplayDragDropProps {
+    /** Component key for React */
+    componentKey?: string;
+    /** Unique identifier field name for items */
     uniqueField?: string;
+    /** Loading state */
     loader?: boolean;
+    /** Input placeholder */
     placeholder?: string;
-    data: any;
+    /** Component data */
+    data: DragDropAutoCompleteData;
+    /** Error state */
     hasError?: boolean;
+    /** Disabled state */
     disable?: boolean;
+    /** Convert input to uppercase */
     isUpperCase?: boolean;
+    /** Input name attribute */
     name?: string;
+    /** Default input value */
     defaultValue?: string;
+    /** Display configuration */
+    displayConfig?: DragDropDisplayConfig;
+    /** Drag and drop configuration */
+    dragDropConfig?: DragDropConfig;
+    /** Selection configuration */
+    selectionConfig?: DragDropSelectionConfig;
+    /** UI configuration */
+    uiConfig?: DragDropUIConfig;
+    /** Filter callback */
     onFilter?: (value: string) => void;
-    onUpdate: (item: any) => void;
-    onSelect: (item: any) => any;
-    onBlur?: (e: any) => void;
+    /** Update callback (fires when dropdown closes) */
+    onUpdate: (items: DragDropItem[]) => void;
+    /** Select callback (fires when item is selected/deselected) */
+    onSelect: (item: DragDropItem) => void;
+    /** Blur callback */
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    /** Additional className */
+    className?: string;
+    /** Custom styles */
+    style?: React.CSSProperties;
+    /** Debounce delay for filter (ms) */
+    filterDebounceDelay?: number;
 }
-export declare const AutoCompleteFilterMultiSelectMultiFieldsDisplayDragDrop: ({ key, uniqueField, loader, placeholder, data, hasError, disable, isUpperCase, name, defaultValue, onFilter, onUpdate, onSelect, onBlur, }: AutoCompleteFilterMutiSelectMultiFieldsDisplayDragDropProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AutoCompleteFilterMultiSelectMultiFieldsDisplayDragDrop: ({ componentKey, uniqueField, loader, placeholder, data, hasError, disable, isUpperCase, name, defaultValue, displayConfig, dragDropConfig, selectionConfig, uiConfig, onFilter, onUpdate, onSelect, onBlur, className, style, filterDebounceDelay, }: AutoCompleteFilterMultiSelectMultiFieldsDisplayDragDropProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=auto-complete-filter-multi-select-multi-fields-display-drag-drop.component.d.ts.map

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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auto-complete-filter-multi-select-multi-fields-display-drag-drop.component.d.ts","sourceRoot":"","sources":["../../../../../../../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.tsx"],"names":[],"mappings":"AAwEA,UAAU,2DAA2D;IACnE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,GAAG,CAAC;IACV,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;IAC7B,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,uDAAuD,+IAejE,2DAA2D,4CA8Q7D,CAAC"}
+{"version":3,"file":"auto-complete-filter-multi-select-multi-fields-display-drag-drop.component.d.ts","sourceRoot":"","sources":["../../../../../../../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.tsx"],"names":[],"mappings":"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"}