@progress/telerik-react-report-viewer 27.25.1001 → 28.25.1119

package/dist/es/telerik-report-viewer.js

@@ -1,6 +1,805 @@
 import '../dependencies/initExtDeps';
 import React from 'react';
 import { ReportViewer } from '../dependencies/telerikReportViewer.js';
+
+/**
+ * Defines options for configuring report parameter editors in the React Report Viewer.
+ *
+ * @typedef {Object} ParametersOptions
+ * @property {Object} [editors] - Allows you to specify the editor type for single-value and multi-value report parameters.
+ * @property {string} [editors.singleSelect="LIST_VIEW"] - Editor type for single-value parameters.
+ *   - "COMBO_BOX": Uses a ComboBox widget as the editor.
+ *   - "LIST_VIEW": Uses a ListView widget as the editor.
+ *   - Default: "LIST_VIEW"
+ * @property {string} [editors.multiSelect="LIST_VIEW"] - Editor type for multi-value parameters.
+ *   - "COMBO_BOX": Uses a MultiSelect widget as the editor.
+ *   - "LIST_VIEW": Uses a ListView widget as the editor.
+ *   - Default: "LIST_VIEW"
+ *
+ * @example
+ * // React: Specify editor types for report parameters
+ *
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   parameters={{
+ *     editors: {
+ *       singleSelect: "COMBO_BOX",
+ *       multiSelect: "LIST_VIEW"
+ *     }
+ *   }}
+ * />
+ */
+
+/**
+ * Describes an interactive action triggered by the user in the report viewer.
+ * The shape of the `Value` property depends on the action `Type`.
+ *
+ * @typedef {Object} InteractiveAction
+ * @property {string} Id - The identifier of the action (a GUID).
+ * @property {string} Type - The type of the action. One of:
+ *   "sorting", "toggleVisibility", "navigateToUrl", "navigateToBookmark", "navigateToReport", "customAction".
+ * @property {string} ReportItemName - The name of the report item associated with the action.
+ * @property {Object} [Value] - Additional data for the action, depending on the Type:
+ *   - For "navigateToUrl": { Url: string, Target: "NewWindow"|"SameWindow" }
+ *   - For "navigateToBookmark": string (the target bookmark)
+ *   - For "navigateToReport": { report: string, parameters: Object }
+ *   - For "customAction": { Parameters: Object }
+ */
+
+/**
+ * Configuration for connecting to a Telerik Report Server instance.
+ * 
+ * The authentication method depends on the Report Server version:
+ * - Report Server for .NET: Supports Token authentication (getPersonalAccessToken) or username/password authentication. The token can be from any user, including the Guest user.
+ * - Report Server for .NET Framework 4.6.2: Supports username/password authentication or Guest account (url only, if Guest is enabled on the server).
+ * 
+ * @typedef {Object} ReportServer
+ * @property {string} url - The URL to the Telerik Report Server instance. (required)
+ * @property {function} [getPersonalAccessToken] - A callback function that returns the Token for authentication against the Telerik Report Server for .NET instance wrapped in a Promise. This is the recommended authentication method for Report Server for .NET. The token can be from any user account, including the Guest user. Only supported by Report Server for .NET. (optional)
+ * @property {string} [username] - A registered username in the Report Server that will be used to get access to the reports. Supported by both Report Server for .NET and Report Server for .NET Framework 4.6.2. If omitted when connecting to Report Server for .NET Framework 4.6.2 with Guest enabled, the built-in Guest account will be used. (optional)
+ * @property {string} [password] - The password for the provided username. Supported by both Report Server for .NET and Report Server for .NET Framework 4.6.2. Can be omitted only when connecting with the Guest account to Report Server for .NET Framework 4.6.2. (optional)
+ *
+ * @example <propertyName>getPersonalAccessToken</propertyName>
+ * // Example: Report Server for .NET - Token authentication (recommended)
+ * <TelerikReportViewer
+ *   reportServer={{
+ *     url: "https://my-report-server-net/",
+ *     getPersonalAccessToken: function() {
+ *       return Promise.resolve("<personal-access-token>");
+ *     }
+ *   }}
+ *   reportSource={{ report: "Samples/Dashboard" }}
+ * />
+ *
+ * @example <propertyName>getPersonalAccessToken</propertyName>
+ * // Example: Report Server for .NET - Token authentication with a secure endpoint
+ * <TelerikReportViewer
+ *   reportServer={{
+ *     url: "https://my-report-server-net/",
+ *     getPersonalAccessToken: function() {
+ *       return fetch('/rs-token')
+ *         .then(response => response.text());
+ *     }
+ *   }}
+ *   reportSource={{ report: "Samples/Dashboard" }}
+ * />
+ *
+ * @example <propertyName>getPersonalAccessToken</propertyName>
+ * // Example: Report Server for .NET - Token authentication with Guest user token
+ * <TelerikReportViewer
+ *   reportServer={{
+ *     url: "https://my-report-server-net/",
+ *     getPersonalAccessToken: function() {
+ *       return Promise.resolve("<guest-user-token>");
+ *     }
+ *   }}
+ *   reportSource={{ report: "Samples/Dashboard" }}
+ * />
+ *
+ * @example <propertyName>username</propertyName>
+ * // Example: Report Server for .NET - Username/password authentication
+ * <TelerikReportViewer
+ *   reportServer={{
+ *     url: "https://my-report-server-net/",
+ *     username: "myUser",
+ *     password: "myPassword"
+ *   }}
+ *   reportSource={{ report: "Samples/Dashboard" }}
+ * />
+ *
+ * @example <propertyName>username</propertyName>
+ * // Example: Report Server for .NET Framework 4.6.2 - Username/password authentication
+ * <TelerikReportViewer
+ *   reportServer={{
+ *     url: "https://my-report-server-framework/",
+ *     username: "myUser",
+ *     password: "myPassword"
+ *   }}
+ *   reportSource={{ report: "Samples/Dashboard" }}
+ * />
+ *
+ * @example <propertyName>url</propertyName>
+ * // Example: Report Server for .NET Framework 4.6.2 - Guest account (requires Guest enabled on server)
+ * <TelerikReportViewer
+ *   reportServer={{
+ *     url: "https://my-report-server-framework/"
+ *   }}
+ *   reportSource={{ report: "Samples/Dashboard" }}
+ * />
+ *
+ * @example <propertyName>reportServer</propertyName>
+ * // Example: Complete Report Viewer initialization with Report Server for .NET using Token authentication
+ * <TelerikReportViewer
+ *   reportServer={{
+ *     url: "https://my-report-server-net/",
+ *     getPersonalAccessToken: function() {
+ *       return Promise.resolve("<personal-access-token>");
+ *     }
+ *   }}
+ *   reportSource={{
+ *     report: "Samples/Dashboard",
+ *     parameters: {
+ *       ReportYear: 2004
+ *     }
+ *   }}
+ * />
+ */
+
+/**
+ * Configuration object that identifies the report to be displayed and provides initial parameter values.
+ * @typedef {Object} ReportSource
+ * @property {string} [report] - A string that represents a report on the server. On the server side, this string will be converted to a ReportSource through an IReportResolver. This may be an assembly qualified type name that can be converted to TypeReportSource, a path to a report definition file (.trdp/.trdx) as in the UriReportSource, or even a report id that a dedicated IReportSourceResolver will use to read the report definition stored in a database. When using the viewer with Report Server, the report should be provided in the format: "{Category}/{ReportName}".
+ * @property {ReportParameters} [parameters] - A JSON object with properties name/value equal to the report parameters' names and values used in the report definition.
+ *
+ * @example <propertyName>report</propertyName>
+ * // Example: Minimal report source with only the report name
+ * const reportSource = {
+ *   report: "MyReport"
+ * };
+ *
+ * @example <propertyName>parameters</propertyName>
+ * // Example: Report source with parameters
+ * const reportSource = {
+ *   report: "SalesReport",
+ *   parameters: {
+ *     StartDate: "2024-01-01",
+ *     EndDate: "2024-12-31",
+ *     Region: "North America"
+ *   }
+ * };
+ *
+ * @example <propertyName>report</propertyName>
+ * // Example: Report Server format
+ * const reportSource = {
+ *   report: "Finance/MonthlyReport"
+ * };
+ *
+ * @example
+ * // Example: Using ReportSource with the React Report Viewer
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{
+ *     report: "InventoryReport",
+ *     parameters: {
+ *       Category: "Electronics",
+ *       InStock: true
+ *     }
+ *   }}
+ * />
+ */
+
+/**
+ * @typedef {Object.<string, any>} ReportParameters
+ * An object where each property name corresponds to a report parameter's name,
+ * and the value is the value assigned to that parameter as used in the report definition.
+ *
+ * @example
+ * {
+ *   "StartDate": "2024-01-01",
+ *   "EndDate": "2024-12-31",
+ *   "Category": "Books"
+ * }
+ */
+
+/**
+ * Configuration options for the Send Email feature in the Report Viewer.
+ * Allows customization of the email dialog, default values, and available document formats when sending a report via email.
+ *
+ * @typedef {Object} SendEmailOptions
+ * @property {boolean} enabled - Indicates whether to show the Send Mail Message toolbar button. Default value: false.
+ * @property {string} [from] - E-mail address used for the MailMessage FROM value.
+ * @property {string} [to] - E-mail address used for the MailMessage TO value.
+ * @property {string} [cc] - E-mail address used for the MailMessage Carbon Copy value.
+ * @property {string} [subject] - A string used for the MailMessage Subject value.
+ * @property {string} [body] - Sentences used for the MailMessage Content value.
+ * @property {string} [format] - The preselected report document format.
+ *
+ * @example
+ * // Enable Send Email with default values and PDF as the default format
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   sendEmail={{
+ *     enabled: true,
+ *     from: "reports@company.com",
+ *     to: "recipient@domain.com",
+ *     cc: "manager@domain.com",
+ *     subject: "Monthly Sales Report",
+ *     body: "Please find the attached monthly sales report.",
+ *     format: "PDF"
+ *   }}
+ * />
+ *
+ * @example
+ * // Basic email configuration with minimal options
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   sendEmail={{
+ *     enabled: true,
+ *     from: "noreply@company.com"
+ *   }}
+ * />
+ */
+
+/**
+ * Represents the API of a parameter editor instance returned by createEditor.
+ * @typedef {Object} ParameterEditorInstance
+ * @property {function(Object):void} beginEdit - Creates the editor UI and populates it with the parameter settings.
+ * @property {function(Object):void} addAccessibility - Adds accessibility to the parameter editor and populates its string resources.
+ * @property {function(Object):void} setAccessibilityErrorState - Sets the error state of the parameter editor's accessibility functionality and its error attributes.
+ * @property {function(boolean):void} enable - Enables or disables the parameter editor.
+ * @property {function():void} [clearPendingChange] - Invoked when parameter changes (optional, not present on all editors).
+ * @property {function():void} [destroy] - Invoked to destroy the parameter editor (optional, not present on all editors).
+ */
+
+/**
+ * Describes a parameter editor for the Telerik Report Viewer parameter panel.
+ * @typedef {Object} ParameterEditor
+ * @property {function(Object): boolean} match - Determines if the editor is suitable for the parameter.
+ * @property {function(HTMLElement, Object): ParameterEditorInstance} createEditor - Creates the editor UI.
+ * @example
+ * // Example: Custom match function for single-select parameters
+ * var match = function(parameter) {
+ *   // Use parameter properties to determine if this editor should be used
+ *   return Boolean(parameter.availableValues) && !parameter.multivalue;
+ * };
+ *
+ * @example
+ * // Example: Custom createEditor function using Kendo DateTimePicker
+ * function match(parameter) {
+ *     return parameter.type === "System.DateTime";
+ * }
+ *
+ * function createEditor(placeholder, options) {
+ *     var dateTimePicker = $(placeholder).html('<input type="datetime"/>'),
+ *     parameter,
+ *     valueChangedCallback = options.parameterChanged,
+ *     dropDownList;
+ *     function onChange() {
+ *         var val = dropDownList.value();
+ *         valueChangedCallback(parameter, val);
+ *     }
+ *     return {
+ *         beginEdit: function (param) {
+ *             parameter = param;
+ *             $(dateTimePicker).find("input").kendoDateTimePicker({
+ *                 dataTextField: "name",
+ *                 dataValueField: "value",
+ *                 value: parameter.value,
+ *                 dataSource: parameter.availableValues,
+ *                 change: onChange
+ *             });
+ *             dropDownList = $(dateTimePicker).find("input").data("kendoDateTimePicker");
+ *         }
+ *     };
+ * }
+ *
+ * @example
+ * // Example: Registering the custom ParameterEditor
+ * ParameterEditors.push({
+ *   match: match,
+ *   createEditor: createEditor
+ * });
+ *
+ */
+
+/**
+ * @typedef {Object} TelerikReportViewerProps
+ * @description Configuration props for the TelerikReportViewer React component.
+ * @property {string} [id] - Sets the unique identifier of the ReportViewer instance. If not specified, the id of the target HTML element will be used (if such is set). The id of the ReportViewer is used to identify the client session of the viewer when persistSession is enabled (true).
+ * @example <propertyName>id</propertyName>
+ * // Set a custom viewer ID
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   id="myUniqueViewer"
+ * />
+ *
+ * @property {string} [serviceUrl] - Sets the address of the Report REST Service. Required if reportServer is not provided.
+ * @example <propertyName>serviceUrl</propertyName>
+ * // Set the service URL for the report viewer
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ * />
+ *
+ * @property {ReportServer} [reportServer] - Sets the configuration details for Telerik Report Server. Required if serviceUrl is not provided.
+ * @example <propertyName>reportServer</propertyName>
+ * // Use Report Server authentication with Token (recommended for RS.NET)
+ * <TelerikReportViewer
+ *   reportServer={{
+ *     url: "https://yourReportServerUrl:port",
+ *     getPersonalAccessToken: function() {
+ *       return Promise.resolve("<personal-access-token>");
+ *     }
+ *   }}
+ *   reportSource={{ report: "Samples/Dashboard" }}
+ * />
+ *
+ * @example <propertyName>reportServer</propertyName>
+ * // Use Report Server authentication with username/password (not recommended)
+ * <TelerikReportViewer
+ *   reportServer={{
+ *     url: "https://myserver.com/",
+ *     username: "reportuser",
+ *     password: "password123"
+ *   }}
+ *   reportSource={{ report: "Finance/Dashboard" }}
+ * />
+ *
+ * @property {string} [templateUrl] - Sets the address of the html page that contains the viewer templates. If omitted, the default template will be downloaded from the REST service. Note: Internally mapped to trvTemplateUrl property.
+ * @example <propertyName>templateUrl</propertyName>
+ * // Use a custom template
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   templateUrl="/templates/customViewer.html"
+ * />
+ *
+ * @property {ReportSource} [reportSource] - Sets the report and initial report parameter values for the viewer to be displayed.
+ * @example <propertyName>reportSource</propertyName>
+ * // Basic report source
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ * />
+ *
+ * @example
+ * <propertyName>reportSource</propertyName>
+ * // Report source with parameters
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{
+ *     report: "SalesReport.trdp",
+ *     parameters: { StartDate: "2024-01-01", EndDate: "2024-12-31" }
+ *   }}
+ * />
+ *
+ * @example
+ * <propertyName>reportSource</propertyName>
+ * // Report Server format
+ * <TelerikReportViewer
+ *   reportServer={{ url: "https://myserver/" }}
+ *   reportSource={{ report: "Finance/MonthlyReport" }}
+ * />
+ *
+ * @property {SendEmailOptions} [sendEmail] - Configuration for the Send Mail Message feature.
+ * @example <propertyName>sendEmail</propertyName>
+ * // Enable send email with default values
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   sendEmail={{
+ *     enabled: true,
+ *     from: "reports@company.com",
+ *     to: "recipient@domain.com",
+ *     subject: "Monthly Report",
+ *     format: "PDF"
+ *   }}
+ * />
+ *
+ * @property {number} [scale] - Sets the scale factor for the report pages. The scale takes effect when scaleMode is set to "SPECIFIC". Default value is 1.0 (100%).
+ * @example <propertyName>scale</propertyName>
+ * // Set zoom to 150%
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   scale={1.5}
+ *   scaleMode="SPECIFIC"
+ * />
+ *
+ * @property {string} [scaleMode] - Sets how the report pages are scaled. Available options: "FIT_PAGE_WIDTH" (pages scaled to fit entire width), "FIT_PAGE" (pages scaled to fit entire page), "SPECIFIC" (pages scaled with scale value). Default value is "FIT_PAGE".
+ * @example <propertyName>scaleMode</propertyName>
+ * // Fit page width
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   scaleMode="FIT_PAGE_WIDTH"
+ * />
+ *
+ * @property {string} [viewMode] - Sets if the report is displayed in interactive mode or in print preview. Available values: "INTERACTIVE" (enables drill-down interactivity), "PRINT_PREVIEW" (paged according to page settings). Default value is "INTERACTIVE".
+ * @example <propertyName>viewMode</propertyName>
+ * // Set view mode to print preview
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   viewMode="PRINT_PREVIEW"
+ * />
+ *
+ * @property {string} [pageMode] - Sets if the report is displayed in Single page or Continuous scroll mode. Available values: "SINGLE_PAGE" (only one page loaded), "CONTINUOUS_SCROLL" (multiple pages loaded). Default value is "CONTINUOUS_SCROLL".
+ * @example <propertyName>pageMode</propertyName>
+ * // Set page mode to single page
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   pageMode="SINGLE_PAGE"
+ * />
+ *
+ * @property {boolean} [persistSession] - Sets whether the viewer's client session is persisted between page refreshes (e.g., postback). The session is stored in the browser's sessionStorage and is available for the duration of the page session. Default value is false.
+ * @example <propertyName>persistSession</propertyName>
+ * // Enable session persistence
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   persistSession={true}
+ *   id="myConstantId"
+ * />
+ *
+ * @property {ParametersOptions} [parameters] - Allows the user to define parameter options for the report parameters.
+ * @example <propertyName>parameters</propertyName>
+ * // Configure parameter editors
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   parameters={{
+ *     editors: {
+ *       singleSelect: "COMBO_BOX",
+ *       multiSelect: "LIST_VIEW"
+ *     }
+ *   }}
+ * />
+ *
+ * @property {ParameterEditor} [parameterEditors] - Allows the user to define custom editors for the report parameters.
+ * @example <propertyName>parameterEditors</propertyName>
+ * // Register custom parameter editors
+ * const customEditors = [{
+ *   match: function(param) { return param.name === "MyParam"; },
+ *   createEditor: function(placeholder, options) { return {}; }
+ * }];
+ * // Use with component: parameterEditors={customEditors}
+ *
+ * @property {string} [authenticationToken] - If provided, a Bearer token will be set in the Authorization header for every request to the REST service.
+ * @example <propertyName>authenticationToken</propertyName>
+ * // Set authentication token
+ * const token = "YOUR_AUTH_TOKEN";
+ * // Use with component: authenticationToken={token}
+ *
+ * @property {string} [printMode] - Specifies how the viewer should print reports. Available values: "AUTO_SELECT" (automatically decide based on browser), "FORCE_PDF_FILE" (download as PDF file), "FORCE_PDF_PLUGIN" (use PDF plug-in). Default value is "AUTO_SELECT".
+ * @example <propertyName>printMode</propertyName>
+ * // Force PDF file for printing
+ * // Use with component: printMode="FORCE_PDF_FILE"
+ *
+ * @property {string} [selector] - A selector used in conjunction with the data- attributes. Whenever a command is attached to an element outside of the report viewer via the data-attributes this selector must be provided.
+ * @example <propertyName>selector</propertyName>
+ * // Set a custom selector for external commands
+ * // Use with component: selector="#customToolbar"
+ *
+ * @property {string} [disabledButtonClass] - A class used in conjunction with the data- attributes. Whenever a command is in the disabled state this class will be added to the respective button.
+ * @example <propertyName>disabledButtonClass</propertyName>
+ * // Custom disabled button styling
+ * // Use with component: disabledButtonClass="btn-disabled"
+ *
+ * @property {string} [checkedButtonClass] - A class used in conjunction with the data- attributes. Whenever a command is in the checked state this class will be added to the respective button.
+ * @example <propertyName>checkedButtonClass</propertyName>
+ * // Custom checked button styling
+ * // Use with component: checkedButtonClass="btn-active"
+ *
+ * @property {boolean} [enableAccessibility] - Determines whether the viewer should provide support for accessibility features. Default value is false.
+ * @example <propertyName>enableAccessibility</propertyName>
+ * // Enable accessibility features
+ * // Use with component: enableAccessibility={true}
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   enableAccessibility={true}
+ * />
+ *
+ * @property {boolean} [parametersAreaVisible] - Determines whether the viewer's parameters area is displayed if any parameter editor exists.
+ * @example <propertyName>parametersAreaVisible</propertyName>
+ * // Hide parameters area
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   parametersAreaVisible={false}
+ * />
+ *
+ * @property {boolean} [documentMapVisible] - Determines whether the viewer's document map is displayed if any bookmark is defined.
+ * @example <propertyName>documentMapVisible</propertyName>
+ * // Show document map
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   documentMapVisible={true}
+ * />
+ *
+ * @property {string} [parametersAreaPosition] - Specifies where the Parameters Area should be displayed. Available values: "RIGHT", "TOP", "LEFT", "BOTTOM". Default value is "RIGHT".
+ * @example <propertyName>parametersAreaPosition</propertyName>
+ * // Place parameters area on the left
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   parametersAreaPosition="LEFT"
+ * />
+ *
+ * @property {string} [documentMapAreaPosition] - Specifies where the Document Map should be displayed. Available values: "RIGHT", "LEFT". Default value is "LEFT".
+ * @example <propertyName>documentMapAreaPosition</propertyName>
+ * // Place document map on the right
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   documentMapAreaPosition="RIGHT"
+ * />
+ *
+ * @property {boolean} [searchMetadataOnDemand] - Determines whether the search metadata will be delivered on demand (true) or by default (false). Default value is false.
+ * @example <propertyName>searchMetadataOnDemand</propertyName>
+ * // Enable search metadata on demand
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   searchMetadataOnDemand={true}
+ * />
+ *
+ * @property {string} [initialPageAreaImageUrl] - The image URL for the PageArea background image. Used only when the parameter values are missing or invalid. The image should be in PNG, GIF, or JPG file format.
+ * @example <propertyName>initialPageAreaImageUrl</propertyName>
+ * // Set a background image for empty page area
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   initialPageAreaImageUrl="/images/reportBackground.png"
+ * />
+ *
+ * @property {boolean} [keepClientAlive] - Determines whether the client will be kept alive. Default value is true.
+ * @example <propertyName>keepClientAlive</propertyName>
+ * // Keep client alive
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   keepClientAlive={true}
+ * />
+ *
+ * @property {Object} [viewerContainerStyle] - CSS styles to apply to the viewer container div.
+ * @example <propertyName>viewerContainerStyle</propertyName>
+ * // Set container styles
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   viewerContainerStyle={{
+ *     width: '100%',
+ *     height: '600px',
+ *     border: '1px solid #ccc'
+ *   }}
+ * />
+ *
+ * @property {function} [ready] - A callback function that is called when the viewer content has been loaded from the template and is ready to display reports or perform any other operations.
+ * @example <propertyName>ready</propertyName>
+ * // Ready callback
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   ready={() => console.log("Report viewer is ready")}
+ * />
+ *
+ * @property {function} [exportBegin] - Called before exporting the report. Receives two parameters: `e` (the event object) and `args` (an object with properties: `format` (string), `deviceInfo` (object), and `handled` (boolean, set to true to prevent the default export)).
+ * @example <propertyName>exportBegin</propertyName>
+ * // Export begin handler
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   exportBegin={(e, args) => {
+ *     console.log("Exporting report in format: " + args.format);
+ *   }}
+ * />
+ *
+ * @property {function} [exportEnd] - Called after exporting the report. Receives two parameters: `e` (the event object) and `args` (an object with properties: `url` (string), `format` (string), `handled` (boolean), and `windowOpenTarget` (string)).
+ * @example <propertyName>exportEnd</propertyName>
+ * // Export end handler
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   exportEnd={(e, args) => {
+ *     args.windowOpenTarget = "_blank";
+ *     console.log("The exported report can be found at " + args.url);
+ *   }}
+ * />
+ *
+ * @property {function} [printBegin] - Called before printing the report. Receives two parameters: `e` (the event object) and `args` (an object with properties: `deviceInfo` (object), and `handled` (boolean)).
+ * @example <propertyName>printBegin</propertyName>
+ * // Print begin handler
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   printBegin={(e, args) => {
+ *     console.log("About to print the report.");
+ *   }}
+ * />
+ *
+ * @property {function} [printEnd] - Called after printing the report. Receives two parameters: `e` (the event object) and `args` (an object with properties: `url` (string), and `handled` (boolean)).
+ * @example <propertyName>printEnd</propertyName>
+ * // Print end handler
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   printEnd={(e, args) => {
+ *     console.log("The printed report can be found at " + args.url);
+ *   }}
+ * />
+ *
+ * @property {function} [renderingBegin] - Called before rendering the report (preview only, not for export or print). Receives two parameters: `e` (the event object) and `args` (an object with property: `deviceInfo` (object)).
+ * @example <propertyName>renderingBegin</propertyName>
+ * // Rendering begin handler
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   renderingBegin={(e, args) => {
+ *     // The deviceInfo property can be used to pass a specific culture to the REST Service so it renders the report with it.
+ *     const culture = "yourCulture";
+ *     args.deviceInfo["CurrentCulture"] = culture;
+ *     args.deviceInfo["CurrentUICulture"] = culture;
+ *     console.log("About to render the report.");
+ *   }}
+ * />
+ *
+ * @property {function} [renderingEnd] - Called after rendering the report. Receives two parameters: `e` (the event object) and `args` (an object with properties: `bookmarkNodes` (array), `documentMapAvailable` (boolean), `documentMapNodes` (array), `documentReady` (boolean), and `pageCount` (number)).
+ * @example <propertyName>renderingEnd</propertyName>
+ * // Rendering end handler
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   renderingEnd={(e, args) => {
+ *     console.log("The rendered report is " + (args.documentReady ? "" : "not ") + "ready.");
+ *     console.log("The rendered report has " + args.pageCount + " pages.");
+ *   }}
+ * />
+ *
+ * @property {function} [sendEmailBegin] - Called before the report is exported and the E-mail message is sent. Receives two parameters: `e` (the event object) and `args` (an object with properties: `deviceInfo` (object), `handled` (boolean), and `format` (string)).
+ * @example <propertyName>sendEmailBegin</propertyName>
+ * // Send email begin handler
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   sendEmailBegin={(e, args) => {
+ *     console.log("About to export and send report in format: " + args.format);
+ *   }}
+ * />
+ *
+ * @property {function} [sendEmailEnd] - Called after the report is exported and before the E-mail message is sent. Receives two parameters: `e` (the event object) and `args` (an object with properties: `handled` (boolean), `from` (string), `to` (string), `cc` (string), `format` (string), `subject` (string), `body` (string), and `url` (string)).
+ * @example <propertyName>sendEmailEnd</propertyName>
+ * // Send email end handler
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   sendEmailEnd={(e, args) => {
+ *     args.format = "XLS";
+ *     console.log("The exported report can be found at " + args.url);
+ *   }}
+ * />
+ *
+ * @property {function} [updateUi] - Called when the state of the viewer changes. Receives one parameter: `e` (the event object).
+ * @example <propertyName>updateUi</propertyName>
+ * // Update UI handler
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   updateUi={(e) => {
+ *     console.log("Viewer UI state changed.");
+ *   }}
+ * />
+ *
+ * @property {function} [pageReady] - Called after a page of the report is ready. Receives two parameters: `e` (the event object) and `args` (an object with property: `pageContent` (string)).
+ * @example <propertyName>pageReady</propertyName>
+ * // Page ready handler
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   pageReady={(e, args) => {
+ *     console.log("The content of the page is: " + args.pageContent);
+ *   }}
+ * />
+ *
+ * @property {function} [error] - Called when an error occurs. Receives two parameters: `e` (the event object) and `args` (a string containing the error message).
+ * @example <propertyName>error</propertyName>
+ * // Error handler
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   error={(e, args) => {
+ *     console.log("The error message is: " + args);
+ *   }}
+ * />
+ *
+ * @property {function} [interactiveActionExecuting] - Called before an interactive action executes, allowing cancellation. Receives two parameters: `e` (the event object) and `args` (an object with properties: `element` (DOM element), `action` ({@link InteractiveAction}), and `cancel` (boolean, set to true to cancel the action)).
+ * @example <propertyName>interactiveActionExecuting</propertyName>
+ * // Interactive action executing handler
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   interactiveActionExecuting={(e, args) => {
+ *     if (args.action.Type === "navigateToUrl") {
+ *       const url = args.action.Value.Url;
+ *       const target = args.action.Value.Target;
+ *     }
+ *   }}
+ * />
+ *
+ * @property {function} [interactiveActionEnter] - Called when entering an interactive action area. Receives two parameters: `e` (the event object) and `args` (an object with properties: `element` (DOM element), `action` ({@link InteractiveAction})).
+ * @example <propertyName>interactiveActionEnter</propertyName>
+ * // Interactive action enter handler
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   interactiveActionEnter={(e, args) => {
+ *     if (args.action.Type === "sorting") {
+ *       // Custom logic for sorting action
+ *     }
+ *   }}
+ * />
+ *
+ * @property {function} [interactiveActionLeave] - Called when leaving an interactive action area. Receives two parameters: `e` (the event object) and `args` (an object with properties: `element` (DOM element), `action` ({@link InteractiveAction})).
+ * @example <propertyName>interactiveActionLeave</propertyName>
+ * // Interactive action leave handler
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   interactiveActionLeave={(e, args) => {
+ *     if (args.action.Type === "toggleVisibility") {
+ *       // Custom logic for toggleVisibility action
+ *     }
+ *   }}
+ * />
+ *
+ * @property {function} [viewerToolTipOpening] - Called before a tooltip is opened, allowing cancellation. Receives two parameters: `e` (the event object) and `args` (an object with properties: `element` (DOM element), `toolTip` (object with `title` and `text`), and `cancel` (boolean, set to true to cancel the tooltip)).
+ * @example <propertyName>viewerToolTipOpening</propertyName>
+ * // Viewer tooltip opening handler
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   viewerToolTipOpening={(e, args) => {
+ *     // Example: disable tooltip if title contains '2004'
+ *     args.cancel = (/2004/i.test(args.toolTip.title));
+ *   }}
+ * />
+ */
+
+/**
+ * React wrapper component for the Telerik HTML5 Report Viewer.
+ * Provides a React-friendly interface to the Telerik Report Viewer functionality.
+ *
+ * @class TelerikReportViewer
+ * @extends {React.Component}
+ * @param {TelerikReportViewerProps} props - Configuration props for the component.
+ * @example
+ * // Basic usage
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   viewerContainerStyle={{ width: '100%', height: '600px' }}
+ * />
+ *
+ * @example
+ * // With parameters and event handlers
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{
+ *     report: "SalesReport",
+ *     parameters: { StartDate: "2024-01-01", EndDate: "2024-12-31" }
+ *   }}
+ *   ready={() => console.log("Report viewer is ready")}
+ *   error={(e, args) => console.error("Error:", args)}
+ *   viewerContainerStyle={{ width: '100%', height: '800px' }}
+ * />
+ */
 export class TelerikReportViewer extends React.Component {
   constructor() {
     super();
@@ -71,65 +870,663 @@ export class TelerikReportViewer extends React.Component {
       ref: el => this.el = el
     });
   }
