@megha-ui/react 1.2.170 → 1.2.171

package/dist/components/block/index.js

@@ -1,4 +1,3 @@
-"use strict";
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -10,8 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
+import { jsx as _jsx } from "react/jsx-runtime";
 const Block = (_a) => {
     var { color, backgroundColor, fontSize, fontWeight, fontStyle, textAlign, textTransform, paddingTop, paddingRight, paddingBottom, paddingLeft, marginTop, marginRight, marginBottom, marginLeft, className, onClick, children, as = "div", style, position, display, alignItems, alignContent, alignSelf, justifyContent, justifyItems, justifySelf, width, maxWidth, minWidth, height, minHeight, maxHeight, zIndex, borderRadius, borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius, flexDirection, cursor, overflow, borderTopWidth, borderTopColor, borderTopStyle, borderColor, border, borderWidth, borderStyle, borderBottom, borderTop, borderLeft, borderRight, borderBottomColor, borderBottomStyle, borderBottomWidth, borderLeftColor, borderLeftStyle, borderLeftWidth, borderRightColor, borderRightStyle, borderRightWidth, boxShadow, opacity, transform, transition, animation, gridTemplateColumns, gridTemplateRows, gridColumnGap, gridRowGap, gridColumn, gridRow, flexWrap, flexGrow, flexShrink, order } = _a, props = __rest(_a, ["color", "backgroundColor", "fontSize", "fontWeight", "fontStyle", "textAlign", "textTransform", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "marginTop", "marginRight", "marginBottom", "marginLeft", "className", "onClick", "children", "as", "style", "position", "display", "alignItems", "alignContent", "alignSelf", "justifyContent", "justifyItems", "justifySelf", "width", "maxWidth", "minWidth", "height", "minHeight", "maxHeight", "zIndex", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "flexDirection", "cursor", "overflow", "borderTopWidth", "borderTopColor", "borderTopStyle", "borderColor", "border", "borderWidth", "borderStyle", "borderBottom", "borderTop", "borderLeft", "borderRight", "borderBottomColor", "borderBottomStyle", "borderBottomWidth", "borderLeftColor", "borderLeftStyle", "borderLeftWidth", "borderRightColor", "borderRightStyle", "borderRightWidth", "boxShadow", "opacity", "transform", "transition", "animation", "gridTemplateColumns", "gridTemplateRows", "gridColumnGap", "gridRowGap", "gridColumn", "gridRow", "flexWrap", "flexGrow", "flexShrink", "order"]);
     const Element = as;
@@ -91,6 +89,6 @@ const Block = (_a) => {
         flexShrink,
         order,
     };
-    return ((0, jsx_runtime_1.jsx)(Element, Object.assign({ style: Object.assign(Object.assign({}, computedStyle), style), className: className, onClick: onClick }, props, { children: children })));
+    return (_jsx(Element, Object.assign({ style: Object.assign(Object.assign({}, computedStyle), style), className: className, onClick: onClick }, props, { children: children })));
 };
-exports.default = Block;
+export default Block;

package/dist/components/button/index.js

