From 71b596d57d25bc2015b12350dc97976b60a86806 Mon Sep 17 00:00:00 2001
From: "azure-pipelines[bot]"
 <36771401+azure-pipelines[bot]@users.noreply.github.com>
Date: Mon, 13 Nov 2023 11:36:22 -0500
Subject: [PATCH] Adding changes from build
 igniteui-xplat-examples-output+PRs_2023.10.30.3 (#392)

Co-authored-by: tfsbuild <tfsbuild@infragistics.com>
---
 samples/grids/grid/action-strip/src/index.tsx |   3 +-
 .../grid/binding-composite-data/src/index.tsx | 108 ++++++++----------
 .../grid/binding-nested-data-1/src/index.tsx  |  30 +++--
 .../src/index.tsx                             |   2 +-
 4 files changed, 65 insertions(+), 78 deletions(-)

diff --git a/samples/grids/grid/action-strip/src/index.tsx b/samples/grids/grid/action-strip/src/index.tsx
index 0c3ceb9c7d..9eeff1159c 100644
--- a/samples/grids/grid/action-strip/src/index.tsx
+++ b/samples/grids/grid/action-strip/src/index.tsx
@@ -69,7 +69,8 @@ export default class Sample extends React.Component<any, any> {
                         </IgrGridPinningActions>
                         <IgrGridEditingActions
                             editRow="true"
-                            deleteRow="false">
+                            deleteRow="true"
+                            addRow="true">
                         </IgrGridEditingActions>
                     </IgrActionStrip>
                     <IgrColumn
diff --git a/samples/grids/grid/binding-composite-data/src/index.tsx b/samples/grids/grid/binding-composite-data/src/index.tsx
index 502dd98921..0fed923592 100644
--- a/samples/grids/grid/binding-composite-data/src/index.tsx
+++ b/samples/grids/grid/binding-composite-data/src/index.tsx
@@ -3,15 +3,18 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 
 import { IgrGridModule } from 'igniteui-react-grids';
+import { IgrInputModule } from 'igniteui-react';
 import { IgrGrid, IgrColumn } from 'igniteui-react-grids';
 import { CustomersDataItem, CustomersData } from './CustomersData';
 import { IgrCellTemplateContext } from 'igniteui-react-grids';
+import { IgrInput } from 'igniteui-react';
 
 import 'igniteui-react-grids/grids/combined';
 import 'igniteui-react-grids/grids/themes/light/bootstrap.css';
 
 const mods: any[] = [
-    IgrGridModule
+    IgrGridModule,
+    IgrInputModule
 ];
 mods.forEach((m) => m.register());
 
@@ -106,6 +109,7 @@ export default class Sample extends React.Component<any, any> {
         <>
             <div className="contact-container">
                 <span><strong>Name:</strong> {cell.row.data.ContactName}</span>
+                <br />
                 <span><strong>Title:</strong> {cell.row.data.ContactTitle}</span>
                 <br />
                 <span><strong>Company:</strong> {cell.row.data.CompanyName}</span>
@@ -124,32 +128,25 @@ export default class Sample extends React.Component<any, any> {
 
         return (
             <>
-                <div className="contact-container--edit" style={{display: "inline-grid"}}>
-                    <div>
-                        <strong>Name:</strong>
-                        <input id='ContactName' onChange={(e: any) =>
-                            {
-                                cell.row.data.ContactName = e.target.value;
-                                this.forceUpdate();
-                            }
-                            } value={cell.row.data.ContactName}></input>
-                    </div>
-                    <div>
-                        <strong>Title:</strong>
-                        <input id='ContactTitle' onChange={(e: any) =>
-                            {
-                                cell.row.data.ContactTitle = e.target.value;
-                                this.forceUpdate();
-                            }} value={cell.row.data.ContactTitle}></input>
-                    </div>
-                    <div>
-                        <strong>Company:</strong>
-                        <input id='CompanyName' onChange={(e: any) =>
-                            {
-                                cell.row.data.CompanyName = e.target.value;
-                                this.forceUpdate();
-                            }} value={cell.row.data.CompanyName}></input>
-                    </div>
+                <div className="contact-container--edit" style={{padding: "1rem"}}>
+                    <IgrInput label='Name' inputOcurred={(input: any, e: any) =>
+                        {
+                            cell.row.data.ContactName = e.detail;
+                            this.forceUpdate();
+                        }
+                        } value={cell.row.data.ContactName}></IgrInput>
+                    <IgrInput label='Title' inputOcurred={(input: any, e: any) =>
+                        {
+                            cell.row.data.ContactTitle = e.detail;
+                            this.forceUpdate();
+                        }
+                        } value={cell.row.data.ContactTitle}></IgrInput>
+                    <IgrInput label='Company' inputOcurred={(input: any, e: any) =>
+                        {
+                            cell.row.data.CompanyName = e.detail;
+                            this.forceUpdate();
+                        }
+                        } value={cell.row.data.CompanyName}></IgrInput>
                 </div>
             </>
         );
@@ -190,38 +187,31 @@ export default class Sample extends React.Component<any, any> {
 
         return (
             <>
-                <div className="address-container--edit" style={{display: "inline-grid"}}>
-                    <div>
-                        <span><strong>Country:</strong></span>
-                        <input id='Country' onChange={(e: any) =>
-                            {
-                                cell.row.data.Country = e.target.value;
-                                grid.markForCheck();
-                            }} value={cell.row.data.Country}></input>
-                        <br/>
-                        <span><strong>City:</strong></span>
-                        <input id='City' onChange={(e: any) =>
-                            {
-                                cell.row.data.City = e.target.value;
-                                grid.markForCheck();
-                            }} value={cell.row.data.City}></input>
-                    </div>
-                    <div>
-                        <span><strong>Postal Code:</strong></span>
-                        <input id='PostalCode' onChange={(e: any) =>
-                            {
-                                cell.row.data.PostalCode = e.target.value;
-                                grid.markForCheck();
-                            }} value={cell.row.data.PostalCode}></input>
-                        <br/>
-                        <span><strong>Selected:</strong></span>
-                        <input id='Phone' onChange={(e: any) =>
-                            {
-                                cell.row.data.Phone = e.target.value;
-                                grid.markForCheck();
-                            }} value={cell.row.data.Phone}></input>
-                    </div>
-                    <br/>
+                <div className="contact-container--edit" style={{padding: "1rem"}}>
+                    <IgrInput label='Country' inputOcurred={(input: any, e: any) =>
+                        {
+                            cell.row.data.Country = e.detail;
+                            this.forceUpdate();
+                        }
+                        } value={cell.row.data.Country}></IgrInput>
+                    <IgrInput label='City' inputOcurred={(input: any, e: any) =>
+                        {
+                            cell.row.data.City = e.detail;
+                            this.forceUpdate();
+                        }
+                        } value={cell.row.data.City}></IgrInput>
+                    <IgrInput label='Postal Code' inputOcurred={(input: any, e: any) =>
+                        {
+                            cell.row.data.PostalCode = e.detail;
+                            this.forceUpdate();
+                        }
+                        } value={cell.row.data.PostalCode}></IgrInput>
+                    <IgrInput label='Phone' inputOcurred={(input: any, e: any) =>
+                        {
+                            cell.row.data.Phone = e.detail;
+                            this.forceUpdate();
+                        }
+                        } value={cell.row.data.Phone}></IgrInput>
                 </div>
             </>
         );
diff --git a/samples/grids/grid/binding-nested-data-1/src/index.tsx b/samples/grids/grid/binding-nested-data-1/src/index.tsx
index e81b1d8d9a..523fb5ae59 100644
--- a/samples/grids/grid/binding-nested-data-1/src/index.tsx
+++ b/samples/grids/grid/binding-nested-data-1/src/index.tsx
@@ -3,16 +3,18 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 
 import { IgrGridModule } from 'igniteui-react-grids';
+import { IgrInputModule } from 'igniteui-react';
 import { IgrGrid, IgrColumn } from 'igniteui-react-grids';
 import { EmployeesNestedDataItem, EmployeesNestedDataItem_EmployeesItem, EmployeesNestedData } from './EmployeesNestedData';
 import { IgrCellTemplateContext } from 'igniteui-react-grids';
-import { IgrExpansionPanel } from 'igniteui-react';
+import { IgrExpansionPanel, IgrInput } from 'igniteui-react';
 
 import 'igniteui-react-grids/grids/combined';
 import 'igniteui-react-grids/grids/themes/light/bootstrap.css';
 
 const mods: any[] = [
-    IgrGridModule
+    IgrGridModule,
+    IgrInputModule
 ];
 mods.forEach((m) => m.register());
 
@@ -59,7 +61,7 @@ export default class Sample extends React.Component<any, any> {
                         field="Employees"
                         header="Employees"
                         bodyTemplate={this.webGridNestedDataCellTemplate}
-                        width="30%"
+                        width="20%"
                         name="column1">
                     </IgrColumn>
                     <IgrColumn
@@ -110,20 +112,14 @@ export default class Sample extends React.Component<any, any> {
                 {value.Name}
                 </div>
                 <div className="description">
-                    <div style={{display: "flex", alignItems: "center"}}>
-                        <label htmlFor="title" style={{width: "2rem", margin: "0rem"}}>Title</label>
-                        <input id='Title' type="text" name="title" value={value.Title} onChange={(e: any) => {
-                             props.dataContext.cell.value[0][e.target.id] = e.target.value;
-                             grid.markForCheck();
-                            }} style={{textOverflow: "ellipsis"}} />
-                    </div>
-                    <div style={{display: "flex", alignItems: "center"}}>
-                        <label htmlFor="age" style={{width: "2rem", margin: "0rem"}}>Age</label>
-                        <input id='Age' type="number" name="title" value={value.Age} onChange={(e: any) => {
-                                props.dataContext.cell.value[0][e.target.id] = e.target.value;
-                                grid.markForCheck();
-                            }} style={{textOverflow: "ellipsis"}} />
-                    </div>
+                    <IgrInput type="text" label="Title" name="title" value={value.Title} change={(s:any, e: any) => {
+                            props.dataContext.cell.value[0][s.label] = e.detail;
+                            grid.markForCheck();
+                        }} style={{textOverflow: "ellipsis"}} />
+                    <IgrInput type="number" label="Age" name="title" value={value.Age} inputOcurred={(s:any, e: any) => {
+                            props.dataContext.cell.value[0][s.label] = e.detail;
+                            grid.markForCheck();
+                        }} style={{textOverflow: "ellipsis"}} />
                 </div>
             </IgrExpansionPanel>
         </>);
diff --git a/samples/grids/grid/multi-column-headers-overview/src/index.tsx b/samples/grids/grid/multi-column-headers-overview/src/index.tsx
index 1f095b5953..ceaba60da4 100644
--- a/samples/grids/grid/multi-column-headers-overview/src/index.tsx
+++ b/samples/grids/grid/multi-column-headers-overview/src/index.tsx
@@ -173,7 +173,7 @@ export default class Sample extends React.Component<any, any> {
     }
 
     public webGridPinFirstGroupToggle(sender: any, args: IgrPropertyEditorPropertyDescriptionButtonClickEventArgs): void {
-        const grid: IgrGrid = this.grid
+        const grid: IgrGrid = this.grid;
         const firstColumnGroup = grid.getColumnByName("CompanyName").parent;
         firstColumnGroup.pinned = !firstColumnGroup.pinned;
         grid.markForCheck();