slick-table 1.1.41 → 1.1.43

package/dist/index.cjs.js

@@ -348,7 +348,7 @@ return o.version="2.30.1",r(Mt),o.fn=ye,o.min=Jw,o.max=eC,o.now=tC,o.utc=b,o.uni
 Expecting `+ce.join(", ")+", got '"+(this.terminals_[B]||B)+"'":le="Parse error on line "+($+1)+": Unexpected "+(B==q?"end of input":"'"+(this.terminals_[B]||B)+"'"),this.parseError(le,{text:H.match,token:this.terminals_[B]||B,line:H.yylineno,loc:A,expected:ce})}if(oe[0]instanceof Array&&oe.length>1)throw new Error("Parse Error: multiple actions possible at state: "+ne+", token: "+B);switch(oe[0]){case 1:O.push(B),N.push(H.yytext),F.push(H.yylloc),O.push(oe[1]),B=null,K=H.yyleng,R=H.yytext,$=H.yylineno,A=H.yylloc;break;case 2:if(J=this.productions_[oe[1]][1],j.$=N[N.length-J],j._$={first_line:F[F.length-(J||1)].first_line,last_line:F[F.length-1].last_line,first_column:F[F.length-(J||1)].first_column,last_column:F[F.length-1].last_column},M&&(j._$.range=[F[F.length-(J||1)].range[0],F[F.length-1].range[1]]),se=this.performAction.apply(j,[R,K,$,ae.yy,oe[1],N,F].concat(Y)),typeof se<"u")return se;J&&(O=O.slice(0,-1*J*2),N=N.slice(0,-1*J),F=F.slice(0,-1*J)),O.push(this.productions_[oe[1]][0]),N.push(j.$),F.push(j._$),te=z[O[O.length-2]][O[O.length-1]],O.push(te);break;case 3:return!0}}return!0}},P=function(){return{EOF:1,parseError:function(C,O){if(this.yy.parser)this.yy.parser.parseError(C,O);else throw new Error(C)},setInput:function(S,C){return this.yy=C||this.yy||{},this._input=S,this._more=this._backtrack=this.done=!1,this.yylineno=this.yyleng=0,this.yytext=this.matched=this.match="",this.conditionStack=["INITIAL"],this.yylloc={first_line:1,first_column:0,last_line:1,last_column:0},this.options.ranges&&(this.yylloc.range=[0,0]),this.offset=0,this},input:function(){const S=this._input[0];return this.yytext+=S,this.yyleng++,this.offset++,this.match+=S,this.matched+=S,S.match(/(?:\r\n?|\n).*/g)?(this.yylineno++,this.yylloc.last_line++):this.yylloc.last_column++,this.options.ranges&&this.yylloc.range[1]++,this._input=this._input.slice(1),S},unput:function(S){const C=S.length,O=S.split(/(?:\r\n?|\n)/g);this._input=S+this._input,this.yytext=this.yytext.substr(0,this.yytext.length-C),this.offset-=C;const N=this.match.split(/(?:\r\n?|\n)/g);this.match=this.match.substr(0,this.match.length-1),this.matched=this.matched.substr(0,this.matched.length-1),O.length-1&&(this.yylineno-=O.length-1);const F=this.yylloc.range;return this.yylloc={first_line:this.yylloc.first_line,last_line:this.yylineno+1,first_column:this.yylloc.first_column,last_column:O?(O.length===N.length?this.yylloc.first_column:0)+N[N.length-O.length].length-O[0].length:this.yylloc.first_column-C},this.options.ranges&&(this.yylloc.range=[F[0],F[0]+this.yyleng-C]),this.yyleng=this.yytext.length,this},more:function(){return this._more=!0,this},reject:function(){if(this.options.backtrack_lexer)this._backtrack=!0;else return this.parseError("Lexical error on line "+(this.yylineno+1)+`. You can only invoke reject() in the lexer when the lexer is of the backtracking persuasion (options.backtrack_lexer = true).
 `+this.showPosition(),{text:"",token:null,line:this.yylineno});return this},less:function(S){this.unput(this.match.slice(S))},pastInput:function(){const S=this.matched.substr(0,this.matched.length-this.match.length);return(S.length>20?"...":"")+S.substr(-20).replace(/\n/g,"")},upcomingInput:function(){let S=this.match;return S.length<20&&(S+=this._input.substr(0,20-S.length)),(S.substr(0,20)+(S.length>20?"...":"")).replace(/\n/g,"")},showPosition:function(){const S=this.pastInput(),C=new Array(S.length+1).join("-");return S+this.upcomingInput()+`
 `+C+"^"},test_match:function(S,C){let O,N,F;if(this.options.backtrack_lexer&&(F={yylineno:this.yylineno,yylloc:{first_line:this.yylloc.first_line,last_line:this.last_line,first_column:this.yylloc.first_column,last_column:this.yylloc.last_column},yytext:this.yytext,match:this.match,matches:this.matches,matched:this.matched,yyleng:this.yyleng,offset:this.offset,_more:this._more,_input:this._input,yy:this.yy,conditionStack:this.conditionStack.slice(0),done:this.done},this.options.ranges&&(F.yylloc.range=this.yylloc.range.slice(0))),N=S[0].match(/(?:\r\n?|\n).*/g),N&&(this.yylineno+=N.length),this.yylloc={first_line:this.yylloc.last_line,last_line:this.yylineno+1,first_column:this.yylloc.last_column,last_column:N?N[N.length-1].length-N[N.length-1].match(/\r?\n?/)[0].length:this.yylloc.last_column+S[0].length},this.yytext+=S[0],this.match+=S[0],this.matches=S,this.yyleng=this.yytext.length,this.options.ranges&&(this.yylloc.range=[this.offset,this.offset+=this.yyleng]),this._more=!1,this._backtrack=!1,this._input=this._input.slice(S[0].length),this.matched+=S[0],O=this.performAction.call(this,this.yy,this,C,this.conditionStack[this.conditionStack.length-1]),this.done&&this._input&&(this.done=!1),O)return O;if(this._backtrack){for(let z in F)this[z]=F[z];return!1}return!1},next:function(){if(this.done)return this.EOF;this._input||(this.done=!0);let S,C,O,N;this._more||(this.yytext="",this.match="");const F=this._currentRules();for(let z=0;z<F.length;z++)if(O=this._input.match(this.rules[F[z]]),O&&(!C||O[0].length>C[0].length)){if(C=O,N=z,this.options.backtrack_lexer){if(S=this.test_match(O,F[z]),S!==!1)return S;if(this._backtrack){C=!1;continue}else return!1}else if(!this.options.flex)break}return C?(S=this.test_match(C,F[N]),S!==!1?S:!1):this._input===""?this.EOF:this.parseError("Lexical error on line "+(this.yylineno+1)+`. Unrecognized text.