@@ -1,6 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Button = ({ text, color, icon, fontSize, fontWeight, onClick, gap = "0.5rem", borderWidth = 1, borderColor, borderRadius = "0.25rem", border = true, backgroundColor, borderStyle = "solid", cursor = "pointer", type, width, paddingBottom = "0.35rem", paddingLeft = "0.65rem", paddingRight = "0.65rem", paddingTop = "0.35rem", marginBottom, marginLeft, marginRight, marginTop, disabled = false, style, className, iconPosition = "before", textEleClass = "", }) => {
     const buttonStyle = Object.assign({ color,
         fontSize,
@@ -13,6 +11,6 @@ const Button = ({ text, color, icon, fontSize, fontWeight, onClick, gap = "0.5re
         marginLeft,
         marginRight,
         marginTop }, style);
-    return ((0, jsx_runtime_1.jsxs)("button", { style: buttonStyle, onClick: disabled ? undefined : onClick, type: type, className: className, disabled: disabled, children: [iconPosition !== "after" && icon, (0, jsx_runtime_1.jsx)("span", { className: textEleClass, children: text }), iconPosition === "after" && icon] }));
+    return (_jsxs("button", { style: buttonStyle, onClick: disabled ? undefined : onClick, type: type, className: className, disabled: disabled, children: [iconPosition !== "after" && icon, _jsx("span", { className: textEleClass, children: text }), iconPosition === "after" && icon] }));
 };
-exports.default = Button;
+export default Button;

package/dist/components/button/types/borderStyle.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/dist/components/button/types/cursorType.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/dist/components/card/index.js

@@ -1,7 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
 const Card = ({ header, content, footer, className, borderRadius = "0.5rem", width, height = "100%", paddingTop, paddingBottom, paddingLeft, paddingRight, maxWidth, }) => {
     const cardStyle = {
         paddingTop,
@@ -13,9 +11,9 @@ const Card = ({ header, content, footer, className, borderRadius = "0.5rem", wid
         borderRadius,
         maxWidth,
     };
-    const [removalHeight, setRemovalHeight] = (0, react_1.useState)("0px");
-    const cardRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
+    const [removalHeight, setRemovalHeight] = useState("0px");
+    const cardRef = useRef(null);
+    useEffect(() => {
         var _a, _b;
         const headerEle = (_a = cardRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("#header");
         const footerEle = (_b = cardRef.current) === null || _b === void 0 ? void 0 : _b.querySelector("#foooter");
@@ -31,6 +29,6 @@ const Card = ({ header, content, footer, className, borderRadius = "0.5rem", wid
             setRemovalHeight(`${_removalHeight}px`);
         }
     }, [header, footer]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: cardRef, className: `wk-card ${className}`, style: cardStyle, children: [header && ((0, jsx_runtime_1.jsx)("div", { id: "header", className: "wk-card-header", children: header })), (0, jsx_runtime_1.jsx)("div", { className: "wk-card-content", style: { height: `calc(100% - ${removalHeight})`, overflow: "auto" }, children: content }), footer && ((0, jsx_runtime_1.jsx)("div", { id: "footer", className: "wk-card-footer", children: footer }))] }));
+    return (_jsxs("div", { ref: cardRef, className: `wk-card ${className}`, style: cardStyle, children: [header && (_jsx("div", { id: "header", className: "wk-card-header", children: header })), _jsx("div", { className: "wk-card-content", style: { height: `calc(100% - ${removalHeight})`, overflow: "auto" }, children: content }), footer && (_jsx("div", { id: "footer", className: "wk-card-footer", children: footer }))] }));
 };
-exports.default = Card;
+export default Card;

package/dist/components/checkbox/index.js

@@ -1,10 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
 const Checkbox = ({ onChange, disabled, wrapperClass, name, width, noLabel, label, value, labelMargin, style, indeterminate, selected = false, }) => {
-    const checkboxWrapper = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
+    const checkboxWrapper = useRef(null);
+    useEffect(() => {
         let checkbox = null;
         if (checkboxWrapper.current) {
             checkbox = checkboxWrapper.current.querySelector("#checkbox");
@@ -16,16 +14,16 @@ const Checkbox = ({ onChange, disabled, wrapperClass, name, width, noLabel, labe
             checkbox.indeterminate = false;
         }
     }, [indeterminate]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: checkboxWrapper, className: wrapperClass, style: style, children: (0, jsx_runtime_1.jsxs)("label", { style: {
+    return (_jsx("div", { ref: checkboxWrapper, className: wrapperClass, style: style, children: _jsxs("label", { style: {
                 width: width,
                 display: "inline-flex",
                 alignItems: "center",
                 margin: labelMargin,
-            }, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", id: "checkbox", name: name, value: value, checked: selected, disabled: disabled, onChange: (event) => onChange(event.target.checked) }), (0, jsx_runtime_1.jsx)("span", { style: {
+            }, children: [_jsx("input", { type: "checkbox", id: "checkbox", name: name, value: value, checked: selected, disabled: disabled, onChange: (event) => onChange(event.target.checked) }), _jsx("span", { style: {
                         marginRight: !noLabel ? "0.5rem" : "",
                         display: "flex",
                         alignItems: "center",
                         justifyContent: "center",
                     } }), !noLabel ? label : ""] }) }));
 };
-exports.default = Checkbox;
+export default Checkbox;

package/dist/components/date-input/index.js

@@ -1,7 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 const DateInput = ({ value = "", onChange, placeholder, min, max, className, width = "100%", disabled = false, padding = "0.5rem", borderRadius = "0.25rem", fontSize = "1rem", height = "2.5rem", labelFontSize, labelFontWeight, labelMarginBottom, asteriskColor, label, required, isValid, validationErrorColor = "red", validationSuccessColor = "green", border = "1px solid var(--form-border-color, #dbdfe9)", }) => {
     const dateInputStyle = {
         width,
@@ -15,8 +13,8 @@ const DateInput = ({ value = "", onChange, placeholder, min, max, className, wid
         display: "block",
         fontFamily: "var(--font-family)",
     };
-    const [focused, setFocused] = (0, react_1.useState)(false);
-    const [error, setError] = (0, react_1.useState)(null);
+    const [focused, setFocused] = useState(false);
+    const [error, setError] = useState(null);
     const inputWrapperStyle = {
         display: "flex",
         alignItems: "center",
@@ -50,6 +48,6 @@ const DateInput = ({ value = "", onChange, placeholder, min, max, className, wid
             setError(null);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", flexDirection: "column" }, children: [label && ((0, jsx_runtime_1.jsxs)("p", { style: labelStyle, children: [label, required && (0, jsx_runtime_1.jsx)("span", { style: asteriskStyle, children: " *" })] })), (0, jsx_runtime_1.jsx)("div", { style: inputWrapperStyle, className: `${className} custom-border`, children: (0, jsx_runtime_1.jsx)("input", { type: "date", value: value, onChange: handleDateChange, onBlur: handleBlur, placeholder: placeholder, min: min, max: max, style: dateInputStyle, className: className, disabled: disabled }) })] }));
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [label && (_jsxs("p", { style: labelStyle, children: [label, required && _jsx("span", { style: asteriskStyle, children: " *" })] })), _jsx("div", { style: inputWrapperStyle, className: `${className} custom-border`, children: _jsx("input", { type: "date", value: value, onChange: handleDateChange, onBlur: handleBlur, placeholder: placeholder, min: min, max: max, style: dateInputStyle, className: className, disabled: disabled }) })] }));
 };
-exports.default = DateInput;
+export default DateInput;

package/dist/components/dropdown/index.js

@@ -1,28 +1,23 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const checkbox_1 = __importDefault(require("../checkbox"));
-const loader_1 = __importDefault(require("../loader"));
-const block_1 = __importDefault(require("../block"));
-const text_1 = __importDefault(require("../text"));
-const button_1 = __importDefault(require("../button"));
-const hi_1 = require("react-icons/hi");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+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, }) => {
     var _a, _b;
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    const [searchTerm, setSearchTerm] = (0, react_1.useState)("");
-    const [filteredOptions, setFilteredOptions] = (0, react_1.useState)(options);
-    const wrapperRef = (0, react_1.useRef)(null);
-    const clearIconRef = (0, react_1.useRef)(null);
-    const searchInputRef = (0, react_1.useRef)(null);
-    const optionRefs = (0, react_1.useRef)([]);
-    const [highlightIndex, setHighlightIndex] = (0, react_1.useState)(0);
-    const [intermediateValues, setIntermediateValues] = (0, react_1.useState)(selectedValues);
-    const [clickStyle, setClickStyle] = (0, react_1.useState)({
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchTerm, setSearchTerm] = useState("");
+    const [filteredOptions, setFilteredOptions] = useState(options);
+    const wrapperRef = useRef(null);
+    const clearIconRef = useRef(null);
+    const searchInputRef = useRef(null);
+    const optionRefs = useRef([]);
+    const [highlightIndex, setHighlightIndex] = useState(0);
+    const [intermediateValues, setIntermediateValues] = useState(selectedValues);
+    const [clickStyle, setClickStyle] = useState({
         left: 0,
         top: "100%",
     });
@@ -42,10 +37,10 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
             setClickStyle({ left: 0, top: "100%" });
         }
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         setIntermediateValues(selectedValues);
     }, [selectedValues]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         var _a;
         if (isOpen && searchEnabled) {
             (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -54,18 +49,18 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
             setHighlightIndex(0);
         }
     }, [isOpen, searchEnabled]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (isOpen) {
             setHighlightIndex(0);
         }
     }, [filteredOptions, isOpen]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         var _a;
         if (isOpen && optionRefs.current[highlightIndex]) {
             (_a = optionRefs.current[highlightIndex]) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: "nearest" });
         }
     }, [highlightIndex, isOpen]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         function handleClickOutside(event) {
             if (wrapperRef.current &&
                 !wrapperRef.current.contains(event.target)) {
@@ -81,7 +76,7 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
         document.addEventListener("mousedown", handleClickOutside);
         return () => document.removeEventListener("mousedown", handleClickOutside);
     }, [selectedValues, onApplyChange, onMenuClose]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         const handleKeyDown = (e) => {
             if (!isOpen)
                 return;
@@ -111,7 +106,7 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
         window.addEventListener("keydown", handleKeyDown);
         return () => window.removeEventListener("keydown", handleKeyDown);
     }, [isOpen, filteredOptions, highlightIndex]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (menuFrom !== "left") {
             if (menuFrom === "top") {
                 setClickStyle({
@@ -133,7 +128,7 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
             }
         }
     }, [menuFrom]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (!autoPosition)
             return;
         if (isOpen) {
@@ -142,7 +137,7 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
             return () => window.removeEventListener("resize", calculateAutoPosition);
         }
     }, [autoPosition, isOpen]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         const _options = isSort
             ? options
                 .sort((a, b) => (a.label > b.label ? 1 : -1))
@@ -215,7 +210,7 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
             return;
         onApplyChange ? onApplyChange([]) : onChange([]);
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (!isMultiple && intermediateValues.length > 0) {
             setSearchTerm("");
         }
@@ -288,51 +283,51 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
         }
         return text;
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+    return (_jsxs("div", { style: {
             width: width !== null && width !== void 0 ? width : "100%",
             marginBottom,
             marginTop,
             marginRight,
             marginLeft,
-        }, children: [label && ((0, jsx_runtime_1.jsxs)("p", { style: labelStyle, children: [label, required && (0, jsx_runtime_1.jsx)("span", { style: asteriskStyle, children: " *" })] })), (0, jsx_runtime_1.jsxs)("div", { ref: wrapperRef, className: `${className}`, style: Object.assign({ border, borderRadius: 4, padding: "0 0.5rem", alignItems: "center", display: "flex", minHeight: "2.5rem", position: "relative" }, style), children: [(0, jsx_runtime_1.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: "2.5rem", position: "relative" }, style), children: [_jsxs("div", { style: {
                             display: "flex",
                             alignItems: "center",
                             justifyContent: "space-between",
                             cursor: "pointer",
                             width: "100%",
-                        }, ref: clearIconRef, onClick: handleClick, children: [(0, jsx_runtime_1.jsx)("span", { children: selectedDisplay
+                        }, ref: clearIconRef, onClick: handleClick, children: [_jsx("span", { children: selectedDisplay
                                     ? selectedDisplay
                                     : displayValue
                                         ? wrapMiddle(displayValue, selectedCharLength)
                                         : disabled
                                             ? "--"
-                                            : placeholder }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                            : placeholder }), _jsxs("div", { style: {
                                     display: "flex",
                                     alignItems: "center",
-                                }, children: [isClear && (displayValue || selectedDisplay) && ((0, jsx_runtime_1.jsx)("div", { style: { marginRight: "0.5rem" }, onClick: handleClear, id: clearId, title: "Click to clear the value", children: ClearIcon ? (ClearIcon) : ((0, jsx_runtime_1.jsx)("span", { style: { color: "#dbdfe9", fontSize: "1rem" }, children: "X" })) })), disabled ? (Tooltip && Tooltip) : DropDownIcon ? (DropDownIcon) : ((0, jsx_runtime_1.jsx)(hi_1.HiChevronDown, { fontSize: "1rem" })), withTooltip && Tooltip && Tooltip] })] }), (0, jsx_runtime_1.jsxs)("ul", { style: Object.assign(Object.assign({ width: dropdownListWidth || "100%", position: "absolute", backgroundColor: dropdownListBG || "var(--dropdown-bg)", boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)", border: "1px solid #f5f5f5", zIndex: 10, marginTop: 4, borderRadius: 4, overflow: "hidden" }, clickStyle), { display: !isOpen ? "none" : "" }), children: [searchEnabled && ((0, jsx_runtime_1.jsx)("li", { style: { padding: "0.5rem" }, children: (0, jsx_runtime_1.jsx)("input", { ref: searchInputRef, type: "text", placeholder: "Search...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), disabled: disabled, style: {
+                                }, children: [isClear && (displayValue || selectedDisplay) && (_jsx("div", { style: { marginRight: "0.5rem" }, onClick: handleClear, id: clearId, title: "Click to clear the value", children: ClearIcon ? (ClearIcon) : (_jsx("span", { style: { color: "#dbdfe9", fontSize: "1rem" }, children: "X" })) })), disabled ? (Tooltip && Tooltip) : DropDownIcon ? (DropDownIcon) : (_jsx(HiChevronDown, { fontSize: "1rem" })), withTooltip && Tooltip && Tooltip] })] }), _jsxs("ul", { style: Object.assign(Object.assign({ width: dropdownListWidth || "100%", position: "absolute", backgroundColor: dropdownListBG || "var(--dropdown-bg)", boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)", border: "1px solid #f5f5f5", zIndex: 10, marginTop: 4, borderRadius: 4, overflow: "hidden" }, clickStyle), { display: !isOpen ? "none" : "" }), children: [searchEnabled && (_jsx("li", { style: { padding: "0.5rem" }, children: _jsx("input", { ref: searchInputRef, type: "text", placeholder: "Search...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), disabled: disabled, style: {
                                         width: "100%",
                                         padding: "0.5rem",
                                         boxSizing: "border-box",
                                         border: "1px solid",
                                         borderColor: searchBorderColor,
                                         borderRadius: 4,
-                                    } }) })), isSelectAll && isMultiple && filteredOptions.length > 0 && ((0, jsx_runtime_1.jsxs)("li", { style: Object.assign(Object.assign(Object.assign(Object.assign({}, listItemStyle), { display: "flex", alignItems: "center" }), (-1 === highlightIndex ? listItemHoverStyle : {})), { borderBottom: "1px solid #dddddd", wordWrap: "break-word", textWrap: "wrap", justifyContent: "space-between" }), onMouseEnter: (e) => {
+                                    } }) })), isSelectAll && isMultiple && filteredOptions.length > 0 && (_jsxs("li", { style: Object.assign(Object.assign(Object.assign(Object.assign({}, listItemStyle), { display: "flex", alignItems: "center" }), (-1 === highlightIndex ? listItemHoverStyle : {})), { borderBottom: "1px solid #dddddd", wordWrap: "break-word", textWrap: "wrap", justifyContent: "space-between" }), onMouseEnter: (e) => {
                                     setHighlightIndex(-1);
-                                }, onClick: () => onSelectChange ? handleAllItemSelect() : handleAllSelect(), children: [(0, jsx_runtime_1.jsx)("div", { style: { marginRight: "0.5rem" }, children: (0, jsx_runtime_1.jsx)(checkbox_1.default, { selected: intermediateValues
+                                }, onClick: () => onSelectChange ? handleAllItemSelect() : handleAllSelect(), children: [_jsx("div", { style: { marginRight: "0.5rem" }, children: _jsx(Checkbox, { selected: intermediateValues
                                                 .sort((a, b) => (a > b ? -1 : 1))
                                                 .toString() ===
                                                 filteredOptions
                                                     .map((item) => item.value)
                                                     .sort((a, b) => (a > b ? -1 : 1))
-                                                    .toString(), onChange: () => { }, style: { pointerEvents: "none" }, noLabel: true, wrapperClass: checkboxWrapper }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                                    .toString(), onChange: () => { }, style: { pointerEvents: "none" }, noLabel: true, wrapperClass: checkboxWrapper }) }), _jsx("div", { style: {
                                             display: "flex",
                                             alignItems: "start",
                                             width: "100%",
-                                        }, children: (0, jsx_runtime_1.jsx)("span", { children: "Select All" }) })] })), (0, jsx_runtime_1.jsx)("div", { style: { maxHeight: maxDropdownHeight, overflowY: "auto" }, children: isLoading ? ((0, jsx_runtime_1.jsxs)(block_1.default, { as: "div", className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)(text_1.default, { as: "span", children: "Loading options" }), (0, jsx_runtime_1.jsx)(loader_1.default, { size: 12 })] })) : isCreatable && filteredOptions.length < 1 ? ((0, jsx_runtime_1.jsxs)("li", { onClick: (e) => onCreate(searchTerm), style: Object.assign(Object.assign({}, listItemStyle), { display: "flex", alignItems: "center", wordWrap: "break-word", textWrap: "wrap", justifyContent: "space-between" }), children: [isMultiple && ((0, jsx_runtime_1.jsx)(checkbox_1.default, { selected: intermediateValues.includes(searchTerm), onChange: () => { }, style: { pointerEvents: "none" }, noLabel: true, wrapperClass: checkboxWrapper })), (0, jsx_runtime_1.jsx)("div", { style: {
+                                        }, children: _jsx("span", { children: "Select All" }) })] })), _jsx("div", { style: { maxHeight: maxDropdownHeight, overflowY: "auto" }, children: isLoading ? (_jsxs(Block, { as: "div", className: "flex items-center justify-between", children: [_jsx(Text, { as: "span", children: "Loading options" }), _jsx(Loader, { size: 12 })] })) : isCreatable && filteredOptions.length < 1 ? (_jsxs("li", { onClick: (e) => onCreate(searchTerm), style: Object.assign(Object.assign({}, listItemStyle), { display: "flex", alignItems: "center", wordWrap: "break-word", textWrap: "wrap", justifyContent: "space-between" }), children: [isMultiple && (_jsx(Checkbox, { selected: intermediateValues.includes(searchTerm), onChange: () => { }, style: { pointerEvents: "none" }, noLabel: true, wrapperClass: checkboxWrapper })), _jsx("div", { style: {
                                                 display: "flex",
                                                 alignItems: "start",
                                                 width: "100%",
-                                            }, children: (0, jsx_runtime_1.jsxs)("span", { style: { marginLeft: "0.5rem" }, children: ["+ Create ", searchTerm] }) })] }, String(searchTerm))) : (filteredOptions.map((option, index) => ((0, jsx_runtime_1.jsxs)("li", { ref: (el) => {
+                                            }, children: _jsxs("span", { style: { marginLeft: "0.5rem" }, children: ["+ Create ", searchTerm] }) })] }, String(searchTerm))) : (filteredOptions.map((option, index) => (_jsxs("li", { ref: (el) => {
                                         optionRefs.current[index] = el;
                                     }, onClick: (e) => onSelectChange
                                         ? handleItemSelect(option, option.disabled || false)
@@ -346,19 +341,19 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
                                         if (!option.disabled) {
                                             setHighlightIndex(index);
                                         }
-                                    }, children: [isMultiple && ((0, jsx_runtime_1.jsx)("div", { style: { marginLeft: "0.5rem" }, children: (0, jsx_runtime_1.jsx)(checkbox_1.default, { selected: intermediateValues.includes(option.value), onChange: () => { }, style: { pointerEvents: "none" }, noLabel: true, wrapperClass: checkboxWrapper }) })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                    }, children: [isMultiple && (_jsx("div", { style: { marginLeft: "0.5rem" }, children: _jsx(Checkbox, { selected: intermediateValues.includes(option.value), onChange: () => { }, style: { pointerEvents: "none" }, noLabel: true, wrapperClass: checkboxWrapper }) })), _jsxs("div", { style: {
                                                 display: "flex",
                                                 alignItems: "start",
                                                 width: "100%",
-                                            }, children: [option.icon && option.isDelete && !option.isDelete && ((0, jsx_runtime_1.jsx)("span", { style: { margin: "0 0.5rem" }, children: option.icon })), (0, jsx_runtime_1.jsx)("span", { children: option.label })] }), option.icon && option.isDelete && option.icon] }, String(option.value))))) }), onApplyChange && ((0, jsx_runtime_1.jsx)("li", { style: {
+                                            }, children: [option.icon && option.isDelete && !option.isDelete && (_jsx("span", { style: { margin: "0 0.5rem" }, children: option.icon })), _jsx("span", { children: option.label })] }), option.icon && option.isDelete && option.icon] }, String(option.value))))) }), onApplyChange && (_jsx("li", { style: {
                                     display: "flex",
                                     alignItems: "center",
                                     justifyContent: "end",
                                     padding: "0.75rem 0.5rem",
                                     borderTop: "1px solid #f5f5f5",
-                                }, children: (0, jsx_runtime_1.jsx)(button_1.default, { text: "Apply", fontSize: "", fontWeight: "", color: "#FFFFFF", backgroundColor: "#2377BA", borderColor: "#2377BA", onClick: () => {
+                                }, children: _jsx(Button, { text: "Apply", fontSize: "", fontWeight: "", color: "#FFFFFF", backgroundColor: "#2377BA", borderColor: "#2377BA", onClick: () => {
                                         onApplyChange(intermediateValues);
                                         setIsOpen(false);
                                     }, borderRadius: "0.5rem" }) }))] })] })] }));
 };
