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

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

@@ -0,0 +1,227 @@
+'use strict';
+
+var index = require('./index-C8UfzrMI.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: '6730d203996374ae1f875271c8a8dfcecbcfe471' }, index.h("slot", { key: 'e3ac0dd17601af87add2b1e36aff9a8176996646', name: "trigger" }), index.h("nv-popover", { key: 'ad1d65fd742aa445e6601587d5bdd45955dc7e93', 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-menuitem.entry-3t6TixM7.js

@@ -0,0 +1,58 @@
+'use strict';
+
+var index = require('./index-CinzsZ8D.js');
+require('react');
+
+const nvMenuitemCss = "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)}";
+const NvMenuitemStyle0 = nvMenuitemCss;
+
+const NvMenuitem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.menuitemSelected = index.createEvent(this, "menuitemSelected");
+        /**
+         * Disables the item, preventing user interaction.
+         */
+        this.disabled = false;
+        /**
+         * If the menu item has a submenu, the a caret icon will be displayed.
+         */
+        this.hasSubmenu = false;
+    }
+    handleMenuItemSelect(event) {
+        // If the element is disabled, stop propagation
+        if (this.disabled) {
+            event.stopPropagation();
+            return;
+        }
+        this.menuitemSelected.emit({
+            id: this.el.id,
+            name: this.name,
+            hasSubmenu: this.hasSubmenu,
+        });
+    }
+    handleClick(event) {
+        this.handleMenuItemSelect(event);
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            const activeElement = document.activeElement;
+            if (activeElement &&
+                activeElement.tagName === 'NV-MENUITEM' &&
+                !activeElement.hasAttribute('has-submenu')) {
+                event.preventDefault();
+                this.el.click();
+            }
+        }
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '2b59ea1b8582c9d5beac1e22c9547bebca9a19c0', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && index.h("nv-icon", { key: 'bd72a3c8ffb0f2bfcecb11017493ee7476a8b34a', name: this.icon }), index.h("slot", { key: 'a3f396ca95fcb14fba1861f641e11abac06c7fe8' }), this.label && index.h("span", { key: 'ffffe933ab348dc617bb2d76f96e6e11e6ea5900', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && index.h("kbd", { key: 'cc76611b2a113cfa309ba3655d5c335d996380b3' }, this.shortcut), this.hasSubmenu && index.h("nv-icon", { key: '3e90fdb722f845e24d6588b604f292dd7ee2ea4a', name: "chevron-right" })));
+    }
+    get el() { return index.getElement(this); }
+};
+NvMenuitem.style = NvMenuitemStyle0;
+
+exports.nv_menuitem = NvMenuitem;

package/dist/cjs/nv-menuitem.entry-BeTXOtir.js

@@ -0,0 +1,58 @@
+'use strict';
+
+var index = require('./index-C8UfzrMI.js');
+require('react');
+
+const nvMenuitemCss = "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)}";
+const NvMenuitemStyle0 = nvMenuitemCss;
+
+const NvMenuitem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.menuitemSelected = index.createEvent(this, "menuitemSelected");
+        /**
+         * Disables the item, preventing user interaction.
+         */
+        this.disabled = false;
+        /**
+         * If the menu item has a submenu, the a caret icon will be displayed.
+         */
+        this.hasSubmenu = false;
+    }
+    handleMenuItemSelect(event) {
+        // If the element is disabled, stop propagation
+        if (this.disabled) {
+            event.stopPropagation();
+            return;
+        }
+        this.menuitemSelected.emit({
+            id: this.el.id,
+            name: this.name,
+            hasSubmenu: this.hasSubmenu,
+        });
+    }
+    handleClick(event) {
+        this.handleMenuItemSelect(event);
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            const activeElement = document.activeElement;
+            if (activeElement &&
+                activeElement.tagName === 'NV-MENUITEM' &&
+                !activeElement.hasAttribute('has-submenu')) {
+                event.preventDefault();
+                this.el.click();
+            }
+        }
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '3a80bda645a8c28a9cc660271d02a0bc3a786f84', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && index.h("nv-icon", { key: '13f890147ad70cbc7134bc4c0036bc23328ae522', name: this.icon }), index.h("slot", { key: 'b5d97c5b7171caf26e7d4592ef711f36e261a382' }), this.label && index.h("span", { key: 'fc763d260c77a61a85847815bfeb27255474ae4d', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && index.h("kbd", { key: '40685c6af8789f943a59c61065786a8f67f9d49b' }, this.shortcut), this.hasSubmenu && index.h("nv-icon", { key: 'ba77aeaaadefddb9bb8403710b1b12ef4a698dee', name: "chevron-right" })));
+    }
+    get el() { return index.getElement(this); }
+};
+NvMenuitem.style = NvMenuitemStyle0;
+
+exports.nv_menuitem = NvMenuitem;