devextreme-react 23.2.1-alpha-23255-1813 → 23.2.2-beta

package/cjs/core/configuration/utils.js

@@ -1,7 +1,7 @@
 /*!
  * devextreme-react
- * Version: 23.2.1-alpha-23255-1813
- * Build date: Tue Sep 12 2023
+ * Version: 23.2.2-beta
+ * Build date: Fri Nov 10 2023
  *
  * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
  *

package/cjs/core/extension-component.d.ts

@@ -1,7 +1,7 @@
 /*!
  * devextreme-react
- * Version: 23.2.1-alpha-23255-1813
- * Build date: Tue Sep 12 2023
+ * Version: 23.2.2-beta
+ * Build date: Fri Nov 10 2023
  *
  * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
  *

package/cjs/core/extension-component.js

@@ -1,7 +1,7 @@
 /*!
  * devextreme-react
- * Version: 23.2.1-alpha-23255-1813
- * Build date: Tue Sep 12 2023
+ * Version: 23.2.2-beta
+ * Build date: Fri Nov 10 2023
  *
  * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
  *

package/cjs/core/helpers.d.ts

@@ -1,7 +1,7 @@
 /*!
  * devextreme-react
- * Version: 23.2.1-alpha-23255-1813
- * Build date: Tue Sep 12 2023
+ * Version: 23.2.2-beta
+ * Build date: Fri Nov 10 2023
  *
  * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
  *
@@ -11,9 +11,12 @@
  * https://github.com/DevExpress/devextreme-react
  */
 
