v20.1.55 is released

Author: pipeline

components/base/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 ## [Unreleased]
 
+## 20.1.55 (2022-05-12)
+
+### Common
+
+#### New Features
+
+- `#I376880`, `#I376902`, `#F174796` - Added support to work with React 18 version.
+
+#### Breaking Changes
+
+- `IsLegacyTemplate` option has been stopped from this release to support React 18 support.
+
+### Common
+
+#### Bug Fixes
+
+- `I339589` - Resolved the `DropdownButton` issue with react component as target.
+
 ## 19.1.67 (2021-06-08)
 
 ### Common

components/base/package.json

@@ -23,10 +23,6 @@
 	"main": "./dist/ej2-react-base.umd.min.js",
 	"module": "./index.js",
 	"readme": "ReadMe.md",
-	"peerDependencies": {
-		"react": "15.5.4 - 16.13.1",
-		"react-dom": "15.5.4 - 16.13.1"
-	},
 	"dependencies": {
 		"@syncfusion/ej2-base": "*"
 	},

components/base/src/component-base.ts

@@ -2,6 +2,7 @@
  * React Component Base
  */
  import * as React from 'react';
+ import * as ReactDOM from 'react-dom';
  import { extend, isNullOrUndefined, setValue, getValue, isObject } from '@syncfusion/ej2-base';
  /**
   * Interface for processing directives
@@ -47,6 +48,7 @@
      public static reactUid: number = 1;
      private setProperties: Function;
      private element: any;
+     private mountingState:any = false;
      private appendTo: Function;
      private destroy: Function;
      private getModuleName: () => string;
@@ -68,6 +70,7 @@
      private isshouldComponentUpdateCalled: boolean = false;
      private modelObserver: any;
      private isDestroyed: boolean;
+     private isCreated: boolean = false;
      private isProtectedOnChange: boolean;
      private canDelayUpdate: boolean;
      private reactElement: HTMLElement;
@@ -88,7 +91,9 @@
          // tslint:disable-next-line:no-any
          this.renderReactComponent();
          if (this.portals && this.portals.length) {
+             this.mountingState = true;
              this.renderReactTemplates();
+             this.mountingState = false;
          }
      }
 
@@ -103,7 +108,7 @@
 
      private renderReactComponent(): void {
          let ele: Element = this.reactElement;
-         if (ele) {
+         if (ele && !this.isAppendCalled) {
              this.isAppendCalled = true;
              this.appendTo(ele);
          }
@@ -280,6 +285,7 @@
              this.isProtectedOnChange = false;
              if(eventName === 'created') {
                  setTimeout(()=>{
+                     this.isCreated = true;
                      if(!this.isDestroyed) {
                          this.modelObserver.notify(eventName, eventProp, successHandler);    
                      }
@@ -450,20 +456,37 @@
          clearTimeout(this.cachedTimeOut);
          var modulesName = ['dropdowntree', 'checkbox'];
          // tslint:disable-next-line:no-any
-         if (this.initRenderCalled && this.isAppendCalled && this.element && (!modulesName.indexOf(this.getModuleName())) ? document.body.contains(this.element) : true && !this.isDestroyed) {
+         if (this.initRenderCalled && this.isAppendCalled && this.element && ((!modulesName.indexOf(this.getModuleName())) ? document.body.contains(this.element) : true) && !this.isDestroyed && this.isCreated) {
              this.destroy();
          }
 
      }
- // tslint:disable:no-any 
+
+    // tslint:disable:no-any
+    public appendReactElement (element: any, container: HTMLElement) {
+        let portal: any = (ReactDOM as any).createPortal(element, container);
+        if (!this.portals) {
+            this.portals = [portal];
+        }
+        else {
+            this.portals.push(portal);
+        }
+    };
+    // tslint:disable:no-any 
+    public intForceUpdate (callback?: any): void {
+        let flush: any = getValue('flushSync',ReactDOM);
+        if (this.initRenderCalled && flush && !this.mountingState) {
+            flush(() => {
+                this.forceUpdate(callback);
+            });    
+        }  else {
+            this.forceUpdate(callback);
+        }
+    }
+ 
      public renderReactTemplates (callback?: any): void {
          this.isReactForeceUpdate = true;
-         if(callback){
-             this.forceUpdate(callback);
-         } else {
-             this.forceUpdate();    
-         }
-         
+         this.intForceUpdate(callback);
          this.isReactForeceUpdate = false;
      };
  // tslint:disable:no-any 

components/base/src/template.ts

@@ -24,20 +24,13 @@
              } else {
                  cEle = document.createElement('div');
              }
-             if (component && component.isLegacyTemplate) {
-                 ReactDOM.render((actTemplate as Function)(actData), cEle);
-                 if (!element) {
-                    detach(cEle);
-                 }
+             let rele: any = React.createElement(actTemplate, actData);
+             let portal: any = (ReactDOM as any).createPortal(rele, cEle);
+             portal.propName = prop;
+             if (!component.portals) {
+                 component.portals = [portal];
              } else {
-                 let rele: any = React.createElement(actTemplate, actData);
-                 let portal: any = (ReactDOM as any).createPortal(rele, cEle);
-                 portal.propName = prop;
-                 if (!component.portals) {
-                     component.portals = [portal];
-                 } else {
-                     component.portals.push(portal);
-                 }
+                 component.portals.push(portal);
              }
 
              if (!element) {

components/buttons/CHANGELOG.md

@@ -4,7 +4,11 @@
 
 ## 20.1.50 (2022-04-19)
 
-### Radio Button
+### Checkbox
+
+#### Bug Fixes
+
+- `F373307` - Issue with Accessibility in checkbox and switch has been resolved.
 
 #### Bug Fixes
 

components/buttons/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-react-buttons",
-	"version": "20.1.50",
+	"version": "20.1.52",
 	"description": "A package of feature-rich Essential JS 2 components such as Button, CheckBox, RadioButton and Switch. for React",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

components/buttons/src/chips/chips-directive.tsx

@@ -14,7 +14,7 @@ export interface ChipDirTypecast {
  * </ChipListComponent>
  * ```
  */