+
+  /**
+   * Reloads/refreshes the current report.
+   * @function
+   * @returns {TelerikReportViewer} The current ReportViewer object.
+   * @example
+   * // Using ref to call refreshReport
+   * const reportViewerRef = useRef();
+   * <TelerikReportViewer ref={reportViewerRef} serviceUrl="api/reports/" reportSource={{ report: "Dashboard.trdp" }} />
+   * // ...
+   * reportViewerRef.current.refreshReport();
+   */
   refreshReport() {
     return this.viewerObject.refreshReport();
   }
+
+  /**
+   * Gets the current ReportSource - report and parameters.
+   * @function
+   * @returns {{report: string, parameters: Object}} An object with properties: report (string), parameters (JSON).
+   * @example
+   * // Get current report source
+   * const reportSource = reportViewerRef.current.getReportSource();
+   * console.log("Current report:", reportSource.report);
+   * console.log("Current parameters:", reportSource.parameters);
+   */
   getReportSource() {
     return this.viewerObject.reportSource();
   }
+
+  /**
+   * Sets the report source - report and parameters. Automatically reloads the report (if any) into the view.
+   * @function
+   * @param {{report: string, parameters: Object}} rs - The report source object to set. Object with properties: report (string) and parameters (JSON).
+   * @returns {TelerikReportViewer} The current ReportViewer object.
+   * @example
+   * // Set a new report source
+   * reportViewerRef.current.setReportSource({
+   *   report: "SalesReport",
+   *   parameters: { StartDate: "2024-01-01", EndDate: "2024-12-31" }
+   * });
+   */
   setReportSource(rs) {
     return this.viewerObject.reportSource(rs);
   }
