@microsoft/teamsfx-react 3.0.1-alpha.ru6q1vrv0.0 → 3.0.1-beta.2023071206.0

package/LICENSE

@@ -1,21 +1,21 @@
-The MIT License (MIT)
-
-Copyright (c) 2020 Microsoft
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+The MIT License (MIT)
+
+Copyright (c) 2020 Microsoft
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -34,10 +34,19 @@ npm install @microsoft/teamsfx-react
 
 Please also install the peer dependencies if you are using npm 6. 
 ```bash
-npm install @microsoft/teamsfx@^2.0.0 @microsoft/teams-js@^2.0.0 react@^16.8.6 react-dom@^16.8.6 @fluentui/react-northstar@^0.62.0 msteams-react-base-component@^3.1.1
+npm install @microsoft/teamsfx@^2.0.0 @microsoft/teams-js@^2.0.0 react@^18.2.0 react-dom@^18.2.0 @fluentui/react-components@^9.16.0 @microsoft/microsoft-graph-client@^3.0.1
 ```
 
-Note that for `@microsoft/teamsfx-react@^2.0.0`, it depends on `@microsoft/teamsfx@^2.0.0` and `@microsoft/teams-js@^2.0.0`. If you wish to use lower versions, please install the peer dependencies as follows:
+#### Note
+
+For `@microsoft/teamsfx-react@^3.0.0`, it migrated to use `@fluentui/react-components` and did not support `@fluentui/react-northstar` any longer. If you still wish to use `@fluentui/react-northstar`, please use `@microsoft/teamsfx-react@<3.0.0`. To install the peer dependencies, you could use the following line:
+
+```bash
+npm install @microsoft/teamsfx@^2.0.0 @microsoft/teams-js@^2.0.0 react@^16.8.6 react-dom@^16.8.6 @fluentui/react-northstar@^0.62.0 @microsoft/microsoft-graph-client@^3.0.1
+```
+
+For `@microsoft/teamsfx-react@^2.0.0` and `@microsoft/teamsfx-react@^3.0.0`, they depend on `@microsoft/teamsfx@^2.0.0` and `@microsoft/teams-js@^2.0.0`. If you wish to use lower versions, please install the peer dependencies as follows:
+
 ```bash
 npm install @microsoft/teamsfx@^0.6.0 react@^16.8.6 @fluentui/react-northstar@^0.60.1 msteams-react-base-component@^3.1.1
 ```
