@megha-ui/react 1.2.182 → 1.2.184

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

@@ -37,9 +37,8 @@ interface DropdownProps {
     border?: string;
     selectedCharLength?: number;
     menuFrom?: string;
-    /**
-     * Automatically position the dropdown above or below based on available viewport space
-     */
+    compactDisplay?: boolean;
+    ultraCompactDisplay?: boolean;
     autoPosition?: boolean;
     Tooltip?: any;
     DropDownIcon?: any;

package/dist/components/dropdown/index.js

@@ -1,13 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
+import { useDensity } from "../../context/DensityContext";
 import Checkbox from "../checkbox";
 import Loader from "../loader";
 import Block from "../block";
 import Text from "../text";
 import Button from "../button";
 import { HiChevronDown } from "react-icons/hi";
-const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select...", isMultiple = false, isSelectAll = false, className, style, labelFontSize, labelFontWeight, labelMarginBottom, 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, isClear, ClearIcon, clearId, selectedDisplay, checkboxWrapper, isSort = true, onSelectChange, isLoading = false, onApplyChange, withTooltip = false, isCreatable = false, onCreate = () => { }, autoPosition = false, }) => {
+const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select...", isMultiple = false, isSelectAll = false, className, style, labelFontSize, labelFontWeight, labelMarginBottom, 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, isClear, ClearIcon, clearId, selectedDisplay, checkboxWrapper, isSort = true, onSelectChange, isLoading = false, onApplyChange, withTooltip = false, isCreatable = false, onCreate = () => { }, autoPosition = false, compactDisplay = false, ultraCompactDisplay = false, }) => {
     var _a, _b;
+    const { density } = useDensity();
     const [isOpen, setIsOpen] = useState(false);
     const [searchTerm, setSearchTerm] = useState("");
     const [filteredOptions, setFilteredOptions] = useState(options);
@@ -289,7 +291,15 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
             marginTop,
             marginRight,
             marginLeft,
-        }, children: [label && (_jsxs("p", { style: labelStyle, children: [label, required && _jsx("span", { style: asteriskStyle, children: " *" })] })), _jsxs("div", { ref: wrapperRef, className: `${className}`, style: Object.assign({ border, borderRadius: 4, padding: "0 0.5rem", alignItems: "center", display: "flex", minHeight: "1.5rem", position: "relative" }, style), children: [_jsxs("div", { style: {
+        }, children: [label && (_jsxs("p", { style: labelStyle, children: [label, required && _jsx("span", { style: asteriskStyle, children: " *" })] })), _jsxs("div", { ref: wrapperRef, className: `${className}`, style: Object.assign({ border, borderRadius: 4, padding: "0 0.5rem", alignItems: "center", display: "flex", minHeight: `var(--control-min-height, ${ultraCompactDisplay
+                        ? "1.5rem"
+                        : compactDisplay
+                            ? "2rem"
+                            : density === "ultra-compact"
+                                ? "1.5rem"
+                                : density === "compact"
+                                    ? "2rem"
+                                    : "2.5rem"})`, position: "relative" }, style), children: [_jsxs("div", { style: {
                             display: "flex",
                             alignItems: "center",
                             justifyContent: "space-between",

package/dist/context/DensityContext.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export type DensityMode = "normal" | "compact" | "ultra-compact";
+type DensityContextValue = {
+    density: DensityMode;
+    setDensity: (d: DensityMode) => void;
+};
+export declare const DensityProvider: React.FC<{
+    initialDensity?: DensityMode;
+    children: React.ReactNode;
+}>;
+export declare const useDensity: () => DensityContextValue;
+export {};

package/dist/context/DensityContext.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useState } from "react";
+const DensityContext = createContext({
+    density: "normal",
+    setDensity: () => { },
+});
+export const DensityProvider = ({ initialDensity = "normal", children }) => {
+    const [density, setDensity] = useState(initialDensity);
+    const value = useMemo(() => ({ density, setDensity }), [density]);
+    return _jsx(DensityContext.Provider, { value: value, children: children });
+};
+export const useDensity = () => useContext(DensityContext);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megha-ui/react",
-  "version": "1.2.182",
+  "version": "1.2.184",
   "description": "A collection of reusable UI components for React applications, built with TypeScript.",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -8,7 +8,10 @@
   "scripts": {
     "build": "tsc",
     "prepublishOnly": "npm run build",
-    "test": "jest"
+    "test": "jest",
+    "release:patch": "npm version patch && npm publish --access public",
+    "release:minor": "npm version minor && npm publish --access public",
+    "release:major": "npm version major && npm publish --access public"
   },
   "repository": {
     "type": "git",