zcomponents-ui 1.0.1 → 1.1.1

package/dist/index.esm.js

@@ -1,760 +1,5 @@
-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 };
+export { Z as ZDrop, a as ZDropField } from './index-Ck9QayZm.js';
+import 'react/jsx-runtime';
+import 'react-hook-form';
+import 'react';
 //# sourceMappingURL=index.esm.js.map