@megha-ui/react 1.3.130 → 1.3.132

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/tabs/index.js

@@ -14,7 +14,6 @@ export const Tabs = ({ children, defaultActive, className, type = "horizontal",
                 flexDirection: type === "vertical" ? "row" : "column",
                 width: "100%",
                 height: "100%",
-                gap: "1rem",
                 borderRadius: "0.5rem",
                 overflow: "hidden",
             }, children: children }) }));
@@ -46,7 +45,7 @@ export const Tab = ({ label, description, tabNumber }) => {
             cursor: "pointer",
             border: "none",
             textAlign: "left",
-            width: "100%",
+            width: type === "vertical" ? "100%" : "max-content",
             marginBottom: "0.25rem",
             borderRadius: "0.25rem",
             display: "flex",
@@ -61,10 +60,7 @@ export const Tab = ({ label, description, tabNumber }) => {
                         borderRadius: "0.35rem",
                         minWidth: "1.75rem",
                         textAlign: "center",
-                    }, className: "shadow-md", children: tabNumber })), _jsxs("div", { style: {
-                        display: "flex",
-                        flexDirection: "column",
-                    }, children: [_jsx("span", { style: { fontWeight: 500, fontSize: "1rem" }, children: label }), showTabDescription && description && (_jsx("span", { style: {
+                    }, className: "shadow-md", children: tabNumber })), _jsxs("div", { style: Object.assign({ display: "flex", flexDirection: "column" }, (!showTabNumber && isActive ? { borderBottom: "3px solid var(--brand)" } : {})), children: [_jsx("span", { style: { fontWeight: 500, fontSize: "1rem" }, children: label }), showTabDescription && description && (_jsx("span", { style: {
                                 color: "var(--foreground)",
                                 fontWeight: 400,
                                 fontSize: "0.85rem",

package/package.json

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