Repository: DevExpress/devextreme-react
Pull request #371 (2019-07-29 13:51:46)

Support stand-alone extension components (T750751)


Patch:
diff --git a/example/app.tsx b/example/app.tsx
index 7a04b6b..33bc1f4 100644
--- a/example/app.tsx
+++ b/example/app.tsx
@@ -17,6 +17,7 @@ import SchedulerExample from "./scheduler-example";
 import ScrollViewExample from "./scroll-view-example";
 import SelectBoxExample from "./selectbox-example";
 import SlideOutViewExample from "./slide-out-view-example";
+import StandaloneValidatorExample from "./standalone-validator";
 import TextBoxExample from "./text-box-example";
 import ToolbarExample from "./toolbar-example";
 import ValidationExample from "./validation-example";
@@ -76,6 +77,7 @@ ReactDOM.render(
     </Example>
 
     <BoxExample />
+    <StandaloneValidatorExample />
 
   </div>,
   document.getElementById("app")
diff --git a/example/form-example.tsx b/example/form-example.tsx
index 99e0ac3..ea95c10 100644
--- a/example/form-example.tsx
+++ b/example/form-example.tsx
@@ -1,7 +1,8 @@
 import * as React from "react";
 import Example from "./example-block";
 
-import Form, { RequiredRule, SimpleItem, } from "../src/form";
+import { Button, NumberBox } from "../src";
+import Form, { GroupItem, Item, RequiredRule, SimpleItem, } from "../src/form";
 import TextArea from "../src/text-area";
 
 const employee: any = {
@@ -26,14 +27,29 @@ const positions = [
     "Shipping Manager"
 ];
 
-export default class extends React.Component<any, {}> {
+export default class extends React.Component<any, {disableIdInput: boolean}> {
+    constructor(props: any) {
+        super(props);
+
+        this.state = {
+            disableIdInput: true
+        };
+    }
 
     public render() {
+        const { disableIdInput } = this.state;
         return (
             <Example title="DxForm">
                 <Form colCount={2} formData={employee} >
-
-                    <SimpleItem dataField={"ID"} />
+                    <GroupItem caption="Form Group Item">
+                        <Item dataField={"ID"} component={getTextBoxComponent(disableIdInput)} />
+                        <Item>
+                            <Button
+                                text={disableIdInput ? "Enable input" : "Disable input"}
+                                onClick={this.toggleIdInputState}
+                            />
+                        </Item>
+                    </GroupItem>
                     <SimpleItem dataField={"FirstName"} editorOptions={{ disabled: true }} />
                     <SimpleItem dataField={"LastName"} editorOptions={{ disabled: true }} />
                     <SimpleItem
@@ -70,4 +86,10 @@ export default class extends React.Component<any, {}> {
             </Example>
         );
     }
+
+    private toggleIdInputState = () => this.setState({disableIdInput: !this.state.disableIdInput});
 }
+
+const getTextBoxComponent = (disabled: boolean) => (props: any) => {
+    return <NumberBox disabled={disabled} value={props.data.editorOptions.value} />;
+};
diff --git a/example/standalone-validator.tsx b/example/standalone-validator.tsx
new file mode 100644
index 0000000..1c3a555
--- /dev/null
+++ b/example/standalone-validator.tsx
@@ -0,0 +1,62 @@
+import * as React from "react";
+import { Button, TextBox, ValidationSummary, Validator } from "../src";
+
+import { RequiredRule } from "../src/validator";
+import Example from "./example-block";
+
+class ValidatorExample extends React.Component<any, any> {
+    private _currentValue: string = "";
+    private _adapter: any;
+    private _callbacks: any[] = [];
+
+    constructor(props: any) {
+        super(props);
+        this.state = {
+            isValid: true
+        };
+
+        this._adapter = {
+            getValue: () => {
+                return this._currentValue;
+            },
+            validationRequestsCallbacks: this._callbacks,
+            applyValidationResults: (e: any) => {
+                this.setState({ isValid: e.isValid });
+            }
+        };
+    }
+
+    public render() {
+        return (
+            <div>
+                <Example title={"Standalone Validator example"}>
+                    <div style={{ border: this.state.isValid ? "none" : "1px solid red" }}>
+                        <TextBox onValueChanged={this._onValueChanged} />
+                    </div>
+                    <Validator adapter={this._adapter}>
+                        <RequiredRule message={"This field is required"} />
+                    </Validator>
+                    <ValidationSummary/>
+                    <Button
+                        text={"Submit"}
+                        onClick={this._onSubmit}
+                    />
+                </Example>
+            </div>
+        );
+    }
+
+    private _onValueChanged = (e: any) => {
+        this._currentValue = e.value;
+
+        this._callbacks.forEach((callback: any) => {
+            callback();
+        });
+    }
+
+    private _onSubmit = (e: any) => {
+        e.validationGroup.validate();
+    }
+}
+
+export default ValidatorExample;
diff --git a/package.json b/package.json
index e5f72b7..5a08341 100644
--- a/package.json
+++ b/package.json
@@ -1,9 +1,9 @@
-{
+﻿{
   "author": {
     "name": "Developer Express Inc."
   },
   "name": "devextreme-react",
-  "version": "19.1.4",
+  "version": "19.1.5",
   "description": "DevExtreme React UI and Visualization Components",
   "repository": {
     "type": "git",
@@ -15,7 +15,7 @@
     "prop-types": "^15.6.1"
   },
   "peerDependencies": {
-    "devextreme": "~19.1.4",
+    "devextreme": "~19.1.5",
     "react": "^16.2.0",
     "react-dom": "^16.2.0"
   },
@@ -28,7 +28,7 @@
     "css-loader": "^2.1.0",
     "dasherize": "^2.0.0",
     "del": "^3.0.0",
-    "devextreme": "~19.1.4",
+    "devextreme": "~19.1.5",
     "dot": "^1.1.2",
     "enzyme": "^3.7.0",
     "enzyme-adapter-react-16": "^1.6.0",
diff --git a/src/core/component-base.ts b/src/core/component-base.ts
index 348d51a..1e6205f 100644
--- a/src/core/component-base.ts
+++ b/src/core/component-base.ts
@@ -39,6 +39,7 @@ abstract class ComponentBase<P extends IHtmlOptions> extends React.PureComponent
     super(props);
 
     this._setTemplatesRendererRef = this._setTemplatesRendererRef.bind(this);
+    this._createWidget = this._createWidget.bind(this);
 
     this._templatesStore = new TemplatesStore(() => {
       if (this._templatesRendererRef) {
diff --git a/src/core/component.ts b/src/core/component.ts
index d2dc60e..4b10aa1 100644
--- a/src/core/component.ts
+++ b/src/core/component.ts
@@ -4,18 +4,18 @@ import { ComponentBase, IHtmlOptions } from "./component-base";
 import { ExtensionComponent } from "./extension-component";
 
 class Component<P> extends ComponentBase<P> {
-  private _extensions: Array<(element: Element) => void> = [];
+  private _extensionCreators: Array<(element: Element) => void> = [];
 
   constructor(props: P) {
     super(props);
 
-    this.registerExtension = this.registerExtension.bind(this);
+    this._registerExtension = this._registerExtension.bind(this);
   }
 
   public componentDidMount() {
     super.componentDidMount();
     this._createWidget();
-    this._extensions.forEach((extension) => extension.call(this, this._element));
+    this._createExtensions();
   }
 
   protected renderChildren() {
@@ -25,7 +25,7 @@ class Component<P> extends ComponentBase<P> {
         if (child && ExtensionComponent.isPrototypeOf((child as any).type)) {
           return React.cloneElement(
             child as any,
-            { onMounted: this.registerExtension}
+            { onMounted: this._registerExtension}
           );
         }
 
@@ -34,8 +34,12 @@ class Component<P> extends ComponentBase<P> {
     );
   }
 
-  private registerExtension(callback: any) {
-    this._extensions.push(callback);
+  private _registerExtension(creator: any) {
+    this._extensionCreators.push(creator);
+  }
+
+  private _createExtensions() {
+    this._extensionCreators.forEach((creator) => creator(this._element));
   }
 }
 
diff --git a/src/core/extension-component.ts b/src/core/extension-component.ts
index e8b94e7..9ee002c 100644
--- a/src/core/extension-component.ts
+++ b/src/core/extension-component.ts
@@ -1,12 +1,16 @@
-import { ComponentBase } from "./component-base";
+import { ComponentBase, IHtmlOptions } from "./component-base";
 
-class ExtensionComponent<P> extends ComponentBase<P> {
+interface IExtensionOptions {
+  onMounted(callback: (element: Element) => void): void;
+}
+
+class ExtensionComponent<P extends IHtmlOptions & IExtensionOptions> extends ComponentBase<P> {
   public componentDidMount() {
-    const onMounted = (this.props as Record<string, any>).onMounted;
+    const onMounted = this.props.onMounted;
     if (onMounted) {
-      onMounted((element) => {
-        this._createWidget(element);
-      });
+      onMounted(this._createWidget);
+    } else {
+      this._createWidget();
     }
   }
 }
diff --git a/tools/integration-data.json b/tools/integration-data.json
index b02ecf8..43cf125 100644
--- a/tools/integration-data.json
+++ b/tools/integration-data.json
@@ -1,6 +1,6 @@
 {
   "meta": {
-    "docsRevision": "a73766e2d79539bb3d9d86e3f60128cc7f6d422a"
+    "docsRevision": "f025c87411d4a3933bfd1c2bcb8761b07eed8783"
   },
   "widgets": [
     {
@@ -5474,6 +5474,19 @@
                     }
                   ]
                 },
+                {
+                  "name": "horizontalAlignment",
+                  "types": [
+                    {
+                      "type": "String",
+                      "acceptableValues": [
+                        "\"center\"",
+                        "\"left\"",
+                        "\"right\""
+                      ]
+                    }
+                  ]
+                },
                 {
                   "name": "margin",
                   "types": [
@@ -5490,6 +5503,22 @@
                         }
                       ]
                     },
+                    {
+                      "name": "left",
+                      "types": [
+                        {
+                          "type": "Number"
+                        }
+                      ]
+                    },
+                    {
+                      "name": "right",
+                      "types": [
+                        {
+                          "type": "Number"
+                        }
+                      ]
+                    },
                     {
                       "name": "top",
                       "types": [
@@ -6701,6 +6730,14 @@
                 }
               ]
             },
+            {
+              "name": "cornerRadius",
+              "types": [
+                {
+                  "type": "Number"
+                }
+              ]
+            },
             {
               "name": "customizeTooltip",
               "types": [
@@ -6926,10 +6963,6 @@
               "componentName": "font",
               "optionName": "font"
             },
-            {
-              "componentName": "legendMargin",
-              "optionName": "margin"
-            },
             {
               "componentName": "margin",
               "optionName": "margin"
@@ -7766,10 +7799,6 @@
               "componentName": "legendBorder",
               "optionName": "border"
             },
-            {
-              "componentName": "legendMargin",
-              "optionName": "margin"
-            },
             {
               "componentName": "legendTitle",
               "optionName": "title"
@@ -8160,6 +8189,19 @@
                     }
                   ]
                 },
+                {
+                  "name": "horizontalAlignment",
+                  "types": [
+                    {
+                      "type": "String",
+                      "acceptableValues": [
+                        "\"center\"",
+                        "\"left\"",
+                        "\"right\""
+                      ]
+                    }
+                  ]
+                },
                 {
                   "name": "margin",
                   "types": [
@@ -8176,6 +8218,22 @@
                         }
                       ]
                     },
+                    {
+                      "name": "left",
+                      "types": [
+                        {
+                          "type": "Number"
+                        }
+                      ]
+                    },
+                    {
+                      "name": "right",
+                      "types": [
+                        {
+                          "type": "Number"
+                        }
+                      ]
+                    },
                     {
                       "name": "top",
                       "types": [
@@ -8339,49 +8397,6 @@
             }
           ]
         },
-        {
-          "name": "legendMargin",
-          "optionName": "margin",
-          "owners": [
-            "legend",
-            "DxBarGauge",
-            "barGaugeTitle"
-          ],
-          "props": [
-            {
-              "name": "bottom",
-              "types": [
-                {
-                  "type": "Number"
-                }
-              ]
-            },
-            {
-              "name": "left",
-              "types": [
-                {
-                  "type": "Number"
-                }
-              ]
-            },
-            {
-              "name": "right",
-              "types": [
-                {
-                  "type": "Number"
-                }
-              ]
-            },
-            {
-              "name": "top",
-              "types": [
-                {
-                  "type": "Number"
-                }
-              ]
-            }
-          ]
-        },
         {
           "name": "legendTitle",
           "optionName": "title",
@@ -8393,10 +8408,6 @@
               "componentName": "font",
               "optionName": "font"
             },
-            {
-              "componentName": "legendTitleMargin",
-              "optionName": "margin"
-            },
             {
               "componentName": "legendTitleSubtitle",
               "optionName": "subtitle"
@@ -8420,6 +8431,19 @@
                 }
               ]
             },
+            {
+              "name": "horizontalAlignment",
+              "types": [
+                {
+                  "type": "String",
+                  "acceptableValues": [
+                    "\"center\"",
+                    "\"left\"",
+                    "\"right\""
+                  ]
+                }
+              ]
+            },
             {
               "name": "margin",
               "types": [
@@ -8436,6 +8460,22 @@
                     }
                   ]
                 },
+                {
+                  "name": "left",
+                  "types": [
+                    {
+                      "type": "Number"
+                    }
+                  ]
+                },
+                {
+                  "name": "right",
+                  "types": [
+                    {
+                      "type": "Number"
+                    }
+                  ]
+                },
                 {
                   "name": "top",
                   "types": [
@@ -8514,31 +8554,6 @@
             }
           ]
         },
-        {
-          "name": "legendTitleMargin",
-          "optionName": "margin",
-          "owners": [
-            "legendTitle"
-          ],
-          "props": [
-            {
-              "name": "bottom",
-              "types": [
-                {
-                  "type": "Number"
-                }
-              ]
-            },
-            {
-              "name": "top",
-              "types": [
-                {
-                  "type": "Number"
-                }
-              ]
-            }
-          ]
-        },
         {
           "name": "legendTitleSubtitle",
           "optionName": "subtitle",
@@ -8641,9 +8656,9 @@
           "optionName": "margin",
           "owners": [
             "legend",
+            "legendTitle",
             "DxBarGauge",
-            "barGaugeTitle",
-            "legendTitle"
+            "barGaugeTitle"
           ],
           "props": [
             {
@@ -8832,6 +8847,19 @@
                 }
               ]
             },
+            {
+              "name": "horizontalAlignment",
+              "types": [
+                {
+                  "type": "String",
+                  "acceptableValues": [
+                    "\"center\"",
+                    "\"left\"",
+                    "\"right\""
+                  ]
+                }
+              ]
+            },
             {
               "name": "margin",
               "types": [
@@ -8848,6 +8876,22 @@
                     }
                   ]
                 },
+                {
+                  "name": "left",
+                  "types": [
+                    {
+                      "type": "Number"
+                    }
+                  ]
+                },
+                {
+                  "name": "right",
+                  "types": [
+                    {
+                      "type": "Number"
+                    }
+                  ]
+                },
                 {
                   "name": "top",
                   "types": [
@@ -8924,19 +8968,6 @@
                 }
               ]
             },
-            {
-              "name": "horizontalAlignment",
-              "types": [
-                {
-                  "type": "String",
-                  "acceptableValues": [
-                    "\"center\"",
-                    "\"left\"",
-                    "\"right\""
-                  ]
-                }
-              ]
-            },
             {
               "name": "textOverflow",
               "types": [
@@ -9077,6 +9108,14 @@
                 }
               ]
             },
