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

package/dist/cjs/{nv-iconbutton_2.entry-0lnnCk0B.js → nv-iconbutton_2.entry-CP1o9IVZ.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-yxDlFA78.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 require('react');
 require('react-dom');
@@ -59,6 +59,11 @@ const NvIconbutton = class {
          * Sets the shape of the button. Choose between square and rounded.
          */
         this.shape = 'square';
+        /**
+         * Use this to make the button skip-able when users navigate with the keyboard.
+         * The button remains clickable but won’t be reached via the Tab key.
+         */
+        this.disableTabindex = false;
         //#endregion PROPERTIES
         /****************************************************************************/
         //#region METHODS
@@ -124,7 +129,7 @@ const NvIconbutton = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        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' })));
+        return (index.h(index.Host, { key: 'f3d9a8c4f5f3b549595b1a4b8eecddae89b23909', role: "button", type: this.type, tabindex: this.disableTabindex ? -1 : 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: '9f25f8a2c72279f1ad4c92ed6e17341e4b43f26e', size: this.size }), !this.loading && index.h("nv-icon", { key: 'aa0d10482d4dded8f6680afe066c3c8d781160ef', name: this.name, size: this.size }), index.h("slot", { key: 'dc2a1ca7305ae4b14924d7acb79286596e5b358f' })));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/{nv-menu.entry-BjXa70qP.js → nv-menu.entry-wMwI_sZ3.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-yxDlFA78.js');
 require('react');
 require('react-dom');
 

package/dist/cjs/{nv-menuitem.entry-CSPwpUWz.js → nv-menuitem.entry-C53TrB0_.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-yxDlFA78.js');
 require('react');
 require('react-dom');
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-yxDlFA78.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');

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-yxDlFA78.js');
 require('react');
 require('react-dom');
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-yxDlFA78.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');

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-yxDlFA78.js');
 require('react');
 require('react-dom');
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-yxDlFA78.js');
 require('react');
 require('react-dom');
 

package/dist/cjs/{nv-stack.entry-BKPf62wy.js → nv-stack.entry-991A3rOk.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-yxDlFA78.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 require('react');
 require('react-dom');

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-yxDlFA78.js');
 require('react');
 require('react-dom');
 

package/dist/cjs/nv-tableheader.entry-DzvbPDBN.js

@@ -0,0 +1,75 @@
+'use strict';
+
+var index = require('./index-yxDlFA78.js');
+require('react');
+require('react-dom');
+
+const nvTableheaderCss = "nv-tableheader{display:inline-flex;width:100%;align-items:center;gap:var(--spacing-2)}nv-tableheader:focus-visible{border-radius:var(--radius-rounded-sm)}nv-tableheader:focus-visible:focus,nv-tableheader:focus-visible:focus-within{outline:none}nv-tableheader:focus-visible:focus-visible,nv-tableheader:focus-visible:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-tableheader nv-iconbutton{transition:transform 120ms ease, opacity 120ms ease}nv-tableheader nv-iconbutton svg{transition:transform 240ms ease}nv-tableheader nv-iconbutton.is-none{opacity:0.5}nv-tableheader nv-iconbutton.is-desc svg{transform:rotate(180deg)}";
+const NvTableheaderStyle0 = nvTableheaderCss;
+
+const NvTableheader = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.sortDirectionChanged = index.createEvent(this, "sortDirectionChanged");
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Will render the header as sortable with the corresponding icon button.
+         * Allows the header to be tabbed, and trigger sorting via click or keyboard
+         * navigation
+         */
+        this.sortable = false;
+        /**
+         * The current sort direction of the header. Will be 'none' if the header is
+         * not sortable or if the sort direction is not set.
+         */
+        this.sortDirection = 'none';
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    cycleSortDirection(e) {
+        if (!this.sortable)
+            return;
+        e === null || e === void 0 ? void 0 : e.preventDefault();
+        const next = {
+            none: 'asc',
+            asc: 'desc',
+            desc: 'none',
+        };
+        this.sortDirection = next[this.sortDirection];
+        this.sortDirectionChanged.emit(this.sortDirection);
+    }
+    handleKeyDown(event) {
+        if (!this.sortable)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.cycleSortDirection();
+        }
+    }
+    get ariaSort() {
+        const sortMap = {
+            none: 'none',
+            asc: 'ascending',
+            desc: 'descending',
+        };
+        if (!this.sortable)
+            return sortMap.none;
+        return sortMap[this.sortDirection];
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#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',
+            // prevent mousedown from selecting text
+            onMouseDown: (e) => e.preventDefault(), class: {
+                'is-none': this.sortDirection === 'none',
+                'is-desc': this.sortDirection === 'desc',
+            } })))));
+    }
+};
+NvTableheader.style = NvTableheaderStyle0;
+
+exports.nv_tableheader = NvTableheader;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-yxDlFA78.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: '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))))));
+        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))))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/nv-togglebutton.entry-DI8HQ5Ou.js

