@nova-design-system/nova-react 3.29.0 → 3.30.0

package/dist/cjs/{nv-tableheader.entry-CK50S8xW.js → nv-tableheader.entry-AWCKrpLj.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DgKzi_Pd.js');
+var index = require('./index-DXwd3F_r.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -62,7 +62,7 @@ const NvTableheader = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '962f555a02b3035148c5915ae7493c68c0202cc7', 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: '0e69da3d4e2eb8ad01060f51d5043ffc14380415' }), this.sortable && (index.h("span", { key: 'a9b5ff97552d142cc3e1becc14a34ebab1f3092d', class: "sort-icon-wrap", "aria-hidden": "true" }, index.h("nv-iconbutton", { key: '76f832eba2b57f244dbce597668f493a918cf599', disableTabindex: true, name: "arrow-up", size: "xs", emphasis: this.sortDirection === 'none' ? 'lower' : 'low',
+        return (index.h(index.Host, { key: '1edf4d679b60517b8fdc239a1bc9e91fc55990ab', 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: '33d9ae13cbae6d34cf374bc626bc616c57e43322' }), this.sortable && (index.h("span", { key: '61e15b2af831a97051590e31369b42774f13ae53', class: "sort-icon-wrap", "aria-hidden": "true" }, index.h("nv-iconbutton", { key: 'e8cefc8559de91c2e892547b56eb51d5bc103c1c', 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-tag.entry-BwENpoSV.js

@@ -0,0 +1,85 @@
+'use strict';
+
+var index = require('./index-DXwd3F_r.js');
+var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+const nvTagCss = () => `nv-tag{display:inline-flex;align-items:center;gap:var(--tag-gap-x);padding:0 var(--tag-padding-x);border-radius:var(--tag-border-radius);border:1px solid;overflow:hidden;font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium-emphasis);line-height:var(--line-height-xs);height:var(--tag-height);width:fit-content;vertical-align:middle}nv-tag.has-dismiss{padding-right:0}nv-tag.tag-orange{color:var(--color-rainbow-2-text);background-color:var(--color-rainbow-2-background);border-color:var(--color-rainbow-2-border-light)}nv-tag.tag-orange nv-icon{color:var(--color-rainbow-2-icon)}nv-tag.tag-orange .nv-tag-content:focus,nv-tag.tag-orange .nv-tag-content:focus-within{outline:none}nv-tag.tag-orange .nv-tag-content:focus-visible,nv-tag.tag-orange .nv-tag-content:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-2-text);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-tag.tag-crimson{color:var(--color-rainbow-6-text);background-color:var(--color-rainbow-6-background);border-color:var(--color-rainbow-6-border-light)}nv-tag.tag-crimson nv-icon{color:var(--color-rainbow-6-icon)}nv-tag.tag-crimson .nv-tag-content:focus,nv-tag.tag-crimson .nv-tag-content:focus-within{outline:none}nv-tag.tag-crimson .nv-tag-content:focus-visible,nv-tag.tag-crimson .nv-tag-content:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-6-text);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-tag.tag-yellow{color:var(--color-rainbow-3-text);background-color:var(--color-rainbow-3-background);border-color:var(--color-rainbow-3-border-light)}nv-tag.tag-yellow nv-icon{color:var(--color-rainbow-3-icon)}nv-tag.tag-yellow .nv-tag-content:focus,nv-tag.tag-yellow .nv-tag-content:focus-within{outline:none}nv-tag.tag-yellow .nv-tag-content:focus-visible,nv-tag.tag-yellow .nv-tag-content:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-3-text);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-tag.tag-red{color:var(--color-rainbow-4-text);background-color:var(--color-rainbow-4-background);border-color:var(--color-rainbow-4-border-light)}nv-tag.tag-red nv-icon{color:var(--color-rainbow-4-icon)}nv-tag.tag-red .nv-tag-content:focus,nv-tag.tag-red .nv-tag-content:focus-within{outline:none}nv-tag.tag-red .nv-tag-content:focus-visible,nv-tag.tag-red .nv-tag-content:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-4-text);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-tag.tag-blue{color:var(--color-rainbow-8-text);background-color:var(--color-rainbow-8-background);border-color:var(--color-rainbow-8-border-light)}nv-tag.tag-blue nv-icon{color:var(--color-rainbow-8-icon)}nv-tag.tag-blue .nv-tag-content:focus,nv-tag.tag-blue .nv-tag-content:focus-within{outline:none}nv-tag.tag-blue .nv-tag-content:focus-visible,nv-tag.tag-blue .nv-tag-content:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-8-text);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-tag.tag-amber{color:var(--color-rainbow-1-text);background-color:var(--color-rainbow-1-background);border-color:var(--color-rainbow-1-border-light)}nv-tag.tag-amber nv-icon{color:var(--color-rainbow-1-icon)}nv-tag.tag-amber .nv-tag-content:focus,nv-tag.tag-amber .nv-tag-content:focus-within{outline:none}nv-tag.tag-amber .nv-tag-content:focus-visible,nv-tag.tag-amber .nv-tag-content:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-1-text);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-tag.tag-green{color:var(--color-rainbow-7-text);background-color:var(--color-rainbow-7-background);border-color:var(--color-rainbow-7-border-light)}nv-tag.tag-green nv-icon{color:var(--color-rainbow-7-icon)}nv-tag.tag-green .nv-tag-content:focus,nv-tag.tag-green .nv-tag-content:focus-within{outline:none}nv-tag.tag-green .nv-tag-content:focus-visible,nv-tag.tag-green .nv-tag-content:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-7-text);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-tag.tag-turquoise{color:var(--color-rainbow-5-text);background-color:var(--color-rainbow-5-background);border-color:var(--color-rainbow-5-border-light)}nv-tag.tag-turquoise nv-icon{color:var(--color-rainbow-5-icon)}nv-tag.tag-turquoise .nv-tag-content:focus,nv-tag.tag-turquoise .nv-tag-content:focus-within{outline:none}nv-tag.tag-turquoise .nv-tag-content:focus-visible,nv-tag.tag-turquoise .nv-tag-content:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-5-text);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-tag.tag-lime{color:var(--color-rainbow-9-text);background-color:var(--color-rainbow-9-background);border-color:var(--color-rainbow-9-border-light)}nv-tag.tag-lime nv-icon{color:var(--color-rainbow-9-icon)}nv-tag.tag-lime .nv-tag-content:focus,nv-tag.tag-lime .nv-tag-content:focus-within{outline:none}nv-tag.tag-lime .nv-tag-content:focus-visible,nv-tag.tag-lime .nv-tag-content:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-9-text);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-tag.tag-grey{color:var(--color-rainbow-10-text);background-color:var(--color-rainbow-10-background);border-color:var(--color-rainbow-10-border-light)}nv-tag.tag-grey nv-icon{color:var(--color-rainbow-10-icon)}nv-tag.tag-grey .nv-tag-content:focus,nv-tag.tag-grey .nv-tag-content:focus-within{outline:none}nv-tag.tag-grey .nv-tag-content:focus-visible,nv-tag.tag-grey .nv-tag-content:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-10-text);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-tag .nv-tag-leading{display:contents}nv-tag .nv-tag-label{white-space:nowrap}nv-tag .nv-tag-content{display:inline-flex;align-items:center;gap:var(--tag-gap-x);color:inherit;text-decoration:none;border-radius:var(--tag-border-radius)}nv-tag.is-link .nv-tag-content{cursor:pointer}nv-tag.is-link .nv-tag-content:hover{text-decoration:underline}nv-tag .nv-tag-dismiss{padding:0;margin:0;line-height:0;border:none;background:none;cursor:pointer;color:inherit;display:inline-flex;align-items:center;justify-content:center;width:var(--tag-height);height:var(--tag-height);border-radius:0;appearance:none}nv-tag .nv-tag-dismiss:focus,nv-tag .nv-tag-dismiss:focus-within{outline:none}nv-tag .nv-tag-dismiss:focus-visible{border-radius:0;box-shadow:inset 0 0 0 var(--focus-outline-stroke) var(--color-focus-brand)}nv-tag .nv-tag-dismiss:hover{background-color:var(--color-interaction-container-neutral-background-hover);mix-blend-mode:multiply}nv-tag .nv-tag-dismiss:disabled{opacity:var(--opacity-disabled);pointer-events:none;cursor:default}nv-tag nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}`;
+
+const NvTag = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dismissed = index.createEvent(this, "dismissed", 3);
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * The color variant of the tag.
+         */
+        this.color = 'grey';
+        /**
+         * Whether the tag can be dismissed.
+         */
+        this.dismissible = false;
+        /**
+         * The browsing context for the link.
+         */
+        this.target = '_self';
+        /**
+         * Whether the dismiss button is disabled.
+         */
+        this.disabled = false;
+        //#endregion EVENTS
+        /****************************************************************************/
+        //#region METHODS
+        /**
+         * Handles the dismiss button click.
+         * @param {MouseEvent} event - The click event.
+         */
+        this.handleDismiss = (event) => {
+            event.stopPropagation();
+            this.dismissed.emit({ label: this.label });
+        };
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region RENDER
+    /**
+     * Renders the tag content (icon + label).
+     * @returns {unknown} The tag content JSX.
+     */
+    renderContent() {
+        return [
+            index.h("span", { class: "nv-tag-leading", "aria-hidden": "true" }, index.h("slot", { name: "leading-icon" })),
+            index.h("span", { class: "nv-tag-label" }, this.label),
+        ];
+    }
+    /**
+     * Computes the rel attribute for the anchor.
+     * @returns {string | undefined} The computed rel value.
+     */
+    computeRel() {
+        if (this.href == null)
+            return undefined;
+        if (this.rel)
+            return this.rel;
+        if (this.target === '_blank')
+            return 'noopener noreferrer';
+        return undefined;
+    }
+    render() {
+        const isLink = this.href != null;
+        const TagContent = isLink ? 'a' : 'span';
+        const anchorProps = isLink
+            ? { href: this.href, target: this.target, rel: this.computeRel() }
+            : {};
+        return (index.h(index.Host, { key: '91f8ca597d894aaa486f1323e85b5f41a20cd964', class: clsxChV9xqsO.clsx(`tag-${this.color}`, {
+                'has-dismiss': this.dismissible,
+                'is-link': isLink,
+            }) }, index.h(TagContent, { key: 'fb92a9c11d119770e9cea1091a9a3efcd988a132', class: "nv-tag-content", ...anchorProps }, this.renderContent()), this.dismissible && (index.h("button", { key: '8d66bfae4867b83bc24ea316237fb64347fd494b', class: "nv-tag-dismiss", type: "button", "aria-label": this.label ? `Remove ${this.label}` : undefined, disabled: this.disabled, onClick: this.handleDismiss }, index.h("nv-icon", { key: 'd271fc3152cfe7bcca19b372f2bf313b339e9c37', name: "x", size: "xs" })))));
+    }
+};
+NvTag.style = nvTagCss();
+
+exports.nv_tag = NvTag;

package/dist/cjs/{nv-timetest.entry-A9elKwkf.js → nv-timetest.entry-BQsV7Qb2.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DgKzi_Pd.js');
+var index = require('./index-DXwd3F_r.js');
 var novaDatetimeCyL2J6O4 = require('./nova-datetime-CyL2J6O4-0Y9g3rfI.js');
 require('@stencil/react-output-target/runtime');
 require('react');
@@ -67,7 +67,7 @@ const NvTimetest = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '85d3773d49a180e5bc9b5bc0962cc3b709a474b0' }, index.h("label", { key: 'c0d5c262578e6aa1555ded8c542e2eef7e42d491' }, "Start:", index.h("input", { key: '31fe9447be14efd87aab1161dbc01593a30328dc', type: "time", step: "1", value: this.value?.start ?? '', onInput: this.handleStartChange })), index.h("label", { key: '0959b432f53169c425765b94c098ca5ecc8d6ede' }, "End:", index.h("input", { key: 'ccc50a80dfea2ab7eb627d11840dd5626ca25f88', type: "time", step: "1", value: this.value?.end ?? '', onInput: this.handleEndChange })), index.h("slot", { key: 'd4c6a017d41102a245e1f8472d676bc866382c00' })));
+        return (index.h(index.Host, { key: 'c9c68e93ef3e0ab01e06918f707c89a6b7bd650b' }, index.h("label", { key: '418d4bea5711e9db888650aff9e8b89bc0945710' }, "Start:", index.h("input", { key: '15eeee721a64b4c2811814c7d3c7303c84dfb071', type: "time", step: "1", value: this.value?.start ?? '', onInput: this.handleStartChange })), index.h("label", { key: 'e21457f05d522370ed8dccbb228b20207fe0b973' }, "End:", index.h("input", { key: '856e9a1bce12c51c49c1f666e37d4b8d0d878960', type: "time", step: "1", value: this.value?.end ?? '', onInput: this.handleEndChange })), index.h("slot", { key: '983319380ff04eaaca09a0ffcd9f50523f235580' })));
     }
 };
 NvTimetest.style = nvTimetestCss();

package/dist/cjs/{nv-toggle.entry-BGu-6rEs.js → nv-toggle.entry-a0tSJ6GE.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DgKzi_Pd.js');
+var index = require('./index-DXwd3F_r.js');
 var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
 var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
 require('@stencil/react-output-target/runtime');
@@ -66,8 +66,8 @@ const NvToggle = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '39ad1374bbf8cd5393a99dc4c18fa28091dc5e90', class: clsxChV9xqsO.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: '3a8be2405404975398f1a0dae05c0855b913245f', class: "input-container" }, index.h("input", { key: 'b589b9faa5801f99e698d0e664e0a35779a1271f', 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: 'a3308782b02b1c0eca3d6a1b87509674b9bc5c13', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '854b2ffe7bf61423512154ffe8b3b0351a2950a4', htmlFor: this.inputId, class: clsxChV9xqsO.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '933bf88b7841f3b2ed24c3bb86fb24159eaac900', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '5a04358d1be3b935239bb23e1466cc22ed2f3b48', class: "description" }, index.h("slot", { key: 'f5c1513eff6ee42bc171b0088baec634f8458197', name: "description" }, this.description))))));
+        return (index.h(index.Host, { key: 'b2bf7956fbe102ff780e87bc731c8d558a6890fe', class: clsxChV9xqsO.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: '920b35e98be9f6ef90489a84307e6588c192e4c3', class: "input-container" }, index.h("input", { key: 'ae627fc038ca204d9e79d9643ba4e946a16fa76d', 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: '9c5c0ebba6f24aa9f0556b2c86d823b43c8dd142', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'c33b7d589cbc142dd5a318e78ebfbd97f17867c1', htmlFor: this.inputId, class: clsxChV9xqsO.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: 'b45490d577602efb5782aa0952112a28a063e167', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '5526f29f5f90c89c82c41ceb48e3ccc2d2454e2f', class: "description" }, index.h("slot", { key: '2ed5c8330514c7f6bb180483e8289228e84dcfa0', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/{nv-togglebutton.entry-BzAcBOgN.js → nv-togglebutton.entry-CT8fZr74.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DgKzi_Pd.js');
+var index = require('./index-DXwd3F_r.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -57,7 +57,7 @@ const NvTogglebutton = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '8e700d38ba155b977d4efa0d9e01b41e73fc4413', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: '92427015839f98b0d9238b8df6af8e08ee511153' })));
+        return (index.h(index.Host, { key: '0e5895e17effeef2164efdb6a0b414bb40fde21e', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: '9a7c2370e6ad8a7442fd9a7c3d4a172a41037103' })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/{nv-togglebuttongroup.entry-CIWp7IXc.js → nv-togglebuttongroup.entry-BN7WkQ_L.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DgKzi_Pd.js');
+var index = require('./index-DXwd3F_r.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -156,7 +156,7 @@ const NvTogglebuttongroup = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '2026cb95db8b57f2a1cd4ea53608f336843b63fe' }, index.h("slot", { key: '5c06ab59d6c99e789c3a1c3a8a4842a0772ca3a2' })));
+        return (index.h(index.Host, { key: '4428416f62c5e5f0713089cf7601babd5ee43161' }, index.h("slot", { key: '549cab50def8d37f072f83af0eea1bb4b55fe3e2' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-tooltip.entry-CoGkSHpv.js → nv-tooltip.entry-xpFqRgZM.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DgKzi_Pd.js');
+var index = require('./index-DXwd3F_r.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -52,7 +52,7 @@ const NvTooltip = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '8285fbb412cb45cc7baf2936f0405c0438395c8d' }, index.h("nv-popover", { key: '29d70e9baa826de35d2cdca88f48610d70ec55e4', ref: el => (this.popoverElement = el), triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, groupName: 'tooltip', enterDelay: this.enterDelay, onOpenChanged: e => this.openChanged.emit(e.detail) }, index.h("p", { key: 'a9c907fa96f9c4108a8d84cec53981218c060811', slot: "content" }, this.message), index.h("slot", { key: 'af1b7ac8069071fe2d41e925f1c0090f8b6aaab5', name: "content" })), index.h("slot", { key: 'e5d3c6d16fb7e4a682b66e0016d9e4e30e5647e0', ref: el => (this.defaultSlot = el) })));
+        return (index.h(index.Host, { key: '6eccd65d55ddfaba863959cd49dd9f404a0f0790' }, index.h("nv-popover", { key: '9be6e361b11d259b1b8f7b006c41bb62e69141b9', ref: el => (this.popoverElement = el), triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, groupName: 'tooltip', enterDelay: this.enterDelay, onOpenChanged: e => this.openChanged.emit(e.detail) }, index.h("p", { key: 'a8ac3ddeb4ec1e4fe93bf5344ef35a0712fc60c3', slot: "content" }, this.message), index.h("slot", { key: '67f9e9c245910c5f0e4e0e515872a332f9065055', name: "content" })), index.h("slot", { key: '453d0a071793edcdba9fd100bb0161d70c82a506', ref: el => (this.defaultSlot = el) })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/components/NvDatatable/NvDatatable.js

@@ -1,13 +1,15 @@
 import React, { useMemo, useState, useEffect, useRef, useCallback, } from 'react';
-import { flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, getFilteredRowModel, useReactTable, } from '@tanstack/react-table';
-import { NvTable, NvTableheader, NvPaginationtable, NvFieldcheckbox, } from '../../generated/components';
+import { flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, getFilteredRowModel, getExpandedRowModel, useReactTable, } from '@tanstack/react-table';
+import { NvTable, NvTableheader, NvPaginationtable, NvFieldcheckbox, NvIconbutton, } from '../../generated/components';
 import { defineCustomElement as defineNvPaginationtable } from '@nova-design-system/nova-webcomponents/dist/components/nv-paginationtable.js';
 if (typeof window !== 'undefined' &&
     !customElements.get('nv-paginationtable')) {
     defineNvPaginationtable();
 }
 import { applyRowSelection, applySelectAllSelection, shouldIgnoreSelectAllEvent, } from './selectionState';
-function NvDatatable({ mode = 'client', columns, rows, pagination, sorting, filtering, selection, renderPagination, renderFiltering, onRowClick, stickyHeader, ...htmlProps }) {
+import { shouldShowExpandedContent } from './expandState';
+import { resolvePaginationRowCount } from './paginationState';
+function NvDatatable({ mode = 'client', columns, rows, pagination, sorting, filtering, selection, renderPagination, renderFiltering, onRowClick, expandable, stickyHeader, ...htmlProps }) {
     const areSetsEqual = useCallback((a, b) => {
         if (a.size !== b.size) {
             return false;
@@ -24,7 +26,7 @@ function NvDatatable({ mode = 'client', columns, rows, pagination, sorting, filt
         pageIndex: 0,
         pageSize: pagination?.initialPageSize || 10,
     });
-    const [sortingState, setSortingState] = useState(sorting?.sortState || []);
+    const [sortingState, setSortingState] = useState(sorting?.sortState ?? sorting?.initialSortState ?? []);
     const [globalFilterState, setGlobalFilterState] = useState(filtering?.filterState);
     const [selectedRowIdsState, setSelectedRowIdsState] = useState(() => new Set(selection?.selectedRowIds ?? []));
     const selectedRowIdsRef = useRef(new Set(selection?.selectedRowIds ?? []));
@@ -32,6 +34,14 @@ function NvDatatable({ mode = 'client', columns, rows, pagination, sorting, filt
     const selectionEnabled = selectionMode !== 'none';
     const selectAllEnabled = selection?.enableSelectAll ?? true;
     const rowClickEnabled = typeof onRowClick === 'function';
+    const hasExpandable = !!expandable;
+    const isCollapsible = expandable?.collapsible ?? false;
+    const [expandedState, setExpandedState] = useState(expandable?.expandedState ?? {});
+    useEffect(() => {
+        if (expandable?.expandedState !== undefined) {
+            setExpandedState(expandable.expandedState);
+        }
+    }, [expandable?.expandedState]);
     const getSelectionRowId = useCallback((row) => selection?.getRowId?.(row) ?? '', [selection]);
     const lastRowRef = useRef(null);
     const selectAllIntentRef = useRef(false);
@@ -140,29 +150,66 @@ function NvDatatable({ mode = 'client', columns, rows, pagination, sorting, filt
             }
             return columnDef;
         });
-        if (!selectionEnabled) {
-            return dataColumns;
-        }
-        const selectionColumn = {
-            id: '__selection__',
-            header: '',
-            size: selection?.checkboxColumnWidth ?? 48,
-            enableResizing: false,
-            enableSorting: false,
-            cell: () => null,
-        };
-        return [selectionColumn, ...dataColumns];
-    }, [columns, sorting, selectionEnabled, selection?.checkboxColumnWidth]);
+        const prefixColumns = [];
+        const isCombinedColumn = selectionEnabled && isCollapsible;
+        if (isCombinedColumn) {
+            prefixColumns.push({
+                id: '__selection_expand__',
+                header: '',
+                size: (selection?.checkboxColumnWidth ?? 48) +
+                    (expandable?.toggleColumnWidth ?? 48),
+                enableResizing: false,
+                enableSorting: false,
+                cell: () => null,
+            });
+        }
+        else {
+            if (selectionEnabled) {
+                prefixColumns.push({
+                    id: '__selection__',
+                    header: '',
+                    size: selection?.checkboxColumnWidth ?? 48,
+                    enableResizing: false,
+                    enableSorting: false,
+                    cell: () => null,
+                });
+            }
+            if (isCollapsible) {
+                prefixColumns.push({
+                    id: '__expand__',
+                    header: '',
+                    size: expandable?.toggleColumnWidth ?? 48,
+                    enableResizing: false,
+                    enableSorting: false,
+                    cell: () => null,
+                });
+            }
+        }
+        return [...prefixColumns, ...dataColumns];
+    }, [
+        columns,
+        sorting,
+        selectionEnabled,
+        selection?.checkboxColumnWidth,
+        isCollapsible,
+        expandable?.toggleColumnWidth,
+    ]);
     const tableConfig = useMemo(() => {
+        const tableState = {};
+        if (sorting) {
+            tableState.sorting = sorting.sortState || sortingState;
+        }
+        if (filtering) {
+            tableState.globalFilter = globalFilterState;
+        }
+        if (isCollapsible) {
+            tableState.expanded = expandable?.expandedState ?? expandedState;
+        }
         const baseConfig = {
             data: rows,
             columns: tableColumns,
             getCoreRowModel: getCoreRowModel(),
             ...(sorting && {
-                state: {
-                    sorting: sorting.sortState || sortingState,
-                    ...(filtering && { globalFilter: globalFilterState }),
-                },
                 onSortingChange: mode === 'server'
                     ? (updater) => {
                         const newSort = typeof updater === 'function'
@@ -182,10 +229,6 @@ function NvDatatable({ mode = 'client', columns, rows, pagination, sorting, filt
                 getSortedRowModel: mode === 'client' ? getSortedRowModel() : undefined,
             }),
             ...(filtering && {
-                state: {
-                    ...(sorting && { sorting: sorting.sortState || sortingState }),
-                    globalFilter: globalFilterState,
-                },
                 onGlobalFilterChange: (updater) => {
                     const newFilter = typeof updater === 'function'
                         ? updater(globalFilterState)
@@ -198,6 +241,20 @@ function NvDatatable({ mode = 'client', columns, rows, pagination, sorting, filt
                 globalFilterFn: filtering.globalFilterFn,
                 getFilteredRowModel: mode === 'client' ? getFilteredRowModel() : undefined,
             }),
+            ...(isCollapsible && {
+                getExpandedRowModel: getExpandedRowModel(),
+                getRowCanExpand: expandable?.getRowCanExpand
+                    ? (row) => expandable.getRowCanExpand(row.original)
+                    : () => true,
+                onExpandedChange: (updater) => {
+                    const newExpanded = typeof updater === 'function'
+                        ? updater(expandedState)
+                        : updater;
+                    setExpandedState(newExpanded);
+                    expandable?.onExpandedChange?.(newExpanded);
+                },
+            }),
+            ...(Object.keys(tableState).length > 0 && { state: tableState }),
         };
         if (!pagination) {
             return baseConfig;
@@ -243,6 +300,9 @@ function NvDatatable({ mode = 'client', columns, rows, pagination, sorting, filt
         sortingState,
         filtering,
         globalFilterState,
+        isCollapsible,
+        expandable,
+        expandedState,
         mode,
     ]);
     const table = useReactTable(tableConfig);
@@ -436,9 +496,14 @@ function NvDatatable({ mode = 'client', columns, rows, pagination, sorting, filt
             return null;
         }
         const pageCount = table.getPageCount();
-        const rowCount = mode === 'server' && !pagination.infinite
-            ? pagination.totalRowCount || rows.length
-            : rows.length;
+        const rowCount = resolvePaginationRowCount({
+            mode,
+            isInfinite: !!pagination.infinite,
+            hasFiltering: !!filtering,
+            totalRowCount: pagination.totalRowCount,
+            rowsLength: rows.length,
+            filteredRowsLength: table.getFilteredRowModel().rows.length,
+        });
         const api = {
             pageIndex: tablePaginationState.pageIndex,
             pageSize: tablePaginationState.pageSize,
@@ -557,23 +622,32 @@ function NvDatatable({ mode = 'client', columns, rows, pagination, sorting, filt
                 }
             } }));
     }, [getSelectionRowId, isRowSelected, setRowSelection]);
+    const renderExpandToggle = useCallback((row, rowIndex) => {
+        const isExpanded = row.getIsExpanded();
+        const canExpand = row.getCanExpand();
+        const expandedContentId = `datatable-expanded-content-${rowIndex}`;
+        if (!canExpand) {
+            return null;
+        }
+        return (React.createElement(NvIconbutton, { "data-testid": `datatable-row-${rowIndex}-expand-toggle`, "aria-expanded": isExpanded ? 'true' : 'false', "aria-controls": expandedContentId, "aria-label": isExpanded
+                ? `Collapse row ${rowIndex + 1}`
+                : `Expand row ${rowIndex + 1}`, onClick: (e) => {
+                e.stopPropagation();
+                row.toggleExpanded();
+            }, name: isExpanded ? 'chevron-down' : 'chevron-right', size: "sm", emphasis: "lower" }));
+    }, []);
     return (React.createElement(React.Fragment, null,
         filteringAPI && renderFiltering && renderFiltering(filteringAPI),
         React.createElement(NvTable, { ...htmlProps },
             React.createElement("table", { "data-row-click-enabled": rowClickEnabled ? 'true' : 'false' },
                 React.createElement("thead", { "data-sticky-top": stickyHeader ? 'true' : undefined }, table.getHeaderGroups().map((headerGroup) => (React.createElement("tr", { key: headerGroup.id }, headerGroup.headers.map((header) => {
                     const isSelectionHeader = header.id === '__selection__';
+                    const isExpandHeader = header.id === '__expand__';
+                    const isCombinedHeader = header.id === '__selection_expand__';
+                    const isSpecialHeader = isSelectionHeader || isExpandHeader || isCombinedHeader;
                     const canSort = header.column.getCanSort();
                     const sortDirection = header.column.getIsSorted();
-                    return (React.createElement("th", { key: header.id, "data-testid": isSelectionHeader
-                            ? 'datatable-header-selection'
-                            : `datatable-header-${header.id}`, style: {
-                            width: header.column.columnDef.size + 'px',
-                        }, "data-no-resize": isSelectionHeader
-                            ? true
-                            : header.column.columnDef.enableResizing
-                                ? null
-                                : true }, isSelectionHeader ? (selectionMode === 'multiple' && selectAllEnabled ? (React.createElement("div", { className: "flex items-center justify-center" },
+                    const renderSelectAllCheckbox = selectionMode === 'multiple' && selectAllEnabled ? (React.createElement("div", { className: "flex items-center justify-center" },
                         React.createElement(NvFieldcheckbox, { "data-testid": "datatable-select-all-checkbox", checked: selectAllState === 'checked', indeterminate: selectAllState === 'indeterminate', label: "Select all rows", hideLabel: true, onPointerDownCapture: () => {
                                 if (selectAllIntentResetTimerRef.current) {
                                     clearTimeout(selectAllIntentResetTimerRef.current);
@@ -591,7 +665,20 @@ function NvDatatable({ mode = 'client', columns, rows, pagination, sorting, filt
                                 finally {
                                     selectAllIntentRef.current = false;
                                 }
-                            } }))) : null) : (React.createElement(NvTableheader, { sortable: canSort ? true : undefined, sortDirection: sortDirection || (canSort ? 'none' : undefined), onSortDirectionChanged: canSort
+                            } }))) : null;
+                    return (React.createElement("th", { key: header.id, "data-testid": isSelectionHeader
+                            ? 'datatable-header-selection'
+                            : isExpandHeader
+                                ? 'datatable-header-expand'
+                                : isCombinedHeader
+                                    ? 'datatable-header-selection-expand'
+                                    : `datatable-header-${header.id}`, style: {
+                            width: header.column.columnDef.size + 'px',
+                        }, "data-no-resize": isSpecialHeader
+                            ? true
+                            : header.column.columnDef.enableResizing
+                                ? null
+                                : true }, isSelectionHeader ? (renderSelectAllCheckbox) : isCombinedHeader ? (renderSelectAllCheckbox) : isExpandHeader ? null : (React.createElement(NvTableheader, { sortable: canSort ? true : undefined, sortDirection: sortDirection || (canSort ? 'none' : undefined), onSortDirectionChanged: canSort
                             ? header.column.getToggleSortingHandler()
                             : undefined }, header.isPlaceholder
                         ? null
@@ -600,28 +687,58 @@ function NvDatatable({ mode = 'client', columns, rows, pagination, sorting, filt
                 React.createElement("tbody", null, tableRows.map((row, index) => {
                     const isLastRow = isInfiniteScroll && index === tableRows.length - 1;
                     const stableRowKey = getSelectionRowId(row.original) || row.id;
-                    return (React.createElement("tr", { key: stableRowKey, "data-testid": `datatable-row-${index}`, ref: isLastRow ? lastRowRef : undefined, className: rowClickEnabled ? 'nv-datatable-row-clickable' : undefined, tabIndex: rowClickEnabled ? 0 : undefined, onClick: rowClickEnabled
-                            ? () => onRowClick?.({ row: row.original, rowIndex: index })
-                            : undefined, onKeyDown: rowClickEnabled
-                            ? (event) => {
-                                if (event.currentTarget !== event.target) {
-                                    return;
-                                }
-                                if (event.key === 'Enter' || event.key === ' ') {
-                                    event.preventDefault();
-                                    onRowClick?.({
-                                        row: row.original,
-                                        rowIndex: index,
-                                    });
+                    const expandedContent = hasExpandable
+                        ? expandable.renderExpandedContent({
+                            row: row.original,
+                            rowIndex: index,
+                        })
+                        : null;
+                    const hasContent = expandedContent != null;
+                    const showExpanded = shouldShowExpandedContent({
+                        hasContent,
+                        isCollapsible,
+                        isExpanded: isCollapsible ? row.getIsExpanded() : false,
+                    });
+                    const expandedContentId = `datatable-expanded-content-${index}`;
+                    const totalColumnCount = row.getVisibleCells().length;
+                    return (React.createElement(React.Fragment, { key: stableRowKey },
+                        React.createElement("tr", { "data-testid": `datatable-row-${index}`, "data-selected": isRowSelected(row.original) ? '' : undefined, ref: isLastRow ? lastRowRef : undefined, className: rowClickEnabled ? 'nv-datatable-row-clickable' : undefined, tabIndex: rowClickEnabled ? 0 : undefined, onClick: rowClickEnabled
+                                ? () => onRowClick?.({
+                                    row: row.original,
+                                    rowIndex: index,
+                                })
+                                : undefined, onKeyDown: rowClickEnabled
+                                ? (event) => {
+                                    if (event.currentTarget !== event.target) {
+                                        return;
+                                    }
+                                    if (event.key === 'Enter' || event.key === ' ') {
+                                        event.preventDefault();
+                                        onRowClick?.({
+                                            row: row.original,
+                                            rowIndex: index,
+                                        });
+                                    }
                                 }
-                            }
-                            : undefined }, row.getVisibleCells().map((cell) => (React.createElement("td", { key: cell.id, "data-testid": cell.column.id === '__selection__'
-                            ? 'datatable-cell-selection'
-                            : `datatable-cell-${cell.column.id}`, onClick: cell.column.id === '__selection__'
-                            ? (event) => event.stopPropagation()
-                            : undefined }, cell.column.id === '__selection__'
-                        ? renderRowSelectionCheckbox(row.original, index)
-                        : flexRender(cell.column.columnDef.cell, cell.getContext()))))));
+                                : undefined }, row.getVisibleCells().map((cell) => {
+                            const isCombinedCell = cell.column.id === '__selection_expand__';
+                            const isSelectionCell = cell.column.id === '__selection__';
+                            const isExpandCell = cell.column.id === '__expand__';
+                            return (React.createElement("td", { key: cell.id, "data-testid": isSelectionCell
+                                    ? 'datatable-cell-selection'
+                                    : isExpandCell
+                                        ? 'datatable-cell-expand'
+                                        : isCombinedCell
+                                            ? 'datatable-cell-selection-expand'
+                                            : `datatable-cell-${cell.column.id}`, onClick: isSelectionCell || isExpandCell || isCombinedCell
+                                    ? (event) => event.stopPropagation()
+                                    : undefined }, isSelectionCell ? (renderRowSelectionCheckbox(row.original, index)) : isExpandCell ? (renderExpandToggle(row, index)) : isCombinedCell ? (React.createElement("div", { className: "flex items-center justify-center gap-1" },
+                                renderRowSelectionCheckbox(row.original, index),
+                                renderExpandToggle(row, index))) : (flexRender(cell.column.columnDef.cell, cell.getContext()))));
+                        })),
+                        showExpanded && (React.createElement("tr", { className: "nv-datatable-expanded-row", "data-testid": `datatable-expanded-row-${index}`, id: expandedContentId, role: "region", "aria-label": `Expanded content for row ${index + 1}` },
+                            React.createElement("td", { colSpan: totalColumnCount },
+                                React.createElement("div", { className: "nv-datatable-expanded-content" }, expandedContent))))));
                 })))),
         paginationAPI &&
             (renderPagination

package/dist/components/NvDatatable/expandState.js

@@ -0,0 +1,8 @@
+export function shouldShowExpandedContent(params) {
+    const { hasContent, isCollapsible, isExpanded } = params;
+    if (!hasContent)
+        return false;
+    if (!isCollapsible)
+        return true;
+    return isExpanded;
+}

package/dist/components/NvDatatable/expandState.test.js

@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest';
+import { shouldShowExpandedContent } from './expandState';
+describe('expandState', () => {
+    describe('shouldShowExpandedContent', () => {
+        it('returns false when there is no content', () => {
+            expect(shouldShowExpandedContent({
+                hasContent: false,
+                isCollapsible: false,
+                isExpanded: false,
+            })).toBe(false);
+        });
+        it('returns false when there is no content even if expanded', () => {
+            expect(shouldShowExpandedContent({
+                hasContent: false,
+                isCollapsible: true,
+                isExpanded: true,
+            })).toBe(false);
+        });
+        it('returns true when has content and not collapsible', () => {
+            expect(shouldShowExpandedContent({
+                hasContent: true,
+                isCollapsible: false,
+                isExpanded: false,
+            })).toBe(true);
+        });
+        it('returns false when collapsible and not expanded', () => {
+            expect(shouldShowExpandedContent({
+                hasContent: true,
+                isCollapsible: true,
+                isExpanded: false,
+            })).toBe(false);
+        });
+        it('returns true when collapsible and expanded', () => {
+            expect(shouldShowExpandedContent({
+                hasContent: true,
+                isCollapsible: true,
+                isExpanded: true,
+            })).toBe(true);
+        });
+    });
+});

package/dist/components/NvDatatable/paginationState.js

@@ -0,0 +1,9 @@
+export function resolvePaginationRowCount(opts) {
+    if (opts.mode === 'server' && !opts.isInfinite) {
+        return opts.totalRowCount || opts.rowsLength;
+    }
+    if (opts.mode === 'client' && opts.hasFiltering) {
+        return opts.filteredRowsLength;
+    }
+    return opts.rowsLength;
+}