v24.1.41 is released

Author: pipeline

components/barcodegenerator/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## [Unreleased]
 
-## 23.2.7 (2023-12-05)
+## 24.1.41 (2023-12-18)
 
 ### Barcode
 

components/base/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 ## [Unreleased]
 
+## 24.1.41 (2023-12-18)
+
+### Common
+
+#### Bug Fixes
+
+- `#I517152` - The issue with "the component undergoes a re-render when the state variable is updated, even if it is not being utilized" has been resolved.
+- The React package size is minimised by removing redundant styles.
+
 ## 23.2.5 (2023-11-23)
 
 ### Common

components/base/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-react-base",
-	"version": "23.2.5",
+	"version": "24.1.41",
 	"description": "A common package of Essential JS 2 React base, methods and class definitions",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

components/base/src/component-base.ts

@@ -102,7 +102,7 @@ export class ComponentBase<P, S> extends React.Component<P, S> {
         if(!this.isshouldComponentUpdateCalled && this.initRenderCalled && !this.isReactForeceUpdate) {
             if (prev !== this.props) {
                 this.isshouldComponentUpdateCalled = true;
-                this.refreshProperties(this.props, this.props);
+                this.updateProperties(this.props, false, prev);
             }
         }
     }
@@ -138,11 +138,12 @@ export class ComponentBase<P, S> extends React.Component<P, S> {
     /**
      * @private
      */
-    private updateProperties(nextProps: Object, silent?: boolean): void {
+    private updateProperties(nextProps: Object, silent?: boolean, prev?: Object): void {
         let dProps: Object = extend({}, nextProps);
         let keys: string[] = Object.keys(nextProps);
+        let prevProps: Object = extend({}, prev || this.props);
         // The statelessTemplates props value is taken from sample level property or default component property.
-        let statelessTemplates: string[] = !isNullOrUndefined(this.props['statelessTemplates']) ? this.props['statelessTemplates'] : 
+        let statelessTemplates: string[] = !isNullOrUndefined(prevProps['statelessTemplates']) ? prevProps['statelessTemplates'] : 
            (!isNullOrUndefined(this['statelessTemplateProps']) ? this['statelessTemplateProps'] : []);
         for (let propkey of keys) {
             let isClassName: boolean = propkey === 'className';
@@ -153,12 +154,12 @@ export class ComponentBase<P, S> extends React.Component<P, S> {
                 this.htmlattributes[`${propkey}`] !== dProps[`${propkey}`]) {
                 this.htmlattributes[`${propkey}`] = dProps[`${propkey}`];
             }
-            if (this.compareValues(this.props[`${propkey}`], nextProps[`${propkey}`])) {
+            if (this.compareValues(prevProps[`${propkey}`], nextProps[`${propkey}`])) {
                 delete dProps[`${propkey}`];
             } else if (this.attrKeys.indexOf(propkey) !== -1) {
                 if (isClassName) {
                     this.clsName = true;
-                    let propsClsName = this.props[`${propkey}`].split(' ');
+                    let propsClsName = prevProps[`${propkey}`].split(' ');
                     for (let i: number = 0; i < propsClsName.length; i++) {
                         this.element.classList.remove(propsClsName[parseInt(i.toString(), 10)]);
                     }
@@ -181,7 +182,7 @@ export class ComponentBase<P, S> extends React.Component<P, S> {
             delete dProps['children'];
         }
         // tslint:disable-next-line:no-any
-        if (this.initRenderCalled && (this.canDelayUpdate || (this.props as any).delayUpdate)) {
+        if (this.initRenderCalled && (this.canDelayUpdate || (prevProps as any).delayUpdate)) {
             setTimeout(() => {
                 this.refreshProperties(dProps, nextProps, silent);
             });
@@ -227,7 +228,7 @@ export class ComponentBase<P, S> extends React.Component<P, S> {
         }
         this.attrKeys = defaulthtmlkeys.concat(this.controlAttributes || []);
         for (let prop of propKeys) {
-            if (prop.indexOf('data-') !== -1 || prop.indexOf('aria-') !== -1 || this.attrKeys.indexOf(prop) !== -1) {
+            if (prop.indexOf('data-') !== -1 || prop.indexOf('aria-') !== -1 || this.attrKeys.indexOf(prop) !== -1 || (Object.keys((this as any).properties).indexOf(`${prop}`) === -1 && prop.indexOf('children') === -1)) {
                 if( this.htmlattributes[`${prop}`] !== (<{ [key: string]: Object }>this.props)[`${prop}`]) {
                     this.htmlattributes[`${prop}`] = (<{ [key: string]: Object }>this.props)[`${prop}`];
                 }
@@ -240,7 +241,7 @@ export class ComponentBase<P, S> extends React.Component<P, S> {
             };
             let keycompoentns: string[] = ['autocomplete', 'combobox', 'dropdownlist', 'dropdowntree', 'multiselect',
                 'listbox', 'colorpicker', 'numerictextbox', 'textbox',
-                'uploader', 'maskedtextbox', 'slider','datepicker','datetimepicker','daterangepicker','timepicker','checkbox','switch','radio'];
+                'uploader', 'maskedtextbox', 'slider','datepicker','datetimepicker','daterangepicker','timepicker','checkbox','switch','radio', 'rating'];
             if (keycompoentns.indexOf(this.getModuleName()) !== -1) {
                 this.htmlattributes.key = '' + ComponentBase.reactUid;
                 ComponentBase.reactUid++;

components/buttons/CHANGELOG.md

@@ -2,48 +2,20 @@
 
 ## [Unreleased]
 
-## 23.2.7 (2023-12-05)
-
-### Chip
-
-#### Bug Fixes
-
-- `#I525416` - The issue when updating the `chips` property when multiple chip component rendered in the page has been resolved.
-
-## 23.1.43 (2023-10-31)
+## 24.1.41 (2023-12-18)
 
 ### RadioButton
 
 #### Bug Fixes
 
-- `#F513731` - The issue with "`HtmlAttributes` property not working properly in RadioButton component" has been resolved.
-
-## 23.1.42 (2023-10-24)
+- `#F40707` - Value change event triggered twice in Radio Button component has been fixed.
 
 ### Button
 
 #### Bug Fixes
 
 - `#I512179` - The issue with "Duplicate Icon Span while using the `onPropertyChange` of button" has been resolved.
 
-## 23.1.41 (2023-10-17)
-
-### Checkbox
-
-#### Bug Fixes
-
-- `#I509029` - The issue with "`HtmlAttributes` property not working properly in checkBox component" has been resolved.
-
-## 23.1.39 (2023-10-04)
-
-### Checkbox
-
-#### Bug Fixes
-
-- `#I505814` - The issue with "Script error thrown in CheckBox While using the change event in React" has been resolved.
-
-## 23.1.36 (2023-09-15)
-
 ### Checkbox
 
 #### Bug Fixes
@@ -65,12 +37,6 @@
 - `#I422263` - Provided the htmlAttributes support for the Chip component.
 
 
-### RadioButton
-
-#### Bug Fixes
-
-- `#F40707` - Value change event triggered twice in Radio Button component has been fixed.
-
 ## 19.2.47 (2021-07-13)
 
 ### Checkbox

components/buttons/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-react-buttons",
-	"version": "23.2.4",
+	"version": "18.64.1",
 	"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/calendars/CHANGELOG.md

@@ -2,36 +2,6 @@
 
 ## [Unreleased]
 
-## 23.2.7 (2023-12-05)
-
-### DatePicker
-
-#### Bug Fixes
-
-- `#524901` - The issue with the DatePicker component's navigation not working properly in month selection when using the "MMM" format has been resolved.
-
-## 23.2.6 (2023-11-28)
-
-### Calendar
-
-#### Bug Fixes
-
-- `#I521911` - Fixed an issue where an exception was occurring when changing the culture dynamically.
-
-## 23.1.41 (2023-10-17)
-
-### DateRangePicker
-
-#### Bug Fixes
-
-- `#I506617` - Fixed issue where the previous and next icons were displaying incorrectly in the Fluent Theme.
-
-### DateTimePicker
-
-#### Bug Fixes
-
-- `#I504425` - Fixed an issue where typing "pm" and then focusing out would convert the "pm" extension to "am". This issue has been resolved.
-
 ## 19.3.46 (2021-10-19)
 
 ### TimePicker

components/calendars/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-react-calendars",
-	"version": "23.2.6",
+	"version": "18.32.2",
 	"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,44 @@
 
 ## [Unreleased]
 
+## 24.1.41 (2023-12-18)
+
+### Chart
+
+#### Features
+
+- `#I489636`, `#F185569` - Provided support to align the axis title to the near, far, and center of the chart area.
+- `#I482069`, `#I510188`, `#I511613` - Provided support to position the tooltip at a fixed location within the chart.
+
+#### Bug Fixes
+
+- `#F185567` - The data label now renders properly for the waterfall chart.
+- `#I185614` - The 100% stacking bar is now rendered properly even when the data value is 0.
+
+### BulletChart
+
+#### Features
+
+- `#I495253` - Provided support to apply different colors to value and target bars in the bullet chart.
+
+### 3DChart
+
+A 3D chart is a graphical representation of data in three dimensions, showcasing relationships and trends among variables. Unlike traditional 2D charts, 3D charts add depth to the visualization, allowing for a more immersive and comprehensive understanding of data patterns.
+
+
+- **Series** - The 3D chart can plot over six chart types, including column, bar, stacking column, stacking bar, 100% stacked column, and 100% stacked bar.
+- **Data Binding** - Bind the 3D chart component with an array of JSON objects or a DataManager. In addition to chart series, data labels, and tooltips can also be bound to your data.
+- **Data Labels** - Support data labels to annotate points with labels to improve the readability of data.
+- **Axis Types** - Able to plot different data types such as numbers, datetime, logarithmic, and string.
+- **Axis Features** - Supports multiple axes, inverted axes, multiple panes, opposed positions, and smart labels.
+- **Legend** - Supports a legend to provide additional information about a series with customization options.
+- **Animation** - The 3D chart series will be animated when rendering and refreshing the chart widget.
+- **User Interaction** - Supports interactive features such as tooltips and data point selection.
+- **Export** - Supports printing the 3D chart directly from the browser and exporting the chart in both JPEG and PNG formats.
+- **RTL** - Provides a full-fledged right-to-left mode that aligns the axis, tooltip, legend, and data in the 3D chart component from right to left.
+- **Appearance** - Colors for the 3D charts are picked by the built-in theme, but each element of the 3D chart can be customized with simple configuration options.
+- **Accessibility** - Designed to be accessible to users with disabilities, with features such as WAI-ARIA standard compliance and keyboard navigation to ensure that the 3D chart can be effectively used with assistive technologies such as screen readers.
+
 ## 23.2.7 (2023-12-05)
 
 ### Chart

components/charts/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-react-charts",
-	"version": "23.2.6",
+	"version": "20.20.12",
 	"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",
@@ -17,7 +17,8 @@
 		"react-sparkline-chart",
 		"react-smith-chart",
 		"react-bullet-chart",
-		"react-bullet-graph"
+		"react-bullet-graph",
+		"react-chart3d"
 	],
 	"repository": {
 		"type": "git",

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

@@ -0,0 +1,23 @@
+import { ComplexBase } from '@syncfusion/ej2-react-base';
+import { Chart3DAxisModel } from '@syncfusion/ej2-charts';
+
+
+/**
+ * `Axis3D` directive represent a axis row of the react Chart. 
+ * It must be contained in a Chart component(`Chart3DComponent`). 
+ * ```tsx
+ * <Chart3DComponent>
+ * <Chart3DAxesDirective>
+ * <Chart3DAxisDirective></Chart3DAxisDirective>
+ * </Chart3DAxesDirective>
+ * </Chart3DComponent>
+ * ```
+ */
+export class Chart3DAxisDirective extends ComplexBase<Chart3DAxisModel & { children?: React.ReactNode }, Chart3DAxisModel> {
+    public static moduleName: string = 'chart3DAxis';
+}
+
+export class Chart3DAxesDirective extends ComplexBase<{}, {}> {
+    public static propertyName: string = 'axes';
+    public static moduleName: string = 'chart3DAxes';
+}

components/charts/src/chart3d/chart3d.component.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { Chart3D, Chart3DModel } from '@syncfusion/ej2-charts';
+import { ComponentBase, applyMixins, DefaultHtmlAttributes } from '@syncfusion/ej2-react-base';
+
+
+export interface Chart3DTypecast {
+    tooltip?: any;
+}
+/**
+ * Represents react 3D Chart Component
+ * ```tsx
+ * <Chart3DComponent></Chart3DComponent>
+ * ```
+ */
+export class Chart3DComponent extends Chart3D {
+    public state: Readonly<{ children?: React.ReactNode | React.ReactNode[] }> 
+    & Readonly<Chart3DModel | DefaultHtmlAttributes| Chart3DTypecast>;
+    public setState: any;
+    private getDefaultAttributes: Function;
+    public initRenderCalled: boolean = false;
+    private checkInjectedModules: boolean = true;
+    public directivekeys: { [key: string]: Object } = {'chart3DSeriesCollection': 'chart3DSeries', 'chart3DAxes': 'chart3DAxis', 'chart3DRows': 'chart3DRow', 'chart3DColumns': 'chart3DColumn', 'chart3DSelectedDataIndexes': 'chart3DSelectedDataIndex'};
+    private statelessTemplateProps: string[] = null;
+    private templateProps: string[] = null;
+    private immediateRender: boolean = false;
+    public props: Readonly<{ children?: React.ReactNode | React.ReactNode[] }>
+     & Readonly<Chart3DModel | DefaultHtmlAttributes| Chart3DTypecast>;
+    public forceUpdate: (callBack?: () => any) => void;
+    public context: Object;
+    public portals: any = [];
+    public isReactComponent: Object;
+    public refs: {
+        [key: string]: React.ReactInstance
+    };
+    constructor(props: any) {
+        super(props);
+    }
+
+    public render(): any {
+        if (((this.element && !this.initRenderCalled) || this.refreshing) && !(this as any).isReactForeceUpdate) {
+            super.render();
+            this.initRenderCalled = true;
+        } else {
+            return React.createElement('div', this.getDefaultAttributes(),[].concat(this.props.children,this.portals));
+        }
+
+    }
+}
+
+applyMixins(Chart3DComponent, [ComponentBase, React.Component]);

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

@@ -0,0 +1,23 @@
+import { ComplexBase } from '@syncfusion/ej2-react-base';
+import { Chart3DColumnModel } from '@syncfusion/ej2-charts';
+
+
+/**
+ * `Column3D` directive represent a axis column of the react Chart. 
+ * It must be contained in a Chart component(`Chart3DComponent`). 
+ * ```tsx
+ * <Chart3DComponent> 
+ * <Chart3DColumnsDirective>
+ * <Chart3DColumnDirective></Chart3DColumnDirective>
+ * </Chart3DColumnsDirective>
+ * </Chart3DComponent>
+ * ```
+ */
+export class Chart3DColumnDirective extends ComplexBase<Chart3DColumnModel & { children?: React.ReactNode }, Chart3DColumnModel> {
+    public static moduleName: string = 'chart3DColumn';
+}
+
+export class Chart3DColumnsDirective extends ComplexBase<{}, {}> {
+    public static propertyName: string = 'columns';
+    public static moduleName: string = 'chart3DColumns';
+}

components/charts/src/chart3d/index.ts

@@ -0,0 +1,6 @@
+export * from './series-directive';
+export * from './axes-directive';
+export * from './rows-directive';
+export * from './columns-directive';
+export * from './selecteddataindexes-directive';
+export * from './chart3d.component';