@progress/telerik-react-report-viewer 29.26.211 → 29.26.402

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

@@ -17,8 +17,7 @@ import { ReportViewer } from '../dependencies/telerikReportViewer.js';
  *   - Default: "LIST_VIEW"
  *
  * @example
- * // React: Specify editor types for report parameters
- *
+ * // Specify editor types for report parameters
  * <TelerikReportViewer
  *   serviceUrl="api/reports/"
  *   reportSource={{ report: "Dashboard.trdp" }}
@@ -49,19 +48,19 @@ import { ReportViewer } from '../dependencies/telerikReportViewer.js';
 
 /**
  * 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)
+ * @property {string} url - The URL of the Telerik Report Server instance.
+ * @property {function} [getPersonalAccessToken] - A callback that returns a Promise resolving to a Personal Access Token for authentication. Recommended for Report Server for .NET. The token can be from any user account, including the Guest user.
+ * @property {string} [username] - A registered username for Report Server authentication. Supported by both Report Server for .NET and Report Server for .NET Framework. When omitted with Report Server for .NET Framework and Guest enabled, the built-in Guest account is used.
+ * @property {string} [password] - The password for the provided username. Can be omitted only when connecting with the Guest account to Report Server for .NET Framework.
  *
  * @example <propertyName>getPersonalAccessToken</propertyName>
- * // Example: Report Server for .NET - Token authentication (recommended)
+ * // Report Server for .NET - Token authentication (recommended)
  * <TelerikReportViewer
  *   reportServer={{
  *     url: "https://my-report-server-net/",
@@ -73,7 +72,7 @@ import { ReportViewer } from '../dependencies/telerikReportViewer.js';
  * />
  *
  * @example <propertyName>getPersonalAccessToken</propertyName>
- * // Example: Report Server for .NET - Token authentication with a secure endpoint
+ * // Report Server for .NET - Token authentication with a secure endpoint
  * <TelerikReportViewer
  *   reportServer={{
  *     url: "https://my-report-server-net/",
@@ -86,7 +85,7 @@ import { ReportViewer } from '../dependencies/telerikReportViewer.js';
  * />
  *
  * @example <propertyName>getPersonalAccessToken</propertyName>
- * // Example: Report Server for .NET - Token authentication with Guest user token
+ * // Report Server for .NET - Token authentication with Guest user token
  * <TelerikReportViewer
  *   reportServer={{
  *     url: "https://my-report-server-net/",
@@ -98,7 +97,7 @@ import { ReportViewer } from '../dependencies/telerikReportViewer.js';
  * />
  *
  * @example <propertyName>username</propertyName>
- * // Example: Report Server for .NET - Username/password authentication
+ * // Report Server for .NET - Username/password authentication
  * <TelerikReportViewer
  *   reportServer={{
  *     url: "https://my-report-server-net/",
@@ -109,7 +108,7 @@ import { ReportViewer } from '../dependencies/telerikReportViewer.js';
  * />
  *
  * @example <propertyName>username</propertyName>
- * // Example: Report Server for .NET Framework 4.6.2 - Username/password authentication
+ * // Report Server for .NET Framework - Username/password authentication
  * <TelerikReportViewer
  *   reportServer={{
  *     url: "https://my-report-server-framework/",
@@ -120,7 +119,7 @@ import { ReportViewer } from '../dependencies/telerikReportViewer.js';
  * />
  *
  * @example <propertyName>url</propertyName>
- * // Example: Report Server for .NET Framework 4.6.2 - Guest account (requires Guest enabled on server)
+ * // Report Server for .NET Framework - Guest account (requires Guest enabled on server)
  * <TelerikReportViewer
  *   reportServer={{
  *     url: "https://my-report-server-framework/"
@@ -129,7 +128,7 @@ import { ReportViewer } from '../dependencies/telerikReportViewer.js';
  * />
  *
  * @example <propertyName>reportServer</propertyName>
- * // Example: Complete Report Viewer initialization with Report Server for .NET using Token authentication
+ * // Complete initialization with Report Server for .NET using Token authentication
  * <TelerikReportViewer
  *   reportServer={{
  *     url: "https://my-report-server-net/",
@@ -149,19 +148,19 @@ import { ReportViewer } from '../dependencies/telerikReportViewer.js';
 /**
  * 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.
+ * @property {string} [report] - A string identifying the report to display. This can be a path to a report definition file (e.g., 'Dashboard.trdp' or 'Dashboard.trdx'), a type name, or a custom identifier resolved by the server-side report source resolver. For Report Server, use the format '{Category}/{ReportName}'.
+ * @property {ReportParameters} [parameters] - An object whose keys are report parameter names and values are the corresponding parameter values.
  *
  * @example <propertyName>report</propertyName>
- * // Example: Minimal report source with only the report name
+ * // Minimal report source with only the report file name
  * const reportSource = {
- *   report: "MyReport"
+ *   report: "MyReport.trdp"
  * };
  *
  * @example <propertyName>parameters</propertyName>
- * // Example: Report source with parameters
+ * // Report source with parameters
  * const reportSource = {
- *   report: "SalesReport",
+ *   report: "SalesReport.trdp",
  *   parameters: {
  *     StartDate: "2024-01-01",
  *     EndDate: "2024-12-31",
@@ -170,13 +169,13 @@ import { ReportViewer } from '../dependencies/telerikReportViewer.js';
  * };
  *
  * @example <propertyName>report</propertyName>
- * // Example: Report Server format
+ * // Report Server format
  * const reportSource = {
  *   report: "Finance/MonthlyReport"
  * };
  *
  * @example
- * // Example: Using ReportSource with the React Report Viewer
+ * // Using ReportSource with the React Report Viewer
  * <TelerikReportViewer
  *   serviceUrl="api/reports/"
  *   reportSource={{
@@ -212,8 +211,8 @@ import { ReportViewer } from '../dependencies/telerikReportViewer.js';
  * @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.
+ * @property {string} [body] - Text content for the email body.
+ * @property {string} [format] - The preselected document format for the report attachment (e.g., 'PDF', 'XLSX').
  *
  * @example
  * // Enable Send Email with default values and PDF as the default format
@@ -245,63 +244,79 @@ import { ReportViewer } from '../dependencies/telerikReportViewer.js';
 
 /**
  * Represents the API of a parameter editor instance returned by createEditor.
+ *
+ * Implementations must provide `beginEdit`, `addAccessibility`, and `setAccessibilityErrorState`.
+ * The viewer calls `addAccessibility` / `setAccessibilityErrorState` when `enableAccessibility` is true.
+ * Optional members like `clearPendingChange` and `destroy` are lifecycle hooks for editors
+ * that manage external widgets or pending async updates.
  * @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).
+ * @property {function(Object):void} addAccessibility - Adds accessibility to the parameter editor and populates its string resources. Called by the viewer when `enableAccessibility` is true.
+ * @property {function(Object):void} setAccessibilityErrorState - Sets the error state of the parameter editor's accessibility functionality and its error attributes. Called by the viewer when `enableAccessibility` is true and the user changes  value.
+ * @internal
+ * @property {function(boolean):void} enable - Enables or disables the parameter editor (e.g., when the "use default value" checkbox is toggled).
+ * @property {function():void} [clearPendingChange] - Invoked when parameter changes.
+ * @property {function():void} [destroy] - Invoked to destroy the parameter editor.
  */
 
 /**
- * Describes a parameter editor for the Telerik Report Viewer parameter panel.
+ * Describes a parameter editor for the Telerik Report Viewer parameters area.
  * @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.
+ * @property {function(HTMLElement, Object): ParameterEditorInstance} createEditor - Creates the editor UI and returns an editor instance.
  * @example
- * // Example: Custom match function for single-select parameters
- * var match = function(parameter) {
- *   // Use parameter properties to determine if this editor should be used
+ * // Custom match function for single-select parameters
+ * function match(parameter) {
  *   return Boolean(parameter.availableValues) && !parameter.multivalue;
- * };
+ * }
  *
  * @example
- * // Example: Custom createEditor function using Kendo DateTimePicker
+ * // 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;
+ *     const container = $(placeholder).html('<input type="datetime"/>');
+ *     let parameter;
+ *     const valueChangedCallback = options.parameterChanged;
+ *     let picker;
+ *
  *     function onChange() {
- *         var val = dropDownList.value();
+ *         const val = picker.value();
  *         valueChangedCallback(parameter, val);
  *     }
+ *
  *     return {
  *         beginEdit: function (param) {
  *             parameter = param;
- *             $(dateTimePicker).find("input").kendoDateTimePicker({
+ *             $(container).find("input").kendoDateTimePicker({
  *                 dataTextField: "name",
  *                 dataValueField: "value",
  *                 value: parameter.value,
  *                 dataSource: parameter.availableValues,
  *                 change: onChange
  *             });
- *             dropDownList = $(dateTimePicker).find("input").data("kendoDateTimePicker");
+ *             picker = $(container).find("input").data("kendoDateTimePicker");
+ *         },
+ *
+ *         addAccessibility: function (accessibilityOptions) {
+ *             // Apply ARIA attributes, labels, etc. to the editor input.
+ *         },
+ *
+ *         setAccessibilityErrorState: function (hasError) {
+ *             // Update ARIA error attributes on the editor input.
  *         }
  *     };
  * }
  *
  * @example
- * // Example: Registering the custom ParameterEditor
- * ParameterEditors.push({
- *   match: match,
- *   createEditor: createEditor
- * });
+ * // Registering a custom parameter editor
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   parameterEditors={[{ match, createEditor }]}
+ * />
  *
  */
 
