primevue 3.16.2 → 3.18.0

package/menu/menu.js

@@ -1,61 +1,69 @@
 this.primevue = this.primevue || {};
-this.primevue.menu = (function (utils, OverlayEventBus, Ripple, vue, Portal) {
+this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
     var OverlayEventBus__default = /*#__PURE__*/_interopDefaultLegacy(OverlayEventBus);
-    var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
     var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
+    var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
     var script$1 = {
         name: 'Menuitem',
         inheritAttrs: false,
-        emits: ['click'],
+        emits: ['item-click'],
         props: {
             item: null,
             template: null,
-            exact: null
+            exact: null,
+            id: null,
+            focusedOptionId: null
         },
         methods: {
-            onClick(event, navigate) {
-                this.$emit('click', {
-                    originalEvent: event,
-                    item: this.item,
-                    navigate: navigate
-                });
+            getItemProp(processedItem, name) {
+                return processedItem && processedItem.item ? utils.ObjectUtils.getItemValue(processedItem.item[name]) : undefined;
+            },
+            onItemActionClick(event, navigate) {
+                navigate && navigate(event);
             },
-            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
-                }];
+            onItemClick(event) {
+                const command = this.getItemProp(this.item, 'command');
+
+                command && command({ originalEvent: event, item: this.item.item });
+                this.$emit('item-click', { originalEvent: event, item: this.item, id: this.id });
+            },
+            containerClass() {
+                return ['p-menuitem', this.item.class, { 'p-focus': this.id === this.focusedOptionId, 'p-disabled': this.disabled() }];
+            },
+            linkClass(routerProps) {
+                return [
+                    'p-menuitem-link',
+                    {
+                        'router-link-active': routerProps && routerProps.isActive,
+                        'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
+                    }
+                ];
             },
             visible() {
-                return (typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false);
+                return typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false;
             },
-            disabled(item) {
-                return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+            disabled() {
+                return typeof this.item.disabled === 'function' ? this.item.disabled() : this.item.disabled;
             },
             label() {
-                return (typeof this.item.label === 'function' ? this.item.label() : this.item.label);
-            }
-        },
-        computed: {
-            containerClass() {
-                return ['p-menuitem', this.item.class];
+                return typeof this.item.label === 'function' ? this.item.label() : this.item.label;
             }
         },
         directives: {
-            'ripple': Ripple__default["default"]
+            ripple: Ripple__default["default"]
         }
     };
 
-    const _hoisted_1$1 = ["href", "onClick"];
-    const _hoisted_2$1 = { class: "p-menuitem-text" };
-    const _hoisted_3 = ["href", "target", "tabindex"];
-    const _hoisted_4 = { class: "p-menuitem-text" };
+    const _hoisted_1$1 = ["id", "aria-label", "aria-disabled"];
+    const _hoisted_2$1 = ["href", "onClick"];
+    const _hoisted_3$1 = { class: "p-menuitem-text" };
+    const _hoisted_4 = ["href", "target"];
+    const _hoisted_5 = { class: "p-menuitem-text" };
 
     function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_router_link = vue.resolveComponent("router-link");
@@ -64,63 +72,71 @@ this.primevue.menu = (function (utils, OverlayEventBus, Ripple, vue, Portal) {
       return ($options.visible())
         ? (vue.openBlock(), vue.createElementBlock("li", {
             key: 0,
-            class: vue.normalizeClass($options.containerClass),
-            role: "none",
-            style: vue.normalizeStyle($props.item.style)
+            id: $props.id,
+            class: vue.normalizeClass($options.containerClass()),
+            role: "menuitem",
+            style: vue.normalizeStyle($props.item.style),
+            "aria-label": $options.label(),
+            "aria-disabled": $options.disabled()
           }, [
-            (!$props.template)
-              ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                  ($props.item.to && !$options.disabled($props.item))
-                    ? (vue.openBlock(), vue.createBlock(_component_router_link, {
-                        key: 0,
-                        to: $props.item.to,
-                        custom: ""
-                      }, {
-                        default: vue.withCtx(({navigate, href, isActive, isExactActive}) => [
-                          vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
-                            href: href,
-                            onClick: $event => ($options.onClick($event, navigate)),
-                            class: vue.normalizeClass($options.linkClass($props.item, {isActive, isExactActive})),
-                            role: "menuitem"
-                          }, [
-                            ($props.item.icon)
-                              ? (vue.openBlock(), vue.createElementBlock("span", {
-                                  key: 0,
-                                  class: vue.normalizeClass(['p-menuitem-icon', $props.item.icon])
-                                }, null, 2))
-                              : vue.createCommentVNode("", true),
-                            vue.createElementVNode("span", _hoisted_2$1, vue.toDisplayString($options.label()), 1)
-                          ], 10, _hoisted_1$1)), [
-                            [_directive_ripple]
-                          ])
-                        ]),
-                        _: 1
-                      }, 8, ["to"]))
-                    : vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
-                        key: 1,
-                        href: $props.item.url,
-                        class: vue.normalizeClass($options.linkClass($props.item)),
-                        onClick: _cache[0] || (_cache[0] = (...args) => ($options.onClick && $options.onClick(...args))),
-                        target: $props.item.target,
-                        role: "menuitem",
-                        tabindex: $options.disabled($props.item) ? null : '0'
-                      }, [
-                        ($props.item.icon)
-                          ? (vue.openBlock(), vue.createElementBlock("span", {
-                              key: 0,
-                              class: vue.normalizeClass(['p-menuitem-icon', $props.item.icon])
-                            }, null, 2))
-                          : vue.createCommentVNode("", true),
-                        vue.createElementVNode("span", _hoisted_4, vue.toDisplayString($options.label()), 1)
-                      ], 10, _hoisted_3)), [
-                        [_directive_ripple]
-                      ])
-                ], 64))
-              : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template), {
-                  key: 1,
-                  item: $props.item
-                }, null, 8, ["item"]))
-          ], 6))
+            vue.createElementVNode("div", {
+              class: "p-menuitem-content",
+              onClick: _cache[0] || (_cache[0] = $event => ($options.onItemClick($event)))
+            }, [
+              (!$props.template)
+                ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                    ($props.item.to && !$options.disabled())
+                      ? (vue.openBlock(), vue.createBlock(_component_router_link, {
+                          key: 0,
+                          to: $props.item.to,
+                          custom: ""
+                        }, {
+                          default: vue.withCtx(({ navigate, href, isActive, isExactActive }) => [
+                            vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
+                              href: href,
+                              class: vue.normalizeClass($options.linkClass({ isActive, isExactActive })),
+                              tabindex: "-1",
+                              "aria-hidden": "true",
+                              onClick: $event => ($options.onItemActionClick($event, navigate))
+                            }, [
+                              ($props.item.icon)
+                                ? (vue.openBlock(), vue.createElementBlock("span", {
+                                    key: 0,
+                                    class: vue.normalizeClass(['p-menuitem-icon', $props.item.icon])
+                                  }, null, 2))
+                                : vue.createCommentVNode("", true),
+                              vue.createElementVNode("span", _hoisted_3$1, vue.toDisplayString($options.label()), 1)
+                            ], 10, _hoisted_2$1)), [
+                              [_directive_ripple]
+                            ])
+                          ]),
+                          _: 1
+                        }, 8, ["to"]))
+                      : vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
+                          key: 1,
+                          href: $props.item.url,
+                          class: vue.normalizeClass($options.linkClass()),
+                          target: $props.item.target,
+                          tabindex: "-1",
+                          "aria-hidden": "true"
+                        }, [
+                          ($props.item.icon)
+                            ? (vue.openBlock(), vue.createElementBlock("span", {
+                                key: 0,
+                                class: vue.normalizeClass(['p-menuitem-icon', $props.item.icon])
+                              }, null, 2))
+                            : vue.createCommentVNode("", true),
+                          vue.createElementVNode("span", _hoisted_5, vue.toDisplayString($options.label()), 1)
+                        ], 10, _hoisted_4)), [
+                          [_directive_ripple]
+                        ])
+                  ], 64))
+                : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template), {
+                    key: 1,
+                    item: $props.item
+                  }, null, 8, ["item"]))
+            ])
+          ], 14, _hoisted_1$1))
         : vue.createCommentVNode("", true)
     }
 