+
+  /**
+   * Gets the current view mode.
+   * @function
+   * @returns {string} The current view mode.
+   * @example
+   * // Get current view mode
+   * const viewMode = reportViewerRef.current.getViewMode();
+   * console.log("Current view mode:", viewMode);
+   */
   getViewMode() {
     return this.viewerObject.viewMode();
   }
+
+  /**
+   * Sets the view mode and automatically reloads the current report (if any) into the new view.
+   * @function
+   * @param {string} vm - The view mode to set.
+   * @returns {TelerikReportViewer} The current ReportViewer object.
+   * @example
+   * // Set view mode to print preview
+   * reportViewerRef.current.setViewMode("PRINT_PREVIEW");
+   */
   setViewMode(vm) {
     return this.viewerObject.viewMode(vm);
   }
+
+  /**
+   * Gets the viewer’s scale factor and scale mode.
+   * @function
+   * @returns {{scale: number, scaleMode: string}} An object with properties: scale (number), scaleMode (string).
+   * @example
+   * // Get current scale and scale mode
+   * const scaleInfo = reportViewerRef.current.getScale();
+   * console.log("Scale:", scaleInfo.scale, "Scale mode:", scaleInfo.scaleMode);
+   */
   getScale() {
     return this.viewerObject.scale();
   }
