treeselectjs 0.2.5 → 0.2.8

package/README.md

@@ -5,6 +5,8 @@ A multi-select js component with nested options.
 - Full key support (ArrowUp, ArrowDown, Space, ArrowLeft, ArrowRight, Enter)
 - Screen sensitive direction
 
+**Live Demo:** https://dipson88.github.io/treeselectjs/
+
 ![Example img](https://github.com/dipson88/treeselectjs/blob/main/treeselectjs.png?raw=true)
 
 ### Getting Started
@@ -24,7 +26,7 @@ and css file with styles
 
 Example
 ```
-import Treeselect from 'treeselectjs'
+import Treeselect from '../dist/treeselect-js.js';
 
 const options = [
   {
@@ -73,57 +75,61 @@ const options = [
 ]
 
 const slot = document.createElement('div')
-slot.innerHTML='<a class="test" href="">Slot example text</a>'
+slot.innerHTML='<a class="treeselect-demo__slot" href="">Click!</a>'
 
-const domElement = document.querySelector('.treeselect-test')
+const domElement = document.querySelector('.treeselect-demo')
 const treeselect = new Treeselect({
   parentHtmlContainer: domElement,
   value: ['West End', 'Paris', 'Lyon'],
   options: options,
-  alwaysOpen: true,
-  appendToBody: true,
-  listSlotHtmlComponent: slot,
-  disabled: false,
-  emptyText: 'No data text'
+  listSlotHtmlComponent: slot
 })
 
 treeselect.srcElement.addEventListener('input', (e) => {
-  console.log(e.detail)
+  console.log('Selected value:', e.detail)
+})
+
+slot.addEventListener('click', (e) => {
+  e.preventDefault()
+  alert('Slot click!')
 })
 ```
 
 ### Props
-Name  | Type (default) | Discription
+Name  | Type (default) | Description
 ------------- | ------------- | -------------
-parentHtmlContainer  | HTMLElement | It sould be a HTML element (div), it will be changed to the list container.
+parentHtmlContainer  | HTMLElement (required!) | It should be a HTML element (div), it will be changed to the list container.
 value  | Array[String] ([]) | It is an array with ids.
-options  | Array[Object] ([]) | It is an array of objects { name: String, value: String, children: [] }, where children are the same array of objects.
+options  | Array[Object] ([]) | It is an array of objects { name: String, value: String, children: [] }, where children are the same array of objects. Do not use duplicated values.
 openLevel  | Number (0) | All groups will be opened to this level.
 appendToBody  | Boolean (false) | List will be appended to the body instead of the input container.
-alwaysOpen  | Boolean (false) | List will be always opened.
+alwaysOpen  | Boolean (false) | List will be always opened. You can use it for comfortable style changing. If you what to use it as an opened list, turn `staticList' to `true`.
 showTags  | Boolean (true) | Selected values look like tags. The false value shows results as '{count} elements selected'.
 clearable  | Boolean (true) | Clear icon is available.
 searchable  | Boolean (true) | Search is available.
 placeholder  | String ('Search...') | Placeholder text.
-grouped | Boolean (true) | Show groups in the input and group lefs if all group selected.
+grouped | Boolean (true) | Show groups in the input and group leafs if all group selected.
 listSlotHtmlComponent | HTMLElement (null) | It should be a HTML element, it will be append to the end of the list.
 disabled | Boolean (false) | List will be disabled.
 emptyText | String ('No results found...') | A empty list text.
+staticList | Boolean (false) | Add the list as a static DOM element. List doesn't overlap content. This prop will be ignored if you use `appendToBody`.
 
 ### Emits
-Name  | Return Type | Discription
+Name  | Return Type | Description
 ------------- | ------------- | -------------
 input  | Array[String] | Returns selected ids without groups, only leafs.
 
 ### Methods
-Name  | Params | Discription
+Name  | Params | Description
 ------------- | ------------- | -------------
 updateValue  | Array[String] | Update selected values.
-mount  | None | Helps to remount and update settings.
-destroy  | None | Deletes elements from the DOM and clears all the data. Call mount() to recreate.
+mount  | None | Helps to remount and update settings. Change settings that you need (treeselect.appendToBody = true), then call mount().
+destroy  | None | Deletes elements from the DOM. Call mount() to add treeselect to the DOM with previously saved internal data. If you need to recreate treeselect with default params - call **new Treeselect(options)**.
 
 ### Notes
 1) If you want to change the padding of the element you can use CSS selector. I've added **'group'** and **'level'** attributes, but you have to use **!important**.
 2) If you want to update props, set props to the entity of the class and then call **mount()** method.
 3) Use **updateValue()** method to update only the value.
-4) If you need to delete List from the DOM when you don't need treeselect anymore - call **destroy()**.
+4) If you need to delete List from the DOM when you don't need treeselect anymore - call **destroy()**.
+5) Do not use **duplicated** values for the options. You will see a error with duplicated values.
+6) **Value** inside the **options** prop should be a **String**.

package/dist/input.js

@@ -1 +1 @@
-import svg from"./svgIcons.js";class TreeselectInput{#htmlTagsSecton=null;#htmlEditControl=null;#htmlOperators=null;#htmlArrow=null;#openEvent=new CustomEvent("open");#closeEvent=new CustomEvent("close");constructor({value:e,showTags:t,clearable:s,isAlwaysOpened:a,searchable:i,placeholder:n,disabled:r}){this.value=e,this.showTags=t??!0,this.searchable=i??!0,this.placeholder=n??"Search...",this.clearable=s??!0,this.isAlwaysOpened=a??!1,this.disabled=r??!1,this.isOpened=!1,this.searchText="",this.srcElement=this.#createTreeselectInput(),this.#updateDOM()}focus(){this.#htmlEditControl.focus()}blur(){this.isOpened&&this.#updateOpenClose()}updateValue(e){this.value=e,this.#updateTags(),this.#updateEditControl()}removeItem(t){this.value=this.value.filter(e=>e.id!==t),this.#emitInput(),this.#updateTags(),this.#updateEditControl()}clear(){this.value=[],this.searchText="",this.#emitSearch(""),this.#emitInput(),this.#updateTags(),this.#updateEditControl()}openClose(){this.#updateOpenClose()}#updateDOM(){this.#updateTags(),this.#updateEditControl(),this.#updateOperators()}#updateTags(){this.#htmlTagsSecton.innerHTML="",this.showTags?this.#htmlTagsSecton.append(...this.#createTags()):this.#htmlTagsSecton.appendChild(this.#createCountElement())}#updateOperators(){const e=[];this.#htmlOperators.innerHTML="",this.clearable&&e.push(this.#createClearButton()),this.isAlwaysOpened||e.push(this.#createInputArrow(this.isOpened)),e.length&&this.#htmlOperators.append(...e)}#updateArrowDirection(){var e;this.isAlwaysOpened||(e=this.isOpened?svg.arrowUp:svg.arrowDown,this.#htmlArrow.innerHTML=e)}#updateEditControl(){this.value?.length?this.#htmlEditControl.removeAttribute("placeholder"):this.#htmlEditControl.setAttribute("placeholder",this.placeholder),this.searchable?this.srcElement.classList.remove("treeselect-input--unsearchable"):this.srcElement.classList.add("treeselect-input--unsearchable"),this.#htmlEditControl.value=this.searchText}#updateOpenClose(){this.isOpened=!this.isOpened,this.#updateArrowDirection(),this.isOpened?this.#emitOpen():this.#emitClose()}#createTreeselectInput(){const e=document.createElement("div");return e.classList.add("treeselect-input"),e.setAttribute("tabindex","-1"),this.#htmlTagsSecton=this.#createTagsSection(),this.#htmlEditControl=this.#createControl(),this.#htmlOperators=this.#createOperators(),e.addEventListener("mousedown",e=>{e.preventDefault(),this.isOpened||this.#updateOpenClose(),this.focus()}),e.append(this.#htmlTagsSecton,this.#htmlEditControl,this.#htmlOperators),e}#createTagsSection(){const e=document.createElement("div");return e.classList.add("treeselect-input__tags"),e}#createTags(){return this.value.map(t=>{const e=document.createElement("div");e.classList.add("treeselect-input__tags-element"),e.setAttribute("tabindex","-1"),e.setAttribute("tag-id",t.id),e.setAttribute("title",t.name);var s=this.#createTagName(t.name),a=this.#createTagCross();return e.addEventListener("mousedown",e=>{e.preventDefault(),e.stopPropagation(),this.focus(),this.removeItem(t.id)}),e.append(s,a),e})}#createTagName(e){const t=document.createElement("span");return t.classList.add("treeselect-input__tags-name"),t.innerHTML=e,t}#createTagCross(){const e=document.createElement("span");return e.classList.add("treeselect-input__tags-cross"),e.innerHTML=svg.cross,e}#createCountElement(){const e=document.createElement("span");return e.classList.add("treeselect-input__tags-count"),this.value.length?e.innerHTML=1===this.value.length?this.value[0].name:this.value.length+" elements selected":e.innerHTML="",e}#createControl(){const a=document.createElement("input");return a.classList.add("treeselect-input__edit"),this.disabled&&a.setAttribute("tabindex","-1"),a.addEventListener("keydown",e=>{"Backspace"!==e.key||this.searchText.length||!this.value.length||this.showTags||this.clear(),"Backspace"===e.key&&!this.searchText.length&&this.value.length&&this.removeItem(this.value[this.value.length-1].id),"Space"!==e.code||this.searchText&&this.searchable||this.#updateOpenClose()}),a.addEventListener("input",e=>{e.stopPropagation();var t=this.searchText,s=a.value.trim();0===t.length&&0===s.length?a.value="":(this.searchable?(this.#emitSearch(e.target.value),this.isOpened||this.#updateOpenClose()):a.value="",this.searchText=a.value)}),a}#createOperators(){const e=document.createElement("div");return e.classList.add("treeselect-input__operators"),e}#createClearButton(){const e=document.createElement("span");return e.classList.add("treeselect-input__clear"),e.setAttribute("tabindex","-1"),e.innerHTML=svg.clear,e.addEventListener("mousedown",e=>{e.preventDefault(),e.stopPropagation(),this.#htmlEditControl.focus(),(this.searchText.length||this.value.length)&&this.clear()}),e}#createInputArrow(e){return this.#htmlArrow=document.createElement("span"),this.#htmlArrow.classList.add("treeselect-input__arrow"),this.#htmlArrow.innerHTML=e?svg.arrowUp:svg.arrowDown,this.#htmlArrow.addEventListener("mousedown",e=>{e.stopPropagation(),e.preventDefault(),this.focus(),this.#updateOpenClose()}),this.#htmlArrow}#emitInput(){this.srcElement.dispatchEvent(new CustomEvent("input",{detail:this.value}))}#emitSearch(e){this.srcElement.dispatchEvent(new CustomEvent("search",{detail:e}))}#emitOpen(){this.srcElement.dispatchEvent(this.#openEvent)}#emitClose(){this.srcElement.dispatchEvent(this.#closeEvent)}}export default TreeselectInput;
+import svg from"./svgIcons.js";class TreeselectInput{#htmlTagsSection=null;#htmlEditControl=null;#htmlOperators=null;#htmlArrow=null;#openEvent=new CustomEvent("open");#closeEvent=new CustomEvent("close");constructor({value:e,showTags:t,clearable:s,isAlwaysOpened:a,searchable:i,placeholder:n,disabled:r}){this.value=e,this.showTags=t??!0,this.searchable=i??!0,this.placeholder=n??"Search...",this.clearable=s??!0,this.isAlwaysOpened=a??!1,this.disabled=r??!1,this.isOpened=!1,this.searchText="",this.srcElement=this.#createTreeselectInput(),this.#updateDOM()}focus(){this.#htmlEditControl.focus()}blur(){this.isOpened&&this.#updateOpenClose()}updateValue(e){this.value=e,this.#updateTags(),this.#updateEditControl()}removeItem(t){this.value=this.value.filter(e=>e.id!==t),this.#emitInput(),this.#updateTags(),this.#updateEditControl()}clear(){this.value=[],this.searchText="",this.#emitSearch(""),this.#emitInput(),this.#updateTags(),this.#updateEditControl()}openClose(){this.#updateOpenClose()}#updateDOM(){this.#updateTags(),this.#updateEditControl(),this.#updateOperators()}#updateTags(){this.#htmlTagsSection.innerHTML="",this.showTags?this.#htmlTagsSection.append(...this.#createTags()):this.#htmlTagsSection.appendChild(this.#createCountElement())}#updateOperators(){const e=[];this.#htmlOperators.innerHTML="",this.clearable&&e.push(this.#createClearButton()),this.isAlwaysOpened||e.push(this.#createInputArrow(this.isOpened)),e.length&&this.#htmlOperators.append(...e)}#updateArrowDirection(){var e;this.isAlwaysOpened||(e=this.isOpened?svg.arrowUp:svg.arrowDown,this.#htmlArrow.innerHTML=e)}#updateEditControl(){this.value?.length?this.#htmlEditControl.removeAttribute("placeholder"):this.#htmlEditControl.setAttribute("placeholder",this.placeholder),this.searchable?this.srcElement.classList.remove("treeselect-input--unsearchable"):this.srcElement.classList.add("treeselect-input--unsearchable"),this.#htmlEditControl.value=this.searchText}#updateOpenClose(){this.isOpened=!this.isOpened,this.#updateArrowDirection(),this.isOpened?this.#emitOpen():this.#emitClose()}#createTreeselectInput(){const e=document.createElement("div");return e.classList.add("treeselect-input"),e.setAttribute("tabindex","-1"),this.#htmlTagsSection=this.#createTagsSection(),this.#htmlEditControl=this.#createControl(),this.#htmlOperators=this.#createOperators(),e.addEventListener("mousedown",e=>{e.preventDefault(),this.isOpened||this.#updateOpenClose(),this.focus()}),e.append(this.#htmlTagsSection,this.#htmlEditControl,this.#htmlOperators),e}#createTagsSection(){const e=document.createElement("div");return e.classList.add("treeselect-input__tags"),e}#createTags(){return this.value.map(t=>{const e=document.createElement("div");e.classList.add("treeselect-input__tags-element"),e.setAttribute("tabindex","-1"),e.setAttribute("tag-id",t.id),e.setAttribute("title",t.name);var s=this.#createTagName(t.name),a=this.#createTagCross();return e.addEventListener("mousedown",e=>{e.preventDefault(),e.stopPropagation(),this.focus(),this.removeItem(t.id)}),e.append(s,a),e})}#createTagName(e){const t=document.createElement("span");return t.classList.add("treeselect-input__tags-name"),t.innerHTML=e,t}#createTagCross(){const e=document.createElement("span");return e.classList.add("treeselect-input__tags-cross"),e.innerHTML=svg.cross,e}#createCountElement(){const e=document.createElement("span");return e.classList.add("treeselect-input__tags-count"),this.value.length?e.innerHTML=1===this.value.length?this.value[0].name:this.value.length+" elements selected":e.innerHTML="",e}#createControl(){const a=document.createElement("input");return a.classList.add("treeselect-input__edit"),this.disabled&&a.setAttribute("tabindex","-1"),a.addEventListener("keydown",e=>{"Backspace"!==e.key||this.searchText.length||!this.value.length||this.showTags||this.clear(),"Backspace"===e.key&&!this.searchText.length&&this.value.length&&this.removeItem(this.value[this.value.length-1].id),"Space"!==e.code||this.searchText&&this.searchable||this.#updateOpenClose()}),a.addEventListener("input",e=>{e.stopPropagation();var t=this.searchText,s=a.value.trim();0===t.length&&0===s.length?a.value="":(this.searchable?(this.#emitSearch(e.target.value),this.isOpened||this.#updateOpenClose()):a.value="",this.searchText=a.value)}),a}#createOperators(){const e=document.createElement("div");return e.classList.add("treeselect-input__operators"),e}#createClearButton(){const e=document.createElement("span");return e.classList.add("treeselect-input__clear"),e.setAttribute("tabindex","-1"),e.innerHTML=svg.clear,e.addEventListener("mousedown",e=>{e.preventDefault(),e.stopPropagation(),this.#htmlEditControl.focus(),(this.searchText.length||this.value.length)&&this.clear()}),e}#createInputArrow(e){return this.#htmlArrow=document.createElement("span"),this.#htmlArrow.classList.add("treeselect-input__arrow"),this.#htmlArrow.innerHTML=e?svg.arrowUp:svg.arrowDown,this.#htmlArrow.addEventListener("mousedown",e=>{e.stopPropagation(),e.preventDefault(),this.focus(),this.#updateOpenClose()}),this.#htmlArrow}#emitInput(){this.srcElement.dispatchEvent(new CustomEvent("input",{detail:this.value}))}#emitSearch(e){this.srcElement.dispatchEvent(new CustomEvent("search",{detail:e}))}#emitOpen(){this.srcElement.dispatchEvent(this.#openEvent)}#emitClose(){this.srcElement.dispatchEvent(this.#closeEvent)}}export default TreeselectInput;

package/dist/list.css

@@ -1,7 +1,7 @@
 .treeselect-list{width:100%;box-sizing:border-box;border:1px solid #d7dde4;overflow-y:auto;background-color:#fff;max-height:300px}
 .treeselect-list__group-container{box-sizing:border-box}.treeselect-list__item{display:flex;align-items:center;box-sizing:border-box;cursor:pointer;height:30px}
-.treeselect-list__item--focused{background-color:#f0ffff !important}.treeselect-list__item--hidden{display:none}
-.treeselect-list__item-icon{display:flex;align-items:center;cursor:pointer;height:20px;width:20px;min-width:20px}
+.treeselect-list__item:focus{outline:0}.treeselect-list__item--focused{background-color:#f0ffff !important}
+.treeselect-list__item--hidden{display:none}.treeselect-list__item-icon{display:flex;align-items:center;cursor:pointer;height:20px;width:20px;min-width:20px}
 .treeselect-list__item-icon svg{pointer-events:none;width:100%;height:100%;stroke:#c5c7cb}
 .treeselect-list__item-icon:hover svg{stroke:#838790}.treeselect-list__item-checkbox-container{width:20px;height:20px;min-width:20px;border:1px solid #d7dde4;border-radius:3px;position:relative;background-color:#fff;pointer-events:none;box-sizing:border-box}
 .treeselect-list__item-checkbox-container svg{position:absolute;height:100%;width:100%}

package/dist/list.js

@@ -1 +1 @@
-import svg from"./svgIcons.js";const getFlatOptons=(e,i,l=0,c=0)=>e.reduce((e,t)=>{var s=!!t.children?.length;return e.push({id:t.value,name:t.name,childOf:l,isGroup:s,checked:!1,level:c,isClosed:i<=c&&s,hidden:i<c}),s&&(s=getFlatOptons(t.children,i,t.value,c+1),e.push(...s)),e},[]),checkAllChildrenInputs=({id:t,checked:s},i)=>{i.forEach(e=>{e.childOf===t&&(e.checked=s,e.isGroup&&checkAllChildrenInputs(e,i))})},checkAllParentInputs=(t,e)=>{const s=e.find(e=>e.id===t),i=e.filter(e=>e.childOf===s.id);var l=i.every(e=>e.checked),c=i.some(e=>e.isPartialChecked||e.checked)&&!l,r=!l&&!c;l&&(s.checked=!0,s.isPartialChecked=!1),c&&(s.checked=!1,s.isPartialChecked=!0),r&&(s.checked=!1,s.isPartialChecked=!1),s.childOf&&checkAllParentInputs(s.childOf,e)},checkInput=({id:e,isGroup:t,childOf:s,checked:i},l)=>{t&&checkAllChildrenInputs({id:e,checked:i},l),s&&checkAllParentInputs(s,l)},updateValue=(t,s,e)=>{s.forEach(e=>e.checked=!1);const i=s.filter(e=>t.includes(e.id));i.forEach(e=>{e.checked=!0,e.isPartialChecked=!1,checkInput(e,s)}),updateDOM(s,e)},hideShowChildren=(t,{id:s,isClosed:i})=>{const e=t.filter(e=>e.childOf===s);e.forEach(e=>{e.hidden=i,e.isGroup&&!e.isClosed&&hideShowChildren(t,{id:e.id,isClosed:i})})},updateDOM=(l,c)=>{l.forEach(e=>{const t=c.querySelector(`[input-id="${e.id}"]`),s=getListItemByCheckbox(t);if(t.checked=e.checked,e.checked?s.classList.add("treeselect-list__item--checked"):s.classList.remove("treeselect-list__item--checked"),e.isPartialChecked?s.classList.add("treeselect-list__item--partial-checked"):s.classList.remove("treeselect-list__item--partial-checked"),e.isGroup){const i=s.querySelector(".treeselect-list__item-icon");e.isClosed?(s.classList.add("treeselect-list__item--closed"),i.innerHTML=svg.arrowRight):(s.classList.remove("treeselect-list__item--closed"),i.innerHTML=svg.arrowDown)}e.hidden?s.classList.add("treeselect-list__item--hidden"):s.classList.remove("treeselect-list__item--hidden"),updateLeftPaddingItems(e,s,l),updateCheckboxClasses(e,t)});var e=l.some(e=>!e.hidden);const t=c.querySelector(".treeselect-list__empty");e?t.classList.add("treeselect-list__empty--hidden"):t.classList.remove("treeselect-list__empty--hidden")},updateLeftPaddingItems=(t,e,s)=>{0===t.level?(s=s.some(e=>e.isGroup&&e.level===t.level),s=!t.isGroup&&s?"20px":"5px",e.style.paddingLeft=t.isGroup?"0":s):e.style.paddingLeft=t.isGroup?20*t.level+"px":20*t.level+20+"px",e.setAttribute("level",t.level),e.setAttribute("group",t.isGroup)},updateCheckboxClasses=(e,t)=>{const s=t.parentNode,i=s.querySelector(".treeselect-list__item-checkbox-icon");e.checked?i.innerHTML=svg.check:e.isPartialChecked?i.innerHTML=svg.partialCheck:i.innerHTML=""},getAllFlattedChildren=(s,i)=>i.reduce((e,t)=>(t.childOf===s&&(e.push(t),t.isGroup&&e.push(...getAllFlattedChildren(t.id,i))),e),[]),getAllFlattendParents=(s,i)=>i.reduce((e,t)=>(t.id===s&&(e.push(t),t.childOf&&e.push(...getAllFlattendParents(t.childOf,i))),e),[]),getGroupedValues=e=>{const{onlyGroupsIds:t,allItems:s}=e.reduce((e,t)=>(t.checked&&(t.isGroup&&e.onlyGroupsIds.push(t.id),e.allItems.push(t)),e),{onlyGroupsIds:[],allItems:[]});return s.filter(e=>!t.includes(e.childOf))},getCheckedValues=e=>e.filter(e=>e.checked&&!e.isGroup),getListItemByCheckbox=e=>{return e.parentNode.parentNode};class TreeselectList{#lastFocusedItem=null;#isMouseActionsAvailable=!0;constructor({options:e,value:t,openLevel:s,listSlotHtmlComponent:i,emptyText:l}){this.options=e,this.value=t,this.searchText="",this.openLevel=s??0,this.listSlotHtmlComponent=i,this.emptyText=l??"No results found...",this.flattedOptions=getFlatOptons(this.options,this.openLevel),this.flattedOptionsBeforeSearch=this.flattedOptions,this.selectedNodes={ids:[],groupedIds:[]},this.srcElement=this.#createList(),this.updateValue(this.value)}updateValue(e){updateValue(e,this.flattedOptions,this.srcElement),this.#updateSelectedNodes()}updateSearchValue(i){var e=""===this.searchText&&""!==i;if(this.searchText=i,e&&(this.flattedOptionsBeforeSearch=JSON.parse(JSON.stringify(this.flattedOptions))),""===this.searchText)return this.flattedOptions=this.flattedOptionsBeforeSearch.map(t=>{const e=this.flattedOptions.find(e=>e.id===t.id);return e.isClosed=t.isClosed,e.hidden=t.hidden,e}),this.flattedOptionsBeforeSearch=[],updateDOM(this.flattedOptions,this.srcElement),void this.focusFirstListElement();const s=this.flattedOptions.reduce((e,t)=>{var s;return t.name.toLowerCase().includes(i.toLowerCase())&&(e.push(t),t.isGroup&&(s=getAllFlattedChildren(t.id,this.flattedOptions),e.push(...s)),t.childOf&&(s=getAllFlattendParents(t.childOf,this.flattedOptions),e.push(...s))),e},[]);this.flattedOptions.forEach(t=>{s.some(e=>e.id===t.id)?(t.isGroup&&(t.isClosed=!1,hideShowChildren(this.flattedOptions,t)),t.hidden=!1):t.hidden=!0}),updateDOM(this.flattedOptions,this.srcElement),this.focusFirstListElement()}callKeyAction(e){this.#isMouseActionsAvailable=!1;const t=this.srcElement.querySelector(".treeselect-list__item--focused");if("Enter"===e&&t&&t.dispatchEvent(new Event("mousedown")),"ArrowLeft"===e||"ArrowRight"===e){if(!t)return;const c=t.querySelector(".treeselect-list__item-checkbox"),r=c.getAttribute("input-id");var s=this.flattedOptions.find(e=>e.id===r);const o=t.querySelector(".treeselect-list__item-icon");"ArrowLeft"!==e||s.isClosed||o.dispatchEvent(new Event("mousedown")),"ArrowRight"===e&&s.isClosed&&o.dispatchEvent(new Event("mousedown"))}if("ArrowDown"===e||"ArrowUp"===e){const d=Array.from(this.srcElement.querySelectorAll(".treeselect-list__item-checkbox")).filter(e=>"none"!==window.getComputedStyle(getListItemByCheckbox(e)).display);if(d.length)if(t){s=d.findIndex(e=>getListItemByCheckbox(e).classList.contains("treeselect-list__item--focused"));const n=getListItemByCheckbox(d[s]);n.classList.remove("treeselect-list__item--focused");var s="ArrowDown"===e?s+1:s-1,i="ArrowDown"===e?0:d.length-1,i=d[s]??d[i],s=!d[s];const a=getListItemByCheckbox(i);a.classList.add("treeselect-list__item--focused");var i=this.srcElement.getBoundingClientRect(),l=a.getBoundingClientRect();s&&"ArrowDown"===e?this.srcElement.scroll(0,0):s&&"ArrowUp"===e?this.srcElement.scroll(0,this.srcElement.scrollHeight):i.y+i.height<l.y+l.height?this.srcElement.scroll(0,this.srcElement.scrollTop+l.height):i.y>l.y&&this.srcElement.scroll(0,this.srcElement.scrollTop-l.height)}else{const h=getListItemByCheckbox(d[0]);h.classList.add("treeselect-list__item--focused")}}}focusFirstListElement(){var e="treeselect-list__item--focused";const t=this.srcElement.querySelector("."+e);var s=Array.from(this.srcElement.querySelectorAll(".treeselect-list__item-checkbox")).filter(e=>"none"!==window.getComputedStyle(getListItemByCheckbox(e)).display);if(s.length){t&&t.classList.remove(e);const i=getListItemByCheckbox(s[0]);i.classList.add(e)}}#createList(){const e=[],t=document.createElement("div");t.classList.add("treeselect-list");var s=this.#getListHTML(this.options);if(e.push(...s),this.listSlotHtmlComponent){const i=document.createElement("div");i.classList.add("treeselect-list__slot"),i.appendChild(this.listSlotHtmlComponent),e.push(i)}s=this.#createEmptyList();return e.push(s),t.addEventListener("mouseout",e=>{e.stopPropagation(),this.#lastFocusedItem&&this.#isMouseActionsAvailable&&this.#lastFocusedItem.classList.add("treeselect-list__item--focused")}),t.addEventListener("mousemove",()=>{this.#isMouseActionsAvailable=!0}),t.append(...e),t}#getListHTML(e){return e.reduce((e,t)=>{if(t.children?.length){const i=this.#createGroupContainer(t);var s=this.#getListHTML(t.children);return i.append(...s),e.push(i),e}s=this.#createGroupItem(t,!1);return e.push(s),e},[])}#createGroupContainer(e){const t=document.createElement("div");t.setAttribute("group-container-id",e.value),t.classList.add("treeselect-list__group-container");e=this.#createGroupItem(e,!0);return t.appendChild(e),t}#createGroupItem(s,e){const t=document.createElement("div");t.setAttribute("tabindex","-1"),t.setAttribute("title",s.name),t.classList.add("treeselect-list__item"),e&&(e=this.#createArrow(),t.appendChild(e)),t.addEventListener("mouseover",()=>{this.#isMouseActionsAvailable&&this.#groupMouseAction(!0,t)},!0),t.addEventListener("mouseout",()=>{this.#isMouseActionsAvailable&&(this.#groupMouseAction(!1,t),this.#lastFocusedItem=t)},!0),t.addEventListener("mousedown",e=>{e.stopPropagation();const t=e.target.querySelector(".treeselect-list__item-checkbox");t.checked=!t.checked,this.#checkboxClickEvent(t,s)});var e=this.#createCheckbox(s),i=this.#createCheckboxLabel(s);return t.append(e,i),t}#createArrow(){const e=document.createElement("span");return e.setAttribute("tabindex","-1"),e.classList.add("treeselect-list__item-icon"),e.innerHTML=svg.arrowDown,e.addEventListener("mousedown",e=>{e.stopPropagation(),this.#arrowClickEvent(e)}),e}#createCheckbox(e){const t=document.createElement("div"),s=(t.classList.add("treeselect-list__item-checkbox-container"),document.createElement("span")),i=(s.classList.add("treeselect-list__item-checkbox-icon"),s.innerHTML="",document.createElement("input"));return i.setAttribute("tabindex","-1"),i.setAttribute("type","checkbox"),i.setAttribute("input-id",e.value),i.classList.add("treeselect-list__item-checkbox"),t.append(s,i),t}#createCheckboxLabel(e){const t=document.createElement("label");return t.innerHTML=e.name,t.classList.add("treeselect-list__item-label"),t}#createEmptyList(){const e=document.createElement("div"),t=(e.classList.add("treeselect-list__empty"),e.setAttribute("title",this.emptyText),document.createElement("span")),s=(t.classList.add("treeselect-list__empty-icon"),t.innerHTML=svg.attention,document.createElement("span"));return s.classList.add("treeselect-list__empty-text"),s.innerHTML=this.emptyText,e.append(t,s),e}#checkboxClickEvent(e,t){const s=this.flattedOptions.find(e=>e.id===t.value);s.checked=e.checked,s.isPartialChecked=!1,checkInput(s,this.flattedOptions),updateDOM(this.flattedOptions,this.srcElement),this.#emitInput()}#arrowClickEvent(e){const t=e.target.parentNode.querySelector("[input-id]"),s=t.getAttribute("input-id"),i=this.flattedOptions.find(e=>e.id===s);i.isClosed=!i.isClosed,hideShowChildren(this.flattedOptions,i),updateDOM(this.flattedOptions,this.srcElement),this.#emitArrrowClick()}#groupMouseAction(e,t){const s="treeselect-list__item--focused";if(e){const i=Array.from(this.srcElement.querySelectorAll("."+s));i.length&&i.forEach(e=>e.classList.remove(s)),t.classList.add(s)}else t.classList.remove(s)}#updateSelectedNodes(){this.selectedNodes={ids:getCheckedValues(this.flattedOptions),groupedIds:getGroupedValues(this.flattedOptions)}}#emitArrrowClick(){this.srcElement.dispatchEvent(new CustomEvent("arrow-click"))}#emitInput(){this.#updateSelectedNodes(),this.srcElement.dispatchEvent(new CustomEvent("input",{detail:this.selectedNodes}))}}export default TreeselectList;
+import svg from"./svgIcons.js";const getFlatOptions=(e,i,l=0,c=0)=>e.reduce((e,t)=>{var s=!!t.children?.length;return e.push({id:t.value,name:t.name,childOf:l,isGroup:s,checked:!1,level:c,isClosed:i<=c&&s,hidden:i<c}),s&&(s=getFlatOptions(t.children,i,t.value,c+1),e.push(...s)),e},[]),checkAllChildrenInputs=({id:t,checked:s},i)=>{i.forEach(e=>{e.childOf===t&&(e.checked=s,e.isPartialChecked=!1,e.isGroup&&checkAllChildrenInputs(e,i))})},checkAllParentInputs=(t,e)=>{const s=e.find(e=>e.id===t),i=e.filter(e=>e.childOf===s.id);var l=i.every(e=>e.checked),c=i.some(e=>e.isPartialChecked||e.checked)&&!l,r=!l&&!c;l&&(s.checked=!0,s.isPartialChecked=!1),c&&(s.checked=!1,s.isPartialChecked=!0),r&&(s.checked=!1,s.isPartialChecked=!1),s.childOf&&checkAllParentInputs(s.childOf,e)},checkInput=({id:e,isGroup:t,childOf:s,checked:i},l)=>{t&&checkAllChildrenInputs({id:e,checked:i},l),s&&checkAllParentInputs(s,l)},updateValue=(t,s,e)=>{s.forEach(e=>{e.checked=!1,e.isPartialChecked=!1});const i=s.filter(e=>t.includes(e.id));i.forEach(e=>{e.checked=!0,e.isPartialChecked=!1,checkInput(e,s)}),updateDOM(s,e)},hideShowChildren=(t,{id:s,isClosed:i})=>{const e=t.filter(e=>e.childOf===s);e.forEach(e=>{e.hidden=i,e.isGroup&&!e.isClosed&&hideShowChildren(t,{id:e.id,isClosed:i})})},updateDOM=(l,c)=>{l.forEach(e=>{const t=c.querySelector(`[input-id="${e.id}"]`),s=getListItemByCheckbox(t);if(t.checked=e.checked,e.checked?s.classList.add("treeselect-list__item--checked"):s.classList.remove("treeselect-list__item--checked"),e.isPartialChecked?s.classList.add("treeselect-list__item--partial-checked"):s.classList.remove("treeselect-list__item--partial-checked"),e.isGroup){const i=s.querySelector(".treeselect-list__item-icon");e.isClosed?(s.classList.add("treeselect-list__item--closed"),i.innerHTML=svg.arrowRight):(s.classList.remove("treeselect-list__item--closed"),i.innerHTML=svg.arrowDown)}e.hidden?s.classList.add("treeselect-list__item--hidden"):s.classList.remove("treeselect-list__item--hidden"),updateLeftPaddingItems(e,s,l),updateCheckboxClasses(e,t)});var e=l.some(e=>!e.hidden);const t=c.querySelector(".treeselect-list__empty");e?t.classList.add("treeselect-list__empty--hidden"):t.classList.remove("treeselect-list__empty--hidden")},updateLeftPaddingItems=(t,e,s)=>{0===t.level?(s=s.some(e=>e.isGroup&&e.level===t.level),s=!t.isGroup&&s?"20px":"5px",e.style.paddingLeft=t.isGroup?"0":s):e.style.paddingLeft=t.isGroup?20*t.level+"px":20*t.level+20+"px",e.setAttribute("level",t.level),e.setAttribute("group",t.isGroup)},updateCheckboxClasses=(e,t)=>{const s=t.parentNode,i=s.querySelector(".treeselect-list__item-checkbox-icon");e.checked?i.innerHTML=svg.check:e.isPartialChecked?i.innerHTML=svg.partialCheck:i.innerHTML=""},getAllFlattedChildren=(s,i)=>i.reduce((e,t)=>(t.childOf===s&&(e.push(t),t.isGroup&&e.push(...getAllFlattedChildren(t.id,i))),e),[]),getAllFlattenParents=(s,i)=>i.reduce((e,t)=>(t.id===s&&(e.push(t),t.childOf&&e.push(...getAllFlattenParents(t.childOf,i))),e),[]),getGroupedValues=e=>{const{onlyGroupsIds:t,allItems:s}=e.reduce((e,t)=>(t.checked&&(t.isGroup&&e.onlyGroupsIds.push(t.id),e.allItems.push(t)),e),{onlyGroupsIds:[],allItems:[]});return s.filter(e=>!t.includes(e.childOf))},getCheckedValues=e=>e.filter(e=>e.checked&&!e.isGroup),getListItemByCheckbox=e=>{return e.parentNode.parentNode},validateOptions=e=>{const t=e.reduce((e,t)=>(e.allItems.includes(t.id)&&e.duplications.push(t.id),e.allItems.push(t.id),e),{duplications:[],allItems:[]})["duplications"];t.length&&console.error(`Validation: You have duplicated values: ${t.join(", ")}! You should use unique values.`)};class TreeselectList{#lastFocusedItem=null;#isMouseActionsAvailable=!0;constructor({options:e,value:t,openLevel:s,listSlotHtmlComponent:i,emptyText:l}){this.options=e,this.value=t,this.searchText="",this.openLevel=s??0,this.listSlotHtmlComponent=i,this.emptyText=l??"No results found...",this.flattedOptions=getFlatOptions(this.options,this.openLevel),this.flattedOptionsBeforeSearch=this.flattedOptions,this.selectedNodes={ids:[],groupedIds:[]},this.srcElement=this.#createList(),this.updateValue(this.value),validateOptions(this.flattedOptions)}updateValue(e){updateValue(e,this.flattedOptions,this.srcElement),this.#updateSelectedNodes()}updateSearchValue(i){if(i!==this.searchText){var e=""===this.searchText&&""!==i;if(this.searchText=i,e&&(this.flattedOptionsBeforeSearch=JSON.parse(JSON.stringify(this.flattedOptions))),""===this.searchText)return this.flattedOptions=this.flattedOptionsBeforeSearch.map(t=>{const e=this.flattedOptions.find(e=>e.id===t.id);return e.isClosed=t.isClosed,e.hidden=t.hidden,e}),this.flattedOptionsBeforeSearch=[],updateDOM(this.flattedOptions,this.srcElement),void this.focusFirstListElement();const s=this.flattedOptions.reduce((e,t)=>{var s;return t.name.toLowerCase().includes(i.toLowerCase())&&(e.push(t),t.isGroup&&(s=getAllFlattedChildren(t.id,this.flattedOptions),e.push(...s)),t.childOf&&(s=getAllFlattenParents(t.childOf,this.flattedOptions),e.push(...s))),e},[]);this.flattedOptions.forEach(t=>{s.some(e=>e.id===t.id)?(t.isGroup&&(t.isClosed=!1,hideShowChildren(this.flattedOptions,t)),t.hidden=!1):t.hidden=!0}),updateDOM(this.flattedOptions,this.srcElement),this.focusFirstListElement()}}callKeyAction(e){this.#isMouseActionsAvailable=!1;const t=this.srcElement.querySelector(".treeselect-list__item--focused");if("Enter"===e&&t&&t.dispatchEvent(new Event("mousedown")),"ArrowLeft"===e||"ArrowRight"===e){if(!t)return;const c=t.querySelector(".treeselect-list__item-checkbox"),r=c.getAttribute("input-id");var s=this.flattedOptions.find(e=>e.id===r);const o=t.querySelector(".treeselect-list__item-icon");"ArrowLeft"!==e||s.isClosed||o.dispatchEvent(new Event("mousedown")),"ArrowRight"===e&&s.isClosed&&o.dispatchEvent(new Event("mousedown"))}if("ArrowDown"===e||"ArrowUp"===e){const d=Array.from(this.srcElement.querySelectorAll(".treeselect-list__item-checkbox")).filter(e=>"none"!==window.getComputedStyle(getListItemByCheckbox(e)).display);if(d.length)if(t){s=d.findIndex(e=>getListItemByCheckbox(e).classList.contains("treeselect-list__item--focused"));const n=getListItemByCheckbox(d[s]);n.classList.remove("treeselect-list__item--focused");var s="ArrowDown"===e?s+1:s-1,i="ArrowDown"===e?0:d.length-1,i=d[s]??d[i],s=!d[s];const a=getListItemByCheckbox(i);a.classList.add("treeselect-list__item--focused");var i=this.srcElement.getBoundingClientRect(),l=a.getBoundingClientRect();s&&"ArrowDown"===e?this.srcElement.scroll(0,0):s&&"ArrowUp"===e?this.srcElement.scroll(0,this.srcElement.scrollHeight):i.y+i.height<l.y+l.height?this.srcElement.scroll(0,this.srcElement.scrollTop+l.height):i.y>l.y&&this.srcElement.scroll(0,this.srcElement.scrollTop-l.height)}else{const h=getListItemByCheckbox(d[0]);h.classList.add("treeselect-list__item--focused")}}}focusFirstListElement(){var e="treeselect-list__item--focused";const t=this.srcElement.querySelector("."+e);var s=Array.from(this.srcElement.querySelectorAll(".treeselect-list__item-checkbox")).filter(e=>"none"!==window.getComputedStyle(getListItemByCheckbox(e)).display);if(s.length){t&&t.classList.remove(e);const i=getListItemByCheckbox(s[0]);i.classList.add(e)}}#createList(){const e=[],t=document.createElement("div");t.classList.add("treeselect-list");var s=this.#getListHTML(this.options);if(e.push(...s),this.listSlotHtmlComponent){const i=document.createElement("div");i.classList.add("treeselect-list__slot"),i.appendChild(this.listSlotHtmlComponent),e.push(i)}s=this.#createEmptyList();return e.push(s),t.addEventListener("mouseout",e=>{e.stopPropagation(),this.#lastFocusedItem&&this.#isMouseActionsAvailable&&this.#lastFocusedItem.classList.add("treeselect-list__item--focused")}),t.addEventListener("mousemove",()=>{this.#isMouseActionsAvailable=!0}),t.append(...e),t}#getListHTML(e){return e.reduce((e,t)=>{if(t.children?.length){const i=this.#createGroupContainer(t);var s=this.#getListHTML(t.children);return i.append(...s),e.push(i),e}s=this.#createGroupItem(t,!1);return e.push(s),e},[])}#createGroupContainer(e){const t=document.createElement("div");t.setAttribute("group-container-id",e.value),t.classList.add("treeselect-list__group-container");e=this.#createGroupItem(e,!0);return t.appendChild(e),t}#createGroupItem(s,e){const t=document.createElement("div");t.setAttribute("tabindex","-1"),t.setAttribute("title",s.name),t.classList.add("treeselect-list__item"),e&&(e=this.#createArrow(),t.appendChild(e)),t.addEventListener("mouseover",()=>{this.#isMouseActionsAvailable&&this.#groupMouseAction(!0,t)},!0),t.addEventListener("mouseout",()=>{this.#isMouseActionsAvailable&&(this.#groupMouseAction(!1,t),this.#lastFocusedItem=t)},!0),t.addEventListener("mousedown",e=>{e.stopPropagation();const t=e.target.querySelector(".treeselect-list__item-checkbox");t.checked=!t.checked,this.#checkboxClickEvent(t,s)});var e=this.#createCheckbox(s),i=this.#createCheckboxLabel(s);return t.append(e,i),t}#createArrow(){const e=document.createElement("span");return e.setAttribute("tabindex","-1"),e.classList.add("treeselect-list__item-icon"),e.innerHTML=svg.arrowDown,e.addEventListener("mousedown",e=>{e.stopPropagation(),this.#arrowClickEvent(e)}),e}#createCheckbox(e){const t=document.createElement("div"),s=(t.classList.add("treeselect-list__item-checkbox-container"),document.createElement("span")),i=(s.classList.add("treeselect-list__item-checkbox-icon"),s.innerHTML="",document.createElement("input"));return i.setAttribute("tabindex","-1"),i.setAttribute("type","checkbox"),i.setAttribute("input-id",e.value),i.classList.add("treeselect-list__item-checkbox"),t.append(s,i),t}#createCheckboxLabel(e){const t=document.createElement("label");return t.innerHTML=e.name,t.classList.add("treeselect-list__item-label"),t}#createEmptyList(){const e=document.createElement("div"),t=(e.classList.add("treeselect-list__empty"),e.setAttribute("title",this.emptyText),document.createElement("span")),s=(t.classList.add("treeselect-list__empty-icon"),t.innerHTML=svg.attention,document.createElement("span"));return s.classList.add("treeselect-list__empty-text"),s.innerHTML=this.emptyText,e.append(t,s),e}#checkboxClickEvent(e,t){const s=this.flattedOptions.find(e=>e.id===t.value);s.checked=e.checked,s.isPartialChecked=!1,checkInput(s,this.flattedOptions),updateDOM(this.flattedOptions,this.srcElement),this.#emitInput()}#arrowClickEvent(e){const t=e.target.parentNode.querySelector("[input-id]"),s=t.getAttribute("input-id"),i=this.flattedOptions.find(e=>e.id===s);i.isClosed=!i.isClosed,hideShowChildren(this.flattedOptions,i),updateDOM(this.flattedOptions,this.srcElement),this.#emitArrowClick()}#groupMouseAction(e,t){const s="treeselect-list__item--focused";if(e){const i=Array.from(this.srcElement.querySelectorAll("."+s));i.length&&i.forEach(e=>e.classList.remove(s)),t.classList.add(s)}else t.classList.remove(s)}#updateSelectedNodes(){this.selectedNodes={ids:getCheckedValues(this.flattedOptions),groupedIds:getGroupedValues(this.flattedOptions)}}#emitArrowClick(){this.srcElement.dispatchEvent(new CustomEvent("arrow-click"))}#emitInput(){this.#updateSelectedNodes(),this.srcElement.dispatchEvent(new CustomEvent("input",{detail:this.selectedNodes}))}}export default TreeselectList;

package/dist/treeselect-js.css

@@ -1,8 +1,8 @@
 @import './input.css';@import './list.css';.treeselect{width:100%;position:relative;box-sizing:border-box}
-.treeselect--disabled{pointer-events:none}.treeselect-list{position:absolute;left:0;border-radius:4px;box-sizing:border-box;z-index:1050}
-.treeselect .treeselect-list{position:absolute}.treeselect-input--focused{border-color:#101010}
-.treeselect-input--opened.treeselect-input--top{border-top-color:transparent;border-top-left-radius:0;border-top-right-radius:0}
+.treeselect--disabled{pointer-events:none}.treeselect-list{position:absolute;left:0;border-radius:4px;box-sizing:border-box;z-index:1000}
+.treeselect .treeselect-list{position:absolute}.treeselect .treeselect-list--static{position:static}
+.treeselect-input--focused{border-color:#101010}.treeselect-input--opened.treeselect-input--top{border-top-color:transparent;border-top-left-radius:0;border-top-right-radius:0}
 .treeselect-input--opened.treeselect-input--bottom{border-bottom-color:transparent;border-bottom-left-radius:0;border-bottom-right-radius:0}
 .treeselect-list--focused{border-color:#101010}.treeselect-list--top,.treeselect-list--top-to-body{border-bottom-color:#d7dde4;border-bottom-left-radius:0;border-bottom-right-radius:0}
-.treeselect-list--bottom,.treeselect-list--bottom-to-body{border-top-color:gainsboro;border-top-left-radius:0;border-top-right-radius:0}
+.treeselect-list--bottom,.treeselect-list--bottom-to-body{border-top-color:#d7dde4;border-top-left-radius:0;border-top-right-radius:0}
 .treeselect-list--top{left:0;bottom:100%}.treeselect-list--bottom{left:0;top:100%}

package/dist/treeselect-js.js

@@ -1 +1 @@
-import TreeselectInput from"./input.js";import TreeselectList from"./list.js";class Treeselect{#htmlContainer=null;#treeselectList=null;#treeselectInput=null;#transform={top:null,bottom:null};#treeselectInitPosition=null;#containerResizer=null;#containerWidth=0;#scrollEvent=null;#focusEvent=null;#blurEvent=null;constructor({parentHtmlContainer:e,value:t,options:s,openLevel:i,appendToBody:n,alwaysOpen:l,showTags:r,clearable:o,searchable:c,placeholder:a,grouped:d,listSlotHtmlComponent:h,disabled:u,emptyText:p}){this.parentHtmlContainer=e,this.value=t??[],this.options=s??[],this.openLevel=i??0,this.appendToBody=n??!0,this.alwaysOpen=l&&!u,this.showTags=r??!0,this.clearable=o??!0,this.searchable=c??!0,this.placeholder=a??"Search...",this.grouped=d??!0,this.listSlotHtmlComponent=h??null,this.disabled=u??!1,this.emptyText=p??"No results found...",this.srcElement=null,this.mount()}mount(){this.srcElement&&(this.#closeList(),this.srcElement.innerHTML="",this.srcElement=null,this.#removeOutsideListeners()),this.srcElement=this.#createTreeselect(),this.#scrollEvent=this.scrollWindowHandler.bind(this),this.#focusEvent=this.focusWindowHandler.bind(this),this.#blurEvent=this.blurWindowHandler.bind(this),this.alwaysOpen&&this.#treeselectInput.openClose(),this.disabled&&this.srcElement.classList.add("treeselect--disabled")}updateValue(e){const t=this.#treeselectList;t.updateValue(e);var{groupedIds:e,ids:s}=t.selectedNodes,e=this.grouped?e:s;this.#treeselectInput.updateValue(e)}destroy(){this.srcElement&&(this.#closeList(),this.srcElement.innerHTML="",this.srcElement=null,this.#removeOutsideListeners())}#createTreeselect(){const t=this.parentHtmlContainer,s=(t.classList.add("treeselect"),new TreeselectList({options:this.options,value:this.value,openLevel:this.openLevel,listSlotHtmlComponent:this.listSlotHtmlComponent,emptyText:this.emptyText}));var{groupedIds:e,ids:i}=s.selectedNodes;const n=new TreeselectInput({value:this.grouped?e:i,showTags:this.showTags,clearable:this.clearable,isAlwaysOpened:this.alwaysOpen,searchable:this.searchable,placeholder:this.placeholder,disabled:this.disabled});return this.appendToBody&&(this.#containerResizer=new ResizeObserver(()=>{var e=this.srcElement.getBoundingClientRect()["width"];this.#containerWidth=e,this.updateListPosition(t,s.srcElement,!0)})),n.srcElement.addEventListener("input",e=>{e=e.detail.map(({id:e})=>e);this.value=e,s.updateValue(e),this.#emitInput()}),n.srcElement.addEventListener("open",()=>this.#openList()),n.srcElement.addEventListener("keydown",e=>s.callKeyAction(e.key)),n.srcElement.addEventListener("search",e=>{s.updateSearchValue(e.detail),this.updateListPosition(t,s.srcElement,!0)}),n.srcElement.addEventListener("focus",()=>{this.#updateFocusClasses(!0),document.addEventListener("mousedown",this.#focusEvent,!0),document.addEventListener("focus",this.#focusEvent,!0),window.addEventListener("blur",this.#blurEvent)},!0),this.alwaysOpen||n.srcElement.addEventListener("close",()=>{this.#closeList()}),s.srcElement.addEventListener("mouseup",()=>{n.focus()},!0),s.srcElement.addEventListener("input",e=>{const{groupedIds:t,ids:s}=e.detail;e=this.grouped?t:s;n.updateValue(e),this.value=s.map(({id:e})=>e),n.focus(),this.#emitInput()}),s.srcElement.addEventListener("arrow-click",()=>{n.focus(),this.updateListPosition(t,s.srcElement,!0)}),this.#htmlContainer=t,this.#treeselectList=s,this.#treeselectInput=n,t.append(n.srcElement),t}#openList(){window.addEventListener("scroll",this.#scrollEvent,!0),this.appendToBody?(document.body.appendChild(this.#treeselectList.srcElement),this.#containerResizer.observe(this.#htmlContainer)):this.#htmlContainer.appendChild(this.#treeselectList.srcElement),this.updateListPosition(this.#htmlContainer,this.#treeselectList.srcElement,!1),this.#updateOpenCloseClasses(!0),this.#treeselectList.focusFirstListElement()}#closeList(){window.removeEventListener("scroll",this.#scrollEvent,!0),(this.appendToBody?document.body:this.#htmlContainer).contains(this.#treeselectList.srcElement)&&(this.appendToBody?(document.body.removeChild(this.#treeselectList.srcElement),this.#containerResizer?.disconnect()):this.#htmlContainer.removeChild(this.#treeselectList.srcElement),this.#updateOpenCloseClasses(!1))}#updateDirectionClasses(e,t){var s=t?"treeselect-list--top-to-body":"treeselect-list--top",t=t?"treeselect-list--bottom-to-body":"treeselect-list--bottom";e?(this.#treeselectList.srcElement.classList.add(s),this.#treeselectList.srcElement.classList.remove(t),this.#treeselectInput.srcElement.classList.add("treeselect-input--top"),this.#treeselectInput.srcElement.classList.remove("treeselect-input--bottom")):(this.#treeselectList.srcElement.classList.remove(s),this.#treeselectList.srcElement.classList.add(t),this.#treeselectInput.srcElement.classList.remove("treeselect-input--top"),this.#treeselectInput.srcElement.classList.add("treeselect-input--bottom"))}#updateFocusClasses(e){e?(this.#treeselectInput.srcElement.classList.add("treeselect-input--focused"),this.#treeselectList.srcElement.classList.add("treeselect-list--focused")):(this.#treeselectInput.srcElement.classList.remove("treeselect-input--focused"),this.#treeselectList.srcElement.classList.remove("treeselect-list--focused"))}#updateOpenCloseClasses(e){e?this.#treeselectInput.srcElement.classList.add("treeselect-input--opened"):this.#treeselectInput.srcElement.classList.remove("treeselect-input--opened")}#removeOutsideListeners(){window.removeEventListener("scroll",this.#scrollEvent,!0),document.removeEventListener("click",this.#focusEvent,!0),document.removeEventListener("focus",this.#focusEvent,!0),window.removeEventListener("blur",this.#blurEvent)}scrollWindowHandler(){this.updateListPosition(this.#htmlContainer,this.#treeselectList.srcElement,!0)}focusWindowHandler(e){this.#htmlContainer.contains(e.target)||this.#treeselectList.srcElement.contains(e.target)||(this.#treeselectInput.blur(),this.#removeOutsideListeners(),this.#updateFocusClasses(!1))}blurWindowHandler(){this.#treeselectInput.blur(),this.#removeOutsideListeners(),this.#updateFocusClasses(!1)}updateListPosition(e,t,s){var i=e.getBoundingClientRect().y,n=window.innerHeight-e.getBoundingClientRect().y,l=t.clientHeight,n=n<i&&window.innerHeight-i<l+45,i=n?"top":"buttom",r=t.getAttribute("direction");if(this.#htmlContainer.setAttribute("direction",i),!this.appendToBody)return r===i?void 0:void this.#updateDirectionClasses(n,!1);if(!this.#treeselectInitPosition||s){t.style.transform=null;const{x:d,y:o}=t.getBoundingClientRect(),{x:c,y:a}=e.getBoundingClientRect();this.#treeselectInitPosition={containerX:c,containerY:a,listX:d,listY:o}}const{listY:o,containerX:c,containerY:a}=this.#treeselectInitPosition;i=e.clientHeight;r&&!s||(this.#transform.top=`translateY(${a-o-l}px)`,this.#transform.bottom=`translateY(${a+i-o}px)`),t.style.transform=n?this.#transform.top:this.#transform.bottom,this.#updateDirectionClasses(n,!0),t.style.width=this.#containerWidth+"px",t.style.left=c+"px"}#emitInput(){this.srcElement.dispatchEvent(new CustomEvent("input",{detail:this.value}))}}export default Treeselect;
+import TreeselectInput from"./input.js";import TreeselectList from"./list.js";const validateProps=({parentHtmlContainer:e,staticList:t,appendToBody:s})=>{e||console.error("Validation: parentHtmlContainer prop is required!"),t&&s&&console.error("Validation: You should set staticList to false if you use appendToBody!")};class Treeselect{#htmlContainer=null;#treeselectList=null;#treeselectInput=null;#containerResizer=null;#scrollEvent=null;#resizeEvent=null;#focusEvent=null;#blurEvent=null;#isListOpened=!1;constructor({parentHtmlContainer:e,value:t,options:s,openLevel:i,appendToBody:n,alwaysOpen:l,showTags:r,clearable:o,searchable:a,placeholder:c,grouped:d,listSlotHtmlComponent:h,disabled:p,emptyText:u,staticList:m}){validateProps({parentHtmlContainer:e,staticList:m,appendToBody:n}),this.parentHtmlContainer=e,this.value=t??[],this.options=s??[],this.openLevel=i??0,this.appendToBody=n??!0,this.alwaysOpen=l&&!p,this.showTags=r??!0,this.clearable=o??!0,this.searchable=a??!0,this.placeholder=c??"Search...",this.grouped=d??!0,this.listSlotHtmlComponent=h??null,this.disabled=p??!1,this.emptyText=u??"No results found...",this.staticList=m&&!this.appendToBody,this.srcElement=null,this.mount()}mount(){this.destroy(),this.srcElement=this.#createTreeselect(),this.#scrollEvent=this.scrollWindowHandler.bind(this),this.#resizeEvent=this.scrollWindowHandler.bind(this),this.#focusEvent=this.focusWindowHandler.bind(this),this.#blurEvent=this.blurWindowHandler.bind(this),this.alwaysOpen&&this.#treeselectInput.openClose(),this.disabled&&this.srcElement.classList.add("treeselect--disabled")}updateValue(e){const t=this.#treeselectList;t.updateValue(e);var{groupedIds:e,ids:s}=t.selectedNodes,e=this.grouped?e:s;this.#treeselectInput.updateValue(e)}destroy(){this.srcElement&&(this.#closeList(),this.srcElement.innerHTML="",this.srcElement=null,this.#removeOutsideListeners(!0))}#createTreeselect(){const e=this.parentHtmlContainer,t=(e.classList.add("treeselect"),new TreeselectList({options:this.options,value:this.value,openLevel:this.openLevel,listSlotHtmlComponent:this.listSlotHtmlComponent,emptyText:this.emptyText}));var{groupedIds:s,ids:i}=t.selectedNodes;const n=new TreeselectInput({value:this.grouped?s:i,showTags:this.showTags,clearable:this.clearable,isAlwaysOpened:this.alwaysOpen,searchable:this.searchable,placeholder:this.placeholder,disabled:this.disabled});return this.appendToBody&&(this.#containerResizer=new ResizeObserver(()=>{this.updateListPosition()})),n.srcElement.addEventListener("input",e=>{e=e.detail.map(({id:e})=>e);this.value=e,t.updateValue(e),this.#emitInput()}),n.srcElement.addEventListener("open",()=>this.#openList()),n.srcElement.addEventListener("keydown",e=>{this.#isListOpened&&t.callKeyAction(e.key)}),n.srcElement.addEventListener("search",e=>{t.updateSearchValue(e.detail),this.updateListPosition()}),n.srcElement.addEventListener("focus",()=>{this.#updateFocusClasses(!0),document.addEventListener("mousedown",this.#focusEvent,!0),document.addEventListener("focus",this.#focusEvent,!0),window.addEventListener("blur",this.#blurEvent)},!0),this.alwaysOpen||n.srcElement.addEventListener("close",()=>{this.#closeList()}),t.srcElement.addEventListener("mouseup",()=>{n.focus()},!0),t.srcElement.addEventListener("input",e=>{const{groupedIds:t,ids:s}=e.detail;e=this.grouped?t:s;n.updateValue(e),this.value=s.map(({id:e})=>e),n.focus(),this.#emitInput()}),t.srcElement.addEventListener("arrow-click",()=>{n.focus(),this.updateListPosition()}),this.#htmlContainer=e,this.#treeselectList=t,this.#treeselectInput=n,e.append(n.srcElement),e}#openList(){this.#isListOpened=!0,window.addEventListener("scroll",this.#scrollEvent,!0),window.addEventListener("resize",this.#resizeEvent),this.appendToBody?(document.body.appendChild(this.#treeselectList.srcElement),this.#containerResizer.observe(this.#htmlContainer)):this.#htmlContainer.appendChild(this.#treeselectList.srcElement),this.updateListPosition(),this.#updateOpenCloseClasses(!0),this.#treeselectList.focusFirstListElement()}#closeList(){this.#isListOpened=!1,window.removeEventListener("scroll",this.#scrollEvent,!0),window.removeEventListener("resize",this.#resizeEvent),(this.appendToBody?document.body:this.#htmlContainer).contains(this.#treeselectList.srcElement)&&(this.appendToBody?(document.body.removeChild(this.#treeselectList.srcElement),this.#containerResizer?.disconnect()):this.#htmlContainer.removeChild(this.#treeselectList.srcElement),this.#updateOpenCloseClasses(!1))}#updateDirectionClasses(e,t){var s=t?"treeselect-list--top-to-body":"treeselect-list--top",t=t?"treeselect-list--bottom-to-body":"treeselect-list--bottom";e?(this.#treeselectList.srcElement.classList.add(s),this.#treeselectList.srcElement.classList.remove(t),this.#treeselectInput.srcElement.classList.add("treeselect-input--top"),this.#treeselectInput.srcElement.classList.remove("treeselect-input--bottom")):(this.#treeselectList.srcElement.classList.remove(s),this.#treeselectList.srcElement.classList.add(t),this.#treeselectInput.srcElement.classList.remove("treeselect-input--top"),this.#treeselectInput.srcElement.classList.add("treeselect-input--bottom"))}#updateFocusClasses(e){e?(this.#treeselectInput.srcElement.classList.add("treeselect-input--focused"),this.#treeselectList.srcElement.classList.add("treeselect-list--focused")):(this.#treeselectInput.srcElement.classList.remove("treeselect-input--focused"),this.#treeselectList.srcElement.classList.remove("treeselect-list--focused"))}#updateOpenCloseClasses(e){e?this.#treeselectInput.srcElement.classList.add("treeselect-input--opened"):this.#treeselectInput.srcElement.classList.remove("treeselect-input--opened"),this.staticList?this.#treeselectList.srcElement.classList.add("treeselect-list--static"):this.#treeselectList.srcElement.classList.remove("treeselect-list--static")}#removeOutsideListeners(e){this.alwaysOpen&&!e||(window.removeEventListener("scroll",this.#scrollEvent,!0),window.removeEventListener("resize",this.#resizeEvent)),document.removeEventListener("click",this.#focusEvent,!0),document.removeEventListener("focus",this.#focusEvent,!0),window.removeEventListener("blur",this.#blurEvent)}scrollWindowHandler(){this.updateListPosition()}focusWindowHandler(e){this.#htmlContainer.contains(e.target)||this.#treeselectList.srcElement.contains(e.target)||(this.#treeselectInput.blur(),this.#removeOutsideListeners(),this.#updateFocusClasses(!1))}blurWindowHandler(){this.#treeselectInput.blur(),this.#removeOutsideListeners(),this.#updateFocusClasses(!1)}updateListPosition(){const e=this.#treeselectList.srcElement,t=(e.style.transform=null,this.#htmlContainer);var{y:s,height:i}=e.getBoundingClientRect(),{x:n,y:l,height:r,width:o}=t.getBoundingClientRect(),a=window.innerHeight-l-r,a=a<l&&i<=l&&a<i,i=(this.appendToBody&&(e.style.transform=a?`translateY(${l-s-i}px)`:`translateY(${l+r-s}px)`,e.style.width=o+"px",e.style.left=n+window.scrollX+"px"),a?"top":"bottom");e.getAttribute("direction")!==i&&(e.setAttribute("direction",i),this.#updateDirectionClasses(a,this.appendToBody))}#emitInput(){this.srcElement.dispatchEvent(new CustomEvent("input",{detail:this.value}))}}export default Treeselect;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "treeselectjs",
-  "version": "0.2.5",
+  "version": "0.2.8",
   "description": "Treeselect JS",
   "main": "dist/treeselect-js.js",
   "repository": {

package/src/input.js

@@ -1,7 +1,7 @@
 import svg from './svgIcons.js'
 
 class TreeselectInput {
-  #htmlTagsSecton = null
+  #htmlTagsSection = null
   #htmlEditControl = null
   #htmlOperators = null
   #htmlArrow = null
@@ -77,12 +77,12 @@ class TreeselectInput {
   }
 
   #updateTags () {
-    this.#htmlTagsSecton.innerHTML = ''
+    this.#htmlTagsSection.innerHTML = ''
 
     if (this.showTags) {
-      this.#htmlTagsSecton.append(...this.#createTags())
+      this.#htmlTagsSection.append(...this.#createTags())
     } else {
-      this.#htmlTagsSecton.appendChild(this.#createCountElement())
+      this.#htmlTagsSection.appendChild(this.#createCountElement())
     }
   }
 
@@ -142,7 +142,7 @@ class TreeselectInput {
     container.classList.add('treeselect-input')
     container.setAttribute('tabindex', '-1')
 
-    this.#htmlTagsSecton = this.#createTagsSection()
+    this.#htmlTagsSection = this.#createTagsSection()
     this.#htmlEditControl = this.#createControl()
     this.#htmlOperators = this.#createOperators()
 
@@ -156,7 +156,7 @@ class TreeselectInput {
       this.focus()
     })
 
-    container.append(this.#htmlTagsSecton, this.#htmlEditControl, this.#htmlOperators)
+    container.append(this.#htmlTagsSection, this.#htmlEditControl, this.#htmlOperators)
 
     return container
   }

package/src/list.css

@@ -19,6 +19,10 @@
   height: 30px;
 }
 
+.treeselect-list__item:focus {
+  outline: none;
+}
+
 .treeselect-list__item--focused {
   background-color: #f0ffff!important;
 }

package/src/list.js

@@ -1,6 +1,6 @@
 import svg from './svgIcons.js'
 
-const getFlatOptons = (options, openLevel, groupId = 0, level = 0) => {
+const getFlatOptions = (options, openLevel, groupId = 0, level = 0) => {
   return options.reduce((acc, curr) => {
     const isGroup = !!curr.children?.length
     const isClosed = level >= openLevel && isGroup
@@ -8,7 +8,7 @@ const getFlatOptons = (options, openLevel, groupId = 0, level = 0) => {
     acc.push({ id: curr.value, name: curr.name, childOf: groupId, isGroup, checked: false, level, isClosed, hidden })
 
     if (isGroup) {
-      const children = getFlatOptons(curr.children, openLevel, curr.value, level + 1)
+      const children = getFlatOptions(curr.children, openLevel, curr.value, level + 1)
       acc.push(...children)
     }
 
@@ -20,6 +20,7 @@ const checkAllChildrenInputs = ({ id, checked }, flatOptions) => {
   flatOptions.forEach(option => {
     if (option.childOf === id) {
       option.checked = checked
+      option.isPartialChecked = false
 
       if (option.isGroup) {
         checkAllChildrenInputs(option, flatOptions)
@@ -67,7 +68,10 @@ const checkInput = ({ id, isGroup, childOf, checked }, flatOptions) => {
 }
 
 const updateValue = (newValue, flatOptions, srcElement) => {
-  flatOptions.forEach(option => option.checked = false)
+  flatOptions.forEach(option => {
+    option.checked = false
+    option.isPartialChecked = false
+  })
   const toCheck = flatOptions.filter(option => newValue.includes(option.id))
   toCheck.forEach(option => {
     option.checked = true
@@ -187,13 +191,13 @@ const getAllFlattedChildren = (childOf, flattedOption) => {
   }, [])
 }
 
-const getAllFlattendParents = (childOf, flatOptions) => {
+const getAllFlattenParents = (childOf, flatOptions) => {
   return flatOptions.reduce((acc, curr) => {
     if (curr.id === childOf) {
       acc.push(curr)
 
       if (curr.childOf) {
-        acc.push(...getAllFlattendParents(curr.childOf, flatOptions))
+        acc.push(...getAllFlattenParents(curr.childOf, flatOptions))
       }
     }
 
@@ -233,6 +237,26 @@ const getListItemByCheckbox = (checkbox) => {
   return listItem
 }
 
+const validateOptions = (flattedOption) => {
+  const { duplications } = flattedOption.reduce((acc, curr) => {
+    if (acc.allItems.includes(curr.id)) {
+      acc.duplications.push(curr.id)
+    }
+
+    acc.allItems.push(curr.id)
+
+    return acc
+  }, {
+    duplications: [],
+    allItems: []
+  })
+
+  
+  if (duplications.length) {
+    console.error(`Validation: You have duplicated values: ${duplications.join(', ')}! You should use unique values.`)
+  }
+}
+
 class TreeselectList {
   #lastFocusedItem = null
   #isMouseActionsAvailable = true
@@ -251,12 +275,13 @@ class TreeselectList {
     this.listSlotHtmlComponent = listSlotHtmlComponent
     this.emptyText = emptyText ?? 'No results found...'
 
-    this.flattedOptions = getFlatOptons(this.options, this.openLevel)
+    this.flattedOptions = getFlatOptions(this.options, this.openLevel)
     this.flattedOptionsBeforeSearch = this.flattedOptions
     this.selectedNodes = { ids: [], groupedIds: [] }
     this.srcElement = this.#createList()
 
     this.updateValue(this.value)
+    validateOptions(this.flattedOptions)
   }
 
   // Public methods
@@ -266,6 +291,10 @@ class TreeselectList {
   }
 
   updateSearchValue (searchText) {
+    if (searchText === this.searchText) {
+      return
+    }
+
     const isStartOfSearching = this.searchText === '' && searchText !== ''
     this.searchText = searchText
 
@@ -291,9 +320,9 @@ class TreeselectList {
     }
 
     const allOptions = this.flattedOptions.reduce((acc, curr) => {
-      const isSerched = curr.name.toLowerCase().includes(searchText.toLowerCase())
+      const isSearched = curr.name.toLowerCase().includes(searchText.toLowerCase())
 
-      if (isSerched) {
+      if (isSearched) {
         acc.push(curr)
 
         if (curr.isGroup) {
@@ -302,7 +331,7 @@ class TreeselectList {
         }
 
         if (curr.childOf) {
-          const flattedParents = getAllFlattendParents(curr.childOf, this.flattedOptions)
+          const flattedParents = getAllFlattenParents(curr.childOf, this.flattedOptions)
           acc.push(...flattedParents)
         }
       }
@@ -408,8 +437,8 @@ class TreeselectList {
   }
 
   focusFirstListElement () {
-    const focusedCalss = 'treeselect-list__item--focused'
-    const itemFocused = this.srcElement.querySelector(`.${focusedCalss}`)
+    const focusedClass = 'treeselect-list__item--focused'
+    const itemFocused = this.srcElement.querySelector(`.${focusedClass}`)
     const allCheckboxes = Array.from(this.srcElement.querySelectorAll('.treeselect-list__item-checkbox'))
       .filter(checkbox => window.getComputedStyle(getListItemByCheckbox(checkbox)).display !== 'none')
   
@@ -418,11 +447,11 @@ class TreeselectList {
     }
   
     if (itemFocused) {
-      itemFocused.classList.remove(focusedCalss)
+      itemFocused.classList.remove(focusedClass)
     }
   
     const firstItem = getListItemByCheckbox(allCheckboxes[0])
-    firstItem.classList.add(focusedCalss)
+    firstItem.classList.add(focusedClass)
   }
 
   // Private methods
@@ -604,7 +633,7 @@ class TreeselectList {
     hideShowChildren(this.flattedOptions, flattedOption)
     updateDOM(this.flattedOptions, this.srcElement)
 
-    this.#emitArrrowClick()
+    this.#emitArrowClick()
   }
 
   #groupMouseAction (isMouseOver, itemElement) {
@@ -631,7 +660,7 @@ class TreeselectList {
   }
 
   // Emits
-  #emitArrrowClick () {
+  #emitArrowClick () {
     this.srcElement.dispatchEvent(new CustomEvent('arrow-click'))
   }
 

package/src/treeselect-js.css

@@ -16,13 +16,17 @@
   left: 0;
   border-radius: 4px;
   box-sizing: border-box;
-  z-index: 1050;
+  z-index: 1000;
 }
 
 .treeselect .treeselect-list {
   position: absolute;
 }
 
+.treeselect .treeselect-list--static {
+  position: static;
+}
+
 .treeselect-input--focused {
   border-color: #101010;
 }
@@ -52,7 +56,7 @@
 
 .treeselect-list--bottom,
 .treeselect-list--bottom-to-body {
-  border-top-color: gainsboro;
+  border-top-color: #d7dde4;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }

package/src/treeselect-js.js

@@ -1,6 +1,17 @@
 import TreeselectInput from "./input.js"
 import TreeselectList from "./list.js"
 
+
+const validateProps = ({ parentHtmlContainer, staticList, appendToBody }) => {
+  if (!parentHtmlContainer) {
+    console.error('Validation: parentHtmlContainer prop is required!')
+  }
+
+  if (staticList && appendToBody) {
+    console.error('Validation: You should set staticList to false if you use appendToBody!')
+  }
+}
+
 class Treeselect {
   // Components
   #htmlContainer = null
@@ -8,16 +19,17 @@ class Treeselect {
   #treeselectInput = null
 
   // Resize props
-  #transform = { top: null, bottom: null }
-  #treeselectInitPosition = null
   #containerResizer = null
-  #containerWidth = 0
 
   // Outside listeners
   #scrollEvent = null
+  #resizeEvent = null
   #focusEvent = null
   #blurEvent = null
 
+  // State
+  #isListOpened = false
+
   constructor ({
     parentHtmlContainer,
     value,
@@ -32,8 +44,15 @@ class Treeselect {
     grouped,
     listSlotHtmlComponent,
     disabled,
-    emptyText
+    emptyText,
+    staticList
   }) {
+    validateProps({
+      parentHtmlContainer,
+      staticList,
+      appendToBody
+    })
+
     this.parentHtmlContainer = parentHtmlContainer
     this.value = value ?? []
     this.options = options ?? []
@@ -48,6 +67,7 @@ class Treeselect {
     this.listSlotHtmlComponent = listSlotHtmlComponent ?? null
     this.disabled = disabled ?? false
     this.emptyText = emptyText ?? 'No results found...'
+    this.staticList = staticList && !this.appendToBody
 
     this.srcElement = null
 
@@ -56,16 +76,12 @@ class Treeselect {
 
   // Public methods
   mount () {
-    if (this.srcElement) {
-      this.#closeList()
-      this.srcElement.innerHTML = ''
-      this.srcElement = null
-      this.#removeOutsideListeners()
-    }
+    this.destroy()
 
     this.srcElement = this.#createTreeselect()
 
     this.#scrollEvent = this.scrollWindowHandler.bind(this)
+    this.#resizeEvent = this.scrollWindowHandler.bind(this)
     this.#focusEvent = this.focusWindowHandler.bind(this)
     this.#blurEvent = this.blurWindowHandler.bind(this)
 
@@ -91,7 +107,7 @@ class Treeselect {
       this.#closeList()
       this.srcElement.innerHTML = ''
       this.srcElement = null
-      this.#removeOutsideListeners()
+      this.#removeOutsideListeners(true)
     }
   }
 
@@ -120,9 +136,7 @@ class Treeselect {
 
     if (this.appendToBody) {
       this.#containerResizer = new ResizeObserver(() => {
-        const { width } = this.srcElement.getBoundingClientRect()
-        this.#containerWidth = width
-        this.updateListPosition(container, list.srcElement, true)
+        this.updateListPosition()
       })
     }
 
@@ -134,10 +148,14 @@ class Treeselect {
       this.#emitInput()
     })
     input.srcElement.addEventListener('open', () => this.#openList())
-    input.srcElement.addEventListener('keydown', (e) => list.callKeyAction(e.key))
+    input.srcElement.addEventListener('keydown', (e) => {
+      if (this.#isListOpened) {
+        list.callKeyAction(e.key)
+      }
+    })
     input.srcElement.addEventListener('search', (e) => {
       list.updateSearchValue(e.detail)
-      this.updateListPosition(container, list.srcElement, true)
+      this.updateListPosition()
     })
     input.srcElement.addEventListener('focus', () => {
       this.#updateFocusClasses(true)
@@ -166,7 +184,7 @@ class Treeselect {
     })
     list.srcElement.addEventListener('arrow-click', () => {
       input.focus()
-      this.updateListPosition(container, list.srcElement, true)
+      this.updateListPosition()
     })
 
     this.#htmlContainer = container
@@ -179,7 +197,10 @@ class Treeselect {
   }
 
   #openList () {
+    this.#isListOpened = true
+
     window.addEventListener('scroll', this.#scrollEvent, true)
+    window.addEventListener('resize', this.#resizeEvent)
 
     if (this.appendToBody) {
       document.body.appendChild(this.#treeselectList.srcElement)
@@ -188,13 +209,16 @@ class Treeselect {
       this.#htmlContainer.appendChild(this.#treeselectList.srcElement)
     }
 
-    this.updateListPosition(this.#htmlContainer, this.#treeselectList.srcElement, false)
+    this.updateListPosition()
     this.#updateOpenCloseClasses(true)
     this.#treeselectList.focusFirstListElement()
   }
 
   #closeList () {
+    this.#isListOpened = false
+
     window.removeEventListener('scroll', this.#scrollEvent, true)
+    window.removeEventListener('resize', this.#resizeEvent)
     const isElementExist = this.appendToBody
       ? document.body.contains(this.#treeselectList.srcElement)
       : this.#htmlContainer.contains(this.#treeselectList.srcElement)
@@ -246,10 +270,19 @@ class Treeselect {
     } else {
       this.#treeselectInput.srcElement.classList.remove('treeselect-input--opened')
     }
+
+    if (this.staticList) {
+      this.#treeselectList.srcElement.classList.add('treeselect-list--static')
+    } else {
+      this.#treeselectList.srcElement.classList.remove('treeselect-list--static')
+    }
   }
 
-  #removeOutsideListeners () {
-    window.removeEventListener('scroll', this.#scrollEvent, true)
+  #removeOutsideListeners (isDestroy) {
+    if (!this.alwaysOpen || isDestroy) {
+      window.removeEventListener('scroll', this.#scrollEvent, true)
+      window.removeEventListener('resize', this.#resizeEvent)
+    }
 
     document.removeEventListener('click', this.#focusEvent, true)
     document.removeEventListener('focus', this.#focusEvent, true)
@@ -258,7 +291,7 @@ class Treeselect {
 
   // Outside Listeners
   scrollWindowHandler () {
-    this.updateListPosition(this.#htmlContainer, this.#treeselectList.srcElement, true)
+    this.updateListPosition()
   }
 
   focusWindowHandler (e) {
@@ -277,56 +310,36 @@ class Treeselect {
     this.#updateFocusClasses(false)
   }
 
-  // Update direction of the list. Support appendToBody and standart mode with absolute
-  updateListPosition (container, list, isNeedForceUpdate) {
-    const spaceTop = container.getBoundingClientRect().y
-    const spaceBottom = window.innerHeight - container.getBoundingClientRect().y
-    const listHeight = list.clientHeight
-    const spaceDelta = 45
-    const isTopDirection = spaceTop > spaceBottom && window.innerHeight - spaceTop < listHeight + spaceDelta
-    const attributeToAdd = isTopDirection ? 'top' : 'buttom'
-    const currentAttr = list.getAttribute('direction')
-
-    this.#htmlContainer.setAttribute('direction', attributeToAdd)
-
-    // Standart class handler handler with absolute position
-    if (!this.appendToBody) {
-      const isNoNeedToUpdate = currentAttr === attributeToAdd
-
-      if (isNoNeedToUpdate) {
-        return
-      }
-
-      this.#updateDirectionClasses(isTopDirection, false)
-
-      return
-    }
-
-    // Append to body handler
-    if (!this.#treeselectInitPosition || isNeedForceUpdate) {
-      list.style.transform = null
+  // Update direction of the list. Support appendToBody and standard mode with absolute
+  updateListPosition () {
+    const list = this.#treeselectList.srcElement
+    // We need to reset position
+    list.style.transform = null
+    const container = this.#htmlContainer
 
-      const { x: listX, y: listY } = list.getBoundingClientRect()
-      const { x: containerX, y: containerY } = container.getBoundingClientRect()
+    const { y: listY, height: listHeight } = list.getBoundingClientRect()
+    const { x: containerX, y: containerY, height: containerHeight, width: containerWidth } = container.getBoundingClientRect()
+    const windowHeight = window.innerHeight
 
-      this.#treeselectInitPosition = { containerX, containerY, listX, listY }
+    const spaceTop = containerY
+    const spaceBottom = windowHeight - containerY - containerHeight
+    const isTopDirection = spaceTop > spaceBottom && spaceTop >= listHeight && spaceBottom < listHeight
+    
+    if (this.appendToBody) {
+      list.style.transform = isTopDirection
+        ? `translateY(${containerY - listY - listHeight}px)`
+        : `translateY(${containerY + containerHeight - listY}px)`
+      list.style.width = `${containerWidth}px`
+      list.style.left = `${containerX + window.scrollX}px`
     }
 
-    const { listX, listY, containerX, containerY } = this.#treeselectInitPosition
-    const containerHeight = container.clientHeight
-    
-    // TODO you should use css max-height
-    // list.style.maxHeight = `${window.innerHeight - containerHeight}px`
+    const attributeToAdd = isTopDirection ? 'top' : 'bottom'
+    const currentAttr = list.getAttribute('direction')
 
-    if (!currentAttr || isNeedForceUpdate) {
-      this.#transform.top = `translateY(${containerY - listY - listHeight}px)`
-      this.#transform.bottom = `translateY(${containerY + containerHeight - listY}px)`
+    if (currentAttr !== attributeToAdd) {
+      list.setAttribute('direction', attributeToAdd)
+      this.#updateDirectionClasses(isTopDirection, this.appendToBody)
     }
-
-    list.style.transform = isTopDirection ? this.#transform.top : this.#transform.bottom
-    this.#updateDirectionClasses(isTopDirection, true)
-    list.style.width = `${this.#containerWidth}px`
-    list.style.left = `${containerX}px`
   }
 
   // Emits