primevue 4.1.0 → 4.2.0

package/listbox/style/index.mjs

@@ -2,15 +2,16 @@ 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-focus {\n    border-color: ").concat(dt('listbox.focus.border.color'), ";\n    box-shadow: ").concat(dt('listbox.focus.ring.shadow'), ";\n    outline: ").concat(dt('listbox.focus.ring.width'), " ").concat(dt('listbox.focus.ring.style'), " ").concat(dt('listbox.focus.ring.color'), ";\n    outline-offset: ").concat(dt('listbox.focus.ring.offset'), ";\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");
+  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 props = _ref2.props;
+    var instance = _ref2.instance,
+      props = _ref2.props;
     return ['p-listbox p-component', {
       'p-listbox-striped': props.striped,
       'p-disabled': props.disabled,
-      'p-invalid': props.invalid
+      'p-invalid': instance.$invalid
     }];
   },
   header: 'p-listbox-header',

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-focus {\n    border-color: ${dt('listbox.focus.border.color')};\n    box-shadow: ${dt('listbox.focus.ring.shadow')};\n    outline: ${dt('listbox.focus.ring.width')} ${dt('listbox.focus.ring.style')} ${dt('listbox.focus.ring.color')};\n    outline-offset: ${dt('listbox.focus.ring.offset')};\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: ({ props }) => [\n        'p-listbox p-component',\n        {\n            'p-listbox-striped': props.striped,\n            'p-disabled': props.disabled,\n            'p-invalid': props.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","props","striped","disabled","invalid","header","pcFilter","listContainer","list","optionGroup","option","_ref3","instance","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 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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"}

package/megamenu/BaseMegaMenu.vue

@@ -26,6 +26,10 @@ export default {
             type: Number,
             default: 0
         },
+        scrollHeight: {
+            type: String,
+            default: '20rem'
+        },
         ariaLabelledby: {
             type: String,
             default: null

package/megamenu/MegaMenu.vue

@@ -43,6 +43,7 @@
             :activeItem="activeItem"
             :mobileActive="mobileActive"
             :level="0"
+            :style="sx('rootList')"
             :pt="pt"
             :unstyled="unstyled"
             @focus="onFocus"
@@ -164,8 +165,8 @@ export default {
             if (this.mobileActive) {
                 this.mobileActive = false;
                 setTimeout(() => {
-                    focus(this.$refs.menubutton);
-                }, 0);
+                    focus(this.$refs.menubutton, { preventScroll: true });
+                }, 1);
             }
 
             this.activeItem = null;
@@ -287,7 +288,10 @@ export default {
                 this.focusedItemInfo = { index, key, parentKey };
 
                 this.dirty = !root;
-                focus(this.menubar);
+
+                if (!this.mobileActive) {
+                    focus(this.menubar, { preventScroll: true });
+                }
             } else {
                 if (grouped) {
                     this.onItemChange(event);
@@ -603,10 +607,16 @@ export default {
         },
         scrollInView(index = -1) {
             const id = index !== -1 ? `${this.id}_${index}` : this.focusedItemId;
-            const element = findSingle(this.menubar, `li[id="${id}"]`);
+            let element;
+
+            if (id === null && this.queryMatches) {
+                element = this.$refs.menubutton;
+            } else {
+                element = findSingle(this.menubar, `li[id="${id}"]`);
+            }
 
             if (element) {
-                element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
+                element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' });
             }
         },
         createProcessedItems(items, level = 0, parent = {}, parentKey = '', columnIndex) {

package/megamenu/index.d.ts

@@ -7,7 +7,7 @@
  * @module megamenu
  *
  */
-import type { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, PassThrough } from '@primevue/core';
+import type { DefineComponent, DesignToken, EmitFn, PassThrough } from '@primevue/core';
 import type { ComponentHooks } from '@primevue/core/basecomponent';
 import type { MenuItem } from 'primevue/menuitem';
 import type { PassThroughOptions } from 'primevue/passthrough';
@@ -261,6 +261,11 @@ export interface MegaMenuProps {
      * Index of the element in tabbing order.
      */
     tabindex?: number | string | undefined;
+    /**
+     * Height of the viewport, a scrollbar is defined if height of list exceeds this value.
+     * @defaultValue 20rem
+     */
+    scrollHeight?: string | undefined;
     /**
      * Defines a string value that labels an interactive element.
      */
@@ -407,7 +412,7 @@ declare const MegaMenu: DefineComponent<MegaMenuProps, MegaMenuSlots, MegaMenuEm
 
 declare module 'vue' {
     export interface GlobalComponents {
-        MegaMenu: GlobalComponentConstructor<MegaMenuProps, MegaMenuSlots, MegaMenuEmits>;
+        MegaMenu: DefineComponent<MegaMenuProps, MegaMenuSlots, MegaMenuEmits>;
     }
 }
 

package/megamenu/index.mjs

@@ -34,6 +34,10 @@ var script$2 = {
       type: Number,
       "default": 0
     },
+    scrollHeight: {
+      type: String,
+      "default": '20rem'
+    },
     ariaLabelledby: {
       type: String,
       "default": null
@@ -444,8 +448,10 @@ var script = {
       if (this.mobileActive) {
         this.mobileActive = false;
         setTimeout(function () {
-          focus(_this2.$refs.menubutton);
-        }, 0);
+          focus(_this2.$refs.menubutton, {
+            preventScroll: true
+          });
+        }, 1);
       }
       this.activeItem = null;
       this.focusedItemInfo = {
@@ -567,7 +573,11 @@ var script = {
           parentKey: parentKey
         };
         this.dirty = !root;
-        focus(this.menubar);
+        if (!this.mobileActive) {
+          focus(this.menubar, {
+            preventScroll: true
+          });
+        }
       } else {
         if (grouped) {
           this.onItemChange(event);
@@ -906,11 +916,17 @@ 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 element = findSingle(this.menubar, "li[id=\"".concat(id, "\"]"));
+      var element;
+      if (id === null && this.queryMatches) {
+        element = this.$refs.menubutton;
+      } else {
+        element = findSingle(this.menubar, "li[id=\"".concat(id, "\"]"));
+      }
       if (element) {
         element.scrollIntoView && element.scrollIntoView({
           block: 'nearest',
-          inline: 'start'
+          inline: 'nearest',
+          behavior: 'smooth'
         });
       }
     },
@@ -1034,6 +1050,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     activeItem: $data.activeItem,
     mobileActive: $data.mobileActive,
     level: 0,
+    style: normalizeStyle(_ctx.sx('rootList')),
     pt: _ctx.pt,
     unstyled: _ctx.unstyled,
     onFocus: $options.onFocus,
@@ -1041,7 +1058,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     onKeydown: $options.onKeyDown,
     onItemClick: $options.onItemClick,
     onItemMouseenter: $options.onItemMouseEnter
-  }, null, 8, ["id", "tabindex", "aria-label", "aria-labelledby", "aria-disabled", "aria-orientation", "aria-activedescendant", "menuId", "focusedItemId", "items", "horizontal", "templates", "activeItem", "mobileActive", "pt", "unstyled", "onFocus", "onBlur", "onKeydown", "onItemClick", "onItemMouseenter"]), _ctx.$slots.end ? (openBlock(), createElementBlock("div", mergeProps({
+  }, null, 8, ["id", "tabindex", "aria-label", "aria-labelledby", "aria-disabled", "aria-orientation", "aria-activedescendant", "menuId", "focusedItemId", "items", "horizontal", "templates", "activeItem", "mobileActive", "style", "pt", "unstyled", "onFocus", "onBlur", "onKeydown", "onItemClick", "onItemMouseenter"]), _ctx.$slots.end ? (openBlock(), createElementBlock("div", mergeProps({
     key: 1,
     "class": _ctx.cx('end')
   }, _ctx.ptm('end')), [renderSlot(_ctx.$slots, "end")], 16)) : createCommentVNode("", true)], 16, _hoisted_1);