@nova-design-system/nova-react 3.18.0 → 3.20.0

package/dist/cjs/{nv-iconbutton_2.entry-WTj2sSR7.js → nv-iconbutton_2.entry-DOv1RrkS.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-_oq_uffl.js');
+var index = require('./index-BObVnP12.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 require('react');
 require('react-dom');
@@ -124,7 +124,7 @@ const NvIconbutton = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '4cda6f8b0c762c08964c5a4a882331d84eaa4514', role: "button", type: this.type, tabindex: "0", disabled: this.disabled ? true : undefined, class: clsx297c1ffe.clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && index.h("nv-loader", { key: 'f433d942bad470a376ef8164e73b7025d15bd39e', size: this.size }), !this.loading && index.h("nv-icon", { key: '1ceebfa6b5907dac279efff65a0f6d977d062453', name: this.name, size: this.size }), index.h("slot", { key: 'd7f882e9c8dc0fcdb1bbb9ff783f7d387036d043' })));
+        return (index.h(index.Host, { key: '5590d5f6378669a2f74ce93d33ac14c86f435523', role: "button", type: this.type, tabindex: "0", disabled: this.disabled ? true : undefined, class: clsx297c1ffe.clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && index.h("nv-loader", { key: 'f88ed8a8b579d15318f419c8072a4c14e56990ce', size: this.size }), !this.loading && index.h("nv-icon", { key: '12b3fc9818014ea93237e8037ce2d90ee214517a', name: this.name, size: this.size }), index.h("slot", { key: '97e130b7caf544954f3168866429ed7633e46301' })));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }
@@ -155,7 +155,7 @@ const NvLoader = class {
     //#region RENDER
     /* <slot> empty to force rendering change */
     render() {
-        return (index.h(index.Host, { key: '4692310e37f31424602a1592cb0648e9bf95a609', class: clsx297c1ffe.clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
+        return (index.h(index.Host, { key: 'b90db971210fb08781098cefaf8832bd5692a09e', class: clsx297c1ffe.clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
     }
 };
 NvLoader.style = NvLoaderStyle0;

package/dist/cjs/{nv-menu.entry-DnHSkRkc.js → nv-menu.entry-C2L8F-nG.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-_oq_uffl.js');
+var index = require('./index-BObVnP12.js');
 require('react');
 require('react-dom');
 
@@ -34,7 +34,7 @@ const NvMenu = class {
          * 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';
+        this.placement = 'bottom-start';
         //#endregion LIFECYCLE
         /****************************************************************************/
         //#region RENDER
@@ -207,7 +207,7 @@ const NvMenu = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'e563f1a78be7cd37b0fe353882cd5874f3a12e60' }, index.h("slot", { key: 'd91afe28b83121707e752532d349fdc9b983ea71', name: "trigger" }), index.h("nv-popover", { key: '90c1fc4e30d9cd7b02bd5ad620b3eb824f82d058', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, this.items ? (index.h("ul", { slot: "content" }, this.renderMenuItems())) : (index.h("slot", { name: "content" })))));
+        return (index.h(index.Host, { key: '3f8c9a52825bac7923f2af8f17a163f367d37b65' }, index.h("slot", { key: '1b49cf3d060a78e71e8e8ff20d62ca4f25f3e3c0', name: "trigger" }), index.h("nv-popover", { key: '33429ba744ffc8ab7888b0f516837838791ced7c', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, this.items ? (index.h("ul", { slot: "content" }, this.renderMenuItems())) : (index.h("slot", { name: "content" })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-menuitem.entry-BMThBD-z.js → nv-menuitem.entry-DuDZTlJ1.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-_oq_uffl.js');
+var index = require('./index-BObVnP12.js');
 require('react');
 require('react-dom');
 
@@ -50,7 +50,7 @@ const NvMenuitem = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '96933ba797e263a6c56e4b079227498eff19989e', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && index.h("nv-icon", { key: '17fd121521b54f2065b91a0921d7a2573139086e', name: this.icon }), index.h("slot", { key: 'e503e3667ee008f6c370d928c2ba0781b1240200' }), this.label && index.h("span", { key: '521f094eb6e3a4015424ef1516a10d6fa454d8ab', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && index.h("kbd", { key: 'e27628004929e519503dac10f7c278b8a9330176' }, this.shortcut), this.hasSubmenu && index.h("nv-icon", { key: 'c706e459412f628a397f1b4d38010c5de23d643f', name: "chevron-right" })));
+        return (index.h(index.Host, { key: '188fd7b927ca35aa8089cec6fd49a61c08c6c7ba', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && index.h("nv-icon", { key: '503d8d641d04ac0d9f9748bd409cae6ed5f0b21c', name: this.icon }), index.h("slot", { key: 'df6fdf0eccc984b9a7efd35b105fc8079f0098c9' }), this.label && index.h("span", { key: '4ff8e176c6f98701048e6db62908e7bdce65af07', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && index.h("kbd", { key: '09c3ab408942fbb94c9d5124f49e108a0831e58a' }, this.shortcut), this.hasSubmenu && index.h("nv-icon", { key: '0710cfad417cada843e7624f966111edc5ba99cc', name: "chevron-right" })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/{nv-notification.entry-BgORwEc6.js → nv-notification.entry-DxAj-mc7.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-_oq_uffl.js');
+var index = require('./index-BObVnP12.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: '6e0908c4dc5bbd289b756703f19e932165da7eeb', 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: 'c14fb6bcbfc7048bd1d2171e489e2b1d4a8d3486', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (index.h("button", { key: 'dbc3162958edc2655d59e770b1e27f8226b2a2ec', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, index.h("nv-icon", { key: '8ddb1a6ec22c343f5df6158418a4bf434b1d1169', name: "x", size: "sm" }))), index.h("nv-icon", { key: '29e12bb41102cedf3f0b7d8680a265535b69ff23', name: (_c = this.icon) !== null && _c !== void 0 ? _c : this.getDefaultIcon(), size: "md", "data-scope": "icon" }), index.h("div", { key: '996b53cdfa47b14769a08d23b9971475521b94e0', "data-scope": "content" }, (this.heading || this.headingSlot) && (index.h("p", { key: '110046b680b485d323c49f0836589235aa695ff0', id: this.getHeadingId(), "data-scope": "heading" }, index.h("slot", { key: 'f256cd10825ee24b4caef51c46ac8e9f7af152c0', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (index.h("p", { key: '73573a91e4cea1acdf12b428f217562eb4df5cf3', id: this.getMessageId(), "data-scope": "message" }, index.h("slot", { key: '9bb41cd075367cc9c223ccd4fdb0ff47871941a6', name: "content" }, this.message))), this.actionsSlot && (index.h("div", { key: '7fff75429d22bf9344f077672c18bfe583e99301', "data-scope": "actions" }, index.h("slot", { key: 'e77b1c3e310db84e3965f097e595f11a8b32ebc3', name: "actions" })))))));
+        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" })))))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/{nv-notificationcontainer.entry-C3D52xHp.js → nv-notificationcontainer.entry-CUnTicXF.js}

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

package/dist/cjs/{nv-popover.entry-Bc5Hs_ZA.js → nv-popover.entry-DVwa4DvW.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-_oq_uffl.js');
+var index = require('./index-BObVnP12.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');
@@ -1697,7 +1697,7 @@ const NvPopover = class {
             [
                 'keydown',
                 (e) => {
-                    if (e.key === 'Escape') {
+                    if (e.key === 'Escape' && this.triggerMode !== 'controlled') {
                         this.open = false;
                     }
                 },
@@ -1974,7 +1974,7 @@ const NvPopover = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '8fdb18b1233e2f988d16b85927bbf5b1f7f47630' }, index.h("slot", { key: '3dfc19787da335fa0e6b38fe2aebfa1a9df04ea8', name: "trigger" }), index.h("div", { key: 'd529ca4a2efb62d6bfab679d85acbfb8002e1442', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (index.h("div", { key: 'bb187c48e62a9653af8649c1a0670534499f6060', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), index.h("slot", { key: 'b60efb50e864ac0f530fcb7b9fc52c53924f29b1', name: "content" }))));
+        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" }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-row.entry-rTFsRQhn.js → nv-row.entry-iLk2UglX.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-_oq_uffl.js');
+var index = require('./index-BObVnP12.js');
 require('react');
 require('react-dom');
 
@@ -14,7 +14,7 @@ const NvRow = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '664375922c55485e6b297f0e64950db684ecffa3' }, index.h("slot", { key: '194e45ce439cadb2bdba17072070d3926a746d3f' })));
+        return (index.h(index.Host, { key: '7349317dfee793dd34ceab919bae6155811f25f4' }, index.h("slot", { key: '0b31cf4d03d1057ec6f02b65b0ace85ee390cbc4' })));
     }
 };
 NvRow.style = NvRowStyle0;

package/dist/cjs/{nv-split.entry-CEkdVB0d.js → nv-split.entry-BrMHK6TS.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-_oq_uffl.js');
+var index = require('./index-BObVnP12.js');
 require('react');
 require('react-dom');
 
@@ -324,7 +324,7 @@ const NvSplit = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'b0874368ed8b3c1b5cd0676a1c8181e827369ad7', "data-dragging": this.isDragging.toString() }, index.h("slot", { key: 'a0e35a851390bf1f0ffcf065fdeb23cba3c75c9c', name: "pane" }), index.h("slot", { key: 'a80dbbc4862c3a30aac9e89d6b80a19245083c42', name: "gutter" })));
+        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" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-stack.entry-DFWmiZRf.js → nv-stack.entry-C8jLJ5Ki.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-_oq_uffl.js');
+var index = require('./index-BObVnP12.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: '66123f22ad4a6ebefe8663c795274eb900d2c178', 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: '7b3d395c3490664f0e2f337a04f69cc717ed6c0e' })));
+        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' })));
     }
 };
 NvStack.style = NvStackStyle0;

package/dist/cjs/{nv-table.entry-Drf8wXN5.js → nv-table.entry-D6o4g9Vo.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-_oq_uffl.js');
+var index = require('./index-BObVnP12.js');
 require('react');
 require('react-dom');
 
@@ -236,7 +236,7 @@ const NvTable = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '37c5e773664fc7bc324d46c003057f322e118c0d' }, index.h("slot", { key: '28decbb3d75da3471a95d9130fdb8206df811270' })));
+        return (index.h(index.Host, { key: 'b63510e2da93a1b98eb3813ba7ac9bed97b81c1f' }, index.h("slot", { key: '14fb76c397db4da5dfba94bce599d1e4d8992a6b' })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/{nv-toggle.entry-D3jHT0co.js → nv-toggle.entry-9iwmu7qi.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-_oq_uffl.js');
+var index = require('./index-BObVnP12.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: '3e1eecaddeab51801343663989a1554ae62794be', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: 'a67b9c8c0159d6b2a1f87d06d536116475fd9683', class: "input-container" }, index.h("input", { key: '2ce5d01313da8fe74cdac78616c051236aa3102e', 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: '0e7e1960fc3cd8ff1c79b3c8d4fc306e2b761bfc', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '0325700fc58d39878821a4b1871cb433eda18199', htmlFor: this.inputId, class: clsx297c1ffe.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '4b627dbbad2f52446a0ebb4eacdfe3d6d5ccdbb0', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'db7d0a200c66e234142b455686afdd409337b336', class: "description" }, index.h("slot", { key: '171bb20b639a07bda52cb788fb367a51d6dbe7f8', name: "description" }, this.description))))));
+        return (index.h(index.Host, { key: '65222149af4edb9f8fd2da7efe9a01e15dec4722', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: '7edd5587281b5610269f1ac09826ce379abfae24', class: "input-container" }, index.h("input", { key: '30d3db3cbdc263259a5ba1bf8e637225c4db3b4a', 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: 'a8a6d3c2774560b7d43cda75882d90cc564f4c54', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'fe980a07df4901081fda42df758236da0b8a11d0', htmlFor: this.inputId, class: clsx297c1ffe.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '723cec5914c6c0bed7e14e61e2f64e83c8e8b7b8', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'f811065ed06f0816d8f0f1f65d4c659cbde3f683', class: "description" }, index.h("slot", { key: '541946e3f33a315bf667999c30a44fd93fc5f07f', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/{nv-togglebutton.entry-zN93TaA9.js → nv-togglebutton.entry-N7_CSvzS.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-_oq_uffl.js');
+var index = require('./index-BObVnP12.js');
 require('react');
 require('react-dom');
 
@@ -48,7 +48,7 @@ const NvTogglebutton = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '6965d7bd520347f5236cca32ca674875a9a4fd2f', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: '45ddd14b67904252c2e78b6357fbd33790facf23' })));
+        return (index.h(index.Host, { key: 'c4b698b1fb80f0dcca5d7a77bc20d22db1cbf538', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: '605385f07f32b989685983cfd1a082525741fba4' })));
     }
 };
 NvTogglebutton.style = NvTogglebuttonStyle0;

package/dist/cjs/{nv-togglebuttongroup.entry-D4dUkodA.js → nv-togglebuttongroup.entry-DWCytOhV.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-_oq_uffl.js');
+var index = require('./index-BObVnP12.js');
 require('react');
 require('react-dom');
 
@@ -156,7 +156,7 @@ const NvTogglebuttongroup = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '4e075360c060e6de5af80325f7b91e7573f89b16' }, index.h("slot", { key: '7b361c2d608b17cb91814d279aac842e666fda5a' })));
+        return (index.h(index.Host, { key: 'ab91ff1817e3388508ed1da7a9ed57a79cf8c4bc' }, index.h("slot", { key: '4a3280db78c1f0cd120a0cb32d95eabaf69995a6' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-tooltip.entry-DqFRA9_B.js → nv-tooltip.entry-BMxnZVYA.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-_oq_uffl.js');
+var index = require('./index-BObVnP12.js');
 require('react');
 require('react-dom');
 
@@ -46,7 +46,7 @@ const NvTooltip = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'bbf9407ca59c3e6122cbdc7c9e3aefe56b64311d' }, index.h("slot", { key: 'b13ae1307843e66cd018ce204c94147b53a26649' }), index.h("nv-popover", { key: '12d9bdca8d68eff93f6aa80304535df3be127c32', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: '6f4e64e97cc644f9da030e30b1069150c47c2985', slot: "content" }, this.message), index.h("slot", { key: '2b55d3b0c1279ce0a8bf165be1b26fe854e91d47', name: "content" }))));
+        return (index.h(index.Host, { key: 'c2fdcd47be909554e31a3a7d77cd94dcb07c0d6e' }, index.h("slot", { key: '2305f6b7175d0ba84819351f60f2a4d76d117df9' }), index.h("nv-popover", { key: 'e388730b5858671d08981c6bbf72588a5084edbf', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: '73f548a1c822f7c6d5a97bb4ef8da0d335cf049e', slot: "content" }, this.message), index.h("slot", { key: 'abb7a2dfa6a327122732802a867c5d4057fd1616', name: "content" }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/components/NvDatatable.js

@@ -1,7 +1,7 @@
 import React, { useMemo, useState, useEffect, useRef, } from 'react';
 import { flexRender, getCoreRowModel, getPaginationRowModel, useReactTable, } from '@tanstack/react-table';
 import { NvTable } from '../generated/components';
-const NvDatatable = ({ columns, rows, pagination, renderPagination, stickyHeader, ...htmlProps }) => {
+function NvDatatable({ columns, rows, pagination, renderPagination, stickyHeader, ...htmlProps }) {
     const [paginationState, setPaginationState] = useState({
         pageIndex: 0,
         pageSize: pagination?.initialPageSize || 10,
@@ -11,6 +11,16 @@ const NvDatatable = ({ columns, rows, pagination, renderPagination, stickyHeader
         .filter((col) => !col.hidden)
         .map((col) => ({
         accessorKey: col.field,
+        accessorFn: col.valueFormatter
+            ? (row) => {
+                const rawValue = row[col.field];
+                return col.valueFormatter({
+                    value: rawValue,
+                    row,
+                    field: col.field,
+                });
+            }
+            : undefined,
         header: col.headerName || String(col.field),
         size: col.width,
         enableResizing: col.resizable ?? true,
@@ -143,6 +153,11 @@ const NvDatatable = ({ columns, rows, pagination, renderPagination, stickyHeader
                     return (React.createElement("tr", { key: row.id, "data-testid": `datatable-row-${row.id}`, ref: isLastRow ? lastRowRef : undefined }, row.getVisibleCells().map((cell) => (React.createElement("td", { key: cell.id, "data-testid": `datatable-cell-${cell.id}` }, flexRender(cell.column.columnDef.cell, cell.getContext()))))));
                 })))),
         paginationAPI && renderPagination && renderPagination(paginationAPI)));
-};
+}
 NvDatatable.displayName = 'NvDatatable';
 export { NvDatatable };
+export function makeColumn() {
+    return function define(col) {
+        return col;
+    };
+}

package/dist/generated/components.js

@@ -209,6 +209,8 @@ export const NvFielddropdown = createComponent({
     react: React,
     events: {
         onValueChanged: 'valueChanged',
+        onFilterTextChanged: 'filterTextChanged',
+        onOpenChanged: 'openChanged',
         onDropdownItemSelected: 'dropdownItemSelected'
     },
     defineCustomElement: defineNvFielddropdown

package/dist/generated/components.server.js

@@ -311,9 +311,10 @@ export const NvFielddropdown = createComponent({
         error: 'error',
         errorDescription: 'error-description',
         maxHeight: 'max-height',
-        open: 'open',
         emptyResult: 'empty-result',
         filterable: 'filterable',
+        openOnSelect: 'open-on-select',
+        controlledFilter: 'controlled-filter',
         debounceDelay: 'debounce-delay',
         autofocus: 'autofocus',
         fluid: 'fluid'
@@ -327,7 +328,8 @@ export const NvFielddropdownitem = createComponent({
         disabled: 'disabled',
         selected: 'selected',
         value: 'value',
-        label: 'label'
+        label: 'label',
+        detached: 'detached'
     },
     hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
     serializeShadowRoot

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

@@ -1,9 +1,11 @@
 import React, { type ComponentProps } from 'react';
-declare const NvDatatable: {
-    <T extends NvDatatableRow = NvDatatableRow>({ columns, rows, pagination, renderPagination, stickyHeader, ...htmlProps }: NvDatatableProps<T>): React.JSX.Element;
-    displayName: string;
-};
+import { type NoInfer } from '@tanstack/react-table';
+declare function NvDatatable<T>({ columns, rows, pagination, renderPagination, stickyHeader, ...htmlProps }: NvDatatableProps<T>): React.JSX.Element;
+declare namespace NvDatatable {
+    var displayName: string;
+}
 export { NvDatatable };
+export declare function makeColumn<Row>(): <K extends keyof Row, F = Row[K]>(col: NvDatatableColumn<Row, K, F>) => NvDatatableColumn<Row, keyof Row, Row[keyof Row]>;
 export type NvDatatableProps<T> = {
     columns: Array<NvDatatableColumn<T>>;
     rows: Array<T>;
@@ -11,6 +13,26 @@ export type NvDatatableProps<T> = {
     renderPagination?: (api: NvDatatableRenderPaginationAPI) => React.ReactNode;
     stickyHeader?: boolean;
 } & Pick<ComponentProps<'div'>, 'className' | 'style'>;
+export interface NvDatatableColumn<Row, K extends keyof Row = keyof Row, F = Row[K]> {
+    field: K;
+    headerName?: string;
+    width?: number;
+    resizable?: boolean;
+    hidden?: boolean;
+    valueFormatter?: (params: NvTableValueFormatterParams<Row, Row[K], K>) => F;
+    renderCell?: (params: NvTableRenderCellParams<Row, F, K>) => React.ReactNode;
+}
+export interface NvTableRenderCellParams<Row, Value, Field> {
+    value: Value | NoInfer<Value>;
+    row: Row;
+    field: Field;
+    rowIndex: number;
+}
+export interface NvTableValueFormatterParams<Row, Value, Field> {
+    value: Value;
+    row: Row;
+    field: Field;
+}
 export interface NvDatatablePaginationConfig {
     mode: 'client' | 'server' | 'infinite';
     initialPageSize?: number;
@@ -42,18 +64,3 @@ export interface NvDatatableRenderPaginationAPI {
     isLoading?: boolean;
     hasMore?: boolean;
 }
-export interface NvDatatableColumn<T> {
-    field: keyof T;
-    headerName?: string;
-    width?: number;
-    resizable?: boolean;
-    hidden?: boolean;
-    renderCell?: (params: NvTableRenderCellParams<T, T[keyof T]>) => React.ReactNode;
-}
-export type NvDatatableRow = Record<string, string | number | boolean | null | undefined | typeof Date>;
-export interface NvTableRenderCellParams<T, V> {
-    value: V;
-    row: T;
-    field: keyof T;
-    rowIndex: number;
-}

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

@@ -132,6 +132,8 @@ export type NvFielddaterangeEvents = {
 export declare const NvFielddaterange: StencilReactComponent<NvFielddaterangeElement, NvFielddaterangeEvents>;
 export type NvFielddropdownEvents = {
     onValueChanged: EventName<CustomEvent<string>>;
+    onFilterTextChanged: EventName<CustomEvent<string>>;
+    onOpenChanged: EventName<NvFielddropdownCustomEvent<HTMLNvPopoverElementEventMap['openChanged']>>;
     onDropdownItemSelected: EventName<NvFielddropdownCustomEvent<HTMLNvFielddropdownitemElementEventMap['dropdownItemSelected']>>;
 };
 export declare const NvFielddropdown: StencilReactComponent<NvFielddropdownElement, NvFielddropdownEvents>;
@@ -139,6 +141,7 @@ export type NvFielddropdownitemEvents = {
     onDropdownItemSelected: EventName<CustomEvent<{
         label?: string;
         value: string;
+        detached?: boolean;
     }>>;
 };
 export declare const NvFielddropdownitem: StencilReactComponent<NvFielddropdownitemElement, NvFielddropdownitemEvents>;
@@ -156,7 +159,7 @@ export type NvFieldmultiselectEvents = {
 };
 export declare const NvFieldmultiselect: StencilReactComponent<NvFieldmultiselectElement, NvFieldmultiselectEvents>;
 export type NvFieldnumberEvents = {
-    onValueChanged: EventName<CustomEvent<number>>;
+    onValueChanged: EventName<CustomEvent<number | null>>;
 };
 export declare const NvFieldnumber: StencilReactComponent<NvFieldnumberElement, NvFieldnumberEvents>;
 export type NvFieldpasswordEvents = {

package/dist/types/generated/components.server.d.ts

@@ -134,6 +134,8 @@ export type NvFielddaterangeEvents = {
 export declare const NvFielddaterange: StencilReactComponent<NvFielddaterangeElement, NvFielddaterangeEvents>;
 export type NvFielddropdownEvents = {
     onValueChanged: EventName<CustomEvent<string>>;
+    onFilterTextChanged: EventName<CustomEvent<string>>;
+    onOpenChanged: EventName<NvFielddropdownCustomEvent<HTMLNvPopoverElementEventMap['openChanged']>>;
     onDropdownItemSelected: EventName<NvFielddropdownCustomEvent<HTMLNvFielddropdownitemElementEventMap['dropdownItemSelected']>>;
 };
 export declare const NvFielddropdown: StencilReactComponent<NvFielddropdownElement, NvFielddropdownEvents>;
@@ -141,6 +143,7 @@ export type NvFielddropdownitemEvents = {
     onDropdownItemSelected: EventName<CustomEvent<{
         label?: string;
         value: string;
+        detached?: boolean;
     }>>;
 };
 export declare const NvFielddropdownitem: StencilReactComponent<NvFielddropdownitemElement, NvFielddropdownitemEvents>;
@@ -158,7 +161,7 @@ export type NvFieldmultiselectEvents = {
 };
 export declare const NvFieldmultiselect: StencilReactComponent<NvFieldmultiselectElement, NvFieldmultiselectEvents>;
 export type NvFieldnumberEvents = {
-    onValueChanged: EventName<CustomEvent<number>>;
+    onValueChanged: EventName<CustomEvent<number | null>>;
 };
 export declare const NvFieldnumber: StencilReactComponent<NvFieldnumberElement, NvFieldnumberEvents>;
 export type NvFieldpasswordEvents = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-react",
-  "version": "3.18.0",
+  "version": "3.20.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",