devextreme-react 23.2.6 → 24.1.2-beta

package/cjs/core/component-base.js

@@ -1,7 +1,7 @@
 /*!
  * devextreme-react
- * Version: 23.2.6
- * Build date: Wed May 01 2024
+ * Version: 24.1.2-beta
+ * Build date: Mon May 13 2024
  *
  * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
  *
@@ -12,21 +12,6 @@
  */
 
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -40,7 +25,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -73,213 +62,300 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DX_REMOVE_EVENT = exports.ComponentBase = void 0;
-var events = __importStar(require("devextreme/events"));
 var React = __importStar(require("react"));
-var react_dom_1 = require("react-dom");
+var events = __importStar(require("devextreme/events"));
+var react_1 = require("react");
 var frame_1 = require("devextreme/animation/frame");
 var common_1 = require("devextreme/core/utils/common");
-var template_manager_1 = require("./template-manager");
+var react_dom_1 = require("react-dom");
+var helpers_1 = require("./helpers");
 var options_manager_1 = require("./options-manager");
 var widget_config_1 = require("./widget-config");
 var tree_1 = require("./configuration/react/tree");
-var utils_1 = require("./configuration/utils");
-var helpers_1 = require("./helpers");
+var template_manager_1 = require("./template-manager");
 var DX_REMOVE_EVENT = 'dxremove';
 exports.DX_REMOVE_EVENT = DX_REMOVE_EVENT;
