@nova-design-system/nova-react 3.20.0 → 3.21.1-beta.0

package/dist/cjs/nv-togglebutton.entry-w-WEAmE6.js

@@ -0,0 +1,56 @@
+'use strict';
+
+var index = require('./index-CEKdYnmK.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: '35199476bd724fe4a6b4dde51b7822bed5c374ff', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: '864cf0f2550b66b0b34c4f779086d4b4847732e6' })));
+    }
+};
+NvTogglebutton.style = NvTogglebuttonStyle0;
+
+exports.nv_togglebutton = NvTogglebutton;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BObVnP12.js');
+var index = require('./index-CEKdYnmK.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: 'b7c5cb46244f10a93330dc601d0347e3cb53c276' }, index.h("slot", { key: '0808ec94f479f52f60b50ac14ce1a4eb989e5778' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BObVnP12.js');
+var index = require('./index-CEKdYnmK.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: 'ff1ca24735ec78d279cdc2f98cb54c0d6a7b4103' }, index.h("slot", { key: '3e0676a49b957ecb6eb3e0e6bfc1d8d8f0d2e02a' }), index.h("nv-popover", { key: '063fb414e47a1a6b722ee8b61f3dd68a61c5b7df', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: 'a8714211a3a5c723d187acdcb23484610bd91a36', slot: "content" }, this.message), index.h("slot", { key: 'edae83eb3c0f5c57b9b7263ccc139463b044f68e', name: "content" }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -1,49 +1,88 @@
-import React, { useMemo, useState, useEffect, useRef, } from 'react';
-import { flexRender, getCoreRowModel, getPaginationRowModel, useReactTable, } from '@tanstack/react-table';
-import { NvTable } from '../generated/components';
-function 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,
-        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,
-        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;
@@ -74,13 +113,14 @@ function 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) {
@@ -143,21 +183,23 @@ function 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 };
-export function makeColumn() {
-    return function define(col) {
-        return col;
-    };
-}

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

