intelicoreact 1.6.22 → 1.6.24

package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.js

@@ -1 +1,1110 @@
-function e(e,n){(null==n||n>e.length)&&(n=e.length);for(var l=0,t=Array(n);l<n;l++)t[l]=e[l];return t}function n(e,n,l){return n in e?Object.defineProperty(e,n,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[n]=l,e}function l(e){for(var l=1;l<arguments.length;l++){var t=null!=arguments[l]?arguments[l]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),o.forEach(function(l){n(e,l,t[l])})}return e}function t(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):(function(e,n){var l=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);l.push.apply(l,t)}return l})(Object(n)).forEach(function(l){Object.defineProperty(e,l,Object.getOwnPropertyDescriptor(n,l))}),e}function o(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var l,t,o=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=o){var r=[],i=!0,u=!1;try{for(o=o.call(e);!(i=(l=o.next()).done)&&(r.push(l.value),!n||r.length!==n);i=!0);}catch(e){u=!0,t=e}finally{try{i||null==o.return||o.return()}finally{if(u)throw t}}return r}}(e,n)||i(e,n)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function r(n){return function(n){if(Array.isArray(n))return e(n)}(n)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(n)||i(n)||function(){throw TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function i(n,l){if(n){if("string"==typeof n)return e(n,l);var t=Object.prototype.toString.call(n).slice(8,-1);if("Object"===t&&n.constructor&&(t=n.constructor.name),"Map"===t||"Set"===t)return Array.from(t);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return e(n,l)}}Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return j}});var u=require("react/jsx-runtime"),a=w(require("classnames")),c=function(e,n){if(e&&e.__esModule)return e;if(null===e||(void 0===e?"undefined":e&&"undefined"!=typeof Symbol&&e.constructor===Symbol?"symbol":typeof e)!="object"&&"function"!=typeof e)return{default:e};var l=y(n);if(l&&l.has(e))return l.get(e);var t={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var r in e)if("default"!==r&&Object.prototype.hasOwnProperty.call(e,r)){var i=o?Object.getOwnPropertyDescriptor(e,r):null;i&&(i.get||i.set)?Object.defineProperty(t,r,i):t[r]=e[r]}return t.default=e,l&&l.set(e,t),t}(require("react")),s=require("react-dom"),d=require("react-feather"),v=require("../../../Functions/fieldValueFormatters"),f=require("../../../Functions/useDebounce"),m=w(require("../../../Functions/useIsMobile/useIsMobile")),p=w(require("../../UI/Button/Button")),h=w(require("../../UI/Tag/Tag")),g=w(require("../../UI/TagList/TagList")),b=w(require("../CheckboxInput/CheckboxInput")),_=w(require("../Input/Input"));function w(e){return e&&e.__esModule?e:{default:e}}function y(e){if("function"!=typeof WeakMap)return null;var n=new WeakMap,l=new WeakMap;return(y=function(e){return e?l:n})(e)}require("./TagsDropdown.scss");var x="tags-dropdown",N=["#F1F0F0","#E3E2E0","#EEDFDA","#F9DEC9","#FDECC8","#DBECDB","#D3E4EF","#E8DEEE","#F4E0E9","#FFE2DD","#D3EFED","#ECEEDE"],j=function(e){var i,w,y,j,C,E,O,S=e.options,L=e.chosenOptions,k=e.onChange,D=e.className,I=e.tagClassname,P=e.listClassName,M=e.onKeyPress,R=e.placeholder,A=e.label,F=e.disabled,T=e.isValuesInTags,B=e.error,H=e.isNotValidateASCII,q=void 0!==H&&H,z=e.noTagsWrap,W=void 0!==z&&z,U=e.headerContent,K=void 0===U?null:U,V=e.footerContent,X=void 0===V?null:V,Y=e.selectAllButtonRef,$=void 0===Y?null:Y,G=e.unselectAllButtonRef,J=void 0===G?null:G,Q=e.closeOnSelect,Z=void 0!==Q&&Q,ee=e.closeOnRemove,en=void 0!==ee&&ee,el=e.closeOnRemoveAll,et=void 0!==el&&el,eo=e.closeOnSelectAll,er=void 0!==eo&&eo,ei=e.closeOnSelectMobile,eu=void 0!==ei&&ei,ea=e.closeOnRemoveMobile,ec=void 0!==ea&&ea,es=e.closeOnRemoveAllMobile,ed=void 0!==es&&es,ev=e.closeOnSelectAllMobile,ef=void 0!==ev&&ev,em=e.fieldKey,ep=e.id,eh=e.noOptionsText,eg=void 0===eh?"No options available":eh,eb=e.mobileSearchPlaceholder,e_=e.isSearchable,ew=void 0===e_||e_,ey=e.useLiveSearch,ex=e.doRequest,eN=e.attributesOfNativeInput,ej=e.isUseLocalOptionsStore,eC=void 0===ej||ej,eE=e.isDefaultOpened,eO=void 0!==eE&&eE,eS=e.withMobileLogic,eL=e.withCreateLogic,ek=e.withActions,eD=e.withSearchInputInList,eI=e.renderOptionsAsTags,eP=e.minItemsForShowMobileSearch,eM=void 0===eP?10:eP,eR=e.onOptionCreate,eA=e.onOptionEdit,eF=e.onOptionDelete,eT=e.onActionConfirmClick,eB=e.onActionCancelClick,eH=e.onDropdownListClose,eq=e.customTriggerRef,ez=e.renderCustomTrigger,eW=e.recalculateListContainerStylesTrigger,eU=(0,c.useRef)(null),eK=(0,c.useRef)(null),eV=(0,c.useRef)(null),eX=(0,c.useRef)(null),eY=(0,c.useRef)(null),e$=(0,c.useRef)(null),eG=(0,m.default)().isMobile,eJ=eG&&eS&&window.screen.width<=768,eQ=o((0,c.useState)(ep||em||Math.random().toString(16).slice(2)),1)[0],eZ=o((0,c.useState)(!1),2),e0=eZ[0],e1=eZ[1],e2=o((0,c.useState)(0),2),e3=e2[0],e6=e2[1],e8=o((0,c.useState)(null),2),e5=e8[0],e9=e8[1],e4=o((0,c.useState)(null),2),e7=e4[0],ne=e4[1],nn=o((0,c.useState)(null),2),nl=nn[0],nt=nn[1],no=o((0,c.useState)(!1),2),nr=no[0],ni=no[1],nu=o((0,c.useState)(0),2),na=nu[0],nc=nu[1],ns=o((0,c.useState)(1),2),nd=ns[0],nv=ns[1],nf=(0,c.useRef)(null),nm=o((0,c.useState)(""),2),np=nm[0],nh=nm[1],ng=(0,f.useDebounce)({searchValue:np,delay:600}),nb=o((0,c.useState)(!1),2),n_=nb[0],nw=nb[1],ny=function(e){nh(e),nw(np!==e&&""===e),nf.current=e},nx=(0,c.useRef)(null),nN=o((0,c.useState)([]),2),nj=nN[0],nC=nN[1],nE=o((0,c.useState)(null),2),nO=nE[0],nS=nE[1],nL=function(e){nS(function(n){return e?t(l({},null!=n?n:{},"function"==typeof e?null==e?void 0:e(n):e),{isChanged:!!n}):e})},nk=(0,c.useMemo)(function(){return!!nO&&(!!nj.filter(function(e){return e.value!==nO.value}).some(function(e){return e.label===nO.label})||null)},[nj,nO]),nD=o((0,c.useState)({}),2),nI=nD[0],nP=nD[1],nM=(0,c.useMemo)(function(){var e=Math.floor(Math.random()*(N.length-1-0+1))+0;return N[e]},[nj.length]),nR=null==nj?void 0:nj.reduce(function(e,n){var l,t=function(e,n){var l=null==e?void 0:e.findIndex(function(e){return e.value===(null==n?void 0:n.value)});-1!==l?e[l]=n:e.push(n)};return n.groupName?null==(l=n.list)||l.map(function(n){return t(e,n)}):t(e,n),e},eC?null==(w=Object.keys(nI))?void 0:w.map(function(e){var n;return{value:e,label:null!=(n=null==nI?void 0:nI[e])?n:""}}):[]),nA=function(e){(eJ?ec:en)&&e1(!1),eC&&nP(function(o){return t(l({},o),n({},e,void 0))}),null==k||k(L.filter(function(n){return n!==e}),"chosenOptions")},nF=function(){var e,n;return null!=(n=null!=(e=document.querySelector("div#root"))?e:document.querySelector("div#app"))?n:document.querySelector("div#storybook-root")},nT=function(){var e,n=document.createElement("div");if(n.setAttribute("id",eQ),n.classList.add("tags-dropdown__container"),P&&n.classList.add(P),eJ&&n.addEventListener("click",function(e){e.target&&e.target.id===eQ&&e1(!1)}),eJ){try{null==(t=document.getElementById("mlw-".concat(eQ)))||t.remove()}catch(e){}var l,t,o=document.createElement("div");o.classList.add("tags-dropdown-mobile"),o.setAttribute("id","mlw-".concat(eQ)),null==o||o.append(n),null==(l=nF())||l.append(o)}else null==(e=nF())||e.append(n)},nB=function(){return document.getElementById(eQ)},nH=function(){var e=nB();if(!e||!e0)return!1;var n=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight,l=null!=(x=null==eV||null==(h=eV.current)?void 0:h.getBoundingClientRect())?x:{},t=l.width,o=l.height,r=void 0===o?0:o,i=l.left,u=l.top,a=void 0===u?0:u,c=null==e$?void 0:e$.current,s=e.getElementsByClassName("tags-dropdown__list")[0],d=null==c?void 0:c.getElementsByClassName("tags-dropdown__header")[0],v=null==c?void 0:c.getElementsByClassName("tags-dropdown__footer")[0],f=Number.parseInt(null!=(N=null==(b=getComputedStyle(c))||null==(g=b.marginTop)?void 0:g.replace("px",""))?N:0,10),m=null!=(j=null==c||null==(_=c.getBoundingClientRect())?void 0:_.height)?j:0,p=500-(null!=(C=null==d||null==(w=d.getBoundingClientRect())?void 0:w.height)?C:0)-(null!=(E=null==v||null==(y=v.getBoundingClientRect())?void 0:y.height)?E:0);if(eJ&&eS)s.style.maxHeight="".concat(p,"px");else{var h,g,b,_,w,y,x,N,j,C,E,O,S,L,k,D,I=null==(O=getComputedStyle(s))?void 0:O.maxHeight,P=null!=e7?e7:Number.parseInt(null!=(k=null==I?void 0:I.replace("px",""))?k:0,10);null!==e7||Number.isNaN(P)||ne(P),void 0!==m&&m>P&&!Number.isNaN(P)&&(m=P-2*f);var M=ez?a-f-(null!=(D=null==eq||null==(L=eq.current)||null==(S=L.getBoundingClientRect())?void 0:S.height)?D:0):a-f,R=n-a-r-2*f,A=e5;!e5&&nj.length&&e9(A=M<R||R>=m?"bottom":"top"),m>("top"===A?M:R)&&((m=("top"===A?M:R)-3*f)<200&&(m=200),c&&(c.style.maxHeight="".concat(m,"px"))),e.style.minWidth="".concat(t,"px"),e.style.left="".concat(i,"px"),e.style.top="".concat("bottom"===A?a+r:a-m-2*f,"px")}},nq=function(){var e,n={label:np,style:{backgroundColor:nM},isEditable:!0,ref:(0,c.createRef)()};(null!=(e=null==eR?void 0:eR(n))?e:new Promise(function(e){return e(1)})).then(function(e){var l,t=Math.random().toString(16).slice(2);n.value=null!=(l=null==e?void 0:e.id)?l:t,nC(function(e){return r(e).concat([n])}),nh(""),nQ(n)})},nz=function(e,n){null==e||e.preventDefault(),null==e||e.stopPropagation(),nL((null==nO?void 0:nO.value)===(null==n?void 0:n.value)?null:n)},nW=function(){var e;(null!=(e=null==eF?void 0:eF(nO))?e:new Promise(function(e){return e(1)})).then(function(){(null==nO?void 0:nO.value)&&nA(null==nO?void 0:nO.value),nC(function(e){return e.filter(function(e){return e.value!==(null==nO?void 0:nO.value)})}),nL(null)})},nU=function(){if(!(null==nO?void 0:nO.isChanged)||nk)return nL(null),!1;null==eA||eA(nO),nC(function(e){return e.map(function(e){if(nO&&e.value===(null==nO?void 0:nO.value)){var n=l({},nO);return nL(null),n}return e})})},nK=function(){if(!nO||!(null==eY?void 0:eY.current))return null;var e,n,l,t,o,r,i,u=window.scrollX,a=window.scrollY,c={left:"modal-left",right:"modal-right",top:"modal-top",bottom:"modal-bottom"},s=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,d=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight,v=null==nO||null==(e=nO.ref)?void 0:e.current,f=null!=(l=null==v?void 0:v.getBoundingClientRect())?l:{},m=f.x,p=f.y,h=void 0===p?0:p,g=f.width,b=f.height,_=void 0===b?0:b,w=null==e$||null==(n=e$.current)?void 0:n.getBoundingClientRect(),y=s-(null!=(t=null==w?void 0:w.x)?t:0)-(null!=(o=null==w?void 0:w.width)?o:0),x=d-h-a-_;Object.values(c).map(function(e){return eY.current&&eY.current.classList.remove(e),e}),eY.current.classList.add(null!=(r=null==c?void 0:c[y<200?"left":"right"])?r:""),eY.current.classList.add(null!=(i=null==c?void 0:c[x<200?"top":"bottom"])?i:""),eY.current.style.left="".concat((void 0===m?0:m)+u+(void 0===g?0:g),"px"),eY.current.style.top="".concat(h+a+_,"px"),eY.current.style.transform="translate(".concat(y<200?"calc(-100% + 7px)":"-35px",", ").concat(x<200?"calc(-100% - ".concat(_+10,"px)"):"10px",")")},nV=function(e){var n,l,t,o,r,i,u=e.target;!e0||(null==(n=nB())?void 0:n.contains(u))||eY.current?eY.current&&!(null==(l=eY.current)?void 0:l.contains(u))&&((null==(i=document)||null==(r=i.getElementById)||null==(o=r.call(i,"editTrigger".concat(null==nO?void 0:nO.value)))||null==(t=o.contains)?void 0:t.call(o,u))||nU()):(e1(!1),null==eH||eH(e))},nX=function(e){var n;nV(e),e.target.isEqualNode(null==eU?void 0:eU.current)||null==eU||null==(n=eU.current)||n.blur()},nY=function(e){var n,l,t,o,r,i;return((null==e?void 0:e.tagName)!=="svg"||(null==e||null==(n=e.parentNode)?void 0:n.className)!=="tag__button")&&(null==e?void 0:e.tagName)!=="line"&&((null==e?void 0:e.tagName)==="svg"&&(null==e||null==(l=e.parentNode)?void 0:l.className)!=="tag__button"||(null==e||null==(o=e.className)||null==(t=o.indexOf)?void 0:t.call(o,"tag__label"))!==-1||(null==e||null==(i=e.className)||null==(r=i.indexOf)?void 0:r.call(i,"tag-list_wrapper"))!==-1||(null==e?void 0:e.className.indexOf("".concat(x,"__trigger")))!==-1||(null==e?void 0:e.className)==="tags-dropdown__arrow")},n$=function(e){if(e.isHiddenInList)return!1;var n=e.title||e.label;return!np.length||!!(null==n?void 0:n.toLowerCase().includes((null==np?void 0:np.toLowerCase())||""))},nG=function(e){return null==e?void 0:e.map(function(e){var n;return(null==e?void 0:e.groupName)?null!=(n=null==e?void 0:e.list)?n:[]:e}).flat()},nJ=(0,c.useCallback)(function(){return null==nj?void 0:nj.reduce(function(e,n){if(null==n?void 0:n.list){var l;e+=(null==n||null==(l=n.list)?void 0:l.length)||0}else++e;return e},0)},[nj]),nQ=function(e){var o,i;return(null==e||!e.isFreezed)&&(((null==e?void 0:e.closeOnOptionSelect)!==void 0?e.closeOnOptionSelect&&e1(!1):(eJ?eu:Z)&&e1(!1),ny(""),e.value&&L.includes(null==(o=e.value)?void 0:o.toString()))?nA(e.value):(e.value&&eC&&nP(function(o){var r;return e.value?t(l({},o),n({},null==(r=e.value)?void 0:r.toString(),null==e?void 0:e.label)):o}),e.value&&(null==k||k(r(L).concat([null==(i=e.value)?void 0:i.toString()]),"chosenOptions"))),null)},nZ=function(e){var n=e;q||(n=(0,v.formatToOnlyASCIICodeText)(n)),ny(n)},n0=function(e){e.target===(null==eK?void 0:eK.current)&&(e.stopPropagation(),e.preventDefault(),e1(!1))},n1=function(){var e,n=null==(e=nG(nj))?void 0:e.filter(function(e){var n=e.isFreezed,l=e.value;return l&&!n&&!(null==L?void 0:L.includes(null==l?void 0:l.toString()))&&"open_modal"!==l});eC&&nP(function(e){return null==n?void 0:n.reduce(function(e,n){var l=n.value,t=n.label;return l&&(e[l]=t),e},e)}),null==k||k(r(L).concat(r((null==n?void 0:n.map(function(e){var n=e.value;return n?null==n?void 0:n.toString():""}))||[])),"chosenOptions"),(eJ?ef:er)&&e1(!1)},n2=function(){eC&&nP({}),null==k||k(null==L?void 0:L.filter(function(e){var n,l;return null==(l=nG(nj))||null==(n=l.find(function(n){return n.value===e}))?void 0:n.isFreezed}),"chosenOptions"),(eJ?ed:et)&&e1(!1)},n3=(0,c.useCallback)(function(e){ex&&"function"==typeof ex&&+Math.round(e.target.clientHeight+e.target.scrollTop)==+e.target.scrollHeight&&ex(nf.current,!0)},[nj]),n6=function(e){var l,t=e.description,o=e.title||e.label,r=function(e){var n,l=null==e||null==(n=e.toLowerCase())?void 0:n.indexOf(null==np?void 0:np.toLowerCase());return -1===l?e:(0,u.jsxs)("pre",{className:"inherit-styles",children:[(0,u.jsx)("span",{children:e.substring(0,l)}),(0,u.jsx)("span",{className:"search-match bg--yellow",children:e.substring(l,l+(null==np?void 0:np.length))}),(0,u.jsx)("span",{children:e.substring(l+(null==np?void 0:np.length))})]})};return(0,u.jsxs)("button",{type:"button",ref:null==e?void 0:e.ref,onClick:function(n){n.preventDefault(),n.stopPropagation(),nQ(e)},className:(0,a.default)("".concat(x,"__list-item"),n({},"".concat(x,"__list-item_active"),null==L?void 0:L.some(function(n){return n===e.value})),n({},"".concat(x,"__list-item_disabled"),e.disabled),n({},"".concat(x,"__list-item_freezed"),null==e?void 0:e.isFreezed),n({},"".concat(x,"__list-item--editing"),(null==e?void 0:e.value)===(null==nO?void 0:nO.value)),e.className),children:[!eJ&&(0,u.jsx)("span",{className:(0,a.default)("".concat(x,"__active-icon"),n({},"".concat(x,"__active-icon_active"),null==L?void 0:L.some(function(n){return n===e.value}))),children:(0,u.jsx)(d.Check,{width:16,height:16,className:"color--text"})}),(0,u.jsxs)("div",{className:(0,a.default)("".concat(x,"__list-item-body")),children:[eI?(0,u.jsx)(h.default,{className:(0,a.default)("".concat(x,"__list-item-title"),null==e?void 0:e.labelClassName,{"tag_with-btn":!(null==e?void 0:e.isFreezed)}),label:o?r(o):"",style:null==e?void 0:e.style,isNoDismiss:!0},null==e?void 0:e.value):(0,u.jsx)("span",{className:(0,a.default)("".concat(x,"__list-item-title"),e.labelClassName),children:o?r(o):""}),t&&(0,u.jsx)("span",{className:(0,a.default)("".concat(x,"__list-item-description")),children:t})]}),!eJ&&(null==e?void 0:e.isEditable)&&eA&&eF&&(0,u.jsx)("div",{id:"editTrigger".concat(null==e?void 0:e.value),className:(0,a.default)("".concat(x,"__list-item-edit-trigger")),onClick:function(n){return nz(n,e)},children:(0,u.jsx)(d.MoreHorizontal,{})}),eJ?null!=(l=null==e?void 0:e.customMobileIcon)?l:(0,u.jsx)(b.default,{value:null==L?void 0:L.some(function(n){return n===e.value}),onChange:function(){nQ(e)},label:"",id:""}):""]},"".concat(x,"__list-item-").concat(e.id||e.value))},n8=function(){return(0,u.jsx)(_.default,l({ref:eU,className:(0,a.default)("".concat(x,"__input"),n({},"".concat(x,"__input--in-list"),eD)),value:np,onChange:nZ,placeholder:R||"Select from list",attributesOfNativeInput:t(l({},eN),{onKeyDown:function(e){13===e.keyCode&&eL&&eR&&nR.every(function(e){var n=e.label;return(null==n?void 0:n.toLowerCase())!==(null==np?void 0:np.toLowerCase())})&&nq(),null==M||M(e,np)}})},eL?{symbolsLimit:50}:{}))},n5=(0,c.useCallback)(function(){var e;return null!=(e=null==ez?void 0:ez({chosenOptions:L,singleLevelOptions:nR,deleteChosen:nA,inputRef:eU,onSearchHandler:nZ,isOpen:e0,setIsOpen:e1}))?e:(0,u.jsxs)("div",{className:(0,a.default)("".concat(x,"__trigger"),n({"tags-dropdown__error":B},"".concat(x,"__trigger--with-actions"),ek)),onClick:function(e){var n=e.target;(null==n?void 0:n.tagName)==="INPUT"?e1(!0):nY(n)&&e1(function(e){return!e})},children:[W?(0,u.jsx)(g.default,{items:null==L?void 0:L.map(function(e,n){var l=null==nR?void 0:nR.find(function(n){var l;return(null==(l=n.value)?void 0:l.toString())===(null==e?void 0:e.toString())});return{value:e,label:T?null==l?void 0:l.value:(null==l?void 0:l.label)||(null==l?void 0:l.name)||(null==l?void 0:l.title),id:n,className:null==l?void 0:l.labelClassName,style:null==l?void 0:l.style}}),disableShowMore:!0}):null==L?void 0:L.map(function(e){var n=null==nR?void 0:nR.find(function(n){var l;return(null==(l=n.value)?void 0:l.toString())===(null==e?void 0:e.toString())}),l=T?null==n?void 0:n.value:(null==n?void 0:n.label)||(null==n?void 0:n.name)||(null==n?void 0:n.title);return(0,u.jsx)(h.default,{className:(0,a.default)(I,null==n?void 0:n.labelClassName,{"tag_with-btn":!(null==n?void 0:n.isFreezed)}),label:l,style:null==n?void 0:n.style,removeItem:(null==n?void 0:n.isFreezed)?void 0:function(){return nA(e)},isNoDismiss:!1},e)}),0!==L.length&&W?"":n8(),(0,u.jsx)("span",{className:(0,a.default)("".concat(x,"__arrow"),n({},"".concat(x,"__arrow_active"),e0)),children:eJ?(0,u.jsx)(d.Code,{className:"mobile-icon"}):e0?(0,u.jsx)(d.ChevronUp,{className:"color--text"}):(0,u.jsx)(d.ChevronDown,{className:"color--text"})})]})},[L,nR,eU,e0]);return(0,c.useLayoutEffect)(function(){return nT(),eO&&!eG&&e1(!0),function(){var e,n;null==(e=nB())||e.remove(),null==(n=document.getElementById("mlw-".concat(eQ)))||n.remove()}},[]),(0,c.useLayoutEffect)(function(){var e;return eJ?(window.removeEventListener("mousewheel",nX),window.removeEventListener("wheel",nX),window.removeEventListener("touchmove",nX),window.removeEventListener("mouseup",nV)):(window.addEventListener("mousewheel",nX),window.addEventListener("wheel",nX),window.addEventListener("touchmove",nX),window.addEventListener("mouseup",nV)),null==(e=nB())||e.addEventListener("click",nX),function(){var e;window.removeEventListener("mousewheel",nX),window.removeEventListener("mouseup",nV),window.removeEventListener("wheel",nX),window.removeEventListener("touchmove",nX),null==(e=nB())||e.removeEventListener("click",nX)}},[nB,eJ]),(0,c.useLayoutEffect)(function(){e0&&(nH(),nK())},[e0,S,L,np,eJ,null==e$||null==(j=e$.current)||null==(y=j.getBoundingClientRect())?void 0:y.height,eW]),(0,c.useEffect)(function(){eC&&L.length!==Object.keys(nI).length&&nj.map(function(e){var o;return(null==e?void 0:e.value)&&!(null==nI?void 0:nI[null==e||null==(o=e.value)?void 0:o.toString()])&&nP(function(o){var r;return e.value?t(l({},o),n({},null==e||null==(r=e.value)?void 0:r.toString(),null==e?void 0:e.label)):o}),e})},[L,eC]),(0,c.useEffect)(function(){var e,n,l,t,o,r,i,u,a=function(){e6(window.scrollY)},c=e0?"addEventListener":"removeEventListener";null==$||null==(e=$.current)||e[c]("click",n1,!0),null==J||null==(n=J.current)||n[c]("click",n2,!0),e0?(eJ&&eS||window.removeEventListener("scroll",a),(null==eq?void 0:eq.current)&&(eq.current.style.pointerEvents="none"),null==(l=nB())||l.classList.add("tags-dropdown__container--opened"),eJ?null==eU||null==(i=eU.current)||null==(r=i.blur)||r.call(i):null==eU||null==(o=eU.current)||null==(t=o.focus)||t.call(o)):(eJ&&eS||window.addEventListener("scroll",a),(null==eq?void 0:eq.current)&&(eq.current.style.pointerEvents="auto"),null==(u=nB())||u.classList.remove("tags-dropdown__container--opened"),eD&&ny(""),e9(null),nh(""))},[e0]),(0,c.useEffect)(function(){var e,n,l,t,o,r=function(e){var n;nc(Number.parseInt(null==(n=e.target.scrollTop)?void 0:n.toString(),10))},i=function(e){e.preventDefault(),window.scrollTo({top:e3})};return e0&&eJ&&(null==eX?void 0:eX.current)&&(null==eX||null==(e=eX.current)||e.addEventListener("scroll",r),nt((null==eX||null==(n=eX.current)?void 0:n.scrollHeight)>(null==eX||null==(l=eX.current)?void 0:l.clientHeight)),null===nl&&ni((null==eX||null==(t=eX.current)?void 0:t.scrollHeight)>(null==eX||null==(o=eX.current)?void 0:o.clientHeight))),e0&&eX&&eX.current&&(eX.current.addEventListener("scroll",n3),eJ&&eS||window.addEventListener("scroll",i)),function(){var e,n;eJ&&eS||window.removeEventListener("scroll",i),null==eX||null==(e=eX.current)||e.removeEventListener("scroll",n3),null==eX||null==(n=eX.current)||n.removeEventListener("scroll",r)}},[e0,eJ,null==eX?void 0:eX.current,null==eX||null==(C=eX.current)?void 0:C.scrollHeight,null==eX||null==(E=eX.current)?void 0:E.clientHeight]),(0,c.useEffect)(function(){if(null==eX?void 0:eX.current){var e,n,l;nv(Number.parseInt((e=(null==eX||null==(n=eX.current)?void 0:n.scrollHeight)-(null==eX||null==(l=eX.current)?void 0:l.clientHeight),e.toString()),10))}},[na,null==eX?void 0:eX.current]),(0,c.useEffect)(function(){ew&&ey&&(ng||n_||e0)&&(null==ex||ex(ng))},[e0,ng,n_]),(0,c.useEffect)(function(){nC(S.map(function(e){return t(l({},e),{ref:(0,c.createRef)()})}))},[S]),(0,c.useEffect)(function(){if(nO){var e,n;nK(),null==nx||null==(n=nx.current)||null==(e=n.focus)||e.call(n)}},[null==nO?void 0:nO.value]),(0,u.jsxs)("div",{className:(0,a.default)(x,D,(n(O={},"".concat(x,"_disabled"),F),n(O,"".concat(x,"-mobile"),eJ),n(O,"".concat(x,"--focused"),e0&&!(null==eq?void 0:eq.current)&&!eJ),n(O,"".concat(x,"--custom-trigger"),!!(null==eq?void 0:eq.current)),O)),ref:eV,children:[n5(),ek&&(0,u.jsxs)("div",{className:(0,a.default)("".concat(x,"__actions")),children:[(0,u.jsx)("div",{className:(0,a.default)("".concat(x,"__actions-item")),onClick:eT,children:(0,u.jsx)(d.Check,{})}),(0,u.jsx)("div",{className:(0,a.default)("".concat(x,"__actions-item")),onClick:eB,children:(0,u.jsx)(d.X,{})})]}),e0&&((i=nB())?(0,s.createPortal)(function(){var e,o,r,i=null==nj?void 0:nj.reduce(function(e,n){if(n.groupName){var o,r=null==n||null==(o=n.list)?void 0:o.filter(function(e){return n$(e)});(null==r?void 0:r.length)&&e.push(t(l({},n),{list:r}))}else n$(n)&&e.push(n);return e},[]),c=[],v=!0,f=!1,m=void 0;try{for(var g,b,w,y=i[Symbol.iterator]();!(v=(w=y.next()).done);v=!0){var j,C,E,O,S=w.value;S.groupName?c.push((0,u.jsxs)("div",{className:(0,a.default)("".concat(x,"-group"),S.className),children:[(0,u.jsx)("span",{className:"".concat(x,"-group__name"),children:S.groupName}),null==(j=S.list)?void 0:j.map(function(e){return n6(e)})]},null==(O=S.groupName)||null==(E=O.toString())?void 0:E.replace(/ /g,"_").concat(null==(C=Date.now())?void 0:C.toString()))):c.push(n6(S))}}catch(e){f=!0,m=e}finally{try{v||null==y.return||y.return()}finally{if(f)throw m}}return(0,u.jsx)("div",{className:(0,a.default)("".concat(x,"__container-wrapper")),ref:eK,onClick:eJ?n0:function(){},children:(0,u.jsxs)("div",{ref:e$,className:(0,a.default)("".concat(x,"__selector-wrapper"),n({},"".concat(x,"__selector-wrapper--fixed-height"),nr&&eJ)),children:[K||eJ?(0,u.jsxs)("div",{className:(0,a.default)("".concat(x,"__header"),(n(o={},"".concat(x,"__header-with-shadow"),nl&&eJ),n(o,"".concat(x,"__header-with-shadow-hidden"),0===na),o)),children:[eJ&&(0,u.jsxs)(u.Fragment,{children:[(0,u.jsxs)("div",{className:(0,a.default)("".concat(x,"__header-row")),children:[(0,u.jsx)("div",{className:(0,a.default)("".concat(x,"__label")),children:A}),(0,u.jsx)("div",{className:(0,a.default)("".concat(x,"__close-icon")),onClick:function(e){e.stopPropagation(),e1(!1)},children:(0,u.jsx)(d.X,{onClick:function(e){e.stopPropagation(),e1(!1)}})})]}),nJ()>(eM||10)&&(0,u.jsx)("div",{className:(0,a.default)("".concat(x,"__header-row")),children:(0,u.jsx)(_.default,l({className:"".concat(x,"__input"),value:np,onChange:function(e){return ny(e)},placeholder:eb||"Search",withDelete:!0,onMouseDown:function(){e0||e1(!0)}},eN))})]}),K&&(0,u.jsx)("div",{className:(0,a.default)("".concat(x,"__header-row")),children:K})]}):null,eD&&(0,u.jsx)("div",{className:(0,a.default)("".concat(x,"__input-list-wrapper")),children:n8()}),eL&&eR&&np&&i.length&&nR.every(function(e){var n=e.label;return(null==n?void 0:n.toLowerCase())!==(null==np?void 0:np.toLowerCase())})?(0,u.jsx)("div",{className:(0,a.default)("".concat(x,"__creatable-helper")),children:"Select an option or create one"}):null,(0,u.jsxs)("div",{ref:eX,className:"".concat(x,"__list ").concat(K||eJ?"".concat(x,"__list--with-header"):""," ").concat(X?"".concat(x,"__list--with-footer"):""),children:[c,(null==(g=i.filter(function(e){return"open_modal"!==e.value}))?void 0:g.length)!==0||eL&&np?null:(0,u.jsx)("div",{className:"".concat(x,"__no-options"),children:eg})]}),(X||eJ)&&(null==(b=i.filter(function(e){return"open_modal"!==e.value}))?void 0:b.length)>0?(0,u.jsxs)("div",{className:(0,a.default)("".concat(x,"__footer"),(n(r={},"".concat(x,"__footer-with-shadow"),eJ&&nl),n(r,"".concat(x,"__footer-with-shadow-hidden"),na===nd),r)),children:[X,eJ&&(0,u.jsxs)("button",{type:"button",onClick:function(){return e1(!1)},children:["Apply",(null==L?void 0:L.length)?"(".concat(null==L?void 0:L.length,")"):""]})]}):null,nO&&(0,s.createPortal)((0,u.jsxs)("div",{ref:eY,className:(0,a.default)("".concat(x,"__edit-option-modal")),children:[(0,u.jsxs)("div",{className:(0,a.default)("".concat(x,"__edit-option-modal-section")),children:[(0,u.jsx)(_.default,{value:nO.label,onChange:function(e){return nL(function(n){return t(l({},n),{label:e})})},error:nk,onKeyDown:function(e){13===e&&nU()},symbolsLimit:"50",ref:nx}),(0,u.jsx)(p.default,{variant:"link",icon:(0,u.jsx)(d.Trash2,{}),label:"Delete",onClick:nW})]}),(0,u.jsx)("div",{className:(0,a.default)("".concat(x,"__edit-option-modal-section-divider"))}),(0,u.jsxs)("div",{className:(0,a.default)("".concat(x,"__edit-option-modal-section")),children:[(0,u.jsx)("h3",{children:"Colors"}),(0,u.jsx)("div",{className:(0,a.default)("".concat(x,"__edit-option-modal-section-colors")),children:N.map(function(e){var n;return(0,u.jsx)("div",{className:"color-block",style:{backgroundColor:e},onClick:function(){return nL(function(n){return t(l({},n),{style:t(l({},n?n.style:{}),{backgroundColor:e})})})},children:(null==nO||null==(n=nO.style)?void 0:n.backgroundColor)===e?(0,u.jsx)(d.Check,{}):null},e)})})]})]},"editOptionModal".concat(null==nO?void 0:nO.value)),null!=(e=document.getElementById("app"))?e:document.body),eL&&eR&&np&&nR.every(function(e){var n=e.label;return(null==n?void 0:n.toLowerCase())!==(null==np?void 0:np.toLowerCase())})&&(0,u.jsxs)("div",{className:(0,a.default)("".concat(x,"__create-option")),onClick:nq,children:["Create",(0,u.jsx)(h.default,{label:np,style:{backgroundColor:nM},isNoDismiss:!0})]})]})})}(),i):null)]})};
+/* eslint-disable ts/no-use-before-define */ /* eslint-disable react-web-api/no-leaked-event-listener */ "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 _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _reactdom = require("react-dom");
+const _reactfeather = require("react-feather");
+const _fieldValueFormatters = require("../../../Functions/fieldValueFormatters");
+const _useDebounce = require("../../../Functions/useDebounce");
+const _useIsMobile = /*#__PURE__*/ _interop_require_default(require("../../../Functions/useIsMobile/useIsMobile"));
+const _Button = /*#__PURE__*/ _interop_require_default(require("../../UI/Button/Button"));
+const _Tag = /*#__PURE__*/ _interop_require_default(require("../../UI/Tag/Tag"));
+const _TagList = /*#__PURE__*/ _interop_require_default(require("../../UI/TagList/TagList"));
+const _CheckboxInput = /*#__PURE__*/ _interop_require_default(require("../CheckboxInput/CheckboxInput"));
+const _Input = /*#__PURE__*/ _interop_require_default(require("../Input/Input"));
+require("./TagsDropdown.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 = 'tags-dropdown';
+const MIN_ITEMS_FOR_SHOW_MOBILE_SEARCH = 10;
+const COLORS = [
+    '#F1F0F0',
+    '#E3E2E0',
+    '#EEDFDA',
+    '#F9DEC9',
+    '#FDECC8',
+    '#DBECDB',
+    '#D3E4EF',
+    '#E8DEEE',
+    '#F4E0E9',
+    '#FFE2DD',
+    '#D3EFED',
+    '#ECEEDE'
+];
+const TagsDropdown = ({ options: optionsProp, chosenOptions, onChange, className, tagClassname, listClassName, onKeyPress, placeholder, label, disabled, isValuesInTags, error, isNotValidateASCII = false, noTagsWrap = false, headerContent = null, footerContent = null, selectAllButtonRef = null, unselectAllButtonRef = null, closeOnSelect = false, closeOnRemove = false, closeOnRemoveAll = false, closeOnSelectAll = false, closeOnSelectMobile = false, closeOnRemoveMobile = false, closeOnRemoveAllMobile = false, closeOnSelectAllMobile = false, fieldKey, id, noOptionsText = 'No options available', mobileSearchPlaceholder, isSearchable = true, useLiveSearch, doRequest: doLiveSearchRequest, attributesOfNativeInput, isUseLocalOptionsStore = true, isDefaultOpened = false, withMobileLogic, withCreateLogic, withActions, withSearchInputInList, renderOptionsAsTags, minItemsForShowMobileSearch = MIN_ITEMS_FOR_SHOW_MOBILE_SEARCH, onOptionCreate, onOptionEdit, onOptionDelete, onActionConfirmClick, onActionCancelClick, onDropdownListClose, customTriggerRef, renderCustomTrigger, recalculateListContainerStylesTrigger })=>{
+    var _Object_keys, _dropdownListWrapperRef_current_getBoundingClientRect, _dropdownListWrapperRef_current, _dropdownListRef_current, _dropdownListRef_current1;
+    const inputRef = (0, _react.useRef)(null);
+    const wrapperRef = (0, _react.useRef)(null);
+    const dropdownRef = (0, _react.useRef)(null);
+    const dropdownListRef = (0, _react.useRef)(null);
+    const editOptionModalRef = (0, _react.useRef)(null);
+    const dropdownListWrapperRef = (0, _react.useRef)(null);
+    const { isMobile: isMobileProp } = (0, _useIsMobile.default)();
+    const isMobile = isMobileProp && withMobileLogic && window.screen.width <= 768;
+    const [dropdownId] = (0, _react.useState)(id || fieldKey || Math.random().toString(16).slice(2));
+    const [isOpen, setIsOpen] = (0, _react.useState)(false);
+    const [windowScrollTop, setWindowScrollTop] = (0, _react.useState)(0);
+    const [listPos, setListPos] = (0, _react.useState)(null);
+    const [initListHeight, setInitListHeight] = (0, _react.useState)(null);
+    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);
+    const searchValueRef = (0, _react.useRef)(null);
+    const [searchValue, setSearchValue] = (0, _react.useState)('');
+    const debouncedSearchTerm = (0, _useDebounce.useDebounce)({
+        searchValue,
+        delay: 600
+    });
+    const [isValueDeleted, setIsValueDeleted] = (0, _react.useState)(false);
+    const setSearchValueInterceptor = (value)=>{
+        setSearchValue(value);
+        setIsValueDeleted(searchValue !== value && value === '');
+        searchValueRef.current = value;
+    };
+    const editingOptionInputRef = (0, _react.useRef)(null);
+    const [options, setOptions] = (0, _react.useState)([]);
+    const [editingOption, setEditingOptionState] = (0, _react.useState)(null);
+    const setEditingOption = (data)=>{
+        setEditingOptionState((editingOption)=>!data ? data : {
+                ...editingOption !== null && editingOption !== void 0 ? editingOption : {},
+                ...typeof data === 'function' ? data === null || data === void 0 ? void 0 : data(editingOption) : data,
+                isChanged: Boolean(editingOption)
+            });
+    };
+    const isEditingOptionError = (0, _react.useMemo)(()=>{
+        if (!editingOption) return false;
+        return options.filter(({ value })=>value !== editingOption.value).some(({ label })=>label === editingOption.label) ? true : null;
+    }, [
+        options,
+        editingOption
+    ]);
+    const [localOptionsStore, setLocalOptionsStore] = (0, _react.useState)({});
+    const randomColorForNewOption = (0, _react.useMemo)(()=>{
+        const getRandomIndex = (min, max)=>{
+            return Math.floor(Math.random() * (max - min + 1)) + min;
+        };
+        const randomIndex = getRandomIndex(0, COLORS.length - 1);
+        return COLORS[randomIndex];
+    }, [
+        options.length
+    ]);
+    const singleLevelOptions = options === null || options === void 0 ? void 0 : options.reduce((acc, item)=>{
+        const checkUniqAndPush = (acc, item)=>{
+            const isExist = acc === null || acc === void 0 ? void 0 : acc.findIndex(({ value })=>value === (item === null || item === void 0 ? void 0 : item.value));
+            if (isExist !== -1) {
+                acc[isExist] = item;
+            } else {
+                acc.push(item);
+            }
+        };
+        if (item.groupName) {
+            var _item_list;
+            (_item_list = item.list) === null || _item_list === void 0 ? void 0 : _item_list.map((item)=>checkUniqAndPush(acc, item));
+        } else {
+            checkUniqAndPush(acc, item);
+        }
+        return acc;
+    }, isUseLocalOptionsStore ? (_Object_keys = Object.keys(localOptionsStore)) === null || _Object_keys === void 0 ? void 0 : _Object_keys.map((value)=>{
+        var _localOptionsStore_value;
+        return {
+            value,
+            label: (_localOptionsStore_value = localOptionsStore === null || localOptionsStore === void 0 ? void 0 : localOptionsStore[value]) !== null && _localOptionsStore_value !== void 0 ? _localOptionsStore_value : ''
+        };
+    }) : []);
+    const deleteChosen = (value)=>{
+        if (isMobile ? closeOnRemoveMobile : closeOnRemove) setIsOpen(false);
+        if (isUseLocalOptionsStore) {
+            setLocalOptionsStore((options)=>{
+                const newOptions = {
+                    ...options,
+                    [value]: undefined
+                };
+                return newOptions;
+            });
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(chosenOptions.filter((item)=>item !== value), 'chosenOptions');
+    };
+    // --- LIST CONTAINER FUNCTIONS BEGIN --- //
+    const getParentNode = ()=>{
+        var _document_querySelector, _ref;
+        return (_ref = (_document_querySelector = document.querySelector('div#root')) !== null && _document_querySelector !== void 0 ? _document_querySelector : document.querySelector('div#app')) !== null && _ref !== void 0 ? _ref : document.querySelector('div#storybook-root');
+    };
+    const initListContainer = ()=>{
+        const dropdownList = document.createElement('div');
+        dropdownList.setAttribute('id', dropdownId);
+        dropdownList.classList.add('tags-dropdown__container');
+        listClassName && dropdownList.classList.add(listClassName);
+        if (isMobile) {
+            dropdownList.addEventListener('click', (e)=>{
+                if (e.target && e.target.id === dropdownId) setIsOpen(false);
+            });
+        }
+        if (isMobile) {
+            var _getParentNode;
+            try {
+                var _document_getElementById;
+                (_document_getElementById = document.getElementById(`mlw-${dropdownId}`)) === null || _document_getElementById === void 0 ? void 0 : _document_getElementById.remove();
+            } catch (e) {}
+            const dropdownMobileListWrapper = document.createElement('div');
+            dropdownMobileListWrapper.classList.add('tags-dropdown-mobile');
+            dropdownMobileListWrapper.setAttribute('id', `mlw-${dropdownId}`);
+            dropdownMobileListWrapper === null || dropdownMobileListWrapper === void 0 ? void 0 : dropdownMobileListWrapper.append(dropdownList);
+            (_getParentNode = getParentNode()) === null || _getParentNode === void 0 ? void 0 : _getParentNode.append(dropdownMobileListWrapper);
+        } else {
+            var _getParentNode1;
+            (_getParentNode1 = getParentNode()) === null || _getParentNode1 === void 0 ? void 0 : _getParentNode1.append(dropdownList);
+        }
+    };
+    const getListContainer = ()=>{
+        return document.getElementById(dropdownId);
+    };
+    const getListContainerWrapper = ()=>{
+        return document.getElementById(`mlw-${dropdownId}`);
+    };
+    const setListContainerStyles = ()=>{
+        var _dropdownRef_current, _getComputedStyle_marginTop, _getComputedStyle, _selectorWrapper_getBoundingClientRect, _listHeader_getBoundingClientRect, _listFooter_getBoundingClientRect;
+        const listContainer = getListContainer();
+        if (!listContainer || !isOpen) return false;
+        const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
+        var _dropdownRef_current_getBoundingClientRect;
+        const { width, height = 0, left, top = 0 } = (_dropdownRef_current_getBoundingClientRect = dropdownRef === null || dropdownRef === void 0 ? void 0 : (_dropdownRef_current = dropdownRef.current) === null || _dropdownRef_current === void 0 ? void 0 : _dropdownRef_current.getBoundingClientRect()) !== null && _dropdownRef_current_getBoundingClientRect !== void 0 ? _dropdownRef_current_getBoundingClientRect : {};
+        const selectorWrapper = dropdownListWrapperRef === null || dropdownListWrapperRef === void 0 ? void 0 : dropdownListWrapperRef.current;
+        const dropdownList = listContainer.getElementsByClassName('tags-dropdown__list')[0];
+        const listHeader = selectorWrapper === null || selectorWrapper === void 0 ? void 0 : selectorWrapper.getElementsByClassName('tags-dropdown__header')[0];
+        const listFooter = selectorWrapper === null || selectorWrapper === void 0 ? void 0 : selectorWrapper.getElementsByClassName('tags-dropdown__footer')[0];
+        var _getComputedStyle_marginTop_replace;
+        const margin = Number.parseInt((_getComputedStyle_marginTop_replace = (_getComputedStyle = getComputedStyle(selectorWrapper)) === null || _getComputedStyle === void 0 ? void 0 : (_getComputedStyle_marginTop = _getComputedStyle.marginTop) === null || _getComputedStyle_marginTop === void 0 ? void 0 : _getComputedStyle_marginTop.replace('px', '')) !== null && _getComputedStyle_marginTop_replace !== void 0 ? _getComputedStyle_marginTop_replace : 0, 10);
+        var _selectorWrapper_getBoundingClientRect_height;
+        let selectorWrapperHeight = (_selectorWrapper_getBoundingClientRect_height = selectorWrapper === null || selectorWrapper === void 0 ? void 0 : (_selectorWrapper_getBoundingClientRect = selectorWrapper.getBoundingClientRect()) === null || _selectorWrapper_getBoundingClientRect === void 0 ? void 0 : _selectorWrapper_getBoundingClientRect.height) !== null && _selectorWrapper_getBoundingClientRect_height !== void 0 ? _selectorWrapper_getBoundingClientRect_height : 0;
+        var _listHeader_getBoundingClientRect_height, _listFooter_getBoundingClientRect_height;
+        const maxSelectorWrapperHeight = 500 - ((_listHeader_getBoundingClientRect_height = listHeader === null || listHeader === void 0 ? void 0 : (_listHeader_getBoundingClientRect = listHeader.getBoundingClientRect()) === null || _listHeader_getBoundingClientRect === void 0 ? void 0 : _listHeader_getBoundingClientRect.height) !== null && _listHeader_getBoundingClientRect_height !== void 0 ? _listHeader_getBoundingClientRect_height : 0) - ((_listFooter_getBoundingClientRect_height = listFooter === null || listFooter === void 0 ? void 0 : (_listFooter_getBoundingClientRect = listFooter.getBoundingClientRect()) === null || _listFooter_getBoundingClientRect === void 0 ? void 0 : _listFooter_getBoundingClientRect.height) !== null && _listFooter_getBoundingClientRect_height !== void 0 ? _listFooter_getBoundingClientRect_height : 0);
+        if (!isMobile || !withMobileLogic) {
+            var _getComputedStyle1, _customTriggerRef_current_getBoundingClientRect, _customTriggerRef_current;
+            const dropdownListMaxHeightInPx = (_getComputedStyle1 = getComputedStyle(dropdownList)) === null || _getComputedStyle1 === void 0 ? void 0 : _getComputedStyle1.maxHeight;
+            var _dropdownListMaxHeightInPx_replace;
+            const maxHeight = initListHeight !== null && initListHeight !== void 0 ? initListHeight : Number.parseInt((_dropdownListMaxHeightInPx_replace = dropdownListMaxHeightInPx === null || dropdownListMaxHeightInPx === void 0 ? void 0 : dropdownListMaxHeightInPx.replace('px', '')) !== null && _dropdownListMaxHeightInPx_replace !== void 0 ? _dropdownListMaxHeightInPx_replace : 0, 10);
+            if (initListHeight === null && !Number.isNaN(maxHeight)) setInitListHeight(maxHeight);
+            if (selectorWrapperHeight !== undefined && selectorWrapperHeight > maxHeight && !Number.isNaN(maxHeight)) selectorWrapperHeight = maxHeight - 2 * margin;
+            var _customTriggerRef_current_getBoundingClientRect_height;
+            const toTop = renderCustomTrigger ? top - margin - ((_customTriggerRef_current_getBoundingClientRect_height = customTriggerRef === null || customTriggerRef === void 0 ? void 0 : (_customTriggerRef_current = customTriggerRef.current) === null || _customTriggerRef_current === void 0 ? void 0 : (_customTriggerRef_current_getBoundingClientRect = _customTriggerRef_current.getBoundingClientRect()) === null || _customTriggerRef_current_getBoundingClientRect === void 0 ? void 0 : _customTriggerRef_current_getBoundingClientRect.height) !== null && _customTriggerRef_current_getBoundingClientRect_height !== void 0 ? _customTriggerRef_current_getBoundingClientRect_height : 0) : top - margin;
+            const toBottom = windowHeight - top - height - margin * 2;
+            let listPosition = listPos;
+            if (!listPos && options.length) {
+                listPosition = toTop < toBottom || toBottom >= selectorWrapperHeight ? 'bottom' : 'top';
+                setListPos(listPosition);
+            }
+            if (selectorWrapperHeight > (listPosition === 'top' ? toTop : toBottom)) {
+                selectorWrapperHeight = (listPosition === 'top' ? toTop : toBottom) - 3 * margin;
+                if (selectorWrapperHeight < 200) {
+                    selectorWrapperHeight = 200;
+                }
+                if (selectorWrapper) selectorWrapper.style.maxHeight = `${selectorWrapperHeight}px`;
+            }
+            listContainer.style.minWidth = `${width}px`;
+            listContainer.style.left = `${left}px`;
+            listContainer.style.top = `${listPosition === 'bottom' ? top + height : top - selectorWrapperHeight - 2 * margin}px`;
+        } else {
+            dropdownList.style.maxHeight = `${maxSelectorWrapperHeight}px`;
+        }
+    };
+    const renderListContainer = ()=>{
+        const lc = getListContainer();
+        if (!lc) return null;
+        return /*#__PURE__*/ (0, _reactdom.createPortal)(getListMarkUp(), lc);
+    };
+    // --- LIST CONTAINER FUNCTIONS END --- //
+    // --- CREATABLE LOGIC BEGIN --- //
+    const onOptionCreateClick = ()=>{
+        const newOption = {
+            label: searchValue,
+            style: {
+                backgroundColor: randomColorForNewOption
+            },
+            isEditable: true,
+            ref: /*#__PURE__*/ (0, _react.createRef)()
+        };
+        var _onOptionCreate;
+        ((_onOptionCreate = onOptionCreate === null || onOptionCreate === void 0 ? void 0 : onOptionCreate(newOption)) !== null && _onOptionCreate !== void 0 ? _onOptionCreate : new Promise((r)=>r(1))).then((result)=>{
+            const tempId = Math.random().toString(16).slice(2);
+            var _result_id;
+            newOption.value = (_result_id = result === null || result === void 0 ? void 0 : result.id) !== null && _result_id !== void 0 ? _result_id : tempId;
+            setOptions((state)=>[
+                    ...state,
+                    newOption
+                ]);
+            setSearchValue('');
+            onChangeHandler(newOption);
+        });
+    };
+    const onOptionEditClick = (e, item)=>{
+        e === null || e === void 0 ? void 0 : e.preventDefault();
+        e === null || e === void 0 ? void 0 : e.stopPropagation();
+        setEditingOption((editingOption === null || editingOption === void 0 ? void 0 : editingOption.value) === (item === null || item === void 0 ? void 0 : item.value) ? null : item);
+    };
+    const onOptionDeleteClick = ()=>{
+        var _onOptionDelete;
+        ((_onOptionDelete = onOptionDelete === null || onOptionDelete === void 0 ? void 0 : onOptionDelete(editingOption)) !== null && _onOptionDelete !== void 0 ? _onOptionDelete : new Promise((r)=>r(1))).then(()=>{
+            if (editingOption === null || editingOption === void 0 ? void 0 : editingOption.value) deleteChosen(editingOption === null || editingOption === void 0 ? void 0 : editingOption.value);
+            setOptions((options)=>options.filter(({ value })=>value !== (editingOption === null || editingOption === void 0 ? void 0 : editingOption.value)));
+            setEditingOption(null);
+        });
+    };
+    const saveEditingOption = ()=>{
+        if (!(editingOption === null || editingOption === void 0 ? void 0 : editingOption.isChanged) || isEditingOptionError) {
+            setEditingOption(null);
+            return false;
+        }
+        onOptionEdit === null || onOptionEdit === void 0 ? void 0 : onOptionEdit(editingOption);
+        setOptions((options)=>options.map((option)=>{
+                if (editingOption && option.value === (editingOption === null || editingOption === void 0 ? void 0 : editingOption.value)) {
+                    const tmp = {
+                        ...editingOption
+                    };
+                    setEditingOption(null);
+                    return tmp;
+                }
+                return option;
+            }));
+    };
+    const setEditOptionModalStyles = ()=>{
+        var _editingOption_ref, _dropdownListWrapperRef_current;
+        if (!editingOption || !(editOptionModalRef === null || editOptionModalRef === void 0 ? void 0 : editOptionModalRef.current)) return null;
+        const modalSize = 200;
+        const { scrollX, scrollY } = window;
+        const positionClasses = {
+            left: 'modal-left',
+            right: 'modal-right',
+            top: 'modal-top',
+            bottom: 'modal-bottom'
+        };
+        const windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+        const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
+        const el = editingOption === null || editingOption === void 0 ? void 0 : (_editingOption_ref = editingOption.ref) === null || _editingOption_ref === void 0 ? void 0 : _editingOption_ref.current;
+        var _el_getBoundingClientRect;
+        const { x = 0, y = 0, width = 0, height = 0 } = (_el_getBoundingClientRect = el === null || el === void 0 ? void 0 : el.getBoundingClientRect()) !== null && _el_getBoundingClientRect !== void 0 ? _el_getBoundingClientRect : {};
+        const containerPosition = dropdownListWrapperRef === null || dropdownListWrapperRef === void 0 ? void 0 : (_dropdownListWrapperRef_current = dropdownListWrapperRef.current) === null || _dropdownListWrapperRef_current === void 0 ? void 0 : _dropdownListWrapperRef_current.getBoundingClientRect();
+        var _containerPosition_x, _containerPosition_width;
+        const distanceToRight = windowWidth - ((_containerPosition_x = containerPosition === null || containerPosition === void 0 ? void 0 : containerPosition.x) !== null && _containerPosition_x !== void 0 ? _containerPosition_x : 0) - ((_containerPosition_width = containerPosition === null || containerPosition === void 0 ? void 0 : containerPosition.width) !== null && _containerPosition_width !== void 0 ? _containerPosition_width : 0);
+        const distanceToBottom = windowHeight - y - scrollY - height;
+        Object.values(positionClasses).map((className)=>{
+            if (editOptionModalRef.current) editOptionModalRef.current.classList.remove(className);
+            return className;
+        });
+        var _positionClasses_;
+        editOptionModalRef.current.classList.add((_positionClasses_ = positionClasses === null || positionClasses === void 0 ? void 0 : positionClasses[distanceToRight < modalSize ? 'left' : 'right']) !== null && _positionClasses_ !== void 0 ? _positionClasses_ : '');
+        var _positionClasses_1;
+        editOptionModalRef.current.classList.add((_positionClasses_1 = positionClasses === null || positionClasses === void 0 ? void 0 : positionClasses[distanceToBottom < modalSize ? 'top' : 'bottom']) !== null && _positionClasses_1 !== void 0 ? _positionClasses_1 : '');
+        const xTranslate = distanceToRight < modalSize ? 'calc(-100% + 7px)' : '-35px';
+        const yTranslate = distanceToBottom < modalSize ? `calc(-100% - ${height + 10}px)` : '10px';
+        editOptionModalRef.current.style.left = `${x + scrollX + width}px`;
+        editOptionModalRef.current.style.top = `${y + scrollY + height}px`;
+        editOptionModalRef.current.style.transform = `translate(${xTranslate}, ${yTranslate})`;
+    };
+    const renderEditOptionModal = ()=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            ref: editOptionModalRef,
+            className: (0, _classnames.default)(`${RC}__edit-option-modal`),
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    className: (0, _classnames.default)(`${RC}__edit-option-modal-section`),
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.default, {
+                            // TODO: REMOVE AFTER MIGRATE INPUT TO TYPESCRIPT
+                            // @ts-ignore
+                            value: editingOption.label,
+                            onChange: (v)=>setEditingOption((state)=>({
+                                        ...state,
+                                        label: v
+                                    })),
+                            error: isEditingOptionError,
+                            onKeyDown: (keyCode)=>{
+                                if (keyCode === 13) saveEditingOption();
+                            },
+                            symbolsLimit: "50",
+                            ref: editingOptionInputRef
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                            variant: "link",
+                            icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.Trash2, {}),
+                            label: "Delete",
+                            onClick: onOptionDeleteClick
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: (0, _classnames.default)(`${RC}__edit-option-modal-section-divider`)
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    className: (0, _classnames.default)(`${RC}__edit-option-modal-section`),
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("h3", {
+                            children: "Colors"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            className: (0, _classnames.default)(`${RC}__edit-option-modal-section-colors`),
+                            children: COLORS.map((color)=>{
+                                var _editingOption_style;
+                                return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                    className: "color-block",
+                                    style: {
+                                        backgroundColor: color
+                                    },
+                                    onClick: ()=>setEditingOption((state)=>({
+                                                ...state,
+                                                style: {
+                                                    ...state ? state.style : {},
+                                                    backgroundColor: color
+                                                }
+                                            })),
+                                    children: (editingOption === null || editingOption === void 0 ? void 0 : (_editingOption_style = editingOption.style) === null || _editingOption_style === void 0 ? void 0 : _editingOption_style.backgroundColor) === color ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.Check, {}) : null
+                                }, color);
+                            })
+                        })
+                    ]
+                })
+            ]
+        }, `editOptionModal${editingOption === null || editingOption === void 0 ? void 0 : editingOption.value}`);
+    };
+    // --- CREATABLE LOGIC END --- //
+    // --- GENERAL FUNCTIONS BEGIN --- //
+    const handleClickOutside = (e)=>{
+        var _getListContainer, _editOptionModalRef_current;
+        const { target } = e;
+        if (isOpen && !((_getListContainer = getListContainer()) === null || _getListContainer === void 0 ? void 0 : _getListContainer.contains(target)) && !editOptionModalRef.current) {
+            setIsOpen(false);
+            onDropdownListClose === null || onDropdownListClose === void 0 ? void 0 : onDropdownListClose(e);
+        } else if (editOptionModalRef.current && !((_editOptionModalRef_current = editOptionModalRef.current) === null || _editOptionModalRef_current === void 0 ? void 0 : _editOptionModalRef_current.contains(target))) {
+            var _document_getElementById_contains, _document_getElementById, _document_getElementById1, _document;
+            if (!((_document = document) === null || _document === void 0 ? void 0 : (_document_getElementById1 = _document.getElementById) === null || _document_getElementById1 === void 0 ? void 0 : (_document_getElementById = _document_getElementById1.call(_document, `editTrigger${editingOption === null || editingOption === void 0 ? void 0 : editingOption.value}`)) === null || _document_getElementById === void 0 ? void 0 : (_document_getElementById_contains = _document_getElementById.contains) === null || _document_getElementById_contains === void 0 ? void 0 : _document_getElementById_contains.call(_document_getElementById, target))) {
+                saveEditingOption();
+            }
+        }
+    };
+    const closeList = (e)=>{
+        var _inputRef_current;
+        handleClickOutside(e);
+        if (!e.target.isEqualNode(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current)) inputRef === null || inputRef === void 0 ? void 0 : (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.blur();
+    };
+    const isTargetInParent = (target)=>{
+        var _target_parentNode, _target_parentNode1, _target_className_indexOf, _target_className, _target_className_indexOf1, _target_className1;
+        if ((target === null || target === void 0 ? void 0 : target.tagName) === 'svg' && (target === null || target === void 0 ? void 0 : (_target_parentNode = target.parentNode) === null || _target_parentNode === void 0 ? void 0 : _target_parentNode.className) === 'tag__button' || (target === null || target === void 0 ? void 0 : target.tagName) === 'line') {
+            return false;
+        }
+        if ((target === null || target === void 0 ? void 0 : target.tagName) === 'svg' && (target === null || target === void 0 ? void 0 : (_target_parentNode1 = target.parentNode) === null || _target_parentNode1 === void 0 ? void 0 : _target_parentNode1.className) !== 'tag__button' || (target === null || target === void 0 ? void 0 : (_target_className = target.className) === null || _target_className === void 0 ? void 0 : (_target_className_indexOf = _target_className.indexOf) === null || _target_className_indexOf === void 0 ? void 0 : _target_className_indexOf.call(_target_className, 'tag__label')) !== -1 || (target === null || target === void 0 ? void 0 : (_target_className1 = target.className) === null || _target_className1 === void 0 ? void 0 : (_target_className_indexOf1 = _target_className1.indexOf) === null || _target_className_indexOf1 === void 0 ? void 0 : _target_className_indexOf1.call(_target_className1, 'tag-list_wrapper')) !== -1 || (target === null || target === void 0 ? void 0 : target.className.indexOf(`${RC}__trigger`)) !== -1 || (target === null || target === void 0 ? void 0 : target.className) === 'tags-dropdown__arrow') {
+            return true;
+        }
+        return false;
+    };
+    const isItemMatchesSearch = (item)=>{
+        if (item.isHiddenInList) return false;
+        const title = item.title || item.label;
+        return searchValue.length ? !!(title === null || title === void 0 ? void 0 : title.toLowerCase().includes((searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase()) || '')) : true;
+    };
+    // --- GENERAL FUNCTIONS END --- //
+    const prepareOptions = (options)=>{
+        return options === null || options === void 0 ? void 0 : options.map((option)=>{
+            var _option_list;
+            return (option === null || option === void 0 ? void 0 : option.groupName) ? (_option_list = option === null || option === void 0 ? void 0 : option.list) !== null && _option_list !== void 0 ? _option_list : [] : option;
+        }).flat();
+    };
+    const getFilteredOptions = (options)=>options === null || options === void 0 ? void 0 : options.reduce((result, option)=>{
+            if (option.groupName) {
+                var _option_list;
+                const filteredGroupItems = option === null || option === void 0 ? void 0 : (_option_list = option.list) === null || _option_list === void 0 ? void 0 : _option_list.filter((item)=>isItemMatchesSearch(item));
+                if (filteredGroupItems === null || filteredGroupItems === void 0 ? void 0 : filteredGroupItems.length) {
+                    result.push({
+                        ...option,
+                        list: filteredGroupItems
+                    });
+                }
+            } else if (isItemMatchesSearch(option)) {
+                result.push(option);
+            }
+            return result;
+        }, []);
+    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) {
+                var _item_list;
+                result += (item === null || item === void 0 ? void 0 : (_item_list = item.list) === null || _item_list === void 0 ? void 0 : _item_list.length) || 0;
+            } else {
+                ++result;
+            }
+            return result;
+        }, 0);
+    }, [
+        options
+    ]);
+    const onChangeHandler = (item)=>{
+        if (item === null || item === void 0 ? void 0 : item.isFreezed) return false;
+        if ((item === null || item === void 0 ? void 0 : item.closeOnOptionSelect) !== undefined) {
+            if (item.closeOnOptionSelect) setIsOpen(false);
+        } else if (isMobile ? closeOnSelectMobile : closeOnSelect) {
+            setIsOpen(false);
+        }
+        setSearchValueInterceptor('');
+        if (item.value && chosenOptions.includes(item.value)) {
+            deleteChosen(item.value);
+            return null;
+        }
+        if (item.value && isUseLocalOptionsStore) {
+            setLocalOptionsStore((options)=>{
+                if (item.value) {
+                    return {
+                        ...options,
+                        [item.value]: item === null || item === void 0 ? void 0 : item.label
+                    };
+                } else {
+                    return options;
+                }
+            });
+        }
+        if (item.value) onChange === null || onChange === void 0 ? void 0 : onChange([
+            ...chosenOptions,
+            item.value
+        ], 'chosenOptions');
+        return null;
+    };
+    const onSearchHandler = (name)=>{
+        let inputValue = name;
+        if (!isNotValidateASCII) inputValue = (0, _fieldValueFormatters.formatToOnlyASCIICodeText)(inputValue);
+        setSearchValueInterceptor(inputValue);
+    };
+    const onWrapperClick = (e)=>{
+        if (e.target === (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current)) {
+            e.stopPropagation();
+            e.preventDefault();
+            setIsOpen(false);
+        }
+    };
+    const selectAllItems = ()=>{
+        var _prepareOptions;
+        const preparedOptions = (_prepareOptions = prepareOptions(options)) === null || _prepareOptions === void 0 ? void 0 : _prepareOptions.filter(({ isFreezed, value })=>value && !isFreezed && !(chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.includes(value === null || value === void 0 ? void 0 : value.toString())) && value !== 'open_modal');
+        if (isUseLocalOptionsStore) {
+            setLocalOptionsStore((options)=>preparedOptions === null || preparedOptions === void 0 ? void 0 : preparedOptions.reduce((result, { value, label })=>{
+                    if (value) result[value] = label;
+                    return result;
+                }, options));
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange([
+            ...chosenOptions,
+            ...(preparedOptions === null || preparedOptions === void 0 ? void 0 : preparedOptions.map(({ value })=>value !== null && value !== void 0 ? value : '')) || []
+        ], 'chosenOptions');
+        if (isMobile ? closeOnSelectAllMobile : closeOnSelectAll) setIsOpen(false);
+    };
+    const unselectAllItems = ()=>{
+        if (isUseLocalOptionsStore) setLocalOptionsStore({});
+        onChange === null || onChange === void 0 ? void 0 : onChange(chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.filter((item)=>{
+            var _prepareOptions_find, _prepareOptions;
+            return (_prepareOptions = prepareOptions(options)) === null || _prepareOptions === void 0 ? void 0 : (_prepareOptions_find = _prepareOptions.find(({ value })=>value === item)) === null || _prepareOptions_find === void 0 ? void 0 : _prepareOptions_find.isFreezed;
+        }), 'chosenOptions');
+        if (isMobile ? closeOnRemoveAllMobile : closeOnRemoveAll) setIsOpen(false);
+    };
+    const doScrollCallback = (0, _react.useCallback)((e)=>{
+        if (doLiveSearchRequest && typeof doLiveSearchRequest === 'function') {
+            if (+Math.round(e.target.clientHeight + e.target.scrollTop) === +e.target.scrollHeight) {
+                doLiveSearchRequest(searchValueRef.current, true);
+            }
+        }
+    }, [
+        options
+    ]);
+    // --- RENDER FUNCTIONS BEGIN --- //
+    const getMarkupForElement = (item)=>{
+        const { description } = item;
+        const title = item.title || item.label;
+        const hightlightSearchValue = (title)=>{
+            var _title_toLowerCase;
+            const index = title === null || title === void 0 ? void 0 : (_title_toLowerCase = title.toLowerCase()) === null || _title_toLowerCase === void 0 ? void 0 : _title_toLowerCase.indexOf(searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase());
+            if (index === -1) return title;
+            return /*#__PURE__*/ (0, _jsxruntime.jsxs)("pre", {
+                className: "inherit-styles",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                        children: title.substring(0, index)
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                        className: "search-match bg--yellow",
+                        children: title.substring(index, index + (searchValue === null || searchValue === void 0 ? void 0 : searchValue.length))
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                        children: title.substring(index + (searchValue === null || searchValue === void 0 ? void 0 : searchValue.length))
+                    })
+                ]
+            });
+        };
+        var _item_customMobileIcon;
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("button", {
+            type: "button",
+            ref: item === null || item === void 0 ? void 0 : item.ref,
+            onClick: (e)=>{
+                e.preventDefault();
+                e.stopPropagation();
+                onChangeHandler(item);
+            },
+            className: (0, _classnames.default)(`${RC}__list-item`, {
+                [`${RC}__list-item_active`]: chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.some((value)=>value === item.value)
+            }, {
+                [`${RC}__list-item_disabled`]: item.disabled
+            }, {
+                [`${RC}__list-item_freezed`]: item === null || item === void 0 ? void 0 : item.isFreezed
+            }, {
+                [`${RC}__list-item--editing`]: (item === null || item === void 0 ? void 0 : item.value) === (editingOption === null || editingOption === void 0 ? void 0 : editingOption.value)
+            }, item.className),
+            children: [
+                !isMobile && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                    className: (0, _classnames.default)(`${RC}__active-icon`, {
+                        [`${RC}__active-icon_active`]: chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.some((value)=>value === item.value)
+                    }),
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.Check, {
+                        width: 16,
+                        height: 16,
+                        className: "color--text"
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    className: (0, _classnames.default)(`${RC}__list-item-body`),
+                    children: [
+                        renderOptionsAsTags ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tag.default, {
+                            className: (0, _classnames.default)(`${RC}__list-item-title`, item === null || item === void 0 ? void 0 : item.labelClassName, {
+                                'tag_with-btn': !(item === null || item === void 0 ? void 0 : item.isFreezed)
+                            }),
+                            label: title ? hightlightSearchValue(title) : '',
+                            style: item === null || item === void 0 ? void 0 : item.style,
+                            isNoDismiss: true
+                        }, item === null || item === void 0 ? void 0 : item.value) : /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                            className: (0, _classnames.default)(`${RC}__list-item-title`, item.labelClassName),
+                            children: title ? hightlightSearchValue(title) : ''
+                        }),
+                        description && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                            className: (0, _classnames.default)(`${RC}__list-item-description`),
+                            children: description
+                        })
+                    ]
+                }),
+                !isMobile && (item === null || item === void 0 ? void 0 : item.isEditable) && onOptionEdit && onOptionDelete && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    id: `editTrigger${item === null || item === void 0 ? void 0 : item.value}`,
+                    className: (0, _classnames.default)(`${RC}__list-item-edit-trigger`),
+                    onClick: (e)=>onOptionEditClick(e, item),
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.MoreHorizontal, {})
+                }),
+                isMobile ? (_item_customMobileIcon = item === null || item === void 0 ? void 0 : item.customMobileIcon) !== null && _item_customMobileIcon !== void 0 ? _item_customMobileIcon : /*#__PURE__*/ (0, _jsxruntime.jsx)(_CheckboxInput.default, {
+                    value: chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.some((value)=>value === item.value),
+                    onChange: ()=>{
+                        onChangeHandler(item);
+                    },
+                    label: "",
+                    id: ""
+                }) : ''
+            ]
+        }, `${RC}__list-item-${item.id || item.value}`);
+    };
+    const getListMarkUp = ()=>{
+        var _filteredOptions_filter, _filteredOptions_filter1;
+        const filteredOptions = getFilteredOptions(options);
+        const arrToPrint = [];
+        for (const option of filteredOptions){
+            if (option.groupName) {
+                var _option_list, _Date_now, _option_groupName_toString, _option_groupName;
+                arrToPrint.push(/*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    className: (0, _classnames.default)(`${RC}-group`, option.className),
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                            className: `${RC}-group__name`,
+                            children: option.groupName
+                        }),
+                        (_option_list = option.list) === null || _option_list === void 0 ? void 0 : _option_list.map((item)=>getMarkupForElement(item))
+                    ]
+                }, (_option_groupName = option.groupName) === null || _option_groupName === void 0 ? void 0 : (_option_groupName_toString = _option_groupName.toString()) === null || _option_groupName_toString === void 0 ? void 0 : _option_groupName_toString.replace(/ /g, '_').concat((_Date_now = Date.now()) === null || _Date_now === void 0 ? void 0 : _Date_now.toString())));
+            } else {
+                arrToPrint.push(getMarkupForElement(option));
+            }
+        }
+        var _document_getElementById;
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            className: (0, _classnames.default)(`${RC}__container-wrapper`),
+            ref: wrapperRef,
+            onClick: isMobile ? onWrapperClick : ()=>{},
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                ref: dropdownListWrapperRef,
+                className: (0, _classnames.default)(`${RC}__selector-wrapper`, {
+                    [`${RC}__selector-wrapper--fixed-height`]: isFixedMaxHeight && isMobile
+                }),
+                children: [
+                    headerContent || isMobile ? /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        className: (0, _classnames.default)(`${RC}__header`, {
+                            [`${RC}__header-with-shadow`]: isScrollableList && isMobile,
+                            [`${RC}__header-with-shadow-hidden`]: scrollTop === 0
+                        }),
+                        children: [
+                            isMobile && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                                        className: (0, _classnames.default)(`${RC}__header-row`),
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                                className: (0, _classnames.default)(`${RC}__label`),
+                                                children: label
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                                className: (0, _classnames.default)(`${RC}__close-icon`),
+                                                onClick: (e)=>{
+                                                    e.stopPropagation();
+                                                    setIsOpen(false);
+                                                },
+                                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.X, {
+                                                    onClick: (e)=>{
+                                                        e.stopPropagation();
+                                                        setIsOpen(false);
+                                                    }
+                                                })
+                                            })
+                                        ]
+                                    }),
+                                    getTotalOptions() > (minItemsForShowMobileSearch || MIN_ITEMS_FOR_SHOW_MOBILE_SEARCH) && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                        className: (0, _classnames.default)(`${RC}__header-row`),
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.default, {
+                                            className: `${RC}__input`,
+                                            value: searchValue,
+                                            onChange: (v)=>setSearchValueInterceptor(v),
+                                            placeholder: mobileSearchPlaceholder || 'Search',
+                                            // TODO: REMOVE AFTER MIGRATE INPUT TO TYPESCRIPT
+                                            // @ts-ignore
+                                            withDelete: true,
+                                            onMouseDown: ()=>{
+                                                if (!isOpen) {
+                                                    setIsOpen(true);
+                                                }
+                                            },
+                                            ...attributesOfNativeInput
+                                        })
+                                    })
+                                ]
+                            }),
+                            headerContent && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                className: (0, _classnames.default)(`${RC}__header-row`),
+                                children: headerContent
+                            })
+                        ]
+                    }) : null,
+                    withSearchInputInList && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: (0, _classnames.default)(`${RC}__input-list-wrapper`),
+                        children: renderSearchInput()
+                    }),
+                    withCreateLogic && onOptionCreate && searchValue && filteredOptions.length && singleLevelOptions.every(({ label })=>(label === null || label === void 0 ? void 0 : label.toLowerCase()) !== (searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase())) ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: (0, _classnames.default)(`${RC}__creatable-helper`),
+                        children: "Select an option or create one"
+                    }) : null,
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        ref: dropdownListRef,
+                        className: `${RC}__list ${headerContent || isMobile ? `${RC}__list--with-header` : ''} ${footerContent ? `${RC}__list--with-footer` : ''}`,
+                        children: [
+                            arrToPrint,
+                            ((_filteredOptions_filter = filteredOptions.filter(({ value })=>value !== 'open_modal')) === null || _filteredOptions_filter === void 0 ? void 0 : _filteredOptions_filter.length) === 0 && (!withCreateLogic || !searchValue) ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                className: `${RC}__no-options`,
+                                children: noOptionsText
+                            }) : null
+                        ]
+                    }),
+                    (footerContent || isMobile) && ((_filteredOptions_filter1 = filteredOptions.filter(({ value })=>value !== 'open_modal')) === null || _filteredOptions_filter1 === void 0 ? void 0 : _filteredOptions_filter1.length) > 0 ? /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        className: (0, _classnames.default)(`${RC}__footer`, {
+                            [`${RC}__footer-with-shadow`]: isMobile && isScrollableList,
+                            [`${RC}__footer-with-shadow-hidden`]: scrollTop === scrollHeight
+                        }),
+                        children: [
+                            footerContent,
+                            isMobile && /*#__PURE__*/ (0, _jsxruntime.jsxs)("button", {
+                                type: "button",
+                                onClick: ()=>setIsOpen(false),
+                                children: [
+                                    "Apply",
+                                    (chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.length) ? `(${chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.length})` : ''
+                                ]
+                            })
+                        ]
+                    }) : null,
+                    editingOption && /*#__PURE__*/ (0, _reactdom.createPortal)(renderEditOptionModal(), (_document_getElementById = document.getElementById('app')) !== null && _document_getElementById !== void 0 ? _document_getElementById : document.body),
+                    withCreateLogic && onOptionCreate && searchValue && singleLevelOptions.every(({ label })=>(label === null || label === void 0 ? void 0 : label.toLowerCase()) !== (searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase())) && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        className: (0, _classnames.default)(`${RC}__create-option`),
+                        onClick: onOptionCreateClick,
+                        children: [
+                            "Create",
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tag.default, {
+                                label: searchValue,
+                                style: {
+                                    backgroundColor: randomColorForNewOption
+                                },
+                                isNoDismiss: true
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    };
+    const renderSearchInput = ()=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.default, {
+            ref: inputRef,
+            // TODO: REMOVE AFTER MIGRATE INPUT TO TYPESCRIPT
+            // @ts-ignore
+            className: (0, _classnames.default)(`${RC}__input`, {
+                [`${RC}__input--in-list`]: withSearchInputInList
+            }),
+            value: searchValue,
+            onChange: onSearchHandler,
+            placeholder: placeholder || 'Select from list',
+            attributesOfNativeInput: {
+                ...attributesOfNativeInput,
+                onKeyDown: (e)=>{
+                    if (e.keyCode === 13 && withCreateLogic && onOptionCreate && singleLevelOptions.every(({ label })=>(label === null || label === void 0 ? void 0 : label.toLowerCase()) !== (searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase()))) {
+                        onOptionCreateClick();
+                    }
+                    onKeyPress === null || onKeyPress === void 0 ? void 0 : onKeyPress(e, searchValue);
+                }
+            },
+            ...withCreateLogic ? {
+                symbolsLimit: 50
+            } : {}
+        });
+    };
+    const renderDropdownTrigger = (0, _react.useCallback)(()=>{
+        const renderDefaultDropdownTrigger = ()=>{
+            return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: (0, _classnames.default)(`${RC}__trigger`, {
+                    'tags-dropdown__error': error,
+                    [`${RC}__trigger--with-actions`]: withActions
+                }),
+                onClick: ({ target })=>{
+                    if ((target === null || target === void 0 ? void 0 : target.tagName) === 'INPUT') {
+                        setIsOpen(true);
+                    } else if (isTargetInParent(target)) {
+                        setIsOpen((isOpen)=>!isOpen);
+                    }
+                },
+                children: [
+                    noTagsWrap ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_TagList.default, {
+                        // TODO: REMOVE AFTER MIGRATE TAGLIST TO TYPESCRIPT
+                        // @ts-ignore
+                        items: chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.map((value, i)=>{
+                            const tag = singleLevelOptions === null || singleLevelOptions === void 0 ? void 0 : singleLevelOptions.find((el)=>el.value === value);
+                            const label = isValuesInTags ? tag === null || tag === void 0 ? void 0 : tag.value : (tag === null || tag === void 0 ? void 0 : tag.label) || (tag === null || tag === void 0 ? void 0 : tag.name) || (tag === null || tag === void 0 ? void 0 : tag.title);
+                            return {
+                                value,
+                                label,
+                                id: i,
+                                className: tag === null || tag === void 0 ? void 0 : tag.labelClassName,
+                                style: tag === null || tag === void 0 ? void 0 : tag.style
+                            };
+                        }),
+                        disableShowMore: true
+                    }) : chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.map((value)=>{
+                        const tag = singleLevelOptions === null || singleLevelOptions === void 0 ? void 0 : singleLevelOptions.find((el)=>el.value === value);
+                        const label = isValuesInTags ? tag === null || tag === void 0 ? void 0 : tag.value : (tag === null || tag === void 0 ? void 0 : tag.label) || (tag === null || tag === void 0 ? void 0 : tag.name) || (tag === null || tag === void 0 ? void 0 : tag.title);
+                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tag.default, {
+                            className: (0, _classnames.default)(tagClassname, tag === null || tag === void 0 ? void 0 : tag.labelClassName, {
+                                'tag_with-btn': !(tag === null || tag === void 0 ? void 0 : tag.isFreezed)
+                            }),
+                            label: label,
+                            style: tag === null || tag === void 0 ? void 0 : tag.style,
+                            removeItem: (tag === null || tag === void 0 ? void 0 : tag.isFreezed) ? undefined : ()=>deleteChosen(value),
+                            isNoDismiss: false
+                        }, value);
+                    }),
+                    chosenOptions.length === 0 || !noTagsWrap ? renderSearchInput() : '',
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                        className: (0, _classnames.default)(`${RC}__arrow`, {
+                            [`${RC}__arrow_active`]: isOpen
+                        }),
+                        children: isMobile ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.Code, {
+                            className: "mobile-icon"
+                        }) : isOpen ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.ChevronUp, {
+                            className: "color--text"
+                        }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.ChevronDown, {
+                            className: "color--text"
+                        })
+                    })
+                ]
+            });
+        };
+        var _renderCustomTrigger;
+        return (_renderCustomTrigger = renderCustomTrigger === null || renderCustomTrigger === void 0 ? void 0 : renderCustomTrigger({
+            chosenOptions,
+            singleLevelOptions,
+            deleteChosen,
+            inputRef,
+            onSearchHandler,
+            isOpen,
+            setIsOpen
+        })) !== null && _renderCustomTrigger !== void 0 ? _renderCustomTrigger : renderDefaultDropdownTrigger();
+    }, [
+        chosenOptions,
+        singleLevelOptions,
+        inputRef,
+        isOpen
+    ]);
+    // --- RENDER FUNCTIONS END --- //
+    (0, _react.useLayoutEffect)(()=>{
+        initListContainer();
+        if (isDefaultOpened && !isMobileProp) setIsOpen(true);
+        return ()=>{
+            var _getListContainer, _getListContainerWrapper;
+            (_getListContainer = getListContainer()) === null || _getListContainer === void 0 ? void 0 : _getListContainer.remove();
+            (_getListContainerWrapper = getListContainerWrapper()) === null || _getListContainerWrapper === void 0 ? void 0 : _getListContainerWrapper.remove();
+        };
+    }, []);
+    (0, _react.useLayoutEffect)(()=>{
+        var _getListContainer;
+        if (!isMobile) {
+            window.addEventListener('mousewheel', closeList);
+            window.addEventListener('wheel', closeList);
+            window.addEventListener('touchmove', closeList);
+            window.addEventListener('mouseup', handleClickOutside);
+        } else {
+            window.removeEventListener('mousewheel', closeList);
+            window.removeEventListener('wheel', closeList);
+            window.removeEventListener('touchmove', closeList);
+            window.removeEventListener('mouseup', handleClickOutside);
+        }
+        (_getListContainer = getListContainer()) === null || _getListContainer === void 0 ? void 0 : _getListContainer.addEventListener('click', closeList);
+        return ()=>{
+            var _getListContainer;
+            window.removeEventListener('mousewheel', closeList);
+            window.removeEventListener('mouseup', handleClickOutside);
+            window.removeEventListener('wheel', closeList);
+            window.removeEventListener('touchmove', closeList);
+            (_getListContainer = getListContainer()) === null || _getListContainer === void 0 ? void 0 : _getListContainer.removeEventListener('click', closeList);
+        };
+    }, [
+        getListContainer,
+        isMobile
+    ]);
+    (0, _react.useLayoutEffect)(()=>{
+        if (isOpen) {
+            setListContainerStyles();
+            setEditOptionModalStyles();
+        }
+    }, [
+        isOpen,
+        optionsProp,
+        chosenOptions,
+        searchValue,
+        isMobile,
+        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,
+        recalculateListContainerStylesTrigger
+    ]);
+    (0, _react.useEffect)(()=>{
+        if (isUseLocalOptionsStore && chosenOptions.length !== Object.keys(localOptionsStore).length) {
+            options.map((option)=>{
+                var _option_value;
+                if ((option === null || option === void 0 ? void 0 : option.value) && !(localOptionsStore === null || localOptionsStore === void 0 ? void 0 : localOptionsStore[option === null || option === void 0 ? void 0 : (_option_value = option.value) === null || _option_value === void 0 ? void 0 : _option_value.toString()])) {
+                    setLocalOptionsStore((options)=>{
+                        if (option.value) {
+                            var _option_value;
+                            return {
+                                ...options,
+                                [option === null || option === void 0 ? void 0 : (_option_value = option.value) === null || _option_value === void 0 ? void 0 : _option_value.toString()]: option === null || option === void 0 ? void 0 : option.label
+                            };
+                        } else {
+                            return options;
+                        }
+                    });
+                }
+                return option;
+            });
+        }
+    }, [
+        chosenOptions,
+        isUseLocalOptionsStore
+    ]);
+    (0, _react.useEffect)(()=>{
+        var _selectAllButtonRef_current, _unselectAllButtonRef_current;
+        const windowScrollEventHandler = ()=>{
+            setWindowScrollTop(window.scrollY);
+        };
+        const fn = isOpen ? 'addEventListener' : 'removeEventListener';
+        selectAllButtonRef === null || selectAllButtonRef === void 0 ? void 0 : (_selectAllButtonRef_current = selectAllButtonRef.current) === null || _selectAllButtonRef_current === void 0 ? void 0 : _selectAllButtonRef_current[fn]('click', selectAllItems, true);
+        unselectAllButtonRef === null || unselectAllButtonRef === void 0 ? void 0 : (_unselectAllButtonRef_current = unselectAllButtonRef.current) === null || _unselectAllButtonRef_current === void 0 ? void 0 : _unselectAllButtonRef_current[fn]('click', unselectAllItems, true);
+        if (isOpen) {
+            var _getListContainer;
+            if (!isMobile || !withMobileLogic) window.removeEventListener('scroll', windowScrollEventHandler);
+            if (customTriggerRef === null || customTriggerRef === void 0 ? void 0 : customTriggerRef.current) {
+                customTriggerRef.current.style.pointerEvents = 'none';
+            }
+            (_getListContainer = getListContainer()) === null || _getListContainer === void 0 ? void 0 : _getListContainer.classList.add('tags-dropdown__container--opened');
+            if (!isMobile) {
+                var _inputRef_current_focus, _inputRef_current;
+                inputRef === null || inputRef === void 0 ? void 0 : (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : (_inputRef_current_focus = _inputRef_current.focus) === null || _inputRef_current_focus === void 0 ? void 0 : _inputRef_current_focus.call(_inputRef_current);
+            } else {
+                var _inputRef_current_blur, _inputRef_current1;
+                inputRef === null || inputRef === void 0 ? void 0 : (_inputRef_current1 = inputRef.current) === null || _inputRef_current1 === void 0 ? void 0 : (_inputRef_current_blur = _inputRef_current1.blur) === null || _inputRef_current_blur === void 0 ? void 0 : _inputRef_current_blur.call(_inputRef_current1);
+            }
+        } else {
+            var _getListContainer1;
+            if (!isMobile || !withMobileLogic) window.addEventListener('scroll', windowScrollEventHandler);
+            if (customTriggerRef === null || customTriggerRef === void 0 ? void 0 : customTriggerRef.current) {
+                customTriggerRef.current.style.pointerEvents = 'auto';
+            }
+            (_getListContainer1 = getListContainer()) === null || _getListContainer1 === void 0 ? void 0 : _getListContainer1.classList.remove('tags-dropdown__container--opened');
+            if (withSearchInputInList) setSearchValueInterceptor('');
+            setListPos(null);
+            setSearchValue('');
+        }
+    }, [
+        isOpen
+    ]);
+    (0, _react.useEffect)(()=>{
+        const setScrollTopValue = (e)=>{
+            var _e_target_scrollTop;
+            setScrollTop(Number.parseInt((_e_target_scrollTop = e.target.scrollTop) === null || _e_target_scrollTop === void 0 ? void 0 : _e_target_scrollTop.toString(), 10));
+        };
+        const preventWindowScrolling = (e)=>{
+            e.preventDefault();
+            window.scrollTo({
+                top: windowScrollTop
+            });
+        };
+        if (isOpen && isMobile && (dropdownListRef === null || dropdownListRef === void 0 ? void 0 : dropdownListRef.current)) {
+            var _dropdownListRef_current, _dropdownListRef_current1, _dropdownListRef_current2;
+            dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef_current = dropdownListRef.current) === null || _dropdownListRef_current === void 0 ? void 0 : _dropdownListRef_current.addEventListener('scroll', setScrollTopValue);
+            setIsScrollableList((dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef_current1 = dropdownListRef.current) === null || _dropdownListRef_current1 === void 0 ? void 0 : _dropdownListRef_current1.scrollHeight) > (dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef_current2 = dropdownListRef.current) === null || _dropdownListRef_current2 === void 0 ? void 0 : _dropdownListRef_current2.clientHeight));
+            if (isScrollableList === null) {
+                var _dropdownListRef_current3, _dropdownListRef_current4;
+                setIsFixedMaxHeight((dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef_current3 = dropdownListRef.current) === null || _dropdownListRef_current3 === void 0 ? void 0 : _dropdownListRef_current3.scrollHeight) > (dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef_current4 = dropdownListRef.current) === null || _dropdownListRef_current4 === void 0 ? void 0 : _dropdownListRef_current4.clientHeight));
+            }
+        }
+        if (isOpen && dropdownListRef && dropdownListRef.current) {
+            dropdownListRef.current.addEventListener('scroll', doScrollCallback);
+            if (!isMobile || !withMobileLogic) window.addEventListener('scroll', preventWindowScrolling);
+        }
+        return ()=>{
+            var _dropdownListRef_current, _dropdownListRef_current1;
+            if (!isMobile || !withMobileLogic) window.removeEventListener('scroll', preventWindowScrolling);
+            dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef_current = dropdownListRef.current) === null || _dropdownListRef_current === void 0 ? void 0 : _dropdownListRef_current.removeEventListener('scroll', doScrollCallback);
+            dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef_current1 = dropdownListRef.current) === null || _dropdownListRef_current1 === void 0 ? void 0 : _dropdownListRef_current1.removeEventListener('scroll', setScrollTopValue);
+        };
+    }, [
+        isOpen,
+        isMobile,
+        dropdownListRef === null || dropdownListRef === void 0 ? void 0 : dropdownListRef.current,
+        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
+    ]);
+    (0, _react.useEffect)(()=>{
+        if (dropdownListRef === null || dropdownListRef === void 0 ? void 0 : dropdownListRef.current) {
+            var _this, _dropdownListRef_current, _dropdownListRef_current1;
+            setScrollHeight(Number.parseInt((_this = (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)) === null || _this === void 0 ? void 0 : _this.toString(), 10));
+        }
+    }, [
+        scrollTop,
+        dropdownListRef === null || dropdownListRef === void 0 ? void 0 : dropdownListRef.current
+    ]);
+    (0, _react.useEffect)(()=>{
+        if (isSearchable && useLiveSearch && (debouncedSearchTerm || isValueDeleted || isOpen)) {
+            doLiveSearchRequest === null || doLiveSearchRequest === void 0 ? void 0 : doLiveSearchRequest(debouncedSearchTerm);
+        }
+    }, [
+        isOpen,
+        debouncedSearchTerm,
+        isValueDeleted
+    ]);
+    (0, _react.useEffect)(()=>{
+        setOptions(optionsProp.map((option)=>({
+                ...option,
+                ref: /*#__PURE__*/ (0, _react.createRef)()
+            })));
+    }, [
+        optionsProp
+    ]);
+    (0, _react.useEffect)(()=>{
+        if (editingOption) {
+            var _editingOptionInputRef_current_focus, _editingOptionInputRef_current;
+            setEditOptionModalStyles();
+            editingOptionInputRef === null || editingOptionInputRef === void 0 ? void 0 : (_editingOptionInputRef_current = editingOptionInputRef.current) === null || _editingOptionInputRef_current === void 0 ? void 0 : (_editingOptionInputRef_current_focus = _editingOptionInputRef_current.focus) === null || _editingOptionInputRef_current_focus === void 0 ? void 0 : _editingOptionInputRef_current_focus.call(_editingOptionInputRef_current);
+        }
+    }, [
+        editingOption === null || editingOption === void 0 ? void 0 : editingOption.value
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        className: (0, _classnames.default)(RC, className, {
+            [`${RC}_disabled`]: disabled,
+            [`${RC}-mobile`]: isMobile,
+            [`${RC}--focused`]: isOpen && !(customTriggerRef === null || customTriggerRef === void 0 ? void 0 : customTriggerRef.current) && !isMobile,
+            [`${RC}--custom-trigger`]: Boolean(customTriggerRef === null || customTriggerRef === void 0 ? void 0 : customTriggerRef.current)
+        }),
+        ref: dropdownRef,
+        children: [
+            renderDropdownTrigger(),
+            withActions && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: (0, _classnames.default)(`${RC}__actions`),
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: (0, _classnames.default)(`${RC}__actions-item`),
+                        onClick: onActionConfirmClick,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.Check, {})
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: (0, _classnames.default)(`${RC}__actions-item`),
+                        onClick: onActionCancelClick,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.X, {})
+                    })
+                ]
+            }),
+            isOpen && renderListContainer()
+        ]
+    });
+};
+const _default = TagsDropdown;