material-inspired-component-library/components/menu/index.ts

The Material-Inspired Component Library (MICL) offers a collection of beautifully crafted components leveraging native HTML markup, designed to align with the Material Design 3 guidelines.

//
// Copyright © 2025 Hermana AS
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.

export const menuSelector = '.micl-menu[popover]';

export default (() =>
{
    const getOrigin = (invoker: Element, popover: Element): string =>
    {
        const invokerRect = invoker.getBoundingClientRect(),
              popoverRect = popover.getBoundingClientRect();

        return ((invokerRect.x > popoverRect.x) ? 'right ' : 'left ') +
               ((invokerRect.y > popoverRect.y) ? 'bottom' : 'top');
    };

    return {
        initialize: (element: HTMLElement): void =>
        {
            if (
                !element.matches('.micl-menu[popover]')
                || element.dataset.miclinitialized
            ) {
                return;
            }
            element.dataset.miclinitialized = '1';

            const invoker = document.querySelector(`[popovertarget="${element.id}"]`);

            invoker && element.addEventListener('beforetoggle', event =>
            {
                if ((event as ToggleEvent).oldState === 'open') {
                    // The popover is about to be closed.
                    element.style.transformOrigin = getOrigin(invoker, element);
                }
            });
            invoker && element.addEventListener('toggle', event =>
            {
                if ((event as ToggleEvent).oldState === 'closed') {
                    // The popover has just opened.
                    element.style.transformOrigin = getOrigin(invoker, element);
                }
            });

            element.querySelectorAll<HTMLButtonElement>(
                ':scope > ul.micl-list > li > button[popovertarget]'
            ).forEach(submenuinvoker =>
            {
                if (submenuinvoker.popoverTargetElement?.matches('.micl-menu[popover]')) {
                    let hoverTimeout: any,
                        id = `--${submenuinvoker.popoverTargetElement.id}`;

                    if (submenuinvoker.popoverTargetElement instanceof HTMLElement) {
                        submenuinvoker.style.setProperty('anchor-name', id);
                        submenuinvoker.popoverTargetElement.style.insetBlockStart = `anchor(${id} start)`;
                        submenuinvoker.popoverTargetElement.style.insetInlineStart = `anchor(${id} end)`;
                    }

                    submenuinvoker.addEventListener('mouseenter', () =>
                    {
                        if (submenuinvoker.popoverTargetElement instanceof HTMLElement) {
                            submenuinvoker.popoverTargetElement.showPopover();
                        }
                    });
                    submenuinvoker.addEventListener('mouseleave', () =>
                    {
                        hoverTimeout = setTimeout(() => {
                            if (
                                submenuinvoker.popoverTargetElement instanceof HTMLElement
                                && !submenuinvoker.popoverTargetElement.matches(':hover')
                            ) {
                                submenuinvoker.popoverTargetElement.hidePopover();
                            }
                        }, 100);
                    });
                    submenuinvoker.popoverTargetElement.addEventListener('mouseenter', () =>
                    {
                        clearTimeout(hoverTimeout);
                    });
                    submenuinvoker.popoverTargetElement.addEventListener('mouseleave', () =>
                    {
                        if (submenuinvoker.popoverTargetElement instanceof HTMLElement) {
                            submenuinvoker.popoverTargetElement.hidePopover();
                        }
                    });
                }
            });
        }
    };
})();