+            {
+              "name": "cornerRadius",
+              "types": [
+                {
+                  "type": "Number"
+                }
+              ]
+            },
             {
               "name": "customizeTooltip",
               "types": [
@@ -9315,10 +9354,6 @@
           "componentName": "legend",
           "optionName": "legend"
         },
-        {
-          "componentName": "legendMargin",
-          "optionName": "margin"
-        },
         {
           "componentName": "loadingIndicator",
           "optionName": "loadingIndicator"
@@ -11082,6 +11117,14 @@
                 }
               ]
             },
+            {
+              "name": "cornerRadius",
+              "types": [
+                {
+                  "type": "Number"
+                }
+              ]
+            },
             {
               "name": "customizeTooltip",
               "types": [
@@ -11661,6 +11704,14 @@
                 }
               ]
             },
+            {
+              "name": "cornerRadius",
+              "types": [
+                {
+                  "type": "Number"
+                }
+              ]
+            },
             {
               "name": "customizeTooltip",
               "types": [
@@ -19130,6 +19181,19 @@
                     }
                   ]
                 },
+                {
+                  "name": "horizontalAlignment",
+                  "types": [
+                    {
+                      "type": "String",
+                      "acceptableValues": [
+                        "\"center\"",
+                        "\"left\"",
+                        "\"right\""
+                      ]
+                    }
+                  ]
+                },
                 {
                   "name": "margin",
                   "types": [
@@ -19146,6 +19210,22 @@
                         }
                       ]
                     },