+
+  /**
+   * Sets the scale factor and scale mode.
+   * @function
+   * @param {{scale: number, scaleMode: string}} scale - The scale object to set.
+   * @returns {TelerikReportViewer} The current ReportViewer object.
+   * @example
+   * // Set scale to 150% and mode to SPECIFIC
+   * reportViewerRef.current.setScale({ scale: 1.5, scaleMode: "SPECIFIC" });
+   */
   setScale(scale) {
     return this.viewerObject.scale(scale);
   }
+
+  /**
+   * Gets the total page count of viewer’s currently displayed report.
+   * @function
+   * @returns {number} The total page count.
+   * @example
+   * // Get total page count
+   * const totalPages = reportViewerRef.current.pageCount();
+   * console.log("Total pages:", totalPages);
+   */
   pageCount() {
     return this.viewerObject.pageCount();
   }
+
+  /**
+   * Gets the viewer’s current page that is displayed.
+   * @function
+   * @returns {number} The current page number (1-based).
+   * @example
+   * // Get current page number
+   * const currentPage = reportViewerRef.current.currentPage();
+   * console.log("Current page:", currentPage);
+   */
   currentPage() {
     return this.viewerObject.currentPage();
   }
+
+  /**
+   * Sets the authentication token.
+   * @function
+   * @param {string} token - The authentication token to set.
+   * @returns {TelerikReportViewer} The current ReportViewer object.
+   * @example
+   * // Set authentication token
+   * reportViewerRef.current.setAuthenticationToken("YOUR_AUTH_TOKEN");
+   */
   setAuthenticationToken(token) {
     return this.viewerObject.authenticationToken(token);
   }
