v21.1.35 is released

Author: pipeline

config.json

@@ -128,6 +128,7 @@
 		"appbar",
 		"checkbox",
 		"dropdown",
-		"dropdown-button"
+		"dropdown-button",
+		null
 	]
 }

index.html

@@ -19,6 +19,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="description" content="Explore and learn Syncfusion React UI components library using large collection of feature-wise examples for each components.">
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+    <meta name="referrer" content="never"/>
     <title>Demos, Examples of Syncfusion React UI Components</title>
     <link rel="manifest" href="./manifest.webmanifest">
     <link href="src/common/lib/content/roboto.css" rel="stylesheet">
@@ -346,7 +347,7 @@ <h1 class='sb-sample-text' role="heading" aria-level="1"></h1>
                                         <div class="content-area">
                                             <div class="ad-cnt-pt">
                                                 <div class="ad-cnt-icon click-icon sb-icons sb-icon-icon-selection"></div>
-                                                <div class="cnt-text">65+ high-performance and responsive UI components</div>
+                                                <div class="cnt-text">80+ high-performance and responsive UI components</div>
                                             </div>
                                             <div class="ad-cnt-pt">
                                                 <div class="ad-cnt-icon click-icon sb-icons sb-icon-icon-selection"></div>

package.json

@@ -1,11 +1,12 @@
 {
   "name": "@syncfusion/ej2-react-samples",
-  "version": "20.4.38",
+  "version": "21.1.35",
   "description": "Examples of React UI Components",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
   "dependencies": {
     "@syncfusion/ej2": "*",
+    "@syncfusion/ej2-data": "*",
     "@syncfusion/ej2-react-base": "*",
     "@syncfusion/ej2-react-buttons": "*",
     "@syncfusion/ej2-react-calendars": "*",
@@ -29,6 +30,7 @@
     "@syncfusion/ej2-react-inplace-editor": "*",
     "@syncfusion/ej2-react-treegrid": "*",
     "@syncfusion/ej2-react-popups": "*",
+    "@syncfusion/ej2-react-ribbon": "*",
     "@syncfusion/ej2-react-schedule": "*",
     "@syncfusion/ej2-react-splitbuttons": "*",
     "@syncfusion/ej2-react-documenteditor": "*",

sampleName.json

@@ -866,6 +866,14 @@
             "keyboard-navigation": "Keyboard Navigations"
         }
     },
