@megha-ui/react 1.2.783 → 1.2.785
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -8,7 +8,7 @@ import Text from "../text";
|
|
|
8
8
|
import Button from "../button";
|
|
9
9
|
import { HiChevronDown } from "react-icons/hi";
|
|
10
10
|
import { FaChevronDown, FaChevronUp } from "react-icons/fa";
|
|
11
|
-
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
|
|
11
|
+
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 = false, compactDisplay = false, ultraCompactDisplay = false, isGrouping = false, isIcon = false, withValue = false, closeOnSelect = true, }) => {
|
|
12
12
|
var _a, _b;
|
|
13
13
|
const { density } = useDensity();
|
|
14
14
|
const [isOpen, setIsOpen] = useState(false);
|
|
@@ -26,6 +26,7 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
|
|
|
26
26
|
top: "100%",
|
|
27
27
|
});
|
|
28
28
|
const [collapsed, setCollapsed] = useState("");
|
|
29
|
+
const [height, setHeight] = useState(0);
|
|
29
30
|
const calculateAutoPosition = () => {
|
|
30
31
|
if (!wrapperRef.current)
|
|
31
32
|
return;
|
|
@@ -299,7 +300,7 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
|
|
|
299
300
|
const clearEle = document.getElementById(clearId || "");
|
|
300
301
|
const screen = document.body.clientHeight;
|
|
301
302
|
const rect = e.currentTarget.getBoundingClientRect();
|
|
302
|
-
|
|
303
|
+
setHeight(screen - rect.bottom);
|
|
303
304
|
if (clearEle === e.target) {
|
|
304
305
|
e.preventDefault();
|
|
305
306
|
}
|
|
@@ -388,7 +389,7 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
|
|
|
388
389
|
display: "flex",
|
|
389
390
|
alignItems: "start",
|
|
390
391
|
width: "100%",
|
|
391
|
-
}, children: _jsx("span", { children: "Select All" }) })] })), _jsx("div", { style: { maxHeight: maxDropdownHeight
|
|
392
|
+
}, children: _jsx("span", { children: "Select All" }) })] })), _jsx("div", { style: { maxHeight: maxDropdownHeight !== null && maxDropdownHeight !== void 0 ? maxDropdownHeight : `${height}px`, 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 && searchTerm ? (_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: {
|
|
392
393
|
display: "flex",
|
|
393
394
|
alignItems: "start",
|
|
394
395
|
width: "100%",
|
package/package.json
CHANGED