+
+  /**
+   * Gets the shortcut keys used when the report viewer is in accessible mode (enableAccessibility=true).
+   * @function
+   * @returns {Object} The current accessibility key map.
+   * @example
+   * // Get accessibility key map
+   * const keyMap = reportViewerRef.current.getAccessibilityKeyMap();
+   * if (keyMap) {
+   *   console.log("Accessibility key map:", keyMap);
+   * }
+   */
   getAccessibilityKeyMap() {
     return this.viewerObject.accessibilityKeyMap();
   }
+
+  /**
+   * Sets the shortcut keys used when the report viewer is in accessible mode. It is recommended to set the new key map when the report rendering is complete, because the accessibility routines require the report viewer template to be loaded.
+   * @function
+   * @param {Object} keyMap - The key map object with keyboard shortcuts.
+   * @returns {TelerikReportViewer} The current ReportViewer object.
+   * @example
+   * // Set custom accessibility key map
+   * reportViewerRef.current.setAccessibilityKeyMap({
+   *   CONFIRM_KEY: 13,
+   *   MENU_AREA_KEY: 77,
+   *   CONTENT_AREA_KEY: 67,
+   *   PARAMETERS_AREA_KEY: 80,
+   *   DOCUMENT_MAP_AREA_KEY: 68
+   * });
+   */
   setAccessibilityKeyMap(keyMap) {
     return this.viewerObject.accessibilityKeyMap(keyMap);
   }