@@ -349,7 +364,7 @@ import { ReportViewer } from '../dependencies/telerikReportViewer.js';
  *   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.
+ * @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.
  * @example <propertyName>templateUrl</propertyName>
  * // Use a custom template
  * <TelerikReportViewer
@@ -461,45 +476,90 @@ import { ReportViewer } from '../dependencies/telerikReportViewer.js';
  *   }}
  * />
  *
- * @property {ParameterEditor} [parameterEditors] - Allows the user to define custom editors for the report parameters.
+ * @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 {}; }
+ *   createEditor: function(placeholder, options) {
+ *     return {
+ *       beginEdit: function(param) {
+ *         // Create and initialize the editor UI inside placeholder.
+ *       },
+ *       addAccessibility: function(accessibilityOptions) {
+ *         // Apply ARIA attributes and accessibility strings.
+ *       },
+ *       setAccessibilityErrorState: function(hasError) {
+ *         // Update accessibility error state on the editor.
+ *       }
+ *     };
+ *   }
  * }];
- * // Use with component: parameterEditors={customEditors}
+ *
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   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}
+ * // Set a Bearer authentication token for REST service requests
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   authenticationToken="YOUR_AUTH_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"
+ * // Force PDF file download for printing
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   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.
+ * @property {string} [selector] - A CSS selector that identifies the viewer's container element. Required when using external command buttons via data-attributes. External buttons must set their `data-target-report-viewer` attribute to this same value so the viewer can resolve which instance to command and apply `disabledButtonClass` / `checkedButtonClass` toggling.
  * @example <propertyName>selector</propertyName>
