zcomponents-ui 1.1.5 → 1.2.0

package/dist/{index-CR39mAMA.js → index-DC_KVC71.js}

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Controller } from 'react-hook-form';
-import { useEffect, useState, useCallback, useRef } from 'react';
+import { useEffect, useState, useRef, useLayoutEffect, useCallback } from 'react';
 
 const classNames = (...params) => {
     const classes = [];
@@ -10,7 +10,7 @@ const classNames = (...params) => {
         }
         else if (param && typeof param === "object") {
             Object.entries(param).forEach(([key, value]) => {
-                if (value) {
+                if (typeof key === "string" && key !== "undefined" && value) {
                     classes.push(key);
                 }
             });
@@ -19,7 +19,9 @@ const classNames = (...params) => {
     return classes.join(" ");
 };
 
-const useOutsideClose = (ref, onOutsideClose) => {
+const useOutsideClose = (ref, onOutsideClose, settings) => {
+    var _a;
+    const isActive = (_a = settings === null || settings === void 0 ? void 0 : settings.isActive) !== null && _a !== void 0 ? _a : true;
     useEffect(() => {
         const handleClick = (e) => {
             if (ref &&
@@ -33,20 +35,26 @@ const useOutsideClose = (ref, onOutsideClose) => {
                 onOutsideClose(e);
             }
         };
-        document.addEventListener("click", handleClick);
-        document.addEventListener("keydown", handleKey);
+        if (isActive) {
+            document.addEventListener("click", handleClick);
+            document.addEventListener("keydown", handleKey);
+        }
+        else {
+            document.removeEventListener("click", handleClick);
+            document.removeEventListener("keydown", handleKey);
+        }
         return () => {
             document.removeEventListener("click", handleClick);
             document.removeEventListener("keydown", handleKey);
         };
-    }, [onOutsideClose, ref]);
+    }, [onOutsideClose, ref, isActive]);
 };
 
-var styles = {"container":"ZDrop-module_container__FMb26","label":"ZDrop-module_label__WDDr6","inputField":"ZDrop-module_inputField__QPEyq","inputField--multiple":"ZDrop-module_inputField--multiple__ceTgA","inputField--disabled":"ZDrop-module_inputField--disabled__Iocv1","input":"ZDrop-module_input__k-MBA","inputSingle":"ZDrop-module_inputSingle__zZmCf","inputSingleSearch":"ZDrop-module_inputSingleSearch__oIk6K","inputMultiple":"ZDrop-module_inputMultiple__oF9wt","inputMultipleValue":"ZDrop-module_inputMultipleValue__lSYME","inputMultipleValueRemoveBtn":"ZDrop-module_inputMultipleValueRemoveBtn__gbFkS","inputMultipleValueRemoveBtnIcon":"ZDrop-module_inputMultipleValueRemoveBtnIcon__i4VBS","inputMultipleSearchWrapper":"ZDrop-module_inputMultipleSearchWrapper__vmS7x","inputMultipleSearch":"ZDrop-module_inputMultipleSearch__-lQrC","inputMultiplePlaceholder":"ZDrop-module_inputMultiplePlaceholder__GbBo7","inputClearBtnWrapper":"ZDrop-module_inputClearBtnWrapper__S3uiC","inputClearBtn":"ZDrop-module_inputClearBtn__JY5Gm","inputClearBtnIcon":"ZDrop-module_inputClearBtnIcon__PXRiJ","expandToggle":"ZDrop-module_expandToggle__zJYI1","expandToggleIcon":"ZDrop-module_expandToggleIcon__63Yog","expandToggleIcon--active":"ZDrop-module_expandToggleIcon--active__h2I5u","listWrapper":"ZDrop-module_listWrapper__FGHRj","list":"ZDrop-module_list__162r4","list--wrapper-enabled":"ZDrop-module_list--wrapper-enabled__lCi39","option":"ZDrop-module_option__ZfKFl","noData":"ZDrop-module_noData__-70Uu","option--active":"ZDrop-module_option--active__OXcv5","errorMessage":"ZDrop-module_errorMessage__8YOT7"};
+var styles = {"zd__container":"ZDrop-module_zd__container__IrQTk","zd__label":"ZDrop-module_zd__label__keSwp","zd__input-field":"ZDrop-module_zd__input-field__Ne8t8","zd__input-field--multiple":"ZDrop-module_zd__input-field--multiple__kDSP5","zd__input-field--disabled":"ZDrop-module_zd__input-field--disabled__LOUpU","zd__input":"ZDrop-module_zd__input__r3qdf","zd__input-single":"ZDrop-module_zd__input-single__tM76E","zd__input-single-search":"ZDrop-module_zd__input-single-search__j4zof","zd__input-multiple":"ZDrop-module_zd__input-multiple__AzD1G","zd__input-multiple-value":"ZDrop-module_zd__input-multiple-value__4ZAHf","zd__input-multiple-value-remove-btn":"ZDrop-module_zd__input-multiple-value-remove-btn__gSzGH","zd__input-multiple-value-remove-btn-icon":"ZDrop-module_zd__input-multiple-value-remove-btn-icon__23GYv","zd__input-multiple-search-wrapper":"ZDrop-module_zd__input-multiple-search-wrapper__va0lS","zd__input-multiple-search":"ZDrop-module_zd__input-multiple-search__5K3Z9","zd__input-multiple-placeholder":"ZDrop-module_zd__input-multiple-placeholder__tx34F","zd__input-clear-btn-wrapper":"ZDrop-module_zd__input-clear-btn-wrapper__drnqP","zd__input-clear-btn":"ZDrop-module_zd__input-clear-btn__wqpAG","zd__input-clear-btn-icon":"ZDrop-module_zd__input-clear-btn-icon__4wsoa","zd__expand-toggle":"ZDrop-module_zd__expand-toggle__5-2LH","zd__expand-toggle-icon":"ZDrop-module_zd__expand-toggle-icon__Vznjq","zd__expand-toggle-icon--active":"ZDrop-module_zd__expand-toggle-icon--active__I4ZEa","zd__list":"ZDrop-module_zd__list__q8lwW","zd__list-wrapper":"ZDrop-module_zd__list-wrapper__dWpmK","zd__list-auto-height-wrapper":"ZDrop-module_zd__list-auto-height-wrapper__UxW3X","zd__list--auto-height-enabled":"ZDrop-module_zd__list--auto-height-enabled__qwsev","zd__list--reference-wrapper-enabled":"ZDrop-module_zd__list--reference-wrapper-enabled__Ufhb0","zd__option":"ZDrop-module_zd__option__Zf2Fo","zd__no-data":"ZDrop-module_zd__no-data__7cCZK","zd__option--active":"ZDrop-module_zd__option--active__u-S9s","zd__error-message":"ZDrop-module_zd__error-message__XL-DS"};
 
 const ZDropLabel = (props) => {
     const { name, label, className } = props;
-    const labelClasses = classNames(styles.label, className);
+    const labelClasses = classNames(styles["zd__label"], className);
     if (typeof label === "string") {
         return (jsx("label", { htmlFor: name, className: labelClasses, children: label }));
     }
@@ -66,7 +74,7 @@ const ZDropListItem = (props) => {
 
 const ZDropListNoData = (props) => {
     const { noDataContent, className } = props;
-    const noDataClasses = classNames(styles.noData, className);
+    const noDataClasses = classNames(styles["zd__no-data"], className);
     return jsx("div", { className: noDataClasses, children: noDataContent });
 };
 
@@ -91,43 +99,49 @@ const checkIsValueEqualToOption = (selectedValue, option, valueKey) => {
     return false;
 };
 
-const checkIsEqualMultiple = (checkIsInputValueEqualToOptionValue, value, option, valueKey) => value.some((value) => checkIsInputValueEqualToOptionValue(value, option, valueKey));
+const checkIsOptionSelected = (checkIsInputValueEqualToOptionValue, value, option, valueKey) => value.some((value) => checkIsInputValueEqualToOptionValue(value, option, valueKey));
+
 const ZDropList = (props) => {
-    const { options = [], selectedValue, valueKey, labelKey, optionsRef, optionRenderer, onOptionClick, onOptionKeyDown, noDataContent, currentSearchedValue, listStyleClasses, isListWrapperEnabled, } = props;
-    const dropdownListClasses = classNames(styles.list, listStyleClasses === null || listStyleClasses === void 0 ? void 0 : listStyleClasses.list, {
-        [styles["list--wrapper-enabled"]]: !!isListWrapperEnabled,
-    });
-    const getListItemClasses = (option) => {
+    const { options = [], selectedValue, valueKey, labelKey, optionsRef, optionRenderer, onOptionClick, onOptionKeyDown, noDataContent, currentSearchedValue, listStyleClasses, isListWrapperEnabled, isAutoHeightEnabled, } = props;
+    const dropdownListClasses = classNames({
+        [styles["zd__list"]]: !isAutoHeightEnabled,
+        [styles["zd__list--auto-height-enabled"]]: isAutoHeightEnabled,
+        [styles["zd__list--reference-wrapper-enabled"]]: isListWrapperEnabled,
+    }, listStyleClasses === null || listStyleClasses === void 0 ? void 0 : listStyleClasses.list);
+    console.log("render list", dropdownListClasses, isAutoHeightEnabled);
+    const getListItemClasses = (option, isOptionSelected) => {
         if (Array.isArray(selectedValue)) {
-            return classNames(styles.option, listStyleClasses === null || listStyleClasses === void 0 ? void 0 : listStyleClasses.listItem, {
-                [styles["option--active"]]: checkIsEqualMultiple(checkIsValueEqualToOption, selectedValue, option, valueKey),
-            });
+            return classNames(styles["zd__option"], {
+                [styles["zd__option--active"]]: isOptionSelected,
+            }, listStyleClasses === null || listStyleClasses === void 0 ? void 0 : listStyleClasses.listItem);
         }
-        return classNames(styles.option, listStyleClasses === null || listStyleClasses === void 0 ? void 0 : listStyleClasses.listItem, {
-            [styles["option--active"]]: checkIsValueEqualToOption(selectedValue, option, valueKey),
-        });
+        return classNames(styles["zd__option"], {
+            [styles["zd__option--active"]]: isOptionSelected,
+        }, listStyleClasses === null || listStyleClasses === void 0 ? void 0 : listStyleClasses.listItem);
     };
     if (options.length === 0) {
         return (jsx(ZDropListNoData, { noDataContent: noDataContent, className: listStyleClasses === null || listStyleClasses === void 0 ? void 0 : listStyleClasses.noData }));
     }
-    return (jsx("ul", { className: dropdownListClasses, children: options.map((option, index) => (jsx(ZDropListItem, { innerRef: (el) => {
-                optionsRef.current[index] = el;
-            }, option: option, index: index, labelKey: labelKey, onOptionClick: onOptionClick, onOptionKeyDown: onOptionKeyDown, className: getListItemClasses(option), children: optionRenderer === null || optionRenderer === void 0 ? void 0 : optionRenderer(option, Array.isArray(selectedValue)
-                ? checkIsEqualMultiple(checkIsValueEqualToOption, selectedValue, option, valueKey)
-                : checkIsValueEqualToOption(selectedValue, option, valueKey), currentSearchedValue) }, (option === null || option === void 0 ? void 0 : option[valueKey]) || index))) }));
+    return (jsx("ul", { className: dropdownListClasses, children: options.map((option, index) => {
+            const isOptionSelected = Array.isArray(selectedValue)
+                ? checkIsOptionSelected(checkIsValueEqualToOption, selectedValue, option, valueKey)
+                : checkIsValueEqualToOption(selectedValue, option, valueKey);
+            return (jsx(ZDropListItem, { innerRef: (el) => {
+                    optionsRef.current[index] = el;
+                }, option: option, index: index, labelKey: labelKey, onOptionClick: onOptionClick, onOptionKeyDown: onOptionKeyDown, className: getListItemClasses(option, isOptionSelected), children: optionRenderer === null || optionRenderer === void 0 ? void 0 : optionRenderer(option, isOptionSelected, currentSearchedValue) }, (option === null || option === void 0 ? void 0 : option[valueKey]) || index));
+        }) }));
 };
 
 const ZDropListVisibilityToggle = (props) => {
     const { expandToggleRenderer, onClick, isListVisible, toggleStyleClasses } = props;
-    const toggleClasses = classNames(styles.expandToggle, toggleStyleClasses === null || toggleStyleClasses === void 0 ? void 0 : toggleStyleClasses.expandToggle);
-    const iconClasses = classNames(styles.expandToggleIcon, toggleStyleClasses === null || toggleStyleClasses === void 0 ? void 0 : toggleStyleClasses.expandToggleIcon, {
-        [styles["expandToggleIcon--active"]]: isListVisible,
-    });
-    console.log(iconClasses);
+    const toggleClasses = classNames(styles["zd__expand-toggle"], toggleStyleClasses === null || toggleStyleClasses === void 0 ? void 0 : toggleStyleClasses.expandToggle);
+    const iconClasses = classNames(styles["zd__expand-toggle-icon"], {
+        [styles["zd__expand-toggle-icon--active"]]: isListVisible,
+    }, toggleStyleClasses === null || toggleStyleClasses === void 0 ? void 0 : toggleStyleClasses.expandToggleIcon);
     return (jsx("div", { className: toggleClasses, onClick: onClick, children: expandToggleRenderer ? (jsx("span", { children: expandToggleRenderer(isListVisible) })) : (jsx("span", { className: iconClasses })) }));
 };
 
-const checkIsClearHidden = (hasValueChanged, currentSearchedValue, isListVisible, isClearableOnlyWhenChange, isClearableOnlyWhenSearch) => {
+const checkIsClearButtonHidden = (hasValueChanged, currentSearchedValue, isListVisible, isClearableOnlyWhenChange, isClearableOnlyWhenSearch) => {
     if (isClearableOnlyWhenChange && !isListVisible && hasValueChanged) {
         return false;
     }
@@ -144,22 +158,22 @@ const checkIsClearHidden = (hasValueChanged, currentSearchedValue, isListVisible
 
 const ZDropClearButton = (props) => {
     const { hasValueChanged, currentSearchedValue, onInputClear, isListVisible, isClearableOnlyWhenChange, isClearableOnlyWhenSearch, className, clearIcon, } = props;
-    const clearButtonClasses = classNames(styles.inputClearBtn, className);
+    const clearButtonClasses = classNames(styles["zd__input-clear-btn"], className);
     const onClear = (e) => {
         e.preventDefault();
         e.stopPropagation();
         e.nativeEvent.stopImmediatePropagation();
         onInputClear();
     };
-    if (checkIsClearHidden(hasValueChanged, currentSearchedValue, isListVisible, isClearableOnlyWhenChange, isClearableOnlyWhenSearch)) {
+    if (checkIsClearButtonHidden(hasValueChanged, currentSearchedValue, isListVisible, isClearableOnlyWhenChange, isClearableOnlyWhenSearch)) {
         return null;
     }
-    return (jsx("div", { className: styles.inputClearBtnWrapper, children: jsx("button", { tabIndex: -1, className: clearButtonClasses, onClick: onClear, children: clearIcon || jsx("span", { className: styles.inputClearBtnIcon }) }) }));
+    return (jsx("div", { className: styles["zd__input-clear-btn-wrapper"], children: jsx("button", { tabIndex: -1, className: clearButtonClasses, onClick: onClear, children: clearIcon || jsx("span", { className: styles["zd__input-clear-btn-icon"] }) }) }));
 };
 
 const ZDropMultipleInputValue = (props) => {
     const { option, labelType, onInputOptionRemove, valueRenderer, inputMultipleValueClassName, isDisabled, } = props;
-    const inputItemClasses = classNames(styles.inputMultipleValue, inputMultipleValueClassName);
+    const inputItemClasses = classNames(styles["zd__input-multiple-value"], inputMultipleValueClassName);
     if (option === null || option === undefined) {
         return null;
     }
@@ -175,14 +189,14 @@ const ZDropMultipleInputValue = (props) => {
     }
     return (jsxs("li", { tabIndex: -1, className: inputItemClasses, children: [jsx("span", { children: typeof option === "object" && option !== null
                     ? option[labelType] || option
-                    : option }), onInputOptionRemove && !isDisabled && (jsx("button", { tabIndex: 0, className: styles.inputMultipleValueRemoveBtn, onClick: (e) => onInputOptionRemove(e, option), children: jsx("span", { className: styles.inputMultipleValueRemoveBtnIcon }) }))] }));
+                    : option }), onInputOptionRemove && !isDisabled && (jsx("button", { tabIndex: 0, className: styles["zd__input-multiple-value-remove-btn"], onClick: (e) => onInputOptionRemove(e, option), children: jsx("span", { className: styles["zd__input-multiple-value-remove-btn-icon"] }) }))] }));
 };
 
 const ZDropMultipleInput = (props) => {
     const { isListVisible, setIsListVisible, name, selectedValue, valueKey, labelKey, placeholder, isDisabled, isSearchable, currentSearchedValue, valueRenderer, inputRefMultipleValueRenderer, onInputClick, onInputKeyDown, onInputChange, onInputOptionRemove, inputClassName, inputMultipleValueClassName, inputMultipleSearchClassName, } = props;
-    const inputSelectClasses = classNames(styles.input, styles.inputMultiple, inputClassName);
-    const inputMultipleSearchClasses = classNames(styles.inputMultipleSearch);
-    const inputMultipleSearchWrapperClasses = classNames(styles.inputMultiple, styles.inputMultipleSearchWrapper, inputMultipleSearchClassName);
+    const inputSelectClasses = classNames(styles["zd__input"], styles["zd__input-multiple"], inputClassName);
+    const inputMultipleSearchClasses = classNames(styles["zd__input-multiple-search"]);
+    const inputMultipleSearchWrapperClasses = classNames(styles["zd__input-multiple"], styles["zd__input-multiple-search-wrapper"], inputMultipleSearchClassName);
     const onKeyDown = (e) => {
         if (["Enter"].includes(e.key)) {
             e.preventDefault();
@@ -196,12 +210,12 @@ const ZDropMultipleInput = (props) => {
     return (jsxs("ul", { tabIndex: 0, className: inputSelectClasses, onClick: onInputClick, onKeyDown: onInputKeyDown, ...(isDisabled && { style: { pointerEvents: "none" } }), children: [selectedValue.map((option) => (jsx(ZDropMultipleInputValue, { option: option, labelType: labelKey, onInputOptionRemove: onInputOptionRemove, valueRenderer: valueRenderer, inputMultipleValueClassName: inputMultipleValueClassName, isDisabled: isDisabled }, typeof option === "object" && !Array.isArray(option)
                 ? option[valueKey]
                 : option))), ((!isListVisible && selectedValue.length === 0) ||
-                ((selectedValue.length === 0 || !selectedValue) && !isSearchable)) && (jsx("span", { className: styles.inputMultiplePlaceholder, onClick: onPlaceholderClick, children: placeholder })), isSearchable && isListVisible && (jsx("li", { className: inputMultipleSearchWrapperClasses, children: jsx("input", { ref: inputRefMultipleValueRenderer, name: name, className: inputMultipleSearchClasses, placeholder: "search ...", value: currentSearchedValue, onChange: onInputChange, onKeyDown: onKeyDown }) }))] }));
+                ((selectedValue.length === 0 || !selectedValue) && !isSearchable)) && (jsx("span", { className: styles["zd__input-multiple-placeholder"], onClick: onPlaceholderClick, children: placeholder })), isSearchable && isListVisible && (jsx("li", { className: inputMultipleSearchWrapperClasses, children: jsx("input", { ref: inputRefMultipleValueRenderer, name: name, className: inputMultipleSearchClasses, placeholder: "search ...", value: currentSearchedValue, onChange: onInputChange, onKeyDown: onKeyDown }) }))] }));
 };
 
 const ZDropSingleInputValueRenderer = (props) => {
     const { name, isInputItemVisible, isSearchable, selectedValue, selectedOption, valueRenderer, inputValue, isListVisible, placeholder, inputRefSingleValueRenderer, onChange, onInputItemClick, onInputOptionRemove, inputValueClassName, } = props;
-    const inputValueClasses = classNames(styles.inputSingleSearch, inputValueClassName);
+    const inputValueClasses = classNames(styles["zd__input-single-search"], inputValueClassName);
     return (jsxs(Fragment, { children: [isInputItemVisible && selectedOption !== undefined && (jsx("div", { onClick: onInputItemClick, children: valueRenderer({
                     option: selectedOption,
                     onRemove: (e) => onInputOptionRemove(e, selectedOption),
@@ -234,12 +248,13 @@ const getLabelFromOption = (options, selectedValue, valueKey, labelKey) => {
     }
     return "";
 };
+
 const ZDropSingleInput = (props) => {
     const { options, name, selectedValue, currentSearchedValue, setCurrentSearchedValue, valueKey, labelKey, isListVisible, placeholder, isDisabled, isSearchable = false, valueRenderer, inputRef, inputRefSingleValueRenderer, onInputClick, onInputItemClick, onInputKeyDown, onInputChange, onInputOptionRemove, isInputItemVisible, inputValueClassName, inputClassName, } = props;
     const [inputValue, setInputValue] = useState(getLabelFromOption(options, selectedValue, valueKey, valueKey));
-    const inputSelectClasses = classNames(styles.input, inputClassName, {
-        [styles.inputSingle]: !!valueRenderer,
-    });
+    const inputSelectClasses = classNames(styles["zd__input"], {
+        [styles["zd__input-single"]]: !!valueRenderer,
+    }, inputClassName);
     const selectedOption = options.find((option) => {
         if (typeof option === "object" &&
             option !== null &&
@@ -337,28 +352,15 @@ const getCurrentMultipleValue = (selected, selectedValue, options, valueKey) =>
     return [...(isSelectedValueArray ? selectedValue : []), selected];
 };
 
-const getElementOffsetTop = (element) => {
-    var _a, _b, _c;
-    if (!element)
-        return 0;
-    const rect = element.getBoundingClientRect();
-    const scrollTop = (_c = (_b = (_a = window.pageYOffset) !== null && _a !== void 0 ? _a : document.documentElement.scrollTop) !== null && _b !== void 0 ? _b : document.body.scrollTop) !== null && _c !== void 0 ? _c : 0;
-    return rect.top + scrollTop;
-};
+const getElementOffsetTop = (element) => { var _a; return element ? element.getBoundingClientRect().top + ((_a = window.scrollY) !== null && _a !== void 0 ? _a : 0) : 0; };
 const getReferenceElementDimensions = (element, elementParentClass) => {
-    const parent = element === null || element === void 0 ? void 0 : element.parentElement;
-    if (!parent)
-        return;
-    if (parent.classList.contains(elementParentClass)) {
-        const top = getElementOffsetTop(parent);
-        const height = parent.scrollHeight;
-        return {
-            top,
-            bottom: top + height,
-            height,
-        };
+    for (let el = element === null || element === void 0 ? void 0 : element.parentElement; el; el = el.parentElement) {
+        if (el.classList.contains(elementParentClass)) {
+            const top = getElementOffsetTop(el);
+            const height = el.scrollHeight;
+            return { top, bottom: top + height, height };
+        }
     }
-    return getReferenceElementDimensions(parent, elementParentClass);
 };
 
 const distanceGap = 0;
@@ -375,51 +377,29 @@ const ZDropListWrapper = (props) => {
     const [maxSpaceAbove, setMaxSpaceAbove] = useState(0);
     const [maxSpaceBelow, setMaxSpaceBelow] = useState(0);
     const [scrollHeight, setScrollHeight] = useState(0);
+    const listWrapperRef = useRef(null);
     const hasTopSpace = maxSpaceAbove > minUsableHeight;
     const hasBottomSpace = maxSpaceBelow > minUsableHeight;
     let finalPosition;
     if (positionToReferenceElement === "top") {
-        if (hasTopSpace) {
+        if (hasTopSpace)
             finalPosition = "top";
-        }
-        else if (hasBottomSpace) {
+        else if (hasBottomSpace)
             finalPosition = "bottom";
-        }
-        else {
+        else
             finalPosition = maxSpaceAbove >= maxSpaceBelow ? "top" : "bottom";
-        }
     }
     else {
-        if (hasBottomSpace) {
+        if (hasBottomSpace)
             finalPosition = "bottom";
-        }
-        else if (hasTopSpace) {
+        else if (hasTopSpace)
             finalPosition = "top";
-        }
-        else {
+        else
             finalPosition = maxSpaceBelow >= maxSpaceAbove ? "bottom" : "top";
-        }
     }
     const heightForBottom = Math.min(scrollHeight, maxSpaceBelow, listMaxHeightLimiter !== null && listMaxHeightLimiter !== void 0 ? listMaxHeightLimiter : maxSpaceBelow);
     const heightForTop = calculateHeightForTop(scrollHeight, listMaxHeightLimiter !== null && listMaxHeightLimiter !== void 0 ? listMaxHeightLimiter : maxSpaceAbove, maxSpaceAbove);
     const finalHeight = finalPosition === "top" ? heightForTop : heightForBottom;
-    const setWrapperMaxSpaces = (element, referenceElementClassName) => {
-        const wrapperListOffsetTop = getElementOffsetTop(element);
-        const referenceElement = getReferenceElementDimensions(element, referenceElementClassName);
-        if (referenceElement) {
-            const above = Math.max(wrapperListOffsetTop - referenceElement.top - distanceGap, 0);
-            const below = Math.max(referenceElement.bottom - wrapperListOffsetTop - distanceGap, 0);
-            setMaxSpaceAbove(above);
-            setMaxSpaceBelow(below);
-            const content = element.children[0];
-            setScrollHeight(content ? content.scrollHeight : 0);
-        }
-    };
-    const listWrapperRef = useCallback((node) => {
-        if (node) {
-            setWrapperMaxSpaces(node, referenceElementClassName);
-        }
-    }, [referenceElementClassName]);
     const wrapperStyle = {
         position: "absolute",
         height: `${finalHeight}px`,
@@ -428,30 +408,168 @@ const ZDropListWrapper = (props) => {
             ? { top: `-${finalHeight + marginTop}px` }
             : { top: "100%" }),
     };
-    return (jsx("div", { className: styles.listWrapper, ref: listWrapperRef, style: wrapperStyle, children: children }));
+    const setWrapperMaxSpaces = (listWrapper, referenceClassName) => {
+        const anchor = listWrapper.parentElement;
+        if (!anchor) {
+            return;
+        }
+        const reference = getReferenceElementDimensions(anchor, referenceClassName);
+        if (!reference) {
+            return;
+        }
+        const anchorTop = getElementOffsetTop(anchor);
+        const anchorBottom = anchorTop + anchor.offsetHeight;
+        const above = Math.max(anchorTop - reference.top - distanceGap, 0);
+        const below = Math.max(reference.bottom - anchorBottom - distanceGap, 0);
+        setMaxSpaceAbove(above);
+        setMaxSpaceBelow(below);
+        const content = listWrapper.children[0];
+        setScrollHeight(content ? content.scrollHeight : 0);
+    };
+    useLayoutEffect(() => {
+        if (!(listWrapperRef === null || listWrapperRef === void 0 ? void 0 : listWrapperRef.current)) {
+            return;
+        }
+        setWrapperMaxSpaces(listWrapperRef.current, referenceElementClassName);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        referenceElementClassName,
+        positionToReferenceElement,
+        listMaxHeightLimiter,
+        children,
+    ]);
+    return (jsx("div", { className: styles["zd__list-wrapper"], ref: listWrapperRef, style: wrapperStyle, children: children }));
 };
 
-const deepEqual = (a, b) => {
-    if (a === b)
+const checkIsValueEqualToSelectedValue = (value, selectedValue) => {
+    if (value === selectedValue)
         return true;
-    if (a == null || b == null)
+    if (value == null || selectedValue == null)
         return false;
-    if (typeof a !== "object" || typeof b !== "object")
+    if (typeof value !== "object" || typeof selectedValue !== "object")
         return false;
-    if (Array.isArray(a) && Array.isArray(b)) {
-        if (a.length !== b.length)
+    if (Array.isArray(value) && Array.isArray(selectedValue)) {
+        if (value.length !== selectedValue.length)
             return false;
-        return a.every((el, i) => deepEqual(el, b[i]));
+        return value.every((valueItem, i) => checkIsValueEqualToSelectedValue(valueItem, selectedValue[i]));
     }
-    const keysA = Object.keys(a);
-    const keysB = Object.keys(b);
+    const keysA = Object.keys(value);
+    const keysB = Object.keys(selectedValue);
     if (keysA.length !== keysB.length)
         return false;
-    return keysA.every((key) => deepEqual(a[key], b[key]));
+    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 ZDropListAutoHeightWrapper = (props) => {
+    const { containerRef, position = "bottom", children } = props;
+    const contentRef = useRef(null);
+    const [forcedPositionY, setForcedPositionY] = useState();
+    const [contentHeightValue, setContentHeightValue] = useState();
+    console.log(contentHeightValue);
+    const positionStyles = {
+        position: "absolute",
+        ...(position.includes("top") ? { bottom: "100%" } : { top: "100%" }),
+        ...(forcedPositionY && { ...forcedPositionY }),
+        ...(contentHeightValue && { maxHeight: contentHeightValue + "px" }),
+    };
+    const calculateContentHeight = useCallback(() => {
+        var _a, _b;
+        if ((contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) && (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current)) {
+            const { top, bottom } = getAvailableSpace(containerRef.current);
+            console.log({ position, top, bottom });
+            const availableTop = Math.max(0, top);
+            const availableBottom = Math.max(0, bottom);
+            const liElementHeight = (_b = (_a = contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("li")) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().height;
+            if (!liElementHeight) {
+                return;
+            }
+            const approvedHeight = liElementHeight * 2;
+            if (position.includes("top") && availableTop > approvedHeight) {
+                setContentHeightValue(availableTop);
+                return;
+            }
+            if (position.includes("top") && availableTop <= approvedHeight) {
+                setContentHeightValue(availableBottom);
+                setForcedPositionY({ top: "100%", bottom: "auto" });
+                return;
+            }
+            if (position.includes("bottom") && availableBottom > approvedHeight) {
+                setContentHeightValue(availableBottom);
+                console.log("bottom available");
+                return;
+            }
+            if (position.includes("bottom") && availableBottom <= approvedHeight) {
+                setContentHeightValue(availableTop);
+                setForcedPositionY({ top: "auto", bottom: "100%" });
+            }
+        }
+    }, [containerRef, position]);
+    const preventFromOverflowY = useCallback(() => {
+        if (!(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) || !contentRef.current) {
+            return;
+        }
+        const dropdownHeight = containerRef.current.scrollHeight;
+        const dropdownPositionY = containerRef.current.getBoundingClientRect().y;
+        const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+        const isOverFlowTop = dropdownPositionY < contentRef.current.scrollHeight;
+        console.log({ dropdownPositionY, dropdownHeight, viewportHeight });
+        const isOverFlowBottom = dropdownPositionY + dropdownHeight + contentRef.current.clientHeight >
+            viewportHeight;
+        console.log({ isOverFlowTop, isOverFlowBottom });
+        if (!isOverFlowTop && !isOverFlowBottom) {
+            setForcedPositionY(undefined);
+            setContentHeightValue(undefined);
+            return;
+        }
+        if (!isOverFlowTop && isOverFlowBottom) {
+            setForcedPositionY({ top: "auto", bottom: "100%" });
+            setContentHeightValue(undefined);
+            return;
+        }
+        if (isOverFlowTop && !isOverFlowBottom) {
+            setForcedPositionY({ top: "100%", bottom: "auto" });
+            setContentHeightValue(undefined);
+            return;
+        }
+        if (isOverFlowTop && isOverFlowBottom) {
+            calculateContentHeight();
+        }
+    }, [containerRef, calculateContentHeight]);
+    useLayoutEffect(() => {
+        preventFromOverflowY();
+    }, [containerRef]);
+    useLayoutEffect(() => {
+        let timeId;
+        const onResize = () => {
+            clearTimeout(timeId);
+            timeId = setTimeout(() => {
+                preventFromOverflowY();
+            }, 50);
+        };
+        window.addEventListener("resize", onResize);
+        return () => {
+            clearTimeout(timeId);
+            window.removeEventListener("resize", onResize);
+        };
+    }, [preventFromOverflowY]);
+    return (jsx("div", { className: styles["zd__list-auto-height-wrapper"], style: positionStyles, ref: contentRef, children: children }));
 };
 
 const ZDrop = (props) => {
-    const { name, options, value, valueKey = "value", label, labelKey = "label", placeholder, isMultiple = false, isDisabled = false, isSearchable = false, clear = "none", searchFilterDelay, searchFilter = defaultSearchFilter, shouldReturnObjectOnChange = false, onChange, onBlur, onClear, valueRenderer, optionRenderer, expandToggleRenderer, clearIcon, noDataContent, referenceElementClassName, positionToReferenceElement, listMaxHeightLimiter, styleClasses, } = props;
+    const { name, options, value, valueKey = "value", label, labelKey = "label", placeholder, isMultiple = false, isDisabled = false, isSearchable = false, clear = "none", searchFilterDelay, searchFilter = defaultSearchFilter, shouldReturnObjectOnChange = false, onChange, onBlur, onClear, valueRenderer, optionRenderer, expandToggleRenderer, clearIcon, noDataContent, referenceElementClassName, positionToReferenceElement, autoHeightPosition, isAutoHeightEnabled, listMaxHeightLimiter, styleClasses, } = props;
     const containerRef = useRef(null);
     const inputRef = useRef(null);
     const inputRefSingleValueRenderer = useRef(null);
@@ -471,11 +589,11 @@ const ZDrop = (props) => {
     const isSelectedValueCorrect = selectedValue !== undefined &&
         selectedValue !== null &&
         selectedValue !== "";
-    const containerClasses = classNames(styles.container, styleClasses === null || styleClasses === void 0 ? void 0 : styleClasses.container);
-    const inputFieldClasses = classNames(styles.inputField, styleClasses === null || styleClasses === void 0 ? void 0 : styleClasses.inputField, {
-        [styles["inputField--multiple"]]: isMultiple,
-        [styles["inputField--disabled"]]: isDisabled,
-    });
+    const containerClasses = classNames(styles["zd__container"], styleClasses === null || styleClasses === void 0 ? void 0 : styleClasses.container);
+    const inputFieldClasses = classNames(styles["zd__input-field"], {
+        [styles["zd__input-field--multiple"]]: isMultiple,
+        [styles["zd__input-field--disabled"]]: isDisabled,
+    }, styleClasses === null || styleClasses === void 0 ? void 0 : styleClasses.inputField);
     const updateOptionsDataBySearch = (options, currentValue, labelKey) => {
         const searchResult = searchFilter({
             options,
@@ -584,7 +702,7 @@ const ZDrop = (props) => {
         searchFilterDelay,
     ]);
     const onInputKeyDown = (e) => {
-        var _a;
+        var _a, _b;
         if (!isListVisible && ["Enter", " "].includes(e.key)) {
             if (e.currentTarget !== e.target) {
                 return;
@@ -596,6 +714,10 @@ const ZDrop = (props) => {
             e.preventDefault();
             (_a = optionsRef.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
         }
+        if (e.key === "ArrowUp" && isListVisible) {
+            e.preventDefault();
+            (_b = optionsRef.current[optionsRef.current.length - 1]) === null || _b === void 0 ? void 0 : _b.focus();
+        }
         if (!isListVisible && isSearchable && !isMultiple && valueRenderer) {
             setIsInputItemVisible(false);
         }
@@ -700,6 +822,10 @@ const ZDrop = (props) => {
             e.preventDefault();
             (_d = optionsRef.current[index + 1]) === null || _d === void 0 ? void 0 : _d.focus();
         }
+        if (e.key === "ArrowDown" && index === optionsData.length - 1) {
+            e.preventDefault();
+            applyInputSelectFocus();
+        }
         if (e.key === "ArrowUp" && index === 0) {
             e.preventDefault();
             applyInputSelectFocus();
@@ -709,9 +835,6 @@ const ZDrop = (props) => {
         }
     };
     useOutsideClose(containerRef, () => {
-        if (!isListVisible) {
-            return;
-        }
         setIsListVisible(false);
         if (isSearchable && !currentSearchedValue) {
             setOptionsData(options || []);
@@ -719,6 +842,8 @@ const ZDrop = (props) => {
         if (valueRenderer && isSelectedValueCorrect) {
             setIsInputItemVisible(true);
         }
+    }, {
+        isActive: isListVisible,
     });
     useEffect(() => {
         if (options) {
@@ -731,7 +856,8 @@ const ZDrop = (props) => {
         }
     }, [optionsData]);
     useEffect(() => {
-        if (isValueCorrect && !deepEqual(value, selectedValue)) {
+        if (isValueCorrect &&
+            !checkIsValueEqualToSelectedValue(value, selectedValue)) {
             setCurrentValue(defaultInputValue(value));
             valueRenderer && setIsInputItemVisible(true);
         }
@@ -745,7 +871,7 @@ const ZDrop = (props) => {
             list: styleClasses === null || styleClasses === void 0 ? void 0 : styleClasses.list,
             listItem: styleClasses === null || styleClasses === void 0 ? void 0 : styleClasses.listItem,
             noData: styleClasses === null || styleClasses === void 0 ? void 0 : styleClasses.noData,
-        }, isListWrapperEnabled: !!referenceElementClassName }));
+        }, isListWrapperEnabled: !!referenceElementClassName, isAutoHeightEnabled: isAutoHeightEnabled }));
     return (jsxs("div", { ref: containerRef, className: containerClasses, onBlur: onBlur, children: [label && (jsx(ZDropLabel, { name: name, label: label, className: styleClasses === null || styleClasses === void 0 ? void 0 : styleClasses.label })), jsxs("div", { className: inputFieldClasses, onClick: onInputFieldClick, children: [jsx(ZDropInput, { name: name, options: options || [], selectedValue: selectedValue, ...(isSearchable && {
                             currentSearchedValue: currentSearchedValue,
                             setCurrentSearchedValue: setCurrentSearchedValue,
@@ -757,12 +883,15 @@ const ZDrop = (props) => {
                         } }), isClearable && (jsx(ZDropClearButton, { hasValueChanged: hasValueChanged, currentSearchedValue: currentSearchedValue, onInputClear: onInputClear, isListVisible: isListVisible, isClearableOnlyWhenChange: isClearableOnlyWhenChange, isClearableOnlyWhenSearch: isClearableOnlyWhenSearch, className: styleClasses === null || styleClasses === void 0 ? void 0 : styleClasses.clearButton, clearIcon: clearIcon })), jsx(ZDropListVisibilityToggle, { expandToggleRenderer: expandToggleRenderer, isListVisible: isListVisible, onClick: onExpandToggleClick, toggleStyleClasses: {
                             expandToggle: styleClasses === null || styleClasses === void 0 ? void 0 : styleClasses.expandToggle,
                             expandToggleIcon: styleClasses === null || styleClasses === void 0 ? void 0 : styleClasses.expandToggleIcon,
-                        } })] }), isListVisible && !referenceElementClassName && zDropList, isListVisible && referenceElementClassName && (jsx(ZDropListWrapper, { referenceElementClassName: referenceElementClassName, positionToReferenceElement: positionToReferenceElement, listMaxHeightLimiter: listMaxHeightLimiter, children: zDropList }))] }));
+                        } })] }), isListVisible &&
+                !referenceElementClassName &&
+                !isAutoHeightEnabled &&
+                zDropList, isListVisible && referenceElementClassName && (jsx(ZDropListWrapper, { referenceElementClassName: referenceElementClassName, positionToReferenceElement: positionToReferenceElement, listMaxHeightLimiter: listMaxHeightLimiter, children: zDropList })), isListVisible && isAutoHeightEnabled && !referenceElementClassName && (jsx(ZDropListAutoHeightWrapper, { containerRef: containerRef, position: autoHeightPosition, children: zDropList }))] }));
 };
 
 function ZDropField(props) {
     const { control, name, rules, onChangeTransform, valueSelector, errorClassName, errorRenderer, ...zDropProps } = props;
-    const errorMessageClasses = classNames(styles.errorMessage, errorClassName);
+    const errorMessageClasses = classNames(styles["zd__error-message"], errorClassName);
     return (jsx(Controller, { control: control, name: name, rules: rules, render: ({ field, fieldState }) => {
             var _a;
             const { onChange, value, name: fieldName, onBlur } = field;
@@ -772,11 +901,14 @@ function ZDropField(props) {
                     ? onChangeTransform(newValue)
                     : newValue);
             };
-            return (jsxs(Fragment, { children: [jsx(ZDrop, { ...zDropProps, name: fieldName, value: zDropValue, onChange: handleChange, onBlur: onBlur }), ((_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message) && (jsx("div", { className: errorMessageClasses, children: errorRenderer
+            const { isAutoHeightEnabled, autoHeightPosition, referenceElementClassName, positionToReferenceElement, ...rest } = zDropProps;
+            return (jsxs(Fragment, { children: [jsx(ZDrop, { name: fieldName, value: zDropValue, onChange: handleChange, onBlur: onBlur, ...(isAutoHeightEnabled
+                            ? { isAutoHeightEnabled, autoHeightPosition }
+                            : { referenceElementClassName, positionToReferenceElement }), ...rest }), ((_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message) && (jsx("div", { className: errorMessageClasses, children: errorRenderer
                             ? errorRenderer(fieldState.error.message)
                             : fieldState.error.message }))] }));
         } }));
 }
 
-export { ZDrop as Z, ZDropField as a };
-//# sourceMappingURL=index-CR39mAMA.js.map
+export { ZDropField as Z, ZDrop as a, classNames as c, getAvailableSpace as g, useOutsideClose as u };
+//# sourceMappingURL=index-DC_KVC71.js.map