diff --git a/apps/react-storybook/stories/examples/common/CustomConfigurationComponents.stories.tsx b/apps/react-storybook/stories/examples/common/CustomConfigurationComponents.stories.tsx
new file mode 100644
index 000000000000..26477ef2eb38
--- /dev/null
+++ b/apps/react-storybook/stories/examples/common/CustomConfigurationComponents.stories.tsx
@@ -0,0 +1,122 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from "react";
+
+import DataGrid, {
+  Column,
+  Grouping,
+  GroupPanel,
+  Pager,
+  Paging,
+  SearchPanel
+} from "devextreme-react/data-grid";
+import TabPanel, { Item } from "devextreme-react/tab-panel";
+import ODataStore from "devextreme/data/odata/store";
+
+const meta: Meta<typeof DataGrid> = {
+  title: 'Example/Common/Custom Configuration Components',
+  component: DataGrid,
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/configure/story-layout
+    layout: 'padded',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DataGrid>;
+
+const pageSizes = [10, 25, 50, 100];
+
+const dataSourceOptions = {
+  store: new ODataStore({
+    version: 2,
+    url: 'https://js.devexpress.com/Demos/SalesViewer/odata/DaySaleDtoes',
+    key: 'Id',
+    beforeSend(request) {
+      const year = new Date().getFullYear() - 1;
+      request.params.startDate = `${year}-05-10`;
+      request.params.endDate = `${year}-5-15`;
+    },
+  }),
+};
+
+const CustomerData = () => (
+  <>
+    <Column dataField="Region" dataType="string" />
+    <Column dataField="Customer" dataType="string" width={150} />
+  </>
+);
+
+const CommonSettings = () => (
+  <>
+    <GroupPanel visible={true} />
+    <SearchPanel visible={true} highlightCaseSensitive={true} />
+    <Grouping autoExpandAll={false} />
+    <Pager allowedPageSizes={pageSizes} showPageSizeSelector={true} />
+    <Paging defaultPageSize={10} />
+  </>
+);
+
+const CommonColumns = () => (
+  <>
+    <Column dataField="SaleDate" dataType="date" />
+    <Column dataField="Product" />
+  </>
+);
+
+const BriefGrid = () => (
+  <DataGrid
+    dataSource={dataSourceOptions}
+    style={{ padding: '10px' }}
+  >
+    <CommonSettings />
+    <CommonColumns />
+    <CustomerData />
+  </DataGrid>
+);
+
+const DetailGrid = () => (
+  <DataGrid
+    dataSource={dataSourceOptions}
+    style={{ padding: '10px' }}
+  >
+    <CommonSettings />
+    <CommonColumns />
+    <Column
+      dataField="Amount"
+      caption="Sale Amount"
+      dataType="number"
+      format="currency"
+      alignment="right"
+    />
+    <Column
+      dataField="Discount"
+      caption="Discount %"
+      dataType="number"
+      format="percent"
+      alignment="right"
+      allowGrouping={false}
+      cssClass="bullet"
+    />
+    <Column caption='Customer Data'>
+      <CustomerData />
+      <Column dataField="Sector" dataType="string" />
+      <Column dataField="Channel" dataType="string" />
+    </Column>
+  </DataGrid>
+);
+
+export const Overview: Story = {
+  render: () => {
+    return (
+      <TabPanel>
+        <Item title="Brief">
+          <BriefGrid />
+        </Item>
+        <Item title="Detailed">
+          <DetailGrid />
+        </Item>
+      </TabPanel>
+    );
+  }
+}
diff --git a/package.json b/package.json
index 69cedf74f94f..a11013437555 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,7 @@
     "axe-core": "4.10.0",
     "cheerio": "1.0.0-rc.10",
     "codelyzer": "6.0.2",
-    "devextreme-internal-tools": "16.0.0-beta.5",
+    "devextreme-internal-tools": "16.0.0-beta.6",
     "http-server": "14.1.1",
     "husky": "8.0.3",
     "jest": "29.7.0",
diff --git a/packages/devextreme-react/src/accordion.ts b/packages/devextreme-react/src/accordion.ts
index c06de9078151..20a1cbbc5bbc 100644
--- a/packages/devextreme-react/src/accordion.ts
+++ b/packages/devextreme-react/src/accordion.ts
@@ -6,7 +6,7 @@ import dxAccordion, {
     Properties
 } from "devextreme/ui/accordion";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { dxAccordionItem, ContentReadyEvent, DisposingEvent, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent, ItemTitleClickEvent } from "devextreme/ui/accordion";
@@ -124,25 +124,28 @@ type IItemProps = React.PropsWithChildren<{
   titleRender?: (...params: any) => React.ReactNode;
   titleComponent?: React.ComponentType<any>;
 }>
-const _componentItem = memo(
-  (props: IItemProps) => {
-    return React.createElement(NestedOption<IItemProps>, { ...props });
-  }
-);
-
-const Item: typeof _componentItem & IElementDescriptor = Object.assign(_componentItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }, {
-    tmplOption: "titleTemplate",
-    render: "titleRender",
-    component: "titleComponent"
-  }],
-})
+const _componentItem = (props: IItemProps) => {
+  return React.createElement(NestedOption<IItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }, {
+        tmplOption: "titleTemplate",
+        render: "titleRender",
+        component: "titleComponent"
+      }],
+    },
+  });
+};
+
+const Item = Object.assign<typeof _componentItem, NestedComponentMeta>(_componentItem, {
+  componentType: "option",
+});
 
 export default Accordion;
 export {
diff --git a/packages/devextreme-react/src/action-sheet.ts b/packages/devextreme-react/src/action-sheet.ts
index 4aa248c1f7c3..b6bf2dbe501e 100644
--- a/packages/devextreme-react/src/action-sheet.ts
+++ b/packages/devextreme-react/src/action-sheet.ts
@@ -6,7 +6,7 @@ import dxActionSheet, {
     Properties
 } from "devextreme/ui/action_sheet";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { dxActionSheetItem, CancelClickEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent } from "devextreme/ui/action_sheet";
@@ -106,21 +106,24 @@ type IItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentItem = memo(
-  (props: IItemProps) => {
-    return React.createElement(NestedOption<IItemProps>, { ...props });
-  }
-);
-
-const Item: typeof _componentItem & IElementDescriptor = Object.assign(_componentItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentItem = (props: IItemProps) => {
+  return React.createElement(NestedOption<IItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const Item = Object.assign<typeof _componentItem, NestedComponentMeta>(_componentItem, {
+  componentType: "option",
+});
 
 export default ActionSheet;
 export {
diff --git a/packages/devextreme-react/src/autocomplete.ts b/packages/devextreme-react/src/autocomplete.ts
index 4d7323a6db0c..57deeb0b1121 100644
--- a/packages/devextreme-react/src/autocomplete.ts
+++ b/packages/devextreme-react/src/autocomplete.ts
@@ -5,7 +5,7 @@ import dxAutocomplete, {
     Properties
 } from "devextreme/ui/autocomplete";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { ChangeEvent, ClosedEvent, ContentReadyEvent, CopyEvent, CutEvent, DisposingEvent, EnterKeyEvent, FocusInEvent, FocusOutEvent, InitializedEvent, InputEvent, ItemClickEvent, KeyDownEvent, KeyUpEvent, OpenedEvent, PasteEvent, ValueChangedEvent } from "devextreme/ui/autocomplete";
@@ -131,19 +131,22 @@ type IAnimationProps = React.PropsWithChildren<{
   hide?: AnimationConfig;
   show?: AnimationConfig;
 }>
-const _componentAnimation = memo(
-  (props: IAnimationProps) => {
-    return React.createElement(NestedOption<IAnimationProps>, { ...props });
-  }
-);
-
-const Animation: typeof _componentAnimation & IElementDescriptor = Object.assign(_componentAnimation, {
-  OptionName: "animation",
-  ExpectedChildren: {
-    hide: { optionName: "hide", isCollectionItem: false },
-    show: { optionName: "show", isCollectionItem: false }
-  },
-})
+const _componentAnimation = (props: IAnimationProps) => {
+  return React.createElement(NestedOption<IAnimationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "animation",
+      ExpectedChildren: {
+        hide: { optionName: "hide", isCollectionItem: false },
+        show: { optionName: "show", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Animation = Object.assign<typeof _componentAnimation, NestedComponentMeta>(_componentAnimation, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -151,15 +154,18 @@ type IAtProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentAt = memo(
-  (props: IAtProps) => {
-    return React.createElement(NestedOption<IAtProps>, { ...props });
-  }
-);
+const _componentAt = (props: IAtProps) => {
+  return React.createElement(NestedOption<IAtProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "at",
+    },
+  });
+};
 
-const At: typeof _componentAt & IElementDescriptor = Object.assign(_componentAt, {
-  OptionName: "at",
-})
+const At = Object.assign<typeof _componentAt, NestedComponentMeta>(_componentAt, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -167,15 +173,18 @@ type IBoundaryOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentBoundaryOffset = memo(
-  (props: IBoundaryOffsetProps) => {
-    return React.createElement(NestedOption<IBoundaryOffsetProps>, { ...props });
-  }
-);
+const _componentBoundaryOffset = (props: IBoundaryOffsetProps) => {
+  return React.createElement(NestedOption<IBoundaryOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "boundaryOffset",
+    },
+  });
+};
 
-const BoundaryOffset: typeof _componentBoundaryOffset & IElementDescriptor = Object.assign(_componentBoundaryOffset, {
-  OptionName: "boundaryOffset",
-})
+const BoundaryOffset = Object.assign<typeof _componentBoundaryOffset, NestedComponentMeta>(_componentBoundaryOffset, {
+  componentType: "option",
+});
 
 // owners:
 // Autocomplete
@@ -184,19 +193,22 @@ type IButtonProps = React.PropsWithChildren<{
   name?: string;
   options?: dxButtonOptions;
 }>
-const _componentButton = memo(
-  (props: IButtonProps) => {
-    return React.createElement(NestedOption<IButtonProps>, { ...props });
-  }
-);
-
-const Button: typeof _componentButton & IElementDescriptor = Object.assign(_componentButton, {
-  OptionName: "buttons",
-  IsCollectionItem: true,
-  ExpectedChildren: {
-    options: { optionName: "options", isCollectionItem: false }
-  },
-})
+const _componentButton = (props: IButtonProps) => {
+  return React.createElement(NestedOption<IButtonProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "buttons",
+      IsCollectionItem: true,
+      ExpectedChildren: {
+        options: { optionName: "options", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Button = Object.assign<typeof _componentButton, NestedComponentMeta>(_componentButton, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -204,15 +216,18 @@ type ICollisionProps = React.PropsWithChildren<{
   x?: "fit" | "flip" | "flipfit" | "none";
   y?: "fit" | "flip" | "flipfit" | "none";
 }>
-const _componentCollision = memo(
-  (props: ICollisionProps) => {
-    return React.createElement(NestedOption<ICollisionProps>, { ...props });
-  }
-);
+const _componentCollision = (props: ICollisionProps) => {
+  return React.createElement(NestedOption<ICollisionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "collision",
+    },
+  });
+};
 
-const Collision: typeof _componentCollision & IElementDescriptor = Object.assign(_componentCollision, {
-  OptionName: "collision",
-})
+const Collision = Object.assign<typeof _componentCollision, NestedComponentMeta>(_componentCollision, {
+  componentType: "option",
+});
 
 // owners:
 // Autocomplete
@@ -283,35 +298,38 @@ type IDropDownOptionsProps = React.PropsWithChildren<{
   titleRender?: (...params: any) => React.ReactNode;
   titleComponent?: React.ComponentType<any>;
 }>
-const _componentDropDownOptions = memo(
-  (props: IDropDownOptionsProps) => {
-    return React.createElement(NestedOption<IDropDownOptionsProps>, { ...props });
-  }
-);
-
-const DropDownOptions: typeof _componentDropDownOptions & IElementDescriptor = Object.assign(_componentDropDownOptions, {
-  OptionName: "dropDownOptions",
-  DefaultsProps: {
-    defaultHeight: "height",
-    defaultPosition: "position",
-    defaultVisible: "visible",
-    defaultWidth: "width"
-  },
-  ExpectedChildren: {
-    animation: { optionName: "animation", isCollectionItem: false },
-    position: { optionName: "position", isCollectionItem: false },
-    toolbarItem: { optionName: "toolbarItems", isCollectionItem: true }
-  },
-  TemplateProps: [{
-    tmplOption: "contentTemplate",
-    render: "contentRender",
-    component: "contentComponent"
-  }, {
-    tmplOption: "titleTemplate",
-    render: "titleRender",
-    component: "titleComponent"
-  }],
-})
+const _componentDropDownOptions = (props: IDropDownOptionsProps) => {
+  return React.createElement(NestedOption<IDropDownOptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "dropDownOptions",
+      DefaultsProps: {
+        defaultHeight: "height",
+        defaultPosition: "position",
+        defaultVisible: "visible",
+        defaultWidth: "width"
+      },
+      ExpectedChildren: {
+        animation: { optionName: "animation", isCollectionItem: false },
+        position: { optionName: "position", isCollectionItem: false },
+        toolbarItem: { optionName: "toolbarItems", isCollectionItem: true }
+      },
+      TemplateProps: [{
+        tmplOption: "contentTemplate",
+        render: "contentRender",
+        component: "contentComponent"
+      }, {
+        tmplOption: "titleTemplate",
+        render: "titleRender",
+        component: "titleComponent"
+      }],
+    },
+  });
+};
+
+const DropDownOptions = Object.assign<typeof _componentDropDownOptions, NestedComponentMeta>(_componentDropDownOptions, {
+  componentType: "option",
+});
 
 // owners:
 // Hide
@@ -322,18 +340,21 @@ type IFromProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentFrom = memo(
-  (props: IFromProps) => {
-    return React.createElement(NestedOption<IFromProps>, { ...props });
-  }
-);
-
-const From: typeof _componentFrom & IElementDescriptor = Object.assign(_componentFrom, {
-  OptionName: "from",
-  ExpectedChildren: {
-    position: { optionName: "position", isCollectionItem: false }
-  },
-})
+const _componentFrom = (props: IFromProps) => {
+  return React.createElement(NestedOption<IFromProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "from",
+      ExpectedChildren: {
+        position: { optionName: "position", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const From = Object.assign<typeof _componentFrom, NestedComponentMeta>(_componentFrom, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -349,19 +370,22 @@ type IHideProps = React.PropsWithChildren<{
   to?: AnimationState;
   type?: "css" | "fade" | "fadeIn" | "fadeOut" | "pop" | "slide" | "slideIn" | "slideOut";
 }>
-const _componentHide = memo(
-  (props: IHideProps) => {
-    return React.createElement(NestedOption<IHideProps>, { ...props });
-  }
-);
-
-const Hide: typeof _componentHide & IElementDescriptor = Object.assign(_componentHide, {
-  OptionName: "hide",
-  ExpectedChildren: {
-    from: { optionName: "from", isCollectionItem: false },
-    to: { optionName: "to", isCollectionItem: false }
-  },
-})
+const _componentHide = (props: IHideProps) => {
+  return React.createElement(NestedOption<IHideProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hide",
+      ExpectedChildren: {
+        from: { optionName: "from", isCollectionItem: false },
+        to: { optionName: "to", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Hide = Object.assign<typeof _componentHide, NestedComponentMeta>(_componentHide, {
+  componentType: "option",
+});
 
 // owners:
 // Autocomplete
@@ -374,21 +398,24 @@ type IItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentItem = memo(
-  (props: IItemProps) => {
-    return React.createElement(NestedOption<IItemProps>, { ...props });
-  }
-);
-
-const Item: typeof _componentItem & IElementDescriptor = Object.assign(_componentItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentItem = (props: IItemProps) => {
+  return React.createElement(NestedOption<IItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const Item = Object.assign<typeof _componentItem, NestedComponentMeta>(_componentItem, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -396,15 +423,18 @@ type IMyProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentMy = memo(
-  (props: IMyProps) => {
-    return React.createElement(NestedOption<IMyProps>, { ...props });
-  }
-);
+const _componentMy = (props: IMyProps) => {
+  return React.createElement(NestedOption<IMyProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "my",
+    },
+  });
+};
 
-const My: typeof _componentMy & IElementDescriptor = Object.assign(_componentMy, {
-  OptionName: "my",
-})
+const My = Object.assign<typeof _componentMy, NestedComponentMeta>(_componentMy, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -412,15 +442,18 @@ type IOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentOffset = memo(
-  (props: IOffsetProps) => {
-    return React.createElement(NestedOption<IOffsetProps>, { ...props });
-  }
-);
+const _componentOffset = (props: IOffsetProps) => {
+  return React.createElement(NestedOption<IOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "offset",
+    },
+  });
+};
 
-const Offset: typeof _componentOffset & IElementDescriptor = Object.assign(_componentOffset, {
-  OptionName: "offset",
-})
+const Offset = Object.assign<typeof _componentOffset, NestedComponentMeta>(_componentOffset, {
+  componentType: "option",
+});
 
 // owners:
 // Button
@@ -453,20 +486,23 @@ type IOptionsProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentOptions = memo(
-  (props: IOptionsProps) => {
-    return React.createElement(NestedOption<IOptionsProps>, { ...props });
-  }
-);
-
-const Options: typeof _componentOptions & IElementDescriptor = Object.assign(_componentOptions, {
-  OptionName: "options",
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentOptions = (props: IOptionsProps) => {
+  return React.createElement(NestedOption<IOptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "options",
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const Options = Object.assign<typeof _componentOptions, NestedComponentMeta>(_componentOptions, {
+  componentType: "option",
+});
 
 // owners:
 // From
@@ -495,15 +531,18 @@ type IPositionProps = React.PropsWithChildren<{
     y?: number;
   };
 }>
-const _componentPosition = memo(
-  (props: IPositionProps) => {
-    return React.createElement(NestedOption<IPositionProps>, { ...props });
-  }
-);
+const _componentPosition = (props: IPositionProps) => {
+  return React.createElement(NestedOption<IPositionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "position",
+    },
+  });
+};
 
-const Position: typeof _componentPosition & IElementDescriptor = Object.assign(_componentPosition, {
-  OptionName: "position",
-})
+const Position = Object.assign<typeof _componentPosition, NestedComponentMeta>(_componentPosition, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -519,15 +558,18 @@ type IShowProps = React.PropsWithChildren<{
   to?: AnimationState;
   type?: "css" | "fade" | "fadeIn" | "fadeOut" | "pop" | "slide" | "slideIn" | "slideOut";
 }>
-const _componentShow = memo(
-  (props: IShowProps) => {
-    return React.createElement(NestedOption<IShowProps>, { ...props });
-  }
-);
+const _componentShow = (props: IShowProps) => {
+  return React.createElement(NestedOption<IShowProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "show",
+    },
+  });
+};
 
-const Show: typeof _componentShow & IElementDescriptor = Object.assign(_componentShow, {
-  OptionName: "show",
-})
+const Show = Object.assign<typeof _componentShow, NestedComponentMeta>(_componentShow, {
+  componentType: "option",
+});
 
 // owners:
 // Hide
@@ -538,15 +580,18 @@ type IToProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentTo = memo(
-  (props: IToProps) => {
-    return React.createElement(NestedOption<IToProps>, { ...props });
-  }
-);
+const _componentTo = (props: IToProps) => {
+  return React.createElement(NestedOption<IToProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "to",
+    },
+  });
+};
 
-const To: typeof _componentTo & IElementDescriptor = Object.assign(_componentTo, {
-  OptionName: "to",
-})
+const To = Object.assign<typeof _componentTo, NestedComponentMeta>(_componentTo, {
+  componentType: "option",
+});
 
 // owners:
 // DropDownOptions
@@ -569,25 +614,28 @@ type IToolbarItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentToolbarItem = memo(
-  (props: IToolbarItemProps) => {
-    return React.createElement(NestedOption<IToolbarItemProps>, { ...props });
-  }
-);
-
-const ToolbarItem: typeof _componentToolbarItem & IElementDescriptor = Object.assign(_componentToolbarItem, {
-  OptionName: "toolbarItems",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "menuItemTemplate",
-    render: "menuItemRender",
-    component: "menuItemComponent"
-  }, {
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentToolbarItem = (props: IToolbarItemProps) => {
+  return React.createElement(NestedOption<IToolbarItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "toolbarItems",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "menuItemTemplate",
+        render: "menuItemRender",
+        component: "menuItemComponent"
+      }, {
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const ToolbarItem = Object.assign<typeof _componentToolbarItem, NestedComponentMeta>(_componentToolbarItem, {
+  componentType: "option",
+});
 
 export default Autocomplete;
 export {
diff --git a/packages/devextreme-react/src/bar-gauge.ts b/packages/devextreme-react/src/bar-gauge.ts
index 724e1fa6106f..6a8839199068 100644
--- a/packages/devextreme-react/src/bar-gauge.ts
+++ b/packages/devextreme-react/src/bar-gauge.ts
@@ -5,7 +5,7 @@ import dxBarGauge, {
     Properties
 } from "devextreme/viz/bar_gauge";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { DisposingEvent, DrawnEvent, ExportedEvent, ExportingEvent, FileSavingEvent, IncidentOccurredEvent, InitializedEvent, TooltipHiddenEvent, TooltipShownEvent, BarGaugeBarInfo, BarGaugeLegendItem } from "devextreme/viz/bar_gauge";
@@ -110,15 +110,18 @@ type IAnimationProps = React.PropsWithChildren<{
   easing?: "easeOutCubic" | "linear";
   enabled?: boolean;
 }>
-const _componentAnimation = memo(
-  (props: IAnimationProps) => {
-    return React.createElement(NestedOption<IAnimationProps>, { ...props });
-  }
-);
+const _componentAnimation = (props: IAnimationProps) => {
+  return React.createElement(NestedOption<IAnimationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "animation",
+    },
+  });
+};
 
-const Animation: typeof _componentAnimation & IElementDescriptor = Object.assign(_componentAnimation, {
-  OptionName: "animation",
-})
+const Animation = Object.assign<typeof _componentAnimation, NestedComponentMeta>(_componentAnimation, {
+  componentType: "option",
+});
 
 // owners:
 // BarGauge
@@ -144,21 +147,24 @@ type IBarGaugeTitleProps = React.PropsWithChildren<{
   verticalAlignment?: "bottom" | "top";
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentBarGaugeTitle = memo(
-  (props: IBarGaugeTitleProps) => {
-    return React.createElement(NestedOption<IBarGaugeTitleProps>, { ...props });
-  }
-);
-
-const BarGaugeTitle: typeof _componentBarGaugeTitle & IElementDescriptor = Object.assign(_componentBarGaugeTitle, {
-  OptionName: "title",
-  ExpectedChildren: {
-    barGaugeTitleSubtitle: { optionName: "subtitle", isCollectionItem: false },
-    font: { optionName: "font", isCollectionItem: false },
-    margin: { optionName: "margin", isCollectionItem: false },
-    subtitle: { optionName: "subtitle", isCollectionItem: false }
-  },
-})
+const _componentBarGaugeTitle = (props: IBarGaugeTitleProps) => {
+  return React.createElement(NestedOption<IBarGaugeTitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "title",
+      ExpectedChildren: {
+        barGaugeTitleSubtitle: { optionName: "subtitle", isCollectionItem: false },
+        font: { optionName: "font", isCollectionItem: false },
+        margin: { optionName: "margin", isCollectionItem: false },
+        subtitle: { optionName: "subtitle", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const BarGaugeTitle = Object.assign<typeof _componentBarGaugeTitle, NestedComponentMeta>(_componentBarGaugeTitle, {
+  componentType: "option",
+});
 
 // owners:
 // BarGaugeTitle
@@ -169,18 +175,21 @@ type IBarGaugeTitleSubtitleProps = React.PropsWithChildren<{
   textOverflow?: "ellipsis" | "hide" | "none";
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentBarGaugeTitleSubtitle = memo(
-  (props: IBarGaugeTitleSubtitleProps) => {
-    return React.createElement(NestedOption<IBarGaugeTitleSubtitleProps>, { ...props });
-  }
-);
-
-const BarGaugeTitleSubtitle: typeof _componentBarGaugeTitleSubtitle & IElementDescriptor = Object.assign(_componentBarGaugeTitleSubtitle, {
-  OptionName: "subtitle",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false }
-  },
-})
+const _componentBarGaugeTitleSubtitle = (props: IBarGaugeTitleSubtitleProps) => {
+  return React.createElement(NestedOption<IBarGaugeTitleSubtitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "subtitle",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const BarGaugeTitleSubtitle = Object.assign<typeof _componentBarGaugeTitleSubtitle, NestedComponentMeta>(_componentBarGaugeTitleSubtitle, {
+  componentType: "option",
+});
 
 // owners:
 // Legend
@@ -193,15 +202,18 @@ type IBorderProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentBorder = memo(
-  (props: IBorderProps) => {
-    return React.createElement(NestedOption<IBorderProps>, { ...props });
-  }
-);
+const _componentBorder = (props: IBorderProps) => {
+  return React.createElement(NestedOption<IBorderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
 
-const Border: typeof _componentBorder & IElementDescriptor = Object.assign(_componentBorder, {
-  OptionName: "border",
-})
+const Border = Object.assign<typeof _componentBorder, NestedComponentMeta>(_componentBorder, {
+  componentType: "option",
+});
 
 // owners:
 // BarGauge
@@ -214,15 +226,18 @@ type IExportProps = React.PropsWithChildren<{
   printingEnabled?: boolean;
   svgToCanvas?: ((svg: any, canvas: any) => any);
 }>
-const _componentExport = memo(
-  (props: IExportProps) => {
-    return React.createElement(NestedOption<IExportProps>, { ...props });
-  }
-);
+const _componentExport = (props: IExportProps) => {
+  return React.createElement(NestedOption<IExportProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "export",
+    },
+  });
+};
 
-const Export: typeof _componentExport & IElementDescriptor = Object.assign(_componentExport, {
-  OptionName: "export",
-})
+const Export = Object.assign<typeof _componentExport, NestedComponentMeta>(_componentExport, {
+  componentType: "option",
+});
 
 // owners:
 // Label
@@ -240,15 +255,18 @@ type IFontProps = React.PropsWithChildren<{
   size?: number | string;
   weight?: number;
 }>
-const _componentFont = memo(
-  (props: IFontProps) => {
-    return React.createElement(NestedOption<IFontProps>, { ...props });
-  }
-);
+const _componentFont = (props: IFontProps) => {
+  return React.createElement(NestedOption<IFontProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "font",
+    },
+  });
+};
 
-const Font: typeof _componentFont & IElementDescriptor = Object.assign(_componentFont, {
-  OptionName: "font",
-})
+const Font = Object.assign<typeof _componentFont, NestedComponentMeta>(_componentFont, {
+  componentType: "option",
+});
 
 // owners:
 // Label
@@ -261,15 +279,18 @@ type IFormatProps = React.PropsWithChildren<{
   type?: "billions" | "currency" | "day" | "decimal" | "exponential" | "fixedPoint" | "largeNumber" | "longDate" | "longTime" | "millions" | "millisecond" | "month" | "monthAndDay" | "monthAndYear" | "percent" | "quarter" | "quarterAndYear" | "shortDate" | "shortTime" | "thousands" | "trillions" | "year" | "dayOfWeek" | "hour" | "longDateLongTime" | "minute" | "second" | "shortDateShortTime";
   useCurrencyAccountingStyle?: boolean;
 }>
-const _componentFormat = memo(
-  (props: IFormatProps) => {
-    return React.createElement(NestedOption<IFormatProps>, { ...props });
-  }
-);
+const _componentFormat = (props: IFormatProps) => {
+  return React.createElement(NestedOption<IFormatProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "format",
+    },
+  });
+};
 
-const Format: typeof _componentFormat & IElementDescriptor = Object.assign(_componentFormat, {
-  OptionName: "format",
-})
+const Format = Object.assign<typeof _componentFormat, NestedComponentMeta>(_componentFormat, {
+  componentType: "option",
+});
 
 // owners:
 // BarGauge
@@ -277,15 +298,18 @@ type IGeometryProps = React.PropsWithChildren<{
   endAngle?: number;
   startAngle?: number;
 }>
-const _componentGeometry = memo(
-  (props: IGeometryProps) => {
-    return React.createElement(NestedOption<IGeometryProps>, { ...props });
-  }
-);
+const _componentGeometry = (props: IGeometryProps) => {
+  return React.createElement(NestedOption<IGeometryProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "geometry",
+    },
+  });
+};
 
-const Geometry: typeof _componentGeometry & IElementDescriptor = Object.assign(_componentGeometry, {
-  OptionName: "geometry",
-})
+const Geometry = Object.assign<typeof _componentGeometry, NestedComponentMeta>(_componentGeometry, {
+  componentType: "option",
+});
 
 // owners:
 // Legend
@@ -297,15 +321,18 @@ type IItemTextFormatProps = React.PropsWithChildren<{
   type?: "billions" | "currency" | "day" | "decimal" | "exponential" | "fixedPoint" | "largeNumber" | "longDate" | "longTime" | "millions" | "millisecond" | "month" | "monthAndDay" | "monthAndYear" | "percent" | "quarter" | "quarterAndYear" | "shortDate" | "shortTime" | "thousands" | "trillions" | "year" | "dayOfWeek" | "hour" | "longDateLongTime" | "minute" | "second" | "shortDateShortTime";
   useCurrencyAccountingStyle?: boolean;
 }>
-const _componentItemTextFormat = memo(
-  (props: IItemTextFormatProps) => {
-    return React.createElement(NestedOption<IItemTextFormatProps>, { ...props });
-  }
-);
+const _componentItemTextFormat = (props: IItemTextFormatProps) => {
+  return React.createElement(NestedOption<IItemTextFormatProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "itemTextFormat",
+    },
+  });
+};
 
-const ItemTextFormat: typeof _componentItemTextFormat & IElementDescriptor = Object.assign(_componentItemTextFormat, {
-  OptionName: "itemTextFormat",
-})
+const ItemTextFormat = Object.assign<typeof _componentItemTextFormat, NestedComponentMeta>(_componentItemTextFormat, {
+  componentType: "option",
+});
 
 // owners:
 // BarGauge
@@ -318,19 +345,22 @@ type ILabelProps = React.PropsWithChildren<{
   indent?: number;
   visible?: boolean;
 }>
-const _componentLabel = memo(
-  (props: ILabelProps) => {
-    return React.createElement(NestedOption<ILabelProps>, { ...props });
-  }
-);
-
-const Label: typeof _componentLabel & IElementDescriptor = Object.assign(_componentLabel, {
-  OptionName: "label",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false },
-    format: { optionName: "format", isCollectionItem: false }
-  },
-})
+const _componentLabel = (props: ILabelProps) => {
+  return React.createElement(NestedOption<ILabelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "label",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false },
+        format: { optionName: "format", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Label = Object.assign<typeof _componentLabel, NestedComponentMeta>(_componentLabel, {
+  componentType: "option",
+});
 
 // owners:
 // BarGauge
@@ -390,29 +420,32 @@ type ILegendProps = React.PropsWithChildren<{
   markerRender?: (...params: any) => React.ReactNode;
   markerComponent?: React.ComponentType<any>;
 }>
-const _componentLegend = memo(
-  (props: ILegendProps) => {
-    return React.createElement(NestedOption<ILegendProps>, { ...props });
-  }
-);
-
-const Legend: typeof _componentLegend & IElementDescriptor = Object.assign(_componentLegend, {
-  OptionName: "legend",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    font: { optionName: "font", isCollectionItem: false },
-    itemTextFormat: { optionName: "itemTextFormat", isCollectionItem: false },
-    legendBorder: { optionName: "border", isCollectionItem: false },
-    legendTitle: { optionName: "title", isCollectionItem: false },
-    margin: { optionName: "margin", isCollectionItem: false },
-    title: { optionName: "title", isCollectionItem: false }
-  },
-  TemplateProps: [{
-    tmplOption: "markerTemplate",
-    render: "markerRender",
-    component: "markerComponent"
-  }],
-})
+const _componentLegend = (props: ILegendProps) => {
+  return React.createElement(NestedOption<ILegendProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "legend",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        font: { optionName: "font", isCollectionItem: false },
+        itemTextFormat: { optionName: "itemTextFormat", isCollectionItem: false },
+        legendBorder: { optionName: "border", isCollectionItem: false },
+        legendTitle: { optionName: "title", isCollectionItem: false },
+        margin: { optionName: "margin", isCollectionItem: false },
+        title: { optionName: "title", isCollectionItem: false }
+      },
+      TemplateProps: [{
+        tmplOption: "markerTemplate",
+        render: "markerRender",
+        component: "markerComponent"
+      }],
+    },
+  });
+};
+
+const Legend = Object.assign<typeof _componentLegend, NestedComponentMeta>(_componentLegend, {
+  componentType: "option",
+});
 
 // owners:
 // Legend
@@ -424,15 +457,18 @@ type ILegendBorderProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentLegendBorder = memo(
-  (props: ILegendBorderProps) => {
-    return React.createElement(NestedOption<ILegendBorderProps>, { ...props });
-  }
-);
+const _componentLegendBorder = (props: ILegendBorderProps) => {
+  return React.createElement(NestedOption<ILegendBorderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
 
-const LegendBorder: typeof _componentLegendBorder & IElementDescriptor = Object.assign(_componentLegendBorder, {
-  OptionName: "border",
-})
+const LegendBorder = Object.assign<typeof _componentLegendBorder, NestedComponentMeta>(_componentLegendBorder, {
+  componentType: "option",
+});
 
 // owners:
 // Legend
@@ -454,21 +490,24 @@ type ILegendTitleProps = React.PropsWithChildren<{
   text?: string;
   verticalAlignment?: "bottom" | "top";
 }>
-const _componentLegendTitle = memo(
-  (props: ILegendTitleProps) => {
-    return React.createElement(NestedOption<ILegendTitleProps>, { ...props });
-  }
-);
-
-const LegendTitle: typeof _componentLegendTitle & IElementDescriptor = Object.assign(_componentLegendTitle, {
-  OptionName: "title",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false },
-    legendTitleSubtitle: { optionName: "subtitle", isCollectionItem: false },
-    margin: { optionName: "margin", isCollectionItem: false },
-    subtitle: { optionName: "subtitle", isCollectionItem: false }
-  },
-})
+const _componentLegendTitle = (props: ILegendTitleProps) => {
+  return React.createElement(NestedOption<ILegendTitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "title",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false },
+        legendTitleSubtitle: { optionName: "subtitle", isCollectionItem: false },
+        margin: { optionName: "margin", isCollectionItem: false },
+        subtitle: { optionName: "subtitle", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const LegendTitle = Object.assign<typeof _componentLegendTitle, NestedComponentMeta>(_componentLegendTitle, {
+  componentType: "option",
+});
 
 // owners:
 // LegendTitle
@@ -477,18 +516,21 @@ type ILegendTitleSubtitleProps = React.PropsWithChildren<{
   offset?: number;
   text?: string;
 }>
-const _componentLegendTitleSubtitle = memo(
-  (props: ILegendTitleSubtitleProps) => {
-    return React.createElement(NestedOption<ILegendTitleSubtitleProps>, { ...props });
-  }
-);
-
-const LegendTitleSubtitle: typeof _componentLegendTitleSubtitle & IElementDescriptor = Object.assign(_componentLegendTitleSubtitle, {
-  OptionName: "subtitle",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false }
-  },
-})
+const _componentLegendTitleSubtitle = (props: ILegendTitleSubtitleProps) => {
+  return React.createElement(NestedOption<ILegendTitleSubtitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "subtitle",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const LegendTitleSubtitle = Object.assign<typeof _componentLegendTitleSubtitle, NestedComponentMeta>(_componentLegendTitleSubtitle, {
+  componentType: "option",
+});
 
 // owners:
 // BarGauge
@@ -500,21 +542,24 @@ type ILoadingIndicatorProps = React.PropsWithChildren<{
   defaultShow?: boolean;
   onShowChange?: (value: boolean) => void;
 }>
-const _componentLoadingIndicator = memo(
-  (props: ILoadingIndicatorProps) => {
-    return React.createElement(NestedOption<ILoadingIndicatorProps>, { ...props });
-  }
-);
-
-const LoadingIndicator: typeof _componentLoadingIndicator & IElementDescriptor = Object.assign(_componentLoadingIndicator, {
-  OptionName: "loadingIndicator",
-  DefaultsProps: {
-    defaultShow: "show"
-  },
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false }
-  },
-})
+const _componentLoadingIndicator = (props: ILoadingIndicatorProps) => {
+  return React.createElement(NestedOption<ILoadingIndicatorProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "loadingIndicator",
+      DefaultsProps: {
+        defaultShow: "show"
+      },
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const LoadingIndicator = Object.assign<typeof _componentLoadingIndicator, NestedComponentMeta>(_componentLoadingIndicator, {
+  componentType: "option",
+});
 
 // owners:
 // Legend
@@ -527,15 +572,18 @@ type IMarginProps = React.PropsWithChildren<{
   right?: number;
   top?: number;
 }>
-const _componentMargin = memo(
-  (props: IMarginProps) => {
-    return React.createElement(NestedOption<IMarginProps>, { ...props });
-  }
-);
+const _componentMargin = (props: IMarginProps) => {
+  return React.createElement(NestedOption<IMarginProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "margin",
+    },
+  });
+};
 
-const Margin: typeof _componentMargin & IElementDescriptor = Object.assign(_componentMargin, {
-  OptionName: "margin",
-})
+const Margin = Object.assign<typeof _componentMargin, NestedComponentMeta>(_componentMargin, {
+  componentType: "option",
+});
 
 // owners:
 // Tooltip
@@ -546,15 +594,18 @@ type IShadowProps = React.PropsWithChildren<{
   offsetY?: number;
   opacity?: number;
 }>
-const _componentShadow = memo(
-  (props: IShadowProps) => {
-    return React.createElement(NestedOption<IShadowProps>, { ...props });
-  }
-);
+const _componentShadow = (props: IShadowProps) => {
+  return React.createElement(NestedOption<IShadowProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "shadow",
+    },
+  });
+};
 
-const Shadow: typeof _componentShadow & IElementDescriptor = Object.assign(_componentShadow, {
-  OptionName: "shadow",
-})
+const Shadow = Object.assign<typeof _componentShadow, NestedComponentMeta>(_componentShadow, {
+  componentType: "option",
+});
 
 // owners:
 // BarGauge
@@ -562,15 +613,18 @@ type ISizeProps = React.PropsWithChildren<{
   height?: number;
   width?: number;
 }>
-const _componentSize = memo(
-  (props: ISizeProps) => {
-    return React.createElement(NestedOption<ISizeProps>, { ...props });
-  }
-);
+const _componentSize = (props: ISizeProps) => {
+  return React.createElement(NestedOption<ISizeProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "size",
+    },
+  });
+};
 
-const Size: typeof _componentSize & IElementDescriptor = Object.assign(_componentSize, {
-  OptionName: "size",
-})
+const Size = Object.assign<typeof _componentSize, NestedComponentMeta>(_componentSize, {
+  componentType: "option",
+});
 
 // owners:
 // LegendTitle
@@ -582,15 +636,18 @@ type ISubtitleProps = React.PropsWithChildren<{
   textOverflow?: "ellipsis" | "hide" | "none";
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentSubtitle = memo(
-  (props: ISubtitleProps) => {
-    return React.createElement(NestedOption<ISubtitleProps>, { ...props });
-  }
-);
+const _componentSubtitle = (props: ISubtitleProps) => {
+  return React.createElement(NestedOption<ISubtitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "subtitle",
+    },
+  });
+};
 
-const Subtitle: typeof _componentSubtitle & IElementDescriptor = Object.assign(_componentSubtitle, {
-  OptionName: "subtitle",
-})
+const Subtitle = Object.assign<typeof _componentSubtitle, NestedComponentMeta>(_componentSubtitle, {
+  componentType: "option",
+});
 
 // owners:
 // Legend
@@ -617,15 +674,18 @@ type ITitleProps = React.PropsWithChildren<{
   textOverflow?: "ellipsis" | "hide" | "none";
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentTitle = memo(
-  (props: ITitleProps) => {
-    return React.createElement(NestedOption<ITitleProps>, { ...props });
-  }
-);
+const _componentTitle = (props: ITitleProps) => {
+  return React.createElement(NestedOption<ITitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "title",
+    },
+  });
+};
 
-const Title: typeof _componentTitle & IElementDescriptor = Object.assign(_componentTitle, {
-  OptionName: "title",
-})
+const Title = Object.assign<typeof _componentTitle, NestedComponentMeta>(_componentTitle, {
+  componentType: "option",
+});
 
 // owners:
 // BarGauge
@@ -661,27 +721,30 @@ type ITooltipProps = React.PropsWithChildren<{
   contentRender?: (...params: any) => React.ReactNode;
   contentComponent?: React.ComponentType<any>;
 }>
-const _componentTooltip = memo(
-  (props: ITooltipProps) => {
-    return React.createElement(NestedOption<ITooltipProps>, { ...props });
-  }
-);
-
-const Tooltip: typeof _componentTooltip & IElementDescriptor = Object.assign(_componentTooltip, {
-  OptionName: "tooltip",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    font: { optionName: "font", isCollectionItem: false },
-    format: { optionName: "format", isCollectionItem: false },
-    shadow: { optionName: "shadow", isCollectionItem: false },
-    tooltipBorder: { optionName: "border", isCollectionItem: false }
-  },
-  TemplateProps: [{
-    tmplOption: "contentTemplate",
-    render: "contentRender",
-    component: "contentComponent"
-  }],
-})
+const _componentTooltip = (props: ITooltipProps) => {
+  return React.createElement(NestedOption<ITooltipProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "tooltip",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        font: { optionName: "font", isCollectionItem: false },
+        format: { optionName: "format", isCollectionItem: false },
+        shadow: { optionName: "shadow", isCollectionItem: false },
+        tooltipBorder: { optionName: "border", isCollectionItem: false }
+      },
+      TemplateProps: [{
+        tmplOption: "contentTemplate",
+        render: "contentRender",
+        component: "contentComponent"
+      }],
+    },
+  });
+};
+
+const Tooltip = Object.assign<typeof _componentTooltip, NestedComponentMeta>(_componentTooltip, {
+  componentType: "option",
+});
 
 // owners:
 // Tooltip
@@ -692,15 +755,18 @@ type ITooltipBorderProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentTooltipBorder = memo(
-  (props: ITooltipBorderProps) => {
-    return React.createElement(NestedOption<ITooltipBorderProps>, { ...props });
-  }
-);
-
-const TooltipBorder: typeof _componentTooltipBorder & IElementDescriptor = Object.assign(_componentTooltipBorder, {
-  OptionName: "border",
-})
+const _componentTooltipBorder = (props: ITooltipBorderProps) => {
+  return React.createElement(NestedOption<ITooltipBorderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
+
+const TooltipBorder = Object.assign<typeof _componentTooltipBorder, NestedComponentMeta>(_componentTooltipBorder, {
+  componentType: "option",
+});
 
 export default BarGauge;
 export {
diff --git a/packages/devextreme-react/src/box.ts b/packages/devextreme-react/src/box.ts
index 326442aca219..57643a27f151 100644
--- a/packages/devextreme-react/src/box.ts
+++ b/packages/devextreme-react/src/box.ts
@@ -6,7 +6,7 @@ import dxBox, {
     Properties
 } from "devextreme/ui/box";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { dxBoxItem, ContentReadyEvent, DisposingEvent, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent, dxBoxOptions } from "devextreme/ui/box";
@@ -103,21 +103,24 @@ type IItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentItem = memo(
-  (props: IItemProps) => {
-    return React.createElement(NestedOption<IItemProps>, { ...props });
-  }
-);
-
-const Item: typeof _componentItem & IElementDescriptor = Object.assign(_componentItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentItem = (props: IItemProps) => {
+  return React.createElement(NestedOption<IItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const Item = Object.assign<typeof _componentItem, NestedComponentMeta>(_componentItem, {
+  componentType: "option",
+});
 
 export default Box;
 export {
diff --git a/packages/devextreme-react/src/bullet.ts b/packages/devextreme-react/src/bullet.ts
index bb4e80310a6b..fb483d22a392 100644
--- a/packages/devextreme-react/src/bullet.ts
+++ b/packages/devextreme-react/src/bullet.ts
@@ -5,7 +5,7 @@ import dxBullet, {
     Properties
 } from "devextreme/viz/bullet";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { DisposingEvent, DrawnEvent, ExportedEvent, ExportingEvent, FileSavingEvent, IncidentOccurredEvent, InitializedEvent, TooltipHiddenEvent, TooltipShownEvent } from "devextreme/viz/bullet";
@@ -80,15 +80,18 @@ type IBorderProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentBorder = memo(
-  (props: IBorderProps) => {
-    return React.createElement(NestedOption<IBorderProps>, { ...props });
-  }
-);
+const _componentBorder = (props: IBorderProps) => {
+  return React.createElement(NestedOption<IBorderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
 
-const Border: typeof _componentBorder & IElementDescriptor = Object.assign(_componentBorder, {
-  OptionName: "border",
-})
+const Border = Object.assign<typeof _componentBorder, NestedComponentMeta>(_componentBorder, {
+  componentType: "option",
+});
 
 // owners:
 // Tooltip
@@ -99,15 +102,18 @@ type IFontProps = React.PropsWithChildren<{
   size?: number | string;
   weight?: number;
 }>
-const _componentFont = memo(
-  (props: IFontProps) => {
-    return React.createElement(NestedOption<IFontProps>, { ...props });
-  }
-);
+const _componentFont = (props: IFontProps) => {
+  return React.createElement(NestedOption<IFontProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "font",
+    },
+  });
+};
 
-const Font: typeof _componentFont & IElementDescriptor = Object.assign(_componentFont, {
-  OptionName: "font",
-})
+const Font = Object.assign<typeof _componentFont, NestedComponentMeta>(_componentFont, {
+  componentType: "option",
+});
 
 // owners:
 // Tooltip
@@ -119,15 +125,18 @@ type IFormatProps = React.PropsWithChildren<{
   type?: "billions" | "currency" | "day" | "decimal" | "exponential" | "fixedPoint" | "largeNumber" | "longDate" | "longTime" | "millions" | "millisecond" | "month" | "monthAndDay" | "monthAndYear" | "percent" | "quarter" | "quarterAndYear" | "shortDate" | "shortTime" | "thousands" | "trillions" | "year" | "dayOfWeek" | "hour" | "longDateLongTime" | "minute" | "second" | "shortDateShortTime";
   useCurrencyAccountingStyle?: boolean;
 }>
-const _componentFormat = memo(
-  (props: IFormatProps) => {
-    return React.createElement(NestedOption<IFormatProps>, { ...props });
-  }
-);
+const _componentFormat = (props: IFormatProps) => {
+  return React.createElement(NestedOption<IFormatProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "format",
+    },
+  });
+};
 
-const Format: typeof _componentFormat & IElementDescriptor = Object.assign(_componentFormat, {
-  OptionName: "format",
-})
+const Format = Object.assign<typeof _componentFormat, NestedComponentMeta>(_componentFormat, {
+  componentType: "option",
+});
 
 // owners:
 // Bullet
@@ -137,15 +146,18 @@ type IMarginProps = React.PropsWithChildren<{
   right?: number;
   top?: number;
 }>
-const _componentMargin = memo(
-  (props: IMarginProps) => {
-    return React.createElement(NestedOption<IMarginProps>, { ...props });
-  }
-);
+const _componentMargin = (props: IMarginProps) => {
+  return React.createElement(NestedOption<IMarginProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "margin",
+    },
+  });
+};
 
-const Margin: typeof _componentMargin & IElementDescriptor = Object.assign(_componentMargin, {
-  OptionName: "margin",
-})
+const Margin = Object.assign<typeof _componentMargin, NestedComponentMeta>(_componentMargin, {
+  componentType: "option",
+});
 
 // owners:
 // Tooltip
@@ -156,15 +168,18 @@ type IShadowProps = React.PropsWithChildren<{
   offsetY?: number;
   opacity?: number;
 }>
-const _componentShadow = memo(
-  (props: IShadowProps) => {
-    return React.createElement(NestedOption<IShadowProps>, { ...props });
-  }
-);
+const _componentShadow = (props: IShadowProps) => {
+  return React.createElement(NestedOption<IShadowProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "shadow",
+    },
+  });
+};
 
-const Shadow: typeof _componentShadow & IElementDescriptor = Object.assign(_componentShadow, {
-  OptionName: "shadow",
-})
+const Shadow = Object.assign<typeof _componentShadow, NestedComponentMeta>(_componentShadow, {
+  componentType: "option",
+});
 
 // owners:
 // Bullet
@@ -172,15 +187,18 @@ type ISizeProps = React.PropsWithChildren<{
   height?: number;
   width?: number;
 }>
-const _componentSize = memo(
-  (props: ISizeProps) => {
-    return React.createElement(NestedOption<ISizeProps>, { ...props });
-  }
-);
+const _componentSize = (props: ISizeProps) => {
+  return React.createElement(NestedOption<ISizeProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "size",
+    },
+  });
+};
 
-const Size: typeof _componentSize & IElementDescriptor = Object.assign(_componentSize, {
-  OptionName: "size",
-})
+const Size = Object.assign<typeof _componentSize, NestedComponentMeta>(_componentSize, {
+  componentType: "option",
+});
 
 // owners:
 // Bullet
@@ -216,26 +234,29 @@ type ITooltipProps = React.PropsWithChildren<{
   contentRender?: (...params: any) => React.ReactNode;
   contentComponent?: React.ComponentType<any>;
 }>
-const _componentTooltip = memo(
-  (props: ITooltipProps) => {
-    return React.createElement(NestedOption<ITooltipProps>, { ...props });
-  }
-);
+const _componentTooltip = (props: ITooltipProps) => {
+  return React.createElement(NestedOption<ITooltipProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "tooltip",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        font: { optionName: "font", isCollectionItem: false },
+        format: { optionName: "format", isCollectionItem: false },
+        shadow: { optionName: "shadow", isCollectionItem: false }
+      },
+      TemplateProps: [{
+        tmplOption: "contentTemplate",
+        render: "contentRender",
+        component: "contentComponent"
+      }],
+    },
+  });
+};
 
-const Tooltip: typeof _componentTooltip & IElementDescriptor = Object.assign(_componentTooltip, {
-  OptionName: "tooltip",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    font: { optionName: "font", isCollectionItem: false },
-    format: { optionName: "format", isCollectionItem: false },
-    shadow: { optionName: "shadow", isCollectionItem: false }
-  },
-  TemplateProps: [{
-    tmplOption: "contentTemplate",
-    render: "contentRender",
-    component: "contentComponent"
-  }],
-})
+const Tooltip = Object.assign<typeof _componentTooltip, NestedComponentMeta>(_componentTooltip, {
+  componentType: "option",
+});
 
 export default Bullet;
 export {
diff --git a/packages/devextreme-react/src/button-group.ts b/packages/devextreme-react/src/button-group.ts
index 46856d7f85cf..571b262c964c 100644
--- a/packages/devextreme-react/src/button-group.ts
+++ b/packages/devextreme-react/src/button-group.ts
@@ -5,7 +5,7 @@ import dxButtonGroup, {
     Properties
 } from "devextreme/ui/button_group";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { ContentReadyEvent, DisposingEvent, InitializedEvent, ItemClickEvent } from "devextreme/ui/button_group";
@@ -100,21 +100,24 @@ type IItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentItem = memo(
-  (props: IItemProps) => {
-    return React.createElement(NestedOption<IItemProps>, { ...props });
-  }
-);
-
-const Item: typeof _componentItem & IElementDescriptor = Object.assign(_componentItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentItem = (props: IItemProps) => {
+  return React.createElement(NestedOption<IItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const Item = Object.assign<typeof _componentItem, NestedComponentMeta>(_componentItem, {
+  componentType: "option",
+});
 
 export default ButtonGroup;
 export {
diff --git a/packages/devextreme-react/src/chart.ts b/packages/devextreme-react/src/chart.ts
index f26d5dc9751d..5a65a346b7fb 100644
--- a/packages/devextreme-react/src/chart.ts
+++ b/packages/devextreme-react/src/chart.ts
@@ -5,7 +5,7 @@ import dxChart, {
     Properties
 } from "devextreme/viz/chart";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { ArgumentAxisClickEvent, DisposingEvent, DoneEvent, DrawnEvent, ExportedEvent, ExportingEvent, FileSavingEvent, IncidentOccurredEvent, InitializedEvent, LegendClickEvent, PointClickEvent, SeriesClickEvent, TooltipHiddenEvent, TooltipShownEvent, ZoomEndEvent, ZoomStartEvent, chartPointAggregationInfoObject, chartSeriesObject, dxChartAnnotationConfig, chartPointObject } from "devextreme/viz/chart";
@@ -125,15 +125,18 @@ type IAdaptiveLayoutProps = React.PropsWithChildren<{
   keepLabels?: boolean;
   width?: number;
 }>
-const _componentAdaptiveLayout = memo(
-  (props: IAdaptiveLayoutProps) => {
-    return React.createElement(NestedOption<IAdaptiveLayoutProps>, { ...props });
-  }
-);
+const _componentAdaptiveLayout = (props: IAdaptiveLayoutProps) => {
+  return React.createElement(NestedOption<IAdaptiveLayoutProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "adaptiveLayout",
+    },
+  });
+};
 
-const AdaptiveLayout: typeof _componentAdaptiveLayout & IElementDescriptor = Object.assign(_componentAdaptiveLayout, {
-  OptionName: "adaptiveLayout",
-})
+const AdaptiveLayout = Object.assign<typeof _componentAdaptiveLayout, NestedComponentMeta>(_componentAdaptiveLayout, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettings
@@ -142,15 +145,18 @@ type IAggregationProps = React.PropsWithChildren<{
   enabled?: boolean;
   method?: "avg" | "count" | "max" | "min" | "ohlc" | "range" | "sum" | "custom";
 }>
-const _componentAggregation = memo(
-  (props: IAggregationProps) => {
-    return React.createElement(NestedOption<IAggregationProps>, { ...props });
-  }
-);
+const _componentAggregation = (props: IAggregationProps) => {
+  return React.createElement(NestedOption<IAggregationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "aggregation",
+    },
+  });
+};
 
-const Aggregation: typeof _componentAggregation & IElementDescriptor = Object.assign(_componentAggregation, {
-  OptionName: "aggregation",
-})
+const Aggregation = Object.assign<typeof _componentAggregation, NestedComponentMeta>(_componentAggregation, {
+  componentType: "option",
+});
 
 // owners:
 // ArgumentAxis
@@ -165,15 +171,18 @@ type IAggregationIntervalProps = React.PropsWithChildren<{
   weeks?: number;
   years?: number;
 }>
-const _componentAggregationInterval = memo(
-  (props: IAggregationIntervalProps) => {
-    return React.createElement(NestedOption<IAggregationIntervalProps>, { ...props });
-  }
-);
+const _componentAggregationInterval = (props: IAggregationIntervalProps) => {
+  return React.createElement(NestedOption<IAggregationIntervalProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "aggregationInterval",
+    },
+  });
+};
 
-const AggregationInterval: typeof _componentAggregationInterval & IElementDescriptor = Object.assign(_componentAggregationInterval, {
-  OptionName: "aggregationInterval",
-})
+const AggregationInterval = Object.assign<typeof _componentAggregationInterval, NestedComponentMeta>(_componentAggregationInterval, {
+  componentType: "option",
+});
 
 // owners:
 // Chart
@@ -183,15 +192,18 @@ type IAnimationProps = React.PropsWithChildren<{
   enabled?: boolean;
   maxPointCountSupported?: number;
 }>
-const _componentAnimation = memo(
-  (props: IAnimationProps) => {
-    return React.createElement(NestedOption<IAnimationProps>, { ...props });
-  }
-);
+const _componentAnimation = (props: IAnimationProps) => {
+  return React.createElement(NestedOption<IAnimationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "animation",
+    },
+  });
+};
 
-const Animation: typeof _componentAnimation & IElementDescriptor = Object.assign(_componentAnimation, {
-  OptionName: "animation",
-})
+const Animation = Object.assign<typeof _componentAnimation, NestedComponentMeta>(_componentAnimation, {
+  componentType: "option",
+});
 
 // owners:
 // Chart
@@ -250,33 +262,36 @@ type IAnnotationProps = React.PropsWithChildren<{
   tooltipRender?: (...params: any) => React.ReactNode;
   tooltipComponent?: React.ComponentType<any>;
 }>
-const _componentAnnotation = memo(
-  (props: IAnnotationProps) => {
-    return React.createElement(NestedOption<IAnnotationProps>, { ...props });
-  }
-);
-
-const Annotation: typeof _componentAnnotation & IElementDescriptor = Object.assign(_componentAnnotation, {
-  OptionName: "annotations",
-  IsCollectionItem: true,
-  ExpectedChildren: {
-    annotationBorder: { optionName: "border", isCollectionItem: false },
-    annotationImage: { optionName: "image", isCollectionItem: false },
-    border: { optionName: "border", isCollectionItem: false },
-    font: { optionName: "font", isCollectionItem: false },
-    image: { optionName: "image", isCollectionItem: false },
-    shadow: { optionName: "shadow", isCollectionItem: false }
-  },
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }, {
-    tmplOption: "tooltipTemplate",
-    render: "tooltipRender",
-    component: "tooltipComponent"
-  }],
-})
+const _componentAnnotation = (props: IAnnotationProps) => {
+  return React.createElement(NestedOption<IAnnotationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "annotations",
+      IsCollectionItem: true,
+      ExpectedChildren: {
+        annotationBorder: { optionName: "border", isCollectionItem: false },
+        annotationImage: { optionName: "image", isCollectionItem: false },
+        border: { optionName: "border", isCollectionItem: false },
+        font: { optionName: "font", isCollectionItem: false },
+        image: { optionName: "image", isCollectionItem: false },
+        shadow: { optionName: "shadow", isCollectionItem: false }
+      },
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }, {
+        tmplOption: "tooltipTemplate",
+        render: "tooltipRender",
+        component: "tooltipComponent"
+      }],
+    },
+  });
+};
+
+const Annotation = Object.assign<typeof _componentAnnotation, NestedComponentMeta>(_componentAnnotation, {
+  componentType: "option",
+});
 
 // owners:
 // Annotation
@@ -289,15 +304,18 @@ type IAnnotationBorderProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentAnnotationBorder = memo(
-  (props: IAnnotationBorderProps) => {
-    return React.createElement(NestedOption<IAnnotationBorderProps>, { ...props });
-  }
-);
+const _componentAnnotationBorder = (props: IAnnotationBorderProps) => {
+  return React.createElement(NestedOption<IAnnotationBorderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
 
-const AnnotationBorder: typeof _componentAnnotationBorder & IElementDescriptor = Object.assign(_componentAnnotationBorder, {
-  OptionName: "border",
-})
+const AnnotationBorder = Object.assign<typeof _componentAnnotationBorder, NestedComponentMeta>(_componentAnnotationBorder, {
+  componentType: "option",
+});
 
 // owners:
 // Annotation
@@ -306,15 +324,18 @@ type IAnnotationImageProps = React.PropsWithChildren<{
   url?: string;
   width?: number;
 }>
-const _componentAnnotationImage = memo(
-  (props: IAnnotationImageProps) => {
-    return React.createElement(NestedOption<IAnnotationImageProps>, { ...props });
-  }
-);
+const _componentAnnotationImage = (props: IAnnotationImageProps) => {
+  return React.createElement(NestedOption<IAnnotationImageProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "image",
+    },
+  });
+};
 
-const AnnotationImage: typeof _componentAnnotationImage & IElementDescriptor = Object.assign(_componentAnnotationImage, {
-  OptionName: "image",
-})
+const AnnotationImage = Object.assign<typeof _componentAnnotationImage, NestedComponentMeta>(_componentAnnotationImage, {
+  componentType: "option",
+});
 
 // owners:
 // Chart
@@ -518,42 +539,45 @@ type IArgumentAxisProps = React.PropsWithChildren<{
   defaultVisualRange?: Array<Date | number | string> | CommonChartTypes.VisualRange;
   onVisualRangeChange?: (value: Array<Date | number | string> | CommonChartTypes.VisualRange) => void;
 }>
-const _componentArgumentAxis = memo(
-  (props: IArgumentAxisProps) => {
-    return React.createElement(NestedOption<IArgumentAxisProps>, { ...props });
-  }
-);
-
-const ArgumentAxis: typeof _componentArgumentAxis & IElementDescriptor = Object.assign(_componentArgumentAxis, {
-  OptionName: "argumentAxis",
-  DefaultsProps: {
-    defaultCategories: "categories",
-    defaultVisualRange: "visualRange"
-  },
-  ExpectedChildren: {
-    aggregationInterval: { optionName: "aggregationInterval", isCollectionItem: false },
-    axisConstantLineStyle: { optionName: "constantLineStyle", isCollectionItem: false },
-    axisLabel: { optionName: "label", isCollectionItem: false },
-    axisTitle: { optionName: "title", isCollectionItem: false },
-    break: { optionName: "breaks", isCollectionItem: true },
-    breakStyle: { optionName: "breakStyle", isCollectionItem: false },
-    constantLine: { optionName: "constantLines", isCollectionItem: true },
-    constantLineStyle: { optionName: "constantLineStyle", isCollectionItem: false },
-    grid: { optionName: "grid", isCollectionItem: false },
-    label: { optionName: "label", isCollectionItem: false },
-    minorGrid: { optionName: "minorGrid", isCollectionItem: false },
-    minorTick: { optionName: "minorTick", isCollectionItem: false },
-    minorTickInterval: { optionName: "minorTickInterval", isCollectionItem: false },
-    minVisualRangeLength: { optionName: "minVisualRangeLength", isCollectionItem: false },
-    strip: { optionName: "strips", isCollectionItem: true },
-    stripStyle: { optionName: "stripStyle", isCollectionItem: false },
-    tick: { optionName: "tick", isCollectionItem: false },
-    tickInterval: { optionName: "tickInterval", isCollectionItem: false },
-    title: { optionName: "title", isCollectionItem: false },
-    visualRange: { optionName: "visualRange", isCollectionItem: false },
-    wholeRange: { optionName: "wholeRange", isCollectionItem: false }
-  },
-})
+const _componentArgumentAxis = (props: IArgumentAxisProps) => {
+  return React.createElement(NestedOption<IArgumentAxisProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "argumentAxis",
+      DefaultsProps: {
+        defaultCategories: "categories",
+        defaultVisualRange: "visualRange"
+      },
+      ExpectedChildren: {
+        aggregationInterval: { optionName: "aggregationInterval", isCollectionItem: false },
+        axisConstantLineStyle: { optionName: "constantLineStyle", isCollectionItem: false },
+        axisLabel: { optionName: "label", isCollectionItem: false },
+        axisTitle: { optionName: "title", isCollectionItem: false },
+        break: { optionName: "breaks", isCollectionItem: true },
+        breakStyle: { optionName: "breakStyle", isCollectionItem: false },
+        constantLine: { optionName: "constantLines", isCollectionItem: true },
+        constantLineStyle: { optionName: "constantLineStyle", isCollectionItem: false },
+        grid: { optionName: "grid", isCollectionItem: false },
+        label: { optionName: "label", isCollectionItem: false },
+        minorGrid: { optionName: "minorGrid", isCollectionItem: false },
+        minorTick: { optionName: "minorTick", isCollectionItem: false },
+        minorTickInterval: { optionName: "minorTickInterval", isCollectionItem: false },
+        minVisualRangeLength: { optionName: "minVisualRangeLength", isCollectionItem: false },
+        strip: { optionName: "strips", isCollectionItem: true },
+        stripStyle: { optionName: "stripStyle", isCollectionItem: false },
+        tick: { optionName: "tick", isCollectionItem: false },
+        tickInterval: { optionName: "tickInterval", isCollectionItem: false },
+        title: { optionName: "title", isCollectionItem: false },
+        visualRange: { optionName: "visualRange", isCollectionItem: false },
+        wholeRange: { optionName: "wholeRange", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const ArgumentAxis = Object.assign<typeof _componentArgumentAxis, NestedComponentMeta>(_componentArgumentAxis, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettingsLabel
@@ -566,15 +590,18 @@ type IArgumentFormatProps = React.PropsWithChildren<{
   type?: "billions" | "currency" | "day" | "decimal" | "exponential" | "fixedPoint" | "largeNumber" | "longDate" | "longTime" | "millions" | "millisecond" | "month" | "monthAndDay" | "monthAndYear" | "percent" | "quarter" | "quarterAndYear" | "shortDate" | "shortTime" | "thousands" | "trillions" | "year" | "dayOfWeek" | "hour" | "longDateLongTime" | "minute" | "second" | "shortDateShortTime";
   useCurrencyAccountingStyle?: boolean;
 }>
-const _componentArgumentFormat = memo(
-  (props: IArgumentFormatProps) => {
-    return React.createElement(NestedOption<IArgumentFormatProps>, { ...props });
-  }
-);
+const _componentArgumentFormat = (props: IArgumentFormatProps) => {
+  return React.createElement(NestedOption<IArgumentFormatProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "argumentFormat",
+    },
+  });
+};
 
-const ArgumentFormat: typeof _componentArgumentFormat & IElementDescriptor = Object.assign(_componentArgumentFormat, {
-  OptionName: "argumentFormat",
-})
+const ArgumentFormat = Object.assign<typeof _componentArgumentFormat, NestedComponentMeta>(_componentArgumentFormat, {
+  componentType: "option",
+});
 
 // owners:
 // ArgumentAxis
@@ -593,15 +620,18 @@ type IAxisConstantLineStyleProps = React.PropsWithChildren<{
   paddingTopBottom?: number;
   width?: number;
 }>
-const _componentAxisConstantLineStyle = memo(
-  (props: IAxisConstantLineStyleProps) => {
-    return React.createElement(NestedOption<IAxisConstantLineStyleProps>, { ...props });
-  }
-);
+const _componentAxisConstantLineStyle = (props: IAxisConstantLineStyleProps) => {
+  return React.createElement(NestedOption<IAxisConstantLineStyleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "constantLineStyle",
+    },
+  });
+};
 
-const AxisConstantLineStyle: typeof _componentAxisConstantLineStyle & IElementDescriptor = Object.assign(_componentAxisConstantLineStyle, {
-  OptionName: "constantLineStyle",
-})
+const AxisConstantLineStyle = Object.assign<typeof _componentAxisConstantLineStyle, NestedComponentMeta>(_componentAxisConstantLineStyle, {
+  componentType: "option",
+});
 
 // owners:
 // AxisConstantLineStyle
@@ -613,15 +643,18 @@ type IAxisConstantLineStyleLabelProps = React.PropsWithChildren<{
   verticalAlignment?: "bottom" | "center" | "top";
   visible?: boolean;
 }>
-const _componentAxisConstantLineStyleLabel = memo(
-  (props: IAxisConstantLineStyleLabelProps) => {
-    return React.createElement(NestedOption<IAxisConstantLineStyleLabelProps>, { ...props });
-  }
-);
+const _componentAxisConstantLineStyleLabel = (props: IAxisConstantLineStyleLabelProps) => {
+  return React.createElement(NestedOption<IAxisConstantLineStyleLabelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "label",
+    },
+  });
+};
 
-const AxisConstantLineStyleLabel: typeof _componentAxisConstantLineStyleLabel & IElementDescriptor = Object.assign(_componentAxisConstantLineStyleLabel, {
-  OptionName: "label",
-})
+const AxisConstantLineStyleLabel = Object.assign<typeof _componentAxisConstantLineStyleLabel, NestedComponentMeta>(_componentAxisConstantLineStyleLabel, {
+  componentType: "option",
+});
 
 // owners:
 // ArgumentAxis
@@ -645,20 +678,23 @@ type IAxisLabelProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentAxisLabel = memo(
-  (props: IAxisLabelProps) => {
-    return React.createElement(NestedOption<IAxisLabelProps>, { ...props });
-  }
-);
+const _componentAxisLabel = (props: IAxisLabelProps) => {
+  return React.createElement(NestedOption<IAxisLabelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "label",
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
 
-const AxisLabel: typeof _componentAxisLabel & IElementDescriptor = Object.assign(_componentAxisLabel, {
-  OptionName: "label",
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const AxisLabel = Object.assign<typeof _componentAxisLabel, NestedComponentMeta>(_componentAxisLabel, {
+  componentType: "option",
+});
 
 // owners:
 // ArgumentAxis
@@ -671,15 +707,18 @@ type IAxisTitleProps = React.PropsWithChildren<{
   textOverflow?: "ellipsis" | "hide" | "none";
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentAxisTitle = memo(
-  (props: IAxisTitleProps) => {
-    return React.createElement(NestedOption<IAxisTitleProps>, { ...props });
-  }
-);
+const _componentAxisTitle = (props: IAxisTitleProps) => {
+  return React.createElement(NestedOption<IAxisTitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "title",
+    },
+  });
+};
 
-const AxisTitle: typeof _componentAxisTitle & IElementDescriptor = Object.assign(_componentAxisTitle, {
-  OptionName: "title",
-})
+const AxisTitle = Object.assign<typeof _componentAxisTitle, NestedComponentMeta>(_componentAxisTitle, {
+  componentType: "option",
+});
 
 // owners:
 // CommonPaneSettings
@@ -687,15 +726,18 @@ type IBackgroundColorProps = React.PropsWithChildren<{
   base?: string;
   fillId?: string;
 }>
-const _componentBackgroundColor = memo(
-  (props: IBackgroundColorProps) => {
-    return React.createElement(NestedOption<IBackgroundColorProps>, { ...props });
-  }
-);
+const _componentBackgroundColor = (props: IBackgroundColorProps) => {
+  return React.createElement(NestedOption<IBackgroundColorProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "backgroundColor",
+    },
+  });
+};
 
-const BackgroundColor: typeof _componentBackgroundColor & IElementDescriptor = Object.assign(_componentBackgroundColor, {
-  OptionName: "backgroundColor",
-})
+const BackgroundColor = Object.assign<typeof _componentBackgroundColor, NestedComponentMeta>(_componentBackgroundColor, {
+  componentType: "option",
+});
 
 // owners:
 // Annotation
@@ -721,15 +763,18 @@ type IBorderProps = React.PropsWithChildren<{
   right?: boolean;
   top?: boolean;
 }>
-const _componentBorder = memo(
-  (props: IBorderProps) => {
-    return React.createElement(NestedOption<IBorderProps>, { ...props });
-  }
-);
+const _componentBorder = (props: IBorderProps) => {
+  return React.createElement(NestedOption<IBorderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
 
-const Border: typeof _componentBorder & IElementDescriptor = Object.assign(_componentBorder, {
-  OptionName: "border",
-})
+const Border = Object.assign<typeof _componentBorder, NestedComponentMeta>(_componentBorder, {
+  componentType: "option",
+});
 
 // owners:
 // ArgumentAxis
@@ -738,16 +783,19 @@ type IBreakProps = React.PropsWithChildren<{
   endValue?: Date | number | string;
   startValue?: Date | number | string;
 }>
-const _componentBreak = memo(
-  (props: IBreakProps) => {
-    return React.createElement(NestedOption<IBreakProps>, { ...props });
-  }
-);
+const _componentBreak = (props: IBreakProps) => {
+  return React.createElement(NestedOption<IBreakProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "breaks",
+      IsCollectionItem: true,
+    },
+  });
+};
 
-const Break: typeof _componentBreak & IElementDescriptor = Object.assign(_componentBreak, {
-  OptionName: "breaks",
-  IsCollectionItem: true,
-})
+const Break = Object.assign<typeof _componentBreak, NestedComponentMeta>(_componentBreak, {
+  componentType: "option",
+});
 
 // owners:
 // ArgumentAxis
@@ -756,15 +804,18 @@ type IBreakStyleProps = React.PropsWithChildren<{
   line?: "straight" | "waved";
   width?: number;
 }>
-const _componentBreakStyle = memo(
-  (props: IBreakStyleProps) => {
-    return React.createElement(NestedOption<IBreakStyleProps>, { ...props });
-  }
-);
+const _componentBreakStyle = (props: IBreakStyleProps) => {
+  return React.createElement(NestedOption<IBreakStyleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "breakStyle",
+    },
+  });
+};
 
-const BreakStyle: typeof _componentBreakStyle & IElementDescriptor = Object.assign(_componentBreakStyle, {
-  OptionName: "breakStyle",
-})
+const BreakStyle = Object.assign<typeof _componentBreakStyle, NestedComponentMeta>(_componentBreakStyle, {
+  componentType: "option",
+});
 
 // owners:
 // Chart
@@ -790,21 +841,24 @@ type IChartTitleProps = React.PropsWithChildren<{
   verticalAlignment?: "bottom" | "top";
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentChartTitle = memo(
-  (props: IChartTitleProps) => {
-    return React.createElement(NestedOption<IChartTitleProps>, { ...props });
-  }
-);
+const _componentChartTitle = (props: IChartTitleProps) => {
+  return React.createElement(NestedOption<IChartTitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "title",
+      ExpectedChildren: {
+        chartTitleSubtitle: { optionName: "subtitle", isCollectionItem: false },
+        font: { optionName: "font", isCollectionItem: false },
+        margin: { optionName: "margin", isCollectionItem: false },
+        subtitle: { optionName: "subtitle", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const ChartTitle: typeof _componentChartTitle & IElementDescriptor = Object.assign(_componentChartTitle, {
-  OptionName: "title",
-  ExpectedChildren: {
-    chartTitleSubtitle: { optionName: "subtitle", isCollectionItem: false },
-    font: { optionName: "font", isCollectionItem: false },
-    margin: { optionName: "margin", isCollectionItem: false },
-    subtitle: { optionName: "subtitle", isCollectionItem: false }
-  },
-})
+const ChartTitle = Object.assign<typeof _componentChartTitle, NestedComponentMeta>(_componentChartTitle, {
+  componentType: "option",
+});
 
 // owners:
 // ChartTitle
@@ -815,18 +869,21 @@ type IChartTitleSubtitleProps = React.PropsWithChildren<{
   textOverflow?: "ellipsis" | "hide" | "none";
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentChartTitleSubtitle = memo(
-  (props: IChartTitleSubtitleProps) => {
-    return React.createElement(NestedOption<IChartTitleSubtitleProps>, { ...props });
-  }
-);
+const _componentChartTitleSubtitle = (props: IChartTitleSubtitleProps) => {
+  return React.createElement(NestedOption<IChartTitleSubtitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "subtitle",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const ChartTitleSubtitle: typeof _componentChartTitleSubtitle & IElementDescriptor = Object.assign(_componentChartTitleSubtitle, {
-  OptionName: "subtitle",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false }
-  },
-})
+const ChartTitleSubtitle = Object.assign<typeof _componentChartTitleSubtitle, NestedComponentMeta>(_componentChartTitleSubtitle, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettings
@@ -839,15 +896,18 @@ type IColorProps = React.PropsWithChildren<{
   base?: string;
   fillId?: string;
 }>
-const _componentColor = memo(
-  (props: IColorProps) => {
-    return React.createElement(NestedOption<IColorProps>, { ...props });
-  }
-);
+const _componentColor = (props: IColorProps) => {
+  return React.createElement(NestedOption<IColorProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "color",
+    },
+  });
+};
 
-const Color: typeof _componentColor & IElementDescriptor = Object.assign(_componentColor, {
-  OptionName: "color",
-})
+const Color = Object.assign<typeof _componentColor, NestedComponentMeta>(_componentColor, {
+  componentType: "option",
+});
 
 // owners:
 // Chart
@@ -905,24 +965,27 @@ type ICommonAnnotationSettingsProps = React.PropsWithChildren<{
   tooltipRender?: (...params: any) => React.ReactNode;
   tooltipComponent?: React.ComponentType<any>;
 }>
-const _componentCommonAnnotationSettings = memo(
-  (props: ICommonAnnotationSettingsProps) => {
-    return React.createElement(NestedOption<ICommonAnnotationSettingsProps>, { ...props });
-  }
-);
-
-const CommonAnnotationSettings: typeof _componentCommonAnnotationSettings & IElementDescriptor = Object.assign(_componentCommonAnnotationSettings, {
-  OptionName: "commonAnnotationSettings",
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }, {
-    tmplOption: "tooltipTemplate",
-    render: "tooltipRender",
-    component: "tooltipComponent"
-  }],
-})
+const _componentCommonAnnotationSettings = (props: ICommonAnnotationSettingsProps) => {
+  return React.createElement(NestedOption<ICommonAnnotationSettingsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "commonAnnotationSettings",
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }, {
+        tmplOption: "tooltipTemplate",
+        render: "tooltipRender",
+        component: "tooltipComponent"
+      }],
+    },
+  });
+};
+
+const CommonAnnotationSettings = Object.assign<typeof _componentCommonAnnotationSettings, NestedComponentMeta>(_componentCommonAnnotationSettings, {
+  componentType: "option",
+});
 
 // owners:
 // Chart
@@ -1016,23 +1079,26 @@ type ICommonAxisSettingsProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentCommonAxisSettings = memo(
-  (props: ICommonAxisSettingsProps) => {
-    return React.createElement(NestedOption<ICommonAxisSettingsProps>, { ...props });
-  }
-);
-
-const CommonAxisSettings: typeof _componentCommonAxisSettings & IElementDescriptor = Object.assign(_componentCommonAxisSettings, {
-  OptionName: "commonAxisSettings",
-  ExpectedChildren: {
-    commonAxisSettingsConstantLineStyle: { optionName: "constantLineStyle", isCollectionItem: false },
-    commonAxisSettingsLabel: { optionName: "label", isCollectionItem: false },
-    commonAxisSettingsTitle: { optionName: "title", isCollectionItem: false },
-    constantLineStyle: { optionName: "constantLineStyle", isCollectionItem: false },
-    label: { optionName: "label", isCollectionItem: false },
-    title: { optionName: "title", isCollectionItem: false }
-  },
-})
+const _componentCommonAxisSettings = (props: ICommonAxisSettingsProps) => {
+  return React.createElement(NestedOption<ICommonAxisSettingsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "commonAxisSettings",
+      ExpectedChildren: {
+        commonAxisSettingsConstantLineStyle: { optionName: "constantLineStyle", isCollectionItem: false },
+        commonAxisSettingsLabel: { optionName: "label", isCollectionItem: false },
+        commonAxisSettingsTitle: { optionName: "title", isCollectionItem: false },
+        constantLineStyle: { optionName: "constantLineStyle", isCollectionItem: false },
+        label: { optionName: "label", isCollectionItem: false },
+        title: { optionName: "title", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const CommonAxisSettings = Object.assign<typeof _componentCommonAxisSettings, NestedComponentMeta>(_componentCommonAxisSettings, {
+  componentType: "option",
+});
 
 // owners:
 // CommonAxisSettings
@@ -1048,19 +1114,22 @@ type ICommonAxisSettingsConstantLineStyleProps = React.PropsWithChildren<{
   paddingTopBottom?: number;
   width?: number;
 }>
-const _componentCommonAxisSettingsConstantLineStyle = memo(
-  (props: ICommonAxisSettingsConstantLineStyleProps) => {
-    return React.createElement(NestedOption<ICommonAxisSettingsConstantLineStyleProps>, { ...props });
-  }
-);
+const _componentCommonAxisSettingsConstantLineStyle = (props: ICommonAxisSettingsConstantLineStyleProps) => {
+  return React.createElement(NestedOption<ICommonAxisSettingsConstantLineStyleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "constantLineStyle",
+      ExpectedChildren: {
+        commonAxisSettingsConstantLineStyleLabel: { optionName: "label", isCollectionItem: false },
+        label: { optionName: "label", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const CommonAxisSettingsConstantLineStyle: typeof _componentCommonAxisSettingsConstantLineStyle & IElementDescriptor = Object.assign(_componentCommonAxisSettingsConstantLineStyle, {
-  OptionName: "constantLineStyle",
-  ExpectedChildren: {
-    commonAxisSettingsConstantLineStyleLabel: { optionName: "label", isCollectionItem: false },
-    label: { optionName: "label", isCollectionItem: false }
-  },
-})
+const CommonAxisSettingsConstantLineStyle = Object.assign<typeof _componentCommonAxisSettingsConstantLineStyle, NestedComponentMeta>(_componentCommonAxisSettingsConstantLineStyle, {
+  componentType: "option",
+});
 
 // owners:
 // CommonAxisSettingsConstantLineStyle
@@ -1069,15 +1138,18 @@ type ICommonAxisSettingsConstantLineStyleLabelProps = React.PropsWithChildren<{
   position?: "inside" | "outside";
   visible?: boolean;
 }>
-const _componentCommonAxisSettingsConstantLineStyleLabel = memo(
-  (props: ICommonAxisSettingsConstantLineStyleLabelProps) => {
-    return React.createElement(NestedOption<ICommonAxisSettingsConstantLineStyleLabelProps>, { ...props });
-  }
-);
+const _componentCommonAxisSettingsConstantLineStyleLabel = (props: ICommonAxisSettingsConstantLineStyleLabelProps) => {
+  return React.createElement(NestedOption<ICommonAxisSettingsConstantLineStyleLabelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "label",
+    },
+  });
+};
 
-const CommonAxisSettingsConstantLineStyleLabel: typeof _componentCommonAxisSettingsConstantLineStyleLabel & IElementDescriptor = Object.assign(_componentCommonAxisSettingsConstantLineStyleLabel, {
-  OptionName: "label",
-})
+const CommonAxisSettingsConstantLineStyleLabel = Object.assign<typeof _componentCommonAxisSettingsConstantLineStyleLabel, NestedComponentMeta>(_componentCommonAxisSettingsConstantLineStyleLabel, {
+  componentType: "option",
+});
 
 // owners:
 // CommonAxisSettings
@@ -1097,20 +1169,23 @@ type ICommonAxisSettingsLabelProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentCommonAxisSettingsLabel = memo(
-  (props: ICommonAxisSettingsLabelProps) => {
-    return React.createElement(NestedOption<ICommonAxisSettingsLabelProps>, { ...props });
-  }
-);
+const _componentCommonAxisSettingsLabel = (props: ICommonAxisSettingsLabelProps) => {
+  return React.createElement(NestedOption<ICommonAxisSettingsLabelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "label",
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
 
-const CommonAxisSettingsLabel: typeof _componentCommonAxisSettingsLabel & IElementDescriptor = Object.assign(_componentCommonAxisSettingsLabel, {
-  OptionName: "label",
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const CommonAxisSettingsLabel = Object.assign<typeof _componentCommonAxisSettingsLabel, NestedComponentMeta>(_componentCommonAxisSettingsLabel, {
+  componentType: "option",
+});
 
 // owners:
 // CommonAxisSettings
@@ -1121,15 +1196,18 @@ type ICommonAxisSettingsTitleProps = React.PropsWithChildren<{
   textOverflow?: "ellipsis" | "hide" | "none";
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentCommonAxisSettingsTitle = memo(
-  (props: ICommonAxisSettingsTitleProps) => {
-    return React.createElement(NestedOption<ICommonAxisSettingsTitleProps>, { ...props });
-  }
-);
+const _componentCommonAxisSettingsTitle = (props: ICommonAxisSettingsTitleProps) => {
+  return React.createElement(NestedOption<ICommonAxisSettingsTitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "title",
+    },
+  });
+};
 
-const CommonAxisSettingsTitle: typeof _componentCommonAxisSettingsTitle & IElementDescriptor = Object.assign(_componentCommonAxisSettingsTitle, {
-  OptionName: "title",
-})
+const CommonAxisSettingsTitle = Object.assign<typeof _componentCommonAxisSettingsTitle, NestedComponentMeta>(_componentCommonAxisSettingsTitle, {
+  componentType: "option",
+});
 
 // owners:
 // Chart
@@ -1147,20 +1225,23 @@ type ICommonPaneSettingsProps = React.PropsWithChildren<{
     width?: number;
   };
 }>
-const _componentCommonPaneSettings = memo(
-  (props: ICommonPaneSettingsProps) => {
-    return React.createElement(NestedOption<ICommonPaneSettingsProps>, { ...props });
-  }
-);
+const _componentCommonPaneSettings = (props: ICommonPaneSettingsProps) => {
+  return React.createElement(NestedOption<ICommonPaneSettingsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "commonPaneSettings",
+      ExpectedChildren: {
+        backgroundColor: { optionName: "backgroundColor", isCollectionItem: false },
+        border: { optionName: "border", isCollectionItem: false },
+        paneBorder: { optionName: "border", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const CommonPaneSettings: typeof _componentCommonPaneSettings & IElementDescriptor = Object.assign(_componentCommonPaneSettings, {
-  OptionName: "commonPaneSettings",
-  ExpectedChildren: {
-    backgroundColor: { optionName: "backgroundColor", isCollectionItem: false },
-    border: { optionName: "border", isCollectionItem: false },
-    paneBorder: { optionName: "border", isCollectionItem: false }
-  },
-})
+const CommonPaneSettings = Object.assign<typeof _componentCommonPaneSettings, NestedComponentMeta>(_componentCommonPaneSettings, {
+  componentType: "option",
+});
 
 // owners:
 // Chart
@@ -1352,30 +1433,33 @@ type ICommonSeriesSettingsProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentCommonSeriesSettings = memo(
-  (props: ICommonSeriesSettingsProps) => {
-    return React.createElement(NestedOption<ICommonSeriesSettingsProps>, { ...props });
-  }
-);
-
-const CommonSeriesSettings: typeof _componentCommonSeriesSettings & IElementDescriptor = Object.assign(_componentCommonSeriesSettings, {
-  OptionName: "commonSeriesSettings",
-  ExpectedChildren: {
-    aggregation: { optionName: "aggregation", isCollectionItem: false },
-    border: { optionName: "border", isCollectionItem: false },
-    color: { optionName: "color", isCollectionItem: false },
-    commonSeriesSettingsHoverStyle: { optionName: "hoverStyle", isCollectionItem: false },
-    commonSeriesSettingsLabel: { optionName: "label", isCollectionItem: false },
-    commonSeriesSettingsSelectionStyle: { optionName: "selectionStyle", isCollectionItem: false },
-    hoverStyle: { optionName: "hoverStyle", isCollectionItem: false },
-    label: { optionName: "label", isCollectionItem: false },
-    point: { optionName: "point", isCollectionItem: false },
-    reduction: { optionName: "reduction", isCollectionItem: false },
-    selectionStyle: { optionName: "selectionStyle", isCollectionItem: false },
-    seriesBorder: { optionName: "border", isCollectionItem: false },
-    valueErrorBar: { optionName: "valueErrorBar", isCollectionItem: false }
-  },
-})
+const _componentCommonSeriesSettings = (props: ICommonSeriesSettingsProps) => {
+  return React.createElement(NestedOption<ICommonSeriesSettingsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "commonSeriesSettings",
+      ExpectedChildren: {
+        aggregation: { optionName: "aggregation", isCollectionItem: false },
+        border: { optionName: "border", isCollectionItem: false },
+        color: { optionName: "color", isCollectionItem: false },
+        commonSeriesSettingsHoverStyle: { optionName: "hoverStyle", isCollectionItem: false },
+        commonSeriesSettingsLabel: { optionName: "label", isCollectionItem: false },
+        commonSeriesSettingsSelectionStyle: { optionName: "selectionStyle", isCollectionItem: false },
+        hoverStyle: { optionName: "hoverStyle", isCollectionItem: false },
+        label: { optionName: "label", isCollectionItem: false },
+        point: { optionName: "point", isCollectionItem: false },
+        reduction: { optionName: "reduction", isCollectionItem: false },
+        selectionStyle: { optionName: "selectionStyle", isCollectionItem: false },
+        seriesBorder: { optionName: "border", isCollectionItem: false },
+        valueErrorBar: { optionName: "valueErrorBar", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const CommonSeriesSettings = Object.assign<typeof _componentCommonSeriesSettings, NestedComponentMeta>(_componentCommonSeriesSettings, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettings
@@ -1397,21 +1481,24 @@ type ICommonSeriesSettingsHoverStyleProps = React.PropsWithChildren<{
   highlight?: boolean;
   width?: number;
 }>
-const _componentCommonSeriesSettingsHoverStyle = memo(
-  (props: ICommonSeriesSettingsHoverStyleProps) => {
-    return React.createElement(NestedOption<ICommonSeriesSettingsHoverStyleProps>, { ...props });
-  }
-);
+const _componentCommonSeriesSettingsHoverStyle = (props: ICommonSeriesSettingsHoverStyleProps) => {
+  return React.createElement(NestedOption<ICommonSeriesSettingsHoverStyleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hoverStyle",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        color: { optionName: "color", isCollectionItem: false },
+        hatching: { optionName: "hatching", isCollectionItem: false },
+        seriesBorder: { optionName: "border", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const CommonSeriesSettingsHoverStyle: typeof _componentCommonSeriesSettingsHoverStyle & IElementDescriptor = Object.assign(_componentCommonSeriesSettingsHoverStyle, {
-  OptionName: "hoverStyle",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    color: { optionName: "color", isCollectionItem: false },
-    hatching: { optionName: "hatching", isCollectionItem: false },
-    seriesBorder: { optionName: "border", isCollectionItem: false }
-  },
-})
+const CommonSeriesSettingsHoverStyle = Object.assign<typeof _componentCommonSeriesSettingsHoverStyle, NestedComponentMeta>(_componentCommonSeriesSettingsHoverStyle, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettings
@@ -1441,23 +1528,26 @@ type ICommonSeriesSettingsLabelProps = React.PropsWithChildren<{
   verticalOffset?: number;
   visible?: boolean;
 }>
-const _componentCommonSeriesSettingsLabel = memo(
-  (props: ICommonSeriesSettingsLabelProps) => {
-    return React.createElement(NestedOption<ICommonSeriesSettingsLabelProps>, { ...props });
-  }
-);
-
-const CommonSeriesSettingsLabel: typeof _componentCommonSeriesSettingsLabel & IElementDescriptor = Object.assign(_componentCommonSeriesSettingsLabel, {
-  OptionName: "label",
-  ExpectedChildren: {
-    argumentFormat: { optionName: "argumentFormat", isCollectionItem: false },
-    border: { optionName: "border", isCollectionItem: false },
-    connector: { optionName: "connector", isCollectionItem: false },
-    font: { optionName: "font", isCollectionItem: false },
-    format: { optionName: "format", isCollectionItem: false },
-    seriesBorder: { optionName: "border", isCollectionItem: false }
-  },
-})
+const _componentCommonSeriesSettingsLabel = (props: ICommonSeriesSettingsLabelProps) => {
+  return React.createElement(NestedOption<ICommonSeriesSettingsLabelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "label",
+      ExpectedChildren: {
+        argumentFormat: { optionName: "argumentFormat", isCollectionItem: false },
+        border: { optionName: "border", isCollectionItem: false },
+        connector: { optionName: "connector", isCollectionItem: false },
+        font: { optionName: "font", isCollectionItem: false },
+        format: { optionName: "format", isCollectionItem: false },
+        seriesBorder: { optionName: "border", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const CommonSeriesSettingsLabel = Object.assign<typeof _componentCommonSeriesSettingsLabel, NestedComponentMeta>(_componentCommonSeriesSettingsLabel, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettings
@@ -1479,21 +1569,24 @@ type ICommonSeriesSettingsSelectionStyleProps = React.PropsWithChildren<{
   highlight?: boolean;
   width?: number;
 }>
-const _componentCommonSeriesSettingsSelectionStyle = memo(
-  (props: ICommonSeriesSettingsSelectionStyleProps) => {
-    return React.createElement(NestedOption<ICommonSeriesSettingsSelectionStyleProps>, { ...props });
-  }
-);
+const _componentCommonSeriesSettingsSelectionStyle = (props: ICommonSeriesSettingsSelectionStyleProps) => {
+  return React.createElement(NestedOption<ICommonSeriesSettingsSelectionStyleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "selectionStyle",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        color: { optionName: "color", isCollectionItem: false },
+        hatching: { optionName: "hatching", isCollectionItem: false },
+        seriesBorder: { optionName: "border", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const CommonSeriesSettingsSelectionStyle: typeof _componentCommonSeriesSettingsSelectionStyle & IElementDescriptor = Object.assign(_componentCommonSeriesSettingsSelectionStyle, {
-  OptionName: "selectionStyle",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    color: { optionName: "color", isCollectionItem: false },
-    hatching: { optionName: "hatching", isCollectionItem: false },
-    seriesBorder: { optionName: "border", isCollectionItem: false }
-  },
-})
+const CommonSeriesSettingsSelectionStyle = Object.assign<typeof _componentCommonSeriesSettingsSelectionStyle, NestedComponentMeta>(_componentCommonSeriesSettingsSelectionStyle, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettingsLabel
@@ -1502,15 +1595,18 @@ type IConnectorProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentConnector = memo(
-  (props: IConnectorProps) => {
-    return React.createElement(NestedOption<IConnectorProps>, { ...props });
-  }
-);
+const _componentConnector = (props: IConnectorProps) => {
+  return React.createElement(NestedOption<IConnectorProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "connector",
+    },
+  });
+};
 
-const Connector: typeof _componentConnector & IElementDescriptor = Object.assign(_componentConnector, {
-  OptionName: "connector",
-})
+const Connector = Object.assign<typeof _componentConnector, NestedComponentMeta>(_componentConnector, {
+  componentType: "option",
+});
 
 // owners:
 // ArgumentAxis
@@ -1533,16 +1629,19 @@ type IConstantLineProps = React.PropsWithChildren<{
   value?: Date | number | string;
   width?: number;
 }>
-const _componentConstantLine = memo(
-  (props: IConstantLineProps) => {
-    return React.createElement(NestedOption<IConstantLineProps>, { ...props });
-  }
-);
+const _componentConstantLine = (props: IConstantLineProps) => {
+  return React.createElement(NestedOption<IConstantLineProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "constantLines",
+      IsCollectionItem: true,
+    },
+  });
+};
 
-const ConstantLine: typeof _componentConstantLine & IElementDescriptor = Object.assign(_componentConstantLine, {
-  OptionName: "constantLines",
-  IsCollectionItem: true,
-})
+const ConstantLine = Object.assign<typeof _componentConstantLine, NestedComponentMeta>(_componentConstantLine, {
+  componentType: "option",
+});
 
 // owners:
 // ConstantLine
@@ -1555,15 +1654,18 @@ type IConstantLineLabelProps = React.PropsWithChildren<{
   verticalAlignment?: "bottom" | "center" | "top";
   visible?: boolean;
 }>
-const _componentConstantLineLabel = memo(
-  (props: IConstantLineLabelProps) => {
-    return React.createElement(NestedOption<IConstantLineLabelProps>, { ...props });
-  }
-);
+const _componentConstantLineLabel = (props: IConstantLineLabelProps) => {
+  return React.createElement(NestedOption<IConstantLineLabelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "label",
+    },
+  });
+};
 
-const ConstantLineLabel: typeof _componentConstantLineLabel & IElementDescriptor = Object.assign(_componentConstantLineLabel, {
-  OptionName: "label",
-})
+const ConstantLineLabel = Object.assign<typeof _componentConstantLineLabel, NestedComponentMeta>(_componentConstantLineLabel, {
+  componentType: "option",
+});
 
 // owners:
 // ArgumentAxis
@@ -1583,15 +1685,18 @@ type IConstantLineStyleProps = React.PropsWithChildren<{
   paddingTopBottom?: number;
   width?: number;
 }>
-const _componentConstantLineStyle = memo(
-  (props: IConstantLineStyleProps) => {
-    return React.createElement(NestedOption<IConstantLineStyleProps>, { ...props });
-  }
-);
+const _componentConstantLineStyle = (props: IConstantLineStyleProps) => {
+  return React.createElement(NestedOption<IConstantLineStyleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "constantLineStyle",
+    },
+  });
+};
 
-const ConstantLineStyle: typeof _componentConstantLineStyle & IElementDescriptor = Object.assign(_componentConstantLineStyle, {
-  OptionName: "constantLineStyle",
-})
+const ConstantLineStyle = Object.assign<typeof _componentConstantLineStyle, NestedComponentMeta>(_componentConstantLineStyle, {
+  componentType: "option",
+});
 
 // owners:
 // Chart
@@ -1637,21 +1742,24 @@ type ICrosshairProps = React.PropsWithChildren<{
   };
   width?: number;
 }>
-const _componentCrosshair = memo(
-  (props: ICrosshairProps) => {
-    return React.createElement(NestedOption<ICrosshairProps>, { ...props });
-  }
-);
+const _componentCrosshair = (props: ICrosshairProps) => {
+  return React.createElement(NestedOption<ICrosshairProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "crosshair",
+      ExpectedChildren: {
+        horizontalLine: { optionName: "horizontalLine", isCollectionItem: false },
+        horizontalLineLabel: { optionName: "label", isCollectionItem: false },
+        label: { optionName: "label", isCollectionItem: false },
+        verticalLine: { optionName: "verticalLine", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const Crosshair: typeof _componentCrosshair & IElementDescriptor = Object.assign(_componentCrosshair, {
-  OptionName: "crosshair",
-  ExpectedChildren: {
-    horizontalLine: { optionName: "horizontalLine", isCollectionItem: false },
-    horizontalLineLabel: { optionName: "label", isCollectionItem: false },
-    label: { optionName: "label", isCollectionItem: false },
-    verticalLine: { optionName: "verticalLine", isCollectionItem: false }
-  },
-})
+const Crosshair = Object.assign<typeof _componentCrosshair, NestedComponentMeta>(_componentCrosshair, {
+  componentType: "option",
+});
 
 // owners:
 // Chart
@@ -1660,15 +1768,18 @@ type IDataPrepareSettingsProps = React.PropsWithChildren<{
   convertToAxisDataType?: boolean;
   sortingMethod?: boolean | ((a: any, b: any) => number);
 }>
-const _componentDataPrepareSettings = memo(
-  (props: IDataPrepareSettingsProps) => {
-    return React.createElement(NestedOption<IDataPrepareSettingsProps>, { ...props });
-  }
-);
+const _componentDataPrepareSettings = (props: IDataPrepareSettingsProps) => {
+  return React.createElement(NestedOption<IDataPrepareSettingsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "dataPrepareSettings",
+    },
+  });
+};
 
-const DataPrepareSettings: typeof _componentDataPrepareSettings & IElementDescriptor = Object.assign(_componentDataPrepareSettings, {
-  OptionName: "dataPrepareSettings",
-})
+const DataPrepareSettings = Object.assign<typeof _componentDataPrepareSettings, NestedComponentMeta>(_componentDataPrepareSettings, {
+  componentType: "option",
+});
 
 // owners:
 // ZoomAndPan
@@ -1676,15 +1787,18 @@ type IDragBoxStyleProps = React.PropsWithChildren<{
   color?: string;
   opacity?: number;
 }>
-const _componentDragBoxStyle = memo(
-  (props: IDragBoxStyleProps) => {
-    return React.createElement(NestedOption<IDragBoxStyleProps>, { ...props });
-  }
-);
+const _componentDragBoxStyle = (props: IDragBoxStyleProps) => {
+  return React.createElement(NestedOption<IDragBoxStyleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "dragBoxStyle",
+    },
+  });
+};
 
-const DragBoxStyle: typeof _componentDragBoxStyle & IElementDescriptor = Object.assign(_componentDragBoxStyle, {
-  OptionName: "dragBoxStyle",
-})
+const DragBoxStyle = Object.assign<typeof _componentDragBoxStyle, NestedComponentMeta>(_componentDragBoxStyle, {
+  componentType: "option",
+});
 
 // owners:
 // Chart
@@ -1697,15 +1811,18 @@ type IExportProps = React.PropsWithChildren<{
   printingEnabled?: boolean;
   svgToCanvas?: ((svg: any, canvas: any) => any);
 }>
-const _componentExport = memo(
-  (props: IExportProps) => {
-    return React.createElement(NestedOption<IExportProps>, { ...props });
-  }
-);
+const _componentExport = (props: IExportProps) => {
+  return React.createElement(NestedOption<IExportProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "export",
+    },
+  });
+};
 
-const Export: typeof _componentExport & IElementDescriptor = Object.assign(_componentExport, {
-  OptionName: "export",
-})
+const Export = Object.assign<typeof _componentExport, NestedComponentMeta>(_componentExport, {
+  componentType: "option",
+});
 
 // owners:
 // Annotation
@@ -1731,15 +1848,18 @@ type IFontProps = React.PropsWithChildren<{
   size?: number | string;
   weight?: number;
 }>
-const _componentFont = memo(
-  (props: IFontProps) => {
-    return React.createElement(NestedOption<IFontProps>, { ...props });
-  }
-);
+const _componentFont = (props: IFontProps) => {
+  return React.createElement(NestedOption<IFontProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "font",
+    },
+  });
+};
 
-const Font: typeof _componentFont & IElementDescriptor = Object.assign(_componentFont, {
-  OptionName: "font",
-})
+const Font = Object.assign<typeof _componentFont, NestedComponentMeta>(_componentFont, {
+  componentType: "option",
+});
 
 // owners:
 // AxisLabel
@@ -1757,15 +1877,18 @@ type IFormatProps = React.PropsWithChildren<{
   type?: "billions" | "currency" | "day" | "decimal" | "exponential" | "fixedPoint" | "largeNumber" | "longDate" | "longTime" | "millions" | "millisecond" | "month" | "monthAndDay" | "monthAndYear" | "percent" | "quarter" | "quarterAndYear" | "shortDate" | "shortTime" | "thousands" | "trillions" | "year" | "dayOfWeek" | "hour" | "longDateLongTime" | "minute" | "second" | "shortDateShortTime";
   useCurrencyAccountingStyle?: boolean;
 }>
-const _componentFormat = memo(
-  (props: IFormatProps) => {
-    return React.createElement(NestedOption<IFormatProps>, { ...props });
-  }
-);
+const _componentFormat = (props: IFormatProps) => {
+  return React.createElement(NestedOption<IFormatProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "format",
+    },
+  });
+};
 
-const Format: typeof _componentFormat & IElementDescriptor = Object.assign(_componentFormat, {
-  OptionName: "format",
-})
+const Format = Object.assign<typeof _componentFormat, NestedComponentMeta>(_componentFormat, {
+  componentType: "option",
+});
 
 // owners:
 // ArgumentAxis
@@ -1775,15 +1898,18 @@ type IGridProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentGrid = memo(
-  (props: IGridProps) => {
-    return React.createElement(NestedOption<IGridProps>, { ...props });
-  }
-);
+const _componentGrid = (props: IGridProps) => {
+  return React.createElement(NestedOption<IGridProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "grid",
+    },
+  });
+};
 
-const Grid: typeof _componentGrid & IElementDescriptor = Object.assign(_componentGrid, {
-  OptionName: "grid",
-})
+const Grid = Object.assign<typeof _componentGrid, NestedComponentMeta>(_componentGrid, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettingsHoverStyle
@@ -1794,15 +1920,18 @@ type IHatchingProps = React.PropsWithChildren<{
   step?: number;
   width?: number;
 }>
-const _componentHatching = memo(
-  (props: IHatchingProps) => {
-    return React.createElement(NestedOption<IHatchingProps>, { ...props });
-  }
-);
+const _componentHatching = (props: IHatchingProps) => {
+  return React.createElement(NestedOption<IHatchingProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hatching",
+    },
+  });
+};
 
-const Hatching: typeof _componentHatching & IElementDescriptor = Object.assign(_componentHatching, {
-  OptionName: "hatching",
-})
+const Hatching = Object.assign<typeof _componentHatching, NestedComponentMeta>(_componentHatching, {
+  componentType: "option",
+});
 
 // owners:
 // PointImage
@@ -1810,15 +1939,18 @@ type IHeightProps = React.PropsWithChildren<{
   rangeMaxPoint?: number;
   rangeMinPoint?: number;
 }>
-const _componentHeight = memo(
-  (props: IHeightProps) => {
-    return React.createElement(NestedOption<IHeightProps>, { ...props });
-  }
-);
+const _componentHeight = (props: IHeightProps) => {
+  return React.createElement(NestedOption<IHeightProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "height",
+    },
+  });
+};
 
-const Height: typeof _componentHeight & IElementDescriptor = Object.assign(_componentHeight, {
-  OptionName: "height",
-})
+const Height = Object.assign<typeof _componentHeight, NestedComponentMeta>(_componentHeight, {
+  componentType: "option",
+});
 
 // owners:
 // Crosshair
@@ -1836,19 +1968,22 @@ type IHorizontalLineProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentHorizontalLine = memo(
-  (props: IHorizontalLineProps) => {
-    return React.createElement(NestedOption<IHorizontalLineProps>, { ...props });
-  }
-);
+const _componentHorizontalLine = (props: IHorizontalLineProps) => {
+  return React.createElement(NestedOption<IHorizontalLineProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "horizontalLine",
+      ExpectedChildren: {
+        horizontalLineLabel: { optionName: "label", isCollectionItem: false },
+        label: { optionName: "label", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const HorizontalLine: typeof _componentHorizontalLine & IElementDescriptor = Object.assign(_componentHorizontalLine, {
-  OptionName: "horizontalLine",
-  ExpectedChildren: {
-    horizontalLineLabel: { optionName: "label", isCollectionItem: false },
-    label: { optionName: "label", isCollectionItem: false }
-  },
-})
+const HorizontalLine = Object.assign<typeof _componentHorizontalLine, NestedComponentMeta>(_componentHorizontalLine, {
+  componentType: "option",
+});
 
 // owners:
 // HorizontalLine
@@ -1861,15 +1996,18 @@ type IHorizontalLineLabelProps = React.PropsWithChildren<{
   format?: LocalizationTypes.Format;
   visible?: boolean;
 }>
-const _componentHorizontalLineLabel = memo(
-  (props: IHorizontalLineLabelProps) => {
-    return React.createElement(NestedOption<IHorizontalLineLabelProps>, { ...props });
-  }
-);
+const _componentHorizontalLineLabel = (props: IHorizontalLineLabelProps) => {
+  return React.createElement(NestedOption<IHorizontalLineLabelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "label",
+    },
+  });
+};
 
-const HorizontalLineLabel: typeof _componentHorizontalLineLabel & IElementDescriptor = Object.assign(_componentHorizontalLineLabel, {
-  OptionName: "label",
-})
+const HorizontalLineLabel = Object.assign<typeof _componentHorizontalLineLabel, NestedComponentMeta>(_componentHorizontalLineLabel, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettings
@@ -1893,15 +2031,18 @@ type IHoverStyleProps = React.PropsWithChildren<{
   width?: number;
   size?: number;
 }>
-const _componentHoverStyle = memo(
-  (props: IHoverStyleProps) => {
-    return React.createElement(NestedOption<IHoverStyleProps>, { ...props });
-  }
-);
+const _componentHoverStyle = (props: IHoverStyleProps) => {
+  return React.createElement(NestedOption<IHoverStyleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hoverStyle",
+    },
+  });
+};
 
-const HoverStyle: typeof _componentHoverStyle & IElementDescriptor = Object.assign(_componentHoverStyle, {
-  OptionName: "hoverStyle",
-})
+const HoverStyle = Object.assign<typeof _componentHoverStyle, NestedComponentMeta>(_componentHoverStyle, {
+  componentType: "option",
+});
 
 // owners:
 // Annotation
@@ -1920,15 +2061,18 @@ type IImageProps = React.PropsWithChildren<{
     rangeMinPoint?: number;
   };
 }>
-const _componentImage = memo(
-  (props: IImageProps) => {
-    return React.createElement(NestedOption<IImageProps>, { ...props });
-  }
-);
+const _componentImage = (props: IImageProps) => {
+  return React.createElement(NestedOption<IImageProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "image",
+    },
+  });
+};
 
-const Image: typeof _componentImage & IElementDescriptor = Object.assign(_componentImage, {
-  OptionName: "image",
-})
+const Image = Object.assign<typeof _componentImage, NestedComponentMeta>(_componentImage, {
+  componentType: "option",
+});
 
 // owners:
 // AxisConstantLineStyle
@@ -1985,20 +2129,23 @@ type ILabelProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentLabel = memo(
-  (props: ILabelProps) => {
-    return React.createElement(NestedOption<ILabelProps>, { ...props });
-  }
-);
+const _componentLabel = (props: ILabelProps) => {
+  return React.createElement(NestedOption<ILabelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "label",
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
 
-const Label: typeof _componentLabel & IElementDescriptor = Object.assign(_componentLabel, {
-  OptionName: "label",
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const Label = Object.assign<typeof _componentLabel, NestedComponentMeta>(_componentLabel, {
+  componentType: "option",
+});
 
 // owners:
 // Chart
@@ -2059,28 +2206,31 @@ type ILegendProps = React.PropsWithChildren<{
   markerRender?: (...params: any) => React.ReactNode;
   markerComponent?: React.ComponentType<any>;
 }>
-const _componentLegend = memo(
-  (props: ILegendProps) => {
-    return React.createElement(NestedOption<ILegendProps>, { ...props });
-  }
-);
-
-const Legend: typeof _componentLegend & IElementDescriptor = Object.assign(_componentLegend, {
-  OptionName: "legend",
-  ExpectedChildren: {
-    annotationBorder: { optionName: "border", isCollectionItem: false },
-    border: { optionName: "border", isCollectionItem: false },
-    font: { optionName: "font", isCollectionItem: false },
-    legendTitle: { optionName: "title", isCollectionItem: false },
-    margin: { optionName: "margin", isCollectionItem: false },
-    title: { optionName: "title", isCollectionItem: false }
-  },
-  TemplateProps: [{
-    tmplOption: "markerTemplate",
-    render: "markerRender",
-    component: "markerComponent"
-  }],
-})
+const _componentLegend = (props: ILegendProps) => {
+  return React.createElement(NestedOption<ILegendProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "legend",
+      ExpectedChildren: {
+        annotationBorder: { optionName: "border", isCollectionItem: false },
+        border: { optionName: "border", isCollectionItem: false },
+        font: { optionName: "font", isCollectionItem: false },
+        legendTitle: { optionName: "title", isCollectionItem: false },
+        margin: { optionName: "margin", isCollectionItem: false },
+        title: { optionName: "title", isCollectionItem: false }
+      },
+      TemplateProps: [{
+        tmplOption: "markerTemplate",
+        render: "markerRender",
+        component: "markerComponent"
+      }],
+    },
+  });
+};
+
+const Legend = Object.assign<typeof _componentLegend, NestedComponentMeta>(_componentLegend, {
+  componentType: "option",
+});
 
 // owners:
 // Legend
@@ -2102,21 +2252,24 @@ type ILegendTitleProps = React.PropsWithChildren<{
   text?: string;
   verticalAlignment?: "bottom" | "top";
 }>
-const _componentLegendTitle = memo(
-  (props: ILegendTitleProps) => {
-    return React.createElement(NestedOption<ILegendTitleProps>, { ...props });
-  }
-);
+const _componentLegendTitle = (props: ILegendTitleProps) => {
+  return React.createElement(NestedOption<ILegendTitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "title",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false },
+        legendTitleSubtitle: { optionName: "subtitle", isCollectionItem: false },
+        margin: { optionName: "margin", isCollectionItem: false },
+        subtitle: { optionName: "subtitle", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const LegendTitle: typeof _componentLegendTitle & IElementDescriptor = Object.assign(_componentLegendTitle, {
-  OptionName: "title",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false },
-    legendTitleSubtitle: { optionName: "subtitle", isCollectionItem: false },
-    margin: { optionName: "margin", isCollectionItem: false },
-    subtitle: { optionName: "subtitle", isCollectionItem: false }
-  },
-})
+const LegendTitle = Object.assign<typeof _componentLegendTitle, NestedComponentMeta>(_componentLegendTitle, {
+  componentType: "option",
+});
 
 // owners:
 // LegendTitle
@@ -2125,18 +2278,21 @@ type ILegendTitleSubtitleProps = React.PropsWithChildren<{
   offset?: number;
   text?: string;
 }>
-const _componentLegendTitleSubtitle = memo(
-  (props: ILegendTitleSubtitleProps) => {
-    return React.createElement(NestedOption<ILegendTitleSubtitleProps>, { ...props });
-  }
-);
+const _componentLegendTitleSubtitle = (props: ILegendTitleSubtitleProps) => {
+  return React.createElement(NestedOption<ILegendTitleSubtitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "subtitle",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const LegendTitleSubtitle: typeof _componentLegendTitleSubtitle & IElementDescriptor = Object.assign(_componentLegendTitleSubtitle, {
-  OptionName: "subtitle",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false }
-  },
-})
+const LegendTitleSubtitle = Object.assign<typeof _componentLegendTitleSubtitle, NestedComponentMeta>(_componentLegendTitleSubtitle, {
+  componentType: "option",
+});
 
 // owners:
 // VisualRange
@@ -2151,15 +2307,18 @@ type ILengthProps = React.PropsWithChildren<{
   weeks?: number;
   years?: number;
 }>
-const _componentLength = memo(
-  (props: ILengthProps) => {
-    return React.createElement(NestedOption<ILengthProps>, { ...props });
-  }
-);
+const _componentLength = (props: ILengthProps) => {
+  return React.createElement(NestedOption<ILengthProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "length",
+    },
+  });
+};
 
-const Length: typeof _componentLength & IElementDescriptor = Object.assign(_componentLength, {
-  OptionName: "length",
-})
+const Length = Object.assign<typeof _componentLength, NestedComponentMeta>(_componentLength, {
+  componentType: "option",
+});
 
 // owners:
 // Chart
@@ -2172,21 +2331,24 @@ type ILoadingIndicatorProps = React.PropsWithChildren<{
   defaultShow?: boolean;
   onShowChange?: (value: boolean) => void;
 }>
-const _componentLoadingIndicator = memo(
-  (props: ILoadingIndicatorProps) => {
-    return React.createElement(NestedOption<ILoadingIndicatorProps>, { ...props });
-  }
-);
+const _componentLoadingIndicator = (props: ILoadingIndicatorProps) => {
+  return React.createElement(NestedOption<ILoadingIndicatorProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "loadingIndicator",
+      DefaultsProps: {
+        defaultShow: "show"
+      },
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const LoadingIndicator: typeof _componentLoadingIndicator & IElementDescriptor = Object.assign(_componentLoadingIndicator, {
-  OptionName: "loadingIndicator",
-  DefaultsProps: {
-    defaultShow: "show"
-  },
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false }
-  },
-})
+const LoadingIndicator = Object.assign<typeof _componentLoadingIndicator, NestedComponentMeta>(_componentLoadingIndicator, {
+  componentType: "option",
+});
 
 // owners:
 // Legend
@@ -2199,15 +2361,18 @@ type IMarginProps = React.PropsWithChildren<{
   right?: number;
   top?: number;
 }>
-const _componentMargin = memo(
-  (props: IMarginProps) => {
-    return React.createElement(NestedOption<IMarginProps>, { ...props });
-  }
-);
+const _componentMargin = (props: IMarginProps) => {
+  return React.createElement(NestedOption<IMarginProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "margin",
+    },
+  });
+};
 
-const Margin: typeof _componentMargin & IElementDescriptor = Object.assign(_componentMargin, {
-  OptionName: "margin",
-})
+const Margin = Object.assign<typeof _componentMargin, NestedComponentMeta>(_componentMargin, {
+  componentType: "option",
+});
 
 // owners:
 // ArgumentAxis
@@ -2217,15 +2382,18 @@ type IMinorGridProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentMinorGrid = memo(
-  (props: IMinorGridProps) => {
-    return React.createElement(NestedOption<IMinorGridProps>, { ...props });
-  }
-);
+const _componentMinorGrid = (props: IMinorGridProps) => {
+  return React.createElement(NestedOption<IMinorGridProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "minorGrid",
+    },
+  });
+};
 
-const MinorGrid: typeof _componentMinorGrid & IElementDescriptor = Object.assign(_componentMinorGrid, {
-  OptionName: "minorGrid",
-})
+const MinorGrid = Object.assign<typeof _componentMinorGrid, NestedComponentMeta>(_componentMinorGrid, {
+  componentType: "option",
+});
 
 // owners:
 // ArgumentAxis
@@ -2237,15 +2405,18 @@ type IMinorTickProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentMinorTick = memo(
-  (props: IMinorTickProps) => {
-    return React.createElement(NestedOption<IMinorTickProps>, { ...props });
-  }
-);
+const _componentMinorTick = (props: IMinorTickProps) => {
+  return React.createElement(NestedOption<IMinorTickProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "minorTick",
+    },
+  });
+};
 
-const MinorTick: typeof _componentMinorTick & IElementDescriptor = Object.assign(_componentMinorTick, {
-  OptionName: "minorTick",
-})
+const MinorTick = Object.assign<typeof _componentMinorTick, NestedComponentMeta>(_componentMinorTick, {
+  componentType: "option",
+});
 
 // owners:
 // ArgumentAxis
@@ -2261,15 +2432,18 @@ type IMinorTickIntervalProps = React.PropsWithChildren<{
   weeks?: number;
   years?: number;
 }>
-const _componentMinorTickInterval = memo(
-  (props: IMinorTickIntervalProps) => {
-    return React.createElement(NestedOption<IMinorTickIntervalProps>, { ...props });
-  }
-);
+const _componentMinorTickInterval = (props: IMinorTickIntervalProps) => {
+  return React.createElement(NestedOption<IMinorTickIntervalProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "minorTickInterval",
+    },
+  });
+};
 
-const MinorTickInterval: typeof _componentMinorTickInterval & IElementDescriptor = Object.assign(_componentMinorTickInterval, {
-  OptionName: "minorTickInterval",
-})
+const MinorTickInterval = Object.assign<typeof _componentMinorTickInterval, NestedComponentMeta>(_componentMinorTickInterval, {
+  componentType: "option",
+});
 
 // owners:
 // ArgumentAxis
@@ -2285,15 +2459,18 @@ type IMinVisualRangeLengthProps = React.PropsWithChildren<{
   weeks?: number;
   years?: number;
 }>
-const _componentMinVisualRangeLength = memo(
-  (props: IMinVisualRangeLengthProps) => {
-    return React.createElement(NestedOption<IMinVisualRangeLengthProps>, { ...props });
-  }
-);
+const _componentMinVisualRangeLength = (props: IMinVisualRangeLengthProps) => {
+  return React.createElement(NestedOption<IMinVisualRangeLengthProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "minVisualRangeLength",
+    },
+  });
+};
 
-const MinVisualRangeLength: typeof _componentMinVisualRangeLength & IElementDescriptor = Object.assign(_componentMinVisualRangeLength, {
-  OptionName: "minVisualRangeLength",
-})
+const MinVisualRangeLength = Object.assign<typeof _componentMinVisualRangeLength, NestedComponentMeta>(_componentMinVisualRangeLength, {
+  componentType: "option",
+});
 
 // owners:
 // Chart
@@ -2313,16 +2490,19 @@ type IPaneProps = React.PropsWithChildren<{
   height?: number | string;
   name?: string;
 }>
-const _componentPane = memo(
-  (props: IPaneProps) => {
-    return React.createElement(NestedOption<IPaneProps>, { ...props });
-  }
-);
+const _componentPane = (props: IPaneProps) => {
+  return React.createElement(NestedOption<IPaneProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "panes",
+      IsCollectionItem: true,
+    },
+  });
+};
 
-const Pane: typeof _componentPane & IElementDescriptor = Object.assign(_componentPane, {
-  OptionName: "panes",
-  IsCollectionItem: true,
-})
+const Pane = Object.assign<typeof _componentPane, NestedComponentMeta>(_componentPane, {
+  componentType: "option",
+});
 
 // owners:
 // CommonPaneSettings
@@ -2337,15 +2517,18 @@ type IPaneBorderProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentPaneBorder = memo(
-  (props: IPaneBorderProps) => {
-    return React.createElement(NestedOption<IPaneBorderProps>, { ...props });
-  }
-);
+const _componentPaneBorder = (props: IPaneBorderProps) => {
+  return React.createElement(NestedOption<IPaneBorderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
 
-const PaneBorder: typeof _componentPaneBorder & IElementDescriptor = Object.assign(_componentPaneBorder, {
-  OptionName: "border",
-})
+const PaneBorder = Object.assign<typeof _componentPaneBorder, NestedComponentMeta>(_componentPaneBorder, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettings
@@ -2394,26 +2577,29 @@ type IPointProps = React.PropsWithChildren<{
   symbol?: "circle" | "cross" | "polygon" | "square" | "triangle" | "triangleDown" | "triangleUp";
   visible?: boolean;
 }>
-const _componentPoint = memo(
-  (props: IPointProps) => {
-    return React.createElement(NestedOption<IPointProps>, { ...props });
-  }
-);
-
-const Point: typeof _componentPoint & IElementDescriptor = Object.assign(_componentPoint, {
-  OptionName: "point",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    color: { optionName: "color", isCollectionItem: false },
-    hoverStyle: { optionName: "hoverStyle", isCollectionItem: false },
-    image: { optionName: "image", isCollectionItem: false },
-    pointBorder: { optionName: "border", isCollectionItem: false },
-    pointHoverStyle: { optionName: "hoverStyle", isCollectionItem: false },
-    pointImage: { optionName: "image", isCollectionItem: false },
-    pointSelectionStyle: { optionName: "selectionStyle", isCollectionItem: false },
-    selectionStyle: { optionName: "selectionStyle", isCollectionItem: false }
-  },
-})
+const _componentPoint = (props: IPointProps) => {
+  return React.createElement(NestedOption<IPointProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "point",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        color: { optionName: "color", isCollectionItem: false },
+        hoverStyle: { optionName: "hoverStyle", isCollectionItem: false },
+        image: { optionName: "image", isCollectionItem: false },
+        pointBorder: { optionName: "border", isCollectionItem: false },
+        pointHoverStyle: { optionName: "hoverStyle", isCollectionItem: false },
+        pointImage: { optionName: "image", isCollectionItem: false },
+        pointSelectionStyle: { optionName: "selectionStyle", isCollectionItem: false },
+        selectionStyle: { optionName: "selectionStyle", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Point = Object.assign<typeof _componentPoint, NestedComponentMeta>(_componentPoint, {
+  componentType: "option",
+});
 
 // owners:
 // Point
@@ -2424,15 +2610,18 @@ type IPointBorderProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentPointBorder = memo(
-  (props: IPointBorderProps) => {
-    return React.createElement(NestedOption<IPointBorderProps>, { ...props });
-  }
-);
+const _componentPointBorder = (props: IPointBorderProps) => {
+  return React.createElement(NestedOption<IPointBorderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
 
-const PointBorder: typeof _componentPointBorder & IElementDescriptor = Object.assign(_componentPointBorder, {
-  OptionName: "border",
-})
+const PointBorder = Object.assign<typeof _componentPointBorder, NestedComponentMeta>(_componentPointBorder, {
+  componentType: "option",
+});
 
 // owners:
 // Point
@@ -2445,20 +2634,23 @@ type IPointHoverStyleProps = React.PropsWithChildren<{
   color?: ChartsColor | string;
   size?: number;
 }>
-const _componentPointHoverStyle = memo(
-  (props: IPointHoverStyleProps) => {
-    return React.createElement(NestedOption<IPointHoverStyleProps>, { ...props });
-  }
-);
+const _componentPointHoverStyle = (props: IPointHoverStyleProps) => {
+  return React.createElement(NestedOption<IPointHoverStyleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hoverStyle",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        color: { optionName: "color", isCollectionItem: false },
+        pointBorder: { optionName: "border", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const PointHoverStyle: typeof _componentPointHoverStyle & IElementDescriptor = Object.assign(_componentPointHoverStyle, {
-  OptionName: "hoverStyle",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    color: { optionName: "color", isCollectionItem: false },
-    pointBorder: { optionName: "border", isCollectionItem: false }
-  },
-})
+const PointHoverStyle = Object.assign<typeof _componentPointHoverStyle, NestedComponentMeta>(_componentPointHoverStyle, {
+  componentType: "option",
+});
 
 // owners:
 // Point
@@ -2476,20 +2668,23 @@ type IPointImageProps = React.PropsWithChildren<{
     rangeMinPoint?: number;
   };
 }>
-const _componentPointImage = memo(
-  (props: IPointImageProps) => {
-    return React.createElement(NestedOption<IPointImageProps>, { ...props });
-  }
-);
+const _componentPointImage = (props: IPointImageProps) => {
+  return React.createElement(NestedOption<IPointImageProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "image",
+      ExpectedChildren: {
+        height: { optionName: "height", isCollectionItem: false },
+        url: { optionName: "url", isCollectionItem: false },
+        width: { optionName: "width", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const PointImage: typeof _componentPointImage & IElementDescriptor = Object.assign(_componentPointImage, {
-  OptionName: "image",
-  ExpectedChildren: {
-    height: { optionName: "height", isCollectionItem: false },
-    url: { optionName: "url", isCollectionItem: false },
-    width: { optionName: "width", isCollectionItem: false }
-  },
-})
+const PointImage = Object.assign<typeof _componentPointImage, NestedComponentMeta>(_componentPointImage, {
+  componentType: "option",
+});
 
 // owners:
 // Point
@@ -2502,20 +2697,23 @@ type IPointSelectionStyleProps = React.PropsWithChildren<{
   color?: ChartsColor | string;
   size?: number;
 }>
-const _componentPointSelectionStyle = memo(
-  (props: IPointSelectionStyleProps) => {
-    return React.createElement(NestedOption<IPointSelectionStyleProps>, { ...props });
-  }
-);
+const _componentPointSelectionStyle = (props: IPointSelectionStyleProps) => {
+  return React.createElement(NestedOption<IPointSelectionStyleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "selectionStyle",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        color: { optionName: "color", isCollectionItem: false },
+        pointBorder: { optionName: "border", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const PointSelectionStyle: typeof _componentPointSelectionStyle & IElementDescriptor = Object.assign(_componentPointSelectionStyle, {
-  OptionName: "selectionStyle",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    color: { optionName: "color", isCollectionItem: false },
-    pointBorder: { optionName: "border", isCollectionItem: false }
-  },
-})
+const PointSelectionStyle = Object.assign<typeof _componentPointSelectionStyle, NestedComponentMeta>(_componentPointSelectionStyle, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettings
@@ -2523,15 +2721,18 @@ type IReductionProps = React.PropsWithChildren<{
   color?: string;
   level?: "close" | "high" | "low" | "open";
 }>
-const _componentReduction = memo(
-  (props: IReductionProps) => {
-    return React.createElement(NestedOption<IReductionProps>, { ...props });
-  }
-);
+const _componentReduction = (props: IReductionProps) => {
+  return React.createElement(NestedOption<IReductionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "reduction",
+    },
+  });
+};
 
-const Reduction: typeof _componentReduction & IElementDescriptor = Object.assign(_componentReduction, {
-  OptionName: "reduction",
-})
+const Reduction = Object.assign<typeof _componentReduction, NestedComponentMeta>(_componentReduction, {
+  componentType: "option",
+});
 
 // owners:
 // Chart
@@ -2543,15 +2744,18 @@ type IScrollBarProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentScrollBar = memo(
-  (props: IScrollBarProps) => {
-    return React.createElement(NestedOption<IScrollBarProps>, { ...props });
-  }
-);
+const _componentScrollBar = (props: IScrollBarProps) => {
+  return React.createElement(NestedOption<IScrollBarProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "scrollBar",
+    },
+  });
+};
 
-const ScrollBar: typeof _componentScrollBar & IElementDescriptor = Object.assign(_componentScrollBar, {
-  OptionName: "scrollBar",
-})
+const ScrollBar = Object.assign<typeof _componentScrollBar, NestedComponentMeta>(_componentScrollBar, {
+  componentType: "option",
+});
 
 // owners:
 // Point
@@ -2575,15 +2779,18 @@ type ISelectionStyleProps = React.PropsWithChildren<{
   highlight?: boolean;
   width?: number;
 }>
-const _componentSelectionStyle = memo(
-  (props: ISelectionStyleProps) => {
-    return React.createElement(NestedOption<ISelectionStyleProps>, { ...props });
-  }
-);
+const _componentSelectionStyle = (props: ISelectionStyleProps) => {
+  return React.createElement(NestedOption<ISelectionStyleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "selectionStyle",
+    },
+  });
+};
 
-const SelectionStyle: typeof _componentSelectionStyle & IElementDescriptor = Object.assign(_componentSelectionStyle, {
-  OptionName: "selectionStyle",
-})
+const SelectionStyle = Object.assign<typeof _componentSelectionStyle, NestedComponentMeta>(_componentSelectionStyle, {
+  componentType: "option",
+});
 
 // owners:
 // Chart
@@ -2754,16 +2961,19 @@ type ISeriesProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentSeries = memo(
-  (props: ISeriesProps) => {
-    return React.createElement(NestedOption<ISeriesProps>, { ...props });
-  }
-);
+const _componentSeries = (props: ISeriesProps) => {
+  return React.createElement(NestedOption<ISeriesProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "series",
+      IsCollectionItem: true,
+    },
+  });
+};
 
-const Series: typeof _componentSeries & IElementDescriptor = Object.assign(_componentSeries, {
-  OptionName: "series",
-  IsCollectionItem: true,
-})
+const Series = Object.assign<typeof _componentSeries, NestedComponentMeta>(_componentSeries, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettings
@@ -2776,15 +2986,18 @@ type ISeriesBorderProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentSeriesBorder = memo(
-  (props: ISeriesBorderProps) => {
-    return React.createElement(NestedOption<ISeriesBorderProps>, { ...props });
-  }
-);
+const _componentSeriesBorder = (props: ISeriesBorderProps) => {
+  return React.createElement(NestedOption<ISeriesBorderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
 
-const SeriesBorder: typeof _componentSeriesBorder & IElementDescriptor = Object.assign(_componentSeriesBorder, {
-  OptionName: "border",
-})
+const SeriesBorder = Object.assign<typeof _componentSeriesBorder, NestedComponentMeta>(_componentSeriesBorder, {
+  componentType: "option",
+});
 
 // owners:
 // Chart
@@ -2792,15 +3005,18 @@ type ISeriesTemplateProps = React.PropsWithChildren<{
   customizeSeries?: ((seriesName: any) => ChartSeries);
   nameField?: string;
 }>
-const _componentSeriesTemplate = memo(
-  (props: ISeriesTemplateProps) => {
-    return React.createElement(NestedOption<ISeriesTemplateProps>, { ...props });
-  }
-);
+const _componentSeriesTemplate = (props: ISeriesTemplateProps) => {
+  return React.createElement(NestedOption<ISeriesTemplateProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "seriesTemplate",
+    },
+  });
+};
 
-const SeriesTemplate: typeof _componentSeriesTemplate & IElementDescriptor = Object.assign(_componentSeriesTemplate, {
-  OptionName: "seriesTemplate",
-})
+const SeriesTemplate = Object.assign<typeof _componentSeriesTemplate, NestedComponentMeta>(_componentSeriesTemplate, {
+  componentType: "option",
+});
 
 // owners:
 // Annotation
@@ -2812,15 +3028,18 @@ type IShadowProps = React.PropsWithChildren<{
   offsetY?: number;
   opacity?: number;
 }>
-const _componentShadow = memo(
-  (props: IShadowProps) => {
-    return React.createElement(NestedOption<IShadowProps>, { ...props });
-  }
-);
+const _componentShadow = (props: IShadowProps) => {
+  return React.createElement(NestedOption<IShadowProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "shadow",
+    },
+  });
+};
 
-const Shadow: typeof _componentShadow & IElementDescriptor = Object.assign(_componentShadow, {
-  OptionName: "shadow",
-})
+const Shadow = Object.assign<typeof _componentShadow, NestedComponentMeta>(_componentShadow, {
+  componentType: "option",
+});
 
 // owners:
 // Chart
@@ -2828,15 +3047,18 @@ type ISizeProps = React.PropsWithChildren<{
   height?: number;
   width?: number;
 }>
-const _componentSize = memo(
-  (props: ISizeProps) => {
-    return React.createElement(NestedOption<ISizeProps>, { ...props });
-  }
-);
+const _componentSize = (props: ISizeProps) => {
+  return React.createElement(NestedOption<ISizeProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "size",
+    },
+  });
+};
 
-const Size: typeof _componentSize & IElementDescriptor = Object.assign(_componentSize, {
-  OptionName: "size",
-})
+const Size = Object.assign<typeof _componentSize, NestedComponentMeta>(_componentSize, {
+  componentType: "option",
+});
 
 // owners:
 // ArgumentAxis
@@ -2854,16 +3076,19 @@ type IStripProps = React.PropsWithChildren<{
   paddingTopBottom?: number;
   startValue?: Date | number | string;
 }>
-const _componentStrip = memo(
-  (props: IStripProps) => {
-    return React.createElement(NestedOption<IStripProps>, { ...props });
-  }
-);
+const _componentStrip = (props: IStripProps) => {
+  return React.createElement(NestedOption<IStripProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "strips",
+      IsCollectionItem: true,
+    },
+  });
+};
 
-const Strip: typeof _componentStrip & IElementDescriptor = Object.assign(_componentStrip, {
-  OptionName: "strips",
-  IsCollectionItem: true,
-})
+const Strip = Object.assign<typeof _componentStrip, NestedComponentMeta>(_componentStrip, {
+  componentType: "option",
+});
 
 // owners:
 // Strip
@@ -2874,15 +3099,18 @@ type IStripLabelProps = React.PropsWithChildren<{
   text?: string;
   verticalAlignment?: "bottom" | "center" | "top";
 }>
-const _componentStripLabel = memo(
-  (props: IStripLabelProps) => {
-    return React.createElement(NestedOption<IStripLabelProps>, { ...props });
-  }
-);
+const _componentStripLabel = (props: IStripLabelProps) => {
+  return React.createElement(NestedOption<IStripLabelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "label",
+    },
+  });
+};
 
-const StripLabel: typeof _componentStripLabel & IElementDescriptor = Object.assign(_componentStripLabel, {
-  OptionName: "label",
-})
+const StripLabel = Object.assign<typeof _componentStripLabel, NestedComponentMeta>(_componentStripLabel, {
+  componentType: "option",
+});
 
 // owners:
 // ArgumentAxis
@@ -2895,19 +3123,22 @@ type IStripStyleProps = React.PropsWithChildren<{
   paddingLeftRight?: number;
   paddingTopBottom?: number;
 }>
-const _componentStripStyle = memo(
-  (props: IStripStyleProps) => {
-    return React.createElement(NestedOption<IStripStyleProps>, { ...props });
-  }
-);
+const _componentStripStyle = (props: IStripStyleProps) => {
+  return React.createElement(NestedOption<IStripStyleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "stripStyle",
+      ExpectedChildren: {
+        label: { optionName: "label", isCollectionItem: false },
+        stripStyleLabel: { optionName: "label", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const StripStyle: typeof _componentStripStyle & IElementDescriptor = Object.assign(_componentStripStyle, {
-  OptionName: "stripStyle",
-  ExpectedChildren: {
-    label: { optionName: "label", isCollectionItem: false },
-    stripStyleLabel: { optionName: "label", isCollectionItem: false }
-  },
-})
+const StripStyle = Object.assign<typeof _componentStripStyle, NestedComponentMeta>(_componentStripStyle, {
+  componentType: "option",
+});
 
 // owners:
 // StripStyle
@@ -2916,15 +3147,18 @@ type IStripStyleLabelProps = React.PropsWithChildren<{
   horizontalAlignment?: "center" | "left" | "right";
   verticalAlignment?: "bottom" | "center" | "top";
 }>
-const _componentStripStyleLabel = memo(
-  (props: IStripStyleLabelProps) => {
-    return React.createElement(NestedOption<IStripStyleLabelProps>, { ...props });
-  }
-);
+const _componentStripStyleLabel = (props: IStripStyleLabelProps) => {
+  return React.createElement(NestedOption<IStripStyleLabelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "label",
+    },
+  });
+};
 
-const StripStyleLabel: typeof _componentStripStyleLabel & IElementDescriptor = Object.assign(_componentStripStyleLabel, {
-  OptionName: "label",
-})
+const StripStyleLabel = Object.assign<typeof _componentStripStyleLabel, NestedComponentMeta>(_componentStripStyleLabel, {
+  componentType: "option",
+});
 
 // owners:
 // LegendTitle
@@ -2936,15 +3170,18 @@ type ISubtitleProps = React.PropsWithChildren<{
   textOverflow?: "ellipsis" | "hide" | "none";
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentSubtitle = memo(
-  (props: ISubtitleProps) => {
-    return React.createElement(NestedOption<ISubtitleProps>, { ...props });
-  }
-);
+const _componentSubtitle = (props: ISubtitleProps) => {
+  return React.createElement(NestedOption<ISubtitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "subtitle",
+    },
+  });
+};
 
-const Subtitle: typeof _componentSubtitle & IElementDescriptor = Object.assign(_componentSubtitle, {
-  OptionName: "subtitle",
-})
+const Subtitle = Object.assign<typeof _componentSubtitle, NestedComponentMeta>(_componentSubtitle, {
+  componentType: "option",
+});
 
 // owners:
 // ArgumentAxis
@@ -2956,15 +3193,18 @@ type ITickProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentTick = memo(
-  (props: ITickProps) => {
-    return React.createElement(NestedOption<ITickProps>, { ...props });
-  }
-);
+const _componentTick = (props: ITickProps) => {
+  return React.createElement(NestedOption<ITickProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "tick",
+    },
+  });
+};
 
-const Tick: typeof _componentTick & IElementDescriptor = Object.assign(_componentTick, {
-  OptionName: "tick",
-})
+const Tick = Object.assign<typeof _componentTick, NestedComponentMeta>(_componentTick, {
+  componentType: "option",
+});
 
 // owners:
 // ArgumentAxis
@@ -2980,15 +3220,18 @@ type ITickIntervalProps = React.PropsWithChildren<{
   weeks?: number;
   years?: number;
 }>
-const _componentTickInterval = memo(
-  (props: ITickIntervalProps) => {
-    return React.createElement(NestedOption<ITickIntervalProps>, { ...props });
-  }
-);
+const _componentTickInterval = (props: ITickIntervalProps) => {
+  return React.createElement(NestedOption<ITickIntervalProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "tickInterval",
+    },
+  });
+};
 
-const TickInterval: typeof _componentTickInterval & IElementDescriptor = Object.assign(_componentTickInterval, {
-  OptionName: "tickInterval",
-})
+const TickInterval = Object.assign<typeof _componentTickInterval, NestedComponentMeta>(_componentTickInterval, {
+  componentType: "option",
+});
 
 // owners:
 // ArgumentAxis
@@ -3019,15 +3262,18 @@ type ITitleProps = React.PropsWithChildren<{
   };
   verticalAlignment?: "bottom" | "top";
 }>
-const _componentTitle = memo(
-  (props: ITitleProps) => {
-    return React.createElement(NestedOption<ITitleProps>, { ...props });
-  }
-);
+const _componentTitle = (props: ITitleProps) => {
+  return React.createElement(NestedOption<ITitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "title",
+    },
+  });
+};
 
-const Title: typeof _componentTitle & IElementDescriptor = Object.assign(_componentTitle, {
-  OptionName: "title",
-})
+const Title = Object.assign<typeof _componentTitle, NestedComponentMeta>(_componentTitle, {
+  componentType: "option",
+});
 
 // owners:
 // Chart
@@ -3066,28 +3312,31 @@ type ITooltipProps = React.PropsWithChildren<{
   contentRender?: (...params: any) => React.ReactNode;
   contentComponent?: React.ComponentType<any>;
 }>
-const _componentTooltip = memo(
-  (props: ITooltipProps) => {
-    return React.createElement(NestedOption<ITooltipProps>, { ...props });
-  }
-);
-
-const Tooltip: typeof _componentTooltip & IElementDescriptor = Object.assign(_componentTooltip, {
-  OptionName: "tooltip",
-  ExpectedChildren: {
-    argumentFormat: { optionName: "argumentFormat", isCollectionItem: false },
-    border: { optionName: "border", isCollectionItem: false },
-    font: { optionName: "font", isCollectionItem: false },
-    format: { optionName: "format", isCollectionItem: false },
-    shadow: { optionName: "shadow", isCollectionItem: false },
-    tooltipBorder: { optionName: "border", isCollectionItem: false }
-  },
-  TemplateProps: [{
-    tmplOption: "contentTemplate",
-    render: "contentRender",
-    component: "contentComponent"
-  }],
-})
+const _componentTooltip = (props: ITooltipProps) => {
+  return React.createElement(NestedOption<ITooltipProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "tooltip",
+      ExpectedChildren: {
+        argumentFormat: { optionName: "argumentFormat", isCollectionItem: false },
+        border: { optionName: "border", isCollectionItem: false },
+        font: { optionName: "font", isCollectionItem: false },
+        format: { optionName: "format", isCollectionItem: false },
+        shadow: { optionName: "shadow", isCollectionItem: false },
+        tooltipBorder: { optionName: "border", isCollectionItem: false }
+      },
+      TemplateProps: [{
+        tmplOption: "contentTemplate",
+        render: "contentRender",
+        component: "contentComponent"
+      }],
+    },
+  });
+};
+
+const Tooltip = Object.assign<typeof _componentTooltip, NestedComponentMeta>(_componentTooltip, {
+  componentType: "option",
+});
 
 // owners:
 // Tooltip
@@ -3098,15 +3347,18 @@ type ITooltipBorderProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentTooltipBorder = memo(
-  (props: ITooltipBorderProps) => {
-    return React.createElement(NestedOption<ITooltipBorderProps>, { ...props });
-  }
-);
+const _componentTooltipBorder = (props: ITooltipBorderProps) => {
+  return React.createElement(NestedOption<ITooltipBorderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
 
-const TooltipBorder: typeof _componentTooltipBorder & IElementDescriptor = Object.assign(_componentTooltipBorder, {
-  OptionName: "border",
-})
+const TooltipBorder = Object.assign<typeof _componentTooltipBorder, NestedComponentMeta>(_componentTooltipBorder, {
+  componentType: "option",
+});
 
 // owners:
 // PointImage
@@ -3114,15 +3366,18 @@ type IUrlProps = React.PropsWithChildren<{
   rangeMaxPoint?: string;
   rangeMinPoint?: string;
 }>
-const _componentUrl = memo(
-  (props: IUrlProps) => {
-    return React.createElement(NestedOption<IUrlProps>, { ...props });
-  }
-);
+const _componentUrl = (props: IUrlProps) => {
+  return React.createElement(NestedOption<IUrlProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "url",
+    },
+  });
+};
 
-const Url: typeof _componentUrl & IElementDescriptor = Object.assign(_componentUrl, {
-  OptionName: "url",
-})
+const Url = Object.assign<typeof _componentUrl, NestedComponentMeta>(_componentUrl, {
+  componentType: "option",
+});
 
 // owners:
 // Chart
@@ -3314,36 +3569,39 @@ type IValueAxisProps = React.PropsWithChildren<{
   defaultVisualRange?: Array<Date | number | string> | CommonChartTypes.VisualRange;
   onVisualRangeChange?: (value: Array<Date | number | string> | CommonChartTypes.VisualRange) => void;
 }>
-const _componentValueAxis = memo(
-  (props: IValueAxisProps) => {
-    return React.createElement(NestedOption<IValueAxisProps>, { ...props });
-  }
-);
-
-const ValueAxis: typeof _componentValueAxis & IElementDescriptor = Object.assign(_componentValueAxis, {
-  OptionName: "valueAxis",
-  IsCollectionItem: true,
-  DefaultsProps: {
-    defaultCategories: "categories",
-    defaultVisualRange: "visualRange"
-  },
-  ExpectedChildren: {
-    axisConstantLineStyle: { optionName: "constantLineStyle", isCollectionItem: false },
-    axisLabel: { optionName: "label", isCollectionItem: false },
-    axisTitle: { optionName: "title", isCollectionItem: false },
-    break: { optionName: "breaks", isCollectionItem: true },
-    constantLine: { optionName: "constantLines", isCollectionItem: true },
-    constantLineStyle: { optionName: "constantLineStyle", isCollectionItem: false },
-    label: { optionName: "label", isCollectionItem: false },
-    minorTickInterval: { optionName: "minorTickInterval", isCollectionItem: false },
-    minVisualRangeLength: { optionName: "minVisualRangeLength", isCollectionItem: false },
-    strip: { optionName: "strips", isCollectionItem: true },
-    tickInterval: { optionName: "tickInterval", isCollectionItem: false },
-    title: { optionName: "title", isCollectionItem: false },
-    visualRange: { optionName: "visualRange", isCollectionItem: false },
-    wholeRange: { optionName: "wholeRange", isCollectionItem: false }
-  },
-})
+const _componentValueAxis = (props: IValueAxisProps) => {
+  return React.createElement(NestedOption<IValueAxisProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "valueAxis",
+      IsCollectionItem: true,
+      DefaultsProps: {
+        defaultCategories: "categories",
+        defaultVisualRange: "visualRange"
+      },
+      ExpectedChildren: {
+        axisConstantLineStyle: { optionName: "constantLineStyle", isCollectionItem: false },
+        axisLabel: { optionName: "label", isCollectionItem: false },
+        axisTitle: { optionName: "title", isCollectionItem: false },
+        break: { optionName: "breaks", isCollectionItem: true },
+        constantLine: { optionName: "constantLines", isCollectionItem: true },
+        constantLineStyle: { optionName: "constantLineStyle", isCollectionItem: false },
+        label: { optionName: "label", isCollectionItem: false },
+        minorTickInterval: { optionName: "minorTickInterval", isCollectionItem: false },
+        minVisualRangeLength: { optionName: "minVisualRangeLength", isCollectionItem: false },
+        strip: { optionName: "strips", isCollectionItem: true },
+        tickInterval: { optionName: "tickInterval", isCollectionItem: false },
+        title: { optionName: "title", isCollectionItem: false },
+        visualRange: { optionName: "visualRange", isCollectionItem: false },
+        wholeRange: { optionName: "wholeRange", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const ValueAxis = Object.assign<typeof _componentValueAxis, NestedComponentMeta>(_componentValueAxis, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettings
@@ -3358,15 +3616,18 @@ type IValueErrorBarProps = React.PropsWithChildren<{
   type?: "fixed" | "percent" | "stdDeviation" | "stdError" | "variance";
   value?: number;
 }>
-const _componentValueErrorBar = memo(
-  (props: IValueErrorBarProps) => {
-    return React.createElement(NestedOption<IValueErrorBarProps>, { ...props });
-  }
-);
+const _componentValueErrorBar = (props: IValueErrorBarProps) => {
+  return React.createElement(NestedOption<IValueErrorBarProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "valueErrorBar",
+    },
+  });
+};
 
-const ValueErrorBar: typeof _componentValueErrorBar & IElementDescriptor = Object.assign(_componentValueErrorBar, {
-  OptionName: "valueErrorBar",
-})
+const ValueErrorBar = Object.assign<typeof _componentValueErrorBar, NestedComponentMeta>(_componentValueErrorBar, {
+  componentType: "option",
+});
 
 // owners:
 // Crosshair
@@ -3384,19 +3645,22 @@ type IVerticalLineProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentVerticalLine = memo(
-  (props: IVerticalLineProps) => {
-    return React.createElement(NestedOption<IVerticalLineProps>, { ...props });
-  }
-);
+const _componentVerticalLine = (props: IVerticalLineProps) => {
+  return React.createElement(NestedOption<IVerticalLineProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "verticalLine",
+      ExpectedChildren: {
+        horizontalLineLabel: { optionName: "label", isCollectionItem: false },
+        label: { optionName: "label", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const VerticalLine: typeof _componentVerticalLine & IElementDescriptor = Object.assign(_componentVerticalLine, {
-  OptionName: "verticalLine",
-  ExpectedChildren: {
-    horizontalLineLabel: { optionName: "label", isCollectionItem: false },
-    label: { optionName: "label", isCollectionItem: false }
-  },
-})
+const VerticalLine = Object.assign<typeof _componentVerticalLine, NestedComponentMeta>(_componentVerticalLine, {
+  componentType: "option",
+});
 
 // owners:
 // ArgumentAxis
@@ -3420,19 +3684,22 @@ type IVisualRangeProps = React.PropsWithChildren<{
   defaultStartValue?: Date | number | string;
   onStartValueChange?: (value: Date | number | string) => void;
 }>
-const _componentVisualRange = memo(
-  (props: IVisualRangeProps) => {
-    return React.createElement(NestedOption<IVisualRangeProps>, { ...props });
-  }
-);
+const _componentVisualRange = (props: IVisualRangeProps) => {
+  return React.createElement(NestedOption<IVisualRangeProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "visualRange",
+      DefaultsProps: {
+        defaultEndValue: "endValue",
+        defaultStartValue: "startValue"
+      },
+    },
+  });
+};
 
-const VisualRange: typeof _componentVisualRange & IElementDescriptor = Object.assign(_componentVisualRange, {
-  OptionName: "visualRange",
-  DefaultsProps: {
-    defaultEndValue: "endValue",
-    defaultStartValue: "startValue"
-  },
-})
+const VisualRange = Object.assign<typeof _componentVisualRange, NestedComponentMeta>(_componentVisualRange, {
+  componentType: "option",
+});
 
 // owners:
 // ArgumentAxis
@@ -3456,19 +3723,22 @@ type IWholeRangeProps = React.PropsWithChildren<{
   defaultStartValue?: Date | number | string;
   onStartValueChange?: (value: Date | number | string) => void;
 }>
-const _componentWholeRange = memo(
-  (props: IWholeRangeProps) => {
-    return React.createElement(NestedOption<IWholeRangeProps>, { ...props });
-  }
-);
+const _componentWholeRange = (props: IWholeRangeProps) => {
+  return React.createElement(NestedOption<IWholeRangeProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "wholeRange",
+      DefaultsProps: {
+        defaultEndValue: "endValue",
+        defaultStartValue: "startValue"
+      },
+    },
+  });
+};
 
-const WholeRange: typeof _componentWholeRange & IElementDescriptor = Object.assign(_componentWholeRange, {
-  OptionName: "wholeRange",
-  DefaultsProps: {
-    defaultEndValue: "endValue",
-    defaultStartValue: "startValue"
-  },
-})
+const WholeRange = Object.assign<typeof _componentWholeRange, NestedComponentMeta>(_componentWholeRange, {
+  componentType: "option",
+});
 
 // owners:
 // PointImage
@@ -3476,15 +3746,18 @@ type IWidthProps = React.PropsWithChildren<{
   rangeMaxPoint?: number;
   rangeMinPoint?: number;
 }>
-const _componentWidth = memo(
-  (props: IWidthProps) => {
-    return React.createElement(NestedOption<IWidthProps>, { ...props });
-  }
-);
+const _componentWidth = (props: IWidthProps) => {
+  return React.createElement(NestedOption<IWidthProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "width",
+    },
+  });
+};
 
-const Width: typeof _componentWidth & IElementDescriptor = Object.assign(_componentWidth, {
-  OptionName: "width",
-})
+const Width = Object.assign<typeof _componentWidth, NestedComponentMeta>(_componentWidth, {
+  componentType: "option",
+});
 
 // owners:
 // Chart
@@ -3500,18 +3773,21 @@ type IZoomAndPanProps = React.PropsWithChildren<{
   panKey?: "alt" | "ctrl" | "meta" | "shift";
   valueAxis?: "both" | "none" | "pan" | "zoom";
 }>
-const _componentZoomAndPan = memo(
-  (props: IZoomAndPanProps) => {
-    return React.createElement(NestedOption<IZoomAndPanProps>, { ...props });
-  }
-);
-
-const ZoomAndPan: typeof _componentZoomAndPan & IElementDescriptor = Object.assign(_componentZoomAndPan, {
-  OptionName: "zoomAndPan",
-  ExpectedChildren: {
-    dragBoxStyle: { optionName: "dragBoxStyle", isCollectionItem: false }
-  },
-})
+const _componentZoomAndPan = (props: IZoomAndPanProps) => {
+  return React.createElement(NestedOption<IZoomAndPanProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "zoomAndPan",
+      ExpectedChildren: {
+        dragBoxStyle: { optionName: "dragBoxStyle", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const ZoomAndPan = Object.assign<typeof _componentZoomAndPan, NestedComponentMeta>(_componentZoomAndPan, {
+  componentType: "option",
+});
 
 export default Chart;
 export {
diff --git a/packages/devextreme-react/src/chat.ts b/packages/devextreme-react/src/chat.ts
index 7f7e82853840..22572ba2b9ac 100644
--- a/packages/devextreme-react/src/chat.ts
+++ b/packages/devextreme-react/src/chat.ts
@@ -5,7 +5,7 @@ import dxChat, {
     Properties
 } from "devextreme/ui/chat";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { Message, DisposingEvent, InitializedEvent, MessageSendEvent, User as ChatUser } from "devextreme/ui/chat";
@@ -78,15 +78,18 @@ type IAuthorProps = React.PropsWithChildren<{
   id?: number | string;
   name?: string;
 }>
-const _componentAuthor = memo(
-  (props: IAuthorProps) => {
-    return React.createElement(NestedOption<IAuthorProps>, { ...props });
-  }
-);
+const _componentAuthor = (props: IAuthorProps) => {
+  return React.createElement(NestedOption<IAuthorProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "author",
+    },
+  });
+};
 
-const Author: typeof _componentAuthor & IElementDescriptor = Object.assign(_componentAuthor, {
-  OptionName: "author",
-})
+const Author = Object.assign<typeof _componentAuthor, NestedComponentMeta>(_componentAuthor, {
+  componentType: "option",
+});
 
 // owners:
 // Chat
@@ -94,16 +97,19 @@ type IErrorProps = React.PropsWithChildren<{
   id?: number | string;
   message?: string;
 }>
-const _componentError = memo(
-  (props: IErrorProps) => {
-    return React.createElement(NestedOption<IErrorProps>, { ...props });
-  }
-);
+const _componentError = (props: IErrorProps) => {
+  return React.createElement(NestedOption<IErrorProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "errors",
+      IsCollectionItem: true,
+    },
+  });
+};
 
-const Error: typeof _componentError & IElementDescriptor = Object.assign(_componentError, {
-  OptionName: "errors",
-  IsCollectionItem: true,
-})
+const Error = Object.assign<typeof _componentError, NestedComponentMeta>(_componentError, {
+  componentType: "option",
+});
 
 // owners:
 // Chat
@@ -113,19 +119,22 @@ type IItemProps = React.PropsWithChildren<{
   timestamp?: Date | number | string;
   typing?: boolean;
 }>
-const _componentItem = memo(
-  (props: IItemProps) => {
-    return React.createElement(NestedOption<IItemProps>, { ...props });
-  }
-);
-
-const Item: typeof _componentItem & IElementDescriptor = Object.assign(_componentItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  ExpectedChildren: {
-    author: { optionName: "author", isCollectionItem: false }
-  },
-})
+const _componentItem = (props: IItemProps) => {
+  return React.createElement(NestedOption<IItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      ExpectedChildren: {
+        author: { optionName: "author", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Item = Object.assign<typeof _componentItem, NestedComponentMeta>(_componentItem, {
+  componentType: "option",
+});
 
 // owners:
 // Chat
@@ -134,15 +143,18 @@ type IUserProps = React.PropsWithChildren<{
   id?: number | string;
   name?: string;
 }>
-const _componentUser = memo(
-  (props: IUserProps) => {
-    return React.createElement(NestedOption<IUserProps>, { ...props });
-  }
-);
-
-const User: typeof _componentUser & IElementDescriptor = Object.assign(_componentUser, {
-  OptionName: "user",
-})
+const _componentUser = (props: IUserProps) => {
+  return React.createElement(NestedOption<IUserProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "user",
+    },
+  });
+};
+
+const User = Object.assign<typeof _componentUser, NestedComponentMeta>(_componentUser, {
+  componentType: "option",
+});
 
 export default Chat;
 export {
diff --git a/packages/devextreme-react/src/circular-gauge.ts b/packages/devextreme-react/src/circular-gauge.ts
index 4fd67b8c8b96..cf55b9de53d9 100644
--- a/packages/devextreme-react/src/circular-gauge.ts
+++ b/packages/devextreme-react/src/circular-gauge.ts
@@ -5,7 +5,7 @@ import dxCircularGauge, {
     Properties
 } from "devextreme/viz/circular_gauge";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { DisposingEvent, DrawnEvent, ExportedEvent, ExportingEvent, FileSavingEvent, IncidentOccurredEvent, InitializedEvent, TooltipHiddenEvent, TooltipShownEvent } from "devextreme/viz/circular_gauge";
@@ -114,15 +114,18 @@ type IAnimationProps = React.PropsWithChildren<{
   easing?: "easeOutCubic" | "linear";
   enabled?: boolean;
 }>
-const _componentAnimation = memo(
-  (props: IAnimationProps) => {
-    return React.createElement(NestedOption<IAnimationProps>, { ...props });
-  }
-);
+const _componentAnimation = (props: IAnimationProps) => {
+  return React.createElement(NestedOption<IAnimationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "animation",
+    },
+  });
+};
 
-const Animation: typeof _componentAnimation & IElementDescriptor = Object.assign(_componentAnimation, {
-  OptionName: "animation",
-})
+const Animation = Object.assign<typeof _componentAnimation, NestedComponentMeta>(_componentAnimation, {
+  componentType: "option",
+});
 
 // owners:
 // RangeContainer
@@ -130,15 +133,18 @@ type IBackgroundColorProps = React.PropsWithChildren<{
   base?: string;
   fillId?: string;
 }>
-const _componentBackgroundColor = memo(
-  (props: IBackgroundColorProps) => {
-    return React.createElement(NestedOption<IBackgroundColorProps>, { ...props });
-  }
-);
+const _componentBackgroundColor = (props: IBackgroundColorProps) => {
+  return React.createElement(NestedOption<IBackgroundColorProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "backgroundColor",
+    },
+  });
+};
 
-const BackgroundColor: typeof _componentBackgroundColor & IElementDescriptor = Object.assign(_componentBackgroundColor, {
-  OptionName: "backgroundColor",
-})
+const BackgroundColor = Object.assign<typeof _componentBackgroundColor, NestedComponentMeta>(_componentBackgroundColor, {
+  componentType: "option",
+});
 
 // owners:
 // Tooltip
@@ -149,15 +155,18 @@ type IBorderProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentBorder = memo(
-  (props: IBorderProps) => {
-    return React.createElement(NestedOption<IBorderProps>, { ...props });
-  }
-);
+const _componentBorder = (props: IBorderProps) => {
+  return React.createElement(NestedOption<IBorderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
 
-const Border: typeof _componentBorder & IElementDescriptor = Object.assign(_componentBorder, {
-  OptionName: "border",
-})
+const Border = Object.assign<typeof _componentBorder, NestedComponentMeta>(_componentBorder, {
+  componentType: "option",
+});
 
 // owners:
 // Range
@@ -166,15 +175,18 @@ type IColorProps = React.PropsWithChildren<{
   base?: string;
   fillId?: string;
 }>
-const _componentColor = memo(
-  (props: IColorProps) => {
-    return React.createElement(NestedOption<IColorProps>, { ...props });
-  }
-);
+const _componentColor = (props: IColorProps) => {
+  return React.createElement(NestedOption<IColorProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "color",
+    },
+  });
+};
 
-const Color: typeof _componentColor & IElementDescriptor = Object.assign(_componentColor, {
-  OptionName: "color",
-})
+const Color = Object.assign<typeof _componentColor, NestedComponentMeta>(_componentColor, {
+  componentType: "option",
+});
 
 // owners:
 // CircularGauge
@@ -187,15 +199,18 @@ type IExportProps = React.PropsWithChildren<{
   printingEnabled?: boolean;
   svgToCanvas?: ((svg: any, canvas: any) => any);
 }>
-const _componentExport = memo(
-  (props: IExportProps) => {
-    return React.createElement(NestedOption<IExportProps>, { ...props });
-  }
-);
+const _componentExport = (props: IExportProps) => {
+  return React.createElement(NestedOption<IExportProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "export",
+    },
+  });
+};
 
-const Export: typeof _componentExport & IElementDescriptor = Object.assign(_componentExport, {
-  OptionName: "export",
-})
+const Export = Object.assign<typeof _componentExport, NestedComponentMeta>(_componentExport, {
+  componentType: "option",
+});
 
 // owners:
 // Label
@@ -211,15 +226,18 @@ type IFontProps = React.PropsWithChildren<{
   size?: number | string;
   weight?: number;
 }>
-const _componentFont = memo(
-  (props: IFontProps) => {
-    return React.createElement(NestedOption<IFontProps>, { ...props });
-  }
-);
+const _componentFont = (props: IFontProps) => {
+  return React.createElement(NestedOption<IFontProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "font",
+    },
+  });
+};
 
-const Font: typeof _componentFont & IElementDescriptor = Object.assign(_componentFont, {
-  OptionName: "font",
-})
+const Font = Object.assign<typeof _componentFont, NestedComponentMeta>(_componentFont, {
+  componentType: "option",
+});
 
 // owners:
 // Label
@@ -233,15 +251,18 @@ type IFormatProps = React.PropsWithChildren<{
   type?: "billions" | "currency" | "day" | "decimal" | "exponential" | "fixedPoint" | "largeNumber" | "longDate" | "longTime" | "millions" | "millisecond" | "month" | "monthAndDay" | "monthAndYear" | "percent" | "quarter" | "quarterAndYear" | "shortDate" | "shortTime" | "thousands" | "trillions" | "year" | "dayOfWeek" | "hour" | "longDateLongTime" | "minute" | "second" | "shortDateShortTime";
   useCurrencyAccountingStyle?: boolean;
 }>
-const _componentFormat = memo(
-  (props: IFormatProps) => {
-    return React.createElement(NestedOption<IFormatProps>, { ...props });
-  }
-);
+const _componentFormat = (props: IFormatProps) => {
+  return React.createElement(NestedOption<IFormatProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "format",
+    },
+  });
+};
 
-const Format: typeof _componentFormat & IElementDescriptor = Object.assign(_componentFormat, {
-  OptionName: "format",
-})
+const Format = Object.assign<typeof _componentFormat, NestedComponentMeta>(_componentFormat, {
+  componentType: "option",
+});
 
 // owners:
 // CircularGauge
@@ -249,15 +270,18 @@ type IGeometryProps = React.PropsWithChildren<{
   endAngle?: number;
   startAngle?: number;
 }>
-const _componentGeometry = memo(
-  (props: IGeometryProps) => {
-    return React.createElement(NestedOption<IGeometryProps>, { ...props });
-  }
-);
+const _componentGeometry = (props: IGeometryProps) => {
+  return React.createElement(NestedOption<IGeometryProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "geometry",
+    },
+  });
+};
 
-const Geometry: typeof _componentGeometry & IElementDescriptor = Object.assign(_componentGeometry, {
-  OptionName: "geometry",
-})
+const Geometry = Object.assign<typeof _componentGeometry, NestedComponentMeta>(_componentGeometry, {
+  componentType: "option",
+});
 
 // owners:
 // Scale
@@ -271,19 +295,22 @@ type ILabelProps = React.PropsWithChildren<{
   useRangeColors?: boolean;
   visible?: boolean;
 }>
-const _componentLabel = memo(
-  (props: ILabelProps) => {
-    return React.createElement(NestedOption<ILabelProps>, { ...props });
-  }
-);
-
-const Label: typeof _componentLabel & IElementDescriptor = Object.assign(_componentLabel, {
-  OptionName: "label",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false },
-    format: { optionName: "format", isCollectionItem: false }
-  },
-})
+const _componentLabel = (props: ILabelProps) => {
+  return React.createElement(NestedOption<ILabelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "label",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false },
+        format: { optionName: "format", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Label = Object.assign<typeof _componentLabel, NestedComponentMeta>(_componentLabel, {
+  componentType: "option",
+});
 
 // owners:
 // CircularGauge
@@ -295,21 +322,24 @@ type ILoadingIndicatorProps = React.PropsWithChildren<{
   defaultShow?: boolean;
   onShowChange?: (value: boolean) => void;
 }>
-const _componentLoadingIndicator = memo(
-  (props: ILoadingIndicatorProps) => {
-    return React.createElement(NestedOption<ILoadingIndicatorProps>, { ...props });
-  }
-);
-
-const LoadingIndicator: typeof _componentLoadingIndicator & IElementDescriptor = Object.assign(_componentLoadingIndicator, {
-  OptionName: "loadingIndicator",
-  DefaultsProps: {
-    defaultShow: "show"
-  },
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false }
-  },
-})
+const _componentLoadingIndicator = (props: ILoadingIndicatorProps) => {
+  return React.createElement(NestedOption<ILoadingIndicatorProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "loadingIndicator",
+      DefaultsProps: {
+        defaultShow: "show"
+      },
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const LoadingIndicator = Object.assign<typeof _componentLoadingIndicator, NestedComponentMeta>(_componentLoadingIndicator, {
+  componentType: "option",
+});
 
 // owners:
 // CircularGauge
@@ -320,15 +350,18 @@ type IMarginProps = React.PropsWithChildren<{
   right?: number;
   top?: number;
 }>
-const _componentMargin = memo(
-  (props: IMarginProps) => {
-    return React.createElement(NestedOption<IMarginProps>, { ...props });
-  }
-);
+const _componentMargin = (props: IMarginProps) => {
+  return React.createElement(NestedOption<IMarginProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "margin",
+    },
+  });
+};
 
-const Margin: typeof _componentMargin & IElementDescriptor = Object.assign(_componentMargin, {
-  OptionName: "margin",
-})
+const Margin = Object.assign<typeof _componentMargin, NestedComponentMeta>(_componentMargin, {
+  componentType: "option",
+});
 
 // owners:
 // Scale
@@ -339,15 +372,18 @@ type IMinorTickProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentMinorTick = memo(
-  (props: IMinorTickProps) => {
-    return React.createElement(NestedOption<IMinorTickProps>, { ...props });
-  }
-);
+const _componentMinorTick = (props: IMinorTickProps) => {
+  return React.createElement(NestedOption<IMinorTickProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "minorTick",
+    },
+  });
+};
 
-const MinorTick: typeof _componentMinorTick & IElementDescriptor = Object.assign(_componentMinorTick, {
-  OptionName: "minorTick",
-})
+const MinorTick = Object.assign<typeof _componentMinorTick, NestedComponentMeta>(_componentMinorTick, {
+  componentType: "option",
+});
 
 // owners:
 // RangeContainer
@@ -356,19 +392,22 @@ type IRangeProps = React.PropsWithChildren<{
   endValue?: number;
   startValue?: number;
 }>
-const _componentRange = memo(
-  (props: IRangeProps) => {
-    return React.createElement(NestedOption<IRangeProps>, { ...props });
-  }
-);
-
-const Range: typeof _componentRange & IElementDescriptor = Object.assign(_componentRange, {
-  OptionName: "ranges",
-  IsCollectionItem: true,
-  ExpectedChildren: {
-    color: { optionName: "color", isCollectionItem: false }
-  },
-})
+const _componentRange = (props: IRangeProps) => {
+  return React.createElement(NestedOption<IRangeProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "ranges",
+      IsCollectionItem: true,
+      ExpectedChildren: {
+        color: { optionName: "color", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Range = Object.assign<typeof _componentRange, NestedComponentMeta>(_componentRange, {
+  componentType: "option",
+});
 
 // owners:
 // CircularGauge
@@ -385,19 +424,22 @@ type IRangeContainerProps = React.PropsWithChildren<{
   }[];
   width?: number;
 }>
-const _componentRangeContainer = memo(
-  (props: IRangeContainerProps) => {
-    return React.createElement(NestedOption<IRangeContainerProps>, { ...props });
-  }
-);
-
-const RangeContainer: typeof _componentRangeContainer & IElementDescriptor = Object.assign(_componentRangeContainer, {
-  OptionName: "rangeContainer",
-  ExpectedChildren: {
-    backgroundColor: { optionName: "backgroundColor", isCollectionItem: false },
-    range: { optionName: "ranges", isCollectionItem: true }
-  },
-})
+const _componentRangeContainer = (props: IRangeContainerProps) => {
+  return React.createElement(NestedOption<IRangeContainerProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "rangeContainer",
+      ExpectedChildren: {
+        backgroundColor: { optionName: "backgroundColor", isCollectionItem: false },
+        range: { optionName: "ranges", isCollectionItem: true }
+      },
+    },
+  });
+};
+
+const RangeContainer = Object.assign<typeof _componentRangeContainer, NestedComponentMeta>(_componentRangeContainer, {
+  componentType: "option",
+});
 
 // owners:
 // CircularGauge
@@ -436,20 +478,23 @@ type IScaleProps = React.PropsWithChildren<{
   };
   tickInterval?: number;
 }>
-const _componentScale = memo(
-  (props: IScaleProps) => {
-    return React.createElement(NestedOption<IScaleProps>, { ...props });
-  }
-);
-
-const Scale: typeof _componentScale & IElementDescriptor = Object.assign(_componentScale, {
-  OptionName: "scale",
-  ExpectedChildren: {
-    label: { optionName: "label", isCollectionItem: false },
-    minorTick: { optionName: "minorTick", isCollectionItem: false },
-    tick: { optionName: "tick", isCollectionItem: false }
-  },
-})
+const _componentScale = (props: IScaleProps) => {
+  return React.createElement(NestedOption<IScaleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "scale",
+      ExpectedChildren: {
+        label: { optionName: "label", isCollectionItem: false },
+        minorTick: { optionName: "minorTick", isCollectionItem: false },
+        tick: { optionName: "tick", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Scale = Object.assign<typeof _componentScale, NestedComponentMeta>(_componentScale, {
+  componentType: "option",
+});
 
 // owners:
 // Tooltip
@@ -460,15 +505,18 @@ type IShadowProps = React.PropsWithChildren<{
   offsetY?: number;
   opacity?: number;
 }>
-const _componentShadow = memo(
-  (props: IShadowProps) => {
-    return React.createElement(NestedOption<IShadowProps>, { ...props });
-  }
-);
+const _componentShadow = (props: IShadowProps) => {
+  return React.createElement(NestedOption<IShadowProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "shadow",
+    },
+  });
+};
 
-const Shadow: typeof _componentShadow & IElementDescriptor = Object.assign(_componentShadow, {
-  OptionName: "shadow",
-})
+const Shadow = Object.assign<typeof _componentShadow, NestedComponentMeta>(_componentShadow, {
+  componentType: "option",
+});
 
 // owners:
 // CircularGauge
@@ -476,15 +524,18 @@ type ISizeProps = React.PropsWithChildren<{
   height?: number;
   width?: number;
 }>
-const _componentSize = memo(
-  (props: ISizeProps) => {
-    return React.createElement(NestedOption<ISizeProps>, { ...props });
-  }
-);
+const _componentSize = (props: ISizeProps) => {
+  return React.createElement(NestedOption<ISizeProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "size",
+    },
+  });
+};
 
-const Size: typeof _componentSize & IElementDescriptor = Object.assign(_componentSize, {
-  OptionName: "size",
-})
+const Size = Object.assign<typeof _componentSize, NestedComponentMeta>(_componentSize, {
+  componentType: "option",
+});
 
 // owners:
 // Title
@@ -495,18 +546,21 @@ type ISubtitleProps = React.PropsWithChildren<{
   textOverflow?: "ellipsis" | "hide" | "none";
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentSubtitle = memo(
-  (props: ISubtitleProps) => {
-    return React.createElement(NestedOption<ISubtitleProps>, { ...props });
-  }
-);
-
-const Subtitle: typeof _componentSubtitle & IElementDescriptor = Object.assign(_componentSubtitle, {
-  OptionName: "subtitle",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false }
-  },
-})
+const _componentSubtitle = (props: ISubtitleProps) => {
+  return React.createElement(NestedOption<ISubtitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "subtitle",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Subtitle = Object.assign<typeof _componentSubtitle, NestedComponentMeta>(_componentSubtitle, {
+  componentType: "option",
+});
 
 // owners:
 // CircularGauge
@@ -536,19 +590,22 @@ type ISubvalueIndicatorProps = React.PropsWithChildren<{
   verticalOrientation?: "bottom" | "top";
   width?: number;
 }>
-const _componentSubvalueIndicator = memo(
-  (props: ISubvalueIndicatorProps) => {
-    return React.createElement(NestedOption<ISubvalueIndicatorProps>, { ...props });
-  }
-);
-
-const SubvalueIndicator: typeof _componentSubvalueIndicator & IElementDescriptor = Object.assign(_componentSubvalueIndicator, {
-  OptionName: "subvalueIndicator",
-  ExpectedChildren: {
-    color: { optionName: "color", isCollectionItem: false },
-    text: { optionName: "text", isCollectionItem: false }
-  },
-})
+const _componentSubvalueIndicator = (props: ISubvalueIndicatorProps) => {
+  return React.createElement(NestedOption<ISubvalueIndicatorProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "subvalueIndicator",
+      ExpectedChildren: {
+        color: { optionName: "color", isCollectionItem: false },
+        text: { optionName: "text", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const SubvalueIndicator = Object.assign<typeof _componentSubvalueIndicator, NestedComponentMeta>(_componentSubvalueIndicator, {
+  componentType: "option",
+});
 
 // owners:
 // SubvalueIndicator
@@ -558,19 +615,22 @@ type ITextProps = React.PropsWithChildren<{
   format?: LocalizationTypes.Format;
   indent?: number;
 }>
-const _componentText = memo(
-  (props: ITextProps) => {
-    return React.createElement(NestedOption<ITextProps>, { ...props });
-  }
-);
-
-const Text: typeof _componentText & IElementDescriptor = Object.assign(_componentText, {
-  OptionName: "text",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false },
-    format: { optionName: "format", isCollectionItem: false }
-  },
-})
+const _componentText = (props: ITextProps) => {
+  return React.createElement(NestedOption<ITextProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "text",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false },
+        format: { optionName: "format", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Text = Object.assign<typeof _componentText, NestedComponentMeta>(_componentText, {
+  componentType: "option",
+});
 
 // owners:
 // Scale
@@ -581,15 +641,18 @@ type ITickProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentTick = memo(
-  (props: ITickProps) => {
-    return React.createElement(NestedOption<ITickProps>, { ...props });
-  }
-);
+const _componentTick = (props: ITickProps) => {
+  return React.createElement(NestedOption<ITickProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "tick",
+    },
+  });
+};
 
-const Tick: typeof _componentTick & IElementDescriptor = Object.assign(_componentTick, {
-  OptionName: "tick",
-})
+const Tick = Object.assign<typeof _componentTick, NestedComponentMeta>(_componentTick, {
+  componentType: "option",
+});
 
 // owners:
 // CircularGauge
@@ -615,20 +678,23 @@ type ITitleProps = React.PropsWithChildren<{
   verticalAlignment?: "bottom" | "top";
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentTitle = memo(
-  (props: ITitleProps) => {
-    return React.createElement(NestedOption<ITitleProps>, { ...props });
-  }
-);
-
-const Title: typeof _componentTitle & IElementDescriptor = Object.assign(_componentTitle, {
-  OptionName: "title",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false },
-    margin: { optionName: "margin", isCollectionItem: false },
-    subtitle: { optionName: "subtitle", isCollectionItem: false }
-  },
-})
+const _componentTitle = (props: ITitleProps) => {
+  return React.createElement(NestedOption<ITitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "title",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false },
+        margin: { optionName: "margin", isCollectionItem: false },
+        subtitle: { optionName: "subtitle", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Title = Object.assign<typeof _componentTitle, NestedComponentMeta>(_componentTitle, {
+  componentType: "option",
+});
 
 // owners:
 // CircularGauge
@@ -664,26 +730,29 @@ type ITooltipProps = React.PropsWithChildren<{
   contentRender?: (...params: any) => React.ReactNode;
   contentComponent?: React.ComponentType<any>;
 }>
-const _componentTooltip = memo(
-  (props: ITooltipProps) => {
-    return React.createElement(NestedOption<ITooltipProps>, { ...props });
-  }
-);
-
-const Tooltip: typeof _componentTooltip & IElementDescriptor = Object.assign(_componentTooltip, {
-  OptionName: "tooltip",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    font: { optionName: "font", isCollectionItem: false },
-    format: { optionName: "format", isCollectionItem: false },
-    shadow: { optionName: "shadow", isCollectionItem: false }
-  },
-  TemplateProps: [{
-    tmplOption: "contentTemplate",
-    render: "contentRender",
-    component: "contentComponent"
-  }],
-})
+const _componentTooltip = (props: ITooltipProps) => {
+  return React.createElement(NestedOption<ITooltipProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "tooltip",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        font: { optionName: "font", isCollectionItem: false },
+        format: { optionName: "format", isCollectionItem: false },
+        shadow: { optionName: "shadow", isCollectionItem: false }
+      },
+      TemplateProps: [{
+        tmplOption: "contentTemplate",
+        render: "contentRender",
+        component: "contentComponent"
+      }],
+    },
+  });
+};
+
+const Tooltip = Object.assign<typeof _componentTooltip, NestedComponentMeta>(_componentTooltip, {
+  componentType: "option",
+});
 
 // owners:
 // CircularGauge
@@ -713,15 +782,18 @@ type IValueIndicatorProps = React.PropsWithChildren<{
   verticalOrientation?: "bottom" | "top";
   width?: number;
 }>
-const _componentValueIndicator = memo(
-  (props: IValueIndicatorProps) => {
-    return React.createElement(NestedOption<IValueIndicatorProps>, { ...props });
-  }
-);
-
-const ValueIndicator: typeof _componentValueIndicator & IElementDescriptor = Object.assign(_componentValueIndicator, {
-  OptionName: "valueIndicator",
-})
+const _componentValueIndicator = (props: IValueIndicatorProps) => {
+  return React.createElement(NestedOption<IValueIndicatorProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "valueIndicator",
+    },
+  });
+};
+
+const ValueIndicator = Object.assign<typeof _componentValueIndicator, NestedComponentMeta>(_componentValueIndicator, {
+  componentType: "option",
+});
 
 export default CircularGauge;
 export {
diff --git a/packages/devextreme-react/src/color-box.ts b/packages/devextreme-react/src/color-box.ts
index 457345ff82e9..a5b07759078f 100644
--- a/packages/devextreme-react/src/color-box.ts
+++ b/packages/devextreme-react/src/color-box.ts
@@ -5,7 +5,7 @@ import dxColorBox, {
     Properties
 } from "devextreme/ui/color_box";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { ChangeEvent, ClosedEvent, CopyEvent, CutEvent, DisposingEvent, EnterKeyEvent, FocusInEvent, FocusOutEvent, InitializedEvent, InputEvent, KeyDownEvent, KeyUpEvent, OpenedEvent, PasteEvent, ValueChangedEvent } from "devextreme/ui/color_box";
@@ -121,19 +121,22 @@ type IAnimationProps = React.PropsWithChildren<{
   hide?: AnimationConfig;
   show?: AnimationConfig;
 }>
-const _componentAnimation = memo(
-  (props: IAnimationProps) => {
-    return React.createElement(NestedOption<IAnimationProps>, { ...props });
-  }
-);
-
-const Animation: typeof _componentAnimation & IElementDescriptor = Object.assign(_componentAnimation, {
-  OptionName: "animation",
-  ExpectedChildren: {
-    hide: { optionName: "hide", isCollectionItem: false },
-    show: { optionName: "show", isCollectionItem: false }
-  },
-})
+const _componentAnimation = (props: IAnimationProps) => {
+  return React.createElement(NestedOption<IAnimationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "animation",
+      ExpectedChildren: {
+        hide: { optionName: "hide", isCollectionItem: false },
+        show: { optionName: "show", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Animation = Object.assign<typeof _componentAnimation, NestedComponentMeta>(_componentAnimation, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -141,15 +144,18 @@ type IAtProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentAt = memo(
-  (props: IAtProps) => {
-    return React.createElement(NestedOption<IAtProps>, { ...props });
-  }
-);
+const _componentAt = (props: IAtProps) => {
+  return React.createElement(NestedOption<IAtProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "at",
+    },
+  });
+};
 
-const At: typeof _componentAt & IElementDescriptor = Object.assign(_componentAt, {
-  OptionName: "at",
-})
+const At = Object.assign<typeof _componentAt, NestedComponentMeta>(_componentAt, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -157,15 +163,18 @@ type IBoundaryOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentBoundaryOffset = memo(
-  (props: IBoundaryOffsetProps) => {
-    return React.createElement(NestedOption<IBoundaryOffsetProps>, { ...props });
-  }
-);
+const _componentBoundaryOffset = (props: IBoundaryOffsetProps) => {
+  return React.createElement(NestedOption<IBoundaryOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "boundaryOffset",
+    },
+  });
+};
 
-const BoundaryOffset: typeof _componentBoundaryOffset & IElementDescriptor = Object.assign(_componentBoundaryOffset, {
-  OptionName: "boundaryOffset",
-})
+const BoundaryOffset = Object.assign<typeof _componentBoundaryOffset, NestedComponentMeta>(_componentBoundaryOffset, {
+  componentType: "option",
+});
 
 // owners:
 // ColorBox
@@ -174,19 +183,22 @@ type IButtonProps = React.PropsWithChildren<{
   name?: string;
   options?: dxButtonOptions;
 }>
-const _componentButton = memo(
-  (props: IButtonProps) => {
-    return React.createElement(NestedOption<IButtonProps>, { ...props });
-  }
-);
-
-const Button: typeof _componentButton & IElementDescriptor = Object.assign(_componentButton, {
-  OptionName: "buttons",
-  IsCollectionItem: true,
-  ExpectedChildren: {
-    options: { optionName: "options", isCollectionItem: false }
-  },
-})
+const _componentButton = (props: IButtonProps) => {
+  return React.createElement(NestedOption<IButtonProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "buttons",
+      IsCollectionItem: true,
+      ExpectedChildren: {
+        options: { optionName: "options", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Button = Object.assign<typeof _componentButton, NestedComponentMeta>(_componentButton, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -194,15 +206,18 @@ type ICollisionProps = React.PropsWithChildren<{
   x?: "fit" | "flip" | "flipfit" | "none";
   y?: "fit" | "flip" | "flipfit" | "none";
 }>
-const _componentCollision = memo(
-  (props: ICollisionProps) => {
-    return React.createElement(NestedOption<ICollisionProps>, { ...props });
-  }
-);
+const _componentCollision = (props: ICollisionProps) => {
+  return React.createElement(NestedOption<ICollisionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "collision",
+    },
+  });
+};
 
-const Collision: typeof _componentCollision & IElementDescriptor = Object.assign(_componentCollision, {
-  OptionName: "collision",
-})
+const Collision = Object.assign<typeof _componentCollision, NestedComponentMeta>(_componentCollision, {
+  componentType: "option",
+});
 
 // owners:
 // ColorBox
@@ -273,35 +288,38 @@ type IDropDownOptionsProps = React.PropsWithChildren<{
   titleRender?: (...params: any) => React.ReactNode;
   titleComponent?: React.ComponentType<any>;
 }>
-const _componentDropDownOptions = memo(
-  (props: IDropDownOptionsProps) => {
-    return React.createElement(NestedOption<IDropDownOptionsProps>, { ...props });
-  }
-);
-
-const DropDownOptions: typeof _componentDropDownOptions & IElementDescriptor = Object.assign(_componentDropDownOptions, {
-  OptionName: "dropDownOptions",
-  DefaultsProps: {
-    defaultHeight: "height",
-    defaultPosition: "position",
-    defaultVisible: "visible",
-    defaultWidth: "width"
-  },
-  ExpectedChildren: {
-    animation: { optionName: "animation", isCollectionItem: false },
-    position: { optionName: "position", isCollectionItem: false },
-    toolbarItem: { optionName: "toolbarItems", isCollectionItem: true }
-  },
-  TemplateProps: [{
-    tmplOption: "contentTemplate",
-    render: "contentRender",
-    component: "contentComponent"
-  }, {
-    tmplOption: "titleTemplate",
-    render: "titleRender",
-    component: "titleComponent"
-  }],
-})
+const _componentDropDownOptions = (props: IDropDownOptionsProps) => {
+  return React.createElement(NestedOption<IDropDownOptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "dropDownOptions",
+      DefaultsProps: {
+        defaultHeight: "height",
+        defaultPosition: "position",
+        defaultVisible: "visible",
+        defaultWidth: "width"
+      },
+      ExpectedChildren: {
+        animation: { optionName: "animation", isCollectionItem: false },
+        position: { optionName: "position", isCollectionItem: false },
+        toolbarItem: { optionName: "toolbarItems", isCollectionItem: true }
+      },
+      TemplateProps: [{
+        tmplOption: "contentTemplate",
+        render: "contentRender",
+        component: "contentComponent"
+      }, {
+        tmplOption: "titleTemplate",
+        render: "titleRender",
+        component: "titleComponent"
+      }],
+    },
+  });
+};
+
+const DropDownOptions = Object.assign<typeof _componentDropDownOptions, NestedComponentMeta>(_componentDropDownOptions, {
+  componentType: "option",
+});
 
 // owners:
 // Hide
@@ -312,18 +330,21 @@ type IFromProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentFrom = memo(
-  (props: IFromProps) => {
-    return React.createElement(NestedOption<IFromProps>, { ...props });
-  }
-);
-
-const From: typeof _componentFrom & IElementDescriptor = Object.assign(_componentFrom, {
-  OptionName: "from",
-  ExpectedChildren: {
-    position: { optionName: "position", isCollectionItem: false }
-  },
-})
+const _componentFrom = (props: IFromProps) => {
+  return React.createElement(NestedOption<IFromProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "from",
+      ExpectedChildren: {
+        position: { optionName: "position", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const From = Object.assign<typeof _componentFrom, NestedComponentMeta>(_componentFrom, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -339,19 +360,22 @@ type IHideProps = React.PropsWithChildren<{
   to?: AnimationState;
   type?: "css" | "fade" | "fadeIn" | "fadeOut" | "pop" | "slide" | "slideIn" | "slideOut";
 }>
-const _componentHide = memo(
-  (props: IHideProps) => {
-    return React.createElement(NestedOption<IHideProps>, { ...props });
-  }
-);
-
-const Hide: typeof _componentHide & IElementDescriptor = Object.assign(_componentHide, {
-  OptionName: "hide",
-  ExpectedChildren: {
-    from: { optionName: "from", isCollectionItem: false },
-    to: { optionName: "to", isCollectionItem: false }
-  },
-})
+const _componentHide = (props: IHideProps) => {
+  return React.createElement(NestedOption<IHideProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hide",
+      ExpectedChildren: {
+        from: { optionName: "from", isCollectionItem: false },
+        to: { optionName: "to", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Hide = Object.assign<typeof _componentHide, NestedComponentMeta>(_componentHide, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -359,15 +383,18 @@ type IMyProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentMy = memo(
-  (props: IMyProps) => {
-    return React.createElement(NestedOption<IMyProps>, { ...props });
-  }
-);
+const _componentMy = (props: IMyProps) => {
+  return React.createElement(NestedOption<IMyProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "my",
+    },
+  });
+};
 
-const My: typeof _componentMy & IElementDescriptor = Object.assign(_componentMy, {
-  OptionName: "my",
-})
+const My = Object.assign<typeof _componentMy, NestedComponentMeta>(_componentMy, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -375,15 +402,18 @@ type IOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentOffset = memo(
-  (props: IOffsetProps) => {
-    return React.createElement(NestedOption<IOffsetProps>, { ...props });
-  }
-);
+const _componentOffset = (props: IOffsetProps) => {
+  return React.createElement(NestedOption<IOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "offset",
+    },
+  });
+};
 
-const Offset: typeof _componentOffset & IElementDescriptor = Object.assign(_componentOffset, {
-  OptionName: "offset",
-})
+const Offset = Object.assign<typeof _componentOffset, NestedComponentMeta>(_componentOffset, {
+  componentType: "option",
+});
 
 // owners:
 // Button
@@ -416,20 +446,23 @@ type IOptionsProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentOptions = memo(
-  (props: IOptionsProps) => {
-    return React.createElement(NestedOption<IOptionsProps>, { ...props });
-  }
-);
-
-const Options: typeof _componentOptions & IElementDescriptor = Object.assign(_componentOptions, {
-  OptionName: "options",
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentOptions = (props: IOptionsProps) => {
+  return React.createElement(NestedOption<IOptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "options",
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const Options = Object.assign<typeof _componentOptions, NestedComponentMeta>(_componentOptions, {
+  componentType: "option",
+});
 
 // owners:
 // From
@@ -458,15 +491,18 @@ type IPositionProps = React.PropsWithChildren<{
     y?: number;
   };
 }>
-const _componentPosition = memo(
-  (props: IPositionProps) => {
-    return React.createElement(NestedOption<IPositionProps>, { ...props });
-  }
-);
+const _componentPosition = (props: IPositionProps) => {
+  return React.createElement(NestedOption<IPositionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "position",
+    },
+  });
+};
 
-const Position: typeof _componentPosition & IElementDescriptor = Object.assign(_componentPosition, {
-  OptionName: "position",
-})
+const Position = Object.assign<typeof _componentPosition, NestedComponentMeta>(_componentPosition, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -482,15 +518,18 @@ type IShowProps = React.PropsWithChildren<{
   to?: AnimationState;
   type?: "css" | "fade" | "fadeIn" | "fadeOut" | "pop" | "slide" | "slideIn" | "slideOut";
 }>
-const _componentShow = memo(
-  (props: IShowProps) => {
-    return React.createElement(NestedOption<IShowProps>, { ...props });
-  }
-);
+const _componentShow = (props: IShowProps) => {
+  return React.createElement(NestedOption<IShowProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "show",
+    },
+  });
+};
 
-const Show: typeof _componentShow & IElementDescriptor = Object.assign(_componentShow, {
-  OptionName: "show",
-})
+const Show = Object.assign<typeof _componentShow, NestedComponentMeta>(_componentShow, {
+  componentType: "option",
+});
 
 // owners:
 // Hide
@@ -501,15 +540,18 @@ type IToProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentTo = memo(
-  (props: IToProps) => {
-    return React.createElement(NestedOption<IToProps>, { ...props });
-  }
-);
+const _componentTo = (props: IToProps) => {
+  return React.createElement(NestedOption<IToProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "to",
+    },
+  });
+};
 
-const To: typeof _componentTo & IElementDescriptor = Object.assign(_componentTo, {
-  OptionName: "to",
-})
+const To = Object.assign<typeof _componentTo, NestedComponentMeta>(_componentTo, {
+  componentType: "option",
+});
 
 // owners:
 // DropDownOptions
@@ -532,25 +574,28 @@ type IToolbarItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentToolbarItem = memo(
-  (props: IToolbarItemProps) => {
-    return React.createElement(NestedOption<IToolbarItemProps>, { ...props });
-  }
-);
-
-const ToolbarItem: typeof _componentToolbarItem & IElementDescriptor = Object.assign(_componentToolbarItem, {
-  OptionName: "toolbarItems",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "menuItemTemplate",
-    render: "menuItemRender",
-    component: "menuItemComponent"
-  }, {
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentToolbarItem = (props: IToolbarItemProps) => {
+  return React.createElement(NestedOption<IToolbarItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "toolbarItems",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "menuItemTemplate",
+        render: "menuItemRender",
+        component: "menuItemComponent"
+      }, {
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const ToolbarItem = Object.assign<typeof _componentToolbarItem, NestedComponentMeta>(_componentToolbarItem, {
+  componentType: "option",
+});
 
 export default ColorBox;
 export {
diff --git a/packages/devextreme-react/src/context-menu.ts b/packages/devextreme-react/src/context-menu.ts
index 7fa52ae61512..b80142566027 100644
--- a/packages/devextreme-react/src/context-menu.ts
+++ b/packages/devextreme-react/src/context-menu.ts
@@ -6,7 +6,7 @@ import dxContextMenu, {
     Properties
 } from "devextreme/ui/context_menu";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { dxContextMenuItem, ContentReadyEvent, DisposingEvent, HiddenEvent, HidingEvent, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemRenderedEvent, PositioningEvent, ShowingEvent, ShownEvent } from "devextreme/ui/context_menu";
@@ -110,19 +110,22 @@ type IAnimationProps = React.PropsWithChildren<{
   hide?: AnimationConfig;
   show?: AnimationConfig;
 }>
-const _componentAnimation = memo(
-  (props: IAnimationProps) => {
-    return React.createElement(NestedOption<IAnimationProps>, { ...props });
-  }
-);
-
-const Animation: typeof _componentAnimation & IElementDescriptor = Object.assign(_componentAnimation, {
-  OptionName: "animation",
-  ExpectedChildren: {
-    hide: { optionName: "hide", isCollectionItem: false },
-    show: { optionName: "show", isCollectionItem: false }
-  },
-})
+const _componentAnimation = (props: IAnimationProps) => {
+  return React.createElement(NestedOption<IAnimationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "animation",
+      ExpectedChildren: {
+        hide: { optionName: "hide", isCollectionItem: false },
+        show: { optionName: "show", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Animation = Object.assign<typeof _componentAnimation, NestedComponentMeta>(_componentAnimation, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -130,15 +133,18 @@ type IAtProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentAt = memo(
-  (props: IAtProps) => {
-    return React.createElement(NestedOption<IAtProps>, { ...props });
-  }
-);
+const _componentAt = (props: IAtProps) => {
+  return React.createElement(NestedOption<IAtProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "at",
+    },
+  });
+};
 
-const At: typeof _componentAt & IElementDescriptor = Object.assign(_componentAt, {
-  OptionName: "at",
-})
+const At = Object.assign<typeof _componentAt, NestedComponentMeta>(_componentAt, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -146,15 +152,18 @@ type IBoundaryOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentBoundaryOffset = memo(
-  (props: IBoundaryOffsetProps) => {
-    return React.createElement(NestedOption<IBoundaryOffsetProps>, { ...props });
-  }
-);
+const _componentBoundaryOffset = (props: IBoundaryOffsetProps) => {
+  return React.createElement(NestedOption<IBoundaryOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "boundaryOffset",
+    },
+  });
+};
 
-const BoundaryOffset: typeof _componentBoundaryOffset & IElementDescriptor = Object.assign(_componentBoundaryOffset, {
-  OptionName: "boundaryOffset",
-})
+const BoundaryOffset = Object.assign<typeof _componentBoundaryOffset, NestedComponentMeta>(_componentBoundaryOffset, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -162,15 +171,18 @@ type ICollisionProps = React.PropsWithChildren<{
   x?: "fit" | "flip" | "flipfit" | "none";
   y?: "fit" | "flip" | "flipfit" | "none";
 }>
-const _componentCollision = memo(
-  (props: ICollisionProps) => {
-    return React.createElement(NestedOption<ICollisionProps>, { ...props });
-  }
-);
+const _componentCollision = (props: ICollisionProps) => {
+  return React.createElement(NestedOption<ICollisionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "collision",
+    },
+  });
+};
 
-const Collision: typeof _componentCollision & IElementDescriptor = Object.assign(_componentCollision, {
-  OptionName: "collision",
-})
+const Collision = Object.assign<typeof _componentCollision, NestedComponentMeta>(_componentCollision, {
+  componentType: "option",
+});
 
 // owners:
 // ShowSubmenuMode
@@ -178,15 +190,18 @@ type IDelayProps = React.PropsWithChildren<{
   hide?: number;
   show?: number;
 }>
-const _componentDelay = memo(
-  (props: IDelayProps) => {
-    return React.createElement(NestedOption<IDelayProps>, { ...props });
-  }
-);
+const _componentDelay = (props: IDelayProps) => {
+  return React.createElement(NestedOption<IDelayProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "delay",
+    },
+  });
+};
 
-const Delay: typeof _componentDelay & IElementDescriptor = Object.assign(_componentDelay, {
-  OptionName: "delay",
-})
+const Delay = Object.assign<typeof _componentDelay, NestedComponentMeta>(_componentDelay, {
+  componentType: "option",
+});
 
 // owners:
 // Hide
@@ -197,18 +212,21 @@ type IFromProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentFrom = memo(
-  (props: IFromProps) => {
-    return React.createElement(NestedOption<IFromProps>, { ...props });
-  }
-);
-
-const From: typeof _componentFrom & IElementDescriptor = Object.assign(_componentFrom, {
-  OptionName: "from",
-  ExpectedChildren: {
-    position: { optionName: "position", isCollectionItem: false }
-  },
-})
+const _componentFrom = (props: IFromProps) => {
+  return React.createElement(NestedOption<IFromProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "from",
+      ExpectedChildren: {
+        position: { optionName: "position", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const From = Object.assign<typeof _componentFrom, NestedComponentMeta>(_componentFrom, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -224,19 +242,22 @@ type IHideProps = React.PropsWithChildren<{
   to?: AnimationState;
   type?: "css" | "fade" | "fadeIn" | "fadeOut" | "pop" | "slide" | "slideIn" | "slideOut";
 }>
-const _componentHide = memo(
-  (props: IHideProps) => {
-    return React.createElement(NestedOption<IHideProps>, { ...props });
-  }
-);
-
-const Hide: typeof _componentHide & IElementDescriptor = Object.assign(_componentHide, {
-  OptionName: "hide",
-  ExpectedChildren: {
-    from: { optionName: "from", isCollectionItem: false },
-    to: { optionName: "to", isCollectionItem: false }
-  },
-})
+const _componentHide = (props: IHideProps) => {
+  return React.createElement(NestedOption<IHideProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hide",
+      ExpectedChildren: {
+        from: { optionName: "from", isCollectionItem: false },
+        to: { optionName: "to", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Hide = Object.assign<typeof _componentHide, NestedComponentMeta>(_componentHide, {
+  componentType: "option",
+});
 
 // owners:
 // ContextMenu
@@ -254,21 +275,24 @@ type IItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentItem = memo(
-  (props: IItemProps) => {
-    return React.createElement(NestedOption<IItemProps>, { ...props });
-  }
-);
-
-const Item: typeof _componentItem & IElementDescriptor = Object.assign(_componentItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentItem = (props: IItemProps) => {
+  return React.createElement(NestedOption<IItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const Item = Object.assign<typeof _componentItem, NestedComponentMeta>(_componentItem, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -276,15 +300,18 @@ type IMyProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentMy = memo(
-  (props: IMyProps) => {
-    return React.createElement(NestedOption<IMyProps>, { ...props });
-  }
-);
+const _componentMy = (props: IMyProps) => {
+  return React.createElement(NestedOption<IMyProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "my",
+    },
+  });
+};
 
-const My: typeof _componentMy & IElementDescriptor = Object.assign(_componentMy, {
-  OptionName: "my",
-})
+const My = Object.assign<typeof _componentMy, NestedComponentMeta>(_componentMy, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -292,15 +319,18 @@ type IOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentOffset = memo(
-  (props: IOffsetProps) => {
-    return React.createElement(NestedOption<IOffsetProps>, { ...props });
-  }
-);
+const _componentOffset = (props: IOffsetProps) => {
+  return React.createElement(NestedOption<IOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "offset",
+    },
+  });
+};
 
-const Offset: typeof _componentOffset & IElementDescriptor = Object.assign(_componentOffset, {
-  OptionName: "offset",
-})
+const Offset = Object.assign<typeof _componentOffset, NestedComponentMeta>(_componentOffset, {
+  componentType: "option",
+});
 
 // owners:
 // ContextMenu
@@ -329,15 +359,18 @@ type IPositionProps = React.PropsWithChildren<{
     y?: number;
   };
 }>
-const _componentPosition = memo(
-  (props: IPositionProps) => {
-    return React.createElement(NestedOption<IPositionProps>, { ...props });
-  }
-);
+const _componentPosition = (props: IPositionProps) => {
+  return React.createElement(NestedOption<IPositionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "position",
+    },
+  });
+};
 
-const Position: typeof _componentPosition & IElementDescriptor = Object.assign(_componentPosition, {
-  OptionName: "position",
-})
+const Position = Object.assign<typeof _componentPosition, NestedComponentMeta>(_componentPosition, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -353,15 +386,18 @@ type IShowProps = React.PropsWithChildren<{
   to?: AnimationState;
   type?: "css" | "fade" | "fadeIn" | "fadeOut" | "pop" | "slide" | "slideIn" | "slideOut";
 }>
-const _componentShow = memo(
-  (props: IShowProps) => {
-    return React.createElement(NestedOption<IShowProps>, { ...props });
-  }
-);
+const _componentShow = (props: IShowProps) => {
+  return React.createElement(NestedOption<IShowProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "show",
+    },
+  });
+};
 
-const Show: typeof _componentShow & IElementDescriptor = Object.assign(_componentShow, {
-  OptionName: "show",
-})
+const Show = Object.assign<typeof _componentShow, NestedComponentMeta>(_componentShow, {
+  componentType: "option",
+});
 
 // owners:
 // ContextMenu
@@ -369,15 +405,18 @@ type IShowEventProps = React.PropsWithChildren<{
   delay?: number;
   name?: string;
 }>
-const _componentShowEvent = memo(
-  (props: IShowEventProps) => {
-    return React.createElement(NestedOption<IShowEventProps>, { ...props });
-  }
-);
+const _componentShowEvent = (props: IShowEventProps) => {
+  return React.createElement(NestedOption<IShowEventProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "showEvent",
+    },
+  });
+};
 
-const ShowEvent: typeof _componentShowEvent & IElementDescriptor = Object.assign(_componentShowEvent, {
-  OptionName: "showEvent",
-})
+const ShowEvent = Object.assign<typeof _componentShowEvent, NestedComponentMeta>(_componentShowEvent, {
+  componentType: "option",
+});
 
 // owners:
 // ContextMenu
@@ -388,18 +427,21 @@ type IShowSubmenuModeProps = React.PropsWithChildren<{
   };
   name?: "onClick" | "onHover";
 }>
-const _componentShowSubmenuMode = memo(
-  (props: IShowSubmenuModeProps) => {
-    return React.createElement(NestedOption<IShowSubmenuModeProps>, { ...props });
-  }
-);
-
-const ShowSubmenuMode: typeof _componentShowSubmenuMode & IElementDescriptor = Object.assign(_componentShowSubmenuMode, {
-  OptionName: "showSubmenuMode",
-  ExpectedChildren: {
-    delay: { optionName: "delay", isCollectionItem: false }
-  },
-})
+const _componentShowSubmenuMode = (props: IShowSubmenuModeProps) => {
+  return React.createElement(NestedOption<IShowSubmenuModeProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "showSubmenuMode",
+      ExpectedChildren: {
+        delay: { optionName: "delay", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const ShowSubmenuMode = Object.assign<typeof _componentShowSubmenuMode, NestedComponentMeta>(_componentShowSubmenuMode, {
+  componentType: "option",
+});
 
 // owners:
 // Hide
@@ -410,15 +452,18 @@ type IToProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentTo = memo(
-  (props: IToProps) => {
-    return React.createElement(NestedOption<IToProps>, { ...props });
-  }
-);
-
-const To: typeof _componentTo & IElementDescriptor = Object.assign(_componentTo, {
-  OptionName: "to",
-})
+const _componentTo = (props: IToProps) => {
+  return React.createElement(NestedOption<IToProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "to",
+    },
+  });
+};
+
+const To = Object.assign<typeof _componentTo, NestedComponentMeta>(_componentTo, {
+  componentType: "option",
+});
 
 export default ContextMenu;
 export {
diff --git a/packages/devextreme-react/src/core/__tests__/component.test.tsx b/packages/devextreme-react/src/core/__tests__/component.test.tsx
index f76512cd7cb4..345f3c869d48 100644
--- a/packages/devextreme-react/src/core/__tests__/component.test.tsx
+++ b/packages/devextreme-react/src/core/__tests__/component.test.tsx
@@ -13,6 +13,7 @@ import {
   Widget,
   WidgetClass,
 } from './test-component';
+import { TemplateDiscoveryContext } from '../contexts';
 
 
 jest.useFakeTimers();
@@ -130,8 +131,8 @@ describe('rendering', () => {
     let didRenderToDetachedBranch = false;
 
     beforeEach(() => {
-      WidgetClass.mockImplementation((element: Element) => {
-        didRenderToDetachedBranch = didRenderToDetachedBranch || !element.isConnected;
+      WidgetClass.mockImplementation((element: Element, options: any) => {
+        didRenderToDetachedBranch = didRenderToDetachedBranch || (!element.isConnected && options.isTemplateTested === false);
         return Widget;
       })
     });
@@ -143,11 +144,19 @@ describe('rendering', () => {
     it('does not render a nested component\'s widget to a detached DOM branch in Strict Mode', () => {
       testingLib.configure({ reactStrictMode: true });
 
-      const component = (
-        <TestComponent>
-          <TestComponent>
+      const InnerComponent = () => {
+        const { discoveryRendering: isTemplateTested } = React.useContext(TemplateDiscoveryContext);
+
+        return (
+          <TestComponent isTemplateTested={isTemplateTested}>
             <div>Test</div>
           </TestComponent>
+        );
+      };
+
+      const component = (
+        <TestComponent>
+          <InnerComponent/>
         </TestComponent>
       );
       testingLib.render(component);
@@ -190,7 +199,11 @@ describe('rendering', () => {
     const content = container.firstChild as HTMLElement;
     expect(content.tagName.toLowerCase()).toBe('div');
 
-    expect(createPortalFn).not.toHaveBeenCalled();
+    expect(createPortalFn.mock.calls.some(call => {
+      const reactElement = call[0] as unknown as React.ReactElement;
+
+      return reactElement.type !== TemplateDiscoveryContext.Provider
+    })).toBeFalsy();
   });
 
   it('renders portal component with children correctly', () => {
@@ -215,7 +228,11 @@ describe('rendering', () => {
     expect(portal.children.length).toBe(1);
     expect(portal.children[0].tagName.toLowerCase()).toBe('span');
 
-    expect(createPortalFn).toHaveBeenCalledTimes(1);
+    expect(createPortalFn.mock.calls.filter(call => {
+      const reactElement = call[0] as unknown as React.ReactElement;
+
+      return reactElement.type !== TemplateDiscoveryContext.Provider
+    }).length).toEqual(1);
   });
 
   it('create widget on componentDidMount', () => {
@@ -239,8 +256,8 @@ describe('rendering', () => {
       </TestComponent>,
     );
 
-    expect(WidgetClass.mock.instances.length).toBe(2);
-    expect(WidgetClass.mock.instances[1]).toEqual({});
+    expect(WidgetClass.mock.instances.length).toBe(3);
+    expect(WidgetClass.mock.instances[2]).toEqual({});
   });
 
   it('clears nested option in strict mode', () => {
@@ -251,7 +268,7 @@ describe('rendering', () => {
         </TestComponent>
       </React.StrictMode>,
     );
-    expect(Widget.clearExtensions).toHaveBeenCalledTimes(4);
+    expect(Widget.clearExtensions).toHaveBeenCalledTimes(6);
   });
 
   it('do not pass children to options', () => {
diff --git a/packages/devextreme-react/src/core/__tests__/config.test.tsx b/packages/devextreme-react/src/core/__tests__/config.test.tsx
index beb4845858af..241cfa92022e 100644
--- a/packages/devextreme-react/src/core/__tests__/config.test.tsx
+++ b/packages/devextreme-react/src/core/__tests__/config.test.tsx
@@ -36,18 +36,19 @@ describe('useLegacyTemplateEngine', () => {
 
   it('works for render-function template', () => {
     const ItemTemplate = (data: any) => (
-      <div className="template">
-        value:
-        {' '}
-        {data.value}
-        , key:
-        {' '}
-        {data.key}
-        , dxkey:
-        {' '}
-        {data.dxkey}
-      </div>
+        <div className="template">
+          value:
+          {' '}
+          {data.value}
+          , key:
+          {' '}
+          {data.key}
+          , dxkey:
+          {' '}
+          {data.dxkey}
+        </div>
     );
+
     const ref = React.createRef<HTMLDivElement>();
 
     const { container } = testingRender(
diff --git a/packages/devextreme-react/src/core/__tests__/extension-component.test.tsx b/packages/devextreme-react/src/core/__tests__/extension-component.test.tsx
index 123704711873..acdb096e8970 100644
--- a/packages/devextreme-react/src/core/__tests__/extension-component.test.tsx
+++ b/packages/devextreme-react/src/core/__tests__/extension-component.test.tsx
@@ -10,6 +10,7 @@ import {
   WidgetClass,
 } from './test-component';
 import { IHtmlOptions } from '../component-base';
+import { NestedComponentMeta } from '../types';
 
 const ExtensionWidgetClass = jest.fn<typeof Widget, any[]>(() => Widget);
 
@@ -20,11 +21,9 @@ const TestExtensionComponent = memo(function TestExtensionComponent(props: any)
       {...props}
     />
   );
-}) as React.MemoExoticComponent<any> & {
-  isExtensionComponent: boolean
-};;
+}) as React.MemoExoticComponent<any> & NestedComponentMeta;
 
-TestExtensionComponent.isExtensionComponent = true;
+TestExtensionComponent.componentType = 'extension';
 
 afterEach(() => {
   WidgetClass.mockClear();
@@ -32,15 +31,18 @@ afterEach(() => {
   cleanup();
 });
 
-const NestedComponent = memo(function NestedComponent(props: any) {
+const NestedComponent = function NestedComponent(props: any) {
   return (
     <ConfigurationComponent<{ a: number }>
+      elementDescriptor={{
+        OptionName: 'option1'
+      }}
       {...props}
     />
   );
-}) as React.MemoExoticComponent<any> & { OptionName: string };
+} as React.ComponentType<any> & NestedComponentMeta;
 
-NestedComponent.OptionName = 'option1';
+NestedComponent.componentType = 'option';
 
 it('is initialized as a plugin-component', () => {
   const onMounted = jest.fn();
@@ -68,8 +70,8 @@ it('creates widget on componentDidMount inside another component on same element
     </TestComponent>,
   );
 
-  expect(ExtensionWidgetClass).toHaveBeenCalledTimes(1);
-  expect(ExtensionWidgetClass.mock.calls[0][0]).toBe(WidgetClass.mock.calls[0][0]);
+  expect(ExtensionWidgetClass).toHaveBeenCalledTimes(2);
+  expect(ExtensionWidgetClass.mock.calls[1][0]).toBe(WidgetClass.mock.calls[0][0]);
 });
 
 it('unmounts without errors', () => {
@@ -89,7 +91,7 @@ it('pulls options from a single nested component', () => {
     </TestComponent>,
   );
 
-  const options = ExtensionWidgetClass.mock.calls[0][1];
+  const options = ExtensionWidgetClass.mock.calls[1][1];
 
   expect(options).toHaveProperty('option1');
   expect(options.option1).toMatchObject({
diff --git a/packages/devextreme-react/src/core/__tests__/nested-option.test.tsx b/packages/devextreme-react/src/core/__tests__/nested-option.test.tsx
index 4d1c53b9f981..b75c5057fb71 100644
--- a/packages/devextreme-react/src/core/__tests__/nested-option.test.tsx
+++ b/packages/devextreme-react/src/core/__tests__/nested-option.test.tsx
@@ -2,131 +2,141 @@
 import { render, cleanup } from '@testing-library/react';
 import * as React from 'react';
 import { memo } from 'react';
-import { Component, IHtmlOptions } from '../component';
+import { Component, IHtmlOptions, NestedComponentMeta } from '../component';
 import ConfigurationComponent from '../nested-option';
-import { TestComponent, Widget, WidgetClass } from './test-component';
+import { TestComponent, TestPortalComponent, Widget, WidgetClass } from './test-component';
 
 jest.useFakeTimers();
 
-const NestedComponent = memo(function NestedComponent(props: any) {
+const NestedComponent = function NestedComponent(props: any) {
   return (
     <ConfigurationComponent<{ a: number } & React.PropsWithChildren>
+      elementDescriptor={{
+        OptionName: 'option',
+      }}
       {...props}
     />
   );
-}) as React.MemoExoticComponent<any> & { OptionName: string };
+} as React.ComponentType<any> & NestedComponentMeta;
 
-NestedComponent.OptionName = 'option';
+NestedComponent.componentType = 'option';
 
-const NestedComponentWithPredfeinedProps = memo(function NestedComponentWithPredfeinedProps(props: any) {
+const NestedComponentWithPredfeinedProps = function NestedComponentWithPredfeinedProps(props: any) {
   return (
     <ConfigurationComponent<{ a: number } & React.PropsWithChildren>
+      elementDescriptor={{
+        OptionName: 'option',
+        PredefinedProps: {
+          predefinedProp: 'predefined-value',
+        },
+      }}
       {...props}
     />
   );
-}) as React.MemoExoticComponent<any> & {
-  OptionName: string
-  PredefinedProps: Record<string, string>
-};
+} as React.ComponentType<any> & NestedComponentMeta;
 
-NestedComponentWithPredfeinedProps.OptionName = 'option';
-NestedComponentWithPredfeinedProps.PredefinedProps = {
-  predefinedProp: 'predefined-value',
-};
+NestedComponentWithPredfeinedProps.componentType = 'option';
 
-const CollectionNestedWithPredfeinedProps1 = memo(function CollectionNestedWithPredfeinedProps1(props: any) {
+const CollectionNestedWithPredfeinedProps1 = function CollectionNestedWithPredfeinedProps1(props: any) {
   return (
     <ConfigurationComponent<{ a: number }>
+      elementDescriptor={{
+        IsCollectionItem: true,
+        OptionName: 'option',
+        PredefinedProps: {
+          predefinedProp: 'predefined-value-1',
+        },
+      }}
       {...props}
     />
   );
-}) as React.MemoExoticComponent<any> & {
-  OptionName: string
-  PredefinedProps: Record<string, string>
-  IsCollectionItem: boolean
-};
+} as React.ComponentType<any> & NestedComponentMeta;
 
-CollectionNestedWithPredfeinedProps1.IsCollectionItem = true;
-CollectionNestedWithPredfeinedProps1.OptionName = 'option';
-CollectionNestedWithPredfeinedProps1.PredefinedProps = {
-  predefinedProp: 'predefined-value-1',
-};
+CollectionNestedWithPredfeinedProps1.componentType = 'option';
 
-const CollectionNestedWithPredfeinedProps2 = memo(function CollectionNestedWithPredfeinedProps2(props: any) {
+const CollectionNestedWithPredfeinedProps2 = function CollectionNestedWithPredfeinedProps2(props: any) {
   return (
     <ConfigurationComponent<{ a: number }>
+      elementDescriptor={{
+        IsCollectionItem: true,
+        OptionName: 'option',
+        PredefinedProps: {
+          predefinedProp: 'predefined-value-2',
+        },
+      }}
       {...props}
     />
   );
-}) as React.MemoExoticComponent<any> & {
-  OptionName: string
-  PredefinedProps: Record<string, string>
-  IsCollectionItem: boolean
-};
+} as React.ComponentType<any> & NestedComponentMeta;
 
-CollectionNestedWithPredfeinedProps2.IsCollectionItem = true;
-CollectionNestedWithPredfeinedProps2.OptionName = 'option';
-CollectionNestedWithPredfeinedProps2.PredefinedProps = {
-  predefinedProp: 'predefined-value-2',
-};
+CollectionNestedWithPredfeinedProps2.componentType = 'option';
 
-const SubNestedComponent = memo(function SubNestedComponent(props: any) {
+const SubNestedComponent = function SubNestedComponent(props: any) {
   return (
     <ConfigurationComponent<{ d: string }>
+      elementDescriptor={{
+        OptionName: 'subOption',
+      }}
       {...props}
     />
   );
-}) as React.MemoExoticComponent<any> & { OptionName: string };
+} as React.ComponentType<any> & NestedComponentMeta;
 
-SubNestedComponent.OptionName = 'subOption';
+SubNestedComponent.componentType = 'option';
 
-const AnotherSubNestedComponent = memo(function AnotherSubNestedComponent(props: any) {
+const AnotherSubNestedComponent = function AnotherSubNestedComponent(props: any) {
   return (
     <ConfigurationComponent<{ e: string }>
+      elementDescriptor={{
+        OptionName: 'anotherSubOption',
+      }}
       {...props}
     />
   );
-}) as React.MemoExoticComponent<any> & { OptionName: string };
+} as React.ComponentType<any> & NestedComponentMeta;
 
-AnotherSubNestedComponent.OptionName = 'anotherSubOption';
+AnotherSubNestedComponent.componentType = 'option';
 
-const AnotherNestedComponent = memo(function AnotherNestedComponent(props: any) {
+const AnotherNestedComponent = function AnotherNestedComponent(props: any) {
   return (
     <ConfigurationComponent<{ b: string }>
+      elementDescriptor={{
+        OptionName: 'anotherOption',
+      }}
       {...props}
     />
   );
-}) as React.MemoExoticComponent<any> & { OptionName: string };
+} as React.ComponentType<any> & NestedComponentMeta;
 
-AnotherNestedComponent.OptionName = 'anotherOption';
+AnotherNestedComponent.componentType = 'option';
 
-const CollectionNestedComponent = memo(function CollectionNestedComponent(props: any) {
+const CollectionNestedComponent = function CollectionNestedComponent(props: any) {
   return (
     <ConfigurationComponent<{ c?: number; d?: string }>
+      elementDescriptor={{
+        OptionName: 'itemOptions',
+        IsCollectionItem: true,
+      }}
       {...props}
     />
   );
-}) as React.MemoExoticComponent<any> & {
-  OptionName: string
-  IsCollectionItem: boolean
-};
+} as React.ComponentType<any> & NestedComponentMeta;
 
-CollectionNestedComponent.OptionName = 'itemOptions';
-CollectionNestedComponent.IsCollectionItem = true;
+CollectionNestedComponent.componentType = 'option';
 
-const CollectionSubNestedComponent = memo(function CollectionSubNestedComponent(props: any) {
+const CollectionSubNestedComponent = function CollectionSubNestedComponent(props: any) {
   return (
     <ConfigurationComponent<{ c?: number; d?: string }>
+      elementDescriptor={{
+        OptionName: 'subItemsOptions',
+        IsCollectionItem: true,
+      }}
       {...props}
     />
   );
-}) as React.MemoExoticComponent<any> & {
-  OptionName: string
-  IsCollectionItem: boolean
-};
+} as React.ComponentType<any> & NestedComponentMeta;
 
-CollectionSubNestedComponent.OptionName = 'subItemsOptions';
-CollectionSubNestedComponent.IsCollectionItem = true;
+CollectionSubNestedComponent.componentType = 'option';
 
 describe('nested option', () => {
   afterEach(() => {
@@ -146,6 +156,93 @@ describe('nested option', () => {
         a: 123,
       },
     });
+
+    const MySetting = () => <NestedComponent a={345} />;
+
+    render(
+      <TestComponent>
+        <MySetting />
+      </TestComponent>,
+    );
+
+    expect(WidgetClass.mock.calls[1][1]).toEqual({
+      templatesRenderAsynchronously: true,
+      option: {
+        a: 345,
+      },
+    });
+  });
+
+  it('is pulled from portal component', () => {
+    render(
+      <TestPortalComponent>
+        <NestedComponent a={123} />
+      </TestPortalComponent>,
+    );
+
+    expect(WidgetClass.mock.calls[0][1]).toEqual({
+      templatesRenderAsynchronously: true,
+    });
+
+    expect(Widget.option.mock.calls[0][1]).toEqual({ a: 123 });
+
+    const MySetting = () => <NestedComponent a={345} />;
+
+    render(
+      <TestPortalComponent>
+        <MySetting />
+      </TestPortalComponent>,
+    );
+
+    expect(WidgetClass.mock.calls[1][1]).toEqual({
+      templatesRenderAsynchronously: true,
+    });
+
+    expect(Widget.option.mock.calls[0][1]).toEqual({ a: 345 });
+  });
+
+  it('is pulled form nested component', () => {
+    render(
+      <TestComponent
+        templateProps={[{
+          tmplOption: 'template',
+          render: 'render',
+          component: 'component',
+        }]}>
+        <TestComponent>
+          <NestedComponent a={123} />
+        </TestComponent>
+      </TestComponent>,
+    );
+
+    expect(WidgetClass.mock.calls[0][1]).toEqual({
+      templatesRenderAsynchronously: true,
+      option: {
+        a: 123,
+      },
+    });
+
+    const MySetting = () => <NestedComponent a={345} />;
+
+    render(
+      <TestComponent
+        templateProps={[{
+          tmplOption: 'template',
+          render: 'render',
+          component: 'component',
+        }]}>
+        <TestComponent>
+          <MySetting />
+        </TestComponent>
+      </TestComponent>,
+    );
+
+    expect(WidgetClass.mock.calls[3][1]).toEqual({
+      templatesRenderAsynchronously: true,
+      option: {
+        a: 345,
+      },
+    });
   });
 
   it('is not pulled during conditional rendering', () => {
@@ -162,6 +259,24 @@ describe('nested option', () => {
         a: 123,
       },
     });
+
+    const MySetting = () => <>
+      <NestedComponent a={789} />
+      {false && <NestedComponent a={987} />}
+    </>;
+
+    render(
+      <TestComponent>
+        <MySetting />
+      </TestComponent>,
+    );
+
+    expect(WidgetClass.mock.calls[1][1]).toEqual({
+      templatesRenderAsynchronously: true,
+      option: {
+        a: 789,
+      },
+    });
   });
 
   it('is pulled (several options)', () => {
@@ -181,6 +296,27 @@ describe('nested option', () => {
         b: 'abc',
       },
     });
+
+    const MySetting = () => <>
+      <NestedComponent a={456} />
+      <AnotherNestedComponent b="def" />
+    </>;
+
+    render(
+      <TestComponent>
+        <MySetting />
+      </TestComponent>,
+    );
+
+    expect(WidgetClass.mock.calls[1][1]).toEqual({
+      templatesRenderAsynchronously: true,
+      option: {
+        a: 456,
+      },
+      anotherOption: {
+        b: 'def',
+      },
+    });
   });
 
   it('is pulled overriden if not a collection item', () => {
@@ -197,6 +333,24 @@ describe('nested option', () => {
         a: 456,
       },
     });
+
+    const MySetting = () => <>
+      <NestedComponent a={789} />
+      <NestedComponent a={987} />
+    </>;
+
+    render(
+      <TestComponent>
+        <MySetting />
+      </TestComponent>,
+    );
+
+    expect(WidgetClass.mock.calls[1][1]).toEqual({
+      templatesRenderAsynchronously: true,
+      option: {
+        a: 987,
+      },
+    });
   });
 
   it('is pulled as a collection item', () => {
@@ -212,6 +366,23 @@ describe('nested option', () => {
         { c: 123, d: 'abc' },
       ],
     });
+
+    const MySetting = () => <>
+      <CollectionNestedComponent c={456} d="def" />
+    </>;
+
+    render(
+      <TestComponent>
+        <MySetting />
+      </TestComponent>,
+    );
+
+    expect(WidgetClass.mock.calls[1][1]).toEqual({
+      templatesRenderAsynchronously: true,
+      itemOptions: [
+        { c: 456, d: 'def' },
+      ],
+    });
   });
 
   it('is pulled as a collection item (several items)', () => {
@@ -231,6 +402,54 @@ describe('nested option', () => {
         { d: 'def' },
       ],
     });
+
+    const MySetting = () => <>
+      <CollectionNestedComponent c={456} d="def" />
+      <CollectionNestedComponent c={789} />
+      <CollectionNestedComponent d="ghi" />
+    </>;
+
+    render(
+      <TestComponent>
+        <MySetting />
+      </TestComponent>,
+    );
+
+    expect(WidgetClass.mock.calls[1][1]).toEqual({
+      templatesRenderAsynchronously: true,
+      itemOptions: [
+        { c: 456, d: 'def' },
+        { c: 789 },
+        { d: 'ghi' },
+      ],
+    });
+
+    const MySetting1 = () => <>
+      <CollectionNestedComponent c={789} d="ghi" />
+    </>;
+    const MySetting2 = () => <>
+      <CollectionNestedComponent c={987} />
+    </>;
+    const MySetting3 = () => <>
+      <CollectionNestedComponent d="jkl" />
+    </>;
+
+    render(
+      <TestComponent>
+        <MySetting1 />
+        <MySetting2 />
+        <MySetting3 />
+      </TestComponent>,
+    );
+
+    expect(WidgetClass.mock.calls[2][1]).toEqual({
+      templatesRenderAsynchronously: true,
+      itemOptions: [
+        { c: 789, d: 'ghi' },
+        { c: 987 },
+        { d: 'jkl' },
+      ],
+    });
   });
 
   it('is pulled according to expectations', () => {
@@ -267,6 +486,25 @@ describe('nested option', () => {
       ],
       expectedOption: { c: 456, d: 'abc' },
     });
+
+    const MySetting = () => <>
+      <NestedComponent a={456} />
+      <CollectionNestedComponent c={789} d="def" />
+    </>;
+
+    render(
+      <TestComponentWithExpectation>
+        <MySetting />
+      </TestComponentWithExpectation>,
+    );
+
+    expect(WidgetClass.mock.calls[1][1]).toEqual({
+      templatesRenderAsynchronously: true,
+      expectedItemOptions: [
+        { a: 456 },
+      ],
+      expectedOption: { c: 789, d: 'def' },
+    });
   });
 
   it('is pulled with predefined props', () => {
@@ -276,7 +514,21 @@ describe('nested option', () => {
       </TestComponent>,
     );
 
-    const actualProps = WidgetClass.mock.calls[0][1];
+    let actualProps = WidgetClass.mock.calls[0][1];
+    expect(actualProps.option).toHaveProperty('predefinedProp');
+    expect(actualProps.option.predefinedProp).toBe('predefined-value');
+
+    const MySetting = () => <>
+      <NestedComponentWithPredfeinedProps a={456} />
+    </>;
+
+    render(
+      <TestComponent>
+        <MySetting />
+      </TestComponent>,
+    );
+
+    actualProps = WidgetClass.mock.calls[1][1];
     expect(actualProps.option).toHaveProperty('predefinedProp');
     expect(actualProps.option.predefinedProp).toBe('predefined-value');
   });
@@ -289,16 +541,34 @@ describe('nested option', () => {
       </TestComponent>,
     );
 
-    const actualProps = WidgetClass.mock.calls[0][1];
+    let actualProps = WidgetClass.mock.calls[0][1];
 
     expect(actualProps.option).toEqual([
       { predefinedProp: 'predefined-value-1', a: 123 },
       { predefinedProp: 'predefined-value-2', a: 456 },
     ]);
+
+    const MySetting = () => <>
+      <CollectionNestedWithPredfeinedProps1 a={789} />
+      <CollectionNestedWithPredfeinedProps2 a={987} />
+    </>;
+
+    render(
+      <TestComponent>
+        <MySetting />
+      </TestComponent>,
+    );
+
+    actualProps = WidgetClass.mock.calls[1][1];
+
+    expect(actualProps.option).toEqual([
+      { predefinedProp: 'predefined-value-1', a: 789 },
+      { predefinedProp: 'predefined-value-2', a: 987 },
+    ]);
   });
 
   it('is pulled as a collection item after update', () => {
-    const { rerender } = render(
+    let { rerender } = render(
       <TestComponent>
         <CollectionNestedComponent key={1} c={123} d="abc" />
         <CollectionNestedComponent key={2} c={456} />
@@ -316,10 +586,32 @@ describe('nested option', () => {
 
     expect(Widget.option.mock.calls.length).toBe(1);
     expect(Widget.option.mock.calls[0]).toEqual(['itemOptions[1].c', 999]);
+
+    const MySetting = ({ c1, c2, d1, d2 }) => <>
+        <CollectionNestedComponent key={1} c={c1} d={d1} />
+        <CollectionNestedComponent key={2} c={c2} />
+        <CollectionNestedComponent key={3} d={d2} />
+    </>;
+
+    ({ rerender } = render(
+      <TestComponent>
+        <MySetting c1={456} c2={789} d1='def' d2='ghi' />
+      </TestComponent>,
+    ));
+
+    rerender(
+      <TestComponent>
+        <MySetting c1={456} c2={1000} d1='def' d2='ghi' />
+      </TestComponent>,
+    );
+
+    jest.runAllTimers();
+    expect(Widget.option.mock.calls.length).toBe(1);
+    expect(Widget.option.mock.calls[0]).toEqual(['itemOptions[1].c', 1000]);
   });
 
   it('is pulled after update', () => {
-    const TestContainer = (props: any) => {
+    let TestContainer = (props: any) => {
       const { value } = props;
       return (
         <TestComponent>
@@ -327,12 +619,32 @@ describe('nested option', () => {
         </TestComponent>
       );
     };
-    const { rerender } = render(<TestContainer value={123} />);
+    let { rerender } = render(<TestContainer value={123} />);
     rerender(<TestContainer value={456} />);
 
     jest.runAllTimers();
     expect(Widget.option.mock.calls.length).toBe(1);
     expect(Widget.option.mock.calls[0]).toEqual(['option.a', 456]);
+
+    const MySetting = ({ value }) => <>
+      <NestedComponent a={value} />
+    </>;
+
+    TestContainer = (props: any) => {
+      const { value } = props;
+      return (
+        <TestComponent>
+          <MySetting value={value} />
+        </TestComponent>
+      );
+    };
+
+    ({ rerender } = render(<TestContainer value={456} />));
+    rerender(<TestContainer value={789} />);
+  
+    jest.runAllTimers();
+    expect(Widget.option.mock.calls.length).toBe(1);
+    expect(Widget.option.mock.calls[0]).toEqual(['option.a', 789]);
   });
 
   it('is pulled after update without rubbish', () => {
@@ -352,26 +664,32 @@ describe('nested option', () => {
 
   it('updates widget option when collection item added', () => {
     const TestContainer = (props: any) => {
-      const { children } = props;
-      const nesteds = children.map((child: any) => (
-        <CollectionNestedComponent c={child.c} d={child.d} key={child.key} />
-      ));
+      const { children, wrapOptions } = props;
+      const nesteds = children.map((child: any) => {
+        if (wrapOptions) {
+          const MySetting = (props) => <CollectionNestedComponent {...props} />;
+
+          return <MySetting {...child} />
+        } else {
+          return <CollectionNestedComponent {...child}/>;
+        }
+      });
 
       return (<TestComponent>{nesteds}</TestComponent>);
     };
 
-    const startChildren = [
+    let startChildren = [
       { c: 123, d: 'abc', key: 1 },
       { c: 456, d: 'def', key: 2 },
     ];
 
-    const endChildren = [
+    let endChildren = [
       { c: 123, d: 'abc', key: 1 },
       { c: 456, d: 'def', key: 2 },
       { c: 789, d: 'ghi', key: 3 },
     ];
-    const { rerender } = render(<TestContainer>{startChildren}</TestContainer>);
-    rerender(<TestContainer>{endChildren}</TestContainer>);
+    let { rerender } = render(<TestContainer wrapOptions={false}>{startChildren}</TestContainer>);
+    rerender(<TestContainer wrapOptions={false}>{endChildren}</TestContainer>);
 
     jest.runAllTimers();
     expect(Widget.option.mock.calls.length).toBe(1);
@@ -380,36 +698,83 @@ describe('nested option', () => {
       { c: 456, d: 'def' },
       { c: 789, d: 'ghi' },
     ]]);
+
+    startChildren = [
+      { c: 456, d: 'def', key: 1 },
+      { c: 789, d: 'ghi', key: 2 },
+    ];
+
+    endChildren = [
+      { c: 456, d: 'def', key: 1 },
+      { c: 789, d: 'ghi', key: 2 },
+      { c: 987, d: 'jkl', key: 3 },
+    ];
+
+    ({ rerender } = render(<TestContainer wrapOptions={true}>{startChildren}</TestContainer>));
+    rerender(<TestContainer wrapOptions={true}>{endChildren}</TestContainer>);
+
+    jest.runAllTimers();
+    expect(Widget.option.mock.calls.length).toBe(1);
+    expect(Widget.option.mock.calls[0]).toEqual(['itemOptions', [
+      { c: 456, d: 'def' },
+      { c: 789, d: 'ghi' },
+      { c: 987, d: 'jkl' },
+    ]]);
   });
 
   it('updates widget option when collection item removed', () => {
     const TestContainer = (props: any) => {
-      const { children } = props;
-      const nesteds = children.map((child: any) => (
-        <CollectionNestedComponent c={child.c} d={child.d} key={child.key} />
-      ));
+      const { children, wrapOptions } = props;
+      const nesteds = children.map((child: any) => {
+        if (wrapOptions) {
+          const MySetting = (props) => <CollectionNestedComponent {...props} />;
+
+          return <MySetting {...child} />
+        } else {
+          return <CollectionNestedComponent {...child}/>;
+        }
+      });
 
       return (<TestComponent>{nesteds}</TestComponent>);
     };
 
-    const startChildren = [
+    let startChildren = [
       { c: 123, d: 'abc', key: 1 },
       { c: 456, d: 'def', key: 2 },
     ];
 
-    const endChildren = [
+    let endChildren = [
       { c: 123, d: 'abc', key: 1 },
     ];
 
-    const { rerender } = render(<TestContainer>{startChildren}</TestContainer>);
+    let { rerender } = render(<TestContainer wrapOptions={false}>{startChildren}</TestContainer>);
 
-    rerender(<TestContainer>{endChildren}</TestContainer>);
+    rerender(<TestContainer wrapOptions={false}>{endChildren}</TestContainer>);
 
     jest.runAllTimers();
     expect(Widget.option.mock.calls.length).toBe(1);
     expect(Widget.option.mock.calls[0]).toEqual(['itemOptions', [
       { c: 123, d: 'abc' },
     ]]);
+
+    startChildren = [
+      { c: 456, d: 'def', key: 1 },
+      { c: 789, d: 'ghi', key: 2 },
+    ];
+
+    endChildren = [
+      { c: 456, d: 'def', key: 1 },
+    ];
+
+    ({ rerender } = render(<TestContainer wrapOptions={true}>{startChildren}</TestContainer>));
+
+    rerender(<TestContainer wrapOptions={true}>{endChildren}</TestContainer>);
+
+    jest.runAllTimers();
+    expect(Widget.option.mock.calls.length).toBe(1);
+    expect(Widget.option.mock.calls[0]).toEqual(['itemOptions', [
+      { c: 456, d: 'def' },
+    ]]);
   });
 });
 
@@ -436,6 +801,31 @@ describe('nested sub-option', () => {
         },
       },
     });
+
+    const MySubSetting = () => <>
+      <SubNestedComponent d="def" />
+    </>;
+    const MySetting = () => <>
+      <NestedComponent a={456}>
+        <MySubSetting />
+      </NestedComponent>
+    </>;
+
+    render(
+      <TestComponent>
+        <MySetting />
+      </TestComponent>,
+    );
+
+    expect(WidgetClass.mock.calls[1][1]).toEqual({
+      templatesRenderAsynchronously: true,
+      option: {
+        a: 456,
+        subOption: {
+          d: 'def',
+        },
+      },
+    });
   });
 
   it('is pulled (several options)', () => {
@@ -460,6 +850,35 @@ describe('nested sub-option', () => {
         },
       },
     });
+
+    const MySubSetting = () => <>
+      <SubNestedComponent d="def" />
+      <AnotherSubNestedComponent e="ghi" />
+    </>;
+    const MySetting = () => <>
+      <NestedComponent a={456}>
+        <MySubSetting />
+      </NestedComponent>
+    </>;
+
+    render(
+      <TestComponent>
+        <MySetting />
+      </TestComponent>,
+    );
+
+    expect(WidgetClass.mock.calls[1][1]).toEqual({
+      templatesRenderAsynchronously: true,
+      option: {
+        a: 456,
+        subOption: {
+          d: 'def',
+        },
+        anotherSubOption: {
+          e: 'ghi',
+        },
+      },
+    });
   });
 
   it('is pulled overriden if not a collection item', () => {
@@ -481,6 +900,32 @@ describe('nested sub-option', () => {
         },
       },
     });
+
+    const MySubSetting = () => <>
+      <SubNestedComponent d="def" />
+      <SubNestedComponent d="ghi" />
+    </>;
+    const MySetting = () => <>
+      <NestedComponent a={456}>
+        <MySubSetting />
+      </NestedComponent>
+    </>;
+
+    render(
+      <TestComponent>
+        <MySetting />
+      </TestComponent>,
+    );
+
+    expect(WidgetClass.mock.calls[1][1]).toEqual({
+      templatesRenderAsynchronously: true,
+      option: {
+        a: 456,
+        subOption: {
+          d: 'ghi',
+        },
+      },
+    });
   });
 
   it('is pulled as a collection item', () => {
@@ -501,6 +946,31 @@ describe('nested sub-option', () => {
         ],
       },
     });
+
+    const MySubSetting = () => <>
+      <CollectionSubNestedComponent c={456} d="def" />
+    </>;
+    const MySetting = () => <>
+      <NestedComponent a={456}>
+        <MySubSetting />
+      </NestedComponent>
+    </>;
+
+    render(
+      <TestComponent>
+        <MySetting />
+      </TestComponent>,
+    );
+
+    expect(WidgetClass.mock.calls[1][1]).toEqual({
+      templatesRenderAsynchronously: true,
+      option: {
+        a: 456,
+        subItemsOptions: [
+          { c: 456, d: 'def' },
+        ],
+      },
+    });
   });
 
   it('is pulled as a collection item (several items)', () => {
@@ -525,10 +995,39 @@ describe('nested sub-option', () => {
         ],
       },
     });
+
+    const MySubSetting = () => <>
+      <CollectionSubNestedComponent c={456} d="def" />
+      <CollectionSubNestedComponent c={789} />
+      <CollectionSubNestedComponent d="ghi" />
+    </>;
+    const MySetting = () => <>
+      <NestedComponent a={456}>
+        <MySubSetting />
+      </NestedComponent>
+    </>;
+
+    render(
+      <TestComponent>
+        <MySetting />
+      </TestComponent>,
+    );
+
+    expect(WidgetClass.mock.calls[1][1]).toEqual({
+      templatesRenderAsynchronously: true,
+      option: {
+        a: 456,
+        subItemsOptions: [
+          { c: 456, d: 'def' },
+          { c: 789 },
+          { d: 'ghi' },
+        ],
+      },
+    });
   });
 
   it('is pulled as a collection item after update inside another option', () => {
-    const { rerender } = render(
+    let { rerender } = render(
       <TestComponent>
         <NestedComponent a={123}>
           <CollectionSubNestedComponent key={1} c={123} d="abc" />
@@ -550,10 +1049,36 @@ describe('nested sub-option', () => {
 
     expect(Widget.option.mock.calls.length).toBe(1);
     expect(Widget.option.mock.calls[0]).toEqual(['option.subItemsOptions[1].c', 999]);
+
+    const MySubSetting = ({ c1, c2, d1, d2 }) => <>
+      <CollectionSubNestedComponent key={1} c={c1} d={d1} />
+      <CollectionSubNestedComponent key={2} c={c2} />
+      <CollectionSubNestedComponent key={3} d={d2} />
+    </>;
+    const MySetting = ({ a, c1, c2, d1, d2 }) => <>
+      <NestedComponent a={a}>
+        <MySubSetting c1={c1} c2={c2} d1={d1} d2={d2} />
+      </NestedComponent>
+    </>;
+
+    ({ rerender } = render(
+      <TestComponent>
+        <MySetting a={456} c1={456} c2={789} d1="def" d2="ghi" />
+      </TestComponent>,
+    ));
+    rerender(
+      <TestComponent>
+        <MySetting a={456} c1={456} c2={888} d1="def" d2="ghi" />
+      </TestComponent>,
+    );
+    jest.runAllTimers();
+
+    expect(Widget.option.mock.calls.length).toBe(1);
+    expect(Widget.option.mock.calls[0]).toEqual(['option.subItemsOptions[1].c', 888]);
   });
 
   it('is pulled after update', () => {
-    const TestContainer = (props: any) => {
+    let TestContainer = (props: any) => {
       const { value } = props;
       return (
         <TestComponent>
@@ -564,37 +1089,62 @@ describe('nested sub-option', () => {
       );
     };
 
-    const { rerender } = render(<TestContainer value="abc" />);
+    let { rerender } = render(<TestContainer value="abc" />);
     rerender(<TestContainer value="def" />);
 
     jest.runAllTimers();
     expect(Widget.option.mock.calls.length).toBe(1);
     expect(Widget.option.mock.calls[0]).toEqual(['option.subOption.d', 'def']);
+
+    const MySubSetting = ({ value }) => <>
+      <SubNestedComponent d={value} />
+    </>;
+    const MySetting = ({ a, value }) => <>
+      <NestedComponent a={a}>
+        <MySubSetting value={value} />
+      </NestedComponent>
+    </>;
+
+    TestContainer = (props: any) => {
+      const { value } = props;
+      return (
+        <TestComponent>
+         <MySetting a={456} value={value}/>
+        </TestComponent>
+      );
+    };
+
+    ({ rerender } = render(<TestContainer value="def" />));
+    rerender(<TestContainer value="ghi" />);
+
+    jest.runAllTimers();
+    expect(Widget.option.mock.calls.length).toBe(1);
+    expect(Widget.option.mock.calls[0]).toEqual(['option.subOption.d', 'ghi']);
   });
 
   it('is pulled according to expectations', () => {
-    const NestedComponentWithExpectations = memo(function NestedComponentWithExpectations(props: any) {
+    const NestedComponentWithExpectations = function NestedComponentWithExpectations(props: any) {
       return (
         <ConfigurationComponent<{ a: number } & React.PropsWithChildren>
+          elementDescriptor={{
+            OptionName: 'option',
+            ExpectedChildren: {
+              subOption: {
+                optionName: 'expectedSubItemOptions',
+                isCollectionItem: true,
+              },
+              subItemsOptions: {
+                optionName: 'expectedSubOption',
+                isCollectionItem: false,
+              },
+            },
+          }}
           {...props}
         />
       );
-    }) as React.MemoExoticComponent<any> & {
-      OptionName: string
-      ExpectedChildren: Record<string, { optionName: string, isCollectionItem: boolean }>
-    };
+    } as React.ComponentType<any> & NestedComponentMeta;
 
-    NestedComponentWithExpectations.OptionName = 'option';
-    NestedComponentWithExpectations.ExpectedChildren = {
-      subOption: {
-        optionName: 'expectedSubItemOptions',
-        isCollectionItem: true,
-      },
-      subItemsOptions: {
-        optionName: 'expectedSubOption',
-        isCollectionItem: false,
-      },
-    };
+    NestedComponentWithExpectations.componentType = 'option';
 
     render(
       <TestComponent>
@@ -615,7 +1165,36 @@ describe('nested sub-option', () => {
         expectedSubOption: { c: 456, d: 'def' },
       },
     });
+
+    const MySubSetting = () => <>
+      <SubNestedComponent d="def" />
+      <CollectionSubNestedComponent c={789} d="ghi" />
+    </>;
+    const MySetting = () => <>
+      <NestedComponentWithExpectations a={456}>
+        <MySubSetting />
+      </NestedComponentWithExpectations>
+    </>;
+
+    render(
+      <TestComponent>
+        <MySetting />
+      </TestComponent>,
+    );
+
+    expect(WidgetClass.mock.calls[1][1]).toEqual({
+      templatesRenderAsynchronously: true,
+      option: {
+        a: 456,
+        expectedSubItemOptions: [
+          { d: 'def' },
+        ],
+        expectedSubOption: { c: 789, d: 'ghi' },
+      },
+    });
   });
+
+
 });
 
 const ComponentWithConditionalOption = (props: { enableOption: boolean }) => {
@@ -627,32 +1206,72 @@ const ComponentWithConditionalOption = (props: { enableOption: boolean }) => {
   );
 };
 
+const ComponentWithConditionalCustomOption = (props: { enableOption: boolean }) => {
+  const { enableOption } = props;
+
+  const MySetting = ({ enable }) => <>
+    {enable && <NestedComponent a={2} />}
+  </>;
+
+  return (
+    <TestComponent>
+      <MySetting enable={enableOption} />
+    </TestComponent>
+  );
+};
+
 describe('conditional rendering', () => {
   afterEach(() => {
     WidgetClass.mockClear();
     cleanup();
   });
   it('adds option', () => {
-    const { rerender } = render(
+    let { rerender } = render(
       <ComponentWithConditionalOption enableOption={false} />,
     );
 
     rerender(
       <ComponentWithConditionalOption enableOption />,
     );
+    jest.runAllTimers();
 
     expect(Widget.option.mock.calls.length).toBe(1);
     expect(Widget.option.mock.calls[0]).toEqual(['option', { a: 1 }]);
+
+    ({ rerender } = render(
+      <ComponentWithConditionalCustomOption enableOption={false} />,
+    ));
+
+    rerender(
+      <ComponentWithConditionalCustomOption enableOption />,
+    );
+    jest.runAllTimers();
+
+    expect(Widget.option.mock.calls.length).toBe(1);
+    expect(Widget.option.mock.calls[0]).toEqual(['option', { a: 2 }]);
   });
 
   it('removes option', () => {
-    const { rerender } = render(
+    let { rerender } = render(
       <ComponentWithConditionalOption enableOption />,
     );
 
     rerender(
       <ComponentWithConditionalOption enableOption={false} />,
     );
+    jest.runAllTimers();
+
+    expect(Widget.resetOption.mock.calls.length).toBe(1);
+    expect(Widget.resetOption.mock.calls[0]).toEqual(['option']);
+
+    ({ rerender } = render(
+      <ComponentWithConditionalCustomOption enableOption />,
+    ));
+
+    rerender(
+      <ComponentWithConditionalCustomOption enableOption={false} />,
+    );
+    jest.runAllTimers();
 
     expect(Widget.resetOption.mock.calls.length).toBe(1);
     expect(Widget.resetOption.mock.calls[0]).toEqual(['option']);
diff --git a/packages/devextreme-react/src/core/__tests__/props-updating.test.tsx b/packages/devextreme-react/src/core/__tests__/props-updating.test.tsx
index 6137b4da24e1..7a475579ab3b 100644
--- a/packages/devextreme-react/src/core/__tests__/props-updating.test.tsx
+++ b/packages/devextreme-react/src/core/__tests__/props-updating.test.tsx
@@ -14,6 +14,7 @@ import {
   Widget,
   WidgetClass,
 } from './test-component';
+import { NestedComponentMeta } from '../types';
 
 jest.useFakeTimers();
 jest.mock('devextreme/core/utils/common', () => ({
@@ -42,7 +43,7 @@ const ControlledComponent = memo(function ControlledComponent(props: IControlled
   );
 });
 
-const NestedComponent = memo(function NestedComponent(props: any) {
+const NestedComponent = function NestedComponent(props: any) {
   return (
     <ConfigurationComponent<{
       a?: number;
@@ -54,59 +55,58 @@ const NestedComponent = memo(function NestedComponent(props: any) {
       value?: number;
       onValueChange?: (value: number) => void;
     } & React.PropsWithChildren>
+      elementDescriptor={{
+        OptionName: 'nestedOption',
+        DefaultsProps: {
+          defaultC: 'c',
+        },
+      }}
       {...props}
     />
   );
-}) as React.MemoExoticComponent<any> & {
-  OptionName: string
-  DefaultsProps: Record<string, string>
-};
+} as React.ComponentType<any> & NestedComponentMeta;
 
-NestedComponent.DefaultsProps = {
-  defaultC: 'c',
-};
-NestedComponent.OptionName = 'nestedOption';
+NestedComponent.componentType = 'option';
 
-const CollectionNestedComponent = memo(function CollectionNestedComponent(props: any) {
+const CollectionNestedComponent = function CollectionNestedComponent(props: any) {
   return (
     <ConfigurationComponent<{
       a?: number;
       onAChange?: (value: number) => void;
     } & React.PropsWithChildren>
+      elementDescriptor={{
+        OptionName: 'items',
+        IsCollectionItem: true,
+        ExpectedChildren: {
+          subItems: {
+            optionName: 'subItems',
+            isCollectionItem: true,
+          },
+        },
+      }}
       {...props}
     />
   );
-}) as React.MemoExoticComponent<any> & {
-  OptionName: string
-  IsCollectionItem: boolean;
-  ExpectedChildren: Record<string, { optionName: string, isCollectionItem: boolean }>
-};
-
-CollectionNestedComponent.OptionName = 'items';
-CollectionNestedComponent.IsCollectionItem = true;
-CollectionNestedComponent.ExpectedChildren = {
-  subItems: {
-    optionName: 'subItems',
-    isCollectionItem: true,
-  },
-};
-
-const CollectionSubNestedComponent = memo(function CollectionSubNestedComponent(props: any) {
+} as React.ComponentType<any> & NestedComponentMeta;
+
+CollectionNestedComponent.componentType = 'option';
+
+const CollectionSubNestedComponent = function CollectionSubNestedComponent(props: any) {
   return (
     <ConfigurationComponent<{
       a?: number;
       onAChange?: (value: number) => void;
     }>
+      elementDescriptor={{
+        OptionName: 'subItems',
+        IsCollectionItem: true,
+      }}
       {...props}
     />
   );
-}) as React.MemoExoticComponent<any> & {
-  OptionName: string
-  IsCollectionItem: boolean;
-};
+} as React.ComponentType<any> & NestedComponentMeta;
 
-CollectionSubNestedComponent.OptionName = 'subItems';
-CollectionSubNestedComponent.IsCollectionItem = true;
+CollectionSubNestedComponent.componentType = 'option';
 
 const TestComponentWithExpectation = memo(function TestComponentWithExpectation(props: any) {
   return (
@@ -206,6 +206,32 @@ describe('option update', () => {
     expect(Widget.option.mock.calls[0]).toEqual(['items[0].a', 234]);
   });
 
+  it('updates nested collection item inside a custom configuration component', () => {
+    const MySetting = (props: any) => {
+      const { value } = props;
+
+      return (
+        <CollectionNestedComponent a={value} />
+      );
+    };
+
+    const TestContainer = (props: any) => {
+      const { value } = props;
+      return (
+        <TestComponentWithExpectation>
+          <MySetting value={value} />
+        </TestComponentWithExpectation>
+      );
+    };
+
+    const { rerender } = render(<TestContainer value={123} />);
+    rerender(<TestContainer value={234} />);
+
+    jest.runAllTimers();
+    expect(Widget.option.mock.calls.length).toBe(1);
+    expect(Widget.option.mock.calls[0]).toEqual(['items[0].a', 234]);
+  });
+
   it('updates sub-nested collection item', () => {
     const TestContainer = (props: any) => {
       const { value } = props;
@@ -226,6 +252,33 @@ describe('option update', () => {
   });
 });
 
+it('updates sub-nested collection item within a custom component', () => {
+  const MySetting = (props: any) => {
+    const { value } = props;
+
+    return (
+      <CollectionNestedComponent>
+        <CollectionSubNestedComponent a={value} />
+      </CollectionNestedComponent>
+    );
+  };
+
+  const TestContainer = (props: any) => {
+    const { value } = props;
+    return (
+      <TestComponentWithExpectation>
+        <MySetting value={value} />
+      </TestComponentWithExpectation>
+    );
+  };
+  const { rerender } = render(<TestContainer value={123} />);
+  rerender(<TestContainer value={234} />);
+
+  jest.runAllTimers();
+  expect(Widget.option.mock.calls.length).toBe(1);
+  expect(Widget.option.mock.calls[0]).toEqual(['items[0].subItems[0].a', 234]);
+});
+
 describe('option control', () => {
   afterEach(() => {
     jest.clearAllMocks();
@@ -617,6 +670,21 @@ describe('cfg-component option control', () => {
     expect(Widget.option.mock.calls[0]).toEqual(['nestedOption.a', 123]);
   });
 
+  it('rolls cfg-component option value back (option is inside a custom configuration component)', () => {
+    const MySetting = ({ a }) => <NestedComponent a={a} />;
+
+    render(
+      <ControlledComponent>
+        <MySetting a={123} />
+      </ControlledComponent>,
+    );
+
+    fireOptionChange('nestedOption.a', 234);
+    jest.runAllTimers();
+    expect(Widget.option.mock.calls.length).toBe(1);
+    expect(Widget.option.mock.calls[0]).toEqual(['nestedOption.a', 123]);
+  });
+
   it('rolls nested collection value back', () => {
     render(
       <TestComponentWithExpectation>
@@ -631,6 +699,24 @@ describe('cfg-component option control', () => {
     expect(Widget.option.mock.calls[0]).toEqual(['items', [{ a: 1 }, { a: 2 }]]);
   });
 
+  it('rolls nested collection value back (options is inside a custom configuration component)', () => {
+    const MySetting = ({ a1, a2 }) => <>
+      <CollectionNestedComponent a={a1} />
+      <CollectionNestedComponent a={a2} />
+    </>;
+
+    render(
+      <TestComponentWithExpectation>
+        <MySetting a1={1} a2={2} />
+      </TestComponentWithExpectation>,
+    );
+
+    fireOptionChange('items', []);
+    jest.runAllTimers();
+    expect(Widget.option.mock.calls.length).toBe(1);
+    expect(Widget.option.mock.calls[0]).toEqual(['items', [{ a: 1 }, { a: 2 }]]);
+  });
+
   it('rolls nested collection item value back', () => {
     render(
       <TestComponentWithExpectation>
@@ -658,6 +744,21 @@ describe('cfg-component option control', () => {
     expect(Widget.option.mock.calls[0]).toEqual(['nestedOption.complexValue', { a: 123, b: 234 }]);
   });
 
+  it('rolls cfg-component option complex value (options in custom configuration component)', () => {
+    const MySetting = ({ a, b }) => <NestedComponent complexValue={{ a, b }} />;
+
+    render(
+      <ControlledComponent>
+        <MySetting a={123} b={234} />
+      </ControlledComponent>,
+    );
+
+    fireOptionChange('nestedOption.complexValue', {});
+    jest.runAllTimers();
+    expect(Widget.option.mock.calls.length).toBe(1);
+    expect(Widget.option.mock.calls[0]).toEqual(['nestedOption.complexValue', { a: 123, b: 234 }]);
+  });
+
   it('should not rolls cfg-component option complex value if shallow equals', () => {
     render(
       <ControlledComponent>
@@ -738,11 +839,34 @@ describe('cfg-component option control', () => {
     expect(Widget.option).toHaveBeenCalledWith('nestedOption.a', 123);
   });
 
+  it('invokes option change guard handlers in strict mode (options in custom configuration component)', () => {
+    const MySetting = ({ a }) => <NestedComponent a={a} />;
+
+    const TestContainer = ({ value }: { value: number }) => {
+      return (
+        <React.StrictMode>
+          <ControlledComponent>
+            <MySetting a={value} />
+          </ControlledComponent>
+        </React.StrictMode>
+      );
+    };
+
+    const { rerender } = render(<TestContainer value={123} />);
+
+    fireOptionChange('nestedOption.a', 234);
+
+    rerender(<TestContainer value={123} />);
+    jest.runAllTimers();
+
+    expect(Widget.option).toHaveBeenCalledWith('nestedOption.a', 123);
+  });
+
   // T1106899
   it('apply cfg-component option value if value has changes', () => {
     const optionsManager = new OptionsManagerModule.OptionsManager();
     const config = {
-      fullName: '',
+      name: '',
       predefinedOptions: {},
       initialOptions: {},
       options: { value: 1 },
@@ -819,6 +943,28 @@ describe('cfg-component option control', () => {
     expect(Widget.option.mock.calls[0]).toEqual(['nestedOption.a', 234]);
   });
 
+  it('apply cfg-component option change if value really change (option in custom configuration component)', () => {
+    const MySetting = ({ value }) => <NestedComponent a={value} b="const" />;
+
+    const TestContainer = (props: any) => {
+      const { value } = props;
+      return (
+        <ControlledComponent>
+          <MySetting value={value} />
+        </ControlledComponent>
+      );
+    };
+
+    const { rerender } = render(<TestContainer value={123} />);
+    fireOptionChange('nestedOption.a', 234);
+
+    rerender(<TestContainer value={234} />);
+
+    jest.runAllTimers();
+    expect(Widget.option.mock.calls.length).toBe(1);
+    expect(Widget.option.mock.calls[0]).toEqual(['nestedOption.a', 234]);
+  });
+
   it('does not control not specified cfg-component option', () => {
     render(
       <ControlledComponent>
@@ -872,6 +1018,20 @@ describe('cfg-component option defaults control', () => {
     expect(Widget.option.mock.calls.length).toBe(0);
   });
 
+  it('ignores cfg-component option with default prefix (option in custom configuration component)', () => {
+    const MySetting = () => <NestedComponent defaultC="default" />;
+
+    render(
+      <ControlledComponent>
+        <MySetting />
+      </ControlledComponent>,
+    );
+
+    fireOptionChange('nestedOption.c', 'changed');
+    jest.runAllTimers();
+    expect(Widget.option.mock.calls.length).toBe(0);
+  });
+
   it('ignores 3rd-party changes in nested default props', () => {
     const TestContainer = (props: any) => {
       const { optionDefValue } = props;
@@ -889,6 +1049,25 @@ describe('cfg-component option defaults control', () => {
     expect(Widget.option.mock.calls.length).toBe(0);
   });
 
+  it('ignores 3rd-party changes in nested default props (option in custom configuration component)', () => {
+    const MySetting = ({ optionDefValue }) => <NestedComponent defaultC={optionDefValue} />;
+
+    const TestContainer = (props: any) => {
+      const { optionDefValue } = props;
+      return (
+        <ControlledComponent>
+          <MySetting optionDefValue={optionDefValue} />
+        </ControlledComponent>
+      );
+    };
+
+    const { rerender } = render(<TestContainer optionDefValue="default" />);
+    rerender(<TestContainer optionDefValue="changed" />);
+
+    jest.runAllTimers();
+    expect(Widget.option.mock.calls.length).toBe(0);
+  });
+
   it('ignores 3rd-party changes in nested default props if parent object changes', () => {
     render(
       <ControlledComponent>
@@ -1205,6 +1384,62 @@ describe('onXXXChange', () => {
       expect(onSubNestedPropChange).toBeCalledWith('4');
     });
 
+    it('is called on nested option changed (options in custom configuration components)', () => {
+      const onNestedPropChange = jest.fn();
+      const onSubNestedPropChange = jest.fn();
+      const onCollectionPropChange = jest.fn();
+      const onSubCollectionPropChange = jest.fn();
+
+      const MySettingInner = () => <>
+        <CollectionSubNestedComponent
+          a={0}
+          onAChange={onSubCollectionPropChange}
+        />
+        <NestedComponent
+          value={0}
+          onValueChange={onSubNestedPropChange}
+        />
+      </>;
+
+      const MySettingOuter = () => <>
+          <NestedComponent
+            value={0}
+            onValueChange={onNestedPropChange}
+          />
+          <CollectionNestedComponent
+            a={0}
+          />
+          <CollectionNestedComponent
+            a={0}
+            onAChange={onCollectionPropChange}
+          >
+            <MySettingInner />
+          </CollectionNestedComponent>
+      </>;
+
+      render(
+        <TestComponent>
+          <MySettingOuter />
+        </TestComponent>,
+      );
+
+      fireOptionChange('items[1].a', 1);
+      expect(onCollectionPropChange).toHaveBeenCalledTimes(1);
+      expect(onCollectionPropChange).toBeCalledWith(1);
+
+      fireOptionChange('items[1].subItems[0].a', 2);
+      expect(onSubCollectionPropChange).toHaveBeenCalledTimes(1);
+      expect(onSubCollectionPropChange).toBeCalledWith(2);
+
+      fireOptionChange('nestedOption.value', '3');
+      expect(onNestedPropChange).toHaveBeenCalledTimes(1);
+      expect(onNestedPropChange).toBeCalledWith('3');
+
+      fireOptionChange('items[1].nestedOption.value', '4');
+      expect(onSubNestedPropChange).toHaveBeenCalledTimes(1);
+      expect(onSubNestedPropChange).toBeCalledWith('4');
+    });
+
     it('is called on nested array option changed', () => {
       render(
         <TestComponent>
diff --git a/packages/devextreme-react/src/core/__tests__/template-wrapper.test.tsx b/packages/devextreme-react/src/core/__tests__/template-wrapper.test.tsx
index 4285eb40bf63..202f130b605d 100644
--- a/packages/devextreme-react/src/core/__tests__/template-wrapper.test.tsx
+++ b/packages/devextreme-react/src/core/__tests__/template-wrapper.test.tsx
@@ -3,8 +3,8 @@ import { useEffect, useContext } from 'react';
 import { TemplateWrapper } from '../template-wrapper';
 import { cleanup, render } from '@testing-library/react';
 import * as events from 'devextreme/events';
-import { RemovalLockerContext } from '../helpers';
-import { TemplateFunc, UpdateLocker } from '../types';
+import { RemovalLockerContext, UpdateLocker } from '../contexts';
+import { TemplateFunc } from '../types';
 
 function TemplateComponent(args: { data, index, onRendered?, effect? }) {
   const { data, index, onRendered, effect } = args;
diff --git a/packages/devextreme-react/src/core/__tests__/template.test.tsx b/packages/devextreme-react/src/core/__tests__/template.test.tsx
index 0a53d223cce8..a26b98f5fd4a 100644
--- a/packages/devextreme-react/src/core/__tests__/template.test.tsx
+++ b/packages/devextreme-react/src/core/__tests__/template.test.tsx
@@ -3,7 +3,7 @@ import { cleanup, render, screen } from '@testing-library/react';
 import * as React from 'react';
 import { memo, forwardRef, ForwardedRef } from 'react';
 import { act } from 'react-dom/test-utils';
-import { Component } from '../component';
+import { Component, NestedComponentMeta } from '../component';
 import ConfigurationComponent from '../nested-option';
 import { Template } from '../template';
 import {
@@ -162,7 +162,7 @@ function testTemplateOption(testedOption: string) {
     changedElementOptions[testedOption] = () => <div className="template">Second Template</div>;
     rerender(
       <ComponentWithTemplates {...changedElementOptions}>
-        <div ref={containerRef} />
+        <div ref={containerRef} className="container" />
       </ComponentWithTemplates>,
     );
 
@@ -562,51 +562,50 @@ describe('component/render in nested options', () => {
     cleanup();
   });
 
-  const NestedComponent = memo(function NestedComponent(props: any) {
+  const NestedComponent = function NestedComponent(props: any) {
     return (
       <ConfigurationComponent<{
         item?: any;
         itemRender?: any;
         itemComponent?: any;
       } & React.PropsWithChildren>
+        elementDescriptor={{
+          OptionName: 'option',
+          TemplateProps: [{
+            tmplOption: 'item',
+            render: 'itemRender',
+            component: 'itemComponent',
+          }],
+        }}
         {...props}
       />
     );
-  }) as React.MemoExoticComponent<any> & {
-    OptionName: string
-    TemplateProps: Record<string, string>[]
-  };
-
-  NestedComponent.OptionName = 'option';
-  NestedComponent.TemplateProps = [{
-    tmplOption: 'item',
-    render: 'itemRender',
-    component: 'itemComponent',
-  }];
-
-  const CollectionNestedComponent = memo(function CollectionNestedComponent(props: any) {
+  } as React.ComponentType<any> & NestedComponentMeta;
+
+  NestedComponent.componentType = 'option';
+
+  const CollectionNestedComponent = function CollectionNestedComponent(props: any) {
     return (
       <ConfigurationComponent<{
         template?: any;
         render?: any;
         component?: any;
       } & React.PropsWithChildren>
+        elementDescriptor={{
+          OptionName: 'collection',
+          IsCollectionItem: true,
+          TemplateProps: [{
+            tmplOption: 'template',
+            render: 'render',
+            component: 'component',
+          }],
+        }}
         {...props}
       />
     );
-  }) as React.MemoExoticComponent<any> & {
-    OptionName: string
-    IsCollectionItem: boolean;
-    TemplateProps: Record<string, string>[]
-  };
-
-  CollectionNestedComponent.OptionName = 'collection';
-  CollectionNestedComponent.IsCollectionItem = true;
-  CollectionNestedComponent.TemplateProps = [{
-    tmplOption: 'template',
-    render: 'render',
-    component: 'component',
-  }];
+  } as React.ComponentType<any> & NestedComponentMeta;
+
+  CollectionNestedComponent.componentType = 'option';
 
   it('pass integrationOptions options to widget', () => {
     const ItemTemplate = () => <div>Template</div>;
@@ -670,6 +669,7 @@ describe('component/render in nested options', () => {
 
   it('pass integrationOptions options for collection nested components', () => {
     const UserTemplate = () => <div>Template</div>;
+
     render(
       <TestComponent>
         <CollectionNestedComponent render={UserTemplate} />
@@ -680,9 +680,12 @@ describe('component/render in nested options', () => {
         </CollectionNestedComponent>
         // @ts-expect-error TS2769
         <CollectionNestedComponent>
-          <NestedComponent />
+          <NestedComponent prop='value' />
           abc
         </CollectionNestedComponent>
+        <CollectionNestedComponent>
+          <NestedComponent prop='value' />
+        </CollectionNestedComponent>
         // @ts-expect-error TS2769
         <NestedComponent>
           <CollectionNestedComponent render={UserTemplate} />
@@ -695,8 +698,10 @@ describe('component/render in nested options', () => {
     expect(options.collection[0].template).toBe('collection[0].template');
     expect(options.collection[1].template).toBe('collection[1].template');
     expect(options.collection[2].option.item).toBe('collection[2].option.item');
+    expect(options.collection[3].option.prop).toBe('value');
+    expect(options.collection[4].option.prop).toBe('value');
     expect(options.option.collection[0].template).toBe('option.collection[0].template');
-
+    
     const { integrationOptions } = options;
 
     expect(Object.keys(integrationOptions.templates)).toEqual([
@@ -708,6 +713,50 @@ describe('component/render in nested options', () => {
     ]);
   });
 
+  it('pass integrationOptions options for collection nested components with custom components', () => {
+    const UserTemplate = () => <div>Template</div>;
+
+    const CustomComponentWithTemplate = () => <NestedComponent itemRender={UserTemplate} />;
+    const CustomComponentWithProp = () => <NestedComponent prop='value' />;
+
+    render(
+      <TestComponent>
+        <CollectionNestedComponent>
+          <CustomComponentWithTemplate />
+        </CollectionNestedComponent>
+        // @ts-expect-error TS2769
+        <CollectionNestedComponent>
+          <CustomComponentWithProp />
+          abc
+        </CollectionNestedComponent>
+        <CollectionNestedComponent>
+          <CustomComponentWithProp />
+        </CollectionNestedComponent>
+        <CollectionNestedComponent>
+          <CustomComponentWithProp />
+          <UserTemplate />
+        </CollectionNestedComponent>
+      </TestComponent>,
+    );
+
+    const options = WidgetClass.mock.calls[0][1];
+
+    expect(options.collection[0].option.item).toBe('collection[0].option.item');
+    expect(options.collection[1].option.prop).toBe('value');
+    expect(options.collection[1].template).toBe('collection[1].template');
+    expect(options.collection[2].option.prop).toBe('value');
+    expect(options.collection[3].option.prop).toBe('value');
+    expect(options.collection[3].template).toBe('collection[3].template');
+
+    const { integrationOptions } = options;
+
+    expect(Object.keys(integrationOptions.templates)).toEqual([
+      'collection[0].option.item',
+      'collection[1].template',
+      'collection[3].template',
+    ]);
+  });
+
   it('pass integrationOptions for collection nested component with \'template\' option if a child defined', () => {
     const UserTemplate = () => <div>Template</div>;
     render(
@@ -807,7 +856,6 @@ describe('component/render in nested options', () => {
 
     expect(options.collection[0].template).toBe('collection[0].template');
     expect(options.collection[1].template).toBe('collection[1].template');
-    expect(options.collection[2].template).toBe('collection[2].template');
     expect(options.collection[3].template).toBe('collection[3].template');
     expect(options.collection[4].template).toBe('collection[4].template');
 
@@ -815,7 +863,6 @@ describe('component/render in nested options', () => {
     expect(Object.keys(integrationOptions.templates)).toEqual([
       'collection[0].template',
       'collection[1].template',
-      'collection[2].template',
       'collection[3].template',
       'collection[4].template',
     ]);
diff --git a/packages/devextreme-react/src/core/__tests__/test-component.tsx b/packages/devextreme-react/src/core/__tests__/test-component.tsx
index ceadc08fc2ea..8fecfc3c250d 100644
--- a/packages/devextreme-react/src/core/__tests__/test-component.tsx
+++ b/packages/devextreme-react/src/core/__tests__/test-component.tsx
@@ -12,7 +12,7 @@ import {
   ReactElement,
 } from 'react';
 
-import { RestoreTreeContext } from '../helpers';
+import { RestoreTreeContext } from '../contexts';
 
 const eventHandlers: { [index: string]: ((e?: any) => void)[] } = {};
 
@@ -62,6 +62,7 @@ const TestComponent = memo(forwardRef<TestComponentRef, any>(function TestCompon
 
   const afterCreateWidget = useCallback(() => {
     Widget.option.mockReset();
+    Widget.resetOption.mockReset();
   }, []);
 
   useImperativeHandle(ref, () => {
diff --git a/packages/devextreme-react/src/core/component-base.tsx b/packages/devextreme-react/src/core/component-base.tsx
index 86cd59f47e22..57124929375a 100644
--- a/packages/devextreme-react/src/core/component-base.tsx
+++ b/packages/devextreme-react/src/core/component-base.tsx
@@ -9,6 +9,7 @@ import {
   useLayoutEffect,
   useCallback,
   useState,
+  useMemo,
   ReactElement,
 } from 'react';
 
@@ -18,13 +19,21 @@ import config from 'devextreme/core/config';
 
 import { createPortal } from 'react-dom';
 
-import { RemovalLockerContext, RestoreTreeContext } from './helpers';
+import { useOptionScanning } from './use-option-scanning';
 import { OptionsManager, scheduleGuards, unscheduleGuards } from './options-manager';
 import { DXRemoveCustomArgs, DXTemplateCreator, InitArgument } from './types';
 import { elementPropNames, getClassName } from './widget-config';
-import { buildConfigTree } from './configuration/react/tree';
 import { TemplateManager } from './template-manager';
 import { ComponentProps } from './component';
+import { ElementType } from './configuration/react/element';
+import { IConfigNode } from './configuration/config-node';
+
+import {
+  NestedOptionContext,
+  RemovalLockerContext,
+  RestoreTreeContext,
+  TemplateDiscoveryContext,
+} from './contexts';
 
 const DX_REMOVE_EVENT = 'dxremove';
 
@@ -33,7 +42,7 @@ config({
 });
 
 type ComponentBaseProps = ComponentProps & {
-  renderChildren?: () => Record<string, unknown>[] | null | undefined;
+  renderChildren?: () => React.ReactNode;
 };
 
 interface ComponentBaseRef {
@@ -67,7 +76,7 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
       afterCreateWidget = () => undefined,
     } = props;
 
-    const [, setForceUpdateToken] = useState(0);
+    const [, setForceUpdateToken] = useState(Symbol('initial force update token'));
     const removalLocker = useContext(RemovalLockerContext);
     const restoreParentLink = useContext(RestoreTreeContext);
     const instance = useRef<any>();
@@ -86,6 +95,8 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
 
     const prevPropsRef = useRef<P & ComponentBaseProps>();
 
+    let widgetConfig: IConfigNode;
+
     const restoreTree = useCallback(() => {
       if (childElementsDetached.current && childNodes.current?.length && element.current) {
         element.current.append(...childNodes.current);
@@ -135,21 +146,6 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
       }
     }, [element.current]);
 
-    const getConfig = useCallback(() => buildConfigTree(
-      {
-        templates: templateProps,
-        initialValuesProps: defaults,
-        predefinedValuesProps: {},
-        expectedChildren,
-      },
-      props,
-    ), [
-      templateProps,
-      defaults,
-      expectedChildren,
-      props,
-    ]);
-
     const setTemplateManagerHooks = useCallback(({
       createDXTemplates: createDXTemplatesFn,
       clearInstantiationModels: clearInstantiationModelsFn,
@@ -208,8 +204,6 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
 
       el = el || element.current;
 
-      const widgetConfig = getConfig();
-
       let options: any = {
         templatesRenderAsynchronously: true,
         ...optionsManager.current.getInitialOptions(widgetConfig),
@@ -254,7 +248,6 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
       instance.current,
       subscribableOptions,
       independentEvents,
-      getConfig,
     ]);
 
     const onTemplatesRendered = useCallback(() => {
@@ -271,8 +264,6 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
 
       updateCssClasses(prevPropsRef.current, props);
 
-      const widgetConfig = getConfig();
-
       const templateOptions = optionsManager.current.getTemplateOptions(widgetConfig);
       const dxTemplates = createDXTemplates.current?.(templateOptions) || {};
 
@@ -286,7 +277,6 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
       createDXTemplates.current,
       scheduleTemplatesUpdate,
       updateCssClasses,
-      getConfig,
       props,
     ]);
 
@@ -348,6 +338,29 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
       shouldRestoreFocus.current,
     ]);
 
+    const templateContainer = useMemo(() => document.createElement('div'), []);
+
+    const options = useOptionScanning(
+      {
+        type: ElementType.Option,
+        descriptor: {
+          name: '',
+          isCollection: false,
+          templates: templateProps,
+          initialValuesProps: defaults,
+          predefinedValuesProps: {},
+          expectedChildren,
+        },
+        props,
+      },
+      props.children,
+      templateContainer,
+      Symbol('initial update token'),
+    );
+
+    [widgetConfig] = options;
+    const [, context] = options;
+
     useLayoutEffect(() => {
       onComponentMounted();
 
@@ -379,7 +392,6 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
         return renderChildren();
       }
 
-      // @ts-expect-error TS2339
       const { children } = props;
       return children;
     }, [props, renderChildren]);
@@ -390,7 +402,6 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
     ), [portalContainer.current, _renderChildren]);
 
     const renderContent = useCallback(() => {
-      // @ts-expect-error TS2339
       const { children } = props;
 
       return isPortalComponent && children
@@ -398,7 +409,7 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
           ref: (node: HTMLDivElement | null) => {
             if (node && portalContainer.current !== node) {
               portalContainer.current = node;
-              setForceUpdateToken(Math.random());
+              setForceUpdateToken(Symbol('force update token'));
             }
           },
           style: { display: 'contents' },
@@ -411,21 +422,30 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
       _renderChildren,
     ]);
 
-    return React.createElement(
-      RestoreTreeContext.Provider,
-      {
-        value: restoreTree,
-      },
-      React.createElement(
-        'div',
-        getElementProps(),
-        renderContent(),
-        React.createElement(TemplateManager, {
-          init: setTemplateManagerHooks,
-          onTemplatesRendered,
-        }),
-      ),
-      isPortalComponent && renderPortal(),
+    return (
+      <RestoreTreeContext.Provider value={restoreTree}>
+        <TemplateDiscoveryContext.Provider value={{ discoveryRendering: false }}>
+          {
+            createPortal(
+              <TemplateDiscoveryContext.Provider value={{ discoveryRendering: true }}>
+                {_renderChildren()}
+              </TemplateDiscoveryContext.Provider>,
+              templateContainer,
+            )
+          }
+          <div {...getElementProps()}>
+            <NestedOptionContext.Provider value={context}>
+              {renderContent()}
+            </NestedOptionContext.Provider>
+            <TemplateManager init={setTemplateManagerHooks} onTemplatesRendered={onTemplatesRendered}/>
+              { isPortalComponent
+                && <NestedOptionContext.Provider value={context}>
+                  { renderPortal() }
+                </NestedOptionContext.Provider>
+              }
+          </div>
+        </TemplateDiscoveryContext.Provider>
+      </RestoreTreeContext.Provider>
     );
   },
 ) as <P extends IHtmlOptions>(props: P & ComponentBaseProps & { ref?: React.Ref<ComponentBaseRef> }) => ReactElement | null;
diff --git a/packages/devextreme-react/src/core/component.tsx b/packages/devextreme-react/src/core/component.tsx
index 83232bac91fc..192df9d54d8e 100644
--- a/packages/devextreme-react/src/core/component.tsx
+++ b/packages/devextreme-react/src/core/component.tsx
@@ -9,12 +9,14 @@ import {
   ReactElement,
 } from 'react';
 
+import type { NestedComponentMeta } from './types';
+
 import { IHtmlOptions, ComponentBaseRef, ComponentBase } from './component-base';
 import { IElementDescriptor, IExpectedChild } from './configuration/react/element';
 import { ITemplateMeta } from './template';
 import { elementIsExtension } from './extension-component';
 
-interface ComponentProps {
+type ComponentProps = React.PropsWithChildren<{
   WidgetClass?: any;
   isPortalComponent?: boolean;
   defaults?: Record<string, string>;
@@ -26,7 +28,7 @@ interface ComponentProps {
   clearExtensions?: () => void;
   beforeCreateWidget?: (element?: Element) => void;
   afterCreateWidget?: (element?: Element) => void;
-}
+}>;
 
 type ComponentRef = ComponentBaseRef & {
   clearExtensions: () => void;
@@ -46,10 +48,9 @@ const Component = forwardRef<ComponentRef, any>(
     }, [extensionCreators.current, componentBaseRef.current]);
 
     const renderChildren = useCallback(() => React.Children.map(
-      // @ts-expect-error TS2339
       props.children,
       (child) => {
-        if (child && elementIsExtension(child)) {
+        if (React.isValidElement(child) && elementIsExtension(child)) {
           return React.cloneElement(
             child,
             { onMounted: registerExtension },
@@ -117,4 +118,5 @@ export {
   IHtmlOptions,
   IElementDescriptor,
   ComponentRef,
+  NestedComponentMeta,
 };
diff --git a/packages/devextreme-react/src/core/configuration/__tests__/comparer.test.ts b/packages/devextreme-react/src/core/configuration/__tests__/comparer.test.ts
index bede18ae9270..26eea7d2fa18 100644
--- a/packages/devextreme-react/src/core/configuration/__tests__/comparer.test.ts
+++ b/packages/devextreme-react/src/core/configuration/__tests__/comparer.test.ts
@@ -2,7 +2,7 @@ import { getChanges } from '../comparer';
 import { IConfigNode } from '../config-node';
 
 const emptyNode: IConfigNode = {
-  fullName: '',
+  name: '',
   predefinedOptions: {},
   initialOptions: {},
   options: {},
@@ -22,7 +22,7 @@ describe('child config nodes comparing', () => {
       configs: {
         option: {
           ...emptyNode,
-          fullName: 'option',
+          name: 'option',
           options: { a: 1 },
         },
       },
@@ -36,59 +36,100 @@ describe('child config nodes comparing', () => {
 
 describe('collections comparing', () => {
   it('detects additions', () => {
-    const prevConfig = {
+    const prevConfig: IConfigNode = {
       ...emptyNode,
-      fullName: 'items[0].items[0]',
+      name: 'items',
+      index: 0,
       configCollections: {
-        items: [
-          {
-            ...emptyNode,
-            fullName: 'items[0].items[0].items[0]',
-            options: {
-              a: 1,
-            },
-          },
-          {
-            ...emptyNode,
-            fullName: 'items[0].items[0].items[1]',
-            options: {
-              b: 2,
-            },
-          },
-        ],
+        items: [],
       },
     };
 
-    const currentConfig = {
+    prevConfig.configCollections.items.push(
+      {
+        ...emptyNode,
+        name: 'items',
+        index: 0,
+        parentNode: prevConfig,
+        configCollections: {
+          items: [],
+        },
+      }
+    );
+
+    prevConfig.configCollections.items[0].configCollections.items.push(
+      {
+        ...emptyNode,
+        name: 'items',
+        index: 0,
+        parentNode: prevConfig.configCollections.items[0],
+        options: {
+          a: 1,
+        },
+      },
+      {
+        ...emptyNode,
+        name: 'items',
+        index: 1,
+        parentNode: prevConfig.configCollections.items[0],
+        options: {
+          b: 2,
+        },
+      },
+    );
+
+
+    const currentConfig: IConfigNode = {
       ...emptyNode,
-      fullName: 'items[0].items[0]',
+      name: 'items',
+      index: 0,
       configCollections: {
-        items: [
-          {
-            ...emptyNode,
-            fullName: 'items[0].items[0].items[0]',
-            options: {
-              a: 11,
-            },
-          },
-          {
-            ...emptyNode,
-            fullName: 'items[0].items[0].items[1]',
-            options: {
-              b: 22,
-            },
-          },
-          {
-            ...emptyNode,
-            fullName: 'items[0].items[0].items[2]',
-            options: {
-              c: 33,
-            },
-          },
-        ],
+        items: [],
       },
     };
 
+    currentConfig.configCollections.items.push(
+      {
+        ...emptyNode,
+        name: 'items',
+        index: 0,
+        parentNode: currentConfig,
+        configCollections: {
+          items: [],
+        },
+      }
+    );
+
+    currentConfig.configCollections.items[0].configCollections.items.push(
+      {
+        ...emptyNode,
+        name: 'items',
+        index: 0,
+        parentNode: currentConfig.configCollections.items[0],
+        options: {
+          a: 11,
+        },
+      },
+      {
+        ...emptyNode,
+        name: 'items',
+        index: 1,
+        parentNode: currentConfig.configCollections.items[0],
+        options: {
+          b: 22,
+        },
+      },
+      {
+        ...emptyNode,
+        name: 'items',
+        index: 2,
+        parentNode: currentConfig.configCollections.items[0],
+        options: {
+          c: 33,
+        },
+      },
+    );
+
     const changes = getChanges(currentConfig, prevConfig);
     expect(Object.keys(changes.options).length).toEqual(1);
     expect(changes.options['items[0].items[0].items']).toEqual([{ a: 11 }, { b: 22 }, { c: 33 }]);
diff --git a/packages/devextreme-react/src/core/configuration/comparer.ts b/packages/devextreme-react/src/core/configuration/comparer.ts
index a593c2ef0f48..f157f97821ef 100644
--- a/packages/devextreme-react/src/core/configuration/comparer.ts
+++ b/packages/devextreme-react/src/core/configuration/comparer.ts
@@ -1,4 +1,4 @@
-import { IConfigNode, ITemplate } from './config-node';
+import { IConfigNode, ITemplate, buildNodeFullName } from './config-node';
 import { buildNode, buildTemplates } from './tree';
 import { mergeNameParts } from './utils';
 
@@ -10,7 +10,12 @@ interface IConfigChanges {
     currentOptions: Record<string, any>, prevOptions: Record<string, any>, path: string) => void;
 }
 
-function compareTemplates(current: IConfigNode, prev: IConfigNode, changesAccum: IConfigChanges) {
+function compareTemplates(
+  current: IConfigNode,
+  currentFullName: string,
+  prev: IConfigNode,
+  changesAccum: IConfigChanges,
+) {
   const currentTemplatesOptions: Record<string, any> = {};
   const currentTemplates: Record<string, ITemplate> = {};
   const prevTemplatesOptions: Record<string, any> = {};
@@ -19,7 +24,7 @@ function compareTemplates(current: IConfigNode, prev: IConfigNode, changesAccum:
   buildTemplates(current, currentTemplatesOptions, currentTemplates);
   buildTemplates(prev, prevTemplatesOptions, prevTemplates);
 
-  changesAccum.addRemovedValues(currentTemplatesOptions, prevTemplatesOptions, current.fullName);
+  changesAccum.addRemovedValues(currentTemplatesOptions, prevTemplatesOptions, currentFullName);
   // TODO: support switching to default templates
   // appendRemovedValues(currentTemplates, prevTemplates, "", changesAccum.templates);
 
@@ -28,7 +33,7 @@ function compareTemplates(current: IConfigNode, prev: IConfigNode, changesAccum:
       return;
     }
 
-    changesAccum.options[mergeNameParts(current.fullName, key)] = currentTemplatesOptions[key];
+    changesAccum.options[mergeNameParts(currentFullName, key)] = currentTemplatesOptions[key];
   });
 
   Object.keys(currentTemplates).forEach((key) => {
@@ -43,8 +48,10 @@ function compareTemplates(current: IConfigNode, prev: IConfigNode, changesAccum:
 }
 
 function compare(current: IConfigNode, prev: IConfigNode, changesAccum: IConfigChanges) {
+  const fullName = buildNodeFullName(current);
+
   if (!prev) {
-    changesAccum.options[current.fullName] = buildNode(
+    changesAccum.options[fullName] = buildNode(
       current,
       changesAccum.templates,
       true,
@@ -52,16 +59,16 @@ function compare(current: IConfigNode, prev: IConfigNode, changesAccum: IConfigC
     return;
   }
 
-  changesAccum.addRemovedValues(current.options, prev.options, current.fullName);
+  changesAccum.addRemovedValues(current.options, prev.options, fullName);
   changesAccum.addRemovedValues(
     current.configCollections,
     prev.configCollections,
-    current.fullName,
+    fullName,
   );
-  changesAccum.addRemovedValues(current.configs, prev.configs, current.fullName);
+  changesAccum.addRemovedValues(current.configs, prev.configs, fullName);
 
   // eslint-disable-next-line @typescript-eslint/no-use-before-define
-  compareCollections(current, prev, changesAccum);
+  compareCollections(current, fullName, prev, changesAccum);
 
   Object.keys(current.configs).forEach((key) => {
     compare(current.configs[key], prev.configs[key], changesAccum);
@@ -72,10 +79,10 @@ function compare(current: IConfigNode, prev: IConfigNode, changesAccum: IConfigC
       return;
     }
 
-    changesAccum.options[mergeNameParts(current.fullName, key)] = current.options[key];
+    changesAccum.options[mergeNameParts(fullName, key)] = current.options[key];
   });
 
-  compareTemplates(current, prev, changesAccum);
+  compareTemplates(current, fullName, prev, changesAccum);
 }
 
 function appendRemovedValues(
@@ -108,6 +115,7 @@ function getChanges(current: IConfigNode, prev: IConfigNode): IConfigChanges {
 
 function compareCollections(
   current: IConfigNode,
+  currentFullName: string,
   prev: IConfigNode,
   changesAccum: IConfigChanges,
 ) {
@@ -122,7 +130,7 @@ function compareCollections(
           updatedCollection.push(config);
         },
       );
-      changesAccum.options[mergeNameParts(current.fullName, key)] = updatedCollection;
+      changesAccum.options[mergeNameParts(currentFullName, key)] = updatedCollection;
       return;
     }
 
diff --git a/packages/devextreme-react/src/core/configuration/config-node.ts b/packages/devextreme-react/src/core/configuration/config-node.ts
index 2562f8cca96b..8d4925cdc615 100644
--- a/packages/devextreme-react/src/core/configuration/config-node.ts
+++ b/packages/devextreme-react/src/core/configuration/config-node.ts
@@ -1,9 +1,17 @@
+import * as React from 'react';
+import { separateProps } from '../widget-config';
+import { IOptionElement } from './react/element';
+import { getAnonymousTemplate } from './react/templates';
+import { TemplateDiscoveryContext } from '../contexts';
+
 interface IConfigNode {
-  readonly fullName: string;
+  parentNode?: IConfigNode | undefined;
+  index?: number | undefined;
+  templates: ITemplate[];
+  readonly name: string;
   readonly predefinedOptions: Record<string, any>;
   readonly initialOptions: Record<string, any>;
   readonly options: Record<string, any>;
-  readonly templates: ITemplate[];
   readonly configs: Record<string, IConfigNode>;
   readonly configCollections: Record<string, IConfigNode[]>;
 }
@@ -15,7 +23,125 @@ interface ITemplate {
   content: any;
 }
 
+interface NodeConfigBuilder {
+  node: IConfigNode;
+  configCollectionMaps: Record<string, Record<string, number>>;
+  addChildNode: (name: string, childNode: IConfigNode) => void;
+  addTemplate: (template: ITemplate) => void;
+  getConfigCollectionData: (name: string) => [IConfigNode[], Record<string, number>];
+  updateAnonymousTemplates: (hasTemplateRendered: boolean) => void;
+  addCollectionNode: (name: string, collectionNode: IConfigNode, collectionNodeKey: number) => void;
+  wrapTemplate: (template: ITemplate) => ITemplate;
+}
+
+function buildNodeFullName(node: IConfigNode): string {
+  let currentNode: IConfigNode | undefined = node;
+  let fullName = '';
+
+  while (currentNode && currentNode.name) {
+    fullName = currentNode.name.concat(
+      typeof currentNode.index === 'number' ? `[${currentNode.index}]` : '',
+      fullName ? `.${fullName}` : '',
+    );
+    currentNode = currentNode.parentNode;
+  }
+
+  return fullName;
+}
+
+const createConfigBuilder: (
+  optionElement: IOptionElement,
+  parentFullName: string,
+) => NodeConfigBuilder = (
+  optionElement,
+  parentFullName,
+) => {
+  const separatedValues = separateProps(
+    optionElement.props,
+    optionElement.descriptor.initialValuesProps,
+    optionElement.descriptor.templates,
+  );
+
+  return {
+    node: {
+      name: optionElement.descriptor.name,
+      predefinedOptions: optionElement.descriptor.predefinedValuesProps,
+      initialOptions: separatedValues.defaults,
+      options: separatedValues.options,
+      templates: [],
+      configCollections: {},
+      configs: {},
+    },
+    configCollectionMaps: {},
+
+    getConfigCollectionData(name: string) {
+      if (!this.node.configCollections[name]) {
+        this.node.configCollections[name] = [];
+        this.configCollectionMaps[name] = {};
+      }
+
+      return [this.node.configCollections[name], this.configCollectionMaps[name]];
+    },
+
+    addChildNode(name, childNode) {
+      childNode.parentNode = this.node;
+      this.node.configs[name] = childNode;
+    },
+
+    addCollectionNode(name, collectionNode, collectionNodeKey) {
+      const [collection, collectionMap] = this.getConfigCollectionData(name);
+      const itemIndex = collectionMap[collectionNodeKey] ?? collection.length;
+      collectionNode.index = itemIndex;
+      collectionNode.parentNode = this.node;
+
+      if (itemIndex < collection.length) {
+        collection[itemIndex] = collectionNode;
+      } else {
+        collectionMap[collectionNodeKey] = itemIndex;
+        collection.push(collectionNode);
+      }
+    },
+
+    addTemplate(template) {
+      this.node.templates.push(template);
+    },
+
+    updateAnonymousTemplates(hasTemplateRendered) {
+      this.node.templates = this.node.templates.filter((template) => !template.isAnonymous);
+
+      optionElement.descriptor.templates.forEach((templateMeta) => {
+        const template = getAnonymousTemplate(
+          optionElement.props,
+          templateMeta,
+          hasTemplateRendered && (optionElement.descriptor.isCollection || parentFullName.length > 0),
+        );
+
+        if (template) {
+          this.node.templates.push(this.wrapTemplate(template));
+        }
+      });
+    },
+
+    wrapTemplate(template) {
+      return template.type === 'children' ? {
+        ...template,
+        content: React.createElement(
+          TemplateDiscoveryContext.Provider,
+          {
+            value: {
+              discoveryRendering: true,
+            },
+          },
+          template.content,
+        ),
+      } : template;
+    },
+  };
+};
+
 export {
+  buildNodeFullName,
+  createConfigBuilder,
   IConfigNode,
   ITemplate,
 };
diff --git a/packages/devextreme-react/src/core/configuration/react/__tests__/element.test.tsx b/packages/devextreme-react/src/core/configuration/react/__tests__/element.test.tsx
index 628fda6112df..37aa0383c236 100644
--- a/packages/devextreme-react/src/core/configuration/react/__tests__/element.test.tsx
+++ b/packages/devextreme-react/src/core/configuration/react/__tests__/element.test.tsx
@@ -1,64 +1,85 @@
 /* eslint-disable max-classes-per-file */
 import { render } from '@testing-library/react';
 import * as React from 'react';
-import { memo } from 'react';
 import ConfigurationComponent from '../../../nested-option';
 import { Template } from '../../../template';
 
 import {
   ElementType,
+  getElementType,
+  getOptionInfo,
   IElementDescriptor,
-  getElementInfo,
 } from '../element';
 
-const MinimalConfigurationComponent = memo(function MinimalConfigurationComponent(props: any) {
+const minimalComponentDescriptor: IElementDescriptor = {
+  OptionName: 'option',
+  IsCollectionItem: false,
+};
+
+let MinimalConfigurationComponent = function MinimalConfigurationComponent(props: any) {
   return (
     <ConfigurationComponent<any>
+      elementDescriptor={minimalComponentDescriptor}
       {...props}
     />
   );
-}) as React.MemoExoticComponent<any> & IElementDescriptor;
+} as React.ComponentType<any> & { elementDescriptor: IElementDescriptor };
 
-MinimalConfigurationComponent.OptionName = 'option';
-MinimalConfigurationComponent.IsCollectionItem = false;
+MinimalConfigurationComponent = Object.assign(MinimalConfigurationComponent, {
+  elementDescriptor: minimalComponentDescriptor,
+});
 
-const RichConfigurationComponent = memo(function RichConfigurationComponent(props: any) {
+const richComponentDescriptor: IElementDescriptor = {
+  OptionName: 'option',
+  IsCollectionItem: false,
+  DefaultsProps: { defaultValue: 'value' },
+  TemplateProps: [{
+    tmplOption: 'template',
+    render: 'render',
+    component: 'component',
+  }],
+  PredefinedProps: { type: 'numeric' },
+};
+
+let RichConfigurationComponent = function RichConfigurationComponent(props: any) {
   return (
     <ConfigurationComponent<any>
+      elementDescriptor={richComponentDescriptor}
       {...props}
     />
   );
-}) as React.MemoExoticComponent<any> & IElementDescriptor;
-
-RichConfigurationComponent.OptionName = 'option';
-RichConfigurationComponent.IsCollectionItem = false;
-RichConfigurationComponent.DefaultsProps = { defaultValue: 'value' };
-RichConfigurationComponent.TemplateProps = [{
-  tmplOption: 'template',
-  render: 'render',
-  component: 'component',
-}];
-RichConfigurationComponent.PredefinedProps = { type: 'numeric' };
-
-const CollectionConfigurationComponent = memo(function CollectionConfigurationComponent(props: any) {
+} as React.ComponentType<any> & { elementDescriptor: IElementDescriptor };
+
+RichConfigurationComponent = Object.assign(RichConfigurationComponent, {
+  elementDescriptor: richComponentDescriptor,
+});
+
+const collectionComponentDescriptor: IElementDescriptor = {
+  OptionName: 'option',
+  IsCollectionItem: true,
+  DefaultsProps: { defaultValue: 'value' },
+  TemplateProps: [{
+    tmplOption: 'template',
+    render: 'render',
+    component: 'component',
+  }],
+  PredefinedProps: { type: 'numeric' },
+};
+
+let CollectionConfigurationComponent = function CollectionConfigurationComponent(props: any) {
   return (
     <ConfigurationComponent<any>
+      elementDescriptor={collectionComponentDescriptor}
       {...props}
     />
   );
-}) as React.MemoExoticComponent<any> & IElementDescriptor;
-
-CollectionConfigurationComponent.OptionName = 'option';
-CollectionConfigurationComponent.IsCollectionItem = true;
-CollectionConfigurationComponent.DefaultsProps = { defaultValue: 'value' };
-CollectionConfigurationComponent.TemplateProps = [{
-  tmplOption: 'template',
-  render: 'render',
-  component: 'component',
-}];
-CollectionConfigurationComponent.PredefinedProps = { type: 'numeric' };
-
-const configurationComponents: any[] = [
+} as React.ComponentType<any> & { elementDescriptor: IElementDescriptor };
+
+CollectionConfigurationComponent = Object.assign(CollectionConfigurationComponent, {
+  elementDescriptor: collectionComponentDescriptor,
+});
+
+const configurationComponents: (React.ComponentType<any> & { elementDescriptor: IElementDescriptor })[] = [
   MinimalConfigurationComponent,
   RichConfigurationComponent,
   CollectionConfigurationComponent,
@@ -75,7 +96,10 @@ describe('getElementInfo', () => {
     it('parses Configuration component', () => {
       const element = React.createElement(component);
 
-      const elementInfo = getElementInfo(element);
+      const elementInfo = getOptionInfo(
+        component.elementDescriptor,
+        element.props,
+      );
 
       if (elementInfo.type !== ElementType.Option) {
         expect(elementInfo.type).toEqual(ElementType.Option);
@@ -85,11 +109,11 @@ describe('getElementInfo', () => {
       expect(elementInfo.props).toEqual(element.props);
 
       const { descriptor } = elementInfo;
-      expect(descriptor.name).toEqual(component.OptionName);
-      expect(descriptor.isCollection).toEqual(component.IsCollectionItem);
-      expect(descriptor.templates).toEqual(component.TemplateProps || []);
-      expect(descriptor.initialValuesProps).toEqual(component.DefaultsProps || {});
-      expect(descriptor.predefinedValuesProps).toEqual(component.PredefinedProps || {});
+      expect(descriptor.name).toEqual(component.elementDescriptor.OptionName);
+      expect(descriptor.isCollection).toEqual(component.elementDescriptor.IsCollectionItem);
+      expect(descriptor.templates).toEqual(component.elementDescriptor.TemplateProps || []);
+      expect(descriptor.initialValuesProps).toEqual(component.elementDescriptor.DefaultsProps || {});
+      expect(descriptor.predefinedValuesProps).toEqual(component.elementDescriptor.PredefinedProps || {});
     });
   });
 
@@ -102,14 +126,9 @@ describe('getElementInfo', () => {
       'Template content',
     );
 
-    const elementInfo = getElementInfo(element);
-
-    if (elementInfo?.type !== ElementType.Template) {
-      expect(elementInfo).toEqual(ElementType.Template);
-      return;
-    }
+    const elementType = getElementType(element);
 
-    expect(elementInfo.props).toEqual(element.props);
+    expect(elementType).toEqual(ElementType.Template);
   });
 
   otherComponents.forEach((component) => {
@@ -117,9 +136,9 @@ describe('getElementInfo', () => {
       const element = React.createElement(component);
 
       render(React.createElement(component));
-      const elementInfo = getElementInfo(element);
+      const elementType = getElementType(element);
 
-      expect(elementInfo.type).toEqual(ElementType.Unknown);
+      expect(elementType).toEqual(ElementType.Unknown);
     });
   });
 });
diff --git a/packages/devextreme-react/src/core/configuration/react/__tests__/tree.test.tsx b/packages/devextreme-react/src/core/configuration/react/__tests__/tree.test.tsx
deleted file mode 100644
index e3faf1762d28..000000000000
--- a/packages/devextreme-react/src/core/configuration/react/__tests__/tree.test.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import * as React from 'react';
-import { ElementType, IOptionElement } from '../element';
-import { processChildren } from '../tree';
-
-function createElementWithChildren(children: any[]): IOptionElement {
-  return {
-    type: ElementType.Option,
-    descriptor: {
-      isCollection: false,
-      name: '',
-      templates: [
-        {
-          tmplOption: 'template',
-          component: 'component',
-          render: 'render',
-        },
-      ],
-      initialValuesProps: {},
-      predefinedValuesProps: {},
-      expectedChildren: {},
-    },
-    props: {
-      children,
-    },
-  };
-}
-
-describe('processChildren', () => {
-  describe('test transcluded content handling', () => {
-    it('process empty', () => {
-      const childrenData = processChildren(createElementWithChildren([]), '');
-      expect(childrenData.hasTranscludedContent).toEqual(false);
-    });
-    it('process fragmented null', () => {
-      const childrenData = processChildren(createElementWithChildren([
-        <>{null}</>,
-      ]), '');
-      expect(childrenData.hasTranscludedContent).toEqual(true);
-    });
-    it('process unintended content', () => {
-      const childrenData = processChildren(createElementWithChildren([
-        null, undefined, false,
-      ]), '');
-      expect(childrenData.hasTranscludedContent).toEqual(false);
-    });
-    it('process string and number', () => {
-      const childrenData = processChildren(createElementWithChildren([
-        42, 'string',
-      ]), '');
-      expect(childrenData.hasTranscludedContent).toEqual(true);
-    });
-    it('process user template', () => {
-      const UserTemplate = () => <div> User Template</div>;
-      const childrenData = processChildren(createElementWithChildren([
-        <UserTemplate />,
-      ]), '');
-      expect(childrenData.hasTranscludedContent).toEqual(true);
-    });
-  });
-});
diff --git a/packages/devextreme-react/src/core/configuration/react/element.ts b/packages/devextreme-react/src/core/configuration/react/element.ts
index d00e8f553a53..ef763c1b76b7 100644
--- a/packages/devextreme-react/src/core/configuration/react/element.ts
+++ b/packages/devextreme-react/src/core/configuration/react/element.ts
@@ -1,4 +1,5 @@
 import { ITemplateMeta, Template as TemplateComponent } from '../../template';
+import { NestedComponentMeta } from '../../types';
 
 enum ElementType {
   Option,
@@ -26,66 +27,55 @@ interface IOptionElement {
   props: Record<string, any>;
 }
 
-interface ITemplateElement {
-  type: ElementType.Template;
-  props: Record<string, any>;
-}
+function getOptionInfo(
+  elementDescriptor: IElementDescriptor,
+  props: Record<string, any>,
+  parentExpectedChildren?: Record<string, IExpectedChild>,
+): IOptionElement {
+  let name = elementDescriptor.OptionName;
+  let isCollectionItem = elementDescriptor.IsCollectionItem;
+
+  const expectation = parentExpectedChildren && parentExpectedChildren[name];
+  if (expectation) {
+    isCollectionItem = expectation.isCollectionItem;
+    if (expectation.optionName) {
+      name = expectation.optionName;
+    }
+  }
 
-interface IUnknownElement {
-  type: ElementType.Unknown;
+  return {
+    type: ElementType.Option,
+    descriptor: {
+      name,
+      isCollection: !!isCollectionItem,
+      templates: elementDescriptor.TemplateProps || [],
+      initialValuesProps: elementDescriptor.DefaultsProps || {},
+      predefinedValuesProps: elementDescriptor.PredefinedProps || {},
+      expectedChildren: elementDescriptor.ExpectedChildren || {},
+    },
+    props,
+  };
 }
 
-type IElement = IOptionElement | ITemplateElement | IUnknownElement;
-
-function getElementInfo(
+function getElementType(
   element: React.ReactNode,
-  parentExpectedChildren?: Record<string, IExpectedChild>,
-): IElement {
+): ElementType {
   const reactElement = element as unknown as React.ReactElement;
   if (!reactElement || !reactElement.type) {
-    return {
-      type: ElementType.Unknown,
-    };
+    return ElementType.Unknown;
   }
 
   if (reactElement.type === TemplateComponent) {
-    return {
-      type: ElementType.Template,
-      props: reactElement.props,
-    };
+    return ElementType.Template;
   }
 
-  const elementDescriptor = reactElement.type as any as IElementDescriptor;
+  const nestedComponentMeta = reactElement.type as any as NestedComponentMeta;
 
-  if (elementDescriptor.OptionName) {
-    let name = elementDescriptor.OptionName;
-    let isCollectionItem = elementDescriptor.IsCollectionItem;
-
-    const expectation = parentExpectedChildren && parentExpectedChildren[name];
-    if (expectation) {
-      isCollectionItem = expectation.isCollectionItem;
-      if (expectation.optionName) {
-        name = expectation.optionName;
-      }
-    }
-
-    return {
-      type: ElementType.Option,
-      descriptor: {
-        name,
-        isCollection: !!isCollectionItem,
-        templates: elementDescriptor.TemplateProps || [],
-        initialValuesProps: elementDescriptor.DefaultsProps || {},
-        predefinedValuesProps: elementDescriptor.PredefinedProps || {},
-        expectedChildren: elementDescriptor.ExpectedChildren || {},
-      },
-      props: reactElement.props,
-    };
+  if (nestedComponentMeta.componentType === 'option') {
+    return ElementType.Option;
   }
 
-  return {
-    type: ElementType.Unknown,
-  };
+  return ElementType.Unknown;
 }
 
 interface IElementDescriptor {
@@ -98,10 +88,11 @@ interface IElementDescriptor {
 }
 
 export {
-  getElementInfo,
+  getElementType,
+  getOptionInfo,
   ElementType,
-  IElement,
   IOptionElement,
   IExpectedChild,
   IElementDescriptor,
+  IOptionDescriptor,
 };
diff --git a/packages/devextreme-react/src/core/configuration/react/tree.ts b/packages/devextreme-react/src/core/configuration/react/tree.ts
deleted file mode 100644
index 43eabc47870a..000000000000
--- a/packages/devextreme-react/src/core/configuration/react/tree.ts
+++ /dev/null
@@ -1,144 +0,0 @@
-import * as React from 'react';
-
-import { ITemplateMeta, ITemplateProps } from '../../template';
-import { separateProps } from '../../widget-config';
-
-import {
-  ElementType, getElementInfo, IExpectedChild, IOptionElement,
-} from './element';
-
-import { IConfigNode, ITemplate } from '../config-node';
-import { mergeNameParts } from '../utils';
-import { getAnonymousTemplate, getNamedTemplate } from './templates';
-
-interface IWidgetDescriptor {
-  templates: ITemplateMeta[];
-  initialValuesProps: Record<string, string>;
-  predefinedValuesProps: Record<string, any>;
-  expectedChildren: Record<string, IExpectedChild>;
-}
-
-export function processChildren(parentElement: IOptionElement, parentFullName: string): {
-  configs: Record<string, IConfigNode>;
-  configCollections: Record<string, IConfigNode[]>;
-  templates: ITemplate[];
-  hasTranscludedContent: boolean;
-} {
-  const templates: ITemplate[] = [];
-  const configCollections: Record<string, IConfigNode[]> = {};
-  const configs: Record<string, IConfigNode> = {};
-  let hasTranscludedContent = false;
-
-  React.Children.map(
-    parentElement.props.children,
-    (child) => {
-      const element = getElementInfo(child, parentElement.descriptor.expectedChildren);
-      if (element.type === ElementType.Unknown) {
-        if (child !== null && child !== undefined && child !== false) {
-          hasTranscludedContent = true;
-        }
-        return;
-      }
-
-      if (element.type === ElementType.Template) {
-        const template = getNamedTemplate(element.props as ITemplateProps);
-
-        if (template) {
-          templates.push(template);
-        }
-        return;
-      }
-
-      if (element.descriptor.isCollection) {
-        let collection = configCollections[element.descriptor.name];
-        if (!collection) {
-          collection = [];
-          configCollections[element.descriptor.name] = collection;
-        }
-
-        // eslint-disable-next-line @typescript-eslint/no-use-before-define
-        const collectionItem = createConfigNode(
-          element,
-          `${mergeNameParts(
-            parentFullName,
-            element.descriptor.name,
-          )}[${collection.length}]`,
-        );
-
-        collection.push(collectionItem);
-        return;
-      }
-
-      // eslint-disable-next-line @typescript-eslint/no-use-before-define
-      const configNode = createConfigNode(
-        element,
-        parentFullName,
-      );
-
-      configs[element.descriptor.name] = configNode;
-    },
-  );
-
-  return {
-    configs,
-    configCollections,
-    templates,
-    hasTranscludedContent,
-  };
-}
-
-function createConfigNode(element: IOptionElement, path: string): IConfigNode {
-  const fullName = element.descriptor.isCollection
-    ? path
-    : mergeNameParts(path, element.descriptor.name);
-
-  const separatedValues = separateProps(
-    element.props,
-    element.descriptor.initialValuesProps,
-    element.descriptor.templates,
-  );
-
-  const childrenData = processChildren(element, fullName);
-  element.descriptor.templates.forEach((templateMeta) => {
-    const template = getAnonymousTemplate(
-      element.props,
-      templateMeta,
-      path.length > 0 ? childrenData.hasTranscludedContent : false,
-    );
-    if (template) {
-      childrenData.templates.push(template);
-    }
-  });
-
-  return {
-    fullName,
-    predefinedOptions: element.descriptor.predefinedValuesProps,
-    initialOptions: separatedValues.defaults,
-    options: separatedValues.options,
-    templates: childrenData.templates,
-    configCollections: childrenData.configCollections,
-    configs: childrenData.configs,
-  };
-}
-
-function buildConfigTree(
-  widgetDescriptor: IWidgetDescriptor,
-  props: Record<string, any>,
-): IConfigNode {
-  return createConfigNode(
-    {
-      type: ElementType.Option,
-      descriptor: {
-        name: '',
-        isCollection: false,
-        ...widgetDescriptor,
-      },
-      props,
-    },
-    '',
-  );
-}
-
-export {
-  buildConfigTree,
-};
diff --git a/packages/devextreme-react/src/core/configuration/tree.ts b/packages/devextreme-react/src/core/configuration/tree.ts
index 2661b214b024..0bddbb81158a 100644
--- a/packages/devextreme-react/src/core/configuration/tree.ts
+++ b/packages/devextreme-react/src/core/configuration/tree.ts
@@ -1,4 +1,4 @@
-import { IConfigNode, ITemplate } from './config-node';
+import { IConfigNode, ITemplate, buildNodeFullName } from './config-node';
 import { mergeNameParts, parseOptionName } from './utils';
 
 interface IConfig {
@@ -11,10 +11,12 @@ function buildTemplates(
   optionsAccum: Record<string, unknown>,
   templatesAccum: Record<string, ITemplate>,
 ): void {
+  const fullName = buildNodeFullName(node);
+
   node.templates.forEach(
     (template) => {
       if (template.isAnonymous) {
-        const templateName = mergeNameParts(node.fullName, template.optionName);
+        const templateName = mergeNameParts(fullName, template.optionName);
         optionsAccum[template.optionName] = templateName;
         templatesAccum[templateName] = template;
       } else {
diff --git a/packages/devextreme-react/src/core/contexts.ts b/packages/devextreme-react/src/core/contexts.ts
new file mode 100644
index 000000000000..4a0471fc2e20
--- /dev/null
+++ b/packages/devextreme-react/src/core/contexts.ts
@@ -0,0 +1,46 @@
+import {
+  Context,
+  createContext,
+} from 'react';
+
+import { IExpectedChild, IOptionDescriptor } from './configuration/react/element';
+import { IConfigNode } from './configuration/config-node';
+
+export interface UpdateLocker {
+  lock: () => void;
+  unlock: () => void;
+}
+
+export const RemovalLockerContext: Context<UpdateLocker | undefined> = createContext<UpdateLocker | undefined>(undefined);
+
+// eslint-disable-next-line @typescript-eslint/no-extra-parens
+export const RestoreTreeContext: Context<(() => void) | undefined> = createContext<(() => void) | undefined>(undefined);
+
+export interface NestedOptionContextContent {
+  parentExpectedChildren: Record<string, IExpectedChild> | undefined;
+  parentFullName: string;
+  onChildOptionsReady: (
+    configNode: IConfigNode,
+    optionDescriptor: IOptionDescriptor,
+    childUpdateToken: symbol,
+    optionComponentKey: number
+  ) => void;
+  getOptionComponentKey: () => number;
+  treeUpdateToken: symbol;
+}
+
+export const NestedOptionContext = createContext<NestedOptionContextContent>({
+  parentExpectedChildren: {},
+  parentFullName: '',
+  onChildOptionsReady: () => undefined,
+  getOptionComponentKey: () => 0,
+  treeUpdateToken: Symbol('initial tree update token'),
+});
+
+export interface TemplateDiscoveryContextContent {
+  discoveryRendering: boolean;
+}
+
+export const TemplateDiscoveryContext = createContext<TemplateDiscoveryContextContent>({
+  discoveryRendering: false,
+});
diff --git a/packages/devextreme-react/src/core/extension-component.tsx b/packages/devextreme-react/src/core/extension-component.tsx
index 78d18e4e0882..f317ce8d5e25 100644
--- a/packages/devextreme-react/src/core/extension-component.tsx
+++ b/packages/devextreme-react/src/core/extension-component.tsx
@@ -10,12 +10,13 @@ import {
 } from 'react';
 
 import { IHtmlOptions, ComponentBaseRef, ComponentBase } from './component-base';
-import { ComponentProps } from './component';
+import { ComponentProps, NestedComponentMeta } from './component';
 
-type NestedOptionElement = ReactElement<any, React.JSXElementConstructor<any> & { isExtensionComponent: boolean }>;
+type NestedOptionElement = ReactElement<any, React.JSXElementConstructor<any> & NestedComponentMeta>;
 
-function elementIsExtension(el: NestedOptionElement): boolean {
-  return !!el.type?.isExtensionComponent;
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+function elementIsExtension(el: any): el is NestedOptionElement {
+  return el.type?.componentType === 'extension';
 }
 
 const ExtensionComponent = forwardRef<ComponentBaseRef, any>(
diff --git a/packages/devextreme-react/src/core/helpers.ts b/packages/devextreme-react/src/core/helpers.ts
index a8f1202ceca2..0fc049b61860 100644
--- a/packages/devextreme-react/src/core/helpers.ts
+++ b/packages/devextreme-react/src/core/helpers.ts
@@ -1,11 +1,5 @@
 /* eslint-disable max-classes-per-file, no-restricted-syntax */
-import { createContext, Context } from 'react';
-import { TemplateInstantiationModel, UpdateLocker } from './types';
-
-export const RemovalLockerContext: Context<UpdateLocker | undefined> = createContext<UpdateLocker | undefined>(undefined);
-
-// eslint-disable-next-line @typescript-eslint/no-extra-parens
-export const RestoreTreeContext: Context<(() => void) | undefined> = createContext<(() => void) | undefined>(undefined);
+import { TemplateInstantiationModel } from './types';
 
 export function generateID(): string {
   return Math.random().toString(36).substring(2);
diff --git a/packages/devextreme-react/src/core/nested-option.ts b/packages/devextreme-react/src/core/nested-option.ts
index 8b3f013a408c..7f96c3a20333 100644
--- a/packages/devextreme-react/src/core/nested-option.ts
+++ b/packages/devextreme-react/src/core/nested-option.ts
@@ -1,5 +1,21 @@
 import * as React from 'react';
-import { ElementType, getElementInfo } from './configuration/react/element';
+
+import {
+  useContext,
+  useLayoutEffect,
+  useState,
+  useMemo,
+} from 'react';
+
+import { createPortal } from 'react-dom';
+
+import {
+  getOptionInfo,
+  IElementDescriptor,
+} from './configuration/react/element';
+
+import { useOptionScanning } from './use-option-scanning';
+import { NestedOptionContext, TemplateDiscoveryContext } from './contexts';
 
 interface INestedOptionMeta {
   optionName: string;
@@ -8,21 +24,65 @@ interface INestedOptionMeta {
   makeDirty: () => void;
 }
 
-const NestedOption = <P>(props: P): React.ReactElement | null => {
-  // @ts-expect-error TS2339
-  const { children: stateChildren } = props;
-  const children = React.Children.map(
-    stateChildren,
-    (child) => {
-      const childElementInfo = getElementInfo(child);
+const NestedOption = function NestedOption<P>(
+  props: React.PropsWithChildren<P & { elementDescriptor: IElementDescriptor }>,
+): React.ReactElement | null {
+  const { children } = props;
+  const { elementDescriptor, ...restProps } = props;
 
-      return childElementInfo.type === ElementType.Option ? child : null;
-    },
-  );
-  return React.createElement(
+  if (!elementDescriptor) {
+    return null;
+  }
+
+  const {
+    parentExpectedChildren,
+    onChildOptionsReady: triggerParentOptionsReady,
+    getOptionComponentKey,
+    treeUpdateToken,
+  } = useContext(NestedOptionContext);
+
+  const { discoveryRendering } = useContext(TemplateDiscoveryContext);
+  const [optionComponentKey] = useState(getOptionComponentKey());
+  const optionElement = getOptionInfo(elementDescriptor, restProps, parentExpectedChildren);
+  const templateContainer = useMemo(() => document.createElement('div'), []);
+  const mainContainer = useMemo(() => document.createElement('div'), []);
+
+  const [
+    config,
+    context,
+  ] = useOptionScanning(optionElement, children, templateContainer, treeUpdateToken);
+
+  useLayoutEffect(() => {
+    if (!discoveryRendering) {
+      triggerParentOptionsReady(config, optionElement.descriptor, treeUpdateToken, optionComponentKey);
+    }
+  }, [treeUpdateToken]);
+
+  return discoveryRendering ? null : React.createElement(
     React.Fragment,
     {},
-    children,
+    createPortal(
+      React.createElement(
+        TemplateDiscoveryContext.Provider,
+        {
+          value: {
+            discoveryRendering: true,
+          },
+        },
+        children,
+      ),
+      templateContainer,
+    ),
+    createPortal(
+      React.createElement(
+        NestedOptionContext.Provider,
+        {
+          value: context,
+        },
+        children,
+      ),
+      mainContainer,
+    ),
   );
 };
 
diff --git a/packages/devextreme-react/src/core/template-wrapper.tsx b/packages/devextreme-react/src/core/template-wrapper.tsx
index 02efa31fc897..b7f41fcaa44f 100644
--- a/packages/devextreme-react/src/core/template-wrapper.tsx
+++ b/packages/devextreme-react/src/core/template-wrapper.tsx
@@ -15,7 +15,7 @@ import {
 import { createPortal } from 'react-dom';
 import { DX_REMOVE_EVENT } from './component-base';
 import { DXRemoveCustomArgs, TemplateWrapperProps } from './types';
-import { RemovalLockerContext } from './helpers';
+import { RemovalLockerContext } from './contexts';
 
 const createHiddenNode = (
   containerNodeName: string,
diff --git a/packages/devextreme-react/src/core/types.ts b/packages/devextreme-react/src/core/types.ts
index 885ff50a8351..d2087b25cf8e 100644
--- a/packages/devextreme-react/src/core/types.ts
+++ b/packages/devextreme-react/src/core/types.ts
@@ -5,6 +5,10 @@ interface DXTemplate {
   render: RenderFunc;
 }
 
+export interface NestedComponentMeta {
+  componentType: 'option' | 'extension';
+}
+
 type RenderFunc = (arg: RenderArgs) => HTMLElement;
 
 interface TemplateArgs {
@@ -20,11 +24,6 @@ export interface RenderArgs {
   onRendered?: () => void;
 }
 
-export interface UpdateLocker {
-  lock: () => void;
-  unlock: () => void;
-}
-
 export type DXTemplateCollection = Record<string, DXTemplate>;
 
 export interface TemplateWrapperProps {
diff --git a/packages/devextreme-react/src/core/use-option-scanning.ts b/packages/devextreme-react/src/core/use-option-scanning.ts
new file mode 100644
index 000000000000..6da9395a6717
--- /dev/null
+++ b/packages/devextreme-react/src/core/use-option-scanning.ts
@@ -0,0 +1,83 @@
+import {
+  Children,
+  ReactNode,
+  ReactElement,
+  useContext,
+  useRef,
+  useLayoutEffect,
+} from 'react';
+
+import { ElementType, getElementType, IOptionElement } from './configuration/react/element';
+import { mergeNameParts } from './configuration/utils';
+import { createConfigBuilder, IConfigNode } from './configuration/config-node';
+import { getNamedTemplate } from './configuration/react/templates';
+import { ITemplateProps } from './template';
+import { NestedOptionContext, NestedOptionContextContent } from './contexts';
+
+export function useOptionScanning(
+  optionElement: IOptionElement,
+  children: ReactNode,
+  templateContainer: HTMLDivElement,
+  parentUpdateToken: symbol,
+): [
+    IConfigNode,
+    NestedOptionContextContent,
+  ] {
+  const parentContext = useContext(NestedOptionContext);
+
+  const {
+    parentFullName,
+  } = parentContext;
+
+  const updateToken = Symbol('update token');
+
+  const configBuilder = createConfigBuilder(optionElement, parentFullName);
+
+  Children.forEach(
+    children,
+    (child) => {
+      const elementType = getElementType(child);
+      if (elementType === ElementType.Template) {
+        const templateElement = child as ReactElement<ITemplateProps>;
+        const template = getNamedTemplate(templateElement.props);
+
+        if (template) {
+          configBuilder.addTemplate(template);
+        }
+      }
+    },
+  );
+
+  const childComponentCounter = useRef(0);
+
+  const context: NestedOptionContextContent = {
+    parentExpectedChildren: optionElement.descriptor.expectedChildren,
+    parentFullName: mergeNameParts(parentFullName, optionElement.descriptor.name),
+    treeUpdateToken: updateToken,
+    getOptionComponentKey: () => {
+      childComponentCounter.current += 1;
+      return childComponentCounter.current;
+    },
+    onChildOptionsReady: (childConfigNode, childDescriptor, childUpdateToken, childComponentKey) => {
+      if (childUpdateToken !== updateToken) {
+        return;
+      }
+
+      const { isCollection, name } = childDescriptor;
+
+      if (isCollection) {
+        configBuilder.addCollectionNode(name, childConfigNode, childComponentKey);
+        return;
+      }
+
+      configBuilder.addChildNode(name, childConfigNode);
+    },
+  };
+
+  useLayoutEffect(() => {
+    const hasTemplateRendered = templateContainer.childNodes.length > 0;
+    configBuilder.updateAnonymousTemplates(hasTemplateRendered);
+  }, [parentUpdateToken]);
+
+  return [configBuilder.node, context];
+}
diff --git a/packages/devextreme-react/src/core/widget-config.ts b/packages/devextreme-react/src/core/widget-config.ts
index 3b553205ab8b..4afc0718ea53 100644
--- a/packages/devextreme-react/src/core/widget-config.ts
+++ b/packages/devextreme-react/src/core/widget-config.ts
@@ -22,6 +22,7 @@ const internalProps: InternalProps = {
   renderChildren: () => undefined,
   beforeCreateWidget: () => undefined,
   afterCreateWidget: () => undefined,
+  children: null,
 };
 
 function isIgnoredProp(name: string) {
diff --git a/packages/devextreme-react/src/data-grid.ts b/packages/devextreme-react/src/data-grid.ts
index 674bccb9e00c..eacbd7551a88 100644
--- a/packages/devextreme-react/src/data-grid.ts
+++ b/packages/devextreme-react/src/data-grid.ts
@@ -6,7 +6,7 @@ import dxDataGrid, {
     Properties
 } from "devextreme/ui/data_grid";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { dxDataGridColumn, AdaptiveDetailRowPreparingEvent, CellClickEvent, CellDblClickEvent, CellPreparedEvent, ContentReadyEvent, ContextMenuPreparingEvent, DataErrorOccurredEvent, DisposingEvent, EditCanceledEvent, EditCancelingEvent, EditingStartEvent, EditorPreparedEvent, EditorPreparingEvent, ExportingEvent, FocusedCellChangingEvent, FocusedRowChangingEvent, InitializedEvent, InitNewRowEvent, KeyDownEvent, RowClickEvent, RowCollapsedEvent, RowCollapsingEvent, RowDblClickEvent, RowExpandedEvent, RowExpandingEvent, RowInsertedEvent, RowInsertingEvent, RowPreparedEvent, RowRemovedEvent, RowRemovingEvent, RowUpdatedEvent, RowUpdatingEvent, RowValidatingEvent, SavedEvent, SavingEvent, ToolbarPreparingEvent, dxDataGridRowObject, ColumnButtonClickEvent, dxDataGridColumnButton, dxDataGridToolbarItem } from "devextreme/ui/data_grid";
@@ -212,19 +212,22 @@ type IAnimationProps = React.PropsWithChildren<{
   hide?: AnimationConfig;
   show?: AnimationConfig;
 }>
-const _componentAnimation = memo(
-  (props: IAnimationProps) => {
-    return React.createElement(NestedOption<IAnimationProps>, { ...props });
-  }
-);
+const _componentAnimation = (props: IAnimationProps) => {
+  return React.createElement(NestedOption<IAnimationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "animation",
+      ExpectedChildren: {
+        hide: { optionName: "hide", isCollectionItem: false },
+        show: { optionName: "show", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const Animation: typeof _componentAnimation & IElementDescriptor = Object.assign(_componentAnimation, {
-  OptionName: "animation",
-  ExpectedChildren: {
-    hide: { optionName: "hide", isCollectionItem: false },
-    show: { optionName: "show", isCollectionItem: false }
-  },
-})
+const Animation = Object.assign<typeof _componentAnimation, NestedComponentMeta>(_componentAnimation, {
+  componentType: "option",
+});
 
 // owners:
 // FormItem
@@ -236,19 +239,22 @@ type IAsyncRuleProps = React.PropsWithChildren<{
   type?: "required" | "numeric" | "range" | "stringLength" | "custom" | "compare" | "pattern" | "email" | "async";
   validationCallback?: ((options: { column: Record<string, any>, data: Record<string, any>, formItem: Record<string, any>, rule: Record<string, any>, validator: Record<string, any>, value: string | number }) => any);
 }>
-const _componentAsyncRule = memo(
-  (props: IAsyncRuleProps) => {
-    return React.createElement(NestedOption<IAsyncRuleProps>, { ...props });
-  }
-);
+const _componentAsyncRule = (props: IAsyncRuleProps) => {
+  return React.createElement(NestedOption<IAsyncRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "async"
+      },
+    },
+  });
+};
 
-const AsyncRule: typeof _componentAsyncRule & IElementDescriptor = Object.assign(_componentAsyncRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "async"
-  },
-})
+const AsyncRule = Object.assign<typeof _componentAsyncRule, NestedComponentMeta>(_componentAsyncRule, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -256,15 +262,18 @@ type IAtProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentAt = memo(
-  (props: IAtProps) => {
-    return React.createElement(NestedOption<IAtProps>, { ...props });
-  }
-);
+const _componentAt = (props: IAtProps) => {
+  return React.createElement(NestedOption<IAtProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "at",
+    },
+  });
+};
 
-const At: typeof _componentAt & IElementDescriptor = Object.assign(_componentAt, {
-  OptionName: "at",
-})
+const At = Object.assign<typeof _componentAt, NestedComponentMeta>(_componentAt, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -272,15 +281,18 @@ type IBoundaryOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentBoundaryOffset = memo(
-  (props: IBoundaryOffsetProps) => {
-    return React.createElement(NestedOption<IBoundaryOffsetProps>, { ...props });
-  }
-);
+const _componentBoundaryOffset = (props: IBoundaryOffsetProps) => {
+  return React.createElement(NestedOption<IBoundaryOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "boundaryOffset",
+    },
+  });
+};
 
-const BoundaryOffset: typeof _componentBoundaryOffset & IElementDescriptor = Object.assign(_componentBoundaryOffset, {
-  OptionName: "boundaryOffset",
-})
+const BoundaryOffset = Object.assign<typeof _componentBoundaryOffset, NestedComponentMeta>(_componentBoundaryOffset, {
+  componentType: "option",
+});
 
 // owners:
 // Column
@@ -297,21 +309,24 @@ type IButtonProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentButton = memo(
-  (props: IButtonProps) => {
-    return React.createElement(NestedOption<IButtonProps>, { ...props });
-  }
-);
+const _componentButton = (props: IButtonProps) => {
+  return React.createElement(NestedOption<IButtonProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "buttons",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
 
-const Button: typeof _componentButton & IElementDescriptor = Object.assign(_componentButton, {
-  OptionName: "buttons",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const Button = Object.assign<typeof _componentButton, NestedComponentMeta>(_componentButton, {
+  componentType: "option",
+});
 
 // owners:
 // Editing
@@ -322,16 +337,19 @@ type IChangeProps = React.PropsWithChildren<{
   key?: any;
   type?: "insert" | "update" | "remove";
 }>
-const _componentChange = memo(
-  (props: IChangeProps) => {
-    return React.createElement(NestedOption<IChangeProps>, { ...props });
-  }
-);
+const _componentChange = (props: IChangeProps) => {
+  return React.createElement(NestedOption<IChangeProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "changes",
+      IsCollectionItem: true,
+    },
+  });
+};
 
-const Change: typeof _componentChange & IElementDescriptor = Object.assign(_componentChange, {
-  OptionName: "changes",
-  IsCollectionItem: true,
-})
+const Change = Object.assign<typeof _componentChange, NestedComponentMeta>(_componentChange, {
+  componentType: "option",
+});
 
 // owners:
 // Form
@@ -341,15 +359,18 @@ type IColCountByScreenProps = React.PropsWithChildren<{
   sm?: number;
   xs?: number;
 }>
-const _componentColCountByScreen = memo(
-  (props: IColCountByScreenProps) => {
-    return React.createElement(NestedOption<IColCountByScreenProps>, { ...props });
-  }
-);
+const _componentColCountByScreen = (props: IColCountByScreenProps) => {
+  return React.createElement(NestedOption<IColCountByScreenProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "colCountByScreen",
+    },
+  });
+};
 
-const ColCountByScreen: typeof _componentColCountByScreen & IElementDescriptor = Object.assign(_componentColCountByScreen, {
-  OptionName: "colCountByScreen",
-})
+const ColCountByScreen = Object.assign<typeof _componentColCountByScreen, NestedComponentMeta>(_componentColCountByScreen, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -357,15 +378,18 @@ type ICollisionProps = React.PropsWithChildren<{
   x?: "fit" | "flip" | "flipfit" | "none";
   y?: "fit" | "flip" | "flipfit" | "none";
 }>
-const _componentCollision = memo(
-  (props: ICollisionProps) => {
-    return React.createElement(NestedOption<ICollisionProps>, { ...props });
-  }
-);
+const _componentCollision = (props: ICollisionProps) => {
+  return React.createElement(NestedOption<ICollisionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "collision",
+    },
+  });
+};
 
-const Collision: typeof _componentCollision & IElementDescriptor = Object.assign(_componentCollision, {
-  OptionName: "collision",
-})
+const Collision = Object.assign<typeof _componentCollision, NestedComponentMeta>(_componentCollision, {
+  componentType: "option",
+});
 
 // owners:
 // DataGrid
@@ -473,62 +497,65 @@ type IColumnProps = React.PropsWithChildren<{
   headerCellRender?: (...params: any) => React.ReactNode;
   headerCellComponent?: React.ComponentType<any>;
 }>
-const _componentColumn = memo(
-  (props: IColumnProps) => {
-    return React.createElement(NestedOption<IColumnProps>, { ...props });
-  }
-);
-
-const Column: typeof _componentColumn & IElementDescriptor = Object.assign(_componentColumn, {
-  OptionName: "columns",
-  IsCollectionItem: true,
-  DefaultsProps: {
-    defaultFilterValue: "filterValue",
-    defaultFilterValues: "filterValues",
-    defaultGroupIndex: "groupIndex",
-    defaultSelectedFilterOperation: "selectedFilterOperation",
-    defaultSortIndex: "sortIndex",
-    defaultSortOrder: "sortOrder",
-    defaultVisible: "visible",
-    defaultVisibleIndex: "visibleIndex"
-  },
-  ExpectedChildren: {
-    AsyncRule: { optionName: "validationRules", isCollectionItem: true },
-    button: { optionName: "buttons", isCollectionItem: true },
-    columnHeaderFilter: { optionName: "headerFilter", isCollectionItem: false },
-    columnLookup: { optionName: "lookup", isCollectionItem: false },
-    CompareRule: { optionName: "validationRules", isCollectionItem: true },
-    CustomRule: { optionName: "validationRules", isCollectionItem: true },
-    EmailRule: { optionName: "validationRules", isCollectionItem: true },
-    format: { optionName: "format", isCollectionItem: false },
-    formItem: { optionName: "formItem", isCollectionItem: false },
-    headerFilter: { optionName: "headerFilter", isCollectionItem: false },
-    lookup: { optionName: "lookup", isCollectionItem: false },
-    NumericRule: { optionName: "validationRules", isCollectionItem: true },
-    PatternRule: { optionName: "validationRules", isCollectionItem: true },
-    RangeRule: { optionName: "validationRules", isCollectionItem: true },
-    RequiredRule: { optionName: "validationRules", isCollectionItem: true },
-    StringLengthRule: { optionName: "validationRules", isCollectionItem: true },
-    validationRule: { optionName: "validationRules", isCollectionItem: true }
-  },
-  TemplateProps: [{
-    tmplOption: "cellTemplate",
-    render: "cellRender",
-    component: "cellComponent"
-  }, {
-    tmplOption: "editCellTemplate",
-    render: "editCellRender",
-    component: "editCellComponent"
-  }, {
-    tmplOption: "groupCellTemplate",
-    render: "groupCellRender",
-    component: "groupCellComponent"
-  }, {
-    tmplOption: "headerCellTemplate",
-    render: "headerCellRender",
-    component: "headerCellComponent"
-  }],
-})
+const _componentColumn = (props: IColumnProps) => {
+  return React.createElement(NestedOption<IColumnProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "columns",
+      IsCollectionItem: true,
+      DefaultsProps: {
+        defaultFilterValue: "filterValue",
+        defaultFilterValues: "filterValues",
+        defaultGroupIndex: "groupIndex",
+        defaultSelectedFilterOperation: "selectedFilterOperation",
+        defaultSortIndex: "sortIndex",
+        defaultSortOrder: "sortOrder",
+        defaultVisible: "visible",
+        defaultVisibleIndex: "visibleIndex"
+      },
+      ExpectedChildren: {
+        AsyncRule: { optionName: "validationRules", isCollectionItem: true },
+        button: { optionName: "buttons", isCollectionItem: true },
+        columnHeaderFilter: { optionName: "headerFilter", isCollectionItem: false },
+        columnLookup: { optionName: "lookup", isCollectionItem: false },
+        CompareRule: { optionName: "validationRules", isCollectionItem: true },
+        CustomRule: { optionName: "validationRules", isCollectionItem: true },
+        EmailRule: { optionName: "validationRules", isCollectionItem: true },
+        format: { optionName: "format", isCollectionItem: false },
+        formItem: { optionName: "formItem", isCollectionItem: false },
+        headerFilter: { optionName: "headerFilter", isCollectionItem: false },
+        lookup: { optionName: "lookup", isCollectionItem: false },
+        NumericRule: { optionName: "validationRules", isCollectionItem: true },
+        PatternRule: { optionName: "validationRules", isCollectionItem: true },
+        RangeRule: { optionName: "validationRules", isCollectionItem: true },
+        RequiredRule: { optionName: "validationRules", isCollectionItem: true },
+        StringLengthRule: { optionName: "validationRules", isCollectionItem: true },
+        validationRule: { optionName: "validationRules", isCollectionItem: true }
+      },
+      TemplateProps: [{
+        tmplOption: "cellTemplate",
+        render: "cellRender",
+        component: "cellComponent"
+      }, {
+        tmplOption: "editCellTemplate",
+        render: "editCellRender",
+        component: "editCellComponent"
+      }, {
+        tmplOption: "groupCellTemplate",
+        render: "groupCellRender",
+        component: "groupCellComponent"
+      }, {
+        tmplOption: "headerCellTemplate",
+        render: "headerCellRender",
+        component: "headerCellComponent"
+      }],
+    },
+  });
+};
+
+const Column = Object.assign<typeof _componentColumn, NestedComponentMeta>(_componentColumn, {
+  componentType: "option",
+});
 
 // owners:
 // DataGrid
@@ -547,22 +574,25 @@ type IColumnChooserProps = React.PropsWithChildren<{
   title?: string;
   width?: number | string;
 }>
-const _componentColumnChooser = memo(
-  (props: IColumnChooserProps) => {
-    return React.createElement(NestedOption<IColumnChooserProps>, { ...props });
-  }
-);
+const _componentColumnChooser = (props: IColumnChooserProps) => {
+  return React.createElement(NestedOption<IColumnChooserProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "columnChooser",
+      ExpectedChildren: {
+        columnChooserSearch: { optionName: "search", isCollectionItem: false },
+        columnChooserSelection: { optionName: "selection", isCollectionItem: false },
+        position: { optionName: "position", isCollectionItem: false },
+        search: { optionName: "search", isCollectionItem: false },
+        selection: { optionName: "selection", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const ColumnChooser: typeof _componentColumnChooser & IElementDescriptor = Object.assign(_componentColumnChooser, {
-  OptionName: "columnChooser",
-  ExpectedChildren: {
-    columnChooserSearch: { optionName: "search", isCollectionItem: false },
-    columnChooserSelection: { optionName: "selection", isCollectionItem: false },
-    position: { optionName: "position", isCollectionItem: false },
-    search: { optionName: "search", isCollectionItem: false },
-    selection: { optionName: "selection", isCollectionItem: false }
-  },
-})
+const ColumnChooser = Object.assign<typeof _componentColumnChooser, NestedComponentMeta>(_componentColumnChooser, {
+  componentType: "option",
+});
 
 // owners:
 // ColumnChooser
@@ -571,15 +601,18 @@ type IColumnChooserSearchProps = React.PropsWithChildren<{
   enabled?: boolean;
   timeout?: number;
 }>
-const _componentColumnChooserSearch = memo(
-  (props: IColumnChooserSearchProps) => {
-    return React.createElement(NestedOption<IColumnChooserSearchProps>, { ...props });
-  }
-);
+const _componentColumnChooserSearch = (props: IColumnChooserSearchProps) => {
+  return React.createElement(NestedOption<IColumnChooserSearchProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "search",
+    },
+  });
+};
 
-const ColumnChooserSearch: typeof _componentColumnChooserSearch & IElementDescriptor = Object.assign(_componentColumnChooserSearch, {
-  OptionName: "search",
-})
+const ColumnChooserSearch = Object.assign<typeof _componentColumnChooserSearch, NestedComponentMeta>(_componentColumnChooserSearch, {
+  componentType: "option",
+});
 
 // owners:
 // ColumnChooser
@@ -588,15 +621,18 @@ type IColumnChooserSelectionProps = React.PropsWithChildren<{
   recursive?: boolean;
   selectByClick?: boolean;
 }>
-const _componentColumnChooserSelection = memo(
-  (props: IColumnChooserSelectionProps) => {
-    return React.createElement(NestedOption<IColumnChooserSelectionProps>, { ...props });
-  }
-);
+const _componentColumnChooserSelection = (props: IColumnChooserSelectionProps) => {
+  return React.createElement(NestedOption<IColumnChooserSelectionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "selection",
+    },
+  });
+};
 
-const ColumnChooserSelection: typeof _componentColumnChooserSelection & IElementDescriptor = Object.assign(_componentColumnChooserSelection, {
-  OptionName: "selection",
-})
+const ColumnChooserSelection = Object.assign<typeof _componentColumnChooserSelection, NestedComponentMeta>(_componentColumnChooserSelection, {
+  componentType: "option",
+});
 
 // owners:
 // DataGrid
@@ -617,20 +653,23 @@ type IColumnFixingProps = React.PropsWithChildren<{
     unfix?: string;
   };
 }>
-const _componentColumnFixing = memo(
-  (props: IColumnFixingProps) => {
-    return React.createElement(NestedOption<IColumnFixingProps>, { ...props });
-  }
-);
+const _componentColumnFixing = (props: IColumnFixingProps) => {
+  return React.createElement(NestedOption<IColumnFixingProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "columnFixing",
+      ExpectedChildren: {
+        columnFixingTexts: { optionName: "texts", isCollectionItem: false },
+        icons: { optionName: "icons", isCollectionItem: false },
+        texts: { optionName: "texts", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const ColumnFixing: typeof _componentColumnFixing & IElementDescriptor = Object.assign(_componentColumnFixing, {
-  OptionName: "columnFixing",
-  ExpectedChildren: {
-    columnFixingTexts: { optionName: "texts", isCollectionItem: false },
-    icons: { optionName: "icons", isCollectionItem: false },
-    texts: { optionName: "texts", isCollectionItem: false }
-  },
-})
+const ColumnFixing = Object.assign<typeof _componentColumnFixing, NestedComponentMeta>(_componentColumnFixing, {
+  componentType: "option",
+});
 
 // owners:
 // ColumnFixing
@@ -641,15 +680,18 @@ type IColumnFixingTextsProps = React.PropsWithChildren<{
   stickyPosition?: string;
   unfix?: string;
 }>
-const _componentColumnFixingTexts = memo(
-  (props: IColumnFixingTextsProps) => {
-    return React.createElement(NestedOption<IColumnFixingTextsProps>, { ...props });
-  }
-);
+const _componentColumnFixingTexts = (props: IColumnFixingTextsProps) => {
+  return React.createElement(NestedOption<IColumnFixingTextsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "texts",
+    },
+  });
+};
 
-const ColumnFixingTexts: typeof _componentColumnFixingTexts & IElementDescriptor = Object.assign(_componentColumnFixingTexts, {
-  OptionName: "texts",
-})
+const ColumnFixingTexts = Object.assign<typeof _componentColumnFixingTexts, NestedComponentMeta>(_componentColumnFixingTexts, {
+  componentType: "option",
+});
 
 // owners:
 // Column
@@ -663,19 +705,22 @@ type IColumnHeaderFilterProps = React.PropsWithChildren<{
   searchMode?: "contains" | "startswith" | "equals";
   width?: number | string;
 }>
-const _componentColumnHeaderFilter = memo(
-  (props: IColumnHeaderFilterProps) => {
-    return React.createElement(NestedOption<IColumnHeaderFilterProps>, { ...props });
-  }
-);
+const _componentColumnHeaderFilter = (props: IColumnHeaderFilterProps) => {
+  return React.createElement(NestedOption<IColumnHeaderFilterProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "headerFilter",
+      ExpectedChildren: {
+        columnHeaderFilterSearch: { optionName: "search", isCollectionItem: false },
+        search: { optionName: "search", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const ColumnHeaderFilter: typeof _componentColumnHeaderFilter & IElementDescriptor = Object.assign(_componentColumnHeaderFilter, {
-  OptionName: "headerFilter",
-  ExpectedChildren: {
-    columnHeaderFilterSearch: { optionName: "search", isCollectionItem: false },
-    search: { optionName: "search", isCollectionItem: false }
-  },
-})
+const ColumnHeaderFilter = Object.assign<typeof _componentColumnHeaderFilter, NestedComponentMeta>(_componentColumnHeaderFilter, {
+  componentType: "option",
+});
 
 // owners:
 // ColumnHeaderFilter
@@ -686,15 +731,18 @@ type IColumnHeaderFilterSearchProps = React.PropsWithChildren<{
   searchExpr?: Array<(() => any) | string> | (() => any) | string;
   timeout?: number;
 }>
-const _componentColumnHeaderFilterSearch = memo(
-  (props: IColumnHeaderFilterSearchProps) => {
-    return React.createElement(NestedOption<IColumnHeaderFilterSearchProps>, { ...props });
-  }
-);
+const _componentColumnHeaderFilterSearch = (props: IColumnHeaderFilterSearchProps) => {
+  return React.createElement(NestedOption<IColumnHeaderFilterSearchProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "search",
+    },
+  });
+};
 
-const ColumnHeaderFilterSearch: typeof _componentColumnHeaderFilterSearch & IElementDescriptor = Object.assign(_componentColumnHeaderFilterSearch, {
-  OptionName: "search",
-})
+const ColumnHeaderFilterSearch = Object.assign<typeof _componentColumnHeaderFilterSearch, NestedComponentMeta>(_componentColumnHeaderFilterSearch, {
+  componentType: "option",
+});
 
 // owners:
 // Column
@@ -705,15 +753,18 @@ type IColumnLookupProps = React.PropsWithChildren<{
   displayExpr?: ((data: any) => string) | string;
   valueExpr?: string;
 }>
-const _componentColumnLookup = memo(
-  (props: IColumnLookupProps) => {
-    return React.createElement(NestedOption<IColumnLookupProps>, { ...props });
-  }
-);
+const _componentColumnLookup = (props: IColumnLookupProps) => {
+  return React.createElement(NestedOption<IColumnLookupProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "lookup",
+    },
+  });
+};
 
-const ColumnLookup: typeof _componentColumnLookup & IElementDescriptor = Object.assign(_componentColumnLookup, {
-  OptionName: "lookup",
-})
+const ColumnLookup = Object.assign<typeof _componentColumnLookup, NestedComponentMeta>(_componentColumnLookup, {
+  componentType: "option",
+});
 
 // owners:
 // FormItem
@@ -725,19 +776,22 @@ type ICompareRuleProps = React.PropsWithChildren<{
   message?: string;
   type?: "required" | "numeric" | "range" | "stringLength" | "custom" | "compare" | "pattern" | "email" | "async";
 }>
-const _componentCompareRule = memo(
-  (props: ICompareRuleProps) => {
-    return React.createElement(NestedOption<ICompareRuleProps>, { ...props });
-  }
-);
+const _componentCompareRule = (props: ICompareRuleProps) => {
+  return React.createElement(NestedOption<ICompareRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "compare"
+      },
+    },
+  });
+};
 
-const CompareRule: typeof _componentCompareRule & IElementDescriptor = Object.assign(_componentCompareRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "compare"
-  },
-})
+const CompareRule = Object.assign<typeof _componentCompareRule, NestedComponentMeta>(_componentCompareRule, {
+  componentType: "option",
+});
 
 // owners:
 // RowDragging
@@ -745,15 +799,18 @@ type ICursorOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentCursorOffset = memo(
-  (props: ICursorOffsetProps) => {
-    return React.createElement(NestedOption<ICursorOffsetProps>, { ...props });
-  }
-);
+const _componentCursorOffset = (props: ICursorOffsetProps) => {
+  return React.createElement(NestedOption<ICursorOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "cursorOffset",
+    },
+  });
+};
 
-const CursorOffset: typeof _componentCursorOffset & IElementDescriptor = Object.assign(_componentCursorOffset, {
-  OptionName: "cursorOffset",
-})
+const CursorOffset = Object.assign<typeof _componentCursorOffset, NestedComponentMeta>(_componentCursorOffset, {
+  componentType: "option",
+});
 
 // owners:
 // FilterBuilder
@@ -769,21 +826,24 @@ type ICustomOperationProps = React.PropsWithChildren<{
   editorRender?: (...params: any) => React.ReactNode;
   editorComponent?: React.ComponentType<any>;
 }>
-const _componentCustomOperation = memo(
-  (props: ICustomOperationProps) => {
-    return React.createElement(NestedOption<ICustomOperationProps>, { ...props });
-  }
-);
+const _componentCustomOperation = (props: ICustomOperationProps) => {
+  return React.createElement(NestedOption<ICustomOperationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "customOperations",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "editorTemplate",
+        render: "editorRender",
+        component: "editorComponent"
+      }],
+    },
+  });
+};
 
-const CustomOperation: typeof _componentCustomOperation & IElementDescriptor = Object.assign(_componentCustomOperation, {
-  OptionName: "customOperations",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "editorTemplate",
-    render: "editorRender",
-    component: "editorComponent"
-  }],
-})
+const CustomOperation = Object.assign<typeof _componentCustomOperation, NestedComponentMeta>(_componentCustomOperation, {
+  componentType: "option",
+});
 
 // owners:
 // FormItem
@@ -795,19 +855,22 @@ type ICustomRuleProps = React.PropsWithChildren<{
   type?: "required" | "numeric" | "range" | "stringLength" | "custom" | "compare" | "pattern" | "email" | "async";
   validationCallback?: ((options: { column: Record<string, any>, data: Record<string, any>, formItem: Record<string, any>, rule: Record<string, any>, validator: Record<string, any>, value: string | number }) => boolean);
 }>
-const _componentCustomRule = memo(
-  (props: ICustomRuleProps) => {
-    return React.createElement(NestedOption<ICustomRuleProps>, { ...props });
-  }
-);
+const _componentCustomRule = (props: ICustomRuleProps) => {
+  return React.createElement(NestedOption<ICustomRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "custom"
+      },
+    },
+  });
+};
 
-const CustomRule: typeof _componentCustomRule & IElementDescriptor = Object.assign(_componentCustomRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "custom"
-  },
-})
+const CustomRule = Object.assign<typeof _componentCustomRule, NestedComponentMeta>(_componentCustomRule, {
+  componentType: "option",
+});
 
 // owners:
 // DataGrid
@@ -825,21 +888,24 @@ type IDataGridHeaderFilterProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number | string;
 }>
-const _componentDataGridHeaderFilter = memo(
-  (props: IDataGridHeaderFilterProps) => {
-    return React.createElement(NestedOption<IDataGridHeaderFilterProps>, { ...props });
-  }
-);
+const _componentDataGridHeaderFilter = (props: IDataGridHeaderFilterProps) => {
+  return React.createElement(NestedOption<IDataGridHeaderFilterProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "headerFilter",
+      ExpectedChildren: {
+        dataGridHeaderFilterSearch: { optionName: "search", isCollectionItem: false },
+        dataGridHeaderFilterTexts: { optionName: "texts", isCollectionItem: false },
+        search: { optionName: "search", isCollectionItem: false },
+        texts: { optionName: "texts", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const DataGridHeaderFilter: typeof _componentDataGridHeaderFilter & IElementDescriptor = Object.assign(_componentDataGridHeaderFilter, {
-  OptionName: "headerFilter",
-  ExpectedChildren: {
-    dataGridHeaderFilterSearch: { optionName: "search", isCollectionItem: false },
-    dataGridHeaderFilterTexts: { optionName: "texts", isCollectionItem: false },
-    search: { optionName: "search", isCollectionItem: false },
-    texts: { optionName: "texts", isCollectionItem: false }
-  },
-})
+const DataGridHeaderFilter = Object.assign<typeof _componentDataGridHeaderFilter, NestedComponentMeta>(_componentDataGridHeaderFilter, {
+  componentType: "option",
+});
 
 // owners:
 // DataGridHeaderFilter
@@ -849,15 +915,18 @@ type IDataGridHeaderFilterSearchProps = React.PropsWithChildren<{
   mode?: "contains" | "startswith" | "equals";
   timeout?: number;
 }>
-const _componentDataGridHeaderFilterSearch = memo(
-  (props: IDataGridHeaderFilterSearchProps) => {
-    return React.createElement(NestedOption<IDataGridHeaderFilterSearchProps>, { ...props });
-  }
-);
+const _componentDataGridHeaderFilterSearch = (props: IDataGridHeaderFilterSearchProps) => {
+  return React.createElement(NestedOption<IDataGridHeaderFilterSearchProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "search",
+    },
+  });
+};
 
-const DataGridHeaderFilterSearch: typeof _componentDataGridHeaderFilterSearch & IElementDescriptor = Object.assign(_componentDataGridHeaderFilterSearch, {
-  OptionName: "search",
-})
+const DataGridHeaderFilterSearch = Object.assign<typeof _componentDataGridHeaderFilterSearch, NestedComponentMeta>(_componentDataGridHeaderFilterSearch, {
+  componentType: "option",
+});
 
 // owners:
 // DataGridHeaderFilter
@@ -866,15 +935,18 @@ type IDataGridHeaderFilterTextsProps = React.PropsWithChildren<{
   emptyValue?: string;
   ok?: string;
 }>
-const _componentDataGridHeaderFilterTexts = memo(
-  (props: IDataGridHeaderFilterTextsProps) => {
-    return React.createElement(NestedOption<IDataGridHeaderFilterTextsProps>, { ...props });
-  }
-);
+const _componentDataGridHeaderFilterTexts = (props: IDataGridHeaderFilterTextsProps) => {
+  return React.createElement(NestedOption<IDataGridHeaderFilterTextsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "texts",
+    },
+  });
+};
 
-const DataGridHeaderFilterTexts: typeof _componentDataGridHeaderFilterTexts & IElementDescriptor = Object.assign(_componentDataGridHeaderFilterTexts, {
-  OptionName: "texts",
-})
+const DataGridHeaderFilterTexts = Object.assign<typeof _componentDataGridHeaderFilterTexts, NestedComponentMeta>(_componentDataGridHeaderFilterTexts, {
+  componentType: "option",
+});
 
 // owners:
 // DataGrid
@@ -886,15 +958,18 @@ type IDataGridSelectionProps = React.PropsWithChildren<{
   sensitivity?: "base" | "accent" | "case" | "variant";
   showCheckBoxesMode?: "always" | "none" | "onClick" | "onLongTap";
 }>
-const _componentDataGridSelection = memo(
-  (props: IDataGridSelectionProps) => {
-    return React.createElement(NestedOption<IDataGridSelectionProps>, { ...props });
-  }
-);
+const _componentDataGridSelection = (props: IDataGridSelectionProps) => {
+  return React.createElement(NestedOption<IDataGridSelectionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "selection",
+    },
+  });
+};
 
-const DataGridSelection: typeof _componentDataGridSelection & IElementDescriptor = Object.assign(_componentDataGridSelection, {
-  OptionName: "selection",
-})
+const DataGridSelection = Object.assign<typeof _componentDataGridSelection, NestedComponentMeta>(_componentDataGridSelection, {
+  componentType: "option",
+});
 
 // owners:
 // DataGrid
@@ -934,27 +1009,30 @@ type IEditingProps = React.PropsWithChildren<{
   defaultEditRowKey?: any;
   onEditRowKeyChange?: (value: any) => void;
 }>
-const _componentEditing = memo(
-  (props: IEditingProps) => {
-    return React.createElement(NestedOption<IEditingProps>, { ...props });
-  }
-);
-
-const Editing: typeof _componentEditing & IElementDescriptor = Object.assign(_componentEditing, {
-  OptionName: "editing",
-  DefaultsProps: {
-    defaultChanges: "changes",
-    defaultEditColumnName: "editColumnName",
-    defaultEditRowKey: "editRowKey"
-  },
-  ExpectedChildren: {
-    change: { optionName: "changes", isCollectionItem: true },
-    editingTexts: { optionName: "texts", isCollectionItem: false },
-    form: { optionName: "form", isCollectionItem: false },
-    popup: { optionName: "popup", isCollectionItem: false },
-    texts: { optionName: "texts", isCollectionItem: false }
-  },
-})
+const _componentEditing = (props: IEditingProps) => {
+  return React.createElement(NestedOption<IEditingProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "editing",
+      DefaultsProps: {
+        defaultChanges: "changes",
+        defaultEditColumnName: "editColumnName",
+        defaultEditRowKey: "editRowKey"
+      },
+      ExpectedChildren: {
+        change: { optionName: "changes", isCollectionItem: true },
+        editingTexts: { optionName: "texts", isCollectionItem: false },
+        form: { optionName: "form", isCollectionItem: false },
+        popup: { optionName: "popup", isCollectionItem: false },
+        texts: { optionName: "texts", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Editing = Object.assign<typeof _componentEditing, NestedComponentMeta>(_componentEditing, {
+  componentType: "option",
+});
 
 // owners:
 // Editing
@@ -971,15 +1049,18 @@ type IEditingTextsProps = React.PropsWithChildren<{
   undeleteRow?: string;
   validationCancelChanges?: string;
 }>
-const _componentEditingTexts = memo(
-  (props: IEditingTextsProps) => {
-    return React.createElement(NestedOption<IEditingTextsProps>, { ...props });
-  }
-);
+const _componentEditingTexts = (props: IEditingTextsProps) => {
+  return React.createElement(NestedOption<IEditingTextsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "texts",
+    },
+  });
+};
 
-const EditingTexts: typeof _componentEditingTexts & IElementDescriptor = Object.assign(_componentEditingTexts, {
-  OptionName: "texts",
-})
+const EditingTexts = Object.assign<typeof _componentEditingTexts, NestedComponentMeta>(_componentEditingTexts, {
+  componentType: "option",
+});
 
 // owners:
 // FormItem
@@ -989,19 +1070,22 @@ type IEmailRuleProps = React.PropsWithChildren<{
   message?: string;
   type?: "required" | "numeric" | "range" | "stringLength" | "custom" | "compare" | "pattern" | "email" | "async";
 }>
-const _componentEmailRule = memo(
-  (props: IEmailRuleProps) => {
-    return React.createElement(NestedOption<IEmailRuleProps>, { ...props });
-  }
-);
+const _componentEmailRule = (props: IEmailRuleProps) => {
+  return React.createElement(NestedOption<IEmailRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "email"
+      },
+    },
+  });
+};
 
-const EmailRule: typeof _componentEmailRule & IElementDescriptor = Object.assign(_componentEmailRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "email"
-  },
-})
+const EmailRule = Object.assign<typeof _componentEmailRule, NestedComponentMeta>(_componentEmailRule, {
+  componentType: "option",
+});
 
 // owners:
 // DataGrid
@@ -1015,19 +1099,22 @@ type IExportProps = React.PropsWithChildren<{
     exportTo?: string;
   };
 }>
-const _componentExport = memo(
-  (props: IExportProps) => {
-    return React.createElement(NestedOption<IExportProps>, { ...props });
-  }
-);
+const _componentExport = (props: IExportProps) => {
+  return React.createElement(NestedOption<IExportProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "export",
+      ExpectedChildren: {
+        exportTexts: { optionName: "texts", isCollectionItem: false },
+        texts: { optionName: "texts", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const Export: typeof _componentExport & IElementDescriptor = Object.assign(_componentExport, {
-  OptionName: "export",
-  ExpectedChildren: {
-    exportTexts: { optionName: "texts", isCollectionItem: false },
-    texts: { optionName: "texts", isCollectionItem: false }
-  },
-})
+const Export = Object.assign<typeof _componentExport, NestedComponentMeta>(_componentExport, {
+  componentType: "option",
+});
 
 // owners:
 // Export
@@ -1036,15 +1123,18 @@ type IExportTextsProps = React.PropsWithChildren<{
   exportSelectedRows?: string;
   exportTo?: string;
 }>
-const _componentExportTexts = memo(
-  (props: IExportTextsProps) => {
-    return React.createElement(NestedOption<IExportTextsProps>, { ...props });
-  }
-);
+const _componentExportTexts = (props: IExportTextsProps) => {
+  return React.createElement(NestedOption<IExportTextsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "texts",
+    },
+  });
+};
 
-const ExportTexts: typeof _componentExportTexts & IElementDescriptor = Object.assign(_componentExportTexts, {
-  OptionName: "texts",
-})
+const ExportTexts = Object.assign<typeof _componentExportTexts, NestedComponentMeta>(_componentExportTexts, {
+  componentType: "option",
+});
 
 // owners:
 // FilterBuilder
@@ -1070,26 +1160,29 @@ type IFieldProps = React.PropsWithChildren<{
   editorRender?: (...params: any) => React.ReactNode;
   editorComponent?: React.ComponentType<any>;
 }>
-const _componentField = memo(
-  (props: IFieldProps) => {
-    return React.createElement(NestedOption<IFieldProps>, { ...props });
-  }
-);
-
-const Field: typeof _componentField & IElementDescriptor = Object.assign(_componentField, {
-  OptionName: "fields",
-  IsCollectionItem: true,
-  ExpectedChildren: {
-    fieldLookup: { optionName: "lookup", isCollectionItem: false },
-    format: { optionName: "format", isCollectionItem: false },
-    lookup: { optionName: "lookup", isCollectionItem: false }
-  },
-  TemplateProps: [{
-    tmplOption: "editorTemplate",
-    render: "editorRender",
-    component: "editorComponent"
-  }],
-})
+const _componentField = (props: IFieldProps) => {
+  return React.createElement(NestedOption<IFieldProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "fields",
+      IsCollectionItem: true,
+      ExpectedChildren: {
+        fieldLookup: { optionName: "lookup", isCollectionItem: false },
+        format: { optionName: "format", isCollectionItem: false },
+        lookup: { optionName: "lookup", isCollectionItem: false }
+      },
+      TemplateProps: [{
+        tmplOption: "editorTemplate",
+        render: "editorRender",
+        component: "editorComponent"
+      }],
+    },
+  });
+};
+
+const Field = Object.assign<typeof _componentField, NestedComponentMeta>(_componentField, {
+  componentType: "option",
+});
 
 // owners:
 // Field
@@ -1099,15 +1192,18 @@ type IFieldLookupProps = React.PropsWithChildren<{
   displayExpr?: ((data: any) => string) | string;
   valueExpr?: ((data: any) => string | number | boolean) | string;
 }>
-const _componentFieldLookup = memo(
-  (props: IFieldLookupProps) => {
-    return React.createElement(NestedOption<IFieldLookupProps>, { ...props });
-  }
-);
+const _componentFieldLookup = (props: IFieldLookupProps) => {
+  return React.createElement(NestedOption<IFieldLookupProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "lookup",
+    },
+  });
+};
 
-const FieldLookup: typeof _componentFieldLookup & IElementDescriptor = Object.assign(_componentFieldLookup, {
-  OptionName: "lookup",
-})
+const FieldLookup = Object.assign<typeof _componentFieldLookup, NestedComponentMeta>(_componentFieldLookup, {
+  componentType: "option",
+});
 
 // owners:
 // DataGrid
@@ -1162,24 +1258,27 @@ type IFilterBuilderProps = React.PropsWithChildren<{
   defaultValue?: Array<any> | (() => any) | string;
   onValueChange?: (value: Array<any> | (() => any) | string) => void;
 }>
-const _componentFilterBuilder = memo(
-  (props: IFilterBuilderProps) => {
-    return React.createElement(NestedOption<IFilterBuilderProps>, { ...props });
-  }
-);
-
-const FilterBuilder: typeof _componentFilterBuilder & IElementDescriptor = Object.assign(_componentFilterBuilder, {
-  OptionName: "filterBuilder",
-  DefaultsProps: {
-    defaultValue: "value"
-  },
-  ExpectedChildren: {
-    customOperation: { optionName: "customOperations", isCollectionItem: true },
-    field: { optionName: "fields", isCollectionItem: true },
-    filterOperationDescriptions: { optionName: "filterOperationDescriptions", isCollectionItem: false },
-    groupOperationDescriptions: { optionName: "groupOperationDescriptions", isCollectionItem: false }
-  },
-})
+const _componentFilterBuilder = (props: IFilterBuilderProps) => {
+  return React.createElement(NestedOption<IFilterBuilderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "filterBuilder",
+      DefaultsProps: {
+        defaultValue: "value"
+      },
+      ExpectedChildren: {
+        customOperation: { optionName: "customOperations", isCollectionItem: true },
+        field: { optionName: "fields", isCollectionItem: true },
+        filterOperationDescriptions: { optionName: "filterOperationDescriptions", isCollectionItem: false },
+        groupOperationDescriptions: { optionName: "groupOperationDescriptions", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const FilterBuilder = Object.assign<typeof _componentFilterBuilder, NestedComponentMeta>(_componentFilterBuilder, {
+  componentType: "option",
+});
 
 // owners:
 // DataGrid
@@ -1250,30 +1349,33 @@ type IFilterBuilderPopupProps = React.PropsWithChildren<{
   titleRender?: (...params: any) => React.ReactNode;
   titleComponent?: React.ComponentType<any>;
 }>
-const _componentFilterBuilderPopup = memo(
-  (props: IFilterBuilderPopupProps) => {
-    return React.createElement(NestedOption<IFilterBuilderPopupProps>, { ...props });
-  }
-);
-
-const FilterBuilderPopup: typeof _componentFilterBuilderPopup & IElementDescriptor = Object.assign(_componentFilterBuilderPopup, {
-  OptionName: "filterBuilderPopup",
-  DefaultsProps: {
-    defaultHeight: "height",
-    defaultPosition: "position",
-    defaultVisible: "visible",
-    defaultWidth: "width"
-  },
-  TemplateProps: [{
-    tmplOption: "contentTemplate",
-    render: "contentRender",
-    component: "contentComponent"
-  }, {
-    tmplOption: "titleTemplate",
-    render: "titleRender",
-    component: "titleComponent"
-  }],
-})
+const _componentFilterBuilderPopup = (props: IFilterBuilderPopupProps) => {
+  return React.createElement(NestedOption<IFilterBuilderPopupProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "filterBuilderPopup",
+      DefaultsProps: {
+        defaultHeight: "height",
+        defaultPosition: "position",
+        defaultVisible: "visible",
+        defaultWidth: "width"
+      },
+      TemplateProps: [{
+        tmplOption: "contentTemplate",
+        render: "contentRender",
+        component: "contentComponent"
+      }, {
+        tmplOption: "titleTemplate",
+        render: "titleRender",
+        component: "titleComponent"
+      }],
+    },
+  });
+};
+
+const FilterBuilderPopup = Object.assign<typeof _componentFilterBuilderPopup, NestedComponentMeta>(_componentFilterBuilderPopup, {
+  componentType: "option",
+});
 
 // owners:
 // FilterBuilder
@@ -1292,15 +1394,18 @@ type IFilterOperationDescriptionsProps = React.PropsWithChildren<{
   notEqual?: string;
   startsWith?: string;
 }>
-const _componentFilterOperationDescriptions = memo(
-  (props: IFilterOperationDescriptionsProps) => {
-    return React.createElement(NestedOption<IFilterOperationDescriptionsProps>, { ...props });
-  }
-);
+const _componentFilterOperationDescriptions = (props: IFilterOperationDescriptionsProps) => {
+  return React.createElement(NestedOption<IFilterOperationDescriptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "filterOperationDescriptions",
+    },
+  });
+};
 
-const FilterOperationDescriptions: typeof _componentFilterOperationDescriptions & IElementDescriptor = Object.assign(_componentFilterOperationDescriptions, {
-  OptionName: "filterOperationDescriptions",
-})
+const FilterOperationDescriptions = Object.assign<typeof _componentFilterOperationDescriptions, NestedComponentMeta>(_componentFilterOperationDescriptions, {
+  componentType: "option",
+});
 
 // owners:
 // DataGrid
@@ -1316,22 +1421,25 @@ type IFilterPanelProps = React.PropsWithChildren<{
   defaultFilterEnabled?: boolean;
   onFilterEnabledChange?: (value: boolean) => void;
 }>
-const _componentFilterPanel = memo(
-  (props: IFilterPanelProps) => {
-    return React.createElement(NestedOption<IFilterPanelProps>, { ...props });
-  }
-);
+const _componentFilterPanel = (props: IFilterPanelProps) => {
+  return React.createElement(NestedOption<IFilterPanelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "filterPanel",
+      DefaultsProps: {
+        defaultFilterEnabled: "filterEnabled"
+      },
+      ExpectedChildren: {
+        filterPanelTexts: { optionName: "texts", isCollectionItem: false },
+        texts: { optionName: "texts", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const FilterPanel: typeof _componentFilterPanel & IElementDescriptor = Object.assign(_componentFilterPanel, {
-  OptionName: "filterPanel",
-  DefaultsProps: {
-    defaultFilterEnabled: "filterEnabled"
-  },
-  ExpectedChildren: {
-    filterPanelTexts: { optionName: "texts", isCollectionItem: false },
-    texts: { optionName: "texts", isCollectionItem: false }
-  },
-})
+const FilterPanel = Object.assign<typeof _componentFilterPanel, NestedComponentMeta>(_componentFilterPanel, {
+  componentType: "option",
+});
 
 // owners:
 // FilterPanel
@@ -1340,15 +1448,18 @@ type IFilterPanelTextsProps = React.PropsWithChildren<{
   createFilter?: string;
   filterEnabledHint?: string;
 }>
-const _componentFilterPanelTexts = memo(
-  (props: IFilterPanelTextsProps) => {
-    return React.createElement(NestedOption<IFilterPanelTextsProps>, { ...props });
-  }
-);
+const _componentFilterPanelTexts = (props: IFilterPanelTextsProps) => {
+  return React.createElement(NestedOption<IFilterPanelTextsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "texts",
+    },
+  });
+};
 
-const FilterPanelTexts: typeof _componentFilterPanelTexts & IElementDescriptor = Object.assign(_componentFilterPanelTexts, {
-  OptionName: "texts",
-})
+const FilterPanelTexts = Object.assign<typeof _componentFilterPanelTexts, NestedComponentMeta>(_componentFilterPanelTexts, {
+  componentType: "option",
+});
 
 // owners:
 // DataGrid
@@ -1375,18 +1486,21 @@ type IFilterRowProps = React.PropsWithChildren<{
   showOperationChooser?: boolean;
   visible?: boolean;
 }>
-const _componentFilterRow = memo(
-  (props: IFilterRowProps) => {
-    return React.createElement(NestedOption<IFilterRowProps>, { ...props });
-  }
-);
+const _componentFilterRow = (props: IFilterRowProps) => {
+  return React.createElement(NestedOption<IFilterRowProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "filterRow",
+      ExpectedChildren: {
+        operationDescriptions: { optionName: "operationDescriptions", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const FilterRow: typeof _componentFilterRow & IElementDescriptor = Object.assign(_componentFilterRow, {
-  OptionName: "filterRow",
-  ExpectedChildren: {
-    operationDescriptions: { optionName: "operationDescriptions", isCollectionItem: false }
-  },
-})
+const FilterRow = Object.assign<typeof _componentFilterRow, NestedComponentMeta>(_componentFilterRow, {
+  componentType: "option",
+});
 
 // owners:
 // Editing
@@ -1440,21 +1554,24 @@ type IFormProps = React.PropsWithChildren<{
   defaultFormData?: any;
   onFormDataChange?: (value: any) => void;
 }>
-const _componentForm = memo(
-  (props: IFormProps) => {
-    return React.createElement(NestedOption<IFormProps>, { ...props });
-  }
-);
+const _componentForm = (props: IFormProps) => {
+  return React.createElement(NestedOption<IFormProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "form",
+      DefaultsProps: {
+        defaultFormData: "formData"
+      },
+      ExpectedChildren: {
+        colCountByScreen: { optionName: "colCountByScreen", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const Form: typeof _componentForm & IElementDescriptor = Object.assign(_componentForm, {
-  OptionName: "form",
-  DefaultsProps: {
-    defaultFormData: "formData"
-  },
-  ExpectedChildren: {
-    colCountByScreen: { optionName: "colCountByScreen", isCollectionItem: false }
-  },
-})
+const Form = Object.assign<typeof _componentForm, NestedComponentMeta>(_componentForm, {
+  componentType: "option",
+});
 
 // owners:
 // Column
@@ -1467,15 +1584,18 @@ type IFormatProps = React.PropsWithChildren<{
   type?: "billions" | "currency" | "day" | "decimal" | "exponential" | "fixedPoint" | "largeNumber" | "longDate" | "longTime" | "millions" | "millisecond" | "month" | "monthAndDay" | "monthAndYear" | "percent" | "quarter" | "quarterAndYear" | "shortDate" | "shortTime" | "thousands" | "trillions" | "year" | "dayOfWeek" | "hour" | "longDateLongTime" | "minute" | "second" | "shortDateShortTime";
   useCurrencyAccountingStyle?: boolean;
 }>
-const _componentFormat = memo(
-  (props: IFormatProps) => {
-    return React.createElement(NestedOption<IFormatProps>, { ...props });
-  }
-);
+const _componentFormat = (props: IFormatProps) => {
+  return React.createElement(NestedOption<IFormatProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "format",
+    },
+  });
+};
 
-const Format: typeof _componentFormat & IElementDescriptor = Object.assign(_componentFormat, {
-  OptionName: "format",
-})
+const Format = Object.assign<typeof _componentFormat, NestedComponentMeta>(_componentFormat, {
+  componentType: "option",
+});
 
 // owners:
 // Column
@@ -1504,33 +1624,36 @@ type IFormItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentFormItem = memo(
-  (props: IFormItemProps) => {
-    return React.createElement(NestedOption<IFormItemProps>, { ...props });
-  }
-);
-
-const FormItem: typeof _componentFormItem & IElementDescriptor = Object.assign(_componentFormItem, {
-  OptionName: "formItem",
-  ExpectedChildren: {
-    AsyncRule: { optionName: "validationRules", isCollectionItem: true },
-    CompareRule: { optionName: "validationRules", isCollectionItem: true },
-    CustomRule: { optionName: "validationRules", isCollectionItem: true },
-    EmailRule: { optionName: "validationRules", isCollectionItem: true },
-    label: { optionName: "label", isCollectionItem: false },
-    NumericRule: { optionName: "validationRules", isCollectionItem: true },
-    PatternRule: { optionName: "validationRules", isCollectionItem: true },
-    RangeRule: { optionName: "validationRules", isCollectionItem: true },
-    RequiredRule: { optionName: "validationRules", isCollectionItem: true },
-    StringLengthRule: { optionName: "validationRules", isCollectionItem: true },
-    validationRule: { optionName: "validationRules", isCollectionItem: true }
-  },
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentFormItem = (props: IFormItemProps) => {
+  return React.createElement(NestedOption<IFormItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "formItem",
+      ExpectedChildren: {
+        AsyncRule: { optionName: "validationRules", isCollectionItem: true },
+        CompareRule: { optionName: "validationRules", isCollectionItem: true },
+        CustomRule: { optionName: "validationRules", isCollectionItem: true },
+        EmailRule: { optionName: "validationRules", isCollectionItem: true },
+        label: { optionName: "label", isCollectionItem: false },
+        NumericRule: { optionName: "validationRules", isCollectionItem: true },
+        PatternRule: { optionName: "validationRules", isCollectionItem: true },
+        RangeRule: { optionName: "validationRules", isCollectionItem: true },
+        RequiredRule: { optionName: "validationRules", isCollectionItem: true },
+        StringLengthRule: { optionName: "validationRules", isCollectionItem: true },
+        validationRule: { optionName: "validationRules", isCollectionItem: true }
+      },
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const FormItem = Object.assign<typeof _componentFormItem, NestedComponentMeta>(_componentFormItem, {
+  componentType: "option",
+});
 
 // owners:
 // Hide
@@ -1541,18 +1664,21 @@ type IFromProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentFrom = memo(
-  (props: IFromProps) => {
-    return React.createElement(NestedOption<IFromProps>, { ...props });
-  }
-);
+const _componentFrom = (props: IFromProps) => {
+  return React.createElement(NestedOption<IFromProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "from",
+      ExpectedChildren: {
+        position: { optionName: "position", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const From: typeof _componentFrom & IElementDescriptor = Object.assign(_componentFrom, {
-  OptionName: "from",
-  ExpectedChildren: {
-    position: { optionName: "position", isCollectionItem: false }
-  },
-})
+const From = Object.assign<typeof _componentFrom, NestedComponentMeta>(_componentFrom, {
+  componentType: "option",
+});
 
 // owners:
 // DataGrid
@@ -1569,19 +1695,22 @@ type IGroupingProps = React.PropsWithChildren<{
     ungroupAll?: string;
   };
 }>
-const _componentGrouping = memo(
-  (props: IGroupingProps) => {
-    return React.createElement(NestedOption<IGroupingProps>, { ...props });
-  }
-);
+const _componentGrouping = (props: IGroupingProps) => {
+  return React.createElement(NestedOption<IGroupingProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "grouping",
+      ExpectedChildren: {
+        groupingTexts: { optionName: "texts", isCollectionItem: false },
+        texts: { optionName: "texts", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const Grouping: typeof _componentGrouping & IElementDescriptor = Object.assign(_componentGrouping, {
-  OptionName: "grouping",
-  ExpectedChildren: {
-    groupingTexts: { optionName: "texts", isCollectionItem: false },
-    texts: { optionName: "texts", isCollectionItem: false }
-  },
-})
+const Grouping = Object.assign<typeof _componentGrouping, NestedComponentMeta>(_componentGrouping, {
+  componentType: "option",
+});
 
 // owners:
 // Grouping
@@ -1592,15 +1721,18 @@ type IGroupingTextsProps = React.PropsWithChildren<{
   ungroup?: string;
   ungroupAll?: string;
 }>
-const _componentGroupingTexts = memo(
-  (props: IGroupingTextsProps) => {
-    return React.createElement(NestedOption<IGroupingTextsProps>, { ...props });
-  }
-);
+const _componentGroupingTexts = (props: IGroupingTextsProps) => {
+  return React.createElement(NestedOption<IGroupingTextsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "texts",
+    },
+  });
+};
 
-const GroupingTexts: typeof _componentGroupingTexts & IElementDescriptor = Object.assign(_componentGroupingTexts, {
-  OptionName: "texts",
-})
+const GroupingTexts = Object.assign<typeof _componentGroupingTexts, NestedComponentMeta>(_componentGroupingTexts, {
+  componentType: "option",
+});
 
 // owners:
 // Summary
@@ -1616,19 +1748,22 @@ type IGroupItemProps = React.PropsWithChildren<{
   summaryType?: "avg" | "count" | "custom" | "max" | "min" | "sum";
   valueFormat?: LocalizationTypes.Format;
 }>
-const _componentGroupItem = memo(
-  (props: IGroupItemProps) => {
-    return React.createElement(NestedOption<IGroupItemProps>, { ...props });
-  }
-);
+const _componentGroupItem = (props: IGroupItemProps) => {
+  return React.createElement(NestedOption<IGroupItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "groupItems",
+      IsCollectionItem: true,
+      ExpectedChildren: {
+        valueFormat: { optionName: "valueFormat", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const GroupItem: typeof _componentGroupItem & IElementDescriptor = Object.assign(_componentGroupItem, {
-  OptionName: "groupItems",
-  IsCollectionItem: true,
-  ExpectedChildren: {
-    valueFormat: { optionName: "valueFormat", isCollectionItem: false }
-  },
-})
+const GroupItem = Object.assign<typeof _componentGroupItem, NestedComponentMeta>(_componentGroupItem, {
+  componentType: "option",
+});
 
 // owners:
 // FilterBuilder
@@ -1638,15 +1773,18 @@ type IGroupOperationDescriptionsProps = React.PropsWithChildren<{
   notOr?: string;
   or?: string;
 }>
-const _componentGroupOperationDescriptions = memo(
-  (props: IGroupOperationDescriptionsProps) => {
-    return React.createElement(NestedOption<IGroupOperationDescriptionsProps>, { ...props });
-  }
-);
+const _componentGroupOperationDescriptions = (props: IGroupOperationDescriptionsProps) => {
+  return React.createElement(NestedOption<IGroupOperationDescriptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "groupOperationDescriptions",
+    },
+  });
+};
 
-const GroupOperationDescriptions: typeof _componentGroupOperationDescriptions & IElementDescriptor = Object.assign(_componentGroupOperationDescriptions, {
-  OptionName: "groupOperationDescriptions",
-})
+const GroupOperationDescriptions = Object.assign<typeof _componentGroupOperationDescriptions, NestedComponentMeta>(_componentGroupOperationDescriptions, {
+  componentType: "option",
+});
 
 // owners:
 // DataGrid
@@ -1657,18 +1795,21 @@ type IGroupPanelProps = React.PropsWithChildren<{
   defaultVisible?: boolean | "auto";
   onVisibleChange?: (value: boolean | "auto") => void;
 }>
-const _componentGroupPanel = memo(
-  (props: IGroupPanelProps) => {
-    return React.createElement(NestedOption<IGroupPanelProps>, { ...props });
-  }
-);
+const _componentGroupPanel = (props: IGroupPanelProps) => {
+  return React.createElement(NestedOption<IGroupPanelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "groupPanel",
+      DefaultsProps: {
+        defaultVisible: "visible"
+      },
+    },
+  });
+};
 
-const GroupPanel: typeof _componentGroupPanel & IElementDescriptor = Object.assign(_componentGroupPanel, {
-  OptionName: "groupPanel",
-  DefaultsProps: {
-    defaultVisible: "visible"
-  },
-})
+const GroupPanel = Object.assign<typeof _componentGroupPanel, NestedComponentMeta>(_componentGroupPanel, {
+  componentType: "option",
+});
 
 // owners:
 // Column
@@ -1690,15 +1831,18 @@ type IHeaderFilterProps = React.PropsWithChildren<{
   };
   visible?: boolean;
 }>
-const _componentHeaderFilter = memo(
-  (props: IHeaderFilterProps) => {
-    return React.createElement(NestedOption<IHeaderFilterProps>, { ...props });
-  }
-);
+const _componentHeaderFilter = (props: IHeaderFilterProps) => {
+  return React.createElement(NestedOption<IHeaderFilterProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "headerFilter",
+    },
+  });
+};
 
-const HeaderFilter: typeof _componentHeaderFilter & IElementDescriptor = Object.assign(_componentHeaderFilter, {
-  OptionName: "headerFilter",
-})
+const HeaderFilter = Object.assign<typeof _componentHeaderFilter, NestedComponentMeta>(_componentHeaderFilter, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -1714,19 +1858,22 @@ type IHideProps = React.PropsWithChildren<{
   to?: AnimationState;
   type?: "css" | "fade" | "fadeIn" | "fadeOut" | "pop" | "slide" | "slideIn" | "slideOut";
 }>
-const _componentHide = memo(
-  (props: IHideProps) => {
-    return React.createElement(NestedOption<IHideProps>, { ...props });
-  }
-);
+const _componentHide = (props: IHideProps) => {
+  return React.createElement(NestedOption<IHideProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hide",
+      ExpectedChildren: {
+        from: { optionName: "from", isCollectionItem: false },
+        to: { optionName: "to", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const Hide: typeof _componentHide & IElementDescriptor = Object.assign(_componentHide, {
-  OptionName: "hide",
-  ExpectedChildren: {
-    from: { optionName: "from", isCollectionItem: false },
-    to: { optionName: "to", isCollectionItem: false }
-  },
-})
+const Hide = Object.assign<typeof _componentHide, NestedComponentMeta>(_componentHide, {
+  componentType: "option",
+});
 
 // owners:
 // ColumnFixing
@@ -1737,15 +1884,18 @@ type IIconsProps = React.PropsWithChildren<{
   stickyPosition?: string;
   unfix?: string;
 }>
-const _componentIcons = memo(
-  (props: IIconsProps) => {
-    return React.createElement(NestedOption<IIconsProps>, { ...props });
-  }
-);
+const _componentIcons = (props: IIconsProps) => {
+  return React.createElement(NestedOption<IIconsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "icons",
+    },
+  });
+};
 
-const Icons: typeof _componentIcons & IElementDescriptor = Object.assign(_componentIcons, {
-  OptionName: "icons",
-})
+const Icons = Object.assign<typeof _componentIcons, NestedComponentMeta>(_componentIcons, {
+  componentType: "option",
+});
 
 // owners:
 // Toolbar
@@ -1768,25 +1918,28 @@ type IItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentItem = memo(
-  (props: IItemProps) => {
-    return React.createElement(NestedOption<IItemProps>, { ...props });
-  }
-);
-
-const Item: typeof _componentItem & IElementDescriptor = Object.assign(_componentItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "menuItemTemplate",
-    render: "menuItemRender",
-    component: "menuItemComponent"
-  }, {
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentItem = (props: IItemProps) => {
+  return React.createElement(NestedOption<IItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "menuItemTemplate",
+        render: "menuItemRender",
+        component: "menuItemComponent"
+      }, {
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const Item = Object.assign<typeof _componentItem, NestedComponentMeta>(_componentItem, {
+  componentType: "option",
+});
 
 // owners:
 // DataGrid
@@ -1796,15 +1949,18 @@ type IKeyboardNavigationProps = React.PropsWithChildren<{
   enterKeyAction?: "startEdit" | "moveFocus";
   enterKeyDirection?: "none" | "column" | "row";
 }>
-const _componentKeyboardNavigation = memo(
-  (props: IKeyboardNavigationProps) => {
-    return React.createElement(NestedOption<IKeyboardNavigationProps>, { ...props });
-  }
-);
+const _componentKeyboardNavigation = (props: IKeyboardNavigationProps) => {
+  return React.createElement(NestedOption<IKeyboardNavigationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "keyboardNavigation",
+    },
+  });
+};
 
-const KeyboardNavigation: typeof _componentKeyboardNavigation & IElementDescriptor = Object.assign(_componentKeyboardNavigation, {
-  OptionName: "keyboardNavigation",
-})
+const KeyboardNavigation = Object.assign<typeof _componentKeyboardNavigation, NestedComponentMeta>(_componentKeyboardNavigation, {
+  componentType: "option",
+});
 
 // owners:
 // FormItem
@@ -1818,20 +1974,23 @@ type ILabelProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentLabel = memo(
-  (props: ILabelProps) => {
-    return React.createElement(NestedOption<ILabelProps>, { ...props });
-  }
-);
+const _componentLabel = (props: ILabelProps) => {
+  return React.createElement(NestedOption<ILabelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "label",
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
 
-const Label: typeof _componentLabel & IElementDescriptor = Object.assign(_componentLabel, {
-  OptionName: "label",
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const Label = Object.assign<typeof _componentLabel, NestedComponentMeta>(_componentLabel, {
+  componentType: "option",
+});
 
 // owners:
 // DataGrid
@@ -1846,15 +2005,18 @@ type ILoadPanelProps = React.PropsWithChildren<{
   text?: string;
   width?: number | string;
 }>
-const _componentLoadPanel = memo(
-  (props: ILoadPanelProps) => {
-    return React.createElement(NestedOption<ILoadPanelProps>, { ...props });
-  }
-);
+const _componentLoadPanel = (props: ILoadPanelProps) => {
+  return React.createElement(NestedOption<ILoadPanelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "loadPanel",
+    },
+  });
+};
 
-const LoadPanel: typeof _componentLoadPanel & IElementDescriptor = Object.assign(_componentLoadPanel, {
-  OptionName: "loadPanel",
-})
+const LoadPanel = Object.assign<typeof _componentLoadPanel, NestedComponentMeta>(_componentLoadPanel, {
+  componentType: "option",
+});
 
 // owners:
 // Column
@@ -1866,15 +2028,18 @@ type ILookupProps = React.PropsWithChildren<{
   displayExpr?: ((data: any) => string) | string;
   valueExpr?: string | ((data: any) => string | number | boolean);
 }>
-const _componentLookup = memo(
-  (props: ILookupProps) => {
-    return React.createElement(NestedOption<ILookupProps>, { ...props });
-  }
-);
+const _componentLookup = (props: ILookupProps) => {
+  return React.createElement(NestedOption<ILookupProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "lookup",
+    },
+  });
+};
 
-const Lookup: typeof _componentLookup & IElementDescriptor = Object.assign(_componentLookup, {
-  OptionName: "lookup",
-})
+const Lookup = Object.assign<typeof _componentLookup, NestedComponentMeta>(_componentLookup, {
+  componentType: "option",
+});
 
 // owners:
 // DataGrid
@@ -1885,20 +2050,23 @@ type IMasterDetailProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentMasterDetail = memo(
-  (props: IMasterDetailProps) => {
-    return React.createElement(NestedOption<IMasterDetailProps>, { ...props });
-  }
-);
+const _componentMasterDetail = (props: IMasterDetailProps) => {
+  return React.createElement(NestedOption<IMasterDetailProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "masterDetail",
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
 
-const MasterDetail: typeof _componentMasterDetail & IElementDescriptor = Object.assign(_componentMasterDetail, {
-  OptionName: "masterDetail",
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const MasterDetail = Object.assign<typeof _componentMasterDetail, NestedComponentMeta>(_componentMasterDetail, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -1906,15 +2074,18 @@ type IMyProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentMy = memo(
-  (props: IMyProps) => {
-    return React.createElement(NestedOption<IMyProps>, { ...props });
-  }
-);
+const _componentMy = (props: IMyProps) => {
+  return React.createElement(NestedOption<IMyProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "my",
+    },
+  });
+};
 
-const My: typeof _componentMy & IElementDescriptor = Object.assign(_componentMy, {
-  OptionName: "my",
-})
+const My = Object.assign<typeof _componentMy, NestedComponentMeta>(_componentMy, {
+  componentType: "option",
+});
 
 // owners:
 // FormItem
@@ -1924,19 +2095,22 @@ type INumericRuleProps = React.PropsWithChildren<{
   message?: string;
   type?: "required" | "numeric" | "range" | "stringLength" | "custom" | "compare" | "pattern" | "email" | "async";
 }>
-const _componentNumericRule = memo(
-  (props: INumericRuleProps) => {
-    return React.createElement(NestedOption<INumericRuleProps>, { ...props });
-  }
-);
+const _componentNumericRule = (props: INumericRuleProps) => {
+  return React.createElement(NestedOption<INumericRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "numeric"
+      },
+    },
+  });
+};
 
-const NumericRule: typeof _componentNumericRule & IElementDescriptor = Object.assign(_componentNumericRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "numeric"
-  },
-})
+const NumericRule = Object.assign<typeof _componentNumericRule, NestedComponentMeta>(_componentNumericRule, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -1944,15 +2118,18 @@ type IOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentOffset = memo(
-  (props: IOffsetProps) => {
-    return React.createElement(NestedOption<IOffsetProps>, { ...props });
-  }
-);
+const _componentOffset = (props: IOffsetProps) => {
+  return React.createElement(NestedOption<IOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "offset",
+    },
+  });
+};
 
-const Offset: typeof _componentOffset & IElementDescriptor = Object.assign(_componentOffset, {
-  OptionName: "offset",
-})
+const Offset = Object.assign<typeof _componentOffset, NestedComponentMeta>(_componentOffset, {
+  componentType: "option",
+});
 
 // owners:
 // FilterRow
@@ -1969,15 +2146,18 @@ type IOperationDescriptionsProps = React.PropsWithChildren<{
   notEqual?: string;
   startsWith?: string;
 }>
-const _componentOperationDescriptions = memo(
-  (props: IOperationDescriptionsProps) => {
-    return React.createElement(NestedOption<IOperationDescriptionsProps>, { ...props });
-  }
-);
+const _componentOperationDescriptions = (props: IOperationDescriptionsProps) => {
+  return React.createElement(NestedOption<IOperationDescriptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "operationDescriptions",
+    },
+  });
+};
 
-const OperationDescriptions: typeof _componentOperationDescriptions & IElementDescriptor = Object.assign(_componentOperationDescriptions, {
-  OptionName: "operationDescriptions",
-})
+const OperationDescriptions = Object.assign<typeof _componentOperationDescriptions, NestedComponentMeta>(_componentOperationDescriptions, {
+  componentType: "option",
+});
 
 // owners:
 // DataGrid
@@ -1991,15 +2171,18 @@ type IPagerProps = React.PropsWithChildren<{
   showPageSizeSelector?: boolean;
   visible?: boolean | "auto";
 }>
-const _componentPager = memo(
-  (props: IPagerProps) => {
-    return React.createElement(NestedOption<IPagerProps>, { ...props });
-  }
-);
+const _componentPager = (props: IPagerProps) => {
+  return React.createElement(NestedOption<IPagerProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "pager",
+    },
+  });
+};
 
-const Pager: typeof _componentPager & IElementDescriptor = Object.assign(_componentPager, {
-  OptionName: "pager",
-})
+const Pager = Object.assign<typeof _componentPager, NestedComponentMeta>(_componentPager, {
+  componentType: "option",
+});
 
 // owners:
 // DataGrid
@@ -2012,19 +2195,22 @@ type IPagingProps = React.PropsWithChildren<{
   defaultPageSize?: number;
   onPageSizeChange?: (value: number) => void;
 }>
-const _componentPaging = memo(
-  (props: IPagingProps) => {
-    return React.createElement(NestedOption<IPagingProps>, { ...props });
-  }
-);
+const _componentPaging = (props: IPagingProps) => {
+  return React.createElement(NestedOption<IPagingProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "paging",
+      DefaultsProps: {
+        defaultPageIndex: "pageIndex",
+        defaultPageSize: "pageSize"
+      },
+    },
+  });
+};
 
-const Paging: typeof _componentPaging & IElementDescriptor = Object.assign(_componentPaging, {
-  OptionName: "paging",
-  DefaultsProps: {
-    defaultPageIndex: "pageIndex",
-    defaultPageSize: "pageSize"
-  },
-})
+const Paging = Object.assign<typeof _componentPaging, NestedComponentMeta>(_componentPaging, {
+  componentType: "option",
+});
 
 // owners:
 // FormItem
@@ -2035,19 +2221,22 @@ type IPatternRuleProps = React.PropsWithChildren<{
   pattern?: RegExp | string;
   type?: "required" | "numeric" | "range" | "stringLength" | "custom" | "compare" | "pattern" | "email" | "async";
 }>
-const _componentPatternRule = memo(
-  (props: IPatternRuleProps) => {
-    return React.createElement(NestedOption<IPatternRuleProps>, { ...props });
-  }
-);
+const _componentPatternRule = (props: IPatternRuleProps) => {
+  return React.createElement(NestedOption<IPatternRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "pattern"
+      },
+    },
+  });
+};
 
-const PatternRule: typeof _componentPatternRule & IElementDescriptor = Object.assign(_componentPatternRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "pattern"
-  },
-})
+const PatternRule = Object.assign<typeof _componentPatternRule, NestedComponentMeta>(_componentPatternRule, {
+  componentType: "option",
+});
 
 // owners:
 // Editing
@@ -2118,35 +2307,38 @@ type IPopupProps = React.PropsWithChildren<{
   titleRender?: (...params: any) => React.ReactNode;
   titleComponent?: React.ComponentType<any>;
 }>
-const _componentPopup = memo(
-  (props: IPopupProps) => {
-    return React.createElement(NestedOption<IPopupProps>, { ...props });
-  }
-);
-
-const Popup: typeof _componentPopup & IElementDescriptor = Object.assign(_componentPopup, {
-  OptionName: "popup",
-  DefaultsProps: {
-    defaultHeight: "height",
-    defaultPosition: "position",
-    defaultVisible: "visible",
-    defaultWidth: "width"
-  },
-  ExpectedChildren: {
-    animation: { optionName: "animation", isCollectionItem: false },
-    position: { optionName: "position", isCollectionItem: false },
-    toolbarItem: { optionName: "toolbarItems", isCollectionItem: true }
-  },
-  TemplateProps: [{
-    tmplOption: "contentTemplate",
-    render: "contentRender",
-    component: "contentComponent"
-  }, {
-    tmplOption: "titleTemplate",
-    render: "titleRender",
-    component: "titleComponent"
-  }],
-})
+const _componentPopup = (props: IPopupProps) => {
+  return React.createElement(NestedOption<IPopupProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "popup",
+      DefaultsProps: {
+        defaultHeight: "height",
+        defaultPosition: "position",
+        defaultVisible: "visible",
+        defaultWidth: "width"
+      },
+      ExpectedChildren: {
+        animation: { optionName: "animation", isCollectionItem: false },
+        position: { optionName: "position", isCollectionItem: false },
+        toolbarItem: { optionName: "toolbarItems", isCollectionItem: true }
+      },
+      TemplateProps: [{
+        tmplOption: "contentTemplate",
+        render: "contentRender",
+        component: "contentComponent"
+      }, {
+        tmplOption: "titleTemplate",
+        render: "titleRender",
+        component: "titleComponent"
+      }],
+    },
+  });
+};
+
+const Popup = Object.assign<typeof _componentPopup, NestedComponentMeta>(_componentPopup, {
+  componentType: "option",
+});
 
 // owners:
 // From
@@ -2176,15 +2368,18 @@ type IPositionProps = React.PropsWithChildren<{
     y?: number;
   };
 }>
-const _componentPosition = memo(
-  (props: IPositionProps) => {
-    return React.createElement(NestedOption<IPositionProps>, { ...props });
-  }
-);
+const _componentPosition = (props: IPositionProps) => {
+  return React.createElement(NestedOption<IPositionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "position",
+    },
+  });
+};
 
-const Position: typeof _componentPosition & IElementDescriptor = Object.assign(_componentPosition, {
-  OptionName: "position",
-})
+const Position = Object.assign<typeof _componentPosition, NestedComponentMeta>(_componentPosition, {
+  componentType: "option",
+});
 
 // owners:
 // FormItem
@@ -2197,19 +2392,22 @@ type IRangeRuleProps = React.PropsWithChildren<{
   reevaluate?: boolean;
   type?: "required" | "numeric" | "range" | "stringLength" | "custom" | "compare" | "pattern" | "email" | "async";
 }>
-const _componentRangeRule = memo(
-  (props: IRangeRuleProps) => {
-    return React.createElement(NestedOption<IRangeRuleProps>, { ...props });
-  }
-);
+const _componentRangeRule = (props: IRangeRuleProps) => {
+  return React.createElement(NestedOption<IRangeRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "range"
+      },
+    },
+  });
+};
 
-const RangeRule: typeof _componentRangeRule & IElementDescriptor = Object.assign(_componentRangeRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "range"
-  },
-})
+const RangeRule = Object.assign<typeof _componentRangeRule, NestedComponentMeta>(_componentRangeRule, {
+  componentType: "option",
+});
 
 // owners:
 // DataGrid
@@ -2221,15 +2419,18 @@ type IRemoteOperationsProps = React.PropsWithChildren<{
   sorting?: boolean;
   summary?: boolean;
 }>
-const _componentRemoteOperations = memo(
-  (props: IRemoteOperationsProps) => {
-    return React.createElement(NestedOption<IRemoteOperationsProps>, { ...props });
-  }
-);
+const _componentRemoteOperations = (props: IRemoteOperationsProps) => {
+  return React.createElement(NestedOption<IRemoteOperationsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "remoteOperations",
+    },
+  });
+};
 
-const RemoteOperations: typeof _componentRemoteOperations & IElementDescriptor = Object.assign(_componentRemoteOperations, {
-  OptionName: "remoteOperations",
-})
+const RemoteOperations = Object.assign<typeof _componentRemoteOperations, NestedComponentMeta>(_componentRemoteOperations, {
+  componentType: "option",
+});
 
 // owners:
 // FormItem
@@ -2239,19 +2440,22 @@ type IRequiredRuleProps = React.PropsWithChildren<{
   trim?: boolean;
   type?: "required" | "numeric" | "range" | "stringLength" | "custom" | "compare" | "pattern" | "email" | "async";
 }>
-const _componentRequiredRule = memo(
-  (props: IRequiredRuleProps) => {
-    return React.createElement(NestedOption<IRequiredRuleProps>, { ...props });
-  }
-);
+const _componentRequiredRule = (props: IRequiredRuleProps) => {
+  return React.createElement(NestedOption<IRequiredRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "required"
+      },
+    },
+  });
+};
 
-const RequiredRule: typeof _componentRequiredRule & IElementDescriptor = Object.assign(_componentRequiredRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "required"
-  },
-})
+const RequiredRule = Object.assign<typeof _componentRequiredRule, NestedComponentMeta>(_componentRequiredRule, {
+  componentType: "option",
+});
 
 // owners:
 // DataGrid
@@ -2285,23 +2489,26 @@ type IRowDraggingProps = React.PropsWithChildren<{
   dragRender?: (...params: any) => React.ReactNode;
   dragComponent?: React.ComponentType<any>;
 }>
-const _componentRowDragging = memo(
-  (props: IRowDraggingProps) => {
-    return React.createElement(NestedOption<IRowDraggingProps>, { ...props });
-  }
-);
-
-const RowDragging: typeof _componentRowDragging & IElementDescriptor = Object.assign(_componentRowDragging, {
-  OptionName: "rowDragging",
-  ExpectedChildren: {
-    cursorOffset: { optionName: "cursorOffset", isCollectionItem: false }
-  },
-  TemplateProps: [{
-    tmplOption: "dragTemplate",
-    render: "dragRender",
-    component: "dragComponent"
-  }],
-})
+const _componentRowDragging = (props: IRowDraggingProps) => {
+  return React.createElement(NestedOption<IRowDraggingProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "rowDragging",
+      ExpectedChildren: {
+        cursorOffset: { optionName: "cursorOffset", isCollectionItem: false }
+      },
+      TemplateProps: [{
+        tmplOption: "dragTemplate",
+        render: "dragRender",
+        component: "dragComponent"
+      }],
+    },
+  });
+};
+
+const RowDragging = Object.assign<typeof _componentRowDragging, NestedComponentMeta>(_componentRowDragging, {
+  componentType: "option",
+});
 
 // owners:
 // DataGrid
@@ -2316,15 +2523,18 @@ type IScrollingProps = React.PropsWithChildren<{
   showScrollbar?: "always" | "never" | "onHover" | "onScroll";
   useNative?: boolean | "auto";
 }>
-const _componentScrolling = memo(
-  (props: IScrollingProps) => {
-    return React.createElement(NestedOption<IScrollingProps>, { ...props });
-  }
-);
+const _componentScrolling = (props: IScrollingProps) => {
+  return React.createElement(NestedOption<IScrollingProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "scrolling",
+    },
+  });
+};
 
-const Scrolling: typeof _componentScrolling & IElementDescriptor = Object.assign(_componentScrolling, {
-  OptionName: "scrolling",
-})
+const Scrolling = Object.assign<typeof _componentScrolling, NestedComponentMeta>(_componentScrolling, {
+  componentType: "option",
+});
 
 // owners:
 // ColumnHeaderFilter
@@ -2337,15 +2547,18 @@ type ISearchProps = React.PropsWithChildren<{
   searchExpr?: Array<(() => any) | string> | (() => any) | string;
   timeout?: number;
 }>
-const _componentSearch = memo(
-  (props: ISearchProps) => {
-    return React.createElement(NestedOption<ISearchProps>, { ...props });
-  }
-);
+const _componentSearch = (props: ISearchProps) => {
+  return React.createElement(NestedOption<ISearchProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "search",
+    },
+  });
+};
 
-const Search: typeof _componentSearch & IElementDescriptor = Object.assign(_componentSearch, {
-  OptionName: "search",
-})
+const Search = Object.assign<typeof _componentSearch, NestedComponentMeta>(_componentSearch, {
+  componentType: "option",
+});
 
 // owners:
 // DataGrid
@@ -2360,18 +2573,21 @@ type ISearchPanelProps = React.PropsWithChildren<{
   defaultText?: string;
   onTextChange?: (value: string) => void;
 }>
-const _componentSearchPanel = memo(
-  (props: ISearchPanelProps) => {
-    return React.createElement(NestedOption<ISearchPanelProps>, { ...props });
-  }
-);
+const _componentSearchPanel = (props: ISearchPanelProps) => {
+  return React.createElement(NestedOption<ISearchPanelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "searchPanel",
+      DefaultsProps: {
+        defaultText: "text"
+      },
+    },
+  });
+};
 
-const SearchPanel: typeof _componentSearchPanel & IElementDescriptor = Object.assign(_componentSearchPanel, {
-  OptionName: "searchPanel",
-  DefaultsProps: {
-    defaultText: "text"
-  },
-})
+const SearchPanel = Object.assign<typeof _componentSearchPanel, NestedComponentMeta>(_componentSearchPanel, {
+  componentType: "option",
+});
 
 // owners:
 // DataGrid
@@ -2386,15 +2602,18 @@ type ISelectionProps = React.PropsWithChildren<{
   recursive?: boolean;
   selectByClick?: boolean;
 }>
-const _componentSelection = memo(
-  (props: ISelectionProps) => {
-    return React.createElement(NestedOption<ISelectionProps>, { ...props });
-  }
-);
+const _componentSelection = (props: ISelectionProps) => {
+  return React.createElement(NestedOption<ISelectionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "selection",
+    },
+  });
+};
 
-const Selection: typeof _componentSelection & IElementDescriptor = Object.assign(_componentSelection, {
-  OptionName: "selection",
-})
+const Selection = Object.assign<typeof _componentSelection, NestedComponentMeta>(_componentSelection, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -2410,15 +2629,18 @@ type IShowProps = React.PropsWithChildren<{
   to?: AnimationState;
   type?: "css" | "fade" | "fadeIn" | "fadeOut" | "pop" | "slide" | "slideIn" | "slideOut";
 }>
-const _componentShow = memo(
-  (props: IShowProps) => {
-    return React.createElement(NestedOption<IShowProps>, { ...props });
-  }
-);
+const _componentShow = (props: IShowProps) => {
+  return React.createElement(NestedOption<IShowProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "show",
+    },
+  });
+};
 
-const Show: typeof _componentShow & IElementDescriptor = Object.assign(_componentShow, {
-  OptionName: "show",
-})
+const Show = Object.assign<typeof _componentShow, NestedComponentMeta>(_componentShow, {
+  componentType: "option",
+});
 
 // owners:
 // DataGrid
@@ -2427,16 +2649,19 @@ type ISortByGroupSummaryInfoProps = React.PropsWithChildren<{
   sortOrder?: "asc" | "desc";
   summaryItem?: number | string;
 }>
-const _componentSortByGroupSummaryInfo = memo(
-  (props: ISortByGroupSummaryInfoProps) => {
-    return React.createElement(NestedOption<ISortByGroupSummaryInfoProps>, { ...props });
-  }
-);
+const _componentSortByGroupSummaryInfo = (props: ISortByGroupSummaryInfoProps) => {
+  return React.createElement(NestedOption<ISortByGroupSummaryInfoProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "sortByGroupSummaryInfo",
+      IsCollectionItem: true,
+    },
+  });
+};
 
-const SortByGroupSummaryInfo: typeof _componentSortByGroupSummaryInfo & IElementDescriptor = Object.assign(_componentSortByGroupSummaryInfo, {
-  OptionName: "sortByGroupSummaryInfo",
-  IsCollectionItem: true,
-})
+const SortByGroupSummaryInfo = Object.assign<typeof _componentSortByGroupSummaryInfo, NestedComponentMeta>(_componentSortByGroupSummaryInfo, {
+  componentType: "option",
+});
 
 // owners:
 // DataGrid
@@ -2447,15 +2672,18 @@ type ISortingProps = React.PropsWithChildren<{
   mode?: "single" | "multiple" | "none";
   showSortIndexes?: boolean;
 }>
-const _componentSorting = memo(
-  (props: ISortingProps) => {
-    return React.createElement(NestedOption<ISortingProps>, { ...props });
-  }
-);
+const _componentSorting = (props: ISortingProps) => {
+  return React.createElement(NestedOption<ISortingProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "sorting",
+    },
+  });
+};
 
-const Sorting: typeof _componentSorting & IElementDescriptor = Object.assign(_componentSorting, {
-  OptionName: "sorting",
-})
+const Sorting = Object.assign<typeof _componentSorting, NestedComponentMeta>(_componentSorting, {
+  componentType: "option",
+});
 
 // owners:
 // DataGrid
@@ -2467,15 +2695,18 @@ type IStateStoringProps = React.PropsWithChildren<{
   storageKey?: string;
   type?: "custom" | "localStorage" | "sessionStorage";
 }>
-const _componentStateStoring = memo(
-  (props: IStateStoringProps) => {
-    return React.createElement(NestedOption<IStateStoringProps>, { ...props });
-  }
-);
+const _componentStateStoring = (props: IStateStoringProps) => {
+  return React.createElement(NestedOption<IStateStoringProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "stateStoring",
+    },
+  });
+};
 
-const StateStoring: typeof _componentStateStoring & IElementDescriptor = Object.assign(_componentStateStoring, {
-  OptionName: "stateStoring",
-})
+const StateStoring = Object.assign<typeof _componentStateStoring, NestedComponentMeta>(_componentStateStoring, {
+  componentType: "option",
+});
 
 // owners:
 // FormItem
@@ -2488,19 +2719,22 @@ type IStringLengthRuleProps = React.PropsWithChildren<{
   trim?: boolean;
   type?: "required" | "numeric" | "range" | "stringLength" | "custom" | "compare" | "pattern" | "email" | "async";
 }>
-const _componentStringLengthRule = memo(
-  (props: IStringLengthRuleProps) => {
-    return React.createElement(NestedOption<IStringLengthRuleProps>, { ...props });
-  }
-);
+const _componentStringLengthRule = (props: IStringLengthRuleProps) => {
+  return React.createElement(NestedOption<IStringLengthRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "stringLength"
+      },
+    },
+  });
+};
 
-const StringLengthRule: typeof _componentStringLengthRule & IElementDescriptor = Object.assign(_componentStringLengthRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "stringLength"
-  },
-})
+const StringLengthRule = Object.assign<typeof _componentStringLengthRule, NestedComponentMeta>(_componentStringLengthRule, {
+  componentType: "option",
+});
 
 // owners:
 // DataGrid
@@ -2544,21 +2778,24 @@ type ISummaryProps = React.PropsWithChildren<{
     valueFormat?: LocalizationTypes.Format;
   }[];
 }>
-const _componentSummary = memo(
-  (props: ISummaryProps) => {
-    return React.createElement(NestedOption<ISummaryProps>, { ...props });
-  }
-);
+const _componentSummary = (props: ISummaryProps) => {
+  return React.createElement(NestedOption<ISummaryProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "summary",
+      ExpectedChildren: {
+        groupItem: { optionName: "groupItems", isCollectionItem: true },
+        summaryTexts: { optionName: "texts", isCollectionItem: false },
+        texts: { optionName: "texts", isCollectionItem: false },
+        totalItem: { optionName: "totalItems", isCollectionItem: true }
+      },
+    },
+  });
+};
 
-const Summary: typeof _componentSummary & IElementDescriptor = Object.assign(_componentSummary, {
-  OptionName: "summary",
-  ExpectedChildren: {
-    groupItem: { optionName: "groupItems", isCollectionItem: true },
-    summaryTexts: { optionName: "texts", isCollectionItem: false },
-    texts: { optionName: "texts", isCollectionItem: false },
-    totalItem: { optionName: "totalItems", isCollectionItem: true }
-  },
-})
+const Summary = Object.assign<typeof _componentSummary, NestedComponentMeta>(_componentSummary, {
+  componentType: "option",
+});
 
 // owners:
 // Summary
@@ -2573,15 +2810,18 @@ type ISummaryTextsProps = React.PropsWithChildren<{
   sum?: string;
   sumOtherColumn?: string;
 }>
-const _componentSummaryTexts = memo(
-  (props: ISummaryTextsProps) => {
-    return React.createElement(NestedOption<ISummaryTextsProps>, { ...props });
-  }
-);
+const _componentSummaryTexts = (props: ISummaryTextsProps) => {
+  return React.createElement(NestedOption<ISummaryTextsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "texts",
+    },
+  });
+};
 
-const SummaryTexts: typeof _componentSummaryTexts & IElementDescriptor = Object.assign(_componentSummaryTexts, {
-  OptionName: "texts",
-})
+const SummaryTexts = Object.assign<typeof _componentSummaryTexts, NestedComponentMeta>(_componentSummaryTexts, {
+  componentType: "option",
+});
 
 // owners:
 // Editing
@@ -2632,15 +2872,18 @@ type ITextsProps = React.PropsWithChildren<{
   emptyValue?: string;
   ok?: string;
 }>
-const _componentTexts = memo(
-  (props: ITextsProps) => {
-    return React.createElement(NestedOption<ITextsProps>, { ...props });
-  }
-);
+const _componentTexts = (props: ITextsProps) => {
+  return React.createElement(NestedOption<ITextsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "texts",
+    },
+  });
+};
 
-const Texts: typeof _componentTexts & IElementDescriptor = Object.assign(_componentTexts, {
-  OptionName: "texts",
-})
+const Texts = Object.assign<typeof _componentTexts, NestedComponentMeta>(_componentTexts, {
+  componentType: "option",
+});
 
 // owners:
 // Hide
@@ -2651,15 +2894,18 @@ type IToProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentTo = memo(
-  (props: IToProps) => {
-    return React.createElement(NestedOption<IToProps>, { ...props });
-  }
-);
+const _componentTo = (props: IToProps) => {
+  return React.createElement(NestedOption<IToProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "to",
+    },
+  });
+};
 
-const To: typeof _componentTo & IElementDescriptor = Object.assign(_componentTo, {
-  OptionName: "to",
-})
+const To = Object.assign<typeof _componentTo, NestedComponentMeta>(_componentTo, {
+  componentType: "option",
+});
 
 // owners:
 // DataGrid
@@ -2668,18 +2914,21 @@ type IToolbarProps = React.PropsWithChildren<{
   items?: Array<dxDataGridToolbarItem | "addRowButton" | "applyFilterButton" | "columnChooserButton" | "exportButton" | "groupPanel" | "revertButton" | "saveButton" | "searchPanel">;
   visible?: boolean;
 }>
-const _componentToolbar = memo(
-  (props: IToolbarProps) => {
-    return React.createElement(NestedOption<IToolbarProps>, { ...props });
-  }
-);
+const _componentToolbar = (props: IToolbarProps) => {
+  return React.createElement(NestedOption<IToolbarProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "toolbar",
+      ExpectedChildren: {
+        item: { optionName: "items", isCollectionItem: true }
+      },
+    },
+  });
+};
 
-const Toolbar: typeof _componentToolbar & IElementDescriptor = Object.assign(_componentToolbar, {
-  OptionName: "toolbar",
-  ExpectedChildren: {
-    item: { optionName: "items", isCollectionItem: true }
-  },
-})
+const Toolbar = Object.assign<typeof _componentToolbar, NestedComponentMeta>(_componentToolbar, {
+  componentType: "option",
+});
 
 // owners:
 // Popup
@@ -2702,25 +2951,28 @@ type IToolbarItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentToolbarItem = memo(
-  (props: IToolbarItemProps) => {
-    return React.createElement(NestedOption<IToolbarItemProps>, { ...props });
-  }
-);
-
-const ToolbarItem: typeof _componentToolbarItem & IElementDescriptor = Object.assign(_componentToolbarItem, {
-  OptionName: "toolbarItems",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "menuItemTemplate",
-    render: "menuItemRender",
-    component: "menuItemComponent"
-  }, {
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentToolbarItem = (props: IToolbarItemProps) => {
+  return React.createElement(NestedOption<IToolbarItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "toolbarItems",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "menuItemTemplate",
+        render: "menuItemRender",
+        component: "menuItemComponent"
+      }, {
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const ToolbarItem = Object.assign<typeof _componentToolbarItem, NestedComponentMeta>(_componentToolbarItem, {
+  componentType: "option",
+});
 
 // owners:
 // Summary
@@ -2736,19 +2988,22 @@ type ITotalItemProps = React.PropsWithChildren<{
   summaryType?: "avg" | "count" | "custom" | "max" | "min" | "sum";
   valueFormat?: LocalizationTypes.Format;
 }>
-const _componentTotalItem = memo(
-  (props: ITotalItemProps) => {
-    return React.createElement(NestedOption<ITotalItemProps>, { ...props });
-  }
-);
+const _componentTotalItem = (props: ITotalItemProps) => {
+  return React.createElement(NestedOption<ITotalItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "totalItems",
+      IsCollectionItem: true,
+      ExpectedChildren: {
+        valueFormat: { optionName: "valueFormat", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const TotalItem: typeof _componentTotalItem & IElementDescriptor = Object.assign(_componentTotalItem, {
-  OptionName: "totalItems",
-  IsCollectionItem: true,
-  ExpectedChildren: {
-    valueFormat: { optionName: "valueFormat", isCollectionItem: false }
-  },
-})
+const TotalItem = Object.assign<typeof _componentTotalItem, NestedComponentMeta>(_componentTotalItem, {
+  componentType: "option",
+});
 
 // owners:
 // FormItem
@@ -2766,19 +3021,22 @@ type IValidationRuleProps = React.PropsWithChildren<{
   comparisonType?: "!=" | "!==" | "<" | "<=" | "==" | "===" | ">" | ">=";
   pattern?: RegExp | string;
 }>
-const _componentValidationRule = memo(
-  (props: IValidationRuleProps) => {
-    return React.createElement(NestedOption<IValidationRuleProps>, { ...props });
-  }
-);
+const _componentValidationRule = (props: IValidationRuleProps) => {
+  return React.createElement(NestedOption<IValidationRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "required"
+      },
+    },
+  });
+};
 
-const ValidationRule: typeof _componentValidationRule & IElementDescriptor = Object.assign(_componentValidationRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "required"
-  },
-})
+const ValidationRule = Object.assign<typeof _componentValidationRule, NestedComponentMeta>(_componentValidationRule, {
+  componentType: "option",
+});
 
 // owners:
 // GroupItem
@@ -2791,15 +3049,18 @@ type IValueFormatProps = React.PropsWithChildren<{
   type?: "billions" | "currency" | "day" | "decimal" | "exponential" | "fixedPoint" | "largeNumber" | "longDate" | "longTime" | "millions" | "millisecond" | "month" | "monthAndDay" | "monthAndYear" | "percent" | "quarter" | "quarterAndYear" | "shortDate" | "shortTime" | "thousands" | "trillions" | "year" | "dayOfWeek" | "hour" | "longDateLongTime" | "minute" | "second" | "shortDateShortTime";
   useCurrencyAccountingStyle?: boolean;
 }>
-const _componentValueFormat = memo(
-  (props: IValueFormatProps) => {
-    return React.createElement(NestedOption<IValueFormatProps>, { ...props });
-  }
-);
+const _componentValueFormat = (props: IValueFormatProps) => {
+  return React.createElement(NestedOption<IValueFormatProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "valueFormat",
+    },
+  });
+};
 
-const ValueFormat: typeof _componentValueFormat & IElementDescriptor = Object.assign(_componentValueFormat, {
-  OptionName: "valueFormat",
-})
+const ValueFormat = Object.assign<typeof _componentValueFormat, NestedComponentMeta>(_componentValueFormat, {
+  componentType: "option",
+});
 
 export default DataGrid;
 export {
diff --git a/packages/devextreme-react/src/date-box.ts b/packages/devextreme-react/src/date-box.ts
index 51d88a336b60..1ded23d76b14 100644
--- a/packages/devextreme-react/src/date-box.ts
+++ b/packages/devextreme-react/src/date-box.ts
@@ -5,7 +5,7 @@ import dxDateBox, {
     Properties
 } from "devextreme/ui/date_box";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { ChangeEvent, ClosedEvent, ContentReadyEvent, CopyEvent, CutEvent, DisposingEvent, EnterKeyEvent, FocusInEvent, FocusOutEvent, InitializedEvent, InputEvent, KeyDownEvent, KeyUpEvent, OpenedEvent, PasteEvent, ValueChangedEvent } from "devextreme/ui/date_box";
@@ -119,19 +119,22 @@ type IAnimationProps = React.PropsWithChildren<{
   hide?: AnimationConfig;
   show?: AnimationConfig;
 }>
-const _componentAnimation = memo(
-  (props: IAnimationProps) => {
-    return React.createElement(NestedOption<IAnimationProps>, { ...props });
-  }
-);
-
-const Animation: typeof _componentAnimation & IElementDescriptor = Object.assign(_componentAnimation, {
-  OptionName: "animation",
-  ExpectedChildren: {
-    hide: { optionName: "hide", isCollectionItem: false },
-    show: { optionName: "show", isCollectionItem: false }
-  },
-})
+const _componentAnimation = (props: IAnimationProps) => {
+  return React.createElement(NestedOption<IAnimationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "animation",
+      ExpectedChildren: {
+        hide: { optionName: "hide", isCollectionItem: false },
+        show: { optionName: "show", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Animation = Object.assign<typeof _componentAnimation, NestedComponentMeta>(_componentAnimation, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -139,15 +142,18 @@ type IAtProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentAt = memo(
-  (props: IAtProps) => {
-    return React.createElement(NestedOption<IAtProps>, { ...props });
-  }
-);
+const _componentAt = (props: IAtProps) => {
+  return React.createElement(NestedOption<IAtProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "at",
+    },
+  });
+};
 
-const At: typeof _componentAt & IElementDescriptor = Object.assign(_componentAt, {
-  OptionName: "at",
-})
+const At = Object.assign<typeof _componentAt, NestedComponentMeta>(_componentAt, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -155,15 +161,18 @@ type IBoundaryOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentBoundaryOffset = memo(
-  (props: IBoundaryOffsetProps) => {
-    return React.createElement(NestedOption<IBoundaryOffsetProps>, { ...props });
-  }
-);
+const _componentBoundaryOffset = (props: IBoundaryOffsetProps) => {
+  return React.createElement(NestedOption<IBoundaryOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "boundaryOffset",
+    },
+  });
+};
 
-const BoundaryOffset: typeof _componentBoundaryOffset & IElementDescriptor = Object.assign(_componentBoundaryOffset, {
-  OptionName: "boundaryOffset",
-})
+const BoundaryOffset = Object.assign<typeof _componentBoundaryOffset, NestedComponentMeta>(_componentBoundaryOffset, {
+  componentType: "option",
+});
 
 // owners:
 // DateBox
@@ -172,19 +181,22 @@ type IButtonProps = React.PropsWithChildren<{
   name?: string;
   options?: dxButtonOptions;
 }>
-const _componentButton = memo(
-  (props: IButtonProps) => {
-    return React.createElement(NestedOption<IButtonProps>, { ...props });
-  }
-);
-
-const Button: typeof _componentButton & IElementDescriptor = Object.assign(_componentButton, {
-  OptionName: "buttons",
-  IsCollectionItem: true,
-  ExpectedChildren: {
-    options: { optionName: "options", isCollectionItem: false }
-  },
-})
+const _componentButton = (props: IButtonProps) => {
+  return React.createElement(NestedOption<IButtonProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "buttons",
+      IsCollectionItem: true,
+      ExpectedChildren: {
+        options: { optionName: "options", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Button = Object.assign<typeof _componentButton, NestedComponentMeta>(_componentButton, {
+  componentType: "option",
+});
 
 // owners:
 // DateBox
@@ -237,24 +249,27 @@ type ICalendarOptionsProps = React.PropsWithChildren<{
   cellRender?: (...params: any) => React.ReactNode;
   cellComponent?: React.ComponentType<any>;
 }>
-const _componentCalendarOptions = memo(
-  (props: ICalendarOptionsProps) => {
-    return React.createElement(NestedOption<ICalendarOptionsProps>, { ...props });
-  }
-);
-
-const CalendarOptions: typeof _componentCalendarOptions & IElementDescriptor = Object.assign(_componentCalendarOptions, {
-  OptionName: "calendarOptions",
-  DefaultsProps: {
-    defaultValue: "value",
-    defaultZoomLevel: "zoomLevel"
-  },
-  TemplateProps: [{
-    tmplOption: "cellTemplate",
-    render: "cellRender",
-    component: "cellComponent"
-  }],
-})
+const _componentCalendarOptions = (props: ICalendarOptionsProps) => {
+  return React.createElement(NestedOption<ICalendarOptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "calendarOptions",
+      DefaultsProps: {
+        defaultValue: "value",
+        defaultZoomLevel: "zoomLevel"
+      },
+      TemplateProps: [{
+        tmplOption: "cellTemplate",
+        render: "cellRender",
+        component: "cellComponent"
+      }],
+    },
+  });
+};
+
+const CalendarOptions = Object.assign<typeof _componentCalendarOptions, NestedComponentMeta>(_componentCalendarOptions, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -262,15 +277,18 @@ type ICollisionProps = React.PropsWithChildren<{
   x?: "fit" | "flip" | "flipfit" | "none";
   y?: "fit" | "flip" | "flipfit" | "none";
 }>
-const _componentCollision = memo(
-  (props: ICollisionProps) => {
-    return React.createElement(NestedOption<ICollisionProps>, { ...props });
-  }
-);
+const _componentCollision = (props: ICollisionProps) => {
+  return React.createElement(NestedOption<ICollisionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "collision",
+    },
+  });
+};
 
-const Collision: typeof _componentCollision & IElementDescriptor = Object.assign(_componentCollision, {
-  OptionName: "collision",
-})
+const Collision = Object.assign<typeof _componentCollision, NestedComponentMeta>(_componentCollision, {
+  componentType: "option",
+});
 
 // owners:
 // DateBox
@@ -282,15 +300,18 @@ type IDisplayFormatProps = React.PropsWithChildren<{
   type?: "billions" | "currency" | "day" | "decimal" | "exponential" | "fixedPoint" | "largeNumber" | "longDate" | "longTime" | "millions" | "millisecond" | "month" | "monthAndDay" | "monthAndYear" | "percent" | "quarter" | "quarterAndYear" | "shortDate" | "shortTime" | "thousands" | "trillions" | "year" | "dayOfWeek" | "hour" | "longDateLongTime" | "minute" | "second" | "shortDateShortTime";
   useCurrencyAccountingStyle?: boolean;
 }>
-const _componentDisplayFormat = memo(
-  (props: IDisplayFormatProps) => {
-    return React.createElement(NestedOption<IDisplayFormatProps>, { ...props });
-  }
-);
+const _componentDisplayFormat = (props: IDisplayFormatProps) => {
+  return React.createElement(NestedOption<IDisplayFormatProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "displayFormat",
+    },
+  });
+};
 
-const DisplayFormat: typeof _componentDisplayFormat & IElementDescriptor = Object.assign(_componentDisplayFormat, {
-  OptionName: "displayFormat",
-})
+const DisplayFormat = Object.assign<typeof _componentDisplayFormat, NestedComponentMeta>(_componentDisplayFormat, {
+  componentType: "option",
+});
 
 // owners:
 // DateBox
@@ -361,35 +382,38 @@ type IDropDownOptionsProps = React.PropsWithChildren<{
   titleRender?: (...params: any) => React.ReactNode;
   titleComponent?: React.ComponentType<any>;
 }>
-const _componentDropDownOptions = memo(
-  (props: IDropDownOptionsProps) => {
-    return React.createElement(NestedOption<IDropDownOptionsProps>, { ...props });
-  }
-);
-
-const DropDownOptions: typeof _componentDropDownOptions & IElementDescriptor = Object.assign(_componentDropDownOptions, {
-  OptionName: "dropDownOptions",
-  DefaultsProps: {
-    defaultHeight: "height",
-    defaultPosition: "position",
-    defaultVisible: "visible",
-    defaultWidth: "width"
-  },
-  ExpectedChildren: {
-    animation: { optionName: "animation", isCollectionItem: false },
-    position: { optionName: "position", isCollectionItem: false },
-    toolbarItem: { optionName: "toolbarItems", isCollectionItem: true }
-  },
-  TemplateProps: [{
-    tmplOption: "contentTemplate",
-    render: "contentRender",
-    component: "contentComponent"
-  }, {
-    tmplOption: "titleTemplate",
-    render: "titleRender",
-    component: "titleComponent"
-  }],
-})
+const _componentDropDownOptions = (props: IDropDownOptionsProps) => {
+  return React.createElement(NestedOption<IDropDownOptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "dropDownOptions",
+      DefaultsProps: {
+        defaultHeight: "height",
+        defaultPosition: "position",
+        defaultVisible: "visible",
+        defaultWidth: "width"
+      },
+      ExpectedChildren: {
+        animation: { optionName: "animation", isCollectionItem: false },
+        position: { optionName: "position", isCollectionItem: false },
+        toolbarItem: { optionName: "toolbarItems", isCollectionItem: true }
+      },
+      TemplateProps: [{
+        tmplOption: "contentTemplate",
+        render: "contentRender",
+        component: "contentComponent"
+      }, {
+        tmplOption: "titleTemplate",
+        render: "titleRender",
+        component: "titleComponent"
+      }],
+    },
+  });
+};
+
+const DropDownOptions = Object.assign<typeof _componentDropDownOptions, NestedComponentMeta>(_componentDropDownOptions, {
+  componentType: "option",
+});
 
 // owners:
 // Hide
@@ -400,18 +424,21 @@ type IFromProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentFrom = memo(
-  (props: IFromProps) => {
-    return React.createElement(NestedOption<IFromProps>, { ...props });
-  }
-);
-
-const From: typeof _componentFrom & IElementDescriptor = Object.assign(_componentFrom, {
-  OptionName: "from",
-  ExpectedChildren: {
-    position: { optionName: "position", isCollectionItem: false }
-  },
-})
+const _componentFrom = (props: IFromProps) => {
+  return React.createElement(NestedOption<IFromProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "from",
+      ExpectedChildren: {
+        position: { optionName: "position", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const From = Object.assign<typeof _componentFrom, NestedComponentMeta>(_componentFrom, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -427,19 +454,22 @@ type IHideProps = React.PropsWithChildren<{
   to?: AnimationState;
   type?: "css" | "fade" | "fadeIn" | "fadeOut" | "pop" | "slide" | "slideIn" | "slideOut";
 }>
-const _componentHide = memo(
-  (props: IHideProps) => {
-    return React.createElement(NestedOption<IHideProps>, { ...props });
-  }
-);
-
-const Hide: typeof _componentHide & IElementDescriptor = Object.assign(_componentHide, {
-  OptionName: "hide",
-  ExpectedChildren: {
-    from: { optionName: "from", isCollectionItem: false },
-    to: { optionName: "to", isCollectionItem: false }
-  },
-})
+const _componentHide = (props: IHideProps) => {
+  return React.createElement(NestedOption<IHideProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hide",
+      ExpectedChildren: {
+        from: { optionName: "from", isCollectionItem: false },
+        to: { optionName: "to", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Hide = Object.assign<typeof _componentHide, NestedComponentMeta>(_componentHide, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -447,15 +477,18 @@ type IMyProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentMy = memo(
-  (props: IMyProps) => {
-    return React.createElement(NestedOption<IMyProps>, { ...props });
-  }
-);
+const _componentMy = (props: IMyProps) => {
+  return React.createElement(NestedOption<IMyProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "my",
+    },
+  });
+};
 
-const My: typeof _componentMy & IElementDescriptor = Object.assign(_componentMy, {
-  OptionName: "my",
-})
+const My = Object.assign<typeof _componentMy, NestedComponentMeta>(_componentMy, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -463,15 +496,18 @@ type IOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentOffset = memo(
-  (props: IOffsetProps) => {
-    return React.createElement(NestedOption<IOffsetProps>, { ...props });
-  }
-);
+const _componentOffset = (props: IOffsetProps) => {
+  return React.createElement(NestedOption<IOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "offset",
+    },
+  });
+};
 
-const Offset: typeof _componentOffset & IElementDescriptor = Object.assign(_componentOffset, {
-  OptionName: "offset",
-})
+const Offset = Object.assign<typeof _componentOffset, NestedComponentMeta>(_componentOffset, {
+  componentType: "option",
+});
 
 // owners:
 // Button
@@ -504,20 +540,23 @@ type IOptionsProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentOptions = memo(
-  (props: IOptionsProps) => {
-    return React.createElement(NestedOption<IOptionsProps>, { ...props });
-  }
-);
-
-const Options: typeof _componentOptions & IElementDescriptor = Object.assign(_componentOptions, {
-  OptionName: "options",
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentOptions = (props: IOptionsProps) => {
+  return React.createElement(NestedOption<IOptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "options",
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const Options = Object.assign<typeof _componentOptions, NestedComponentMeta>(_componentOptions, {
+  componentType: "option",
+});
 
 // owners:
 // From
@@ -546,15 +585,18 @@ type IPositionProps = React.PropsWithChildren<{
     y?: number;
   };
 }>
-const _componentPosition = memo(
-  (props: IPositionProps) => {
-    return React.createElement(NestedOption<IPositionProps>, { ...props });
-  }
-);
+const _componentPosition = (props: IPositionProps) => {
+  return React.createElement(NestedOption<IPositionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "position",
+    },
+  });
+};
 
-const Position: typeof _componentPosition & IElementDescriptor = Object.assign(_componentPosition, {
-  OptionName: "position",
-})
+const Position = Object.assign<typeof _componentPosition, NestedComponentMeta>(_componentPosition, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -570,15 +612,18 @@ type IShowProps = React.PropsWithChildren<{
   to?: AnimationState;
   type?: "css" | "fade" | "fadeIn" | "fadeOut" | "pop" | "slide" | "slideIn" | "slideOut";
 }>
-const _componentShow = memo(
-  (props: IShowProps) => {
-    return React.createElement(NestedOption<IShowProps>, { ...props });
-  }
-);
+const _componentShow = (props: IShowProps) => {
+  return React.createElement(NestedOption<IShowProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "show",
+    },
+  });
+};
 
-const Show: typeof _componentShow & IElementDescriptor = Object.assign(_componentShow, {
-  OptionName: "show",
-})
+const Show = Object.assign<typeof _componentShow, NestedComponentMeta>(_componentShow, {
+  componentType: "option",
+});
 
 // owners:
 // Hide
@@ -589,15 +634,18 @@ type IToProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentTo = memo(
-  (props: IToProps) => {
-    return React.createElement(NestedOption<IToProps>, { ...props });
-  }
-);
+const _componentTo = (props: IToProps) => {
+  return React.createElement(NestedOption<IToProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "to",
+    },
+  });
+};
 
-const To: typeof _componentTo & IElementDescriptor = Object.assign(_componentTo, {
-  OptionName: "to",
-})
+const To = Object.assign<typeof _componentTo, NestedComponentMeta>(_componentTo, {
+  componentType: "option",
+});
 
 // owners:
 // DropDownOptions
@@ -620,25 +668,28 @@ type IToolbarItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentToolbarItem = memo(
-  (props: IToolbarItemProps) => {
-    return React.createElement(NestedOption<IToolbarItemProps>, { ...props });
-  }
-);
-
-const ToolbarItem: typeof _componentToolbarItem & IElementDescriptor = Object.assign(_componentToolbarItem, {
-  OptionName: "toolbarItems",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "menuItemTemplate",
-    render: "menuItemRender",
-    component: "menuItemComponent"
-  }, {
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentToolbarItem = (props: IToolbarItemProps) => {
+  return React.createElement(NestedOption<IToolbarItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "toolbarItems",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "menuItemTemplate",
+        render: "menuItemRender",
+        component: "menuItemComponent"
+      }, {
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const ToolbarItem = Object.assign<typeof _componentToolbarItem, NestedComponentMeta>(_componentToolbarItem, {
+  componentType: "option",
+});
 
 export default DateBox;
 export {
diff --git a/packages/devextreme-react/src/date-range-box.ts b/packages/devextreme-react/src/date-range-box.ts
index b834cdffc068..585fc63742b7 100644
--- a/packages/devextreme-react/src/date-range-box.ts
+++ b/packages/devextreme-react/src/date-range-box.ts
@@ -5,7 +5,7 @@ import dxDateRangeBox, {
     Properties
 } from "devextreme/ui/date_range_box";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { ChangeEvent, ClosedEvent, ContentReadyEvent, CopyEvent, CutEvent, DisposingEvent, EnterKeyEvent, FocusInEvent, FocusOutEvent, InitializedEvent, InputEvent, KeyDownEvent, KeyUpEvent, OpenedEvent, PasteEvent, ValueChangedEvent } from "devextreme/ui/date_range_box";
@@ -124,19 +124,22 @@ type IAnimationProps = React.PropsWithChildren<{
   hide?: AnimationConfig;
   show?: AnimationConfig;
 }>
-const _componentAnimation = memo(
-  (props: IAnimationProps) => {
-    return React.createElement(NestedOption<IAnimationProps>, { ...props });
-  }
-);
-
-const Animation: typeof _componentAnimation & IElementDescriptor = Object.assign(_componentAnimation, {
-  OptionName: "animation",
-  ExpectedChildren: {
-    hide: { optionName: "hide", isCollectionItem: false },
-    show: { optionName: "show", isCollectionItem: false }
-  },
-})
+const _componentAnimation = (props: IAnimationProps) => {
+  return React.createElement(NestedOption<IAnimationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "animation",
+      ExpectedChildren: {
+        hide: { optionName: "hide", isCollectionItem: false },
+        show: { optionName: "show", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Animation = Object.assign<typeof _componentAnimation, NestedComponentMeta>(_componentAnimation, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -144,15 +147,18 @@ type IAtProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentAt = memo(
-  (props: IAtProps) => {
-    return React.createElement(NestedOption<IAtProps>, { ...props });
-  }
-);
+const _componentAt = (props: IAtProps) => {
+  return React.createElement(NestedOption<IAtProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "at",
+    },
+  });
+};
 
-const At: typeof _componentAt & IElementDescriptor = Object.assign(_componentAt, {
-  OptionName: "at",
-})
+const At = Object.assign<typeof _componentAt, NestedComponentMeta>(_componentAt, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -160,15 +166,18 @@ type IBoundaryOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentBoundaryOffset = memo(
-  (props: IBoundaryOffsetProps) => {
-    return React.createElement(NestedOption<IBoundaryOffsetProps>, { ...props });
-  }
-);
+const _componentBoundaryOffset = (props: IBoundaryOffsetProps) => {
+  return React.createElement(NestedOption<IBoundaryOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "boundaryOffset",
+    },
+  });
+};
 
-const BoundaryOffset: typeof _componentBoundaryOffset & IElementDescriptor = Object.assign(_componentBoundaryOffset, {
-  OptionName: "boundaryOffset",
-})
+const BoundaryOffset = Object.assign<typeof _componentBoundaryOffset, NestedComponentMeta>(_componentBoundaryOffset, {
+  componentType: "option",
+});
 
 // owners:
 // DateRangeBox
@@ -177,19 +186,22 @@ type IButtonProps = React.PropsWithChildren<{
   name?: string;
   options?: dxButtonOptions;
 }>
-const _componentButton = memo(
-  (props: IButtonProps) => {
-    return React.createElement(NestedOption<IButtonProps>, { ...props });
-  }
-);
-
-const Button: typeof _componentButton & IElementDescriptor = Object.assign(_componentButton, {
-  OptionName: "buttons",
-  IsCollectionItem: true,
-  ExpectedChildren: {
-    options: { optionName: "options", isCollectionItem: false }
-  },
-})
+const _componentButton = (props: IButtonProps) => {
+  return React.createElement(NestedOption<IButtonProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "buttons",
+      IsCollectionItem: true,
+      ExpectedChildren: {
+        options: { optionName: "options", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Button = Object.assign<typeof _componentButton, NestedComponentMeta>(_componentButton, {
+  componentType: "option",
+});
 
 // owners:
 // DateRangeBox
@@ -242,24 +254,27 @@ type ICalendarOptionsProps = React.PropsWithChildren<{
   cellRender?: (...params: any) => React.ReactNode;
   cellComponent?: React.ComponentType<any>;
 }>
-const _componentCalendarOptions = memo(
-  (props: ICalendarOptionsProps) => {
-    return React.createElement(NestedOption<ICalendarOptionsProps>, { ...props });
-  }
-);
-
-const CalendarOptions: typeof _componentCalendarOptions & IElementDescriptor = Object.assign(_componentCalendarOptions, {
-  OptionName: "calendarOptions",
-  DefaultsProps: {
-    defaultValue: "value",
-    defaultZoomLevel: "zoomLevel"
-  },
-  TemplateProps: [{
-    tmplOption: "cellTemplate",
-    render: "cellRender",
-    component: "cellComponent"
-  }],
-})
+const _componentCalendarOptions = (props: ICalendarOptionsProps) => {
+  return React.createElement(NestedOption<ICalendarOptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "calendarOptions",
+      DefaultsProps: {
+        defaultValue: "value",
+        defaultZoomLevel: "zoomLevel"
+      },
+      TemplateProps: [{
+        tmplOption: "cellTemplate",
+        render: "cellRender",
+        component: "cellComponent"
+      }],
+    },
+  });
+};
+
+const CalendarOptions = Object.assign<typeof _componentCalendarOptions, NestedComponentMeta>(_componentCalendarOptions, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -267,15 +282,18 @@ type ICollisionProps = React.PropsWithChildren<{
   x?: "fit" | "flip" | "flipfit" | "none";
   y?: "fit" | "flip" | "flipfit" | "none";
 }>
-const _componentCollision = memo(
-  (props: ICollisionProps) => {
-    return React.createElement(NestedOption<ICollisionProps>, { ...props });
-  }
-);
+const _componentCollision = (props: ICollisionProps) => {
+  return React.createElement(NestedOption<ICollisionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "collision",
+    },
+  });
+};
 
-const Collision: typeof _componentCollision & IElementDescriptor = Object.assign(_componentCollision, {
-  OptionName: "collision",
-})
+const Collision = Object.assign<typeof _componentCollision, NestedComponentMeta>(_componentCollision, {
+  componentType: "option",
+});
 
 // owners:
 // DateRangeBox
@@ -287,15 +305,18 @@ type IDisplayFormatProps = React.PropsWithChildren<{
   type?: "billions" | "currency" | "day" | "decimal" | "exponential" | "fixedPoint" | "largeNumber" | "longDate" | "longTime" | "millions" | "millisecond" | "month" | "monthAndDay" | "monthAndYear" | "percent" | "quarter" | "quarterAndYear" | "shortDate" | "shortTime" | "thousands" | "trillions" | "year" | "dayOfWeek" | "hour" | "longDateLongTime" | "minute" | "second" | "shortDateShortTime";
   useCurrencyAccountingStyle?: boolean;
 }>
-const _componentDisplayFormat = memo(
-  (props: IDisplayFormatProps) => {
-    return React.createElement(NestedOption<IDisplayFormatProps>, { ...props });
-  }
-);
+const _componentDisplayFormat = (props: IDisplayFormatProps) => {
+  return React.createElement(NestedOption<IDisplayFormatProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "displayFormat",
+    },
+  });
+};
 
-const DisplayFormat: typeof _componentDisplayFormat & IElementDescriptor = Object.assign(_componentDisplayFormat, {
-  OptionName: "displayFormat",
-})
+const DisplayFormat = Object.assign<typeof _componentDisplayFormat, NestedComponentMeta>(_componentDisplayFormat, {
+  componentType: "option",
+});
 
 // owners:
 // DateRangeBox
@@ -366,35 +387,38 @@ type IDropDownOptionsProps = React.PropsWithChildren<{
   titleRender?: (...params: any) => React.ReactNode;
   titleComponent?: React.ComponentType<any>;
 }>
-const _componentDropDownOptions = memo(
-  (props: IDropDownOptionsProps) => {
-    return React.createElement(NestedOption<IDropDownOptionsProps>, { ...props });
-  }
-);
-
-const DropDownOptions: typeof _componentDropDownOptions & IElementDescriptor = Object.assign(_componentDropDownOptions, {
-  OptionName: "dropDownOptions",
-  DefaultsProps: {
-    defaultHeight: "height",
-    defaultPosition: "position",
-    defaultVisible: "visible",
-    defaultWidth: "width"
-  },
-  ExpectedChildren: {
-    animation: { optionName: "animation", isCollectionItem: false },
-    position: { optionName: "position", isCollectionItem: false },
-    toolbarItem: { optionName: "toolbarItems", isCollectionItem: true }
-  },
-  TemplateProps: [{
-    tmplOption: "contentTemplate",
-    render: "contentRender",
-    component: "contentComponent"
-  }, {
-    tmplOption: "titleTemplate",
-    render: "titleRender",
-    component: "titleComponent"
-  }],
-})
+const _componentDropDownOptions = (props: IDropDownOptionsProps) => {
+  return React.createElement(NestedOption<IDropDownOptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "dropDownOptions",
+      DefaultsProps: {
+        defaultHeight: "height",
+        defaultPosition: "position",
+        defaultVisible: "visible",
+        defaultWidth: "width"
+      },
+      ExpectedChildren: {
+        animation: { optionName: "animation", isCollectionItem: false },
+        position: { optionName: "position", isCollectionItem: false },
+        toolbarItem: { optionName: "toolbarItems", isCollectionItem: true }
+      },
+      TemplateProps: [{
+        tmplOption: "contentTemplate",
+        render: "contentRender",
+        component: "contentComponent"
+      }, {
+        tmplOption: "titleTemplate",
+        render: "titleRender",
+        component: "titleComponent"
+      }],
+    },
+  });
+};
+
+const DropDownOptions = Object.assign<typeof _componentDropDownOptions, NestedComponentMeta>(_componentDropDownOptions, {
+  componentType: "option",
+});
 
 // owners:
 // Hide
@@ -405,18 +429,21 @@ type IFromProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentFrom = memo(
-  (props: IFromProps) => {
-    return React.createElement(NestedOption<IFromProps>, { ...props });
-  }
-);
-
-const From: typeof _componentFrom & IElementDescriptor = Object.assign(_componentFrom, {
-  OptionName: "from",
-  ExpectedChildren: {
-    position: { optionName: "position", isCollectionItem: false }
-  },
-})
+const _componentFrom = (props: IFromProps) => {
+  return React.createElement(NestedOption<IFromProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "from",
+      ExpectedChildren: {
+        position: { optionName: "position", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const From = Object.assign<typeof _componentFrom, NestedComponentMeta>(_componentFrom, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -432,19 +459,22 @@ type IHideProps = React.PropsWithChildren<{
   to?: AnimationState;
   type?: "css" | "fade" | "fadeIn" | "fadeOut" | "pop" | "slide" | "slideIn" | "slideOut";
 }>
-const _componentHide = memo(
-  (props: IHideProps) => {
-    return React.createElement(NestedOption<IHideProps>, { ...props });
-  }
-);
-
-const Hide: typeof _componentHide & IElementDescriptor = Object.assign(_componentHide, {
-  OptionName: "hide",
-  ExpectedChildren: {
-    from: { optionName: "from", isCollectionItem: false },
-    to: { optionName: "to", isCollectionItem: false }
-  },
-})
+const _componentHide = (props: IHideProps) => {
+  return React.createElement(NestedOption<IHideProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hide",
+      ExpectedChildren: {
+        from: { optionName: "from", isCollectionItem: false },
+        to: { optionName: "to", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Hide = Object.assign<typeof _componentHide, NestedComponentMeta>(_componentHide, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -452,15 +482,18 @@ type IMyProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentMy = memo(
-  (props: IMyProps) => {
-    return React.createElement(NestedOption<IMyProps>, { ...props });
-  }
-);
+const _componentMy = (props: IMyProps) => {
+  return React.createElement(NestedOption<IMyProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "my",
+    },
+  });
+};
 
-const My: typeof _componentMy & IElementDescriptor = Object.assign(_componentMy, {
-  OptionName: "my",
-})
+const My = Object.assign<typeof _componentMy, NestedComponentMeta>(_componentMy, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -468,15 +501,18 @@ type IOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentOffset = memo(
-  (props: IOffsetProps) => {
-    return React.createElement(NestedOption<IOffsetProps>, { ...props });
-  }
-);
+const _componentOffset = (props: IOffsetProps) => {
+  return React.createElement(NestedOption<IOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "offset",
+    },
+  });
+};
 
-const Offset: typeof _componentOffset & IElementDescriptor = Object.assign(_componentOffset, {
-  OptionName: "offset",
-})
+const Offset = Object.assign<typeof _componentOffset, NestedComponentMeta>(_componentOffset, {
+  componentType: "option",
+});
 
 // owners:
 // Button
@@ -509,20 +545,23 @@ type IOptionsProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentOptions = memo(
-  (props: IOptionsProps) => {
-    return React.createElement(NestedOption<IOptionsProps>, { ...props });
-  }
-);
-
-const Options: typeof _componentOptions & IElementDescriptor = Object.assign(_componentOptions, {
-  OptionName: "options",
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentOptions = (props: IOptionsProps) => {
+  return React.createElement(NestedOption<IOptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "options",
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const Options = Object.assign<typeof _componentOptions, NestedComponentMeta>(_componentOptions, {
+  componentType: "option",
+});
 
 // owners:
 // From
@@ -551,15 +590,18 @@ type IPositionProps = React.PropsWithChildren<{
     y?: number;
   };
 }>
-const _componentPosition = memo(
-  (props: IPositionProps) => {
-    return React.createElement(NestedOption<IPositionProps>, { ...props });
-  }
-);
+const _componentPosition = (props: IPositionProps) => {
+  return React.createElement(NestedOption<IPositionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "position",
+    },
+  });
+};
 
-const Position: typeof _componentPosition & IElementDescriptor = Object.assign(_componentPosition, {
-  OptionName: "position",
-})
+const Position = Object.assign<typeof _componentPosition, NestedComponentMeta>(_componentPosition, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -575,15 +617,18 @@ type IShowProps = React.PropsWithChildren<{
   to?: AnimationState;
   type?: "css" | "fade" | "fadeIn" | "fadeOut" | "pop" | "slide" | "slideIn" | "slideOut";
 }>
-const _componentShow = memo(
-  (props: IShowProps) => {
-    return React.createElement(NestedOption<IShowProps>, { ...props });
-  }
-);
+const _componentShow = (props: IShowProps) => {
+  return React.createElement(NestedOption<IShowProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "show",
+    },
+  });
+};
 
-const Show: typeof _componentShow & IElementDescriptor = Object.assign(_componentShow, {
-  OptionName: "show",
-})
+const Show = Object.assign<typeof _componentShow, NestedComponentMeta>(_componentShow, {
+  componentType: "option",
+});
 
 // owners:
 // Hide
@@ -594,15 +639,18 @@ type IToProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentTo = memo(
-  (props: IToProps) => {
-    return React.createElement(NestedOption<IToProps>, { ...props });
-  }
-);
+const _componentTo = (props: IToProps) => {
+  return React.createElement(NestedOption<IToProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "to",
+    },
+  });
+};
 
-const To: typeof _componentTo & IElementDescriptor = Object.assign(_componentTo, {
-  OptionName: "to",
-})
+const To = Object.assign<typeof _componentTo, NestedComponentMeta>(_componentTo, {
+  componentType: "option",
+});
 
 // owners:
 // DropDownOptions
@@ -625,25 +673,28 @@ type IToolbarItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentToolbarItem = memo(
-  (props: IToolbarItemProps) => {
-    return React.createElement(NestedOption<IToolbarItemProps>, { ...props });
-  }
-);
-
-const ToolbarItem: typeof _componentToolbarItem & IElementDescriptor = Object.assign(_componentToolbarItem, {
-  OptionName: "toolbarItems",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "menuItemTemplate",
-    render: "menuItemRender",
-    component: "menuItemComponent"
-  }, {
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentToolbarItem = (props: IToolbarItemProps) => {
+  return React.createElement(NestedOption<IToolbarItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "toolbarItems",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "menuItemTemplate",
+        render: "menuItemRender",
+        component: "menuItemComponent"
+      }, {
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const ToolbarItem = Object.assign<typeof _componentToolbarItem, NestedComponentMeta>(_componentToolbarItem, {
+  componentType: "option",
+});
 
 export default DateRangeBox;
 export {
diff --git a/packages/devextreme-react/src/defer-rendering.ts b/packages/devextreme-react/src/defer-rendering.ts
index 937d57dcea5d..80c13bf11bd7 100644
--- a/packages/devextreme-react/src/defer-rendering.ts
+++ b/packages/devextreme-react/src/defer-rendering.ts
@@ -5,7 +5,7 @@ import dxDeferRendering, {
     Properties
 } from "devextreme/ui/defer_rendering";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { ContentReadyEvent, DisposingEvent, InitializedEvent, RenderedEvent, ShownEvent } from "devextreme/ui/defer_rendering";
@@ -77,19 +77,22 @@ type IAnimationProps = React.PropsWithChildren<{
   to?: AnimationState;
   type?: "css" | "fade" | "fadeIn" | "fadeOut" | "pop" | "slide" | "slideIn" | "slideOut";
 }>
-const _componentAnimation = memo(
-  (props: IAnimationProps) => {
-    return React.createElement(NestedOption<IAnimationProps>, { ...props });
-  }
-);
-
-const Animation: typeof _componentAnimation & IElementDescriptor = Object.assign(_componentAnimation, {
-  OptionName: "animation",
-  ExpectedChildren: {
-    from: { optionName: "from", isCollectionItem: false },
-    to: { optionName: "to", isCollectionItem: false }
-  },
-})
+const _componentAnimation = (props: IAnimationProps) => {
+  return React.createElement(NestedOption<IAnimationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "animation",
+      ExpectedChildren: {
+        from: { optionName: "from", isCollectionItem: false },
+        to: { optionName: "to", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Animation = Object.assign<typeof _componentAnimation, NestedComponentMeta>(_componentAnimation, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -97,15 +100,18 @@ type IAtProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentAt = memo(
-  (props: IAtProps) => {
-    return React.createElement(NestedOption<IAtProps>, { ...props });
-  }
-);
+const _componentAt = (props: IAtProps) => {
+  return React.createElement(NestedOption<IAtProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "at",
+    },
+  });
+};
 
-const At: typeof _componentAt & IElementDescriptor = Object.assign(_componentAt, {
-  OptionName: "at",
-})
+const At = Object.assign<typeof _componentAt, NestedComponentMeta>(_componentAt, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -113,15 +119,18 @@ type IBoundaryOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentBoundaryOffset = memo(
-  (props: IBoundaryOffsetProps) => {
-    return React.createElement(NestedOption<IBoundaryOffsetProps>, { ...props });
-  }
-);
+const _componentBoundaryOffset = (props: IBoundaryOffsetProps) => {
+  return React.createElement(NestedOption<IBoundaryOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "boundaryOffset",
+    },
+  });
+};
 
-const BoundaryOffset: typeof _componentBoundaryOffset & IElementDescriptor = Object.assign(_componentBoundaryOffset, {
-  OptionName: "boundaryOffset",
-})
+const BoundaryOffset = Object.assign<typeof _componentBoundaryOffset, NestedComponentMeta>(_componentBoundaryOffset, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -129,15 +138,18 @@ type ICollisionProps = React.PropsWithChildren<{
   x?: "fit" | "flip" | "flipfit" | "none";
   y?: "fit" | "flip" | "flipfit" | "none";
 }>
-const _componentCollision = memo(
-  (props: ICollisionProps) => {
-    return React.createElement(NestedOption<ICollisionProps>, { ...props });
-  }
-);
+const _componentCollision = (props: ICollisionProps) => {
+  return React.createElement(NestedOption<ICollisionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "collision",
+    },
+  });
+};
 
-const Collision: typeof _componentCollision & IElementDescriptor = Object.assign(_componentCollision, {
-  OptionName: "collision",
-})
+const Collision = Object.assign<typeof _componentCollision, NestedComponentMeta>(_componentCollision, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -148,18 +160,21 @@ type IFromProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentFrom = memo(
-  (props: IFromProps) => {
-    return React.createElement(NestedOption<IFromProps>, { ...props });
-  }
-);
-
-const From: typeof _componentFrom & IElementDescriptor = Object.assign(_componentFrom, {
-  OptionName: "from",
-  ExpectedChildren: {
-    position: { optionName: "position", isCollectionItem: false }
-  },
-})
+const _componentFrom = (props: IFromProps) => {
+  return React.createElement(NestedOption<IFromProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "from",
+      ExpectedChildren: {
+        position: { optionName: "position", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const From = Object.assign<typeof _componentFrom, NestedComponentMeta>(_componentFrom, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -167,15 +182,18 @@ type IMyProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentMy = memo(
-  (props: IMyProps) => {
-    return React.createElement(NestedOption<IMyProps>, { ...props });
-  }
-);
+const _componentMy = (props: IMyProps) => {
+  return React.createElement(NestedOption<IMyProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "my",
+    },
+  });
+};
 
-const My: typeof _componentMy & IElementDescriptor = Object.assign(_componentMy, {
-  OptionName: "my",
-})
+const My = Object.assign<typeof _componentMy, NestedComponentMeta>(_componentMy, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -183,15 +201,18 @@ type IOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentOffset = memo(
-  (props: IOffsetProps) => {
-    return React.createElement(NestedOption<IOffsetProps>, { ...props });
-  }
-);
+const _componentOffset = (props: IOffsetProps) => {
+  return React.createElement(NestedOption<IOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "offset",
+    },
+  });
+};
 
-const Offset: typeof _componentOffset & IElementDescriptor = Object.assign(_componentOffset, {
-  OptionName: "offset",
-})
+const Offset = Object.assign<typeof _componentOffset, NestedComponentMeta>(_componentOffset, {
+  componentType: "option",
+});
 
 // owners:
 // From
@@ -219,22 +240,25 @@ type IPositionProps = React.PropsWithChildren<{
     y?: number;
   };
 }>
-const _componentPosition = memo(
-  (props: IPositionProps) => {
-    return React.createElement(NestedOption<IPositionProps>, { ...props });
-  }
-);
-
-const Position: typeof _componentPosition & IElementDescriptor = Object.assign(_componentPosition, {
-  OptionName: "position",
-  ExpectedChildren: {
-    at: { optionName: "at", isCollectionItem: false },
-    boundaryOffset: { optionName: "boundaryOffset", isCollectionItem: false },
-    collision: { optionName: "collision", isCollectionItem: false },
-    my: { optionName: "my", isCollectionItem: false },
-    offset: { optionName: "offset", isCollectionItem: false }
-  },
-})
+const _componentPosition = (props: IPositionProps) => {
+  return React.createElement(NestedOption<IPositionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "position",
+      ExpectedChildren: {
+        at: { optionName: "at", isCollectionItem: false },
+        boundaryOffset: { optionName: "boundaryOffset", isCollectionItem: false },
+        collision: { optionName: "collision", isCollectionItem: false },
+        my: { optionName: "my", isCollectionItem: false },
+        offset: { optionName: "offset", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Position = Object.assign<typeof _componentPosition, NestedComponentMeta>(_componentPosition, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -245,15 +269,18 @@ type IToProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentTo = memo(
-  (props: IToProps) => {
-    return React.createElement(NestedOption<IToProps>, { ...props });
-  }
-);
-
-const To: typeof _componentTo & IElementDescriptor = Object.assign(_componentTo, {
-  OptionName: "to",
-})
+const _componentTo = (props: IToProps) => {
+  return React.createElement(NestedOption<IToProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "to",
+    },
+  });
+};
+
+const To = Object.assign<typeof _componentTo, NestedComponentMeta>(_componentTo, {
+  componentType: "option",
+});
 
 export default DeferRendering;
 export {
diff --git a/packages/devextreme-react/src/diagram.ts b/packages/devextreme-react/src/diagram.ts
index adf42efc6e7d..ffa0e22d2b98 100644
--- a/packages/devextreme-react/src/diagram.ts
+++ b/packages/devextreme-react/src/diagram.ts
@@ -5,7 +5,7 @@ import dxDiagram, {
     Properties
 } from "devextreme/ui/diagram";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { ContentReadyEvent, CustomCommandEvent, DisposingEvent, InitializedEvent, ItemClickEvent, ItemDblClickEvent, RequestEditOperationEvent, RequestLayoutUpdateEvent, CustomCommand, dxDiagramShape } from "devextreme/ui/diagram";
@@ -125,15 +125,18 @@ type IAutoLayoutProps = React.PropsWithChildren<{
   orientation?: "horizontal" | "vertical";
   type?: "auto" | "off" | "tree" | "layered";
 }>
-const _componentAutoLayout = memo(
-  (props: IAutoLayoutProps) => {
-    return React.createElement(NestedOption<IAutoLayoutProps>, { ...props });
-  }
-);
+const _componentAutoLayout = (props: IAutoLayoutProps) => {
+  return React.createElement(NestedOption<IAutoLayoutProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "autoLayout",
+    },
+  });
+};
 
-const AutoLayout: typeof _componentAutoLayout & IElementDescriptor = Object.assign(_componentAutoLayout, {
-  OptionName: "autoLayout",
-})
+const AutoLayout = Object.assign<typeof _componentAutoLayout, NestedComponentMeta>(_componentAutoLayout, {
+  componentType: "option",
+});
 
 // owners:
 // ContextMenu
@@ -149,16 +152,19 @@ type ICommandProps = React.PropsWithChildren<{
   name?: "separator" | "exportSvg" | "exportPng" | "exportJpg" | "undo" | "redo" | "cut" | "copy" | "paste" | "selectAll" | "delete" | "fontName" | "fontSize" | "bold" | "italic" | "underline" | "fontColor" | "lineStyle" | "lineWidth" | "lineColor" | "fillColor" | "textAlignLeft" | "textAlignCenter" | "textAlignRight" | "lock" | "unlock" | "sendToBack" | "bringToFront" | "insertShapeImage" | "editShapeImage" | "deleteShapeImage" | "connectorLineType" | "connectorLineStart" | "connectorLineEnd" | "layoutTreeTopToBottom" | "layoutTreeBottomToTop" | "layoutTreeLeftToRight" | "layoutTreeRightToLeft" | "layoutLayeredTopToBottom" | "layoutLayeredBottomToTop" | "layoutLayeredLeftToRight" | "layoutLayeredRightToLeft" | "fullScreen" | "zoomLevel" | "showGrid" | "snapToGrid" | "gridSize" | "units" | "pageSize" | "pageOrientation" | "pageColor" | "simpleView" | "toolbox";
   text?: string;
 }>
-const _componentCommand = memo(
-  (props: ICommandProps) => {
-    return React.createElement(NestedOption<ICommandProps>, { ...props });
-  }
-);
+const _componentCommand = (props: ICommandProps) => {
+  return React.createElement(NestedOption<ICommandProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "commands",
+      IsCollectionItem: true,
+    },
+  });
+};
 
-const Command: typeof _componentCommand & IElementDescriptor = Object.assign(_componentCommand, {
-  OptionName: "commands",
-  IsCollectionItem: true,
-})
+const Command = Object.assign<typeof _componentCommand, NestedComponentMeta>(_componentCommand, {
+  componentType: "option",
+});
 
 // owners:
 // Command
@@ -169,16 +175,19 @@ type ICommandItemProps = React.PropsWithChildren<{
   name?: "separator" | "exportSvg" | "exportPng" | "exportJpg" | "undo" | "redo" | "cut" | "copy" | "paste" | "selectAll" | "delete" | "fontName" | "fontSize" | "bold" | "italic" | "underline" | "fontColor" | "lineStyle" | "lineWidth" | "lineColor" | "fillColor" | "textAlignLeft" | "textAlignCenter" | "textAlignRight" | "lock" | "unlock" | "sendToBack" | "bringToFront" | "insertShapeImage" | "editShapeImage" | "deleteShapeImage" | "connectorLineType" | "connectorLineStart" | "connectorLineEnd" | "layoutTreeTopToBottom" | "layoutTreeBottomToTop" | "layoutTreeLeftToRight" | "layoutTreeRightToLeft" | "layoutLayeredTopToBottom" | "layoutLayeredBottomToTop" | "layoutLayeredLeftToRight" | "layoutLayeredRightToLeft" | "fullScreen" | "zoomLevel" | "showGrid" | "snapToGrid" | "gridSize" | "units" | "pageSize" | "pageOrientation" | "pageColor" | "simpleView" | "toolbox";
   text?: string;
 }>
-const _componentCommandItem = memo(
-  (props: ICommandItemProps) => {
-    return React.createElement(NestedOption<ICommandItemProps>, { ...props });
-  }
-);
+const _componentCommandItem = (props: ICommandItemProps) => {
+  return React.createElement(NestedOption<ICommandItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+    },
+  });
+};
 
-const CommandItem: typeof _componentCommandItem & IElementDescriptor = Object.assign(_componentCommandItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-})
+const CommandItem = Object.assign<typeof _componentCommandItem, NestedComponentMeta>(_componentCommandItem, {
+  componentType: "option",
+});
 
 // owners:
 // CustomShape
@@ -186,16 +195,19 @@ type IConnectionPointProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentConnectionPoint = memo(
-  (props: IConnectionPointProps) => {
-    return React.createElement(NestedOption<IConnectionPointProps>, { ...props });
-  }
-);
+const _componentConnectionPoint = (props: IConnectionPointProps) => {
+  return React.createElement(NestedOption<IConnectionPointProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "connectionPoints",
+      IsCollectionItem: true,
+    },
+  });
+};
 
-const ConnectionPoint: typeof _componentConnectionPoint & IElementDescriptor = Object.assign(_componentConnectionPoint, {
-  OptionName: "connectionPoints",
-  IsCollectionItem: true,
-})
+const ConnectionPoint = Object.assign<typeof _componentConnectionPoint, NestedComponentMeta>(_componentConnectionPoint, {
+  componentType: "option",
+});
 
 // owners:
 // Diagram
@@ -203,18 +215,21 @@ type IContextMenuProps = React.PropsWithChildren<{
   commands?: Array<CustomCommand | "separator" | "exportSvg" | "exportPng" | "exportJpg" | "undo" | "redo" | "cut" | "copy" | "paste" | "selectAll" | "delete" | "fontName" | "fontSize" | "bold" | "italic" | "underline" | "fontColor" | "lineStyle" | "lineWidth" | "lineColor" | "fillColor" | "textAlignLeft" | "textAlignCenter" | "textAlignRight" | "lock" | "unlock" | "sendToBack" | "bringToFront" | "insertShapeImage" | "editShapeImage" | "deleteShapeImage" | "connectorLineType" | "connectorLineStart" | "connectorLineEnd" | "layoutTreeTopToBottom" | "layoutTreeBottomToTop" | "layoutTreeLeftToRight" | "layoutTreeRightToLeft" | "layoutLayeredTopToBottom" | "layoutLayeredBottomToTop" | "layoutLayeredLeftToRight" | "layoutLayeredRightToLeft" | "fullScreen" | "zoomLevel" | "showGrid" | "snapToGrid" | "gridSize" | "units" | "pageSize" | "pageOrientation" | "pageColor" | "simpleView" | "toolbox">;
   enabled?: boolean;
 }>
-const _componentContextMenu = memo(
-  (props: IContextMenuProps) => {
-    return React.createElement(NestedOption<IContextMenuProps>, { ...props });
-  }
-);
-
-const ContextMenu: typeof _componentContextMenu & IElementDescriptor = Object.assign(_componentContextMenu, {
-  OptionName: "contextMenu",
-  ExpectedChildren: {
-    command: { optionName: "commands", isCollectionItem: true }
-  },
-})
+const _componentContextMenu = (props: IContextMenuProps) => {
+  return React.createElement(NestedOption<IContextMenuProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "contextMenu",
+      ExpectedChildren: {
+        command: { optionName: "commands", isCollectionItem: true }
+      },
+    },
+  });
+};
+
+const ContextMenu = Object.assign<typeof _componentContextMenu, NestedComponentMeta>(_componentContextMenu, {
+  componentType: "option",
+});
 
 // owners:
 // Diagram
@@ -226,15 +241,18 @@ type IContextToolboxProps = React.PropsWithChildren<{
   shapes?: Array<"text" | "rectangle" | "ellipse" | "cross" | "triangle" | "diamond" | "heart" | "pentagon" | "hexagon" | "octagon" | "star" | "arrowLeft" | "arrowTop" | "arrowRight" | "arrowBottom" | "arrowNorthSouth" | "arrowEastWest" | "process" | "decision" | "terminator" | "predefinedProcess" | "document" | "multipleDocuments" | "manualInput" | "preparation" | "data" | "database" | "hardDisk" | "internalStorage" | "paperTape" | "manualOperation" | "delay" | "storedData" | "display" | "merge" | "connector" | "or" | "summingJunction" | "verticalContainer" | "horizontalContainer" | "cardWithImageOnLeft" | "cardWithImageOnTop" | "cardWithImageOnRight">;
   width?: number;
 }>
-const _componentContextToolbox = memo(
-  (props: IContextToolboxProps) => {
-    return React.createElement(NestedOption<IContextToolboxProps>, { ...props });
-  }
-);
+const _componentContextToolbox = (props: IContextToolboxProps) => {
+  return React.createElement(NestedOption<IContextToolboxProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "contextToolbox",
+    },
+  });
+};
 
-const ContextToolbox: typeof _componentContextToolbox & IElementDescriptor = Object.assign(_componentContextToolbox, {
-  OptionName: "contextToolbox",
-})
+const ContextToolbox = Object.assign<typeof _componentContextToolbox, NestedComponentMeta>(_componentContextToolbox, {
+  componentType: "option",
+});
 
 // owners:
 // Diagram
@@ -285,28 +303,31 @@ type ICustomShapeProps = React.PropsWithChildren<{
   toolboxRender?: (...params: any) => React.ReactNode;
   toolboxComponent?: React.ComponentType<any>;
 }>
-const _componentCustomShape = memo(
-  (props: ICustomShapeProps) => {
-    return React.createElement(NestedOption<ICustomShapeProps>, { ...props });
-  }
-);
-
-const CustomShape: typeof _componentCustomShape & IElementDescriptor = Object.assign(_componentCustomShape, {
-  OptionName: "customShapes",
-  IsCollectionItem: true,
-  ExpectedChildren: {
-    connectionPoint: { optionName: "connectionPoints", isCollectionItem: true }
-  },
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }, {
-    tmplOption: "toolboxTemplate",
-    render: "toolboxRender",
-    component: "toolboxComponent"
-  }],
-})
+const _componentCustomShape = (props: ICustomShapeProps) => {
+  return React.createElement(NestedOption<ICustomShapeProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "customShapes",
+      IsCollectionItem: true,
+      ExpectedChildren: {
+        connectionPoint: { optionName: "connectionPoints", isCollectionItem: true }
+      },
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }, {
+        tmplOption: "toolboxTemplate",
+        render: "toolboxRender",
+        component: "toolboxComponent"
+      }],
+    },
+  });
+};
+
+const CustomShape = Object.assign<typeof _componentCustomShape, NestedComponentMeta>(_componentCustomShape, {
+  componentType: "option",
+});
 
 // owners:
 // Diagram
@@ -321,15 +342,18 @@ type IDefaultItemPropertiesProps = React.PropsWithChildren<{
   style?: Record<string, any>;
   textStyle?: Record<string, any>;
 }>
-const _componentDefaultItemProperties = memo(
-  (props: IDefaultItemPropertiesProps) => {
-    return React.createElement(NestedOption<IDefaultItemPropertiesProps>, { ...props });
-  }
-);
+const _componentDefaultItemProperties = (props: IDefaultItemPropertiesProps) => {
+  return React.createElement(NestedOption<IDefaultItemPropertiesProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "defaultItemProperties",
+    },
+  });
+};
 
-const DefaultItemProperties: typeof _componentDefaultItemProperties & IElementDescriptor = Object.assign(_componentDefaultItemProperties, {
-  OptionName: "defaultItemProperties",
-})
+const DefaultItemProperties = Object.assign<typeof _componentDefaultItemProperties, NestedComponentMeta>(_componentDefaultItemProperties, {
+  componentType: "option",
+});
 
 // owners:
 // Diagram
@@ -351,15 +375,18 @@ type IEdgesProps = React.PropsWithChildren<{
   toPointIndexExpr?: ((data: any, value: any) => any) | string;
   zIndexExpr?: ((data: any, value: any) => any) | string;
 }>
-const _componentEdges = memo(
-  (props: IEdgesProps) => {
-    return React.createElement(NestedOption<IEdgesProps>, { ...props });
-  }
-);
+const _componentEdges = (props: IEdgesProps) => {
+  return React.createElement(NestedOption<IEdgesProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "edges",
+    },
+  });
+};
 
-const Edges: typeof _componentEdges & IElementDescriptor = Object.assign(_componentEdges, {
-  OptionName: "edges",
-})
+const Edges = Object.assign<typeof _componentEdges, NestedComponentMeta>(_componentEdges, {
+  componentType: "option",
+});
 
 // owners:
 // Diagram
@@ -374,30 +401,36 @@ type IEditingProps = React.PropsWithChildren<{
   allowMoveShape?: boolean;
   allowResizeShape?: boolean;
 }>
-const _componentEditing = memo(
-  (props: IEditingProps) => {
-    return React.createElement(NestedOption<IEditingProps>, { ...props });
-  }
-);
+const _componentEditing = (props: IEditingProps) => {
+  return React.createElement(NestedOption<IEditingProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "editing",
+    },
+  });
+};
 
-const Editing: typeof _componentEditing & IElementDescriptor = Object.assign(_componentEditing, {
-  OptionName: "editing",
-})
+const Editing = Object.assign<typeof _componentEditing, NestedComponentMeta>(_componentEditing, {
+  componentType: "option",
+});
 
 // owners:
 // Diagram
 type IExportProps = React.PropsWithChildren<{
   fileName?: string;
 }>
-const _componentExport = memo(
-  (props: IExportProps) => {
-    return React.createElement(NestedOption<IExportProps>, { ...props });
-  }
-);
+const _componentExport = (props: IExportProps) => {
+  return React.createElement(NestedOption<IExportProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "export",
+    },
+  });
+};
 
-const Export: typeof _componentExport & IElementDescriptor = Object.assign(_componentExport, {
-  OptionName: "export",
-})
+const Export = Object.assign<typeof _componentExport, NestedComponentMeta>(_componentExport, {
+  componentType: "option",
+});
 
 // owners:
 // Diagram
@@ -407,18 +440,21 @@ type IGridSizeProps = React.PropsWithChildren<{
   defaultValue?: number;
   onValueChange?: (value: number) => void;
 }>
-const _componentGridSize = memo(
-  (props: IGridSizeProps) => {
-    return React.createElement(NestedOption<IGridSizeProps>, { ...props });
-  }
-);
-
-const GridSize: typeof _componentGridSize & IElementDescriptor = Object.assign(_componentGridSize, {
-  OptionName: "gridSize",
-  DefaultsProps: {
-    defaultValue: "value"
-  },
-})
+const _componentGridSize = (props: IGridSizeProps) => {
+  return React.createElement(NestedOption<IGridSizeProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "gridSize",
+      DefaultsProps: {
+        defaultValue: "value"
+      },
+    },
+  });
+};
+
+const GridSize = Object.assign<typeof _componentGridSize, NestedComponentMeta>(_componentGridSize, {
+  componentType: "option",
+});
 
 // owners:
 // Tab
@@ -431,16 +467,19 @@ type IGroupProps = React.PropsWithChildren<{
   expanded?: boolean;
   shapes?: Array<"text" | "rectangle" | "ellipse" | "cross" | "triangle" | "diamond" | "heart" | "pentagon" | "hexagon" | "octagon" | "star" | "arrowLeft" | "arrowTop" | "arrowRight" | "arrowBottom" | "arrowNorthSouth" | "arrowEastWest" | "process" | "decision" | "terminator" | "predefinedProcess" | "document" | "multipleDocuments" | "manualInput" | "preparation" | "data" | "database" | "hardDisk" | "internalStorage" | "paperTape" | "manualOperation" | "delay" | "storedData" | "display" | "merge" | "connector" | "or" | "summingJunction" | "verticalContainer" | "horizontalContainer" | "cardWithImageOnLeft" | "cardWithImageOnTop" | "cardWithImageOnRight">;
 }>
-const _componentGroup = memo(
-  (props: IGroupProps) => {
-    return React.createElement(NestedOption<IGroupProps>, { ...props });
-  }
-);
+const _componentGroup = (props: IGroupProps) => {
+  return React.createElement(NestedOption<IGroupProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "groups",
+      IsCollectionItem: true,
+    },
+  });
+};
 
-const Group: typeof _componentGroup & IElementDescriptor = Object.assign(_componentGroup, {
-  OptionName: "groups",
-  IsCollectionItem: true,
-})
+const Group = Object.assign<typeof _componentGroup, NestedComponentMeta>(_componentGroup, {
+  componentType: "option",
+});
 
 // owners:
 // Diagram
@@ -448,18 +487,21 @@ type IHistoryToolbarProps = React.PropsWithChildren<{
   commands?: Array<CustomCommand | "separator" | "exportSvg" | "exportPng" | "exportJpg" | "undo" | "redo" | "cut" | "copy" | "paste" | "selectAll" | "delete" | "fontName" | "fontSize" | "bold" | "italic" | "underline" | "fontColor" | "lineStyle" | "lineWidth" | "lineColor" | "fillColor" | "textAlignLeft" | "textAlignCenter" | "textAlignRight" | "lock" | "unlock" | "sendToBack" | "bringToFront" | "insertShapeImage" | "editShapeImage" | "deleteShapeImage" | "connectorLineType" | "connectorLineStart" | "connectorLineEnd" | "layoutTreeTopToBottom" | "layoutTreeBottomToTop" | "layoutTreeLeftToRight" | "layoutTreeRightToLeft" | "layoutLayeredTopToBottom" | "layoutLayeredBottomToTop" | "layoutLayeredLeftToRight" | "layoutLayeredRightToLeft" | "fullScreen" | "zoomLevel" | "showGrid" | "snapToGrid" | "gridSize" | "units" | "pageSize" | "pageOrientation" | "pageColor" | "simpleView" | "toolbox">;
   visible?: boolean;
 }>
-const _componentHistoryToolbar = memo(
-  (props: IHistoryToolbarProps) => {
-    return React.createElement(NestedOption<IHistoryToolbarProps>, { ...props });
-  }
-);
-
-const HistoryToolbar: typeof _componentHistoryToolbar & IElementDescriptor = Object.assign(_componentHistoryToolbar, {
-  OptionName: "historyToolbar",
-  ExpectedChildren: {
-    command: { optionName: "commands", isCollectionItem: true }
-  },
-})
+const _componentHistoryToolbar = (props: IHistoryToolbarProps) => {
+  return React.createElement(NestedOption<IHistoryToolbarProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "historyToolbar",
+      ExpectedChildren: {
+        command: { optionName: "commands", isCollectionItem: true }
+      },
+    },
+  });
+};
+
+const HistoryToolbar = Object.assign<typeof _componentHistoryToolbar, NestedComponentMeta>(_componentHistoryToolbar, {
+  componentType: "option",
+});
 
 // owners:
 // Command
@@ -473,16 +515,19 @@ type IItemProps = React.PropsWithChildren<{
   height?: number;
   width?: number;
 }>
-const _componentItem = memo(
-  (props: IItemProps) => {
-    return React.createElement(NestedOption<IItemProps>, { ...props });
-  }
-);
+const _componentItem = (props: IItemProps) => {
+  return React.createElement(NestedOption<IItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+    },
+  });
+};
 
-const Item: typeof _componentItem & IElementDescriptor = Object.assign(_componentItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-})
+const Item = Object.assign<typeof _componentItem, NestedComponentMeta>(_componentItem, {
+  componentType: "option",
+});
 
 // owners:
 // Diagram
@@ -490,18 +535,21 @@ type IMainToolbarProps = React.PropsWithChildren<{
   commands?: Array<CustomCommand | "separator" | "exportSvg" | "exportPng" | "exportJpg" | "undo" | "redo" | "cut" | "copy" | "paste" | "selectAll" | "delete" | "fontName" | "fontSize" | "bold" | "italic" | "underline" | "fontColor" | "lineStyle" | "lineWidth" | "lineColor" | "fillColor" | "textAlignLeft" | "textAlignCenter" | "textAlignRight" | "lock" | "unlock" | "sendToBack" | "bringToFront" | "insertShapeImage" | "editShapeImage" | "deleteShapeImage" | "connectorLineType" | "connectorLineStart" | "connectorLineEnd" | "layoutTreeTopToBottom" | "layoutTreeBottomToTop" | "layoutTreeLeftToRight" | "layoutTreeRightToLeft" | "layoutLayeredTopToBottom" | "layoutLayeredBottomToTop" | "layoutLayeredLeftToRight" | "layoutLayeredRightToLeft" | "fullScreen" | "zoomLevel" | "showGrid" | "snapToGrid" | "gridSize" | "units" | "pageSize" | "pageOrientation" | "pageColor" | "simpleView" | "toolbox">;
   visible?: boolean;
 }>
-const _componentMainToolbar = memo(
-  (props: IMainToolbarProps) => {
-    return React.createElement(NestedOption<IMainToolbarProps>, { ...props });
-  }
-);
-
-const MainToolbar: typeof _componentMainToolbar & IElementDescriptor = Object.assign(_componentMainToolbar, {
-  OptionName: "mainToolbar",
-  ExpectedChildren: {
-    command: { optionName: "commands", isCollectionItem: true }
-  },
-})
+const _componentMainToolbar = (props: IMainToolbarProps) => {
+  return React.createElement(NestedOption<IMainToolbarProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "mainToolbar",
+      ExpectedChildren: {
+        command: { optionName: "commands", isCollectionItem: true }
+      },
+    },
+  });
+};
+
+const MainToolbar = Object.assign<typeof _componentMainToolbar, NestedComponentMeta>(_componentMainToolbar, {
+  componentType: "option",
+});
 
 // owners:
 // Diagram
@@ -530,18 +578,21 @@ type INodesProps = React.PropsWithChildren<{
   widthExpr?: ((data: any, value: any) => any) | string;
   zIndexExpr?: ((data: any, value: any) => any) | string;
 }>
-const _componentNodes = memo(
-  (props: INodesProps) => {
-    return React.createElement(NestedOption<INodesProps>, { ...props });
-  }
-);
-
-const Nodes: typeof _componentNodes & IElementDescriptor = Object.assign(_componentNodes, {
-  OptionName: "nodes",
-  ExpectedChildren: {
-    autoLayout: { optionName: "autoLayout", isCollectionItem: false }
-  },
-})
+const _componentNodes = (props: INodesProps) => {
+  return React.createElement(NestedOption<INodesProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "nodes",
+      ExpectedChildren: {
+        autoLayout: { optionName: "autoLayout", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Nodes = Object.assign<typeof _componentNodes, NestedComponentMeta>(_componentNodes, {
+  componentType: "option",
+});
 
 // owners:
 // Diagram
@@ -558,23 +609,26 @@ type IPageSizeProps = React.PropsWithChildren<{
   defaultWidth?: number;
   onWidthChange?: (value: number) => void;
 }>
-const _componentPageSize = memo(
-  (props: IPageSizeProps) => {
-    return React.createElement(NestedOption<IPageSizeProps>, { ...props });
-  }
-);
-
-const PageSize: typeof _componentPageSize & IElementDescriptor = Object.assign(_componentPageSize, {
-  OptionName: "pageSize",
-  DefaultsProps: {
-    defaultHeight: "height",
-    defaultWidth: "width"
-  },
-  ExpectedChildren: {
-    item: { optionName: "items", isCollectionItem: true },
-    pageSizeItem: { optionName: "items", isCollectionItem: true }
-  },
-})
+const _componentPageSize = (props: IPageSizeProps) => {
+  return React.createElement(NestedOption<IPageSizeProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "pageSize",
+      DefaultsProps: {
+        defaultHeight: "height",
+        defaultWidth: "width"
+      },
+      ExpectedChildren: {
+        item: { optionName: "items", isCollectionItem: true },
+        pageSizeItem: { optionName: "items", isCollectionItem: true }
+      },
+    },
+  });
+};
+
+const PageSize = Object.assign<typeof _componentPageSize, NestedComponentMeta>(_componentPageSize, {
+  componentType: "option",
+});
 
 // owners:
 // PageSize
@@ -583,16 +637,19 @@ type IPageSizeItemProps = React.PropsWithChildren<{
   text?: string;
   width?: number;
 }>
-const _componentPageSizeItem = memo(
-  (props: IPageSizeItemProps) => {
-    return React.createElement(NestedOption<IPageSizeItemProps>, { ...props });
-  }
-);
+const _componentPageSizeItem = (props: IPageSizeItemProps) => {
+  return React.createElement(NestedOption<IPageSizeItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+    },
+  });
+};
 
-const PageSizeItem: typeof _componentPageSizeItem & IElementDescriptor = Object.assign(_componentPageSizeItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-})
+const PageSizeItem = Object.assign<typeof _componentPageSizeItem, NestedComponentMeta>(_componentPageSizeItem, {
+  componentType: "option",
+});
 
 // owners:
 // Diagram
@@ -607,18 +664,21 @@ type IPropertiesPanelProps = React.PropsWithChildren<{
   }[];
   visibility?: "auto" | "visible" | "collapsed" | "disabled";
 }>
-const _componentPropertiesPanel = memo(
-  (props: IPropertiesPanelProps) => {
-    return React.createElement(NestedOption<IPropertiesPanelProps>, { ...props });
-  }
-);
-
-const PropertiesPanel: typeof _componentPropertiesPanel & IElementDescriptor = Object.assign(_componentPropertiesPanel, {
-  OptionName: "propertiesPanel",
-  ExpectedChildren: {
-    tab: { optionName: "tabs", isCollectionItem: true }
-  },
-})
+const _componentPropertiesPanel = (props: IPropertiesPanelProps) => {
+  return React.createElement(NestedOption<IPropertiesPanelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "propertiesPanel",
+      ExpectedChildren: {
+        tab: { optionName: "tabs", isCollectionItem: true }
+      },
+    },
+  });
+};
+
+const PropertiesPanel = Object.assign<typeof _componentPropertiesPanel, NestedComponentMeta>(_componentPropertiesPanel, {
+  componentType: "option",
+});
 
 // owners:
 // PropertiesPanel
@@ -630,21 +690,24 @@ type ITabProps = React.PropsWithChildren<{
   }[];
   title?: string;
 }>
-const _componentTab = memo(
-  (props: ITabProps) => {
-    return React.createElement(NestedOption<ITabProps>, { ...props });
-  }
-);
-
-const Tab: typeof _componentTab & IElementDescriptor = Object.assign(_componentTab, {
-  OptionName: "tabs",
-  IsCollectionItem: true,
-  ExpectedChildren: {
-    command: { optionName: "commands", isCollectionItem: true },
-    group: { optionName: "groups", isCollectionItem: true },
-    tabGroup: { optionName: "groups", isCollectionItem: true }
-  },
-})
+const _componentTab = (props: ITabProps) => {
+  return React.createElement(NestedOption<ITabProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "tabs",
+      IsCollectionItem: true,
+      ExpectedChildren: {
+        command: { optionName: "commands", isCollectionItem: true },
+        group: { optionName: "groups", isCollectionItem: true },
+        tabGroup: { optionName: "groups", isCollectionItem: true }
+      },
+    },
+  });
+};
+
+const Tab = Object.assign<typeof _componentTab, NestedComponentMeta>(_componentTab, {
+  componentType: "option",
+});
 
 // owners:
 // Tab
@@ -652,19 +715,22 @@ type ITabGroupProps = React.PropsWithChildren<{
   commands?: Array<CustomCommand | "separator" | "exportSvg" | "exportPng" | "exportJpg" | "undo" | "redo" | "cut" | "copy" | "paste" | "selectAll" | "delete" | "fontName" | "fontSize" | "bold" | "italic" | "underline" | "fontColor" | "lineStyle" | "lineWidth" | "lineColor" | "fillColor" | "textAlignLeft" | "textAlignCenter" | "textAlignRight" | "lock" | "unlock" | "sendToBack" | "bringToFront" | "insertShapeImage" | "editShapeImage" | "deleteShapeImage" | "connectorLineType" | "connectorLineStart" | "connectorLineEnd" | "layoutTreeTopToBottom" | "layoutTreeBottomToTop" | "layoutTreeLeftToRight" | "layoutTreeRightToLeft" | "layoutLayeredTopToBottom" | "layoutLayeredBottomToTop" | "layoutLayeredLeftToRight" | "layoutLayeredRightToLeft" | "fullScreen" | "zoomLevel" | "showGrid" | "snapToGrid" | "gridSize" | "units" | "pageSize" | "pageOrientation" | "pageColor" | "simpleView" | "toolbox">;
   title?: string;
 }>
-const _componentTabGroup = memo(
-  (props: ITabGroupProps) => {
-    return React.createElement(NestedOption<ITabGroupProps>, { ...props });
-  }
-);
-
-const TabGroup: typeof _componentTabGroup & IElementDescriptor = Object.assign(_componentTabGroup, {
-  OptionName: "groups",
-  IsCollectionItem: true,
-  ExpectedChildren: {
-    command: { optionName: "commands", isCollectionItem: true }
-  },
-})
+const _componentTabGroup = (props: ITabGroupProps) => {
+  return React.createElement(NestedOption<ITabGroupProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "groups",
+      IsCollectionItem: true,
+      ExpectedChildren: {
+        command: { optionName: "commands", isCollectionItem: true }
+      },
+    },
+  });
+};
+
+const TabGroup = Object.assign<typeof _componentTabGroup, NestedComponentMeta>(_componentTabGroup, {
+  componentType: "option",
+});
 
 // owners:
 // Diagram
@@ -681,19 +747,22 @@ type IToolboxProps = React.PropsWithChildren<{
   visibility?: "auto" | "visible" | "collapsed" | "disabled";
   width?: number;
 }>
-const _componentToolbox = memo(
-  (props: IToolboxProps) => {
-    return React.createElement(NestedOption<IToolboxProps>, { ...props });
-  }
-);
-
-const Toolbox: typeof _componentToolbox & IElementDescriptor = Object.assign(_componentToolbox, {
-  OptionName: "toolbox",
-  ExpectedChildren: {
-    group: { optionName: "groups", isCollectionItem: true },
-    toolboxGroup: { optionName: "groups", isCollectionItem: true }
-  },
-})
+const _componentToolbox = (props: IToolboxProps) => {
+  return React.createElement(NestedOption<IToolboxProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "toolbox",
+      ExpectedChildren: {
+        group: { optionName: "groups", isCollectionItem: true },
+        toolboxGroup: { optionName: "groups", isCollectionItem: true }
+      },
+    },
+  });
+};
+
+const Toolbox = Object.assign<typeof _componentToolbox, NestedComponentMeta>(_componentToolbox, {
+  componentType: "option",
+});
 
 // owners:
 // Toolbox
@@ -704,16 +773,19 @@ type IToolboxGroupProps = React.PropsWithChildren<{
   shapes?: Array<"text" | "rectangle" | "ellipse" | "cross" | "triangle" | "diamond" | "heart" | "pentagon" | "hexagon" | "octagon" | "star" | "arrowLeft" | "arrowTop" | "arrowRight" | "arrowBottom" | "arrowNorthSouth" | "arrowEastWest" | "process" | "decision" | "terminator" | "predefinedProcess" | "document" | "multipleDocuments" | "manualInput" | "preparation" | "data" | "database" | "hardDisk" | "internalStorage" | "paperTape" | "manualOperation" | "delay" | "storedData" | "display" | "merge" | "connector" | "or" | "summingJunction" | "verticalContainer" | "horizontalContainer" | "cardWithImageOnLeft" | "cardWithImageOnTop" | "cardWithImageOnRight">;
   title?: string;
 }>
-const _componentToolboxGroup = memo(
-  (props: IToolboxGroupProps) => {
-    return React.createElement(NestedOption<IToolboxGroupProps>, { ...props });
-  }
-);
+const _componentToolboxGroup = (props: IToolboxGroupProps) => {
+  return React.createElement(NestedOption<IToolboxGroupProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "groups",
+      IsCollectionItem: true,
+    },
+  });
+};
 
-const ToolboxGroup: typeof _componentToolboxGroup & IElementDescriptor = Object.assign(_componentToolboxGroup, {
-  OptionName: "groups",
-  IsCollectionItem: true,
-})
+const ToolboxGroup = Object.assign<typeof _componentToolboxGroup, NestedComponentMeta>(_componentToolboxGroup, {
+  componentType: "option",
+});
 
 // owners:
 // Diagram
@@ -721,18 +793,21 @@ type IViewToolbarProps = React.PropsWithChildren<{
   commands?: Array<CustomCommand | "separator" | "exportSvg" | "exportPng" | "exportJpg" | "undo" | "redo" | "cut" | "copy" | "paste" | "selectAll" | "delete" | "fontName" | "fontSize" | "bold" | "italic" | "underline" | "fontColor" | "lineStyle" | "lineWidth" | "lineColor" | "fillColor" | "textAlignLeft" | "textAlignCenter" | "textAlignRight" | "lock" | "unlock" | "sendToBack" | "bringToFront" | "insertShapeImage" | "editShapeImage" | "deleteShapeImage" | "connectorLineType" | "connectorLineStart" | "connectorLineEnd" | "layoutTreeTopToBottom" | "layoutTreeBottomToTop" | "layoutTreeLeftToRight" | "layoutTreeRightToLeft" | "layoutLayeredTopToBottom" | "layoutLayeredBottomToTop" | "layoutLayeredLeftToRight" | "layoutLayeredRightToLeft" | "fullScreen" | "zoomLevel" | "showGrid" | "snapToGrid" | "gridSize" | "units" | "pageSize" | "pageOrientation" | "pageColor" | "simpleView" | "toolbox">;
   visible?: boolean;
 }>
-const _componentViewToolbar = memo(
-  (props: IViewToolbarProps) => {
-    return React.createElement(NestedOption<IViewToolbarProps>, { ...props });
-  }
-);
-
-const ViewToolbar: typeof _componentViewToolbar & IElementDescriptor = Object.assign(_componentViewToolbar, {
-  OptionName: "viewToolbar",
-  ExpectedChildren: {
-    command: { optionName: "commands", isCollectionItem: true }
-  },
-})
+const _componentViewToolbar = (props: IViewToolbarProps) => {
+  return React.createElement(NestedOption<IViewToolbarProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "viewToolbar",
+      ExpectedChildren: {
+        command: { optionName: "commands", isCollectionItem: true }
+      },
+    },
+  });
+};
+
+const ViewToolbar = Object.assign<typeof _componentViewToolbar, NestedComponentMeta>(_componentViewToolbar, {
+  componentType: "option",
+});
 
 // owners:
 // Diagram
@@ -742,18 +817,21 @@ type IZoomLevelProps = React.PropsWithChildren<{
   defaultValue?: number;
   onValueChange?: (value: number) => void;
 }>
-const _componentZoomLevel = memo(
-  (props: IZoomLevelProps) => {
-    return React.createElement(NestedOption<IZoomLevelProps>, { ...props });
-  }
-);
-
-const ZoomLevel: typeof _componentZoomLevel & IElementDescriptor = Object.assign(_componentZoomLevel, {
-  OptionName: "zoomLevel",
-  DefaultsProps: {
-    defaultValue: "value"
-  },
-})
+const _componentZoomLevel = (props: IZoomLevelProps) => {
+  return React.createElement(NestedOption<IZoomLevelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "zoomLevel",
+      DefaultsProps: {
+        defaultValue: "value"
+      },
+    },
+  });
+};
+
+const ZoomLevel = Object.assign<typeof _componentZoomLevel, NestedComponentMeta>(_componentZoomLevel, {
+  componentType: "option",
+});
 
 export default Diagram;
 export {
diff --git a/packages/devextreme-react/src/draggable.ts b/packages/devextreme-react/src/draggable.ts
index b3d0a112ffe6..8f882a0f5f71 100644
--- a/packages/devextreme-react/src/draggable.ts
+++ b/packages/devextreme-react/src/draggable.ts
@@ -5,7 +5,7 @@ import dxDraggable, {
     Properties
 } from "devextreme/ui/draggable";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { DisposingEvent, DragEndEvent, DragMoveEvent, DragStartEvent, InitializedEvent } from "devextreme/ui/draggable";
@@ -79,15 +79,18 @@ type ICursorOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentCursorOffset = memo(
-  (props: ICursorOffsetProps) => {
-    return React.createElement(NestedOption<ICursorOffsetProps>, { ...props });
-  }
-);
-
-const CursorOffset: typeof _componentCursorOffset & IElementDescriptor = Object.assign(_componentCursorOffset, {
-  OptionName: "cursorOffset",
-})
+const _componentCursorOffset = (props: ICursorOffsetProps) => {
+  return React.createElement(NestedOption<ICursorOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "cursorOffset",
+    },
+  });
+};
+
+const CursorOffset = Object.assign<typeof _componentCursorOffset, NestedComponentMeta>(_componentCursorOffset, {
+  componentType: "option",
+});
 
 export default Draggable;
 export {
diff --git a/packages/devextreme-react/src/drop-down-box.ts b/packages/devextreme-react/src/drop-down-box.ts
index 324e14addfb9..807b062ebbae 100644
--- a/packages/devextreme-react/src/drop-down-box.ts
+++ b/packages/devextreme-react/src/drop-down-box.ts
@@ -5,7 +5,7 @@ import dxDropDownBox, {
     Properties
 } from "devextreme/ui/drop_down_box";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { ChangeEvent, ClosedEvent, CopyEvent, CutEvent, DisposingEvent, EnterKeyEvent, FocusInEvent, FocusOutEvent, InitializedEvent, InputEvent, KeyDownEvent, KeyUpEvent, OpenedEvent, PasteEvent, ValueChangedEvent } from "devextreme/ui/drop_down_box";
@@ -125,19 +125,22 @@ type IAnimationProps = React.PropsWithChildren<{
   hide?: AnimationConfig;
   show?: AnimationConfig;
 }>
-const _componentAnimation = memo(
-  (props: IAnimationProps) => {
-    return React.createElement(NestedOption<IAnimationProps>, { ...props });
-  }
-);
-
-const Animation: typeof _componentAnimation & IElementDescriptor = Object.assign(_componentAnimation, {
-  OptionName: "animation",
-  ExpectedChildren: {
-    hide: { optionName: "hide", isCollectionItem: false },
-    show: { optionName: "show", isCollectionItem: false }
-  },
-})
+const _componentAnimation = (props: IAnimationProps) => {
+  return React.createElement(NestedOption<IAnimationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "animation",
+      ExpectedChildren: {
+        hide: { optionName: "hide", isCollectionItem: false },
+        show: { optionName: "show", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Animation = Object.assign<typeof _componentAnimation, NestedComponentMeta>(_componentAnimation, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -145,15 +148,18 @@ type IAtProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentAt = memo(
-  (props: IAtProps) => {
-    return React.createElement(NestedOption<IAtProps>, { ...props });
-  }
-);
+const _componentAt = (props: IAtProps) => {
+  return React.createElement(NestedOption<IAtProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "at",
+    },
+  });
+};
 
-const At: typeof _componentAt & IElementDescriptor = Object.assign(_componentAt, {
-  OptionName: "at",
-})
+const At = Object.assign<typeof _componentAt, NestedComponentMeta>(_componentAt, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -161,15 +167,18 @@ type IBoundaryOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentBoundaryOffset = memo(
-  (props: IBoundaryOffsetProps) => {
-    return React.createElement(NestedOption<IBoundaryOffsetProps>, { ...props });
-  }
-);
+const _componentBoundaryOffset = (props: IBoundaryOffsetProps) => {
+  return React.createElement(NestedOption<IBoundaryOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "boundaryOffset",
+    },
+  });
+};
 
-const BoundaryOffset: typeof _componentBoundaryOffset & IElementDescriptor = Object.assign(_componentBoundaryOffset, {
-  OptionName: "boundaryOffset",
-})
+const BoundaryOffset = Object.assign<typeof _componentBoundaryOffset, NestedComponentMeta>(_componentBoundaryOffset, {
+  componentType: "option",
+});
 
 // owners:
 // DropDownBox
@@ -178,19 +187,22 @@ type IButtonProps = React.PropsWithChildren<{
   name?: string;
   options?: dxButtonOptions;
 }>
-const _componentButton = memo(
-  (props: IButtonProps) => {
-    return React.createElement(NestedOption<IButtonProps>, { ...props });
-  }
-);
-
-const Button: typeof _componentButton & IElementDescriptor = Object.assign(_componentButton, {
-  OptionName: "buttons",
-  IsCollectionItem: true,
-  ExpectedChildren: {
-    options: { optionName: "options", isCollectionItem: false }
-  },
-})
+const _componentButton = (props: IButtonProps) => {
+  return React.createElement(NestedOption<IButtonProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "buttons",
+      IsCollectionItem: true,
+      ExpectedChildren: {
+        options: { optionName: "options", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Button = Object.assign<typeof _componentButton, NestedComponentMeta>(_componentButton, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -198,15 +210,18 @@ type ICollisionProps = React.PropsWithChildren<{
   x?: "fit" | "flip" | "flipfit" | "none";
   y?: "fit" | "flip" | "flipfit" | "none";
 }>
-const _componentCollision = memo(
-  (props: ICollisionProps) => {
-    return React.createElement(NestedOption<ICollisionProps>, { ...props });
-  }
-);
+const _componentCollision = (props: ICollisionProps) => {
+  return React.createElement(NestedOption<ICollisionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "collision",
+    },
+  });
+};
 
-const Collision: typeof _componentCollision & IElementDescriptor = Object.assign(_componentCollision, {
-  OptionName: "collision",
-})
+const Collision = Object.assign<typeof _componentCollision, NestedComponentMeta>(_componentCollision, {
+  componentType: "option",
+});
 
 // owners:
 // DropDownBox
@@ -277,35 +292,38 @@ type IDropDownOptionsProps = React.PropsWithChildren<{
   titleRender?: (...params: any) => React.ReactNode;
   titleComponent?: React.ComponentType<any>;
 }>
-const _componentDropDownOptions = memo(
-  (props: IDropDownOptionsProps) => {
-    return React.createElement(NestedOption<IDropDownOptionsProps>, { ...props });
-  }
-);
-
-const DropDownOptions: typeof _componentDropDownOptions & IElementDescriptor = Object.assign(_componentDropDownOptions, {
-  OptionName: "dropDownOptions",
-  DefaultsProps: {
-    defaultHeight: "height",
-    defaultPosition: "position",
-    defaultVisible: "visible",
-    defaultWidth: "width"
-  },
-  ExpectedChildren: {
-    animation: { optionName: "animation", isCollectionItem: false },
-    position: { optionName: "position", isCollectionItem: false },
-    toolbarItem: { optionName: "toolbarItems", isCollectionItem: true }
-  },
-  TemplateProps: [{
-    tmplOption: "contentTemplate",
-    render: "contentRender",
-    component: "contentComponent"
-  }, {
-    tmplOption: "titleTemplate",
-    render: "titleRender",
-    component: "titleComponent"
-  }],
-})
+const _componentDropDownOptions = (props: IDropDownOptionsProps) => {
+  return React.createElement(NestedOption<IDropDownOptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "dropDownOptions",
+      DefaultsProps: {
+        defaultHeight: "height",
+        defaultPosition: "position",
+        defaultVisible: "visible",
+        defaultWidth: "width"
+      },
+      ExpectedChildren: {
+        animation: { optionName: "animation", isCollectionItem: false },
+        position: { optionName: "position", isCollectionItem: false },
+        toolbarItem: { optionName: "toolbarItems", isCollectionItem: true }
+      },
+      TemplateProps: [{
+        tmplOption: "contentTemplate",
+        render: "contentRender",
+        component: "contentComponent"
+      }, {
+        tmplOption: "titleTemplate",
+        render: "titleRender",
+        component: "titleComponent"
+      }],
+    },
+  });
+};
+
+const DropDownOptions = Object.assign<typeof _componentDropDownOptions, NestedComponentMeta>(_componentDropDownOptions, {
+  componentType: "option",
+});
 
 // owners:
 // Hide
@@ -316,18 +334,21 @@ type IFromProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentFrom = memo(
-  (props: IFromProps) => {
-    return React.createElement(NestedOption<IFromProps>, { ...props });
-  }
-);
-
-const From: typeof _componentFrom & IElementDescriptor = Object.assign(_componentFrom, {
-  OptionName: "from",
-  ExpectedChildren: {
-    position: { optionName: "position", isCollectionItem: false }
-  },
-})
+const _componentFrom = (props: IFromProps) => {
+  return React.createElement(NestedOption<IFromProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "from",
+      ExpectedChildren: {
+        position: { optionName: "position", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const From = Object.assign<typeof _componentFrom, NestedComponentMeta>(_componentFrom, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -343,19 +364,22 @@ type IHideProps = React.PropsWithChildren<{
   to?: AnimationState;
   type?: "css" | "fade" | "fadeIn" | "fadeOut" | "pop" | "slide" | "slideIn" | "slideOut";
 }>
-const _componentHide = memo(
-  (props: IHideProps) => {
-    return React.createElement(NestedOption<IHideProps>, { ...props });
-  }
-);
-
-const Hide: typeof _componentHide & IElementDescriptor = Object.assign(_componentHide, {
-  OptionName: "hide",
-  ExpectedChildren: {
-    from: { optionName: "from", isCollectionItem: false },
-    to: { optionName: "to", isCollectionItem: false }
-  },
-})
+const _componentHide = (props: IHideProps) => {
+  return React.createElement(NestedOption<IHideProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hide",
+      ExpectedChildren: {
+        from: { optionName: "from", isCollectionItem: false },
+        to: { optionName: "to", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Hide = Object.assign<typeof _componentHide, NestedComponentMeta>(_componentHide, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -363,15 +387,18 @@ type IMyProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentMy = memo(
-  (props: IMyProps) => {
-    return React.createElement(NestedOption<IMyProps>, { ...props });
-  }
-);
+const _componentMy = (props: IMyProps) => {
+  return React.createElement(NestedOption<IMyProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "my",
+    },
+  });
+};
 
-const My: typeof _componentMy & IElementDescriptor = Object.assign(_componentMy, {
-  OptionName: "my",
-})
+const My = Object.assign<typeof _componentMy, NestedComponentMeta>(_componentMy, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -379,15 +406,18 @@ type IOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentOffset = memo(
-  (props: IOffsetProps) => {
-    return React.createElement(NestedOption<IOffsetProps>, { ...props });
-  }
-);
+const _componentOffset = (props: IOffsetProps) => {
+  return React.createElement(NestedOption<IOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "offset",
+    },
+  });
+};
 
-const Offset: typeof _componentOffset & IElementDescriptor = Object.assign(_componentOffset, {
-  OptionName: "offset",
-})
+const Offset = Object.assign<typeof _componentOffset, NestedComponentMeta>(_componentOffset, {
+  componentType: "option",
+});
 
 // owners:
 // Button
@@ -420,20 +450,23 @@ type IOptionsProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentOptions = memo(
-  (props: IOptionsProps) => {
-    return React.createElement(NestedOption<IOptionsProps>, { ...props });
-  }
-);
-
-const Options: typeof _componentOptions & IElementDescriptor = Object.assign(_componentOptions, {
-  OptionName: "options",
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentOptions = (props: IOptionsProps) => {
+  return React.createElement(NestedOption<IOptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "options",
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const Options = Object.assign<typeof _componentOptions, NestedComponentMeta>(_componentOptions, {
+  componentType: "option",
+});
 
 // owners:
 // From
@@ -462,15 +495,18 @@ type IPositionProps = React.PropsWithChildren<{
     y?: number;
   };
 }>
-const _componentPosition = memo(
-  (props: IPositionProps) => {
-    return React.createElement(NestedOption<IPositionProps>, { ...props });
-  }
-);
+const _componentPosition = (props: IPositionProps) => {
+  return React.createElement(NestedOption<IPositionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "position",
+    },
+  });
+};
 
-const Position: typeof _componentPosition & IElementDescriptor = Object.assign(_componentPosition, {
-  OptionName: "position",
-})
+const Position = Object.assign<typeof _componentPosition, NestedComponentMeta>(_componentPosition, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -486,15 +522,18 @@ type IShowProps = React.PropsWithChildren<{
   to?: AnimationState;
   type?: "css" | "fade" | "fadeIn" | "fadeOut" | "pop" | "slide" | "slideIn" | "slideOut";
 }>
-const _componentShow = memo(
-  (props: IShowProps) => {
-    return React.createElement(NestedOption<IShowProps>, { ...props });
-  }
-);
+const _componentShow = (props: IShowProps) => {
+  return React.createElement(NestedOption<IShowProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "show",
+    },
+  });
+};
 
-const Show: typeof _componentShow & IElementDescriptor = Object.assign(_componentShow, {
-  OptionName: "show",
-})
+const Show = Object.assign<typeof _componentShow, NestedComponentMeta>(_componentShow, {
+  componentType: "option",
+});
 
 // owners:
 // Hide
@@ -505,15 +544,18 @@ type IToProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentTo = memo(
-  (props: IToProps) => {
-    return React.createElement(NestedOption<IToProps>, { ...props });
-  }
-);
+const _componentTo = (props: IToProps) => {
+  return React.createElement(NestedOption<IToProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "to",
+    },
+  });
+};
 
-const To: typeof _componentTo & IElementDescriptor = Object.assign(_componentTo, {
-  OptionName: "to",
-})
+const To = Object.assign<typeof _componentTo, NestedComponentMeta>(_componentTo, {
+  componentType: "option",
+});
 
 // owners:
 // DropDownOptions
@@ -536,25 +578,28 @@ type IToolbarItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentToolbarItem = memo(
-  (props: IToolbarItemProps) => {
-    return React.createElement(NestedOption<IToolbarItemProps>, { ...props });
-  }
-);
-
-const ToolbarItem: typeof _componentToolbarItem & IElementDescriptor = Object.assign(_componentToolbarItem, {
-  OptionName: "toolbarItems",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "menuItemTemplate",
-    render: "menuItemRender",
-    component: "menuItemComponent"
-  }, {
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentToolbarItem = (props: IToolbarItemProps) => {
+  return React.createElement(NestedOption<IToolbarItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "toolbarItems",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "menuItemTemplate",
+        render: "menuItemRender",
+        component: "menuItemComponent"
+      }, {
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const ToolbarItem = Object.assign<typeof _componentToolbarItem, NestedComponentMeta>(_componentToolbarItem, {
+  componentType: "option",
+});
 
 export default DropDownBox;
 export {
diff --git a/packages/devextreme-react/src/drop-down-button.ts b/packages/devextreme-react/src/drop-down-button.ts
index 8d6179b5034c..fa4bbc9a00f1 100644
--- a/packages/devextreme-react/src/drop-down-button.ts
+++ b/packages/devextreme-react/src/drop-down-button.ts
@@ -5,7 +5,7 @@ import dxDropDownButton, {
     Properties
 } from "devextreme/ui/drop_down_button";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { ButtonClickEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, ItemClickEvent } from "devextreme/ui/drop_down_button";
@@ -105,19 +105,22 @@ type IAnimationProps = React.PropsWithChildren<{
   hide?: AnimationConfig;
   show?: AnimationConfig;
 }>
-const _componentAnimation = memo(
-  (props: IAnimationProps) => {
-    return React.createElement(NestedOption<IAnimationProps>, { ...props });
-  }
-);
-
-const Animation: typeof _componentAnimation & IElementDescriptor = Object.assign(_componentAnimation, {
-  OptionName: "animation",
-  ExpectedChildren: {
-    hide: { optionName: "hide", isCollectionItem: false },
-    show: { optionName: "show", isCollectionItem: false }
-  },
-})
+const _componentAnimation = (props: IAnimationProps) => {
+  return React.createElement(NestedOption<IAnimationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "animation",
+      ExpectedChildren: {
+        hide: { optionName: "hide", isCollectionItem: false },
+        show: { optionName: "show", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Animation = Object.assign<typeof _componentAnimation, NestedComponentMeta>(_componentAnimation, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -125,15 +128,18 @@ type IAtProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentAt = memo(
-  (props: IAtProps) => {
-    return React.createElement(NestedOption<IAtProps>, { ...props });
-  }
-);
+const _componentAt = (props: IAtProps) => {
+  return React.createElement(NestedOption<IAtProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "at",
+    },
+  });
+};
 
-const At: typeof _componentAt & IElementDescriptor = Object.assign(_componentAt, {
-  OptionName: "at",
-})
+const At = Object.assign<typeof _componentAt, NestedComponentMeta>(_componentAt, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -141,15 +147,18 @@ type IBoundaryOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentBoundaryOffset = memo(
-  (props: IBoundaryOffsetProps) => {
-    return React.createElement(NestedOption<IBoundaryOffsetProps>, { ...props });
-  }
-);
+const _componentBoundaryOffset = (props: IBoundaryOffsetProps) => {
+  return React.createElement(NestedOption<IBoundaryOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "boundaryOffset",
+    },
+  });
+};
 
-const BoundaryOffset: typeof _componentBoundaryOffset & IElementDescriptor = Object.assign(_componentBoundaryOffset, {
-  OptionName: "boundaryOffset",
-})
+const BoundaryOffset = Object.assign<typeof _componentBoundaryOffset, NestedComponentMeta>(_componentBoundaryOffset, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -157,15 +166,18 @@ type ICollisionProps = React.PropsWithChildren<{
   x?: "fit" | "flip" | "flipfit" | "none";
   y?: "fit" | "flip" | "flipfit" | "none";
 }>
-const _componentCollision = memo(
-  (props: ICollisionProps) => {
-    return React.createElement(NestedOption<ICollisionProps>, { ...props });
-  }
-);
+const _componentCollision = (props: ICollisionProps) => {
+  return React.createElement(NestedOption<ICollisionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "collision",
+    },
+  });
+};
 
-const Collision: typeof _componentCollision & IElementDescriptor = Object.assign(_componentCollision, {
-  OptionName: "collision",
-})
+const Collision = Object.assign<typeof _componentCollision, NestedComponentMeta>(_componentCollision, {
+  componentType: "option",
+});
 
 // owners:
 // DropDownButton
@@ -236,35 +248,38 @@ type IDropDownOptionsProps = React.PropsWithChildren<{
   titleRender?: (...params: any) => React.ReactNode;
   titleComponent?: React.ComponentType<any>;
 }>
-const _componentDropDownOptions = memo(
-  (props: IDropDownOptionsProps) => {
-    return React.createElement(NestedOption<IDropDownOptionsProps>, { ...props });
-  }
-);
-
-const DropDownOptions: typeof _componentDropDownOptions & IElementDescriptor = Object.assign(_componentDropDownOptions, {
-  OptionName: "dropDownOptions",
-  DefaultsProps: {
-    defaultHeight: "height",
-    defaultPosition: "position",
-    defaultVisible: "visible",
-    defaultWidth: "width"
-  },
-  ExpectedChildren: {
-    animation: { optionName: "animation", isCollectionItem: false },
-    position: { optionName: "position", isCollectionItem: false },
-    toolbarItem: { optionName: "toolbarItems", isCollectionItem: true }
-  },
-  TemplateProps: [{
-    tmplOption: "contentTemplate",
-    render: "contentRender",
-    component: "contentComponent"
-  }, {
-    tmplOption: "titleTemplate",
-    render: "titleRender",
-    component: "titleComponent"
-  }],
-})
+const _componentDropDownOptions = (props: IDropDownOptionsProps) => {
+  return React.createElement(NestedOption<IDropDownOptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "dropDownOptions",
+      DefaultsProps: {
+        defaultHeight: "height",
+        defaultPosition: "position",
+        defaultVisible: "visible",
+        defaultWidth: "width"
+      },
+      ExpectedChildren: {
+        animation: { optionName: "animation", isCollectionItem: false },
+        position: { optionName: "position", isCollectionItem: false },
+        toolbarItem: { optionName: "toolbarItems", isCollectionItem: true }
+      },
+      TemplateProps: [{
+        tmplOption: "contentTemplate",
+        render: "contentRender",
+        component: "contentComponent"
+      }, {
+        tmplOption: "titleTemplate",
+        render: "titleRender",
+        component: "titleComponent"
+      }],
+    },
+  });
+};
+
+const DropDownOptions = Object.assign<typeof _componentDropDownOptions, NestedComponentMeta>(_componentDropDownOptions, {
+  componentType: "option",
+});
 
 // owners:
 // Hide
@@ -275,18 +290,21 @@ type IFromProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentFrom = memo(
-  (props: IFromProps) => {
-    return React.createElement(NestedOption<IFromProps>, { ...props });
-  }
-);
-
-const From: typeof _componentFrom & IElementDescriptor = Object.assign(_componentFrom, {
-  OptionName: "from",
-  ExpectedChildren: {
-    position: { optionName: "position", isCollectionItem: false }
-  },
-})
+const _componentFrom = (props: IFromProps) => {
+  return React.createElement(NestedOption<IFromProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "from",
+      ExpectedChildren: {
+        position: { optionName: "position", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const From = Object.assign<typeof _componentFrom, NestedComponentMeta>(_componentFrom, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -302,19 +320,22 @@ type IHideProps = React.PropsWithChildren<{
   to?: AnimationState;
   type?: "css" | "fade" | "fadeIn" | "fadeOut" | "pop" | "slide" | "slideIn" | "slideOut";
 }>
-const _componentHide = memo(
-  (props: IHideProps) => {
-    return React.createElement(NestedOption<IHideProps>, { ...props });
-  }
-);
-
-const Hide: typeof _componentHide & IElementDescriptor = Object.assign(_componentHide, {
-  OptionName: "hide",
-  ExpectedChildren: {
-    from: { optionName: "from", isCollectionItem: false },
-    to: { optionName: "to", isCollectionItem: false }
-  },
-})
+const _componentHide = (props: IHideProps) => {
+  return React.createElement(NestedOption<IHideProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hide",
+      ExpectedChildren: {
+        from: { optionName: "from", isCollectionItem: false },
+        to: { optionName: "to", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Hide = Object.assign<typeof _componentHide, NestedComponentMeta>(_componentHide, {
+  componentType: "option",
+});
 
 // owners:
 // DropDownButton
@@ -330,21 +351,24 @@ type IItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentItem = memo(
-  (props: IItemProps) => {
-    return React.createElement(NestedOption<IItemProps>, { ...props });
-  }
-);
-
-const Item: typeof _componentItem & IElementDescriptor = Object.assign(_componentItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentItem = (props: IItemProps) => {
+  return React.createElement(NestedOption<IItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const Item = Object.assign<typeof _componentItem, NestedComponentMeta>(_componentItem, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -352,15 +376,18 @@ type IMyProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentMy = memo(
-  (props: IMyProps) => {
-    return React.createElement(NestedOption<IMyProps>, { ...props });
-  }
-);
+const _componentMy = (props: IMyProps) => {
+  return React.createElement(NestedOption<IMyProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "my",
+    },
+  });
+};
 
-const My: typeof _componentMy & IElementDescriptor = Object.assign(_componentMy, {
-  OptionName: "my",
-})
+const My = Object.assign<typeof _componentMy, NestedComponentMeta>(_componentMy, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -368,15 +395,18 @@ type IOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentOffset = memo(
-  (props: IOffsetProps) => {
-    return React.createElement(NestedOption<IOffsetProps>, { ...props });
-  }
-);
+const _componentOffset = (props: IOffsetProps) => {
+  return React.createElement(NestedOption<IOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "offset",
+    },
+  });
+};
 
-const Offset: typeof _componentOffset & IElementDescriptor = Object.assign(_componentOffset, {
-  OptionName: "offset",
-})
+const Offset = Object.assign<typeof _componentOffset, NestedComponentMeta>(_componentOffset, {
+  componentType: "option",
+});
 
 // owners:
 // From
@@ -405,15 +435,18 @@ type IPositionProps = React.PropsWithChildren<{
     y?: number;
   };
 }>
-const _componentPosition = memo(
-  (props: IPositionProps) => {
-    return React.createElement(NestedOption<IPositionProps>, { ...props });
-  }
-);
+const _componentPosition = (props: IPositionProps) => {
+  return React.createElement(NestedOption<IPositionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "position",
+    },
+  });
+};
 
-const Position: typeof _componentPosition & IElementDescriptor = Object.assign(_componentPosition, {
-  OptionName: "position",
-})
+const Position = Object.assign<typeof _componentPosition, NestedComponentMeta>(_componentPosition, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -429,15 +462,18 @@ type IShowProps = React.PropsWithChildren<{
   to?: AnimationState;
   type?: "css" | "fade" | "fadeIn" | "fadeOut" | "pop" | "slide" | "slideIn" | "slideOut";
 }>
-const _componentShow = memo(
-  (props: IShowProps) => {
-    return React.createElement(NestedOption<IShowProps>, { ...props });
-  }
-);
+const _componentShow = (props: IShowProps) => {
+  return React.createElement(NestedOption<IShowProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "show",
+    },
+  });
+};
 
-const Show: typeof _componentShow & IElementDescriptor = Object.assign(_componentShow, {
-  OptionName: "show",
-})
+const Show = Object.assign<typeof _componentShow, NestedComponentMeta>(_componentShow, {
+  componentType: "option",
+});
 
 // owners:
 // Hide
@@ -448,15 +484,18 @@ type IToProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentTo = memo(
-  (props: IToProps) => {
-    return React.createElement(NestedOption<IToProps>, { ...props });
-  }
-);
+const _componentTo = (props: IToProps) => {
+  return React.createElement(NestedOption<IToProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "to",
+    },
+  });
+};
 
-const To: typeof _componentTo & IElementDescriptor = Object.assign(_componentTo, {
-  OptionName: "to",
-})
+const To = Object.assign<typeof _componentTo, NestedComponentMeta>(_componentTo, {
+  componentType: "option",
+});
 
 // owners:
 // DropDownOptions
@@ -479,25 +518,28 @@ type IToolbarItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentToolbarItem = memo(
-  (props: IToolbarItemProps) => {
-    return React.createElement(NestedOption<IToolbarItemProps>, { ...props });
-  }
-);
-
-const ToolbarItem: typeof _componentToolbarItem & IElementDescriptor = Object.assign(_componentToolbarItem, {
-  OptionName: "toolbarItems",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "menuItemTemplate",
-    render: "menuItemRender",
-    component: "menuItemComponent"
-  }, {
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentToolbarItem = (props: IToolbarItemProps) => {
+  return React.createElement(NestedOption<IToolbarItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "toolbarItems",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "menuItemTemplate",
+        render: "menuItemRender",
+        component: "menuItemComponent"
+      }, {
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const ToolbarItem = Object.assign<typeof _componentToolbarItem, NestedComponentMeta>(_componentToolbarItem, {
+  componentType: "option",
+});
 
 export default DropDownButton;
 export {
diff --git a/packages/devextreme-react/src/file-manager.ts b/packages/devextreme-react/src/file-manager.ts
index fc5ec461c6ec..59bb26303217 100644
--- a/packages/devextreme-react/src/file-manager.ts
+++ b/packages/devextreme-react/src/file-manager.ts
@@ -5,7 +5,7 @@ import dxFileManager, {
     Properties
 } from "devextreme/ui/file_manager";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { ContentReadyEvent, ContextMenuItemClickEvent, ContextMenuShowingEvent, DirectoryCreatedEvent, DirectoryCreatingEvent, DisposingEvent, ErrorOccurredEvent, FileUploadedEvent, FileUploadingEvent, InitializedEvent, ItemCopiedEvent, ItemCopyingEvent, ItemDeletedEvent, ItemDeletingEvent, ItemDownloadingEvent, ItemMovedEvent, ItemMovingEvent, ItemRenamedEvent, ItemRenamingEvent, SelectedFileOpenedEvent, ToolbarItemClickEvent, dxFileManagerContextMenuItem, dxFileManagerDetailsColumn, dxFileManagerToolbarItem } from "devextreme/ui/file_manager";
@@ -97,35 +97,41 @@ type IColumnProps = React.PropsWithChildren<{
   visibleIndex?: number;
   width?: number | string;
 }>
-const _componentColumn = memo(
-  (props: IColumnProps) => {
-    return React.createElement(NestedOption<IColumnProps>, { ...props });
-  }
-);
+const _componentColumn = (props: IColumnProps) => {
+  return React.createElement(NestedOption<IColumnProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "columns",
+      IsCollectionItem: true,
+    },
+  });
+};
 
-const Column: typeof _componentColumn & IElementDescriptor = Object.assign(_componentColumn, {
-  OptionName: "columns",
-  IsCollectionItem: true,
-})
+const Column = Object.assign<typeof _componentColumn, NestedComponentMeta>(_componentColumn, {
+  componentType: "option",
+});
 
 // owners:
 // FileManager
 type IContextMenuProps = React.PropsWithChildren<{
   items?: Array<dxFileManagerContextMenuItem | "create" | "upload" | "refresh" | "download" | "move" | "copy" | "rename" | "delete">;
 }>
-const _componentContextMenu = memo(
-  (props: IContextMenuProps) => {
-    return React.createElement(NestedOption<IContextMenuProps>, { ...props });
-  }
-);
-
-const ContextMenu: typeof _componentContextMenu & IElementDescriptor = Object.assign(_componentContextMenu, {
-  OptionName: "contextMenu",
-  ExpectedChildren: {
-    contextMenuItem: { optionName: "items", isCollectionItem: true },
-    item: { optionName: "items", isCollectionItem: true }
-  },
-})
+const _componentContextMenu = (props: IContextMenuProps) => {
+  return React.createElement(NestedOption<IContextMenuProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "contextMenu",
+      ExpectedChildren: {
+        contextMenuItem: { optionName: "items", isCollectionItem: true },
+        item: { optionName: "items", isCollectionItem: true }
+      },
+    },
+  });
+};
+
+const ContextMenu = Object.assign<typeof _componentContextMenu, NestedComponentMeta>(_componentContextMenu, {
+  componentType: "option",
+});
 
 // owners:
 // ContextMenu
@@ -142,34 +148,40 @@ type IContextMenuItemProps = React.PropsWithChildren<{
   text?: string;
   visible?: boolean;
 }>
-const _componentContextMenuItem = memo(
-  (props: IContextMenuItemProps) => {
-    return React.createElement(NestedOption<IContextMenuItemProps>, { ...props });
-  }
-);
+const _componentContextMenuItem = (props: IContextMenuItemProps) => {
+  return React.createElement(NestedOption<IContextMenuItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+    },
+  });
+};
 
-const ContextMenuItem: typeof _componentContextMenuItem & IElementDescriptor = Object.assign(_componentContextMenuItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-})
+const ContextMenuItem = Object.assign<typeof _componentContextMenuItem, NestedComponentMeta>(_componentContextMenuItem, {
+  componentType: "option",
+});
 
 // owners:
 // ItemView
 type IDetailsProps = React.PropsWithChildren<{
   columns?: Array<dxFileManagerDetailsColumn | string>;
 }>
-const _componentDetails = memo(
-  (props: IDetailsProps) => {
-    return React.createElement(NestedOption<IDetailsProps>, { ...props });
-  }
-);
-
-const Details: typeof _componentDetails & IElementDescriptor = Object.assign(_componentDetails, {
-  OptionName: "details",
-  ExpectedChildren: {
-    column: { optionName: "columns", isCollectionItem: true }
-  },
-})
+const _componentDetails = (props: IDetailsProps) => {
+  return React.createElement(NestedOption<IDetailsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "details",
+      ExpectedChildren: {
+        column: { optionName: "columns", isCollectionItem: true }
+      },
+    },
+  });
+};
+
+const Details = Object.assign<typeof _componentDetails, NestedComponentMeta>(_componentDetails, {
+  componentType: "option",
+});
 
 // owners:
 // Toolbar
@@ -186,16 +198,19 @@ type IFileSelectionItemProps = React.PropsWithChildren<{
   visible?: boolean;
   widget?: "dxAutocomplete" | "dxButton" | "dxButtonGroup" | "dxCheckBox" | "dxDateBox" | "dxDropDownButton" | "dxMenu" | "dxSelectBox" | "dxSwitch" | "dxTabs" | "dxTextBox";
 }>
-const _componentFileSelectionItem = memo(
-  (props: IFileSelectionItemProps) => {
-    return React.createElement(NestedOption<IFileSelectionItemProps>, { ...props });
-  }
-);
+const _componentFileSelectionItem = (props: IFileSelectionItemProps) => {
+  return React.createElement(NestedOption<IFileSelectionItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "fileSelectionItems",
+      IsCollectionItem: true,
+    },
+  });
+};
 
-const FileSelectionItem: typeof _componentFileSelectionItem & IElementDescriptor = Object.assign(_componentFileSelectionItem, {
-  OptionName: "fileSelectionItems",
-  IsCollectionItem: true,
-})
+const FileSelectionItem = Object.assign<typeof _componentFileSelectionItem, NestedComponentMeta>(_componentFileSelectionItem, {
+  componentType: "option",
+});
 
 // owners:
 // ContextMenu
@@ -219,16 +234,19 @@ type IItemProps = React.PropsWithChildren<{
   showText?: "always" | "inMenu";
   widget?: "dxAutocomplete" | "dxButton" | "dxButtonGroup" | "dxCheckBox" | "dxDateBox" | "dxDropDownButton" | "dxMenu" | "dxSelectBox" | "dxSwitch" | "dxTabs" | "dxTextBox";
 }>
-const _componentItem = memo(
-  (props: IItemProps) => {
-    return React.createElement(NestedOption<IItemProps>, { ...props });
-  }
-);
+const _componentItem = (props: IItemProps) => {
+  return React.createElement(NestedOption<IItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+    },
+  });
+};
 
-const Item: typeof _componentItem & IElementDescriptor = Object.assign(_componentItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-})
+const Item = Object.assign<typeof _componentItem, NestedComponentMeta>(_componentItem, {
+  componentType: "option",
+});
 
 // owners:
 // FileManager
@@ -240,18 +258,21 @@ type IItemViewProps = React.PropsWithChildren<{
   showFolders?: boolean;
   showParentFolder?: boolean;
 }>
-const _componentItemView = memo(
-  (props: IItemViewProps) => {
-    return React.createElement(NestedOption<IItemViewProps>, { ...props });
-  }
-);
-
-const ItemView: typeof _componentItemView & IElementDescriptor = Object.assign(_componentItemView, {
-  OptionName: "itemView",
-  ExpectedChildren: {
-    details: { optionName: "details", isCollectionItem: false }
-  },
-})
+const _componentItemView = (props: IItemViewProps) => {
+  return React.createElement(NestedOption<IItemViewProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "itemView",
+      ExpectedChildren: {
+        details: { optionName: "details", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const ItemView = Object.assign<typeof _componentItemView, NestedComponentMeta>(_componentItemView, {
+  componentType: "option",
+});
 
 // owners:
 // FileManager
@@ -259,15 +280,18 @@ type INotificationsProps = React.PropsWithChildren<{
   showPanel?: boolean;
   showPopup?: boolean;
 }>
-const _componentNotifications = memo(
-  (props: INotificationsProps) => {
-    return React.createElement(NestedOption<INotificationsProps>, { ...props });
-  }
-);
+const _componentNotifications = (props: INotificationsProps) => {
+  return React.createElement(NestedOption<INotificationsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "notifications",
+    },
+  });
+};
 
-const Notifications: typeof _componentNotifications & IElementDescriptor = Object.assign(_componentNotifications, {
-  OptionName: "notifications",
-})
+const Notifications = Object.assign<typeof _componentNotifications, NestedComponentMeta>(_componentNotifications, {
+  componentType: "option",
+});
 
 // owners:
 // FileManager
@@ -280,15 +304,18 @@ type IPermissionsProps = React.PropsWithChildren<{
   rename?: boolean;
   upload?: boolean;
 }>
-const _componentPermissions = memo(
-  (props: IPermissionsProps) => {
-    return React.createElement(NestedOption<IPermissionsProps>, { ...props });
-  }
-);
+const _componentPermissions = (props: IPermissionsProps) => {
+  return React.createElement(NestedOption<IPermissionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "permissions",
+    },
+  });
+};
 
-const Permissions: typeof _componentPermissions & IElementDescriptor = Object.assign(_componentPermissions, {
-  OptionName: "permissions",
-})
+const Permissions = Object.assign<typeof _componentPermissions, NestedComponentMeta>(_componentPermissions, {
+  componentType: "option",
+});
 
 // owners:
 // FileManager
@@ -296,20 +323,23 @@ type IToolbarProps = React.PropsWithChildren<{
   fileSelectionItems?: Array<dxFileManagerToolbarItem | "showNavPane" | "create" | "upload" | "refresh" | "switchView" | "download" | "move" | "copy" | "rename" | "delete" | "clearSelection" | "separator">;
   items?: Array<dxFileManagerToolbarItem | "showNavPane" | "create" | "upload" | "refresh" | "switchView" | "download" | "move" | "copy" | "rename" | "delete" | "clearSelection" | "separator">;
 }>
-const _componentToolbar = memo(
-  (props: IToolbarProps) => {
-    return React.createElement(NestedOption<IToolbarProps>, { ...props });
-  }
-);
-
-const Toolbar: typeof _componentToolbar & IElementDescriptor = Object.assign(_componentToolbar, {
-  OptionName: "toolbar",
-  ExpectedChildren: {
-    fileSelectionItem: { optionName: "fileSelectionItems", isCollectionItem: true },
-    item: { optionName: "items", isCollectionItem: true },
-    toolbarItem: { optionName: "items", isCollectionItem: true }
-  },
-})
+const _componentToolbar = (props: IToolbarProps) => {
+  return React.createElement(NestedOption<IToolbarProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "toolbar",
+      ExpectedChildren: {
+        fileSelectionItem: { optionName: "fileSelectionItems", isCollectionItem: true },
+        item: { optionName: "items", isCollectionItem: true },
+        toolbarItem: { optionName: "items", isCollectionItem: true }
+      },
+    },
+  });
+};
+
+const Toolbar = Object.assign<typeof _componentToolbar, NestedComponentMeta>(_componentToolbar, {
+  componentType: "option",
+});
 
 // owners:
 // Toolbar
@@ -326,16 +356,19 @@ type IToolbarItemProps = React.PropsWithChildren<{
   visible?: boolean;
   widget?: "dxAutocomplete" | "dxButton" | "dxButtonGroup" | "dxCheckBox" | "dxDateBox" | "dxDropDownButton" | "dxMenu" | "dxSelectBox" | "dxSwitch" | "dxTabs" | "dxTextBox";
 }>
-const _componentToolbarItem = memo(
-  (props: IToolbarItemProps) => {
-    return React.createElement(NestedOption<IToolbarItemProps>, { ...props });
-  }
-);
+const _componentToolbarItem = (props: IToolbarItemProps) => {
+  return React.createElement(NestedOption<IToolbarItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+    },
+  });
+};
 
-const ToolbarItem: typeof _componentToolbarItem & IElementDescriptor = Object.assign(_componentToolbarItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-})
+const ToolbarItem = Object.assign<typeof _componentToolbarItem, NestedComponentMeta>(_componentToolbarItem, {
+  componentType: "option",
+});
 
 // owners:
 // FileManager
@@ -343,15 +376,18 @@ type IUploadProps = React.PropsWithChildren<{
   chunkSize?: number;
   maxFileSize?: number;
 }>
-const _componentUpload = memo(
-  (props: IUploadProps) => {
-    return React.createElement(NestedOption<IUploadProps>, { ...props });
-  }
-);
-
-const Upload: typeof _componentUpload & IElementDescriptor = Object.assign(_componentUpload, {
-  OptionName: "upload",
-})
+const _componentUpload = (props: IUploadProps) => {
+  return React.createElement(NestedOption<IUploadProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "upload",
+    },
+  });
+};
+
+const Upload = Object.assign<typeof _componentUpload, NestedComponentMeta>(_componentUpload, {
+  componentType: "option",
+});
 
 export default FileManager;
 export {
diff --git a/packages/devextreme-react/src/filter-builder.ts b/packages/devextreme-react/src/filter-builder.ts
index 55a46d599d25..0c98863b1a90 100644
--- a/packages/devextreme-react/src/filter-builder.ts
+++ b/packages/devextreme-react/src/filter-builder.ts
@@ -5,7 +5,7 @@ import dxFilterBuilder, {
     Properties
 } from "devextreme/ui/filter_builder";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { ContentReadyEvent, DisposingEvent, EditorPreparedEvent, EditorPreparingEvent, InitializedEvent, ValueChangedEvent, dxFilterBuilderField } from "devextreme/ui/filter_builder";
@@ -95,21 +95,24 @@ type ICustomOperationProps = React.PropsWithChildren<{
   editorRender?: (...params: any) => React.ReactNode;
   editorComponent?: React.ComponentType<any>;
 }>
-const _componentCustomOperation = memo(
-  (props: ICustomOperationProps) => {
-    return React.createElement(NestedOption<ICustomOperationProps>, { ...props });
-  }
-);
+const _componentCustomOperation = (props: ICustomOperationProps) => {
+  return React.createElement(NestedOption<ICustomOperationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "customOperations",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "editorTemplate",
+        render: "editorRender",
+        component: "editorComponent"
+      }],
+    },
+  });
+};
 
-const CustomOperation: typeof _componentCustomOperation & IElementDescriptor = Object.assign(_componentCustomOperation, {
-  OptionName: "customOperations",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "editorTemplate",
-    render: "editorRender",
-    component: "editorComponent"
-  }],
-})
+const CustomOperation = Object.assign<typeof _componentCustomOperation, NestedComponentMeta>(_componentCustomOperation, {
+  componentType: "option",
+});
 
 // owners:
 // FilterBuilder
@@ -135,25 +138,28 @@ type IFieldProps = React.PropsWithChildren<{
   editorRender?: (...params: any) => React.ReactNode;
   editorComponent?: React.ComponentType<any>;
 }>
-const _componentField = memo(
-  (props: IFieldProps) => {
-    return React.createElement(NestedOption<IFieldProps>, { ...props });
-  }
-);
+const _componentField = (props: IFieldProps) => {
+  return React.createElement(NestedOption<IFieldProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "fields",
+      IsCollectionItem: true,
+      ExpectedChildren: {
+        format: { optionName: "format", isCollectionItem: false },
+        lookup: { optionName: "lookup", isCollectionItem: false }
+      },
+      TemplateProps: [{
+        tmplOption: "editorTemplate",
+        render: "editorRender",
+        component: "editorComponent"
+      }],
+    },
+  });
+};
 
-const Field: typeof _componentField & IElementDescriptor = Object.assign(_componentField, {
-  OptionName: "fields",
-  IsCollectionItem: true,
-  ExpectedChildren: {
-    format: { optionName: "format", isCollectionItem: false },
-    lookup: { optionName: "lookup", isCollectionItem: false }
-  },
-  TemplateProps: [{
-    tmplOption: "editorTemplate",
-    render: "editorRender",
-    component: "editorComponent"
-  }],
-})
+const Field = Object.assign<typeof _componentField, NestedComponentMeta>(_componentField, {
+  componentType: "option",
+});
 
 // owners:
 // FilterBuilder
@@ -172,15 +178,18 @@ type IFilterOperationDescriptionsProps = React.PropsWithChildren<{
   notEqual?: string;
   startsWith?: string;
 }>
-const _componentFilterOperationDescriptions = memo(
-  (props: IFilterOperationDescriptionsProps) => {
-    return React.createElement(NestedOption<IFilterOperationDescriptionsProps>, { ...props });
-  }
-);
+const _componentFilterOperationDescriptions = (props: IFilterOperationDescriptionsProps) => {
+  return React.createElement(NestedOption<IFilterOperationDescriptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "filterOperationDescriptions",
+    },
+  });
+};
 
-const FilterOperationDescriptions: typeof _componentFilterOperationDescriptions & IElementDescriptor = Object.assign(_componentFilterOperationDescriptions, {
-  OptionName: "filterOperationDescriptions",
-})
+const FilterOperationDescriptions = Object.assign<typeof _componentFilterOperationDescriptions, NestedComponentMeta>(_componentFilterOperationDescriptions, {
+  componentType: "option",
+});
 
 // owners:
 // Field
@@ -192,15 +201,18 @@ type IFormatProps = React.PropsWithChildren<{
   type?: "billions" | "currency" | "day" | "decimal" | "exponential" | "fixedPoint" | "largeNumber" | "longDate" | "longTime" | "millions" | "millisecond" | "month" | "monthAndDay" | "monthAndYear" | "percent" | "quarter" | "quarterAndYear" | "shortDate" | "shortTime" | "thousands" | "trillions" | "year" | "dayOfWeek" | "hour" | "longDateLongTime" | "minute" | "second" | "shortDateShortTime";
   useCurrencyAccountingStyle?: boolean;
 }>
-const _componentFormat = memo(
-  (props: IFormatProps) => {
-    return React.createElement(NestedOption<IFormatProps>, { ...props });
-  }
-);
+const _componentFormat = (props: IFormatProps) => {
+  return React.createElement(NestedOption<IFormatProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "format",
+    },
+  });
+};
 
-const Format: typeof _componentFormat & IElementDescriptor = Object.assign(_componentFormat, {
-  OptionName: "format",
-})
+const Format = Object.assign<typeof _componentFormat, NestedComponentMeta>(_componentFormat, {
+  componentType: "option",
+});
 
 // owners:
 // FilterBuilder
@@ -210,15 +222,18 @@ type IGroupOperationDescriptionsProps = React.PropsWithChildren<{
   notOr?: string;
   or?: string;
 }>
-const _componentGroupOperationDescriptions = memo(
-  (props: IGroupOperationDescriptionsProps) => {
-    return React.createElement(NestedOption<IGroupOperationDescriptionsProps>, { ...props });
-  }
-);
+const _componentGroupOperationDescriptions = (props: IGroupOperationDescriptionsProps) => {
+  return React.createElement(NestedOption<IGroupOperationDescriptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "groupOperationDescriptions",
+    },
+  });
+};
 
-const GroupOperationDescriptions: typeof _componentGroupOperationDescriptions & IElementDescriptor = Object.assign(_componentGroupOperationDescriptions, {
-  OptionName: "groupOperationDescriptions",
-})
+const GroupOperationDescriptions = Object.assign<typeof _componentGroupOperationDescriptions, NestedComponentMeta>(_componentGroupOperationDescriptions, {
+  componentType: "option",
+});
 
 // owners:
 // Field
@@ -228,15 +243,18 @@ type ILookupProps = React.PropsWithChildren<{
   displayExpr?: ((data: any) => string) | string;
   valueExpr?: ((data: any) => string | number | boolean) | string;
 }>
-const _componentLookup = memo(
-  (props: ILookupProps) => {
-    return React.createElement(NestedOption<ILookupProps>, { ...props });
-  }
-);
+const _componentLookup = (props: ILookupProps) => {
+  return React.createElement(NestedOption<ILookupProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "lookup",
+    },
+  });
+};
 
-const Lookup: typeof _componentLookup & IElementDescriptor = Object.assign(_componentLookup, {
-  OptionName: "lookup",
-})
+const Lookup = Object.assign<typeof _componentLookup, NestedComponentMeta>(_componentLookup, {
+  componentType: "option",
+});
 
 export default FilterBuilder;
 export {
diff --git a/packages/devextreme-react/src/form.ts b/packages/devextreme-react/src/form.ts
index cad8dda89766..c45e99498a8b 100644
--- a/packages/devextreme-react/src/form.ts
+++ b/packages/devextreme-react/src/form.ts
@@ -5,7 +5,7 @@ import dxForm, {
     Properties
 } from "devextreme/ui/form";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { ContentReadyEvent, DisposingEvent, EditorEnterKeyEvent, InitializedEvent, dxFormButtonItem, dxFormEmptyItem, dxFormGroupItem, dxFormSimpleItem, dxFormTabbedItem } from "devextreme/ui/form";
@@ -95,19 +95,22 @@ type IAsyncRuleProps = React.PropsWithChildren<{
   type?: "required" | "numeric" | "range" | "stringLength" | "custom" | "compare" | "pattern" | "email" | "async";
   validationCallback?: ((options: { column: Record<string, any>, data: Record<string, any>, formItem: Record<string, any>, rule: Record<string, any>, validator: Record<string, any>, value: string | number }) => any);
 }>
-const _componentAsyncRule = memo(
-  (props: IAsyncRuleProps) => {
-    return React.createElement(NestedOption<IAsyncRuleProps>, { ...props });
-  }
-);
-
-const AsyncRule: typeof _componentAsyncRule & IElementDescriptor = Object.assign(_componentAsyncRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "async"
-  },
-})
+const _componentAsyncRule = (props: IAsyncRuleProps) => {
+  return React.createElement(NestedOption<IAsyncRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "async"
+      },
+    },
+  });
+};
+
+const AsyncRule = Object.assign<typeof _componentAsyncRule, NestedComponentMeta>(_componentAsyncRule, {
+  componentType: "option",
+});
 
 // owners:
 // Form
@@ -122,22 +125,25 @@ type IButtonItemProps = React.PropsWithChildren<{
   visible?: boolean;
   visibleIndex?: number;
 }>
-const _componentButtonItem = memo(
-  (props: IButtonItemProps) => {
-    return React.createElement(NestedOption<IButtonItemProps>, { ...props });
-  }
-);
-
-const ButtonItem: typeof _componentButtonItem & IElementDescriptor = Object.assign(_componentButtonItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  ExpectedChildren: {
-    buttonOptions: { optionName: "buttonOptions", isCollectionItem: false }
-  },
-  PredefinedProps: {
-    itemType: "button"
-  },
-})
+const _componentButtonItem = (props: IButtonItemProps) => {
+  return React.createElement(NestedOption<IButtonItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      ExpectedChildren: {
+        buttonOptions: { optionName: "buttonOptions", isCollectionItem: false }
+      },
+      PredefinedProps: {
+        itemType: "button"
+      },
+    },
+  });
+};
+
+const ButtonItem = Object.assign<typeof _componentButtonItem, NestedComponentMeta>(_componentButtonItem, {
+  componentType: "option",
+});
 
 // owners:
 // ButtonItem
@@ -170,20 +176,23 @@ type IButtonOptionsProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentButtonOptions = memo(
-  (props: IButtonOptionsProps) => {
-    return React.createElement(NestedOption<IButtonOptionsProps>, { ...props });
-  }
-);
-
-const ButtonOptions: typeof _componentButtonOptions & IElementDescriptor = Object.assign(_componentButtonOptions, {
-  OptionName: "buttonOptions",
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentButtonOptions = (props: IButtonOptionsProps) => {
+  return React.createElement(NestedOption<IButtonOptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "buttonOptions",
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const ButtonOptions = Object.assign<typeof _componentButtonOptions, NestedComponentMeta>(_componentButtonOptions, {
+  componentType: "option",
+});
 
 // owners:
 // Form
@@ -195,15 +204,18 @@ type IColCountByScreenProps = React.PropsWithChildren<{
   sm?: number;
   xs?: number;
 }>
-const _componentColCountByScreen = memo(
-  (props: IColCountByScreenProps) => {
-    return React.createElement(NestedOption<IColCountByScreenProps>, { ...props });
-  }
-);
+const _componentColCountByScreen = (props: IColCountByScreenProps) => {
+  return React.createElement(NestedOption<IColCountByScreenProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "colCountByScreen",
+    },
+  });
+};
 
-const ColCountByScreen: typeof _componentColCountByScreen & IElementDescriptor = Object.assign(_componentColCountByScreen, {
-  OptionName: "colCountByScreen",
-})
+const ColCountByScreen = Object.assign<typeof _componentColCountByScreen, NestedComponentMeta>(_componentColCountByScreen, {
+  componentType: "option",
+});
 
 // owners:
 // SimpleItem
@@ -214,19 +226,22 @@ type ICompareRuleProps = React.PropsWithChildren<{
   message?: string;
   type?: "required" | "numeric" | "range" | "stringLength" | "custom" | "compare" | "pattern" | "email" | "async";
 }>
-const _componentCompareRule = memo(
-  (props: ICompareRuleProps) => {
-    return React.createElement(NestedOption<ICompareRuleProps>, { ...props });
-  }
-);
-
-const CompareRule: typeof _componentCompareRule & IElementDescriptor = Object.assign(_componentCompareRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "compare"
-  },
-})
+const _componentCompareRule = (props: ICompareRuleProps) => {
+  return React.createElement(NestedOption<ICompareRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "compare"
+      },
+    },
+  });
+};
+
+const CompareRule = Object.assign<typeof _componentCompareRule, NestedComponentMeta>(_componentCompareRule, {
+  componentType: "option",
+});
 
 // owners:
 // SimpleItem
@@ -237,19 +252,22 @@ type ICustomRuleProps = React.PropsWithChildren<{
   type?: "required" | "numeric" | "range" | "stringLength" | "custom" | "compare" | "pattern" | "email" | "async";
   validationCallback?: ((options: { column: Record<string, any>, data: Record<string, any>, formItem: Record<string, any>, rule: Record<string, any>, validator: Record<string, any>, value: string | number }) => boolean);
 }>
-const _componentCustomRule = memo(
-  (props: ICustomRuleProps) => {
-    return React.createElement(NestedOption<ICustomRuleProps>, { ...props });
-  }
-);
-
-const CustomRule: typeof _componentCustomRule & IElementDescriptor = Object.assign(_componentCustomRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "custom"
-  },
-})
+const _componentCustomRule = (props: ICustomRuleProps) => {
+  return React.createElement(NestedOption<ICustomRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "custom"
+      },
+    },
+  });
+};
+
+const CustomRule = Object.assign<typeof _componentCustomRule, NestedComponentMeta>(_componentCustomRule, {
+  componentType: "option",
+});
 
 // owners:
 // SimpleItem
@@ -258,19 +276,22 @@ type IEmailRuleProps = React.PropsWithChildren<{
   message?: string;
   type?: "required" | "numeric" | "range" | "stringLength" | "custom" | "compare" | "pattern" | "email" | "async";
 }>
-const _componentEmailRule = memo(
-  (props: IEmailRuleProps) => {
-    return React.createElement(NestedOption<IEmailRuleProps>, { ...props });
-  }
-);
-
-const EmailRule: typeof _componentEmailRule & IElementDescriptor = Object.assign(_componentEmailRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "email"
-  },
-})
+const _componentEmailRule = (props: IEmailRuleProps) => {
+  return React.createElement(NestedOption<IEmailRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "email"
+      },
+    },
+  });
+};
+
+const EmailRule = Object.assign<typeof _componentEmailRule, NestedComponentMeta>(_componentEmailRule, {
+  componentType: "option",
+});
 
 // owners:
 // Form
@@ -282,19 +303,22 @@ type IEmptyItemProps = React.PropsWithChildren<{
   visible?: boolean;
   visibleIndex?: number;
 }>
-const _componentEmptyItem = memo(
-  (props: IEmptyItemProps) => {
-    return React.createElement(NestedOption<IEmptyItemProps>, { ...props });
-  }
-);
-
-const EmptyItem: typeof _componentEmptyItem & IElementDescriptor = Object.assign(_componentEmptyItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    itemType: "empty"
-  },
-})
+const _componentEmptyItem = (props: IEmptyItemProps) => {
+  return React.createElement(NestedOption<IEmptyItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        itemType: "empty"
+      },
+    },
+  });
+};
+
+const EmptyItem = Object.assign<typeof _componentEmptyItem, NestedComponentMeta>(_componentEmptyItem, {
+  componentType: "option",
+});
 
 // owners:
 // Form
@@ -322,31 +346,34 @@ type IGroupItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentGroupItem = memo(
-  (props: IGroupItemProps) => {
-    return React.createElement(NestedOption<IGroupItemProps>, { ...props });
-  }
-);
-
-const GroupItem: typeof _componentGroupItem & IElementDescriptor = Object.assign(_componentGroupItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  ExpectedChildren: {
-    colCountByScreen: { optionName: "colCountByScreen", isCollectionItem: false }
-  },
-  TemplateProps: [{
-    tmplOption: "captionTemplate",
-    render: "captionRender",
-    component: "captionComponent"
-  }, {
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-  PredefinedProps: {
-    itemType: "group"
-  },
-})
+const _componentGroupItem = (props: IGroupItemProps) => {
+  return React.createElement(NestedOption<IGroupItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      ExpectedChildren: {
+        colCountByScreen: { optionName: "colCountByScreen", isCollectionItem: false }
+      },
+      TemplateProps: [{
+        tmplOption: "captionTemplate",
+        render: "captionRender",
+        component: "captionComponent"
+      }, {
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+      PredefinedProps: {
+        itemType: "group"
+      },
+    },
+  });
+};
+
+const GroupItem = Object.assign<typeof _componentGroupItem, NestedComponentMeta>(_componentGroupItem, {
+  componentType: "option",
+});
 
 // owners:
 // TabPanelOptions
@@ -419,29 +446,32 @@ type IItemProps = React.PropsWithChildren<{
   captionRender?: (...params: any) => React.ReactNode;
   captionComponent?: React.ComponentType<any>;
 }>
-const _componentItem = memo(
-  (props: IItemProps) => {
-    return React.createElement(NestedOption<IItemProps>, { ...props });
-  }
-);
-
-const Item: typeof _componentItem & IElementDescriptor = Object.assign(_componentItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "tabTemplate",
-    render: "tabRender",
-    component: "tabComponent"
-  }, {
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }, {
-    tmplOption: "captionTemplate",
-    render: "captionRender",
-    component: "captionComponent"
-  }],
-})
+const _componentItem = (props: IItemProps) => {
+  return React.createElement(NestedOption<IItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "tabTemplate",
+        render: "tabRender",
+        component: "tabComponent"
+      }, {
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }, {
+        tmplOption: "captionTemplate",
+        render: "captionRender",
+        component: "captionComponent"
+      }],
+    },
+  });
+};
+
+const Item = Object.assign<typeof _componentItem, NestedComponentMeta>(_componentItem, {
+  componentType: "option",
+});
 
 // owners:
 // SimpleItem
@@ -455,20 +485,23 @@ type ILabelProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentLabel = memo(
-  (props: ILabelProps) => {
-    return React.createElement(NestedOption<ILabelProps>, { ...props });
-  }
-);
-
-const Label: typeof _componentLabel & IElementDescriptor = Object.assign(_componentLabel, {
-  OptionName: "label",
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentLabel = (props: ILabelProps) => {
+  return React.createElement(NestedOption<ILabelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "label",
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const Label = Object.assign<typeof _componentLabel, NestedComponentMeta>(_componentLabel, {
+  componentType: "option",
+});
 
 // owners:
 // SimpleItem
@@ -477,19 +510,22 @@ type INumericRuleProps = React.PropsWithChildren<{
   message?: string;
   type?: "required" | "numeric" | "range" | "stringLength" | "custom" | "compare" | "pattern" | "email" | "async";
 }>
-const _componentNumericRule = memo(
-  (props: INumericRuleProps) => {
-    return React.createElement(NestedOption<INumericRuleProps>, { ...props });
-  }
-);
-
-const NumericRule: typeof _componentNumericRule & IElementDescriptor = Object.assign(_componentNumericRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "numeric"
-  },
-})
+const _componentNumericRule = (props: INumericRuleProps) => {
+  return React.createElement(NestedOption<INumericRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "numeric"
+      },
+    },
+  });
+};
+
+const NumericRule = Object.assign<typeof _componentNumericRule, NestedComponentMeta>(_componentNumericRule, {
+  componentType: "option",
+});
 
 // owners:
 // SimpleItem
@@ -499,19 +535,22 @@ type IPatternRuleProps = React.PropsWithChildren<{
   pattern?: RegExp | string;
   type?: "required" | "numeric" | "range" | "stringLength" | "custom" | "compare" | "pattern" | "email" | "async";
 }>
-const _componentPatternRule = memo(
-  (props: IPatternRuleProps) => {
-    return React.createElement(NestedOption<IPatternRuleProps>, { ...props });
-  }
-);
-
-const PatternRule: typeof _componentPatternRule & IElementDescriptor = Object.assign(_componentPatternRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "pattern"
-  },
-})
+const _componentPatternRule = (props: IPatternRuleProps) => {
+  return React.createElement(NestedOption<IPatternRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "pattern"
+      },
+    },
+  });
+};
+
+const PatternRule = Object.assign<typeof _componentPatternRule, NestedComponentMeta>(_componentPatternRule, {
+  componentType: "option",
+});
 
 // owners:
 // SimpleItem
@@ -523,19 +562,22 @@ type IRangeRuleProps = React.PropsWithChildren<{
   reevaluate?: boolean;
   type?: "required" | "numeric" | "range" | "stringLength" | "custom" | "compare" | "pattern" | "email" | "async";
 }>
-const _componentRangeRule = memo(
-  (props: IRangeRuleProps) => {
-    return React.createElement(NestedOption<IRangeRuleProps>, { ...props });
-  }
-);
-
-const RangeRule: typeof _componentRangeRule & IElementDescriptor = Object.assign(_componentRangeRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "range"
-  },
-})
+const _componentRangeRule = (props: IRangeRuleProps) => {
+  return React.createElement(NestedOption<IRangeRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "range"
+      },
+    },
+  });
+};
+
+const RangeRule = Object.assign<typeof _componentRangeRule, NestedComponentMeta>(_componentRangeRule, {
+  componentType: "option",
+});
 
 // owners:
 // SimpleItem
@@ -544,19 +586,22 @@ type IRequiredRuleProps = React.PropsWithChildren<{
   trim?: boolean;
   type?: "required" | "numeric" | "range" | "stringLength" | "custom" | "compare" | "pattern" | "email" | "async";
 }>
-const _componentRequiredRule = memo(
-  (props: IRequiredRuleProps) => {
-    return React.createElement(NestedOption<IRequiredRuleProps>, { ...props });
-  }
-);
-
-const RequiredRule: typeof _componentRequiredRule & IElementDescriptor = Object.assign(_componentRequiredRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "required"
-  },
-})
+const _componentRequiredRule = (props: IRequiredRuleProps) => {
+  return React.createElement(NestedOption<IRequiredRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "required"
+      },
+    },
+  });
+};
+
+const RequiredRule = Object.assign<typeof _componentRequiredRule, NestedComponentMeta>(_componentRequiredRule, {
+  componentType: "option",
+});
 
 // owners:
 // Form
@@ -585,37 +630,40 @@ type ISimpleItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentSimpleItem = memo(
-  (props: ISimpleItemProps) => {
-    return React.createElement(NestedOption<ISimpleItemProps>, { ...props });
-  }
-);
-
-const SimpleItem: typeof _componentSimpleItem & IElementDescriptor = Object.assign(_componentSimpleItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  ExpectedChildren: {
-    AsyncRule: { optionName: "validationRules", isCollectionItem: true },
-    CompareRule: { optionName: "validationRules", isCollectionItem: true },
-    CustomRule: { optionName: "validationRules", isCollectionItem: true },
-    EmailRule: { optionName: "validationRules", isCollectionItem: true },
-    label: { optionName: "label", isCollectionItem: false },
-    NumericRule: { optionName: "validationRules", isCollectionItem: true },
-    PatternRule: { optionName: "validationRules", isCollectionItem: true },
-    RangeRule: { optionName: "validationRules", isCollectionItem: true },
-    RequiredRule: { optionName: "validationRules", isCollectionItem: true },
-    StringLengthRule: { optionName: "validationRules", isCollectionItem: true },
-    validationRule: { optionName: "validationRules", isCollectionItem: true }
-  },
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-  PredefinedProps: {
-    itemType: "simple"
-  },
-})
+const _componentSimpleItem = (props: ISimpleItemProps) => {
+  return React.createElement(NestedOption<ISimpleItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      ExpectedChildren: {
+        AsyncRule: { optionName: "validationRules", isCollectionItem: true },
+        CompareRule: { optionName: "validationRules", isCollectionItem: true },
+        CustomRule: { optionName: "validationRules", isCollectionItem: true },
+        EmailRule: { optionName: "validationRules", isCollectionItem: true },
+        label: { optionName: "label", isCollectionItem: false },
+        NumericRule: { optionName: "validationRules", isCollectionItem: true },
+        PatternRule: { optionName: "validationRules", isCollectionItem: true },
+        RangeRule: { optionName: "validationRules", isCollectionItem: true },
+        RequiredRule: { optionName: "validationRules", isCollectionItem: true },
+        StringLengthRule: { optionName: "validationRules", isCollectionItem: true },
+        validationRule: { optionName: "validationRules", isCollectionItem: true }
+      },
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+      PredefinedProps: {
+        itemType: "simple"
+      },
+    },
+  });
+};
+
+const SimpleItem = Object.assign<typeof _componentSimpleItem, NestedComponentMeta>(_componentSimpleItem, {
+  componentType: "option",
+});
 
 // owners:
 // SimpleItem
@@ -627,19 +675,22 @@ type IStringLengthRuleProps = React.PropsWithChildren<{
   trim?: boolean;
   type?: "required" | "numeric" | "range" | "stringLength" | "custom" | "compare" | "pattern" | "email" | "async";
 }>
-const _componentStringLengthRule = memo(
-  (props: IStringLengthRuleProps) => {
-    return React.createElement(NestedOption<IStringLengthRuleProps>, { ...props });
-  }
-);
-
-const StringLengthRule: typeof _componentStringLengthRule & IElementDescriptor = Object.assign(_componentStringLengthRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "stringLength"
-  },
-})
+const _componentStringLengthRule = (props: IStringLengthRuleProps) => {
+  return React.createElement(NestedOption<IStringLengthRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "stringLength"
+      },
+    },
+  });
+};
+
+const StringLengthRule = Object.assign<typeof _componentStringLengthRule, NestedComponentMeta>(_componentStringLengthRule, {
+  componentType: "option",
+});
 
 // owners:
 // TabbedItem
@@ -664,28 +715,31 @@ type ITabProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentTab = memo(
-  (props: ITabProps) => {
-    return React.createElement(NestedOption<ITabProps>, { ...props });
-  }
-);
-
-const Tab: typeof _componentTab & IElementDescriptor = Object.assign(_componentTab, {
-  OptionName: "tabs",
-  IsCollectionItem: true,
-  ExpectedChildren: {
-    colCountByScreen: { optionName: "colCountByScreen", isCollectionItem: false }
-  },
-  TemplateProps: [{
-    tmplOption: "tabTemplate",
-    render: "tabRender",
-    component: "tabComponent"
-  }, {
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentTab = (props: ITabProps) => {
+  return React.createElement(NestedOption<ITabProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "tabs",
+      IsCollectionItem: true,
+      ExpectedChildren: {
+        colCountByScreen: { optionName: "colCountByScreen", isCollectionItem: false }
+      },
+      TemplateProps: [{
+        tmplOption: "tabTemplate",
+        render: "tabRender",
+        component: "tabComponent"
+      }, {
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const Tab = Object.assign<typeof _componentTab, NestedComponentMeta>(_componentTab, {
+  componentType: "option",
+});
 
 // owners:
 // Form
@@ -715,23 +769,26 @@ type ITabbedItemProps = React.PropsWithChildren<{
   visible?: boolean;
   visibleIndex?: number;
 }>
-const _componentTabbedItem = memo(
-  (props: ITabbedItemProps) => {
-    return React.createElement(NestedOption<ITabbedItemProps>, { ...props });
-  }
-);
-
-const TabbedItem: typeof _componentTabbedItem & IElementDescriptor = Object.assign(_componentTabbedItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  ExpectedChildren: {
-    tab: { optionName: "tabs", isCollectionItem: true },
-    tabPanelOptions: { optionName: "tabPanelOptions", isCollectionItem: false }
-  },
-  PredefinedProps: {
-    itemType: "tabbed"
-  },
-})
+const _componentTabbedItem = (props: ITabbedItemProps) => {
+  return React.createElement(NestedOption<ITabbedItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      ExpectedChildren: {
+        tab: { optionName: "tabs", isCollectionItem: true },
+        tabPanelOptions: { optionName: "tabPanelOptions", isCollectionItem: false }
+      },
+      PredefinedProps: {
+        itemType: "tabbed"
+      },
+    },
+  });
+};
+
+const TabbedItem = Object.assign<typeof _componentTabbedItem, NestedComponentMeta>(_componentTabbedItem, {
+  componentType: "option",
+});
 
 // owners:
 // TabbedItem
@@ -792,33 +849,36 @@ type ITabPanelOptionsProps = React.PropsWithChildren<{
   itemTitleRender?: (...params: any) => React.ReactNode;
   itemTitleComponent?: React.ComponentType<any>;
 }>
-const _componentTabPanelOptions = memo(
-  (props: ITabPanelOptionsProps) => {
-    return React.createElement(NestedOption<ITabPanelOptionsProps>, { ...props });
-  }
-);
-
-const TabPanelOptions: typeof _componentTabPanelOptions & IElementDescriptor = Object.assign(_componentTabPanelOptions, {
-  OptionName: "tabPanelOptions",
-  DefaultsProps: {
-    defaultItems: "items",
-    defaultSelectedIndex: "selectedIndex",
-    defaultSelectedItem: "selectedItem"
-  },
-  ExpectedChildren: {
-    item: { optionName: "items", isCollectionItem: true },
-    tabPanelOptionsItem: { optionName: "items", isCollectionItem: true }
-  },
-  TemplateProps: [{
-    tmplOption: "itemTemplate",
-    render: "itemRender",
-    component: "itemComponent"
-  }, {
-    tmplOption: "itemTitleTemplate",
-    render: "itemTitleRender",
-    component: "itemTitleComponent"
-  }],
-})
+const _componentTabPanelOptions = (props: ITabPanelOptionsProps) => {
+  return React.createElement(NestedOption<ITabPanelOptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "tabPanelOptions",
+      DefaultsProps: {
+        defaultItems: "items",
+        defaultSelectedIndex: "selectedIndex",
+        defaultSelectedItem: "selectedItem"
+      },
+      ExpectedChildren: {
+        item: { optionName: "items", isCollectionItem: true },
+        tabPanelOptionsItem: { optionName: "items", isCollectionItem: true }
+      },
+      TemplateProps: [{
+        tmplOption: "itemTemplate",
+        render: "itemRender",
+        component: "itemComponent"
+      }, {
+        tmplOption: "itemTitleTemplate",
+        render: "itemTitleRender",
+        component: "itemTitleComponent"
+      }],
+    },
+  });
+};
+
+const TabPanelOptions = Object.assign<typeof _componentTabPanelOptions, NestedComponentMeta>(_componentTabPanelOptions, {
+  componentType: "option",
+});
 
 // owners:
 // TabPanelOptions
@@ -837,25 +897,28 @@ type ITabPanelOptionsItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentTabPanelOptionsItem = memo(
-  (props: ITabPanelOptionsItemProps) => {
-    return React.createElement(NestedOption<ITabPanelOptionsItemProps>, { ...props });
-  }
-);
-
-const TabPanelOptionsItem: typeof _componentTabPanelOptionsItem & IElementDescriptor = Object.assign(_componentTabPanelOptionsItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "tabTemplate",
-    render: "tabRender",
-    component: "tabComponent"
-  }, {
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentTabPanelOptionsItem = (props: ITabPanelOptionsItemProps) => {
+  return React.createElement(NestedOption<ITabPanelOptionsItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "tabTemplate",
+        render: "tabRender",
+        component: "tabComponent"
+      }, {
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const TabPanelOptionsItem = Object.assign<typeof _componentTabPanelOptionsItem, NestedComponentMeta>(_componentTabPanelOptionsItem, {
+  componentType: "option",
+});
 
 // owners:
 // SimpleItem
@@ -872,19 +935,22 @@ type IValidationRuleProps = React.PropsWithChildren<{
   comparisonType?: "!=" | "!==" | "<" | "<=" | "==" | "===" | ">" | ">=";
   pattern?: RegExp | string;
 }>
-const _componentValidationRule = memo(
-  (props: IValidationRuleProps) => {
-    return React.createElement(NestedOption<IValidationRuleProps>, { ...props });
-  }
-);
-
-const ValidationRule: typeof _componentValidationRule & IElementDescriptor = Object.assign(_componentValidationRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "required"
-  },
-})
+const _componentValidationRule = (props: IValidationRuleProps) => {
+  return React.createElement(NestedOption<IValidationRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "required"
+      },
+    },
+  });
+};
+
+const ValidationRule = Object.assign<typeof _componentValidationRule, NestedComponentMeta>(_componentValidationRule, {
+  componentType: "option",
+});
 
 export default Form;
 export {
diff --git a/packages/devextreme-react/src/funnel.ts b/packages/devextreme-react/src/funnel.ts
index f061ff4bf5cc..83d261c44ce9 100644
--- a/packages/devextreme-react/src/funnel.ts
+++ b/packages/devextreme-react/src/funnel.ts
@@ -5,7 +5,7 @@ import dxFunnel, {
     Properties
 } from "devextreme/viz/funnel";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { DisposingEvent, DrawnEvent, ExportedEvent, ExportingEvent, FileSavingEvent, IncidentOccurredEvent, InitializedEvent, ItemClickEvent, LegendClickEvent, dxFunnelItem, FunnelLegendItem } from "devextreme/viz/funnel";
@@ -96,15 +96,18 @@ type IAdaptiveLayoutProps = React.PropsWithChildren<{
   keepLabels?: boolean;
   width?: number;
 }>
-const _componentAdaptiveLayout = memo(
-  (props: IAdaptiveLayoutProps) => {
-    return React.createElement(NestedOption<IAdaptiveLayoutProps>, { ...props });
-  }
-);
+const _componentAdaptiveLayout = (props: IAdaptiveLayoutProps) => {
+  return React.createElement(NestedOption<IAdaptiveLayoutProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "adaptiveLayout",
+    },
+  });
+};
 
-const AdaptiveLayout: typeof _componentAdaptiveLayout & IElementDescriptor = Object.assign(_componentAdaptiveLayout, {
-  OptionName: "adaptiveLayout",
-})
+const AdaptiveLayout = Object.assign<typeof _componentAdaptiveLayout, NestedComponentMeta>(_componentAdaptiveLayout, {
+  componentType: "option",
+});
 
 // owners:
 // Item
@@ -121,15 +124,18 @@ type IBorderProps = React.PropsWithChildren<{
   cornerRadius?: number;
   opacity?: number;
 }>
-const _componentBorder = memo(
-  (props: IBorderProps) => {
-    return React.createElement(NestedOption<IBorderProps>, { ...props });
-  }
-);
+const _componentBorder = (props: IBorderProps) => {
+  return React.createElement(NestedOption<IBorderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
 
-const Border: typeof _componentBorder & IElementDescriptor = Object.assign(_componentBorder, {
-  OptionName: "border",
-})
+const Border = Object.assign<typeof _componentBorder, NestedComponentMeta>(_componentBorder, {
+  componentType: "option",
+});
 
 // owners:
 // Label
@@ -139,15 +145,18 @@ type IConnectorProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentConnector = memo(
-  (props: IConnectorProps) => {
-    return React.createElement(NestedOption<IConnectorProps>, { ...props });
-  }
-);
+const _componentConnector = (props: IConnectorProps) => {
+  return React.createElement(NestedOption<IConnectorProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "connector",
+    },
+  });
+};
 
-const Connector: typeof _componentConnector & IElementDescriptor = Object.assign(_componentConnector, {
-  OptionName: "connector",
-})
+const Connector = Object.assign<typeof _componentConnector, NestedComponentMeta>(_componentConnector, {
+  componentType: "option",
+});
 
 // owners:
 // Funnel
@@ -160,15 +169,18 @@ type IExportProps = React.PropsWithChildren<{
   printingEnabled?: boolean;
   svgToCanvas?: ((svg: any, canvas: any) => any);
 }>
-const _componentExport = memo(
-  (props: IExportProps) => {
-    return React.createElement(NestedOption<IExportProps>, { ...props });
-  }
-);
+const _componentExport = (props: IExportProps) => {
+  return React.createElement(NestedOption<IExportProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "export",
+    },
+  });
+};
 
-const Export: typeof _componentExport & IElementDescriptor = Object.assign(_componentExport, {
-  OptionName: "export",
-})
+const Export = Object.assign<typeof _componentExport, NestedComponentMeta>(_componentExport, {
+  componentType: "option",
+});
 
 // owners:
 // Label
@@ -186,15 +198,18 @@ type IFontProps = React.PropsWithChildren<{
   size?: number | string;
   weight?: number;
 }>
-const _componentFont = memo(
-  (props: IFontProps) => {
-    return React.createElement(NestedOption<IFontProps>, { ...props });
-  }
-);
+const _componentFont = (props: IFontProps) => {
+  return React.createElement(NestedOption<IFontProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "font",
+    },
+  });
+};
 
-const Font: typeof _componentFont & IElementDescriptor = Object.assign(_componentFont, {
-  OptionName: "font",
-})
+const Font = Object.assign<typeof _componentFont, NestedComponentMeta>(_componentFont, {
+  componentType: "option",
+});
 
 // owners:
 // Label
@@ -207,15 +222,18 @@ type IFormatProps = React.PropsWithChildren<{
   type?: "billions" | "currency" | "day" | "decimal" | "exponential" | "fixedPoint" | "largeNumber" | "longDate" | "longTime" | "millions" | "millisecond" | "month" | "monthAndDay" | "monthAndYear" | "percent" | "quarter" | "quarterAndYear" | "shortDate" | "shortTime" | "thousands" | "trillions" | "year" | "dayOfWeek" | "hour" | "longDateLongTime" | "minute" | "second" | "shortDateShortTime";
   useCurrencyAccountingStyle?: boolean;
 }>
-const _componentFormat = memo(
-  (props: IFormatProps) => {
-    return React.createElement(NestedOption<IFormatProps>, { ...props });
-  }
-);
+const _componentFormat = (props: IFormatProps) => {
+  return React.createElement(NestedOption<IFormatProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "format",
+    },
+  });
+};
 
-const Format: typeof _componentFormat & IElementDescriptor = Object.assign(_componentFormat, {
-  OptionName: "format",
-})
+const Format = Object.assign<typeof _componentFormat, NestedComponentMeta>(_componentFormat, {
+  componentType: "option",
+});
 
 // owners:
 // Funnel
@@ -241,21 +259,24 @@ type IFunnelTitleProps = React.PropsWithChildren<{
   verticalAlignment?: "bottom" | "top";
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentFunnelTitle = memo(
-  (props: IFunnelTitleProps) => {
-    return React.createElement(NestedOption<IFunnelTitleProps>, { ...props });
-  }
-);
-
-const FunnelTitle: typeof _componentFunnelTitle & IElementDescriptor = Object.assign(_componentFunnelTitle, {
-  OptionName: "title",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false },
-    funnelTitleSubtitle: { optionName: "subtitle", isCollectionItem: false },
-    margin: { optionName: "margin", isCollectionItem: false },
-    subtitle: { optionName: "subtitle", isCollectionItem: false }
-  },
-})
+const _componentFunnelTitle = (props: IFunnelTitleProps) => {
+  return React.createElement(NestedOption<IFunnelTitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "title",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false },
+        funnelTitleSubtitle: { optionName: "subtitle", isCollectionItem: false },
+        margin: { optionName: "margin", isCollectionItem: false },
+        subtitle: { optionName: "subtitle", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const FunnelTitle = Object.assign<typeof _componentFunnelTitle, NestedComponentMeta>(_componentFunnelTitle, {
+  componentType: "option",
+});
 
 // owners:
 // FunnelTitle
@@ -266,18 +287,21 @@ type IFunnelTitleSubtitleProps = React.PropsWithChildren<{
   textOverflow?: "ellipsis" | "hide" | "none";
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentFunnelTitleSubtitle = memo(
-  (props: IFunnelTitleSubtitleProps) => {
-    return React.createElement(NestedOption<IFunnelTitleSubtitleProps>, { ...props });
-  }
-);
-
-const FunnelTitleSubtitle: typeof _componentFunnelTitleSubtitle & IElementDescriptor = Object.assign(_componentFunnelTitleSubtitle, {
-  OptionName: "subtitle",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false }
-  },
-})
+const _componentFunnelTitleSubtitle = (props: IFunnelTitleSubtitleProps) => {
+  return React.createElement(NestedOption<IFunnelTitleSubtitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "subtitle",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const FunnelTitleSubtitle = Object.assign<typeof _componentFunnelTitleSubtitle, NestedComponentMeta>(_componentFunnelTitleSubtitle, {
+  componentType: "option",
+});
 
 // owners:
 // HoverStyle
@@ -288,15 +312,18 @@ type IHatchingProps = React.PropsWithChildren<{
   step?: number;
   width?: number;
 }>
-const _componentHatching = memo(
-  (props: IHatchingProps) => {
-    return React.createElement(NestedOption<IHatchingProps>, { ...props });
-  }
-);
+const _componentHatching = (props: IHatchingProps) => {
+  return React.createElement(NestedOption<IHatchingProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hatching",
+    },
+  });
+};
 
-const Hatching: typeof _componentHatching & IElementDescriptor = Object.assign(_componentHatching, {
-  OptionName: "hatching",
-})
+const Hatching = Object.assign<typeof _componentHatching, NestedComponentMeta>(_componentHatching, {
+  componentType: "option",
+});
 
 // owners:
 // Item
@@ -313,20 +340,23 @@ type IHoverStyleProps = React.PropsWithChildren<{
     width?: number;
   };
 }>
-const _componentHoverStyle = memo(
-  (props: IHoverStyleProps) => {
-    return React.createElement(NestedOption<IHoverStyleProps>, { ...props });
-  }
-);
-
-const HoverStyle: typeof _componentHoverStyle & IElementDescriptor = Object.assign(_componentHoverStyle, {
-  OptionName: "hoverStyle",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    hatching: { optionName: "hatching", isCollectionItem: false },
-    itemBorder: { optionName: "border", isCollectionItem: false }
-  },
-})
+const _componentHoverStyle = (props: IHoverStyleProps) => {
+  return React.createElement(NestedOption<IHoverStyleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hoverStyle",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        hatching: { optionName: "hatching", isCollectionItem: false },
+        itemBorder: { optionName: "border", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const HoverStyle = Object.assign<typeof _componentHoverStyle, NestedComponentMeta>(_componentHoverStyle, {
+  componentType: "option",
+});
 
 // owners:
 // Funnel
@@ -363,21 +393,24 @@ type IItemProps = React.PropsWithChildren<{
     };
   };
 }>
-const _componentItem = memo(
-  (props: IItemProps) => {
-    return React.createElement(NestedOption<IItemProps>, { ...props });
-  }
-);
-
-const Item: typeof _componentItem & IElementDescriptor = Object.assign(_componentItem, {
-  OptionName: "item",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    hoverStyle: { optionName: "hoverStyle", isCollectionItem: false },
-    itemBorder: { optionName: "border", isCollectionItem: false },
-    selectionStyle: { optionName: "selectionStyle", isCollectionItem: false }
-  },
-})
+const _componentItem = (props: IItemProps) => {
+  return React.createElement(NestedOption<IItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "item",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        hoverStyle: { optionName: "hoverStyle", isCollectionItem: false },
+        itemBorder: { optionName: "border", isCollectionItem: false },
+        selectionStyle: { optionName: "selectionStyle", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Item = Object.assign<typeof _componentItem, NestedComponentMeta>(_componentItem, {
+  componentType: "option",
+});
 
 // owners:
 // Item
@@ -388,15 +421,18 @@ type IItemBorderProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentItemBorder = memo(
-  (props: IItemBorderProps) => {
-    return React.createElement(NestedOption<IItemBorderProps>, { ...props });
-  }
-);
+const _componentItemBorder = (props: IItemBorderProps) => {
+  return React.createElement(NestedOption<IItemBorderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
 
-const ItemBorder: typeof _componentItemBorder & IElementDescriptor = Object.assign(_componentItemBorder, {
-  OptionName: "border",
-})
+const ItemBorder = Object.assign<typeof _componentItemBorder, NestedComponentMeta>(_componentItemBorder, {
+  componentType: "option",
+});
 
 // owners:
 // Funnel
@@ -425,22 +461,25 @@ type ILabelProps = React.PropsWithChildren<{
   visible?: boolean;
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentLabel = memo(
-  (props: ILabelProps) => {
-    return React.createElement(NestedOption<ILabelProps>, { ...props });
-  }
-);
-
-const Label: typeof _componentLabel & IElementDescriptor = Object.assign(_componentLabel, {
-  OptionName: "label",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    connector: { optionName: "connector", isCollectionItem: false },
-    font: { optionName: "font", isCollectionItem: false },
-    format: { optionName: "format", isCollectionItem: false },
-    labelBorder: { optionName: "border", isCollectionItem: false }
-  },
-})
+const _componentLabel = (props: ILabelProps) => {
+  return React.createElement(NestedOption<ILabelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "label",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        connector: { optionName: "connector", isCollectionItem: false },
+        font: { optionName: "font", isCollectionItem: false },
+        format: { optionName: "format", isCollectionItem: false },
+        labelBorder: { optionName: "border", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Label = Object.assign<typeof _componentLabel, NestedComponentMeta>(_componentLabel, {
+  componentType: "option",
+});
 
 // owners:
 // Label
@@ -450,15 +489,18 @@ type ILabelBorderProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentLabelBorder = memo(
-  (props: ILabelBorderProps) => {
-    return React.createElement(NestedOption<ILabelBorderProps>, { ...props });
-  }
-);
+const _componentLabelBorder = (props: ILabelBorderProps) => {
+  return React.createElement(NestedOption<ILabelBorderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
 
-const LabelBorder: typeof _componentLabelBorder & IElementDescriptor = Object.assign(_componentLabelBorder, {
-  OptionName: "border",
-})
+const LabelBorder = Object.assign<typeof _componentLabelBorder, NestedComponentMeta>(_componentLabelBorder, {
+  componentType: "option",
+});
 
 // owners:
 // Funnel
@@ -517,28 +559,31 @@ type ILegendProps = React.PropsWithChildren<{
   markerRender?: (...params: any) => React.ReactNode;
   markerComponent?: React.ComponentType<any>;
 }>
-const _componentLegend = memo(
-  (props: ILegendProps) => {
-    return React.createElement(NestedOption<ILegendProps>, { ...props });
-  }
-);
-
-const Legend: typeof _componentLegend & IElementDescriptor = Object.assign(_componentLegend, {
-  OptionName: "legend",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    font: { optionName: "font", isCollectionItem: false },
-    legendBorder: { optionName: "border", isCollectionItem: false },
-    legendTitle: { optionName: "title", isCollectionItem: false },
-    margin: { optionName: "margin", isCollectionItem: false },
-    title: { optionName: "title", isCollectionItem: false }
-  },
-  TemplateProps: [{
-    tmplOption: "markerTemplate",
-    render: "markerRender",
-    component: "markerComponent"
-  }],
-})
+const _componentLegend = (props: ILegendProps) => {
+  return React.createElement(NestedOption<ILegendProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "legend",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        font: { optionName: "font", isCollectionItem: false },
+        legendBorder: { optionName: "border", isCollectionItem: false },
+        legendTitle: { optionName: "title", isCollectionItem: false },
+        margin: { optionName: "margin", isCollectionItem: false },
+        title: { optionName: "title", isCollectionItem: false }
+      },
+      TemplateProps: [{
+        tmplOption: "markerTemplate",
+        render: "markerRender",
+        component: "markerComponent"
+      }],
+    },
+  });
+};
+
+const Legend = Object.assign<typeof _componentLegend, NestedComponentMeta>(_componentLegend, {
+  componentType: "option",
+});
 
 // owners:
 // Legend
@@ -550,15 +595,18 @@ type ILegendBorderProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentLegendBorder = memo(
-  (props: ILegendBorderProps) => {
-    return React.createElement(NestedOption<ILegendBorderProps>, { ...props });
-  }
-);
+const _componentLegendBorder = (props: ILegendBorderProps) => {
+  return React.createElement(NestedOption<ILegendBorderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
 
-const LegendBorder: typeof _componentLegendBorder & IElementDescriptor = Object.assign(_componentLegendBorder, {
-  OptionName: "border",
-})
+const LegendBorder = Object.assign<typeof _componentLegendBorder, NestedComponentMeta>(_componentLegendBorder, {
+  componentType: "option",
+});
 
 // owners:
 // Legend
@@ -580,21 +628,24 @@ type ILegendTitleProps = React.PropsWithChildren<{
   text?: string;
   verticalAlignment?: "bottom" | "top";
 }>
-const _componentLegendTitle = memo(
-  (props: ILegendTitleProps) => {
-    return React.createElement(NestedOption<ILegendTitleProps>, { ...props });
-  }
-);
-
-const LegendTitle: typeof _componentLegendTitle & IElementDescriptor = Object.assign(_componentLegendTitle, {
-  OptionName: "title",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false },
-    legendTitleSubtitle: { optionName: "subtitle", isCollectionItem: false },
-    margin: { optionName: "margin", isCollectionItem: false },
-    subtitle: { optionName: "subtitle", isCollectionItem: false }
-  },
-})
+const _componentLegendTitle = (props: ILegendTitleProps) => {
+  return React.createElement(NestedOption<ILegendTitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "title",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false },
+        legendTitleSubtitle: { optionName: "subtitle", isCollectionItem: false },
+        margin: { optionName: "margin", isCollectionItem: false },
+        subtitle: { optionName: "subtitle", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const LegendTitle = Object.assign<typeof _componentLegendTitle, NestedComponentMeta>(_componentLegendTitle, {
+  componentType: "option",
+});
 
 // owners:
 // LegendTitle
@@ -603,18 +654,21 @@ type ILegendTitleSubtitleProps = React.PropsWithChildren<{
   offset?: number;
   text?: string;
 }>
-const _componentLegendTitleSubtitle = memo(
-  (props: ILegendTitleSubtitleProps) => {
-    return React.createElement(NestedOption<ILegendTitleSubtitleProps>, { ...props });
-  }
-);
-
-const LegendTitleSubtitle: typeof _componentLegendTitleSubtitle & IElementDescriptor = Object.assign(_componentLegendTitleSubtitle, {
-  OptionName: "subtitle",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false }
-  },
-})
+const _componentLegendTitleSubtitle = (props: ILegendTitleSubtitleProps) => {
+  return React.createElement(NestedOption<ILegendTitleSubtitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "subtitle",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const LegendTitleSubtitle = Object.assign<typeof _componentLegendTitleSubtitle, NestedComponentMeta>(_componentLegendTitleSubtitle, {
+  componentType: "option",
+});
 
 // owners:
 // Funnel
@@ -627,21 +681,24 @@ type ILoadingIndicatorProps = React.PropsWithChildren<{
   defaultShow?: boolean;
   onShowChange?: (value: boolean) => void;
 }>
-const _componentLoadingIndicator = memo(
-  (props: ILoadingIndicatorProps) => {
-    return React.createElement(NestedOption<ILoadingIndicatorProps>, { ...props });
-  }
-);
-
-const LoadingIndicator: typeof _componentLoadingIndicator & IElementDescriptor = Object.assign(_componentLoadingIndicator, {
-  OptionName: "loadingIndicator",
-  DefaultsProps: {
-    defaultShow: "show"
-  },
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false }
-  },
-})
+const _componentLoadingIndicator = (props: ILoadingIndicatorProps) => {
+  return React.createElement(NestedOption<ILoadingIndicatorProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "loadingIndicator",
+      DefaultsProps: {
+        defaultShow: "show"
+      },
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const LoadingIndicator = Object.assign<typeof _componentLoadingIndicator, NestedComponentMeta>(_componentLoadingIndicator, {
+  componentType: "option",
+});
 
 // owners:
 // Legend
@@ -654,15 +711,18 @@ type IMarginProps = React.PropsWithChildren<{
   right?: number;
   top?: number;
 }>
-const _componentMargin = memo(
-  (props: IMarginProps) => {
-    return React.createElement(NestedOption<IMarginProps>, { ...props });
-  }
-);
+const _componentMargin = (props: IMarginProps) => {
+  return React.createElement(NestedOption<IMarginProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "margin",
+    },
+  });
+};
 
-const Margin: typeof _componentMargin & IElementDescriptor = Object.assign(_componentMargin, {
-  OptionName: "margin",
-})
+const Margin = Object.assign<typeof _componentMargin, NestedComponentMeta>(_componentMargin, {
+  componentType: "option",
+});
 
 // owners:
 // Item
@@ -679,20 +739,23 @@ type ISelectionStyleProps = React.PropsWithChildren<{
     width?: number;
   };
 }>
-const _componentSelectionStyle = memo(
-  (props: ISelectionStyleProps) => {
-    return React.createElement(NestedOption<ISelectionStyleProps>, { ...props });
-  }
-);
-
-const SelectionStyle: typeof _componentSelectionStyle & IElementDescriptor = Object.assign(_componentSelectionStyle, {
-  OptionName: "selectionStyle",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    hatching: { optionName: "hatching", isCollectionItem: false },
-    itemBorder: { optionName: "border", isCollectionItem: false }
-  },
-})
+const _componentSelectionStyle = (props: ISelectionStyleProps) => {
+  return React.createElement(NestedOption<ISelectionStyleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "selectionStyle",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        hatching: { optionName: "hatching", isCollectionItem: false },
+        itemBorder: { optionName: "border", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const SelectionStyle = Object.assign<typeof _componentSelectionStyle, NestedComponentMeta>(_componentSelectionStyle, {
+  componentType: "option",
+});
 
 // owners:
 // Tooltip
@@ -703,15 +766,18 @@ type IShadowProps = React.PropsWithChildren<{
   offsetY?: number;
   opacity?: number;
 }>
-const _componentShadow = memo(
-  (props: IShadowProps) => {
-    return React.createElement(NestedOption<IShadowProps>, { ...props });
-  }
-);
+const _componentShadow = (props: IShadowProps) => {
+  return React.createElement(NestedOption<IShadowProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "shadow",
+    },
+  });
+};
 
-const Shadow: typeof _componentShadow & IElementDescriptor = Object.assign(_componentShadow, {
-  OptionName: "shadow",
-})
+const Shadow = Object.assign<typeof _componentShadow, NestedComponentMeta>(_componentShadow, {
+  componentType: "option",
+});
 
 // owners:
 // Funnel
@@ -719,15 +785,18 @@ type ISizeProps = React.PropsWithChildren<{
   height?: number;
   width?: number;
 }>
-const _componentSize = memo(
-  (props: ISizeProps) => {
-    return React.createElement(NestedOption<ISizeProps>, { ...props });
-  }
-);
+const _componentSize = (props: ISizeProps) => {
+  return React.createElement(NestedOption<ISizeProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "size",
+    },
+  });
+};
 
-const Size: typeof _componentSize & IElementDescriptor = Object.assign(_componentSize, {
-  OptionName: "size",
-})
+const Size = Object.assign<typeof _componentSize, NestedComponentMeta>(_componentSize, {
+  componentType: "option",
+});
 
 // owners:
 // LegendTitle
@@ -739,15 +808,18 @@ type ISubtitleProps = React.PropsWithChildren<{
   textOverflow?: "ellipsis" | "hide" | "none";
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentSubtitle = memo(
-  (props: ISubtitleProps) => {
-    return React.createElement(NestedOption<ISubtitleProps>, { ...props });
-  }
-);
+const _componentSubtitle = (props: ISubtitleProps) => {
+  return React.createElement(NestedOption<ISubtitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "subtitle",
+    },
+  });
+};
 
-const Subtitle: typeof _componentSubtitle & IElementDescriptor = Object.assign(_componentSubtitle, {
-  OptionName: "subtitle",
-})
+const Subtitle = Object.assign<typeof _componentSubtitle, NestedComponentMeta>(_componentSubtitle, {
+  componentType: "option",
+});
 
 // owners:
 // Legend
@@ -774,15 +846,18 @@ type ITitleProps = React.PropsWithChildren<{
   textOverflow?: "ellipsis" | "hide" | "none";
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentTitle = memo(
-  (props: ITitleProps) => {
-    return React.createElement(NestedOption<ITitleProps>, { ...props });
-  }
-);
+const _componentTitle = (props: ITitleProps) => {
+  return React.createElement(NestedOption<ITitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "title",
+    },
+  });
+};
 
-const Title: typeof _componentTitle & IElementDescriptor = Object.assign(_componentTitle, {
-  OptionName: "title",
-})
+const Title = Object.assign<typeof _componentTitle, NestedComponentMeta>(_componentTitle, {
+  componentType: "option",
+});
 
 // owners:
 // Funnel
@@ -817,27 +892,30 @@ type ITooltipProps = React.PropsWithChildren<{
   contentRender?: (...params: any) => React.ReactNode;
   contentComponent?: React.ComponentType<any>;
 }>
-const _componentTooltip = memo(
-  (props: ITooltipProps) => {
-    return React.createElement(NestedOption<ITooltipProps>, { ...props });
-  }
-);
-
-const Tooltip: typeof _componentTooltip & IElementDescriptor = Object.assign(_componentTooltip, {
-  OptionName: "tooltip",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    font: { optionName: "font", isCollectionItem: false },
-    format: { optionName: "format", isCollectionItem: false },
-    shadow: { optionName: "shadow", isCollectionItem: false },
-    tooltipBorder: { optionName: "border", isCollectionItem: false }
-  },
-  TemplateProps: [{
-    tmplOption: "contentTemplate",
-    render: "contentRender",
-    component: "contentComponent"
-  }],
-})
+const _componentTooltip = (props: ITooltipProps) => {
+  return React.createElement(NestedOption<ITooltipProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "tooltip",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        font: { optionName: "font", isCollectionItem: false },
+        format: { optionName: "format", isCollectionItem: false },
+        shadow: { optionName: "shadow", isCollectionItem: false },
+        tooltipBorder: { optionName: "border", isCollectionItem: false }
+      },
+      TemplateProps: [{
+        tmplOption: "contentTemplate",
+        render: "contentRender",
+        component: "contentComponent"
+      }],
+    },
+  });
+};
+
+const Tooltip = Object.assign<typeof _componentTooltip, NestedComponentMeta>(_componentTooltip, {
+  componentType: "option",
+});
 
 // owners:
 // Tooltip
@@ -848,15 +926,18 @@ type ITooltipBorderProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentTooltipBorder = memo(
-  (props: ITooltipBorderProps) => {
-    return React.createElement(NestedOption<ITooltipBorderProps>, { ...props });
-  }
-);
-
-const TooltipBorder: typeof _componentTooltipBorder & IElementDescriptor = Object.assign(_componentTooltipBorder, {
-  OptionName: "border",
-})
+const _componentTooltipBorder = (props: ITooltipBorderProps) => {
+  return React.createElement(NestedOption<ITooltipBorderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
+
+const TooltipBorder = Object.assign<typeof _componentTooltipBorder, NestedComponentMeta>(_componentTooltipBorder, {
+  componentType: "option",
+});
 
 export default Funnel;
 export {
diff --git a/packages/devextreme-react/src/gallery.ts b/packages/devextreme-react/src/gallery.ts
index 160ae0a131f1..60b12c214861 100644
--- a/packages/devextreme-react/src/gallery.ts
+++ b/packages/devextreme-react/src/gallery.ts
@@ -6,7 +6,7 @@ import dxGallery, {
     Properties
 } from "devextreme/ui/gallery";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { dxGalleryItem, ContentReadyEvent, DisposingEvent, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent } from "devextreme/ui/gallery";
@@ -106,21 +106,24 @@ type IItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentItem = memo(
-  (props: IItemProps) => {
-    return React.createElement(NestedOption<IItemProps>, { ...props });
-  }
-);
-
-const Item: typeof _componentItem & IElementDescriptor = Object.assign(_componentItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentItem = (props: IItemProps) => {
+  return React.createElement(NestedOption<IItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const Item = Object.assign<typeof _componentItem, NestedComponentMeta>(_componentItem, {
+  componentType: "option",
+});
 
 export default Gallery;
 export {
diff --git a/packages/devextreme-react/src/gantt.ts b/packages/devextreme-react/src/gantt.ts
index 6e0ec9accd97..99abe2995dab 100644
--- a/packages/devextreme-react/src/gantt.ts
+++ b/packages/devextreme-react/src/gantt.ts
@@ -5,7 +5,7 @@ import dxGantt, {
     Properties
 } from "devextreme/ui/gantt";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { ContentReadyEvent, ContextMenuPreparingEvent, CustomCommandEvent, DependencyDeletedEvent, DependencyDeletingEvent, DependencyInsertedEvent, DependencyInsertingEvent, DisposingEvent, InitializedEvent, ResourceAssignedEvent, ResourceAssigningEvent, ResourceDeletedEvent, ResourceDeletingEvent, ResourceInsertedEvent, ResourceInsertingEvent, ResourceManagerDialogShowingEvent, ResourceUnassignedEvent, ResourceUnassigningEvent, ScaleCellPreparedEvent, TaskClickEvent, TaskDblClickEvent, TaskDeletedEvent, TaskDeletingEvent, TaskEditDialogShowingEvent, TaskInsertedEvent, TaskInsertingEvent, TaskMovingEvent, TaskUpdatedEvent, TaskUpdatingEvent, dxGanttContextMenuItem, dxGanttFilterRowOperationDescriptions, dxGanttHeaderFilterTexts, dxGanttToolbarItem } from "devextreme/ui/gantt";
@@ -207,39 +207,42 @@ type IColumnProps = React.PropsWithChildren<{
   headerCellRender?: (...params: any) => React.ReactNode;
   headerCellComponent?: React.ComponentType<any>;
 }>
-const _componentColumn = memo(
-  (props: IColumnProps) => {
-    return React.createElement(NestedOption<IColumnProps>, { ...props });
-  }
-);
-
-const Column: typeof _componentColumn & IElementDescriptor = Object.assign(_componentColumn, {
-  OptionName: "columns",
-  IsCollectionItem: true,
-  DefaultsProps: {
-    defaultFilterValue: "filterValue",
-    defaultFilterValues: "filterValues",
-    defaultSelectedFilterOperation: "selectedFilterOperation",
-    defaultSortIndex: "sortIndex",
-    defaultSortOrder: "sortOrder",
-    defaultVisible: "visible",
-    defaultVisibleIndex: "visibleIndex"
-  },
-  ExpectedChildren: {
-    columnHeaderFilter: { optionName: "headerFilter", isCollectionItem: false },
-    format: { optionName: "format", isCollectionItem: false },
-    headerFilter: { optionName: "headerFilter", isCollectionItem: false }
-  },
-  TemplateProps: [{
-    tmplOption: "cellTemplate",
-    render: "cellRender",
-    component: "cellComponent"
-  }, {
-    tmplOption: "headerCellTemplate",
-    render: "headerCellRender",
-    component: "headerCellComponent"
-  }],
-})
+const _componentColumn = (props: IColumnProps) => {
+  return React.createElement(NestedOption<IColumnProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "columns",
+      IsCollectionItem: true,
+      DefaultsProps: {
+        defaultFilterValue: "filterValue",
+        defaultFilterValues: "filterValues",
+        defaultSelectedFilterOperation: "selectedFilterOperation",
+        defaultSortIndex: "sortIndex",
+        defaultSortOrder: "sortOrder",
+        defaultVisible: "visible",
+        defaultVisibleIndex: "visibleIndex"
+      },
+      ExpectedChildren: {
+        columnHeaderFilter: { optionName: "headerFilter", isCollectionItem: false },
+        format: { optionName: "format", isCollectionItem: false },
+        headerFilter: { optionName: "headerFilter", isCollectionItem: false }
+      },
+      TemplateProps: [{
+        tmplOption: "cellTemplate",
+        render: "cellRender",
+        component: "cellComponent"
+      }, {
+        tmplOption: "headerCellTemplate",
+        render: "headerCellRender",
+        component: "headerCellComponent"
+      }],
+    },
+  });
+};
+
+const Column = Object.assign<typeof _componentColumn, NestedComponentMeta>(_componentColumn, {
+  componentType: "option",
+});
 
 // owners:
 // Column
@@ -253,19 +256,22 @@ type IColumnHeaderFilterProps = React.PropsWithChildren<{
   searchMode?: "contains" | "startswith" | "equals";
   width?: number | string;
 }>
-const _componentColumnHeaderFilter = memo(
-  (props: IColumnHeaderFilterProps) => {
-    return React.createElement(NestedOption<IColumnHeaderFilterProps>, { ...props });
-  }
-);
-
-const ColumnHeaderFilter: typeof _componentColumnHeaderFilter & IElementDescriptor = Object.assign(_componentColumnHeaderFilter, {
-  OptionName: "headerFilter",
-  ExpectedChildren: {
-    columnHeaderFilterSearch: { optionName: "search", isCollectionItem: false },
-    search: { optionName: "search", isCollectionItem: false }
-  },
-})
+const _componentColumnHeaderFilter = (props: IColumnHeaderFilterProps) => {
+  return React.createElement(NestedOption<IColumnHeaderFilterProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "headerFilter",
+      ExpectedChildren: {
+        columnHeaderFilterSearch: { optionName: "search", isCollectionItem: false },
+        search: { optionName: "search", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const ColumnHeaderFilter = Object.assign<typeof _componentColumnHeaderFilter, NestedComponentMeta>(_componentColumnHeaderFilter, {
+  componentType: "option",
+});
 
 // owners:
 // ColumnHeaderFilter
@@ -276,15 +282,18 @@ type IColumnHeaderFilterSearchProps = React.PropsWithChildren<{
   searchExpr?: Array<(() => any) | string> | (() => any) | string;
   timeout?: number;
 }>
-const _componentColumnHeaderFilterSearch = memo(
-  (props: IColumnHeaderFilterSearchProps) => {
-    return React.createElement(NestedOption<IColumnHeaderFilterSearchProps>, { ...props });
-  }
-);
+const _componentColumnHeaderFilterSearch = (props: IColumnHeaderFilterSearchProps) => {
+  return React.createElement(NestedOption<IColumnHeaderFilterSearchProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "search",
+    },
+  });
+};
 
-const ColumnHeaderFilterSearch: typeof _componentColumnHeaderFilterSearch & IElementDescriptor = Object.assign(_componentColumnHeaderFilterSearch, {
-  OptionName: "search",
-})
+const ColumnHeaderFilterSearch = Object.assign<typeof _componentColumnHeaderFilterSearch, NestedComponentMeta>(_componentColumnHeaderFilterSearch, {
+  componentType: "option",
+});
 
 // owners:
 // Gantt
@@ -292,19 +301,22 @@ type IContextMenuProps = React.PropsWithChildren<{
   enabled?: boolean;
   items?: Array<dxGanttContextMenuItem | "undo" | "redo" | "expandAll" | "collapseAll" | "addTask" | "deleteTask" | "zoomIn" | "zoomOut" | "deleteDependency" | "taskDetails" | "resourceManager">;
 }>
-const _componentContextMenu = memo(
-  (props: IContextMenuProps) => {
-    return React.createElement(NestedOption<IContextMenuProps>, { ...props });
-  }
-);
-
-const ContextMenu: typeof _componentContextMenu & IElementDescriptor = Object.assign(_componentContextMenu, {
-  OptionName: "contextMenu",
-  ExpectedChildren: {
-    contextMenuItem: { optionName: "items", isCollectionItem: true },
-    item: { optionName: "items", isCollectionItem: true }
-  },
-})
+const _componentContextMenu = (props: IContextMenuProps) => {
+  return React.createElement(NestedOption<IContextMenuProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "contextMenu",
+      ExpectedChildren: {
+        contextMenuItem: { optionName: "items", isCollectionItem: true },
+        item: { optionName: "items", isCollectionItem: true }
+      },
+    },
+  });
+};
+
+const ContextMenu = Object.assign<typeof _componentContextMenu, NestedComponentMeta>(_componentContextMenu, {
+  componentType: "option",
+});
 
 // owners:
 // ContextMenu
@@ -323,21 +335,24 @@ type IContextMenuItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentContextMenuItem = memo(
-  (props: IContextMenuItemProps) => {
-    return React.createElement(NestedOption<IContextMenuItemProps>, { ...props });
-  }
-);
-
-const ContextMenuItem: typeof _componentContextMenuItem & IElementDescriptor = Object.assign(_componentContextMenuItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentContextMenuItem = (props: IContextMenuItemProps) => {
+  return React.createElement(NestedOption<IContextMenuItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const ContextMenuItem = Object.assign<typeof _componentContextMenuItem, NestedComponentMeta>(_componentContextMenuItem, {
+  componentType: "option",
+});
 
 // owners:
 // Gantt
@@ -348,15 +363,18 @@ type IDependenciesProps = React.PropsWithChildren<{
   successorIdExpr?: (() => void) | string;
   typeExpr?: (() => void) | string;
 }>
-const _componentDependencies = memo(
-  (props: IDependenciesProps) => {
-    return React.createElement(NestedOption<IDependenciesProps>, { ...props });
-  }
-);
+const _componentDependencies = (props: IDependenciesProps) => {
+  return React.createElement(NestedOption<IDependenciesProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "dependencies",
+    },
+  });
+};
 
-const Dependencies: typeof _componentDependencies & IElementDescriptor = Object.assign(_componentDependencies, {
-  OptionName: "dependencies",
-})
+const Dependencies = Object.assign<typeof _componentDependencies, NestedComponentMeta>(_componentDependencies, {
+  componentType: "option",
+});
 
 // owners:
 // Gantt
@@ -372,15 +390,18 @@ type IEditingProps = React.PropsWithChildren<{
   allowTaskUpdating?: boolean;
   enabled?: boolean;
 }>
-const _componentEditing = memo(
-  (props: IEditingProps) => {
-    return React.createElement(NestedOption<IEditingProps>, { ...props });
-  }
-);
+const _componentEditing = (props: IEditingProps) => {
+  return React.createElement(NestedOption<IEditingProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "editing",
+    },
+  });
+};
 
-const Editing: typeof _componentEditing & IElementDescriptor = Object.assign(_componentEditing, {
-  OptionName: "editing",
-})
+const Editing = Object.assign<typeof _componentEditing, NestedComponentMeta>(_componentEditing, {
+  componentType: "option",
+});
 
 // owners:
 // Gantt
@@ -393,18 +414,21 @@ type IFilterRowProps = React.PropsWithChildren<{
   showOperationChooser?: boolean;
   visible?: boolean;
 }>
-const _componentFilterRow = memo(
-  (props: IFilterRowProps) => {
-    return React.createElement(NestedOption<IFilterRowProps>, { ...props });
-  }
-);
-
-const FilterRow: typeof _componentFilterRow & IElementDescriptor = Object.assign(_componentFilterRow, {
-  OptionName: "filterRow",
-  ExpectedChildren: {
-    operationDescriptions: { optionName: "operationDescriptions", isCollectionItem: false }
-  },
-})
+const _componentFilterRow = (props: IFilterRowProps) => {
+  return React.createElement(NestedOption<IFilterRowProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "filterRow",
+      ExpectedChildren: {
+        operationDescriptions: { optionName: "operationDescriptions", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const FilterRow = Object.assign<typeof _componentFilterRow, NestedComponentMeta>(_componentFilterRow, {
+  componentType: "option",
+});
 
 // owners:
 // Column
@@ -416,15 +440,18 @@ type IFormatProps = React.PropsWithChildren<{
   type?: "billions" | "currency" | "day" | "decimal" | "exponential" | "fixedPoint" | "largeNumber" | "longDate" | "longTime" | "millions" | "millisecond" | "month" | "monthAndDay" | "monthAndYear" | "percent" | "quarter" | "quarterAndYear" | "shortDate" | "shortTime" | "thousands" | "trillions" | "year" | "dayOfWeek" | "hour" | "longDateLongTime" | "minute" | "second" | "shortDateShortTime";
   useCurrencyAccountingStyle?: boolean;
 }>
-const _componentFormat = memo(
-  (props: IFormatProps) => {
-    return React.createElement(NestedOption<IFormatProps>, { ...props });
-  }
-);
+const _componentFormat = (props: IFormatProps) => {
+  return React.createElement(NestedOption<IFormatProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "format",
+    },
+  });
+};
 
-const Format: typeof _componentFormat & IElementDescriptor = Object.assign(_componentFormat, {
-  OptionName: "format",
-})
+const Format = Object.assign<typeof _componentFormat, NestedComponentMeta>(_componentFormat, {
+  componentType: "option",
+});
 
 // owners:
 // Gantt
@@ -438,20 +465,23 @@ type IGanttHeaderFilterProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentGanttHeaderFilter = memo(
-  (props: IGanttHeaderFilterProps) => {
-    return React.createElement(NestedOption<IGanttHeaderFilterProps>, { ...props });
-  }
-);
-
-const GanttHeaderFilter: typeof _componentGanttHeaderFilter & IElementDescriptor = Object.assign(_componentGanttHeaderFilter, {
-  OptionName: "headerFilter",
-  ExpectedChildren: {
-    ganttHeaderFilterSearch: { optionName: "search", isCollectionItem: false },
-    search: { optionName: "search", isCollectionItem: false },
-    texts: { optionName: "texts", isCollectionItem: false }
-  },
-})
+const _componentGanttHeaderFilter = (props: IGanttHeaderFilterProps) => {
+  return React.createElement(NestedOption<IGanttHeaderFilterProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "headerFilter",
+      ExpectedChildren: {
+        ganttHeaderFilterSearch: { optionName: "search", isCollectionItem: false },
+        search: { optionName: "search", isCollectionItem: false },
+        texts: { optionName: "texts", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const GanttHeaderFilter = Object.assign<typeof _componentGanttHeaderFilter, NestedComponentMeta>(_componentGanttHeaderFilter, {
+  componentType: "option",
+});
 
 // owners:
 // GanttHeaderFilter
@@ -461,15 +491,18 @@ type IGanttHeaderFilterSearchProps = React.PropsWithChildren<{
   mode?: "contains" | "startswith" | "equals";
   timeout?: number;
 }>
-const _componentGanttHeaderFilterSearch = memo(
-  (props: IGanttHeaderFilterSearchProps) => {
-    return React.createElement(NestedOption<IGanttHeaderFilterSearchProps>, { ...props });
-  }
-);
+const _componentGanttHeaderFilterSearch = (props: IGanttHeaderFilterSearchProps) => {
+  return React.createElement(NestedOption<IGanttHeaderFilterSearchProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "search",
+    },
+  });
+};
 
-const GanttHeaderFilterSearch: typeof _componentGanttHeaderFilterSearch & IElementDescriptor = Object.assign(_componentGanttHeaderFilterSearch, {
-  OptionName: "search",
-})
+const GanttHeaderFilterSearch = Object.assign<typeof _componentGanttHeaderFilterSearch, NestedComponentMeta>(_componentGanttHeaderFilterSearch, {
+  componentType: "option",
+});
 
 // owners:
 // Column
@@ -487,15 +520,18 @@ type IHeaderFilterProps = React.PropsWithChildren<{
   texts?: dxGanttHeaderFilterTexts;
   visible?: boolean;
 }>
-const _componentHeaderFilter = memo(
-  (props: IHeaderFilterProps) => {
-    return React.createElement(NestedOption<IHeaderFilterProps>, { ...props });
-  }
-);
+const _componentHeaderFilter = (props: IHeaderFilterProps) => {
+  return React.createElement(NestedOption<IHeaderFilterProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "headerFilter",
+    },
+  });
+};
 
-const HeaderFilter: typeof _componentHeaderFilter & IElementDescriptor = Object.assign(_componentHeaderFilter, {
-  OptionName: "headerFilter",
-})
+const HeaderFilter = Object.assign<typeof _componentHeaderFilter, NestedComponentMeta>(_componentHeaderFilter, {
+  componentType: "option",
+});
 
 // owners:
 // ContextMenu
@@ -525,25 +561,28 @@ type IItemProps = React.PropsWithChildren<{
   menuItemRender?: (...params: any) => React.ReactNode;
   menuItemComponent?: React.ComponentType<any>;
 }>
-const _componentItem = memo(
-  (props: IItemProps) => {
-    return React.createElement(NestedOption<IItemProps>, { ...props });
-  }
-);
-
-const Item: typeof _componentItem & IElementDescriptor = Object.assign(_componentItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }, {
-    tmplOption: "menuItemTemplate",
-    render: "menuItemRender",
-    component: "menuItemComponent"
-  }],
-})
+const _componentItem = (props: IItemProps) => {
+  return React.createElement(NestedOption<IItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }, {
+        tmplOption: "menuItemTemplate",
+        render: "menuItemRender",
+        component: "menuItemComponent"
+      }],
+    },
+  });
+};
+
+const Item = Object.assign<typeof _componentItem, NestedComponentMeta>(_componentItem, {
+  componentType: "option",
+});
 
 // owners:
 // FilterRow
@@ -560,15 +599,18 @@ type IOperationDescriptionsProps = React.PropsWithChildren<{
   notEqual?: string;
   startsWith?: string;
 }>
-const _componentOperationDescriptions = memo(
-  (props: IOperationDescriptionsProps) => {
-    return React.createElement(NestedOption<IOperationDescriptionsProps>, { ...props });
-  }
-);
+const _componentOperationDescriptions = (props: IOperationDescriptionsProps) => {
+  return React.createElement(NestedOption<IOperationDescriptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "operationDescriptions",
+    },
+  });
+};
 
-const OperationDescriptions: typeof _componentOperationDescriptions & IElementDescriptor = Object.assign(_componentOperationDescriptions, {
-  OptionName: "operationDescriptions",
-})
+const OperationDescriptions = Object.assign<typeof _componentOperationDescriptions, NestedComponentMeta>(_componentOperationDescriptions, {
+  componentType: "option",
+});
 
 // owners:
 // Gantt
@@ -578,15 +620,18 @@ type IResourceAssignmentsProps = React.PropsWithChildren<{
   resourceIdExpr?: (() => void) | string;
   taskIdExpr?: (() => void) | string;
 }>
-const _componentResourceAssignments = memo(
-  (props: IResourceAssignmentsProps) => {
-    return React.createElement(NestedOption<IResourceAssignmentsProps>, { ...props });
-  }
-);
+const _componentResourceAssignments = (props: IResourceAssignmentsProps) => {
+  return React.createElement(NestedOption<IResourceAssignmentsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "resourceAssignments",
+    },
+  });
+};
 
-const ResourceAssignments: typeof _componentResourceAssignments & IElementDescriptor = Object.assign(_componentResourceAssignments, {
-  OptionName: "resourceAssignments",
-})
+const ResourceAssignments = Object.assign<typeof _componentResourceAssignments, NestedComponentMeta>(_componentResourceAssignments, {
+  componentType: "option",
+});
 
 // owners:
 // Gantt
@@ -596,15 +641,18 @@ type IResourcesProps = React.PropsWithChildren<{
   keyExpr?: (() => void) | string;
   textExpr?: (() => void) | string;
 }>
-const _componentResources = memo(
-  (props: IResourcesProps) => {
-    return React.createElement(NestedOption<IResourcesProps>, { ...props });
-  }
-);
+const _componentResources = (props: IResourcesProps) => {
+  return React.createElement(NestedOption<IResourcesProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "resources",
+    },
+  });
+};
 
-const Resources: typeof _componentResources & IElementDescriptor = Object.assign(_componentResources, {
-  OptionName: "resources",
-})
+const Resources = Object.assign<typeof _componentResources, NestedComponentMeta>(_componentResources, {
+  componentType: "option",
+});
 
 // owners:
 // Gantt
@@ -612,15 +660,18 @@ type IScaleTypeRangeProps = React.PropsWithChildren<{
   max?: "auto" | "minutes" | "hours" | "sixHours" | "days" | "weeks" | "months" | "quarters" | "years";
   min?: "auto" | "minutes" | "hours" | "sixHours" | "days" | "weeks" | "months" | "quarters" | "years";
 }>
-const _componentScaleTypeRange = memo(
-  (props: IScaleTypeRangeProps) => {
-    return React.createElement(NestedOption<IScaleTypeRangeProps>, { ...props });
-  }
-);
+const _componentScaleTypeRange = (props: IScaleTypeRangeProps) => {
+  return React.createElement(NestedOption<IScaleTypeRangeProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "scaleTypeRange",
+    },
+  });
+};
 
-const ScaleTypeRange: typeof _componentScaleTypeRange & IElementDescriptor = Object.assign(_componentScaleTypeRange, {
-  OptionName: "scaleTypeRange",
-})
+const ScaleTypeRange = Object.assign<typeof _componentScaleTypeRange, NestedComponentMeta>(_componentScaleTypeRange, {
+  componentType: "option",
+});
 
 // owners:
 // ColumnHeaderFilter
@@ -632,15 +683,18 @@ type ISearchProps = React.PropsWithChildren<{
   searchExpr?: Array<(() => any) | string> | (() => any) | string;
   timeout?: number;
 }>
-const _componentSearch = memo(
-  (props: ISearchProps) => {
-    return React.createElement(NestedOption<ISearchProps>, { ...props });
-  }
-);
+const _componentSearch = (props: ISearchProps) => {
+  return React.createElement(NestedOption<ISearchProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "search",
+    },
+  });
+};
 
-const Search: typeof _componentSearch & IElementDescriptor = Object.assign(_componentSearch, {
-  OptionName: "search",
-})
+const Search = Object.assign<typeof _componentSearch, NestedComponentMeta>(_componentSearch, {
+  componentType: "option",
+});
 
 // owners:
 // Gantt
@@ -651,15 +705,18 @@ type ISortingProps = React.PropsWithChildren<{
   mode?: "single" | "multiple" | "none";
   showSortIndexes?: boolean;
 }>
-const _componentSorting = memo(
-  (props: ISortingProps) => {
-    return React.createElement(NestedOption<ISortingProps>, { ...props });
-  }
-);
+const _componentSorting = (props: ISortingProps) => {
+  return React.createElement(NestedOption<ISortingProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "sorting",
+    },
+  });
+};
 
-const Sorting: typeof _componentSorting & IElementDescriptor = Object.assign(_componentSorting, {
-  OptionName: "sorting",
-})
+const Sorting = Object.assign<typeof _componentSorting, NestedComponentMeta>(_componentSorting, {
+  componentType: "option",
+});
 
 // owners:
 // Gantt
@@ -669,16 +726,19 @@ type IStripLineProps = React.PropsWithChildren<{
   start?: Date | (() => Date | number | string) | number | string;
   title?: string;
 }>
-const _componentStripLine = memo(
-  (props: IStripLineProps) => {
-    return React.createElement(NestedOption<IStripLineProps>, { ...props });
-  }
-);
+const _componentStripLine = (props: IStripLineProps) => {
+  return React.createElement(NestedOption<IStripLineProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "stripLines",
+      IsCollectionItem: true,
+    },
+  });
+};
 
-const StripLine: typeof _componentStripLine & IElementDescriptor = Object.assign(_componentStripLine, {
-  OptionName: "stripLines",
-  IsCollectionItem: true,
-})
+const StripLine = Object.assign<typeof _componentStripLine, NestedComponentMeta>(_componentStripLine, {
+  componentType: "option",
+});
 
 // owners:
 // Gantt
@@ -692,15 +752,18 @@ type ITasksProps = React.PropsWithChildren<{
   startExpr?: (() => void) | string;
   titleExpr?: (() => void) | string;
 }>
-const _componentTasks = memo(
-  (props: ITasksProps) => {
-    return React.createElement(NestedOption<ITasksProps>, { ...props });
-  }
-);
+const _componentTasks = (props: ITasksProps) => {
+  return React.createElement(NestedOption<ITasksProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "tasks",
+    },
+  });
+};
 
-const Tasks: typeof _componentTasks & IElementDescriptor = Object.assign(_componentTasks, {
-  OptionName: "tasks",
-})
+const Tasks = Object.assign<typeof _componentTasks, NestedComponentMeta>(_componentTasks, {
+  componentType: "option",
+});
 
 // owners:
 // GanttHeaderFilter
@@ -709,34 +772,40 @@ type ITextsProps = React.PropsWithChildren<{
   emptyValue?: string;
   ok?: string;
 }>
-const _componentTexts = memo(
-  (props: ITextsProps) => {
-    return React.createElement(NestedOption<ITextsProps>, { ...props });
-  }
-);
+const _componentTexts = (props: ITextsProps) => {
+  return React.createElement(NestedOption<ITextsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "texts",
+    },
+  });
+};
 
-const Texts: typeof _componentTexts & IElementDescriptor = Object.assign(_componentTexts, {
-  OptionName: "texts",
-})
+const Texts = Object.assign<typeof _componentTexts, NestedComponentMeta>(_componentTexts, {
+  componentType: "option",
+});
 
 // owners:
 // Gantt
 type IToolbarProps = React.PropsWithChildren<{
   items?: Array<dxGanttToolbarItem | "separator" | "undo" | "redo" | "expandAll" | "collapseAll" | "addTask" | "deleteTask" | "zoomIn" | "zoomOut" | "taskDetails" | "fullScreen" | "resourceManager" | "showResources" | "showDependencies">;
 }>
-const _componentToolbar = memo(
-  (props: IToolbarProps) => {
-    return React.createElement(NestedOption<IToolbarProps>, { ...props });
-  }
-);
-
-const Toolbar: typeof _componentToolbar & IElementDescriptor = Object.assign(_componentToolbar, {
-  OptionName: "toolbar",
-  ExpectedChildren: {
-    item: { optionName: "items", isCollectionItem: true },
-    toolbarItem: { optionName: "items", isCollectionItem: true }
-  },
-})
+const _componentToolbar = (props: IToolbarProps) => {
+  return React.createElement(NestedOption<IToolbarProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "toolbar",
+      ExpectedChildren: {
+        item: { optionName: "items", isCollectionItem: true },
+        toolbarItem: { optionName: "items", isCollectionItem: true }
+      },
+    },
+  });
+};
+
+const Toolbar = Object.assign<typeof _componentToolbar, NestedComponentMeta>(_componentToolbar, {
+  componentType: "option",
+});
 
 // owners:
 // Toolbar
@@ -759,25 +828,28 @@ type IToolbarItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentToolbarItem = memo(
-  (props: IToolbarItemProps) => {
-    return React.createElement(NestedOption<IToolbarItemProps>, { ...props });
-  }
-);
-
-const ToolbarItem: typeof _componentToolbarItem & IElementDescriptor = Object.assign(_componentToolbarItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "menuItemTemplate",
-    render: "menuItemRender",
-    component: "menuItemComponent"
-  }, {
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentToolbarItem = (props: IToolbarItemProps) => {
+  return React.createElement(NestedOption<IToolbarItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "menuItemTemplate",
+        render: "menuItemRender",
+        component: "menuItemComponent"
+      }, {
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const ToolbarItem = Object.assign<typeof _componentToolbarItem, NestedComponentMeta>(_componentToolbarItem, {
+  componentType: "option",
+});
 
 // owners:
 // Gantt
@@ -786,15 +858,18 @@ type IValidationProps = React.PropsWithChildren<{
   enablePredecessorGap?: boolean;
   validateDependencies?: boolean;
 }>
-const _componentValidation = memo(
-  (props: IValidationProps) => {
-    return React.createElement(NestedOption<IValidationProps>, { ...props });
-  }
-);
-
-const Validation: typeof _componentValidation & IElementDescriptor = Object.assign(_componentValidation, {
-  OptionName: "validation",
-})
+const _componentValidation = (props: IValidationProps) => {
+  return React.createElement(NestedOption<IValidationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validation",
+    },
+  });
+};
+
+const Validation = Object.assign<typeof _componentValidation, NestedComponentMeta>(_componentValidation, {
+  componentType: "option",
+});
 
 export default Gantt;
 export {
diff --git a/packages/devextreme-react/src/html-editor.ts b/packages/devextreme-react/src/html-editor.ts
index 6984d9686c8c..17ef91c9ae12 100644
--- a/packages/devextreme-react/src/html-editor.ts
+++ b/packages/devextreme-react/src/html-editor.ts
@@ -5,7 +5,7 @@ import dxHtmlEditor, {
     Properties
 } from "devextreme/ui/html_editor";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { ContentReadyEvent, DisposingEvent, FocusInEvent, FocusOutEvent, InitializedEvent, ValueChangedEvent, dxHtmlEditorImageUploadTabItem, dxHtmlEditorTableContextMenuItem, dxHtmlEditorToolbarItem } from "devextreme/ui/html_editor";
@@ -174,18 +174,21 @@ type IFileUploaderOptionsProps = React.PropsWithChildren<{
   defaultValue?: Array<any>;
   onValueChange?: (value: Array<any>) => void;
 }>
-const _componentFileUploaderOptions = memo(
-  (props: IFileUploaderOptionsProps) => {
-    return React.createElement(NestedOption<IFileUploaderOptionsProps>, { ...props });
-  }
-);
+const _componentFileUploaderOptions = (props: IFileUploaderOptionsProps) => {
+  return React.createElement(NestedOption<IFileUploaderOptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "fileUploaderOptions",
+      DefaultsProps: {
+        defaultValue: "value"
+      },
+    },
+  });
+};
 
-const FileUploaderOptions: typeof _componentFileUploaderOptions & IElementDescriptor = Object.assign(_componentFileUploaderOptions, {
-  OptionName: "fileUploaderOptions",
-  DefaultsProps: {
-    defaultValue: "value"
-  },
-})
+const FileUploaderOptions = Object.assign<typeof _componentFileUploaderOptions, NestedComponentMeta>(_componentFileUploaderOptions, {
+  componentType: "option",
+});
 
 // owners:
 // HtmlEditor
@@ -196,19 +199,22 @@ type IImageUploadProps = React.PropsWithChildren<{
   uploadDirectory?: string;
   uploadUrl?: string;
 }>
-const _componentImageUpload = memo(
-  (props: IImageUploadProps) => {
-    return React.createElement(NestedOption<IImageUploadProps>, { ...props });
-  }
-);
+const _componentImageUpload = (props: IImageUploadProps) => {
+  return React.createElement(NestedOption<IImageUploadProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "imageUpload",
+      ExpectedChildren: {
+        fileUploaderOptions: { optionName: "fileUploaderOptions", isCollectionItem: false },
+        tab: { optionName: "tabs", isCollectionItem: true }
+      },
+    },
+  });
+};
 
-const ImageUpload: typeof _componentImageUpload & IElementDescriptor = Object.assign(_componentImageUpload, {
-  OptionName: "imageUpload",
-  ExpectedChildren: {
-    fileUploaderOptions: { optionName: "fileUploaderOptions", isCollectionItem: false },
-    tab: { optionName: "tabs", isCollectionItem: true }
-  },
-})
+const ImageUpload = Object.assign<typeof _componentImageUpload, NestedComponentMeta>(_componentImageUpload, {
+  componentType: "option",
+});
 
 // owners:
 // TableContextMenu
@@ -242,25 +248,28 @@ type IItemProps = React.PropsWithChildren<{
   menuItemRender?: (...params: any) => React.ReactNode;
   menuItemComponent?: React.ComponentType<any>;
 }>
-const _componentItem = memo(
-  (props: IItemProps) => {
-    return React.createElement(NestedOption<IItemProps>, { ...props });
-  }
-);
+const _componentItem = (props: IItemProps) => {
+  return React.createElement(NestedOption<IItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }, {
+        tmplOption: "menuItemTemplate",
+        render: "menuItemRender",
+        component: "menuItemComponent"
+      }],
+    },
+  });
+};
 
-const Item: typeof _componentItem & IElementDescriptor = Object.assign(_componentItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }, {
-    tmplOption: "menuItemTemplate",
-    render: "menuItemRender",
-    component: "menuItemComponent"
-  }],
-})
+const Item = Object.assign<typeof _componentItem, NestedComponentMeta>(_componentItem, {
+  componentType: "option",
+});
 
 // owners:
 // HtmlEditor
@@ -268,15 +277,18 @@ type IMediaResizingProps = React.PropsWithChildren<{
   allowedTargets?: Array<string>;
   enabled?: boolean;
 }>
-const _componentMediaResizing = memo(
-  (props: IMediaResizingProps) => {
-    return React.createElement(NestedOption<IMediaResizingProps>, { ...props });
-  }
-);
+const _componentMediaResizing = (props: IMediaResizingProps) => {
+  return React.createElement(NestedOption<IMediaResizingProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "mediaResizing",
+    },
+  });
+};
 
-const MediaResizing: typeof _componentMediaResizing & IElementDescriptor = Object.assign(_componentMediaResizing, {
-  OptionName: "mediaResizing",
-})
+const MediaResizing = Object.assign<typeof _componentMediaResizing, NestedComponentMeta>(_componentMediaResizing, {
+  componentType: "option",
+});
 
 // owners:
 // HtmlEditor
@@ -295,41 +307,47 @@ type IMentionProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentMention = memo(
-  (props: IMentionProps) => {
-    return React.createElement(NestedOption<IMentionProps>, { ...props });
-  }
-);
+const _componentMention = (props: IMentionProps) => {
+  return React.createElement(NestedOption<IMentionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "mentions",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "itemTemplate",
+        render: "itemRender",
+        component: "itemComponent"
+      }, {
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
 
-const Mention: typeof _componentMention & IElementDescriptor = Object.assign(_componentMention, {
-  OptionName: "mentions",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "itemTemplate",
-    render: "itemRender",
-    component: "itemComponent"
-  }, {
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const Mention = Object.assign<typeof _componentMention, NestedComponentMeta>(_componentMention, {
+  componentType: "option",
+});
 
 // owners:
 // ImageUpload
 type ITabProps = React.PropsWithChildren<{
   name?: "url" | "file";
 }>
-const _componentTab = memo(
-  (props: ITabProps) => {
-    return React.createElement(NestedOption<ITabProps>, { ...props });
-  }
-);
+const _componentTab = (props: ITabProps) => {
+  return React.createElement(NestedOption<ITabProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "tabs",
+      IsCollectionItem: true,
+    },
+  });
+};
 
-const Tab: typeof _componentTab & IElementDescriptor = Object.assign(_componentTab, {
-  OptionName: "tabs",
-  IsCollectionItem: true,
-})
+const Tab = Object.assign<typeof _componentTab, NestedComponentMeta>(_componentTab, {
+  componentType: "option",
+});
 
 // owners:
 // HtmlEditor
@@ -337,19 +355,22 @@ type ITableContextMenuProps = React.PropsWithChildren<{
   enabled?: boolean;
   items?: Array<dxHtmlEditorTableContextMenuItem | "background" | "bold" | "color" | "font" | "italic" | "link" | "image" | "strike" | "subscript" | "superscript" | "underline" | "blockquote" | "increaseIndent" | "decreaseIndent" | "orderedList" | "bulletList" | "alignLeft" | "alignCenter" | "alignRight" | "alignJustify" | "codeBlock" | "variable" | "undo" | "redo" | "clear" | "insertTable" | "insertHeaderRow" | "insertRowAbove" | "insertRowBelow" | "insertColumnLeft" | "insertColumnRight" | "deleteColumn" | "deleteRow" | "deleteTable" | "cellProperties" | "tableProperties">;
 }>
-const _componentTableContextMenu = memo(
-  (props: ITableContextMenuProps) => {
-    return React.createElement(NestedOption<ITableContextMenuProps>, { ...props });
-  }
-);
+const _componentTableContextMenu = (props: ITableContextMenuProps) => {
+  return React.createElement(NestedOption<ITableContextMenuProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "tableContextMenu",
+      ExpectedChildren: {
+        item: { optionName: "items", isCollectionItem: true },
+        tableContextMenuItem: { optionName: "items", isCollectionItem: true }
+      },
+    },
+  });
+};
 
-const TableContextMenu: typeof _componentTableContextMenu & IElementDescriptor = Object.assign(_componentTableContextMenu, {
-  OptionName: "tableContextMenu",
-  ExpectedChildren: {
-    item: { optionName: "items", isCollectionItem: true },
-    tableContextMenuItem: { optionName: "items", isCollectionItem: true }
-  },
-})
+const TableContextMenu = Object.assign<typeof _componentTableContextMenu, NestedComponentMeta>(_componentTableContextMenu, {
+  componentType: "option",
+});
 
 // owners:
 // TableContextMenu
@@ -369,21 +390,24 @@ type ITableContextMenuItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentTableContextMenuItem = memo(
-  (props: ITableContextMenuItemProps) => {
-    return React.createElement(NestedOption<ITableContextMenuItemProps>, { ...props });
-  }
-);
+const _componentTableContextMenuItem = (props: ITableContextMenuItemProps) => {
+  return React.createElement(NestedOption<ITableContextMenuItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
 
-const TableContextMenuItem: typeof _componentTableContextMenuItem & IElementDescriptor = Object.assign(_componentTableContextMenuItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const TableContextMenuItem = Object.assign<typeof _componentTableContextMenuItem, NestedComponentMeta>(_componentTableContextMenuItem, {
+  componentType: "option",
+});
 
 // owners:
 // HtmlEditor
@@ -392,15 +416,18 @@ type ITableResizingProps = React.PropsWithChildren<{
   minColumnWidth?: number;
   minRowHeight?: number;
 }>
-const _componentTableResizing = memo(
-  (props: ITableResizingProps) => {
-    return React.createElement(NestedOption<ITableResizingProps>, { ...props });
-  }
-);
+const _componentTableResizing = (props: ITableResizingProps) => {
+  return React.createElement(NestedOption<ITableResizingProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "tableResizing",
+    },
+  });
+};
 
-const TableResizing: typeof _componentTableResizing & IElementDescriptor = Object.assign(_componentTableResizing, {
-  OptionName: "tableResizing",
-})
+const TableResizing = Object.assign<typeof _componentTableResizing, NestedComponentMeta>(_componentTableResizing, {
+  componentType: "option",
+});
 
 // owners:
 // HtmlEditor
@@ -409,19 +436,22 @@ type IToolbarProps = React.PropsWithChildren<{
   items?: Array<dxHtmlEditorToolbarItem | "background" | "bold" | "color" | "font" | "italic" | "link" | "image" | "size" | "strike" | "subscript" | "superscript" | "underline" | "blockquote" | "header" | "increaseIndent" | "decreaseIndent" | "orderedList" | "bulletList" | "alignLeft" | "alignCenter" | "alignRight" | "alignJustify" | "codeBlock" | "variable" | "separator" | "undo" | "redo" | "clear" | "cellProperties" | "tableProperties" | "insertTable" | "insertHeaderRow" | "insertRowAbove" | "insertRowBelow" | "insertColumnLeft" | "insertColumnRight" | "deleteColumn" | "deleteRow" | "deleteTable">;
   multiline?: boolean;
 }>
-const _componentToolbar = memo(
-  (props: IToolbarProps) => {
-    return React.createElement(NestedOption<IToolbarProps>, { ...props });
-  }
-);
+const _componentToolbar = (props: IToolbarProps) => {
+  return React.createElement(NestedOption<IToolbarProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "toolbar",
+      ExpectedChildren: {
+        item: { optionName: "items", isCollectionItem: true },
+        toolbarItem: { optionName: "items", isCollectionItem: true }
+      },
+    },
+  });
+};
 
-const Toolbar: typeof _componentToolbar & IElementDescriptor = Object.assign(_componentToolbar, {
-  OptionName: "toolbar",
-  ExpectedChildren: {
-    item: { optionName: "items", isCollectionItem: true },
-    toolbarItem: { optionName: "items", isCollectionItem: true }
-  },
-})
+const Toolbar = Object.assign<typeof _componentToolbar, NestedComponentMeta>(_componentToolbar, {
+  componentType: "option",
+});
 
 // owners:
 // Toolbar
@@ -447,25 +477,28 @@ type IToolbarItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentToolbarItem = memo(
-  (props: IToolbarItemProps) => {
-    return React.createElement(NestedOption<IToolbarItemProps>, { ...props });
-  }
-);
+const _componentToolbarItem = (props: IToolbarItemProps) => {
+  return React.createElement(NestedOption<IToolbarItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "menuItemTemplate",
+        render: "menuItemRender",
+        component: "menuItemComponent"
+      }, {
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
 
-const ToolbarItem: typeof _componentToolbarItem & IElementDescriptor = Object.assign(_componentToolbarItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "menuItemTemplate",
-    render: "menuItemRender",
-    component: "menuItemComponent"
-  }, {
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const ToolbarItem = Object.assign<typeof _componentToolbarItem, NestedComponentMeta>(_componentToolbarItem, {
+  componentType: "option",
+});
 
 // owners:
 // HtmlEditor
@@ -473,15 +506,18 @@ type IVariablesProps = React.PropsWithChildren<{
   dataSource?: Array<string> | DataSource | DataSourceOptions | null | Store | string;
   escapeChar?: Array<string> | string;
 }>
-const _componentVariables = memo(
-  (props: IVariablesProps) => {
-    return React.createElement(NestedOption<IVariablesProps>, { ...props });
-  }
-);
+const _componentVariables = (props: IVariablesProps) => {
+  return React.createElement(NestedOption<IVariablesProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "variables",
+    },
+  });
+};
 
-const Variables: typeof _componentVariables & IElementDescriptor = Object.assign(_componentVariables, {
-  OptionName: "variables",
-})
+const Variables = Object.assign<typeof _componentVariables, NestedComponentMeta>(_componentVariables, {
+  componentType: "option",
+});
 
 export default HtmlEditor;
 export {
diff --git a/packages/devextreme-react/src/linear-gauge.ts b/packages/devextreme-react/src/linear-gauge.ts
index 6c18efc0e238..a62f2150d080 100644
--- a/packages/devextreme-react/src/linear-gauge.ts
+++ b/packages/devextreme-react/src/linear-gauge.ts
@@ -5,7 +5,7 @@ import dxLinearGauge, {
     Properties
 } from "devextreme/viz/linear_gauge";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { DisposingEvent, DrawnEvent, ExportedEvent, ExportingEvent, FileSavingEvent, IncidentOccurredEvent, InitializedEvent, TooltipHiddenEvent, TooltipShownEvent } from "devextreme/viz/linear_gauge";
@@ -103,15 +103,18 @@ type IAnimationProps = React.PropsWithChildren<{
   easing?: "easeOutCubic" | "linear";
   enabled?: boolean;
 }>
-const _componentAnimation = memo(
-  (props: IAnimationProps) => {
-    return React.createElement(NestedOption<IAnimationProps>, { ...props });
-  }
-);
+const _componentAnimation = (props: IAnimationProps) => {
+  return React.createElement(NestedOption<IAnimationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "animation",
+    },
+  });
+};
 
-const Animation: typeof _componentAnimation & IElementDescriptor = Object.assign(_componentAnimation, {
-  OptionName: "animation",
-})
+const Animation = Object.assign<typeof _componentAnimation, NestedComponentMeta>(_componentAnimation, {
+  componentType: "option",
+});
 
 // owners:
 // RangeContainer
@@ -119,15 +122,18 @@ type IBackgroundColorProps = React.PropsWithChildren<{
   base?: string;
   fillId?: string;
 }>
-const _componentBackgroundColor = memo(
-  (props: IBackgroundColorProps) => {
-    return React.createElement(NestedOption<IBackgroundColorProps>, { ...props });
-  }
-);
+const _componentBackgroundColor = (props: IBackgroundColorProps) => {
+  return React.createElement(NestedOption<IBackgroundColorProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "backgroundColor",
+    },
+  });
+};
 
-const BackgroundColor: typeof _componentBackgroundColor & IElementDescriptor = Object.assign(_componentBackgroundColor, {
-  OptionName: "backgroundColor",
-})
+const BackgroundColor = Object.assign<typeof _componentBackgroundColor, NestedComponentMeta>(_componentBackgroundColor, {
+  componentType: "option",
+});
 
 // owners:
 // Tooltip
@@ -138,15 +144,18 @@ type IBorderProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentBorder = memo(
-  (props: IBorderProps) => {
-    return React.createElement(NestedOption<IBorderProps>, { ...props });
-  }
-);
+const _componentBorder = (props: IBorderProps) => {
+  return React.createElement(NestedOption<IBorderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
 
-const Border: typeof _componentBorder & IElementDescriptor = Object.assign(_componentBorder, {
-  OptionName: "border",
-})
+const Border = Object.assign<typeof _componentBorder, NestedComponentMeta>(_componentBorder, {
+  componentType: "option",
+});
 
 // owners:
 // Range
@@ -155,15 +164,18 @@ type IColorProps = React.PropsWithChildren<{
   base?: string;
   fillId?: string;
 }>
-const _componentColor = memo(
-  (props: IColorProps) => {
-    return React.createElement(NestedOption<IColorProps>, { ...props });
-  }
-);
+const _componentColor = (props: IColorProps) => {
+  return React.createElement(NestedOption<IColorProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "color",
+    },
+  });
+};
 
-const Color: typeof _componentColor & IElementDescriptor = Object.assign(_componentColor, {
-  OptionName: "color",
-})
+const Color = Object.assign<typeof _componentColor, NestedComponentMeta>(_componentColor, {
+  componentType: "option",
+});
 
 // owners:
 // LinearGauge
@@ -176,15 +188,18 @@ type IExportProps = React.PropsWithChildren<{
   printingEnabled?: boolean;
   svgToCanvas?: ((svg: any, canvas: any) => any);
 }>
-const _componentExport = memo(
-  (props: IExportProps) => {
-    return React.createElement(NestedOption<IExportProps>, { ...props });
-  }
-);
+const _componentExport = (props: IExportProps) => {
+  return React.createElement(NestedOption<IExportProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "export",
+    },
+  });
+};
 
-const Export: typeof _componentExport & IElementDescriptor = Object.assign(_componentExport, {
-  OptionName: "export",
-})
+const Export = Object.assign<typeof _componentExport, NestedComponentMeta>(_componentExport, {
+  componentType: "option",
+});
 
 // owners:
 // Label
@@ -200,15 +215,18 @@ type IFontProps = React.PropsWithChildren<{
   size?: number | string;
   weight?: number;
 }>
-const _componentFont = memo(
-  (props: IFontProps) => {
-    return React.createElement(NestedOption<IFontProps>, { ...props });
-  }
-);
+const _componentFont = (props: IFontProps) => {
+  return React.createElement(NestedOption<IFontProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "font",
+    },
+  });
+};
 
-const Font: typeof _componentFont & IElementDescriptor = Object.assign(_componentFont, {
-  OptionName: "font",
-})
+const Font = Object.assign<typeof _componentFont, NestedComponentMeta>(_componentFont, {
+  componentType: "option",
+});
 
 // owners:
 // Label
@@ -222,30 +240,36 @@ type IFormatProps = React.PropsWithChildren<{
   type?: "billions" | "currency" | "day" | "decimal" | "exponential" | "fixedPoint" | "largeNumber" | "longDate" | "longTime" | "millions" | "millisecond" | "month" | "monthAndDay" | "monthAndYear" | "percent" | "quarter" | "quarterAndYear" | "shortDate" | "shortTime" | "thousands" | "trillions" | "year" | "dayOfWeek" | "hour" | "longDateLongTime" | "minute" | "second" | "shortDateShortTime";
   useCurrencyAccountingStyle?: boolean;
 }>
-const _componentFormat = memo(
-  (props: IFormatProps) => {
-    return React.createElement(NestedOption<IFormatProps>, { ...props });
-  }
-);
+const _componentFormat = (props: IFormatProps) => {
+  return React.createElement(NestedOption<IFormatProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "format",
+    },
+  });
+};
 
-const Format: typeof _componentFormat & IElementDescriptor = Object.assign(_componentFormat, {
-  OptionName: "format",
-})
+const Format = Object.assign<typeof _componentFormat, NestedComponentMeta>(_componentFormat, {
+  componentType: "option",
+});
 
 // owners:
 // LinearGauge
 type IGeometryProps = React.PropsWithChildren<{
   orientation?: "horizontal" | "vertical";
 }>
-const _componentGeometry = memo(
-  (props: IGeometryProps) => {
-    return React.createElement(NestedOption<IGeometryProps>, { ...props });
-  }
-);
+const _componentGeometry = (props: IGeometryProps) => {
+  return React.createElement(NestedOption<IGeometryProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "geometry",
+    },
+  });
+};
 
-const Geometry: typeof _componentGeometry & IElementDescriptor = Object.assign(_componentGeometry, {
-  OptionName: "geometry",
-})
+const Geometry = Object.assign<typeof _componentGeometry, NestedComponentMeta>(_componentGeometry, {
+  componentType: "option",
+});
 
 // owners:
 // Scale
@@ -258,19 +282,22 @@ type ILabelProps = React.PropsWithChildren<{
   useRangeColors?: boolean;
   visible?: boolean;
 }>
-const _componentLabel = memo(
-  (props: ILabelProps) => {
-    return React.createElement(NestedOption<ILabelProps>, { ...props });
-  }
-);
-
-const Label: typeof _componentLabel & IElementDescriptor = Object.assign(_componentLabel, {
-  OptionName: "label",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false },
-    format: { optionName: "format", isCollectionItem: false }
-  },
-})
+const _componentLabel = (props: ILabelProps) => {
+  return React.createElement(NestedOption<ILabelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "label",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false },
+        format: { optionName: "format", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Label = Object.assign<typeof _componentLabel, NestedComponentMeta>(_componentLabel, {
+  componentType: "option",
+});
 
 // owners:
 // LinearGauge
@@ -282,21 +309,24 @@ type ILoadingIndicatorProps = React.PropsWithChildren<{
   defaultShow?: boolean;
   onShowChange?: (value: boolean) => void;
 }>
-const _componentLoadingIndicator = memo(
-  (props: ILoadingIndicatorProps) => {
-    return React.createElement(NestedOption<ILoadingIndicatorProps>, { ...props });
-  }
-);
-
-const LoadingIndicator: typeof _componentLoadingIndicator & IElementDescriptor = Object.assign(_componentLoadingIndicator, {
-  OptionName: "loadingIndicator",
-  DefaultsProps: {
-    defaultShow: "show"
-  },
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false }
-  },
-})
+const _componentLoadingIndicator = (props: ILoadingIndicatorProps) => {
+  return React.createElement(NestedOption<ILoadingIndicatorProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "loadingIndicator",
+      DefaultsProps: {
+        defaultShow: "show"
+      },
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const LoadingIndicator = Object.assign<typeof _componentLoadingIndicator, NestedComponentMeta>(_componentLoadingIndicator, {
+  componentType: "option",
+});
 
 // owners:
 // LinearGauge
@@ -307,15 +337,18 @@ type IMarginProps = React.PropsWithChildren<{
   right?: number;
   top?: number;
 }>
-const _componentMargin = memo(
-  (props: IMarginProps) => {
-    return React.createElement(NestedOption<IMarginProps>, { ...props });
-  }
-);
+const _componentMargin = (props: IMarginProps) => {
+  return React.createElement(NestedOption<IMarginProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "margin",
+    },
+  });
+};
 
-const Margin: typeof _componentMargin & IElementDescriptor = Object.assign(_componentMargin, {
-  OptionName: "margin",
-})
+const Margin = Object.assign<typeof _componentMargin, NestedComponentMeta>(_componentMargin, {
+  componentType: "option",
+});
 
 // owners:
 // Scale
@@ -326,15 +359,18 @@ type IMinorTickProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentMinorTick = memo(
-  (props: IMinorTickProps) => {
-    return React.createElement(NestedOption<IMinorTickProps>, { ...props });
-  }
-);
+const _componentMinorTick = (props: IMinorTickProps) => {
+  return React.createElement(NestedOption<IMinorTickProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "minorTick",
+    },
+  });
+};
 
-const MinorTick: typeof _componentMinorTick & IElementDescriptor = Object.assign(_componentMinorTick, {
-  OptionName: "minorTick",
-})
+const MinorTick = Object.assign<typeof _componentMinorTick, NestedComponentMeta>(_componentMinorTick, {
+  componentType: "option",
+});
 
 // owners:
 // RangeContainer
@@ -343,19 +379,22 @@ type IRangeProps = React.PropsWithChildren<{
   endValue?: number;
   startValue?: number;
 }>
-const _componentRange = memo(
-  (props: IRangeProps) => {
-    return React.createElement(NestedOption<IRangeProps>, { ...props });
-  }
-);
-
-const Range: typeof _componentRange & IElementDescriptor = Object.assign(_componentRange, {
-  OptionName: "ranges",
-  IsCollectionItem: true,
-  ExpectedChildren: {
-    color: { optionName: "color", isCollectionItem: false }
-  },
-})
+const _componentRange = (props: IRangeProps) => {
+  return React.createElement(NestedOption<IRangeProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "ranges",
+      IsCollectionItem: true,
+      ExpectedChildren: {
+        color: { optionName: "color", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Range = Object.assign<typeof _componentRange, NestedComponentMeta>(_componentRange, {
+  componentType: "option",
+});
 
 // owners:
 // LinearGauge
@@ -376,20 +415,23 @@ type IRangeContainerProps = React.PropsWithChildren<{
     start?: number;
   };
 }>
-const _componentRangeContainer = memo(
-  (props: IRangeContainerProps) => {
-    return React.createElement(NestedOption<IRangeContainerProps>, { ...props });
-  }
-);
-
-const RangeContainer: typeof _componentRangeContainer & IElementDescriptor = Object.assign(_componentRangeContainer, {
-  OptionName: "rangeContainer",
-  ExpectedChildren: {
-    backgroundColor: { optionName: "backgroundColor", isCollectionItem: false },
-    range: { optionName: "ranges", isCollectionItem: true },
-    width: { optionName: "width", isCollectionItem: false }
-  },
-})
+const _componentRangeContainer = (props: IRangeContainerProps) => {
+  return React.createElement(NestedOption<IRangeContainerProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "rangeContainer",
+      ExpectedChildren: {
+        backgroundColor: { optionName: "backgroundColor", isCollectionItem: false },
+        range: { optionName: "ranges", isCollectionItem: true },
+        width: { optionName: "width", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const RangeContainer = Object.assign<typeof _componentRangeContainer, NestedComponentMeta>(_componentRangeContainer, {
+  componentType: "option",
+});
 
 // owners:
 // LinearGauge
@@ -428,20 +470,23 @@ type IScaleProps = React.PropsWithChildren<{
   tickInterval?: number;
   verticalOrientation?: "bottom" | "center" | "top";
 }>
-const _componentScale = memo(
-  (props: IScaleProps) => {
-    return React.createElement(NestedOption<IScaleProps>, { ...props });
-  }
-);
-
-const Scale: typeof _componentScale & IElementDescriptor = Object.assign(_componentScale, {
-  OptionName: "scale",
-  ExpectedChildren: {
-    label: { optionName: "label", isCollectionItem: false },
-    minorTick: { optionName: "minorTick", isCollectionItem: false },
-    tick: { optionName: "tick", isCollectionItem: false }
-  },
-})
+const _componentScale = (props: IScaleProps) => {
+  return React.createElement(NestedOption<IScaleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "scale",
+      ExpectedChildren: {
+        label: { optionName: "label", isCollectionItem: false },
+        minorTick: { optionName: "minorTick", isCollectionItem: false },
+        tick: { optionName: "tick", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Scale = Object.assign<typeof _componentScale, NestedComponentMeta>(_componentScale, {
+  componentType: "option",
+});
 
 // owners:
 // Tooltip
@@ -452,15 +497,18 @@ type IShadowProps = React.PropsWithChildren<{
   offsetY?: number;
   opacity?: number;
 }>
-const _componentShadow = memo(
-  (props: IShadowProps) => {
-    return React.createElement(NestedOption<IShadowProps>, { ...props });
-  }
-);
+const _componentShadow = (props: IShadowProps) => {
+  return React.createElement(NestedOption<IShadowProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "shadow",
+    },
+  });
+};
 
-const Shadow: typeof _componentShadow & IElementDescriptor = Object.assign(_componentShadow, {
-  OptionName: "shadow",
-})
+const Shadow = Object.assign<typeof _componentShadow, NestedComponentMeta>(_componentShadow, {
+  componentType: "option",
+});
 
 // owners:
 // LinearGauge
@@ -468,15 +516,18 @@ type ISizeProps = React.PropsWithChildren<{
   height?: number;
   width?: number;
 }>
-const _componentSize = memo(
-  (props: ISizeProps) => {
-    return React.createElement(NestedOption<ISizeProps>, { ...props });
-  }
-);
+const _componentSize = (props: ISizeProps) => {
+  return React.createElement(NestedOption<ISizeProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "size",
+    },
+  });
+};
 
-const Size: typeof _componentSize & IElementDescriptor = Object.assign(_componentSize, {
-  OptionName: "size",
-})
+const Size = Object.assign<typeof _componentSize, NestedComponentMeta>(_componentSize, {
+  componentType: "option",
+});
 
 // owners:
 // Title
@@ -487,18 +538,21 @@ type ISubtitleProps = React.PropsWithChildren<{
   textOverflow?: "ellipsis" | "hide" | "none";
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentSubtitle = memo(
-  (props: ISubtitleProps) => {
-    return React.createElement(NestedOption<ISubtitleProps>, { ...props });
-  }
-);
-
-const Subtitle: typeof _componentSubtitle & IElementDescriptor = Object.assign(_componentSubtitle, {
-  OptionName: "subtitle",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false }
-  },
-})
+const _componentSubtitle = (props: ISubtitleProps) => {
+  return React.createElement(NestedOption<ISubtitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "subtitle",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Subtitle = Object.assign<typeof _componentSubtitle, NestedComponentMeta>(_componentSubtitle, {
+  componentType: "option",
+});
 
 // owners:
 // LinearGauge
@@ -528,19 +582,22 @@ type ISubvalueIndicatorProps = React.PropsWithChildren<{
   verticalOrientation?: "bottom" | "top";
   width?: number;
 }>
-const _componentSubvalueIndicator = memo(
-  (props: ISubvalueIndicatorProps) => {
-    return React.createElement(NestedOption<ISubvalueIndicatorProps>, { ...props });
-  }
-);
-
-const SubvalueIndicator: typeof _componentSubvalueIndicator & IElementDescriptor = Object.assign(_componentSubvalueIndicator, {
-  OptionName: "subvalueIndicator",
-  ExpectedChildren: {
-    color: { optionName: "color", isCollectionItem: false },
-    text: { optionName: "text", isCollectionItem: false }
-  },
-})
+const _componentSubvalueIndicator = (props: ISubvalueIndicatorProps) => {
+  return React.createElement(NestedOption<ISubvalueIndicatorProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "subvalueIndicator",
+      ExpectedChildren: {
+        color: { optionName: "color", isCollectionItem: false },
+        text: { optionName: "text", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const SubvalueIndicator = Object.assign<typeof _componentSubvalueIndicator, NestedComponentMeta>(_componentSubvalueIndicator, {
+  componentType: "option",
+});
 
 // owners:
 // SubvalueIndicator
@@ -550,19 +607,22 @@ type ITextProps = React.PropsWithChildren<{
   format?: LocalizationTypes.Format;
   indent?: number;
 }>
-const _componentText = memo(
-  (props: ITextProps) => {
-    return React.createElement(NestedOption<ITextProps>, { ...props });
-  }
-);
-
-const Text: typeof _componentText & IElementDescriptor = Object.assign(_componentText, {
-  OptionName: "text",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false },
-    format: { optionName: "format", isCollectionItem: false }
-  },
-})
+const _componentText = (props: ITextProps) => {
+  return React.createElement(NestedOption<ITextProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "text",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false },
+        format: { optionName: "format", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Text = Object.assign<typeof _componentText, NestedComponentMeta>(_componentText, {
+  componentType: "option",
+});
 
 // owners:
 // Scale
@@ -573,15 +633,18 @@ type ITickProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentTick = memo(
-  (props: ITickProps) => {
-    return React.createElement(NestedOption<ITickProps>, { ...props });
-  }
-);
+const _componentTick = (props: ITickProps) => {
+  return React.createElement(NestedOption<ITickProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "tick",
+    },
+  });
+};
 
-const Tick: typeof _componentTick & IElementDescriptor = Object.assign(_componentTick, {
-  OptionName: "tick",
-})
+const Tick = Object.assign<typeof _componentTick, NestedComponentMeta>(_componentTick, {
+  componentType: "option",
+});
 
 // owners:
 // LinearGauge
@@ -607,20 +670,23 @@ type ITitleProps = React.PropsWithChildren<{
   verticalAlignment?: "bottom" | "top";
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentTitle = memo(
-  (props: ITitleProps) => {
-    return React.createElement(NestedOption<ITitleProps>, { ...props });
-  }
-);
-
-const Title: typeof _componentTitle & IElementDescriptor = Object.assign(_componentTitle, {
-  OptionName: "title",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false },
-    margin: { optionName: "margin", isCollectionItem: false },
-    subtitle: { optionName: "subtitle", isCollectionItem: false }
-  },
-})
+const _componentTitle = (props: ITitleProps) => {
+  return React.createElement(NestedOption<ITitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "title",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false },
+        margin: { optionName: "margin", isCollectionItem: false },
+        subtitle: { optionName: "subtitle", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Title = Object.assign<typeof _componentTitle, NestedComponentMeta>(_componentTitle, {
+  componentType: "option",
+});
 
 // owners:
 // LinearGauge
@@ -656,26 +722,29 @@ type ITooltipProps = React.PropsWithChildren<{
   contentRender?: (...params: any) => React.ReactNode;
   contentComponent?: React.ComponentType<any>;
 }>
-const _componentTooltip = memo(
-  (props: ITooltipProps) => {
-    return React.createElement(NestedOption<ITooltipProps>, { ...props });
-  }
-);
-
-const Tooltip: typeof _componentTooltip & IElementDescriptor = Object.assign(_componentTooltip, {
-  OptionName: "tooltip",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    font: { optionName: "font", isCollectionItem: false },
-    format: { optionName: "format", isCollectionItem: false },
-    shadow: { optionName: "shadow", isCollectionItem: false }
-  },
-  TemplateProps: [{
-    tmplOption: "contentTemplate",
-    render: "contentRender",
-    component: "contentComponent"
-  }],
-})
+const _componentTooltip = (props: ITooltipProps) => {
+  return React.createElement(NestedOption<ITooltipProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "tooltip",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        font: { optionName: "font", isCollectionItem: false },
+        format: { optionName: "format", isCollectionItem: false },
+        shadow: { optionName: "shadow", isCollectionItem: false }
+      },
+      TemplateProps: [{
+        tmplOption: "contentTemplate",
+        render: "contentRender",
+        component: "contentComponent"
+      }],
+    },
+  });
+};
+
+const Tooltip = Object.assign<typeof _componentTooltip, NestedComponentMeta>(_componentTooltip, {
+  componentType: "option",
+});
 
 // owners:
 // LinearGauge
@@ -705,15 +774,18 @@ type IValueIndicatorProps = React.PropsWithChildren<{
   verticalOrientation?: "bottom" | "top";
   width?: number;
 }>
-const _componentValueIndicator = memo(
-  (props: IValueIndicatorProps) => {
-    return React.createElement(NestedOption<IValueIndicatorProps>, { ...props });
-  }
-);
+const _componentValueIndicator = (props: IValueIndicatorProps) => {
+  return React.createElement(NestedOption<IValueIndicatorProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "valueIndicator",
+    },
+  });
+};
 
-const ValueIndicator: typeof _componentValueIndicator & IElementDescriptor = Object.assign(_componentValueIndicator, {
-  OptionName: "valueIndicator",
-})
+const ValueIndicator = Object.assign<typeof _componentValueIndicator, NestedComponentMeta>(_componentValueIndicator, {
+  componentType: "option",
+});
 
 // owners:
 // RangeContainer
@@ -721,15 +793,18 @@ type IWidthProps = React.PropsWithChildren<{
   end?: number;
   start?: number;
 }>
-const _componentWidth = memo(
-  (props: IWidthProps) => {
-    return React.createElement(NestedOption<IWidthProps>, { ...props });
-  }
-);
-
-const Width: typeof _componentWidth & IElementDescriptor = Object.assign(_componentWidth, {
-  OptionName: "width",
-})
+const _componentWidth = (props: IWidthProps) => {
+  return React.createElement(NestedOption<IWidthProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "width",
+    },
+  });
+};
+
+const Width = Object.assign<typeof _componentWidth, NestedComponentMeta>(_componentWidth, {
+  componentType: "option",
+});
 
 export default LinearGauge;
 export {
diff --git a/packages/devextreme-react/src/list.ts b/packages/devextreme-react/src/list.ts
index 13efbd6cd6f4..1818b4cde69a 100644
--- a/packages/devextreme-react/src/list.ts
+++ b/packages/devextreme-react/src/list.ts
@@ -6,7 +6,7 @@ import dxList, {
     Properties
 } from "devextreme/ui/list";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { dxListItem, ContentReadyEvent, DisposingEvent, GroupRenderedEvent, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemDeletedEvent, ItemDeletingEvent, ItemHoldEvent, ItemRenderedEvent, ItemReorderedEvent, ItemSwipeEvent, PageLoadingEvent, PullRefreshEvent, ScrollEvent, SelectAllValueChangedEvent, SelectionChangingEvent } from "devextreme/ui/list";
@@ -125,19 +125,22 @@ type IButtonProps = React.PropsWithChildren<{
   name?: string;
   options?: dxButtonOptions;
 }>
-const _componentButton = memo(
-  (props: IButtonProps) => {
-    return React.createElement(NestedOption<IButtonProps>, { ...props });
-  }
-);
+const _componentButton = (props: IButtonProps) => {
+  return React.createElement(NestedOption<IButtonProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "buttons",
+      IsCollectionItem: true,
+      ExpectedChildren: {
+        options: { optionName: "options", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const Button: typeof _componentButton & IElementDescriptor = Object.assign(_componentButton, {
-  OptionName: "buttons",
-  IsCollectionItem: true,
-  ExpectedChildren: {
-    options: { optionName: "options", isCollectionItem: false }
-  },
-})
+const Button = Object.assign<typeof _componentButton, NestedComponentMeta>(_componentButton, {
+  componentType: "option",
+});
 
 // owners:
 // ItemDragging
@@ -145,15 +148,18 @@ type ICursorOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentCursorOffset = memo(
-  (props: ICursorOffsetProps) => {
-    return React.createElement(NestedOption<ICursorOffsetProps>, { ...props });
-  }
-);
+const _componentCursorOffset = (props: ICursorOffsetProps) => {
+  return React.createElement(NestedOption<ICursorOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "cursorOffset",
+    },
+  });
+};
 
-const CursorOffset: typeof _componentCursorOffset & IElementDescriptor = Object.assign(_componentCursorOffset, {
-  OptionName: "cursorOffset",
-})
+const CursorOffset = Object.assign<typeof _componentCursorOffset, NestedComponentMeta>(_componentCursorOffset, {
+  componentType: "option",
+});
 
 // owners:
 // List
@@ -170,21 +176,24 @@ type IItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentItem = memo(
-  (props: IItemProps) => {
-    return React.createElement(NestedOption<IItemProps>, { ...props });
-  }
-);
+const _componentItem = (props: IItemProps) => {
+  return React.createElement(NestedOption<IItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
 
-const Item: typeof _componentItem & IElementDescriptor = Object.assign(_componentItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const Item = Object.assign<typeof _componentItem, NestedComponentMeta>(_componentItem, {
+  componentType: "option",
+});
 
 // owners:
 // List
@@ -227,23 +236,26 @@ type IItemDraggingProps = React.PropsWithChildren<{
   dragRender?: (...params: any) => React.ReactNode;
   dragComponent?: React.ComponentType<any>;
 }>
-const _componentItemDragging = memo(
-  (props: IItemDraggingProps) => {
-    return React.createElement(NestedOption<IItemDraggingProps>, { ...props });
-  }
-);
+const _componentItemDragging = (props: IItemDraggingProps) => {
+  return React.createElement(NestedOption<IItemDraggingProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "itemDragging",
+      ExpectedChildren: {
+        cursorOffset: { optionName: "cursorOffset", isCollectionItem: false }
+      },
+      TemplateProps: [{
+        tmplOption: "dragTemplate",
+        render: "dragRender",
+        component: "dragComponent"
+      }],
+    },
+  });
+};
 
-const ItemDragging: typeof _componentItemDragging & IElementDescriptor = Object.assign(_componentItemDragging, {
-  OptionName: "itemDragging",
-  ExpectedChildren: {
-    cursorOffset: { optionName: "cursorOffset", isCollectionItem: false }
-  },
-  TemplateProps: [{
-    tmplOption: "dragTemplate",
-    render: "dragRender",
-    component: "dragComponent"
-  }],
-})
+const ItemDragging = Object.assign<typeof _componentItemDragging, NestedComponentMeta>(_componentItemDragging, {
+  componentType: "option",
+});
 
 // owners:
 // List
@@ -251,16 +263,19 @@ type IMenuItemProps = React.PropsWithChildren<{
   action?: ((itemElement: any, itemData: any) => void);
   text?: string;
 }>
-const _componentMenuItem = memo(
-  (props: IMenuItemProps) => {
-    return React.createElement(NestedOption<IMenuItemProps>, { ...props });
-  }
-);
+const _componentMenuItem = (props: IMenuItemProps) => {
+  return React.createElement(NestedOption<IMenuItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "menuItems",
+      IsCollectionItem: true,
+    },
+  });
+};
 
-const MenuItem: typeof _componentMenuItem & IElementDescriptor = Object.assign(_componentMenuItem, {
-  OptionName: "menuItems",
-  IsCollectionItem: true,
-})
+const MenuItem = Object.assign<typeof _componentMenuItem, NestedComponentMeta>(_componentMenuItem, {
+  componentType: "option",
+});
 
 // owners:
 // Button
@@ -293,20 +308,23 @@ type IOptionsProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentOptions = memo(
-  (props: IOptionsProps) => {
-    return React.createElement(NestedOption<IOptionsProps>, { ...props });
-  }
-);
+const _componentOptions = (props: IOptionsProps) => {
+  return React.createElement(NestedOption<IOptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "options",
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
 
-const Options: typeof _componentOptions & IElementDescriptor = Object.assign(_componentOptions, {
-  OptionName: "options",
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const Options = Object.assign<typeof _componentOptions, NestedComponentMeta>(_componentOptions, {
+  componentType: "option",
+});
 
 // owners:
 // List
@@ -370,21 +388,24 @@ type ISearchEditorOptionsProps = React.PropsWithChildren<{
   defaultValue?: string;
   onValueChange?: (value: string) => void;
 }>
-const _componentSearchEditorOptions = memo(
-  (props: ISearchEditorOptionsProps) => {
-    return React.createElement(NestedOption<ISearchEditorOptionsProps>, { ...props });
-  }
-);
+const _componentSearchEditorOptions = (props: ISearchEditorOptionsProps) => {
+  return React.createElement(NestedOption<ISearchEditorOptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "searchEditorOptions",
+      DefaultsProps: {
+        defaultValue: "value"
+      },
+      ExpectedChildren: {
+        button: { optionName: "buttons", isCollectionItem: true }
+      },
+    },
+  });
+};
 
-const SearchEditorOptions: typeof _componentSearchEditorOptions & IElementDescriptor = Object.assign(_componentSearchEditorOptions, {
-  OptionName: "searchEditorOptions",
-  DefaultsProps: {
-    defaultValue: "value"
-  },
-  ExpectedChildren: {
-    button: { optionName: "buttons", isCollectionItem: true }
-  },
-})
+const SearchEditorOptions = Object.assign<typeof _componentSearchEditorOptions, NestedComponentMeta>(_componentSearchEditorOptions, {
+  componentType: "option",
+});
 
 export default List;
 export {
diff --git a/packages/devextreme-react/src/load-panel.ts b/packages/devextreme-react/src/load-panel.ts
index 0ac40c5b5f43..c2971aacc1ba 100644
--- a/packages/devextreme-react/src/load-panel.ts
+++ b/packages/devextreme-react/src/load-panel.ts
@@ -5,7 +5,7 @@ import dxLoadPanel, {
     Properties
 } from "devextreme/ui/load_panel";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { PositionConfig } from "devextreme/animation/position";
@@ -86,19 +86,22 @@ type IAnimationProps = React.PropsWithChildren<{
   hide?: AnimationConfig;
   show?: AnimationConfig;
 }>
-const _componentAnimation = memo(
-  (props: IAnimationProps) => {
-    return React.createElement(NestedOption<IAnimationProps>, { ...props });
-  }
-);
-
-const Animation: typeof _componentAnimation & IElementDescriptor = Object.assign(_componentAnimation, {
-  OptionName: "animation",
-  ExpectedChildren: {
-    hide: { optionName: "hide", isCollectionItem: false },
-    show: { optionName: "show", isCollectionItem: false }
-  },
-})
+const _componentAnimation = (props: IAnimationProps) => {
+  return React.createElement(NestedOption<IAnimationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "animation",
+      ExpectedChildren: {
+        hide: { optionName: "hide", isCollectionItem: false },
+        show: { optionName: "show", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Animation = Object.assign<typeof _componentAnimation, NestedComponentMeta>(_componentAnimation, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -106,15 +109,18 @@ type IAtProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentAt = memo(
-  (props: IAtProps) => {
-    return React.createElement(NestedOption<IAtProps>, { ...props });
-  }
-);
+const _componentAt = (props: IAtProps) => {
+  return React.createElement(NestedOption<IAtProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "at",
+    },
+  });
+};
 
-const At: typeof _componentAt & IElementDescriptor = Object.assign(_componentAt, {
-  OptionName: "at",
-})
+const At = Object.assign<typeof _componentAt, NestedComponentMeta>(_componentAt, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -122,15 +128,18 @@ type IBoundaryOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentBoundaryOffset = memo(
-  (props: IBoundaryOffsetProps) => {
-    return React.createElement(NestedOption<IBoundaryOffsetProps>, { ...props });
-  }
-);
+const _componentBoundaryOffset = (props: IBoundaryOffsetProps) => {
+  return React.createElement(NestedOption<IBoundaryOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "boundaryOffset",
+    },
+  });
+};
 
-const BoundaryOffset: typeof _componentBoundaryOffset & IElementDescriptor = Object.assign(_componentBoundaryOffset, {
-  OptionName: "boundaryOffset",
-})
+const BoundaryOffset = Object.assign<typeof _componentBoundaryOffset, NestedComponentMeta>(_componentBoundaryOffset, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -138,15 +147,18 @@ type ICollisionProps = React.PropsWithChildren<{
   x?: "fit" | "flip" | "flipfit" | "none";
   y?: "fit" | "flip" | "flipfit" | "none";
 }>
-const _componentCollision = memo(
-  (props: ICollisionProps) => {
-    return React.createElement(NestedOption<ICollisionProps>, { ...props });
-  }
-);
+const _componentCollision = (props: ICollisionProps) => {
+  return React.createElement(NestedOption<ICollisionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "collision",
+    },
+  });
+};
 
-const Collision: typeof _componentCollision & IElementDescriptor = Object.assign(_componentCollision, {
-  OptionName: "collision",
-})
+const Collision = Object.assign<typeof _componentCollision, NestedComponentMeta>(_componentCollision, {
+  componentType: "option",
+});
 
 // owners:
 // Hide
@@ -157,18 +169,21 @@ type IFromProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentFrom = memo(
-  (props: IFromProps) => {
-    return React.createElement(NestedOption<IFromProps>, { ...props });
-  }
-);
-
-const From: typeof _componentFrom & IElementDescriptor = Object.assign(_componentFrom, {
-  OptionName: "from",
-  ExpectedChildren: {
-    position: { optionName: "position", isCollectionItem: false }
-  },
-})
+const _componentFrom = (props: IFromProps) => {
+  return React.createElement(NestedOption<IFromProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "from",
+      ExpectedChildren: {
+        position: { optionName: "position", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const From = Object.assign<typeof _componentFrom, NestedComponentMeta>(_componentFrom, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -184,19 +199,22 @@ type IHideProps = React.PropsWithChildren<{
   to?: AnimationState;
   type?: "css" | "fade" | "fadeIn" | "fadeOut" | "pop" | "slide" | "slideIn" | "slideOut";
 }>
-const _componentHide = memo(
-  (props: IHideProps) => {
-    return React.createElement(NestedOption<IHideProps>, { ...props });
-  }
-);
-
-const Hide: typeof _componentHide & IElementDescriptor = Object.assign(_componentHide, {
-  OptionName: "hide",
-  ExpectedChildren: {
-    from: { optionName: "from", isCollectionItem: false },
-    to: { optionName: "to", isCollectionItem: false }
-  },
-})
+const _componentHide = (props: IHideProps) => {
+  return React.createElement(NestedOption<IHideProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hide",
+      ExpectedChildren: {
+        from: { optionName: "from", isCollectionItem: false },
+        to: { optionName: "to", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Hide = Object.assign<typeof _componentHide, NestedComponentMeta>(_componentHide, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -204,15 +222,18 @@ type IMyProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentMy = memo(
-  (props: IMyProps) => {
-    return React.createElement(NestedOption<IMyProps>, { ...props });
-  }
-);
+const _componentMy = (props: IMyProps) => {
+  return React.createElement(NestedOption<IMyProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "my",
+    },
+  });
+};
 
-const My: typeof _componentMy & IElementDescriptor = Object.assign(_componentMy, {
-  OptionName: "my",
-})
+const My = Object.assign<typeof _componentMy, NestedComponentMeta>(_componentMy, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -220,15 +241,18 @@ type IOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentOffset = memo(
-  (props: IOffsetProps) => {
-    return React.createElement(NestedOption<IOffsetProps>, { ...props });
-  }
-);
+const _componentOffset = (props: IOffsetProps) => {
+  return React.createElement(NestedOption<IOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "offset",
+    },
+  });
+};
 
-const Offset: typeof _componentOffset & IElementDescriptor = Object.assign(_componentOffset, {
-  OptionName: "offset",
-})
+const Offset = Object.assign<typeof _componentOffset, NestedComponentMeta>(_componentOffset, {
+  componentType: "option",
+});
 
 // owners:
 // From
@@ -257,15 +281,18 @@ type IPositionProps = React.PropsWithChildren<{
     y?: number;
   };
 }>
-const _componentPosition = memo(
-  (props: IPositionProps) => {
-    return React.createElement(NestedOption<IPositionProps>, { ...props });
-  }
-);
+const _componentPosition = (props: IPositionProps) => {
+  return React.createElement(NestedOption<IPositionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "position",
+    },
+  });
+};
 
-const Position: typeof _componentPosition & IElementDescriptor = Object.assign(_componentPosition, {
-  OptionName: "position",
-})
+const Position = Object.assign<typeof _componentPosition, NestedComponentMeta>(_componentPosition, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -281,15 +308,18 @@ type IShowProps = React.PropsWithChildren<{
   to?: AnimationState;
   type?: "css" | "fade" | "fadeIn" | "fadeOut" | "pop" | "slide" | "slideIn" | "slideOut";
 }>
-const _componentShow = memo(
-  (props: IShowProps) => {
-    return React.createElement(NestedOption<IShowProps>, { ...props });
-  }
-);
+const _componentShow = (props: IShowProps) => {
+  return React.createElement(NestedOption<IShowProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "show",
+    },
+  });
+};
 
-const Show: typeof _componentShow & IElementDescriptor = Object.assign(_componentShow, {
-  OptionName: "show",
-})
+const Show = Object.assign<typeof _componentShow, NestedComponentMeta>(_componentShow, {
+  componentType: "option",
+});
 
 // owners:
 // Hide
@@ -300,15 +330,18 @@ type IToProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentTo = memo(
-  (props: IToProps) => {
-    return React.createElement(NestedOption<IToProps>, { ...props });
-  }
-);
-
-const To: typeof _componentTo & IElementDescriptor = Object.assign(_componentTo, {
-  OptionName: "to",
-})
+const _componentTo = (props: IToProps) => {
+  return React.createElement(NestedOption<IToProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "to",
+    },
+  });
+};
+
+const To = Object.assign<typeof _componentTo, NestedComponentMeta>(_componentTo, {
+  componentType: "option",
+});
 
 export default LoadPanel;
 export {
diff --git a/packages/devextreme-react/src/lookup.ts b/packages/devextreme-react/src/lookup.ts
index 818ae3e69604..32d1ef5faca5 100644
--- a/packages/devextreme-react/src/lookup.ts
+++ b/packages/devextreme-react/src/lookup.ts
@@ -5,7 +5,7 @@ import dxLookup, {
     Properties
 } from "devextreme/ui/lookup";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { ClosedEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, ItemClickEvent, OpenedEvent, PageLoadingEvent, PullRefreshEvent, ScrollEvent, ValueChangedEvent } from "devextreme/ui/lookup";
@@ -118,19 +118,22 @@ type IAnimationProps = React.PropsWithChildren<{
   hide?: AnimationConfig;
   show?: AnimationConfig;
 }>
-const _componentAnimation = memo(
-  (props: IAnimationProps) => {
-    return React.createElement(NestedOption<IAnimationProps>, { ...props });
-  }
-);
-
-const Animation: typeof _componentAnimation & IElementDescriptor = Object.assign(_componentAnimation, {
-  OptionName: "animation",
-  ExpectedChildren: {
-    hide: { optionName: "hide", isCollectionItem: false },
-    show: { optionName: "show", isCollectionItem: false }
-  },
-})
+const _componentAnimation = (props: IAnimationProps) => {
+  return React.createElement(NestedOption<IAnimationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "animation",
+      ExpectedChildren: {
+        hide: { optionName: "hide", isCollectionItem: false },
+        show: { optionName: "show", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Animation = Object.assign<typeof _componentAnimation, NestedComponentMeta>(_componentAnimation, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -138,15 +141,18 @@ type IAtProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentAt = memo(
-  (props: IAtProps) => {
-    return React.createElement(NestedOption<IAtProps>, { ...props });
-  }
-);
+const _componentAt = (props: IAtProps) => {
+  return React.createElement(NestedOption<IAtProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "at",
+    },
+  });
+};
 
-const At: typeof _componentAt & IElementDescriptor = Object.assign(_componentAt, {
-  OptionName: "at",
-})
+const At = Object.assign<typeof _componentAt, NestedComponentMeta>(_componentAt, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -154,15 +160,18 @@ type IBoundaryOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentBoundaryOffset = memo(
-  (props: IBoundaryOffsetProps) => {
-    return React.createElement(NestedOption<IBoundaryOffsetProps>, { ...props });
-  }
-);
+const _componentBoundaryOffset = (props: IBoundaryOffsetProps) => {
+  return React.createElement(NestedOption<IBoundaryOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "boundaryOffset",
+    },
+  });
+};
 
-const BoundaryOffset: typeof _componentBoundaryOffset & IElementDescriptor = Object.assign(_componentBoundaryOffset, {
-  OptionName: "boundaryOffset",
-})
+const BoundaryOffset = Object.assign<typeof _componentBoundaryOffset, NestedComponentMeta>(_componentBoundaryOffset, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -170,15 +179,18 @@ type ICollisionProps = React.PropsWithChildren<{
   x?: "fit" | "flip" | "flipfit" | "none";
   y?: "fit" | "flip" | "flipfit" | "none";
 }>
-const _componentCollision = memo(
-  (props: ICollisionProps) => {
-    return React.createElement(NestedOption<ICollisionProps>, { ...props });
-  }
-);
+const _componentCollision = (props: ICollisionProps) => {
+  return React.createElement(NestedOption<ICollisionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "collision",
+    },
+  });
+};
 
-const Collision: typeof _componentCollision & IElementDescriptor = Object.assign(_componentCollision, {
-  OptionName: "collision",
-})
+const Collision = Object.assign<typeof _componentCollision, NestedComponentMeta>(_componentCollision, {
+  componentType: "option",
+});
 
 // owners:
 // Lookup
@@ -246,37 +258,40 @@ type IDropDownOptionsProps = React.PropsWithChildren<{
   titleRender?: (...params: any) => React.ReactNode;
   titleComponent?: React.ComponentType<any>;
 }>
-const _componentDropDownOptions = memo(
-  (props: IDropDownOptionsProps) => {
-    return React.createElement(NestedOption<IDropDownOptionsProps>, { ...props });
-  }
-);
-
-const DropDownOptions: typeof _componentDropDownOptions & IElementDescriptor = Object.assign(_componentDropDownOptions, {
-  OptionName: "dropDownOptions",
-  DefaultsProps: {
-    defaultHeight: "height",
-    defaultPosition: "position",
-    defaultVisible: "visible",
-    defaultWidth: "width"
-  },
-  ExpectedChildren: {
-    animation: { optionName: "animation", isCollectionItem: false },
-    hideEvent: { optionName: "hideEvent", isCollectionItem: false },
-    position: { optionName: "position", isCollectionItem: false },
-    showEvent: { optionName: "showEvent", isCollectionItem: false },
-    toolbarItem: { optionName: "toolbarItems", isCollectionItem: true }
-  },
-  TemplateProps: [{
-    tmplOption: "contentTemplate",
-    render: "contentRender",
-    component: "contentComponent"
-  }, {
-    tmplOption: "titleTemplate",
-    render: "titleRender",
-    component: "titleComponent"
-  }],
-})
+const _componentDropDownOptions = (props: IDropDownOptionsProps) => {
+  return React.createElement(NestedOption<IDropDownOptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "dropDownOptions",
+      DefaultsProps: {
+        defaultHeight: "height",
+        defaultPosition: "position",
+        defaultVisible: "visible",
+        defaultWidth: "width"
+      },
+      ExpectedChildren: {
+        animation: { optionName: "animation", isCollectionItem: false },
+        hideEvent: { optionName: "hideEvent", isCollectionItem: false },
+        position: { optionName: "position", isCollectionItem: false },
+        showEvent: { optionName: "showEvent", isCollectionItem: false },
+        toolbarItem: { optionName: "toolbarItems", isCollectionItem: true }
+      },
+      TemplateProps: [{
+        tmplOption: "contentTemplate",
+        render: "contentRender",
+        component: "contentComponent"
+      }, {
+        tmplOption: "titleTemplate",
+        render: "titleRender",
+        component: "titleComponent"
+      }],
+    },
+  });
+};
+
+const DropDownOptions = Object.assign<typeof _componentDropDownOptions, NestedComponentMeta>(_componentDropDownOptions, {
+  componentType: "option",
+});
 
 // owners:
 // Hide
@@ -287,18 +302,21 @@ type IFromProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentFrom = memo(
-  (props: IFromProps) => {
-    return React.createElement(NestedOption<IFromProps>, { ...props });
-  }
-);
-
-const From: typeof _componentFrom & IElementDescriptor = Object.assign(_componentFrom, {
-  OptionName: "from",
-  ExpectedChildren: {
-    position: { optionName: "position", isCollectionItem: false }
-  },
-})
+const _componentFrom = (props: IFromProps) => {
+  return React.createElement(NestedOption<IFromProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "from",
+      ExpectedChildren: {
+        position: { optionName: "position", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const From = Object.assign<typeof _componentFrom, NestedComponentMeta>(_componentFrom, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -314,19 +332,22 @@ type IHideProps = React.PropsWithChildren<{
   to?: AnimationState;
   type?: "css" | "fade" | "fadeIn" | "fadeOut" | "pop" | "slide" | "slideIn" | "slideOut";
 }>
-const _componentHide = memo(
-  (props: IHideProps) => {
-    return React.createElement(NestedOption<IHideProps>, { ...props });
-  }
-);
-
-const Hide: typeof _componentHide & IElementDescriptor = Object.assign(_componentHide, {
-  OptionName: "hide",
-  ExpectedChildren: {
-    from: { optionName: "from", isCollectionItem: false },
-    to: { optionName: "to", isCollectionItem: false }
-  },
-})
+const _componentHide = (props: IHideProps) => {
+  return React.createElement(NestedOption<IHideProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hide",
+      ExpectedChildren: {
+        from: { optionName: "from", isCollectionItem: false },
+        to: { optionName: "to", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Hide = Object.assign<typeof _componentHide, NestedComponentMeta>(_componentHide, {
+  componentType: "option",
+});
 
 // owners:
 // DropDownOptions
@@ -334,15 +355,18 @@ type IHideEventProps = React.PropsWithChildren<{
   delay?: number;
   name?: string;
 }>
-const _componentHideEvent = memo(
-  (props: IHideEventProps) => {
-    return React.createElement(NestedOption<IHideEventProps>, { ...props });
-  }
-);
+const _componentHideEvent = (props: IHideEventProps) => {
+  return React.createElement(NestedOption<IHideEventProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hideEvent",
+    },
+  });
+};
 
-const HideEvent: typeof _componentHideEvent & IElementDescriptor = Object.assign(_componentHideEvent, {
-  OptionName: "hideEvent",
-})
+const HideEvent = Object.assign<typeof _componentHideEvent, NestedComponentMeta>(_componentHideEvent, {
+  componentType: "option",
+});
 
 // owners:
 // Lookup
@@ -355,21 +379,24 @@ type IItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentItem = memo(
-  (props: IItemProps) => {
-    return React.createElement(NestedOption<IItemProps>, { ...props });
-  }
-);
-
-const Item: typeof _componentItem & IElementDescriptor = Object.assign(_componentItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentItem = (props: IItemProps) => {
+  return React.createElement(NestedOption<IItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const Item = Object.assign<typeof _componentItem, NestedComponentMeta>(_componentItem, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -377,15 +404,18 @@ type IMyProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentMy = memo(
-  (props: IMyProps) => {
-    return React.createElement(NestedOption<IMyProps>, { ...props });
-  }
-);
+const _componentMy = (props: IMyProps) => {
+  return React.createElement(NestedOption<IMyProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "my",
+    },
+  });
+};
 
-const My: typeof _componentMy & IElementDescriptor = Object.assign(_componentMy, {
-  OptionName: "my",
-})
+const My = Object.assign<typeof _componentMy, NestedComponentMeta>(_componentMy, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -393,15 +423,18 @@ type IOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentOffset = memo(
-  (props: IOffsetProps) => {
-    return React.createElement(NestedOption<IOffsetProps>, { ...props });
-  }
-);
+const _componentOffset = (props: IOffsetProps) => {
+  return React.createElement(NestedOption<IOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "offset",
+    },
+  });
+};
 
-const Offset: typeof _componentOffset & IElementDescriptor = Object.assign(_componentOffset, {
-  OptionName: "offset",
-})
+const Offset = Object.assign<typeof _componentOffset, NestedComponentMeta>(_componentOffset, {
+  componentType: "option",
+});
 
 // owners:
 // From
@@ -430,15 +463,18 @@ type IPositionProps = React.PropsWithChildren<{
     y?: number;
   };
 }>
-const _componentPosition = memo(
-  (props: IPositionProps) => {
-    return React.createElement(NestedOption<IPositionProps>, { ...props });
-  }
-);
+const _componentPosition = (props: IPositionProps) => {
+  return React.createElement(NestedOption<IPositionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "position",
+    },
+  });
+};
 
-const Position: typeof _componentPosition & IElementDescriptor = Object.assign(_componentPosition, {
-  OptionName: "position",
-})
+const Position = Object.assign<typeof _componentPosition, NestedComponentMeta>(_componentPosition, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -454,15 +490,18 @@ type IShowProps = React.PropsWithChildren<{
   to?: AnimationState;
   type?: "css" | "fade" | "fadeIn" | "fadeOut" | "pop" | "slide" | "slideIn" | "slideOut";
 }>
-const _componentShow = memo(
-  (props: IShowProps) => {
-    return React.createElement(NestedOption<IShowProps>, { ...props });
-  }
-);
+const _componentShow = (props: IShowProps) => {
+  return React.createElement(NestedOption<IShowProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "show",
+    },
+  });
+};
 
-const Show: typeof _componentShow & IElementDescriptor = Object.assign(_componentShow, {
-  OptionName: "show",
-})
+const Show = Object.assign<typeof _componentShow, NestedComponentMeta>(_componentShow, {
+  componentType: "option",
+});
 
 // owners:
 // DropDownOptions
@@ -470,15 +509,18 @@ type IShowEventProps = React.PropsWithChildren<{
   delay?: number;
   name?: string;
 }>
-const _componentShowEvent = memo(
-  (props: IShowEventProps) => {
-    return React.createElement(NestedOption<IShowEventProps>, { ...props });
-  }
-);
+const _componentShowEvent = (props: IShowEventProps) => {
+  return React.createElement(NestedOption<IShowEventProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "showEvent",
+    },
+  });
+};
 
-const ShowEvent: typeof _componentShowEvent & IElementDescriptor = Object.assign(_componentShowEvent, {
-  OptionName: "showEvent",
-})
+const ShowEvent = Object.assign<typeof _componentShowEvent, NestedComponentMeta>(_componentShowEvent, {
+  componentType: "option",
+});
 
 // owners:
 // Hide
@@ -489,15 +531,18 @@ type IToProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentTo = memo(
-  (props: IToProps) => {
-    return React.createElement(NestedOption<IToProps>, { ...props });
-  }
-);
+const _componentTo = (props: IToProps) => {
+  return React.createElement(NestedOption<IToProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "to",
+    },
+  });
+};
 
-const To: typeof _componentTo & IElementDescriptor = Object.assign(_componentTo, {
-  OptionName: "to",
-})
+const To = Object.assign<typeof _componentTo, NestedComponentMeta>(_componentTo, {
+  componentType: "option",
+});
 
 // owners:
 // DropDownOptions
@@ -520,25 +565,28 @@ type IToolbarItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentToolbarItem = memo(
-  (props: IToolbarItemProps) => {
-    return React.createElement(NestedOption<IToolbarItemProps>, { ...props });
-  }
-);
-
-const ToolbarItem: typeof _componentToolbarItem & IElementDescriptor = Object.assign(_componentToolbarItem, {
-  OptionName: "toolbarItems",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "menuItemTemplate",
-    render: "menuItemRender",
-    component: "menuItemComponent"
-  }, {
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentToolbarItem = (props: IToolbarItemProps) => {
+  return React.createElement(NestedOption<IToolbarItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "toolbarItems",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "menuItemTemplate",
+        render: "menuItemRender",
+        component: "menuItemComponent"
+      }, {
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const ToolbarItem = Object.assign<typeof _componentToolbarItem, NestedComponentMeta>(_componentToolbarItem, {
+  componentType: "option",
+});
 
 export default Lookup;
 export {
diff --git a/packages/devextreme-react/src/map.ts b/packages/devextreme-react/src/map.ts
index 1004ad12ea97..592e8b815e82 100644
--- a/packages/devextreme-react/src/map.ts
+++ b/packages/devextreme-react/src/map.ts
@@ -5,7 +5,7 @@ import dxMap, {
     Properties
 } from "devextreme/ui/map";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { ClickEvent, DisposingEvent, InitializedEvent, MarkerAddedEvent, MarkerRemovedEvent, ReadyEvent, RouteAddedEvent, RouteRemovedEvent } from "devextreme/ui/map";
@@ -95,15 +95,18 @@ type IApiKeyProps = React.PropsWithChildren<{
   google?: string;
   googleStatic?: string;
 }>
-const _componentApiKey = memo(
-  (props: IApiKeyProps) => {
-    return React.createElement(NestedOption<IApiKeyProps>, { ...props });
-  }
-);
+const _componentApiKey = (props: IApiKeyProps) => {
+  return React.createElement(NestedOption<IApiKeyProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "apiKey",
+    },
+  });
+};
 
-const ApiKey: typeof _componentApiKey & IElementDescriptor = Object.assign(_componentApiKey, {
-  OptionName: "apiKey",
-})
+const ApiKey = Object.assign<typeof _componentApiKey, NestedComponentMeta>(_componentApiKey, {
+  componentType: "option",
+});
 
 // owners:
 // Map
@@ -111,15 +114,18 @@ type ICenterProps = React.PropsWithChildren<{
   lat?: number;
   lng?: number;
 }>
-const _componentCenter = memo(
-  (props: ICenterProps) => {
-    return React.createElement(NestedOption<ICenterProps>, { ...props });
-  }
-);
+const _componentCenter = (props: ICenterProps) => {
+  return React.createElement(NestedOption<ICenterProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "center",
+    },
+  });
+};
 
-const Center: typeof _componentCenter & IElementDescriptor = Object.assign(_componentCenter, {
-  OptionName: "center",
-})
+const Center = Object.assign<typeof _componentCenter, NestedComponentMeta>(_componentCenter, {
+  componentType: "option",
+});
 
 // owners:
 // Marker
@@ -128,15 +134,18 @@ type ILocationProps = React.PropsWithChildren<{
   lat?: number;
   lng?: number;
 }>
-const _componentLocation = memo(
-  (props: ILocationProps) => {
-    return React.createElement(NestedOption<ILocationProps>, { ...props });
-  }
-);
+const _componentLocation = (props: ILocationProps) => {
+  return React.createElement(NestedOption<ILocationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "location",
+    },
+  });
+};
 
-const Location: typeof _componentLocation & IElementDescriptor = Object.assign(_componentLocation, {
-  OptionName: "location",
-})
+const Location = Object.assign<typeof _componentLocation, NestedComponentMeta>(_componentLocation, {
+  componentType: "option",
+});
 
 // owners:
 // Map
@@ -152,20 +161,23 @@ type IMarkerProps = React.PropsWithChildren<{
     text?: string;
   };
 }>
-const _componentMarker = memo(
-  (props: IMarkerProps) => {
-    return React.createElement(NestedOption<IMarkerProps>, { ...props });
-  }
-);
-
-const Marker: typeof _componentMarker & IElementDescriptor = Object.assign(_componentMarker, {
-  OptionName: "markers",
-  IsCollectionItem: true,
-  ExpectedChildren: {
-    location: { optionName: "location", isCollectionItem: false },
-    tooltip: { optionName: "tooltip", isCollectionItem: false }
-  },
-})
+const _componentMarker = (props: IMarkerProps) => {
+  return React.createElement(NestedOption<IMarkerProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "markers",
+      IsCollectionItem: true,
+      ExpectedChildren: {
+        location: { optionName: "location", isCollectionItem: false },
+        tooltip: { optionName: "tooltip", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Marker = Object.assign<typeof _componentMarker, NestedComponentMeta>(_componentMarker, {
+  componentType: "option",
+});
 
 // owners:
 // Map
@@ -173,15 +185,18 @@ type IProviderConfigProps = React.PropsWithChildren<{
   mapId?: string;
   useAdvancedMarkers?: boolean;
 }>
-const _componentProviderConfig = memo(
-  (props: IProviderConfigProps) => {
-    return React.createElement(NestedOption<IProviderConfigProps>, { ...props });
-  }
-);
+const _componentProviderConfig = (props: IProviderConfigProps) => {
+  return React.createElement(NestedOption<IProviderConfigProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "providerConfig",
+    },
+  });
+};
 
-const ProviderConfig: typeof _componentProviderConfig & IElementDescriptor = Object.assign(_componentProviderConfig, {
-  OptionName: "providerConfig",
-})
+const ProviderConfig = Object.assign<typeof _componentProviderConfig, NestedComponentMeta>(_componentProviderConfig, {
+  componentType: "option",
+});
 
 // owners:
 // Map
@@ -195,19 +210,22 @@ type IRouteProps = React.PropsWithChildren<{
   opacity?: number;
   weight?: number;
 }>
-const _componentRoute = memo(
-  (props: IRouteProps) => {
-    return React.createElement(NestedOption<IRouteProps>, { ...props });
-  }
-);
-
-const Route: typeof _componentRoute & IElementDescriptor = Object.assign(_componentRoute, {
-  OptionName: "routes",
-  IsCollectionItem: true,
-  ExpectedChildren: {
-    location: { optionName: "locations", isCollectionItem: true }
-  },
-})
+const _componentRoute = (props: IRouteProps) => {
+  return React.createElement(NestedOption<IRouteProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "routes",
+      IsCollectionItem: true,
+      ExpectedChildren: {
+        location: { optionName: "locations", isCollectionItem: true }
+      },
+    },
+  });
+};
+
+const Route = Object.assign<typeof _componentRoute, NestedComponentMeta>(_componentRoute, {
+  componentType: "option",
+});
 
 // owners:
 // Marker
@@ -215,15 +233,18 @@ type ITooltipProps = React.PropsWithChildren<{
   isShown?: boolean;
   text?: string;
 }>
-const _componentTooltip = memo(
-  (props: ITooltipProps) => {
-    return React.createElement(NestedOption<ITooltipProps>, { ...props });
-  }
-);
-
-const Tooltip: typeof _componentTooltip & IElementDescriptor = Object.assign(_componentTooltip, {
-  OptionName: "tooltip",
-})
+const _componentTooltip = (props: ITooltipProps) => {
+  return React.createElement(NestedOption<ITooltipProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "tooltip",
+    },
+  });
+};
+
+const Tooltip = Object.assign<typeof _componentTooltip, NestedComponentMeta>(_componentTooltip, {
+  componentType: "option",
+});
 
 export default Map;
 export {
diff --git a/packages/devextreme-react/src/menu.ts b/packages/devextreme-react/src/menu.ts
index 61b41d683746..774f2548c084 100644
--- a/packages/devextreme-react/src/menu.ts
+++ b/packages/devextreme-react/src/menu.ts
@@ -6,7 +6,7 @@ import dxMenu, {
     Properties
 } from "devextreme/ui/menu";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { dxMenuItem, ContentReadyEvent, DisposingEvent, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemRenderedEvent, SubmenuHiddenEvent, SubmenuHidingEvent, SubmenuShowingEvent, SubmenuShownEvent } from "devextreme/ui/menu";
@@ -105,19 +105,22 @@ type IAnimationProps = React.PropsWithChildren<{
   hide?: AnimationConfig;
   show?: AnimationConfig;
 }>
-const _componentAnimation = memo(
-  (props: IAnimationProps) => {
-    return React.createElement(NestedOption<IAnimationProps>, { ...props });
-  }
-);
-
-const Animation: typeof _componentAnimation & IElementDescriptor = Object.assign(_componentAnimation, {
-  OptionName: "animation",
-  ExpectedChildren: {
-    hide: { optionName: "hide", isCollectionItem: false },
-    show: { optionName: "show", isCollectionItem: false }
-  },
-})
+const _componentAnimation = (props: IAnimationProps) => {
+  return React.createElement(NestedOption<IAnimationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "animation",
+      ExpectedChildren: {
+        hide: { optionName: "hide", isCollectionItem: false },
+        show: { optionName: "show", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Animation = Object.assign<typeof _componentAnimation, NestedComponentMeta>(_componentAnimation, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -125,15 +128,18 @@ type IAtProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentAt = memo(
-  (props: IAtProps) => {
-    return React.createElement(NestedOption<IAtProps>, { ...props });
-  }
-);
+const _componentAt = (props: IAtProps) => {
+  return React.createElement(NestedOption<IAtProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "at",
+    },
+  });
+};
 
-const At: typeof _componentAt & IElementDescriptor = Object.assign(_componentAt, {
-  OptionName: "at",
-})
+const At = Object.assign<typeof _componentAt, NestedComponentMeta>(_componentAt, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -141,15 +147,18 @@ type IBoundaryOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentBoundaryOffset = memo(
-  (props: IBoundaryOffsetProps) => {
-    return React.createElement(NestedOption<IBoundaryOffsetProps>, { ...props });
-  }
-);
+const _componentBoundaryOffset = (props: IBoundaryOffsetProps) => {
+  return React.createElement(NestedOption<IBoundaryOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "boundaryOffset",
+    },
+  });
+};
 
-const BoundaryOffset: typeof _componentBoundaryOffset & IElementDescriptor = Object.assign(_componentBoundaryOffset, {
-  OptionName: "boundaryOffset",
-})
+const BoundaryOffset = Object.assign<typeof _componentBoundaryOffset, NestedComponentMeta>(_componentBoundaryOffset, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -157,15 +166,18 @@ type ICollisionProps = React.PropsWithChildren<{
   x?: "fit" | "flip" | "flipfit" | "none";
   y?: "fit" | "flip" | "flipfit" | "none";
 }>
-const _componentCollision = memo(
-  (props: ICollisionProps) => {
-    return React.createElement(NestedOption<ICollisionProps>, { ...props });
-  }
-);
+const _componentCollision = (props: ICollisionProps) => {
+  return React.createElement(NestedOption<ICollisionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "collision",
+    },
+  });
+};
 
-const Collision: typeof _componentCollision & IElementDescriptor = Object.assign(_componentCollision, {
-  OptionName: "collision",
-})
+const Collision = Object.assign<typeof _componentCollision, NestedComponentMeta>(_componentCollision, {
+  componentType: "option",
+});
 
 // owners:
 // ShowFirstSubmenuMode
@@ -174,15 +186,18 @@ type IDelayProps = React.PropsWithChildren<{
   hide?: number;
   show?: number;
 }>
-const _componentDelay = memo(
-  (props: IDelayProps) => {
-    return React.createElement(NestedOption<IDelayProps>, { ...props });
-  }
-);
+const _componentDelay = (props: IDelayProps) => {
+  return React.createElement(NestedOption<IDelayProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "delay",
+    },
+  });
+};
 
-const Delay: typeof _componentDelay & IElementDescriptor = Object.assign(_componentDelay, {
-  OptionName: "delay",
-})
+const Delay = Object.assign<typeof _componentDelay, NestedComponentMeta>(_componentDelay, {
+  componentType: "option",
+});
 
 // owners:
 // Hide
@@ -193,18 +208,21 @@ type IFromProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentFrom = memo(
-  (props: IFromProps) => {
-    return React.createElement(NestedOption<IFromProps>, { ...props });
-  }
-);
-
-const From: typeof _componentFrom & IElementDescriptor = Object.assign(_componentFrom, {
-  OptionName: "from",
-  ExpectedChildren: {
-    position: { optionName: "position", isCollectionItem: false }
-  },
-})
+const _componentFrom = (props: IFromProps) => {
+  return React.createElement(NestedOption<IFromProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "from",
+      ExpectedChildren: {
+        position: { optionName: "position", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const From = Object.assign<typeof _componentFrom, NestedComponentMeta>(_componentFrom, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -220,19 +238,22 @@ type IHideProps = React.PropsWithChildren<{
   to?: AnimationState;
   type?: "css" | "fade" | "fadeIn" | "fadeOut" | "pop" | "slide" | "slideIn" | "slideOut";
 }>
-const _componentHide = memo(
-  (props: IHideProps) => {
-    return React.createElement(NestedOption<IHideProps>, { ...props });
-  }
-);
-
-const Hide: typeof _componentHide & IElementDescriptor = Object.assign(_componentHide, {
-  OptionName: "hide",
-  ExpectedChildren: {
-    from: { optionName: "from", isCollectionItem: false },
-    to: { optionName: "to", isCollectionItem: false }
-  },
-})
+const _componentHide = (props: IHideProps) => {
+  return React.createElement(NestedOption<IHideProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hide",
+      ExpectedChildren: {
+        from: { optionName: "from", isCollectionItem: false },
+        to: { optionName: "to", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Hide = Object.assign<typeof _componentHide, NestedComponentMeta>(_componentHide, {
+  componentType: "option",
+});
 
 // owners:
 // Menu
@@ -252,21 +273,24 @@ type IItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentItem = memo(
-  (props: IItemProps) => {
-    return React.createElement(NestedOption<IItemProps>, { ...props });
-  }
-);
-
-const Item: typeof _componentItem & IElementDescriptor = Object.assign(_componentItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentItem = (props: IItemProps) => {
+  return React.createElement(NestedOption<IItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const Item = Object.assign<typeof _componentItem, NestedComponentMeta>(_componentItem, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -274,15 +298,18 @@ type IMyProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentMy = memo(
-  (props: IMyProps) => {
-    return React.createElement(NestedOption<IMyProps>, { ...props });
-  }
-);
+const _componentMy = (props: IMyProps) => {
+  return React.createElement(NestedOption<IMyProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "my",
+    },
+  });
+};
 
-const My: typeof _componentMy & IElementDescriptor = Object.assign(_componentMy, {
-  OptionName: "my",
-})
+const My = Object.assign<typeof _componentMy, NestedComponentMeta>(_componentMy, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -290,15 +317,18 @@ type IOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentOffset = memo(
-  (props: IOffsetProps) => {
-    return React.createElement(NestedOption<IOffsetProps>, { ...props });
-  }
-);
+const _componentOffset = (props: IOffsetProps) => {
+  return React.createElement(NestedOption<IOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "offset",
+    },
+  });
+};
 
-const Offset: typeof _componentOffset & IElementDescriptor = Object.assign(_componentOffset, {
-  OptionName: "offset",
-})
+const Offset = Object.assign<typeof _componentOffset, NestedComponentMeta>(_componentOffset, {
+  componentType: "option",
+});
 
 // owners:
 // From
@@ -326,22 +356,25 @@ type IPositionProps = React.PropsWithChildren<{
     y?: number;
   };
 }>
-const _componentPosition = memo(
-  (props: IPositionProps) => {
-    return React.createElement(NestedOption<IPositionProps>, { ...props });
-  }
-);
-
-const Position: typeof _componentPosition & IElementDescriptor = Object.assign(_componentPosition, {
-  OptionName: "position",
-  ExpectedChildren: {
-    at: { optionName: "at", isCollectionItem: false },
-    boundaryOffset: { optionName: "boundaryOffset", isCollectionItem: false },
-    collision: { optionName: "collision", isCollectionItem: false },
-    my: { optionName: "my", isCollectionItem: false },
-    offset: { optionName: "offset", isCollectionItem: false }
-  },
-})
+const _componentPosition = (props: IPositionProps) => {
+  return React.createElement(NestedOption<IPositionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "position",
+      ExpectedChildren: {
+        at: { optionName: "at", isCollectionItem: false },
+        boundaryOffset: { optionName: "boundaryOffset", isCollectionItem: false },
+        collision: { optionName: "collision", isCollectionItem: false },
+        my: { optionName: "my", isCollectionItem: false },
+        offset: { optionName: "offset", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Position = Object.assign<typeof _componentPosition, NestedComponentMeta>(_componentPosition, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -357,15 +390,18 @@ type IShowProps = React.PropsWithChildren<{
   to?: AnimationState;
   type?: "css" | "fade" | "fadeIn" | "fadeOut" | "pop" | "slide" | "slideIn" | "slideOut";
 }>
-const _componentShow = memo(
-  (props: IShowProps) => {
-    return React.createElement(NestedOption<IShowProps>, { ...props });
-  }
-);
+const _componentShow = (props: IShowProps) => {
+  return React.createElement(NestedOption<IShowProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "show",
+    },
+  });
+};
 
-const Show: typeof _componentShow & IElementDescriptor = Object.assign(_componentShow, {
-  OptionName: "show",
-})
+const Show = Object.assign<typeof _componentShow, NestedComponentMeta>(_componentShow, {
+  componentType: "option",
+});
 
 // owners:
 // Menu
@@ -376,18 +412,21 @@ type IShowFirstSubmenuModeProps = React.PropsWithChildren<{
   };
   name?: "onClick" | "onHover";
 }>
-const _componentShowFirstSubmenuMode = memo(
-  (props: IShowFirstSubmenuModeProps) => {
-    return React.createElement(NestedOption<IShowFirstSubmenuModeProps>, { ...props });
-  }
-);
-
-const ShowFirstSubmenuMode: typeof _componentShowFirstSubmenuMode & IElementDescriptor = Object.assign(_componentShowFirstSubmenuMode, {
-  OptionName: "showFirstSubmenuMode",
-  ExpectedChildren: {
-    delay: { optionName: "delay", isCollectionItem: false }
-  },
-})
+const _componentShowFirstSubmenuMode = (props: IShowFirstSubmenuModeProps) => {
+  return React.createElement(NestedOption<IShowFirstSubmenuModeProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "showFirstSubmenuMode",
+      ExpectedChildren: {
+        delay: { optionName: "delay", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const ShowFirstSubmenuMode = Object.assign<typeof _componentShowFirstSubmenuMode, NestedComponentMeta>(_componentShowFirstSubmenuMode, {
+  componentType: "option",
+});
 
 // owners:
 // Menu
@@ -398,18 +437,21 @@ type IShowSubmenuModeProps = React.PropsWithChildren<{
   };
   name?: "onClick" | "onHover";
 }>
-const _componentShowSubmenuMode = memo(
-  (props: IShowSubmenuModeProps) => {
-    return React.createElement(NestedOption<IShowSubmenuModeProps>, { ...props });
-  }
-);
-
-const ShowSubmenuMode: typeof _componentShowSubmenuMode & IElementDescriptor = Object.assign(_componentShowSubmenuMode, {
-  OptionName: "showSubmenuMode",
-  ExpectedChildren: {
-    delay: { optionName: "delay", isCollectionItem: false }
-  },
-})
+const _componentShowSubmenuMode = (props: IShowSubmenuModeProps) => {
+  return React.createElement(NestedOption<IShowSubmenuModeProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "showSubmenuMode",
+      ExpectedChildren: {
+        delay: { optionName: "delay", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const ShowSubmenuMode = Object.assign<typeof _componentShowSubmenuMode, NestedComponentMeta>(_componentShowSubmenuMode, {
+  componentType: "option",
+});
 
 // owners:
 // Hide
@@ -420,15 +462,18 @@ type IToProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentTo = memo(
-  (props: IToProps) => {
-    return React.createElement(NestedOption<IToProps>, { ...props });
-  }
-);
-
-const To: typeof _componentTo & IElementDescriptor = Object.assign(_componentTo, {
-  OptionName: "to",
-})
+const _componentTo = (props: IToProps) => {
+  return React.createElement(NestedOption<IToProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "to",
+    },
+  });
+};
+
+const To = Object.assign<typeof _componentTo, NestedComponentMeta>(_componentTo, {
+  componentType: "option",
+});
 
 export default Menu;
 export {
diff --git a/packages/devextreme-react/src/multi-view.ts b/packages/devextreme-react/src/multi-view.ts
index 8dc33fcd5bee..7654df8dc704 100644
--- a/packages/devextreme-react/src/multi-view.ts
+++ b/packages/devextreme-react/src/multi-view.ts
@@ -6,7 +6,7 @@ import dxMultiView, {
     Properties
 } from "devextreme/ui/multi_view";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { dxMultiViewItem, ContentReadyEvent, DisposingEvent, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent } from "devextreme/ui/multi_view";
@@ -105,21 +105,24 @@ type IItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentItem = memo(
-  (props: IItemProps) => {
-    return React.createElement(NestedOption<IItemProps>, { ...props });
-  }
-);
-
-const Item: typeof _componentItem & IElementDescriptor = Object.assign(_componentItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentItem = (props: IItemProps) => {
+  return React.createElement(NestedOption<IItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const Item = Object.assign<typeof _componentItem, NestedComponentMeta>(_componentItem, {
+  componentType: "option",
+});
 
 export default MultiView;
 export {
diff --git a/packages/devextreme-react/src/number-box.ts b/packages/devextreme-react/src/number-box.ts
index 702d6932ae20..fe5698a1b4ab 100644
--- a/packages/devextreme-react/src/number-box.ts
+++ b/packages/devextreme-react/src/number-box.ts
@@ -5,7 +5,7 @@ import dxNumberBox, {
     Properties
 } from "devextreme/ui/number_box";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { ChangeEvent, ContentReadyEvent, CopyEvent, CutEvent, DisposingEvent, EnterKeyEvent, FocusInEvent, FocusOutEvent, InitializedEvent, InputEvent, KeyDownEvent, KeyUpEvent, PasteEvent, ValueChangedEvent } from "devextreme/ui/number_box";
@@ -90,19 +90,22 @@ type IButtonProps = React.PropsWithChildren<{
   name?: string;
   options?: dxButtonOptions;
 }>
-const _componentButton = memo(
-  (props: IButtonProps) => {
-    return React.createElement(NestedOption<IButtonProps>, { ...props });
-  }
-);
-
-const Button: typeof _componentButton & IElementDescriptor = Object.assign(_componentButton, {
-  OptionName: "buttons",
-  IsCollectionItem: true,
-  ExpectedChildren: {
-    options: { optionName: "options", isCollectionItem: false }
-  },
-})
+const _componentButton = (props: IButtonProps) => {
+  return React.createElement(NestedOption<IButtonProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "buttons",
+      IsCollectionItem: true,
+      ExpectedChildren: {
+        options: { optionName: "options", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Button = Object.assign<typeof _componentButton, NestedComponentMeta>(_componentButton, {
+  componentType: "option",
+});
 
 // owners:
 // NumberBox
@@ -114,15 +117,18 @@ type IFormatProps = React.PropsWithChildren<{
   type?: "billions" | "currency" | "day" | "decimal" | "exponential" | "fixedPoint" | "largeNumber" | "longDate" | "longTime" | "millions" | "millisecond" | "month" | "monthAndDay" | "monthAndYear" | "percent" | "quarter" | "quarterAndYear" | "shortDate" | "shortTime" | "thousands" | "trillions" | "year" | "dayOfWeek" | "hour" | "longDateLongTime" | "minute" | "second" | "shortDateShortTime";
   useCurrencyAccountingStyle?: boolean;
 }>
-const _componentFormat = memo(
-  (props: IFormatProps) => {
-    return React.createElement(NestedOption<IFormatProps>, { ...props });
-  }
-);
+const _componentFormat = (props: IFormatProps) => {
+  return React.createElement(NestedOption<IFormatProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "format",
+    },
+  });
+};
 
-const Format: typeof _componentFormat & IElementDescriptor = Object.assign(_componentFormat, {
-  OptionName: "format",
-})
+const Format = Object.assign<typeof _componentFormat, NestedComponentMeta>(_componentFormat, {
+  componentType: "option",
+});
 
 // owners:
 // Button
@@ -155,20 +161,23 @@ type IOptionsProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentOptions = memo(
-  (props: IOptionsProps) => {
-    return React.createElement(NestedOption<IOptionsProps>, { ...props });
-  }
-);
-
-const Options: typeof _componentOptions & IElementDescriptor = Object.assign(_componentOptions, {
-  OptionName: "options",
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentOptions = (props: IOptionsProps) => {
+  return React.createElement(NestedOption<IOptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "options",
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const Options = Object.assign<typeof _componentOptions, NestedComponentMeta>(_componentOptions, {
+  componentType: "option",
+});
 
 export default NumberBox;
 export {
diff --git a/packages/devextreme-react/src/pie-chart.ts b/packages/devextreme-react/src/pie-chart.ts
index c8dccc927331..36f330693f24 100644
--- a/packages/devextreme-react/src/pie-chart.ts
+++ b/packages/devextreme-react/src/pie-chart.ts
@@ -5,7 +5,7 @@ import dxPieChart, {
     Properties
 } from "devextreme/viz/pie_chart";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { DisposingEvent, DoneEvent, DrawnEvent, ExportedEvent, ExportingEvent, FileSavingEvent, IncidentOccurredEvent, InitializedEvent, LegendClickEvent, PointClickEvent, TooltipHiddenEvent, TooltipShownEvent, dxPieChartAnnotationConfig, dxPieChartCommonAnnotationConfig, PieChartLegendItem, PieChartSeries } from "devextreme/viz/pie_chart";
@@ -114,15 +114,18 @@ type IAdaptiveLayoutProps = React.PropsWithChildren<{
   keepLabels?: boolean;
   width?: number;
 }>
-const _componentAdaptiveLayout = memo(
-  (props: IAdaptiveLayoutProps) => {
-    return React.createElement(NestedOption<IAdaptiveLayoutProps>, { ...props });
-  }
-);
+const _componentAdaptiveLayout = (props: IAdaptiveLayoutProps) => {
+  return React.createElement(NestedOption<IAdaptiveLayoutProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "adaptiveLayout",
+    },
+  });
+};
 
-const AdaptiveLayout: typeof _componentAdaptiveLayout & IElementDescriptor = Object.assign(_componentAdaptiveLayout, {
-  OptionName: "adaptiveLayout",
-})
+const AdaptiveLayout = Object.assign<typeof _componentAdaptiveLayout, NestedComponentMeta>(_componentAdaptiveLayout, {
+  componentType: "option",
+});
 
 // owners:
 // PieChart
@@ -132,15 +135,18 @@ type IAnimationProps = React.PropsWithChildren<{
   enabled?: boolean;
   maxPointCountSupported?: number;
 }>
-const _componentAnimation = memo(
-  (props: IAnimationProps) => {
-    return React.createElement(NestedOption<IAnimationProps>, { ...props });
-  }
-);
+const _componentAnimation = (props: IAnimationProps) => {
+  return React.createElement(NestedOption<IAnimationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "animation",
+    },
+  });
+};
 
-const Animation: typeof _componentAnimation & IElementDescriptor = Object.assign(_componentAnimation, {
-  OptionName: "animation",
-})
+const Animation = Object.assign<typeof _componentAnimation, NestedComponentMeta>(_componentAnimation, {
+  componentType: "option",
+});
 
 // owners:
 // PieChart
@@ -198,32 +204,35 @@ type IAnnotationProps = React.PropsWithChildren<{
   tooltipRender?: (...params: any) => React.ReactNode;
   tooltipComponent?: React.ComponentType<any>;
 }>
-const _componentAnnotation = memo(
-  (props: IAnnotationProps) => {
-    return React.createElement(NestedOption<IAnnotationProps>, { ...props });
-  }
-);
-
-const Annotation: typeof _componentAnnotation & IElementDescriptor = Object.assign(_componentAnnotation, {
-  OptionName: "annotations",
-  IsCollectionItem: true,
-  ExpectedChildren: {
-    annotationBorder: { optionName: "border", isCollectionItem: false },
-    border: { optionName: "border", isCollectionItem: false },
-    font: { optionName: "font", isCollectionItem: false },
-    image: { optionName: "image", isCollectionItem: false },
-    shadow: { optionName: "shadow", isCollectionItem: false }
-  },
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }, {
-    tmplOption: "tooltipTemplate",
-    render: "tooltipRender",
-    component: "tooltipComponent"
-  }],
-})
+const _componentAnnotation = (props: IAnnotationProps) => {
+  return React.createElement(NestedOption<IAnnotationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "annotations",
+      IsCollectionItem: true,
+      ExpectedChildren: {
+        annotationBorder: { optionName: "border", isCollectionItem: false },
+        border: { optionName: "border", isCollectionItem: false },
+        font: { optionName: "font", isCollectionItem: false },
+        image: { optionName: "image", isCollectionItem: false },
+        shadow: { optionName: "shadow", isCollectionItem: false }
+      },
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }, {
+        tmplOption: "tooltipTemplate",
+        render: "tooltipRender",
+        component: "tooltipComponent"
+      }],
+    },
+  });
+};
+
+const Annotation = Object.assign<typeof _componentAnnotation, NestedComponentMeta>(_componentAnnotation, {
+  componentType: "option",
+});
 
 // owners:
 // Annotation
@@ -236,15 +245,18 @@ type IAnnotationBorderProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentAnnotationBorder = memo(
-  (props: IAnnotationBorderProps) => {
-    return React.createElement(NestedOption<IAnnotationBorderProps>, { ...props });
-  }
-);
+const _componentAnnotationBorder = (props: IAnnotationBorderProps) => {
+  return React.createElement(NestedOption<IAnnotationBorderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
 
-const AnnotationBorder: typeof _componentAnnotationBorder & IElementDescriptor = Object.assign(_componentAnnotationBorder, {
-  OptionName: "border",
-})
+const AnnotationBorder = Object.assign<typeof _componentAnnotationBorder, NestedComponentMeta>(_componentAnnotationBorder, {
+  componentType: "option",
+});
 
 // owners:
 // Label
@@ -257,15 +269,18 @@ type IArgumentFormatProps = React.PropsWithChildren<{
   type?: "billions" | "currency" | "day" | "decimal" | "exponential" | "fixedPoint" | "largeNumber" | "longDate" | "longTime" | "millions" | "millisecond" | "month" | "monthAndDay" | "monthAndYear" | "percent" | "quarter" | "quarterAndYear" | "shortDate" | "shortTime" | "thousands" | "trillions" | "year" | "dayOfWeek" | "hour" | "longDateLongTime" | "minute" | "second" | "shortDateShortTime";
   useCurrencyAccountingStyle?: boolean;
 }>
-const _componentArgumentFormat = memo(
-  (props: IArgumentFormatProps) => {
-    return React.createElement(NestedOption<IArgumentFormatProps>, { ...props });
-  }
-);
+const _componentArgumentFormat = (props: IArgumentFormatProps) => {
+  return React.createElement(NestedOption<IArgumentFormatProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "argumentFormat",
+    },
+  });
+};
 
-const ArgumentFormat: typeof _componentArgumentFormat & IElementDescriptor = Object.assign(_componentArgumentFormat, {
-  OptionName: "argumentFormat",
-})
+const ArgumentFormat = Object.assign<typeof _componentArgumentFormat, NestedComponentMeta>(_componentArgumentFormat, {
+  componentType: "option",
+});
 
 // owners:
 // Annotation
@@ -283,15 +298,18 @@ type IBorderProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentBorder = memo(
-  (props: IBorderProps) => {
-    return React.createElement(NestedOption<IBorderProps>, { ...props });
-  }
-);
+const _componentBorder = (props: IBorderProps) => {
+  return React.createElement(NestedOption<IBorderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
 
-const Border: typeof _componentBorder & IElementDescriptor = Object.assign(_componentBorder, {
-  OptionName: "border",
-})
+const Border = Object.assign<typeof _componentBorder, NestedComponentMeta>(_componentBorder, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettings
@@ -301,15 +319,18 @@ type IColorProps = React.PropsWithChildren<{
   base?: string;
   fillId?: string;
 }>
-const _componentColor = memo(
-  (props: IColorProps) => {
-    return React.createElement(NestedOption<IColorProps>, { ...props });
-  }
-);
+const _componentColor = (props: IColorProps) => {
+  return React.createElement(NestedOption<IColorProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "color",
+    },
+  });
+};
 
-const Color: typeof _componentColor & IElementDescriptor = Object.assign(_componentColor, {
-  OptionName: "color",
-})
+const Color = Object.assign<typeof _componentColor, NestedComponentMeta>(_componentColor, {
+  componentType: "option",
+});
 
 // owners:
 // PieChart
@@ -366,24 +387,27 @@ type ICommonAnnotationSettingsProps = React.PropsWithChildren<{
   tooltipRender?: (...params: any) => React.ReactNode;
   tooltipComponent?: React.ComponentType<any>;
 }>
-const _componentCommonAnnotationSettings = memo(
-  (props: ICommonAnnotationSettingsProps) => {
-    return React.createElement(NestedOption<ICommonAnnotationSettingsProps>, { ...props });
-  }
-);
-
-const CommonAnnotationSettings: typeof _componentCommonAnnotationSettings & IElementDescriptor = Object.assign(_componentCommonAnnotationSettings, {
-  OptionName: "commonAnnotationSettings",
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }, {
-    tmplOption: "tooltipTemplate",
-    render: "tooltipRender",
-    component: "tooltipComponent"
-  }],
-})
+const _componentCommonAnnotationSettings = (props: ICommonAnnotationSettingsProps) => {
+  return React.createElement(NestedOption<ICommonAnnotationSettingsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "commonAnnotationSettings",
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }, {
+        tmplOption: "tooltipTemplate",
+        render: "tooltipRender",
+        component: "tooltipComponent"
+      }],
+    },
+  });
+};
+
+const CommonAnnotationSettings = Object.assign<typeof _componentCommonAnnotationSettings, NestedComponentMeta>(_componentCommonAnnotationSettings, {
+  componentType: "option",
+});
 
 // owners:
 // PieChart
@@ -467,24 +491,27 @@ type ICommonSeriesSettingsProps = React.PropsWithChildren<{
   tagField?: string;
   valueField?: string;
 }>
-const _componentCommonSeriesSettings = memo(
-  (props: ICommonSeriesSettingsProps) => {
-    return React.createElement(NestedOption<ICommonSeriesSettingsProps>, { ...props });
-  }
-);
-
-const CommonSeriesSettings: typeof _componentCommonSeriesSettings & IElementDescriptor = Object.assign(_componentCommonSeriesSettings, {
-  OptionName: "commonSeriesSettings",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    color: { optionName: "color", isCollectionItem: false },
-    hoverStyle: { optionName: "hoverStyle", isCollectionItem: false },
-    label: { optionName: "label", isCollectionItem: false },
-    selectionStyle: { optionName: "selectionStyle", isCollectionItem: false },
-    seriesBorder: { optionName: "border", isCollectionItem: false },
-    smallValuesGrouping: { optionName: "smallValuesGrouping", isCollectionItem: false }
-  },
-})
+const _componentCommonSeriesSettings = (props: ICommonSeriesSettingsProps) => {
+  return React.createElement(NestedOption<ICommonSeriesSettingsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "commonSeriesSettings",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        color: { optionName: "color", isCollectionItem: false },
+        hoverStyle: { optionName: "hoverStyle", isCollectionItem: false },
+        label: { optionName: "label", isCollectionItem: false },
+        selectionStyle: { optionName: "selectionStyle", isCollectionItem: false },
+        seriesBorder: { optionName: "border", isCollectionItem: false },
+        smallValuesGrouping: { optionName: "smallValuesGrouping", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const CommonSeriesSettings = Object.assign<typeof _componentCommonSeriesSettings, NestedComponentMeta>(_componentCommonSeriesSettings, {
+  componentType: "option",
+});
 
 // owners:
 // Label
@@ -493,15 +520,18 @@ type IConnectorProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentConnector = memo(
-  (props: IConnectorProps) => {
-    return React.createElement(NestedOption<IConnectorProps>, { ...props });
-  }
-);
+const _componentConnector = (props: IConnectorProps) => {
+  return React.createElement(NestedOption<IConnectorProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "connector",
+    },
+  });
+};
 
-const Connector: typeof _componentConnector & IElementDescriptor = Object.assign(_componentConnector, {
-  OptionName: "connector",
-})
+const Connector = Object.assign<typeof _componentConnector, NestedComponentMeta>(_componentConnector, {
+  componentType: "option",
+});
 
 // owners:
 // PieChart
@@ -514,15 +544,18 @@ type IExportProps = React.PropsWithChildren<{
   printingEnabled?: boolean;
   svgToCanvas?: ((svg: any, canvas: any) => any);
 }>
-const _componentExport = memo(
-  (props: IExportProps) => {
-    return React.createElement(NestedOption<IExportProps>, { ...props });
-  }
-);
+const _componentExport = (props: IExportProps) => {
+  return React.createElement(NestedOption<IExportProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "export",
+    },
+  });
+};
 
-const Export: typeof _componentExport & IElementDescriptor = Object.assign(_componentExport, {
-  OptionName: "export",
-})
+const Export = Object.assign<typeof _componentExport, NestedComponentMeta>(_componentExport, {
+  componentType: "option",
+});
 
 // owners:
 // Annotation
@@ -541,15 +574,18 @@ type IFontProps = React.PropsWithChildren<{
   size?: number | string;
   weight?: number;
 }>
-const _componentFont = memo(
-  (props: IFontProps) => {
-    return React.createElement(NestedOption<IFontProps>, { ...props });
-  }
-);
+const _componentFont = (props: IFontProps) => {
+  return React.createElement(NestedOption<IFontProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "font",
+    },
+  });
+};
 
-const Font: typeof _componentFont & IElementDescriptor = Object.assign(_componentFont, {
-  OptionName: "font",
-})
+const Font = Object.assign<typeof _componentFont, NestedComponentMeta>(_componentFont, {
+  componentType: "option",
+});
 
 // owners:
 // Label
@@ -562,15 +598,18 @@ type IFormatProps = React.PropsWithChildren<{
   type?: "billions" | "currency" | "day" | "decimal" | "exponential" | "fixedPoint" | "largeNumber" | "longDate" | "longTime" | "millions" | "millisecond" | "month" | "monthAndDay" | "monthAndYear" | "percent" | "quarter" | "quarterAndYear" | "shortDate" | "shortTime" | "thousands" | "trillions" | "year" | "dayOfWeek" | "hour" | "longDateLongTime" | "minute" | "second" | "shortDateShortTime";
   useCurrencyAccountingStyle?: boolean;
 }>
-const _componentFormat = memo(
-  (props: IFormatProps) => {
-    return React.createElement(NestedOption<IFormatProps>, { ...props });
-  }
-);
+const _componentFormat = (props: IFormatProps) => {
+  return React.createElement(NestedOption<IFormatProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "format",
+    },
+  });
+};
 
-const Format: typeof _componentFormat & IElementDescriptor = Object.assign(_componentFormat, {
-  OptionName: "format",
-})
+const Format = Object.assign<typeof _componentFormat, NestedComponentMeta>(_componentFormat, {
+  componentType: "option",
+});
 
 // owners:
 // HoverStyle
@@ -581,15 +620,18 @@ type IHatchingProps = React.PropsWithChildren<{
   step?: number;
   width?: number;
 }>
-const _componentHatching = memo(
-  (props: IHatchingProps) => {
-    return React.createElement(NestedOption<IHatchingProps>, { ...props });
-  }
-);
+const _componentHatching = (props: IHatchingProps) => {
+  return React.createElement(NestedOption<IHatchingProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hatching",
+    },
+  });
+};
 
-const Hatching: typeof _componentHatching & IElementDescriptor = Object.assign(_componentHatching, {
-  OptionName: "hatching",
-})
+const Hatching = Object.assign<typeof _componentHatching, NestedComponentMeta>(_componentHatching, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettings
@@ -609,21 +651,24 @@ type IHoverStyleProps = React.PropsWithChildren<{
   };
   highlight?: boolean;
 }>
-const _componentHoverStyle = memo(
-  (props: IHoverStyleProps) => {
-    return React.createElement(NestedOption<IHoverStyleProps>, { ...props });
-  }
-);
-
-const HoverStyle: typeof _componentHoverStyle & IElementDescriptor = Object.assign(_componentHoverStyle, {
-  OptionName: "hoverStyle",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    color: { optionName: "color", isCollectionItem: false },
-    hatching: { optionName: "hatching", isCollectionItem: false },
-    seriesBorder: { optionName: "border", isCollectionItem: false }
-  },
-})
+const _componentHoverStyle = (props: IHoverStyleProps) => {
+  return React.createElement(NestedOption<IHoverStyleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hoverStyle",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        color: { optionName: "color", isCollectionItem: false },
+        hatching: { optionName: "hatching", isCollectionItem: false },
+        seriesBorder: { optionName: "border", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const HoverStyle = Object.assign<typeof _componentHoverStyle, NestedComponentMeta>(_componentHoverStyle, {
+  componentType: "option",
+});
 
 // owners:
 // Annotation
@@ -632,15 +677,18 @@ type IImageProps = React.PropsWithChildren<{
   url?: string;
   width?: number;
 }>
-const _componentImage = memo(
-  (props: IImageProps) => {
-    return React.createElement(NestedOption<IImageProps>, { ...props });
-  }
-);
+const _componentImage = (props: IImageProps) => {
+  return React.createElement(NestedOption<IImageProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "image",
+    },
+  });
+};
 
-const Image: typeof _componentImage & IElementDescriptor = Object.assign(_componentImage, {
-  OptionName: "image",
-})
+const Image = Object.assign<typeof _componentImage, NestedComponentMeta>(_componentImage, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettings
@@ -669,23 +717,26 @@ type ILabelProps = React.PropsWithChildren<{
   visible?: boolean;
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentLabel = memo(
-  (props: ILabelProps) => {
-    return React.createElement(NestedOption<ILabelProps>, { ...props });
-  }
-);
-
-const Label: typeof _componentLabel & IElementDescriptor = Object.assign(_componentLabel, {
-  OptionName: "label",
-  ExpectedChildren: {
-    argumentFormat: { optionName: "argumentFormat", isCollectionItem: false },
-    border: { optionName: "border", isCollectionItem: false },
-    connector: { optionName: "connector", isCollectionItem: false },
-    font: { optionName: "font", isCollectionItem: false },
-    format: { optionName: "format", isCollectionItem: false },
-    seriesBorder: { optionName: "border", isCollectionItem: false }
-  },
-})
+const _componentLabel = (props: ILabelProps) => {
+  return React.createElement(NestedOption<ILabelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "label",
+      ExpectedChildren: {
+        argumentFormat: { optionName: "argumentFormat", isCollectionItem: false },
+        border: { optionName: "border", isCollectionItem: false },
+        connector: { optionName: "connector", isCollectionItem: false },
+        font: { optionName: "font", isCollectionItem: false },
+        format: { optionName: "format", isCollectionItem: false },
+        seriesBorder: { optionName: "border", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Label = Object.assign<typeof _componentLabel, NestedComponentMeta>(_componentLabel, {
+  componentType: "option",
+});
 
 // owners:
 // PieChart
@@ -745,28 +796,31 @@ type ILegendProps = React.PropsWithChildren<{
   markerRender?: (...params: any) => React.ReactNode;
   markerComponent?: React.ComponentType<any>;
 }>
-const _componentLegend = memo(
-  (props: ILegendProps) => {
-    return React.createElement(NestedOption<ILegendProps>, { ...props });
-  }
-);
-
-const Legend: typeof _componentLegend & IElementDescriptor = Object.assign(_componentLegend, {
-  OptionName: "legend",
-  ExpectedChildren: {
-    annotationBorder: { optionName: "border", isCollectionItem: false },
-    border: { optionName: "border", isCollectionItem: false },
-    font: { optionName: "font", isCollectionItem: false },
-    legendTitle: { optionName: "title", isCollectionItem: false },
-    margin: { optionName: "margin", isCollectionItem: false },
-    title: { optionName: "title", isCollectionItem: false }
-  },
-  TemplateProps: [{
-    tmplOption: "markerTemplate",
-    render: "markerRender",
-    component: "markerComponent"
-  }],
-})
+const _componentLegend = (props: ILegendProps) => {
+  return React.createElement(NestedOption<ILegendProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "legend",
+      ExpectedChildren: {
+        annotationBorder: { optionName: "border", isCollectionItem: false },
+        border: { optionName: "border", isCollectionItem: false },
+        font: { optionName: "font", isCollectionItem: false },
+        legendTitle: { optionName: "title", isCollectionItem: false },
+        margin: { optionName: "margin", isCollectionItem: false },
+        title: { optionName: "title", isCollectionItem: false }
+      },
+      TemplateProps: [{
+        tmplOption: "markerTemplate",
+        render: "markerRender",
+        component: "markerComponent"
+      }],
+    },
+  });
+};
+
+const Legend = Object.assign<typeof _componentLegend, NestedComponentMeta>(_componentLegend, {
+  componentType: "option",
+});
 
 // owners:
 // Legend
@@ -788,21 +842,24 @@ type ILegendTitleProps = React.PropsWithChildren<{
   text?: string;
   verticalAlignment?: "bottom" | "top";
 }>
-const _componentLegendTitle = memo(
-  (props: ILegendTitleProps) => {
-    return React.createElement(NestedOption<ILegendTitleProps>, { ...props });
-  }
-);
-
-const LegendTitle: typeof _componentLegendTitle & IElementDescriptor = Object.assign(_componentLegendTitle, {
-  OptionName: "title",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false },
-    legendTitleSubtitle: { optionName: "subtitle", isCollectionItem: false },
-    margin: { optionName: "margin", isCollectionItem: false },
-    subtitle: { optionName: "subtitle", isCollectionItem: false }
-  },
-})
+const _componentLegendTitle = (props: ILegendTitleProps) => {
+  return React.createElement(NestedOption<ILegendTitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "title",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false },
+        legendTitleSubtitle: { optionName: "subtitle", isCollectionItem: false },
+        margin: { optionName: "margin", isCollectionItem: false },
+        subtitle: { optionName: "subtitle", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const LegendTitle = Object.assign<typeof _componentLegendTitle, NestedComponentMeta>(_componentLegendTitle, {
+  componentType: "option",
+});
 
 // owners:
 // LegendTitle
@@ -811,18 +868,21 @@ type ILegendTitleSubtitleProps = React.PropsWithChildren<{
   offset?: number;
   text?: string;
 }>
-const _componentLegendTitleSubtitle = memo(
-  (props: ILegendTitleSubtitleProps) => {
-    return React.createElement(NestedOption<ILegendTitleSubtitleProps>, { ...props });
-  }
-);
-
-const LegendTitleSubtitle: typeof _componentLegendTitleSubtitle & IElementDescriptor = Object.assign(_componentLegendTitleSubtitle, {
-  OptionName: "subtitle",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false }
-  },
-})
+const _componentLegendTitleSubtitle = (props: ILegendTitleSubtitleProps) => {
+  return React.createElement(NestedOption<ILegendTitleSubtitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "subtitle",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const LegendTitleSubtitle = Object.assign<typeof _componentLegendTitleSubtitle, NestedComponentMeta>(_componentLegendTitleSubtitle, {
+  componentType: "option",
+});
 
 // owners:
 // PieChart
@@ -835,21 +895,24 @@ type ILoadingIndicatorProps = React.PropsWithChildren<{
   defaultShow?: boolean;
   onShowChange?: (value: boolean) => void;
 }>
-const _componentLoadingIndicator = memo(
-  (props: ILoadingIndicatorProps) => {
-    return React.createElement(NestedOption<ILoadingIndicatorProps>, { ...props });
-  }
-);
-
-const LoadingIndicator: typeof _componentLoadingIndicator & IElementDescriptor = Object.assign(_componentLoadingIndicator, {
-  OptionName: "loadingIndicator",
-  DefaultsProps: {
-    defaultShow: "show"
-  },
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false }
-  },
-})
+const _componentLoadingIndicator = (props: ILoadingIndicatorProps) => {
+  return React.createElement(NestedOption<ILoadingIndicatorProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "loadingIndicator",
+      DefaultsProps: {
+        defaultShow: "show"
+      },
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const LoadingIndicator = Object.assign<typeof _componentLoadingIndicator, NestedComponentMeta>(_componentLoadingIndicator, {
+  componentType: "option",
+});
 
 // owners:
 // Legend
@@ -862,15 +925,18 @@ type IMarginProps = React.PropsWithChildren<{
   right?: number;
   top?: number;
 }>
-const _componentMargin = memo(
-  (props: IMarginProps) => {
-    return React.createElement(NestedOption<IMarginProps>, { ...props });
-  }
-);
+const _componentMargin = (props: IMarginProps) => {
+  return React.createElement(NestedOption<IMarginProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "margin",
+    },
+  });
+};
 
-const Margin: typeof _componentMargin & IElementDescriptor = Object.assign(_componentMargin, {
-  OptionName: "margin",
-})
+const Margin = Object.assign<typeof _componentMargin, NestedComponentMeta>(_componentMargin, {
+  componentType: "option",
+});
 
 // owners:
 // PieChart
@@ -896,21 +962,24 @@ type IPieChartTitleProps = React.PropsWithChildren<{
   verticalAlignment?: "bottom" | "top";
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentPieChartTitle = memo(
-  (props: IPieChartTitleProps) => {
-    return React.createElement(NestedOption<IPieChartTitleProps>, { ...props });
-  }
-);
-
-const PieChartTitle: typeof _componentPieChartTitle & IElementDescriptor = Object.assign(_componentPieChartTitle, {
-  OptionName: "title",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false },
-    margin: { optionName: "margin", isCollectionItem: false },
-    pieChartTitleSubtitle: { optionName: "subtitle", isCollectionItem: false },
-    subtitle: { optionName: "subtitle", isCollectionItem: false }
-  },
-})
+const _componentPieChartTitle = (props: IPieChartTitleProps) => {
+  return React.createElement(NestedOption<IPieChartTitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "title",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false },
+        margin: { optionName: "margin", isCollectionItem: false },
+        pieChartTitleSubtitle: { optionName: "subtitle", isCollectionItem: false },
+        subtitle: { optionName: "subtitle", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const PieChartTitle = Object.assign<typeof _componentPieChartTitle, NestedComponentMeta>(_componentPieChartTitle, {
+  componentType: "option",
+});
 
 // owners:
 // PieChartTitle
@@ -921,18 +990,21 @@ type IPieChartTitleSubtitleProps = React.PropsWithChildren<{
   textOverflow?: "ellipsis" | "hide" | "none";
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentPieChartTitleSubtitle = memo(
-  (props: IPieChartTitleSubtitleProps) => {
-    return React.createElement(NestedOption<IPieChartTitleSubtitleProps>, { ...props });
-  }
-);
-
-const PieChartTitleSubtitle: typeof _componentPieChartTitleSubtitle & IElementDescriptor = Object.assign(_componentPieChartTitleSubtitle, {
-  OptionName: "subtitle",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false }
-  },
-})
+const _componentPieChartTitleSubtitle = (props: IPieChartTitleSubtitleProps) => {
+  return React.createElement(NestedOption<IPieChartTitleSubtitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "subtitle",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const PieChartTitleSubtitle = Object.assign<typeof _componentPieChartTitleSubtitle, NestedComponentMeta>(_componentPieChartTitleSubtitle, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettings
@@ -952,21 +1024,24 @@ type ISelectionStyleProps = React.PropsWithChildren<{
   };
   highlight?: boolean;
 }>
-const _componentSelectionStyle = memo(
-  (props: ISelectionStyleProps) => {
-    return React.createElement(NestedOption<ISelectionStyleProps>, { ...props });
-  }
-);
-
-const SelectionStyle: typeof _componentSelectionStyle & IElementDescriptor = Object.assign(_componentSelectionStyle, {
-  OptionName: "selectionStyle",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    color: { optionName: "color", isCollectionItem: false },
-    hatching: { optionName: "hatching", isCollectionItem: false },
-    seriesBorder: { optionName: "border", isCollectionItem: false }
-  },
-})
+const _componentSelectionStyle = (props: ISelectionStyleProps) => {
+  return React.createElement(NestedOption<ISelectionStyleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "selectionStyle",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        color: { optionName: "color", isCollectionItem: false },
+        hatching: { optionName: "hatching", isCollectionItem: false },
+        seriesBorder: { optionName: "border", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const SelectionStyle = Object.assign<typeof _componentSelectionStyle, NestedComponentMeta>(_componentSelectionStyle, {
+  componentType: "option",
+});
 
 // owners:
 // PieChart
@@ -1052,16 +1127,19 @@ type ISeriesProps = React.PropsWithChildren<{
   tagField?: string;
   valueField?: string;
 }>
-const _componentSeries = memo(
-  (props: ISeriesProps) => {
-    return React.createElement(NestedOption<ISeriesProps>, { ...props });
-  }
-);
+const _componentSeries = (props: ISeriesProps) => {
+  return React.createElement(NestedOption<ISeriesProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "series",
+      IsCollectionItem: true,
+    },
+  });
+};
 
-const Series: typeof _componentSeries & IElementDescriptor = Object.assign(_componentSeries, {
-  OptionName: "series",
-  IsCollectionItem: true,
-})
+const Series = Object.assign<typeof _componentSeries, NestedComponentMeta>(_componentSeries, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettings
@@ -1074,15 +1152,18 @@ type ISeriesBorderProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentSeriesBorder = memo(
-  (props: ISeriesBorderProps) => {
-    return React.createElement(NestedOption<ISeriesBorderProps>, { ...props });
-  }
-);
+const _componentSeriesBorder = (props: ISeriesBorderProps) => {
+  return React.createElement(NestedOption<ISeriesBorderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
 
-const SeriesBorder: typeof _componentSeriesBorder & IElementDescriptor = Object.assign(_componentSeriesBorder, {
-  OptionName: "border",
-})
+const SeriesBorder = Object.assign<typeof _componentSeriesBorder, NestedComponentMeta>(_componentSeriesBorder, {
+  componentType: "option",
+});
 
 // owners:
 // PieChart
@@ -1090,15 +1171,18 @@ type ISeriesTemplateProps = React.PropsWithChildren<{
   customizeSeries?: ((seriesName: any) => PieChartSeries);
   nameField?: string;
 }>
-const _componentSeriesTemplate = memo(
-  (props: ISeriesTemplateProps) => {
-    return React.createElement(NestedOption<ISeriesTemplateProps>, { ...props });
-  }
-);
+const _componentSeriesTemplate = (props: ISeriesTemplateProps) => {
+  return React.createElement(NestedOption<ISeriesTemplateProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "seriesTemplate",
+    },
+  });
+};
 
-const SeriesTemplate: typeof _componentSeriesTemplate & IElementDescriptor = Object.assign(_componentSeriesTemplate, {
-  OptionName: "seriesTemplate",
-})
+const SeriesTemplate = Object.assign<typeof _componentSeriesTemplate, NestedComponentMeta>(_componentSeriesTemplate, {
+  componentType: "option",
+});
 
 // owners:
 // Annotation
@@ -1110,15 +1194,18 @@ type IShadowProps = React.PropsWithChildren<{
   offsetY?: number;
   opacity?: number;
 }>
-const _componentShadow = memo(
-  (props: IShadowProps) => {
-    return React.createElement(NestedOption<IShadowProps>, { ...props });
-  }
-);
+const _componentShadow = (props: IShadowProps) => {
+  return React.createElement(NestedOption<IShadowProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "shadow",
+    },
+  });
+};
 
-const Shadow: typeof _componentShadow & IElementDescriptor = Object.assign(_componentShadow, {
-  OptionName: "shadow",
-})
+const Shadow = Object.assign<typeof _componentShadow, NestedComponentMeta>(_componentShadow, {
+  componentType: "option",
+});
 
 // owners:
 // PieChart
@@ -1126,15 +1213,18 @@ type ISizeProps = React.PropsWithChildren<{
   height?: number;
   width?: number;
 }>
-const _componentSize = memo(
-  (props: ISizeProps) => {
-    return React.createElement(NestedOption<ISizeProps>, { ...props });
-  }
-);
+const _componentSize = (props: ISizeProps) => {
+  return React.createElement(NestedOption<ISizeProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "size",
+    },
+  });
+};
 
-const Size: typeof _componentSize & IElementDescriptor = Object.assign(_componentSize, {
-  OptionName: "size",
-})
+const Size = Object.assign<typeof _componentSize, NestedComponentMeta>(_componentSize, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettings
@@ -1144,15 +1234,18 @@ type ISmallValuesGroupingProps = React.PropsWithChildren<{
   threshold?: number;
   topCount?: number;
 }>
-const _componentSmallValuesGrouping = memo(
-  (props: ISmallValuesGroupingProps) => {
-    return React.createElement(NestedOption<ISmallValuesGroupingProps>, { ...props });
-  }
-);
+const _componentSmallValuesGrouping = (props: ISmallValuesGroupingProps) => {
+  return React.createElement(NestedOption<ISmallValuesGroupingProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "smallValuesGrouping",
+    },
+  });
+};
 
-const SmallValuesGrouping: typeof _componentSmallValuesGrouping & IElementDescriptor = Object.assign(_componentSmallValuesGrouping, {
-  OptionName: "smallValuesGrouping",
-})
+const SmallValuesGrouping = Object.assign<typeof _componentSmallValuesGrouping, NestedComponentMeta>(_componentSmallValuesGrouping, {
+  componentType: "option",
+});
 
 // owners:
 // LegendTitle
@@ -1164,15 +1257,18 @@ type ISubtitleProps = React.PropsWithChildren<{
   textOverflow?: "ellipsis" | "hide" | "none";
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentSubtitle = memo(
-  (props: ISubtitleProps) => {
-    return React.createElement(NestedOption<ISubtitleProps>, { ...props });
-  }
-);
+const _componentSubtitle = (props: ISubtitleProps) => {
+  return React.createElement(NestedOption<ISubtitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "subtitle",
+    },
+  });
+};
 
-const Subtitle: typeof _componentSubtitle & IElementDescriptor = Object.assign(_componentSubtitle, {
-  OptionName: "subtitle",
-})
+const Subtitle = Object.assign<typeof _componentSubtitle, NestedComponentMeta>(_componentSubtitle, {
+  componentType: "option",
+});
 
 // owners:
 // Legend
@@ -1199,15 +1295,18 @@ type ITitleProps = React.PropsWithChildren<{
   textOverflow?: "ellipsis" | "hide" | "none";
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentTitle = memo(
-  (props: ITitleProps) => {
-    return React.createElement(NestedOption<ITitleProps>, { ...props });
-  }
-);
+const _componentTitle = (props: ITitleProps) => {
+  return React.createElement(NestedOption<ITitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "title",
+    },
+  });
+};
 
-const Title: typeof _componentTitle & IElementDescriptor = Object.assign(_componentTitle, {
-  OptionName: "title",
-})
+const Title = Object.assign<typeof _componentTitle, NestedComponentMeta>(_componentTitle, {
+  componentType: "option",
+});
 
 // owners:
 // PieChart
@@ -1245,28 +1344,31 @@ type ITooltipProps = React.PropsWithChildren<{
   contentRender?: (...params: any) => React.ReactNode;
   contentComponent?: React.ComponentType<any>;
 }>
-const _componentTooltip = memo(
-  (props: ITooltipProps) => {
-    return React.createElement(NestedOption<ITooltipProps>, { ...props });
-  }
-);
-
-const Tooltip: typeof _componentTooltip & IElementDescriptor = Object.assign(_componentTooltip, {
-  OptionName: "tooltip",
-  ExpectedChildren: {
-    argumentFormat: { optionName: "argumentFormat", isCollectionItem: false },
-    border: { optionName: "border", isCollectionItem: false },
-    font: { optionName: "font", isCollectionItem: false },
-    format: { optionName: "format", isCollectionItem: false },
-    shadow: { optionName: "shadow", isCollectionItem: false },
-    tooltipBorder: { optionName: "border", isCollectionItem: false }
-  },
-  TemplateProps: [{
-    tmplOption: "contentTemplate",
-    render: "contentRender",
-    component: "contentComponent"
-  }],
-})
+const _componentTooltip = (props: ITooltipProps) => {
+  return React.createElement(NestedOption<ITooltipProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "tooltip",
+      ExpectedChildren: {
+        argumentFormat: { optionName: "argumentFormat", isCollectionItem: false },
+        border: { optionName: "border", isCollectionItem: false },
+        font: { optionName: "font", isCollectionItem: false },
+        format: { optionName: "format", isCollectionItem: false },
+        shadow: { optionName: "shadow", isCollectionItem: false },
+        tooltipBorder: { optionName: "border", isCollectionItem: false }
+      },
+      TemplateProps: [{
+        tmplOption: "contentTemplate",
+        render: "contentRender",
+        component: "contentComponent"
+      }],
+    },
+  });
+};
+
+const Tooltip = Object.assign<typeof _componentTooltip, NestedComponentMeta>(_componentTooltip, {
+  componentType: "option",
+});
 
 // owners:
 // Tooltip
@@ -1277,15 +1379,18 @@ type ITooltipBorderProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentTooltipBorder = memo(
-  (props: ITooltipBorderProps) => {
-    return React.createElement(NestedOption<ITooltipBorderProps>, { ...props });
-  }
-);
-
-const TooltipBorder: typeof _componentTooltipBorder & IElementDescriptor = Object.assign(_componentTooltipBorder, {
-  OptionName: "border",
-})
+const _componentTooltipBorder = (props: ITooltipBorderProps) => {
+  return React.createElement(NestedOption<ITooltipBorderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
+
+const TooltipBorder = Object.assign<typeof _componentTooltipBorder, NestedComponentMeta>(_componentTooltipBorder, {
+  componentType: "option",
+});
 
 export default PieChart;
 export {
diff --git a/packages/devextreme-react/src/pivot-grid-field-chooser.ts b/packages/devextreme-react/src/pivot-grid-field-chooser.ts
index 46e05257eff3..d0f19249c3e4 100644
--- a/packages/devextreme-react/src/pivot-grid-field-chooser.ts
+++ b/packages/devextreme-react/src/pivot-grid-field-chooser.ts
@@ -5,7 +5,7 @@ import dxPivotGridFieldChooser, {
     Properties
 } from "devextreme/ui/pivot_grid_field_chooser";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { ContentReadyEvent, ContextMenuPreparingEvent, DisposingEvent, InitializedEvent } from "devextreme/ui/pivot_grid_field_chooser";
@@ -79,20 +79,23 @@ type IHeaderFilterProps = React.PropsWithChildren<{
   };
   width?: number;
 }>
-const _componentHeaderFilter = memo(
-  (props: IHeaderFilterProps) => {
-    return React.createElement(NestedOption<IHeaderFilterProps>, { ...props });
-  }
-);
-
-const HeaderFilter: typeof _componentHeaderFilter & IElementDescriptor = Object.assign(_componentHeaderFilter, {
-  OptionName: "headerFilter",
-  ExpectedChildren: {
-    headerFilterTexts: { optionName: "texts", isCollectionItem: false },
-    search: { optionName: "search", isCollectionItem: false },
-    texts: { optionName: "texts", isCollectionItem: false }
-  },
-})
+const _componentHeaderFilter = (props: IHeaderFilterProps) => {
+  return React.createElement(NestedOption<IHeaderFilterProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "headerFilter",
+      ExpectedChildren: {
+        headerFilterTexts: { optionName: "texts", isCollectionItem: false },
+        search: { optionName: "search", isCollectionItem: false },
+        texts: { optionName: "texts", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const HeaderFilter = Object.assign<typeof _componentHeaderFilter, NestedComponentMeta>(_componentHeaderFilter, {
+  componentType: "option",
+});
 
 // owners:
 // HeaderFilter
@@ -101,15 +104,18 @@ type IHeaderFilterTextsProps = React.PropsWithChildren<{
   emptyValue?: string;
   ok?: string;
 }>
-const _componentHeaderFilterTexts = memo(
-  (props: IHeaderFilterTextsProps) => {
-    return React.createElement(NestedOption<IHeaderFilterTextsProps>, { ...props });
-  }
-);
+const _componentHeaderFilterTexts = (props: IHeaderFilterTextsProps) => {
+  return React.createElement(NestedOption<IHeaderFilterTextsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "texts",
+    },
+  });
+};
 
-const HeaderFilterTexts: typeof _componentHeaderFilterTexts & IElementDescriptor = Object.assign(_componentHeaderFilterTexts, {
-  OptionName: "texts",
-})
+const HeaderFilterTexts = Object.assign<typeof _componentHeaderFilterTexts, NestedComponentMeta>(_componentHeaderFilterTexts, {
+  componentType: "option",
+});
 
 // owners:
 // PivotGridFieldChooser
@@ -120,15 +126,18 @@ type IPivotGridFieldChooserTextsProps = React.PropsWithChildren<{
   filterFields?: string;
   rowFields?: string;
 }>
-const _componentPivotGridFieldChooserTexts = memo(
-  (props: IPivotGridFieldChooserTextsProps) => {
-    return React.createElement(NestedOption<IPivotGridFieldChooserTextsProps>, { ...props });
-  }
-);
+const _componentPivotGridFieldChooserTexts = (props: IPivotGridFieldChooserTextsProps) => {
+  return React.createElement(NestedOption<IPivotGridFieldChooserTextsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "texts",
+    },
+  });
+};
 
-const PivotGridFieldChooserTexts: typeof _componentPivotGridFieldChooserTexts & IElementDescriptor = Object.assign(_componentPivotGridFieldChooserTexts, {
-  OptionName: "texts",
-})
+const PivotGridFieldChooserTexts = Object.assign<typeof _componentPivotGridFieldChooserTexts, NestedComponentMeta>(_componentPivotGridFieldChooserTexts, {
+  componentType: "option",
+});
 
 // owners:
 // HeaderFilter
@@ -138,15 +147,18 @@ type ISearchProps = React.PropsWithChildren<{
   mode?: "contains" | "startswith" | "equals";
   timeout?: number;
 }>
-const _componentSearch = memo(
-  (props: ISearchProps) => {
-    return React.createElement(NestedOption<ISearchProps>, { ...props });
-  }
-);
+const _componentSearch = (props: ISearchProps) => {
+  return React.createElement(NestedOption<ISearchProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "search",
+    },
+  });
+};
 
-const Search: typeof _componentSearch & IElementDescriptor = Object.assign(_componentSearch, {
-  OptionName: "search",
-})
+const Search = Object.assign<typeof _componentSearch, NestedComponentMeta>(_componentSearch, {
+  componentType: "option",
+});
 
 // owners:
 // HeaderFilter
@@ -161,15 +173,18 @@ type ITextsProps = React.PropsWithChildren<{
   filterFields?: string;
   rowFields?: string;
 }>
-const _componentTexts = memo(
-  (props: ITextsProps) => {
-    return React.createElement(NestedOption<ITextsProps>, { ...props });
-  }
-);
-
-const Texts: typeof _componentTexts & IElementDescriptor = Object.assign(_componentTexts, {
-  OptionName: "texts",
-})
+const _componentTexts = (props: ITextsProps) => {
+  return React.createElement(NestedOption<ITextsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "texts",
+    },
+  });
+};
+
+const Texts = Object.assign<typeof _componentTexts, NestedComponentMeta>(_componentTexts, {
+  componentType: "option",
+});
 
 export default PivotGridFieldChooser;
 export {
diff --git a/packages/devextreme-react/src/pivot-grid.ts b/packages/devextreme-react/src/pivot-grid.ts
index 4d71d7db5142..9769a5f60a34 100644
--- a/packages/devextreme-react/src/pivot-grid.ts
+++ b/packages/devextreme-react/src/pivot-grid.ts
@@ -5,7 +5,7 @@ import dxPivotGrid, {
     Properties
 } from "devextreme/ui/pivot_grid";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { CellClickEvent, CellPreparedEvent, ContentReadyEvent, ContextMenuPreparingEvent, DisposingEvent, ExportingEvent, InitializedEvent } from "devextreme/ui/pivot_grid";
@@ -77,15 +77,18 @@ const PivotGrid = memo(
 type IExportProps = React.PropsWithChildren<{
   enabled?: boolean;
 }>
-const _componentExport = memo(
-  (props: IExportProps) => {
-    return React.createElement(NestedOption<IExportProps>, { ...props });
-  }
-);
+const _componentExport = (props: IExportProps) => {
+  return React.createElement(NestedOption<IExportProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "export",
+    },
+  });
+};
 
-const Export: typeof _componentExport & IElementDescriptor = Object.assign(_componentExport, {
-  OptionName: "export",
-})
+const Export = Object.assign<typeof _componentExport, NestedComponentMeta>(_componentExport, {
+  componentType: "option",
+});
 
 // owners:
 // PivotGrid
@@ -106,19 +109,22 @@ type IFieldChooserProps = React.PropsWithChildren<{
   title?: string;
   width?: number;
 }>
-const _componentFieldChooser = memo(
-  (props: IFieldChooserProps) => {
-    return React.createElement(NestedOption<IFieldChooserProps>, { ...props });
-  }
-);
-
-const FieldChooser: typeof _componentFieldChooser & IElementDescriptor = Object.assign(_componentFieldChooser, {
-  OptionName: "fieldChooser",
-  ExpectedChildren: {
-    fieldChooserTexts: { optionName: "texts", isCollectionItem: false },
-    texts: { optionName: "texts", isCollectionItem: false }
-  },
-})
+const _componentFieldChooser = (props: IFieldChooserProps) => {
+  return React.createElement(NestedOption<IFieldChooserProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "fieldChooser",
+      ExpectedChildren: {
+        fieldChooserTexts: { optionName: "texts", isCollectionItem: false },
+        texts: { optionName: "texts", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const FieldChooser = Object.assign<typeof _componentFieldChooser, NestedComponentMeta>(_componentFieldChooser, {
+  componentType: "option",
+});
 
 // owners:
 // FieldChooser
@@ -129,15 +135,18 @@ type IFieldChooserTextsProps = React.PropsWithChildren<{
   filterFields?: string;
   rowFields?: string;
 }>
-const _componentFieldChooserTexts = memo(
-  (props: IFieldChooserTextsProps) => {
-    return React.createElement(NestedOption<IFieldChooserTextsProps>, { ...props });
-  }
-);
+const _componentFieldChooserTexts = (props: IFieldChooserTextsProps) => {
+  return React.createElement(NestedOption<IFieldChooserTextsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "texts",
+    },
+  });
+};
 
-const FieldChooserTexts: typeof _componentFieldChooserTexts & IElementDescriptor = Object.assign(_componentFieldChooserTexts, {
-  OptionName: "texts",
-})
+const FieldChooserTexts = Object.assign<typeof _componentFieldChooserTexts, NestedComponentMeta>(_componentFieldChooserTexts, {
+  componentType: "option",
+});
 
 // owners:
 // PivotGrid
@@ -155,19 +164,22 @@ type IFieldPanelProps = React.PropsWithChildren<{
   };
   visible?: boolean;
 }>
-const _componentFieldPanel = memo(
-  (props: IFieldPanelProps) => {
-    return React.createElement(NestedOption<IFieldPanelProps>, { ...props });
-  }
-);
-
-const FieldPanel: typeof _componentFieldPanel & IElementDescriptor = Object.assign(_componentFieldPanel, {
-  OptionName: "fieldPanel",
-  ExpectedChildren: {
-    fieldPanelTexts: { optionName: "texts", isCollectionItem: false },
-    texts: { optionName: "texts", isCollectionItem: false }
-  },
-})
+const _componentFieldPanel = (props: IFieldPanelProps) => {
+  return React.createElement(NestedOption<IFieldPanelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "fieldPanel",
+      ExpectedChildren: {
+        fieldPanelTexts: { optionName: "texts", isCollectionItem: false },
+        texts: { optionName: "texts", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const FieldPanel = Object.assign<typeof _componentFieldPanel, NestedComponentMeta>(_componentFieldPanel, {
+  componentType: "option",
+});
 
 // owners:
 // FieldPanel
@@ -177,15 +189,18 @@ type IFieldPanelTextsProps = React.PropsWithChildren<{
   filterFieldArea?: string;
   rowFieldArea?: string;
 }>
-const _componentFieldPanelTexts = memo(
-  (props: IFieldPanelTextsProps) => {
-    return React.createElement(NestedOption<IFieldPanelTextsProps>, { ...props });
-  }
-);
+const _componentFieldPanelTexts = (props: IFieldPanelTextsProps) => {
+  return React.createElement(NestedOption<IFieldPanelTextsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "texts",
+    },
+  });
+};
 
-const FieldPanelTexts: typeof _componentFieldPanelTexts & IElementDescriptor = Object.assign(_componentFieldPanelTexts, {
-  OptionName: "texts",
-})
+const FieldPanelTexts = Object.assign<typeof _componentFieldPanelTexts, NestedComponentMeta>(_componentFieldPanelTexts, {
+  componentType: "option",
+});
 
 // owners:
 // PivotGrid
@@ -203,20 +218,23 @@ type IHeaderFilterProps = React.PropsWithChildren<{
   };
   width?: number;
 }>
-const _componentHeaderFilter = memo(
-  (props: IHeaderFilterProps) => {
-    return React.createElement(NestedOption<IHeaderFilterProps>, { ...props });
-  }
-);
-
-const HeaderFilter: typeof _componentHeaderFilter & IElementDescriptor = Object.assign(_componentHeaderFilter, {
-  OptionName: "headerFilter",
-  ExpectedChildren: {
-    headerFilterTexts: { optionName: "texts", isCollectionItem: false },
-    search: { optionName: "search", isCollectionItem: false },
-    texts: { optionName: "texts", isCollectionItem: false }
-  },
-})
+const _componentHeaderFilter = (props: IHeaderFilterProps) => {
+  return React.createElement(NestedOption<IHeaderFilterProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "headerFilter",
+      ExpectedChildren: {
+        headerFilterTexts: { optionName: "texts", isCollectionItem: false },
+        search: { optionName: "search", isCollectionItem: false },
+        texts: { optionName: "texts", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const HeaderFilter = Object.assign<typeof _componentHeaderFilter, NestedComponentMeta>(_componentHeaderFilter, {
+  componentType: "option",
+});
 
 // owners:
 // HeaderFilter
@@ -225,15 +243,18 @@ type IHeaderFilterTextsProps = React.PropsWithChildren<{
   emptyValue?: string;
   ok?: string;
 }>
-const _componentHeaderFilterTexts = memo(
-  (props: IHeaderFilterTextsProps) => {
-    return React.createElement(NestedOption<IHeaderFilterTextsProps>, { ...props });
-  }
-);
+const _componentHeaderFilterTexts = (props: IHeaderFilterTextsProps) => {
+  return React.createElement(NestedOption<IHeaderFilterTextsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "texts",
+    },
+  });
+};
 
-const HeaderFilterTexts: typeof _componentHeaderFilterTexts & IElementDescriptor = Object.assign(_componentHeaderFilterTexts, {
-  OptionName: "texts",
-})
+const HeaderFilterTexts = Object.assign<typeof _componentHeaderFilterTexts, NestedComponentMeta>(_componentHeaderFilterTexts, {
+  componentType: "option",
+});
 
 // owners:
 // PivotGrid
@@ -248,15 +269,18 @@ type ILoadPanelProps = React.PropsWithChildren<{
   text?: string;
   width?: number;
 }>
-const _componentLoadPanel = memo(
-  (props: ILoadPanelProps) => {
-    return React.createElement(NestedOption<ILoadPanelProps>, { ...props });
-  }
-);
+const _componentLoadPanel = (props: ILoadPanelProps) => {
+  return React.createElement(NestedOption<ILoadPanelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "loadPanel",
+    },
+  });
+};
 
-const LoadPanel: typeof _componentLoadPanel & IElementDescriptor = Object.assign(_componentLoadPanel, {
-  OptionName: "loadPanel",
-})
+const LoadPanel = Object.assign<typeof _componentLoadPanel, NestedComponentMeta>(_componentLoadPanel, {
+  componentType: "option",
+});
 
 // owners:
 // PivotGrid
@@ -273,15 +297,18 @@ type IPivotGridTextsProps = React.PropsWithChildren<{
   sortRowBySummary?: string;
   total?: string;
 }>
-const _componentPivotGridTexts = memo(
-  (props: IPivotGridTextsProps) => {
-    return React.createElement(NestedOption<IPivotGridTextsProps>, { ...props });
-  }
-);
+const _componentPivotGridTexts = (props: IPivotGridTextsProps) => {
+  return React.createElement(NestedOption<IPivotGridTextsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "texts",
+    },
+  });
+};
 
-const PivotGridTexts: typeof _componentPivotGridTexts & IElementDescriptor = Object.assign(_componentPivotGridTexts, {
-  OptionName: "texts",
-})
+const PivotGridTexts = Object.assign<typeof _componentPivotGridTexts, NestedComponentMeta>(_componentPivotGridTexts, {
+  componentType: "option",
+});
 
 // owners:
 // PivotGrid
@@ -289,15 +316,18 @@ type IScrollingProps = React.PropsWithChildren<{
   mode?: "standard" | "virtual";
   useNative?: boolean | "auto";
 }>
-const _componentScrolling = memo(
-  (props: IScrollingProps) => {
-    return React.createElement(NestedOption<IScrollingProps>, { ...props });
-  }
-);
+const _componentScrolling = (props: IScrollingProps) => {
+  return React.createElement(NestedOption<IScrollingProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "scrolling",
+    },
+  });
+};
 
-const Scrolling: typeof _componentScrolling & IElementDescriptor = Object.assign(_componentScrolling, {
-  OptionName: "scrolling",
-})
+const Scrolling = Object.assign<typeof _componentScrolling, NestedComponentMeta>(_componentScrolling, {
+  componentType: "option",
+});
 
 // owners:
 // HeaderFilter
@@ -307,15 +337,18 @@ type ISearchProps = React.PropsWithChildren<{
   mode?: "contains" | "startswith" | "equals";
   timeout?: number;
 }>
-const _componentSearch = memo(
-  (props: ISearchProps) => {
-    return React.createElement(NestedOption<ISearchProps>, { ...props });
-  }
-);
+const _componentSearch = (props: ISearchProps) => {
+  return React.createElement(NestedOption<ISearchProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "search",
+    },
+  });
+};
 
-const Search: typeof _componentSearch & IElementDescriptor = Object.assign(_componentSearch, {
-  OptionName: "search",
-})
+const Search = Object.assign<typeof _componentSearch, NestedComponentMeta>(_componentSearch, {
+  componentType: "option",
+});
 
 // owners:
 // PivotGrid
@@ -327,15 +360,18 @@ type IStateStoringProps = React.PropsWithChildren<{
   storageKey?: string;
   type?: "custom" | "localStorage" | "sessionStorage";
 }>
-const _componentStateStoring = memo(
-  (props: IStateStoringProps) => {
-    return React.createElement(NestedOption<IStateStoringProps>, { ...props });
-  }
-);
+const _componentStateStoring = (props: IStateStoringProps) => {
+  return React.createElement(NestedOption<IStateStoringProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "stateStoring",
+    },
+  });
+};
 
-const StateStoring: typeof _componentStateStoring & IElementDescriptor = Object.assign(_componentStateStoring, {
-  OptionName: "stateStoring",
-})
+const StateStoring = Object.assign<typeof _componentStateStoring, NestedComponentMeta>(_componentStateStoring, {
+  componentType: "option",
+});
 
 // owners:
 // FieldChooser
@@ -367,15 +403,18 @@ type ITextsProps = React.PropsWithChildren<{
   sortRowBySummary?: string;
   total?: string;
 }>
-const _componentTexts = memo(
-  (props: ITextsProps) => {
-    return React.createElement(NestedOption<ITextsProps>, { ...props });
-  }
-);
-
-const Texts: typeof _componentTexts & IElementDescriptor = Object.assign(_componentTexts, {
-  OptionName: "texts",
-})
+const _componentTexts = (props: ITextsProps) => {
+  return React.createElement(NestedOption<ITextsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "texts",
+    },
+  });
+};
+
+const Texts = Object.assign<typeof _componentTexts, NestedComponentMeta>(_componentTexts, {
+  componentType: "option",
+});
 
 export default PivotGrid;
 export {
diff --git a/packages/devextreme-react/src/polar-chart.ts b/packages/devextreme-react/src/polar-chart.ts
index 93880ae9e822..b7febd4e82d3 100644
--- a/packages/devextreme-react/src/polar-chart.ts
+++ b/packages/devextreme-react/src/polar-chart.ts
@@ -5,7 +5,7 @@ import dxPolarChart, {
     Properties
 } from "devextreme/viz/polar_chart";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { ArgumentAxisClickEvent, DisposingEvent, DoneEvent, DrawnEvent, ExportedEvent, ExportingEvent, FileSavingEvent, IncidentOccurredEvent, InitializedEvent, LegendClickEvent, PointClickEvent, SeriesClickEvent, TooltipHiddenEvent, TooltipShownEvent, ZoomEndEvent, ZoomStartEvent, dxPolarChartAnnotationConfig, dxPolarChartCommonAnnotationConfig, PolarChartSeries } from "devextreme/viz/polar_chart";
@@ -115,15 +115,18 @@ type IAdaptiveLayoutProps = React.PropsWithChildren<{
   keepLabels?: boolean;
   width?: number;
 }>
-const _componentAdaptiveLayout = memo(
-  (props: IAdaptiveLayoutProps) => {
-    return React.createElement(NestedOption<IAdaptiveLayoutProps>, { ...props });
-  }
-);
+const _componentAdaptiveLayout = (props: IAdaptiveLayoutProps) => {
+  return React.createElement(NestedOption<IAdaptiveLayoutProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "adaptiveLayout",
+    },
+  });
+};
 
-const AdaptiveLayout: typeof _componentAdaptiveLayout & IElementDescriptor = Object.assign(_componentAdaptiveLayout, {
-  OptionName: "adaptiveLayout",
-})
+const AdaptiveLayout = Object.assign<typeof _componentAdaptiveLayout, NestedComponentMeta>(_componentAdaptiveLayout, {
+  componentType: "option",
+});
 
 // owners:
 // PolarChart
@@ -133,15 +136,18 @@ type IAnimationProps = React.PropsWithChildren<{
   enabled?: boolean;
   maxPointCountSupported?: number;
 }>
-const _componentAnimation = memo(
-  (props: IAnimationProps) => {
-    return React.createElement(NestedOption<IAnimationProps>, { ...props });
-  }
-);
+const _componentAnimation = (props: IAnimationProps) => {
+  return React.createElement(NestedOption<IAnimationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "animation",
+    },
+  });
+};
 
-const Animation: typeof _componentAnimation & IElementDescriptor = Object.assign(_componentAnimation, {
-  OptionName: "animation",
-})
+const Animation = Object.assign<typeof _componentAnimation, NestedComponentMeta>(_componentAnimation, {
+  componentType: "option",
+});
 
 // owners:
 // PolarChart
@@ -201,32 +207,35 @@ type IAnnotationProps = React.PropsWithChildren<{
   tooltipRender?: (...params: any) => React.ReactNode;
   tooltipComponent?: React.ComponentType<any>;
 }>
-const _componentAnnotation = memo(
-  (props: IAnnotationProps) => {
-    return React.createElement(NestedOption<IAnnotationProps>, { ...props });
-  }
-);
-
-const Annotation: typeof _componentAnnotation & IElementDescriptor = Object.assign(_componentAnnotation, {
-  OptionName: "annotations",
-  IsCollectionItem: true,
-  ExpectedChildren: {
-    annotationBorder: { optionName: "border", isCollectionItem: false },
-    border: { optionName: "border", isCollectionItem: false },
-    font: { optionName: "font", isCollectionItem: false },
-    image: { optionName: "image", isCollectionItem: false },
-    shadow: { optionName: "shadow", isCollectionItem: false }
-  },
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }, {
-    tmplOption: "tooltipTemplate",
-    render: "tooltipRender",
-    component: "tooltipComponent"
-  }],
-})
+const _componentAnnotation = (props: IAnnotationProps) => {
+  return React.createElement(NestedOption<IAnnotationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "annotations",
+      IsCollectionItem: true,
+      ExpectedChildren: {
+        annotationBorder: { optionName: "border", isCollectionItem: false },
+        border: { optionName: "border", isCollectionItem: false },
+        font: { optionName: "font", isCollectionItem: false },
+        image: { optionName: "image", isCollectionItem: false },
+        shadow: { optionName: "shadow", isCollectionItem: false }
+      },
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }, {
+        tmplOption: "tooltipTemplate",
+        render: "tooltipRender",
+        component: "tooltipComponent"
+      }],
+    },
+  });
+};
+
+const Annotation = Object.assign<typeof _componentAnnotation, NestedComponentMeta>(_componentAnnotation, {
+  componentType: "option",
+});
 
 // owners:
 // Annotation
@@ -239,15 +248,18 @@ type IAnnotationBorderProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentAnnotationBorder = memo(
-  (props: IAnnotationBorderProps) => {
-    return React.createElement(NestedOption<IAnnotationBorderProps>, { ...props });
-  }
-);
+const _componentAnnotationBorder = (props: IAnnotationBorderProps) => {
+  return React.createElement(NestedOption<IAnnotationBorderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
 
-const AnnotationBorder: typeof _componentAnnotationBorder & IElementDescriptor = Object.assign(_componentAnnotationBorder, {
-  OptionName: "border",
-})
+const AnnotationBorder = Object.assign<typeof _componentAnnotationBorder, NestedComponentMeta>(_componentAnnotationBorder, {
+  componentType: "option",
+});
 
 // owners:
 // PolarChart
@@ -368,31 +380,34 @@ type IArgumentAxisProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentArgumentAxis = memo(
-  (props: IArgumentAxisProps) => {
-    return React.createElement(NestedOption<IArgumentAxisProps>, { ...props });
-  }
-);
-
-const ArgumentAxis: typeof _componentArgumentAxis & IElementDescriptor = Object.assign(_componentArgumentAxis, {
-  OptionName: "argumentAxis",
-  ExpectedChildren: {
-    argumentAxisMinorTick: { optionName: "minorTick", isCollectionItem: false },
-    argumentAxisTick: { optionName: "tick", isCollectionItem: false },
-    axisLabel: { optionName: "label", isCollectionItem: false },
-    constantLine: { optionName: "constantLines", isCollectionItem: true },
-    constantLineStyle: { optionName: "constantLineStyle", isCollectionItem: false },
-    grid: { optionName: "grid", isCollectionItem: false },
-    label: { optionName: "label", isCollectionItem: false },
-    minorGrid: { optionName: "minorGrid", isCollectionItem: false },
-    minorTick: { optionName: "minorTick", isCollectionItem: false },
-    minorTickInterval: { optionName: "minorTickInterval", isCollectionItem: false },
-    strip: { optionName: "strips", isCollectionItem: true },
-    stripStyle: { optionName: "stripStyle", isCollectionItem: false },
-    tick: { optionName: "tick", isCollectionItem: false },
-    tickInterval: { optionName: "tickInterval", isCollectionItem: false }
-  },
-})
+const _componentArgumentAxis = (props: IArgumentAxisProps) => {
+  return React.createElement(NestedOption<IArgumentAxisProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "argumentAxis",
+      ExpectedChildren: {
+        argumentAxisMinorTick: { optionName: "minorTick", isCollectionItem: false },
+        argumentAxisTick: { optionName: "tick", isCollectionItem: false },
+        axisLabel: { optionName: "label", isCollectionItem: false },
+        constantLine: { optionName: "constantLines", isCollectionItem: true },
+        constantLineStyle: { optionName: "constantLineStyle", isCollectionItem: false },
+        grid: { optionName: "grid", isCollectionItem: false },
+        label: { optionName: "label", isCollectionItem: false },
+        minorGrid: { optionName: "minorGrid", isCollectionItem: false },
+        minorTick: { optionName: "minorTick", isCollectionItem: false },
+        minorTickInterval: { optionName: "minorTickInterval", isCollectionItem: false },
+        strip: { optionName: "strips", isCollectionItem: true },
+        stripStyle: { optionName: "stripStyle", isCollectionItem: false },
+        tick: { optionName: "tick", isCollectionItem: false },
+        tickInterval: { optionName: "tickInterval", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const ArgumentAxis = Object.assign<typeof _componentArgumentAxis, NestedComponentMeta>(_componentArgumentAxis, {
+  componentType: "option",
+});
 
 // owners:
 // ArgumentAxis
@@ -404,15 +419,18 @@ type IArgumentAxisMinorTickProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentArgumentAxisMinorTick = memo(
-  (props: IArgumentAxisMinorTickProps) => {
-    return React.createElement(NestedOption<IArgumentAxisMinorTickProps>, { ...props });
-  }
-);
+const _componentArgumentAxisMinorTick = (props: IArgumentAxisMinorTickProps) => {
+  return React.createElement(NestedOption<IArgumentAxisMinorTickProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "minorTick",
+    },
+  });
+};
 
-const ArgumentAxisMinorTick: typeof _componentArgumentAxisMinorTick & IElementDescriptor = Object.assign(_componentArgumentAxisMinorTick, {
-  OptionName: "minorTick",
-})
+const ArgumentAxisMinorTick = Object.assign<typeof _componentArgumentAxisMinorTick, NestedComponentMeta>(_componentArgumentAxisMinorTick, {
+  componentType: "option",
+});
 
 // owners:
 // ArgumentAxis
@@ -424,15 +442,18 @@ type IArgumentAxisTickProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentArgumentAxisTick = memo(
-  (props: IArgumentAxisTickProps) => {
-    return React.createElement(NestedOption<IArgumentAxisTickProps>, { ...props });
-  }
-);
+const _componentArgumentAxisTick = (props: IArgumentAxisTickProps) => {
+  return React.createElement(NestedOption<IArgumentAxisTickProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "tick",
+    },
+  });
+};
 
-const ArgumentAxisTick: typeof _componentArgumentAxisTick & IElementDescriptor = Object.assign(_componentArgumentAxisTick, {
-  OptionName: "tick",
-})
+const ArgumentAxisTick = Object.assign<typeof _componentArgumentAxisTick, NestedComponentMeta>(_componentArgumentAxisTick, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettingsLabel
@@ -445,15 +466,18 @@ type IArgumentFormatProps = React.PropsWithChildren<{
   type?: "billions" | "currency" | "day" | "decimal" | "exponential" | "fixedPoint" | "largeNumber" | "longDate" | "longTime" | "millions" | "millisecond" | "month" | "monthAndDay" | "monthAndYear" | "percent" | "quarter" | "quarterAndYear" | "shortDate" | "shortTime" | "thousands" | "trillions" | "year" | "dayOfWeek" | "hour" | "longDateLongTime" | "minute" | "second" | "shortDateShortTime";
   useCurrencyAccountingStyle?: boolean;
 }>
-const _componentArgumentFormat = memo(
-  (props: IArgumentFormatProps) => {
-    return React.createElement(NestedOption<IArgumentFormatProps>, { ...props });
-  }
-);
+const _componentArgumentFormat = (props: IArgumentFormatProps) => {
+  return React.createElement(NestedOption<IArgumentFormatProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "argumentFormat",
+    },
+  });
+};
 
-const ArgumentFormat: typeof _componentArgumentFormat & IElementDescriptor = Object.assign(_componentArgumentFormat, {
-  OptionName: "argumentFormat",
-})
+const ArgumentFormat = Object.assign<typeof _componentArgumentFormat, NestedComponentMeta>(_componentArgumentFormat, {
+  componentType: "option",
+});
 
 // owners:
 // ArgumentAxis
@@ -467,15 +491,18 @@ type IAxisLabelProps = React.PropsWithChildren<{
   overlappingBehavior?: "hide" | "none";
   visible?: boolean;
 }>
-const _componentAxisLabel = memo(
-  (props: IAxisLabelProps) => {
-    return React.createElement(NestedOption<IAxisLabelProps>, { ...props });
-  }
-);
+const _componentAxisLabel = (props: IAxisLabelProps) => {
+  return React.createElement(NestedOption<IAxisLabelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "label",
+    },
+  });
+};
 
-const AxisLabel: typeof _componentAxisLabel & IElementDescriptor = Object.assign(_componentAxisLabel, {
-  OptionName: "label",
-})
+const AxisLabel = Object.assign<typeof _componentAxisLabel, NestedComponentMeta>(_componentAxisLabel, {
+  componentType: "option",
+});
 
 // owners:
 // Annotation
@@ -496,15 +523,18 @@ type IBorderProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentBorder = memo(
-  (props: IBorderProps) => {
-    return React.createElement(NestedOption<IBorderProps>, { ...props });
-  }
-);
+const _componentBorder = (props: IBorderProps) => {
+  return React.createElement(NestedOption<IBorderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
 
-const Border: typeof _componentBorder & IElementDescriptor = Object.assign(_componentBorder, {
-  OptionName: "border",
-})
+const Border = Object.assign<typeof _componentBorder, NestedComponentMeta>(_componentBorder, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettings
@@ -517,15 +547,18 @@ type IColorProps = React.PropsWithChildren<{
   base?: string;
   fillId?: string;
 }>
-const _componentColor = memo(
-  (props: IColorProps) => {
-    return React.createElement(NestedOption<IColorProps>, { ...props });
-  }
-);
+const _componentColor = (props: IColorProps) => {
+  return React.createElement(NestedOption<IColorProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "color",
+    },
+  });
+};
 
-const Color: typeof _componentColor & IElementDescriptor = Object.assign(_componentColor, {
-  OptionName: "color",
-})
+const Color = Object.assign<typeof _componentColor, NestedComponentMeta>(_componentColor, {
+  componentType: "option",
+});
 
 // owners:
 // PolarChart
@@ -584,24 +617,27 @@ type ICommonAnnotationSettingsProps = React.PropsWithChildren<{
   tooltipRender?: (...params: any) => React.ReactNode;
   tooltipComponent?: React.ComponentType<any>;
 }>
-const _componentCommonAnnotationSettings = memo(
-  (props: ICommonAnnotationSettingsProps) => {
-    return React.createElement(NestedOption<ICommonAnnotationSettingsProps>, { ...props });
-  }
-);
-
-const CommonAnnotationSettings: typeof _componentCommonAnnotationSettings & IElementDescriptor = Object.assign(_componentCommonAnnotationSettings, {
-  OptionName: "commonAnnotationSettings",
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }, {
-    tmplOption: "tooltipTemplate",
-    render: "tooltipRender",
-    component: "tooltipComponent"
-  }],
-})
+const _componentCommonAnnotationSettings = (props: ICommonAnnotationSettingsProps) => {
+  return React.createElement(NestedOption<ICommonAnnotationSettingsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "commonAnnotationSettings",
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }, {
+        tmplOption: "tooltipTemplate",
+        render: "tooltipRender",
+        component: "tooltipComponent"
+      }],
+    },
+  });
+};
+
+const CommonAnnotationSettings = Object.assign<typeof _componentCommonAnnotationSettings, NestedComponentMeta>(_componentCommonAnnotationSettings, {
+  componentType: "option",
+});
 
 // owners:
 // PolarChart
@@ -661,23 +697,26 @@ type ICommonAxisSettingsProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentCommonAxisSettings = memo(
-  (props: ICommonAxisSettingsProps) => {
-    return React.createElement(NestedOption<ICommonAxisSettingsProps>, { ...props });
-  }
-);
-
-const CommonAxisSettings: typeof _componentCommonAxisSettings & IElementDescriptor = Object.assign(_componentCommonAxisSettings, {
-  OptionName: "commonAxisSettings",
-  ExpectedChildren: {
-    commonAxisSettingsLabel: { optionName: "label", isCollectionItem: false },
-    commonAxisSettingsMinorTick: { optionName: "minorTick", isCollectionItem: false },
-    commonAxisSettingsTick: { optionName: "tick", isCollectionItem: false },
-    label: { optionName: "label", isCollectionItem: false },
-    minorTick: { optionName: "minorTick", isCollectionItem: false },
-    tick: { optionName: "tick", isCollectionItem: false }
-  },
-})
+const _componentCommonAxisSettings = (props: ICommonAxisSettingsProps) => {
+  return React.createElement(NestedOption<ICommonAxisSettingsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "commonAxisSettings",
+      ExpectedChildren: {
+        commonAxisSettingsLabel: { optionName: "label", isCollectionItem: false },
+        commonAxisSettingsMinorTick: { optionName: "minorTick", isCollectionItem: false },
+        commonAxisSettingsTick: { optionName: "tick", isCollectionItem: false },
+        label: { optionName: "label", isCollectionItem: false },
+        minorTick: { optionName: "minorTick", isCollectionItem: false },
+        tick: { optionName: "tick", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const CommonAxisSettings = Object.assign<typeof _componentCommonAxisSettings, NestedComponentMeta>(_componentCommonAxisSettings, {
+  componentType: "option",
+});
 
 // owners:
 // CommonAxisSettings
@@ -687,15 +726,18 @@ type ICommonAxisSettingsLabelProps = React.PropsWithChildren<{
   overlappingBehavior?: "hide" | "none";
   visible?: boolean;
 }>
-const _componentCommonAxisSettingsLabel = memo(
-  (props: ICommonAxisSettingsLabelProps) => {
-    return React.createElement(NestedOption<ICommonAxisSettingsLabelProps>, { ...props });
-  }
-);
+const _componentCommonAxisSettingsLabel = (props: ICommonAxisSettingsLabelProps) => {
+  return React.createElement(NestedOption<ICommonAxisSettingsLabelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "label",
+    },
+  });
+};
 
-const CommonAxisSettingsLabel: typeof _componentCommonAxisSettingsLabel & IElementDescriptor = Object.assign(_componentCommonAxisSettingsLabel, {
-  OptionName: "label",
-})
+const CommonAxisSettingsLabel = Object.assign<typeof _componentCommonAxisSettingsLabel, NestedComponentMeta>(_componentCommonAxisSettingsLabel, {
+  componentType: "option",
+});
 
 // owners:
 // CommonAxisSettings
@@ -706,15 +748,18 @@ type ICommonAxisSettingsMinorTickProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentCommonAxisSettingsMinorTick = memo(
-  (props: ICommonAxisSettingsMinorTickProps) => {
-    return React.createElement(NestedOption<ICommonAxisSettingsMinorTickProps>, { ...props });
-  }
-);
+const _componentCommonAxisSettingsMinorTick = (props: ICommonAxisSettingsMinorTickProps) => {
+  return React.createElement(NestedOption<ICommonAxisSettingsMinorTickProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "minorTick",
+    },
+  });
+};
 
-const CommonAxisSettingsMinorTick: typeof _componentCommonAxisSettingsMinorTick & IElementDescriptor = Object.assign(_componentCommonAxisSettingsMinorTick, {
-  OptionName: "minorTick",
-})
+const CommonAxisSettingsMinorTick = Object.assign<typeof _componentCommonAxisSettingsMinorTick, NestedComponentMeta>(_componentCommonAxisSettingsMinorTick, {
+  componentType: "option",
+});
 
 // owners:
 // CommonAxisSettings
@@ -726,15 +771,18 @@ type ICommonAxisSettingsTickProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentCommonAxisSettingsTick = memo(
-  (props: ICommonAxisSettingsTickProps) => {
-    return React.createElement(NestedOption<ICommonAxisSettingsTickProps>, { ...props });
-  }
-);
+const _componentCommonAxisSettingsTick = (props: ICommonAxisSettingsTickProps) => {
+  return React.createElement(NestedOption<ICommonAxisSettingsTickProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "tick",
+    },
+  });
+};
 
-const CommonAxisSettingsTick: typeof _componentCommonAxisSettingsTick & IElementDescriptor = Object.assign(_componentCommonAxisSettingsTick, {
-  OptionName: "tick",
-})
+const CommonAxisSettingsTick = Object.assign<typeof _componentCommonAxisSettingsTick, NestedComponentMeta>(_componentCommonAxisSettingsTick, {
+  componentType: "option",
+});
 
 // owners:
 // PolarChart
@@ -876,28 +924,31 @@ type ICommonSeriesSettingsProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentCommonSeriesSettings = memo(
-  (props: ICommonSeriesSettingsProps) => {
-    return React.createElement(NestedOption<ICommonSeriesSettingsProps>, { ...props });
-  }
-);
-
-const CommonSeriesSettings: typeof _componentCommonSeriesSettings & IElementDescriptor = Object.assign(_componentCommonSeriesSettings, {
-  OptionName: "commonSeriesSettings",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    color: { optionName: "color", isCollectionItem: false },
-    commonSeriesSettingsHoverStyle: { optionName: "hoverStyle", isCollectionItem: false },
-    commonSeriesSettingsLabel: { optionName: "label", isCollectionItem: false },
-    commonSeriesSettingsSelectionStyle: { optionName: "selectionStyle", isCollectionItem: false },
-    hoverStyle: { optionName: "hoverStyle", isCollectionItem: false },
-    label: { optionName: "label", isCollectionItem: false },
-    point: { optionName: "point", isCollectionItem: false },
-    selectionStyle: { optionName: "selectionStyle", isCollectionItem: false },
-    seriesBorder: { optionName: "border", isCollectionItem: false },
-    valueErrorBar: { optionName: "valueErrorBar", isCollectionItem: false }
-  },
-})
+const _componentCommonSeriesSettings = (props: ICommonSeriesSettingsProps) => {
+  return React.createElement(NestedOption<ICommonSeriesSettingsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "commonSeriesSettings",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        color: { optionName: "color", isCollectionItem: false },
+        commonSeriesSettingsHoverStyle: { optionName: "hoverStyle", isCollectionItem: false },
+        commonSeriesSettingsLabel: { optionName: "label", isCollectionItem: false },
+        commonSeriesSettingsSelectionStyle: { optionName: "selectionStyle", isCollectionItem: false },
+        hoverStyle: { optionName: "hoverStyle", isCollectionItem: false },
+        label: { optionName: "label", isCollectionItem: false },
+        point: { optionName: "point", isCollectionItem: false },
+        selectionStyle: { optionName: "selectionStyle", isCollectionItem: false },
+        seriesBorder: { optionName: "border", isCollectionItem: false },
+        valueErrorBar: { optionName: "valueErrorBar", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const CommonSeriesSettings = Object.assign<typeof _componentCommonSeriesSettings, NestedComponentMeta>(_componentCommonSeriesSettings, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettings
@@ -919,21 +970,24 @@ type ICommonSeriesSettingsHoverStyleProps = React.PropsWithChildren<{
   highlight?: boolean;
   width?: number;
 }>
-const _componentCommonSeriesSettingsHoverStyle = memo(
-  (props: ICommonSeriesSettingsHoverStyleProps) => {
-    return React.createElement(NestedOption<ICommonSeriesSettingsHoverStyleProps>, { ...props });
-  }
-);
+const _componentCommonSeriesSettingsHoverStyle = (props: ICommonSeriesSettingsHoverStyleProps) => {
+  return React.createElement(NestedOption<ICommonSeriesSettingsHoverStyleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hoverStyle",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        color: { optionName: "color", isCollectionItem: false },
+        hatching: { optionName: "hatching", isCollectionItem: false },
+        seriesBorder: { optionName: "border", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const CommonSeriesSettingsHoverStyle: typeof _componentCommonSeriesSettingsHoverStyle & IElementDescriptor = Object.assign(_componentCommonSeriesSettingsHoverStyle, {
-  OptionName: "hoverStyle",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    color: { optionName: "color", isCollectionItem: false },
-    hatching: { optionName: "hatching", isCollectionItem: false },
-    seriesBorder: { optionName: "border", isCollectionItem: false }
-  },
-})
+const CommonSeriesSettingsHoverStyle = Object.assign<typeof _componentCommonSeriesSettingsHoverStyle, NestedComponentMeta>(_componentCommonSeriesSettingsHoverStyle, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettings
@@ -960,23 +1014,26 @@ type ICommonSeriesSettingsLabelProps = React.PropsWithChildren<{
   showForZeroValues?: boolean;
   visible?: boolean;
 }>
-const _componentCommonSeriesSettingsLabel = memo(
-  (props: ICommonSeriesSettingsLabelProps) => {
-    return React.createElement(NestedOption<ICommonSeriesSettingsLabelProps>, { ...props });
-  }
-);
-
-const CommonSeriesSettingsLabel: typeof _componentCommonSeriesSettingsLabel & IElementDescriptor = Object.assign(_componentCommonSeriesSettingsLabel, {
-  OptionName: "label",
-  ExpectedChildren: {
-    argumentFormat: { optionName: "argumentFormat", isCollectionItem: false },
-    border: { optionName: "border", isCollectionItem: false },
-    connector: { optionName: "connector", isCollectionItem: false },
-    font: { optionName: "font", isCollectionItem: false },
-    format: { optionName: "format", isCollectionItem: false },
-    seriesBorder: { optionName: "border", isCollectionItem: false }
-  },
-})
+const _componentCommonSeriesSettingsLabel = (props: ICommonSeriesSettingsLabelProps) => {
+  return React.createElement(NestedOption<ICommonSeriesSettingsLabelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "label",
+      ExpectedChildren: {
+        argumentFormat: { optionName: "argumentFormat", isCollectionItem: false },
+        border: { optionName: "border", isCollectionItem: false },
+        connector: { optionName: "connector", isCollectionItem: false },
+        font: { optionName: "font", isCollectionItem: false },
+        format: { optionName: "format", isCollectionItem: false },
+        seriesBorder: { optionName: "border", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const CommonSeriesSettingsLabel = Object.assign<typeof _componentCommonSeriesSettingsLabel, NestedComponentMeta>(_componentCommonSeriesSettingsLabel, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettings
@@ -998,21 +1055,24 @@ type ICommonSeriesSettingsSelectionStyleProps = React.PropsWithChildren<{
   highlight?: boolean;
   width?: number;
 }>
-const _componentCommonSeriesSettingsSelectionStyle = memo(
-  (props: ICommonSeriesSettingsSelectionStyleProps) => {
-    return React.createElement(NestedOption<ICommonSeriesSettingsSelectionStyleProps>, { ...props });
-  }
-);
+const _componentCommonSeriesSettingsSelectionStyle = (props: ICommonSeriesSettingsSelectionStyleProps) => {
+  return React.createElement(NestedOption<ICommonSeriesSettingsSelectionStyleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "selectionStyle",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        color: { optionName: "color", isCollectionItem: false },
+        hatching: { optionName: "hatching", isCollectionItem: false },
+        seriesBorder: { optionName: "border", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const CommonSeriesSettingsSelectionStyle: typeof _componentCommonSeriesSettingsSelectionStyle & IElementDescriptor = Object.assign(_componentCommonSeriesSettingsSelectionStyle, {
-  OptionName: "selectionStyle",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    color: { optionName: "color", isCollectionItem: false },
-    hatching: { optionName: "hatching", isCollectionItem: false },
-    seriesBorder: { optionName: "border", isCollectionItem: false }
-  },
-})
+const CommonSeriesSettingsSelectionStyle = Object.assign<typeof _componentCommonSeriesSettingsSelectionStyle, NestedComponentMeta>(_componentCommonSeriesSettingsSelectionStyle, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettingsLabel
@@ -1021,15 +1081,18 @@ type IConnectorProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentConnector = memo(
-  (props: IConnectorProps) => {
-    return React.createElement(NestedOption<IConnectorProps>, { ...props });
-  }
-);
+const _componentConnector = (props: IConnectorProps) => {
+  return React.createElement(NestedOption<IConnectorProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "connector",
+    },
+  });
+};
 
-const Connector: typeof _componentConnector & IElementDescriptor = Object.assign(_componentConnector, {
-  OptionName: "connector",
-})
+const Connector = Object.assign<typeof _componentConnector, NestedComponentMeta>(_componentConnector, {
+  componentType: "option",
+});
 
 // owners:
 // ArgumentAxis
@@ -1047,16 +1110,19 @@ type IConstantLineProps = React.PropsWithChildren<{
   value?: Date | number | string;
   width?: number;
 }>
-const _componentConstantLine = memo(
-  (props: IConstantLineProps) => {
-    return React.createElement(NestedOption<IConstantLineProps>, { ...props });
-  }
-);
+const _componentConstantLine = (props: IConstantLineProps) => {
+  return React.createElement(NestedOption<IConstantLineProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "constantLines",
+      IsCollectionItem: true,
+    },
+  });
+};
 
-const ConstantLine: typeof _componentConstantLine & IElementDescriptor = Object.assign(_componentConstantLine, {
-  OptionName: "constantLines",
-  IsCollectionItem: true,
-})
+const ConstantLine = Object.assign<typeof _componentConstantLine, NestedComponentMeta>(_componentConstantLine, {
+  componentType: "option",
+});
 
 // owners:
 // ConstantLine
@@ -1066,15 +1132,18 @@ type IConstantLineLabelProps = React.PropsWithChildren<{
   text?: string;
   visible?: boolean;
 }>
-const _componentConstantLineLabel = memo(
-  (props: IConstantLineLabelProps) => {
-    return React.createElement(NestedOption<IConstantLineLabelProps>, { ...props });
-  }
-);
+const _componentConstantLineLabel = (props: IConstantLineLabelProps) => {
+  return React.createElement(NestedOption<IConstantLineLabelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "label",
+    },
+  });
+};
 
-const ConstantLineLabel: typeof _componentConstantLineLabel & IElementDescriptor = Object.assign(_componentConstantLineLabel, {
-  OptionName: "label",
-})
+const ConstantLineLabel = Object.assign<typeof _componentConstantLineLabel, NestedComponentMeta>(_componentConstantLineLabel, {
+  componentType: "option",
+});
 
 // owners:
 // ArgumentAxis
@@ -1087,19 +1156,22 @@ type IConstantLineStyleProps = React.PropsWithChildren<{
   };
   width?: number;
 }>
-const _componentConstantLineStyle = memo(
-  (props: IConstantLineStyleProps) => {
-    return React.createElement(NestedOption<IConstantLineStyleProps>, { ...props });
-  }
-);
+const _componentConstantLineStyle = (props: IConstantLineStyleProps) => {
+  return React.createElement(NestedOption<IConstantLineStyleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "constantLineStyle",
+      ExpectedChildren: {
+        constantLineStyleLabel: { optionName: "label", isCollectionItem: false },
+        label: { optionName: "label", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const ConstantLineStyle: typeof _componentConstantLineStyle & IElementDescriptor = Object.assign(_componentConstantLineStyle, {
-  OptionName: "constantLineStyle",
-  ExpectedChildren: {
-    constantLineStyleLabel: { optionName: "label", isCollectionItem: false },
-    label: { optionName: "label", isCollectionItem: false }
-  },
-})
+const ConstantLineStyle = Object.assign<typeof _componentConstantLineStyle, NestedComponentMeta>(_componentConstantLineStyle, {
+  componentType: "option",
+});
 
 // owners:
 // ConstantLineStyle
@@ -1107,15 +1179,18 @@ type IConstantLineStyleLabelProps = React.PropsWithChildren<{
   font?: ChartsFont;
   visible?: boolean;
 }>
-const _componentConstantLineStyleLabel = memo(
-  (props: IConstantLineStyleLabelProps) => {
-    return React.createElement(NestedOption<IConstantLineStyleLabelProps>, { ...props });
-  }
-);
+const _componentConstantLineStyleLabel = (props: IConstantLineStyleLabelProps) => {
+  return React.createElement(NestedOption<IConstantLineStyleLabelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "label",
+    },
+  });
+};
 
-const ConstantLineStyleLabel: typeof _componentConstantLineStyleLabel & IElementDescriptor = Object.assign(_componentConstantLineStyleLabel, {
-  OptionName: "label",
-})
+const ConstantLineStyleLabel = Object.assign<typeof _componentConstantLineStyleLabel, NestedComponentMeta>(_componentConstantLineStyleLabel, {
+  componentType: "option",
+});
 
 // owners:
 // PolarChart
@@ -1124,15 +1199,18 @@ type IDataPrepareSettingsProps = React.PropsWithChildren<{
   convertToAxisDataType?: boolean;
   sortingMethod?: boolean | ((a: { arg: Date | number | string, val: Date | number | string }, b: { arg: Date | number | string, val: Date | number | string }) => number);
 }>
-const _componentDataPrepareSettings = memo(
-  (props: IDataPrepareSettingsProps) => {
-    return React.createElement(NestedOption<IDataPrepareSettingsProps>, { ...props });
-  }
-);
+const _componentDataPrepareSettings = (props: IDataPrepareSettingsProps) => {
+  return React.createElement(NestedOption<IDataPrepareSettingsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "dataPrepareSettings",
+    },
+  });
+};
 
-const DataPrepareSettings: typeof _componentDataPrepareSettings & IElementDescriptor = Object.assign(_componentDataPrepareSettings, {
-  OptionName: "dataPrepareSettings",
-})
+const DataPrepareSettings = Object.assign<typeof _componentDataPrepareSettings, NestedComponentMeta>(_componentDataPrepareSettings, {
+  componentType: "option",
+});
 
 // owners:
 // PolarChart
@@ -1145,15 +1223,18 @@ type IExportProps = React.PropsWithChildren<{
   printingEnabled?: boolean;
   svgToCanvas?: ((svg: any, canvas: any) => any);
 }>
-const _componentExport = memo(
-  (props: IExportProps) => {
-    return React.createElement(NestedOption<IExportProps>, { ...props });
-  }
-);
+const _componentExport = (props: IExportProps) => {
+  return React.createElement(NestedOption<IExportProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "export",
+    },
+  });
+};
 
-const Export: typeof _componentExport & IElementDescriptor = Object.assign(_componentExport, {
-  OptionName: "export",
-})
+const Export = Object.assign<typeof _componentExport, NestedComponentMeta>(_componentExport, {
+  componentType: "option",
+});
 
 // owners:
 // Annotation
@@ -1175,15 +1256,18 @@ type IFontProps = React.PropsWithChildren<{
   size?: number | string;
   weight?: number;
 }>
-const _componentFont = memo(
-  (props: IFontProps) => {
-    return React.createElement(NestedOption<IFontProps>, { ...props });
-  }
-);
+const _componentFont = (props: IFontProps) => {
+  return React.createElement(NestedOption<IFontProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "font",
+    },
+  });
+};
 
-const Font: typeof _componentFont & IElementDescriptor = Object.assign(_componentFont, {
-  OptionName: "font",
-})
+const Font = Object.assign<typeof _componentFont, NestedComponentMeta>(_componentFont, {
+  componentType: "option",
+});
 
 // owners:
 // AxisLabel
@@ -1198,15 +1282,18 @@ type IFormatProps = React.PropsWithChildren<{
   type?: "billions" | "currency" | "day" | "decimal" | "exponential" | "fixedPoint" | "largeNumber" | "longDate" | "longTime" | "millions" | "millisecond" | "month" | "monthAndDay" | "monthAndYear" | "percent" | "quarter" | "quarterAndYear" | "shortDate" | "shortTime" | "thousands" | "trillions" | "year" | "dayOfWeek" | "hour" | "longDateLongTime" | "minute" | "second" | "shortDateShortTime";
   useCurrencyAccountingStyle?: boolean;
 }>
-const _componentFormat = memo(
-  (props: IFormatProps) => {
-    return React.createElement(NestedOption<IFormatProps>, { ...props });
-  }
-);
+const _componentFormat = (props: IFormatProps) => {
+  return React.createElement(NestedOption<IFormatProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "format",
+    },
+  });
+};
 
-const Format: typeof _componentFormat & IElementDescriptor = Object.assign(_componentFormat, {
-  OptionName: "format",
-})
+const Format = Object.assign<typeof _componentFormat, NestedComponentMeta>(_componentFormat, {
+  componentType: "option",
+});
 
 // owners:
 // ArgumentAxis
@@ -1216,15 +1303,18 @@ type IGridProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentGrid = memo(
-  (props: IGridProps) => {
-    return React.createElement(NestedOption<IGridProps>, { ...props });
-  }
-);
+const _componentGrid = (props: IGridProps) => {
+  return React.createElement(NestedOption<IGridProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "grid",
+    },
+  });
+};
 
-const Grid: typeof _componentGrid & IElementDescriptor = Object.assign(_componentGrid, {
-  OptionName: "grid",
-})
+const Grid = Object.assign<typeof _componentGrid, NestedComponentMeta>(_componentGrid, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettingsHoverStyle
@@ -1235,15 +1325,18 @@ type IHatchingProps = React.PropsWithChildren<{
   step?: number;
   width?: number;
 }>
-const _componentHatching = memo(
-  (props: IHatchingProps) => {
-    return React.createElement(NestedOption<IHatchingProps>, { ...props });
-  }
-);
+const _componentHatching = (props: IHatchingProps) => {
+  return React.createElement(NestedOption<IHatchingProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hatching",
+    },
+  });
+};
 
-const Hatching: typeof _componentHatching & IElementDescriptor = Object.assign(_componentHatching, {
-  OptionName: "hatching",
-})
+const Hatching = Object.assign<typeof _componentHatching, NestedComponentMeta>(_componentHatching, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettings
@@ -1267,15 +1360,18 @@ type IHoverStyleProps = React.PropsWithChildren<{
   width?: number;
   size?: number;
 }>
-const _componentHoverStyle = memo(
-  (props: IHoverStyleProps) => {
-    return React.createElement(NestedOption<IHoverStyleProps>, { ...props });
-  }
-);
+const _componentHoverStyle = (props: IHoverStyleProps) => {
+  return React.createElement(NestedOption<IHoverStyleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hoverStyle",
+    },
+  });
+};
 
-const HoverStyle: typeof _componentHoverStyle & IElementDescriptor = Object.assign(_componentHoverStyle, {
-  OptionName: "hoverStyle",
-})
+const HoverStyle = Object.assign<typeof _componentHoverStyle, NestedComponentMeta>(_componentHoverStyle, {
+  componentType: "option",
+});
 
 // owners:
 // Annotation
@@ -1285,15 +1381,18 @@ type IImageProps = React.PropsWithChildren<{
   url?: string;
   width?: number;
 }>
-const _componentImage = memo(
-  (props: IImageProps) => {
-    return React.createElement(NestedOption<IImageProps>, { ...props });
-  }
-);
+const _componentImage = (props: IImageProps) => {
+  return React.createElement(NestedOption<IImageProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "image",
+    },
+  });
+};
 
-const Image: typeof _componentImage & IElementDescriptor = Object.assign(_componentImage, {
-  OptionName: "image",
-})
+const Image = Object.assign<typeof _componentImage, NestedComponentMeta>(_componentImage, {
+  componentType: "option",
+});
 
 // owners:
 // ConstantLine
@@ -1333,15 +1432,18 @@ type ILabelProps = React.PropsWithChildren<{
   rotationAngle?: number;
   showForZeroValues?: boolean;
 }>
-const _componentLabel = memo(
-  (props: ILabelProps) => {
-    return React.createElement(NestedOption<ILabelProps>, { ...props });
-  }
-);
+const _componentLabel = (props: ILabelProps) => {
+  return React.createElement(NestedOption<ILabelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "label",
+    },
+  });
+};
 
-const Label: typeof _componentLabel & IElementDescriptor = Object.assign(_componentLabel, {
-  OptionName: "label",
-})
+const Label = Object.assign<typeof _componentLabel, NestedComponentMeta>(_componentLabel, {
+  componentType: "option",
+});
 
 // owners:
 // PolarChart
@@ -1401,28 +1503,31 @@ type ILegendProps = React.PropsWithChildren<{
   markerRender?: (...params: any) => React.ReactNode;
   markerComponent?: React.ComponentType<any>;
 }>
-const _componentLegend = memo(
-  (props: ILegendProps) => {
-    return React.createElement(NestedOption<ILegendProps>, { ...props });
-  }
-);
-
-const Legend: typeof _componentLegend & IElementDescriptor = Object.assign(_componentLegend, {
-  OptionName: "legend",
-  ExpectedChildren: {
-    annotationBorder: { optionName: "border", isCollectionItem: false },
-    border: { optionName: "border", isCollectionItem: false },
-    font: { optionName: "font", isCollectionItem: false },
-    legendTitle: { optionName: "title", isCollectionItem: false },
-    margin: { optionName: "margin", isCollectionItem: false },
-    title: { optionName: "title", isCollectionItem: false }
-  },
-  TemplateProps: [{
-    tmplOption: "markerTemplate",
-    render: "markerRender",
-    component: "markerComponent"
-  }],
-})
+const _componentLegend = (props: ILegendProps) => {
+  return React.createElement(NestedOption<ILegendProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "legend",
+      ExpectedChildren: {
+        annotationBorder: { optionName: "border", isCollectionItem: false },
+        border: { optionName: "border", isCollectionItem: false },
+        font: { optionName: "font", isCollectionItem: false },
+        legendTitle: { optionName: "title", isCollectionItem: false },
+        margin: { optionName: "margin", isCollectionItem: false },
+        title: { optionName: "title", isCollectionItem: false }
+      },
+      TemplateProps: [{
+        tmplOption: "markerTemplate",
+        render: "markerRender",
+        component: "markerComponent"
+      }],
+    },
+  });
+};
+
+const Legend = Object.assign<typeof _componentLegend, NestedComponentMeta>(_componentLegend, {
+  componentType: "option",
+});
 
 // owners:
 // Legend
@@ -1444,21 +1549,24 @@ type ILegendTitleProps = React.PropsWithChildren<{
   text?: string;
   verticalAlignment?: "bottom" | "top";
 }>
-const _componentLegendTitle = memo(
-  (props: ILegendTitleProps) => {
-    return React.createElement(NestedOption<ILegendTitleProps>, { ...props });
-  }
-);
+const _componentLegendTitle = (props: ILegendTitleProps) => {
+  return React.createElement(NestedOption<ILegendTitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "title",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false },
+        legendTitleSubtitle: { optionName: "subtitle", isCollectionItem: false },
+        margin: { optionName: "margin", isCollectionItem: false },
+        subtitle: { optionName: "subtitle", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const LegendTitle: typeof _componentLegendTitle & IElementDescriptor = Object.assign(_componentLegendTitle, {
-  OptionName: "title",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false },
-    legendTitleSubtitle: { optionName: "subtitle", isCollectionItem: false },
-    margin: { optionName: "margin", isCollectionItem: false },
-    subtitle: { optionName: "subtitle", isCollectionItem: false }
-  },
-})
+const LegendTitle = Object.assign<typeof _componentLegendTitle, NestedComponentMeta>(_componentLegendTitle, {
+  componentType: "option",
+});
 
 // owners:
 // LegendTitle
@@ -1467,18 +1575,21 @@ type ILegendTitleSubtitleProps = React.PropsWithChildren<{
   offset?: number;
   text?: string;
 }>
-const _componentLegendTitleSubtitle = memo(
-  (props: ILegendTitleSubtitleProps) => {
-    return React.createElement(NestedOption<ILegendTitleSubtitleProps>, { ...props });
-  }
-);
+const _componentLegendTitleSubtitle = (props: ILegendTitleSubtitleProps) => {
+  return React.createElement(NestedOption<ILegendTitleSubtitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "subtitle",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const LegendTitleSubtitle: typeof _componentLegendTitleSubtitle & IElementDescriptor = Object.assign(_componentLegendTitleSubtitle, {
-  OptionName: "subtitle",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false }
-  },
-})
+const LegendTitleSubtitle = Object.assign<typeof _componentLegendTitleSubtitle, NestedComponentMeta>(_componentLegendTitleSubtitle, {
+  componentType: "option",
+});
 
 // owners:
 // VisualRange
@@ -1493,15 +1604,18 @@ type ILengthProps = React.PropsWithChildren<{
   weeks?: number;
   years?: number;
 }>
-const _componentLength = memo(
-  (props: ILengthProps) => {
-    return React.createElement(NestedOption<ILengthProps>, { ...props });
-  }
-);
+const _componentLength = (props: ILengthProps) => {
+  return React.createElement(NestedOption<ILengthProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "length",
+    },
+  });
+};
 
-const Length: typeof _componentLength & IElementDescriptor = Object.assign(_componentLength, {
-  OptionName: "length",
-})
+const Length = Object.assign<typeof _componentLength, NestedComponentMeta>(_componentLength, {
+  componentType: "option",
+});
 
 // owners:
 // PolarChart
@@ -1514,21 +1628,24 @@ type ILoadingIndicatorProps = React.PropsWithChildren<{
   defaultShow?: boolean;
   onShowChange?: (value: boolean) => void;
 }>
-const _componentLoadingIndicator = memo(
-  (props: ILoadingIndicatorProps) => {
-    return React.createElement(NestedOption<ILoadingIndicatorProps>, { ...props });
-  }
-);
+const _componentLoadingIndicator = (props: ILoadingIndicatorProps) => {
+  return React.createElement(NestedOption<ILoadingIndicatorProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "loadingIndicator",
+      DefaultsProps: {
+        defaultShow: "show"
+      },
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const LoadingIndicator: typeof _componentLoadingIndicator & IElementDescriptor = Object.assign(_componentLoadingIndicator, {
-  OptionName: "loadingIndicator",
-  DefaultsProps: {
-    defaultShow: "show"
-  },
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false }
-  },
-})
+const LoadingIndicator = Object.assign<typeof _componentLoadingIndicator, NestedComponentMeta>(_componentLoadingIndicator, {
+  componentType: "option",
+});
 
 // owners:
 // Legend
@@ -1541,15 +1658,18 @@ type IMarginProps = React.PropsWithChildren<{
   right?: number;
   top?: number;
 }>
-const _componentMargin = memo(
-  (props: IMarginProps) => {
-    return React.createElement(NestedOption<IMarginProps>, { ...props });
-  }
-);
+const _componentMargin = (props: IMarginProps) => {
+  return React.createElement(NestedOption<IMarginProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "margin",
+    },
+  });
+};
 
-const Margin: typeof _componentMargin & IElementDescriptor = Object.assign(_componentMargin, {
-  OptionName: "margin",
-})
+const Margin = Object.assign<typeof _componentMargin, NestedComponentMeta>(_componentMargin, {
+  componentType: "option",
+});
 
 // owners:
 // ArgumentAxis
@@ -1559,15 +1679,18 @@ type IMinorGridProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentMinorGrid = memo(
-  (props: IMinorGridProps) => {
-    return React.createElement(NestedOption<IMinorGridProps>, { ...props });
-  }
-);
+const _componentMinorGrid = (props: IMinorGridProps) => {
+  return React.createElement(NestedOption<IMinorGridProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "minorGrid",
+    },
+  });
+};
 
-const MinorGrid: typeof _componentMinorGrid & IElementDescriptor = Object.assign(_componentMinorGrid, {
-  OptionName: "minorGrid",
-})
+const MinorGrid = Object.assign<typeof _componentMinorGrid, NestedComponentMeta>(_componentMinorGrid, {
+  componentType: "option",
+});
 
 // owners:
 // ArgumentAxis
@@ -1580,15 +1703,18 @@ type IMinorTickProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentMinorTick = memo(
-  (props: IMinorTickProps) => {
-    return React.createElement(NestedOption<IMinorTickProps>, { ...props });
-  }
-);
+const _componentMinorTick = (props: IMinorTickProps) => {
+  return React.createElement(NestedOption<IMinorTickProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "minorTick",
+    },
+  });
+};
 
-const MinorTick: typeof _componentMinorTick & IElementDescriptor = Object.assign(_componentMinorTick, {
-  OptionName: "minorTick",
-})
+const MinorTick = Object.assign<typeof _componentMinorTick, NestedComponentMeta>(_componentMinorTick, {
+  componentType: "option",
+});
 
 // owners:
 // ArgumentAxis
@@ -1604,15 +1730,18 @@ type IMinorTickIntervalProps = React.PropsWithChildren<{
   weeks?: number;
   years?: number;
 }>
-const _componentMinorTickInterval = memo(
-  (props: IMinorTickIntervalProps) => {
-    return React.createElement(NestedOption<IMinorTickIntervalProps>, { ...props });
-  }
-);
+const _componentMinorTickInterval = (props: IMinorTickIntervalProps) => {
+  return React.createElement(NestedOption<IMinorTickIntervalProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "minorTickInterval",
+    },
+  });
+};
 
-const MinorTickInterval: typeof _componentMinorTickInterval & IElementDescriptor = Object.assign(_componentMinorTickInterval, {
-  OptionName: "minorTickInterval",
-})
+const MinorTickInterval = Object.assign<typeof _componentMinorTickInterval, NestedComponentMeta>(_componentMinorTickInterval, {
+  componentType: "option",
+});
 
 // owners:
 // ValueAxis
@@ -1627,15 +1756,18 @@ type IMinVisualRangeLengthProps = React.PropsWithChildren<{
   weeks?: number;
   years?: number;
 }>
-const _componentMinVisualRangeLength = memo(
-  (props: IMinVisualRangeLengthProps) => {
-    return React.createElement(NestedOption<IMinVisualRangeLengthProps>, { ...props });
-  }
-);
+const _componentMinVisualRangeLength = (props: IMinVisualRangeLengthProps) => {
+  return React.createElement(NestedOption<IMinVisualRangeLengthProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "minVisualRangeLength",
+    },
+  });
+};
 
-const MinVisualRangeLength: typeof _componentMinVisualRangeLength & IElementDescriptor = Object.assign(_componentMinVisualRangeLength, {
-  OptionName: "minVisualRangeLength",
-})
+const MinVisualRangeLength = Object.assign<typeof _componentMinVisualRangeLength, NestedComponentMeta>(_componentMinVisualRangeLength, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettings
@@ -1675,25 +1807,28 @@ type IPointProps = React.PropsWithChildren<{
   symbol?: "circle" | "cross" | "polygon" | "square" | "triangle" | "triangleDown" | "triangleUp";
   visible?: boolean;
 }>
-const _componentPoint = memo(
-  (props: IPointProps) => {
-    return React.createElement(NestedOption<IPointProps>, { ...props });
-  }
-);
-
-const Point: typeof _componentPoint & IElementDescriptor = Object.assign(_componentPoint, {
-  OptionName: "point",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    color: { optionName: "color", isCollectionItem: false },
-    hoverStyle: { optionName: "hoverStyle", isCollectionItem: false },
-    image: { optionName: "image", isCollectionItem: false },
-    pointBorder: { optionName: "border", isCollectionItem: false },
-    pointHoverStyle: { optionName: "hoverStyle", isCollectionItem: false },
-    pointSelectionStyle: { optionName: "selectionStyle", isCollectionItem: false },
-    selectionStyle: { optionName: "selectionStyle", isCollectionItem: false }
-  },
-})
+const _componentPoint = (props: IPointProps) => {
+  return React.createElement(NestedOption<IPointProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "point",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        color: { optionName: "color", isCollectionItem: false },
+        hoverStyle: { optionName: "hoverStyle", isCollectionItem: false },
+        image: { optionName: "image", isCollectionItem: false },
+        pointBorder: { optionName: "border", isCollectionItem: false },
+        pointHoverStyle: { optionName: "hoverStyle", isCollectionItem: false },
+        pointSelectionStyle: { optionName: "selectionStyle", isCollectionItem: false },
+        selectionStyle: { optionName: "selectionStyle", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Point = Object.assign<typeof _componentPoint, NestedComponentMeta>(_componentPoint, {
+  componentType: "option",
+});
 
 // owners:
 // Point
@@ -1704,15 +1839,18 @@ type IPointBorderProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentPointBorder = memo(
-  (props: IPointBorderProps) => {
-    return React.createElement(NestedOption<IPointBorderProps>, { ...props });
-  }
-);
+const _componentPointBorder = (props: IPointBorderProps) => {
+  return React.createElement(NestedOption<IPointBorderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
 
-const PointBorder: typeof _componentPointBorder & IElementDescriptor = Object.assign(_componentPointBorder, {
-  OptionName: "border",
-})
+const PointBorder = Object.assign<typeof _componentPointBorder, NestedComponentMeta>(_componentPointBorder, {
+  componentType: "option",
+});
 
 // owners:
 // Point
@@ -1725,20 +1863,23 @@ type IPointHoverStyleProps = React.PropsWithChildren<{
   color?: ChartsColor | string;
   size?: number;
 }>
-const _componentPointHoverStyle = memo(
-  (props: IPointHoverStyleProps) => {
-    return React.createElement(NestedOption<IPointHoverStyleProps>, { ...props });
-  }
-);
+const _componentPointHoverStyle = (props: IPointHoverStyleProps) => {
+  return React.createElement(NestedOption<IPointHoverStyleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hoverStyle",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        color: { optionName: "color", isCollectionItem: false },
+        pointBorder: { optionName: "border", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const PointHoverStyle: typeof _componentPointHoverStyle & IElementDescriptor = Object.assign(_componentPointHoverStyle, {
-  OptionName: "hoverStyle",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    color: { optionName: "color", isCollectionItem: false },
-    pointBorder: { optionName: "border", isCollectionItem: false }
-  },
-})
+const PointHoverStyle = Object.assign<typeof _componentPointHoverStyle, NestedComponentMeta>(_componentPointHoverStyle, {
+  componentType: "option",
+});
 
 // owners:
 // Point
@@ -1751,20 +1892,23 @@ type IPointSelectionStyleProps = React.PropsWithChildren<{
   color?: ChartsColor | string;
   size?: number;
 }>
-const _componentPointSelectionStyle = memo(
-  (props: IPointSelectionStyleProps) => {
-    return React.createElement(NestedOption<IPointSelectionStyleProps>, { ...props });
-  }
-);
+const _componentPointSelectionStyle = (props: IPointSelectionStyleProps) => {
+  return React.createElement(NestedOption<IPointSelectionStyleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "selectionStyle",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        color: { optionName: "color", isCollectionItem: false },
+        pointBorder: { optionName: "border", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const PointSelectionStyle: typeof _componentPointSelectionStyle & IElementDescriptor = Object.assign(_componentPointSelectionStyle, {
-  OptionName: "selectionStyle",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    color: { optionName: "color", isCollectionItem: false },
-    pointBorder: { optionName: "border", isCollectionItem: false }
-  },
-})
+const PointSelectionStyle = Object.assign<typeof _componentPointSelectionStyle, NestedComponentMeta>(_componentPointSelectionStyle, {
+  componentType: "option",
+});
 
 // owners:
 // PolarChart
@@ -1790,21 +1934,24 @@ type IPolarChartTitleProps = React.PropsWithChildren<{
   verticalAlignment?: "bottom" | "top";
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentPolarChartTitle = memo(
-  (props: IPolarChartTitleProps) => {
-    return React.createElement(NestedOption<IPolarChartTitleProps>, { ...props });
-  }
-);
+const _componentPolarChartTitle = (props: IPolarChartTitleProps) => {
+  return React.createElement(NestedOption<IPolarChartTitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "title",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false },
+        margin: { optionName: "margin", isCollectionItem: false },
+        polarChartTitleSubtitle: { optionName: "subtitle", isCollectionItem: false },
+        subtitle: { optionName: "subtitle", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const PolarChartTitle: typeof _componentPolarChartTitle & IElementDescriptor = Object.assign(_componentPolarChartTitle, {
-  OptionName: "title",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false },
-    margin: { optionName: "margin", isCollectionItem: false },
-    polarChartTitleSubtitle: { optionName: "subtitle", isCollectionItem: false },
-    subtitle: { optionName: "subtitle", isCollectionItem: false }
-  },
-})
+const PolarChartTitle = Object.assign<typeof _componentPolarChartTitle, NestedComponentMeta>(_componentPolarChartTitle, {
+  componentType: "option",
+});
 
 // owners:
 // PolarChartTitle
@@ -1815,18 +1962,21 @@ type IPolarChartTitleSubtitleProps = React.PropsWithChildren<{
   textOverflow?: "ellipsis" | "hide" | "none";
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentPolarChartTitleSubtitle = memo(
-  (props: IPolarChartTitleSubtitleProps) => {
-    return React.createElement(NestedOption<IPolarChartTitleSubtitleProps>, { ...props });
-  }
-);
+const _componentPolarChartTitleSubtitle = (props: IPolarChartTitleSubtitleProps) => {
+  return React.createElement(NestedOption<IPolarChartTitleSubtitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "subtitle",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const PolarChartTitleSubtitle: typeof _componentPolarChartTitleSubtitle & IElementDescriptor = Object.assign(_componentPolarChartTitleSubtitle, {
-  OptionName: "subtitle",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false }
-  },
-})
+const PolarChartTitleSubtitle = Object.assign<typeof _componentPolarChartTitleSubtitle, NestedComponentMeta>(_componentPolarChartTitleSubtitle, {
+  componentType: "option",
+});
 
 // owners:
 // Point
@@ -1850,15 +2000,18 @@ type ISelectionStyleProps = React.PropsWithChildren<{
   highlight?: boolean;
   width?: number;
 }>
-const _componentSelectionStyle = memo(
-  (props: ISelectionStyleProps) => {
-    return React.createElement(NestedOption<ISelectionStyleProps>, { ...props });
-  }
-);
+const _componentSelectionStyle = (props: ISelectionStyleProps) => {
+  return React.createElement(NestedOption<ISelectionStyleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "selectionStyle",
+    },
+  });
+};
 
-const SelectionStyle: typeof _componentSelectionStyle & IElementDescriptor = Object.assign(_componentSelectionStyle, {
-  OptionName: "selectionStyle",
-})
+const SelectionStyle = Object.assign<typeof _componentSelectionStyle, NestedComponentMeta>(_componentSelectionStyle, {
+  componentType: "option",
+});
 
 // owners:
 // PolarChart
@@ -1997,16 +2150,19 @@ type ISeriesProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentSeries = memo(
-  (props: ISeriesProps) => {
-    return React.createElement(NestedOption<ISeriesProps>, { ...props });
-  }
-);
+const _componentSeries = (props: ISeriesProps) => {
+  return React.createElement(NestedOption<ISeriesProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "series",
+      IsCollectionItem: true,
+    },
+  });
+};
 
-const Series: typeof _componentSeries & IElementDescriptor = Object.assign(_componentSeries, {
-  OptionName: "series",
-  IsCollectionItem: true,
-})
+const Series = Object.assign<typeof _componentSeries, NestedComponentMeta>(_componentSeries, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettings
@@ -2019,15 +2175,18 @@ type ISeriesBorderProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentSeriesBorder = memo(
-  (props: ISeriesBorderProps) => {
-    return React.createElement(NestedOption<ISeriesBorderProps>, { ...props });
-  }
-);
+const _componentSeriesBorder = (props: ISeriesBorderProps) => {
+  return React.createElement(NestedOption<ISeriesBorderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
 
-const SeriesBorder: typeof _componentSeriesBorder & IElementDescriptor = Object.assign(_componentSeriesBorder, {
-  OptionName: "border",
-})
+const SeriesBorder = Object.assign<typeof _componentSeriesBorder, NestedComponentMeta>(_componentSeriesBorder, {
+  componentType: "option",
+});
 
 // owners:
 // PolarChart
@@ -2035,15 +2194,18 @@ type ISeriesTemplateProps = React.PropsWithChildren<{
   customizeSeries?: ((seriesName: any) => PolarChartSeries);
   nameField?: string;
 }>
-const _componentSeriesTemplate = memo(
-  (props: ISeriesTemplateProps) => {
-    return React.createElement(NestedOption<ISeriesTemplateProps>, { ...props });
-  }
-);
+const _componentSeriesTemplate = (props: ISeriesTemplateProps) => {
+  return React.createElement(NestedOption<ISeriesTemplateProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "seriesTemplate",
+    },
+  });
+};
 
-const SeriesTemplate: typeof _componentSeriesTemplate & IElementDescriptor = Object.assign(_componentSeriesTemplate, {
-  OptionName: "seriesTemplate",
-})
+const SeriesTemplate = Object.assign<typeof _componentSeriesTemplate, NestedComponentMeta>(_componentSeriesTemplate, {
+  componentType: "option",
+});
 
 // owners:
 // Annotation
@@ -2055,15 +2217,18 @@ type IShadowProps = React.PropsWithChildren<{
   offsetY?: number;
   opacity?: number;
 }>
-const _componentShadow = memo(
-  (props: IShadowProps) => {
-    return React.createElement(NestedOption<IShadowProps>, { ...props });
-  }
-);
+const _componentShadow = (props: IShadowProps) => {
+  return React.createElement(NestedOption<IShadowProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "shadow",
+    },
+  });
+};
 
-const Shadow: typeof _componentShadow & IElementDescriptor = Object.assign(_componentShadow, {
-  OptionName: "shadow",
-})
+const Shadow = Object.assign<typeof _componentShadow, NestedComponentMeta>(_componentShadow, {
+  componentType: "option",
+});
 
 // owners:
 // PolarChart
@@ -2071,15 +2236,18 @@ type ISizeProps = React.PropsWithChildren<{
   height?: number;
   width?: number;
 }>
-const _componentSize = memo(
-  (props: ISizeProps) => {
-    return React.createElement(NestedOption<ISizeProps>, { ...props });
-  }
-);
+const _componentSize = (props: ISizeProps) => {
+  return React.createElement(NestedOption<ISizeProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "size",
+    },
+  });
+};
 
-const Size: typeof _componentSize & IElementDescriptor = Object.assign(_componentSize, {
-  OptionName: "size",
-})
+const Size = Object.assign<typeof _componentSize, NestedComponentMeta>(_componentSize, {
+  componentType: "option",
+});
 
 // owners:
 // ArgumentAxis
@@ -2093,16 +2261,19 @@ type IStripProps = React.PropsWithChildren<{
   };
   startValue?: Date | number | string;
 }>
-const _componentStrip = memo(
-  (props: IStripProps) => {
-    return React.createElement(NestedOption<IStripProps>, { ...props });
-  }
-);
+const _componentStrip = (props: IStripProps) => {
+  return React.createElement(NestedOption<IStripProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "strips",
+      IsCollectionItem: true,
+    },
+  });
+};
 
-const Strip: typeof _componentStrip & IElementDescriptor = Object.assign(_componentStrip, {
-  OptionName: "strips",
-  IsCollectionItem: true,
-})
+const Strip = Object.assign<typeof _componentStrip, NestedComponentMeta>(_componentStrip, {
+  componentType: "option",
+});
 
 // owners:
 // Strip
@@ -2111,15 +2282,18 @@ type IStripLabelProps = React.PropsWithChildren<{
   font?: ChartsFont;
   text?: string;
 }>
-const _componentStripLabel = memo(
-  (props: IStripLabelProps) => {
-    return React.createElement(NestedOption<IStripLabelProps>, { ...props });
-  }
-);
+const _componentStripLabel = (props: IStripLabelProps) => {
+  return React.createElement(NestedOption<IStripLabelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "label",
+    },
+  });
+};
 
-const StripLabel: typeof _componentStripLabel & IElementDescriptor = Object.assign(_componentStripLabel, {
-  OptionName: "label",
-})
+const StripLabel = Object.assign<typeof _componentStripLabel, NestedComponentMeta>(_componentStripLabel, {
+  componentType: "option",
+});
 
 // owners:
 // ArgumentAxis
@@ -2128,34 +2302,40 @@ type IStripStyleProps = React.PropsWithChildren<{
     font?: ChartsFont;
   };
 }>
-const _componentStripStyle = memo(
-  (props: IStripStyleProps) => {
-    return React.createElement(NestedOption<IStripStyleProps>, { ...props });
-  }
-);
+const _componentStripStyle = (props: IStripStyleProps) => {
+  return React.createElement(NestedOption<IStripStyleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "stripStyle",
+      ExpectedChildren: {
+        label: { optionName: "label", isCollectionItem: false },
+        stripStyleLabel: { optionName: "label", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const StripStyle: typeof _componentStripStyle & IElementDescriptor = Object.assign(_componentStripStyle, {
-  OptionName: "stripStyle",
-  ExpectedChildren: {
-    label: { optionName: "label", isCollectionItem: false },
-    stripStyleLabel: { optionName: "label", isCollectionItem: false }
-  },
-})
+const StripStyle = Object.assign<typeof _componentStripStyle, NestedComponentMeta>(_componentStripStyle, {
+  componentType: "option",
+});
 
 // owners:
 // StripStyle
 type IStripStyleLabelProps = React.PropsWithChildren<{
   font?: ChartsFont;
 }>
-const _componentStripStyleLabel = memo(
-  (props: IStripStyleLabelProps) => {
-    return React.createElement(NestedOption<IStripStyleLabelProps>, { ...props });
-  }
-);
+const _componentStripStyleLabel = (props: IStripStyleLabelProps) => {
+  return React.createElement(NestedOption<IStripStyleLabelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "label",
+    },
+  });
+};
 
-const StripStyleLabel: typeof _componentStripStyleLabel & IElementDescriptor = Object.assign(_componentStripStyleLabel, {
-  OptionName: "label",
-})
+const StripStyleLabel = Object.assign<typeof _componentStripStyleLabel, NestedComponentMeta>(_componentStripStyleLabel, {
+  componentType: "option",
+});
 
 // owners:
 // LegendTitle
@@ -2167,15 +2347,18 @@ type ISubtitleProps = React.PropsWithChildren<{
   textOverflow?: "ellipsis" | "hide" | "none";
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentSubtitle = memo(
-  (props: ISubtitleProps) => {
-    return React.createElement(NestedOption<ISubtitleProps>, { ...props });
-  }
-);
+const _componentSubtitle = (props: ISubtitleProps) => {
+  return React.createElement(NestedOption<ISubtitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "subtitle",
+    },
+  });
+};
 
-const Subtitle: typeof _componentSubtitle & IElementDescriptor = Object.assign(_componentSubtitle, {
-  OptionName: "subtitle",
-})
+const Subtitle = Object.assign<typeof _componentSubtitle, NestedComponentMeta>(_componentSubtitle, {
+  componentType: "option",
+});
 
 // owners:
 // ArgumentAxis
@@ -2189,15 +2372,18 @@ type ITickProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentTick = memo(
-  (props: ITickProps) => {
-    return React.createElement(NestedOption<ITickProps>, { ...props });
-  }
-);
+const _componentTick = (props: ITickProps) => {
+  return React.createElement(NestedOption<ITickProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "tick",
+    },
+  });
+};
 
-const Tick: typeof _componentTick & IElementDescriptor = Object.assign(_componentTick, {
-  OptionName: "tick",
-})
+const Tick = Object.assign<typeof _componentTick, NestedComponentMeta>(_componentTick, {
+  componentType: "option",
+});
 
 // owners:
 // ArgumentAxis
@@ -2213,15 +2399,18 @@ type ITickIntervalProps = React.PropsWithChildren<{
   weeks?: number;
   years?: number;
 }>
-const _componentTickInterval = memo(
-  (props: ITickIntervalProps) => {
-    return React.createElement(NestedOption<ITickIntervalProps>, { ...props });
-  }
-);
+const _componentTickInterval = (props: ITickIntervalProps) => {
+  return React.createElement(NestedOption<ITickIntervalProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "tickInterval",
+    },
+  });
+};
 
-const TickInterval: typeof _componentTickInterval & IElementDescriptor = Object.assign(_componentTickInterval, {
-  OptionName: "tickInterval",
-})
+const TickInterval = Object.assign<typeof _componentTickInterval, NestedComponentMeta>(_componentTickInterval, {
+  componentType: "option",
+});
 
 // owners:
 // Legend
@@ -2248,15 +2437,18 @@ type ITitleProps = React.PropsWithChildren<{
   textOverflow?: "ellipsis" | "hide" | "none";
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentTitle = memo(
-  (props: ITitleProps) => {
-    return React.createElement(NestedOption<ITitleProps>, { ...props });
-  }
-);
+const _componentTitle = (props: ITitleProps) => {
+  return React.createElement(NestedOption<ITitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "title",
+    },
+  });
+};
 
-const Title: typeof _componentTitle & IElementDescriptor = Object.assign(_componentTitle, {
-  OptionName: "title",
-})
+const Title = Object.assign<typeof _componentTitle, NestedComponentMeta>(_componentTitle, {
+  componentType: "option",
+});
 
 // owners:
 // PolarChart
@@ -2294,28 +2486,31 @@ type ITooltipProps = React.PropsWithChildren<{
   contentRender?: (...params: any) => React.ReactNode;
   contentComponent?: React.ComponentType<any>;
 }>
-const _componentTooltip = memo(
-  (props: ITooltipProps) => {
-    return React.createElement(NestedOption<ITooltipProps>, { ...props });
-  }
-);
-
-const Tooltip: typeof _componentTooltip & IElementDescriptor = Object.assign(_componentTooltip, {
-  OptionName: "tooltip",
-  ExpectedChildren: {
-    argumentFormat: { optionName: "argumentFormat", isCollectionItem: false },
-    border: { optionName: "border", isCollectionItem: false },
-    font: { optionName: "font", isCollectionItem: false },
-    format: { optionName: "format", isCollectionItem: false },
-    shadow: { optionName: "shadow", isCollectionItem: false },
-    tooltipBorder: { optionName: "border", isCollectionItem: false }
-  },
-  TemplateProps: [{
-    tmplOption: "contentTemplate",
-    render: "contentRender",
-    component: "contentComponent"
-  }],
-})
+const _componentTooltip = (props: ITooltipProps) => {
+  return React.createElement(NestedOption<ITooltipProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "tooltip",
+      ExpectedChildren: {
+        argumentFormat: { optionName: "argumentFormat", isCollectionItem: false },
+        border: { optionName: "border", isCollectionItem: false },
+        font: { optionName: "font", isCollectionItem: false },
+        format: { optionName: "format", isCollectionItem: false },
+        shadow: { optionName: "shadow", isCollectionItem: false },
+        tooltipBorder: { optionName: "border", isCollectionItem: false }
+      },
+      TemplateProps: [{
+        tmplOption: "contentTemplate",
+        render: "contentRender",
+        component: "contentComponent"
+      }],
+    },
+  });
+};
+
+const Tooltip = Object.assign<typeof _componentTooltip, NestedComponentMeta>(_componentTooltip, {
+  componentType: "option",
+});
 
 // owners:
 // Tooltip
@@ -2326,15 +2521,18 @@ type ITooltipBorderProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentTooltipBorder = memo(
-  (props: ITooltipBorderProps) => {
-    return React.createElement(NestedOption<ITooltipBorderProps>, { ...props });
-  }
-);
+const _componentTooltipBorder = (props: ITooltipBorderProps) => {
+  return React.createElement(NestedOption<ITooltipBorderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
 
-const TooltipBorder: typeof _componentTooltipBorder & IElementDescriptor = Object.assign(_componentTooltipBorder, {
-  OptionName: "border",
-})
+const TooltipBorder = Object.assign<typeof _componentTooltipBorder, NestedComponentMeta>(_componentTooltipBorder, {
+  componentType: "option",
+});
 
 // owners:
 // PolarChart
@@ -2468,31 +2666,34 @@ type IValueAxisProps = React.PropsWithChildren<{
   defaultVisualRange?: Array<Date | number | string> | CommonChartTypes.VisualRange;
   onVisualRangeChange?: (value: Array<Date | number | string> | CommonChartTypes.VisualRange) => void;
 }>
-const _componentValueAxis = memo(
-  (props: IValueAxisProps) => {
-    return React.createElement(NestedOption<IValueAxisProps>, { ...props });
-  }
-);
-
-const ValueAxis: typeof _componentValueAxis & IElementDescriptor = Object.assign(_componentValueAxis, {
-  OptionName: "valueAxis",
-  DefaultsProps: {
-    defaultVisualRange: "visualRange"
-  },
-  ExpectedChildren: {
-    axisLabel: { optionName: "label", isCollectionItem: false },
-    commonAxisSettingsTick: { optionName: "tick", isCollectionItem: false },
-    constantLine: { optionName: "constantLines", isCollectionItem: true },
-    label: { optionName: "label", isCollectionItem: false },
-    minorTickInterval: { optionName: "minorTickInterval", isCollectionItem: false },
-    minVisualRangeLength: { optionName: "minVisualRangeLength", isCollectionItem: false },
-    strip: { optionName: "strips", isCollectionItem: true },
-    tick: { optionName: "tick", isCollectionItem: false },
-    tickInterval: { optionName: "tickInterval", isCollectionItem: false },
-    visualRange: { optionName: "visualRange", isCollectionItem: false },
-    wholeRange: { optionName: "wholeRange", isCollectionItem: false }
-  },
-})
+const _componentValueAxis = (props: IValueAxisProps) => {
+  return React.createElement(NestedOption<IValueAxisProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "valueAxis",
+      DefaultsProps: {
+        defaultVisualRange: "visualRange"
+      },
+      ExpectedChildren: {
+        axisLabel: { optionName: "label", isCollectionItem: false },
+        commonAxisSettingsTick: { optionName: "tick", isCollectionItem: false },
+        constantLine: { optionName: "constantLines", isCollectionItem: true },
+        label: { optionName: "label", isCollectionItem: false },
+        minorTickInterval: { optionName: "minorTickInterval", isCollectionItem: false },
+        minVisualRangeLength: { optionName: "minVisualRangeLength", isCollectionItem: false },
+        strip: { optionName: "strips", isCollectionItem: true },
+        tick: { optionName: "tick", isCollectionItem: false },
+        tickInterval: { optionName: "tickInterval", isCollectionItem: false },
+        visualRange: { optionName: "visualRange", isCollectionItem: false },
+        wholeRange: { optionName: "wholeRange", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const ValueAxis = Object.assign<typeof _componentValueAxis, NestedComponentMeta>(_componentValueAxis, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettings
@@ -2507,15 +2708,18 @@ type IValueErrorBarProps = React.PropsWithChildren<{
   type?: "fixed" | "percent" | "stdDeviation" | "stdError" | "variance";
   value?: number;
 }>
-const _componentValueErrorBar = memo(
-  (props: IValueErrorBarProps) => {
-    return React.createElement(NestedOption<IValueErrorBarProps>, { ...props });
-  }
-);
+const _componentValueErrorBar = (props: IValueErrorBarProps) => {
+  return React.createElement(NestedOption<IValueErrorBarProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "valueErrorBar",
+    },
+  });
+};
 
-const ValueErrorBar: typeof _componentValueErrorBar & IElementDescriptor = Object.assign(_componentValueErrorBar, {
-  OptionName: "valueErrorBar",
-})
+const ValueErrorBar = Object.assign<typeof _componentValueErrorBar, NestedComponentMeta>(_componentValueErrorBar, {
+  componentType: "option",
+});
 
 // owners:
 // ValueAxis
@@ -2538,22 +2742,25 @@ type IVisualRangeProps = React.PropsWithChildren<{
   defaultStartValue?: Date | number | string;
   onStartValueChange?: (value: Date | number | string) => void;
 }>
-const _componentVisualRange = memo(
-  (props: IVisualRangeProps) => {
-    return React.createElement(NestedOption<IVisualRangeProps>, { ...props });
-  }
-);
+const _componentVisualRange = (props: IVisualRangeProps) => {
+  return React.createElement(NestedOption<IVisualRangeProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "visualRange",
+      DefaultsProps: {
+        defaultEndValue: "endValue",
+        defaultStartValue: "startValue"
+      },
+      ExpectedChildren: {
+        length: { optionName: "length", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const VisualRange: typeof _componentVisualRange & IElementDescriptor = Object.assign(_componentVisualRange, {
-  OptionName: "visualRange",
-  DefaultsProps: {
-    defaultEndValue: "endValue",
-    defaultStartValue: "startValue"
-  },
-  ExpectedChildren: {
-    length: { optionName: "length", isCollectionItem: false }
-  },
-})
+const VisualRange = Object.assign<typeof _componentVisualRange, NestedComponentMeta>(_componentVisualRange, {
+  componentType: "option",
+});
 
 // owners:
 // ValueAxis
@@ -2576,19 +2783,22 @@ type IWholeRangeProps = React.PropsWithChildren<{
   defaultStartValue?: Date | number | string;
   onStartValueChange?: (value: Date | number | string) => void;
 }>
-const _componentWholeRange = memo(
-  (props: IWholeRangeProps) => {
-    return React.createElement(NestedOption<IWholeRangeProps>, { ...props });
-  }
-);
-
-const WholeRange: typeof _componentWholeRange & IElementDescriptor = Object.assign(_componentWholeRange, {
-  OptionName: "wholeRange",
-  DefaultsProps: {
-    defaultEndValue: "endValue",
-    defaultStartValue: "startValue"
-  },
-})
+const _componentWholeRange = (props: IWholeRangeProps) => {
+  return React.createElement(NestedOption<IWholeRangeProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "wholeRange",
+      DefaultsProps: {
+        defaultEndValue: "endValue",
+        defaultStartValue: "startValue"
+      },
+    },
+  });
+};
+
+const WholeRange = Object.assign<typeof _componentWholeRange, NestedComponentMeta>(_componentWholeRange, {
+  componentType: "option",
+});
 
 export default PolarChart;
 export {
diff --git a/packages/devextreme-react/src/popover.ts b/packages/devextreme-react/src/popover.ts
index f500fd00177f..ee2570ff7745 100644
--- a/packages/devextreme-react/src/popover.ts
+++ b/packages/devextreme-react/src/popover.ts
@@ -5,7 +5,7 @@ import dxPopover, {
     Properties
 } from "devextreme/ui/popover";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { PositionConfig } from "devextreme/animation/position";
@@ -116,19 +116,22 @@ type IAnimationProps = React.PropsWithChildren<{
   hide?: AnimationConfig;
   show?: AnimationConfig;
 }>
-const _componentAnimation = memo(
-  (props: IAnimationProps) => {
-    return React.createElement(NestedOption<IAnimationProps>, { ...props });
-  }
-);
-
-const Animation: typeof _componentAnimation & IElementDescriptor = Object.assign(_componentAnimation, {
-  OptionName: "animation",
-  ExpectedChildren: {
-    hide: { optionName: "hide", isCollectionItem: false },
-    show: { optionName: "show", isCollectionItem: false }
-  },
-})
+const _componentAnimation = (props: IAnimationProps) => {
+  return React.createElement(NestedOption<IAnimationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "animation",
+      ExpectedChildren: {
+        hide: { optionName: "hide", isCollectionItem: false },
+        show: { optionName: "show", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Animation = Object.assign<typeof _componentAnimation, NestedComponentMeta>(_componentAnimation, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -136,15 +139,18 @@ type IAtProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentAt = memo(
-  (props: IAtProps) => {
-    return React.createElement(NestedOption<IAtProps>, { ...props });
-  }
-);
+const _componentAt = (props: IAtProps) => {
+  return React.createElement(NestedOption<IAtProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "at",
+    },
+  });
+};
 
-const At: typeof _componentAt & IElementDescriptor = Object.assign(_componentAt, {
-  OptionName: "at",
-})
+const At = Object.assign<typeof _componentAt, NestedComponentMeta>(_componentAt, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -152,15 +158,18 @@ type IBoundaryOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentBoundaryOffset = memo(
-  (props: IBoundaryOffsetProps) => {
-    return React.createElement(NestedOption<IBoundaryOffsetProps>, { ...props });
-  }
-);
+const _componentBoundaryOffset = (props: IBoundaryOffsetProps) => {
+  return React.createElement(NestedOption<IBoundaryOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "boundaryOffset",
+    },
+  });
+};
 
-const BoundaryOffset: typeof _componentBoundaryOffset & IElementDescriptor = Object.assign(_componentBoundaryOffset, {
-  OptionName: "boundaryOffset",
-})
+const BoundaryOffset = Object.assign<typeof _componentBoundaryOffset, NestedComponentMeta>(_componentBoundaryOffset, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -168,15 +177,18 @@ type ICollisionProps = React.PropsWithChildren<{
   x?: "fit" | "flip" | "flipfit" | "none";
   y?: "fit" | "flip" | "flipfit" | "none";
 }>
-const _componentCollision = memo(
-  (props: ICollisionProps) => {
-    return React.createElement(NestedOption<ICollisionProps>, { ...props });
-  }
-);
+const _componentCollision = (props: ICollisionProps) => {
+  return React.createElement(NestedOption<ICollisionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "collision",
+    },
+  });
+};
 
-const Collision: typeof _componentCollision & IElementDescriptor = Object.assign(_componentCollision, {
-  OptionName: "collision",
-})
+const Collision = Object.assign<typeof _componentCollision, NestedComponentMeta>(_componentCollision, {
+  componentType: "option",
+});
 
 // owners:
 // Hide
@@ -187,18 +199,21 @@ type IFromProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentFrom = memo(
-  (props: IFromProps) => {
-    return React.createElement(NestedOption<IFromProps>, { ...props });
-  }
-);
-
-const From: typeof _componentFrom & IElementDescriptor = Object.assign(_componentFrom, {
-  OptionName: "from",
-  ExpectedChildren: {
-    position: { optionName: "position", isCollectionItem: false }
-  },
-})
+const _componentFrom = (props: IFromProps) => {
+  return React.createElement(NestedOption<IFromProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "from",
+      ExpectedChildren: {
+        position: { optionName: "position", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const From = Object.assign<typeof _componentFrom, NestedComponentMeta>(_componentFrom, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -214,19 +229,22 @@ type IHideProps = React.PropsWithChildren<{
   to?: AnimationState;
   type?: "css" | "fade" | "fadeIn" | "fadeOut" | "pop" | "slide" | "slideIn" | "slideOut";
 }>
-const _componentHide = memo(
-  (props: IHideProps) => {
-    return React.createElement(NestedOption<IHideProps>, { ...props });
-  }
-);
-
-const Hide: typeof _componentHide & IElementDescriptor = Object.assign(_componentHide, {
-  OptionName: "hide",
-  ExpectedChildren: {
-    from: { optionName: "from", isCollectionItem: false },
-    to: { optionName: "to", isCollectionItem: false }
-  },
-})
+const _componentHide = (props: IHideProps) => {
+  return React.createElement(NestedOption<IHideProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hide",
+      ExpectedChildren: {
+        from: { optionName: "from", isCollectionItem: false },
+        to: { optionName: "to", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Hide = Object.assign<typeof _componentHide, NestedComponentMeta>(_componentHide, {
+  componentType: "option",
+});
 
 // owners:
 // Popover
@@ -234,15 +252,18 @@ type IHideEventProps = React.PropsWithChildren<{
   delay?: number;
   name?: string;
 }>
-const _componentHideEvent = memo(
-  (props: IHideEventProps) => {
-    return React.createElement(NestedOption<IHideEventProps>, { ...props });
-  }
-);
+const _componentHideEvent = (props: IHideEventProps) => {
+  return React.createElement(NestedOption<IHideEventProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hideEvent",
+    },
+  });
+};
 
-const HideEvent: typeof _componentHideEvent & IElementDescriptor = Object.assign(_componentHideEvent, {
-  OptionName: "hideEvent",
-})
+const HideEvent = Object.assign<typeof _componentHideEvent, NestedComponentMeta>(_componentHideEvent, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -250,15 +271,18 @@ type IMyProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentMy = memo(
-  (props: IMyProps) => {
-    return React.createElement(NestedOption<IMyProps>, { ...props });
-  }
-);
+const _componentMy = (props: IMyProps) => {
+  return React.createElement(NestedOption<IMyProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "my",
+    },
+  });
+};
 
-const My: typeof _componentMy & IElementDescriptor = Object.assign(_componentMy, {
-  OptionName: "my",
-})
+const My = Object.assign<typeof _componentMy, NestedComponentMeta>(_componentMy, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -266,15 +290,18 @@ type IOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentOffset = memo(
-  (props: IOffsetProps) => {
-    return React.createElement(NestedOption<IOffsetProps>, { ...props });
-  }
-);
+const _componentOffset = (props: IOffsetProps) => {
+  return React.createElement(NestedOption<IOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "offset",
+    },
+  });
+};
 
-const Offset: typeof _componentOffset & IElementDescriptor = Object.assign(_componentOffset, {
-  OptionName: "offset",
-})
+const Offset = Object.assign<typeof _componentOffset, NestedComponentMeta>(_componentOffset, {
+  componentType: "option",
+});
 
 // owners:
 // From
@@ -303,15 +330,18 @@ type IPositionProps = React.PropsWithChildren<{
     y?: number;
   };
 }>
-const _componentPosition = memo(
-  (props: IPositionProps) => {
-    return React.createElement(NestedOption<IPositionProps>, { ...props });
-  }
-);
+const _componentPosition = (props: IPositionProps) => {
+  return React.createElement(NestedOption<IPositionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "position",
+    },
+  });
+};
 
-const Position: typeof _componentPosition & IElementDescriptor = Object.assign(_componentPosition, {
-  OptionName: "position",
-})
+const Position = Object.assign<typeof _componentPosition, NestedComponentMeta>(_componentPosition, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -327,15 +357,18 @@ type IShowProps = React.PropsWithChildren<{
   to?: AnimationState;
   type?: "css" | "fade" | "fadeIn" | "fadeOut" | "pop" | "slide" | "slideIn" | "slideOut";
 }>
-const _componentShow = memo(
-  (props: IShowProps) => {
-    return React.createElement(NestedOption<IShowProps>, { ...props });
-  }
-);
+const _componentShow = (props: IShowProps) => {
+  return React.createElement(NestedOption<IShowProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "show",
+    },
+  });
+};
 
-const Show: typeof _componentShow & IElementDescriptor = Object.assign(_componentShow, {
-  OptionName: "show",
-})
+const Show = Object.assign<typeof _componentShow, NestedComponentMeta>(_componentShow, {
+  componentType: "option",
+});
 
 // owners:
 // Popover
@@ -343,15 +376,18 @@ type IShowEventProps = React.PropsWithChildren<{
   delay?: number;
   name?: string;
 }>
-const _componentShowEvent = memo(
-  (props: IShowEventProps) => {
-    return React.createElement(NestedOption<IShowEventProps>, { ...props });
-  }
-);
+const _componentShowEvent = (props: IShowEventProps) => {
+  return React.createElement(NestedOption<IShowEventProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "showEvent",
+    },
+  });
+};
 
-const ShowEvent: typeof _componentShowEvent & IElementDescriptor = Object.assign(_componentShowEvent, {
-  OptionName: "showEvent",
-})
+const ShowEvent = Object.assign<typeof _componentShowEvent, NestedComponentMeta>(_componentShowEvent, {
+  componentType: "option",
+});
 
 // owners:
 // Hide
@@ -362,15 +398,18 @@ type IToProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentTo = memo(
-  (props: IToProps) => {
-    return React.createElement(NestedOption<IToProps>, { ...props });
-  }
-);
+const _componentTo = (props: IToProps) => {
+  return React.createElement(NestedOption<IToProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "to",
+    },
+  });
+};
 
-const To: typeof _componentTo & IElementDescriptor = Object.assign(_componentTo, {
-  OptionName: "to",
-})
+const To = Object.assign<typeof _componentTo, NestedComponentMeta>(_componentTo, {
+  componentType: "option",
+});
 
 // owners:
 // Popover
@@ -393,25 +432,28 @@ type IToolbarItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentToolbarItem = memo(
-  (props: IToolbarItemProps) => {
-    return React.createElement(NestedOption<IToolbarItemProps>, { ...props });
-  }
-);
-
-const ToolbarItem: typeof _componentToolbarItem & IElementDescriptor = Object.assign(_componentToolbarItem, {
-  OptionName: "toolbarItems",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "menuItemTemplate",
-    render: "menuItemRender",
-    component: "menuItemComponent"
-  }, {
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentToolbarItem = (props: IToolbarItemProps) => {
+  return React.createElement(NestedOption<IToolbarItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "toolbarItems",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "menuItemTemplate",
+        render: "menuItemRender",
+        component: "menuItemComponent"
+      }, {
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const ToolbarItem = Object.assign<typeof _componentToolbarItem, NestedComponentMeta>(_componentToolbarItem, {
+  componentType: "option",
+});
 
 export default Popover;
 export {
diff --git a/packages/devextreme-react/src/popup.ts b/packages/devextreme-react/src/popup.ts
index f7ff9995db27..c5fcae6909ff 100644
--- a/packages/devextreme-react/src/popup.ts
+++ b/packages/devextreme-react/src/popup.ts
@@ -5,7 +5,7 @@ import dxPopup, {
     Properties
 } from "devextreme/ui/popup";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { PositionConfig } from "devextreme/animation/position";
@@ -98,19 +98,22 @@ type IAnimationProps = React.PropsWithChildren<{
   hide?: AnimationConfig;
   show?: AnimationConfig;
 }>
-const _componentAnimation = memo(
-  (props: IAnimationProps) => {
-    return React.createElement(NestedOption<IAnimationProps>, { ...props });
-  }
-);
-
-const Animation: typeof _componentAnimation & IElementDescriptor = Object.assign(_componentAnimation, {
-  OptionName: "animation",
-  ExpectedChildren: {
-    hide: { optionName: "hide", isCollectionItem: false },
-    show: { optionName: "show", isCollectionItem: false }
-  },
-})
+const _componentAnimation = (props: IAnimationProps) => {
+  return React.createElement(NestedOption<IAnimationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "animation",
+      ExpectedChildren: {
+        hide: { optionName: "hide", isCollectionItem: false },
+        show: { optionName: "show", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Animation = Object.assign<typeof _componentAnimation, NestedComponentMeta>(_componentAnimation, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -118,15 +121,18 @@ type IAtProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentAt = memo(
-  (props: IAtProps) => {
-    return React.createElement(NestedOption<IAtProps>, { ...props });
-  }
-);
+const _componentAt = (props: IAtProps) => {
+  return React.createElement(NestedOption<IAtProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "at",
+    },
+  });
+};
 
-const At: typeof _componentAt & IElementDescriptor = Object.assign(_componentAt, {
-  OptionName: "at",
-})
+const At = Object.assign<typeof _componentAt, NestedComponentMeta>(_componentAt, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -134,15 +140,18 @@ type IBoundaryOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentBoundaryOffset = memo(
-  (props: IBoundaryOffsetProps) => {
-    return React.createElement(NestedOption<IBoundaryOffsetProps>, { ...props });
-  }
-);
+const _componentBoundaryOffset = (props: IBoundaryOffsetProps) => {
+  return React.createElement(NestedOption<IBoundaryOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "boundaryOffset",
+    },
+  });
+};
 
-const BoundaryOffset: typeof _componentBoundaryOffset & IElementDescriptor = Object.assign(_componentBoundaryOffset, {
-  OptionName: "boundaryOffset",
-})
+const BoundaryOffset = Object.assign<typeof _componentBoundaryOffset, NestedComponentMeta>(_componentBoundaryOffset, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -150,15 +159,18 @@ type ICollisionProps = React.PropsWithChildren<{
   x?: "fit" | "flip" | "flipfit" | "none";
   y?: "fit" | "flip" | "flipfit" | "none";
 }>
-const _componentCollision = memo(
-  (props: ICollisionProps) => {
-    return React.createElement(NestedOption<ICollisionProps>, { ...props });
-  }
-);
+const _componentCollision = (props: ICollisionProps) => {
+  return React.createElement(NestedOption<ICollisionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "collision",
+    },
+  });
+};
 
-const Collision: typeof _componentCollision & IElementDescriptor = Object.assign(_componentCollision, {
-  OptionName: "collision",
-})
+const Collision = Object.assign<typeof _componentCollision, NestedComponentMeta>(_componentCollision, {
+  componentType: "option",
+});
 
 // owners:
 // Hide
@@ -169,18 +181,21 @@ type IFromProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentFrom = memo(
-  (props: IFromProps) => {
-    return React.createElement(NestedOption<IFromProps>, { ...props });
-  }
-);
-
-const From: typeof _componentFrom & IElementDescriptor = Object.assign(_componentFrom, {
-  OptionName: "from",
-  ExpectedChildren: {
-    position: { optionName: "position", isCollectionItem: false }
-  },
-})
+const _componentFrom = (props: IFromProps) => {
+  return React.createElement(NestedOption<IFromProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "from",
+      ExpectedChildren: {
+        position: { optionName: "position", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const From = Object.assign<typeof _componentFrom, NestedComponentMeta>(_componentFrom, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -196,19 +211,22 @@ type IHideProps = React.PropsWithChildren<{
   to?: AnimationState;
   type?: "css" | "fade" | "fadeIn" | "fadeOut" | "pop" | "slide" | "slideIn" | "slideOut";
 }>
-const _componentHide = memo(
-  (props: IHideProps) => {
-    return React.createElement(NestedOption<IHideProps>, { ...props });
-  }
-);
-
-const Hide: typeof _componentHide & IElementDescriptor = Object.assign(_componentHide, {
-  OptionName: "hide",
-  ExpectedChildren: {
-    from: { optionName: "from", isCollectionItem: false },
-    to: { optionName: "to", isCollectionItem: false }
-  },
-})
+const _componentHide = (props: IHideProps) => {
+  return React.createElement(NestedOption<IHideProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hide",
+      ExpectedChildren: {
+        from: { optionName: "from", isCollectionItem: false },
+        to: { optionName: "to", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Hide = Object.assign<typeof _componentHide, NestedComponentMeta>(_componentHide, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -216,15 +234,18 @@ type IMyProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentMy = memo(
-  (props: IMyProps) => {
-    return React.createElement(NestedOption<IMyProps>, { ...props });
-  }
-);
+const _componentMy = (props: IMyProps) => {
+  return React.createElement(NestedOption<IMyProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "my",
+    },
+  });
+};
 
-const My: typeof _componentMy & IElementDescriptor = Object.assign(_componentMy, {
-  OptionName: "my",
-})
+const My = Object.assign<typeof _componentMy, NestedComponentMeta>(_componentMy, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -232,15 +253,18 @@ type IOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentOffset = memo(
-  (props: IOffsetProps) => {
-    return React.createElement(NestedOption<IOffsetProps>, { ...props });
-  }
-);
+const _componentOffset = (props: IOffsetProps) => {
+  return React.createElement(NestedOption<IOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "offset",
+    },
+  });
+};
 
-const Offset: typeof _componentOffset & IElementDescriptor = Object.assign(_componentOffset, {
-  OptionName: "offset",
-})
+const Offset = Object.assign<typeof _componentOffset, NestedComponentMeta>(_componentOffset, {
+  componentType: "option",
+});
 
 // owners:
 // From
@@ -269,15 +293,18 @@ type IPositionProps = React.PropsWithChildren<{
     y?: number;
   };
 }>
-const _componentPosition = memo(
-  (props: IPositionProps) => {
-    return React.createElement(NestedOption<IPositionProps>, { ...props });
-  }
-);
+const _componentPosition = (props: IPositionProps) => {
+  return React.createElement(NestedOption<IPositionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "position",
+    },
+  });
+};
 
-const Position: typeof _componentPosition & IElementDescriptor = Object.assign(_componentPosition, {
-  OptionName: "position",
-})
+const Position = Object.assign<typeof _componentPosition, NestedComponentMeta>(_componentPosition, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -293,15 +320,18 @@ type IShowProps = React.PropsWithChildren<{
   to?: AnimationState;
   type?: "css" | "fade" | "fadeIn" | "fadeOut" | "pop" | "slide" | "slideIn" | "slideOut";
 }>
-const _componentShow = memo(
-  (props: IShowProps) => {
-    return React.createElement(NestedOption<IShowProps>, { ...props });
-  }
-);
+const _componentShow = (props: IShowProps) => {
+  return React.createElement(NestedOption<IShowProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "show",
+    },
+  });
+};
 
-const Show: typeof _componentShow & IElementDescriptor = Object.assign(_componentShow, {
-  OptionName: "show",
-})
+const Show = Object.assign<typeof _componentShow, NestedComponentMeta>(_componentShow, {
+  componentType: "option",
+});
 
 // owners:
 // Hide
@@ -312,15 +342,18 @@ type IToProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentTo = memo(
-  (props: IToProps) => {
-    return React.createElement(NestedOption<IToProps>, { ...props });
-  }
-);
+const _componentTo = (props: IToProps) => {
+  return React.createElement(NestedOption<IToProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "to",
+    },
+  });
+};
 
-const To: typeof _componentTo & IElementDescriptor = Object.assign(_componentTo, {
-  OptionName: "to",
-})
+const To = Object.assign<typeof _componentTo, NestedComponentMeta>(_componentTo, {
+  componentType: "option",
+});
 
 // owners:
 // Popup
@@ -343,25 +376,28 @@ type IToolbarItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentToolbarItem = memo(
-  (props: IToolbarItemProps) => {
-    return React.createElement(NestedOption<IToolbarItemProps>, { ...props });
-  }
-);
-
-const ToolbarItem: typeof _componentToolbarItem & IElementDescriptor = Object.assign(_componentToolbarItem, {
-  OptionName: "toolbarItems",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "menuItemTemplate",
-    render: "menuItemRender",
-    component: "menuItemComponent"
-  }, {
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentToolbarItem = (props: IToolbarItemProps) => {
+  return React.createElement(NestedOption<IToolbarItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "toolbarItems",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "menuItemTemplate",
+        render: "menuItemRender",
+        component: "menuItemComponent"
+      }, {
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const ToolbarItem = Object.assign<typeof _componentToolbarItem, NestedComponentMeta>(_componentToolbarItem, {
+  componentType: "option",
+});
 
 export default Popup;
 export {
diff --git a/packages/devextreme-react/src/radio-group.ts b/packages/devextreme-react/src/radio-group.ts
index 6f66500a88a1..376c30251d61 100644
--- a/packages/devextreme-react/src/radio-group.ts
+++ b/packages/devextreme-react/src/radio-group.ts
@@ -5,7 +5,7 @@ import dxRadioGroup, {
     Properties
 } from "devextreme/ui/radio_group";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { ContentReadyEvent, DisposingEvent, InitializedEvent, ValueChangedEvent } from "devextreme/ui/radio_group";
@@ -94,21 +94,24 @@ type IItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentItem = memo(
-  (props: IItemProps) => {
-    return React.createElement(NestedOption<IItemProps>, { ...props });
-  }
-);
-
-const Item: typeof _componentItem & IElementDescriptor = Object.assign(_componentItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentItem = (props: IItemProps) => {
+  return React.createElement(NestedOption<IItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const Item = Object.assign<typeof _componentItem, NestedComponentMeta>(_componentItem, {
+  componentType: "option",
+});
 
 export default RadioGroup;
 export {
diff --git a/packages/devextreme-react/src/range-selector.ts b/packages/devextreme-react/src/range-selector.ts
index 973204d95835..c7c52022f194 100644
--- a/packages/devextreme-react/src/range-selector.ts
+++ b/packages/devextreme-react/src/range-selector.ts
@@ -5,7 +5,7 @@ import dxRangeSelector, {
     Properties
 } from "devextreme/viz/range_selector";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { DisposingEvent, DrawnEvent, ExportedEvent, ExportingEvent, FileSavingEvent, IncidentOccurredEvent, InitializedEvent, ValueChangedEvent } from "devextreme/viz/range_selector";
@@ -103,15 +103,18 @@ type IAggregationProps = React.PropsWithChildren<{
   enabled?: boolean;
   method?: "avg" | "count" | "max" | "min" | "ohlc" | "range" | "sum" | "custom";
 }>
-const _componentAggregation = memo(
-  (props: IAggregationProps) => {
-    return React.createElement(NestedOption<IAggregationProps>, { ...props });
-  }
-);
+const _componentAggregation = (props: IAggregationProps) => {
+  return React.createElement(NestedOption<IAggregationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "aggregation",
+    },
+  });
+};
 
-const Aggregation: typeof _componentAggregation & IElementDescriptor = Object.assign(_componentAggregation, {
-  OptionName: "aggregation",
-})
+const Aggregation = Object.assign<typeof _componentAggregation, NestedComponentMeta>(_componentAggregation, {
+  componentType: "option",
+});
 
 // owners:
 // Scale
@@ -126,15 +129,18 @@ type IAggregationIntervalProps = React.PropsWithChildren<{
   weeks?: number;
   years?: number;
 }>
-const _componentAggregationInterval = memo(
-  (props: IAggregationIntervalProps) => {
-    return React.createElement(NestedOption<IAggregationIntervalProps>, { ...props });
-  }
-);
+const _componentAggregationInterval = (props: IAggregationIntervalProps) => {
+  return React.createElement(NestedOption<IAggregationIntervalProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "aggregationInterval",
+    },
+  });
+};
 
-const AggregationInterval: typeof _componentAggregationInterval & IElementDescriptor = Object.assign(_componentAggregationInterval, {
-  OptionName: "aggregationInterval",
-})
+const AggregationInterval = Object.assign<typeof _componentAggregationInterval, NestedComponentMeta>(_componentAggregationInterval, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettingsLabel
@@ -146,15 +152,18 @@ type IArgumentFormatProps = React.PropsWithChildren<{
   type?: "billions" | "currency" | "day" | "decimal" | "exponential" | "fixedPoint" | "largeNumber" | "longDate" | "longTime" | "millions" | "millisecond" | "month" | "monthAndDay" | "monthAndYear" | "percent" | "quarter" | "quarterAndYear" | "shortDate" | "shortTime" | "thousands" | "trillions" | "year" | "dayOfWeek" | "hour" | "longDateLongTime" | "minute" | "second" | "shortDateShortTime";
   useCurrencyAccountingStyle?: boolean;
 }>
-const _componentArgumentFormat = memo(
-  (props: IArgumentFormatProps) => {
-    return React.createElement(NestedOption<IArgumentFormatProps>, { ...props });
-  }
-);
+const _componentArgumentFormat = (props: IArgumentFormatProps) => {
+  return React.createElement(NestedOption<IArgumentFormatProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "argumentFormat",
+    },
+  });
+};
 
-const ArgumentFormat: typeof _componentArgumentFormat & IElementDescriptor = Object.assign(_componentArgumentFormat, {
-  OptionName: "argumentFormat",
-})
+const ArgumentFormat = Object.assign<typeof _componentArgumentFormat, NestedComponentMeta>(_componentArgumentFormat, {
+  componentType: "option",
+});
 
 // owners:
 // RangeSelector
@@ -166,19 +175,22 @@ type IBackgroundProps = React.PropsWithChildren<{
   };
   visible?: boolean;
 }>
-const _componentBackground = memo(
-  (props: IBackgroundProps) => {
-    return React.createElement(NestedOption<IBackgroundProps>, { ...props });
-  }
-);
-
-const Background: typeof _componentBackground & IElementDescriptor = Object.assign(_componentBackground, {
-  OptionName: "background",
-  ExpectedChildren: {
-    backgroundImage: { optionName: "image", isCollectionItem: false },
-    image: { optionName: "image", isCollectionItem: false }
-  },
-})
+const _componentBackground = (props: IBackgroundProps) => {
+  return React.createElement(NestedOption<IBackgroundProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "background",
+      ExpectedChildren: {
+        backgroundImage: { optionName: "image", isCollectionItem: false },
+        image: { optionName: "image", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Background = Object.assign<typeof _componentBackground, NestedComponentMeta>(_componentBackground, {
+  componentType: "option",
+});
 
 // owners:
 // Background
@@ -186,15 +198,18 @@ type IBackgroundImageProps = React.PropsWithChildren<{
   location?: "center" | "centerBottom" | "centerTop" | "full" | "leftBottom" | "leftCenter" | "leftTop" | "rightBottom" | "rightCenter" | "rightTop";
   url?: string;
 }>
-const _componentBackgroundImage = memo(
-  (props: IBackgroundImageProps) => {
-    return React.createElement(NestedOption<IBackgroundImageProps>, { ...props });
-  }
-);
+const _componentBackgroundImage = (props: IBackgroundImageProps) => {
+  return React.createElement(NestedOption<IBackgroundImageProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "image",
+    },
+  });
+};
 
-const BackgroundImage: typeof _componentBackgroundImage & IElementDescriptor = Object.assign(_componentBackgroundImage, {
-  OptionName: "image",
-})
+const BackgroundImage = Object.assign<typeof _componentBackgroundImage, NestedComponentMeta>(_componentBackgroundImage, {
+  componentType: "option",
+});
 
 // owners:
 // RangeSelector
@@ -207,15 +222,18 @@ type IBehaviorProps = React.PropsWithChildren<{
   snapToTicks?: boolean;
   valueChangeMode?: "onHandleMove" | "onHandleRelease";
 }>
-const _componentBehavior = memo(
-  (props: IBehaviorProps) => {
-    return React.createElement(NestedOption<IBehaviorProps>, { ...props });
-  }
-);
+const _componentBehavior = (props: IBehaviorProps) => {
+  return React.createElement(NestedOption<IBehaviorProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "behavior",
+    },
+  });
+};
 
-const Behavior: typeof _componentBehavior & IElementDescriptor = Object.assign(_componentBehavior, {
-  OptionName: "behavior",
-})
+const Behavior = Object.assign<typeof _componentBehavior, NestedComponentMeta>(_componentBehavior, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettings
@@ -231,15 +249,18 @@ type IBorderProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentBorder = memo(
-  (props: IBorderProps) => {
-    return React.createElement(NestedOption<IBorderProps>, { ...props });
-  }
-);
+const _componentBorder = (props: IBorderProps) => {
+  return React.createElement(NestedOption<IBorderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
 
-const Border: typeof _componentBorder & IElementDescriptor = Object.assign(_componentBorder, {
-  OptionName: "border",
-})
+const Border = Object.assign<typeof _componentBorder, NestedComponentMeta>(_componentBorder, {
+  componentType: "option",
+});
 
 // owners:
 // Scale
@@ -247,16 +268,19 @@ type IBreakProps = React.PropsWithChildren<{
   endValue?: Date | number | string;
   startValue?: Date | number | string;
 }>
-const _componentBreak = memo(
-  (props: IBreakProps) => {
-    return React.createElement(NestedOption<IBreakProps>, { ...props });
-  }
-);
+const _componentBreak = (props: IBreakProps) => {
+  return React.createElement(NestedOption<IBreakProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "breaks",
+      IsCollectionItem: true,
+    },
+  });
+};
 
-const Break: typeof _componentBreak & IElementDescriptor = Object.assign(_componentBreak, {
-  OptionName: "breaks",
-  IsCollectionItem: true,
-})
+const Break = Object.assign<typeof _componentBreak, NestedComponentMeta>(_componentBreak, {
+  componentType: "option",
+});
 
 // owners:
 // Scale
@@ -265,15 +289,18 @@ type IBreakStyleProps = React.PropsWithChildren<{
   line?: "straight" | "waved";
   width?: number;
 }>
-const _componentBreakStyle = memo(
-  (props: IBreakStyleProps) => {
-    return React.createElement(NestedOption<IBreakStyleProps>, { ...props });
-  }
-);
+const _componentBreakStyle = (props: IBreakStyleProps) => {
+  return React.createElement(NestedOption<IBreakStyleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "breakStyle",
+    },
+  });
+};
 
-const BreakStyle: typeof _componentBreakStyle & IElementDescriptor = Object.assign(_componentBreakStyle, {
-  OptionName: "breakStyle",
-})
+const BreakStyle = Object.assign<typeof _componentBreakStyle, NestedComponentMeta>(_componentBreakStyle, {
+  componentType: "option",
+});
 
 // owners:
 // RangeSelector
@@ -307,22 +334,25 @@ type IChartProps = React.PropsWithChildren<{
     valueType?: "datetime" | "numeric" | "string";
   };
 }>
-const _componentChart = memo(
-  (props: IChartProps) => {
-    return React.createElement(NestedOption<IChartProps>, { ...props });
-  }
-);
-
-const Chart: typeof _componentChart & IElementDescriptor = Object.assign(_componentChart, {
-  OptionName: "chart",
-  ExpectedChildren: {
-    commonSeriesSettings: { optionName: "commonSeriesSettings", isCollectionItem: false },
-    dataPrepareSettings: { optionName: "dataPrepareSettings", isCollectionItem: false },
-    series: { optionName: "series", isCollectionItem: true },
-    seriesTemplate: { optionName: "seriesTemplate", isCollectionItem: false },
-    valueAxis: { optionName: "valueAxis", isCollectionItem: false }
-  },
-})
+const _componentChart = (props: IChartProps) => {
+  return React.createElement(NestedOption<IChartProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "chart",
+      ExpectedChildren: {
+        commonSeriesSettings: { optionName: "commonSeriesSettings", isCollectionItem: false },
+        dataPrepareSettings: { optionName: "dataPrepareSettings", isCollectionItem: false },
+        series: { optionName: "series", isCollectionItem: true },
+        seriesTemplate: { optionName: "seriesTemplate", isCollectionItem: false },
+        valueAxis: { optionName: "valueAxis", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Chart = Object.assign<typeof _componentChart, NestedComponentMeta>(_componentChart, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettings
@@ -335,15 +365,18 @@ type IColorProps = React.PropsWithChildren<{
   base?: string;
   fillId?: string;
 }>
-const _componentColor = memo(
-  (props: IColorProps) => {
-    return React.createElement(NestedOption<IColorProps>, { ...props });
-  }
-);
+const _componentColor = (props: IColorProps) => {
+  return React.createElement(NestedOption<IColorProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "color",
+    },
+  });
+};
 
-const Color: typeof _componentColor & IElementDescriptor = Object.assign(_componentColor, {
-  OptionName: "color",
-})
+const Color = Object.assign<typeof _componentColor, NestedComponentMeta>(_componentColor, {
+  componentType: "option",
+});
 
 // owners:
 // Chart
@@ -535,30 +568,33 @@ type ICommonSeriesSettingsProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentCommonSeriesSettings = memo(
-  (props: ICommonSeriesSettingsProps) => {
-    return React.createElement(NestedOption<ICommonSeriesSettingsProps>, { ...props });
-  }
-);
-
-const CommonSeriesSettings: typeof _componentCommonSeriesSettings & IElementDescriptor = Object.assign(_componentCommonSeriesSettings, {
-  OptionName: "commonSeriesSettings",
-  ExpectedChildren: {
-    aggregation: { optionName: "aggregation", isCollectionItem: false },
-    border: { optionName: "border", isCollectionItem: false },
-    color: { optionName: "color", isCollectionItem: false },
-    commonSeriesSettingsHoverStyle: { optionName: "hoverStyle", isCollectionItem: false },
-    commonSeriesSettingsLabel: { optionName: "label", isCollectionItem: false },
-    commonSeriesSettingsSelectionStyle: { optionName: "selectionStyle", isCollectionItem: false },
-    hoverStyle: { optionName: "hoverStyle", isCollectionItem: false },
-    label: { optionName: "label", isCollectionItem: false },
-    point: { optionName: "point", isCollectionItem: false },
-    reduction: { optionName: "reduction", isCollectionItem: false },
-    selectionStyle: { optionName: "selectionStyle", isCollectionItem: false },
-    seriesBorder: { optionName: "border", isCollectionItem: false },
-    valueErrorBar: { optionName: "valueErrorBar", isCollectionItem: false }
-  },
-})
+const _componentCommonSeriesSettings = (props: ICommonSeriesSettingsProps) => {
+  return React.createElement(NestedOption<ICommonSeriesSettingsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "commonSeriesSettings",
+      ExpectedChildren: {
+        aggregation: { optionName: "aggregation", isCollectionItem: false },
+        border: { optionName: "border", isCollectionItem: false },
+        color: { optionName: "color", isCollectionItem: false },
+        commonSeriesSettingsHoverStyle: { optionName: "hoverStyle", isCollectionItem: false },
+        commonSeriesSettingsLabel: { optionName: "label", isCollectionItem: false },
+        commonSeriesSettingsSelectionStyle: { optionName: "selectionStyle", isCollectionItem: false },
+        hoverStyle: { optionName: "hoverStyle", isCollectionItem: false },
+        label: { optionName: "label", isCollectionItem: false },
+        point: { optionName: "point", isCollectionItem: false },
+        reduction: { optionName: "reduction", isCollectionItem: false },
+        selectionStyle: { optionName: "selectionStyle", isCollectionItem: false },
+        seriesBorder: { optionName: "border", isCollectionItem: false },
+        valueErrorBar: { optionName: "valueErrorBar", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const CommonSeriesSettings = Object.assign<typeof _componentCommonSeriesSettings, NestedComponentMeta>(_componentCommonSeriesSettings, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettings
@@ -580,21 +616,24 @@ type ICommonSeriesSettingsHoverStyleProps = React.PropsWithChildren<{
   highlight?: boolean;
   width?: number;
 }>
-const _componentCommonSeriesSettingsHoverStyle = memo(
-  (props: ICommonSeriesSettingsHoverStyleProps) => {
-    return React.createElement(NestedOption<ICommonSeriesSettingsHoverStyleProps>, { ...props });
-  }
-);
-
-const CommonSeriesSettingsHoverStyle: typeof _componentCommonSeriesSettingsHoverStyle & IElementDescriptor = Object.assign(_componentCommonSeriesSettingsHoverStyle, {
-  OptionName: "hoverStyle",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    color: { optionName: "color", isCollectionItem: false },
-    hatching: { optionName: "hatching", isCollectionItem: false },
-    seriesBorder: { optionName: "border", isCollectionItem: false }
-  },
-})
+const _componentCommonSeriesSettingsHoverStyle = (props: ICommonSeriesSettingsHoverStyleProps) => {
+  return React.createElement(NestedOption<ICommonSeriesSettingsHoverStyleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hoverStyle",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        color: { optionName: "color", isCollectionItem: false },
+        hatching: { optionName: "hatching", isCollectionItem: false },
+        seriesBorder: { optionName: "border", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const CommonSeriesSettingsHoverStyle = Object.assign<typeof _componentCommonSeriesSettingsHoverStyle, NestedComponentMeta>(_componentCommonSeriesSettingsHoverStyle, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettings
@@ -624,23 +663,26 @@ type ICommonSeriesSettingsLabelProps = React.PropsWithChildren<{
   verticalOffset?: number;
   visible?: boolean;
 }>
-const _componentCommonSeriesSettingsLabel = memo(
-  (props: ICommonSeriesSettingsLabelProps) => {
-    return React.createElement(NestedOption<ICommonSeriesSettingsLabelProps>, { ...props });
-  }
-);
-
-const CommonSeriesSettingsLabel: typeof _componentCommonSeriesSettingsLabel & IElementDescriptor = Object.assign(_componentCommonSeriesSettingsLabel, {
-  OptionName: "label",
-  ExpectedChildren: {
-    argumentFormat: { optionName: "argumentFormat", isCollectionItem: false },
-    border: { optionName: "border", isCollectionItem: false },
-    connector: { optionName: "connector", isCollectionItem: false },
-    font: { optionName: "font", isCollectionItem: false },
-    format: { optionName: "format", isCollectionItem: false },
-    seriesBorder: { optionName: "border", isCollectionItem: false }
-  },
-})
+const _componentCommonSeriesSettingsLabel = (props: ICommonSeriesSettingsLabelProps) => {
+  return React.createElement(NestedOption<ICommonSeriesSettingsLabelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "label",
+      ExpectedChildren: {
+        argumentFormat: { optionName: "argumentFormat", isCollectionItem: false },
+        border: { optionName: "border", isCollectionItem: false },
+        connector: { optionName: "connector", isCollectionItem: false },
+        font: { optionName: "font", isCollectionItem: false },
+        format: { optionName: "format", isCollectionItem: false },
+        seriesBorder: { optionName: "border", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const CommonSeriesSettingsLabel = Object.assign<typeof _componentCommonSeriesSettingsLabel, NestedComponentMeta>(_componentCommonSeriesSettingsLabel, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettings
@@ -662,21 +704,24 @@ type ICommonSeriesSettingsSelectionStyleProps = React.PropsWithChildren<{
   highlight?: boolean;
   width?: number;
 }>
-const _componentCommonSeriesSettingsSelectionStyle = memo(
-  (props: ICommonSeriesSettingsSelectionStyleProps) => {
-    return React.createElement(NestedOption<ICommonSeriesSettingsSelectionStyleProps>, { ...props });
-  }
-);
-
-const CommonSeriesSettingsSelectionStyle: typeof _componentCommonSeriesSettingsSelectionStyle & IElementDescriptor = Object.assign(_componentCommonSeriesSettingsSelectionStyle, {
-  OptionName: "selectionStyle",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    color: { optionName: "color", isCollectionItem: false },
-    hatching: { optionName: "hatching", isCollectionItem: false },
-    seriesBorder: { optionName: "border", isCollectionItem: false }
-  },
-})
+const _componentCommonSeriesSettingsSelectionStyle = (props: ICommonSeriesSettingsSelectionStyleProps) => {
+  return React.createElement(NestedOption<ICommonSeriesSettingsSelectionStyleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "selectionStyle",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        color: { optionName: "color", isCollectionItem: false },
+        hatching: { optionName: "hatching", isCollectionItem: false },
+        seriesBorder: { optionName: "border", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const CommonSeriesSettingsSelectionStyle = Object.assign<typeof _componentCommonSeriesSettingsSelectionStyle, NestedComponentMeta>(_componentCommonSeriesSettingsSelectionStyle, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettingsLabel
@@ -685,15 +730,18 @@ type IConnectorProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentConnector = memo(
-  (props: IConnectorProps) => {
-    return React.createElement(NestedOption<IConnectorProps>, { ...props });
-  }
-);
+const _componentConnector = (props: IConnectorProps) => {
+  return React.createElement(NestedOption<IConnectorProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "connector",
+    },
+  });
+};
 
-const Connector: typeof _componentConnector & IElementDescriptor = Object.assign(_componentConnector, {
-  OptionName: "connector",
-})
+const Connector = Object.assign<typeof _componentConnector, NestedComponentMeta>(_componentConnector, {
+  componentType: "option",
+});
 
 // owners:
 // Chart
@@ -702,15 +750,18 @@ type IDataPrepareSettingsProps = React.PropsWithChildren<{
   convertToAxisDataType?: boolean;
   sortingMethod?: boolean | ((a: { arg: Date | number | string, val: Date | number | string }, b: { arg: Date | number | string, val: Date | number | string }) => number);
 }>
-const _componentDataPrepareSettings = memo(
-  (props: IDataPrepareSettingsProps) => {
-    return React.createElement(NestedOption<IDataPrepareSettingsProps>, { ...props });
-  }
-);
+const _componentDataPrepareSettings = (props: IDataPrepareSettingsProps) => {
+  return React.createElement(NestedOption<IDataPrepareSettingsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "dataPrepareSettings",
+    },
+  });
+};
 
-const DataPrepareSettings: typeof _componentDataPrepareSettings & IElementDescriptor = Object.assign(_componentDataPrepareSettings, {
-  OptionName: "dataPrepareSettings",
-})
+const DataPrepareSettings = Object.assign<typeof _componentDataPrepareSettings, NestedComponentMeta>(_componentDataPrepareSettings, {
+  componentType: "option",
+});
 
 // owners:
 // RangeSelector
@@ -723,15 +774,18 @@ type IExportProps = React.PropsWithChildren<{
   printingEnabled?: boolean;
   svgToCanvas?: ((svg: any, canvas: any) => any);
 }>
-const _componentExport = memo(
-  (props: IExportProps) => {
-    return React.createElement(NestedOption<IExportProps>, { ...props });
-  }
-);
+const _componentExport = (props: IExportProps) => {
+  return React.createElement(NestedOption<IExportProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "export",
+    },
+  });
+};
 
-const Export: typeof _componentExport & IElementDescriptor = Object.assign(_componentExport, {
-  OptionName: "export",
-})
+const Export = Object.assign<typeof _componentExport, NestedComponentMeta>(_componentExport, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettingsLabel
@@ -747,15 +801,18 @@ type IFontProps = React.PropsWithChildren<{
   size?: number | string;
   weight?: number;
 }>
-const _componentFont = memo(
-  (props: IFontProps) => {
-    return React.createElement(NestedOption<IFontProps>, { ...props });
-  }
-);
+const _componentFont = (props: IFontProps) => {
+  return React.createElement(NestedOption<IFontProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "font",
+    },
+  });
+};
 
-const Font: typeof _componentFont & IElementDescriptor = Object.assign(_componentFont, {
-  OptionName: "font",
-})
+const Font = Object.assign<typeof _componentFont, NestedComponentMeta>(_componentFont, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettingsLabel
@@ -770,15 +827,18 @@ type IFormatProps = React.PropsWithChildren<{
   type?: "billions" | "currency" | "day" | "decimal" | "exponential" | "fixedPoint" | "largeNumber" | "longDate" | "longTime" | "millions" | "millisecond" | "month" | "monthAndDay" | "monthAndYear" | "percent" | "quarter" | "quarterAndYear" | "shortDate" | "shortTime" | "thousands" | "trillions" | "year" | "dayOfWeek" | "hour" | "longDateLongTime" | "minute" | "second" | "shortDateShortTime";
   useCurrencyAccountingStyle?: boolean;
 }>
-const _componentFormat = memo(
-  (props: IFormatProps) => {
-    return React.createElement(NestedOption<IFormatProps>, { ...props });
-  }
-);
+const _componentFormat = (props: IFormatProps) => {
+  return React.createElement(NestedOption<IFormatProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "format",
+    },
+  });
+};
 
-const Format: typeof _componentFormat & IElementDescriptor = Object.assign(_componentFormat, {
-  OptionName: "format",
-})
+const Format = Object.assign<typeof _componentFormat, NestedComponentMeta>(_componentFormat, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettingsHoverStyle
@@ -789,15 +849,18 @@ type IHatchingProps = React.PropsWithChildren<{
   step?: number;
   width?: number;
 }>
-const _componentHatching = memo(
-  (props: IHatchingProps) => {
-    return React.createElement(NestedOption<IHatchingProps>, { ...props });
-  }
-);
+const _componentHatching = (props: IHatchingProps) => {
+  return React.createElement(NestedOption<IHatchingProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hatching",
+    },
+  });
+};
 
-const Hatching: typeof _componentHatching & IElementDescriptor = Object.assign(_componentHatching, {
-  OptionName: "hatching",
-})
+const Hatching = Object.assign<typeof _componentHatching, NestedComponentMeta>(_componentHatching, {
+  componentType: "option",
+});
 
 // owners:
 // PointImage
@@ -805,15 +868,18 @@ type IHeightProps = React.PropsWithChildren<{
   rangeMaxPoint?: number;
   rangeMinPoint?: number;
 }>
-const _componentHeight = memo(
-  (props: IHeightProps) => {
-    return React.createElement(NestedOption<IHeightProps>, { ...props });
-  }
-);
+const _componentHeight = (props: IHeightProps) => {
+  return React.createElement(NestedOption<IHeightProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "height",
+    },
+  });
+};
 
-const Height: typeof _componentHeight & IElementDescriptor = Object.assign(_componentHeight, {
-  OptionName: "height",
-})
+const Height = Object.assign<typeof _componentHeight, NestedComponentMeta>(_componentHeight, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettings
@@ -837,15 +903,18 @@ type IHoverStyleProps = React.PropsWithChildren<{
   width?: number;
   size?: number;
 }>
-const _componentHoverStyle = memo(
-  (props: IHoverStyleProps) => {
-    return React.createElement(NestedOption<IHoverStyleProps>, { ...props });
-  }
-);
+const _componentHoverStyle = (props: IHoverStyleProps) => {
+  return React.createElement(NestedOption<IHoverStyleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hoverStyle",
+    },
+  });
+};
 
-const HoverStyle: typeof _componentHoverStyle & IElementDescriptor = Object.assign(_componentHoverStyle, {
-  OptionName: "hoverStyle",
-})
+const HoverStyle = Object.assign<typeof _componentHoverStyle, NestedComponentMeta>(_componentHoverStyle, {
+  componentType: "option",
+});
 
 // owners:
 // Background
@@ -865,15 +934,18 @@ type IImageProps = React.PropsWithChildren<{
     rangeMinPoint?: number;
   };
 }>
-const _componentImage = memo(
-  (props: IImageProps) => {
-    return React.createElement(NestedOption<IImageProps>, { ...props });
-  }
-);
+const _componentImage = (props: IImageProps) => {
+  return React.createElement(NestedOption<IImageProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "image",
+    },
+  });
+};
 
-const Image: typeof _componentImage & IElementDescriptor = Object.assign(_componentImage, {
-  OptionName: "image",
-})
+const Image = Object.assign<typeof _componentImage, NestedComponentMeta>(_componentImage, {
+  componentType: "option",
+});
 
 // owners:
 // RangeSelector
@@ -881,15 +953,18 @@ type IIndentProps = React.PropsWithChildren<{
   left?: number;
   right?: number;
 }>
-const _componentIndent = memo(
-  (props: IIndentProps) => {
-    return React.createElement(NestedOption<IIndentProps>, { ...props });
-  }
-);
+const _componentIndent = (props: IIndentProps) => {
+  return React.createElement(NestedOption<IIndentProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "indent",
+    },
+  });
+};
 
-const Indent: typeof _componentIndent & IElementDescriptor = Object.assign(_componentIndent, {
-  OptionName: "indent",
-})
+const Indent = Object.assign<typeof _componentIndent, NestedComponentMeta>(_componentIndent, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettings
@@ -923,15 +998,18 @@ type ILabelProps = React.PropsWithChildren<{
   overlappingBehavior?: "hide" | "none";
   topIndent?: number;
 }>
-const _componentLabel = memo(
-  (props: ILabelProps) => {
-    return React.createElement(NestedOption<ILabelProps>, { ...props });
-  }
-);
+const _componentLabel = (props: ILabelProps) => {
+  return React.createElement(NestedOption<ILabelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "label",
+    },
+  });
+};
 
-const Label: typeof _componentLabel & IElementDescriptor = Object.assign(_componentLabel, {
-  OptionName: "label",
-})
+const Label = Object.assign<typeof _componentLabel, NestedComponentMeta>(_componentLabel, {
+  componentType: "option",
+});
 
 // owners:
 // Value
@@ -946,15 +1024,18 @@ type ILengthProps = React.PropsWithChildren<{
   weeks?: number;
   years?: number;
 }>
-const _componentLength = memo(
-  (props: ILengthProps) => {
-    return React.createElement(NestedOption<ILengthProps>, { ...props });
-  }
-);
+const _componentLength = (props: ILengthProps) => {
+  return React.createElement(NestedOption<ILengthProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "length",
+    },
+  });
+};
 
-const Length: typeof _componentLength & IElementDescriptor = Object.assign(_componentLength, {
-  OptionName: "length",
-})
+const Length = Object.assign<typeof _componentLength, NestedComponentMeta>(_componentLength, {
+  componentType: "option",
+});
 
 // owners:
 // RangeSelector
@@ -967,21 +1048,24 @@ type ILoadingIndicatorProps = React.PropsWithChildren<{
   defaultShow?: boolean;
   onShowChange?: (value: boolean) => void;
 }>
-const _componentLoadingIndicator = memo(
-  (props: ILoadingIndicatorProps) => {
-    return React.createElement(NestedOption<ILoadingIndicatorProps>, { ...props });
-  }
-);
-
-const LoadingIndicator: typeof _componentLoadingIndicator & IElementDescriptor = Object.assign(_componentLoadingIndicator, {
-  OptionName: "loadingIndicator",
-  DefaultsProps: {
-    defaultShow: "show"
-  },
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false }
-  },
-})
+const _componentLoadingIndicator = (props: ILoadingIndicatorProps) => {
+  return React.createElement(NestedOption<ILoadingIndicatorProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "loadingIndicator",
+      DefaultsProps: {
+        defaultShow: "show"
+      },
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const LoadingIndicator = Object.assign<typeof _componentLoadingIndicator, NestedComponentMeta>(_componentLoadingIndicator, {
+  componentType: "option",
+});
 
 // owners:
 // RangeSelector
@@ -992,15 +1076,18 @@ type IMarginProps = React.PropsWithChildren<{
   right?: number;
   top?: number;
 }>
-const _componentMargin = memo(
-  (props: IMarginProps) => {
-    return React.createElement(NestedOption<IMarginProps>, { ...props });
-  }
-);
+const _componentMargin = (props: IMarginProps) => {
+  return React.createElement(NestedOption<IMarginProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "margin",
+    },
+  });
+};
 
-const Margin: typeof _componentMargin & IElementDescriptor = Object.assign(_componentMargin, {
-  OptionName: "margin",
-})
+const Margin = Object.assign<typeof _componentMargin, NestedComponentMeta>(_componentMargin, {
+  componentType: "option",
+});
 
 // owners:
 // Scale
@@ -1015,19 +1102,22 @@ type IMarkerProps = React.PropsWithChildren<{
   topIndent?: number;
   visible?: boolean;
 }>
-const _componentMarker = memo(
-  (props: IMarkerProps) => {
-    return React.createElement(NestedOption<IMarkerProps>, { ...props });
-  }
-);
-
-const Marker: typeof _componentMarker & IElementDescriptor = Object.assign(_componentMarker, {
-  OptionName: "marker",
-  ExpectedChildren: {
-    label: { optionName: "label", isCollectionItem: false },
-    markerLabel: { optionName: "label", isCollectionItem: false }
-  },
-})
+const _componentMarker = (props: IMarkerProps) => {
+  return React.createElement(NestedOption<IMarkerProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "marker",
+      ExpectedChildren: {
+        label: { optionName: "label", isCollectionItem: false },
+        markerLabel: { optionName: "label", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Marker = Object.assign<typeof _componentMarker, NestedComponentMeta>(_componentMarker, {
+  componentType: "option",
+});
 
 // owners:
 // Marker
@@ -1035,18 +1125,21 @@ type IMarkerLabelProps = React.PropsWithChildren<{
   customizeText?: ((markerValue: { value: Date | number, valueText: string }) => string);
   format?: LocalizationTypes.Format;
 }>
-const _componentMarkerLabel = memo(
-  (props: IMarkerLabelProps) => {
-    return React.createElement(NestedOption<IMarkerLabelProps>, { ...props });
-  }
-);
-
-const MarkerLabel: typeof _componentMarkerLabel & IElementDescriptor = Object.assign(_componentMarkerLabel, {
-  OptionName: "label",
-  ExpectedChildren: {
-    format: { optionName: "format", isCollectionItem: false }
-  },
-})
+const _componentMarkerLabel = (props: IMarkerLabelProps) => {
+  return React.createElement(NestedOption<IMarkerLabelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "label",
+      ExpectedChildren: {
+        format: { optionName: "format", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const MarkerLabel = Object.assign<typeof _componentMarkerLabel, NestedComponentMeta>(_componentMarkerLabel, {
+  componentType: "option",
+});
 
 // owners:
 // Scale
@@ -1061,15 +1154,18 @@ type IMaxRangeProps = React.PropsWithChildren<{
   weeks?: number;
   years?: number;
 }>
-const _componentMaxRange = memo(
-  (props: IMaxRangeProps) => {
-    return React.createElement(NestedOption<IMaxRangeProps>, { ...props });
-  }
-);
+const _componentMaxRange = (props: IMaxRangeProps) => {
+  return React.createElement(NestedOption<IMaxRangeProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "maxRange",
+    },
+  });
+};
 
-const MaxRange: typeof _componentMaxRange & IElementDescriptor = Object.assign(_componentMaxRange, {
-  OptionName: "maxRange",
-})
+const MaxRange = Object.assign<typeof _componentMaxRange, NestedComponentMeta>(_componentMaxRange, {
+  componentType: "option",
+});
 
 // owners:
 // Scale
@@ -1079,15 +1175,18 @@ type IMinorTickProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentMinorTick = memo(
-  (props: IMinorTickProps) => {
-    return React.createElement(NestedOption<IMinorTickProps>, { ...props });
-  }
-);
+const _componentMinorTick = (props: IMinorTickProps) => {
+  return React.createElement(NestedOption<IMinorTickProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "minorTick",
+    },
+  });
+};
 
-const MinorTick: typeof _componentMinorTick & IElementDescriptor = Object.assign(_componentMinorTick, {
-  OptionName: "minorTick",
-})
+const MinorTick = Object.assign<typeof _componentMinorTick, NestedComponentMeta>(_componentMinorTick, {
+  componentType: "option",
+});
 
 // owners:
 // Scale
@@ -1102,15 +1201,18 @@ type IMinorTickIntervalProps = React.PropsWithChildren<{
   weeks?: number;
   years?: number;
 }>
-const _componentMinorTickInterval = memo(
-  (props: IMinorTickIntervalProps) => {
-    return React.createElement(NestedOption<IMinorTickIntervalProps>, { ...props });
-  }
-);
+const _componentMinorTickInterval = (props: IMinorTickIntervalProps) => {
+  return React.createElement(NestedOption<IMinorTickIntervalProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "minorTickInterval",
+    },
+  });
+};
 
-const MinorTickInterval: typeof _componentMinorTickInterval & IElementDescriptor = Object.assign(_componentMinorTickInterval, {
-  OptionName: "minorTickInterval",
-})
+const MinorTickInterval = Object.assign<typeof _componentMinorTickInterval, NestedComponentMeta>(_componentMinorTickInterval, {
+  componentType: "option",
+});
 
 // owners:
 // Scale
@@ -1125,15 +1227,18 @@ type IMinRangeProps = React.PropsWithChildren<{
   weeks?: number;
   years?: number;
 }>
-const _componentMinRange = memo(
-  (props: IMinRangeProps) => {
-    return React.createElement(NestedOption<IMinRangeProps>, { ...props });
-  }
-);
+const _componentMinRange = (props: IMinRangeProps) => {
+  return React.createElement(NestedOption<IMinRangeProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "minRange",
+    },
+  });
+};
 
-const MinRange: typeof _componentMinRange & IElementDescriptor = Object.assign(_componentMinRange, {
-  OptionName: "minRange",
-})
+const MinRange = Object.assign<typeof _componentMinRange, NestedComponentMeta>(_componentMinRange, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettings
@@ -1182,26 +1287,29 @@ type IPointProps = React.PropsWithChildren<{
   symbol?: "circle" | "cross" | "polygon" | "square" | "triangle" | "triangleDown" | "triangleUp";
   visible?: boolean;
 }>
-const _componentPoint = memo(
-  (props: IPointProps) => {
-    return React.createElement(NestedOption<IPointProps>, { ...props });
-  }
-);
-
-const Point: typeof _componentPoint & IElementDescriptor = Object.assign(_componentPoint, {
-  OptionName: "point",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    color: { optionName: "color", isCollectionItem: false },
-    hoverStyle: { optionName: "hoverStyle", isCollectionItem: false },
-    image: { optionName: "image", isCollectionItem: false },
-    pointBorder: { optionName: "border", isCollectionItem: false },
-    pointHoverStyle: { optionName: "hoverStyle", isCollectionItem: false },
-    pointImage: { optionName: "image", isCollectionItem: false },
-    pointSelectionStyle: { optionName: "selectionStyle", isCollectionItem: false },
-    selectionStyle: { optionName: "selectionStyle", isCollectionItem: false }
-  },
-})
+const _componentPoint = (props: IPointProps) => {
+  return React.createElement(NestedOption<IPointProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "point",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        color: { optionName: "color", isCollectionItem: false },
+        hoverStyle: { optionName: "hoverStyle", isCollectionItem: false },
+        image: { optionName: "image", isCollectionItem: false },
+        pointBorder: { optionName: "border", isCollectionItem: false },
+        pointHoverStyle: { optionName: "hoverStyle", isCollectionItem: false },
+        pointImage: { optionName: "image", isCollectionItem: false },
+        pointSelectionStyle: { optionName: "selectionStyle", isCollectionItem: false },
+        selectionStyle: { optionName: "selectionStyle", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Point = Object.assign<typeof _componentPoint, NestedComponentMeta>(_componentPoint, {
+  componentType: "option",
+});
 
 // owners:
 // Point
@@ -1212,15 +1320,18 @@ type IPointBorderProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentPointBorder = memo(
-  (props: IPointBorderProps) => {
-    return React.createElement(NestedOption<IPointBorderProps>, { ...props });
-  }
-);
+const _componentPointBorder = (props: IPointBorderProps) => {
+  return React.createElement(NestedOption<IPointBorderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
 
-const PointBorder: typeof _componentPointBorder & IElementDescriptor = Object.assign(_componentPointBorder, {
-  OptionName: "border",
-})
+const PointBorder = Object.assign<typeof _componentPointBorder, NestedComponentMeta>(_componentPointBorder, {
+  componentType: "option",
+});
 
 // owners:
 // Point
@@ -1233,20 +1344,23 @@ type IPointHoverStyleProps = React.PropsWithChildren<{
   color?: ChartsColor | string;
   size?: number;
 }>
-const _componentPointHoverStyle = memo(
-  (props: IPointHoverStyleProps) => {
-    return React.createElement(NestedOption<IPointHoverStyleProps>, { ...props });
-  }
-);
-
-const PointHoverStyle: typeof _componentPointHoverStyle & IElementDescriptor = Object.assign(_componentPointHoverStyle, {
-  OptionName: "hoverStyle",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    color: { optionName: "color", isCollectionItem: false },
-    pointBorder: { optionName: "border", isCollectionItem: false }
-  },
-})
+const _componentPointHoverStyle = (props: IPointHoverStyleProps) => {
+  return React.createElement(NestedOption<IPointHoverStyleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hoverStyle",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        color: { optionName: "color", isCollectionItem: false },
+        pointBorder: { optionName: "border", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const PointHoverStyle = Object.assign<typeof _componentPointHoverStyle, NestedComponentMeta>(_componentPointHoverStyle, {
+  componentType: "option",
+});
 
 // owners:
 // Point
@@ -1264,20 +1378,23 @@ type IPointImageProps = React.PropsWithChildren<{
     rangeMinPoint?: number;
   };
 }>
-const _componentPointImage = memo(
-  (props: IPointImageProps) => {
-    return React.createElement(NestedOption<IPointImageProps>, { ...props });
-  }
-);
-
-const PointImage: typeof _componentPointImage & IElementDescriptor = Object.assign(_componentPointImage, {
-  OptionName: "image",
-  ExpectedChildren: {
-    height: { optionName: "height", isCollectionItem: false },
-    url: { optionName: "url", isCollectionItem: false },
-    width: { optionName: "width", isCollectionItem: false }
-  },
-})
+const _componentPointImage = (props: IPointImageProps) => {
+  return React.createElement(NestedOption<IPointImageProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "image",
+      ExpectedChildren: {
+        height: { optionName: "height", isCollectionItem: false },
+        url: { optionName: "url", isCollectionItem: false },
+        width: { optionName: "width", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const PointImage = Object.assign<typeof _componentPointImage, NestedComponentMeta>(_componentPointImage, {
+  componentType: "option",
+});
 
 // owners:
 // Point
@@ -1290,20 +1407,23 @@ type IPointSelectionStyleProps = React.PropsWithChildren<{
   color?: ChartsColor | string;
   size?: number;
 }>
-const _componentPointSelectionStyle = memo(
-  (props: IPointSelectionStyleProps) => {
-    return React.createElement(NestedOption<IPointSelectionStyleProps>, { ...props });
-  }
-);
-
-const PointSelectionStyle: typeof _componentPointSelectionStyle & IElementDescriptor = Object.assign(_componentPointSelectionStyle, {
-  OptionName: "selectionStyle",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    color: { optionName: "color", isCollectionItem: false },
-    pointBorder: { optionName: "border", isCollectionItem: false }
-  },
-})
+const _componentPointSelectionStyle = (props: IPointSelectionStyleProps) => {
+  return React.createElement(NestedOption<IPointSelectionStyleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "selectionStyle",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        color: { optionName: "color", isCollectionItem: false },
+        pointBorder: { optionName: "border", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const PointSelectionStyle = Object.assign<typeof _componentPointSelectionStyle, NestedComponentMeta>(_componentPointSelectionStyle, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettings
@@ -1311,15 +1431,18 @@ type IReductionProps = React.PropsWithChildren<{
   color?: string;
   level?: "close" | "high" | "low" | "open";
 }>
-const _componentReduction = memo(
-  (props: IReductionProps) => {
-    return React.createElement(NestedOption<IReductionProps>, { ...props });
-  }
-);
+const _componentReduction = (props: IReductionProps) => {
+  return React.createElement(NestedOption<IReductionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "reduction",
+    },
+  });
+};
 
-const Reduction: typeof _componentReduction & IElementDescriptor = Object.assign(_componentReduction, {
-  OptionName: "reduction",
-})
+const Reduction = Object.assign<typeof _componentReduction, NestedComponentMeta>(_componentReduction, {
+  componentType: "option",
+});
 
 // owners:
 // RangeSelector
@@ -1438,29 +1561,32 @@ type IScaleProps = React.PropsWithChildren<{
   workdaysOnly?: boolean;
   workWeek?: Array<number>;
 }>
-const _componentScale = memo(
-  (props: IScaleProps) => {
-    return React.createElement(NestedOption<IScaleProps>, { ...props });
-  }
-);
-
-const Scale: typeof _componentScale & IElementDescriptor = Object.assign(_componentScale, {
-  OptionName: "scale",
-  ExpectedChildren: {
-    aggregationInterval: { optionName: "aggregationInterval", isCollectionItem: false },
-    break: { optionName: "breaks", isCollectionItem: true },
-    breakStyle: { optionName: "breakStyle", isCollectionItem: false },
-    label: { optionName: "label", isCollectionItem: false },
-    marker: { optionName: "marker", isCollectionItem: false },
-    maxRange: { optionName: "maxRange", isCollectionItem: false },
-    minorTick: { optionName: "minorTick", isCollectionItem: false },
-    minorTickInterval: { optionName: "minorTickInterval", isCollectionItem: false },
-    minRange: { optionName: "minRange", isCollectionItem: false },
-    scaleLabel: { optionName: "label", isCollectionItem: false },
-    tick: { optionName: "tick", isCollectionItem: false },
-    tickInterval: { optionName: "tickInterval", isCollectionItem: false }
-  },
-})
+const _componentScale = (props: IScaleProps) => {
+  return React.createElement(NestedOption<IScaleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "scale",
+      ExpectedChildren: {
+        aggregationInterval: { optionName: "aggregationInterval", isCollectionItem: false },
+        break: { optionName: "breaks", isCollectionItem: true },
+        breakStyle: { optionName: "breakStyle", isCollectionItem: false },
+        label: { optionName: "label", isCollectionItem: false },
+        marker: { optionName: "marker", isCollectionItem: false },
+        maxRange: { optionName: "maxRange", isCollectionItem: false },
+        minorTick: { optionName: "minorTick", isCollectionItem: false },
+        minorTickInterval: { optionName: "minorTickInterval", isCollectionItem: false },
+        minRange: { optionName: "minRange", isCollectionItem: false },
+        scaleLabel: { optionName: "label", isCollectionItem: false },
+        tick: { optionName: "tick", isCollectionItem: false },
+        tickInterval: { optionName: "tickInterval", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Scale = Object.assign<typeof _componentScale, NestedComponentMeta>(_componentScale, {
+  componentType: "option",
+});
 
 // owners:
 // Scale
@@ -1472,19 +1598,22 @@ type IScaleLabelProps = React.PropsWithChildren<{
   topIndent?: number;
   visible?: boolean;
 }>
-const _componentScaleLabel = memo(
-  (props: IScaleLabelProps) => {
-    return React.createElement(NestedOption<IScaleLabelProps>, { ...props });
-  }
-);
-
-const ScaleLabel: typeof _componentScaleLabel & IElementDescriptor = Object.assign(_componentScaleLabel, {
-  OptionName: "label",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false },
-    format: { optionName: "format", isCollectionItem: false }
-  },
-})
+const _componentScaleLabel = (props: IScaleLabelProps) => {
+  return React.createElement(NestedOption<IScaleLabelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "label",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false },
+        format: { optionName: "format", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const ScaleLabel = Object.assign<typeof _componentScaleLabel, NestedComponentMeta>(_componentScaleLabel, {
+  componentType: "option",
+});
 
 // owners:
 // Point
@@ -1508,15 +1637,18 @@ type ISelectionStyleProps = React.PropsWithChildren<{
   highlight?: boolean;
   width?: number;
 }>
-const _componentSelectionStyle = memo(
-  (props: ISelectionStyleProps) => {
-    return React.createElement(NestedOption<ISelectionStyleProps>, { ...props });
-  }
-);
+const _componentSelectionStyle = (props: ISelectionStyleProps) => {
+  return React.createElement(NestedOption<ISelectionStyleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "selectionStyle",
+    },
+  });
+};
 
-const SelectionStyle: typeof _componentSelectionStyle & IElementDescriptor = Object.assign(_componentSelectionStyle, {
-  OptionName: "selectionStyle",
-})
+const SelectionStyle = Object.assign<typeof _componentSelectionStyle, NestedComponentMeta>(_componentSelectionStyle, {
+  componentType: "option",
+});
 
 // owners:
 // Chart
@@ -1687,16 +1819,19 @@ type ISeriesProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentSeries = memo(
-  (props: ISeriesProps) => {
-    return React.createElement(NestedOption<ISeriesProps>, { ...props });
-  }
-);
+const _componentSeries = (props: ISeriesProps) => {
+  return React.createElement(NestedOption<ISeriesProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "series",
+      IsCollectionItem: true,
+    },
+  });
+};
 
-const Series: typeof _componentSeries & IElementDescriptor = Object.assign(_componentSeries, {
-  OptionName: "series",
-  IsCollectionItem: true,
-})
+const Series = Object.assign<typeof _componentSeries, NestedComponentMeta>(_componentSeries, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettings
@@ -1709,15 +1844,18 @@ type ISeriesBorderProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentSeriesBorder = memo(
-  (props: ISeriesBorderProps) => {
-    return React.createElement(NestedOption<ISeriesBorderProps>, { ...props });
-  }
-);
+const _componentSeriesBorder = (props: ISeriesBorderProps) => {
+  return React.createElement(NestedOption<ISeriesBorderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
 
-const SeriesBorder: typeof _componentSeriesBorder & IElementDescriptor = Object.assign(_componentSeriesBorder, {
-  OptionName: "border",
-})
+const SeriesBorder = Object.assign<typeof _componentSeriesBorder, NestedComponentMeta>(_componentSeriesBorder, {
+  componentType: "option",
+});
 
 // owners:
 // Chart
@@ -1725,15 +1863,18 @@ type ISeriesTemplateProps = React.PropsWithChildren<{
   customizeSeries?: ((seriesName: any) => ChartSeries);
   nameField?: string;
 }>
-const _componentSeriesTemplate = memo(
-  (props: ISeriesTemplateProps) => {
-    return React.createElement(NestedOption<ISeriesTemplateProps>, { ...props });
-  }
-);
+const _componentSeriesTemplate = (props: ISeriesTemplateProps) => {
+  return React.createElement(NestedOption<ISeriesTemplateProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "seriesTemplate",
+    },
+  });
+};
 
-const SeriesTemplate: typeof _componentSeriesTemplate & IElementDescriptor = Object.assign(_componentSeriesTemplate, {
-  OptionName: "seriesTemplate",
-})
+const SeriesTemplate = Object.assign<typeof _componentSeriesTemplate, NestedComponentMeta>(_componentSeriesTemplate, {
+  componentType: "option",
+});
 
 // owners:
 // RangeSelector
@@ -1741,15 +1882,18 @@ type IShutterProps = React.PropsWithChildren<{
   color?: string;
   opacity?: number;
 }>
-const _componentShutter = memo(
-  (props: IShutterProps) => {
-    return React.createElement(NestedOption<IShutterProps>, { ...props });
-  }
-);
+const _componentShutter = (props: IShutterProps) => {
+  return React.createElement(NestedOption<IShutterProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "shutter",
+    },
+  });
+};
 
-const Shutter: typeof _componentShutter & IElementDescriptor = Object.assign(_componentShutter, {
-  OptionName: "shutter",
-})
+const Shutter = Object.assign<typeof _componentShutter, NestedComponentMeta>(_componentShutter, {
+  componentType: "option",
+});
 
 // owners:
 // RangeSelector
@@ -1757,15 +1901,18 @@ type ISizeProps = React.PropsWithChildren<{
   height?: number;
   width?: number;
 }>
-const _componentSize = memo(
-  (props: ISizeProps) => {
-    return React.createElement(NestedOption<ISizeProps>, { ...props });
-  }
-);
+const _componentSize = (props: ISizeProps) => {
+  return React.createElement(NestedOption<ISizeProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "size",
+    },
+  });
+};
 
-const Size: typeof _componentSize & IElementDescriptor = Object.assign(_componentSize, {
-  OptionName: "size",
-})
+const Size = Object.assign<typeof _componentSize, NestedComponentMeta>(_componentSize, {
+  componentType: "option",
+});
 
 // owners:
 // RangeSelector
@@ -1774,15 +1921,18 @@ type ISliderHandleProps = React.PropsWithChildren<{
   opacity?: number;
   width?: number;
 }>
-const _componentSliderHandle = memo(
-  (props: ISliderHandleProps) => {
-    return React.createElement(NestedOption<ISliderHandleProps>, { ...props });
-  }
-);
+const _componentSliderHandle = (props: ISliderHandleProps) => {
+  return React.createElement(NestedOption<ISliderHandleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "sliderHandle",
+    },
+  });
+};
 
-const SliderHandle: typeof _componentSliderHandle & IElementDescriptor = Object.assign(_componentSliderHandle, {
-  OptionName: "sliderHandle",
-})
+const SliderHandle = Object.assign<typeof _componentSliderHandle, NestedComponentMeta>(_componentSliderHandle, {
+  componentType: "option",
+});
 
 // owners:
 // RangeSelector
@@ -1797,19 +1947,22 @@ type ISliderMarkerProps = React.PropsWithChildren<{
   placeholderHeight?: number;
   visible?: boolean;
 }>
-const _componentSliderMarker = memo(
-  (props: ISliderMarkerProps) => {
-    return React.createElement(NestedOption<ISliderMarkerProps>, { ...props });
-  }
-);
-
-const SliderMarker: typeof _componentSliderMarker & IElementDescriptor = Object.assign(_componentSliderMarker, {
-  OptionName: "sliderMarker",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false },
-    format: { optionName: "format", isCollectionItem: false }
-  },
-})
+const _componentSliderMarker = (props: ISliderMarkerProps) => {
+  return React.createElement(NestedOption<ISliderMarkerProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "sliderMarker",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false },
+        format: { optionName: "format", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const SliderMarker = Object.assign<typeof _componentSliderMarker, NestedComponentMeta>(_componentSliderMarker, {
+  componentType: "option",
+});
 
 // owners:
 // Title
@@ -1820,18 +1973,21 @@ type ISubtitleProps = React.PropsWithChildren<{
   textOverflow?: "ellipsis" | "hide" | "none";
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentSubtitle = memo(
-  (props: ISubtitleProps) => {
-    return React.createElement(NestedOption<ISubtitleProps>, { ...props });
-  }
-);
-
-const Subtitle: typeof _componentSubtitle & IElementDescriptor = Object.assign(_componentSubtitle, {
-  OptionName: "subtitle",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false }
-  },
-})
+const _componentSubtitle = (props: ISubtitleProps) => {
+  return React.createElement(NestedOption<ISubtitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "subtitle",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Subtitle = Object.assign<typeof _componentSubtitle, NestedComponentMeta>(_componentSubtitle, {
+  componentType: "option",
+});
 
 // owners:
 // Scale
@@ -1840,15 +1996,18 @@ type ITickProps = React.PropsWithChildren<{
   opacity?: number;
   width?: number;
 }>
-const _componentTick = memo(
-  (props: ITickProps) => {
-    return React.createElement(NestedOption<ITickProps>, { ...props });
-  }
-);
+const _componentTick = (props: ITickProps) => {
+  return React.createElement(NestedOption<ITickProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "tick",
+    },
+  });
+};
 
-const Tick: typeof _componentTick & IElementDescriptor = Object.assign(_componentTick, {
-  OptionName: "tick",
-})
+const Tick = Object.assign<typeof _componentTick, NestedComponentMeta>(_componentTick, {
+  componentType: "option",
+});
 
 // owners:
 // Scale
@@ -1863,15 +2022,18 @@ type ITickIntervalProps = React.PropsWithChildren<{
   weeks?: number;
   years?: number;
 }>
-const _componentTickInterval = memo(
-  (props: ITickIntervalProps) => {
-    return React.createElement(NestedOption<ITickIntervalProps>, { ...props });
-  }
-);
+const _componentTickInterval = (props: ITickIntervalProps) => {
+  return React.createElement(NestedOption<ITickIntervalProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "tickInterval",
+    },
+  });
+};
 
-const TickInterval: typeof _componentTickInterval & IElementDescriptor = Object.assign(_componentTickInterval, {
-  OptionName: "tickInterval",
-})
+const TickInterval = Object.assign<typeof _componentTickInterval, NestedComponentMeta>(_componentTickInterval, {
+  componentType: "option",
+});
 
 // owners:
 // RangeSelector
@@ -1897,20 +2059,23 @@ type ITitleProps = React.PropsWithChildren<{
   verticalAlignment?: "bottom" | "top";
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentTitle = memo(
-  (props: ITitleProps) => {
-    return React.createElement(NestedOption<ITitleProps>, { ...props });
-  }
-);
-
-const Title: typeof _componentTitle & IElementDescriptor = Object.assign(_componentTitle, {
-  OptionName: "title",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false },
-    margin: { optionName: "margin", isCollectionItem: false },
-    subtitle: { optionName: "subtitle", isCollectionItem: false }
-  },
-})
+const _componentTitle = (props: ITitleProps) => {
+  return React.createElement(NestedOption<ITitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "title",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false },
+        margin: { optionName: "margin", isCollectionItem: false },
+        subtitle: { optionName: "subtitle", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Title = Object.assign<typeof _componentTitle, NestedComponentMeta>(_componentTitle, {
+  componentType: "option",
+});
 
 // owners:
 // PointImage
@@ -1918,15 +2083,18 @@ type IUrlProps = React.PropsWithChildren<{
   rangeMaxPoint?: string;
   rangeMinPoint?: string;
 }>
-const _componentUrl = memo(
-  (props: IUrlProps) => {
-    return React.createElement(NestedOption<IUrlProps>, { ...props });
-  }
-);
+const _componentUrl = (props: IUrlProps) => {
+  return React.createElement(NestedOption<IUrlProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "url",
+    },
+  });
+};
 
-const Url: typeof _componentUrl & IElementDescriptor = Object.assign(_componentUrl, {
-  OptionName: "url",
-})
+const Url = Object.assign<typeof _componentUrl, NestedComponentMeta>(_componentUrl, {
+  componentType: "option",
+});
 
 // owners:
 // RangeSelector
@@ -1949,22 +2117,25 @@ type IValueProps = React.PropsWithChildren<{
   defaultStartValue?: Date | number | string;
   onStartValueChange?: (value: Date | number | string) => void;
 }>
-const _componentValue = memo(
-  (props: IValueProps) => {
-    return React.createElement(NestedOption<IValueProps>, { ...props });
-  }
-);
-
-const Value: typeof _componentValue & IElementDescriptor = Object.assign(_componentValue, {
-  OptionName: "value",
-  DefaultsProps: {
-    defaultEndValue: "endValue",
-    defaultStartValue: "startValue"
-  },
-  ExpectedChildren: {
-    length: { optionName: "length", isCollectionItem: false }
-  },
-})
+const _componentValue = (props: IValueProps) => {
+  return React.createElement(NestedOption<IValueProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "value",
+      DefaultsProps: {
+        defaultEndValue: "endValue",
+        defaultStartValue: "startValue"
+      },
+      ExpectedChildren: {
+        length: { optionName: "length", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Value = Object.assign<typeof _componentValue, NestedComponentMeta>(_componentValue, {
+  componentType: "option",
+});
 
 // owners:
 // Chart
@@ -1976,15 +2147,18 @@ type IValueAxisProps = React.PropsWithChildren<{
   type?: "continuous" | "logarithmic";
   valueType?: "datetime" | "numeric" | "string";
 }>
-const _componentValueAxis = memo(
-  (props: IValueAxisProps) => {
-    return React.createElement(NestedOption<IValueAxisProps>, { ...props });
-  }
-);
+const _componentValueAxis = (props: IValueAxisProps) => {
+  return React.createElement(NestedOption<IValueAxisProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "valueAxis",
+    },
+  });
+};
 
-const ValueAxis: typeof _componentValueAxis & IElementDescriptor = Object.assign(_componentValueAxis, {
-  OptionName: "valueAxis",
-})
+const ValueAxis = Object.assign<typeof _componentValueAxis, NestedComponentMeta>(_componentValueAxis, {
+  componentType: "option",
+});
 
 // owners:
 // CommonSeriesSettings
@@ -1999,15 +2173,18 @@ type IValueErrorBarProps = React.PropsWithChildren<{
   type?: "fixed" | "percent" | "stdDeviation" | "stdError" | "variance";
   value?: number;
 }>
-const _componentValueErrorBar = memo(
-  (props: IValueErrorBarProps) => {
-    return React.createElement(NestedOption<IValueErrorBarProps>, { ...props });
-  }
-);
+const _componentValueErrorBar = (props: IValueErrorBarProps) => {
+  return React.createElement(NestedOption<IValueErrorBarProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "valueErrorBar",
+    },
+  });
+};
 
-const ValueErrorBar: typeof _componentValueErrorBar & IElementDescriptor = Object.assign(_componentValueErrorBar, {
-  OptionName: "valueErrorBar",
-})
+const ValueErrorBar = Object.assign<typeof _componentValueErrorBar, NestedComponentMeta>(_componentValueErrorBar, {
+  componentType: "option",
+});
 
 // owners:
 // PointImage
@@ -2015,15 +2192,18 @@ type IWidthProps = React.PropsWithChildren<{
   rangeMaxPoint?: number;
   rangeMinPoint?: number;
 }>
-const _componentWidth = memo(
-  (props: IWidthProps) => {
-    return React.createElement(NestedOption<IWidthProps>, { ...props });
-  }
-);
-
-const Width: typeof _componentWidth & IElementDescriptor = Object.assign(_componentWidth, {
-  OptionName: "width",
-})
+const _componentWidth = (props: IWidthProps) => {
+  return React.createElement(NestedOption<IWidthProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "width",
+    },
+  });
+};
+
+const Width = Object.assign<typeof _componentWidth, NestedComponentMeta>(_componentWidth, {
+  componentType: "option",
+});
 
 export default RangeSelector;
 export {
diff --git a/packages/devextreme-react/src/range-slider.ts b/packages/devextreme-react/src/range-slider.ts
index 54ea317d5cfd..6e0f70257613 100644
--- a/packages/devextreme-react/src/range-slider.ts
+++ b/packages/devextreme-react/src/range-slider.ts
@@ -5,7 +5,7 @@ import dxRangeSlider, {
     Properties
 } from "devextreme/ui/range_slider";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { ContentReadyEvent, DisposingEvent, InitializedEvent, ValueChangedEvent } from "devextreme/ui/range_slider";
@@ -84,15 +84,18 @@ type IFormatProps = React.PropsWithChildren<{
   type?: "billions" | "currency" | "day" | "decimal" | "exponential" | "fixedPoint" | "largeNumber" | "longDate" | "longTime" | "millions" | "millisecond" | "month" | "monthAndDay" | "monthAndYear" | "percent" | "quarter" | "quarterAndYear" | "shortDate" | "shortTime" | "thousands" | "trillions" | "year" | "dayOfWeek" | "hour" | "longDateLongTime" | "minute" | "second" | "shortDateShortTime";
   useCurrencyAccountingStyle?: boolean;
 }>
-const _componentFormat = memo(
-  (props: IFormatProps) => {
-    return React.createElement(NestedOption<IFormatProps>, { ...props });
-  }
-);
+const _componentFormat = (props: IFormatProps) => {
+  return React.createElement(NestedOption<IFormatProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "format",
+    },
+  });
+};
 
-const Format: typeof _componentFormat & IElementDescriptor = Object.assign(_componentFormat, {
-  OptionName: "format",
-})
+const Format = Object.assign<typeof _componentFormat, NestedComponentMeta>(_componentFormat, {
+  componentType: "option",
+});
 
 // owners:
 // RangeSlider
@@ -101,18 +104,21 @@ type ILabelProps = React.PropsWithChildren<{
   position?: "bottom" | "top";
   visible?: boolean;
 }>
-const _componentLabel = memo(
-  (props: ILabelProps) => {
-    return React.createElement(NestedOption<ILabelProps>, { ...props });
-  }
-);
-
-const Label: typeof _componentLabel & IElementDescriptor = Object.assign(_componentLabel, {
-  OptionName: "label",
-  ExpectedChildren: {
-    format: { optionName: "format", isCollectionItem: false }
-  },
-})
+const _componentLabel = (props: ILabelProps) => {
+  return React.createElement(NestedOption<ILabelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "label",
+      ExpectedChildren: {
+        format: { optionName: "format", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Label = Object.assign<typeof _componentLabel, NestedComponentMeta>(_componentLabel, {
+  componentType: "option",
+});
 
 // owners:
 // RangeSlider
@@ -122,18 +128,21 @@ type ITooltipProps = React.PropsWithChildren<{
   position?: "bottom" | "top";
   showMode?: "always" | "onHover";
 }>
-const _componentTooltip = memo(
-  (props: ITooltipProps) => {
-    return React.createElement(NestedOption<ITooltipProps>, { ...props });
-  }
-);
-
-const Tooltip: typeof _componentTooltip & IElementDescriptor = Object.assign(_componentTooltip, {
-  OptionName: "tooltip",
-  ExpectedChildren: {
-    format: { optionName: "format", isCollectionItem: false }
-  },
-})
+const _componentTooltip = (props: ITooltipProps) => {
+  return React.createElement(NestedOption<ITooltipProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "tooltip",
+      ExpectedChildren: {
+        format: { optionName: "format", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Tooltip = Object.assign<typeof _componentTooltip, NestedComponentMeta>(_componentTooltip, {
+  componentType: "option",
+});
 
 export default RangeSlider;
 export {
diff --git a/packages/devextreme-react/src/responsive-box.ts b/packages/devextreme-react/src/responsive-box.ts
index 7664dfa0c9b2..0609997cf4c4 100644
--- a/packages/devextreme-react/src/responsive-box.ts
+++ b/packages/devextreme-react/src/responsive-box.ts
@@ -6,7 +6,7 @@ import dxResponsiveBox, {
     Properties
 } from "devextreme/ui/responsive_box";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { dxResponsiveBoxItem, ContentReadyEvent, DisposingEvent, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent } from "devextreme/ui/responsive_box";
@@ -98,16 +98,19 @@ type IColProps = React.PropsWithChildren<{
   screen?: string;
   shrink?: number;
 }>
-const _componentCol = memo(
-  (props: IColProps) => {
-    return React.createElement(NestedOption<IColProps>, { ...props });
-  }
-);
+const _componentCol = (props: IColProps) => {
+  return React.createElement(NestedOption<IColProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "cols",
+      IsCollectionItem: true,
+    },
+  });
+};
 
-const Col: typeof _componentCol & IElementDescriptor = Object.assign(_componentCol, {
-  OptionName: "cols",
-  IsCollectionItem: true,
-})
+const Col = Object.assign<typeof _componentCol, NestedComponentMeta>(_componentCol, {
+  componentType: "option",
+});
 
 // owners:
 // ResponsiveBox
@@ -127,24 +130,27 @@ type IItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentItem = memo(
-  (props: IItemProps) => {
-    return React.createElement(NestedOption<IItemProps>, { ...props });
-  }
-);
-
-const Item: typeof _componentItem & IElementDescriptor = Object.assign(_componentItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  ExpectedChildren: {
-    location: { optionName: "location", isCollectionItem: true }
-  },
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentItem = (props: IItemProps) => {
+  return React.createElement(NestedOption<IItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      ExpectedChildren: {
+        location: { optionName: "location", isCollectionItem: true }
+      },
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const Item = Object.assign<typeof _componentItem, NestedComponentMeta>(_componentItem, {
+  componentType: "option",
+});
 
 // owners:
 // Item
@@ -155,16 +161,19 @@ type ILocationProps = React.PropsWithChildren<{
   rowspan?: number;
   screen?: string;
 }>
-const _componentLocation = memo(
-  (props: ILocationProps) => {
-    return React.createElement(NestedOption<ILocationProps>, { ...props });
-  }
-);
+const _componentLocation = (props: ILocationProps) => {
+  return React.createElement(NestedOption<ILocationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "location",
+      IsCollectionItem: true,
+    },
+  });
+};
 
-const Location: typeof _componentLocation & IElementDescriptor = Object.assign(_componentLocation, {
-  OptionName: "location",
-  IsCollectionItem: true,
-})
+const Location = Object.assign<typeof _componentLocation, NestedComponentMeta>(_componentLocation, {
+  componentType: "option",
+});
 
 // owners:
 // ResponsiveBox
@@ -174,16 +183,19 @@ type IRowProps = React.PropsWithChildren<{
   screen?: string;
   shrink?: number;
 }>
-const _componentRow = memo(
-  (props: IRowProps) => {
-    return React.createElement(NestedOption<IRowProps>, { ...props });
-  }
-);
-
-const Row: typeof _componentRow & IElementDescriptor = Object.assign(_componentRow, {
-  OptionName: "rows",
-  IsCollectionItem: true,
-})
+const _componentRow = (props: IRowProps) => {
+  return React.createElement(NestedOption<IRowProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "rows",
+      IsCollectionItem: true,
+    },
+  });
+};
+
+const Row = Object.assign<typeof _componentRow, NestedComponentMeta>(_componentRow, {
+  componentType: "option",
+});
 
 export default ResponsiveBox;
 export {
diff --git a/packages/devextreme-react/src/sankey.ts b/packages/devextreme-react/src/sankey.ts
index a92015f36faf..7f4d9df85e2e 100644
--- a/packages/devextreme-react/src/sankey.ts
+++ b/packages/devextreme-react/src/sankey.ts
@@ -5,7 +5,7 @@ import dxSankey, {
     Properties
 } from "devextreme/viz/sankey";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { DisposingEvent, DrawnEvent, ExportedEvent, ExportingEvent, FileSavingEvent, IncidentOccurredEvent, InitializedEvent, LinkClickEvent, NodeClickEvent, dxSankeyNode } from "devextreme/viz/sankey";
@@ -95,15 +95,18 @@ type IAdaptiveLayoutProps = React.PropsWithChildren<{
   keepLabels?: boolean;
   width?: number;
 }>
-const _componentAdaptiveLayout = memo(
-  (props: IAdaptiveLayoutProps) => {
-    return React.createElement(NestedOption<IAdaptiveLayoutProps>, { ...props });
-  }
-);
+const _componentAdaptiveLayout = (props: IAdaptiveLayoutProps) => {
+  return React.createElement(NestedOption<IAdaptiveLayoutProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "adaptiveLayout",
+    },
+  });
+};
 
-const AdaptiveLayout: typeof _componentAdaptiveLayout & IElementDescriptor = Object.assign(_componentAdaptiveLayout, {
-  OptionName: "adaptiveLayout",
-})
+const AdaptiveLayout = Object.assign<typeof _componentAdaptiveLayout, NestedComponentMeta>(_componentAdaptiveLayout, {
+  componentType: "option",
+});
 
 // owners:
 // Label
@@ -119,15 +122,18 @@ type IBorderProps = React.PropsWithChildren<{
   dashStyle?: "dash" | "dot" | "longDash" | "solid";
   opacity?: number;
 }>
-const _componentBorder = memo(
-  (props: IBorderProps) => {
-    return React.createElement(NestedOption<IBorderProps>, { ...props });
-  }
-);
+const _componentBorder = (props: IBorderProps) => {
+  return React.createElement(NestedOption<IBorderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
 
-const Border: typeof _componentBorder & IElementDescriptor = Object.assign(_componentBorder, {
-  OptionName: "border",
-})
+const Border = Object.assign<typeof _componentBorder, NestedComponentMeta>(_componentBorder, {
+  componentType: "option",
+});
 
 // owners:
 // Sankey
@@ -140,15 +146,18 @@ type IExportProps = React.PropsWithChildren<{
   printingEnabled?: boolean;
   svgToCanvas?: ((svg: any, canvas: any) => any);
 }>
-const _componentExport = memo(
-  (props: IExportProps) => {
-    return React.createElement(NestedOption<IExportProps>, { ...props });
-  }
-);
+const _componentExport = (props: IExportProps) => {
+  return React.createElement(NestedOption<IExportProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "export",
+    },
+  });
+};
 
-const Export: typeof _componentExport & IElementDescriptor = Object.assign(_componentExport, {
-  OptionName: "export",
-})
+const Export = Object.assign<typeof _componentExport, NestedComponentMeta>(_componentExport, {
+  componentType: "option",
+});
 
 // owners:
 // Label
@@ -163,15 +172,18 @@ type IFontProps = React.PropsWithChildren<{
   size?: number | string;
   weight?: number;
 }>
-const _componentFont = memo(
-  (props: IFontProps) => {
-    return React.createElement(NestedOption<IFontProps>, { ...props });
-  }
-);
+const _componentFont = (props: IFontProps) => {
+  return React.createElement(NestedOption<IFontProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "font",
+    },
+  });
+};
 
-const Font: typeof _componentFont & IElementDescriptor = Object.assign(_componentFont, {
-  OptionName: "font",
-})
+const Font = Object.assign<typeof _componentFont, NestedComponentMeta>(_componentFont, {
+  componentType: "option",
+});
 
 // owners:
 // Tooltip
@@ -183,15 +195,18 @@ type IFormatProps = React.PropsWithChildren<{
   type?: "billions" | "currency" | "day" | "decimal" | "exponential" | "fixedPoint" | "largeNumber" | "longDate" | "longTime" | "millions" | "millisecond" | "month" | "monthAndDay" | "monthAndYear" | "percent" | "quarter" | "quarterAndYear" | "shortDate" | "shortTime" | "thousands" | "trillions" | "year" | "dayOfWeek" | "hour" | "longDateLongTime" | "minute" | "second" | "shortDateShortTime";
   useCurrencyAccountingStyle?: boolean;
 }>
-const _componentFormat = memo(
-  (props: IFormatProps) => {
-    return React.createElement(NestedOption<IFormatProps>, { ...props });
-  }
-);
+const _componentFormat = (props: IFormatProps) => {
+  return React.createElement(NestedOption<IFormatProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "format",
+    },
+  });
+};
 
-const Format: typeof _componentFormat & IElementDescriptor = Object.assign(_componentFormat, {
-  OptionName: "format",
-})
+const Format = Object.assign<typeof _componentFormat, NestedComponentMeta>(_componentFormat, {
+  componentType: "option",
+});
 
 // owners:
 // HoverStyle
@@ -202,15 +217,18 @@ type IHatchingProps = React.PropsWithChildren<{
   step?: number;
   width?: number;
 }>
-const _componentHatching = memo(
-  (props: IHatchingProps) => {
-    return React.createElement(NestedOption<IHatchingProps>, { ...props });
-  }
-);
+const _componentHatching = (props: IHatchingProps) => {
+  return React.createElement(NestedOption<IHatchingProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hatching",
+    },
+  });
+};
 
-const Hatching: typeof _componentHatching & IElementDescriptor = Object.assign(_componentHatching, {
-  OptionName: "hatching",
-})
+const Hatching = Object.assign<typeof _componentHatching, NestedComponentMeta>(_componentHatching, {
+  componentType: "option",
+});
 
 // owners:
 // Link
@@ -230,15 +248,18 @@ type IHoverStyleProps = React.PropsWithChildren<{
   };
   opacity?: number;
 }>
-const _componentHoverStyle = memo(
-  (props: IHoverStyleProps) => {
-    return React.createElement(NestedOption<IHoverStyleProps>, { ...props });
-  }
-);
+const _componentHoverStyle = (props: IHoverStyleProps) => {
+  return React.createElement(NestedOption<IHoverStyleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hoverStyle",
+    },
+  });
+};
 
-const HoverStyle: typeof _componentHoverStyle & IElementDescriptor = Object.assign(_componentHoverStyle, {
-  OptionName: "hoverStyle",
-})
+const HoverStyle = Object.assign<typeof _componentHoverStyle, NestedComponentMeta>(_componentHoverStyle, {
+  componentType: "option",
+});
 
 // owners:
 // Sankey
@@ -263,21 +284,24 @@ type ILabelProps = React.PropsWithChildren<{
   verticalOffset?: number;
   visible?: boolean;
 }>
-const _componentLabel = memo(
-  (props: ILabelProps) => {
-    return React.createElement(NestedOption<ILabelProps>, { ...props });
-  }
-);
-
-const Label: typeof _componentLabel & IElementDescriptor = Object.assign(_componentLabel, {
-  OptionName: "label",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    font: { optionName: "font", isCollectionItem: false },
-    sankeyborder: { optionName: "border", isCollectionItem: false },
-    shadow: { optionName: "shadow", isCollectionItem: false }
-  },
-})
+const _componentLabel = (props: ILabelProps) => {
+  return React.createElement(NestedOption<ILabelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "label",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        font: { optionName: "font", isCollectionItem: false },
+        sankeyborder: { optionName: "border", isCollectionItem: false },
+        shadow: { optionName: "shadow", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Label = Object.assign<typeof _componentLabel, NestedComponentMeta>(_componentLabel, {
+  componentType: "option",
+});
 
 // owners:
 // Sankey
@@ -306,20 +330,23 @@ type ILinkProps = React.PropsWithChildren<{
   };
   opacity?: number;
 }>
-const _componentLink = memo(
-  (props: ILinkProps) => {
-    return React.createElement(NestedOption<ILinkProps>, { ...props });
-  }
-);
-
-const Link: typeof _componentLink & IElementDescriptor = Object.assign(_componentLink, {
-  OptionName: "link",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    hoverStyle: { optionName: "hoverStyle", isCollectionItem: false },
-    sankeyborder: { optionName: "border", isCollectionItem: false }
-  },
-})
+const _componentLink = (props: ILinkProps) => {
+  return React.createElement(NestedOption<ILinkProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "link",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        hoverStyle: { optionName: "hoverStyle", isCollectionItem: false },
+        sankeyborder: { optionName: "border", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Link = Object.assign<typeof _componentLink, NestedComponentMeta>(_componentLink, {
+  componentType: "option",
+});
 
 // owners:
 // Sankey
@@ -332,21 +359,24 @@ type ILoadingIndicatorProps = React.PropsWithChildren<{
   defaultShow?: boolean;
   onShowChange?: (value: boolean) => void;
 }>
-const _componentLoadingIndicator = memo(
-  (props: ILoadingIndicatorProps) => {
-    return React.createElement(NestedOption<ILoadingIndicatorProps>, { ...props });
-  }
-);
-
-const LoadingIndicator: typeof _componentLoadingIndicator & IElementDescriptor = Object.assign(_componentLoadingIndicator, {
-  OptionName: "loadingIndicator",
-  DefaultsProps: {
-    defaultShow: "show"
-  },
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false }
-  },
-})
+const _componentLoadingIndicator = (props: ILoadingIndicatorProps) => {
+  return React.createElement(NestedOption<ILoadingIndicatorProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "loadingIndicator",
+      DefaultsProps: {
+        defaultShow: "show"
+      },
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const LoadingIndicator = Object.assign<typeof _componentLoadingIndicator, NestedComponentMeta>(_componentLoadingIndicator, {
+  componentType: "option",
+});
 
 // owners:
 // Sankey
@@ -357,15 +387,18 @@ type IMarginProps = React.PropsWithChildren<{
   right?: number;
   top?: number;
 }>
-const _componentMargin = memo(
-  (props: IMarginProps) => {
-    return React.createElement(NestedOption<IMarginProps>, { ...props });
-  }
-);
+const _componentMargin = (props: IMarginProps) => {
+  return React.createElement(NestedOption<IMarginProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "margin",
+    },
+  });
+};
 
-const Margin: typeof _componentMargin & IElementDescriptor = Object.assign(_componentMargin, {
-  OptionName: "margin",
-})
+const Margin = Object.assign<typeof _componentMargin, NestedComponentMeta>(_componentMargin, {
+  componentType: "option",
+});
 
 // owners:
 // Sankey
@@ -395,20 +428,23 @@ type INodeProps = React.PropsWithChildren<{
   padding?: number;
   width?: number;
 }>
-const _componentNode = memo(
-  (props: INodeProps) => {
-    return React.createElement(NestedOption<INodeProps>, { ...props });
-  }
-);
-
-const Node: typeof _componentNode & IElementDescriptor = Object.assign(_componentNode, {
-  OptionName: "node",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    hoverStyle: { optionName: "hoverStyle", isCollectionItem: false },
-    sankeyborder: { optionName: "border", isCollectionItem: false }
-  },
-})
+const _componentNode = (props: INodeProps) => {
+  return React.createElement(NestedOption<INodeProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "node",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        hoverStyle: { optionName: "hoverStyle", isCollectionItem: false },
+        sankeyborder: { optionName: "border", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Node = Object.assign<typeof _componentNode, NestedComponentMeta>(_componentNode, {
+  componentType: "option",
+});
 
 // owners:
 // Label
@@ -421,15 +457,18 @@ type ISankeyborderProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentSankeyborder = memo(
-  (props: ISankeyborderProps) => {
-    return React.createElement(NestedOption<ISankeyborderProps>, { ...props });
-  }
-);
+const _componentSankeyborder = (props: ISankeyborderProps) => {
+  return React.createElement(NestedOption<ISankeyborderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
 
-const Sankeyborder: typeof _componentSankeyborder & IElementDescriptor = Object.assign(_componentSankeyborder, {
-  OptionName: "border",
-})
+const Sankeyborder = Object.assign<typeof _componentSankeyborder, NestedComponentMeta>(_componentSankeyborder, {
+  componentType: "option",
+});
 
 // owners:
 // Label
@@ -441,15 +480,18 @@ type IShadowProps = React.PropsWithChildren<{
   offsetY?: number;
   opacity?: number;
 }>
-const _componentShadow = memo(
-  (props: IShadowProps) => {
-    return React.createElement(NestedOption<IShadowProps>, { ...props });
-  }
-);
+const _componentShadow = (props: IShadowProps) => {
+  return React.createElement(NestedOption<IShadowProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "shadow",
+    },
+  });
+};
 
-const Shadow: typeof _componentShadow & IElementDescriptor = Object.assign(_componentShadow, {
-  OptionName: "shadow",
-})
+const Shadow = Object.assign<typeof _componentShadow, NestedComponentMeta>(_componentShadow, {
+  componentType: "option",
+});
 
 // owners:
 // Sankey
@@ -457,15 +499,18 @@ type ISizeProps = React.PropsWithChildren<{
   height?: number;
   width?: number;
 }>
-const _componentSize = memo(
-  (props: ISizeProps) => {
-    return React.createElement(NestedOption<ISizeProps>, { ...props });
-  }
-);
+const _componentSize = (props: ISizeProps) => {
+  return React.createElement(NestedOption<ISizeProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "size",
+    },
+  });
+};
 
-const Size: typeof _componentSize & IElementDescriptor = Object.assign(_componentSize, {
-  OptionName: "size",
-})
+const Size = Object.assign<typeof _componentSize, NestedComponentMeta>(_componentSize, {
+  componentType: "option",
+});
 
 // owners:
 // Title
@@ -476,18 +521,21 @@ type ISubtitleProps = React.PropsWithChildren<{
   textOverflow?: "ellipsis" | "hide" | "none";
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentSubtitle = memo(
-  (props: ISubtitleProps) => {
-    return React.createElement(NestedOption<ISubtitleProps>, { ...props });
-  }
-);
-
-const Subtitle: typeof _componentSubtitle & IElementDescriptor = Object.assign(_componentSubtitle, {
-  OptionName: "subtitle",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false }
-  },
-})
+const _componentSubtitle = (props: ISubtitleProps) => {
+  return React.createElement(NestedOption<ISubtitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "subtitle",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Subtitle = Object.assign<typeof _componentSubtitle, NestedComponentMeta>(_componentSubtitle, {
+  componentType: "option",
+});
 
 // owners:
 // Sankey
@@ -513,20 +561,23 @@ type ITitleProps = React.PropsWithChildren<{
   verticalAlignment?: "bottom" | "top";
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentTitle = memo(
-  (props: ITitleProps) => {
-    return React.createElement(NestedOption<ITitleProps>, { ...props });
-  }
-);
-
-const Title: typeof _componentTitle & IElementDescriptor = Object.assign(_componentTitle, {
-  OptionName: "title",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false },
-    margin: { optionName: "margin", isCollectionItem: false },
-    subtitle: { optionName: "subtitle", isCollectionItem: false }
-  },
-})
+const _componentTitle = (props: ITitleProps) => {
+  return React.createElement(NestedOption<ITitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "title",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false },
+        margin: { optionName: "margin", isCollectionItem: false },
+        subtitle: { optionName: "subtitle", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Title = Object.assign<typeof _componentTitle, NestedComponentMeta>(_componentTitle, {
+  componentType: "option",
+});
 
 // owners:
 // Sankey
@@ -565,31 +616,34 @@ type ITooltipProps = React.PropsWithChildren<{
   nodeTooltipRender?: (...params: any) => React.ReactNode;
   nodeTooltipComponent?: React.ComponentType<any>;
 }>
-const _componentTooltip = memo(
-  (props: ITooltipProps) => {
-    return React.createElement(NestedOption<ITooltipProps>, { ...props });
-  }
-);
-
-const Tooltip: typeof _componentTooltip & IElementDescriptor = Object.assign(_componentTooltip, {
-  OptionName: "tooltip",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    font: { optionName: "font", isCollectionItem: false },
-    format: { optionName: "format", isCollectionItem: false },
-    shadow: { optionName: "shadow", isCollectionItem: false },
-    tooltipBorder: { optionName: "border", isCollectionItem: false }
-  },
-  TemplateProps: [{
-    tmplOption: "linkTooltipTemplate",
-    render: "linkTooltipRender",
-    component: "linkTooltipComponent"
-  }, {
-    tmplOption: "nodeTooltipTemplate",
-    render: "nodeTooltipRender",
-    component: "nodeTooltipComponent"
-  }],
-})
+const _componentTooltip = (props: ITooltipProps) => {
+  return React.createElement(NestedOption<ITooltipProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "tooltip",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        font: { optionName: "font", isCollectionItem: false },
+        format: { optionName: "format", isCollectionItem: false },
+        shadow: { optionName: "shadow", isCollectionItem: false },
+        tooltipBorder: { optionName: "border", isCollectionItem: false }
+      },
+      TemplateProps: [{
+        tmplOption: "linkTooltipTemplate",
+        render: "linkTooltipRender",
+        component: "linkTooltipComponent"
+      }, {
+        tmplOption: "nodeTooltipTemplate",
+        render: "nodeTooltipRender",
+        component: "nodeTooltipComponent"
+      }],
+    },
+  });
+};
+
+const Tooltip = Object.assign<typeof _componentTooltip, NestedComponentMeta>(_componentTooltip, {
+  componentType: "option",
+});
 
 // owners:
 // Tooltip
@@ -600,15 +654,18 @@ type ITooltipBorderProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentTooltipBorder = memo(
-  (props: ITooltipBorderProps) => {
-    return React.createElement(NestedOption<ITooltipBorderProps>, { ...props });
-  }
-);
-
-const TooltipBorder: typeof _componentTooltipBorder & IElementDescriptor = Object.assign(_componentTooltipBorder, {
-  OptionName: "border",
-})
+const _componentTooltipBorder = (props: ITooltipBorderProps) => {
+  return React.createElement(NestedOption<ITooltipBorderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
+
+const TooltipBorder = Object.assign<typeof _componentTooltipBorder, NestedComponentMeta>(_componentTooltipBorder, {
+  componentType: "option",
+});
 
 export default Sankey;
 export {
diff --git a/packages/devextreme-react/src/scheduler.ts b/packages/devextreme-react/src/scheduler.ts
index 819869ef6317..e59d3801ea51 100644
--- a/packages/devextreme-react/src/scheduler.ts
+++ b/packages/devextreme-react/src/scheduler.ts
@@ -5,7 +5,7 @@ import dxScheduler, {
     Properties
 } from "devextreme/ui/scheduler";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { AppointmentAddedEvent, AppointmentAddingEvent, AppointmentClickEvent, AppointmentContextMenuEvent, AppointmentDblClickEvent, AppointmentDeletedEvent, AppointmentDeletingEvent, AppointmentFormOpeningEvent, AppointmentRenderedEvent, AppointmentTooltipShowingEvent, AppointmentUpdatedEvent, AppointmentUpdatingEvent, CellClickEvent, CellContextMenuEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, AppointmentTemplateData, AppointmentTooltipTemplateData, dxSchedulerScrolling } from "devextreme/ui/scheduler";
@@ -172,15 +172,18 @@ type IAppointmentDraggingProps = React.PropsWithChildren<{
   scrollSensitivity?: number;
   scrollSpeed?: number;
 }>
-const _componentAppointmentDragging = memo(
-  (props: IAppointmentDraggingProps) => {
-    return React.createElement(NestedOption<IAppointmentDraggingProps>, { ...props });
-  }
-);
+const _componentAppointmentDragging = (props: IAppointmentDraggingProps) => {
+  return React.createElement(NestedOption<IAppointmentDraggingProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "appointmentDragging",
+    },
+  });
+};
 
-const AppointmentDragging: typeof _componentAppointmentDragging & IElementDescriptor = Object.assign(_componentAppointmentDragging, {
-  OptionName: "appointmentDragging",
-})
+const AppointmentDragging = Object.assign<typeof _componentAppointmentDragging, NestedComponentMeta>(_componentAppointmentDragging, {
+  componentType: "option",
+});
 
 // owners:
 // Scheduler
@@ -192,15 +195,18 @@ type IEditingProps = React.PropsWithChildren<{
   allowTimeZoneEditing?: boolean;
   allowUpdating?: boolean;
 }>
-const _componentEditing = memo(
-  (props: IEditingProps) => {
-    return React.createElement(NestedOption<IEditingProps>, { ...props });
-  }
-);
+const _componentEditing = (props: IEditingProps) => {
+  return React.createElement(NestedOption<IEditingProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "editing",
+    },
+  });
+};
 
-const Editing: typeof _componentEditing & IElementDescriptor = Object.assign(_componentEditing, {
-  OptionName: "editing",
-})
+const Editing = Object.assign<typeof _componentEditing, NestedComponentMeta>(_componentEditing, {
+  componentType: "option",
+});
 
 // owners:
 // Scheduler
@@ -214,16 +220,19 @@ type IResourceProps = React.PropsWithChildren<{
   useColorAsDefault?: boolean;
   valueExpr?: (() => void) | string;
 }>
-const _componentResource = memo(
-  (props: IResourceProps) => {
-    return React.createElement(NestedOption<IResourceProps>, { ...props });
-  }
-);
+const _componentResource = (props: IResourceProps) => {
+  return React.createElement(NestedOption<IResourceProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "resources",
+      IsCollectionItem: true,
+    },
+  });
+};
 
-const Resource: typeof _componentResource & IElementDescriptor = Object.assign(_componentResource, {
-  OptionName: "resources",
-  IsCollectionItem: true,
-})
+const Resource = Object.assign<typeof _componentResource, NestedComponentMeta>(_componentResource, {
+  componentType: "option",
+});
 
 // owners:
 // Scheduler
@@ -231,15 +240,18 @@ const Resource: typeof _componentResource & IElementDescriptor = Object.assign(_
 type IScrollingProps = React.PropsWithChildren<{
   mode?: "standard" | "virtual";
 }>
-const _componentScrolling = memo(
-  (props: IScrollingProps) => {
-    return React.createElement(NestedOption<IScrollingProps>, { ...props });
-  }
-);
+const _componentScrolling = (props: IScrollingProps) => {
+  return React.createElement(NestedOption<IScrollingProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "scrolling",
+    },
+  });
+};
 
-const Scrolling: typeof _componentScrolling & IElementDescriptor = Object.assign(_componentScrolling, {
-  OptionName: "scrolling",
-})
+const Scrolling = Object.assign<typeof _componentScrolling, NestedComponentMeta>(_componentScrolling, {
+  componentType: "option",
+});
 
 // owners:
 // Scheduler
@@ -285,52 +297,55 @@ type IViewProps = React.PropsWithChildren<{
   timeCellRender?: (...params: any) => React.ReactNode;
   timeCellComponent?: React.ComponentType<any>;
 }>
-const _componentView = memo(
-  (props: IViewProps) => {
-    return React.createElement(NestedOption<IViewProps>, { ...props });
-  }
-);
+const _componentView = (props: IViewProps) => {
+  return React.createElement(NestedOption<IViewProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "views",
+      IsCollectionItem: true,
+      ExpectedChildren: {
+        scrolling: { optionName: "scrolling", isCollectionItem: false }
+      },
+      TemplateProps: [{
+        tmplOption: "appointmentCollectorTemplate",
+        render: "appointmentCollectorRender",
+        component: "appointmentCollectorComponent"
+      }, {
+        tmplOption: "appointmentTemplate",
+        render: "appointmentRender",
+        component: "appointmentComponent"
+      }, {
+        tmplOption: "appointmentTooltipTemplate",
+        render: "appointmentTooltipRender",
+        component: "appointmentTooltipComponent"
+      }, {
+        tmplOption: "dataCellTemplate",
+        render: "dataCellRender",
+        component: "dataCellComponent"
+      }, {
+        tmplOption: "dateCellTemplate",
+        render: "dateCellRender",
+        component: "dateCellComponent"
+      }, {
+        tmplOption: "dropDownAppointmentTemplate",
+        render: "dropDownAppointmentRender",
+        component: "dropDownAppointmentComponent"
+      }, {
+        tmplOption: "resourceCellTemplate",
+        render: "resourceCellRender",
+        component: "resourceCellComponent"
+      }, {
+        tmplOption: "timeCellTemplate",
+        render: "timeCellRender",
+        component: "timeCellComponent"
+      }],
+    },
+  });
+};
 
-const View: typeof _componentView & IElementDescriptor = Object.assign(_componentView, {
-  OptionName: "views",
-  IsCollectionItem: true,
-  ExpectedChildren: {
-    scrolling: { optionName: "scrolling", isCollectionItem: false }
-  },
-  TemplateProps: [{
-    tmplOption: "appointmentCollectorTemplate",
-    render: "appointmentCollectorRender",
-    component: "appointmentCollectorComponent"
-  }, {
-    tmplOption: "appointmentTemplate",
-    render: "appointmentRender",
-    component: "appointmentComponent"
-  }, {
-    tmplOption: "appointmentTooltipTemplate",
-    render: "appointmentTooltipRender",
-    component: "appointmentTooltipComponent"
-  }, {
-    tmplOption: "dataCellTemplate",
-    render: "dataCellRender",
-    component: "dataCellComponent"
-  }, {
-    tmplOption: "dateCellTemplate",
-    render: "dateCellRender",
-    component: "dateCellComponent"
-  }, {
-    tmplOption: "dropDownAppointmentTemplate",
-    render: "dropDownAppointmentRender",
-    component: "dropDownAppointmentComponent"
-  }, {
-    tmplOption: "resourceCellTemplate",
-    render: "resourceCellRender",
-    component: "resourceCellComponent"
-  }, {
-    tmplOption: "timeCellTemplate",
-    render: "timeCellRender",
-    component: "timeCellComponent"
-  }],
-})
+const View = Object.assign<typeof _componentView, NestedComponentMeta>(_componentView, {
+  componentType: "option",
+});
 
 export default Scheduler;
 export {
diff --git a/packages/devextreme-react/src/select-box.ts b/packages/devextreme-react/src/select-box.ts
index 424cc5ebf226..3a6dcb582c4b 100644
--- a/packages/devextreme-react/src/select-box.ts
+++ b/packages/devextreme-react/src/select-box.ts
@@ -5,7 +5,7 @@ import dxSelectBox, {
     Properties
 } from "devextreme/ui/select_box";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { ChangeEvent, ClosedEvent, ContentReadyEvent, CopyEvent, CustomItemCreatingEvent, CutEvent, DisposingEvent, EnterKeyEvent, FocusInEvent, FocusOutEvent, InitializedEvent, InputEvent, ItemClickEvent, KeyDownEvent, KeyUpEvent, OpenedEvent, PasteEvent, ValueChangedEvent } from "devextreme/ui/select_box";
@@ -139,19 +139,22 @@ type IAnimationProps = React.PropsWithChildren<{
   hide?: AnimationConfig;
   show?: AnimationConfig;
 }>
-const _componentAnimation = memo(
-  (props: IAnimationProps) => {
-    return React.createElement(NestedOption<IAnimationProps>, { ...props });
-  }
-);
-
-const Animation: typeof _componentAnimation & IElementDescriptor = Object.assign(_componentAnimation, {
-  OptionName: "animation",
-  ExpectedChildren: {
-    hide: { optionName: "hide", isCollectionItem: false },
-    show: { optionName: "show", isCollectionItem: false }
-  },
-})
+const _componentAnimation = (props: IAnimationProps) => {
+  return React.createElement(NestedOption<IAnimationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "animation",
+      ExpectedChildren: {
+        hide: { optionName: "hide", isCollectionItem: false },
+        show: { optionName: "show", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Animation = Object.assign<typeof _componentAnimation, NestedComponentMeta>(_componentAnimation, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -159,15 +162,18 @@ type IAtProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentAt = memo(
-  (props: IAtProps) => {
-    return React.createElement(NestedOption<IAtProps>, { ...props });
-  }
-);
+const _componentAt = (props: IAtProps) => {
+  return React.createElement(NestedOption<IAtProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "at",
+    },
+  });
+};
 
-const At: typeof _componentAt & IElementDescriptor = Object.assign(_componentAt, {
-  OptionName: "at",
-})
+const At = Object.assign<typeof _componentAt, NestedComponentMeta>(_componentAt, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -175,15 +181,18 @@ type IBoundaryOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentBoundaryOffset = memo(
-  (props: IBoundaryOffsetProps) => {
-    return React.createElement(NestedOption<IBoundaryOffsetProps>, { ...props });
-  }
-);
+const _componentBoundaryOffset = (props: IBoundaryOffsetProps) => {
+  return React.createElement(NestedOption<IBoundaryOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "boundaryOffset",
+    },
+  });
+};
 
-const BoundaryOffset: typeof _componentBoundaryOffset & IElementDescriptor = Object.assign(_componentBoundaryOffset, {
-  OptionName: "boundaryOffset",
-})
+const BoundaryOffset = Object.assign<typeof _componentBoundaryOffset, NestedComponentMeta>(_componentBoundaryOffset, {
+  componentType: "option",
+});
 
 // owners:
 // SelectBox
@@ -192,19 +201,22 @@ type IButtonProps = React.PropsWithChildren<{
   name?: string;
   options?: dxButtonOptions;
 }>
-const _componentButton = memo(
-  (props: IButtonProps) => {
-    return React.createElement(NestedOption<IButtonProps>, { ...props });
-  }
-);
-
-const Button: typeof _componentButton & IElementDescriptor = Object.assign(_componentButton, {
-  OptionName: "buttons",
-  IsCollectionItem: true,
-  ExpectedChildren: {
-    options: { optionName: "options", isCollectionItem: false }
-  },
-})
+const _componentButton = (props: IButtonProps) => {
+  return React.createElement(NestedOption<IButtonProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "buttons",
+      IsCollectionItem: true,
+      ExpectedChildren: {
+        options: { optionName: "options", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Button = Object.assign<typeof _componentButton, NestedComponentMeta>(_componentButton, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -212,15 +224,18 @@ type ICollisionProps = React.PropsWithChildren<{
   x?: "fit" | "flip" | "flipfit" | "none";
   y?: "fit" | "flip" | "flipfit" | "none";
 }>
-const _componentCollision = memo(
-  (props: ICollisionProps) => {
-    return React.createElement(NestedOption<ICollisionProps>, { ...props });
-  }
-);
+const _componentCollision = (props: ICollisionProps) => {
+  return React.createElement(NestedOption<ICollisionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "collision",
+    },
+  });
+};
 
-const Collision: typeof _componentCollision & IElementDescriptor = Object.assign(_componentCollision, {
-  OptionName: "collision",
-})
+const Collision = Object.assign<typeof _componentCollision, NestedComponentMeta>(_componentCollision, {
+  componentType: "option",
+});
 
 // owners:
 // SelectBox
@@ -291,35 +306,38 @@ type IDropDownOptionsProps = React.PropsWithChildren<{
   titleRender?: (...params: any) => React.ReactNode;
   titleComponent?: React.ComponentType<any>;
 }>
-const _componentDropDownOptions = memo(
-  (props: IDropDownOptionsProps) => {
-    return React.createElement(NestedOption<IDropDownOptionsProps>, { ...props });
-  }
-);
-
-const DropDownOptions: typeof _componentDropDownOptions & IElementDescriptor = Object.assign(_componentDropDownOptions, {
-  OptionName: "dropDownOptions",
-  DefaultsProps: {
-    defaultHeight: "height",
-    defaultPosition: "position",
-    defaultVisible: "visible",
-    defaultWidth: "width"
-  },
-  ExpectedChildren: {
-    animation: { optionName: "animation", isCollectionItem: false },
-    position: { optionName: "position", isCollectionItem: false },
-    toolbarItem: { optionName: "toolbarItems", isCollectionItem: true }
-  },
-  TemplateProps: [{
-    tmplOption: "contentTemplate",
-    render: "contentRender",
-    component: "contentComponent"
-  }, {
-    tmplOption: "titleTemplate",
-    render: "titleRender",
-    component: "titleComponent"
-  }],
-})
+const _componentDropDownOptions = (props: IDropDownOptionsProps) => {
+  return React.createElement(NestedOption<IDropDownOptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "dropDownOptions",
+      DefaultsProps: {
+        defaultHeight: "height",
+        defaultPosition: "position",
+        defaultVisible: "visible",
+        defaultWidth: "width"
+      },
+      ExpectedChildren: {
+        animation: { optionName: "animation", isCollectionItem: false },
+        position: { optionName: "position", isCollectionItem: false },
+        toolbarItem: { optionName: "toolbarItems", isCollectionItem: true }
+      },
+      TemplateProps: [{
+        tmplOption: "contentTemplate",
+        render: "contentRender",
+        component: "contentComponent"
+      }, {
+        tmplOption: "titleTemplate",
+        render: "titleRender",
+        component: "titleComponent"
+      }],
+    },
+  });
+};
+
+const DropDownOptions = Object.assign<typeof _componentDropDownOptions, NestedComponentMeta>(_componentDropDownOptions, {
+  componentType: "option",
+});
 
 // owners:
 // Hide
@@ -330,18 +348,21 @@ type IFromProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentFrom = memo(
-  (props: IFromProps) => {
-    return React.createElement(NestedOption<IFromProps>, { ...props });
-  }
-);
-
-const From: typeof _componentFrom & IElementDescriptor = Object.assign(_componentFrom, {
-  OptionName: "from",
-  ExpectedChildren: {
-    position: { optionName: "position", isCollectionItem: false }
-  },
-})
+const _componentFrom = (props: IFromProps) => {
+  return React.createElement(NestedOption<IFromProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "from",
+      ExpectedChildren: {
+        position: { optionName: "position", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const From = Object.assign<typeof _componentFrom, NestedComponentMeta>(_componentFrom, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -357,19 +378,22 @@ type IHideProps = React.PropsWithChildren<{
   to?: AnimationState;
   type?: "css" | "fade" | "fadeIn" | "fadeOut" | "pop" | "slide" | "slideIn" | "slideOut";
 }>
-const _componentHide = memo(
-  (props: IHideProps) => {
-    return React.createElement(NestedOption<IHideProps>, { ...props });
-  }
-);
-
-const Hide: typeof _componentHide & IElementDescriptor = Object.assign(_componentHide, {
-  OptionName: "hide",
-  ExpectedChildren: {
-    from: { optionName: "from", isCollectionItem: false },
-    to: { optionName: "to", isCollectionItem: false }
-  },
-})
+const _componentHide = (props: IHideProps) => {
+  return React.createElement(NestedOption<IHideProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hide",
+      ExpectedChildren: {
+        from: { optionName: "from", isCollectionItem: false },
+        to: { optionName: "to", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Hide = Object.assign<typeof _componentHide, NestedComponentMeta>(_componentHide, {
+  componentType: "option",
+});
 
 // owners:
 // SelectBox
@@ -382,21 +406,24 @@ type IItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentItem = memo(
-  (props: IItemProps) => {
-    return React.createElement(NestedOption<IItemProps>, { ...props });
-  }
-);
-
-const Item: typeof _componentItem & IElementDescriptor = Object.assign(_componentItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentItem = (props: IItemProps) => {
+  return React.createElement(NestedOption<IItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const Item = Object.assign<typeof _componentItem, NestedComponentMeta>(_componentItem, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -404,15 +431,18 @@ type IMyProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentMy = memo(
-  (props: IMyProps) => {
-    return React.createElement(NestedOption<IMyProps>, { ...props });
-  }
-);
+const _componentMy = (props: IMyProps) => {
+  return React.createElement(NestedOption<IMyProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "my",
+    },
+  });
+};
 
-const My: typeof _componentMy & IElementDescriptor = Object.assign(_componentMy, {
-  OptionName: "my",
-})
+const My = Object.assign<typeof _componentMy, NestedComponentMeta>(_componentMy, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -420,15 +450,18 @@ type IOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentOffset = memo(
-  (props: IOffsetProps) => {
-    return React.createElement(NestedOption<IOffsetProps>, { ...props });
-  }
-);
+const _componentOffset = (props: IOffsetProps) => {
+  return React.createElement(NestedOption<IOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "offset",
+    },
+  });
+};
 
-const Offset: typeof _componentOffset & IElementDescriptor = Object.assign(_componentOffset, {
-  OptionName: "offset",
-})
+const Offset = Object.assign<typeof _componentOffset, NestedComponentMeta>(_componentOffset, {
+  componentType: "option",
+});
 
 // owners:
 // Button
@@ -461,20 +494,23 @@ type IOptionsProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentOptions = memo(
-  (props: IOptionsProps) => {
-    return React.createElement(NestedOption<IOptionsProps>, { ...props });
-  }
-);
-
-const Options: typeof _componentOptions & IElementDescriptor = Object.assign(_componentOptions, {
-  OptionName: "options",
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentOptions = (props: IOptionsProps) => {
+  return React.createElement(NestedOption<IOptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "options",
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const Options = Object.assign<typeof _componentOptions, NestedComponentMeta>(_componentOptions, {
+  componentType: "option",
+});
 
 // owners:
 // From
@@ -503,15 +539,18 @@ type IPositionProps = React.PropsWithChildren<{
     y?: number;
   };
 }>
-const _componentPosition = memo(
-  (props: IPositionProps) => {
-    return React.createElement(NestedOption<IPositionProps>, { ...props });
-  }
-);
+const _componentPosition = (props: IPositionProps) => {
+  return React.createElement(NestedOption<IPositionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "position",
+    },
+  });
+};
 
-const Position: typeof _componentPosition & IElementDescriptor = Object.assign(_componentPosition, {
-  OptionName: "position",
-})
+const Position = Object.assign<typeof _componentPosition, NestedComponentMeta>(_componentPosition, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -527,15 +566,18 @@ type IShowProps = React.PropsWithChildren<{
   to?: AnimationState;
   type?: "css" | "fade" | "fadeIn" | "fadeOut" | "pop" | "slide" | "slideIn" | "slideOut";
 }>
-const _componentShow = memo(
-  (props: IShowProps) => {
-    return React.createElement(NestedOption<IShowProps>, { ...props });
-  }
-);
+const _componentShow = (props: IShowProps) => {
+  return React.createElement(NestedOption<IShowProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "show",
+    },
+  });
+};
 
-const Show: typeof _componentShow & IElementDescriptor = Object.assign(_componentShow, {
-  OptionName: "show",
-})
+const Show = Object.assign<typeof _componentShow, NestedComponentMeta>(_componentShow, {
+  componentType: "option",
+});
 
 // owners:
 // Hide
@@ -546,15 +588,18 @@ type IToProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentTo = memo(
-  (props: IToProps) => {
-    return React.createElement(NestedOption<IToProps>, { ...props });
-  }
-);
+const _componentTo = (props: IToProps) => {
+  return React.createElement(NestedOption<IToProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "to",
+    },
+  });
+};
 
-const To: typeof _componentTo & IElementDescriptor = Object.assign(_componentTo, {
-  OptionName: "to",
-})
+const To = Object.assign<typeof _componentTo, NestedComponentMeta>(_componentTo, {
+  componentType: "option",
+});
 
 // owners:
 // DropDownOptions
@@ -577,25 +622,28 @@ type IToolbarItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentToolbarItem = memo(
-  (props: IToolbarItemProps) => {
-    return React.createElement(NestedOption<IToolbarItemProps>, { ...props });
-  }
-);
-
-const ToolbarItem: typeof _componentToolbarItem & IElementDescriptor = Object.assign(_componentToolbarItem, {
-  OptionName: "toolbarItems",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "menuItemTemplate",
-    render: "menuItemRender",
-    component: "menuItemComponent"
-  }, {
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentToolbarItem = (props: IToolbarItemProps) => {
+  return React.createElement(NestedOption<IToolbarItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "toolbarItems",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "menuItemTemplate",
+        render: "menuItemRender",
+        component: "menuItemComponent"
+      }, {
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const ToolbarItem = Object.assign<typeof _componentToolbarItem, NestedComponentMeta>(_componentToolbarItem, {
+  componentType: "option",
+});
 
 export default SelectBox;
 export {
diff --git a/packages/devextreme-react/src/slider.ts b/packages/devextreme-react/src/slider.ts
index 2942bd6ddb29..107b13d6f719 100644
--- a/packages/devextreme-react/src/slider.ts
+++ b/packages/devextreme-react/src/slider.ts
@@ -5,7 +5,7 @@ import dxSlider, {
     Properties
 } from "devextreme/ui/slider";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { ContentReadyEvent, DisposingEvent, InitializedEvent, ValueChangedEvent } from "devextreme/ui/slider";
@@ -84,15 +84,18 @@ type IFormatProps = React.PropsWithChildren<{
   type?: "billions" | "currency" | "day" | "decimal" | "exponential" | "fixedPoint" | "largeNumber" | "longDate" | "longTime" | "millions" | "millisecond" | "month" | "monthAndDay" | "monthAndYear" | "percent" | "quarter" | "quarterAndYear" | "shortDate" | "shortTime" | "thousands" | "trillions" | "year" | "dayOfWeek" | "hour" | "longDateLongTime" | "minute" | "second" | "shortDateShortTime";
   useCurrencyAccountingStyle?: boolean;
 }>
-const _componentFormat = memo(
-  (props: IFormatProps) => {
-    return React.createElement(NestedOption<IFormatProps>, { ...props });
-  }
-);
+const _componentFormat = (props: IFormatProps) => {
+  return React.createElement(NestedOption<IFormatProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "format",
+    },
+  });
+};
 
-const Format: typeof _componentFormat & IElementDescriptor = Object.assign(_componentFormat, {
-  OptionName: "format",
-})
+const Format = Object.assign<typeof _componentFormat, NestedComponentMeta>(_componentFormat, {
+  componentType: "option",
+});
 
 // owners:
 // Slider
@@ -101,18 +104,21 @@ type ILabelProps = React.PropsWithChildren<{
   position?: "bottom" | "top";
   visible?: boolean;
 }>
-const _componentLabel = memo(
-  (props: ILabelProps) => {
-    return React.createElement(NestedOption<ILabelProps>, { ...props });
-  }
-);
-
-const Label: typeof _componentLabel & IElementDescriptor = Object.assign(_componentLabel, {
-  OptionName: "label",
-  ExpectedChildren: {
-    format: { optionName: "format", isCollectionItem: false }
-  },
-})
+const _componentLabel = (props: ILabelProps) => {
+  return React.createElement(NestedOption<ILabelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "label",
+      ExpectedChildren: {
+        format: { optionName: "format", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Label = Object.assign<typeof _componentLabel, NestedComponentMeta>(_componentLabel, {
+  componentType: "option",
+});
 
 // owners:
 // Slider
@@ -122,18 +128,21 @@ type ITooltipProps = React.PropsWithChildren<{
   position?: "bottom" | "top";
   showMode?: "always" | "onHover";
 }>
-const _componentTooltip = memo(
-  (props: ITooltipProps) => {
-    return React.createElement(NestedOption<ITooltipProps>, { ...props });
-  }
-);
-
-const Tooltip: typeof _componentTooltip & IElementDescriptor = Object.assign(_componentTooltip, {
-  OptionName: "tooltip",
-  ExpectedChildren: {
-    format: { optionName: "format", isCollectionItem: false }
-  },
-})
+const _componentTooltip = (props: ITooltipProps) => {
+  return React.createElement(NestedOption<ITooltipProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "tooltip",
+      ExpectedChildren: {
+        format: { optionName: "format", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Tooltip = Object.assign<typeof _componentTooltip, NestedComponentMeta>(_componentTooltip, {
+  componentType: "option",
+});
 
 export default Slider;
 export {
diff --git a/packages/devextreme-react/src/sortable.ts b/packages/devextreme-react/src/sortable.ts
index 5da7fe9e49a7..5b871e824485 100644
--- a/packages/devextreme-react/src/sortable.ts
+++ b/packages/devextreme-react/src/sortable.ts
@@ -5,7 +5,7 @@ import dxSortable, {
     Properties
 } from "devextreme/ui/sortable";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { AddEvent, DisposingEvent, DragChangeEvent, DragEndEvent, DragMoveEvent, DragStartEvent, InitializedEvent, RemoveEvent, ReorderEvent } from "devextreme/ui/sortable";
@@ -83,15 +83,18 @@ type ICursorOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentCursorOffset = memo(
-  (props: ICursorOffsetProps) => {
-    return React.createElement(NestedOption<ICursorOffsetProps>, { ...props });
-  }
-);
-
-const CursorOffset: typeof _componentCursorOffset & IElementDescriptor = Object.assign(_componentCursorOffset, {
-  OptionName: "cursorOffset",
-})
+const _componentCursorOffset = (props: ICursorOffsetProps) => {
+  return React.createElement(NestedOption<ICursorOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "cursorOffset",
+    },
+  });
+};
+
+const CursorOffset = Object.assign<typeof _componentCursorOffset, NestedComponentMeta>(_componentCursorOffset, {
+  componentType: "option",
+});
 
 export default Sortable;
 export {
diff --git a/packages/devextreme-react/src/sparkline.ts b/packages/devextreme-react/src/sparkline.ts
index 8b3199ff7108..7231af6c7436 100644
--- a/packages/devextreme-react/src/sparkline.ts
+++ b/packages/devextreme-react/src/sparkline.ts
@@ -5,7 +5,7 @@ import dxSparkline, {
     Properties
 } from "devextreme/viz/sparkline";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { DisposingEvent, DrawnEvent, ExportedEvent, ExportingEvent, FileSavingEvent, IncidentOccurredEvent, InitializedEvent, TooltipHiddenEvent, TooltipShownEvent } from "devextreme/viz/sparkline";
@@ -80,15 +80,18 @@ type IBorderProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentBorder = memo(
-  (props: IBorderProps) => {
-    return React.createElement(NestedOption<IBorderProps>, { ...props });
-  }
-);
+const _componentBorder = (props: IBorderProps) => {
+  return React.createElement(NestedOption<IBorderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
 
-const Border: typeof _componentBorder & IElementDescriptor = Object.assign(_componentBorder, {
-  OptionName: "border",
-})
+const Border = Object.assign<typeof _componentBorder, NestedComponentMeta>(_componentBorder, {
+  componentType: "option",
+});
 
 // owners:
 // Tooltip
@@ -99,15 +102,18 @@ type IFontProps = React.PropsWithChildren<{
   size?: number | string;
   weight?: number;
 }>
-const _componentFont = memo(
-  (props: IFontProps) => {
-    return React.createElement(NestedOption<IFontProps>, { ...props });
-  }
-);
+const _componentFont = (props: IFontProps) => {
+  return React.createElement(NestedOption<IFontProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "font",
+    },
+  });
+};
 
-const Font: typeof _componentFont & IElementDescriptor = Object.assign(_componentFont, {
-  OptionName: "font",
-})
+const Font = Object.assign<typeof _componentFont, NestedComponentMeta>(_componentFont, {
+  componentType: "option",
+});
 
 // owners:
 // Tooltip
@@ -119,15 +125,18 @@ type IFormatProps = React.PropsWithChildren<{
   type?: "billions" | "currency" | "day" | "decimal" | "exponential" | "fixedPoint" | "largeNumber" | "longDate" | "longTime" | "millions" | "millisecond" | "month" | "monthAndDay" | "monthAndYear" | "percent" | "quarter" | "quarterAndYear" | "shortDate" | "shortTime" | "thousands" | "trillions" | "year" | "dayOfWeek" | "hour" | "longDateLongTime" | "minute" | "second" | "shortDateShortTime";
   useCurrencyAccountingStyle?: boolean;
 }>
-const _componentFormat = memo(
-  (props: IFormatProps) => {
-    return React.createElement(NestedOption<IFormatProps>, { ...props });
-  }
-);
+const _componentFormat = (props: IFormatProps) => {
+  return React.createElement(NestedOption<IFormatProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "format",
+    },
+  });
+};
 
-const Format: typeof _componentFormat & IElementDescriptor = Object.assign(_componentFormat, {
-  OptionName: "format",
-})
+const Format = Object.assign<typeof _componentFormat, NestedComponentMeta>(_componentFormat, {
+  componentType: "option",
+});
 
 // owners:
 // Sparkline
@@ -137,15 +146,18 @@ type IMarginProps = React.PropsWithChildren<{
   right?: number;
   top?: number;
 }>
-const _componentMargin = memo(
-  (props: IMarginProps) => {
-    return React.createElement(NestedOption<IMarginProps>, { ...props });
-  }
-);
+const _componentMargin = (props: IMarginProps) => {
+  return React.createElement(NestedOption<IMarginProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "margin",
+    },
+  });
+};
 
-const Margin: typeof _componentMargin & IElementDescriptor = Object.assign(_componentMargin, {
-  OptionName: "margin",
-})
+const Margin = Object.assign<typeof _componentMargin, NestedComponentMeta>(_componentMargin, {
+  componentType: "option",
+});
 
 // owners:
 // Tooltip
@@ -156,15 +168,18 @@ type IShadowProps = React.PropsWithChildren<{
   offsetY?: number;
   opacity?: number;
 }>
-const _componentShadow = memo(
-  (props: IShadowProps) => {
-    return React.createElement(NestedOption<IShadowProps>, { ...props });
-  }
-);
+const _componentShadow = (props: IShadowProps) => {
+  return React.createElement(NestedOption<IShadowProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "shadow",
+    },
+  });
+};
 
-const Shadow: typeof _componentShadow & IElementDescriptor = Object.assign(_componentShadow, {
-  OptionName: "shadow",
-})
+const Shadow = Object.assign<typeof _componentShadow, NestedComponentMeta>(_componentShadow, {
+  componentType: "option",
+});
 
 // owners:
 // Sparkline
@@ -172,15 +187,18 @@ type ISizeProps = React.PropsWithChildren<{
   height?: number;
   width?: number;
 }>
-const _componentSize = memo(
-  (props: ISizeProps) => {
-    return React.createElement(NestedOption<ISizeProps>, { ...props });
-  }
-);
+const _componentSize = (props: ISizeProps) => {
+  return React.createElement(NestedOption<ISizeProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "size",
+    },
+  });
+};
 
-const Size: typeof _componentSize & IElementDescriptor = Object.assign(_componentSize, {
-  OptionName: "size",
-})
+const Size = Object.assign<typeof _componentSize, NestedComponentMeta>(_componentSize, {
+  componentType: "option",
+});
 
 // owners:
 // Sparkline
@@ -216,26 +234,29 @@ type ITooltipProps = React.PropsWithChildren<{
   contentRender?: (...params: any) => React.ReactNode;
   contentComponent?: React.ComponentType<any>;
 }>
-const _componentTooltip = memo(
-  (props: ITooltipProps) => {
-    return React.createElement(NestedOption<ITooltipProps>, { ...props });
-  }
-);
+const _componentTooltip = (props: ITooltipProps) => {
+  return React.createElement(NestedOption<ITooltipProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "tooltip",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        font: { optionName: "font", isCollectionItem: false },
+        format: { optionName: "format", isCollectionItem: false },
+        shadow: { optionName: "shadow", isCollectionItem: false }
+      },
+      TemplateProps: [{
+        tmplOption: "contentTemplate",
+        render: "contentRender",
+        component: "contentComponent"
+      }],
+    },
+  });
+};
 
-const Tooltip: typeof _componentTooltip & IElementDescriptor = Object.assign(_componentTooltip, {
-  OptionName: "tooltip",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    font: { optionName: "font", isCollectionItem: false },
-    format: { optionName: "format", isCollectionItem: false },
-    shadow: { optionName: "shadow", isCollectionItem: false }
-  },
-  TemplateProps: [{
-    tmplOption: "contentTemplate",
-    render: "contentRender",
-    component: "contentComponent"
-  }],
-})
+const Tooltip = Object.assign<typeof _componentTooltip, NestedComponentMeta>(_componentTooltip, {
+  componentType: "option",
+});
 
 export default Sparkline;
 export {
diff --git a/packages/devextreme-react/src/splitter.ts b/packages/devextreme-react/src/splitter.ts
index 602b1232f562..87832f1187a3 100644
--- a/packages/devextreme-react/src/splitter.ts
+++ b/packages/devextreme-react/src/splitter.ts
@@ -6,7 +6,7 @@ import dxSplitter, {
     Properties
 } from "devextreme/ui/splitter";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { dxSplitterItem, ContentReadyEvent, DisposingEvent, InitializedEvent, ItemClickEvent, ItemCollapsedEvent, ItemContextMenuEvent, ItemExpandedEvent, ItemRenderedEvent, ResizeEvent, ResizeEndEvent, ResizeStartEvent, dxSplitterOptions } from "devextreme/ui/splitter";
@@ -109,21 +109,24 @@ type IItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentItem = memo(
-  (props: IItemProps) => {
-    return React.createElement(NestedOption<IItemProps>, { ...props });
-  }
-);
-
-const Item: typeof _componentItem & IElementDescriptor = Object.assign(_componentItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentItem = (props: IItemProps) => {
+  return React.createElement(NestedOption<IItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const Item = Object.assign<typeof _componentItem, NestedComponentMeta>(_componentItem, {
+  componentType: "option",
+});
 
 export default Splitter;
 export {
diff --git a/packages/devextreme-react/src/tab-panel.ts b/packages/devextreme-react/src/tab-panel.ts
index 05da7d931d25..4164d1fcb4a4 100644
--- a/packages/devextreme-react/src/tab-panel.ts
+++ b/packages/devextreme-react/src/tab-panel.ts
@@ -6,7 +6,7 @@ import dxTabPanel, {
     Properties
 } from "devextreme/ui/tab_panel";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { dxTabPanelItem, ContentReadyEvent, DisposingEvent, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent, SelectionChangingEvent, TitleClickEvent, TitleHoldEvent, TitleRenderedEvent } from "devextreme/ui/tab_panel";
@@ -122,25 +122,28 @@ type IItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentItem = memo(
-  (props: IItemProps) => {
-    return React.createElement(NestedOption<IItemProps>, { ...props });
-  }
-);
-
-const Item: typeof _componentItem & IElementDescriptor = Object.assign(_componentItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "tabTemplate",
-    render: "tabRender",
-    component: "tabComponent"
-  }, {
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentItem = (props: IItemProps) => {
+  return React.createElement(NestedOption<IItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "tabTemplate",
+        render: "tabRender",
+        component: "tabComponent"
+      }, {
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const Item = Object.assign<typeof _componentItem, NestedComponentMeta>(_componentItem, {
+  componentType: "option",
+});
 
 export default TabPanel;
 export {
diff --git a/packages/devextreme-react/src/tabs.ts b/packages/devextreme-react/src/tabs.ts
index 2266296b530e..d6d6ef54cdf1 100644
--- a/packages/devextreme-react/src/tabs.ts
+++ b/packages/devextreme-react/src/tabs.ts
@@ -6,7 +6,7 @@ import dxTabs, {
     Properties
 } from "devextreme/ui/tabs";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { dxTabsItem, ContentReadyEvent, DisposingEvent, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent, SelectionChangingEvent } from "devextreme/ui/tabs";
@@ -114,21 +114,24 @@ type IItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentItem = memo(
-  (props: IItemProps) => {
-    return React.createElement(NestedOption<IItemProps>, { ...props });
-  }
-);
-
-const Item: typeof _componentItem & IElementDescriptor = Object.assign(_componentItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentItem = (props: IItemProps) => {
+  return React.createElement(NestedOption<IItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const Item = Object.assign<typeof _componentItem, NestedComponentMeta>(_componentItem, {
+  componentType: "option",
+});
 
 export default Tabs;
 export {
diff --git a/packages/devextreme-react/src/tag-box.ts b/packages/devextreme-react/src/tag-box.ts
index f55e2a8e3b18..68f19fc1dc2f 100644
--- a/packages/devextreme-react/src/tag-box.ts
+++ b/packages/devextreme-react/src/tag-box.ts
@@ -5,7 +5,7 @@ import dxTagBox, {
     Properties
 } from "devextreme/ui/tag_box";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { ChangeEvent, ClosedEvent, ContentReadyEvent, CustomItemCreatingEvent, DisposingEvent, EnterKeyEvent, FocusInEvent, FocusOutEvent, InitializedEvent, InputEvent, ItemClickEvent, KeyDownEvent, KeyUpEvent, MultiTagPreparingEvent, OpenedEvent, SelectAllValueChangedEvent, ValueChangedEvent } from "devextreme/ui/tag_box";
@@ -145,19 +145,22 @@ type IAnimationProps = React.PropsWithChildren<{
   hide?: AnimationConfig;
   show?: AnimationConfig;
 }>
-const _componentAnimation = memo(
-  (props: IAnimationProps) => {
-    return React.createElement(NestedOption<IAnimationProps>, { ...props });
-  }
-);
-
-const Animation: typeof _componentAnimation & IElementDescriptor = Object.assign(_componentAnimation, {
-  OptionName: "animation",
-  ExpectedChildren: {
-    hide: { optionName: "hide", isCollectionItem: false },
-    show: { optionName: "show", isCollectionItem: false }
-  },
-})
+const _componentAnimation = (props: IAnimationProps) => {
+  return React.createElement(NestedOption<IAnimationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "animation",
+      ExpectedChildren: {
+        hide: { optionName: "hide", isCollectionItem: false },
+        show: { optionName: "show", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Animation = Object.assign<typeof _componentAnimation, NestedComponentMeta>(_componentAnimation, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -165,15 +168,18 @@ type IAtProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentAt = memo(
-  (props: IAtProps) => {
-    return React.createElement(NestedOption<IAtProps>, { ...props });
-  }
-);
+const _componentAt = (props: IAtProps) => {
+  return React.createElement(NestedOption<IAtProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "at",
+    },
+  });
+};
 
-const At: typeof _componentAt & IElementDescriptor = Object.assign(_componentAt, {
-  OptionName: "at",
-})
+const At = Object.assign<typeof _componentAt, NestedComponentMeta>(_componentAt, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -181,15 +187,18 @@ type IBoundaryOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentBoundaryOffset = memo(
-  (props: IBoundaryOffsetProps) => {
-    return React.createElement(NestedOption<IBoundaryOffsetProps>, { ...props });
-  }
-);
+const _componentBoundaryOffset = (props: IBoundaryOffsetProps) => {
+  return React.createElement(NestedOption<IBoundaryOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "boundaryOffset",
+    },
+  });
+};
 
-const BoundaryOffset: typeof _componentBoundaryOffset & IElementDescriptor = Object.assign(_componentBoundaryOffset, {
-  OptionName: "boundaryOffset",
-})
+const BoundaryOffset = Object.assign<typeof _componentBoundaryOffset, NestedComponentMeta>(_componentBoundaryOffset, {
+  componentType: "option",
+});
 
 // owners:
 // TagBox
@@ -198,19 +207,22 @@ type IButtonProps = React.PropsWithChildren<{
   name?: string;
   options?: dxButtonOptions;
 }>
-const _componentButton = memo(
-  (props: IButtonProps) => {
-    return React.createElement(NestedOption<IButtonProps>, { ...props });
-  }
-);
-
-const Button: typeof _componentButton & IElementDescriptor = Object.assign(_componentButton, {
-  OptionName: "buttons",
-  IsCollectionItem: true,
-  ExpectedChildren: {
-    options: { optionName: "options", isCollectionItem: false }
-  },
-})
+const _componentButton = (props: IButtonProps) => {
+  return React.createElement(NestedOption<IButtonProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "buttons",
+      IsCollectionItem: true,
+      ExpectedChildren: {
+        options: { optionName: "options", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Button = Object.assign<typeof _componentButton, NestedComponentMeta>(_componentButton, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -218,15 +230,18 @@ type ICollisionProps = React.PropsWithChildren<{
   x?: "fit" | "flip" | "flipfit" | "none";
   y?: "fit" | "flip" | "flipfit" | "none";
 }>
-const _componentCollision = memo(
-  (props: ICollisionProps) => {
-    return React.createElement(NestedOption<ICollisionProps>, { ...props });
-  }
-);
+const _componentCollision = (props: ICollisionProps) => {
+  return React.createElement(NestedOption<ICollisionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "collision",
+    },
+  });
+};
 
-const Collision: typeof _componentCollision & IElementDescriptor = Object.assign(_componentCollision, {
-  OptionName: "collision",
-})
+const Collision = Object.assign<typeof _componentCollision, NestedComponentMeta>(_componentCollision, {
+  componentType: "option",
+});
 
 // owners:
 // TagBox
@@ -297,35 +312,38 @@ type IDropDownOptionsProps = React.PropsWithChildren<{
   titleRender?: (...params: any) => React.ReactNode;
   titleComponent?: React.ComponentType<any>;
 }>
-const _componentDropDownOptions = memo(
-  (props: IDropDownOptionsProps) => {
-    return React.createElement(NestedOption<IDropDownOptionsProps>, { ...props });
-  }
-);
-
-const DropDownOptions: typeof _componentDropDownOptions & IElementDescriptor = Object.assign(_componentDropDownOptions, {
-  OptionName: "dropDownOptions",
-  DefaultsProps: {
-    defaultHeight: "height",
-    defaultPosition: "position",
-    defaultVisible: "visible",
-    defaultWidth: "width"
-  },
-  ExpectedChildren: {
-    animation: { optionName: "animation", isCollectionItem: false },
-    position: { optionName: "position", isCollectionItem: false },
-    toolbarItem: { optionName: "toolbarItems", isCollectionItem: true }
-  },
-  TemplateProps: [{
-    tmplOption: "contentTemplate",
-    render: "contentRender",
-    component: "contentComponent"
-  }, {
-    tmplOption: "titleTemplate",
-    render: "titleRender",
-    component: "titleComponent"
-  }],
-})
+const _componentDropDownOptions = (props: IDropDownOptionsProps) => {
+  return React.createElement(NestedOption<IDropDownOptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "dropDownOptions",
+      DefaultsProps: {
+        defaultHeight: "height",
+        defaultPosition: "position",
+        defaultVisible: "visible",
+        defaultWidth: "width"
+      },
+      ExpectedChildren: {
+        animation: { optionName: "animation", isCollectionItem: false },
+        position: { optionName: "position", isCollectionItem: false },
+        toolbarItem: { optionName: "toolbarItems", isCollectionItem: true }
+      },
+      TemplateProps: [{
+        tmplOption: "contentTemplate",
+        render: "contentRender",
+        component: "contentComponent"
+      }, {
+        tmplOption: "titleTemplate",
+        render: "titleRender",
+        component: "titleComponent"
+      }],
+    },
+  });
+};
+
+const DropDownOptions = Object.assign<typeof _componentDropDownOptions, NestedComponentMeta>(_componentDropDownOptions, {
+  componentType: "option",
+});
 
 // owners:
 // Hide
@@ -336,18 +354,21 @@ type IFromProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentFrom = memo(
-  (props: IFromProps) => {
-    return React.createElement(NestedOption<IFromProps>, { ...props });
-  }
-);
-
-const From: typeof _componentFrom & IElementDescriptor = Object.assign(_componentFrom, {
-  OptionName: "from",
-  ExpectedChildren: {
-    position: { optionName: "position", isCollectionItem: false }
-  },
-})
+const _componentFrom = (props: IFromProps) => {
+  return React.createElement(NestedOption<IFromProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "from",
+      ExpectedChildren: {
+        position: { optionName: "position", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const From = Object.assign<typeof _componentFrom, NestedComponentMeta>(_componentFrom, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -363,19 +384,22 @@ type IHideProps = React.PropsWithChildren<{
   to?: AnimationState;
   type?: "css" | "fade" | "fadeIn" | "fadeOut" | "pop" | "slide" | "slideIn" | "slideOut";
 }>
-const _componentHide = memo(
-  (props: IHideProps) => {
-    return React.createElement(NestedOption<IHideProps>, { ...props });
-  }
-);
-
-const Hide: typeof _componentHide & IElementDescriptor = Object.assign(_componentHide, {
-  OptionName: "hide",
-  ExpectedChildren: {
-    from: { optionName: "from", isCollectionItem: false },
-    to: { optionName: "to", isCollectionItem: false }
-  },
-})
+const _componentHide = (props: IHideProps) => {
+  return React.createElement(NestedOption<IHideProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hide",
+      ExpectedChildren: {
+        from: { optionName: "from", isCollectionItem: false },
+        to: { optionName: "to", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Hide = Object.assign<typeof _componentHide, NestedComponentMeta>(_componentHide, {
+  componentType: "option",
+});
 
 // owners:
 // TagBox
@@ -388,21 +412,24 @@ type IItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentItem = memo(
-  (props: IItemProps) => {
-    return React.createElement(NestedOption<IItemProps>, { ...props });
-  }
-);
-
-const Item: typeof _componentItem & IElementDescriptor = Object.assign(_componentItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentItem = (props: IItemProps) => {
+  return React.createElement(NestedOption<IItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const Item = Object.assign<typeof _componentItem, NestedComponentMeta>(_componentItem, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -410,15 +437,18 @@ type IMyProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentMy = memo(
-  (props: IMyProps) => {
-    return React.createElement(NestedOption<IMyProps>, { ...props });
-  }
-);
+const _componentMy = (props: IMyProps) => {
+  return React.createElement(NestedOption<IMyProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "my",
+    },
+  });
+};
 
-const My: typeof _componentMy & IElementDescriptor = Object.assign(_componentMy, {
-  OptionName: "my",
-})
+const My = Object.assign<typeof _componentMy, NestedComponentMeta>(_componentMy, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -426,15 +456,18 @@ type IOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentOffset = memo(
-  (props: IOffsetProps) => {
-    return React.createElement(NestedOption<IOffsetProps>, { ...props });
-  }
-);
+const _componentOffset = (props: IOffsetProps) => {
+  return React.createElement(NestedOption<IOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "offset",
+    },
+  });
+};
 
-const Offset: typeof _componentOffset & IElementDescriptor = Object.assign(_componentOffset, {
-  OptionName: "offset",
-})
+const Offset = Object.assign<typeof _componentOffset, NestedComponentMeta>(_componentOffset, {
+  componentType: "option",
+});
 
 // owners:
 // Button
@@ -467,20 +500,23 @@ type IOptionsProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentOptions = memo(
-  (props: IOptionsProps) => {
-    return React.createElement(NestedOption<IOptionsProps>, { ...props });
-  }
-);
-
-const Options: typeof _componentOptions & IElementDescriptor = Object.assign(_componentOptions, {
-  OptionName: "options",
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentOptions = (props: IOptionsProps) => {
+  return React.createElement(NestedOption<IOptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "options",
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const Options = Object.assign<typeof _componentOptions, NestedComponentMeta>(_componentOptions, {
+  componentType: "option",
+});
 
 // owners:
 // From
@@ -509,15 +545,18 @@ type IPositionProps = React.PropsWithChildren<{
     y?: number;
   };
 }>
-const _componentPosition = memo(
-  (props: IPositionProps) => {
-    return React.createElement(NestedOption<IPositionProps>, { ...props });
-  }
-);
+const _componentPosition = (props: IPositionProps) => {
+  return React.createElement(NestedOption<IPositionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "position",
+    },
+  });
+};
 
-const Position: typeof _componentPosition & IElementDescriptor = Object.assign(_componentPosition, {
-  OptionName: "position",
-})
+const Position = Object.assign<typeof _componentPosition, NestedComponentMeta>(_componentPosition, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -533,15 +572,18 @@ type IShowProps = React.PropsWithChildren<{
   to?: AnimationState;
   type?: "css" | "fade" | "fadeIn" | "fadeOut" | "pop" | "slide" | "slideIn" | "slideOut";
 }>
-const _componentShow = memo(
-  (props: IShowProps) => {
-    return React.createElement(NestedOption<IShowProps>, { ...props });
-  }
-);
+const _componentShow = (props: IShowProps) => {
+  return React.createElement(NestedOption<IShowProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "show",
+    },
+  });
+};
 
-const Show: typeof _componentShow & IElementDescriptor = Object.assign(_componentShow, {
-  OptionName: "show",
-})
+const Show = Object.assign<typeof _componentShow, NestedComponentMeta>(_componentShow, {
+  componentType: "option",
+});
 
 // owners:
 // Hide
@@ -552,15 +594,18 @@ type IToProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentTo = memo(
-  (props: IToProps) => {
-    return React.createElement(NestedOption<IToProps>, { ...props });
-  }
-);
+const _componentTo = (props: IToProps) => {
+  return React.createElement(NestedOption<IToProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "to",
+    },
+  });
+};
 
-const To: typeof _componentTo & IElementDescriptor = Object.assign(_componentTo, {
-  OptionName: "to",
-})
+const To = Object.assign<typeof _componentTo, NestedComponentMeta>(_componentTo, {
+  componentType: "option",
+});
 
 // owners:
 // DropDownOptions
@@ -583,25 +628,28 @@ type IToolbarItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentToolbarItem = memo(
-  (props: IToolbarItemProps) => {
-    return React.createElement(NestedOption<IToolbarItemProps>, { ...props });
-  }
-);
-
-const ToolbarItem: typeof _componentToolbarItem & IElementDescriptor = Object.assign(_componentToolbarItem, {
-  OptionName: "toolbarItems",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "menuItemTemplate",
-    render: "menuItemRender",
-    component: "menuItemComponent"
-  }, {
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentToolbarItem = (props: IToolbarItemProps) => {
+  return React.createElement(NestedOption<IToolbarItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "toolbarItems",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "menuItemTemplate",
+        render: "menuItemRender",
+        component: "menuItemComponent"
+      }, {
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const ToolbarItem = Object.assign<typeof _componentToolbarItem, NestedComponentMeta>(_componentToolbarItem, {
+  componentType: "option",
+});
 
 export default TagBox;
 export {
diff --git a/packages/devextreme-react/src/text-box.ts b/packages/devextreme-react/src/text-box.ts
index 57523904281f..6e8fcb87b658 100644
--- a/packages/devextreme-react/src/text-box.ts
+++ b/packages/devextreme-react/src/text-box.ts
@@ -5,7 +5,7 @@ import dxTextBox, {
     Properties
 } from "devextreme/ui/text_box";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { ChangeEvent, ContentReadyEvent, CopyEvent, CutEvent, DisposingEvent, EnterKeyEvent, FocusInEvent, FocusOutEvent, InitializedEvent, InputEvent, KeyDownEvent, KeyUpEvent, PasteEvent, ValueChangedEvent } from "devextreme/ui/text_box";
@@ -89,19 +89,22 @@ type IButtonProps = React.PropsWithChildren<{
   name?: string;
   options?: dxButtonOptions;
 }>
-const _componentButton = memo(
-  (props: IButtonProps) => {
-    return React.createElement(NestedOption<IButtonProps>, { ...props });
-  }
-);
-
-const Button: typeof _componentButton & IElementDescriptor = Object.assign(_componentButton, {
-  OptionName: "buttons",
-  IsCollectionItem: true,
-  ExpectedChildren: {
-    options: { optionName: "options", isCollectionItem: false }
-  },
-})
+const _componentButton = (props: IButtonProps) => {
+  return React.createElement(NestedOption<IButtonProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "buttons",
+      IsCollectionItem: true,
+      ExpectedChildren: {
+        options: { optionName: "options", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Button = Object.assign<typeof _componentButton, NestedComponentMeta>(_componentButton, {
+  componentType: "option",
+});
 
 // owners:
 // Button
@@ -134,20 +137,23 @@ type IOptionsProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentOptions = memo(
-  (props: IOptionsProps) => {
-    return React.createElement(NestedOption<IOptionsProps>, { ...props });
-  }
-);
-
-const Options: typeof _componentOptions & IElementDescriptor = Object.assign(_componentOptions, {
-  OptionName: "options",
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentOptions = (props: IOptionsProps) => {
+  return React.createElement(NestedOption<IOptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "options",
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const Options = Object.assign<typeof _componentOptions, NestedComponentMeta>(_componentOptions, {
+  componentType: "option",
+});
 
 export default TextBox;
 export {
diff --git a/packages/devextreme-react/src/tile-view.ts b/packages/devextreme-react/src/tile-view.ts
index f2a05d5c8af3..2f65dd0837c7 100644
--- a/packages/devextreme-react/src/tile-view.ts
+++ b/packages/devextreme-react/src/tile-view.ts
@@ -6,7 +6,7 @@ import dxTileView, {
     Properties
 } from "devextreme/ui/tile_view";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { dxTileViewItem, ContentReadyEvent, DisposingEvent, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent } from "devextreme/ui/tile_view";
@@ -101,21 +101,24 @@ type IItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentItem = memo(
-  (props: IItemProps) => {
-    return React.createElement(NestedOption<IItemProps>, { ...props });
-  }
-);
-
-const Item: typeof _componentItem & IElementDescriptor = Object.assign(_componentItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentItem = (props: IItemProps) => {
+  return React.createElement(NestedOption<IItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const Item = Object.assign<typeof _componentItem, NestedComponentMeta>(_componentItem, {
+  componentType: "option",
+});
 
 export default TileView;
 export {
diff --git a/packages/devextreme-react/src/toast.ts b/packages/devextreme-react/src/toast.ts
index 13ab397fa54b..6ef490ea0a1c 100644
--- a/packages/devextreme-react/src/toast.ts
+++ b/packages/devextreme-react/src/toast.ts
@@ -5,7 +5,7 @@ import dxToast, {
     Properties
 } from "devextreme/ui/toast";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { PositionConfig } from "devextreme/animation/position";
@@ -97,19 +97,22 @@ type IAnimationProps = React.PropsWithChildren<{
   hide?: AnimationConfig;
   show?: AnimationConfig;
 }>
-const _componentAnimation = memo(
-  (props: IAnimationProps) => {
-    return React.createElement(NestedOption<IAnimationProps>, { ...props });
-  }
-);
-
-const Animation: typeof _componentAnimation & IElementDescriptor = Object.assign(_componentAnimation, {
-  OptionName: "animation",
-  ExpectedChildren: {
-    hide: { optionName: "hide", isCollectionItem: false },
-    show: { optionName: "show", isCollectionItem: false }
-  },
-})
+const _componentAnimation = (props: IAnimationProps) => {
+  return React.createElement(NestedOption<IAnimationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "animation",
+      ExpectedChildren: {
+        hide: { optionName: "hide", isCollectionItem: false },
+        show: { optionName: "show", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Animation = Object.assign<typeof _componentAnimation, NestedComponentMeta>(_componentAnimation, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -117,15 +120,18 @@ type IAtProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentAt = memo(
-  (props: IAtProps) => {
-    return React.createElement(NestedOption<IAtProps>, { ...props });
-  }
-);
+const _componentAt = (props: IAtProps) => {
+  return React.createElement(NestedOption<IAtProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "at",
+    },
+  });
+};
 
-const At: typeof _componentAt & IElementDescriptor = Object.assign(_componentAt, {
-  OptionName: "at",
-})
+const At = Object.assign<typeof _componentAt, NestedComponentMeta>(_componentAt, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -133,15 +139,18 @@ type IBoundaryOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentBoundaryOffset = memo(
-  (props: IBoundaryOffsetProps) => {
-    return React.createElement(NestedOption<IBoundaryOffsetProps>, { ...props });
-  }
-);
+const _componentBoundaryOffset = (props: IBoundaryOffsetProps) => {
+  return React.createElement(NestedOption<IBoundaryOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "boundaryOffset",
+    },
+  });
+};
 
-const BoundaryOffset: typeof _componentBoundaryOffset & IElementDescriptor = Object.assign(_componentBoundaryOffset, {
-  OptionName: "boundaryOffset",
-})
+const BoundaryOffset = Object.assign<typeof _componentBoundaryOffset, NestedComponentMeta>(_componentBoundaryOffset, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -149,15 +158,18 @@ type ICollisionProps = React.PropsWithChildren<{
   x?: "fit" | "flip" | "flipfit" | "none";
   y?: "fit" | "flip" | "flipfit" | "none";
 }>
-const _componentCollision = memo(
-  (props: ICollisionProps) => {
-    return React.createElement(NestedOption<ICollisionProps>, { ...props });
-  }
-);
+const _componentCollision = (props: ICollisionProps) => {
+  return React.createElement(NestedOption<ICollisionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "collision",
+    },
+  });
+};
 
-const Collision: typeof _componentCollision & IElementDescriptor = Object.assign(_componentCollision, {
-  OptionName: "collision",
-})
+const Collision = Object.assign<typeof _componentCollision, NestedComponentMeta>(_componentCollision, {
+  componentType: "option",
+});
 
 // owners:
 // Hide
@@ -168,18 +180,21 @@ type IFromProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentFrom = memo(
-  (props: IFromProps) => {
-    return React.createElement(NestedOption<IFromProps>, { ...props });
-  }
-);
-
-const From: typeof _componentFrom & IElementDescriptor = Object.assign(_componentFrom, {
-  OptionName: "from",
-  ExpectedChildren: {
-    position: { optionName: "position", isCollectionItem: false }
-  },
-})
+const _componentFrom = (props: IFromProps) => {
+  return React.createElement(NestedOption<IFromProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "from",
+      ExpectedChildren: {
+        position: { optionName: "position", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const From = Object.assign<typeof _componentFrom, NestedComponentMeta>(_componentFrom, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -195,19 +210,22 @@ type IHideProps = React.PropsWithChildren<{
   to?: AnimationState;
   type?: "css" | "fade" | "fadeIn" | "fadeOut" | "pop" | "slide" | "slideIn" | "slideOut";
 }>
-const _componentHide = memo(
-  (props: IHideProps) => {
-    return React.createElement(NestedOption<IHideProps>, { ...props });
-  }
-);
-
-const Hide: typeof _componentHide & IElementDescriptor = Object.assign(_componentHide, {
-  OptionName: "hide",
-  ExpectedChildren: {
-    from: { optionName: "from", isCollectionItem: false },
-    to: { optionName: "to", isCollectionItem: false }
-  },
-})
+const _componentHide = (props: IHideProps) => {
+  return React.createElement(NestedOption<IHideProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hide",
+      ExpectedChildren: {
+        from: { optionName: "from", isCollectionItem: false },
+        to: { optionName: "to", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Hide = Object.assign<typeof _componentHide, NestedComponentMeta>(_componentHide, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -215,15 +233,18 @@ type IMyProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentMy = memo(
-  (props: IMyProps) => {
-    return React.createElement(NestedOption<IMyProps>, { ...props });
-  }
-);
+const _componentMy = (props: IMyProps) => {
+  return React.createElement(NestedOption<IMyProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "my",
+    },
+  });
+};
 
-const My: typeof _componentMy & IElementDescriptor = Object.assign(_componentMy, {
-  OptionName: "my",
-})
+const My = Object.assign<typeof _componentMy, NestedComponentMeta>(_componentMy, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -231,15 +252,18 @@ type IOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentOffset = memo(
-  (props: IOffsetProps) => {
-    return React.createElement(NestedOption<IOffsetProps>, { ...props });
-  }
-);
+const _componentOffset = (props: IOffsetProps) => {
+  return React.createElement(NestedOption<IOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "offset",
+    },
+  });
+};
 
-const Offset: typeof _componentOffset & IElementDescriptor = Object.assign(_componentOffset, {
-  OptionName: "offset",
-})
+const Offset = Object.assign<typeof _componentOffset, NestedComponentMeta>(_componentOffset, {
+  componentType: "option",
+});
 
 // owners:
 // From
@@ -268,15 +292,18 @@ type IPositionProps = React.PropsWithChildren<{
     y?: number;
   };
 }>
-const _componentPosition = memo(
-  (props: IPositionProps) => {
-    return React.createElement(NestedOption<IPositionProps>, { ...props });
-  }
-);
+const _componentPosition = (props: IPositionProps) => {
+  return React.createElement(NestedOption<IPositionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "position",
+    },
+  });
+};
 
-const Position: typeof _componentPosition & IElementDescriptor = Object.assign(_componentPosition, {
-  OptionName: "position",
-})
+const Position = Object.assign<typeof _componentPosition, NestedComponentMeta>(_componentPosition, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -292,15 +319,18 @@ type IShowProps = React.PropsWithChildren<{
   to?: AnimationState;
   type?: "css" | "fade" | "fadeIn" | "fadeOut" | "pop" | "slide" | "slideIn" | "slideOut";
 }>
-const _componentShow = memo(
-  (props: IShowProps) => {
-    return React.createElement(NestedOption<IShowProps>, { ...props });
-  }
-);
+const _componentShow = (props: IShowProps) => {
+  return React.createElement(NestedOption<IShowProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "show",
+    },
+  });
+};
 
-const Show: typeof _componentShow & IElementDescriptor = Object.assign(_componentShow, {
-  OptionName: "show",
-})
+const Show = Object.assign<typeof _componentShow, NestedComponentMeta>(_componentShow, {
+  componentType: "option",
+});
 
 // owners:
 // Hide
@@ -311,15 +341,18 @@ type IToProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentTo = memo(
-  (props: IToProps) => {
-    return React.createElement(NestedOption<IToProps>, { ...props });
-  }
-);
-
-const To: typeof _componentTo & IElementDescriptor = Object.assign(_componentTo, {
-  OptionName: "to",
-})
+const _componentTo = (props: IToProps) => {
+  return React.createElement(NestedOption<IToProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "to",
+    },
+  });
+};
+
+const To = Object.assign<typeof _componentTo, NestedComponentMeta>(_componentTo, {
+  componentType: "option",
+});
 
 export default Toast;
 export {
diff --git a/packages/devextreme-react/src/toolbar.ts b/packages/devextreme-react/src/toolbar.ts
index b89524f1df5d..a066471fb36c 100644
--- a/packages/devextreme-react/src/toolbar.ts
+++ b/packages/devextreme-react/src/toolbar.ts
@@ -6,7 +6,7 @@ import dxToolbar, {
     Properties
 } from "devextreme/ui/toolbar";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { dxToolbarItem, ContentReadyEvent, DisposingEvent, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent } from "devextreme/ui/toolbar";
@@ -115,25 +115,28 @@ type IItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentItem = memo(
-  (props: IItemProps) => {
-    return React.createElement(NestedOption<IItemProps>, { ...props });
-  }
-);
-
-const Item: typeof _componentItem & IElementDescriptor = Object.assign(_componentItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "menuItemTemplate",
-    render: "menuItemRender",
-    component: "menuItemComponent"
-  }, {
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentItem = (props: IItemProps) => {
+  return React.createElement(NestedOption<IItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "menuItemTemplate",
+        render: "menuItemRender",
+        component: "menuItemComponent"
+      }, {
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const Item = Object.assign<typeof _componentItem, NestedComponentMeta>(_componentItem, {
+  componentType: "option",
+});
 
 export default Toolbar;
 export {
diff --git a/packages/devextreme-react/src/tooltip.ts b/packages/devextreme-react/src/tooltip.ts
index 1b7ac3b9e6ae..868f5dc23bd1 100644
--- a/packages/devextreme-react/src/tooltip.ts
+++ b/packages/devextreme-react/src/tooltip.ts
@@ -5,7 +5,7 @@ import dxTooltip, {
     Properties
 } from "devextreme/ui/tooltip";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { PositionConfig } from "devextreme/animation/position";
@@ -105,19 +105,22 @@ type IAnimationProps = React.PropsWithChildren<{
   hide?: AnimationConfig;
   show?: AnimationConfig;
 }>
-const _componentAnimation = memo(
-  (props: IAnimationProps) => {
-    return React.createElement(NestedOption<IAnimationProps>, { ...props });
-  }
-);
-
-const Animation: typeof _componentAnimation & IElementDescriptor = Object.assign(_componentAnimation, {
-  OptionName: "animation",
-  ExpectedChildren: {
-    hide: { optionName: "hide", isCollectionItem: false },
-    show: { optionName: "show", isCollectionItem: false }
-  },
-})
+const _componentAnimation = (props: IAnimationProps) => {
+  return React.createElement(NestedOption<IAnimationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "animation",
+      ExpectedChildren: {
+        hide: { optionName: "hide", isCollectionItem: false },
+        show: { optionName: "show", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Animation = Object.assign<typeof _componentAnimation, NestedComponentMeta>(_componentAnimation, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -125,15 +128,18 @@ type IAtProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentAt = memo(
-  (props: IAtProps) => {
-    return React.createElement(NestedOption<IAtProps>, { ...props });
-  }
-);
+const _componentAt = (props: IAtProps) => {
+  return React.createElement(NestedOption<IAtProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "at",
+    },
+  });
+};
 
-const At: typeof _componentAt & IElementDescriptor = Object.assign(_componentAt, {
-  OptionName: "at",
-})
+const At = Object.assign<typeof _componentAt, NestedComponentMeta>(_componentAt, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -141,15 +147,18 @@ type IBoundaryOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentBoundaryOffset = memo(
-  (props: IBoundaryOffsetProps) => {
-    return React.createElement(NestedOption<IBoundaryOffsetProps>, { ...props });
-  }
-);
+const _componentBoundaryOffset = (props: IBoundaryOffsetProps) => {
+  return React.createElement(NestedOption<IBoundaryOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "boundaryOffset",
+    },
+  });
+};
 
-const BoundaryOffset: typeof _componentBoundaryOffset & IElementDescriptor = Object.assign(_componentBoundaryOffset, {
-  OptionName: "boundaryOffset",
-})
+const BoundaryOffset = Object.assign<typeof _componentBoundaryOffset, NestedComponentMeta>(_componentBoundaryOffset, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -157,15 +166,18 @@ type ICollisionProps = React.PropsWithChildren<{
   x?: "fit" | "flip" | "flipfit" | "none";
   y?: "fit" | "flip" | "flipfit" | "none";
 }>
-const _componentCollision = memo(
-  (props: ICollisionProps) => {
-    return React.createElement(NestedOption<ICollisionProps>, { ...props });
-  }
-);
+const _componentCollision = (props: ICollisionProps) => {
+  return React.createElement(NestedOption<ICollisionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "collision",
+    },
+  });
+};
 
-const Collision: typeof _componentCollision & IElementDescriptor = Object.assign(_componentCollision, {
-  OptionName: "collision",
-})
+const Collision = Object.assign<typeof _componentCollision, NestedComponentMeta>(_componentCollision, {
+  componentType: "option",
+});
 
 // owners:
 // Hide
@@ -176,18 +188,21 @@ type IFromProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentFrom = memo(
-  (props: IFromProps) => {
-    return React.createElement(NestedOption<IFromProps>, { ...props });
-  }
-);
-
-const From: typeof _componentFrom & IElementDescriptor = Object.assign(_componentFrom, {
-  OptionName: "from",
-  ExpectedChildren: {
-    position: { optionName: "position", isCollectionItem: false }
-  },
-})
+const _componentFrom = (props: IFromProps) => {
+  return React.createElement(NestedOption<IFromProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "from",
+      ExpectedChildren: {
+        position: { optionName: "position", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const From = Object.assign<typeof _componentFrom, NestedComponentMeta>(_componentFrom, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -203,19 +218,22 @@ type IHideProps = React.PropsWithChildren<{
   to?: AnimationState;
   type?: "css" | "fade" | "fadeIn" | "fadeOut" | "pop" | "slide" | "slideIn" | "slideOut";
 }>
-const _componentHide = memo(
-  (props: IHideProps) => {
-    return React.createElement(NestedOption<IHideProps>, { ...props });
-  }
-);
-
-const Hide: typeof _componentHide & IElementDescriptor = Object.assign(_componentHide, {
-  OptionName: "hide",
-  ExpectedChildren: {
-    from: { optionName: "from", isCollectionItem: false },
-    to: { optionName: "to", isCollectionItem: false }
-  },
-})
+const _componentHide = (props: IHideProps) => {
+  return React.createElement(NestedOption<IHideProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hide",
+      ExpectedChildren: {
+        from: { optionName: "from", isCollectionItem: false },
+        to: { optionName: "to", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Hide = Object.assign<typeof _componentHide, NestedComponentMeta>(_componentHide, {
+  componentType: "option",
+});
 
 // owners:
 // Tooltip
@@ -223,15 +241,18 @@ type IHideEventProps = React.PropsWithChildren<{
   delay?: number;
   name?: string;
 }>
-const _componentHideEvent = memo(
-  (props: IHideEventProps) => {
-    return React.createElement(NestedOption<IHideEventProps>, { ...props });
-  }
-);
+const _componentHideEvent = (props: IHideEventProps) => {
+  return React.createElement(NestedOption<IHideEventProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hideEvent",
+    },
+  });
+};
 
-const HideEvent: typeof _componentHideEvent & IElementDescriptor = Object.assign(_componentHideEvent, {
-  OptionName: "hideEvent",
-})
+const HideEvent = Object.assign<typeof _componentHideEvent, NestedComponentMeta>(_componentHideEvent, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -239,15 +260,18 @@ type IMyProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentMy = memo(
-  (props: IMyProps) => {
-    return React.createElement(NestedOption<IMyProps>, { ...props });
-  }
-);
+const _componentMy = (props: IMyProps) => {
+  return React.createElement(NestedOption<IMyProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "my",
+    },
+  });
+};
 
-const My: typeof _componentMy & IElementDescriptor = Object.assign(_componentMy, {
-  OptionName: "my",
-})
+const My = Object.assign<typeof _componentMy, NestedComponentMeta>(_componentMy, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -255,15 +279,18 @@ type IOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentOffset = memo(
-  (props: IOffsetProps) => {
-    return React.createElement(NestedOption<IOffsetProps>, { ...props });
-  }
-);
+const _componentOffset = (props: IOffsetProps) => {
+  return React.createElement(NestedOption<IOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "offset",
+    },
+  });
+};
 
-const Offset: typeof _componentOffset & IElementDescriptor = Object.assign(_componentOffset, {
-  OptionName: "offset",
-})
+const Offset = Object.assign<typeof _componentOffset, NestedComponentMeta>(_componentOffset, {
+  componentType: "option",
+});
 
 // owners:
 // From
@@ -292,15 +319,18 @@ type IPositionProps = React.PropsWithChildren<{
     y?: number;
   };
 }>
-const _componentPosition = memo(
-  (props: IPositionProps) => {
-    return React.createElement(NestedOption<IPositionProps>, { ...props });
-  }
-);
+const _componentPosition = (props: IPositionProps) => {
+  return React.createElement(NestedOption<IPositionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "position",
+    },
+  });
+};
 
-const Position: typeof _componentPosition & IElementDescriptor = Object.assign(_componentPosition, {
-  OptionName: "position",
-})
+const Position = Object.assign<typeof _componentPosition, NestedComponentMeta>(_componentPosition, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -316,15 +346,18 @@ type IShowProps = React.PropsWithChildren<{
   to?: AnimationState;
   type?: "css" | "fade" | "fadeIn" | "fadeOut" | "pop" | "slide" | "slideIn" | "slideOut";
 }>
-const _componentShow = memo(
-  (props: IShowProps) => {
-    return React.createElement(NestedOption<IShowProps>, { ...props });
-  }
-);
+const _componentShow = (props: IShowProps) => {
+  return React.createElement(NestedOption<IShowProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "show",
+    },
+  });
+};
 
-const Show: typeof _componentShow & IElementDescriptor = Object.assign(_componentShow, {
-  OptionName: "show",
-})
+const Show = Object.assign<typeof _componentShow, NestedComponentMeta>(_componentShow, {
+  componentType: "option",
+});
 
 // owners:
 // Tooltip
@@ -332,15 +365,18 @@ type IShowEventProps = React.PropsWithChildren<{
   delay?: number;
   name?: string;
 }>
-const _componentShowEvent = memo(
-  (props: IShowEventProps) => {
-    return React.createElement(NestedOption<IShowEventProps>, { ...props });
-  }
-);
+const _componentShowEvent = (props: IShowEventProps) => {
+  return React.createElement(NestedOption<IShowEventProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "showEvent",
+    },
+  });
+};
 
-const ShowEvent: typeof _componentShowEvent & IElementDescriptor = Object.assign(_componentShowEvent, {
-  OptionName: "showEvent",
-})
+const ShowEvent = Object.assign<typeof _componentShowEvent, NestedComponentMeta>(_componentShowEvent, {
+  componentType: "option",
+});
 
 // owners:
 // Hide
@@ -351,15 +387,18 @@ type IToProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentTo = memo(
-  (props: IToProps) => {
-    return React.createElement(NestedOption<IToProps>, { ...props });
-  }
-);
-
-const To: typeof _componentTo & IElementDescriptor = Object.assign(_componentTo, {
-  OptionName: "to",
-})
+const _componentTo = (props: IToProps) => {
+  return React.createElement(NestedOption<IToProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "to",
+    },
+  });
+};
+
+const To = Object.assign<typeof _componentTo, NestedComponentMeta>(_componentTo, {
+  componentType: "option",
+});
 
 export default Tooltip;
 export {
diff --git a/packages/devextreme-react/src/tree-list.ts b/packages/devextreme-react/src/tree-list.ts
index 5949ec1a6145..f18d6b09f2ea 100644
--- a/packages/devextreme-react/src/tree-list.ts
+++ b/packages/devextreme-react/src/tree-list.ts
@@ -6,7 +6,7 @@ import dxTreeList, {
     Properties
 } from "devextreme/ui/tree_list";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { dxTreeListColumn, AdaptiveDetailRowPreparingEvent, CellClickEvent, CellDblClickEvent, CellPreparedEvent, ContentReadyEvent, ContextMenuPreparingEvent, DataErrorOccurredEvent, DisposingEvent, EditCanceledEvent, EditCancelingEvent, EditingStartEvent, EditorPreparedEvent, EditorPreparingEvent, FocusedCellChangingEvent, FocusedRowChangingEvent, InitializedEvent, InitNewRowEvent, KeyDownEvent, NodesInitializedEvent, RowClickEvent, RowCollapsedEvent, RowCollapsingEvent, RowDblClickEvent, RowExpandedEvent, RowExpandingEvent, RowInsertedEvent, RowInsertingEvent, RowPreparedEvent, RowRemovedEvent, RowRemovingEvent, RowUpdatedEvent, RowUpdatingEvent, RowValidatingEvent, SavedEvent, SavingEvent, ToolbarPreparingEvent, dxTreeListRowObject, dxTreeListColumnButton, dxTreeListToolbarItem } from "devextreme/ui/tree_list";
@@ -184,19 +184,22 @@ type IAnimationProps = React.PropsWithChildren<{
   hide?: AnimationConfig;
   show?: AnimationConfig;
 }>
-const _componentAnimation = memo(
-  (props: IAnimationProps) => {
-    return React.createElement(NestedOption<IAnimationProps>, { ...props });
-  }
-);
+const _componentAnimation = (props: IAnimationProps) => {
+  return React.createElement(NestedOption<IAnimationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "animation",
+      ExpectedChildren: {
+        hide: { optionName: "hide", isCollectionItem: false },
+        show: { optionName: "show", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const Animation: typeof _componentAnimation & IElementDescriptor = Object.assign(_componentAnimation, {
-  OptionName: "animation",
-  ExpectedChildren: {
-    hide: { optionName: "hide", isCollectionItem: false },
-    show: { optionName: "show", isCollectionItem: false }
-  },
-})
+const Animation = Object.assign<typeof _componentAnimation, NestedComponentMeta>(_componentAnimation, {
+  componentType: "option",
+});
 
 // owners:
 // FormItem
@@ -208,19 +211,22 @@ type IAsyncRuleProps = React.PropsWithChildren<{
   type?: "required" | "numeric" | "range" | "stringLength" | "custom" | "compare" | "pattern" | "email" | "async";
   validationCallback?: ((options: { column: Record<string, any>, data: Record<string, any>, formItem: Record<string, any>, rule: Record<string, any>, validator: Record<string, any>, value: string | number }) => any);
 }>
-const _componentAsyncRule = memo(
-  (props: IAsyncRuleProps) => {
-    return React.createElement(NestedOption<IAsyncRuleProps>, { ...props });
-  }
-);
+const _componentAsyncRule = (props: IAsyncRuleProps) => {
+  return React.createElement(NestedOption<IAsyncRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "async"
+      },
+    },
+  });
+};
 
-const AsyncRule: typeof _componentAsyncRule & IElementDescriptor = Object.assign(_componentAsyncRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "async"
-  },
-})
+const AsyncRule = Object.assign<typeof _componentAsyncRule, NestedComponentMeta>(_componentAsyncRule, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -228,15 +234,18 @@ type IAtProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentAt = memo(
-  (props: IAtProps) => {
-    return React.createElement(NestedOption<IAtProps>, { ...props });
-  }
-);
+const _componentAt = (props: IAtProps) => {
+  return React.createElement(NestedOption<IAtProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "at",
+    },
+  });
+};
 
-const At: typeof _componentAt & IElementDescriptor = Object.assign(_componentAt, {
-  OptionName: "at",
-})
+const At = Object.assign<typeof _componentAt, NestedComponentMeta>(_componentAt, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -244,15 +253,18 @@ type IBoundaryOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentBoundaryOffset = memo(
-  (props: IBoundaryOffsetProps) => {
-    return React.createElement(NestedOption<IBoundaryOffsetProps>, { ...props });
-  }
-);
+const _componentBoundaryOffset = (props: IBoundaryOffsetProps) => {
+  return React.createElement(NestedOption<IBoundaryOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "boundaryOffset",
+    },
+  });
+};
 
-const BoundaryOffset: typeof _componentBoundaryOffset & IElementDescriptor = Object.assign(_componentBoundaryOffset, {
-  OptionName: "boundaryOffset",
-})
+const BoundaryOffset = Object.assign<typeof _componentBoundaryOffset, NestedComponentMeta>(_componentBoundaryOffset, {
+  componentType: "option",
+});
 
 // owners:
 // Column
@@ -269,21 +281,24 @@ type IButtonProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentButton = memo(
-  (props: IButtonProps) => {
-    return React.createElement(NestedOption<IButtonProps>, { ...props });
-  }
-);
+const _componentButton = (props: IButtonProps) => {
+  return React.createElement(NestedOption<IButtonProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "buttons",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
 
-const Button: typeof _componentButton & IElementDescriptor = Object.assign(_componentButton, {
-  OptionName: "buttons",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const Button = Object.assign<typeof _componentButton, NestedComponentMeta>(_componentButton, {
+  componentType: "option",
+});
 
 // owners:
 // Editing
@@ -294,16 +309,19 @@ type IChangeProps = React.PropsWithChildren<{
   key?: any;
   type?: "insert" | "update" | "remove";
 }>
-const _componentChange = memo(
-  (props: IChangeProps) => {
-    return React.createElement(NestedOption<IChangeProps>, { ...props });
-  }
-);
+const _componentChange = (props: IChangeProps) => {
+  return React.createElement(NestedOption<IChangeProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "changes",
+      IsCollectionItem: true,
+    },
+  });
+};
 
-const Change: typeof _componentChange & IElementDescriptor = Object.assign(_componentChange, {
-  OptionName: "changes",
-  IsCollectionItem: true,
-})
+const Change = Object.assign<typeof _componentChange, NestedComponentMeta>(_componentChange, {
+  componentType: "option",
+});
 
 // owners:
 // Form
@@ -313,15 +331,18 @@ type IColCountByScreenProps = React.PropsWithChildren<{
   sm?: number;
   xs?: number;
 }>
-const _componentColCountByScreen = memo(
-  (props: IColCountByScreenProps) => {
-    return React.createElement(NestedOption<IColCountByScreenProps>, { ...props });
-  }
-);
+const _componentColCountByScreen = (props: IColCountByScreenProps) => {
+  return React.createElement(NestedOption<IColCountByScreenProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "colCountByScreen",
+    },
+  });
+};
 
-const ColCountByScreen: typeof _componentColCountByScreen & IElementDescriptor = Object.assign(_componentColCountByScreen, {
-  OptionName: "colCountByScreen",
-})
+const ColCountByScreen = Object.assign<typeof _componentColCountByScreen, NestedComponentMeta>(_componentColCountByScreen, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -329,15 +350,18 @@ type ICollisionProps = React.PropsWithChildren<{
   x?: "fit" | "flip" | "flipfit" | "none";
   y?: "fit" | "flip" | "flipfit" | "none";
 }>
-const _componentCollision = memo(
-  (props: ICollisionProps) => {
-    return React.createElement(NestedOption<ICollisionProps>, { ...props });
-  }
-);
+const _componentCollision = (props: ICollisionProps) => {
+  return React.createElement(NestedOption<ICollisionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "collision",
+    },
+  });
+};
 
-const Collision: typeof _componentCollision & IElementDescriptor = Object.assign(_componentCollision, {
-  OptionName: "collision",
-})
+const Collision = Object.assign<typeof _componentCollision, NestedComponentMeta>(_componentCollision, {
+  componentType: "option",
+});
 
 // owners:
 // TreeList
@@ -434,57 +458,60 @@ type IColumnProps = React.PropsWithChildren<{
   headerCellRender?: (...params: any) => React.ReactNode;
   headerCellComponent?: React.ComponentType<any>;
 }>
-const _componentColumn = memo(
-  (props: IColumnProps) => {
-    return React.createElement(NestedOption<IColumnProps>, { ...props });
-  }
-);
-
-const Column: typeof _componentColumn & IElementDescriptor = Object.assign(_componentColumn, {
-  OptionName: "columns",
-  IsCollectionItem: true,
-  DefaultsProps: {
-    defaultFilterValue: "filterValue",
-    defaultFilterValues: "filterValues",
-    defaultSelectedFilterOperation: "selectedFilterOperation",
-    defaultSortIndex: "sortIndex",
-    defaultSortOrder: "sortOrder",
-    defaultVisible: "visible",
-    defaultVisibleIndex: "visibleIndex"
-  },
-  ExpectedChildren: {
-    AsyncRule: { optionName: "validationRules", isCollectionItem: true },
-    button: { optionName: "buttons", isCollectionItem: true },
-    columnHeaderFilter: { optionName: "headerFilter", isCollectionItem: false },
-    columnLookup: { optionName: "lookup", isCollectionItem: false },
-    CompareRule: { optionName: "validationRules", isCollectionItem: true },
-    CustomRule: { optionName: "validationRules", isCollectionItem: true },
-    EmailRule: { optionName: "validationRules", isCollectionItem: true },
-    format: { optionName: "format", isCollectionItem: false },
-    formItem: { optionName: "formItem", isCollectionItem: false },
-    headerFilter: { optionName: "headerFilter", isCollectionItem: false },
-    lookup: { optionName: "lookup", isCollectionItem: false },
-    NumericRule: { optionName: "validationRules", isCollectionItem: true },
-    PatternRule: { optionName: "validationRules", isCollectionItem: true },
-    RangeRule: { optionName: "validationRules", isCollectionItem: true },
-    RequiredRule: { optionName: "validationRules", isCollectionItem: true },
-    StringLengthRule: { optionName: "validationRules", isCollectionItem: true },
-    validationRule: { optionName: "validationRules", isCollectionItem: true }
-  },
-  TemplateProps: [{
-    tmplOption: "cellTemplate",
-    render: "cellRender",
-    component: "cellComponent"
-  }, {
-    tmplOption: "editCellTemplate",
-    render: "editCellRender",
-    component: "editCellComponent"
-  }, {
-    tmplOption: "headerCellTemplate",
-    render: "headerCellRender",
-    component: "headerCellComponent"
-  }],
-})
+const _componentColumn = (props: IColumnProps) => {
+  return React.createElement(NestedOption<IColumnProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "columns",
+      IsCollectionItem: true,
+      DefaultsProps: {
+        defaultFilterValue: "filterValue",
+        defaultFilterValues: "filterValues",
+        defaultSelectedFilterOperation: "selectedFilterOperation",
+        defaultSortIndex: "sortIndex",
+        defaultSortOrder: "sortOrder",
+        defaultVisible: "visible",
+        defaultVisibleIndex: "visibleIndex"
+      },
+      ExpectedChildren: {
+        AsyncRule: { optionName: "validationRules", isCollectionItem: true },
+        button: { optionName: "buttons", isCollectionItem: true },
+        columnHeaderFilter: { optionName: "headerFilter", isCollectionItem: false },
+        columnLookup: { optionName: "lookup", isCollectionItem: false },
+        CompareRule: { optionName: "validationRules", isCollectionItem: true },
+        CustomRule: { optionName: "validationRules", isCollectionItem: true },
+        EmailRule: { optionName: "validationRules", isCollectionItem: true },
+        format: { optionName: "format", isCollectionItem: false },
+        formItem: { optionName: "formItem", isCollectionItem: false },
+        headerFilter: { optionName: "headerFilter", isCollectionItem: false },
+        lookup: { optionName: "lookup", isCollectionItem: false },
+        NumericRule: { optionName: "validationRules", isCollectionItem: true },
+        PatternRule: { optionName: "validationRules", isCollectionItem: true },
+        RangeRule: { optionName: "validationRules", isCollectionItem: true },
+        RequiredRule: { optionName: "validationRules", isCollectionItem: true },
+        StringLengthRule: { optionName: "validationRules", isCollectionItem: true },
+        validationRule: { optionName: "validationRules", isCollectionItem: true }
+      },
+      TemplateProps: [{
+        tmplOption: "cellTemplate",
+        render: "cellRender",
+        component: "cellComponent"
+      }, {
+        tmplOption: "editCellTemplate",
+        render: "editCellRender",
+        component: "editCellComponent"
+      }, {
+        tmplOption: "headerCellTemplate",
+        render: "headerCellRender",
+        component: "headerCellComponent"
+      }],
+    },
+  });
+};
+
+const Column = Object.assign<typeof _componentColumn, NestedComponentMeta>(_componentColumn, {
+  componentType: "option",
+});
 
 // owners:
 // TreeList
@@ -503,22 +530,25 @@ type IColumnChooserProps = React.PropsWithChildren<{
   title?: string;
   width?: number | string;
 }>
-const _componentColumnChooser = memo(
-  (props: IColumnChooserProps) => {
-    return React.createElement(NestedOption<IColumnChooserProps>, { ...props });
-  }
-);
+const _componentColumnChooser = (props: IColumnChooserProps) => {
+  return React.createElement(NestedOption<IColumnChooserProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "columnChooser",
+      ExpectedChildren: {
+        columnChooserSearch: { optionName: "search", isCollectionItem: false },
+        columnChooserSelection: { optionName: "selection", isCollectionItem: false },
+        position: { optionName: "position", isCollectionItem: false },
+        search: { optionName: "search", isCollectionItem: false },
+        selection: { optionName: "selection", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const ColumnChooser: typeof _componentColumnChooser & IElementDescriptor = Object.assign(_componentColumnChooser, {
-  OptionName: "columnChooser",
-  ExpectedChildren: {
-    columnChooserSearch: { optionName: "search", isCollectionItem: false },
-    columnChooserSelection: { optionName: "selection", isCollectionItem: false },
-    position: { optionName: "position", isCollectionItem: false },
-    search: { optionName: "search", isCollectionItem: false },
-    selection: { optionName: "selection", isCollectionItem: false }
-  },
-})
+const ColumnChooser = Object.assign<typeof _componentColumnChooser, NestedComponentMeta>(_componentColumnChooser, {
+  componentType: "option",
+});
 
 // owners:
 // ColumnChooser
@@ -527,15 +557,18 @@ type IColumnChooserSearchProps = React.PropsWithChildren<{
   enabled?: boolean;
   timeout?: number;
 }>
-const _componentColumnChooserSearch = memo(
-  (props: IColumnChooserSearchProps) => {
-    return React.createElement(NestedOption<IColumnChooserSearchProps>, { ...props });
-  }
-);
+const _componentColumnChooserSearch = (props: IColumnChooserSearchProps) => {
+  return React.createElement(NestedOption<IColumnChooserSearchProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "search",
+    },
+  });
+};
 
-const ColumnChooserSearch: typeof _componentColumnChooserSearch & IElementDescriptor = Object.assign(_componentColumnChooserSearch, {
-  OptionName: "search",
-})
+const ColumnChooserSearch = Object.assign<typeof _componentColumnChooserSearch, NestedComponentMeta>(_componentColumnChooserSearch, {
+  componentType: "option",
+});
 
 // owners:
 // ColumnChooser
@@ -544,15 +577,18 @@ type IColumnChooserSelectionProps = React.PropsWithChildren<{
   recursive?: boolean;
   selectByClick?: boolean;
 }>
-const _componentColumnChooserSelection = memo(
-  (props: IColumnChooserSelectionProps) => {
-    return React.createElement(NestedOption<IColumnChooserSelectionProps>, { ...props });
-  }
-);
+const _componentColumnChooserSelection = (props: IColumnChooserSelectionProps) => {
+  return React.createElement(NestedOption<IColumnChooserSelectionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "selection",
+    },
+  });
+};
 
-const ColumnChooserSelection: typeof _componentColumnChooserSelection & IElementDescriptor = Object.assign(_componentColumnChooserSelection, {
-  OptionName: "selection",
-})
+const ColumnChooserSelection = Object.assign<typeof _componentColumnChooserSelection, NestedComponentMeta>(_componentColumnChooserSelection, {
+  componentType: "option",
+});
 
 // owners:
 // TreeList
@@ -573,20 +609,23 @@ type IColumnFixingProps = React.PropsWithChildren<{
     unfix?: string;
   };
 }>
-const _componentColumnFixing = memo(
-  (props: IColumnFixingProps) => {
-    return React.createElement(NestedOption<IColumnFixingProps>, { ...props });
-  }
-);
+const _componentColumnFixing = (props: IColumnFixingProps) => {
+  return React.createElement(NestedOption<IColumnFixingProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "columnFixing",
+      ExpectedChildren: {
+        columnFixingTexts: { optionName: "texts", isCollectionItem: false },
+        icons: { optionName: "icons", isCollectionItem: false },
+        texts: { optionName: "texts", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const ColumnFixing: typeof _componentColumnFixing & IElementDescriptor = Object.assign(_componentColumnFixing, {
-  OptionName: "columnFixing",
-  ExpectedChildren: {
-    columnFixingTexts: { optionName: "texts", isCollectionItem: false },
-    icons: { optionName: "icons", isCollectionItem: false },
-    texts: { optionName: "texts", isCollectionItem: false }
-  },
-})
+const ColumnFixing = Object.assign<typeof _componentColumnFixing, NestedComponentMeta>(_componentColumnFixing, {
+  componentType: "option",
+});
 
 // owners:
 // ColumnFixing
@@ -597,15 +636,18 @@ type IColumnFixingTextsProps = React.PropsWithChildren<{
   stickyPosition?: string;
   unfix?: string;
 }>
-const _componentColumnFixingTexts = memo(
-  (props: IColumnFixingTextsProps) => {
-    return React.createElement(NestedOption<IColumnFixingTextsProps>, { ...props });
-  }
-);
+const _componentColumnFixingTexts = (props: IColumnFixingTextsProps) => {
+  return React.createElement(NestedOption<IColumnFixingTextsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "texts",
+    },
+  });
+};
 
-const ColumnFixingTexts: typeof _componentColumnFixingTexts & IElementDescriptor = Object.assign(_componentColumnFixingTexts, {
-  OptionName: "texts",
-})
+const ColumnFixingTexts = Object.assign<typeof _componentColumnFixingTexts, NestedComponentMeta>(_componentColumnFixingTexts, {
+  componentType: "option",
+});
 
 // owners:
 // Column
@@ -619,19 +661,22 @@ type IColumnHeaderFilterProps = React.PropsWithChildren<{
   searchMode?: "contains" | "startswith" | "equals";
   width?: number | string;
 }>
-const _componentColumnHeaderFilter = memo(
-  (props: IColumnHeaderFilterProps) => {
-    return React.createElement(NestedOption<IColumnHeaderFilterProps>, { ...props });
-  }
-);
+const _componentColumnHeaderFilter = (props: IColumnHeaderFilterProps) => {
+  return React.createElement(NestedOption<IColumnHeaderFilterProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "headerFilter",
+      ExpectedChildren: {
+        columnHeaderFilterSearch: { optionName: "search", isCollectionItem: false },
+        search: { optionName: "search", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const ColumnHeaderFilter: typeof _componentColumnHeaderFilter & IElementDescriptor = Object.assign(_componentColumnHeaderFilter, {
-  OptionName: "headerFilter",
-  ExpectedChildren: {
-    columnHeaderFilterSearch: { optionName: "search", isCollectionItem: false },
-    search: { optionName: "search", isCollectionItem: false }
-  },
-})
+const ColumnHeaderFilter = Object.assign<typeof _componentColumnHeaderFilter, NestedComponentMeta>(_componentColumnHeaderFilter, {
+  componentType: "option",
+});
 
 // owners:
 // ColumnHeaderFilter
@@ -642,15 +687,18 @@ type IColumnHeaderFilterSearchProps = React.PropsWithChildren<{
   searchExpr?: Array<(() => any) | string> | (() => any) | string;
   timeout?: number;
 }>
-const _componentColumnHeaderFilterSearch = memo(
-  (props: IColumnHeaderFilterSearchProps) => {
-    return React.createElement(NestedOption<IColumnHeaderFilterSearchProps>, { ...props });
-  }
-);
+const _componentColumnHeaderFilterSearch = (props: IColumnHeaderFilterSearchProps) => {
+  return React.createElement(NestedOption<IColumnHeaderFilterSearchProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "search",
+    },
+  });
+};
 
-const ColumnHeaderFilterSearch: typeof _componentColumnHeaderFilterSearch & IElementDescriptor = Object.assign(_componentColumnHeaderFilterSearch, {
-  OptionName: "search",
-})
+const ColumnHeaderFilterSearch = Object.assign<typeof _componentColumnHeaderFilterSearch, NestedComponentMeta>(_componentColumnHeaderFilterSearch, {
+  componentType: "option",
+});
 
 // owners:
 // Column
@@ -661,15 +709,18 @@ type IColumnLookupProps = React.PropsWithChildren<{
   displayExpr?: ((data: any) => string) | string;
   valueExpr?: string;
 }>
-const _componentColumnLookup = memo(
-  (props: IColumnLookupProps) => {
-    return React.createElement(NestedOption<IColumnLookupProps>, { ...props });
-  }
-);
+const _componentColumnLookup = (props: IColumnLookupProps) => {
+  return React.createElement(NestedOption<IColumnLookupProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "lookup",
+    },
+  });
+};
 
-const ColumnLookup: typeof _componentColumnLookup & IElementDescriptor = Object.assign(_componentColumnLookup, {
-  OptionName: "lookup",
-})
+const ColumnLookup = Object.assign<typeof _componentColumnLookup, NestedComponentMeta>(_componentColumnLookup, {
+  componentType: "option",
+});
 
 // owners:
 // FormItem
@@ -681,19 +732,22 @@ type ICompareRuleProps = React.PropsWithChildren<{
   message?: string;
   type?: "required" | "numeric" | "range" | "stringLength" | "custom" | "compare" | "pattern" | "email" | "async";
 }>
-const _componentCompareRule = memo(
-  (props: ICompareRuleProps) => {
-    return React.createElement(NestedOption<ICompareRuleProps>, { ...props });
-  }
-);
+const _componentCompareRule = (props: ICompareRuleProps) => {
+  return React.createElement(NestedOption<ICompareRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "compare"
+      },
+    },
+  });
+};
 
-const CompareRule: typeof _componentCompareRule & IElementDescriptor = Object.assign(_componentCompareRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "compare"
-  },
-})
+const CompareRule = Object.assign<typeof _componentCompareRule, NestedComponentMeta>(_componentCompareRule, {
+  componentType: "option",
+});
 
 // owners:
 // RowDragging
@@ -701,15 +755,18 @@ type ICursorOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentCursorOffset = memo(
-  (props: ICursorOffsetProps) => {
-    return React.createElement(NestedOption<ICursorOffsetProps>, { ...props });
-  }
-);
+const _componentCursorOffset = (props: ICursorOffsetProps) => {
+  return React.createElement(NestedOption<ICursorOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "cursorOffset",
+    },
+  });
+};
 
-const CursorOffset: typeof _componentCursorOffset & IElementDescriptor = Object.assign(_componentCursorOffset, {
-  OptionName: "cursorOffset",
-})
+const CursorOffset = Object.assign<typeof _componentCursorOffset, NestedComponentMeta>(_componentCursorOffset, {
+  componentType: "option",
+});
 
 // owners:
 // FilterBuilder
@@ -725,21 +782,24 @@ type ICustomOperationProps = React.PropsWithChildren<{
   editorRender?: (...params: any) => React.ReactNode;
   editorComponent?: React.ComponentType<any>;
 }>
-const _componentCustomOperation = memo(
-  (props: ICustomOperationProps) => {
-    return React.createElement(NestedOption<ICustomOperationProps>, { ...props });
-  }
-);
+const _componentCustomOperation = (props: ICustomOperationProps) => {
+  return React.createElement(NestedOption<ICustomOperationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "customOperations",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "editorTemplate",
+        render: "editorRender",
+        component: "editorComponent"
+      }],
+    },
+  });
+};
 
-const CustomOperation: typeof _componentCustomOperation & IElementDescriptor = Object.assign(_componentCustomOperation, {
-  OptionName: "customOperations",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "editorTemplate",
-    render: "editorRender",
-    component: "editorComponent"
-  }],
-})
+const CustomOperation = Object.assign<typeof _componentCustomOperation, NestedComponentMeta>(_componentCustomOperation, {
+  componentType: "option",
+});
 
 // owners:
 // FormItem
@@ -751,19 +811,22 @@ type ICustomRuleProps = React.PropsWithChildren<{
   type?: "required" | "numeric" | "range" | "stringLength" | "custom" | "compare" | "pattern" | "email" | "async";
   validationCallback?: ((options: { column: Record<string, any>, data: Record<string, any>, formItem: Record<string, any>, rule: Record<string, any>, validator: Record<string, any>, value: string | number }) => boolean);
 }>
-const _componentCustomRule = memo(
-  (props: ICustomRuleProps) => {
-    return React.createElement(NestedOption<ICustomRuleProps>, { ...props });
-  }
-);
+const _componentCustomRule = (props: ICustomRuleProps) => {
+  return React.createElement(NestedOption<ICustomRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "custom"
+      },
+    },
+  });
+};
 
-const CustomRule: typeof _componentCustomRule & IElementDescriptor = Object.assign(_componentCustomRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "custom"
-  },
-})
+const CustomRule = Object.assign<typeof _componentCustomRule, NestedComponentMeta>(_componentCustomRule, {
+  componentType: "option",
+});
 
 // owners:
 // TreeList
@@ -803,27 +866,30 @@ type IEditingProps = React.PropsWithChildren<{
   defaultEditRowKey?: any;
   onEditRowKeyChange?: (value: any) => void;
 }>
-const _componentEditing = memo(
-  (props: IEditingProps) => {
-    return React.createElement(NestedOption<IEditingProps>, { ...props });
-  }
-);
-
-const Editing: typeof _componentEditing & IElementDescriptor = Object.assign(_componentEditing, {
-  OptionName: "editing",
-  DefaultsProps: {
-    defaultChanges: "changes",
-    defaultEditColumnName: "editColumnName",
-    defaultEditRowKey: "editRowKey"
-  },
-  ExpectedChildren: {
-    change: { optionName: "changes", isCollectionItem: true },
-    editingTexts: { optionName: "texts", isCollectionItem: false },
-    form: { optionName: "form", isCollectionItem: false },
-    popup: { optionName: "popup", isCollectionItem: false },
-    texts: { optionName: "texts", isCollectionItem: false }
-  },
-})
+const _componentEditing = (props: IEditingProps) => {
+  return React.createElement(NestedOption<IEditingProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "editing",
+      DefaultsProps: {
+        defaultChanges: "changes",
+        defaultEditColumnName: "editColumnName",
+        defaultEditRowKey: "editRowKey"
+      },
+      ExpectedChildren: {
+        change: { optionName: "changes", isCollectionItem: true },
+        editingTexts: { optionName: "texts", isCollectionItem: false },
+        form: { optionName: "form", isCollectionItem: false },
+        popup: { optionName: "popup", isCollectionItem: false },
+        texts: { optionName: "texts", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Editing = Object.assign<typeof _componentEditing, NestedComponentMeta>(_componentEditing, {
+  componentType: "option",
+});
 
 // owners:
 // Editing
@@ -841,15 +907,18 @@ type IEditingTextsProps = React.PropsWithChildren<{
   undeleteRow?: string;
   validationCancelChanges?: string;
 }>
-const _componentEditingTexts = memo(
-  (props: IEditingTextsProps) => {
-    return React.createElement(NestedOption<IEditingTextsProps>, { ...props });
-  }
-);
+const _componentEditingTexts = (props: IEditingTextsProps) => {
+  return React.createElement(NestedOption<IEditingTextsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "texts",
+    },
+  });
+};
 
-const EditingTexts: typeof _componentEditingTexts & IElementDescriptor = Object.assign(_componentEditingTexts, {
-  OptionName: "texts",
-})
+const EditingTexts = Object.assign<typeof _componentEditingTexts, NestedComponentMeta>(_componentEditingTexts, {
+  componentType: "option",
+});
 
 // owners:
 // FormItem
@@ -859,19 +928,22 @@ type IEmailRuleProps = React.PropsWithChildren<{
   message?: string;
   type?: "required" | "numeric" | "range" | "stringLength" | "custom" | "compare" | "pattern" | "email" | "async";
 }>
-const _componentEmailRule = memo(
-  (props: IEmailRuleProps) => {
-    return React.createElement(NestedOption<IEmailRuleProps>, { ...props });
-  }
-);
+const _componentEmailRule = (props: IEmailRuleProps) => {
+  return React.createElement(NestedOption<IEmailRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "email"
+      },
+    },
+  });
+};
 
-const EmailRule: typeof _componentEmailRule & IElementDescriptor = Object.assign(_componentEmailRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "email"
-  },
-})
+const EmailRule = Object.assign<typeof _componentEmailRule, NestedComponentMeta>(_componentEmailRule, {
+  componentType: "option",
+});
 
 // owners:
 // FilterBuilder
@@ -897,26 +969,29 @@ type IFieldProps = React.PropsWithChildren<{
   editorRender?: (...params: any) => React.ReactNode;
   editorComponent?: React.ComponentType<any>;
 }>
-const _componentField = memo(
-  (props: IFieldProps) => {
-    return React.createElement(NestedOption<IFieldProps>, { ...props });
-  }
-);
-
-const Field: typeof _componentField & IElementDescriptor = Object.assign(_componentField, {
-  OptionName: "fields",
-  IsCollectionItem: true,
-  ExpectedChildren: {
-    fieldLookup: { optionName: "lookup", isCollectionItem: false },
-    format: { optionName: "format", isCollectionItem: false },
-    lookup: { optionName: "lookup", isCollectionItem: false }
-  },
-  TemplateProps: [{
-    tmplOption: "editorTemplate",
-    render: "editorRender",
-    component: "editorComponent"
-  }],
-})
+const _componentField = (props: IFieldProps) => {
+  return React.createElement(NestedOption<IFieldProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "fields",
+      IsCollectionItem: true,
+      ExpectedChildren: {
+        fieldLookup: { optionName: "lookup", isCollectionItem: false },
+        format: { optionName: "format", isCollectionItem: false },
+        lookup: { optionName: "lookup", isCollectionItem: false }
+      },
+      TemplateProps: [{
+        tmplOption: "editorTemplate",
+        render: "editorRender",
+        component: "editorComponent"
+      }],
+    },
+  });
+};
+
+const Field = Object.assign<typeof _componentField, NestedComponentMeta>(_componentField, {
+  componentType: "option",
+});
 
 // owners:
 // Field
@@ -926,15 +1001,18 @@ type IFieldLookupProps = React.PropsWithChildren<{
   displayExpr?: ((data: any) => string) | string;
   valueExpr?: ((data: any) => string | number | boolean) | string;
 }>
-const _componentFieldLookup = memo(
-  (props: IFieldLookupProps) => {
-    return React.createElement(NestedOption<IFieldLookupProps>, { ...props });
-  }
-);
+const _componentFieldLookup = (props: IFieldLookupProps) => {
+  return React.createElement(NestedOption<IFieldLookupProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "lookup",
+    },
+  });
+};
 
-const FieldLookup: typeof _componentFieldLookup & IElementDescriptor = Object.assign(_componentFieldLookup, {
-  OptionName: "lookup",
-})
+const FieldLookup = Object.assign<typeof _componentFieldLookup, NestedComponentMeta>(_componentFieldLookup, {
+  componentType: "option",
+});
 
 // owners:
 // TreeList
@@ -989,24 +1067,27 @@ type IFilterBuilderProps = React.PropsWithChildren<{
   defaultValue?: Array<any> | (() => any) | string;
   onValueChange?: (value: Array<any> | (() => any) | string) => void;
 }>
-const _componentFilterBuilder = memo(
-  (props: IFilterBuilderProps) => {
-    return React.createElement(NestedOption<IFilterBuilderProps>, { ...props });
-  }
-);
-
-const FilterBuilder: typeof _componentFilterBuilder & IElementDescriptor = Object.assign(_componentFilterBuilder, {
-  OptionName: "filterBuilder",
-  DefaultsProps: {
-    defaultValue: "value"
-  },
-  ExpectedChildren: {
-    customOperation: { optionName: "customOperations", isCollectionItem: true },
-    field: { optionName: "fields", isCollectionItem: true },
-    filterOperationDescriptions: { optionName: "filterOperationDescriptions", isCollectionItem: false },
-    groupOperationDescriptions: { optionName: "groupOperationDescriptions", isCollectionItem: false }
-  },
-})
+const _componentFilterBuilder = (props: IFilterBuilderProps) => {
+  return React.createElement(NestedOption<IFilterBuilderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "filterBuilder",
+      DefaultsProps: {
+        defaultValue: "value"
+      },
+      ExpectedChildren: {
+        customOperation: { optionName: "customOperations", isCollectionItem: true },
+        field: { optionName: "fields", isCollectionItem: true },
+        filterOperationDescriptions: { optionName: "filterOperationDescriptions", isCollectionItem: false },
+        groupOperationDescriptions: { optionName: "groupOperationDescriptions", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const FilterBuilder = Object.assign<typeof _componentFilterBuilder, NestedComponentMeta>(_componentFilterBuilder, {
+  componentType: "option",
+});
 
 // owners:
 // TreeList
@@ -1077,30 +1158,33 @@ type IFilterBuilderPopupProps = React.PropsWithChildren<{
   titleRender?: (...params: any) => React.ReactNode;
   titleComponent?: React.ComponentType<any>;
 }>
-const _componentFilterBuilderPopup = memo(
-  (props: IFilterBuilderPopupProps) => {
-    return React.createElement(NestedOption<IFilterBuilderPopupProps>, { ...props });
-  }
-);
-
-const FilterBuilderPopup: typeof _componentFilterBuilderPopup & IElementDescriptor = Object.assign(_componentFilterBuilderPopup, {
-  OptionName: "filterBuilderPopup",
-  DefaultsProps: {
-    defaultHeight: "height",
-    defaultPosition: "position",
-    defaultVisible: "visible",
-    defaultWidth: "width"
-  },
-  TemplateProps: [{
-    tmplOption: "contentTemplate",
-    render: "contentRender",
-    component: "contentComponent"
-  }, {
-    tmplOption: "titleTemplate",
-    render: "titleRender",
-    component: "titleComponent"
-  }],
-})
+const _componentFilterBuilderPopup = (props: IFilterBuilderPopupProps) => {
+  return React.createElement(NestedOption<IFilterBuilderPopupProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "filterBuilderPopup",
+      DefaultsProps: {
+        defaultHeight: "height",
+        defaultPosition: "position",
+        defaultVisible: "visible",
+        defaultWidth: "width"
+      },
+      TemplateProps: [{
+        tmplOption: "contentTemplate",
+        render: "contentRender",
+        component: "contentComponent"
+      }, {
+        tmplOption: "titleTemplate",
+        render: "titleRender",
+        component: "titleComponent"
+      }],
+    },
+  });
+};
+
+const FilterBuilderPopup = Object.assign<typeof _componentFilterBuilderPopup, NestedComponentMeta>(_componentFilterBuilderPopup, {
+  componentType: "option",
+});
 
 // owners:
 // FilterBuilder
@@ -1119,15 +1203,18 @@ type IFilterOperationDescriptionsProps = React.PropsWithChildren<{
   notEqual?: string;
   startsWith?: string;
 }>
-const _componentFilterOperationDescriptions = memo(
-  (props: IFilterOperationDescriptionsProps) => {
-    return React.createElement(NestedOption<IFilterOperationDescriptionsProps>, { ...props });
-  }
-);
+const _componentFilterOperationDescriptions = (props: IFilterOperationDescriptionsProps) => {
+  return React.createElement(NestedOption<IFilterOperationDescriptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "filterOperationDescriptions",
+    },
+  });
+};
 
-const FilterOperationDescriptions: typeof _componentFilterOperationDescriptions & IElementDescriptor = Object.assign(_componentFilterOperationDescriptions, {
-  OptionName: "filterOperationDescriptions",
-})
+const FilterOperationDescriptions = Object.assign<typeof _componentFilterOperationDescriptions, NestedComponentMeta>(_componentFilterOperationDescriptions, {
+  componentType: "option",
+});
 
 // owners:
 // TreeList
@@ -1143,22 +1230,25 @@ type IFilterPanelProps = React.PropsWithChildren<{
   defaultFilterEnabled?: boolean;
   onFilterEnabledChange?: (value: boolean) => void;
 }>
-const _componentFilterPanel = memo(
-  (props: IFilterPanelProps) => {
-    return React.createElement(NestedOption<IFilterPanelProps>, { ...props });
-  }
-);
+const _componentFilterPanel = (props: IFilterPanelProps) => {
+  return React.createElement(NestedOption<IFilterPanelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "filterPanel",
+      DefaultsProps: {
+        defaultFilterEnabled: "filterEnabled"
+      },
+      ExpectedChildren: {
+        filterPanelTexts: { optionName: "texts", isCollectionItem: false },
+        texts: { optionName: "texts", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const FilterPanel: typeof _componentFilterPanel & IElementDescriptor = Object.assign(_componentFilterPanel, {
-  OptionName: "filterPanel",
-  DefaultsProps: {
-    defaultFilterEnabled: "filterEnabled"
-  },
-  ExpectedChildren: {
-    filterPanelTexts: { optionName: "texts", isCollectionItem: false },
-    texts: { optionName: "texts", isCollectionItem: false }
-  },
-})
+const FilterPanel = Object.assign<typeof _componentFilterPanel, NestedComponentMeta>(_componentFilterPanel, {
+  componentType: "option",
+});
 
 // owners:
 // FilterPanel
@@ -1167,15 +1257,18 @@ type IFilterPanelTextsProps = React.PropsWithChildren<{
   createFilter?: string;
   filterEnabledHint?: string;
 }>
-const _componentFilterPanelTexts = memo(
-  (props: IFilterPanelTextsProps) => {
-    return React.createElement(NestedOption<IFilterPanelTextsProps>, { ...props });
-  }
-);
+const _componentFilterPanelTexts = (props: IFilterPanelTextsProps) => {
+  return React.createElement(NestedOption<IFilterPanelTextsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "texts",
+    },
+  });
+};
 
-const FilterPanelTexts: typeof _componentFilterPanelTexts & IElementDescriptor = Object.assign(_componentFilterPanelTexts, {
-  OptionName: "texts",
-})
+const FilterPanelTexts = Object.assign<typeof _componentFilterPanelTexts, NestedComponentMeta>(_componentFilterPanelTexts, {
+  componentType: "option",
+});
 
 // owners:
 // TreeList
@@ -1202,18 +1295,21 @@ type IFilterRowProps = React.PropsWithChildren<{
   showOperationChooser?: boolean;
   visible?: boolean;
 }>
-const _componentFilterRow = memo(
-  (props: IFilterRowProps) => {
-    return React.createElement(NestedOption<IFilterRowProps>, { ...props });
-  }
-);
+const _componentFilterRow = (props: IFilterRowProps) => {
+  return React.createElement(NestedOption<IFilterRowProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "filterRow",
+      ExpectedChildren: {
+        operationDescriptions: { optionName: "operationDescriptions", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const FilterRow: typeof _componentFilterRow & IElementDescriptor = Object.assign(_componentFilterRow, {
-  OptionName: "filterRow",
-  ExpectedChildren: {
-    operationDescriptions: { optionName: "operationDescriptions", isCollectionItem: false }
-  },
-})
+const FilterRow = Object.assign<typeof _componentFilterRow, NestedComponentMeta>(_componentFilterRow, {
+  componentType: "option",
+});
 
 // owners:
 // Editing
@@ -1267,21 +1363,24 @@ type IFormProps = React.PropsWithChildren<{
   defaultFormData?: any;
   onFormDataChange?: (value: any) => void;
 }>
-const _componentForm = memo(
-  (props: IFormProps) => {
-    return React.createElement(NestedOption<IFormProps>, { ...props });
-  }
-);
+const _componentForm = (props: IFormProps) => {
+  return React.createElement(NestedOption<IFormProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "form",
+      DefaultsProps: {
+        defaultFormData: "formData"
+      },
+      ExpectedChildren: {
+        colCountByScreen: { optionName: "colCountByScreen", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const Form: typeof _componentForm & IElementDescriptor = Object.assign(_componentForm, {
-  OptionName: "form",
-  DefaultsProps: {
-    defaultFormData: "formData"
-  },
-  ExpectedChildren: {
-    colCountByScreen: { optionName: "colCountByScreen", isCollectionItem: false }
-  },
-})
+const Form = Object.assign<typeof _componentForm, NestedComponentMeta>(_componentForm, {
+  componentType: "option",
+});
 
 // owners:
 // Column
@@ -1294,15 +1393,18 @@ type IFormatProps = React.PropsWithChildren<{
   type?: "billions" | "currency" | "day" | "decimal" | "exponential" | "fixedPoint" | "largeNumber" | "longDate" | "longTime" | "millions" | "millisecond" | "month" | "monthAndDay" | "monthAndYear" | "percent" | "quarter" | "quarterAndYear" | "shortDate" | "shortTime" | "thousands" | "trillions" | "year" | "dayOfWeek" | "hour" | "longDateLongTime" | "minute" | "second" | "shortDateShortTime";
   useCurrencyAccountingStyle?: boolean;
 }>
-const _componentFormat = memo(
-  (props: IFormatProps) => {
-    return React.createElement(NestedOption<IFormatProps>, { ...props });
-  }
-);
+const _componentFormat = (props: IFormatProps) => {
+  return React.createElement(NestedOption<IFormatProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "format",
+    },
+  });
+};
 
-const Format: typeof _componentFormat & IElementDescriptor = Object.assign(_componentFormat, {
-  OptionName: "format",
-})
+const Format = Object.assign<typeof _componentFormat, NestedComponentMeta>(_componentFormat, {
+  componentType: "option",
+});
 
 // owners:
 // Column
@@ -1331,33 +1433,36 @@ type IFormItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentFormItem = memo(
-  (props: IFormItemProps) => {
-    return React.createElement(NestedOption<IFormItemProps>, { ...props });
-  }
-);
-
-const FormItem: typeof _componentFormItem & IElementDescriptor = Object.assign(_componentFormItem, {
-  OptionName: "formItem",
-  ExpectedChildren: {
-    AsyncRule: { optionName: "validationRules", isCollectionItem: true },
-    CompareRule: { optionName: "validationRules", isCollectionItem: true },
-    CustomRule: { optionName: "validationRules", isCollectionItem: true },
-    EmailRule: { optionName: "validationRules", isCollectionItem: true },
-    label: { optionName: "label", isCollectionItem: false },
-    NumericRule: { optionName: "validationRules", isCollectionItem: true },
-    PatternRule: { optionName: "validationRules", isCollectionItem: true },
-    RangeRule: { optionName: "validationRules", isCollectionItem: true },
-    RequiredRule: { optionName: "validationRules", isCollectionItem: true },
-    StringLengthRule: { optionName: "validationRules", isCollectionItem: true },
-    validationRule: { optionName: "validationRules", isCollectionItem: true }
-  },
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentFormItem = (props: IFormItemProps) => {
+  return React.createElement(NestedOption<IFormItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "formItem",
+      ExpectedChildren: {
+        AsyncRule: { optionName: "validationRules", isCollectionItem: true },
+        CompareRule: { optionName: "validationRules", isCollectionItem: true },
+        CustomRule: { optionName: "validationRules", isCollectionItem: true },
+        EmailRule: { optionName: "validationRules", isCollectionItem: true },
+        label: { optionName: "label", isCollectionItem: false },
+        NumericRule: { optionName: "validationRules", isCollectionItem: true },
+        PatternRule: { optionName: "validationRules", isCollectionItem: true },
+        RangeRule: { optionName: "validationRules", isCollectionItem: true },
+        RequiredRule: { optionName: "validationRules", isCollectionItem: true },
+        StringLengthRule: { optionName: "validationRules", isCollectionItem: true },
+        validationRule: { optionName: "validationRules", isCollectionItem: true }
+      },
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const FormItem = Object.assign<typeof _componentFormItem, NestedComponentMeta>(_componentFormItem, {
+  componentType: "option",
+});
 
 // owners:
 // Hide
@@ -1368,18 +1473,21 @@ type IFromProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentFrom = memo(
-  (props: IFromProps) => {
-    return React.createElement(NestedOption<IFromProps>, { ...props });
-  }
-);
+const _componentFrom = (props: IFromProps) => {
+  return React.createElement(NestedOption<IFromProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "from",
+      ExpectedChildren: {
+        position: { optionName: "position", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const From: typeof _componentFrom & IElementDescriptor = Object.assign(_componentFrom, {
-  OptionName: "from",
-  ExpectedChildren: {
-    position: { optionName: "position", isCollectionItem: false }
-  },
-})
+const From = Object.assign<typeof _componentFrom, NestedComponentMeta>(_componentFrom, {
+  componentType: "option",
+});
 
 // owners:
 // FilterBuilder
@@ -1389,15 +1497,18 @@ type IGroupOperationDescriptionsProps = React.PropsWithChildren<{
   notOr?: string;
   or?: string;
 }>
-const _componentGroupOperationDescriptions = memo(
-  (props: IGroupOperationDescriptionsProps) => {
-    return React.createElement(NestedOption<IGroupOperationDescriptionsProps>, { ...props });
-  }
-);
+const _componentGroupOperationDescriptions = (props: IGroupOperationDescriptionsProps) => {
+  return React.createElement(NestedOption<IGroupOperationDescriptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "groupOperationDescriptions",
+    },
+  });
+};
 
-const GroupOperationDescriptions: typeof _componentGroupOperationDescriptions & IElementDescriptor = Object.assign(_componentGroupOperationDescriptions, {
-  OptionName: "groupOperationDescriptions",
-})
+const GroupOperationDescriptions = Object.assign<typeof _componentGroupOperationDescriptions, NestedComponentMeta>(_componentGroupOperationDescriptions, {
+  componentType: "option",
+});
 
 // owners:
 // Column
@@ -1419,15 +1530,18 @@ type IHeaderFilterProps = React.PropsWithChildren<{
   };
   visible?: boolean;
 }>
-const _componentHeaderFilter = memo(
-  (props: IHeaderFilterProps) => {
-    return React.createElement(NestedOption<IHeaderFilterProps>, { ...props });
-  }
-);
+const _componentHeaderFilter = (props: IHeaderFilterProps) => {
+  return React.createElement(NestedOption<IHeaderFilterProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "headerFilter",
+    },
+  });
+};
 
-const HeaderFilter: typeof _componentHeaderFilter & IElementDescriptor = Object.assign(_componentHeaderFilter, {
-  OptionName: "headerFilter",
-})
+const HeaderFilter = Object.assign<typeof _componentHeaderFilter, NestedComponentMeta>(_componentHeaderFilter, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -1443,19 +1557,22 @@ type IHideProps = React.PropsWithChildren<{
   to?: AnimationState;
   type?: "css" | "fade" | "fadeIn" | "fadeOut" | "pop" | "slide" | "slideIn" | "slideOut";
 }>
-const _componentHide = memo(
-  (props: IHideProps) => {
-    return React.createElement(NestedOption<IHideProps>, { ...props });
-  }
-);
+const _componentHide = (props: IHideProps) => {
+  return React.createElement(NestedOption<IHideProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hide",
+      ExpectedChildren: {
+        from: { optionName: "from", isCollectionItem: false },
+        to: { optionName: "to", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const Hide: typeof _componentHide & IElementDescriptor = Object.assign(_componentHide, {
-  OptionName: "hide",
-  ExpectedChildren: {
-    from: { optionName: "from", isCollectionItem: false },
-    to: { optionName: "to", isCollectionItem: false }
-  },
-})
+const Hide = Object.assign<typeof _componentHide, NestedComponentMeta>(_componentHide, {
+  componentType: "option",
+});
 
 // owners:
 // ColumnFixing
@@ -1466,15 +1583,18 @@ type IIconsProps = React.PropsWithChildren<{
   stickyPosition?: string;
   unfix?: string;
 }>
-const _componentIcons = memo(
-  (props: IIconsProps) => {
-    return React.createElement(NestedOption<IIconsProps>, { ...props });
-  }
-);
+const _componentIcons = (props: IIconsProps) => {
+  return React.createElement(NestedOption<IIconsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "icons",
+    },
+  });
+};
 
-const Icons: typeof _componentIcons & IElementDescriptor = Object.assign(_componentIcons, {
-  OptionName: "icons",
-})
+const Icons = Object.assign<typeof _componentIcons, NestedComponentMeta>(_componentIcons, {
+  componentType: "option",
+});
 
 // owners:
 // Toolbar
@@ -1497,25 +1617,28 @@ type IItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentItem = memo(
-  (props: IItemProps) => {
-    return React.createElement(NestedOption<IItemProps>, { ...props });
-  }
-);
-
-const Item: typeof _componentItem & IElementDescriptor = Object.assign(_componentItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "menuItemTemplate",
-    render: "menuItemRender",
-    component: "menuItemComponent"
-  }, {
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentItem = (props: IItemProps) => {
+  return React.createElement(NestedOption<IItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "menuItemTemplate",
+        render: "menuItemRender",
+        component: "menuItemComponent"
+      }, {
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const Item = Object.assign<typeof _componentItem, NestedComponentMeta>(_componentItem, {
+  componentType: "option",
+});
 
 // owners:
 // TreeList
@@ -1525,15 +1648,18 @@ type IKeyboardNavigationProps = React.PropsWithChildren<{
   enterKeyAction?: "startEdit" | "moveFocus";
   enterKeyDirection?: "none" | "column" | "row";
 }>
-const _componentKeyboardNavigation = memo(
-  (props: IKeyboardNavigationProps) => {
-    return React.createElement(NestedOption<IKeyboardNavigationProps>, { ...props });
-  }
-);
+const _componentKeyboardNavigation = (props: IKeyboardNavigationProps) => {
+  return React.createElement(NestedOption<IKeyboardNavigationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "keyboardNavigation",
+    },
+  });
+};
 
-const KeyboardNavigation: typeof _componentKeyboardNavigation & IElementDescriptor = Object.assign(_componentKeyboardNavigation, {
-  OptionName: "keyboardNavigation",
-})
+const KeyboardNavigation = Object.assign<typeof _componentKeyboardNavigation, NestedComponentMeta>(_componentKeyboardNavigation, {
+  componentType: "option",
+});
 
 // owners:
 // FormItem
@@ -1547,20 +1673,23 @@ type ILabelProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentLabel = memo(
-  (props: ILabelProps) => {
-    return React.createElement(NestedOption<ILabelProps>, { ...props });
-  }
-);
+const _componentLabel = (props: ILabelProps) => {
+  return React.createElement(NestedOption<ILabelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "label",
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
 
-const Label: typeof _componentLabel & IElementDescriptor = Object.assign(_componentLabel, {
-  OptionName: "label",
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const Label = Object.assign<typeof _componentLabel, NestedComponentMeta>(_componentLabel, {
+  componentType: "option",
+});
 
 // owners:
 // TreeList
@@ -1575,15 +1704,18 @@ type ILoadPanelProps = React.PropsWithChildren<{
   text?: string;
   width?: number | string;
 }>
-const _componentLoadPanel = memo(
-  (props: ILoadPanelProps) => {
-    return React.createElement(NestedOption<ILoadPanelProps>, { ...props });
-  }
-);
+const _componentLoadPanel = (props: ILoadPanelProps) => {
+  return React.createElement(NestedOption<ILoadPanelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "loadPanel",
+    },
+  });
+};
 
-const LoadPanel: typeof _componentLoadPanel & IElementDescriptor = Object.assign(_componentLoadPanel, {
-  OptionName: "loadPanel",
-})
+const LoadPanel = Object.assign<typeof _componentLoadPanel, NestedComponentMeta>(_componentLoadPanel, {
+  componentType: "option",
+});
 
 // owners:
 // Column
@@ -1595,15 +1727,18 @@ type ILookupProps = React.PropsWithChildren<{
   displayExpr?: ((data: any) => string) | string;
   valueExpr?: string | ((data: any) => string | number | boolean);
 }>
-const _componentLookup = memo(
-  (props: ILookupProps) => {
-    return React.createElement(NestedOption<ILookupProps>, { ...props });
-  }
-);
+const _componentLookup = (props: ILookupProps) => {
+  return React.createElement(NestedOption<ILookupProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "lookup",
+    },
+  });
+};
 
-const Lookup: typeof _componentLookup & IElementDescriptor = Object.assign(_componentLookup, {
-  OptionName: "lookup",
-})
+const Lookup = Object.assign<typeof _componentLookup, NestedComponentMeta>(_componentLookup, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -1611,15 +1746,18 @@ type IMyProps = React.PropsWithChildren<{
   x?: "center" | "left" | "right";
   y?: "bottom" | "center" | "top";
 }>
-const _componentMy = memo(
-  (props: IMyProps) => {
-    return React.createElement(NestedOption<IMyProps>, { ...props });
-  }
-);
+const _componentMy = (props: IMyProps) => {
+  return React.createElement(NestedOption<IMyProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "my",
+    },
+  });
+};
 
-const My: typeof _componentMy & IElementDescriptor = Object.assign(_componentMy, {
-  OptionName: "my",
-})
+const My = Object.assign<typeof _componentMy, NestedComponentMeta>(_componentMy, {
+  componentType: "option",
+});
 
 // owners:
 // FormItem
@@ -1629,19 +1767,22 @@ type INumericRuleProps = React.PropsWithChildren<{
   message?: string;
   type?: "required" | "numeric" | "range" | "stringLength" | "custom" | "compare" | "pattern" | "email" | "async";
 }>
-const _componentNumericRule = memo(
-  (props: INumericRuleProps) => {
-    return React.createElement(NestedOption<INumericRuleProps>, { ...props });
-  }
-);
+const _componentNumericRule = (props: INumericRuleProps) => {
+  return React.createElement(NestedOption<INumericRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "numeric"
+      },
+    },
+  });
+};
 
-const NumericRule: typeof _componentNumericRule & IElementDescriptor = Object.assign(_componentNumericRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "numeric"
-  },
-})
+const NumericRule = Object.assign<typeof _componentNumericRule, NestedComponentMeta>(_componentNumericRule, {
+  componentType: "option",
+});
 
 // owners:
 // Position
@@ -1649,15 +1790,18 @@ type IOffsetProps = React.PropsWithChildren<{
   x?: number;
   y?: number;
 }>
-const _componentOffset = memo(
-  (props: IOffsetProps) => {
-    return React.createElement(NestedOption<IOffsetProps>, { ...props });
-  }
-);
+const _componentOffset = (props: IOffsetProps) => {
+  return React.createElement(NestedOption<IOffsetProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "offset",
+    },
+  });
+};
 
-const Offset: typeof _componentOffset & IElementDescriptor = Object.assign(_componentOffset, {
-  OptionName: "offset",
-})
+const Offset = Object.assign<typeof _componentOffset, NestedComponentMeta>(_componentOffset, {
+  componentType: "option",
+});
 
 // owners:
 // FilterRow
@@ -1674,15 +1818,18 @@ type IOperationDescriptionsProps = React.PropsWithChildren<{
   notEqual?: string;
   startsWith?: string;
 }>
-const _componentOperationDescriptions = memo(
-  (props: IOperationDescriptionsProps) => {
-    return React.createElement(NestedOption<IOperationDescriptionsProps>, { ...props });
-  }
-);
+const _componentOperationDescriptions = (props: IOperationDescriptionsProps) => {
+  return React.createElement(NestedOption<IOperationDescriptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "operationDescriptions",
+    },
+  });
+};
 
-const OperationDescriptions: typeof _componentOperationDescriptions & IElementDescriptor = Object.assign(_componentOperationDescriptions, {
-  OptionName: "operationDescriptions",
-})
+const OperationDescriptions = Object.assign<typeof _componentOperationDescriptions, NestedComponentMeta>(_componentOperationDescriptions, {
+  componentType: "option",
+});
 
 // owners:
 // TreeList
@@ -1696,15 +1843,18 @@ type IPagerProps = React.PropsWithChildren<{
   showPageSizeSelector?: boolean;
   visible?: boolean | "auto";
 }>
-const _componentPager = memo(
-  (props: IPagerProps) => {
-    return React.createElement(NestedOption<IPagerProps>, { ...props });
-  }
-);
+const _componentPager = (props: IPagerProps) => {
+  return React.createElement(NestedOption<IPagerProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "pager",
+    },
+  });
+};
 
-const Pager: typeof _componentPager & IElementDescriptor = Object.assign(_componentPager, {
-  OptionName: "pager",
-})
+const Pager = Object.assign<typeof _componentPager, NestedComponentMeta>(_componentPager, {
+  componentType: "option",
+});
 
 // owners:
 // TreeList
@@ -1717,19 +1867,22 @@ type IPagingProps = React.PropsWithChildren<{
   defaultPageSize?: number;
   onPageSizeChange?: (value: number) => void;
 }>
-const _componentPaging = memo(
-  (props: IPagingProps) => {
-    return React.createElement(NestedOption<IPagingProps>, { ...props });
-  }
-);
+const _componentPaging = (props: IPagingProps) => {
+  return React.createElement(NestedOption<IPagingProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "paging",
+      DefaultsProps: {
+        defaultPageIndex: "pageIndex",
+        defaultPageSize: "pageSize"
+      },
+    },
+  });
+};
 
-const Paging: typeof _componentPaging & IElementDescriptor = Object.assign(_componentPaging, {
-  OptionName: "paging",
-  DefaultsProps: {
-    defaultPageIndex: "pageIndex",
-    defaultPageSize: "pageSize"
-  },
-})
+const Paging = Object.assign<typeof _componentPaging, NestedComponentMeta>(_componentPaging, {
+  componentType: "option",
+});
 
 // owners:
 // FormItem
@@ -1740,19 +1893,22 @@ type IPatternRuleProps = React.PropsWithChildren<{
   pattern?: RegExp | string;
   type?: "required" | "numeric" | "range" | "stringLength" | "custom" | "compare" | "pattern" | "email" | "async";
 }>
-const _componentPatternRule = memo(
-  (props: IPatternRuleProps) => {
-    return React.createElement(NestedOption<IPatternRuleProps>, { ...props });
-  }
-);
+const _componentPatternRule = (props: IPatternRuleProps) => {
+  return React.createElement(NestedOption<IPatternRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "pattern"
+      },
+    },
+  });
+};
 
-const PatternRule: typeof _componentPatternRule & IElementDescriptor = Object.assign(_componentPatternRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "pattern"
-  },
-})
+const PatternRule = Object.assign<typeof _componentPatternRule, NestedComponentMeta>(_componentPatternRule, {
+  componentType: "option",
+});
 
 // owners:
 // Editing
@@ -1823,35 +1979,38 @@ type IPopupProps = React.PropsWithChildren<{
   titleRender?: (...params: any) => React.ReactNode;
   titleComponent?: React.ComponentType<any>;
 }>
-const _componentPopup = memo(
-  (props: IPopupProps) => {
-    return React.createElement(NestedOption<IPopupProps>, { ...props });
-  }
-);
-
-const Popup: typeof _componentPopup & IElementDescriptor = Object.assign(_componentPopup, {
-  OptionName: "popup",
-  DefaultsProps: {
-    defaultHeight: "height",
-    defaultPosition: "position",
-    defaultVisible: "visible",
-    defaultWidth: "width"
-  },
-  ExpectedChildren: {
-    animation: { optionName: "animation", isCollectionItem: false },
-    position: { optionName: "position", isCollectionItem: false },
-    toolbarItem: { optionName: "toolbarItems", isCollectionItem: true }
-  },
-  TemplateProps: [{
-    tmplOption: "contentTemplate",
-    render: "contentRender",
-    component: "contentComponent"
-  }, {
-    tmplOption: "titleTemplate",
-    render: "titleRender",
-    component: "titleComponent"
-  }],
-})
+const _componentPopup = (props: IPopupProps) => {
+  return React.createElement(NestedOption<IPopupProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "popup",
+      DefaultsProps: {
+        defaultHeight: "height",
+        defaultPosition: "position",
+        defaultVisible: "visible",
+        defaultWidth: "width"
+      },
+      ExpectedChildren: {
+        animation: { optionName: "animation", isCollectionItem: false },
+        position: { optionName: "position", isCollectionItem: false },
+        toolbarItem: { optionName: "toolbarItems", isCollectionItem: true }
+      },
+      TemplateProps: [{
+        tmplOption: "contentTemplate",
+        render: "contentRender",
+        component: "contentComponent"
+      }, {
+        tmplOption: "titleTemplate",
+        render: "titleRender",
+        component: "titleComponent"
+      }],
+    },
+  });
+};
+
+const Popup = Object.assign<typeof _componentPopup, NestedComponentMeta>(_componentPopup, {
+  componentType: "option",
+});
 
 // owners:
 // From
@@ -1881,15 +2040,18 @@ type IPositionProps = React.PropsWithChildren<{
     y?: number;
   };
 }>
-const _componentPosition = memo(
-  (props: IPositionProps) => {
-    return React.createElement(NestedOption<IPositionProps>, { ...props });
-  }
-);
+const _componentPosition = (props: IPositionProps) => {
+  return React.createElement(NestedOption<IPositionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "position",
+    },
+  });
+};
 
-const Position: typeof _componentPosition & IElementDescriptor = Object.assign(_componentPosition, {
-  OptionName: "position",
-})
+const Position = Object.assign<typeof _componentPosition, NestedComponentMeta>(_componentPosition, {
+  componentType: "option",
+});
 
 // owners:
 // FormItem
@@ -1902,19 +2064,22 @@ type IRangeRuleProps = React.PropsWithChildren<{
   reevaluate?: boolean;
   type?: "required" | "numeric" | "range" | "stringLength" | "custom" | "compare" | "pattern" | "email" | "async";
 }>
-const _componentRangeRule = memo(
-  (props: IRangeRuleProps) => {
-    return React.createElement(NestedOption<IRangeRuleProps>, { ...props });
-  }
-);
+const _componentRangeRule = (props: IRangeRuleProps) => {
+  return React.createElement(NestedOption<IRangeRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "range"
+      },
+    },
+  });
+};
 
-const RangeRule: typeof _componentRangeRule & IElementDescriptor = Object.assign(_componentRangeRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "range"
-  },
-})
+const RangeRule = Object.assign<typeof _componentRangeRule, NestedComponentMeta>(_componentRangeRule, {
+  componentType: "option",
+});
 
 // owners:
 // TreeList
@@ -1923,15 +2088,18 @@ type IRemoteOperationsProps = React.PropsWithChildren<{
   grouping?: boolean;
   sorting?: boolean;
 }>
-const _componentRemoteOperations = memo(
-  (props: IRemoteOperationsProps) => {
-    return React.createElement(NestedOption<IRemoteOperationsProps>, { ...props });
-  }
-);
+const _componentRemoteOperations = (props: IRemoteOperationsProps) => {
+  return React.createElement(NestedOption<IRemoteOperationsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "remoteOperations",
+    },
+  });
+};
 
-const RemoteOperations: typeof _componentRemoteOperations & IElementDescriptor = Object.assign(_componentRemoteOperations, {
-  OptionName: "remoteOperations",
-})
+const RemoteOperations = Object.assign<typeof _componentRemoteOperations, NestedComponentMeta>(_componentRemoteOperations, {
+  componentType: "option",
+});
 
 // owners:
 // FormItem
@@ -1941,19 +2109,22 @@ type IRequiredRuleProps = React.PropsWithChildren<{
   trim?: boolean;
   type?: "required" | "numeric" | "range" | "stringLength" | "custom" | "compare" | "pattern" | "email" | "async";
 }>
-const _componentRequiredRule = memo(
-  (props: IRequiredRuleProps) => {
-    return React.createElement(NestedOption<IRequiredRuleProps>, { ...props });
-  }
-);
+const _componentRequiredRule = (props: IRequiredRuleProps) => {
+  return React.createElement(NestedOption<IRequiredRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "required"
+      },
+    },
+  });
+};
 
-const RequiredRule: typeof _componentRequiredRule & IElementDescriptor = Object.assign(_componentRequiredRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "required"
-  },
-})
+const RequiredRule = Object.assign<typeof _componentRequiredRule, NestedComponentMeta>(_componentRequiredRule, {
+  componentType: "option",
+});
 
 // owners:
 // TreeList
@@ -1987,23 +2158,26 @@ type IRowDraggingProps = React.PropsWithChildren<{
   dragRender?: (...params: any) => React.ReactNode;
   dragComponent?: React.ComponentType<any>;
 }>
-const _componentRowDragging = memo(
-  (props: IRowDraggingProps) => {
-    return React.createElement(NestedOption<IRowDraggingProps>, { ...props });
-  }
-);
-
-const RowDragging: typeof _componentRowDragging & IElementDescriptor = Object.assign(_componentRowDragging, {
-  OptionName: "rowDragging",
-  ExpectedChildren: {
-    cursorOffset: { optionName: "cursorOffset", isCollectionItem: false }
-  },
-  TemplateProps: [{
-    tmplOption: "dragTemplate",
-    render: "dragRender",
-    component: "dragComponent"
-  }],
-})
+const _componentRowDragging = (props: IRowDraggingProps) => {
+  return React.createElement(NestedOption<IRowDraggingProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "rowDragging",
+      ExpectedChildren: {
+        cursorOffset: { optionName: "cursorOffset", isCollectionItem: false }
+      },
+      TemplateProps: [{
+        tmplOption: "dragTemplate",
+        render: "dragRender",
+        component: "dragComponent"
+      }],
+    },
+  });
+};
+
+const RowDragging = Object.assign<typeof _componentRowDragging, NestedComponentMeta>(_componentRowDragging, {
+  componentType: "option",
+});
 
 // owners:
 // TreeList
@@ -2018,15 +2192,18 @@ type IScrollingProps = React.PropsWithChildren<{
   showScrollbar?: "always" | "never" | "onHover" | "onScroll";
   useNative?: boolean | "auto";
 }>
-const _componentScrolling = memo(
-  (props: IScrollingProps) => {
-    return React.createElement(NestedOption<IScrollingProps>, { ...props });
-  }
-);
+const _componentScrolling = (props: IScrollingProps) => {
+  return React.createElement(NestedOption<IScrollingProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "scrolling",
+    },
+  });
+};
 
-const Scrolling: typeof _componentScrolling & IElementDescriptor = Object.assign(_componentScrolling, {
-  OptionName: "scrolling",
-})
+const Scrolling = Object.assign<typeof _componentScrolling, NestedComponentMeta>(_componentScrolling, {
+  componentType: "option",
+});
 
 // owners:
 // ColumnHeaderFilter
@@ -2039,15 +2216,18 @@ type ISearchProps = React.PropsWithChildren<{
   searchExpr?: Array<(() => any) | string> | (() => any) | string;
   timeout?: number;
 }>
-const _componentSearch = memo(
-  (props: ISearchProps) => {
-    return React.createElement(NestedOption<ISearchProps>, { ...props });
-  }
-);
+const _componentSearch = (props: ISearchProps) => {
+  return React.createElement(NestedOption<ISearchProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "search",
+    },
+  });
+};
 
-const Search: typeof _componentSearch & IElementDescriptor = Object.assign(_componentSearch, {
-  OptionName: "search",
-})
+const Search = Object.assign<typeof _componentSearch, NestedComponentMeta>(_componentSearch, {
+  componentType: "option",
+});
 
 // owners:
 // TreeList
@@ -2062,18 +2242,21 @@ type ISearchPanelProps = React.PropsWithChildren<{
   defaultText?: string;
   onTextChange?: (value: string) => void;
 }>
-const _componentSearchPanel = memo(
-  (props: ISearchPanelProps) => {
-    return React.createElement(NestedOption<ISearchPanelProps>, { ...props });
-  }
-);
+const _componentSearchPanel = (props: ISearchPanelProps) => {
+  return React.createElement(NestedOption<ISearchPanelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "searchPanel",
+      DefaultsProps: {
+        defaultText: "text"
+      },
+    },
+  });
+};
 
-const SearchPanel: typeof _componentSearchPanel & IElementDescriptor = Object.assign(_componentSearchPanel, {
-  OptionName: "searchPanel",
-  DefaultsProps: {
-    defaultText: "text"
-  },
-})
+const SearchPanel = Object.assign<typeof _componentSearchPanel, NestedComponentMeta>(_componentSearchPanel, {
+  componentType: "option",
+});
 
 // owners:
 // TreeList
@@ -2084,15 +2267,18 @@ type ISelectionProps = React.PropsWithChildren<{
   recursive?: boolean;
   selectByClick?: boolean;
 }>
-const _componentSelection = memo(
-  (props: ISelectionProps) => {
-    return React.createElement(NestedOption<ISelectionProps>, { ...props });
-  }
-);
+const _componentSelection = (props: ISelectionProps) => {
+  return React.createElement(NestedOption<ISelectionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "selection",
+    },
+  });
+};
 
-const Selection: typeof _componentSelection & IElementDescriptor = Object.assign(_componentSelection, {
-  OptionName: "selection",
-})
+const Selection = Object.assign<typeof _componentSelection, NestedComponentMeta>(_componentSelection, {
+  componentType: "option",
+});
 
 // owners:
 // Animation
@@ -2108,15 +2294,18 @@ type IShowProps = React.PropsWithChildren<{
   to?: AnimationState;
   type?: "css" | "fade" | "fadeIn" | "fadeOut" | "pop" | "slide" | "slideIn" | "slideOut";
 }>
-const _componentShow = memo(
-  (props: IShowProps) => {
-    return React.createElement(NestedOption<IShowProps>, { ...props });
-  }
-);
+const _componentShow = (props: IShowProps) => {
+  return React.createElement(NestedOption<IShowProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "show",
+    },
+  });
+};
 
-const Show: typeof _componentShow & IElementDescriptor = Object.assign(_componentShow, {
-  OptionName: "show",
-})
+const Show = Object.assign<typeof _componentShow, NestedComponentMeta>(_componentShow, {
+  componentType: "option",
+});
 
 // owners:
 // TreeList
@@ -2127,15 +2316,18 @@ type ISortingProps = React.PropsWithChildren<{
   mode?: "single" | "multiple" | "none";
   showSortIndexes?: boolean;
 }>
-const _componentSorting = memo(
-  (props: ISortingProps) => {
-    return React.createElement(NestedOption<ISortingProps>, { ...props });
-  }
-);
+const _componentSorting = (props: ISortingProps) => {
+  return React.createElement(NestedOption<ISortingProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "sorting",
+    },
+  });
+};
 
-const Sorting: typeof _componentSorting & IElementDescriptor = Object.assign(_componentSorting, {
-  OptionName: "sorting",
-})
+const Sorting = Object.assign<typeof _componentSorting, NestedComponentMeta>(_componentSorting, {
+  componentType: "option",
+});
 
 // owners:
 // TreeList
@@ -2147,15 +2339,18 @@ type IStateStoringProps = React.PropsWithChildren<{
   storageKey?: string;
   type?: "custom" | "localStorage" | "sessionStorage";
 }>
-const _componentStateStoring = memo(
-  (props: IStateStoringProps) => {
-    return React.createElement(NestedOption<IStateStoringProps>, { ...props });
-  }
-);
+const _componentStateStoring = (props: IStateStoringProps) => {
+  return React.createElement(NestedOption<IStateStoringProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "stateStoring",
+    },
+  });
+};
 
-const StateStoring: typeof _componentStateStoring & IElementDescriptor = Object.assign(_componentStateStoring, {
-  OptionName: "stateStoring",
-})
+const StateStoring = Object.assign<typeof _componentStateStoring, NestedComponentMeta>(_componentStateStoring, {
+  componentType: "option",
+});
 
 // owners:
 // FormItem
@@ -2168,19 +2363,22 @@ type IStringLengthRuleProps = React.PropsWithChildren<{
   trim?: boolean;
   type?: "required" | "numeric" | "range" | "stringLength" | "custom" | "compare" | "pattern" | "email" | "async";
 }>
-const _componentStringLengthRule = memo(
-  (props: IStringLengthRuleProps) => {
-    return React.createElement(NestedOption<IStringLengthRuleProps>, { ...props });
-  }
-);
+const _componentStringLengthRule = (props: IStringLengthRuleProps) => {
+  return React.createElement(NestedOption<IStringLengthRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "stringLength"
+      },
+    },
+  });
+};
 
-const StringLengthRule: typeof _componentStringLengthRule & IElementDescriptor = Object.assign(_componentStringLengthRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "stringLength"
-  },
-})
+const StringLengthRule = Object.assign<typeof _componentStringLengthRule, NestedComponentMeta>(_componentStringLengthRule, {
+  componentType: "option",
+});
 
 // owners:
 // Editing
@@ -2212,15 +2410,18 @@ type ITextsProps = React.PropsWithChildren<{
   emptyValue?: string;
   ok?: string;
 }>
-const _componentTexts = memo(
-  (props: ITextsProps) => {
-    return React.createElement(NestedOption<ITextsProps>, { ...props });
-  }
-);
+const _componentTexts = (props: ITextsProps) => {
+  return React.createElement(NestedOption<ITextsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "texts",
+    },
+  });
+};
 
-const Texts: typeof _componentTexts & IElementDescriptor = Object.assign(_componentTexts, {
-  OptionName: "texts",
-})
+const Texts = Object.assign<typeof _componentTexts, NestedComponentMeta>(_componentTexts, {
+  componentType: "option",
+});
 
 // owners:
 // Hide
@@ -2231,15 +2432,18 @@ type IToProps = React.PropsWithChildren<{
   scale?: number;
   top?: number;
 }>
-const _componentTo = memo(
-  (props: IToProps) => {
-    return React.createElement(NestedOption<IToProps>, { ...props });
-  }
-);
+const _componentTo = (props: IToProps) => {
+  return React.createElement(NestedOption<IToProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "to",
+    },
+  });
+};
 
-const To: typeof _componentTo & IElementDescriptor = Object.assign(_componentTo, {
-  OptionName: "to",
-})
+const To = Object.assign<typeof _componentTo, NestedComponentMeta>(_componentTo, {
+  componentType: "option",
+});
 
 // owners:
 // TreeList
@@ -2248,18 +2452,21 @@ type IToolbarProps = React.PropsWithChildren<{
   items?: Array<dxTreeListToolbarItem | "addRowButton" | "applyFilterButton" | "columnChooserButton" | "revertButton" | "saveButton" | "searchPanel">;
   visible?: boolean;
 }>
-const _componentToolbar = memo(
-  (props: IToolbarProps) => {
-    return React.createElement(NestedOption<IToolbarProps>, { ...props });
-  }
-);
+const _componentToolbar = (props: IToolbarProps) => {
+  return React.createElement(NestedOption<IToolbarProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "toolbar",
+      ExpectedChildren: {
+        item: { optionName: "items", isCollectionItem: true }
+      },
+    },
+  });
+};
 
-const Toolbar: typeof _componentToolbar & IElementDescriptor = Object.assign(_componentToolbar, {
-  OptionName: "toolbar",
-  ExpectedChildren: {
-    item: { optionName: "items", isCollectionItem: true }
-  },
-})
+const Toolbar = Object.assign<typeof _componentToolbar, NestedComponentMeta>(_componentToolbar, {
+  componentType: "option",
+});
 
 // owners:
 // Popup
@@ -2282,25 +2489,28 @@ type IToolbarItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentToolbarItem = memo(
-  (props: IToolbarItemProps) => {
-    return React.createElement(NestedOption<IToolbarItemProps>, { ...props });
-  }
-);
-
-const ToolbarItem: typeof _componentToolbarItem & IElementDescriptor = Object.assign(_componentToolbarItem, {
-  OptionName: "toolbarItems",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "menuItemTemplate",
-    render: "menuItemRender",
-    component: "menuItemComponent"
-  }, {
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentToolbarItem = (props: IToolbarItemProps) => {
+  return React.createElement(NestedOption<IToolbarItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "toolbarItems",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "menuItemTemplate",
+        render: "menuItemRender",
+        component: "menuItemComponent"
+      }, {
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const ToolbarItem = Object.assign<typeof _componentToolbarItem, NestedComponentMeta>(_componentToolbarItem, {
+  componentType: "option",
+});
 
 // owners:
 // TreeList
@@ -2318,21 +2528,24 @@ type ITreeListHeaderFilterProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number | string;
 }>
-const _componentTreeListHeaderFilter = memo(
-  (props: ITreeListHeaderFilterProps) => {
-    return React.createElement(NestedOption<ITreeListHeaderFilterProps>, { ...props });
-  }
-);
+const _componentTreeListHeaderFilter = (props: ITreeListHeaderFilterProps) => {
+  return React.createElement(NestedOption<ITreeListHeaderFilterProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "headerFilter",
+      ExpectedChildren: {
+        search: { optionName: "search", isCollectionItem: false },
+        texts: { optionName: "texts", isCollectionItem: false },
+        treeListHeaderFilterSearch: { optionName: "search", isCollectionItem: false },
+        treeListHeaderFilterTexts: { optionName: "texts", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const TreeListHeaderFilter: typeof _componentTreeListHeaderFilter & IElementDescriptor = Object.assign(_componentTreeListHeaderFilter, {
-  OptionName: "headerFilter",
-  ExpectedChildren: {
-    search: { optionName: "search", isCollectionItem: false },
-    texts: { optionName: "texts", isCollectionItem: false },
-    treeListHeaderFilterSearch: { optionName: "search", isCollectionItem: false },
-    treeListHeaderFilterTexts: { optionName: "texts", isCollectionItem: false }
-  },
-})
+const TreeListHeaderFilter = Object.assign<typeof _componentTreeListHeaderFilter, NestedComponentMeta>(_componentTreeListHeaderFilter, {
+  componentType: "option",
+});
 
 // owners:
 // TreeListHeaderFilter
@@ -2342,15 +2555,18 @@ type ITreeListHeaderFilterSearchProps = React.PropsWithChildren<{
   mode?: "contains" | "startswith" | "equals";
   timeout?: number;
 }>
-const _componentTreeListHeaderFilterSearch = memo(
-  (props: ITreeListHeaderFilterSearchProps) => {
-    return React.createElement(NestedOption<ITreeListHeaderFilterSearchProps>, { ...props });
-  }
-);
+const _componentTreeListHeaderFilterSearch = (props: ITreeListHeaderFilterSearchProps) => {
+  return React.createElement(NestedOption<ITreeListHeaderFilterSearchProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "search",
+    },
+  });
+};
 
-const TreeListHeaderFilterSearch: typeof _componentTreeListHeaderFilterSearch & IElementDescriptor = Object.assign(_componentTreeListHeaderFilterSearch, {
-  OptionName: "search",
-})
+const TreeListHeaderFilterSearch = Object.assign<typeof _componentTreeListHeaderFilterSearch, NestedComponentMeta>(_componentTreeListHeaderFilterSearch, {
+  componentType: "option",
+});
 
 // owners:
 // TreeListHeaderFilter
@@ -2359,15 +2575,18 @@ type ITreeListHeaderFilterTextsProps = React.PropsWithChildren<{
   emptyValue?: string;
   ok?: string;
 }>
-const _componentTreeListHeaderFilterTexts = memo(
-  (props: ITreeListHeaderFilterTextsProps) => {
-    return React.createElement(NestedOption<ITreeListHeaderFilterTextsProps>, { ...props });
-  }
-);
+const _componentTreeListHeaderFilterTexts = (props: ITreeListHeaderFilterTextsProps) => {
+  return React.createElement(NestedOption<ITreeListHeaderFilterTextsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "texts",
+    },
+  });
+};
 
-const TreeListHeaderFilterTexts: typeof _componentTreeListHeaderFilterTexts & IElementDescriptor = Object.assign(_componentTreeListHeaderFilterTexts, {
-  OptionName: "texts",
-})
+const TreeListHeaderFilterTexts = Object.assign<typeof _componentTreeListHeaderFilterTexts, NestedComponentMeta>(_componentTreeListHeaderFilterTexts, {
+  componentType: "option",
+});
 
 // owners:
 // TreeList
@@ -2376,15 +2595,18 @@ type ITreeListSelectionProps = React.PropsWithChildren<{
   mode?: "single" | "multiple" | "none";
   recursive?: boolean;
 }>
-const _componentTreeListSelection = memo(
-  (props: ITreeListSelectionProps) => {
-    return React.createElement(NestedOption<ITreeListSelectionProps>, { ...props });
-  }
-);
+const _componentTreeListSelection = (props: ITreeListSelectionProps) => {
+  return React.createElement(NestedOption<ITreeListSelectionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "selection",
+    },
+  });
+};
 
-const TreeListSelection: typeof _componentTreeListSelection & IElementDescriptor = Object.assign(_componentTreeListSelection, {
-  OptionName: "selection",
-})
+const TreeListSelection = Object.assign<typeof _componentTreeListSelection, NestedComponentMeta>(_componentTreeListSelection, {
+  componentType: "option",
+});
 
 // owners:
 // FormItem
@@ -2402,19 +2624,22 @@ type IValidationRuleProps = React.PropsWithChildren<{
   comparisonType?: "!=" | "!==" | "<" | "<=" | "==" | "===" | ">" | ">=";
   pattern?: RegExp | string;
 }>
-const _componentValidationRule = memo(
-  (props: IValidationRuleProps) => {
-    return React.createElement(NestedOption<IValidationRuleProps>, { ...props });
-  }
-);
-
-const ValidationRule: typeof _componentValidationRule & IElementDescriptor = Object.assign(_componentValidationRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "required"
-  },
-})
+const _componentValidationRule = (props: IValidationRuleProps) => {
+  return React.createElement(NestedOption<IValidationRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "required"
+      },
+    },
+  });
+};
+
+const ValidationRule = Object.assign<typeof _componentValidationRule, NestedComponentMeta>(_componentValidationRule, {
+  componentType: "option",
+});
 
 export default TreeList;
 export {
diff --git a/packages/devextreme-react/src/tree-map.ts b/packages/devextreme-react/src/tree-map.ts
index 5984854c3559..988c7991aac3 100644
--- a/packages/devextreme-react/src/tree-map.ts
+++ b/packages/devextreme-react/src/tree-map.ts
@@ -5,7 +5,7 @@ import dxTreeMap, {
     Properties
 } from "devextreme/viz/tree_map";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { ClickEvent, DisposingEvent, DrawnEvent, DrillEvent, ExportedEvent, ExportingEvent, FileSavingEvent, IncidentOccurredEvent, InitializedEvent, NodesInitializedEvent, NodesRenderingEvent, dxTreeMapNode } from "devextreme/viz/tree_map";
@@ -103,15 +103,18 @@ type IBorderProps = React.PropsWithChildren<{
   opacity?: number;
   visible?: boolean;
 }>
-const _componentBorder = memo(
-  (props: IBorderProps) => {
-    return React.createElement(NestedOption<IBorderProps>, { ...props });
-  }
-);
+const _componentBorder = (props: IBorderProps) => {
+  return React.createElement(NestedOption<IBorderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
 
-const Border: typeof _componentBorder & IElementDescriptor = Object.assign(_componentBorder, {
-  OptionName: "border",
-})
+const Border = Object.assign<typeof _componentBorder, NestedComponentMeta>(_componentBorder, {
+  componentType: "option",
+});
 
 // owners:
 // TreeMap
@@ -123,15 +126,18 @@ type IColorizerProps = React.PropsWithChildren<{
   range?: Array<number>;
   type?: "discrete" | "gradient" | "none" | "range";
 }>
-const _componentColorizer = memo(
-  (props: IColorizerProps) => {
-    return React.createElement(NestedOption<IColorizerProps>, { ...props });
-  }
-);
+const _componentColorizer = (props: IColorizerProps) => {
+  return React.createElement(NestedOption<IColorizerProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "colorizer",
+    },
+  });
+};
 
-const Colorizer: typeof _componentColorizer & IElementDescriptor = Object.assign(_componentColorizer, {
-  OptionName: "colorizer",
-})
+const Colorizer = Object.assign<typeof _componentColorizer, NestedComponentMeta>(_componentColorizer, {
+  componentType: "option",
+});
 
 // owners:
 // TreeMap
@@ -144,15 +150,18 @@ type IExportProps = React.PropsWithChildren<{
   printingEnabled?: boolean;
   svgToCanvas?: ((svg: any, canvas: any) => any);
 }>
-const _componentExport = memo(
-  (props: IExportProps) => {
-    return React.createElement(NestedOption<IExportProps>, { ...props });
-  }
-);
+const _componentExport = (props: IExportProps) => {
+  return React.createElement(NestedOption<IExportProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "export",
+    },
+  });
+};
 
-const Export: typeof _componentExport & IElementDescriptor = Object.assign(_componentExport, {
-  OptionName: "export",
-})
+const Export = Object.assign<typeof _componentExport, NestedComponentMeta>(_componentExport, {
+  componentType: "option",
+});
 
 // owners:
 // GroupLabel
@@ -168,15 +177,18 @@ type IFontProps = React.PropsWithChildren<{
   size?: number | string;
   weight?: number;
 }>
-const _componentFont = memo(
-  (props: IFontProps) => {
-    return React.createElement(NestedOption<IFontProps>, { ...props });
-  }
-);
+const _componentFont = (props: IFontProps) => {
+  return React.createElement(NestedOption<IFontProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "font",
+    },
+  });
+};
 
-const Font: typeof _componentFont & IElementDescriptor = Object.assign(_componentFont, {
-  OptionName: "font",
-})
+const Font = Object.assign<typeof _componentFont, NestedComponentMeta>(_componentFont, {
+  componentType: "option",
+});
 
 // owners:
 // Tooltip
@@ -188,15 +200,18 @@ type IFormatProps = React.PropsWithChildren<{
   type?: "billions" | "currency" | "day" | "decimal" | "exponential" | "fixedPoint" | "largeNumber" | "longDate" | "longTime" | "millions" | "millisecond" | "month" | "monthAndDay" | "monthAndYear" | "percent" | "quarter" | "quarterAndYear" | "shortDate" | "shortTime" | "thousands" | "trillions" | "year" | "dayOfWeek" | "hour" | "longDateLongTime" | "minute" | "second" | "shortDateShortTime";
   useCurrencyAccountingStyle?: boolean;
 }>
-const _componentFormat = memo(
-  (props: IFormatProps) => {
-    return React.createElement(NestedOption<IFormatProps>, { ...props });
-  }
-);
+const _componentFormat = (props: IFormatProps) => {
+  return React.createElement(NestedOption<IFormatProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "format",
+    },
+  });
+};
 
-const Format: typeof _componentFormat & IElementDescriptor = Object.assign(_componentFormat, {
-  OptionName: "format",
-})
+const Format = Object.assign<typeof _componentFormat, NestedComponentMeta>(_componentFormat, {
+  componentType: "option",
+});
 
 // owners:
 // TreeMap
@@ -229,23 +244,26 @@ type IGroupProps = React.PropsWithChildren<{
     color?: string;
   };
 }>
-const _componentGroup = memo(
-  (props: IGroupProps) => {
-    return React.createElement(NestedOption<IGroupProps>, { ...props });
-  }
-);
-
-const Group: typeof _componentGroup & IElementDescriptor = Object.assign(_componentGroup, {
-  OptionName: "group",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    groupLabel: { optionName: "label", isCollectionItem: false },
-    hoverStyle: { optionName: "hoverStyle", isCollectionItem: false },
-    label: { optionName: "label", isCollectionItem: false },
-    selectionStyle: { optionName: "selectionStyle", isCollectionItem: false },
-    treeMapborder: { optionName: "border", isCollectionItem: false }
-  },
-})
+const _componentGroup = (props: IGroupProps) => {
+  return React.createElement(NestedOption<IGroupProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "group",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        groupLabel: { optionName: "label", isCollectionItem: false },
+        hoverStyle: { optionName: "hoverStyle", isCollectionItem: false },
+        label: { optionName: "label", isCollectionItem: false },
+        selectionStyle: { optionName: "selectionStyle", isCollectionItem: false },
+        treeMapborder: { optionName: "border", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Group = Object.assign<typeof _componentGroup, NestedComponentMeta>(_componentGroup, {
+  componentType: "option",
+});
 
 // owners:
 // Group
@@ -254,18 +272,21 @@ type IGroupLabelProps = React.PropsWithChildren<{
   textOverflow?: "ellipsis" | "hide" | "none";
   visible?: boolean;
 }>
-const _componentGroupLabel = memo(
-  (props: IGroupLabelProps) => {
-    return React.createElement(NestedOption<IGroupLabelProps>, { ...props });
-  }
-);
-
-const GroupLabel: typeof _componentGroupLabel & IElementDescriptor = Object.assign(_componentGroupLabel, {
-  OptionName: "label",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false }
-  },
-})
+const _componentGroupLabel = (props: IGroupLabelProps) => {
+  return React.createElement(NestedOption<IGroupLabelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "label",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const GroupLabel = Object.assign<typeof _componentGroupLabel, NestedComponentMeta>(_componentGroupLabel, {
+  componentType: "option",
+});
 
 // owners:
 // Group
@@ -277,15 +298,18 @@ type IHoverStyleProps = React.PropsWithChildren<{
   };
   color?: string;
 }>
-const _componentHoverStyle = memo(
-  (props: IHoverStyleProps) => {
-    return React.createElement(NestedOption<IHoverStyleProps>, { ...props });
-  }
-);
+const _componentHoverStyle = (props: IHoverStyleProps) => {
+  return React.createElement(NestedOption<IHoverStyleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "hoverStyle",
+    },
+  });
+};
 
-const HoverStyle: typeof _componentHoverStyle & IElementDescriptor = Object.assign(_componentHoverStyle, {
-  OptionName: "hoverStyle",
-})
+const HoverStyle = Object.assign<typeof _componentHoverStyle, NestedComponentMeta>(_componentHoverStyle, {
+  componentType: "option",
+});
 
 // owners:
 // Group
@@ -296,15 +320,18 @@ type ILabelProps = React.PropsWithChildren<{
   visible?: boolean;
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentLabel = memo(
-  (props: ILabelProps) => {
-    return React.createElement(NestedOption<ILabelProps>, { ...props });
-  }
-);
+const _componentLabel = (props: ILabelProps) => {
+  return React.createElement(NestedOption<ILabelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "label",
+    },
+  });
+};
 
-const Label: typeof _componentLabel & IElementDescriptor = Object.assign(_componentLabel, {
-  OptionName: "label",
-})
+const Label = Object.assign<typeof _componentLabel, NestedComponentMeta>(_componentLabel, {
+  componentType: "option",
+});
 
 // owners:
 // TreeMap
@@ -317,21 +344,24 @@ type ILoadingIndicatorProps = React.PropsWithChildren<{
   defaultShow?: boolean;
   onShowChange?: (value: boolean) => void;
 }>
-const _componentLoadingIndicator = memo(
-  (props: ILoadingIndicatorProps) => {
-    return React.createElement(NestedOption<ILoadingIndicatorProps>, { ...props });
-  }
-);
-
-const LoadingIndicator: typeof _componentLoadingIndicator & IElementDescriptor = Object.assign(_componentLoadingIndicator, {
-  OptionName: "loadingIndicator",
-  DefaultsProps: {
-    defaultShow: "show"
-  },
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false }
-  },
-})
+const _componentLoadingIndicator = (props: ILoadingIndicatorProps) => {
+  return React.createElement(NestedOption<ILoadingIndicatorProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "loadingIndicator",
+      DefaultsProps: {
+        defaultShow: "show"
+      },
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const LoadingIndicator = Object.assign<typeof _componentLoadingIndicator, NestedComponentMeta>(_componentLoadingIndicator, {
+  componentType: "option",
+});
 
 // owners:
 // Title
@@ -341,15 +371,18 @@ type IMarginProps = React.PropsWithChildren<{
   right?: number;
   top?: number;
 }>
-const _componentMargin = memo(
-  (props: IMarginProps) => {
-    return React.createElement(NestedOption<IMarginProps>, { ...props });
-  }
-);
+const _componentMargin = (props: IMarginProps) => {
+  return React.createElement(NestedOption<IMarginProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "margin",
+    },
+  });
+};
 
-const Margin: typeof _componentMargin & IElementDescriptor = Object.assign(_componentMargin, {
-  OptionName: "margin",
-})
+const Margin = Object.assign<typeof _componentMargin, NestedComponentMeta>(_componentMargin, {
+  componentType: "option",
+});
 
 // owners:
 // Group
@@ -361,15 +394,18 @@ type ISelectionStyleProps = React.PropsWithChildren<{
   };
   color?: string;
 }>
-const _componentSelectionStyle = memo(
-  (props: ISelectionStyleProps) => {
-    return React.createElement(NestedOption<ISelectionStyleProps>, { ...props });
-  }
-);
+const _componentSelectionStyle = (props: ISelectionStyleProps) => {
+  return React.createElement(NestedOption<ISelectionStyleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "selectionStyle",
+    },
+  });
+};
 
-const SelectionStyle: typeof _componentSelectionStyle & IElementDescriptor = Object.assign(_componentSelectionStyle, {
-  OptionName: "selectionStyle",
-})
+const SelectionStyle = Object.assign<typeof _componentSelectionStyle, NestedComponentMeta>(_componentSelectionStyle, {
+  componentType: "option",
+});
 
 // owners:
 // Tooltip
@@ -380,15 +416,18 @@ type IShadowProps = React.PropsWithChildren<{
   offsetY?: number;
   opacity?: number;
 }>
-const _componentShadow = memo(
-  (props: IShadowProps) => {
-    return React.createElement(NestedOption<IShadowProps>, { ...props });
-  }
-);
+const _componentShadow = (props: IShadowProps) => {
+  return React.createElement(NestedOption<IShadowProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "shadow",
+    },
+  });
+};
 
-const Shadow: typeof _componentShadow & IElementDescriptor = Object.assign(_componentShadow, {
-  OptionName: "shadow",
-})
+const Shadow = Object.assign<typeof _componentShadow, NestedComponentMeta>(_componentShadow, {
+  componentType: "option",
+});
 
 // owners:
 // TreeMap
@@ -396,15 +435,18 @@ type ISizeProps = React.PropsWithChildren<{
   height?: number;
   width?: number;
 }>
-const _componentSize = memo(
-  (props: ISizeProps) => {
-    return React.createElement(NestedOption<ISizeProps>, { ...props });
-  }
-);
+const _componentSize = (props: ISizeProps) => {
+  return React.createElement(NestedOption<ISizeProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "size",
+    },
+  });
+};
 
-const Size: typeof _componentSize & IElementDescriptor = Object.assign(_componentSize, {
-  OptionName: "size",
-})
+const Size = Object.assign<typeof _componentSize, NestedComponentMeta>(_componentSize, {
+  componentType: "option",
+});
 
 // owners:
 // Title
@@ -415,18 +457,21 @@ type ISubtitleProps = React.PropsWithChildren<{
   textOverflow?: "ellipsis" | "hide" | "none";
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentSubtitle = memo(
-  (props: ISubtitleProps) => {
-    return React.createElement(NestedOption<ISubtitleProps>, { ...props });
-  }
-);
-
-const Subtitle: typeof _componentSubtitle & IElementDescriptor = Object.assign(_componentSubtitle, {
-  OptionName: "subtitle",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false }
-  },
-})
+const _componentSubtitle = (props: ISubtitleProps) => {
+  return React.createElement(NestedOption<ISubtitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "subtitle",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Subtitle = Object.assign<typeof _componentSubtitle, NestedComponentMeta>(_componentSubtitle, {
+  componentType: "option",
+});
 
 // owners:
 // TreeMap
@@ -457,23 +502,26 @@ type ITileProps = React.PropsWithChildren<{
     color?: string;
   };
 }>
-const _componentTile = memo(
-  (props: ITileProps) => {
-    return React.createElement(NestedOption<ITileProps>, { ...props });
-  }
-);
-
-const Tile: typeof _componentTile & IElementDescriptor = Object.assign(_componentTile, {
-  OptionName: "tile",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    hoverStyle: { optionName: "hoverStyle", isCollectionItem: false },
-    label: { optionName: "label", isCollectionItem: false },
-    selectionStyle: { optionName: "selectionStyle", isCollectionItem: false },
-    tileLabel: { optionName: "label", isCollectionItem: false },
-    treeMapborder: { optionName: "border", isCollectionItem: false }
-  },
-})
+const _componentTile = (props: ITileProps) => {
+  return React.createElement(NestedOption<ITileProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "tile",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        hoverStyle: { optionName: "hoverStyle", isCollectionItem: false },
+        label: { optionName: "label", isCollectionItem: false },
+        selectionStyle: { optionName: "selectionStyle", isCollectionItem: false },
+        tileLabel: { optionName: "label", isCollectionItem: false },
+        treeMapborder: { optionName: "border", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Tile = Object.assign<typeof _componentTile, NestedComponentMeta>(_componentTile, {
+  componentType: "option",
+});
 
 // owners:
 // Tile
@@ -483,18 +531,21 @@ type ITileLabelProps = React.PropsWithChildren<{
   visible?: boolean;
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentTileLabel = memo(
-  (props: ITileLabelProps) => {
-    return React.createElement(NestedOption<ITileLabelProps>, { ...props });
-  }
-);
-
-const TileLabel: typeof _componentTileLabel & IElementDescriptor = Object.assign(_componentTileLabel, {
-  OptionName: "label",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false }
-  },
-})
+const _componentTileLabel = (props: ITileLabelProps) => {
+  return React.createElement(NestedOption<ITileLabelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "label",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const TileLabel = Object.assign<typeof _componentTileLabel, NestedComponentMeta>(_componentTileLabel, {
+  componentType: "option",
+});
 
 // owners:
 // TreeMap
@@ -520,20 +571,23 @@ type ITitleProps = React.PropsWithChildren<{
   verticalAlignment?: "bottom" | "top";
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentTitle = memo(
-  (props: ITitleProps) => {
-    return React.createElement(NestedOption<ITitleProps>, { ...props });
-  }
-);
-
-const Title: typeof _componentTitle & IElementDescriptor = Object.assign(_componentTitle, {
-  OptionName: "title",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false },
-    margin: { optionName: "margin", isCollectionItem: false },
-    subtitle: { optionName: "subtitle", isCollectionItem: false }
-  },
-})
+const _componentTitle = (props: ITitleProps) => {
+  return React.createElement(NestedOption<ITitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "title",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false },
+        margin: { optionName: "margin", isCollectionItem: false },
+        subtitle: { optionName: "subtitle", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Title = Object.assign<typeof _componentTitle, NestedComponentMeta>(_componentTitle, {
+  componentType: "option",
+});
 
 // owners:
 // TreeMap
@@ -568,27 +622,30 @@ type ITooltipProps = React.PropsWithChildren<{
   contentRender?: (...params: any) => React.ReactNode;
   contentComponent?: React.ComponentType<any>;
 }>
-const _componentTooltip = memo(
-  (props: ITooltipProps) => {
-    return React.createElement(NestedOption<ITooltipProps>, { ...props });
-  }
-);
-
-const Tooltip: typeof _componentTooltip & IElementDescriptor = Object.assign(_componentTooltip, {
-  OptionName: "tooltip",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    font: { optionName: "font", isCollectionItem: false },
-    format: { optionName: "format", isCollectionItem: false },
-    shadow: { optionName: "shadow", isCollectionItem: false },
-    tooltipBorder: { optionName: "border", isCollectionItem: false }
-  },
-  TemplateProps: [{
-    tmplOption: "contentTemplate",
-    render: "contentRender",
-    component: "contentComponent"
-  }],
-})
+const _componentTooltip = (props: ITooltipProps) => {
+  return React.createElement(NestedOption<ITooltipProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "tooltip",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        font: { optionName: "font", isCollectionItem: false },
+        format: { optionName: "format", isCollectionItem: false },
+        shadow: { optionName: "shadow", isCollectionItem: false },
+        tooltipBorder: { optionName: "border", isCollectionItem: false }
+      },
+      TemplateProps: [{
+        tmplOption: "contentTemplate",
+        render: "contentRender",
+        component: "contentComponent"
+      }],
+    },
+  });
+};
+
+const Tooltip = Object.assign<typeof _componentTooltip, NestedComponentMeta>(_componentTooltip, {
+  componentType: "option",
+});
 
 // owners:
 // Tooltip
@@ -599,15 +656,18 @@ type ITooltipBorderProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentTooltipBorder = memo(
-  (props: ITooltipBorderProps) => {
-    return React.createElement(NestedOption<ITooltipBorderProps>, { ...props });
-  }
-);
+const _componentTooltipBorder = (props: ITooltipBorderProps) => {
+  return React.createElement(NestedOption<ITooltipBorderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
 
-const TooltipBorder: typeof _componentTooltipBorder & IElementDescriptor = Object.assign(_componentTooltipBorder, {
-  OptionName: "border",
-})
+const TooltipBorder = Object.assign<typeof _componentTooltipBorder, NestedComponentMeta>(_componentTooltipBorder, {
+  componentType: "option",
+});
 
 // owners:
 // Group
@@ -620,15 +680,18 @@ type ITreeMapborderProps = React.PropsWithChildren<{
   color?: string;
   width?: number;
 }>
-const _componentTreeMapborder = memo(
-  (props: ITreeMapborderProps) => {
-    return React.createElement(NestedOption<ITreeMapborderProps>, { ...props });
-  }
-);
-
-const TreeMapborder: typeof _componentTreeMapborder & IElementDescriptor = Object.assign(_componentTreeMapborder, {
-  OptionName: "border",
-})
+const _componentTreeMapborder = (props: ITreeMapborderProps) => {
+  return React.createElement(NestedOption<ITreeMapborderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
+
+const TreeMapborder = Object.assign<typeof _componentTreeMapborder, NestedComponentMeta>(_componentTreeMapborder, {
+  componentType: "option",
+});
 
 export default TreeMap;
 export {
diff --git a/packages/devextreme-react/src/tree-view.ts b/packages/devextreme-react/src/tree-view.ts
index 2e13c9bc6d84..8ce5b26cad16 100644
--- a/packages/devextreme-react/src/tree-view.ts
+++ b/packages/devextreme-react/src/tree-view.ts
@@ -6,7 +6,7 @@ import dxTreeView, {
     Properties
 } from "devextreme/ui/tree_view";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { dxTreeViewItem, ContentReadyEvent, DisposingEvent, InitializedEvent, ItemClickEvent, ItemCollapsedEvent, ItemContextMenuEvent, ItemExpandedEvent, ItemHoldEvent, ItemRenderedEvent, SelectAllValueChangedEvent } from "devextreme/ui/tree_view";
@@ -102,19 +102,22 @@ type IButtonProps = React.PropsWithChildren<{
   name?: string;
   options?: dxButtonOptions;
 }>
-const _componentButton = memo(
-  (props: IButtonProps) => {
-    return React.createElement(NestedOption<IButtonProps>, { ...props });
-  }
-);
+const _componentButton = (props: IButtonProps) => {
+  return React.createElement(NestedOption<IButtonProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "buttons",
+      IsCollectionItem: true,
+      ExpectedChildren: {
+        options: { optionName: "options", isCollectionItem: false }
+      },
+    },
+  });
+};
 
-const Button: typeof _componentButton & IElementDescriptor = Object.assign(_componentButton, {
-  OptionName: "buttons",
-  IsCollectionItem: true,
-  ExpectedChildren: {
-    options: { optionName: "options", isCollectionItem: false }
-  },
-})
+const Button = Object.assign<typeof _componentButton, NestedComponentMeta>(_componentButton, {
+  componentType: "option",
+});
 
 // owners:
 // TreeView
@@ -134,21 +137,24 @@ type IItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentItem = memo(
-  (props: IItemProps) => {
-    return React.createElement(NestedOption<IItemProps>, { ...props });
-  }
-);
+const _componentItem = (props: IItemProps) => {
+  return React.createElement(NestedOption<IItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
 
-const Item: typeof _componentItem & IElementDescriptor = Object.assign(_componentItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const Item = Object.assign<typeof _componentItem, NestedComponentMeta>(_componentItem, {
+  componentType: "option",
+});
 
 // owners:
 // Button
@@ -181,20 +187,23 @@ type IOptionsProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentOptions = memo(
-  (props: IOptionsProps) => {
-    return React.createElement(NestedOption<IOptionsProps>, { ...props });
-  }
-);
+const _componentOptions = (props: IOptionsProps) => {
+  return React.createElement(NestedOption<IOptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "options",
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
 
-const Options: typeof _componentOptions & IElementDescriptor = Object.assign(_componentOptions, {
-  OptionName: "options",
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const Options = Object.assign<typeof _componentOptions, NestedComponentMeta>(_componentOptions, {
+  componentType: "option",
+});
 
 // owners:
 // TreeView
@@ -258,21 +267,24 @@ type ISearchEditorOptionsProps = React.PropsWithChildren<{
   defaultValue?: string;
   onValueChange?: (value: string) => void;
 }>
-const _componentSearchEditorOptions = memo(
-  (props: ISearchEditorOptionsProps) => {
-    return React.createElement(NestedOption<ISearchEditorOptionsProps>, { ...props });
-  }
-);
+const _componentSearchEditorOptions = (props: ISearchEditorOptionsProps) => {
+  return React.createElement(NestedOption<ISearchEditorOptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "searchEditorOptions",
+      DefaultsProps: {
+        defaultValue: "value"
+      },
+      ExpectedChildren: {
+        button: { optionName: "buttons", isCollectionItem: true }
+      },
+    },
+  });
+};
 
-const SearchEditorOptions: typeof _componentSearchEditorOptions & IElementDescriptor = Object.assign(_componentSearchEditorOptions, {
-  OptionName: "searchEditorOptions",
-  DefaultsProps: {
-    defaultValue: "value"
-  },
-  ExpectedChildren: {
-    button: { optionName: "buttons", isCollectionItem: true }
-  },
-})
+const SearchEditorOptions = Object.assign<typeof _componentSearchEditorOptions, NestedComponentMeta>(_componentSearchEditorOptions, {
+  componentType: "option",
+});
 
 export default TreeView;
 export {
diff --git a/packages/devextreme-react/src/validation-summary.ts b/packages/devextreme-react/src/validation-summary.ts
index de675b24e130..a9fce1865b99 100644
--- a/packages/devextreme-react/src/validation-summary.ts
+++ b/packages/devextreme-react/src/validation-summary.ts
@@ -6,7 +6,7 @@ import dxValidationSummary, {
     Properties
 } from "devextreme/ui/validation_summary";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { CollectionWidgetItem } from "devextreme/ui/collection/ui.collection_widget.base";
@@ -96,21 +96,24 @@ type IItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentItem = memo(
-  (props: IItemProps) => {
-    return React.createElement(NestedOption<IItemProps>, { ...props });
-  }
-);
-
-const Item: typeof _componentItem & IElementDescriptor = Object.assign(_componentItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentItem = (props: IItemProps) => {
+  return React.createElement(NestedOption<IItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const Item = Object.assign<typeof _componentItem, NestedComponentMeta>(_componentItem, {
+  componentType: "option",
+});
 
 export default ValidationSummary;
 export {
diff --git a/packages/devextreme-react/src/validator.ts b/packages/devextreme-react/src/validator.ts
index eaf394b812bb..7215a2adbc37 100644
--- a/packages/devextreme-react/src/validator.ts
+++ b/packages/devextreme-react/src/validator.ts
@@ -6,7 +6,7 @@ import dxValidator, {
 } from "devextreme/ui/validator";
 
 import { ExtensionComponent as BaseComponent } from "./core/extension-component";
-import { IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 type IValidatorOptions = React.PropsWithChildren<Properties & IHtmlOptions>
@@ -57,8 +57,8 @@ const _componentValidator = memo(
   ),
 ) as (props: React.PropsWithChildren<IValidatorOptions> & { ref?: Ref<ValidatorRef> }) => ReactElement | null;
 
-const Validator: typeof _componentValidator & { isExtensionComponent: boolean } = Object.assign(_componentValidator, {
-  isExtensionComponent: true,
+const Validator = Object.assign<typeof _componentValidator, NestedComponentMeta>(_componentValidator, {
+  componentType: "extension",
 });
 
 
@@ -72,15 +72,18 @@ type IAdapterProps = React.PropsWithChildren<{
   reset?: (() => void);
   validationRequestsCallbacks?: Array<(() => void)>;
 }>
-const _componentAdapter = memo(
-  (props: IAdapterProps) => {
-    return React.createElement(NestedOption<IAdapterProps>, { ...props });
-  }
-);
+const _componentAdapter = (props: IAdapterProps) => {
+  return React.createElement(NestedOption<IAdapterProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "adapter",
+    },
+  });
+};
 
-const Adapter: typeof _componentAdapter & IElementDescriptor = Object.assign(_componentAdapter, {
-  OptionName: "adapter",
-})
+const Adapter = Object.assign<typeof _componentAdapter, NestedComponentMeta>(_componentAdapter, {
+  componentType: "option",
+});
 
 // owners:
 // Validator
@@ -91,19 +94,22 @@ type IAsyncRuleProps = React.PropsWithChildren<{
   type?: "required" | "numeric" | "range" | "stringLength" | "custom" | "compare" | "pattern" | "email" | "async";
   validationCallback?: ((options: { column: Record<string, any>, data: Record<string, any>, formItem: Record<string, any>, rule: Record<string, any>, validator: Record<string, any>, value: string | number }) => any);
 }>
-const _componentAsyncRule = memo(
-  (props: IAsyncRuleProps) => {
-    return React.createElement(NestedOption<IAsyncRuleProps>, { ...props });
-  }
-);
-
-const AsyncRule: typeof _componentAsyncRule & IElementDescriptor = Object.assign(_componentAsyncRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "async"
-  },
-})
+const _componentAsyncRule = (props: IAsyncRuleProps) => {
+  return React.createElement(NestedOption<IAsyncRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "async"
+      },
+    },
+  });
+};
+
+const AsyncRule = Object.assign<typeof _componentAsyncRule, NestedComponentMeta>(_componentAsyncRule, {
+  componentType: "option",
+});
 
 // owners:
 // Validator
@@ -114,19 +120,22 @@ type ICompareRuleProps = React.PropsWithChildren<{
   message?: string;
   type?: "required" | "numeric" | "range" | "stringLength" | "custom" | "compare" | "pattern" | "email" | "async";
 }>
-const _componentCompareRule = memo(
-  (props: ICompareRuleProps) => {
-    return React.createElement(NestedOption<ICompareRuleProps>, { ...props });
-  }
-);
-
-const CompareRule: typeof _componentCompareRule & IElementDescriptor = Object.assign(_componentCompareRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "compare"
-  },
-})
+const _componentCompareRule = (props: ICompareRuleProps) => {
+  return React.createElement(NestedOption<ICompareRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "compare"
+      },
+    },
+  });
+};
+
+const CompareRule = Object.assign<typeof _componentCompareRule, NestedComponentMeta>(_componentCompareRule, {
+  componentType: "option",
+});
 
 // owners:
 // Validator
@@ -137,19 +146,22 @@ type ICustomRuleProps = React.PropsWithChildren<{
   type?: "required" | "numeric" | "range" | "stringLength" | "custom" | "compare" | "pattern" | "email" | "async";
   validationCallback?: ((options: { column: Record<string, any>, data: Record<string, any>, formItem: Record<string, any>, rule: Record<string, any>, validator: Record<string, any>, value: string | number }) => boolean);
 }>
-const _componentCustomRule = memo(
-  (props: ICustomRuleProps) => {
-    return React.createElement(NestedOption<ICustomRuleProps>, { ...props });
-  }
-);
-
-const CustomRule: typeof _componentCustomRule & IElementDescriptor = Object.assign(_componentCustomRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "custom"
-  },
-})
+const _componentCustomRule = (props: ICustomRuleProps) => {
+  return React.createElement(NestedOption<ICustomRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "custom"
+      },
+    },
+  });
+};
+
+const CustomRule = Object.assign<typeof _componentCustomRule, NestedComponentMeta>(_componentCustomRule, {
+  componentType: "option",
+});
 
 // owners:
 // Validator
@@ -158,19 +170,22 @@ type IEmailRuleProps = React.PropsWithChildren<{
   message?: string;
   type?: "required" | "numeric" | "range" | "stringLength" | "custom" | "compare" | "pattern" | "email" | "async";
 }>
-const _componentEmailRule = memo(
-  (props: IEmailRuleProps) => {
-    return React.createElement(NestedOption<IEmailRuleProps>, { ...props });
-  }
-);
-
-const EmailRule: typeof _componentEmailRule & IElementDescriptor = Object.assign(_componentEmailRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "email"
-  },
-})
+const _componentEmailRule = (props: IEmailRuleProps) => {
+  return React.createElement(NestedOption<IEmailRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "email"
+      },
+    },
+  });
+};
+
+const EmailRule = Object.assign<typeof _componentEmailRule, NestedComponentMeta>(_componentEmailRule, {
+  componentType: "option",
+});
 
 // owners:
 // Validator
@@ -179,19 +194,22 @@ type INumericRuleProps = React.PropsWithChildren<{
   message?: string;
   type?: "required" | "numeric" | "range" | "stringLength" | "custom" | "compare" | "pattern" | "email" | "async";
 }>
-const _componentNumericRule = memo(
-  (props: INumericRuleProps) => {
-    return React.createElement(NestedOption<INumericRuleProps>, { ...props });
-  }
-);
-
-const NumericRule: typeof _componentNumericRule & IElementDescriptor = Object.assign(_componentNumericRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "numeric"
-  },
-})
+const _componentNumericRule = (props: INumericRuleProps) => {
+  return React.createElement(NestedOption<INumericRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "numeric"
+      },
+    },
+  });
+};
+
+const NumericRule = Object.assign<typeof _componentNumericRule, NestedComponentMeta>(_componentNumericRule, {
+  componentType: "option",
+});
 
 // owners:
 // Validator
@@ -201,19 +219,22 @@ type IPatternRuleProps = React.PropsWithChildren<{
   pattern?: RegExp | string;
   type?: "required" | "numeric" | "range" | "stringLength" | "custom" | "compare" | "pattern" | "email" | "async";
 }>
-const _componentPatternRule = memo(
-  (props: IPatternRuleProps) => {
-    return React.createElement(NestedOption<IPatternRuleProps>, { ...props });
-  }
-);
-
-const PatternRule: typeof _componentPatternRule & IElementDescriptor = Object.assign(_componentPatternRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "pattern"
-  },
-})
+const _componentPatternRule = (props: IPatternRuleProps) => {
+  return React.createElement(NestedOption<IPatternRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "pattern"
+      },
+    },
+  });
+};
+
+const PatternRule = Object.assign<typeof _componentPatternRule, NestedComponentMeta>(_componentPatternRule, {
+  componentType: "option",
+});
 
 // owners:
 // Validator
@@ -225,19 +246,22 @@ type IRangeRuleProps = React.PropsWithChildren<{
   reevaluate?: boolean;
   type?: "required" | "numeric" | "range" | "stringLength" | "custom" | "compare" | "pattern" | "email" | "async";
 }>
-const _componentRangeRule = memo(
-  (props: IRangeRuleProps) => {
-    return React.createElement(NestedOption<IRangeRuleProps>, { ...props });
-  }
-);
-
-const RangeRule: typeof _componentRangeRule & IElementDescriptor = Object.assign(_componentRangeRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "range"
-  },
-})
+const _componentRangeRule = (props: IRangeRuleProps) => {
+  return React.createElement(NestedOption<IRangeRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "range"
+      },
+    },
+  });
+};
+
+const RangeRule = Object.assign<typeof _componentRangeRule, NestedComponentMeta>(_componentRangeRule, {
+  componentType: "option",
+});
 
 // owners:
 // Validator
@@ -246,19 +270,22 @@ type IRequiredRuleProps = React.PropsWithChildren<{
   trim?: boolean;
   type?: "required" | "numeric" | "range" | "stringLength" | "custom" | "compare" | "pattern" | "email" | "async";
 }>
-const _componentRequiredRule = memo(
-  (props: IRequiredRuleProps) => {
-    return React.createElement(NestedOption<IRequiredRuleProps>, { ...props });
-  }
-);
-
-const RequiredRule: typeof _componentRequiredRule & IElementDescriptor = Object.assign(_componentRequiredRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "required"
-  },
-})
+const _componentRequiredRule = (props: IRequiredRuleProps) => {
+  return React.createElement(NestedOption<IRequiredRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "required"
+      },
+    },
+  });
+};
+
+const RequiredRule = Object.assign<typeof _componentRequiredRule, NestedComponentMeta>(_componentRequiredRule, {
+  componentType: "option",
+});
 
 // owners:
 // Validator
@@ -270,19 +297,22 @@ type IStringLengthRuleProps = React.PropsWithChildren<{
   trim?: boolean;
   type?: "required" | "numeric" | "range" | "stringLength" | "custom" | "compare" | "pattern" | "email" | "async";
 }>
-const _componentStringLengthRule = memo(
-  (props: IStringLengthRuleProps) => {
-    return React.createElement(NestedOption<IStringLengthRuleProps>, { ...props });
-  }
-);
-
-const StringLengthRule: typeof _componentStringLengthRule & IElementDescriptor = Object.assign(_componentStringLengthRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "stringLength"
-  },
-})
+const _componentStringLengthRule = (props: IStringLengthRuleProps) => {
+  return React.createElement(NestedOption<IStringLengthRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "stringLength"
+      },
+    },
+  });
+};
+
+const StringLengthRule = Object.assign<typeof _componentStringLengthRule, NestedComponentMeta>(_componentStringLengthRule, {
+  componentType: "option",
+});
 
 // owners:
 // Validator
@@ -299,19 +329,22 @@ type IValidationRuleProps = React.PropsWithChildren<{
   comparisonType?: "!=" | "!==" | "<" | "<=" | "==" | "===" | ">" | ">=";
   pattern?: RegExp | string;
 }>
-const _componentValidationRule = memo(
-  (props: IValidationRuleProps) => {
-    return React.createElement(NestedOption<IValidationRuleProps>, { ...props });
-  }
-);
-
-const ValidationRule: typeof _componentValidationRule & IElementDescriptor = Object.assign(_componentValidationRule, {
-  OptionName: "validationRules",
-  IsCollectionItem: true,
-  PredefinedProps: {
-    type: "required"
-  },
-})
+const _componentValidationRule = (props: IValidationRuleProps) => {
+  return React.createElement(NestedOption<IValidationRuleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "validationRules",
+      IsCollectionItem: true,
+      PredefinedProps: {
+        type: "required"
+      },
+    },
+  });
+};
+
+const ValidationRule = Object.assign<typeof _componentValidationRule, NestedComponentMeta>(_componentValidationRule, {
+  componentType: "option",
+});
 
 export default Validator;
 export {
diff --git a/packages/devextreme-react/src/vector-map.ts b/packages/devextreme-react/src/vector-map.ts
index 2af20dd641e9..6e02f9f96513 100644
--- a/packages/devextreme-react/src/vector-map.ts
+++ b/packages/devextreme-react/src/vector-map.ts
@@ -5,7 +5,7 @@ import dxVectorMap, {
     Properties
 } from "devextreme/viz/vector_map";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { ClickEvent, DisposingEvent, DrawnEvent, ExportedEvent, ExportingEvent, FileSavingEvent, IncidentOccurredEvent, InitializedEvent, TooltipHiddenEvent, TooltipShownEvent, dxVectorMapAnnotationConfig, MapLayerElement, VectorMapLegendItem } from "devextreme/viz/vector_map";
@@ -148,32 +148,35 @@ type IAnnotationProps = React.PropsWithChildren<{
   tooltipRender?: (...params: any) => React.ReactNode;
   tooltipComponent?: React.ComponentType<any>;
 }>
-const _componentAnnotation = memo(
-  (props: IAnnotationProps) => {
-    return React.createElement(NestedOption<IAnnotationProps>, { ...props });
-  }
-);
-
-const Annotation: typeof _componentAnnotation & IElementDescriptor = Object.assign(_componentAnnotation, {
-  OptionName: "annotations",
-  IsCollectionItem: true,
-  ExpectedChildren: {
-    annotationBorder: { optionName: "border", isCollectionItem: false },
-    border: { optionName: "border", isCollectionItem: false },
-    font: { optionName: "font", isCollectionItem: false },
-    image: { optionName: "image", isCollectionItem: false },
-    shadow: { optionName: "shadow", isCollectionItem: false }
-  },
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }, {
-    tmplOption: "tooltipTemplate",
-    render: "tooltipRender",
-    component: "tooltipComponent"
-  }],
-})
+const _componentAnnotation = (props: IAnnotationProps) => {
+  return React.createElement(NestedOption<IAnnotationProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "annotations",
+      IsCollectionItem: true,
+      ExpectedChildren: {
+        annotationBorder: { optionName: "border", isCollectionItem: false },
+        border: { optionName: "border", isCollectionItem: false },
+        font: { optionName: "font", isCollectionItem: false },
+        image: { optionName: "image", isCollectionItem: false },
+        shadow: { optionName: "shadow", isCollectionItem: false }
+      },
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }, {
+        tmplOption: "tooltipTemplate",
+        render: "tooltipRender",
+        component: "tooltipComponent"
+      }],
+    },
+  });
+};
+
+const Annotation = Object.assign<typeof _componentAnnotation, NestedComponentMeta>(_componentAnnotation, {
+  componentType: "option",
+});
 
 // owners:
 // Annotation
@@ -186,15 +189,18 @@ type IAnnotationBorderProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentAnnotationBorder = memo(
-  (props: IAnnotationBorderProps) => {
-    return React.createElement(NestedOption<IAnnotationBorderProps>, { ...props });
-  }
-);
+const _componentAnnotationBorder = (props: IAnnotationBorderProps) => {
+  return React.createElement(NestedOption<IAnnotationBorderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
 
-const AnnotationBorder: typeof _componentAnnotationBorder & IElementDescriptor = Object.assign(_componentAnnotationBorder, {
-  OptionName: "border",
-})
+const AnnotationBorder = Object.assign<typeof _componentAnnotationBorder, NestedComponentMeta>(_componentAnnotationBorder, {
+  componentType: "option",
+});
 
 // owners:
 // VectorMap
@@ -202,15 +208,18 @@ type IBackgroundProps = React.PropsWithChildren<{
   borderColor?: string;
   color?: string;
 }>
-const _componentBackground = memo(
-  (props: IBackgroundProps) => {
-    return React.createElement(NestedOption<IBackgroundProps>, { ...props });
-  }
-);
+const _componentBackground = (props: IBackgroundProps) => {
+  return React.createElement(NestedOption<IBackgroundProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "background",
+    },
+  });
+};
 
-const Background: typeof _componentBackground & IElementDescriptor = Object.assign(_componentBackground, {
-  OptionName: "background",
-})
+const Background = Object.assign<typeof _componentBackground, NestedComponentMeta>(_componentBackground, {
+  componentType: "option",
+});
 
 // owners:
 // Annotation
@@ -224,15 +233,18 @@ type IBorderProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentBorder = memo(
-  (props: IBorderProps) => {
-    return React.createElement(NestedOption<IBorderProps>, { ...props });
-  }
-);
+const _componentBorder = (props: IBorderProps) => {
+  return React.createElement(NestedOption<IBorderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
 
-const Border: typeof _componentBorder & IElementDescriptor = Object.assign(_componentBorder, {
-  OptionName: "border",
-})
+const Border = Object.assign<typeof _componentBorder, NestedComponentMeta>(_componentBorder, {
+  componentType: "option",
+});
 
 // owners:
 // VectorMap
@@ -287,24 +299,27 @@ type ICommonAnnotationSettingsProps = React.PropsWithChildren<{
   tooltipRender?: (...params: any) => React.ReactNode;
   tooltipComponent?: React.ComponentType<any>;
 }>
-const _componentCommonAnnotationSettings = memo(
-  (props: ICommonAnnotationSettingsProps) => {
-    return React.createElement(NestedOption<ICommonAnnotationSettingsProps>, { ...props });
-  }
-);
-
-const CommonAnnotationSettings: typeof _componentCommonAnnotationSettings & IElementDescriptor = Object.assign(_componentCommonAnnotationSettings, {
-  OptionName: "commonAnnotationSettings",
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }, {
-    tmplOption: "tooltipTemplate",
-    render: "tooltipRender",
-    component: "tooltipComponent"
-  }],
-})
+const _componentCommonAnnotationSettings = (props: ICommonAnnotationSettingsProps) => {
+  return React.createElement(NestedOption<ICommonAnnotationSettingsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "commonAnnotationSettings",
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }, {
+        tmplOption: "tooltipTemplate",
+        render: "tooltipRender",
+        component: "tooltipComponent"
+      }],
+    },
+  });
+};
+
+const CommonAnnotationSettings = Object.assign<typeof _componentCommonAnnotationSettings, NestedComponentMeta>(_componentCommonAnnotationSettings, {
+  componentType: "option",
+});
 
 // owners:
 // VectorMap
@@ -319,15 +334,18 @@ type IControlBarProps = React.PropsWithChildren<{
   verticalAlignment?: "bottom" | "top";
   zoomVisible?: boolean;
 }>
-const _componentControlBar = memo(
-  (props: IControlBarProps) => {
-    return React.createElement(NestedOption<IControlBarProps>, { ...props });
-  }
-);
+const _componentControlBar = (props: IControlBarProps) => {
+  return React.createElement(NestedOption<IControlBarProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "controlBar",
+    },
+  });
+};
 
-const ControlBar: typeof _componentControlBar & IElementDescriptor = Object.assign(_componentControlBar, {
-  OptionName: "controlBar",
-})
+const ControlBar = Object.assign<typeof _componentControlBar, NestedComponentMeta>(_componentControlBar, {
+  componentType: "option",
+});
 
 // owners:
 // VectorMap
@@ -340,15 +358,18 @@ type IExportProps = React.PropsWithChildren<{
   printingEnabled?: boolean;
   svgToCanvas?: ((svg: any, canvas: any) => any);
 }>
-const _componentExport = memo(
-  (props: IExportProps) => {
-    return React.createElement(NestedOption<IExportProps>, { ...props });
-  }
-);
+const _componentExport = (props: IExportProps) => {
+  return React.createElement(NestedOption<IExportProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "export",
+    },
+  });
+};
 
-const Export: typeof _componentExport & IElementDescriptor = Object.assign(_componentExport, {
-  OptionName: "export",
-})
+const Export = Object.assign<typeof _componentExport, NestedComponentMeta>(_componentExport, {
+  componentType: "option",
+});
 
 // owners:
 // Annotation
@@ -367,15 +388,18 @@ type IFontProps = React.PropsWithChildren<{
   size?: number | string;
   weight?: number;
 }>
-const _componentFont = memo(
-  (props: IFontProps) => {
-    return React.createElement(NestedOption<IFontProps>, { ...props });
-  }
-);
+const _componentFont = (props: IFontProps) => {
+  return React.createElement(NestedOption<IFontProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "font",
+    },
+  });
+};
 
-const Font: typeof _componentFont & IElementDescriptor = Object.assign(_componentFont, {
-  OptionName: "font",
-})
+const Font = Object.assign<typeof _componentFont, NestedComponentMeta>(_componentFont, {
+  componentType: "option",
+});
 
 // owners:
 // Annotation
@@ -384,15 +408,18 @@ type IImageProps = React.PropsWithChildren<{
   url?: string;
   width?: number;
 }>
-const _componentImage = memo(
-  (props: IImageProps) => {
-    return React.createElement(NestedOption<IImageProps>, { ...props });
-  }
-);
+const _componentImage = (props: IImageProps) => {
+  return React.createElement(NestedOption<IImageProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "image",
+    },
+  });
+};
 
-const Image: typeof _componentImage & IElementDescriptor = Object.assign(_componentImage, {
-  OptionName: "image",
-})
+const Image = Object.assign<typeof _componentImage, NestedComponentMeta>(_componentImage, {
+  componentType: "option",
+});
 
 // owners:
 // Layer
@@ -401,18 +428,21 @@ type ILabelProps = React.PropsWithChildren<{
   enabled?: boolean;
   font?: ChartsFont;
 }>
-const _componentLabel = memo(
-  (props: ILabelProps) => {
-    return React.createElement(NestedOption<ILabelProps>, { ...props });
-  }
-);
-
-const Label: typeof _componentLabel & IElementDescriptor = Object.assign(_componentLabel, {
-  OptionName: "label",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false }
-  },
-})
+const _componentLabel = (props: ILabelProps) => {
+  return React.createElement(NestedOption<ILabelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "label",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Label = Object.assign<typeof _componentLabel, NestedComponentMeta>(_componentLabel, {
+  componentType: "option",
+});
 
 // owners:
 // VectorMap
@@ -451,19 +481,22 @@ type ILayerProps = React.PropsWithChildren<{
   sizeGroups?: Array<number>;
   type?: "area" | "line" | "marker";
 }>
-const _componentLayer = memo(
-  (props: ILayerProps) => {
-    return React.createElement(NestedOption<ILayerProps>, { ...props });
-  }
-);
-
-const Layer: typeof _componentLayer & IElementDescriptor = Object.assign(_componentLayer, {
-  OptionName: "layers",
-  IsCollectionItem: true,
-  ExpectedChildren: {
-    label: { optionName: "label", isCollectionItem: false }
-  },
-})
+const _componentLayer = (props: ILayerProps) => {
+  return React.createElement(NestedOption<ILayerProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "layers",
+      IsCollectionItem: true,
+      ExpectedChildren: {
+        label: { optionName: "label", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const Layer = Object.assign<typeof _componentLayer, NestedComponentMeta>(_componentLayer, {
+  componentType: "option",
+});
 
 // owners:
 // VectorMap
@@ -528,30 +561,33 @@ type ILegendProps = React.PropsWithChildren<{
   markerRender?: (...params: any) => React.ReactNode;
   markerComponent?: React.ComponentType<any>;
 }>
-const _componentLegend = memo(
-  (props: ILegendProps) => {
-    return React.createElement(NestedOption<ILegendProps>, { ...props });
-  }
-);
-
-const Legend: typeof _componentLegend & IElementDescriptor = Object.assign(_componentLegend, {
-  OptionName: "legends",
-  IsCollectionItem: true,
-  ExpectedChildren: {
-    annotationBorder: { optionName: "border", isCollectionItem: false },
-    border: { optionName: "border", isCollectionItem: false },
-    font: { optionName: "font", isCollectionItem: false },
-    legendTitle: { optionName: "title", isCollectionItem: false },
-    margin: { optionName: "margin", isCollectionItem: false },
-    source: { optionName: "source", isCollectionItem: false },
-    title: { optionName: "title", isCollectionItem: false }
-  },
-  TemplateProps: [{
-    tmplOption: "markerTemplate",
-    render: "markerRender",
-    component: "markerComponent"
-  }],
-})
+const _componentLegend = (props: ILegendProps) => {
+  return React.createElement(NestedOption<ILegendProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "legends",
+      IsCollectionItem: true,
+      ExpectedChildren: {
+        annotationBorder: { optionName: "border", isCollectionItem: false },
+        border: { optionName: "border", isCollectionItem: false },
+        font: { optionName: "font", isCollectionItem: false },
+        legendTitle: { optionName: "title", isCollectionItem: false },
+        margin: { optionName: "margin", isCollectionItem: false },
+        source: { optionName: "source", isCollectionItem: false },
+        title: { optionName: "title", isCollectionItem: false }
+      },
+      TemplateProps: [{
+        tmplOption: "markerTemplate",
+        render: "markerRender",
+        component: "markerComponent"
+      }],
+    },
+  });
+};
+
+const Legend = Object.assign<typeof _componentLegend, NestedComponentMeta>(_componentLegend, {
+  componentType: "option",
+});
 
 // owners:
 // Legend
@@ -573,21 +609,24 @@ type ILegendTitleProps = React.PropsWithChildren<{
   text?: string;
   verticalAlignment?: "bottom" | "top";
 }>
-const _componentLegendTitle = memo(
-  (props: ILegendTitleProps) => {
-    return React.createElement(NestedOption<ILegendTitleProps>, { ...props });
-  }
-);
-
-const LegendTitle: typeof _componentLegendTitle & IElementDescriptor = Object.assign(_componentLegendTitle, {
-  OptionName: "title",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false },
-    legendTitleSubtitle: { optionName: "subtitle", isCollectionItem: false },
-    margin: { optionName: "margin", isCollectionItem: false },
-    subtitle: { optionName: "subtitle", isCollectionItem: false }
-  },
-})
+const _componentLegendTitle = (props: ILegendTitleProps) => {
+  return React.createElement(NestedOption<ILegendTitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "title",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false },
+        legendTitleSubtitle: { optionName: "subtitle", isCollectionItem: false },
+        margin: { optionName: "margin", isCollectionItem: false },
+        subtitle: { optionName: "subtitle", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const LegendTitle = Object.assign<typeof _componentLegendTitle, NestedComponentMeta>(_componentLegendTitle, {
+  componentType: "option",
+});
 
 // owners:
 // LegendTitle
@@ -596,18 +635,21 @@ type ILegendTitleSubtitleProps = React.PropsWithChildren<{
   offset?: number;
   text?: string;
 }>
-const _componentLegendTitleSubtitle = memo(
-  (props: ILegendTitleSubtitleProps) => {
-    return React.createElement(NestedOption<ILegendTitleSubtitleProps>, { ...props });
-  }
-);
-
-const LegendTitleSubtitle: typeof _componentLegendTitleSubtitle & IElementDescriptor = Object.assign(_componentLegendTitleSubtitle, {
-  OptionName: "subtitle",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false }
-  },
-})
+const _componentLegendTitleSubtitle = (props: ILegendTitleSubtitleProps) => {
+  return React.createElement(NestedOption<ILegendTitleSubtitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "subtitle",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const LegendTitleSubtitle = Object.assign<typeof _componentLegendTitleSubtitle, NestedComponentMeta>(_componentLegendTitleSubtitle, {
+  componentType: "option",
+});
 
 // owners:
 // VectorMap
@@ -620,21 +662,24 @@ type ILoadingIndicatorProps = React.PropsWithChildren<{
   defaultShow?: boolean;
   onShowChange?: (value: boolean) => void;
 }>
-const _componentLoadingIndicator = memo(
-  (props: ILoadingIndicatorProps) => {
-    return React.createElement(NestedOption<ILoadingIndicatorProps>, { ...props });
-  }
-);
-
-const LoadingIndicator: typeof _componentLoadingIndicator & IElementDescriptor = Object.assign(_componentLoadingIndicator, {
-  OptionName: "loadingIndicator",
-  DefaultsProps: {
-    defaultShow: "show"
-  },
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false }
-  },
-})
+const _componentLoadingIndicator = (props: ILoadingIndicatorProps) => {
+  return React.createElement(NestedOption<ILoadingIndicatorProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "loadingIndicator",
+      DefaultsProps: {
+        defaultShow: "show"
+      },
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const LoadingIndicator = Object.assign<typeof _componentLoadingIndicator, NestedComponentMeta>(_componentLoadingIndicator, {
+  componentType: "option",
+});
 
 // owners:
 // Legend
@@ -646,15 +691,18 @@ type IMarginProps = React.PropsWithChildren<{
   right?: number;
   top?: number;
 }>
-const _componentMargin = memo(
-  (props: IMarginProps) => {
-    return React.createElement(NestedOption<IMarginProps>, { ...props });
-  }
-);
+const _componentMargin = (props: IMarginProps) => {
+  return React.createElement(NestedOption<IMarginProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "margin",
+    },
+  });
+};
 
-const Margin: typeof _componentMargin & IElementDescriptor = Object.assign(_componentMargin, {
-  OptionName: "margin",
-})
+const Margin = Object.assign<typeof _componentMargin, NestedComponentMeta>(_componentMargin, {
+  componentType: "option",
+});
 
 // owners:
 // VectorMap
@@ -663,15 +711,18 @@ type IProjectionProps = React.PropsWithChildren<{
   from?: ((coordinates: Array<number>) => Array<number>);
   to?: ((coordinates: Array<number>) => Array<number>);
 }>
-const _componentProjection = memo(
-  (props: IProjectionProps) => {
-    return React.createElement(NestedOption<IProjectionProps>, { ...props });
-  }
-);
+const _componentProjection = (props: IProjectionProps) => {
+  return React.createElement(NestedOption<IProjectionProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "projection",
+    },
+  });
+};
 
-const Projection: typeof _componentProjection & IElementDescriptor = Object.assign(_componentProjection, {
-  OptionName: "projection",
-})
+const Projection = Object.assign<typeof _componentProjection, NestedComponentMeta>(_componentProjection, {
+  componentType: "option",
+});
 
 // owners:
 // Annotation
@@ -683,15 +734,18 @@ type IShadowProps = React.PropsWithChildren<{
   offsetY?: number;
   opacity?: number;
 }>
-const _componentShadow = memo(
-  (props: IShadowProps) => {
-    return React.createElement(NestedOption<IShadowProps>, { ...props });
-  }
-);
+const _componentShadow = (props: IShadowProps) => {
+  return React.createElement(NestedOption<IShadowProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "shadow",
+    },
+  });
+};
 
-const Shadow: typeof _componentShadow & IElementDescriptor = Object.assign(_componentShadow, {
-  OptionName: "shadow",
-})
+const Shadow = Object.assign<typeof _componentShadow, NestedComponentMeta>(_componentShadow, {
+  componentType: "option",
+});
 
 // owners:
 // VectorMap
@@ -699,15 +753,18 @@ type ISizeProps = React.PropsWithChildren<{
   height?: number;
   width?: number;
 }>
-const _componentSize = memo(
-  (props: ISizeProps) => {
-    return React.createElement(NestedOption<ISizeProps>, { ...props });
-  }
-);
+const _componentSize = (props: ISizeProps) => {
+  return React.createElement(NestedOption<ISizeProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "size",
+    },
+  });
+};
 
-const Size: typeof _componentSize & IElementDescriptor = Object.assign(_componentSize, {
-  OptionName: "size",
-})
+const Size = Object.assign<typeof _componentSize, NestedComponentMeta>(_componentSize, {
+  componentType: "option",
+});
 
 // owners:
 // Legend
@@ -715,15 +772,18 @@ type ISourceProps = React.PropsWithChildren<{
   grouping?: string;
   layer?: string;
 }>
-const _componentSource = memo(
-  (props: ISourceProps) => {
-    return React.createElement(NestedOption<ISourceProps>, { ...props });
-  }
-);
+const _componentSource = (props: ISourceProps) => {
+  return React.createElement(NestedOption<ISourceProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "source",
+    },
+  });
+};
 
-const Source: typeof _componentSource & IElementDescriptor = Object.assign(_componentSource, {
-  OptionName: "source",
-})
+const Source = Object.assign<typeof _componentSource, NestedComponentMeta>(_componentSource, {
+  componentType: "option",
+});
 
 // owners:
 // LegendTitle
@@ -735,15 +795,18 @@ type ISubtitleProps = React.PropsWithChildren<{
   textOverflow?: "ellipsis" | "hide" | "none";
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentSubtitle = memo(
-  (props: ISubtitleProps) => {
-    return React.createElement(NestedOption<ISubtitleProps>, { ...props });
-  }
-);
+const _componentSubtitle = (props: ISubtitleProps) => {
+  return React.createElement(NestedOption<ISubtitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "subtitle",
+    },
+  });
+};
 
-const Subtitle: typeof _componentSubtitle & IElementDescriptor = Object.assign(_componentSubtitle, {
-  OptionName: "subtitle",
-})
+const Subtitle = Object.assign<typeof _componentSubtitle, NestedComponentMeta>(_componentSubtitle, {
+  componentType: "option",
+});
 
 // owners:
 // Legend
@@ -770,15 +833,18 @@ type ITitleProps = React.PropsWithChildren<{
   textOverflow?: "ellipsis" | "hide" | "none";
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentTitle = memo(
-  (props: ITitleProps) => {
-    return React.createElement(NestedOption<ITitleProps>, { ...props });
-  }
-);
+const _componentTitle = (props: ITitleProps) => {
+  return React.createElement(NestedOption<ITitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "title",
+    },
+  });
+};
 
-const Title: typeof _componentTitle & IElementDescriptor = Object.assign(_componentTitle, {
-  OptionName: "title",
-})
+const Title = Object.assign<typeof _componentTitle, NestedComponentMeta>(_componentTitle, {
+  componentType: "option",
+});
 
 // owners:
 // VectorMap
@@ -812,26 +878,29 @@ type ITooltipProps = React.PropsWithChildren<{
   contentRender?: (...params: any) => React.ReactNode;
   contentComponent?: React.ComponentType<any>;
 }>
-const _componentTooltip = memo(
-  (props: ITooltipProps) => {
-    return React.createElement(NestedOption<ITooltipProps>, { ...props });
-  }
-);
-
-const Tooltip: typeof _componentTooltip & IElementDescriptor = Object.assign(_componentTooltip, {
-  OptionName: "tooltip",
-  ExpectedChildren: {
-    border: { optionName: "border", isCollectionItem: false },
-    font: { optionName: "font", isCollectionItem: false },
-    shadow: { optionName: "shadow", isCollectionItem: false },
-    tooltipBorder: { optionName: "border", isCollectionItem: false }
-  },
-  TemplateProps: [{
-    tmplOption: "contentTemplate",
-    render: "contentRender",
-    component: "contentComponent"
-  }],
-})
+const _componentTooltip = (props: ITooltipProps) => {
+  return React.createElement(NestedOption<ITooltipProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "tooltip",
+      ExpectedChildren: {
+        border: { optionName: "border", isCollectionItem: false },
+        font: { optionName: "font", isCollectionItem: false },
+        shadow: { optionName: "shadow", isCollectionItem: false },
+        tooltipBorder: { optionName: "border", isCollectionItem: false }
+      },
+      TemplateProps: [{
+        tmplOption: "contentTemplate",
+        render: "contentRender",
+        component: "contentComponent"
+      }],
+    },
+  });
+};
+
+const Tooltip = Object.assign<typeof _componentTooltip, NestedComponentMeta>(_componentTooltip, {
+  componentType: "option",
+});
 
 // owners:
 // Tooltip
@@ -842,15 +911,18 @@ type ITooltipBorderProps = React.PropsWithChildren<{
   visible?: boolean;
   width?: number;
 }>
-const _componentTooltipBorder = memo(
-  (props: ITooltipBorderProps) => {
-    return React.createElement(NestedOption<ITooltipBorderProps>, { ...props });
-  }
-);
+const _componentTooltipBorder = (props: ITooltipBorderProps) => {
+  return React.createElement(NestedOption<ITooltipBorderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "border",
+    },
+  });
+};
 
-const TooltipBorder: typeof _componentTooltipBorder & IElementDescriptor = Object.assign(_componentTooltipBorder, {
-  OptionName: "border",
-})
+const TooltipBorder = Object.assign<typeof _componentTooltipBorder, NestedComponentMeta>(_componentTooltipBorder, {
+  componentType: "option",
+});
 
 // owners:
 // VectorMap
@@ -876,21 +948,24 @@ type IVectorMapTitleProps = React.PropsWithChildren<{
   verticalAlignment?: "bottom" | "top";
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentVectorMapTitle = memo(
-  (props: IVectorMapTitleProps) => {
-    return React.createElement(NestedOption<IVectorMapTitleProps>, { ...props });
-  }
-);
-
-const VectorMapTitle: typeof _componentVectorMapTitle & IElementDescriptor = Object.assign(_componentVectorMapTitle, {
-  OptionName: "title",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false },
-    margin: { optionName: "margin", isCollectionItem: false },
-    subtitle: { optionName: "subtitle", isCollectionItem: false },
-    vectorMapTitleSubtitle: { optionName: "subtitle", isCollectionItem: false }
-  },
-})
+const _componentVectorMapTitle = (props: IVectorMapTitleProps) => {
+  return React.createElement(NestedOption<IVectorMapTitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "title",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false },
+        margin: { optionName: "margin", isCollectionItem: false },
+        subtitle: { optionName: "subtitle", isCollectionItem: false },
+        vectorMapTitleSubtitle: { optionName: "subtitle", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const VectorMapTitle = Object.assign<typeof _componentVectorMapTitle, NestedComponentMeta>(_componentVectorMapTitle, {
+  componentType: "option",
+});
 
 // owners:
 // VectorMapTitle
@@ -901,18 +976,21 @@ type IVectorMapTitleSubtitleProps = React.PropsWithChildren<{
   textOverflow?: "ellipsis" | "hide" | "none";
   wordWrap?: "normal" | "breakWord" | "none";
 }>
-const _componentVectorMapTitleSubtitle = memo(
-  (props: IVectorMapTitleSubtitleProps) => {
-    return React.createElement(NestedOption<IVectorMapTitleSubtitleProps>, { ...props });
-  }
-);
-
-const VectorMapTitleSubtitle: typeof _componentVectorMapTitleSubtitle & IElementDescriptor = Object.assign(_componentVectorMapTitleSubtitle, {
-  OptionName: "subtitle",
-  ExpectedChildren: {
-    font: { optionName: "font", isCollectionItem: false }
-  },
-})
+const _componentVectorMapTitleSubtitle = (props: IVectorMapTitleSubtitleProps) => {
+  return React.createElement(NestedOption<IVectorMapTitleSubtitleProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "subtitle",
+      ExpectedChildren: {
+        font: { optionName: "font", isCollectionItem: false }
+      },
+    },
+  });
+};
+
+const VectorMapTitleSubtitle = Object.assign<typeof _componentVectorMapTitleSubtitle, NestedComponentMeta>(_componentVectorMapTitleSubtitle, {
+  componentType: "option",
+});
 
 export default VectorMap;
 export {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d157e0ffeca5..a0da8a8d558b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -45,8 +45,8 @@ importers:
         specifier: 6.0.2
         version: 6.0.2(@angular/compiler@17.3.12(@angular/core@17.3.12(rxjs@7.8.1)(zone.js@0.14.10)))(@angular/core@17.3.12(rxjs@7.8.1)(zone.js@0.14.10))(tslint@6.1.3(typescript@5.4.5))
       devextreme-internal-tools:
-        specifier: 16.0.0-beta.5
-        version: 16.0.0-beta.5
+        specifier: 16.0.0-beta.6
+        version: 16.0.0-beta.6
       http-server:
         specifier: 14.1.1
         version: 14.1.1
@@ -7943,8 +7943,8 @@ packages:
   devextreme-cldr-data@1.0.3:
     resolution: {integrity: sha512-xd+uWv1KzEhr+ZH/MOWfDei3GFz+NAYyKUR9HgjM9BBwPel7PpMElYp4whM+PtAjziBaTssQnA//ob5c3BovTA==}
 
-  devextreme-internal-tools@16.0.0-beta.5:
-    resolution: {integrity: sha512-9byDq+p1oelZZnufFJS6rUo4BfPiOWfPAIZogrNFfro72N9z9mENd9QrRcEvb9nlmEbuLjbjDfNkJZrxnCMAEw==}
+  devextreme-internal-tools@16.0.0-beta.6:
+    resolution: {integrity: sha512-fH3q30Q58R6ijxRtJYwx/Q3+6ywiv9kge8OMvpi03K0vAObg0gK5XjMXajxIPy8lwojm7pVyqpFRVfVG+yVgbA==}
     engines: {node: '>=12.0.0'}
     hasBin: true
 
@@ -26046,7 +26046,7 @@ snapshots:
 
   devextreme-cldr-data@1.0.3: {}
 
-  devextreme-internal-tools@16.0.0-beta.5:
+  devextreme-internal-tools@16.0.0-beta.6:
     dependencies:
       dasherize: 2.0.0
       deepmerge: 4.3.1