@nova-design-system/nova-react 3.0.0-beta.43 → 3.0.0-beta.44

package/dist/cjs/nv-menu.entry-DtLnsQW-.js

@@ -0,0 +1,227 @@
+'use strict';
+
+var index = require('./index-CIcUUomJ.js');
+require('react');
+
+const nvMenuCss = "nv-menuitem{display:flex;align-items:center;max-width:300px;width:100vw;font-size:var(--menu-contextual-item-font-size);font-weight:var(--menu-contextual-item-font-weight);color:var(--components-menu-contextual-item-content);border-radius:var(--menu-contextual-item-radius);gap:var(--menu-contextual-item-gap-x);padding:var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);transition:background-color 150ms ease-out;cursor:pointer}nv-menuitem:hover,nv-menuitem:focus,nv-menuitem:focus-within{background-color:var(--components-menu-contextual-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-menuitem *{pointer-events:none}nv-menuitem kbd{color:var(--components-menu-contextual-item-shortcut)}nv-menuitem [data-scope=text]{margin-right:auto}nv-menuitem[disabled]:not([disabled=false]){cursor:unset;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}nv-menu{display:inline-block;position:relative}nv-menu:has([fluid]:not([fluid=false])){display:block}nv-menu nv-popover{display:unset}nv-menu nv-popover [data-scope=popover]{background-color:transparent !important;padding:0 !important}nv-menu [slot=content]{padding:var(--menu-contextual-padding-y) var(--menu-contextual-padding-x);border-radius:var(--menu-contextual-radius);gap:var(--menu-contextual-gap-y);background-color:var(--components-menu-contextual-background);border-color:var(--components-menu-contextual-border);display:flex;flex-direction:column}nv-menu nv-menu[open]:not([open=false])>nv-menuitem{background-color:var(--components-menu-contextual-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-menu hr{display:block;margin:var(--menu-contextual-divider-padding-top) var(--menu-contextual-divider-padding-x) var(--menu-contextual-divider-padding-bottom) var(--menu-contextual-divider-padding-x)}";
+const NvMenuStyle0 = nvMenuCss;
+
+const NvMenu = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.menuitemSelected = index.createEvent(this, "menuitemSelected");
+        this.isHandlingKeyDown = false;
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Use this to toggle the initial visibility of the menu, by default the menu
+         * is hidden.
+         */
+        this.open = false;
+        /**
+         * Use this if the menu is nested inside another menu. This will prevent the
+         * parent menu from closing when the child menu is opened.
+         */
+        this.nested = false;
+        /**
+         * Use this to disable the menu from closing automatically when a menu item is
+         * selected.
+         */
+        this.disableCloseOnSelect = false;
+        /**
+         * Decides where the menu shows up next to the button it’s linked to (above,
+         * below, to the sides). If there isn’t enough room, it will adjust its
+         * position on the axis to fit on the screen, so users can always see it.
+         */
+        this.placement = 'bottom-end';
+        /**
+         * Parsed items stored in state.
+         */
+        this.parsedItems = [];
+    }
+    /**
+     * Watcher to parse the items when the `items` property changes.
+     * @param {string} newValue - The new value of the `items` property.
+     */
+    handleItemsChange(newValue) {
+        if (typeof newValue === 'string') {
+            try {
+                this.parsedItems = JSON.parse(newValue);
+            }
+            catch (error) {
+                console.error('Error parsing menu items:', error);
+                this.parsedItems = [];
+            }
+        }
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Opens the menu.
+     */
+    async show() {
+        this.open = true;
+    }
+    /**
+     * Closes the menu.
+     */
+    async close() {
+        this.open = false;
+    }
+    handleMenuItemSelect(event) {
+        if (this.disableCloseOnSelect)
+            return;
+        if (event.detail.hasSubmenu)
+            return;
+        this.open = false;
+    }
+    handleKeydown(event) {
+        // If the menu is not open, check if the trigger is focused
+        // and the user presses Enter or ArrowDown, open the menu
+        if (!this.open) {
+            if ((event.key === 'Enter' ||
+                event.key === 'ArrowDown' ||
+                event.key === ' ') &&
+                document.activeElement === this.triggerElement) {
+                event.preventDefault();
+                this.show();
+                // Then, put the focus on the first menuitem
+                const firstMenuItem = this.popoverElement.querySelector('nv-menuitem');
+                if (firstMenuItem) {
+                    requestAnimationFrame(() => firstMenuItem.focus());
+                }
+            }
+            return;
+        }
+        if (this.isHandlingKeyDown)
+            return;
+        this.isHandlingKeyDown = true;
+        if (event.key === 'ArrowDown' ||
+            event.key === 'ArrowUp' ||
+            event.key === 'ArrowLeft' ||
+            event.key === 'ArrowRight' ||
+            event.key === 'Escape') {
+            event.preventDefault();
+        }
+        if (event.key === 'Escape' && !this.nested) {
+            this.close();
+            this.triggerElement.focus();
+            this.isHandlingKeyDown = false;
+            return;
+        }
+        const menuContent = this.el.querySelector('[slot="content"]');
+        const menuItems = Array.from(menuContent.childNodes).filter(item => { var _a; return (_a = item.matches) === null || _a === void 0 ? void 0 : _a.call(item, 'nv-menuitem, nv-menu'); });
+        let currentIndex = menuItems.indexOf(document.activeElement);
+        if (currentIndex === -1)
+            currentIndex = menuItems.indexOf(document.activeElement.parentElement);
+        if (currentIndex === -1 &&
+            menuItems.find(item => item.matches('nv-menu[open]'))) {
+            this.isHandlingKeyDown = false;
+            return;
+        }
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            menuItems.forEach(item => {
+                if (item.matches('nv-menu'))
+                    item.close();
+            });
+        }
+        if (event.key === 'ArrowDown') {
+            let nextIndex = (currentIndex + 1) % menuItems.length;
+            while (menuItems[nextIndex].matches('nv-menuitem[disabled]')) {
+                nextIndex = (nextIndex + 1) % menuItems.length;
+            }
+            const nextFocusable = menuItems[nextIndex];
+            if (nextFocusable.matches('nv-menuitem')) {
+                nextFocusable.focus();
+            }
+            else if (nextFocusable.matches('nv-menu')) {
+                nextFocusable.querySelector('nv-menuitem').focus();
+            }
+        }
+        if (event.key === 'ArrowUp') {
+            let prevIndex = (currentIndex - 1 + menuItems.length) % menuItems.length;
+            while (menuItems[prevIndex].matches('nv-menuitem[disabled]')) {
+                prevIndex = (prevIndex - 1 + menuItems.length) % menuItems.length;
+            }
+            const prevFocusable = menuItems[prevIndex];
+            if (prevFocusable.matches('nv-menuitem')) {
+                prevFocusable.focus();
+            }
+            else if (prevFocusable.matches('nv-menu')) {
+                prevFocusable.querySelector('nv-menuitem').focus();
+            }
+        }
+        if (event.key === 'ArrowRight') {
+            const submenu = menuItems[currentIndex];
+            if (!submenu.matches('nv-menu')) {
+                this.isHandlingKeyDown = false;
+                return;
+            }
+            submenu.show();
+        }
+        if (event.key === 'ArrowLeft' && this.nested) {
+            if (menuItems.find(item => item.matches('nv-menu[open]'))) {
+                this.isHandlingKeyDown = false;
+                return;
+            }
+            this.close();
+            this.triggerElement.focus();
+        }
+        this.isHandlingKeyDown = false;
+    }
+    handleOpenChanged(event) {
+        if (event.target === this.el.querySelector('nv-popover')) {
+            this.open = event.detail;
+        }
+        const triggerHasFocus = this.triggerElement === document.activeElement;
+        const triggerHasFocusVisible = this.triggerElement.matches(':focus-visible');
+        if (triggerHasFocus && triggerHasFocusVisible)
+            this.focusFirstItem();
+    }
+    focusFirstItem() {
+        const firstButton = this.popoverElement.querySelector('nv-menuitem');
+        if (firstButton) {
+            requestAnimationFrame(() => firstButton.focus());
+        }
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        this.triggerElement = Array.from(this.el.children).find(child => {
+            return child.getAttribute('slot') === 'trigger';
+        });
+        // If the items attribute is provided, parse its value.
+        if (this.items) {
+            this.handleItemsChange(this.items);
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    /**
+     * Generates menu items from the `items` property.
+     * @param {MenuItem[]} items - The items to display in the menu.
+     * @returns {HTMLElement[]} The rendered items.
+     */
+    renderMenuItems(items) {
+        return items.map(item => {
+            var _a;
+            if (item.hasSubmenu && ((_a = item.submenuItems) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                return (index.h("nv-menu", { nested: true, placement: "right-start", items: JSON.stringify(item.submenuItems) }, index.h("nv-menuitem", { slot: "trigger", "has-submenu": true, disabled: item.disabled, icon: item.icon, shortcut: item.shortcut, id: item.value, name: item.label, label: item.label })));
+            }
+            return (index.h("nv-menuitem", { disabled: item.disabled, icon: item.icon, shortcut: item.shortcut, id: item.value, name: item.label, label: item.label }));
+        });
+    }
+    render() {
+        return (index.h(index.Host, { key: '848044034b707f29f791fa984cc51b606498b162' }, index.h("slot", { key: '385c9081f84034215745ea79d096cf8e3cebbf8e', name: "trigger" }), index.h("nv-popover", { key: 'b47a09258a76f608e0eba173039ec8ec49b6186a', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, this.parsedItems.length > 0 ? (index.h("ul", { slot: "content" }, this.renderMenuItems(this.parsedItems))) : (index.h("slot", { name: "content" })))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "items": ["handleItemsChange"]
+    }; }
+};
+NvMenu.style = NvMenuStyle0;
+
+exports.nv_menu = NvMenu;

package/dist/cjs/nv-menu.entry-Kz5kGi2w.js

@@ -0,0 +1,227 @@
+'use strict';
+
+var index = require('./index-CtI3SivD.js');
+require('react');
+
+const nvMenuCss = "nv-menuitem{display:flex;align-items:center;max-width:300px;width:100vw;font-size:var(--menu-contextual-item-font-size);font-weight:var(--menu-contextual-item-font-weight);color:var(--components-menu-contextual-item-content);border-radius:var(--menu-contextual-item-radius);gap:var(--menu-contextual-item-gap-x);padding:var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);transition:background-color 150ms ease-out;cursor:pointer}nv-menuitem:hover,nv-menuitem:focus,nv-menuitem:focus-within{background-color:var(--components-menu-contextual-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-menuitem *{pointer-events:none}nv-menuitem kbd{color:var(--components-menu-contextual-item-shortcut)}nv-menuitem [data-scope=text]{margin-right:auto}nv-menuitem[disabled]:not([disabled=false]){cursor:unset;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}nv-menu{display:inline-block;position:relative}nv-menu:has([fluid]:not([fluid=false])){display:block}nv-menu nv-popover{display:unset}nv-menu nv-popover [data-scope=popover]{background-color:transparent !important;padding:0 !important}nv-menu [slot=content]{padding:var(--menu-contextual-padding-y) var(--menu-contextual-padding-x);border-radius:var(--menu-contextual-radius);gap:var(--menu-contextual-gap-y);background-color:var(--components-menu-contextual-background);border-color:var(--components-menu-contextual-border);display:flex;flex-direction:column}nv-menu nv-menu[open]:not([open=false])>nv-menuitem{background-color:var(--components-menu-contextual-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-menu hr{display:block;margin:var(--menu-contextual-divider-padding-top) var(--menu-contextual-divider-padding-x) var(--menu-contextual-divider-padding-bottom) var(--menu-contextual-divider-padding-x)}";
+const NvMenuStyle0 = nvMenuCss;
+
+const NvMenu = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.menuitemSelected = index.createEvent(this, "menuitemSelected");
+        this.isHandlingKeyDown = false;
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Use this to toggle the initial visibility of the menu, by default the menu
+         * is hidden.
+         */
+        this.open = false;
+        /**
+         * Use this if the menu is nested inside another menu. This will prevent the
+         * parent menu from closing when the child menu is opened.
+         */
+        this.nested = false;
+        /**
+         * Use this to disable the menu from closing automatically when a menu item is
+         * selected.
+         */
+        this.disableCloseOnSelect = false;
+        /**
+         * Decides where the menu shows up next to the button it’s linked to (above,
+         * below, to the sides). If there isn’t enough room, it will adjust its
+         * position on the axis to fit on the screen, so users can always see it.
+         */
+        this.placement = 'bottom-end';
+        /**
+         * Parsed items stored in state.
+         */
+        this.parsedItems = [];
+    }
+    /**
+     * Watcher to parse the items when the `items` property changes.
+     * @param {string} newValue - The new value of the `items` property.
+     */
+    handleItemsChange(newValue) {
+        if (typeof newValue === 'string') {
+            try {
+                this.parsedItems = JSON.parse(newValue);
+            }
+            catch (error) {
+                console.error('Error parsing menu items:', error);
+                this.parsedItems = [];
+            }
+        }
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Opens the menu.
+     */
+    async show() {
+        this.open = true;
+    }
+    /**
+     * Closes the menu.
+     */
+    async close() {
+        this.open = false;
+    }
+    handleMenuItemSelect(event) {
+        if (this.disableCloseOnSelect)
+            return;
+        if (event.detail.hasSubmenu)
+            return;
+        this.open = false;
+    }
+    handleKeydown(event) {
+        // If the menu is not open, check if the trigger is focused
+        // and the user presses Enter or ArrowDown, open the menu
+        if (!this.open) {
+            if ((event.key === 'Enter' ||
+                event.key === 'ArrowDown' ||
+                event.key === ' ') &&
+                document.activeElement === this.triggerElement) {
+                event.preventDefault();
+                this.show();
+                // Then, put the focus on the first menuitem
+                const firstMenuItem = this.popoverElement.querySelector('nv-menuitem');
+                if (firstMenuItem) {
+                    requestAnimationFrame(() => firstMenuItem.focus());
+                }
+            }
+            return;
+        }
+        if (this.isHandlingKeyDown)
+            return;
+        this.isHandlingKeyDown = true;
+        if (event.key === 'ArrowDown' ||
+            event.key === 'ArrowUp' ||
+            event.key === 'ArrowLeft' ||
+            event.key === 'ArrowRight' ||
+            event.key === 'Escape') {
+            event.preventDefault();
+        }
+        if (event.key === 'Escape' && !this.nested) {
+            this.close();
+            this.triggerElement.focus();
+            this.isHandlingKeyDown = false;
+            return;
+        }
+        const menuContent = this.el.querySelector('[slot="content"]');
+        const menuItems = Array.from(menuContent.childNodes).filter(item => { var _a; return (_a = item.matches) === null || _a === void 0 ? void 0 : _a.call(item, 'nv-menuitem, nv-menu'); });
+        let currentIndex = menuItems.indexOf(document.activeElement);
+        if (currentIndex === -1)
+            currentIndex = menuItems.indexOf(document.activeElement.parentElement);
+        if (currentIndex === -1 &&
+            menuItems.find(item => item.matches('nv-menu[open]'))) {
+            this.isHandlingKeyDown = false;
+            return;
+        }
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            menuItems.forEach(item => {
+                if (item.matches('nv-menu'))
+                    item.close();
+            });
+        }
+        if (event.key === 'ArrowDown') {
+            let nextIndex = (currentIndex + 1) % menuItems.length;
+            while (menuItems[nextIndex].matches('nv-menuitem[disabled]')) {
+                nextIndex = (nextIndex + 1) % menuItems.length;
+            }
+            const nextFocusable = menuItems[nextIndex];
+            if (nextFocusable.matches('nv-menuitem')) {
+                nextFocusable.focus();
+            }
+            else if (nextFocusable.matches('nv-menu')) {
+                nextFocusable.querySelector('nv-menuitem').focus();
+            }
+        }
+        if (event.key === 'ArrowUp') {
+            let prevIndex = (currentIndex - 1 + menuItems.length) % menuItems.length;
+            while (menuItems[prevIndex].matches('nv-menuitem[disabled]')) {
+                prevIndex = (prevIndex - 1 + menuItems.length) % menuItems.length;
+            }
+            const prevFocusable = menuItems[prevIndex];
+            if (prevFocusable.matches('nv-menuitem')) {
+                prevFocusable.focus();
+            }
+            else if (prevFocusable.matches('nv-menu')) {
+                prevFocusable.querySelector('nv-menuitem').focus();
+            }
+        }
+        if (event.key === 'ArrowRight') {
+            const submenu = menuItems[currentIndex];
+            if (!submenu.matches('nv-menu')) {
+                this.isHandlingKeyDown = false;
+                return;
+            }
+            submenu.show();
+        }
+        if (event.key === 'ArrowLeft' && this.nested) {
+            if (menuItems.find(item => item.matches('nv-menu[open]'))) {
+                this.isHandlingKeyDown = false;
+                return;
+            }
+            this.close();
+            this.triggerElement.focus();
+        }
+        this.isHandlingKeyDown = false;
+    }
+    handleOpenChanged(event) {
+        if (event.target === this.el.querySelector('nv-popover')) {
+            this.open = event.detail;
+        }
+        const triggerHasFocus = this.triggerElement === document.activeElement;
+        const triggerHasFocusVisible = this.triggerElement.matches(':focus-visible');
+        if (triggerHasFocus && triggerHasFocusVisible)
+            this.focusFirstItem();
+    }
+    focusFirstItem() {
+        const firstButton = this.popoverElement.querySelector('nv-menuitem');
+        if (firstButton) {
+            requestAnimationFrame(() => firstButton.focus());
+        }
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        this.triggerElement = Array.from(this.el.children).find(child => {
+            return child.getAttribute('slot') === 'trigger';
+        });
+        // If the items attribute is provided, parse its value.
+        if (this.items) {
+            this.handleItemsChange(this.items);
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    /**
+     * Generates menu items from the `items` property.
+     * @param {MenuItem[]} items - The items to display in the menu.
+     * @returns {HTMLElement[]} The rendered items.
+     */
+    renderMenuItems(items) {
+        return items.map(item => {
+            var _a;
+            if (item.hasSubmenu && ((_a = item.submenuItems) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                return (index.h("nv-menu", { nested: true, placement: "right-start", items: JSON.stringify(item.submenuItems) }, index.h("nv-menuitem", { slot: "trigger", "has-submenu": true, disabled: item.disabled, icon: item.icon, shortcut: item.shortcut, id: item.value, name: item.label, label: item.label })));
+            }
+            return (index.h("nv-menuitem", { disabled: item.disabled, icon: item.icon, shortcut: item.shortcut, id: item.value, name: item.label, label: item.label }));
+        });
+    }
+    render() {
+        return (index.h(index.Host, { key: 'acc2b78005a96fcd2e6c9e48d17134fcaa6c1e6e' }, index.h("slot", { key: '5eaa8c9d60eacf51e5da09804f0fcd7ef93b8249', name: "trigger" }), index.h("nv-popover", { key: 'd5e1dbe20c617b6d72abbc12f7fe578396690f69', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, this.parsedItems.length > 0 ? (index.h("ul", { slot: "content" }, this.renderMenuItems(this.parsedItems))) : (index.h("slot", { name: "content" })))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "items": ["handleItemsChange"]
+    }; }
+};
+NvMenu.style = NvMenuStyle0;
+
+exports.nv_menu = NvMenu;