@nova-design-system/nova-react 3.23.0 → 3.25.0

package/dist/components/NvDatatable/NvDatatable.js

@@ -1,7 +1,13 @@
 import React, { useMemo, useState, useEffect, useRef, useCallback, } from 'react';
 import { flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, getFilteredRowModel, useReactTable, } from '@tanstack/react-table';
-import { NvTable, NvTableheader } from '../../generated/components';
-function NvDatatable({ columns, rows, pagination, sorting, filtering, renderPagination, renderFiltering, stickyHeader, ...htmlProps }) {
+import { NvTable, NvTableheader, NvPaginationtable, } 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 }) {
+    const isInfiniteScroll = pagination?.infinite && mode === 'server';
     const [paginationState, setPaginationState] = useState({
         pageIndex: 0,
         pageSize: pagination?.initialPageSize || 10,
@@ -17,11 +23,11 @@ function NvDatatable({ columns, rows, pagination, sorting, filtering, renderPagi
         }
         debouncedSetFilter.current = setTimeout(() => {
             setGlobalFilterState(value);
-            if (filtering?.mode === 'server' && filtering.onFilterChange) {
+            if (mode === 'server' && filtering?.onFilterChange) {
                 filtering.onFilterChange(value);
             }
         }, debounceMs);
-    }, [filtering]);
+    }, [filtering, mode]);
     useEffect(() => {
         return () => {
             if (debouncedSetFilter.current) {
@@ -37,6 +43,7 @@ function NvDatatable({ columns, rows, pagination, sorting, filtering, renderPagi
     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
@@ -49,7 +56,12 @@ function NvDatatable({ columns, rows, pagination, sorting, filtering, renderPagi
                     });
                 }
                 : undefined,
-            header: col.headerName || String(col.field),
+            header: col.renderHeader
+                ? () => col.renderHeader({
+                    headerName,
+                    field: col.field,
+                })
+                : headerName,
             size: col.width,
             enableResizing: col.resizable ?? true,
             enableSorting: sorting ? col.sortable ?? true : false,
@@ -92,7 +104,7 @@ function NvDatatable({ columns, rows, pagination, sorting, filtering, renderPagi
                     sorting: sorting.sortState || sortingState,
                     ...(filtering && { globalFilter: globalFilterState }),
                 },
-                onSortingChange: sorting.mode === 'server'
+                onSortingChange: mode === 'server'
                     ? (updater) => {
                         const newSort = typeof updater === 'function'
                             ? updater(sortingState)
@@ -101,14 +113,14 @@ function NvDatatable({ columns, rows, pagination, sorting, filtering, renderPagi
                         sorting.onSortingChange?.(newSort);
                     }
                     : setSortingState,
-                manualSorting: sorting.mode === 'server',
+                manualSorting: mode === 'server',
                 enableSorting: true,
                 enableMultiSort: sorting.enableMultiSort ?? false,
                 enableSortingRemoval: sorting.enableSortingRemoval ?? true,
                 maxMultiSortColCount: sorting.maxMultiSortColCount,
                 sortDescFirst: sorting.sortDescFirst ?? false,
                 isMultiSortEvent: sorting.enableMultiSort ? () => true : undefined,
-                getSortedRowModel: sorting.mode === 'client' ? getSortedRowModel() : undefined,
+                getSortedRowModel: mode === 'client' ? getSortedRowModel() : undefined,
             }),
             ...(filtering && {
                 state: {
@@ -120,30 +132,29 @@ function NvDatatable({ columns, rows, pagination, sorting, filtering, renderPagi
                         ? updater(globalFilterState)
                         : updater;
                     setGlobalFilterState(newFilter);
-                    if (filtering.mode === 'server' && filtering.onFilterChange) {
+                    if (mode === 'server' && filtering.onFilterChange) {
                         filtering.onFilterChange(newFilter);
                     }
                 },
                 globalFilterFn: filtering.globalFilterFn,
-                getFilteredRowModel: filtering.mode === 'client' ? getFilteredRowModel() : undefined,
+                getFilteredRowModel: mode === 'client' ? getFilteredRowModel() : undefined,
             }),
         };
         if (!pagination) {
             return baseConfig;
         }
-        if (pagination.mode === 'client') {
+        if (mode === 'client' && !pagination.infinite) {
             return {
                 ...baseConfig,
                 getPaginationRowModel: getPaginationRowModel(),
-                initialState: {
-                    pagination: {
-                        pageIndex: 0,
-                        pageSize: pagination.initialPageSize || 10,
-                    },
+                state: {
+                    ...(baseConfig.state || {}),
+                    pagination: paginationState,
                 },
+                onPaginationChange: setPaginationState,
             };
         }
-        if (pagination.mode === 'server') {
+        if (mode === 'server' && !pagination.infinite) {
             const pageSize = paginationState.pageSize;
             let pageCount = -1;
             if (pagination.totalPageCount !== undefined) {
@@ -173,27 +184,30 @@ function NvDatatable({ columns, rows, pagination, sorting, filtering, renderPagi
         sortingState,
         filtering,
         globalFilterState,
+        mode,
     ]);
     const table = useReactTable(tableConfig);
     useEffect(() => {
-        if (pagination?.mode === 'server' && pagination.onPaginationChange) {
+        if (mode === 'server' &&
+            !pagination?.infinite &&
+            pagination?.onPaginationChange) {
             pagination.onPaginationChange({
                 pageIndex: paginationState.pageIndex,
                 pageSize: paginationState.pageSize,
             });
         }
-    }, [paginationState, pagination]);
+    }, [paginationState, pagination, mode]);
     useEffect(() => {
-        if (pagination?.mode !== 'infinite' || !lastRowRef.current) {
+        if (!isInfiniteScroll || !lastRowRef.current) {
             return;
         }
-        const threshold = pagination.loadMoreThreshold || 500;
+        const threshold = pagination?.loadMoreThreshold || 500;
         const observer = new IntersectionObserver((entries) => {
             const entry = entries[0];
             if (entry.isIntersecting &&
-                pagination.hasMore &&
-                !pagination.isLoading &&
-                pagination.onLoadMore) {
+                pagination?.hasMore &&
+                !pagination?.isLoading &&
+                pagination?.onLoadMore) {
                 pagination.onLoadMore();
             }
         }, {
@@ -204,17 +218,17 @@ function NvDatatable({ columns, rows, pagination, sorting, filtering, renderPagi
         return () => {
             observer.disconnect();
         };
-    }, [rows, pagination]);
+    }, [rows, pagination, isInfiniteScroll]);
     const tablePaginationState = table.getState().pagination;
     const paginationAPI = useMemo(() => {
         if (!pagination) {
             return null;
         }
         const pageCount = table.getPageCount();
-        const rowCount = pagination.mode === 'server'
+        const rowCount = mode === 'server' && !pagination.infinite
             ? pagination.totalRowCount || rows.length
             : rows.length;
-        return {
+        const api = {
             pageIndex: tablePaginationState.pageIndex,
             pageSize: tablePaginationState.pageSize,
             pageCount,
@@ -227,12 +241,30 @@ function NvDatatable({ columns, rows, pagination, sorting, filtering, renderPagi
             setPageSize: (size) => table.setPageSize(size),
             canPreviousPage: table.getCanPreviousPage(),
             canNextPage: table.getCanNextPage(),
-            isLoading: pagination.mode === 'infinite' ? pagination.isLoading : undefined,
-            hasMore: pagination.mode === 'infinite' ? pagination.hasMore : undefined,
+            isLoading: isInfiniteScroll ? pagination.isLoading : undefined,
+            hasMore: isInfiniteScroll ? pagination.hasMore : undefined,
         };
-    }, [pagination, table, rows.length, tablePaginationState]);
+        return api;
+    }, [
+        pagination,
+        table,
+        rows.length,
+        tablePaginationState,
+        mode,
+        isInfiniteScroll,
+    ]);
     const tableRows = table.getRowModel().rows;
-    const isInfiniteScroll = pagination?.mode === 'infinite';
+    const renderDefaultPagination = (api) => {
+        const labelProps = {};
+        if (pagination?.labels?.page)
+            labelProps.labelPage = pagination.labels.page;
+        if (pagination?.labels?.total)
+            labelProps.labelTotal = pagination.labels.total;
+        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) })));
+    };
     const filteringAPI = useMemo(() => {
         if (!filtering) {
             return null;
@@ -272,7 +304,12 @@ function NvDatatable({ columns, rows, pagination, sorting, filtering, renderPagi
                     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()))))));
                 })))),
-        paginationAPI && renderPagination && renderPagination(paginationAPI)));
+        paginationAPI &&
+            (renderPagination
+                ? renderPagination(paginationAPI)
+                : mode === 'client' && !pagination?.infinite
+                    ? renderDefaultPagination(paginationAPI)
+                    : null)));
 }
 NvDatatable.displayName = 'NvDatatable';
 export { NvDatatable };

package/dist/generated/components.js

@@ -15,6 +15,9 @@ import { NvDatagridcolumn as NvDatagridcolumnElement, defineCustomElement as def
 import { NvDialog as NvDialogElement, defineCustomElement as defineNvDialog } from "@nova-design-system/nova-webcomponents/dist/components/nv-dialog.js";
 import { NvDialogfooter as NvDialogfooterElement, defineCustomElement as defineNvDialogfooter } from "@nova-design-system/nova-webcomponents/dist/components/nv-dialogfooter.js";
 import { NvDialogheader as NvDialogheaderElement, defineCustomElement as defineNvDialogheader } from "@nova-design-system/nova-webcomponents/dist/components/nv-dialogheader.js";
+import { NvDrawer as NvDrawerElement, defineCustomElement as defineNvDrawer } from "@nova-design-system/nova-webcomponents/dist/components/nv-drawer.js";
+import { NvDrawerfooter as NvDrawerfooterElement, defineCustomElement as defineNvDrawerfooter } from "@nova-design-system/nova-webcomponents/dist/components/nv-drawerfooter.js";
+import { NvDrawerheader as NvDrawerheaderElement, defineCustomElement as defineNvDrawerheader } from "@nova-design-system/nova-webcomponents/dist/components/nv-drawerheader.js";
 import { NvFieldcheckbox as NvFieldcheckboxElement, defineCustomElement as defineNvFieldcheckbox } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldcheckbox.js";
 import { NvFielddate as NvFielddateElement, defineCustomElement as defineNvFielddate } from "@nova-design-system/nova-webcomponents/dist/components/nv-fielddate.js";
 import { NvFielddaterange as NvFielddaterangeElement, defineCustomElement as defineNvFielddaterange } from "@nova-design-system/nova-webcomponents/dist/components/nv-fielddaterange.js";
@@ -38,6 +41,7 @@ import { NvMenuitem as NvMenuitemElement, defineCustomElement as defineNvMenuite
 import { NvNotificationBullet as NvNotificationBulletElement, defineCustomElement as defineNvNotificationBullet } from "@nova-design-system/nova-webcomponents/dist/components/nv-notification-bullet.js";
 import { NvNotification as NvNotificationElement, defineCustomElement as defineNvNotification } from "@nova-design-system/nova-webcomponents/dist/components/nv-notification.js";
 import { NvNotificationcontainer as NvNotificationcontainerElement, defineCustomElement as defineNvNotificationcontainer } from "@nova-design-system/nova-webcomponents/dist/components/nv-notificationcontainer.js";
+import { NvPaginationtable as NvPaginationtableElement, defineCustomElement as defineNvPaginationtable } from "@nova-design-system/nova-webcomponents/dist/components/nv-paginationtable.js";
 import { NvPopover as NvPopoverElement, defineCustomElement as defineNvPopover } from "@nova-design-system/nova-webcomponents/dist/components/nv-popover.js";
 import { NvRow as NvRowElement, defineCustomElement as defineNvRow } from "@nova-design-system/nova-webcomponents/dist/components/nv-row.js";
 import { NvSidebar as NvSidebarElement, defineCustomElement as defineNvSidebar } from "@nova-design-system/nova-webcomponents/dist/components/nv-sidebar.js";
@@ -190,6 +194,30 @@ export const NvDialogheader = createComponent({
     events: {},
     defineCustomElement: defineNvDialogheader
 });
+export const NvDrawer = createComponent({
+    tagName: 'nv-drawer',
+    elementClass: NvDrawerElement,
+    react: React,
+    events: { onOpenChanged: 'openChanged' },
+    defineCustomElement: defineNvDrawer
+});
+export const NvDrawerfooter = createComponent({
+    tagName: 'nv-drawerfooter',
+    elementClass: NvDrawerfooterElement,
+    react: React,
+    events: {
+        onDrawerCanceled: 'drawerCanceled',
+        onDrawerPrimaryClicked: 'drawerPrimaryClicked'
+    },
+    defineCustomElement: defineNvDrawerfooter
+});
+export const NvDrawerheader = createComponent({
+    tagName: 'nv-drawerheader',
+    elementClass: NvDrawerheaderElement,
+    react: React,
+    events: {},
+    defineCustomElement: defineNvDrawerheader
+});
 export const NvFieldcheckbox = createComponent({
     tagName: 'nv-fieldcheckbox',
     elementClass: NvFieldcheckboxElement,
@@ -362,6 +390,16 @@ export const NvNotificationcontainer = createComponent({
     events: {},
     defineCustomElement: defineNvNotificationcontainer
 });
+export const NvPaginationtable = createComponent({
+    tagName: 'nv-paginationtable',
+    elementClass: NvPaginationtableElement,
+    react: React,
+    events: {
+        onPageIndexChanged: 'pageIndexChanged',
+        onPageSizeChanged: 'pageSizeChanged'
+    },
+    defineCustomElement: defineNvPaginationtable
+});
 export const NvPopover = createComponent({
     tagName: 'nv-popover',
     elementClass: NvPopoverElement,