zcomponents-ui 1.5.12 → 1.5.14

package/dist/{index-BbHVfHYa.js → index-8z2jr57w.js}

@@ -375,7 +375,6 @@ const getElementVerticalBorders = (el) => {
 };
 
 const minUsableHeight = 50;
-const subPixelSafetyBufferPx = 2;
 const calculateHeightForTop = (scrollHeight, maxHeightLimiter, wrapperMaxHeight) => {
     const currentHeightLimiter = maxHeightLimiter < wrapperMaxHeight ? maxHeightLimiter : wrapperMaxHeight;
     return scrollHeight > currentHeightLimiter
@@ -398,14 +397,16 @@ const ZDropListWrapper = (props) => {
     const wrapperClasses = classNames(styles["zd__list-wrapper"], className);
     const getWrapperVerticalSpacing = react.useCallback(() => {
         const wrapper = listWrapperRef.current;
-        if (!wrapper)
+        if (!wrapper) {
             return 0;
+        }
         return (getElementVerticalMargins(wrapper) + getElementVerticalBorders(wrapper));
     }, []);
     const getWrapperVerticalExtrasPx = react.useCallback(() => {
         const wrapper = listWrapperRef.current;
-        if (!wrapper)
+        if (!wrapper) {
             return 0;
+        }
         const bordersPx = getElementVerticalBorders(wrapper);
         const cs = window.getComputedStyle(wrapper);
         const paddingTopPx = parseFloat(cs.paddingTop || "0") || 0;
@@ -424,10 +425,66 @@ const ZDropListWrapper = (props) => {
         setMeasuredContentHeight(0);
         setAnimatedWrapperHeightPx(0);
     }, [optionsCount]);
+    const measureVisualContentHeightPx = react.useCallback((wrapper, wrapperVerticalExtrasPx) => {
+        const prevHeight = wrapper.style.height;
+        const prevMaxHeight = wrapper.style.maxHeight;
+        wrapper.style.height = "auto";
+        wrapper.style.maxHeight = "none";
+        wrapper.offsetHeight;
+        const wrapperRect = wrapper.getBoundingClientRect();
+        const childrenElements = Array.from(wrapper.children);
+        if (childrenElements.length === 0) {
+            const height = (wrapper.scrollHeight || 0) + wrapperVerticalExtrasPx;
+            wrapper.style.height = prevHeight;
+            wrapper.style.maxHeight = prevMaxHeight;
+            return Math.max(0, height);
+        }
+        let minTop = Number.POSITIVE_INFINITY;
+        let maxBottom = Number.NEGATIVE_INFINITY;
+        let topMostEl = null;
+        let bottomMostEl = null;
+        let topMostTop = Number.POSITIVE_INFINITY;
+        let bottomMostBottom = Number.NEGATIVE_INFINITY;
+        for (const child of childrenElements) {
+            const rect = child.getBoundingClientRect();
+            const topRel = rect.top - wrapperRect.top;
+            const bottomRel = rect.bottom - wrapperRect.top;
+            if (topRel < minTop) {
+                minTop = topRel;
+            }
+            if (bottomRel > maxBottom) {
+                maxBottom = bottomRel;
+            }
+            if (rect.top < topMostTop) {
+                topMostTop = rect.top;
+                topMostEl = child;
+            }
+            if (rect.bottom > bottomMostBottom) {
+                bottomMostBottom = rect.bottom;
+                bottomMostEl = child;
+            }
+        }
+        let topMarginPx = 0;
+        let bottomMarginPx = 0;
+        if (topMostEl) {
+            const cs = window.getComputedStyle(topMostEl);
+            topMarginPx = parseFloat(cs.marginTop || "0") || 0;
+        }
+        if (bottomMostEl) {
+            const cs = window.getComputedStyle(bottomMostEl);
+            bottomMarginPx = parseFloat(cs.marginBottom || "0") || 0;
+        }
+        const unionHeight = Math.max(0, maxBottom - minTop);
+        const total = unionHeight + topMarginPx + bottomMarginPx + wrapperVerticalExtrasPx;
+        wrapper.style.height = prevHeight;
+        wrapper.style.maxHeight = prevMaxHeight;
+        return Math.max(0, total);
+    }, []);
     const measureContentHeightPx = react.useCallback(() => {
         const wrapper = listWrapperRef.current;
-        if (!wrapper)
+        if (!wrapper) {
             return 0;
+        }
         const wrapperVerticalExtrasPx = getWrapperVerticalExtrasPx();
         if (optionsCount > 0) {
             const firstListItem = wrapper.querySelector("li");
@@ -446,31 +503,8 @@ const ZDropListWrapper = (props) => {
             }
         }
         cachedListItemHeightRef.current = null;
-        const firstChild = wrapper.firstElementChild;
-        if (!firstChild) {
-            return wrapperVerticalExtrasPx;
-        }
-        const previousInlineHeight = wrapper.style.height;
-        const previousInlineMaxHeight = wrapper.style.maxHeight;
-        wrapper.style.height = "auto";
-        wrapper.style.maxHeight = "none";
-        wrapper.offsetHeight;
-        let contentRawPx = 0;
-        const childScrollHeight = firstChild.scrollHeight || 0;
-        if (childScrollHeight > 0) {
-            contentRawPx = childScrollHeight;
-        }
-        else {
-            const rectHeightPx = firstChild.getBoundingClientRect().height || 0;
-            const childComputedStyles = window.getComputedStyle(firstChild);
-            const childMarginTopPx = parseFloat(childComputedStyles.marginTop || "0") || 0;
-            const childMarginBottomPx = parseFloat(childComputedStyles.marginBottom || "0") || 0;
-            contentRawPx = rectHeightPx + childMarginTopPx + childMarginBottomPx;
-        }
-        wrapper.style.height = previousInlineHeight;
-        wrapper.style.maxHeight = previousInlineMaxHeight;
-        return Math.max(0, contentRawPx + wrapperVerticalExtrasPx);
-    }, [optionsCount, getWrapperVerticalExtrasPx]);
+        return measureVisualContentHeightPx(wrapper, wrapperVerticalExtrasPx);
+    }, [optionsCount, getWrapperVerticalExtrasPx, measureVisualContentHeightPx]);
     const updateMaxSpaces = react.useCallback(() => {
         const wrapper = listWrapperRef.current;
         if (!wrapper) {
@@ -485,10 +519,26 @@ const ZDropListWrapper = (props) => {
             return;
         }
         const elementVerticalSpacing = getWrapperVerticalSpacing();
-        const anchorTop = getElementOffsetTop(anchor);
-        const anchorBottom = anchorTop + anchor.offsetHeight;
-        const above = Math.max(anchorTop - reference.top - elementVerticalSpacing, 0);
-        const below = Math.max(reference.bottom - anchorBottom - elementVerticalSpacing, 0);
+        const anchorRect = anchor.getBoundingClientRect();
+        const referenceEl = referenceElementClassName
+            ? anchor.closest(`.${referenceElementClassName}`)
+            : null;
+        const refRect = referenceEl
+            ? referenceEl.getBoundingClientRect()
+            : { top: reference.top, bottom: reference.bottom };
+        let refContentTop = refRect.top;
+        let refContentBottom = refRect.bottom;
+        if (referenceEl) {
+            const cs = window.getComputedStyle(referenceEl);
+            const paddingTop = parseFloat(cs.paddingTop || "0") || 0;
+            const paddingBottom = parseFloat(cs.paddingBottom || "0") || 0;
+            const borderTop = parseFloat(cs.borderTopWidth || "0") || 0;
+            const borderBottom = parseFloat(cs.borderBottomWidth || "0") || 0;
+            refContentTop = refRect.top + borderTop + paddingTop;
+            refContentBottom = refRect.bottom - borderBottom - paddingBottom;
+        }
+        const above = Math.max(anchorRect.top - refContentTop - elementVerticalSpacing, 0);
+        const below = Math.max(refContentBottom - anchorRect.bottom - elementVerticalSpacing, 0);
         if (lastAboveRef.current !== above) {
             lastAboveRef.current = above;
             setMaxSpaceAbove(above);
@@ -498,16 +548,55 @@ const ZDropListWrapper = (props) => {
             setMaxSpaceBelow(below);
         }
     }, [referenceElementClassName, getWrapperVerticalSpacing]);
+    const runMeasureTick = react.useCallback(() => {
+        updateMaxSpaces();
+        const next = measureContentHeightPx();
+        if (lastMeasuredContentHeightRef.current !== next) {
+            lastMeasuredContentHeightRef.current = next;
+            setMeasuredContentHeight(next);
+        }
+    }, [updateMaxSpaces, measureContentHeightPx]);
+    react.useLayoutEffect(() => {
+        const wrapper = listWrapperRef.current;
+        if (!wrapper) {
+            return;
+        }
+        let rafId = 0;
+        const schedule = () => {
+            cancelAnimationFrame(rafId);
+            rafId = requestAnimationFrame(() => {
+                runMeasureTick();
+            });
+        };
+        let ro = null;
+        let mo = null;
+        const attachResizeObserver = () => {
+            var _a;
+            ro === null || ro === void 0 ? void 0 : ro.disconnect();
+            ro = new ResizeObserver(() => schedule());
+            const target = (_a = wrapper.firstElementChild) !== null && _a !== void 0 ? _a : wrapper;
+            ro.observe(target);
+        };
+        mo = new MutationObserver(() => {
+            attachResizeObserver();
+            schedule();
+        });
+        mo.observe(wrapper, { childList: true, subtree: true });
+        attachResizeObserver();
+        schedule();
+        return () => {
+            cancelAnimationFrame(rafId);
+            ro === null || ro === void 0 ? void 0 : ro.disconnect();
+            mo === null || mo === void 0 ? void 0 : mo.disconnect();
+        };
+    }, [runMeasureTick]);
     react.useLayoutEffect(() => {
         resetLocalCachesAndGuards();
         let raf1 = 0;
         let raf2 = 0;
         raf1 = requestAnimationFrame(() => {
             raf2 = requestAnimationFrame(() => {
-                updateMaxSpaces();
-                const nextHeight = measureContentHeightPx();
-                lastMeasuredContentHeightRef.current = nextHeight;
-                setMeasuredContentHeight(nextHeight);
+                runMeasureTick();
             });
         });
         return () => {
@@ -517,8 +606,9 @@ const ZDropListWrapper = (props) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     react.useLayoutEffect(() => {
-        if (!listWrapperRef.current)
+        if (!listWrapperRef.current) {
             return;
+        }
         const previousCount = previousOptionsCountRef.current;
         previousOptionsCountRef.current = optionsCount;
         const isSwitchingBetweenListAndFallback = (previousCount > 0 && optionsCount === 0) ||
@@ -526,47 +616,43 @@ const ZDropListWrapper = (props) => {
         cachedListItemHeightRef.current = null;
         let raf1 = 0;
         let raf2 = 0;
-        const runMeasure = () => {
-            const next = measureContentHeightPx();
-            if (lastMeasuredContentHeightRef.current !== next) {
-                lastMeasuredContentHeightRef.current = next;
-                setMeasuredContentHeight(next);
-            }
-        };
+        let raf3 = 0;
         raf1 = requestAnimationFrame(() => {
-            if (isSwitchingBetweenListAndFallback) {
-                raf2 = requestAnimationFrame(() => runMeasure());
-            }
-            else {
-                runMeasure();
-            }
+            runMeasureTick();
+            raf2 = requestAnimationFrame(() => {
+                if (isSwitchingBetweenListAndFallback)
+                    runMeasureTick();
+                raf3 = requestAnimationFrame(() => {
+                    if (isSwitchingBetweenListAndFallback)
+                        runMeasureTick();
+                });
+            });
         });
         return () => {
             cancelAnimationFrame(raf1);
             cancelAnimationFrame(raf2);
+            cancelAnimationFrame(raf3);
         };
-    }, [optionsCount, measureContentHeightPx]);
+    }, [optionsCount, runMeasureTick]);
     react.useLayoutEffect(() => {
-        if (!listWrapperRef.current)
+        if (!listWrapperRef.current) {
             return;
-        if (optionsCount > 0)
+        }
+        if (optionsCount > 0) {
             return;
+        }
         let raf1 = 0;
         let raf2 = 0;
         raf1 = requestAnimationFrame(() => {
             raf2 = requestAnimationFrame(() => {
-                const next = measureContentHeightPx();
-                if (lastMeasuredContentHeightRef.current !== next) {
-                    lastMeasuredContentHeightRef.current = next;
-                    setMeasuredContentHeight(next);
-                }
+                runMeasureTick();
             });
         });
         return () => {
             cancelAnimationFrame(raf1);
             cancelAnimationFrame(raf2);
         };
-    }, [children, optionsCount, measureContentHeightPx]);
+    }, [children, optionsCount, runMeasureTick]);
     const hasTopSpace = maxSpaceAbove > minUsableHeight;
     const hasBottomSpace = maxSpaceBelow > minUsableHeight;
     let finalPosition;
@@ -590,7 +676,7 @@ const ZDropListWrapper = (props) => {
     const heightForTop = calculateHeightForTop(measuredContentHeight, listMaxHeightLimiter !== null && listMaxHeightLimiter !== void 0 ? listMaxHeightLimiter : maxSpaceAbove, maxSpaceAbove);
     const finalHeight = finalPosition === "top" ? heightForTop : heightForBottom;
     react.useLayoutEffect(() => {
-        const nextHeightPx = Math.max(0, Math.ceil(finalHeight + subPixelSafetyBufferPx));
+        const nextHeightPx = Math.max(0, finalHeight);
         if (lastAnimatedHeightRef.current !== nextHeightPx) {
             lastAnimatedHeightRef.current = nextHeightPx;
             setAnimatedWrapperHeightPx(nextHeightPx);
@@ -627,20 +713,12 @@ const checkIsValueEqualToSelectedValue = (value, selectedValue) => {
     return keysA.every((key) => checkIsValueEqualToSelectedValue(value[key], selectedValue[key]));
 };
 
-const getAvailableSpace = (element) => {
-    if (!element)
-        return { top: 0, bottom: 0 };
-    const rect = element.getBoundingClientRect();
-    const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
-    const spaceTop = Math.max(0, rect.top);
-    const spaceBottom = Math.max(0, viewportHeight - rect.bottom);
-    return {
-        top: spaceTop,
-        bottom: spaceBottom,
-    };
-};
-
 const edgeDistance = 10;
+const shallowEqualPos = (prev, next) => {
+    var _a, _b, _c, _d;
+    return ((_a = prev === null || prev === void 0 ? void 0 : prev.top) !== null && _a !== void 0 ? _a : undefined) === ((_b = next === null || next === void 0 ? void 0 : next.top) !== null && _b !== void 0 ? _b : undefined) &&
+        ((_c = prev === null || prev === void 0 ? void 0 : prev.bottom) !== null && _c !== void 0 ? _c : undefined) === ((_d = next === null || next === void 0 ? void 0 : next.bottom) !== null && _d !== void 0 ? _d : undefined);
+};
 const ZDropListAutoHeightWrapper = (props) => {
     const { containerRef, position = "bottom", className, optionsCount, children, } = props;
     const wrapperRef = react.useRef(null);
@@ -649,131 +727,193 @@ const ZDropListAutoHeightWrapper = (props) => {
     const [maxAllowedHeightPx, setMaxAllowedHeightPx] = react.useState(0);
     const [measuredContentHeightPx, setMeasuredContentHeightPx] = react.useState(0);
     const wrapperClasses = classNames(styles["zd__list"], styles["zd__list-auto-height-wrapper"], className);
-    const calculateContentHeight = react.useCallback(() => {
-        var _a;
-        setForcedPositionY(undefined);
-        if (wrapperRef.current && (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current)) {
-            const { top, bottom } = getAvailableSpace(containerRef.current);
-            const availableTopPx = Math.max(0, top - edgeDistance);
-            const availableBottomPx = Math.max(0, bottom - edgeDistance);
-            let listItemHeightPx = cachedListItemHeightRef.current;
-            if (!listItemHeightPx) {
-                listItemHeightPx =
-                    ((_a = wrapperRef.current.querySelector("li")) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || null;
-                if (!listItemHeightPx)
-                    return;
-                cachedListItemHeightRef.current = listItemHeightPx;
+    const setForcedPositionYIfChanged = react.useCallback((next) => {
+        setForcedPositionY((prev) => (shallowEqualPos(prev, next) ? prev : next));
+    }, []);
+    const setMaxAllowedHeightIfChanged = react.useCallback((next) => {
+        setMaxAllowedHeightPx((prev) => (prev === next ? prev : next));
+    }, []);
+    const measureVisualContentHeightPx = react.useCallback(() => {
+        const el = wrapperRef.current;
+        if (!el) {
+            return 0;
+        }
+        const bordersPx = getElementVerticalBorders(el);
+        const prevHeight = el.style.height;
+        const prevMaxHeight = el.style.maxHeight;
+        el.style.height = "auto";
+        el.style.maxHeight = "none";
+        el.offsetHeight;
+        const wrapperRect = el.getBoundingClientRect();
+        const childrenElements = Array.from(el.children);
+        if (childrenElements.length === 0) {
+            const height = (el.scrollHeight || 0) + bordersPx;
+            el.style.height = prevHeight;
+            el.style.maxHeight = prevMaxHeight;
+            return Math.max(0, height);
+        }
+        let minTop = Number.POSITIVE_INFINITY;
+        let maxBottom = Number.NEGATIVE_INFINITY;
+        let topMostEl = null;
+        let bottomMostEl = null;
+        let topMostTop = Number.POSITIVE_INFINITY;
+        let bottomMostBottom = Number.NEGATIVE_INFINITY;
+        for (const child of childrenElements) {
+            const rect = child.getBoundingClientRect();
+            const topRel = rect.top - wrapperRect.top;
+            const bottomRel = rect.bottom - wrapperRect.top;
+            if (topRel < minTop) {
+                minTop = topRel;
             }
-            const minimumApprovedHeightPx = listItemHeightPx * 2;
-            if (availableTopPx < minimumApprovedHeightPx &&
-                availableBottomPx < minimumApprovedHeightPx) {
-                return;
+            if (bottomRel > maxBottom) {
+                maxBottom = bottomRel;
             }
-            if (position.includes("top") &&
-                availableTopPx > minimumApprovedHeightPx) {
-                setMaxAllowedHeightPx(availableTopPx);
-                return;
+            if (rect.top < topMostTop) {
+                topMostTop = rect.top;
+                topMostEl = child;
             }
-            if (position.includes("top") &&
-                availableTopPx <= minimumApprovedHeightPx) {
-                setMaxAllowedHeightPx(availableBottomPx);
-                setForcedPositionY({ top: "100%", bottom: "auto" });
-                return;
+            if (rect.bottom > bottomMostBottom) {
+                bottomMostBottom = rect.bottom;
+                bottomMostEl = child;
             }
-            if (position.includes("bottom") &&
-                availableBottomPx > minimumApprovedHeightPx) {
-                setMaxAllowedHeightPx(availableBottomPx);
+        }
+        let topMarginPx = 0;
+        let bottomMarginPx = 0;
+        if (topMostEl) {
+            const cs = window.getComputedStyle(topMostEl);
+            topMarginPx = parseFloat(cs.marginTop || "0") || 0;
+        }
+        if (bottomMostEl) {
+            const cs = window.getComputedStyle(bottomMostEl);
+            bottomMarginPx = parseFloat(cs.marginBottom || "0") || 0;
+        }
+        const unionHeight = Math.max(0, maxBottom - minTop);
+        const total = unionHeight + topMarginPx + bottomMarginPx + bordersPx;
+        el.style.height = prevHeight;
+        el.style.maxHeight = prevMaxHeight;
+        return Math.max(0, total);
+    }, []);
+    const calculateContentHeight = react.useCallback(() => {
+        if (!wrapperRef.current || !(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current)) {
+            return;
+        }
+        const triggerRect = containerRef.current.getBoundingClientRect();
+        const viewportH = window.innerHeight || document.documentElement.clientHeight;
+        const availableTopPx = Math.max(0, triggerRect.top - edgeDistance);
+        const availableBottomPx = Math.max(0, viewportH - triggerRect.bottom - edgeDistance);
+        const preferTop = position.includes("top");
+        if (optionsCount === 0) {
+            const preferSpace = preferTop ? availableTopPx : availableBottomPx;
+            const otherSpace = preferTop ? availableBottomPx : availableTopPx;
+            const minUsable = 20;
+            if (preferSpace >= minUsable || otherSpace < minUsable) {
+                setMaxAllowedHeightIfChanged(preferSpace);
+                setForcedPositionYIfChanged(undefined);
                 return;
             }
-            if (position.includes("bottom") &&
-                availableBottomPx <= minimumApprovedHeightPx) {
-                setMaxAllowedHeightPx(availableTopPx);
-                setForcedPositionY({ top: "auto", bottom: "100%" });
-                return;
+            setMaxAllowedHeightIfChanged(otherSpace);
+            setForcedPositionYIfChanged(preferTop
+                ? { top: "100%", bottom: "auto" }
+                : { top: "auto", bottom: "100%" });
+            return;
+        }
+        let liHeight = cachedListItemHeightRef.current;
+        if (!liHeight) {
+            const li = wrapperRef.current.querySelector("li");
+            const height = (li === null || li === void 0 ? void 0 : li.getBoundingClientRect().height) || 0;
+            if (height > 0) {
+                liHeight = height;
+                cachedListItemHeightRef.current = height;
             }
-            setForcedPositionY(undefined);
         }
-    }, [containerRef, position]);
-    const preventFromOverflowY = react.useCallback(() => {
-        if (!(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) || !wrapperRef.current)
-            return;
-        const dropdownHeightPx = containerRef.current.scrollHeight;
-        const dropdownPositionYPx = containerRef.current.getBoundingClientRect().y;
-        const viewportHeightPx = window.innerHeight || document.documentElement.clientHeight;
-        const isOverflowingTop = dropdownPositionYPx < wrapperRef.current.scrollHeight;
-        const isOverflowingBottom = dropdownPositionYPx + dropdownHeightPx + wrapperRef.current.clientHeight >
-            viewportHeightPx;
-        if (!isOverflowingTop && !isOverflowingBottom && !maxAllowedHeightPx) {
-            calculateContentHeight();
+        if (!liHeight) {
+            setMaxAllowedHeightIfChanged(preferTop ? availableTopPx : availableBottomPx);
+            setForcedPositionYIfChanged(undefined);
             return;
         }
-        if (!isOverflowingTop && isOverflowingBottom) {
-            setForcedPositionY({ top: "auto", bottom: "100%" });
-            calculateContentHeight();
+        const min2 = liHeight * 2;
+        const isTopOk = availableTopPx >= min2;
+        const isBottomOk = availableBottomPx >= min2;
+        if (!isTopOk && !isBottomOk) {
+            setMaxAllowedHeightIfChanged(preferTop ? availableTopPx : availableBottomPx);
+            setForcedPositionYIfChanged(undefined);
             return;
         }
-        if (isOverflowingTop && !isOverflowingBottom) {
-            setForcedPositionY({ top: "100%", bottom: "auto" });
-            calculateContentHeight();
-            return;
+        if (preferTop) {
+            if (isTopOk) {
+                setMaxAllowedHeightIfChanged(availableTopPx);
+                setForcedPositionYIfChanged(undefined);
+            }
+            else {
+                setMaxAllowedHeightIfChanged(availableBottomPx);
+                setForcedPositionYIfChanged({ top: "100%", bottom: "auto" });
+            }
         }
-        if (isOverflowingTop && isOverflowingBottom) {
-            calculateContentHeight();
+        else {
+            if (isBottomOk) {
+                setMaxAllowedHeightIfChanged(availableBottomPx);
+                setForcedPositionYIfChanged(undefined);
+            }
+            else {
+                setMaxAllowedHeightIfChanged(availableTopPx);
+                setForcedPositionYIfChanged({ top: "auto", bottom: "100%" });
+            }
         }
-    }, [containerRef, calculateContentHeight, maxAllowedHeightPx]);
+    }, [
+        containerRef,
+        position,
+        optionsCount,
+        setForcedPositionYIfChanged,
+        setMaxAllowedHeightIfChanged,
+    ]);
+    const preventFromOverflowY = react.useCallback(() => {
+        if (!(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) || !wrapperRef.current)
+            return;
+        calculateContentHeight();
+    }, [containerRef, calculateContentHeight]);
     const reCalcHeightFromContent = react.useCallback(() => {
         const wrapperElement = wrapperRef.current;
-        if (!wrapperElement)
+        if (!wrapperElement) {
             return;
-        const wrapperVerticalBordersPx = getElementVerticalBorders(wrapperElement);
-        const firstListItemElement = wrapperElement.querySelector("li");
-        const isListRenderedInDom = !!firstListItemElement;
-        if (!isListRenderedInDom) {
-            cachedListItemHeightRef.current = null;
         }
+        const bordersPx = getElementVerticalBorders(wrapperElement);
         let calculatedContentHeight;
-        if (isListRenderedInDom && optionsCount > 0) {
-            let listItemHeightPx = cachedListItemHeightRef.current;
-            if (!listItemHeightPx) {
-                listItemHeightPx =
-                    firstListItemElement.getBoundingClientRect().height || null;
-                if (listItemHeightPx) {
-                    cachedListItemHeightRef.current = listItemHeightPx;
+        if (optionsCount > 0) {
+            const firstLi = wrapperElement.querySelector("li");
+            let liHeight = cachedListItemHeightRef.current;
+            if (!liHeight && firstLi) {
+                const h = firstLi.getBoundingClientRect().height || 0;
+                if (h > 0) {
+                    liHeight = h;
+                    cachedListItemHeightRef.current = h;
                 }
             }
-            calculatedContentHeight = listItemHeightPx
-                ? listItemHeightPx * optionsCount + wrapperVerticalBordersPx
-                : wrapperVerticalBordersPx;
-        }
-        else {
-            const firstChildElement = wrapperElement.firstElementChild;
-            if (!firstChildElement) {
-                calculatedContentHeight = wrapperVerticalBordersPx;
+            if (liHeight && liHeight > 0) {
+                calculatedContentHeight = liHeight * optionsCount + bordersPx;
             }
             else {
-                const previousHeight = wrapperElement.style.height;
-                const previousMaxHeight = wrapperElement.style.maxHeight;
+                const prevHeight = wrapperElement.style.height;
+                const prevMaxHeight = wrapperElement.style.maxHeight;
                 wrapperElement.style.height = "auto";
                 wrapperElement.style.maxHeight = "none";
                 wrapperElement.offsetHeight;
-                const firstChildRectHeight = firstChildElement.getBoundingClientRect().height || 0;
-                wrapperElement.style.height = previousHeight;
-                wrapperElement.style.maxHeight = previousMaxHeight;
-                const firstChildComputedStyles = window.getComputedStyle(firstChildElement);
-                const marginTopPx = parseFloat(firstChildComputedStyles.marginTop || "0") || 0;
-                const marginBottomPx = parseFloat(firstChildComputedStyles.marginBottom || "0") || 0;
                 calculatedContentHeight =
-                    firstChildRectHeight +
-                        marginTopPx +
-                        marginBottomPx +
-                        wrapperVerticalBordersPx;
+                    (wrapperElement.scrollHeight || 0) + bordersPx;
+                wrapperElement.style.height = prevHeight;
+                wrapperElement.style.maxHeight = prevMaxHeight;
             }
         }
-        const clampedContentHeight = maxAllowedHeightPx > 0
+        else {
+            calculatedContentHeight = measureVisualContentHeightPx();
+        }
+        const clamped = maxAllowedHeightPx > 0
             ? Math.min(calculatedContentHeight, maxAllowedHeightPx)
             : calculatedContentHeight;
-        setMeasuredContentHeightPx(Math.max(0, Math.round(clampedContentHeight)));
-    }, [optionsCount, maxAllowedHeightPx]);
+        setMeasuredContentHeightPx((prev) => {
+            const next = Math.max(0, Math.round(clamped));
+            return prev === next ? prev : next;
+        });
+    }, [optionsCount, maxAllowedHeightPx, measureVisualContentHeightPx]);
     react.useLayoutEffect(() => {
         preventFromOverflowY();
         requestAnimationFrame(() => {
@@ -783,46 +923,56 @@ const ZDropListAutoHeightWrapper = (props) => {
     }, [preventFromOverflowY, reCalcHeightFromContent]);
     react.useLayoutEffect(() => {
         cachedListItemHeightRef.current = null;
-        setForcedPositionY(undefined);
         let raf1 = 0;
         let raf2 = 0;
+        let raf3 = 0;
+        preventFromOverflowY();
+        reCalcHeightFromContent();
         raf1 = requestAnimationFrame(() => {
+            preventFromOverflowY();
+            reCalcHeightFromContent();
             raf2 = requestAnimationFrame(() => {
                 preventFromOverflowY();
                 reCalcHeightFromContent();
+                raf3 = requestAnimationFrame(() => {
+                    preventFromOverflowY();
+                    reCalcHeightFromContent();
+                });
             });
         });
         return () => {
             cancelAnimationFrame(raf1);
             cancelAnimationFrame(raf2);
+            cancelAnimationFrame(raf3);
         };
     }, [optionsCount, preventFromOverflowY, reCalcHeightFromContent]);
     react.useLayoutEffect(() => {
-        let resizeTimeoutId;
+        let rafId = 0;
         const onResize = () => {
             cachedListItemHeightRef.current = null;
-            setForcedPositionY(undefined);
-            clearTimeout(resizeTimeoutId);
-            resizeTimeoutId = setTimeout(() => {
+            cancelAnimationFrame(rafId);
+            rafId = requestAnimationFrame(() => {
                 preventFromOverflowY();
                 reCalcHeightFromContent();
-            }, 50);
+            });
         };
         window.addEventListener("resize", onResize);
         return () => {
-            clearTimeout(resizeTimeoutId);
+            cancelAnimationFrame(rafId);
             window.removeEventListener("resize", onResize);
         };
     }, [preventFromOverflowY, reCalcHeightFromContent]);
-    react.useLayoutEffect(() => {
-        reCalcHeightFromContent();
-    }, [maxAllowedHeightPx, forcedPositionY, reCalcHeightFromContent]);
+    const baseY = position.includes("top")
+        ? { top: "auto", bottom: "100%" }
+        : { top: "100%", bottom: "auto" };
     const positionStyles = {
         position: "absolute",
-        ...(position.includes("top") ? { bottom: "100%" } : { top: "100%" }),
-        ...(forcedPositionY && { ...forcedPositionY }),
-        ...(maxAllowedHeightPx && { maxHeight: `${maxAllowedHeightPx}px` }),
-        height: `${measuredContentHeightPx}px`,
+        ...baseY,
+        ...(forcedPositionY !== null && forcedPositionY !== void 0 ? forcedPositionY : {}),
+        ...(maxAllowedHeightPx ? { maxHeight: `${maxAllowedHeightPx}px` } : {}),
+        ...(measuredContentHeightPx > 0
+            ? { height: `${measuredContentHeightPx}px` }
+            : {}),
         overflowY: "auto",
     };
     return (jsxRuntime.jsx("div", { className: wrapperClasses, style: positionStyles, ref: wrapperRef, children: children }));
@@ -1173,7 +1323,6 @@ const ZDropField = (props) => {
 exports.ZDrop = ZDrop;
 exports.ZDropField = ZDropField;
 exports.classNames = classNames;
-exports.getAvailableSpace = getAvailableSpace;
 exports.getElementVerticalBorders = getElementVerticalBorders;
 exports.useOutsideClose = useOutsideClose;
-//# sourceMappingURL=index-BbHVfHYa.js.map
+//# sourceMappingURL=index-8z2jr57w.js.map