primevue 3.16.2 → 3.18.0

package/menu/menu.cjs.js

@@ -1,65 +1,73 @@
 'use strict';
 
-var utils = require('primevue/utils');
 var OverlayEventBus = require('primevue/overlayeventbus');
+var Portal = require('primevue/portal');
+var utils = require('primevue/utils');
 var Ripple = require('primevue/ripple');
 var vue = require('vue');
-var Portal = require('primevue/portal');
 
 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);
+        },
+        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 });
         },
-        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
-            }];
+        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");
@@ -68,63 +76,71 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   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)
 }
 
@@ -132,14 +148,14 @@ script$1.render = render$1;
 
 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
         },
@@ -158,11 +174,26 @@ var script = {
         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,
@@ -170,6 +201,13 @@ var script = {
     scrollHandler: null,
     resizeListener: null,
     container: null,
+    list: null,
+    mounted() {
+        if (!this.popup) {
+            this.bindResizeListener();
+            this.bindOutsideClickListener();
+        }
+    },
     beforeUnmount() {
         this.unbindResizeListener();
         this.unbindOutsideClickListener();
@@ -178,16 +216,19 @@ var script = {
             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;
             }
@@ -200,13 +241,119 @@ var script = {
                 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;
@@ -226,6 +373,11 @@ var script = {
                 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() {
@@ -246,10 +398,16 @@ var script = {
         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);
             }
         },
@@ -282,6 +440,7 @@ var script = {
                         this.hide();
                     }
                 };
+
                 window.addEventListener('resize', this.resizeListener);
             }
         },
@@ -291,17 +450,14 @@ var script = {
                 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;
@@ -311,34 +467,44 @@ var script = {
                 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, {
@@ -357,11 +523,24 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             ? (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()
@@ -369,29 +548,36 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                       (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)
@@ -400,22 +586,24 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                           ], 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