@nova-design-system/nova-react 3.22.0 → 3.24.0

package/dist/cjs/{nv-dialog.entry-CDSK9pUH.js → index.esm-D3eWMME9-CG1TVKfu.js}

@@ -1,16 +1,5 @@
 'use strict';
 
-var index = require('./index-WPRkQD3O.js');
-var grow_animation24ad5cf8 = require('./grow.animation-24ad5cf8-LUp_ITEx.js');
-var fade_animation9b939939 = require('./fade.animation-9b939939-DV--bM4S.js');
-require('./style-value-types.es-f5d10b79-D0QCM8OB.js');
-var timeline_animation79215cd4 = require('./timeline.animation-79215cd4-KteJaZPb.js');
-var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
-var constants69bafca2 = require('./constants-69bafca2-DpB_ghPF.js');
-var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
-require('react');
-require('react-dom');
-
 /*!
 * tabbable 6.2.0
 * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
@@ -545,288 +534,4 @@ var tabbable = function tabbable(container, options) {
   return sortByOrder(candidates);
 };
 
-const nvDialogCss = "nv-dialog dialog{width:100vw;height:100svh;margin:0;max-height:unset;max-width:unset;padding:0;background:color-mix(in srgb, var(--components-overlay-background) 70%, transparent);backdrop-filter:blur(4px)}nv-dialog dialog.full .content{min-width:90vw;width:90vw;max-width:90vw}nv-dialog .backdrop{display:flex;min-height:100%;padding:var(--spacing-3);box-shadow:0px var(--shadow-y-axis-2xl) var(--shadow-blur-2xl) var(--shadow-spread-2xl) var(--shadow-color-opacity-3) var(--shadow-color-opacity-3)}nv-dialog .backdrop .content{border-radius:var(--radius-rounded-2xl);background:var(--color-level-00-background);min-width:min(90vw, 400px);width:fit-content;max-width:clamp(90vw, min(90vw, 960px), 960px);margin:auto;display:flex;flex-direction:column;align-items:flex-start;height:fit-content;position:relative}nv-dialog .backdrop .content nv-button.close-button{position:absolute;top:var(--dialog-dismissible-position-top);right:var(--dialog-dismissible-position-right);display:flex;padding:var(--button-sm-icon-button-padding);justify-content:flex-end;align-items:flex-start;gap:10px}nv-dialog .backdrop .content .content-body{box-sizing:border-box;padding:var(--dialog-body-padding-y) var(--dialog-body-padding-x);scrollbar-gutter:stable both-edges;font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--line-height-base);color:var(--color-content-medium-text);width:100%}nv-dialog .backdrop .content .content-body::-webkit-scrollbar{width:6px;height:6px}nv-dialog .backdrop .content .content-body::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-dialog .backdrop .content .content-body::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}";
-const NvDialogStyle0 = nvDialogCss;
-
-const NvDialog = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.openChanged = index.createEvent(this, "openChanged");
-        this.eventsAttached = false;
-        this.triggerClickEvents = [
-            ['click', this.show],
-            [
-                'keydown',
-                (e) => {
-                    if (e.key === 'Enter' || e.key === ' ') {
-                        e.preventDefault();
-                        this.show();
-                    }
-                },
-            ],
-        ];
-        /**
-         * Use this prop to toggle the visibility of the dialog. Set to true to show
-         * the dialog and false to hide it.
-         */
-        this.open = false;
-        /**
-         * If true, the dialog cannot be closed by the user.
-         */
-        this.undismissable = false;
-        /**
-         * If true, the dialog will be closed when the backdrop is clicked.
-         */
-        this.clickOutside = false;
-        /**
-         * If true, the dialog visibility is managed manually through methods or the
-         * open prop.
-         */
-        this.controlled = false;
-        /**
-         * If true, the dialog takes full width styling.
-         */
-        this.full = false;
-        /**
-         * Controls whether the dialog should automatically focus the first focusable
-         * element when opened. When disabled, prevents unwanted tooltip triggers on
-         * dialog open.
-         */
-        this.autofocus = false;
-        /**
-         * Checks for and sets up form ID if a form is present
-         */
-        this.checkForForm = () => {
-            if (!this.form) {
-                const formElement = this.el.querySelector('form');
-                if (formElement) {
-                    this.form = this.ensureFormId(formElement);
-                }
-            }
-        };
-        /**
-         * Handles the native dialog close event.
-         */
-        this.handleDialogClose = () => {
-            if (this.open) {
-                this.close();
-            }
-        };
-        /**
-         * Handles the click event to close the dialog when clickOutside is true.
-         * @param {MouseEvent} event - The click event.
-         */
-        this.handleDialogClick = (event) => {
-            if (!this.clickOutside || this.undismissable)
-                return;
-            if (this.checkForOpenPopovers())
-                return;
-            if (event.target === this.backdropElement) {
-                this.close();
-                event.preventDefault();
-                event.stopPropagation();
-            }
-        };
-        this.checkForOpenPopovers = () => {
-            let hasOpenPopover = false;
-            this.el.querySelectorAll('nv-popover').forEach(popover => {
-                if (popover.hasAttribute('open')) {
-                    hasOpenPopover = true;
-                }
-            });
-            return hasOpenPopover;
-        };
-    }
-    //#endregion PROPERTIES
-    /****************************************************************************/
-    //#region METHODS
-    /**
-     * Call this method to show the dialog, making it visible on the screen.
-     */
-    async show() {
-        this.open = true;
-        this.preventScroll();
-        /** It is recommended to use the .show() or .showModal() method to render
-         * dialogs, rather than the open attribute. If a <dialog> is opened using
-         * the open attribute, it is non-modal. */
-        const { setFadeOut } = fade_animation9b939939.useFade(this.dialogElement);
-        setFadeOut();
-        this.dialogElement.showModal();
-        const { setGrowIn, growIn } = grow_animation24ad5cf8.useGrow(this.contentElement, {
-            duration: 100,
-            amount: 0.9,
-        });
-        const { fadeIn } = fade_animation9b939939.useFade(this.dialogElement, {
-            duration: 100,
-        });
-        setGrowIn();
-        await timeline_animation79215cd4.parallel(fadeIn, growIn).start();
-    }
-    /**
-     * Call this method to hide the dialog, making it disappear from view.
-     */
-    async close() {
-        this.open = false;
-        this.allowScroll();
-        const { growOut } = grow_animation24ad5cf8.useGrow(this.contentElement, {
-            duration: 150,
-            amount: 0.85,
-        });
-        const { fadeOut } = fade_animation9b939939.useFade(this.dialogElement, {
-            duration: 150,
-        });
-        await timeline_animation79215cd4.parallel(growOut, fadeOut).start();
-        this.dialogElement.close();
-    }
-    /**
-     * Sets the autofocus on the first focusable element in the dialog.
-     */
-    setAutofocus() {
-        const focusableElements = tabbable(this.dialogElement, {
-            displayCheck: 'none',
-        });
-        if (focusableElements.length > 0) {
-            // Convert to array and find element with smallest top and left position
-            let topLeftElement = focusableElements[0];
-            let topLeftRect = topLeftElement.getBoundingClientRect();
-            focusableElements.forEach(element => {
-                const rect = element.getBoundingClientRect();
-                if (rect.top < topLeftRect.top || rect.left < topLeftRect.left) {
-                    topLeftElement = element;
-                    topLeftRect = rect;
-                }
-            });
-            // Set autofocus attribute on the found element
-            topLeftElement.setAttribute('autofocus', 'true');
-        }
-    }
-    /**
-     * Attaches event listeners to the dialog.
-     */
-    attachEventListeners() {
-        if (this.triggerElement && !this.eventsAttached && !this.controlled) {
-            grow_animation24ad5cf8.addEventListeners(this.triggerClickEvents, this.triggerElement, this);
-            this.eventsAttached = true;
-        }
-    }
-    /**
-     * Prevents the body from scrolling when the dialog is open.
-     * Compensates for scrollbar width to prevent layout shift.
-     */
-    preventScroll() {
-        // Calculate scrollbar width
-        const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
-        // Apply overflow hidden and padding compensation
-        document.documentElement.style.overflow = 'hidden';
-        document.documentElement.style.paddingRight = `${scrollBarWidth}px`;
-    }
-    /**
-     * Allows the body to scroll when the dialog is closed.
-     * Removes the applied overflow and padding styles.
-     */
-    allowScroll() {
-        // Remove the applied styles
-        document.documentElement.style.removeProperty('overflow');
-        document.documentElement.style.removeProperty('padding-right');
-    }
-    ensureFormId(formElement) {
-        if (!formElement.id) {
-            formElement.id = `dialog-form-${v4A79185f4.v4()}`;
-        }
-        return formElement.id;
-    }
-    //#endregion EVENTS
-    /****************************************************************************/
-    //#region WATCHERS
-    async handleDialogOpenChange(isOpen) {
-        if (isOpen) {
-            this.show();
-            this.openChanged.emit(isOpen);
-        }
-        else {
-            this.close();
-            this.openChanged.emit(isOpen);
-        }
-    }
-    //#endregion WATCHERS
-    /****************************************************************************/
-    //#region LISTENERS
-    /**
-     * Handles the keydown event to optionally prevent the native dialog from closing when the escape key is pressed.
-     * @param {KeyboardEvent} event - The keydown event.
-     */
-    handleKeyDown(event) {
-        if (event.key !== 'Escape')
-            return;
-        if (!this.open)
-            return;
-        event.preventDefault();
-        event.stopPropagation();
-        const hasOpenPopover = this.checkForOpenPopovers();
-        if (!this.undismissable && !hasOpenPopover) {
-            event.preventDefault();
-            event.stopPropagation();
-            this.close();
-        }
-    }
-    //#endregion LISTENERS
-    /****************************************************************************/
-    //#region LIFECYCLE
-    /**
-     * Lifecycle method that runs before the component loads.
-     * Initializes the trigger, header, and footer elements by finding them in the component's children.
-     * Elements are found either by their slot attribute or by their tag name (for dialog header/footer)
-     */
-    componentWillLoad() {
-        this.triggerElement = Array.from(this.el.children).find(child => {
-            return child.getAttribute('slot') === 'trigger';
-        });
-        this.headerElement = Array.from(this.el.children).find(child => {
-            return (child.getAttribute('slot') === 'header' ||
-                child.tagName.toLowerCase() === 'nv-dialogheader');
-        });
-        this.footerElement = Array.from(this.el.children).find(child => {
-            return (child.getAttribute('slot') === 'footer' ||
-                child.tagName.toLowerCase() === 'nv-dialogfooter');
-        });
-        // Initial form check
-        this.checkForForm();
-    }
-    componentWillUpdate() {
-        this.attachEventListeners();
-    }
-    componentDidLoad() {
-        if (this.open) {
-            this.show();
-        }
-        // Only set autofocus if the prop is true and no element already has autofocus
-        if (this.autofocus && !this.dialogElement.querySelector('[autofocus]')) {
-            this.setAutofocus();
-        }
-        this.attachEventListeners();
-        // Additional form check in case form was added after initial load
-        this.checkForForm();
-        // this.setupContentBodyListeners();
-    }
-    disconnectedCallback() {
-        if (this.triggerElement && !this.eventsAttached && !this.controlled) {
-            grow_animation24ad5cf8.removeEventListeners(this.triggerClickEvents, this.triggerElement, this);
-            this.eventsAttached = false;
-        }
-        this.allowScroll();
-    }
-    //#endregion LIFECYCLE
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        const hasForm = this.form || this.el.querySelector('form');
-        return (index.h(index.Host, { key: '91b36e5daac0251997c7a6794166794f1e89087f' }, index.h("slot", { key: 'abeef317af74093c9b09fa6f2d300c23bbde54a6', name: "trigger" }), index.h("dialog", { key: '1eb417dc921bca7837aa05aad9c252fba7d9d920', ref: el => (this.dialogElement = el), onClose: this.handleDialogClose, onClick: this.handleDialogClick, role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-header", "aria-describedby": "dialog-content", class: clsx297c1ffe.clsx({ full: this.full }) }, index.h("div", { key: '8ec55c461a747ebb4556fbf791ee1d66d3bcc51a', class: "backdrop", ref: el => (this.backdropElement = el) }, index.h("div", { key: '373beedad09464f3473935e0464b3f51133e0372', class: "content", ref: el => (this.contentElement = el) }, !this.undismissable && (index.h("nv-button", { key: '5e94d056687837b017991f54df6cf350159addcc', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleDialogClose, "aria-label": "Close dialog" }, index.h("nv-icon", { key: '98db7848b9796589b9e7670c62a26417228a15d6', name: "x", size: "sm" }))), this.headerElement ? (index.h("slot", { name: "header" })) : (index.h("nv-dialogheader", { id: "dialog-header" })), index.h("div", { key: '611eb7914b65d5a27513f91eb458a578dbc63734', class: "content-body", id: "dialog-content" }, index.h("slot", { key: 'caf21876e6a33e997eccdc577fb43d6e63fcfc90' })), this.footerElement ? (index.h("slot", { name: "footer" })) : (index.h("nv-dialogfooter", { form: this.form, primaryButtonType: hasForm ? constants69bafca2.ButtonType.Submit : constants69bafca2.ButtonType.Button, onDialogCanceled: this.handleDialogClose, undismissable: this.undismissable })))))));
-    }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "open": ["handleDialogOpenChange"]
-    }; }
-};
-NvDialog.style = NvDialogStyle0;
-
-exports.nv_dialog = NvDialog;
+exports.tabbable = tabbable;