-exports.default = Dropdown;
+export default Dropdown;

package/dist/components/grid/hooks/useBulkSelect.js

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useBulkSelect = void 0;
-const react_1 = require("react");
-const useBulkSelect = ({ data, selectedRows, setSelectedRows }) => {
-    const toggleRowSelection = (0, react_1.useCallback)((id) => {
+import { useCallback, useMemo } from "react";
+export const useBulkSelect = ({ data, selectedRows, setSelectedRows }) => {
+    const toggleRowSelection = useCallback((id) => {
         setSelectedRows && setSelectedRows((prevSelectedRows) => {
             const newSelectedRows = new Set(prevSelectedRows);
             if (newSelectedRows.has(id)) {
@@ -15,7 +12,7 @@ const useBulkSelect = ({ data, selectedRows, setSelectedRows }) => {
             return newSelectedRows;
         });
     }, []);
-    const toggleSelectAll = (0, react_1.useCallback)((visibleData, allSelected) => {
+    const toggleSelectAll = useCallback((visibleData, allSelected) => {
         setSelectedRows && setSelectedRows((prevSelectedRows) => {
             const newSelectedRows = new Set(prevSelectedRows);
             if (allSelected) {
@@ -30,14 +27,14 @@ const useBulkSelect = ({ data, selectedRows, setSelectedRows }) => {
             return newSelectedRows;
         });
     }, []);
-    const allRowsSelected = (0, react_1.useMemo)(() => {
+    const allRowsSelected = useMemo(() => {
         return data.every((item) => {
             var _a;
             return (item === null || item === void 0 ? void 0 : item["id"]) &&
                 selectedRows && selectedRows.has((_a = item === null || item === void 0 ? void 0 : item["id"].value) === null || _a === void 0 ? void 0 : _a.toString());
         });
     }, [data, selectedRows]);
-    const someRowsSelected = (0, react_1.useMemo)(() => {
+    const someRowsSelected = useMemo(() => {
         return data.some((item) => {
             var _a;
             return (item === null || item === void 0 ? void 0 : item["id"]) &&
@@ -52,4 +49,3 @@ const useBulkSelect = ({ data, selectedRows, setSelectedRows }) => {
         someRowsSelected,
     };
 };
-exports.useBulkSelect = useBulkSelect;

package/dist/components/grid/hooks/usePagination.js

@@ -1,14 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePagination = void 0;
-const react_1 = require("react");
-const usePagination = (sortedData, defaultRowsPerPage) => {
-    const [currentPage, setCurrentPage] = (0, react_1.useState)(1);
-    const [rowsPerPage, setRowsPerPage] = (0, react_1.useState)(10);
-    (0, react_1.useEffect)(() => {
+import { useState, useMemo, useEffect } from "react";
+export const usePagination = (sortedData, defaultRowsPerPage) => {
+    const [currentPage, setCurrentPage] = useState(1);
+    const [rowsPerPage, setRowsPerPage] = useState(10);
+    useEffect(() => {
         setRowsPerPage(defaultRowsPerPage);
     }, [defaultRowsPerPage]);
-    const paginatedData = (0, react_1.useMemo)(() => {
+    const paginatedData = useMemo(() => {
         const startIndex = (currentPage - 1) * rowsPerPage;
         return sortedData.slice(startIndex, startIndex + rowsPerPage);
     }, [sortedData, currentPage, rowsPerPage]);
@@ -27,4 +24,3 @@ const usePagination = (sortedData, defaultRowsPerPage) => {
         rowsPerPage,
     };
 };
-exports.usePagination = usePagination;

package/dist/components/grid/hooks/useResizeObserver.js

@@ -1,8 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
+import { useEffect } from "react";
 const useResizeObserver = (ref, callback) => {
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         const observer = new ResizeObserver((entries) => {
             callback(entries);
         });
@@ -16,4 +14,4 @@ const useResizeObserver = (ref, callback) => {
         };
     }, [ref, callback]);
 };
-exports.default = useResizeObserver;
+export default useResizeObserver;

package/dist/components/grid/hooks/useSearch.js

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSearch = void 0;
-const react_1 = require("react");
-const useSearch = (data, searchTerm, searchKeys) => {
+import { useMemo } from "react";
+export const useSearch = (data, searchTerm, searchKeys) => {
     const searchQuery = searchTerm.toLowerCase();
-    const filteredData = (0, react_1.useMemo)(() => {
+    const filteredData = useMemo(() => {
         if (!searchQuery)
             return data;
         return data.filter((item) => searchKeys.some((key) => {
@@ -15,4 +12,3 @@ const useSearch = (data, searchTerm, searchKeys) => {
     }, [data, searchQuery, searchKeys]);
     return filteredData;
 };
-exports.useSearch = useSearch;

package/dist/components/grid/hooks/useSort.js

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSort = void 0;
-const react_1 = require("react");
-const useSort = (data, columns, uniqueSearch, multiSorting, withAscii) => {
-    const [sortQueries, setSortQueries] = (0, react_1.useState)({});
+import { useState, useMemo } from "react";
+export const useSort = (data, columns, uniqueSearch, multiSorting, withAscii) => {
+    const [sortQueries, setSortQueries] = useState({});
     const hierarchicalSort = (keys, orders) => {
         return (a, b) => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
@@ -33,7 +30,7 @@ const useSort = (data, columns, uniqueSearch, multiSorting, withAscii) => {
             return 0;
         };
     };
-    const sortedData = (0, react_1.useMemo)(() => {
+    const sortedData = useMemo(() => {
         const keys = Object.keys(uniqueSearch);
         let returnData = [...data];
         const _sortQueries = sortQueries;
@@ -68,4 +65,3 @@ const useSort = (data, columns, uniqueSearch, multiSorting, withAscii) => {
     };
     return { sortedData, handleSort, sortQueries, setSortQueries };
 };
-exports.useSort = useSort;

package/dist/components/grid/hooks/useVisibleData.js

@@ -1,15 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useVisibleData = void 0;
-const react_1 = require("react");
-const useVisibleData = ({ sortedData, rowHeight, viewportHeight, }) => {
-    const [scrollTop, setScrollTop] = (0, react_1.useState)(0);
+import { useState, useMemo } from "react";
+export const useVisibleData = ({ sortedData, rowHeight, viewportHeight, }) => {
+    const [scrollTop, setScrollTop] = useState(0);
     const overscan = rowHeight;
-    const visibleItemCount = (0, react_1.useMemo)(() => Math.ceil(viewportHeight / rowHeight) + overscan, [viewportHeight, rowHeight, overscan]);
-    const totalHeight = (0, react_1.useMemo)(() => sortedData.length * rowHeight, [sortedData.length, rowHeight]);
+    const visibleItemCount = useMemo(() => Math.ceil(viewportHeight / rowHeight) + overscan, [viewportHeight, rowHeight, overscan]);
+    const totalHeight = useMemo(() => sortedData.length * rowHeight, [sortedData.length, rowHeight]);
     const startNode = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);
     const endNode = Math.min(sortedData.length, startNode + visibleItemCount);
-    const visibleData = (0, react_1.useMemo)(() => {
+    const visibleData = useMemo(() => {
         return sortedData.slice(startNode, endNode);
     }, [sortedData, startNode, endNode]);
     return {
@@ -20,4 +17,3 @@ const useVisibleData = ({ sortedData, rowHeight, viewportHeight, }) => {
         endNode,
     };
 };
-exports.useVisibleData = useVisibleData;