+                    {
+                      "name": "left",
+                      "types": [
+                        {
+                          "type": "Number"
+                        }
+                      ]
+                    },
+                    {
+                      "name": "right",
+                      "types": [
+                        {
+                          "type": "Number"
+                        }
+                      ]
+                    },
                     {
                       "name": "top",
                       "types": [
@@ -21508,6 +21588,14 @@
                 }
               ]
             },
+            {
+              "name": "cornerRadius",
+              "types": [
+                {
+                  "type": "Number"
+                }
+              ]
+            },
             {
               "name": "customizeTooltip",
               "types": [
@@ -23688,6 +23776,14 @@
             }
           ],
           "props": [
+            {
+              "name": "allowDragging",
+              "types": [
+                {
+                  "type": "Boolean"
+                }
+              ]
+            },
             {
               "name": "argument",
               "types": [
@@ -23893,6 +23989,22 @@
                 }
               ]
             },
+            {
+              "name": "offsetX",
+              "types": [
+                {
+                  "type": "Number"
+                }
+              ]
+            },
+            {
+              "name": "offsetY",
+              "types": [
+                {
+                  "type": "Number"
+                }
+              ]
+            },
             {
               "name": "opacity",
               "types": [
@@ -26854,10 +26966,6 @@
               "componentName": "font",
               "optionName": "font"
             },
-            {
-              "componentName": "legendMargin",
-              "optionName": "margin"
-            },
             {
               "componentName": "margin",
               "optionName": "margin"
@@ -27128,6 +27236,14 @@
             "DxChart"
           ],
           "props": [
+            {
+              "name": "allowDragging",
+              "types": [
+                {
+                  "type": "Boolean"
+                }
+              ]
+            },
             {
               "name": "argument",
               "types": [
@@ -27325,6 +27441,22 @@
                 }
               ]
             },
+            {
+              "name": "offsetX",
+              "types": [
+                {
+                  "type": "Number"
+                }
+              ]
+            },
+            {
+              "name": "offsetY",
+              "types": [
+                {
+                  "type": "Number"
+                }
+              ]
+            },
             {
               "name": "opacity",
               "types": [
@@ -32965,10 +33097,6 @@
               "componentName": "font",
               "optionName": "font"
             },
-            {
-              "componentName": "legendMargin",
-              "optionName": "margin"
-            },
             {
               "componentName": "legendTitle",
               "optionName": "title"
@@ -33389,6 +33517,19 @@
                     }
                   ]
                 },
+                {
+                  "name": "horizontalAlignment",
+                  "types": [
+                    {
+                      "type": "String",
+                      "acceptableValues": [
+                        "\"center\"",
+                        "\"left\"",
+                        "\"right\""
+                      ]
+                    }
+                  ]
+                },
                 {
                   "name": "margin",
                   "types": [
@@ -33405,6 +33546,22 @@
                         }
                       ]
                     },
+                    {
+                      "name": "left",
+                      "types": [
+                        {
+                          "type": "Number"
+                        }
+                      ]
+                    },
+                    {
+                      "name": "right",
+                      "types": [
+                        {
+                          "type": "Number"
+                        }
+                      ]
+                    },
                     {
                       "name": "top",
                       "types": [
@@ -33505,49 +33662,6 @@
             }
           ]
         },
-        {
-          "name": "legendMargin",
-          "optionName": "margin",
-          "owners": [
-            "legend",
-            "DxChart",
-            "chartTitle"
-          ],
-          "props": [
-            {
-              "name": "bottom",
-              "types": [
-                {
-                  "type": "Number"
-                }
-              ]
-            },
-            {
-              "name": "left",
-              "types": [
-                {
-                  "type": "Number"
-                }
-              ]
-            },
-            {
-              "name": "right",
-              "types": [
-                {
-                  "type": "Number"
-                }
-              ]
-            },
-            {
-              "name": "top",
-              "types": [
-                {
-                  "type": "Number"
-                }
-              ]
-            }
-          ]
-        },
         {
           "name": "legendTitle",
           "optionName": "title",
@@ -33559,10 +33673,6 @@
               "componentName": "font",
               "optionName": "font"
             },
-            {
-              "componentName": "legendTitleMargin",
-              "optionName": "margin"
-            },
             {
               "componentName": "legendTitleSubtitle",
               "optionName": "subtitle"
@@ -33586,6 +33696,19 @@
                 }
               ]
             },
+            {
+              "name": "horizontalAlignment",
+              "types": [
+                {
+                  "type": "String",
+                  "acceptableValues": [
+                    "\"center\"",
+                    "\"left\"",
+                    "\"right\""
+                  ]
+                }
+              ]
+            },
             {
               "name": "margin",
               "types": [
@@ -33602,6 +33725,22 @@
                     }
                   ]
                 },
+                {
+                  "name": "left",
+                  "types": [
+                    {
+                      "type": "Number"
+                    }
+                  ]
+                },
+                {
+                  "name": "right",
+                  "types": [
+                    {
+                      "type": "Number"
+                    }
+                  ]
+                },
                 {
                   "name": "top",
                   "types": [
@@ -33680,31 +33819,6 @@
             }
           ]
         },
-        {
-          "name": "legendTitleMargin",
-          "optionName": "margin",
-          "owners": [
-            "legendTitle"
-          ],
-          "props": [
-            {
-              "name": "bottom",
-              "types": [
-                {
-                  "type": "Number"
-                }
-              ]
-            },
-            {
-              "name": "top",
-              "types": [
-                {
-                  "type": "Number"
-                }
-              ]
-            }
-          ]
-        },
         {
           "name": "legendTitleSubtitle",
           "optionName": "subtitle",
@@ -33888,9 +34002,9 @@
           "optionName": "margin",
           "owners": [
             "legend",
+            "legendTitle",
             "DxChart",
-            "chartTitle",
-            "legendTitle"
+            "chartTitle"
           ],
           "props": [
             {
@@ -37364,6 +37478,19 @@
                 }
               ]
             },
