@tenorlab/react-dashboard 1.6.0 → 1.6.2

package/README.md

@@ -6,35 +6,34 @@
 
 Foundation components for creating user-configurable, high-performance dashboards in React.
 
-## 🏗 Relationship to Core
+## Relationship to Core
 
 This package extends **@tenorlab/dashboard-core**. It provides the React implementation of the core logic, including specialized hooks, state management via **Zustand**, and a suite of UI components.
 
 > **Note**: This package re-exports all types and utilities from `@tenorlab/dashboard-core`. You do not need to install the core package separately.
 
 
-## Demos
-
-* [**React Demo**](https://react.tenorlab.com) (built with **@tenorlab/react-dashboard**)
-* [**Vue Demo**](https://vue.tenorlab.com) (built with **@tenorlab/vue-dashboard**)
+## Pro Template Demos
+  - [React Demo](https://react.tenorlab.com) (built with @tenorlab/react-dashboard)
+  - [Vue Demo](https://vue.tenorlab.com) (built with @tenorlab/vue-dashboard)
+  - [Nuxt Demo](https://nuxt.tenorlab.com) (built with @tenorlab/vue-dashboard)
 
 
 ## ✨ Features
 
-- **Type-Safe:** Deep integration with TypeScript 5.8+ for full IDE support.
-- **State Management:** Built-in `useDashboardStore` and `useDashboardUndoService`.
-- **User Configurable:** Ready-to-use components for adding, removing, and dragging widgets.
-- **Themeable:** Native support for CSS Variables and Tailwind CSS.
-- **Vite Optimized:** Full ESM support and tree-shakeable.
+  - **Type-Safe:** Deep integration with TypeScript 5.8+ for full IDE support.
+  - **State Management:** Built-in `useDashboardStore` and `useDashboardUndoService`.
+  - **User Configurable:** Ready-to-use components for adding, removing, and dragging widgets.
+  - **Themeable:** Native support for CSS Variables and Tailwind CSS.
+  - **Vite Optimized:** Full ESM support and tree-shakeable.
 
 ## 🚀 Quick Start
 
 ### Installation
 
-Bash
+### Installation
 
-```
-# with npm
+```bash
 npm i @tenorlab/react-dashboard
 
 # with pnpm
@@ -45,9 +44,7 @@ pnpm add @tenorlab/react-dashboard
 
 Import the base styles in your entry file (e.g., `main.tsx`):
 
-TypeScript
-
-```
+```TypeScript
 import '@tenorlab/react-dashboard/styles.css'
 ```
 
@@ -59,62 +56,57 @@ import '@tenorlab/react-dashboard/styles.css'
 
 Widgets should be organized by their loading strategy.
 
-- **Bundled Widgets**: Place in `src/bundled-widgets/` (loaded immediately).
-- **Async Widgets**: Place in `src/async-widgets/` (lazy-loaded).
+  - **Bundled Widgets**: Place in `src/bundled-widgets/` (loaded immediately).
+  - **Async Widgets**: Place in `src/async-widgets/` (lazy-loaded).
+
+*(NOTE: These directory names are suggestions; you can use different names, or put the widgets under src/components if you prefer)*
+
 
 Each widget requires a sub-directory using the `widget-name-here` convention.
 
 #### Example: `WidgetTotalOrders`
 
-TypeScript
+Directory name `widget-total-orders`, files:
+  - WidgetTotalOrders.tsx
+  - meta.ts
+  - index.ts
 
-```
-// file: src/bundled-widgets/widget-total-orders/WidgetTotalOrders.tsx
-import {
-  IDashboardWidget,
-  IDashboardWidgetProps,
-  TDashboardWidgetKey,
-  DashboardWidgetBase, 
-  WrapperColumnContent
-} from '@tenorlab/react-dashboard'
 
-export function WidgetTotalOrders(props: IDashboardWidgetProps): IDashboardWidget {
+File: src/bundled-widgets/widget-total-orders/WidgetTotalOrders.tsx:
+```react
+import { IDashboardWidgetProps } from '@tenorlab/react-dashboard'
+import { DashboardWidgetBase } from '@tenorlab/react-dashboard'
+
+export function WidgetTotalOrders(props: IDashboardWidgetProps) {
   return (
-    <DashboardWidgetBase
-      widgetKey="WidgetTotalOrders"
-      title="Total Orders"
-      {...props}
-    >
-      <WrapperColumnContent>
+    <DashboardWidgetBase {...props}>
+      <div className="w-full flex flex-col gap-2 items-end">
         <div className="dashboard-number number-xl text-primary">1,250</div>
         <div className="text-sm">Orders this month</div>
-      </WrapperColumnContent>
+      </div>
     </DashboardWidgetBase>
   )
 }
 ```
 
-TypeScript
-
-```
-// file: src/bundled-widgets/widget-total-orders/meta.ts
+File: src/bundled-widgets/widget-total-orders/meta.ts:
+```typescript
 import type { TWidgetMetaInfo } from '@tenorlab/react-dashboard'
-import { MonitorIcon as ComponentIcon } from '@tenorlab/react-dashboard'
+import { ReceiptIcon as ComponentIcon } from 'lucide-react'
 
+// Define the metadata object for the plugin
 export const WidgetTotalOrdersMeta: TWidgetMetaInfo = {
   name: 'Total Orders',
   categories: ['Widget'],
   icon: ComponentIcon,
   noDuplicatedWidgets: true,
   description: 'Displays information about your total orders.',
-  externalDependencies: []
+  externalDependencies: [],
 }
 ```
 
-TypeScript
-
-```
-// file: src/bundled-widgets/widget-total-orders/index.ts
+File: src/bundled-widgets/widget-total-orders/index.ts:
+```typescript
 import { WidgetTotalOrders } from './WidgetTotalOrders'
 export default WidgetTotalOrders
 ```
@@ -123,39 +115,44 @@ export default WidgetTotalOrders
 
 Create `src/widgets-catalog.tsx` in your project root. This file manages how widgets are discovered (locally via Vite's `import.meta.glob` or remotely via CDN).
 
-TypeScript
+File: src/widgets-catalog.ts:
+```typescript
+import { WidgetContainerColumn, WidgetContainerLarge, WidgetContainerRow } from '@tenorlab/react-dashboard'
+import {
+  createStaticEntry,
+  localWidgetDiscovery,
+  remoteWidgetDiscovery,
+} from '@tenorlab/react-dashboard/core'
 
-```
-// file: src/widgets-catalog.tsx
+// other static widgets
 import {
+  WidgetSmallCardSample,
+} from './other-widgets/other-widgets'
+import { otherWidgetsMetaMap } from './other-widgets/other-widgets-meta'
+import type {
   IDynamicWidgetCatalogEntry,
   TDashboardWidgetCatalog,
   TWidgetMetaInfoBase,
-  WidgetContainerColumn,
-  WidgetContainerLarge,
-  WidgetContainerRow,
   TWidgetFactory,
 } from '@tenorlab/react-dashboard'
-import {
-  createStaticEntry,
-  localWidgetDiscovery,
-  remoteWidgetDiscovery,
-} from '@tenorlab/react-dashboard/core'
-
-import { WidgetRecentPaymentInfo } from './other-widgets/WidgetRecentPaymentInfo'
-//import { getWidgetsManifestUrl } from '@/utils'
 
 const bundledWidgetsSrcPath = '/src/bundled-widgets'
 const asyncWidgetsSrcPath = '/src/async-widgets'
 
+// Use Vite's Glob Import
+// This creates an object where the keys are file paths, and the values are the TWidgetFactory functions.
+// We target the 'index.ts' files within the widgets subdirectories.
 type TGlobModuleMap = Record<string, TWidgetFactory>
 
+// Eagerly loaded (Non-lazy / Bundled):
 const bundledWidgetModules = import.meta.glob('/src/bundled-widgets/*/index.ts', {
-  eager: true
+  eager: true /* we load this immediately */,
 }) as TGlobModuleMap
 
+// Lazy loaded (Code-split / Plugins):
 const asyncWidgetModules = import.meta.glob('/src/async-widgets/*/index.ts') as TGlobModuleMap
 
+// Meta modules (Always eager so titles/icons are available immediately)
 const allMetaModules = import.meta.glob('/src/**/widget-*/meta.ts', {
   eager: true,
 }) as Record<string, Record<string, TWidgetMetaInfoBase>>
@@ -163,33 +160,61 @@ const allMetaModules = import.meta.glob('/src/**/widget-*/meta.ts', {
 const hasPermission = (_user_: any, _permission: string) => true
 
 export const getWidgetCatalog = async (user: any | null): Promise<TDashboardWidgetCatalog> => {
+  // A. Register Static Core Components
   const catalogMapEntries: [string, IDynamicWidgetCatalogEntry][] = [
-    createStaticEntry('WidgetContainer', WidgetContainerColumn),
-    createStaticEntry('WidgetContainerRow', WidgetContainerRow),
-    createStaticEntry('WidgetContainerLarge', WidgetContainerLarge),
+    // everyone has access to the containers:
+    createStaticEntry('WidgetContainer', WidgetContainerColumn, otherWidgetsMetaMap['WidgetContainer']),
+    createStaticEntry('WidgetContainerRow', WidgetContainerRow, otherWidgetsMetaMap['WidgetContainerRow']),
+    createStaticEntry(
+      'WidgetContainerLarge',
+      WidgetContainerLarge,
+      otherWidgetsMetaMap['WidgetContainerLarge'],
+    ),
   ]
 
+  // B. Optional: Register Business Static Widgets manually:
+  // we could filter further by permissions and user type if needed
   if (hasPermission(user, 'some-permission')) {
-    catalogMapEntries.push(createStaticEntry('WidgetRecentPaymentInfo', WidgetRecentPaymentInfo))
+    // i.e.:
+    // catalogMapEntries.push(
+    //   createStaticEntry(
+    //     'WidgetThatRequiresPermissions',
+    //     WidgetThatRequiresPermissions,
+    //     otherWidgetsMetaMap['WidgetThatRequiresPermissions'],
+    //   ),
+    // )
+    catalogMapEntries.push(
+      createStaticEntry(
+        'WidgetSmallCardSample',
+        WidgetSmallCardSample,
+        otherWidgetsMetaMap['WidgetSmallCardSample'],
+      ),
+    )
   }
 
-  // add bundled widgets (non-lazy)
-  catalogMapEntries.push(...localWidgetDiscovery(
-    bundledWidgetsSrcPath,
-    bundledWidgetModules,
-    allMetaModules,
-    false, // lazy: false
-  ))
-
-  // add async-widgets (lazy)
-  catalogMapEntries.push(...localWidgetDiscovery(
-    asyncWidgetsSrcPath,
-    asyncWidgetModules,
-    allMetaModules,
-    true, // lazy: true
-  ))
-
-  // Optional: Remote discovery of -pre-built widgets hosted on a CDN
+  // C. Register widgets automatically with the localWidgetDiscovery helper:
+  // (bundled widgets are included always, non-lazy)
+  catalogMapEntries.push(
+    ...localWidgetDiscovery(
+      bundledWidgetsSrcPath,
+      bundledWidgetModules,
+      allMetaModules,
+      false, // lazy: false
+    )
+  )
+
+  // D. Register "lazy" widgets automatically with the localWidgetDiscovery helper:
+  // (async widgets are not incuded, they are lazy loaded at run time)
+  catalogMapEntries.push(
+    ...localWidgetDiscovery(
+      asyncWidgetsSrcPath,
+      asyncWidgetModules,
+      allMetaModules,
+      true, // lazy: true
+    )
+  )
+
+  // E. Optional: Remote discovery of -pre-built widgets hosted on a CDN (requires advance importMaps setup and other configuration)
   /*const manifestUrl = getWidgetsManifestUrl()
   if (manifestUrl.length > 0) {
     const remoteResponse = await remoteWidgetDiscovery(manifestUrl)
@@ -206,26 +231,26 @@ export const getWidgetCatalog = async (user: any | null): Promise<TDashboardWidg
 
 Use a `dashboard-defaults.ts` file to define initial layouts based on user roles.
 
-TypeScript
-
-```
-// file: src/dashboard-defaults.ts
-import {
+File: src/dashboard-defaults.ts:
+```typescript
+import { blankDashboardConfig, cssSettingsCatalog } from '@tenorlab/react-dashboard/core'
+import { getWidgetCatalog } from './widgets-catalog'
+import type {
   TDashboardWidgetKey,
   IChildWidgetConfigEntry,
   IDashboardConfig,
   TDashboardWidgetCatalog,
 } from '@tenorlab/react-dashboard'
-import { blankDashboardConfig, cssSettingsCatalog } from '@tenorlab/react-dashboard/core'
-import { getWidgetCatalog } from './widgets-catalog'
 
+// reserved identifier to be used only for the default dashboard
 const DEFAULT_DASHBOARD_ID = 'default' as const
 const DEFAULT_DASHBOARD_NAME = 'Default' as const
 
-const getDefaultDashboardForCustomerUser = (
+// default dashboard config for Regular user type
+const getDefaultDashboardForRegularUser = (
   user: any,
   clientAppKey: string,
-  availableWidgetKeys: TDashboardWidgetKey[]
+  availableWidgetKeys: TDashboardWidgetKey[],
 ): IDashboardConfig => {
   const userID = user.userID || 0
   return {
@@ -234,10 +259,21 @@ const getDefaultDashboardForCustomerUser = (
     dashboardId: DEFAULT_DASHBOARD_ID,
     dashboardName: DEFAULT_DASHBOARD_NAME,
     zoomScale: 1,
-    responsiveGrid: false,
-    widgets: ['WidgetContainer_container1'],
+    responsiveGrid: true,
+    widgets: [
+      'WidgetContainer_container1', // will contain other widgets specified in the childWidgetsConfig secitno below
+      'WidgetBarGradients',
+      ],
     childWidgetsConfig: [
-      { parentWidgetKey: 'WidgetContainer_container1', widgetKey: 'WidgetRecentPaymentInfo' }
+      // two widgets go into container1:
+      { 
+        parentWidgetKey: 'WidgetContainer_container1', 
+        widgetKey: 'WidgetTotalOrders' 
+      },
+      { 
+        parentWidgetKey: 'WidgetContainer_container1', 
+        widgetKey: 'WidgetTotalOrders' 
+      }
     ],
     cssSettings: [...cssSettingsCatalog]
   }
@@ -252,10 +288,16 @@ export const getDashboardDefaults = async (
 }> => {
   const widgetsCatalog = await getWidgetCatalog(user)
 
-  if (!user) return { dashboardConfig: blankDashboardConfig, widgetsCatalog }
+  if (!user) {
+    return {
+      dashboardConfig: blankDashboardConfig,
+      widgetsCatalog,
+    }
+  }
 
   return {
-    dashboardConfig: getDefaultDashboardForCustomerUser(user, clientAppKey, [...widgetsCatalog.keys()]),
+    // Optional, you could use different routines depending on user role:
+    dashboardConfig: getDefaultDashboardForRegularUser(user, clientAppKey, [...widgetsCatalog.keys()]),
     widgetsCatalog
   }
 }
@@ -265,32 +307,33 @@ export const getDashboardDefaults = async (
 
 Use this for a simplified, non-editable view of the dashboard.
 
-TypeScript
-
-```
-// file: src/views/DashboardReadonly.tsx
+File: src/views/DashboardReadonly.tsx:
+```react
 import { useEffect, useState } from 'react'
-import {
-  IDashboardConfig,
-  TDashboardWidgetCatalog,
-  useDashboardStore,
-  DynamicWidgetLoader, 
-  DashboardGrid
-} from '@tenorlab/react-dashboard'
+import { useDashboardStore } from '@tenorlab/react-dashboard'
 import {
   blankDashboardConfig,
   cssVarsUtils,
   useDashboardStorageService,
 } from '@tenorlab/react-dashboard/core'
+import { DynamicWidgetLoader, DashboardGrid } from '@tenorlab/react-dashboard'
 import { getDashboardDefaults } from '../dashboard-defaults'
+import type { IDashboardConfig, TDashboardWidgetCatalog } from '@tenorlab/react-dashboard'
+
 
 export function DashboardReadonly() {
   const clientAppKey = 'myclientapp'
   const user = { id: 1234 }
+  const userId = user.id
   const dashboardStore = useDashboardStore()
   const dashboardStorageService = useDashboardStorageService()
+
   const { isLoading, currentDashboardConfig } = dashboardStore
+  const getTargetContainerKey = () => dashboardStore.targetContainerKey
 
+  // default dashboard config
+  const [_defaultDashboardConfig, setDefaultDashboardConfig] =
+    useState<IDashboardConfig>(blankDashboardConfig)
   const [widgetsCatalog, setWidgetsCatalog] = useState<TDashboardWidgetCatalog>(new Map())
 
   useEffect(() => {
@@ -306,9 +349,11 @@ export function DashboardReadonly() {
         )
 
         dashboardStore.setAllDashboardConfigs(savedConfigs)
+        // show default dashboard or first dashboard
         const activeConfig = savedConfigs[0] || defaults.dashboardConfig
         dashboardStore.setCurrentDashboardConfig(activeConfig)
         setWidgetsCatalog(defaults.widgetsCatalog)
+        setDefaultDashboardConfig(defaults.dashboardConfig)
         cssVarsUtils.restoreCssVarsFromSettings(activeConfig.cssSettings || [])
       } finally {
         dashboardStore.setIsLoading(false)
@@ -319,7 +364,8 @@ export function DashboardReadonly() {
 
   return (
     <div className="relative flex flex-col h-full">
-      {isLoading ? <div>Loading</div> : (
+      {isLoading && <div>Loading</div>}
+      {!isLoading && (
         <DashboardGrid
           isEditing={false}
           zoomScale={Number(currentDashboardConfig.zoomScale)}
@@ -329,11 +375,16 @@ export function DashboardReadonly() {
             <DynamicWidgetLoader
               key={`${widgetKey}_${index}`}
               widgetKey={widgetKey}
+              parentWidgetKey={undefined}
+              targetContainerKey={getTargetContainerKey()}
               index={index}
               maxIndex={currentDashboardConfig.widgets.length - 1}
               childWidgetsConfig={currentDashboardConfig.childWidgetsConfig}
               widgetCatalog={widgetsCatalog as any}
               isEditing={false}
+              onRemoveClick={() => {}}
+              onMoveClick={() => {}}
+              selectContainer={() => {}}
             />
           ))}
         </DashboardGrid>
@@ -344,11 +395,9 @@ export function DashboardReadonly() {
 ```
 
 
-
 #### 5. Full Editable Dashboard
 
-For a complete example including **Undo/Redo**, **Zooming**, **Catalog Flyouts**, and **Multiple Dashboards**, please refer to the [Full Implementation Example](https://github.com/tenorlab/react-dashboard-sample/blob/main/views/DashboardFullExample.tsx).
-
+For editable dashboard examples, including **Undo/Redo**, **Zooming**, **Catalog Flyouts**, and **Multiple Dashboards**, please refer to the [Pro Template](https://www.tenorlab.com).
 
 
 ------
@@ -357,15 +406,15 @@ For a complete example including **Undo/Redo**, **Zooming**, **Catalog Flyouts**
 
 ### UI Components
 
-- **`DashboardGrid`**: The main layout engine for positioning widgets.
-- **`WidgetContainer`**: Wrapper providing common widget UI (headers, actions, loading states).
-- **`WidgetsCatalogFlyout`**: A draggable panel for users to browse and add new widgets.
-- **`DynamicWidgetLoader`**: The core widget loader component.
+- **`DashboardGrid`**: The main dashboard layout that position widgets within a responsive grid.
+- **`WidgetContainer`**: A special "widget" that is a container for other widgets.
+- **`WidgetsCatalogFlyout`**: A slide-out panel for users to browse and add new widgets on editable dashboards.
+- **`DynamicWidgetLoader`**: The core lazy-loading widget loader that renders the widgets within the grid.
 
 ### Hooks & State
 
-- **`useDashboardStore`**: Access the underlying Zustand store to manage widget state, layout, and configuration.
-- **`useDashboardUndoService`**: Provides `undo` and `redo` functionality for user layout changes.
+- **`useDashboardStore`**: Access the underlying reactive store to manage widget state, layout, and configuration.
+- **`useDashboardUndoService`**: Provides `undo` and `redo` functionality for user layout changes in editable dashboard (optional).
 
 
 ------
@@ -373,13 +422,19 @@ For a complete example including **Undo/Redo**, **Zooming**, **Catalog Flyouts**
 
 ## Links
 
+### Open source core packages
  - [@tenorlab/react-dashboard](https://www.npmjs.com/package/@tenorlab/react-dashboard): React-specific components
  - [@tenorlab/vue-dashboard](https://www.npmjs.com/package/@tenorlab/vue-dashboard): Vue-specific components
- - [Official Website](https://www.tenorlab.com)
- - [React Demo](https://react.tenorlab.com)
- - [Vue Demo](https://vue.tenorlab.com)
- - [Get the Pro Template](https://payhip.com/b/gPBpo)
+
+### Pro Template Demos
+ - [React Demo](https://react.tenorlab.com) (built with @tenorlab/react-dashboard)
+ - [Vue Demo](https://vue.tenorlab.com) (built with @tenorlab/vue-dashboard)
+ - [Nuxt Demo](https://nuxt.tenorlab.com) (built with @tenorlab/vue-dashboard)
+
+### Others
+ - [Buy a License](https://payhip.com/b/gPBpo)
  - [Follow on BlueSky](https://bsky.app/profile/tenorlab.bsky.social)
+ - [Official Website](https://www.tenorlab.com)
 
 
 ------
@@ -387,7 +442,7 @@ For a complete example including **Undo/Redo**, **Zooming**, **Catalog Flyouts**
 
 ## ⚖️ Licensing & Usage
 
-**@tenorlab/react-dashboard** is [MIT licensed](https://opensource.org/licenses/MIT). 
+**@tenorlab/vue-dashboard** is [MIT licensed](https://opensource.org/licenses/MIT). 
 
 It provides the foundational components and logic for building dashboards. You are free to use it in any project, personal or commercial.
 
@@ -395,10 +450,7 @@ It provides the foundational components and logic for building dashboards. You a
 
 A commercial license for a full-blown professional app template is available for purchase [**here**](https://www.tenorlab.com) and comes with:
 
-* **Full Application Shell:** A clean, optimized Vite + TypeScript project structure (with either React or Vue).
+* **Full Application Shell:** A clean, optimized Vite + TypeScript project structure (with either React, Vue or Nuxt).
 * **Dashboard Management:** Production-ready logic for creating, listing, renaming, and deleting multiple user-defined dashboards.
-* **Implementation Examples:** Expert patterns for both "Read-Only" (Analyst view) and "User-Editable" (Admin view) dashboard modes.
+* **Implementation Examples:** Best patterns for both "Read-Only" (Analyst view) and "User-Editable" (Admin view) dashboard modes, a dynamic dashboard menu, etc.
 * **Tenorlab Theme Engine:** A sophisticated Tailwind-based system supporting multiple custom themes (not just Light/Dark mode).
-
-
-[**Live React Demo**](https://react.tenorlab.com), [**Live Vue Demo**](https://vue.tenorlab.com)

package/dist/core.d.ts

@@ -275,6 +275,9 @@ export declare interface IDashboardWidgetPropsBase<TExtraProps = any> {
     size?: TWidgetSize;
     borderCssClasses?: string;
     backgroundCssClasses?: string;
+    addCssClasses?: string;
+    overrideCssClasses?: string;
+    tags?: string[];
     hideTitle?: boolean;
     noShadow?: boolean;
     noBorder?: boolean;

package/dist/core.es.js

@@ -106,16 +106,12 @@ const W = [
         else {
           l.forEach((d) => {
             d.value = (d.value || "").replace(/NaN/g, "");
-            const c = a.cssSettings.find(
-              (g) => g.key === d.key
-            );
+            const c = a.cssSettings.find((g) => g.key === d.key);
             c && (Object.keys(c).forEach((g) => {
               g in d || (d[g] = c[g]);
             }), d.step = c.step, d.minValue = c.minValue, d.defaultValue = c.defaultValue, d.defaultUnit = c.defaultUnit, /\d+/g.test(d.value) === !1 && (d.value = c ? c.value : "1.0rem"));
           });
-          const o = a.cssSettings.filter((d) => !l.some(
-            (c) => c.key === d.key
-          ));
+          const o = a.cssSettings.filter((d) => !l.some((c) => c.key === d.key));
           s.cssSettings = [...l, ...o];
         }
         s.widgets = s.widgets.filter(
@@ -172,16 +168,12 @@ const W = [
         (r) => r.parentWidgetKey === i
       );
       if (!a || a.length === 0)
-        return t.widgets = t.widgets.filter(
-          (r) => r !== i
-        ), !1;
+        return t.widgets = t.widgets.filter((r) => r !== i), !1;
     }
     return !0;
   }), t;
 }, x = (e) => {
-  const t = e.widgets.filter(
-    (a) => a.includes("WidgetContainer")
-  ), i = {};
+  const t = e.widgets.filter((a) => a.includes("WidgetContainer")), i = {};
   return t.forEach((a, r) => {
     const n = `${a.split("_container")[0]}_container${r + 1}`;
     i[a] = n;
@@ -394,9 +386,7 @@ const W = [
         updatedDashboardConfig: o
       };
     } else {
-      const n = (e.widgets || []).filter(
-        (l) => `${l}`.trim().toLowerCase() !== a
-      ), s = e.childWidgetsConfig.filter(
+      const n = (e.widgets || []).filter((l) => `${l}`.trim().toLowerCase() !== a), s = e.childWidgetsConfig.filter(
         (l) => `${l.parentWidgetKey}`.trim().toLowerCase() !== a
       );
       return {

package/dist/react-dashboard.d.ts

@@ -214,6 +214,9 @@ export declare interface IDashboardWidgetPropsBase<TExtraProps = any> {
     size?: TWidgetSize;
     borderCssClasses?: string;
     backgroundCssClasses?: string;
+    addCssClasses?: string;
+    overrideCssClasses?: string;
+    tags?: string[];
     hideTitle?: boolean;
     noShadow?: boolean;
     noBorder?: boolean;