intelicoreact 1.6.19 → 1.6.20

package/dist/Atomic/FormElements/DropdownLiveSearch/DropdownLiveSearch.js

@@ -1 +1,405 @@
-function e(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,l=Array(t);n<t;n++)l[n]=e[n];return l}function t(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function n(e){for(var n=1;n<arguments.length;n++){var l=null!=arguments[n]?arguments[n]:{},r=Object.keys(l);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(l).filter(function(e){return Object.getOwnPropertyDescriptor(l,e).enumerable}))),r.forEach(function(n){t(e,n,l[n])})}return e}function l(t,n){return function(e){if(Array.isArray(e))return e}(t)||function(e,t){var n,l,r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var o=[],u=!0,i=!1;try{for(r=r.call(e);!(u=(n=r.next()).done)&&(o.push(n.value),!t||o.length!==t);u=!0);}catch(e){i=!0,l=e}finally{try{u||null==r.return||r.return()}finally{if(i)throw l}}return o}}(t,n)||function(t,n){if(t){if("string"==typeof t)return e(t,n);var l=Object.prototype.toString.call(t).slice(8,-1);if("Object"===l&&t.constructor&&(l=t.constructor.name),"Map"===l||"Set"===l)return Array.from(l);if("Arguments"===l||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(l))return e(t,n)}}(t,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.")}()}Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return b}});var r=require("react/jsx-runtime"),o=p(require("classnames")),u=function(e,t){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 n=m(t);if(n&&n.has(e))return n.get(e);var l={__proto__:null},r=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var o in e)if("default"!==o&&Object.prototype.hasOwnProperty.call(e,o)){var u=r?Object.getOwnPropertyDescriptor(e,o):null;u&&(u.get||u.set)?Object.defineProperty(l,o,u):l[o]=e[o]}return l.default=e,n&&n.set(e,l),l}(require("react")),i=require("react-dom"),c=require("react-feather"),a=require("../../../Functions/fieldValueFormatters"),s=require("../../../Functions/useDebounce"),d=p(require("../../../Functions/useIsMobile/useIsMobile")),f=p(require("../../Layout/Spinner/Spinner")),v=p(require("../RadioInput/RadioInput"));function p(e){return e&&e.__esModule?e:{default:e}}function m(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(m=function(e){return e?n:t})(e)}require("./DropdownLiveSearch.scss");var h="dropdown-live-search",b=function(e){var p,m,b,g,_=e.label,w=e.value,y=e.error,x=e.disabled,j=e.onChange,E=e.placeholder,S=e.className,L=e.isSearchable,N=e.doRequest,C=e.isLoading,I=e.options,k=e.fieldKey,O=e.id,M=e.isListTop,q=e.attributesOfNativeInput,P=e.withMobileLogic,R=e.tabIndex,H=e.isNotValidateASCII,D=void 0!==H&&H,A=e.noOptionsText,T=void 0===A?"No options available":A,F=e.testId,B=void 0===F?"dropdown-live-search":F,W=l((0,u.useState)(O||k||Math.random().toString(16).slice(2)),1)[0],V=l((0,u.useState)(!1),2),$=V[0],U=V[1],z=l((0,u.useState)(!1),2),K=z[0],X=z[1],G=(0,d.default)().isMobile&&P&&window.screen.width<=768,J=(0,u.useMemo)(function(){var e,t;return null!=(t=null==I||null==(e=I.find(function(e){return e.value===w}))?void 0:e.label)?t:""},[w,I]),Q=l((0,u.useState)(""),2),Y=Q[0],Z=Q[1],ee=l((0,u.useState)(!1),2),et=ee[0],en=ee[1],el=(0,u.useRef)(null),er=(0,u.useRef)(null),eo=(0,u.useRef)(null),eu=(0,u.useRef)(null),ei=(0,u.useRef)(null),ec=(0,u.useRef)(null),ea=(0,u.useRef)(null),es=(0,u.useRef)(null),ed=l((0,u.useState)(!1),2),ef=ed[0],ev=ed[1],ep=l((0,u.useState)(null),2),em=ep[0],eh=ep[1],eb=l((0,u.useState)(!1),2),eg=eb[0],e_=eb[1],ew=l((0,u.useState)(0),2),ey=ew[0],ex=ew[1],ej=l((0,u.useState)(1),2),eE=ej[0],eS=ej[1],eL=(0,s.useDebounce)({searchValue:Y,delay:600}),eN=(0,u.useCallback)(function(e){if(N&&"function"==typeof N){var t,n=null==e?void 0:e.target;Math.round(n.clientHeight+n.scrollTop)===n.scrollHeight&&N(null!=(t=ea.current)?t:"",!0)}},[I]),eC=function(e){var t=!(arguments.length>1)||void 0===arguments[1]||arguments[1];t&&en(!0),Z(e),ea.current=e},eI=function(e){U(e),eC("",!1),e||en(!1)},ek=function(){var e,t;return null!=(t=null!=(e=document.querySelector("div#root"))?e:document.querySelector("div#app"))?t:document.querySelector("div#storybook-root")},eO=function(){return document.getElementById(null==W?void 0:W.toString())},eM=function(e){e.target===(null==es?void 0:es.current)&&(e.stopPropagation(),e.preventDefault(),eI(!1))},eq=function(e){$||(e.preventDefault(),e.stopPropagation())},eP=function(e){var t;!el.current||el.current.contains(e.target)||eO()&&(null==(t=eO())?void 0:t.contains(e.target))||eI(!1)},eR=function(e){[27].includes(e.keyCode)&&eI(!1)},eH=$?eP:function(){},eD=function(e){var t,n=null==(t=e.target)?void 0:t.value;D||(n=(0,a.formatToOnlyASCIICodeText)(n)),eC(n),!Y&&et||e.target.value?X(!1):(null==j||j(""),eC(""),X(!0))},eA=function(e,t){if(!L)return e;var n=et||G&&P?Y:J;return e=e.replace(/["&<>]/g,function(e){var t;return null!=(t=({'"':"&quot;","&":"&amp;","<":"&lt;",">":"&gt;"})[e])?t:""}),(n?null==e?void 0:e.replace(RegExp(null==n?void 0:n.replace(/[|\\{}()[\]^$+*?.]/g,"\\$&"),"i"),function(e){return'<span class="bg--yellow">'.concat(e,"</span>")}):e)+(t?'<span class="dropdown__list-item-postfix">'.concat(t,"</span>"):"")},eT=function(e,n,l){var u,i,a,s,d=e.label.toLowerCase(),f=null==Y?void 0:Y.toLowerCase();return(0,r.jsxs)("button",{type:"button","data-testid":"".concat(B,"-").concat(l||n,"-option"),onClick:function(){null==j||j(e.value),eI(!1)},className:(0,o.default)("".concat(h,"__list-item"),(t(s={},"".concat(h,"__list-item_active"),e.value===w),t(s,"".concat(h,"__list-item_disabled"),e.disabled),s),e.className),children:[!G||G&&!P&&(0,r.jsx)("span",{className:(0,o.default)("".concat(h,"__active-icon"),t({},"".concat(h,"__active-icon_active"),d===f)),children:(0,r.jsx)(c.Check,{})}),(0,r.jsx)("p",{title:e.label,className:e.labelClassName||"",dangerouslySetInnerHTML:{__html:eA(e.label,e.postfix)}}),G?null!=(a=null==e?void 0:e.customMobileIcon)?a:(0,r.jsx)(v.default,{value:e.value,checked:null==w?void 0:w.toString()}):""]},null==(i=e.value)||null==(u=i.toString())?void 0:u.replace(/ /g,"_"))},eF=function(){var e,l,u;return(0,r.jsx)("div",{className:(0,o.default)("".concat(h,"__container-wrapper")),ref:es,onClick:G?eM:function(){},children:(0,r.jsx)("div",{className:(0,o.default)("".concat(h,"__list-wrapper"),(t(l={},"".concat(h,"__list-wrapper--fixed-height"),eg),t(l,"".concat(h,"__list-wrapper--with-bottom-shadow"),em&&G),t(l,"".concat(h,"__list-wrapper--with-bottom-shadow-hidden"),ey===eE),l)),children:(0,r.jsxs)("div",{id:"dropdown-live-search-list",className:(0,o.default)("".concat(h,"__container"),t({},"".concat(h,"__list-top"),M)),ref:er,children:[G&&(0,r.jsxs)("div",{ref:eu,className:(0,o.default)("".concat(h,"__list-header"),(t(u={},"".concat(h,"__list-header-with-shadow"),em&&G),t(u,"".concat(h,"__list-header-with-shadow-hidden"),0===ey),u)),children:[(0,r.jsxs)("div",{className:(0,o.default)("".concat(h,"__list-header-row")),children:[(0,r.jsx)("div",{className:(0,o.default)("".concat(h,"__list-label")),children:_}),(0,r.jsx)("div",{className:(0,o.default)("".concat(h,"__list-close-icon")),onClick:function(){return eI(!1)},children:(0,r.jsx)(c.X,{onClick:function(){return eI(!1)}})})]}),L&&(0,r.jsx)("input",n({ref:ec,className:"".concat(h,"__input"),value:$?Y:J,onChange:eD,placeholder:E,onFocus:eq,tabIndex:-1},q))]}),(0,r.jsxs)("div",{className:(0,o.default)("".concat(h,"__list"),{disabled:C}),ref:eo,children:[null==I?void 0:I.map(function(e){return eT(e)}),!(null==I?void 0:I.length)&&(0,r.jsx)("div",{className:"".concat(h,"__list-item ").concat(h,"__list-item--no-options"),children:T})]}),C&&$&&(0,r.jsx)(f.default,{size:(null!=(e=null==I?void 0:I.length)?e:0)<=3?"small":null})]})})})},eB=function(){var e=document.createElement("div");e.setAttribute("id",null==W?void 0:W.toString()),e.classList.add("dropdown__container"),G&&e.addEventListener("click",function(e){e.target.id===W&&eI(!1)});try{null==(t=eO())||t.remove()}finally{if(G){try{null==(r=document.getElementById("mlw-".concat(W)))||r.remove()}catch(e){}var t,n,l,r,o=document.createElement("div");o.classList.add("dropdown-live-search-mobile"),o.setAttribute("id","mlw-".concat(W)),null==o||o.append(e),null==(l=ek())||l.append(o)}else null==(n=ek())||n.append(e)}};return((0,u.useEffect)(function(){return document.addEventListener("click",eP,!0),function(){return document.removeEventListener("click",eP,!0)}},[]),(0,u.useEffect)(function(){(null==I?void 0:I.length)===1&&Y===I[0].label&&(eC(I[0].label),null==j||j(I[0].value))},[I]),(0,u.useEffect)(function(){L&&(eL||K)&&(null==N||N(eL),K&&X(!1))},[eL,K]),(0,u.useEffect)(function(){G&&P&&eB()},[G,P]),(0,u.useEffect)(function(){if($&&G&&(null==eo?void 0:eo.current)&&!Y){var e,t,n,l;eh((null==eo||null==(e=eo.current)?void 0:e.scrollHeight)>(null==eo||null==(t=eo.current)?void 0:t.clientHeight)),e_(em||(null==eo||null==(n=eo.current)?void 0:n.scrollHeight)>(null==eo||null==(l=eo.current)?void 0:l.clientHeight))}},[$,G,em,null==eo?void 0:eo.current,null==eo||null==(m=eo.current)?void 0:m.scrollHeight,null==eo||null==(b=eo.current)?void 0:b.clientHeight]),(0,u.useLayoutEffect)(function(){var e=document.getElementById("dropdown-live-search-list");if((e||$)&&(!P||!G)){var t,n=null==el||null==(t=el.current)?void 0:t.clientWidth;e&&(e.style.minWidth="".concat(n,"px"))}},[el,$,P]),(0,u.useEffect)(function(){if(!$&&(ev(!1),P&&G&&eC("")),$&&eo&&eo.current){if(G&&P){var e;null==N||N("").then(function(){setTimeout(function(){if(eo.current&&(null==er?void 0:er.current)&&(null==eu?void 0:eu.current)){var e,t,n,l;eo.current.style.maxHeight="".concat((null==er||null==(t=er.current)||null==(e=t.getBoundingClientRect())?void 0:e.height)-(null==eu||null==(l=eu.current)||null==(n=l.getBoundingClientRect())?void 0:n.height),"px")}},1)}),null==ec||null==(e=ec.current)||e.focus()}eo.current.addEventListener("scroll",eN)}return function(){removeEventListener("scroll",eN)}},[$,eo]),(0,u.useLayoutEffect)(function(){var e;return G?(window.removeEventListener("mousewheel",eH),window.removeEventListener("scroll",eH),window.removeEventListener("touchmove",eH)):(window.addEventListener("mousewheel",eH),window.addEventListener("scroll",eH),window.addEventListener("touchmove",eH)),null==(e=eO())||e.addEventListener("click",eH),window.addEventListener("keyup",eR),function(){var e;window.removeEventListener("mousewheel",eH),window.removeEventListener("scroll",eH),window.removeEventListener("touchmove",eH),window.removeEventListener("keyup",eR),null==(e=eO())||e.removeEventListener("click",eH)}},[eO]),(0,u.useEffect)(function(){var e,t=function(e){var t,n;ex(Number.parseInt(null==(n=e.target)||null==(t=n.scrollTop)?void 0:t.toString(),10))};return $&&G&&(null==eo?void 0:eo.current)&&(null==eo||null==(e=eo.current)||e.addEventListener("scroll",t)),function(){var e;null==eo||null==(e=eo.current)||e.removeEventListener("scroll",t)}},[$,G,null==eo?void 0:eo.current]),(0,u.useEffect)(function(){if(null==eo?void 0:eo.current){var e,t,n;eS(Number.parseInt((e=(null==eo||null==(t=eo.current)?void 0:t.scrollHeight)-(null==eo||null==(n=eo.current)?void 0:n.clientHeight),e.toString()),10))}},[ey,null==eo?void 0:eo.current]),I)?(0,r.jsxs)("div",{className:(0,o.default)(h,S,(t(g={disabled:x},"".concat(h,"-mobile"),G),t(g,"".concat(h,"--focused"),$),g)),ref:el,children:[(0,r.jsxs)("button",{type:"button","data-testid":B,className:"".concat(h,"__trigger input__wrap ").concat($?"input__wrap--focus":""," ").concat(!w?"placeholder":""," ").concat(y?"error":""),onClick:function(){return L?null:eI(!$)},onMouseDown:function(){return ev(!0)},onFocus:function(){return ef?null:eI(!0)},tabIndex:R,children:[L?(0,r.jsx)("input",n({ref:ei,className:"".concat(h,"__input"),value:$?G&&P||!et?J:Y:J,onChange:eD,placeholder:E,onFocus:eq,onClick:function(e){var t,n;$||eI(!0),G&&P?(e.preventDefault(),e.stopPropagation(),e.target&&(null==(t=e.target)||t.blur())):e.target&&(null==(n=e.target)||n.select())},tabIndex:-1},q)):(0,r.jsx)("span",{className:"text",children:J||E}),(0,r.jsx)("span",{className:(0,o.default)("".concat(h,"__arrow"),t({},"".concat(h,"__arrow_active"),$)),onClick:function(){return eI(!$)},children:G?(0,r.jsx)(c.Code,{className:"mobile-icon"}):$?(0,r.jsx)(c.ChevronUp,{}):(0,r.jsx)(c.ChevronDown,{})})]}),$&&(G&&P?(p=eO())?(0,i.createPortal)(eF(),p):null:eF())]}):null};
+function e(e, t) {
+    (null == t || t > e.length) && (t = e.length);
+    for(var n = 0, l = Array(t); n < t; n++)l[n] = e[n];
+    return l;
+}
+function t(e, t, n) {
+    return t in e ? Object.defineProperty(e, t, {
+        value: n,
+        enumerable: !0,
+        configurable: !0,
+        writable: !0
+    }) : e[t] = n, e;
+}
+function n(e) {
+    for(var n = 1; n < arguments.length; n++){
+        var l = null != arguments[n] ? arguments[n] : {}, r = Object.keys(l);
+        "function" == typeof Object.getOwnPropertySymbols && (r = r.concat(Object.getOwnPropertySymbols(l).filter(function(e) {
+            return Object.getOwnPropertyDescriptor(l, e).enumerable;
+        }))), r.forEach(function(n) {
+            t(e, n, l[n]);
+        });
+    }
+    return e;
+}
+function l(t, n) {
+    return function(e) {
+        if (Array.isArray(e)) return e;
+    }(t) || function(e, t) {
+        var n, l, r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+        if (null != r) {
+            var o = [], u = !0, i = !1;
+            try {
+                for(r = r.call(e); !(u = (n = r.next()).done) && (o.push(n.value), !t || o.length !== t); u = !0);
+            } catch (e) {
+                i = !0, l = e;
+            } finally{
+                try {
+                    u || null == r.return || r.return();
+                } finally{
+                    if (i) throw l;
+                }
+            }
+            return o;
+        }
+    }(t, n) || function(t, n) {
+        if (t) {
+            if ("string" == typeof t) return e(t, n);
+            var l = Object.prototype.toString.call(t).slice(8, -1);
+            if ("Object" === l && t.constructor && (l = t.constructor.name), "Map" === l || "Set" === l) return Array.from(l);
+            if ("Arguments" === l || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(l)) return e(t, n);
+        }
+    }(t, 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.");
+    }();
+}
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), Object.defineProperty(exports, "default", {
+    enumerable: !0,
+    get: function() {
+        return b;
+    }
+});
+var r = require("react/jsx-runtime"), o = p(require("classnames")), u = function(e, t) {
+    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 n = m(t);
+    if (n && n.has(e)) return n.get(e);
+    var l = {
+        __proto__: null
+    }, r = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var o in e)if ("default" !== o && Object.prototype.hasOwnProperty.call(e, o)) {
+        var u = r ? Object.getOwnPropertyDescriptor(e, o) : null;
+        u && (u.get || u.set) ? Object.defineProperty(l, o, u) : l[o] = e[o];
+    }
+    return l.default = e, n && n.set(e, l), l;
+}(require("react")), i = require("react-dom"), c = require("react-feather"), a = require("../../../Functions/fieldValueFormatters"), s = require("../../../Functions/useDebounce"), d = p(require("../../../Functions/useIsMobile/useIsMobile")), f = p(require("../../Layout/Spinner/Spinner")), v = p(require("../RadioInput/RadioInput"));
+function p(e) {
+    return e && e.__esModule ? e : {
+        default: e
+    };
+}
+function m(e) {
+    if ("function" != typeof WeakMap) return null;
+    var t = new WeakMap(), n = new WeakMap();
+    return (m = function(e) {
+        return e ? n : t;
+    })(e);
+}
+require("./DropdownLiveSearch.scss");
+var h = 'dropdown-live-search', b = function(e) {
+    var p, m, b, g, _ = e.label, w = e.value, y = e.error, x = e.disabled, j = e.onChange, E = e.placeholder, S = e.className, L = e.isSearchable, N = e.doRequest, C = e.isLoading, I = e.options, k = e.fieldKey, O = e.id, M = e.isListTop, q = e.attributesOfNativeInput, P = e.withMobileLogic, R = e.tabIndex, H = e.isNotValidateASCII, D = void 0 !== H && H, A = e.noOptionsText, T = void 0 === A ? 'No options available' : A, F = e.testId, B = void 0 === F ? 'dropdown-live-search' : F, W = l((0, u.useState)(O || k || Math.random().toString(16).slice(2)), 1)[0], V = l((0, u.useState)(!1), 2), $ = V[0], U = V[1], z = l((0, u.useState)(!1), 2), K = z[0], X = z[1], G = (0, d.default)().isMobile && P && window.screen.width <= 768, J = (0, u.useMemo)(function() {
+        var e, t;
+        return null != (t = null == I || null == (e = I.find(function(e) {
+            return e.value === w;
+        })) ? void 0 : e.label) ? t : '';
+    }, [
+        w,
+        I
+    ]), Q = l((0, u.useState)(''), 2), Y = Q[0], Z = Q[1], ee = l((0, u.useState)(!1), 2), et = ee[0], en = ee[1], el = (0, u.useRef)(null), er = (0, u.useRef)(null), eo = (0, u.useRef)(null), eu = (0, u.useRef)(null), ei = (0, u.useRef)(null), ec = (0, u.useRef)(null), ea = (0, u.useRef)(null), es = (0, u.useRef)(null), ed = l((0, u.useState)(!1), 2), ef = ed[0], ev = ed[1], ep = l((0, u.useState)(null), 2), em = ep[0], eh = ep[1], eb = l((0, u.useState)(!1), 2), eg = eb[0], e_ = eb[1], ew = l((0, u.useState)(0), 2), ey = ew[0], ex = ew[1], ej = l((0, u.useState)(1), 2), eE = ej[0], eS = ej[1], eL = (0, s.useDebounce)({
+        searchValue: Y,
+        delay: 600
+    }), eN = (0, u.useCallback)(function(e) {
+        if (N && 'function' == typeof N) {
+            var t, n = null == e ? void 0 : e.target;
+            Math.round(n.clientHeight + n.scrollTop) === n.scrollHeight && N(null != (t = ea.current) ? t : '', !0);
+        }
+    }, [
+        I
+    ]), eC = function(e) {
+        var t = !(arguments.length > 1) || void 0 === arguments[1] || arguments[1];
+        t && en(!0), Z(e), ea.current = e;
+    }, eI = function(e) {
+        U(e), eC('', !1), e || en(!1);
+    }, ek = function() {
+        var e, t;
+        return null != (t = null != (e = document.querySelector('div#root')) ? e : document.querySelector('div#app')) ? t : document.querySelector('div#storybook-root');
+    }, eO = function() {
+        return document.getElementById(null == W ? void 0 : W.toString());
+    }, eM = function(e) {
+        e.target === (null == es ? void 0 : es.current) && (e.stopPropagation(), e.preventDefault(), eI(!1));
+    }, eq = function(e) {
+        $ || (e.preventDefault(), e.stopPropagation());
+    }, eP = function(e) {
+        var t;
+        !el.current || el.current.contains(e.target) || eO() && (null == (t = eO()) ? void 0 : t.contains(e.target)) || eI(!1);
+    }, eR = function(e) {
+        [
+            27
+        ].includes(e.keyCode) && eI(!1);
+    }, eH = $ ? eP : function() {}, eD = function(e) {
+        var t, n = null == (t = e.target) ? void 0 : t.value;
+        D || (n = (0, a.formatToOnlyASCIICodeText)(n)), eC(n), !Y && et || e.target.value ? X(!1) : (null == j || j(''), eC(''), X(!0));
+    }, eA = function(e, t) {
+        if (!L) return e;
+        var n = et || G && P ? Y : J;
+        return e = e.replace(/["&<>]/g, function(e) {
+            var t;
+            return null != (t = ({
+                '"': '&quot;',
+                '&': '&amp;',
+                '<': '&lt;',
+                '>': '&gt;'
+            })[e]) ? t : '';
+        }), (n ? null == e ? void 0 : e.replace(RegExp(null == n ? void 0 : n.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&'), 'i'), function(e) {
+            return '<span class="bg--yellow">'.concat(e, "</span>");
+        }) : e) + (t ? '<span class="dropdown__list-item-postfix">'.concat(t, "</span>") : '');
+    }, eT = function(e, n, l) {
+        var u, i, a, s, d = e.label.toLowerCase(), f = null == Y ? void 0 : Y.toLowerCase();
+        return (0, r.jsxs)("button", {
+            type: "button",
+            "data-testid": "".concat(B, "-").concat(l || n, "-option"),
+            onClick: function() {
+                null == j || j(e.value), eI(!1);
+            },
+            className: (0, o.default)("".concat(h, "__list-item"), (t(s = {}, "".concat(h, "__list-item_active"), e.value === w), t(s, "".concat(h, "__list-item_disabled"), e.disabled), s), e.className),
+            children: [
+                !G || G && !P && (0, r.jsx)("span", {
+                    className: (0, o.default)("".concat(h, "__active-icon"), t({}, "".concat(h, "__active-icon_active"), d === f)),
+                    children: (0, r.jsx)(c.Check, {})
+                }),
+                (0, r.jsx)("p", {
+                    title: e.label,
+                    className: e.labelClassName || '',
+                    dangerouslySetInnerHTML: {
+                        __html: eA(e.label, e.postfix)
+                    }
+                }),
+                G ? null != (a = null == e ? void 0 : e.customMobileIcon) ? a : (0, r.jsx)(v.default, {
+                    value: e.value,
+                    checked: null == w ? void 0 : w.toString()
+                }) : ''
+            ]
+        }, null == (i = e.value) || null == (u = i.toString()) ? void 0 : u.replace(/ /g, '_'));
+    }, eF = function() {
+        var e, l, u;
+        return (0, r.jsx)("div", {
+            className: (0, o.default)("".concat(h, "__container-wrapper")),
+            ref: es,
+            onClick: G ? eM : function() {},
+            children: (0, r.jsx)("div", {
+                className: (0, o.default)("".concat(h, "__list-wrapper"), (t(l = {}, "".concat(h, "__list-wrapper--fixed-height"), eg), t(l, "".concat(h, "__list-wrapper--with-bottom-shadow"), em && G), t(l, "".concat(h, "__list-wrapper--with-bottom-shadow-hidden"), ey === eE), l)),
+                children: (0, r.jsxs)("div", {
+                    id: "dropdown-live-search-list",
+                    className: (0, o.default)("".concat(h, "__container"), t({}, "".concat(h, "__list-top"), M)),
+                    ref: er,
+                    children: [
+                        G && (0, r.jsxs)("div", {
+                            ref: eu,
+                            className: (0, o.default)("".concat(h, "__list-header"), (t(u = {}, "".concat(h, "__list-header-with-shadow"), em && G), t(u, "".concat(h, "__list-header-with-shadow-hidden"), 0 === ey), u)),
+                            children: [
+                                (0, r.jsxs)("div", {
+                                    className: (0, o.default)("".concat(h, "__list-header-row")),
+                                    children: [
+                                        (0, r.jsx)("div", {
+                                            className: (0, o.default)("".concat(h, "__list-label")),
+                                            children: _
+                                        }),
+                                        (0, r.jsx)("div", {
+                                            className: (0, o.default)("".concat(h, "__list-close-icon")),
+                                            onClick: function() {
+                                                return eI(!1);
+                                            },
+                                            children: (0, r.jsx)(c.X, {
+                                                onClick: function() {
+                                                    return eI(!1);
+                                                }
+                                            })
+                                        })
+                                    ]
+                                }),
+                                L && (0, r.jsx)("input", n({
+                                    ref: ec,
+                                    className: "".concat(h, "__input"),
+                                    value: $ ? Y : J,
+                                    onChange: eD,
+                                    placeholder: E,
+                                    onFocus: eq,
+                                    tabIndex: -1
+                                }, q))
+                            ]
+                        }),
+                        (0, r.jsxs)("div", {
+                            className: (0, o.default)("".concat(h, "__list"), {
+                                disabled: C
+                            }),
+                            ref: eo,
+                            children: [
+                                null == I ? void 0 : I.map(function(e) {
+                                    return eT(e);
+                                }),
+                                !(null == I ? void 0 : I.length) && (0, r.jsx)("div", {
+                                    className: "".concat(h, "__list-item ").concat(h, "__list-item--no-options"),
+                                    children: T
+                                })
+                            ]
+                        }),
+                        C && $ && (0, r.jsx)(f.default, {
+                            size: (null != (e = null == I ? void 0 : I.length) ? e : 0) <= 3 ? 'small' : null
+                        })
+                    ]
+                })
+            })
+        });
+    }, eB = function() {
+        var e = document.createElement('div');
+        e.setAttribute('id', null == W ? void 0 : W.toString()), e.classList.add('dropdown__container'), G && e.addEventListener('click', function(e) {
+            e.target.id === W && eI(!1);
+        });
+        try {
+            null == (t = eO()) || t.remove();
+        } finally{
+            if (G) {
+                try {
+                    null == (r = document.getElementById("mlw-".concat(W))) || r.remove();
+                } catch (e) {}
+                var t, n, l, r, o = document.createElement('div');
+                o.classList.add('dropdown-live-search-mobile'), o.setAttribute('id', "mlw-".concat(W)), null == o || o.append(e), null == (l = ek()) || l.append(o);
+            } else null == (n = ek()) || n.append(e);
+        }
+    };
+    return ((0, u.useEffect)(function() {
+        return document.addEventListener('click', eP, !0), function() {
+            return document.removeEventListener('click', eP, !0);
+        };
+    }, []), (0, u.useEffect)(function() {
+        (null == I ? void 0 : I.length) === 1 && Y === I[0].label && (eC(I[0].label), null == j || j(I[0].value));
+    }, [
+        I
+    ]), (0, u.useEffect)(function() {
+        L && (eL || K) && (null == N || N(eL), K && X(!1));
+    }, [
+        eL,
+        K
+    ]), (0, u.useEffect)(function() {
+        G && P && eB();
+    }, [
+        G,
+        P
+    ]), (0, u.useEffect)(function() {
+        if ($ && G && (null == eo ? void 0 : eo.current) && !Y) {
+            var e, t, n, l;
+            eh((null == eo || null == (e = eo.current) ? void 0 : e.scrollHeight) > (null == eo || null == (t = eo.current) ? void 0 : t.clientHeight)), e_(em || (null == eo || null == (n = eo.current) ? void 0 : n.scrollHeight) > (null == eo || null == (l = eo.current) ? void 0 : l.clientHeight));
+        }
+    }, [
+        $,
+        G,
+        em,
+        null == eo ? void 0 : eo.current,
+        null == eo || null == (m = eo.current) ? void 0 : m.scrollHeight,
+        null == eo || null == (b = eo.current) ? void 0 : b.clientHeight
+    ]), (0, u.useLayoutEffect)(function() {
+        var e = document.getElementById('dropdown-live-search-list');
+        if ((e || $) && (!P || !G)) {
+            var t, n = null == el || null == (t = el.current) ? void 0 : t.clientWidth;
+            e && (e.style.minWidth = "".concat(n, "px"));
+        }
+    }, [
+        el,
+        $,
+        P
+    ]), (0, u.useEffect)(function() {
+        if (!$ && (ev(!1), P && G && eC('')), $ && eo && eo.current) {
+            if (G && P) {
+                var e;
+                null == N || N('').then(function() {
+                    setTimeout(function() {
+                        if (eo.current && (null == er ? void 0 : er.current) && (null == eu ? void 0 : eu.current)) {
+                            var e, t, n, l;
+                            eo.current.style.maxHeight = "".concat((null == er || null == (t = er.current) || null == (e = t.getBoundingClientRect()) ? void 0 : e.height) - (null == eu || null == (l = eu.current) || null == (n = l.getBoundingClientRect()) ? void 0 : n.height), "px");
+                        }
+                    }, 1);
+                }), null == ec || null == (e = ec.current) || e.focus();
+            }
+            eo.current.addEventListener('scroll', eN);
+        }
+        return function() {
+            removeEventListener('scroll', eN);
+        };
+    }, [
+        $,
+        eo
+    ]), (0, u.useLayoutEffect)(function() {
+        var e;
+        return G ? (window.removeEventListener('mousewheel', eH), window.removeEventListener('scroll', eH), window.removeEventListener('touchmove', eH)) : (window.addEventListener('mousewheel', eH), window.addEventListener('scroll', eH), window.addEventListener('touchmove', eH)), null == (e = eO()) || e.addEventListener('click', eH), window.addEventListener('keyup', eR), function() {
+            var e;
+            window.removeEventListener('mousewheel', eH), window.removeEventListener('scroll', eH), window.removeEventListener('touchmove', eH), window.removeEventListener('keyup', eR), null == (e = eO()) || e.removeEventListener('click', eH);
+        };
+    }, [
+        eO
+    ]), (0, u.useEffect)(function() {
+        var e, t = function(e) {
+            var t, n;
+            ex(Number.parseInt(null == (n = e.target) || null == (t = n.scrollTop) ? void 0 : t.toString(), 10));
+        };
+        return $ && G && (null == eo ? void 0 : eo.current) && (null == eo || null == (e = eo.current) || e.addEventListener('scroll', t)), function() {
+            var e;
+            null == eo || null == (e = eo.current) || e.removeEventListener('scroll', t);
+        };
+    }, [
+        $,
+        G,
+        null == eo ? void 0 : eo.current
+    ]), (0, u.useEffect)(function() {
+        if (null == eo ? void 0 : eo.current) {
+            var e, t, n;
+            eS(Number.parseInt((e = (null == eo || null == (t = eo.current) ? void 0 : t.scrollHeight) - (null == eo || null == (n = eo.current) ? void 0 : n.clientHeight), e.toString()), 10));
+        }
+    }, [
+        ey,
+        null == eo ? void 0 : eo.current
+    ]), I) ? (0, r.jsxs)("div", {
+        className: (0, o.default)(h, S, (t(g = {
+            disabled: x
+        }, "".concat(h, "-mobile"), G), t(g, "".concat(h, "--focused"), $), g)),
+        ref: el,
+        children: [
+            (0, r.jsxs)("button", {
+                type: "button",
+                "data-testid": B,
+                className: "".concat(h, "__trigger input__wrap ").concat($ ? 'input__wrap--focus' : '', " ").concat(!w ? 'placeholder' : '', " ").concat(y ? 'error' : ''),
+                onClick: function() {
+                    return L ? null : eI(!$);
+                },
+                onMouseDown: function() {
+                    return ev(!0);
+                },
+                onFocus: function() {
+                    return ef ? null : eI(!0);
+                },
+                tabIndex: R,
+                children: [
+                    L ? (0, r.jsx)("input", n({
+                        ref: ei,
+                        className: "".concat(h, "__input"),
+                        value: $ ? G && P || !et ? J : Y : J,
+                        onChange: eD,
+                        placeholder: E,
+                        onFocus: eq,
+                        onClick: function(e) {
+                            var t, n;
+                            $ || eI(!0), G && P ? (e.preventDefault(), e.stopPropagation(), e.target && (null == (t = e.target) || t.blur())) : e.target && (null == (n = e.target) || n.select());
+                        },
+                        tabIndex: -1
+                    }, q)) : (0, r.jsx)("span", {
+                        className: "text",
+                        children: J || E
+                    }),
+                    (0, r.jsx)("span", {
+                        className: (0, o.default)("".concat(h, "__arrow"), t({}, "".concat(h, "__arrow_active"), $)),
+                        onClick: function() {
+                            return eI(!$);
+                        },
+                        children: G ? (0, r.jsx)(c.Code, {
+                            className: "mobile-icon"
+                        }) : $ ? (0, r.jsx)(c.ChevronUp, {}) : (0, r.jsx)(c.ChevronDown, {})
+                    })
+                ]
+            }),
+            $ && (G && P ? (p = eO()) ? (0, i.createPortal)(eF(), p) : null : eF())
+        ]
+    }) : null;
+};

