@mgdis/mg-components 6.3.0 → 6.4.0

package/dist/components/mg-item-more2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { Y as Ye, m as me, t as tt } from './index.es.js';
+import { J as Je } from './index.es.js';
 import { d as defineCustomElement$4, D as Direction, s as sizes } from './mg-menu-item2.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$8 } from './mg-badge2.js';
@@ -10,19 +10,13 @@ import { d as defineCustomElement$3 } from './mg-popover2.js';
 import { d as defineCustomElement$2 } from './mg-popover-content2.js';
 
 /**
- * MgItemMore type guard
- * @param element - element to control type
- * @returns truthy if element is mg-item-more
+ *
  */
-const isMgItemMore = (element) => element.nodeName === 'MG-ITEM-MORE';
-const OverflowBehaviorElements = {
-    BASE_INDEX: 'data-overflow-base-index',
-    PROXY_INDEX: 'data-overflow-proxy-index',
-};
 class OverflowBehavior {
-    constructor(element, render) {
-        this.element = element;
-        this.render = render;
+    constructor(parentElement, itemMoreElement, itemMoreContainerElement) {
+        this.parentElement = parentElement;
+        this.itemMoreElement = itemMoreElement;
+        this.itemMoreContainerElement = itemMoreContainerElement;
         /**********
          * Public *
          **********/
@@ -36,120 +30,63 @@ class OverflowBehavior {
          * Internal *
          ************/
         /**
-         * run overflow behavior
-         * @param width - width of the container. Optional.
-         */
-        this.run = (width) => {
-            if (this._moreElement === undefined) {
-                // set moreElement
-                this._moreElement = this.render();
-                // set children
-                this._baseChildren = this.getInteractiveItems(this.element);
-                if (isMgItemMore(this._moreElement)) {
-                    this._proxyChildren = this.getInteractiveItems(this._moreElement.shadowRoot.querySelector('mg-menu'));
-                }
-                // update children
-                this._baseChildren.forEach((child, index) => {
-                    child.setAttribute(OverflowBehaviorElements.BASE_INDEX, `${index}`);
-                    // set moreElement children
-                    this._proxyChildren[index].setAttribute(OverflowBehaviorElements.PROXY_INDEX, `${index}`);
-                });
-            }
-            if (width !== undefined)
-                this.updateDisplayedItems(width);
-        };
-        /**
-         * Get interactive children filtred by authorized nodeName ['MG-MENU-ITEM', 'MG-BUTTON']
-         * @param element - element to parse
-         * @returns children
-         */
-        this.getInteractiveItems = (element) => { var _a; return (((_a = element.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? Array.from(element.children) : []).filter(element => ['MG-MENU-ITEM', 'MG-BUTTON'].includes(element.nodeName)); };
-        /**
-         * Update displayed items in container from a given available space
-         * @param availableWidth - available width in container to display child items
+         * Utility method to know if element is HTMLMgItemMoreElement
+         * @param element - element to match with 'MORE' element
+         * @returns truthy if element is the 'MORE' element
          */
-        this.updateDisplayedItems = (availableWidth) => {
-            this.restoreItems();
-            const acc = { accWidth: 0, previousItem: null };
-            [...this._baseChildren, this._moreElement].forEach((child) => {
-                acc.accWidth += child.offsetWidth;
-                const hasPreviuosItem = acc.previousItem !== null;
-                const isPreviousItemHidden = hasPreviuosItem && acc.previousItem.hasAttribute('hidden');
-                // if previous item is hidden AND is NOT more element we hide current
-                // OR if item has an overflow we hide current
-                // OR if current item is more element AND have NOT previous hidden items, current more element item is an hidden item
-                // ELSE current is a display item
-                this.toggleItem(child, (isPreviousItemHidden && !this.isMoreElement(child)) || this.isOverflowElement(acc.accWidth, child, availableWidth) || (this.isMoreElement(child) && !isPreviousItemHidden));
-                // update previous item with current item
-                acc.previousItem = child;
-            });
-        };
+        this.isMoreElement = (element) => element === this.itemMoreElement;
         /**
          * Utility method to know if item overflow partialy or totaly in the container
          * @param cumulateWidth - previous sibling elements cumulate width + item width
          * @param item - item HTML element
-         * @param availableWidth - container available width
          * @returns truthy if element is overflow
          */
-        this.isOverflowElement = (cumulateWidth, item, availableWidth) => {
-            if (item.previousElementSibling === null || this.isMoreElement(item))
-                return false;
-            else if (!this.isMoreElement(item.nextElementSibling))
-                return cumulateWidth + this._moreElement.offsetWidth > availableWidth;
-            else
-                return cumulateWidth > availableWidth;
-        };
-        /**
-         * Utility method to know if a given element is the 'MORE' element
-         * @param element - element to match with 'MORE' element
-         * @returns truthy if element is the 'MORE' element
-         */
-        this.isMoreElement = (element) => element.nodeName === 'MG-ITEM-MORE';
-        /**
-         * Toggle display item element
-         * @param item - item to control
-         * @param isHidden - is item hidden
-         */
-        this.toggleItem = (item, isHidden) => {
-            const mgActionMenuindex = Number(item.getAttribute(OverflowBehaviorElements.BASE_INDEX));
-            if (this.isMoreElement(item))
-                this.toggleElement(this._moreElement, isHidden);
-            else if (mgActionMenuindex >= 0) {
-                this.toggleElement(item, isHidden);
-                this.toggleElement(this._proxyChildren[mgActionMenuindex], !isHidden);
+        this.isOverflowElement = (cumulateWidth, item) => {
+            const displayMgItemMore = this.itemMoreContainerElement.children.length > 0;
+            if (!this.isMoreElement(item)) {
+                if (item.nextElementSibling.nodeName !== 'MG-ITEM-MORE' && !displayMgItemMore)
+                    return cumulateWidth + this.itemMoreElement.offsetWidth > this._availableWidth;
+                else
+                    return cumulateWidth > this._availableWidth;
             }
-        };
-        /**
-         * Toggle element's hide attribute
-         * @param element - element to toggle
-         * @param isHidden - element is hidden
-         */
-        this.toggleElement = (element, isHidden) => {
-            if (isHidden)
-                element.setAttribute('hidden', '');
             else
-                element.removeAttribute('hidden');
+                return !displayMgItemMore;
         };
         /**
-         * Remove hidden attributes on all items
+         * Toogle item from isHidden condition
+         * @param item - item to update
+         * @param isHidden - item is hidden
          */
-        this.restoreItems = () => {
-            [...this._baseChildren, this._moreElement].forEach(item => item.removeAttribute('hidden'));
+        this.toggleItem = (item, isHidden) => {
+            if (this.isMoreElement(item) && isHidden)
+                item.setAttribute('hidden', '');
+            else if (this.isMoreElement(item) && !isHidden)
+                item.removeAttribute('hidden');
+            else if (!this.isMoreElement(item) && isHidden)
+                this.itemMoreContainerElement.appendChild(item);
+            else if (!this.isMoreElement(item) && item.parentElement !== this.parentElement)
+                this.parentElement.insertBefore(item, this.itemMoreElement);
         };
-        if (this._resizeObserver === undefined) {
-            // add resize observer
-            this._resizeObserver = new ResizeObserver(entries => {
-                entries.forEach(entry => {
-                    this.run(entry.contentRect.width);
-                });
-            });
-            this._resizeObserver.observe(this.element);
+        if (!this.parentElement || !this.itemMoreElement || !this.itemMoreContainerElement) {
+            throw new Error('OverflowBehavior - all construtor params are required');
         }
-        this.run();
+        const items = Array.from(this.parentElement.children);
+        this._resizeObserver = new ResizeObserver(entries => {
+            this._availableWidth = entries.map(entry => entry.contentRect.width).sort((a, b) => a - b).shift();
+            // reset items
+            items.forEach(item => this.toggleItem(item, false));
+            let accWidth = 0;
+            items.forEach((item, index) => {
+                accWidth += item.offsetWidth;
+                if (index)
+                    this.toggleItem(item, this.isOverflowElement(accWidth, item));
+            });
+        });
+        this._resizeObserver.observe(this.parentElement);
     }
 }
 
-const mgMenuCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}/*!\n * @prop --mg-c-menu-color-background: Defines the background color of the menu. Unset by default, fallback on `--mg-b-color-light`.\n */:host{display:flex;background-color:var(--mg-c-menu-color-background, var(--mg-b-color-light))}:host([direction=vertical]){height:100%;flex-direction:column;overflow-y:auto}";
+const mgMenuCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}/*!\n * @prop --mg-c-menu-color-background: Defines the background color of the menu. Unset by default, fallback on `--mg-b-color-light`.\n */:host{display:inline-flex;width:100%;background-color:var(--mg-c-menu-color-background, var(--mg-b-color-light))}:host([direction=vertical]){display:flex;height:100%;flex-direction:column;overflow-y:auto}";
 const MgMenuStyle0 = mgMenuCss;
 
 const MgMenu = /*@__PURE__*/ proxyCustomElement(class MgMenu extends HTMLElement {
@@ -161,100 +98,78 @@ const MgMenu = /*@__PURE__*/ proxyCustomElement(class MgMenu extends HTMLElement
          * Internal *
          ************/
         this.name = 'mg-menu';
-        this.menuItems = [];
-        this.focusedMenuItem = 0;
-        /*************
-         * Methods *
-         *************/
         /**
-         * Close matching menu-item
-         * @param item - menu-item to close
-         * @param condition - addionnal condition
+         * Component display direction.
          */
-        this.closeMenuItem = (item, condition) => {
-            if (!this.isChildMenu && condition) {
-                item.expanded = false;
-            }
-        };
+        this.direction = Direction.HORIZONTAL;
         /**
-         * get mg-item-more child mg-menu-item element
-         * @returns mg-menu-item element
+         * Define mg-menu size
          */
-        this.getItemMoreMenuItem = () => { var _a, _b; return (_b = (_a = this.itemMoreElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('mg-menu-item'); };
+        this.size = 'medium';
+        /*************
+         * Methods *
+         *************/
         /**
-         * Set item listend
-         * @param item - mg-menu-item element
-         * @param index - number
+         * Test if menu is a child menu
+         * @returns truthy if menu is a child menu
          */
-        this.setItemListener = (item, index) => {
-            ['click', 'focus'].forEach(trigger => {
-                item.shadowRoot.querySelector('button,a').addEventListener(trigger, () => {
-                    this.focusedMenuItem = index;
-                    // reset expanded on previous active menu item
-                    const itemMoreMenuItem = this.getItemMoreMenuItem();
-                    (![null, undefined].includes(itemMoreMenuItem) ? [...this.menuItems, itemMoreMenuItem] : this.menuItems).forEach((item, index) => {
-                        this.closeMenuItem(item, index !== this.focusedMenuItem);
-                    });
-                });
-            });
-        };
+        this.isChildMenu = () => this.element.closest('mg-menu-item') !== null;
         /**
-         * Store menu-items on component init and add listeners
+         * Get menu children items
+         * @returns menu children mg-menu-item
          */
-        this.initMenuItemsListeners = () => {
-            // add listeners on menu item and edit index
-            this.menuItems.forEach((item, index) => {
-                this.setItemListener(item, index);
-            });
+        this.getMenuItems = (menu = this.element) => {
+            var _a, _b;
+            const menuItems = Array.from(menu.children).filter(child => child.nodeName === 'MG-MENU-ITEM');
+            const itemMoreMenuItem = (_b = (_a = menu.querySelector('mg-item-more')) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('mg-menu-item');
+            if (itemMoreMenuItem) {
+                menuItems.push(itemMoreMenuItem);
+            }
+            return menuItems;
         };
         /**
-         * Handle item-loaded event on mg-item-more element
+         * Update menu items
          */
-        this.handleItemLoaded = () => {
-            this.setItemListener(this.getItemMoreMenuItem(), this.menuItems.length);
+        this.updateMenuItems = () => {
+            this.getMenuItems().forEach((item) => {
+                item.dataset.styleDirection = this.direction;
+            });
+            // render mg-item-more to manage OverflowBehavior
+            this.renderMgItemMore();
         };
         /**
          * render mg-item-more
          */
         this.renderMgItemMore = () => {
             var _a;
-            if (this.direction !== Direction.HORIZONTAL || this.isChildMenu || this.element.children.length <= 1) {
+            if (this.direction === Direction.VERTICAL || this.direction === Direction.HORIZONTAL && this.isChildMenu() || this.element.children.length <= 1) {
                 return;
             }
             // Insert mg-item-more outside the mg-menu shadowdom
-            if (this.itemMoreElement === undefined) {
-                this.itemMoreElement = document.createElement('mg-item-more');
-                this.itemMoreElement.addEventListener('item-loaded', this.handleItemLoaded);
-                this.element.appendChild(this.itemMoreElement);
+            let itemMoreElement = this.element.querySelector('mg-item-more');
+            if (itemMoreElement === null) {
+                itemMoreElement = document.createElement('mg-item-more');
+                this.element.appendChild(itemMoreElement);
             }
             // update mg-item-more props
-            for (const attribute in this.itemmore) {
-                const newValue = this.itemmore[attribute];
-                // to improve rendering we use HTML attributes as much as possible
-                if (['string', 'number'].includes(typeof newValue)) {
-                    this.itemMoreElement.setAttribute(attribute, newValue);
-                }
-                else {
-                    this.itemMoreElement[attribute] = newValue;
-                }
+            for (const propertie in this.itemmore) {
+                itemMoreElement[propertie] = this.itemmore[propertie];
             }
             if (((_a = this.itemmore) === null || _a === void 0 ? void 0 : _a.size) === undefined)
-                this.itemMoreElement.size = this.size;
+                itemMoreElement.size = this.size;
         };
-        this.label = undefined;
-        this.direction = Direction.HORIZONTAL;
-        this.itemmore = undefined;
-        this.size = 'medium';
-        this.isChildMenu = undefined;
     }
     validateLabel(newValue) {
         if (newValue === undefined && !this.element.hasAttribute('aria-label')) {
-            throw new Error(`<${this.name}> prop "label" is required. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<${this.name}> prop "label" is required. Passed value: ${Je(newValue)}.`);
         }
     }
     validateDirection(newValue) {
         if (![Direction.VERTICAL, Direction.HORIZONTAL].includes(newValue)) {
-            throw new Error(`<${this.name}> prop "direction" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<${this.name}> prop "direction" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}. Passed value: ${Je(newValue)}.`);
+        }
+        else {
+            this.updateMenuItems();
         }
     }
     validateItemMore(newValue) {
@@ -267,9 +182,30 @@ const MgMenu = /*@__PURE__*/ proxyCustomElement(class MgMenu extends HTMLElement
     }
     validateSize(newValue) {
         if (!sizes.includes(newValue)) {
-            throw new Error(`<${this.name}> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<${this.name}> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${Je(newValue)}.`);
         }
     }
+    /**
+     * Define mg-menu-item listener when they are loaded
+     * @param event - mg-item-loaded "item-loaded" custom event
+     */
+    updateItemListener(event) {
+        const itemToWatch = event.target.nodeName === 'MG-ITEM-MORE' ? event.target.shadowRoot.querySelector('mg-menu-item') : event.target;
+        ['click', 'focus'].forEach(trigger => {
+            itemToWatch.addEventListener(trigger, () => {
+                const focusedItem = event.target.closest('mg-menu').querySelector('[data-has-focus]');
+                // exit process if new focused item in the current menu children
+                if (focusedItem === itemToWatch)
+                    return;
+                // reset expanded on previous active menu item
+                if (focusedItem)
+                    focusedItem.removeAttribute("data-has-focus");
+                // update focusedMenuItem with new value
+                itemToWatch.setAttribute('data-has-focus', 'true');
+            });
+        });
+    }
+    ;
     /*************
      * Lifecycle *
      *************/
@@ -284,37 +220,38 @@ const MgMenu = /*@__PURE__*/ proxyCustomElement(class MgMenu extends HTMLElement
     }
     /**
      * Check if component slots configuration
-     * @returns timeout
      */
     componentDidLoad() {
-        // update props and states after componentDidLoad hook
-        // return a promise to process action only in the FIRST render().
-        // https://stenciljs.com/docs/component-lifecycle#componentwillload
-        return setTimeout(() => {
-            // store all menu-items
-            this.menuItems = Array.from(this.element.children).filter(child => child.nodeName === 'MG-MENU-ITEM');
-            this.isChildMenu = this.element.closest('mg-menu-item') !== null;
-            // add mg-item-more to manage OverflowBehavior
-            // when all props, states and DOM are already rendered we can render the mg-item-more
-            this.renderMgItemMore();
-            // then use mutation observer on children to improve reactivity
-            new MutationObserver(() => {
-                this.renderMgItemMore();
-            }).observe(this.element, { childList: true });
-        });
-    }
-    /**
-     * Add listeners to items
-     */
-    componentDidRender() {
-        this.initMenuItemsListeners();
+        // set menu-items
+        this.updateMenuItems();
+        // add listener to close main menu when focus leave it
+        if (!this.isChildMenu() && this.direction === Direction.HORIZONTAL) {
+            document.addEventListener('focusin', (event) => {
+                const isElementChild = (element) => {
+                    if (element === this.element)
+                        return true;
+                    else if (!element.parentElement)
+                        return false;
+                    else
+                        return isElementChild(element.parentElement);
+                };
+                if (!event.target.closest('mg-menu') || !isElementChild(event.target)) {
+                    const focusedItem = this.element.querySelector('[data-has-focus]');
+                    // reset expanded on previous active menu item
+                    if (focusedItem)
+                        focusedItem.removeAttribute('data-has-focus');
+                }
+            });
+        }
+        // add mutation observer to improve global reactivity
+        new MutationObserver(this.updateMenuItems).observe(this.element, { childList: true });
     }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '550624e40ec66eeb90f8bc4ac1590adcbaa20dfd', role: "list", "aria-label": this.label }, h("slot", { key: 'bf6f5ac748fd45e250c02d93cc7cf72e4580de3b' })));
+        return (h(Host, { key: 'eb78530a80f841391df90167523b6d446cd5405e', role: "list", "aria-label": this.label }, h("slot", { key: '1a8839c831a81915de8a5b03ebe1481a32762217' })));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -328,9 +265,8 @@ const MgMenu = /*@__PURE__*/ proxyCustomElement(class MgMenu extends HTMLElement
         "label": [1],
         "direction": [513],
         "itemmore": [16],
-        "size": [1],
-        "isChildMenu": [32]
-    }, undefined, {
+        "size": [1]
+    }, [[0, "item-loaded", "updateItemListener"]], {
         "label": ["validateLabel"],
         "direction": ["validateDirection"],
         "itemmore": ["validateItemMore"],
@@ -409,86 +345,27 @@ const MgItemMore = /*@__PURE__*/ proxyCustomElement(class MgItemMore extends HTM
          ************/
         this.name = 'mg-item-more';
         /**
-         * Set proxy element properties and listeners
-         * @param proxified - element to proxify from
+         * Define icon
          */
-        this.setProxyElement = (proxified) => {
-            const proxy = this.moreElementMenuItem.querySelector(`[identifier="${proxified.identifier}"]`);
-            if (proxy === null) {
-                return;
-            }
-            // remove proxy id to prevent duplicate key. default html id is: '';
-            if (me(proxy.id))
-                proxy.id = '';
-            const proxyClickHandler = () => {
-                this.parentMenu
-                    .querySelector(`[identifier="${proxy.identifier}"]`)
-                    .shadowRoot.querySelector('a, button')
-                    .dispatchEvent(new MouseEvent('click', { bubbles: true }));
-            };
-            // Watch the `item-updated` event to keep element needeed properties and innerHTML in sync between the proxified and the proxy elements
-            const updateProxy = (element) => {
-                for (const key in element) {
-                    if (['identifier', 'href', 'targer', 'status', 'expanded'].includes(key))
-                        element[key] ? proxy.setAttribute(key, element[key]) : proxy.removeAttribute(key);
-                }
-                proxy.innerHTML = element.innerHTML;
-                // When `href` is updated we need to wait the full component re-render before update its handler
-                setTimeout(() => {
-                    const interactiveElement = proxy.shadowRoot.querySelector('a, button');
-                    interactiveElement === null || interactiveElement === void 0 ? void 0 : interactiveElement.removeEventListener('click', proxyClickHandler);
-                    interactiveElement === null || interactiveElement === void 0 ? void 0 : interactiveElement.addEventListener('click', proxyClickHandler);
-                });
-            };
-            updateProxy(proxified);
-            proxified.addEventListener('item-updated', event => {
-                updateProxy(event.target);
-            });
-            // update click event listener on proxy item and mirror the event on the main menu element
-            // we need to wait mg-menu-item to be loaded to ensure the shadowroot is rendered
-            proxy.addEventListener('item-loaded', () => {
-                updateProxy(proxified);
-            });
-        };
-        /***********
-         * Methods *
-         ***********/
+        this.icon = { icon: 'ellipsis-vertical' };
         /**
-         * render mg-item-more overflow element
-         * @returns mg-item-more element
+         * Define slot label element
          */
-        this.renderMgMenuItemOverflowElement = () => {
-            this.parentMenuItems.forEach((child) => {
-                // create item-more menu items element from main menu-items clones
-                this.moreElementMenuItem.querySelector('mg-menu').appendChild(child.cloneNode(true));
-                // we need to get all `mg-menu-item` linked to the cloned one to set mirror process
-                tt(() => {
-                    this.setProxyElement(child);
-                    if (child.querySelector('mg-menu') !== null) {
-                        child.querySelectorAll('mg-menu-item').forEach(this.setProxyElement);
-                    }
-                });
-            });
-            return this.element;
-        };
-        this.icon = { icon: 'ellipsis-vertical' };
         this.slotlabel = { display: false };
-        this.size = undefined;
-        this.parentMenu = undefined;
     }
     validateIcon(newValue) {
         if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.icon !== 'string'))
-            throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type. Passed value: ${Je(newValue)}.`);
     }
     validateSlotLabel(newValue) {
         if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.display !== 'boolean'))
-            throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type. Passed value: ${Je(newValue)}.`);
         else if (typeof newValue.label !== 'string')
             this.slotlabel.label = this.messages.menuLabel;
     }
     validateSize(newValue) {
         if (newValue && !sizes.includes(newValue))
-            throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type. Passed value: ${Je(newValue)}.`);
     }
     /*************
      * Lifecycle *
@@ -519,8 +396,7 @@ const MgItemMore = /*@__PURE__*/ proxyCustomElement(class MgItemMore extends HTM
      */
     componentDidUpdate() {
         if (this.parentMenu && this.overflowBehavior === undefined) {
-            this.parentMenuItems = Array.from(this.parentMenu.children).filter(item => item.nodeName === 'MG-MENU-ITEM');
-            this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.renderMgMenuItemOverflowElement);
+            this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.element, this.itemMoreContainer);
         }
     }
     /**
@@ -535,11 +411,11 @@ const MgItemMore = /*@__PURE__*/ proxyCustomElement(class MgItemMore extends HTM
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '11c43154129c5756e80db0af3434c88cab2191f3', role: "listitem" }, this.parentMenu && (h("mg-menu-item", { key: '38fc92410328c317fb046f4e1ec4f94175d484fb', "data-overflow-more": true, "data-size": this.parentMenu.size, identifier: "mg-item-more", ref: el => {
-                if (el !== null) {
-                    this.moreElementMenuItem = el;
-                }
-            } }, h("mg-icon", { key: '90e21f30004e38a1a0938359276dccd7458e5e86', icon: this.icon.icon, size: this.size, slot: "image" }), h("span", { key: '20f846c5718a19d39ad94abf59bab54658e1ff9c', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { key: 'b52f97129e736be9164ae18b717057d1bfc0cd0a', direction: Direction.VERTICAL, label: this.messages.menuLabel, size: this.size })))));
+        const menuItemIdentifier = "mg-item-more";
+        return (h(Host, { key: '522fc142a992fa450b2d102e2c053fcd25704dcc', role: "listitem", "data-mg-popover-guard": `${menuItemIdentifier}-popover` }, this.parentMenu && (h("mg-menu-item", { key: 'c05fb5c0379656b9634beca745b3b74d36c8e46c', "data-overflow-more": true, "data-size": this.parentMenu.size, "data-style-direction": Direction.HORIZONTAL, identifier: menuItemIdentifier }, h("mg-icon", { key: 'e40f07ce8c55c30ef79a42ddb973d884ab289427', icon: this.icon.icon, size: this.size, slot: "image" }), h("span", { key: '3b38b9362a023df9e53733bf810c4f37a0016a93', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { key: '4f20389326507261356d897dd25e676ac37ca5bb', direction: Direction.VERTICAL, label: this.messages.menuLabel, size: this.size, ref: (ref) => {
+                if (ref !== null)
+                    this.itemMoreContainer = ref;
+            } })))));
     }
     get element() { return this; }
     static get watchers() { return {