@megha-ui/react 1.2.600 → 1.2.602

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

@@ -13,6 +13,7 @@ interface DropdownProps {
     options: DropdownOption[];
     selectedValues: (string | number | any)[];
     labelClass?: string;
+    labelAlignment?: "vertical" | "horizontal";
     onChange: (values: (string | number)[]) => void;
     closeOnSelect?: boolean;
     placeholder?: string;

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, labelFontSize, labelFontWeight, labelMarginBottom, labelClass, asteriskColor, label, disabled = false, width, searchEnabled = true, dropdownListWidth, marginBottom, marginTop, marginRight, marginLeft, required, dropdownListBG, searchBorderColor = "#2377ba", maxDropdownHeight = "12rem", 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 = false, 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 = "12rem", 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 = false, compactDisplay = false, ultraCompactDisplay = false, isGrouping = false, isIcon = false, withValue = false, closeOnSelect = true, }) => {
     var _a, _b;
     const { density } = useDensity();
     const [isOpen, setIsOpen] = useState(false);
@@ -320,6 +320,8 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
             marginTop,
             marginRight,
             marginLeft,
+            display: "flex",
+            flexDirection: labelAlignment === "horizontal" ? "row" : "column",
         }, children: [label && (_jsxs("p", { style: labelStyle, className: labelClass, children: [label, required && _jsx("span", { style: asteriskStyle, children: " *" })] })), _jsxs("div", { ref: wrapperRef, className: `${className}`, style: Object.assign(Object.assign(Object.assign({ border, borderRadius: 4 }, (isIcon ? {} : { padding: "0 0.5rem" })), { alignItems: "center", display: "flex", minHeight: `var(--control-min-height, ${ultraCompactDisplay
                         ? "1.5rem"
                         : compactDisplay

package/dist/components/grid/index.js

@@ -1399,13 +1399,12 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
                                 options = [...new Set(options)];
                                 if (!column.hidden) {
                                     return (_jsx("div", { style: {
-                                            position: "relative",
                                             width: "18rem",
                                             marginLeft: "0.75rem",
                                         }, children: _jsx(Dropdown, { options: options.map((option) => ({
                                                 label: option,
                                                 value: option,
-                                            })), label: column.label, placeholder: "Select", selectedValues: selectedValues, onChange: (selected) => {
+                                            })), labelAlignment: "horizontal", labelClass: "ml-2", label: column.label, placeholder: "Select", selectedValues: selectedValues, onChange: (selected) => {
                                                 if (column.fixedFilter !== "multi-select") {
                                                     const values = selected
                                                         .filter((item) => item)
@@ -1427,7 +1426,7 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
                                                             updateFixedFilterValues(updatedValues);
                                                     }
                                                 }
-                                                : undefined, isSort: column.fixedFilterOrder ? false : undefined, isClear: true, searchEnabled: true, dropdownListWidth: "max-content", className: "h-8 mt-2", isMultiple: column.fixedFilter === "multi-select" }) }, column.key));
+                                                : undefined, isSort: column.fixedFilterOrder ? false : undefined, isClear: true, searchEnabled: true, dropdownListWidth: "max-content", className: "h-8 mt-2 flex-1", isMultiple: column.fixedFilter === "multi-select" }) }, column.key));
                                 }
                                 return null;
                             }), isSummarise && (_jsx("div", { onClick: () => setSummariseAvailable((prev) => !prev), style: {

package/package.json

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