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

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,14 +26,22 @@ 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 ?? []));
+    const [selectedRowIdsState, setSelectedRowIdsState] = useState(() => new Set(selection?.selectedRowIds ?? selection?.initialSelectedRowIds ?? []));
+    const selectedRowIdsRef = useRef(new Set(selection?.selectedRowIds ?? selection?.initialSelectedRowIds ?? []));
     const selectionMode = selection?.mode ?? 'none';
     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;
+}

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

@@ -0,0 +1,84 @@
+import { describe, expect, it } from 'vitest';
+import { resolvePaginationRowCount } from './paginationState';
+describe('resolvePaginationRowCount', () => {
+    it('server non-infinite returns totalRowCount when provided', () => {
+        expect(resolvePaginationRowCount({
+            mode: 'server',
+            isInfinite: false,
+            hasFiltering: false,
+            totalRowCount: 123,
+            rowsLength: 10,
+            filteredRowsLength: 10,
+        })).toBe(123);
+    });
+    it('server non-infinite falls back to rows.length when totalRowCount is missing', () => {
+        expect(resolvePaginationRowCount({
+            mode: 'server',
+            isInfinite: false,
+            hasFiltering: false,
+            totalRowCount: undefined,
+            rowsLength: 10,
+            filteredRowsLength: 10,
+        })).toBe(10);
+    });
+    it('server non-infinite falls back to rows.length when totalRowCount is 0', () => {
+        expect(resolvePaginationRowCount({
+            mode: 'server',
+            isInfinite: false,
+            hasFiltering: false,
+            totalRowCount: 0,
+            rowsLength: 5,
+            filteredRowsLength: 5,
+        })).toBe(5);
+    });
+    it('server infinite bypasses the server branch and uses rows.length', () => {
+        expect(resolvePaginationRowCount({
+            mode: 'server',
+            isInfinite: true,
+            hasFiltering: false,
+            totalRowCount: 999,
+            rowsLength: 42,
+            filteredRowsLength: 42,
+        })).toBe(42);
+    });
+    it('client with filtering returns the filtered row count', () => {
+        expect(resolvePaginationRowCount({
+            mode: 'client',
+            isInfinite: false,
+            hasFiltering: true,
+            totalRowCount: undefined,
+            rowsLength: 100,
+            filteredRowsLength: 7,
+        })).toBe(7);
+    });
+    it('client with filtering returns 0 when all rows are filtered out', () => {
+        expect(resolvePaginationRowCount({
+            mode: 'client',
+            isInfinite: false,
+            hasFiltering: true,
+            totalRowCount: undefined,
+            rowsLength: 100,
+            filteredRowsLength: 0,
+        })).toBe(0);
+    });
+    it('client without filtering returns rows.length', () => {
+        expect(resolvePaginationRowCount({
+            mode: 'client',
+            isInfinite: false,
+            hasFiltering: false,
+            totalRowCount: undefined,
+            rowsLength: 25,
+            filteredRowsLength: 25,
+        })).toBe(25);
+    });
+    it('client with filtering takes precedence over rows.length even when filtered count is larger', () => {
+        expect(resolvePaginationRowCount({
+            mode: 'client',
+            isInfinite: false,
+            hasFiltering: true,
+            totalRowCount: undefined,
+            rowsLength: 3,
+            filteredRowsLength: 10,
+        })).toBe(10);
+    });
+});

package/dist/generated/components.js

