primevue 4.2.5 → 4.3.0

package/menubar/index.mjs

@@ -1,6 +1,5 @@
-import { UniqueComponentId } from '@primevue/core/utils';
-import { focus, findSingle, isTouchDevice } from '@primeuix/utils/dom';
-import { resolve, isNotEmpty, isPrintableCharacter, isEmpty, findLastIndex } from '@primeuix/utils/object';
+import { findSingle, isTouchDevice, focus } from '@primeuix/utils/dom';
+import { isNotEmpty, resolve, findLastIndex, isEmpty, isPrintableCharacter } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
 import BarsIcon from '@primevue/icons/bars';
 import BaseComponent from '@primevue/core/basecomponent';
@@ -8,7 +7,7 @@ import MenubarStyle from 'primevue/menubar/style';
 import AngleDownIcon from '@primevue/icons/angledown';
 import AngleRightIcon from '@primevue/icons/angleright';
 import Ripple from 'primevue/ripple';
-import { mergeProps, resolveComponent, resolveDirective, openBlock, createElementBlock, Fragment, renderList, createElementVNode, withDirectives, createBlock, resolveDynamicComponent, normalizeClass, createCommentVNode, toDisplayString, normalizeStyle, renderSlot, createVNode, normalizeProps, guardReactiveProps } from 'vue';
+import { mergeProps, resolveComponent, resolveDirective, createElementBlock, openBlock, Fragment, renderList, createCommentVNode, createElementVNode, createBlock, withDirectives, resolveDynamicComponent, normalizeClass, toDisplayString, normalizeStyle, renderSlot, createVNode, normalizeProps, guardReactiveProps } from 'vue';
 
 var script$2 = {
   name: 'BaseMenubar',
@@ -329,7 +328,6 @@ var script = {
   matchMediaListener: null,
   data: function data() {
     return {
-      id: this.$attrs.id,
       mobileActive: false,
       focused: false,
       focusedItemInfo: {
@@ -344,9 +342,6 @@ var script = {
     };
   },
   watch: {
-    '$attrs.id': function $attrsId(newValue) {
-      this.id = newValue || UniqueComponentId();
-    },
     activeItemPath: function activeItemPath(newPath) {
       if (isNotEmpty(newPath)) {
         this.bindOutsideClickListener();
@@ -361,7 +356,6 @@ var script = {
   container: null,
   menubar: null,
   mounted: function mounted() {
-    this.id = this.id || UniqueComponentId();
     this.bindMatchMediaListener();
   },
   beforeUnmount: function beforeUnmount() {
@@ -741,12 +735,12 @@ var script = {
             _this5.hide();
           }
         };
-        document.addEventListener('click', this.outsideClickListener);
+        document.addEventListener('click', this.outsideClickListener, true);
       }
     },
     unbindOutsideClickListener: function unbindOutsideClickListener() {
       if (this.outsideClickListener) {
-        document.removeEventListener('click', this.outsideClickListener);
+        document.removeEventListener('click', this.outsideClickListener, true);
         this.outsideClickListener = null;
       }
     },
@@ -885,7 +879,7 @@ var script = {
     },
     scrollInView: function scrollInView() {
       var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
-      var id = index !== -1 ? "".concat(this.id, "_").concat(index) : this.focusedItemId;
+      var id = index !== -1 ? "".concat(this.$id, "_").concat(index) : this.focusedItemId;
       var element = findSingle(this.menubar, "li[id=\"".concat(id, "\"]"));
       if (element) {
         element.scrollIntoView && element.scrollIntoView({
@@ -934,7 +928,7 @@ var script = {
       return processedItem ? processedItem.items : this.processedItems;
     },
     focusedItemId: function focusedItemId() {
-      return this.focusedItemInfo.index !== -1 ? "".concat(this.id).concat(isNotEmpty(this.focusedItemInfo.parentKey) ? '_' + this.focusedItemInfo.parentKey : '', "_").concat(this.focusedItemInfo.index) : null;
+      return this.focusedItemInfo.index !== -1 ? "".concat(this.$id).concat(isNotEmpty(this.focusedItemInfo.parentKey) ? '_' + this.focusedItemInfo.parentKey : '', "_").concat(this.focusedItemInfo.index) : null;
     }
   },
   components: {
@@ -945,10 +939,10 @@ var script = {
 
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 var _hoisted_1 = ["aria-haspopup", "aria-expanded", "aria-controls", "aria-label"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_BarsIcon = resolveComponent("BarsIcon");
@@ -960,7 +954,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     key: 0,
     "class": _ctx.cx('start')
   }, _ctx.ptm('start')), [renderSlot(_ctx.$slots, "start")], 16)) : createCommentVNode("", true), renderSlot(_ctx.$slots, _ctx.$slots.button ? 'button' : 'menubutton', {
-    id: $data.id,
+    id: _ctx.$id,
     "class": normalizeClass(_ctx.cx('button')),
     toggleCallback: function toggleCallback(event) {
       return $options.menuButtonClick(event);
@@ -975,7 +969,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       "class": _ctx.cx('button'),
       "aria-haspopup": _ctx.model.length && _ctx.model.length > 0 ? true : false,
       "aria-expanded": $data.mobileActive,
-      "aria-controls": $data.id,
+      "aria-controls": _ctx.$id,
       "aria-label": (_ctx$$primevue$config = _ctx.$primevue.config.locale.aria) === null || _ctx$$primevue$config === void 0 ? void 0 : _ctx$$primevue$config.navigation,
       onClick: _cache[0] || (_cache[0] = function ($event) {
         return $options.menuButtonClick($event);
@@ -988,7 +982,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     })], 16, _hoisted_1)) : createCommentVNode("", true)];
   }), createVNode(_component_MenubarSub, {
     ref: $options.menubarRef,
-    id: $data.id + '_list',
+    id: _ctx.$id + '_list',
     role: "menubar",
     items: $options.processedItems,
     templates: _ctx.$slots,
@@ -996,7 +990,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     mobileActive: $data.mobileActive,
     tabindex: "0",
     "aria-activedescendant": $data.focused ? $options.focusedItemId : undefined,
-    menuId: $data.id,
+    menuId: _ctx.$id,
     focusedItemId: $data.focused ? $options.focusedItemId : undefined,
     activeItemPath: $data.activeItemPath,
     level: 0,