@megha-ui/react 1.3.129 → 1.3.131

package/dist/components/dropdown/index.d.ts

@@ -61,6 +61,7 @@ interface DropdownProps {
     isCreatable?: boolean;
     onCreate?: (value: string) => void;
     isGrouping?: boolean;
+    collapseAllGroups?: boolean;
     isIcon?: boolean;
     withValue?: boolean;
 }

package/dist/components/dropdown/index.js

@@ -8,7 +8,7 @@ import Text from "../text";
 import Button from "../button";
 import { HiChevronDown } from "react-icons/hi";
 import { FaChevronDown, FaChevronUp } from "react-icons/fa";
-const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select...", isMultiple = false, isSelectAll = false, className, style, labelAlignment = "vertical", labelFontSize, labelFontWeight, labelMarginBottom, labelClass, asteriskColor, label, disabled = false, width, searchEnabled = true, dropdownListWidth, marginBottom, marginTop, marginRight, marginLeft, required, dropdownListBG, searchBorderColor = "#2377ba", maxDropdownHeight, border = "1px solid #dbdfe9", selectedCharLength = 0, menuFrom = "left", Tooltip, DropDownIcon, onMenuClose, onMenuOpen, isClear, ClearIcon, clearId, selectedDisplay, checkboxWrapper, isSort = true, onSelectChange, isLoading = false, onApplyChange, withTooltip = false, isCreatable = false, onCreate = () => { }, autoPosition = true, compactDisplay = false, ultraCompactDisplay = false, isGrouping = false, isIcon = false, withValue = false, closeOnSelect = true, }) => {
+const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select...", isMultiple = false, isSelectAll = false, className, style, labelAlignment = "vertical", labelFontSize, labelFontWeight, labelMarginBottom, labelClass, asteriskColor, label, disabled = false, width, searchEnabled = true, dropdownListWidth, marginBottom, marginTop, marginRight, marginLeft, required, dropdownListBG, searchBorderColor = "#2377ba", maxDropdownHeight, border = "1px solid #dbdfe9", selectedCharLength = 0, menuFrom = "left", Tooltip, DropDownIcon, onMenuClose, onMenuOpen, isClear, ClearIcon, clearId, selectedDisplay, checkboxWrapper, isSort = true, onSelectChange, isLoading = false, onApplyChange, withTooltip = false, isCreatable = false, onCreate = () => { }, autoPosition = true, compactDisplay = false, ultraCompactDisplay = false, isGrouping = false, collapseAllGroups = false, isIcon = false, withValue = false, closeOnSelect = true, }) => {
     var _a, _b, _c;
     const { density } = useDensity();
     const [isOpen, setIsOpen] = useState(false);
@@ -27,7 +27,7 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
         left: 0,
         top: "100%",
     });
-    const [collapsed, setCollapsed] = useState("");
+    const [collapsed, setCollapsed] = useState([]);
     const [height, setHeight] = useState(0);
     const getLayoutBoundaryParent = (element) => {
         if (!element)
@@ -224,6 +224,13 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
             setGroupedOptions(grouped);
         }
     }, [searchTerm, options, isSort, isGrouping]);
+    useEffect(() => {
+        if (!isGrouping)
+            return;
+        if (collapseAllGroups && groupedOptions.length > 0) {
+            setCollapsed(groupedOptions.map((group) => group.groupedValue));
+        }
+    }, [collapseAllGroups, groupedOptions, isGrouping]);
     const handleSelect = (value, isDisabled) => {
         if (isDisabled)
             return;
@@ -449,22 +456,22 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
                                                 display: "flex",
                                                 alignItems: "center",
                                                 gap: "0.5rem",
-                                            }, onClick: () => setCollapsed(collapsed === groupOption.groupedValue
-                                                ? ""
-                                                : groupOption.groupedValue), children: [_jsx("div", { className: "flex items-center justify-center", style: {
+                                            }, onClick: () => setCollapsed((prev) => prev.includes(groupOption.groupedValue)
+                                                ? prev.filter((item) => item !== groupOption.groupedValue)
+                                                : [...prev, groupOption.groupedValue]), children: [_jsx("div", { className: "flex items-center justify-center", style: {
                                                         background: "rgb(222, 222, 222)",
                                                         borderRadius: "0.25rem",
                                                         cursor: "pointer",
                                                         flexGrow: 0,
                                                         flexShrink: 0,
                                                         padding: "0.25rem",
-                                                    }, children: collapsed === groupOption.groupedValue ? (_jsx(FaChevronUp, { style: {
+                                                    }, children: collapsed.includes(groupOption.groupedValue) ? (_jsx(FaChevronUp, { style: {
                                                             height: "0.85rem",
                                                             width: "0.85rem",
                                                         } })) : (_jsx(FaChevronDown, { style: {
                                                             height: "0.85rem",
                                                             width: "0.85rem",
-                                                        } })) }), _jsx("span", { children: groupOption.groupedValue })] }), collapsed === groupOption.groupedValue ? null : (_jsx(_Fragment, { children: groupOption.options.map((option, index) => {
+                                                        } })) }), _jsx("span", { children: groupOption.groupedValue })] }), collapsed.includes(groupOption.groupedValue) ? null : (_jsx(_Fragment, { children: groupOption.options.map((option, index) => {
                                                 let prevOptions = groupedOptions.filter((item, index) => index < gIndex);
                                                 prevOptions = [
                                                     ...prevOptions.map((item) => item.options),

package/dist/components/grid/utils/newGridHeader.js

@@ -201,7 +201,6 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
     const handleSelect = (value, columnKey, columnData) => {
         var _a;
         let _uniqueSeach = {};
-        console.log({ value, columnKey, columnData, uniqueSearch });
         if (value === "all") {
             if (((_a = uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[columnKey]) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
                 uniqueSearch[columnKey].every((item) => columnData.includes(item))) {
@@ -221,8 +220,8 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
             _uniqueSeach = Object.assign(Object.assign({}, uniqueSearch), { [columnKey]: newValueArray });
             setUniqueSearch(_uniqueSeach);
         }
+        console.log({ _uniqueSeach, columnKey }); // --- IGNORE ---
         onFilter(_uniqueSeach, columnKey);
-        setActiveSearchColumn((current) => current === columnKey ? null : current);
     };
     const menuOptions = [{ label: "Group by", groupBy: setGroupBy }];
     const searchOptions = [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megha-ui/react",
-  "version": "1.3.129",
+  "version": "1.3.131",
   "description": "A collection of reusable UI components for React applications, built with TypeScript.",
   "main": "./dist/index.js",
   "module": "./dist/index.js",