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

package/dist/cjs/{nv-notification.entry-BPyEusqt.js → nv-notification.entry-Cc3zE3yY.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-yxDlFA78.js');
+var index = require('./index-WPRkQD3O.js');
 var constants69bafca2 = require('./constants-69bafca2-DpB_ghPF.js');
 var collapse_animation6e0b08df = require('./collapse.animation-6e0b08df-AHWzNGm_.js');
 var fade_animation9b939939 = require('./fade.animation-9b939939-DV--bM4S.js');
@@ -253,7 +253,7 @@ const NvNotification = class {
     //#region RENDER
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: '46775401cabedd4ddc4b25d92c63411e9acb82dc', role: this.getAriaRole(), "aria-live": this.getAriaLive(), "aria-atomic": true, "aria-labelledby": (_a = this.getHeadingId()) !== null && _a !== void 0 ? _a : null, "aria-describedby": (_b = this.getMessageId()) !== null && _b !== void 0 ? _b : null, tabindex: "-1" }, index.h("div", { key: 'e9b66d76b129916e980a150c87fa57bb26323c43', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (index.h("button", { key: 'd5a3b8eea45bf183228c4c8297e031252569e029', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, index.h("nv-icon", { key: 'd5a8c1fe676259e40a2af7d3dab5d3b301b0583f', name: "x", size: "sm" }))), index.h("nv-icon", { key: '55b19299a45267b98cb8bea6f3a26c34da03a652', name: (_c = this.icon) !== null && _c !== void 0 ? _c : this.getDefaultIcon(), size: "md", "data-scope": "icon" }), index.h("div", { key: '4ec36ebdc8d45b0b381cae85f0b3768f9cbc5b73', "data-scope": "content" }, (this.heading || this.headingSlot) && (index.h("p", { key: 'b9dff96f37cddf2c1cd7c5fa78a20ae55e275db9', id: this.getHeadingId(), "data-scope": "heading" }, index.h("slot", { key: 'efd279084065fd729ab2b2a629b95405f5dedbc1', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (index.h("p", { key: '0cdd307c0bf278475d817d385e2af1e946170864', id: this.getMessageId(), "data-scope": "message" }, index.h("slot", { key: 'f1b5ccc34f45cb7a65bc24868134ca21d9cf3df3', name: "content" }, this.message))), this.actionsSlot && (index.h("div", { key: '9cced40d8f68f6b755c7a3b90e7c1899bcb95c56', "data-scope": "actions" }, index.h("slot", { key: 'e30bd73510f7e39e41db8bf395e99301ad53ec45', name: "actions" })))))));
+        return (index.h(index.Host, { key: '10e49ace93a23660383f9bbfb45460e610320db3', role: this.getAriaRole(), "aria-live": this.getAriaLive(), "aria-atomic": true, "aria-labelledby": (_a = this.getHeadingId()) !== null && _a !== void 0 ? _a : null, "aria-describedby": (_b = this.getMessageId()) !== null && _b !== void 0 ? _b : null, tabindex: "-1" }, index.h("div", { key: '1cce0d5c025e404ad641eed3c0ff07045db12de6', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (index.h("button", { key: '64a9e8f95f51908ed82f5c832d5a9738420b574b', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, index.h("nv-icon", { key: 'f4f5a742b862a52ebf7e2edc320e4521ad575a29', name: "x", size: "sm" }))), index.h("nv-icon", { key: 'a85552d6f9d81f67643f4a8c428464ed7af2ff90', name: (_c = this.icon) !== null && _c !== void 0 ? _c : this.getDefaultIcon(), size: "md", "data-scope": "icon" }), index.h("div", { key: 'bb7fd2fd626191f53b59507c3d5003369aaa2d70', "data-scope": "content" }, (this.heading || this.headingSlot) && (index.h("p", { key: 'ce333015dc488c8371d2dc90b97461888a28174e', id: this.getHeadingId(), "data-scope": "heading" }, index.h("slot", { key: '32c9d8c3c5a85a60e3993a5963ed019f5900e6c3', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (index.h("p", { key: '08d57bf3058e3efcaf6d95de5754c34405ddddfb', id: this.getMessageId(), "data-scope": "message" }, index.h("slot", { key: 'f930fb38f00addf2911fc5401d906ee7c52b0920', name: "content" }, this.message))), this.actionsSlot && (index.h("div", { key: '983c60ec7fdf1ed85d2ef9d1a5c327d0aaf78013', "data-scope": "actions" }, index.h("slot", { key: '521bd4d20db65dc6025a9fb285599dbd7643bed0', name: "actions" })))))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/{nv-notificationcontainer.entry-MRIJURIS.js → nv-notificationcontainer.entry-DV4D6oOH.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-yxDlFA78.js');
+var index = require('./index-WPRkQD3O.js');
 require('react');
 require('react-dom');
 
@@ -33,7 +33,7 @@ const NvNotificationContainer = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'ee0a569e38a3f6402b027317b3bbd0f9773b30ea', class: `position-${this.position}` }, index.h("slot", { key: 'f8829878c8b5b4de5f3e82bbe77a0ae5d9eee809' })));
+        return (index.h(index.Host, { key: 'bf0b7cd02e0d214516f352eb7016d6060d6959c5', class: `position-${this.position}` }, index.h("slot", { key: 'f042e3f11b4d2af4b47aadeba04a332c57889616' })));
     }
 };
 NvNotificationContainer.style = NvNotificationcontainerStyle0;

package/dist/cjs/{nv-popover.entry-fj50OLMu.js → nv-popover.entry-DQSwI2jT.js}

@@ -1,96 +1,12 @@
 'use strict';
 
-var index = require('./index-yxDlFA78.js');
+var index = require('./index-WPRkQD3O.js');
 var fade_animation9b939939 = require('./fade.animation-9b939939-DV--bM4S.js');
-var styleValueTypes_esF5d10b79 = require('./style-value-types.es-f5d10b79-D0QCM8OB.js');
-var events_utilsFe1d907f = require('./events.utils-fe1d907f-01N__3wY.js');
+var grow_animation24ad5cf8 = require('./grow.animation-24ad5cf8-LUp_ITEx.js');
+require('./style-value-types.es-f5d10b79-D0QCM8OB.js');
 require('react');
 require('react-dom');
 
-const useGrow = (node, { duration = 200, amount = 0.8, hasFade = true } = {}) => {
-    const nodeStyler = fade_animation9b939939.index(node);
-    /**
-     * Will animate the scale and optionally the opacity to make the element grow and fade in,
-     * and removes the scale and opacity style attributes once complete.
-     */
-    function growIn() {
-        return new Promise(resolve => {
-            styleValueTypes_esF5d10b79.animate({
-                from: { opacity: hasFade ? 0 : 1, scale: amount },
-                to: { opacity: 1, scale: 1 },
-                duration,
-                onUpdate(latest) {
-                    const updates = {
-                        scale: latest.scale,
-                    };
-                    if (hasFade) {
-                        updates['opacity'] = latest.opacity;
-                    }
-                    nodeStyler.set(updates);
-                },
-                onComplete() {
-                    resolve();
-                    if (hasFade) {
-                        node.style.removeProperty('opacity');
-                    }
-                    node.style.removeProperty('transform');
-                },
-            });
-        });
-    }
-    /**
-     * Applies the growOut styles without animating, useful when the initial
-     * state is hidden.
-     */
-    function setGrowOut() {
-        node.style.transform = `scale(${amount})`;
-        if (hasFade) {
-            node.style.opacity = '0';
-        }
-    }
-    /**
-     * Applies the growIn styles without animating, useful when the initial
-     * state is visible.
-     */
-    function setGrowIn() {
-        node.style.transform = `scale(1)`;
-        if (hasFade) {
-            node.style.opacity = '1';
-        }
-    }
-    /**
-     * Will animate the scale and optionally the opacity to make the element shrink and fade out,
-     * leaving the scale and opacity styles on the element.
-     */
-    function growOut() {
-        return new Promise(resolve => {
-            styleValueTypes_esF5d10b79.animate({
-                from: { opacity: 1, scale: 1 },
-                to: { opacity: hasFade ? 0 : 1, scale: amount },
-                duration,
-                onUpdate(latest) {
-                    const updates = {
-                        scale: latest.scale,
-                    };
-                    if (hasFade) {
-                        updates['opacity'] = latest.opacity;
-                    }
-                    nodeStyler.set(updates);
-                },
-                onComplete() {
-                    resolve();
-                },
-            });
-        });
-    }
-    return {
-        growIn,
-        growOut,
-        setGrowOut,
-        setGrowIn,
-    };
-};
-
 const min = Math.min;
 const max = Math.max;
 const round = Math.round;
@@ -1808,14 +1724,14 @@ const NvPopover = class {
      */
     attachEventListeners() {
         if (this.triggerElement && !this.eventsAttached) {
-            events_utilsFe1d907f.addEventListeners(this.closeEvents, document, this);
+            grow_animation24ad5cf8.addEventListeners(this.closeEvents, document, this);
             if (this.triggerMode === 'click') {
-                events_utilsFe1d907f.addEventListeners(this.clickEvents, this.triggerElement, this);
+                grow_animation24ad5cf8.addEventListeners(this.clickEvents, this.triggerElement, this);
                 // Add document click and touch listeners
-                events_utilsFe1d907f.addEventListeners(this.outsideClickEvents, document, this);
+                grow_animation24ad5cf8.addEventListeners(this.outsideClickEvents, document, this);
             }
             if (this.triggerMode === 'hover') {
-                events_utilsFe1d907f.addEventListeners(this.hoverEvents, this.triggerElement, this);
+                grow_animation24ad5cf8.addEventListeners(this.hoverEvents, this.triggerElement, this);
             }
             this.eventsAttached = true;
         }
@@ -1890,7 +1806,7 @@ const NvPopover = class {
             state.groups.delete(this.groupName);
         if (this.groupName && open)
             state.groups.set(this.groupName, { openedBy: this.el });
-        const { growIn } = useGrow(this.popoverElement, {
+        const { growIn } = grow_animation24ad5cf8.useGrow(this.popoverElement, {
             duration: isOtherMemberOpen ? 0 : 100,
             amount: 0.85,
         });
@@ -1942,7 +1858,7 @@ const NvPopover = class {
     componentDidLoad() {
         // Initial inline style setup
         if (!this.open) {
-            const { setGrowOut } = useGrow(this.popoverElement);
+            const { setGrowOut } = grow_animation24ad5cf8.useGrow(this.popoverElement);
             setGrowOut();
         }
         else {
@@ -1954,14 +1870,14 @@ const NvPopover = class {
         this.attachEventListeners();
     }
     disconnectedCallback() {
-        events_utilsFe1d907f.removeEventListeners(this.closeEvents, document, this);
+        grow_animation24ad5cf8.removeEventListeners(this.closeEvents, document, this);
         if (this.triggerMode === 'click') {
-            events_utilsFe1d907f.removeEventListeners(this.clickEvents, this.triggerElement, this);
+            grow_animation24ad5cf8.removeEventListeners(this.clickEvents, this.triggerElement, this);
             // Remove document listeners
-            events_utilsFe1d907f.removeEventListeners(this.outsideClickEvents, document, this);
+            grow_animation24ad5cf8.removeEventListeners(this.outsideClickEvents, document, this);
         }
         if (this.triggerMode === 'hover')
-            events_utilsFe1d907f.removeEventListeners(this.hoverEvents, this.triggerElement, this);
+            grow_animation24ad5cf8.removeEventListeners(this.hoverEvents, this.triggerElement, this);
         // Reset flag so events can be reattached if component is reconnected
         this.eventsAttached = false;
         // Clean up any pending timeouts
@@ -1974,7 +1890,7 @@ const NvPopover = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '12a7b1a584b3430808f55294772240a1dc77800e' }, index.h("slot", { key: '3d9b86bdccf5ed03bbc477c8e0eaad6c9f886cc9', name: "trigger" }), index.h("div", { key: 'df5924d7e88fda20b769a7ab0329428fc04e3920', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (index.h("div", { key: '559702ed280c31331703e98d4c57a189491481c4', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), index.h("slot", { key: 'f5872f0bb2865f053b56e9aa128414f777dd9454', name: "content" }))));
+        return (index.h(index.Host, { key: 'c54fc90b90bbe48b0410c750bf4ba97e51eb24e5' }, index.h("slot", { key: 'd957fba61d4e91d8afd85f14b602290c88e5128a', name: "trigger" }), index.h("div", { key: '548c798fc047d41c06d8a84cc9a4f65a4cbf75b5', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (index.h("div", { key: 'd3c6e110e2c3f45ba0ed5c69b99f0a60413cbb39', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), index.h("slot", { key: '20c2d8e3ff0ed3d3b9957513e19586e4aa4a39ca', name: "content" }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-row.entry-T0OlcSij.js → nv-row.entry-UUuMSAY5.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-yxDlFA78.js');
+var index = require('./index-WPRkQD3O.js');
 require('react');
 require('react-dom');
 
@@ -14,7 +14,7 @@ const NvRow = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '7349317dfee793dd34ceab919bae6155811f25f4' }, index.h("slot", { key: '0b31cf4d03d1057ec6f02b65b0ace85ee390cbc4' })));
+        return (index.h(index.Host, { key: '8415bdad0106bd3d836996c617a749294e0c19e2' }, index.h("slot", { key: '77c069ced0dc25c4169945877c388f30d27fdc4f' })));
     }
 };
 NvRow.style = NvRowStyle0;

package/dist/cjs/{nv-split.entry-DlI7I6Tb.js → nv-split.entry-CYP2bTTM.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-yxDlFA78.js');
+var index = require('./index-WPRkQD3O.js');
 require('react');
 require('react-dom');
 
@@ -324,7 +324,7 @@ const NvSplit = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'd0bcb4330d157fa239289fa7176c502bfe01d0b8', "data-dragging": this.isDragging.toString() }, index.h("slot", { key: '490799f805f0833e5a33b480e205c8deb65f215b', name: "pane" }), index.h("slot", { key: '69d05ed6f6bbeac1f123ac100c753cf78ced3f08', name: "gutter" })));
+        return (index.h(index.Host, { key: '6b1fd4447295f209a9b0ea95b7d2a07200204504', "data-dragging": this.isDragging.toString() }, index.h("slot", { key: '67089b66457c4ad64abb80749d64ca67c881a1c0', name: "pane" }), index.h("slot", { key: '2fe9da5dd2aa2ff5b14bdd9ea99e9f0fa027931d', name: "gutter" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-stack.entry-991A3rOk.js → nv-stack.entry-D35-75Vw.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-yxDlFA78.js');
+var index = require('./index-WPRkQD3O.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 require('react');
 require('react-dom');
@@ -23,7 +23,7 @@ const NvStack = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '8f771805224c769b5a87f5c550ddbcb8f888d002', class: clsx297c1ffe.clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, index.h("slot", { key: '6fcd46cfd74415d2f07c762b065e3aa0f0194764' })));
+        return (index.h(index.Host, { key: '65adeb492f9eb9b709c809d65b52f4447d1c938d', class: clsx297c1ffe.clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, index.h("slot", { key: '09773d6affbc9bf3c18e75162d9c096dd31a48e7' })));
     }
 };
 NvStack.style = NvStackStyle0;

package/dist/cjs/{nv-table.entry-ClSU3-cR.js → nv-table.entry-DevWJBnL.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-yxDlFA78.js');
+var index = require('./index-WPRkQD3O.js');
 require('react');
 require('react-dom');
 
@@ -236,7 +236,7 @@ const NvTable = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'b63510e2da93a1b98eb3813ba7ac9bed97b81c1f' }, index.h("slot", { key: '14fb76c397db4da5dfba94bce599d1e4d8992a6b' })));
+        return (index.h(index.Host, { key: '684a51e016d83eeb0ab76f07fe6d26a06bf00457' }, index.h("slot", { key: '420b9cbcb641692ed95d54ec2e0af1c0b09776c3' })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/{nv-tableheader.entry-DzvbPDBN.js → nv-tableheader.entry-Hs7nUSOC.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-yxDlFA78.js');
+var index = require('./index-WPRkQD3O.js');
 require('react');
 require('react-dom');
 
@@ -62,7 +62,7 @@ const NvTableheader = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'ff2fc290253d468d2d139afdc708b012258b3f31', role: "columnheader", "aria-sort": this.ariaSort, tabindex: this.sortable ? 0 : undefined, onKeyDown: this.handleKeyDown.bind(this), onClick: this.cycleSortDirection.bind(this) }, index.h("slot", { key: '3c70c590cc33ca2d722dbc3313c9e10583bfa631' }), this.sortable && (index.h("span", { key: '219a872d53157545302495cec6844d55b5026e00', class: "sort-icon-wrap", "aria-hidden": "true" }, index.h("nv-iconbutton", { key: 'd39698493a8504bb7e2af6fa52ac4c548b91bf40', disableTabindex: true, name: "arrow-up", size: "xs", emphasis: this.sortDirection === 'none' ? 'lower' : 'low',
+        return (index.h(index.Host, { key: '03d7e74c19c0c1ef54f4d6f53eab0964af821f57', role: "columnheader", "aria-sort": this.ariaSort, tabindex: this.sortable ? 0 : undefined, onKeyDown: this.handleKeyDown.bind(this), onClick: this.cycleSortDirection.bind(this) }, index.h("slot", { key: '7408d11ba38b59f05bcdcffcb55d11ae36f93a34' }), this.sortable && (index.h("span", { key: 'c76ddbf61861d9cd45eb7b0d8c59095947677135', class: "sort-icon-wrap", "aria-hidden": "true" }, index.h("nv-iconbutton", { key: '6d59b4b14dfe588142ccba2e1dc452754ea5a2f7', disableTabindex: true, name: "arrow-up", size: "xs", emphasis: this.sortDirection === 'none' ? 'lower' : 'low',
             // prevent mousedown from selecting text
             onMouseDown: (e) => e.preventDefault(), class: {
                 'is-none': this.sortDirection === 'none',

package/dist/cjs/{nv-toggle.entry-Dq5hAoVB.js → nv-toggle.entry-Eje9d--6.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-yxDlFA78.js');
+var index = require('./index-WPRkQD3O.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');
@@ -66,8 +66,8 @@ const NvToggle = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '8e5b801ed4263b02b9b00628e94de448986eca98', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: 'b25ed406fae37d41f1c1fbe4234ded3f94db14b0', class: "input-container" }, index.h("input", { key: '5a98b81705597f2a115517b6031289ee9be54bda', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), index.h("div", { key: '89366dfe5c0106d7e28a858745941f0358220ce7', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '3f0192378adbd8d5d5f5f5684d1e929462d7832b', htmlFor: this.inputId, class: clsx297c1ffe.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: 'ee95958740e62af025bc4a456fe1b9f12b9aac71', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'eee5a91ccbe1eed1d2ce41c0ce08cf8b49440501', class: "description" }, index.h("slot", { key: 'a925c57db61229d032412e315ff1f738a479b090', name: "description" }, this.description))))));
+        return (index.h(index.Host, { key: 'c4307e84431894271a4fbe3ccd236f8b26d8d499', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: 'edb8c0ba8d92aa3864ff778a037bfb148601663a', class: "input-container" }, index.h("input", { key: 'f8be6f1936b390acdfaab0a87acea69d479e7a5a', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), index.h("div", { key: 'c9dae62cda7d33fcd3dc4e1a2fd8173295a32ed3', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '365ed61ccd3ca72372998b4a3fc58d36de944f3a', htmlFor: this.inputId, class: clsx297c1ffe.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '77ee33f84756787e0f34507da294abb9514b703d', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '5076c7b3cbf9f820592bb339df3251e280a9be9c', class: "description" }, index.h("slot", { key: '75f461109ac021aa51e6717ab56b1319a2b7f6ca', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/{nv-togglebutton.entry-DI8HQ5Ou.js → nv-togglebutton.entry-LGI7pIeK.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-yxDlFA78.js');
+var index = require('./index-WPRkQD3O.js');
 require('react');
 require('react-dom');
 
@@ -48,7 +48,7 @@ const NvTogglebutton = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'a36d2ac3ed287145dae1812e8488313e7509b979', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: '463f95e6e68148d94047e8b71c99c449dccffbd6' })));
+        return (index.h(index.Host, { key: 'ef2adf60f4a453ba0c5c7bd83d3fc52d5c37f5d8', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: '242d30a2d6f3d0cbaba1ee8cfb4abb2e607b66c4' })));
     }
 };
 NvTogglebutton.style = NvTogglebuttonStyle0;

package/dist/cjs/{nv-togglebuttongroup.entry-DzGOSBF7.js → nv-togglebuttongroup.entry-CWN_Ucry.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-yxDlFA78.js');
+var index = require('./index-WPRkQD3O.js');
 require('react');
 require('react-dom');
 
@@ -156,7 +156,7 @@ const NvTogglebuttongroup = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '02b7814ffceeaa875edcbce4ebdd6465b24abf62' }, index.h("slot", { key: '89c9387a50ec0c1c660e490b66742be96e6f6b3e' })));
+        return (index.h(index.Host, { key: '8b42c5392c429b249ccc8be4f97fa6eccf4e2383' }, index.h("slot", { key: '78046dc23352a3fab760cc3c1b53edc47e16d48b' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-tooltip.entry-CF0-gdZL.js → nv-tooltip.entry-BGkKDEFg.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-yxDlFA78.js');
+var index = require('./index-WPRkQD3O.js');
 require('react');
 require('react-dom');
 
@@ -46,7 +46,7 @@ const NvTooltip = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '2ec10db6ad78e1637696e383069caf3fc8919587' }, index.h("slot", { key: '0df02ac8d76de82ae25ec3d9c73ef18cd6eee4d8' }), index.h("nv-popover", { key: '1ed0766ed0c3d43952be2be0dbafd94f07ec44b3', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: 'bd44fba212d86969688bdf3e00a711f152500952', slot: "content" }, this.message), index.h("slot", { key: '31f2c47d800e4bd057c7475de931e11542eb5208', name: "content" }))));
+        return (index.h(index.Host, { key: 'f0560549d1168fed22c4e48a2e11be5dda49f005' }, index.h("slot", { key: '698227e9bea7ea94eff00ff72f124656ed11624d' }), index.h("nv-popover", { key: 'df4ddd77e40b4998a32e166710a2ff27a1e0c216', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: 'b8fc42997671fafc15173bce2fdf7dec667d76e5', slot: "content" }, this.message), index.h("slot", { key: '5b8a27ff474367ba2e5771deb62137e40f5d911d', name: "content" }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/components/NvDatatable/NvDatatable.js

@@ -1,13 +1,39 @@
-import React, { useMemo, useState, useEffect, useRef } from 'react';
-import { flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
+import React, { useMemo, useState, useEffect, useRef, useCallback, } from 'react';
+import { flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, getFilteredRowModel, useReactTable, } from '@tanstack/react-table';
 import { NvTable, NvTableheader } from '../../generated/components';
-function NvDatatable({ columns, rows, pagination, sorting, renderPagination, stickyHeader, ...htmlProps }) {
+function NvDatatable({ columns, rows, pagination, sorting, filtering, renderPagination, renderFiltering, stickyHeader, ...htmlProps }) {
     const [paginationState, setPaginationState] = useState({
         pageIndex: 0,
         pageSize: pagination?.initialPageSize || 10,
     });
     const [sortingState, setSortingState] = useState(sorting?.sortState || []);
+    const [globalFilterState, setGlobalFilterState] = useState(filtering?.filterState);
     const lastRowRef = useRef(null);
+    const debouncedSetFilter = useRef(null);
+    const setGlobalFilterDebounced = useCallback((value) => {
+        const debounceMs = filtering?.debounceMs ?? 300;
+        if (debouncedSetFilter.current) {
+            clearTimeout(debouncedSetFilter.current);
+        }
+        debouncedSetFilter.current = setTimeout(() => {
+            setGlobalFilterState(value);
+            if (filtering?.mode === 'server' && filtering.onFilterChange) {
+                filtering.onFilterChange(value);
+            }
+        }, debounceMs);
+    }, [filtering]);
+    useEffect(() => {
+        return () => {
+            if (debouncedSetFilter.current) {
+                clearTimeout(debouncedSetFilter.current);
+            }
+        };
+    }, []);
+    useEffect(() => {
+        if (filtering?.filterState !== undefined) {
+            setGlobalFilterState(filtering.filterState);
+        }
+    }, [filtering?.filterState]);
     const tableColumns = useMemo(() => columns
         .filter((col) => !col.hidden)
         .map((col) => {
@@ -64,6 +90,7 @@ function NvDatatable({ columns, rows, pagination, sorting, renderPagination, sti
             ...(sorting && {
                 state: {
                     sorting: sorting.sortState || sortingState,
+                    ...(filtering && { globalFilter: globalFilterState }),
                 },
                 onSortingChange: sorting.mode === 'server'
                     ? (updater) => {
@@ -83,6 +110,23 @@ function NvDatatable({ columns, rows, pagination, sorting, renderPagination, sti
                 isMultiSortEvent: sorting.enableMultiSort ? () => true : undefined,
                 getSortedRowModel: sorting.mode === 'client' ? getSortedRowModel() : undefined,
             }),
+            ...(filtering && {
+                state: {
+                    ...(sorting && { sorting: sorting.sortState || sortingState }),
+                    globalFilter: globalFilterState,
+                },
+                onGlobalFilterChange: (updater) => {
+                    const newFilter = typeof updater === 'function'
+                        ? updater(globalFilterState)
+                        : updater;
+                    setGlobalFilterState(newFilter);
+                    if (filtering.mode === 'server' && filtering.onFilterChange) {
+                        filtering.onFilterChange(newFilter);
+                    }
+                },
+                globalFilterFn: filtering.globalFilterFn,
+                getFilteredRowModel: filtering.mode === 'client' ? getFilteredRowModel() : undefined,
+            }),
         };
         if (!pagination) {
             return baseConfig;
@@ -120,7 +164,16 @@ function NvDatatable({ columns, rows, pagination, sorting, renderPagination, sti
             };
         }
         return baseConfig;
-    }, [rows, tableColumns, pagination, paginationState, sorting, sortingState]);
+    }, [
+        rows,
+        tableColumns,
+        pagination,
+        paginationState,
+        sorting,
+        sortingState,
+        filtering,
+        globalFilterState,
+    ]);
     const table = useReactTable(tableConfig);
     useEffect(() => {
         if (pagination?.mode === 'server' && pagination.onPaginationChange) {
@@ -180,7 +233,27 @@ function NvDatatable({ columns, rows, pagination, sorting, renderPagination, sti
     }, [pagination, table, rows.length, tablePaginationState]);
     const tableRows = table.getRowModel().rows;
     const isInfiniteScroll = pagination?.mode === 'infinite';
+    const filteringAPI = useMemo(() => {
+        if (!filtering) {
+            return null;
+        }
+        const preFilteredRowModel = table.getPreFilteredRowModel();
+        const filteredRowModel = table.getFilteredRowModel();
+        return {
+            filterState: globalFilterState,
+            setGlobalFilter: setGlobalFilterDebounced,
+            resetFilters: () => {
+                setGlobalFilterState(undefined);
+                if (filtering.onFilterChange) {
+                    filtering.onFilterChange(undefined);
+                }
+            },
+            totalRows: preFilteredRowModel.rows.length,
+            filteredRows: filteredRowModel.rows.length,
+        };
+    }, [filtering, globalFilterState, table, setGlobalFilterDebounced]);
     return (React.createElement(React.Fragment, null,
+        filteringAPI && renderFiltering && renderFiltering(filteringAPI),
         React.createElement(NvTable, { ...htmlProps },
             React.createElement("table", null,
                 React.createElement("thead", { "data-sticky-top": stickyHeader ? 'true' : undefined }, table.getHeaderGroups().map((headerGroup) => (React.createElement("tr", { key: headerGroup.id }, headerGroup.headers.map((header) => {

package/dist/types/components/NvDatatable/NvDatatable.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { NvDatatableProps } from './types';
-declare function NvDatatable<T>({ columns, rows, pagination, sorting, renderPagination, stickyHeader, ...htmlProps }: NvDatatableProps<T>): React.JSX.Element;
+declare function NvDatatable<T>({ columns, rows, pagination, sorting, filtering, renderPagination, renderFiltering, stickyHeader, ...htmlProps }: NvDatatableProps<T>): React.JSX.Element;
 declare namespace NvDatatable {
     var displayName: string;
 }

package/dist/types/components/NvDatatable/types.d.ts

@@ -1,11 +1,13 @@
 import type { ComponentProps } from 'react';
-import type { SortingFn, NoInfer, SortingState } from '@tanstack/react-table';
+import type { SortingFn, NoInfer, SortingState, Row } from '@tanstack/react-table';
 export type NvDatatableProps<T> = {
     columns: Array<NvDatatableColumn<T>>;
     rows: Array<T>;
     pagination?: NvDatatablePaginationConfig;
     sorting?: NvDatatableSortingConfig;
+    filtering?: NvDatatableFilteringConfig<T>;
     renderPagination?: (api: NvDatatableRenderPaginationAPI) => React.ReactNode;
+    renderFiltering?: (api: NvDatatableRenderFilteringAPI) => React.ReactNode;
     stickyHeader?: boolean;
 } & Pick<ComponentProps<'div'>, 'className' | 'style'>;
 export interface NvDatatableColumn<Row, K extends keyof Row = keyof Row, F = Row[K]> {
@@ -74,3 +76,17 @@ export interface NvDatatableSortingConfig {
     sortState?: NvDataTableSortingState;
     onSortingChange?: (sorting: SortingState) => void;
 }
+export interface NvDatatableFilteringConfig<T> {
+    mode: 'client' | 'server';
+    filterState?: unknown;
+    onFilterChange?: (filterState: unknown) => void;
+    globalFilterFn?: (row: Row<T>, columnId: string, filterValue: unknown) => boolean;
+    debounceMs?: number;
+}
+export interface NvDatatableRenderFilteringAPI {
+    filterState: unknown;
+    setGlobalFilter: (value: unknown) => void;
+    resetFilters: () => void;
+    totalRows: number;
+    filteredRows: number;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-react",
-  "version": "3.21.0",
+  "version": "3.22.0",
   "description": "Nova is a design system created by Elia Group to empower creators to efficiently build solutions that people love to use.",
   "author": "Elia Group",
   "homepage": "https://nova.eliagroup.io",

package/dist/cjs/events.utils-fe1d907f-01N__3wY.js

@@ -1,23 +0,0 @@
-'use strict';
-
-/**
- * Adds a set of event listeners to the given target.
- * @param {EventsAndListeners} events - The events and listeners to add.
- * @param {Element | Window | Document} target  - The target element or window to add the event listeners to.
- * @param {T} context - The class context to bind the event listeners to.
- */
-function addEventListeners(events, target, context) {
-    events.forEach(([event, listener]) => target.addEventListener(event, listener.bind(context)));
-}
-/**
- * Removes a set of event listeners from the given target.
- * @param {EventsAndListeners} events - The events and listeners to remove.
- * @param {Element | Window | Document} target  - The target element or window to remove the event listeners from.
- * @param {T} context - The class context to bind the event listeners to.
- */
-function removeEventListeners(events, target, context) {
-    events.forEach(([event, listener]) => target.removeEventListener(event, listener.bind(context)));
-}
-
-exports.addEventListeners = addEventListeners;
-exports.removeEventListeners = removeEventListeners;