merging vnext into master (#661)

* added grid and hgrid remote paging samples

* docs(grid): initial implementation excel style editing

* docs(grid): initial excel style editing sample

* docs(grid): updated sample

* docs(grid): added numpads to case

* docs(grid): fixed column targeting on enter nav

* chore(grid): fixed type missed warning

* Add default separator the clipboard operations samples.

* Reorder avatar size sample to match the wc one.

* Fixed console errors for Hgrid remote paging

* Adding Divider Samples

* Resolving key errors in browser console

* Correcting the duplicate key

* chore(divider-samples): format tsx files

* Adding changes from build igniteui-xplat-examples-output+PRs_2024.9.13.1

* Fix missing gridRef current argument use.

* docs(grid): removed old sample

* docs(grid): removed perPage from constructor

* Renaming the sample so it doesn't cause build error (#652)

Co-authored-by: Ivan Kitanov <[email protected]>

* fix(grid): updated excel style to navigate on single enter click if in edit mode

* fix(grid): removed extra sample to avoid confusion

* chore(*): update ig to 18.7.2-beta.0

* chore(*): update ig to 18.7.3

* Adding changes from build igniteui-xplat-examples-output+PRs_2024.10.21.1 (#656)

Co-authored-by: tfsbuild <[email protected]>

* add map selection (#660)

* add "react-icons

* fix styling in Map Selection

---------

Co-authored-by: ttonev <[email protected]>
Co-authored-by: Deyan Kamburov <[email protected]>
Co-authored-by: Mariela Tihova <[email protected]>
Co-authored-by: skrustev <[email protected]>
Co-authored-by: Ivan Kitanov <[email protected]>
Co-authored-by: ddaribo <[email protected]>
Co-authored-by: tfsbuild <[email protected]>
Co-authored-by: Vasya Kacheshmarova <[email protected]>
Co-authored-by: Ivan Kitanov <[email protected]>
Co-authored-by: Deyan Kamburov <[email protected]>
Co-authored-by: IMinchev64 <[email protected]>
Co-authored-by: azure-pipelines[bot] <36771401+azure-pipelines[bot]@users.noreply.github.com>

Author: 12 people

browser/package-lock.json

@@ -42,6 +42,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-loadable": "5.5.0",
+    "react-icons": "^5.3.0",
     "react-router": "4.3.1",
     "react-router-dom": "^5.2.0",
     "react-transition-group": "4.4.2",

browser/package.json

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 
 import { IgrLegendModule, IgrNumberAbbreviatorModule, IgrDataChartCoreModule, IgrDataChartScatterModule, IgrDataChartScatterCoreModule, IgrDataChartInteractivityModule, IgrDataLegendModule, IgrDataChartAnnotationModule } from 'igniteui-react-charts';
-import { IgrDataLegend, IgrDataChart, IgrNumericXAxis, IgrNumericYAxis, IgrBubbleSeries, IgrSizeScale, IgrCrosshairLayer } from 'igniteui-react-charts';
+import { IgrDataLegend, IgrDataChart, IgrNumericYAxis, IgrNumericXAxis, IgrBubbleSeries, IgrSizeScale, IgrCrosshairLayer } from 'igniteui-react-charts';
 import { CountryDemographicAfricanItem, CountryDemographicAfrican } from './CountryDemographicAfrican';
 import { CountryDemographicEuropeItem, CountryDemographicEurope } from './CountryDemographicEurope';
 
@@ -30,8 +30,8 @@ export default class Sample extends React.Component<any, any> {
         this.chart = r;
         this.setState({});
     }
-    private xAxis: IgrNumericXAxis
     private yAxis: IgrNumericYAxis
+    private xAxis: IgrNumericXAxis
     private bubbleSeries1: IgrBubbleSeries
     private  _sizeScale1: IgrSizeScale | null = null;
     public get sizeScale1(): IgrSizeScale {
@@ -80,27 +80,29 @@ export default class Sample extends React.Component<any, any> {
             <div className="legend">
                 <IgrDataLegend
                     ref={this.legendRef}
-                    target={this.chart}>
+                    target={this.chart}
+                    unitsText="%"
+                    includedColumns={["BirthRate", "DeathRate"]}>
                 </IgrDataLegend>
             </div>
 
             <div className="container fill">
                 <IgrDataChart
                     ref={this.chartRef}>
-                    <IgrNumericXAxis
-                        name="xAxis"
-                        title="Death Rate"
-                        interval="1"
-                        minimumValue="4"
-                        maximumValue="16">
-                    </IgrNumericXAxis>
                     <IgrNumericYAxis
                         name="yAxis"
                         title="Birth Rate"
                         interval="10"
                         minimumValue="0"
                         maximumValue="60">
                     </IgrNumericYAxis>
+                    <IgrNumericXAxis
+                        name="xAxis"
+                        title="Death Rate"
+                        interval="1"
+                        minimumValue="4"
+                        maximumValue="16">
+                    </IgrNumericXAxis>
                     <IgrBubbleSeries
                         name="bubbleSeries1"
                         xAxisName="xAxis"