@tenorlab/react-dashboard 1.6.2 → 1.6.4

package/README.md

@@ -1,7 +1,7 @@
 # @tenorlab/react-dashboard
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)
-[![Template: Pro](https://img.shields.io/badge/Template-Pro--Available-gold.svg)](https://www.tenorlab.com)
+[![Tenorlab Pro](https://img.shields.io/badge/Template-Pro--Available-gold.svg)](https://www.tenorlab.com)
 [![Framework: React](https://img.shields.io/badge/Framework-React-blue.svg)](https://react.dev/)
 
 Foundation components for creating user-configurable, high-performance dashboards in React.
@@ -13,7 +13,7 @@ This package extends **@tenorlab/dashboard-core**. It provides the React impleme
 > **Note**: This package re-exports all types and utilities from `@tenorlab/dashboard-core`. You do not need to install the core package separately.
 
 
-## Pro Template Demos
+## Tenorlab Pro 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)
@@ -397,7 +397,7 @@ export function DashboardReadonly() {
 
 #### 5. Full Editable Dashboard
 
-For editable dashboard examples, including **Undo/Redo**, **Zooming**, **Catalog Flyouts**, and **Multiple Dashboards**, please refer to the [Pro Template](https://www.tenorlab.com).
+For editable dashboard examples, including **Undo/Redo**, **Zooming**, **Catalog Flyouts**, and **Multiple Dashboards**, please refer to  [Tenorlab Pro](https://www.tenorlab.com).
 
 
 ------
@@ -426,7 +426,7 @@ For editable dashboard examples, including **Undo/Redo**, **Zooming**, **Catalog
  - [@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
 
-### Pro Template Demos
+### Tenorlab Pro 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)
@@ -446,9 +446,9 @@ For editable dashboard examples, including **Undo/Redo**, **Zooming**, **Catalog
 
 It provides the foundational components and logic for building dashboards. You are free to use it in any project, personal or commercial.
 
-## ⚡️ Go Pro and Save Time: Tenorlab App Template
+## ⚡️ Go Pro and Save Time: Tenorlab Pro
 
-A commercial license for a full-blown professional app template is available for purchase [**here**](https://www.tenorlab.com) and comes with:
+A commercial license for a full-blown professional app code 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, Vue or Nuxt).
 * **Dashboard Management:** Production-ready logic for creating, listing, renaming, and deleting multiple user-defined dashboards.

package/dist/core.d.ts

@@ -197,6 +197,7 @@ export declare interface IDashboardConfig {
     responsiveGrid: boolean;
     widgets: TDashboardWidgetKey[];
     childWidgetsConfig: IChildWidgetConfigEntry[];
+    savedProps?: IWidgetSavedProps[];
     cssSettings: IDashboardSettingEntry[];
     _version?: number;
     _stateDescription?: string;
@@ -282,7 +283,10 @@ export declare interface IDashboardWidgetPropsBase<TExtraProps = any> {
     noShadow?: boolean;
     noBorder?: boolean;
     noPadding?: boolean;
+    noCollapse?: boolean;
     direction?: TWidgetDirection;
+    widgetSavedProps?: IWidgetSavedProps;
+    meta?: TWidgetMetaInfoBase;
     extraProps?: TExtraProps;
 }
 
@@ -315,6 +319,12 @@ export declare interface IDynamicWidgetCatalogEntryBase<TFrameworkElementType =
     loader?: TWidgetFactoryBase<TFrameworkComponentType>;
 }
 
+export declare interface IWidgetSavedProps {
+    parentWidgetKey?: TDashboardWidgetKey;
+    widgetKey: TDashboardWidgetKey;
+    isCollapsed?: boolean;
+}
+
 /**
  * @name localWidgetDiscovery
  * @description Scans local directories for widgets.
@@ -537,8 +547,10 @@ export declare type TWidgetMetaInfoBase<TFrameworkElementType = any> = {
     description: string;
     categories: TWidgetCategory[];
     noDuplicatedWidgets?: boolean;
-    icon?: TFrameworkElementType | undefined;
+    icon?: TFrameworkElementType | string | undefined;
     externalDependencies: string[];
+    tags?: string[];
+    noCollapse?: boolean;
 };
 
 /**

package/dist/react-dashboard.d.ts

@@ -8,13 +8,15 @@ import { RefAttributes } from 'react';
 import { StoreApi } from 'zustand';
 import { UseBoundStore } from 'zustand';
 
-export declare function AddIcon({ className }: TIconProps): JSX_2.Element;
+export declare const AddIcon: typeof PlusCircleIcon;
 
 export declare function Button(props: IButtonProps): JSX_2.Element;
 
-export declare function CircleQuestionMark({ className }: TIconProps): JSX_2.Element;
+export declare function ChevronDownIcon({ className, style }: TIconProps): JSX_2.Element;
 
-export declare function CrosshairIcon({ className }: TIconProps): JSX_2.Element;
+export declare function CircleQuestionMark({ className, style }: TIconProps): JSX_2.Element;
+
+export declare function CrosshairIcon({ className, style }: TIconProps): JSX_2.Element;
 
 export declare const DashboardGrid: ForwardRefExoticComponent<IDashboardGridProps & RefAttributes<HTMLDivElement>>;
 
@@ -22,7 +24,7 @@ export declare const DashboardWidgetBase: (props: IDashboardWidgetProps & {
     ref?: React.ForwardedRef<HTMLDivElement>;
 }) => React.ReactElement | null;
 
-export declare function DeleteIcon({ className }: TIconProps): JSX_2.Element;
+export declare function DeleteIcon({ className, style }: TIconProps): JSX_2.Element;
 
 export declare const DraggablePanel: ForwardRefExoticComponent<DraggablePanelProps & RefAttributes<HTMLDivElement>>;
 
@@ -35,6 +37,8 @@ declare type DraggablePanelProps = {
     children: React.ReactNode;
 };
 
+export declare const Dropdown: default_2.FC<TProps>;
+
 /**
  * Component to safely load and render dynamic widgets.
  * This ensures the widget component (and its hooks) is called consistently.
@@ -42,15 +46,15 @@ declare type DraggablePanelProps = {
  * @param {string} props.widgetKey
  * @param {(key: string) => Promise<void>} props.onRemoveClick
  */
-export declare function DynamicWidgetLoader({ index, maxIndex, widgetKey, parentWidgetKey, targetContainerKey, childWidgetsConfig, widgetCatalog, isEditing, extraProps, onRemoveClick, onMoveClick, selectContainer, }: TDynamicWidgetLoaderProps): JSX_2.Element;
+export declare function DynamicWidgetLoader({ index, maxIndex, widgetKey, parentWidgetKey, targetContainerKey, childWidgetsConfig, savedProps, widgetCatalog, isEditing, extraProps, onRemoveClick, onMoveClick, selectContainer, savedPropsChanged, }: TDynamicWidgetLoaderProps): JSX_2.Element;
 
-export declare function EditIcon({ className }: TIconProps): JSX_2.Element;
+export declare function EditIcon({ className, style }: TIconProps): JSX_2.Element;
 
-export declare function GridIcon({ className }: TIconProps): JSX_2.Element;
+export declare function GridIcon({ className, style }: TIconProps): JSX_2.Element;
 
-export declare function HandGrabIcon({ className }: TIconProps): JSX_2.Element;
+export declare function HandGrabIcon({ className, style }: TIconProps): JSX_2.Element;
 
-export declare function HandIcon({ className }: TIconProps): JSX_2.Element;
+export declare function HandIcon({ className, style }: TIconProps): JSX_2.Element;
 
 export declare interface IButtonProps {
     disabled?: boolean;
@@ -106,6 +110,7 @@ export declare interface IDashboardConfig {
     responsiveGrid: boolean;
     widgets: TDashboardWidgetKey[];
     childWidgetsConfig: IChildWidgetConfigEntry[];
+    savedProps?: IWidgetSavedProps[];
     cssSettings: IDashboardSettingEntry[];
     _version?: number;
     _stateDescription?: string;
@@ -181,9 +186,12 @@ export declare interface IDashboardWidget extends JSX.Element {
  */
 export declare interface IDashboardWidgetProps<TExtraProps = any> extends IDashboardWidgetPropsBase<TExtraProps> {
     children?: ReactNode;
+    titleNode?: ReactNode;
+    titleRightNode?: ReactNode;
     onRemoveClick?: (widgetKey: TDashboardWidgetKey, parentWidgetKey?: TDashboardWidgetKey) => void;
     onMoveClick?: (direction: -1 | 1, widgetKey: TDashboardWidgetKey, parentWidgetKey?: TDashboardWidgetKey) => void;
     selectContainer?: (containerKey?: TDashboardWidgetKey) => void;
+    savedPropsChanged?: (value: IWidgetSavedProps) => any;
 }
 
 /**
@@ -221,7 +229,10 @@ export declare interface IDashboardWidgetPropsBase<TExtraProps = any> {
     noShadow?: boolean;
     noBorder?: boolean;
     noPadding?: boolean;
+    noCollapse?: boolean;
     direction?: TWidgetDirection;
+    widgetSavedProps?: IWidgetSavedProps;
+    meta?: TWidgetMetaInfoBase;
     extraProps?: TExtraProps;
 }
 
@@ -291,6 +302,12 @@ export declare interface ITooltipProps {
     title: string;
 }
 
+declare interface IWidgetSavedProps {
+    parentWidgetKey?: TDashboardWidgetKey;
+    widgetKey: TDashboardWidgetKey;
+    isCollapsed?: boolean;
+}
+
 export declare const ListItem: ForwardRefExoticComponent<TStackProps & {
 innerClass?: string;
 } & RefAttributes<HTMLDivElement>>;
@@ -301,30 +318,35 @@ export declare const ListItemMiddleChild: ForwardRefExoticComponent<TListItemChi
 
 export declare const ListItemRightChild: ForwardRefExoticComponent<TListItemChildProps & RefAttributes<HTMLDivElement>>;
 
-export declare function MonitorIcon({ className }: TIconProps): JSX_2.Element;
+export declare function MinusCircleIcon({ className, style }: TIconProps): JSX_2.Element;
 
-export declare function MonitorSmartphoneIcon({ className }: TIconProps): JSX_2.Element;
+export declare function MonitorIcon({ className, style }: TIconProps): JSX_2.Element;
 
-export declare function MoveLeftIcon({ className }: TIconProps): JSX_2.Element;
+export declare function MonitorSmartphoneIcon({ className, style }: TIconProps): JSX_2.Element;
 
-export declare function MoveRightIcon({ className }: TIconProps): JSX_2.Element;
+export declare function MoveLeftIcon({ className, style }: TIconProps): JSX_2.Element;
 
-export declare function RedoIcon({ className }: TIconProps): JSX_2.Element;
+export declare function MoveRightIcon({ className, style }: TIconProps): JSX_2.Element;
 
-export declare function RenameIcon({ className }: TIconProps): JSX_2.Element;
+export declare function PlusCircleIcon({ className, style }: TIconProps): JSX_2.Element;
 
-export declare function SettingsIcon({ className }: TIconProps): JSX_2.Element;
+export declare function RedoIcon({ className, style }: TIconProps): JSX_2.Element;
+
+export declare function RenameIcon({ className, style }: TIconProps): JSX_2.Element;
+
+export declare function SettingsIcon({ className, style }: TIconProps): JSX_2.Element;
 
 export declare const showToast: (options: any) => void;
 
 export declare function Stack(props: TStackProps): JSX_2.Element;
 
-export declare function SvgBaseWrapper({ children, className, }: {
+export declare function SvgBaseWrapper({ children, className, style, }: {
     children: React.ReactNode;
     className?: string;
+    style?: React.CSSProperties;
 }): JSX_2.Element;
 
-export declare function TabletSmartphoneIcon({ className }: TIconProps): JSX_2.Element;
+export declare function TabletSmartphoneIcon({ className, style }: TIconProps): JSX_2.Element;
 
 /**
  * @name TAddWidgetResponse
@@ -341,7 +363,7 @@ declare type TAddWidgetResponse = {
     allUpdatedDashboardConfigs: IDashboardConfig[];
 };
 
-export declare function TargetIcon({ className }: TIconProps): JSX_2.Element;
+export declare function TargetIcon({ className, style }: TIconProps): JSX_2.Element;
 
 export declare type TButtonJustifyCss = 'justify-start' | 'justify-center' | 'justify-end';
 
@@ -354,6 +376,10 @@ declare type TDashboardSlice = {
     currentDashboardConfig: IDashboardConfig;
     targetContainerKey?: TDashboardWidgetKey | undefined;
     getNextContainerKey: (containerWidgetKey: TDashboardWidgetKey) => TDashboardWidgetKey;
+    getCurrentDashboardConfig: () => IDashboardConfig;
+    getCurrentDashboardId: () => string;
+    getIsResponsive: () => boolean;
+    getTargetContainerKey: () => TDashboardWidgetKey | undefined;
     setIsLoading: (value: boolean) => boolean;
     setIsEditing: (value: boolean) => boolean;
     setTargetContainerKey: (value: TDashboardWidgetKey | undefined) => TDashboardWidgetKey | undefined;
@@ -422,12 +448,14 @@ declare type TDynamicWidgetLoaderProps<TExtraProps = any> = {
     parentWidgetKey?: TDashboardWidgetKey;
     targetContainerKey?: TDashboardWidgetKey;
     childWidgetsConfig?: IChildWidgetConfigEntry[];
+    savedProps?: IWidgetSavedProps[];
     widgetCatalog: TDashboardWidgetCatalog;
     isEditing: boolean;
     extraProps?: TExtraProps;
     onRemoveClick?: (widgetKey: TDashboardWidgetKey, parentWidgetKey?: TDashboardWidgetKey) => void;
     onMoveClick?: (direction: -1 | 1, widgetKey: TDashboardWidgetKey, parentWidgetKey?: TDashboardWidgetKey) => void;
     selectContainer?: (containerKey: TDashboardWidgetKey) => void;
+    savedPropsChanged: (value: IWidgetSavedProps) => any;
 };
 
 /**
@@ -459,9 +487,10 @@ declare type TGetSavedDashboards = (userID: number | string, clientAppKey: strin
 
 declare type TIconProps = {
     className?: string;
+    style?: React.CSSProperties;
 };
 
-export declare function TimerResetIcon({ className }: TIconProps): JSX_2.Element;
+export declare function TimerResetIcon({ className, style }: TIconProps): JSX_2.Element;
 
 declare type TListItemChildProps = {
     testId?: string;
@@ -482,7 +511,20 @@ export declare type TManifestEntry = {
     meta: TWidgetMetaInfoBase;
 };
 
-declare type TProps = {
+declare interface TProps {
+    testid?: string;
+    label?: string;
+    hideLabel?: boolean;
+    showChevron?: boolean;
+    hide?: boolean;
+    enabled: boolean;
+    isMenuOpen: boolean;
+    toggleOpen: (open: boolean) => void;
+    icon?: ReactNode;
+    children?: ReactNode;
+}
+
+declare type TProps_2 = {
     children: React.ReactNode;
     addCssClasses?: string;
 };
@@ -604,8 +646,10 @@ export declare type TWidgetMetaInfoBase<TFrameworkElementType = any> = {
     description: string;
     categories: TWidgetCategory[];
     noDuplicatedWidgets?: boolean;
-    icon?: TFrameworkElementType | undefined;
+    icon?: TFrameworkElementType | string | undefined;
     externalDependencies: string[];
+    tags?: string[];
+    noCollapse?: boolean;
 };
 
 export declare type TWidgetsCatalogFlyoutProps = {
@@ -630,7 +674,7 @@ export declare type TWidgetsCatalogFlyoutProps = {
  */
 export declare type TWidgetSize = 'default' | 'large' | 'xlarge';
 
-export declare function UndoIcon({ className }: TIconProps): JSX_2.Element;
+export declare function UndoIcon({ className, style }: TIconProps): JSX_2.Element;
 
 export declare const useDashboardStore: UseBoundStore<Omit<StoreApi<TDashboardSlice>, "subscribe"> & {
 subscribe: {
@@ -662,14 +706,14 @@ export declare function WidgetContainerRow(props: IDashboardWidgetProps): IDashb
 
 export declare function WidgetsCatalogFlyout(props: TWidgetsCatalogFlyoutProps): JSX_2.Element;
 
-export declare function WrapperColumnContent({ children, addCssClasses }: TProps): JSX_2.Element;
+export declare function WrapperColumnContent({ children, addCssClasses }: TProps_2): JSX_2.Element;
 
-export declare function WrapperColumnContentListItem({ children, addCssClasses }: TProps): JSX_2.Element;
+export declare function WrapperColumnContentListItem({ children, addCssClasses }: TProps_2): JSX_2.Element;
 
-export declare function XCircleIcon({ className }: TIconProps): JSX_2.Element;
+export declare function XCircleIcon({ className, style }: TIconProps): JSX_2.Element;
 
-export declare function ZoomInIcon({ className }: TIconProps): JSX_2.Element;
+export declare function ZoomInIcon({ className, style }: TIconProps): JSX_2.Element;
 
-export declare function ZoomOutIcon({ className }: TIconProps): JSX_2.Element;
+export declare function ZoomOutIcon({ className, style }: TIconProps): JSX_2.Element;
 
 export { }