-var ComponentBase = /** @class */ (function (_super) {
-    __extends(ComponentBase, _super);
-    function ComponentBase(props) {
-        var _this = _super.call(this, props) || this;
-        _this.isPortalComponent = false;
-        _this._templateProps = [];
-        _this._childNodes = [];
-        _this.useRequestAnimationFrameFlag = false;
-        _this.useDeferUpdateForTemplates = false;
-        _this.guardsUpdateScheduled = false;
-        _this._createWidget = _this._createWidget.bind(_this);
-        _this._setTemplateManagerHooks = _this._setTemplateManagerHooks.bind(_this);
-        _this._optionsManager = new options_manager_1.OptionsManager();
-        return _this;
-    }
-    ComponentBase.displayContentsStyle = function () {
-        return utils_1.isIE()
-            ? {
-                width: '100%',
-                height: '100%',
-                padding: 0,
-                margin: 0,
-            }
-            : { display: 'contents' };
-    };
-    ComponentBase.prototype.componentDidMount = function () {
+var ComponentBase = (0, react_1.forwardRef)(function (props, ref) {
+    var _a = props.templateProps, templateProps = _a === void 0 ? [] : _a, _b = props.defaults, defaults = _b === void 0 ? {} : _b, _c = props.expectedChildren, expectedChildren = _c === void 0 ? {} : _c, _d = props.isPortalComponent, isPortalComponent = _d === void 0 ? false : _d, _e = props.useRequestAnimationFrameFlag, useRequestAnimationFrameFlag = _e === void 0 ? false : _e, _f = props.subscribableOptions, subscribableOptions = _f === void 0 ? [] : _f, WidgetClass = props.WidgetClass, _g = props.independentEvents, independentEvents = _g === void 0 ? [] : _g, renderChildren = props.renderChildren, _h = props.beforeCreateWidget, beforeCreateWidget = _h === void 0 ? function () { return undefined; } : _h, _j = props.afterCreateWidget, afterCreateWidget = _j === void 0 ? function () { return undefined; } : _j;
+    var _k = __read((0, react_1.useState)(0), 2), setForceUpdateToken = _k[1];
+    var removalLocker = (0, react_1.useContext)(helpers_1.RemovalLockerContext);
+    var restoreParentLink = (0, react_1.useContext)(helpers_1.RestoreTreeContext);
+    var instance = (0, react_1.useRef)();
+    var element = (0, react_1.useRef)();
+    var portalContainer = (0, react_1.useRef)();
+    var useDeferUpdateForTemplates = (0, react_1.useRef)(false);
+    var guardsUpdateScheduled = (0, react_1.useRef)(false);
+    var childElementsDetached = (0, react_1.useRef)(false);
+    var optionsManager = (0, react_1.useRef)(new options_manager_1.OptionsManager());
+    var childNodes = (0, react_1.useRef)();
+    var createDXTemplates = (0, react_1.useRef)();
+    var clearInstantiationModels = (0, react_1.useRef)();
+    var updateTemplates = (0, react_1.useRef)();
+    var prevPropsRef = (0, react_1.useRef)();
+    var restoreTree = (0, react_1.useCallback)(function () {
         var _a;
         var _b;
-        var style = this.props.style;
-        if ((_b = this._childNodes) === null || _b === void 0 ? void 0 : _b.length) {
-            (_a = this._element).append.apply(_a, __spreadArray([], __read(this._childNodes)));
-        }
-        else if (this._element.childNodes.length) {
-            this._childNodes = Array.from(this._element.childNodes);
+        if (((_b = childNodes.current) === null || _b === void 0 ? void 0 : _b.length) && element.current) {
+            (_a = element.current).append.apply(_a, __spreadArray([], __read(childNodes.current), false));
+            childElementsDetached.current = false;
         }
-        this._updateCssClasses(null, this.props);
-        if (style) {
-            this._setInlineStyles(style);
-        }
-    };
-    ComponentBase.prototype.componentDidUpdate = function (prevProps) {
-        var _a;
-        this._updateCssClasses(prevProps, this.props);
-        var config = this._getConfig();
-        var templateOptions = this._optionsManager.getTemplateOptions(config);
-        var dxTemplates = ((_a = this._createDXTemplates) === null || _a === void 0 ? void 0 : _a.call(this, templateOptions)) || {};
-        this._optionsManager.update(config, dxTemplates);
-        this._scheduleTemplatesUpdate();
-    };
-    ComponentBase.prototype.componentWillUnmount = function () {
-        var _a;
-        this._lockParentOnRemoved();
-        if (this._instance) {
-            var dxRemoveArgs = { isUnmounting: true };
-            (_a = this._childNodes) === null || _a === void 0 ? void 0 : _a.forEach(function (child) { var _a; return (_a = child.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(child); });
-            events.triggerHandler(this._element, DX_REMOVE_EVENT, dxRemoveArgs);
-            this._instance.dispose();
+        if (restoreParentLink && element.current && !element.current.isConnected) {
+            restoreParentLink();
         }
-        this._optionsManager.dispose();
-        this._unlockParentOnRemoved();
-    };
-    ComponentBase.prototype._createWidget = function (element) {
+    }, [
+        childNodes.current,
+        element.current,
+        childElementsDetached.current,
+        restoreParentLink,
+    ]);
+    var updateCssClasses = (0, react_1.useCallback)(function (prevProps, newProps) {
         var _a, _b;
-        element = element || this._element;
-        var config = this._getConfig();
-        var options = __assign({ templatesRenderAsynchronously: true }, this._optionsManager.getInitialOptions(config));
-        var templateOptions = this._optionsManager.getTemplateOptions(config);
-        var dxTemplates = (_a = this._createDXTemplates) === null || _a === void 0 ? void 0 : _a.call(this, templateOptions);
-        if (dxTemplates && Object.keys(dxTemplates).length) {
-            options = __assign(__assign({}, options), { integrationOptions: {
-                    templates: dxTemplates,
-                } });
+        var _c, _d;
+        var prevClassName = prevProps ? (0, widget_config_1.getClassName)(prevProps) : undefined;
+        var newClassName = (0, widget_config_1.getClassName)(newProps);
+        if (prevClassName === newClassName) {
+            return;
         }
-        (_b = this._clearInstantiationModels) === null || _b === void 0 ? void 0 : _b.call(this);
-        this._instance = new this._WidgetClass(element, options);
-        if (!this.useRequestAnimationFrameFlag) {
-            this.useDeferUpdateForTemplates = this._instance.option('integrationOptions.useDeferUpdateForTemplates');
+        if (prevClassName) {
+            var classNames = prevClassName.split(' ').filter(function (c) { return c; });
+            if (classNames.length) {
+                (_c = element.current) === null || _c === void 0 ? void 0 : (_a = _c.classList).remove.apply(_a, __spreadArray([], __read(classNames), false));
+            }
         }
-        this._optionsManager.setInstance(this._instance, config, this.subscribableOptions, this.independentEvents);
-        this._instance.on('optionChanged', this._optionsManager.onOptionChanged);
-    };
-    ComponentBase.prototype._scheduleTemplatesUpdate = function () {
-        var _this = this;
-        if (this.guardsUpdateScheduled) {
-            return;
+        if (newClassName) {
+            var classNames = newClassName.split(' ').filter(function (c) { return c; });
+            if (classNames.length) {
+                (_d = element.current) === null || _d === void 0 ? void 0 : (_b = _d.classList).add.apply(_b, __spreadArray([], __read(classNames), false));
+            }
         }
-        this.guardsUpdateScheduled = true;
-        var updateFunc = this.useDeferUpdateForTemplates ? common_1.deferUpdate : frame_1.requestAnimationFrame;
-        updateFunc(function () {
-            var _a;
-            _this.guardsUpdateScheduled = false;
-            (_a = _this._updateTemplates) === null || _a === void 0 ? void 0 : _a.call(_this, function () { return options_manager_1.scheduleGuards(); });
-        });
-        options_manager_1.unscheduleGuards();
-    };
-    ComponentBase.prototype._getConfig = function () {
-        return tree_1.buildConfigTree({
-            templates: this._templateProps,
-            initialValuesProps: this._defaults,
-            predefinedValuesProps: {},
-            expectedChildren: this._expectedChildren,
-        }, this.props);
-    };
-    ComponentBase.prototype._getElementProps = function () {
-        var _this = this;
+    }, [element.current]);
+    var setInlineStyles = (0, react_1.useCallback)(function (styles) {
+        if (element.current) {
+            var el_1 = element.current;
+            Object.entries(styles).forEach(function (_a) {
+                var _b = __read(_a, 2), name = _b[0], value = _b[1];
+                el_1.style[name] = value;
+            });
+        }
+    }, [element.current]);
+    var getConfig = (0, react_1.useCallback)(function () { return (0, tree_1.buildConfigTree)({
+        templates: templateProps,
+        initialValuesProps: defaults,
+        predefinedValuesProps: {},
+        expectedChildren: expectedChildren,
+    }, props); }, [
+        templateProps,
+        defaults,
+        expectedChildren,
+        props,
+    ]);
+    var setTemplateManagerHooks = (0, react_1.useCallback)(function (_a) {
+        var createDXTemplatesFn = _a.createDXTemplates, clearInstantiationModelsFn = _a.clearInstantiationModels, updateTemplatesFn = _a.updateTemplates;
+        createDXTemplates.current = createDXTemplatesFn;
+        clearInstantiationModels.current = clearInstantiationModelsFn;
+        updateTemplates.current = updateTemplatesFn;
+    }, [
+        createDXTemplates.current,
+        clearInstantiationModels.current,
+        updateTemplates.current,
+    ]);
+    var getElementProps = (0, react_1.useCallback)(function () {
         var elementProps = {
-            ref: function (element) { _this._element = element; },
+            ref: function (el) {
+                if (el) {
+                    element.current = el;
+                }
+            },
         };
         widget_config_1.elementPropNames.forEach(function (name) {
-            var props = _this.props;
             if (name in props) {
                 elementProps[name] = props[name];
             }
         });
         return elementProps;
-    };
-    ComponentBase.prototype._setInlineStyles = function (styles) {
-        var _this = this;
-        Object.entries(styles).forEach(function (_a) {
-            var _b = __read(_a, 2), name = _b[0], value = _b[1];
-            _this._element.style[name] = value;
+    }, [element.current]);
+    var scheduleTemplatesUpdate = (0, react_1.useCallback)(function () {
+        if (guardsUpdateScheduled.current) {
+            return;
+        }
+        guardsUpdateScheduled.current = true;
+        var updateFunc = useDeferUpdateForTemplates.current ? common_1.deferUpdate : frame_1.requestAnimationFrame;
+        updateFunc(function () {
+            var _a;
+            guardsUpdateScheduled.current = false;
+            (_a = updateTemplates.current) === null || _a === void 0 ? void 0 : _a.call(updateTemplates, function () { return (0, options_manager_1.scheduleGuards)(); });
         });
-    };
-    ComponentBase.prototype._updateCssClasses = function (prevProps, newProps) {
+        (0, options_manager_1.unscheduleGuards)();
+    }, [
+        guardsUpdateScheduled.current,
+        useDeferUpdateForTemplates.current,
+        updateTemplates.current,
+    ]);
+    var createWidget = (0, react_1.useCallback)(function (el) {
         var _a, _b;
-        var prevClassName = prevProps ? widget_config_1.getClassName(prevProps) : undefined;
-        var newClassName = widget_config_1.getClassName(newProps);
-        if (prevClassName === newClassName) {
+        beforeCreateWidget();
+        el = el || element.current;
+        var config = getConfig();
+        var options = __assign({ templatesRenderAsynchronously: true }, optionsManager.current.getInitialOptions(config));
+        var templateOptions = optionsManager.current.getTemplateOptions(config);
+        var dxTemplates = (_a = createDXTemplates.current) === null || _a === void 0 ? void 0 : _a.call(createDXTemplates, templateOptions);
+        if (dxTemplates && Object.keys(dxTemplates).length) {
+            options = __assign(__assign({}, options), { integrationOptions: {
+                    templates: dxTemplates,
+                } });
+        }
+        (_b = clearInstantiationModels.current) === null || _b === void 0 ? void 0 : _b.call(clearInstantiationModels);
+        instance.current = new WidgetClass(el, options);
+        if (!useRequestAnimationFrameFlag) {
+            useDeferUpdateForTemplates.current = instance.current.option('integrationOptions.useDeferUpdateForTemplates');
+        }
+        optionsManager.current.setInstance(instance.current, config, subscribableOptions, independentEvents);
+        instance.current.on('optionChanged', optionsManager.current.onOptionChanged);
+        afterCreateWidget();
+    }, [
+        beforeCreateWidget,
+        afterCreateWidget,
+        element.current,
+        optionsManager.current,
+        createDXTemplates.current,
+        clearInstantiationModels.current,
+        WidgetClass,
+        useRequestAnimationFrameFlag,
+        useDeferUpdateForTemplates.current,
+        instance.current,
+        subscribableOptions,
+        independentEvents,
+        getConfig,
+    ]);
+    var onComponentUpdated = (0, react_1.useCallback)(function () {
+        var _a, _b;
+        if (!((_a = optionsManager.current) === null || _a === void 0 ? void 0 : _a.isInstanceSet)) {
             return;
         }
-        if (prevClassName) {
-            var classNames = prevClassName.split(' ').filter(function (c) { return c; });
-            if (classNames.length) {
-                (_a = this._element.classList).remove.apply(_a, __spreadArray([], __read(classNames)));
-            }
+        updateCssClasses(prevPropsRef.current, props);
+        var config = getConfig();
+        var templateOptions = optionsManager.current.getTemplateOptions(config);
+        var dxTemplates = ((_b = createDXTemplates.current) === null || _b === void 0 ? void 0 : _b.call(createDXTemplates, templateOptions)) || {};
+        optionsManager.current.update(config, dxTemplates);
+        scheduleTemplatesUpdate();
+        prevPropsRef.current = props;
+    }, [
+        optionsManager.current,
+        prevPropsRef.current,
+        createDXTemplates.current,
+        scheduleTemplatesUpdate,
+        updateCssClasses,
+        getConfig,
+        props,
+    ]);
+    var onComponentMounted = (0, react_1.useCallback)(function () {
+        var _a, _b;
+        var style = props.style;
+        if (childElementsDetached.current) {
+            restoreTree();
         }
-        if (newClassName) {
-            var classNames = newClassName.split(' ').filter(function (c) { return c; });
-            if (classNames.length) {
-                (_b = this._element.classList).add.apply(_b, __spreadArray([], __read(classNames)));
-            }
+        else if ((_a = element.current) === null || _a === void 0 ? void 0 : _a.childNodes.length) {
+            childNodes.current = Array.from((_b = element.current) === null || _b === void 0 ? void 0 : _b.childNodes);
         }
-    };
-    ComponentBase.prototype._lockParentOnRemoved = function () {
-        var _a;
-        (_a = this.context) === null || _a === void 0 ? void 0 : _a.lock();
-    };
-    ComponentBase.prototype._unlockParentOnRemoved = function () {
+        updateCssClasses(undefined, props);
+        if (style) {
+            setInlineStyles(style);
+        }
+        prevPropsRef.current = props;
+    }, [
+        childNodes.current,
+        element.current,
+        childElementsDetached.current,
+        updateCssClasses,
+        setInlineStyles,
+        props,
+    ]);
+    var onComponentUnmounted = (0, react_1.useCallback)(function () {
         var _a;
-        (_a = this.context) === null || _a === void 0 ? void 0 : _a.unlock();
-    };
-    ComponentBase.prototype._setTemplateManagerHooks = function (_a) {
-        var createDXTemplates = _a.createDXTemplates, clearInstantiationModels = _a.clearInstantiationModels, updateTemplates = _a.updateTemplates;
-        this._createDXTemplates = createDXTemplates;
-        this._clearInstantiationModels = clearInstantiationModels;
-        this._updateTemplates = updateTemplates;
-    };
-    ComponentBase.prototype.renderChildren = function () {
+        removalLocker === null || removalLocker === void 0 ? void 0 : removalLocker.lock();
+        if (instance.current) {
+            var dxRemoveArgs = { isUnmounting: true };
+            (_a = childNodes.current) === null || _a === void 0 ? void 0 : _a.forEach(function (child) { var _a; return (_a = child.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(child); });
+            childElementsDetached.current = true;
+            if (element.current) {
+                events.triggerHandler(element.current, DX_REMOVE_EVENT, dxRemoveArgs);
+            }
+            instance.current.dispose();
+        }
+        optionsManager.current.dispose();
+        removalLocker === null || removalLocker === void 0 ? void 0 : removalLocker.unlock();
+    }, [
+        removalLocker,
+        instance.current,
+        childNodes.current,
+        element.current,
+        optionsManager.current,
+        childElementsDetached.current,
+    ]);
+    (0, react_1.useLayoutEffect)(function () {
+        onComponentMounted();
+        return function () {
+            onComponentUnmounted();
+        };
+    }, []);
+    (0, react_1.useLayoutEffect)(function () {
+        onComponentUpdated();
+    });
+    (0, react_1.useImperativeHandle)(ref, function () { return ({
+        getInstance: function () {
+            return instance.current;
+        },
+        getElement: function () {
+            return element.current;
+        },
+        createWidget: function (el) {
+            createWidget(el);
+        },
+    }); }, [instance.current, element.current, createWidget]);
+    var _renderChildren = (0, react_1.useCallback)(function () {
+        if (renderChildren) {
+            return renderChildren();
+        }
         // @ts-expect-error TS2339
-        var children = this.props.children;
+        var children = props.children;
         return children;
-    };
-    ComponentBase.prototype.renderContent = function () {
-        var _this = this;
+    }, [props, renderChildren]);
+    var renderPortal = (0, react_1.useCallback)(function () { return portalContainer.current && (0, react_dom_1.createPortal)(_renderChildren(), portalContainer.current); }, [portalContainer.current, _renderChildren]);
+    var renderContent = (0, react_1.useCallback)(function () {
         // @ts-expect-error TS2339
-        var children = this.props.children;
-        return this.isPortalComponent && children
+        var children = props.children;
+        return isPortalComponent && children
             ? React.createElement('div', {
                 ref: function (node) {
-                    if (node && _this.portalContainer !== node) {
-                        _this.portalContainer = node;
-                        _this.forceUpdate();
+                    if (node && portalContainer.current !== node) {
+                        portalContainer.current = node;
+                        setForceUpdateToken(Math.random());
                     }
                 },
-                style: ComponentBase.displayContentsStyle(),
+                style: { display: 'contents' },
             })
-            : this.renderChildren();
-    };
-    ComponentBase.prototype.renderPortal = function () {
-        return this.portalContainer && react_dom_1.createPortal(this.renderChildren(), this.portalContainer);
-    };
-    ComponentBase.prototype.render = function () {
-        return React.createElement(React.Fragment, {}, React.createElement('div', this._getElementProps(), this.renderContent(), React.createElement(template_manager_1.TemplateManager, {
-            init: this._setTemplateManagerHooks,
-        })), this.isPortalComponent && this.renderPortal());
-    };
-    ComponentBase.contextType = helpers_1.RemovalLockerContext;
-    return ComponentBase;
-}(React.PureComponent));
+            : _renderChildren();
+    }, [
+        props,
+        isPortalComponent,
+        portalContainer.current,
+        _renderChildren,
+    ]);
+    return React.createElement(helpers_1.RestoreTreeContext.Provider, {
+        value: restoreTree,
+    }, React.createElement('div', getElementProps(), renderContent(), React.createElement(template_manager_1.TemplateManager, {
+        init: setTemplateManagerHooks,
+    })), isPortalComponent && renderPortal());
+});
 exports.ComponentBase = ComponentBase;

package/cjs/core/component.d.ts

@@ -1,7 +1,7 @@
 /*!
  * devextreme-react
- * Version: 23.2.6
- * Build date: Wed May 01 2024
+ * Version: 24.1.2-beta
+ * Build date: Mon May 13 2024
  *
  * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
  *
@@ -11,15 +11,28 @@
  * https://github.com/DevExpress/devextreme-react
  */
 
-import { ComponentBase, IHtmlOptions } from './component-base';
-declare class Component<P extends IHtmlOptions> extends ComponentBase<P> {
-    private _extensionCreators;
-    constructor(props: P);
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    clearExtensions(): void;
-    protected renderChildren(): Record<string, unknown>[] | null | undefined;
-    private _registerExtension;
-    private _createExtensions;
+import * as React from 'react';
+import { ReactElement } from 'react';
+import { IHtmlOptions, ComponentBaseRef } from './component-base';
+import { IElementDescriptor, IExpectedChild } from './configuration/react/element';
+import { ITemplateMeta } from './template';
+interface ComponentProps {
+    WidgetClass?: any;
+    isPortalComponent?: boolean;
+    defaults?: Record<string, string>;
+    templateProps?: ITemplateMeta[];
+    expectedChildren?: Record<string, IExpectedChild>;
+    subscribableOptions?: string[];
+    independentEvents?: string[];
+    useRequestAnimationFrameFlag?: boolean;
+    clearExtensions?: () => void;
+    beforeCreateWidget?: (element?: Element) => void;
+    afterCreateWidget?: (element?: Element) => void;
 }
-export { Component, IHtmlOptions, };
+type ComponentRef = ComponentBaseRef & {
+    clearExtensions: () => void;
+};
+declare const Component: <P extends IHtmlOptions>(props: P & ComponentProps & {
+    ref?: React.Ref<ComponentRef> | undefined;
+}) => ReactElement | null;
+export { Component, ComponentProps, IHtmlOptions, IElementDescriptor, ComponentRef, };