@@ -111,6 +120,66 @@ return (
 );
 ```
 
+### Building a Dashboard Tab
+
+#### 1. Create a new widget
+
+Here is an example of creating a new widget:
+
+```tsx
+import { Button, Text } from "@fluentui/react-components";
+import { BaseWidget } from "@microsoft/teamsfx-react";
+import { SampleModel } from "../models/sampleModel";
+import { getSampleData } from "../services/sampleService";
+
+interface SampleWidgetState {
+  data?: SampleModel;
+}
+
+export class SampleWidget extends BaseWidget<any, SampleWidgetState> {
+  override async getData(): Promise<SampleWidgetState> {
+    return { data: getSampleData() };
+  }
+
+  override header(): JSX.Element | undefined {
+    return <Text>Sample Widget</Text>;
+  }
+
+  override body(): JSX.Element | undefined {
+    return <div>{this.state.data?.content}</div>;
+  }
+
+  override footer(): JSX.Element | undefined {
+    return <Button>View Details</Button>;
+  }
+}
+```
+
+#### 2. Create a new dashboard
+
+Here is an example of creating a new dashboard:
+
+```tsx
+import { BaseDashboard } from "@microsoft/teamsfx-react";
+import ListWidget from "../widgets/ListWidget";
+import ChartWidget from "../widgets/ChartWidget";
+
+export default class YourDashboard extends BaseDashboard<any, any> {
+  override styling(): string {
+    return "styling-class-name";
+  }
+
+  override layout(): JSX.Element | undefined {
+    return (
+      <>
+        <ListWidget />
+        <ChartWidget />
+      </>
+    );
+  }
+}
+```
+
 ## React Hook list
 
 ### useData
@@ -141,6 +210,8 @@ const { loading, theme, themeString, teamsUserCredential } = useTeamsUserCredent
 This hook function leverage `useData` to call Graph API. It will execute the fetchGraphDataAsync function that the developer passes in first.
 If user has not consented to the scopes of AAD resources, `useGraph()`, `useGraphWithCredential` will automatically call login function to pop up the consent dialog. So, developers can focus on the business logic of how to fetch Microsoft Graph data.
 
+## Dashboard Related Classes
+
 ### BaseDashboard
 The BaseDashboard is a React component that provides a basic dashboard layout implementation for developers to quickly build a dashboard tab for Microsoft Teams. You can inherit this class and override some methods to customize your own dashboard. For example, define the layout of the widget in your dashboard by overriding the `layout()` method, and customize the dashboard style by overriding the `styling()` method.
 

package/build/cjs/BaseDashboard.d.ts

@@ -1,54 +1,61 @@
-import { Component, CSSProperties } from "react";
-interface BaseDashboardState {
-    isMobile?: boolean;
-    showLogin?: boolean;
-    observer?: ResizeObserver;
-}
-/**
- * The base class for dashboard implementation.
- * It's also a react component, for more information about react component, please refer to https://reactjs.org/docs/react-component.html
- * @param P The type of props.
- * @param S The type of state.
- */
-export declare class BaseDashboard<P, S> extends Component<P, S & BaseDashboardState> {
-    private ref;
-    /**
-     * Constructor for the dashboard class.
-     * @param props The properties for the dashboard.
-     */
-    constructor(props: Readonly<P>);
-    /**
-     * This method is invoked immediately after a component is mounted.
-     * For more information about react lifecycle, please refer to https://reactjs.org/docs/react-component.html#componentdidmount
-     */
-    componentDidMount(): Promise<void>;
-    /**
-     * This method is invoked immediately when a component will be unmounted. It's a good place to clean up the resources.
-     */
-    componentWillUnmount(): void;
-    /**
-     * Define thie dashboard default layout.
-     */
-    render(): JSX.Element;
-    /**
-     * Override this method to define the layout of the widget in the dashboard.
-     */
-    protected layout(): JSX.Element | undefined;
-    /**
-     * Override this method to customize the dashboard style.
-     * @returns The style for the dashboard
-     */
-    protected styling(): CSSProperties | string;
-    /**
-     * Construct CSSProperties object for styling the dashboard.
-     * @returns CSSProperties object
-     */
-    private genStyle;
-    /**
-     * Construct className string for styling the dashboard.
-     * @returns className for styling the dashboard
-     */
-    private genClassName;
-}
-export {};
+import { Component } from "react";
+/**
+ * The state interface for the BaseDashboard component.
+ */
+interface BaseDashboardState {
+    /**
+     * A boolean property that indicates whether the dashboard layout should be optimized for mobile devices.
+     */
+    isMobile?: boolean;
+    /**
+     * A boolean property that indicates whether the login page should be displayed.
+     */
+    showLogin?: boolean;
+    /**
+     * The resize observer for the dashboard.
+     * @internal
+     */
+    observer?: ResizeObserver;
+}
+/**
+ * The base component that provides basic functionality to create a dashboard.
+ * @typeParam P The type of props.
+ * @typeParam S The type of state.
+ */
+export declare class BaseDashboard<P, S> extends Component<P, S & BaseDashboardState> {
+    /**
+     * @internal
+     */
+    private ref;
+    /**
+     * Constructor of BaseDashboard.
+     * @param {Readonly<P>} props The properties for the dashboard.
+     */
+    constructor(props: Readonly<P>);
+    /**
+     * Called after the component is mounted. You can do initialization that requires DOM nodes here. You can also make network requests here if you need to load data from a remote endpoint.
+     */
+    componentDidMount(): Promise<void>;
+    /**
+     * Called before the component is unmounted and destroyed. You can do necessary cleanup here, such as invalidating timers, canceling network requests, or removing any DOM elements.
+     */
+    componentWillUnmount(): void;
+    /**
+     * Defines the default layout for the dashboard.
+     */
+    render(): JSX.Element;
+    /**
+     * Override this method to define the layout of the widget in the dashboard.
+     * @returns The layout of the widget in the dashboard.
+     * @public
+     */
+    protected layout(): JSX.Element | undefined;
+    /**
+     * Override this method to customize the dashboard style.
+     * @returns The className for customizing the dashboard style.
+     * @public
+     */
+    protected styling(): string;
+}
+export {};
 //# sourceMappingURL=BaseDashboard.d.ts.map

package/build/cjs/BaseDashboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseDashboard.d.ts","sourceRoot":"","sources":["../../src/BaseDashboard.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAexD,UAAU,kBAAkB;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B;AAED;;;;;GAKG;AACH,qBAAa,aAAa,CAAC,CAAC,EAAE,CAAC,CAAE,SAAQ,SAAS,CAAC,CAAC,EAAE,CAAC,GAAG,kBAAkB,CAAC;IAC3E,OAAO,CAAC,GAAG,CAAkC;IAE7C;;;OAGG;gBACS,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAU9B;;;OAGG;IACG,iBAAiB;IAavB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAO5B;;OAEG;IACH,MAAM;IAaN;;OAEG;IACH,SAAS,CAAC,MAAM,IAAI,GAAG,CAAC,OAAO,GAAG,SAAS;IAI3C;;;OAGG;IACH,SAAS,CAAC,OAAO,IAAI,aAAa,GAAG,MAAM;IAI3C;;;OAGG;IACH,OAAO,CAAC,QAAQ;IAMhB;;;OAGG;IACH,OAAO,CAAC,YAAY;CAGrB"}
+{"version":3,"file":"BaseDashboard.d.ts","sourceRoot":"","sources":["../../src/BaseDashboard.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAoBzC;;GAEG;AACH,UAAU,kBAAkB;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B;AAED;;;;GAIG;AACH,qBAAa,aAAa,CAAC,CAAC,EAAE,CAAC,CAAE,SAAQ,SAAS,CAAC,CAAC,EAAE,CAAC,GAAG,kBAAkB,CAAC;IAC3E;;OAEG;IACH,OAAO,CAAC,GAAG,CAAkC;IAE7C;;;OAGG;gBACgB,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAUrC;;OAEG;IACU,iBAAiB;IAa9B;;OAEG;IACI,oBAAoB,IAAI,IAAI;IAOnC;;OAEG;IACI,MAAM;IAWb;;;;OAIG;IACH,SAAS,CAAC,MAAM,IAAI,GAAG,CAAC,OAAO,GAAG,SAAS;IAI3C;;;;OAIG;IACH,SAAS,CAAC,OAAO,IAAI,MAAM;CAG5B"}

package/build/cjs/BaseDashboard.js

@@ -1,102 +1,91 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BaseDashboard = void 0;
-var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importStar(require("react"));
-var react_2 = require("@fluentui/react");
-function dashboardStyle(isMobile) {
-    return (0, react_2.mergeStyles)(tslib_1.__assign({ display: "grid", gap: "20px", padding: "20px", gridTemplateRows: "1fr", gridTemplateColumns: "4fr 6fr" }, (isMobile === true ? { gridTemplateColumns: "1fr", gridTemplateRows: "1fr" } : {})));
-}
-/**
- * The base class for dashboard implementation.
- * It's also a react component, for more information about react component, please refer to https://reactjs.org/docs/react-component.html
- * @param P The type of props.
- * @param S The type of state.
- */
-var BaseDashboard = /** @class */ (function (_super) {
-    tslib_1.__extends(BaseDashboard, _super);
-    /**
-     * Constructor for the dashboard class.
-     * @param props The properties for the dashboard.
-     */
-    function BaseDashboard(props) {
-        var _this = _super.call(this, props) || this;
-        _this.state = {
-            isMobile: undefined,
-            showLogin: undefined,
-            observer: undefined,
-        };
-        _this.ref = react_1.default.createRef();
-        return _this;
-    }
-    /**
-     * This method is invoked immediately after a component is mounted.
-     * For more information about react lifecycle, please refer to https://reactjs.org/docs/react-component.html#componentdidmount
-     */
-    BaseDashboard.prototype.componentDidMount = function () {
-        return tslib_1.__awaiter(this, void 0, void 0, function () {
-            var observer;
-            var _this = this;
-            return tslib_1.__generator(this, function (_a) {
-                observer = new ResizeObserver(function (entries) {
-                    for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
-                        var entry = entries_1[_i];
-                        if (entry.target === _this.ref.current) {
-                            var width = entry.contentRect.width;
-                            _this.setState({ isMobile: width < 600 });
-                        }
-                    }
-                });
-                observer.observe(this.ref.current);
-                return [2 /*return*/];
-            });
-        });
-    };
-    /**
-     * This method is invoked immediately when a component will be unmounted. It's a good place to clean up the resources.
-     */
-    BaseDashboard.prototype.componentWillUnmount = function () {
-        // Unobserve the dashboard div for resize events
-        if (this.state.observer && this.ref.current) {
-            this.state.observer.unobserve(this.ref.current);
-        }
-    };
-    /**
-     * Define thie dashboard default layout.
-     */
-    BaseDashboard.prototype.render = function () {
-        var root = dashboardStyle(this.state.isMobile);
-        return (react_1.default.createElement("div", { ref: this.ref, className: (0, react_2.mergeStyles)(root, this.genClassName()), style: this.genStyle() }, this.layout()));
-    };
-    /**
-     * Override this method to define the layout of the widget in the dashboard.
-     */
-    BaseDashboard.prototype.layout = function () {
-        return undefined;
-    };
-    /**
-     * Override this method to customize the dashboard style.
-     * @returns The style for the dashboard
-     */
-    BaseDashboard.prototype.styling = function () {
-        return {};
-    };
-    /**
-     * Construct CSSProperties object for styling the dashboard.
-     * @returns CSSProperties object
-     */
-    BaseDashboard.prototype.genStyle = function () {
-        return typeof this.styling() === "string"
-            ? {}
-            : this.styling();
-    };
-    /**
-     * Construct className string for styling the dashboard.
-     * @returns className for styling the dashboard
-     */
-    BaseDashboard.prototype.genClassName = function () {
-        return typeof this.styling() === "string" ? this.styling() : "";
-    };
-    return BaseDashboard;
-}(react_1.Component));
-exports.BaseDashboard = BaseDashboard;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseDashboard = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var react_2 = require("@fluentui/react");
+/**
+ * Returns the CSS class name for the dashboard.
+ * @returns The CSS class name for the dashboard.
+ * @internal
+ */
+function dashboardStyle(isMobile) {
+    return (0, react_2.mergeStyles)(tslib_1.__assign({ display: "grid", gap: "20px", padding: "20px", gridTemplateRows: "1fr", gridTemplateColumns: "4fr 6fr" }, (isMobile === true ? { gridTemplateColumns: "1fr", gridTemplateRows: "1fr" } : {})));
+}
+/**
+ * The base component that provides basic functionality to create a dashboard.
+ * @typeParam P The type of props.
+ * @typeParam S The type of state.
+ */
+var BaseDashboard = /** @class */ (function (_super) {
+    tslib_1.__extends(BaseDashboard, _super);
+    /**
+     * Constructor of BaseDashboard.
+     * @param {Readonly<P>} props The properties for the dashboard.
+     */
+    function BaseDashboard(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            isMobile: undefined,
+            showLogin: undefined,
+            observer: undefined,
+        };
+        _this.ref = react_1.default.createRef();
+        return _this;
+    }
+    /**
+     * Called after the component is mounted. You can do initialization that requires DOM nodes here. You can also make network requests here if you need to load data from a remote endpoint.
+     */
+    BaseDashboard.prototype.componentDidMount = function () {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var observer;
+            var _this = this;
+            return tslib_1.__generator(this, function (_a) {
+                observer = new ResizeObserver(function (entries) {
+                    for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+                        var entry = entries_1[_i];
+                        if (entry.target === _this.ref.current) {
+                            var width = entry.contentRect.width;
+                            _this.setState({ isMobile: width < 600 });
+                        }
+                    }
+                });
+                observer.observe(this.ref.current);
+                return [2 /*return*/];
+            });
+        });
+    };
+    /**
+     * Called before the component is unmounted and destroyed. You can do necessary cleanup here, such as invalidating timers, canceling network requests, or removing any DOM elements.
+     */
+    BaseDashboard.prototype.componentWillUnmount = function () {
+        // Unobserve the dashboard div for resize events
+        if (this.state.observer && this.ref.current) {
+            this.state.observer.unobserve(this.ref.current);
+        }
+    };
+    /**
+     * Defines the default layout for the dashboard.
+     */
+    BaseDashboard.prototype.render = function () {
+        return (react_1.default.createElement("div", { ref: this.ref, className: (0, react_2.mergeStyles)(dashboardStyle(this.state.isMobile), this.styling()) }, this.layout()));
+    };
+    /**
+     * Override this method to define the layout of the widget in the dashboard.
+     * @returns The layout of the widget in the dashboard.
+     * @public
+     */
+    BaseDashboard.prototype.layout = function () {
+        return undefined;
+    };
+    /**
+     * Override this method to customize the dashboard style.
+     * @returns The className for customizing the dashboard style.
+     * @public
+     */
+    BaseDashboard.prototype.styling = function () {
+        return null;
+    };
+    return BaseDashboard;
+}(react_1.Component));
+exports.BaseDashboard = BaseDashboard;

package/build/cjs/BaseWidget.d.ts

@@ -1,63 +1,95 @@
-import { Component, CSSProperties } from "react";
-interface BaseWidgetState {
-    loading?: boolean;
-}
-/**
- * The base class for widget implementation. I
- * It's also a react component, for more information about react component, please refer to https://reactjs.org/docs/react-component.html
- * @param P the type of props.
- * @param S the type of state.
- */
-export declare class BaseWidget<P, S> extends Component<P, S & BaseWidgetState> {
-    constructor(props: Readonly<P>);
-    /**
-     * This method is invoked immediately after a component is mounted.
-     * For more information about react lifecycle, please refer to https://reactjs.org/docs/react-component.html#componentdidmount
-     */
-    componentDidMount(): Promise<void>;
-    /**
-     * Define the basic layout of a widget
-     */
-    render(): JSX.Element;
-    /**
-     * Get data required by the widget
-     * @returns data for the widget
-     */
-    protected getData(): Promise<S>;
-    /**
-     * Override this method to customize the widget header.
-     * @returns JSX component for the widget body
-     */
-    protected header(): JSX.Element | undefined;
-    /**
-     * Override this method to customize the widget body.
-     * @returns JSX component for the widget body
-     */
-    protected body(): JSX.Element | undefined;
-    /**
-     * Override this method to customize the widget footer.
-     * @returns react node for the widget footer
-     */
-    protected footer(): JSX.Element | undefined;
-    /**
-     * Override this method to customize what the widget will look like when it is loading.
-     */
-    protected loading(): JSX.Element | undefined;
-    /**
-     * Override this method to customize the widget style.
-     * @returns custom style for the widget
-     */
-    protected styling(): CSSProperties | string;
-    /**
-     * Construct CSSProperties object for styling the widget.
-     * @returns CSSProperties object
-     */
-    private genStyle;
-    /**
-     * Construct className string for styling the widget.
-     * @returns className for styling the widget
-     */
-    private genClassName;
-}
-export {};
+import { Component } from "react";
+/**
+ * Interface for defining the class names of widget elements
+ */
+export interface IWidgetClassNames {
+    /**
+     * The class name for the root part of the widget.
+     */
+    root?: string;
+    /**
+     * The class name for the header part of the widget.
+     */
+    header?: string;
+    /**
+     * The class name for the body part of the widget.
+     */
+    body?: string;
+    /**
+     * The class name for the footer part of the widget.
+     */
+    footer?: string;
+}
+/**
+ * Interface for defining the state of the BaseWidget class
+ */
+interface BaseWidgetState {
+    loading?: boolean;
+}
+/**
+ * The base component that provides basic functionality to create a widget.
+ * @param P the type of props.
+ * @param S the type of state.
+ */
+export declare class BaseWidget<P, S> extends Component<P, S & BaseWidgetState> {
+    /**
+     * Constructor of BaseWidget.
+     * @param {Readonly<P>} props - The props of the component.
+     */
+    constructor(props: Readonly<P>);
+    /**
+     * Called after the component is mounted. You can do initialization that requires DOM nodes here. You can also make network requests here if you need to load data from a remote endpoint.
+     */
+    componentDidMount(): Promise<void>;
+    /**
+     * Defines the default layout for the widget.
+     */
+    render(): JSX.Element;
+    /**
+     * Get data required by the widget
+     * @returns Data for the widget
+     * @public
+     */
+    protected getData(): Promise<S>;
+    /**
+     * The purpose of this method is to provide a way for you to add custom header content to the widget.
+     * By overriding this method, you can add additional functionality or styling to the widget's header.
+     * If the method is not overridden, the widget will return undefined as the default value for the header, indicating that no custom header content has been defined.
+     * @returns An optional JSX.Element representing the header of the widget.
+     * @public
+     */
+    protected header(): JSX.Element | undefined;
+    /**
+     * The purpose of this method is to provide a way for you to add custom body content to the widget.
+     * By overriding this method, you can add additional functionality or styling to the widget's body.
+     * If the method is not overridden, the widget will return undefined as the default value for the body, indicating that no custom body content has been defined.
+     * @returns An optional JSX.Element representing the body of the widget.
+     * @public
+     */
+    protected body(): JSX.Element | undefined;
+    /**
+     * The purpose of this method is to provide a way for you to add custom footer content to the widget.
+     * By overriding this method, you can add additional functionality or styling to the widget's footer.
+     * If the method is not overridden, the widget will return undefined as the default value for the footer, indicating that no custom footer content has been defined.
+     * @returns An optional JSX.Element representing the footer of the widget.
+     * @public
+     */
+    protected footer(): JSX.Element | undefined;
+    /**
+     * This method is typically called when the widget is in the process of fetching data.
+     * The `undefined` return value is used to indicate that no loading indicator is required.
+     * If a loading indicator is required, the method can return a `JSX.Element` containing the necessary components to render the loading indicator.
+     * @returns A JSX element or `undefined` if no loading indicator is required.
+     * @public
+     */
+    protected loading(): JSX.Element | undefined;
+    /**
+     * Override this method to returns an object that defines the class names for the different parts of the widget.
+     * The returned object conforms to the {@link IWidgetClassNames} interface which defines the possible keys and values for the class names.
+     * @returns An object that defines the class names for the different parts of the widget.
+     * @public
+     */
+    protected styling(): IWidgetClassNames;
+}
+export {};
 //# sourceMappingURL=BaseWidget.d.ts.map

package/build/cjs/BaseWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseWidget.d.ts","sourceRoot":"","sources":["../../src/BaseWidget.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AA0CxD,UAAU,eAAe;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;GAKG;AACH,qBAAa,UAAU,CAAC,CAAC,EAAE,CAAC,CAAE,SAAQ,SAAS,CAAC,CAAC,EAAE,CAAC,GAAG,eAAe,CAAC;gBACzD,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAK9B;;;OAGG;IACG,iBAAiB;IAIvB;;OAEG;IACH,MAAM;IAiBN;;;OAGG;cACa,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC;IAIrC;;;OAGG;IACH,SAAS,CAAC,MAAM,IAAI,GAAG,CAAC,OAAO,GAAG,SAAS;IAI3C;;;OAGG;IACH,SAAS,CAAC,IAAI,IAAI,GAAG,CAAC,OAAO,GAAG,SAAS;IAIzC;;;OAGG;IACH,SAAS,CAAC,MAAM,IAAI,GAAG,CAAC,OAAO,GAAG,SAAS;IAI3C;;OAEG;IACH,SAAS,CAAC,OAAO,IAAI,GAAG,CAAC,OAAO,GAAG,SAAS;IAI5C;;;OAGG;IACH,SAAS,CAAC,OAAO,IAAI,aAAa,GAAG,MAAM;IAI3C;;;OAGG;IACH,OAAO,CAAC,QAAQ;IAIhB;;;OAGG;IACH,OAAO,CAAC,YAAY;CAGrB"}
+{"version":3,"file":"BaseWidget.d.ts","sourceRoot":"","sources":["../../src/BaseWidget.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKzC;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA2CD;;GAEG;AACH,UAAU,eAAe;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;GAIG;AACH,qBAAa,UAAU,CAAC,CAAC,EAAE,CAAC,CAAE,SAAQ,SAAS,CAAC,CAAC,EAAE,CAAC,GAAG,eAAe,CAAC;IACrE;;;OAGG;gBACgB,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAKrC;;OAEG;IACU,iBAAiB;IAI9B;;OAEG;IACI,MAAM;IAsBb;;;;OAIG;cACa,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC;IAIrC;;;;;;OAMG;IACH,SAAS,CAAC,MAAM,IAAI,GAAG,CAAC,OAAO,GAAG,SAAS;IAI3C;;;;;;OAMG;IACH,SAAS,CAAC,IAAI,IAAI,GAAG,CAAC,OAAO,GAAG,SAAS;IAIzC;;;;;;OAMG;IACH,SAAS,CAAC,MAAM,IAAI,GAAG,CAAC,OAAO,GAAG,SAAS;IAI3C;;;;;;OAMG;IACH,SAAS,CAAC,OAAO,IAAI,GAAG,CAAC,OAAO,GAAG,SAAS;IAI5C;;;;;OAKG;IACH,SAAS,CAAC,OAAO,IAAI,iBAAiB;CAGvC"}