+    "ribbon": {
+        "ControlName": "Ribbon",
+        "Samples": {
+            "default":"Default Functionalities",
+            "simplified": "Simplified Mode",
+            "resize": "Ribbon Resizing"
+        }
+    },
     "rich-text-editor": {
         "ControlName": "Rich Text Editor",
         "Samples": {

src/accordion/keyboard-interaction-functional.tsx

@@ -4,9 +4,20 @@ import { AccordionComponent, AccordionItemDirective, AccordionItemsDirective } f
 import { updateSampleSection } from '../common/sample-base';
 
 function KeyboardInteraction() {
+    let accObj = React.useRef(null);
+
     React.useEffect(() => {
         updateSampleSection();
-    }, [])
+        const handleKeyDown = (e) => {
+            if (e.altKey && e.keyCode === 74 && accObj.current) {
+                accObj.current.select(0);
+            }
+        };
+        document.body.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.body.removeEventListener('keydown', handleKeyDown);
+        };
+    }, []);
 
         function acrdnheader1() {
             return (
@@ -50,12 +61,13 @@ function KeyboardInteraction() {
                 </div>
             );
         }
+
         return (
             <div className='control-pane'>
                 <div className='control-section accordion-control-section'>
                     <div className='control Accordion-sample' style={{ margin: '25px 0' }}>
                         {/* Render the Accoridon Component */}
-                        <AccordionComponent>
+                        <AccordionComponent ref={accObj}>
                             <AccordionItemsDirective>
                                 <AccordionItemDirective header={acrdnheader1} expanded={true} content={acrdnContent1} />
                                 <AccordionItemDirective header={acrdnheader2} content={acrdnContent2} />

src/accordion/keyboard-interaction.tsx

@@ -5,6 +5,20 @@ import { SampleBase } from '../common/sample-base';
 
 export class KeyboardInteraction extends SampleBase<{}, {}> {
 
+    private acrdnObj: AccordionComponent;
+
+    public handleKeydown(e): void {
+        if (e.altKey && e.keyCode === 74 && this.acrdnObj) {
+            this.acrdnObj.select(0);
+        }
+    }
+    componentDidMount() {
+        document.body.addEventListener('keydown', this.handleKeydown.bind(this));
+    }
+
+    componentWillUnmount() {
+        document.body.removeEventListener('keydown', this.handleKeydown.bind(this));
+    }
     render() {
         function acrdnheader1() {
             return (
@@ -48,12 +62,13 @@ export class KeyboardInteraction extends SampleBase<{}, {}> {
                 </div>
             );
         }
+
         return (
             <div className='control-pane'>
                 <div className='control-section accordion-control-section'>
                     <div className='control Accordion-sample' style={{ margin: '25px 0' }}>
                         {/* Render the Accoridon Component */}
-                        <AccordionComponent>
+                        <AccordionComponent ref={accordion => this.acrdnObj = accordion}>
                             <AccordionItemsDirective>
                                 <AccordionItemDirective header={acrdnheader1} expanded={true} content={acrdnContent1} />
                                 <AccordionItemDirective header={acrdnheader2} content={acrdnContent2} />

src/arc-gauge/config.tsx

@@ -1,6 +1,6 @@
 export const ArcGaugeSampleOrder:Object = [
-    { 'path': 'arc-gauge/default-functionalities', 'component':'Default', 'name': 'Default Functionalities', 'type' : 'new', 'description':'This demo for Essential JS2 Circular Gauge control illustrates the default rendering of circular gauge.', 'order': '01', 'category': 'Arc Gauge' },
-    { 'path': 'arc-gauge/customer-satisfaction-score', 'component':'CustomerSatisfactionScore', 'name': 'Customer Satisfaction Score', 'type' : 'new', 'description':'This demo for Essential JS2 Circular Gauge control shows various properties available to customize the ticks and labels of an axis.', 'order': '01', 'category': 'Arc Gauge' },
-    { 'path': 'arc-gauge/key-performance-indicator', 'component':'KeyPerformanceIndicator', 'name': 'Key Performance Indicator', 'type' : 'new', 'description':'This demo for Essential JS2 Circular Gauge control visualizes the circular gauge with multiple axes.', 'order': '01', 'category': 'Arc Gauge' },
-    { 'path': 'arc-gauge/patterns', 'component':'Patterns', 'name': 'Patterns', 'type' : 'new', 'description':'This demo for Essential JS2 Circular Gauge control illustrates to position the customer labels in a circular gauge.', 'order': '01', 'category': 'Arc Gauge' }    
+    { 'path': 'arc-gauge/default-functionalities', 'component':'Default', 'name': 'Default Functionalities', 'description':'This demo for Essential JS2 Circular Gauge control illustrates the default rendering of circular gauge.', 'order': '01', 'category': 'Arc Gauge' },
+    { 'path': 'arc-gauge/customer-satisfaction-score', 'component':'CustomerSatisfactionScore', 'name': 'Customer Satisfaction Score', 'description':'This demo for Essential JS2 Circular Gauge control shows various properties available to customize the ticks and labels of an axis.', 'order': '01', 'category': 'Arc Gauge' },
+    { 'path': 'arc-gauge/key-performance-indicator', 'component':'KeyPerformanceIndicator', 'name': 'Key Performance Indicator', 'description':'This demo for Essential JS2 Circular Gauge control visualizes the circular gauge with multiple axes.', 'order': '01', 'category': 'Arc Gauge' },
+    { 'path': 'arc-gauge/patterns', 'component':'Patterns', 'name': 'Patterns', 'description':'This demo for Essential JS2 Circular Gauge control illustrates to position the customer labels in a circular gauge.', 'order': '01', 'category': 'Arc Gauge' }    
 ]

src/arc-gauge/customer-satisfaction-score-functional.tsx

@@ -33,7 +33,7 @@ function CustomerSatisfactionScore() {
             <style>
                 {SAMPLE_CSS}
             </style>
-            <div className='control-section' style={{ display: 'flex', justifyContent: 'center' }}>
+            <div className='control-section'>
                 <CircularGaugeComponent load={load.bind(this)} id="gauge" background="transparent" height="400px" allowMargin={false} title="Customer Satisfaction Score" titleStyle={{ size: '18px', fontFamily: 'inherit' }}
                     tooltip={{ enable: true, template: '<div style="font-size:18px;background:white;width:150px;color:#595959;border:1px solid #e8e8e8">Current Score: 7.5 </div>' }}
                     legendSettings={{ visible: true, position: 'Bottom', width: "70%", textStyle: { fontFamily: 'inherit', size: '12px' }, }} >

src/arc-gauge/customer-satisfaction-score.tsx

@@ -31,7 +31,7 @@
          <style>
            {SAMPLE_CSS}
          </style>
-         <div className='control-section' style={{ display: 'flex', justifyContent: 'center' }}>
+         <div className='control-section'>
            <CircularGaugeComponent load={this.load.bind(this)} id="gauge" background="transparent" height="400px" allowMargin={false} title="Customer Satisfaction Score" titleStyle={{ size: '18px', fontFamily: 'inherit' }}
              tooltip={{ enable: true, template: '<div style="font-size:18px;background:white;width:150px;color:#595959;border:1px solid #e8e8e8">Current Score: 7.5 </div>' }}
              legendSettings={{ visible: true, position: 'Bottom', width: "70%", textStyle: { fontFamily: 'inherit', size: '12px' }, }} >

src/arc-gauge/default-functionalities-functional.tsx

@@ -56,7 +56,7 @@ function Default() {
             <style>
                 {SAMPLE_CSS}
             </style>
-            <div className='control-section' style={{ display: 'flex', justifyContent: 'center' }}>
+            <div className='control-section'>
                 <CircularGaugeComponent load={load.bind(this)} id="gauge" background="transparent" height="500px" title="Female (% usage) on popular social network" titleStyle={{ size: '18px', fontFamily: 'inherit' }} >
                     <Inject services={[Annotations]} />
                     <AxesDirective>
@@ -78,15 +78,15 @@ function Default() {
                             </PointersDirective>
                             <RangesDirective>
                                 <RangeDirective start={0} end={68} radius="94%" color="#c8eab7" startWidth={22} endWidth={22} />
-                                <RangeDirective start={74} end={100} radius="90%" color="#7a7f82" startWidth={1} endWidth={1} />
+                                <RangeDirective start={74} end={100} radius="89%" color="#7a7f82" startWidth={1} endWidth={1} />
                                 <RangeDirective start={0} end={43} radius="80%" color="#82cdbc" startWidth={22} endWidth={22} />
-                                <RangeDirective start={49} end={100} radius="76%" color="#7a7f82" startWidth={1} endWidth={1} />
+                                <RangeDirective start={49} end={100} radius="75%" color="#7a7f82" startWidth={1} endWidth={1} />
                                 <RangeDirective start={0} end={21} radius="66%" color="#43b6c4" startWidth={22} endWidth={22} />
-                                <RangeDirective start={28} end={100} radius="63%" color="#7a7f82" startWidth={1} endWidth={1} />
+                                <RangeDirective start={28} end={100} radius="61%" color="#7a7f82" startWidth={1} endWidth={1} />
                                 <RangeDirective start={0} end={75} radius="52%" color="#1d91bf" startWidth={22} endWidth={22} />
-                                <RangeDirective start={85} end={100} radius="49%" color="#7a7f82" startWidth={1} endWidth={1} />
+                                <RangeDirective start={85} end={100} radius="47%" color="#7a7f82" startWidth={1} endWidth={1} />
                                 <RangeDirective start={0} end={44} radius="38%" color="#205ea8" startWidth={22} endWidth={22} />
-                                <RangeDirective start={55} end={100} radius="35%" color="#7a7f82" startWidth={1} endWidth={1} />
+                                <RangeDirective start={55} end={100} radius="34%" color="#7a7f82" startWidth={1} endWidth={1} />
                             </RangesDirective>
                         </AxisDirective>
                     </AxesDirective>