- * // Set a custom selector for external commands
- * // Use with component: selector="#customToolbar"
+ * // The selector must match the viewer's own container id (same value used in data-target-report-viewer on external buttons)
+ * <TelerikReportViewer
+ *   id="rv1"
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   selector="#rv1"
+ *   disabledButtonClass="btn-disabled"
+ *   checkedButtonClass="btn-checked"
+ * />
  *
- * @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.
+ * // External buttons reference the same selector in data-target-report-viewer:
+ * // <button data-command="telerik_ReportViewer_goToNextPage" data-target-report-viewer="#rv1">Next</button>
+ *
+ * @property {string} [disabledButtonClass] - A CSS class added to external command buttons (bound via data-attributes) when the command is in a disabled state.
  * @example <propertyName>disabledButtonClass</propertyName>
- * // Custom disabled button styling
- * // Use with component: disabledButtonClass="btn-disabled"
+ * // Apply custom styling to disabled command buttons
+ * <TelerikReportViewer
+ *   id="rv1"
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   selector="#rv1"
+ *   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.
+ * @property {string} [checkedButtonClass] - A CSS class added to external command buttons (bound via data-attributes) when the command is in a checked state.
  * @example <propertyName>checkedButtonClass</propertyName>
- * // Custom checked button styling
- * // Use with component: checkedButtonClass="btn-active"
+ * // Apply custom styling to checked/active command buttons
+ * <TelerikReportViewer
+ *   id="rv1"
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   selector="#rv1"
+ *   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" }}
@@ -560,7 +620,7 @@ import { ReportViewer } from '../dependencies/telerikReportViewer.js';
  *   initialPageAreaImageUrl="/images/reportBackground.png"
  * />
  *
