devextreme-react 23.2.6 → 24.1.2-beta

package/esm/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
  *
@@ -11,21 +11,6 @@
  * https://github.com/DevExpress/devextreme-react
  */
 
-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++) {
@@ -53,210 +38,297 @@ 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));
 };
-import * as events from 'devextreme/events';
 import * as React from 'react';
-import { createPortal } from 'react-dom';
+import * as events from 'devextreme/events';
+import { useContext, useImperativeHandle, forwardRef, useRef, useLayoutEffect, useCallback, useState, } from 'react';
 import { requestAnimationFrame } from 'devextreme/animation/frame';
 import { deferUpdate } from 'devextreme/core/utils/common';
-import { TemplateManager } from './template-manager';
+import { createPortal } from 'react-dom';
+import { RemovalLockerContext, RestoreTreeContext } from './helpers';
 import { OptionsManager, scheduleGuards, unscheduleGuards } from './options-manager';
 import { elementPropNames, getClassName } from './widget-config';
 import { buildConfigTree } from './configuration/react/tree';
-import { isIE } from './configuration/utils';
-import { RemovalLockerContext } from './helpers';
+import { TemplateManager } from './template-manager';
 var DX_REMOVE_EVENT = 'dxremove';
-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 OptionsManager();
-        return _this;
-    }
-    ComponentBase.displayContentsStyle = function () {
-        return isIE()
-            ? {
-                width: '100%',
-                height: '100%',
-                padding: 0,
-                margin: 0,
-            }
-            : { display: 'contents' };
-    };
-    ComponentBase.prototype.componentDidMount = function () {
+var ComponentBase = 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(useState(0), 2), setForceUpdateToken = _k[1];
+    var removalLocker = useContext(RemovalLockerContext);
+    var restoreParentLink = useContext(RestoreTreeContext);
+    var instance = useRef();
+    var element = useRef();
+    var portalContainer = useRef();
+    var useDeferUpdateForTemplates = useRef(false);
+    var guardsUpdateScheduled = useRef(false);
+    var childElementsDetached = useRef(false);
+    var optionsManager = useRef(new OptionsManager());
+    var childNodes = useRef();
+    var createDXTemplates = useRef();
+    var clearInstantiationModels = useRef();
+    var updateTemplates = useRef();
+    var prevPropsRef = useRef();
+    var restoreTree = 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);
+        if (restoreParentLink && element.current && !element.current.isConnected) {
+            restoreParentLink();
         }
-    };
-    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();
-        }
-        this._optionsManager.dispose();
-        this._unlockParentOnRemoved();
-    };
-    ComponentBase.prototype._createWidget = function (element) {
+    }, [
+        childNodes.current,
+        element.current,
+        childElementsDetached.current,
+        restoreParentLink,
+    ]);
+    var updateCssClasses = 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 ? getClassName(prevProps) : undefined;
+        var newClassName = 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 ? deferUpdate : requestAnimationFrame;
-        updateFunc(function () {
-            var _a;
-            _this.guardsUpdateScheduled = false;
-            (_a = _this._updateTemplates) === null || _a === void 0 ? void 0 : _a.call(_this, function () { return scheduleGuards(); });
-        });
-        unscheduleGuards();
-    };
-    ComponentBase.prototype._getConfig = function () {
-        return buildConfigTree({
-            templates: this._templateProps,
-            initialValuesProps: this._defaults,
-            predefinedValuesProps: {},
-            expectedChildren: this._expectedChildren,
-        }, this.props);
-    };
-    ComponentBase.prototype._getElementProps = function () {
-        var _this = this;
+    }, [element.current]);
+    var setInlineStyles = 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 = useCallback(function () { return buildConfigTree({
+        templates: templateProps,
+        initialValuesProps: defaults,
+        predefinedValuesProps: {},
+        expectedChildren: expectedChildren,
+    }, props); }, [
+        templateProps,
+        defaults,
+        expectedChildren,
+        props,
+    ]);
+    var setTemplateManagerHooks = 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 = useCallback(function () {
         var elementProps = {
-            ref: function (element) { _this._element = element; },
+            ref: function (el) {
+                if (el) {
+                    element.current = el;
+                }
+            },
         };
         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 = useCallback(function () {
+        if (guardsUpdateScheduled.current) {
+            return;
+        }
+        guardsUpdateScheduled.current = true;
+        var updateFunc = useDeferUpdateForTemplates.current ? deferUpdate : requestAnimationFrame;
+        updateFunc(function () {
+            var _a;
+            guardsUpdateScheduled.current = false;
+            (_a = updateTemplates.current) === null || _a === void 0 ? void 0 : _a.call(updateTemplates, function () { return scheduleGuards(); });
         });
-    };
-    ComponentBase.prototype._updateCssClasses = function (prevProps, newProps) {
+        unscheduleGuards();
+    }, [
+        guardsUpdateScheduled.current,
+        useDeferUpdateForTemplates.current,
+        updateTemplates.current,
+    ]);
+    var createWidget = useCallback(function (el) {
         var _a, _b;
-        var prevClassName = prevProps ? getClassName(prevProps) : undefined;
-        var newClassName = 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 = 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 = 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 = 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,
+    ]);
+    useLayoutEffect(function () {
+        onComponentMounted();
+        return function () {
+            onComponentUnmounted();
+        };
+    }, []);
+    useLayoutEffect(function () {
+        onComponentUpdated();
+    });
+    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 = 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 = useCallback(function () { return portalContainer.current && createPortal(_renderChildren(), portalContainer.current); }, [portalContainer.current, _renderChildren]);
+    var renderContent = 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 && createPortal(this.renderChildren(), this.portalContainer);
-    };
-    ComponentBase.prototype.render = function () {
-        return React.createElement(React.Fragment, {}, React.createElement('div', this._getElementProps(), this.renderContent(), React.createElement(TemplateManager, {
-            init: this._setTemplateManagerHooks,
-        })), this.isPortalComponent && this.renderPortal());
-    };
-    ComponentBase.contextType = RemovalLockerContext;
-    return ComponentBase;
-}(React.PureComponent));
+            : _renderChildren();
+    }, [
+        props,
+        isPortalComponent,
+        portalContainer.current,
+        _renderChildren,
+    ]);
+    return React.createElement(RestoreTreeContext.Provider, {
+        value: restoreTree,
+    }, React.createElement('div', getElementProps(), renderContent(), React.createElement(TemplateManager, {
+        init: setTemplateManagerHooks,
+    })), isPortalComponent && renderPortal());
+});
 export { ComponentBase, DX_REMOVE_EVENT, };