-export class ChipDirective extends ComplexBase<ChipModel| ChipDirTypecast, ChipModel| ChipDirTypecast> {
+export class ChipDirective extends ComplexBase<ChipModel| ChipDirTypecast & { children?: React.ReactNode }, ChipModel| ChipDirTypecast> {
     public static moduleName: string = 'chip';
 }
 

components/calendars/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-react-calendars",
-	"version": "20.1.47",
+	"version": "20.1.52",
 	"description": "A complete package of date or time components with built-in features such as date formatting, inline editing, multiple (range) selection, range restriction, month and year selection, strict mode, and globalization. for React",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

components/charts/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## [Unreleased]
 
+## 20.1.55 (2022-05-12)
+
+### Chart
+
+#### New Features
+
+- `#I360879` - Provided support to disable the marker explode without tooltip and highlight mode.
+
 ## 20.1.52 (2022-05-04)
 
 ### Chart

components/charts/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-react-charts",
-	"version": "20.1.51",
+	"version": "20.1.52",
 	"description": "Feature-rich chart control with built-in support for over 25 chart types, technical indictors, trendline, zooming, tooltip, selection, crosshair and trackball. for React",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

components/charts/src/accumulation-chart/annotations-directive.tsx

@@ -15,7 +15,7 @@ export interface AccumulationAnnotationSettingsDirTypecast {
  * </AccumulationChartComponent>
  * ```
  */
-export class AccumulationAnnotationDirective extends ComplexBase<AccumulationAnnotationSettingsModel| AccumulationAnnotationSettingsDirTypecast, AccumulationAnnotationSettingsModel| AccumulationAnnotationSettingsDirTypecast> {
+export class AccumulationAnnotationDirective extends ComplexBase<AccumulationAnnotationSettingsModel| AccumulationAnnotationSettingsDirTypecast & { children?: React.ReactNode }, AccumulationAnnotationSettingsModel| AccumulationAnnotationSettingsDirTypecast> {
     public static moduleName: string = 'accumulationAnnotation';
 }
 

components/charts/src/accumulation-chart/series-directive.tsx

@@ -15,7 +15,7 @@ export interface AccumulationSeriesDirTypecast {
  * </AccumulationChartComponent>
  * ```
  */
-export class AccumulationSeriesDirective extends ComplexBase<AccumulationSeriesModel| AccumulationSeriesDirTypecast, AccumulationSeriesModel| AccumulationSeriesDirTypecast> {
+export class AccumulationSeriesDirective extends ComplexBase<AccumulationSeriesModel| AccumulationSeriesDirTypecast & { children?: React.ReactNode }, AccumulationSeriesModel| AccumulationSeriesDirTypecast> {
     public static moduleName: string = 'accumulationSeries';
     public static complexTemplate: Object = {'dataLabelTemplate': 'dataLabel.template'};
 }

components/charts/src/bullet-chart/ranges-directive.tsx

@@ -12,7 +12,7 @@ import { RangeModel } from '@syncfusion/ej2-charts';
  * </BulletChartComponent>
  * ```
  */
-export class BulletRangeDirective extends ComplexBase<RangeModel, RangeModel> {
+export class BulletRangeDirective extends ComplexBase<RangeModel & { children?: React.ReactNode }, RangeModel> {
     public static moduleName: string = 'bulletRange';
 }
 

components/charts/src/chart/annotations-directive.tsx

@@ -15,7 +15,7 @@ export interface ChartAnnotationSettingsDirTypecast {
  * </ChartComponent>
  * ```
  */
-export class AnnotationDirective extends ComplexBase<ChartAnnotationSettingsModel| ChartAnnotationSettingsDirTypecast, ChartAnnotationSettingsModel| ChartAnnotationSettingsDirTypecast> {
+export class AnnotationDirective extends ComplexBase<ChartAnnotationSettingsModel| ChartAnnotationSettingsDirTypecast & { children?: React.ReactNode }, ChartAnnotationSettingsModel| ChartAnnotationSettingsDirTypecast> {
     public static moduleName: string = 'annotation';
 }
 

components/charts/src/chart/axes-directive.tsx

@@ -13,7 +13,7 @@ import { AxisModel } from '@syncfusion/ej2-charts';
  * </ChartComponent>
  * ```
  */
-export class AxisDirective extends ComplexBase<AxisModel, AxisModel> {
+export class AxisDirective extends ComplexBase<AxisModel & { children?: React.ReactNode }, AxisModel> {
     public static moduleName: string = 'axis';
 }
 

components/charts/src/chart/categories-directive.tsx

@@ -22,7 +22,7 @@ import { MultiLevelCategoriesModel } from '@syncfusion/ej2-charts';
  * </ChartComponent>
  * ```
  */
-export class CategoryDirective extends ComplexBase<MultiLevelCategoriesModel, MultiLevelCategoriesModel> {
+export class CategoryDirective extends ComplexBase<MultiLevelCategoriesModel & { children?: React.ReactNode }, MultiLevelCategoriesModel> {
     public static moduleName: string = 'category';
 }
 

components/charts/src/chart/columns-directive.tsx

@@ -13,7 +13,7 @@ import { ColumnModel } from '@syncfusion/ej2-charts';
  * </ChartComponent>
  * ```
  */
-export class ColumnDirective extends ComplexBase<ColumnModel, ColumnModel> {
+export class ColumnDirective extends ComplexBase<ColumnModel & { children?: React.ReactNode }, ColumnModel> {
     public static moduleName: string = 'column';
 }
 

components/charts/src/chart/indicators-directive.tsx

@@ -13,7 +13,7 @@ import { TechnicalIndicatorModel } from '@syncfusion/ej2-charts';
  * </ChartComponent>
  * ```
  */
-export class IndicatorDirective extends ComplexBase<TechnicalIndicatorModel, TechnicalIndicatorModel> {
+export class IndicatorDirective extends ComplexBase<TechnicalIndicatorModel & { children?: React.ReactNode }, TechnicalIndicatorModel> {
     public static moduleName: string = 'indicator';
 }
 

components/charts/src/chart/multilevellabels-directive.tsx

@@ -17,7 +17,7 @@ import { MultiLevelLabelsModel } from '@syncfusion/ej2-charts';
  * </ChartComponent>
  * ```
  */
-export class MultiLevelLabelDirective extends ComplexBase<MultiLevelLabelsModel, MultiLevelLabelsModel> {
+export class MultiLevelLabelDirective extends ComplexBase<MultiLevelLabelsModel & { children?: React.ReactNode }, MultiLevelLabelsModel> {
     public static moduleName: string = 'multiLevelLabel';
 }
 

components/charts/src/chart/rangecolorsettings-directive.tsx

@@ -13,7 +13,7 @@ import { RangeColorSettingModel } from '@syncfusion/ej2-charts';
  * </ChartComponent>
  * ```
  */
-export class RangeColorSettingDirective extends ComplexBase<RangeColorSettingModel, RangeColorSettingModel> {
+export class RangeColorSettingDirective extends ComplexBase<RangeColorSettingModel & { children?: React.ReactNode }, RangeColorSettingModel> {
     public static moduleName: string = 'rangeColorSetting';
 }
 

components/charts/src/chart/rows-directive.tsx

@@ -13,7 +13,7 @@ import { RowModel } from '@syncfusion/ej2-charts';
  * </ChartComponent>
  * ```
  */
-export class RowDirective extends ComplexBase<RowModel, RowModel> {
+export class RowDirective extends ComplexBase<RowModel & { children?: React.ReactNode }, RowModel> {
     public static moduleName: string = 'row';
 }
 

components/charts/src/chart/segments-directive.tsx

@@ -17,7 +17,7 @@ import { ChartSegmentModel } from '@syncfusion/ej2-charts';
  * </ChartComponent>
  * ```
  */
-export class SegmentDirective extends ComplexBase<ChartSegmentModel, ChartSegmentModel> {
+export class SegmentDirective extends ComplexBase<ChartSegmentModel & { children?: React.ReactNode }, ChartSegmentModel> {
     public static moduleName: string = 'segment';
 }
 

components/charts/src/chart/selecteddataindexes-directive.tsx

@@ -13,7 +13,7 @@ import { IndexesModel } from '@syncfusion/ej2-charts';
  * </ChartComponent>
  * ```
  */
-export class SelectedDataIndexDirective extends ComplexBase<IndexesModel, IndexesModel> {
+export class SelectedDataIndexDirective extends ComplexBase<IndexesModel & { children?: React.ReactNode }, IndexesModel> {
     public static moduleName: string = 'selectedDataIndex';
 }
 

components/charts/src/chart/series-directive.tsx

@@ -15,7 +15,7 @@ export interface SeriesDirTypecast {
  * </ChartComponent>
  * ```
  */
-export class SeriesDirective extends ComplexBase<SeriesModel| SeriesDirTypecast, SeriesModel| SeriesDirTypecast> {
+export class SeriesDirective extends ComplexBase<SeriesModel| SeriesDirTypecast & { children?: React.ReactNode }, SeriesModel| SeriesDirTypecast> {
     public static moduleName: string = 'series';
     public static complexTemplate: Object = {'dataLabelTemplate': 'dataLabel.template'};
 }

components/charts/src/chart/striplines-directive.tsx

@@ -17,7 +17,7 @@ import { StripLineSettingsModel } from '@syncfusion/ej2-charts';
  * </ChartComponent>
  * ```
  */
-export class StripLineDirective extends ComplexBase<StripLineSettingsModel, StripLineSettingsModel> {
+export class StripLineDirective extends ComplexBase<StripLineSettingsModel & { children?: React.ReactNode }, StripLineSettingsModel> {
     public static moduleName: string = 'stripLine';
 }
 

components/charts/src/chart/trendlines-directive.tsx

@@ -17,7 +17,7 @@ import { TrendlineModel } from '@syncfusion/ej2-charts';
  * </ChartComponent>
  * ```
  */
-export class TrendlineDirective extends ComplexBase<TrendlineModel, TrendlineModel> {
+export class TrendlineDirective extends ComplexBase<TrendlineModel & { children?: React.ReactNode }, TrendlineModel> {
     public static moduleName: string = 'trendline';
 }
 

components/charts/src/range-navigator/series-directive.tsx

@@ -13,7 +13,7 @@ import { RangeNavigatorSeriesModel } from '@syncfusion/ej2-charts';
  * </RangenavigatorChartComponent>
  * ```
  */
-export class RangenavigatorSeriesDirective extends ComplexBase<RangeNavigatorSeriesModel, RangeNavigatorSeriesModel> {
+export class RangenavigatorSeriesDirective extends ComplexBase<RangeNavigatorSeriesModel & { children?: React.ReactNode }, RangeNavigatorSeriesModel> {
     public static moduleName: string = 'rangenavigatorSeries';
 }
 

components/charts/src/smithchart/series-directive.tsx

@@ -3,7 +3,7 @@ import { SmithchartSeriesModel } from '@syncfusion/ej2-charts';
 
 
 
-export class SmithchartSeriesDirective extends ComplexBase<SmithchartSeriesModel, SmithchartSeriesModel> {
+export class SmithchartSeriesDirective extends ComplexBase<SmithchartSeriesModel & { children?: React.ReactNode }, SmithchartSeriesModel> {
     public static moduleName: string = 'smithchartSeries';
 }
 

components/charts/src/sparkline/rangebandsettings-directive.tsx

@@ -3,7 +3,7 @@ import { RangeBandSettingsModel } from '@syncfusion/ej2-charts';
 
 
 
-export class RangeBandSettingDirective extends ComplexBase<RangeBandSettingsModel, RangeBandSettingsModel> {
+export class RangeBandSettingDirective extends ComplexBase<RangeBandSettingsModel & { children?: React.ReactNode }, RangeBandSettingsModel> {
     public static moduleName: string = 'rangeBandSetting';
 }