+/// <reference types="react" />
+import { TemplateInstantiationModel, UpdateLocker } from './types';
+export declare const RemovalLockerContext: import("react").Context<UpdateLocker>;
 export declare function generateID(): string;
 export declare class DoubleKeyMap<TKey1, TKey2, TValue> {
-    private readonly _map;
+    private _map;
     set({ key1, key2 }: {
         key1: TKey1;
         key2: TKey2;
@@ -26,5 +29,13 @@ export declare class DoubleKeyMap<TKey1, TKey2, TValue> {
         key1: TKey1;
         key2: TKey2;
     }): void;
+    get empty(): boolean;
+    shallowCopy(): DoubleKeyMap<TKey1, TKey2, TValue>;
+    [Symbol.iterator](): Generator<[{
+        key1: TKey1;
+        key2: TKey2;
+    }, TValue]>;
+}
+export declare class TemplateInstantiationModels extends DoubleKeyMap<any, HTMLElement, TemplateInstantiationModel> {
 }
 export declare function capitalizeFirstLetter(text: string): string;

package/cjs/core/helpers.js

@@ -1,7 +1,7 @@
 /*!
  * devextreme-react
- * Version: 23.2.1-alpha-23255-1813
- * Build date: Tue Sep 12 2023
+ * Version: 23.2.2-beta
+ * Build date: Fri Nov 10 2023
  *
  * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
  *
@@ -12,10 +12,85 @@
  */
 
 "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 __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.capitalizeFirstLetter = exports.DoubleKeyMap = exports.generateID = void 0;
+exports.capitalizeFirstLetter = exports.TemplateInstantiationModels = exports.DoubleKeyMap = exports.generateID = exports.RemovalLockerContext = void 0;
+/* eslint-disable max-classes-per-file, no-restricted-syntax */
+var react_1 = require("react");
+exports.RemovalLockerContext = react_1.createContext({
+    lock: function () { return undefined; },
+    unlock: function () { return undefined; },
+});
 function generateID() {
-    return Math.random().toString(36).substr(2);
+    return Math.random().toString(36).substring(2);
 }
 exports.generateID = generateID;
 var DoubleKeyMap = /** @class */ (function () {
@@ -47,9 +122,85 @@ var DoubleKeyMap = /** @class */ (function () {
             this._map.delete(key1);
         }
     };
+    Object.defineProperty(DoubleKeyMap.prototype, "empty", {
+        get: function () {
+            return this._map.size === 0;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DoubleKeyMap.prototype.shallowCopy = function () {
+        var copy = new DoubleKeyMap();
+        copy._map = this._map;
+        return copy;
+    };
+    DoubleKeyMap.prototype[Symbol.iterator] = function () {
+        var _a, _b, _c, key1, innerMap, innerMap_1, innerMap_1_1, _d, key2, value, e_1_1, e_2_1;
+        var e_2, _e, e_1, _f;
+        return __generator(this, function (_g) {
+            switch (_g.label) {
+                case 0:
+                    _g.trys.push([0, 11, 12, 13]);
+                    _a = __values(this._map), _b = _a.next();
+                    _g.label = 1;
+                case 1:
+                    if (!!_b.done) return [3 /*break*/, 10];
+                    _c = __read(_b.value, 2), key1 = _c[0], innerMap = _c[1];
+                    _g.label = 2;
+                case 2:
+                    _g.trys.push([2, 7, 8, 9]);
+                    innerMap_1 = (e_1 = void 0, __values(innerMap)), innerMap_1_1 = innerMap_1.next();
+                    _g.label = 3;
+                case 3:
+                    if (!!innerMap_1_1.done) return [3 /*break*/, 6];
+                    _d = __read(innerMap_1_1.value, 2), key2 = _d[0], value = _d[1];
+                    return [4 /*yield*/, [{ key1: key1, key2: key2 }, value]];
+                case 4:
+                    _g.sent();
+                    _g.label = 5;
+                case 5:
+                    innerMap_1_1 = innerMap_1.next();
+                    return [3 /*break*/, 3];
+                case 6: return [3 /*break*/, 9];
+                case 7:
+                    e_1_1 = _g.sent();
+                    e_1 = { error: e_1_1 };
+                    return [3 /*break*/, 9];
+                case 8:
+                    try {
+                        if (innerMap_1_1 && !innerMap_1_1.done && (_f = innerMap_1.return)) _f.call(innerMap_1);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                    return [7 /*endfinally*/];
+                case 9:
+                    _b = _a.next();
+                    return [3 /*break*/, 1];
+                case 10: return [3 /*break*/, 13];
+                case 11:
+                    e_2_1 = _g.sent();
+                    e_2 = { error: e_2_1 };
+                    return [3 /*break*/, 13];
+                case 12:
+                    try {
+                        if (_b && !_b.done && (_e = _a.return)) _e.call(_a);
+                    }
+                    finally { if (e_2) throw e_2.error; }
+                    return [7 /*endfinally*/];
+                case 13: return [2 /*return*/];
+            }
+        });
+    };
     return DoubleKeyMap;
 }());
 exports.DoubleKeyMap = DoubleKeyMap;
+var TemplateInstantiationModels = /** @class */ (function (_super) {
+    __extends(TemplateInstantiationModels, _super);
+    function TemplateInstantiationModels() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return TemplateInstantiationModels;
+}(DoubleKeyMap));
+exports.TemplateInstantiationModels = TemplateInstantiationModels;
 function capitalizeFirstLetter(text) {
     if (text.length) {
         return "" + text[0].toUpperCase() + text.substr(1);

package/cjs/core/nested-option.d.ts

@@ -1,7 +1,7 @@
 /*!
  * devextreme-react
- * Version: 23.2.1-alpha-23255-1813
- * Build date: Tue Sep 12 2023
+ * Version: 23.2.2-beta
+ * Build date: Fri Nov 10 2023
  *
  * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
  *

package/cjs/core/nested-option.js

@@ -1,7 +1,7 @@
 /*!
  * devextreme-react
- * Version: 23.2.1-alpha-23255-1813
- * Build date: Tue Sep 12 2023
+ * Version: 23.2.2-beta
+ * Build date: Fri Nov 10 2023
  *
  * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
  *

package/cjs/core/options-manager.d.ts

@@ -1,7 +1,7 @@
 /*!
  * devextreme-react
- * Version: 23.2.1-alpha-23255-1813
- * Build date: Tue Sep 12 2023
+ * Version: 23.2.2-beta
+ * Build date: Fri Nov 10 2023
  *
  * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
  *
@@ -11,22 +11,23 @@
  * https://github.com/DevExpress/devextreme-react
  */
 
-import type TemplatesManager from './templates-manager';
-import type { IConfigNode } from './configuration/config-node';
+import type { IConfigNode, ITemplate } from './configuration/config-node';
+import { DXTemplateCollection } from './types';
 export declare function unscheduleGuards(): void;
 export declare function scheduleGuards(): void;
 declare class OptionsManager {
     private readonly guards;
-    private readonly templatesManager;
     private instance;
     private isUpdating;
     private currentConfig;
     private subscribableOptions;
     private independentEvents;
-    constructor(templatesManager: TemplatesManager);
+    constructor();
     setInstance(instance: unknown, config: IConfigNode, subscribableOptions: string[], independentEvents: string[]): void;
     getInitialOptions(rootNode: IConfigNode): Record<string, unknown>;
+    getTemplateOptions(rootNode: IConfigNode): Record<string, ITemplate>;
     update(config: IConfigNode): void;
+    updateTemplates(dxtemplates: DXTemplateCollection): void;
     onOptionChanged(e: {
         name: string;
         fullName: string;

package/cjs/core/options-manager.js

@@ -1,7 +1,7 @@
 /*!
  * devextreme-react
- * Version: 23.2.1-alpha-23255-1813
- * Build date: Tue Sep 12 2023
+ * Version: 23.2.2-beta
+ * Build date: Fri Nov 10 2023
  *
  * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
  *
@@ -12,6 +12,27 @@
  */
 
 "use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OptionsManager = exports.scheduleGuards = exports.unscheduleGuards = void 0;
 /* eslint-disable no-restricted-globals */
@@ -33,10 +54,9 @@ function scheduleGuards() {
 }
 exports.scheduleGuards = scheduleGuards;
 var OptionsManager = /** @class */ (function () {
-    function OptionsManager(templatesManager) {
+    function OptionsManager() {
         this.guards = {};
         this.isUpdating = false;
-        this.templatesManager = templatesManager;
         optionsManagers.add(this);
         this.onOptionChanged = this.onOptionChanged.bind(this);
         this.wrapOptionValue = this.wrapOptionValue.bind(this);
@@ -50,20 +70,16 @@ var OptionsManager = /** @class */ (function () {
     OptionsManager.prototype.getInitialOptions = function (rootNode) {
         var _this = this;
         var config = tree_1.buildConfig(rootNode, false);
-        Object.keys(config.templates).forEach(function (key) {
-            _this.templatesManager.add(key, config.templates[key]);
-        });
         var options = {};
         Object.keys(config.options).forEach(function (key) {
             options[key] = _this.wrapOptionValue(key, config.options[key]);
         });
-        if (this.templatesManager.templatesCount > 0) {
-            options.integrationOptions = {
-                templates: this.templatesManager.templates,
-            };
-        }
         return options;
     };
+    OptionsManager.prototype.getTemplateOptions = function (rootNode) {
+        var config = tree_1.buildConfig(rootNode, false);
+        return config.templates;
+    };
     OptionsManager.prototype.update = function (config) {
         var _this = this;
         var changedOptions = [];
@@ -81,14 +97,6 @@ var OptionsManager = /** @class */ (function () {
         changes.removedOptions.forEach(function (optionName) {
             _this.resetOption(optionName);
         });
-        Object.keys(changes.templates).forEach(function (key) {
-            _this.templatesManager.add(key, changes.templates[key]);
-        });
-        if (this.templatesManager.templatesCount > 0) {
-            this.setValue('integrationOptions', {
-                templates: this.templatesManager.templates,
-            });
-        }
         Object.keys(changes.options).forEach(function (key) {
             _this.setValue(key, changes.options[key]);
         });
@@ -96,7 +104,7 @@ var OptionsManager = /** @class */ (function () {
         this.instance.off('optionChanged', optionChangedHandler);
         this.currentConfig = config;
         changedOptions.forEach(function (_a) {
-            var name = _a[0], value = _a[1];
+            var _b = __read(_a, 2), name = _b[0], value = _b[1];
             var currentPropValue = config.options[name];
             if (Object.prototype.hasOwnProperty.call(config.options, name)
                 && currentPropValue !== value) {
@@ -105,6 +113,13 @@ var OptionsManager = /** @class */ (function () {
         });
         this.instance.endUpdate();
     };
+    OptionsManager.prototype.updateTemplates = function (dxtemplates) {
+        if (Object.keys(dxtemplates).length > 0) {
+            this.setValue('integrationOptions', {
+                templates: dxtemplates,
+            });
+        }
+    };
     OptionsManager.prototype.onOptionChanged = function (e) {
         var _this = this;
         var _a;
@@ -191,7 +206,7 @@ var OptionsManager = /** @class */ (function () {
                     args[_i] = arguments[_i];
                 }
                 if (!_this.isUpdating || _this.isIndependentEvent(name)) {
-                    value.apply(void 0, args);
+                    value.apply(void 0, __spreadArray([], __read(args)));
                 }
             };
         }

package/cjs/core/template-manager.d.ts

@@ -0,0 +1,16 @@
+/*!
+ * devextreme-react
+ * Version: 23.2.2-beta
+ * Build date: Fri Nov 10 2023
+ *
+ * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
+ *
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file in the root of the project for details.
+ *
+ * https://github.com/DevExpress/devextreme-react
+ */
+
+import { FC } from 'react';
+import { TemplateManagerProps } from './types';
+export declare const TemplateManager: FC<TemplateManagerProps>;

package/cjs/core/template-manager.js

@@ -0,0 +1,180 @@
+/*!
+ * devextreme-react
+ * Version: 23.2.2-beta
+ * Build date: Fri Nov 10 2023
+ *
+ * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
+ *
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file in the root of the project for details.
+ *
+ * https://github.com/DevExpress/devextreme-react
+ */
+
+"use strict";
+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 __assign.apply(this, arguments);
+};
+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]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TemplateManager = void 0;
+var React = __importStar(require("react"));
+var events = __importStar(require("devextreme/events"));
+var react_1 = require("react");
+var template_wrapper_1 = require("./template-wrapper");
+var helpers_1 = require("./helpers");
+var component_base_1 = require("./component-base");
+var config_1 = require("./config");
+function normalizeProps(props) {
+    if (config_1.getOption('useLegacyTemplateEngine')) {
+        var model = props.data;
+        if (model && Object.prototype.hasOwnProperty.call(model, 'key')) {
+            model.dxkey = model.key;
+        }
+        return model;
+    }
+    return props;
+}
+var TemplateManager = function (_a) {
+    var init = _a.init;
+    var _b = __read(react_1.useState(new helpers_1.TemplateInstantiationModels()), 2), instantiationModels = _b[0], setInstantiationModels = _b[1];
+    var _c = __read(react_1.useState({}), 2), templateFactories = _c[0], setTemplateFactories = _c[1];
+    var _d = __read(react_1.useState(), 2), componentCallback = _d[0], setComponentCallback = _d[1];
+    var widgetId = react_1.useRef('');
+    var subscribeOnRemoval = react_1.useCallback(function (container, onRemoved) {
+        if (container.nodeType === Node.ELEMENT_NODE) {
+            events.on(container, component_base_1.DX_REMOVE_EVENT, onRemoved);
+        }
+    }, []);
+    var unsubscribeOnRemoval = react_1.useCallback(function (container, onRemoved) {
+        if (container.nodeType === Node.ELEMENT_NODE) {
+            events.off(container, component_base_1.DX_REMOVE_EVENT, onRemoved);
+        }
+    }, []);
+    var createMapKey = react_1.useCallback(function (key1, key2) { return ({ key1: key1, key2: key2 }); }, []);
+    var getRandomId = react_1.useCallback(function () { return "" + helpers_1.generateID() + helpers_1.generateID() + helpers_1.generateID(); }, []);
+    var getRenderFunc = react_1.useCallback(function (templateKey) { return function (_a) {
+        var data = _a.model, index = _a.index, container = _a.container, onRendered = _a.onRendered;
+        var key = createMapKey(data, container);
+        var onRemoved = function () {
+            setInstantiationModels(function (currentInstantiationModels) {
+                var template = currentInstantiationModels.get(key);
+                if (template) {
+                    currentInstantiationModels.delete(key);
+                    return currentInstantiationModels.shallowCopy();
+                }
+                return currentInstantiationModels;
+            });
+        };
+        var hostWidgetId = widgetId.current;
+        setInstantiationModels(function (currentInstantiationModels) {
+            currentInstantiationModels.set(key, {
+                templateKey: templateKey,
+                index: index,
+                componentKey: getRandomId(),
+                onRendered: function () {
+                    unsubscribeOnRemoval(container, onRemoved);
+                    if (hostWidgetId === widgetId.current) {
+                        onRendered === null || onRendered === void 0 ? void 0 : onRendered();
+                    }
+                },
+                onRemoved: onRemoved,
+            });
+            return currentInstantiationModels.shallowCopy();
+        });
+        return container;
+    }; }, [unsubscribeOnRemoval, createMapKey]);
+    react_1.useMemo(function () {
+        function getTemplateFunction(template) {
+            switch (template.type) {
+                case 'children': return function () { return template.content; };
+                case 'render': return function (props) {
+                    normalizeProps(props);
+                    return template.content(props.data, props.index);
+                };
+                case 'component': return function (props) {
+                    props = normalizeProps(props);
+                    return React.createElement.bind(null, template.content)(props);
+                };
+                default: return function () { return React.createElement(React.Fragment); };
+            }
+        }
+        function getDXTemplates(templateOptions, callback) {
+            var factories = Object.entries(templateOptions)
+                .reduce(function (res, _a) {
+                var _b;
+                var _c = __read(_a, 2), key = _c[0], template = _c[1];
+                return (__assign(__assign({}, res), (_b = {}, _b[key] = getTemplateFunction(template), _b)));
+            }, {});
+            setTemplateFactories(factories);
+            setComponentCallback(callback);
+            var dxTemplates = Object.keys(factories)
+                .reduce(function (templates, templateKey) {
+                templates[templateKey] = { render: getRenderFunc(templateKey) };
+                return templates;
+            }, {});
+            return dxTemplates;
+        }
+        function clearInstantiationModels() {
+            widgetId.current = getRandomId();
+            setInstantiationModels(new helpers_1.TemplateInstantiationModels());
+        }
+        init(getDXTemplates, clearInstantiationModels);
+    }, [init, getRenderFunc]);
+    react_1.useEffect(function () {
+        if (componentCallback) {
+            componentCallback();
+        }
+    }, []);
+    if (instantiationModels.empty) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null, Array.from(instantiationModels).map(function (_a) {
+        var _b = __read(_a, 2), _c = _b[0], data = _c.key1, container = _c.key2, _d = _b[1], index = _d.index, templateKey = _d.templateKey, componentKey = _d.componentKey, onRendered = _d.onRendered, onRemoved = _d.onRemoved;
+        subscribeOnRemoval(container, onRemoved);
+        return React.createElement(template_wrapper_1.TemplateWrapper, { key: componentKey, templateFactory: templateFactories[templateKey], data: data, index: index, container: container, onRemoved: onRemoved, onRendered: onRendered });
+    })));
+};
+exports.TemplateManager = TemplateManager;

package/cjs/core/template-wrapper.d.ts

@@ -1,7 +1,7 @@
 /*!
  * devextreme-react
- * Version: 23.2.1-alpha-23255-1813
- * Build date: Tue Sep 12 2023
+ * Version: 23.2.2-beta
+ * Build date: Fri Nov 10 2023
  *
  * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
  *
@@ -12,30 +12,5 @@
  */
 
 import * as React from 'react';
-interface ITemplateWrapperProps {
-    content: any;
-    container: Element;
-    onRemoved: () => void;
-    onDidMount?: () => void;
-    key: string;
-}
-interface ITemplateWrapperState {
-    removalListenerRequired: boolean;
-}
-declare type TemplateWrapperRenderer = () => TemplateWrapper;
-declare class TemplateWrapper extends React.PureComponent<ITemplateWrapperProps, ITemplateWrapperState> {
-    private readonly _removalListenerRef;
-    private element;
-    private hiddenElement;
-    constructor(props: ITemplateWrapperProps);
-    componentDidMount(): void;
-    componentDidUpdate(): void;
-    componentWillUnmount(): void;
-    private get _listenerElement();
-    private getPreviousSiblingNode;
-    private _subscribeOnRemove;
-    private _subscribeOnElementRemoval;
-    private _onDxRemove;
-    render(): React.ReactNode;
-}
-export { ITemplateWrapperProps, TemplateWrapper, TemplateWrapperRenderer, };
+import { TemplateWrapperProps } from './types';
+export declare const TemplateWrapper: React.NamedExoticComponent<TemplateWrapperProps>;