@syncfusion/ej2-react-pivotview 20.2.36 → 20.2.43

package/CHANGELOG.md

@@ -6,6 +6,37 @@
 
 #### Bug Fixes
 
+- `#I390649` - When virtual scrolling is enabled, the pivot table now properly refreshed while performing value sorting.
+
+#### New Features
+
+- `#I364830` - Improved server-side engine performance. As a result, pivot table can now render up to 3 million records without any issues.
+- `#I382580` - The calculated field UI now has a "Format" dropdown option for relational data source.
+
+## 20.2.39 (2022-07-19)
+
+### Pivot Table
+
+#### Bug Fixes
+
+- `#I389665` - The pivot table can now be rendered properly while applying date grouping.
+- `#I389889` - The class names in the pivot table are properly updated for the sub-total columns.
+
+## 20.2.38 (2022-07-12)
+
+### Pivot Table
+
+#### Bug Fixes
+
+- The selection is now properly working when using the selection mode of the pivot table.
+- The engine population events are now properly triggered during virtual scrolling.
+
+## 20.2.36 (2022-06-30)
+
+### Pivot Table
+
+#### Bug Fixes
+
 - `#I387410` - The pivot table with OLAP cube can now render properly with calculated fields when virtual scrolling is enabled.
 
 #### New Features

package/dist/ej2-react-pivotview.umd.min.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-react-pivotview.umd.min.js
-*  version : 20.2.36
+*  version : 20.2.43
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-react-pivotview@*",
-  "_id": "@syncfusion/ej2-react-pivotview@20.15.1",
+  "_id": "@syncfusion/ej2-react-pivotview@20.2.39",
   "_inBundle": false,
-  "_integrity": "sha512-JPtn1tc8AgahhjwLSSsYb2bvMKa/ew9oP3kDHXvjZKGZig6cnyEttqf6KpFu6m3vypP2Q8JUkm83tDYLOaEoTA==",
+  "_integrity": "sha512-+nIq/J+rgmTgrcJUXrbXqdGaOx0iQrpSV50kvBy+9/e5E+O5LThIfhj7WT485vjmvAwJ1qXOhLapbI9zVK8vgw==",
   "_location": "/@syncfusion/ej2-react-pivotview",
   "_phantomChildren": {},
   "_requested": {
@@ -19,8 +19,8 @@
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-react-pivotview/-/ej2-react-pivotview-20.15.1.tgz",
-  "_shasum": "344d763692b736732f923a1ecc00d4ffb48a87f8",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-react-pivotview/-/ej2-react-pivotview-20.2.39.tgz",
+  "_shasum": "75c2dd94f07b1061b53556b48b69acee2546827c",
   "_spec": "@syncfusion/ej2-react-pivotview@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -31,9 +31,9 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.2.36",
-    "@syncfusion/ej2-pivotview": "20.2.36",
-    "@syncfusion/ej2-react-base": "~20.2.36"
+    "@syncfusion/ej2-base": "~20.2.43",
+    "@syncfusion/ej2-pivotview": "20.2.43",
+    "@syncfusion/ej2-react-base": "~20.2.43"
   },
   "deprecated": false,
   "description": "The pivot grid, or pivot table, is used to visualize large sets of relational data in a cross-tabular format, similar to an Excel pivot table. for React",
@@ -61,6 +61,6 @@
     "type": "git",
     "url": "git+https://github.com/syncfusion/ej2-react-ui-components.git"
   },
-  "version": "20.2.36",
+  "version": "20.2.43",
   "sideEffects": false
 }

package/styles/bootstrap-dark.css

@@ -2513,7 +2513,7 @@
 }
 
 .e-pivot-calc-dialog-div {
-  max-height: 550px !important;
+  max-height: 600px !important;
   min-width: 290px;
 }
 .e-pivot-calc-dialog-div .e-dlg-header-content,
@@ -2523,11 +2523,14 @@
 .e-pivot-calc-dialog-div .e-dlg-content {
   padding-bottom: 15px;
 }