package/esm/core/component.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
  *
@@ -11,63 +11,74 @@
  * https://github.com/DevExpress/devextreme-react
  */
 
-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);
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
     };
-    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 __());
-    };
-})();
+    return __assign.apply(this, arguments);
+};
 import * as React from 'react';
+import { useImperativeHandle, forwardRef, useRef, useLayoutEffect, useCallback, } from 'react';
 import { ComponentBase } from './component-base';
-import { ExtensionComponent } from './extension-component';
-var Component = /** @class */ (function (_super) {
-    __extends(Component, _super);
-    function Component(props) {
-        var _this = _super.call(this, props) || this;
-        _this._extensionCreators = [];
-        _this._registerExtension = _this._registerExtension.bind(_this);
-        return _this;
-    }
-    Component.prototype.componentDidMount = function () {
-        _super.prototype.componentDidMount.call(this);
-        this._createWidget();
-        this._createExtensions();
-    };
-    Component.prototype.componentWillUnmount = function () {
-        _super.prototype.componentWillUnmount.call(this);
-        this.clearExtensions();
-    };
-    Component.prototype.clearExtensions = function () {
-        this._extensionCreators = [];
-    };
-    // @ts-expect-error TS2416
-    Component.prototype.renderChildren = function () {
-        var _this = this;
-        return React.Children.map(
-        // @ts-expect-error TS2339
-        this.props.children, function (child) {
-            if (child && Object.prototype.isPrototypeOf.call(ExtensionComponent, child.type)) {
-                return React.cloneElement(child, { onMounted: _this._registerExtension });
-            }
-            return child;
-        });
-    };
-    Component.prototype._registerExtension = function (creator) {
-        this._extensionCreators.push(creator);
-    };
-    Component.prototype._createExtensions = function () {
-        var _this = this;
-        this._extensionCreators.forEach(function (creator) { return creator(_this._element); });
-    };
-    return Component;
-}(ComponentBase));
+import { elementIsExtension } from './extension-component';
+var Component = forwardRef(function (props, ref) {
+    var componentBaseRef = useRef(null);
+    var extensionCreators = useRef([]);
+    var registerExtension = useCallback(function (creator) {
+        extensionCreators.current.push(creator);
+    }, [extensionCreators.current]);
+    var createExtensions = useCallback(function () {
+        extensionCreators.current.forEach(function (creator) { var _a; return creator((_a = componentBaseRef.current) === null || _a === void 0 ? void 0 : _a.getElement()); });
+    }, [extensionCreators.current, componentBaseRef.current]);
+    var renderChildren = useCallback(function () { return React.Children.map(
+    // @ts-expect-error TS2339
+    props.children, function (child) {
+        if (child && elementIsExtension(child)) {
+            return React.cloneElement(child, { onMounted: registerExtension });
+        }
+        return child;
+    }); }, [props, registerExtension]);
+    var createWidget = useCallback(function (el) {
+        var _a;
+        (_a = componentBaseRef.current) === null || _a === void 0 ? void 0 : _a.createWidget(el);
+    }, [componentBaseRef.current]);
+    var clearExtensions = useCallback(function () {
+        if (props.clearExtensions) {
+            props.clearExtensions();
+        }
+        extensionCreators.current = [];
+    }, [
+        extensionCreators.current,
+        props.clearExtensions,
+    ]);
+    useLayoutEffect(function () {
+        createWidget();
+        createExtensions();
+        return function () {
+            clearExtensions();
+        };
+    }, []);
+    useImperativeHandle(ref, function () { return ({
+        getInstance: function () {
+            var _a;
+            return (_a = componentBaseRef.current) === null || _a === void 0 ? void 0 : _a.getInstance();
+        },
+        getElement: function () {
+            var _a;
+            return (_a = componentBaseRef.current) === null || _a === void 0 ? void 0 : _a.getElement();
+        },
+        createWidget: function (el) {
+            createWidget(el);
+        },
+        clearExtensions: function () {
+            clearExtensions();
+        },
+    }); }, [componentBaseRef.current, createWidget, clearExtensions]);
+    return (React.createElement(ComponentBase, __assign({ ref: componentBaseRef, renderChildren: renderChildren }, props)));
+});
 export { Component, };

package/esm/core/config.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
  *