@nova-design-system/nova-react 3.20.0 → 3.21.0

package/dist/types/components/{NvDatatable.d.ts → NvDatatable/types.d.ts}

@@ -1,15 +1,10 @@
-import React, { type ComponentProps } from 'react';
-import { type NoInfer } from '@tanstack/react-table';
-declare function NvDatatable<T>({ columns, rows, pagination, renderPagination, stickyHeader, ...htmlProps }: NvDatatableProps<T>): React.JSX.Element;
-declare namespace NvDatatable {
-    var displayName: string;
-}
-export { NvDatatable };
-export declare function makeColumn<Row>(): <K extends keyof Row, F = Row[K]>(col: NvDatatableColumn<Row, K, F>) => NvDatatableColumn<Row, keyof Row, Row[keyof Row]>;
+import type { ComponentProps } from 'react';
+import type { SortingFn, NoInfer, SortingState } from '@tanstack/react-table';
 export type NvDatatableProps<T> = {
     columns: Array<NvDatatableColumn<T>>;
     rows: Array<T>;
     pagination?: NvDatatablePaginationConfig;
+    sorting?: NvDatatableSortingConfig;
     renderPagination?: (api: NvDatatableRenderPaginationAPI) => React.ReactNode;
     stickyHeader?: boolean;
 } & Pick<ComponentProps<'div'>, 'className' | 'style'>;
@@ -21,6 +16,11 @@ export interface NvDatatableColumn<Row, K extends keyof Row = keyof Row, F = Row
     hidden?: boolean;
     valueFormatter?: (params: NvTableValueFormatterParams<Row, Row[K], K>) => F;
     renderCell?: (params: NvTableRenderCellParams<Row, F, K>) => React.ReactNode;
