@megha-ui/react 1.3.35 → 1.3.38
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.
|
@@ -28,31 +28,21 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
|
|
|
28
28
|
});
|
|
29
29
|
const [collapsed, setCollapsed] = useState("");
|
|
30
30
|
const [height, setHeight] = useState(0);
|
|
31
|
-
const
|
|
32
|
-
var _a, _b;
|
|
31
|
+
const getLayoutBoundaryParent = (element) => {
|
|
33
32
|
if (!element)
|
|
34
|
-
return
|
|
33
|
+
return null;
|
|
35
34
|
let parent = element.parentElement;
|
|
36
35
|
while (parent) {
|
|
37
|
-
const
|
|
38
|
-
const overflowY =
|
|
39
|
-
const overflow =
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
overflow === "scroll") {
|
|
44
|
-
const parentRect = parent.getBoundingClientRect();
|
|
45
|
-
const elementRect = element.getBoundingClientRect();
|
|
46
|
-
const searchOptionRect = (_a = searchOptionRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
47
|
-
return (parentRect.height -
|
|
48
|
-
elementRect.height -
|
|
49
|
-
8 -
|
|
50
|
-
((_b = searchOptionRect === null || searchOptionRect === void 0 ? void 0 : searchOptionRect.height) !== null && _b !== void 0 ? _b : 0));
|
|
36
|
+
const styles = window.getComputedStyle(parent);
|
|
37
|
+
const overflowY = styles.overflowY;
|
|
38
|
+
const overflow = styles.overflow;
|
|
39
|
+
const hasClippingOverflow = [overflowY, overflow].some((value) => ["hidden", "clip", "auto", "scroll", "overlay"].includes(value));
|
|
40
|
+
if (hasClippingOverflow) {
|
|
41
|
+
return parent;
|
|
51
42
|
}
|
|
52
43
|
parent = parent.parentElement;
|
|
53
|
-
console.log({ parent });
|
|
54
44
|
}
|
|
55
|
-
return
|
|
45
|
+
return null;
|
|
56
46
|
};
|
|
57
47
|
const calculateAutoPosition = () => {
|
|
58
48
|
if (!wrapperRef.current)
|
|
@@ -77,21 +67,38 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
|
|
|
77
67
|
var _a, _b, _c, _d, _e;
|
|
78
68
|
if (isOpen && searchEnabled) {
|
|
79
69
|
(_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
80
|
-
if (typeof maxDropdownHeight === "undefined"
|
|
81
|
-
|
|
82
|
-
const
|
|
83
|
-
const
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
const
|
|
88
|
-
|
|
70
|
+
if (typeof maxDropdownHeight === "undefined" &&
|
|
71
|
+
wrapperRef.current) {
|
|
72
|
+
const rect = wrapperRef.current.getBoundingClientRect();
|
|
73
|
+
const searchOptionRect = (_b = searchOptionRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
|
|
74
|
+
const searchHeight = (_c = searchOptionRect === null || searchOptionRect === void 0 ? void 0 : searchOptionRect.height) !== null && _c !== void 0 ? _c : 0;
|
|
75
|
+
const boundaryParent = getLayoutBoundaryParent(wrapperRef.current);
|
|
76
|
+
const containerRect = boundaryParent === null || boundaryParent === void 0 ? void 0 : boundaryParent.getBoundingClientRect();
|
|
77
|
+
const containerTop = (_d = containerRect === null || containerRect === void 0 ? void 0 : containerRect.top) !== null && _d !== void 0 ? _d : 0;
|
|
78
|
+
const containerBottom = (_e = containerRect === null || containerRect === void 0 ? void 0 : containerRect.bottom) !== null && _e !== void 0 ? _e : document.documentElement.clientHeight;
|
|
79
|
+
const viewportPadding = 8;
|
|
80
|
+
const menuGap = 8;
|
|
81
|
+
const rawSpaceBelow = containerBottom -
|
|
82
|
+
rect.bottom -
|
|
83
|
+
viewportPadding -
|
|
84
|
+
menuGap -
|
|
85
|
+
searchHeight;
|
|
86
|
+
const rawSpaceAbove = rect.top -
|
|
87
|
+
containerTop -
|
|
88
|
+
viewportPadding -
|
|
89
|
+
menuGap -
|
|
90
|
+
searchHeight;
|
|
91
|
+
const spaceBelow = Math.max(0, Math.floor(rawSpaceBelow));
|
|
92
|
+
const spaceAbove = Math.max(0, Math.floor(rawSpaceAbove));
|
|
93
|
+
const opensUpwards = typeof clickStyle.bottom !== "undefined";
|
|
94
|
+
const available = opensUpwards ? spaceAbove : spaceBelow;
|
|
95
|
+
setHeight(available);
|
|
89
96
|
}
|
|
90
97
|
}
|
|
91
98
|
if (isOpen) {
|
|
92
99
|
setHighlightIndex(0);
|
|
93
100
|
}
|
|
94
|
-
}, [isOpen, searchEnabled]);
|
|
101
|
+
}, [isOpen, searchEnabled, maxDropdownHeight, clickStyle]);
|
|
95
102
|
useEffect(() => {
|
|
96
103
|
if (isOpen) {
|
|
97
104
|
setHighlightIndex(0);
|
|
@@ -497,7 +504,7 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
|
|
|
497
504
|
display: "flex",
|
|
498
505
|
alignItems: "start",
|
|
499
506
|
width: "100%",
|
|
500
|
-
}, children: [option.icon && !option.isDelete
|
|
507
|
+
}, children: [option.icon && !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: {
|
|
501
508
|
display: "flex",
|
|
502
509
|
alignItems: "center",
|
|
503
510
|
justifyContent: "end",
|
|
@@ -910,7 +910,13 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
|
|
|
910
910
|
}
|
|
911
911
|
}
|
|
912
912
|
};
|
|
913
|
-
const cellStyle = cellBorder
|
|
913
|
+
const cellStyle = cellBorder
|
|
914
|
+
? {
|
|
915
|
+
borderWidth: "1px",
|
|
916
|
+
borderStyle: "solid",
|
|
917
|
+
borderColor: "#d9d9d9",
|
|
918
|
+
}
|
|
919
|
+
: {};
|
|
914
920
|
const rowStyle = {
|
|
915
921
|
minHeight: rowHeight,
|
|
916
922
|
alignItems: "center",
|
package/package.json
CHANGED