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

package/dist/cjs/nv-tooltip.entry-D6kxXLO-.js

@@ -0,0 +1,56 @@
+'use strict';
+
+var index = require('./index-BeFrXZol.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+const nvTooltipCss = () => `nv-tooltip{display:inline-block;vertical-align:top;position:relative;user-select:none}nv-tooltip:has([fluid]:not([fluid=false])){display:block}nv-tooltip nv-popover{display:block;height:0;min-height:0;overflow:visible}nv-tooltip nv-popover>[data-scope=popover]{background:var(--components-tooltip-background);color:var(--components-tooltip-text);font-weight:var(--font-weight-medium-emphasis);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);font-size:var(--tooltip-font-size);border-radius:var(--tooltip-radius);border:none;box-shadow:0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1) var(--shadow-spread-lg-1) var(--shadow-color-opacity-1), 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2) var(--shadow-spread-lg-2) var(--shadow-color-opacity-2)}nv-tooltip nv-popover>[data-scope=popover] [data-scope=arrow]{background:var(--components-tooltip-background);box-shadow:none;border:none}`;
+
+const NvTooltip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.openChanged = index.createEvent(this, "openChanged", 3);
+        this.defaultSlot = null;
+        this.popoverElement = null;
+        /**
+         * Decides where the tooltip shows up next to the element it’s linked to
+         * (above, below, to the sides). If there isn’t enough room, it will adjust
+         * it's position on the axis to fit on the screen, so users can always see it.
+         */
+        this.placement = 'bottom';
+        /**
+         * Controls how long (in milliseconds) the tooltip waits to show after you
+         * hover over or focus on an element. If you move away before the delay is up,
+         * the tooltip won't appear.
+         */
+        this.enterDelay = 0;
+        /**
+         * Sets the positioning strategy for the tooltip. Options include:
+         * - `absolute`: Positions the tooltip relative to the trigger element
+         *   (default).
+         * - `fixed`: Positions the tooltip relative to the viewport, useful when you
+         *   need the tooltip to break out of overflow hidden containers, it will not
+         *   scroll inside a scroll container due to the fixed positioning.
+         */
+        this.strategy = 'absolute';
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentDidRender() {
+        if (this.triggerElement || !this.defaultSlot)
+            return;
+        this.popoverElement.triggerElement = this.defaultSlot?.nextSibling;
+    }
+    //#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) })));
+    }
+    get el() { return index.getElement(this); }
+};
+NvTooltip.style = nvTooltipCss();
+
+exports.nv_tooltip = NvTooltip;

package/dist/components/NvDatatable/NvDatatable.js

@@ -1,6 +1,11 @@
 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';
+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({
@@ -142,12 +147,11 @@ function NvDatatable({ mode = 'client', columns, rows, pagination, sorting, filt
             return {
                 ...baseConfig,
                 getPaginationRowModel: getPaginationRowModel(),
-                initialState: {
-                    pagination: {
-                        pageIndex: 0,
-                        pageSize: pagination.initialPageSize || 10,
-                    },
+                state: {
+                    ...(baseConfig.state || {}),
+                    pagination: paginationState,
                 },
+                onPaginationChange: setPaginationState,
             };
         }
         if (mode === 'server' && !pagination.infinite) {
@@ -224,7 +228,7 @@ function NvDatatable({ mode = 'client', columns, rows, pagination, sorting, filt
         const rowCount = mode === 'server' && !pagination.infinite
             ? pagination.totalRowCount || rows.length
             : rows.length;
-        return {
+        const api = {
             pageIndex: tablePaginationState.pageIndex,
             pageSize: tablePaginationState.pageSize,
             pageCount,
@@ -240,6 +244,7 @@ function NvDatatable({ mode = 'client', columns, rows, pagination, sorting, filt
             isLoading: isInfiniteScroll ? pagination.isLoading : undefined,
             hasMore: isInfiniteScroll ? pagination.hasMore : undefined,
         };
+        return api;
     }, [
         pagination,
         table,
@@ -249,6 +254,17 @@ function NvDatatable({ mode = 'client', columns, rows, pagination, sorting, filt
         isInfiniteScroll,
     ]);
     const tableRows = table.getRowModel().rows;
+    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;
@@ -288,7 +304,12 @@ function NvDatatable({ mode = 'client', columns, rows, pagination, sorting, filt
                     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

@@ -41,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";
@@ -389,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,