primevue 4.2.5 → 4.3.0

package/listbox/style/index.mjs

@@ -1,13 +1,10 @@
+import { style } from '@primeuix/styles/listbox';
 import BaseStyle from '@primevue/core/base/style';
 
-var theme = function theme(_ref) {
-  var dt = _ref.dt;
-  return "\n.p-listbox {\n    background: ".concat(dt('listbox.background'), ";\n    color: ").concat(dt('listbox.color'), ";\n    border: 1px solid ").concat(dt('listbox.border.color'), ";\n    border-radius: ").concat(dt('listbox.border.radius'), ";\n    transition: background ").concat(dt('listbox.transition.duration'), ", color ").concat(dt('listbox.transition.duration'), ", border-color ").concat(dt('listbox.transition.duration'), ",\n            box-shadow ").concat(dt('listbox.transition.duration'), ", outline-color ").concat(dt('listbox.transition.duration'), ";\n    outline-color: transparent;\n    box-shadow: ").concat(dt('listbox.shadow'), ";\n}\n\n.p-listbox.p-disabled {\n    opacity: 1;\n    background: ").concat(dt('listbox.disabled.background'), ";\n    color: ").concat(dt('listbox.disabled.color'), ";\n}\n\n.p-listbox.p-disabled .p-listbox-option {\n    color: ").concat(dt('listbox.disabled.color'), ";\n}\n\n.p-listbox.p-invalid {\n    border-color: ").concat(dt('listbox.invalid.border.color'), ";\n}\n\n.p-listbox-header {\n    padding: ").concat(dt('listbox.list.header.padding'), ";\n}\n\n.p-listbox-filter {\n    width: 100%;\n}\n\n.p-listbox-list-container {\n    overflow: auto;\n}\n\n.p-listbox-list {\n    list-style-type: none;\n    margin: 0;\n    padding: ").concat(dt('listbox.list.padding'), ";\n    outline: 0 none;\n    display: flex;\n    flex-direction: column;\n    gap: ").concat(dt('listbox.list.gap'), ";\n}\n\n.p-listbox-option {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    position: relative;\n    overflow: hidden;\n    padding: ").concat(dt('listbox.option.padding'), ";\n    border: 0 none;\n    border-radius: ").concat(dt('listbox.option.border.radius'), ";\n    color: ").concat(dt('listbox.option.color'), ";\n    transition: background ").concat(dt('listbox.transition.duration'), ", color ").concat(dt('listbox.transition.duration'), ", border-color ").concat(dt('listbox.transition.duration'), ",\n            box-shadow ").concat(dt('listbox.transition.duration'), ", outline-color ").concat(dt('listbox.transition.duration'), ";\n}\n\n.p-listbox-striped li:nth-child(even of .p-listbox-option) {\n    background: ").concat(dt('listbox.option.striped.background'), ";\n}\n\n.p-listbox .p-listbox-list .p-listbox-option.p-listbox-option-selected {\n    background: ").concat(dt('listbox.option.selected.background'), ";\n    color: ").concat(dt('listbox.option.selected.color'), ";\n}\n\n.p-listbox:not(.p-disabled) .p-listbox-option.p-listbox-option-selected.p-focus {\n    background: ").concat(dt('listbox.option.selected.focus.background'), ";\n    color: ").concat(dt('listbox.option.selected.focus.color'), ";\n}\n\n.p-listbox:not(.p-disabled) .p-listbox-option:not(.p-listbox-option-selected):not(.p-disabled).p-focus {\n    background: ").concat(dt('listbox.option.focus.background'), ";\n    color: ").concat(dt('listbox.option.focus.color'), ";\n}\n\n.p-listbox:not(.p-disabled) .p-listbox-option:not(.p-listbox-option-selected):not(.p-disabled):hover {\n    background: ").concat(dt('listbox.option.focus.background'), ";\n    color: ").concat(dt('listbox.option.focus.color'), ";\n}\n\n.p-listbox-option-check-icon {\n    position: relative;\n    margin-inline-start: ").concat(dt('listbox.checkmark.gutter.start'), ";\n    margin-inline-end: ").concat(dt('listbox.checkmark.gutter.end'), ";\n    color: ").concat(dt('listbox.checkmark.color'), ";\n}\n\n.p-listbox-option-group {\n    margin: 0;\n    padding: ").concat(dt('listbox.option.group.padding'), ";\n    color: ").concat(dt('listbox.option.group.color'), ";\n    background: ").concat(dt('listbox.option.group.background'), ";\n    font-weight: ").concat(dt('listbox.option.group.font.weight'), ";\n}\n\n.p-listbox-empty-message {\n    padding: ").concat(dt('listbox.empty.message.padding'), ";\n}\n");
-};
 var classes = {
-  root: function root(_ref2) {
-    var instance = _ref2.instance,
-      props = _ref2.props;
+  root: function root(_ref) {
+    var instance = _ref.instance,
+      props = _ref.props;
     return ['p-listbox p-component', {
       'p-listbox-striped': props.striped,
       'p-disabled': props.disabled,
@@ -19,12 +16,12 @@ var classes = {
   listContainer: 'p-listbox-list-container',
   list: 'p-listbox-list',
   optionGroup: 'p-listbox-option-group',
-  option: function option(_ref3) {
-    var instance = _ref3.instance,
-      props = _ref3.props,
-      _option = _ref3.option,
-      index = _ref3.index,
-      getItemOptions = _ref3.getItemOptions;
+  option: function option(_ref2) {
+    var instance = _ref2.instance,
+      props = _ref2.props,
+      _option = _ref2.option,
+      index = _ref2.index,
+      getItemOptions = _ref2.getItemOptions;
     return ['p-listbox-option', {
       'p-listbox-option-selected': instance.isSelected(_option) && props.highlightOnSelect,
       'p-focus': instance.focusedOptionIndex === instance.getOptionIndex(index, getItemOptions),
@@ -37,7 +34,7 @@ var classes = {
 };
 var ListboxStyle = BaseStyle.extend({
   name: 'listbox',
-  theme: theme,
+  style: style,
   classes: classes
 });
 

package/listbox/style/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/listbox/style/ListboxStyle.js"],"sourcesContent":["import BaseStyle from '@primevue/core/base/style';\n\nconst theme = ({ dt }) => `\n.p-listbox {\n    background: ${dt('listbox.background')};\n    color: ${dt('listbox.color')};\n    border: 1px solid ${dt('listbox.border.color')};\n    border-radius: ${dt('listbox.border.radius')};\n    transition: background ${dt('listbox.transition.duration')}, color ${dt('listbox.transition.duration')}, border-color ${dt('listbox.transition.duration')},\n            box-shadow ${dt('listbox.transition.duration')}, outline-color ${dt('listbox.transition.duration')};\n    outline-color: transparent;\n    box-shadow: ${dt('listbox.shadow')};\n}\n\n.p-listbox.p-disabled {\n    opacity: 1;\n    background: ${dt('listbox.disabled.background')};\n    color: ${dt('listbox.disabled.color')};\n}\n\n.p-listbox.p-disabled .p-listbox-option {\n    color: ${dt('listbox.disabled.color')};\n}\n\n.p-listbox.p-invalid {\n    border-color: ${dt('listbox.invalid.border.color')};\n}\n\n.p-listbox-header {\n    padding: ${dt('listbox.list.header.padding')};\n}\n\n.p-listbox-filter {\n    width: 100%;\n}\n\n.p-listbox-list-container {\n    overflow: auto;\n}\n\n.p-listbox-list {\n    list-style-type: none;\n    margin: 0;\n    padding: ${dt('listbox.list.padding')};\n    outline: 0 none;\n    display: flex;\n    flex-direction: column;\n    gap: ${dt('listbox.list.gap')};\n}\n\n.p-listbox-option {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    position: relative;\n    overflow: hidden;\n    padding: ${dt('listbox.option.padding')};\n    border: 0 none;\n    border-radius: ${dt('listbox.option.border.radius')};\n    color: ${dt('listbox.option.color')};\n    transition: background ${dt('listbox.transition.duration')}, color ${dt('listbox.transition.duration')}, border-color ${dt('listbox.transition.duration')},\n            box-shadow ${dt('listbox.transition.duration')}, outline-color ${dt('listbox.transition.duration')};\n}\n\n.p-listbox-striped li:nth-child(even of .p-listbox-option) {\n    background: ${dt('listbox.option.striped.background')};\n}\n\n.p-listbox .p-listbox-list .p-listbox-option.p-listbox-option-selected {\n    background: ${dt('listbox.option.selected.background')};\n    color: ${dt('listbox.option.selected.color')};\n}\n\n.p-listbox:not(.p-disabled) .p-listbox-option.p-listbox-option-selected.p-focus {\n    background: ${dt('listbox.option.selected.focus.background')};\n    color: ${dt('listbox.option.selected.focus.color')};\n}\n\n.p-listbox:not(.p-disabled) .p-listbox-option:not(.p-listbox-option-selected):not(.p-disabled).p-focus {\n    background: ${dt('listbox.option.focus.background')};\n    color: ${dt('listbox.option.focus.color')};\n}\n\n.p-listbox:not(.p-disabled) .p-listbox-option:not(.p-listbox-option-selected):not(.p-disabled):hover {\n    background: ${dt('listbox.option.focus.background')};\n    color: ${dt('listbox.option.focus.color')};\n}\n\n.p-listbox-option-check-icon {\n    position: relative;\n    margin-inline-start: ${dt('listbox.checkmark.gutter.start')};\n    margin-inline-end: ${dt('listbox.checkmark.gutter.end')};\n    color: ${dt('listbox.checkmark.color')};\n}\n\n.p-listbox-option-group {\n    margin: 0;\n    padding: ${dt('listbox.option.group.padding')};\n    color: ${dt('listbox.option.group.color')};\n    background: ${dt('listbox.option.group.background')};\n    font-weight: ${dt('listbox.option.group.font.weight')};\n}\n\n.p-listbox-empty-message {\n    padding: ${dt('listbox.empty.message.padding')};\n}\n`;\n\nconst classes = {\n    root: ({ instance, props }) => [\n        'p-listbox p-component',\n        {\n            'p-listbox-striped': props.striped,\n            'p-disabled': props.disabled,\n            'p-invalid': instance.$invalid\n        }\n    ],\n    header: 'p-listbox-header',\n    pcFilter: 'p-listbox-filter',\n    listContainer: 'p-listbox-list-container',\n    list: 'p-listbox-list',\n    optionGroup: 'p-listbox-option-group',\n    option: ({ instance, props, option, index, getItemOptions }) => [\n        'p-listbox-option',\n        {\n            'p-listbox-option-selected': instance.isSelected(option) && props.highlightOnSelect,\n            'p-focus': instance.focusedOptionIndex === instance.getOptionIndex(index, getItemOptions),\n            'p-disabled': instance.isOptionDisabled(option)\n        }\n    ],\n    optionCheckIcon: 'p-listbox-option-check-icon',\n    optionBlankIcon: 'p-listbox-option-blank-icon',\n    emptyMessage: 'p-listbox-empty-message'\n};\n\nexport default BaseStyle.extend({\n    name: 'listbox',\n    theme,\n    classes\n});\n"],"names":["theme","_ref","dt","concat","classes","root","_ref2","instance","props","striped","disabled","$invalid","header","pcFilter","listContainer","list","optionGroup","option","_ref3","index","getItemOptions","isSelected","highlightOnSelect","focusedOptionIndex","getOptionIndex","isOptionDisabled","optionCheckIcon","optionBlankIcon","emptyMessage","BaseStyle","extend","name"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../../src/listbox/style/ListboxStyle.js"],"sourcesContent":["import { style } from '@primeuix/styles/listbox';\nimport BaseStyle from '@primevue/core/base/style';\n\nconst classes = {\n    root: ({ instance, props }) => [\n        'p-listbox p-component',\n        {\n            'p-listbox-striped': props.striped,\n            'p-disabled': props.disabled,\n            'p-invalid': instance.$invalid\n        }\n    ],\n    header: 'p-listbox-header',\n    pcFilter: 'p-listbox-filter',\n    listContainer: 'p-listbox-list-container',\n    list: 'p-listbox-list',\n    optionGroup: 'p-listbox-option-group',\n    option: ({ instance, props, option, index, getItemOptions }) => [\n        'p-listbox-option',\n        {\n            'p-listbox-option-selected': instance.isSelected(option) && props.highlightOnSelect,\n            'p-focus': instance.focusedOptionIndex === instance.getOptionIndex(index, getItemOptions),\n            'p-disabled': instance.isOptionDisabled(option)\n        }\n    ],\n    optionCheckIcon: 'p-listbox-option-check-icon',\n    optionBlankIcon: 'p-listbox-option-blank-icon',\n    emptyMessage: 'p-listbox-empty-message'\n};\n\nexport default BaseStyle.extend({\n    name: 'listbox',\n    style,\n    classes\n});\n"],"names":["classes","root","_ref","instance","props","striped","disabled","$invalid","header","pcFilter","listContainer","list","optionGroup","option","_ref2","index","getItemOptions","isSelected","highlightOnSelect","focusedOptionIndex","getOptionIndex","isOptionDisabled","optionCheckIcon","optionBlankIcon","emptyMessage","BaseStyle","extend","name","style"],"mappings":";;;AAGA,IAAMA,OAAO,GAAG;AACZC,EAAAA,IAAI,EAAE,SAANA,IAAIA,CAAAC,IAAA,EAAA;AAAA,IAAA,IAAKC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;MAAEC,KAAK,GAAAF,IAAA,CAALE,KAAK;IAAA,OAAO,CAC3B,uBAAuB,EACvB;MACI,mBAAmB,EAAEA,KAAK,CAACC,OAAO;MAClC,YAAY,EAAED,KAAK,CAACE,QAAQ;MAC5B,WAAW,EAAEH,QAAQ,CAACI;AAC1B,KAAC,CACJ;AAAA,GAAA;AACDC,EAAAA,MAAM,EAAE,kBAAkB;AAC1BC,EAAAA,QAAQ,EAAE,kBAAkB;AAC5BC,EAAAA,aAAa,EAAE,0BAA0B;AACzCC,EAAAA,IAAI,EAAE,gBAAgB;AACtBC,EAAAA,WAAW,EAAE,wBAAwB;AACrCC,EAAAA,MAAM,EAAE,SAARA,MAAMA,CAAAC,KAAA,EAAA;AAAA,IAAA,IAAKX,QAAQ,GAAAW,KAAA,CAARX,QAAQ;MAAEC,KAAK,GAAAU,KAAA,CAALV,KAAK;MAAES,OAAM,GAAAC,KAAA,CAAND,MAAM;MAAEE,KAAK,GAAAD,KAAA,CAALC,KAAK;MAAEC,cAAc,GAAAF,KAAA,CAAdE,cAAc;IAAA,OAAO,CAC5D,kBAAkB,EAClB;MACI,2BAA2B,EAAEb,QAAQ,CAACc,UAAU,CAACJ,OAAM,CAAC,IAAIT,KAAK,CAACc,iBAAiB;AACnF,MAAA,SAAS,EAAEf,QAAQ,CAACgB,kBAAkB,KAAKhB,QAAQ,CAACiB,cAAc,CAACL,KAAK,EAAEC,cAAc,CAAC;AACzF,MAAA,YAAY,EAAEb,QAAQ,CAACkB,gBAAgB,CAACR,OAAM;AAClD,KAAC,CACJ;AAAA,GAAA;AACDS,EAAAA,eAAe,EAAE,6BAA6B;AAC9CC,EAAAA,eAAe,EAAE,6BAA6B;AAC9CC,EAAAA,YAAY,EAAE;AAClB,CAAC;AAED,mBAAeC,SAAS,CAACC,MAAM,CAAC;AAC5BC,EAAAA,IAAI,EAAE,SAAS;AACfC,EAAAA,KAAK,EAALA,KAAK;AACL5B,EAAAA,OAAO,EAAPA;AACJ,CAAC,CAAC;;;;"}

package/megamenu/MegaMenu.vue

@@ -1,10 +1,10 @@
 <template>
-    <div :ref="containerRef" :id="id" :class="cx('root')" v-bind="ptmi('root')">
+    <div :ref="containerRef" :id="$id" :class="cx('root')" v-bind="ptmi('root')">
         <div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
             <slot name="start"></slot>
         </div>
         <!--TODO: menubutton deprecated since v4.0. Use button-->
-        <slot :id="id" :name="$slots.button ? 'button' : 'menubutton'" :class="cx('button')" :toggleCallback="(event) => menuButtonClick(event)">
+        <slot :id="$id" :name="$slots.button ? 'button' : 'menubutton'" :class="cx('button')" :toggleCallback="(event) => menuButtonClick(event)">
             <a
                 v-if="model && model.length > 0"
                 ref="menubutton"
@@ -13,7 +13,7 @@
                 :class="cx('button')"
                 :aria-haspopup="model.length && model.length > 0 ? true : false"
                 :aria-expanded="mobileActive"
-                :aria-controls="id"
+                :aria-controls="$id"
                 :aria-label="$primevue.config.locale.aria?.navigation"
                 @click="menuButtonClick($event)"
                 @keydown="menuButtonKeydown($event)"
@@ -27,7 +27,7 @@
         </slot>
         <MegaMenuSub
             :ref="menubarRef"
-            :id="id + '_list'"
+            :id="$id + '_list'"
             :tabindex="!disabled ? tabindex : -1"
             role="menubar"
             :aria-label="ariaLabel"
@@ -35,7 +35,7 @@
             :aria-disabled="disabled || undefined"
             :aria-orientation="orientation"
             :aria-activedescendant="focused ? focusedItemId : undefined"
-            :menuId="id"
+            :menuId="$id"
             :focusedItemId="focused ? focusedItemId : undefined"
             :items="processedItems"
             :horizontal="horizontal"
@@ -62,7 +62,6 @@
 import { findSingle, focus, isTouchDevice } from '@primeuix/utils/dom';
 import { findLastIndex, isEmpty, isNotEmpty, isPrintableCharacter, resolve } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
-import { UniqueComponentId } from '@primevue/core/utils';
 import BarsIcon from '@primevue/icons/bars';
 import BaseMegaMenu from './BaseMegaMenu.vue';
 import MegaMenuSub from './MegaMenuSub.vue';
@@ -81,7 +80,6 @@ export default {
     searchValue: null,
     data() {
         return {
-            id: this.$attrs.id,
             mobileActive: false,
             focused: false,
             focusedItemInfo: { index: -1, key: '', parentKey: '' },
@@ -92,9 +90,6 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
-        },
         activeItem(newItem) {
             if (isNotEmpty(newItem)) {
                 this.bindOutsideClickListener();
@@ -106,7 +101,6 @@ export default {
         }
     },
     mounted() {
-        this.id = this.id || UniqueComponentId();
         this.bindMatchMediaListener();
     },
     beforeUnmount() {
@@ -469,12 +463,12 @@ export default {
                     }
                 };
 
-                document.addEventListener('click', this.outsideClickListener);
+                document.addEventListener('click', this.outsideClickListener, true);
             }
         },
         unbindOutsideClickListener() {
             if (this.outsideClickListener) {
-                document.removeEventListener('click', this.outsideClickListener);
+                document.removeEventListener('click', this.outsideClickListener, true);
                 this.outsideClickListener = null;
             }
         },
@@ -606,7 +600,7 @@ export default {
             this.scrollInView();
         },
         scrollInView(index = -1) {
-            const id = index !== -1 ? `${this.id}_${index}` : this.focusedItemId;
+            const id = index !== -1 ? `${this.$id}_${index}` : this.focusedItemId;
             let element;
 
             if (id === null && this.queryMatches) {
@@ -675,7 +669,7 @@ export default {
             return this.orientation === 'vertical';
         },
         focusedItemId() {
-            return isNotEmpty(this.focusedItemInfo.key) ? `${this.id}_${this.focusedItemInfo.key}` : null;
+            return isNotEmpty(this.focusedItemInfo.key) ? `${this.$id}_${this.focusedItemInfo.key}` : null;
         }
     },
     components: {

package/megamenu/index.mjs

@@ -1,14 +1,13 @@
-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 { UniqueComponentId } from '@primevue/core/utils';
 import BarsIcon from '@primevue/icons/bars';
 import BaseComponent from '@primevue/core/basecomponent';
 import MegaMenuStyle from 'primevue/megamenu/style';
 import AngleDownIcon from '@primevue/icons/angledown';
 import AngleRightIcon from '@primevue/icons/angleright';
 import Ripple from 'primevue/ripple';
-import { mergeProps, resolveComponent, resolveDirective, openBlock, createElementBlock, toDisplayString, createCommentVNode, Fragment, renderList, createElementVNode, withDirectives, createBlock, resolveDynamicComponent, normalizeClass, normalizeStyle, renderSlot, createVNode, normalizeProps, guardReactiveProps } from 'vue';
+import { mergeProps, resolveComponent, resolveDirective, createElementBlock, openBlock, createCommentVNode, toDisplayString, Fragment, renderList, createElementVNode, withDirectives, createBlock, resolveDynamicComponent, normalizeClass, normalizeStyle, renderSlot, createVNode, normalizeProps, guardReactiveProps } from 'vue';
 
 var script$2 = {
   name: 'BaseMegaMenu',
@@ -355,7 +354,6 @@ var script = {
   searchValue: null,
   data: function data() {
     return {
-      id: this.$attrs.id,
       mobileActive: false,
       focused: false,
       focusedItemInfo: {
@@ -370,9 +368,6 @@ var script = {
     };
   },
   watch: {
-    '$attrs.id': function $attrsId(newValue) {
-      this.id = newValue || UniqueComponentId();
-    },
     activeItem: function activeItem(newItem) {
       if (isNotEmpty(newItem)) {
         this.bindOutsideClickListener();
@@ -384,7 +379,6 @@ var script = {
     }
   },
   mounted: function mounted() {
-    this.id = this.id || UniqueComponentId();
     this.bindMatchMediaListener();
   },
   beforeUnmount: function beforeUnmount() {
@@ -769,12 +763,12 @@ var script = {
             _this3.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;
       }
     },
@@ -914,7 +908,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;
       if (id === null && this.queryMatches) {
         element = this.$refs.menubutton;
@@ -983,7 +977,7 @@ var script = {
       return this.orientation === 'vertical';
     },
     focusedItemId: function focusedItemId() {
-      return isNotEmpty(this.focusedItemInfo.key) ? "".concat(this.id, "_").concat(this.focusedItemInfo.key) : null;
+      return isNotEmpty(this.focusedItemInfo.key) ? "".concat(this.$id, "_").concat(this.focusedItemInfo.key) : null;
     }
   },
   components: {
@@ -999,13 +993,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_MegaMenuSub = resolveComponent("MegaMenuSub");
   return openBlock(), createElementBlock("div", mergeProps({
     ref: $options.containerRef,
-    id: $data.id,
+    id: _ctx.$id,
     "class": _ctx.cx('root')
   }, _ctx.ptmi('root')), [_ctx.$slots.start ? (openBlock(), createElementBlock("div", mergeProps({
     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);
@@ -1020,7 +1014,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);
@@ -1033,7 +1027,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     })], 16, _hoisted_2)) : createCommentVNode("", true)];
   }), createVNode(_component_MegaMenuSub, {
     ref: $options.menubarRef,
-    id: $data.id + '_list',
+    id: _ctx.$id + '_list',
     tabindex: !_ctx.disabled ? _ctx.tabindex : -1,
     role: "menubar",
     "aria-label": _ctx.ariaLabel,
@@ -1041,7 +1035,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-disabled": _ctx.disabled || undefined,
     "aria-orientation": _ctx.orientation,
     "aria-activedescendant": $data.focused ? $options.focusedItemId : undefined,
-    menuId: $data.id,
+    menuId: _ctx.$id,
     focusedItemId: $data.focused ? $options.focusedItemId : undefined,
     items: $options.processedItems,
     horizontal: $options.horizontal,