primevue 3.20.0 → 3.22.0

package/treeselect/treeselect.cjs.js

@@ -1,18 +1,18 @@
 'use strict';
 
-var utils = require('primevue/utils');
 var OverlayEventBus = require('primevue/overlayeventbus');
-var Tree = require('primevue/tree');
-var Ripple = require('primevue/ripple');
 var Portal = require('primevue/portal');
+var Ripple = require('primevue/ripple');
+var Tree = require('primevue/tree');
+var utils = require('primevue/utils');
 var vue = require('vue');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var OverlayEventBus__default = /*#__PURE__*/_interopDefaultLegacy(OverlayEventBus);
-var Tree__default = /*#__PURE__*/_interopDefaultLegacy(Tree);
-var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
+var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
+var Tree__default = /*#__PURE__*/_interopDefaultLegacy(Tree);
 
 var script = {
     name: 'TreeSelect',
@@ -179,40 +179,50 @@ var script = {
         },
         onKeyDown(event) {
             switch (event.code) {
-                case 'Down':
                 case 'ArrowDown':
-                    if (this.overlayVisible) {
-                        if (utils.DomHandler.findSingle(this.overlay, '.p-highlight')) {
-                            utils.DomHandler.findSingle(this.overlay, '.p-highlight').focus();
-                        } else utils.DomHandler.findSingle(this.overlay, '.p-treenode').children[0].focus();
-                    } else {
-                        this.show();
-                    }
-
-                    event.preventDefault();
+                    this.onArrowDownKey(event);
                     break;
 
                 case 'Space':
                 case 'Enter':
-                    if (this.overlayVisible) {
-                        this.hide();
-                    } else {
-                        this.show();
-                    }
-
-                    event.preventDefault();
+                    this.onEnterKey(event);
                     break;
 
                 case 'Escape':
-                case 'Tab':
-                    if (this.overlayVisible) {
-                        this.hide();
-                        event.preventDefault();
-                    }
+                    this.onEscapeKey(event);
 
                     break;
             }
         },
+        onArrowDownKey(event) {
+            if (this.overlayVisible) return;
+
+            this.show();
+
+            this.$nextTick(() => {
+                const treeNodeEl = utils.DomHandler.find(this.$refs.tree.$el, '.p-treenode');
+                const focusedElement = [...treeNodeEl].find((item) => item.getAttribute('tabindex') === '0');
+
+                utils.DomHandler.focus(focusedElement);
+            });
+
+            event.preventDefault();
+        },
+        onEnterKey(event) {
+            if (this.overlayVisible) {
+                this.hide();
+            } else {
+                this.onArrowDownKey(event);
+            }
+
+            event.preventDefault();
+        },
+        onEscapeKey(event) {
+            if (this.overlayVisible) {
+                this.hide();
+                event.preventDefault();
+            }
+        },
         onOverlayEnter(el) {
             utils.ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
             this.alignOverlay();
@@ -302,6 +312,9 @@ var script = {
                 target: this.$el
             });
         },