+            {
+              "name": "horizontalAlignment",
+              "types": [
+                {
+                  "type": "String",
+                  "acceptableValues": [
+                    "\"center\"",
+                    "\"left\"",
+                    "\"right\""
+                  ]
+                }
+              ]
+            },
             {
               "name": "placeholderSize",
               "types": [
@@ -37421,19 +37548,6 @@
                   ]
                 }
               ]
-            },
-            {
-              "name": "horizontalAlignment",
-              "types": [
-                {
-                  "type": "String",
-                  "acceptableValues": [
-                    "\"center\"",
-                    "\"left\"",
-                    "\"right\""
-                  ]
-                }
-              ]
             }
           ]
         },
@@ -37562,6 +37676,14 @@
                 }
               ]
             },
+            {
+              "name": "cornerRadius",
+              "types": [
+                {
+                  "type": "Number"
+                }
+              ]
+            },
             {
               "name": "customizeTooltip",
               "types": [
@@ -40258,10 +40380,6 @@
           "componentName": "legend",
           "optionName": "legend"
         },
-        {
-          "componentName": "legendMargin",
-          "optionName": "margin"
-        },
         {
           "componentName": "loadingIndicator",
           "optionName": "loadingIndicator"
@@ -42481,6 +42599,14 @@
                 }
               ]
             },
+            {
+              "name": "cornerRadius",
+              "types": [
+                {
+                  "type": "Number"
+                }
+              ]
+            },
             {
               "name": "customizeTooltip",
               "types": [
@@ -44667,6 +44793,14 @@
                 }
               ]
             },
+            {
+              "name": "cornerRadius",
+              "types": [
+                {
+                  "type": "Number"
+                }
+              ]
+            },
             {
               "name": "customizeTooltip",
               "types": [
@@ -60065,6 +60199,14 @@
                 }
               ]
             },
+            {
+              "name": "name",
+              "types": [
+                {
+                  "type": "String"
+                }
+              ]
+            },
             {
               "name": "trueText",
               "types": [
@@ -64132,6 +64274,14 @@
                                   "type": "String"
                                 }
                               ]
+                            },
+                            {
+                              "name": "name",
+                              "types": [
+                                {
+                                  "type": "String"
+                                }
+                              ]
                             }
                           ]
                         }
@@ -78707,7 +78857,7 @@
               "type": "Array",
               "itemTypes": [
                 {
-                  "type": "CollectionWidgetItem",
+                  "type": "dxDropDownButtonItem",
                   "isCustomType": true
                 },
                 {
@@ -80908,6 +81058,14 @@
             "DxDropDownButton"
           ],
           "props": [
+            {
+              "name": "badge",
+              "types": [
+                {
+                  "type": "String"
+                }
+              ]
+            },
             {
               "name": "disabled",
               "types": [
@@ -80924,6 +81082,30 @@
                 }
               ]
             },
+            {
+              "name": "icon",
+              "types": [
+                {
+                  "type": "String"
+                }
+              ]
+            },
+            {
+              "name": "key",
+              "types": [
+                {
+                  "type": "String"
+                }
+              ]
+            },
+            {
+              "name": "showChevron",
+              "types": [
+                {
+                  "type": "Boolean"
+                }
+              ]
+            },
             {
               "name": "template",
               "types": [
@@ -84173,6 +84355,14 @@
                 }
               ]
             },
+            {
+              "name": "name",
+              "types": [
+                {
+                  "type": "String"
+                }
+              ]
+            },
             {
               "name": "trueText",
               "types": [
@@ -87827,6 +88017,14 @@
                                   "type": "String"
                                 }
                               ]
+                            },
+                            {
+                              "name": "name",
+                              "types": [
+                                {
+                                  "type": "String"
+                                }
+                              ]
                             }
                           ]
                         }
@@ -91593,6 +91791,19 @@
                     }
                   ]
                 },
+                {
+                  "name": "horizontalAlignment",
+                  "types": [
+                    {
+                      "type": "String",
+                      "acceptableValues": [
+                        "\"center\"",
+                        "\"left\"",
+                        "\"right\""
+                      ]
+                    }
+                  ]
+                },
                 {
                   "name": "margin",
                   "types": [
@@ -91609,6 +91820,22 @@
                         }
                       ]
                     },
+                    {
+                      "name": "left",
+                      "types": [
+                        {
+                          "type": "Number"
+                        }
+                      ]
+                    },
+                    {
+                      "name": "right",
+                      "types": [
+                        {
+                          "type": "Number"
+                        }
+                      ]
+                    },
                     {
                       "name": "top",
                       "types": [
@@ -93008,6 +93235,14 @@
                 }
               ]
             },
+            {
+              "name": "cornerRadius",
+              "types": [
+                {
+                  "type": "Number"
+                }
+              ]
+            },
             {
               "name": "customizeTooltip",
               "types": [
@@ -93594,10 +93829,6 @@
               "componentName": "funnelTitleSubtitle",
               "optionName": "subtitle"
             },
-            {
-              "componentName": "legendMargin",
-              "optionName": "margin"
-            },
             {
               "componentName": "margin",
               "optionName": "margin"
@@ -94642,10 +94873,6 @@
               "componentName": "legendBorder",
               "optionName": "border"
             },
-            {
-              "componentName": "legendMargin",
-              "optionName": "margin"
-            },
             {
               "componentName": "legendTitle",
               "optionName": "title"
@@ -95027,6 +95254,19 @@
                     }
                   ]
                 },
+                {
+                  "name": "horizontalAlignment",
+                  "types": [
+                    {
+                      "type": "String",
+                      "acceptableValues": [
+                        "\"center\"",
+                        "\"left\"",
+                        "\"right\""
+                      ]
+                    }
+                  ]
+                },
                 {
                   "name": "margin",
                   "types": [
@@ -95043,6 +95283,22 @@
                         }
                       ]
                     },
+                    {
+                      "name": "left",
+                      "types": [
+                        {
+                          "type": "Number"
+                        }
+                      ]
+                    },
+                    {
+                      "name": "right",
+                      "types": [
+                        {
+                          "type": "Number"
+                        }
+                      ]
+                    },
                     {
                       "name": "top",
                       "types": [
@@ -95206,49 +95462,6 @@
             }
           ]
         },
-        {
-          "name": "legendMargin",
-          "optionName": "margin",
-          "owners": [
-            "legend",
-            "DxFunnel",
-            "funnelTitle"
-          ],
-          "props": [
-            {
-              "name": "bottom",
-              "types": [
-                {
-                  "type": "Number"
-                }
-              ]
-            },
-            {
-              "name": "left",
-              "types": [
-                {
-                  "type": "Number"
-                }
-              ]
-            },
-            {
-              "name": "right",
-              "types": [
-                {
-                  "type": "Number"
-                }
-              ]
-            },
-            {
-              "name": "top",
-              "types": [
-                {
-                  "type": "Number"
-                }
-              ]
-            }
-          ]
-        },
         {
           "name": "legendTitle",
           "optionName": "title",
@@ -95260,10 +95473,6 @@
               "componentName": "font",
               "optionName": "font"
             },
-            {
-              "componentName": "legendTitleMargin",
-              "optionName": "margin"
-            },
             {
               "componentName": "legendTitleSubtitle",
               "optionName": "subtitle"
@@ -95287,6 +95496,19 @@
                 }
               ]
             },
+            {
+              "name": "horizontalAlignment",
+              "types": [
+                {
+                  "type": "String",
+                  "acceptableValues": [
+                    "\"center\"",
+                    "\"left\"",
+                    "\"right\""
+                  ]
+                }
+              ]
+            },
             {
               "name": "margin",
               "types": [
@@ -95303,6 +95525,22 @@
                     }
                   ]
                 },
+                {
+                  "name": "left",
+                  "types": [
+                    {
+                      "type": "Number"
+                    }
+                  ]
+                },
+                {
+                  "name": "right",
+                  "types": [
+                    {
+                      "type": "Number"
+                    }
+                  ]
+                },
                 {
                   "name": "top",
                   "types": [
@@ -95381,31 +95619,6 @@
             }
           ]
         },