-`+this.showPosition(),{text:"",token:null,line:this.yylineno})},lex:function(){const C=this.next();return C||this.lex()},begin:function(C){this.conditionStack.push(C)},popState:function(){return this.conditionStack.length-1>0?this.conditionStack.pop():this.conditionStack[0]},_currentRules:function(){return this.conditionStack.length&&this.conditionStack[this.conditionStack.length-1]?this.conditions[this.conditionStack[this.conditionStack.length-1]].rules:this.conditions.INITIAL.rules},topState:function(C){return C=this.conditionStack.length-1-Math.abs(C||0),C>=0?this.conditionStack[C]:"INITIAL"},pushState:function(C){this.begin(C)},stateStackSize:function(){return this.conditionStack.length},options:{},performAction:function(C,O,N,F){switch(N){case 0:break;case 1:return 15;case 2:return 8;case 3:return 9;case 4:return 7;case 5:return 6;case 6:return 10;case 7:return 11;case 8:return 12;case 9:return 13;case 10:return 14;case 11:return 17;case 12:return 16;case 13:return 5;case 14:return"INVALID"}},rules:[/^(?:\s+)/,/^(?:[0-9]+(\.[0-9]+)?\b)/,/^(?:\*)/,/^(?:\/)/,/^(?:-)/,/^(?:\+)/,/^(?:\^)/,/^(?:!)/,/^(?:%)/,/^(?:\()/,/^(?:\))/,/^(?:PI\b)/,/^(?:E\b)/,/^(?:$)/,/^(?:.)/],conditions:{INITIAL:{rules:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14],inclusive:!0}}}}();v.lexer=P;function k(){this.yy={},this.parse=this.parse.bind(this)}return k.prototype=v,v.Parser=k,new k}();typeof require<"u"&&typeof exports<"u"&&(exports.parser=$r,exports.Parser=$r.Parser,exports.parse=function(){return $r.parse.apply($r,arguments)});const Gv=2;class TF extends Rm{isValueChanged(){const t=RF(this.defaultValue);let n=0;try{n=$r.parse(this.input.value||"0")}catch{return!0}return!n&&!t?!1:n!==t}loadValue(t){const n=Number(t[this.args.column.field]||"0");this.defaultValue=n.toFixed(Gv),this.input.value=this.defaultValue,this.input.defaultValue=this.input.value,this.input.select()}serializeValue(){let t=$r.parse(this.input.value||"0");Rm.AllowEmptyValue?!t&&t!==0&&(t=void 0):t=t||0;const n=this.getDecimalPlaces();return n!==null&&(t||t===0)&&t.toFixed&&(t=parseFloat(t.toFixed(n))),t}validate(){let t=0;try{if(t=$r.parse(`${this.input.value}`),t===1/0)throw new Error}catch{return{valid:!1,msg:"Please enter a valid number"}}if(this.args.column.validator){const n=this.args.column.validator(t,this.args);if(!n.valid)return n}return{valid:!0,msg:null}}}TF.DefaultDecimalPlaces=Gv;class kF{constructor(){this.currentFocus=-1,this.defaultValue="",this.id="autocomplete",this.input=document.createElement("input"),this.keyCaptureList=[Br.UP,Br.DOWN,Br.ENTER]}applyValue(t,n){t[this.args.column.field]=n}closeAllList(){this.list?.remove(),this.list=void 0,this.currentFocus=-1}destroy(){this.input.removeEventListener("input",this.onInput.bind(this)),this.input.removeEventListener("keydown",this.onKeydown.bind(this)),this.closeAllList(),this.input.remove()}focus(){this.input.focus()}init(){this.navOnLR=this.args.grid.getOptions().editorCellNavOnLRKeys,this.input.setAttribute("type","text"),this.input.classList.add("editor-text"),this.args.container.append(this.input),this.input.addEventListener("input",this.onInput.bind(this)),this.input.addEventListener("keydown",this.onKeydown.bind(this)),this.input.focus(),this.input.select()}isValueChanged(){return!(this.input.value==""&&this.defaultValue==null)&&this.input.value!=this.defaultValue}loadValue(t){this.defaultValue=t[this.args.column.field]||"",this.input.value=this.defaultValue,this.input.defaultValue=this.defaultValue,this.input.focus(),this.input.select()}makeVisible(t){const n=t.closest(".slick-viewport");if(!n)return;const{bottom:o,right:r}=t.getBoundingClientRect(),{bottom:i,right:a}=n.getBoundingClientRect();if(t.style.left="0",o>=i){const l=this.args.grid.getOptions().rowHeight;t.style.position="absolute",t.style.bottom=`${l}px`,t.style.top="auto"}r>=a&&(t.style.position="absolute",t.style.right="0",t.style.left="auto")}onKeydown(t){if(t.key===Ar.ArrowLeft){this.navOnLR&&this.args.grid.navigatePrev(),t.stopImmediatePropagation();return}else if(t.key===Ar.ArrowRight){this.navOnLR&&this.args.grid.navigateNext(),t.stopImmediatePropagation();return}if(!this.list)return;const n=this.list.getElementsByTagName("div");t.key===Ar.ArrowDown?(this.currentFocus++,this.setActive(n)):t.key===Ar.ArrowUp?(this.currentFocus--,this.setActive(n)):(t.key===Ar.Enter||t.key===Ar.Tab)&&(t.preventDefault(),n.length===1&&(this.currentFocus=0),this.currentFocus>-1&&n&&n[this.currentFocus].click())}removeActive(t){for(let n=0;n<t.length;n++)t[n].classList.remove("active")}scrollToElement(t){const n=t.parentElement;if(!n)return;const{clientHeight:o,offsetTop:r}=t,{clientHeight:i,scrollTop:a}=n;r>=a+i?n.scrollTop=r-o*1.5:r-o<=a&&(n.scrollTop=r-i)}serializeValue(){return this.input.value}setActive(t){if(!t.length)return;this.removeActive(t),this.currentFocus>=t.length&&(this.currentFocus=0),this.currentFocus<0&&(this.currentFocus=t.length-1);const n=t[this.currentFocus];n.classList.add("active"),this.scrollToElement(n)}validate(){if(this.args.column.validator){const t=this.args.column.validator(this.input.value,this.args);if(!t.valid)return t}return{valid:!0,msg:null}}}var yl={exports:{}};const EF=f0(VN);/*!
+`+this.showPosition(),{text:"",token:null,line:this.yylineno})},lex:function(){const C=this.next();return C||this.lex()},begin:function(C){this.conditionStack.push(C)},popState:function(){return this.conditionStack.length-1>0?this.conditionStack.pop():this.conditionStack[0]},_currentRules:function(){return this.conditionStack.length&&this.conditionStack[this.conditionStack.length-1]?this.conditions[this.conditionStack[this.conditionStack.length-1]].rules:this.conditions.INITIAL.rules},topState:function(C){return C=this.conditionStack.length-1-Math.abs(C||0),C>=0?this.conditionStack[C]:"INITIAL"},pushState:function(C){this.begin(C)},stateStackSize:function(){return this.conditionStack.length},options:{},performAction:function(C,O,N,F){switch(N){case 0:break;case 1:return 15;case 2:return 8;case 3:return 9;case 4:return 7;case 5:return 6;case 6:return 10;case 7:return 11;case 8:return 12;case 9:return 13;case 10:return 14;case 11:return 17;case 12:return 16;case 13:return 5;case 14:return"INVALID"}},rules:[/^(?:\s+)/,/^(?:[0-9]+(\.[0-9]+)?\b)/,/^(?:\*)/,/^(?:\/)/,/^(?:-)/,/^(?:\+)/,/^(?:\^)/,/^(?:!)/,/^(?:%)/,/^(?:\()/,/^(?:\))/,/^(?:PI\b)/,/^(?:E\b)/,/^(?:$)/,/^(?:.)/],conditions:{INITIAL:{rules:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14],inclusive:!0}}}}();v.lexer=P;function k(){this.yy={},this.parse=this.parse.bind(this)}return k.prototype=v,v.Parser=k,new k}();typeof require<"u"&&typeof exports<"u"&&(exports.parser=$r,exports.Parser=$r.Parser,exports.parse=function(){return $r.parse.apply($r,arguments)});const Gv=2;class TF extends Rm{isValueChanged(){const t=RF(this.defaultValue);let n=0;try{n=$r.parse(this.input.value||"0")}catch{return!0}return!n&&!t?!1:n!==t}loadValue(t){const n=Number(t[this.args.column.field]||"0");this.defaultValue=n.toFixed(Gv),this.input.value=this.defaultValue,this.input.defaultValue=this.input.value,this.input.select()}serializeValue(){let t=$r.parse(this.input.value||"0");Rm.AllowEmptyValue?!t&&t!==0&&(t=void 0):t=t||0;const n=this.getDecimalPlaces();return n!==null&&(t||t===0)&&t.toFixed&&(t=parseFloat(t.toFixed(n))),t}validate(){let t=0;try{if(t=$r.parse(`${this.input.value}`),t===1/0)throw new Error}catch{return{valid:!1,msg:"Please enter a valid number"}}if(this.args.column.validator){const n=this.args.column.validator(t,this.args);if(!n.valid)return n}return{valid:!0,msg:null}}}TF.DefaultDecimalPlaces=Gv;class kF{constructor(){this.currentFocus=-1,this.defaultValue="",this.id="slick-table-autocomplete",this.input=document.createElement("input"),this.keyCaptureList=[Br.UP,Br.DOWN,Br.ENTER]}applyValue(t,n){t[this.args.column.field]=n}closeAllList(){this.list?.remove(),this.list=void 0,this.currentFocus=-1}createList(){this.list=document.createElement("div");const t=document.getElementById("root");if(!t)return;t.appendChild(this.list),this.list.setAttribute("tabIndex","0"),this.list.setAttribute("id",this.id);const{top:n,left:o,right:r}=this.args.position,i=this.args.grid.getOptions().rowHeight||25;this.list.style.top=`${n+i}px`,this.list.style.left=`${o}px`,this.list.style.minWidth=`${r-o}px`}destroy(){this.input.removeEventListener("input",this.onInput.bind(this)),this.input.removeEventListener("keydown",this.onKeydown.bind(this)),this.closeAllList(),this.input.remove()}focus(){this.input.focus()}init(){this.navOnLR=this.args.grid.getOptions().editorCellNavOnLRKeys,this.input.setAttribute("type","text"),this.input.classList.add("editor-text"),this.args.container.append(this.input),this.input.addEventListener("input",this.onInput.bind(this)),this.input.addEventListener("keydown",this.onKeydown.bind(this)),this.input.addEventListener("blur",({relatedTarget:t})=>{t?.id===this.id?this.focus():this.closeAllList()}),this.input.focus(),this.input.select()}isValueChanged(){return!(this.input.value==""&&this.defaultValue==null)&&this.input.value!=this.defaultValue}loadValue(t){this.defaultValue=t[this.args.column.field]||"",this.input.value=this.defaultValue,this.input.defaultValue=this.defaultValue,this.input.focus(),this.input.select()}makeVisible(){if(!this.list)return;const{bottom:t,left:n,right:o,top:r}=this.list.getBoundingClientRect(),{bottom:i,right:a}=document.body.getBoundingClientRect();if(t>=i){const l=this.args.grid.getOptions().rowHeight||25,d=t-r;this.list.style.top=`${r-d-l}px`}if(o>=a){const{right:l}=this.args.container.getBoundingClientRect(),d=o-l;this.list.style.left=`${n-d}px`}}onKeydown(t){if(t.key===Ar.ArrowLeft){this.navOnLR&&this.args.grid.navigatePrev(),t.stopImmediatePropagation();return}else if(t.key===Ar.ArrowRight){this.navOnLR&&this.args.grid.navigateNext(),t.stopImmediatePropagation();return}if(!this.list)return;const n=this.list.getElementsByTagName("div");t.key===Ar.ArrowDown?(this.currentFocus++,this.setActive(n)):t.key===Ar.ArrowUp?(this.currentFocus--,this.setActive(n)):(t.key===Ar.Enter||t.key===Ar.Tab)&&(t.preventDefault(),n.length===1&&(this.currentFocus=0),this.currentFocus>-1&&n&&n[this.currentFocus].click())}removeActive(t){for(let n=0;n<t.length;n++)t[n].classList.remove("active")}scrollToElement(t){const n=t.parentElement;if(!n)return;const{clientHeight:o,offsetTop:r}=t,{clientHeight:i,scrollTop:a}=n;r>=a+i?n.scrollTop=r-o*1.5:r-o<=a&&(n.scrollTop=r-i)}serializeValue(){return this.input.value}setActive(t){if(!t.length)return;this.removeActive(t),this.currentFocus>=t.length&&(this.currentFocus=0),this.currentFocus<0&&(this.currentFocus=t.length-1);const n=t[this.currentFocus];n.classList.add("active"),this.scrollToElement(n)}validate(){if(this.args.column.validator){const t=this.args.column.validator(this.input.value,this.args);if(!t.valid)return t}return{valid:!0,msg:null}}}var yl={exports:{}};const EF=f0(VN);/*!
  * Pikaday
  *
  * Copyright © 2014 David Bushell | BSD & MIT license | https://github.com/Pikaday/Pikaday

package/dist/index.es.js

@@ -34501,7 +34501,7 @@ class mF extends xm {
 mF.DefaultDecimalPlaces = Hv;
 class OW {
   constructor() {
-    this.currentFocus = -1, this.defaultValue = "", this.id = "autocomplete", this.input = document.createElement("input"), this.keyCaptureList = [Hr.UP, Hr.DOWN, Hr.ENTER];
+    this.currentFocus = -1, this.defaultValue = "", this.id = "slick-table-autocomplete", this.input = document.createElement("input"), this.keyCaptureList = [Hr.UP, Hr.DOWN, Hr.ENTER];
   }
   applyValue(t, n) {
     t[this.args.column.field] = n;
@@ -34509,6 +34509,14 @@ class OW {
   closeAllList() {
     this.list?.remove(), this.list = void 0, this.currentFocus = -1;
   }
+  createList() {
+    this.list = document.createElement("div");
+    const t = document.getElementById("root");
+    if (!t) return;
+    t.appendChild(this.list), this.list.setAttribute("tabIndex", "0"), this.list.setAttribute("id", this.id);
+    const { top: n, left: o, right: r } = this.args.position, i = this.args.grid.getOptions().rowHeight || 25;
+    this.list.style.top = `${n + i}px`, this.list.style.left = `${o}px`, this.list.style.minWidth = `${r - o}px`;
+  }
   destroy() {
     this.input.removeEventListener("input", this.onInput.bind(this)), this.input.removeEventListener("keydown", this.onKeydown.bind(this)), this.closeAllList(), this.input.remove();
   }
@@ -34516,7 +34524,9 @@ class OW {
     this.input.focus();
   }
   init() {
-    this.navOnLR = this.args.grid.getOptions().editorCellNavOnLRKeys, this.input.setAttribute("type", "text"), this.input.classList.add("editor-text"), this.args.container.append(this.input), this.input.addEventListener("input", this.onInput.bind(this)), this.input.addEventListener("keydown", this.onKeydown.bind(this)), this.input.focus(), this.input.select();
+    this.navOnLR = this.args.grid.getOptions().editorCellNavOnLRKeys, this.input.setAttribute("type", "text"), this.input.classList.add("editor-text"), this.args.container.append(this.input), this.input.addEventListener("input", this.onInput.bind(this)), this.input.addEventListener("keydown", this.onKeydown.bind(this)), this.input.addEventListener("blur", ({ relatedTarget: t }) => {
+      t?.id === this.id ? this.focus() : this.closeAllList();
+    }), this.input.focus(), this.input.select();
   }
   isValueChanged() {
     return !(this.input.value == "" && this.defaultValue == null) && this.input.value != this.defaultValue;
@@ -34524,15 +34534,22 @@ class OW {
   loadValue(t) {
     this.defaultValue = t[this.args.column.field] || "", this.input.value = this.defaultValue, this.input.defaultValue = this.defaultValue, this.input.focus(), this.input.select();
   }
-  makeVisible(t) {
-    const n = t.closest(".slick-viewport");
-    if (!n) return;
-    const { bottom: o, right: r } = t.getBoundingClientRect(), { bottom: i, right: a } = n.getBoundingClientRect();
-    if (t.style.left = "0", o >= i) {
-      const l = this.args.grid.getOptions().rowHeight;
-      t.style.position = "absolute", t.style.bottom = `${l}px`, t.style.top = "auto";
+  makeVisible() {
+    if (!this.list) return;
+    const {
+      bottom: t,
+      left: n,
+      right: o,
+      top: r
+    } = this.list.getBoundingClientRect(), { bottom: i, right: a } = document.body.getBoundingClientRect();
+    if (t >= i) {
+      const l = this.args.grid.getOptions().rowHeight || 25, d = t - r;
+      this.list.style.top = `${r - d - l}px`;
+    }
+    if (o >= a) {
+      const { right: l } = this.args.container.getBoundingClientRect(), d = o - l;
+      this.list.style.left = `${n - d}px`;
     }
-    r >= a && (t.style.position = "absolute", t.style.right = "0", t.style.left = "auto");
   }
   onKeydown(t) {
     if (t.key === Lr.ArrowLeft) {

package/dist/styles/slick-table.scss

@@ -0,0 +1,20 @@
+#slick-table-autocomplete {
+  background-color: white;
+  z-index: 1;
+  position: absolute;
+  color: #1E456F;
+  box-shadow: gray 0 0 5px 1px;
+  font-size: 0.75rem;
+  max-height: 20em;
+
+  strong {
+    color: rgb(0, 123, 255)
+  }
+
+  div.active,
+  div:hover {
+    cursor: pointer;
+    background-color: #e8f4fe;
+  }
+}
+

package/dist/types/shared/lib/slickgrid/lib/editors/Autocomplete/Autocomplete.d.ts

@@ -11,12 +11,13 @@ export declare abstract class Autocomplete implements Editor {
     protected navOnLR?: boolean;
     applyValue(item: any, state: any): void;
     closeAllList(): void;
+    createList(): void;
     destroy(): void;
     focus(): void;
     init(): void;
     isValueChanged(): boolean;
     loadValue(item: ISlickRow): void;
-    makeVisible(list: HTMLDivElement): void;
+    makeVisible(): void;
     abstract onClick(event: MouseEvent): void;
     abstract onInput(event: Event): void;
     onKeydown(event: KeyboardEvent): void;

package/dist/types/shared/lib/slickgrid/lib/editors/Autocomplete/Autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../../../../../src/shared/lib/slickgrid/lib/editors/Autocomplete/Autocomplete.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,MAAM,EACN,eAAe,EACf,sBAAsB,EAEtB,MAAM,WAAW,CAAC;AAGnB,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,8BAAsB,YAAa,YAAW,MAAM;IACnD,QAAQ,CAAC,IAAI,EAAE,eAAe,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;IAC9C,SAAS,CAAC,YAAY,SAAM;IAC5B,SAAS,CAAC,YAAY,SAAM;IAC5B,SAAS,CAAC,EAAE,SAAkB;IAC9B,SAAS,CAAC,KAAK,EAAE,gBAAgB,CAAmC;IAC7D,cAAc,EAAE,MAAM,EAAE,CAA6C;IAC5E,SAAS,CAAC,IAAI,CAAC,EAAE,cAAc,CAAC;IAChC,SAAS,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAE5B,UAAU,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAGvC,YAAY,IAAI,IAAI;IAKpB,OAAO,IAAI,IAAI;IAMf,KAAK,IAAI,IAAI;IAGb,IAAI,IAAI,IAAI;IAWZ,cAAc,IAAI,OAAO;IAMzB,SAAS,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI;IAOhC,WAAW,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAoBvC,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IACzC,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IACpC,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IA8BrC,YAAY,CAAC,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,GAAG,IAAI;IAKvD,eAAe,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;IAW5C,cAAc,IAAI,MAAM;IAGxB,SAAS,CAAC,IAAI,EAAE,gBAAgB,CAAC,cAAc,CAAC,GAAG,IAAI;IASvD,QAAQ,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAC1C,QAAQ,IAAI,sBAAsB;CAelC"}
+{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../../../../../src/shared/lib/slickgrid/lib/editors/Autocomplete/Autocomplete.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,MAAM,EACN,eAAe,EACf,sBAAsB,EAGtB,MAAM,WAAW,CAAC;AAGnB,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,8BAAsB,YAAa,YAAW,MAAM;IACnD,QAAQ,CAAC,IAAI,EAAE,eAAe,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;IAC9C,SAAS,CAAC,YAAY,SAAM;IAC5B,SAAS,CAAC,YAAY,SAAM;IAC5B,SAAS,CAAC,EAAE,SAA8B;IAC1C,SAAS,CAAC,KAAK,EAAE,gBAAgB,CAAmC;IAC7D,cAAc,EAAE,MAAM,EAAE,CAA6C;IAC5E,SAAS,CAAC,IAAI,CAAC,EAAE,cAAc,CAAC;IAChC,SAAS,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAE5B,UAAU,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAGvC,YAAY,IAAI,IAAI;IAKpB,UAAU;IAaV,OAAO,IAAI,IAAI;IAMf,KAAK,IAAI,IAAI;IAGb,IAAI,IAAI,IAAI;IAkBZ,cAAc,IAAI,OAAO;IAMzB,SAAS,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI;IAOhC,WAAW,IAAI,IAAI;IAqBnB,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IACzC,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IACpC,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IA8BrC,YAAY,CAAC,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,GAAG,IAAI;IAKvD,eAAe,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;IAW5C,cAAc,IAAI,MAAM;IAGxB,SAAS,CAAC,IAAI,EAAE,gBAAgB,CAAC,cAAc,CAAC,GAAG,IAAI;IASvD,QAAQ,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAC1C,QAAQ,IAAI,sBAAsB;CAelC"}

package/dist/types/shared/lib/slickgrid/lib/editors/Autocomplete/EditorAutocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorAutocomplete.d.ts","sourceRoot":"","sources":["../../../../../../../../src/shared/lib/slickgrid/lib/editors/Autocomplete/EditorAutocomplete.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,UAAU,EAAiB,MAAM,WAAW,CAAC;AAK/E,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,qBAAa,kBAAkB,CAC9B,KAAK,GAAG,GAAG,EACX,CAAC,SAAS,MAAM,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,EACvC,CAAC,SAAS,UAAU,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CACtC,SAAQ,YAAY;IAGF,IAAI,EAAE,eAAe,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;IAFrD,SAAS,CAAC,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;gBAEpB,IAAI,EAAE,eAAe,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;IAuBrD,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAK3B,OAAO,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAKhC,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;CAkBjC"}
+{"version":3,"file":"EditorAutocomplete.d.ts","sourceRoot":"","sources":["../../../../../../../../src/shared/lib/slickgrid/lib/editors/Autocomplete/EditorAutocomplete.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,MAAM,EACN,eAAe,EAEf,UAAU,EAEV,MAAM,WAAW,CAAC;AAKnB,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,qBAAa,kBAAkB,CAC9B,KAAK,GAAG,GAAG,EACX,CAAC,SAAS,MAAM,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,EACvC,CAAC,SAAS,UAAU,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CACtC,SAAQ,YAAY;IAGF,IAAI,EAAE,eAAe,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;IAFrD,SAAS,CAAC,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;gBAEpB,IAAI,EAAE,eAAe,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;IAuBrD,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAK3B,OAAO,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAShC,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;CAgBjC"}

package/dist/types/shared/lib/slickgrid/lib/editors/Autocomplete/EditorSelectWithSearch.d.ts

@@ -7,6 +7,7 @@ export declare class EditorSelectWithSearch<TData = any, C extends Column<TData>
     protected reversedHash: Record<string, string>;
     constructor(args: EditorArguments<TData, C, O>);
     applyValue(item: any, state: any): void;
+    isValueChanged(): boolean;
     loadValue(item: ISlickRow): void;
     onInput(event: Event): void;
     onClick(event: MouseEvent): void;

package/dist/types/shared/lib/slickgrid/lib/editors/Autocomplete/EditorSelectWithSearch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorSelectWithSearch.d.ts","sourceRoot":"","sources":["../../../../../../../../src/shared/lib/slickgrid/lib/editors/Autocomplete/EditorSelectWithSearch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAGhE,OAAO,EAAW,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAExD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,qBAAa,sBAAsB,CAClC,KAAK,GAAG,GAAG,EACX,CAAC,SAAS,MAAM,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,EACvC,CAAC,SAAS,UAAU,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CACtC,SAAQ,YAAY;IAIF,IAAI,EAAE,eAAe,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;IAHrD,SAAS,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,SAAS,CAAC,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;gBAE5B,IAAI,EAAE,eAAe,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;IAmBrD,UAAU,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAIvC,SAAS,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI;IAQhC,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAK3B,OAAO,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAKhC,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;CAsBjC"}
+{"version":3,"file":"EditorSelectWithSearch.d.ts","sourceRoot":"","sources":["../../../../../../../../src/shared/lib/slickgrid/lib/editors/Autocomplete/EditorSelectWithSearch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAGhE,OAAO,EAAW,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAExD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,qBAAa,sBAAsB,CAClC,KAAK,GAAG,GAAG,EACX,CAAC,SAAS,MAAM,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,EACvC,CAAC,SAAS,UAAU,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CACtC,SAAQ,YAAY;IAIF,IAAI,EAAE,eAAe,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;IAHrD,SAAS,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,SAAS,CAAC,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;gBAE5B,IAAI,EAAE,eAAe,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;IAmBrD,UAAU,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAIvC,cAAc,IAAI,OAAO;IAUzB,SAAS,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI;IAQhC,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAK3B,OAAO,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAKhC,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;CAkBjC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slick-table",
-  "version": "1.1.41",
+  "version": "1.1.43",
   "description": "Enhanced version of SlickGrid library",
   "private": false,
   "type": "module",
@@ -13,6 +13,7 @@
       "import": "./dist/index.es.js",
       "require": "./dist/index.cjs.js"
     },
+    "./styles": "./dist/styles/slick-table.scss",
     "./package.json": "./package.json"
   },
   "files": [
@@ -36,6 +37,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "postbuild": "node scripts/copy-styles.mjs",
     "lint": "eslint .",
     "pack": "npm pack --dry-run",
     "version:patch": "npm version patch",

package/src/app/styles/slick-table.scss

@@ -0,0 +1,20 @@
+#slick-table-autocomplete {
+  background-color: white;
+  z-index: 1;
+  position: absolute;
+  color: #1E456F;
+  box-shadow: gray 0 0 5px 1px;
+  font-size: 0.75rem;
+  max-height: 20em;
+
+  strong {
+    color: rgb(0, 123, 255)
+  }
+
+  div.active,
+  div:hover {
+    cursor: pointer;
+    background-color: #e8f4fe;
+  }
+}
+

package/src/index.scss

@@ -1,3 +1,4 @@
+@use './app/styles/slick-table' as *;
 @use './app/styles/slickgrid' as *;
 @use './app/styles/global' as *;
 @use './app/styles/icons' as *;

package/src/shared/lib/slickgrid/lib/editors/Autocomplete/Autocomplete.ts

@@ -2,6 +2,7 @@ import {
 	Editor,
 	EditorArguments,
 	EditorValidationResult,
+	ElementPosition,
 	keyCode,
 } from "slickgrid";
 
@@ -12,7 +13,7 @@ export abstract class Autocomplete implements Editor {
 	abstract args: EditorArguments<any, any, any>;
 	protected currentFocus = -1;
 	protected defaultValue = "";
-	protected id = "autocomplete";
+	protected id = "slick-table-autocomplete";
 	protected input: HTMLInputElement = document.createElement("input");
 	public keyCaptureList: number[] = [keyCode.UP, keyCode.DOWN, keyCode.ENTER];
 	protected list?: HTMLDivElement;
@@ -26,6 +27,19 @@ export abstract class Autocomplete implements Editor {
 		this.list = undefined;
 		this.currentFocus = -1;
 	}
+	createList() {
+		this.list = document.createElement("div");
+		const container = document.getElementById("root");
+		if (!container) return;
+		container.appendChild(this.list);
+		this.list.setAttribute("tabIndex", "0"); // this.input.addEventListener("blur", ...) doesn't work without it
+		this.list.setAttribute("id", this.id);
+		const { top, left, right } = this.args.position as ElementPosition;
+		const rowHeight = this.args.grid.getOptions().rowHeight || 25;
+		this.list.style.top = `${top + rowHeight}px`;
+		this.list.style.left = `${left}px`;
+		this.list.style.minWidth = `${right - left}px`;
+	}
 	destroy(): void {
 		this.input.removeEventListener("input", this.onInput.bind(this));
 		this.input.removeEventListener("keydown", this.onKeydown.bind(this));
@@ -43,6 +57,13 @@ export abstract class Autocomplete implements Editor {
 
 		this.input.addEventListener("input", this.onInput.bind(this));
 		this.input.addEventListener("keydown", this.onKeydown.bind(this));
+		this.input.addEventListener("blur", ({ relatedTarget }) => {
+			if ((relatedTarget as HTMLDivElement | null)?.id === this.id) {
+				this.focus();
+			} else {
+				this.closeAllList();
+			}
+		});
 		this.input.focus();
 		this.input.select();
 	}
@@ -59,24 +80,25 @@ export abstract class Autocomplete implements Editor {
 		this.input.focus();
 		this.input.select();
 	}
-	makeVisible(list: HTMLDivElement): void {
-		const canvas = list.closest(".slick-viewport");
-		if (!canvas) return;
-		const { bottom: listBottom, right: listRight } =
-			list.getBoundingClientRect();
-		const { bottom: canvasBottom, right: canvasRight } =
-			canvas.getBoundingClientRect();
-		list.style.left = "0";
-		if (listBottom >= canvasBottom) {
-			const rowHeight = this.args.grid.getOptions().rowHeight;
-			list.style.position = "absolute";
-			list.style.bottom = `${rowHeight}px`;
-			list.style.top = "auto";
+	makeVisible(): void {
+		if (!this.list) return;
+		const {
+			bottom: listBottom,
+			left: listLeft,
+			right: listRight,
+			top: listTop,
+		} = this.list.getBoundingClientRect();
+		const { bottom: bodyBottom, right: bodyRight } =
+			document.body.getBoundingClientRect();
+		if (listBottom >= bodyBottom) {
+			const rowHeight = this.args.grid.getOptions().rowHeight || 25;
+			const listHeight = listBottom - listTop;
+			this.list.style.top = `${listTop - listHeight - rowHeight}px`;
 		}
-		if (listRight >= canvasRight) {
-			list.style.position = "absolute";
-			list.style.right = "0";
-			list.style.left = "auto";
+		if (listRight >= bodyRight) {
+			const { right: cellRight } = this.args.container.getBoundingClientRect();
+			const exceeding = listRight - cellRight;
+			this.list.style.left = `${listLeft - exceeding}px`;
 		}
 	}
 	abstract onClick(event: MouseEvent): void;

package/src/shared/lib/slickgrid/lib/editors/Autocomplete/EditorAutocomplete.ts

@@ -1,4 +1,10 @@
-import { Column, EditorArguments, GridOption, SlickDataView } from "slickgrid";
+import {
+	Column,
+	EditorArguments,
+	ElementPosition,
+	GridOption,
+	SlickDataView,
+} from "slickgrid";
 
 import { escapeSpecialChar } from "shared/lib/regexp";
 import { IColumn } from "shared/model/types";
@@ -41,14 +47,16 @@ export class EditorAutocomplete<
 		this.showOptions((event.target as HTMLInputElement).value);
 	}
 	onClick(event: MouseEvent): void {
-		const div = event.target as HTMLDivElement;
-		this.input.value = div.getElementsByTagName("input")[0].value;
+		const targetElement = event.target as HTMLElement; // either <div> or <strong>
+		const htmlInputElement = targetElement
+			.closest("div")
+			?.querySelector("input");
+		this.input.value = htmlInputElement?.value || "";
 		this.closeAllList();
+		this.args.grid.navigateNext();
 	}
 	showOptions(search: string): void {
-		this.list = document.createElement("div");
-		this.list.setAttribute("id", this.id);
-		this.args.container.appendChild(this.list);
+		this.createList();
 		this.suggestionsList.forEach((name: string) => {
 			const hasOverlap = name.match(new RegExp(escapeSpecialChar(search), "i"));
 			if (hasOverlap) {
@@ -61,6 +69,6 @@ export class EditorAutocomplete<
 				this.list?.appendChild(listItem);
 			}
 		});
-		this.makeVisible(this.list);
+		this.makeVisible();
 	}
 }

package/src/shared/lib/slickgrid/lib/editors/Autocomplete/EditorSelectWithSearch.ts

@@ -36,6 +36,16 @@ export class EditorSelectWithSearch<
 		item[this.args.column.field] = this.reversedHash[state];
 	}
 
+	isValueChanged(): boolean {
+		if (!this.reversedHash[this.input.value]) {
+			this.input.value = this.defaultValue;
+		}
+		return (
+			!(this.input.value == "" && this.defaultValue == null) &&
+			this.input.value != this.defaultValue
+		);
+	}
+
 	loadValue(item: ISlickRow): void {
 		this.defaultValue = this.hash[item[this.args.column.id]] || "";
 		this.input.value = this.defaultValue;
@@ -55,11 +65,7 @@ export class EditorSelectWithSearch<
 		this.closeAllList();
 	}
 	showOptions(search: string): void {
-		this.list = document.createElement("div");
-		this.list.setAttribute("id", this.id);
-		this.list.style.width = "fit-content";
-		this.list.style.textAlign = "left";
-		this.args.container.appendChild(this.list);
+		this.createList();
 		Object.entries(this.hash).forEach(([key, value]) => {
 			const hasOverlap = value.match(
 				new RegExp(escapeSpecialChar(search), "i"),
@@ -74,6 +80,6 @@ export class EditorSelectWithSearch<
 				this.list?.appendChild(listItem);
 			}
 		});
-		this.makeVisible(this.list);
+		this.makeVisible();
 	}
 }