package/dist/Atomic/FormElements/FileLoader/FileLoader.js

@@ -1 +1,94 @@
-function e(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,o=Array(r);t<r;t++)o[t]=e[t];return o}function r(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function t(r,t){return function(e){if(Array.isArray(e))return e}(r)||function(e,r){var t,o,n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var a=[],i=!0,l=!1;try{for(n=n.call(e);!(i=(t=n.next()).done)&&(a.push(t.value),!r||a.length!==r);i=!0);}catch(e){l=!0,o=e}finally{try{i||null==n.return||n.return()}finally{if(l)throw o}}return a}}(r,t)||function(r,t){if(r){if("string"==typeof r)return e(r,t);var o=Object.prototype.toString.call(r).slice(8,-1);if("Object"===o&&r.constructor&&(o=r.constructor.name),"Map"===o||"Set"===o)return Array.from(o);if("Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o))return e(r,t)}}(r,t)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}import{jsx as o,jsxs as n}from"react/jsx-runtime";import{useState as a}from"react";import i from"classnames";import l from"./partial/LoadZone";import s from"./partial/LoadedContent";import"./FileLoader.scss";var c="file-loader";export default function(e){var u,d=e.fieldKey,f=e.value,p=e.disabled,m=e.error,y=e.className,v=e.placeholder,b=e.onChange,h=e.doLoad,I=e.filterFiles,g=e.processErrors,L=e.isBlockNullValues,A=e.isDisableErrorsClass,C=e.uploadIcon,j=e.downloadIcon,k=e.deleteIcon,w=e.spiner,N=e.isIconAfter,x=e.isLinkTypeDownload,D=e.isUseLinkTitle,O=e.attributesOfNativeInput,S=t(a(!1),2),T=S[0],_=S[1],E=t(a(!1),2),F=E[0],U=E[1];return n("div",{className:i(c,y,(r(u={},"".concat(c,"_load-content"),T),r(u,"".concat(c,"_load-zone"),!f),r(u,"".concat(c,"_hover"),F),r(u,"".concat(c,"_disabled"),p),r(u,"".concat(c,"_error"),!(void 0===A||A)&&!!m),u)),children:[T&&w,!h&&"develop error: no doLoad",!!h&&!!f&&o(s,{RC:c,value:f,onDelete:function(){return b(null)},icon:j,isIconAfter:N,deleteIcon:k,isUseLinkTitle:void 0!==D&&D,isLinkTypeDownload:void 0!==x&&x}),!!h&&!f&&o(l,{RC:c,fieldKey:d,onChange:b,icon:C,doLoad:h,dragenter:F,setDragenter:U,setIsLoadContent:_,placeholder:v,filterFiles:I,processErrors:g,isBlockNullValues:L,attributesOfNativeInput:void 0===O?{}:O})]})}
+import React, { useState } from "react";
+
+import cn from "classnames";
+
+import LoadZone from "./partial/LoadZone";
+import LoadedContent from "./partial/LoadedContent";
+
+import "./FileLoader.scss";
+
+const RC = "file-loader";
+
+const FileLoader = (props) => {
+  const {
+    // будет использован в качестве id инпута в LoadZone, обязателен для корректной работы
+    fieldKey,
+    // null или структура { name, path, ... остальное по желанию }
+    value,
+    disabled,
+    error,
+
+    className,
+    placeholder,
+
+    onChange,
+    doLoad,
+    filterFiles,
+    processErrors,
+
+    isBlockNullValues,
+    isDisableErrorsClass = true,
+
+    uploadIcon,
+    downloadIcon,
+    deleteIcon,
+    spiner,
+
+    isIconAfter,
+    isLinkTypeDownload = false,
+    isUseLinkTitle = false,
+    attributesOfNativeInput = {},
+  } = props;
+
+  const [isLoadContent, setIsLoadContent] = useState(false);
+  const [dragenter, setDragenter] = useState(false);
+
+  return (
+    <div
+      className={cn(RC, className, {
+        [`${RC}_load-content`]: isLoadContent,
+        [`${RC}_load-zone`]: !value,
+        [`${RC}_hover`]: dragenter,
+        [`${RC}_disabled`]: disabled,
+        [`${RC}_error`]: !isDisableErrorsClass && Boolean(error),
+      })}
+    >
+      {isLoadContent && spiner}
+
+      {!doLoad && "develop error: no doLoad"}
+
+      {Boolean(doLoad) && Boolean(value) && (
+        <LoadedContent
+          RC={RC}
+          value={value}
+          onDelete={() => onChange(null)}
+          icon={downloadIcon}
+          isIconAfter={isIconAfter}
+          deleteIcon={deleteIcon}
+          isUseLinkTitle={isUseLinkTitle}
+          isLinkTypeDownload={isLinkTypeDownload}
+        />
+      )}
+
+      {Boolean(doLoad) && !value && (
+        <LoadZone
+          RC={RC}
+          fieldKey={fieldKey}
+          onChange={onChange}
+          icon={uploadIcon}
+          doLoad={doLoad}
+          dragenter={dragenter}
+          setDragenter={setDragenter}
+          setIsLoadContent={setIsLoadContent}
+          placeholder={placeholder}
+          filterFiles={filterFiles}
+          processErrors={processErrors}
+          isBlockNullValues={isBlockNullValues}
+          attributesOfNativeInput={attributesOfNativeInput}
+        />
+      )}
+    </div>
+  );
+};
+
+export default FileLoader;

package/dist/Atomic/FormElements/FileLoader/partial/LoadZone.js

@@ -1 +1,105 @@
-function e(e,r,n,t,a,o,l){try{var i=e[o](l),u=i.value}catch(e){n(e);return}i.done?r(u):Promise.resolve(u).then(t,a)}function r(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}import{jsx as n,jsxs as t,Fragment as a}from"react/jsx-runtime";import{useEffect as o}from"react";import l from"classnames";import"../FileLoader.scss";var i=function(e){return e.size<=1048576?e:null};export default function(u){var c,s,d=u.RC,f=u.fieldKey,p=u.onChange,v=u.doLoad,g=u.setDragenter,b=u.setIsLoadContent,h=u.icon,m=u.placeholder,y=u.filterFiles,E=void 0===y?i:y,w=u.processErrors,L=u.isBlockNullValues,O=u.attributesOfNativeInput,j="dropZone-".concat(f),P={change:(c=function(e){var r,n,t;return function(e,r){var n,t,a,o={label:0,sent:function(){if(1&a[0])throw a[1];return a[1]},trys:[],ops:[]},l=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return l.next=i(0),l.throw=i(1),l.return=i(2),"function"==typeof Symbol&&(l[Symbol.iterator]=function(){return this}),l;function i(i){return function(u){var c=[i,u];if(n)throw TypeError("Generator is already executing.");for(;l&&(l=0,c[0]&&(o=0)),o;)try{if(n=1,t&&(a=2&c[0]?t.return:c[0]?t.throw||((a=t.return)&&a.call(t),0):t.next)&&!(a=a.call(t,c[1])).done)return a;switch(t=0,a&&(c=[2&c[0],a.value]),c[0]){case 0:case 1:a=c;break;case 4:return o.label++,{value:c[1],done:!1};case 5:o.label++,t=c[1],c=[0];continue;case 7:c=o.ops.pop(),o.trys.pop();continue;default:if(!(a=(a=o.trys).length>0&&a[a.length-1])&&(6===c[0]||2===c[0])){o=0;continue}if(3===c[0]&&(!a||c[1]>a[0]&&c[1]<a[3])){o.label=c[1];break}if(6===c[0]&&o.label<a[1]){o.label=a[1],a=c;break}if(a&&o.label<a[2]){o.label=a[2],o.ops.push(c);break}a[2]&&o.ops.pop(),o.trys.pop();continue}c=r.call(e,o)}catch(e){c=[6,e],t=0}finally{n=a=0}if(5&c[0])throw c[1];return{value:c[0]?c[1]:void 0,done:!0}}}}(this,function(a){switch(a.label){case 0:if(null==b||b(!0),r="change"===e.type?e.target.files[0]:e.dataTransfer.files[0],!E)return[3,2];return[4,E(r)];case 1:return t=a.sent(),[3,3];case 2:t=r,a.label=3;case 3:if(n=t,!(w&&!n))return[3,5];return[4,w(r)];case 4:a.sent(),a.label=5;case 5:if(!(!L||n))return[3,7];return[4,v(n).catch(function(){return null})];case 6:p.apply(void 0,[a.sent()]),a.label=7;case 7:return null==b||b(!1),[2]}})},s=function(){var r=this,n=arguments;return new Promise(function(t,a){var o=c.apply(r,n);function l(r){e(o,t,a,l,i,"next",r)}function i(r){e(o,t,a,l,i,"throw",r)}l(void 0)})},function(e){return s.apply(this,arguments)}),dragover:function(e){return e.stopPropagation(),e.preventDefault(),!1},dragenter:function(e){return e.stopPropagation(),e.preventDefault(),g(!0),!1},dragleave:function(e){return e.stopPropagation(),e.preventDefault(),g(!1),!1},drop:function(e){return e.stopPropagation(),e.preventDefault(),g(!1),P.change(e),!1}};return o(function(){var e=document.getElementById(j);return null==e||e.addEventListener("dragenter",P.dragenter,!1),null==e||e.addEventListener("dragover",P.dragover,!1),null==e||e.addEventListener("dragleave",P.dragleave,!1),null==e||e.addEventListener("drop",P.drop,!1),null==e||e.addEventListener("dragend",P.dragleave,!1),function(){null==e||e.removeEventListener("dragenter",P.dragenter,!1),null==e||e.removeEventListener("dragover",P.dragover,!1),null==e||e.removeEventListener("dragleave",P.dragleave,!1),null==e||e.removeEventListener("drop",P.drop,!1),null==e||e.removeEventListener("dragend",P.dragleave,!1)}},[f,v]),t(a,{children:[h&&n("div",{className:l("".concat(d,"__icon-block")),children:h}),t("label",{id:j,className:l("".concat(d,"__input-label"),r({},"".concat(d,"__input-label_no-icon"),!h)),htmlFor:f,children:[void 0===m?"":m,n("input",function(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},a=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(t).filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),a.forEach(function(n){r(e,n,t[n])})}return e}({id:f,className:l("".concat(d,"__input")),type:"file",onChange:P.change},void 0===O?{}:O))]})]})}
+import React, { useEffect } from "react";
+
+import cn from "classnames";
+
+import "../FileLoader.scss";
+
+const DEFAULT_MAX_FILE_SIZE = 1024 * 1024; //1Мб
+const FILTER_FILES_DEFAULT = (file) =>
+  file.size <= DEFAULT_MAX_FILE_SIZE ? file : null;
+
+const LoadZone = ({
+  RC,
+  fieldKey,
+  onChange,
+  doLoad,
+  setDragenter,
+  setIsLoadContent,
+  icon,
+  placeholder = "",
+  filterFiles = FILTER_FILES_DEFAULT,
+  processErrors,
+  isBlockNullValues,
+  attributesOfNativeInput = {},
+}) => {
+  const dropZoneId = `dropZone-${fieldKey}`;
+
+  const handle = {
+    change: async (e) => {
+      setIsLoadContent?.(true);
+      const file =
+        e.type === "change" ? e.target.files[0] : e.dataTransfer.files[0];
+      const validatedFile = filterFiles ? await filterFiles(file) : file;
+      if (processErrors && !validatedFile) await processErrors(file);
+      if (!isBlockNullValues || validatedFile) {
+        onChange(await doLoad(validatedFile).catch(() => null));
+      }
+      setIsLoadContent?.(false);
+    },
+    dragover: (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      return false;
+    },
+    dragenter: (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      setDragenter(true);
+      return false;
+    },
+    dragleave: (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      setDragenter(false);
+      return false;
+    },
+    drop: (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      setDragenter(false);
+      handle.change(e);
+      return false;
+    },
+  };
+
+  useEffect(() => {
+    const dropbox = document.getElementById(dropZoneId);
+    dropbox?.addEventListener("dragenter", handle.dragenter, false);
+    dropbox?.addEventListener("dragover", handle.dragover, false);
+    dropbox?.addEventListener("dragleave", handle.dragleave, false);
+    dropbox?.addEventListener("drop", handle.drop, false);
+    dropbox?.addEventListener("dragend", handle.dragleave, false);
+
+    return () => {
+      dropbox?.removeEventListener("dragenter", handle.dragenter, false);
+      dropbox?.removeEventListener("dragover", handle.dragover, false);
+      dropbox?.removeEventListener("dragleave", handle.dragleave, false);
+      dropbox?.removeEventListener("drop", handle.drop, false);
+      dropbox?.removeEventListener("dragend", handle.dragleave, false);
+    };
+  }, [fieldKey, doLoad]);
+
+  return (
+    <>
+      {icon && <div className={cn(`${RC}__icon-block`)}>{icon}</div>}
+      <label
+        id={dropZoneId}
+        className={cn(`${RC}__input-label`, {
+          [`${RC}__input-label_no-icon`]: !icon,
+        })}
+        htmlFor={fieldKey}
+      >
+        {placeholder}
+        <input
+          id={fieldKey}
+          className={cn(`${RC}__input`)}
+          type="file"
+          onChange={handle.change}
+          {...attributesOfNativeInput}
+        />
+      </label>
+    </>
+  );
+};
+
+export default LoadZone;