@nova-design-system/nova-react 3.22.0 → 3.24.0

package/dist/components/NvDatatable/NvDatatable.js

@@ -1,7 +1,8 @@
 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 }) {
+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 +18,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 +38,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 +51,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 +99,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 +108,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,18 +127,18 @@ 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(),
@@ -143,7 +150,7 @@ function NvDatatable({ columns, rows, pagination, sorting, filtering, renderPagi
                 },
             };
         }
-        if (pagination.mode === 'server') {
+        if (mode === 'server' && !pagination.infinite) {
             const pageSize = paginationState.pageSize;
             let pageCount = -1;
             if (pagination.totalPageCount !== undefined) {
@@ -173,27 +180,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,14 +214,14 @@ 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 {
@@ -227,12 +237,18 @@ 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]);
+    }, [
+        pagination,
+        table,
+        rows.length,
+        tablePaginationState,
+        mode,
+        isInfiniteScroll,
+    ]);
     const tableRows = table.getRowModel().rows;
-    const isInfiniteScroll = pagination?.mode === 'infinite';
     const filteringAPI = useMemo(() => {
         if (!filtering) {
             return null;

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";
@@ -35,10 +38,20 @@ import { NvIconbutton as NvIconbuttonElement, defineCustomElement as defineNvIco
 import { NvLoader as NvLoaderElement, defineCustomElement as defineNvLoader } from "@nova-design-system/nova-webcomponents/dist/components/nv-loader.js";
 import { NvMenu as NvMenuElement, defineCustomElement as defineNvMenu } from "@nova-design-system/nova-webcomponents/dist/components/nv-menu.js";
 import { NvMenuitem as NvMenuitemElement, defineCustomElement as defineNvMenuitem } from "@nova-design-system/nova-webcomponents/dist/components/nv-menuitem.js";
+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 { 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";
+import { NvSidebarcontent as NvSidebarcontentElement, defineCustomElement as defineNvSidebarcontent } from "@nova-design-system/nova-webcomponents/dist/components/nv-sidebarcontent.js";
+import { NvSidebardivider as NvSidebardividerElement, defineCustomElement as defineNvSidebardivider } from "@nova-design-system/nova-webcomponents/dist/components/nv-sidebardivider.js";
+import { NvSidebarfooter as NvSidebarfooterElement, defineCustomElement as defineNvSidebarfooter } from "@nova-design-system/nova-webcomponents/dist/components/nv-sidebarfooter.js";
+import { NvSidebargroup as NvSidebargroupElement, defineCustomElement as defineNvSidebargroup } from "@nova-design-system/nova-webcomponents/dist/components/nv-sidebargroup.js";
+import { NvSidebarheader as NvSidebarheaderElement, defineCustomElement as defineNvSidebarheader } from "@nova-design-system/nova-webcomponents/dist/components/nv-sidebarheader.js";
+import { NvSidebarlogo as NvSidebarlogoElement, defineCustomElement as defineNvSidebarlogo } from "@nova-design-system/nova-webcomponents/dist/components/nv-sidebarlogo.js";
+import { NvSidebarnavitem as NvSidebarnavitemElement, defineCustomElement as defineNvSidebarnavitem } from "@nova-design-system/nova-webcomponents/dist/components/nv-sidebarnavitem.js";
+import { NvSidebarnavsubitem as NvSidebarnavsubitemElement, defineCustomElement as defineNvSidebarnavsubitem } from "@nova-design-system/nova-webcomponents/dist/components/nv-sidebarnavsubitem.js";
 import { NvSplit as NvSplitElement, defineCustomElement as defineNvSplit } from "@nova-design-system/nova-webcomponents/dist/components/nv-split.js";
 import { NvStack as NvStackElement, defineCustomElement as defineNvStack } from "@nova-design-system/nova-webcomponents/dist/components/nv-stack.js";
 import { NvTable as NvTableElement, defineCustomElement as defineNvTable } from "@nova-design-system/nova-webcomponents/dist/components/nv-table.js";
@@ -180,6 +193,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,
@@ -338,6 +375,13 @@ export const NvNotification = createComponent({
     events: { onHiddenChanged: 'hiddenChanged' },
     defineCustomElement: defineNvNotification
 });
+export const NvNotificationBullet = createComponent({
+    tagName: 'nv-notification-bullet',
+    elementClass: NvNotificationBulletElement,
+    react: React,
+    events: {},
+    defineCustomElement: defineNvNotificationBullet
+});
 export const NvNotificationcontainer = createComponent({
     tagName: 'nv-notificationcontainer',
     elementClass: NvNotificationcontainerElement,
@@ -359,6 +403,69 @@ export const NvRow = createComponent({
     events: {},
     defineCustomElement: defineNvRow
 });
+export const NvSidebar = createComponent({
+    tagName: 'nv-sidebar',
+    elementClass: NvSidebarElement,
+    react: React,
+    events: { onOpenChanged: 'openChanged' },
+    defineCustomElement: defineNvSidebar
+});
+export const NvSidebarcontent = createComponent({
+    tagName: 'nv-sidebarcontent',
+    elementClass: NvSidebarcontentElement,
+    react: React,
+    events: {},
+    defineCustomElement: defineNvSidebarcontent
+});
+export const NvSidebardivider = createComponent({
+    tagName: 'nv-sidebardivider',
+    elementClass: NvSidebardividerElement,
+    react: React,
+    events: {},
+    defineCustomElement: defineNvSidebardivider
+});
+export const NvSidebarfooter = createComponent({
+    tagName: 'nv-sidebarfooter',
+    elementClass: NvSidebarfooterElement,
+    react: React,
+    events: {},
+    defineCustomElement: defineNvSidebarfooter
+});
+export const NvSidebargroup = createComponent({
+    tagName: 'nv-sidebargroup',
+    elementClass: NvSidebargroupElement,
+    react: React,
+    events: {},
+    defineCustomElement: defineNvSidebargroup
+});
+export const NvSidebarheader = createComponent({
+    tagName: 'nv-sidebarheader',
+    elementClass: NvSidebarheaderElement,
+    react: React,
+    events: {},
+    defineCustomElement: defineNvSidebarheader
+});
+export const NvSidebarlogo = createComponent({
+    tagName: 'nv-sidebarlogo',
+    elementClass: NvSidebarlogoElement,
+    react: React,
+    events: {},
+    defineCustomElement: defineNvSidebarlogo
+});
+export const NvSidebarnavitem = createComponent({
+    tagName: 'nv-sidebarnavitem',
+    elementClass: NvSidebarnavitemElement,
+    react: React,
+    events: {},
+    defineCustomElement: defineNvSidebarnavitem
+});
+export const NvSidebarnavsubitem = createComponent({
+    tagName: 'nv-sidebarnavsubitem',
+    elementClass: NvSidebarnavsubitemElement,
+    react: React,
+    events: {},
+    defineCustomElement: defineNvSidebarnavsubitem
+});
 export const NvSplit = createComponent({
     tagName: 'nv-split',
     elementClass: NvSplitElement,