zcomponents-ui 1.0.0

package/dist/index.esm.js

@@ -0,0 +1,760 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useEffect, useState, useCallback, useRef } from 'react';
+
+const classNames = (...params) => {
+    const classes = [];
+    params.forEach((param) => {
+        if (typeof param === "string" && param) {
+            classes.push(param);
+        }
+        else if (param && typeof param === "object") {
+            Object.entries(param).forEach(([key, value]) => {
+                if (value) {
+                    classes.push(key);
+                }
+            });
+        }
+    });
+    return classes.join(" ");
+};
+
+const useOutsideClose = (ref, onOutsideClose) => {
+    useEffect(() => {
+        const handleClick = (e) => {
+            if (ref &&
+                ref.current &&
+                !ref.current.contains(e.target)) {
+                onOutsideClose(e);
+            }
+        };
+        const handleKey = (e) => {
+            if (e.key === "Escape") {
+                onOutsideClose(e);
+            }
+        };
+        document.addEventListener("click", handleClick);
+        document.addEventListener("keydown", handleKey);
+        return () => {
+            document.removeEventListener("click", handleClick);
+            document.removeEventListener("keydown", handleKey);
+        };
+    }, [onOutsideClose, ref]);
+};
+
+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","option":"ZDrop-module_option__ZfKFl","noData":"ZDrop-module_noData__-70Uu","option--active":"ZDrop-module_option--active__OXcv5"};
+
+const ZDropLabel = (props) => {
+    const { name, label, className } = props;
+    const labelClasses = classNames(styles.label, className);
+    if (typeof label === "string") {
+        return (jsx("label", { htmlFor: name, className: labelClasses, children: label }));
+    }
+    return jsx("div", { className: className, children: label });
+};
+
+const ZDropListItem = (props) => {
+    const { option, index, labelKey, innerRef, onOptionClick, onOptionKeyDown, className, children, } = props;
+    const onListItemClick = (e) => {
+        onOptionClick(e, option);
+    };
+    const onListItemKeyDown = (e) => {
+        onOptionKeyDown(e, option, index);
+    };
+    return (jsx("li", { tabIndex: 0, ref: innerRef, className: className, onClick: onListItemClick, onKeyDown: onListItemKeyDown, children: children || (labelKey && option[labelKey]) || option }));
+};
+
+const ZDropListNoData = (props) => {
+    const { noDataContent, className } = props;
+    const noDataClasses = classNames(styles.noData, className);
+    return jsx("li", { className: noDataClasses, children: noDataContent });
+};
+
+const checkIsValueEqualToOption = (selectedValue, option, valueKey) => {
+    if (selectedValue === undefined || option === undefined) {
+        return false;
+    }
+    if (Array.isArray(selectedValue)) {
+        return selectedValue.some((value) => checkIsValueEqualToOption(value, option, valueKey));
+    }
+    const optionIsObject = typeof option === "object" && option !== null;
+    const selectedIsObject = typeof selectedValue === "object" && selectedValue !== null;
+    if (selectedValue === option) {
+        return true;
+    }
+    if (!selectedIsObject && optionIsObject) {
+        return selectedValue === option[valueKey];
+    }
+    if (selectedIsObject && optionIsObject) {
+        return selectedValue[valueKey] === option[valueKey];
+    }
+    return false;
+};
+
+const checkIsEqualMultiple = (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, } = props;
+    const dropdownListClasses = classNames(styles.list, listStyleClasses === null || listStyleClasses === void 0 ? void 0 : listStyleClasses.list);
+    const getListItemClasses = (option) => {
+        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.option, listStyleClasses === null || listStyleClasses === void 0 ? void 0 : listStyleClasses.listItem, {
+            [styles["option--active"]]: checkIsValueEqualToOption(selectedValue, option, valueKey),
+        });
+    };
+    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))) }));
+};
+
+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,
+    });
+    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) => {
+    if (isClearableOnlyWhenChange && !isListVisible && hasValueChanged) {
+        return false;
+    }
+    if (isClearableOnlyWhenSearch && isListVisible && currentSearchedValue) {
+        return false;
+    }
+    if (!isClearableOnlyWhenChange &&
+        !isClearableOnlyWhenSearch &&
+        (currentSearchedValue || hasValueChanged)) {
+        return false;
+    }
+    return true;
+};
+
+const ZDropClearButton = (props) => {
+    const { hasValueChanged, currentSearchedValue, onInputClear, isListVisible, isClearableOnlyWhenChange, isClearableOnlyWhenSearch, className, clearIcon, } = props;
+    const clearButtonClasses = classNames(styles.inputClearBtn, className);
+    const onClear = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        e.nativeEvent.stopImmediatePropagation();
+        onInputClear();
+    };
+    if (checkIsClearHidden(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 }) }) }));
+};
+
+const ZDropMultipleInputValue = (props) => {
+    const { option, labelType, onInputOptionRemove, valueRenderer, inputMultipleValueClassName, isDisabled, } = props;
+    const inputItemClasses = classNames(styles.inputMultipleValue, inputMultipleValueClassName);
+    if (option === null || option === undefined) {
+        return null;
+    }
+    if (valueRenderer) {
+        return (jsx("li", { tabIndex: 0, className: inputItemClasses, onKeyDown: (e) => {
+                if (["Enter", " "].includes(e.key)) {
+                    onInputOptionRemove(e, option);
+                }
+            }, children: valueRenderer === null || valueRenderer === void 0 ? void 0 : valueRenderer({
+                option,
+                onRemove: (e) => onInputOptionRemove(e, option),
+            }) }));
+    }
+    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 }) }))] }));
+};
+
+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 onKeyDown = (e) => {
+        if (["Enter"].includes(e.key)) {
+            e.preventDefault();
+        }
+    };
+    const onPlaceholderClick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsListVisible(true);
+    };
+    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 }) }))] }));
+};
+
+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);
+    return (jsxs(Fragment, { children: [isInputItemVisible && selectedOption !== undefined && (jsx("div", { onClick: onInputItemClick, children: valueRenderer({
+                    option: selectedOption,
+                    onRemove: (e) => onInputOptionRemove(e, selectedOption),
+                }) })), ((!isListVisible &&
+                !isSearchable &&
+                (typeof selectedValue === "undefined" || selectedValue === "")) ||
+                (isListVisible && !isSearchable)) &&
+                placeholder, isSearchable && !isInputItemVisible && (jsx("input", { ref: inputRefSingleValueRenderer, name: name, tabIndex: isInputItemVisible ? 0 : -1, value: inputValue, onChange: onChange, className: inputValueClasses, placeholder: placeholder }))] }));
+};
+
+const getLabelFromOption = (options, selectedValue, valueKey, labelKey) => {
+    const foundOption = options.find((option) => {
+        if (typeof option === "object" &&
+            option !== null &&
+            (typeof selectedValue === "string" || typeof selectedValue === "number")) {
+            return option[valueKey] === selectedValue;
+        }
+        if (typeof option === "object" &&
+            option !== null &&
+            typeof selectedValue === "object" &&
+            selectedValue !== null) {
+            return option[valueKey] === selectedValue[valueKey];
+        }
+        return option === selectedValue;
+    });
+    if (foundOption !== undefined && foundOption !== null) {
+        return typeof foundOption === "object"
+            ? foundOption[labelKey]
+            : foundOption;
+    }
+    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 selectedOption = options.find((option) => {
+        if (typeof option === "object" &&
+            option !== null &&
+            typeof selectedValue === "object" &&
+            selectedValue !== null) {
+            return option[valueKey] === selectedValue[valueKey];
+        }
+        if (typeof option === "object" &&
+            option !== null &&
+            selectedValue !== undefined &&
+            (typeof selectedValue === "string" || typeof selectedValue === "number")) {
+            return option[valueKey] === selectedValue;
+        }
+        return option === selectedValue;
+    });
+    const onClick = (e) => {
+        onInputClick(e);
+        if (isSearchable && !isListVisible) {
+            setInputValue("");
+        }
+    };
+    const onChange = (e) => {
+        onInputChange(e);
+        setInputValue(e.target.value);
+        setCurrentSearchedValue === null || setCurrentSearchedValue === void 0 ? void 0 : setCurrentSearchedValue(e.target.value);
+    };
+    useEffect(() => {
+        if (selectedValue !== undefined) {
+            setInputValue(getLabelFromOption(options, selectedValue, valueKey, labelKey));
+        }
+    }, [selectedValue]);
+    useEffect(() => {
+        if (!isListVisible && isSearchable) {
+            setInputValue(getLabelFromOption(options, selectedValue, valueKey, labelKey));
+            return;
+        }
+        currentSearchedValue !== undefined && setInputValue(currentSearchedValue);
+    }, [isListVisible]);
+    useEffect(() => {
+        if (currentSearchedValue === "") {
+            setInputValue("");
+        }
+    }, [currentSearchedValue]);
+    if (valueRenderer) {
+        return (jsx("div", { tabIndex: 0, className: inputSelectClasses, onClick: onInputClick, onKeyDown: onInputKeyDown, ...(isDisabled && {
+                style: { pointerEvents: "none" },
+            }), children: jsx(ZDropSingleInputValueRenderer, { name: name, isInputItemVisible: isInputItemVisible, isSearchable: isSearchable, selectedValue: selectedValue, selectedOption: selectedOption, valueRenderer: valueRenderer, inputValue: inputValue, isListVisible: isListVisible, placeholder: placeholder, inputRefSingleValueRenderer: inputRefSingleValueRenderer, onChange: onChange, onInputItemClick: onInputItemClick, onInputOptionRemove: onInputOptionRemove, inputValueClassName: inputValueClassName }) }));
+    }
+    return (jsx("input", { ref: inputRef, className: inputSelectClasses, name: name, type: "text", value: inputValue, placeholder: placeholder, disabled: isDisabled, onClick: onClick, onChange: onChange, onKeyDown: onInputKeyDown, readOnly: !isSearchable }));
+};
+
+const ZDropInput = (props) => {
+    const { name, options, selectedValue, currentSearchedValue, setCurrentSearchedValue, valueKey, labelKey, placeholder, isMultiple, isDisabled, isSearchable, isListVisible, setIsListVisible, isInputItemVisible, valueRenderer, inputRef, inputRefMultipleValueRenderer, inputRefSingleValueRenderer, onInputClick, onInputItemClick, onInputKeyDown, onInputChange, onInputOptionRemove, inputStyleClasses, } = props;
+    if (isMultiple && Array.isArray(selectedValue)) {
+        return (jsx(ZDropMultipleInput, { isListVisible: isListVisible, setIsListVisible: setIsListVisible, name: name, selectedValue: selectedValue, valueKey: valueKey, labelKey: labelKey, placeholder: placeholder, isDisabled: isDisabled, isSearchable: isSearchable, currentSearchedValue: currentSearchedValue, valueRenderer: valueRenderer, inputRefMultipleValueRenderer: inputRefMultipleValueRenderer, onInputClick: onInputClick, onInputKeyDown: onInputKeyDown, onInputChange: onInputChange, onInputOptionRemove: onInputOptionRemove, inputClassName: inputStyleClasses === null || inputStyleClasses === void 0 ? void 0 : inputStyleClasses.input, inputMultipleValueClassName: inputStyleClasses === null || inputStyleClasses === void 0 ? void 0 : inputStyleClasses.inputMultipleValue, inputMultipleSearchClassName: inputStyleClasses === null || inputStyleClasses === void 0 ? void 0 : inputStyleClasses.inputMultipleSearch }));
+    }
+    return (jsx(ZDropSingleInput, { options: options, name: name, selectedValue: selectedValue, currentSearchedValue: currentSearchedValue, setCurrentSearchedValue: setCurrentSearchedValue, valueKey: valueKey, labelKey: labelKey, isListVisible: isListVisible, placeholder: placeholder, isDisabled: isDisabled, isSearchable: isSearchable, valueRenderer: valueRenderer, isInputItemVisible: isInputItemVisible, inputRef: inputRef, inputRefSingleValueRenderer: inputRefSingleValueRenderer, onInputClick: onInputClick, onInputItemClick: onInputItemClick, onInputKeyDown: onInputKeyDown, onInputChange: onInputChange, onInputOptionRemove: onInputOptionRemove, inputClassName: inputStyleClasses === null || inputStyleClasses === void 0 ? void 0 : inputStyleClasses.input, inputValueClassName: inputStyleClasses === null || inputStyleClasses === void 0 ? void 0 : inputStyleClasses.inputValue }));
+};
+
+const isObj = (x) => typeof x === "object" && x !== null;
+const findOption = (options = [], selected, valueKey) => {
+    const key = isObj(selected) && valueKey in selected ? selected[valueKey] : selected;
+    const found = options.find((option) => {
+        return isObj(option)
+            ? valueKey in option && option[valueKey] === key
+            : option === key;
+    });
+    return found;
+};
+
+const defaultSearchFilter = (props) => {
+    const { options, currentValue, labelKey } = props;
+    const searchedValue = currentValue || "";
+    if (options.every((option) => typeof option === "string" || typeof option === "number")) {
+        return options.filter((option) => option.toString().toLowerCase().includes(searchedValue.toLowerCase()));
+    }
+    return options === null || options === void 0 ? void 0 : options.filter((option) => {
+        var _a;
+        return typeof option === "object" &&
+            option !== null &&
+            ((_a = option[labelKey]) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase().includes(searchedValue.toLowerCase()));
+    });
+};
+
+const getCurrentMultipleValue = (selected, selectedValue, options, valueKey) => {
+    const isSelectedValueArray = Array.isArray(selectedValue);
+    if (isSelectedValueArray &&
+        selectedValue.some((val) => val === findOption(selectedValue, selected, valueKey))) {
+        return selectedValue;
+    }
+    if (Array.isArray(selected)) {
+        return options.filter((option) => findOption(selected, option, valueKey) ||
+            findOption(selected, option, valueKey) === 0);
+    }
+    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 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,
+        };
+    }
+    return getReferenceElementDimensions(parent, elementParentClass);
+};
+
+const distanceGap = 0;
+const marginTop = 10;
+const minUsableHeight = 50;
+const calculateHeightForTop = (scrollHeight, maxHeightLimiter, wrapperMaxHeight) => {
+    const currentHeightLimiter = maxHeightLimiter < wrapperMaxHeight ? maxHeightLimiter : wrapperMaxHeight;
+    return scrollHeight > currentHeightLimiter
+        ? currentHeightLimiter
+        : scrollHeight;
+};
+const ZDropListWrapper = (props) => {
+    const { referenceElementClassName, positionToReferenceElement = "bottom", listMaxHeightLimiter, children, } = props;
+    const [maxSpaceAbove, setMaxSpaceAbove] = useState(0);
+    const [maxSpaceBelow, setMaxSpaceBelow] = useState(0);
+    const [scrollHeight, setScrollHeight] = useState(0);
+    const hasTopSpace = maxSpaceAbove > minUsableHeight;
+    const hasBottomSpace = maxSpaceBelow > minUsableHeight;
+    let finalPosition;
+    if (positionToReferenceElement === "top") {
+        if (hasTopSpace) {
+            finalPosition = "top";
+        }
+        else if (hasBottomSpace) {
+            finalPosition = "bottom";
+        }
+        else {
+            finalPosition = maxSpaceAbove >= maxSpaceBelow ? "top" : "bottom";
+        }
+    }
+    else {
+        if (hasBottomSpace) {
+            finalPosition = "bottom";
+        }
+        else if (hasTopSpace) {
+            finalPosition = "top";
+        }
+        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`,
+        maxHeight: `${finalHeight}px`,
+        ...(finalPosition === "top"
+            ? { top: `-${finalHeight + marginTop}px` }
+            : { top: "100%" }),
+    };
+    return (jsx("div", { className: styles.listWrapper, ref: listWrapperRef, style: wrapperStyle, children: children }));
+};
+
+const deepEqual = (a, b) => {
+    if (a === b)
+        return true;
+    if (a == null || b == null)
+        return false;
+    if (typeof a !== "object" || typeof b !== "object")
+        return false;
+    if (Array.isArray(a) && Array.isArray(b)) {
+        if (a.length !== b.length)
+            return false;
+        return a.every((el, i) => deepEqual(el, b[i]));
+    }
+    const keysA = Object.keys(a);
+    const keysB = Object.keys(b);
+    if (keysA.length !== keysB.length)
+        return false;
+    return keysA.every((key) => deepEqual(a[key], b[key]));
+};
+
+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, onClear, valueRenderer, optionRenderer, expandToggleRenderer, clearIcon, noDataContent, referenceElementClassName, positionToReferenceElement, listMaxHeightLimiter, styleClasses, } = props;
+    const containerRef = useRef(null);
+    const inputRef = useRef(null);
+    const inputRefSingleValueRenderer = useRef(null);
+    const inputRefMultipleValueRenderer = useRef(null);
+    const optionsRef = useRef([]);
+    const timerRef = useRef(null);
+    const isValueCorrect = value !== undefined && value !== null && value !== "";
+    const isClearable = ["always", "whenChanged", "whenSearched"].includes(clear);
+    const isClearableOnlyWhenChange = clear === "whenChanged";
+    const isClearableOnlyWhenSearch = clear === "whenSearched";
+    const [optionsData, setOptionsData] = useState([]);
+    const [selectedValue, setSelectedValue] = useState(isMultiple ? [] : "");
+    const [isListVisible, setIsListVisible] = useState(false);
+    const [isInputItemVisible, setIsInputItemVisible] = useState(isValueCorrect);
+    const [currentSearchedValue, setCurrentSearchedValue] = useState("");
+    const [hasValueChanged, setHasValueChanged] = useState(false);
+    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 updateOptionsDataBySearch = (options, currentValue, labelKey) => {
+        const searchResult = searchFilter({
+            options,
+            currentValue,
+            labelKey,
+        });
+        setOptionsData(searchResult ? searchResult : options);
+    };
+    const setCurrentValue = (selected) => {
+        if (isMultiple) {
+            const currentMultipleSelected = getCurrentMultipleValue(selected, selectedValue, options, valueKey);
+            setSelectedValue(currentMultipleSelected);
+            onChange === null || onChange === void 0 ? void 0 : onChange(currentMultipleSelected);
+            return;
+        }
+        setCurrentSearchedValue("");
+        setIsListVisible(false);
+        setOptionsData(options || []);
+        setSelectedValue(selected);
+        if (shouldReturnObjectOnChange && typeof selected === "object") {
+            onChange === null || onChange === void 0 ? void 0 : onChange(selected);
+            return;
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange((typeof selected === "object" && (selected === null || selected === void 0 ? void 0 : selected[valueKey])) ||
+            selected);
+    };
+    const defaultInputValue = useCallback((defaultValue) => {
+        var _a;
+        if (isMultiple && Array.isArray(defaultValue)) {
+            const multipleValues = options === null || options === void 0 ? void 0 : options.filter((option) => defaultValue.some((valueItem) => checkIsValueEqualToOption(valueItem, option, valueKey)));
+            return multipleValues || [];
+        }
+        return (_a = findOption(options, defaultValue, valueKey)) !== null && _a !== void 0 ? _a : "";
+    }, [isMultiple, options, value, selectedValue, valueKey]);
+    const onExpandToggleClick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (isDisabled) {
+            return;
+        }
+        setIsListVisible((prev) => !prev);
+        if (!isMultiple && isSelectedValueCorrect && valueRenderer) {
+            setIsInputItemVisible((prev) => !prev);
+        }
+    };
+    const onInputFieldClick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.target.tagName === "INPUT") {
+            return;
+        }
+        if (isDisabled) {
+            return;
+        }
+        if (isListVisible) {
+            setIsListVisible(false);
+        }
+        if (isListVisible &&
+            !isMultiple &&
+            valueRenderer &&
+            isSelectedValueCorrect) {
+            setIsInputItemVisible(true);
+        }
+    };
+    const onInputClick = (e) => {
+        e.preventDefault();
+        if (!isListVisible) {
+            setIsListVisible(true);
+        }
+        if (!isListVisible && !isMultiple && valueRenderer) {
+            setIsInputItemVisible(false);
+        }
+        if (!isListVisible && isSearchable && isSelectedValueCorrect) {
+            updateOptionsDataBySearch(options || [], currentSearchedValue, labelKey);
+        }
+    };
+    const onInputChange = useCallback((e) => {
+        const currentValue = e.target.value;
+        if (isSearchable) {
+            setCurrentSearchedValue(currentValue);
+        }
+        const inputSelectChange = (currentValue) => {
+            if (!isListVisible) {
+                setIsListVisible(true);
+            }
+            if (isSearchable) {
+                updateOptionsDataBySearch(options || [], currentValue, labelKey);
+            }
+        };
+        if (searchFilterDelay && searchFilterDelay > 0) {
+            if (timerRef.current)
+                clearTimeout(timerRef.current);
+            timerRef.current = setTimeout(() => inputSelectChange(currentValue), searchFilterDelay);
+        }
+        else {
+            inputSelectChange(currentValue);
+        }
+    }, [
+        selectedValue,
+        isMultiple,
+        isSearchable,
+        isListVisible,
+        labelKey,
+        options,
+        searchFilter,
+        searchFilterDelay,
+    ]);
+    const onInputKeyDown = (e) => {
+        var _a;
+        if (!isListVisible && ["Enter", " "].includes(e.key)) {
+            if (e.currentTarget !== e.target) {
+                return;
+            }
+            e.preventDefault();
+            setIsListVisible((prev) => !prev);
+        }
+        if (e.key === "ArrowDown" && isListVisible) {
+            e.preventDefault();
+            (_a = optionsRef.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        if (!isListVisible && isSearchable && !isMultiple && valueRenderer) {
+            setIsInputItemVisible(false);
+        }
+    };
+    const applyInputSelectFocus = useCallback(() => {
+        var _a, _b, _c;
+        if (isMultiple) {
+            (_a = inputRefMultipleValueRenderer.current) === null || _a === void 0 ? void 0 : _a.focus();
+            return;
+        }
+        if (valueRenderer) {
+            (_b = inputRefSingleValueRenderer.current) === null || _b === void 0 ? void 0 : _b.focus();
+            return;
+        }
+        (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+    }, [isMultiple, valueRenderer]);
+    const onInputItemClick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsInputItemVisible(false);
+        setIsListVisible(true);
+    };
+    const onInputOptionRemove = (e, option) => {
+        e.stopPropagation();
+        e.preventDefault();
+        e.nativeEvent.stopImmediatePropagation();
+        if (!isMultiple) {
+            setSelectedValue("");
+            onChange === null || onChange === void 0 ? void 0 : onChange("");
+        }
+        else {
+            const selectedOptions = [
+                ...selectedValue.filter((value) => value !== (option === null || option === void 0 ? void 0 : option[valueKey]) && value !== option),
+            ];
+            setSelectedValue(selectedOptions);
+            onChange === null || onChange === void 0 ? void 0 : onChange(selectedOptions);
+        }
+        if (!isListVisible) {
+            setIsListVisible(true);
+        }
+        if (isInputItemVisible) {
+            setIsInputItemVisible(false);
+        }
+    };
+    const onInputClear = (e) => {
+        if (isSearchable && options) {
+            setCurrentSearchedValue("");
+            setOptionsData(options);
+            applyInputSelectFocus();
+        }
+        if (valueRenderer) {
+            (clear === "always" || clear === "whenChanged") &&
+                setIsInputItemVisible(false);
+        }
+        if (!isListVisible) {
+            setIsListVisible(true);
+        }
+        if (isClearable && !isClearableOnlyWhenSearch) {
+            setSelectedValue(isMultiple ? [] : "");
+            setHasValueChanged(false);
+            onChange === null || onChange === void 0 ? void 0 : onChange(isMultiple ? [] : undefined);
+        }
+        onClear === null || onClear === void 0 ? void 0 : onClear();
+    };
+    const onOptionClick = (e, option) => {
+        var _a, _b, _c;
+        e.stopPropagation();
+        e.preventDefault();
+        e.nativeEvent.stopImmediatePropagation();
+        if ((_c = (_b = (_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.closest("div")) === null || _b === void 0 ? void 0 : _b.dataset) === null || _c === void 0 ? void 0 : _c.separator) {
+            return;
+        }
+        setCurrentValue(option);
+        setIsListVisible(false);
+        if (isClearable && !isClearableOnlyWhenSearch) {
+            setHasValueChanged(true);
+        }
+        if (valueRenderer) {
+            setIsInputItemVisible(true);
+        }
+    };
+    const onOptionKeyDown = (e, option, index) => {
+        var _a, _b, _c, _d;
+        if (["Enter", " "].includes(e.key)) {
+            e.preventDefault();
+            if ((_b = (_a = e.target.children[0]) === null || _a === void 0 ? void 0 : _a.dataset) === null || _b === void 0 ? void 0 : _b.separator) {
+                return;
+            }
+            setCurrentValue(option);
+            if (isClearable && !isClearableOnlyWhenSearch) {
+                setHasValueChanged(true);
+            }
+            if (valueRenderer) {
+                setIsInputItemVisible(true);
+            }
+        }
+        if (e.key === "ArrowUp" && index > 0) {
+            e.preventDefault();
+            (_c = optionsRef.current[index - 1]) === null || _c === void 0 ? void 0 : _c.focus();
+        }
+        if (e.key === "ArrowDown" && index < optionsData.length - 1) {
+            e.preventDefault();
+            (_d = optionsRef.current[index + 1]) === null || _d === void 0 ? void 0 : _d.focus();
+        }
+        if (e.key === "ArrowUp" && index === 0) {
+            e.preventDefault();
+            applyInputSelectFocus();
+        }
+        if (e.key === "Backspace") {
+            onInputOptionRemove(e, option);
+        }
+    };
+    useOutsideClose(containerRef, () => {
+        if (!isListVisible) {
+            return;
+        }
+        setIsListVisible(false);
+        if (isSearchable && !currentSearchedValue) {
+            setOptionsData(options || []);
+        }
+        if (valueRenderer && isSelectedValueCorrect) {
+            setIsInputItemVisible(true);
+        }
+    });
+    useEffect(() => {
+        if (options) {
+            setOptionsData(options);
+        }
+    }, [options]);
+    useEffect(() => {
+        if (optionsData) {
+            optionsRef.current = optionsRef.current.slice(0, optionsData === null || optionsData === void 0 ? void 0 : optionsData.length);
+        }
+    }, [optionsData]);
+    useEffect(() => {
+        if (isValueCorrect && !deepEqual(value, selectedValue)) {
+            setCurrentValue(defaultInputValue(value));
+            valueRenderer && setIsInputItemVisible(true);
+        }
+    }, []);
+    useEffect(() => {
+        if (isListVisible && isSearchable) {
+            applyInputSelectFocus();
+        }
+    }, [applyInputSelectFocus, isSearchable, isListVisible]);
+    const zDropList = (jsx(ZDropList, { options: optionsData, selectedValue: selectedValue, valueKey: valueKey, labelKey: labelKey, optionsRef: optionsRef, optionRenderer: optionRenderer, onOptionClick: onOptionClick, onOptionKeyDown: onOptionKeyDown, noDataContent: noDataContent, currentSearchedValue: currentSearchedValue, listStyleClasses: {
+            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,
+        } }));
+    return (jsxs("div", { ref: containerRef, className: containerClasses, 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,
+                        }), valueKey: valueKey, labelKey: labelKey, placeholder: placeholder, isMultiple: isMultiple, isDisabled: isDisabled, isSearchable: isSearchable, isListVisible: isListVisible, setIsListVisible: setIsListVisible, isInputItemVisible: isInputItemVisible, valueRenderer: valueRenderer, onInputClick: onInputClick, onInputItemClick: onInputItemClick, onInputKeyDown: onInputKeyDown, onInputChange: onInputChange, onInputOptionRemove: onInputOptionRemove, inputRef: inputRef, inputRefMultipleValueRenderer: inputRefMultipleValueRenderer, inputRefSingleValueRenderer: inputRefSingleValueRenderer, inputStyleClasses: {
+                            input: styleClasses === null || styleClasses === void 0 ? void 0 : styleClasses.input,
+                            inputValue: styleClasses === null || styleClasses === void 0 ? void 0 : styleClasses.inputValue,
+                            inputMultipleValue: styleClasses === null || styleClasses === void 0 ? void 0 : styleClasses.inputMultipleValue,
+                            inputMultipleSearch: styleClasses === null || styleClasses === void 0 ? void 0 : styleClasses.inputMultipleSearch,
+                        } }), 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 }))] }));
+};
+
+export { ZDrop };
+//# sourceMappingURL=index.esm.js.map