-        {
-          "name": "legendTitleMargin",
-          "optionName": "margin",
-          "owners": [
-            "legendTitle"
-          ],
-          "props": [
-            {
-              "name": "bottom",
-              "types": [
-                {
-                  "type": "Number"
-                }
-              ]
-            },
-            {
-              "name": "top",
-              "types": [
-                {
-                  "type": "Number"
-                }
-              ]
-            }
-          ]
-        },
         {
           "name": "legendTitleSubtitle",
           "optionName": "subtitle",
@@ -95508,9 +95721,9 @@
           "optionName": "margin",
           "owners": [
             "legend",
+            "legendTitle",
             "DxFunnel",
-            "funnelTitle",
-            "legendTitle"
+            "funnelTitle"
           ],
           "props": [
             {
@@ -95803,6 +96016,19 @@
                 }
               ]
             },
+            {
+              "name": "horizontalAlignment",
+              "types": [
+                {
+                  "type": "String",
+                  "acceptableValues": [
+                    "\"center\"",
+                    "\"left\"",
+                    "\"right\""
+                  ]
+                }
+              ]
+            },
             {
               "name": "margin",
               "types": [
@@ -95819,6 +96045,22 @@
                     }
                   ]
                 },
+                {
+                  "name": "left",
+                  "types": [
+                    {
+                      "type": "Number"
+                    }
+                  ]
+                },
+                {
+                  "name": "right",
+                  "types": [
+                    {
+                      "type": "Number"
+                    }
+                  ]
+                },
                 {
                   "name": "top",
                   "types": [
@@ -95895,19 +96137,6 @@
                 }
               ]
             },
-            {
-              "name": "horizontalAlignment",
-              "types": [
-                {
-                  "type": "String",
-                  "acceptableValues": [
-                    "\"center\"",
-                    "\"left\"",
-                    "\"right\""
-                  ]
-                }
-              ]
-            },
             {
               "name": "textOverflow",
               "types": [
@@ -96048,6 +96277,14 @@
                 }
               ]
             },
+            {
+              "name": "cornerRadius",
+              "types": [
+                {
+                  "type": "Number"
+                }
+              ]
+            },
             {
               "name": "customizeTooltip",
               "types": [
@@ -96303,10 +96540,6 @@
           "componentName": "legend",
           "optionName": "legend"
         },
-        {
-          "componentName": "legendMargin",
-          "optionName": "margin"
-        },
         {
           "componentName": "loadingIndicator",
           "optionName": "loadingIndicator"
@@ -100305,6 +100538,14 @@
                 }
               ]
             },
+            {
+              "name": "cornerRadius",
+              "types": [
+                {
+                  "type": "Number"
+                }
+              ]
+            },
             {
               "name": "customizeTooltip",
               "types": [
@@ -102514,6 +102755,14 @@
                 }
               ]
             },
+            {
+              "name": "cornerRadius",
+              "types": [
+                {
+                  "type": "Number"
+                }
+              ]
+            },
             {
               "name": "customizeTooltip",
               "types": [
@@ -120234,6 +120483,19 @@
                     }
                   ]
                 },
+                {
+                  "name": "horizontalAlignment",
+                  "types": [
+                    {
+                      "type": "String",
+                      "acceptableValues": [
+                        "\"center\"",
+                        "\"left\"",
+                        "\"right\""
+                      ]
+                    }
+                  ]
+                },
                 {
                   "name": "margin",
                   "types": [
@@ -120250,6 +120512,22 @@
                         }
                       ]
                     },
+                    {
+                      "name": "left",
+                      "types": [
+                        {
+                          "type": "Number"
+                        }
+                      ]
+                    },
+                    {
+                      "name": "right",
+                      "types": [
+                        {
+                          "type": "Number"
+                        }
+                      ]
+                    },
                     {
                       "name": "top",
                       "types": [
@@ -121902,6 +122180,14 @@
                 }
               ]
             },
+            {
+              "name": "cornerRadius",
+              "types": [
+                {
+                  "type": "Number"
+                }
+              ]
+            },
             {
               "name": "customizeTooltip",
               "types": [
@@ -123661,10 +123947,6 @@
               "componentName": "legendBorder",
               "optionName": "border"
             },
-            {
-              "componentName": "legendMargin",
-              "optionName": "margin"
-            },
             {
               "componentName": "legendTitle",
               "optionName": "title"
@@ -124072,6 +124354,19 @@
                     }
                   ]
                 },
+                {
+                  "name": "horizontalAlignment",
+                  "types": [
+                    {
+                      "type": "String",
+                      "acceptableValues": [
+                        "\"center\"",
+                        "\"left\"",
+                        "\"right\""
+                      ]
+                    }
+                  ]
+                },
                 {
                   "name": "margin",
                   "types": [
@@ -124088,6 +124383,22 @@
                         }
                       ]
                     },
+                    {
+                      "name": "left",
+                      "types": [
+                        {
+                          "type": "Number"
+                        }
+                      ]
+                    },
+                    {
+                      "name": "right",
+                      "types": [
+                        {
+                          "type": "Number"
+                        }
+                      ]
+                    },
                     {
                       "name": "top",
                       "types": [
@@ -124251,49 +124562,6 @@
             }
           ]
         },
-        {
-          "name": "legendMargin",
-          "optionName": "margin",
-          "owners": [
-            "legend",
-            "DxPieChart",
-            "pieChartTitle"
-          ],
-          "props": [
-            {
-              "name": "bottom",
-              "types": [
-                {
-                  "type": "Number"
-                }
-              ]
-            },
-            {
-              "name": "left",
-              "types": [
-                {
-                  "type": "Number"
-                }
-              ]
-            },
-            {
-              "name": "right",
-              "types": [
-                {
-                  "type": "Number"
-                }
-              ]
-            },
-            {
-              "name": "top",
-              "types": [
-                {
-                  "type": "Number"
-                }
-              ]
-            }
-          ]
-        },
         {
           "name": "legendTitle",
           "optionName": "title",
@@ -124305,10 +124573,6 @@
               "componentName": "font",
               "optionName": "font"
             },
-            {
-              "componentName": "legendTitleMargin",
-              "optionName": "margin"
-            },
             {
               "componentName": "legendTitleSubtitle",
               "optionName": "subtitle"
@@ -124332,6 +124596,19 @@
                 }
               ]
             },
+            {
+              "name": "horizontalAlignment",
+              "types": [
+                {
+                  "type": "String",
+                  "acceptableValues": [
+                    "\"center\"",
+                    "\"left\"",
+                    "\"right\""
+                  ]
+                }
+              ]
+            },
             {
               "name": "margin",
               "types": [
@@ -124348,6 +124625,22 @@
                     }
                   ]
                 },
+                {
+                  "name": "left",
+                  "types": [
+                    {
+                      "type": "Number"
+                    }
+                  ]
+                },
+                {
+                  "name": "right",
+                  "types": [
+                    {
+                      "type": "Number"
+                    }
+                  ]
+                },
                 {
                   "name": "top",
                   "types": [
@@ -124426,31 +124719,6 @@
             }
           ]
         },
-        {
-          "name": "legendTitleMargin",
-          "optionName": "margin",
-          "owners": [
-            "legendTitle"
-          ],
-          "props": [
-            {
-              "name": "bottom",
-              "types": [
-                {
-                  "type": "Number"
-                }
-              ]
-            },
-            {
-              "name": "top",
-              "types": [
-                {
-                  "type": "Number"
-                }
-              ]
-            }
-          ]
-        },
         {
           "name": "legendTitleSubtitle",
           "optionName": "subtitle",
@@ -124553,9 +124821,9 @@
           "optionName": "margin",
           "owners": [
             "legend",
+            "legendTitle",
             "DxPieChart",
-            "pieChartTitle",
-            "legendTitle"
+            "pieChartTitle"
           ],
           "props": [
             {
@@ -124603,10 +124871,6 @@
               "componentName": "font",
               "optionName": "font"
             },
-            {
-              "componentName": "legendMargin",
-              "optionName": "margin"
-            },
             {
               "componentName": "margin",
               "optionName": "margin"
@@ -125930,6 +126194,19 @@
                 }
               ]
             },