+    sortable?: boolean;
+    sortingFn?: SortingFn<Row> | string;
+    sortDescFirst?: boolean;
+    invertSorting?: boolean;
+    sortUndefined?: 'first' | 'last' | false | -1 | 1;
 }
 export interface NvTableRenderCellParams<Row, Value, Field> {
     value: Value | NoInfer<Value>;
@@ -64,3 +64,13 @@ export interface NvDatatableRenderPaginationAPI {
     isLoading?: boolean;
     hasMore?: boolean;
 }
+export type NvDataTableSortingState = SortingState;
+export interface NvDatatableSortingConfig {
+    mode: 'client' | 'server';
+    enableMultiSort?: boolean;
+    enableSortingRemoval?: boolean;
+    maxMultiSortColCount?: number;
+    sortDescFirst?: boolean;
+    sortState?: NvDataTableSortingState;
+    onSortingChange?: (sorting: SortingState) => void;
+}

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

@@ -0,0 +1,2 @@
+import type { NvDatatableColumn } from './types';
+export declare function makeColumn<Row>(): <K extends keyof Row, F = Row[K]>(col: NvDatatableColumn<Row, K, F>) => NvDatatableColumn<Row, keyof Row, Row[keyof Row]>;

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

@@ -42,6 +42,7 @@ import { NvRow as NvRowElement } from "@nova-design-system/nova-webcomponents/di
 import { NvSplit as NvSplitElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-split.js";
 import { NvStack as NvStackElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-stack.js";
 import { NvTable as NvTableElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-table.js";
+import { NvTableheader as NvTableheaderElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-tableheader.js";
 import { NvToggle as NvToggleElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-toggle.js";
 import { NvTogglebutton as NvTogglebuttonElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-togglebutton.js";
 import { NvTogglebuttongroup as NvTogglebuttongroupElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-togglebuttongroup.js";
@@ -228,6 +229,10 @@ export type NvStackEvents = NonNullable<unknown>;
 export declare const NvStack: StencilReactComponent<NvStackElement, NvStackEvents>;
 export type NvTableEvents = NonNullable<unknown>;
 export declare const NvTable: StencilReactComponent<NvTableElement, NvTableEvents>;
+export type NvTableheaderEvents = {
+    onSortDirectionChanged: EventName<CustomEvent<string>>;
+};
+export declare const NvTableheader: StencilReactComponent<NvTableheaderElement, NvTableheaderEvents>;
 export type NvToggleEvents = {
     onCheckedChanged: EventName<CustomEvent<boolean>>;
 };

package/dist/types/generated/components.server.d.ts

@@ -42,6 +42,7 @@ import { NvRow as NvRowElement } from "@nova-design-system/nova-webcomponents/di
 import { NvSplit as NvSplitElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-split.js";
 import { NvStack as NvStackElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-stack.js";
 import { NvTable as NvTableElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-table.js";
+import { NvTableheader as NvTableheaderElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-tableheader.js";
 import { NvToggle as NvToggleElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-toggle.js";
 import { NvTogglebutton as NvTogglebuttonElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-togglebutton.js";
 import { NvTogglebuttongroup as NvTogglebuttongroupElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-togglebuttongroup.js";
@@ -230,6 +231,10 @@ export type NvStackEvents = NonNullable<unknown>;
 export declare const NvStack: StencilReactComponent<NvStackElement, NvStackEvents>;
 export type NvTableEvents = NonNullable<unknown>;
 export declare const NvTable: StencilReactComponent<NvTableElement, NvTableEvents>;
+export type NvTableheaderEvents = {
+    onSortDirectionChanged: EventName<CustomEvent<string>>;
+};
+export declare const NvTableheader: StencilReactComponent<NvTableheaderElement, NvTableheaderEvents>;
 export type NvToggleEvents = {
     onCheckedChanged: EventName<CustomEvent<boolean>>;
 };

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

@@ -14,6 +14,7 @@ export interface NotificationOptions {
     icon?: string;
     actions?: NotificationAction[];
     actionSlot?: React.ReactElement;
+    duration?: number;
 }
 export interface Notification extends NotificationOptions {
     createdAt: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-react",
-  "version": "3.20.0",
+  "version": "3.21.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",

package/dist/cjs/nv-button.entry-Dyks6_mF.js

@@ -1,159 +0,0 @@
-'use strict';
-
-var index = require('./index-BObVnP12.js');
-var constants69bafca2 = require('./constants-69bafca2-DpB_ghPF.js');
-require('react');
-require('react-dom');
-
-const nvButtonCss = "nv-button{text-decoration:none;display:inline-flex;justify-content:center;align-items:center;font-style:normal;font-weight:var(--font-weight-medium-emphasis);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;transition:background-color 150ms ease-out;user-select:none;cursor:pointer;height:fit-content;width:fit-content}nv-button[size=xs]{padding:var(--button-xs-padding-y) var(--button-xs-padding-x);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);font-size:var(--button-xs-font-size)}nv-button[size=xs] nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-button[size=sm]{padding:var(--button-sm-padding-y) var(--button-sm-padding-x);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);font-size:var(--button-sm-font-size)}nv-button[size=sm] nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-button[size=md]{padding:var(--button-md-padding-y) var(--button-md-padding-x);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);font-size:var(--button-md-font-size)}nv-button[size=md] nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-button[size=lg]{padding:var(--button-lg-padding-y) var(--button-lg-padding-x);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);font-size:var(--button-lg-font-size)}nv-button[size=lg] nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-button[emphasis=high]{background:var(--components-button-high-background);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text)}nv-button[emphasis=high]:hover{background:var(--components-button-high-background-hover);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text-hover)}nv-button[emphasis=high]:active{background:var(--components-button-high-background-active);border:1px solid var(--components-button-high-border-active);color:var(--components-button-high-text-active)}nv-button[emphasis=high]:focus,nv-button[emphasis=high]:focus-within{outline:none}nv-button[emphasis=high]:focus-visible,nv-button[emphasis=high]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=high]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=high][active]:not([active=false]){background:var(--components-button-high-background-active);border:1px solid var(--components-button-high-border-active);color:var(--components-button-high-text-active)}nv-button[emphasis=high][danger]:not([danger=false]){background:var(--components-button-destructive-high-background);border:1px solid transparent;color:var(--components-button-destructive-high-text)}nv-button[emphasis=high][danger]:not([danger=false]):hover{background:var(--components-button-destructive-high-background-hover);border:1px solid transparent;color:var(--components-button-destructive-high-text-hover)}nv-button[emphasis=high][danger]:not([danger=false]):focus,nv-button[emphasis=high][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=high][danger]:not([danger=false]):focus-visible,nv-button[emphasis=high][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=medium]{background:var(--components-button-medium-background);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text)}nv-button[emphasis=medium]:hover{background:var(--components-button-medium-background-hover);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text-hover)}nv-button[emphasis=medium]:active{background:var(--components-button-medium-background-active);border:1px solid var(--components-button-medium-border-active);color:var(--components-button-medium-text-active)}nv-button[emphasis=medium]:focus,nv-button[emphasis=medium]:focus-within{outline:none}nv-button[emphasis=medium]:focus-visible,nv-button[emphasis=medium]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=medium]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=medium][active]:not([active=false]){background:var(--components-button-medium-background-active);border:1px solid var(--components-button-medium-border-active);color:var(--components-button-medium-text-active)}nv-button[emphasis=medium][danger]:not([danger=false]){background:var(--components-button-destructive-medium-background);border:1px solid var(--components-button-destructive-medium-border);color:var(--components-button-destructive-medium-text)}nv-button[emphasis=medium][danger]:not([danger=false]):hover{background:var(--components-button-destructive-medium-background-hover);border:1px solid var(--components-button-destructive-medium-border);color:var(--components-button-destructive-medium-text-hover)}nv-button[emphasis=medium][danger]:not([danger=false]):focus,nv-button[emphasis=medium][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=medium][danger]:not([danger=false]):focus-visible,nv-button[emphasis=medium][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=low]{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-button[emphasis=low]:hover{background:var(--components-button-low-background-hover);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text-hover)}nv-button[emphasis=low]:active{background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-button[emphasis=low]:focus,nv-button[emphasis=low]:focus-within{outline:none}nv-button[emphasis=low]:focus-visible,nv-button[emphasis=low]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=low]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=low][active]:not([active=false]){background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-button[emphasis=low][danger]:not([danger=false]){background:var(--components-button-destructive-low-background);border:1px solid var(--components-button-destructive-low-border);color:var(--components-button-destructive-low-text)}nv-button[emphasis=low][danger]:not([danger=false]):hover{background:var(--components-button-destructive-low-background-hover);border:1px solid var(--components-button-destructive-low-border);color:var(--components-button-destructive-low-text-hover)}nv-button[emphasis=low][danger]:not([danger=false]):focus,nv-button[emphasis=low][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=low][danger]:not([danger=false]):focus-visible,nv-button[emphasis=low][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=lower]{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-button[emphasis=lower]:hover{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}nv-button[emphasis=lower]:active{background:var(--components-button-lower-background-active);border:1px solid var(--components-button-lower-border-active);color:var(--components-button-lower-text-active)}nv-button[emphasis=lower]:focus,nv-button[emphasis=lower]:focus-within{outline:none}nv-button[emphasis=lower]:focus-visible,nv-button[emphasis=lower]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=lower]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=lower][active]:not([active=false]){background:var(--components-button-lower-background-active);border:1px solid var(--components-button-lower-border-active);color:var(--components-button-lower-text-active)}nv-button[emphasis=lower][danger]:not([danger=false]){background:var(--components-button-destructive-lower-background);border:1px solid var(--components-button-destructive-lower-border);color:var(--components-button-destructive-lower-text)}nv-button[emphasis=lower][danger]:not([danger=false]):hover{background:var(--components-button-destructive-lower-background-hover);border:1px solid var(--components-button-destructive-lower-border);color:var(--components-button-destructive-lower-text-hover)}nv-button[emphasis=lower][danger]:not([danger=false]):focus,nv-button[emphasis=lower][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=lower][danger]:not([danger=false]):focus-visible,nv-button[emphasis=lower][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[fluid]:not([fluid=false]){width:100%}nv-button[loading]:not([loading=false]) [slot=leading-icon]{display:none}";
-const NvButtonStyle0 = nvButtonCss;
-
-const NvButton = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        if (hostRef.$hostElement$["s-ei"]) {
-            this.internals = hostRef.$hostElement$["s-ei"];
-        }
-        else {
-            this.internals = hostRef.$hostElement$.attachInternals();
-            hostRef.$hostElement$["s-ei"] = this.internals;
-        }
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Determines how large or small the button appears, allowing for
-         * customization of the button's dimensions to fit different design
-         * specifications and user needs.
-         */
-        this.size = 'md';
-        /**
-         * Adjusts the button's emphasis to make it more or less visually prominent
-         * to users. Use this to draw attention to important actions or reduce focus
-         * on less critical ones
-         */
-        this.emphasis = 'high';
-        /**
-         * Use this prop to highlight the button when it represents the current page
-         * or active selection. This helps users understand their navigation context.
-         */
-        this.active = false;
-        /**
-         * Applies styling that visually indicates the button represents a dangerous
-         * action.
-         */
-        this.danger = false;
-        /**
-         * Set this to true to show a spinner on the button, letting users know that
-         * their action is being processed. It helps improve user experience by
-         * indicating ongoing activities.
-         */
-        this.loading = false;
-        /**
-         * Disables the button, preventing user interaction.
-         */
-        this.disabled = false;
-        /**
-         * Allows the button to stretch and fill the entire width of its container.
-         */
-        this.fluid = false;
-        /**
-         * Sets the button type to control its function in forms. Use 'submit' to send
-         * form data, 'reset' to clear the form, or 'button' for a standard button
-         * that doesn't interact with form submission by default.
-         */
-        this.type = 'button';
-        //#endregion PROPERTIES
-        /****************************************************************************/
-        //#region METHODS
-        /**
-         * Handles button click events, managing form actions and disabled states.
-         * Prevents default behavior when button is disabled or loading, and
-         * processes form submissions/resets when appropriate.
-         * @param {Event} event - The click event.
-         */
-        this.handleButtonClick = (event) => {
-            var _a;
-            if (this.loading || this.disabled) {
-                event.preventDefault();
-                return;
-            }
-            if (this.type !== constants69bafca2.ButtonType.Button &&
-                (this.form || ((_a = this.internals) === null || _a === void 0 ? void 0 : _a.form))) {
-                this.processFormAction();
-            }
-            else if (this.form && this.type === constants69bafca2.ButtonType.Button) {
-                console.warn('Button has a form id but is not of type submit or reset so no form action will be processed.', `Button:`, this.el);
-            }
-        };
-        /**
-         * Processes form-related actions by finding the associated form element
-         * and triggering the appropriate action (submit/reset) based on button type.
-         * Falls back to ElementInternals form if no explicit form ID is provided.
-         */
-        this.processFormAction = () => {
-            var _a, _b;
-            const formElement = this.form
-                ? document.getElementById(this.form)
-                : (_a = this.internals) === null || _a === void 0 ? void 0 : _a.form;
-            if (!formElement) {
-                console.warn('No form element found.', `Form ID: ${this.form || 'Not provided'}`, `Internals form:`, (_b = this.internals) === null || _b === void 0 ? void 0 : _b.form);
-                return;
-            }
-            switch (this.type) {
-                case constants69bafca2.ButtonType.Submit:
-                    formElement.requestSubmit();
-                    break;
-                case constants69bafca2.ButtonType.Reset:
-                    formElement.reset();
-                    break;
-            }
-        };
-    }
-    //#endregion METHODS
-    /****************************************************************************/
-    //#region EVENTS
-    handleKeyDown(event) {
-        if (event.key === 'Enter' || event.key === ' ') {
-            event.preventDefault();
-            this.el.click();
-        }
-    }
-    //#endregion EVENTS
-    /****************************************************************************/
-    //#region WATCHERS
-    handleLoadingChange(loading) {
-        this.loading = loading;
-        this.disabled = loading;
-    }
-    handleDisabledChange(disabled) {
-        if (this.loading) {
-            this.disabled = this.loading;
-        }
-        else {
-            this.disabled = disabled;
-        }
-    }
-    //#endregion WATCHERS
-    /****************************************************************************/
-    //#region LIFECYCLE
-    componentWillLoad() {
-        if (this.loading) {
-            this.disabled = this.loading;
-        }
-    }
-    //#endregion LIFECYCLE
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        return (index.h(index.Host, { key: '42488f71ad33233c839cd70b3ea57aee50b143b3', role: "button", tabindex: "0", onClick: this.handleButtonClick }, this.loading && (index.h("nv-loader", { key: 'a30c71eebb8f0476bcca5acbc8e7ac7f6377740c', size: this.size === constants69bafca2.ButtonSize.Large ? 'sm' : 'xs' })), index.h("slot", { key: '4bbcee81ef7236ae35471c649971c122e4b468f3', name: "leading-icon" }), index.h("slot", { key: '82203f6aed911e61aef2438bba3b3e664ffb9f76' }), index.h("slot", { key: 'c97a5ce78c15556b8c1a91a4d06eb6bc9a9cd255', name: "trailing-icon" })));
-    }
-    static get formAssociated() { return true; }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "loading": ["handleLoadingChange"],
-        "disabled": ["handleDisabledChange"]
-    }; }
-};
-NvButton.style = NvButtonStyle0;
-
-exports.nv_button = NvButton;