@@ -58,8 +58,10 @@ import { NvSidebarnavitem as NvSidebarnavitemElement, defineCustomElement as def
 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 { NvStatusindicator as NvStatusindicatorElement, defineCustomElement as defineNvStatusindicator } from "@nova-design-system/nova-webcomponents/dist/components/nv-statusindicator.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 { NvTag as NvTagElement, defineCustomElement as defineNvTag } from "@nova-design-system/nova-webcomponents/dist/components/nv-tag.js";
 import { NvTimetest as NvTimetestElement, defineCustomElement as defineNvTimetest } from "@nova-design-system/nova-webcomponents/dist/components/nv-timetest.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";
@@ -276,6 +278,7 @@ export const NvFielddropdown = createComponent({
     events: {
         onValueChanged: 'valueChanged',
         onFilterTextChanged: 'filterTextChanged',
+        onCleared: 'cleared',
         onOpenChanged: 'openChanged',
         onDropdownItemSelected: 'dropdownItemSelected'
     },
@@ -330,7 +333,10 @@ export const NvFieldselect = createComponent({
     tagName: 'nv-fieldselect',
     elementClass: NvFieldselectElement,
     react: React,
-    events: { onValueChanged: 'valueChanged' },
+    events: {
+        onValueChanged: 'valueChanged',
+        onCleared: 'cleared'
+    },
     defineCustomElement: defineNvFieldselect
 });
 export const NvFieldslider = createComponent({
@@ -452,7 +458,10 @@ export const NvSidebar = createComponent({
     tagName: 'nv-sidebar',
     elementClass: NvSidebarElement,
     react: React,
-    events: { onOpenChanged: 'openChanged' },
+    events: {
+        onOpenChanged: 'openChanged',
+        onWidthChanged: 'widthChanged'
+    },
     defineCustomElement: defineNvSidebar
 });
 export const NvSidebarcontent = createComponent({
@@ -525,6 +534,13 @@ export const NvStack = createComponent({
     events: {},
     defineCustomElement: defineNvStack
 });
+export const NvStatusindicator = createComponent({
+    tagName: 'nv-statusindicator',
+    elementClass: NvStatusindicatorElement,
+    react: React,
+    events: {},
+    defineCustomElement: defineNvStatusindicator
+});
 export const NvTable = createComponent({
     tagName: 'nv-table',
     elementClass: NvTableElement,
@@ -539,6 +555,13 @@ export const NvTableheader = createComponent({
     events: { onSortDirectionChanged: 'sortDirectionChanged' },
     defineCustomElement: defineNvTableheader
 });
+export const NvTag = createComponent({
+    tagName: 'nv-tag',
+    elementClass: NvTagElement,
+    react: React,
+    events: { onDismissed: 'dismissed' },
+    defineCustomElement: defineNvTag
+});
 export const NvTimetest = createComponent({
     tagName: 'nv-timetest',
     elementClass: NvTimetestElement,

package/dist/generated/components.server.js

@@ -396,6 +396,7 @@ export const NvFielddropdown = createComponent({
         maxHeight: 'max-height',
         emptyResult: 'empty-result',
         filterable: 'filterable',
+        clearable: 'clearable',
         openOnSelect: 'open-on-select',
         controlledFilter: 'controlled-filter',
         debounceDelay: 'debounce-delay',
@@ -575,6 +576,7 @@ export const NvFieldselect = createComponent({
         errorDescription: 'error-description',
         success: 'success',
         multiple: 'multiple',
+        clearable: 'clearable',
         value: 'value',
         displayValue: 'display-value',
         autofocus: 'autofocus',
@@ -879,7 +881,11 @@ export const NvSidebar = createComponent({
         open: 'open',
         activePath: 'active-path',
         notificationIntention: 'notification-intention',
-        notificationEmphasis: 'notification-emphasis'
+        notificationEmphasis: 'notification-emphasis',
+        resizable: 'resizable',
+        minWidth: 'min-width',
+        maxWidth: 'max-width',
+        width: 'width'
     },
     hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
     clientModule: clientComponents.NvSidebar,
@@ -974,6 +980,17 @@ export const NvStack = createComponent({
     clientModule: clientComponents.NvStack,
     serializeShadowRoot
 });
+export const NvStatusindicator = createComponent({
+    tagName: 'nv-statusindicator',
+    properties: {
+        status: 'status',
+        emphasis: 'emphasis',
+        label: 'label'
+    },
+    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
+    clientModule: clientComponents.NvStatusindicator,
+    serializeShadowRoot
+});
 export const NvTable = createComponent({
     tagName: 'nv-table',
     properties: {},
@@ -991,6 +1008,21 @@ export const NvTableheader = createComponent({
     clientModule: clientComponents.NvTableheader,
     serializeShadowRoot
 });
+export const NvTag = createComponent({
+    tagName: 'nv-tag',
+    properties: {
+        color: 'color',
+        label: 'label',
+        dismissible: 'dismissible',
+        href: 'href',
+        target: 'target',
+        rel: 'rel',
+        disabled: 'disabled'
+    },
+    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
+    clientModule: clientComponents.NvTag,
+    serializeShadowRoot
+});
 export const NvTimetest = createComponent({
     tagName: 'nv-timetest',
     properties: { lastChange: 'last-change' },

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

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

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

@@ -0,0 +1,5 @@
+export declare function shouldShowExpandedContent(params: {
+    hasContent: boolean;
+    isCollapsible: boolean;
+    isExpanded: boolean;
+}): boolean;

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

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

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

@@ -0,0 +1,9 @@
+export interface ResolvePaginationRowCountOptions {
+    mode: 'client' | 'server';
+    isInfinite: boolean;
+    hasFiltering: boolean;
+    totalRowCount: number | undefined;
+    rowsLength: number;
+    filteredRowsLength: number;
+}
+export declare function resolvePaginationRowCount(opts: ResolvePaginationRowCountOptions): number;

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

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