- * @property {boolean} [keepClientAlive] - Determines whether the client will be kept alive. Default value is true.
+ * @property {boolean} [keepClientAlive] - Determines whether the viewer sends periodic keep-alive requests to the server to prevent the client session from expiring. Default value is true.
  * @example <propertyName>keepClientAlive</propertyName>
  * // Keep client alive
  * <TelerikReportViewer
@@ -582,6 +642,19 @@ import { ReportViewer } from '../dependencies/telerikReportViewer.js';
  *   }}
  * />
  *
+ * @property {Object} [localizationResources] - An object containing all or a subset of the viewer's localization resources in a chosen language.
+ * @example <propertyName>localizationResources</propertyName>
+ * // Set localization resources
+ * <TelerikReportViewer
+ *   serviceUrl="api/reports/"
+ *   reportSource={{ report: "Dashboard.trdp" }}
+ *   localizationResources={{
+ *      loadingFormats: "Loading...",
+ *      loadingReport: "Loading report...",
+ *      loadingParameters: "Loading parameters...",
+ *   }}
+ * />
+ *
  * @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
@@ -643,11 +716,9 @@ import { ReportViewer } from '../dependencies/telerikReportViewer.js';
  *   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.");
+ *     // Use deviceInfo to set a specific culture for rendering
+ *     args.deviceInfo["CurrentCulture"] = "de-DE";
+ *     args.deviceInfo["CurrentUICulture"] = "de-DE";
  *   }}
  * />
  *
@@ -854,7 +925,9 @@ export class TelerikReportViewer extends React.Component {
       documentMapVisible: this.props.documentMapVisible,
       documentMapAreaPosition: this.props.documentMapAreaPosition,
       parametersAreaPosition: this.props.parametersAreaPosition,
-      keepClientAlive: keepClientAlive
+      keepClientAlive: keepClientAlive,
+      localizationResources: this.props.localizationResources,
+      wrapper: "react"
     });
     this.commands = this.viewerObject.commands;
   }