@@ -128,14 +144,14 @@ this.primevue.menu = (function (utils, OverlayEventBus, Ripple, vue, Portal) {
 
     var script = {
         name: 'Menu',
-        emits: ['show', 'hide'],
         inheritAttrs: false,
+        emits: ['show', 'hide', 'focus', 'blur'],
         props: {
             popup: {
                 type: Boolean,
                 default: false
             },
-    		model: {
+            model: {
                 type: Array,
                 default: null
             },
@@ -154,11 +170,26 @@ this.primevue.menu = (function (utils, OverlayEventBus, Ripple, vue, Portal) {
             exact: {
                 type: Boolean,
                 default: true
+            },
+            tabindex: {
+                type: Number,
+                default: 0
+            },
+            'aria-label': {
+                type: String,
+                default: null
+            },
+            'aria-labelledby': {
+                type: String,
+                default: null
             }
         },
         data() {
             return {
-                overlayVisible: false
+                overlayVisible: false,
+                focused: false,
+                focusedOptionIndex: -1,
+                selectedOptionIndex: -1
             };
         },
         target: null,
@@ -166,6 +197,13 @@ this.primevue.menu = (function (utils, OverlayEventBus, Ripple, vue, Portal) {
         scrollHandler: null,
         resizeListener: null,
         container: null,
+        list: null,
+        mounted() {
+            if (!this.popup) {
+                this.bindResizeListener();
+                this.bindOutsideClickListener();
+            }
+        },
         beforeUnmount() {
             this.unbindResizeListener();
             this.unbindOutsideClickListener();
@@ -174,16 +212,19 @@ this.primevue.menu = (function (utils, OverlayEventBus, Ripple, vue, Portal) {
                 this.scrollHandler.destroy();
                 this.scrollHandler = null;
             }
+
             this.target = null;
 
             if (this.container && this.autoZIndex) {
                 utils.ZIndexUtils.clear(this.container);
             }
+
             this.container = null;
         },
         methods: {
             itemClick(event) {
                 const item = event.item;
+
                 if (this.disabled(item)) {
                     return;
                 }
@@ -196,13 +237,119 @@ this.primevue.menu = (function (utils, OverlayEventBus, Ripple, vue, Portal) {
                     event.navigate(event.originalEvent);
                 }
 
-                this.hide();
+                if (this.overlayVisible) this.hide();
+
+                if (!this.popup && this.focusedOptionIndex !== event.id) {
+                    this.focusedOptionIndex = event.id;
+                }
             },
-            toggle(event) {
-                if (this.overlayVisible)
+            onListFocus(event) {
+                this.focused = true;
+
+                if (!this.popup) {
+                    if (this.selectedOptionIndex !== -1) {
+                        this.changeFocusedOptionIndex(this.selectedOptionIndex);
+                        this.selectedOptionIndex = -1;
+                    } else this.changeFocusedOptionIndex(0);
+                }
+
+                this.$emit('focus', event);
+            },
+            onListBlur(event) {
+                this.focused = false;
+                this.focusedOptionIndex = -1;
+                this.$emit('blur', event);
+            },
+            onListKeyDown(event) {
+                switch (event.code) {
+                    case 'ArrowDown':
+                        this.onArrowDownKey(event);
+                        break;
+
+                    case 'ArrowUp':
+                        this.onArrowUpKey(event);
+                        break;
+
+                    case 'Home':
+                        this.onHomeKey(event);
+                        break;
+
+                    case 'End':
+                        this.onEndKey(event);
+                        break;
+
+                    case 'Enter':
+                        this.onEnterKey(event);
+                        break;
+
+                    case 'Space':
+                        this.onSpaceKey(event);
+                        break;
+
+                    case 'Tab':
+                        this.overlayVisible && this.hide();
+                        break;
+                }
+            },
+            onArrowDownKey(event) {
+                const optionIndex = this.findNextOptionIndex(this.focusedOptionIndex);
+
+                this.changeFocusedOptionIndex(optionIndex);
+                event.preventDefault();
+            },
+            onArrowUpKey(event) {
+                if (event.altKey && this.popup) {
+                    utils.DomHandler.focus(this.target);
                     this.hide();
-                else
-                    this.show(event);
+                    event.preventDefault();
+                } else {
+                    const optionIndex = this.findPrevOptionIndex(this.focusedOptionIndex);
+
+                    this.changeFocusedOptionIndex(optionIndex);
+                    event.preventDefault();
+                }
+            },
+            onHomeKey(event) {
+                this.changeFocusedOptionIndex(0);
+                event.preventDefault();
+            },
+            onEndKey(event) {
+                this.changeFocusedOptionIndex(utils.DomHandler.find(this.container, 'li.p-menuitem:not(.p-disabled)').length - 1);
+                event.preventDefault();
+            },
+            onEnterKey(event) {
+                const element = utils.DomHandler.findSingle(this.list, `li[id="${`${this.focusedOptionIndex}`}"]`);
+                const anchorElement = element && utils.DomHandler.findSingle(element, '.p-menuitem-link');
+
+                this.popup && utils.DomHandler.focus(this.target);
+                anchorElement ? anchorElement.click() : element && element.click();
+
+                event.preventDefault();
+            },
+            onSpaceKey(event) {
+                this.onEnterKey(event);
+            },
+            findNextOptionIndex(index) {
+                const links = utils.DomHandler.find(this.container, 'li.p-menuitem:not(.p-disabled)');
+                const matchedOptionIndex = [...links].findIndex((link) => link.id === index);
+
+                return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
+            },
+            findPrevOptionIndex(index) {
+                const links = utils.DomHandler.find(this.container, 'li.p-menuitem:not(.p-disabled)');
+                const matchedOptionIndex = [...links].findIndex((link) => link.id === index);
+
+                return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
+            },
+            changeFocusedOptionIndex(index) {
+                const links = utils.DomHandler.find(this.container, 'li.p-menuitem:not(.p-disabled)');
+                let order = index >= links.length ? links.length - 1 : index < 0 ? 0 : index;
+
+                this.focusedOptionIndex = links[order].getAttribute('id');
+            },
+            toggle(event) {
+                if (this.overlayVisible) this.hide();
+                else this.show(event);
             },
             show(event) {
                 this.overlayVisible = true;
@@ -222,6 +369,11 @@ this.primevue.menu = (function (utils, OverlayEventBus, Ripple, vue, Portal) {
                     utils.ZIndexUtils.set('menu', el, this.baseZIndex + this.$primevue.config.zIndex.menu);
                 }
 
+                if (this.popup) {
+                    utils.DomHandler.focus(this.list);
+                    this.changeFocusedOptionIndex(0);
+                }
+
                 this.$emit('show');
             },
             onLeave() {
@@ -242,10 +394,16 @@ this.primevue.menu = (function (utils, OverlayEventBus, Ripple, vue, Portal) {
             bindOutsideClickListener() {
                 if (!this.outsideClickListener) {
                     this.outsideClickListener = (event) => {
-                        if (this.overlayVisible && this.container && !this.container.contains(event.target) && !this.isTargetClicked(event)) {
+                        const isOutsideContainer = this.container && !this.container.contains(event.target);
+                        const isOutsideTarget = !(this.target && (this.target === event.target || this.target.contains(event.target)));
+
+                        if (this.overlayVisible && isOutsideContainer && isOutsideTarget) {
                             this.hide();
+                        } else if (!this.popup && isOutsideContainer && isOutsideTarget) {
+                            this.focusedOptionIndex = -1;
                         }
                     };
+
                     document.addEventListener('click', this.outsideClickListener);
                 }
             },
@@ -278,6 +436,7 @@ this.primevue.menu = (function (utils, OverlayEventBus, Ripple, vue, Portal) {
                             this.hide();
                         }
                     };
+
                     window.addEventListener('resize', this.resizeListener);
                 }
             },
@@ -287,17 +446,14 @@ this.primevue.menu = (function (utils, OverlayEventBus, Ripple, vue, Portal) {
                     this.resizeListener = null;
                 }
             },
-            isTargetClicked(event) {
-                return this.target && (this.target === event.target || this.target.contains(event.target));
-            },
             visible(item) {
-                return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
+                return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
             },
             disabled(item) {
-                return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+                return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
             },
             label(item) {
-                return (typeof item.label === 'function' ? item.label() : item.label);
+                return typeof item.label === 'function' ? item.label() : item.label;
             },
             containerRef(el) {
                 this.container = el;
@@ -307,34 +463,44 @@ this.primevue.menu = (function (utils, OverlayEventBus, Ripple, vue, Portal) {
                     originalEvent: event,
                     target: this.target
                 });
+            },
+            listRef(el) {
+                this.list = el;
             }
         },
         computed: {
             containerClass() {
-                return ['p-menu p-component', {
-                    'p-menu-overlay': this.popup,
-                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                    'p-ripple-disabled': this.$primevue.config.ripple === false
-                }]
+                return [
+                    'p-menu p-component',
+                    {
+                        'p-menu-overlay': this.popup,
+                        'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                        'p-ripple-disabled': this.$primevue.config.ripple === false
+                    }
+                ];
+            },
+            separatorClass(item) {
+                return ['p-menu-separator p-menuitem-separator', item.class]; // TODO: the 'p-menu-separator' class is deprecated since v3.18.0.
+            },
+            id() {
+                return this.$attrs.id || utils.UniqueComponentId();
+            },
+            focusedOptionId() {
+                return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null;
             }
         },
         components: {
-            'Menuitem': script$1,
-            'Portal': Portal__default["default"]
+            PVMenuitem: script$1,
+            Portal: Portal__default["default"]
         }
     };
 
-    const _hoisted_1 = {
-      class: "p-menu-list p-reset",
-      role: "menu"
-    };
-    const _hoisted_2 = {
-      key: 0,
-      class: "p-submenu-header"
-    };
+    const _hoisted_1 = ["id"];
+    const _hoisted_2 = ["id", "tabindex", "aria-activedescendant", "aria-label", "aria-labelledby"];
+    const _hoisted_3 = ["id"];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
-      const _component_Menuitem = vue.resolveComponent("Menuitem");
+      const _component_PVMenuitem = vue.resolveComponent("PVMenuitem");
       const _component_Portal = vue.resolveComponent("Portal");
 
       return (vue.openBlock(), vue.createBlock(_component_Portal, {
@@ -353,11 +519,24 @@ this.primevue.menu = (function (utils, OverlayEventBus, Ripple, vue, Portal) {
                 ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
                     key: 0,
                     ref: $options.containerRef,
+                    id: $options.id,
                     class: $options.containerClass
                   }, _ctx.$attrs, {
-                    onClick: _cache[0] || (_cache[0] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args)))
+                    onClick: _cache[3] || (_cache[3] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args)))
                   }), [
-                    vue.createElementVNode("ul", _hoisted_1, [
+                    vue.createElementVNode("ul", {
+                      ref: $options.listRef,
+                      id: $options.id + '_list',
+                      class: "p-menu-list p-reset",
+                      role: "menu",
+                      tabindex: $props.tabindex,
+                      "aria-activedescendant": $data.focused ? $options.focusedOptionId : undefined,
+                      "aria-label": _ctx.ariaLabel,
+                      "aria-labelledby": _ctx.ariaLabelledby,
+                      onFocus: _cache[0] || (_cache[0] = (...args) => ($options.onListFocus && $options.onListFocus(...args))),
+                      onBlur: _cache[1] || (_cache[1] = (...args) => ($options.onListBlur && $options.onListBlur(...args))),
+                      onKeydown: _cache[2] || (_cache[2] = (...args) => ($options.onListKeyDown && $options.onListKeyDown(...args)))
+                    }, [
                       (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()
@@ -365,29 +544,36 @@ this.primevue.menu = (function (utils, OverlayEventBus, Ripple, vue, Portal) {
                           (item.items && $options.visible(item) && !item.separator)
                             ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
                                 (item.items)
-                                  ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_2, [
+                                  ? (vue.openBlock(), vue.createElementBlock("li", {
+                                      key: 0,
+                                      id: $options.id + '_' + i,
+                                      class: "p-submenu-header",
+                                      role: "none"
+                                    }, [
                                       vue.renderSlot(_ctx.$slots, "item", { item: item }, () => [
                                         vue.createTextVNode(vue.toDisplayString($options.label(item)), 1)
                                       ])
-                                    ]))
+                                    ], 8, _hoisted_3))
                                   : vue.createCommentVNode("", true),
                                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(item.items, (child, j) => {
                                   return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
-                                    key: child.label + i + j
+                                    key: child.label + i + '_' + j
                                   }, [
                                     ($options.visible(child) && !child.separator)
-                                      ? (vue.openBlock(), vue.createBlock(_component_Menuitem, {
+                                      ? (vue.openBlock(), vue.createBlock(_component_PVMenuitem, {
                                           key: 0,
+                                          id: $options.id + '_' + i + '_' + j,
                                           item: child,
-                                          onClick: $options.itemClick,
                                           template: _ctx.$slots.item,
-                                          exact: $props.exact
-                                        }, null, 8, ["item", "onClick", "template", "exact"]))
+                                          exact: $props.exact,
+                                          focusedOptionId: $options.focusedOptionId,
+                                          onItemClick: $options.itemClick
+                                        }, null, 8, ["id", "item", "template", "exact", "focusedOptionId", "onItemClick"]))
                                       : ($options.visible(child) && child.separator)
                                         ? (vue.openBlock(), vue.createElementBlock("li", {
-                                            class: vue.normalizeClass(['p-menu-separator', child.class]),
-                                            style: vue.normalizeStyle(child.style),
                                             key: 'separator' + i + j,
+                                            class: vue.normalizeClass($options.separatorClass(item)),
+                                            style: vue.normalizeStyle(child.style),
                                             role: "separator"
                                           }, null, 6))
                                         : vue.createCommentVNode("", true)
@@ -396,22 +582,24 @@ this.primevue.menu = (function (utils, OverlayEventBus, Ripple, vue, Portal) {
                               ], 64))
                             : ($options.visible(item) && item.separator)
                               ? (vue.openBlock(), vue.createElementBlock("li", {
-                                  class: vue.normalizeClass(['p-menu-separator', item.class]),
-                                  style: vue.normalizeStyle(item.style),
                                   key: 'separator' + i.toString(),
+                                  class: vue.normalizeClass($options.separatorClass(item)),
+                                  style: vue.normalizeStyle(item.style),
                                   role: "separator"
                                 }, null, 6))
-                              : (vue.openBlock(), vue.createBlock(_component_Menuitem, {
+                              : (vue.openBlock(), vue.createBlock(_component_PVMenuitem, {
                                   key: $options.label(item) + i.toString(),
+                                  id: $options.id + '_' + i,
                                   item: item,
-                                  onClick: $options.itemClick,
                                   template: _ctx.$slots.item,
-                                  exact: $props.exact
-                                }, null, 8, ["item", "onClick", "template", "exact"]))
+                                  exact: $props.exact,
+                                  focusedOptionId: $options.focusedOptionId,
+                                  onItemClick: $options.itemClick
+                                }, null, 8, ["id", "item", "template", "exact", "focusedOptionId", "onItemClick"]))
                         ], 64))
                       }), 128))
-                    ])
-                  ], 16))
+                    ], 40, _hoisted_2)
+                  ], 16, _hoisted_1))
                 : vue.createCommentVNode("", true)
             ]),
             _: 3
@@ -455,4 +643,4 @@ this.primevue.menu = (function (utils, OverlayEventBus, Ripple, vue, Portal) {
 
     return script;
 
-})(primevue.utils, primevue.overlayeventbus, primevue.ripple, Vue, primevue.portal);
+})(primevue.overlayeventbus, primevue.portal, primevue.utils, primevue.ripple, Vue);