devextreme-react 26.1.2-beta → 26.1.3

package/esm/core/component-base.js

@@ -1,7 +1,7 @@
 /*!
  * devextreme-react
- * Version: 26.1.2-beta
- * Build date: Fri May 08 2026
+ * Version: 26.1.3
+ * Build date: Wed Jun 10 2026
  *
  * Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
  *
@@ -11,293 +11,293 @@
  * https://github.com/DevExpress/DevExtreme
  */
 
-import * as React from 'react';
-import * as events from 'devextreme/events';
-import { useContext, useMemo, useImperativeHandle, forwardRef, useRef, useLayoutEffect, useCallback, useState, } from 'react';
-import { requestAnimationFrame } from 'devextreme/animation/frame';
-import { deferUpdate } from 'devextreme/core/utils/common';
-import config from 'devextreme/core/config';
-import { createPortal } from 'react-dom';
-import { useOptionScanning } from './use-option-scanning';
-import { OptionsManager, scheduleGuards, unscheduleGuards } from './options-manager';
-import { elementPropNames, getClassName } from './widget-config';
-import { TemplateManager } from './template-manager';
-import { ElementType } from './configuration/react/element';
-import { NestedOptionContext, RemovalLockerContext, RestoreTreeContext, TemplateRenderingContext, } from './contexts';
-import { UNITLESS_NUMBERS_SET } from './const';
-const DX_REMOVE_EVENT = 'dxremove';
-config({
-    buyNowLink: 'https://go.devexpress.com/Licensing_Installer_Watermark_DevExtremeReact.aspx',
-    licensingDocLink: 'https://www.devexpress.com/go/Licensing_Documentation_DevExpress_React.aspx',
-});
-const ComponentBase = forwardRef((props, ref) => {
-    const { templateProps = [], defaults = {}, expectedChildren = {}, isPortalComponent = false, useRequestAnimationFrameFlag = false, subscribableOptions = [], WidgetClass, independentEvents = [], renderChildren, beforeCreateWidget = () => undefined, afterCreateWidget = () => undefined, } = props;
-    const [, setForceUpdateToken] = useState(Symbol('initial force update token'));
-    const removalLocker = useContext(RemovalLockerContext);
-    const restoreParentLink = useContext(RestoreTreeContext);
-    const restoreParentLinkRef = useRef(restoreParentLink);
-    const instance = useRef();
-    const element = useRef();
-    const portalContainer = useRef();
-    const useDeferUpdateForTemplates = useRef(false);
-    const guardsUpdateScheduled = useRef(false);
-    const childElementsDetached = useRef(false);
-    const shouldRestoreFocus = useRef(false);
-    const optionsManager = useRef(new OptionsManager());
-    const childNodes = useRef();
-    const createDXTemplates = useRef();
-    const clearInstantiationModels = useRef();
-    const updateTemplates = useRef();
-    const prevPropsRef = useRef();
-    const childrenContainerRef = useRef(null);
-    const { parentType } = useContext(NestedOptionContext);
-    if (parentType === 'option') {
-        return React.createElement('div');
-    }
-    const [widgetConfig, context] = useOptionScanning({
-        type: ElementType.Option,
-        descriptor: {
-            name: '',
-            isCollection: false,
-            templates: templateProps,
-            initialValuesProps: defaults,
-            predefinedValuesProps: {},
-            expectedChildren,
-        },
-        props,
-    }, () => !!childrenContainerRef.current?.childNodes.length, Symbol('initial update token'), 'component');
-    const restoreTree = useCallback(() => {
-        if (childElementsDetached.current && childNodes.current?.length && element.current) {
-            element.current.append(...childNodes.current);
-            childElementsDetached.current = false;
-        }
-        if (restoreParentLinkRef.current && element.current && !element.current.isConnected) {
-            restoreParentLinkRef.current();
-        }
-    }, []);
-    // eslint-disable-next-line @stylistic/max-len
-    const updateCssClasses = useCallback((prevProps, newProps) => {
-        const prevClassName = prevProps ? getClassName(prevProps) : undefined;
-        const newClassName = getClassName(newProps);
-        if (prevClassName === newClassName) {
-            return;
-        }
-        if (prevClassName) {
-            const classNames = prevClassName.split(' ').filter((c) => c);
-            if (classNames.length) {
-                element.current?.classList.remove(...classNames);
-            }
-        }
-        if (newClassName) {
-            const classNames = newClassName.split(' ').filter((c) => c);
-            if (classNames.length) {
-                element.current?.classList.add(...classNames);
-            }
-        }
-    }, []);
-    const setInlineStyles = useCallback((styles) => {
-        if (element.current) {
-            const el = element.current;
-            Object.entries(styles).forEach(([name, value]) => {
-                if (typeof value === 'number' && !UNITLESS_NUMBERS_SET.has(name)) {
-                    el.style[name] = `${value}px`;
-                }
-                else {
-                    el.style[name] = value;
-                }
-            });
-        }
-    }, []);
-    const setTemplateManagerHooks = useCallback(({ createDXTemplates: createDXTemplatesFn, clearInstantiationModels: clearInstantiationModelsFn, updateTemplates: updateTemplatesFn, }) => {
-        createDXTemplates.current = createDXTemplatesFn;
-        clearInstantiationModels.current = clearInstantiationModelsFn;
-        updateTemplates.current = updateTemplatesFn;
-    }, []);
-    const getElementProps = useCallback(() => {
-        const elementProps = {
-            ref: (el) => {
-                if (el) {
-                    element.current = el;
-                }
-            },
-        };
-        elementPropNames.forEach((name) => {
-            if (name in props) {
-                elementProps[name] = props[name];
-            }
-        });
-        return elementProps;
-    }, [props]);
-    const scheduleTemplatesUpdate = useCallback(() => {
-        if (guardsUpdateScheduled.current) {
-            return;
-        }
-        guardsUpdateScheduled.current = true;
-        const updateFunc = useDeferUpdateForTemplates.current ? deferUpdate : requestAnimationFrame;
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        updateFunc(() => {
-            guardsUpdateScheduled.current = false;
-            updateTemplates.current?.(() => scheduleGuards());
-        });
-        unscheduleGuards();
-    }, []);
-    const createWidget = useCallback((el) => {
-        beforeCreateWidget();
-        // eslint-disable-next-line no-param-reassign
-        el = el || element.current;
-        let options = {
-            templatesRenderAsynchronously: true,
-            ...optionsManager.current.getInitialOptions(widgetConfig),
-        };
-        const templateOptions = optionsManager.current.getTemplateOptions(widgetConfig);
-        const dxTemplates = createDXTemplates.current?.(templateOptions);
-        if (dxTemplates && Object.keys(dxTemplates).length) {
-            options = {
-                ...options,
-                integrationOptions: {
-                    templates: dxTemplates,
-                },
-            };
-        }
-        clearInstantiationModels.current?.();
-        instance.current = new WidgetClass(el, options);
-        if (!useRequestAnimationFrameFlag) {
-            useDeferUpdateForTemplates.current = instance.current.option('integrationOptions.useDeferUpdateForTemplates');
-        }
-        // eslint-disable-next-line @stylistic/max-len
-        optionsManager.current.setInstance(instance.current, widgetConfig, subscribableOptions, independentEvents);
-        instance.current.on('optionChanged', optionsManager.current.onOptionChanged);
-        afterCreateWidget();
-    }, [
-        beforeCreateWidget,
-        afterCreateWidget,
-        WidgetClass,
-        useRequestAnimationFrameFlag,
-        subscribableOptions,
-        independentEvents,
-        widgetConfig,
-    ]);
-    const onTemplatesRendered = useCallback(() => {
-        if (shouldRestoreFocus.current && instance.current?.focus) {
-            instance.current.focus();
-            shouldRestoreFocus.current = false;
-        }
-    }, []);
-    const onComponentUpdated = useCallback(() => {
-        if (!optionsManager.current?.isInstanceSet) {
-            return;
-        }
-        updateCssClasses(prevPropsRef.current, props);
-        const templateOptions = optionsManager.current.getTemplateOptions(widgetConfig);
-        const dxTemplates = createDXTemplates.current?.(templateOptions) || {};
-        optionsManager.current.update(widgetConfig, dxTemplates);
-        scheduleTemplatesUpdate();
-        prevPropsRef.current = props;
-    }, [
-        scheduleTemplatesUpdate,
-        updateCssClasses,
-        props,
-        widgetConfig,
-    ]);
-    const onComponentMounted = useCallback(() => {
-        const { style } = props;
-        if (childElementsDetached.current) {
-            restoreTree();
-        }
-        else if (element.current?.childNodes.length) {
-            childNodes.current = Array.from(element.current?.childNodes);
-        }
-        updateCssClasses(undefined, props);
-        if (style) {
-            setInlineStyles(style);
-        }
-        prevPropsRef.current = props;
-    }, [
-        updateCssClasses,
-        setInlineStyles,
-        props,
-    ]);
-    const onComponentUnmounted = useCallback(() => {
-        removalLocker?.lock();
-        if (instance.current) {
-            const dxRemoveArgs = { isUnmounting: true };
-            shouldRestoreFocus.current = !!element.current?.contains(document.activeElement);
-            childNodes.current?.forEach((child) => child.parentNode?.removeChild(child));
-            childElementsDetached.current = true;
-            if (element.current) {
-                const preventFocusOut = (e) => e.stopPropagation();
-                events.on(element.current, 'focusout', preventFocusOut);
-                events.triggerHandler(element.current, DX_REMOVE_EVENT, dxRemoveArgs);
-                events.off(element.current, 'focusout', preventFocusOut);
-            }
-            instance.current.dispose();
-            instance.current = null;
-        }
-        optionsManager.current.dispose();
-        removalLocker?.unlock();
-    }, [removalLocker]);
-    useLayoutEffect(() => {
-        onComponentMounted();
-        return () => {
-            onComponentUnmounted();
-        };
-    }, []);
-    useLayoutEffect(() => {
-        restoreParentLinkRef.current = restoreParentLink;
-    }, [restoreParentLink]);
-    useLayoutEffect(() => {
-        onComponentUpdated();
-    });
-    const createWidgetRef = useRef(createWidget);
-    useLayoutEffect(() => {
-        createWidgetRef.current = createWidget;
-    }, [createWidget]);
-    useImperativeHandle(ref, () => ({
-        getInstance() {
-            return instance.current;
-        },
-        getElement() {
-            return element.current;
-        },
-        createWidget(el) {
-            createWidgetRef.current?.(el);
-        },
-    }), []);
-    const _renderChildren = useCallback(() => {
-        if (renderChildren) {
-            return renderChildren();
-        }
-        const { children } = props;
-        return children;
-    }, [props, renderChildren]);
-    const renderPortal = useCallback(() => portalContainer.current && createPortal(_renderChildren(), portalContainer.current), [_renderChildren]);
-    const renderContent = useCallback(() => {
-        const { children } = props;
-        return isPortalComponent && children
-            ? React.createElement('div', {
-                ref: (node) => {
-                    if (node && portalContainer.current !== node) {
-                        portalContainer.current = node;
-                        setForceUpdateToken(Symbol('force update token'));
-                    }
-                },
-                style: { display: 'contents' },
-            })
-            : _renderChildren();
-    }, [
-        props,
-        isPortalComponent,
-        _renderChildren,
-    ]);
-    const renderContextValue = useMemo(() => ({
-        isTemplateRendering: false,
-    }), []);
-    return (React.createElement(RestoreTreeContext.Provider, { value: restoreTree },
-        React.createElement(TemplateRenderingContext.Provider, { value: renderContextValue },
-            React.createElement("div", { ref: childrenContainerRef, ...getElementProps() },
-                React.createElement(NestedOptionContext.Provider, { value: context }, renderContent()),
-                React.createElement(TemplateManager, { init: setTemplateManagerHooks, onTemplatesRendered: onTemplatesRendered }),
-                isPortalComponent
-                    && React.createElement(NestedOptionContext.Provider, { value: context }, renderPortal())))));
-});
-export { ComponentBase, DX_REMOVE_EVENT, };
+import * as React from 'react';
+import * as events from 'devextreme/events';
+import { useContext, useMemo, useImperativeHandle, forwardRef, useRef, useLayoutEffect, useCallback, useState, } from 'react';
+import { requestAnimationFrame } from 'devextreme/animation/frame';
+import { deferUpdate } from 'devextreme/core/utils/common';
+import config from 'devextreme/core/config';
+import { createPortal } from 'react-dom';
+import { useOptionScanning } from './use-option-scanning';
+import { OptionsManager, scheduleGuards, unscheduleGuards } from './options-manager';
+import { elementPropNames, getClassName } from './widget-config';
+import { TemplateManager } from './template-manager';
+import { ElementType } from './configuration/react/element';
+import { NestedOptionContext, RemovalLockerContext, RestoreTreeContext, TemplateRenderingContext, } from './contexts';
+import { UNITLESS_NUMBERS_SET } from './const';
+const DX_REMOVE_EVENT = 'dxremove';
+config({
+    buyNowLink: 'https://go.devexpress.com/Licensing_Installer_Watermark_DevExtremeReact.aspx',
+    licensingDocLink: 'https://www.devexpress.com/go/Licensing_Documentation_DevExpress_React.aspx',
+});
+const ComponentBase = forwardRef((props, ref) => {
+    const { templateProps = [], defaults = {}, expectedChildren = {}, isPortalComponent = false, useRequestAnimationFrameFlag = false, subscribableOptions = [], WidgetClass, independentEvents = [], renderChildren, beforeCreateWidget = () => undefined, afterCreateWidget = () => undefined, } = props;
+    const [, setForceUpdateToken] = useState(Symbol('initial force update token'));
+    const removalLocker = useContext(RemovalLockerContext);
+    const restoreParentLink = useContext(RestoreTreeContext);
+    const restoreParentLinkRef = useRef(restoreParentLink);
+    const instance = useRef();
+    const element = useRef();
+    const portalContainer = useRef();
+    const useDeferUpdateForTemplates = useRef(false);
+    const guardsUpdateScheduled = useRef(false);
+    const childElementsDetached = useRef(false);
+    const shouldRestoreFocus = useRef(false);
+    const optionsManager = useRef(new OptionsManager());
+    const childNodes = useRef();
+    const createDXTemplates = useRef();
+    const clearInstantiationModels = useRef();
+    const updateTemplates = useRef();
+    const prevPropsRef = useRef();
+    const childrenContainerRef = useRef(null);
+    const { parentType } = useContext(NestedOptionContext);
+    if (parentType === 'option') {
+        return React.createElement('div');
+    }
+    const [widgetConfig, context] = useOptionScanning({
+        type: ElementType.Option,
+        descriptor: {
+            name: '',
+            isCollection: false,
+            templates: templateProps,
+            initialValuesProps: defaults,
+            predefinedValuesProps: {},
+            expectedChildren,
+        },
+        props,
+    }, () => !!childrenContainerRef.current?.childNodes.length, Symbol('initial update token'), 'component');
+    const restoreTree = useCallback(() => {
+        if (childElementsDetached.current && childNodes.current?.length && element.current) {
+            element.current.append(...childNodes.current);
+            childElementsDetached.current = false;
+        }
+        if (restoreParentLinkRef.current && element.current && !element.current.isConnected) {
+            restoreParentLinkRef.current();
+        }
+    }, []);
+    // eslint-disable-next-line @stylistic/max-len
+    const updateCssClasses = useCallback((prevProps, newProps) => {
+        const prevClassName = prevProps ? getClassName(prevProps) : undefined;
+        const newClassName = getClassName(newProps);
+        if (prevClassName === newClassName) {
+            return;
+        }
+        if (prevClassName) {
+            const classNames = prevClassName.split(' ').filter((c) => c);
+            if (classNames.length) {
+                element.current?.classList.remove(...classNames);
+            }
+        }
+        if (newClassName) {
+            const classNames = newClassName.split(' ').filter((c) => c);
+            if (classNames.length) {
+                element.current?.classList.add(...classNames);
+            }
+        }
+    }, []);
+    const setInlineStyles = useCallback((styles) => {
+        if (element.current) {
+            const el = element.current;
+            Object.entries(styles).forEach(([name, value]) => {
+                if (typeof value === 'number' && !UNITLESS_NUMBERS_SET.has(name)) {
+                    el.style[name] = `${value}px`;
+                }
+                else {
+                    el.style[name] = value;
+                }
+            });
+        }
+    }, []);
+    const setTemplateManagerHooks = useCallback(({ createDXTemplates: createDXTemplatesFn, clearInstantiationModels: clearInstantiationModelsFn, updateTemplates: updateTemplatesFn, }) => {
+        createDXTemplates.current = createDXTemplatesFn;
+        clearInstantiationModels.current = clearInstantiationModelsFn;
+        updateTemplates.current = updateTemplatesFn;
+    }, []);
+    const getElementProps = useCallback(() => {
+        const elementProps = {
+            ref: (el) => {
+                if (el) {
+                    element.current = el;
+                }
+            },
+        };
+        elementPropNames.forEach((name) => {
+            if (name in props) {
+                elementProps[name] = props[name];
+            }
+        });
+        return elementProps;
+    }, [props]);
+    const scheduleTemplatesUpdate = useCallback(() => {
+        if (guardsUpdateScheduled.current) {
+            return;
+        }
+        guardsUpdateScheduled.current = true;
+        const updateFunc = useDeferUpdateForTemplates.current ? deferUpdate : requestAnimationFrame;
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        updateFunc(() => {
+            guardsUpdateScheduled.current = false;
+            updateTemplates.current?.(() => scheduleGuards());
+        });
+        unscheduleGuards();
+    }, []);
+    const createWidget = useCallback((el) => {
+        beforeCreateWidget();
+        // eslint-disable-next-line no-param-reassign
+        el = el || element.current;
+        let options = {
+            templatesRenderAsynchronously: true,
+            ...optionsManager.current.getInitialOptions(widgetConfig),
+        };
+        const templateOptions = optionsManager.current.getTemplateOptions(widgetConfig);
+        const dxTemplates = createDXTemplates.current?.(templateOptions);
+        if (dxTemplates && Object.keys(dxTemplates).length) {
+            options = {
+                ...options,
+                integrationOptions: {
+                    templates: dxTemplates,
+                },
+            };
+        }
+        clearInstantiationModels.current?.();
+        instance.current = new WidgetClass(el, options);
+        if (!useRequestAnimationFrameFlag) {
+            useDeferUpdateForTemplates.current = instance.current.option('integrationOptions.useDeferUpdateForTemplates');
+        }
+        // eslint-disable-next-line @stylistic/max-len
+        optionsManager.current.setInstance(instance.current, widgetConfig, subscribableOptions, independentEvents);
+        instance.current.on('optionChanged', optionsManager.current.onOptionChanged);
+        afterCreateWidget();
+    }, [
+        beforeCreateWidget,
+        afterCreateWidget,
+        WidgetClass,
+        useRequestAnimationFrameFlag,
+        subscribableOptions,
+        independentEvents,
+        widgetConfig,
+    ]);
+    const onTemplatesRendered = useCallback(() => {
+        if (shouldRestoreFocus.current && instance.current?.focus) {
+            instance.current.focus();
+            shouldRestoreFocus.current = false;
+        }
+    }, []);
+    const onComponentUpdated = useCallback(() => {
+        if (!optionsManager.current?.isInstanceSet) {
+            return;
+        }
+        updateCssClasses(prevPropsRef.current, props);
+        const templateOptions = optionsManager.current.getTemplateOptions(widgetConfig);
+        const dxTemplates = createDXTemplates.current?.(templateOptions) || {};
+        optionsManager.current.update(widgetConfig, dxTemplates);
+        scheduleTemplatesUpdate();
+        prevPropsRef.current = props;
+    }, [
+        scheduleTemplatesUpdate,
+        updateCssClasses,
+        props,
+        widgetConfig,
+    ]);
+    const onComponentMounted = useCallback(() => {
+        const { style } = props;
+        if (childElementsDetached.current) {
+            restoreTree();
+        }
+        else if (element.current?.childNodes.length) {
+            childNodes.current = Array.from(element.current?.childNodes);
+        }
+        updateCssClasses(undefined, props);
+        if (style) {
+            setInlineStyles(style);
+        }
+        prevPropsRef.current = props;
+    }, [
+        updateCssClasses,
+        setInlineStyles,
+        props,
+    ]);
+    const onComponentUnmounted = useCallback(() => {
+        removalLocker?.lock();
+        if (instance.current) {
+            const dxRemoveArgs = { isUnmounting: true };
+            shouldRestoreFocus.current = !!element.current?.contains(document.activeElement);
+            childNodes.current?.forEach((child) => child.parentNode?.removeChild(child));
+            childElementsDetached.current = true;
+            if (element.current) {
+                const preventFocusOut = (e) => e.stopPropagation();
+                events.on(element.current, 'focusout', preventFocusOut);
+                events.triggerHandler(element.current, DX_REMOVE_EVENT, dxRemoveArgs);
+                events.off(element.current, 'focusout', preventFocusOut);
+            }
+            instance.current.dispose();
+            instance.current = null;
+        }
+        optionsManager.current.dispose();
+        removalLocker?.unlock();
+    }, [removalLocker]);
+    useLayoutEffect(() => {
+        onComponentMounted();
+        return () => {
+            onComponentUnmounted();
+        };
+    }, []);
+    useLayoutEffect(() => {
+        restoreParentLinkRef.current = restoreParentLink;
+    }, [restoreParentLink]);
+    useLayoutEffect(() => {
+        onComponentUpdated();
+    });
+    const createWidgetRef = useRef(createWidget);
+    useLayoutEffect(() => {
+        createWidgetRef.current = createWidget;
+    }, [createWidget]);
+    useImperativeHandle(ref, () => ({
+        getInstance() {
+            return instance.current;
+        },
+        getElement() {
+            return element.current;
+        },
+        createWidget(el) {
+            createWidgetRef.current?.(el);
+        },
+    }), []);
+    const _renderChildren = useCallback(() => {
+        if (renderChildren) {
+            return renderChildren();
+        }
+        const { children } = props;
+        return children;
+    }, [props, renderChildren]);
+    const renderPortal = useCallback(() => portalContainer.current && createPortal(_renderChildren(), portalContainer.current), [_renderChildren]);
+    const renderContent = useCallback(() => {
+        const { children } = props;
+        return isPortalComponent && children
+            ? React.createElement('div', {
+                ref: (node) => {
+                    if (node && portalContainer.current !== node) {
+                        portalContainer.current = node;
+                        setForceUpdateToken(Symbol('force update token'));
+                    }
+                },
+                style: { display: 'contents' },
+            })
+            : _renderChildren();
+    }, [
+        props,
+        isPortalComponent,
+        _renderChildren,
+    ]);
+    const renderContextValue = useMemo(() => ({
+        isTemplateRendering: false,
+    }), []);
+    return (React.createElement(RestoreTreeContext.Provider, { value: restoreTree },
+        React.createElement(TemplateRenderingContext.Provider, { value: renderContextValue },
+            React.createElement("div", { ref: childrenContainerRef, ...getElementProps() },
+                React.createElement(NestedOptionContext.Provider, { value: context }, renderContent()),
+                React.createElement(TemplateManager, { init: setTemplateManagerHooks, onTemplatesRendered: onTemplatesRendered }),
+                isPortalComponent
+                    && React.createElement(NestedOptionContext.Provider, { value: context }, renderPortal())))));
+});
+export { ComponentBase, DX_REMOVE_EVENT, };