@nova-design-system/nova-react 3.21.1-beta.0 → 3.22.0

package/dist/components/NvDatatable/NvDatatable.js

@@ -1,13 +1,39 @@
-import React, { useMemo, useState, useEffect, useRef } from 'react';
-import { flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
+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, renderPagination, stickyHeader, ...htmlProps }) {
+function NvDatatable({ columns, rows, pagination, sorting, filtering, renderPagination, renderFiltering, stickyHeader, ...htmlProps }) {
     const [paginationState, setPaginationState] = useState({
         pageIndex: 0,
         pageSize: pagination?.initialPageSize || 10,
     });
     const [sortingState, setSortingState] = useState(sorting?.sortState || []);
+    const [globalFilterState, setGlobalFilterState] = useState(filtering?.filterState);
     const lastRowRef = useRef(null);
+    const debouncedSetFilter = useRef(null);
+    const setGlobalFilterDebounced = useCallback((value) => {
+        const debounceMs = filtering?.debounceMs ?? 300;
+        if (debouncedSetFilter.current) {
+            clearTimeout(debouncedSetFilter.current);
+        }
+        debouncedSetFilter.current = setTimeout(() => {
+            setGlobalFilterState(value);
+            if (filtering?.mode === 'server' && filtering.onFilterChange) {
+                filtering.onFilterChange(value);
+            }
+        }, debounceMs);
+    }, [filtering]);
+    useEffect(() => {
+        return () => {
+            if (debouncedSetFilter.current) {
+                clearTimeout(debouncedSetFilter.current);
+            }
+        };
+    }, []);
+    useEffect(() => {
+        if (filtering?.filterState !== undefined) {
+            setGlobalFilterState(filtering.filterState);
+        }
+    }, [filtering?.filterState]);
     const tableColumns = useMemo(() => columns
         .filter((col) => !col.hidden)
         .map((col) => {
@@ -64,6 +90,7 @@ function NvDatatable({ columns, rows, pagination, sorting, renderPagination, sti
             ...(sorting && {
                 state: {
                     sorting: sorting.sortState || sortingState,
+                    ...(filtering && { globalFilter: globalFilterState }),
                 },
                 onSortingChange: sorting.mode === 'server'
                     ? (updater) => {
@@ -83,6 +110,23 @@ function NvDatatable({ columns, rows, pagination, sorting, renderPagination, sti
                 isMultiSortEvent: sorting.enableMultiSort ? () => true : undefined,
                 getSortedRowModel: sorting.mode === 'client' ? getSortedRowModel() : undefined,
             }),
+            ...(filtering && {
+                state: {
+                    ...(sorting && { sorting: sorting.sortState || sortingState }),
+                    globalFilter: globalFilterState,
+                },
+                onGlobalFilterChange: (updater) => {
+                    const newFilter = typeof updater === 'function'
+                        ? updater(globalFilterState)
+                        : updater;
+                    setGlobalFilterState(newFilter);
+                    if (filtering.mode === 'server' && filtering.onFilterChange) {
+                        filtering.onFilterChange(newFilter);
+                    }
+                },
+                globalFilterFn: filtering.globalFilterFn,
+                getFilteredRowModel: filtering.mode === 'client' ? getFilteredRowModel() : undefined,
+            }),
         };
         if (!pagination) {
             return baseConfig;
@@ -120,7 +164,16 @@ function NvDatatable({ columns, rows, pagination, sorting, renderPagination, sti
             };
         }
         return baseConfig;
-    }, [rows, tableColumns, pagination, paginationState, sorting, sortingState]);
+    }, [
+        rows,
+        tableColumns,
+        pagination,
+        paginationState,
+        sorting,
+        sortingState,
+        filtering,
+        globalFilterState,
+    ]);
     const table = useReactTable(tableConfig);
     useEffect(() => {
         if (pagination?.mode === 'server' && pagination.onPaginationChange) {
@@ -180,7 +233,27 @@ function NvDatatable({ columns, rows, pagination, sorting, renderPagination, sti
     }, [pagination, table, rows.length, tablePaginationState]);
     const tableRows = table.getRowModel().rows;
     const isInfiniteScroll = pagination?.mode === 'infinite';
+    const filteringAPI = useMemo(() => {
+        if (!filtering) {
+            return null;
+        }
+        const preFilteredRowModel = table.getPreFilteredRowModel();
+        const filteredRowModel = table.getFilteredRowModel();
+        return {
+            filterState: globalFilterState,
+            setGlobalFilter: setGlobalFilterDebounced,
+            resetFilters: () => {
+                setGlobalFilterState(undefined);
+                if (filtering.onFilterChange) {
+                    filtering.onFilterChange(undefined);
+                }
+            },
+            totalRows: preFilteredRowModel.rows.length,
+            filteredRows: filteredRowModel.rows.length,
+        };
+    }, [filtering, globalFilterState, table, setGlobalFilterDebounced]);
     return (React.createElement(React.Fragment, null,
+        filteringAPI && renderFiltering && renderFiltering(filteringAPI),
         React.createElement(NvTable, { ...htmlProps },
             React.createElement("table", null,
                 React.createElement("thead", { "data-sticky-top": stickyHeader ? 'true' : undefined }, table.getHeaderGroups().map((headerGroup) => (React.createElement("tr", { key: headerGroup.id }, headerGroup.headers.map((header) => {

package/dist/generated/components.js

@@ -35,20 +35,10 @@ 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";
@@ -348,13 +338,6 @@ 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,
@@ -376,69 +359,6 @@ 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,

package/dist/generated/components.server.js

@@ -668,18 +668,6 @@ export const NvNotification = createComponent({
     hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
     serializeShadowRoot
 });
-export const NvNotificationBullet = createComponent({
-    tagName: 'nv-notification-bullet',
-    properties: {
-        count: 'count',
-        intention: 'intention',
-        emphasis: 'emphasis',
-        size: 'size',
-        contrastingBorder: 'contrasting-border'
-    },
-    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
-    serializeShadowRoot
-});
 export const NvNotificationcontainer = createComponent({
     tagName: 'nv-notificationcontainer',
     properties: { position: 'position' },
@@ -710,76 +698,6 @@ export const NvRow = createComponent({
     hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
     serializeShadowRoot
 });
-export const NvSidebar = createComponent({
-    tagName: 'nv-sidebar',
-    properties: {
-        type: 'type',
-        open: 'open',
-        activePath: 'active-path',
-        notificationIntention: 'notification-intention',
-        notificationEmphasis: 'notification-emphasis'
-    },
-    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
-    serializeShadowRoot
-});
-export const NvSidebarcontent = createComponent({
-    tagName: 'nv-sidebarcontent',
-    properties: {},
-    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
-    serializeShadowRoot
-});
-export const NvSidebardivider = createComponent({
-    tagName: 'nv-sidebardivider',
-    properties: {},
-    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
-    serializeShadowRoot
-});
-export const NvSidebarfooter = createComponent({
-    tagName: 'nv-sidebarfooter',
-    properties: {},
-    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
-    serializeShadowRoot
-});
-export const NvSidebargroup = createComponent({
-    tagName: 'nv-sidebargroup',
-    properties: { label: 'label' },
-    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
-    serializeShadowRoot
-});
-export const NvSidebarheader = createComponent({
-    tagName: 'nv-sidebarheader',
-    properties: {},
-    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
-    serializeShadowRoot
-});
-export const NvSidebarlogo = createComponent({
-    tagName: 'nv-sidebarlogo',
-    properties: {
-        label: 'label',
-        logo: 'logo',
-        collapsedLogo: 'collapsed-logo'
-    },
-    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
-    serializeShadowRoot
-});
-export const NvSidebarnavitem = createComponent({
-    tagName: 'nv-sidebarnavitem',
-    properties: {
-        icon: 'icon',
-        active: 'active',
-        collapsible: 'collapsible',
-        open: 'open',
-        notificationCount: 'notification-count'
-    },
-    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
-    serializeShadowRoot
-});
-export const NvSidebarnavsubitem = createComponent({
-    tagName: 'nv-sidebarnavsubitem',
-    properties: { active: 'active' },
-    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
-    serializeShadowRoot
-});
 export const NvSplit = createComponent({
     tagName: 'nv-split',
     properties: {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { NvDatatableProps } from './types';
-declare function NvDatatable<T>({ columns, rows, pagination, sorting, renderPagination, stickyHeader, ...htmlProps }: NvDatatableProps<T>): React.JSX.Element;
+declare function NvDatatable<T>({ columns, rows, pagination, sorting, filtering, renderPagination, renderFiltering, stickyHeader, ...htmlProps }: NvDatatableProps<T>): React.JSX.Element;
 declare namespace NvDatatable {
     var displayName: string;
 }

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

@@ -1,11 +1,13 @@
 import type { ComponentProps } from 'react';
-import type { SortingFn, NoInfer, SortingState } from '@tanstack/react-table';
+import type { SortingFn, NoInfer, SortingState, Row } from '@tanstack/react-table';
 export type NvDatatableProps<T> = {
     columns: Array<NvDatatableColumn<T>>;
     rows: Array<T>;
     pagination?: NvDatatablePaginationConfig;
     sorting?: NvDatatableSortingConfig;
+    filtering?: NvDatatableFilteringConfig<T>;
     renderPagination?: (api: NvDatatableRenderPaginationAPI) => React.ReactNode;
+    renderFiltering?: (api: NvDatatableRenderFilteringAPI) => React.ReactNode;
     stickyHeader?: boolean;
 } & Pick<ComponentProps<'div'>, 'className' | 'style'>;
 export interface NvDatatableColumn<Row, K extends keyof Row = keyof Row, F = Row[K]> {
@@ -74,3 +76,17 @@ export interface NvDatatableSortingConfig {
     sortState?: NvDataTableSortingState;
     onSortingChange?: (sorting: SortingState) => void;
 }
+export interface NvDatatableFilteringConfig<T> {
+    mode: 'client' | 'server';
+    filterState?: unknown;
+    onFilterChange?: (filterState: unknown) => void;
+    globalFilterFn?: (row: Row<T>, columnId: string, filterValue: unknown) => boolean;
+    debounceMs?: number;
+}
+export interface NvDatatableRenderFilteringAPI {
+    filterState: unknown;
+    setGlobalFilter: (value: unknown) => void;
+    resetFilters: () => void;
+    totalRows: number;
+    filteredRows: number;
+}

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

@@ -35,20 +35,10 @@ import { NvIconbutton as NvIconbuttonElement } from "@nova-design-system/nova-we
 import { NvLoader as NvLoaderElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-loader.js";
 import { NvMenu as NvMenuElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-menu.js";
 import { NvMenuitem as NvMenuitemElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-menuitem.js";
-import { NvNotificationBullet as NvNotificationBulletElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-notification-bullet.js";
 import { NvNotification as NvNotificationElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-notification.js";
 import { NvNotificationcontainer as NvNotificationcontainerElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-notificationcontainer.js";
 import { NvPopover as NvPopoverElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-popover.js";
 import { NvRow as NvRowElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-row.js";
-import { NvSidebar as NvSidebarElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-sidebar.js";
-import { NvSidebarcontent as NvSidebarcontentElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-sidebarcontent.js";
-import { NvSidebardivider as NvSidebardividerElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-sidebardivider.js";
-import { NvSidebarfooter as NvSidebarfooterElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-sidebarfooter.js";
-import { NvSidebargroup as NvSidebargroupElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-sidebargroup.js";
-import { NvSidebarheader as NvSidebarheaderElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-sidebarheader.js";
-import { NvSidebarlogo as NvSidebarlogoElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-sidebarlogo.js";
-import { NvSidebarnavitem as NvSidebarnavitemElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-sidebarnavitem.js";
-import { NvSidebarnavsubitem as NvSidebarnavsubitemElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-sidebarnavsubitem.js";
 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";
@@ -223,8 +213,6 @@ export type NvNotificationEvents = {
     onHiddenChanged: EventName<CustomEvent<boolean>>;
 };
 export declare const NvNotification: StencilReactComponent<NvNotificationElement, NvNotificationEvents>;
-export type NvNotificationBulletEvents = NonNullable<unknown>;
-export declare const NvNotificationBullet: StencilReactComponent<NvNotificationBulletElement, NvNotificationBulletEvents>;
 export type NvNotificationcontainerEvents = NonNullable<unknown>;
 export declare const NvNotificationcontainer: StencilReactComponent<NvNotificationcontainerElement, NvNotificationcontainerEvents>;
 export type NvPopoverEvents = {
@@ -233,26 +221,6 @@ export type NvPopoverEvents = {
 export declare const NvPopover: StencilReactComponent<NvPopoverElement, NvPopoverEvents>;
 export type NvRowEvents = NonNullable<unknown>;
 export declare const NvRow: StencilReactComponent<NvRowElement, NvRowEvents>;
-export type NvSidebarEvents = {
-    onOpenChanged: EventName<CustomEvent<boolean>>;
-};
-export declare const NvSidebar: StencilReactComponent<NvSidebarElement, NvSidebarEvents>;
-export type NvSidebarcontentEvents = NonNullable<unknown>;
-export declare const NvSidebarcontent: StencilReactComponent<NvSidebarcontentElement, NvSidebarcontentEvents>;
-export type NvSidebardividerEvents = NonNullable<unknown>;
-export declare const NvSidebardivider: StencilReactComponent<NvSidebardividerElement, NvSidebardividerEvents>;
-export type NvSidebarfooterEvents = NonNullable<unknown>;
-export declare const NvSidebarfooter: StencilReactComponent<NvSidebarfooterElement, NvSidebarfooterEvents>;
-export type NvSidebargroupEvents = NonNullable<unknown>;
-export declare const NvSidebargroup: StencilReactComponent<NvSidebargroupElement, NvSidebargroupEvents>;
-export type NvSidebarheaderEvents = NonNullable<unknown>;
-export declare const NvSidebarheader: StencilReactComponent<NvSidebarheaderElement, NvSidebarheaderEvents>;
-export type NvSidebarlogoEvents = NonNullable<unknown>;
-export declare const NvSidebarlogo: StencilReactComponent<NvSidebarlogoElement, NvSidebarlogoEvents>;
-export type NvSidebarnavitemEvents = NonNullable<unknown>;
-export declare const NvSidebarnavitem: StencilReactComponent<NvSidebarnavitemElement, NvSidebarnavitemEvents>;
-export type NvSidebarnavsubitemEvents = NonNullable<unknown>;
-export declare const NvSidebarnavsubitem: StencilReactComponent<NvSidebarnavsubitemElement, NvSidebarnavsubitemEvents>;
 export type NvSplitEvents = {
     onSizesChanged: EventName<CustomEvent<number[]>>;
 };

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

@@ -35,20 +35,10 @@ import { NvIconbutton as NvIconbuttonElement } from "@nova-design-system/nova-we
 import { NvLoader as NvLoaderElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-loader.js";
 import { NvMenu as NvMenuElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-menu.js";
 import { NvMenuitem as NvMenuitemElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-menuitem.js";
-import { NvNotificationBullet as NvNotificationBulletElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-notification-bullet.js";
 import { NvNotification as NvNotificationElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-notification.js";
 import { NvNotificationcontainer as NvNotificationcontainerElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-notificationcontainer.js";
 import { NvPopover as NvPopoverElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-popover.js";
 import { NvRow as NvRowElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-row.js";
-import { NvSidebar as NvSidebarElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-sidebar.js";
-import { NvSidebarcontent as NvSidebarcontentElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-sidebarcontent.js";
-import { NvSidebardivider as NvSidebardividerElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-sidebardivider.js";
-import { NvSidebarfooter as NvSidebarfooterElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-sidebarfooter.js";
-import { NvSidebargroup as NvSidebargroupElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-sidebargroup.js";
-import { NvSidebarheader as NvSidebarheaderElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-sidebarheader.js";
-import { NvSidebarlogo as NvSidebarlogoElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-sidebarlogo.js";
-import { NvSidebarnavitem as NvSidebarnavitemElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-sidebarnavitem.js";
-import { NvSidebarnavsubitem as NvSidebarnavsubitemElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-sidebarnavsubitem.js";
 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";
@@ -225,8 +215,6 @@ export type NvNotificationEvents = {
     onHiddenChanged: EventName<CustomEvent<boolean>>;
 };
 export declare const NvNotification: StencilReactComponent<NvNotificationElement, NvNotificationEvents>;
-export type NvNotificationBulletEvents = NonNullable<unknown>;
-export declare const NvNotificationBullet: StencilReactComponent<NvNotificationBulletElement, NvNotificationBulletEvents>;
 export type NvNotificationcontainerEvents = NonNullable<unknown>;
 export declare const NvNotificationcontainer: StencilReactComponent<NvNotificationcontainerElement, NvNotificationcontainerEvents>;
 export type NvPopoverEvents = {
@@ -235,26 +223,6 @@ export type NvPopoverEvents = {
 export declare const NvPopover: StencilReactComponent<NvPopoverElement, NvPopoverEvents>;
 export type NvRowEvents = NonNullable<unknown>;
 export declare const NvRow: StencilReactComponent<NvRowElement, NvRowEvents>;
-export type NvSidebarEvents = {
-    onOpenChanged: EventName<CustomEvent<boolean>>;
-};
-export declare const NvSidebar: StencilReactComponent<NvSidebarElement, NvSidebarEvents>;
-export type NvSidebarcontentEvents = NonNullable<unknown>;
-export declare const NvSidebarcontent: StencilReactComponent<NvSidebarcontentElement, NvSidebarcontentEvents>;
-export type NvSidebardividerEvents = NonNullable<unknown>;
-export declare const NvSidebardivider: StencilReactComponent<NvSidebardividerElement, NvSidebardividerEvents>;
-export type NvSidebarfooterEvents = NonNullable<unknown>;
-export declare const NvSidebarfooter: StencilReactComponent<NvSidebarfooterElement, NvSidebarfooterEvents>;
-export type NvSidebargroupEvents = NonNullable<unknown>;
-export declare const NvSidebargroup: StencilReactComponent<NvSidebargroupElement, NvSidebargroupEvents>;
-export type NvSidebarheaderEvents = NonNullable<unknown>;
-export declare const NvSidebarheader: StencilReactComponent<NvSidebarheaderElement, NvSidebarheaderEvents>;
-export type NvSidebarlogoEvents = NonNullable<unknown>;
-export declare const NvSidebarlogo: StencilReactComponent<NvSidebarlogoElement, NvSidebarlogoEvents>;
-export type NvSidebarnavitemEvents = NonNullable<unknown>;
-export declare const NvSidebarnavitem: StencilReactComponent<NvSidebarnavitemElement, NvSidebarnavitemEvents>;
-export type NvSidebarnavsubitemEvents = NonNullable<unknown>;
-export declare const NvSidebarnavsubitem: StencilReactComponent<NvSidebarnavsubitemElement, NvSidebarnavsubitemEvents>;
 export type NvSplitEvents = {
     onSizesChanged: EventName<CustomEvent<number[]>>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-react",
-  "version": "3.21.1-beta.0",
+  "version": "3.22.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-notification-bullet.entry-J8OkAZtU.js

@@ -1,77 +0,0 @@
-'use strict';
-
-var index = require('./index-CEKdYnmK.js');
-require('react');
-require('react-dom');
-
-const nvNotificationBulletCss = "nv-notification-bullet{display:inline-flex;align-items:center;position:relative;}nv-notification-bullet .nv-notification-bullet{display:inline-flex;align-items:center;justify-content:center;min-width:var(--sidebar-primary-notification-bullet-size);max-width:var(--sidebar-primary-notification-bullet-size);min-height:var(--sidebar-primary-notification-bullet-size);max-height:var(--sidebar-primary-notification-bullet-size);padding:0 var(--spacing-1);border-radius:var(--radius-rounded-full);font-size:var(--sidebar-primary-notification-bullet-font-size);font-weight:var(--sidebar-primary-notification-bullet-font-weight);white-space:nowrap;flex-shrink:0}nv-notification-bullet.nv-notification-bullet-brand .nv-notification-bullet.nv-notification-bullet-high{background-color:var(--color-brand-500);color:var(--color-feedback-error-high-contrast-title)}nv-notification-bullet.nv-notification-bullet-brand .nv-notification-bullet.nv-notification-bullet-low{background-color:var(--color-brand-50);color:var(--color-brand-600);border:1px solid var(--color-brand-600)}nv-notification-bullet.nv-notification-bullet-neutral .nv-notification-bullet.nv-notification-bullet-high{background-color:var(--color-interaction-container-neutral-background);color:var(--color-interaction-container-neutral-text)}nv-notification-bullet.nv-notification-bullet-neutral .nv-notification-bullet.nv-notification-bullet-low{background-color:var(--color-interaction-container-neutral-background);color:var(--color-interaction-container-neutral-text)}nv-notification-bullet.nv-notification-bullet-with-cross-border::before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:calc(var(--sidebar-primary-notification-bullet-size) * 1.5);height:calc(var(--sidebar-primary-notification-bullet-size) * 1.5);border-radius:var(--radius-rounded-full);background-color:var(--nv-component-background, var(--nv-sidebarnavitem-background, var(--color-interaction-container-neutral-background)));z-index:-1;pointer-events:none}nv-sidebar[collapsed] nv-notification-bullet.nv-notification-bullet-with-cross-border::before{width:calc(var(--sidebar-primary-notification-bullet-size-reduced) * 1.5);height:calc(var(--sidebar-primary-notification-bullet-size-reduced) * 1.5)}nv-notification-bullet .nv-notification-bullet.nv-notification-bullet-with-border{}nv-notification-bullet .nv-notification-bullet.nv-notification-bullet-reduced,nv-sidebar[collapsed] nv-notification-bullet .nv-notification-bullet{min-width:var(--sidebar-primary-notification-bullet-size-reduced);max-width:var(--sidebar-primary-notification-bullet-size-reduced);min-height:var(--sidebar-primary-notification-bullet-size-reduced);max-height:var(--sidebar-primary-notification-bullet-size-reduced);padding:0;font-size:0;}nv-notification-bullet .nv-notification-bullet.nv-notification-bullet-reduced.nv-notification-bullet-with-border,nv-sidebar[collapsed] nv-notification-bullet .nv-notification-bullet.nv-notification-bullet-with-border{}";
-const NvNotificationBulletStyle0 = nvNotificationBulletCss;
-
-const NvNotificationBullet = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        /**
-         * Determines the size of the notification bullet.
-         * - default: Normal size with text visible
-         * - reduced: Smaller size, text hidden (just a dot)
-         */
-        this.size = 'default';
-        /**
-         * Allows to add a border to add contrast on background.
-         */
-        this.contrastingBorder = false;
-    }
-    //#endregion PROPERTIES
-    /****************************************************************************/
-    //#region METHODS
-    getIntention() {
-        if (this.intention) {
-            return this.intention;
-        }
-        // Inherit from parent nv-sidebar
-        const sidebar = this.el.closest('nv-sidebar');
-        if (sidebar) {
-            const sidebarIntention = sidebar.getAttribute('notification-intention');
-            if (sidebarIntention === 'neutral' || sidebarIntention === 'brand') {
-                return sidebarIntention;
-            }
-        }
-        return 'brand'; // Default fallback
-    }
-    getEmphasis() {
-        if (this.emphasis) {
-            return this.emphasis;
-        }
-        // Inherit from parent nv-sidebar
-        const sidebar = this.el.closest('nv-sidebar');
-        if (sidebar) {
-            const sidebarEmphasis = sidebar.getAttribute('notification-emphasis');
-            if (sidebarEmphasis === 'high' || sidebarEmphasis === 'low') {
-                return sidebarEmphasis;
-            }
-        }
-        return 'high'; // Default fallback
-    }
-    //#region RENDER
-    render() {
-        var _a;
-        const displayCount = (_a = this.count) !== null && _a !== void 0 ? _a : 0;
-        const displayText = displayCount > 99 ? '99+' : String(displayCount);
-        if (displayCount <= 0) {
-            return null;
-        }
-        const sizeClass = this.size === 'reduced' ? 'nv-notification-bullet-reduced' : '';
-        const intention = this.getIntention();
-        const emphasis = this.getEmphasis();
-        const intentionClass = `nv-notification-bullet-${intention}`;
-        const emphasisClass = `nv-notification-bullet-${emphasis}`;
-        const borderClass = this.contrastingBorder
-            ? 'nv-notification-bullet-with-border'
-            : '';
-        return (index.h(index.Host, { class: `${intentionClass} ${borderClass ? 'nv-notification-bullet-with-cross-border' : ''}` }, index.h("span", { class: `nv-notification-bullet ${emphasisClass} ${sizeClass} ${borderClass}`, "aria-label": `${displayCount} notifications` }, displayText)));
-    }
-    get el() { return index.getElement(this); }
-};
-NvNotificationBullet.style = NvNotificationBulletStyle0;
-
-exports.nv_notification_bullet = NvNotificationBullet;