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

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

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

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

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

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-clzdrCkN.js');
+var index = require('./index-DgKzi_Pd.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -39,15 +39,20 @@ const NvTooltip = class {
     /****************************************************************************/
     //#region LIFECYCLE
     componentDidRender() {
-        if (this.triggerElement || !this.defaultSlot)
+        if (!this.popoverElement)
             return;
-        this.popoverElement.triggerElement = this.defaultSlot?.nextSibling;
+        const trigger = this.triggerElement ??
+            this.defaultSlot?.nextElementSibling ??
+            this.el.querySelector(':scope > :not(nv-popover):not(slot):not([slot])');
+        if (trigger && this.popoverElement.triggerElement !== trigger) {
+            this.popoverElement.triggerElement = trigger;
+        }
     }
     //#endregion LIFECYCLE
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'f01e67c6f67c35beba40681c4bcd109886bbdbcf' }, index.h("nv-popover", { key: '47cd75161715752aeeae29223606e21c617a271a', ref: el => (this.popoverElement = el), triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay, onOpenChanged: e => this.openChanged.emit(e.detail) }, index.h("p", { key: 'fe5b09a6c0e4a67a50c9f43cb8344cee68e197f5', slot: "content" }, this.message), index.h("slot", { key: '4ef23e294baa1d5e60236ffec4a26439610030c1', name: "content" })), index.h("slot", { key: '5d8486923cd7cf99da69f4fa4d319dd5b5999cfa', ref: el => (this.defaultSlot = el) })));
+        return (index.h(index.Host, { key: '8285fbb412cb45cc7baf2936f0405c0438395c8d' }, index.h("nv-popover", { key: '29d70e9baa826de35d2cdca88f48610d70ec55e4', ref: el => (this.popoverElement = el), triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, groupName: 'tooltip', enterDelay: this.enterDelay, onOpenChanged: e => this.openChanged.emit(e.detail) }, index.h("p", { key: 'a9c907fa96f9c4108a8d84cec53981218c060811', slot: "content" }, this.message), index.h("slot", { key: 'af1b7ac8069071fe2d41e925f1c0090f8b6aaab5', name: "content" })), index.h("slot", { key: 'e5d3c6d16fb7e4a682b66e0016d9e4e30e5647e0', ref: el => (this.defaultSlot = el) })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/components/NvDatatable/NvDatatable.js

@@ -1,12 +1,24 @@
 import React, { useMemo, useState, useEffect, useRef, useCallback, } from 'react';
 import { flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, getFilteredRowModel, useReactTable, } from '@tanstack/react-table';
-import { NvTable, NvTableheader, NvPaginationtable, } from '../../generated/components';
+import { NvTable, NvTableheader, NvPaginationtable, NvFieldcheckbox, } 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();
 }
-function NvDatatable({ mode = 'client', columns, rows, pagination, sorting, filtering, renderPagination, renderFiltering, stickyHeader, ...htmlProps }) {
+import { applyRowSelection, applySelectAllSelection, shouldIgnoreSelectAllEvent, } from './selectionState';
+function NvDatatable({ mode = 'client', columns, rows, pagination, sorting, filtering, selection, renderPagination, renderFiltering, onRowClick, stickyHeader, ...htmlProps }) {
+    const areSetsEqual = useCallback((a, b) => {
+        if (a.size !== b.size) {
+            return false;
+        }
+        for (const value of a) {
+            if (!b.has(value)) {
+                return false;
+            }
+        }
+        return true;
+    }, []);
     const isInfiniteScroll = pagination?.infinite && mode === 'server';
     const [paginationState, setPaginationState] = useState({
         pageIndex: 0,
@@ -14,7 +26,19 @@ function NvDatatable({ mode = 'client', columns, rows, pagination, sorting, filt
     });
     const [sortingState, setSortingState] = useState(sorting?.sortState || []);
     const [globalFilterState, setGlobalFilterState] = useState(filtering?.filterState);
+    const [selectedRowIdsState, setSelectedRowIdsState] = useState(() => new Set(selection?.selectedRowIds ?? []));
+    const selectedRowIdsRef = useRef(new Set(selection?.selectedRowIds ?? []));
+    const selectionMode = selection?.mode ?? 'none';
+    const selectionEnabled = selectionMode !== 'none';
+    const selectAllEnabled = selection?.enableSelectAll ?? true;
+    const rowClickEnabled = typeof onRowClick === 'function';
+    const getSelectionRowId = useCallback((row) => selection?.getRowId?.(row) ?? '', [selection]);
     const lastRowRef = useRef(null);
+    const selectAllIntentRef = useRef(false);
+    const rowSelectionIntentRef = useRef(null);
+    const selectAllIntentResetTimerRef = useRef(null);
+    const rowSelectionIntentResetTimerRef = useRef(null);
+    const INTENT_RESET_DELAY_MS = 16;
     const debouncedSetFilter = useRef(null);
     const setGlobalFilterDebounced = useCallback((value) => {
         const debounceMs = filtering?.debounceMs ?? 300;
@@ -33,6 +57,12 @@ function NvDatatable({ mode = 'client', columns, rows, pagination, sorting, filt
             if (debouncedSetFilter.current) {
                 clearTimeout(debouncedSetFilter.current);
             }
+            if (selectAllIntentResetTimerRef.current) {
+                clearTimeout(selectAllIntentResetTimerRef.current);
+            }
+            if (rowSelectionIntentResetTimerRef.current) {
+                clearTimeout(rowSelectionIntentResetTimerRef.current);
+            }
         };
     }, []);
     useEffect(() => {
@@ -40,60 +70,89 @@ function NvDatatable({ mode = 'client', columns, rows, pagination, sorting, filt
             setGlobalFilterState(filtering.filterState);
         }
     }, [filtering?.filterState]);
-    const tableColumns = useMemo(() => columns
-        .filter((col) => !col.hidden)
-        .map((col) => {
-        const headerName = col.headerName || String(col.field);
-        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.renderHeader
-                ? () => col.renderHeader({
-                    headerName,
-                    field: col.field,
-                })
-                : headerName,
-            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 (selectionEnabled && !selection?.getRowId) {
+        throw new Error('NvDatatable selection requires selection.getRowId when selection.mode is not "none".');
+    }
+    useEffect(() => {
+        if (selection?.selectedRowIds) {
+            const controlledIds = new Set(selection.selectedRowIds);
+            if (!areSetsEqual(selectedRowIdsState, controlledIds)) {
+                selectedRowIdsRef.current = controlledIds;
+                setSelectedRowIdsState(controlledIds);
+            }
         }
-        if (col.sortUndefined !== undefined) {
-            columnDef.sortUndefined = col.sortUndefined;
+    }, [selection?.selectedRowIds, selectedRowIdsState, areSetsEqual]);
+    useEffect(() => {
+        selectedRowIdsRef.current = selectedRowIdsState;
+    }, [selectedRowIdsState]);
+    const tableColumns = useMemo(() => {
+        const dataColumns = columns
+            .filter((col) => !col.hidden)
+            .map((col) => {
+            const headerName = col.headerName || String(col.field);
+            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.renderHeader
+                    ? () => col.renderHeader({
+                        headerName,
+                        field: col.field,
+                    })
+                    : headerName,
+                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;
+        });
+        if (!selectionEnabled) {
+            return dataColumns;
         }
-        return columnDef;
-    }), [columns, sorting]);
+        const selectionColumn = {
+            id: '__selection__',
+            header: '',
+            size: selection?.checkboxColumnWidth ?? 48,
+            enableResizing: false,
+            enableSorting: false,
+            cell: () => null,
+        };
+        return [selectionColumn, ...dataColumns];
+    }, [columns, sorting, selectionEnabled, selection?.checkboxColumnWidth]);
     const tableConfig = useMemo(() => {
         const baseConfig = {
             data: rows,
@@ -187,6 +246,158 @@ function NvDatatable({ mode = 'client', columns, rows, pagination, sorting, filt
         mode,
     ]);
     const table = useReactTable(tableConfig);
+    const tableRows = table.getRowModel().rows;
+    const getCurrentVisibleRowIds = useCallback(() => {
+        return table
+            .getRowModel()
+            .rows.map((row) => getSelectionRowId(row.original))
+            .filter((id) => !!id);
+    }, [table, getSelectionRowId]);
+    const setSelectionState = useCallback((nextSelectedIds) => {
+        const current = new Set(selectedRowIdsRef.current);
+        const nextRaw = typeof nextSelectedIds === 'function'
+            ? nextSelectedIds(new Set(current))
+            : nextSelectedIds;
+        const next = new Set(nextRaw);
+        if (areSetsEqual(current, next)) {
+            return;
+        }
+        const hasExplicitSelectionIntent = selectAllIntentRef.current || rowSelectionIntentRef.current !== null;
+        if (!hasExplicitSelectionIntent && next.size < current.size) {
+            return;
+        }
+        selectedRowIdsRef.current = next;
+        setSelectedRowIdsState(next);
+        selection?.onSelectionChange?.(new Set(next));
+    }, [selection, areSetsEqual]);
+    const isRowSelected = useCallback((row) => {
+        if (!selectionEnabled) {
+            return false;
+        }
+        const rowId = getSelectionRowId(row);
+        return !!rowId && selectedRowIdsState.has(rowId);
+    }, [selectionEnabled, getSelectionRowId, selectedRowIdsState]);
+    const visibleRowIds = useMemo(() => tableRows
+        .map((row) => getSelectionRowId(row.original))
+        .filter((id) => !!id), [tableRows, getSelectionRowId]);
+    const setRowSelection = useCallback((row, isChecked) => {
+        if (!selectionEnabled) {
+            return;
+        }
+        const rowId = getSelectionRowId(row);
+        if (!rowId) {
+            return;
+        }
+        const currentVisibleRowIdsSet = new Set(getCurrentVisibleRowIds());
+        if (!currentVisibleRowIdsSet.has(rowId)) {
+            return;
+        }
+        setSelectionState((current) => {
+            return applyRowSelection({
+                currentSelectedIds: current,
+                rowId,
+                isChecked,
+                selectionMode,
+            });
+        });
+    }, [
+        selectionEnabled,
+        getSelectionRowId,
+        selectionMode,
+        setSelectionState,
+        getCurrentVisibleRowIds,
+    ]);
+    const selectAllState = useMemo(() => {
+        if (!selectionEnabled ||
+            selectionMode !== 'multiple' ||
+            !selectAllEnabled ||
+            !visibleRowIds.length) {
+            return 'unchecked';
+        }
+        const selectedCount = visibleRowIds.filter((id) => selectedRowIdsState.has(id)).length;
+        if (selectedCount === 0) {
+            return 'unchecked';
+        }
+        if (selectedCount === visibleRowIds.length) {
+            return 'checked';
+        }
+        return 'indeterminate';
+    }, [
+        selectionEnabled,
+        selectionMode,
+        selectAllEnabled,
+        visibleRowIds,
+        selectedRowIdsState,
+    ]);
+    const selectAllStateRef = useRef(selectAllState);
+    selectAllStateRef.current = selectAllState;
+    const handleSelectAllChanged = useCallback((isChecked) => {
+        if (!selectionEnabled ||
+            selectionMode !== 'multiple' ||
+            !selectAllEnabled) {
+            return;
+        }
+        const currentVisibleRowIds = getCurrentVisibleRowIds();
+        if (!currentVisibleRowIds.length) {
+            return;
+        }
+        if (shouldIgnoreSelectAllEvent({
+            isChecked,
+            selectAllState: selectAllStateRef.current,
+        })) {
+            return;
+        }
+        setSelectionState((current) => {
+            return applySelectAllSelection({
+                currentSelectedIds: current,
+                visibleRowIds: currentVisibleRowIds,
+                isChecked,
+            });
+        });
+    }, [
+        selectionEnabled,
+        selectionMode,
+        selectAllEnabled,
+        setSelectionState,
+        getCurrentVisibleRowIds,
+    ]);
+    useEffect(() => {
+        if (!selectionEnabled || selection?.deselectOnFilter === false) {
+            return;
+        }
+        if (mode !== 'client' || !filtering) {
+            return;
+        }
+        const filterVisibleRows = table
+            .getFilteredRowModel()
+            .rows.map((row) => row.original);
+        const visibleIds = new Set(filterVisibleRows
+            .map((row) => getSelectionRowId(row))
+            .filter((id) => !!id));
+        const currentSelection = selection?.selectedRowIds ?? selectedRowIdsState;
+        const next = new Set();
+        currentSelection.forEach((id) => {
+            if (visibleIds.has(id)) {
+                next.add(id);
+            }
+        });
+        if (!areSetsEqual(currentSelection, next)) {
+            setSelectedRowIdsState(next);
+            selection?.onSelectionChange?.(new Set(next));
+        }
+    }, [
+        areSetsEqual,
+        selectionEnabled,
+        selection?.deselectOnFilter,
+        selection?.onSelectionChange,
+        selection?.selectedRowIds,
+        mode,
+        filtering,
+        globalFilterState,
+        table,
+        selectedRowIdsState,
+        getSelectionRowId,
+    ]);
     useEffect(() => {
         if (mode === 'server' &&
             !pagination?.infinite &&
@@ -253,7 +464,6 @@ function NvDatatable({ mode = 'client', columns, rows, pagination, sorting, filt
         mode,
         isInfiniteScroll,
     ]);
-    const tableRows = table.getRowModel().rows;
     const renderDefaultPagination = (api) => {
         const labelProps = {};
         if (pagination?.labels?.page)
@@ -263,7 +473,11 @@ function NvDatatable({ mode = 'client', columns, rows, pagination, sorting, filt
         if (pagination?.labels?.pageSizeOption)
             labelProps.labelPageSizeOption = pagination.labels.pageSizeOption;
         return (React.createElement("div", { "data-testid": "default-pagination-wrapper", style: { marginTop: '16px' } },
-            React.createElement(NvPaginationtable, { pageIndex: api.pageIndex, pageSize: api.pageSize, pageCount: api.pageCount, rowCount: api.rowCount, ...labelProps, onPageIndexChanged: (e) => api.setPageIndex(e.detail), onPageSizeChanged: (e) => api.setPageSize(e.detail) })));
+            React.createElement(NvPaginationtable, { pageIndex: api.pageIndex, pageSize: api.pageSize, pageCount: api.pageCount, rowCount: api.rowCount, ...labelProps, onPageIndexChanged: (e) => {
+                    api.setPageIndex(e.detail);
+                }, onPageSizeChanged: (e) => {
+                    api.setPageSize(e.detail);
+                } })));
     };
     const filteringAPI = useMemo(() => {
         if (!filtering) {
@@ -284,25 +498,130 @@ function NvDatatable({ mode = 'client', columns, rows, pagination, sorting, filt
             filteredRows: filteredRowModel.rows.length,
         };
     }, [filtering, globalFilterState, table, setGlobalFilterDebounced]);
+    const markSelectAllIntentFromKey = (event) => {
+        if (event.key === ' ' || event.key === 'Enter') {
+            if (selectAllIntentResetTimerRef.current) {
+                clearTimeout(selectAllIntentResetTimerRef.current);
+            }
+            selectAllIntentRef.current = true;
+        }
+    };
+    const scheduleSelectAllIntentReset = () => {
+        if (selectAllIntentResetTimerRef.current) {
+            clearTimeout(selectAllIntentResetTimerRef.current);
+        }
+        selectAllIntentResetTimerRef.current = setTimeout(() => {
+            selectAllIntentRef.current = false;
+            selectAllIntentResetTimerRef.current = null;
+        }, INTENT_RESET_DELAY_MS);
+    };
+    const markRowSelectionIntentFromKey = (event, rowId) => {
+        if (event.key === ' ' || event.key === 'Enter') {
+            if (rowSelectionIntentResetTimerRef.current) {
+                clearTimeout(rowSelectionIntentResetTimerRef.current);
+            }
+            rowSelectionIntentRef.current = rowId;
+        }
+    };
+    const scheduleRowSelectionIntentReset = (rowId) => {
+        if (rowSelectionIntentResetTimerRef.current) {
+            clearTimeout(rowSelectionIntentResetTimerRef.current);
+        }
+        rowSelectionIntentResetTimerRef.current = setTimeout(() => {
+            if (rowSelectionIntentRef.current === rowId) {
+                rowSelectionIntentRef.current = null;
+            }
+            rowSelectionIntentResetTimerRef.current = null;
+        }, INTENT_RESET_DELAY_MS);
+    };
+    const renderRowSelectionCheckbox = useCallback((row, rowIndex) => {
+        const rowId = getSelectionRowId(row);
+        return (React.createElement(NvFieldcheckbox, { "data-testid": `datatable-row-${rowIndex}-checkbox`, checked: isRowSelected(row), label: `Select row ${rowIndex + 1}`, hideLabel: true, onPointerDownCapture: () => {
+                if (rowSelectionIntentResetTimerRef.current) {
+                    clearTimeout(rowSelectionIntentResetTimerRef.current);
+                }
+                rowSelectionIntentRef.current = rowId;
+            }, onKeyDownCapture: (event) => {
+                markRowSelectionIntentFromKey(event, rowId);
+            }, onBlurCapture: () => {
+                scheduleRowSelectionIntentReset(rowId);
+            }, onCheckedChanged: (event) => {
+                if (!rowId || rowSelectionIntentRef.current !== rowId) {
+                    return;
+                }
+                try {
+                    setRowSelection(row, event.detail);
+                }
+                finally {
+                    rowSelectionIntentRef.current = null;
+                }
+            } }));
+    }, [getSelectionRowId, isRowSelected, setRowSelection]);
     return (React.createElement(React.Fragment, null,
         filteringAPI && renderFiltering && renderFiltering(filteringAPI),
         React.createElement(NvTable, { ...htmlProps },
-            React.createElement("table", null,
+            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 canSort = header.column.getCanSort();
                     const sortDirection = header.column.getIsSorted();
-                    return (React.createElement("th", { key: header.id, "data-testid": `datatable-header-${header.id}`, style: {
+                    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": 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()))));
+                        }, "data-no-resize": isSelectionHeader
+                            ? true
+                            : header.column.columnDef.enableResizing
+                                ? null
+                                : true }, isSelectionHeader ? (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);
+                                }
+                                selectAllIntentRef.current = true;
+                            }, onKeyDownCapture: markSelectAllIntentFromKey, onBlurCapture: () => {
+                                scheduleSelectAllIntentReset();
+                            }, onCheckedChanged: (event) => {
+                                if (!selectAllIntentRef.current) {
+                                    return;
+                                }
+                                try {
+                                    handleSelectAllChanged(event.detail);
+                                }
+                                finally {
+                                    selectAllIntentRef.current = false;
+                                }
+                            } }))) : null) : (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-${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()))))));
+                    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,
+                                    });
+                                }
+                            }
+                            : 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()))))));
                 })))),
         paginationAPI &&
             (renderPagination

package/dist/components/NvDatatable/selectionState.js

@@ -0,0 +1,45 @@
+export function applyRowSelection(params) {
+    const { currentSelectedIds, rowId, isChecked, selectionMode } = params;
+    const next = new Set(currentSelectedIds);
+    const currentlySelected = next.has(rowId);
+    if (selectionMode === 'single') {
+        if (isChecked) {
+            if (!(next.size === 1 && currentlySelected)) {
+                next.clear();
+                next.add(rowId);
+            }
+        }
+        else if (currentlySelected) {
+            next.delete(rowId);
+        }
+        return next;
+    }
+    if (selectionMode === 'multiple') {
+        if (isChecked && !currentlySelected) {
+            next.add(rowId);
+        }
+        else if (!isChecked && currentlySelected) {
+            next.delete(rowId);
+        }
+    }
+    return next;
+}
+export function shouldIgnoreSelectAllEvent(params) {
+    const { isChecked, selectAllState } = params;
+    if ((isChecked && selectAllState === 'checked') ||
+        (!isChecked && selectAllState === 'unchecked')) {
+        return true;
+    }
+    return !isChecked && selectAllState === 'indeterminate';
+}
+export function applySelectAllSelection(params) {
+    const { currentSelectedIds, visibleRowIds, isChecked } = params;
+    const next = new Set(currentSelectedIds);
+    if (isChecked) {
+        visibleRowIds.forEach((id) => next.add(id));
+    }
+    else {
+        visibleRowIds.forEach((id) => next.delete(id));
+    }
+    return next;
+}