@@ -903,7 +976,7 @@ export class TelerikReportViewer extends React.Component {
   /**
    * 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).
+   * @param {{report: string, parameters: Object}} reportSource - 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
@@ -912,8 +985,8 @@ export class TelerikReportViewer extends React.Component {
    *   parameters: { StartDate: "2024-01-01", EndDate: "2024-12-31" }
    * });
    */
-  setReportSource(rs) {
-    return this.viewerObject.reportSource(rs);
+  setReportSource(reportSource) {
+    return this.viewerObject.reportSource(reportSource);
   }
 
   /**
@@ -930,16 +1003,16 @@ export class TelerikReportViewer extends React.Component {
   }
 
   /**
-   * Sets the view mode and automatically reloads the current report (if any) into the new view.
+   * Sets the view mode and automatically reloads the current report into the new view.
    * @function
-   * @param {string} vm - The view mode to set.
+   * @param {string} viewMode - The view mode to set ("INTERACTIVE" or "PRINT_PREVIEW").
    * @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);
+  setViewMode(viewMode) {
+    return this.viewerObject.viewMode(viewMode);
   }
 
   /**
@@ -1008,9 +1081,9 @@ export class TelerikReportViewer extends React.Component {
   }
 
   /**
-   * Gets the shortcut keys used when the report viewer is in accessible mode (enableAccessibility=true).
+   * Gets the shortcut keys used when the report viewer is in accessible mode (enableAccessibility={true}).
    * @function
-   * @returns {Object} The current accessibility key map.
+   * @returns {Object|undefined} The current accessibility key map, or undefined if accessibility is not enabled.
    * @example
    * // Get accessibility key map
    * const keyMap = reportViewerRef.current.getAccessibilityKeyMap();
@@ -1023,7 +1096,7 @@ export class TelerikReportViewer extends React.Component {
   }
 
   /**
-   * 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.
+   * Sets the shortcut keys used when the report viewer is in accessible mode. Set the new key map after 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.
@@ -1107,14 +1180,14 @@ export class TelerikReportViewer extends React.Component {
   /**
    * 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.
+   * @param {string} pageMode - The page mode to set ("SINGLE_PAGE" or "CONTINUOUS_SCROLL").
+   * @returns {TelerikReportViewer} The current ReportViewer object.
    * @example
    * // Set page mode to single page
    * reportViewerRef.current.setPageMode("SINGLE_PAGE");
    */
-  setPageMode(psm) {
-    return this.viewerObject.pageMode(psm);
+  setPageMode(pageMode) {
+    return this.viewerObject.pageMode(pageMode);
   }
 
   /**
@@ -1167,7 +1240,7 @@ export default TelerikReportViewer;
  * - 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} exec - Executes the command. Some commands accept parameters (see each command's exec example).
  * @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).
  */
@@ -1176,357 +1249,297 @@ export default TelerikReportViewer;
  * 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>
- *     </>
- * );
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
+ * // Navigate back to the previous report in history
+ * reportViewerRef.current.commands.historyBack.exec();
  * @example <propertyName>historyBack</propertyName>
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
  * // Check if the command is enabled
- * const isEnabled = viewer.commands.historyBack.enabled();
+ * const isEnabled = reportViewerRef.current.commands.historyBack.enabled();
  * @example <propertyName>historyBack</propertyName>
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
  * // Check if the command is checked
- * const isChecked = viewer.commands.historyBack.checked();
+ * const isChecked = reportViewerRef.current.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>
- *     </>
- * );
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
+ * // Navigate forward to the next report in history
+ * reportViewerRef.current.commands.historyForward.exec();
  * @example <propertyName>historyForward</propertyName>
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
  * // Check if the command is enabled
- * const isEnabled = viewer.commands.historyForward.enabled();
+ * const isEnabled = reportViewerRef.current.commands.historyForward.enabled();
  * @example <propertyName>historyForward</propertyName>
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
  * // Check if the command is checked
- * const isChecked = viewer.commands.historyForward.checked();
+ * const isChecked = reportViewerRef.current.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>
- *     </>
- * );
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
+ * // Refresh the current report
+ * reportViewerRef.current.commands.refresh.exec();
  * @example <propertyName>refresh</propertyName>
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
  * // Check if the command is enabled
- * const isEnabled = viewer.commands.refresh.enabled();
+ * const isEnabled = reportViewerRef.current.commands.refresh.enabled();
  * @example <propertyName>refresh</propertyName>
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
  * // Check if the command is checked
- * const isChecked = viewer.commands.refresh.checked();
+ * const isChecked = reportViewerRef.current.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>
- *     </>
- * );
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
+ * // Navigate to the first page
+ * reportViewerRef.current.commands.goToFirstPage.exec();
  * @example <propertyName>goToFirstPage</propertyName>
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
  * // Check if the command is enabled
- * const isEnabled = viewer.commands.goToFirstPage.enabled();
+ * const isEnabled = reportViewerRef.current.commands.goToFirstPage.enabled();
  * @example <propertyName>goToFirstPage</propertyName>
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
  * // Check if the command is checked
- * const isChecked = viewer.commands.goToFirstPage.checked();
+ * const isChecked = reportViewerRef.current.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>
- *     </>
- * );
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
+ * // Navigate to the previous page
+ * reportViewerRef.current.commands.goToPrevPage.exec();
  * @example <propertyName>goToPrevPage</propertyName>
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
  * // Check if the command is enabled
- * const isEnabled = viewer.commands.goToPrevPage.enabled();
+ * const isEnabled = reportViewerRef.current.commands.goToPrevPage.enabled();
  * @example <propertyName>goToPrevPage</propertyName>
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
  * // 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).