@@ -0,0 +1,56 @@
+'use strict';
+
+var index = require('./index-yxDlFA78.js');
+require('react');
+require('react-dom');
+
+const nvTogglebuttonCss = "nv-togglebutton{display:inline-flex;justify-content:center;align-items:center}nv-togglebutton:focus-visible,nv-togglebutton:has(:focus-visible){z-index:1}nv-togglebutton[size=xs]{padding:var(--button-xs-padding-y) var(--button-xs-padding-x);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);height:var(--button-xs-height);font-size:var(--button-xs-font-size);padding-top:calc(var(--togglegroup-xs-button-padding-y) - 1px);padding-bottom:calc(var(--togglegroup-xs-button-padding-y) - 1px);border-radius:calc(var(--togglegroup-xs-button-radius));border-width:0}nv-togglebutton[size=xs] nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-togglebutton[size=sm]{padding:var(--button-sm-padding-y) var(--button-sm-padding-x);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);height:var(--button-sm-height);font-size:var(--button-sm-font-size);padding-top:calc(var(--togglegroup-sm-button-padding-y) - 1px);padding-bottom:calc(var(--togglegroup-sm-button-padding-y) - 1px);border-radius:calc(var(--togglegroup-sm-button-radius));border-width:0}nv-togglebutton[size=sm] nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-togglebutton[size=md]{padding:var(--button-md-padding-y) var(--button-md-padding-x);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);height:var(--button-md-height);font-size:var(--button-md-font-size);padding-top:calc(var(--togglegroup-md-button-padding-y) - 1px);padding-bottom:calc(var(--togglegroup-md-button-padding-y) - 1px);border-radius:calc(var(--togglegroup-md-button-radius));border-width:0}nv-togglebutton[size=md] nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-togglebutton[size=lg]{padding:var(--button-lg-padding-y) var(--button-lg-padding-x);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);height:var(--button-lg-height);font-size:var(--button-lg-font-size);padding-top:calc(var(--togglegroup-lg-button-padding-y) - 1px);padding-bottom:calc(var(--togglegroup-lg-button-padding-y) - 1px);border-radius:calc(var(--togglegroup-lg-button-radius));border-width:0}nv-togglebutton[size=lg] nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-togglebutton[emphasis=high]{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-togglebutton[emphasis=high]:hover{background:var(--components-button-low-background-hover);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text-hover)}nv-togglebutton[emphasis=high]:active{background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-togglebutton[emphasis=high]:focus,nv-togglebutton[emphasis=high]:focus-within{outline:none}nv-togglebutton[emphasis=high]:focus-visible,nv-togglebutton[emphasis=high]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-togglebutton[emphasis=high]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-togglebutton[emphasis=high][active]:not([active=false]){background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-togglebutton[emphasis=low]{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-togglebutton[emphasis=low]:hover{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}nv-togglebutton[emphasis=low]:active{background:var(--components-button-lower-background-active);border:1px solid var(--components-button-lower-border-active);color:var(--components-button-lower-text-active)}nv-togglebutton[emphasis=low]:focus,nv-togglebutton[emphasis=low]:focus-within{outline:none}nv-togglebutton[emphasis=low]:focus-visible,nv-togglebutton[emphasis=low]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-togglebutton[emphasis=low]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-togglebutton[emphasis=low][active]:not([active=false]),nv-togglebutton[emphasis=low]:active{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}";
+const NvTogglebuttonStyle0 = nvTogglebuttonCss;
+
+const NvTogglebutton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.toggled = index.createEvent(this, "toggled");
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Determines how large or small the togglebutton appears, allowing for
+         * customization of the togglebutton's dimensions to fit different design
+         * specifications and user needs.
+         */
+        this.size = 'md';
+        /**
+         * Prevents all interaction, rendering the toggle in a non-interactive state.
+         */
+        this.disabled = false;
+        /**
+         * Whether the button is active or not. Will not toggle automatically but
+         * needs to be controlled externally.
+         */
+        this.active = false;
+        /**
+         * Make it more or less visually prominent to users.
+         */
+        this.emphasis = 'high';
+        //#endregion PROPERTIES
+        /****************************************************************************/
+        //#region METHODS
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            this.toggled.emit({
+                value: this.value,
+                active: this.active,
+            });
+        };
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#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' })));
+    }
+};
+NvTogglebutton.style = NvTogglebuttonStyle0;
+
+exports.nv_togglebutton = NvTogglebutton;

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

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

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C12eD0Qt.js');
+var index = require('./index-yxDlFA78.js');
 require('react');
 require('react-dom');
 