+            {
+              "name": "horizontalAlignment",
+              "types": [
+                {
+                  "type": "String",
+                  "acceptableValues": [
+                    "\"center\"",
+                    "\"left\"",
+                    "\"right\""
+                  ]
+                }
+              ]
+            },
             {
               "name": "margin",
               "types": [
@@ -125946,6 +126223,22 @@
                     }
                   ]
                 },
+                {
+                  "name": "left",
+                  "types": [
+                    {
+                      "type": "Number"
+                    }
+                  ]
+                },
+                {
+                  "name": "right",
+                  "types": [
+                    {
+                      "type": "Number"
+                    }
+                  ]
+                },
                 {
                   "name": "top",
                   "types": [
@@ -126022,19 +126315,6 @@
                 }
               ]
             },
-            {
-              "name": "horizontalAlignment",
-              "types": [
-                {
-                  "type": "String",
-                  "acceptableValues": [
-                    "\"center\"",
-                    "\"left\"",
-                    "\"right\""
-                  ]
-                }
-              ]
-            },
             {
               "name": "textOverflow",
               "types": [
@@ -126188,6 +126468,14 @@
                 }
               ]
             },
+            {
+              "name": "cornerRadius",
+              "types": [
+                {
+                  "type": "Number"
+                }
+              ]
+            },
             {
               "name": "customizeTooltip",
               "types": [
@@ -126396,10 +126684,6 @@
           "componentName": "legend",
           "optionName": "legend"
         },
-        {
-          "componentName": "legendMargin",
-          "optionName": "margin"
-        },
         {
           "componentName": "loadingIndicator",
           "optionName": "loadingIndicator"
@@ -133331,6 +133615,19 @@
                     }
                   ]
                 },
+                {
+                  "name": "horizontalAlignment",
+                  "types": [
+                    {
+                      "type": "String",
+                      "acceptableValues": [
+                        "\"center\"",
+                        "\"left\"",
+                        "\"right\""
+                      ]
+                    }
+                  ]
+                },
                 {
                   "name": "margin",
                   "types": [
@@ -133347,6 +133644,22 @@
                         }
                       ]
                     },
+                    {
+                      "name": "left",
+                      "types": [
+                        {
+                          "type": "Number"
+                        }
+                      ]
+                    },
+                    {
+                      "name": "right",
+                      "types": [
+                        {
+                          "type": "Number"
+                        }
+                      ]
+                    },
                     {
                       "name": "top",
                       "types": [
@@ -135243,6 +135556,14 @@
                 }
               ]
             },
+            {
+              "name": "cornerRadius",
+              "types": [
+                {
+                  "type": "Number"
+                }
+              ]
+            },
             {
               "name": "customizeTooltip",
               "types": [
@@ -141420,10 +141741,6 @@
               "componentName": "legendBorder",
               "optionName": "border"
             },
-            {
-              "componentName": "legendMargin",
-              "optionName": "margin"
-            },
             {
               "componentName": "legendTitle",
               "optionName": "title"
@@ -141832,6 +142149,19 @@
                     }
                   ]
                 },
+                {
+                  "name": "horizontalAlignment",
+                  "types": [
+                    {
+                      "type": "String",
+                      "acceptableValues": [
+                        "\"center\"",
+                        "\"left\"",
+                        "\"right\""
+                      ]
+                    }
+                  ]
+                },
                 {
                   "name": "margin",
                   "types": [
@@ -141848,6 +142178,22 @@
                         }
                       ]
                     },
+                    {
+                      "name": "left",
+                      "types": [
+                        {
+                          "type": "Number"
+                        }
+                      ]
+                    },
+                    {
+                      "name": "right",
+                      "types": [
+                        {
+                          "type": "Number"
+                        }
+                      ]
+                    },
                     {
                       "name": "top",
                       "types": [
@@ -142011,49 +142357,6 @@
             }
           ]
         },
-        {
-          "name": "legendMargin",
-          "optionName": "margin",
-          "owners": [
-            "legend",
-            "DxPolarChart",
-            "polarChartTitle"
-          ],
-          "props": [
-            {
-              "name": "bottom",
-              "types": [
-                {
-                  "type": "Number"
-                }
-              ]
-            },
-            {
-              "name": "left",
-              "types": [
-                {
-                  "type": "Number"
-                }
-              ]
-            },
-            {
-              "name": "right",
-              "types": [
-                {
-                  "type": "Number"
-                }
-              ]
-            },
-            {
-              "name": "top",
-              "types": [
-                {
-                  "type": "Number"
-                }
-              ]
-            }
-          ]
-        },
         {
           "name": "legendTitle",
           "optionName": "title",
@@ -142065,10 +142368,6 @@
               "componentName": "font",
               "optionName": "font"
             },
-            {
-              "componentName": "legendTitleMargin",
-              "optionName": "margin"
-            },
             {
               "componentName": "legendTitleSubtitle",
               "optionName": "subtitle"
@@ -142092,6 +142391,19 @@
                 }
               ]
             },
+            {
+              "name": "horizontalAlignment",
+              "types": [
+                {
+                  "type": "String",
+                  "acceptableValues": [
+                    "\"center\"",
+                    "\"left\"",
+                    "\"right\""
+                  ]
+                }
+              ]
+            },
             {
               "name": "margin",
               "types": [
@@ -142108,6 +142420,22 @@
                     }
                   ]
                 },
+                {
+                  "name": "left",
+                  "types": [
+                    {
+                      "type": "Number"
+                    }
+                  ]
+                },
+                {
+                  "name": "right",
+                  "types": [
+                    {
+                      "type": "Number"
+                    }
+                  ]
+                },
                 {
                   "name": "top",
                   "types": [
@@ -142186,31 +142514,6 @@
             }
           ]
         },
-        {
-          "name": "legendTitleMargin",
-          "optionName": "margin",
-          "owners": [
-            "legendTitle"
-          ],
-          "props": [
-            {
-              "name": "bottom",
-              "types": [
-                {
-                  "type": "Number"
-                }
-              ]
-            },
-            {
-              "name": "top",
-              "types": [
-                {
-                  "type": "Number"
-                }
-              ]
-            }
-          ]
-        },
         {
           "name": "legendTitleSubtitle",
           "optionName": "subtitle",
@@ -142313,9 +142616,9 @@
           "optionName": "margin",
           "owners": [
             "legend",
+            "legendTitle",
             "DxPolarChart",
-            "polarChartTitle",
-            "legendTitle"
+            "polarChartTitle"
           ],
           "props": [
             {
@@ -143014,10 +143317,6 @@
               "componentName": "font",
               "optionName": "font"
             },
-            {
-              "componentName": "legendMargin",
-              "optionName": "margin"
-            },
             {
               "componentName": "margin",
               "optionName": "margin"
@@ -145034,6 +145333,19 @@
                 }
               ]
             },
+            {
+              "name": "horizontalAlignment",
+              "types": [
+                {
+                  "type": "String",
+                  "acceptableValues": [
+                    "\"center\"",
+                    "\"left\"",
+                    "\"right\""
+                  ]
+                }
+              ]
+            },
             {
               "name": "margin",
               "types": [
@@ -145050,6 +145362,22 @@
                     }
                   ]
                 },