+ * const isChecked = reportViewerRef.current.commands.goToPrevPage.checked();
+ *
+ * @property {ReportViewerCommand} goToPage - Goes to a specific page of the report. Pass the page number to exec().
  * @example <propertyName>goToPage</propertyName>
- * // Execute the command
- * let viewer;
- * ReactDOM.render(
- *     <>
- *         <TelerikReportViewer />
- *         <button onClick={() => viewer.commands.goToPage.exec(5)}>Go to Page 5</button>
- *     </>
- * );
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
+ * // Navigate to page 5
+ * reportViewerRef.current.commands.goToPage.exec(5);
  * @example <propertyName>goToPage</propertyName>
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
  * // Check if the command is enabled
- * const isEnabled = viewer.commands.goToPage.enabled();
+ * const isEnabled = reportViewerRef.current.commands.goToPage.enabled();
  * @example <propertyName>goToPage</propertyName>
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
  * // Check if the command is checked
- * const isChecked = viewer.commands.goToPage.checked();
+ * const isChecked = reportViewerRef.current.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>
- *     </>
- * );
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
+ * // Navigate to the next page
+ * reportViewerRef.current.commands.goToNextPage.exec();
  * @example <propertyName>goToNextPage</propertyName>
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
  * // Check if the command is enabled
- * const isEnabled = viewer.commands.goToNextPage.enabled();
+ * const isEnabled = reportViewerRef.current.commands.goToNextPage.enabled();
  * @example <propertyName>goToNextPage</propertyName>
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
  * // Check if the command is checked
- * const isChecked = viewer.commands.goToNextPage.checked();
+ * const isChecked = reportViewerRef.current.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>
- *     </>
- * );
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
+ * // Navigate to the last page
+ * reportViewerRef.current.commands.goToLastPage.exec();
  * @example <propertyName>goToLastPage</propertyName>
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
  * // Check if the command is enabled
- * const isEnabled = viewer.commands.goToLastPage.enabled();
+ * const isEnabled = reportViewerRef.current.commands.goToLastPage.enabled();
  * @example <propertyName>goToLastPage</propertyName>
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
  * // Check if the command is checked
- * const isChecked = viewer.commands.goToLastPage.checked();
+ * const isChecked = reportViewerRef.current.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>
- *     </>
- * );
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
+ * // Toggle between Print Preview and Interactive modes
+ * reportViewerRef.current.commands.togglePrintPreview.exec();
  * @example <propertyName>togglePrintPreview</propertyName>
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
  * // Check if the command is enabled
- * const isEnabled = viewer.commands.togglePrintPreview.enabled();
+ * const isEnabled = reportViewerRef.current.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.
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
+ * // Check if the command is checked (true when in Print Preview mode)
+ * const isChecked = reportViewerRef.current.commands.togglePrintPreview.checked();
+ *
+ * @property {ReportViewerCommand} export - Exports the report. Pass the rendering extension name to exec() (e.g., "PDF", "XLSX", "CSV", "DOCX").
+ * @example <propertyName>export</propertyName>
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
+ * // Export the report as PDF
+ * reportViewerRef.current.commands.export.exec("PDF");
  * @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>
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
  * // Check if the command is enabled
- * const isEnabled = viewer.commands.export.enabled();
+ * const isEnabled = reportViewerRef.current.commands.export.enabled();
  * @example <propertyName>export</propertyName>
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
  * // Check if the command is checked
- * const isChecked = viewer.commands.export.checked();
+ * const isChecked = reportViewerRef.current.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>
- *     </>
- * );
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
+ * // Print the current report
+ * reportViewerRef.current.commands.print.exec();
  * @example <propertyName>print</propertyName>
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
  * // Check if the command is enabled
- * const isEnabled = viewer.commands.print.enabled();
+ * const isEnabled = reportViewerRef.current.commands.print.enabled();
  * @example <propertyName>print</propertyName>
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
  * // Check if the command is checked
- * const isChecked = viewer.commands.print.checked();
+ * const isChecked = reportViewerRef.current.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>
- *     </>
- * );
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
+ * // Toggle the document map visibility
+ * reportViewerRef.current.commands.toggleDocumentMap.exec();
  * @example <propertyName>toggleDocumentMap</propertyName>
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
  * // Check if the command is enabled
