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",