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

package/dist/components/NvDatatable/NvDatatable.js

@@ -7,8 +7,7 @@ if (typeof window !== 'undefined' &&
     defineNvPaginationtable();
 }
 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;
+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;
@@ -32,9 +31,14 @@ function NvDatatable({ mode = 'client', columns, rows, pagination, sorting, filt
     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 suppressRowSelectionEventsRef = useRef(false);
+    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;
@@ -53,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(() => {
@@ -237,8 +247,14 @@ function NvDatatable({ mode = 'client', columns, rows, pagination, sorting, filt
     ]);
     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(selection?.selectedRowIds ?? selectedRowIdsRef.current);
+        const current = new Set(selectedRowIdsRef.current);
         const nextRaw = typeof nextSelectedIds === 'function'
             ? nextSelectedIds(new Set(current))
             : nextSelectedIds;
@@ -246,27 +262,14 @@ function NvDatatable({ mode = 'client', columns, rows, pagination, sorting, filt
         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, 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;
-    }, []);
+    }, [selection, areSetsEqual]);
     const isRowSelected = useCallback((row) => {
         if (!selectionEnabled) {
             return false;
@@ -277,22 +280,18 @@ function NvDatatable({ mode = 'client', columns, rows, pagination, sorting, filt
     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)) {
+        const currentVisibleRowIdsSet = new Set(getCurrentVisibleRowIds());
+        if (!currentVisibleRowIdsSet.has(rowId)) {
             return;
         }
-        suppressRowSelectionEventsRef.current = true;
         setSelectionState((current) => {
             return applyRowSelection({
                 currentSelectedIds: current,
@@ -301,15 +300,12 @@ function NvDatatable({ mode = 'client', columns, rows, pagination, sorting, filt
                 selectionMode,
             });
         });
-        setTimeout(() => {
-            suppressRowSelectionEventsRef.current = false;
-        }, SELECTION_EVENT_SUPPRESSION_MS);
     }, [
         selectionEnabled,
         getSelectionRowId,
-        visibleRowIdsSet,
         selectionMode,
         setSelectionState,
+        getCurrentVisibleRowIds,
     ]);
     const selectAllState = useMemo(() => {
         if (!selectionEnabled ||
@@ -333,34 +329,37 @@ function NvDatatable({ mode = 'client', columns, rows, pagination, sorting, filt
         visibleRowIds,
         selectedRowIdsState,
     ]);
+    const selectAllStateRef = useRef(selectAllState);
+    selectAllStateRef.current = selectAllState;
     const handleSelectAllChanged = useCallback((isChecked) => {
         if (!selectionEnabled ||
             selectionMode !== 'multiple' ||
-            !selectAllEnabled ||
-            !visibleRowIds.length) {
+            !selectAllEnabled) {
+            return;
+        }
+        const currentVisibleRowIds = getCurrentVisibleRowIds();
+        if (!currentVisibleRowIds.length) {
             return;
         }
-        if (shouldIgnoreSelectAllEvent({ isChecked, selectAllState })) {
+        if (shouldIgnoreSelectAllEvent({
+            isChecked,
+            selectAllState: selectAllStateRef.current,
+        })) {
             return;
         }
-        suppressRowSelectionEventsRef.current = true;
         setSelectionState((current) => {
             return applySelectAllSelection({
                 currentSelectedIds: current,
-                visibleRowIds,
+                visibleRowIds: currentVisibleRowIds,
                 isChecked,
             });
         });
-        setTimeout(() => {
-            suppressRowSelectionEventsRef.current = false;
-        }, SELECTION_EVENT_SUPPRESSION_MS);
     }, [
         selectionEnabled,
         selectionMode,
         selectAllEnabled,
-        visibleRowIds,
-        selectAllState,
         setSelectionState,
+        getCurrentVisibleRowIds,
     ]);
     useEffect(() => {
         if (!selectionEnabled || selection?.deselectOnFilter === false) {
@@ -474,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) {
@@ -495,10 +498,69 @@ 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();
@@ -512,10 +574,22 @@ function NvDatatable({ mode = 'client', columns, rows, pagination, sorting, filt
                             : 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);
+                        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()
@@ -525,14 +599,29 @@ function NvDatatable({ mode = 'client', columns, rows, pagination, sorting, filt
                 }))))),
                 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": 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);
+                    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,
+                                    });
+                                }
                             }
-                        } })) : (flexRender(cell.column.columnDef.cell, cell.getContext())))))));
+                            : 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/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, stickyHeader, ...htmlProps }: NvDatatableProps<T>): React.JSX.Element;
+declare function NvDatatable<T>({ mode, columns, rows, pagination, sorting, filtering, selection, renderPagination, renderFiltering, onRowClick, stickyHeader, ...htmlProps }: NvDatatableProps<T>): React.JSX.Element;
 declare namespace NvDatatable {
     var displayName: string;
 }

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

@@ -9,11 +9,16 @@ export type NvDatatableProps<T> = {
     sorting?: NvDatatableSortingConfig;
     filtering?: NvDatatableFilteringConfig<T>;
     selection?: NvDatatableSelectionConfigWithMode<T>;
+    onRowClick?: (args: NvDatatableRowClickEventArgs<T>) => void;
     renderPagination?: (api: NvDatatableRenderPaginationAPI) => React.ReactNode;
     renderFiltering?: (api: NvDatatableRenderFilteringAPI) => React.ReactNode;
     stickyHeader?: boolean;
     suppressHydrationWarning?: boolean;
 } & Pick<ComponentProps<'div'>, 'className' | 'style'>;
+export interface NvDatatableRowClickEventArgs<T> {
+    row: T;
+    rowIndex: number;
+}
 export type NvDatatableSelectionMode = 'none' | 'single' | 'multiple';
 export interface NvDatatableSelectionConfig<T> {
     mode?: NvDatatableSelectionMode;

package/dist/types/index.d.ts

@@ -1,5 +1,6 @@
 export * from './generated/components';
 export * from '@nova-design-system/nova-webcomponents/constants';
+export { type IconName } from '@nova-design-system/nova-webcomponents';
 export { defineCustomElements } from '@nova-design-system/nova-webcomponents/loader';
 export { useNotifications, NotificationProvider, type NotificationOptions, type NotificationContextValue, type NotificationProviderProps, type Notification, } from './providers/NotificationProvider';
 export * from './components/NvDatatable';

package/dist/types/providers/NotificationProvider.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { type NotificationPosition, type NotificationEmphasis, FeedbackColors } from '../index';
+import { type NotificationPosition, type NotificationEmphasis, type IconName, FeedbackColors } from '../index';
 export interface NotificationAction {
     label: string;
     onClick: () => void;
@@ -11,7 +11,7 @@ export interface NotificationOptions {
     dismissible?: boolean;
     emphasis?: `${NotificationEmphasis}`;
     feedback?: `${FeedbackColors}`;
-    icon?: string;
+    icon?: `${IconName}`;
     actions?: NotificationAction[];
     actionSlot?: React.ReactElement;
     duration?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-react",
-  "version": "3.28.0",
+  "version": "3.29.0",
   "description": "Nova is a design system created by Elia Group to empower creators to efficiently build solutions that people love to use.",
   "author": "Elia Group",
   "homepage": "https://nova.eliagroup.io",