- * const isEnabled = viewer.commands.toggleDocumentMap.enabled();
+ * const isEnabled = reportViewerRef.current.commands.toggleDocumentMap.enabled();
  * @example <propertyName>toggleDocumentMap</propertyName>
- * // Check if the command is checked
- * const isChecked = viewer.commands.toggleDocumentMap.checked();
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
+ * // Check if the command is checked (true when document map is visible)
+ * const isChecked = reportViewerRef.current.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>
- *     </>
- * );
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
+ * // Toggle the parameters area visibility
+ * reportViewerRef.current.commands.toggleParametersArea.exec();
  * @example <propertyName>toggleParametersArea</propertyName>
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
  * // Check if the command is enabled
- * const isEnabled = viewer.commands.toggleParametersArea.enabled();
+ * const isEnabled = reportViewerRef.current.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.
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
+ * // Check if the command is checked (true when parameters area is visible)
+ * const isChecked = reportViewerRef.current.commands.toggleParametersArea.checked();
+ *
+ * @property {ReportViewerCommand} zoomIn - Zooms in on the report.
  * @example <propertyName>zoomIn</propertyName>
- * // Execute the command
- * let viewer;
- * ReactDOM.render(
- *     <>
- *         <TelerikReportViewer />
- *         <button onClick={() => viewer.commands.zoomIn.exec()}>Zoom In</button>
- *     </>
- * );
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
+ * // Zoom in on the report
+ * reportViewerRef.current.commands.zoomIn.exec();
  * @example <propertyName>zoomIn</propertyName>
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
  * // Check if the command is enabled
- * const isEnabled = viewer.commands.zoomIn.enabled();
+ * const isEnabled = reportViewerRef.current.commands.zoomIn.enabled();
  * @example <propertyName>zoomIn</propertyName>
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
  * // Check if the command is checked
- * const isChecked = viewer.commands.zoomIn.checked();
- * @property {ReportViewerCommand} zoomOut - Zoom-out the report.
+ * const isChecked = reportViewerRef.current.commands.zoomIn.checked();
+ *
+ * @property {ReportViewerCommand} zoomOut - Zooms out of the report.
  * @example <propertyName>zoomOut</propertyName>
- * // Execute the command
- * let viewer;
- * ReactDOM.render(
- *     <>
- *         <TelerikReportViewer />
- *         <button onClick={() => viewer.commands.zoomOut.exec()}>Zoom Out</button>
- *     </>
- * );
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
+ * // Zoom out of the report
+ * reportViewerRef.current.commands.zoomOut.exec();
  * @example <propertyName>zoomOut</propertyName>
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
  * // Check if the command is enabled
- * const isEnabled = viewer.commands.zoomOut.enabled();
+ * const isEnabled = reportViewerRef.current.commands.zoomOut.enabled();
  * @example <propertyName>zoomOut</propertyName>
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
  * // 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).
+ * const isChecked = reportViewerRef.current.commands.zoomOut.checked();
+ *
+ * @property {ReportViewerCommand} zoom - Zooms to a specified ratio. Pass the zoom ratio to exec() (e.g., 1.5 for 150%).
  * @example <propertyName>zoom</propertyName>
- * // Execute the command
- * let viewer;
- * ReactDOM.render(
- *     <>
- *         <TelerikReportViewer />
- *         <button onClick={() => viewer.commands.zoom.exec(1.5)}>Zoom 150%</button>
- *     </>
- * );
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
+ * // Zoom to 150%
+ * reportViewerRef.current.commands.zoom.exec(1.5);
  * @example <propertyName>zoom</propertyName>
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
  * // Check if the command is enabled
- * const isEnabled = viewer.commands.zoom.enabled();
+ * const isEnabled = reportViewerRef.current.commands.zoom.enabled();
  * @example <propertyName>zoom</propertyName>
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
  * // Check if the command is checked
