intelicoreact 1.6.2 → 1.6.3

package/dist/Atomic/FormElements/Dropdown/Dropdown.js

@@ -1,38 +1,94 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
-import cn from "classnames";
-import { createPortal } from "react-dom";
-import { Check, ChevronDown, ChevronUp, Code, X } from "react-feather";
-import Input from "../../../Atomic/FormElements/Input/Input";
-import RadioInput from "../../../Atomic/FormElements/RadioInput/RadioInput";
-import { formatToOnlyASCIICodeText } from "../../../Functions/fieldValueFormatters";
-import useIsMobile from "../../../Functions/useIsMobile/useIsMobile";
-import { compareAlphabetical } from "../../../Functions/utils";
-import DropdownLoader from "./components/DropdownLoader";
-import "./Dropdown.scss";
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _reactdom = require("react-dom");
+const _reactfeather = require("react-feather");
+const _Input = /*#__PURE__*/ _interop_require_default(require("../../../Atomic/FormElements/Input/Input"));
+const _RadioInput = /*#__PURE__*/ _interop_require_default(require("../../../Atomic/FormElements/RadioInput/RadioInput"));
+const _fieldValueFormatters = require("../../../Functions/fieldValueFormatters");
+const _useIsMobile = /*#__PURE__*/ _interop_require_default(require("../../../Functions/useIsMobile/useIsMobile"));
+const _utils = require("../../../Functions/utils");
+const _DropdownLoader = /*#__PURE__*/ _interop_require_default(require("./components/DropdownLoader"));
+require("./Dropdown.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
 const RC = "dropdown";
 const MIN_ITEMS_FOR_SHOW_MOBILE_SEARCH = 10;
 const Dropdown = ({ label, options = [], value, error, disabled, onChange, placeholder, className, isSearchable, entity, scrollReactionObj, isListTop, isNotValidateASCII = false, testId = "dropdown", sortAlphabetical = true, fieldKey, id, noOptionsText = "No options available", attributesOfNativeInput = {}, isDoNotPullOutListOfMainContainer, withMobileLogic, withActions, minItemsForShowMobileSearch = MIN_ITEMS_FOR_SHOW_MOBILE_SEARCH, customTrigger, tabIndex, onActionConfirmClick, onActionCancelClick, isDefaultOpened })=>{
     var _options_find, _dropdownListWrapperRef_current_getBoundingClientRect, _dropdownListWrapperRef_current, _dropdownListRef_current, _dropdownListRef_current1, _filteredOptions_find, _tabIndex_toString;
-    const { isMobile: isMobileProp } = useIsMobile();
+    const { isMobile: isMobileProp } = (0, _useIsMobile.default)();
     const isMobile = isMobileProp && withMobileLogic && window.screen.width <= 768;
-    const [dropdownId, setDropdownId] = useState(id || fieldKey || Math.random().toString(16).slice(2));
-    const [isOpen, setIsOpen] = useState(false);
-    const [searchValue, setSearchValue] = useState();
-    const dropdownRef = useRef(null);
-    const dropdownListRef = useRef(null);
-    const dropdownListWrapperRef = useRef(null);
-    const searchInputRef = useRef(null);
-    const wrapperRef = useRef(null);
-    const [initListHeight, setInitListHeight] = useState(null);
-    const [isSearchChanged, setIsSearchChanged] = useState(false);
-    const [isSearchInputFocused, setIsSearchInputFocused] = useState(false);
-    const [isScrollableList, setIsScrollableList] = useState(null);
-    const [isFixedMaxHeight, setIsFixedMaxHeight] = useState(false);
-    const [scrollTop, setScrollTop] = useState(0);
-    const [scrollHeight, setScrollHeight] = useState(1);
+    const [dropdownId, setDropdownId] = (0, _react.useState)(id || fieldKey || Math.random().toString(16).slice(2));
+    const [isOpen, setIsOpen] = (0, _react.useState)(false);
+    const [searchValue, setSearchValue] = (0, _react.useState)();
+    const dropdownRef = (0, _react.useRef)(null);
+    const dropdownListRef = (0, _react.useRef)(null);
+    const dropdownListWrapperRef = (0, _react.useRef)(null);
+    const searchInputRef = (0, _react.useRef)(null);
+    const wrapperRef = (0, _react.useRef)(null);
+    const [initListHeight, setInitListHeight] = (0, _react.useState)(null);
+    const [isSearchChanged, setIsSearchChanged] = (0, _react.useState)(false);
+    const [isSearchInputFocused, setIsSearchInputFocused] = (0, _react.useState)(false);
+    const [isScrollableList, setIsScrollableList] = (0, _react.useState)(null);
+    const [isFixedMaxHeight, setIsFixedMaxHeight] = (0, _react.useState)(false);
+    const [scrollTop, setScrollTop] = (0, _react.useState)(0);
+    const [scrollHeight, setScrollHeight] = (0, _react.useState)(1);
     if (!options) return null;
-    const getTotalOptions = useCallback(()=>{
+    const getTotalOptions = (0, _react.useCallback)(()=>{
         return options === null || options === void 0 ? void 0 : options.reduce((result, item)=>{
             if ((item === null || item === void 0 ? void 0 : item.list) || (item === null || item === void 0 ? void 0 : item.items)) {
                 var _item_list, _item_items;
@@ -139,7 +195,7 @@ const Dropdown = ({ label, options = [], value, error, disabled, onChange, place
     };
     const onSearchHandler = (name)=>{
         let inputValue = name;
-        if (!isNotValidateASCII) inputValue = formatToOnlyASCIICodeText(inputValue);
+        if (!isNotValidateASCII) inputValue = (0, _fieldValueFormatters.formatToOnlyASCIICodeText)(inputValue);
         setIsSearchChanged(true);
         setSearchValue(inputValue);
     };
@@ -169,28 +225,28 @@ const Dropdown = ({ label, options = [], value, error, disabled, onChange, place
     const getMarkupForElement = (item, index, optTestId)=>{
         var _item_value_toString, _item_value;
         var _item_customMobileIcon;
-        return /*#__PURE__*/ _jsxs("button", {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("button", {
             "data-testid": `${testId}-${optTestId}-option`,
             onMouseDown: ()=>depend.onChange(item),
-            className: cn(`${RC}__list-item`, {
+            className: (0, _classnames.default)(`${RC}__list-item`, {
                 [`${RC}__list-item_active`]: item.value === value,
                 [`${RC}__list-item_disabled`]: item.disabled
             }, item.className),
             children: [
-                !isMobile && /*#__PURE__*/ _jsx("span", {
-                    className: cn(`${RC}__active-icon`, {
+                !isMobile && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                    className: (0, _classnames.default)(`${RC}__active-icon`, {
                         [`${RC}__active-icon_active`]: item.value === value
                     }),
-                    children: /*#__PURE__*/ _jsx(Check, {})
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.Check, {})
                 }),
-                /*#__PURE__*/ _jsx("div", {
-                    className: cn(`${RC}__list-item-label`, item.labelClassName || ""),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: (0, _classnames.default)(`${RC}__list-item-label`, item.labelClassName || ""),
                     dangerouslySetInnerHTML: {
                         __html: hightlightedText(item.label, item.postfix, item.description)
                     }
                 }),
                 (item === null || item === void 0 ? void 0 : item.icon) || "",
-                isMobile ? (_item_customMobileIcon = item === null || item === void 0 ? void 0 : item.customMobileIcon) !== null && _item_customMobileIcon !== void 0 ? _item_customMobileIcon : /*#__PURE__*/ _jsx(RadioInput, {
+                isMobile ? (_item_customMobileIcon = item === null || item === void 0 ? void 0 : item.customMobileIcon) !== null && _item_customMobileIcon !== void 0 ? _item_customMobileIcon : /*#__PURE__*/ (0, _jsxruntime.jsx)(_RadioInput.default, {
                     value: item.value,
                     checked: value
                 }) : ""
@@ -199,10 +255,10 @@ const Dropdown = ({ label, options = [], value, error, disabled, onChange, place
     };
     const filteredOptionList = (filteredOption)=>{
         var _filteredOption_items, _filteredOption_label_toString, _filteredOption_label;
-        return ((_filteredOption_items = filteredOption.items) === null || _filteredOption_items === void 0 ? void 0 : _filteredOption_items.length) > 0 ? /*#__PURE__*/ _jsxs("div", {
-            className: cn(`${RC}-group`, filteredOption.className),
+        return ((_filteredOption_items = filteredOption.items) === null || _filteredOption_items === void 0 ? void 0 : _filteredOption_items.length) > 0 ? /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            className: (0, _classnames.default)(`${RC}-group`, filteredOption.className),
             children: [
-                /*#__PURE__*/ _jsx("div", {
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                     className: `${RC}-group__name`,
                     children: filteredOption.label
                 }),
@@ -214,7 +270,7 @@ const Dropdown = ({ label, options = [], value, error, disabled, onChange, place
         var _item_items_find, _item_items;
         return acc || ((_item_items = item.items) === null || _item_items === void 0 ? void 0 : (_item_items_find = _item_items.find((el)=>el.value === value)) === null || _item_items_find === void 0 ? void 0 : _item_items_find.label);
     }, null);
-    const doScrollCallback = useCallback((e)=>{
+    const doScrollCallback = (0, _react.useCallback)((e)=>{
         const { callback, isWithAnyScrolling, scrollingInaccuracy = 0 } = scrollReactionObj || {};
         if (callback && typeof callback === "function") {
             if (isWithAnyScrolling) callback(e);
@@ -294,7 +350,7 @@ const Dropdown = ({ label, options = [], value, error, disabled, onChange, place
     const renderListContainer = ()=>{
         const lc = getListContainer();
         if (!lc) return null;
-        return /*#__PURE__*/ createPortal(getListMarkUp(), lc);
+        return /*#__PURE__*/ (0, _reactdom.createPortal)(getListMarkUp(), lc);
     };
     const getSortedOptions = (data)=>{
         let newData = [
@@ -303,7 +359,7 @@ const Dropdown = ({ label, options = [], value, error, disabled, onChange, place
         if (sortAlphabetical) {
             const openModalOption = newData.filter(({ value })=>value === "open_modal");
             const emptyOption = newData.filter(({ value })=>value === "");
-            const restOfOptions = newData.filter(({ value })=>value !== "open_modal" && value !== "").sort(compareAlphabetical);
+            const restOfOptions = newData.filter(({ value })=>value !== "open_modal" && value !== "").sort(_utils.compareAlphabetical);
             newData = [
                 ...openModalOption,
                 ...emptyOption,
@@ -312,7 +368,7 @@ const Dropdown = ({ label, options = [], value, error, disabled, onChange, place
                 if (item === null || item === void 0 ? void 0 : item.items) {
                     item.items = [
                         ...item.items
-                    ].sort(compareAlphabetical);
+                    ].sort(_utils.compareAlphabetical);
                 }
                 return item;
             });
@@ -321,43 +377,43 @@ const Dropdown = ({ label, options = [], value, error, disabled, onChange, place
     };
     const getListMarkUp = ()=>{
         var _getSortedOptions;
-        return /*#__PURE__*/ _jsx("div", {
-            className: cn(`${RC}__container-wrapper`),
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            className: (0, _classnames.default)(`${RC}__container-wrapper`),
             ref: wrapperRef,
             onClick: isMobile ? onWrapperClick : ()=>{},
-            children: /*#__PURE__*/ _jsxs("div", {
-                className: cn(`${RC}__list-wrapper`, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: (0, _classnames.default)(`${RC}__list-wrapper`, {
                     [`${RC}__list-wrapper--fixed-height`]: isFixedMaxHeight,
                     [`${RC}__list-wrapper--with-bottom-shadow`]: isScrollableList && isMobile,
                     [`${RC}__list-wrapper--with-bottom-shadow-hidden`]: scrollTop === scrollHeight
                 }),
                 ref: dropdownListWrapperRef,
                 children: [
-                    isMobile && /*#__PURE__*/ _jsxs("div", {
-                        className: cn(`${RC}__list-header`, {
+                    isMobile && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        className: (0, _classnames.default)(`${RC}__list-header`, {
                             [`${RC}__list-header-with-shadow`]: isScrollableList && isMobile,
                             [`${RC}__list-header-with-shadow-hidden`]: scrollTop === 0
                         }),
                         children: [
-                            /*#__PURE__*/ _jsxs("div", {
-                                className: cn(`${RC}__list-header-row`),
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                                className: (0, _classnames.default)(`${RC}__list-header-row`),
                                 children: [
-                                    /*#__PURE__*/ _jsx("div", {
-                                        className: cn(`${RC}__list-label`),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                        className: (0, _classnames.default)(`${RC}__list-label`),
                                         children: label
                                     }),
-                                    /*#__PURE__*/ _jsx("div", {
-                                        className: cn(`${RC}__list-close-icon`),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                        className: (0, _classnames.default)(`${RC}__list-close-icon`),
                                         onClick: ()=>setIsOpen(false),
-                                        children: /*#__PURE__*/ _jsx(X, {
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.X, {
                                             onClick: ()=>setIsOpen(false)
                                         })
                                     })
                                 ]
                             }),
-                            isSearchable && /*#__PURE__*/ _jsx("div", {
-                                className: cn(`${RC}__list-header-row`),
-                                children: /*#__PURE__*/ _jsx(Input, {
+                            isSearchable && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                className: (0, _classnames.default)(`${RC}__list-header-row`),
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.default, {
                                     ref: searchInputRef,
                                     className: `${RC}__input`,
                                     value: searchValue !== null && searchValue !== void 0 ? searchValue : selectedLabel,
@@ -376,8 +432,8 @@ const Dropdown = ({ label, options = [], value, error, disabled, onChange, place
                             })
                         ]
                     }),
-                    /*#__PURE__*/ _jsxs("div", {
-                        className: cn(`${RC}__list`, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        className: (0, _classnames.default)(`${RC}__list`, {
                             [`${RC}__list-top`]: isListTop
                         }),
                         ref: dropdownListRef,
@@ -403,11 +459,11 @@ const Dropdown = ({ label, options = [], value, error, disabled, onChange, place
                                     return getMarkupForElement(option);
                                 }
                             }),
-                            !filteredItems.length && !filteredGroups.length && /*#__PURE__*/ _jsx("div", {
+                            !filteredItems.length && !filteredGroups.length && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                                 className: `${RC}__list-item ${RC}__list-item--no-options`,
                                 children: noOptionsText
                             }),
-                            disabled && isOpen && /*#__PURE__*/ _jsx(DropdownLoader, {})
+                            disabled && isOpen && /*#__PURE__*/ (0, _jsxruntime.jsx)(_DropdownLoader.default, {})
                         ]
                     })
                 ]
@@ -421,7 +477,7 @@ const Dropdown = ({ label, options = [], value, error, disabled, onChange, place
         });
     };
     const closeList = isOpen ? handleClickOutside : ()=>{};
-    useEffect(()=>{
+    (0, _react.useEffect)(()=>{
         if (!isDoNotPullOutListOfMainContainer || dropdownRef.current) {
             initListContainer();
             if (isDefaultOpened && !isMobileProp) setIsOpen(true);
@@ -430,7 +486,7 @@ const Dropdown = ({ label, options = [], value, error, disabled, onChange, place
         isDoNotPullOutListOfMainContainer,
         dropdownRef.current
     ]);
-    useLayoutEffect(()=>{
+    (0, _react.useLayoutEffect)(()=>{
         var _getListContainer;
         if (!isMobile) {
             window.addEventListener("resize", setListContainerStyles);
@@ -455,7 +511,7 @@ const Dropdown = ({ label, options = [], value, error, disabled, onChange, place
     }, [
         getListContainer
     ]);
-    useLayoutEffect(()=>{
+    (0, _react.useLayoutEffect)(()=>{
         setListContainerStyles();
     }, [
         isOpen,
@@ -464,11 +520,11 @@ const Dropdown = ({ label, options = [], value, error, disabled, onChange, place
         options,
         dropdownListWrapperRef === null || dropdownListWrapperRef === void 0 ? void 0 : (_dropdownListWrapperRef_current = dropdownListWrapperRef.current) === null || _dropdownListWrapperRef_current === void 0 ? void 0 : (_dropdownListWrapperRef_current_getBoundingClientRect = _dropdownListWrapperRef_current.getBoundingClientRect()) === null || _dropdownListWrapperRef_current_getBoundingClientRect === void 0 ? void 0 : _dropdownListWrapperRef_current_getBoundingClientRect.height
     ]);
-    useEffect(()=>{
+    (0, _react.useEffect)(()=>{
         document.addEventListener("click", handleClickOutside, true);
         return ()=>document.removeEventListener("click", handleClickOutside, true);
     }, []);
-    useEffect(()=>{
+    (0, _react.useEffect)(()=>{
         if (!isOpen) {
             setIsSearchChanged(false);
         }
@@ -482,7 +538,7 @@ const Dropdown = ({ label, options = [], value, error, disabled, onChange, place
         isOpen,
         dropdownListRef
     ]);
-    useEffect(()=>{
+    (0, _react.useEffect)(()=>{
         if (!searchValue && isSearchInputFocused) {
             setSearchValue(selectedLabel);
             setTimeout(()=>searchInputRef.current.select(), 1);
@@ -493,7 +549,7 @@ const Dropdown = ({ label, options = [], value, error, disabled, onChange, place
     }, [
         isSearchInputFocused
     ]);
-    useEffect(()=>{
+    (0, _react.useEffect)(()=>{
         var _searchInputRef_current;
         if (isOpen && !isSearchInputFocused && (searchInputRef === null || searchInputRef === void 0 ? void 0 : searchInputRef.current) && !isMobile) searchInputRef === null || searchInputRef === void 0 ? void 0 : (_searchInputRef_current = searchInputRef.current) === null || _searchInputRef_current === void 0 ? void 0 : _searchInputRef_current.focus();
         if (isOpen) {
@@ -510,7 +566,7 @@ const Dropdown = ({ label, options = [], value, error, disabled, onChange, place
     }, [
         isOpen
     ]);
-    useEffect(()=>{
+    (0, _react.useEffect)(()=>{
         if (isOpen && isMobile && (dropdownListRef === null || dropdownListRef === void 0 ? void 0 : dropdownListRef.current) && !searchValue) {
             var _dropdownListRef_current, _dropdownListRef_current1, _dropdownListRef_current2, _dropdownListRef_current3;
             setIsScrollableList((dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef_current = dropdownListRef.current) === null || _dropdownListRef_current === void 0 ? void 0 : _dropdownListRef_current.scrollHeight) > (dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef_current1 = dropdownListRef.current) === null || _dropdownListRef_current1 === void 0 ? void 0 : _dropdownListRef_current1.clientHeight));
@@ -524,7 +580,7 @@ const Dropdown = ({ label, options = [], value, error, disabled, onChange, place
         dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef_current = dropdownListRef.current) === null || _dropdownListRef_current === void 0 ? void 0 : _dropdownListRef_current.scrollHeight,
         dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef_current1 = dropdownListRef.current) === null || _dropdownListRef_current1 === void 0 ? void 0 : _dropdownListRef_current1.clientHeight
     ]);
-    useEffect(()=>{
+    (0, _react.useEffect)(()=>{
         const setScrollTopValue = (e)=>{
             setScrollTop(parseInt(e.target.scrollTop, 10));
         };
@@ -541,7 +597,7 @@ const Dropdown = ({ label, options = [], value, error, disabled, onChange, place
         isMobile,
         dropdownListRef === null || dropdownListRef === void 0 ? void 0 : dropdownListRef.current
     ]);
-    useEffect(()=>{
+    (0, _react.useEffect)(()=>{
         if (dropdownListRef === null || dropdownListRef === void 0 ? void 0 : dropdownListRef.current) {
             var _dropdownListRef_current, _dropdownListRef_current1;
             setScrollHeight(parseInt((dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef_current = dropdownListRef.current) === null || _dropdownListRef_current === void 0 ? void 0 : _dropdownListRef_current.scrollHeight) - (dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef_current1 = dropdownListRef.current) === null || _dropdownListRef_current1 === void 0 ? void 0 : _dropdownListRef_current1.clientHeight), 10));
@@ -550,7 +606,7 @@ const Dropdown = ({ label, options = [], value, error, disabled, onChange, place
         scrollTop,
         dropdownListRef === null || dropdownListRef === void 0 ? void 0 : dropdownListRef.current
     ]);
-    useEffect(()=>{
+    (0, _react.useEffect)(()=>{
         return ()=>{
             var _getListContainer, _getListContainerWrapper;
             (_getListContainer = getListContainer()) === null || _getListContainer === void 0 ? void 0 : _getListContainer.remove();
@@ -558,8 +614,8 @@ const Dropdown = ({ label, options = [], value, error, disabled, onChange, place
         };
     }, []);
     const postfixText = selectedLabel && ((_filteredOptions_find = filteredOptions.find((option)=>option.value === value)) === null || _filteredOptions_find === void 0 ? void 0 : _filteredOptions_find.postfix) || null;
-    return /*#__PURE__*/ _jsxs("div", {
-        className: cn(RC, className, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        className: (0, _classnames.default)(RC, className, {
             disabled,
             [`${RC}-mobile`]: isMobile,
             [`${RC}--focused`]: isOpen && !isMobile,
@@ -569,9 +625,9 @@ const Dropdown = ({ label, options = [], value, error, disabled, onChange, place
         onKeyDown: onKeyDown,
         onKeyUp: onKeyUp,
         children: [
-            /*#__PURE__*/ _jsx("button", {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
                 "data-testid": testId,
-                className: cn(`${RC}__trigger`, "input__wrap", {
+                className: (0, _classnames.default)(`${RC}__trigger`, "input__wrap", {
                     [`${RC}__trigger--with-actions`]: withActions,
                     placeholder: !value,
                     error: error
@@ -580,9 +636,9 @@ const Dropdown = ({ label, options = [], value, error, disabled, onChange, place
                 onKeyDown: onKeyDown,
                 onKeyUp: onKeyUp,
                 tabIndex: tabIndex === null || tabIndex === void 0 ? void 0 : (_tabIndex_toString = tabIndex.toString) === null || _tabIndex_toString === void 0 ? void 0 : _tabIndex_toString.call(tabIndex),
-                children: customTrigger || /*#__PURE__*/ _jsxs(_Fragment, {
+                children: customTrigger || /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                     children: [
-                        isSearchable && !isMobile ? /*#__PURE__*/ _jsx("input", {
+                        isSearchable && !isMobile ? /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
                             ref: searchInputRef,
                             className: `${RC}__input`,
                             value: isOpen ? searchValue !== null && searchValue !== void 0 ? searchValue : "" : selectedLabel || "",
@@ -597,42 +653,42 @@ const Dropdown = ({ label, options = [], value, error, disabled, onChange, place
                             },
                             ...attributesOfNativeInput,
                             tabIndex: -1
-                        }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                        }) : /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                             children: [
-                                /*#__PURE__*/ _jsx("span", {
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                     className: "text",
                                     children: selectedLabel || placeholder
                                 }),
-                                postfixText && /*#__PURE__*/ _jsx("span", {
+                                postfixText && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                     className: "dropdown__list-item-postfix",
                                     children: postfixText
                                 })
                             ]
                         }),
-                        /*#__PURE__*/ _jsx("span", {
-                            className: cn(`${RC}__arrow`, {
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                            className: (0, _classnames.default)(`${RC}__arrow`, {
                                 [`${RC}__arrow_active`]: isOpen
                             }),
                             onClick: toggleList,
-                            children: isMobile ? /*#__PURE__*/ _jsx(Code, {
+                            children: isMobile ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.Code, {
                                 className: "mobile-icon"
-                            }) : isOpen ? /*#__PURE__*/ _jsx(ChevronUp, {}) : /*#__PURE__*/ _jsx(ChevronDown, {})
+                            }) : isOpen ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.ChevronUp, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.ChevronDown, {})
                         })
                     ]
                 })
             }),
-            withActions && /*#__PURE__*/ _jsxs("div", {
-                className: cn(`${RC}__actions`),
+            withActions && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: (0, _classnames.default)(`${RC}__actions`),
                 children: [
-                    /*#__PURE__*/ _jsx("div", {
-                        className: cn(`${RC}__actions-item`),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: (0, _classnames.default)(`${RC}__actions-item`),
                         onClick: onActionConfirmClick,
-                        children: /*#__PURE__*/ _jsx(Check, {})
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.Check, {})
                     }),
-                    /*#__PURE__*/ _jsx("div", {
-                        className: cn(`${RC}__actions-item`),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: (0, _classnames.default)(`${RC}__actions-item`),
                         onClick: onActionCancelClick,
-                        children: /*#__PURE__*/ _jsx(X, {})
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.X, {})
                     })
                 ]
             }),
@@ -640,4 +696,4 @@ const Dropdown = ({ label, options = [], value, error, disabled, onChange, place
         ]
     });
 };
-export default Dropdown;
+const _default = Dropdown;

package/dist/Atomic/FormElements/Dropdown/Dropdown.stories.js

@@ -1,10 +1,74 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from "react";
-import { Codesandbox, MoreVertical } from "react-feather";
-import Dropdown from "./Dropdown";
-export default {
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    DropdownTemplate: function() {
+        return DropdownTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _reactfeather = require("react-feather");
+const _Dropdown = /*#__PURE__*/ _interop_require_default(require("./Dropdown"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const _default = {
     title: "Form Elements/Dropdown",
-    component: Dropdown,
+    component: _Dropdown.default,
     argTypes: {
         className: {
             description: "string"
@@ -43,16 +107,16 @@ const buttonStyles = {
     margin: "0 0 0 50px"
 };
 const Template = (args)=>{
-    const [value, setValue] = useState(args.value);
-    const [disabled, setDisabled] = useState(false);
-    return /*#__PURE__*/ _jsxs("div", {
+    const [value, setValue] = (0, _react.useState)(args.value);
+    const [disabled, setDisabled] = (0, _react.useState)(false);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
         style: blockStyles,
         children: [
-            /*#__PURE__*/ _jsx("div", {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                 style: {
                     width: 200
                 },
-                children: /*#__PURE__*/ _jsx(Dropdown, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Dropdown.default, {
                     ...args,
                     value: value,
                     onChange: setValue,
@@ -67,12 +131,12 @@ const Template = (args)=>{
                     withMobileLogic: true
                 })
             }, "dropdown"),
-            /*#__PURE__*/ _jsx("div", {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                 style: {
                     width: 200,
                     marginLeft: 20
                 },
-                children: /*#__PURE__*/ _jsx(Dropdown, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Dropdown.default, {
                     ...args,
                     value: value,
                     onChange: setValue,
@@ -85,16 +149,16 @@ const Template = (args)=>{
                         scrollingInaccuracy: 5
                     },
                     withMobileLogic: true,
-                    customTrigger: /*#__PURE__*/ _jsx(MoreVertical, {})
+                    customTrigger: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.MoreVertical, {})
                 })
             }, "dropdown"),
-            /*#__PURE__*/ _jsx("button", {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
                 style: buttonStyles,
                 className: "mt10",
                 onClick: ()=>setValue(""),
                 children: "Reset"
             }, "reset"),
-            /*#__PURE__*/ _jsx("button", {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
                 style: buttonStyles,
                 className: "mt10",
                 onClick: ()=>setDisabled(!disabled),
@@ -103,7 +167,7 @@ const Template = (args)=>{
         ]
     });
 };
-export const DropdownTemplate = Template.bind({});
+const DropdownTemplate = Template.bind({});
 DropdownTemplate.args = {
     // isListTop: true,
     entity: "entity",
@@ -119,7 +183,7 @@ DropdownTemplate.args = {
                     value: 8,
                     label: "Doors",
                     isNoActiveLenders: false,
-                    icon: /*#__PURE__*/ _jsx(Codesandbox, {}),
+                    icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.Codesandbox, {}),
                     postfix: "",
                     description: "Very very very very very very very very very very very Long Doors in House Decsription"
                 },