@megha-ui/react 1.3.45 → 1.3.46
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.
|
@@ -19,6 +19,7 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
|
|
|
19
19
|
const clearIconRef = useRef(null);
|
|
20
20
|
const searchInputRef = useRef(null);
|
|
21
21
|
const searchOptionRef = useRef(null);
|
|
22
|
+
const applyButtonRef = useRef(null);
|
|
22
23
|
const optionRefs = useRef([]);
|
|
23
24
|
const [highlightIndex, setHighlightIndex] = useState(0);
|
|
24
25
|
const [intermediateValues, setIntermediateValues] = useState(selectedValues);
|
|
@@ -64,30 +65,27 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
|
|
|
64
65
|
setIntermediateValues(selectedValues);
|
|
65
66
|
}, [selectedValues]);
|
|
66
67
|
useEffect(() => {
|
|
67
|
-
var _a, _b, _c, _d, _e;
|
|
68
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
68
69
|
if (isOpen && searchEnabled) {
|
|
69
70
|
(_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
70
|
-
if (typeof maxDropdownHeight === "undefined" &&
|
|
71
|
-
wrapperRef.current) {
|
|
71
|
+
if (typeof maxDropdownHeight === "undefined" && wrapperRef.current) {
|
|
72
72
|
const rect = wrapperRef.current.getBoundingClientRect();
|
|
73
73
|
const searchOptionRect = (_b = searchOptionRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
|
|
74
|
-
const
|
|
74
|
+
const applyButtonRect = (_c = applyButtonRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
|
|
75
|
+
const searchHeight = (_d = searchOptionRect === null || searchOptionRect === void 0 ? void 0 : searchOptionRect.height) !== null && _d !== void 0 ? _d : 0;
|
|
76
|
+
const applyBtnHeight = (_e = applyButtonRect === null || applyButtonRect === void 0 ? void 0 : applyButtonRect.height) !== null && _e !== void 0 ? _e : 0;
|
|
75
77
|
const boundaryParent = getLayoutBoundaryParent(wrapperRef.current);
|
|
76
78
|
const containerRect = boundaryParent === null || boundaryParent === void 0 ? void 0 : boundaryParent.getBoundingClientRect();
|
|
77
|
-
const containerTop = (
|
|
78
|
-
const containerBottom = (
|
|
79
|
+
const containerTop = (_f = containerRect === null || containerRect === void 0 ? void 0 : containerRect.top) !== null && _f !== void 0 ? _f : 0;
|
|
80
|
+
const containerBottom = (_g = containerRect === null || containerRect === void 0 ? void 0 : containerRect.bottom) !== null && _g !== void 0 ? _g : document.documentElement.clientHeight;
|
|
79
81
|
const viewportPadding = 8;
|
|
80
82
|
const menuGap = 8;
|
|
81
83
|
const rawSpaceBelow = containerBottom -
|
|
82
84
|
rect.bottom -
|
|
83
85
|
viewportPadding -
|
|
84
86
|
menuGap -
|
|
85
|
-
searchHeight;
|
|
86
|
-
const rawSpaceAbove = rect.top -
|
|
87
|
-
containerTop -
|
|
88
|
-
viewportPadding -
|
|
89
|
-
menuGap -
|
|
90
|
-
searchHeight;
|
|
87
|
+
searchHeight - applyBtnHeight;
|
|
88
|
+
const rawSpaceAbove = rect.top - containerTop - viewportPadding - menuGap - searchHeight - applyBtnHeight;
|
|
91
89
|
const spaceBelow = Math.max(0, Math.floor(rawSpaceBelow));
|
|
92
90
|
const spaceAbove = Math.max(0, Math.floor(rawSpaceAbove));
|
|
93
91
|
const opensUpwards = typeof clickStyle.bottom !== "undefined";
|
|
@@ -516,7 +514,7 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
|
|
|
516
514
|
justifyContent: "end",
|
|
517
515
|
padding: "0.75rem 0.5rem",
|
|
518
516
|
borderTop: "1px solid var(--divider, #f5f5f5)",
|
|
519
|
-
}, children: _jsx(Button, { text: "Apply", fontSize: "", fontWeight: "", color: "#FFFFFF", backgroundColor: "#2377BA", borderColor: "#2377BA", onClick: () => {
|
|
517
|
+
}, ref: applyButtonRef, children: _jsx(Button, { text: "Apply", fontSize: "", fontWeight: "", color: "#FFFFFF", backgroundColor: "#2377BA", borderColor: "#2377BA", onClick: () => {
|
|
520
518
|
onApplyChange(intermediateValues);
|
|
521
519
|
setIsOpen(false);
|
|
522
520
|
}, borderRadius: "0.5rem" }) }))] })] })] }));
|
package/package.json
CHANGED