- * const isChecked = viewer.commands.zoom.checked();
- * @property {ReportViewerCommand} toggleZoomMode - Changes the zoom mode of the report.
+ * const isChecked = reportViewerRef.current.commands.zoom.checked();
+ *
+ * @property {ReportViewerCommand} toggleZoomMode - Cycles the zoom mode of the report between FIT_PAGE_WIDTH, FIT_PAGE, and SPECIFIC.
  * @example <propertyName>toggleZoomMode</propertyName>
- * // Execute the command
- * let viewer;
- * ReactDOM.render(
- *     <>
- *         <TelerikReportViewer />
- *         <button onClick={() => viewer.commands.toggleZoomMode.exec()}>Toggle Zoom Mode</button>
- *     </>
- * );
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
+ * // Cycle to the next zoom mode
+ * reportViewerRef.current.commands.toggleZoomMode.exec();
  * @example <propertyName>toggleZoomMode</propertyName>
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
  * // Check if the command is enabled
- * const isEnabled = viewer.commands.toggleZoomMode.enabled();
+ * const isEnabled = reportViewerRef.current.commands.toggleZoomMode.enabled();
  * @example <propertyName>toggleZoomMode</propertyName>
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
  * // 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();
+ * const isChecked = reportViewerRef.current.commands.toggleZoomMode.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>
- *     </>
- * );
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
+ * // Toggle the search dialog visibility
+ * reportViewerRef.current.commands.toggleSearchDialog.exec();
  * @example <propertyName>toggleSearchDialog</propertyName>
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
  * // Check if the command is enabled
- * const isEnabled = viewer.commands.toggleSearchDialog.enabled();
+ * const isEnabled = reportViewerRef.current.commands.toggleSearchDialog.enabled();
  * @example <propertyName>toggleSearchDialog</propertyName>
- * // Check if the command is checked
- * const isChecked = viewer.commands.toggleSearchDialog.checked();
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
+ * // Check if the command is checked (true when search dialog is visible)
+ * const isChecked = reportViewerRef.current.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>
- *     </>
- * );
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
+ * // Stop the current report rendering
+ * reportViewerRef.current.commands.stopRendering.exec();
  * @example <propertyName>stopRendering</propertyName>
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
  * // Check if the command is enabled
- * const isEnabled = viewer.commands.stopRendering.enabled();
+ * const isEnabled = reportViewerRef.current.commands.stopRendering.enabled();
  * @example <propertyName>stopRendering</propertyName>
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
  * // Check if the command is checked
- * const isChecked = viewer.commands.stopRendering.checked();
+ * const isChecked = reportViewerRef.current.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>
- *     </>
- * );
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
+ * // Toggle the send email dialog visibility
+ * reportViewerRef.current.commands.toggleSendEmailDialog.exec();
  * @example <propertyName>toggleSendEmailDialog</propertyName>
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
  * // Check if the command is enabled
- * const isEnabled = viewer.commands.toggleSendEmailDialog.enabled();
+ * const isEnabled = reportViewerRef.current.commands.toggleSendEmailDialog.enabled();
  * @example <propertyName>toggleSendEmailDialog</propertyName>
- * // Check if the command is checked
- * const isChecked = viewer.commands.toggleSendEmailDialog.checked();
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
+ * // Check if the command is checked (true when send email dialog is visible)
+ * const isChecked = reportViewerRef.current.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>
- *     </>
- * );
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
+ * // Toggle the AI prompt dialog visibility
+ * reportViewerRef.current.commands.toggleAiPromptDialog.exec();
  * @example <propertyName>toggleAiPromptDialog</propertyName>
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
  * // Check if the command is enabled
- * const isEnabled = viewer.commands.toggleAiPromptDialog.enabled();
+ * const isEnabled = reportViewerRef.current.commands.toggleAiPromptDialog.enabled();
  * @example <propertyName>toggleAiPromptDialog</propertyName>
- * // Check if the command is checked
- * const isChecked = viewer.commands.toggleAiPromptDialog.checked();
+ * // Assume reportViewerRef = useRef(null) and pass it to the component ref prop.
+ * // Check if the command is checked (true when AI prompt dialog is visible)
+ * const isChecked = reportViewerRef.current.commands.toggleAiPromptDialog.checked();
  */