@@ -35,13 +35,24 @@ import { NvIconbutton as NvIconbuttonElement, defineCustomElement as defineNvIco
 import { NvLoader as NvLoaderElement, defineCustomElement as defineNvLoader } from "@nova-design-system/nova-webcomponents/dist/components/nv-loader.js";
 import { NvMenu as NvMenuElement, defineCustomElement as defineNvMenu } from "@nova-design-system/nova-webcomponents/dist/components/nv-menu.js";
 import { NvMenuitem as NvMenuitemElement, defineCustomElement as defineNvMenuitem } from "@nova-design-system/nova-webcomponents/dist/components/nv-menuitem.js";
+import { NvNotificationBullet as NvNotificationBulletElement, defineCustomElement as defineNvNotificationBullet } from "@nova-design-system/nova-webcomponents/dist/components/nv-notification-bullet.js";
 import { NvNotification as NvNotificationElement, defineCustomElement as defineNvNotification } from "@nova-design-system/nova-webcomponents/dist/components/nv-notification.js";
 import { NvNotificationcontainer as NvNotificationcontainerElement, defineCustomElement as defineNvNotificationcontainer } from "@nova-design-system/nova-webcomponents/dist/components/nv-notificationcontainer.js";
 import { NvPopover as NvPopoverElement, defineCustomElement as defineNvPopover } from "@nova-design-system/nova-webcomponents/dist/components/nv-popover.js";
 import { NvRow as NvRowElement, defineCustomElement as defineNvRow } from "@nova-design-system/nova-webcomponents/dist/components/nv-row.js";
+import { NvSidebar as NvSidebarElement, defineCustomElement as defineNvSidebar } from "@nova-design-system/nova-webcomponents/dist/components/nv-sidebar.js";
+import { NvSidebarcontent as NvSidebarcontentElement, defineCustomElement as defineNvSidebarcontent } from "@nova-design-system/nova-webcomponents/dist/components/nv-sidebarcontent.js";
+import { NvSidebardivider as NvSidebardividerElement, defineCustomElement as defineNvSidebardivider } from "@nova-design-system/nova-webcomponents/dist/components/nv-sidebardivider.js";
+import { NvSidebarfooter as NvSidebarfooterElement, defineCustomElement as defineNvSidebarfooter } from "@nova-design-system/nova-webcomponents/dist/components/nv-sidebarfooter.js";
+import { NvSidebargroup as NvSidebargroupElement, defineCustomElement as defineNvSidebargroup } from "@nova-design-system/nova-webcomponents/dist/components/nv-sidebargroup.js";
+import { NvSidebarheader as NvSidebarheaderElement, defineCustomElement as defineNvSidebarheader } from "@nova-design-system/nova-webcomponents/dist/components/nv-sidebarheader.js";
+import { NvSidebarlogo as NvSidebarlogoElement, defineCustomElement as defineNvSidebarlogo } from "@nova-design-system/nova-webcomponents/dist/components/nv-sidebarlogo.js";
+import { NvSidebarnavitem as NvSidebarnavitemElement, defineCustomElement as defineNvSidebarnavitem } from "@nova-design-system/nova-webcomponents/dist/components/nv-sidebarnavitem.js";
+import { NvSidebarnavsubitem as NvSidebarnavsubitemElement, defineCustomElement as defineNvSidebarnavsubitem } from "@nova-design-system/nova-webcomponents/dist/components/nv-sidebarnavsubitem.js";
 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";
@@ -337,6 +348,13 @@ export const NvNotification = createComponent({
     events: { onHiddenChanged: 'hiddenChanged' },
     defineCustomElement: defineNvNotification
 });
+export const NvNotificationBullet = createComponent({
+    tagName: 'nv-notification-bullet',
+    elementClass: NvNotificationBulletElement,
+    react: React,
+    events: {},
+    defineCustomElement: defineNvNotificationBullet
+});
 export const NvNotificationcontainer = createComponent({
     tagName: 'nv-notificationcontainer',
     elementClass: NvNotificationcontainerElement,
@@ -358,6 +376,69 @@ export const NvRow = createComponent({
     events: {},
     defineCustomElement: defineNvRow
 });
+export const NvSidebar = createComponent({
+    tagName: 'nv-sidebar',
+    elementClass: NvSidebarElement,
+    react: React,
+    events: { onOpenChanged: 'openChanged' },
+    defineCustomElement: defineNvSidebar
+});
+export const NvSidebarcontent = createComponent({
+    tagName: 'nv-sidebarcontent',
+    elementClass: NvSidebarcontentElement,
+    react: React,
+    events: {},
+    defineCustomElement: defineNvSidebarcontent
+});
+export const NvSidebardivider = createComponent({
+    tagName: 'nv-sidebardivider',
+    elementClass: NvSidebardividerElement,
+    react: React,
+    events: {},
+    defineCustomElement: defineNvSidebardivider
+});
+export const NvSidebarfooter = createComponent({
+    tagName: 'nv-sidebarfooter',
+    elementClass: NvSidebarfooterElement,
+    react: React,
+    events: {},
+    defineCustomElement: defineNvSidebarfooter
+});
+export const NvSidebargroup = createComponent({
+    tagName: 'nv-sidebargroup',
+    elementClass: NvSidebargroupElement,
+    react: React,
+    events: {},
+    defineCustomElement: defineNvSidebargroup
+});
+export const NvSidebarheader = createComponent({
+    tagName: 'nv-sidebarheader',
+    elementClass: NvSidebarheaderElement,
+    react: React,
+    events: {},
+    defineCustomElement: defineNvSidebarheader
+});
+export const NvSidebarlogo = createComponent({
+    tagName: 'nv-sidebarlogo',
+    elementClass: NvSidebarlogoElement,
+    react: React,
+    events: {},
+    defineCustomElement: defineNvSidebarlogo
+});
+export const NvSidebarnavitem = createComponent({
+    tagName: 'nv-sidebarnavitem',
+    elementClass: NvSidebarnavitemElement,
+    react: React,
+    events: {},
+    defineCustomElement: defineNvSidebarnavitem
+});
+export const NvSidebarnavsubitem = createComponent({
+    tagName: 'nv-sidebarnavsubitem',
+    elementClass: NvSidebarnavsubitemElement,
+    react: React,
+    events: {},
+    defineCustomElement: defineNvSidebarnavsubitem
+});
 export const NvSplit = createComponent({
     tagName: 'nv-split',
     elementClass: NvSplitElement,
@@ -379,6 +460,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
@@ -666,6 +668,18 @@ export const NvNotification = createComponent({
     hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
     serializeShadowRoot
 });
+export const NvNotificationBullet = createComponent({
+    tagName: 'nv-notification-bullet',
+    properties: {
+        count: 'count',
+        intention: 'intention',
+        emphasis: 'emphasis',
+        size: 'size',
+        contrastingBorder: 'contrasting-border'
+    },
+    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
+    serializeShadowRoot
+});
 export const NvNotificationcontainer = createComponent({
     tagName: 'nv-notificationcontainer',
     properties: { position: 'position' },
@@ -696,6 +710,76 @@ export const NvRow = createComponent({
     hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
     serializeShadowRoot
 });
+export const NvSidebar = createComponent({
+    tagName: 'nv-sidebar',
+    properties: {
+        type: 'type',
+        open: 'open',
+        activePath: 'active-path',
+        notificationIntention: 'notification-intention',
+        notificationEmphasis: 'notification-emphasis'
+    },
+    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
+    serializeShadowRoot
+});
+export const NvSidebarcontent = createComponent({
+    tagName: 'nv-sidebarcontent',
+    properties: {},
+    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
+    serializeShadowRoot
+});
+export const NvSidebardivider = createComponent({
+    tagName: 'nv-sidebardivider',
+    properties: {},
+    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
+    serializeShadowRoot
+});
+export const NvSidebarfooter = createComponent({
+    tagName: 'nv-sidebarfooter',
+    properties: {},
+    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
+    serializeShadowRoot
+});
+export const NvSidebargroup = createComponent({
+    tagName: 'nv-sidebargroup',
+    properties: { label: 'label' },
+    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
+    serializeShadowRoot
+});
+export const NvSidebarheader = createComponent({
+    tagName: 'nv-sidebarheader',
+    properties: {},
+    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
+    serializeShadowRoot
+});
+export const NvSidebarlogo = createComponent({
+    tagName: 'nv-sidebarlogo',
+    properties: {
+        label: 'label',
+        logo: 'logo',
+        collapsedLogo: 'collapsed-logo'
+    },
+    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
+    serializeShadowRoot
+});
+export const NvSidebarnavitem = createComponent({
+    tagName: 'nv-sidebarnavitem',
+    properties: {
+        icon: 'icon',
+        active: 'active',
+        collapsible: 'collapsible',
+        open: 'open',
+        notificationCount: 'notification-count'
+    },
+    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
+    serializeShadowRoot
+});
+export const NvSidebarnavsubitem = createComponent({
+    tagName: 'nv-sidebarnavsubitem',
+    properties: { active: 'active' },
+    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
+    serializeShadowRoot
+});
 export const NvSplit = createComponent({
     tagName: 'nv-split',
     properties: {
@@ -723,6 +807,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';