@@ -46,7 +46,7 @@ const NvTooltip = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        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" }))));
+        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" }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/components/{NvDatatable.js → NvDatatable/NvDatatable.js}

@@ -1,39 +1,88 @@
-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 }) => {
+import React, { useMemo, useState, useEffect, useRef } from 'react';
+import { flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
+import { NvTable, NvTableheader } from '../../generated/components';
+function NvDatatable({ columns, rows, pagination, sorting, renderPagination, stickyHeader, ...htmlProps }) {
     const [paginationState, setPaginationState] = useState({
         pageIndex: 0,
         pageSize: pagination?.initialPageSize || 10,
     });
+    const [sortingState, setSortingState] = useState(sorting?.sortState || []);
     const lastRowRef = useRef(null);
     const tableColumns = useMemo(() => columns
         .filter((col) => !col.hidden)
-        .map((col) => ({
-        accessorKey: col.field,
-        header: col.headerName || String(col.field),
-        size: col.width,
-        enableResizing: col.resizable ?? true,
-        cell: (context) => {
-            const value = context.getValue();
-            const row = context.row.original;
-            const rowIndex = context.row.index;
-            if (col.renderCell) {
-                return col.renderCell({
-                    value,
-                    row,
-                    field: col.field,
-                    rowIndex,
-                });
-            }
-            return value;
-        },
-    })), [columns]);
+        .map((col) => {
+        const columnDef = {
+            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,
+            enableSorting: sorting ? col.sortable ?? true : false,
+            cell: (context) => {
+                const value = context.getValue();
+                const row = context.row.original;
+                const rowIndex = context.row.index;
+                if (col.renderCell) {
+                    return col.renderCell({
+                        value,
+                        row,
+                        field: col.field,
+                        rowIndex,
+                    });
+                }
+                return value;
+            },
+        };
+        if (col.sortingFn !== undefined) {
+            columnDef.sortingFn = col.sortingFn;
+        }
+        if (col.sortDescFirst !== undefined) {
+            columnDef.sortDescFirst = col.sortDescFirst;
+        }
+        if (col.invertSorting !== undefined) {
+            columnDef.invertSorting = col.invertSorting;
+        }
+        if (col.sortUndefined !== undefined) {
+            columnDef.sortUndefined = col.sortUndefined;
+        }
+        return columnDef;
+    }), [columns, sorting]);
     const tableConfig = useMemo(() => {
         const baseConfig = {
             data: rows,
             columns: tableColumns,
             getCoreRowModel: getCoreRowModel(),
+            ...(sorting && {
+                state: {
+                    sorting: sorting.sortState || sortingState,
+                },
+                onSortingChange: sorting.mode === 'server'
+                    ? (updater) => {
+                        const newSort = typeof updater === 'function'
+                            ? updater(sortingState)
+                            : updater;
+                        setSortingState(newSort);
+                        sorting.onSortingChange?.(newSort);
+                    }
+                    : setSortingState,
+                manualSorting: sorting.mode === 'server',
+                enableSorting: true,
+                enableMultiSort: sorting.enableMultiSort ?? false,
+                enableSortingRemoval: sorting.enableSortingRemoval ?? true,
+                maxMultiSortColCount: sorting.maxMultiSortColCount,
+                sortDescFirst: sorting.sortDescFirst ?? false,
+                isMultiSortEvent: sorting.enableMultiSort ? () => true : undefined,
+                getSortedRowModel: sorting.mode === 'client' ? getSortedRowModel() : undefined,
+            }),
         };
         if (!pagination) {
             return baseConfig;
@@ -64,13 +113,14 @@ const NvDatatable = ({ columns, rows, pagination, renderPagination, stickyHeader
                 manualPagination: true,
                 pageCount,
                 state: {
+                    ...baseConfig.state,
                     pagination: paginationState,
                 },
                 onPaginationChange: setPaginationState,
             };
         }
         return baseConfig;
-    }, [rows, tableColumns, pagination, paginationState]);
+    }, [rows, tableColumns, pagination, paginationState, sorting, sortingState]);
     const table = useReactTable(tableConfig);
     useEffect(() => {
         if (pagination?.mode === 'server' && pagination.onPaginationChange) {
@@ -133,16 +183,23 @@ const NvDatatable = ({ columns, rows, pagination, renderPagination, stickyHeader
     return (React.createElement(React.Fragment, null,
         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) => (React.createElement("th", { key: header.id, "data-testid": `datatable-header-${header.id}`, style: {
-                        width: header.column.columnDef.size + 'px',
-                    }, "data-no-resize": header.column.columnDef.enableResizing ? null : true }, header.isPlaceholder
-                    ? null
-                    : flexRender(header.column.columnDef.header, header.getContext())))))))),
+                React.createElement("thead", { "data-sticky-top": stickyHeader ? 'true' : undefined }, table.getHeaderGroups().map((headerGroup) => (React.createElement("tr", { key: headerGroup.id }, headerGroup.headers.map((header) => {
+                    const canSort = header.column.getCanSort();
+                    const sortDirection = header.column.getIsSorted();
+                    return (React.createElement("th", { key: header.id, "data-testid": `datatable-header-${header.id}`, style: {
+                            width: header.column.columnDef.size + 'px',
+                        }, "data-no-resize": header.column.columnDef.enableResizing ? null : true },
+                        React.createElement(NvTableheader, { sortable: canSort ? true : undefined, sortDirection: sortDirection || (canSort ? 'none' : undefined), onSortDirectionChanged: canSort
+                                ? header.column.getToggleSortingHandler()
+                                : undefined }, header.isPlaceholder
+                            ? null
+                            : flexRender(header.column.columnDef.header, header.getContext()))));
+                }))))),
                 React.createElement("tbody", null, tableRows.map((row, index) => {
                     const isLastRow = isInfiniteScroll && index === tableRows.length - 1;
-                    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()))))));
+                    return (React.createElement("tr", { key: row.id, "data-testid": `datatable-row-${index}`, ref: isLastRow ? lastRowRef : undefined }, row.getVisibleCells().map((cell) => (React.createElement("td", { key: cell.id, "data-testid": `datatable-cell-${cell.column.id}` }, flexRender(cell.column.columnDef.cell, cell.getContext()))))));
                 })))),
         paginationAPI && renderPagination && renderPagination(paginationAPI)));