+                {
+                  "name": "left",
+                  "types": [
+                    {
+                      "type": "Number"
+                    }
+                  ]
+                },
+                {
+                  "name": "right",
+                  "types": [
+                    {
+                      "type": "Number"
+                    }
+                  ]
+                },
                 {
                   "name": "top",
                   "types": [
@@ -145126,19 +145454,6 @@
                 }
               ]
             },
-            {
-              "name": "horizontalAlignment",
-              "types": [
-                {
-                  "type": "String",
-                  "acceptableValues": [
-                    "\"center\"",
-                    "\"left\"",
-                    "\"right\""
-                  ]
-                }
-              ]
-            },
             {
               "name": "textOverflow",
               "types": [
@@ -145292,6 +145607,14 @@
                 }
               ]
             },
+            {
+              "name": "cornerRadius",
+              "types": [
+                {
+                  "type": "Number"
+                }
+              ]
+            },
             {
               "name": "customizeTooltip",
               "types": [
@@ -146640,10 +146963,6 @@
           "componentName": "legend",
           "optionName": "legend"
         },
-        {
-          "componentName": "legendMargin",
-          "optionName": "margin"
-        },
         {
           "componentName": "loadingIndicator",
           "optionName": "loadingIndicator"
@@ -168968,6 +169287,14 @@
                 }
               ]
             },
+            {
+              "name": "cornerRadius",
+              "types": [
+                {
+                  "type": "Number"
+                }
+              ]
+            },
             {
               "name": "customizeLinkTooltip",
               "types": [
@@ -170844,6 +171171,14 @@
                 }
               ]
             },
+            {
+              "name": "cornerRadius",
+              "types": [
+                {
+                  "type": "Number"
+                }
+              ]
+            },
             {
               "name": "customizeLinkTooltip",
               "types": [
@@ -181340,6 +181675,14 @@
                 }
               ]
             },
+            {
+              "name": "cornerRadius",
+              "types": [
+                {
+                  "type": "Number"
+                }
+              ]
+            },
             {
               "name": "customizeTooltip",
               "types": [
@@ -181953,6 +182296,14 @@
                 }
               ]
             },
+            {
+              "name": "cornerRadius",
+              "types": [
+                {
+                  "type": "Number"
+                }
+              ]
+            },
             {
               "name": "customizeTooltip",
               "types": [
@@ -206175,6 +206526,14 @@
                 }
               ]
             },
+            {
+              "name": "name",
+              "types": [
+                {
+                  "type": "String"
+                }
+              ]
+            },
             {
               "name": "trueText",
               "types": [
@@ -210272,6 +210631,14 @@
                                   "type": "String"
                                 }
                               ]
+                            },
+                            {
+                              "name": "name",
+                              "types": [
+                                {
+                                  "type": "String"
+                                }
+                              ]
                             }
                           ]
                         }
@@ -214565,6 +214932,14 @@
                                   "type": "String"
                                 }
                               ]
+                            },
+                            {
+                              "name": "name",
+                              "types": [
+                                {
+                                  "type": "String"
+                                }
+                              ]
                             }
                           ]
                         }
@@ -219867,6 +220242,14 @@
                 }
               ]
             },
+            {
+              "name": "cornerRadius",
+              "types": [
+                {
+                  "type": "Number"
+                }
+              ]
+            },
             {
               "name": "customizeTooltip",
               "types": [
@@ -221662,6 +222045,14 @@
                 }
               ]
             },
+            {
+              "name": "cornerRadius",
+              "types": [
+                {
+                  "type": "Number"
+                }
+              ]
+            },
             {
               "name": "customizeTooltip",
               "types": [
@@ -228754,6 +229145,19 @@
                     }
                   ]
                 },
+                {
+                  "name": "horizontalAlignment",
+                  "types": [
+                    {
+                      "type": "String",
+                      "acceptableValues": [
+                        "\"center\"",
+                        "\"left\"",
+                        "\"right\""
+                      ]
+                    }
+                  ]
+                },
                 {
                   "name": "margin",
                   "types": [
@@ -228770,6 +229174,22 @@
                         }
                       ]
                     },
+                    {
+                      "name": "left",
+                      "types": [
+                        {
+                          "type": "Number"
+                        }
+                      ]
+                    },
+                    {
+                      "name": "right",
+                      "types": [
+                        {
+                          "type": "Number"
+                        }
+                      ]
+                    },
                     {
                       "name": "top",
                       "types": [
@@ -230153,6 +230573,14 @@
                 }
               ]
             },
+            {
+              "name": "cornerRadius",
+              "types": [
+                {
+                  "type": "Number"
+                }
+              ]
+            },
             {
               "name": "customizeTooltip",
               "types": [
@@ -231125,10 +231553,6 @@
               "componentName": "legendBorder",
               "optionName": "border"
             },
-            {
-              "componentName": "legendMargin",
-              "optionName": "margin"
-            },
             {
               "componentName": "legendTitle",
               "optionName": "title"
@@ -231606,6 +232030,19 @@
                     }
                   ]
                 },
+                {
+                  "name": "horizontalAlignment",
+                  "types": [
+                    {
+                      "type": "String",
+                      "acceptableValues": [
+                        "\"center\"",
+                        "\"left\"",
+                        "\"right\""
+                      ]
+                    }
+                  ]
+                },
                 {
                   "name": "margin",
                   "types": [
@@ -231622,6 +232059,22 @@
                         }
                       ]
                     },
+                    {
+                      "name": "left",
+                      "types": [
+                        {
+                          "type": "Number"
+                        }
+                      ]
+                    },
+                    {
+                      "name": "right",
+                      "types": [
+                        {
+                          "type": "Number"
+                        }
+                      ]
+                    },
                     {
                       "name": "top",
                       "types": [
@@ -231786,48 +232239,6 @@
             }
           ]
         },
-        {
-          "name": "legendMargin",
-          "optionName": "margin",
-          "owners": [
-            "legend",
-            "vectorMapTitle"
-          ],
-          "props": [
-            {
-              "name": "bottom",
-              "types": [
-                {
-                  "type": "Number"
-                }
-              ]
-            },
-            {
-              "name": "left",
-              "types": [
-                {
-                  "type": "Number"
-                }
-              ]
-            },
-            {
-              "name": "right",
-              "types": [
-                {
-                  "type": "Number"
-                }
-              ]
-            },
-            {
-              "name": "top",
-              "types": [
-                {
-                  "type": "Number"
-                }
-              ]
-            }
-          ]
-        },
         {
           "name": "legendTitle",
           "optionName": "title",
@@ -231839,10 +232250,6 @@
               "componentName": "font",
               "optionName": "font"
             },
-            {
-              "componentName": "legendTitleMargin",
-              "optionName": "margin"
-            },
             {
               "componentName": "legendTitleSubtitle",
               "optionName": "subtitle"
@@ -231866,6 +232273,19 @@
                 }
               ]
             },
+            {
+              "name": "horizontalAlignment",
+              "types": [
+                {
+                  "type": "String",
+                  "acceptableValues": [
+                    "\"center\"",
+                    "\"left\"",
+                    "\"right\""
+                  ]
+                }
+              ]
+            },
             {
               "name": "margin",
               "types": [
@@ -231882,6 +232302,22 @@
                     }
                   ]
                 },
+                {
+                  "name": "left",
+                  "types": [
+                    {
+                      "type": "Number"
+                    }
+                  ]
+                },
+                {
+                  "name": "right",
+                  "types": [
+                    {
+                      "type": "Number"
+                    }
+                  ]
+                },
                 {
                   "name": "top",
                   "types": [
@@ -231960,31 +232396,6 @@
             }
           ]
         },
