@walkover/autosuggest-custom
Advanced tools
@walkover/autosuggest-custom - npm Package Compare versions
Comparing version 0.3.2 to 0.3.3
@@ -1,1 +0,1 @@ | ||
| !function(){"use strict";var e={649:function(e,t,n){var r=n(81),o=n.n(r),a=n(645),i=n.n(a)()(o());i.push([e.id,"/* COMMON CLASSES FOR BOTH GROUPED AND SIMPLE AUTOSUGGEST */\r\n.suggestionBox::-webkit-scrollbar {\r\n display: none;\r\n}\r\n\r\n.editable-div::-webkit-scrollbar {\r\n display: none;\r\n}\r\n\r\n.suggestionBox {\r\n display: absolute;\r\n width: auto;\r\n border: 1px solid #ccc;\r\n background-color: #f9f9f9;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n max-height: 70vh;\r\n height: auto;\r\n overflow: auto;\r\n}\r\n\r\n.editable-div {\r\n border: 1px solid #ccc;\r\n width: 300px;\r\n height: 100px;\r\n font-family: Arial, sans-serif;\r\n font-size: 16px;\r\n border-radius: 0px;\r\n margin-bottom: 2px;\r\n padding-left: 5px;\r\n overflow: scroll;\r\n}\r\n\r\n.chip {\r\n display: inline-block;\r\n padding: 5px 10px;\r\n margin: 5px;\r\n background-color: #f1f1f1;\r\n border-radius: 20px;\r\n font-family: Arial, sans-serif;\r\n font-size: 14px;\r\n color: #555;\r\n}\r\n\r\n.suggestionMainContainer {\r\n width: 100%;\r\n height: 100%;\r\n}\r\n\r\n.hoverValueContainer {\r\n position: absolute !important;\r\n right: 102% !important;\r\n top: 5px !important;\r\n min-width: 100px !important;\r\n max-width: 200px !important;\r\n padding: 10px !important;\r\n word-wrap: break-word;\r\n color: white;\r\n background-color: rgb(31, 32, 30);\r\n font-size: 14px !important;\r\n border-radius: 5px;\r\n z-index: 30;\r\n}\r\n\r\n/* SIMPLE AUTO-SUGGESTIONS CLASSES */\r\n.listSuggestionContainerForSimpleAutosuggest {\r\n list-style-type: none;\r\n font-size: 16px;\r\n padding: 5px;\r\n}\r\n\r\n.listSuggestionContainerForSimpleAutosuggest:hover {\r\n background-color: rgb(128, 128, 128, 0.5);\r\n}\r\n\r\n.listSuggestionTag{\r\n font-size: 16px !important;\r\n}\r\n\r\n.listSuggestionTagContent{\r\n font-size: 12px !important;\r\n}\r\n\r\n/* GROUPED SUGGESTIONS CLASSES */\r\n.listSuggestions {\r\n list-style-type: none;\r\n font-size: 16px !important;\r\n padding: 0px 0px 0px 17px;\r\n}\r\n\r\n.valueContent {\r\n font-size: 12px !important;\r\n list-style-type: none;\r\n margin: 0px 0px 0px 17px;\r\n}\r\n\r\n.ulTag {\r\n font-size: 21px !important;\r\n padding: 5px;\r\n background-color: black;\r\n color: white;\r\n width: 100% !important;\r\n}\r\n\r\n.listSuggestionContainer {\r\n display: flex;\r\n flex-direction: column;\r\n padding: 5px;\r\n}\r\n\r\n.listSuggestionContainer:hover {\r\n background-color: rgb(128, 128, 128, 0.5);\r\n}",""]),t.Z=i},645:function(e){e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n="",r=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),r&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),r&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n})).join("")},t.i=function(e,n,r,o,a){"string"==typeof e&&(e=[[null,e,void 0]]);var i={};if(r)for(var u=0;u<this.length;u++){var l=this[u][0];null!=l&&(i[l]=!0)}for(var c=0;c<e.length;c++){var s=[].concat(e[c]);r&&i[s[0]]||(void 0!==a&&(void 0===s[5]||(s[1]="@layer".concat(s[5].length>0?" ".concat(s[5]):""," {").concat(s[1],"}")),s[5]=a),n&&(s[2]?(s[1]="@media ".concat(s[2]," {").concat(s[1],"}"),s[2]=n):s[2]=n),o&&(s[4]?(s[1]="@supports (".concat(s[4],") {").concat(s[1],"}"),s[4]=o):s[4]="".concat(o)),t.push(s))}},t}},81:function(e){e.exports=function(e){return e[1]}},379:function(e){var t=[];function n(e){for(var n=-1,r=0;r<t.length;r++)if(t[r].identifier===e){n=r;break}return n}function r(e,r){for(var a={},i=[],u=0;u<e.length;u++){var l=e[u],c=r.base?l[0]+r.base:l[0],s=a[c]||0,f="".concat(c," ").concat(s);a[c]=s+1;var d=n(f),p={css:l[1],media:l[2],sourceMap:l[3],supports:l[4],layer:l[5]};if(-1!==d)t[d].references++,t[d].updater(p);else{var g=o(p,r);r.byIndex=u,t.splice(u,0,{identifier:f,updater:g,references:1})}i.push(f)}return i}function o(e,t){var n=t.domAPI(t);return n.update(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap&&t.supports===e.supports&&t.layer===e.layer)return;n.update(e=t)}else n.remove()}}e.exports=function(e,o){var a=r(e=e||[],o=o||{});return function(e){e=e||[];for(var i=0;i<a.length;i++){var u=n(a[i]);t[u].references--}for(var l=r(e,o),c=0;c<a.length;c++){var s=n(a[c]);0===t[s].references&&(t[s].updater(),t.splice(s,1))}a=l}}},569:function(e){var t={};e.exports=function(e,n){var r=function(e){if(void 0===t[e]){var n=document.querySelector(e);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}t[e]=n}return t[e]}(e);if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(n)}},216:function(e){e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},565:function(e,t,n){e.exports=function(e){var t=n.nc;t&&e.setAttribute("nonce",t)}},795:function(e){e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=e.insertStyleElement(e);return{update:function(n){!function(e,t,n){var r="";n.supports&&(r+="@supports (".concat(n.supports,") {")),n.media&&(r+="@media ".concat(n.media," {"));var o=void 0!==n.layer;o&&(r+="@layer".concat(n.layer.length>0?" ".concat(n.layer):""," {")),r+=n.css,o&&(r+="}"),n.media&&(r+="}"),n.supports&&(r+="}");var a=n.sourceMap;a&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),t.styleTagTransform(r,e,t.options)}(t,e,n)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)}}}},589:function(e){e.exports=function(e,t){if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}}},t={};function n(r){var o=t[r];if(void 0!==o)return o.exports;var a=t[r]={id:r,exports:{}};return e[r](a,a.exports,n),a.exports}n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.d=function(e,t){for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.nc=void 0;var r={};!function(){n.r(r),n.d(r,{default:function(){return T}});var e=require("react"),t=n.n(e);function o(){return o=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},o.apply(this,arguments)}function a(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,a,i,u=[],l=!0,c=!1;try{if(a=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=a.call(n)).done)&&(u.push(r.value),u.length!==t);l=!0);}catch(e){c=!0,o=e}finally{try{if(!l&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(c)throw o}}return u}}(e,t)||function(e,t){if(e){if("string"==typeof e)return i(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?i(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function i(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function u(n){var r,i=n.id,u=n.suggestion,l=n.chipClass,c=n.editableDivClass,s=n.suggestionBoxClass,f=n.onEnterBtnEvent,d=n.getInputValueWithContext,p=n.setHtml,g=n.setText,v=n.defaultValue,m=n.disable,h=u||[],b=(0,e.useRef)(),y=(0,e.useRef)(),x=a((0,e.useState)([]),2),S=x[0],w=x[1],E=a((0,e.useState)(-1),2),C=E[0],N=E[1],A=a((0,e.useState)(),2),T=A[0],O=A[1],k=a((0,e.useState)({left:0,top:0}),2),j=k[0],R=k[1],D=a((0,e.useState)(""),2),M=D[0],B=D[1];(0,e.useEffect)((function(){b.current&&(b.current.innerHTML=v||"")}),[]),(0,e.useEffect)((function(){var e=l||"chip",t=document.getElementsByClassName(e),n=Array.from(t);n.forEach((function(e){I(e)})),n.forEach((function(e){L(e)}))}),[null==b||null===(r=b.current)||void 0===r?void 0:r.innerText.length]);var I=function(e){e.addEventListener("mouseenter",(function(e){e.target.getAttribute("walkover-attribute")?B(e.target.getAttribute("walkover-attribute")):B("")}))},L=function(e){e.addEventListener("mouseleave",(function(){B("")}))},V=function(){if(b.current){var e=b.current.innerHTML,t=document.createElement("div");t.innerHTML=e,function(e){for(var t=e.length-1;t>=0;t--){var n=e[t];if(n.getAttribute("walkover-attribute")){var r=n.getAttribute("data-attribute")+" ",o=document.createTextNode(r);n.parentNode.replaceChild(o,n)}}}(t.getElementsByTagName("span")),function(e,t){p&&p((function(){return t})),g&&g(e),d&&d(e,t)}(t.innerText,e)}},z=function(e){var t,n,r,o=window.getSelection(),a=o.anchorNode,i=o.anchorOffset;if(a&&a.nodeType===Node.TEXT_NODE){var u,c,s,f=document.createElement("span");f.className=l||"chip",f.contentEditable="false",f.textContent=e.name,f.setAttribute("walkover-attribute",e.content),f.setAttribute("data-attribute",e.content);var d=a.nodeValue.substring(0,i),p=a.nodeValue.substring(i,a.nodeValue.length),g=d.lastIndexOf(T),v=a.nodeValue.substring(0,g),m=document.createTextNode(v);a.parentNode.insertBefore(m,a),a.parentNode.insertBefore(f,a),(1===(null===(u=p.substring(0,1))||void 0===u?void 0:u.length)&&" "!==(null===(c=p)||void 0===c?void 0:c.substring(0,1))||0===(null===(s=p.substring(0,1))||void 0===s?void 0:s.length))&&(p=" "+p);var h=document.createTextNode(p);a.parentNode.insertBefore(h,a),t=h,0,e.name.length,n=document.createRange(),r=window.getSelection(),n.setStart(t,0),n.collapse(!0),r.removeAllRanges(),r.addRange(n),a.parentNode.removeChild(a)}V(),w([]),setTimeout((function(){b.current&&b.current.focus()}))},P={ref:y,className:"suggestionMainContainer"},U={id:i||"",contentEditable:!0!==m,ref:b,className:c||"editable-div",suppressContentEditableWarning:!0,onKeyDown:function(e){var t,n,r,o,a;"ArrowUp"===e.key?(e.preventDefault(),N((function(e){return-1===e?S.length-1:Math.max(0,e-1)}))):"ArrowDown"===e.key?(e.preventDefault(),N((function(e){return e===S.length-1?0:Math.min(S.length-1,e+1)}))):"Enter"===e.key&&(e.preventDefault(),(t=S[C])?(z(t),N(-1)):f?f():(n=b.current,r=window.getSelection(),o=r.getRangeAt(0),a=document.createElement("br"),o.insertNode(a),o.setStartAfter(a),o.collapse(!0),r.removeAllRanges(),r.addRange(o),n.normalize(),n.focus()))},onInput:function(e){!function(e){if(b.current&&0===b.current.innerText.length)return w([]);V();var t=window.getSelection(),n=t.anchorOffset,r=t.anchorNode.textContent.substring(0,n).trim(),o=function(){if(y.current||b.current){var e=y.current,t=b.current,n=window.getSelection(),r=document.createRange();r.selectNodeContents(t),r.setEnd(n.anchorNode,n.anchorOffset);var o=r.cloneRange();o.collapse(!1);var a=o.getBoundingClientRect(),i=e.getBoundingClientRect(),u=o.getBoundingClientRect().height;return{left:a.left-i.left,top:a.top-i.top+u}}}();R(o);var a=r.split(/ |\u00A0/),i=a[a.length-1];if(0!==i.length){O(i);var u=h.filter((function(e){var t;return null==e||null===(t=e.name)||void 0===t?void 0:t.toLowerCase().startsWith(i.trim().toLowerCase())}));w(u),N(-1)}}()},onPaste:function(e){!function(e){e.preventDefault();var t=e.clipboardData.getData("text/plain");document.execCommand("insertText",!1,t)}(e)}},H={position:"absolute",left:j.left,top:j.top,opacity:Object.entries(S).length>0?1:0,zIndex:100},G=function(e){return{background:C===e?"#D3D3D3":"",cursor:"pointer"}};return t().createElement("div",o({},P,{style:{position:"relative"}}),t().createElement("div",U),M.length>0&&t().createElement("div",{className:"hoverValueContainer"},M),t().createElement("div",{className:s||"suggestionBox",style:H},null==S?void 0:S.map((function(e,n){return function(e,n){return t().createElement("div",o({},function(e,t){return{key:t,className:"listSuggestionContainerForSimpleAutosuggest",onMouseDown:function(){return z(e)},onClick:function(){return z(e)}}}(e,n),{style:G(n)}),t().createElement("div",{className:"listSuggestionTag"}," ",e.name," "),t().createElement("div",{className:"listSuggestionTagContent"}," ",e.content," "))}(e,n)}))))}function l(){return l=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},l.apply(this,arguments)}function c(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,a,i,u=[],l=!0,c=!1;try{if(a=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=a.call(n)).done)&&(u.push(r.value),u.length!==t);l=!0);}catch(e){c=!0,o=e}finally{try{if(!l&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(c)throw o}}return u}}(e,t)||s(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function s(e,t){if(e){if("string"==typeof e)return f(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?f(e,t):void 0}}function f(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function d(n){var r,o=n.id,a=n.suggestion,i=n.chipClass,u=n.editableDivClass,f=n.suggestionBoxClass,d=n.onEnterBtnEvent,p=n.getInputValueWithContext,g=n.setHtml,v=n.setText,m=n.defaultValue,h=n.disable,b=a||[],y=(0,e.useRef)(),x=(0,e.useRef)(),S=c((0,e.useState)({}),2),w=S[0],E=S[1],C=c((0,e.useState)(-1),2),N=C[0],A=C[1],T=c((0,e.useState)(),2),O=T[0],k=T[1],j=c((0,e.useState)({left:0,top:0}),2),R=j[0],D=j[1],M=c((0,e.useState)(""),2),B=M[0],I=M[1],L=c((0,e.useState)(),2),V=L[0],z=L[1];(0,e.useEffect)((function(){y.current&&(y.current.innerHTML=m||"")}),[]),(0,e.useEffect)((function(){var e=i||"chip",t=document.getElementsByClassName(e),n=Array.from(t);n.forEach((function(e){P(e)})),n.forEach((function(e){U(e)}))}),[null==y||null===(r=y.current)||void 0===r?void 0:r.innerText.length]);var P=function(e){e.addEventListener("mouseenter",(function(e){e.target.getAttribute("walkover-attribute")?I(e.target.getAttribute("walkover-attribute")):I("")}))},U=function(e){e.addEventListener("mouseleave",(function(){I("")}))},H=function(){if(y.current){var e=y.current.innerHTML,t=document.createElement("div");t.innerHTML=e,function(e){for(var t=e.length-1;t>=0;t--){var n=e[t];if(n.getAttribute("walkover-attribute")){var r=n.getAttribute("data-attribute")+" ",o=document.createTextNode(r);n.parentNode.replaceChild(o,n)}}}(t.getElementsByTagName("span")),function(e,t){g&&g((function(){return t})),v&&v(e),p&&p(e,t)}(t.innerText,e)}};var G=function(e){if(y.current&&0===y.current.innerText.length)return E([]);H();var t=window.getSelection(),n=t.anchorOffset,r=t.anchorNode.textContent.substring(0,n).trim(),o=function(){if(x.current||y.current){var e=x.current,t=y.current,n=window.getSelection(),r=document.createRange();r.selectNodeContents(t),r.setEnd(n.anchorNode,n.anchorOffset);var o=r.cloneRange();o.collapse(!1);var a=o.getBoundingClientRect(),i=e.getBoundingClientRect(),u=o.getBoundingClientRect().height;return{left:a.left-i.left,top:a.top-i.top+u}}}();D(o);var a=r.split(/ |\u00A0/),i=a[a.length-1];if(0!==i.length){k(i);var u=function(e,t){var n,r={},o=function(e,t){var n="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!n){if(Array.isArray(e)||(n=s(e))){n&&(e=n);var r=0,o=function(){};return{s:o,n:function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}},e:function(e){throw e},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var a,i=!0,u=!1;return{s:function(){n=n.call(e)},n:function(){var e=n.next();return i=e.done,e},e:function(e){u=!0,a=e},f:function(){try{i||null==n.return||n.return()}finally{if(u)throw a}}}}(e);try{for(o.s();!(n=o.n()).done;){var a=n.value;a.name.toLowerCase().includes(t)&&(r[a.groupName]||(r[a.groupName]=[]),r[a.groupName].push(a))}}catch(e){o.e(e)}finally{o.f()}return r}(b,i.trim().toLowerCase());E(u),A(-1)}},F=function(e){var t,n,r,o=window.getSelection(),a=o.anchorNode,u=o.anchorOffset;if(a&&a.nodeType===Node.TEXT_NODE){var l,c,s,f=document.createElement("span");f.className=i||"chip",f.contentEditable="false",f.textContent=e.name,f.setAttribute("walkover-attribute",e.content),f.setAttribute("data-attribute",e.content);var d=a.nodeValue.substring(0,u),p=a.nodeValue.substring(u,a.nodeValue.length),g=d.lastIndexOf(O),v=a.nodeValue.substring(0,g),m=document.createTextNode(v);a.parentNode.insertBefore(m,a),a.parentNode.insertBefore(f,a),(1===(null===(l=p.substring(0,1))||void 0===l?void 0:l.length)&&" "!==(null===(c=p)||void 0===c?void 0:c.substring(0,1))||0===(null===(s=p.substring(0,1))||void 0===s?void 0:s.length))&&(p=" "+p);var h=document.createTextNode(p);a.parentNode.insertBefore(h,a),t=h,0,e.name.length,n=document.createRange(),r=window.getSelection(),n.setStart(t,0),n.collapse(!0),r.removeAllRanges(),r.addRange(n),a.parentNode.removeChild(a)}H(),E([]),setTimeout((function(){y.current&&y.current.focus()}))},_={ref:x,className:"suggestionMainContainer"},W={id:o||"",contentEditable:!0!==h,ref:y,className:u||"editable-div",suppressContentEditableWarning:!0,onKeyDown:function(e){"ArrowUp"===e.key?function(){var e=Object.keys(w),t=e.length-1;if(-1===N){var n=e[t],r=w[n];return z({key:n,index:t}),void A(r.length-1)}if(0===N){var o=V.index-1,a=e[o]||e[t],i=w[a];z({key:a,index:o}),A(i.length-1)}else A((function(e){return e-1}))}():"ArrowDown"===e.key?function(){if(-1==N){var e=Object.keys(w)[0];z({key:e,index:0}),A(0)}else{var t=w[null==V?void 0:V.key];if((null==t?void 0:t.length)-1===N){var n=V.index+1,r=Object.keys(w)[n];r||(r=Object.keys(w)[0],n=0),z({key:r,index:n}),A(0)}else A((function(e){return e+1}))}}():"Enter"===e.key&&(e.preventDefault(),function(){if(0!=Object.keys(w).length&&-1!=N){var e=w[V.key][N];e&&(F(e),A(-1))}else d?d():(t=y.current,n=window.getSelection(),r=n.getRangeAt(0),o=document.createElement("br"),r.insertNode(o),r.setStartAfter(o),r.collapse(!0),n.removeAllRanges(),n.addRange(r),t.normalize(),t.focus());var t,n,r,o}())},onInput:function(e){G()},onPaste:function(e){!function(e){e.preventDefault();var t=e.clipboardData.getData("text/plain");document.execCommand("insertText",!1,t)}(e)}},Z={position:"absolute",left:R.left,top:R.top,opacity:Object.entries(w).length>0?1:0,zIndex:100},q=function(e,t){return{key:t,className:"listSuggestionContainer",onMouseDown:function(){return F(e)},onClick:function(){return F(e)}}},K=function(e,t){return{background:N===e&&t==V.key?"#D3D3D3":"",cursor:"pointer"}};return t().createElement("div",l({},_,{style:{position:"relative"}}),t().createElement("div",W),B.length>0&&t().createElement("div",{className:"hoverValueContainer"},B),t().createElement("div",{className:f||"suggestionBox",style:Z},Object.entries(w).map((function(e){var n=c(e,2);return function(e,n){return t().createElement("div",{className:"groupBlock",key:e},t().createElement("div",{className:"ulTag"},e),function(e,n){return e.map((function(e,r){return t().createElement("div",l({},q(e,r),{style:K(r,n)}),t().createElement("span",{className:"listSuggestions"},e.name),t().createElement("span",{className:"valueContent"},e.content))}))}(n,e))}(n[0],n[1])}))))}var p=n(379),g=n.n(p),v=n(795),m=n.n(v),h=n(569),b=n.n(h),y=n(565),x=n.n(y),S=n(216),w=n.n(S),E=n(589),C=n.n(E),N=n(649),A={};A.styleTagTransform=C(),A.setAttributes=x(),A.insert=b().bind(null,"head"),A.domAPI=m(),A.insertStyleElement=w(),g()(N.Z,A),N.Z&&N.Z.locals&&N.Z.locals;var T=function(e){return null!=e&&e.groupByGroupName?t().createElement(d,e):t().createElement(u,e)}}(),module.exports=r}(); | ||
| !function(){"use strict";var e={649:function(e,t,n){var r=n(81),o=n.n(r),i=n(645),a=n.n(i)()(o());a.push([e.id,"/* COMMON CLASSES FOR BOTH GROUPED AND SIMPLE AUTOSUGGEST */\r\n.suggestionBox::-webkit-scrollbar {\r\n display: none;\r\n}\r\n\r\n.editable-div::-webkit-scrollbar {\r\n display: none;\r\n}\r\n\r\n.suggestionBox {\r\n display: absolute;\r\n width: auto;\r\n border: 1px solid #ccc;\r\n background-color: #f9f9f9;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n max-height: 70vh;\r\n height: auto;\r\n overflow: auto;\r\n}\r\n\r\n.editable-div {\r\n border: 1px solid #ccc;\r\n width: 300px;\r\n height: 100px;\r\n font-family: Arial, sans-serif;\r\n font-size: 16px;\r\n border-radius: 0px;\r\n margin-bottom: 2px;\r\n padding-left: 5px;\r\n overflow: scroll;\r\n}\r\n\r\n.chip {\r\n display: inline-block;\r\n padding: 5px 10px;\r\n margin: 5px;\r\n background-color: #f1f1f1;\r\n border-radius: 20px;\r\n font-family: Arial, sans-serif;\r\n font-size: 14px;\r\n color: #555;\r\n}\r\n\r\n.suggestionMainContainer {\r\n width: 100%;\r\n height: 100%;\r\n}\r\n\r\n.hoverValueContainer {\r\n min-width: 100px !important;\r\n max-width: 200px !important;\r\n padding: 10px !important;\r\n word-wrap: break-word;\r\n color: white;\r\n background-color: rgb(31, 32, 30);\r\n font-size: 14px !important;\r\n border-radius: 5px;\r\n z-index: 30;\r\n min-height: 20px !important;\r\n max-height: fit-content !important;\r\n}\r\n\r\n.hoverValueContainer::-webkit-scrollbar {\r\n display: none !important;\r\n}\r\n\r\n/* SIMPLE AUTO-SUGGESTIONS CLASSES */\r\n.listSuggestionContainerForSimpleAutosuggest {\r\n list-style-type: none;\r\n font-size: 16px;\r\n padding: 5px;\r\n}\r\n\r\n.listSuggestionContainerForSimpleAutosuggest:hover {\r\n background-color: rgb(128, 128, 128, 0.5);\r\n}\r\n\r\n.listSuggestionTag{\r\n font-size: 16px !important;\r\n}\r\n\r\n.listSuggestionTagContent{\r\n font-size: 12px !important;\r\n}\r\n\r\n/* GROUPED SUGGESTIONS CLASSES */\r\n.listSuggestions {\r\n list-style-type: none;\r\n font-size: 16px !important;\r\n padding: 0px 0px 0px 17px;\r\n}\r\n\r\n.valueContent {\r\n font-size: 12px !important;\r\n list-style-type: none;\r\n margin: 0px 0px 0px 17px;\r\n}\r\n\r\n.ulTag {\r\n font-size: 21px !important;\r\n padding: 5px;\r\n background-color: black;\r\n color: white;\r\n width: 100% !important;\r\n}\r\n\r\n.listSuggestionContainer {\r\n display: flex;\r\n flex-direction: column;\r\n padding: 5px;\r\n}\r\n\r\n.listSuggestionContainer:hover {\r\n background-color: rgb(128, 128, 128, 0.5);\r\n}",""]),t.Z=a},645:function(e){e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n="",r=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),r&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),r&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n})).join("")},t.i=function(e,n,r,o,i){"string"==typeof e&&(e=[[null,e,void 0]]);var a={};if(r)for(var u=0;u<this.length;u++){var c=this[u][0];null!=c&&(a[c]=!0)}for(var l=0;l<e.length;l++){var s=[].concat(e[l]);r&&a[s[0]]||(void 0!==i&&(void 0===s[5]||(s[1]="@layer".concat(s[5].length>0?" ".concat(s[5]):""," {").concat(s[1],"}")),s[5]=i),n&&(s[2]?(s[1]="@media ".concat(s[2]," {").concat(s[1],"}"),s[2]=n):s[2]=n),o&&(s[4]?(s[1]="@supports (".concat(s[4],") {").concat(s[1],"}"),s[4]=o):s[4]="".concat(o)),t.push(s))}},t}},81:function(e){e.exports=function(e){return e[1]}},379:function(e){var t=[];function n(e){for(var n=-1,r=0;r<t.length;r++)if(t[r].identifier===e){n=r;break}return n}function r(e,r){for(var i={},a=[],u=0;u<e.length;u++){var c=e[u],l=r.base?c[0]+r.base:c[0],s=i[l]||0,f="".concat(l," ").concat(s);i[l]=s+1;var d=n(f),p={css:c[1],media:c[2],sourceMap:c[3],supports:c[4],layer:c[5]};if(-1!==d)t[d].references++,t[d].updater(p);else{var g=o(p,r);r.byIndex=u,t.splice(u,0,{identifier:f,updater:g,references:1})}a.push(f)}return a}function o(e,t){var n=t.domAPI(t);return n.update(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap&&t.supports===e.supports&&t.layer===e.layer)return;n.update(e=t)}else n.remove()}}e.exports=function(e,o){var i=r(e=e||[],o=o||{});return function(e){e=e||[];for(var a=0;a<i.length;a++){var u=n(i[a]);t[u].references--}for(var c=r(e,o),l=0;l<i.length;l++){var s=n(i[l]);0===t[s].references&&(t[s].updater(),t.splice(s,1))}i=c}}},569:function(e){var t={};e.exports=function(e,n){var r=function(e){if(void 0===t[e]){var n=document.querySelector(e);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}t[e]=n}return t[e]}(e);if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(n)}},216:function(e){e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},565:function(e,t,n){e.exports=function(e){var t=n.nc;t&&e.setAttribute("nonce",t)}},795:function(e){e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=e.insertStyleElement(e);return{update:function(n){!function(e,t,n){var r="";n.supports&&(r+="@supports (".concat(n.supports,") {")),n.media&&(r+="@media ".concat(n.media," {"));var o=void 0!==n.layer;o&&(r+="@layer".concat(n.layer.length>0?" ".concat(n.layer):""," {")),r+=n.css,o&&(r+="}"),n.media&&(r+="}"),n.supports&&(r+="}");var i=n.sourceMap;i&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),t.styleTagTransform(r,e,t.options)}(t,e,n)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)}}}},589:function(e){e.exports=function(e,t){if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}}},t={};function n(r){var o=t[r];if(void 0!==o)return o.exports;var i=t[r]={id:r,exports:{}};return e[r](i,i.exports,n),i.exports}n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.d=function(e,t){for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.nc=void 0;var r={};!function(){n.r(r),n.d(r,{default:function(){return A}});var e=require("react"),t=n.n(e);function o(){return o=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},o.apply(this,arguments)}function i(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i,a,u=[],c=!0,l=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=i.call(n)).done)&&(u.push(r.value),u.length!==t);c=!0);}catch(e){l=!0,o=e}finally{try{if(!c&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(l)throw o}}return u}}(e,t)||function(e,t){if(e){if("string"==typeof e)return a(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?a(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function a(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function u(n){var r,a=n.id,u=n.editableDivRef,c=n.suggestion,l=n.chipClass,s=n.editableDivClass,f=n.suggestionBoxClass,d=n.onEnterBtnEvent,p=n.getInputValueWithContext,g=n.setHtml,v=n.setText,m=n.defaultValue,b=n.disable,h=n.valueContainerPosition,y=c||[],x=(0,e.useRef)(),S=(0,e.useRef)(),w=i((0,e.useState)([]),2),E=w[0],C=w[1],N=i((0,e.useState)(-1),2),T=N[0],A=N[1],O=i((0,e.useState)(),2),k=O[0],R=O[1],D=i((0,e.useState)({left:0,top:0}),2),j=D[0],M=D[1],B=i((0,e.useState)(""),2),I=B[0],L=B[1];(0,e.useEffect)((function(){u.current&&(u.current.innerHTML=m||"")}),[u]),(0,e.useEffect)((function(){var e=l||"chip",t=document.getElementsByClassName(e),n=Array.from(t);n.forEach((function(e){P(e)})),n.forEach((function(e){V(e)}))}),[null==u||null===(r=u.current)||void 0===r?void 0:r.innerText.length,l]);var P=function(e){e.addEventListener("mouseenter",(function(e){e.target.getAttribute("walkover-attribute")?L(e.target.getAttribute("walkover-attribute")):L("")}))},V=function(e){e.addEventListener("mouseleave",(function(){L("")}))},z=function(){if(u.current){var e=u.current.innerHTML,t=document.createElement("div");t.innerHTML=e,function(e){for(var t=e.length-1;t>=0;t--){var n=e[t];if(n.getAttribute("walkover-attribute")){var r=n.getAttribute("data-attribute")+" ",o=document.createTextNode(r);n.parentNode.replaceChild(o,n)}}}(t.getElementsByTagName("span")),function(e,t){g&&g((function(){return t})),v&&v(e),p&&p(e,t)}(t.innerText,e)}},H=function(e){var t,n,r,o=window.getSelection(),i=o.anchorNode,a=o.anchorOffset;if(i&&i.nodeType===Node.TEXT_NODE){var c,s,f,d=document.createElement("span");d.className=l||"chip",d.contentEditable="false",d.textContent=e.name,d.setAttribute("walkover-attribute",e.content),d.setAttribute("data-attribute",e.content);var p=i.nodeValue.substring(0,a),g=i.nodeValue.substring(a,i.nodeValue.length),v=p.lastIndexOf(k),m=i.nodeValue.substring(0,v),b=document.createTextNode(m);i.parentNode.insertBefore(b,i),i.parentNode.insertBefore(d,i),(1===(null===(c=g.substring(0,1))||void 0===c?void 0:c.length)&&" "!==(null===(s=g)||void 0===s?void 0:s.substring(0,1))||0===(null===(f=g.substring(0,1))||void 0===f?void 0:f.length))&&(g=" "+g);var h=document.createTextNode(g);i.parentNode.insertBefore(h,i),t=h,0,e.name.length,n=document.createRange(),r=window.getSelection(),n.setStart(t,0),n.collapse(!0),r.removeAllRanges(),r.addRange(n),i.parentNode.removeChild(i)}z(),C([]),setTimeout((function(){u.current&&u.current.focus()}))},U={ref:S,className:"suggestionMainContainer"},G={id:a||"",contentEditable:!0!==b,ref:u,className:s||"editable-div",suppressContentEditableWarning:!0,onKeyDown:function(e){var t,n,r,o,i;"ArrowUp"===e.key?(e.preventDefault(),A((function(e){return-1===e?E.length-1:Math.max(0,e-1)}))):"ArrowDown"===e.key?(e.preventDefault(),A((function(e){return e===E.length-1?0:Math.min(E.length-1,e+1)}))):"Enter"===e.key&&(e.preventDefault(),(t=E[T])?(H(t),A(-1)):d?d():(n=u.current,r=window.getSelection(),o=r.getRangeAt(0),i=document.createElement("br"),o.insertNode(i),o.setStartAfter(i),o.collapse(!0),r.removeAllRanges(),r.addRange(o),n.normalize(),n.focus()))},onInput:function(e){!function(e){if(u.current&&0===u.current.innerText.length)return C([]);z();var t=window.getSelection(),n=t.anchorOffset,r=t.anchorNode.textContent.substring(0,n).trim(),o=function(){if(S.current||u.current){var e=S.current,t=u.current,n=window.getSelection(),r=document.createRange();r.selectNodeContents(t),r.setEnd(n.anchorNode,n.anchorOffset);var o=r.cloneRange();o.collapse(!1);var i=o.getBoundingClientRect(),a=e.getBoundingClientRect(),c=o.getBoundingClientRect().height;return{left:i.left-a.left,top:i.top-a.top+c}}}();M(o);var i=r.split(/ |\u00A0/),a=i[i.length-1];if(0!==a.length){R(a);var c=y.filter((function(e){var t;return null==e||null===(t=e.name)||void 0===t?void 0:t.toLowerCase().startsWith(a.trim().toLowerCase())}));C(c),A(-1)}}()},onPaste:function(e){!function(e){e.preventDefault();var t=e.clipboardData.getData("text/plain");document.execCommand("insertText",!1,t)}(e)}},F={position:"absolute",left:j.left,top:j.top,opacity:Object.entries(E).length>0?1:0,zIndex:100},_=function(e){return{background:T===e?"#D3D3D3":"",cursor:"pointer"}};return t().createElement("div",o({},U,{style:{position:"relative"}}),t().createElement("div",G),I.length>0&&t().createElement("div",{ref:x,style:function(){switch(h){case"top":return{position:"absolute",top:void setTimeout((function(){if(x.current)return"-".concat(x.current.offsetHeight,"px")}))};case"bottom":return{position:"absolute",bottom:"100%",top:"100%"};case"left":return{position:"absolute",right:"100%",top:"0px"};case"right":return{position:"absolute",left:"100%",top:"0px"}}}(),className:"hoverValueContainer"},I),t().createElement("div",{className:f||"suggestionBox",style:F},null==E?void 0:E.map((function(e,n){return function(e,n){return t().createElement("div",o({},function(e,t){return{key:t,className:"listSuggestionContainerForSimpleAutosuggest",onMouseDown:function(){return H(e)},onClick:function(){return H(e)}}}(e,n),{style:_(n)}),t().createElement("div",{className:"listSuggestionTag"}," ",e.name," "),t().createElement("div",{className:"listSuggestionTagContent"}," ",e.content," "))}(e,n)}))))}function c(){return c=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},c.apply(this,arguments)}function l(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i,a,u=[],c=!0,l=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=i.call(n)).done)&&(u.push(r.value),u.length!==t);c=!0);}catch(e){l=!0,o=e}finally{try{if(!c&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(l)throw o}}return u}}(e,t)||s(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function s(e,t){if(e){if("string"==typeof e)return f(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?f(e,t):void 0}}function f(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function d(n){var r,o=n.id,i=n.editableDivRef,a=n.suggestion,u=n.chipClass,f=n.editableDivClass,d=n.suggestionBoxClass,p=n.onEnterBtnEvent,g=n.getInputValueWithContext,v=n.setHtml,m=n.setText,b=n.defaultValue,h=n.disable,y=n.valueContainerPosition,x=a||[],S=(0,e.useRef)(),w=(0,e.useRef)(),E=l((0,e.useState)({}),2),C=E[0],N=E[1],T=l((0,e.useState)(-1),2),A=T[0],O=T[1],k=l((0,e.useState)(),2),R=k[0],D=k[1],j=l((0,e.useState)({left:0,top:0}),2),M=j[0],B=j[1],I=l((0,e.useState)(""),2),L=I[0],P=I[1],V=l((0,e.useState)(),2),z=V[0],H=V[1];(0,e.useEffect)((function(){i.current&&(i.current.innerHTML=b||"")}),[i]),(0,e.useEffect)((function(){var e=u||"chip",t=document.getElementsByClassName(e),n=Array.from(t);n.forEach((function(e){U(e)})),n.forEach((function(e){G(e)}))}),[null==i||null===(r=i.current)||void 0===r?void 0:r.innerText.length,u]);var U=function(e){e.addEventListener("mouseenter",(function(e){e.target.getAttribute("walkover-attribute")?P(e.target.getAttribute("walkover-attribute")):P("")}))},G=function(e){e.addEventListener("mouseleave",(function(){P("")}))},F=function(){if(i.current){var e=i.current.innerHTML,t=document.createElement("div");t.innerHTML=e,function(e){for(var t=e.length-1;t>=0;t--){var n=e[t];if(n.getAttribute("walkover-attribute")){var r=n.getAttribute("data-attribute")+" ",o=document.createTextNode(r);n.parentNode.replaceChild(o,n)}}}(t.getElementsByTagName("span")),function(e,t){v&&v((function(){return t})),m&&m(e),g&&g(e,t)}(t.innerText,e)}};var _=function(e){if(i.current&&0===i.current.innerText.length)return N([]);F();var t=window.getSelection(),n=t.anchorOffset,r=t.anchorNode.textContent.substring(0,n).trim(),o=function(){if(w.current||i.current){var e=w.current,t=i.current,n=window.getSelection(),r=document.createRange();r.selectNodeContents(t),r.setEnd(n.anchorNode,n.anchorOffset);var o=r.cloneRange();o.collapse(!1);var a=o.getBoundingClientRect(),u=e.getBoundingClientRect(),c=o.getBoundingClientRect().height;return{left:a.left-u.left,top:a.top-u.top+c}}}();B(o);var a=r.split(/ |\u00A0/),u=a[a.length-1];if(0!==u.length){D(u);var c=function(e,t){var n,r={},o=function(e,t){var n="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!n){if(Array.isArray(e)||(n=s(e))){n&&(e=n);var r=0,o=function(){};return{s:o,n:function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}},e:function(e){throw e},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var i,a=!0,u=!1;return{s:function(){n=n.call(e)},n:function(){var e=n.next();return a=e.done,e},e:function(e){u=!0,i=e},f:function(){try{a||null==n.return||n.return()}finally{if(u)throw i}}}}(e);try{for(o.s();!(n=o.n()).done;){var i=n.value;i.name.toLowerCase().includes(t)&&(r[i.groupName]||(r[i.groupName]=[]),r[i.groupName].push(i))}}catch(e){o.e(e)}finally{o.f()}return r}(x,u.trim().toLowerCase());N(c),O(-1)}},W=function(e){var t,n,r,o=window.getSelection(),a=o.anchorNode,c=o.anchorOffset;if(a&&a.nodeType===Node.TEXT_NODE){var l,s,f,d=document.createElement("span");d.className=u||"chip",d.contentEditable="false",d.textContent=e.name,d.setAttribute("walkover-attribute",e.content),d.setAttribute("data-attribute",e.content);var p=a.nodeValue.substring(0,c),g=a.nodeValue.substring(c,a.nodeValue.length),v=p.lastIndexOf(R),m=a.nodeValue.substring(0,v),b=document.createTextNode(m);a.parentNode.insertBefore(b,a),a.parentNode.insertBefore(d,a),(1===(null===(l=g.substring(0,1))||void 0===l?void 0:l.length)&&" "!==(null===(s=g)||void 0===s?void 0:s.substring(0,1))||0===(null===(f=g.substring(0,1))||void 0===f?void 0:f.length))&&(g=" "+g);var h=document.createTextNode(g);a.parentNode.insertBefore(h,a),t=h,0,e.name.length,n=document.createRange(),r=window.getSelection(),n.setStart(t,0),n.collapse(!0),r.removeAllRanges(),r.addRange(n),a.parentNode.removeChild(a)}F(),N([]),setTimeout((function(){i.current&&i.current.focus()}))},Z={ref:w,className:"suggestionMainContainer"},q={id:o||"",contentEditable:!0!==h,ref:i,className:f||"editable-div",suppressContentEditableWarning:!0,onKeyDown:function(e){"ArrowUp"===e.key?function(){var e=Object.keys(C),t=e.length-1;if(-1===A){var n=e[t],r=C[n];return H({key:n,index:t}),void O(r.length-1)}if(0===A){var o=z.index-1,i=e[o]||e[t],a=C[i];H({key:i,index:o}),O(a.length-1)}else O((function(e){return e-1}))}():"ArrowDown"===e.key?function(){if(-1===A){var e=Object.keys(C)[0];H({key:e,index:0}),O(0)}else{var t=C[null==z?void 0:z.key];if((null==t?void 0:t.length)-1===A){var n=z.index+1,r=Object.keys(C)[n];r||(r=Object.keys(C)[0],n=0),H({key:r,index:n}),O(0)}else O((function(e){return e+1}))}}():"Enter"===e.key&&(e.preventDefault(),function(){if(0!==Object.keys(C).length&&-1!==A){var e=C[z.key][A];e&&(W(e),O(-1))}else p?p():(t=i.current,n=window.getSelection(),r=n.getRangeAt(0),o=document.createElement("br"),r.insertNode(o),r.setStartAfter(o),r.collapse(!0),n.removeAllRanges(),n.addRange(r),t.normalize(),t.focus());var t,n,r,o}())},onInput:function(e){_()},onPaste:function(e){!function(e){e.preventDefault();var t=e.clipboardData.getData("text/plain");document.execCommand("insertText",!1,t)}(e)}},K={position:"absolute",left:M.left,top:M.top,opacity:Object.entries(C).length>0?1:0,zIndex:100},X=function(e,t){return{key:t,className:"listSuggestionContainer",onMouseDown:function(){return W(e)},onClick:function(){return W(e)}}},$=function(e,t){return{background:A===e&&t===z.key?"#D3D3D3":"",cursor:"pointer"}};return t().createElement("div",c({},Z,{style:{position:"relative"}}),t().createElement("div",q),L.length>0&&t().createElement("div",{ref:S,style:function(){switch(y){case"top":return{position:"absolute",top:void setTimeout((function(){if(S.current)return"-".concat(S.current.offsetHeight,"px")}))};case"bottom":return{position:"absolute",bottom:"100%",top:"100%"};case"left":return{position:"absolute",right:"100%",top:"0px"};case"right":return{position:"absolute",left:"100%",top:"0px"}}}(),className:"hoverValueContainer"},L),t().createElement("div",{className:d||"suggestionBox",style:K},Object.entries(C).map((function(e){var n=l(e,2);return function(e,n){return t().createElement("div",{className:"groupBlock",key:e},t().createElement("div",{className:"ulTag"},e),function(e,n){return e.map((function(e,r){return t().createElement("div",c({},X(e,r),{style:$(r,n)}),t().createElement("span",{className:"listSuggestions"},e.name),t().createElement("span",{className:"valueContent"},e.content))}))}(n,e))}(n[0],n[1])}))))}var p=n(379),g=n.n(p),v=n(795),m=n.n(v),b=n(569),h=n.n(b),y=n(565),x=n.n(y),S=n(216),w=n.n(S),E=n(589),C=n.n(E),N=n(649),T={};T.styleTagTransform=C(),T.setAttributes=x(),T.insert=h().bind(null,"head"),T.domAPI=m(),T.insertStyleElement=w(),g()(N.Z,T),N.Z&&N.Z.locals&&N.Z.locals;var A=function(e){return null!=e&&e.groupByGroupName?t().createElement(d,e):t().createElement(u,e)}}(),module.exports=r}(); |
| { | ||
| "name": "@walkover/autosuggest-custom", | ||
| "version": "0.3.2", | ||
| "version": "0.3.3", | ||
| "author": "walkover-web", | ||
@@ -5,0 +5,0 @@ "main": "build/index.js", |
@@ -30,2 +30,3 @@ ## CustomAutoSuggest | ||
| id={'editableDivid'} | ||
| editableDivRef={editableDivRef} | ||
| suggestion={suggestions} | ||
@@ -53,2 +54,4 @@ chipClass="chip" | ||
| - editableDivRef (Required) : Editable-Div reference which is mandatory to pass in props. | ||
| - chipClass (optional): CSS class name for the suggestion chips. Defaults to 'chip'. | ||
@@ -92,3 +95,5 @@ | ||
| const [text, setText] = useState(""); | ||
| const editableDivRef = useRef(); | ||
| const getInputValueWithContext = (convertedHtmlCode, htmlCode) => { | ||
@@ -110,2 +115,3 @@ // Handle the converted input value and HTML code | ||
| <CustomAutoSuggest | ||
| editableDivRef={editableDivRef} | ||
| id={'editableDivid'} | ||
@@ -145,2 +151,3 @@ suggestion={suggestionWithGroups} | ||
| const [text, setText] = useState(""); | ||
| const editableDivRef = useRef(); | ||
@@ -231,2 +238,3 @@ const suggestionWithGroups = [ | ||
| <CustomAutoSuggest | ||
| editableDivRef={editableDivRef} | ||
| id={'editableDivid'} | ||
@@ -233,0 +241,0 @@ suggestion={suggestionWithGroups} |
| import React, { useState, useEffect, useRef } from 'react' | ||
| export default function GroupedSuggestion({ id, suggestion, chipClass, editableDivClass, suggestionBoxClass, onEnterBtnEvent, getInputValueWithContext, setHtml, setText, defaultValue, disable }) { | ||
| export default function GroupedSuggestion({ id, editableDivRef, suggestion, chipClass, editableDivClass, suggestionBoxClass, onEnterBtnEvent, getInputValueWithContext, setHtml, setText, defaultValue, disable, valueContainerPosition }) { | ||
| let suggestions = suggestion || []; | ||
| const editableDivRef = useRef(); | ||
| const hoverContainerRef = useRef(); | ||
| const parentDivRef = useRef(); | ||
@@ -19,3 +18,3 @@ const [filteredSuggestions, setFilteredSuggestions] = useState({}); | ||
| editableDivRef.current.innerHTML = defaultValue || ""; | ||
| }, []) | ||
| }, [editableDivRef]) | ||
@@ -28,3 +27,3 @@ useEffect(() => { | ||
| elementsArray.forEach(function (element) { addingMouseEventLeave(element) }); | ||
| }, [editableDivRef?.current?.innerText.length]); | ||
| }, [editableDivRef?.current?.innerText.length, chipClass]); | ||
@@ -64,3 +63,3 @@ const addingMouseEventEnter = (element) => { | ||
| const functionForArrowDownPress = () => { | ||
| if (selectedSuggestionIndex == -1) { | ||
| if (selectedSuggestionIndex === -1) { | ||
| const firstKey = Object.keys(filteredSuggestions)[0]; | ||
@@ -87,3 +86,3 @@ setCurrentGroupDetails({ key: firstKey, index: 0 }); | ||
| const functionForEnterPress = () => { | ||
| if (Object.keys(filteredSuggestions).length != 0 && selectedSuggestionIndex != -1) { | ||
| if (Object.keys(filteredSuggestions).length !== 0 && selectedSuggestionIndex !== -1) { | ||
| let suggestionObject = filteredSuggestions[currentGroupDetails.key][selectedSuggestionIndex]; | ||
@@ -311,3 +310,3 @@ if (suggestionObject) { | ||
| return { | ||
| background: selectedSuggestionIndex === index && parentkey == currentGroupDetails.key ? '#D3D3D3' : '', | ||
| background: selectedSuggestionIndex === index && parentkey === currentGroupDetails.key ? '#D3D3D3' : '', | ||
| cursor: 'pointer' | ||
@@ -317,6 +316,22 @@ } | ||
| const getHeightofHoverContainer = () => { | ||
| setTimeout(() => { | ||
| if (hoverContainerRef.current) return `-${hoverContainerRef.current.offsetHeight}px`; | ||
| },); | ||
| } | ||
| const returnStyleForHoverValueComponent = () => { | ||
| switch (valueContainerPosition) { | ||
| case "top": return { position: "absolute", top: getHeightofHoverContainer() } | ||
| case "bottom": return { position: "absolute", bottom: "100%", top: "100%", } | ||
| case "left": return { position: "absolute", right: "100%", top: '0px', } | ||
| case "right": return { position: "absolute", left: "100%", top: "0px", } | ||
| default: break; | ||
| } | ||
| } | ||
| return ( | ||
| <div {...parentDivProps} style={styleForParentDiv}> | ||
| <div {...editableDivProps} /> | ||
| {hoverValue.length > 0 && <div className='hoverValueContainer'>{hoverValue}</div>} | ||
| {hoverValue.length > 0 && <div ref={hoverContainerRef} style={returnStyleForHoverValueComponent()} className='hoverValueContainer'>{hoverValue}</div>} | ||
| <div className={suggestionBoxClass || 'suggestionBox'} style={styleForSuggestionBox}> | ||
@@ -323,0 +338,0 @@ {Object.entries(filteredSuggestions).map(([key, groupSugesstionArray]) => renderGroups(key, groupSugesstionArray))} |
| import React, { useState, useRef, useEffect } from 'react'; | ||
| export default function SimpleAutoSuggest({ id, suggestion, chipClass, editableDivClass, suggestionBoxClass, onEnterBtnEvent, getInputValueWithContext, setHtml, setText, defaultValue, disable }) { | ||
| export default function SimpleAutoSuggest({ id, editableDivRef, suggestion, chipClass, editableDivClass, suggestionBoxClass, onEnterBtnEvent, getInputValueWithContext, setHtml, setText, defaultValue, disable, valueContainerPosition }) { | ||
| let suggestions = suggestion || []; | ||
| const editableDivRef = useRef(); | ||
| const hoverContainerRef = useRef(); | ||
| const parentDivRef = useRef(); | ||
@@ -17,3 +17,3 @@ const [filteredSuggestions, setFilteredSuggestions] = useState([]); | ||
| editableDivRef.current.innerHTML = defaultValue || ""; | ||
| }, []) | ||
| }, [editableDivRef]) | ||
@@ -26,3 +26,3 @@ useEffect(() => { | ||
| elementsArray.forEach(function (element) { addingMouseEventLeave(element) }); | ||
| }, [editableDivRef?.current?.innerText.length]); | ||
| }, [editableDivRef?.current?.innerText.length, chipClass]); | ||
@@ -261,6 +261,24 @@ const addingMouseEventEnter = (element) => { | ||
| const getHeightofHoverContainer = () => { | ||
| setTimeout(() => { | ||
| if (hoverContainerRef.current) return `-${hoverContainerRef.current.offsetHeight}px`; | ||
| },); | ||
| } | ||
| const returnStyleForHoverValueComponent = () => { | ||
| switch (valueContainerPosition) { | ||
| case "top": return { position: "absolute", top: getHeightofHoverContainer() } | ||
| case "bottom": return { position: "absolute", bottom: "100%", top: "100%", } | ||
| case "left": return { position: "absolute", right: "100%", top: '0px', } | ||
| case "right": return { position: "absolute", left: "100%", top: "0px", } | ||
| default: break; | ||
| } | ||
| } | ||
| return ( | ||
| <div {...parentDivProps} style={styleForParentDiv}> | ||
| <div {...editableDivProps} /> | ||
| {hoverValue.length > 0 && <div className='hoverValueContainer'>{hoverValue}</div>} | ||
| { | ||
| hoverValue.length > 0 && | ||
| <div ref={hoverContainerRef} style={returnStyleForHoverValueComponent()} className='hoverValueContainer'>{hoverValue}</div>} | ||
| <div className={suggestionBoxClass || 'suggestionBox'} style={styleForSuggestionBox}> | ||
@@ -267,0 +285,0 @@ {filteredSuggestions?.map((suggestion, index) => (renderSuggestions(suggestion, index)))} |
Sorry, the diff of this file is not supported yet
New alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Fixed alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by3.66%
83325
- Lines of code
- increased by4.64%
722
- Number of lines in readme file
- increased by3.2%
258
No dependency changes