-};
+}
 NvDatatable.displayName = 'NvDatatable';
 export { NvDatatable };

package/dist/components/NvDatatable/index.js

@@ -0,0 +1,3 @@
+export * from './NvDatatable';
+export * from './types';
+export * from './utils';

package/dist/components/NvDatatable/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/NvDatatable/utils.js

@@ -0,0 +1,5 @@
+export function makeColumn() {
+    return function define(col) {
+        return col;
+    };
+}

package/dist/generated/components.js

@@ -42,6 +42,7 @@ import { NvRow as NvRowElement, defineCustomElement as defineNvRow } from "@nova
 import { NvSplit as NvSplitElement, defineCustomElement as defineNvSplit } from "@nova-design-system/nova-webcomponents/dist/components/nv-split.js";
 import { NvStack as NvStackElement, defineCustomElement as defineNvStack } from "@nova-design-system/nova-webcomponents/dist/components/nv-stack.js";
 import { NvTable as NvTableElement, defineCustomElement as defineNvTable } from "@nova-design-system/nova-webcomponents/dist/components/nv-table.js";
+import { NvTableheader as NvTableheaderElement, defineCustomElement as defineNvTableheader } from "@nova-design-system/nova-webcomponents/dist/components/nv-tableheader.js";
 import { NvToggle as NvToggleElement, defineCustomElement as defineNvToggle } from "@nova-design-system/nova-webcomponents/dist/components/nv-toggle.js";
 import { NvTogglebutton as NvTogglebuttonElement, defineCustomElement as defineNvTogglebutton } from "@nova-design-system/nova-webcomponents/dist/components/nv-togglebutton.js";
 import { NvTogglebuttongroup as NvTogglebuttongroupElement, defineCustomElement as defineNvTogglebuttongroup } from "@nova-design-system/nova-webcomponents/dist/components/nv-togglebuttongroup.js";
