@nova-design-system/nova-react 3.26.0 → 3.28.0

package/dist/cjs/{nv-stack.entry-BMLt30Nt.js → nv-stack.entry-BR8lYaoI.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BeFrXZol.js');
+var index = require('./index-Kxp9mv-Q.js');
 var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
 require('@stencil/react-output-target/runtime');
 require('react');
@@ -23,7 +23,7 @@ const NvStack = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '1fe102ad734149231a7058af441e5ee77ef97ca3', class: clsxChV9xqsO.clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, index.h("slot", { key: 'f7ed597dabd90182887096441ff1258812dfe9fc' })));
+        return (index.h(index.Host, { key: '861c5eed0b6dc7cdd5bf3a2d07af92127e2025bf', class: clsxChV9xqsO.clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, index.h("slot", { key: '4cf3d3fb15fa6c4ed2d7d6bb70334965b0cca457' })));
     }
 };
 NvStack.style = nvStackCss();

package/dist/cjs/{nv-table.entry-RTiqKRKM.js → nv-table.entry-CISZFst5.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BeFrXZol.js');
+var index = require('./index-Kxp9mv-Q.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -236,7 +236,7 @@ const NvTable = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '0d5518a54b41c67bdd7c73d5147fd954fb53d388' }, index.h("slot", { key: '8ab65d5dd1ce751fd357b275b84db042b1d9ce2e' })));
+        return (index.h(index.Host, { key: 'a6882cbcf9b0b12776f6d4be6d9cbfb42aff6833' }, index.h("slot", { key: 'd4d47a2eb77c50ff30109e217ceecd2677b9d28d' })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/{nv-tableheader.entry-Ci4qo8eY.js → nv-tableheader.entry-DbdpTJGC.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BeFrXZol.js');
+var index = require('./index-Kxp9mv-Q.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -62,7 +62,7 @@ const NvTableheader = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '95447cd8ccde74d09226bcdbf645eed309be0fa8', role: "columnheader", "aria-sort": this.ariaSort, tabindex: this.sortable ? 0 : undefined, onKeyDown: this.handleKeyDown.bind(this), onClick: this.cycleSortDirection.bind(this) }, index.h("slot", { key: '4e26aa21f080cf23ce42fb72d6777463bd079991' }), this.sortable && (index.h("span", { key: '666254c197e97226d2f1c6830d1216b9457c4acc', class: "sort-icon-wrap", "aria-hidden": "true" }, index.h("nv-iconbutton", { key: '11b2de5c4c270740857094ec8a39f1d392d7246a', disableTabindex: true, name: "arrow-up", size: "xs", emphasis: this.sortDirection === 'none' ? 'lower' : 'low',
+        return (index.h(index.Host, { key: '962f555a02b3035148c5915ae7493c68c0202cc7', role: "columnheader", "aria-sort": this.ariaSort, tabindex: this.sortable ? 0 : undefined, onKeyDown: this.handleKeyDown.bind(this), onClick: this.cycleSortDirection.bind(this) }, index.h("slot", { key: '0e69da3d4e2eb8ad01060f51d5043ffc14380415' }), this.sortable && (index.h("span", { key: 'a9b5ff97552d142cc3e1becc14a34ebab1f3092d', class: "sort-icon-wrap", "aria-hidden": "true" }, index.h("nv-iconbutton", { key: '76f832eba2b57f244dbce597668f493a918cf599', disableTabindex: true, name: "arrow-up", size: "xs", emphasis: this.sortDirection === 'none' ? 'lower' : 'low',
             // prevent mousedown from selecting text
             onMouseDown: (e) => e.preventDefault(), class: {
                 'is-none': this.sortDirection === 'none',

package/dist/cjs/nv-timetest.entry-Dg1JEgAv.js

@@ -0,0 +1,75 @@
+'use strict';
+
+var index = require('./index-Kxp9mv-Q.js');
+var novaDatetimeCyL2J6O4 = require('./nova-datetime-CyL2J6O4-0Y9g3rfI.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+const nvTimetestCss = () => `nv-timetest{display:flex}nv-timetest label{display:flex;flex-direction:column;margin-right:10px;font-weight:bold}nv-timetest input{font-weight:normal;padding:var(--spacing-2);border-radius:var(--spacing-1);border:1px solid #ccc}`;
+
+const NvTimetest = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.valueChanged = index.createEvent(this, "valueChanged", 3);
+        this.lastChanged = index.createEvent(this, "lastChanged", 3);
+        this.historyChanged = index.createEvent(this, "historyChanged", 3);
+        this.valueDateChanged = index.createEvent(this, "valueDateChanged", 3);
+        //#endregion PROPERTIES
+        /****************************************************************************/
+        //#region METHODS
+        this.handleStartChange = (event) => {
+            const input = event.target;
+            const parsed = novaDatetimeCyL2J6O4.parseTimeOnly(input.value);
+            if (!parsed)
+                return;
+            const newStart = novaDatetimeCyL2J6O4.formatTimeOnly(parsed);
+            this.value = { start: newStart, end: this.value?.end };
+            this.lastChange = newStart;
+            this.history = [...(this.history ?? []), newStart];
+            this.valueChanged.emit(this.value);
+            this.lastChanged.emit({ time: this.lastChange });
+            this.historyChanged.emit({ times: this.history });
+            const todayDate = novaDatetimeCyL2J6O4.LocalDate.now().toString();
+            this.valueDateChanged.emit({
+                start: this.value?.start
+                    ? new Date(todayDate + 'T' + this.value.start)
+                    : undefined,
+                end: this.value?.end
+                    ? new Date(todayDate + 'T' + this.value.end)
+                    : undefined,
+            });
+        };
+        this.handleEndChange = (event) => {
+            const input = event.target;
+            const parsed = novaDatetimeCyL2J6O4.parseTimeOnly(input.value);
+            if (!parsed)
+                return;
+            const newEnd = novaDatetimeCyL2J6O4.formatTimeOnly(parsed);
+            this.value = { start: this.value?.start, end: newEnd };
+            this.lastChange = newEnd;
+            this.history = [...(this.history ?? []), newEnd];
+            this.valueChanged.emit(this.value);
+            this.lastChanged.emit({ time: this.lastChange });
+            this.historyChanged.emit({ times: this.history });
+            const todayDate = novaDatetimeCyL2J6O4.LocalDate.now().toString();
+            this.valueDateChanged.emit({
+                start: this.value?.start
+                    ? new Date(todayDate + 'T' + this.value.start)
+                    : undefined,
+                end: this.value?.end
+                    ? new Date(todayDate + 'T' + this.value.end)
+                    : undefined,
+            });
+        };
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '85d3773d49a180e5bc9b5bc0962cc3b709a474b0' }, index.h("label", { key: 'c0d5c262578e6aa1555ded8c542e2eef7e42d491' }, "Start:", index.h("input", { key: '31fe9447be14efd87aab1161dbc01593a30328dc', type: "time", step: "1", value: this.value?.start ?? '', onInput: this.handleStartChange })), index.h("label", { key: '0959b432f53169c425765b94c098ca5ecc8d6ede' }, "End:", index.h("input", { key: 'ccc50a80dfea2ab7eb627d11840dd5626ca25f88', type: "time", step: "1", value: this.value?.end ?? '', onInput: this.handleEndChange })), index.h("slot", { key: 'd4c6a017d41102a245e1f8472d676bc866382c00' })));
+    }
+};
+NvTimetest.style = nvTimetestCss();
+
+exports.nv_timetest = NvTimetest;

package/dist/cjs/{nv-toggle.entry-s8B7-8P7.js → nv-toggle.entry-DDfRpC1R.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BeFrXZol.js');
+var index = require('./index-Kxp9mv-Q.js');
 var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
 var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
 require('@stencil/react-output-target/runtime');
@@ -66,8 +66,8 @@ const NvToggle = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '38dd2a460c82599e2c2bfd6b039eafff0dc6fc67', class: clsxChV9xqsO.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: '4d6bf742f548cc5f92ae84497f12569d9680dcef', class: "input-container" }, index.h("input", { key: '97f54363c17cde48ec226680ee58da012e590b69', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), index.h("div", { key: 'e4576a0884f02731a3e6d2d20537cfabf411a8fe', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '4744036b0d1e73f350bbc4b6f6e7664bb9361d1e', htmlFor: this.inputId, class: clsxChV9xqsO.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '44a2aeb86c840246473bc47e0ba01269af77ef06', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '6e5c3d1721c9db3cffd019c9274294c40793daf0', class: "description" }, index.h("slot", { key: '87c3d35c78ded085cd1ddb5b2874dfae7bd99842', name: "description" }, this.description))))));
+        return (index.h(index.Host, { key: '39ad1374bbf8cd5393a99dc4c18fa28091dc5e90', class: clsxChV9xqsO.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: '3a8be2405404975398f1a0dae05c0855b913245f', class: "input-container" }, index.h("input", { key: 'b589b9faa5801f99e698d0e664e0a35779a1271f', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), index.h("div", { key: 'a3308782b02b1c0eca3d6a1b87509674b9bc5c13', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '854b2ffe7bf61423512154ffe8b3b0351a2950a4', htmlFor: this.inputId, class: clsxChV9xqsO.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '933bf88b7841f3b2ed24c3bb86fb24159eaac900', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '5a04358d1be3b935239bb23e1466cc22ed2f3b48', class: "description" }, index.h("slot", { key: 'f5c1513eff6ee42bc171b0088baec634f8458197', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/{nv-togglebutton.entry-CyHgU4Wl.js → nv-togglebutton.entry-D7NkdIXP.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BeFrXZol.js');
+var index = require('./index-Kxp9mv-Q.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: '4af1293d9eb69a3a20d8f30c6b2876c6c29ddc03', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: '783fad27c525553cd404c1ffed0ae1305d330de8' })));
+        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-Bn_9DsdP.js → nv-togglebuttongroup.entry-L8gitSUS.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BeFrXZol.js');
+var index = require('./index-Kxp9mv-Q.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: '1116872815229d09e1e286dd1f12a9787218e207' }, index.h("slot", { key: 'fa5363ec707f38830065718b2423dd8493acdd4e' })));
+        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-D6kxXLO-.js → nv-tooltip.entry-BElnrEqE.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BeFrXZol.js');
+var index = require('./index-Kxp9mv-Q.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: 'bda9ba58186add585457f8fdf4a8e1d6389da01a' }, index.h("nv-popover", { key: 'ac67ea44cebbc8abb9ff4e190668093bb7179222', 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: 'b677689d4a73462b7d16ff7d9f31bfd61e7f47eb', slot: "content" }, this.message), index.h("slot", { key: 'bd1540db065fdeceb89d09d69e1dbf7ad4de728d', name: "content" })), index.h("slot", { key: '648d3c3125b0528cd8e88675122d775ad7cc40d9', 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,25 @@
 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, stickyHeader, ...htmlProps }) {
+    const SELECTION_EVENT_SUPPRESSION_MS = 16;
+    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 +27,14 @@ 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 getSelectionRowId = useCallback((row) => selection?.getRowId?.(row) ?? '', [selection]);
     const lastRowRef = useRef(null);
+    const suppressRowSelectionEventsRef = useRef(false);
     const debouncedSetFilter = useRef(null);
     const setGlobalFilterDebounced = useCallback((value) => {
         const debounceMs = filtering?.debounceMs ?? 300;
@@ -40,60 +60,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 +236,169 @@ function NvDatatable({ mode = 'client', columns, rows, pagination, sorting, filt
         mode,
     ]);
     const table = useReactTable(tableConfig);
+    const tableRows = table.getRowModel().rows;
+    const setSelectionState = useCallback((nextSelectedIds) => {
+        const current = new Set(selection?.selectedRowIds ?? selectedRowIdsRef.current);
+        const nextRaw = typeof nextSelectedIds === 'function'
+            ? nextSelectedIds(new Set(current))
+            : nextSelectedIds;
+        const next = new Set(nextRaw);
+        if (areSetsEqual(current, next)) {
+            return;
+        }
+        selectedRowIdsRef.current = next;
+        setSelectedRowIdsState(next);
+        selection?.onSelectionChange?.(new Set(next));
+    }, [selection, selection?.selectedRowIds, areSetsEqual]);
+    const resolveCheckedChange = useCallback((event) => {
+        if (event && typeof event === 'object') {
+            const eventLike = event;
+            const target = eventLike.target;
+            const currentTarget = eventLike.currentTarget;
+            if (typeof eventLike.detail === 'boolean') {
+                return eventLike.detail;
+            }
+            if (typeof target?.checked === 'boolean') {
+                return target.checked;
+            }
+            if (typeof currentTarget?.checked === 'boolean') {
+                return currentTarget.checked;
+            }
+        }
+        return undefined;
+    }, []);
+    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 visibleRowIdsSet = useMemo(() => new Set(visibleRowIds), [visibleRowIds]);
+    const setRowSelection = useCallback((row, isChecked) => {
+        if (!selectionEnabled) {
+            return;
+        }
+        if (suppressRowSelectionEventsRef.current) {
+            return;
+        }
+        const rowId = getSelectionRowId(row);
+        if (!rowId) {
+            return;
+        }
+        if (!visibleRowIdsSet.has(rowId)) {
+            return;
+        }
+        suppressRowSelectionEventsRef.current = true;
+        setSelectionState((current) => {
+            return applyRowSelection({
+                currentSelectedIds: current,
+                rowId,
+                isChecked,
+                selectionMode,
+            });
+        });
+        setTimeout(() => {
+            suppressRowSelectionEventsRef.current = false;
+        }, SELECTION_EVENT_SUPPRESSION_MS);
+    }, [
+        selectionEnabled,
+        getSelectionRowId,
+        visibleRowIdsSet,
+        selectionMode,
+        setSelectionState,
+    ]);
+    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 handleSelectAllChanged = useCallback((isChecked) => {
+        if (!selectionEnabled ||
+            selectionMode !== 'multiple' ||
+            !selectAllEnabled ||
+            !visibleRowIds.length) {
+            return;
+        }
+        if (shouldIgnoreSelectAllEvent({ isChecked, selectAllState })) {
+            return;
+        }
+        suppressRowSelectionEventsRef.current = true;
+        setSelectionState((current) => {
+            return applySelectAllSelection({
+                currentSelectedIds: current,
+                visibleRowIds,
+                isChecked,
+            });
+        });
+        setTimeout(() => {
+            suppressRowSelectionEventsRef.current = false;
+        }, SELECTION_EVENT_SUPPRESSION_MS);
+    }, [
+        selectionEnabled,
+        selectionMode,
+        selectAllEnabled,
+        visibleRowIds,
+        selectAllState,
+        setSelectionState,
+    ]);
+    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 +465,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)
@@ -289,20 +500,39 @@ function NvDatatable({ mode = 'client', columns, rows, pagination, sorting, filt
         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) => {
+                    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, onCheckedChanged: (event) => {
+                                const checked = resolveCheckedChange(event);
+                                if (typeof checked === 'boolean') {
+                                    handleSelectAllChanged(checked);
+                                }
+                            } }))) : 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()))))));
+                    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": cell.column.id === '__selection__'
+                            ? 'datatable-cell-selection'
+                            : `datatable-cell-${cell.column.id}` }, cell.column.id === '__selection__' ? (React.createElement(NvFieldcheckbox, { "data-testid": `datatable-row-${index}-checkbox`, checked: isRowSelected(row.original), label: `Select row ${index + 1}`, hideLabel: true, onCheckedChanged: (event) => {
+                            const checked = resolveCheckedChange(event);
+                            if (typeof checked === 'boolean') {
+                                setRowSelection(row.original, checked);
+                            }
+                        } })) : (flexRender(cell.column.columnDef.cell, cell.getContext())))))));
                 })))),
         paginationAPI &&
             (renderPagination