primevue 3.17.0 → 3.18.0

package/panelmenu/panelmenu.cjs.js

@@ -1,14 +1,890 @@
 'use strict';
 
-var vue = require('vue');
 var utils = require('primevue/utils');
+var Ripple = require('primevue/ripple');
+var vue = require('vue');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
+
+var DomHandler = {
+    innerWidth(el) {
+        if (el) {
+            let width = el.offsetWidth;
+            let style = getComputedStyle(el);
+
+            width += parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+
+            return width;
+        }
+
+        return 0;
+    },
+
+    width(el) {
+        if (el) {
+            let width = el.offsetWidth;
+            let style = getComputedStyle(el);
+
+            width -= parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+
+            return width;
+        }
+
+        return 0;
+    },
+
+    getWindowScrollTop() {
+        let doc = document.documentElement;
+
+        return (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
+    },
+
+    getWindowScrollLeft() {
+        let doc = document.documentElement;
+
+        return (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
+    },
+
+    getOuterWidth(el, margin) {
+        if (el) {
+            let width = el.offsetWidth;
+
+            if (margin) {
+                let style = getComputedStyle(el);
+
+                width += parseFloat(style.marginLeft) + parseFloat(style.marginRight);
+            }
+
+            return width;
+        }
+
+        return 0;
+    },
+
+    getOuterHeight(el, margin) {
+        if (el) {
+            let height = el.offsetHeight;
+
+            if (margin) {
+                let style = getComputedStyle(el);
+
+                height += parseFloat(style.marginTop) + parseFloat(style.marginBottom);
+            }
+
+            return height;
+        }
+
+        return 0;
+    },
+
+    getClientHeight(el, margin) {
+        if (el) {
+            let height = el.clientHeight;
+
+            if (margin) {
+                let style = getComputedStyle(el);
+
+                height += parseFloat(style.marginTop) + parseFloat(style.marginBottom);
+            }
+
+            return height;
+        }
+
+        return 0;
+    },
+
+    getViewport() {
+        let win = window,
+            d = document,
+            e = d.documentElement,
+            g = d.getElementsByTagName('body')[0],
+            w = win.innerWidth || e.clientWidth || g.clientWidth,
+            h = win.innerHeight || e.clientHeight || g.clientHeight;
+
+        return { width: w, height: h };
+    },
+
+    getOffset(el) {
+        if (el) {
+            let rect = el.getBoundingClientRect();
+
+            return {
+                top: rect.top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0),
+                left: rect.left + (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0)
+            };
+        }
+
+        return {
+            top: 'auto',
+            left: 'auto'
+        };
+    },
+
+    index(element) {
+        if (element) {
+            let children = element.parentNode.childNodes;
+            let num = 0;
+
+            for (let i = 0; i < children.length; i++) {
+                if (children[i] === element) return num;
+                if (children[i].nodeType === 1) num++;
+            }
+        }
+
+        return -1;
+    },
+
+    addMultipleClasses(element, className) {
+        if (element && className) {
+            if (element.classList) {
+                let styles = className.split(' ');
+
+                for (let i = 0; i < styles.length; i++) {
+                    element.classList.add(styles[i]);
+                }
+            } else {
+                let styles = className.split(' ');
+
+                for (let i = 0; i < styles.length; i++) {
+                    element.className += ' ' + styles[i];
+                }
+            }
+        }
+    },
+
+    addClass(element, className) {
+        if (element && className) {
+            if (element.classList) element.classList.add(className);
+            else element.className += ' ' + className;
+        }
+    },
+
+    removeClass(element, className) {
+        if (element && className) {
+            if (element.classList) element.classList.remove(className);
+            else element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+        }
+    },
+
+    hasClass(element, className) {
+        if (element) {
+            if (element.classList) return element.classList.contains(className);
+            else return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
+        }
+
+        return false;
+    },
+
+    find(element, selector) {
+        return element ? element.querySelectorAll(selector) : [];
+    },
+
+    findSingle(element, selector) {
+        if (element) {
+            return element.querySelector(selector);
+        }
+
+        return null;
+    },
+
+    getHeight(el) {
+        if (el) {
+            let height = el.offsetHeight;
+            let style = getComputedStyle(el);
+
+            height -= parseFloat(style.paddingTop) + parseFloat(style.paddingBottom) + parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
+
+            return height;
+        }
+
+        return 0;
+    },
+
+    getWidth(el) {
+        if (el) {
+            let width = el.offsetWidth;
+            let style = getComputedStyle(el);
+
+            width -= parseFloat(style.paddingLeft) + parseFloat(style.paddingRight) + parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth);
+
+            return width;
+        }
+
+        return 0;
+    },
+
+    absolutePosition(element, target) {
+        if (element) {
+            let elementDimensions = element.offsetParent ? { width: element.offsetWidth, height: element.offsetHeight } : this.getHiddenElementDimensions(element);
+            let elementOuterHeight = elementDimensions.height;
+            let elementOuterWidth = elementDimensions.width;
+            let targetOuterHeight = target.offsetHeight;
+            let targetOuterWidth = target.offsetWidth;
+            let targetOffset = target.getBoundingClientRect();
+            let windowScrollTop = this.getWindowScrollTop();
+            let windowScrollLeft = this.getWindowScrollLeft();
+            let viewport = this.getViewport();
+            let top, left;
+
+            if (targetOffset.top + targetOuterHeight + elementOuterHeight > viewport.height) {
+                top = targetOffset.top + windowScrollTop - elementOuterHeight;
+                element.style.transformOrigin = 'bottom';
+
+                if (top < 0) {
+                    top = windowScrollTop;
+                }
+            } else {
+                top = targetOuterHeight + targetOffset.top + windowScrollTop;
+                element.style.transformOrigin = 'top';
+            }
+
+            if (targetOffset.left + elementOuterWidth > viewport.width) left = Math.max(0, targetOffset.left + windowScrollLeft + targetOuterWidth - elementOuterWidth);
+            else left = targetOffset.left + windowScrollLeft;
+
+            element.style.top = top + 'px';
+            element.style.left = left + 'px';
+        }
+    },
+
+    relativePosition(element, target) {
+        if (element) {
+            let elementDimensions = element.offsetParent ? { width: element.offsetWidth, height: element.offsetHeight } : this.getHiddenElementDimensions(element);
+            const targetHeight = target.offsetHeight;
+            const targetOffset = target.getBoundingClientRect();
+            const viewport = this.getViewport();
+            let top, left;
+
+            if (targetOffset.top + targetHeight + elementDimensions.height > viewport.height) {
+                top = -1 * elementDimensions.height;
+                element.style.transformOrigin = 'bottom';
+
+                if (targetOffset.top + top < 0) {
+                    top = -1 * targetOffset.top;
+                }
+            } else {
+                top = targetHeight;
+                element.style.transformOrigin = 'top';
+            }
+
+            if (elementDimensions.width > viewport.width) {
+                // element wider then viewport and cannot fit on screen (align at left side of viewport)
+                left = targetOffset.left * -1;
+            } else if (targetOffset.left + elementDimensions.width > viewport.width) {
+                // element wider then viewport but can be fit on screen (align at right side of viewport)
+                left = (targetOffset.left + elementDimensions.width - viewport.width) * -1;
+            } else {
+                // element fits on screen (align with target)
+                left = 0;
+            }
+
+            element.style.top = top + 'px';
+            element.style.left = left + 'px';
+        }
+    },
+
+    getParents(element, parents = []) {
+        return element['parentNode'] === null ? parents : this.getParents(element.parentNode, parents.concat([element.parentNode]));
+    },
+
+    getScrollableParents(element) {
+        let scrollableParents = [];
+
+        if (element) {
+            let parents = this.getParents(element);
+            const overflowRegex = /(auto|scroll)/;
+
+            const overflowCheck = (node) => {
+                let styleDeclaration = window['getComputedStyle'](node, null);
+
+                return overflowRegex.test(styleDeclaration.getPropertyValue('overflow')) || overflowRegex.test(styleDeclaration.getPropertyValue('overflowX')) || overflowRegex.test(styleDeclaration.getPropertyValue('overflowY'));
+            };
+
+            for (let parent of parents) {
+                let scrollSelectors = parent.nodeType === 1 && parent.dataset['scrollselectors'];
+
+                if (scrollSelectors) {
+                    let selectors = scrollSelectors.split(',');
+
+                    for (let selector of selectors) {
+                        let el = this.findSingle(parent, selector);
+
+                        if (el && overflowCheck(el)) {
+                            scrollableParents.push(el);
+                        }
+                    }
+                }
+
+                if (parent.nodeType !== 9 && overflowCheck(parent)) {
+                    scrollableParents.push(parent);
+                }
+            }
+        }
+
+        return scrollableParents;
+    },
+
+    getHiddenElementOuterHeight(element) {
+        if (element) {
+            element.style.visibility = 'hidden';
+            element.style.display = 'block';
+            let elementHeight = element.offsetHeight;
+
+            element.style.display = 'none';
+            element.style.visibility = 'visible';
+
+            return elementHeight;
+        }
+
+        return 0;
+    },
+
+    getHiddenElementOuterWidth(element) {
+        if (element) {
+            element.style.visibility = 'hidden';
+            element.style.display = 'block';
+            let elementWidth = element.offsetWidth;
+
+            element.style.display = 'none';
+            element.style.visibility = 'visible';
+
+            return elementWidth;
+        }
+
+        return 0;
+    },
+
+    getHiddenElementDimensions(element) {
+        if (element) {
+            let dimensions = {};
+
+            element.style.visibility = 'hidden';
+            element.style.display = 'block';
+            dimensions.width = element.offsetWidth;
+            dimensions.height = element.offsetHeight;
+            element.style.display = 'none';
+            element.style.visibility = 'visible';
+
+            return dimensions;
+        }
+
+        return 0;
+    },
+
+    fadeIn(element, duration) {
+        if (element) {
+            element.style.opacity = 0;
+
+            let last = +new Date();
+            let opacity = 0;
+
+            let tick = function () {
+                opacity = +element.style.opacity + (new Date().getTime() - last) / duration;
+                element.style.opacity = opacity;
+                last = +new Date();
+
+                if (+opacity < 1) {
+                    (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
+                }
+            };
+
+            tick();
+        }
+    },
+
+    fadeOut(element, ms) {
+        if (element) {
+            let opacity = 1,
+                interval = 50,
+                duration = ms,
+                gap = interval / duration;
+
+            let fading = setInterval(() => {
+                opacity -= gap;
+
+                if (opacity <= 0) {
+                    opacity = 0;
+                    clearInterval(fading);
+                }
+
+                element.style.opacity = opacity;
+            }, interval);
+        }
+    },
+
+    getUserAgent() {
+        return navigator.userAgent;
+    },
+
+    appendChild(element, target) {
+        if (this.isElement(target)) target.appendChild(element);
+        else if (target.el && target.elElement) target.elElement.appendChild(element);
+        else throw new Error('Cannot append ' + target + ' to ' + element);
+    },
+
+    scrollInView(container, item) {
+        let borderTopValue = getComputedStyle(container).getPropertyValue('borderTopWidth');
+        let borderTop = borderTopValue ? parseFloat(borderTopValue) : 0;
+        let paddingTopValue = getComputedStyle(container).getPropertyValue('paddingTop');
+        let paddingTop = paddingTopValue ? parseFloat(paddingTopValue) : 0;
+        let containerRect = container.getBoundingClientRect();
+        let itemRect = item.getBoundingClientRect();
+        let offset = itemRect.top + document.body.scrollTop - (containerRect.top + document.body.scrollTop) - borderTop - paddingTop;
+        let scroll = container.scrollTop;
+        let elementHeight = container.clientHeight;
+        let itemHeight = this.getOuterHeight(item);
+
+        if (offset < 0) {
+            container.scrollTop = scroll + offset;
+        } else if (offset + itemHeight > elementHeight) {
+            container.scrollTop = scroll + offset - elementHeight + itemHeight;
+        }
+    },
+
+    clearSelection() {
+        if (window.getSelection) {
+            if (window.getSelection().empty) {
+                window.getSelection().empty();
+            } else if (window.getSelection().removeAllRanges && window.getSelection().rangeCount > 0 && window.getSelection().getRangeAt(0).getClientRects().length > 0) {
+                window.getSelection().removeAllRanges();
+            }
+        } else if (document['selection'] && document['selection'].empty) {
+            try {
+                document['selection'].empty();
+            } catch (error) {
+                //ignore IE bug
+            }
+        }
+    },
+
+    getSelection() {
+        if (window.getSelection) return window.getSelection().toString();
+        else if (document.getSelection) return document.getSelection().toString();
+        else if (document['selection']) return document['selection'].createRange().text;
+
+        return null;
+    },
+
+    calculateScrollbarWidth() {
+        if (this.calculatedScrollbarWidth != null) return this.calculatedScrollbarWidth;
+
+        let scrollDiv = document.createElement('div');
+
+        scrollDiv.className = 'p-scrollbar-measure';
+        document.body.appendChild(scrollDiv);
+
+        let scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+
+        document.body.removeChild(scrollDiv);
+
+        this.calculatedScrollbarWidth = scrollbarWidth;
+
+        return scrollbarWidth;
+    },
+
+    getBrowser() {
+        if (!this.browser) {
+            let matched = this.resolveUserAgent();
+
+            this.browser = {};
+
+            if (matched.browser) {
+                this.browser[matched.browser] = true;
+                this.browser['version'] = matched.version;
+            }
+
+            if (this.browser['chrome']) {
+                this.browser['webkit'] = true;
+            } else if (this.browser['webkit']) {
+                this.browser['safari'] = true;
+            }
+        }
+
+        return this.browser;
+    },
+
+    resolveUserAgent() {
+        let ua = navigator.userAgent.toLowerCase();
+        let match = /(chrome)[ ]([\w.]+)/.exec(ua) || /(webkit)[ ]([\w.]+)/.exec(ua) || /(opera)(?:.*version|)[ ]([\w.]+)/.exec(ua) || /(msie) ([\w.]+)/.exec(ua) || (ua.indexOf('compatible') < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec(ua)) || [];
+
+        return {
+            browser: match[1] || '',
+            version: match[2] || '0'
+        };
+    },
+
+    isVisible(element) {
+        return element && element.offsetParent != null;
+    },
+
+    invokeElementMethod(element, methodName, args) {
+        element[methodName].apply(element, args);
+    },
+
+    isExist(element) {
+        return element !== null && typeof element !== 'undefined' && element.nodeName && element.parentNode;
+    },
+
+    isClient() {
+        return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+    },
+
+    focus(el, options) {
+        el && document.activeElement !== el && el.focus(options);
+    },
+
+    getFocusableElements(element, selector = '') {
+        let focusableElements = this.find(
+            element,
+            `button:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
+                [href][clientHeight][clientWidth]:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
+                input:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
+                select:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
+                textarea:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
+                [tabIndex]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
+                [contenteditable]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector}`
+        );
+
+        let visibleFocusableElements = [];
+
+        for (let focusableElement of focusableElements) {
+            if (getComputedStyle(focusableElement).display != 'none' && getComputedStyle(focusableElement).visibility != 'hidden') visibleFocusableElements.push(focusableElement);
+        }
+
+        return visibleFocusableElements;
+    },
+
+    getFirstFocusableElement(element, selector) {
+        const focusableElements = this.getFocusableElements(element, selector);
+
+        return focusableElements.length > 0 ? focusableElements[0] : null;
+    },
+
+    isClickable(element) {
+        const targetNode = element.nodeName;
+        const parentNode = element.parentElement && element.parentElement.nodeName;
+
+        return (
+            targetNode == 'INPUT' ||
+            targetNode == 'BUTTON' ||
+            targetNode == 'A' ||
+            parentNode == 'INPUT' ||
+            parentNode == 'BUTTON' ||
+            parentNode == 'A' ||
+            this.hasClass(element, 'p-button') ||
+            this.hasClass(element.parentElement, 'p-button') ||
+            this.hasClass(element.parentElement, 'p-checkbox') ||
+            this.hasClass(element.parentElement, 'p-radiobutton')
+        );
+    },
+
+    applyStyle(element, style) {
+        if (typeof style === 'string') {
+            element.style.cssText = style;
+        } else {
+            for (let prop in style) {
+                element.style[prop] = style[prop];
+            }
+        }
+    },
+
+    isIOS() {
+        return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window['MSStream'];
+    },
+
+    isAndroid() {
+        return /(android)/i.test(navigator.userAgent);
+    },
+
+    isTouchDevice() {
+        return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+    },
+
+    exportCSV(csv, filename) {
+        let blob = new Blob([csv], {
+            type: 'application/csv;charset=utf-8;'
+        });
+
+        if (window.navigator.msSaveOrOpenBlob) {
+            navigator.msSaveOrOpenBlob(blob, filename + '.csv');
+        } else {
+            let link = document.createElement('a');
+
+            if (link.download !== undefined) {
+                link.setAttribute('href', URL.createObjectURL(blob));
+                link.setAttribute('download', filename + '.csv');
+                link.style.display = 'none';
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+            } else {
+                csv = 'data:text/csv;charset=utf-8,' + csv;
+                window.open(encodeURI(csv));
+            }
+        }
+    }
+};
+
+var script$2 = {
+    name: 'PanelMenuSub',
+    emits: ['item-toggle'],
+    props: {
+        panelId: {
+            type: String,
+            default: null
+        },
+        focusedItemId: {
+            type: String,
+            default: null
+        },
+        items: {
+            type: Array,
+            default: null
+        },
+        level: {
+            type: Number,
+            default: 0
+        },
+        template: {
+            type: Function,
+            default: null
+        },
+        activeItemPath: {
+            type: Object,
+            default: null
+        },
+        exact: {
+            type: Boolean,
+            default: true
+        }
+    },
+    methods: {
+        getItemId(processedItem) {
+            return `${this.panelId}_${processedItem.key}`;
+        },
+        getItemKey(processedItem) {
+            return this.getItemId(processedItem);
+        },
+        getItemProp(processedItem, name) {
+            return processedItem && processedItem.item ? utils.ObjectUtils.getItemValue(processedItem.item[name]) : undefined;
+        },
+        getItemLabel(processedItem) {
+            return this.getItemProp(processedItem, 'label');
+        },
+        isItemActive(processedItem) {
+            return this.activeItemPath.some((path) => path.key === processedItem.key);
+        },
+        isItemVisible(processedItem) {
+            return this.getItemProp(processedItem, 'visible') !== false;
+        },
+        isItemDisabled(processedItem) {
+            return this.getItemProp(processedItem, 'disabled');
+        },
+        isItemFocused(processedItem) {
+            return this.focusedItemId === this.getItemId(processedItem);
+        },
+        isItemGroup(processedItem) {
+            return utils.ObjectUtils.isNotEmpty(processedItem.items);
+        },
+        onItemClick(event, processedItem) {
+            const command = this.getItemProp(processedItem, 'command');
+
+            command && command({ originalEvent: event, item: processedItem.item });
+            this.$emit('item-toggle', { processedItem, expanded: !this.isItemActive(processedItem) });
+        },
+        onItemToggle(event) {
+            this.$emit('item-toggle', event);
+        },
+        onItemActionClick(event, navigate) {
+            navigate && navigate(event);
+        },
+        getAriaSetSize() {
+            return this.items.filter((processedItem) => this.isItemVisible(processedItem) && !this.getItemProp(processedItem, 'separator')).length;
+        },
+        getAriaPosInset(index) {
+            return index - this.items.slice(0, index).filter((processedItem) => this.isItemVisible(processedItem) && this.getItemProp(processedItem, 'separator')).length + 1;
+        },
+        getItemClass(processedItem) {
+            return [
+                'p-menuitem',
+                this.getItemProp(processedItem, 'class'),
+                {
+                    'p-focus': this.isItemFocused(processedItem),
+                    'p-disabled': this.isItemDisabled(processedItem)
+                }
+            ];
+        },
+        getItemActionClass(processedItem, routerProps) {
+            return [
+                'p-menuitem-link',
+                {
+                    'router-link-active': routerProps && routerProps.isActive,
+                    'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
+                }
+            ];
+        },
+        getItemIconClass(processedItem) {
+            return ['p-menuitem-icon', this.getItemProp(processedItem, 'icon')];
+        },
+        getItemToggleIconClass(processedItem) {
+            return ['p-submenu-icon', this.isItemActive(processedItem) ? 'pi pi-fw pi-chevron-down' : 'pi pi-fw pi-chevron-right'];
+        },
+        getSeparatorItemClass(processedItem) {
+            return ['p-menuitem-separator', this.getItemProp(processedItem, 'class')];
+        }
+    },
+    directives: {
+        ripple: Ripple__default["default"]
+    }
+};
+
+const _hoisted_1$1 = { class: "p-submenu-list" };
+const _hoisted_2$1 = ["id", "aria-label", "aria-expanded", "aria-level", "aria-setsize", "aria-posinset"];
+const _hoisted_3$1 = ["onClick"];
+const _hoisted_4$1 = ["href", "onClick"];
+const _hoisted_5$1 = { class: "p-menuitem-text" };
+const _hoisted_6$1 = ["href", "target"];
+const _hoisted_7$1 = { class: "p-menuitem-text" };
+const _hoisted_8$1 = { class: "p-toggleable-content" };
+
+function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_router_link = vue.resolveComponent("router-link");
+  const _component_PanelMenuSub = vue.resolveComponent("PanelMenuSub", true);
+  const _directive_ripple = vue.resolveDirective("ripple");
+
+  return (vue.openBlock(), vue.createElementBlock("ul", _hoisted_1$1, [
+    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.items, (processedItem, index) => {
+      return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+        key: $options.getItemKey(processedItem)
+      }, [
+        ($options.isItemVisible(processedItem) && !$options.getItemProp(processedItem, 'separator'))
+          ? (vue.openBlock(), vue.createElementBlock("li", {
+              key: 0,
+              id: $options.getItemId(processedItem),
+              style: vue.normalizeStyle($options.getItemProp(processedItem, 'style')),
+              class: vue.normalizeClass($options.getItemClass(processedItem)),
+              role: "treeitem",
+              "aria-label": $options.getItemLabel(processedItem),
+              "aria-expanded": $options.isItemGroup(processedItem) ? $options.isItemActive(processedItem) : undefined,
+              "aria-level": $props.level + 1,
+              "aria-setsize": $options.getAriaSetSize(),
+              "aria-posinset": $options.getAriaPosInset(index)
+            }, [
+              vue.createElementVNode("div", {
+                class: "p-menuitem-content",
+                onClick: $event => ($options.onItemClick($event, processedItem))
+              }, [
+                (!$props.template)
+                  ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                      ($options.getItemProp(processedItem, 'to') && !$options.isItemDisabled(processedItem))
+                        ? (vue.openBlock(), vue.createBlock(_component_router_link, {
+                            key: 0,
+                            to: $options.getItemProp(processedItem, 'to'),
+                            custom: ""
+                          }, {
+                            default: vue.withCtx(({ navigate, href, isActive, isExactActive }) => [
+                              vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
+                                href: href,
+                                class: vue.normalizeClass($options.getItemActionClass(processedItem, { isActive, isExactActive })),
+                                tabindex: "-1",
+                                "aria-hidden": "true",
+                                onClick: $event => ($options.onItemActionClick($event, navigate))
+                              }, [
+                                ($options.getItemProp(processedItem, 'icon'))
+                                  ? (vue.openBlock(), vue.createElementBlock("span", {
+                                      key: 0,
+                                      class: vue.normalizeClass($options.getItemIconClass(processedItem))
+                                    }, null, 2))
+                                  : vue.createCommentVNode("", true),
+                                vue.createElementVNode("span", _hoisted_5$1, vue.toDisplayString($options.getItemLabel(processedItem)), 1)
+                              ], 10, _hoisted_4$1)), [
+                                [_directive_ripple]
+                              ])
+                            ]),
+                            _: 2
+                          }, 1032, ["to"]))
+                        : vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
+                            key: 1,
+                            href: $options.getItemProp(processedItem, 'url'),
+                            class: vue.normalizeClass($options.getItemActionClass(processedItem)),
+                            target: $options.getItemProp(processedItem, 'target'),
+                            tabindex: "-1",
+                            "aria-hidden": "true"
+                          }, [
+                            ($options.isItemGroup(processedItem))
+                              ? (vue.openBlock(), vue.createElementBlock("span", {
+                                  key: 0,
+                                  class: vue.normalizeClass($options.getItemToggleIconClass(processedItem))
+                                }, null, 2))
+                              : vue.createCommentVNode("", true),
+                            ($options.getItemProp(processedItem, 'icon'))
+                              ? (vue.openBlock(), vue.createElementBlock("span", {
+                                  key: 1,
+                                  class: vue.normalizeClass($options.getItemIconClass(processedItem))
+                                }, null, 2))
+                              : vue.createCommentVNode("", true),
+                            vue.createElementVNode("span", _hoisted_7$1, vue.toDisplayString($options.getItemLabel(processedItem)), 1)
+                          ], 10, _hoisted_6$1)), [
+                            [_directive_ripple]
+                          ])
+                    ], 64))
+                  : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template), {
+                      key: 1,
+                      item: processedItem.item
+                    }, null, 8, ["item"]))
+              ], 8, _hoisted_3$1),
+              vue.createVNode(vue.Transition, { name: "p-toggleable-content" }, {
+                default: vue.withCtx(() => [
+                  vue.withDirectives(vue.createElementVNode("div", _hoisted_8$1, [
+                    ($options.isItemVisible(processedItem) && $options.isItemGroup(processedItem))
+                      ? (vue.openBlock(), vue.createBlock(_component_PanelMenuSub, {
+                          key: 0,
+                          id: $options.getItemId(processedItem) + '_list',
+                          role: "group",
+                          panelId: $props.panelId,
+                          focusedItemId: $props.focusedItemId,
+                          items: processedItem.items,
+                          level: $props.level + 1,
+                          template: $props.template,
+                          activeItemPath: $props.activeItemPath,
+                          exact: $props.exact,
+                          onItemToggle: $options.onItemToggle
+                        }, null, 8, ["id", "panelId", "focusedItemId", "items", "level", "template", "activeItemPath", "exact", "onItemToggle"]))
+                      : vue.createCommentVNode("", true)
+                  ], 512), [
+                    [vue.vShow, $options.isItemActive(processedItem)]
+                  ])
+                ]),
+                _: 2
+              }, 1024)
+            ], 14, _hoisted_2$1))
+          : vue.createCommentVNode("", true),
+        ($options.isItemVisible(processedItem) && $options.getItemProp(processedItem, 'separator'))
+          ? (vue.openBlock(), vue.createElementBlock("li", {
+              key: 1,
+              style: vue.normalizeStyle($options.getItemProp(processedItem, 'style')),
+              class: vue.normalizeClass($options.getSeparatorItemClass(processedItem)),
+              role: "separator"
+            }, null, 6))
+          : vue.createCommentVNode("", true)
+      ], 64))
+    }), 128))
+  ]))
+}
+
+script$2.render = render$2;
 
 var script$1 = {
-    name: 'PanelMenuSub',
-    emits: ['item-toggle'],
+    name: 'PanelMenuList',
+    emits: ['item-toggle', 'header-focus'],
     props: {
-        model: {
-            type: null,
+        panelId: {
+            type: String,
+            default: null
+        },
+        items: {
+            type: Array,
             default: null
         },
         template: {
@@ -16,7 +892,7 @@ var script$1 = {
             default: null
         },
         expandedKeys: {
-            type: null,
+            type: Object,
             default: null
         },
         exact: {
@@ -26,202 +902,319 @@ var script$1 = {
     },
     data() {
         return {
-            activeItem: null
+            focused: false,
+            focusedItem: null,
+            activeItemPath: []
         };
     },
+    watch: {
+        expandedKeys(newValue) {
+            this.autoUpdateActiveItemPath(newValue);
+        }
+    },
+    mounted() {
+        this.autoUpdateActiveItemPath(this.expandedKeys);
+    },
     methods: {
-        onItemClick(event, item, navigate) {
-            if (this.isActive(item) && this.activeItem === null) {
-                this.activeItem = item;
+        getItemProp(processedItem, name) {
+            return processedItem && processedItem.item ? utils.ObjectUtils.getItemValue(processedItem.item[name]) : undefined;
+        },
+        isItemVisible(processedItem) {
+            return this.getItemProp(processedItem, 'visible') !== false;
+        },
+        isItemDisabled(processedItem) {
+            return this.getItemProp(processedItem, 'disabled');
+        },
+        isItemActive(processedItem) {
+            return this.activeItemPath.some((path) => path.key === processedItem.parentKey);
+        },
+        isItemGroup(processedItem) {
+            return utils.ObjectUtils.isNotEmpty(processedItem.items);
+        },
+        onFocus(event) {
+            this.focused = true;
+            this.focusedItem = this.focusedItem || (this.isElementInPanel(event, event.relatedTarget) ? this.findFirstItem() : this.findLastItem());
+        },
+        onBlur() {
+            this.focused = false;
+            this.focusedItem = null;
+        },
+        onKeyDown(event) {
+            switch (event.code) {
+                case 'ArrowDown':
+                    this.onArrowDownKey(event);
+                    break;
+
+                case 'ArrowUp':
+                    this.onArrowUpKey(event);
+                    break;
+
+                case 'ArrowLeft':
+                    this.onArrowLeftKey(event);
+                    break;
+
+                case 'ArrowRight':
+                    this.onArrowRightKey(event);
+                    break;
+
+                case 'Home':
+                    this.onHomeKey(event);
+                    break;
+
+                case 'End':
+                    this.onEndKey(event);
+                    break;
+
+                case 'Space':
+                    this.onSpaceKey(event);
+                    break;
+
+                case 'Enter':
+                    this.onEnterKey(event);
+                    break;
             }
+        },
+        onArrowDownKey(event) {
+            const processedItem = utils.ObjectUtils.isNotEmpty(this.focusedItem) ? this.findNextItem(this.focusedItem) : this.findFirstItem();
 
-            if (this.disabled(item)) {
-                event.preventDefault();
+            this.changeFocusedItem({ originalEvent: event, processedItem, focusOnNext: true });
+            event.preventDefault();
+        },
+        onArrowUpKey(event) {
+            const processedItem = utils.ObjectUtils.isNotEmpty(this.focusedItem) ? this.findPrevItem(this.focusedItem) : this.findLastItem();
 
-                return;
+            this.changeFocusedItem({ originalEvent: event, processedItem, selfCheck: true });
+            event.preventDefault();
+        },
+        onArrowLeftKey(event) {
+            if (utils.ObjectUtils.isNotEmpty(this.focusedItem)) {
+                const matched = this.activeItemPath.some((p) => p.key === this.focusedItem.key);
+
+                if (matched) {
+                    this.activeItemPath = this.activeItemPath.filter((p) => p.key !== this.focusedItem.key);
+                } else {
+                    this.focusedItem = utils.ObjectUtils.isNotEmpty(this.focusedItem.parent) ? this.focusedItem.parent : this.focusedItem;
+                }
+
+                event.preventDefault();
             }
+        },
+        onArrowRightKey(event) {
+            if (utils.ObjectUtils.isNotEmpty(this.focusedItem)) {
+                const grouped = this.isItemGroup(this.focusedItem);
 
-            if (item.command) {
-                item.command({
-                    originalEvent: event,
-                    item: item
-                });
+                if (grouped) {
+                    const matched = this.activeItemPath.some((p) => p.key === this.focusedItem.key);
+
+                    if (matched) {
+                        this.onArrowDownKey(event);
+                    } else {
+                        this.activeItemPath = this.activeItemPath.filter((p) => p.parentKey !== this.focusedItem.parentKey);
+                        this.activeItemPath.push(this.focusedItem);
+                    }
+                }
+
+                event.preventDefault();
             }
+        },
+        onHomeKey(event) {
+            this.changeFocusedItem({ originalEvent: event, processedItem: this.findFirstItem(), allowHeaderFocus: false });
+            event.preventDefault();
+        },
+        onEndKey(event) {
+            this.changeFocusedItem({ originalEvent: event, processedItem: this.findLastItem(), focusOnNext: true, allowHeaderFocus: false });
+            event.preventDefault();
+        },
+        onEnterKey(event) {
+            if (utils.ObjectUtils.isNotEmpty(this.focusedItem)) {
+                const element = DomHandler.findSingle(this.$el, `li[id="${`${this.focusedItemId}`}"]`);
+                const anchorElement = element && DomHandler.findSingle(element, '.p-menuitem-link');
 
-            if (this.activeItem && this.activeItem === item) this.activeItem = null;
-            else this.activeItem = item;
+                anchorElement ? anchorElement.click() : element && element.click();
+            }
 
-            this.$emit('item-toggle', { item: item, expanded: this.activeItem != null });
+            event.preventDefault();
+        },
+        onSpaceKey(event) {
+            this.onEnterKey(event);
+        },
+        onItemToggle(event) {
+            const { processedItem, expanded } = event;
 
-            if (item.to && navigate) {
-                navigate(event);
+            if (this.expandedKeys) {
+                this.$emit('item-toggle', { item: processedItem.item, expanded });
+            } else {
+                this.activeItemPath = this.activeItemPath.filter((p) => p.parentKey !== processedItem.parentKey);
+                expanded && this.activeItemPath.push(processedItem);
             }
+
+            this.focusedItem = processedItem;
+            DomHandler.focus(this.$el);
+        },
+        isElementInPanel(event, element) {
+            const panel = event.currentTarget.closest('.p-panelmenu-panel');
+
+            return panel && panel.contains(element);
+        },
+        isVisibleItem(processedItem) {
+            return !!processedItem && (processedItem.level === 0 || this.isItemActive(processedItem)) && this.isItemVisible(processedItem);
         },
-        onItemKeydown(event, item) {
-            if (event.which === 13) {
-                this.onItemClick(event, item);
+        isValidItem(processedItem) {
+            return !!processedItem && !this.isItemDisabled(processedItem);
+        },
+        findFirstItem() {
+            return this.visibleItems.find((processedItem) => this.isValidItem(processedItem));
+        },
+        findLastItem() {
+            return utils.ObjectUtils.findLast(this.visibleItems, (processedItem) => this.isValidItem(processedItem));
+        },
+        findNextItem(processedItem) {
+            const index = this.visibleItems.findIndex((item) => item.key === processedItem.key);
+            const matchedItem = index < this.visibleItems.length - 1 ? this.visibleItems.slice(index + 1).find((pItem) => this.isValidItem(pItem)) : undefined;
+
+            return matchedItem || processedItem;
+        },
+        findPrevItem(processedItem) {
+            const index = this.visibleItems.findIndex((item) => item.key === processedItem.key);
+            const matchedItem = index > 0 ? utils.ObjectUtils.findLast(this.visibleItems.slice(0, index), (pItem) => this.isValidItem(pItem)) : undefined;
+
+            return matchedItem || processedItem;
+        },
+        changeFocusedItem(event) {
+            const { originalEvent, processedItem, focusOnNext, selfCheck, allowHeaderFocus = true } = event;
+
+            if (utils.ObjectUtils.isNotEmpty(this.focusedItem) && this.focusedItem.key !== processedItem.key) {
+                this.focusedItem = processedItem;
+                this.scrollInView();
+            } else if (allowHeaderFocus) {
+                this.$emit('header-focus', { originalEvent, focusOnNext, selfCheck });
             }
         },
-        getItemClass(item) {
-            return ['p-menuitem', item.className];
+        scrollInView() {
+            const element = DomHandler.findSingle(this.$el, `li[id="${`${this.focusedItemId}`}"]`);
+
+            if (element) {
+                element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
+            }
         },
-        linkClass(item, routerProps) {
-            return [
-                'p-menuitem-link',
-                {
-                    'p-disabled': this.disabled(item),
-                    'router-link-active': routerProps && routerProps.isActive,
-                    'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
+        autoUpdateActiveItemPath(expandedKeys) {
+            this.activeItemPath = Object.entries(expandedKeys || {}).reduce((acc, [key, val]) => {
+                if (val) {
+                    const processedItem = this.findProcessedItemByItemKey(key);
+
+                    processedItem && acc.push(processedItem);
                 }
-            ];
+
+                return acc;
+            }, []);
         },
-        isActive(item) {
-            return this.expandedKeys ? this.expandedKeys[item.key] : item === this.activeItem;
+        findProcessedItemByItemKey(key, processedItems, level = 0) {
+            processedItems = processedItems || (level === 0 && this.processedItems);
+
+            if (!processedItems) return null;
+
+            for (let i = 0; i < processedItems.length; i++) {
+                const processedItem = processedItems[i];
+
+                if (this.getItemProp(processedItem, 'key') === key) return processedItem;
+
+                const matchedItem = this.findProcessedItemByItemKey(key, processedItem.items, level + 1);
+
+                if (matchedItem) return matchedItem;
+            }
         },
-        getSubmenuIcon(item) {
-            const active = this.isActive(item);
+        createProcessedItems(items, level = 0, parent = {}, parentKey = '') {
+            const processedItems = [];
 
-            return ['p-panelmenu-icon pi pi-fw', { 'pi-angle-right': !active, 'pi-angle-down': active }];
+            items &&
+                items.forEach((item, index) => {
+                    const key = (parentKey !== '' ? parentKey + '_' : '') + index;
+                    const newItem = {
+                        item,
+                        index,
+                        level,
+                        key,
+                        parent,
+                        parentKey
+                    };
+
+                    newItem['items'] = this.createProcessedItems(item.items, level + 1, newItem, key);
+                    processedItems.push(newItem);
+                });
+
+            return processedItems;
         },
-        visible(item) {
-            return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
+        flatItems(processedItems, processedFlattenItems = []) {
+            processedItems &&
+                processedItems.forEach((processedItem) => {
+                    if (this.isVisibleItem(processedItem)) {
+                        processedFlattenItems.push(processedItem);
+                        this.flatItems(processedItem.items, processedFlattenItems);
+                    }
+                });
+
+            return processedFlattenItems;
+        }
+    },
+    computed: {
+        processedItems() {
+            return this.createProcessedItems(this.items || []);
         },
-        disabled(item) {
-            return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
+        visibleItems() {
+            return this.flatItems(this.processedItems);
         },
-        label(item) {
-            return typeof item.label === 'function' ? item.label() : item.label;
+        focusedItemId() {
+            return utils.ObjectUtils.isNotEmpty(this.focusedItem) ? `${this.panelId}_${this.focusedItem.key}` : null;
         }
+    },
+    components: {
+        PanelMenuSub: script$2
     }
 };
 
-const _hoisted_1$1 = {
-  class: "p-submenu-list",
-  role: "tree"
-};
-const _hoisted_2$1 = ["href", "onClick", "aria-expanded"];
-const _hoisted_3$1 = { class: "p-menuitem-text" };
-const _hoisted_4$1 = ["href", "target", "onClick", "onKeydown", "aria-expanded", "tabindex"];
-const _hoisted_5$1 = { class: "p-menuitem-text" };
-const _hoisted_6$1 = { class: "p-toggleable-content" };
-
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_router_link = vue.resolveComponent("router-link");
-  const _component_PanelMenuSub = vue.resolveComponent("PanelMenuSub", true);
+  const _component_PanelMenuSub = vue.resolveComponent("PanelMenuSub");
 
-  return (vue.openBlock(), vue.createElementBlock("ul", _hoisted_1$1, [
-    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.model, (item, i) => {
-      return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
-        key: $options.label(item) + i.toString()
-      }, [
-        ($options.visible(item) && !item.separator)
-          ? (vue.openBlock(), vue.createElementBlock("li", {
-              key: 0,
-              role: "none",
-              class: vue.normalizeClass($options.getItemClass(item)),
-              style: vue.normalizeStyle(item.style)
-            }, [
-              (!$props.template)
-                ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                    (item.to && !$options.disabled(item))
-                      ? (vue.openBlock(), vue.createBlock(_component_router_link, {
-                          key: 0,
-                          to: item.to,
-                          custom: ""
-                        }, {
-                          default: vue.withCtx(({ navigate, href, isActive: isRouterActive, isExactActive }) => [
-                            vue.createElementVNode("a", {
-                              href: href,
-                              class: vue.normalizeClass($options.linkClass(item, { isActive: isRouterActive, isExactActive })),
-                              onClick: $event => ($options.onItemClick($event, item, navigate)),
-                              role: "treeitem",
-                              "aria-expanded": $options.isActive(item)
-                            }, [
-                              vue.createElementVNode("span", {
-                                class: vue.normalizeClass(['p-menuitem-icon', item.icon])
-                              }, null, 2),
-                              vue.createElementVNode("span", _hoisted_3$1, vue.toDisplayString($options.label(item)), 1)
-                            ], 10, _hoisted_2$1)
-                          ]),
-                          _: 2
-                        }, 1032, ["to"]))
-                      : (vue.openBlock(), vue.createElementBlock("a", {
-                          key: 1,
-                          href: item.url,
-                          class: vue.normalizeClass($options.linkClass(item)),
-                          target: item.target,
-                          onClick: $event => ($options.onItemClick($event, item)),
-                          onKeydown: $event => ($options.onItemKeydown($event, item)),
-                          role: "treeitem",
-                          "aria-expanded": $options.isActive(item),
-                          tabindex: $options.disabled(item) ? null : '0'
-                        }, [
-                          (item.items)
-                            ? (vue.openBlock(), vue.createElementBlock("span", {
-                                key: 0,
-                                class: vue.normalizeClass($options.getSubmenuIcon(item))
-                              }, null, 2))
-                            : vue.createCommentVNode("", true),
-                          vue.createElementVNode("span", {
-                            class: vue.normalizeClass(['p-menuitem-icon', item.icon])
-                          }, null, 2),
-                          vue.createElementVNode("span", _hoisted_5$1, vue.toDisplayString($options.label(item)), 1)
-                        ], 42, _hoisted_4$1))
-                  ], 64))
-                : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template), {
-                    key: 1,
-                    item: item
-                  }, null, 8, ["item"])),
-              vue.createVNode(vue.Transition, { name: "p-toggleable-content" }, {
-                default: vue.withCtx(() => [
-                  vue.withDirectives(vue.createElementVNode("div", _hoisted_6$1, [
-                    ($options.visible(item) && item.items)
-                      ? (vue.openBlock(), vue.createBlock(_component_PanelMenuSub, {
-                          key: $options.label(item) + '_sub_',
-                          model: item.items,
-                          template: $props.template,
-                          expandedKeys: $props.expandedKeys,
-                          onItemToggle: _cache[0] || (_cache[0] = $event => (_ctx.$emit('item-toggle', $event))),
-                          exact: $props.exact
-                        }, null, 8, ["model", "template", "expandedKeys", "exact"]))
-                      : vue.createCommentVNode("", true)
-                  ], 512), [
-                    [vue.vShow, $options.isActive(item)]
-                  ])
-                ]),
-                _: 2
-              }, 1024)
-            ], 6))
-          : vue.createCommentVNode("", true),
-        ($options.visible(item) && item.separator)
-          ? (vue.openBlock(), vue.createElementBlock("li", {
-              key: 'separator' + i.toString(),
-              class: vue.normalizeClass(['p-menu-separator', item.class]),
-              style: vue.normalizeStyle(item.style)
-            }, null, 6))
-          : vue.createCommentVNode("", true)
-      ], 64))
-    }), 128))
-  ]))
+  return (vue.openBlock(), vue.createBlock(_component_PanelMenuSub, {
+    id: $props.panelId + '_list',
+    class: "p-panelmenu-root-list",
+    role: "tree",
+    tabindex: -1,
+    "aria-activedescendant": $data.focused ? $options.focusedItemId : undefined,
+    panelId: $props.panelId,
+    focusedItemId: $data.focused ? $options.focusedItemId : undefined,
+    items: $options.processedItems,
+    template: $props.template,
+    activeItemPath: $data.activeItemPath,
+    exact: $props.exact,
+    onFocus: $options.onFocus,
+    onBlur: $options.onBlur,
+    onKeydown: $options.onKeyDown,
+    onItemToggle: $options.onItemToggle
+  }, null, 8, ["id", "aria-activedescendant", "panelId", "focusedItemId", "items", "template", "activeItemPath", "exact", "onFocus", "onBlur", "onKeydown", "onItemToggle"]))
 }
 
 script$1.render = render$1;
 
 var script = {
     name: 'PanelMenu',
-    emits: ['update:expandedKeys'],
+    emits: ['update:expandedKeys', 'panel-open', 'panel-close'],
     props: {
         model: {
             type: Array,
             default: null
         },
         expandedKeys: {
-            type: null,
+            type: Object,
             default: null
         },
         exact: {
             type: Boolean,
             default: true
+        },
+        tabindex: {
+            type: Number,
+            default: 0
         }
     },
     data() {
@@ -230,204 +1223,309 @@ var script = {
         };
     },
     methods: {
-        onItemClick(event, item, navigate) {
-            if (this.isActive(item) && this.activeItem === null) {
-                this.activeItem = item;
-            }
-
-            if (this.disabled(item)) {
+        getItemProp(item, name) {
+            return item ? utils.ObjectUtils.getItemValue(item[name]) : undefined;
+        },
+        getItemLabel(item) {
+            return this.getItemProp(item, 'label');
+        },
+        isItemActive(item) {
+            return this.expandedKeys ? this.expandedKeys[this.getItemProp(item, 'key')] : item === this.activeItem;
+        },
+        isItemVisible(item) {
+            return this.getItemProp(item, 'visible') !== false;
+        },
+        isItemDisabled(item) {
+            return this.getItemProp(item, 'disabled');
+        },
+        getPanelId(index) {
+            return `${this.id}_${index}`;
+        },
+        getPanelKey(index) {
+            return this.getPanelId(index);
+        },
+        getHeaderId(index) {
+            return `${this.getPanelId(index)}_header`;
+        },
+        getContentId(index) {
+            return `${this.getPanelId(index)}_content`;
+        },
+        onHeaderClick(event, item) {
+            if (this.isItemDisabled(item)) {
                 event.preventDefault();
 
                 return;
             }
 
             if (item.command) {
-                item.command({
-                    originalEvent: event,
-                    item: item
-                });
+                item.command({ originalEvent: event, item });
             }
 
-            if (this.activeItem && this.activeItem === item) this.activeItem = null;
-            else this.activeItem = item;
+            this.changeActiveItem(event, item);
+            utils.DomHandler.focus(event.currentTarget);
+        },
+        onHeaderKeyDown(event, item) {
+            switch (event.code) {
+                case 'ArrowDown':
+                    this.onHeaderArrowDownKey(event);
+                    break;
+
+                case 'ArrowUp':
+                    this.onHeaderArrowUpKey(event);
+                    break;
+
+                case 'Home':
+                    this.onHeaderHomeKey(event);
+                    break;
 
-            this.updateExpandedKeys({ item: item, expanded: this.activeItem != null });
+                case 'End':
+                    this.onHeaderEndKey(event);
+                    break;
 
-            if (item.to && navigate) {
-                navigate(event);
+                case 'Enter':
+                case 'Space':
+                    this.onHeaderEnterKey(event, item);
+                    break;
             }
         },
-        onItemKeydown(event, item) {
-            if (event.which === 13) {
-                this.onItemClick(event, item);
+        onHeaderArrowDownKey(event) {
+            const rootList = utils.DomHandler.hasClass(event.currentTarget, 'p-highlight') ? utils.DomHandler.findSingle(event.currentTarget.nextElementSibling, '.p-panelmenu-root-list') : null;
+
+            rootList ? utils.DomHandler.focus(rootList) : this.updateFocusedHeader({ originalEvent: event, focusOnNext: true });
+            event.preventDefault();
+        },
+        onHeaderArrowUpKey(event) {
+            const prevHeader = this.findPrevHeader(event.currentTarget.parentElement) || this.findLastHeader();
+            const rootList = utils.DomHandler.hasClass(prevHeader, 'p-highlight') ? utils.DomHandler.findSingle(prevHeader.nextElementSibling, '.p-panelmenu-root-list') : null;
+
+            rootList ? utils.DomHandler.focus(rootList) : this.updateFocusedHeader({ originalEvent: event, focusOnNext: false });
+            event.preventDefault();
+        },
+        onHeaderHomeKey(event) {
+            this.changeFocusedHeader(event, this.findFirstHeader());
+            event.preventDefault();
+        },
+        onHeaderEndKey(event) {
+            this.changeFocusedHeader(event, this.findLastHeader());
+            event.preventDefault();
+        },
+        onHeaderEnterKey(event, item) {
+            const headerAction = utils.DomHandler.findSingle(event.currentTarget, '.p-panelmenu-header-action');
+
+            headerAction ? headerAction.click() : this.onHeaderClick(event, item);
+            event.preventDefault();
+        },
+        onHeaderActionClick(event, navigate) {
+            navigate && navigate(event);
+        },
+        findNextHeader(panelElement, selfCheck = false) {
+            const nextPanelElement = selfCheck ? panelElement : panelElement.nextElementSibling;
+            const headerElement = utils.DomHandler.findSingle(nextPanelElement, '.p-panelmenu-header');
+
+            return headerElement ? (utils.DomHandler.hasClass(headerElement, 'p-disabled') ? this.findNextHeader(headerElement.parentElement) : headerElement) : null;
+        },
+        findPrevHeader(panelElement, selfCheck = false) {
+            const prevPanelElement = selfCheck ? panelElement : panelElement.previousElementSibling;
+            const headerElement = utils.DomHandler.findSingle(prevPanelElement, '.p-panelmenu-header');
+
+            return headerElement ? (utils.DomHandler.hasClass(headerElement, 'p-disabled') ? this.findPrevHeader(headerElement.parentElement) : headerElement) : null;
+        },
+        findFirstHeader() {
+            return this.findNextHeader(this.$el.firstElementChild, true);
+        },
+        findLastHeader() {
+            return this.findPrevHeader(this.$el.lastElementChild, true);
+        },
+        updateFocusedHeader(event) {
+            const { originalEvent, focusOnNext, selfCheck } = event;
+            const panelElement = originalEvent.currentTarget.closest('.p-panelmenu-panel');
+            const header = selfCheck ? utils.DomHandler.findSingle(panelElement, '.p-panelmenu-header') : focusOnNext ? this.findNextHeader(panelElement) : this.findPrevHeader(panelElement);
+
+            header ? this.changeFocusedHeader(originalEvent, header) : focusOnNext ? this.onHeaderHomeKey(originalEvent) : this.onHeaderEndKey(originalEvent);
+        },
+        changeActiveItem(event, item, selfActive = false) {
+            if (!this.isItemDisabled(item)) {
+                this.activeItem = selfActive ? item : this.activeItem && this.activeItem === item ? null : item;
+
+                const active = this.isItemActive(item);
+                const eventName = active ? 'panel-open' : 'panel-close';
+
+                this.changeExpandedKeys({ item, expanded: !active });
+                this.$emit(eventName, { originalEvent: event, item });
             }
         },
-        updateExpandedKeys(event) {
+        changeExpandedKeys({ item, expanded = false }) {
             if (this.expandedKeys) {
-                let item = event.item;
                 let _keys = { ...this.expandedKeys };
 
-                if (event.expanded) _keys[item.key] = true;
+                if (expanded) _keys[item.key] = true;
                 else delete _keys[item.key];
 
                 this.$emit('update:expandedKeys', _keys);
             }
         },
-        getPanelClass(item) {
-            return ['p-panelmenu-panel', item.class];
+        changeFocusedHeader(event, element) {
+            element && utils.DomHandler.focus(element);
         },
-        getPanelToggleIcon(item) {
-            const active = this.isActive(item);
-
-            return ['p-panelmenu-icon pi', { 'pi-chevron-right': !active, ' pi-chevron-down': active }];
+        getPanelClass(item) {
+            return ['p-panelmenu-panel', this.getItemProp(item, 'class')];
         },
-        getPanelIcon(item) {
-            return ['p-menuitem-icon', item.icon];
+        getHeaderClass(item) {
+            return [
+                'p-panelmenu-header',
+                this.getItemProp(item, 'headerClass'),
+                {
+                    'p-highlight': this.isItemActive(item),
+                    'p-disabled': this.isItemDisabled(item)
+                }
+            ];
         },
-        getHeaderLinkClass(item, routerProps) {
+        getHeaderActionClass(item, routerProps) {
             return [
-                'p-panelmenu-header-link',
+                'p-panelmenu-header-action',
                 {
                     'router-link-active': routerProps && routerProps.isActive,
                     'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
                 }
             ];
         },
-        isActive(item) {
-            return this.expandedKeys ? this.expandedKeys[item.key] : item === this.activeItem;
-        },
-        getHeaderClass(item) {
-            return ['p-component p-panelmenu-header', { 'p-highlight': this.isActive(item), 'p-disabled': this.disabled(item) }];
-        },
-        visible(item) {
-            return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
+        getHeaderIconClass(item) {
+            return ['p-menuitem-icon', this.getItemProp(item, 'icon')];
         },
-        disabled(item) {
-            return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
-        },
-        label(item) {
-            return typeof item.label === 'function' ? item.label() : item.label;
+        getHeaderToggleIconClass(item) {
+            return ['p-submenu-icon', this.isItemActive(item) ? 'pi pi-chevron-down' : 'pi pi-chevron-right'];
         }
     },
     computed: {
-        ariaId() {
-            return utils.UniqueComponentId();
+        id() {
+            return this.$attrs.id || utils.UniqueComponentId();
         }
     },
     components: {
-        PanelMenuSub: script$1
+        PanelMenuList: script$1
     }
 };
 
-const _hoisted_1 = { class: "p-panelmenu p-component" };
-const _hoisted_2 = ["href", "onClick"];
-const _hoisted_3 = { class: "p-menuitem-text" };
-const _hoisted_4 = ["id", "href", "onClick", "onKeydown", "tabindex", "aria-expanded", "aria-controls"];
+const _hoisted_1 = ["id"];
+const _hoisted_2 = ["id", "tabindex", "aria-label", "aria-expanded", "aria-controls", "aria-disabled", "onClick", "onKeydown"];
+const _hoisted_3 = { class: "p-panelmenu-header-content" };
+const _hoisted_4 = ["href", "onClick"];
 const _hoisted_5 = { class: "p-menuitem-text" };
-const _hoisted_6 = ["id", "aria-labelledby"];
-const _hoisted_7 = {
+const _hoisted_6 = ["href"];
+const _hoisted_7 = { class: "p-menuitem-text" };
+const _hoisted_8 = ["id", "aria-labelledby"];
+const _hoisted_9 = {
   key: 0,
   class: "p-panelmenu-content"
 };
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_router_link = vue.resolveComponent("router-link");
-  const _component_PanelMenuSub = vue.resolveComponent("PanelMenuSub");
+  const _component_PanelMenuList = vue.resolveComponent("PanelMenuList");
 
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+  return (vue.openBlock(), vue.createElementBlock("div", {
+    id: $options.id,
+    class: "p-panelmenu p-component"
+  }, [
     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.model, (item, index) => {
       return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
-        key: $options.label(item) + '_' + index
+        key: $options.getPanelKey(index)
       }, [
-        ($options.visible(item))
+        ($options.isItemVisible(item))
           ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 0,
-              class: vue.normalizeClass($options.getPanelClass(item)),
-              style: vue.normalizeStyle(item.style)
+              style: vue.normalizeStyle($options.getItemProp(item, 'style')),
+              class: vue.normalizeClass($options.getPanelClass(item))
             }, [
               vue.createElementVNode("div", {
+                id: $options.getHeaderId(index),
                 class: vue.normalizeClass($options.getHeaderClass(item)),
-                style: vue.normalizeStyle(item.style)
+                tabindex: $options.isItemDisabled(item) ? -1 : $props.tabindex,
+                role: "button",
+                "aria-label": $options.getItemLabel(item),
+                "aria-expanded": $options.isItemActive(item),
+                "aria-controls": $options.getContentId(index),
+                "aria-disabled": $options.isItemDisabled(item),
+                onClick: $event => ($options.onHeaderClick($event, item)),
+                onKeydown: $event => ($options.onHeaderKeyDown($event, item))
               }, [
-                (!_ctx.$slots.item)
-                  ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                      (item.to && !$options.disabled(item))
-                        ? (vue.openBlock(), vue.createBlock(_component_router_link, {
-                            key: 0,
-                            to: item.to,
-                            custom: ""
-                          }, {
-                            default: vue.withCtx(({ navigate, href, isActive, isExactActive }) => [
-                              vue.createElementVNode("a", {
-                                href: href,
-                                class: vue.normalizeClass($options.getHeaderLinkClass(item, { isActive, isExactActive })),
-                                onClick: $event => ($options.onItemClick($event, item, navigate)),
-                                role: "treeitem"
-                              }, [
-                                (item.icon)
-                                  ? (vue.openBlock(), vue.createElementBlock("span", {
-                                      key: 0,
-                                      class: vue.normalizeClass($options.getPanelIcon(item))
-                                    }, null, 2))
-                                  : vue.createCommentVNode("", true),
-                                vue.createElementVNode("span", _hoisted_3, vue.toDisplayString($options.label(item)), 1)
-                              ], 10, _hoisted_2)
-                            ]),
-                            _: 2
-                          }, 1032, ["to"]))
-                        : (vue.openBlock(), vue.createElementBlock("a", {
-                            key: 1,
-                            id: $options.ariaId + '_header_' + index,
-                            href: item.url,
-                            class: vue.normalizeClass($options.getHeaderLinkClass(item)),
-                            onClick: $event => ($options.onItemClick($event, item)),
-                            onKeydown: $event => ($options.onItemKeydown($event, item)),
-                            tabindex: $options.disabled(item) ? null : '0',
-                            "aria-expanded": $options.isActive(item),
-                            "aria-controls": $options.ariaId + '_content_' + index
-                          }, [
-                            (item.items)
-                              ? (vue.openBlock(), vue.createElementBlock("span", {
-                                  key: 0,
-                                  class: vue.normalizeClass($options.getPanelToggleIcon(item))
-                                }, null, 2))
-                              : vue.createCommentVNode("", true),
-                            (item.icon)
-                              ? (vue.openBlock(), vue.createElementBlock("span", {
-                                  key: 1,
-                                  class: vue.normalizeClass($options.getPanelIcon(item))
-                                }, null, 2))
-                              : vue.createCommentVNode("", true),
-                            vue.createElementVNode("span", _hoisted_5, vue.toDisplayString($options.label(item)), 1)
-                          ], 42, _hoisted_4))
-                    ], 64))
-                  : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.item), {
-                      key: 1,
-                      item: item
-                    }, null, 8, ["item"]))
-              ], 6),
+                vue.createElementVNode("div", _hoisted_3, [
+                  (!_ctx.$slots.item)
+                    ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                        ($options.getItemProp(item, 'to') && !$options.isItemDisabled(item))
+                          ? (vue.openBlock(), vue.createBlock(_component_router_link, {
+                              key: 0,
+                              to: $options.getItemProp(item, 'to'),
+                              custom: ""
+                            }, {
+                              default: vue.withCtx(({ navigate, href, isActive, isExactActive }) => [
+                                vue.createElementVNode("a", {
+                                  href: href,
+                                  class: vue.normalizeClass($options.getHeaderActionClass(item, { isActive, isExactActive })),
+                                  tabindex: -1,
+                                  onClick: $event => ($options.onHeaderActionClick($event, navigate))
+                                }, [
+                                  ($options.getItemProp(item, 'icon'))
+                                    ? (vue.openBlock(), vue.createElementBlock("span", {
+                                        key: 0,
+                                        class: vue.normalizeClass($options.getHeaderIconClass(item))
+                                      }, null, 2))
+                                    : vue.createCommentVNode("", true),
+                                  vue.createElementVNode("span", _hoisted_5, vue.toDisplayString($options.getItemLabel(item)), 1)
+                                ], 10, _hoisted_4)
+                              ]),
+                              _: 2
+                            }, 1032, ["to"]))
+                          : (vue.openBlock(), vue.createElementBlock("a", {
+                              key: 1,
+                              href: $options.getItemProp(item, 'url'),
+                              class: vue.normalizeClass($options.getHeaderActionClass(item)),
+                              tabindex: -1
+                            }, [
+                              ($options.getItemProp(item, 'items'))
+                                ? (vue.openBlock(), vue.createElementBlock("span", {
+                                    key: 0,
+                                    class: vue.normalizeClass($options.getHeaderToggleIconClass(item))
+                                  }, null, 2))
+                                : vue.createCommentVNode("", true),
+                              ($options.getItemProp(item, 'icon'))
+                                ? (vue.openBlock(), vue.createElementBlock("span", {
+                                    key: 1,
+                                    class: vue.normalizeClass($options.getHeaderIconClass(item))
+                                  }, null, 2))
+                                : vue.createCommentVNode("", true),
+                              vue.createElementVNode("span", _hoisted_7, vue.toDisplayString($options.getItemLabel(item)), 1)
+                            ], 10, _hoisted_6))
+                      ], 64))
+                    : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.item), {
+                        key: 1,
+                        item: item
+                      }, null, 8, ["item"]))
+                ])
+              ], 42, _hoisted_2),
               vue.createVNode(vue.Transition, { name: "p-toggleable-content" }, {
                 default: vue.withCtx(() => [
                   vue.withDirectives(vue.createElementVNode("div", {
-                    id: $options.ariaId + '_content_' + index,
+                    id: $options.getContentId(index),
                     class: "p-toggleable-content",
                     role: "region",
-                    "aria-labelledby": $options.ariaId + '_header_' + index
+                    "aria-labelledby": $options.getHeaderId(index)
                   }, [
-                    (item.items)
-                      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
-                          vue.createVNode(_component_PanelMenuSub, {
-                            model: item.items,
-                            class: "p-panelmenu-root-submenu",
+                    ($options.getItemProp(item, 'items'))
+                      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9, [
+                          vue.createVNode(_component_PanelMenuList, {
+                            panelId: $options.getPanelId(index),
+                            items: $options.getItemProp(item, 'items'),
                             template: _ctx.$slots.item,
                             expandedKeys: $props.expandedKeys,
-                            onItemToggle: $options.updateExpandedKeys,
+                            onItemToggle: $options.changeExpandedKeys,
+                            onHeaderFocus: $options.updateFocusedHeader,
                             exact: $props.exact
-                          }, null, 8, ["model", "template", "expandedKeys", "onItemToggle", "exact"])
+                          }, null, 8, ["panelId", "items", "template", "expandedKeys", "onItemToggle", "onHeaderFocus", "exact"])
                         ]))
                       : vue.createCommentVNode("", true)
-                  ], 8, _hoisted_6), [
-                    [vue.vShow, $options.isActive(item)]
+                  ], 8, _hoisted_8), [
+                    [vue.vShow, $options.isItemActive(item)]
                   ])
                 ]),
                 _: 2
@@ -436,7 +1534,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           : vue.createCommentVNode("", true)
       ], 64))
     }), 128))
-  ]))
+  ], 8, _hoisted_1))
 }
 
 function styleInject(css, ref) {
@@ -466,7 +1564,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "\n.p-panelmenu .p-panelmenu-header-link {\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-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    cursor: pointer;\n    position: relative;\n    text-decoration: none;\n}\n.p-panelmenu .p-panelmenu-header-link:focus {\n    z-index: 1;\n}\n.p-panelmenu .p-submenu-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n.p-panelmenu .p-menuitem-link {\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-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    cursor: pointer;\n    text-decoration: none;\n}\n.p-panelmenu .p-menuitem-text {\n    line-height: 1;\n}\n";
+var css_248z = "\n.p-panelmenu .p-panelmenu-header-action {\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-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    cursor: pointer;\n    position: relative;\n    text-decoration: none;\n}\n.p-panelmenu .p-panelmenu-header-action:focus {\n    z-index: 1;\n}\n.p-panelmenu .p-submenu-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n.p-panelmenu .p-menuitem-link {\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-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    cursor: pointer;\n    text-decoration: none;\n    position: relative;\n    overflow: hidden;\n}\n.p-panelmenu .p-menuitem-text {\n    line-height: 1;\n}\n";
 styleInject(css_248z);
 
 script.render = render;