+        onOverlayKeydown(event) {
+            if (event.code === 'Escape') this.hide();
+        },
         findSelectedNodes(node, keys, selectedNodes) {
             if (node) {
                 if (this.isSelected(node, keys)) {
@@ -456,7 +469,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   return (vue.openBlock(), vue.createElementBlock("div", {
     ref: "container",
     class: vue.normalizeClass($options.containerClass),
-    onClick: _cache[6] || (_cache[6] = (...args) => ($options.onClick && $options.onClick(...args)))
+    onClick: _cache[7] || (_cache[7] = (...args) => ($options.onClick && $options.onClick(...args)))
   }, [
     vue.createElementVNode("div", _hoisted_1, [
       vue.createElementVNode("input", vue.mergeProps({
@@ -536,7 +549,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   ref: $options.overlayRef,
                   onClick: _cache[5] || (_cache[5] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args))),
                   class: $options.panelStyleClass
-                }, $props.panelProps), [
+                }, $props.panelProps, {
+                  onKeydown: _cache[6] || (_cache[6] = (...args) => ($options.onOverlayKeydown && $options.onOverlayKeydown(...args)))
+                }), [
                   vue.renderSlot(_ctx.$slots, "header", {
                     value: $props.modelValue,
                     options: $props.options
@@ -546,6 +561,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                     style: vue.normalizeStyle({ 'max-height': $props.scrollHeight })
                   }, [
                     vue.createVNode(_component_TSTree, {
+                      ref: "tree",
                       id: $options.listId,
                       value: $props.options,
                       selectionMode: $props.selectionMode,
@@ -610,7 +626,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "\n.p-treeselect {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    cursor: pointer;\n    position: relative;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n}\n.p-treeselect-trigger {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n}\n.p-treeselect-label-container {\n    overflow: hidden;\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    cursor: pointer;\n}\n.p-treeselect-label {\n    display: block;\n    white-space: nowrap;\n    cursor: pointer;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n.p-treeselect-label-empty {\n    overflow: hidden;\n    visibility: hidden;\n}\n.p-treeselect-token {\n    cursor: default;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-flex: 0;\n        -ms-flex: 0 0 auto;\n            flex: 0 0 auto;\n}\n.p-treeselect .p-treeselect-panel {\n    min-width: 100%;\n}\n.p-treeselect-panel {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-treeselect-items-wrapper {\n    overflow: auto;\n}\n.p-fluid .p-treeselect {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n";
+var css_248z = "\n.p-treeselect {\n    display: inline-flex;\n    cursor: pointer;\n    position: relative;\n    user-select: none;\n}\n.p-treeselect-trigger {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n.p-treeselect-label-container {\n    overflow: hidden;\n    flex: 1 1 auto;\n    cursor: pointer;\n}\n.p-treeselect-label {\n    display: block;\n    white-space: nowrap;\n    cursor: pointer;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n.p-treeselect-label-empty {\n    overflow: hidden;\n    visibility: hidden;\n}\n.p-treeselect-token {\n    cursor: default;\n    display: inline-flex;\n    align-items: center;\n    flex: 0 0 auto;\n}\n.p-treeselect .p-treeselect-panel {\n    min-width: 100%;\n}\n.p-treeselect-panel {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-treeselect-items-wrapper {\n    overflow: auto;\n}\n.p-fluid .p-treeselect {\n    display: flex;\n}\n";
 styleInject(css_248z);
 
 script.render = render;

package/treeselect/treeselect.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/utils"),t=require("primevue/overlayeventbus"),l=require("primevue/tree"),i=require("primevue/ripple"),n=require("primevue/portal"),s=require("vue");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(t),r=o(l),d=o(i),c=o(n),p={name:"TreeSelect",emits:["update:modelValue","before-show","before-hide","change","show","hide","node-select","node-unselect","node-expand","node-collapse","focus","blur"],props:{modelValue:null,options:Array,scrollHeight:{type:String,default:"400px"},placeholder:{type:String,default:null},disabled:{type:Boolean,default:!1},tabindex:{type:Number,default:null},selectionMode:{type:String,default:"single"},appendTo:{type:String,default:"body"},emptyMessage:{type:String,default:null},display:{type:String,default:"comma"},metaKeySelection:{type:Boolean,default:!0},inputId:{type:String,default:null},inputClass:{type:String,default:null},inputStyle:{type:null,default:null},inputProps:{type:null,default:null},panelClass:{type:String,default:null},panelProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1,overlayVisible:!1,expandedKeys:{}}),watch:{modelValue:{handler:function(){this.selfChange||this.updateTreeState(),this.selfChange=!1},immediate:!0},options(){this.updateTreeState()}},outsideClickListener:null,resizeListener:null,scrollHandler:null,overlay:null,selfChange:!1,beforeUnmount(){this.unbindOutsideClickListener(),this.unbindResizeListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.overlay&&(e.ZIndexUtils.clear(this.overlay),this.overlay=null)},mounted(){this.updateTreeState()},methods:{show(){this.$emit("before-show"),this.overlayVisible=!0},hide(){this.$emit("before-hide"),this.overlayVisible=!1,this.$refs.focusInput.focus()},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)},onClick(t){this.disabled||this.overlay&&this.overlay.contains(t.target)||e.DomHandler.hasClass(t.target,"p-treeselect-close")||(this.overlayVisible?this.hide():this.show(),this.$refs.focusInput.focus())},onSelectionChange(e){this.selfChange=!0,this.$emit("update:modelValue",e),this.$emit("change",e)},onNodeSelect(e){this.$emit("node-select",e),"single"===this.selectionMode&&this.hide()},onNodeUnselect(e){this.$emit("node-unselect",e)},onNodeToggle(e){this.expandedKeys=e},onKeyDown(t){switch(t.code){case"Down":case"ArrowDown":this.overlayVisible?e.DomHandler.findSingle(this.overlay,".p-highlight")?e.DomHandler.findSingle(this.overlay,".p-highlight").focus():e.DomHandler.findSingle(this.overlay,".p-treenode").children[0].focus():this.show(),t.preventDefault();break;case"Space":case"Enter":this.overlayVisible?this.hide():this.show(),t.preventDefault();break;case"Escape":case"Tab":this.overlayVisible&&(this.hide(),t.preventDefault())}},onOverlayEnter(t){e.ZIndexUtils.set("overlay",t,this.$primevue.config.zIndex.overlay),this.alignOverlay(),this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.scrollValueInView(),this.$emit("show")},onOverlayLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),this.$emit("hide"),this.overlay=null},onOverlayAfterLeave(t){e.ZIndexUtils.clear(t)},alignOverlay(){"self"===this.appendTo?e.DomHandler.relativePosition(this.overlay,this.$el):(this.overlay.style.minWidth=e.DomHandler.getOuterWidth(this.$el)+"px",e.DomHandler.absolutePosition(this.overlay,this.$el))},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{this.overlayVisible&&this.isOutsideClicked(e)&&this.hide()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new e.ConnectedOverlayScrollHandler(this.$refs.container,(()=>{this.overlayVisible&&this.hide()}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.overlayVisible&&!e.DomHandler.isTouchDevice()&&this.hide()},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isOutsideClicked(e){return!(this.$el.isSameNode(e.target)||this.$el.contains(e.target)||this.overlay&&this.overlay.contains(e.target))},overlayRef(e){this.overlay=e},onOverlayClick(e){a.default.emit("overlay-click",{originalEvent:e,target:this.$el})},findSelectedNodes(e,t,l){if(e){if(this.isSelected(e,t)&&(l.push(e),delete t[e.key]),Object.keys(t).length&&e.children)for(let i of e.children)this.findSelectedNodes(i,t,l)}else for(let e of this.options)this.findSelectedNodes(e,t,l)},isSelected(e,t){return"checkbox"===this.selectionMode?t[e.key]&&t[e.key].checked:t[e.key]},updateTreeState(){let e={...this.modelValue};this.expandedKeys={},e&&this.options&&this.updateTreeBranchState(null,null,e)},updateTreeBranchState(e,t,l){if(e){if(this.isSelected(e,l)&&(this.expandPath(t),delete l[e.key]),Object.keys(l).length&&e.children)for(let i of e.children)t.push(e.key),this.updateTreeBranchState(i,t,l)}else for(let e of this.options)this.updateTreeBranchState(e,[],l)},expandPath(e){if(e.length>0)for(let t of e)this.expandedKeys[t]=!0},scrollValueInView(){if(this.overlay){let t=e.DomHandler.findSingle(this.overlay,"li.p-highlight");t&&t.scrollIntoView({block:"nearest",inline:"start"})}}},computed:{containerClass(){return["p-treeselect p-component p-inputwrapper",{"p-treeselect-chip":"chip"===this.display,"p-disabled":this.disabled,"p-focus":this.focused,"p-inputwrapper-filled":!this.emptyValue,"p-inputwrapper-focus":this.focused||this.overlayVisible}]},labelClass(){return["p-treeselect-label",{"p-placeholder":this.label===this.placeholder,"p-treeselect-label-empty":!this.placeholder&&this.emptyValue}]},panelStyleClass(){return["p-treeselect-panel p-component",this.panelClass,{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},selectedNodes(){let e=[];if(this.modelValue&&this.options){let t={...this.modelValue};this.findSelectedNodes(null,t,e)}return e},label(){let e=this.selectedNodes;return e.length?e.map((e=>e.label)).join(", "):this.placeholder},emptyMessageText(){return this.emptyMessage||this.$primevue.config.locale.emptyMessage},emptyValue(){return!this.modelValue||0===Object.keys(this.modelValue).length},emptyOptions(){return!this.options||0===this.options.length},listId:()=>e.UniqueComponentId()+"_list"},components:{TSTree:r.default,Portal:c.default},directives:{ripple:d.default}};const h={class:"p-hidden-accessible"},u=["id","disabled","tabindex","aria-labelledby","aria-label","aria-expanded","aria-controls"],y={class:"p-treeselect-label-container"},m={class:"p-treeselect-token-label"},f=["aria-expanded"],b=s.createElementVNode("span",{class:"p-treeselect-trigger-icon pi pi-chevron-down"},null,-1),v={key:0,class:"p-treeselect-empty-message"};!function(e,t){void 0===t&&(t={});var l=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===l&&i.firstChild?i.insertBefore(n,i.firstChild):i.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-treeselect {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    cursor: pointer;\n    position: relative;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n}\n.p-treeselect-trigger {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n}\n.p-treeselect-label-container {\n    overflow: hidden;\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    cursor: pointer;\n}\n.p-treeselect-label {\n    display: block;\n    white-space: nowrap;\n    cursor: pointer;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n.p-treeselect-label-empty {\n    overflow: hidden;\n    visibility: hidden;\n}\n.p-treeselect-token {\n    cursor: default;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-flex: 0;\n        -ms-flex: 0 0 auto;\n            flex: 0 0 auto;\n}\n.p-treeselect .p-treeselect-panel {\n    min-width: 100%;\n}\n.p-treeselect-panel {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-treeselect-items-wrapper {\n    overflow: auto;\n}\n.p-fluid .p-treeselect {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n"),p.render=function(e,t,l,i,n,o){const a=s.resolveComponent("TSTree"),r=s.resolveComponent("Portal");return s.openBlock(),s.createElementBlock("div",{ref:"container",class:s.normalizeClass(o.containerClass),onClick:t[6]||(t[6]=(...e)=>o.onClick&&o.onClick(...e))},[s.createElementVNode("div",h,[s.createElementVNode("input",s.mergeProps({ref:"focusInput",id:l.inputId,type:"text",role:"combobox",class:l.inputClass,style:l.inputStyle,readonly:"",disabled:l.disabled,tabindex:l.disabled?-1:l.tabindex,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-haspopup":"tree","aria-expanded":n.overlayVisible,"aria-controls":o.listId,onFocus:t[0]||(t[0]=e=>o.onFocus(e)),onBlur:t[1]||(t[1]=e=>o.onBlur(e)),onKeydown:t[2]||(t[2]=e=>o.onKeyDown(e))},l.inputProps),null,16,u)]),s.createElementVNode("div",y,[s.createElementVNode("div",{class:s.normalizeClass(o.labelClass)},[s.renderSlot(e.$slots,"value",{value:o.selectedNodes,placeholder:l.placeholder},(()=>["comma"===l.display?(s.openBlock(),s.createElementBlock(s.Fragment,{key:0},[s.createTextVNode(s.toDisplayString(o.label||"empty"),1)],64)):"chip"===l.display?(s.openBlock(),s.createElementBlock(s.Fragment,{key:1},[(s.openBlock(!0),s.createElementBlock(s.Fragment,null,s.renderList(o.selectedNodes,(e=>(s.openBlock(),s.createElementBlock("div",{key:e.key,class:"p-treeselect-token"},[s.createElementVNode("span",m,s.toDisplayString(e.label),1)])))),128)),o.emptyValue?(s.openBlock(),s.createElementBlock(s.Fragment,{key:0},[s.createTextVNode(s.toDisplayString(l.placeholder||"empty"),1)],64)):s.createCommentVNode("",!0)],64)):s.createCommentVNode("",!0)]))],2)]),s.createElementVNode("div",{class:"p-treeselect-trigger",role:"button","aria-haspopup":"tree","aria-expanded":n.overlayVisible},[s.renderSlot(e.$slots,"indicator",{},(()=>[b]))],8,f),s.createVNode(r,{appendTo:l.appendTo},{default:s.withCtx((()=>[s.createVNode(s.Transition,{name:"p-connected-overlay",onEnter:o.onOverlayEnter,onLeave:o.onOverlayLeave,onAfterLeave:o.onOverlayAfterLeave},{default:s.withCtx((()=>[n.overlayVisible?(s.openBlock(),s.createElementBlock("div",s.mergeProps({key:0,ref:o.overlayRef,onClick:t[5]||(t[5]=(...e)=>o.onOverlayClick&&o.onOverlayClick(...e)),class:o.panelStyleClass},l.panelProps),[s.renderSlot(e.$slots,"header",{value:l.modelValue,options:l.options}),s.createElementVNode("div",{class:"p-treeselect-items-wrapper",style:s.normalizeStyle({"max-height":l.scrollHeight})},[s.createVNode(a,{id:o.listId,value:l.options,selectionMode:l.selectionMode,"onUpdate:selectionKeys":o.onSelectionChange,selectionKeys:l.modelValue,expandedKeys:n.expandedKeys,"onUpdate:expandedKeys":o.onNodeToggle,metaKeySelection:l.metaKeySelection,onNodeExpand:t[3]||(t[3]=t=>e.$emit("node-expand",t)),onNodeCollapse:t[4]||(t[4]=t=>e.$emit("node-collapse",t)),onNodeSelect:o.onNodeSelect,onNodeUnselect:o.onNodeUnselect,level:0},null,8,["id","value","selectionMode","onUpdate:selectionKeys","selectionKeys","expandedKeys","onUpdate:expandedKeys","metaKeySelection","onNodeSelect","onNodeUnselect"]),o.emptyOptions?(s.openBlock(),s.createElementBlock("div",v,[s.renderSlot(e.$slots,"empty",{},(()=>[s.createTextVNode(s.toDisplayString(o.emptyMessageText),1)]))])):s.createCommentVNode("",!0)],4),s.renderSlot(e.$slots,"footer",{value:l.modelValue,options:l.options})],16)):s.createCommentVNode("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3},8,["appendTo"])],2)},module.exports=p;
+"use strict";var e=require("primevue/overlayeventbus"),t=require("primevue/portal"),l=require("primevue/ripple"),i=require("primevue/tree"),n=require("primevue/utils"),s=require("vue");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=o(e),a=o(t),d=o(l),c={name:"TreeSelect",emits:["update:modelValue","before-show","before-hide","change","show","hide","node-select","node-unselect","node-expand","node-collapse","focus","blur"],props:{modelValue:null,options:Array,scrollHeight:{type:String,default:"400px"},placeholder:{type:String,default:null},disabled:{type:Boolean,default:!1},tabindex:{type:Number,default:null},selectionMode:{type:String,default:"single"},appendTo:{type:String,default:"body"},emptyMessage:{type:String,default:null},display:{type:String,default:"comma"},metaKeySelection:{type:Boolean,default:!0},inputId:{type:String,default:null},inputClass:{type:String,default:null},inputStyle:{type:null,default:null},inputProps:{type:null,default:null},panelClass:{type:String,default:null},panelProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1,overlayVisible:!1,expandedKeys:{}}),watch:{modelValue:{handler:function(){this.selfChange||this.updateTreeState(),this.selfChange=!1},immediate:!0},options(){this.updateTreeState()}},outsideClickListener:null,resizeListener:null,scrollHandler:null,overlay:null,selfChange:!1,beforeUnmount(){this.unbindOutsideClickListener(),this.unbindResizeListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.overlay&&(n.ZIndexUtils.clear(this.overlay),this.overlay=null)},mounted(){this.updateTreeState()},methods:{show(){this.$emit("before-show"),this.overlayVisible=!0},hide(){this.$emit("before-hide"),this.overlayVisible=!1,this.$refs.focusInput.focus()},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)},onClick(e){this.disabled||this.overlay&&this.overlay.contains(e.target)||n.DomHandler.hasClass(e.target,"p-treeselect-close")||(this.overlayVisible?this.hide():this.show(),this.$refs.focusInput.focus())},onSelectionChange(e){this.selfChange=!0,this.$emit("update:modelValue",e),this.$emit("change",e)},onNodeSelect(e){this.$emit("node-select",e),"single"===this.selectionMode&&this.hide()},onNodeUnselect(e){this.$emit("node-unselect",e)},onNodeToggle(e){this.expandedKeys=e},onKeyDown(e){switch(e.code){case"ArrowDown":this.onArrowDownKey(e);break;case"Space":case"Enter":this.onEnterKey(e);break;case"Escape":this.onEscapeKey(e)}},onArrowDownKey(e){this.overlayVisible||(this.show(),this.$nextTick((()=>{const e=[...n.DomHandler.find(this.$refs.tree.$el,".p-treenode")].find((e=>"0"===e.getAttribute("tabindex")));n.DomHandler.focus(e)})),e.preventDefault())},onEnterKey(e){this.overlayVisible?this.hide():this.onArrowDownKey(e),e.preventDefault()},onEscapeKey(e){this.overlayVisible&&(this.hide(),e.preventDefault())},onOverlayEnter(e){n.ZIndexUtils.set("overlay",e,this.$primevue.config.zIndex.overlay),this.alignOverlay(),this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.scrollValueInView(),this.$emit("show")},onOverlayLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),this.$emit("hide"),this.overlay=null},onOverlayAfterLeave(e){n.ZIndexUtils.clear(e)},alignOverlay(){"self"===this.appendTo?n.DomHandler.relativePosition(this.overlay,this.$el):(this.overlay.style.minWidth=n.DomHandler.getOuterWidth(this.$el)+"px",n.DomHandler.absolutePosition(this.overlay,this.$el))},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{this.overlayVisible&&this.isOutsideClicked(e)&&this.hide()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new n.ConnectedOverlayScrollHandler(this.$refs.container,(()=>{this.overlayVisible&&this.hide()}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.overlayVisible&&!n.DomHandler.isTouchDevice()&&this.hide()},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isOutsideClicked(e){return!(this.$el.isSameNode(e.target)||this.$el.contains(e.target)||this.overlay&&this.overlay.contains(e.target))},overlayRef(e){this.overlay=e},onOverlayClick(e){r.default.emit("overlay-click",{originalEvent:e,target:this.$el})},onOverlayKeydown(e){"Escape"===e.code&&this.hide()},findSelectedNodes(e,t,l){if(e){if(this.isSelected(e,t)&&(l.push(e),delete t[e.key]),Object.keys(t).length&&e.children)for(let i of e.children)this.findSelectedNodes(i,t,l)}else for(let e of this.options)this.findSelectedNodes(e,t,l)},isSelected(e,t){return"checkbox"===this.selectionMode?t[e.key]&&t[e.key].checked:t[e.key]},updateTreeState(){let e={...this.modelValue};this.expandedKeys={},e&&this.options&&this.updateTreeBranchState(null,null,e)},updateTreeBranchState(e,t,l){if(e){if(this.isSelected(e,l)&&(this.expandPath(t),delete l[e.key]),Object.keys(l).length&&e.children)for(let i of e.children)t.push(e.key),this.updateTreeBranchState(i,t,l)}else for(let e of this.options)this.updateTreeBranchState(e,[],l)},expandPath(e){if(e.length>0)for(let t of e)this.expandedKeys[t]=!0},scrollValueInView(){if(this.overlay){let e=n.DomHandler.findSingle(this.overlay,"li.p-highlight");e&&e.scrollIntoView({block:"nearest",inline:"start"})}}},computed:{containerClass(){return["p-treeselect p-component p-inputwrapper",{"p-treeselect-chip":"chip"===this.display,"p-disabled":this.disabled,"p-focus":this.focused,"p-inputwrapper-filled":!this.emptyValue,"p-inputwrapper-focus":this.focused||this.overlayVisible}]},labelClass(){return["p-treeselect-label",{"p-placeholder":this.label===this.placeholder,"p-treeselect-label-empty":!this.placeholder&&this.emptyValue}]},panelStyleClass(){return["p-treeselect-panel p-component",this.panelClass,{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},selectedNodes(){let e=[];if(this.modelValue&&this.options){let t={...this.modelValue};this.findSelectedNodes(null,t,e)}return e},label(){let e=this.selectedNodes;return e.length?e.map((e=>e.label)).join(", "):this.placeholder},emptyMessageText(){return this.emptyMessage||this.$primevue.config.locale.emptyMessage},emptyValue(){return!this.modelValue||0===Object.keys(this.modelValue).length},emptyOptions(){return!this.options||0===this.options.length},listId:()=>n.UniqueComponentId()+"_list"},components:{TSTree:o(i).default,Portal:a.default},directives:{ripple:d.default}};const p={class:"p-hidden-accessible"},h=["id","disabled","tabindex","aria-labelledby","aria-label","aria-expanded","aria-controls"],u={class:"p-treeselect-label-container"},y={class:"p-treeselect-token-label"},m=["aria-expanded"],f=s.createElementVNode("span",{class:"p-treeselect-trigger-icon pi pi-chevron-down"},null,-1),v={key:0,class:"p-treeselect-empty-message"};!function(e,t){void 0===t&&(t={});var l=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===l&&i.firstChild?i.insertBefore(n,i.firstChild):i.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-treeselect {\n    display: inline-flex;\n    cursor: pointer;\n    position: relative;\n    user-select: none;\n}\n.p-treeselect-trigger {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n.p-treeselect-label-container {\n    overflow: hidden;\n    flex: 1 1 auto;\n    cursor: pointer;\n}\n.p-treeselect-label {\n    display: block;\n    white-space: nowrap;\n    cursor: pointer;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n.p-treeselect-label-empty {\n    overflow: hidden;\n    visibility: hidden;\n}\n.p-treeselect-token {\n    cursor: default;\n    display: inline-flex;\n    align-items: center;\n    flex: 0 0 auto;\n}\n.p-treeselect .p-treeselect-panel {\n    min-width: 100%;\n}\n.p-treeselect-panel {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-treeselect-items-wrapper {\n    overflow: auto;\n}\n.p-fluid .p-treeselect {\n    display: flex;\n}\n"),c.render=function(e,t,l,i,n,o){const r=s.resolveComponent("TSTree"),a=s.resolveComponent("Portal");return s.openBlock(),s.createElementBlock("div",{ref:"container",class:s.normalizeClass(o.containerClass),onClick:t[7]||(t[7]=(...e)=>o.onClick&&o.onClick(...e))},[s.createElementVNode("div",p,[s.createElementVNode("input",s.mergeProps({ref:"focusInput",id:l.inputId,type:"text",role:"combobox",class:l.inputClass,style:l.inputStyle,readonly:"",disabled:l.disabled,tabindex:l.disabled?-1:l.tabindex,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-haspopup":"tree","aria-expanded":n.overlayVisible,"aria-controls":o.listId,onFocus:t[0]||(t[0]=e=>o.onFocus(e)),onBlur:t[1]||(t[1]=e=>o.onBlur(e)),onKeydown:t[2]||(t[2]=e=>o.onKeyDown(e))},l.inputProps),null,16,h)]),s.createElementVNode("div",u,[s.createElementVNode("div",{class:s.normalizeClass(o.labelClass)},[s.renderSlot(e.$slots,"value",{value:o.selectedNodes,placeholder:l.placeholder},(()=>["comma"===l.display?(s.openBlock(),s.createElementBlock(s.Fragment,{key:0},[s.createTextVNode(s.toDisplayString(o.label||"empty"),1)],64)):"chip"===l.display?(s.openBlock(),s.createElementBlock(s.Fragment,{key:1},[(s.openBlock(!0),s.createElementBlock(s.Fragment,null,s.renderList(o.selectedNodes,(e=>(s.openBlock(),s.createElementBlock("div",{key:e.key,class:"p-treeselect-token"},[s.createElementVNode("span",y,s.toDisplayString(e.label),1)])))),128)),o.emptyValue?(s.openBlock(),s.createElementBlock(s.Fragment,{key:0},[s.createTextVNode(s.toDisplayString(l.placeholder||"empty"),1)],64)):s.createCommentVNode("",!0)],64)):s.createCommentVNode("",!0)]))],2)]),s.createElementVNode("div",{class:"p-treeselect-trigger",role:"button","aria-haspopup":"tree","aria-expanded":n.overlayVisible},[s.renderSlot(e.$slots,"indicator",{},(()=>[f]))],8,m),s.createVNode(a,{appendTo:l.appendTo},{default:s.withCtx((()=>[s.createVNode(s.Transition,{name:"p-connected-overlay",onEnter:o.onOverlayEnter,onLeave:o.onOverlayLeave,onAfterLeave:o.onOverlayAfterLeave},{default:s.withCtx((()=>[n.overlayVisible?(s.openBlock(),s.createElementBlock("div",s.mergeProps({key:0,ref:o.overlayRef,onClick:t[5]||(t[5]=(...e)=>o.onOverlayClick&&o.onOverlayClick(...e)),class:o.panelStyleClass},l.panelProps,{onKeydown:t[6]||(t[6]=(...e)=>o.onOverlayKeydown&&o.onOverlayKeydown(...e))}),[s.renderSlot(e.$slots,"header",{value:l.modelValue,options:l.options}),s.createElementVNode("div",{class:"p-treeselect-items-wrapper",style:s.normalizeStyle({"max-height":l.scrollHeight})},[s.createVNode(r,{ref:"tree",id:o.listId,value:l.options,selectionMode:l.selectionMode,"onUpdate:selectionKeys":o.onSelectionChange,selectionKeys:l.modelValue,expandedKeys:n.expandedKeys,"onUpdate:expandedKeys":o.onNodeToggle,metaKeySelection:l.metaKeySelection,onNodeExpand:t[3]||(t[3]=t=>e.$emit("node-expand",t)),onNodeCollapse:t[4]||(t[4]=t=>e.$emit("node-collapse",t)),onNodeSelect:o.onNodeSelect,onNodeUnselect:o.onNodeUnselect,level:0},null,8,["id","value","selectionMode","onUpdate:selectionKeys","selectionKeys","expandedKeys","onUpdate:expandedKeys","metaKeySelection","onNodeSelect","onNodeUnselect"]),o.emptyOptions?(s.openBlock(),s.createElementBlock("div",v,[s.renderSlot(e.$slots,"empty",{},(()=>[s.createTextVNode(s.toDisplayString(o.emptyMessageText),1)]))])):s.createCommentVNode("",!0)],4),s.renderSlot(e.$slots,"footer",{value:l.modelValue,options:l.options})],16)):s.createCommentVNode("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3},8,["appendTo"])],2)},module.exports=c;

package/treeselect/treeselect.esm.js

@@ -1,8 +1,8 @@
-import { ZIndexUtils, DomHandler, ConnectedOverlayScrollHandler, UniqueComponentId } from 'primevue/utils';
 import OverlayEventBus from 'primevue/overlayeventbus';
-import Tree from 'primevue/tree';
-import Ripple from 'primevue/ripple';
 import Portal from 'primevue/portal';
+import Ripple from 'primevue/ripple';
+import Tree from 'primevue/tree';
+import { ZIndexUtils, DomHandler, ConnectedOverlayScrollHandler, UniqueComponentId } from 'primevue/utils';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, mergeProps, renderSlot, Fragment, createTextVNode, toDisplayString, renderList, createCommentVNode, createVNode, withCtx, Transition, normalizeStyle } from 'vue';
 
 var script = {
@@ -170,40 +170,50 @@ var script = {
         },
         onKeyDown(event) {
             switch (event.code) {
-                case 'Down':
                 case 'ArrowDown':
-                    if (this.overlayVisible) {
-                        if (DomHandler.findSingle(this.overlay, '.p-highlight')) {
-                            DomHandler.findSingle(this.overlay, '.p-highlight').focus();
-                        } else DomHandler.findSingle(this.overlay, '.p-treenode').children[0].focus();
-                    } else {
-                        this.show();
-                    }
-
-                    event.preventDefault();
+                    this.onArrowDownKey(event);
                     break;
 
                 case 'Space':
                 case 'Enter':
-                    if (this.overlayVisible) {
-                        this.hide();
-                    } else {
-                        this.show();
-                    }
-
-                    event.preventDefault();
+                    this.onEnterKey(event);
                     break;
 
                 case 'Escape':
-                case 'Tab':
-                    if (this.overlayVisible) {
-                        this.hide();
-                        event.preventDefault();
-                    }
+                    this.onEscapeKey(event);
 
                     break;
             }
         },
+        onArrowDownKey(event) {
+            if (this.overlayVisible) return;
+
+            this.show();
+
+            this.$nextTick(() => {
+                const treeNodeEl = DomHandler.find(this.$refs.tree.$el, '.p-treenode');
+                const focusedElement = [...treeNodeEl].find((item) => item.getAttribute('tabindex') === '0');
+
+                DomHandler.focus(focusedElement);
+            });
+
+            event.preventDefault();
+        },
+        onEnterKey(event) {
+            if (this.overlayVisible) {
+                this.hide();
+            } else {
+                this.onArrowDownKey(event);
+            }
+
+            event.preventDefault();
+        },
+        onEscapeKey(event) {
+            if (this.overlayVisible) {
+                this.hide();
+                event.preventDefault();
+            }
+        },
         onOverlayEnter(el) {
             ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
             this.alignOverlay();
@@ -293,6 +303,9 @@ var script = {
                 target: this.$el
             });
         },
+        onOverlayKeydown(event) {
+            if (event.code === 'Escape') this.hide();
+        },
         findSelectedNodes(node, keys, selectedNodes) {
             if (node) {
                 if (this.isSelected(node, keys)) {
@@ -447,7 +460,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
     ref: "container",
     class: normalizeClass($options.containerClass),
-    onClick: _cache[6] || (_cache[6] = (...args) => ($options.onClick && $options.onClick(...args)))
+    onClick: _cache[7] || (_cache[7] = (...args) => ($options.onClick && $options.onClick(...args)))
   }, [
     createElementVNode("div", _hoisted_1, [
       createElementVNode("input", mergeProps({
@@ -527,7 +540,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   ref: $options.overlayRef,
                   onClick: _cache[5] || (_cache[5] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args))),
                   class: $options.panelStyleClass
-                }, $props.panelProps), [
+                }, $props.panelProps, {
+                  onKeydown: _cache[6] || (_cache[6] = (...args) => ($options.onOverlayKeydown && $options.onOverlayKeydown(...args)))
+                }), [
                   renderSlot(_ctx.$slots, "header", {
                     value: $props.modelValue,
                     options: $props.options
@@ -537,6 +552,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                     style: normalizeStyle({ 'max-height': $props.scrollHeight })
                   }, [
                     createVNode(_component_TSTree, {
+                      ref: "tree",
                       id: $options.listId,
                       value: $props.options,
                       selectionMode: $props.selectionMode,
@@ -601,7 +617,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "\n.p-treeselect {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    cursor: pointer;\n    position: relative;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n}\n.p-treeselect-trigger {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n}\n.p-treeselect-label-container {\n    overflow: hidden;\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    cursor: pointer;\n}\n.p-treeselect-label {\n    display: block;\n    white-space: nowrap;\n    cursor: pointer;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n.p-treeselect-label-empty {\n    overflow: hidden;\n    visibility: hidden;\n}\n.p-treeselect-token {\n    cursor: default;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-flex: 0;\n        -ms-flex: 0 0 auto;\n            flex: 0 0 auto;\n}\n.p-treeselect .p-treeselect-panel {\n    min-width: 100%;\n}\n.p-treeselect-panel {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-treeselect-items-wrapper {\n    overflow: auto;\n}\n.p-fluid .p-treeselect {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n";
+var css_248z = "\n.p-treeselect {\n    display: inline-flex;\n    cursor: pointer;\n    position: relative;\n    user-select: none;\n}\n.p-treeselect-trigger {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n.p-treeselect-label-container {\n    overflow: hidden;\n    flex: 1 1 auto;\n    cursor: pointer;\n}\n.p-treeselect-label {\n    display: block;\n    white-space: nowrap;\n    cursor: pointer;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n.p-treeselect-label-empty {\n    overflow: hidden;\n    visibility: hidden;\n}\n.p-treeselect-token {\n    cursor: default;\n    display: inline-flex;\n    align-items: center;\n    flex: 0 0 auto;\n}\n.p-treeselect .p-treeselect-panel {\n    min-width: 100%;\n}\n.p-treeselect-panel {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-treeselect-items-wrapper {\n    overflow: auto;\n}\n.p-fluid .p-treeselect {\n    display: flex;\n}\n";
 styleInject(css_248z);
 
 script.render = render;

package/treeselect/treeselect.esm.min.js

@@ -1 +1 @@
-import{ZIndexUtils as e,DomHandler as t,ConnectedOverlayScrollHandler as l,UniqueComponentId as i}from"primevue/utils";import s from"primevue/overlayeventbus";import n from"primevue/tree";import o from"primevue/ripple";import a from"primevue/portal";import{resolveComponent as r,openBlock as d,createElementBlock as p,normalizeClass as c,createElementVNode as h,mergeProps as u,renderSlot as y,Fragment as f,createTextVNode as m,toDisplayString as b,renderList as v,createCommentVNode as g,createVNode as x,withCtx as k,Transition as S,normalizeStyle as w}from"vue";var C={name:"TreeSelect",emits:["update:modelValue","before-show","before-hide","change","show","hide","node-select","node-unselect","node-expand","node-collapse","focus","blur"],props:{modelValue:null,options:Array,scrollHeight:{type:String,default:"400px"},placeholder:{type:String,default:null},disabled:{type:Boolean,default:!1},tabindex:{type:Number,default:null},selectionMode:{type:String,default:"single"},appendTo:{type:String,default:"body"},emptyMessage:{type:String,default:null},display:{type:String,default:"comma"},metaKeySelection:{type:Boolean,default:!0},inputId:{type:String,default:null},inputClass:{type:String,default:null},inputStyle:{type:null,default:null},inputProps:{type:null,default:null},panelClass:{type:String,default:null},panelProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1,overlayVisible:!1,expandedKeys:{}}),watch:{modelValue:{handler:function(){this.selfChange||this.updateTreeState(),this.selfChange=!1},immediate:!0},options(){this.updateTreeState()}},outsideClickListener:null,resizeListener:null,scrollHandler:null,overlay:null,selfChange:!1,beforeUnmount(){this.unbindOutsideClickListener(),this.unbindResizeListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.overlay&&(e.clear(this.overlay),this.overlay=null)},mounted(){this.updateTreeState()},methods:{show(){this.$emit("before-show"),this.overlayVisible=!0},hide(){this.$emit("before-hide"),this.overlayVisible=!1,this.$refs.focusInput.focus()},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)},onClick(e){this.disabled||this.overlay&&this.overlay.contains(e.target)||t.hasClass(e.target,"p-treeselect-close")||(this.overlayVisible?this.hide():this.show(),this.$refs.focusInput.focus())},onSelectionChange(e){this.selfChange=!0,this.$emit("update:modelValue",e),this.$emit("change",e)},onNodeSelect(e){this.$emit("node-select",e),"single"===this.selectionMode&&this.hide()},onNodeUnselect(e){this.$emit("node-unselect",e)},onNodeToggle(e){this.expandedKeys=e},onKeyDown(e){switch(e.code){case"Down":case"ArrowDown":this.overlayVisible?t.findSingle(this.overlay,".p-highlight")?t.findSingle(this.overlay,".p-highlight").focus():t.findSingle(this.overlay,".p-treenode").children[0].focus():this.show(),e.preventDefault();break;case"Space":case"Enter":this.overlayVisible?this.hide():this.show(),e.preventDefault();break;case"Escape":case"Tab":this.overlayVisible&&(this.hide(),e.preventDefault())}},onOverlayEnter(t){e.set("overlay",t,this.$primevue.config.zIndex.overlay),this.alignOverlay(),this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.scrollValueInView(),this.$emit("show")},onOverlayLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),this.$emit("hide"),this.overlay=null},onOverlayAfterLeave(t){e.clear(t)},alignOverlay(){"self"===this.appendTo?t.relativePosition(this.overlay,this.$el):(this.overlay.style.minWidth=t.getOuterWidth(this.$el)+"px",t.absolutePosition(this.overlay,this.$el))},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{this.overlayVisible&&this.isOutsideClicked(e)&&this.hide()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new l(this.$refs.container,(()=>{this.overlayVisible&&this.hide()}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.overlayVisible&&!t.isTouchDevice()&&this.hide()},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isOutsideClicked(e){return!(this.$el.isSameNode(e.target)||this.$el.contains(e.target)||this.overlay&&this.overlay.contains(e.target))},overlayRef(e){this.overlay=e},onOverlayClick(e){s.emit("overlay-click",{originalEvent:e,target:this.$el})},findSelectedNodes(e,t,l){if(e){if(this.isSelected(e,t)&&(l.push(e),delete t[e.key]),Object.keys(t).length&&e.children)for(let i of e.children)this.findSelectedNodes(i,t,l)}else for(let e of this.options)this.findSelectedNodes(e,t,l)},isSelected(e,t){return"checkbox"===this.selectionMode?t[e.key]&&t[e.key].checked:t[e.key]},updateTreeState(){let e={...this.modelValue};this.expandedKeys={},e&&this.options&&this.updateTreeBranchState(null,null,e)},updateTreeBranchState(e,t,l){if(e){if(this.isSelected(e,l)&&(this.expandPath(t),delete l[e.key]),Object.keys(l).length&&e.children)for(let i of e.children)t.push(e.key),this.updateTreeBranchState(i,t,l)}else for(let e of this.options)this.updateTreeBranchState(e,[],l)},expandPath(e){if(e.length>0)for(let t of e)this.expandedKeys[t]=!0},scrollValueInView(){if(this.overlay){let e=t.findSingle(this.overlay,"li.p-highlight");e&&e.scrollIntoView({block:"nearest",inline:"start"})}}},computed:{containerClass(){return["p-treeselect p-component p-inputwrapper",{"p-treeselect-chip":"chip"===this.display,"p-disabled":this.disabled,"p-focus":this.focused,"p-inputwrapper-filled":!this.emptyValue,"p-inputwrapper-focus":this.focused||this.overlayVisible}]},labelClass(){return["p-treeselect-label",{"p-placeholder":this.label===this.placeholder,"p-treeselect-label-empty":!this.placeholder&&this.emptyValue}]},panelStyleClass(){return["p-treeselect-panel p-component",this.panelClass,{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},selectedNodes(){let e=[];if(this.modelValue&&this.options){let t={...this.modelValue};this.findSelectedNodes(null,t,e)}return e},label(){let e=this.selectedNodes;return e.length?e.map((e=>e.label)).join(", "):this.placeholder},emptyMessageText(){return this.emptyMessage||this.$primevue.config.locale.emptyMessage},emptyValue(){return!this.modelValue||0===Object.keys(this.modelValue).length},emptyOptions(){return!this.options||0===this.options.length},listId:()=>i()+"_list"},components:{TSTree:n,Portal:a},directives:{ripple:o}};const L={class:"p-hidden-accessible"},V=["id","disabled","tabindex","aria-labelledby","aria-label","aria-expanded","aria-controls"],$={class:"p-treeselect-label-container"},T={class:"p-treeselect-token-label"},N=["aria-expanded"],O=h("span",{class:"p-treeselect-trigger-icon pi pi-chevron-down"},null,-1),K={key:0,class:"p-treeselect-empty-message"};!function(e,t){void 0===t&&(t={});var l=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===l&&i.firstChild?i.insertBefore(s,i.firstChild):i.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-treeselect {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    cursor: pointer;\n    position: relative;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n}\n.p-treeselect-trigger {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n}\n.p-treeselect-label-container {\n    overflow: hidden;\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    cursor: pointer;\n}\n.p-treeselect-label {\n    display: block;\n    white-space: nowrap;\n    cursor: pointer;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n.p-treeselect-label-empty {\n    overflow: hidden;\n    visibility: hidden;\n}\n.p-treeselect-token {\n    cursor: default;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-flex: 0;\n        -ms-flex: 0 0 auto;\n            flex: 0 0 auto;\n}\n.p-treeselect .p-treeselect-panel {\n    min-width: 100%;\n}\n.p-treeselect-panel {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-treeselect-items-wrapper {\n    overflow: auto;\n}\n.p-fluid .p-treeselect {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n"),C.render=function(e,t,l,i,s,n){const o=r("TSTree"),a=r("Portal");return d(),p("div",{ref:"container",class:c(n.containerClass),onClick:t[6]||(t[6]=(...e)=>n.onClick&&n.onClick(...e))},[h("div",L,[h("input",u({ref:"focusInput",id:l.inputId,type:"text",role:"combobox",class:l.inputClass,style:l.inputStyle,readonly:"",disabled:l.disabled,tabindex:l.disabled?-1:l.tabindex,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-haspopup":"tree","aria-expanded":s.overlayVisible,"aria-controls":n.listId,onFocus:t[0]||(t[0]=e=>n.onFocus(e)),onBlur:t[1]||(t[1]=e=>n.onBlur(e)),onKeydown:t[2]||(t[2]=e=>n.onKeyDown(e))},l.inputProps),null,16,V)]),h("div",$,[h("div",{class:c(n.labelClass)},[y(e.$slots,"value",{value:n.selectedNodes,placeholder:l.placeholder},(()=>["comma"===l.display?(d(),p(f,{key:0},[m(b(n.label||"empty"),1)],64)):"chip"===l.display?(d(),p(f,{key:1},[(d(!0),p(f,null,v(n.selectedNodes,(e=>(d(),p("div",{key:e.key,class:"p-treeselect-token"},[h("span",T,b(e.label),1)])))),128)),n.emptyValue?(d(),p(f,{key:0},[m(b(l.placeholder||"empty"),1)],64)):g("",!0)],64)):g("",!0)]))],2)]),h("div",{class:"p-treeselect-trigger",role:"button","aria-haspopup":"tree","aria-expanded":s.overlayVisible},[y(e.$slots,"indicator",{},(()=>[O]))],8,N),x(a,{appendTo:l.appendTo},{default:k((()=>[x(S,{name:"p-connected-overlay",onEnter:n.onOverlayEnter,onLeave:n.onOverlayLeave,onAfterLeave:n.onOverlayAfterLeave},{default:k((()=>[s.overlayVisible?(d(),p("div",u({key:0,ref:n.overlayRef,onClick:t[5]||(t[5]=(...e)=>n.onOverlayClick&&n.onOverlayClick(...e)),class:n.panelStyleClass},l.panelProps),[y(e.$slots,"header",{value:l.modelValue,options:l.options}),h("div",{class:"p-treeselect-items-wrapper",style:w({"max-height":l.scrollHeight})},[x(o,{id:n.listId,value:l.options,selectionMode:l.selectionMode,"onUpdate:selectionKeys":n.onSelectionChange,selectionKeys:l.modelValue,expandedKeys:s.expandedKeys,"onUpdate:expandedKeys":n.onNodeToggle,metaKeySelection:l.metaKeySelection,onNodeExpand:t[3]||(t[3]=t=>e.$emit("node-expand",t)),onNodeCollapse:t[4]||(t[4]=t=>e.$emit("node-collapse",t)),onNodeSelect:n.onNodeSelect,onNodeUnselect:n.onNodeUnselect,level:0},null,8,["id","value","selectionMode","onUpdate:selectionKeys","selectionKeys","expandedKeys","onUpdate:expandedKeys","metaKeySelection","onNodeSelect","onNodeUnselect"]),n.emptyOptions?(d(),p("div",K,[y(e.$slots,"empty",{},(()=>[m(b(n.emptyMessageText),1)]))])):g("",!0)],4),y(e.$slots,"footer",{value:l.modelValue,options:l.options})],16)):g("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3},8,["appendTo"])],2)};export{C as default};
+import e from"primevue/overlayeventbus";import t from"primevue/portal";import l from"primevue/ripple";import i from"primevue/tree";import{ZIndexUtils as s,DomHandler as n,ConnectedOverlayScrollHandler as o,UniqueComponentId as r}from"primevue/utils";import{resolveComponent as a,openBlock as d,createElementBlock as p,normalizeClass as c,createElementVNode as h,mergeProps as u,renderSlot as y,Fragment as f,createTextVNode as v,toDisplayString as m,renderList as b,createCommentVNode as g,createVNode as S,withCtx as k,Transition as w,normalizeStyle as x}from"vue";var C={name:"TreeSelect",emits:["update:modelValue","before-show","before-hide","change","show","hide","node-select","node-unselect","node-expand","node-collapse","focus","blur"],props:{modelValue:null,options:Array,scrollHeight:{type:String,default:"400px"},placeholder:{type:String,default:null},disabled:{type:Boolean,default:!1},tabindex:{type:Number,default:null},selectionMode:{type:String,default:"single"},appendTo:{type:String,default:"body"},emptyMessage:{type:String,default:null},display:{type:String,default:"comma"},metaKeySelection:{type:Boolean,default:!0},inputId:{type:String,default:null},inputClass:{type:String,default:null},inputStyle:{type:null,default:null},inputProps:{type:null,default:null},panelClass:{type:String,default:null},panelProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1,overlayVisible:!1,expandedKeys:{}}),watch:{modelValue:{handler:function(){this.selfChange||this.updateTreeState(),this.selfChange=!1},immediate:!0},options(){this.updateTreeState()}},outsideClickListener:null,resizeListener:null,scrollHandler:null,overlay:null,selfChange:!1,beforeUnmount(){this.unbindOutsideClickListener(),this.unbindResizeListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.overlay&&(s.clear(this.overlay),this.overlay=null)},mounted(){this.updateTreeState()},methods:{show(){this.$emit("before-show"),this.overlayVisible=!0},hide(){this.$emit("before-hide"),this.overlayVisible=!1,this.$refs.focusInput.focus()},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)},onClick(e){this.disabled||this.overlay&&this.overlay.contains(e.target)||n.hasClass(e.target,"p-treeselect-close")||(this.overlayVisible?this.hide():this.show(),this.$refs.focusInput.focus())},onSelectionChange(e){this.selfChange=!0,this.$emit("update:modelValue",e),this.$emit("change",e)},onNodeSelect(e){this.$emit("node-select",e),"single"===this.selectionMode&&this.hide()},onNodeUnselect(e){this.$emit("node-unselect",e)},onNodeToggle(e){this.expandedKeys=e},onKeyDown(e){switch(e.code){case"ArrowDown":this.onArrowDownKey(e);break;case"Space":case"Enter":this.onEnterKey(e);break;case"Escape":this.onEscapeKey(e)}},onArrowDownKey(e){this.overlayVisible||(this.show(),this.$nextTick((()=>{const e=[...n.find(this.$refs.tree.$el,".p-treenode")].find((e=>"0"===e.getAttribute("tabindex")));n.focus(e)})),e.preventDefault())},onEnterKey(e){this.overlayVisible?this.hide():this.onArrowDownKey(e),e.preventDefault()},onEscapeKey(e){this.overlayVisible&&(this.hide(),e.preventDefault())},onOverlayEnter(e){s.set("overlay",e,this.$primevue.config.zIndex.overlay),this.alignOverlay(),this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.scrollValueInView(),this.$emit("show")},onOverlayLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),this.$emit("hide"),this.overlay=null},onOverlayAfterLeave(e){s.clear(e)},alignOverlay(){"self"===this.appendTo?n.relativePosition(this.overlay,this.$el):(this.overlay.style.minWidth=n.getOuterWidth(this.$el)+"px",n.absolutePosition(this.overlay,this.$el))},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{this.overlayVisible&&this.isOutsideClicked(e)&&this.hide()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new o(this.$refs.container,(()=>{this.overlayVisible&&this.hide()}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.overlayVisible&&!n.isTouchDevice()&&this.hide()},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isOutsideClicked(e){return!(this.$el.isSameNode(e.target)||this.$el.contains(e.target)||this.overlay&&this.overlay.contains(e.target))},overlayRef(e){this.overlay=e},onOverlayClick(t){e.emit("overlay-click",{originalEvent:t,target:this.$el})},onOverlayKeydown(e){"Escape"===e.code&&this.hide()},findSelectedNodes(e,t,l){if(e){if(this.isSelected(e,t)&&(l.push(e),delete t[e.key]),Object.keys(t).length&&e.children)for(let i of e.children)this.findSelectedNodes(i,t,l)}else for(let e of this.options)this.findSelectedNodes(e,t,l)},isSelected(e,t){return"checkbox"===this.selectionMode?t[e.key]&&t[e.key].checked:t[e.key]},updateTreeState(){let e={...this.modelValue};this.expandedKeys={},e&&this.options&&this.updateTreeBranchState(null,null,e)},updateTreeBranchState(e,t,l){if(e){if(this.isSelected(e,l)&&(this.expandPath(t),delete l[e.key]),Object.keys(l).length&&e.children)for(let i of e.children)t.push(e.key),this.updateTreeBranchState(i,t,l)}else for(let e of this.options)this.updateTreeBranchState(e,[],l)},expandPath(e){if(e.length>0)for(let t of e)this.expandedKeys[t]=!0},scrollValueInView(){if(this.overlay){let e=n.findSingle(this.overlay,"li.p-highlight");e&&e.scrollIntoView({block:"nearest",inline:"start"})}}},computed:{containerClass(){return["p-treeselect p-component p-inputwrapper",{"p-treeselect-chip":"chip"===this.display,"p-disabled":this.disabled,"p-focus":this.focused,"p-inputwrapper-filled":!this.emptyValue,"p-inputwrapper-focus":this.focused||this.overlayVisible}]},labelClass(){return["p-treeselect-label",{"p-placeholder":this.label===this.placeholder,"p-treeselect-label-empty":!this.placeholder&&this.emptyValue}]},panelStyleClass(){return["p-treeselect-panel p-component",this.panelClass,{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},selectedNodes(){let e=[];if(this.modelValue&&this.options){let t={...this.modelValue};this.findSelectedNodes(null,t,e)}return e},label(){let e=this.selectedNodes;return e.length?e.map((e=>e.label)).join(", "):this.placeholder},emptyMessageText(){return this.emptyMessage||this.$primevue.config.locale.emptyMessage},emptyValue(){return!this.modelValue||0===Object.keys(this.modelValue).length},emptyOptions(){return!this.options||0===this.options.length},listId:()=>r()+"_list"},components:{TSTree:i,Portal:t},directives:{ripple:l}};const L={class:"p-hidden-accessible"},V=["id","disabled","tabindex","aria-labelledby","aria-label","aria-expanded","aria-controls"],$={class:"p-treeselect-label-container"},K={class:"p-treeselect-token-label"},O=["aria-expanded"],T=h("span",{class:"p-treeselect-trigger-icon pi pi-chevron-down"},null,-1),N={key:0,class:"p-treeselect-empty-message"};!function(e,t){void 0===t&&(t={});var l=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===l&&i.firstChild?i.insertBefore(s,i.firstChild):i.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-treeselect {\n    display: inline-flex;\n    cursor: pointer;\n    position: relative;\n    user-select: none;\n}\n.p-treeselect-trigger {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n.p-treeselect-label-container {\n    overflow: hidden;\n    flex: 1 1 auto;\n    cursor: pointer;\n}\n.p-treeselect-label {\n    display: block;\n    white-space: nowrap;\n    cursor: pointer;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n.p-treeselect-label-empty {\n    overflow: hidden;\n    visibility: hidden;\n}\n.p-treeselect-token {\n    cursor: default;\n    display: inline-flex;\n    align-items: center;\n    flex: 0 0 auto;\n}\n.p-treeselect .p-treeselect-panel {\n    min-width: 100%;\n}\n.p-treeselect-panel {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-treeselect-items-wrapper {\n    overflow: auto;\n}\n.p-fluid .p-treeselect {\n    display: flex;\n}\n"),C.render=function(e,t,l,i,s,n){const o=a("TSTree"),r=a("Portal");return d(),p("div",{ref:"container",class:c(n.containerClass),onClick:t[7]||(t[7]=(...e)=>n.onClick&&n.onClick(...e))},[h("div",L,[h("input",u({ref:"focusInput",id:l.inputId,type:"text",role:"combobox",class:l.inputClass,style:l.inputStyle,readonly:"",disabled:l.disabled,tabindex:l.disabled?-1:l.tabindex,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-haspopup":"tree","aria-expanded":s.overlayVisible,"aria-controls":n.listId,onFocus:t[0]||(t[0]=e=>n.onFocus(e)),onBlur:t[1]||(t[1]=e=>n.onBlur(e)),onKeydown:t[2]||(t[2]=e=>n.onKeyDown(e))},l.inputProps),null,16,V)]),h("div",$,[h("div",{class:c(n.labelClass)},[y(e.$slots,"value",{value:n.selectedNodes,placeholder:l.placeholder},(()=>["comma"===l.display?(d(),p(f,{key:0},[v(m(n.label||"empty"),1)],64)):"chip"===l.display?(d(),p(f,{key:1},[(d(!0),p(f,null,b(n.selectedNodes,(e=>(d(),p("div",{key:e.key,class:"p-treeselect-token"},[h("span",K,m(e.label),1)])))),128)),n.emptyValue?(d(),p(f,{key:0},[v(m(l.placeholder||"empty"),1)],64)):g("",!0)],64)):g("",!0)]))],2)]),h("div",{class:"p-treeselect-trigger",role:"button","aria-haspopup":"tree","aria-expanded":s.overlayVisible},[y(e.$slots,"indicator",{},(()=>[T]))],8,O),S(r,{appendTo:l.appendTo},{default:k((()=>[S(w,{name:"p-connected-overlay",onEnter:n.onOverlayEnter,onLeave:n.onOverlayLeave,onAfterLeave:n.onOverlayAfterLeave},{default:k((()=>[s.overlayVisible?(d(),p("div",u({key:0,ref:n.overlayRef,onClick:t[5]||(t[5]=(...e)=>n.onOverlayClick&&n.onOverlayClick(...e)),class:n.panelStyleClass},l.panelProps,{onKeydown:t[6]||(t[6]=(...e)=>n.onOverlayKeydown&&n.onOverlayKeydown(...e))}),[y(e.$slots,"header",{value:l.modelValue,options:l.options}),h("div",{class:"p-treeselect-items-wrapper",style:x({"max-height":l.scrollHeight})},[S(o,{ref:"tree",id:n.listId,value:l.options,selectionMode:l.selectionMode,"onUpdate:selectionKeys":n.onSelectionChange,selectionKeys:l.modelValue,expandedKeys:s.expandedKeys,"onUpdate:expandedKeys":n.onNodeToggle,metaKeySelection:l.metaKeySelection,onNodeExpand:t[3]||(t[3]=t=>e.$emit("node-expand",t)),onNodeCollapse:t[4]||(t[4]=t=>e.$emit("node-collapse",t)),onNodeSelect:n.onNodeSelect,onNodeUnselect:n.onNodeUnselect,level:0},null,8,["id","value","selectionMode","onUpdate:selectionKeys","selectionKeys","expandedKeys","onUpdate:expandedKeys","metaKeySelection","onNodeSelect","onNodeUnselect"]),n.emptyOptions?(d(),p("div",N,[y(e.$slots,"empty",{},(()=>[v(m(n.emptyMessageText),1)]))])):g("",!0)],4),y(e.$slots,"footer",{value:l.modelValue,options:l.options})],16)):g("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3},8,["appendTo"])],2)};export{C as default};

package/treeselect/treeselect.js

@@ -1,13 +1,13 @@
 this.primevue = this.primevue || {};
-this.primevue.treeselect = (function (utils, OverlayEventBus, Tree, Ripple, Portal, vue) {
+this.primevue.treeselect = (function (OverlayEventBus, Portal, Ripple, Tree, utils, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
     var OverlayEventBus__default = /*#__PURE__*/_interopDefaultLegacy(OverlayEventBus);
-    var Tree__default = /*#__PURE__*/_interopDefaultLegacy(Tree);
-    var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
     var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
+    var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
+    var Tree__default = /*#__PURE__*/_interopDefaultLegacy(Tree);
 
     var script = {
         name: 'TreeSelect',
@@ -174,40 +174,50 @@ this.primevue.treeselect = (function (utils, OverlayEventBus, Tree, Ripple, Port
             },
             onKeyDown(event) {
                 switch (event.code) {
-                    case 'Down':
                     case 'ArrowDown':
-                        if (this.overlayVisible) {
-                            if (utils.DomHandler.findSingle(this.overlay, '.p-highlight')) {
-                                utils.DomHandler.findSingle(this.overlay, '.p-highlight').focus();
-                            } else utils.DomHandler.findSingle(this.overlay, '.p-treenode').children[0].focus();
-                        } else {
-                            this.show();
-                        }
-
-                        event.preventDefault();
+                        this.onArrowDownKey(event);
                         break;
 
                     case 'Space':
                     case 'Enter':
-                        if (this.overlayVisible) {
-                            this.hide();
-                        } else {
-                            this.show();
-                        }
-
-                        event.preventDefault();
+                        this.onEnterKey(event);
                         break;
 
                     case 'Escape':
-                    case 'Tab':
-                        if (this.overlayVisible) {
-                            this.hide();
-                            event.preventDefault();
-                        }
+                        this.onEscapeKey(event);
 
                         break;
                 }
             },
+            onArrowDownKey(event) {
+                if (this.overlayVisible) return;
+
+                this.show();
+
+                this.$nextTick(() => {
+                    const treeNodeEl = utils.DomHandler.find(this.$refs.tree.$el, '.p-treenode');
+                    const focusedElement = [...treeNodeEl].find((item) => item.getAttribute('tabindex') === '0');
+
+                    utils.DomHandler.focus(focusedElement);
+                });
+
+                event.preventDefault();
+            },
+            onEnterKey(event) {
+                if (this.overlayVisible) {
+                    this.hide();
+                } else {
+                    this.onArrowDownKey(event);
+                }
+
+                event.preventDefault();
+            },
+            onEscapeKey(event) {
+                if (this.overlayVisible) {
+                    this.hide();
+                    event.preventDefault();
+                }
+            },
             onOverlayEnter(el) {
                 utils.ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
                 this.alignOverlay();
@@ -297,6 +307,9 @@ this.primevue.treeselect = (function (utils, OverlayEventBus, Tree, Ripple, Port
                     target: this.$el
                 });
             },
+            onOverlayKeydown(event) {
+                if (event.code === 'Escape') this.hide();
+            },
             findSelectedNodes(node, keys, selectedNodes) {
                 if (node) {
                     if (this.isSelected(node, keys)) {
@@ -451,7 +464,7 @@ this.primevue.treeselect = (function (utils, OverlayEventBus, Tree, Ripple, Port
       return (vue.openBlock(), vue.createElementBlock("div", {
         ref: "container",
         class: vue.normalizeClass($options.containerClass),
-        onClick: _cache[6] || (_cache[6] = (...args) => ($options.onClick && $options.onClick(...args)))
+        onClick: _cache[7] || (_cache[7] = (...args) => ($options.onClick && $options.onClick(...args)))
       }, [
         vue.createElementVNode("div", _hoisted_1, [
           vue.createElementVNode("input", vue.mergeProps({
@@ -531,7 +544,9 @@ this.primevue.treeselect = (function (utils, OverlayEventBus, Tree, Ripple, Port
                       ref: $options.overlayRef,
                       onClick: _cache[5] || (_cache[5] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args))),
                       class: $options.panelStyleClass
-                    }, $props.panelProps), [
+                    }, $props.panelProps, {
+                      onKeydown: _cache[6] || (_cache[6] = (...args) => ($options.onOverlayKeydown && $options.onOverlayKeydown(...args)))
+                    }), [
                       vue.renderSlot(_ctx.$slots, "header", {
                         value: $props.modelValue,
                         options: $props.options
@@ -541,6 +556,7 @@ this.primevue.treeselect = (function (utils, OverlayEventBus, Tree, Ripple, Port
                         style: vue.normalizeStyle({ 'max-height': $props.scrollHeight })
                       }, [
                         vue.createVNode(_component_TSTree, {
+                          ref: "tree",
                           id: $options.listId,
                           value: $props.options,
                           selectionMode: $props.selectionMode,
@@ -605,11 +621,11 @@ this.primevue.treeselect = (function (utils, OverlayEventBus, Tree, Ripple, Port
       }
     }
 
-    var css_248z = "\n.p-treeselect {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    cursor: pointer;\n    position: relative;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n}\n.p-treeselect-trigger {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n}\n.p-treeselect-label-container {\n    overflow: hidden;\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    cursor: pointer;\n}\n.p-treeselect-label {\n    display: block;\n    white-space: nowrap;\n    cursor: pointer;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n.p-treeselect-label-empty {\n    overflow: hidden;\n    visibility: hidden;\n}\n.p-treeselect-token {\n    cursor: default;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-flex: 0;\n        -ms-flex: 0 0 auto;\n            flex: 0 0 auto;\n}\n.p-treeselect .p-treeselect-panel {\n    min-width: 100%;\n}\n.p-treeselect-panel {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-treeselect-items-wrapper {\n    overflow: auto;\n}\n.p-fluid .p-treeselect {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n";
+    var css_248z = "\n.p-treeselect {\n    display: inline-flex;\n    cursor: pointer;\n    position: relative;\n    user-select: none;\n}\n.p-treeselect-trigger {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n.p-treeselect-label-container {\n    overflow: hidden;\n    flex: 1 1 auto;\n    cursor: pointer;\n}\n.p-treeselect-label {\n    display: block;\n    white-space: nowrap;\n    cursor: pointer;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n.p-treeselect-label-empty {\n    overflow: hidden;\n    visibility: hidden;\n}\n.p-treeselect-token {\n    cursor: default;\n    display: inline-flex;\n    align-items: center;\n    flex: 0 0 auto;\n}\n.p-treeselect .p-treeselect-panel {\n    min-width: 100%;\n}\n.p-treeselect-panel {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-treeselect-items-wrapper {\n    overflow: auto;\n}\n.p-fluid .p-treeselect {\n    display: flex;\n}\n";
     styleInject(css_248z);
 
     script.render = render;
 
     return script;
 
-})(primevue.utils, primevue.overlayeventbus, primevue.tree, primevue.ripple, primevue.portal, Vue);
+})(primevue.overlayeventbus, primevue.portal, primevue.ripple, primevue.tree, primevue.utils, Vue);

package/treeselect/treeselect.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.treeselect=function(e,t,l,i,n,s){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(t),r=o(l),d=o(i),c=o(n),p={name:"TreeSelect",emits:["update:modelValue","before-show","before-hide","change","show","hide","node-select","node-unselect","node-expand","node-collapse","focus","blur"],props:{modelValue:null,options:Array,scrollHeight:{type:String,default:"400px"},placeholder:{type:String,default:null},disabled:{type:Boolean,default:!1},tabindex:{type:Number,default:null},selectionMode:{type:String,default:"single"},appendTo:{type:String,default:"body"},emptyMessage:{type:String,default:null},display:{type:String,default:"comma"},metaKeySelection:{type:Boolean,default:!0},inputId:{type:String,default:null},inputClass:{type:String,default:null},inputStyle:{type:null,default:null},inputProps:{type:null,default:null},panelClass:{type:String,default:null},panelProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1,overlayVisible:!1,expandedKeys:{}}),watch:{modelValue:{handler:function(){this.selfChange||this.updateTreeState(),this.selfChange=!1},immediate:!0},options(){this.updateTreeState()}},outsideClickListener:null,resizeListener:null,scrollHandler:null,overlay:null,selfChange:!1,beforeUnmount(){this.unbindOutsideClickListener(),this.unbindResizeListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.overlay&&(e.ZIndexUtils.clear(this.overlay),this.overlay=null)},mounted(){this.updateTreeState()},methods:{show(){this.$emit("before-show"),this.overlayVisible=!0},hide(){this.$emit("before-hide"),this.overlayVisible=!1,this.$refs.focusInput.focus()},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)},onClick(t){this.disabled||this.overlay&&this.overlay.contains(t.target)||e.DomHandler.hasClass(t.target,"p-treeselect-close")||(this.overlayVisible?this.hide():this.show(),this.$refs.focusInput.focus())},onSelectionChange(e){this.selfChange=!0,this.$emit("update:modelValue",e),this.$emit("change",e)},onNodeSelect(e){this.$emit("node-select",e),"single"===this.selectionMode&&this.hide()},onNodeUnselect(e){this.$emit("node-unselect",e)},onNodeToggle(e){this.expandedKeys=e},onKeyDown(t){switch(t.code){case"Down":case"ArrowDown":this.overlayVisible?e.DomHandler.findSingle(this.overlay,".p-highlight")?e.DomHandler.findSingle(this.overlay,".p-highlight").focus():e.DomHandler.findSingle(this.overlay,".p-treenode").children[0].focus():this.show(),t.preventDefault();break;case"Space":case"Enter":this.overlayVisible?this.hide():this.show(),t.preventDefault();break;case"Escape":case"Tab":this.overlayVisible&&(this.hide(),t.preventDefault())}},onOverlayEnter(t){e.ZIndexUtils.set("overlay",t,this.$primevue.config.zIndex.overlay),this.alignOverlay(),this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.scrollValueInView(),this.$emit("show")},onOverlayLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),this.$emit("hide"),this.overlay=null},onOverlayAfterLeave(t){e.ZIndexUtils.clear(t)},alignOverlay(){"self"===this.appendTo?e.DomHandler.relativePosition(this.overlay,this.$el):(this.overlay.style.minWidth=e.DomHandler.getOuterWidth(this.$el)+"px",e.DomHandler.absolutePosition(this.overlay,this.$el))},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{this.overlayVisible&&this.isOutsideClicked(e)&&this.hide()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new e.ConnectedOverlayScrollHandler(this.$refs.container,(()=>{this.overlayVisible&&this.hide()}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.overlayVisible&&!e.DomHandler.isTouchDevice()&&this.hide()},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isOutsideClicked(e){return!(this.$el.isSameNode(e.target)||this.$el.contains(e.target)||this.overlay&&this.overlay.contains(e.target))},overlayRef(e){this.overlay=e},onOverlayClick(e){a.default.emit("overlay-click",{originalEvent:e,target:this.$el})},findSelectedNodes(e,t,l){if(e){if(this.isSelected(e,t)&&(l.push(e),delete t[e.key]),Object.keys(t).length&&e.children)for(let i of e.children)this.findSelectedNodes(i,t,l)}else for(let e of this.options)this.findSelectedNodes(e,t,l)},isSelected(e,t){return"checkbox"===this.selectionMode?t[e.key]&&t[e.key].checked:t[e.key]},updateTreeState(){let e={...this.modelValue};this.expandedKeys={},e&&this.options&&this.updateTreeBranchState(null,null,e)},updateTreeBranchState(e,t,l){if(e){if(this.isSelected(e,l)&&(this.expandPath(t),delete l[e.key]),Object.keys(l).length&&e.children)for(let i of e.children)t.push(e.key),this.updateTreeBranchState(i,t,l)}else for(let e of this.options)this.updateTreeBranchState(e,[],l)},expandPath(e){if(e.length>0)for(let t of e)this.expandedKeys[t]=!0},scrollValueInView(){if(this.overlay){let t=e.DomHandler.findSingle(this.overlay,"li.p-highlight");t&&t.scrollIntoView({block:"nearest",inline:"start"})}}},computed:{containerClass(){return["p-treeselect p-component p-inputwrapper",{"p-treeselect-chip":"chip"===this.display,"p-disabled":this.disabled,"p-focus":this.focused,"p-inputwrapper-filled":!this.emptyValue,"p-inputwrapper-focus":this.focused||this.overlayVisible}]},labelClass(){return["p-treeselect-label",{"p-placeholder":this.label===this.placeholder,"p-treeselect-label-empty":!this.placeholder&&this.emptyValue}]},panelStyleClass(){return["p-treeselect-panel p-component",this.panelClass,{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},selectedNodes(){let e=[];if(this.modelValue&&this.options){let t={...this.modelValue};this.findSelectedNodes(null,t,e)}return e},label(){let e=this.selectedNodes;return e.length?e.map((e=>e.label)).join(", "):this.placeholder},emptyMessageText(){return this.emptyMessage||this.$primevue.config.locale.emptyMessage},emptyValue(){return!this.modelValue||0===Object.keys(this.modelValue).length},emptyOptions(){return!this.options||0===this.options.length},listId:()=>e.UniqueComponentId()+"_list"},components:{TSTree:r.default,Portal:c.default},directives:{ripple:d.default}};const h={class:"p-hidden-accessible"},u=["id","disabled","tabindex","aria-labelledby","aria-label","aria-expanded","aria-controls"],y={class:"p-treeselect-label-container"},m={class:"p-treeselect-token-label"},f=["aria-expanded"],b=s.createElementVNode("span",{class:"p-treeselect-trigger-icon pi pi-chevron-down"},null,-1),v={key:0,class:"p-treeselect-empty-message"};return function(e,t){void 0===t&&(t={});var l=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===l&&i.firstChild?i.insertBefore(n,i.firstChild):i.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-treeselect {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    cursor: pointer;\n    position: relative;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n}\n.p-treeselect-trigger {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n}\n.p-treeselect-label-container {\n    overflow: hidden;\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    cursor: pointer;\n}\n.p-treeselect-label {\n    display: block;\n    white-space: nowrap;\n    cursor: pointer;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n.p-treeselect-label-empty {\n    overflow: hidden;\n    visibility: hidden;\n}\n.p-treeselect-token {\n    cursor: default;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-flex: 0;\n        -ms-flex: 0 0 auto;\n            flex: 0 0 auto;\n}\n.p-treeselect .p-treeselect-panel {\n    min-width: 100%;\n}\n.p-treeselect-panel {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-treeselect-items-wrapper {\n    overflow: auto;\n}\n.p-fluid .p-treeselect {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n"),p.render=function(e,t,l,i,n,o){const a=s.resolveComponent("TSTree"),r=s.resolveComponent("Portal");return s.openBlock(),s.createElementBlock("div",{ref:"container",class:s.normalizeClass(o.containerClass),onClick:t[6]||(t[6]=(...e)=>o.onClick&&o.onClick(...e))},[s.createElementVNode("div",h,[s.createElementVNode("input",s.mergeProps({ref:"focusInput",id:l.inputId,type:"text",role:"combobox",class:l.inputClass,style:l.inputStyle,readonly:"",disabled:l.disabled,tabindex:l.disabled?-1:l.tabindex,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-haspopup":"tree","aria-expanded":n.overlayVisible,"aria-controls":o.listId,onFocus:t[0]||(t[0]=e=>o.onFocus(e)),onBlur:t[1]||(t[1]=e=>o.onBlur(e)),onKeydown:t[2]||(t[2]=e=>o.onKeyDown(e))},l.inputProps),null,16,u)]),s.createElementVNode("div",y,[s.createElementVNode("div",{class:s.normalizeClass(o.labelClass)},[s.renderSlot(e.$slots,"value",{value:o.selectedNodes,placeholder:l.placeholder},(()=>["comma"===l.display?(s.openBlock(),s.createElementBlock(s.Fragment,{key:0},[s.createTextVNode(s.toDisplayString(o.label||"empty"),1)],64)):"chip"===l.display?(s.openBlock(),s.createElementBlock(s.Fragment,{key:1},[(s.openBlock(!0),s.createElementBlock(s.Fragment,null,s.renderList(o.selectedNodes,(e=>(s.openBlock(),s.createElementBlock("div",{key:e.key,class:"p-treeselect-token"},[s.createElementVNode("span",m,s.toDisplayString(e.label),1)])))),128)),o.emptyValue?(s.openBlock(),s.createElementBlock(s.Fragment,{key:0},[s.createTextVNode(s.toDisplayString(l.placeholder||"empty"),1)],64)):s.createCommentVNode("",!0)],64)):s.createCommentVNode("",!0)]))],2)]),s.createElementVNode("div",{class:"p-treeselect-trigger",role:"button","aria-haspopup":"tree","aria-expanded":n.overlayVisible},[s.renderSlot(e.$slots,"indicator",{},(()=>[b]))],8,f),s.createVNode(r,{appendTo:l.appendTo},{default:s.withCtx((()=>[s.createVNode(s.Transition,{name:"p-connected-overlay",onEnter:o.onOverlayEnter,onLeave:o.onOverlayLeave,onAfterLeave:o.onOverlayAfterLeave},{default:s.withCtx((()=>[n.overlayVisible?(s.openBlock(),s.createElementBlock("div",s.mergeProps({key:0,ref:o.overlayRef,onClick:t[5]||(t[5]=(...e)=>o.onOverlayClick&&o.onOverlayClick(...e)),class:o.panelStyleClass},l.panelProps),[s.renderSlot(e.$slots,"header",{value:l.modelValue,options:l.options}),s.createElementVNode("div",{class:"p-treeselect-items-wrapper",style:s.normalizeStyle({"max-height":l.scrollHeight})},[s.createVNode(a,{id:o.listId,value:l.options,selectionMode:l.selectionMode,"onUpdate:selectionKeys":o.onSelectionChange,selectionKeys:l.modelValue,expandedKeys:n.expandedKeys,"onUpdate:expandedKeys":o.onNodeToggle,metaKeySelection:l.metaKeySelection,onNodeExpand:t[3]||(t[3]=t=>e.$emit("node-expand",t)),onNodeCollapse:t[4]||(t[4]=t=>e.$emit("node-collapse",t)),onNodeSelect:o.onNodeSelect,onNodeUnselect:o.onNodeUnselect,level:0},null,8,["id","value","selectionMode","onUpdate:selectionKeys","selectionKeys","expandedKeys","onUpdate:expandedKeys","metaKeySelection","onNodeSelect","onNodeUnselect"]),o.emptyOptions?(s.openBlock(),s.createElementBlock("div",v,[s.renderSlot(e.$slots,"empty",{},(()=>[s.createTextVNode(s.toDisplayString(o.emptyMessageText),1)]))])):s.createCommentVNode("",!0)],4),s.renderSlot(e.$slots,"footer",{value:l.modelValue,options:l.options})],16)):s.createCommentVNode("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3},8,["appendTo"])],2)},p}(primevue.utils,primevue.overlayeventbus,primevue.tree,primevue.ripple,primevue.portal,Vue);
+this.primevue=this.primevue||{},this.primevue.treeselect=function(e,t,l,i,n,s){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=o(e),a=o(t),d=o(l),c={name:"TreeSelect",emits:["update:modelValue","before-show","before-hide","change","show","hide","node-select","node-unselect","node-expand","node-collapse","focus","blur"],props:{modelValue:null,options:Array,scrollHeight:{type:String,default:"400px"},placeholder:{type:String,default:null},disabled:{type:Boolean,default:!1},tabindex:{type:Number,default:null},selectionMode:{type:String,default:"single"},appendTo:{type:String,default:"body"},emptyMessage:{type:String,default:null},display:{type:String,default:"comma"},metaKeySelection:{type:Boolean,default:!0},inputId:{type:String,default:null},inputClass:{type:String,default:null},inputStyle:{type:null,default:null},inputProps:{type:null,default:null},panelClass:{type:String,default:null},panelProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1,overlayVisible:!1,expandedKeys:{}}),watch:{modelValue:{handler:function(){this.selfChange||this.updateTreeState(),this.selfChange=!1},immediate:!0},options(){this.updateTreeState()}},outsideClickListener:null,resizeListener:null,scrollHandler:null,overlay:null,selfChange:!1,beforeUnmount(){this.unbindOutsideClickListener(),this.unbindResizeListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.overlay&&(n.ZIndexUtils.clear(this.overlay),this.overlay=null)},mounted(){this.updateTreeState()},methods:{show(){this.$emit("before-show"),this.overlayVisible=!0},hide(){this.$emit("before-hide"),this.overlayVisible=!1,this.$refs.focusInput.focus()},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)},onClick(e){this.disabled||this.overlay&&this.overlay.contains(e.target)||n.DomHandler.hasClass(e.target,"p-treeselect-close")||(this.overlayVisible?this.hide():this.show(),this.$refs.focusInput.focus())},onSelectionChange(e){this.selfChange=!0,this.$emit("update:modelValue",e),this.$emit("change",e)},onNodeSelect(e){this.$emit("node-select",e),"single"===this.selectionMode&&this.hide()},onNodeUnselect(e){this.$emit("node-unselect",e)},onNodeToggle(e){this.expandedKeys=e},onKeyDown(e){switch(e.code){case"ArrowDown":this.onArrowDownKey(e);break;case"Space":case"Enter":this.onEnterKey(e);break;case"Escape":this.onEscapeKey(e)}},onArrowDownKey(e){this.overlayVisible||(this.show(),this.$nextTick((()=>{const e=[...n.DomHandler.find(this.$refs.tree.$el,".p-treenode")].find((e=>"0"===e.getAttribute("tabindex")));n.DomHandler.focus(e)})),e.preventDefault())},onEnterKey(e){this.overlayVisible?this.hide():this.onArrowDownKey(e),e.preventDefault()},onEscapeKey(e){this.overlayVisible&&(this.hide(),e.preventDefault())},onOverlayEnter(e){n.ZIndexUtils.set("overlay",e,this.$primevue.config.zIndex.overlay),this.alignOverlay(),this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.scrollValueInView(),this.$emit("show")},onOverlayLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),this.$emit("hide"),this.overlay=null},onOverlayAfterLeave(e){n.ZIndexUtils.clear(e)},alignOverlay(){"self"===this.appendTo?n.DomHandler.relativePosition(this.overlay,this.$el):(this.overlay.style.minWidth=n.DomHandler.getOuterWidth(this.$el)+"px",n.DomHandler.absolutePosition(this.overlay,this.$el))},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{this.overlayVisible&&this.isOutsideClicked(e)&&this.hide()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new n.ConnectedOverlayScrollHandler(this.$refs.container,(()=>{this.overlayVisible&&this.hide()}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.overlayVisible&&!n.DomHandler.isTouchDevice()&&this.hide()},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isOutsideClicked(e){return!(this.$el.isSameNode(e.target)||this.$el.contains(e.target)||this.overlay&&this.overlay.contains(e.target))},overlayRef(e){this.overlay=e},onOverlayClick(e){r.default.emit("overlay-click",{originalEvent:e,target:this.$el})},onOverlayKeydown(e){"Escape"===e.code&&this.hide()},findSelectedNodes(e,t,l){if(e){if(this.isSelected(e,t)&&(l.push(e),delete t[e.key]),Object.keys(t).length&&e.children)for(let i of e.children)this.findSelectedNodes(i,t,l)}else for(let e of this.options)this.findSelectedNodes(e,t,l)},isSelected(e,t){return"checkbox"===this.selectionMode?t[e.key]&&t[e.key].checked:t[e.key]},updateTreeState(){let e={...this.modelValue};this.expandedKeys={},e&&this.options&&this.updateTreeBranchState(null,null,e)},updateTreeBranchState(e,t,l){if(e){if(this.isSelected(e,l)&&(this.expandPath(t),delete l[e.key]),Object.keys(l).length&&e.children)for(let i of e.children)t.push(e.key),this.updateTreeBranchState(i,t,l)}else for(let e of this.options)this.updateTreeBranchState(e,[],l)},expandPath(e){if(e.length>0)for(let t of e)this.expandedKeys[t]=!0},scrollValueInView(){if(this.overlay){let e=n.DomHandler.findSingle(this.overlay,"li.p-highlight");e&&e.scrollIntoView({block:"nearest",inline:"start"})}}},computed:{containerClass(){return["p-treeselect p-component p-inputwrapper",{"p-treeselect-chip":"chip"===this.display,"p-disabled":this.disabled,"p-focus":this.focused,"p-inputwrapper-filled":!this.emptyValue,"p-inputwrapper-focus":this.focused||this.overlayVisible}]},labelClass(){return["p-treeselect-label",{"p-placeholder":this.label===this.placeholder,"p-treeselect-label-empty":!this.placeholder&&this.emptyValue}]},panelStyleClass(){return["p-treeselect-panel p-component",this.panelClass,{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},selectedNodes(){let e=[];if(this.modelValue&&this.options){let t={...this.modelValue};this.findSelectedNodes(null,t,e)}return e},label(){let e=this.selectedNodes;return e.length?e.map((e=>e.label)).join(", "):this.placeholder},emptyMessageText(){return this.emptyMessage||this.$primevue.config.locale.emptyMessage},emptyValue(){return!this.modelValue||0===Object.keys(this.modelValue).length},emptyOptions(){return!this.options||0===this.options.length},listId:()=>n.UniqueComponentId()+"_list"},components:{TSTree:o(i).default,Portal:a.default},directives:{ripple:d.default}};const p={class:"p-hidden-accessible"},h=["id","disabled","tabindex","aria-labelledby","aria-label","aria-expanded","aria-controls"],u={class:"p-treeselect-label-container"},y={class:"p-treeselect-token-label"},m=["aria-expanded"],f=s.createElementVNode("span",{class:"p-treeselect-trigger-icon pi pi-chevron-down"},null,-1),v={key:0,class:"p-treeselect-empty-message"};return function(e,t){void 0===t&&(t={});var l=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===l&&i.firstChild?i.insertBefore(n,i.firstChild):i.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-treeselect {\n    display: inline-flex;\n    cursor: pointer;\n    position: relative;\n    user-select: none;\n}\n.p-treeselect-trigger {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n.p-treeselect-label-container {\n    overflow: hidden;\n    flex: 1 1 auto;\n    cursor: pointer;\n}\n.p-treeselect-label {\n    display: block;\n    white-space: nowrap;\n    cursor: pointer;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n.p-treeselect-label-empty {\n    overflow: hidden;\n    visibility: hidden;\n}\n.p-treeselect-token {\n    cursor: default;\n    display: inline-flex;\n    align-items: center;\n    flex: 0 0 auto;\n}\n.p-treeselect .p-treeselect-panel {\n    min-width: 100%;\n}\n.p-treeselect-panel {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-treeselect-items-wrapper {\n    overflow: auto;\n}\n.p-fluid .p-treeselect {\n    display: flex;\n}\n"),c.render=function(e,t,l,i,n,o){const r=s.resolveComponent("TSTree"),a=s.resolveComponent("Portal");return s.openBlock(),s.createElementBlock("div",{ref:"container",class:s.normalizeClass(o.containerClass),onClick:t[7]||(t[7]=(...e)=>o.onClick&&o.onClick(...e))},[s.createElementVNode("div",p,[s.createElementVNode("input",s.mergeProps({ref:"focusInput",id:l.inputId,type:"text",role:"combobox",class:l.inputClass,style:l.inputStyle,readonly:"",disabled:l.disabled,tabindex:l.disabled?-1:l.tabindex,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-haspopup":"tree","aria-expanded":n.overlayVisible,"aria-controls":o.listId,onFocus:t[0]||(t[0]=e=>o.onFocus(e)),onBlur:t[1]||(t[1]=e=>o.onBlur(e)),onKeydown:t[2]||(t[2]=e=>o.onKeyDown(e))},l.inputProps),null,16,h)]),s.createElementVNode("div",u,[s.createElementVNode("div",{class:s.normalizeClass(o.labelClass)},[s.renderSlot(e.$slots,"value",{value:o.selectedNodes,placeholder:l.placeholder},(()=>["comma"===l.display?(s.openBlock(),s.createElementBlock(s.Fragment,{key:0},[s.createTextVNode(s.toDisplayString(o.label||"empty"),1)],64)):"chip"===l.display?(s.openBlock(),s.createElementBlock(s.Fragment,{key:1},[(s.openBlock(!0),s.createElementBlock(s.Fragment,null,s.renderList(o.selectedNodes,(e=>(s.openBlock(),s.createElementBlock("div",{key:e.key,class:"p-treeselect-token"},[s.createElementVNode("span",y,s.toDisplayString(e.label),1)])))),128)),o.emptyValue?(s.openBlock(),s.createElementBlock(s.Fragment,{key:0},[s.createTextVNode(s.toDisplayString(l.placeholder||"empty"),1)],64)):s.createCommentVNode("",!0)],64)):s.createCommentVNode("",!0)]))],2)]),s.createElementVNode("div",{class:"p-treeselect-trigger",role:"button","aria-haspopup":"tree","aria-expanded":n.overlayVisible},[s.renderSlot(e.$slots,"indicator",{},(()=>[f]))],8,m),s.createVNode(a,{appendTo:l.appendTo},{default:s.withCtx((()=>[s.createVNode(s.Transition,{name:"p-connected-overlay",onEnter:o.onOverlayEnter,onLeave:o.onOverlayLeave,onAfterLeave:o.onOverlayAfterLeave},{default:s.withCtx((()=>[n.overlayVisible?(s.openBlock(),s.createElementBlock("div",s.mergeProps({key:0,ref:o.overlayRef,onClick:t[5]||(t[5]=(...e)=>o.onOverlayClick&&o.onOverlayClick(...e)),class:o.panelStyleClass},l.panelProps,{onKeydown:t[6]||(t[6]=(...e)=>o.onOverlayKeydown&&o.onOverlayKeydown(...e))}),[s.renderSlot(e.$slots,"header",{value:l.modelValue,options:l.options}),s.createElementVNode("div",{class:"p-treeselect-items-wrapper",style:s.normalizeStyle({"max-height":l.scrollHeight})},[s.createVNode(r,{ref:"tree",id:o.listId,value:l.options,selectionMode:l.selectionMode,"onUpdate:selectionKeys":o.onSelectionChange,selectionKeys:l.modelValue,expandedKeys:n.expandedKeys,"onUpdate:expandedKeys":o.onNodeToggle,metaKeySelection:l.metaKeySelection,onNodeExpand:t[3]||(t[3]=t=>e.$emit("node-expand",t)),onNodeCollapse:t[4]||(t[4]=t=>e.$emit("node-collapse",t)),onNodeSelect:o.onNodeSelect,onNodeUnselect:o.onNodeUnselect,level:0},null,8,["id","value","selectionMode","onUpdate:selectionKeys","selectionKeys","expandedKeys","onUpdate:expandedKeys","metaKeySelection","onNodeSelect","onNodeUnselect"]),o.emptyOptions?(s.openBlock(),s.createElementBlock("div",v,[s.renderSlot(e.$slots,"empty",{},(()=>[s.createTextVNode(s.toDisplayString(o.emptyMessageText),1)]))])):s.createCommentVNode("",!0)],4),s.renderSlot(e.$slots,"footer",{value:l.modelValue,options:l.options})],16)):s.createCommentVNode("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3},8,["appendTo"])],2)},c}(primevue.overlayeventbus,primevue.portal,primevue.ripple,primevue.tree,primevue.utils,Vue);