+
+  /**
+   * Binds an event handler to the specified event.
+   * @function
+   * @param {string} eventName - The name of the event to bind to.
+   * @param {function} eventHandler - The handler function to invoke when the event occurs.
+   * @example
+   * // Bind to pageReady event
+   * reportViewerRef.current.bind("pageReady", (e, args) => {
+   *   console.log("Page is ready!", args);
+   * });
+   *
+   * @example
+   * // Bind to error event
+   * reportViewerRef.current.bind("error", (e, args) => {
+   *   console.error("Report viewer error:", args);
+   * });
+   */
   bind(eventName, eventHandler) {
     this.viewerObject.bind(eventName, eventHandler);
   }
+
+  /**
+   * Unbinds an event handler from the specified event.
+   * @function
+   * @param {string} eventName - The name of the event to unbind from.
+   * @param {function} [eventHandler] - The handler function to remove. If omitted, all handlers are removed.
+   * @example
+   * // Unbind specific handler
+   * reportViewerRef.current.unbind("error", myErrorHandler);
+   *
+   * @example
+   * // Unbind all handlers for an event
+   * reportViewerRef.current.unbind("pageReady");
+   */
   unbind(eventName, eventHandler) {
     this.viewerObject.unbind(eventName, eventHandler);
   }
+
+  /**
+   * Unbinds all event handlers from the specified event.
+   * @function
+   * @param {string} eventName - The name of the event to unbind all handlers from.
+   * @example
+   * // Unbind all error handlers
+   * reportViewerRef.current.unbindAll("error");
+   */
   unbindAll(eventName) {
     this.viewerObject.unbind(eventName);
   }
+
+  /**
+   * Gets the current page mode of the viewer.
+   * @function
+   * @returns {string} The current page mode (e.g., "SINGLE_PAGE" or "CONTINUOUS_SCROLL").
+   * @example
+   * // Get current page mode
+   * const pageMode = reportViewerRef.current.getPageMode();
+   * console.log("Current page mode:", pageMode);
+   */
   getPageMode() {
     return this.viewerObject.pageMode();
   }
+
+  /**
+   * Sets the page mode of the viewer.
+   * @function
+   * @param {string} psm - The page mode to set (use PageModes constants).
+   * @returns {*} The result from the underlying report viewer's pageMode method.
+   * @example
+   * // Set page mode to single page
+   * reportViewerRef.current.setPageMode("SINGLE_PAGE");
+   */
   setPageMode(psm) {
     return this.viewerObject.pageMode(psm);
   }
+
+  /**
+   * Clears the current reportSource from the viewer internal state and from its persisted session in the browser. Called in order to force the viewer to respect the newly set reportSource on the next postback.
+   * @function
+   * @returns {void}
+   * @example
+   * // Clear report source before setting a new one
+   * reportViewerRef.current.clearReportSource();
+   * reportViewerRef.current.setReportSource({ report: "NewReport" });
+   */
   clearReportSource() {
     return this.viewerObject.clearReportSource();
   }
+
+  /**
+   * Stops sending keep alive requests to the server, if keep client alive was enabled. Disposes the viewer instance, cleaning up resources and event handlers. Should be called when the component is unmounted or no longer needed.
+   * @function
+   * @returns {void}
+   * @example
+   * // Manually dispose the viewer
+   * reportViewerRef.current.dispose();
+   */
   dispose() {
     return this.viewerObject.dispose();
   }
+
+  /**
+   * Returns an immutable array of name-value objects representing the current evaluated report parameters.
+   * @function
+   * @returns {Array<{name: string, value: any}>} Array containing the name and the value of each report parameter.
+   * @example
+   * // Get current report parameters
+   * const parameters = reportViewerRef.current.getReportParameters();
+   * parameters.forEach(param => {
+   *   console.log(`Parameter ${param.name}: ${param.value}`);
+   * });
+   */
   getReportParameters() {
     return this.viewerObject.getReportParameters();
   }
 }