+.e-pivot-calc-dialog-div .e-dlg-content .e-pivot-calc-custom-format-div {
+  margin-top: 15px;
+}
 .e-pivot-calc-dialog-div .e-pivot-all-field-title,
 .e-pivot-calc-dialog-div .e-pivot-field-name-title,
 .e-pivot-calc-dialog-div .e-pivot-formula-title,
 .e-pivot-calc-dialog-div .e-olap-hierarchy-title,
-.e-pivot-calc-dialog-div .e-olap-format-title,
+.e-pivot-calc-dialog-div .e-pivot-format-title,
 .e-pivot-calc-dialog-div .e-olap-member-title {
   color: #f0f0f0;
   font-size: 13px;
@@ -2717,7 +2720,7 @@
   display: inline-block;
   height: 437px;
   overflow: auto;
-  width: 310px;
+  width: 100% !important;
 }
 .e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-field-tree-div .e-pivot-treeview-outer .e-treeview {
   display: inline-table;
@@ -2805,26 +2808,26 @@
 .e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-field-tree-div .e-pivot-treeview-outer .e-pivot-all-field-title-container .e-info:hover {
   color: #0070f0;
 }
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div {
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div {
   -ms-flex: auto;
       flex: auto;
   margin-left: 18px;
 }
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-pivot-formula {
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-pivot-formula {
   height: 100px;
 }
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-olap-calc-custom-format-div {
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-pivot-calc-custom-format-div {
   margin-top: 15px;
 }
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-pivot-formula-title,
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-pivot-field-name-title,
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-olap-hierarchy-title,
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-olap-format-title,
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-olap-member-title {
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-pivot-formula-title,
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-pivot-field-name-title,
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-olap-hierarchy-title,
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-pivot-format-title,
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-olap-member-title {
   padding-left: 0;
   padding-right: 0;
 }
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-pivot-field-name-title {
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-pivot-field-name-title {
   margin-top: 0;
   padding-top: 0;
 }
@@ -2835,7 +2838,7 @@
   float: left;
   margin: 0;
 }
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div.e-rtl .e-pivot-calc-outer-div .e-olap-calculated-div {
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div.e-rtl .e-pivot-calc-outer-div .e-pivot-calculated-div {
   margin-left: 0;
   margin-right: 18px;
 }
@@ -2852,13 +2855,13 @@
 .e-bigger.e-pivot-calc-dialog-div .e-pivot-field-name-title,
 .e-bigger.e-pivot-calc-dialog-div .e-pivot-formula-title,
 .e-bigger.e-pivot-calc-dialog-div .e-olap-hierarchy-title,
-.e-bigger.e-pivot-calc-dialog-div .e-olap-format-title,
+.e-bigger.e-pivot-calc-dialog-div .e-pivot-format-title,
 .e-bigger.e-pivot-calc-dialog-div .e-olap-member-title,
 .e-bigger .e-pivot-calc-dialog-div .e-pivot-all-field-title,
 .e-bigger .e-pivot-calc-dialog-div .e-pivot-field-name-title,
 .e-bigger .e-pivot-calc-dialog-div .e-pivot-formula-title,
 .e-bigger .e-pivot-calc-dialog-div .e-olap-hierarchy-title,
-.e-bigger .e-pivot-calc-dialog-div .e-olap-format-title,
+.e-bigger .e-pivot-calc-dialog-div .e-pivot-format-title,
 .e-bigger .e-pivot-calc-dialog-div .e-olap-member-title {
   font-size: 14px;
   padding: 6px 0;
@@ -2912,12 +2915,12 @@
 .e-bigger .e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-field-tree-div .e-pivot-treeview-outer .e-treeview ul .e-list-icon {
   font-size: 16px;
 }
-.e-bigger.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div,
-.e-bigger .e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div {
+.e-bigger.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div,
+.e-bigger .e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div {
   margin-left: 24px;
 }
-.e-bigger.e-pivot-calc-dialog-div.e-olap-calc-dialog-div.e-rtl .e-pivot-calc-outer-div .e-olap-calculated-div,
-.e-bigger .e-pivot-calc-dialog-div.e-olap-calc-dialog-div.e-rtl .e-pivot-calc-outer-div .e-olap-calculated-div {
+.e-bigger.e-pivot-calc-dialog-div.e-olap-calc-dialog-div.e-rtl .e-pivot-calc-outer-div .e-pivot-calculated-div,
+.e-bigger .e-pivot-calc-dialog-div.e-olap-calc-dialog-div.e-rtl .e-pivot-calc-outer-div .e-pivot-calculated-div {
   margin-left: 0;
   margin-right: 24px;
 }
@@ -4797,8 +4800,7 @@
 }
 .e-pivotfieldlist-container.e-device .e-adaptive-container .e-content .e-pivot-calc-outer-div .e-pivot-calc-input-div,
 .e-pivotfieldlist-container.e-device .e-adaptive-container .e-content .e-pivot-calc-outer-div .e-member-options,
-.e-pivotfieldlist-container.e-device .e-adaptive-container .e-content .e-pivot-calc-outer-div .e-pivot-calc-custom-format-div,
-.e-pivotfieldlist-container.e-device .e-adaptive-container .e-content .e-pivot-calc-outer-div .e-olap-calc-custom-format-div {
+.e-pivotfieldlist-container.e-device .e-adaptive-container .e-content .e-pivot-calc-outer-div .e-pivot-calc-custom-format-div {
   margin-left: 20px;
   margin-right: 20px;
   margin-top: 20px;

package/styles/bootstrap.css

@@ -2510,7 +2510,7 @@
 }
 
 .e-pivot-calc-dialog-div {
-  max-height: 550px !important;
+  max-height: 600px !important;
   min-width: 290px;
 }
 .e-pivot-calc-dialog-div .e-dlg-header-content,
@@ -2520,11 +2520,14 @@
 .e-pivot-calc-dialog-div .e-dlg-content {
   padding-bottom: 15px;
 }
+.e-pivot-calc-dialog-div .e-dlg-content .e-pivot-calc-custom-format-div {
+  margin-top: 15px;
+}
 .e-pivot-calc-dialog-div .e-pivot-all-field-title,
 .e-pivot-calc-dialog-div .e-pivot-field-name-title,
 .e-pivot-calc-dialog-div .e-pivot-formula-title,
 .e-pivot-calc-dialog-div .e-olap-hierarchy-title,
-.e-pivot-calc-dialog-div .e-olap-format-title,
+.e-pivot-calc-dialog-div .e-pivot-format-title,
 .e-pivot-calc-dialog-div .e-olap-member-title {
   color: #333;
   font-size: 13px;
@@ -2714,7 +2717,7 @@
   display: inline-block;
   height: 437px;
   overflow: auto;
-  width: 310px;
+  width: 100% !important;
 }
 .e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-field-tree-div .e-pivot-treeview-outer .e-treeview {
   display: inline-table;
@@ -2802,26 +2805,26 @@
 .e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-field-tree-div .e-pivot-treeview-outer .e-pivot-all-field-title-container .e-info:hover {
   color: #317ab9;
 }
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div {
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div {
   -ms-flex: auto;
       flex: auto;
   margin-left: 18px;
 }
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-pivot-formula {
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-pivot-formula {
   height: 100px;
 }
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-olap-calc-custom-format-div {
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-pivot-calc-custom-format-div {
   margin-top: 15px;
 }
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-pivot-formula-title,
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-pivot-field-name-title,
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-olap-hierarchy-title,
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-olap-format-title,
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-olap-member-title {
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-pivot-formula-title,
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-pivot-field-name-title,
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-olap-hierarchy-title,
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-pivot-format-title,
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-olap-member-title {
   padding-left: 0;
   padding-right: 0;
 }
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-pivot-field-name-title {
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-pivot-field-name-title {
   margin-top: 0;
   padding-top: 0;
 }
@@ -2832,7 +2835,7 @@
   float: left;
   margin: 0;
 }
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div.e-rtl .e-pivot-calc-outer-div .e-olap-calculated-div {
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div.e-rtl .e-pivot-calc-outer-div .e-pivot-calculated-div {
   margin-left: 0;
   margin-right: 18px;
 }
@@ -2849,13 +2852,13 @@
 .e-bigger.e-pivot-calc-dialog-div .e-pivot-field-name-title,
 .e-bigger.e-pivot-calc-dialog-div .e-pivot-formula-title,
 .e-bigger.e-pivot-calc-dialog-div .e-olap-hierarchy-title,
-.e-bigger.e-pivot-calc-dialog-div .e-olap-format-title,
+.e-bigger.e-pivot-calc-dialog-div .e-pivot-format-title,
 .e-bigger.e-pivot-calc-dialog-div .e-olap-member-title,
 .e-bigger .e-pivot-calc-dialog-div .e-pivot-all-field-title,
 .e-bigger .e-pivot-calc-dialog-div .e-pivot-field-name-title,
 .e-bigger .e-pivot-calc-dialog-div .e-pivot-formula-title,
 .e-bigger .e-pivot-calc-dialog-div .e-olap-hierarchy-title,
-.e-bigger .e-pivot-calc-dialog-div .e-olap-format-title,
+.e-bigger .e-pivot-calc-dialog-div .e-pivot-format-title,
 .e-bigger .e-pivot-calc-dialog-div .e-olap-member-title {
   font-size: 14px;
   padding: 6px 0;
@@ -2909,12 +2912,12 @@
 .e-bigger .e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-field-tree-div .e-pivot-treeview-outer .e-treeview ul .e-list-icon {
   font-size: 16px;
 }
-.e-bigger.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div,
-.e-bigger .e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div {
+.e-bigger.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div,
+.e-bigger .e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div {
   margin-left: 24px;
 }
-.e-bigger.e-pivot-calc-dialog-div.e-olap-calc-dialog-div.e-rtl .e-pivot-calc-outer-div .e-olap-calculated-div,
-.e-bigger .e-pivot-calc-dialog-div.e-olap-calc-dialog-div.e-rtl .e-pivot-calc-outer-div .e-olap-calculated-div {
+.e-bigger.e-pivot-calc-dialog-div.e-olap-calc-dialog-div.e-rtl .e-pivot-calc-outer-div .e-pivot-calculated-div,
+.e-bigger .e-pivot-calc-dialog-div.e-olap-calc-dialog-div.e-rtl .e-pivot-calc-outer-div .e-pivot-calculated-div {
   margin-left: 0;
   margin-right: 24px;
 }
@@ -4794,8 +4797,7 @@
 }
 .e-pivotfieldlist-container.e-device .e-adaptive-container .e-content .e-pivot-calc-outer-div .e-pivot-calc-input-div,
 .e-pivotfieldlist-container.e-device .e-adaptive-container .e-content .e-pivot-calc-outer-div .e-member-options,
-.e-pivotfieldlist-container.e-device .e-adaptive-container .e-content .e-pivot-calc-outer-div .e-pivot-calc-custom-format-div,
-.e-pivotfieldlist-container.e-device .e-adaptive-container .e-content .e-pivot-calc-outer-div .e-olap-calc-custom-format-div {
+.e-pivotfieldlist-container.e-device .e-adaptive-container .e-content .e-pivot-calc-outer-div .e-pivot-calc-custom-format-div {
   margin-left: 20px;
   margin-right: 20px;
   margin-top: 20px;

package/styles/bootstrap4.css

@@ -2673,7 +2673,7 @@
 }
 
 .e-pivot-calc-dialog-div {
-  max-height: 550px !important;
+  max-height: 600px !important;
   min-width: 290px;
 }
 .e-pivot-calc-dialog-div .e-dlg-header-content,
@@ -2683,11 +2683,14 @@
 .e-pivot-calc-dialog-div .e-dlg-content {
   padding-bottom: 14px;
 }
+.e-pivot-calc-dialog-div .e-dlg-content .e-pivot-calc-custom-format-div {
+  margin-top: 15px;
+}
 .e-pivot-calc-dialog-div .e-pivot-all-field-title,
 .e-pivot-calc-dialog-div .e-pivot-field-name-title,
 .e-pivot-calc-dialog-div .e-pivot-formula-title,
 .e-pivot-calc-dialog-div .e-olap-hierarchy-title,
-.e-pivot-calc-dialog-div .e-olap-format-title,
+.e-pivot-calc-dialog-div .e-pivot-format-title,
 .e-pivot-calc-dialog-div .e-olap-member-title {
   color: #212529;
   font-size: 13px;
@@ -2877,7 +2880,7 @@
   display: inline-block;
   height: 437px;
   overflow: auto;
-  width: 310px;
+  width: 100% !important;
 }
 .e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-field-tree-div .e-pivot-treeview-outer .e-treeview {
   display: inline-table;
@@ -2965,26 +2968,26 @@
 .e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-field-tree-div .e-pivot-treeview-outer .e-pivot-all-field-title-container .e-info:hover {
   color: #007bff;
 }
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div {
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div {
   -ms-flex: auto;
       flex: auto;
   margin-left: 18px;
 }
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-pivot-formula {
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-pivot-formula {
   height: 100px;
 }
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-olap-calc-custom-format-div {
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-pivot-calc-custom-format-div {
   margin-top: 15px;
 }
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-pivot-formula-title,
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-pivot-field-name-title,
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-olap-hierarchy-title,
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-olap-format-title,
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-olap-member-title {
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-pivot-formula-title,
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-pivot-field-name-title,
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-olap-hierarchy-title,
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-pivot-format-title,
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-olap-member-title {
   padding-left: 0;
   padding-right: 0;
 }
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-pivot-field-name-title {
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-pivot-field-name-title {
   margin-top: 0;
   padding-top: 0;
 }
@@ -2995,7 +2998,7 @@
   float: left;
   margin: 0;
 }
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div.e-rtl .e-pivot-calc-outer-div .e-olap-calculated-div {
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div.e-rtl .e-pivot-calc-outer-div .e-pivot-calculated-div {
   margin-left: 0;
   margin-right: 18px;
 }
@@ -3012,13 +3015,13 @@
 .e-bigger.e-pivot-calc-dialog-div .e-pivot-field-name-title,
 .e-bigger.e-pivot-calc-dialog-div .e-pivot-formula-title,
 .e-bigger.e-pivot-calc-dialog-div .e-olap-hierarchy-title,
-.e-bigger.e-pivot-calc-dialog-div .e-olap-format-title,
+.e-bigger.e-pivot-calc-dialog-div .e-pivot-format-title,
 .e-bigger.e-pivot-calc-dialog-div .e-olap-member-title,
 .e-bigger .e-pivot-calc-dialog-div .e-pivot-all-field-title,
 .e-bigger .e-pivot-calc-dialog-div .e-pivot-field-name-title,
 .e-bigger .e-pivot-calc-dialog-div .e-pivot-formula-title,
 .e-bigger .e-pivot-calc-dialog-div .e-olap-hierarchy-title,
-.e-bigger .e-pivot-calc-dialog-div .e-olap-format-title,
+.e-bigger .e-pivot-calc-dialog-div .e-pivot-format-title,
 .e-bigger .e-pivot-calc-dialog-div .e-olap-member-title {
   font-size: 14px;
   padding: 6px 0;
@@ -3072,12 +3075,12 @@
 .e-bigger .e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-field-tree-div .e-pivot-treeview-outer .e-treeview ul .e-list-icon {
   font-size: 16px;
 }
-.e-bigger.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div,
-.e-bigger .e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div {
+.e-bigger.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div,
+.e-bigger .e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div {
   margin-left: 24px;
 }
-.e-bigger.e-pivot-calc-dialog-div.e-olap-calc-dialog-div.e-rtl .e-pivot-calc-outer-div .e-olap-calculated-div,
-.e-bigger .e-pivot-calc-dialog-div.e-olap-calc-dialog-div.e-rtl .e-pivot-calc-outer-div .e-olap-calculated-div {
+.e-bigger.e-pivot-calc-dialog-div.e-olap-calc-dialog-div.e-rtl .e-pivot-calc-outer-div .e-pivot-calculated-div,
+.e-bigger .e-pivot-calc-dialog-div.e-olap-calc-dialog-div.e-rtl .e-pivot-calc-outer-div .e-pivot-calculated-div {
   margin-left: 0;
   margin-right: 24px;
 }
@@ -5012,8 +5015,7 @@
 }
 .e-pivotfieldlist-container.e-device .e-adaptive-container .e-content .e-pivot-calc-outer-div .e-pivot-calc-input-div,
 .e-pivotfieldlist-container.e-device .e-adaptive-container .e-content .e-pivot-calc-outer-div .e-member-options,
-.e-pivotfieldlist-container.e-device .e-adaptive-container .e-content .e-pivot-calc-outer-div .e-pivot-calc-custom-format-div,
-.e-pivotfieldlist-container.e-device .e-adaptive-container .e-content .e-pivot-calc-outer-div .e-olap-calc-custom-format-div {
+.e-pivotfieldlist-container.e-device .e-adaptive-container .e-content .e-pivot-calc-outer-div .e-pivot-calc-custom-format-div {
   margin-left: 20px;
   margin-right: 20px;
   margin-top: 20px;

package/styles/bootstrap5-dark.css

@@ -2594,7 +2594,7 @@
 }
 
 .e-pivot-calc-dialog-div {
-  max-height: 550px !important;
+  max-height: 600px !important;
   min-width: 290px;
 }
 .e-pivot-calc-dialog-div .e-dlg-header-content,
@@ -2604,11 +2604,14 @@
 .e-pivot-calc-dialog-div .e-dlg-content {
   padding-bottom: 18px;
 }
+.e-pivot-calc-dialog-div .e-dlg-content .e-pivot-calc-custom-format-div {
+  margin-top: 15px;
+}
 .e-pivot-calc-dialog-div .e-pivot-all-field-title,
 .e-pivot-calc-dialog-div .e-pivot-field-name-title,
 .e-pivot-calc-dialog-div .e-pivot-formula-title,
 .e-pivot-calc-dialog-div .e-olap-hierarchy-title,
-.e-pivot-calc-dialog-div .e-olap-format-title,
+.e-pivot-calc-dialog-div .e-pivot-format-title,
 .e-pivot-calc-dialog-div .e-olap-member-title {
   color: #ced4da;
   font-size: 14px;
@@ -2802,7 +2805,7 @@
   display: inline-block;
   height: 460px;
   overflow: auto;
-  width: 310px;
+  width: 100% !important;
 }
 .e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-field-tree-div .e-pivot-treeview-outer .e-treeview {
   display: inline-table;
@@ -2890,26 +2893,26 @@
 .e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-field-tree-div .e-pivot-treeview-outer .e-pivot-all-field-title-container .e-info:hover {
   color: #adb5bd;
 }
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div {
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div {
   -ms-flex: auto;
       flex: auto;
   margin-left: 18px;
 }
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-pivot-formula {
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-pivot-formula {
   height: 100px;
 }
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-olap-calc-custom-format-div {
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-pivot-calc-custom-format-div {
   margin-top: 15px;
 }
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-pivot-formula-title,
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-pivot-field-name-title,
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-olap-hierarchy-title,
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-olap-format-title,
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-olap-member-title {
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-pivot-formula-title,
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-pivot-field-name-title,
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-olap-hierarchy-title,
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-pivot-format-title,
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-olap-member-title {
   padding-left: 0;
   padding-right: 0;
 }
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-pivot-field-name-title {
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-pivot-field-name-title {
   margin-top: 0;
   padding-top: 0;
 }
@@ -2920,7 +2923,7 @@
   float: left;
   margin: 0;
 }
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div.e-rtl .e-pivot-calc-outer-div .e-olap-calculated-div {
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div.e-rtl .e-pivot-calc-outer-div .e-pivot-calculated-div {
   margin-left: 0;
   margin-right: 18px;
 }
@@ -2937,13 +2940,13 @@
 .e-bigger.e-pivot-calc-dialog-div .e-pivot-field-name-title,
 .e-bigger.e-pivot-calc-dialog-div .e-pivot-formula-title,
 .e-bigger.e-pivot-calc-dialog-div .e-olap-hierarchy-title,
-.e-bigger.e-pivot-calc-dialog-div .e-olap-format-title,
+.e-bigger.e-pivot-calc-dialog-div .e-pivot-format-title,
 .e-bigger.e-pivot-calc-dialog-div .e-olap-member-title,
 .e-bigger .e-pivot-calc-dialog-div .e-pivot-all-field-title,
 .e-bigger .e-pivot-calc-dialog-div .e-pivot-field-name-title,
 .e-bigger .e-pivot-calc-dialog-div .e-pivot-formula-title,
 .e-bigger .e-pivot-calc-dialog-div .e-olap-hierarchy-title,
-.e-bigger .e-pivot-calc-dialog-div .e-olap-format-title,
+.e-bigger .e-pivot-calc-dialog-div .e-pivot-format-title,
 .e-bigger .e-pivot-calc-dialog-div .e-olap-member-title {
   font-size: 14px;
   padding: 6px 0;
@@ -3002,12 +3005,12 @@
 .e-bigger .e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-field-tree-div .e-pivot-treeview-outer .e-treeview ul .e-list-icon {
   font-size: 20px;
 }
-.e-bigger.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div,
-.e-bigger .e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div {
+.e-bigger.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div,
+.e-bigger .e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div {
   margin-left: 24px;
 }
-.e-bigger.e-pivot-calc-dialog-div.e-olap-calc-dialog-div.e-rtl .e-pivot-calc-outer-div .e-olap-calculated-div,
-.e-bigger .e-pivot-calc-dialog-div.e-olap-calc-dialog-div.e-rtl .e-pivot-calc-outer-div .e-olap-calculated-div {
+.e-bigger.e-pivot-calc-dialog-div.e-olap-calc-dialog-div.e-rtl .e-pivot-calc-outer-div .e-pivot-calculated-div,
+.e-bigger .e-pivot-calc-dialog-div.e-olap-calc-dialog-div.e-rtl .e-pivot-calc-outer-div .e-pivot-calculated-div {
   margin-left: 0;
   margin-right: 24px;
 }
@@ -4916,8 +4919,7 @@
 }
 .e-pivotfieldlist-container.e-device .e-adaptive-container .e-content .e-pivot-calc-outer-div .e-pivot-calc-input-div,
 .e-pivotfieldlist-container.e-device .e-adaptive-container .e-content .e-pivot-calc-outer-div .e-member-options,
-.e-pivotfieldlist-container.e-device .e-adaptive-container .e-content .e-pivot-calc-outer-div .e-pivot-calc-custom-format-div,
-.e-pivotfieldlist-container.e-device .e-adaptive-container .e-content .e-pivot-calc-outer-div .e-olap-calc-custom-format-div {
+.e-pivotfieldlist-container.e-device .e-adaptive-container .e-content .e-pivot-calc-outer-div .e-pivot-calc-custom-format-div {
   margin-left: 20px;
   margin-right: 20px;
   margin-top: 20px;