-        {
-          "name": "legendTitleMargin",
-          "optionName": "margin",
-          "owners": [
-            "legendTitle"
-          ],
-          "props": [
-            {
-              "name": "bottom",
-              "types": [
-                {
-                  "type": "Number"
-                }
-              ]
-            },
-            {
-              "name": "top",
-              "types": [
-                {
-                  "type": "Number"
-                }
-              ]
-            }
-          ]
-        },
         {
           "name": "legendTitleSubtitle",
           "optionName": "subtitle",
@@ -232087,8 +232498,8 @@
           "optionName": "margin",
           "owners": [
             "legend",
-            "vectorMapTitle",
-            "legendTitle"
+            "legendTitle",
+            "vectorMapTitle"
           ],
           "props": [
             {
@@ -232302,6 +232713,19 @@
                 }
               ]
             },
+            {
+              "name": "horizontalAlignment",
+              "types": [
+                {
+                  "type": "String",
+                  "acceptableValues": [
+                    "\"center\"",
+                    "\"left\"",
+                    "\"right\""
+                  ]
+                }
+              ]
+            },
             {
               "name": "margin",
               "types": [
@@ -232318,6 +232742,22 @@
                     }
                   ]
                 },
+                {
+                  "name": "left",
+                  "types": [
+                    {
+                      "type": "Number"
+                    }
+                  ]
+                },
+                {
+                  "name": "right",
+                  "types": [
+                    {
+                      "type": "Number"
+                    }
+                  ]
+                },
                 {
                   "name": "top",
                   "types": [
@@ -232394,19 +232834,6 @@
                 }
               ]
             },
-            {
-              "name": "horizontalAlignment",
-              "types": [
-                {
-                  "type": "String",
-                  "acceptableValues": [
-                    "\"center\"",
-                    "\"left\"",
-                    "\"right\""
-                  ]
-                }
-              ]
-            },
             {
               "name": "textOverflow",
               "types": [
@@ -232547,6 +232974,14 @@
                 }
               ]
             },
+            {
+              "name": "cornerRadius",
+              "types": [
+                {
+                  "type": "Number"
+                }
+              ]
+            },
             {
               "name": "customizeTooltip",
               "types": [
@@ -232745,10 +233180,6 @@
               "componentName": "font",
               "optionName": "font"
             },
-            {
-              "componentName": "legendMargin",
-              "optionName": "margin"
-            },
             {
               "componentName": "margin",
               "optionName": "margin"
@@ -243593,6 +244024,14 @@
     {
       "name": "dxChartAnnotationConfig",
       "props": [
+        {
+          "name": "allowDragging",
+          "types": [
+            {
+              "type": "Boolean"
+            }
+          ]
+        },
         {
           "name": "argument",
           "types": [
@@ -243798,6 +244237,22 @@
             }
           ]
         },
+        {
+          "name": "offsetX",
+          "types": [
+            {
+              "type": "Number"
+            }
+          ]
+        },
+        {
+          "name": "offsetY",
+          "types": [
+            {
+              "type": "Number"
+            }
+          ]
+        },
         {
           "name": "opacity",
           "types": [
@@ -243982,6 +244437,14 @@
     {
       "name": "dxChartCommonAnnotationConfig",
       "props": [
+        {
+          "name": "allowDragging",
+          "types": [
+            {
+              "type": "Boolean"
+            }
+          ]
+        },
         {
           "name": "argument",
           "types": [
@@ -244179,6 +244642,22 @@
             }
           ]
         },
+        {
+          "name": "offsetX",
+          "types": [
+            {
+              "type": "Number"
+            }
+          ]
+        },
+        {
+          "name": "offsetY",
+          "types": [
+            {
+              "type": "Number"
+            }
+          ]
+        },
         {
           "name": "opacity",
           "types": [
@@ -246554,6 +247033,83 @@
         }
       ]
     },
+    {
+      "name": "dxDropDownButtonItem",
+      "props": [
+        {
+          "name": "badge",
+          "types": [
+            {
+              "type": "String"
+            }
+          ]
+        },
+        {
+          "name": "disabled",
+          "types": [
+            {
+              "type": "Boolean"
+            }
+          ]
+        },
+        {
+          "name": "html",
+          "types": [
+            {
+              "type": "String"
+            }
+          ]
+        },
+        {
+          "name": "icon",
+          "types": [
+            {
+              "type": "String"
+            }
+          ]
+        },
+        {
+          "name": "template",
+          "types": [
+            {
+              "type": "Function",
+              "params": [],
+              "returnValueType": {
+                "type": "String"
+              }
+            },
+            {
+              "type": "template",
+              "isCustomType": true
+            }
+          ]
+        },
+        {
+          "name": "text",
+          "types": [
+            {
+              "type": "String"
+            }
+          ]
+        },
+        {
+          "name": "visible",
+          "types": [
+            {
+              "type": "Boolean"
+            }
+          ]
+        }
+      ],
+      "types": [
+        {
+          "type": "Object"
+        }
+      ],
+      "templates": [
+        "template"
+      ]
+    },
     {
       "name": "dxElement",
       "types": [
@@ -248147,6 +248703,14 @@
             }
           ]
         },
+        {
+          "name": "name",
+          "types": [
+            {
+              "type": "String"
+            }
+          ]
+        },
         {
           "name": "trueText",
           "types": [
@@ -249476,6 +250040,14 @@
                               "type": "String"
                             }
                           ]
+                        },
+                        {
+                          "name": "name",
+                          "types": [
+                            {
+                              "type": "String"
+                            }
+                          ]
                         }
                       ]
                     }


Test patch:
diff --git a/src/core/__tests__/extension-component.test.tsx b/src/core/__tests__/extension-component.test.tsx
index 93b28fd..a2b9764 100644
--- a/src/core/__tests__/extension-component.test.tsx
+++ b/src/core/__tests__/extension-component.test.tsx
@@ -21,14 +21,25 @@ class NestedComponent extends ConfigurationComponent<{ a: number }> {
 
 // tslint:enable:max-classes-per-file
 
-it("does not create widget on componentDidMount", () => {
-    shallow(
-        <TestExtensionComponent />
+it("is initialized as a plugin-component", () => {
+    const onMounted = jest.fn();
+    mount(
+        <TestExtensionComponent onMounted={onMounted} />
     );
 
+    expect(onMounted).toHaveBeenCalledTimes(1);
+    expect(onMounted.mock.calls[0][0]).toBeInstanceOf(Function);
     expect(ExtensionWidgetClass).toHaveBeenCalledTimes(0);
 });
 
+it("is initialized as a standalone widget", () => {
+    mount(
+        <TestExtensionComponent/>
+    );
+
+    expect(ExtensionWidgetClass).toHaveBeenCalledTimes(1);
+});
+
 it("creates widget on componentDidMount inside another component on same element", () => {
     mount(
         <TestComponent>
diff --git a/src/core/__tests__/template.test.tsx b/src/core/__tests__/template.test.tsx
index 1f85f87..df17f47 100644
--- a/src/core/__tests__/template.test.tsx
+++ b/src/core/__tests__/template.test.tsx
@@ -651,6 +651,25 @@ describe("component/render in nested options", () => {
         expect(component.find(".template").html()).toBe('<div class="template">Second Template</div>');
     });
 
+    // T748280
+    it("renders updates in deeply nested templates", () => {
+        const getTemplate = (arg: string) => () => <div className="template">{arg}</div>;
+        const TestContainer = (props: any) => (
+            <TestComponent>
+                <CollectionNestedComponent>
+                    <NestedComponent itemComponent={getTemplate(props.value)}/>
+                </CollectionNestedComponent>
+            </TestComponent>
+        );
+        const component = mount(<TestContainer value="test" />);
+        component.setProps({value: "test2"});
+        jest.runAllTimers();
+
+        renderTemplate("collection[0].option.item");
+        component.update();
+        expect(component.find(".template").html()).toBe('<div class="template">test2</div>');
+    });
+
     it("adds nested components dynamically", () => {
         const renderItem = () => <div>Template</div>;
         const items = [{id: 1, render: renderItem}];