@@ -379,6 +380,13 @@ export const NvTable = createComponent({
     events: {},
     defineCustomElement: defineNvTable
 });
+export const NvTableheader = createComponent({
+    tagName: 'nv-tableheader',
+    elementClass: NvTableheaderElement,
+    react: React,
+    events: { onSortDirectionChanged: 'sortDirectionChanged' },
+    defineCustomElement: defineNvTableheader
+});
 export const NvToggle = createComponent({
     tagName: 'nv-toggle',
     elementClass: NvToggleElement,

package/dist/generated/components.server.js

@@ -98,7 +98,8 @@ export const NvButton = createComponent({
         disabled: 'disabled',
         fluid: 'fluid',
         type: 'type',
-        form: 'form'
+        form: 'form',
+        disableTabindex: 'disable-tabindex'
     },
     hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
     serializeShadowRoot
@@ -612,7 +613,8 @@ export const NvIconbutton = createComponent({
         active: 'active',
         name: 'name',
         type: 'type',
-        shape: 'shape'
+        shape: 'shape',
+        disableTabindex: 'disable-tabindex'
     },
     hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
     serializeShadowRoot
@@ -723,6 +725,15 @@ export const NvTable = createComponent({
     hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
     serializeShadowRoot
 });
+export const NvTableheader = createComponent({
+    tagName: 'nv-tableheader',
+    properties: {
+        sortable: 'sortable',
+        sortDirection: 'sort-direction'
+    },
+    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
+    serializeShadowRoot
+});
 export const NvToggle = createComponent({
     tagName: 'nv-toggle',
     properties: {

package/dist/providers/NotificationProvider.js

@@ -12,9 +12,16 @@ const generateId = () => {
 export const NotificationProvider = ({ children, position = DEFAULT_POSITION, maxNotifications = DEFAULT_MAX_NOTIFICATIONS, className, }) => {
     const [notifications, setNotifications] = useState([]);
     const notificationsRef = useRef([]);
+    const timersRef = useRef(new Map());
     useEffect(() => {
         notificationsRef.current = notifications;
     }, [notifications]);
+    useEffect(() => {
+        return () => {
+            timersRef.current.forEach((timer) => clearTimeout(timer));
+            timersRef.current.clear();
+        };
+    }, []);
     const show = useCallback((options) => {
         const id = options.id || generateId();
         const ref = createRef();
@@ -28,6 +35,7 @@ export const NotificationProvider = ({ children, position = DEFAULT_POSITION, ma
             icon: options.icon,
             actions: options.actions ?? [],
             actionSlot: options.actionSlot,
+            duration: options.duration ?? 0,
             createdAt: Date.now(),
             ref,
         };
@@ -40,17 +48,36 @@ export const NotificationProvider = ({ children, position = DEFAULT_POSITION, ma
         });
         setTimeout(() => {
             notification.ref.current?.show();
+            if (notification.duration && notification.duration > 0) {
+                const timer = setTimeout(() => {
+                    const n = notificationsRef.current.find((item) => item.id === id);
+                    n?.ref.current?.dismiss();
+                }, notification.duration);
+                timersRef.current.set(id, timer);
+            }
         }, 0);
         return id;
     }, [maxNotifications]);
     const dismiss = useCallback((id) => {
+        const timer = timersRef.current.get(id);
+        if (timer) {
+            clearTimeout(timer);
+            timersRef.current.delete(id);
+        }
         const n = notificationsRef.current.find((item) => item.id === id);
         n?.ref.current?.dismiss();
     }, []);
     const remove = useCallback((id) => {
+        const timer = timersRef.current.get(id);
+        if (timer) {
+            clearTimeout(timer);
+            timersRef.current.delete(id);
+        }
         setNotifications((prev) => prev.filter((notification) => notification.id !== id));
     }, []);
     const removeAll = useCallback(() => {
+        timersRef.current.forEach((timer) => clearTimeout(timer));
+        timersRef.current.clear();
         setNotifications([]);
     }, []);
     const handleNotificationClose = useCallback((id) => {

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

@@ -0,0 +1,7 @@
+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 namespace NvDatatable {
+    var displayName: string;
+}
+export { NvDatatable };

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

@@ -0,0 +1,3 @@
+export * from './NvDatatable';
+export * from './types';
+export * from './utils';