package/dist/cjs/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
-var index = require('./index-WPRkQD3O.js');
+var index = require('./index-kU2nW5aN.js');
+require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
 
@@ -70,6 +71,9 @@ exports.NvDatatable = index.NvDatatable;
 exports.NvDialog = index.NvDialog;
 exports.NvDialogfooter = index.NvDialogfooter;
 exports.NvDialogheader = index.NvDialogheader;
+exports.NvDrawer = index.NvDrawer;
+exports.NvDrawerfooter = index.NvDrawerfooter;
+exports.NvDrawerheader = index.NvDrawerheader;
 exports.NvFieldcheckbox = index.NvFieldcheckbox;
 exports.NvFielddate = index.NvFielddate;
 exports.NvFielddaterange = index.NvFielddaterange;
@@ -91,9 +95,19 @@ exports.NvLoader = index.NvLoader;
 exports.NvMenu = index.NvMenu;
 exports.NvMenuitem = index.NvMenuitem;
 exports.NvNotification = index.NvNotification;
+exports.NvNotificationBullet = index.NvNotificationBullet;
 exports.NvNotificationcontainer = index.NvNotificationcontainer;
 exports.NvPopover = index.NvPopover;
 exports.NvRow = index.NvRow;
+exports.NvSidebar = index.NvSidebar;
+exports.NvSidebarcontent = index.NvSidebarcontent;
+exports.NvSidebardivider = index.NvSidebardivider;
+exports.NvSidebarfooter = index.NvSidebarfooter;
+exports.NvSidebargroup = index.NvSidebargroup;
+exports.NvSidebarheader = index.NvSidebarheader;
+exports.NvSidebarlogo = index.NvSidebarlogo;
+exports.NvSidebarnavitem = index.NvSidebarnavitem;
+exports.NvSidebarnavsubitem = index.NvSidebarnavsubitem;
 exports.NvSplit = index.NvSplit;
 exports.NvStack = index.NvStack;
 exports.NvTable = index.NvTable;