-export default TelerikReportViewer;
+export default TelerikReportViewer;
+
+/**
+ * Represents a command that can be executed on the report viewer.
+ * Each command is an object with the following methods:
+ * - exec(): Executes the command (optionally with parameters).
+ * - enabled(): Returns a boolean indicating if the command is currently enabled.
+ * - checked(): Returns a boolean indicating if the command is in a checked state (for toggle commands).
+ *
+ * @typedef {Object} ReportViewerCommand
+ * @property {Function} exec - Executes the command. Some commands accept parameters (see below).
+ * @property {Function} enabled - Returns whether the command is currently enabled.
+ * @property {Function} checked - Returns whether the command is in a checked state (for toggle commands).
+ */
+
+/**
+ * Collection of all available commands for the report viewer. Each property is a command name mapped to a {@link ReportViewerCommand} instance.
+ *
+ * @typedef {Object} ReportViewerCommands
+
+ * @property {ReportViewerCommand} historyBack - Goes back to the previously rendered report from history.
+ * @example <propertyName>historyBack</propertyName>
+ * // Execute the command
+ * let viewer;
+ * ReactDOM.render(
+ *     <>
+ *         <TelerikReportViewer />
+ *         <button onClick={() => viewer.commands.historyBack.exec()}>Back</button>
+ *     </>
+ * );
+ * @example <propertyName>historyBack</propertyName>
+ * // Check if the command is enabled
+ * const isEnabled = viewer.commands.historyBack.enabled();
+ * @example <propertyName>historyBack</propertyName>
+ * // Check if the command is checked
+ * const isChecked = viewer.commands.historyBack.checked();
+ * @property {ReportViewerCommand} historyForward - Goes forward to the next rendered report from history.
+ * @example <propertyName>historyForward</propertyName>
+ * // Execute the command
+ * let viewer;
+ * ReactDOM.render(
+ *     <>
+ *         <TelerikReportViewer />
+ *         <button onClick={() => viewer.commands.historyForward.exec()}>Forward</button>
+ *     </>
+ * );
+ * @example <propertyName>historyForward</propertyName>
+ * // Check if the command is enabled
+ * const isEnabled = viewer.commands.historyForward.enabled();
+ * @example <propertyName>historyForward</propertyName>
+ * // Check if the command is checked
+ * const isChecked = viewer.commands.historyForward.checked();
+ * @property {ReportViewerCommand} refresh - Refreshes the report.
+ * @example <propertyName>refresh</propertyName>
+ * // Execute the command
+ * let viewer;
+ * ReactDOM.render(
+ *     <>
+ *         <TelerikReportViewer />
+ *         <button onClick={() => viewer.commands.refresh.exec()}>Refresh</button>
+ *     </>
+ * );
+ * @example <propertyName>refresh</propertyName>
+ * // Check if the command is enabled
+ * const isEnabled = viewer.commands.refresh.enabled();
+ * @example <propertyName>refresh</propertyName>
+ * // Check if the command is checked
+ * const isChecked = viewer.commands.refresh.checked();
+ * @property {ReportViewerCommand} goToFirstPage - Goes to the first page of the report.
+ * @example <propertyName>goToFirstPage</propertyName>
+ * // Execute the command
+ * let viewer;
+ * ReactDOM.render(
+ *     <>
+ *         <TelerikReportViewer />
+ *         <button onClick={() => viewer.commands.goToFirstPage.exec()}>First Page</button>
+ *     </>
+ * );
+ * @example <propertyName>goToFirstPage</propertyName>
+ * // Check if the command is enabled
+ * const isEnabled = viewer.commands.goToFirstPage.enabled();
+ * @example <propertyName>goToFirstPage</propertyName>
+ * // Check if the command is checked
+ * const isChecked = viewer.commands.goToFirstPage.checked();
+ * @property {ReportViewerCommand} goToPrevPage - Goes to the previous page of the report.
+ * @example <propertyName>goToPrevPage</propertyName>
+ * // Execute the command
+ * let viewer;
+ * ReactDOM.render(
+ *     <>
+ *         <TelerikReportViewer />
+ *         <button onClick={() => viewer.commands.goToPrevPage.exec()}>Previous</button>
+ *     </>
+ * );
+ * @example <propertyName>goToPrevPage</propertyName>
+ * // Check if the command is enabled
+ * const isEnabled = viewer.commands.goToPrevPage.enabled();
+ * @example <propertyName>goToPrevPage</propertyName>
+ * // Check if the command is checked
+ * const isChecked = viewer.commands.goToPrevPage.checked();
+ * @property {ReportViewerCommand} goToPage - Goes to a specific page of the report. Accepts a page number as parameter: exec(pageNumber).
+ * @example <propertyName>goToPage</propertyName>
+ * // Execute the command
+ * let viewer;
+ * ReactDOM.render(
+ *     <>
+ *         <TelerikReportViewer />
+ *         <button onClick={() => viewer.commands.goToPage.exec(5)}>Go to Page 5</button>
+ *     </>
+ * );
+ * @example <propertyName>goToPage</propertyName>
+ * // Check if the command is enabled
+ * const isEnabled = viewer.commands.goToPage.enabled();
+ * @example <propertyName>goToPage</propertyName>
+ * // Check if the command is checked
+ * const isChecked = viewer.commands.goToPage.checked();
+ * @property {ReportViewerCommand} goToNextPage - Goes to the next page of the report.
+ * @example <propertyName>goToNextPage</propertyName>
+ * // Execute the command
+ * let viewer;
+ * ReactDOM.render(
+ *     <>
+ *         <TelerikReportViewer />
+ *         <button onClick={() => viewer.commands.goToNextPage.exec()}>Next</button>
+ *     </>
+ * );
+ * @example <propertyName>goToNextPage</propertyName>
+ * // Check if the command is enabled
+ * const isEnabled = viewer.commands.goToNextPage.enabled();
+ * @example <propertyName>goToNextPage</propertyName>
+ * // Check if the command is checked
+ * const isChecked = viewer.commands.goToNextPage.checked();
+ * @property {ReportViewerCommand} goToLastPage - Goes to the last page of the report.
+ * @example <propertyName>goToLastPage</propertyName>
+ * // Execute the command
+ * let viewer;
+ * ReactDOM.render(
+ *     <>
+ *         <TelerikReportViewer />
+ *         <button onClick={() => viewer.commands.goToLastPage.exec()}>Last Page</button>
+ *     </>
+ * );
+ * @example <propertyName>goToLastPage</propertyName>
+ * // Check if the command is enabled
+ * const isEnabled = viewer.commands.goToLastPage.enabled();
+ * @example <propertyName>goToLastPage</propertyName>
+ * // Check if the command is checked
+ * const isChecked = viewer.commands.goToLastPage.checked();
+ * @property {ReportViewerCommand} togglePrintPreview - Toggles between Print Preview and Interactive view modes.
+ * @example <propertyName>togglePrintPreview</propertyName>
+ * // Execute the command
+ * let viewer;
+ * ReactDOM.render(
+ *     <>
+ *         <TelerikReportViewer />
+ *         <button onClick={() => viewer.commands.togglePrintPreview.exec()}>Toggle Print Preview</button>
+ *     </>
+ * );
+ * @example <propertyName>togglePrintPreview</propertyName>
+ * // Check if the command is enabled
+ * const isEnabled = viewer.commands.togglePrintPreview.enabled();
+ * @example <propertyName>togglePrintPreview</propertyName>
+ * // Check if the command is checked
+ * const isChecked = viewer.commands.togglePrintPreview.checked();
+ * @property {ReportViewerCommand} export - Exports the report, using the respective rendering extension name. Accepts a rendering extension name as parameter: exec("PDF"), exec("XLSX"), etc.
+ * @example <propertyName>export</propertyName>
+ * // Execute the command
+ * let viewer;
+ * ReactDOM.render(
+ *     <>
+ *         <TelerikReportViewer />
+ *         <button onClick={() => viewer.commands.export.exec('PDF')}>Export PDF</button>
+ *     </>
+ * );
+ * @example   <propertyName>export</propertyName>
+ * // Check if the command is enabled
+ * const isEnabled = viewer.commands.export.enabled();
+ * @example <propertyName>export</propertyName>
+ * // Check if the command is checked
+ * const isChecked = viewer.commands.export.checked();
+ * @property {ReportViewerCommand} print - Triggers the report printing.
+ * @example <propertyName>print</propertyName>
+ * // Execute the command
+ * let viewer;
+ * ReactDOM.render(
+ *     <>
+ *         <TelerikReportViewer />
+ *         <button onClick={() => viewer.commands.print.exec()}>Print</button>
+ *     </>
+ * );
+ * @example <propertyName>print</propertyName>
+ * // Check if the command is enabled
+ * const isEnabled = viewer.commands.print.enabled();
+ * @example <propertyName>print</propertyName>
+ * // Check if the command is checked
+ * const isChecked = viewer.commands.print.checked();
+ * @property {ReportViewerCommand} toggleDocumentMap - Shows or hides the document map.
+ * @example <propertyName>toggleDocumentMap</propertyName>
+ * // Execute the command
+ * let viewer;
+ * ReactDOM.render(
+ *     <>
+ *         <TelerikReportViewer />
+ *         <button onClick={() => viewer.commands.toggleDocumentMap.exec()}>Toggle Document Map</button>
+ *     </>
+ * );
+ * @example <propertyName>toggleDocumentMap</propertyName>
+ * // Check if the command is enabled
+ * const isEnabled = viewer.commands.toggleDocumentMap.enabled();
+ * @example <propertyName>toggleDocumentMap</propertyName>
+ * // Check if the command is checked
+ * const isChecked = viewer.commands.toggleDocumentMap.checked();
+ * @property {ReportViewerCommand} toggleParametersArea - Shows or hides the parameters area.
+ * @example <propertyName>toggleParametersArea</propertyName>
+ * // Execute the command
+ * let viewer;
+ * ReactDOM.render(
+ *     <>
+ *         <TelerikReportViewer />
+ *         <button onClick={() => viewer.commands.toggleParametersArea.exec()}>Toggle Parameters</button>
+ *     </>
+ * );
+ * @example <propertyName>toggleParametersArea</propertyName>
+ * // Check if the command is enabled
+ * const isEnabled = viewer.commands.toggleParametersArea.enabled();
+ * @example <propertyName>toggleParametersArea</propertyName>
+ * // Check if the command is checked
+ * const isChecked = viewer.commands.toggleParametersArea.checked();
+ * @property {ReportViewerCommand} zoomIn - Zoom-in the report.
+ * @example <propertyName>zoomIn</propertyName>
+ * // Execute the command
+ * let viewer;
+ * ReactDOM.render(
+ *     <>
+ *         <TelerikReportViewer />
+ *         <button onClick={() => viewer.commands.zoomIn.exec()}>Zoom In</button>
+ *     </>
+ * );
+ * @example <propertyName>zoomIn</propertyName>
+ * // Check if the command is enabled
+ * const isEnabled = viewer.commands.zoomIn.enabled();
+ * @example <propertyName>zoomIn</propertyName>
+ * // Check if the command is checked
+ * const isChecked = viewer.commands.zoomIn.checked();
+ * @property {ReportViewerCommand} zoomOut - Zoom-out the report.
+ * @example <propertyName>zoomOut</propertyName>
+ * // Execute the command
+ * let viewer;
+ * ReactDOM.render(
+ *     <>
+ *         <TelerikReportViewer />
+ *         <button onClick={() => viewer.commands.zoomOut.exec()}>Zoom Out</button>
+ *     </>
+ * );
+ * @example <propertyName>zoomOut</propertyName>
+ * // Check if the command is enabled
+ * const isEnabled = viewer.commands.zoomOut.enabled();
+ * @example <propertyName>zoomOut</propertyName>
+ * // Check if the command is checked
+ * const isChecked = viewer.commands.zoomOut.checked();
+ * @property {ReportViewerCommand} zoom - Zoom with a specified ratio. Accepts a zoom ratio as parameter: exec(1.5).
+ * @example <propertyName>zoom</propertyName>
+ * // Execute the command
+ * let viewer;
+ * ReactDOM.render(
+ *     <>
+ *         <TelerikReportViewer />
+ *         <button onClick={() => viewer.commands.zoom.exec(1.5)}>Zoom 150%</button>
+ *     </>
+ * );
+ * @example <propertyName>zoom</propertyName>
+ * // Check if the command is enabled
+ * const isEnabled = viewer.commands.zoom.enabled();
+ * @example <propertyName>zoom</propertyName>
+ * // Check if the command is checked
+ * const isChecked = viewer.commands.zoom.checked();
+ * @property {ReportViewerCommand} toggleZoomMode - Changes the zoom mode of the report.
+ * @example <propertyName>toggleZoomMode</propertyName>
+ * // Execute the command
+ * let viewer;
+ * ReactDOM.render(
+ *     <>
+ *         <TelerikReportViewer />
+ *         <button onClick={() => viewer.commands.toggleZoomMode.exec()}>Toggle Zoom Mode</button>
+ *     </>
+ * );
+ * @example <propertyName>toggleZoomMode</propertyName>
+ * // Check if the command is enabled
+ * const isEnabled = viewer.commands.toggleZoomMode.enabled();
+ * @example <propertyName>toggleZoomMode</propertyName>
+ * // Check if the command is checked
+ * const isChecked = viewer.commands.toggleZoomMode.checked();
+ * @property {ReportViewerCommand} toggleSideMenu - Shows or hides the side menu.
+ * @example <propertyName>toggleSideMenu</propertyName>
+ * // Execute the command
+ * let viewer;
+ * ReactDOM.render(
+ *     <>
+ *         <TelerikReportViewer />
+ *         <button onClick={() => viewer.commands.toggleSideMenu.exec()}>Toggle Side Menu</button>
+ *     </>
+ * );
+ * @example <propertyName>toggleSideMenu</propertyName>
+ * // Check if the command is enabled
+ * const isEnabled = viewer.commands.toggleSideMenu.enabled();
+ * @example <propertyName>toggleSideMenu</propertyName>
+ * // Check if the command is checked
+ * const isChecked = viewer.commands.toggleSideMenu.checked();
+ * @property {ReportViewerCommand} toggleSearchDialog - Shows or hides the search dialog.
+ * @example <propertyName>toggleSearchDialog</propertyName>
+ * // Execute the command
+ * let viewer;
+ * ReactDOM.render(
+ *     <>
+ *         <TelerikReportViewer />
+ *         <button onClick={() => viewer.commands.toggleSearchDialog.exec()}>Toggle Search</button>
+ *     </>
+ * );
+ * @example <propertyName>toggleSearchDialog</propertyName>
+ * // Check if the command is enabled
+ * const isEnabled = viewer.commands.toggleSearchDialog.enabled();
+ * @example <propertyName>toggleSearchDialog</propertyName>
+ * // Check if the command is checked
+ * const isChecked = viewer.commands.toggleSearchDialog.checked();
+ * @property {ReportViewerCommand} stopRendering - Stops the rendering of the current report.
+ * @example <propertyName>stopRendering</propertyName>
+ * // Execute the command
+ * let viewer;
+ * ReactDOM.render(
+ *     <>
+ *         <TelerikReportViewer />
+ *         <button onClick={() => viewer.commands.stopRendering.exec()}>Stop Rendering</button>
+ *     </>
+ * );
+ * @example <propertyName>stopRendering</propertyName>
+ * // Check if the command is enabled
+ * const isEnabled = viewer.commands.stopRendering.enabled();
+ * @example <propertyName>stopRendering</propertyName>
+ * // Check if the command is checked
+ * const isChecked = viewer.commands.stopRendering.checked();
+ * @property {ReportViewerCommand} toggleSendEmailDialog - Shows or hides the send email dialog.
+ * @example <propertyName>toggleSendEmailDialog</propertyName>
+ * // Execute the command
+ * let viewer;
+ * ReactDOM.render(
+ *     <>
+ *         <TelerikReportViewer />
+ *         <button onClick={() => viewer.commands.toggleSendEmailDialog.exec()}>Toggle Send Email</button>
+ *     </>
+ * );
+ * @example <propertyName>toggleSendEmailDialog</propertyName>
+ * // Check if the command is enabled
+ * const isEnabled = viewer.commands.toggleSendEmailDialog.enabled();
+ * @example <propertyName>toggleSendEmailDialog</propertyName>
+ * // Check if the command is checked
+ * const isChecked = viewer.commands.toggleSendEmailDialog.checked();
+ * @property {ReportViewerCommand} toggleAiPromptDialog - Shows or hides the AI prompt dialog.
+ * @example <propertyName>toggleAiPromptDialog</propertyName>
+ * // Execute the command
+ * let viewer;
+ * ReactDOM.render(
+ *     <>
+ *         <TelerikReportViewer />
+ *         <button onClick={() => viewer.commands.toggleAiPromptDialog.exec()}>Toggle AI Prompt</button>
+ *     </>
+ * );
+ * @example <propertyName>toggleAiPromptDialog</propertyName>
+ * // Check if the command is enabled
+ * const isEnabled = viewer.commands.toggleAiPromptDialog.enabled();
+ * @example <propertyName>toggleAiPromptDialog</propertyName>
+ * // Check if the command is checked
+ * const isChecked = viewer.commands.toggleAiPromptDialog.checked();
+ */