react-core-ts 1.9.18 → 2.0.1

package/dist/dropdownFilterTabs.js

@@ -0,0 +1,647 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importStar(require("react"));
+var react_dom_1 = __importDefault(require("react-dom"));
+var DropdownList_1 = __importDefault(require("./components/DropdownList"));
+var autosuggestions_1 = require("./utilities/autosuggestions");
+var debounce_1 = require("./utilities/debounce");
+var deepEqual_1 = require("./utilities/deepEqual");
+var filterSuggestions_1 = require("./utilities/filterSuggestions");
+var icons_1 = require("./utilities/icons");
+var NewTooltip_1 = __importDefault(require("./utilities/NewTooltip"));
+var getKeyValue_1 = require("./utilities/getKeyValue");
+var DropdownFilterTabs = (0, react_1.forwardRef)(function (_a, ref) {
+    var label = _a.label, onChange = _a.onChange, _b = _a.getData, getData = _b === void 0 ? function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+        return [2 /*return*/, []];
+    }); }); } : _b, _c = _a.data, data = _c === void 0 ? [] : _c, errors = _a.errors, _d = _a.required, required = _d === void 0 ? false : _d, name = _a.name, _e = _a.fullWidth, fullWidth = _e === void 0 ? false : _e, placeholder = _a.placeholder, id = _a.id, _f = _a.type, type = _f === void 0 ? 'custom_select' : _f, _g = _a.selectedItems, propsSeelctedItems = _g === void 0 ? [] : _g, _h = _a.readOnly, readOnly = _h === void 0 ? false : _h, _j = _a.disabled, disabled = _j === void 0 ? false : _j, value = _a.value, _k = _a.searchValue, propsSearchValue = _k === void 0 ? '' : _k, _l = _a.isMultiple, isMultiple = _l === void 0 ? false : _l, _m = _a.desc, desc = _m === void 0 ? 'name' : _m, _o = _a.descId, descId = _o === void 0 ? 'id' : _o, singleSelect = _a.singleSelect, className = _a.className, _p = _a.async, async = _p === void 0 ? false : _p, paginationEnabled = _a.paginationEnabled, _q = _a.initialLoad, initialLoad = _q === void 0 ? false : _q, actionLabel = _a.actionLabel, handleAction = _a.handleAction, nextBlock = _a.nextBlock, notDataMessage = _a.notDataMessage, initialDataMessage = _a.initialDataMessage, onFocus = _a.onFocus, onSearchValueChange = _a.onSearchValueChange, _r = _a.expandable, expandable = _r === void 0 ? false : _r, _s = _a.textCount, textCount = _s === void 0 ? 10 : _s, _t = _a.itemCount, itemCount = _t === void 0 ? 1 : _t, scrollRef = _a.scrollRef, _u = _a.countOnly, countOnly = _u === void 0 ? true : _u, _v = _a.typeOnlyFetch, typeOnlyFetch = _v === void 0 ? false : _v, _w = _a.tab, tab = _w === void 0 ? [] : _w, _x = _a.clearTabSwitch, clearTabSwitch = _x === void 0 ? false : _x, _y = _a.selectedRowLimit, selectedRowLimit = _y === void 0 ? 2 : _y, _z = _a.topMargin, topMargin = _z === void 0 ? 0 : _z, _0 = _a.currentTab, currentTab = _0 === void 0 ? 0 : _0, _1 = _a.selectedLabel, selectedLabel = _1 === void 0 ? '' : _1, _2 = _a.viewMode, viewMode = _2 === void 0 ? false : _2, handleUpdateParent = _a.handleUpdateParent, _3 = _a.shortCode, shortCode = _3 === void 0 ? '' : _3, _4 = _a.labelCode, labelCode = _4 === void 0 ? '' : _4, _5 = _a.tabInlineSearch, tabInlineSearch = _5 === void 0 ? true : _5, _6 = _a.matchFromStart, matchFromStart = _6 === void 0 ? false : _6, _7 = _a.autoDropdown, autoDropdown = _7 === void 0 ? false : _7, _8 = _a.enableSelectAll, enableSelectAll = _8 === void 0 ? false : _8, dropdownRef = _a.dropdownRef, _9 = _a.open, open = _9 === void 0 ? false : _9;
+    var selItemRef = (0, react_1.useRef)(null);
+    var itemsRef = (0, react_1.useRef)(null);
+    var dropdownSelectedRef = (0, react_1.useRef)(null);
+    var tabRef = (0, react_1.useRef)(null);
+    var dropLevelRef = (0, react_1.useRef)('bottom');
+    // State Hooks Section
+    var _10 = (0, react_1.useState)(true), isInitialRender = _10[0], setIsInitialRender = _10[1];
+    var _11 = (0, react_1.useState)(value), inputValue = _11[0], setInputValue = _11[1];
+    var _12 = (0, react_1.useState)(propsSearchValue), searchValue = _12[0], setSearchValue = _12[1];
+    var _13 = (0, react_1.useState)(''), searchOldValue = _13[0], setSearchOldValue = _13[1];
+    var _14 = (0, react_1.useState)(1), nextPage = _14[0], setNextPage = _14[1];
+    var _15 = (0, react_1.useState)(open), dropOpen = _15[0], setDropOpen = _15[1];
+    var _16 = (0, react_1.useState)([]), selectedItems = _16[0], setSelectedItems = _16[1];
+    var _17 = (0, react_1.useState)(false), showAllSelected = _17[0], setShowAllSelected = _17[1];
+    var _18 = (0, react_1.useState)(184), selHeight = _18[0], setSelHeight = _18[1];
+    var _19 = (0, react_1.useState)(1), expandArrowClick = _19[0], setExpandArrowClick = _19[1];
+    var _20 = (0, react_1.useState)(true), visible = _20[0], setVisible = _20[1];
+    var _21 = (0, react_1.useState)(currentTab), activeTab = _21[0], setActiveTab = _21[1];
+    var _22 = (0, react_1.useState)(0), focusedIndex = _22[0], setFocusedIndex = _22[1];
+    var itemRefs = (0, react_1.useRef)([]);
+    // API call for suggestions through a custom hook
+    var inputRef = (0, react_1.useRef)(null);
+    var dropRef = (0, react_1.useRef)(null);
+    var inputSearchRef = (0, react_1.useRef)(null);
+    var dropBtnRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(ref, function () { return inputRef.current; });
+    var _23 = (0, react_1.useState)({
+        top: 0,
+        left: 0,
+        width: 200,
+    }), dropdownStyle = _23[0], setDropdownStyle = _23[1];
+    var _24 = (0, react_1.useState)(false), selectAll = _24[0], setSelectAll = _24[1];
+    var _25 = (0, react_1.useState)(false), refetchData = _25[0], setRefetchData = _25[1];
+    var _26 = (0, react_1.useState)(false), allDataLoaded = _26[0], setAllDataLoaded = _26[1];
+    // Filter selected items based on current active tab
+    var currentTabId = tab.length > 0 ? tab[activeTab].id : undefined;
+    var filteredSelectedItems = (0, react_1.useMemo)(function () {
+        return selectedItems.filter(function (item) { return item.tabId === currentTabId; });
+    }, [selectedItems, currentTabId]);
+    var originalOverflow = '';
+    var hasScrollbar = false;
+    (0, react_1.useEffect)(function () {
+        setDropOpen(open);
+    }, [open]);
+    var adjustDropdownPosition = function () {
+        var _a, _b, _c;
+        if (dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current) {
+            var inputRect_1 = (_a = dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            var dropdownPosition_1 = {
+                left: inputRect_1.left + window.scrollX,
+                width: inputRect_1.width,
+                top: 0,
+            };
+            // Check if there's enough space below the input for the dropdown
+            var spaceBelow = window.innerHeight - inputRect_1.bottom;
+            var spaceAbove = inputRect_1.top + window.scrollY;
+            var dropdownHeight = viewMode ? 160 : 300; // Assume a fixed height or calculate based on content
+            var defaultHeight = 184;
+            if (countOnly) {
+                if (dropdownSelectedRef === null || dropdownSelectedRef === void 0 ? void 0 : dropdownSelectedRef.current)
+                    dropdownHeight += (_b = dropdownSelectedRef === null || dropdownSelectedRef === void 0 ? void 0 : dropdownSelectedRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight;
+            }
+            if (tab.length > 0) {
+                if (tabRef === null || tabRef === void 0 ? void 0 : tabRef.current)
+                    dropdownHeight += (_c = tabRef === null || tabRef === void 0 ? void 0 : tabRef.current) === null || _c === void 0 ? void 0 : _c.clientHeight;
+            }
+            if (spaceBelow >= dropdownHeight) {
+                dropLevelRef.current = 'bottom';
+                dropdownPosition_1.top =
+                    inputRect_1.top + window.scrollY + inputRect_1.height;
+                setSelHeight(defaultHeight);
+            }
+            else if (spaceAbove >= dropdownHeight) {
+                var sHeight = tabInlineSearch ? 73 : 113;
+                sHeight =
+                    sHeight -
+                        ((filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 && enableSelectAll && isMultiple
+                            ? 32
+                            : 0);
+                dropLevelRef.current = 'top';
+                dropdownPosition_1.top =
+                    inputRect_1.top +
+                        window.scrollY -
+                        dropdownHeight +
+                        sHeight +
+                        topMargin;
+                setSelHeight(defaultHeight);
+            }
+            else {
+                dropLevelRef.current = 'bottom';
+                dropdownPosition_1.top =
+                    inputRect_1.top + window.scrollY + inputRect_1.height;
+                if (itemsRef === null || itemsRef === void 0 ? void 0 : itemsRef.current) {
+                    var totalH = showAllSelected ? 148 : defaultHeight;
+                    var selH = totalH - (dropdownHeight - spaceBelow);
+                    setSelHeight(selH < 50 ? 50 : selH);
+                }
+            }
+            // setDropdownStyle({
+            //   ...dropdownPosition,
+            // });
+            setDropdownStyle(function (prevStyle) { return (__assign(__assign({}, prevStyle), { transform: "translateY(".concat(dropdownPosition_1.top, "px)"), left: inputRect_1.left + window.scrollX, width: inputRect_1.width })); });
+        }
+    };
+    (0, react_1.useEffect)(function () {
+        window.addEventListener('resize', adjustDropdownPosition);
+        adjustDropdownPosition();
+        return function () {
+            window.removeEventListener('resize', adjustDropdownPosition);
+        };
+    }, [dropOpen, expandArrowClick]);
+    var _27 = (0, autosuggestions_1.useSuggestions)(getData, data, dropOpen, async, paginationEnabled, initialLoad, inputValue, isMultiple, setNextPage, selectedItems, typeOnlyFetch
+    // nextBlock
+    ), suggestions = _27.suggestions, isLoading = _27.isLoading, handlePickSuggestions = _27.handlePickSuggestions, resetSuggections = _27.resetSuggections;
+    // Handling the selection of a suggestion
+    var handleSuggestionClick = (0, react_1.useCallback)(function (suggestion, idx) {
+        if (isMultiple) {
+            setFocusedIndex(idx);
+            setSelectedItems(function (prev) {
+                var isAdded = prev && prev.length > 0
+                    ? prev.some(function (item) {
+                        return (0, getKeyValue_1.getKeyValue)(item, descId, 'id') ===
+                            (0, getKeyValue_1.getKeyValue)(suggestion, descId, 'id');
+                    })
+                    : false;
+                if (isAdded) {
+                    return prev.filter(function (item) {
+                        return (0, getKeyValue_1.getKeyValue)(item, descId, 'id') !==
+                            (0, getKeyValue_1.getKeyValue)(suggestion, descId, 'id');
+                    });
+                }
+                else {
+                    // Include tab ID when adding suggestion
+                    var suggestionWithTabId = __assign(__assign({}, suggestion), { tabId: tab.length > 0 ? tab[activeTab].id : undefined });
+                    return __spreadArray(__spreadArray([], prev, true), [suggestionWithTabId], false);
+                }
+            });
+        }
+        else {
+            setFocusedIndex(idx);
+            setInputValue(String(suggestion[desc]));
+            setSearchValue('');
+            onChange(suggestion);
+            setDropOpen(false);
+        }
+    }, [activeTab, tab, descId, desc, onChange, isMultiple]);
+    // Adding debounce to avoid making API calls on every keystroke
+    var debouncedUpdate = (0, react_1.useCallback)((0, debounce_1.debounce)(function (value, tabVal) {
+        setSearchOldValue(value);
+        handlePickSuggestions(value, 1, false, tabVal);
+    }, 500), []);
+    var handleChangeWithDebounce = function (value) {
+        if ((type === 'auto_complete' || type === 'auto_suggestion') && async) {
+            var activeTabVal = tab.length > 0 ? tab === null || tab === void 0 ? void 0 : tab[activeTab].id : undefined;
+            debouncedUpdate(value, activeTabVal);
+        }
+    };
+    var handleMultiSelect = function (e, suggestion) {
+        var checked = e.target.checked;
+        if (isMultiple) {
+            if (checked) {
+                // Include tab ID when adding suggestion
+                var suggestionWithTabId_1 = __assign(__assign({}, suggestion), { tabId: tab.length > 0 ? tab[activeTab].id : undefined });
+                setSelectedItems(function (prev) { return __spreadArray(__spreadArray([], prev, true), [suggestionWithTabId_1], false); });
+            }
+            else {
+                setSelectedItems(function (prev) {
+                    return prev.filter(function (item, i) {
+                        return (0, getKeyValue_1.getKeyValue)(item, descId, 'id') !==
+                            (0, getKeyValue_1.getKeyValue)(suggestion, descId, 'id');
+                    });
+                });
+            }
+        }
+        else {
+            if (checked) {
+                setInputValue(String(suggestion[desc]));
+                onChange(suggestion);
+            }
+            else {
+                setInputValue('');
+            }
+        }
+    };
+    (0, react_1.useEffect)(function () {
+        // Only update if different
+        if (!(0, deepEqual_1.deepEqual)(selectedItems, propsSeelctedItems)) {
+            setSelectedItems(propsSeelctedItems);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [propsSeelctedItems]);
+    // Effect to set the input value whenever `value` prop changes
+    (0, react_1.useEffect)(function () {
+        setInputValue(value !== null && value !== void 0 ? value : '');
+    }, [value]);
+    var handleSuggestionChange = function (e) {
+        var value = e.target.value;
+        //setVisibleDrop();
+        var trimStart = value.trimStart();
+        setSearchValue(trimStart);
+        handleChangeWithDebounce(trimStart);
+        setAllDataLoaded(false);
+    };
+    var handleClearSelected = function () {
+        // Only clear items from current tab
+        setSelectedItems(function (prev) {
+            var remainingItems = prev.filter(function (item) { return item.tabId !== currentTabId; });
+            return remainingItems;
+        });
+        setShowAllSelected(false);
+        if (searchValue && type === 'auto_suggestion' && tabInlineSearch) {
+            setSearchValue('');
+        }
+        if (async && type === 'auto_suggestion' && tabInlineSearch)
+            resetSuggections === null || resetSuggections === void 0 ? void 0 : resetSuggections();
+    };
+    var generateClassName = (0, react_1.useCallback)(function () {
+        return "qbs-textfield-default ".concat(className, " ").concat(errors && (errors === null || errors === void 0 ? void 0 : errors.message) ? 'textfield-error' : 'textfield', " ").concat(expandable ? 'expandable' : '');
+    }, [errors, name]);
+    var handleRemoveSelectedItem = (0, react_1.useCallback)(function (index) {
+        var itemToRemove = filteredSelectedItems[index];
+        setSelectedItems(function (prev) {
+            return prev.filter(function (item) {
+                return (0, getKeyValue_1.getKeyValue)(item, descId, 'id') !== (0, getKeyValue_1.getKeyValue)(itemToRemove, descId, 'id');
+            });
+        });
+    }, [filteredSelectedItems, descId]);
+    var uniqueDropArrowId = "".concat(name, "-drop-arrow-selected-list-icon");
+    (0, react_1.useEffect)(function () {
+        var handleClickOutside = function (event) {
+            var _a;
+            if (dropRef.current &&
+                event.target instanceof Node &&
+                !dropRef.current.contains(event.target) &&
+                ((_a = event.target) === null || _a === void 0 ? void 0 : _a.id) !== uniqueDropArrowId) {
+                setTimeout(function () {
+                    setDropOpen(false);
+                    if (!typeOnlyFetch)
+                        setSearchValue('');
+                }, 200);
+                //setSearchValue("");
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        window.addEventListener('scroll', handleClickOutside);
+        var scrollableDivs = document.querySelectorAll('div[style*="overflow"], .overflow-auto, .overflow-y-auto, .overflow-x-auto');
+        scrollableDivs.forEach(function (div) {
+            return div.addEventListener('scroll', handleClickOutside);
+        });
+        if (scrollRef && scrollRef.current && scrollRef.current !== null) {
+            scrollRef.current.addEventListener('scroll', handleClickOutside);
+        }
+        return function () {
+            document.removeEventListener('mousedown', handleClickOutside);
+            window.removeEventListener('scroll', handleClickOutside);
+            scrollableDivs.forEach(function (div) {
+                return div.removeEventListener('scroll', handleClickOutside);
+            });
+            if (scrollRef && scrollRef.current && scrollRef.current !== null) {
+                scrollRef.current.removeEventListener('scroll', handleClickOutside);
+            }
+        };
+    }, []);
+    // Filtering suggestions based on type and search value
+    var selected = isMultiple ? selectedItems : inputValue;
+    var filteredData = (0, filterSuggestions_1.filterSuggestions)(suggestions, searchValue, type, desc, selected, async, false, true, matchFromStart);
+    var prevSelectedItemsRef = (0, react_1.useRef)([]);
+    (0, react_1.useEffect)(function () {
+        if (isInitialRender) {
+            setIsInitialRender(false);
+        }
+        else {
+            // Only call onChange if selectedItems actually changed
+            if (!(0, deepEqual_1.deepEqual)(selectedItems, prevSelectedItemsRef.current)) {
+                onChange(selectedItems);
+                prevSelectedItemsRef.current = selectedItems;
+            }
+        }
+        adjustDropdownPosition();
+        setTimeout(function () {
+            adjustDropdownPosition();
+        }, 200);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedItems]);
+    (0, react_1.useEffect)(function () {
+        adjustDropdownPosition();
+        setTimeout(function () {
+            adjustDropdownPosition();
+        }, 200);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [filteredData]);
+    (0, react_1.useEffect)(function () {
+        // Handle keyboard navigation
+        var handleKeyDown = function (e) {
+            var _a, _b;
+            if (!dropOpen)
+                return;
+            var atBottom = focusedIndex === filteredData.length - 1;
+            var atTop = focusedIndex === 0;
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    if (itemsRef.current) {
+                        if (!atBottom) {
+                            itemsRef.current.scrollTop +=
+                                ((_a = itemRefs.current[focusedIndex]) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 50;
+                        }
+                        else {
+                            itemsRef.current.scrollTop = 0;
+                        }
+                    }
+                    setFocusedIndex(function (prev) { return (prev + 1) % (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length); });
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    if (itemsRef.current) {
+                        if (!atTop) {
+                            itemsRef.current.scrollTop -=
+                                ((_b = itemRefs.current[focusedIndex]) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 50;
+                        }
+                        else {
+                            itemsRef.current.scrollTop = 0;
+                        }
+                    }
+                    setFocusedIndex(function (prev) { return (prev - 1 + (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length)) % (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length); });
+                    break;
+                case 'Enter':
+                    e.preventDefault();
+                    if (filteredData && filteredData.length > 0)
+                        handleSuggestionClick(filteredData[focusedIndex], focusedIndex);
+                    break;
+                case 'Escape':
+                    e.preventDefault();
+                    setDropOpen(false);
+                    break;
+                default:
+                    break;
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return function () {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [filteredData, dropOpen, isLoading, focusedIndex]);
+    var isSelected = function (item, selectedItems) {
+        if (Array.isArray(selectedItems)) {
+            return selectedItems.some(function (selectedItem) {
+                return (0, getKeyValue_1.getKeyValue)(selectedItem, desc, 'name') === (0, getKeyValue_1.getKeyValue)(item, desc, 'name') ||
+                    (0, getKeyValue_1.getKeyValue)(selectedItem, descId, 'id') === (0, getKeyValue_1.getKeyValue)(item, descId, 'id');
+            });
+        }
+        else {
+            return ((0, getKeyValue_1.getKeyValue)(item, desc, 'name') === (0, getKeyValue_1.safeToLowerString)(selectedItems) ||
+                (0, getKeyValue_1.getKeyValue)(item, descId, 'id') === (0, getKeyValue_1.safeToLowerString)(selectedItems));
+        }
+    };
+    var handleLoadMore = function () {
+        if (paginationEnabled) {
+            handlePickSuggestions(searchValue, nextPage + 1, true);
+            setNextPage(nextPage + 1);
+        }
+    };
+    var handleShowAllSelected = (0, react_1.useCallback)(function (enabled) {
+        setExpandArrowClick(expandArrowClick + 1);
+        if (enabled) {
+            setShowAllSelected(true);
+        }
+        else {
+            setShowAllSelected(false);
+        }
+    }, [expandArrowClick]);
+    var handleCollapseArrowClick = (0, react_1.useCallback)(function () {
+        setExpandArrowClick(expandArrowClick + 1);
+        setShowAllSelected(false);
+    }, [expandArrowClick]);
+    var tooltipContent = (filteredSelectedItems === null || filteredSelectedItems === void 0 ? void 0 : filteredSelectedItems.length) > itemCount
+        ? filteredSelectedItems === null || filteredSelectedItems === void 0 ? void 0 : filteredSelectedItems.slice(itemCount).map(function (item) { return item[desc]; }).join(', ')
+        : '';
+    var handleTabClick = (0, react_1.useCallback)(function (index) {
+        if (activeTab !== index) {
+            if (clearTabSwitch) {
+                handleClearSelected();
+                if (tabInlineSearch) {
+                    setSearchValue('');
+                    setInputValue('');
+                    handlePickSuggestions('', 1);
+                }
+                else {
+                    resetSuggections === null || resetSuggections === void 0 ? void 0 : resetSuggections();
+                    var activeTabVal = tab.length > 0 ? tab === null || tab === void 0 ? void 0 : tab[index].id : undefined;
+                    handlePickSuggestions(searchValue, 1, false, activeTabVal);
+                }
+                setAllDataLoaded(false);
+            }
+            else {
+                resetSuggections === null || resetSuggections === void 0 ? void 0 : resetSuggections();
+                var activeTabVal = tab.length > 0 ? tab === null || tab === void 0 ? void 0 : tab[index].id : undefined;
+                handlePickSuggestions(searchValue, 1, false, activeTabVal);
+            }
+            setActiveTab(index);
+        }
+    }, [activeTab, clearTabSwitch, handleClearSelected, tabInlineSearch, tab, searchValue, handlePickSuggestions, resetSuggections]);
+    var getSelectedRowLimit = (0, react_1.useCallback)(function () {
+        var maxHeight = 36;
+        if ((selItemRef === null || selItemRef === void 0 ? void 0 : selItemRef.current) && (selItemRef === null || selItemRef === void 0 ? void 0 : selItemRef.current.clientWidth) < 300) {
+            maxHeight = 24;
+        }
+        return selectedRowLimit * maxHeight + 5;
+    }, [selectedRowLimit]);
+    var getSelectedItems = (0, react_1.useCallback)(function (dropdown) {
+        return ((0, jsx_runtime_1.jsxs)("div", __assign({ ref: selItemRef, className: "selected-items-outer-container", style: { maxHeight: "".concat(getSelectedRowLimit(), "px") } }, { children: [filteredSelectedItems
+                    .slice(0, (filteredSelectedItems === null || filteredSelectedItems === void 0 ? void 0 : filteredSelectedItems.length) > itemCount
+                    ? showAllSelected
+                        ? filteredSelectedItems === null || filteredSelectedItems === void 0 ? void 0 : filteredSelectedItems.length
+                        : itemCount
+                    : filteredSelectedItems === null || filteredSelectedItems === void 0 ? void 0 : filteredSelectedItems.length)
+                    .map(function (item, index) {
+                    var _a, _b;
+                    return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "selected-items-container" }, { children: (0, jsx_runtime_1.jsx)(NewTooltip_1.default, __assign({ title: item === null || item === void 0 ? void 0 : item[desc], enabled: ((_a = String(item === null || item === void 0 ? void 0 : item[desc])) === null || _a === void 0 ? void 0 : _a.length) > textCount }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "selected-item" }, { children: [((_b = String(item === null || item === void 0 ? void 0 : item[desc])) === null || _b === void 0 ? void 0 : _b.length) > textCount
+                                        ? "".concat(String(item === null || item === void 0 ? void 0 : item[desc]).substring(0, textCount), "...")
+                                        : item === null || item === void 0 ? void 0 : item[desc], !viewMode && ((0, jsx_runtime_1.jsx)("button", __assign({ onClick: function () { return handleRemoveSelectedItem(index); }, className: "remove-item-btn", "aria-label": "Remove ".concat(item === null || item === void 0 ? void 0 : item[desc]) }, { children: "X" })))] }), item.id) })) }), index));
+                }), (filteredSelectedItems === null || filteredSelectedItems === void 0 ? void 0 : filteredSelectedItems.length) > itemCount && !showAllSelected && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "selected-items-container" }, { children: (0, jsx_runtime_1.jsx)(NewTooltip_1.default, __assign({ title: tooltipContent, enabled: true }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "selected-item-more qbs-rounded-full qbs-min-h-6 qbs-min-w-6 qbs-p-1 ".concat(dropdown ? 'qbs-cursor-pointer' : ''), onClick: function () {
+                                handleShowAllSelected(dropdown);
+                            } }, { children: ["+", (filteredSelectedItems === null || filteredSelectedItems === void 0 ? void 0 : filteredSelectedItems.length) - itemCount, ' ', (0, jsx_runtime_1.jsx)("span", __assign({ className: "qbs-hidden" }, { children: "more" }))] })) })) })))] })));
+    }, [filteredSelectedItems, getSelectedRowLimit, itemCount, showAllSelected, desc, textCount, viewMode, handleRemoveSelectedItem, tooltipContent, handleShowAllSelected]);
+    // Check if any items are selected under a specific tab
+    var hasSelectedItemsInTab = (0, react_1.useCallback)(function (tabIndex) {
+        var tabId = tab.length > 0 ? tab[tabIndex].id : undefined;
+        return selectedItems.some(function (item) { return item.tabId === tabId; });
+    }, [selectedItems, tab]);
+    var getTabItems = (0, react_1.useCallback)(function () {
+        return ((0, jsx_runtime_1.jsx)("ul", __assign({ className: "qbs-flex qbs-flex-wrap qbs-w-full qbs-tab qbs-mb-2 -qbs-mt-2", ref: tabRef }, { children: tab.map(function (item, idx) {
+                var hasSelectedItems = hasSelectedItemsInTab(idx);
+                return ((0, jsx_runtime_1.jsx)("li", __assign({ className: "qbs-flex-1 qbs-tab-items ".concat(hasSelectedItems ? 'qbs-tab-has-selected-items' : '') }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ className: "qbs-inline-block qbs-tab-item qbs-text-sm qbs-cursor-pointer qbs-w-full qbs-text-center qbs-p-1 qbs-border-b-2 ".concat(activeTab === idx ? 'qbs-tab-active-item' : ''), onClick: function () {
+                            handleTabClick(idx);
+                        } }, { children: item.label })) }), "tab-".concat(idx)));
+            }) })));
+    }, [tab, hasSelectedItemsInTab, activeTab, handleTabClick]);
+    var handleSelectAll = (0, react_1.useCallback)(function () {
+        if (isMultiple) {
+            if (selectAll) {
+                // Remove only items from current tab
+                setSelectedItems(function (prev) {
+                    return prev.filter(function (item) {
+                        return item.tabId !== currentTabId ||
+                            !filteredData.some(function (f) {
+                                return (0, getKeyValue_1.getKeyValue)(f, descId, 'id') === (0, getKeyValue_1.getKeyValue)(item, descId, 'id');
+                            });
+                    });
+                });
+            }
+            else {
+                // Add only items from current tab - batch all updates in single setState
+                setSelectedItems(function (prev) {
+                    var newItems = [];
+                    var currentTabId = tab.length > 0 ? tab[activeTab].id : undefined;
+                    filteredData.forEach(function (suggestion) {
+                        var isAdded = prev.some(function (item) {
+                            return (0, getKeyValue_1.getKeyValue)(item, descId, 'id') ===
+                                (0, getKeyValue_1.getKeyValue)(suggestion, descId, 'id');
+                        });
+                        if (!isAdded) {
+                            // Include tab ID when adding suggestion
+                            var suggestionWithTabId = __assign(__assign({}, suggestion), { tabId: currentTabId });
+                            newItems.push(suggestionWithTabId);
+                        }
+                    });
+                    return __spreadArray(__spreadArray([], prev, true), newItems, true);
+                });
+            }
+        }
+    }, [isMultiple, selectAll, currentTabId, filteredData, descId, tab, activeTab]);
+    var handleOpenDropdown = function (e) {
+        if (!suggestions || (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) === 0 || refetchData) {
+            if (autoDropdown && (inputValue === '' || inputValue.trim() === '')) {
+                if (tabInlineSearch && tab.length > 0) {
+                    var activeTabVal = tab.length > 0 ? tab === null || tab === void 0 ? void 0 : tab[activeTab].id : undefined;
+                    handlePickSuggestions('*', 1, false, activeTabVal);
+                }
+                else {
+                    handlePickSuggestions('*', 1);
+                }
+                setRefetchData(false);
+                setAllDataLoaded(true);
+            }
+            else if (!refetchData && inputValue !== '') {
+                if (tabInlineSearch && tab.length > 0) {
+                    var activeTabVal = tab.length > 0 ? tab === null || tab === void 0 ? void 0 : tab[activeTab].id : undefined;
+                    handlePickSuggestions(inputValue, 1, false, activeTabVal);
+                }
+                else {
+                    handlePickSuggestions(inputValue, 1);
+                }
+                setRefetchData(true);
+                setAllDataLoaded(false);
+            }
+        }
+    };
+    (0, react_1.useEffect)(function () {
+        var allSelected = (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 && (filteredSelectedItems === null || filteredSelectedItems === void 0 ? void 0 : filteredSelectedItems.length) > 0 &&
+            filteredData.every(function (item) {
+                return filteredSelectedItems === null || filteredSelectedItems === void 0 ? void 0 : filteredSelectedItems.some(function (s) {
+                    return (0, getKeyValue_1.getKeyValue)(s, descId, 'id') === (0, getKeyValue_1.getKeyValue)(item, descId, 'id');
+                });
+            });
+        setSelectAll(allSelected);
+    }, [filteredData, filteredSelectedItems, descId]);
+    (0, react_1.useEffect)(function () {
+        handleUpdateParent === null || handleUpdateParent === void 0 ? void 0 : handleUpdateParent(dropOpen, dropLevelRef.current);
+    }, [dropOpen, dropLevelRef.current]);
+    // Auto-focus search input when dropdown opens with tabInlineSearch
+    (0, react_1.useEffect)(function () {
+        if (dropOpen && visible && tabInlineSearch && type === 'auto_suggestion' && !expandable) {
+            // Small delay to ensure the dropdown is fully rendered
+            setTimeout(function () {
+                if (inputSearchRef.current) {
+                    inputSearchRef.current.focus();
+                }
+            }, 50);
+        }
+    }, [dropOpen, visible, tabInlineSearch, type, expandable]);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: dropOpen &&
+            react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)("div", __assign({ ref: dropRef, style: __assign(__assign({}, dropdownStyle), { minHeight: viewMode ? 100 : 192, visibility: visible ? 'visible' : 'hidden', opacity: visible ? 1 : 0, transition: 'opacity 0.2s ease-in-out' }), className: "qbs-autocomplete-suggestions qbs-autocomplete-selected-suggestions ".concat(viewMode ? 'qbs-dropdown-selected-preview' : '', " ").concat(viewMode && (filteredSelectedItems === null || filteredSelectedItems === void 0 ? void 0 : filteredSelectedItems.length) === 0 ? 'hidden' : '') }, { children: [!viewMode && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: tab.length > 0 && getTabItems() }), type === 'auto_suggestion' &&
+                                !expandable &&
+                                tabInlineSearch && ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { position: 'relative' }, className: "react-core-ts-search-container qbs-autocomplete-selected-suggestions-outer" }, { children: [(0, jsx_runtime_1.jsx)("span", __assign({ className: "dropdown-search-icon" }, { children: (0, jsx_runtime_1.jsx)(icons_1.Search, {}) })), (0, jsx_runtime_1.jsx)("input", { className: "dropdown-search-input", onChange: handleSuggestionChange, value: searchValue, placeholder: "Type to search", autoComplete: "off", ref: inputSearchRef }), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: autoDropdown && !disabled && !readOnly && ((0, jsx_runtime_1.jsx)("button", __assign({ disabled: disabled !== null && disabled !== void 0 ? disabled : readOnly, onClick: function (e) { return handleOpenDropdown(e); }, className: "text-[#667085] focus-visible:outline-slate-100 absolute right-2 qbs-all-dropdown-btn", "data-testid": "drop-arrow", type: "button", id: "autocomplete-drop-icon", ref: dropBtnRef }, { children: (0, jsx_runtime_1.jsx)(icons_1.AllDropArrow, { type: !allDataLoaded ? 'down' : 'up', uniqueId: "all-dropdow-arrow-icon", className: "all-dropdow-arrow-icon" }) }))) })] })))] })), (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 && enableSelectAll && isMultiple && ((0, jsx_runtime_1.jsx)("div", __assign({ id: "select-all", className: "qbs-select-all-link qbs-cursor-pointer qbs-text-xs", onClick: handleSelectAll }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "qbs-autocomplete-listitem-container qbs-autocomplete-checkbox-container" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "qbs-autocomplete-checkbox" }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: selectAll, id: "qbs-checkbox-all" }), (0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: "qbs-checkbox-all" }, { children: (0, jsx_runtime_1.jsx)("svg", __assign({ width: "8", height: "6", viewBox: "0 0 8 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M0 3.21739L2.89883 6L8 1.06994L6.89494 0L2.89883 3.86768L1.09728 2.14745L0 3.21739Z", fill: "white" }) })) }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "qbs-autocomplete-suggestions-item" }, { children: "Select All" }))] })) }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "qbs-autocomplete-suggestions-sub qbs-autocomplete-selected-suggestions-outer ".concat(viewMode ? 'hidden' : ''), ref: itemsRef, style: {
+                            maxHeight: "".concat(selHeight, "px"),
+                            minHeight: "".concat(selHeight, "px"),
+                        } }, { children: [(filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 ? (filteredData.map(function (suggestion, idx) { return ((0, jsx_runtime_1.jsx)(DropdownList_1.default, { idx: idx, suggestion: suggestion, isSelected: isSelected, handleSuggestionClick: function () {
+                                    return handleSuggestionClick(suggestion, idx);
+                                }, handleMultiSelect: handleMultiSelect, selected: selected, isMultiple: isMultiple, singleSelect: singleSelect, desc: desc, shortCode: shortCode, labelCode: labelCode, focusedIndex: focusedIndex, setItemRef: function (index, ref) {
+                                    itemRefs.current[index] = ref; // Store each ref properly
+                                } }, suggestion[descId])); })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isLoading ||
+                                    (searchValue !== searchOldValue &&
+                                        searchValue !== '' &&
+                                        async) ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "qbs-flex qbs-align-middle qbs-justify-center qbs-min-emp-h" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "qbs-pt-16 qbs-autocomplete-loader" }, { children: (0, jsx_runtime_1.jsx)(icons_1.Spinner, {}) })) }))) : ((0, jsx_runtime_1.jsx)("div", __assign({ className: "qbs-autocomplete-notfound qbs-text-center qbs-justify-center qbs-align-middle qbs-min-emp-h" }, { children: searchValue !== ''
+                                        ? notDataMessage !== null && notDataMessage !== void 0 ? notDataMessage : 'No Results Found'
+                                        : initialDataMessage !== null && initialDataMessage !== void 0 ? initialDataMessage : 'Type to search' }))) })), paginationEnabled &&
+                                nextBlock !== 0 &&
+                                nextBlock !== undefined &&
+                                (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "loadMoreSection", onClick: function () { return handleLoadMore(); } }, { children: (0, jsx_runtime_1.jsx)("p", __assign({ style: { margin: 2 } }, { children: "Load More" })) })))] })), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: countOnly && (filteredSelectedItems === null || filteredSelectedItems === void 0 ? void 0 : filteredSelectedItems.length) > 0 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "qbs-expandable-container qbs-dropdown-selected-container", ref: dropdownSelectedRef }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "qbs-flex qbs-w-full qbs-text-xs" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "qbs-selected-lbs qbs-flex-grow" }, { children: "Selected Items" })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "qbs-clear-link qbs-text-right qbs-cursor-pointer ".concat(viewMode ? 'hidden' : ''), onClick: handleClearSelected }, { children: "Clear all" })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "qbs-done-link qbs-text-right qbs-cursor-pointer ".concat(viewMode ? 'hidden' : ''), onClick: function () {
+                                                    setDropOpen(false);
+                                                } }, { children: "Done" }))] })), getSelectedItems(true), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (filteredSelectedItems === null || filteredSelectedItems === void 0 ? void 0 : filteredSelectedItems.length) > itemCount &&
+                                            showAllSelected && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "qbs-readmore-collapse" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "qbs-more-collapse", onClick: function () {
+                                                    handleCollapseArrowClick();
+                                                } }, { children: (0, jsx_runtime_1.jsx)(icons_1.DropArrow, { className: "icon-button-rotate", uniqueDropArrowId: uniqueDropArrowId }) })) }))) })] })) })) })] })), document.body) }));
+});
+exports.default = react_1.default.memo(DropdownFilterTabs);
+//# sourceMappingURL=dropdownFilterTabs.js.map