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

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

@@ -1,227 +0,0 @@
-'use strict';
-
-var index = require('./index-CDe7nrrW.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;

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

@@ -1,227 +0,0 @@
-'use strict';
-
-var index = require('./index-CEWbQ5nh.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;